src/art-direction.css

/* Strategic clarity 50 / Co-creation 30 / Expressiveness 20 */
:root {
  --alp-ink: #211a1b;
  --alp-paper: #f7f1ea;
  --alp-surface: #eee4d8;
  --alp-primary: #be442f;
  --alp-secondary: #6c4dff;
  --alp-signal: #d7ff6a;
  --alp-line: #cbbeb1;
}

body, .app { background: var(--alp-paper); color: var(--alp-ink); }
.rail { background: var(--alp-ink); }
.mark span, .rail nav button.active i { color: var(--alp-signal); border-color: var(--alp-signal); background: var(--alp-signal); }
.rail nav button.active { background: #3a292d; box-shadow: inset 3px 0 0 var(--alp-primary); }
.rail-foot b { color: var(--alp-signal); }
.topbar { background: color-mix(in srgb, var(--alp-paper) 91%, transparent); border-color: var(--alp-line); }
.topbar>div span { background: var(--alp-ink); color: var(--alp-paper); }
.topbar em { color: #32793a; }
.hearing-layout { background: radial-gradient(circle at 72% 14%, #d7ff6a20 0 12%, transparent 32%), var(--alp-paper); }
.hearing-main { position: relative; overflow: hidden; }
.hearing-main::after { content: "BUILD / TEST / REFINE"; position: absolute; right: -130px; top: 180px; z-index: 0; color: #211a1b08; font: 500 92px/1 'DM Mono'; letter-spacing: -.08em; transform: rotate(90deg); pointer-events: none; }
.hearing-main>* { position: relative; z-index: 1; }
.source-drop { margin-bottom: 42px; border: 0; background: var(--alp-surface); box-shadow: inset 0 0 0 1px var(--alp-line); transition: transform .2s, box-shadow .2s; }
.source-drop:hover { transform: translateY(-2px); box-shadow: 7px 7px 0 var(--alp-primary); }
.source-drop>span { background: var(--alp-primary); color: var(--alp-paper); }
.question::before { content: "STRATEGIC CLARITY 50  /  CO-CREATION 30  /  EXPRESSION 20"; display: block; width: max-content; max-width: 100%; margin-bottom: 18px; padding: 8px 11px; background: var(--alp-signal); color: var(--alp-ink); font: 500 9px 'DM Mono'; letter-spacing: .09em; }
.question>small, .interview-done>small, .stage-intro>small { color: var(--alp-primary); }
.question h1, .interview-done h1, .stage-intro h1 { max-width: 840px; }
.answer-grid { gap: 12px; }
.answer-grid button { min-height: 126px; padding: 24px 48px 22px 22px; background: #fffaf4; border-color: var(--alp-line); overflow: hidden; }
.answer-grid button::before { position: absolute; right: 16px; bottom: -12px; color: #211a1b0c; font: 500 72px/1 'DM Mono'; }
.answer-grid button:nth-child(1)::before { content: "01"; }
.answer-grid button:nth-child(2)::before { content: "02"; }
.answer-grid button:nth-child(3)::before { content: "03"; }
.answer-grid button:nth-child(4)::before { content: "04"; }
.answer-grid button:nth-child(even) { background: #efe2d4; }
.answer-grid button:hover, .answer-grid button.selected { background: var(--alp-primary); color: var(--alp-paper); border-color: var(--alp-primary); box-shadow: 7px 7px 0 var(--alp-ink); }
.answer-grid button:hover small, .answer-grid button.selected small { color: #f4d8d1; }
.continue, .interview-done button, .primary, .research-ledger button { background: var(--alp-primary); }
.answer-log { border-color: #4c393d; background: #2a2022; color: var(--alp-paper); }
.answer-log>span { color: var(--alp-signal); }
.answer-log>button { color: var(--alp-paper); border-color: #503d41; }
.answer-log button small, .answer-log button>i, .answer-log>p { color: #ad9ca0; }
.stage-intro em, .page-canvas small, .page-canvas em, .review-head small { color: var(--alp-primary); }
.strategy-grid { background: var(--alp-line); border-color: var(--alp-line); }
.strategy-grid article { background: #fffaf4; }
.journey, .editor-shell, .comment-box, .export-grid button, .ship-check { background: var(--alp-ink); }
.journey small, .editor-shell aside>span, .checks>span, .ship-check b { color: var(--alp-signal); }
.tone-grid>article.selected { border-color: var(--alp-primary); box-shadow: 0 14px 38px #62201725; }
.tone-grid article.selected .tone-copy button { background: var(--alp-primary); border-color: var(--alp-primary); }
.mix-bar button, .editor-bar .primary, .comment-box button { background: var(--alp-signal); color: var(--alp-ink); }
.review-head .primary { background: var(--alp-primary); border-color: var(--alp-primary); }
.canvas-scroll { background: #d8cec2; }

@media (max-width: 760px) {
  .question::before { line-height: 1.5; }
  .answer-grid button { min-height: 112px; }
  .answer-log { background: var(--alp-paper); }
}