src/art-direction.css

/* Narrative 55 / Creative tension 30 / Precision 15 */
:root {
  --ink: #171713;
  --paper: #f4f0e6;
  --surface: #e5ded0;
  --blue: #2939e8;
  --red: #c92f24;
  --signal: #c9ff4a;
  --line: #c8c0b2;
}

.topbar { background: var(--ink); color: var(--paper); border-bottom-color: #ffffff24; }
.topbar .ghost { border-color: #ffffff77; }
.status i, .quality-strip i { background: var(--signal); }
.hero { min-height: 520px; padding: 58px 30px 50px; display: grid; grid-template-columns: minmax(570px,1.1fr) minmax(420px,.9fr); gap: 30px; align-items: center; background: var(--ink); color: var(--paper); overflow: hidden; }
.hero-copy { position: relative; z-index: 2; }
.hero h1 { font-size: clamp(54px,5.45vw,82px); line-height: .98; margin: 17px 0 24px; }
.hero h1 em { white-space: nowrap; }
.hero h1 em { color: var(--signal); }
.hero p { margin: 0; color: #bcb8ae; max-width: 470px; }
.hero-deck { height: 390px; position: relative; perspective: 1200px; }
.hero-card { position: absolute; width: min(33vw,390px); aspect-ratio: 16/10; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 30px 80px #0008; border: 1px solid #000; transition: transform .35s ease; }
.hero-card small { font: 9px 'DM Mono'; letter-spacing: .13em; }
.hero-card b { font-size: clamp(23px,2.8vw,42px); line-height: 1.08; letter-spacing: -.06em; }
.hero-card i, .hero-card span { font: 500 11px 'DM Mono'; font-style: normal; align-self: flex-end; }
.card-a { left: 2%; top: 10%; background: var(--paper); color: var(--ink); transform: rotate(-8deg); }
.card-b { left: 25%; top: 2%; background: var(--blue); color: white; transform: rotate(3deg); z-index: 2; }
.card-c { right: 0; bottom: 0; background: var(--red); color: var(--paper); transform: rotate(10deg); z-index: 3; }
.hero-deck:hover .card-a { transform: translate(-18px,-8px) rotate(-11deg); }
.hero-deck:hover .card-b { transform: translateY(-15px) rotate(1deg); }
.hero-deck:hover .card-c { transform: translate(18px,8px) rotate(13deg); }
.source-panel { background: var(--surface); }
.editor { background: #d1cabd; }
.steps button.active { background: var(--blue); }
.revision-bar button, .export-actions .primary { background: var(--red); border-color: var(--red); }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-deck { height: 310px; }
  .hero-card { width: min(58vw,390px); }
}

@media (max-width: 600px) {
  .hero { display: grid; padding: 38px 16px 26px; }
  .hero h1 { font-size: 49px; }
  .hero-deck { height: 235px; }
  .hero-card { width: 65vw; padding: 15px; }
  .hero-card b { font-size: 21px; }
  .card-a { left: 0; }
  .card-b { left: 19%; }
  .card-c { right: -4%; }
}