:root {
    color-scheme: dark;
    --forge: #0a0a0b;
    --graphite: #131416;
    --graphite-2: #1b1c1f;
    --line: #2b2d31;
    --steel: #8b8f96;
    --silver: #c9ccd2;
    --bone: #eceef1;
    --orange: #ff6a13;
    --ember: #ff9a3c;
    --molten: #c9430a;
    --paper: #eef0f2;
    --metal: linear-gradient(180deg, #fbfbfc 0%, #d9dce0 36%, #7d8189 50%, #b3b7be 60%, #f1f2f4 100%);
    --heat: linear-gradient(180deg, #ffc05a 0%, #ff9a3c 28%, #ff6a13 55%, #c9430a 100%);
    --display: "Unbounded", "Arial Black", Impact, sans-serif;
    --label: "Chakra Petch", "Arial Narrow", sans-serif;
    --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--forge); color: var(--bone); font: 400 16px/1.6 var(--body); padding-inline: 16px; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
  img { display: block; }

  .shell { max-width: 1240px; margin-inline: auto; display: grid; grid-template-columns: 200px 1fr; gap: 56px; }
  .toc { position: sticky; top: env(safe-area-inset-top, 0px); align-self: start; padding-block: 40px; }
  .toc img { width: 44px; margin-bottom: 28px; }
  .toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: s; }
  .toc a { display: flex; gap: 12px; text-decoration: none; padding: 7px 0; font: 600 12px/1.2 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); }
  .toc a::before { counter-increment: s; content: counter(s, decimal-leading-zero); color: var(--line); }
  .toc a:hover { color: var(--bone); }
  .toc a:hover::before { color: var(--orange); }
  main { min-width: 0; padding-block: 40px 100px; }

  .label { font: 600 12px/1.3 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
  .metal { background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .display { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: 1.04; margin: 0; text-wrap: balance; }
  .chamfer { --c: 14px; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); }
  p { max-width: 64ch; color: var(--silver); }
  code { font: 500 13px/1.5 var(--label); color: var(--ember); }

  section { padding-block: 88px 8px; border-top: 1px solid var(--line); margin-top: 88px; scroll-margin-top: 16px; }
  .sec-head { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: end; margin-bottom: 44px; }
  .sec-head h2 { font-size: clamp(30px, 4.6vw, 56px); }
  .sec-head p { margin: 0; }
  h3 { font: 600 13px/1.3 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--bone); margin: 0 0 14px; }

  /* COVER */
  .cover { position: relative; min-height: 560px; display: grid; align-content: space-between; padding: clamp(24px, 4vw, 48px); background: radial-gradient(70% 80% at 80% 30%, rgba(255,106,19,.16), transparent 65%), radial-gradient(60% 60% at 10% 90%, rgba(201,204,210,.08), transparent 70%), var(--graphite); overflow: hidden; }
  .cover .mark-bg { position: absolute; right: -8%; top: 50%; transform: translateY(-50%); width: 58%; max-width: 640px; opacity: .9; }
  .cover .top { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; position: relative; }
  .cover .logo { width: min(560px, 80%); position: relative; }
  .cover .bottom { position: relative; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: end; }
  .cover .bottom p { margin: 0; max-width: 42ch; }
  .tagline { font: 800 clamp(26px, 3.4vw, 40px)/1.05 var(--display); text-transform: uppercase; margin: 22px 0 0; }

  /* IDEA */
  .halves { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
  .half { padding: 32px; min-height: 280px; display: grid; align-content: space-between; gap: 24px; }
  .half.silver { background: linear-gradient(135deg, #e7e9ec, #9da1a8 55%, #cfd2d7); color: var(--forge); }
  .half.orange { background: var(--heat); color: #1a0a02; }
  .half h3 { color: inherit; font-size: 14px; }
  .half .big { font: 800 clamp(24px, 3vw, 36px)/1.05 var(--display); text-transform: uppercase; }
  .half ul { margin: 0; padding-left: 18px; font-weight: 500; }
  .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 48px; }
  .pillars h3 { color: var(--bone); }
  .pillars p { margin: 0; font-size: 15px; }
  .pillars .n { font: 800 13px/1 var(--display); color: var(--orange); display: block; margin-bottom: 14px; }
  .statement { font: 400 clamp(20px, 2.3vw, 28px)/1.35 var(--display); max-width: 30ch; color: var(--bone); margin: 56px 0 0; }
  .statement b { color: var(--orange); font-weight: 600; }

  /* LOGO */
  .logo-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
  .panel { position: relative; display: grid; place-items: center; padding: 48px 32px; min-height: 260px; }
  .panel.dark { background: var(--graphite); }
  .panel.light { background: var(--paper); }
  .panel.orangebg { background: var(--orange); }
  .panel .tag { position: absolute; left: 16px; bottom: 14px; }
  .panel.light .tag { color: #5d6168; }
  .panel.orangebg .tag { color: #3a1402; }
  .panel img.word { width: min(420px, 100%); }
  .panel img.mk { width: 120px; }
  .rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
  .clear { position: relative; padding: 38px; outline: 1px dashed rgba(255,106,19,.7); outline-offset: -1px; }
  .clear img { width: 100%; max-width: 300px; outline: 1px solid rgba(201,204,210,.25); }
  .clear .x { position: absolute; font: 600 11px/1 var(--label); color: var(--orange); }
  .sizes { display: flex; align-items: end; gap: 28px; flex-wrap: wrap; }
  .sizes figure { margin: 0; display: grid; gap: 10px; }
  .donts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
  .dont { margin: 0; }
  .dont .panel { min-height: 150px; padding: 24px; }
  .dont img { width: 100%; max-width: 200px; }
  .dont figcaption { margin-top: 10px; font-size: 14px; color: var(--silver); display: flex; gap: 8px; }
  .dont figcaption::before { content: "✕"; color: var(--orange); font-weight: 600; }

  /* COLOR */
  .swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .sw { --c: 16px; background: var(--graphite); padding: 1px; border: 0; text-align: left; cursor: pointer; color: var(--bone); font: inherit; }
  .sw .chip { height: 170px; }
  .sw.small .chip { height: 96px; }
  .sw .meta { padding: 16px 18px 18px; display: grid; gap: 4px; }
  .sw .name { font: 600 17px/1.2 var(--display); text-transform: uppercase; }
  .sw.small .name { font-size: 13px; }
  .sw .vals { font: 500 12px/1.6 var(--label); color: var(--steel); font-variant-numeric: tabular-nums; letter-spacing: .04em; }
  .sw .role { font-size: 14px; color: var(--silver); }
  .sw .copied { color: var(--orange); font: 600 11px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; min-height: 11px; }
  .sw:hover .name { color: var(--ember); }
  .secondary { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 12px; }
  .ratio { display: flex; height: 54px; margin-top: 40px; }
  .ratio div { display: flex; align-items: end; padding: 8px 10px; font: 600 11px/1 var(--label); letter-spacing: .1em; }
  .contrast { width: 100%; border-collapse: collapse; margin-top: 40px; font-size: 14px; }
  .table-wrap { overflow-x: auto; }
  .contrast th, .contrast td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .contrast th { font: 600 11px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
  .contrast td.num { font-variant-numeric: tabular-nums; font-family: var(--label); }
  .sample { display: inline-block; padding: 4px 10px; font-weight: 600; }
  .pass { color: #7fd48a; } .limit { color: var(--ember); }

  /* FINISHES */
  .finishes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .finish { background: var(--graphite); padding: 28px; }
  .finish .word { font: 900 clamp(40px, 6vw, 76px)/1 var(--display); text-transform: uppercase; }
  .finish .heat { background: var(--heat); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .finish pre { margin: 18px 0 0; white-space: pre-wrap; word-break: break-word; background: var(--forge); padding: 14px; font: 500 12px/1.6 var(--label); color: var(--silver); }
  .finish p { font-size: 14px; margin: 14px 0 0; }

  /* TYPE */
  .faces { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
  .face { background: var(--graphite); padding: 28px; display: grid; gap: 16px; align-content: start; }
  .face .aa { font-size: 88px; line-height: 1; }
  .face p { margin: 0; font-size: 14px; }
  .scale { margin-top: 12px; background: var(--graphite); }
  .row { display: grid; grid-template-columns: 170px 1fr; gap: 24px; align-items: baseline; padding: 20px 28px; border-bottom: 1px solid var(--line); }
  .row:last-child { border-bottom: 0; }
  .row .spec { font: 500 12px/1.5 var(--label); color: var(--steel); letter-spacing: .06em; }
  .row .ex { min-width: 0; overflow-wrap: anywhere; }

  /* COMPONENTS */
  .comp { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .comp .panel { place-items: start; align-content: start; gap: 18px; min-height: 0; padding: 32px; }
  .btn { --c: 9px; display: inline-flex; align-items: center; font: 600 12px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; padding: 15px 22px; border: 0; cursor: pointer; clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c)); text-decoration: none; }
  .btn-silver { background: linear-gradient(180deg, #f3f4f6, #b8bcc3); color: var(--forge); }
  .btn-ghost { background: var(--line); color: var(--bone); position: relative; isolation: isolate; }
  .btn-ghost::before { content: ""; position: absolute; inset: 1px; background: var(--graphite); clip-path: inherit; z-index: -1; }
  .btn-orange { background: linear-gradient(180deg, var(--ember), var(--orange) 55%, var(--molten)); color: #1a0a02; }
  .btns { display: flex; gap: 10px; flex-wrap: wrap; }
  .pills { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; }
  .pills span { font: 600 11px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; padding: 9px 14px; border-radius: 999px; color: var(--silver); }
  .pills span.on { background: linear-gradient(180deg, #f3f4f6, #b9bdc4); color: var(--forge); }
  .chips { display: flex; gap: 8px; flex-wrap: wrap; }
  .chip-tag { --c: 6px; background: var(--graphite-2); padding: 7px 10px; font: 600 10px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--silver); }
  .chip-tag.hot { background: rgba(255,106,19,.14); color: var(--ember); }
  .spec-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--silver); }
  .chamfer-demo { display: flex; gap: 20px; align-items: end; flex-wrap: wrap; }
  .chamfer-demo div { background: var(--steel); display: grid; place-items: center; font: 600 11px/1 var(--label); color: var(--forge); letter-spacing: .1em; }

  /* IMAGERY */
  .imagery { display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
  .shot { position: relative; background: radial-gradient(45% 55% at 55% 45%, rgba(236,238,241,.18), transparent 70%), radial-gradient(35% 30% at 80% 80%, rgba(255,106,19,.35), transparent 70%), #070708; min-height: 340px; display: grid; place-items: center; overflow: hidden; }
  .shot img { width: 46%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.8)); }
  .shot .tag { position: absolute; left: 16px; bottom: 14px; }
  .lists { display: grid; gap: 12px; }
  .lists .panel { place-items: start; min-height: 0; padding: 28px; }
  .lists ul { margin: 0; padding-left: 18px; color: var(--silver); font-size: 15px; display: grid; gap: 6px; }
  .modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 12px; }
  .mode { background: var(--graphite); padding: 24px; }
  .mode .bar { display: flex; height: 10px; margin: 14px 0; }
  .mode p { font-size: 14px; margin: 0; }

  /* VOICE */
  .voice { width: 100%; border-collapse: collapse; font-size: 15px; }
  .voice th, .voice td { text-align: left; vertical-align: top; padding: 16px 14px; border-bottom: 1px solid var(--line); }
  .voice th { font: 600 11px/1 var(--label); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
  .voice td:first-child { font: 600 12px/1.4 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--bone); white-space: nowrap; }
  .voice .say { color: var(--bone); }
  .voice .avoid { color: var(--steel); text-decoration: line-through; text-decoration-color: rgba(255,106,19,.6); }
  .principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-bottom: 44px; }
  .principles p { margin: 0; font-size: 15px; }

  /* APPLICATIONS */
  .apps { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
  .cards { display: grid; gap: 14px; padding: 32px; background: #2a2b2e; }
  .card { --c: 12px; aspect-ratio: 3.5 / 2; max-width: 100%; width: 100%; max-width: 420px; padding: 22px; display: grid; }
  .card.front { background: radial-gradient(70% 90% at 90% 20%, rgba(255,106,19,.25), transparent 60%), var(--forge); place-items: center; }
  .card.front img { width: 62%; }
  .card.back { background: linear-gradient(135deg, #e9ebee, #b3b7be); color: var(--forge); align-content: space-between; }
  .card.back .who { font: 800 15px/1.2 var(--display); text-transform: uppercase; }
  .card.back .role { font: 600 10px/1.4 var(--label); letter-spacing: .14em; text-transform: uppercase; color: #4a4d53; }
  .card.back .contact { font: 500 11px/1.6 var(--label); letter-spacing: .06em; display: flex; justify-content: space-between; align-items: end; gap: 10px; }
  .card.back img { width: 34px; }
  .icons { background: var(--graphite); padding: 32px; display: grid; gap: 24px; align-content: start; }
  .icon-row { display: flex; gap: 20px; align-items: end; flex-wrap: wrap; }
  .icon-row figure { margin: 0; display: grid; gap: 8px; justify-items: center; }
  .tile-icon { background: var(--forge); display: grid; place-items: center; border-radius: 22%; }
  .avatar { width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 60% 40%, #25262a, var(--forge)); display: grid; place-items: center; }

  footer { margin-top: 100px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

  @media (max-width: 980px) {
    .shell { grid-template-columns: 1fr; gap: 0; }
    .toc { position: static; padding-block: 20px 0; }
    .toc img { display: none; }
    .toc ol { display: flex; flex-wrap: wrap; gap: 4px 16px; }
    .sec-head, .logo-grid, .halves, .finishes, .comp, .imagery, .apps { grid-template-columns: 1fr; }
    .faces, .rules, .pillars, .principles, .modes, .swatches { grid-template-columns: 1fr; }
    .secondary { grid-template-columns: repeat(3, 1fr); }
    .donts { grid-template-columns: repeat(2, 1fr); }
    .cover .mark-bg { width: 70%; right: -20%; opacity: .35; }
  }
  @media (max-width: 520px) {
    .secondary { grid-template-columns: repeat(2, 1fr); }
    .row { grid-template-columns: 1fr; gap: 6px; }
    .face .aa { font-size: 64px; }
  }
.back { display: inline-block; margin: -12px 0 24px; font: 600 12px/1 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--ember); text-decoration: none; }
@media (max-width: 980px) { .back { margin: 0 0 12px; } }