/* ============ TOKENS ============ */
:root{
  --cream:#f3ead9;
  --ink:#241a12;
  --ink-soft:#5b4636;
  --blue:#1c3f77;
  --blue-lt:#7ea8d8;
  --rust:#d96526;
  --line:rgba(36,26,18,.28);
  --hair:rgba(36,26,18,.16);
  --panel:rgba(255,255,255,.16);
  --shadow:rgba(60,35,15,.10);
  --display:'AstroSpace','Hexo2',"Trebuchet MS",sans-serif;
  --body:'Hexo2','Trebuchet MS',sans-serif;
  --pad:clamp(20px,5vw,90px);
  /* distance from an in-flow element's left edge back to the viewport edge,
     accounting for the 1440px centred max-width */
  --bleed:calc(var(--pad) + max(0px,(100vw - 1440px)/2));
  --band-t:0.21em;
  --band-b:0.045em;
  --nav-t:0.40em;
  --nav-b:0.20em;

  /* ---- INVERTED PANELS -------------------------------------------------
     Content panels (cards, character sheet, project documents) are windows
     back onto the TRUE galaxy: `backdrop-filter:invert(1)` undoes the page's
     own inversion, so the panel reads deep blue instead of cream. --inv-tint
     is then painted over the top so a bright galaxy core passing behind a
     panel can never wash the light text out — the darkening is constant
     regardless of what's behind it, which brightness() alone can't guarantee.
     The -on tokens below are the light-on-dark counterparts of --ink etc. */
  --inv-tint:rgba(4,9,20,.72);
  --inv-tint-hi:rgba(4,9,20,.80);   /* nested blocks, one step darker */
  --inv-tint-card:rgba(4,9,20,.20); /* cards at rest: nearly clear, galaxy at full strength */
  --on:#f6efe1;                      /* primary text on an inverted panel */
  --on-soft:rgba(246,239,225,.74);   /* secondary text */
  --on-hair:rgba(246,239,225,.20);   /* borders */
  --on-dot:rgba(246,239,225,.34);    /* dotted leaders */
  --rust-lt:#f0854a;                 /* rust, lifted to hold up on dark */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-weight:400;
  font-size:clamp(15px,1.05vw,17px);line-height:1.6;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}

/* ============ BACKGROUND LAYERS ============ */
/* --inv is driven by God Mode: 1 = normal (inverted page), 0 = raw blue galaxy */
#bg{position:fixed;inset:0;z-index:-3;
  filter:invert(var(--inv,1)) saturate(1.12) contrast(1.02) blur(.4px);}
#gl{display:block;width:100%;height:100%}
#veil{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(130% 100% at 50% 45%,rgba(243,234,217,0) 0%,rgba(243,234,217,.18) 65%,rgba(243,234,217,.42) 100%);}

/* shadow layer — empty until your SVGs land */
#shapes{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;mix-blend-mode:multiply;}
/* ---- SVG SHADOW SLOT ------------------------------------------------------
   Drop your own artwork in as:  <img class="svg-shadow" src="shadow-01.svg">
   inside #shapes. Position/scale it with inline style (left/top/width),
   and add .drift / .drift2 / .spin for motion. Opacity is controlled here so
   every SVG reads as a shadow rather than a graphic.                        */
.svg-shadow{position:absolute;opacity:.16;filter:none;user-select:none;-webkit-user-drag:none}
.svg-shadow.faint{opacity:.09}
.svg-shadow.strong{opacity:.26}
.sq,.ci{position:absolute;background:var(--shadow);border:1px solid var(--hair);}
.ci{border-radius:50%;background:transparent;border-color:rgba(36,26,18,.13)}
.ci.fill{background:var(--shadow)}
.rule{position:absolute;left:-5vw;width:110vw;height:1px;background:var(--hair)}
.drift{animation:drift 46s ease-in-out infinite alternate}
.drift2{animation:drift 64s ease-in-out infinite alternate-reverse}
.spin{animation:spin 180s linear infinite}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(2.5vw,-2vh,0)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============ TYPE ============ */
h1,h2,h3,.mono{font-family:var(--display);text-transform:uppercase;font-weight:400;margin:0;letter-spacing:.06em}
/* the reveal trick: white + difference over the inverted bg = the ORIGINAL galaxy inside the glyphs */
.reveal{color:#fff;mix-blend-mode:difference;}
.outline{-webkit-text-stroke:1px rgba(36,26,18,.55);}
.tag{font-family:var(--display);text-transform:uppercase;letter-spacing:.28em;font-size:.68rem;color:var(--ink-soft)}
p{margin:0 0 1em}
a{color:inherit;text-decoration:none}

/* ============ NAV (text only, no chrome) ============ */
header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:flex-end;
  padding:20px var(--pad);background:none;border:0;pointer-events:none}
header>*{pointer-events:auto}
/* solid beige plate — opaque so nothing bleeds through, snug to the type.
   --nav-t / --nav-b are measured so the caps sit optically centred. */
nav ul{display:flex;gap:clamp(14px,2.2vw,30px);list-style:none;margin:0;
  padding:var(--nav-t) clamp(14px,1.5vw,22px) var(--nav-b);
  background:#f5e9d5;border:1px solid var(--hair)}
nav a{font-family:var(--display);text-transform:uppercase;font-size:clamp(.72rem,.86vw,.86rem);letter-spacing:.18em;
  color:var(--rust);transition:color .25s;position:relative;display:block;line-height:1}
nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:var(--ink);transition:right .3s}
nav a:hover{color:var(--ink)}
nav a:hover::after{right:0}
.burger{display:none;font-size:1.3rem;color:var(--ink-soft);background:none;border:0;cursor:pointer;padding:0}

/* ============ LAYOUT ============ */
section{position:relative;padding:clamp(70px,10vh,130px) var(--pad);max-width:1440px;margin:0 auto}
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:96px;padding-bottom:clamp(90px,14vh,140px)}
/* ---- PERMANENT INVERT BAND ----------------------------------------------
   Same single-group trick as the menu hover, but always on: a full-bleed
   WHITE bar containing BLACK text, the whole thing on `difference`.
   Result: bar shows the true galaxy (blue), text shows the inverted page
   (orange). Vertical padding is deliberately tight to the glyphs.
   ---------------------------------------------------------------------- */
/* --band-t / --band-b are measured, not guessed: AstroSpace sets its caps
   high in the em box, so an equal padding pair renders visually top-heavy.
   The pair below puts equal air above the cap line and below the baseline. */
.band-invert{width:100vw;margin-left:calc(-1 * var(--bleed));
  padding:0 var(--pad) 0 var(--bleed);
  background:#fff;color:#000;mix-blend-mode:difference}
/* vertical padding lives on the heading, so `em` resolves against the
   heading's own size rather than the body's */
.band-invert>h1,.band-invert>h2{padding-top:var(--band-t);padding-bottom:var(--band-b)}
h1{font-size:clamp(2.7rem,8.9vw,8.4rem);line-height:.96;letter-spacing:.01em;font-weight:700;
  -webkit-text-stroke:2.5px currentColor;paint-order:stroke fill}
/* HERO TEXT — Ubuntu Medium, no box, warm black. Three stacked credits. */
.hero-sub{margin:26px 0 0;
  font-family:'UbuntuM','UbuntuL',var(--body);font-weight:500;
  font-size:clamp(1rem,1.32vw,1.15rem);line-height:1.62;color:var(--ink)}
/* ---- SYNCRO MENU --------------------------------------------------------
   Each row is ONE element on `mix-blend-mode: difference`, spanning the full
   viewport width. Everything is computed inside that single blended group,
   so there is no cross-layer compositing to go wrong:

     rest   transparent bar + WHITE text -> difference -> text shows the TRUE
            galaxy (blue), bar leaves the page untouched
     hover  WHITE bar + BLACK text       -> difference -> bar shows the TRUE
            galaxy (blue), text/dot show the inverted page (orange-cream)
   -------------------------------------------------------------------- */
.menu{list-style:none;margin:44px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.menu li{position:relative}
.menu li a{display:flex;align-items:center;gap:16px;
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.05rem,2.5vw,2rem);letter-spacing:.05em;
  width:100vw;margin-left:calc(-1 * var(--bleed));
  padding:.46em var(--pad) .265em var(--bleed);
  color:#fff;background-color:rgba(255,255,255,0);
  mix-blend-mode:difference;
  transition:background-color .32s ease,color .32s ease}
.menu li a .dot{width:clamp(18px,2.6vw,34px);aspect-ratio:1;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 30%,#ffffff 0%,#e2edfa 55%,#c6daf2 100%);
  transition:background .32s ease}
.menu li a:hover,.menu li a:focus-visible{background-color:rgba(255,255,255,1);color:#000;outline:none}
.menu li a:hover .dot,.menu li a:focus-visible .dot{
  background:radial-gradient(circle at 34% 30%,#000000 0%,#141c28 55%,#2b3644 100%)}
/* centred on the page rather than tucked into the right margin. The
   translateX(-50%) lives here on the parent; the bob animation is on the
   chevron child, so the two transforms never collide. */
.scroll-cue{position:absolute;left:50%;transform:translateX(-50%);
  bottom:clamp(70px,11vh,120px);
  font-family:var(--display);font-size:.72rem;letter-spacing:.3em;color:var(--ink);
  display:flex;align-items:center;gap:12px}
/* CSS chevron — AstroSpace has no arrow glyph, so a character would tofu */
.scroll-cue .arw{width:7px;height:7px;display:inline-block;margin-bottom:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.scroll-cue span:last-child{animation:bob 2.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(3px,3px)}}

h2{font-size:clamp(1.7rem,5.4vw,4.6rem);line-height:.98;font-weight:700;overflow-wrap:anywhere;
  -webkit-text-stroke:2px currentColor;paint-order:stroke fill}
.sec-head{display:flex;align-items:baseline;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.sec-head .idx{font-family:var(--display);font-size:clamp(.9rem,1.35vw,1.15rem);letter-spacing:.26em;color:var(--rust)}
.sec-line{height:1px;background:var(--line);margin:26px 0 46px}

/* panels */
.panel{background:var(--panel);border:1px solid var(--hair);backdrop-filter:blur(3px);
  box-shadow:0 18px 50px -32px rgba(60,35,15,.55)}

/* work */
.work{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:clamp(14px,2vw,26px)}
/* cards now match the Character Sheet treatment: solid cream panel, dark
   text — no inversion, no blend mode. */
.card{padding:clamp(20px,2.4vw,34px);display:flex;flex-direction:column;gap:12px;
  position:relative;overflow:hidden;
  /* cards sit almost untinted at rest so the galaxy reads through them at full
     strength, then settle to the standard panel darkness on hover. The small
     resting tint is not decorative: with zero tint the card text drops out
     completely wherever the bright core passes behind it. */
  background:var(--inv-tint-card);
  backdrop-filter:invert(1);-webkit-backdrop-filter:invert(1);
  border:1px solid var(--on-hair);box-shadow:0 18px 46px -38px rgba(0,0,0,.8);
  transition:transform .35s ease,border-color .35s ease,background-color .35s ease}
.card:hover{transform:translateY(-6px);border-color:var(--rust-lt);background:var(--inv-tint)}
.card .num{position:absolute;top:-14px;right:6px;font-family:var(--display);font-size:5rem;color:rgba(246,239,225,.10)}
.card h3{font-size:clamp(1.15rem,2vw,1.7rem);color:var(--rust-lt)}
.card .meta{font-family:var(--display);font-size:.66rem;letter-spacing:.24em;color:var(--on-soft)}
.card p{font-size:.92rem;color:var(--on);margin:0}
.card .go{font-family:var(--display);font-size:.72rem;letter-spacing:.2em;color:var(--on-soft);margin-top:auto;padding-top:10px}
.card:hover .go{color:var(--rust-lt)}

/* ============ CHARACTER SHEET ============================================
   Each row is its own detached panel with a gap between, and every rule is
   the same hairline used on the top menu. */
/* lead paragraph above the sheet, aligned to the same 780px column */
.profile-lead{max-width:780px;margin:0 auto clamp(20px,2.4vw,32px);
  font-family:'UbuntuM','UbuntuL',var(--body);font-weight:500;
  font-size:clamp(1.02rem,1.35vw,1.2rem);line-height:1.5;color:var(--ink)}
/* A4-ish column: narrow enough to read as a paper sheet rather than a slab */
.cs{display:flex;flex-direction:column;gap:clamp(7px,.7vw,11px);
  max-width:780px;margin-inline:auto}
/* footnote for the starred traits — same column width as the sheet, small
   print so it reads as a caption, not a headline */
.sheet-note{max-width:780px;margin:14px auto 0;font-size:.82rem;line-height:1.5;
  font-family:var(--body);font-weight:400;color:#000}
/* the three sheet slabs are inverted windows onto the true galaxy — see the
   --inv-tint note in the tokens block */
.cs-id,.cells,.cs-body{background:var(--inv-tint);border:1px solid var(--on-hair);
  backdrop-filter:invert(1);-webkit-backdrop-filter:invert(1);
  box-shadow:0 18px 46px -38px rgba(0,0,0,.8)}
.cs-id{display:grid;grid-template-columns:1.85fr 1.6fr .6fr .75fr}
.fld{border-right:1px solid var(--on-hair);padding:10px 14px 12px;min-width:0}
.fld:last-child{border-right:0}
.fld label{display:block;font-family:var(--display);font-size:.72rem;letter-spacing:.18em;color:var(--rust-lt);margin-bottom:4px}
.fld .val{font-family:var(--display);font-size:clamp(.9rem,1.5vw,1.22rem);color:var(--on);line-height:1.15;
  overflow-wrap:anywhere}
.cs-body{display:grid;grid-template-columns:1fr 1fr}
.col{border-right:1px solid var(--on-hair);min-width:0}
.col:last-child{border-right:0}
.box{border-bottom:1px solid var(--on-hair);padding:14px}
.box:last-child{border-bottom:0}
/* two boxes sharing one row (Combat / Magic Skills) */
.split-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--on-hair)}
.split-row .box{border-bottom:0;border-right:1px solid var(--on-hair)}
.split-row .box:last-child{border-right:0}
.box h3{font-family:var(--display);font-size:.76rem;letter-spacing:.2em;color:var(--rust-lt);margin:0 0 11px;
  display:flex;justify-content:space-between;align-items:baseline}
/* ability scores — classic stacked stat blocks */
.abil{display:flex;flex-direction:column;gap:8px;padding:14px}
.ab{border:1px solid var(--on-hair);background:rgba(246,239,225,.07);text-align:center;padding:7px 4px 9px;position:relative}
.ab b{display:block;font-family:var(--display);font-size:.92rem;letter-spacing:.16em;color:var(--on)}
.ab span{display:block;font-family:var(--display);font-size:1.85rem;line-height:1.05;color:var(--blue-lt)}
/* two stat rows under the ID row: combat stats, then ability scores */
.cells{display:grid}
.cells.stats{grid-template-columns:repeat(4,1fr)}
.cells.attrs{grid-template-columns:repeat(6,1fr)}
.cell{border-right:1px solid var(--on-hair);padding:11px 6px 13px;text-align:center}
.cell:last-child{border-right:0}
.cell b{display:block;font-family:var(--display);font-size:.76rem;letter-spacing:.16em;color:var(--rust-lt);margin-bottom:2px}
.cell span{font-family:var(--display);font-size:1.55rem;color:var(--on)}
.cells.attrs .cell span{color:var(--blue-lt)}
/* skill lines with dotted leaders */
.sk{display:flex;align-items:baseline;gap:6px;font-size:.88rem;padding:3px 0;color:var(--on)}
.sk .nm{white-space:nowrap}
.sk .dots{flex:1;border-bottom:1px dotted var(--on-dot);transform:translateY(-4px)}
.sk .vl{font-family:var(--display);font-size:.82rem;color:var(--blue-lt);min-width:2.2em;text-align:right}
.sk.neg .vl{color:var(--rust-lt)}
/* traits as sheet rows */
.tr{border-bottom:1px dotted var(--on-dot);padding:7px 0}
.tr:last-child{border-bottom:0}
.tr b{font-family:var(--display);font-size:.66rem;letter-spacing:.16em;color:var(--on);display:block;margin-bottom:2px}
.tr span{display:block;font-size:.8rem;color:var(--on-soft);line-height:1.45}
.quote{font-size:.88rem;color:var(--on);line-height:1.5}
.quote em{display:block;font-style:normal;color:var(--on-soft);font-size:.88rem;margin-top:2px}
.hob{margin:0;padding:0;list-style:none;columns:2;column-gap:18px;font-size:.84rem;color:var(--on-soft)}
.hob li{padding:2px 0;break-inside:avoid}
.hob li::before{content:"▢ ";color:var(--rust-lt)}

/* contact */
.contact{display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,60px);align-items:flex-start}
/* --ink, not --ink-soft: this is body copy sitting straight on the page like
   the hero and profile leads, so it has to match them rather than read as a
   caption */
.contact .lead{flex:1 1 320px;font-size:clamp(1rem,1.6vw,1.25rem);color:var(--ink)}
.links{list-style:none;margin:0;padding:0;flex:1 1 280px}
.links li{border-bottom:1px solid var(--hair)}
.links a{display:flex;justify-content:space-between;align-items:center;padding:15px 2px;
  font-family:var(--display);text-transform:uppercase;font-size:.85rem;letter-spacing:.14em;color:var(--blue);transition:.25s}
.links a:hover{color:var(--rust);padding-left:12px}
footer{padding:34px var(--pad);border-top:1px solid var(--hair);display:flex;justify-content:space-between;
  align-items:center;flex-wrap:wrap;gap:14px;font-size:.72rem;color:var(--ink-soft);
  font-family:var(--display);letter-spacing:.16em}

/* ---- DEV PANEL / GOD MODE (remove before publishing) --------------------
   Hidden until the God Mode button unfolds it — a slide + fade rather than
   display:none so the reveal reads as intentional, not a hard cut.

   Centred at the bottom of the viewport rather than anchored to the God Mode
   button, because that button hides itself while the panel is open. It gets a
   single line: the reveal clears the whole screen, so there is no reason to
   wrap it any more.

   Each control is its OWN plate rather than one long bar: the container is
   transparent and the cream surface moves down onto .grp and the word buttons.
   That means the backdrop-filter runs per plate, so the gaps between them show
   the raw galaxy and the controls read as separate objects.

   Surface is DARK BLUE, matching the site's content panels. The inversion
   amount tracks --inv rather than being a fixed invert(1): the content panels
   can hard-code invert(1) because the page behind them is always inverted, but
   this strip only exists during God Mode, when the inversion has been lifted
   and the backdrop is ALREADY true blue. Inverting again there would flip the
   plates to cream. invert(var(--inv)) is blue-dark in both states. */
#perf{position:fixed;bottom:18px;left:50%;top:auto;z-index:80;
  display:flex;flex-direction:column;
  background:none;border:0;padding:0;max-width:96vw;
  font-family:var(--display);font-size:.64rem;letter-spacing:.1em;color:var(--on);
  opacity:0;pointer-events:none;transform:translateX(-50%) translateY(8px);
  transition:opacity .3s ease,transform .3s ease;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
#perf.open{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
/* one line, and on a phone the strip scrolls sideways rather than clipping
   controls out of reach */
#perf .row{display:flex;align-items:stretch;gap:8px;flex-wrap:nowrap;width:max-content;padding:1px}
/* THE PLATE. Applied to each control group and to each word button, so every
   one is an independent cream tile. Vertical padding is deliberately tight —
   these are readouts, not buttons to hit with a thumb. */
#perf .grp,#perf button.txt{
  background:var(--inv-tint);border:1px solid var(--on-hair);
  backdrop-filter:invert(var(--inv,1));-webkit-backdrop-filter:invert(var(--inv,1));
  /* Symmetric padding, and every child is line-height:1 so nothing inherits
     the body's 1.6 leading — inherited leading was adding invisible half-leading
     above the glyphs and dragging the text off centre. With a 16px stepper and
     6px either side the plate lands at 30px and the ink centres exactly. */
  line-height:1;padding:6px 11px}
/* one control = one unbreakable unit, so a wrap can never strand a "+" */
#perf .grp{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
/* Optical nudge, measured not guessed. AstroSpace carries its caps high in the
   em box, so a geometrically centred box still renders the ink above centre.
   1px down puts the value exactly on the plate's centre line and leaves the
   smaller label a hair high, which is the correct side to err on for caps. */
#perf b{font-weight:400;color:var(--rust-lt);font-size:.56rem;line-height:1;position:relative;top:1px}
#perf i{font-style:normal;min-width:3.6em;display:inline-block;text-align:right;line-height:1;position:relative;top:1px}
/* FPS is only ever 1-3 digits — the shared 4.2em value width (sized for
   STARS/CORE/BRIGHTNESS) left a lot of dead air between "FPS" and its
   number. Tightening this one reclaims enough row width for CORE's +/-
   to stay on the first line instead of wrapping. */
#perf [data-fps]{min-width:2.2em}
#perf .sp{flex:1}
#perf .sep{width:1px;height:15px;background:var(--on-hair);margin:0 4px;flex:none}
#perf button{font-family:var(--body);font-weight:700;font-size:.75rem;line-height:1;width:16px;height:16px;
  background:transparent;border:1px solid var(--on-hair);color:var(--on);cursor:pointer;padding:0}
#perf button:hover{border-color:var(--rust-lt);color:var(--rust-lt)}
/* the two word buttons are wider than the +/- steppers and set in the display
   face so they read as actions rather than another increment */
#perf button.txt{width:auto;height:auto;
  font-family:var(--display);font-weight:400;font-size:.56rem;letter-spacing:.14em;
  text-transform:uppercase;white-space:nowrap;color:var(--on)}
#perf button.txt:hover{color:var(--rust-lt);border-color:var(--rust-lt)}
/* The panel is the point of God Mode, so unlike the old Void Trip it stays at
   full opacity while everything else dissolves around it. */

/* ---- GOD MODE REVEAL ---------------------------------------------------- */
.void-group{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
/* Inverted surface, same trick as the content panels: invert(1) undoes the
   page's own inversion so the button is a dark window onto the true blue
   galaxy, which makes it stand out against the cream page far more than the
   old beige plate did.

   No --inv-tint here, unlike the content panels. Those need a tint because the
   bright galaxy core can drift behind them; this button is pinned to the
   bottom of the page where only the dim outer field ever sits behind it, so
   the raw inversion is already dark enough to carry the cream text. */
.void-btn{font-family:var(--display);text-transform:uppercase;font-size:.72rem;letter-spacing:.22em;
  color:var(--on);background:transparent;border:1px solid var(--on-hair);
  backdrop-filter:invert(var(--inv,1));-webkit-backdrop-filter:invert(var(--inv,1));
  padding:.5em 1.15em .55em;cursor:pointer;transition:.25s;user-select:none;
  -webkit-user-select:none;touch-action:none}
.void-btn:hover{color:var(--rust-lt);border-color:var(--rust-lt)}
.void-btn:active,.void-btn.on{border-color:var(--rust-lt);color:var(--rust-lt)}
.void-btn small{display:block;font-size:.56rem;letter-spacing:.18em;opacity:.6;margin-top:2px}
/* everything except the canvas fades away during the reveal */
#veil,#shapes{transition:none}
body.revealing header,body.revealing main,body.revealing footer{pointer-events:none}
header,main,footer{opacity:calc(1 - var(--fade,0))}
#veil{opacity:calc(1 - var(--fade,0))}
#shapes{opacity:calc(1 - var(--fade,0))}
/* The God Mode button hides once the panel is open — the panel carries its own
   EXIT, so leaving the button on screen would be two ways to do one thing. */
body.revealing footer{opacity:calc(1 - var(--fade,0))}
body.revealing .void-btn{pointer-events:none}

/* reveal on scroll (never applied to .reveal blend text) */
.fx{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.fx.in{opacity:1;transform:none}

@media(max-width:980px){
  .cs-body{grid-template-columns:1fr}
  .col{border-right:0;border-bottom:1px solid var(--hair)}
  .col:last-child{border-bottom:0}
}
@media(max-width:620px){
  .cells.stats{grid-template-columns:repeat(2,1fr)}
  .cells.attrs{grid-template-columns:repeat(3,1fr)}
  .cells.stats .cell:nth-child(2n),.cells.attrs .cell:nth-child(3n){border-right:0}
  .cells.stats .cell:nth-child(n+3),.cells.attrs .cell:nth-child(n+4){border-top:1px solid var(--hair)}
  .split-row{grid-template-columns:1fr}
  .split-row .box{border-right:0;border-bottom:1px solid var(--hair)}
  .split-row .box:last-child{border-bottom:0}
}
@media(max-width:820px){
  nav ul{position:fixed;inset:52px 0 auto 0;background:rgba(243,234,217,.97);flex-direction:column;gap:0;
    padding:10px var(--pad) 22px;display:none}
  nav ul.open{display:flex}
  nav li{padding:11px 0;border-bottom:1px solid var(--hair)}
  .burger{display:block}
  .cs-id{grid-template-columns:1fr 1fr}
  .fld{border-bottom:1px solid var(--hair)}
  .hob{columns:1}
  /* keep copy readable over the galaxy on small screens */
  #veil{background:radial-gradient(130% 80% at 50% 40%,rgba(243,234,217,.30) 0%,rgba(243,234,217,.72) 55%,rgba(243,234,217,.9) 100%)}
  .lead{background:rgba(243,234,217,.55);padding:6px 8px;margin-left:-8px}
  .hero-frame{background:rgba(243,234,217,.35)}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}