/* Вариант 14 "Плакат": оранжевый работает крупными плашками, а не деталями.
   Блок этапов целиком лежит на #FF561E, узкий гротеск в верхнем регистре. */
:root {
  --bg: #F2F0EA;  --surface: #E6E3DA;  --surface-2: #DBD7CC;
  --text: #111112; --muted: #5C5C58;
  --accent: #FF561E; --accent-hover: #E8460F; --accent-ink: #1A0B05; --accent-text: #C63B0C;
  --rule: #D3D0C6; --head-rule: #111112; --field: #FFFFFF; --danger: #C4160D;
  --stage-bg: #EDECE8;

  --shell: 1400px; --gutter: clamp(20px, 4vw, 56px);
  --radius: 0px; --rule-w: 2px; --thumb-radius: 0px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: 'Oswald', system-ui, sans-serif;
  --font-text: 'Rubik', system-ui, sans-serif;
  --display-weight: 600; --display-tracking: -0.005em;
  --brand-weight: 600; --brand-tracking: 0.01em;
  --h1-size: clamp(2rem, 4.5vw, 4rem); --h1-weight: 600; --h1-tracking: -0.005em;
}
h1, h2, h3, .brand { text-transform: uppercase; }
.hero h1 { max-width: 24ch; }
/* ch считается по узкому Oswald, поэтому базовые ограничения тесноваты */
.about__statement { max-width: 30ch; text-transform: uppercase; }

/* плитка этапов лежит на сплошной оранжевой плашке */
.section--tint { background: var(--accent); }
.section--tint .h2 { color: var(--accent-ink); }
.section--tint .lead { color: color-mix(in srgb, var(--accent-ink) 78%, transparent); }
.bento { background: var(--accent-ink); border-color: var(--accent-ink); }
.cell--accent { background: var(--text); color: var(--bg); }
.cell--accent p { color: color-mix(in srgb, var(--bg) 80%, transparent); }
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121213; --surface: #1B1B1D; --surface-2: #232325;
    --text: #F1F0ED; --muted: #96968F;
    --accent: #FF561E; --accent-hover: #FF6E3C; --accent-ink: #1A0B05; --accent-text: #FF7A4D;
    --rule: #2E2E31; --head-rule: #F1F0ED; --field: #1A1A1C;
    --stage-bg: #1A1A19;
  }
}