:root{--bg:#0a0a0a;--ink:#ecebe7;--dim:#8a8c91;--line:rgba(255,255,255,.16);--gut:clamp(16px,3vw,34px);
  --disp:'Big Shoulders Display','Arial Narrow',sans-serif;--ui:'Chakra Petch',system-ui,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg);color:var(--ink);font-family:var(--ui);-webkit-text-size-adjust:100%}
body{overflow-x:hidden;background:var(--bg)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
#track{height:840vh;height:840lvh}
#gl,#pix{position:fixed;inset:0;width:100%;height:100%;display:block}
#gl{z-index:0}#pix{z-index:20;pointer-events:none}
.disp{font-family:var(--disp);font-weight:500;text-transform:uppercase;letter-spacing:.01em;line-height:.92}
.layer{position:fixed;inset:0;z-index:10;visibility:hidden;pointer-events:none}
.layer.live{visibility:visible}
.layer.live button,.layer.live .ring-wrap{pointer-events:auto}
.panel{z-index:25}

/* buttons */
.btn{font-size:13px;font-weight:600;letter-spacing:.02em;padding:11px 16px;border:1px solid rgba(255,255,255,.7);border-radius:6px;color:var(--ink);background:rgba(10,10,10,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s,color .2s,transform .2s;min-height:44px}
.btn:hover{background:rgba(255,255,255,.14)}
.btn.solid{background:#e9e8e4;color:#0a0a0a;border-color:#e9e8e4}
.btn.solid:hover{background:#fff}
.btn.ghost{border-color:rgba(255,255,255,.4);color:#c9c9c6}
.btn:active{transform:scale(.97)}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* hero */
.hero-h{position:absolute;left:0;right:0;top:clamp(74px,13vh,120px);text-align:center;font-size:clamp(44px,8.4vw,112px);color:#d9dbd8;mix-blend-mode:screen;opacity:.92;padding:0 var(--gut)}
.hero-h span{display:block}
.hero-b{position:absolute;left:50%;bottom:calc(58px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92vw,400px);text-align:center;display:grid;gap:16px;justify-items:center}
.hero-b p{font-size:14px;line-height:1.4;font-weight:500;text-shadow:0 1px 12px #000}
.cross{width:18px;height:18px;background:linear-gradient(#fff,#fff) center/100% 1px no-repeat,linear-gradient(#fff,#fff) center/1px 100% no-repeat;opacity:.8}

/* crew */
.marq{position:absolute;left:0;right:0;bottom:27vh;white-space:nowrap;font-size:clamp(90px,17vw,230px);color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22);overflow:hidden;line-height:1}
.marq span{display:inline-block;will-change:transform}
.nav-prev,.nav-next{position:absolute;top:50%;transform:translateY(-50%)}
.nav-prev{left:calc(var(--gut) + 14vw)}.nav-next{right:calc(var(--gut) + 14vw)}
.crew-info{position:absolute;left:50%;bottom:calc(46px + env(safe-area-inset-bottom));transform:translateX(-50%);text-align:center;display:grid;gap:8px;justify-items:center;width:min(92vw,460px)}
.crew-info h2{font-size:clamp(34px,4.6vw,54px);color:#cfd0cc}
.tags{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;font-size:12px;font-weight:600;letter-spacing:.04em}
.tags span::before{content:'[ '}.tags span::after{content:' ]'}
.crew-line{font-size:14px;color:#c4c5c2;min-height:2.8em;line-height:1.4;text-shadow:0 1px 10px #000}

/* ring */
#layers{display:grid;grid-template-rows:auto 1fr auto;padding:calc(64px + env(safe-area-inset-top)) var(--gut) calc(52px + env(safe-area-inset-bottom))}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:center}
.ring-wrap{position:relative;display:grid;place-items:center;touch-action:pan-y;cursor:grab;overflow:hidden;margin:0 calc(var(--gut) * -1)}
.ring-wrap:active{cursor:grabbing}
.ring{position:relative;width:var(--cw);height:var(--ch);transform-style:preserve-3d;transform:translateZ(calc(var(--r) * -1)) rotateY(var(--rot,0deg))}
.slot{position:absolute;inset:0;transform:rotateY(var(--a)) translateZ(var(--r));backface-visibility:hidden;border-radius:14px;border:1px solid rgba(255,255,255,.22);background:linear-gradient(160deg,#1c1d20,#0d0d0f 60%);padding:10px;display:grid;grid-template-rows:auto 1fr auto;gap:8px;user-select:none}
.slot.mid{border-color:#fff;box-shadow:0 0 0 1px #fff,0 0 40px rgba(255,255,255,.12)}
.slot small{font-size:10px;letter-spacing:.14em;color:var(--dim);text-align:center;font-weight:600}
.slot img{width:100%;height:100%;object-fit:cover;border-radius:9px;display:block;min-height:0;-webkit-user-drag:none}
.slot b{font-family:var(--disp);font-weight:500;font-size:18px;text-transform:uppercase;text-align:center;letter-spacing:.04em}
.ring-info{text-align:center;display:grid;gap:8px;justify-items:center}
.ring-info h2{font-size:clamp(30px,4vw,48px);color:#cfd0cc}
.ring-line{font-size:14px;line-height:1.45;color:#c4c5c2;max-width:520px;min-height:4.4em}

/* how */
#how{padding:calc(70px + env(safe-area-inset-top)) var(--gut) calc(50px + env(safe-area-inset-bottom));display:grid;grid-template-rows:1fr auto;gap:18px}
.how-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--gut);align-content:center}
.how-top .eyebrow{text-align:left;padding-top:8px}
.how-say{font-size:clamp(20px,2.7vw,36px);line-height:1.22;font-weight:500;max-width:22em}
.how-say i{font-style:normal;color:#55575b;transition:color .25s}
.how-say i.on{color:var(--ink)}
.how-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.card{background:#151517;border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:8px;align-content:start;min-height:170px}
.card b{font-size:11px;letter-spacing:.14em;color:var(--dim)}
.card h3{font-size:17px;font-weight:600}
.card p{font-size:13px;line-height:1.45;color:#b9bab7}
.log{background:#0d0d0f}
.log-h{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600}
.log ol{list-style:none;display:grid;gap:6px;font-size:12px;line-height:1.35}
.log li{display:grid;grid-template-columns:54px 1fr;gap:8px;color:#b9bab7}
.log li em{font-style:normal;font-weight:600}

/* closing */
.end{position:absolute;left:var(--gut);top:50%;transform:translateY(-50%);width:min(88vw,520px);display:grid;gap:18px;padding-left:14px}
.end .row{justify-content:flex-start}
.end-blur{font-size:clamp(40px,6vw,76px);filter:blur(7px);opacity:.5}
.end-say{font-size:clamp(20px,2.4vw,30px);line-height:1.25;font-weight:500;padding-bottom:18px;border-bottom:1px solid var(--line);text-shadow:0 1px 14px #000}
.mark{position:absolute;left:50%;bottom:calc(34px + env(safe-area-inset-bottom));transform:translateX(-50%);display:grid;justify-items:center;gap:8px;font-size:10px;letter-spacing:.42em;font-weight:600}

/* pixel mark: a "D" on a 5x7 grid */
.px{--u:5px;display:block;width:calc(var(--u)*5);height:calc(var(--u)*7);background:
  linear-gradient(#fff,#fff) 0 0/calc(var(--u)*4) var(--u) no-repeat,
  linear-gradient(#fff,#fff) 0 100%/calc(var(--u)*4) var(--u) no-repeat,
  linear-gradient(#fff,#fff) 0 0/var(--u) 100% no-repeat,
  linear-gradient(#fff,#fff) 100% 50%/var(--u) calc(var(--u)*5) no-repeat}
.px.big{--u:clamp(18px,3.4vw,28px)}

/* HUD */
#hud{position:fixed;inset:10px;z-index:40;pointer-events:none;border:1px solid rgba(255,255,255,.75);border-radius:12px}
.h{position:fixed;z-index:41;font-size:11px;font-weight:600;letter-spacing:.06em;pointer-events:none;text-shadow:0 0 6px #000}
.tl{left:24px;top:calc(22px + env(safe-area-inset-top))}.tr{right:24px;top:calc(22px + env(safe-area-inset-top))}
.bl{left:24px;bottom:calc(22px + env(safe-area-inset-bottom))}.br{right:24px;bottom:calc(22px + env(safe-area-inset-bottom))}
#nav{position:fixed;z-index:45;left:50%;top:calc(14px + env(safe-area-inset-top));transform:translateX(-50%);display:flex;border-radius:5px;overflow:hidden;background:rgba(70,70,74,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
#nav button{font-size:12px;font-weight:600;padding:0 16px;height:34px;display:flex;align-items:center;gap:8px}
#nav button.on{background:#e9e8e4;color:#0a0a0a}
#nav i{width:11px;height:7px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
.pill{position:fixed;z-index:45;right:74px;top:calc(12px + env(safe-area-inset-top));border-radius:99px;min-height:38px;padding:8px 16px;font-size:12px}
#menu{position:fixed;inset:0;z-index:44;background:rgba(8,8,9,.94);display:grid;place-content:center;gap:6px;text-align:center}
#menu[hidden]{display:none}
#menu button{font-size:clamp(40px,7vw,84px);color:#77797d;padding:4px 20px;transition:color .15s}
#menu button:hover{color:#fff}

/* loader */
#loader{position:fixed;inset:0;z-index:60;background:#000;display:grid;place-items:center;transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
#loader.done{transform:translateY(-101%)}
.pct{position:absolute;left:20px;top:calc(14px + env(safe-area-inset-top));font-size:54px;color:#d6d6d2}
.ticks{position:absolute;left:20px;right:20px;bottom:calc(22px + env(safe-area-inset-bottom));display:flex;justify-content:space-between;height:26px}
.ticks i{width:3px;background:#2a2a2c;border-radius:1px}.ticks i.on{background:#fff}

@media (max-width:760px){
  .pill{display:none}
  .h{font-size:10px}.tl,.bl{left:20px}.tr,.br{right:20px}
  .hero-h{top:calc(78px + env(safe-area-inset-top))}
  .nav-prev,.nav-next{top:auto;bottom:calc(196px + env(safe-area-inset-bottom));transform:none}
  .nav-prev{left:var(--gut)}.nav-next{right:var(--gut)}
  .marq{bottom:32vh}
  .how-top{grid-template-columns:1fr;gap:10px}
  .how-grid{grid-template-columns:1fr 1fr}
  .card{min-height:0;padding:12px}.card p{font-size:12px}
  .card.log{grid-column:1/-1}
  .end{top:auto;bottom:calc(120px + env(safe-area-inset-bottom));transform:none}
}