/* Ophanimus Resources: essay kit.
   Ported from the compute-cartel build (acts, scrolly steps, glow, sources) and recoloured to the
   landing page's lattice palette. Teal is the plan; ember is the friction. Dark only. */

@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-v20-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-v20-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(/fonts/jetbrains-mono-v24-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  color-scheme:dark;
  --bg:#07080c; --panel:#0b0c10; --ink:#eafffb; --ink-2:#9fb3ae; --muted:#5f6e6a; --hair:#1a1e22;
  --teal:#4ec9b0; --teal-hi:#78e8d0; --teal-glow:#8fe6d5; --ember:#ff6b35;
  --font:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18.5px/1.55 var(--font);padding-inline:16px;-webkit-font-smoothing:antialiased;overflow-x:clip;font-optical-sizing:auto}
a{color:inherit;text-decoration-color:var(--muted);text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
code,.mono{font-family:var(--mono);font-size:.86em;letter-spacing:0}

/* the lattice behind everything */
#lattice{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity 1.4s ease}
#lattice canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.reading #lattice{opacity:.12}
.ignite #lattice{opacity:.6}
.hub #lattice{opacity:.3}
.hero,.scrolly,.act,.finale,.spot,.contact,.cta,.byline,.after,.foot,.hub-head,.cards{position:relative;z-index:1}
.finale,.step{overflow-x:clip} /* the .stmt.xl glow halo bleeds 25% past its line; keep it from widening the page */

/* top line */
.top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;gap:16px;padding:22px 16px 0;z-index:5;align-items:center;max-width:1240px;margin:0 auto}
.top .brand{display:inline-flex;align-items:center;gap:.5rem;color:var(--ink);font-weight:700;font-size:20px;letter-spacing:-.02em;text-decoration:none}
.top .brand svg{width:24px;height:24px;color:var(--ink)}
.top .crumbs{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.top .crumbs a{text-decoration:none;color:var(--ink-2)}
.top .crumbs a:hover{color:var(--ink)}
.top .crumbs i{font-style:normal;color:var(--muted);margin:0 8px}

/* hero */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;max-width:1240px;margin:0 auto;padding-block:16vh 12vh}
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin:0 0 22px}
.hero h1{font-weight:800;font-size:clamp(40px,6.6vw,96px);line-height:.98;letter-spacing:-.04em;margin:0;max-width:16ch;text-wrap:balance}
.hl{color:var(--teal-hi);text-shadow:0 0 28px rgba(78,201,176,.45)}
.em{color:var(--ember);text-shadow:0 0 22px rgba(255,107,53,.35)}
.dek{font-size:clamp(19px,2vw,25px);line-height:1.35;color:var(--ink-2);max-width:44ch;margin:28px 0 0;text-wrap:pretty}
.by{margin-top:36px;font-size:15px;color:var(--ink-2);display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.by b{color:var(--ink);font-weight:600}
.by a{text-decoration-color:var(--teal)}
.by .sep{width:4px;height:4px;border-radius:50%;background:var(--muted);display:inline-block}
.hint{margin-top:44px;font-size:14px;color:var(--ink-2);display:flex;align-items:center;gap:10px}
.hint i{display:block;width:1px;height:34px;background:linear-gradient(var(--ink-2),transparent);animation:drip 2.2s ease-in-out infinite}
@keyframes drip{0%,100%{transform:translateY(-4px);opacity:.4}50%{transform:translateY(4px);opacity:1}}

/* scrolly: text left, sticky graphic right */
.scrolly{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:56px;max-width:1240px;margin:0 auto}
.graphic{grid-column:2;grid-row:1;position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center}
.graphic svg{display:block;width:100%;height:auto;max-height:78vh;overflow:visible}
.steps{grid-column:1;grid-row:1;position:relative;z-index:2}
.step{min-height:100vh;display:flex;align-items:center;padding-block:12vh}
.card{max-width:30ch;transition:opacity .5s}
.js .step:not(.active) .card{opacity:.28}

/* type */
.stmt{font-weight:700;font-size:clamp(34px,4.4vw,62px);line-height:1.06;letter-spacing:-.028em;margin:0;text-wrap:balance}
.stmt.xl{position:relative;font-size:clamp(76px,11vw,168px);letter-spacing:-.045em;font-weight:800;color:var(--teal-hi);text-shadow:0 0 14px rgba(143,230,213,.7),0 0 48px rgba(78,201,176,.55),0 0 110px rgba(78,201,176,.35)}
.stmt.xl::before{content:"";position:absolute;inset:-40% -25%;background:radial-gradient(closest-side,rgba(78,201,176,.22),rgba(78,201,176,0));opacity:0;transition:opacity 1.4s ease;z-index:-1;pointer-events:none}
.js .step.active .stmt.xl{animation:ignite 1.9s cubic-bezier(.2,.7,.2,1) both}
.js .step.active .stmt.xl::before{opacity:1}
@keyframes ignite{0%{color:#1d4a41;text-shadow:0 0 0 rgba(78,201,176,0)}40%{color:#eafffb;text-shadow:0 0 20px rgba(234,255,251,.95),0 0 70px rgba(120,232,208,.85),0 0 160px rgba(78,201,176,.6)}100%{color:#78e8d0;text-shadow:0 0 14px rgba(143,230,213,.7),0 0 48px rgba(78,201,176,.55),0 0 110px rgba(78,201,176,.35)}}
.lead{font-weight:600;font-size:clamp(24px,2.5vw,32px);line-height:1.2;letter-spacing:-.015em;margin:0 0 18px;text-wrap:balance}
.q{font-weight:500;font-size:clamp(22px,2.3vw,29px);line-height:1.3;letter-spacing:-.012em;margin:0;text-wrap:pretty}
.q + .q{margin-top:14px}
.who{display:block;font-size:16px;font-weight:400;color:var(--ink-2);margin-top:8px;letter-spacing:0}
.note{font-size:17px;line-height:1.55;color:var(--ink-2);margin:16px 0 0}
.note b{color:var(--ink);font-weight:600}
.src{font-size:14px;color:var(--muted);margin-top:14px;display:inline-block}
.src a{color:var(--muted)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tag{display:inline-block;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;padding:3px 8px;border-radius:6px;border:1px solid var(--hair);color:var(--ink-2);margin-top:14px}
.tag.ember{color:var(--ember);border-color:rgba(255,107,53,.35)}
.tag.teal{color:var(--teal-hi);border-color:rgba(78,201,176,.4)}

/* act title cards and the finale */
.act{min-height:78vh;display:flex;align-items:center;max-width:1240px;margin:0 auto}
.act h2{font-weight:700;font-size:clamp(40px,6.4vw,92px);line-height:1;letter-spacing:-.035em;margin:0;max-width:14ch;text-wrap:balance}
.act h2 span{color:var(--ink-2)}
.finale{min-height:88vh;display:flex;align-items:center;justify-content:center;text-align:center;max-width:1100px;margin:0 auto}
.finale p{font-weight:700;font-size:clamp(34px,5vw,70px);line-height:1.06;letter-spacing:-.03em;margin:0;max-width:20ch;text-wrap:balance}
.finale p.big{font-size:clamp(52px,9vw,132px);color:var(--teal-hi);text-shadow:0 0 40px rgba(78,201,176,.45)}
.finale small{display:block;font-size:15px;font-weight:400;letter-spacing:0;color:var(--ink-2);margin-top:26px}

/* pull quote */
.spot{min-height:100vh;display:flex;align-items:center;justify-content:center;max-width:1000px;margin:0 auto;padding-block:10vh}
.spot blockquote{margin:0}
.spot p{font-weight:600;font-size:clamp(21px,2.5vw,33px);line-height:1.28;letter-spacing:-.015em;margin:0;text-wrap:pretty}
.spot cite{display:block;margin-top:20px;font-size:16px;font-style:normal;color:var(--ink-2)}
.spot .kicker{font-size:clamp(14px,1.4vw,16px);margin-bottom:18px}

/* gauge */
.gauge{height:10px;background:rgba(234,255,251,.08);border-radius:6px;overflow:hidden;margin-top:20px}
.gauge i{display:block;height:100%;background:var(--teal);box-shadow:0 0 18px rgba(78,201,176,.55);transition:width 1.8s cubic-bezier(.2,.7,.2,1)}
.gauge.ember i{background:var(--ember);box-shadow:0 0 18px rgba(255,107,53,.45)}
.js .step:not(.active) .gauge i{width:0!important}
.gauge-ends{display:flex;justify-content:space-between;font-size:14px;color:var(--muted);margin-top:8px;font-family:var(--mono)}

/* svg vocabulary (shared by every hand-built graphic) */
svg text{font-family:var(--font);fill:var(--ink-2)}
svg text.mono{font-family:var(--mono)}
.lbl{font-size:14.5px}
.lbl-b{font-size:15px;font-weight:600;fill:var(--ink)}
.lbl-d{font-size:13px;fill:var(--muted)}
.day{font-size:13px;fill:var(--muted)}
.wlbl{paint-order:stroke;stroke:var(--bg);stroke-width:5px;stroke-linejoin:round}
.base{stroke:var(--hair);stroke-width:1}
.ghost{stroke:var(--ink);stroke-opacity:.09;stroke-width:1.5}
.stem{fill:none;stroke-width:1.5}
.teal .stem{stroke:var(--teal);stroke-opacity:.8}
.ember .stem{stroke:var(--ember);stroke-opacity:.7}
.teal .dot{fill:var(--teal-hi)}
.ember .dot{fill:var(--ember)}
.js .ev .stem{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1)}
.js .ev.on .stem{stroke-dashoffset:0}
.js .ev .dot,.js .ev text,.js .ev .fill{opacity:0;transition:opacity .45s .5s}
.js .ev.on .dot,.js .ev.on text,.js .ev.on .fill{opacity:1}
.js .fade{opacity:0;transition:opacity .8s}
.js .fade.on{opacity:1}
.js .dim-on.on{opacity:.18;transition:opacity 1s}
.ring{fill:none;stroke:var(--teal);stroke-width:1.5}
.js .ring{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.3,.6,.2,1),stroke .8s}
.js .ring.on{stroke-dashoffset:0}
.bob{animation:bob 5.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(-6px)}50%{transform:translateY(6px)}}

/* thread navigator: the essay's acts as a dependency chain along the bottom edge */
#thread{position:fixed;left:0;right:0;bottom:0;height:50vh;z-index:4;pointer-events:none;overflow:hidden;transition:opacity .8s}
#thread.dim{opacity:.2}
#thread svg{position:absolute;left:0;right:0;bottom:0;display:block;width:100%;height:76px;overflow:visible}
#thread .t-edge{stroke:var(--ink);stroke-opacity:.12;stroke-width:1.5}
#thread .t-lit{stroke:var(--teal);stroke-opacity:.85;stroke-width:1.5;filter:url(#tglow)}
.js #thread .t-lit{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .9s cubic-bezier(.2,.7,.2,1)}
.js #thread .t-lit.on{stroke-dashoffset:0}
#thread a{pointer-events:auto;cursor:pointer;outline:none}
#thread .t-hit{fill:transparent}
#thread .t-node{fill:var(--bg);stroke:var(--ink);stroke-opacity:.35;stroke-width:1.5;transition:fill .6s,stroke .6s,stroke-opacity .6s}
#thread .done .t-node{fill:var(--teal);stroke:var(--teal);stroke-opacity:1}
#thread .cur .t-node{fill:var(--teal-hi);stroke:var(--teal-hi);stroke-opacity:1;filter:url(#tglow)}
#thread a:hover .t-node,#thread a:focus-visible .t-node{stroke:var(--teal-hi);stroke-opacity:1}
#thread .t-lab{font-family:var(--mono);font-size:11px;fill:var(--ink-2);opacity:0;transition:opacity .4s;text-anchor:middle;letter-spacing:.02em}
#thread a:hover .t-lab,#thread a:focus-visible .t-lab{opacity:1}
#thread .cur .t-lab{opacity:0}
#thread .t-read{font-family:var(--mono);font-size:12px;fill:var(--teal-hi);letter-spacing:.04em;text-anchor:middle;transition:opacity .5s;font-variant-numeric:tabular-nums}
#thread .t-beam{position:absolute;bottom:26px;left:0;width:0;height:40vh;background:radial-gradient(ellipse 50% 100% at 50% 100%,rgba(78,201,176,.12),rgba(78,201,176,.035) 45%,rgba(78,201,176,0) 72%);filter:blur(10px);transition:left .9s cubic-bezier(.2,.7,.2,1),width .9s,opacity .6s}
@media (max-width:860px){#thread svg{height:56px}#thread .t-lab{display:none}#thread .t-read{font-size:11px}#thread .t-beam{height:28vh}}

/* close: contact, cta, byline, sources */
.contact{max-width:880px;margin:0 auto;padding:60px 0 6px;text-align:center}
.contact p{font-size:clamp(18px,2vw,22px);line-height:1.45;color:var(--ink-2);margin:0 auto;max-width:40ch;text-wrap:pretty}
.contact a{color:var(--ink);text-decoration-color:var(--teal)}
.cta{max-width:880px;margin:34px auto 0;text-align:center}
.cta a{display:inline-block;font-weight:600;font-size:15px;color:var(--bg);background:var(--teal);padding:12px 18px;border-radius:11px;text-decoration:none;box-shadow:0 0 0 1px rgba(78,201,176,.72),0 0 18px rgba(78,201,176,.32);transition:background .25s,transform .25s}
.cta a:hover{background:var(--teal-hi);transform:translateY(-1px)}
.cta small{display:block;margin-top:12px;font-size:13.5px;color:var(--muted)}
.byline{max-width:880px;margin:54px auto 0;padding:44px 0 10px;border-top:1px solid var(--hair);text-align:center}
.byline .by-name{font-size:clamp(22px,2.4vw,28px);font-weight:700;letter-spacing:-.02em;margin:0 0 10px}
.byline .by-name a{text-decoration-color:var(--teal);text-underline-offset:5px}
.byline .by-role{font-size:16px;color:var(--ink-2);margin:0 0 8px}
.byline .by-note{font-size:15px;color:var(--muted);margin:0 auto;max-width:56ch}
.after{max-width:880px;margin:0 auto;padding-block:40px 40px}
.after h2{font-weight:700;font-size:clamp(32px,4vw,48px);letter-spacing:-.03em;line-height:1.05;margin:0 0 12px}
.after > p{color:var(--ink-2);font-size:17px;margin:0 0 26px;max-width:62ch}
ol.sources{margin:0;padding-left:26px;display:grid;gap:13px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
ol.sources li::marker{color:var(--muted);font-family:var(--mono);font-size:13px}
ol.sources span{color:var(--muted);font-size:14px}
ol.sources a{overflow-wrap:anywhere;color:var(--ink-2)}
ol.sources li:target{color:var(--ink)}
ol.sources li:target::marker{color:var(--teal-hi)}
.fine{font-size:15px;line-height:1.6;color:var(--muted);margin-top:28px}
.foot{max-width:880px;margin:0 auto;padding:30px 0 140px;border-top:1px solid var(--hair);display:flex;gap:1.2rem;flex-wrap:wrap;justify-content:center;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.foot a{text-decoration:none;color:var(--muted)}
.foot a:hover{color:var(--ink)}

/* the hub */
.hub-head{max-width:1240px;margin:0 auto;padding:22vh 0 8vh}
.hub-head h1{font-weight:800;font-size:clamp(44px,7vw,104px);letter-spacing:-.04em;line-height:.98;margin:0;max-width:14ch;text-wrap:balance}
.hub-head .dek{max-width:52ch}
.cards{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;padding-bottom:12vh}
.card-e{display:block;text-decoration:none;color:inherit;background:linear-gradient(180deg,#0f1116,#0b0c10 70%,#090a0e);border:1px solid var(--hair);border-radius:18px;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.card-e:hover,.card-e:focus-visible{transform:translateY(-3px);border-color:rgba(78,201,176,.45);box-shadow:0 0 0 1px rgba(78,201,176,.35),0 0 32px rgba(78,201,176,.14),0 24px 50px -30px #000}
.card-e .thumb{aspect-ratio:16/9;background:#07080c;border-bottom:1px solid var(--hair)}
.card-e .thumb svg{display:block;width:100%;height:100%}
.card-e .body{padding:22px 24px 26px}
.card-e .kicker{margin:0 0 12px;font-size:11.5px}
.card-e h2{font-weight:700;font-size:clamp(24px,2.4vw,32px);line-height:1.08;letter-spacing:-.03em;margin:0 0 12px;text-wrap:balance;transition:color .35s,text-shadow .35s}
.card-e:hover h2,.card-e:focus-visible h2{color:var(--teal-hi);text-shadow:0 0 24px rgba(78,201,176,.4)}
.card-e p{font-size:16px;line-height:1.5;color:var(--ink-2);margin:0 0 18px}
.card-e .read{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}

/* small screens: the text stacks as blurred cards over the graphic */
@media (max-width:860px){
  .scrolly{display:block}
  .graphic{height:100vh;height:100svh;align-items:flex-start;padding-top:9vh}
  .graphic svg{max-height:48vh}
  .steps{margin-top:-100vh;margin-top:-100svh}
  .step{min-height:100vh;min-height:100svh;align-items:flex-end;padding-block:0 12vh}
  .card{max-width:none;background:rgba(7,8,12,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding:18px 18px 20px;border:1px solid var(--hair);border-radius:12px}
  .js .step:not(.active) .card{opacity:1}
  .hint{margin-top:22px}
  .cards{grid-template-columns:1fr}
  .top .crumbs{display:none}
}
@media (max-width:640px){.top .brand{font-size:18px}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}