:root{
  color-scheme: dark;
  --ink:#060607;          /* page ground: the black of the printed disc */
  --disc:#101012;         /* raised surfaces */
  --line:#26262a;         /* hairlines */
  --mute:#8b8b86;         /* secondary text */
  --bone:#efeee8;         /* the white PLA inlay */
  --pure:#ffffff;
  --accent:#ec4899;       /* Zendata pink */
  --accent-hover:#f472b6;
  --display:"Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:"Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:"Martian Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --gutter:clamp(16px, 4vw, 48px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--ink);color:var(--bone)}
body{font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden;height:100%}
a{color:inherit}
:focus-visible{outline:1.5px solid var(--bone);outline-offset:3px}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}

/* ---------- 3D stage ---------- */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;opacity:0;transition:opacity .6s}
#gl.on{opacity:1}

/* ---------- GATE ---------- */
#gate{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:24px var(--gutter);background:var(--ink);
  transition:opacity .7s ease, filter .7s ease}
#gate.out{opacity:0;filter:blur(8px);pointer-events:none}
.gate-in{display:grid;justify-items:center;gap:28px;text-align:center;max-width:30rem}
.gate-disc{width:min(62vw,260px);aspect-ratio:1;max-width:100%;position:relative}
.gate-disc svg{width:100%;height:100%;display:block;overflow:visible}
.gate-disc .spin,.gate-disc .spin2,.gate-disc .wave{transform-box:fill-box;transform-origin:center}
.gate-disc .spin{animation:spin 18s linear infinite}
.gate-disc .spin2{animation:spin 11s linear infinite reverse}
.gate-disc .wave{animation:wave 2.8s cubic-bezier(.2,.6,.3,1) infinite;opacity:0}
.gate-disc .wave:nth-of-type(2){animation-delay:.93s}.gate-disc .wave:nth-of-type(3){animation-delay:1.86s}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes wave{0%{transform:scale(.55);opacity:.55}100%{transform:scale(1.6);opacity:0}}
.gate-in h1{font-family:var(--display);font-variation-settings:"wdth" 118;font-weight:800;font-size:clamp(2rem,7vw,3.2rem);line-height:1;letter-spacing:-.02em;margin:0;text-wrap:balance}
.gate-in p{margin:0;color:var(--mute);max-width:26rem;text-wrap:pretty}
.gate-eyebrow{color:var(--mute)}
.btn{font:500 14px/1 var(--body);letter-spacing:.02em;color:var(--ink);background:var(--bone);border:0;border-radius:999px;padding:15px 24px;cursor:pointer;display:inline-flex;gap:10px;align-items:center;text-decoration:none}
.btn:hover{background:var(--pure)}
.btn.accent{background:var(--accent);color:#fff}
.btn.accent:hover{background:var(--accent-hover)}
.btn.ghost{background:transparent;color:var(--bone);border:1px solid rgba(255,255,255,.2)}
.btn.ghost:hover{border-color:var(--bone);background:transparent}
.gate-close{background:none;border:0;color:var(--mute);cursor:pointer;padding:8px 0;justify-self:start}
.gate-close:hover{color:var(--bone)}
.manual{display:grid;gap:10px;justify-items:center;margin-top:4px}
.manual summary{cursor:pointer;color:var(--mute);list-style:none}
.manual summary::-webkit-details-marker{display:none}
.manual form{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;justify-content:center}
.manual input{font:400 14px var(--mono);letter-spacing:.12em;text-transform:uppercase;background:transparent;color:var(--bone);border:1px solid var(--line);border-radius:999px;padding:12px 18px;width:15.5rem;max-width:100%}
.manual input::placeholder{color:#55554f}
.manual .btn{padding:12px 18px}
.gate-msg{min-height:1.4em;font-size:13px;color:#d9a79a}

/* ---------- INTRO HUD ---------- */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;transition:opacity .8s}
#hud.out{opacity:0}
.frame i{position:absolute;width:22px;height:22px;border:1px solid rgba(239,238,232,.45)}
.frame i:nth-child(1){top:calc(18px + env(safe-area-inset-top,0px));left:18px;border-right:0;border-bottom:0}
.frame i:nth-child(2){top:calc(18px + env(safe-area-inset-top,0px));right:18px;border-left:0;border-bottom:0}
.frame i:nth-child(3){bottom:calc(18px + env(safe-area-inset-bottom,0px));left:18px;border-right:0;border-top:0}
.frame i:nth-child(4){bottom:calc(18px + env(safe-area-inset-bottom,0px));right:18px;border-left:0;border-top:0}
.log{position:absolute;top:calc(44px + env(safe-area-inset-top,0px));left:44px;display:grid;gap:8px;color:var(--mute)}
.log div{opacity:0;transform:translateY(4px);transition:opacity .35s, transform .35s;white-space:nowrap}
.log div.on{opacity:1;transform:none}
.log b{color:var(--bone);font-weight:400}
.sync{position:absolute;bottom:calc(44px + env(safe-area-inset-bottom,0px));left:44px;right:44px;display:flex;justify-content:space-between;align-items:end;color:var(--mute);gap:16px}
.sync .bar{flex:1;height:1px;background:var(--line);position:relative;max-width:360px;margin-bottom:5px}
.sync .bar span{position:absolute;inset:0 auto 0 0;width:0;background:var(--bone)}
.sync .pct{font-variant-numeric:tabular-nums;color:var(--bone)}
.skip{pointer-events:auto;position:absolute;top:calc(36px + env(safe-area-inset-top,0px));right:40px;background:none;border:1px solid var(--line);color:var(--mute);border-radius:999px;padding:9px 14px;cursor:pointer}
.skip:hover{color:var(--bone);border-color:var(--mute)}
@media (max-width:560px){.log{left:30px;top:calc(40px + env(safe-area-inset-top,0px))}.sync{left:30px;right:30px}.skip{right:26px;top:auto;bottom:calc(76px + env(safe-area-inset-bottom,0px))}.log div:nth-child(n+5){display:none}}

/* ---------- CONTENT ---------- */
#site{position:relative;z-index:10}
#site[hidden]{display:none!important}

/* top nav (public + member) */
.site-nav{position:fixed;top:0;left:0;right:0;z-index:15;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:calc(14px + env(safe-area-inset-top,0px)) var(--gutter) 14px;background:linear-gradient(180deg,rgba(6,6,7,.92),rgba(6,6,7,0));pointer-events:none}
.site-nav a,.site-nav button{pointer-events:auto}
.site-nav-back{color:var(--mute);text-decoration:none;font-size:14px;transition:color .2s}
.site-nav-back:hover{color:var(--bone)}
.site-nav-key{background:rgba(8,8,10,.7);border:1px solid var(--line);color:var(--mute);border-radius:999px;padding:9px 14px;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.site-nav-key:hover{color:var(--bone);border-color:var(--mute)}
body.member .site-nav-key{display:none}

.hero{min-height:100svh;display:grid;align-content:end;padding:0 var(--gutter) calc(56px + env(safe-area-inset-bottom,0px));position:relative}
.hero-public{padding-top:calc(72px + env(safe-area-inset-top,0px));align-content:center;background:radial-gradient(ellipse 80% 55% at 50% -10%,rgba(236,72,153,.14),transparent 60%)}
.hero-in{max-width:1180px;width:100%;margin:0 auto;display:grid;gap:22px}
.eyebrow{color:var(--accent);letter-spacing:.16em}
.verified{display:flex;gap:12px;align-items:center;color:var(--mute);opacity:0;transition:opacity .6s}
.verified.on{opacity:1}
.verified .dot{width:7px;height:7px;border-radius:50%;background:var(--bone);box-shadow:0 0 0 4px rgba(239,238,232,.12)}
h1.big{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 125;font-size:clamp(2.35rem,min(9.6vw,11vh),6.6rem);line-height:.92;letter-spacing:-.03em;margin:0}
h1.big.public-title{max-width:18ch}
h1.big .w{display:inline-block;white-space:nowrap}
h1.big .c{display:inline-block;opacity:0;transform:translateY(.55em) scaleY(1.25);filter:blur(10px);transform-origin:50% 100%;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.8,.2,1), filter .8s;transition-delay:calc(var(--i) * 28ms)}
h1.big.on .c{opacity:1;transform:none;filter:none}
h1.big .thin,.thin-h{font-weight:200}
.hero-sub{display:flex;flex-wrap:wrap;gap:18px 48px;justify-content:space-between;align-items:end;opacity:0;transform:translateY(10px);transition:opacity .8s .6s, transform .8s .6s}
.hero-public .hero-sub,.hero-sub.on{opacity:1;transform:none}
.hero-sub p{margin:0;max-width:34rem;color:#c9c8c1;font-size:clamp(15px,1.6vw,18px);text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.public-meeting-info{display:grid;gap:16px;margin:0 0 clamp(40px,6vw,72px);max-width:48rem}
.public-meeting-info .lede{max-width:none}
.meeting-points{list-style:none;margin:8px 0 4px;padding:0;border-top:1px solid var(--line)}
.meeting-points li{display:grid;grid-template-columns:minmax(9rem,.7fr) minmax(0,1.3fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line);color:#b9b8b1;font-size:15px}
.meeting-points strong{color:var(--bone);font-family:var(--display);font-size:18px;line-height:1.15}
.meeting-points span{max-width:30rem}
body.member .public-meeting-info{display:none}
@media (max-width:560px){.meeting-points li{grid-template-columns:1fr;gap:6px}}
.scroll-hint{color:var(--mute);display:flex;gap:10px;align-items:center}
.scroll-hint i{width:1px;height:28px;background:linear-gradient(var(--bone),transparent);animation:drip 1.8s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

section.blk{padding:clamp(72px,12vw,150px) var(--gutter)}
.wrap{max-width:1180px;margin:0 auto}
.kicker{color:var(--mute);display:flex;gap:14px;align-items:center;margin-bottom:28px}
.kicker::before{content:"";width:28px;height:1px;background:var(--mute)}
h2{font-family:var(--display);font-weight:700;font-variation-settings:"wdth" 112;font-size:clamp(1.9rem,4.6vw,3.6rem);line-height:1;letter-spacing:-.025em;margin:0 0 20px;text-wrap:balance;max-width:18ch}
.lede{color:#c9c8c1;max-width:36rem;margin:0;font-size:17px}
.lede a{color:var(--accent);text-decoration:none}
.lede a:hover{color:var(--accent-hover)}

/* how to join */
.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.steps li{padding:36px 28px 36px 0;border-bottom:1px solid var(--line);display:grid;gap:12px;align-content:start}
.steps li:not(:last-child){border-right:1px solid var(--line);padding-right:32px;margin-right:32px}
.step-n{color:var(--accent)}
.steps h3{margin:0;font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:650;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.015em;line-height:1.15}
.steps p{margin:0;color:#b9b8b1;font-size:15px;max-width:28rem}
.steps a{color:var(--accent);text-decoration:none}
.steps a:hover{color:var(--accent-hover)}
@media (max-width:860px){
  .steps{grid-template-columns:1fr}
  .steps li:not(:last-child){border-right:0;padding-right:0;margin-right:0}
}

/* keychain showcase */
.keychain-showcase{
  margin: clamp(40px, 6vw, 64px) 0 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: clamp(28px, 4vw, 44px);
  background: linear-gradient(160deg, rgba(20,20,24,.7), rgba(9,9,11,.85));
  box-shadow: 0 24px 54px rgba(0,0,0,.45);
  position: relative;
  overflow: hidden;
}
.keychain-showcase::before{
  content: "";
  position: absolute;
  top: 0; left: 15%; right: 15%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(236,72,153,.45), transparent);
}
.keychain-visual{
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 360px;
  width: 100%;
  margin: 0 auto;
}
.keychain-glow{
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236,72,153,.16) 0%, rgba(255,255,255,.04) 45%, transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}
.keychain-img{
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  max-width: 330px;
  display: block;
  filter: drop-shadow(0 20px 32px rgba(0,0,0,.75));
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.keychain-showcase:hover .keychain-img{
  transform: scale(1.03) rotate(-1deg);
}
.keychain-details{
  display: grid;
  gap: 16px;
}
.keychain-badge{
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
}
.keychain-badge::before{
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.keychain-title{
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 112;
  font-weight: 700;
  font-size: clamp(22px, 2.5vw, 30px);
  line-height: 1.15;
  letter-spacing: -.02em;
}
.keychain-desc{
  margin: 0;
  color: #b9b8b1;
  font-size: 15px;
  line-height: 1.6;
}
.keychain-specs{
  list-style: none;
  margin: 8px 0 0;
  padding: 16px 0 0;
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
}
.keychain-specs li{
  display: grid;
  grid-template-columns: 115px 1fr;
  gap: 16px;
  align-items: baseline;
  font-size: 14px;
}
.keychain-specs .spec-label{
  color: var(--mute);
  font-size: 11px;
  letter-spacing: .12em;
}
.keychain-specs .spec-val{
  color: var(--bone);
  line-height: 1.45;
}
@media (max-width: 860px){
  .keychain-showcase{
    grid-template-columns: 1fr;
  }
  .keychain-visual{
    max-width: 280px;
  }
}
@media (max-width: 480px){
  .keychain-specs li{
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* who it's for */
.who-grid{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.who-card{border:1px solid var(--line);border-radius:22px;padding:28px 26px;background:linear-gradient(160deg,rgba(22,22,25,.55),rgba(8,8,9,.75));transition:border-color .25s, transform .25s}
.who-card:hover{border-color:rgba(236,72,153,.35);transform:translateY(-2px)}
.who-card h3{margin:0 0 10px;font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:650;font-size:22px;letter-spacing:-.015em}
.who-card p{margin:0;color:#b9b8b1;font-size:15px;max-width:30rem}
@media (max-width:640px){.who-grid{grid-template-columns:1fr}}

.cta-lead{margin:0 0 8px;color:#c9c8c1;max-width:36rem;font-size:17px}

/* pass card */
.pass{margin-top:48px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);border:1px solid var(--line);border-radius:28px;overflow:hidden;
  background:linear-gradient(160deg,rgba(22,22,25,.82),rgba(8,8,9,.9));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.pass-disc{display:grid;place-items:center;padding:40px;border-right:1px solid var(--line);position:relative;min-height:280px}
.pass-disc svg{width:min(100%,230px);height:auto}
.pass-no{position:absolute;left:24px;bottom:20px;color:var(--mute)}
.pass-data{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.pass-data div{padding:24px 26px;border-bottom:1px solid var(--line);display:grid;gap:8px;align-content:start}
.pass-data div:nth-child(odd){border-right:1px solid var(--line)}
.pass-data div:nth-last-child(-n+2){border-bottom:0}
.pass-data dt{color:var(--mute)}
.pass-data dd{margin:0;font-family:var(--display);font-variation-settings:"wdth" 100;font-weight:600;font-size:clamp(18px,2.2vw,24px);letter-spacing:-.01em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.pass-data dd.ok::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#9fe0b0;margin-right:10px;vertical-align:.18em}
@media (max-width:760px){.pass{grid-template-columns:1fr}.pass-disc{border-right:0;border-bottom:1px solid var(--line);min-height:220px}}
@media (max-width:420px){.pass-data{grid-template-columns:1fr}.pass-data div:nth-child(odd){border-right:0}.pass-data div:nth-last-child(2){border-bottom:1px solid var(--line)}}

/* perks */
.perks{margin-top:56px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.perk{padding:36px 0 40px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start}
.perk:nth-child(odd){padding-right:40px;border-right:1px solid var(--line)}
.perk:nth-child(even){padding-left:40px}
.perk svg{width:44px;height:44px}
.perk h3{font-family:var(--display);font-variation-settings:"wdth" 108;font-weight:650;font-size:22px;letter-spacing:-.01em;margin:0 0 8px;line-height:1.15}
.perk p{margin:0;color:#b9b8b1;max-width:30rem}
@media (max-width:760px){.perks{grid-template-columns:1fr}.perk:nth-child(odd){padding-right:0;border-right:0}.perk:nth-child(even){padding-left:0}}

/* closing */
.closing{display:grid;gap:34px}
.quote{font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:800;font-size:clamp(2rem,6.4vw,5.2rem);line-height:.95;letter-spacing:-.03em;margin:0;text-wrap:balance}
.quote span{font-weight:200}
.links{display:flex;flex-wrap:wrap;gap:12px}
.chip{display:inline-flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:12px 18px;text-decoration:none;font-size:14px;background:rgba(6,6,7,.6);cursor:pointer;color:var(--bone);font-family:var(--body)}
.chip:hover{border-color:var(--mute)}
.chip small{font-family:var(--mono);font-size:10px;color:var(--mute);letter-spacing:.1em}
footer{padding:36px var(--gutter) calc(40px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);color:var(--mute)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between}

.fade{background:linear-gradient(180deg,rgba(6,6,7,0) 0,rgba(6,6,7,.78) 22%,rgba(6,6,7,.9) 100%)}


/* ---------- ENTER ---------- */
#enter{position:fixed;inset:0;z-index:28;display:grid;place-items:center;background:var(--ink);transition:opacity .6s, filter .6s}
#enter.out{opacity:0;filter:blur(8px);pointer-events:none}
.enter-hit{-webkit-appearance:none;appearance:none;border:0;background:transparent;color:inherit;font:inherit;margin:0;box-sizing:border-box;position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:22px;cursor:pointer;text-align:center;padding:24px var(--gutter);touch-action:manipulation;-webkit-tap-highlight-color:transparent;z-index:1}
.enter-hit:focus{outline:none}
.enter-hit:focus-visible .enter-t{text-decoration:underline;text-underline-offset:10px;text-decoration-thickness:2px}
.enter-disc{width:min(52vw,220px);aspect-ratio:1;display:block}
.enter-disc svg{width:100%;height:100%;overflow:visible;display:block}
.enter-disc .wave{transform-box:fill-box;transform-origin:center;animation:wave 2.4s cubic-bezier(.2,.6,.3,1) infinite;opacity:0}
.enter-disc .wave:nth-of-type(2){animation-delay:.8s}.enter-disc .wave:nth-of-type(3){animation-delay:1.6s}
.enter-no{color:var(--mute)}
.enter-t{font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:800;font-size:clamp(2rem,7vw,3.6rem);line-height:1;letter-spacing:-.03em}
.enter-s{color:var(--bone);display:inline-flex;gap:10px;align-items:center}
.enter-s::before{content:"";width:22px;height:10px;background:linear-gradient(90deg,var(--bone) 0 2px,transparent 2px 5px,var(--bone) 5px 7px,transparent 7px 10px,var(--bone) 10px 12px,transparent 12px);animation:eq 1s steps(3) infinite}
@keyframes eq{0%{clip-path:inset(40% 0 0 0)}50%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(65% 0 0 0)}}
.enter-mute{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:none;border:0;color:var(--mute);cursor:pointer;text-decoration:underline;text-underline-offset:5px;padding:14px 16px;touch-action:manipulation;-webkit-tap-highlight-color:transparent;z-index:2}
.enter-mute:hover{color:var(--bone)}
#mute{position:fixed;z-index:24;right:calc(16px + env(safe-area-inset-right,0px));top:calc(16px + env(safe-area-inset-top,0px));background:rgba(8,8,10,.8);border:1px solid var(--line);color:var(--mute);border-radius:999px;padding:10px 14px;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#mute:hover{color:var(--bone)}

/* ---------- COMMUNITY ---------- */
.community{padding:clamp(40px,8vw,110px) 0 clamp(80px,12vw,160px);overflow:hidden}
.marquee{display:grid;gap:0;margin-bottom:clamp(60px,9vw,120px);transform:rotate(-2.5deg) scale(1.04)}
.mq-row{overflow:hidden;border-block:1px solid var(--line);padding-block:.06em}
.mq-track{display:flex;width:max-content;animation:mq 38s linear infinite;font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:800;font-size:clamp(3.4rem,11vw,10rem);line-height:1;letter-spacing:-.035em;white-space:nowrap}
.mq-track.rev{animation-direction:reverse;animation-duration:46s}
.mq-track span{padding-right:.35em;display:inline-flex;align-items:center;gap:.35em}
.mq-track span::after{content:"";width:.28em;height:.28em;border-radius:50%;border:.06em solid currentColor;display:inline-block}
.mq-out .mq-track{color:transparent;-webkit-text-stroke:1.2px var(--bone);font-weight:700}
@keyframes mq{to{transform:translateX(-50%)}}
.comm-in{padding-inline:var(--gutter)}
h2.mega{font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:800;font-size:clamp(2.6rem,8.4vw,7.6rem);line-height:.9;letter-spacing:-.045em;margin:0 0 28px;max-width:none}
h2.mega span{font-weight:200}
.pillars{margin-top:clamp(48px,7vw,90px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line)}
.pillar{position:relative;padding:clamp(28px,4vw,52px) clamp(0px,3vw,40px) clamp(32px,4vw,56px) 0;border-bottom:1px solid var(--line);display:grid;gap:18px;align-content:start;overflow:hidden;isolation:isolate;transition:color .35s}
.pillar:nth-child(odd){border-right:1px solid var(--line)}
.pillar:nth-child(even){padding-left:clamp(20px,3vw,40px)}
.pillar::before{content:"";position:absolute;inset:0;background:var(--bone);transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.2,.8,.2,1);z-index:-1}
.pillar:hover{color:var(--ink)}
.pillar:hover::before{transform:scaleY(1)}
.pillar:hover p{color:#2a2a2c}
.pillar:hover svg *{stroke:var(--ink)}
.pillar:hover svg circle[fill="#efeee8"]{fill:var(--ink)}
.pillar:nth-child(odd):hover{padding-left:clamp(16px,2vw,24px)}
.pillar svg{width:56px;height:56px}
.pillar h3{margin:0;font-family:var(--display);font-variation-settings:"wdth" 118;font-weight:750;font-size:clamp(26px,3.4vw,44px);letter-spacing:-.025em;line-height:1}
.pillar p{margin:0;color:#b9b8b1;max-width:28rem;font-size:17px;transition:color .35s}
@media (max-width:760px){.pillars{grid-template-columns:1fr}.pillar:nth-child(odd){border-right:0}.pillar:nth-child(even){padding-left:0}.pillar:hover{padding-left:16px!important}}

/* ---------- EVENTS ---------- */
.events{padding:clamp(60px,10vw,140px) 0 clamp(80px,12vw,160px)}
.events > .wrap{padding-inline:var(--gutter)}
.next{position:relative;margin-top:clamp(40px,6vw,72px);border:1px solid var(--line);border-radius:32px;overflow:hidden;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:440px;isolation:isolate;background:#0b0b0d}
.next-cover{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center;opacity:.55;transform:scale(1.04);transition:transform 6s ease}
.next:hover .next-cover{transform:scale(1.1)}
.next::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(6,6,7,.92) 0%,rgba(6,6,7,.55) 55%,rgba(6,6,7,.85) 100%)}
.next-date{padding:clamp(28px,4vw,48px);display:grid;align-content:space-between;gap:24px;border-right:1px solid rgba(255,255,255,.08)}
.next-day{font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:800;font-size:clamp(8rem,20vw,17rem);line-height:.78;letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.next-month{font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:200;font-size:clamp(2rem,4.4vw,3.6rem);line-height:1;letter-spacing:-.02em;text-transform:lowercase}
.next-body{padding:clamp(28px,4vw,48px);display:grid;gap:18px;align-content:end}
.next-body h3{margin:0;font-family:var(--display);font-variation-settings:"wdth" 118;font-weight:800;font-size:clamp(30px,4.2vw,56px);line-height:.98;letter-spacing:-.03em;text-wrap:balance}
.next-body p{margin:0;color:#cfcec7;max-width:34rem;font-size:17px}
.next-meta{display:flex;flex-wrap:wrap;gap:8px 22px;color:var(--bone)}
.countdown{display:flex;gap:clamp(14px,2.4vw,28px);font-variant-numeric:tabular-nums}
.countdown div{display:grid;gap:4px}
.countdown b{font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:300;font-size:clamp(28px,3.4vw,44px);line-height:1;letter-spacing:-.02em}
.countdown small{color:var(--mute)}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.next .btn,.row .btn{text-decoration:none}
.tag-ex{display:inline-flex;align-items:center;gap:6px;border:1px dashed rgba(239,238,232,.35);color:var(--mute);border-radius:999px;padding:4px 10px;font-size:10px}
@media (max-width:820px){.next{grid-template-columns:1fr}.next-date{border-right:0;border-bottom:1px solid rgba(255,255,255,.08);grid-template-columns:auto 1fr;align-items:end}.next::after{background:linear-gradient(180deg,rgba(6,6,7,.6),rgba(6,6,7,.92))}}

.ev-sub{margin-top:clamp(40px,6vw,64px)}
.ev-head{display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--mute);padding-bottom:16px;border-bottom:1px solid var(--line)}
.ev-list{display:grid}
.ev-row{display:grid;grid-template-columns:8.5rem minmax(0,1fr) auto;gap:24px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:padding .35s}
.ev-row:hover{padding-left:12px}
.ev-row .d{font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:700;font-size:26px;letter-spacing:-.02em;line-height:1}
.ev-row .d small{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--mute);font-weight:400;margin-top:6px;text-transform:uppercase}
.ev-row h4{margin:0 0 4px;font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:650;font-size:clamp(19px,2.2vw,26px);letter-spacing:-.015em;line-height:1.1}
.ev-row p{margin:0;color:var(--mute);font-size:14px}
.ev-row .go{white-space:nowrap}
@media (max-width:640px){.ev-row{grid-template-columns:1fr;gap:10px}.ev-row .go{justify-self:start}}

.past{margin-top:clamp(64px,9vw,120px)}
.past .ev-head{padding-inline:var(--gutter);box-sizing:content-box;max-width:var(--maxw,1180px);margin:0 auto}
.past-nav{display:flex;gap:8px}
.navbtn{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:rgba(8,8,10,.7);color:var(--bone);cursor:pointer;font:400 16px/1 var(--body);display:inline-grid;place-items:center}
.navbtn:hover{border-color:var(--mute)}
.past-strip{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(260px,32vw,420px);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:28px var(--gutter) 12px;scroll-padding-inline:var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
.past-strip::-webkit-scrollbar{display:none}
.pcard{scroll-snap-align:start;display:grid;gap:14px;cursor:pointer;background:none;border:0;padding:0;text-align:left;color:inherit;font:inherit}
.pcard .ph{position:relative;aspect-ratio:4/5;max-width:100%;border-radius:22px;overflow:hidden;background:#111}
.pcard img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05);transform:scale(1.02);transition:transform .9s cubic-bezier(.2,.8,.2,1), filter .6s}
.pcard:hover img,.pcard:focus-visible img{transform:scale(1.08);filter:grayscale(0)}
.pcard .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(6,6,7,.85))}
.pcard .yr{position:absolute;left:18px;bottom:14px;z-index:1;font-family:var(--display);font-variation-settings:"wdth" 125;font-weight:800;font-size:44px;line-height:1;letter-spacing:-.04em}
.pcard .n{position:absolute;right:16px;top:16px;z-index:1;background:rgba(6,6,7,.7);border-radius:999px;padding:6px 10px;color:var(--bone)}
.pcard .ex{position:absolute;left:16px;top:16px;z-index:1;background:rgba(6,6,7,.7)}
.pcard h4{margin:0;font-family:var(--display);font-variation-settings:"wdth" 110;font-weight:650;font-size:21px;letter-spacing:-.01em;line-height:1.15}
.pcard p{margin:0;color:var(--mute);font-size:14px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pcard .ph.noimg{display:grid;place-items:center}
.pcard .ph.noimg svg{width:50%;opacity:.25}

/* ---------- LIGHTBOX ---------- */
#lb{position:fixed;inset:0;z-index:60;background:#040405;display:grid;grid-template-rows:auto 1fr;padding:calc(14px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px));touch-action:pan-y}
.lb-top{display:flex;gap:16px;align-items:center;justify-content:space-between;color:var(--mute)}
.lb-top #lbTitle{color:var(--bone);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.lb-top #lbCount{font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-top .navbtn{flex:none}
.lb-fig{margin:0;display:grid;place-items:center;align-content:start;gap:12px;min-height:0;padding:16px 0;overflow:auto}
.lb-fig img{max-width:100%;max-height:min(52svh,calc(100svh - 280px));object-fit:contain;border-radius:14px;display:block}
.lb-fig figcaption{color:var(--mute);text-align:center}
.lb-story{max-width:42rem;width:100%;margin:0 auto;color:var(--bone);font-size:15px;line-height:1.55;white-space:pre-wrap;text-align:left}
.lb-link{color:var(--mute);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.lb-link:hover{color:var(--bone);border-color:var(--bone)}
.lb-prev,.lb-next{position:fixed;top:50%;transform:translateY(-50%)}
.lb-prev{left:16px}.lb-next{right:16px}
@media (max-width:640px){.lb-prev,.lb-next{top:auto;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:none}}

@media (prefers-reduced-motion:reduce){
  .gate-disc .spin,.gate-disc .spin2,.gate-disc .wave,.scroll-hint i{animation:none}
  h1.big .c{transition:opacity .4s;transform:none;filter:none}
  .mq-track,.enter-disc .wave,.enter-s::before{animation:none}
  .who-card{transition:none}
  .who-card:hover{transform:none}
  .keychain-img{transition:none}
  .keychain-showcase:hover .keychain-img{transform:none}
}