/* ════════════════════════════════════════════════════════════════
   FATTO PRIZZERVA · GuimGames — base.css
   One stylesheet for the whole site. Sections are in page order.
   Colours follow the GuimGames brandbook (sand, violet, gold, ink)
   for the frame, team, press and footer; the Heaven / Hell colours
   of the game appear only inside the game sections.
   ════════════════════════════════════════════════════════════════ */

/* ── FONTS (self-hosted: no calls to Google, lighter GDPR) ── */

@font-face{font-family:'Cinzel';src:url('assets/fonts/cinzel-var.woff') format('woff');font-weight:400 900;font-display:swap;}

@font-face{font-family:'Spectral';src:url('assets/fonts/spectral-light.woff') format('woff');font-weight:300;font-style:normal;font-display:swap;}

@font-face{font-family:'Spectral';src:url('assets/fonts/spectral-lightitalic.woff') format('woff');font-weight:300;font-style:italic;font-display:swap;}

@font-face{font-family:'Spectral';src:url('assets/fonts/spectral-regular.woff') format('woff');font-weight:400;font-style:normal;font-display:swap;}

@font-face{font-family:'Spectral';src:url('assets/fonts/spectral-italic.woff') format('woff');font-weight:400;font-style:italic;font-display:swap;}

@font-face{font-family:'Spectral';src:url('assets/fonts/spectral-medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap;}

@font-face{font-family:'Spectral';src:url('assets/fonts/spectral-semibold.woff') format('woff');font-weight:600;font-style:normal;font-display:swap;}

/* ── TOKENS ── */

:root{
  /* Brand (brandbook) */
  --ink:#0B0B0F;       --night:#160824;
  --violet:#3B0B66;    --violet-l:#9A6BDB; /* violet-l = readable violet on dark */
  --gold:#B8873A;      --gold-l:#D4A455;
  --sand:#E8DDC9;      --mineral:#EFE7D8;

  /* Text */
  --text:#E9E2D4;      --text-2:#BDB4A4;      --text-3:#8C8374;
  --ink-2:#3A3530;     --ink-3:#5E574D;

  /* World: Hell / Heaven / neutral soul */
  --hell:#E11B00;      --hell-d:#750000;      --hell-dd:#270000;
  --heaven:#25D7FE;    --heaven-w:#B0F1FB;    --heaven-gold:#FFDC36;
  --soul:#8B3FC9;

  /* Type */
  --fh:'Cinzel',Georgia,'Times New Roman',serif;
  --fb:'Spectral',Georgia,'Times New Roman',serif;

  /* Frame (sand margins). --p goes 0 → 1 while the hero scrolls away (main.js) */
  --p:0;
  --top0:clamp(92px,15vh,150px);
  --rail0:clamp(92px,7vw,124px);
  --peek:46px;
  --top-h:calc(var(--top0) * (1 - var(--p)));
  --rail-w:calc(var(--rail0) * (1 - var(--p)));
  --logo0:calc(min(var(--top0), var(--rail0)) * .66);
  --logo1:46px;
  --logo:calc(var(--logo0) + (var(--logo1) - var(--logo0)) * var(--p));

  /* Layout */
  --gutter:clamp(20px,5vw,88px);
  --max:1180px;
  --ease:cubic-bezier(.22,1,.36,1);
  --t:.45s;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}

body{background:var(--sand);color:var(--text);font-family:var(--fb);font-weight:400;font-size:18px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}

a{color:inherit;text-decoration:none;}

img,video{display:block;max-width:100%;height:auto;}

button,input,select{font:inherit;color:inherit;}

:focus-visible{outline:2px solid var(--gold-l);outline-offset:3px;}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.skip{position:fixed;left:12px;top:12px;z-index:300;background:var(--ink);color:var(--text);padding:10px 16px;font-family:var(--fh);font-size:13px;letter-spacing:.1em;transform:translateY(-200%);transition:transform .2s;}

.skip:focus{transform:none;}

/* ── SHARED TYPE ── */

.eyebrow{font-family:var(--fh);font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-l);}

.h2{font-family:var(--fh);font-weight:600;font-size:clamp(28px,3.4vw,46px);line-height:1.15;letter-spacing:.02em;}

.lead{font-size:clamp(18px,1.45vw,21px);line-height:1.7;color:var(--text-2);}

.rule{display:block;width:84px;height:1px;background:currentColor;opacity:.5;margin:22px 0 28px;position:relative;}

.rule::after{content:'';position:absolute;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%) rotate(45deg);border:1px solid currentColor;background:inherit;}

.center{text-align:center;}

.center .rule{margin-left:auto;margin-right:auto;}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}

.sec{position:relative;padding:clamp(88px,11vw,150px) 0;}

.sec-head{max-width:760px;margin-bottom:clamp(44px,5vw,72px);}

.sec-head.center{margin-left:auto;margin-right:auto;}

.sec-head .eyebrow{display:block;margin-bottom:16px;}

/* Buttons */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--fh);font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:15px 30px;border:1px solid var(--gold);color:var(--gold-l);background:transparent;cursor:pointer;transition:background var(--t) var(--ease),color var(--t) var(--ease),border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);}

.btn:hover,.btn.is-linked-hover{background:var(--gold);color:var(--ink);box-shadow:0 0 28px rgba(212,164,85,.28);}

.btn--solid{background:var(--gold);color:var(--ink);}

.btn--solid:hover{background:var(--gold-l);border-color:var(--gold-l);}

.btn--violet{border-color:var(--violet);color:var(--violet);}

.btn--violet:hover{background:var(--violet);color:var(--mineral);box-shadow:0 0 24px rgba(59,11,102,.25);}

.link-arrow{font-family:var(--fh);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);border-bottom:1px solid rgba(233,226,212,.25);padding-bottom:4px;transition:color .3s,border-color .3s;}

.link-arrow:hover{color:var(--text);border-color:var(--gold-l);}

.soon{display:inline-block;font-family:var(--fh);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;opacity:.75;margin-left:8px;vertical-align:middle;white-space:nowrap;}

.is-soon{opacity:.45;cursor:default;pointer-events:none;}

/* Scroll reveal (main.js adds .is-in) */

.reveal{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease);}

.reveal.is-in{opacity:1;transform:none;}

/* ════════════════════════════════════════════════════════════════
   1. THE FRAME — sand top bar + sand left rail.
   Large on arrival, they shrink as the hero scrolls away. When the
   Judgement section fills the screen only the logo (top left) and
   the Kickstarter mark (top right) remain.
   ════════════════════════════════════════════════════════════════ */

.frame-top{position:fixed;top:0;left:0;right:0;height:var(--top-h);background:var(--sand);z-index:80;overflow:hidden;}

.frame-top__center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(calc(1 - var(--p) * .35));display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4vh,14px);opacity:calc(1 - var(--p) * 2.2);pointer-events:auto;}

.frame-top__word{height:clamp(24px,3.6vh,38px);width:auto;}

.frame-nav{
  display:flex;
  gap:clamp(6px,.8vw,12px);
}

.frame-nav a{
  font-family:var(--fb);
  font-size:clamp(13px,.95vw,15px);
  font-weight:600;
  letter-spacing:.05em;
  color:var(--ink);
  padding:7px 16px;
  border:1px solid rgba(11,11,15,.28);
  transition:background .3s,color .3s,border-color .3s;
}
.frame-nav a:hover{background:var(--ink);color:var(--sand);border-color:var(--ink);}

.frame-nav a.is-violet:hover{background:var(--violet);border-color:var(--violet);color:var(--mineral);}

.frame-rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail-w);background:var(--sand);z-index:79;overflow:hidden;}

.rail{position:absolute;top:var(--top-h);bottom:0;left:0;width:var(--rail-w);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(18px,3.4vh,34px);padding:12px 10px 60px;opacity:calc(1.35 - var(--p) * 1.9);}

.rail__group{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;}

.rail__label{font-family:var(--fh);font-size:clamp(9.5px,.72vw,11.5px);font-weight:600;letter-spacing:.08em;line-height:1.3;text-align:center;text-transform:uppercase;color:var(--ink);padding:6px 4px;border-top:1px solid rgba(11,11,15,.3);border-bottom:1px solid rgba(11,11,15,.3);width:100%;opacity:calc(1 - var(--p) * 3.2);white-space:normal;}

.rail__icons{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;}

.rail__icons a{display:grid;place-items:center;width:clamp(30px,2.4vw,40px);height:clamp(30px,2.4vw,40px);color:rgba(11,11,15,.55);border:1px solid transparent;transition:color .3s,border-color .3s,background .3s;}

.rail__icons a:hover{color:var(--violet);border-color:rgba(59,11,102,.35);background:rgba(59,11,102,.06);}

.rail__icons svg{width:58%;height:58%;fill:currentColor;}

.rail__icons a.is-soon{opacity:.3;}

/* Floating brand marks (always on top) */

.mark-logo{position:fixed;z-index:120;width:var(--logo);height:var(--logo);left:max(14px,calc((var(--rail-w) - var(--logo)) / 2));top:max(12px,calc((var(--top-h) - var(--logo)) / 2));display:block;border-radius:50%;transition:background .4s,box-shadow .4s;}

.mark-logo:hover{ background:rgba(212,164,85,.16); box-shadow:0 0 0 1px rgba(212,164,85,.65), 0 0 18px rgba(212,164,85,.18); }

.mark-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .4s;}

.mark-logo:hover img{ filter:brightness(1.12); }

.mark-logo .on-dark{opacity:0;}

.is-collapsed .mark-logo{background:rgba(11,11,15,.62);box-shadow:0 0 0 1px rgba(184,135,58,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}

.is-collapsed .mark-logo img{inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);}

.is-collapsed .mark-logo .on-light{opacity:0;}

.is-collapsed .mark-logo .on-dark{opacity:1;}

.mark-ks{position:fixed;z-index:120;right:max(14px,calc(var(--gutter) * (1 - var(--p) * .7)));top:max(12px,calc(var(--top-h) / 2 - 34px));display:flex;flex-direction:column;align-items:flex-end;gap:5px;transition:padding .4s,background .4s;}

.mark-ks:hover{ background:rgba(212,164,85,.10); box-shadow:0 0 0 1px rgba(212,164,85,.65), 0 0 18px rgba(212,164,85,.16); }

.mark-ks:hover .ks__kick{ color:#1b1720; }

.mark-ks:hover .ks__starter{ color:#5A18A0; -webkit-text-stroke-color:#5A18A0; }

.mark-ks__label{font-family:var(--fh);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(11,11,15,.6);opacity:calc(1 - var(--p) * 3);}

.mark-ks__sub{font-family:var(--fb);font-size:13px;color:var(--ink-3);opacity:calc(1 - var(--p) * 3);}

.mark-ks__sub a{border-bottom:1px solid rgba(11,11,15,.25);}

.mark-ks__sub a:hover{color:var(--violet);border-color:var(--violet);}

.is-collapsed .mark-ks{background:rgba(11,11,15,.62);padding:9px 14px;box-shadow:0 0 0 1px rgba(184,135,58,.35);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}

.is-collapsed .mark-ks__label,.is-collapsed .mark-ks__sub{display:none;}

/* The Kickstarter wordmark: KICK filled, STARTER outlined in violet.
   Hover fills STARTER and lifts the colour. */

.ks{display:inline-flex;font-family:var(--fh);font-weight:900;font-size:clamp(20px,1.7vw,27px);letter-spacing:.03em;line-height:1;transition:filter .35s;}

.ks__kick{color:var(--ink);}

.ks__starter{color:transparent;-webkit-text-stroke:1.5px var(--violet);transition:color .35s,-webkit-text-stroke-color .35s;}

.ks:hover .ks__starter,.ks:focus-visible .ks__starter{color:#5A18A0;-webkit-text-stroke-color:#5A18A0;}

.ks:hover{filter:saturate(1.35) brightness(1.05);}

.is-collapsed .mark-ks .ks{font-size:19px;}

.is-collapsed .mark-ks .ks__kick,.on-dark-ks .ks__kick{color:var(--mineral);}

.is-collapsed .mark-ks .ks__starter,.on-dark-ks .ks__starter{-webkit-text-stroke-color:var(--violet-l);}

.is-collapsed .mark-ks .ks:hover .ks__starter,.on-dark-ks .ks:hover .ks__starter{color:var(--violet-l);}

.ks--lg{font-size:clamp(34px,4vw,52px);}

/* Slim navigation that slides in when you scroll back up */

.mini-nav{position:fixed;top:0;left:0;right:0;height:70px;z-index:110;display:flex;align-items:center;justify-content:center;background:rgba(11,11,15,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(184,135,58,.22);transform:translateY(-101%);transition:transform .5s var(--ease);}

.show-mini .mini-nav{transform:none;}

.mini-nav a{font-family:var(--fh);font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);padding:8px 14px;transition:color .3s;}

.mini-nav a:hover{color:var(--gold-l);}

/* Mobile menu button */

.menu-btn{display:none;}

/* ════════════════════════════════════════════════════════════════
   2. HERO — announcement screen inside the frame
   ════════════════════════════════════════════════════════════════ */

.hero{
  position:relative;
  margin-top:var(--top0);
  margin-left:var(--rail-w);
  height:calc(100vh - var(--top0) - var(--peek));
  height:calc(100svh - var(--top0) - var(--peek));
  min-height:520px;
}

.hero__track{position:absolute;inset:0;}

.slide{position:absolute;inset:0;display:flex;align-items:center;padding:clamp(28px,5vh,64px) clamp(28px,6vw,110px);opacity:0;visibility:hidden;transition:opacity 1s var(--ease),visibility 0s linear 1s;}

.slide.is-active{opacity:1;visibility:visible;transition:opacity 1s var(--ease),visibility 0s;}

.slide__bg{position:absolute;inset:0;z-index:0;}

.slide__bg video,.slide__bg img{width:100%;height:100%;object-fit:cover;}

.slide__bg::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 34%,rgba(0,0,0,.15) 70%,rgba(0,0,0,.35) 100%),linear-gradient(0deg,rgba(0,0,0,.55),transparent 35%);}

.slide__inner{position:relative;z-index:1;width:100%;max-width:1320px;margin:0 auto;display:flex;align-items:center;gap:clamp(32px,5vw,80px);}

.slide__text{flex:0 1 560px;min-width:0;}

.slide__text .eyebrow{display:block;margin-bottom:18px;}

.slide__title{font-family:var(--fh);font-weight:600;font-size:clamp(28px,3.1vw,48px);line-height:1.12;color:var(--mineral);margin-bottom:18px;}

.slide__title--xl{font-weight:700;font-size:clamp(42px,5.6vw,92px);letter-spacing:.03em;line-height:1;margin-bottom:14px;}

.slide__tagline{font-style:italic;font-weight:300;font-size:clamp(20px,1.9vw,28px);color:var(--gold-l);margin-bottom:22px;}

.slide__body{font-size:clamp(16.5px,1.2vw,19px);line-height:1.72;color:var(--text-2);margin-bottom:30px;max-width:520px;}

.slide__ctas{display:flex;align-items:center;gap:26px;flex-wrap:wrap;}

.slide__media{flex:1 1 0;min-width:0;position:relative;}

.frame-media{position:relative;border:1px solid rgba(184,135,58,.35);padding:10px;background:rgba(255,255,255,.02);}

.frame-media video,.frame-media img{width:100%;height:100%;object-fit:cover;}

.frame-media::before,.frame-media::after{content:'';position:absolute;width:18px;height:18px;border-color:var(--gold-l);border-style:solid;}

.frame-media::before{top:-1px;left:-1px;border-width:2px 0 0 2px;}

.frame-media::after{bottom:-1px;right:-1px;border-width:0 2px 2px 0;}

.caption{display:block;font-size:13px;font-style:italic;color:var(--text-3);margin-top:10px;}

/* layout variants */

.slide--b .slide__inner{flex-direction:row-reverse;}

.slide--b .slide__text{text-align:left;}

.slide--c .slide__inner{justify-content:center;}

.slide--c .slide__side{flex:0 0 22%;max-width:300px;}

.slide--c .slide__side .frame-media{aspect-ratio:3/4;}

.slide--c .slide__text{flex:0 1 480px;text-align:center;}

.slide--c .slide__body{margin-left:auto;margin-right:auto;}

.slide--c .slide__ctas{justify-content:center;}

.slide--d .slide__inner{justify-content:space-between;}

.slide--d .slide__flank{flex:0 1 260px;text-align:center;}

.slide--d .slide__flank .slide__title{font-size:clamp(22px,2vw,30px);}

.slide--d .slide__flank .slide__body{font-size:16.5px;margin-bottom:22px;}

.slide--d .slide__center{flex:0 1 38%;}

.slide--d .slide__center .frame-media{aspect-ratio:1/1;}

/* hero controls */

.hero__zone{position:absolute;top:0;bottom:0;width:18%;z-index:2;cursor:pointer;display:flex;align-items:center;opacity:0;transition:opacity .4s;border:0;background:none;}

.hero__zone--prev{left:0;justify-content:flex-start;padding-left:18px;background:linear-gradient(90deg,rgba(0,0,0,.35),transparent);}

.hero__zone--next{right:0;justify-content:flex-end;padding-right:18px;background:linear-gradient(270deg,rgba(0,0,0,.35),transparent);}

.hero:hover .hero__zone{opacity:.55;}

.hero__zone:hover{opacity:1!important;}

.hero__zone span{font-family:var(--fh);font-size:34px;color:var(--gold-l);line-height:1;}

.hero__dots{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;gap:12px;z-index:3;}

.hero__dot{width:44px;height:14px;display:flex;align-items:center;cursor:pointer;background:none;border:0;padding:0;}

.hero__dot::before{content:'';display:block;width:100%;height:2px;background:rgba(233,226,212,.22);}

.hero__dot i{position:absolute;height:2px;width:0;background:var(--gold-l);}

.hero__dot{position:relative;}

.hero__dot.is-active i{animation:dotfill var(--slide-ms,9000ms) linear forwards;}

.hero.is-paused .hero__dot.is-active i{animation-play-state:paused;}

@keyframes dotfill{to{width:100%;}}

.hero__status{position:absolute;right:26px;bottom:22px;z-index:3;font-family:var(--fh);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);}

.hero__status b{color:var(--gold-l);font-weight:600;}

/* The clean scroll arrow (hero: bottom-left; judgement: bottom-centre) */

.arrow{position:absolute;z-index:6;display:grid;place-items:center;width:58px;height:58px;border:1px solid rgba(154,107,219,.65);border-radius:50%;color:var(--violet-l);background:rgba(11,11,15,.35);cursor:pointer;transition:background .35s,color .35s,transform .35s;animation:bob 2.8s ease-in-out infinite;}

.arrow svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;}

.arrow:hover{background:var(--violet);color:var(--mineral);}

.arrow--hero{left:26px;bottom:22px;}

@keyframes bob{0%,100%{translate:0 0;}50%{translate:0 6px;}}

/* ════════════════════════════════════════════════════════════════
   3. JUDGEMENT — the Scribe Demon's room. Hell left, Heaven right.
   Hover a half to light it; hover the violet facet (or leave the
   section) and the room goes almost dark.
   ════════════════════════════════════════════════════════════════ */

.judgement{position:relative;height:100vh;height:100svh;min-height:640px;background:#050307;overflow:hidden;color:var(--text);}

.judgement__art{position:absolute;inset:0;}

.judgement__art img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transform:scale(1.03);transition:transform 8s var(--ease),filter 1s var(--ease);filter:saturate(.9);}

.judgement.is-hell .judgement__art img{transform:scale(1.06) translateX(1%);}

.judgement.is-heaven .judgement__art img{transform:scale(1.06) translateX(-1%);}

.judgement__veil{position:absolute;top:0;bottom:0;width:62%;transition:opacity 1s var(--ease);opacity:.72;pointer-events:none;}

.judgement__veil--l{left:0;background:linear-gradient(90deg,#050307 0%,#050307 70%,rgba(5,3,7,0) 100%);}

.judgement__veil--r{right:0;background:linear-gradient(270deg,#050307 0%,#050307 70%,rgba(5,3,7,0) 100%);}

.judgement.is-hell .judgement__veil--l{opacity:.06;}
.judgement.is-hell .judgement__veil--r{opacity:.88;}

.judgement.is-heaven .judgement__veil--r{opacity:.04;}
.judgement.is-heaven .judgement__veil--l{opacity:.88;}

.judgement.is-void .judgement__veil{opacity:.93;}

.judgement__vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(0,0,0,.55) 100%);}

.judgement__inner{position:relative;z-index:2;height:100%;max-width:1440px;margin:0 auto;}

.j-block{position:absolute;max-width:430px;transition:opacity .9s var(--ease),transform .9s var(--ease);opacity:.14;}

.j-block--hell{left:clamp(24px,7%,120px);bottom:clamp(90px,15vh,150px);}

.j-block--heaven{right:clamp(24px,7%,120px);top:clamp(80px,14vh,140px);text-align:right;}

.judgement.is-hell .j-block--hell,.judgement.is-heaven .j-block--heaven{opacity:1;}

.judgement.is-hell .j-block--heaven,.judgement.is-heaven .j-block--hell{opacity:.06;}

.judgement.is-void .j-block{opacity:.04;}

.j-block .eyebrow{display:block;margin-bottom:14px;}

.j-block--hell .eyebrow{color:#FF8A6B;}

.j-block--heaven .eyebrow{color:var(--heaven-w);}

.j-title{font-family:var(--fh);font-weight:700;font-size:clamp(34px,3.8vw,60px);line-height:1.02;letter-spacing:.03em;margin-bottom:16px;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.6);}

.j-sub{font-style:italic;font-size:clamp(17px,1.25vw,19.5px);line-height:1.7;color:rgba(255,255,255,.85);margin-bottom:26px;text-shadow:0 1px 14px rgba(0,0,0,.8);}

.j-block--heaven .j-sub{margin-left:auto;}

/* Button pyramids: Hell = inverted (2 over 1), Heaven = upright (1 over 2) */

.pyr{display:flex;flex-direction:column;gap:10px;width:max-content;}

.pyr__row{display:flex;gap:10px;justify-content:center;}

.j-block--heaven .pyr{margin-left:auto;align-items:center;}

.j-block--hell .pyr{align-items:center;}

.j-btn{font-family:var(--fh);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;padding:12px 20px;border:1px solid;white-space:nowrap;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);transition:background .45s var(--ease),color .45s,border-color .45s,box-shadow .45s;}

.j-btn--hell{border-color:rgba(255,120,90,.6);color:#FFD2C4;background:rgba(39,0,0,.45);}

.j-btn--hell:hover{background:var(--hell);border-color:var(--hell);color:#fff;box-shadow:0 0 30px rgba(225,27,0,.55),inset 0 0 12px rgba(255,107,0,.5);}

.j-btn--heaven{border-color:rgba(176,241,251,.7);color:#E9FBFF;background:rgba(8,33,70,.35);}

.j-btn--heaven:hover{background:var(--heaven-w);border-color:#fff;color:#062033;box-shadow:0 0 34px rgba(37,215,254,.55),0 0 80px rgba(255,220,54,.25);}

.j-btn--top{min-width:220px;text-align:center;}

.emblem{position:absolute;left:50%;bottom:clamp(64px,11vh,120px);transform:translateX(-50%);z-index:3;text-align:center;}

.emblem svg{width:clamp(110px,9vw,150px);height:auto;overflow:visible;}

.pf{transition:opacity .8s var(--ease),filter .8s var(--ease);opacity:.28;cursor:pointer;}

.pf-hell{fill:#D8341F;}
.pf-heaven{fill:#2E8FE0;}
.pf-soul{fill:var(--soul);}

.pf-edge{stroke:rgba(255,255,255,.35);stroke-width:1;fill:none;pointer-events:none;}

.judgement.is-hell .pf-hell{opacity:1;filter:drop-shadow(0 0 14px rgba(225,27,0,.85));}

.judgement.is-heaven .pf-heaven{opacity:1;filter:drop-shadow(0 0 14px rgba(37,215,254,.85));}

.judgement.is-void .pf-soul,.judgement.is-neutral .pf-soul{opacity:1;filter:drop-shadow(0 0 16px rgba(139,63,201,.9));}

.emblem__cap{margin-top:12px;font-family:var(--fh);font-size:11px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.62);min-height:1.4em;}

.arrow--judgement{left:50%;bottom:16px;margin-left:-29px;width:52px;height:52px;}

/* Extra tokens used by the sections of the original v19 */

:root{
  --violet-deep:#160328;
  --parchment:#E8DDC9;
  --muted:#8a8070;
  --muted-l:#b8ad98;
  --muted-dark:#5c5346;
}

/* ── "Coming soon" markers ── */

.soon-dim{opacity:.4;cursor:default;pointer-events:none;}

.soon-wrap{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:3px;}

.soon-tag{font-family:var(--fh);font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;line-height:1;white-space:nowrap;opacity:.75;}

.rail__icons .soon-wrap a{opacity:.35;pointer-events:none;}

.rail__icons .soon-tag{color:var(--ink);opacity:.55;}

.chip-soon{display:inline-block;font-family:var(--fh);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:4px 9px;border:1px dashed currentColor;opacity:.8;white-space:nowrap;}

/* ── Simplified emblem on the Scribe Demon's desk (line art, like the concept art) ── */

.emblem svg{width:clamp(70px,5.4vw,92px);}

.pf{opacity:1;fill:transparent;stroke:rgba(239,231,216,.55);stroke-width:1.4;stroke-linejoin:round;transition:fill .8s var(--ease),stroke .8s var(--ease),filter .8s var(--ease);}

.pf-hell,.pf-heaven,.pf-soul{fill:transparent;}

.pf-edge{display:none;}

.judgement.is-hell .pf-hell{fill:rgba(225,27,0,.75);stroke:#FF8A6B;opacity:1;filter:drop-shadow(0 0 10px rgba(225,27,0,.7));}

.judgement.is-heaven .pf-heaven{fill:rgba(37,215,254,.7);stroke:var(--heaven-w);opacity:1;filter:drop-shadow(0 0 10px rgba(37,215,254,.7));}

.judgement.is-void .pf-soul,.judgement.is-neutral .pf-soul{fill:rgba(139,63,201,.7);stroke:#C9A2F2;opacity:1;filter:drop-shadow(0 0 10px rgba(139,63,201,.75));}

.emblem__cap{margin-top:8px;font-size:10px;letter-spacing:.34em;}

/* ════════════════════════════════════════════════════════════════
   GAME STRUCTURE (original v19 layout, visuals now filled)
   ════════════════════════════════════════════════════════════════ */

.structure,.purges,.wood,.follow{position:relative;padding:clamp(88px,9vw,120px) var(--gutter);}

.wrap2{max-width:1080px;margin:0 auto;}

.sec-h{font-family:var(--fh);font-weight:600;font-size:clamp(26px,3vw,40px);text-align:center;margin-bottom:14px;letter-spacing:.02em;}

.sec-rule{width:72px;height:2px;margin:0 auto 52px;position:relative;}

.sec-rule::before,.sec-rule::after{content:'';position:absolute;top:50%;width:5px;height:5px;border-radius:50%;background:inherit;transform:translateY(-50%);}

.sec-rule::before{left:-10px;}
.sec-rule::after{right:-10px;}

.structure{background:#110407;}

.structure .sec-h{color:var(--gold-l);}

.structure .sec-rule{background:var(--gold);}

.s-whatis{max-width:700px;margin:0 auto 36px;text-align:center;font-size:18px;color:#c4b8a6;line-height:1.8;}

.s-intro{text-align:center;color:var(--muted);margin:0 auto 34px;font-size:16px;max-width:500px;font-style:italic;}

.s-divider{max-width:600px;margin:0 auto 44px;}

.s-divider svg{width:100%;height:32px;display:block;}

.s-divider path{stroke:var(--gold);opacity:.6;}

.s-divider circle{stroke:var(--gold-l);fill:var(--gold-l);opacity:.85;}

.s-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-bottom:64px;}

.s-card-text{min-height:170px;display:flex;flex-direction:column;}

.s-card-title{font-family:var(--fh);font-size:23px;font-weight:600;margin-bottom:14px;}

.s-cel .s-card-title{color:#4ECFEA;}

.s-inf .s-card-title{color:#E06A55;}

.s-card-body{font-size:16.5px;color:var(--muted-l);line-height:1.78;flex:1;}

.s-visual{position:relative;aspect-ratio:16/10;border:1px solid;overflow:hidden;background:#000;}

.s-visual video,.s-visual img{width:100%;height:100%;object-fit:cover;}

.s-visual figcaption{position:absolute;left:0;right:0;bottom:0;padding:24px 14px 9px;font-size:13px;font-style:italic;color:rgba(255,255,255,.85);background:linear-gradient(0deg,rgba(0,0,0,.75),transparent);}

.s-cel .s-visual{border-color:rgba(78,207,234,.35);}

.s-inf .s-visual{border-color:rgba(224,106,85,.35);}

.pvp{max-width:900px;margin:0 auto;padding-top:8px;border-top:1px solid rgba(184,135,58,.18);}

.pvp-title{font-family:var(--fh);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-l);font-weight:600;text-align:center;margin:30px 0 24px;}

.pvp-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;}

.pvp-col{padding:24px 26px;}

.pvp-col--mineral{background:rgba(232,221,201,.06);}

.pvp-col--coal{background:rgba(0,0,0,.35);}

.pvp-col-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:8px;font-weight:600;font-family:var(--fh);}

.pvp-col-title{font-family:var(--fh);font-size:16px;color:var(--parchment);margin-bottom:9px;}

.pvp-col-body{font-size:15px;color:var(--muted-l);line-height:1.65;}

/* Plain text, not a button */

.pvp-col-tag{display:block;margin-top:14px;padding-top:10px;border-top:1px solid rgba(184,135,58,.18);font-size:13px;font-style:italic;letter-spacing:.02em;color:var(--gold-l);}

/* ════════════════════════════════════════════════════════════════
   THE FIVE PURGES — the doors stand in a dark hall, each lit by its own colour
   ════════════════════════════════════════════════════════════════ */

.purges{background:radial-gradient(ellipse 80% 55% at 50% 62%,#1b1024 0%,#0b0710 60%,#060408 100%);overflow:hidden;}

.purges .sec-h{color:var(--mineral);}

.purges .sec-rule{background:var(--violet-l);}

.purges__lead{max-width:620px;margin:-20px auto 60px;text-align:center;font-style:italic;color:var(--muted-l);font-size:17px;}

.hall{list-style:none;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(10px,1.6vw,26px);max-width:1180px;margin:0 auto;position:relative;}

/* stone floor line the doors stand on */

.hall::before{content:'';position:absolute;left:-6%;right:-6%;top:calc(var(--door-h) - 2px);height:1px;background:linear-gradient(90deg,transparent,rgba(212,164,85,.35) 20%,rgba(212,164,85,.35) 80%,transparent);}

.hall{--door-h:clamp(250px,24vw,340px);}

.gate{--glow:139,63,201;text-align:center;position:relative;}

.gate--1{--glow:139,63,201;}
.gate--2{--glow:232,190,90;}
.gate--3{--glow:200,70,90;}
.gate--4{--glow:235,120,140;}
.gate--5{--glow:190,200,90;}

.gate__stage{position:relative;height:var(--door-h);display:flex;align-items:flex-end;justify-content:center;}

.gate__stage::before{content:'';position:absolute;left:50%;bottom:6%;width:120%;height:75%;transform:translateX(-50%);background:radial-gradient(ellipse at 50% 70%,rgba(var(--glow),.28),transparent 65%);filter:blur(6px);transition:opacity .8s var(--ease);opacity:.65;}

.gate__stage::after{content:'';position:absolute;left:50%;bottom:-10px;width:70%;height:20px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.75),transparent 70%);}

.gate__door{position:relative;z-index:1;height:94%;width:auto;max-width:100%;object-fit:contain;filter:saturate(.88) contrast(1.06) brightness(.9);transition:transform .9s var(--ease),filter .9s var(--ease);}

.gate:hover .gate__door{transform:translateY(-6px);filter:saturate(1) contrast(1.08) brightness(1.02) drop-shadow(0 0 22px rgba(var(--glow),.45));}

.gate:hover .gate__stage::before{opacity:1;}

/* faint reflection on the polished floor */

.gate__reflect{position:absolute;left:0;right:0;top:100%;height:34%;overflow:hidden;pointer-events:none;opacity:.14;-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%);}

.gate__reflect img{display:block;margin:0 auto;height:calc(var(--door-h) * .94);width:auto;transform:scaleY(-1);filter:blur(1.5px);}

.gate__text{margin-top:clamp(48px,5vw,70px);}

.gate__num{display:block;font-family:var(--fh);font-size:12.5px;font-weight:600;letter-spacing:.3em;color:rgb(var(--glow));margin-bottom:6px;}

.gate__name{font-family:var(--fh);font-size:clamp(18px,1.6vw,23px);font-weight:600;color:var(--mineral);margin-bottom:14px;}

.gate__bosses{list-style:none;display:grid;gap:10px;text-align:left;max-width:210px;margin:0 auto;}

.gate__bosses li{border-left:1px solid rgba(var(--glow),.55);padding-left:12px;}

.gate__bosses b{display:block;font-family:var(--fh);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--glow),.95);}

.gate__bosses span{display:block;font-size:15.5px;line-height:1.45;color:var(--text-2);}

.purges__foot{margin-top:clamp(52px,5vw,72px);text-align:center;font-style:italic;font-size:18px;color:var(--muted-l);}

/* ════════════════════════════════════════════════════════════════
   BUILT IN WOOD, BEING BUILT IN CODE — looping clips with captions
   ════════════════════════════════════════════════════════════════ */

.wood{background:#120C08;}

.wood .sec-h{color:var(--mineral);}

.wood .sec-rule{background:var(--gold);}

.wood__lead{max-width:680px;margin:-18px auto 36px;text-align:center;color:var(--muted-l);font-size:17.5px;line-height:1.75;}

.wood__stats{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:0;margin:0 auto 56px;max-width:900px;border-top:1px solid rgba(184,135,58,.22);border-bottom:1px solid rgba(184,135,58,.22);}

.wood__stats li{flex:1 1 180px;text-align:center;padding:18px 12px;}

.wood__stats li+li{border-left:1px solid rgba(184,135,58,.22);}

.wood__stats b{display:block;font-family:var(--fh);font-size:clamp(26px,2.6vw,38px);font-weight:600;color:var(--gold-l);line-height:1.1;}

.wood__stats span{font-size:14.5px;color:var(--muted-l);}

.clips{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,26px);}

.clip{margin:0;}

.clip__media{position:relative;aspect-ratio:4/5;overflow:hidden;background:#1d140e;border:1px solid rgba(184,135,58,.28);}

.clip__media video{width:100%;height:100%;object-fit:cover;}

.clip__media::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 40px rgba(0,0,0,.35);pointer-events:none;}

.clip figcaption{padding-top:14px;}

.clip__title{display:block;font-family:var(--fh);font-size:15px;font-weight:600;letter-spacing:.06em;color:var(--mineral);margin-bottom:4px;}

.clip__line{display:block;font-size:15px;line-height:1.55;color:var(--muted-l);}

.clip--code .clip__media{border-color:rgba(78,207,234,.35);}

/* ════════════════════════════════════════════════════════════════
   FOLLOW DEVELOPMENT (original 3 columns)
   ════════════════════════════════════════════════════════════════ */

.follow{background:#000;}

.follow .sec-h{color:#e0d8c8;}

.follow .sec-rule{background:#333;}

.follow-sub{text-align:center;color:var(--muted);font-style:italic;max-width:520px;margin:-22px auto 54px;font-size:17px;}

.follow-cols{display:grid;grid-template-columns:1fr 1.1fr 1.2fr;gap:1px;background:rgba(255,255,255,.08);max-width:1060px;margin:0 auto;}

.follow-col{background:#000;padding:38px 30px;}

.follow-col--center{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;}

.follow-col-h{font-family:var(--fh);font-size:15px;font-weight:600;color:var(--parchment);line-height:1.45;margin-bottom:18px;}

.follow-col-h--mt{margin-top:34px;}

.fl-itch{display:inline-flex;align-items:center;gap:12px;font-family:var(--fh);font-size:22px;letter-spacing:.08em;font-weight:600;color:var(--gold-l);margin-bottom:22px;}

.follow-stores{display:flex;gap:10px;flex-wrap:wrap;}

.store-btn{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7);font-size:13px;}

.store-btn svg{width:15px;height:15px;fill:currentColor;flex-shrink:0;}

.follow-col--center .ks__kick{color:var(--parchment);}

.follow-col--center .ks__starter{-webkit-text-stroke-color:var(--violet-l);}

.follow-col--center .ks:hover .ks__starter{color:var(--violet-l);}

.follow-soon-note{color:var(--muted);font-size:14px;font-style:italic;}

.follow-form-row{display:flex;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:8px;margin-bottom:14px;}

.follow-form-row input{flex:1;min-width:0;background:none;border:none;color:var(--parchment);font-size:15px;outline:none;padding:4px 0;}

.follow-form-row input::placeholder{color:rgba(255,255,255,.3);}

.follow-form-row button{background:none;border:none;color:var(--gold-l);font-family:var(--fh);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;white-space:nowrap;}

.follow-form-row button:hover{color:var(--mineral);}

.follow-checkbox{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--muted);line-height:1.5;cursor:pointer;}

.follow-checkbox input{margin-top:3px;flex-shrink:0;accent-color:var(--gold);}

.follow-checkbox a{color:var(--gold-l);border-bottom:1px solid rgba(184,135,58,.4);}

.notify__msg{margin-top:10px;min-height:1.4em;font-style:italic;color:var(--gold-l);font-size:14px;}

.follow-manual{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:14px;flex-wrap:wrap;}

.follow-manual-label{font-size:13px;color:var(--muted);font-style:italic;}

.follow-manual-link{font-family:var(--fh);font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;}

.fl-whatsapp{color:#4FCF6E;}
.fl-discord{color:#8E9BFF;}

/* ════════════════════════════════════════════════════════════════
   TEAM — the original picture pyramid, refined
   ════════════════════════════════════════════════════════════════ */

.team-top{background:linear-gradient(180deg,var(--violet-deep) 0%,#2A0F45 55%,#3d2317 100%);border-left:14px solid var(--gold);border-right:14px solid var(--gold);padding:clamp(90px,9vw,120px) var(--gutter) 70px;position:relative;}

.team-top .sec-h{color:var(--parchment);}

.team-top .sec-rule{background:var(--gold);}

.team-sub{text-align:center;font-style:italic;color:rgba(232,221,201,.6);margin:-20px auto 64px;max-width:580px;font-size:17px;}

.team-grid{display:flex;flex-direction:column;align-items:center;gap:0;max-width:980px;margin:0 auto;}

.team-row{display:flex;justify-content:center;gap:clamp(12px,1.6vw,22px);width:100%;position:relative;padding-bottom:26px;margin-bottom:18px;}

/* the gold step each row stands on */

.team-row::after{content:'';position:absolute;bottom:0;height:10px;background:linear-gradient(180deg,var(--gold-l),var(--gold) 60%,#8a6329);box-shadow:0 6px 14px rgba(0,0,0,.35);}

.team-row--4::after{left:2%;right:2%;}
.team-row--3::after{left:14%;right:14%;}
.team-row--2::after{left:26%;right:26%;}
.team-row--1::after{left:38%;right:38%;}

.team-row::before{content:'';position:absolute;bottom:14px;height:3px;background:var(--gold);opacity:.55;}

.team-row--4::before{left:5%;right:5%;}
.team-row--3::before{left:17%;right:17%;}
.team-row--2::before{left:29%;right:29%;}
.team-row--1::before{left:41%;right:41%;}

.tg-photo{position:relative;width:calc(25% - 17px);aspect-ratio:1/1;overflow:hidden;background:#1a1030;border:1px solid rgba(212,164,85,.45);box-shadow:0 10px 26px rgba(0,0,0,.35);}

.tg-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(12%) contrast(1.02);transition:filter .4s ease,transform .6s var(--ease);}

.tg-photo:hover img{filter:none;transform:scale(1.05);}

.tg-name{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 12px;background:linear-gradient(0deg,rgba(8,4,16,.92) 0%,rgba(8,4,16,.6) 55%,transparent 100%);font-family:var(--fh);font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--parchment);transform:translateY(38%);transition:transform .5s var(--ease);}

.tg-role{display:block;font-family:var(--fb);font-size:14px;font-style:italic;color:var(--gold-l);letter-spacing:0;text-transform:none;margin-top:3px;opacity:0;transition:opacity .5s var(--ease);}

.tg-photo:hover .tg-name{transform:none;}

.tg-photo:hover .tg-role{opacity:1;}

.team-cut{height:56px;position:relative;overflow:hidden;background:linear-gradient(180deg,#3d2317 0%,var(--gold) 50%,var(--gold) 100%);}

.team-cut::before,
.team-cut::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:13.5px;
    z-index:10;
    background:linear-gradient(
        180deg,
        var(--gold) 0%,
        var(--gold) 28%,
        #8a6329 55%,
        var(--violet-deep) 100%
    );
}


.team-cut::before{
    left:0;
}

.team-cut::after{
    right:0;
}

.team-bottom{background:var(--gold);border-left:14px solid var(--violet-deep);border-right:14px solid var(--violet-deep);padding:70px var(--gutter) 100px;text-align:center;}

.tb-photo{width:180px;height:180px;border-radius:50%;object-fit:cover;margin:0 auto 18px;border:4px solid var(--violet-deep);box-shadow:0 8px 30px rgba(0,0,0,.25);}

.tb-name{font-family:var(--fh);font-size:19px;font-weight:600;color:var(--violet-deep);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px;}

.tb-role{font-size:16px;font-style:italic;color:rgba(22,3,40,.75);margin-bottom:56px;}

.tb-carousel{background:var(--violet-deep);max-width:940px;margin:0 auto;border:1px solid rgba(184,135,58,.35);}

.tb-car-viewport{position:relative;aspect-ratio:3/2;overflow:hidden;}

.tb-car-track{display:flex;height:100%;transition:transform .7s var(--ease);}

.tb-car-slide{min-width:100%;height:100%;}

.tb-car-slide img{width:100%;height:100%;object-fit:cover;display:block;}

.tb-car-caption{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-top:1px solid rgba(184,135,58,.25);}

.tb-car-text{font-family:var(--fh);font-size:12px;letter-spacing:.2em;color:var(--muted-l);}

.tb-car-nav{display:flex;gap:10px;align-items:center;}

.tb-car-btn{width:34px;height:34px;border:1px solid rgba(184,135,58,.5);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold-l);cursor:pointer;background:none;font-size:15px;}

.tb-car-btn:hover{background:rgba(184,135,58,.15);}

.tb-car-dots{display:flex;gap:6px;margin:0 6px;}

.tb-car-dot{width:6px;height:6px;border-radius:50%;background:rgba(184,135,58,.35);cursor:pointer;}

.tb-car-dot.is-active{background:var(--gold-l);}

.tb-cta{margin-top:56px;}

.tb-cta a{font-family:var(--fh);font-size:clamp(17px,2vw,22px);font-weight:600;letter-spacing:.1em;color:var(--violet-deep);border-bottom:2px solid var(--violet-deep);padding-bottom:6px;transition:opacity .2s;}

.tb-cta a:hover{opacity:.6;}

/* ════════════════════════════════════════════════════════════════
   FOOTER (original 3 columns)
   ════════════════════════════════════════════════════════════════ */

.footer{background:var(--parchment);color:var(--ink);padding:80px var(--gutter) 0;}

.footer-grid{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;max-width:1200px;margin:0 auto;padding-bottom:56px;}

.footer-col{flex:1;}

.footer-col--left,.footer-col--right{max-width:320px;}

.footer-col--center{flex:0 0 auto;text-align:center;padding-top:10px;}

.footer-col-h{font-family:var(--fh);font-size:13.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);margin-bottom:20px;}

.footer-col-h--right{text-align:right;}

.footer-textlink{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--muted-dark);margin-bottom:12px;}

.footer-textlink .chip-soon{font-size:9px;color:var(--muted-dark);}

.footer-qr-row{display:flex;align-items:center;gap:12px;margin-top:22px;}

.footer-qr-label{font-size:13px;font-style:italic;color:var(--muted-dark);}

.footer-qr{display:block;width:64px;height:64px;flex-shrink:0;opacity:.45;}

.footer-qr img{width:100%;height:100%;}

.footer-giant{display:inline-flex;flex-direction:column;align-items:center;gap:22px;transition:opacity .25s;}

.footer-giant:hover{opacity:.8;}

.footer-giant-iso{width:clamp(130px,13vw,190px);height:auto;}

.footer-giant-word{width:clamp(220px,24vw,330px);height:auto;}

.fs-grid{display:flex;gap:18px;justify-content:flex-end;}

.fs-col{display:flex;flex-direction:column;gap:14px;align-items:center;}

.fs-icon{display:flex;flex-direction:column;align-items:center;gap:3px;color:rgba(11,11,15,.55);transition:color .2s;}

.fs-icon svg{width:20px;height:20px;fill:currentColor;}

.fs-icon.is-soon{opacity:.35;pointer-events:none;}

.fs-icon .soon-tag{font-size:7.5px;}

.fs-col--violet .fs-icon:hover{color:var(--violet);}

.fs-col--gold .fs-icon:hover{color:var(--gold);}

.footer-copy{font-size:14px;color:var(--muted-dark);border-top:1px solid rgba(11,8,16,.1);padding:22px 0;font-style:italic;text-align:center;}

.footer-copy a{border-bottom:1px solid rgba(90,80,64,.35);}

/* Slide 4: the pyramid artwork sits on black without a frame, never cropped */

.frame-media--bare{border:0;padding:0;background:none;aspect-ratio:auto!important;}

.frame-media--bare::before,.frame-media--bare::after{display:none;}

.frame-media--bare img{object-fit:contain;height:auto;}

.slide--d .slide__center{flex:0 1 42%;}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (max-width:1100px){

  .slide--d .slide__flank{flex-basis:200px;}

  .clips{grid-template-columns:repeat(2,1fr);}

}

@media (max-width:900px){

  :root{--top0:64px;--rail0:0px;--peek:34px;--logo0:44px;--logo1:42px;}

  body{font-size:17px;}

  .frame-rail,.frame-nav,.frame-top__center{display:none;}

  .mark-ks{top:max(10px,calc(var(--top-h) / 2 - 17px));}

  .mark-ks__label,.mark-ks__sub{display:none;}

  .ks{font-size:19px;}

  .menu-btn{display:grid;place-items:center;position:fixed;z-index:121;top:12px;left:66px;width:42px;height:42px;border:1px solid rgba(11,11,15,.3);background:transparent;color:var(--ink);cursor:pointer;}

  .is-collapsed .menu-btn{background:rgba(11,11,15,.62);color:var(--mineral);border-color:rgba(184,135,58,.35);}

  .menu-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;}

  .mini-nav{height:auto;top:0;flex-direction:column;padding:74px 0 18px;}

  .hero{margin-left:0;border-top-left-radius:0;}

  .slide{padding:28px 22px 88px;align-items:flex-end;}

  .slide__inner,.slide--b .slide__inner{flex-direction:column;align-items:stretch;gap:22px;}

  .slide__media{order:-1;}

  .slide--c .slide__side{display:none;}

  .slide--d .slide__inner{flex-direction:column;}

  .slide--d .slide__center{display:none;}

  .slide--d .slide__flank{flex:none;}

  .slide__bg::after{background:linear-gradient(0deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.75) 45%,rgba(0,0,0,.25) 100%);}

  .hero__zone,.hero__status{display:none;}

  .arrow--hero{left:auto;right:18px;bottom:18px;width:48px;height:48px;}

  .judgement{height:auto;min-height:100svh;}

  .judgement__art img{object-position:50% 20%;}

  .judgement__veil{opacity:.55!important;}

  .judgement__inner{display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding:96px 22px 230px;min-height:100svh;}

  .pyr{width:100%;}
  .pyr__row{flex-wrap:wrap;}

  .j-btn{font-size:11px;padding:10px 14px;}
  .j-btn--top{min-width:0;}

  .j-block{position:static;opacity:1!important;max-width:none;}

  .j-block--heaven{text-align:right;}

  .emblem{bottom:70px;}

  .s-grid,.pvp-split,.follow-cols{grid-template-columns:1fr;}

  .s-card-text{min-height:0;margin-bottom:18px;}

  .hall{grid-template-columns:repeat(2,1fr);row-gap:40px;--door-h:260px;}

  .hall::before{display:none;}

  .hall > li:last-child{grid-column:1/-1;}

  .clips{grid-template-columns:1fr 1fr;}

  .team-top,.team-bottom{border-left-width:8px;border-right-width:8px;padding-left:16px;padding-right:16px;}

  .team-row{flex-wrap:wrap;}

  .tg-photo{width:calc(50% - 8px);}

  .team-row::before,.team-row::after{left:4%!important;right:4%!important;}

  .tg-name{transform:none;}
  .tg-role{opacity:1;}

  .footer-grid{flex-direction:column;align-items:center;text-align:center;}

  .footer-col--left,.footer-col--right{max-width:100%;}

  .footer-col-h--right{text-align:center;}

  .footer-textlink{justify-content:center;}

  .footer-qr-row,.fs-grid{justify-content:center;}

}

@media (max-width:560px){

  .clips{grid-template-columns:1fr;}

  .hall{grid-template-columns:1fr;}

}

@media (hover:none){
  .hero__zone{display:none;}
}

@media (prefers-reduced-motion:reduce){

  html{scroll-behavior:auto;}

  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;}

  .reveal{opacity:1;transform:none;}

}

/* BARRAS LATERALES */
.side-bar {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 18px;
    z-index: 1000;
}

.side-bar.left {
    left: 0;
}

.side-bar.right {
    right: 0;
}

/* La transición pertenece al cambio de SECCIÓN,
   no a las barras laterales */
.section-transition {
    position: relative;
    z-index: 2;
}

/* Evita que la sombra/gradiente se meta en los laterales */
.section-transition::before,
.section-transition::after {
    left: 18px;
    right: 18px;
}
/* ════════════════════════════════════════════════════════════════
   v22 CHANGES (29 Sep 2026). Everything above is v21 untouched;
   these rules only add or override what Guim asked for.
   ════════════════════════════════════════════════════════════════ */

/* Hero: the "previous / next" click zones, half as wide, desert-yellow hover */
.hero__zone{width:9%;}
.hero__zone--prev{background:linear-gradient(90deg,rgba(212,164,85,.45),transparent);}
.hero__zone--next{background:linear-gradient(270deg,rgba(212,164,85,.45),transparent);}
.hero__zone span{color:var(--mineral);}
.hero.is-sand .hero__zone span{color:var(--violet);}

/* Hero slides 2 to 4 sit on the sand: purple titles, black text, purple accents */
.slide--b .slide__title,.slide--c .slide__title,.slide--d .slide__title{color:var(--violet);}
.slide--b .slide__body,.slide--c .slide__body,.slide--d .slide__body{color:var(--ink);}
.slide--b .eyebrow,.slide--c .eyebrow,.slide--d .eyebrow{color:var(--violet);}
.slide--b .caption,.slide--c .caption,.slide--d .caption{color:var(--ink-2);}
.slide--b .frame-media,.slide--c .frame-media,.slide--d .frame-media{border-color:rgba(59,11,102,.35);}
.slide--b .frame-media::before,.slide--b .frame-media::after,
.slide--c .frame-media::before,.slide--c .frame-media::after,
.slide--d .frame-media::before,.slide--d .frame-media::after{border-color:var(--violet);}
.slide--b .btn,.slide--c .btn,.slide--d .btn{border-color:var(--violet);color:var(--violet);}
.slide--b .btn:hover,.slide--c .btn:hover,.slide--d .btn:hover,
.slide--d .btn.is-linked-hover{background:var(--violet);border-color:var(--violet);color:#fff;box-shadow:0 0 24px rgba(59,11,102,.25);}
/* the hero controls follow the slide underneath */
.hero.is-sand .hero__dot::before{background:rgba(59,11,102,.22);}
.hero.is-sand .hero__dot i{background:var(--violet);}
.hero.is-sand .hero__status{color:var(--ink-3);}
.hero.is-sand .hero__status b{color:var(--violet);}
.hero.is-sand .arrow--hero{border-color:rgba(59,11,102,.55);color:var(--violet);background:rgba(232,221,201,.55);}

/* Top bar: Home, Competition and Contact hover in desert yellow instead of black */
.frame-nav a:hover{background:var(--gold);color:var(--ink);border-color:var(--gold);}

/* Collapsed logo and Kickstarter mark keep a soft hover once the frame has shrunk */
.is-collapsed .mark-logo:hover{background:linear-gradient(135deg,rgba(212,164,85,.24),rgba(11,11,15,.62) 72%);box-shadow:0 0 0 1px rgba(212,164,85,.55),0 0 14px rgba(212,164,85,.12);}
.is-collapsed .mark-ks:hover{background:linear-gradient(135deg,rgba(212,164,85,.20),rgba(11,11,15,.62) 72%);box-shadow:0 0 0 1px rgba(212,164,85,.55),0 0 14px rgba(212,164,85,.12);}

/* Structure: lead sentence and the "built on" notes under each path */
.s-whatis--lead{font-size:19.5px;color:#ddd1be;margin-bottom:18px;}
.s-card-note{margin-top:14px;font-size:15.5px;font-style:italic;color:var(--gold-l);}

/* Team carousel: a caption under every photo */
.tb-car-text{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.tb-car-text em{font-family:var(--fb);font-size:16px;font-style:italic;letter-spacing:0;color:#e8dcc6;}
.tb-car-count{font-size:11px;letter-spacing:.2em;opacity:.7;}

/* v23: subtitle of "Support" on one line (desktop); invisible "Soon" spacers in the social grid */
@media (min-width:901px){.follow-sub{max-width:none;white-space:nowrap;}}
.soon-tag--spacer{visibility:hidden;}

/* ════════════════════════════════════════════════════════════════
   v24 FIXES (29 Sep 2026). Only what Guim listed; everything above stays.
   ════════════════════════════════════════════════════════════════ */

/* 1. Hero edge zones: nothing shows until the mouse is really on an edge,
      and then only a small round chip (no gradient panel clashing with the sand bars) */
.hero__zone,.hero:hover .hero__zone{opacity:1;background:none!important;}
.hero__zone--prev{padding-left:22px;}
.hero__zone--next{padding-right:22px;}
.hero__zone span{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  font-size:30px;line-height:1;padding-bottom:4px;color:var(--mineral);
  background:rgba(11,11,15,.45);border:1px solid rgba(212,164,85,.7);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transform:scale(.85);transition:opacity .3s,transform .3s var(--ease),background .3s,color .3s;}
.hero__zone:hover span,.hero__zone:focus-visible span{opacity:1;transform:none;}
.hero__zone:hover span{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.hero.is-sand .hero__zone span{color:var(--violet);background:rgba(232,221,201,.7);border-color:rgba(59,11,102,.55);}
.hero.is-sand .hero__zone:hover span{background:var(--violet);color:#fff;border-color:var(--violet);}
/* the bottom-left arrow on the sand slides now hovers purple too */
.hero.is-sand .arrow--hero:hover{background:var(--violet);color:#fff;border-color:var(--violet);}

/* 2. Brotherhood door: blue and red, like the door itself (blue left, red right) */
.gate--3{--glow:96,132,235;--glow2:214,62,62;}
.gate--3 .gate__stage::before{background:
  radial-gradient(ellipse at 30% 70%,rgba(var(--glow),.30),transparent 60%),
  radial-gradient(ellipse at 70% 70%,rgba(var(--glow2),.30),transparent 60%);}
.gate--3:hover .gate__door,.gate--3.is-lit .gate__door{filter:saturate(1) contrast(1.08) brightness(1.02)
  drop-shadow(-10px 0 18px rgba(var(--glow),.55)) drop-shadow(10px 0 18px rgba(var(--glow2),.5));}
.gate--3 .gate__num{background:linear-gradient(90deg,rgb(var(--glow)),rgb(var(--glow2)));
  -webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;}
.gate--3 .gate__bosses li:last-child{border-left-color:rgba(var(--glow2),.55);}
.gate--3 .gate__bosses li:last-child b{color:rgba(var(--glow2),.95);}

/* 4. Doors on phones: no grey tap square; the glow shows on the door in the middle of the screen */
.gate,.gate *{-webkit-tap-highlight-color:transparent;}
.gate.is-lit .gate__door{transform:translateY(-6px);filter:saturate(1) contrast(1.08) brightness(1.02) drop-shadow(0 0 22px rgba(var(--glow),.45));}
.gate--3.is-lit .gate__door{filter:saturate(1) contrast(1.08) brightness(1.02)
  drop-shadow(-10px 0 18px rgba(var(--glow),.55)) drop-shadow(10px 0 18px rgba(var(--glow2),.5));}
.gate.is-lit .gate__stage::before{opacity:1;}
@media (hover:none){
  .gate:hover:not(.is-lit) .gate__door{transform:none;filter:saturate(.88) contrast(1.06) brightness(.9);}
  .gate:hover:not(.is-lit) .gate__stage::before{opacity:.65;}
}

@media (max-width:900px){
  html{-webkit-tap-highlight-color:transparent;}

  /* 5. Slim menu on phones: compact, at most a third of the screen, only via the button */
  .mini-nav{flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center;
    gap:2px 0;padding:68px 14px 12px;max-height:33vh;max-height:33svh;overflow-y:auto;}
  .mini-nav a{flex:0 0 33.333%;text-align:center;font-size:11px;letter-spacing:.14em;padding:9px 4px;}

  /* 3. Heaven/Hell on phones: the room stays behind you as a full-screen backdrop and
        pans to Heaven (top half of the section) or to Hell (bottom half) */
  .judgement{overflow:clip;}
  .judgement__art{position:sticky;inset:auto;top:0;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;}
  .judgement__art img{object-position:50% 20%;transition:object-position 1.4s var(--ease),transform 8s var(--ease),filter 1s var(--ease);}
  .judgement.is-heaven .judgement__art img{object-position:88% 20%;transform:scale(1.04);}
  .judgement.is-hell .judgement__art img{object-position:10% 20%;transform:scale(1.04);}
  .judgement__veil,.judgement.is-hell .judgement__veil,.judgement.is-heaven .judgement__veil{opacity:.35!important;width:100%;}
  .judgement.is-void .judgement__veil{opacity:.8!important;}
  .j-block{transition:opacity .9s var(--ease);}
  .judgement .j-block{opacity:1!important;}
  .judgement.is-heaven .j-block--hell,.judgement.is-hell .j-block--heaven{opacity:.28!important;}

  /* 6. Team on phones: always pairs of two (5 rows × 2), each pair on its own gold ledge.
        The desktop pyramid (4-3-2-1) is untouched. */
  .team-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;row-gap:44px;padding-bottom:30px;}
  .team-row{display:contents;}
  .team-row::before,.team-row::after{display:none;}
  .tg-photo{width:auto;overflow:visible;}
  .tg-photo img{position:relative;}
  .tg-photo:hover img{transform:none;}
  .tg-photo .tg-name{z-index:1;}
  /* first photo of every pair draws the ledge under both */
  .team-row--4 .tg-photo:nth-child(odd)::after,.team-row--3 .tg-photo:nth-child(odd)::after,.team-row--2 .tg-photo:nth-child(2)::after{
    content:'';position:absolute;left:-4%;width:calc(208% + 14px);bottom:-28px;height:9px;
    background:linear-gradient(180deg,var(--gold-l),var(--gold) 60%,#8a6329);box-shadow:0 6px 14px rgba(0,0,0,.35);}
  .team-row--4 .tg-photo:nth-child(odd)::before,.team-row--3 .tg-photo:nth-child(odd)::before,.team-row--2 .tg-photo:nth-child(2)::before{
    content:'';position:absolute;left:0;width:calc(200% + 14px);bottom:-14px;height:3px;background:var(--gold);opacity:.55;}
}

/* ════════════════════════════════════════════════════════════════
   v25 FIXES (29 Sep 2026)
   ════════════════════════════════════════════════════════════════ */

/* Hero edge chip: the chevron is drawn (not a font glyph) so it sits exactly in the centre,
   and the chip has a soft, feathered edge instead of a hard circle */
.hero__zone span{position:relative;width:64px;height:64px;padding:0;font-size:0;color:var(--mineral);
  border:0;border-radius:50%;backdrop-filter:none;-webkit-backdrop-filter:none;
  background:radial-gradient(circle closest-side,rgba(11,11,15,.62) 0%,rgba(11,11,15,.5) 50%,rgba(11,11,15,0) 100%);}
.hero__zone span::before{content:'';position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;
  background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 5L8.5 12l7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 5L8.5 12l7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
.hero__zone--next span::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 5l7 7-7 7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.hero__zone:hover span{border:0;color:var(--ink);
  background:radial-gradient(circle closest-side,rgba(212,164,85,1) 0%,rgba(212,164,85,.92) 48%,rgba(212,164,85,0) 100%);}
.hero.is-sand .hero__zone span{border:0;color:var(--violet);
  background:radial-gradient(circle closest-side,rgba(232,221,201,.9) 0%,rgba(232,221,201,.75) 50%,rgba(232,221,201,0) 100%);}
.hero.is-sand .hero__zone:hover span{border:0;color:#fff;
  background:radial-gradient(circle closest-side,rgba(59,11,102,1) 0%,rgba(59,11,102,.92) 48%,rgba(59,11,102,0) 100%);}

/* Brotherhood door: the two sideways-shifted glows leaked through the slit between the
   leaves (a bright line down the middle). The door now gets one soft, centred glow like
   the other doors; the blue-left / red-right light stays in the halo behind it. */
.gate--3:hover .gate__door,.gate--3.is-lit .gate__door{filter:saturate(1) contrast(1.08) brightness(1.02) drop-shadow(0 0 20px rgba(120,100,210,.32));}
.gate--3:hover .gate__stage::before,.gate--3.is-lit .gate__stage::before{background:
  radial-gradient(ellipse 30% 46% at 32% 58%,rgba(var(--glow),.6),transparent),
  radial-gradient(ellipse 30% 46% at 68% 58%,rgba(var(--glow2),.56),transparent);}

/* ════════════════════════════════════════════════════════════════
   v26 FIXES (29 Sep 2026)
   ════════════════════════════════════════════════════════════════ */

/* Brotherhood door, resting state: the blue and red halos were bigger than their box and
   got cut into hard vertical edges. They are now sized to fade out inside it, as soft as
   the other doors' single halo. */
.gate--3 .gate__stage::before{background:
  radial-gradient(ellipse 34% 64% at 36% 70%,rgba(var(--glow),.30),transparent),
  radial-gradient(ellipse 34% 64% at 64% 70%,rgba(var(--glow2),.28),transparent);}
.gate--3:hover .gate__stage::before,.gate--3.is-lit .gate__stage::before{background:
  radial-gradient(ellipse 34% 64% at 36% 70%,rgba(var(--glow),.55),transparent),
  radial-gradient(ellipse 34% 64% at 64% 70%,rgba(var(--glow2),.5),transparent);}

/* Brotherhood number: back on the same line height as the other doors' numbers */
.gate--3 .gate__num{display:block;width:fit-content;margin-left:auto;margin-right:auto;}

/* KICKSTARTER (top right): thinner outline on STARTER until hovered, easier to read */
.mark-ks .ks__starter{-webkit-text-stroke-width:1px;}
.is-collapsed .mark-ks .ks__starter{-webkit-text-stroke-width:.8px;}

/* Top-left logo: brandbook safety area. The free space around the isotype inside its circle
   is now about a fifth of the logo's height above, below and at the sides (the brandbook's
   example proportion; its minimum X is the isotype's inner circle). */
:root{--logo0:calc(min(var(--top0), var(--rail0)) * .76);--logo1:50px;}
.mark-logo img,.is-collapsed .mark-logo img{inset:13%;width:74%;height:74%;}
@media (max-width:900px){:root{--logo0:46px;--logo1:42px;}}

/* ════════════════════════════════════════════════════════════════
   v27 FIXES (29 Sep 2026)
   ════════════════════════════════════════════════════════════════ */

/* Big KICKSTARTER in "Support": Cinzel is a variable font whose letters are built from
   overlapping pieces, and the outline drew those hidden seams (lines inside A, R, E...).
   The outline is now painted under a black fill (the column is pure black), so only the
   outer edge shows. Same look, no seams; on hover it fills violet as before. */
.follow-col--center .ks__starter{color:#000;-webkit-text-stroke-width:3px;paint-order:stroke fill;}
.follow-col--center .ks:hover .ks__starter{color:var(--violet-l);}

/* Love door: its picture has more empty space around it than the others, so it looked
   smaller and floated above the floor. Scaled up 4.5% and lowered so its height and its
   contact with the base match the other four doors (reflection adjusted the same way). */
.gate--4 .gate__door{height:calc(94% * 1.045);margin-bottom:calc(var(--door-h) * -.034);}
.gate--4 .gate__reflect img{height:calc(var(--door-h) * .94 * 1.045);margin-top:calc(var(--door-h) * -.034);}

/* ════════════════════════════════════════════════════════════════
   v28 FIXES (29 Sep 2026)
   ════════════════════════════════════════════════════════════════ */

/* Team: the step between the brown team block and the golden carousel block.
   - One frame width for the three pieces (the cut used 13.5px bars against 14px borders,
     which left the notch on the right). The cut now uses real borders, so it can never
     misalign again, on any screen or zoom.
   - Taller, eased transition: brown melts into gold while the side frame turns from
     gold into deep violet over the same stretch.
   - A soft inner shadow along the frame on all three pieces, so the margins read as a
     continuous bevelled frame instead of flat stripes. */
:root{--team-frame:14px;}
.team-top,.team-bottom{border-left-width:var(--team-frame);border-right-width:var(--team-frame);}
.team-cut::before,.team-cut::after{display:none;}
.team-cut{height:clamp(120px,11vw,170px);
  border-left:var(--team-frame) solid var(--gold);border-right:var(--team-frame) solid var(--gold);
  border-image:linear-gradient(180deg,
    var(--gold) 0%,
    var(--gold) 12%,
    color-mix(in srgb,var(--gold) 78%,var(--violet-deep)) 35%,
    color-mix(in srgb,var(--gold) 40%,var(--violet-deep)) 58%,
    color-mix(in srgb,var(--gold) 12%,var(--violet-deep)) 80%,
    var(--violet-deep) 94%,
    var(--violet-deep) 100%) 1;
  background:var(--team-shade),linear-gradient(180deg,
    #3d2317 0%,
    color-mix(in srgb,#3d2317 94%,var(--gold)) 14%,
    color-mix(in srgb,#3d2317 75%,var(--gold)) 32%,
    color-mix(in srgb,#3d2317 48%,var(--gold)) 50%,
    color-mix(in srgb,#3d2317 22%,var(--gold)) 68%,
    color-mix(in srgb,#3d2317 6%,var(--gold)) 84%,
    var(--gold) 94%,var(--gold) 100%);}
/* (drawn as a background layer, not a box-shadow, so no dark seam appears where the pieces meet) */
:root{--team-shade:linear-gradient(90deg,rgba(0,0,0,.38),rgba(0,0,0,0) 16px,rgba(0,0,0,0) calc(100% - 16px),rgba(0,0,0,.38));}
.team-top{background:var(--team-shade),linear-gradient(180deg,var(--violet-deep) 0%,#2A0F45 55%,#3d2317 100%);}
.team-bottom{background:var(--team-shade),var(--gold);}
@media (max-width:900px){:root{--team-frame:8px;} .team-cut{height:96px;}}

/* Slim top bar (desktop): logo circle, links and KICKSTARTER share the bar's centre line
   (35px of 70px), the KICKSTARTER box sits as far from the right edge as the logo from the
   left (14px), and its word sits in the middle of its box. */
@media (min-width:901px){
  .mark-logo{top:max(calc(35px - var(--logo) / 2),calc((var(--top-h) - var(--logo)) / 2));}
  .mark-ks{top:max(16.5px,calc(var(--top-h) / 2 - 34px));right:max(14px,calc(var(--gutter) * (1 - var(--p))));}
  .is-collapsed .mark-ks{padding:10.75px 14px 7.25px;}
  .mini-nav a{padding:10px 14px 6px;}
}