/* corona.css — the whole landing stylesheet. Served under a content-hashed key
   (corona.<md5-8>.css); edits produce a new key automatically. Fonts are self-hosted
   latin subsets (CSP font-src 'self'). */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(/fonts/bricolage-grotesque-latin.woff2) format("woff2")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:300;font-display:swap;src:url(/fonts/fraunces-italic-latin.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/jetbrains-mono-latin.woff2) format("woff2")}
:root{
  --void:#050507; --corona:#F4F2EC; --ash:#8E8B85; --flare:#FFF3DA; --hair:rgba(244,242,236,.14);
  --display:"Bricolage Grotesque", system-ui, sans-serif; --mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
  --gutter: clamp(20px, 6vw, 96px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--void);color:var(--corona);font-family:var(--display);font-variation-settings:"opsz" 14;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{min-height:100vh;position:relative;overflow-x:hidden}
a{color:inherit;text-decoration:none}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}

header{position:fixed;inset:0 0 auto 0;display:flex;justify-content:space-between;align-items:center;padding:26px var(--gutter);z-index:10;mix-blend-mode:difference;pointer-events:none}
/* the bar itself must not mask the steering surface beneath it; only its links take pointer events */
header a{pointer-events:auto}
header nav{display:flex;gap:28px}
header a{color:var(--corona)}
header nav a{position:relative;padding-bottom:2px}
header nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--flare);transition:right .35s cubic-bezier(.2,.7,.2,1)}
header nav a:hover::after,header nav a:focus-visible::after{right:0}

/* the sky: one procedural eclipse, fixed; the page passes over it */
#sky{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block;touch-action:pan-y pinch-zoom}
/* touch: vertical gestures scroll (the browser takes them and fires pointercancel); horizontal
   gestures are not used for panning, so their pointer events reach main.js and steer the light.
   pinch-zoom stays allowed — a bare pan-y would remove the standard low-vision zoom path */
body{touch-action:pan-y pinch-zoom}
/* touch steering surface over the eclipse (main.js sizes/positions it; shown while the hero is in view).
   pan-y is deliberately absent: single-finger pans here belong to the light; pinch stays the browser's */
.steer{display:none;position:fixed;left:0;top:0;width:0;height:0;border-radius:50%;touch-action:pinch-zoom;z-index:2}
html.coarse .steer.on{display:block}
#sky.dim{transition:opacity .2s linear}

main{position:relative;z-index:1}
.phase{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:0 var(--gutter);mix-blend-mode:difference}
.phase.hero{align-items:flex-start;min-height:100svh}
@media (max-width:760px){ .phase.hero{justify-content:flex-end;padding-bottom:14svh} }
.phase.hero .mono{margin-bottom:22px}
h1{font-family:var(--display);font-variation-settings:"opsz" 96,"wdth" 92;font-weight:200;font-size:clamp(2.8rem,8.6vw,8rem);line-height:.94;letter-spacing:-.025em;color:var(--corona)}
h1 .turn{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 144;font-weight:300;font-style:italic;letter-spacing:-.015em}
.lede{margin-top:34px;max-width:40ch;font-size:clamp(1rem,1.5vw,1.25rem);line-height:1.55;color:var(--corona);opacity:.86}

.phase.trait{min-height:76vh}
.trait .letter{font-variation-settings:"opsz" 96,"wdth" 100;font-weight:800;font-size:clamp(6rem,22vw,20rem);line-height:.8;letter-spacing:-.05em;color:var(--corona);opacity:.92}
.trait .letter small{font-weight:200;letter-spacing:.02em}
.trait .word{margin-top:26px;font-variation-settings:"opsz" 48;font-weight:400;font-size:clamp(1.4rem,2.6vw,2.2rem);letter-spacing:-.01em}
.trait .def{margin-top:10px;max-width:40ch;opacity:.74;line-height:1.55;font-size:1.05rem}

/* record + principles: the quiet, secret layer */
.quiet{min-height:auto;padding-top:clamp(64px,10vh,120px);padding-bottom:clamp(64px,10vh,120px)}
.quiet.tight{padding-top:0}
.quiet .head{display:flex;gap:18px;align-items:baseline;margin-bottom:34px}
.quiet .head .mono{color:var(--ash)}
.head-gap{margin-top:44px}
.faint{opacity:.55}
.record{display:grid;grid-template-columns:auto 1fr;column-gap:32px;row-gap:14px;max-width:720px;font-family:var(--mono);font-size:.82rem;letter-spacing:.02em;line-height:1.5}
.record .d{color:var(--ash);white-space:nowrap;font-variant-numeric:tabular-nums}
.record .e{color:var(--corona);opacity:.86}
.principles{max-width:760px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 40px}
.principles li{list-style:none;font-variation-settings:"opsz" 24;font-weight:300;font-size:clamp(1.05rem,1.6vw,1.35rem);letter-spacing:-.005em;padding:10px 0;border-top:1px solid var(--hair);opacity:.9}
.signature{margin-top:36px;max-width:40ch;font-variation-settings:"opsz" 48;font-weight:200;font-style:italic;font-size:clamp(1.2rem,2vw,1.7rem);line-height:1.35;color:var(--corona);opacity:.8}

.phase.operates{min-height:60vh}
.gap-b{margin-bottom:26px}
.operates .list{max-width:820px}
.operates .row{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;padding:26px 0;border-top:1px solid var(--hair)}
.operates .row:last-child{border-bottom:1px solid var(--hair)}
.arrow.dim{color:var(--ash)}
.operates .row:not(a):hover .arrow::after{background:var(--hair)}
.operates .name{font-variation-settings:"opsz" 48;font-weight:400;font-size:clamp(1.8rem,4vw,3rem);letter-spacing:-.02em}
.operates .desc{margin-top:8px;opacity:.78;max-width:44ch;line-height:1.5}
.operates .desc b{font-weight:500;opacity:1}
.arrow{font-family:var(--mono);font-size:.82rem;letter-spacing:.08em;color:var(--flare);position:relative;padding-bottom:3px;white-space:nowrap}
.arrow::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--hair);transition:background .3s}
.row:hover .arrow::after{background:var(--flare)}

footer{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;padding:40px var(--gutter) 48px;border-top:1px solid var(--hair);mix-blend-mode:difference}
footer a{border-bottom:1px solid var(--hair)}
footer a:hover{border-color:var(--flare)}

/* reveals: JS-off shows everything; only html.js hides-then-reveals */
html.js .rv{opacity:0;transform:translateY(14px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
html.js .rv.in{opacity:1;transform:none}
.rv:nth-child(2){transition-delay:.08s}.rv:nth-child(3){transition-delay:.16s}.rv:nth-child(4){transition-delay:.24s}

@media (max-width:760px){
  h1{font-size:clamp(2.8rem,14vw,5.6rem)}
  .phase.trait{min-height:64vh}
  .principles{grid-template-columns:1fr}
  .record{grid-template-columns:1fr;row-gap:4px}
  .record .d{margin-top:10px}
}

/* WebGL unavailable: main.js sets html.nogl; a still of the same shader stands in */
.fallback{display:none}
html.nogl #sky{display:none}
/* geometry mirrors main.js layoutParams(): desktop centre at 70vw (the still is
   100vmin wide, so offset by half of it), phone centred and 30% down */
html.nogl .fallback{display:block;position:fixed;inset:0;z-index:0;background:var(--void) url(/eclipse-fallback.jpg) no-repeat;background-size:100vmin;background-position:calc(70vw - 50vmin) 50%}
@media (max-width:760px){ html.nogl .fallback{background-size:55.5vmin;background-position:50% 20%} }
/* reduced motion: renderer is in static mode (main.js); here only CSS motion is removed */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html.js .rv{opacity:1;transform:none}
}

/* 404: no canvas behind the page — give it the void directly */
body.nf{background:var(--void)}
body.nf .phase{mix-blend-mode:normal}