/* =============================================================
   TECHNOVATION '26 — GREEKS TO GEEKS
   Shared design system : midnight navy · antique gold · marble
   ============================================================= */

:root{
  /* --- palette : circuit black · engraved silver · acid-green accent --- */
  --navy-900:#000000;
  --navy-850:#050605;
  --navy-800:#090b09;
  --navy-700:#0e120e;
  --navy-600:#161b16;
  --navy-500:#212821;

  --marble-50:#f5f8f5;
  --marble-100:#e6ece6;
  --marble-200:#c1cbc1;
  --marble-300:#98a598;
  --stone-400:#71806f;
  --stone-500:#4c5a4a;
  --mist:#454f43;

  /* accent ramp — acid / circuit green, engraved-metal on dark */
  --gold-200:#eafce4;
  --gold-300:#c9f0b8;
  --gold-400:#9fdb84;
  --gold-500:#7ec95f;
  --gold-600:#4f9a3d;
  --gold-700:#2c5a24;

  --silver:#c7ccd4;

  --ink:#000000;

  /* --- semantic --- */
  --bg:var(--navy-900);
  --fg:var(--marble-100);
  --muted:var(--stone-400);

  /* --- type --- */
  --display:"Cinzel", serif;
  --serif:"Cormorant Garamond", Georgia, serif;
  --tech:"Chakra Petch", ui-monospace, monospace;
  --mech:"Orbitron","Chakra Petch",sans-serif;

  /* --- spatial --- */
  --maxw:1240px;
  --pad:clamp(20px, 5vw, 64px);
  --radius:2px;

  --gold-line:linear-gradient(90deg,transparent,var(--gold-500) 18%,var(--gold-200) 50%,var(--gold-500) 82%,transparent);
  --ease:cubic-bezier(.2,.7,.2,1);

  /* engraved chrome gradient for wordmark/headings — light source top-left, poster-style */
  --chrome:linear-gradient(135deg,var(--marble-50) 0%,var(--marble-200) 28%,var(--stone-500) 52%,var(--marble-100) 68%,var(--stone-400) 100%);
  --glow:rgba(158,219,132,.85);
  --glow-cy:#9fdb84;
}


/* ----------------------------- reset ----------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--serif);
  font-size:clamp(1.02rem,.5vw + .95rem,1.18rem);
  line-height:1.65;
  font-weight:500;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}
::selection{background:var(--gold-400);color:var(--navy-900)}

/* atmospheric base layers (navy mist + faint grid) on every page */
body::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(120% 80% at 50% -10%, #11161d 0%, transparent 55%),
    radial-gradient(90% 60% at 85% 14%, rgba(130,170,120,.05) 0%, transparent 60%),
    radial-gradient(70% 50% at 12% 82%, rgba(120,140,170,.04) 0%, transparent 60%),
    linear-gradient(180deg, #060708, #000 55%, #000);
}
/* faint perspective circuit grid baked into the page bg */
body::after{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.6;
  background-image:
    linear-gradient(rgba(130,170,120,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(130,170,120,.05) 1px,transparent 1px);
  background-size:54px 54px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%,#000,transparent 80%);
          mask-image:radial-gradient(120% 90% at 50% 30%,#000,transparent 80%);
}
/* film grain + scanline overlay */
.grain{
  position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
.scan{
  position:fixed;inset:0;z-index:9991;pointer-events:none;opacity:.35;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.vignette{
  position:fixed;inset:0;z-index:9989;pointer-events:none;
  box-shadow:inset 0 0 240px 40px rgba(0,0,0,.65);
}

/* ----------------------------- custom cursor ----------------------------- */
@media (hover:hover) and (pointer:fine){
  body.cursor-on{cursor:none}
  .cursor-ring,.cursor-dot{position:fixed;top:0;left:0;z-index:99999;pointer-events:none;border-radius:50%;mix-blend-mode:difference}
  .cursor-ring{width:34px;height:34px;border:1px solid var(--gold-300);transform:translate(-50%,-50%);transition:width .25s var(--ease),height .25s var(--ease),background .25s,border-color .25s}
  .cursor-dot{width:5px;height:5px;background:var(--gold-200);transform:translate(-50%,-50%)}
  body.cursor-hot .cursor-ring{width:54px;height:54px;background:rgba(158,219,132,.12);border-color:var(--gold-200)}
}
@media (hover:none),(pointer:coarse){.cursor-ring,.cursor-dot{display:none}}

/* ----------------------------- layout helpers ----------------------------- */
.wrap{width:min(100% - 2*var(--pad), var(--maxw));margin-inline:auto}
.wide{width:min(100% - 2*var(--pad), 1500px);margin-inline:auto}
section{position:relative;z-index:1}
.pad-y{padding-block:clamp(64px,9vw,140px)}

/* global scroll-reactive FX canvas — behind content, above the base layers */
#fx-bg{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
body.fx-glitch{will-change:filter}

/* ----------------------------- typography ----------------------------- */
.display{font-family:var(--display);font-weight:900;line-height:.92;letter-spacing:.01em;text-transform:uppercase}
.tech{font-family:var(--tech)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1;letter-spacing:.02em;text-transform:uppercase;color:var(--marble-50);filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
@supports (background-clip:text) or (-webkit-background-clip:text){
  h1,h2,h3,h4{color:transparent;background:var(--chrome);-webkit-background-clip:text;background-clip:text}
}
h2{font-size:clamp(2rem,5vw,3.6rem)}
h3{font-size:clamp(1.3rem,2.6vw,2rem)}
p{max-width:68ch}
.lead{font-size:clamp(1.2rem,1.4vw,1.5rem);color:var(--marble-200);font-style:italic;font-weight:500}

/* eyebrow / label */
.eyebrow{
  font-family:var(--tech);font-weight:600;text-transform:uppercase;
  letter-spacing:.42em;font-size:.72rem;color:var(--gold-300);
  display:inline-flex;align-items:center;gap:.9em;
}
.eyebrow::before,.eyebrow.two::after{
  content:"";width:clamp(20px,4vw,52px);height:1px;background:var(--gold-line);display:inline-block
}
.gold-text{
  color:var(--gold-400);
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .gold-text{background:linear-gradient(180deg,var(--gold-200),var(--gold-400) 55%,var(--gold-600));-webkit-background-clip:text;background-clip:text;color:transparent}
}
.silver-text{
  color:var(--marble-200);
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .silver-text{background:linear-gradient(180deg,#fff,var(--silver) 45%,#7d828c 78%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent}
}

/* meander (Greek key) divider */
.meander{
  height:18px;width:100%;
  background:
    repeating-linear-gradient(90deg,var(--gold-500) 0 2px,transparent 2px 16px) 0 0/100% 2px no-repeat,
    repeating-linear-gradient(90deg,var(--gold-500) 0 2px,transparent 2px 16px) 0 100%/100% 2px no-repeat;
  position:relative;opacity:.0;animation:fadein .8s var(--ease) forwards}
.meander-svg{display:block;width:100%;height:26px;opacity:.7}
.meander-svg path,.meander-svg line{stroke:var(--gold-500)}

/* small circuit-node flourish used as section ornament */
.ornament{display:flex;align-items:center;justify-content:center;gap:14px;color:var(--gold-400);margin-inline:auto}
.ornament .bar{height:1px;width:min(28vw,260px);background:var(--gold-line)}
.ornament .glyph{font-family:var(--display);font-size:1.1rem;letter-spacing:.3em;color:var(--gold-300)}

/* ----------------------------- buttons ----------------------------- */
.btn{
  --bc:var(--gold-400);
  position:relative;display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--tech);font-weight:600;text-transform:uppercase;letter-spacing:.22em;
  font-size:.82rem;padding:1.05em 2.1em;color:var(--gold-200);
  border:1px solid var(--bc);background:linear-gradient(180deg,rgba(158,219,132,.16),rgba(158,219,132,.03));
  border-radius:var(--radius);overflow:hidden;isolation:isolate;
  transition:color .35s var(--ease),box-shadow .35s var(--ease),transform .25s var(--ease);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(120deg,var(--gold-500),var(--gold-300) 50%,var(--gold-500));
  transform:translateY(101%);transition:transform .4s var(--ease);
}
.btn:hover{color:var(--navy-900);box-shadow:0 0 30px -4px rgba(158,219,132,.6)}
.btn:hover::before{transform:translateY(0)}
.btn .arr{transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn.solid{background:linear-gradient(120deg,var(--gold-500),var(--gold-300) 50%,var(--gold-500));color:var(--navy-900);font-weight:700}
.btn.solid::before{background:linear-gradient(120deg,#fff,var(--gold-200))}
.btn.ghost{--bc:rgba(150,180,140,.5);color:var(--marble-100);background:rgba(255,255,255,.02)}
.btn.ghost::before{background:linear-gradient(120deg,var(--marble-200),#fff)}
.btn.ghost:hover{color:var(--navy-900)}
.btn.sm{padding:.7em 1.2em;font-size:.72rem}

/* ----------------------------- navigation ----------------------------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:16px var(--pad);
  transition:background .4s var(--ease),backdrop-filter .4s,border-color .4s,padding .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:linear-gradient(180deg,rgba(7,13,22,.92),rgba(7,13,22,.72));
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:rgba(158,219,132,.22);
  padding-block:11px;
}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:900;letter-spacing:.12em;font-size:1.05rem;color:var(--marble-50)}
.brand .mark{width:30px;height:30px;flex:none;display:grid;place-items:center}
.brand .mark svg{width:100%;height:100%}
.brand b{color:var(--gold-300)}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,34px)}
.nav-links a{
  font-family:var(--tech);font-weight:500;text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;
  color:var(--marble-200);position:relative;padding:6px 2px;transition:color .3s
}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold-line);transition:right .35s var(--ease)}
.nav-links a:hover,.nav-links a.active{color:var(--gold-200)}
.nav-links a:hover::after,.nav-links a.active::after{right:0}
.nav-cta{margin-left:6px}
.burger{display:none;width:42px;height:42px;border:1px solid rgba(158,219,132,.4);border-radius:var(--radius);position:relative}
.burger span{position:absolute;left:11px;right:11px;height:1.6px;background:var(--gold-300);transition:.3s var(--ease)}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:20px}.burger span:nth-child(3){top:25px}
body.menu-open .burger span:nth-child(1){top:20px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:20px;transform:rotate(-45deg)}

@media (max-width:920px){
  .nav-links{
    position:fixed;inset:0 0 0 auto;width:min(82vw,380px);flex-direction:column;justify-content:center;
    align-items:flex-start;gap:26px;padding:0 12vw;
    background:linear-gradient(180deg,rgba(8,15,26,.98),rgba(5,9,16,.99));
    border-left:1px solid rgba(158,219,132,.25);
    transform:translateX(100%);transition:transform .5s var(--ease);
  }
  body.menu-open .nav-links{transform:translateX(0)}
  .nav-links a{font-size:1rem}
  .nav-cta{margin:14px 0 0}
  .burger{display:block}
  .nav .nav-cta.desk{display:none}
}

/* ----------------------------- framed marble panel ----------------------------- */
.panel{
  position:relative;
  background:
    linear-gradient(150deg,rgba(24,38,60,.55),rgba(10,19,31,.7)),
    radial-gradient(120% 120% at 0 0,rgba(158,219,132,.06),transparent 50%);
  border:1px solid rgba(150,180,140,.14);
  border-radius:var(--radius);
  padding:clamp(26px,4vw,52px);
  overflow:hidden;
}
.panel.gold-edge{border-color:rgba(158,219,132,.3)}
/* gold corner brackets */
.corner{position:absolute;width:26px;height:26px;border:1.5px solid var(--gold-400);opacity:.85;pointer-events:none}
.corner.tl{top:12px;left:12px;border-right:0;border-bottom:0}
.corner.tr{top:12px;right:12px;border-left:0;border-bottom:0}
.corner.bl{bottom:12px;left:12px;border-right:0;border-top:0}
.corner.br{bottom:12px;right:12px;border-left:0;border-top:0}

/* ----------------------------- reveal animation ----------------------------- */
.reveal{opacity:0}
.reveal.in{opacity:1;animation:reveal-tech .66s var(--ease) backwards}
.reveal[data-d="1"]{animation-delay:.07s}
.reveal[data-d="2"]{animation-delay:.14s}
.reveal[data-d="3"]{animation-delay:.21s}
.reveal[data-d="4"]{animation-delay:.28s}
.reveal[data-d="5"]{animation-delay:.35s}
.reveal[data-d="6"]{animation-delay:.42s}
@keyframes reveal-tech{
  0%   {opacity:0;clip-path:inset(0 100% 0 0);transform:translate3d(-14px,0,0) skewX(7deg)}
  16%  {opacity:1}
  44%  {clip-path:inset(0 0 0 0);transform:translate3d(0,0,0) skewX(0deg)}
  52%  {transform:translate3d(6px,0,0);text-shadow:-3px 0 0 var(--glow-cy),3px 0 0 #ff4d6d}
  60%  {transform:translate3d(-4px,0,0)}
  68%  {transform:translate3d(2px,0,0);text-shadow:none}
  100% {opacity:1;clip-path:inset(0 0 0 0);transform:none;text-shadow:none}
}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1}.reveal.in{animation:none}}
@keyframes fadein{to{opacity:1}}

/* ============================================================
   HERO (opening page)
   ============================================================ */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;isolation:isolate;overflow:hidden}
#bg-canvas{position:absolute;inset:0;z-index:-1;width:100%;height:100%;display:block}
.hero-fallback{position:absolute;inset:0;z-index:-2;background:
  radial-gradient(60% 50% at 50% 42%, rgba(158,219,132,.10), transparent 70%),
  radial-gradient(120% 80% at 50% 0,#11161d,transparent 60%)}
/* vignette specifically over hero to seat the text */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 60%,transparent 30%,rgba(5,9,16,.55) 78%,rgba(5,9,16,.92));}
.hero-inner{width:min(100% - 2*var(--pad),var(--maxw));margin-inline:auto;text-align:center;padding-top:90px;padding-bottom:clamp(56px,9vh,96px)}
.hero .presents{margin-bottom:clamp(14px,3vw,30px)}
.hero .presents .school{
  font-family:var(--tech);font-weight:600;letter-spacing:.46em;text-transform:uppercase;
  font-size:clamp(.62rem,1.6vw,.92rem);color:var(--marble-200)}
.hero .presents .presents-word{
  display:block;margin-top:10px;font-family:var(--tech);letter-spacing:.7em;font-size:.66rem;color:var(--gold-300);text-transform:uppercase}
.titanic{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(3rem,15.5vw,15rem);line-height:.82;letter-spacing:-.01em;
  color:var(--marble-50);
  filter:drop-shadow(0 6px 30px rgba(0,0,0,.6));
  position:relative;
}
@supports (background-clip:text) or (-webkit-background-clip:text){
  .titanic{color:transparent;background:var(--chrome);-webkit-background-clip:text;background-clip:text}
}
.hero .tagline{
  margin:clamp(12px,2.4vw,26px) auto 0;display:flex;flex-wrap:wrap;gap:.5em 1em;
  align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.16em;
  font-size:clamp(.95rem,2.5vw,2rem)}
.hero .tagline .arrow{color:var(--gold-300);font-family:var(--tech)}
.hero .subtitle{margin:18px auto 0;max-width:46ch;color:var(--marble-200);font-style:italic;font-size:clamp(1.05rem,1.5vw,1.4rem)}
.hero .meta{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:center;margin-top:clamp(26px,4vw,44px);
  font-family:var(--tech);letter-spacing:.2em;text-transform:uppercase;font-size:.8rem;color:var(--marble-200)}
.hero .meta b{color:var(--gold-300);font-weight:600}
.hero .meta .dot{width:5px;height:5px;border-radius:50%;background:var(--gold-400)}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:clamp(30px,4vw,46px)}
.hint{position:absolute;left:0;right:0;bottom:26px;text-align:center;font-family:var(--tech);
  letter-spacing:.3em;text-transform:uppercase;font-size:.64rem;color:var(--gold-300);opacity:.8;z-index:2}
.hint .mouse{display:block;margin:0 auto 10px;width:22px;height:34px;border:1px solid var(--gold-400);border-radius:12px;position:relative}
.hint .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:7px;border-radius:2px;background:var(--gold-300);transform:translateX(-50%);animation:scroll 1.6s var(--ease) infinite}
@keyframes scroll{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}70%{opacity:1}100%{opacity:0;transform:translate(-50%,12px)}}

/* live readout chip for the bg sim */
.sim-readout{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(14px,2.4vh,26px);z-index:2;font-family:var(--tech);font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold-300);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;opacity:.85;pointer-events:none}
.sim-readout .pip{width:7px;height:7px;border-radius:50%;background:var(--gold-300);box-shadow:0 0 10px var(--gold-300);animation:pulse 1.4s infinite;flex-shrink:0}
@keyframes pulse{50%{opacity:.3}}
@media (max-width:720px){.sim-readout{display:none}}

/* ============================================================
   ABOUT / FEATURE SECTIONS
   ============================================================ */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,68px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:36px}}
.kicker-block .eyebrow{margin-bottom:22px}
.kicker-block h2{margin-bottom:22px}
.kicker-block p + p{margin-top:16px}
.dropcap::first-letter{font-family:var(--display);font-weight:900;float:left;font-size:3.6em;line-height:.72;padding:.06em .12em 0 0;color:var(--gold-300)}

/* poster frame with voxel scatter */
.poster-frame{position:relative;padding:14px;background:linear-gradient(160deg,rgba(158,219,132,.25),rgba(158,219,132,.05));border-radius:var(--radius)}
.poster-frame::before{content:"";position:absolute;inset:6px;border:1px solid rgba(158,219,132,.4);pointer-events:none;z-index:3}
.poster-frame img{border-radius:1px;filter:contrast(1.03) saturate(1.02)}
.poster-frame .vx{position:absolute;width:10px;height:10px;background:var(--marble-200);opacity:.0;box-shadow:0 0 8px rgba(0,0,0,.4)}
.poster-frame:hover .vx{animation:vfloat 2.4s var(--ease) infinite}
@keyframes vfloat{0%{opacity:0;transform:translate(0,0) rotate(0)}20%{opacity:.9}100%{opacity:0;transform:translate(var(--vx,30px),var(--vy,-30px)) rotate(120deg)}}

/* column motif decoration */
.col-art{display:flex;gap:18px;justify-content:center;align-items:flex-end;opacity:.9}
.greek-col{width:46px;height:var(--h,180px);position:relative;
  background:repeating-linear-gradient(90deg,var(--marble-200) 0 2px,var(--stone-400) 2px 7px);
  border-radius:3px 3px 0 0}
.greek-col::before{content:"";position:absolute;top:-12px;left:-8px;right:-8px;height:12px;background:var(--marble-100);border-radius:3px}
.greek-col::after{content:"";position:absolute;bottom:0;left:-10px;right:-10px;height:10px;background:var(--stone-400)}

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(158,219,132,.18);border:1px solid rgba(158,219,132,.18)}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:linear-gradient(180deg,rgba(12,26,40,.85),rgba(7,13,22,.92));padding:clamp(26px,4vw,42px) 18px;text-align:center}
.stat .n{font-family:var(--display);font-weight:900;font-size:clamp(2.4rem,5vw,3.8rem);line-height:1}
.stat .l{font-family:var(--tech);letter-spacing:.24em;text-transform:uppercase;font-size:.68rem;color:var(--muted);margin-top:10px}

/* ============================================================
   EVENT CARDS
   ============================================================ */
.events-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:22px}
.ev-card{
  position:relative;display:flex;flex-direction:column;gap:14px;
  padding:30px 26px 26px;min-height:300px;
  background:linear-gradient(165deg,rgba(18,32,50,.7),rgba(8,15,26,.85));
  border:1px solid rgba(150,180,140,.12);border-radius:var(--radius);
  overflow:hidden;isolation:isolate;
  transition:transform .5s var(--ease),border-color .5s,box-shadow .5s;
}
.ev-card::after{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .5s;
  background:radial-gradient(120% 90% at 100% 0,rgba(158,219,132,.16),transparent 55%)}
.ev-card:hover{transform:translateY(-7px);border-color:rgba(158,219,132,.5);box-shadow:0 24px 50px -28px rgba(0,0,0,.9)}
.ev-card:hover::after{opacity:1}
.ev-card .idx{position:absolute;top:18px;right:20px;font-family:var(--display);font-weight:900;font-size:2.4rem;color:rgba(158,219,132,.16);line-height:1}
.ev-card .ev-glyph{width:50px;height:50px;display:grid;place-items:center;border:1px solid rgba(158,219,132,.4);border-radius:50%;color:var(--gold-300)}
.ev-card .ev-glyph svg{width:26px;height:26px}
.ev-card .ev-greek{font-family:var(--tech);letter-spacing:.2em;text-transform:uppercase;font-size:.66rem;color:var(--gold-300)}
.ev-card h3{font-size:1.5rem;color:var(--marble-50);letter-spacing:.02em}
.ev-card .ev-disc{font-family:var(--tech);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-400)}
.ev-card p{font-size:1.02rem;color:var(--marble-200);flex:1}
.ev-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:14px;border-top:1px solid rgba(150,180,140,.1)}
.tag{font-family:var(--tech);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;padding:.4em .8em;border:1px solid rgba(158,219,132,.4);border-radius:99px;color:var(--gold-200)}
.tag.team{border-color:rgba(122,170,255,.45);color:#bcd4ff}
.ev-card .more{font-family:var(--tech);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--marble-200);display:inline-flex;gap:.5em;transition:gap .3s,color .3s}
.ev-card:hover .more{color:var(--gold-200);gap:.9em}

/* filter chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:42px}
.chip{font-family:var(--tech);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:.6em 1.2em;border:1px solid rgba(150,180,140,.22);border-radius:99px;color:var(--marble-200);transition:.3s var(--ease)}
.chip:hover{border-color:rgba(158,219,132,.6);color:var(--gold-200)}
.chip.active{background:linear-gradient(120deg,var(--gold-500),var(--gold-300));color:var(--navy-900);border-color:transparent;font-weight:600}
.ev-card.hide{display:none}

/* ============================================================
   SCHEDULE / TIMELINE
   ============================================================ */
.timeline{position:relative;max-width:920px;margin-inline:auto;padding-left:6px;--tl-col:118px}
.timeline::before{content:"";position:absolute;left:var(--tl-col);top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,transparent,var(--gold-500) 8%,var(--gold-500) 92%,transparent)}
@media (max-width:640px){.timeline{--tl-col:56px}}
.slot{position:relative;display:grid;grid-template-columns:var(--tl-col) 1fr;gap:26px;padding-block:14px}
@media (max-width:640px){.slot{gap:14px}}
.slot .time{font-family:var(--tech);font-weight:600;letter-spacing:.08em;font-size:.9rem;color:var(--gold-200);text-align:right;padding-top:14px;padding-right:14px}
@media (max-width:640px){.slot .time{font-size:.68rem;padding-right:10px;letter-spacing:.04em}}
.slot .node{position:absolute;left:var(--tl-col);top:24px;width:14px;height:14px;transform:translateX(-50%);border-radius:50%;background:var(--navy-800);border:2px solid var(--gold-400);box-shadow:0 0 0 4px rgba(7,13,22,1),0 0 16px rgba(158,219,132,.5)}
.slot .card{background:linear-gradient(150deg,rgba(18,32,50,.7),rgba(8,15,26,.85));border:1px solid rgba(150,180,140,.12);
  border-radius:var(--radius);padding:18px 22px;transition:border-color .4s,transform .4s}
.slot .card:hover{border-color:rgba(158,219,132,.45);transform:translateX(4px)}
.slot .card h4{font-size:1.2rem;color:var(--marble-50);margin-bottom:5px}
.slot .card .where{font-family:var(--tech);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-400)}
.slot .card p{font-size:.98rem;color:var(--marble-200);margin-top:6px}
.slot.key .node{background:var(--gold-300);box-shadow:0 0 0 4px rgba(7,13,22,1),0 0 22px var(--gold-300)}
.slot.key .card{border-color:rgba(158,219,132,.5);background:linear-gradient(150deg,rgba(40,32,12,.55),rgba(12,19,31,.85))}

/* ============================================================
   PAGE HEADER (interior pages)
   ============================================================ */
.page-head{position:relative;padding-top:clamp(130px,16vh,180px);padding-bottom:clamp(36px,5vw,60px);text-align:center;overflow:hidden}
.page-head .ring{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:min(80vw,720px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(158,219,132,.16);pointer-events:none}
.page-head .ring.r2{width:min(58vw,520px);border-style:dashed;border-color:rgba(158,219,132,.12)}
.page-head h1{font-size:clamp(2.6rem,9vw,6rem);margin-block:14px}
.page-head .sub{max-width:60ch;margin:14px auto 0;color:var(--marble-200);font-style:italic;font-size:clamp(1.05rem,1.5vw,1.35rem)}
.crumb{font-family:var(--tech);letter-spacing:.24em;text-transform:uppercase;font-size:.7rem;color:var(--stone-400)}
.crumb b{color:var(--gold-300);font-weight:600}

/* ============================================================
   REGISTRATION
   ============================================================ */
.reg-grid{display:grid;grid-template-columns:1fr 350px;gap:34px;align-items:start}
@media (max-width:980px){.reg-grid{grid-template-columns:1fr}}
.steps{display:flex;gap:10px;align-items:center;margin-bottom:30px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:12px;flex:1;min-width:160px}
.step .num{width:38px;height:38px;flex:none;border-radius:50%;display:grid;place-items:center;font-family:var(--tech);font-weight:600;
  border:1px solid rgba(150,180,140,.3);color:var(--marble-200);transition:.4s var(--ease)}
.step .lbl{font-family:var(--tech);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-400);transition:.4s}
.step .line{flex:1;height:1px;background:rgba(150,180,140,.18)}
.step.active .num{background:linear-gradient(120deg,var(--gold-500),var(--gold-300));border-color:transparent;color:var(--navy-900)}
.step.active .lbl{color:var(--gold-200)}
.step.done .num{border-color:var(--gold-500);color:var(--gold-300)}
.step.done .line{background:var(--gold-500)}

.fieldset{display:none;animation:slidein .5s var(--ease)}
.fieldset.show{display:block}
@keyframes slidein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.field{margin-bottom:22px}
.field label{display:block;font-family:var(--tech);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-200);margin-bottom:9px}
.field .req{color:var(--gold-400)}
.field input,.field select,.field textarea{
  width:100%;padding:.95em 1.05em;background:rgba(7,13,22,.6);color:var(--marble-50);
  border:1px solid rgba(150,180,140,.22);border-radius:var(--radius);font-family:var(--tech);font-size:.95rem;
  transition:border-color .3s,box-shadow .3s,background .3s}
.field input::placeholder,.field textarea::placeholder{color:var(--stone-500)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold-400);box-shadow:0 0 0 3px rgba(158,219,132,.16);background:rgba(12,26,40,.8)}
.field.bad input,.field.bad select{border-color:#d9774e;box-shadow:0 0 0 3px rgba(217,119,78,.16)}
.field .err{display:none;color:#e89a78;font-family:var(--tech);font-size:.7rem;letter-spacing:.06em;margin-top:7px}
.field.bad .err{display:block}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
@media (max-width:560px){.grid-2{grid-template-columns:1fr}}

.event-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.pick{position:relative;cursor:pointer;display:block}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick .box{padding:16px 16px;border:1px solid rgba(150,180,140,.2);border-radius:var(--radius);background:rgba(7,13,22,.5);
  transition:.3s var(--ease);height:100%}
.pick .box .pg{font-family:var(--tech);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-400)}
.pick .box .pn{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.05rem;color:var(--marble-100);margin-top:3px;letter-spacing:.02em}
.pick .box .pt{font-family:var(--tech);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300);margin-top:8px;display:inline-block}
.pick:hover .box{border-color:rgba(158,219,132,.45)}
.pick input:checked + .box{border-color:var(--gold-400);background:linear-gradient(160deg,rgba(40,32,12,.55),rgba(12,19,31,.8));box-shadow:0 0 22px -6px rgba(158,219,132,.5)}
.pick input:checked + .box::after{content:"✓";position:absolute;top:10px;right:12px;color:var(--gold-200);font-family:var(--tech);font-weight:700}

.form-nav{display:flex;justify-content:space-between;gap:14px;margin-top:30px}
.summary{position:sticky;top:96px}
.summary .panel{padding:26px}
.summary h4{font-size:1.15rem;margin-bottom:16px;color:var(--gold-200)}
.sum-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed rgba(150,180,140,.14);font-family:var(--tech);font-size:.82rem}
.sum-row .k{color:var(--stone-400);letter-spacing:.08em;text-transform:uppercase;font-size:.68rem}
.sum-row .v{color:var(--marble-100);text-align:right}
.sum-events{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.sum-events span{font-family:var(--tech);font-size:.78rem;color:var(--marble-100);display:flex;gap:8px;align-items:center}
.sum-events span::before{content:"";width:6px;height:6px;background:var(--gold-400);flex:none}
.sum-empty{color:var(--stone-500);font-style:italic;font-family:var(--serif)}
.sum-total{margin-top:16px;padding-top:14px;border-top:1px solid rgba(158,219,132,.3);display:flex;justify-content:space-between;align-items:baseline}
.sum-total .k{font-family:var(--tech);letter-spacing:.16em;text-transform:uppercase;font-size:.7rem;color:var(--gold-200)}
.sum-total .v{font-family:var(--display);font-weight:900;font-size:1.8rem}

.review-list{display:grid;gap:14px}
.review-row{display:grid;grid-template-columns:160px 1fr;gap:14px;padding:12px 0;border-bottom:1px dashed rgba(150,180,140,.14)}
@media (max-width:540px){.review-row{grid-template-columns:1fr;gap:3px}}
.review-row .rk{font-family:var(--tech);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300)}
.review-row .rv{color:var(--marble-50)}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:22px;font-size:.95rem;color:var(--marble-200)}
.consent input{margin-top:5px;accent-color:var(--gold-400);width:18px;height:18px}

/* success overlay */
.success{position:fixed;inset:0;z-index:5000;display:none;place-items:center;padding:24px;
  background:radial-gradient(60% 60% at 50% 40%,rgba(12,26,40,.95),rgba(5,9,16,.98))}
.success.show{display:grid}
.success .seal{max-width:540px;text-align:center;position:relative}
.success .laurel{font-family:var(--display);font-size:4rem;color:var(--gold-300);margin-bottom:10px;filter:drop-shadow(0 0 30px rgba(158,219,132,.5))}
.success h2{margin-bottom:12px}
.success .code{font-family:var(--tech);letter-spacing:.2em;color:var(--gold-200);margin:18px 0;padding:12px;border:1px dashed rgba(158,219,132,.4);display:inline-block}
.confetti{position:fixed;width:9px;height:9px;z-index:5001;pointer-events:none;top:-20px}

/* ============================================================
   SYMPOSIUM (special rep event)
   ============================================================ */
.symp-hero{position:relative;min-height:92svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.symp-hero .halo{position:absolute;right:-12%;top:50%;transform:translateY(-50%);width:min(75vw,820px);aspect-ratio:1;z-index:-1}
.symp-hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.symp-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 80% at 30% 50%,rgba(5,9,16,.9),rgba(5,9,16,.4) 60%,transparent)}
.symp-hero .inner{width:min(100% - 2*var(--pad),var(--maxw));margin-inline:auto}
.symp-hero .badge{display:inline-flex;align-items:center;gap:10px;font-family:var(--tech);letter-spacing:.28em;text-transform:uppercase;font-size:.7rem;
  color:var(--gold-200);border:1px solid rgba(158,219,132,.4);padding:.6em 1.1em;border-radius:99px;margin-bottom:26px}
.symp-hero .badge .pip{width:7px;height:7px;border-radius:50%;background:var(--gold-300);box-shadow:0 0 10px var(--gold-300);animation:pulse 1.4s infinite}
.symp-title{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(3rem,11vw,8.5rem);line-height:.85;max-width:14ch}
.symp-hero .desc{max-width:54ch;margin-top:24px;color:var(--marble-200);font-style:italic;font-size:clamp(1.1rem,1.6vw,1.45rem)}
.symp-meta{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:30px;font-family:var(--tech);letter-spacing:.16em;text-transform:uppercase;font-size:.78rem;color:var(--marble-200)}
.symp-meta b{color:var(--gold-300)}

.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:860px){.feat-grid{grid-template-columns:1fr}}
.feat{padding:30px 26px;background:linear-gradient(165deg,rgba(18,32,50,.6),rgba(8,15,26,.8));border:1px solid rgba(150,180,140,.12);border-radius:var(--radius);transition:.4s var(--ease)}
.feat:hover{border-color:rgba(158,219,132,.4);transform:translateY(-5px)}
.feat .fn{font-family:var(--display);font-weight:900;font-size:1.8rem;color:var(--gold-300)}
.feat h4{margin:10px 0 8px;font-size:1.2rem;color:var(--marble-50)}
.feat p{font-size:1rem;color:var(--marble-200)}

/* council / reps */
.council{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.rep{position:relative;text-align:center;padding:30px 22px;border:1px solid rgba(150,180,140,.12);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18,32,50,.6),rgba(8,15,26,.82));overflow:hidden;transition:.4s var(--ease)}
.rep:hover{border-color:rgba(158,219,132,.45);transform:translateY(-5px)}
.rep .av{width:92px;height:92px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#1a2230,#0a0c10);border:1px solid rgba(158,219,132,.4);
  font-family:var(--display);font-weight:900;font-size:1.9rem;color:var(--gold-200)}
.rep .rn{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:1.15rem;color:var(--marble-50);letter-spacing:.04em}
.rep .rr{font-family:var(--tech);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-300);margin-top:6px}
.rep .rq{font-size:.96rem;color:var(--marble-200);margin-top:12px;font-style:italic}

/* prize laurels */
.prizes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:end}
@media (max-width:760px){.prizes{grid-template-columns:1fr}}
.prize{text-align:center;padding:34px 22px;border:1px solid rgba(150,180,140,.14);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(18,32,50,.55),rgba(8,15,26,.8));position:relative}
.prize.gold{border-color:rgba(158,219,132,.55);background:linear-gradient(180deg,rgba(40,32,12,.5),rgba(10,17,28,.85));transform:translateY(-14px)}
.prize .rank{font-family:var(--tech);letter-spacing:.2em;text-transform:uppercase;font-size:.7rem;color:var(--stone-400)}
.prize.gold .rank{color:var(--gold-200)}
.prize .amt{font-family:var(--display);font-weight:900;font-size:clamp(2rem,4vw,3rem);margin:8px 0;line-height:1}
.prize .laurel-ic{font-size:1.6rem;color:var(--gold-300)}

/* ============================================================
   FOOTER
   ============================================================ */
.foot{position:relative;z-index:1;padding-top:64px;padding-bottom:34px;border-top:1px solid rgba(158,219,132,.18);
  background:linear-gradient(180deg,transparent,rgba(7,13,22,.6))}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:28px}}
.foot h5{font-family:var(--tech);letter-spacing:.2em;text-transform:uppercase;font-size:.72rem;color:var(--gold-300);margin-bottom:16px}
.foot a{font-family:var(--tech);font-size:.84rem;color:var(--marble-200);display:inline-block;padding:4px 0;transition:color .3s}
.foot a:hover{color:var(--gold-200)}
.foot .bigname{font-family:var(--display);font-weight:900;font-size:1.6rem;color:var(--marble-50);letter-spacing:.08em}
.foot .bigname b{color:var(--gold-300)}
.foot .blurb{margin-top:14px;color:var(--marble-200);font-size:1rem;max-width:38ch}
.foot-bottom{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-top:44px;padding-top:22px;border-top:1px solid rgba(150,180,140,.1);
  font-family:var(--tech);font-size:.72rem;letter-spacing:.1em;color:var(--stone-500)}

/* ----------------------------- misc ----------------------------- */
.note{font-family:var(--tech);font-size:.72rem;letter-spacing:.06em;color:var(--stone-500);font-style:normal}
.center{text-align:center}
.mt-l{margin-top:clamp(34px,5vw,60px)}
.mb-l{margin-bottom:clamp(34px,5vw,60px)}
.gold-rule{height:1px;width:100%;background:var(--gold-line);margin-block:clamp(40px,6vw,80px)}

/* ============================================================
   GLITCH FX — text RGB-split bursts + full-screen interference
   (JS-driven via glitch.js; all motion gated to no-preference)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .glitch-rgb{
    animation: gRGB var(--gdur,.3s) steps(10,end) 1;
    will-change: transform, text-shadow, opacity, clip-path;
  }
  @keyframes gRGB{
    0%   { transform:translate(0,0);                 text-shadow:none; clip-path:inset(0 0 0 0) }
    10%  { transform:translate(-5px,1px) skewX(-9deg); text-shadow:5px 0 rgba(0,255,255,.98),-5px 0 rgba(255,40,90,.98); clip-path:inset(0 0 68% 0) }
    20%  { transform:translate(6px,-2px);              text-shadow:-7px 0 rgba(0,255,255,1),7px 0 rgba(255,40,90,1); clip-path:inset(44% 0 26% 0) }
    30%  { transform:translate(-4px,0) skewX(6deg);    text-shadow:6px 0 rgba(70,255,150,.95),-6px 0 rgba(255,40,90,.95); clip-path:inset(72% 0 6% 0) }
    40%  { transform:translate(6px,2px);               text-shadow:-8px 0 rgba(0,255,255,1),8px 0 rgba(255,40,90,1); clip-path:inset(18% 0 56% 0) }
    50%  { transform:translate(-7px,-1px);             text-shadow:7px 0 rgba(0,255,255,1),-7px 0 rgba(255,40,90,1); clip-path:inset(0 0 0 0) }
    60%  { transform:translate(5px,1px) skewX(-5deg);  text-shadow:-6px 0 rgba(0,255,255,.95),6px 0 rgba(70,255,150,.8); clip-path:inset(58% 0 16% 0) }
    70%  { transform:translate(-6px,-2px);             text-shadow:7px 0 rgba(0,255,255,1),-7px 0 rgba(255,40,90,1); clip-path:inset(28% 0 42% 0) }
    80%  { transform:translate(4px,0);                 text-shadow:-6px 0 rgba(0,255,255,.95),6px 0 rgba(255,40,90,.95); clip-path:inset(6% 0 62% 0) }
    90%  { transform:translate(-3px,1px) skewX(3deg);  text-shadow:4px 0 rgba(0,255,255,.9),-4px 0 rgba(255,40,90,.9); clip-path:inset(12% 0 12% 0) }
    100% { transform:translate(0,0);                 text-shadow:none; clip-path:inset(0 0 0 0) }
  }
  #glitch-veil{ position:fixed; inset:0; z-index:9995; pointer-events:none; overflow:hidden; }
  #glitch-veil .gbar{ position:absolute; left:-6%; right:-6%; mix-blend-mode:screen; opacity:0 }
  #glitch-veil .gflash{ position:absolute; inset:0; mix-blend-mode:screen; opacity:0 }
}

/* =====================================================================
   ENHANCEMENTS  ·  Orbitron interface type  +  glow / animated borders
   (appended block — easy to locate, tweak or remove)
   ===================================================================== */

/* ---- shared tokens now live in the single :root above ---- */

/* ---- Orbitron as the "interface / system" typeface ---- */
.brand{font-family:var(--mech);letter-spacing:.04em}
.foot .bigname{font-family:var(--mech);letter-spacing:.05em}
.btn{font-family:var(--mech);letter-spacing:.13em}
.eyebrow{font-family:var(--mech);letter-spacing:.26em}
.crumb{font-family:var(--mech);letter-spacing:.18em}
.stat .n,.ev-card .idx,.sum-total .v{font-family:var(--mech)}
.symp-hero .badge{font-family:var(--mech)}

/* ---- a little ambient luminescence on the key accent text ---- */
.gold-text{filter:drop-shadow(0 0 16px rgba(158,219,132,.22))}

/* === EFFECT 1 — EVENT CARDS: a luminous arc rotates around the border === */
@property --bd-angle{syntax:"<angle>";inherits:false;initial-value:0deg}
.ev-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--bd-angle),
     transparent 0deg, rgba(158,219,132,.04) 60deg,
     var(--glow) 96deg, var(--glow-cy) 122deg, rgba(158,219,132,.04) 150deg,
     transparent 212deg, transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .45s var(--ease);
  animation:bd-rotate 3.4s linear infinite; animation-play-state:paused;
}
.ev-card:hover::before{opacity:1; animation-play-state:running}
.ev-card:hover{box-shadow:0 24px 50px -28px rgba(0,0,0,.9), 0 0 34px -10px rgba(159,212,255,.35)}
.ev-card:hover .ev-glyph{border-color:var(--glow);color:#eaf4ff;box-shadow:0 0 22px -6px rgba(159,212,255,.6)}
@keyframes bd-rotate{to{--bd-angle:360deg}}

/* === EFFECT 2 — FEATURE / REP CARDS: a glowing frame draws in from the corners === */
.feat,.rep{
  background-image:
    linear-gradient(90deg,var(--glow-cy),var(--glow)),
    linear-gradient(90deg,var(--glow),var(--glow-cy)),
    linear-gradient(0deg,var(--glow-cy),var(--glow)),
    linear-gradient(0deg,var(--glow),var(--glow-cy)),
    linear-gradient(165deg,rgba(18,32,50,.6),rgba(8,15,26,.82));
  background-repeat:no-repeat;
  background-size:0% 1.6px, 0% 1.6px, 1.6px 0%, 1.6px 0%, 100% 100%;
  background-position:0 0, 100% 100%, 0 100%, 100% 0, 0 0;
  transition:background-size .55s var(--ease), box-shadow .5s var(--ease), transform .4s var(--ease);
}
.feat:hover,.rep:hover{
  background-size:100% 1.6px, 100% 1.6px, 1.6px 100%, 1.6px 100%, 100% 100%;
  box-shadow:0 18px 44px -26px rgba(0,0,0,.9), 0 0 30px -8px rgba(159,212,255,.3);
  transform:translateY(-5px);
}

/* === EFFECT 3 — FRAMED PANELS: corner brackets expand + soft inner glow === */
.panel{transition:border-color .5s var(--ease), box-shadow .5s var(--ease)}
.corner{transition:width .45s var(--ease), height .45s var(--ease), border-color .45s, opacity .45s}
.panel:hover{border-color:rgba(158,219,132,.42);
  box-shadow:0 0 46px -14px rgba(159,212,255,.25), inset 0 0 70px -36px rgba(159,212,255,.32)}
.panel:hover .corner{width:36px;height:36px;border-color:var(--gold-200);opacity:1}

/* === EFFECT 4 — CHIPS / TAGS: glow lift === */
.chip{transition:.3s var(--ease)}
.chip:hover{box-shadow:0 0 20px -5px rgba(158,219,132,.5); transform:translateY(-2px)}
.ev-card:hover .tag{border-color:rgba(158,219,132,.6); box-shadow:0 0 14px -5px rgba(159,212,255,.5)}

/* === EFFECT 5 — BUTTONS: brighter glow + a light sweep across === */
.btn::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-70%;width:45%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-16deg);opacity:0}
.btn:hover{box-shadow:0 0 34px -2px rgba(158,219,132,.55), 0 0 60px -12px rgba(159,212,255,.4); transform:translateY(-2px)}
.btn:hover::after{opacity:1;animation:btn-sweep .85s var(--ease)}
@keyframes btn-sweep{from{left:-70%}to{left:130%}}

/* === EFFECT 6 — NAV + footer links: text glow on the underline draw === */
.nav-links a:hover{text-shadow:0 0 14px rgba(158,219,132,.55)}
.foot a{transition:color .3s, text-shadow .3s}
.foot a:hover{text-shadow:0 0 12px rgba(158,219,132,.4)}

/* === quieter glows on timeline / picker borders for consistency === */
.slot .card{transition:border-color .4s, transform .4s, box-shadow .4s}
.slot .card:hover{box-shadow:0 0 26px -10px rgba(159,212,255,.35)}
.pick .box{transition:.3s var(--ease)}
.pick:hover .box{box-shadow:0 0 22px -8px rgba(158,219,132,.4)}

/* =====================================================================
   HOME LAYOUT  ·  asymmetric / technical (less centred)
   ===================================================================== */

/* left-anchored "documentation" section header */
.sec-head{display:flex;gap:clamp(14px,2.4vw,28px);align-items:flex-start;margin-bottom:clamp(26px,4vw,48px)}
.sec-head .sh-no{
  font-family:var(--mech);font-weight:800;font-size:clamp(1.7rem,4.4vw,3rem);line-height:1;
  color:rgba(158,219,132,.13);-webkit-text-stroke:1px rgba(158,219,132,.34);
  padding-top:.04em;letter-spacing:.02em;flex:none;
}
.sec-head .sh-main{flex:1;min-width:0}
.sec-head .sh-eyebrow{
  display:flex;align-items:center;gap:14px;font-family:var(--mech);font-size:.68rem;
  letter-spacing:.26em;text-transform:uppercase;color:var(--gold-300);margin-bottom:14px;
}
.sh-line{height:1px;width:min(240px,32vw);background:var(--gold-line);opacity:.55}
.sec-head h2{font-size:clamp(2rem,4.8vw,3.4rem)}

/* intro — one left-aligned statement with an accent rule */
.intro-strip .stmt{max-width:36ch;border-left:2px solid rgba(158,219,132,.32);padding-left:clamp(20px,3vw,40px)}
.intro-strip .stmt-tag{display:block;font-family:var(--mech);font-size:.66rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-300);margin-bottom:18px}
.intro-strip .stmt-text{font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,3.3vw,2.5rem);line-height:1.24;color:var(--marble-100)}

/* CTA — asymmetric two-column */
.cta-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,5vw,64px);align-items:center}
.cta-left h2{font-size:clamp(2.2rem,6vw,4.2rem);line-height:.98;margin:0}
.cta-left .meander{width:min(220px,60%);margin-bottom:24px}
.cta-right .lead{margin:0;max-width:46ch}
@media(max-width:820px){ .cta-grid{grid-template-columns:1fr;gap:26px} }

/* =====================================================================
   EVENT DETAIL PAGES  ·  event-<slug>.html
   ===================================================================== */
a.ev-card{text-decoration:none;color:inherit}
.ev-card .more{cursor:pointer}

.ev-hero{display:flex;align-items:center;gap:clamp(16px,3vw,28px);margin-top:18px}
.ev-glyph.big{width:74px;height:74px;flex:none;display:grid;place-items:center;border:1px solid rgba(158,219,132,.4);border-radius:50%;color:var(--gold-200)}
.ev-glyph.big svg{width:38px;height:38px}
.track-label{font-family:var(--mech);letter-spacing:.24em;text-transform:uppercase;font-size:.66rem;color:var(--gold-300)}
.ev-title{font-size:clamp(2.6rem,7vw,5rem);line-height:.95;margin:6px 0 5px}
.ev-disc-lg{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2vw,1.5rem);color:var(--marble-200)}

.ev-facts{display:flex;flex-wrap:wrap;gap:10px}
.fact{display:flex;flex-direction:column;gap:3px;padding:10px 16px;border:1px solid rgba(150,180,140,.18);border-radius:var(--radius);background:rgba(8,15,26,.5)}
.fact .fk{font-family:var(--mech);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-400)}
.fact .fv{font-family:var(--serif);font-size:1.04rem;color:var(--marble-100)}

.ev-detail-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:900px){.ev-detail-grid{grid-template-columns:1fr}}

.ev-section{margin-bottom:clamp(24px,3.4vw,38px)}
.ev-section h3{font-size:1.4rem;margin-bottom:14px;display:flex;align-items:center;gap:12px}
.ev-section h3::before{content:"";width:22px;height:1px;background:var(--gold-line);flex:none}
.ev-section p{color:var(--marble-200);font-size:1.06rem;line-height:1.65;margin-bottom:10px}
.ev-section ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.ev-section li{position:relative;padding-left:22px;color:var(--marble-200);font-size:1.04rem;line-height:1.55}
.ev-section li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border:1px solid var(--gold-400);transform:rotate(45deg)}
.det-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--mech);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-200);text-decoration:none;border-bottom:1px solid rgba(158,219,132,.3);padding-bottom:2px}
.det-link:hover{color:var(--marble-50)}

.ev-genote{margin-top:6px}
.ev-genote a{color:var(--gold-200);text-decoration:underline;text-underline-offset:3px}

.ev-nav{display:flex;justify-content:space-between;gap:14px;margin-top:clamp(28px,4vw,46px);border-top:1px solid rgba(158,219,132,.14);padding-top:24px}
.ev-nav-link{flex:1;max-width:48%;display:flex;flex-direction:column;gap:5px;padding:14px 18px;border:1px solid rgba(150,180,140,.18);border-radius:var(--radius);text-decoration:none;transition:.3s var(--ease);background:rgba(8,15,26,.4)}
.ev-nav-link.next{text-align:right;align-items:flex-end}
.ev-nav-link:hover{border-color:rgba(158,219,132,.5);box-shadow:0 0 24px -8px rgba(159,212,255,.4);transform:translateY(-2px)}
.ev-nav-link .d{font-family:var(--mech);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-300)}
.ev-nav-link .t{font-family:var(--display);text-transform:uppercase;font-size:1.12rem;color:var(--marble-50);letter-spacing:.02em}

.ev-aside{position:sticky;top:96px}
@media(max-width:900px){.ev-aside{position:static;margin-top:18px}}
.panel-lite{border:1px solid rgba(158,219,132,.16);border-radius:var(--radius);background:rgba(8,10,14,.62);padding:20px}
.panel-lite h4{font-family:var(--mech);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-400);margin-bottom:12px}
.ev-index{display:flex;flex-direction:column}
.ev-index-group{font-family:var(--mech);font-size:.57rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-300);margin:12px 0 6px}
.ev-index-group:first-child{margin-top:0}
.ev-index a{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 9px;margin:1px -9px;border-radius:4px;color:var(--marble-200);font-family:var(--tech);font-size:.85rem;text-decoration:none;transition:.18s}
.ev-index a:hover{background:rgba(158,219,132,.06);color:var(--gold-200)}
.ev-index a .en{font-family:var(--mech);font-size:.62rem;color:var(--stone-500)}
.ev-index a.cur{color:var(--navy-900);background:linear-gradient(120deg,var(--gold-500),var(--gold-300));font-weight:600}
.ev-index a.cur .en{color:rgba(0,0,0,.55)}
.all-events-link{display:inline-block;margin-top:14px;font-family:var(--mech);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-300);text-decoration:none}
.all-events-link:hover{color:var(--gold-200)}

/* =====================================================================
   EVENT PAGES  ·  hover glows  (points, facts, glyph, index)
   ===================================================================== */
.ev-section li{transition:color .25s var(--ease), transform .25s var(--ease)}
.ev-section li::before{transition:background .25s var(--ease), box-shadow .25s var(--ease), transform .3s var(--ease)}
.ev-section li:hover{color:var(--marble-50);transform:translateX(5px)}
.ev-section li:hover::before{background:var(--glow-cy);box-shadow:0 0 12px 1px rgba(159,212,255,.8);transform:rotate(135deg) scale(1.25)}

.fact{transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease)}
.fact:hover{border-color:rgba(158,219,132,.5);box-shadow:0 0 24px -6px rgba(159,212,255,.5);transform:translateY(-3px)}
.fact:hover .fv{color:#eaf4ff}
.fact:hover .fk{color:var(--gold-300)}

.ev-glyph.big{transition:border-color .35s, box-shadow .35s, color .35s, transform .35s}
.ev-glyph.big:hover{border-color:var(--glow);box-shadow:0 0 30px -6px rgba(159,212,255,.6);color:#eaf4ff;transform:rotate(8deg)}

.ev-index a:not(.cur):hover{box-shadow:0 0 18px -8px rgba(159,212,255,.55)}
.all-events-link:hover{text-shadow:0 0 12px rgba(158,219,132,.5)}

/* =====================================================================
   SCHEDULE  ·  "Order of the Day" horizontal timeline  (.rundown)
   ===================================================================== */
.rundown{position:relative;margin-top:clamp(22px,3vw,40px)}
.rd-scroll{overflow-x:auto;overflow-y:hidden;padding:6px var(--pad) 20px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.rd-phases{position:relative;display:flex;gap:clamp(14px,1.6vw,22px);width:max-content;min-width:100%;padding-top:2px}
.rd-phases::before{content:"";position:absolute;left:8px;right:8px;top:11px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold-600) 4%,var(--gold-300) 50%,var(--gold-600) 96%,transparent);opacity:.55}
.rd-spark{position:absolute;top:5px;left:0;width:12px;height:12px;border-radius:50%;pointer-events:none;z-index:3;
  background:radial-gradient(circle,#eaf6ff,rgba(159,212,255,0) 70%);
  box-shadow:0 0 16px 4px rgba(159,212,255,.7);animation:rd-run 7.5s linear infinite}
@keyframes rd-run{0%{left:0;opacity:0}5%{opacity:1}95%{opacity:1}100%{left:calc(100% - 12px);opacity:0}}

.rd-phase{position:relative;flex:0 0 clamp(218px,24vw,272px);scroll-snap-align:start;display:flex;flex-direction:column;gap:11px}
.rd-mark{height:22px;display:flex;align-items:center}
.rd-dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--gold-400);background:var(--navy-900);position:relative;z-index:2;transition:.3s var(--ease)}
.rd-phase.ceremony .rd-dot{background:var(--gold-200);border-color:var(--gold-200);box-shadow:0 0 12px -2px rgba(158,219,132,.6)}
.rd-time{font-family:var(--mech);font-weight:700;font-size:1.02rem;color:var(--marble-100);text-transform:uppercase;letter-spacing:.03em;display:flex;align-items:baseline;gap:5px}
.rd-time i{font-style:normal;font-size:.58em;color:var(--gold-300);letter-spacing:.12em}

.rd-card{flex:1;border:1px solid rgba(150,180,140,.16);border-radius:var(--radius);padding:18px;position:relative;overflow:hidden;
  background:linear-gradient(165deg,rgba(18,32,50,.55),rgba(8,15,26,.82));transition:.35s var(--ease)}
.rd-kind{font-family:var(--mech);font-size:.57rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-300)}
.rd-phase.offstage .rd-kind{color:#7fdcff}
.rd-phase.onstage  .rd-kind{color:#ffd27f}
.rd-phase.reps     .rd-kind{color:#b79cff}
.rd-card h4{font-size:1.18rem;margin:7px 0 5px;color:var(--marble-50);letter-spacing:.01em}
.rd-where{font-family:var(--tech);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stone-400);display:block;margin-bottom:11px}
.rd-card p{font-size:.95rem;line-height:1.55;color:var(--marble-200)}
.rd-events{display:flex;flex-wrap:wrap;gap:7px;margin-top:13px}
.rd-ev{font-family:var(--tech);font-size:.71rem;letter-spacing:.02em;padding:.42em .72em;border:1px solid rgba(158,219,132,.22);border-radius:99px;
  color:var(--marble-200);text-decoration:none;white-space:nowrap;transition:.22s var(--ease)}
.rd-ev:hover{border-color:var(--glow);color:#eaf4ff;box-shadow:0 0 16px -4px rgba(159,212,255,.6);transform:translateY(-1px)}
.rd-ev.alt{color:var(--gold-200);border-color:rgba(158,219,132,.4)}

/* hover a stop → its node + card light up, line segment glows */
.rd-phase:hover .rd-dot{border-color:var(--glow);background:var(--glow-cy);box-shadow:0 0 18px 3px rgba(159,212,255,.75)}
.rd-phase:hover .rd-card{border-color:rgba(158,219,132,.46);transform:translateY(-3px);
  box-shadow:0 16px 40px -24px rgba(0,0,0,.9), 0 0 32px -10px rgba(159,212,255,.32)}

.rd-hint{max-width:var(--maxw);margin:8px auto 0;padding:0 var(--pad);text-align:right;
  font-family:var(--mech);font-size:.59rem;letter-spacing:.18em;text-transform:uppercase;color:var(--stone-500)}

.rd-scroll::-webkit-scrollbar{height:7px}
.rd-scroll::-webkit-scrollbar-thumb{background:rgba(158,219,132,.22);border-radius:99px}
.rd-scroll::-webkit-scrollbar-thumb:hover{background:rgba(158,219,132,.4)}
.rd-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.03)}
@media (prefers-reduced-motion:reduce){.rd-spark{display:none}}
@media (max-width:560px){.rd-phase{flex-basis:80vw}}

/* =====================================================================
   ANIMATED EVENT ICONS  ·  a current of light flows through the glyphs
   ===================================================================== */
.ev-glyph svg path, .ev-glyph svg circle, .ev-glyph svg rect, .ev-glyph svg line{
  stroke-dasharray:18 3;
  animation:glyph-flow 8s linear infinite;
}
/* the big header glyph on each event page runs a touch livelier */
.ev-glyph.big svg path, .ev-glyph.big svg circle, .ev-glyph.big svg rect, .ev-glyph.big svg line{
  animation-duration:6s;
}
/* hover a card → the current surges through its icon */
.ev-card:hover .ev-glyph svg path, .ev-card:hover .ev-glyph svg circle,
.ev-card:hover .ev-glyph svg rect, .ev-card:hover .ev-glyph svg line{
  animation-duration:2s;
}
@keyframes glyph-flow{ to { stroke-dashoffset:-210; } }

@media (prefers-reduced-motion:reduce){
  .ev-glyph svg path, .ev-glyph svg circle, .ev-glyph svg rect, .ev-glyph svg line{
    animation:none; stroke-dasharray:none;
  }
}

/* =====================================================================
   EVENT PAGES  ·  slim "On Either Side" nav  +  spicy "Up Next" card
   ===================================================================== */
/* --- compact sidebar: prev · you-are-here · next two --- */
.ev-around .around-list{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.around{display:block;padding:11px 14px;border:1px solid rgba(150,180,140,.16);border-radius:var(--radius);
  text-decoration:none;background:rgba(8,15,26,.42);transition:.25s var(--ease)}
.around .ar-dir{display:block;font-family:var(--mech);font-size:.55rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-300);margin-bottom:4px}
.around .ar-name{display:block;font-family:var(--display);text-transform:uppercase;font-size:1.06rem;color:var(--marble-50);letter-spacing:.02em;line-height:1.05}
.around .ar-disc{display:block;font-family:var(--serif);font-style:italic;font-size:.85rem;color:var(--stone-400);margin-top:3px}
a.around:hover{border-color:var(--glow);box-shadow:0 0 20px -7px rgba(159,212,255,.55);transform:translateX(3px)}
a.around:hover .ar-name{color:#eaf4ff}
a.around.prev .ar-dir{color:#9aa9bd}
.around.current{background:linear-gradient(120deg,rgba(158,219,132,.15),rgba(159,212,255,.06));border-color:rgba(158,219,132,.42);
  box-shadow:inset 0 0 30px -16px rgba(159,212,255,.5)}
.around.current .ar-dir{color:var(--marble-100)}
.around.current .ar-name{color:#fff}

/* --- spicy "Up Next" card (replaces the old prev/next bar) --- */
.up-next{position:relative;display:flex;align-items:center;gap:clamp(16px,2.5vw,26px);
  margin-top:clamp(30px,4vw,48px);padding:clamp(22px,3vw,30px);padding-top:clamp(30px,4vw,38px);
  border:1px solid rgba(158,219,132,.2);border-radius:8px;overflow:hidden;isolation:isolate;text-decoration:none;
  background:linear-gradient(115deg,rgba(18,32,50,.7),rgba(8,15,26,.92));transition:.4s var(--ease)}
.up-next::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s;
  background:radial-gradient(130% 170% at 100% 50%,rgba(159,212,255,.2),transparent 60%)}
.up-next:hover{border-color:rgba(158,219,132,.5);transform:translateY(-3px);
  box-shadow:0 26px 60px -30px rgba(0,0,0,.95), 0 0 44px -12px rgba(159,212,255,.42)}
.up-next:hover::before{opacity:1}
.un-label{position:absolute;top:14px;left:clamp(22px,3vw,30px);font-family:var(--mech);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-300)}
.un-main{display:flex;align-items:center;gap:clamp(14px,2vw,22px);flex:1;min-width:0}
.un-glyph{width:62px;height:62px;flex:none;display:grid;place-items:center;border:1px solid rgba(158,219,132,.4);border-radius:50%;color:var(--gold-200);transition:.4s var(--ease)}
.un-glyph svg{width:33px;height:33px}
.up-next:hover .un-glyph{border-color:var(--glow);color:#eaf4ff;box-shadow:0 0 26px -6px rgba(159,212,255,.6);transform:rotate(6deg)}
.un-kind{font-family:var(--mech);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone-400)}
.un-name{font-size:clamp(1.5rem,3vw,2.3rem);margin:5px 0 0;color:var(--marble-50);line-height:1;letter-spacing:.01em}
.un-go{display:flex;align-items:center;gap:10px;flex:none;font-family:var(--mech);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-200)}
.un-arrow{font-size:1.45em;line-height:1;transition:transform .35s var(--ease)}
.up-next:hover .un-arrow{transform:translateX(8px)}
.up-next:hover .un-go{color:#eaf4ff}
/* the current flows through the up-next glyph too */
.un-glyph svg path,.un-glyph svg circle,.un-glyph svg rect,.un-glyph svg line{stroke-dasharray:18 3;animation:glyph-flow 6s linear infinite}
.up-next:hover .un-glyph svg path,.up-next:hover .un-glyph svg circle,.up-next:hover .un-glyph svg rect,.up-next:hover .un-glyph svg line{animation-duration:2s}
@media(max-width:600px){
  .up-next{flex-wrap:wrap;gap:16px}
  .un-go .un-word{display:none}
}

/* ============================================================
   CIRCUIT-TRACE TEXTURE  ·  poster-matched PCB linework + HUD corners
   Sits above the base atmosphere (z:-1) below all content (z:1+)
   ============================================================ */
.circuit-trace{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    /* angular traces: horizontal runs with right-angle jogs, poster-style */
    linear-gradient(90deg, transparent 0 38px, var(--gold-700) 38px 40px, transparent 40px 100%),
    linear-gradient(0deg, transparent 0 96px, var(--gold-700) 96px 98px, transparent 98px 100%),
    linear-gradient(90deg, transparent 0 62%, rgba(126,201,95,.28) 62% calc(62% + 2px), transparent calc(62% + 2px) 100%),
    linear-gradient(0deg, transparent 0 24%, rgba(126,201,95,.22) 24% calc(24% + 2px), transparent calc(24% + 2px) 100%);
  background-size:340px 340px, 340px 340px, 100% 100%, 100% 100%;
  background-position:0 0, 0 0, 0 0, 0 0;
  mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(140% 100% at 50% 20%, #000 0%, transparent 78%);
          mask-image:radial-gradient(140% 100% at 50% 20%, #000 0%, transparent 78%);
}
/* small square/diamond tick nodes scattered along the traces (poster corner glyphs) */
.circuit-trace::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(45deg, rgba(126,201,95,.5) 25%, transparent 25% 75%, rgba(126,201,95,.5) 75%);
  background-size:6px 6px;
  background-position:19px 19px, 359px 96px;
  background-repeat:no-repeat;
  opacity:.7;
}
@media (max-width:720px){.circuit-trace{opacity:.32}}

/* ---- HUD frame corners fixed to the viewport (poster's outer bracket marks) ---- */
.hud-frame{position:fixed;inset:18px;z-index:2;pointer-events:none}
.hud-frame i{position:absolute;width:22px;height:22px;border:1px solid var(--gold-600);opacity:.55}
.hud-frame i.tl{top:0;left:0;border-right:0;border-bottom:0}
.hud-frame i.tr{top:0;right:0;border-left:0;border-bottom:0}
.hud-frame i.bl{bottom:0;left:0;border-right:0;border-top:0}
.hud-frame i.br{bottom:0;right:0;border-left:0;border-top:0}
@media (max-width:640px){.hud-frame{inset:10px}.hud-frame i{width:14px;height:14px}}