:root { color: var(--ra-ink); background: var(--ra-paper); font-family: "Helvetica Neue", Arial, sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ra-paper); }
a { color: inherit; }
.identity-hero { min-height: 72svh; padding: clamp(60px, 9vw, 140px) clamp(24px, 8vw, 120px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr); gap: 8vw; align-items: center; background: var(--ra-paper); }
.eyebrow { margin: 0 0 18px; color: var(--ra-proof); font: 700 .72rem/1.2 "SFMono-Regular", Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: "Arial Narrow", "Avenir Next Condensed", "Helvetica Neue", sans-serif; letter-spacing: -.06em; line-height: .88; }
h1 { max-width: 10ch; margin-bottom: 28px; font-size: clamp(4rem, 10vw, 9.5rem); font-weight: 800; }
h1 em, h2 em { color: var(--ra-proof); font-style: normal; }
.hero-copy { max-width: 42rem; color: var(--ra-muted); font-size: clamp(1.05rem, 2vw, 1.28rem); line-height: 1.55; }
.mark-stage { min-height: 320px; padding: 24px; display: grid; place-items: center; border: 1px solid var(--ra-ink); background: var(--ra-paper); box-shadow: 18px 18px 0 var(--ra-signal); }
.mark-stage img { width: min(260px, 80%); height: auto; display: block; mix-blend-mode: multiply; }
.mark-stage span { justify-self: end; color: var(--ra-ink); font: 700 .68rem/1.3 "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.identity-section { padding: clamp(58px, 8vw, 118px) clamp(24px, 8vw, 120px); border-top: 1px solid var(--ra-rule); }
.identity-section h2 { max-width: 760px; margin: 0; font-size: clamp(2.8rem, 6vw, 6.6rem); font-weight: 800; }
.section-intro { margin-bottom: 48px; }
.palette-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.swatch { min-height: 180px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid var(--ra-ink); }
.swatch strong { font: 700 1.2rem/1.1 "Arial Narrow", sans-serif; }
.swatch span { font: 700 .76rem "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; }
.swatch small { font-size: .82rem; }
.swatch--ink { color: var(--ra-paper); background: var(--ra-ink); }
.swatch--paper { background: #fff; }
.swatch--signal { background: var(--ra-signal); }
.swatch--proof { color: #fff; background: var(--ra-proof); }
.swatch--boundary { background: var(--ra-boundary); }
.palette-lab { overflow: hidden; background: #f0ede5; }
.palette-lab__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .55fr); gap: 8vw; align-items: end; }
.palette-lab__intro > p { max-width: 34rem; margin: 0; color: var(--ra-muted); line-height: 1.6; }
.palette-preview { --preview-ground: #151817; --preview-ground-alt: #26302a; --preview-ink: #f3f0e6; --preview-signal: #d2a33f; --preview-proof: #a7b98a; --preview-boundary: #d07a58; --preview-rule: #5a665b; --preview-action-ink: #151817; margin: 0 0 42px; color: var(--preview-ink); background: var(--preview-ground); transition: color .3s ease, background .3s ease; }
.palette-preview__bar { min-height: 44px; padding: 10px 16px; display: flex; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--preview-signal); color: var(--preview-ink); background: var(--preview-ground-alt); font: 700 .68rem/1.3 "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.palette-preview__bar b { font-family: "Arial Narrow", "Avenir Next Condensed", sans-serif; font-size: .95rem; letter-spacing: 0; text-transform: none; }
.palette-preview__bar strong { color: var(--preview-signal); font-weight: 700; }
.palette-preview__body { min-height: 370px; padding: clamp(28px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .38fr); gap: 7vw; align-items: center; }
.palette-preview__body .eyebrow { color: var(--preview-proof); }
.palette-preview__headline { max-width: 12ch; margin: 0 0 20px; font: 800 clamp(2.8rem, 6vw, 6.3rem)/.86 "Arial Narrow", "Avenir Next Condensed", sans-serif; letter-spacing: -.06em; }
.palette-preview__headline em { color: var(--preview-signal); font-style: normal; }
.palette-preview__copy { max-width: 34rem; color: color-mix(in srgb, var(--preview-ink) 70%, transparent); line-height: 1.5; }
.palette-preview__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }
.palette-preview__action { min-height: 44px; padding: 0 15px; display: inline-flex; align-items: center; color: var(--preview-action-ink); background: var(--preview-signal); font-weight: 800; text-decoration: none; }
.palette-preview__action:focus-visible, .palette-option__button:focus-visible { outline: 3px solid var(--preview-boundary); outline-offset: 4px; }
.palette-preview__proof { color: var(--preview-proof); font: 700 .68rem/1.3 "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; text-transform: uppercase; }
.palette-preview__mark { min-height: 230px; padding: 18px; display: grid; place-items: center; border: 1px solid var(--preview-rule); background: var(--preview-ground-alt); box-shadow: 14px 14px 0 var(--preview-signal); }
.palette-preview__mark img { width: min(180px, 74%); height: auto; display: block; mix-blend-mode: normal; }
.palette-preview__mark span { justify-self: end; color: var(--preview-proof); font: 700 .68rem/1.3 "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.palette-options { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.palette-option { min-width: 0; min-height: 330px; padding: 16px; display: flex; flex-direction: column; color: var(--option-ink); background: var(--option-ground); border: 1px solid var(--option-rule); transition: transform .2s ease, box-shadow .2s ease; }
.palette-option:hover { transform: translateY(-4px); box-shadow: 8px 8px 0 var(--option-signal); }
.palette-option.is-selected { box-shadow: inset 0 0 0 3px var(--option-signal), 8px 8px 0 var(--option-signal); }
.palette-option__top, .palette-option__footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.palette-option__number { font: 700 .74rem "SFMono-Regular", Consolas, monospace; }
.palette-option__tag { color: var(--option-proof); font: 700 .62rem "SFMono-Regular", Consolas, monospace; letter-spacing: .08em; text-align: right; text-transform: uppercase; }
.palette-option h3 { margin: 44px 0 12px; font: 800 clamp(1.7rem, 2.4vw, 2.6rem)/.88 "Arial Narrow", "Avenir Next Condensed", sans-serif; letter-spacing: -.05em; }
.palette-option p { min-height: 104px; margin: 0 0 20px; color: color-mix(in srgb, var(--option-ink) 72%, transparent); font-size: .91rem; line-height: 1.45; }
.palette-option__swatches { display: grid; grid-template-columns: repeat(5, 1fr); height: 24px; margin-bottom: auto; border: 1px solid var(--option-rule); }
.palette-option__swatches i { display: block; background: var(--option-ground-alt); }
.palette-option__swatches i:nth-child(2) { background: var(--option-ink); }
.palette-option__swatches i:nth-child(3) { background: var(--option-signal); }
.palette-option__swatches i:nth-child(4) { background: var(--option-proof); }
.palette-option__swatches i:nth-child(5) { background: var(--option-boundary); }
.palette-option__footer { align-items: flex-end; margin-top: 18px; }
.palette-option__footer > span { max-width: 12ch; color: var(--option-proof); font: 700 .61rem/1.3 "SFMono-Regular", Consolas, monospace; letter-spacing: .06em; text-transform: uppercase; }
.palette-option__button { min-height: 36px; padding: 0 9px; border: 1px solid var(--option-ink); color: var(--option-action-ink); background: var(--option-signal); cursor: pointer; font: 700 .67rem "SFMono-Regular", Consolas, monospace; text-transform: uppercase; }
.palette-option__button[aria-pressed="true"] { color: var(--option-ink); background: transparent; }
.palette-lab__status { margin: 30px 0 0; color: var(--ra-muted); font: 700 .72rem/1.45 "SFMono-Regular", Consolas, monospace; letter-spacing: .04em; }
.split-section { display: grid; grid-template-columns: minmax(220px, .8fr) 1.2fr; gap: 10vw; align-items: start; background: #fff; }
.type-sample { padding-top: 8px; }
.display-sample { margin-bottom: 34px; font: 800 clamp(3.2rem, 7vw, 7rem)/.86 "Arial Narrow", "Avenir Next Condensed", sans-serif; letter-spacing: -.07em; }
.display-sample em { color: var(--ra-signal); font-style: normal; }
.body-sample { max-width: 36rem; color: var(--ra-muted); font-size: 1.15rem; line-height: 1.6; }
.utility-sample { color: var(--ra-proof); font: 700 .72rem/1.5 "SFMono-Regular", Consolas, monospace; letter-spacing: .12em; }
.dark-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 10vw; color: var(--ra-paper); background: var(--ra-ink); }
.dark-section .eyebrow { color: var(--ra-boundary); }
.dark-section > div > p:not(.eyebrow) { max-width: 36rem; margin-top: 24px; color: rgba(251,247,237,.72); line-height: 1.6; }
.contract-list { border-top: 1px solid rgba(251,247,237,.25); }
.contract-list div { padding: 18px 0; display: grid; grid-template-columns: 44px 1fr; gap: 12px; border-bottom: 1px solid rgba(251,247,237,.25); }
.contract-list span { color: var(--ra-signal); font: 700 .76rem "SFMono-Regular", Consolas, monospace; }
.contract-list strong { font: 700 1.3rem "Arial Narrow", sans-serif; }
.contract-list p { grid-column: 2; margin: 0; color: rgba(251,247,237,.7); line-height: 1.45; }
.final-section { color: var(--ra-paper); background: var(--ra-signal); }
.final-section h2 { max-width: 760px; }
.final-section > p:not(.eyebrow) { max-width: 650px; margin: 26px 0; line-height: 1.6; }
code { padding: 2px 5px; color: var(--ra-paper); background: var(--ra-ink); font-family: "SFMono-Regular", Consolas, monospace; }
.identity-button { display: inline-flex; min-height: 50px; padding: 0 18px; align-items: center; border: 1px solid var(--ra-ink); color: var(--ra-paper); background: var(--ra-ink); font-weight: 800; text-decoration: none; }
.identity-button:focus-visible { outline: 3px solid var(--ra-proof); outline-offset: 4px; }
@media (max-width: 1100px) { .palette-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .identity-hero, .split-section, .dark-section, .palette-lab__intro, .palette-preview__body { grid-template-columns: 1fr; } .identity-hero { min-height: auto; } .palette-grid { grid-template-columns: repeat(2, 1fr); } .swatch:last-child { grid-column: 1 / -1; } .mark-stage { min-height: 260px; } .palette-preview__bar { align-items: flex-start; flex-direction: column; } .palette-preview__body { gap: 36px; } .palette-options { grid-template-columns: 1fr; } .palette-option { min-height: 0; } .palette-option p { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }