/* ==========================================================================
   LeaderX Engage Mitsubishi 2026 — "ROADBOOK"
   Design system. Author: Hans Werner / Oráculo.
   ========================================================================== */

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

/* ---------- Tokens ---------- */
:root{
  --ink:#050505;
  --ink-1:#0a0a0b;
  --ink-2:#101013;
  --ink-3:#17171b;
  --line:rgba(255,255,255,.085);
  --line-2:rgba(255,255,255,.16);

  --gold:#D4AF37;
  --gold-hi:#F2DC93;
  --gold-dim:rgba(212,175,55,.14);
  --red:#E60012;
  --red-dim:rgba(230,0,18,.15);
  --paper:#EDEAE3;

  --text:#EDEDEA;
  --muted:#93938c;
  --faint:#5c5c58;

  --f-display:'Barlow Condensed','Bahnschrift','DIN Alternate','Arial Narrow',sans-serif;
  /* Inter Tight: mesma familia de texto do LeaderX Talks, tracking natural
     mais fechado, que compensa o ganho optico de peso do claro sobre preto */
  --f-body:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --pad:clamp(1.25rem,4.5vw,5.5rem);
  --maxw:1440px;
  --rail:clamp(0px,3.2vw,54px);

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.65,.05,.36,1);
  --e-snap:cubic-bezier(.2,.9,.2,1);

  --grain:.055;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--ink);color:var(--text);
  font-family:var(--f-body);font-weight:400;font-size:clamp(1rem,.35vw + .88rem,1.075rem);
  line-height:1.65;letter-spacing:-.006em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;text-rendering:optimizeLegibility;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
::selection{background:var(--gold);color:#000}

/* ---------- Utility ---------- */
.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mono{font-family:var(--f-mono);font-size:1rem;letter-spacing:0.099em;text-transform:uppercase;font-weight:500}
.gold{color:var(--gold)}
.stack > * + *{margin-top:var(--gap,1rem)}

/* ---------- Global texture layers ---------- */
.grain{
  position:fixed;inset:-150%;z-index:9000;pointer-events:none;
  opacity:var(--grain);mix-blend-mode:overlay;
  background-image:var(--grain-url);background-size:180px 180px;
  animation:grainshift 7s steps(6) infinite;will-change:transform;
}
@keyframes grainshift{
  0%{transform:translate(0,0)}   16%{transform:translate(-3%,-5%)}
  33%{transform:translate(-8%,3%)} 50%{transform:translate(4%,-8%)}
  66%{transform:translate(-5%,6%)} 83%{transform:translate(6%,2%)}
  100%{transform:translate(0,0)}
}
.vignette{
  position:fixed;inset:0;z-index:8000;pointer-events:none;
  background:radial-gradient(125% 90% at 50% 42%,transparent 42%,rgba(0,0,0,.55) 100%);
}
/* topographic contour texture, generated in CSS */
.topo{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:
    repeating-radial-gradient(ellipse 62% 34% at 22% 18%,transparent 0 24px,rgba(212,175,55,.055) 24px 25px),
    repeating-radial-gradient(ellipse 48% 66% at 82% 74%,transparent 0 30px,rgba(255,255,255,.032) 30px 31px);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent);
}
.hairgrid{
  position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(90deg,var(--line) 1px,transparent 1px),
    linear-gradient(180deg,var(--line) 1px,transparent 1px);
  background-size:clamp(60px,8vw,120px) clamp(60px,8vw,120px);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000,transparent 72%);
          mask-image:radial-gradient(120% 80% at 50% 0%,#000,transparent 72%);
}

/* ---------- Typography primitives ---------- */
.eyebrow{
  font-family:var(--f-mono);font-size:1rem;font-weight:600;
  letter-spacing:0.165em;text-transform:uppercase;color:var(--gold);
  display:flex;align-items:center;gap:.75rem;
}
.eyebrow::before{
  content:"";width:clamp(18px,3vw,44px);height:1px;background:currentColor;opacity:.55;flex:none;
}
.h-xl{
  font-family:var(--f-display);
  font-size:clamp(3rem,10.5vw,9.6rem);font-weight:800;
  line-height:.84;letter-spacing:-.012em;text-transform:uppercase;
}
.h-lg{
  font-family:var(--f-display);
  font-size:clamp(2.35rem,6.4vw,5.6rem);font-weight:800;
  line-height:.9;letter-spacing:-.008em;text-transform:uppercase;
}
.h-md{
  font-family:var(--f-display);
  font-size:clamp(1.55rem,2.9vw,2.6rem);font-weight:700;
  line-height:1.04;letter-spacing:0;text-transform:uppercase;
}
.h-sm{font-family:var(--f-display);font-size:clamp(1.2rem,1.7vw,1.5rem);font-weight:700;line-height:1.15;letter-spacing:0.06em;text-transform:uppercase}
.lede{
  font-size:clamp(1.02rem,.75vw + .88rem,1.32rem);line-height:1.62;color:#c9c9c3;
  font-weight:350;max-width:64ch;
}
p.body{color:#a8a8a2;font-weight:350;max-width:68ch}

/* ---------- Section chrome ---------- */
.sect{position:relative;padding-block:clamp(5rem,11vw,10.5rem)}
.sect--tight{padding-block:clamp(3.5rem,7vw,6.5rem)}
.sect > .shell{position:relative;z-index:2}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line-2) 12%,var(--line-2) 88%,transparent);border:0}

/* section index marker, top-left of each section */
.sect-tag{
  position:absolute;top:clamp(1.6rem,4vw,3rem);left:var(--pad);z-index:3;
  display:flex;align-items:baseline;gap:.6rem;color:var(--faint);
  font-family:var(--f-mono);font-size:1rem;letter-spacing:0.121em;text-transform:uppercase;
}
.sect-tag b{color:var(--gold);font-weight:700}

/* grain source */
:root{ --grain-url:url("../img/grain.png"); }

/* ==========================================================================
   REVEAL ENGINE
   ========================================================================== */
.js [data-rv]{opacity:0;will-change:opacity,transform}
.js [data-rv="up"]{transform:translate3d(0,34px,0)}
.js [data-rv="fade"]{transform:none}
.js [data-rv="left"]{transform:translate3d(-30px,0,0)}
.js [data-rv="right"]{transform:translate3d(30px,0,0)}
.js [data-rv="scale"]{transform:scale(.94)}
[data-rv].in{
  opacity:1;transform:none;
  transition:opacity .9s var(--e-out),transform 1.05s var(--e-out);
  transition-delay:var(--d,0ms);
}
/* Clip the media, never the observed box: clip-path on the observed element
   collapses its intersectionRect to 0, so the observer never fires for it. */
.js .wipe img{clip-path:inset(0 0 100% 0);will-change:clip-path}
.wipe.in img{clip-path:inset(0 0 0 0);transition:clip-path 1.15s var(--e-out) var(--d,0ms)}
.js .wipe .frame__cap{opacity:0}
.wipe.in .frame__cap{opacity:1;transition:opacity .7s var(--e-out) calc(var(--d,0ms) + .45s)}

/* char-split headline */
.split{display:inline-block}
.split .ln{display:block;overflow:hidden;padding-bottom:.04em}
.split .wd{display:inline-block;white-space:nowrap}
.js .split .ch{
  display:inline-block;transform:translate3d(0,105%,0) rotate(4deg);
  opacity:0;will-change:transform,opacity;
}
.split.in .ch{
  transform:none;opacity:1;
  transition:transform .92s var(--e-out),opacity .5s linear;
  transition-delay:calc(var(--i) * 26ms + var(--d,0ms));
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  --bg:var(--gold);--fg:#0a0a08;
  position:relative;display:inline-flex;align-items:center;gap:.85rem;
  padding:1.05rem 1.7rem;border-radius:2px;overflow:hidden;isolation:isolate;
  font-family:var(--f-mono);font-size:1rem;font-weight:700;letter-spacing:0.088em;text-transform:uppercase;
  color:var(--fg);background:var(--bg);
  transition:color .45s var(--e-out),transform .5s var(--e-snap);
}
.btn::after{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translate3d(0,101%,0);transition:transform .55s var(--e-out);
}
.btn:hover{color:var(--gold)}
.btn:hover::after{transform:none}
.btn .ar{transition:transform .5s var(--e-out)}
.btn:hover .ar{transform:translateX(5px)}
.btn--ghost{--bg:transparent;--fg:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn--ghost::after{background:var(--gold)}
.btn--ghost:hover{color:#0a0a08}
.btn--red{--bg:var(--red);--fg:#fff}
.btn--sm{padding:.72rem 1.1rem;font-size:1rem}
.btn--lg{padding:1.3rem 2.4rem;font-size:1rem}
.mag{display:inline-block;will-change:transform}

.tlink{
  position:relative;display:inline-block;color:var(--gold);
  font-family:var(--f-mono);font-size:1rem;letter-spacing:0.077em;text-transform:uppercase;font-weight:600;
}
.tlink::after{
  content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--e-out);
}
.tlink:hover::after{transform:scaleX(1);transform-origin:left}

/* ==========================================================================
   CURSOR
   ========================================================================== */
.cursor,.cursor-dot{
  position:fixed;top:0;left:0;z-index:9500;pointer-events:none;
  mix-blend-mode:difference;opacity:0;transition:opacity .3s;
}
.cursor{
  width:38px;height:38px;margin:-19px 0 0 -19px;
  border:1px solid rgba(255,255,255,.85);border-radius:50%;
  transition:width .35s var(--e-out),height .35s var(--e-out),margin .35s var(--e-out),opacity .3s,background .35s;
}
.cursor::before,.cursor::after{content:"";position:absolute;background:rgba(255,255,255,.85);left:50%;width:1px;height:6px;transform:translateX(-50%)}
.cursor::before{top:-6px}
.cursor::after{bottom:-6px}
.cursor-dot{width:4px;height:4px;margin:-2px 0 0 -2px;background:#fff;border-radius:50%}
body.has-cursor .cursor,body.has-cursor .cursor-dot{opacity:1}
body.cur-hot .cursor{width:74px;height:74px;margin:-37px 0 0 -37px;background:rgba(255,255,255,.14)}
body.cur-hot .cursor-dot{opacity:0}

/* ==========================================================================
   BOOT / IGNITION
   ========================================================================== */
.boot{display:none}
.js .boot{
  position:fixed;inset:0;z-index:9800;background:var(--ink);
  display:grid;place-items:center;transition:opacity .7s var(--e-out),visibility .7s;
}
.boot.done{opacity:0;visibility:hidden;pointer-events:none}
.boot__in{text-align:center;width:min(88vw,420px)}
.boot__num{
  font-family:var(--f-mono);font-size:clamp(2.6rem,9vw,4.6rem);font-weight:800;
  color:var(--gold);letter-spacing:0.06em;line-height:1;font-variant-numeric:tabular-nums;
}
.boot__lbl{margin-top:.9rem;color:var(--faint);font-family:var(--f-mono);font-size:1rem;letter-spacing:0.187em;text-transform:uppercase}
.boot__bar{margin-top:1.5rem;height:1px;background:var(--line-2);position:relative;overflow:hidden}
.boot__bar i{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left}

/* ==========================================================================
   HEADER + NAV
   ========================================================================== */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:900;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(.8rem,1.6vw,1.3rem) var(--pad);
  transition:transform .55s var(--e-out),background .5s,backdrop-filter .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
.hdr.stuck{
  background:rgba(5,5,5,.7);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);border-bottom-color:var(--line);
}
.hdr.hide{transform:translate3d(0,-115%,0)}
.hdr__logo{display:flex;align-items:center;gap:.8rem}
.hdr__logo img{height:clamp(20px,2.3vw,27px);width:auto}
.hdr__x{width:1px;height:20px;background:var(--line-2)}
.hdr__ed{font-family:var(--f-mono);font-size:1rem;letter-spacing:0.099em;text-transform:uppercase;color:var(--muted);line-height:1.4}
.hdr__ed b{display:block;color:var(--gold);font-weight:700}
.hdr__nav{display:none;gap:clamp(.9rem,1.9vw,1.9rem);align-items:center}
@media (min-width:1120px){.hdr__nav{display:flex}}
.hdr__nav a{
  position:relative;font-family:var(--f-mono);font-size:1rem;letter-spacing:0.077em;
  text-transform:uppercase;color:var(--muted);transition:color .35s;padding-block:.3rem;white-space:nowrap;
}
.hdr__nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:right;transition:transform .45s var(--e-out);
}
.hdr__nav a:hover,.hdr__nav a.on{color:var(--text)}
.hdr__nav a:hover::after,.hdr__nav a.on::after{transform:scaleX(1);transform-origin:left}
.hdr__end{display:flex;align-items:center;gap:.6rem}
.hdr__cta{display:none}
@media (min-width:760px){.hdr__cta{display:inline-flex}}

.burger{display:grid;place-items:center;width:42px;height:42px;position:relative;z-index:2}
@media (min-width:1120px){.burger{display:none}}
.burger i{display:block;width:22px;height:1.5px;background:var(--text);transition:transform .45s var(--e-out),opacity .3s}
.burger i + i{margin-top:6px}
body.menu-open .burger i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:880;background:var(--ink-1);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--pad) 3rem;overflow-y:auto;
  clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--e-out);
}
body.menu-open .drawer{clip-path:inset(0 0 0 0)}
.drawer nav a{
  display:flex;align-items:baseline;gap:1rem;padding:.42rem 0;
  font-family:var(--f-display);font-size:clamp(1.7rem,7.4vw,2.9rem);font-weight:800;
  text-transform:uppercase;letter-spacing:0;line-height:1.1;
  opacity:0;transform:translateY(24px);transition:opacity .6s var(--e-out),transform .6s var(--e-out),color .3s;
}
body.menu-open .drawer nav a{opacity:1;transform:none;transition-delay:calc(var(--i)*55ms + 180ms)}
.drawer nav a:hover{color:var(--gold)}
.drawer nav a span{font-family:var(--f-mono);font-size:1rem;color:var(--gold);letter-spacing:0.11em;flex:none;font-weight:600}
.drawer__foot{margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}

/* scroll progress line */
.prog{position:fixed;top:0;left:0;height:2px;z-index:950;background:var(--gold);width:0;box-shadow:0 0 12px rgba(212,175,55,.7)}

/* ==========================================================================
   ROADBOOK RAIL (fixed side instrument)
   ========================================================================== */
.rail{
  position:fixed;right:calc(var(--pad) * .42);top:50%;transform:translateY(-50%);
  z-index:850;display:none;flex-direction:column;align-items:center;gap:.9rem;
  pointer-events:none;
}
@media (min-width:1240px){.rail{display:flex}}
.rail__hd{
  font-family:var(--f-mono);font-size:1rem;letter-spacing:0.132em;text-transform:uppercase;
  color:var(--faint);writing-mode:vertical-rl;
}
.rail__track{position:relative;width:1px;height:min(46vh,340px);background:var(--line-2)}
.rail__fill{position:absolute;top:0;left:0;width:100%;height:0;background:var(--gold);box-shadow:0 0 10px rgba(212,175,55,.8)}
.rail__cur{
  position:absolute;left:50%;top:0;width:7px;height:7px;margin-left:-3.5px;margin-top:-3.5px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.16);
}
.rail__km{
  font-family:var(--f-mono);font-size:1rem;font-weight:700;color:var(--gold);
  font-variant-numeric:tabular-nums;letter-spacing:0.06em;
}
.rail__km small{display:block;color:var(--faint);font-size:1rem;letter-spacing:0.11em;font-weight:500;text-align:center;margin-top:.15rem}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate;text-align:center}
.hero__media{position:absolute;inset:0;z-index:-3;overflow:hidden}
.hero__video{
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
  transform:scale(1.06);
  filter:contrast(1.1) saturate(.92) brightness(.9);
}
@media (min-width:900px){.hero__video{object-position:center 60%}}
.hero__scrim{
  position:absolute;inset:0;z-index:-2;
  background:
    /* corner wash: sits over the generator's mark in the lower right */
    radial-gradient(46% 34% at 89% 87%,rgba(5,5,5,.9) 0%,rgba(5,5,5,.55) 45%,transparent 72%),
    radial-gradient(58% 42% at 50% 44%,rgba(5,5,5,.78) 0%,rgba(5,5,5,.34) 55%,transparent 78%),
    linear-gradient(180deg,
      rgba(5,5,5,.82) 0%,
      transparent 24%,
      transparent 54%,
      rgba(5,5,5,.5) 74%,
      rgba(5,5,5,.9) 90%,
      var(--ink) 100%);
}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;opacity:.5;pointer-events:none}
/* wireframe ground plane receding to the horizon */
.hero__floor{
  position:absolute;left:0;right:0;bottom:0;width:100%;
  height:clamp(180px,34vh,380px);z-index:2;pointer-events:none;opacity:.85;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 42%);
          mask-image:linear-gradient(180deg,transparent,#000 42%);
}
/* stacked ridgeline relief, used as a section backdrop */
.relief{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-position:center;
  -webkit-mask-image:radial-gradient(115% 80% at 50% 45%,#000 22%,transparent 74%);
          mask-image:radial-gradient(115% 80% at 50% 45%,#000 22%,transparent 74%);
}
/* the relief is canvas-drawn (see initRelief); these are the mask envelopes */
.relief--ridge{opacity:.15}
.relief--iso{opacity:.4}

.hero__body{position:relative;z-index:3;padding:clamp(4.5rem,9vh,7rem) var(--pad) clamp(5rem,11vh,8rem);display:flex;flex-direction:column;align-items:center;width:100%}
.hero__kicker{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.7rem .9rem;margin-bottom:clamp(1.3rem,3vw,2.2rem)}
.chip{
  display:inline-flex;align-items:center;gap:.55rem;padding:.45rem .8rem;
  border:1px solid var(--line-2);border-radius:100px;
  font-family:var(--f-mono);font-size:1rem;letter-spacing:0.088em;text-transform:uppercase;color:#cfcfc9;
  background:rgba(255,255,255,.03);backdrop-filter:blur(6px);
}
.chip b{color:var(--gold);font-weight:700}
.chip--live::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 0 rgba(230,0,18,.6);animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(230,0,18,.55)}
  70%{box-shadow:0 0 0 9px rgba(230,0,18,0)}
  100%{box-shadow:0 0 0 0 rgba(230,0,18,0)}
}

.hero__title{margin:0;display:flex;flex-direction:column;align-items:center;width:100%}
/* the year, flanked by rules */
.hero__title .l3{
  display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,2.4vw,2rem);
  width:min(100%,760px);margin-top:clamp(.5rem,1.4vw,1rem);
}
.hero__title .l3 i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.8}
.hero__title .l3 b{
  font-family:var(--f-mono);font-weight:800;color:var(--gold);
  font-size:clamp(1.2rem,3.4vw,2.6rem);letter-spacing:0.121em;line-height:1;
  text-shadow:0 0 34px rgba(212,175,55,.35);
}
.hero__title .l1{
  display:block;font-family:var(--f-display);font-size:clamp(1.05rem,2.4vw,1.7rem);font-weight:600;
  letter-spacing:0.198em;text-transform:uppercase;color:var(--muted);margin-bottom:.5em;
}
.hero__title .l2{
  display:block;font-family:var(--f-display);font-size:clamp(3.4rem,15vw,14.5rem);font-weight:800;
  line-height:.82;letter-spacing:-.015em;text-transform:uppercase;
  /* solid fill: background-clip:text breaks once the split spans get their
     own layers from transform/will-change, which blanked the whole word */
  color:#fff;text-shadow:0 2px 40px rgba(0,0,0,.55),0 0 90px rgba(0,0,0,.4);
}
.hero__sub{
  margin-top:clamp(1.1rem,2.4vw,1.9rem);max-width:46ch;margin-inline:auto;
  font-size:clamp(1rem,1vw + .8rem,1.4rem);line-height:1.45;font-weight:350;color:#d3d3cd;
}
.hero__sub b{color:#fff;font-weight:700}

.hero__acts{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;margin-top:clamp(1.6rem,3.2vw,2.6rem)}

/* HUD corners */
.hud{
  position:absolute;z-index:3;font-family:var(--f-mono);font-size:1rem;
  letter-spacing:0.11em;text-transform:uppercase;color:var(--faint);line-height:1.7;
  display:none;
}
@media (min-width:900px){.hud{display:block}}
.hud b{display:block;color:var(--gold);font-weight:700;font-size:1rem;letter-spacing:0.06em}
.hud--tr{top:calc(clamp(.8rem,1.6vw,1.3rem) + 62px);right:var(--pad);text-align:right}
.hud--bl{bottom:clamp(1.6rem,3.4vw,2.6rem);left:auto;right:var(--pad);text-align:right}

/* scroll cue */
.cue{
  position:absolute;left:50%;bottom:clamp(2.6rem,5vw,3.6rem);transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  font-family:var(--f-mono);font-size:1rem;letter-spacing:0.143em;text-transform:uppercase;color:var(--faint);
}
.cue i{display:block;width:1px;height:38px;background:linear-gradient(180deg,var(--gold),transparent);position:relative;overflow:hidden}
.cue i::after{content:"";position:absolute;inset:0;background:var(--gold);animation:cuerun 2.1s var(--e-io) infinite}
@keyframes cuerun{0%{transform:translateY(-100%)}55%,100%{transform:translateY(100%)}}

/* marquee strip */
.marq{
  position:relative;overflow:hidden;border-block:1px solid var(--line);
  background:rgba(255,255,255,.015);padding-block:.75rem;
}
.marq__t{display:flex;width:max-content;animation:marq 38s linear infinite;will-change:transform}
.marq:hover .marq__t{animation-play-state:paused}
@keyframes marq{to{transform:translate3d(-50%,0,0)}}
.marq__t span{
  display:inline-flex;align-items:center;gap:1.5rem;padding-inline:1.5rem;flex:none;
  font-family:var(--f-mono);font-size:1rem;letter-spacing:0.121em;text-transform:uppercase;color:var(--muted);
}
.marq__t span::after{content:"";width:5px;height:5px;background:var(--gold);border-radius:50%;flex:none;opacity:.8}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */
.grid{display:grid;gap:clamp(1.5rem,3.4vw,3.4rem)}
.g-2{grid-template-columns:1fr}
@media (min-width:1100px){.g-2{grid-template-columns:repeat(2,1fr)}}
.g-2-alt{grid-template-columns:1fr}
@media (min-width:1100px){.g-2-alt{grid-template-columns:.92fr 1.08fr;align-items:center}}
.head{max-width:70ch;--gap:1.15rem}
.head--wide{max-width:none}

/* media frames */
.frame{position:relative;overflow:hidden;background:var(--ink-2);border:1px solid var(--line)}
.frame img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-out),filter .8s}
.frame:hover img{transform:scale(1.05)}
.frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,transparent 34%,rgba(5,5,5,.5) 66%,rgba(5,5,5,.93) 100%),
    linear-gradient(285deg,rgba(5,5,5,.62) 0%,transparent 46%);
}
.frame__cap{
  position:absolute;left:0;bottom:0;z-index:2;padding:1rem 1.15rem;
  text-shadow:0 1px 12px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.8);
  font-family:var(--f-mono);font-size:1rem;letter-spacing:0.11em;text-transform:uppercase;color:#d7d7d1;
}
.frame__cap b{color:var(--gold)}
.ar-4-3{aspect-ratio:4/3}
.ar-3-2{aspect-ratio:3/2}
.ar-1-1{aspect-ratio:1/1}
.ar-4-5{aspect-ratio:4/5}
.ar-16-9{aspect-ratio:16/9}

/* blur-up loading */
.blurup{filter:blur(18px);transform:scale(1.06);opacity:.55}
.blurup.ok{filter:none;transform:none;opacity:1;transition:filter .9s var(--e-out),transform 1.1s var(--e-out),opacity .5s}

/* corner ticks */
.ticks::before,.ticks::after{
  content:"";position:absolute;width:14px;height:14px;pointer-events:none;z-index:3;
  border-color:var(--gold);opacity:.8;
}
.ticks::before{top:9px;left:9px;border-top:1px solid;border-left:1px solid}
.ticks::after{bottom:9px;right:9px;border-bottom:1px solid;border-right:1px solid}

/* ==========================================================================
   FACT STRIP
   ========================================================================== */
.facts{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (min-width:820px){.facts{grid-template-columns:repeat(4,1fr)}}
.fact{background:var(--ink);padding:clamp(1.4rem,3vw,2.4rem) clamp(1rem,2vw,1.6rem);position:relative;overflow:hidden}
.fact::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .9s var(--e-out) var(--d,0ms);
}
.fact.in::before{transform:scaleX(1)}
.fact__n{
  font-family:var(--f-mono);font-size:clamp(1.9rem,4.4vw,3.1rem);font-weight:800;color:var(--text);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.fact__n em{font-style:normal;color:var(--gold);font-size:.5em;vertical-align:super;margin-left:.1em}
.fact__l{margin-top:.7rem;font-family:var(--f-mono);font-size:1rem;letter-spacing:0.11em;text-transform:uppercase;color:var(--muted);line-height:1.6}

/* ==========================================================================
   PILLARS (cenário / relações / legado)
   ========================================================================== */
.pillar{position:relative;padding-block:clamp(2.6rem,6vw,5rem)}
.pillar + .pillar{border-top:1px solid var(--line)}
.pillar__idx{
  font-family:var(--f-mono);font-size:1rem;letter-spacing:0.132em;color:var(--gold);
  font-weight:700;margin-bottom:1rem;display:block;
}
.pillar .frame{box-shadow:0 30px 90px -50px rgba(0,0,0,.9)}
@media (min-width:1100px){.pillar--flip .pillar__media{order:-1}}

/* ==========================================================================
   ROADBOOK (programação)
   ========================================================================== */
.rb{position:relative}
.rb__route{width:100%;height:auto;overflow:visible}
.rb__route .trail{fill:none;stroke:var(--line-2);stroke-width:1.5;stroke-dasharray:4 5}
.rb__route .path{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(212,175,55,.55))}
.rb__route .ridge{fill:url(#ridgeGrad);opacity:.35}
.rb__route .wp{fill:var(--ink);stroke:var(--gold);stroke-width:2}
.rb__route .wp-hot{fill:var(--red);stroke:none}
.rb__route text{font-family:var(--f-mono);font-size:16px;letter-spacing:0.077em;text-transform:uppercase;fill:var(--muted)}

.days{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:clamp(2rem,4vw,3.4rem)}
@media (min-width:980px){.days{grid-template-columns:repeat(4,1fr)}}
.day{
  background:var(--ink);padding:clamp(1.5rem,2.6vw,2.2rem);position:relative;overflow:hidden;
  transition:background .5s var(--e-out);
}
.day:hover{background:var(--ink-2)}
.day::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s;
  background:radial-gradient(120% 70% at 50% 0%,rgba(212,175,55,.1),transparent 65%);
}
.day:hover::before{opacity:1}
.day__tag{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.1rem}
.day__no{font-family:var(--f-mono);font-size:1rem;letter-spacing:0.121em;text-transform:uppercase;color:var(--gold);font-weight:700}
.day__ico{width:34px;height:34px;flex:none;color:var(--gold)}
.day__ttl{font-family:var(--f-display);font-size:clamp(1.4rem,2vw,1.75rem);font-weight:800;text-transform:uppercase;letter-spacing:0.06em;line-height:1.05}
.day__ttl small{display:block;font-size:1rem;font-family:var(--f-mono);font-weight:500;letter-spacing:0.11em;color:var(--muted);text-transform:uppercase;margin-top:.4rem;}
.day__list{margin-top:1.3rem;display:flex;flex-direction:column;gap:1rem}
.day__item{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.day__t{
  font-family:var(--f-mono);font-size:1rem;font-weight:700;color:var(--gold);
  letter-spacing:0.06em;padding-top:.18em;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.day__t.free{color:var(--faint)}
.day__d{font-size:1rem;line-height:1.55;color:#a9a9a3;font-weight:350}
.day__d b{display:block;color:var(--text);font-weight:700;font-size:1rem;margin-bottom:.15rem}

/* ==========================================================================
   PEOPLE
   ========================================================================== */
.people{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.7rem,1.5vw,1.3rem)}
@media (min-width:700px){.people{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.people{grid-template-columns:repeat(4,1fr)}}
.pc{position:relative;display:block;overflow:hidden;background:var(--ink-2);border:1px solid var(--line);will-change:transform}
.pc__ph{aspect-ratio:4/5;overflow:hidden;position:relative}
.pc__ph img{
  width:100%;height:100%;object-fit:cover;object-position:center 18%;
  filter:grayscale(1) contrast(1.2) brightness(.82);
  transition:filter .7s var(--e-out),transform 1.1s var(--e-out);
}
.pc:hover .pc__ph img{filter:grayscale(0) contrast(1.04) brightness(1);transform:scale(1.06)}
.pc__ph::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(5,5,5,.92));
  opacity:.9;transition:opacity .6s;
}
.pc__tint{
  position:absolute;inset:0;background:var(--gold);mix-blend-mode:color;
  opacity:.42;transition:opacity .7s var(--e-out);pointer-events:none;
}
.pc:hover .pc__tint{opacity:0}
.pc__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(.85rem,1.5vw,1.2rem)}
.pc__nm{font-family:var(--f-display);font-size:clamp(1.05rem,1.35vw,1.3rem);font-weight:700;line-height:1.1;letter-spacing:0.06em;text-transform:uppercase}
.pc__rl{margin-top:.3rem;font-size:1rem;color:#a2a29c;line-height:1.4;font-weight:350}
.pc__amb{
  display:inline-block;margin-top:.5rem;padding:.2rem .5rem;border:1px solid var(--gold-dim);
  font-family:var(--f-mono);font-size:1rem;letter-spacing:0.099em;text-transform:uppercase;color:var(--gold);
  background:rgba(212,175,55,.07);
}
.pc__in{
  position:absolute;top:.7rem;right:.7rem;z-index:3;width:30px;height:30px;
  display:grid;place-items:center;border:1px solid var(--line-2);background:rgba(5,5,5,.5);
  backdrop-filter:blur(6px);color:#fff;opacity:0;transform:translateY(-6px);
  transition:opacity .45s var(--e-out),transform .45s var(--e-out),background .3s,color .3s;
}
.pc:hover .pc__in{opacity:1;transform:none}
.pc__in:hover{background:var(--gold);color:#000}
.pc__in svg{width:13px;height:13px}

/* chef cards */
.chefs{display:grid;gap:clamp(1rem,2vw,1.6rem);grid-template-columns:1fr}
@media (min-width:700px){.chefs{grid-template-columns:repeat(2,1fr)}}
.chef{
  position:relative;display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2vw,1.5rem);
  align-items:center;padding:clamp(1rem,2vw,1.5rem);
  border:1px solid var(--line);background:var(--ink-1);transition:border-color .5s,background .5s;
}
.chef:hover{border-color:var(--gold-dim);background:var(--ink-2)}
.chef__ph{width:clamp(84px,11vw,124px);aspect-ratio:4/5;overflow:hidden;flex:none;background:var(--ink-3)}
.chef__ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1);transition:filter .7s}
.chef:hover .chef__ph img{filter:grayscale(0)}

/* ==========================================================================
   MODAL
   ========================================================================== */
dialog.modal{
  width:min(94vw,720px);max-height:88svh;padding:0;border:1px solid var(--line-2);
  background:var(--ink-1);color:var(--text);overflow:auto;
  opacity:0;transform:translateY(24px) scale(.98);
  transition:opacity .5s var(--e-out),transform .5s var(--e-out),overlay .5s allow-discrete,display .5s allow-discrete;
}
dialog.modal[open]{opacity:1;transform:none}
@starting-style{dialog.modal[open]{opacity:0;transform:translateY(24px) scale(.98)}}
dialog.modal::backdrop{background:rgba(2,2,2,.8);backdrop-filter:blur(9px);opacity:0;transition:opacity .5s,overlay .5s allow-discrete,display .5s allow-discrete}
dialog.modal[open]::backdrop{opacity:1}
@starting-style{dialog.modal[open]::backdrop{opacity:0}}
.modal__hd{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.4rem;background:var(--ink-1);border-bottom:1px solid var(--line)}
.modal__bd{padding:1.6rem 1.4rem 2rem;display:flex;flex-direction:column;gap:1rem}
.modal__bd p{color:#a8a8a2;font-weight:350;font-size:1rem;line-height:1.7}
.modal__x{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line-2);transition:background .3s,color .3s}
.modal__x:hover{background:var(--gold);color:#000}

/* ==========================================================================
   EDITIONS / CÍRCULO DE CONFIANÇA
   ========================================================================== */
.tabs{display:flex;flex-wrap:wrap;gap:.5rem;border-bottom:1px solid var(--line);padding-bottom:1.3rem}
.tab{
  position:relative;padding:.62rem 1.05rem;border:1px solid var(--line);
  font-family:var(--f-mono);font-size:1rem;letter-spacing:0.077em;text-transform:uppercase;
  color:var(--muted);font-weight:600;transition:color .35s,border-color .35s,background .35s;
}
.tab:hover{color:var(--text);border-color:var(--line-2)}
.tab[aria-selected="true"]{background:var(--gold);color:#0a0a08;border-color:var(--gold)}
.roster{margin-top:clamp(1.6rem,3vw,2.4rem);columns:1;column-gap:clamp(1.6rem,4vw,4rem)}
@media (min-width:760px){.roster{columns:2}}
.roster li{
  break-inside:avoid;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:.2rem 1rem;padding:.72rem 0;border-bottom:1px solid var(--line);
}
.js .roster li{opacity:0;transform:translateY(10px)}
.roster.on li{opacity:1;transform:none;transition:opacity .5s var(--e-out),transform .5s var(--e-out);transition-delay:calc(var(--i)*22ms)}
.roster a{font-weight:700;font-size:1rem;transition:color .3s;position:relative}
.roster a:hover{color:var(--gold)}
.roster span{font-size:1rem;color:var(--muted);font-weight:350}

.strip{position:relative;overflow:hidden;padding-block:clamp(1.4rem,3vw,2.4rem)}
.strip__t{display:flex;gap:clamp(.7rem,1.5vw,1.2rem);width:max-content;will-change:transform}
.strip__t figure{position:relative;width:clamp(220px,26vw,420px);aspect-ratio:3/2;overflow:hidden;flex:none;background:var(--ink-2);border:1px solid var(--line)}
.strip__t img{width:100%;height:100%;object-fit:cover;filter:grayscale(.5) contrast(1.1) brightness(.9);transition:filter .7s}
.strip__t figure:hover img{filter:none}
.strip__t figcaption{
  position:absolute;left:.8rem;bottom:.7rem;z-index:2;
  font-family:var(--f-mono);font-size:1rem;letter-spacing:0.11em;text-transform:uppercase;color:#e2e2dc;
  text-shadow:0 1px 8px rgba(0,0,0,.9);
}

/* ==========================================================================
   COUNTDOWN
   ========================================================================== */
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);max-width:520px}
.cd__u{background:var(--ink);padding:clamp(.9rem,2vw,1.4rem) .6rem;text-align:center}
.cd__n{
  font-family:var(--f-mono);font-size:clamp(1.5rem,4vw,2.4rem);font-weight:800;color:var(--gold);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.cd__l{margin-top:.5rem;font-family:var(--f-mono);font-size:1rem;letter-spacing:0.11em;text-transform:uppercase;color:var(--faint)}

/* ==========================================================================
   STEPS + CTA
   ========================================================================== */
.steps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
@media (min-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
.step{background:var(--ink);padding:clamp(1.5rem,3vw,2.4rem);position:relative}
.step__n{
  font-family:var(--f-mono);font-size:1rem;font-weight:800;letter-spacing:0.11em;color:var(--gold);
  display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;
}
.step__n::after{content:"";flex:1;height:1px;background:var(--line)}

.cta{position:relative;overflow:hidden;text-align:center;isolation:isolate}
.cta__bg{position:absolute;inset:0;z-index:-1}
.cta__bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(.8) brightness(.3) contrast(1.2)}
.cta__bg::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 50%,rgba(5,5,5,.55),var(--ink) 88%)}
.cta .shell{display:flex;flex-direction:column;align-items:center;gap:clamp(1.1rem,2.4vw,1.9rem)}
.cta__note{font-family:var(--f-mono);font-size:1rem;letter-spacing:0.11em;text-transform:uppercase;color:var(--faint);max-width:52ch;line-height:1.9}
.cta__note a{color:var(--gold)}

/* ==========================================================================
   APP / PARTNERS / FOOTER
   ========================================================================== */
.appbox{display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:center;grid-template-columns:1fr;border:1px solid var(--line);padding:clamp(1.4rem,3vw,2.6rem);background:var(--ink-1)}
@media (min-width:820px){.appbox{grid-template-columns:1fr auto}}
.qr{width:clamp(112px,14vw,158px);padding:.7rem;background:#fff;flex:none}
.qr img{width:100%;height:auto}

.partners{display:grid;gap:clamp(1.6rem,3vw,2.6rem)}
.plogos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.6rem,4vw,3.6rem)}
.plogos a,.plogos span{display:block;flex:none}
.plogos img{
  height:clamp(24px,3.4vw,40px);width:auto;opacity:.5;
  filter:grayscale(1) brightness(1.7);transition:opacity .45s,filter .45s,transform .45s var(--e-out);
}
.plogos a:hover img{opacity:1;filter:grayscale(0) brightness(1);transform:translateY(-3px)}
.plogos--lg img{height:clamp(30px,4.6vw,54px)}

.foot{border-top:1px solid var(--line);padding-block:clamp(2.4rem,5vw,4rem) clamp(1.4rem,3vw,2rem)}
.foot__top{display:grid;gap:clamp(1.6rem,3vw,3rem);grid-template-columns:1fr}
@media (min-width:900px){.foot__top{grid-template-columns:1.2fr 1fr 1fr}}
.foot__ttl{font-family:var(--f-mono);font-size:1rem;letter-spacing:0.132em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
.foot__l{display:flex;flex-direction:column;gap:.6rem}
.foot__l a{color:var(--muted);font-size:1rem;transition:color .3s;width:fit-content;font-weight:350}
.foot__l a:hover{color:var(--gold)}
.foot__btm{
  margin-top:clamp(2rem,4vw,3.2rem);padding-top:1.4rem;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;
  font-family:var(--f-mono);font-size:1rem;letter-spacing:0.088em;text-transform:uppercase;color:var(--faint);
}
.foot__btm a{color:var(--muted);transition:color .3s}
.foot__btm a:hover{color:var(--gold)}
.socs{display:flex;gap:.5rem}
.socs a{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);transition:all .35s var(--e-out)}
.socs a:hover{background:var(--gold);color:#000;border-color:var(--gold);transform:translateY(-2px)}
.socs svg{width:15px;height:15px}

/* back to top */
.totop{
  position:fixed;right:var(--pad);bottom:clamp(1rem,2.4vw,1.8rem);z-index:870;
  width:46px;height:46px;display:grid;place-items:center;
  border:1px solid var(--line-2);background:rgba(5,5,5,.7);backdrop-filter:blur(10px);color:var(--text);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .5s var(--e-out),transform .5s var(--e-out),background .3s,color .3s;
}
.totop.on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--gold);color:#000}

/* ==========================================================================
   A11Y / MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
  [data-rv],.wipe,.wipe img,.wipe .frame__cap,.split .ch,.roster li{opacity:1 !important;transform:none !important;clip-path:none !important;filter:none !important}
  .grain,.hero__canvas,.cursor,.cursor-dot,  .hero__media img{animation:none;transform:scale(1.02)}
}
@media print{
  .hdr,.rail,.totop,.grain,.vignette,.boot,.cursor,.cursor-dot,.drawer{display:none !important}
  body{background:#fff;color:#000}
}

/* ==========================================================================
   SVG PATH DRAWING
   ========================================================================== */
.js .rb__route .path{stroke-dasharray:1;stroke-dashoffset:1}
.rb__route.drawn .path{stroke-dashoffset:0;transition:stroke-dashoffset 2.8s var(--e-out) .15s}
.js .rb__route .ridge{opacity:0;transition:opacity 1.2s var(--e-out)}
.rb__route.drawn .ridge{opacity:.35}
.js .rb__route .wps > *{opacity:0;transition:opacity .55s var(--e-out)}
.rb__route.drawn .wps > *{opacity:1}
.rb__route.drawn .wps > :nth-child(1),.rb__route.drawn .wps > :nth-child(5){transition-delay:.35s}
.rb__route.drawn .wps > :nth-child(2),.rb__route.drawn .wps > :nth-child(6){transition-delay:1.05s}
.rb__route.drawn .wps > :nth-child(3),.rb__route.drawn .wps > :nth-child(7){transition-delay:1.85s}
.rb__route.drawn .wps > :nth-child(4),.rb__route.drawn .wps > :nth-child(8){transition-delay:2.5s}
.rb__route.drawn .wp-hot{animation:hotpulse 2.4s ease-in-out 2.6s infinite}
@keyframes hotpulse{0%,100%{r:6}50%{r:8.5}}

.js .ico-draw path,.js .ico-draw circle{stroke-dasharray:1;stroke-dashoffset:1}
.day.in .ico-draw path,.day.in .ico-draw circle{stroke-dashoffset:0;transition:stroke-dashoffset 1.15s var(--e-out)}
.day.in .ico-draw > :nth-child(2){transition-delay:.14s}
.day.in .ico-draw > :nth-child(3){transition-delay:.28s}
.day.in .ico-draw > :nth-child(4){transition-delay:.42s}
.day:hover .ico-draw{color:var(--gold-hi)}

@media (prefers-reduced-motion:reduce){
  .rb__route .path{stroke-dashoffset:0}
  .rb__route .ridge,.rb__route .wps > *{opacity:1}
  .ico-draw path,.ico-draw circle{stroke-dashoffset:0}
  .marq__t,.strip__t{animation:none;transform:none}
}

/* ==========================================================================
   RUGGED BORDERS + MUD  (offroad section transitions)
   ========================================================================== */
.rugged{
  position:absolute;left:-1px;right:-1px;z-index:4;pointer-events:none;
  height:clamp(30px,4.6vw,68px);background:var(--ink);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.rugged--top{top:-1px;-webkit-mask-image:url('../img/rugged-top.svg');mask-image:url('../img/rugged-top.svg')}
.rugged--bottom{bottom:-1px;-webkit-mask-image:url('../img/rugged-bottom.svg');mask-image:url('../img/rugged-bottom.svg')}

/* mud splatter — texture masks a warm gold/earth wash */
.mud{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.16;
  background:linear-gradient(122deg,rgba(212,175,55,.62),rgba(126,92,42,.5) 55%,rgba(230,0,18,.28));
  -webkit-mask-image:url('../img/mud-splatter.webp');mask-image:url('../img/mud-splatter.webp');
  -webkit-mask-size:cover;mask-size:cover;
  -webkit-mask-position:center;mask-position:center;
}
.mud--soft{opacity:.13}
.mud--edge{
  inset:auto 0 0 0;height:clamp(90px,14vw,220px);opacity:.2;
  -webkit-mask-image:url('../img/mud-edge.webp');mask-image:url('../img/mud-edge.webp');
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
}
.mud--top{inset:0 0 auto 0;transform:scaleY(-1)}

/* parallax drift on the mud layers */
.mud[data-mud]{will-change:transform}

/* ==========================================================================
   IMAGE BOX  — framed plate with index label + ruled caption (KIA-board style)
   ========================================================================== */
.frame{background:var(--ink-2)}
.frame__lbl{
  position:absolute;top:0;left:0;z-index:3;display:flex;align-items:center;gap:.5rem;
  padding:.55rem .8rem;background:rgba(5,5,5,.72);backdrop-filter:blur(8px);
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-size:1rem;font-weight:700;
  letter-spacing:0.11em;text-transform:uppercase;color:var(--text);
}
.frame__lbl svg{width:11px;height:11px;color:var(--gold);flex:none}
.frame__cap{
  left:auto;right:0;bottom:0;max-width:min(78%,340px);text-align:right;
  padding:.85rem 1rem;line-height:1.6;
}
.frame__cap::before{
  content:"";display:block;height:1px;margin:0 0 .5rem auto;width:clamp(28px,26%,64px);
  background:var(--gold);
}
.frame__cap b{display:block;color:var(--gold);font-weight:700;margin-bottom:.15rem}
.frame__cap span{color:#b9b9b3;font-family:var(--f-body);font-size:1rem;letter-spacing:0;text-transform:none}

/* the frame corner ticks read as measurement marks */
.ticks::before,.ticks::after{width:16px;height:16px}

/* ==========================================================================
   TYPE FLOOR — nothing on this page renders below 16px
   ========================================================================== */
html{font-size:100%}
.mono,.eyebrow,.chip,.hud,.cue,.sect-tag,.tab,.btn,.tlink,
.frame__lbl,.frame__cap,.day__no,.day__t,.foot__ttl,.cta__note,
.rail__hd,.rail__km,.step__n,.pillar__idx,.cd__l,
.fact__l,.pc__amb,.boot__lbl,.hdr__ed,.hdr__nav a,.drawer a span,
.strip__t figcaption,.foot__btm,.marq__t span{font-size:1rem}
.hud b,.rail__km{font-size:1.05rem}
.btn--lg{font-size:1.05rem}
.foot__l a,.roster a,.roster span,.pc__rl,.day__d,.modal__bd p{font-size:1rem}
.day__d b{font-size:1.05rem}
.frame__cap span{font-size:1rem}

/* the label chrome needs more room now that it is full size */
.eyebrow{gap:.85rem}
.chip{padding:.55rem 1rem;gap:.6rem}
.btn{padding:1.05rem 1.8rem;gap:.9rem}
.btn--sm{padding:.8rem 1.25rem}
.btn--lg{padding:1.25rem 2.3rem}
.tab{padding:.75rem 1.2rem}
.frame__lbl{padding:.6rem 1rem;gap:.6rem}
.frame__lbl svg{width:14px;height:14px}
.frame__cap{padding:1rem 1.15rem;max-width:min(84%,400px)}
.sect-tag{gap:.7rem}
.hdr__ed{line-height:1.3}
.cd__l{margin-top:.55rem}
.fact__l{margin-top:.8rem}

/* LeaderX mark, +70% */
.hdr__logo img{height:clamp(34px,3.9vw,46px)}
.hdr__x{height:30px}

/* ==========================================================================
   PARTNER LOGOS — +90%, centred
   ========================================================================== */
.partners{text-align:center}
.plogos{justify-content:center;gap:clamp(2rem,5vw,4.5rem)}
.plogos img{height:clamp(46px,6.5vw,76px)}
.plogos--lg img{height:clamp(57px,8.7vw,103px)}
.foot__ttl{text-align:center}

/* ==========================================================================
   MOBILE — centre everything
   ========================================================================== */
@media (max-width:759px){
  .head,.stack,.hero__body,.pillar,.day,.step,.chef,.appbox,
  .foot__top > *,.partners > *{text-align:center}
  .head,.pillar .head{margin-inline:auto}
  .lede,p.body,.hero__sub,.cta__note,.frame__cap{margin-inline:auto;text-align:center}
  .eyebrow,.pillar__idx,.step__n,.foot__ttl,.day__no{justify-content:center}
  .eyebrow::before,.step__n::after{display:none}
  .hero__acts,.hero__kicker{justify-content:center;width:100%}
  .hero__acts .btn,.cta .btn{width:100%;justify-content:center}
  .btn{justify-content:center}
  .foot__l{align-items:center}
  .socs,.tabs{justify-content:center}
  .chef{grid-template-columns:1fr;justify-items:center}
  .chef__ph{width:min(52vw,190px)}
  .appbox{justify-items:center}
  .day__item{grid-template-columns:1fr;gap:.35rem;justify-items:center}
  .day__t{padding-top:0}
  .roster li{justify-content:center;text-align:center}
  .frame__cap{left:0;right:0;max-width:none;text-align:center}
  .frame__cap::before{margin-inline:auto}
  .modal__bd p{text-align:center}
}

/* hero: on small screens the tags read better under the call to action */
@media (max-width:759px){
  .hero__kicker{order:5;margin-bottom:0;margin-top:clamp(1.5rem,5vw,2.2rem)}
  .hero__title{order:1}
  .hero__sub{order:2}
  .hero__acts{order:3}
  .chip{font-size:1rem}
}

/* ==========================================================================
   ROADBOOK ACCORDION — centred cards
   ========================================================================== */
.days{grid-template-columns:1fr}
@media (min-width:980px){.days{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1320px){.days{grid-template-columns:repeat(4,1fr)}}

.day{padding:0}
.day__sum{
  list-style:none;cursor:pointer;position:relative;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.55rem;
  padding:clamp(1.4rem,2.4vw,2rem) clamp(1.2rem,2vw,1.8rem);
  transition:background .45s var(--e-out);
}
.day__sum::-webkit-details-marker{display:none}
.day__sum::marker{content:""}
.day__sum:hover{background:rgba(212,175,55,.05)}
.day__ico-wrap{display:grid;place-items:center;margin-bottom:.3rem}
.day__ico{width:42px;height:42px}
.day__ttl{margin-top:.1rem}
.day__ttl small{margin-top:.5rem}
.day__chev{
  display:grid;place-items:center;width:30px;height:30px;margin-top:.5rem;
  border:1px solid var(--line-2);border-radius:50%;color:var(--gold);
  transition:transform .5s var(--e-out),background .35s,color .35s;
}
.day__chev svg{width:15px;height:15px}
.day[open] .day__chev{transform:rotate(180deg);background:var(--gold);color:#0a0a08}

/* body: centred rows, revealed with a height slide */
.day__list{
  margin:0;padding:0 clamp(1.2rem,2vw,1.8rem) clamp(1.4rem,2.4vw,2rem);
  display:flex;flex-direction:column;gap:1.4rem;align-items:center;text-align:center;
}
.day__item{
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  padding-top:1.2rem;border-top:1px solid var(--line);width:100%;
}
.day__t{
  padding:.3rem .85rem;border:1px solid var(--gold-dim);background:rgba(212,175,55,.07);
  border-radius:100px;white-space:nowrap;
}
.day__d{max-width:46ch}
.day__d b{margin-bottom:.3rem}

/* animate the disclosure where the browser supports it */
@supports (interpolate-size: allow-keywords){
  .day{interpolate-size:allow-keywords}
  .day::details-content{
    block-size:0;overflow:hidden;opacity:0;
    transition:block-size .6s var(--e-out),opacity .45s var(--e-out),content-visibility .6s allow-discrete;
    transition-behavior:allow-discrete;
  }
  .day[open]::details-content{block-size:auto;opacity:1}
}

/* ==========================================================================
   LIVING RELIEF — canvas replaces the static SVG backdrops
   ========================================================================== */
.relief{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;background-image:none;opacity:1;
  -webkit-mask-image:radial-gradient(118% 84% at 50% 46%,#000 20%,transparent 76%);
          mask-image:radial-gradient(118% 84% at 50% 46%,#000 20%,transparent 76%);
}
.relief--iso{
  -webkit-mask-image:radial-gradient(78% 70% at 50% 52%,#000 26%,transparent 78%);
          mask-image:radial-gradient(78% 70% at 50% 52%,#000 26%,transparent 78%);
}

/* ==========================================================================
   SECTION SEAMS — a surveyor's tick line that draws itself at each hand-off
   ========================================================================== */
.seam{
  position:relative;height:clamp(52px,7vw,96px);overflow:hidden;pointer-events:none;
  display:grid;place-items:center;
}
.seam::before{                      /* the survey line */
  content:"";position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--line-2) 15%,var(--line-2) 85%,transparent);
  transform:scaleX(0);transform-origin:center;
}
.seam.in::before{transform:scaleX(1);transition:transform 1.2s var(--e-out)}
.seam__mark{                        /* the waypoint bead that lands on it */
  position:relative;z-index:2;display:flex;align-items:center;gap:.75rem;
  padding:0 1rem;background:var(--ink);
  font-family:var(--f-mono);font-size:1rem;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
  opacity:0;transform:translateY(9px);
}
.seam.in .seam__mark{opacity:1;transform:none;transition:opacity .7s var(--e-out) .45s,transform .7s var(--e-out) .45s}
.seam__mark i{
  width:7px;height:7px;flex:none;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(212,175,55,.14);
}
.seam__mark b{color:var(--gold);font-weight:700}

/* section entry: the ground lifts slightly as each block takes over */
.js .sect > .shell,.js .facts,.js .partners{will-change:transform}

/* keep the relief canvases to a bounded band instead of whole tall sections */
.relief{
  inset:auto 0 auto 0;top:50%;height:min(100%,105vh);
  transform:translateY(-50%);
}

/* caption gets the same solid plate as the index label, so it stays legible
   over any part of the photograph */
.frame__cap{
  background:rgba(5,5,5,.78);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
          backdrop-filter:blur(10px) saturate(130%);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
  text-shadow:none;
}
.frame::after{
  background:linear-gradient(180deg,transparent 52%,rgba(5,5,5,.42) 100%);
}
/* relief needs a touch more presence now that it is canvas-drawn */
.relief--ridge{opacity:1}

/* ==========================================================================
   CARD DATA — centred across the board
   ========================================================================== */
.fact{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center}
.fact__l{max-width:22ch}
.step{display:flex;flex-direction:column;align-items:center;text-align:center}
.step__n{justify-content:center;width:100%;max-width:220px}
.step__n::after{display:none}
.step__n::before{content:"";flex:1;height:1px;background:var(--line)}
.step p.body{text-align:center;margin-inline:auto}
.cd__u{display:flex;flex-direction:column;align-items:center;justify-content:center}
.chef{text-align:center}
.chef .stack{align-items:center}
.chef .tlink{margin-inline:auto}
.appbox .stack{align-items:center;text-align:center}
.appbox > .stack > div{justify-content:center}

/* keep the roadbook intro and section heads optically centred where the
   surrounding block is centred */
.cta .head,.cta .lede{margin-inline:auto;text-align:center}
.rb .head{margin-inline:auto;text-align:center}
.rb .head .eyebrow{justify-content:center}
.rb .lede,.rb p.body{margin-inline:auto}

/* only the partner block centres its headings; footer columns stay ranged left
   on desktop and centre with everything else on small screens */
.foot .foot__ttl{text-align:left}
.partners .foot__ttl{text-align:center}
@media (max-width:759px){ .foot .foot__ttl{text-align:center} }

/* ==========================================================================
   ROUTE WAYPOINTS — legible list; the in-SVG labels distort on narrow screens
   ========================================================================== */
.wps-list{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem clamp(.6rem,2vw,1.4rem);
  margin-top:clamp(1rem,2.4vw,1.6rem);
}
.wps-list li{
  display:flex;align-items:center;gap:.5rem;padding:.5rem .95rem;
  border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:100px;
  font-family:var(--f-mono);font-size:1rem;letter-spacing:.09em;text-transform:uppercase;
}
.wps-list b{color:var(--gold);font-weight:700}
.wps-list span{color:var(--muted);font-weight:500}
.wps-list li.hot{border-color:rgba(230,0,18,.4);background:rgba(230,0,18,.07)}
.wps-list li.hot b{color:var(--red)}
.rb__cap{
  margin-top:1.1rem;text-align:center;color:var(--faint);
  font-family:var(--f-body);font-size:1rem;line-height:1.6;max-width:56ch;margin-inline:auto;
}
/* below the breakpoint the squeezed viewBox makes SVG text unreadable */
@media (max-width:900px){ .rb__route .wps text{display:none} }
@media (min-width:901px){ .wps-list{display:none} }

/* ==========================================================================
   HEADER on small screens — the enlarged mark plus 16px meta no longer fits
   on one line, so the edition strap steps aside (the hero states it anyway)
   ========================================================================== */
@media (max-width:759px){
  .hdr{padding-block:.7rem}
  .hdr__x,.hdr__ed{display:none}
  .hdr__logo img{height:38px}
  .burger{width:46px;height:46px}
}
@media (min-width:760px) and (max-width:1119px){
  .hdr__ed{font-size:1rem;line-height:1.25;max-width:15ch}
}

.cue{white-space:nowrap}
@media (max-width:400px){ .cue{letter-spacing:.08em} }

/* ==========================================================================
   ALIGNMENT PASS
   ========================================================================== */
/* copyright + credit: centred at every width */
.foot__btm{
  flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:.55rem;
}

/* the venue address block reads better centred */
.addr{text-align:center}
.addr .btnrow{justify-content:center}

/* section breadcrumbs centre on small screens */
@media (max-width:759px){
  .sect-tag{position:static;justify-content:center;margin-bottom:1.6rem;left:auto}
  .sect{padding-top:clamp(3.2rem,9vw,5rem)}
  .seam__mark{font-size:1rem;padding:0 .75rem}
  .wps-list li{font-size:1rem}
}

/* the credit in the mobile drawer should whisper, not shout */
.drawer__foot .credit{color:var(--faint);font-weight:400;letter-spacing:.06em}
.drawer__foot .credit a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.drawer__foot .credit a:hover{color:var(--gold)}

/* ==========================================================================
   ROSTER — the ridgeline fought the names, so this block gets a calm plate
   ========================================================================== */
.roster-wrap{
  position:relative;z-index:2;
  background:linear-gradient(180deg,rgba(255,255,255,.028),rgba(255,255,255,.012));
  border:1px solid var(--line);
  padding:clamp(1.4rem,3vw,2.6rem);
  backdrop-filter:blur(2px);
}
#circulo .hairgrid{opacity:.28}

/* ==========================================================================
   HERO TAG SLOT (mobile) + LONG-COPY DISCLOSURE
   ========================================================================== */
.kicker-slot:empty{display:none}
.kicker-slot{
  padding:clamp(1.4rem,5vw,2rem) var(--pad);
  border-bottom:1px solid var(--line);background:var(--ink-1);
}
.kicker-slot .hero__kicker{
  margin:0;flex-direction:column;align-items:stretch;gap:.6rem;
}
.kicker-slot .chip{
  justify-content:center;width:100%;padding:.85rem 1rem;border-radius:4px;
  background:rgba(255,255,255,.025);
}

/* progressive disclosure for the longer passages */
.more{border-top:1px solid var(--line);margin-top:1.1rem;padding-top:1.1rem}
.more > summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:1rem;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold);
}
.more > summary::-webkit-details-marker{display:none}
.more > summary::marker{content:""}
.more > summary::after{
  content:"";width:9px;height:9px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .45s var(--e-out);
}
.more[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.more > summary:hover{color:var(--gold-hi)}
.more p{margin-top:1rem}
.more .lbl-open{display:inline}
.more[open] .lbl-open{display:none}
.more .lbl-close{display:none}
.more[open] .lbl-close{display:inline}
@media (max-width:759px){ .more > summary{justify-content:center;width:100%} }
@supports (interpolate-size: allow-keywords){
  .more{interpolate-size:allow-keywords}
  .more::details-content{
    block-size:0;overflow:hidden;opacity:0;
    transition:block-size .55s var(--e-out),opacity .4s var(--e-out),content-visibility .55s allow-discrete;
    transition-behavior:allow-discrete;
  }
  .more[open]::details-content{block-size:auto;opacity:1}
}

/* ==========================================================================
   TYPE SCALE — one modular ramp, 16px base. Nothing lands between steps.
   16 · 18 · 22 · 28 · 36 · 48 · fluid display
   ========================================================================== */
:root{
  --t-100:1rem;      /* 16 — body, labels, mono, captions */
  --t-200:1.125rem;  /* 18 — lede, emphasis, large buttons */
  --t-300:1.375rem;  /* 22 — card titles */
  --t-400:1.75rem;   /* 28 — sub-heads */
  --t-500:2.25rem;   /* 36 */
}
body{font-size:var(--t-100)}
.lede{font-size:clamp(var(--t-200),.7vw + 1rem,1.375rem)}
.hero__sub{font-size:clamp(var(--t-200),1vw + .9rem,1.5rem)}
.hero__title .l1{font-size:clamp(var(--t-200),2.4vw,1.75rem)}
.btn--lg{font-size:var(--t-200)}
.pc__nm{font-size:clamp(var(--t-200),1.35vw,1.375rem)}
.h-sm{font-size:clamp(var(--t-300),1.7vw,1.5rem)}
.h-md{font-size:clamp(var(--t-400),2.9vw,2.625rem)}
.day__ttl{font-size:clamp(var(--t-300),2vw,1.75rem)}
.hud b,.rail__km,.day__d b,.frame__cap b{font-size:var(--t-100)}
.plogos .mono{font-size:var(--t-200)}
.fact__n{font-size:clamp(2.25rem,4.4vw,3.125rem)}
.cd__n{font-size:clamp(var(--t-500),4vw,2.5rem)}

.date-hero{
  font-family:var(--f-mono);font-weight:700;line-height:1.25;letter-spacing:.02em;
  font-size:clamp(var(--t-200),2.2vw,1.5rem);
}
.plogos .plus{font-size:var(--t-300);color:var(--faint)}

/* ==========================================================================
   PEOPLE CARDS v2 — the plate holds the portrait, the name sits beneath it
   (overlaid text collided with the faces once type went to 16px)
   ========================================================================== */
.pc{display:flex;flex-direction:column;background:var(--ink-1)}
.pc__ph{aspect-ratio:4/5;flex:none}
.pc__ph::after{
  background:linear-gradient(180deg,transparent 62%,rgba(5,5,5,.45));
  opacity:.7;
}
.pc__body{
  position:static;display:flex;flex-direction:column;align-items:center;
  gap:.3rem;text-align:center;padding:clamp(1rem,1.8vw,1.35rem) clamp(.8rem,1.4vw,1.1rem);
  border-top:1px solid var(--line);
}
.pc__nm{font-size:clamp(var(--t-200),1.35vw,1.375rem);line-height:1.15}
.pc__rl{margin-top:.15rem;font-size:var(--t-100);color:#a2a29c;max-width:26ch}
.pc__amb{
  margin-top:.55rem;padding:.28rem .7rem;font-size:var(--t-100);
  letter-spacing:.08em;line-height:1.2;
}
/* the ambassador chip is the one deliberate exception to the 16px floor:
   at phone widths it otherwise wraps and swamps the card */
@media (max-width:759px){
  .pc__amb{font-size:14px;padding:.26rem .6rem}
  .pc__rl{font-size:var(--t-100)}
}
.pc__in{top:.7rem;right:.7rem;width:34px;height:34px}
.pc__in svg{width:15px;height:15px}

/* ==========================================================================
   ROSTER v2 — a scannable card grid; the two-column rule list read as noise
   ========================================================================== */
.roster{
  columns:auto;column-gap:0;
  display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(1.6rem,3vw,2.4rem);
  grid-template-columns:1fr;
}
@media (min-width:620px){.roster{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.roster{grid-template-columns:repeat(3,1fr)}}
.roster li{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:.35rem;text-align:center;border:0;
  padding:clamp(1.1rem,2vw,1.5rem) clamp(.9rem,1.6vw,1.2rem);
  background:var(--ink);position:relative;overflow:hidden;
  transition:background .45s var(--e-out);
}
.roster li::before{
  content:"";position:absolute;left:0;top:0;width:100%;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--e-out);
}
.roster li:hover{background:var(--ink-2)}
.roster li:hover::before{transform:scaleX(1)}
.roster a,.roster li > span:first-child{
  font-family:var(--f-display);font-size:clamp(var(--t-200),1.3vw,1.375rem);
  font-weight:700;text-transform:uppercase;letter-spacing:.005em;line-height:1.12;
}
.roster span{font-size:var(--t-100);color:var(--muted);font-weight:350;line-height:1.45;max-width:28ch}
.roster a::after{
  content:"";display:block;width:22px;height:1px;background:var(--gold);
  margin:.55rem auto 0;opacity:.5;transition:width .45s var(--e-out),opacity .45s;
}
.roster a:hover::after{width:44px;opacity:1}

/* ==========================================================================
   STRIP CAPTIONS — gold plate so they hold over any frame of the photograph
   ========================================================================== */
.strip__t figcaption{
  left:0;bottom:0;padding:.6rem 1rem;text-shadow:none;
  background:var(--gold);color:#0a0a08;font-weight:700;
  font-size:var(--t-100);letter-spacing:.09em;
}

/* ==========================================================================
   BACKDROP INTENSITY — the animated relief was fighting the copy
   ========================================================================== */
/* Presence lever. Peak on-screen alpha = stroke alpha x this opacity:
   ridge 0.37 x .34 = .126 · iso 0.38 x .72 = .274 */
.relief--ridge{opacity:.34}
.relief--iso{opacity:.72}
@media (max-width:1099px){
  .relief--ridge{opacity:.24}
  .relief--iso{opacity:.52}
  .mud{opacity:.1}
  .topo{opacity:.3}
  /* the iso mesh cramps on narrow viewports: let it breathe past the edges */
  .relief--iso{height:min(100%,70vh)}
  }

/* ==========================================================================
   TABLET follows the phone's centring rules
   ========================================================================== */
@media (min-width:760px) and (max-width:1099px){
  .head,.stack,.hero__body,.day,.step,.chef,.appbox,
  .foot__top > *,.partners > *{text-align:center}
  .head{margin-inline:auto}
  .lede,p.body,.hero__sub,.cta__note,.frame__cap{margin-inline:auto;text-align:center}
  .eyebrow,.pillar__idx,.step__n,.foot__ttl,.day__no,.more > summary{justify-content:center}
  .eyebrow::before{display:none}
  .hero__acts,.hero__kicker,.socs,.tabs,.btnrow{justify-content:center}
  .foot__l{align-items:center}
  .foot .foot__ttl{text-align:center}
  .chef{grid-template-columns:1fr;justify-items:center}
  .chef__ph{width:min(30vw,170px)}
  .roster li{text-align:center}
  .sect-tag{position:static;justify-content:center;margin-bottom:1.6rem}
  .frame__cap{left:0;right:0;max-width:none;text-align:center}
  .frame__cap::before{margin-inline:auto}
  .pillar .head{margin-inline:auto}
}

/* the scrim existed to carry overlaid text; with the name moved out it only
   needs to seat the portrait against the card */
.pc__ph::after{
  background:linear-gradient(180deg,transparent 74%,rgba(5,5,5,.35));
  opacity:.55;
}
.pc__ph img{object-position:center 14%}

@media (max-width:759px){
}

/* ==========================================================================
   ROSTER — three names, then reveal the rest on request
   ========================================================================== */
.roster li{display:none}
.roster li:nth-child(-n+3){display:flex}
.roster.all li{display:flex}
.roster-more{
  display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  margin-top:1px;padding:1.05rem 1.2rem;background:var(--ink-1);
  border:1px solid var(--line);border-top:0;
  font-family:var(--f-mono);font-size:var(--t-100);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--gold);
  transition:background .4s var(--e-out),color .4s;
}
.roster-more:hover{background:var(--gold);color:#0a0a08}
.roster-more b{font-weight:800}
.roster-more .lbl-close{display:none}
.roster-more[aria-expanded="true"] .lbl-open{display:none}
.roster-more[aria-expanded="true"] .lbl-close{display:inline}
.roster-more::after{
  content:"";width:9px;height:9px;flex:none;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .45s var(--e-out);
}
.roster-more[aria-expanded="true"]::after{transform:rotate(-135deg) translate(-2px,-2px)}

/* strip captions read tighter at 13px over the photograph */
.strip__t figcaption{font-size:13px;letter-spacing:.1em;padding:.5rem .85rem}

/* ==========================================================================
   COUNTDOWN v2 — a trip-computer readout, not four detached boxes
   ========================================================================== */
.cd{
  display:block;grid-template-columns:none;gap:0;max-width:none;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid var(--line-2);padding:clamp(1.1rem,2.4vw,1.6rem);
  position:relative;overflow:hidden;
}
.cd::before{                       /* instrument sheen */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 50% -20%,rgba(212,175,55,.14),transparent 62%);
}
.cd__hd{
  position:relative;display:flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--f-mono);font-size:var(--t-100);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.cd__hd i{
  width:7px;height:7px;border-radius:50%;background:var(--red);flex:none;
  box-shadow:0 0 0 0 rgba(230,0,18,.55);animation:pulse 2s infinite;
}
.cd__row{
  position:relative;display:flex;align-items:flex-start;justify-content:center;
  gap:clamp(.35rem,1.4vw,1rem);margin-top:clamp(.9rem,2vw,1.3rem);
}
.cd__u{
  background:none;padding:0;display:flex;flex-direction:column;align-items:center;
  /* 15vw travava em 86px ja aos 574px de viewport, dando ao painel um
     min-content de 550px que estrangulava a coluna de texto ao lado */
  min-width:clamp(44px,6.4vw,86px);
}
.cd__n{
  font-family:var(--f-mono);font-weight:800;color:var(--text);line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  font-size:clamp(2rem,8.5vw,3.4rem);
  text-shadow:0 0 34px rgba(212,175,55,.22);
}
.cd__u:first-child .cd__n{color:var(--gold)}
.cd__l{
  margin-top:.6rem;font-family:var(--f-mono);font-size:var(--t-100);
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
}
.cd__sep{
  font-family:var(--f-mono);font-weight:700;color:var(--faint);line-height:1;
  font-size:clamp(1.4rem,5vw,2.2rem);padding-top:.1em;
  animation:blink 2s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:.7}50%,100%{opacity:.18}}
.cd__bar{
  position:relative;height:2px;margin-top:clamp(1rem,2.2vw,1.5rem);
  background:var(--line-2);overflow:hidden;
}
.cd__bar i{
  position:absolute;inset:0;width:0;background:linear-gradient(90deg,var(--gold),var(--gold-hi));
  box-shadow:0 0 12px rgba(212,175,55,.65);transition:width 1s var(--e-out);
}
.cd__foot{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-top:.75rem;font-family:var(--f-mono);font-size:var(--t-100);
  letter-spacing:.11em;text-transform:uppercase;color:var(--faint);
}
.cd__foot span:last-child{color:var(--gold);font-weight:700}
@media (max-width:400px){
  .cd__u{min-width:44px}
  .cd__l{letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){ .cd__sep{animation:none;opacity:.6} }

/* symmetric rules either side of the step index */
.step__n{width:100%;max-width:260px;gap:.85rem}
.step__n::before,.step__n::after{
  content:"";display:block;flex:1;height:1px;background:var(--line);
}

/* ==========================================================================
   MOBILE REFINEMENTS
   ========================================================================== */
@media (max-width:759px){
  /* footer mark, +90% and centred */
  .foot__top > div:first-child{display:flex;flex-direction:column;align-items:center}
  .foot__top img{height:57px !important;margin-inline:auto}

  /* the QR code only makes sense on a second screen */
  .appbox > figure{display:none}
  .appbox{grid-template-columns:1fr}

  /* credit lines stay quiet */
  .drawer__foot .credit,.drawer__foot .credit a,
  .foot__btm,.foot__btm a,.foot__btm span{font-size:14px}

  /* button labels sit a touch below the body floor */
  .btn,.btn--sm,.btn--lg,.roster-more,.tab{font-size:15px}
  .more > summary{font-size:15px}
}

/* ==========================================================================
   PEOPLE CARDS — tags line up across neighbouring cards regardless of how
   long the name or the role runs
   ========================================================================== */
.people{align-items:stretch}
.pc{height:100%}
.pc__body{flex:1 1 auto;justify-content:flex-start}
.pc__amb{margin-top:auto}

/* the floating back-to-top button was clipping the credit line */
@media (max-width:759px){
  .foot{padding-bottom:calc(clamp(1.4rem,3vw,2rem) + 68px)}
  .foot__btm{letter-spacing:.06em;line-height:1.7}
  .totop{width:44px;height:44px;bottom:clamp(.8rem,2vw,1.2rem)}
}

@media (max-width:759px){
  /* keep the credit clear of the floating back-to-top control */
  .foot__btm{padding-inline:56px;text-wrap:balance}
  .foot__btm span{display:block;width:100%}
}

/* ==========================================================================
   HEADER / HUD COLLISION
   At 16px the edition strap needs a full row of its own, which it only gets
   once the desktop nav appears. Below that it stands down, and the HUD with it.
   ========================================================================== */
@media (max-width:1119px){
  .hdr__x,.hdr__ed{display:none}
  .hud{display:none}
}
@media (min-width:1120px){
  .hdr__ed{white-space:nowrap;max-width:none;font-size:1rem;line-height:1.2}
  .hud--tr{top:calc(clamp(.8rem,1.6vw,1.3rem) + 74px)}
}

@media (max-width:1023px){
  /* the mark must follow the copy it sits above */
  .foot__top > div:first-child{display:flex;flex-direction:column;align-items:center}
  .foot__top img{margin-inline:auto}
  .socs{justify-content:center}
}

/* ==========================================================================
   HEADER STRAP — one horizontal line; the stacked version bloated the bar
   to 117px on tablet once the nav appeared
   ========================================================================== */
.hdr__ed{display:none;align-items:baseline;gap:.45rem;white-space:nowrap;line-height:1.2}
.hdr__ed b{display:inline;color:var(--gold);font-weight:700}
.hdr__ed i{font-style:normal;color:var(--faint)}
@media (min-width:1120px){ .hdr__ed{display:flex} }

/* ==========================================================================
   DRAWER CREDIT — quiet by design: it sits below the contact block and
   carries none of its weight
   ========================================================================== */
.drawer__foot{flex-direction:column;align-items:center;gap:.85rem;text-align:center}
.drawer__foot .credit{
  font-family:var(--f-body);font-size:13px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--faint);opacity:.75;margin-top:.35rem;
}
.drawer__foot .credit a{
  color:var(--faint);font-weight:400;text-decoration:underline;
  text-underline-offset:2px;text-decoration-color:rgba(255,255,255,.16);
  transition:color .3s,text-decoration-color .3s;
}
.drawer__foot .credit a:hover{color:var(--muted);text-decoration-color:var(--muted)}
@media (max-width:759px){
  .drawer__foot .credit,.drawer__foot .credit a{font-size:13px}
}

/* ==========================================================================
   TAG STRIP — the hero hands off to a three-cell instrument bar
   ========================================================================== */
.kicker-slot{padding:0;border-bottom:0;background:transparent}
.kicker-slot .hero__kicker{
  display:grid;grid-template-columns:1fr;gap:1px;margin:0;
  background:var(--line);border-bottom:1px solid var(--line);
}
@media (min-width:700px){
  .kicker-slot .hero__kicker{grid-template-columns:repeat(3,1fr)}
}
.kicker-slot .chip{
  border:0;border-radius:0;background:var(--ink);backdrop-filter:none;
  justify-content:center;text-align:center;
  padding:clamp(1.1rem,2.4vw,1.7rem) clamp(1rem,2vw,1.5rem);
  font-size:var(--t-100);letter-spacing:.11em;color:#c5c5bf;
  position:relative;overflow:hidden;transition:background .45s var(--e-out);
}
.kicker-slot .chip:hover{background:var(--ink-2)}
.kicker-slot .chip::after{
  content:"";position:absolute;left:0;top:0;width:100%;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--e-out);
}
.kicker-slot .chip:hover::after{transform:scaleX(1)}
.kicker-slot .chip b{color:var(--gold);font-weight:700}
@media (max-width:759px){
  .kicker-slot .chip{padding:1rem}
}

/* ==========================================================================
   HEADER BREAKPOINTS — at 16px the logo + strap + 7 nav links + CTA need
   ~1360px. Below that the header steps down instead of wrapping.
   ========================================================================== */
.btn{white-space:nowrap}
.hdr__nav a{white-space:nowrap}

/* desktop nav only once it genuinely fits */
.hdr__nav{display:none}
.burger{display:grid}
@media (min-width:1280px){
  .hdr__nav{display:flex;gap:clamp(.8rem,1.5vw,1.6rem)}
  .burger{display:none}
}
/* the edition strap is the last thing to earn its place */
.hdr__ed{display:none}
@media (min-width:1400px){ .hdr__ed{display:flex} }
.hdr__x{display:none}
@media (min-width:1400px){ .hdr__x{display:block} }

/* inline-flex turned each text run into its own flex item, so the label broke
   apart mid-phrase; keep the cell on one line */
.kicker-slot .chip{
  display:flex;align-items:center;justify-content:center;
  flex-wrap:nowrap;white-space:nowrap;gap:.5rem;
}
@media (max-width:420px){
  .kicker-slot .chip{letter-spacing:.06em}
}

/* drawer footer sits at reading size, never at navigation size */
.drawer__foot a.mono,.drawer__foot .mono{font-size:var(--t-100);line-height:1.5}
.drawer__foot a.mono{color:var(--muted);transition:color .3s}
.drawer__foot a.mono:hover{color:var(--gold)}

/* ==========================================================================
   SECTION HEAD PANEL — fills the empty half beside a section title with
   real figures instead of dead space
   ========================================================================== */
.sect-head{margin-bottom:clamp(2.2rem,4.5vw,3.6rem);align-items:start}
@media (min-width:1100px){
  .sect-head{grid-template-columns:1.15fr .85fr;align-items:center}
}
.panel{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border:1px solid var(--line-2);padding:clamp(1.3rem,2.6vw,1.9rem);
}
.panel::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 70% at 50% -20%,rgba(212,175,55,.12),transparent 60%);
}
.panel > *{position:relative}
.panel__hd{
  display:flex;align-items:center;gap:.6rem;padding-bottom:1rem;
  border-bottom:1px solid var(--line);
  font-family:var(--f-mono);font-size:var(--t-100);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
}
.panel__hd i{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;
  box-shadow:0 0 0 4px rgba(212,175,55,.14)}

.panel__rows{display:flex;flex-direction:column}
.panel__rows li{
  display:flex;align-items:baseline;gap:1rem;
  padding:1rem 0;border-bottom:1px solid var(--line);
}
.panel__rows li:last-child{border-bottom:0}
.panel__rows b{
  font-family:var(--f-mono);font-size:clamp(1.75rem,3.4vw,2.5rem);font-weight:800;
  color:var(--gold);line-height:1;font-variant-numeric:tabular-nums;flex:none;min-width:2.2ch;
}
.panel__rows span{font-size:var(--t-100);color:#b6b6b0;line-height:1.45}

.panel__big{display:flex;align-items:center;gap:1.1rem;padding:1.2rem 0;border-bottom:1px solid var(--line)}
.panel__big b{
  font-family:var(--f-mono);font-size:clamp(3rem,7vw,4.6rem);font-weight:800;color:var(--gold);
  line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:-.03em;
  text-shadow:0 0 36px rgba(212,175,55,.28);
}
.panel__big span{font-size:var(--t-100);color:#b6b6b0;line-height:1.4}

.ledger{display:flex;flex-direction:column;gap:.85rem;padding:1.2rem 0}
.ledger li{display:grid;grid-template-columns:1fr auto;gap:.35rem .9rem;align-items:center}
.ledger span{
  font-family:var(--f-mono);font-size:var(--t-100);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);
}
.ledger b{
  font-family:var(--f-mono);font-size:var(--t-100);font-weight:800;color:var(--gold);
  font-variant-numeric:tabular-nums;grid-row:1;
}
.ledger i{
  grid-column:1/-1;height:3px;background:var(--line);position:relative;overflow:hidden;
}
.ledger i::after{
  content:"";position:absolute;inset:0;width:var(--w,0);
  background:linear-gradient(90deg,var(--gold),var(--gold-hi));
  transform:scaleX(0);transform-origin:left;
}
.panel.in .ledger i::after{transform:scaleX(1);transition:transform 1.1s var(--e-out)}
.panel.in .ledger li:nth-child(2) i::after{transition-delay:.12s}
.panel.in .ledger li:nth-child(3) i::after{transition-delay:.24s}
.panel.in .ledger li:nth-child(4) i::after{transition-delay:.36s}

.panel__note{
  margin-top:1.1rem;padding-top:1.1rem;border-top:1px solid var(--line);
  font-size:var(--t-100);color:var(--faint);line-height:1.6;
}
.panel__marks{display:flex;align-items:center;justify-content:center;gap:1.3rem;margin-top:1.2rem}
.panel__marks img{height:30px;width:auto;opacity:.6;filter:grayscale(1) brightness(1.7)}
.panel__marks span{font-family:var(--f-mono);color:var(--faint);font-size:var(--t-100)}

@media (max-width:1099px){
  .panel{text-align:center}
  .panel__hd,.panel__big,.panel__rows li{justify-content:center}
  .panel__rows li{flex-direction:column;gap:.3rem}
  .panel__big{flex-direction:column;text-align:center;gap:.5rem}
  .ledger span,.ledger b{justify-self:center}
  .ledger li{grid-template-columns:1fr}
  .ledger b{grid-row:auto}
}

/* footer mark, +90% at every width */
.foot__top img{height:57px !important;width:auto}

/* in a column flex, align-items governs the horizontal axis: `baseline`
   was pinning the rows left once the panel stacked */
@media (max-width:1099px){
  .panel__rows li{align-items:center}
  .ledger li{justify-items:center}
}

/* stacked layout: the 3px hairline track disappeared, so give the bars
   a real presence and a bounded width */
@media (max-width:1099px){
  .ledger li{gap:.5rem}
  .ledger i{
    width:min(100%,240px);justify-self:center;height:4px;
    background:rgba(255,255,255,.13);order:3;
  }
  .ledger span{order:1}
  .ledger b{order:2}
  .ledger li{display:flex;flex-direction:column;align-items:center}
}

/* drawer footer follows the ranged-left navigation above it */
.drawer__foot{align-items:flex-start;text-align:left}
.drawer__foot .credit{font-size:14px;opacity:.85}
.drawer__foot .credit a{font-size:14px}
@media (max-width:759px){
  .drawer__foot{align-items:flex-start;text-align:left}
  .drawer__foot .credit,.drawer__foot .credit a{font-size:14px}
}

/* ==========================================================================
   HEADER FIT — measured, not guessed.
   Natural widths at 16px: logo 133 · strap(full) ~370 · nav(7) 693 · CTA 263.
   With the full strap the bar needs ~1690px, so it was overflowing and the
   nav ran under the logo. Two fixes: drop the nav link the CTA already
   duplicates, and reveal the strap in stages.
   ========================================================================== */
.hdr__nav .nav-dup{display:none}          /* "Confirmar" lives in the button */

.hdr__nav{display:none}
.burger{display:grid}
@media (min-width:1200px){
  .hdr__nav{display:flex;gap:clamp(.7rem,1.3vw,1.5rem)}
  .burger{display:none}
}

/* strap: short form first, full wording only when there is real room */
.hdr__ed{display:none;gap:.5rem}
/* the separator belongs to the full wording; without it the strap would
   open on a dangling middot */
.hdr__ed .ed-full,.hdr__ed i{display:none}
.hdr__x{display:none}
@media (min-width:1420px){
  .hdr__ed{display:flex}
  .hdr__x{display:block}
}
@media (min-width:1620px){
  .hdr__ed .ed-full{display:inline}
  .hdr__ed i{display:inline}
}

/* last-resort guard: the bar may compress, never spill over its neighbours */
.hdr{flex-wrap:nowrap}
.hdr__logo{flex:0 0 auto}
.hdr__nav{flex:1 1 auto;justify-content:center;min-width:0}
.hdr__end{flex:0 0 auto}

/* ==========================================================================
   CHAPTERS — the scroll is long, so the ground changes underfoot.
   Each chapter redefines the surface tokens; every component inherits.
   ========================================================================== */
:root{
  --graphite:#0d0e10;
  --charcoal:#0a0f0d;      /* greenish charcoal */
  --paper:#EDEAE3;
  --paper-2:#e2ded4;
}

.chapter{position:relative;background:var(--ink);transition:background .6s var(--e-out)}

.chapter--void{--ink:#000000;--ink-1:#040404;--ink-2:#070707;background:#000}
.chapter--graphite{--ink:#0d0e10;--ink-1:#111214;--ink-2:#15161a;background:#0d0e10}
.chapter--charcoal{
  --ink:#0a0f0d;--ink-1:#0e1412;--ink-2:#121a17;
  --line:rgba(200,255,230,.075);--line-2:rgba(200,255,230,.15);
  background:#0a0f0d;
}

/* the one bright room in the house */
.chapter--light{
  --ink:var(--paper);--ink-1:#e6e2d8;--ink-2:#dcd7ca;--ink-3:#d2ccbc;
  --text:#14150f;--muted:#4d4e45;--faint:#7c7d72;
  --line:rgba(20,21,15,.14);--line-2:rgba(20,21,15,.26);
  /* #8a6d16 rendia 4.08:1 sobre o papel, abaixo do minimo AA de 4.5:1 */
  --gold:#7A5F13;--gold-hi:#5f4a0f;--gold-dim:rgba(122,95,19,.2);
  background:var(--paper);color:var(--text);
}
.chapter--light .lede,.chapter--light p.body{color:#3c3d34}
.chapter--light .h-lg,.chapter--light .h-md,.chapter--light .h-sm{color:#14150f}
.chapter--light .btn{--fg:var(--paper);--bg:#14150f}
.chapter--light .btn::after{background:var(--gold)}
.chapter--light .btn--ghost{--bg:transparent;--fg:#14150f;box-shadow:inset 0 0 0 1px rgba(20,21,15,.3)}
.chapter--light .btn--ghost:hover{color:var(--paper)}
.chapter--light .btn--ghost::after{background:#14150f}
.chapter--light .frame{background:var(--ink-2);border-color:var(--line)}
.chapter--light .grain{opacity:.03;mix-blend-mode:multiply}
.chapter--light .topo,.chapter--light .hairgrid{opacity:.5}
.chapter--light .chef{background:rgba(255,255,255,.5);border-color:var(--line)}
.chapter--light .chef:hover{background:rgba(255,255,255,.75)}
.chapter--light .chef__ph img{filter:grayscale(1) contrast(1.05)}
.chapter--light .pc__amb{background:rgba(122,95,19,.1);border-color:var(--gold-dim);color:var(--gold)}
.chapter--light .frame__lbl{background:rgba(237,234,227,.82);color:#14150f;border-color:var(--line)}
.chapter--light .frame__cap{background:rgba(237,234,227,.86);color:#14150f;border-color:var(--line)}
.chapter--light .frame__cap span{color:#4d4e45}
.chapter--light .frame::after{background:linear-gradient(180deg,transparent 62%,rgba(237,234,227,.4))}

/* a hairline seam so chapters read as deliberate, not accidental */
.chapter + .chapter{border-top:1px solid var(--line)}

/* ==========================================================================
   FULL-BLEED — moments that leave the grid and take the whole screen
   ========================================================================== */
.bleed{
  position:relative;width:100%;min-height:clamp(64vh,82vh,900px);
  display:grid;place-items:end start;overflow:hidden;isolation:isolate;
  padding:var(--pad);
}
.bleed__media{position:absolute;inset:-12% 0 -12% 0;z-index:-2;will-change:transform}
.bleed__media img{width:100%;height:100%;object-fit:cover}
.bleed::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,5,5,.72) 0%,transparent 26%,transparent 46%,rgba(5,5,5,.88) 92%,var(--ink) 100%),
    linear-gradient(90deg,rgba(5,5,5,.7),transparent 58%);
}
/* `ch` here resolves against the body font, which starved the display
   headline of width and broke it into four lines; each element gets a
   measure in its own type instead */
.bleed__body{position:relative;z-index:2;max-width:none;padding-bottom:clamp(1rem,3vw,2.4rem)}
.bleed h2,.bleed h3{max-width:15ch}
.bleed p{max-width:46ch}
.bleed__k{
  display:flex;align-items:center;gap:.7rem;margin-bottom:1rem;
  font-family:var(--f-mono);font-size:var(--t-100);font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--gold);
}
.bleed__k::before{content:"";width:26px;height:1px;background:currentColor}
.bleed h2,.bleed h3{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.6)}
.bleed p{color:#d8d8d2;margin-top:1rem;text-shadow:0 1px 16px rgba(0,0,0,.8)}
.bleed__meta{
  position:absolute;right:var(--pad);bottom:clamp(1rem,3vw,2.4rem);z-index:2;text-align:right;
  font-family:var(--f-mono);font-size:var(--t-100);letter-spacing:.11em;
  text-transform:uppercase;color:#b9b9b3;line-height:1.8;
}
.bleed__meta b{color:var(--gold);font-weight:700}
@media (max-width:1099px){
  .bleed{place-items:end center;text-align:center}
  .bleed__body{max-width:none;margin-inline:auto}
  .bleed__k{justify-content:center}
  .bleed__k::before{display:none}
  .bleed__meta{position:static;text-align:center;margin-top:1.4rem}
  .bleed::after{background:linear-gradient(180deg,rgba(5,5,5,.7) 0%,transparent 24%,transparent 40%,rgba(5,5,5,.9) 88%,var(--ink) 100%)}
}

/* ==========================================================================
   EDITORIAL GALLERY — asymmetric plates, each drifting at its own rate
   ========================================================================== */
.edit{position:relative;display:grid;gap:clamp(.6rem,1.4vw,1.1rem)}
@media (min-width:900px){
  .edit{
    grid-template-columns:repeat(12,1fr);
    grid-auto-rows:clamp(70px,8vw,120px);
  }
  .edit__a{grid-column:1/8;grid-row:1/6}      /* the hero plate */
  .edit__b{grid-column:8/13;grid-row:1/4}     /* narrow vertical */
  .edit__c{grid-column:8/11;grid-row:4/6}
  .edit__d{grid-column:11/13;grid-row:4/6}
  .edit__e{grid-column:1/5;grid-row:6/9}
  .edit__f{grid-column:5/13;grid-row:6/9}     /* wide closer */
}
.edit figure{position:relative;overflow:hidden;background:var(--ink-2);border:1px solid var(--line);margin:0}
@media (max-width:899px){
  .edit figure{aspect-ratio:3/2}
  /* needs the same weight as `.edit figure` to win */
  .edit figure.edit__b{aspect-ratio:3/4}
  .edit figure.edit__a{aspect-ratio:4/3}
}
.edit img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.42) contrast(1.08) brightness(.94);
  transition:filter .8s var(--e-out),transform 1.4s var(--e-out);
  will-change:transform;
}
.edit figure:hover img{filter:none;transform:scale(1.04)}
.edit figcaption{
  position:absolute;left:0;bottom:0;z-index:2;padding:.55rem .9rem;
  background:var(--gold);color:#0a0a08;font-family:var(--f-mono);font-weight:700;
  font-size:13px;letter-spacing:.1em;text-transform:uppercase;
}
.edit__a img{object-position:center 55%}

/* ==========================================================================
   ROADBOOK STAGE — the route is driven by scroll position, not a one-shot
   reveal. The tall stage supplies the travel; the pin holds the instrument.
   ========================================================================== */
.rbstage{position:relative;height:280vh;margin-top:clamp(2rem,4vw,3.4rem)}
.rbstage__pin{
  position:sticky;top:0;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1rem,2.4vw,1.8rem);padding-block:clamp(4rem,9vh,7rem);
}
.rbstage__hud{
  display:flex;align-items:baseline;gap:clamp(1rem,3vw,2.4rem);
  padding-bottom:.6rem;
}
.rbstage__km{display:flex;flex-direction:column;align-items:center}
.rbstage__km b{
  font-family:var(--f-mono);font-weight:800;color:var(--gold);line-height:.9;
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;
  font-size:clamp(3.2rem,11vw,7rem);
  text-shadow:0 0 60px rgba(212,175,55,.4);
}
.rbstage__km small{
  margin-top:.7rem;font-family:var(--f-mono);font-size:var(--t-100);
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.rbstage__wp{
  font-family:var(--f-display);font-size:clamp(1.4rem,3vw,2.4rem);font-weight:700;
  text-transform:uppercase;letter-spacing:.01em;color:var(--text);
  padding-left:clamp(1rem,3vw,2.4rem);border-left:1px solid var(--line-2);
}
.rbstage .rb__route{width:100%;height:auto;max-height:44vh}

/* the moving rig */
.rb__rig{opacity:0;transition:opacity .4s}
.rbstage.live .rb__rig{opacity:1}
.rig__dot{fill:var(--gold);filter:drop-shadow(0 0 10px rgba(212,175,55,.9))}
.rig__halo{fill:none;stroke:var(--gold);stroke-width:1.5;opacity:.45}
.rbstage.live .rig__halo{animation:rigpulse 1.9s ease-in-out infinite}
@keyframes rigpulse{0%,100%{r:13;opacity:.45}50%{r:19;opacity:.12}}

/* waypoints light as they are passed */
.rb__route .wp{transition:fill .5s var(--e-out),stroke .5s,r .5s var(--e-out)}
.rb__route .wp.passed{fill:var(--gold)}
.rb__route .wp.wp-hot.passed{fill:var(--red);stroke:var(--red)}
.wps-list li{transition:border-color .5s var(--e-out),background .5s,opacity .5s;opacity:.45}
.wps-list li.passed{opacity:1;border-color:var(--gold-dim);background:rgba(212,175,55,.08)}
.wps-list li.hot.passed{border-color:rgba(230,0,18,.45);background:rgba(230,0,18,.1)}

/* the path is scrubbed, so no entry transition fights the scroll */
.rbstage .rb__route .path{stroke:url(#routeGrad);stroke-width:3;stroke-dashoffset:1;transition:none}
.rbstage.live .rb__route .path{transition:none}
.rbstage .rb__route .ridge{opacity:.35}
.rbstage .rb__route .wps > *{opacity:1}

@media (max-width:759px){
  .rbstage{height:230vh}
  .rbstage__hud{flex-direction:column;align-items:center;gap:.5rem}
  .rbstage__wp{padding-left:0;border-left:0;padding-top:.6rem;border-top:1px solid var(--line-2)}
  .rbstage .rb__route{max-height:34vh}
}
@media (prefers-reduced-motion:reduce){
  .rbstage{height:auto}
  .rbstage__pin{position:static;min-height:0}
  .rbstage .rb__route .path{stroke-dashoffset:0}
  .wps-list li{opacity:1}
  .rb__rig{display:none}
}

/* ==========================================================================
   HERO, CINEMATIC
   The film carries the frame: the centre scrim steps back so the vehicle
   reads, and the instrument data arrives in sequence rather than at once.
   ========================================================================== */
.hero__scrim{
  background:
    radial-gradient(46% 34% at 89% 87%,rgba(5,5,5,.9) 0%,rgba(5,5,5,.55) 45%,transparent 72%),
    radial-gradient(66% 46% at 50% 50%,rgba(5,5,5,.52) 0%,rgba(5,5,5,.2) 58%,transparent 82%),
    linear-gradient(180deg,
      rgba(5,5,5,.78) 0%, transparent 22%,
      transparent 56%, rgba(5,5,5,.5) 76%, rgba(5,5,5,.9) 91%, var(--ink) 100%);
}
.hero__video{will-change:transform}

/* headline sits on its own shadow instead of a heavy plate */
.hero__title .l2{text-shadow:0 4px 60px rgba(0,0,0,.85),0 0 120px rgba(0,0,0,.7)}
.hero__sub{text-shadow:0 1px 24px rgba(0,0,0,.9)}

/* HUD, sequenced */
.hud{display:none}
@media (min-width:1120px){ .hud{display:flex;flex-direction:column;gap:.25rem} }
.hud--bl{
  top:auto;bottom:clamp(5.5rem,11vh,8rem);right:auto;left:var(--pad);text-align:left;
  align-items:flex-start;
}
.hud--bl b{order:-1;margin-bottom:.35rem}
.js [data-hud]{opacity:0;transform:translateY(8px)}
.hero.armed [data-hud]{
  opacity:1;transform:none;
  transition:opacity .7s var(--e-out),transform .7s var(--e-out);
  transition-delay:calc(var(--i) * 110ms + 900ms);
}

/* the call to action reads as part of the frame, tied to the route */
.hero__acts{
  align-items:center;gap:clamp(.8rem,1.6vw,1.2rem);
  padding-top:clamp(1.2rem,2.4vw,1.9rem);position:relative;
}
.hero__acts::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(420px,70%);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.5;
}

/* ==========================================================================
   PROTAGONISTS — a credits page, not a uniform grid.
   The two presidencies lead at double width; the rest fall in behind.
   ========================================================================== */
@media (min-width:700px){
  .pc--lead{grid-column:span 2}
  .pc--lead .pc__ph{aspect-ratio:16/10}
  .pc--lead .pc__ph img{object-position:center 22%}
  .pc--lead .pc__body{
    flex-direction:row;align-items:center;justify-content:space-between;
    gap:1.2rem;text-align:left;padding:clamp(1.1rem,2vw,1.5rem);
  }
  .pc--lead .pc__nm{font-size:clamp(1.375rem,2.1vw,1.9rem)}
  .pc--lead .pc__rl{max-width:22ch;margin-top:0}
  .pc--lead .pc__amb{margin-top:0}
  .pc--lead::before{
    content:"Presidência";position:absolute;top:0;left:0;z-index:3;
    padding:.5rem .9rem;background:var(--gold);color:#0a0a08;
    font-family:var(--f-mono);font-size:13px;font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;
  }
}
.pc--lead 
/* ==========================================================================
   ARRIVAL — the final call to action reads as the end of the journey
   ========================================================================== */
.cta{min-height:100svh;display:grid;place-items:center;padding-block:clamp(5rem,12vh,9rem)}
.cta__bg img{filter:grayscale(.85) brightness(.24) contrast(1.25)}
.cta__bg::after{background:radial-gradient(72% 62% at 50% 46%,rgba(5,5,5,.45),var(--ink) 86%)}
.cta__odo{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  margin-bottom:clamp(1.2rem,3vw,2.2rem);
}
.cta__odo b{
  font-family:var(--f-mono);font-weight:800;color:var(--gold);line-height:.86;
  font-size:clamp(4rem,15vw,11rem);letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 90px rgba(212,175,55,.42);
}
.cta__odo small{
  font-family:var(--f-mono);font-size:var(--t-100);letter-spacing:.24em;
  text-transform:uppercase;color:var(--faint);
}
.cta .h-lg{font-size:clamp(2.6rem,8vw,6.4rem);line-height:.9}

/* nine seats, visualised */
.seats{display:flex;justify-content:center;gap:.55rem;margin-block:clamp(1rem,2.4vw,1.7rem)}
.seats i{
  width:clamp(20px,3.2vw,34px);height:3px;background:var(--line-2);position:relative;overflow:hidden;
}
.seats i::after{
  content:"";position:absolute;inset:0;background:var(--gold);
  transform:scaleX(0);transform-origin:left;
}
.cta.in .seats i::after,.seats.in i::after{
  transform:scaleX(1);transition:transform .6s var(--e-out);
  transition-delay:calc(var(--i) * 70ms);
}
.seats__lbl{
  font-family:var(--f-mono);font-size:var(--t-100);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.seats__lbl b{color:var(--gold);font-weight:700}

.js .seats i::after{transform:scaleX(0)}
.seats.in i::after{transform:scaleX(1);transition:transform .6s var(--e-out);transition-delay:calc(var(--i) * 70ms)}
@media (prefers-reduced-motion:reduce){ .seats i::after{transform:scaleX(1)} }

/* ==========================================================================
   ASSINATURA — o nome fica em ouro; o tamanho e o peso seguem discretos,
   entao ele se destaca pela cor sem competir com a navegacao
   ========================================================================== */
.foot__btm a{color:var(--gold)}
.foot__btm a:hover{color:var(--gold-hi)}
.drawer__foot .credit a{
  color:var(--gold);
  text-decoration-color:rgba(212,175,55,.4);
}
.drawer__foot .credit a:hover{color:var(--gold-hi);text-decoration-color:var(--gold-hi)}

/* ==========================================================================
   RODAPÉ · BARRA LEGAL — tratamento herdado do LeaderX Talks.
   Era mono em caixa alta, que dava a uma linha de texto legal o mesmo peso
   gráfico dos dados de instrumentação. Passa a usar a fonte do corpo, em
   caixa mista e sem tracking, como no Talks. A assinatura é a única coisa
   aqui que aponta para fora da marca: cor e peso a separam do texto legal,
   sem gritar.
   ========================================================================== */
.foot__btm{
  font-family:var(--f-body);
  font-size:var(--t-100);
  font-weight:400;
  letter-spacing:-.006em;
  text-transform:none;
  color:rgba(255,255,255,.6);
  line-height:1.6;
}
.foot__btm span{color:inherit}
.foot__btm a{
  color:var(--gold);font-weight:600;
  border-bottom:1px solid rgba(212,175,55,.4);
  text-decoration:none;transition:color .25s,border-color .25s;
}
.foot__btm a:hover{color:#fff;border-color:#fff}
@media (max-width:759px){
  .foot__btm{font-size:var(--t-100);letter-spacing:-.006em}
  .foot__btm,.foot__btm a,.foot__btm span{font-size:var(--t-100)}
}

/* ==========================================================================
   LIGHTBOX — the photographs are the emotional core; they must open large
   ========================================================================== */
[data-full]{cursor:zoom-in}
dialog.lb{
  width:100vw;height:100svh;max-width:none;max-height:none;margin:0;padding:0;
  border:0;background:rgba(3,3,3,.94);color:var(--text);
  display:grid;place-items:center;
  opacity:0;transition:opacity .45s var(--e-out),overlay .45s allow-discrete,display .45s allow-discrete;
}
dialog.lb[open]{opacity:1}
@starting-style{dialog.lb[open]{opacity:0}}
dialog.lb::backdrop{background:transparent}
.lb__fig{
  margin:0;display:flex;flex-direction:column;align-items:center;gap:1rem;
  max-width:min(92vw,1480px);max-height:92svh;
}
.lb__img{
  max-width:100%;max-height:calc(92svh - 5rem);width:auto;height:auto;object-fit:contain;
  border:1px solid var(--line);background:var(--ink-2);
  transform:scale(.96);opacity:0;
  transition:transform .55s var(--e-out),opacity .4s var(--e-out);
}
dialog.lb[open] .lb__img.ready{transform:none;opacity:1}
.lb__cap{
  display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;justify-content:center;
  font-family:var(--f-body);font-size:var(--t-100);color:#c9c9c3;text-align:center;
  max-width:70ch;line-height:1.5;
}
.lb__n{font-family:var(--f-mono);color:var(--gold);font-weight:700;letter-spacing:.11em;flex:none}
.lb__x,.lb__nav{
  position:fixed;z-index:2;display:grid;place-items:center;
  width:52px;height:52px;border:1px solid var(--line-2);color:var(--text);
  background:rgba(5,5,5,.55);backdrop-filter:blur(8px);
  transition:background .3s,color .3s,border-color .3s,transform .4s var(--e-out);
}
.lb__x{top:clamp(1rem,2.5vw,2rem);right:clamp(1rem,2.5vw,2rem)}
.lb__nav{top:50%;transform:translateY(-50%)}
.lb__nav--prev{left:clamp(.8rem,2.5vw,2rem)}
.lb__nav--next{right:clamp(.8rem,2.5vw,2rem)}
.lb__x:hover,.lb__nav:hover{background:var(--gold);color:#0a0a08;border-color:var(--gold)}
.lb__nav:hover{transform:translateY(-50%) scale(1.06)}
@media (max-width:759px){
  .lb__nav{top:auto;bottom:clamp(1rem,4vw,1.6rem);transform:none;width:48px;height:48px}
  .lb__nav:hover{transform:scale(1.06)}
  .lb__fig{max-height:78svh}
  .lb__img{max-height:calc(78svh - 5rem)}
}

/* ==========================================================================
   HEADER READS THE GROUND — over the paper chapter the bar goes light and
   the mark swaps to its dark cut, like the Talks nav does over its hero
   ========================================================================== */
.hdr__logo{position:relative}
.hdr__logo-d{position:absolute;left:0;top:0;opacity:0;transition:opacity .35s var(--e-out)}
.hdr__logo-l{transition:opacity .35s var(--e-out)}
.hdr.over-light .hdr__logo-l{opacity:0}
.hdr.over-light .hdr__logo-d{opacity:1}
.hdr.over-light.stuck{
  background:rgba(237,234,227,.86);border-bottom-color:rgba(20,21,15,.14);
}
.hdr.over-light .hdr__nav a{color:#4d4e45}
.hdr.over-light .hdr__nav a:hover,.hdr.over-light .hdr__nav a.on{color:#14150f}
.hdr.over-light .hdr__nav a::after{background:#7A5F13}
.hdr.over-light .hdr__ed{color:#4d4e45}
.hdr.over-light .hdr__ed b{color:#7A5F13}
.hdr.over-light .hdr__ed i{color:#7c7d72}
.hdr.over-light .hdr__x{background:rgba(20,21,15,.2)}
.hdr.over-light .burger i{background:#14150f}
.hdr.over-light .btn{--bg:#14150f;--fg:var(--paper)}
.hdr.over-light .btn::after{background:#7A5F13}
.hdr.over-light .btn:hover{color:var(--paper)}

/* ==========================================================================
   CONTEXTUAL CURSOR — the reticle names the intent under it
   ========================================================================== */
.cursor__lbl{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);
  font-family:var(--f-mono);font-size:11px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;white-space:nowrap;opacity:0;
  transition:opacity .25s var(--e-out),transform .35s var(--e-out);
  mix-blend-mode:normal;
}
body.cur-lbl .cursor{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55)}
body.cur-lbl .cursor::before,body.cur-lbl .cursor::after{opacity:0}
body.cur-lbl .cursor__lbl{opacity:1;transform:translate(-50%,-50%) scale(1)}
body.cur-lbl .cursor-dot{opacity:0}

/* ==========================================================================
   RAIL AS ELEVATION — the persistent instrument echoes the route's ridge;
   the marker travels the relief instead of a plain line
   ========================================================================== */
.rail__track{
  position:relative;width:28px;height:min(46vh,340px);background:none;
  overflow:visible;
}
.rail__ridge{fill:none;stroke:var(--line-2);stroke-width:1.2;vector-effect:non-scaling-stroke}
.rail__fill{
  fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 5px rgba(212,175,55,.75));
  position:static;width:auto;height:auto;background:none;box-shadow:none;
}
.rail__cur{position:static;width:auto;height:auto;margin:0;background:none;box-shadow:none}
.rail__cur circle{fill:var(--gold);stroke:rgba(212,175,55,.22);stroke-width:5;vector-effect:non-scaling-stroke}

/* ==========================================================================
   HERO LEGIBILITY — the secondary lines were dissolving into the film
   ========================================================================== */
.hero__title .l1{
  color:#d9d9d3;text-shadow:0 1px 18px rgba(0,0,0,.95),0 0 40px rgba(0,0,0,.8);
}
.hud{color:#a9a9a3;text-shadow:0 1px 12px rgba(0,0,0,.95)}
.hud b{text-shadow:0 1px 12px rgba(0,0,0,.95),0 0 22px rgba(212,175,55,.3)}
.cue{color:#8f8f88;text-shadow:0 1px 10px rgba(0,0,0,.9)}

/* ==========================================================================
   FACTS — each figure earns a tick that fills on arrival, echoing the
   nine seats at the finish
   ========================================================================== */
.fact::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%) scaleX(0);
  width:clamp(28px,4vw,52px);height:3px;background:var(--gold);transform-origin:center;
  transition:transform .8s var(--e-out) calc(var(--d,0ms) + .35s);
}
.fact.in::after{transform:translateX(-50%) scaleX(1)}

/* ==========================================================================
   NAV SHUTTER — a hairline of gold sweeps the frame on every anchor jump,
   so navigation feels like an instrument indexing, not a page jumping
   ========================================================================== */
.shutter{
  position:fixed;left:0;right:0;top:0;height:2px;z-index:960;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold-hi) 50%,var(--gold) 70%,transparent);
  box-shadow:0 0 18px rgba(212,175,55,.6);
  transform:translate3d(0,-4px,0);opacity:0;
}
.shutter.go{animation:shutter .9s var(--e-out) forwards}
@keyframes shutter{
  0%{opacity:0;transform:translate3d(0,-4px,0)}
  8%{opacity:1}
  100%{opacity:0;transform:translate3d(0,100vh,0)}
}

/* marquee direction/speed are driven from JS via custom properties */
.marq__t{animation-duration:var(--marq-dur,38s);animation-direction:var(--marq-dir,normal)}

@media (prefers-reduced-motion:reduce){
  .shutter{display:none}
  .cursor__lbl{display:none}
  .rail__fill{stroke-dashoffset:0}
  .fact::after{transform:translateX(-50%) scaleX(1)}
}

/* ==========================================================================
   PROTAGONISTAS · ENCAIXE DA GRADE
   Duas presidências com span 2 nunca fecham uma linha de 3 colunas: a
   primeira ocupa 1–2, a segunda não cabe em 3 e desce, deixando um vão
   permanente no alto. Em 3 colunas cada presidência toma a linha inteira;
   o span 2 volta só em 4 colunas, onde as duas fecham a primeira faixa.
   ========================================================================== */
@media (min-width:700px) and (max-width:1099px){
  .pc--lead{grid-column:1 / -1}
  .pc--lead .pc__ph{aspect-ratio:21/9}
  .pc--lead .pc__ph img{object-position:center 26%}
}
@media (min-width:1100px){
  .pc--lead{grid-column:span 2}
}

/* ==========================================================================
   CONVITE · LIMIAR PRÓPRIO
   Os outros grids de duas colunas emparelham texto com imagem, cujo
   min-content é desprezível — a proporção .92/1.08 vale desde 1100px.
   Aqui o par é texto + contagem, um painel rígido de ~530px. Em 1100px
   sobram 399px para o texto, ou 34 caracteres por linha. A conta pede
   527px de texto + 534 de painel + 34 de gap = 1095px de contêiner, que
   só aparece a partir de ~1200px de viewport.
   ========================================================================== */
#convite .g-2-alt{grid-template-columns:1fr}
@media (min-width:1200px){
  /* proporcao invertida: a contagem e um instrumento de tamanho fixo e nao
     ganha nada com largura extra; quem precisa dela e a superficie de leitura */
  #convite .g-2-alt{grid-template-columns:1.08fr .92fr;align-items:center}
}