/* ===== Fonts (self-hosted, OFL) ===== */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Bricolage Outline"; src: url("../fonts/bricolage-96-extrabold-static.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--c-white); color: var(--c-grey-950); font-family: "Bricolage Grotesque", system-ui, sans-serif; font-variation-settings: "opsz" 14; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, dl, dd, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--c-blue-700); outline-offset: 3px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--c-blue-300); }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== Layout helpers ===== */
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--margin); }
/* Breakpoints: desktop >= 1200, tablet 700–1199, mobile < 700 */
@media (max-width: 1199px) { .only-desktop { display: none !important; } }
@media (min-width: 1200px) { .only-tablet-mobile, .only-tablet { display: none !important; } }
@media (max-width: 699px) { .only-tablet, .hide-mobile { display: none !important; } }
@media (min-width: 700px) { .only-mobile { display: none !important; } }

/* ===== Type styles (Figma text styles) ===== */
.t-mono, .t-label-l, .t-label, .t-caption, .t-micro { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 400; text-transform: uppercase; line-height: normal; }
.t-label-l { font-size: var(--text-mono-label-l); letter-spacing: .14em; }
.t-label { font-size: var(--text-mono-label); letter-spacing: .14em; }
.t-caption { font-size: var(--text-mono-caption); letter-spacing: .12em; }
.t-micro { font-size: var(--text-mono-micro); letter-spacing: .12em; }

.t-display { font-weight: 800; font-variation-settings: "opsz" 96; font-size: var(--text-sans-display); line-height: .96; letter-spacing: -.03em; }
.t-h1 { font-weight: 800; font-variation-settings: "opsz" 96; font-size: var(--text-sans-heading-1); line-height: 1; letter-spacing: -.03em; }
.t-h2 { font-weight: 800; font-variation-settings: "opsz" 96; font-size: var(--text-sans-heading-2); line-height: 1.1; letter-spacing: -.02em; }
.t-h3 { font-weight: 800; font-size: var(--text-sans-heading-3); line-height: 1.2; letter-spacing: -.01em; }
.t-subheading { font-weight: 600; font-size: var(--text-sans-subheading); line-height: 1.3; }
.t-h4 { font-weight: 600; font-size: var(--text-sans-heading-4); line-height: 1.35; }
.t-lead { font-weight: 300; font-size: var(--text-sans-lead); line-height: 1.55; }
.t-body-l { font-weight: 400; font-size: var(--text-sans-body-l); line-height: 1.6; }
.t-body { font-weight: 400; font-size: var(--text-sans-body); line-height: 1.55; }
.t-body-strong { font-weight: 600; font-size: var(--text-sans-body); line-height: 1.55; }
.t-body-s { font-weight: 400; font-size: var(--text-sans-body-s); line-height: 1.4; }
.t-button { font-weight: 600; font-size: var(--text-sans-button); line-height: 1; }

.serif { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-variation-settings: normal; }
.t-serif-display { font-family: "Instrument Serif", serif; font-size: var(--text-serif-display); line-height: 1; letter-spacing: -.02em; }
.t-headline { font-family: "Instrument Serif", serif; font-size: var(--text-serif-headline); line-height: 1.05; letter-spacing: -.01em; }
.t-subhead { font-family: "Instrument Serif", serif; font-style: italic; font-size: var(--text-serif-subhead); line-height: 1.15; letter-spacing: -.01em; }
.t-standfirst { font-family: "Instrument Serif", serif; font-size: var(--text-serif-standfirst); line-height: 1.22; }
.t-serif-lead { font-family: "Instrument Serif", serif; font-size: var(--text-serif-lead); line-height: 1.25; }
.t-quote { font-family: "Instrument Serif", serif; font-style: italic; font-size: var(--text-serif-quote); line-height: 1.35; }
.t-figure-xl { font-family: "Instrument Serif", serif; font-size: var(--text-serif-figure-xl); line-height: .9; letter-spacing: -.02em; }
.t-figure-l { font-family: "Instrument Serif", serif; font-size: var(--text-serif-figure-l); line-height: .95; letter-spacing: -.02em; }
.t-figure-s { font-family: "Instrument Serif", serif; font-size: var(--text-serif-figure-s); line-height: 1; letter-spacing: -.01em; }
em, .i { font-style: italic; }
.arrow { font-family: "Bricolage Grotesque", sans-serif; font-weight: 400; font-style: normal; font-variation-settings: "opsz" 14; }

/* ===== Link (highlighter) ===== */
.link { position: relative; isolation: isolate; display: inline-flex; flex-direction: column; gap: 6px; padding-block: var(--space-xs); font-weight: 600; font-size: var(--text-sans-button-l); line-height: 1; color: var(--c-grey-950); --hl: var(--c-orange-200); --ul: var(--c-orange-500); }
.link--s { font-size: var(--text-sans-button); padding-bottom: var(--space-s); min-height: 48px; justify-content: flex-end; }
.link--l { font-size: var(--text-sans-button-xl); padding-block: 6px; }
.link .link__label { white-space: nowrap; }
.link::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: var(--space-xs); height: 0; background: var(--hl); transition: height .2s ease-out; }
.link--l::before { bottom: 6px; }
.link--s::before { bottom: var(--space-s); }
.link::after { content: ""; display: block; height: 3px; background: var(--ul); }
.on-dark .link, .link.on-dark { color: var(--c-white); --hl: var(--c-orange-700); --ul: var(--c-orange-300); }
.link:hover::before, .card-link:hover .link::before { height: calc(9px + .55em); transition: height .25s var(--ease-out-expo); }
.link:active::before, .card-link:active .link::before { height: calc(9px + 1.2em); transition-duration: .1s; }

/* Small mono links (nav, back, back to top) */
.mlink { position: relative; display: inline-flex; align-items: center; height: 48px; padding-left: var(--space-m); }
.mlink--back { padding-left: 0; padding-right: var(--space-m); }
.mlink::after { content: ""; position: absolute; left: var(--space-m); right: 0; top: calc(50% + 10px); height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .2s ease-out; }
.mlink--back::after { left: 0; right: var(--space-m); transform-origin: right; }
.mlink:hover::after { transform: scaleX(1); transition: transform .25s var(--ease-out-expo); }
.mlink:active::after { background: var(--c-orange-700); }
.on-dark .mlink:active::after { background: var(--c-orange-300); }
.mlink:focus-visible { outline: none; }
.mlink:focus-visible .mlink__label { outline: 3px solid var(--c-blue-700); outline-offset: 8px; }
.on-dark .mlink:focus-visible .mlink__label { outline-color: var(--c-blue-300); }

.nav { display: flex; gap: var(--space-m); }

/* Outline button */
.btn-outline { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding-inline: 24px; border: 2px solid var(--c-grey-950); border-radius: var(--r-pill); font-weight: 600; font-size: var(--text-sans-button); transition: background .2s ease-out, color .2s ease-out, transform .1s; }
.btn-outline:hover { background: var(--c-grey-950); color: var(--c-white); }
.btn-outline:active { background: var(--c-grey-800); color: var(--c-white); transform: scale(.98); }

/* ===== Reveal on scroll (JS adds .js to <html>) ===== */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease-out-expo), transform .6s var(--ease-out-expo); transition-delay: calc(var(--i, 0) * .1s); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { transform: none; transition: opacity .1s linear; transition-delay: 0s; }
  .link::before, .link:hover::before, .mlink::after { transition-duration: .1s !important; }
  .mlink::after { transform-origin: center; }
  html { scroll-behavior: auto !important; }
}