@font-face{font-family:Archivo;src:url(fonts/archivo.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{--bg:#efeeea;--ink:#111110;--mute:#8a8a84;--lime:#b6ff3b;--mq:44px;--top:72px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;width:100%;overflow:hidden;overflow-x:clip;background:var(--bg);color:var(--ink);font-family:Archivo,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{background:radial-gradient(120% 80% at 50% 38%,#f8f7f4 0%,#efeeea 55%,#e4e3de 100%);overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
/* header */
.top{position:fixed;left:0;right:0;top:0;height:var(--top);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,3vw,40px);z-index:20;text-transform:uppercase;font-size:11px;letter-spacing:.14em;font-weight:600}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo b{font-weight:900;font-stretch:115%;font-size:20px;letter-spacing:.02em}
.mark{width:22px;height:22px;border-radius:6px;background:var(--lime);box-shadow:inset 0 0 0 2px var(--ink);position:relative}
.mark:after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--ink)}
.mid{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}
.mid i,.right i{font-style:normal;color:var(--mute);margin:0 6px}
.right{display:flex;align-items:center}
.right em{font-style:normal;margin-left:14px;padding:6px 10px;border:1px solid var(--ink);border-radius:99px}
#count{display:inline-block;min-width:2ch}
/* stage */
.stage{position:fixed;left:0;right:0;top:var(--top);bottom:calc(var(--mq) + var(--cap,150px));z-index:5;transform-origin:50% 40%}
.bgword{position:absolute;left:50%;top:46%;font-weight:900;font-stretch:125%;font-size:min(30vw,52vh);line-height:.8;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(17,17,16,.08);white-space:nowrap;pointer-events:none;user-select:none;z-index:0}
.scroller{position:absolute;inset:0;overflow:hidden;z-index:1}
.rack{position:relative;height:100%}
.rail{position:absolute;height:5px;border-radius:5px;background:linear-gradient(#fdfdfd,#b9bab7 45%,#8e8f8c 60%,#d9d9d6);box-shadow:0 6px 10px -4px rgba(0,0,0,.25);transform-origin:50% 50%;z-index:2}
.cap{position:absolute;top:-4px;width:12px;height:13px;border-radius:4px;background:linear-gradient(90deg,#9a9b98,#e9e9e6,#9a9b98)}
.cap.l{left:-6px}.cap.r{right:-6px}
.drop{position:absolute;bottom:4px;width:3px;height:3000px;background:linear-gradient(90deg,#a3a4a1,#eeeeeb,#a3a4a1)}
.drop.l{left:-1px}.drop.r{right:-1px}
.g{position:absolute;top:0;transform-origin:50% 0;z-index:3;cursor:pointer;touch-action:pan-x pan-y;will-change:transform}
.g img{display:block;width:100%;height:100%;object-fit:contain;object-position:50% 0;pointer-events:none;user-select:none;-webkit-user-drag:none;filter:drop-shadow(14px 26px 16px rgba(30,28,22,.22)) drop-shadow(2px 4px 3px rgba(30,28,22,.12))}
.g .sh{position:absolute;left:12%;right:12%;bottom:-6%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.16),transparent);filter:blur(4px);pointer-events:none}
.g:focus-visible{outline:2px solid var(--lime);outline-offset:6px;border-radius:8px}
.hint{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:10px;text-transform:uppercase;letter-spacing:.16em;color:var(--mute);white-space:nowrap;z-index:6}
.hint .d{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(182,255,59,.3)}
/* caption */
.caption{position:fixed;left:0;right:0;bottom:var(--mq);height:var(--cap,150px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;z-index:6;text-align:center;padding:0 16px}
.cnum{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--mute)}
.cname{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:clamp(20px,2.6vw,34px);letter-spacing:.01em;line-height:1}
.csub{font-size:12px;color:#55554f;letter-spacing:.04em}
.pill{margin-top:6px;display:inline-flex;gap:8px;align-items:center;padding:9px 18px;border:1.5px solid var(--ink);border-radius:99px;text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.14em;transition:background .25s,color .25s}
.pill:hover{background:var(--ink);color:var(--bg)}
.pill.dark{background:var(--ink);color:var(--bg)}
.pill.dark:hover{background:var(--lime);color:var(--ink)}
/* marquee */
.marquee{position:fixed;left:0;right:0;bottom:0;height:var(--mq);background:var(--lime);z-index:30;overflow:hidden;display:flex;align-items:center;border-top:1.5px solid var(--ink)}
.mtrack{display:flex;white-space:nowrap;will-change:transform}
.mtrack span{font-weight:900;font-style:italic;font-stretch:112%;text-transform:uppercase;font-size:15px;letter-spacing:.06em;padding:0 18px;display:inline-flex;align-items:center;gap:36px}
.mtrack span:after{content:"✦";font-style:normal;font-size:12px}
/* focus */
.focus{position:fixed;inset:0;bottom:var(--mq);z-index:25;visibility:hidden;touch-action:pan-y}
.focus.open{visibility:visible}
.fcard{position:absolute;left:50%;top:0;perspective:1600px;transform-origin:0 0}
.flip{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.face{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 0;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(22px 36px 24px rgba(30,28,22,.25));user-select:none;-webkit-user-drag:none}
.face.back{transform:rotateY(180deg)}
.finfo{position:absolute;left:0;right:0;bottom:16px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:0 16px}
.fnum{font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--mute)}
.fname{font-weight:900;font-stretch:120%;text-transform:uppercase;font-size:clamp(24px,3.4vw,46px);line-height:.95}
.fsub{font-size:12px;color:#55554f}
.toggle{position:relative;display:flex;border:1.5px solid var(--ink);border-radius:99px;padding:3px;margin-top:4px}
.toggle button{position:relative;z-index:1;padding:7px 18px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-radius:99px;transition:color .3s}
.toggle button.on{color:var(--lime)}
.knob{position:absolute;top:3px;bottom:3px;left:3px;border-radius:99px;background:var(--ink)}
.link{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:4px;padding:4px}
.swipehint{display:none;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.close{position:absolute;top:18px;right:clamp(14px,3vw,40px);width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);font-size:16px;background:rgba(239,238,234,.7);z-index:3}
.close:hover{background:var(--ink);color:var(--lime)}
.arrow{position:absolute;top:44%;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--ink);font-size:20px;background:rgba(239,238,234,.6);z-index:3;transition:background .25s,color .25s}
.arrow:hover{background:var(--ink);color:var(--lime)}
.prev{left:clamp(12px,4vw,64px)}.next{right:clamp(12px,4vw,64px)}
/* modal */
.modal{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(17,17,16,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);visibility:hidden;opacity:0;padding:20px}
.modal.open{visibility:visible}
.sheet{background:var(--bg);border:1.5px solid var(--ink);border-radius:22px;max-width:420px;width:100%;padding:28px;box-shadow:10px 10px 0 var(--lime)}
.sheet .tag{display:inline-block;background:var(--lime);border:1.5px solid var(--ink);border-radius:99px;padding:4px 10px;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.sheet h3{font-weight:900;font-stretch:118%;text-transform:uppercase;font-size:26px;margin:14px 0 10px;line-height:1}
.sheet p{font-size:14px;line-height:1.5;color:#3a3a36}
.sheet .small{font-size:12px;color:var(--mute);margin:8px 0 18px}
/* mobile rack */
body.m .scroller{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
body.m .scroller::-webkit-scrollbar{display:none}
body.m .g{scroll-snap-align:center}
body.m .snap{position:absolute;top:0;height:1px;scroll-snap-align:center}
@media (max-width:719px){
  :root{--top:60px;--mq:38px}
  .mid{display:none}
  .right em{display:none}
  .logo b{font-size:18px}
  .mtrack span{font-size:13px}
  .arrow{width:42px;height:42px;font-size:16px;top:40%}
  .swipehint{display:block}
  .close{top:10px;width:40px;height:40px}
}
@media (prefers-reduced-motion:reduce){.mtrack{animation:none}}