/* Zone7 Studios hub: "Orbit" design system (v121, 2026-09-09).
   Contrast proof: tools/wcag-contrast.py (run it before ANY colour/surface change; it must exit 0).
   The proof rests on three CSS constants that must stay in step with the script:
     FIELD_MAX  #field{opacity:.62}      the particle canvas can never brighten the page past 62% of white
     TINT_MAX   .tint.on{opacity:.13}    the per-app accent wash can never exceed 13%
     PANE       rgba(5,7,13,.78)         every text block that sits on the open field carries this scrim
   Raise exposure inside assets/orbit.js draw(), NEVER FIELD_MAX.
   2026-09-13 (?v=123, first-load flicker fix): index.html's head script now adds 'js' BEFORE
   the first paint, so every hidden-until-revealed state below is the FIRST frame and nothing is
   painted visible and then blinked off. 'failsafe' (same head script, 3.5 s, cancelled by
   window.Z7.ready) is the escape hatch if orbit.js never runs. No colour, alpha or surface
   changed in that fix, so the contrast proof above stands unaltered.
   2026-09-13 (?v=124, Launch Sale): one temporary ribbon in the hero pane (search "Launch Sale"
   below). It introduces no new colour, alpha or surface: it is --dim and --acc text with an --acc
   hairline, on the PANE scrim the hero pane already carries, and the proof carries its pairs. */

@font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-regular.woff2?v=120) format("woff2")}
@font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap;src:url(fonts/instrument-serif-italic.woff2?v=120) format("woff2")}

:root{
  --bg:#05070d;
  --ink:#eef1f7;
  --dim:#aab3c7;
  --faint:#98a3b8;
  --line:rgba(190,205,240,.12);
  --line2:rgba(190,205,240,.24);
  --acc:#9fb4d8;
  --pane:rgba(5,7,13,.78);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --pad:clamp(1.25rem,5vw,4.5rem);
  --ease:cubic-bezier(.19,.8,.26,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.rm{scroll-behavior:auto}
body{font-family:var(--sans);line-height:1.55;background:var(--bg);color:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased;min-height:100svh}
::selection{background:#9fb4d8;color:#05070d}
a{color:inherit}
img,svg{display:block;max-width:100%}
html{color-scheme:dark}
b{font-weight:700}
[id]{scroll-margin-top:4.6rem}

/* focus: two-tone ring (light ring between two dark halos) so it reads on every surface */
:focus{outline:none}
:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:0 0 0 3px rgba(5,7,13,.92),0 0 0 5px #eef1f7,0 0 0 8px rgba(5,7,13,.92);border-radius:6px}

/* ---------- fixed layers ---------- */
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.62}
.tint{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.1s ease;background:radial-gradient(70% 55% at 50% 58%,var(--t,#9fb4d8),transparent 70%)}
.tint.on{opacity:.13}
.veil{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,rgba(5,7,13,.55),rgba(5,7,13,0) 22%,rgba(5,7,13,0) 70%,rgba(5,7,13,.6))}
.prog{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--acc);transform-origin:0 50%;transform:scaleX(0);z-index:31;pointer-events:none;transition:background .9s ease}
main{position:relative;z-index:1}
footer{position:relative;z-index:1}

.skip{position:absolute;left:-999px;top:.6rem;z-index:40;background:var(--ink);color:#05070d;padding:.7em 1.1em;border-radius:8px;font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;box-shadow:0 0 0 3px rgba(5,7,13,.92)}
.skip:focus{left:.6rem}

/* ---------- nav (fixed, its own glass band) ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:30;padding:.7rem var(--pad);pointer-events:none;background:rgba(5,7,13,.84)}
.nav::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(rgba(5,7,13,.84),rgba(5,7,13,0));pointer-events:none}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;max-width:1180px;margin:0 auto}
.nav a{pointer-events:auto}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;min-height:36px;font-size:.78rem;letter-spacing:.24em;font-weight:600;color:var(--ink)}
.brand svg{width:30px;height:30px}
.brand .brand-sub{font-weight:300;letter-spacing:.22em;color:var(--dim);margin-left:.35em}
.brand b{color:var(--acc);transition:color .9s ease}
.navlinks{display:flex;gap:.2rem}
.navlinks a{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);text-decoration:none;padding:.6em .7em;min-height:24px;border-radius:999px;transition:color .3s}
.navlinks a:hover{color:var(--ink)}
@media (max-width:560px){.navlinks a{padding:.6em .45em;font-size:.68rem;letter-spacing:.14em}}

/* Keep all three nav links visible on narrow phones, including 320px reflow. */
@media (max-width:420px){
  .nav{padding-left:.75rem;padding-right:.75rem}
  .nav .wrap{gap:.4rem}
  .brand{font-size:.64rem;letter-spacing:.16em;gap:.35rem}
  .brand svg{width:24px;height:24px}
  .brand .brand-sub{letter-spacing:.14em}
  .navlinks a{font-size:.62rem;letter-spacing:.08em;padding:.6em .4em}
}

/* ---------- motion control ---------- */
.motion{position:fixed;right:14px;bottom:14px;z-index:30;font:inherit;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);background:rgba(5,7,13,.84);border:1px solid rgba(190,205,240,.52);border-radius:999px;padding:.7em 1.1em;min-height:36px;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.motion::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--dim);margin-right:.6em;vertical-align:1px}
.motion[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.motion[aria-pressed="true"]::before{background:var(--ink)}

/* ---------- type ---------- */
.ck{font-size:.7rem;letter-spacing:.36em;text-transform:uppercase;color:var(--acc);display:flex;gap:.9rem;align-items:center;transition:color .9s ease}
.ck::before{content:"";width:2.4rem;height:1px;background:currentColor;opacity:.7;flex:none}
h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.5rem,6.2vw,4.8rem);line-height:1.02;letter-spacing:-.012em;margin:.9rem 0 1rem;text-wrap:balance}
.sub{color:var(--dim);max-width:54ch;font-size:clamp(1.05rem,1.6vw,1.28rem);font-weight:350;line-height:1.6}
.chapter{position:relative;padding:14svh var(--pad)}
.inner{max-width:1180px;margin:0 auto}
.rule{height:1px;background:var(--line);margin:9svh 0}

/* panes: every text block that sits on the open field gets the scrim (PANE) with a soft feather outside its box */
.pane{position:relative;background:var(--pane);border-radius:28px;box-shadow:0 0 90px 48px var(--pane)}
.head{padding:1.4rem 1.25rem 1.2rem;margin:0 -1.25rem}

/* reveals: hidden state only when JS present, motion allowed and the failsafe has not fired.
   'js' is set in the head BEFORE first paint, so this hidden state is the first frame (never a
   visible-then-hidden blink); the .failsafe guard is what makes that safe if orbit.js never
   arrives to reveal them (see the escape hatch at the end of this file). */
html.js:not(.rm):not(.failsafe) .rv{opacity:0;transform:translateY(26px);transition:opacity .95s ease,transform .95s var(--ease);transition-delay:var(--d,0s)}
html.js:not(.rm):not(.failsafe) .rv.on{opacity:1;transform:none}
.lines .ln{display:block}
html.js:not(.rm):not(.failsafe) .lines .ln{opacity:0;transform:translateY(16px);transition:opacity .8s ease,transform .8s var(--ease);transition-delay:calc(var(--i,0)*.11s)}
html.js:not(.rm):not(.failsafe) .lines.on .ln{opacity:1;transform:none}

/* ---------- hero ---------- */
.hero-wrap{position:relative}
html.enh .hero-wrap{height:280svh}
.hero{min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:18svh var(--pad) 14svh;position:relative}
html.enh .hero{position:sticky;top:0;height:100svh;min-height:0;padding:0 var(--pad)}
.hero-copy{max-width:64rem;padding:2rem clamp(1rem,4vw,3rem) 2.4rem;border-radius:36px;box-shadow:0 0 140px 70px var(--pane)}
.kicker{font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--dim)}
.wm{font-family:var(--sans);font-weight:700;font-size:clamp(3.6rem,13vw,10.5rem);line-height:.92;letter-spacing:-.045em;margin:1.4rem 0 1.2rem;text-shadow:0 2px 60px rgba(123,158,255,.12)}
.wm .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .05em .1em;margin-bottom:-.1em}
.wm .i{display:inline-block}
.wm b{color:var(--acc);transition:color .9s ease}
.wm .st{display:block;font-weight:200;letter-spacing:.06em;font-size:.5em;color:var(--ink)}
.tag{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.5rem,3.8vw,2.7rem);line-height:1.15;color:var(--ink);margin:0 auto;max-width:26ch}
.tag .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:0 .08em .12em;margin:0 -.04em -.12em}
.tag .i{display:inline-block}
.trust{margin-top:1.8rem;font-size:.86rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center;margin-top:2.2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.85em 1.7em;border-radius:999px;font-weight:600;font-size:.95rem;text-decoration:none;color:var(--ink);border:1px solid rgba(214,224,245,.68);background:rgba(5,7,13,.5);transition:transform .35s var(--ease),border-color .35s,background .35s,color .35s}
.btn-primary{background:var(--ink);color:#05070d;border-color:transparent}
@media (hover:hover) and (pointer:fine){
  .btn:hover{transform:translateY(-2px);border-color:var(--ink)}
  .btn-primary:hover{background:#fff}
}
.hint{position:absolute;bottom:4svh;left:0;right:0;text-align:center;font-size:.64rem;letter-spacing:.34em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.hint-in{display:inline-block;background:var(--pane);padding:.7em 1.2em .2em 1.5em;border-radius:999px}
.hint i{display:block;width:1px;height:40px;margin:.6rem auto 0;background:linear-gradient(var(--faint),transparent);transform-origin:top;animation:bob 3s ease-in-out infinite}
@keyframes bob{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}

/* intro (time based, CSS only, JS gated, runs once) */
html.js:not(.rm) .hero .i{transform:translateY(112%);animation:rise 1.15s cubic-bezier(.16,.84,.28,1) forwards;animation-delay:calc(.35s + var(--i,0)*.085s)}
html.js:not(.rm) .kicker,html.js:not(.rm) .trust,html.js:not(.rm) .hero .btn-row,html.js:not(.rm) .hint-in{opacity:0;animation:fade 1s ease forwards}
html.js:not(.rm) .kicker{animation-delay:.15s}
html.js:not(.rm) .trust{animation-delay:1.9s}
html.js:not(.rm) .hero .btn-row{animation-delay:2.15s}
html.js:not(.rm) .hint-in{animation-delay:2.9s}
@keyframes rise{to{transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
html.paused .hint i{animation:none}

/* ---------- Launch Sale ribbon (2026-09-13): TEMPORARY, remove after 30 September 2026 ----------
   One pill at the top of the hero pane, above the kicker, inside .hero-copy: it is on the first
   screen and it scrolls away with the hero. It adds NO new surface: it sits straight on the PANE
   scrim with a hairline border in --acc, so every pair it makes is already in the contrast proof
   (tools/wcag-contrast.py carries them explicitly as the "sale ..." pairs). It is deliberately
   NOT part of the hero intro below, so it is painted on the very first frame with or without JS;
   assets/orbit.js hides it (the hidden attribute) once its data-until instant has passed.
   TO REMOVE: delete this block, the .sale <p> and its comment in index.html, the expiry guard in
   assets/orbit.js and the "sale" pairs in tools/wcag-contrast.py, then bump the three busters. */
.sale{max-width:42rem;margin:0 auto 1.5rem;padding:.62em 1.15em;border:1px solid var(--acc);border-radius:999px;font-size:.84rem;line-height:1.55;color:var(--dim);transition:border-color .9s ease}
.sale[hidden]{display:none}
.sale-tag{font-weight:600;font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);transition:color .9s ease}
.sale-tag::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:.6em;vertical-align:.12em}
.sale-cta{display:inline-block;min-height:24px;color:var(--acc);text-decoration:underline;text-underline-offset:3px;white-space:nowrap;transition:color .9s ease}
@media (hover:hover) and (pointer:fine){.sale-cta:hover{color:var(--ink)}}

/* ---------- chapter 01: the promise ---------- */
.pillars{position:relative;margin-top:8svh}
html.enh .pillars{height:340svh}
.pil-stage{position:relative;display:grid;gap:1rem;padding:8svh var(--pad);background:var(--pane);border-radius:28px}
html.enh .pil-stage{position:sticky;top:0;height:100svh;display:block;padding:0;background:none;border-radius:0}
html.enh .pil-stage::before{content:"";position:absolute;left:0;right:0;top:50%;height:64svh;transform:translateY(-50%);background:linear-gradient(180deg,rgba(5,7,13,0),var(--pane) 22%,var(--pane) 78%,rgba(5,7,13,0));pointer-events:none}
.pl{position:relative;font-family:var(--serif);font-size:clamp(3rem,11.5vw,11rem);line-height:1;letter-spacing:-.02em;text-align:center}
.pl em{font-style:italic;color:var(--acc);transition:color .9s ease}
html.enh .pl{position:absolute;left:0;right:0;top:0;height:100svh;display:flex;align-items:center;justify-content:center;padding:0 var(--pad);opacity:0;will-change:transform,opacity}
.pil-foot{text-align:center;color:var(--faint);font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;margin-top:1.5rem}
.pil-foot span{display:inline-block;padding:.6em 1.1em .6em 1.4em;border-radius:999px;background:var(--pane)}
html.enh .pil-foot{position:absolute;left:0;right:0;bottom:6svh;margin:0}

.stack{margin-top:10svh;display:grid;gap:1.2rem}
html.enh .stack{display:block;padding-bottom:14svh}
.pc{position:relative;background:linear-gradient(170deg,rgba(14,18,30,.94),rgba(7,9,16,.92));border:1px solid var(--line);border-radius:28px;padding:clamp(1.6rem,4vw,3.4rem);overflow:hidden;box-shadow:0 30px 80px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(213,224,245,.06)}
html.enh .pc{position:sticky;top:calc(11svh + var(--i,0)*1.6rem);min-height:58svh;margin-bottom:10svh;transform-origin:50% 0;will-change:transform}
html.enh .pc:last-child{margin-bottom:0}
.pc .veil-c{position:absolute;inset:0;background:var(--bg);opacity:0;pointer-events:none;border-radius:inherit}
.pc .n{font-family:var(--serif);font-size:clamp(3rem,8vw,6rem);line-height:1;color:var(--acc);transition:color .9s ease}
.pc h3{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.05;margin:.7rem 0 1.1rem;letter-spacing:-.01em}
.pc p{color:var(--dim);font-size:clamp(1.02rem,1.55vw,1.28rem);max-width:56ch;line-height:1.6}
.pc .glow{position:absolute;right:-20%;bottom:-40%;width:70%;height:90%;background:radial-gradient(50% 50% at 50% 50%,var(--acc),transparent 70%);opacity:.08;pointer-events:none;transition:background .9s ease}

/* ---------- chapter 02: the apps ---------- */
.gal{position:relative}
.gal-stage{padding:14svh 0}
.gal-head{padding:0 var(--pad);margin-bottom:2.4rem}
.gal-head .inner{width:100%;display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap}
.gcounter{display:none;text-align:right;min-width:12rem;padding:1rem 1.2rem;border-radius:20px;background:var(--pane);box-shadow:0 0 60px 30px var(--pane)}
.gcounter .gcount{font-family:var(--serif);font-size:2.2rem;line-height:1;color:var(--ink)}
.gcounter .gname{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);margin-top:.4rem;transition:color .9s ease}
.gcounter .gbar{height:2px;background:var(--line2);margin-top:.9rem;overflow:hidden;border-radius:2px}
.gcounter .gbar i{display:block;height:100%;background:var(--acc);transform-origin:0 50%;transform:scaleX(.09);transition:transform .6s var(--ease),background .9s ease}
.track{display:grid;gap:1.2rem;padding:0 var(--pad);grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));max-width:1180px;margin:0 auto}
.gal.horiz .gal-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:9svh 0 4svh}
.gal.horiz .gcounter{display:block}
.gal.horiz .track{display:flex;width:max-content;gap:1.4rem;padding:0 var(--pad) 0 max(var(--pad),calc((100vw - 1180px)/2));max-width:none;margin:0;will-change:transform;align-items:stretch}
.gal.horiz .app{width:min(78vw,500px);flex:none;min-height:min(54svh,600px)}
.gal.horiz h2{font-size:clamp(2rem,4.4vw,3.6rem);margin:.5rem 0 .5rem}
.gal.horiz .sub{font-size:1rem;max-width:60ch}
.gal.horiz .app p{font-size:.92rem}

.app{--a:#9fb4d8;position:relative;display:flex;flex-direction:column;gap:.85rem;padding:clamp(1.4rem,3vw,2.2rem);border-radius:26px;border:1px solid var(--line);background:linear-gradient(170deg,rgba(13,17,28,.94),rgba(7,9,16,.92));text-decoration:none;color:var(--ink);overflow:hidden;box-shadow:inset 0 1px 0 rgba(213,224,245,.06);transition:border-color .5s,transform .5s var(--ease)}
.app::before{content:"";position:absolute;inset:-1px;background:radial-gradient(70% 55% at 50% 100%,var(--a),transparent 70%);opacity:.07;transition:opacity .7s;pointer-events:none}
.app.is-on{border-color:var(--a)}
.app.is-on::before{opacity:.16}
@media (hover:hover) and (pointer:fine){.app:hover{transform:translateY(-6px);border-color:var(--line2)}}
.app .mark{width:64px;height:64px;filter:drop-shadow(0 10px 26px var(--a))}
.app .name{font-family:var(--sans);font-weight:700;font-size:1.55rem;letter-spacing:-.02em;line-height:1.1;margin:.3rem 0 0}
.app .name b{color:var(--a)}
.app .kind{font-family:var(--serif);font-style:italic;font-size:1.2rem;color:var(--a);margin-top:-.4rem}
.app p{color:var(--dim);font-size:.98rem;line-height:1.55}
.app .meta{margin-top:auto;display:flex;flex-direction:column;gap:.7rem;padding-top:.6rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem}
.ea{font-size:.74rem;letter-spacing:.06em;border:1px solid rgba(190,205,240,.46);border-radius:999px;padding:.35em .8em;color:var(--dim);white-space:nowrap}
.go{font-size:.86rem;color:var(--a);letter-spacing:.02em}
.card-ethereal{--a:#7b9eff}
.card-brume{--a:#8fa7bd}
.card-baton{--a:#e8c25b}
.card-sylph{--a:#9b8fd6}
.card-lore{--a:#5eead4}
.card-cork{--a:#d98e57}
.card-bead{--a:#6f9dff}
.card-sandglass{--a:#f2c071}
.card-sconce{--a:#ffc46b}
.card-bevel{--a:#6fb2e6}
.card-slate{--a:#aeb8c2}
/* vertical gallery: native scroll-driven reveals, only where supported and motion allowed */
@supports (animation-timeline: view()){
  html.js:not(.rm) .gal:not(.horiz) .app{animation:vrise linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
}
@keyframes vrise{from{opacity:0;transform:translateY(46px) scale(.97)}to{opacity:1;transform:none}}

/* ---------- chapter 03: the studio (editorial) ---------- */
.edit{display:grid;grid-template-columns:1fr;gap:2rem}
@media (min-width:900px){.edit{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:6vw}}
.glyph-col{position:relative;min-height:10rem}
html.enh .glyph-col .glyph{position:sticky;top:8svh}
.glyph{font-family:var(--serif);font-style:italic;font-size:clamp(12rem,38vw,32rem);line-height:.8;color:var(--acc);opacity:.08;user-select:none;pointer-events:none;transition:color .9s ease;will-change:transform}
@media (max-width:899px){.glyph-col{position:absolute;right:var(--pad);top:6svh;min-height:0;z-index:0}.glyph{font-size:clamp(10rem,40vw,16rem);opacity:.06}.edit-body{position:relative;z-index:1}}
.edit-body{padding:1.6rem 1.8rem 2rem}
.about{color:var(--dim);font-size:clamp(1.1rem,1.8vw,1.45rem);font-weight:350;line-height:1.55;max-width:50ch;margin-top:1rem}
.about .ln{margin-bottom:.2em}
.edit-body .btn-row{justify-content:flex-start;margin-top:2.4rem}

/* ---------- chapter 04: closing ---------- */
.close-wrap{position:relative}
html.enh .close-wrap{height:175svh}
.closing{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16svh var(--pad) 12svh;position:relative}
html.enh .closing{position:sticky;top:0;height:100svh;min-height:0;padding:0 var(--pad)}
.close-copy{display:flex;flex-direction:column;align-items:center;max-width:64rem;padding:2rem clamp(1rem,4vw,3rem) 2.4rem;border-radius:36px;box-shadow:0 0 140px 70px var(--pane)}
.closing h2{font-size:clamp(2.6rem,7.6vw,6.4rem);max-width:14ch;margin:1rem auto 2.4rem}
.cta{font-size:1.1rem;min-height:60px;padding:1em 2.4em;box-shadow:0 20px 60px -20px var(--acc);will-change:transform;transition:box-shadow .9s ease,background .35s}
.playline{margin-top:3.4rem;max-width:46ch;color:var(--dim);font-size:.95rem;line-height:1.6;display:flex;flex-direction:column;align-items:center;gap:1rem}
.playline .ptag{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);transition:color .9s ease}
.playline a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2);padding:.2em 0 2px;min-height:24px;display:inline-block}
.playline a:hover{border-color:var(--ink)}

/* ---------- footer ---------- */
footer{padding:9svh var(--pad) 12svh;border-top:1px solid var(--line);background:rgba(5,7,13,.86);color:var(--dim);font-size:.9rem}
footer .inner{display:grid;gap:1.1rem}
footer a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line2);padding-bottom:1px}
footer a:hover{border-color:var(--ink)}
.footlinks{display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;align-items:center}
.footlinks a{display:inline-block;min-height:24px;line-height:24px}
.foot-mark{display:flex;align-items:center;gap:.6rem;font-size:.74rem;letter-spacing:.24em;color:var(--faint);margin-bottom:1rem}
.foot-mark svg{width:22px;height:22px}

/* ---------- reduced motion: nothing pinned, nothing hidden, canvas off ---------- */
@media (prefers-reduced-motion: reduce){
  .hint i{animation:none}
  .btn,.app,.tint,.prog,.ck,.brand b,.pl em,.pc .n,.pc .glow,.gcounter .gname,.gcounter .gbar i,.glyph,.cta,.playline .ptag{transition:none}
}
html.rm #field,html.rm .tint,html.rm .prog,html.rm .hint{display:none}
html.rm body{background:radial-gradient(60% 50% at 50% 38%,#0a0f1e,#05070d 72%) fixed}
html.rm .rv,html.rm .lines .ln,html.rm .pl{opacity:1;transform:none}

/* ---------- failsafe: orbit.js never ran, so show what it would have revealed ----------
   index.html's head script adds this class 3.5 s after first paint unless orbit.js has set
   window.Z7.ready. Reveal only, never hide: the class is never removed, because by the time it
   lands the content is on screen and taking it back would be the very blink this file avoids.
   The hero intro (rise / fade below) is CSS-only and time-based, so it needs no failsafe, and
   'enh' is not set unless GSAP is really there, so the sticky chapters need none either. */
html.failsafe .rv,html.failsafe .lines .ln{opacity:1;transform:none}