/* Generated by `npm run tokens` from design/design-system/tokens — do not edit. */
/* ---- tokens/fonts.css ---- */
/* Instrument Sans (headlines), Geist + Geist Mono (UI, meta) and Newsreader (long-form reading). Google Fonts substitutes — see readme. */

/* ---- tokens/colors.css ---- */
:root{
/* Ink — the monochrome spine. Slightly cool blacks, neutral greys. */
--ink-0:#000000;--ink-50:#060709;--ink-100:#0B0C0F;--ink-150:#111215;--ink-200:#18191D;--ink-300:#232429;--ink-400:#34353B;--ink-500:#55575E;--ink-550:#7A7C84;--ink-600:#868890;--ink-700:#B2B4BA;--ink-800:#D9DADD;--ink-900:#F3F3F4;--ink-1000:#FFFFFF;

/* Liquid metal — chrome stops used only in gradients for rims/edges */
--metal-100:#FFFFFF;--metal-200:#E6E7EA;--metal-300:#B9BCC2;--metal-400:#8B8E96;--metal-500:#5B5E66;--metal-600:#2C2E33;
--metal-rim:conic-gradient(from 200deg,#ffffff 0%,#8b8e96 10%,#2c2e33 22%,#e6e7ea 34%,#5b5e66 48%,#ffffff 60%,#2c2e33 74%,#b9bcc2 88%,#ffffff 100%);/* @kind color */
--metal-face:linear-gradient(180deg,#1c1d21 0%,#0a0a0c 55%,#000 100%);/* @kind color */
--metal-sheen:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 48%);/* @kind color */

/* Spectral — light that lives on edges and in glows, never as fills */
--ember-300:#FFC59E;--ember-500:#F08A4B;--ember-700:#8A3D12;
--violet-300:#D3C2FF;--violet-500:#A884FF;--violet-700:#4B2A9E;
--cobalt-300:#A9BDFF;--cobalt-500:#3D6BFF;--cobalt-700:#1A2F8A;
--aqua-300:#9FF2E8;--aqua-500:#22C7B5;--aqua-700:#0B5E57;
--halo:#F6EED2; /* hot white-gold core of a glow */
--spectral:conic-gradient(from 180deg,#3D6BFF,#A884FF,#F08A4B,#F6EED2,#22C7B5,#3D6BFF);/* @kind color */

/* Status (rare — forms only) */
--success:#3DD68C;--danger:#FF5A5F;--warning:#F5B83D;

/* Semantic aliases — dark is the default theme */
--bg-void:var(--ink-0);
--bg-page:var(--ink-50);
--surface-card:var(--ink-100);
--surface-raised:var(--ink-150);
--surface-hover:var(--ink-200);
--surface-inverse:var(--ink-900);
--fg-1:var(--ink-900);
--fg-2:var(--ink-700);
--fg-3:var(--ink-600);
--fg-4:var(--ink-550);/* ≥4.5:1 on --bg-page and --surface-card */
--fg-inverse:var(--ink-50);
--text-body:var(--fg-2);
--text-heading:var(--fg-1);
--text-meta:var(--fg-3);
--border-subtle:rgba(255,255,255,.07);
--border-default:rgba(255,255,255,.12);
--border-strong:rgba(255,255,255,.22);
--accent:var(--ember-500);
--accent-glow:var(--ember-500);
--link:var(--fg-1);
--link-underline:rgba(255,255,255,.28);
--focus-ring:var(--cobalt-300);
--selection:rgba(168,132,255,.32);
}

/* ---- tokens/typography.css ---- */
:root{
--font-sans:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
--font-display:'Instrument Sans',var(--font-sans);
--font-serif:'Newsreader','Iowan Old Style',Georgia,serif;
--font-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
--font-reading:var(--font-serif);

--fs-display-xl:96px;--fs-display-l:72px;--fs-h1:52px;--fs-h2:36px;--fs-h3:26px;--fs-h4:20px;
--fs-lead:22px;--fs-reading:20px;--fs-body:16px;--fs-small:14px;--fs-micro:12px;

--lh-tight:0.96;/* @kind font */--lh-heading:1.08;/* @kind font */--lh-snug:1.3;/* @kind font */--lh-body:1.55;/* @kind font */--lh-reading:1.68;/* @kind font */
--tracking-display:-0.04em;/* @kind font */--tracking-heading:-0.03em;/* @kind font */--tracking-body:-0.005em;/* @kind font */--tracking-eyebrow:0.16em;/* @kind font */

--fw-display:600;/* @kind font */--fw-heading:600;/* @kind font */--fw-light:300;/* @kind font */--fw-regular:400;/* @kind font */--fw-medium:500;/* @kind font */--fw-semibold:600;/* @kind font */--fw-bold:700;/* @kind font */--fw-black:800;/* @kind font */

/* Composite roles */
--type-display:var(--fw-display) var(--fs-display-l)/var(--lh-tight) var(--font-display);/* @kind font */
--type-h1:var(--fw-display) var(--fs-h1)/var(--lh-heading) var(--font-display);
--type-h2:var(--fw-heading) var(--fs-h2)/var(--lh-heading) var(--font-display);
--type-h3:var(--fw-heading) var(--fs-h3)/var(--lh-snug) var(--font-display);
--type-lead:var(--fw-regular) var(--fs-lead)/var(--lh-body) var(--font-sans);/* @kind font */
--type-reading:var(--fw-regular) var(--fs-reading)/var(--lh-reading) var(--font-reading);/* @kind font */
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);/* @kind font */
--type-eyebrow:var(--fw-medium) var(--fs-micro)/1 var(--font-mono);/* @kind font */
}

/* ---- tokens/spacing.css ---- */
:root{
--space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;--space-6:24px;--space-7:32px;--space-8:48px;--space-9:64px;--space-10:96px;--space-11:128px;
--radius-xs:6px;--radius-sm:10px;--radius-md:16px;--radius-lg:24px;--radius-xl:32px;--radius-pill:999px;
--measure-reading:680px;/* @kind spacing */--container:1200px;/* @kind spacing */--container-wide:1360px;/* @kind spacing */--gutter:clamp(20px,4vw,48px);/* @kind spacing */
--rim:1.5px;/* @kind spacing */ /* liquid-metal rim thickness */
}

/* ---- tokens/effects.css ---- */
:root{
--shadow-card:inset 0 1px 0 rgba(255,255,255,.06),0 30px 60px -24px rgba(0,0,0,.9);
--shadow-raised:inset 0 1px 0 rgba(255,255,255,.08),0 12px 32px -12px rgba(0,0,0,.8);
--shadow-metal:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.6),0 6px 18px -6px rgba(0,0,0,.9);
/* Edge light — the halo a lit edge throws onto the dark around it */
--edge-ember:0 0 0 1px rgba(240,138,75,.55),0 0 18px -2px rgba(240,138,75,.55),0 0 56px -12px rgba(240,138,75,.45);
--edge-violet:0 0 0 1px rgba(168,132,255,.55),0 0 18px -2px rgba(168,132,255,.55),0 0 56px -12px rgba(168,132,255,.45);
--edge-aqua:0 0 0 1px rgba(34,199,181,.5),0 0 18px -2px rgba(34,199,181,.5),0 0 56px -12px rgba(34,199,181,.4);
--edge-cobalt:0 0 0 1px rgba(61,107,255,.55),0 0 18px -2px rgba(61,107,255,.55),0 0 56px -12px rgba(61,107,255,.45);
/* Image grade — the only filters allowed on photography. Muted, cool, slightly crushed so type and edge light sit on top. */
--img-hero:saturate(.6) contrast(1.08) brightness(.86);/* @kind other */
--img-feature:saturate(.35) contrast(1.06) brightness(.9);/* @kind other */
--img-card:grayscale(1) contrast(1.08) brightness(.9);/* @kind other */
--img-card-hover:saturate(.6) contrast(1.06) brightness(.94);/* @kind other */
--img-portrait:grayscale(1) contrast(1.06);/* @kind other */
--scrim-hero:linear-gradient(180deg,rgba(6,7,9,.55) 0%,rgba(6,7,9,0) 22%,rgba(6,7,9,.25) 48%,rgba(6,7,9,.88) 78%,#060709 100%),linear-gradient(90deg,rgba(6,7,9,.7) 0%,rgba(6,7,9,0) 62%);/* @kind color */
/* Card scrim — for layout="cover" tiles: light top, near-black bottom third under the text */
--scrim-card:linear-gradient(180deg,rgba(6,7,9,.15) 0%,rgba(6,7,9,.25) 35%,rgba(6,7,9,.82) 68%,rgba(6,7,9,.96) 100%);/* @kind color */
--blur-glass:saturate(140%) blur(18px);/* @kind other */
--rd-angle:0deg;/* @kind other */
--ease-out:cubic-bezier(.16,1,.3,1);/* @kind other */--ease-in-out:cubic-bezier(.65,0,.35,1);/* @kind other */--ease-spring:cubic-bezier(.34,1.56,.64,1);/* @kind other */
--dur-fast:140ms;/* @kind other */--dur-base:260ms;/* @kind other */--dur-slow:520ms;/* @kind other */--dur-chase:7s;/* @kind other */
}
@property --rd-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes rd-pop{0%{transform:scale(.4) rotate(-40deg);opacity:0}100%{transform:none;opacity:1}}
@keyframes rd-sheen{0%{transform:translateX(-120%)}100%{transform:translateX(220%)}}
::selection{background:var(--selection)}

/* ---- tokens/base.css ---- */
/* Minimal element defaults + the liquid-metal utility classes components rely on. */
html{background:var(--bg-page);color:var(--fg-2);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0}
a{color:var(--link);text-decoration:underline;text-decoration-color:var(--link-underline);text-underline-offset:3px;text-decoration-thickness:1px;transition:text-decoration-color var(--dur-fast) var(--ease-out)}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}

/* Two effects only: LIQUID METAL (.rd-rim, .rd-rim--spectral, .rd-rim--spin) and EDGE LIGHT (.rd-rim--chase + GlowCard halos + --edge-* shadows). */
/* Metal rim: 1.5px chrome edge drawn with a masked conic gradient. Put on a positioned element. */
.rd-rim{position:relative;isolation:isolate}
.rd-rim::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:var(--rim);background:var(--metal-rim);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}
.rd-rim--spectral::before{background:conic-gradient(from var(--rd-angle),#ffffff,#8b8e96 12%,#3D6BFF 20%,#2c2e33 30%,#e6e7ea 42%,#A884FF 52%,#5b5e66 60%,#F08A4B 70%,#ffffff 80%,#2c2e33 90%,#ffffff)}
.rd-rim--chase::before{background:conic-gradient(from var(--rd-angle),transparent 0 62%,var(--chase-a,#F08A4B) 74%,var(--halo) 80%,var(--chase-b,#A884FF) 88%,transparent 96%);animation:rd-chase var(--dur-chase) linear infinite}
.rd-rim--spin::before{animation:rd-chase 9s linear infinite}

.rd-pop{animation:rd-pop 420ms var(--ease-spring) both}
@media (prefers-reduced-motion:reduce){.rd-pop{animation:none}.rd-rim--chase::before,.rd-rim--spin::before{animation:none}*,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ---- tokens/responsive.css ---- */
/* Responsive utilities. Breakpoints: md ≤1100px (tablet), sm ≤760px (phone). Opt in with data-r="…" (space-separated). */
[data-r~="show-md"]{display:none}
@media (max-width:1100px){
[data-r~="cols3"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}
[data-r~="stack-md"]{grid-template-columns:minmax(0,1fr)!important;gap:48px!important}
[data-r~="unstick"]{position:static!important}
[data-r~="hide-md"]{display:none!important}
[data-r~="show-md"]{display:flex!important}
}
@media (max-width:760px){
[data-r~="stack"],[data-r~="cols3"]{grid-template-columns:minmax(0,1fr)!important}
[data-r~="stack"],[data-r~="gap"]{gap:24px!important}
[data-r~="d1"]{font-size:clamp(44px,13vw,60px)!important;line-height:.98!important}
[data-r~="d2"]{font-size:clamp(30px,8.5vw,40px)!important}
[data-r~="lede"]{font-size:19px!important}
[data-r~="top"]{padding-top:56px!important}
[data-r~="sec"]{margin-top:72px!important}
[data-r~="pad"]{padding:20px!important}
[data-r~="wrap"]{flex-wrap:wrap!important;row-gap:16px!important}
[data-r~="start"]{justify-content:flex-start!important}
[data-r~="hide"]{display:none!important}
[data-r~="row"]{grid-template-columns:minmax(0,1fr) auto!important;gap:12px 16px!important}
[data-r~="row"]>:first-child{grid-column:1/-1}
}