/* ==========================================================================
   Full Stop · system
   Stock (night, ice) over light (the aurora). Light only reaches you through circles.
   Circles and their derivatives only: disc, ring, half-disc notch, stadium. No skew, no slant.
   ========================================================================== */

/* ── 1 · tokens ─────────────────────────────────────────────────────────── */
:root{
  /* colour */
  --night:#110D1C; --night-2:#1B1629; --ice:#EDF0F5; --ice-2:#DDE2EB;
  --ink:#15111F; --moon:#F3F1F8; --haze:#8C86A3; --haze-ink:#5F5A73;
  /* the light (round 4: one of six schemes, html[data-theme], see §1b). The ground above never changes. */
  --dusk:#2A1F5C; --iris:#7C6BFF; --glacier:#8AD9FF; --orchid:#D9A8F0; --pearl:#F7F4FF;
  --sky-1:#3B2E80; --sky-3:#1A1338; --lit-1:#B3A8FF; --lit-2:#9E91F2; --lit-3:#8C86D9; --pale:#DCD5FF;
  --accent-ice:#7C6BFF;                                   /* the accent where it has to read on ice (focus, pings) */
  --still:url(../assets/aurora-still.webp);
  --line-night:#F3F1F81F; --line-ice:#15111F24;
  --ground:var(--night);
  /* tone (re-pointed by .on-ice / .on-night) */
  --fg:var(--moon); --fg-dim:var(--haze); --line:var(--line-night);
  /* glass */
  --glass-fill:rgba(243,241,248,.06); --glass-fill-ice:rgba(21,17,31,.05);
  --glass-rim:conic-gradient(from 180deg, rgba(243,241,248,.06), rgba(243,241,248,.45) 50%, rgba(243,241,248,.06));
  --glass-rim-ice:conic-gradient(from 180deg, rgba(21,17,31,.08), rgba(21,17,31,.34) 50%, rgba(21,17,31,.08));
  --glass-blur:blur(18px) saturate(1.6);
  --glass:var(--glass-fill); --rim:var(--glass-rim);
  /* type */
  --f-display:"Funnel Display","Funnel Display Fallback",Arial,sans-serif;
  --f-sans:"Funnel Sans","Funnel Sans Fallback",Arial,sans-serif;
  --f-mono:"Fragment Mono","Fragment Mono Fallback","Courier New",monospace;
  --t-hero:clamp(64px, min(11.5vw, 21svh), 188px);
  --t-footer:clamp(72px, 15.5vw, 224px);
  --t-manifesto:clamp(40px, 6.4vw, 104px);
  --t-h2:clamp(48px, 8vw, 128px);
  --t-service:clamp(32px, 5.6vw, 88px);
  --t-menu:clamp(52px, 9vw, 144px);
  --t-caption:clamp(28px, 3vw, 44px);
  --t-card:clamp(24px, 2.1vw, 32px);
  --t-stat:clamp(40px, 3.9vw, 56px);
  --t-lead:clamp(19px, 1.6vw, 24px);
  --t-body:clamp(16px, 1.25vw, 19px);
  --t-ui:15px;
  --t-micro:11px;
  /* spacing, 4px unit */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;--s11:160px;--s12:240px;
  --margin:48px; --gutter:24px; --cols:12;
  --header-h:88px;
  /* geometry: circles only */
  --stop:.19em; --ctr:.34em; --punch:22px; --hole:4px; --hole-pitch:30px;
  --notch:14px; --notch-menu:20px; --r-card:28px; --r-card-m:24px; --r-stub:20px; --r-pill:999px;
  --btn-s:48px; --btn-m:56px; --btn-l:64px; --btn-xl:96px;
  --lens-text:120px; --lens-media:240px; --disc:280px; --disc-open:360px;
  /* motion */
  --ease-iris:cubic-bezier(.65,0,.15,1);
  --ease-iris-close:cubic-bezier(.85,0,.35,1);
  --ease-focus:cubic-bezier(.22,1,.36,1);
  --ease-glass:linear(0,.36 8%,.82 18%,1.04 30%,1.01 45%,1);
  --d-micro:120ms;--d-short:320ms;--d-med:560ms;--d-long:900ms;--d-iris:820ms;--d-iris-close:620ms;--d-count:1200ms;
  /* light: one image, two tunings */
  --aurora-lit: radial-gradient(34% 40% at 24% 32%,color-mix(in srgb,var(--iris) 95%,transparent),transparent 72%),
    radial-gradient(30% 36% at 72% 28%,color-mix(in srgb,var(--glacier) 85%,transparent),transparent 70%),
    radial-gradient(36% 34% at 56% 74%,color-mix(in srgb,var(--orchid) 85%,transparent),transparent 70%),
    radial-gradient(16% 18% at 46% 50%,color-mix(in srgb,var(--pearl) 90%,transparent),transparent 70%),
    radial-gradient(120% 120% at 50% 45%,var(--lit-1),var(--lit-2) 55%,var(--lit-3));
  --aurora-sky: radial-gradient(34% 40% at 24% 32%,color-mix(in srgb,var(--iris) 90%,transparent),transparent 72%),
    radial-gradient(30% 36% at 72% 28%,color-mix(in srgb,var(--glacier) 80%,transparent),transparent 70%),
    radial-gradient(36% 34% at 56% 74%,color-mix(in srgb,var(--orchid) 70%,transparent),transparent 70%),
    radial-gradient(14% 16% at 46% 50%,color-mix(in srgb,var(--pearl) 35%,transparent),transparent 70%),
    radial-gradient(120% 120% at 50% 45%,var(--sky-1),var(--dusk) 55%,var(--sky-3));
  --aurora:var(--aurora-lit);
}
/* ── 1b · schemes: ⌘R moves to the next (index.html head). Only the light changes, never the night or the ice, so
   every hue is picked to glow on #110D1C: a key (iris), a counter-light (glacier), a fill (orchid), a highlight (pearl),
   the sky's dark base (dusk, sky), the lit discs' own tuning (lit) and a darker accent for ice. The shader, the logo
   band and the per-scheme images (tools/themes.py → assets/t/<id>/) read the same values. */
html[data-theme=ember]{--dusk:#4A1A3E;--iris:#FF6B2B;--glacier:#FFB36B;--orchid:#FF8A3D;--pearl:#FFEBDA;
  --sky-1:#6A2342;--sky-3:#2A0F2A;--lit-1:#FFB894;--lit-2:#FF9A73;--lit-3:#EE8468;--pale:#FFD6C2;--accent-ice:#E2531C;
  --still:url(../assets/t/ember/aurora-still.webp)}
html[data-theme=cobalt]{--dusk:#182566;--iris:#3F6BFF;--glacier:#6FE6FF;--orchid:#9DB6FF;--pearl:#F1F6FF;
  --sky-1:#22358C;--sky-3:#0E1640;--lit-1:#A6BDFF;--lit-2:#86A0F7;--lit-3:#728ADF;--pale:#D3DEFF;--accent-ice:#2F5BEF;
  --still:url(../assets/t/cobalt/aurora-still.webp)}
html[data-theme=sodium]{--dusk:#4A3313;--iris:#FFC933;--glacier:#FFF0A0;--orchid:#FFA03D;--pearl:#FFFBEE;
  --sky-1:#6B4A17;--sky-3:#2A1C0B;--lit-1:#FFE07A;--lit-2:#F7CB52;--lit-3:#E5B540;--pale:#FFEEB3;--accent-ice:#A86F00;
  --still:url(../assets/t/sodium/aurora-still.webp)}
html[data-theme=borealis]{--dusk:#0F3A36;--iris:#2EE59D;--glacier:#7DEBFF;--orchid:#D4F98A;--pearl:#F0FFF8;
  --sky-1:#155046;--sky-3:#081F1E;--lit-1:#A0F5D0;--lit-2:#76E6B9;--lit-3:#5CCFA3;--pale:#CFFBE8;--accent-ice:#0B9E68;
  --still:url(../assets/t/borealis/aurora-still.webp)}
@supports not (transition-timing-function:linear(0,1)){:root{--ease-glass:cubic-bezier(.34,1.3,.64,1)}}
@media (max-width:767px){
  :root{--margin:16px;--gutter:12px;--cols:4;--header-h:64px;--t-micro:10px}
}

/* ── 2 · fonts: metric-matched fallbacks (no layout shift on swap) ───────── */
@font-face{font-family:"Funnel Display Fallback";src:local("Arial Bold"),local("Arial");size-adjust:100%;ascent-override:100%;descent-override:25%;line-gap-override:0%}
@font-face{font-family:"Funnel Sans Fallback";src:local("Arial");size-adjust:100%;ascent-override:100%;descent-override:25%;line-gap-override:0%}
@font-face{font-family:"Fragment Mono Fallback";src:local("Courier New");size-adjust:103%;ascent-override:92%;descent-override:24%;line-gap-override:0%}

/* ── 3 · reset ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--night);color-scheme:dark}
html,body{margin:0;padding:0}
body{background:var(--night);color:var(--fg);font-family:var(--f-sans);font-size:var(--t-body);line-height:1.6;
  font-kerning:normal;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
img,svg,canvas,video{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{-webkit-tap-highlight-color:transparent}
::selection{background:color-mix(in srgb,var(--iris) 45.1%,transparent);color:var(--moon)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--glacier);outline-offset:3px;border-radius:var(--r-pill)}
.on-ice :focus-visible{outline-color:var(--accent-ice)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:16px;z-index:100;padding:10px 18px;border-radius:var(--r-pill);background:var(--moon);color:var(--ink);
  font:500 var(--t-ui)/1 var(--f-sans);transform:translateY(-200%)}
.skip:focus-visible{transform:none}

/* ── 4 · tone ───────────────────────────────────────────────────────────── */
.on-ice{--fg:var(--ink);--fg-dim:var(--haze-ink);--line:var(--line-ice);--glass:var(--glass-fill-ice);--rim:var(--glass-rim-ice);--aurora:var(--aurora-sky);color:var(--fg);color-scheme:light}
.on-night{--fg:var(--moon);--fg-dim:var(--haze);--line:var(--line-night);--glass:var(--glass-fill);--rim:var(--glass-rim);--aurora:var(--aurora-lit);color:var(--fg);color-scheme:dark}

/* ── 5 · grid ───────────────────────────────────────────────────────────── */
.wrap{padding-inline:var(--margin)}
.grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));column-gap:var(--gutter)}

/* ── 6 · type ───────────────────────────────────────────────────────────── */
.label{font:400 var(--t-micro)/1.3 var(--f-mono);letter-spacing:.02em;color:var(--fg-dim);display:flex;align-items:center;gap:10px}
.label .rule{flex:0 0 40px;height:1px;background:var(--line)}
.h2{font:600 var(--t-h2)/.92 var(--f-display);letter-spacing:-.04em;text-wrap:balance}
.lead{font:400 var(--t-lead)/1.4 var(--f-sans);letter-spacing:-.005em}
.body{font:400 var(--t-body)/1.6 var(--f-sans)}
.mono{font-family:var(--f-mono);letter-spacing:.02em}
.num{font-variant-numeric:tabular-nums}
strong,b{font-weight:700}

/* the only arrow on the page (Funnel/Fragment have no →). Arrowheads are glyphs. */
.arr{display:inline-block;width:.82em;height:.82em;vertical-align:-.08em;flex:none}
.to{display:inline-block;margin-inline:.04em}

/* ── 7 · the stop and the counter (font-accurate, baseline-relative) ─────── */
.stop,.ctr{position:relative}
.stop{color:transparent}
.stop::before{content:"";display:inline-block;width:calc(var(--stop) * var(--sk,1));height:calc(var(--stop) * var(--sk,1));border-radius:50%;
  vertical-align:-.01em;                              /* bottom on the period's baseline at every scale */
  margin:0 calc(-.118em - var(--stop) * var(--sk,1) / 2) 0 calc(.138em - var(--stop) * var(--sk,1) / 2);
  clip-path:circle(var(--sr,50%) at 50% 50%);
  background-image:var(--aurora);background-size:130vw 130vh;background-attachment:fixed;background-repeat:no-repeat;
  box-shadow:0 0 .14em color-mix(in srgb,var(--iris) 34.9%,transparent)}
.ctr::before{content:"";display:inline-block;width:var(--ctr);height:var(--ctr);border-radius:50%;
  vertical-align:.08em;margin:0 -.4658em 0 .1258em;   /* measured at wght 600: counter .281×.304em, centre (.296, .25); .34 tucks the squircle corners under the stroke */
  clip-path:circle(var(--cr,50%) at 50% 50%);
  background-image:var(--aurora);background-size:130vw 130vh;background-attachment:fixed;background-repeat:no-repeat}
.on-ice .stop::before{box-shadow:inset 0 .06em .12em #0000008c,inset 0 0 0 1px #15111F33}
.on-ice .on-night .stop::before{box-shadow:0 0 .14em color-mix(in srgb,var(--iris) 34.9%,transparent)}
html.no-ctr .ctr::before{display:none}
.stop.is-unlit::before{background:var(--ground);box-shadow:inset 0 0 0 1px var(--line)}
.stop .bl,.ctr .bl{display:inline-block;width:0;height:0;vertical-align:baseline;overflow:hidden}

/* ping: the only use of scale on the page; it carries no light */
.ping{position:absolute;left:var(--pcx,50%);top:var(--pcy,50%);width:var(--pd,.19em);height:var(--pd,.19em);border-radius:50%;
  border:1.5px solid var(--pearl);pointer-events:none;transform:translate(-50%,-50%);opacity:0}
.on-ice .ping{border-color:var(--accent-ice)}
.on-ice .on-night .ping{border-color:var(--pearl)}

/* ── 8 · light ──────────────────────────────────────────────────────────── */
.lit{background-image:var(--aurora);background-size:130vw 130vh;background-attachment:fixed;background-repeat:no-repeat}
/* track mode: transformed contexts and touch devices. FS.lit writes --lx/--ly (viewport-relative). */
.lit[data-lit=track],[data-lit=track] .lit,html.lit-track .lit{background-attachment:scroll;background-position:var(--lx,0) var(--ly,0)}
[data-lit=track]::before,[data-lit=track] .stop::before,[data-lit=track] .ctr::before,html.lit-track .stop::before,html.lit-track .ctr::before{background-attachment:scroll;background-position:var(--lx,0) var(--ly,0)}

/* ── 9 · glass ──────────────────────────────────────────────────────────── */
.glass{position:relative;isolation:isolate;display:inline-grid;place-items:center;border-radius:50%;
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);color:var(--fg);
  transition:box-shadow var(--d-micro) linear}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--rim);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  transition:opacity var(--d-micro) linear}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle at var(--px,50%) var(--py,0%),color-mix(in srgb,var(--pearl) 18%,transparent),#0000 60%);opacity:0;transition:opacity var(--d-short) var(--ease-focus)}
.on-ice .glass::after{background:radial-gradient(circle at var(--px,50%) var(--py,0%),#FFFFFF8c,#0000 60%)}
.glass>*{position:relative;z-index:1}
/* a ping inside glass stays a centred overlay: .glass>* (same specificity, later) made it a relative grid item for its
   900ms, which pushed the label to the disc's top and moved the disc's baseline (and the row beside it) by 4px */
.glass>.ping{position:absolute;z-index:2}
@media (hover:hover){.glass:hover::after{opacity:1}}
.glass.is-pressed{box-shadow:inset 0 0 0 1px #F3F1F833}
.glass.is-pressed::before{opacity:.7}
.glass:focus-visible{outline-offset:3px;border-radius:50%}
.stadium{border-radius:var(--r-pill)}
.stadium:focus-visible{border-radius:var(--r-pill)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:#1B1629d1}.on-ice .glass{background:#EDF0F5e0}
}
.g-s{width:var(--btn-s);height:var(--btn-s)}
.g-m{width:var(--btn-m);height:var(--btn-m)}
.g-l{width:var(--btn-l);height:var(--btn-l)}
.g-xl{width:var(--btn-xl);height:var(--btn-xl)}

/* button light: a lit disc that opens from the button centre */
.b-light{position:absolute;inset:0;border-radius:50%;clip-path:circle(var(--bl,0%) at 50% 50%);z-index:0!important;
  transition:clip-path 360ms var(--ease-glass)}

/* ── 10 · pill CTA + tag ────────────────────────────────────────────────── */
.pill{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:16px;height:48px;padding:0 6px 0 22px;border-radius:var(--r-pill);
  font:500 var(--t-ui)/1 var(--f-sans);letter-spacing:-.005em;color:var(--fg);white-space:nowrap;
  background:var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.pill::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--rim);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.pill .chip{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;flex:none;
  background:rgba(243,241,248,.08);box-shadow:inset 0 0 0 1px var(--line)}
.on-ice .pill .chip{background:rgba(21,17,31,.05)}
.pill .chip .b-light{--bl:0%;transition:clip-path 420ms var(--ease-glass)}
.pill .chip .arr{position:relative;width:16px;height:16px;vertical-align:0;transition:color 240ms var(--ease-focus)}
@media (hover:hover){.pill:hover .chip .b-light{--bl:50%}.pill:hover .chip .arr{color:var(--ink)}}
.pill:focus-visible .chip .b-light{--bl:50%}.pill:focus-visible .chip .arr{color:var(--ink)}
.pill--ink{background:var(--ink);color:var(--ice);-webkit-backdrop-filter:none;backdrop-filter:none}
.pill--ink::before{display:none}
.pill--ink .chip{background:none;box-shadow:none}
.pill--ink .chip .b-light{--bl:50%}
.pill--ink .chip .arr{color:var(--ink)}
.pill--ink .b-light{background-image:var(--aurora-lit)!important}
.pill--sm{height:40px;padding:0 5px 0 18px;gap:12px}
.pill--sm .chip{width:30px;height:30px}
.pill--sm .chip .arr{width:14px;height:14px}
.pill--plain{padding:0 20px}

.tag{position:relative;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 16px 0 14px;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--line);font:500 var(--t-ui)/1 var(--f-sans);letter-spacing:-.005em;color:var(--fg);white-space:nowrap;
  transition:background-color var(--d-short) var(--ease-focus),color var(--d-short) var(--ease-focus),box-shadow var(--d-short) var(--ease-focus)}
.tag .t-stop{position:relative;width:6px;height:6px;border-radius:50%;flex:none;background:var(--ground);box-shadow:inset 0 0 0 1px var(--fg-dim)}
.tag .t-stop .lit{position:absolute;inset:0;border-radius:50%;clip-path:circle(var(--bl,0%) at 50% 50%);transition:clip-path 320ms var(--ease-glass)}
.tag .t-count{font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.02em;color:var(--fg-dim);margin-left:-2px}
button.tag{cursor:pointer}
@media (hover:hover){button.tag:hover{box-shadow:inset 0 0 0 1px var(--fg-dim)}}
.tag[aria-checked=true]{background:var(--ink);color:var(--ice);box-shadow:inset 0 0 0 1px var(--ink)}
.tag[aria-checked=true] .t-count{color:#EDF0F5a6}
.tag[aria-checked=true] .t-stop{box-shadow:none;background:var(--ink)}
.tag[aria-checked=true] .t-stop .lit{--bl:50%;background-image:var(--aurora-lit)}
.tag--lit .t-stop{box-shadow:none}
.tag--lit .t-stop .lit{--bl:50%}

/* ── 11 · card: r28, one tear line, a half-disc notch pair, a stub ───────── */
.card{position:relative;border-radius:var(--r-card);overflow:hidden;
  --nx1:0px;--ny1:50%;--nx2:100%;--ny2:50%;
  -webkit-mask:radial-gradient(circle var(--notch) at var(--nx1) var(--ny1),#0000 calc(var(--notch) - .5px),#000 var(--notch)),
               radial-gradient(circle var(--notch) at var(--nx2) var(--ny2),#0000 calc(var(--notch) - .5px),#000 var(--notch));
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle var(--notch) at var(--nx1) var(--ny1),#0000 calc(var(--notch) - .5px),#000 var(--notch)),
       radial-gradient(circle var(--notch) at var(--nx2) var(--ny2),#0000 calc(var(--notch) - .5px),#000 var(--notch));
  mask-composite:intersect}
.card .notch-fake{display:none;position:absolute;width:calc(var(--notch)*2);height:calc(var(--notch)*2);border-radius:50%;background:var(--ground);
  transform:translate(-50%,-50%);z-index:5}
.card .notch-fake.n1{left:var(--nx1);top:var(--ny1)}.card .notch-fake.n2{left:var(--nx2);top:var(--ny2)}
@supports not ((mask-composite:intersect) or (-webkit-mask-composite:source-in)){.card{-webkit-mask:none;mask:none}.card .notch-fake{display:block}}
/* tear holes: unlit, the ground shows through */
.tear{position:absolute;pointer-events:none;z-index:2;opacity:.6;--hole-c:#F3F1F833;
  --hole-img:radial-gradient(circle calc(var(--hole) / 2),var(--hole-c) calc(var(--hole) / 2 - .5px),#0000 calc(var(--hole) / 2))}
.on-ice .tear,.on-ice.tear{--hole-c:#15111F2e}
.on-night .tear{--hole-c:#F3F1F833}
.tear--v{top:calc(var(--notch) + 12px);bottom:calc(var(--notch) + 12px);left:calc(var(--tx) - var(--hole) / 2);width:var(--hole);
  background:var(--hole-img) center/var(--hole) var(--hole-pitch) repeat-y}
.tear--h{left:calc(var(--notch) + 12px);right:calc(var(--notch) + 12px);top:calc(var(--ty) - var(--hole) / 2);height:var(--hole);
  background:var(--hole-img) center/var(--hole-pitch) var(--hole) repeat-x}

/* ── 12 · header ────────────────────────────────────────────────────────── */
.site-header{position:fixed;inset:0 0 auto 0;z-index:70;height:var(--header-h);padding:0 var(--margin);display:grid;
  grid-template-columns:1fr auto 1fr;align-items:center;color:var(--fg);pointer-events:none;transition:color var(--d-short) var(--ease-focus)}
.site-header>*{pointer-events:auto}
/* scrim: the header never sits bare on body copy. Tinted by the header's own tone (probed at its centre). */
.site-header{--hdr-bg:#110D1Ccc}
.site-header[data-tone=ice]{--hdr-bg:#EDF0F5cc}
.site-header::before{content:"";position:absolute;inset:0 0 -32px;z-index:-1;pointer-events:none;
  background:linear-gradient(var(--hdr-bg) 35%,#0000);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  -webkit-mask:linear-gradient(#000 55%,#0000);mask:linear-gradient(#000 55%,#0000);opacity:0;transition:opacity 320ms var(--ease-focus)}
.site-header.is-scrolled::before{opacity:1}
html.menu-open .site-header::before,html.is-loading .site-header::before{opacity:0}
.site-header [data-tone=night]{--fg:var(--moon);--fg-dim:var(--haze);--line:var(--line-night);--glass:var(--glass-fill);--rim:var(--glass-rim);--aurora:var(--aurora-lit)}
.site-header [data-tone=ice],.site-header[data-tone=ice]{--fg:var(--ink);--fg-dim:var(--haze-ink);--line:var(--line-ice);--glass:var(--glass-fill-ice);--rim:var(--glass-rim-ice);--aurora:var(--aurora-sky)}
.brand,.f-pill,.nav-r,.menu-btn .glass{color:var(--fg);transition:color var(--d-short) var(--ease-focus)}
/* the brand is the full stop: a small lit disc (Ø13, Ø12 < 768) inside a 44px target, its left edge on the margin */
.brand{--bd:13px;justify-self:start;display:grid;place-items:center;width:44px;height:44px;margin-left:calc((var(--bd) - 44px) / 2);border-radius:50%}
.brand-dot{display:block;width:var(--bd);height:var(--bd);border-radius:50%;box-shadow:0 0 6px color-mix(in srgb,var(--iris) 40%,transparent);transition:box-shadow var(--d-short) var(--ease-focus)}
/* on ice the stop stays lit (the favicon's own light, not the sky sample, which reads as a flat navy bullet),
   set into the ground by a 1px ink ring and the ice-stop inset */
.brand[data-tone=ice] .brand-dot,.site-header[data-tone=ice] .f-pill .ap-icon .lit,.site-header [data-tone=ice] .ap-icon .lit{
  background:radial-gradient(circle at 40% 36%,var(--pearl),var(--lit-1) 42%,var(--iris))!important}
.brand[data-tone=ice] .brand-dot{box-shadow:0 0 0 1px color-mix(in oklab,var(--ink) 40%,transparent),inset 0 1px 2px #0000008c}
.site-header [data-tone=ice] .ap-icon .lit,.site-header[data-tone=ice] .f-pill .ap-icon .lit{box-shadow:inset 0 1px 2px #0000008c}
.site-header [data-tone=ice] .ap-icon,.site-header[data-tone=ice] .f-pill .ap-icon{box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--ink) 40%,transparent)}
@media (hover:hover){.brand:hover .brand-dot{box-shadow:0 0 10px color-mix(in srgb,var(--iris) 65.1%,transparent),0 0 2px color-mix(in srgb,var(--pearl) 50.2%,transparent)}
  .brand[data-tone=ice]:hover .brand-dot{box-shadow:0 0 0 1px color-mix(in oklab,var(--ink) 40%,transparent),inset 0 1px 2px #0000008c,0 0 8px color-mix(in srgb,var(--iris) 34.9%,transparent)}}
.brand:focus-visible{outline:none}
.brand:focus-visible .brand-dot{outline:2px solid var(--glacier);outline-offset:4px}
.brand[data-tone=ice]:focus-visible .brand-dot{outline-color:var(--accent-ice)}
.f-pill{justify-self:center;height:40px;padding:0 16px 0 12px;display:inline-flex;align-items:center;gap:10px;font:400 12px/1 var(--f-mono);letter-spacing:.02em}
.f-pill>*{position:relative;z-index:1}
.ap-icon{position:relative;display:block;width:var(--ai,14px);height:var(--ai,14px);border-radius:50%;box-shadow:inset 0 0 0 1px var(--line);flex:none}
.ap-icon .lit{position:absolute;inset:0;border-radius:50%;clip-path:circle(calc(var(--ai-in,5.5px) * var(--ap,1)) at 50% 50%);transition:clip-path 320ms var(--ease-glass)}
.roll{position:relative;display:inline-grid;height:1.3em;line-height:1.3em;overflow:hidden;min-width:5ch;text-align:left}
.roll>span{grid-area:1/1;white-space:nowrap}
/* the section name: the pill eases to each name's own width (FS.readout writes it) */
[data-readout] .roll{min-width:0;transition:opacity 200ms linear,width 320ms var(--ease-focus)}
[data-readout] .roll>span{justify-self:start}
html:not(.f-ready) [data-readout] .roll{opacity:0}
.nav-r{justify-self:end;display:flex;align-items:center}
/* menu trigger: a glass circle with two lines that turn into an × (300 ms, --ease-glass) */
.menu-btn{display:block;border-radius:50%}
.menu-btn .g-menu{width:44px;height:44px}
.burger{--bw:18px;position:relative;display:block;width:var(--bw);height:var(--bw)}
.burger i{position:absolute;left:0;top:50%;width:var(--bw);height:1.75px;margin-top:-.875px;border-radius:1px;background:currentColor;
  transition:transform 300ms var(--ease-glass)}
.burger i:first-child{transform:translateY(-3px)}
.burger i:last-child{transform:translateY(3px)}
html.menu-on .burger i:first-child{transform:rotate(45deg)}
html.menu-on .burger i:last-child{transform:rotate(-45deg)}
.menu-btn:focus-visible{outline:none}
.menu-btn:focus-visible .glass{outline:2px solid var(--glacier);outline-offset:3px;border-radius:50%}
.site-header [data-tone=ice] .menu-btn:focus-visible .glass{outline-color:var(--accent-ice)}
@media (max-width:767px){.site-header::before{opacity:1}.f-pill{height:36px;padding:0 12px 0 10px}
  .brand{--bd:12px}
  /* a 40px glass inside a 44px target, its right edge on the margin */
  .menu-btn{display:grid;place-items:center;width:44px;height:44px;margin-right:-2px}
  .menu-btn .g-menu{width:40px;height:40px}
  .burger{--bw:16px}}

/* ── 13 · cursor + lens ─────────────────────────────────────────────────── */
html.has-cursor,html.has-cursor *{cursor:none!important}
.cursor{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;transition:opacity 200ms linear}
html.cursor-on .cursor{opacity:1}
.cursor-dot{position:absolute;left:0;top:0;width:10px;height:10px;border-radius:50%;will-change:transform;box-shadow:0 0 8px color-mix(in srgb,var(--iris) 40%,transparent)}
.cursor-lens{position:absolute;left:0;top:0;width:240px;height:240px;border-radius:50%;will-change:transform;clip-path:circle(0 at 50% 50%)}
/* text lens: the same glass as the buttons. It brightens and saturates the words under it (backdrop on the lens
   itself, since its clip makes it the backdrop root), with an inner light and a rim; no blend, no colour of its own */
.cursor-lens[data-mode=text]{-webkit-backdrop-filter:saturate(1.5) brightness(1.32) contrast(1.04);backdrop-filter:saturate(1.5) brightness(1.32) contrast(1.04)}
.cursor-lens .lens-fill{position:absolute;inset:60px;border-radius:50%;opacity:0;transition:opacity 160ms linear;
  background:radial-gradient(circle at 36% 30%,color-mix(in srgb,var(--pearl) 20%,transparent),color-mix(in srgb,var(--pearl) 3.9%,transparent) 46%,#0000 64%),radial-gradient(circle at 50% 50%,#0000 70%,color-mix(in srgb,var(--iris) 12.2%,transparent) 100%)}
.cursor-lens[data-tone=ice] .lens-fill{background:radial-gradient(circle at 36% 30%,#FFFFFFa6,#FFFFFF1f 46%,#0000 64%),radial-gradient(circle at 50% 50%,#0000 68%,color-mix(in srgb,var(--iris) 14.1%,transparent) 100%)}
.cursor-lens[data-mode=text] .lens-fill{opacity:1}
.cursor-lens[data-mode=text] .lens-rim{inset:60px;opacity:1;padding:1px}
.cursor-lens[data-tone=ice] .lens-rim{background:var(--glass-rim-ice)}
.cursor-lens[data-mode=media] .lens-fill,.cursor-lens[data-mode=portrait] .lens-fill{transition:none}
.cursor-lens .lens-media{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--night-2);opacity:0;transition:opacity 160ms linear}
.cursor-lens .lens-media img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0}
.cursor-lens[data-mode=media] .lens-media,.cursor-lens[data-mode=portrait] .lens-media{opacity:1}
.cursor-lens .lens-rim{position:absolute;inset:0;border-radius:50%;padding:1.5px;background:var(--glass-rim);opacity:0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.cursor-lens[data-mode=media] .lens-rim,.cursor-lens[data-mode=portrait] .lens-rim{opacity:1}
.cursor-lens .lens-ring{position:absolute;inset:0;width:240px;height:240px;color:var(--moon);opacity:0;animation:spin 12s linear infinite;
  filter:drop-shadow(0 0 2px #110D1C) drop-shadow(0 0 5px #110D1Ccc)}
.cursor-lens[data-mode=media] .lens-ring,.cursor-lens[data-mode=portrait] .lens-ring{opacity:.9}
/* round 4b · the portrait fill: the lens becomes the photo's own circle, so no ring text, no rim and no night behind
   the cut-out (the sky shows through, exactly as under the black-and-white layer) */
.cursor-lens.is-fill .lens-ring,.cursor-lens.is-fill .lens-rim{opacity:0!important}
.cursor-lens.is-fill .lens-media{background:transparent}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── 14 · ring text ─────────────────────────────────────────────────────── */
.ring-svg{display:block;overflow:visible;color:var(--haze);max-width:none}
.ring-svg text{font-family:var(--f-mono)}

/* ── 15 · menu overlay ──────────────────────────────────────────────────── */
.menu{position:fixed;inset:0;z-index:60;color:var(--moon);clip-path:circle(0 at var(--mx,100%) var(--my,0));
  overflow:hidden auto;overscroll-behavior:contain}   /* the iris is driven from its live radius in JS (FS.menu) */
.menu[hidden]{display:none}
.menu .m-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 82% at 0% 50%,#110D1C99,#110D1C00 76%),radial-gradient(120% 100% at 50% 50%,#0000 45%,#110D1C4d)}
.menu .m-still{position:absolute;inset:0;display:none;background:linear-gradient(#0000001f,#0000001f),var(--still) center/cover no-repeat}
html.field-still .menu .m-still{display:block}
.menu-inner{position:relative;min-height:100%;padding:calc(var(--header-h) + 24px) var(--margin) 48px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center}
.menu-links{grid-column:1 / 9;display:flex;flex-direction:column;align-items:flex-start}
.menu-link{position:relative;display:inline-block;font:600 var(--t-menu)/.98 var(--f-display);letter-spacing:-.04em;color:var(--moon);padding:0 .06em 0 0;
  border-radius:12px;transition:filter 320ms var(--ease-focus),opacity 320ms var(--ease-focus)}
/* on the full field a lit hole would vanish into the light: menu stops are the field's brightest points */
.menu-link .stop::before{background:radial-gradient(circle at 40% 36%,#FFFFFF,var(--pearl) 45%,var(--pale));box-shadow:0 0 .12em color-mix(in srgb,var(--pearl) 70.2%,transparent),0 0 .4em color-mix(in srgb,var(--iris) 50.2%,transparent)}
.menu-card .mc-label{margin-top:var(--s6);color:var(--haze-ink)}
.menu-link .mi{position:absolute;left:-2.9em;top:50%;transform:translateY(-50%);font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.02em;color:#F3F1F8b3;display:none}
.menu-links.has-hover .menu-link:not(.is-hover){filter:blur(2px);opacity:.28}
.menu-card{grid-column:9 / 13;justify-self:end;width:min(400px,100%);height:460px;--ground:transparent;--mc-ty:300px;
  --nx1:0px;--ny1:var(--mc-ty);--nx2:-100px;--ny2:-100px;--notch:var(--notch-menu);background:var(--ice);color:var(--ink);display:flex;flex-direction:column}
.menu-card .mc-top{padding:36px 36px 0;display:flex;flex-direction:column;gap:0;flex:0 0 var(--mc-ty)}
.menu-card .mc-name{font:600 32px/1.05 var(--f-display);letter-spacing:-.02em}
.menu-card .mc-role{font:400 17px/1.4 var(--f-sans);color:var(--haze-ink);margin-top:10px}
.menu-card .mc-mail{font:500 20px/1.3 var(--f-sans);letter-spacing:-.01em;margin-top:10px;display:inline-block;align-self:flex-start}
.menu-card .mc-social{display:flex;gap:8px;margin:20px 0 36px}
.menu-card .mc-stub{flex:1;background:var(--ice-2);padding:0 36px;display:flex;align-items:center;justify-content:space-between}
.menu-card .mc-stub .label{color:var(--haze-ink)}
.menu-card .tear--h{--ty:var(--mc-ty);left:calc(var(--notch-menu) + 12px);right:24px;--ground:#0000}
.menu-card .tear--h{--hole-c:#15111F2e}
.menu-foot{position:absolute;left:var(--margin);right:var(--margin);bottom:28px;display:flex;justify-content:flex-end;font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.02em;color:#F3F1F8b3}
@media (max-width:767px){
  .menu-inner{display:flex;flex-direction:column;align-items:stretch;justify-content:space-between;min-height:100svh;padding:96px var(--margin) 16px;gap:32px}
  .menu-links{gap:2px;margin-block:auto}
  .menu-link{font-size:clamp(52px,15vw,60px)}
  .menu .m-vignette{background:radial-gradient(100% 62% at 0% 42%,#110D1Cb3,#110D1C00 74%),radial-gradient(120% 100% at 50% 50%,#0000 45%,#110D1C4d)}
  .menu-card{width:100%;height:auto;-webkit-mask:none;mask:none;border-radius:var(--r-card-m)}
  .menu-card .mc-top{flex:none;padding:24px 24px 0}
  .menu-card .mc-name,.menu-card .mc-role{display:none}
  .menu-card .mc-label{margin-top:0}
  .menu-card .mc-mail{margin-top:0;font-size:18px}
  .menu-card .mc-social{margin:16px 0 24px}
  .menu-card .tear--h{display:none}
  .menu-card .mc-stub{padding:16px 24px;border-top:1px solid var(--line-ice)}
  .menu-card .mc-stub .label{display:none}
  .menu-foot{display:none}
}

/* ── 16 · aurora field ──────────────────────────────────────────────────── */
.field{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;background:var(--dusk);clip-path:circle(0 at 50% 50%)}
.field[data-mode=menu]{z-index:59}
.field--still{background:var(--still) center/cover no-repeat,var(--dusk);animation:still-drift 40s ease-in-out infinite alternate}
@keyframes still-drift{from{background-position:40% 45%}to{background-position:60% 55%}}
html.is-static .field--still,html.is-reduced .field--still{animation:none}
html.is-static .field:not([data-mode=menu]),html.is-reduced .field[data-mode=aperture]{display:none}

/* ── 17 · reduced motion + static ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
}
html.is-static *,html.is-static *::before,html.is-static *::after{animation-play-state:paused!important}
html.is-static .cursor-lens .lens-ring{animation:none}

/* ── 18 · stage 2: motion pieces ─────────────────────────────────────────── */
/* loader readout: a plain percentage, Mono 11, beside the pinhole */
.ld-read{position:fixed;left:0;top:0;z-index:6;pointer-events:none;font:400 11px/1 var(--f-mono);letter-spacing:.02em;color:var(--moon);
  font-variant-numeric:tabular-nums;will-change:transform;white-space:nowrap}
.ld-read .roll{min-width:4ch}
html.is-loading{cursor:progress}

/* menu link lens: a glass rim ring opens from the stop, under the text; the lit stop hands over to the shader lens */
.menu-link{isolation:isolate}
.menu-link .m-ring{position:absolute;left:var(--rx,0);top:var(--ry,0);width:1.3em;height:1.3em;margin:-.65em 0 0 -.65em;border-radius:50%;z-index:-1;pointer-events:none;
  clip-path:circle(0 at 50% 50%);transition:clip-path 420ms var(--ease-glass);opacity:.55}
.menu-link .m-ring::before{content:"";position:absolute;inset:0;border-radius:50%;padding:1px;background:var(--glass-rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.menu-link.is-lensed .m-ring{clip-path:circle(50% at 50% 50%)}

.menu-card{will-change:clip-path}
html:not(.f-ready) .ld-read .roll{opacity:0}
.ln-w{display:inline-block}
.cursor--lens{z-index:89}
.menu:not(.is-open) :focus-visible{outline-color:transparent}
main section[tabindex="-1"]:focus,footer[tabindex="-1"]:focus{outline:none}