@import url("tokens.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&display=swap");
@font-face { font-family: "Marr Sans Condensed"; src: url("../assets/fonts/MarrSansCondensed-Semibold.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Marr Sans Condensed"; src: url("../assets/fonts/MarrSansCondensed-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Trust 3A"; src: url("../assets/fonts/Trust3A-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Trust 3A"; src: url("../assets/fonts/Trust3A-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Trust 3A"; src: url("../assets/fonts/Trust3A-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); font-size: var(--text-body-regular-size); line-height: var(--text-body-regular-lh); min-height: 100vh; overflow-x: hidden; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

.page { max-width: 1200px; margin: 0 auto; padding: 56px 40px 120px; }
@media (max-width: 720px) { .page { padding: 32px 20px 80px; } }

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 600; line-height: 0.98; letter-spacing: .005em; text-wrap: balance; }
h1 { font-size: clamp(56px, 9vw, 128px); }
h2 { font-size: clamp(36px, 5vw, 64px); margin-top: 96px; }
h3 { font-size: clamp(24px, 3vw, 34px); margin-top: 48px; }
.editorial { font-family: var(--font-editorial); font-weight: 400; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.2; letter-spacing: -.005em; }
.editorial b { font-weight: 700; }
.label { font-family: var(--font-body); font-weight: 500; font-size: var(--text-label-caps-size); line-height: var(--text-label-caps-lh); letter-spacing: .08em; text-transform: uppercase; }
.lede { font-size: var(--text-body-large-size); line-height: var(--text-body-large-lh); max-width: 34em; }
p { max-width: 38em; }
p + p { margin-top: 1em; }
.muted { color: color-mix(in srgb, var(--ink) 62%, var(--paper)); }
.mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: .9em; }
.rule { border: 0; border-top: 2px solid var(--ink); margin: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; border-top: 2px solid var(--ink); padding-top: 18px; margin-top: 96px; }
.section-head h2 { margin-top: 0; }
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.card { background: var(--neutral-ivory); border: 1px solid var(--neutral-sand); padding: 24px; }
.on-navy { background: var(--ink); color: var(--paper); }
.on-navy .muted { color: color-mix(in srgb, var(--paper) 70%, var(--ink)); }
.swatch { min-height: 72px; display: flex; align-items: flex-end; padding: 8px; }
.swatch span { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-size: 11px; padding: 2px 5px; background: rgba(255,255,255,.85); color: var(--ink); }
.swatch.dark span { background: rgba(14,48,73,.75); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }