/* ==========================================================================
   IgnatiusTheYoungerAI — site.css  (v3 · glass hero, clean body)
   One stylesheet for every page. Loads AFTER each page's own <style>, so the
   shared layer wins for nav, buttons, labels, footer, and the glass material.
   Brand: Jet #0A0A0B · Volt #CFFF04 (sparingly) · Paper #F5F5F5 · Slate #787A76
   Type: Boldonse (display) · JetBrains Mono (everything else) · 0px radius.
   ========================================================================== */

/* ---------- fonts: self-hosted, OFL, no third-party request ---------- */
@font-face{font-family:"Boldonse";font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/boldonse-latin-400-normal.woff2?v=39610c526b) 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;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-400-normal.woff2?v=39610c526b) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2?v=39610c526b) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-600-normal.woff2?v=39610c526b) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin-700-normal.woff2?v=39610c526b) format("woff2")}

/* ---------- tokens ---------- */
:root{
  --jet:#0A0A0B;--volt:#CFFF04;--paper:#F5F5F5;--slate:#787A76;--line:#1E1E20;
  --body:rgba(245,245,245,.85);
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --disp:"Boldonse","Arial Black",system-ui,sans-serif;
  /* glass material */
  --glass:linear-gradient(160deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.028) 52%,rgba(207,255,4,.035) 100%);
  --glass-flat:rgba(255,255,255,.04);
  --edge:rgba(255,255,255,.13);
  --edge-hi:rgba(255,255,255,.34);
  --glow:rgba(207,255,4,.28);
  /* holographic sweep, pulled from the ident */
  --iri-1:#CFFF04;--iri-2:#8AF5FF;--iri-3:#FFA6F0;--iri-4:#FFF3A1;
  --maxw:1120px;--gutter:28px;
}
@property --iri-a{syntax:"<angle>";inherits:false;initial-value:0deg}

/* ---------- base ---------- */
html{scroll-behavior:smooth}
/* no html background on purpose: body's propagates to the root, so the fixed rain canvas (negative z-index) stays visible */
body{background:var(--jet);color:var(--paper);font-family:var(--mono);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--volt);color:var(--jet)}
:focus-visible{outline:2px solid var(--volt);outline-offset:3px}

/* backdrop: flat. The pages' own dot-matrix texture and the v3 aurora are both switched off on purpose (2026-09-05) —
   the flat jet field is the look; the only moving background is the rain on Plain English. */
body::before,body::after{content:none!important}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);position:relative;z-index:2}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:99;background:rgba(10,10,11,.62);
  -webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.07);transition:background .3s,border-color .3s}
nav.scrolled{background:rgba(10,10,11,.82);border-bottom-color:rgba(255,255,255,.11)}
nav .nwrap,nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:62px;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wordmark{display:inline-flex;align-items:center;gap:11px;font-family:var(--disp);font-size:12.5px;letter-spacing:.02em;text-transform:uppercase;color:var(--paper);text-decoration:none}
.wordmark:hover{text-decoration:none;color:var(--paper)}
.wordmark img{width:28px;height:28px;display:block}
.navlinks{display:flex;gap:22px;align-items:center}
.navlinks a{position:relative;color:var(--slate);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 0;transition:color .2s;white-space:nowrap;flex-shrink:0}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--volt);transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.19,1,.22,1)}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--paper);text-decoration:none}
.navlinks a:hover::after,.navlinks a[aria-current="page"]::after{transform:scaleX(1)}
#iy-view-slot{display:inline-flex;margin-left:6px}
.menu-btn{display:none;appearance:none;background:transparent;border:1px solid var(--edge);color:var(--paper);font:700 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;padding:9px 12px;cursor:pointer;margin-left:auto}
.menu-btn[aria-expanded="true"]{background:rgba(207,255,4,.1);border-color:var(--volt);color:var(--volt)}
@media(max-width:1280px){.navlinks{gap:clamp(10px,1.4vw,18px)}.navlinks a{letter-spacing:.1em}}
@media(max-width:1500px){.navlinks .daychip{display:none}}
@media(max-width:1024px){
  nav .nwrap,nav .wrap{height:56px;gap:12px}
  .wordmark{font-size:11px}
  .menu-btn{display:inline-flex}
  .navlinks{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;
    background:#0B0B0C;border-bottom:1px solid var(--edge);padding:6px 0 10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
  nav.open .navlinks{display:flex}
  nav.open{background:#0B0B0C}
  .navlinks a{padding:13px var(--gutter);font-size:11px;letter-spacing:.16em;border-top:1px solid rgba(255,255,255,.06)}
  .navlinks a::after{display:none}
  .navlinks a[aria-current="page"]{color:var(--volt)}
  #iy-view-slot{display:none}
}

/* ---------- the Human / Machine toggle (rendered by machine-view.js) ---------- */
html body #iy-view{position:static;transform:none;left:auto;bottom:auto;display:inline-flex;
  background:rgba(10,10,11,.55);border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 30px -14px rgba(0,0,0,.8);
  font:600 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase}
html body #iy-view button{padding:9px 13px;color:var(--slate);gap:8px;transition:color .2s,background .2s}
html body #iy-view button::before{width:6px;height:6px}
html body #iy-view button[aria-pressed="true"]{color:var(--paper);background:rgba(207,255,4,.10)}
html body #iy-view button[aria-pressed="true"]::before{background:var(--volt);box-shadow:0 0 8px var(--volt)}
html body #iy-view button+button{border-left:1px solid var(--edge)}
html body #iy-view button:hover{color:var(--paper)}
/* when the nav has no slot (mobile), fall back to the fixed pill */
html body > #iy-view{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:2147483000;
  background:rgba(10,10,11,.74)}
html body #iy-machine{max-width:100ch;padding-top:32px}
/* machine view: the toggle sits in the bar at the top of the view, beside "Back to the page" */
html body #iy-machine-bar #iy-view{position:static;transform:none;background:rgba(10,10,11,.55)}
html body #iy-machine-bar{border-bottom-color:var(--edge)}

/* ---------- glass material ---------- */
.glass,
.gapcell,.plancell,.outcell,.modesband,.verband,.jml,.jmr,.pcell,.machine,.trialnote,.vcell,
.grid a,.cta,pre.assump,.answer,.card,.panel{
  background:var(--glass);border-color:var(--edge);
  position:relative;transition:box-shadow .4s ease,border-color .3s ease}
.gapcell:first-child,.jml,.modesband,.verband{background:var(--glass)}
.pcell.hot{background:linear-gradient(160deg,rgba(207,255,4,.09),rgba(255,255,255,.03) 60%);outline:1px solid var(--volt);outline-offset:-1px}
/* top-edge highlight, the thing that reads as glass */
.gapcell::before,.plancell::before,.outcell::before,.modesband::before,.verband::before,.jml::before,.pcell::before,.machine::before,.trialnote::before,.vcell::before,.cta::before,.glass::before,.card::before,.panel::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--edge-hi) 30%,var(--edge-hi) 70%,transparent)}
/* hover: a volt breath, no movement */
.gapcell:hover,.plancell:hover,.outcell:hover,.pcell:hover,.grid a:hover,.vcell:hover,.card:hover{
  box-shadow:0 0 0 1px var(--glow),0 28px 56px -30px var(--glow)}
.grid a:hover{background:linear-gradient(160deg,rgba(207,255,4,.10),rgba(255,255,255,.03))}
/* grid containers: thin lines, cells carry the fill */
.gapgrid,.plangrid,.outgrid,.pricegrid,.vstats,.jmgrid,.grid{border-color:var(--edge)}
.gapcell,.plancell,.outcell,.pcell,.vcell,.grid a,.convcell{border-color:var(--edge)}

/* holographic edge: the ident's material, as a 1px sweep */
.iri{position:relative;isolation:isolate}
.iri::after{content:"";position:absolute;inset:0;padding:1px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--iri-a),var(--iri-1),var(--iri-2),var(--iri-3),var(--iri-4),var(--iri-1));
  -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,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:.8;animation:iri-spin 16s linear infinite}
@keyframes iri-spin{to{--iri-a:360deg}}
/* an iridescent hairline, used as the footer rule and section dividers */
.iri-rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--iri-1) 18%,var(--iri-2) 42%,var(--iri-3) 66%,var(--iri-4) 84%,transparent);opacity:.55}

/* ---------- buttons ---------- */
.btn{display:inline-block;background:var(--volt);color:var(--jet);padding:14px 26px;font-weight:700;font-size:11px;letter-spacing:.15em;text-transform:uppercase;border:2px solid var(--volt);cursor:pointer;font-family:var(--mono);line-height:1;text-decoration:none;
  transition:box-shadow .3s ease,background .2s,color .2s}
.btn:hover{background:transparent;color:var(--volt);text-decoration:none;box-shadow:0 0 0 1px var(--volt),0 16px 40px -14px rgba(207,255,4,.55)}
.btn.ghostbtn{background:transparent;color:var(--paper);border-color:rgba(245,245,245,.55)}
.btn.ghostbtn:hover{border-color:var(--volt);color:var(--volt)}

/* ---------- labels ---------- */
.lbl{display:inline-block;font-size:9px;letter-spacing:.13em;padding:2px 6px;font-weight:700;vertical-align:2px}
.lbl-RESEARCH,.lbl-OBSERVED{background:var(--volt);color:var(--jet)}
.lbl-REPORTED{background:var(--paper);color:var(--jet)}
.lbl-ANALYSIS,.lbl-ESTIMATE{border:1px solid var(--slate);color:var(--slate)}
.lbl-MODELED{border:1px solid var(--volt);color:var(--volt)}
.lbl-RECOMMENDATION{border:1px solid var(--paper);color:var(--paper)}

/* ---------- display type: Boldonse is tall, so wrapped headings need leading ---------- */
.bhead h2,.tile h2,.modesband h3,.convcell h3,.gapcell .gv,.plancell .pt,.verband h3,header.hero h1:not(.mega),main .hero h1,.hero:not(.hero-ident) h1.mega{line-height:1.06}
@media(max-width:760px){.bhead{padding-right:96px}}

/* ---------- section rhythm (flagship pages) ---------- */
section.blk{padding:112px 0 96px}
@media(max-width:760px){section.blk{padding:80px 0 68px}}
.bsub{margin-bottom:44px}
.kicker{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--volt);display:block}

/* ---------- ident hero (index) ---------- */
.hero{position:relative}
.hero-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:48px;align-items:center}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:44px}}
.hero-copy{min-width:0}
.ident{margin:0;justify-self:end;width:min(100%,min(520px,76vh));aspect-ratio:1/1;position:relative;background:none;border:0;box-shadow:none;overflow:visible}
@media(max-width:900px){.ident{justify-self:center;width:min(86vw,440px)}}
/* the render is on black; screen-blending lifts the black away so the glass floats on the page */
.ident video,.ident img{display:block;width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;cursor:pointer}
.ident figcaption{display:none}
/* light bleeding onto the page, no box */
.ident::before{content:"";position:absolute;inset:-22%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(207,255,4,.20),rgba(207,255,4,.05) 55%,transparent 72%);filter:blur(26px)}
/* no stacking context between the video and the page, or the blend has nothing to blend with */
.hero.hero-ident .hero-inner{z-index:auto}
.hero.hero-ident .hero-inner{padding-top:64px;padding-bottom:110px;max-width:var(--maxw)}
/* the headline is sized to its own column so "THE CONTROL" never loses its L */
.hero.hero-ident .hero-copy{container-type:inline-size}
.hero.hero-ident h1.mega{font-size:clamp(34px,5vw,68px)}
@supports (font-size:1cqw){.hero.hero-ident h1.mega{font-size:clamp(34px,11.4cqw,76px)}}
@media(max-width:900px){.hero.hero-ident h1.mega{font-size:clamp(34px,10vw,72px)}@supports (font-size:1cqw){.hero.hero-ident h1.mega{font-size:clamp(34px,11.4cqw,72px)}}}
@media(max-width:900px){.hero.hero-ident{min-height:auto}.hero.hero-ident .hero-inner{padding-top:52px;padding-bottom:96px}}

/* ---------- the glass marks: rendered on black, blended so black disappears ---------- */
.mark,.cellmark,.hero-mark{pointer-events:none;user-select:none;height:auto}
.bhead{position:relative}
.bhead .mark{position:absolute;right:-8px;top:50%;transform:translateY(-50%);width:clamp(120px,15vw,200px);
  filter:drop-shadow(0 0 28px rgba(207,255,4,.22))}
@media(max-width:760px){.bhead .mark{width:96px;right:-12px;opacity:.85}}
.inverted .bhead .mark-tile{width:clamp(96px,11vw,150px);filter:none;box-shadow:0 20px 50px -20px rgba(10,10,11,.6)}
.gapcell{padding-right:120px}
.gapcell .cellmark{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:104px;opacity:.95;
  filter:drop-shadow(0 0 22px rgba(207,255,4,.2))}
@media(max-width:760px){.gapcell{padding-right:100px}.gapcell .cellmark{width:80px;right:8px}}
.hero .hero-mark{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);width:clamp(170px,24vw,340px);z-index:1;
  filter:drop-shadow(0 0 40px rgba(207,255,4,.22))}
.hero .hero-mark + *{position:relative;z-index:2}
@media(min-width:901px){
  .hero:has(.hero-mark)>.hero-inner,.hero:has(.hero-mark)>.wrap,header.hero:has(.hero-mark)>div{padding-right:clamp(220px,30vw,400px)}
  body.article .hero:has(.hero-mark){padding-right:clamp(160px,20vw,240px)}
}
@media(max-width:900px){.hero .hero-mark{width:clamp(120px,26vw,200px);top:18px;transform:none;opacity:.8}}
body.article .hero .hero-mark{width:clamp(120px,16vw,190px);right:0}

/* ---------- planet heroes: the mark floats top-right, the copy starts under it ---------- */
.hero.hero-planet{padding-top:clamp(240px,25vw,340px)}
.hero.hero-planet .hero-mark{top:28px;transform:none;width:clamp(210px,26vw,360px);filter:drop-shadow(0 0 48px rgba(207,255,4,.24))}
@media(min-width:901px){.hero.hero-planet>.hero-inner,.hero.hero-planet>.wrap,header.hero.hero-planet>div{padding-right:var(--gutter)}}
@media(max-width:900px){.hero.hero-planet{padding-top:clamp(190px,50vw,250px)}.hero.hero-planet .hero-mark{top:14px;width:clamp(150px,42vw,220px);opacity:1}}
body.article .hero.hero-planet{padding-top:clamp(300px,34vw,400px)}
@media(max-width:900px){body.article .hero.hero-planet{padding-top:clamp(250px,68vw,330px)}}

/* ---------- video marks: rendered on black, screen-blended, never inside a stacking context ---------- */
section.blk{position:relative}
.mark-video{position:absolute;top:-44px;right:max(var(--gutter),calc((100% - var(--maxw)) / 2 + var(--gutter)));width:clamp(130px,15vw,200px);height:auto;
  mix-blend-mode:screen;pointer-events:none;z-index:0}
@media(max-width:760px){.mark-video{top:-30px;width:110px;opacity:.9}}
.page-mark{position:absolute;top:64px;right:max(var(--gutter),calc((100% - 840px) / 2 + var(--gutter)));width:clamp(150px,19vw,230px);height:auto;
  mix-blend-mode:screen;pointer-events:none;z-index:0}
.page-mark-portrait{aspect-ratio:9/16}
@media(max-width:900px){.page-mark{top:52px;width:clamp(120px,32vw,170px)}}

/* ---------- about: rain + credits ---------- */
#iyrain{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.credits{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--edge)}
@media(max-width:760px){.credits{grid-template-columns:1fr}}
.credit{padding:32px 30px;position:relative;background:var(--glass)}
.credit+.credit{border-left:1px solid var(--edge)}
@media(max-width:760px){.credit+.credit{border-left:0;border-top:1px solid var(--edge)}}
.credit .ck{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--slate);display:block}
.credit .cn{font-family:var(--disp);font-size:clamp(22px,2.8vw,34px);line-height:1.06;text-transform:uppercase;display:block;margin:10px 0 14px;color:var(--paper)}
.credit-love .cn{color:var(--volt)}
.credit p{font-size:13.5px;color:var(--body);margin:0}
@media(max-width:900px){body.article .hero .hero-mark{width:96px;top:8px;opacity:.7}}

/* ---------- article pages (24 failure modes, utility pages) ---------- */
/* body links were volt under the retired style.css; restore that (browser-default blue otherwise) */
body.article main a{color:var(--volt);text-decoration:none}
body.article main a:hover{text-decoration:underline}
body.article .wrap{max-width:840px}
body.article .wide,body.article nav .wrap{max-width:var(--maxw)}
body.article h1,body.article h2,body.article h3{font-family:var(--disp);font-weight:400;letter-spacing:-.03em;line-height:1.05}
body.article h1{font-size:clamp(30px,5vw,56px);text-transform:uppercase;margin-bottom:18px}
body.article h2{font-size:clamp(20px,2.8vw,28px);text-transform:uppercase;margin:52px 0 16px;padding-top:28px;border-top:1px solid var(--edge)}
body.article h3{font-size:15px;text-transform:uppercase;margin:26px 0 10px;letter-spacing:.02em}
body.article p{margin-bottom:16px;color:#D8D8D6}
body.article strong{color:var(--paper);font-weight:600}
body.article ul{margin:0 0 16px 20px}body.article li{margin-bottom:7px;color:#D8D8D6}
body.article code{background:#151517;padding:1px 5px;font-size:13px;color:var(--volt)}
body.article blockquote{border-left:3px solid var(--volt);padding:10px 0 10px 18px;margin:20px 0;color:var(--paper);font-size:16px}
body.article pre.assump{padding:18px 20px;font-size:12.5px;line-height:1.65;overflow-x:auto;color:#C9CAC4;margin-bottom:18px;white-space:pre-wrap;border:1px solid var(--edge)}
body.article table{width:100%;border-collapse:collapse;margin:18px 0;font-size:13.5px}
body.article th{background:rgba(255,255,255,.05);color:var(--volt);text-align:left;padding:9px 11px;font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:600;border:1px solid var(--edge)}
body.article td{border:1px solid var(--edge);padding:9px 11px;vertical-align:top;color:#D0D0CE}
body.article .hero{padding:72px 0 30px;background:none}
body.article .kicker{margin-bottom:14px}
body.article .answer{border-left:3px solid var(--volt);padding:18px 22px;margin:22px 0 30px;font-size:17px;line-height:1.55;color:var(--paper)}
body.article .meta{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:30px;padding-bottom:18px;border-bottom:1px solid var(--edge)}
body.article .ratio{background:var(--volt);color:var(--jet);padding:20px 22px;margin:22px 0;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:10px}
body.article .ratio .k{font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700}
body.article .ratio .v{font-family:var(--disp);font-size:30px;line-height:1;letter-spacing:-.03em}
body.article .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));border-top:1px solid var(--edge);border-left:1px solid var(--edge)}
body.article .grid a{display:block;padding:18px;border-right:1px solid var(--edge);border-bottom:1px solid var(--edge);color:#D8D8D6}
body.article .grid .num{font-family:var(--disp);font-size:11px;color:var(--volt);display:block;margin-bottom:5px}
body.article .grid .nm{font-size:13px;display:block;margin-bottom:4px}
body.article .grid .rt{font-size:10.5px;color:var(--slate)}
body.article .pager{display:flex;justify-content:space-between;gap:14px;margin:44px 0 0;padding-top:22px;border-top:1px solid var(--edge);font-size:11.5px}
body.article .cta{border:1px solid var(--edge);padding:28px;margin:48px 0 0;overflow:hidden}
body.article .cta::after{content:"";position:absolute;top:-30px;right:-70px;width:180px;height:56px;background:var(--volt);transform:rotate(-7deg);opacity:.9;pointer-events:none}
body.article .cta>*{position:relative;z-index:1}
body.article .joinbox{display:flex;gap:0;flex-wrap:wrap;max-width:520px;margin-top:16px}
body.article .joinbox input{flex:1 1 200px;background:transparent;border:1px solid var(--edge);border-right:0;color:var(--paper);font-family:var(--mono);font-size:13px;padding:12px 14px}
body.article .joinbox button{background:var(--volt);border:1px solid var(--volt);color:var(--jet);font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.15em;text-transform:uppercase;padding:12px 20px;cursor:pointer}
@media(max-width:520px){body.article .joinbox input{border-right:1px solid var(--edge)}}

/* ---------- footer ---------- */
footer{border-top:0;position:relative;margin-top:0;padding:44px 0 64px;font-size:10.5px;letter-spacing:.1em;color:var(--slate)}
footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--iri-1) 18%,var(--iri-2) 42%,var(--iri-3) 66%,var(--iri-4) 84%,transparent);opacity:.5}
footer a{color:var(--slate)}footer a:hover{color:var(--volt)}
.f3{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px;text-transform:uppercase}
.f3 .slog{color:var(--volt)}
.flinks{display:flex;gap:16px;flex-wrap:wrap}
.disc{margin-top:18px;font-size:10px;color:var(--slate);letter-spacing:.06em}

/* ---------- paper tiles keep their contrast, gain a lift ---------- */
.tile{box-shadow:0 40px 80px -40px rgba(207,255,4,.3),0 0 0 1px rgba(255,255,255,.06)}

/* ---------- motion respect ---------- */
@media (prefers-reduced-motion: reduce){
  .iri::after{animation:none}
  .navlinks a::after{transition:none}
}