/* =====================================================================
   The Art of Nuo Yan — v3 (gallery-first, lightweight)
   Fonts — ONLY the two families supplied by the artist:
     Zilla Slab          all regular text (bold only for special emphasis)
     MONSTER OF FANTASY  big display text (logo, big section titles,
                         artwork title in the detail view)
   Both are subset to Latin + punctuation (woff2). Fallback: generic serif.
   ===================================================================== */
@font-face{font-family:"Zilla Slab";src:url(fonts/zillaslab-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Zilla Slab";src:url(fonts/zillaslab-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"MONSTER OF FANTASY";src:url(fonts/monsteroffantasy-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#f2eee6;            /* between v1 parchment #f4ede1 and original #ecede8 */
  --panel:#ffffff; --panel-2:#f7f5f0;
  --line:#d9d4c9; --line-2:#e8e4db;
  --ink:#2c2a31; --ink-2:#55525a; --ink-3:#7c786f;
  --gold:#b48a3c;
  --rail:clamp(236px, 20vw, 300px);
  --gap:clamp(36px, 4vw, 64px);
  --ease:cubic-bezier(.22,1,.36,1);
  --sans:"Zilla Slab", serif;                          /* every regular text */
  --display:"MONSTER OF FANTASY", "Zilla Slab", serif;  /* big display text only */
  --dockH:clamp(128px, 15.5vh, 172px);                  /* bottom dock (progress + Cover Flow) */
  --cfS:clamp(80px, 10vh, 116px);                       /* Cover Flow centre thumbnail */
  --note:clamp(230px, 22vw, 300px);                     /* welcome card width */
  --glove:url(images/ui/glove-cursor.png) 6 4, pointer;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 15px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
body.is-intro{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit}
a,button,.card-hit,.tab,.char{cursor:var(--glove)}
button{font:inherit;color:inherit}
h1,h2,h3,p,ol,ul,figure{margin:0}
.display{font-family:var(--display);font-weight:400;letter-spacing:.01em}
.label{font:400 11.5px/1.4 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Wakfu-like panel & buttons ---------- */
.panel{background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%);border:1px solid var(--line);
  box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 4px var(--line-2), 0 1px 2px rgba(60,50,30,.05)}
.wbtn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;padding:.42em 1em;border-radius:4px;
  border:1px solid #cdc7bb;background:linear-gradient(180deg,#ffffff 0%,#ecebe6 100%);color:#45433f;
  font:400 13px/1.2 var(--sans);letter-spacing:.04em;box-shadow:inset 0 1px 0 #fff,0 1px 1px rgba(0,0,0,.05);transition:border-color .2s,background .2s}
.wbtn:hover{border-color:#b3ac9e;background:linear-gradient(180deg,#ffffff 0%,#f4f2ed 100%)}
.wbtn:active{background:linear-gradient(180deg,#e8e6e0 0%,#fbfaf8 100%)}
.wbtn:focus-visible,.tab:focus-visible,.card-hit:focus-visible,.btn-contact:focus-visible{outline:2px solid #6c63a8;outline-offset:2px}

/* Contact button — kept from v1 */
.btn-contact{display:inline-block;text-decoration:none;font:400 15px/1 var(--sans);color:var(--ink);
  border:1.5px solid rgba(185,130,31,.5);border-radius:999px;padding:.6rem 1.25rem;transition:background .2s,color .2s,border-color .2s}
.btn-contact:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ================= Intro ================= */
#intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:var(--bg);transition:opacity .35s ease}
#intro.out{opacity:0;pointer-events:none}
.intro-stage{text-align:center}
.intro-pre{font:400 14px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);opacity:0;animation:fadeIn .4s .35s forwards}
.intro-name{font:400 clamp(3rem,10vw,7rem)/1 var(--display);color:var(--ink);display:flex;justify-content:center;margin-top:.5rem}
.il{display:inline-block;opacity:0;transform:translateY(.35em);animation:letterIn .45s var(--ease) forwards}
.il:nth-child(1){animation-delay:.05s}.il:nth-child(2){animation-delay:.1s}.il:nth-child(3){animation-delay:.15s}
.il:nth-child(5){animation-delay:.2s}.il:nth-child(6){animation-delay:.25s}.il:nth-child(7){animation-delay:.3s}
.il-gap{width:.3em}
.il-o{position:relative}
.intro-slime{position:absolute;left:50%;top:52%;width:.42em;image-rendering:pixelated;transform:translate(-50%,-50%);transform-origin:50% 100%;
  opacity:0;animation:slimeDrop .9s .1s forwards}
@keyframes fadeIn{to{opacity:1}}
@keyframes letterIn{to{opacity:1;transform:none}}
@keyframes slimeDrop{
  0%{opacity:0;transform:translate(-50%,-400%) scale(.9,1.12)}
  10%{opacity:1}
  42%{transform:translate(-50%,-50%) scale(1)}
  52%{opacity:1;transform:translate(-50%,-50%) scale(1.32,.7)}
  66%{opacity:1;transform:translate(-50%,-105%) scale(.9,1.12)}
  80%{opacity:1;transform:translate(-50%,-50%) scale(1.12,.88)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

/* ================= Rail ================= */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);padding:14px 0 14px 14px;z-index:20}
.rail-frame{height:100%;display:flex;flex-direction:column;padding:22px 18px 18px;overflow-y:auto;scrollbar-width:none;
  background:linear-gradient(180deg,#ffffff 0%,#f6f4ef 100%);border:1px solid var(--line);box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 4px var(--line-2)}
.rail-frame::-webkit-scrollbar{display:none}
.brand{display:block;text-align:center;text-decoration:none}
.brand-pre{display:block;font:400 11.5px/1 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--ink-3)}
/* logo scales with the rail: "NUO YAN" is ≈4.75em wide in MONSTER OF FANTASY,
   rail inner width = rail − 52px  →  font-size = (rail − 52px) / 5.3 (≈10% spare) */
.logo{display:block;font:400 min(48px, calc((var(--rail) - 52px) / 5.3))/1.05 var(--display);letter-spacing:0;color:var(--ink);margin-top:.4rem;white-space:nowrap;max-width:100%}
.logo-o{position:relative;display:inline-block}
.logo-slime{position:absolute;left:50%;top:52%;width:.42em;transform:translate(-50%,-50%);transform-origin:50% 100%;image-rendering:pixelated}
.brand:hover .logo-slime,.page-ready .logo-slime.hop{animation:slimeHop .7s var(--ease)}
@keyframes slimeHop{0%{transform:translate(-50%,-50%) scale(1.22,.78)}40%{transform:translate(-50%,-125%) scale(.88,1.12)}75%{transform:translate(-50%,-50%) scale(1.1,.9)}100%{transform:translate(-50%,-50%)}}
.tagline{text-align:center;font:400 clamp(11.5px, calc((var(--rail) - 52px) / 15.5), 13px)/1.4 var(--sans);white-space:nowrap;color:var(--ink-2);margin:.5rem 0 1.2rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line-2)}

/* category rows (Wakfu character-list style) */
.tabs{display:flex;flex-direction:column;gap:6px}
.tab{position:relative;display:flex;align-items:center;min-height:56px;padding:6px 10px 6px 0;text-align:left;border:1px solid var(--line);border-radius:3px;overflow:hidden;
  background:linear-gradient(90deg,var(--c) 0%,#fff 62%);background:linear-gradient(90deg,var(--c) 0%,color-mix(in srgb,var(--c) 45%,#fff) 34%,#fff 62%);transition:border-color .2s,transform .25s var(--ease)}
.tab::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);pointer-events:none}
.tab img{position:absolute;left:0;top:0;width:66px;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,#000 45%,transparent 100%);mask-image:linear-gradient(90deg,#000 45%,transparent 100%)}
.tab-txt{position:relative;display:flex;flex-direction:column;min-width:0;flex:1;margin-left:60px}
.tab-name{font:400 13px/1.15 var(--sans);text-transform:uppercase;letter-spacing:.03em;color:var(--ink);overflow-wrap:break-word}
.tab-sub{font:400 11px/1.3 var(--sans);color:var(--ink-3);letter-spacing:.06em;margin-top:2px}
.tab:hover{border-color:#b9b2a5;transform:translateX(2px)}
.tab[aria-pressed="true"]{border-color:#9d978b;background:linear-gradient(90deg,var(--c) 0%,color-mix(in srgb,var(--c) 55%,#e9e7e2) 34%,#e6e4df 62%,#f1f0ec 100%)}
.tab[aria-pressed="true"] .tab-name{font-weight:700;text-decoration:underline;text-decoration-color:rgba(0,0,0,.25);text-underline-offset:3px}
.bio{font-size:13px;line-height:1.6;color:var(--ink-2);margin:1.2rem 2px 0;text-align:center}
@media (max-height: 720px){.bio{display:none}}
.rail-contact{margin-top:auto;padding-top:1.2rem;display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center}
.mail{font:400 14px/1.3 var(--sans);color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line)}
.mail:hover{color:var(--ink);border-color:var(--ink-2)}
.socials{list-style:none;padding:0;display:flex;gap:8px}
.socials a{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--line);border-radius:4px;background:linear-gradient(180deg,#fff,#efede8);transition:border-color .2s,transform .2s var(--ease)}
.socials img{width:18px;height:18px;object-fit:contain}
.socials a:hover{border-color:#b3ac9e;transform:translateY(-2px)}

/* ================= Main / Gallery ================= */
.main{margin-left:var(--rail);min-width:0}
.gallery{position:relative}
.g-sticky{position:sticky;top:0;height:100vh;overflow:hidden}
/* the strip lives in the area above the dock; cards are vertically centred there */
.g-track{position:absolute;left:0;top:0;bottom:var(--dockH);display:flex;align-items:center;gap:var(--gap);padding:0 var(--gap);will-change:transform;transition:opacity .25s}
.g-track.swap{opacity:0}
/* Artwork size. Height-driven, the width ALWAYS follows the image's real ratio:
   --ar starts from works.js `size` and is replaced by naturalWidth/naturalHeight
   as soon as the file has loaded. Nothing is ever cropped or stretched.
   v3: max height 61vh (= v2's 76vh − 20%). --wcap = widest allowed image. */
.card{flex:none;margin:0;width:min-content;--wcap:calc((100vw - var(--rail)) * .8);
  --imgH:min(61vh, calc(100vh - var(--dockH) - 124px), calc(var(--wcap) / var(--ar)))}
/* the first card sits next to the welcome card: it must fit the remaining width */
.card.first{--wcap:calc(100vw - var(--rail) - var(--note) - 3 * var(--gap) - 20px)}
.card-hit{display:block;padding:9px;border:1px solid var(--line);background:#fff;box-shadow:0 1px 2px rgba(60,50,30,.06),0 14px 30px -18px rgba(60,50,30,.35);
  transition:transform .3s var(--ease),border-color .3s}
.card-hit:hover{transform:translateY(-4px);border-color:#bdb6a8}
.card-img{display:block;height:var(--imgH);aspect-ratio:var(--ar);background:#ebe7de;border-radius:1px}
.card-img img{height:100%;width:auto;max-width:none;opacity:0;transition:opacity .4s}
.card-img img.loaded{opacity:1}
.card figcaption{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:10px 2px 0}
.cap-title{font:400 17px/1.2 var(--sans);color:var(--ink)}
.cap-sub{display:block;margin-top:3px}
.pill{flex:none;font:400 11px/1 var(--sans);letter-spacing:.06em;color:#5a564e;padding:.38em .75em;border:1px solid #cfc9bd;border-radius:999px;background:linear-gradient(180deg,#fff,#efede8);white-space:nowrap}

/* welcome + end cards inside the strip */
.g-note{flex:none;width:var(--note);display:flex;flex-direction:column;justify-content:center;padding:24px 22px}
.g-note .welcome{font:400 15px/1.5 var(--sans);color:var(--ink-2);margin-bottom:1rem}
.g-note h2{font-size:30px;line-height:1.1;margin-bottom:.3rem}
.g-note .hint{margin-top:1rem;display:flex;align-items:center;gap:.6rem}
.g-note .hint img{width:30px;image-rendering:pixelated}
.g-end{align-items:center;text-align:center;gap:1rem;height:min(61vh,520px)}
.g-end img{width:56px;image-rendering:pixelated}
/* thumbnail grid (square crops are OK here — thumbnails only) */
.g-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:1rem}
.g-thumbs button{display:block;padding:0;border:1px solid var(--line);border-radius:1px;background:#ebe7de;aspect-ratio:1;overflow:hidden;transition:border-color .2s,transform .25s var(--ease)}
.g-thumbs img{width:100%;height:100%;object-fit:cover}
.g-thumbs button:hover{border-color:var(--ink-2);transform:translateY(-2px)}
.g-thumbs button.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
@media (max-height: 760px){.g-thumbs button:nth-child(n+7){display:none}.g-note .welcome{margin-bottom:.6rem}}
@media (max-height: 600px){.g-thumbs button:nth-child(n+4){display:none}}

/* bottom dock: progress (left) + Cover Flow (right) */
.g-dock{position:absolute;left:var(--gap);right:calc(var(--gap) + 52px);bottom:0;height:var(--dockH);display:flex;align-items:center;gap:28px}
.g-hud{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px;font:400 11.5px/1 var(--sans);color:var(--ink-3);letter-spacing:.08em}
.g-hud-row{display:flex;align-items:baseline;gap:14px;white-space:nowrap}
.g-cat{font:400 14px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
.g-count b{color:var(--ink);font-weight:700}
.g-bar{height:1px;background:var(--line);position:relative;overflow:hidden}
.g-bar i{position:absolute;inset:0;background:var(--ink-2);transform-origin:left;transform:scaleX(0)}
.g-hint{text-transform:uppercase}

/* Cover Flow (iPod style). Only transform/opacity change; items further than
   ±4 from the current one are display:none, so ≤7 are visible at a time. */
.coverflow{flex:none;width:clamp(300px, 36vw, 600px);display:flex;align-items:center;gap:6px}
.cf-col{flex:1;min-width:0}
.cf-stage{position:relative;height:calc(var(--cfS) + 14px);perspective:560px;overflow:hidden}
.cf-item{position:absolute;left:50%;top:7px;width:var(--cfS);height:var(--cfS);margin-left:calc(var(--cfS) / -2);padding:0;border:1px solid #fff;border-radius:1px;background:#ebe7de;
  box-shadow:0 8px 14px -8px rgba(40,30,20,.55);transition:transform .45s var(--ease),opacity .45s var(--ease);will-change:transform}
.cf-item img{width:100%;height:100%;object-fit:cover;display:block}
.cf-item.off{display:none}
.cf-item.cur{border-color:var(--ink)}
.cf-title{margin-top:6px;text-align:center;font:400 13px/1.2 var(--sans);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* chunky cartoon block arrows (inline SVG) — gallery Cover Flow + detail view */
.arrow-btn{flex:none;display:inline-grid;place-items:center;width:46px;height:40px;padding:0;border:0;background:none;color:#141216}
.arrow-btn .arrow{width:38px;height:32px;overflow:visible;fill:currentColor;stroke:currentColor;stroke-width:5;stroke-linejoin:round;transition:transform .18s var(--ease)}
.arrow-l .arrow{transform:scaleX(-1)}
.arrow-r:hover .arrow{transform:translateX(4px)}
.arrow-l:hover .arrow{transform:scaleX(-1) translateX(4px)}
.arrow-btn:active .arrow{transition-duration:.05s}
.arrow-r:active .arrow{transform:translateX(6px) scale(.92)}
.arrow-l:active .arrow{transform:scaleX(-1) translateX(6px) scale(.92)}
.arrow-btn:focus-visible{outline:2px solid #6c63a8;outline-offset:2px;border-radius:4px}
.arrow-btn[disabled]{opacity:.22;pointer-events:none}

/* ================= Lineup ================= */
.lineup-sec{padding:var(--gap) var(--gap) 0}
.panel-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:22px 26px 0}
.panel-head h2{font-size:30px;line-height:1.1}
.lineup-scroll{overflow-x:auto;overflow-y:visible;padding:10px 0 0;scrollbar-width:thin}
.lineup{--H:clamp(130px, min(40vh, calc((100vw - var(--rail) - 2 * var(--gap) - 110px) / 4.3)), 320px);display:flex;align-items:flex-end;justify-content:center;gap:0;min-width:max-content;padding:20px 26px 26px;margin:0 auto;touch-action:pan-x}
.char{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;touch-action:none;user-select:none;-webkit-user-select:none}
.char img{height:calc(var(--h) * var(--H));width:auto;max-width:none;object-fit:contain;pointer-events:none;transition:transform .3s var(--ease)}
.char:hover img{transform:translateY(-6px)}
.char figcaption{margin-top:8px;font:400 11.5px/1 var(--sans);letter-spacing:.06em;color:var(--ink-2);padding:.35em .7em;border:1px solid var(--line);border-radius:999px;background:linear-gradient(180deg,#fff,#efede8);white-space:nowrap}
.char.dragging{position:relative;z-index:3}
.char.dragging img{transform:scale(1.04)}

/* ================= Footer ================= */
.foot{padding:var(--gap)}
.foot-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 28px}
.foot-panel h2{font-size:30px;line-height:1.1;margin-bottom:6px}
.foot-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.copy{margin-top:18px;text-align:center;font-size:12px;color:var(--ink-3)}

/* ================= Detail view ================= */
.detail{position:fixed;inset:0;z-index:60;background:var(--bg);opacity:0;transition:opacity .25s ease}
.detail.open{opacity:1}
.detail[hidden]{display:none}
html.lock,html.lock body{overflow:hidden}
.d-scroll{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;padding:28px 76px 60px}
.d-top{display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,25vw,360px);gap:28px;align-items:start;max-width:1500px;margin:0 auto}
.d-stage{display:flex;justify-content:center;align-items:flex-start;min-height:40vh;transform:translateY(10px);transition:transform .35s var(--ease)}
.detail.open .d-stage{transform:none}
.frame{padding:9px;background:#fff;border:1px solid var(--line);box-shadow:0 14px 34px -20px rgba(60,50,30,.4)}
.frame img{max-height:calc(100vh - 92px);max-width:100%;width:auto;height:auto;object-fit:contain;border-radius:1px}
.d-info{position:sticky;top:0;padding:8px 4px 20px}   /* v3: no box — text sits on the page */
.d-title{font-size:34px;line-height:1.08;margin:.4rem 0 .6rem}
.d-medium{font-size:14px;color:var(--ink-2);font-style:italic;margin-bottom:.5rem}
.d-medium:empty,.d-desc:empty{display:none}
.d-desc{font-size:15px;line-height:1.55;color:var(--ink-2);margin-bottom:1rem}
.d-proc-head{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;margin:6px 0 10px}
.d-proc-title{font:700 15px/1.2 var(--sans);letter-spacing:.02em}
.d-steplist{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.d-steplist button{display:flex;align-items:center;gap:10px;width:100%;padding:5px;text-align:left;border:1px solid var(--line);border-radius:3px;
  background:linear-gradient(90deg,#f1efea,#fff 60%);font:400 13px/1.35 var(--sans);color:var(--ink-2);transition:border-color .2s}
.d-steplist button:hover{border-color:#b3ac9e}
.d-steplist img{width:56px;height:40px;object-fit:cover;flex:none;border-radius:1px}
.d-steplist b{font:700 13px/1 var(--sans);color:var(--ink);margin-right:4px}
.placeholder{border:1px dashed #cbc5b9;border-radius:3px;padding:18px 14px;text-align:center;color:var(--ink-3);font-size:13px;line-height:1.6;background:repeating-linear-gradient(135deg,#fbfaf7 0 10px,#f6f4ef 10px 20px)}
.placeholder{font-size:15px;color:var(--ink-2)}
.d-nav{display:flex;justify-content:space-between;gap:8px;margin:0 -4px}
.d-steps{max-width:1500px;margin:46px auto 0;display:flex;flex-direction:column;gap:46px}
.d-step{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;align-items:start}
.d-step-meta{position:sticky;top:10px}
.d-step-num{font:400 38px/1 var(--display);color:var(--ink)}
.d-step-cap{margin-top:8px;font-size:13.5px;color:var(--ink-2)}
.d-step .frame{justify-self:start}
.d-step .frame img{max-height:82vh}
.d-close{position:fixed;top:12px;right:14px;z-index:2}
.d-close .arrow{width:30px;height:30px;stroke-width:7;stroke-linecap:round;fill:none}
.d-close:hover .arrow{transform:rotate(90deg) scale(1.08)}
.d-arrow{position:fixed;top:50%;margin-top:-20px;z-index:2}
.d-arrow-l{left:14px}.d-arrow-r{right:14px}

/* back to top */
.to-top{position:fixed;right:18px;bottom:18px;z-index:30;width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:linear-gradient(180deg,#fff,#efede8);
  display:grid;place-items:center;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .25s,transform .3s var(--ease)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top img{width:28px;image-rendering:pixelated}
.to-top:hover img{animation:slimeBounce .6s var(--ease)}
@keyframes slimeBounce{0%{transform:scale(1.25,.75)}45%{transform:translateY(-10px) scale(.9,1.1)}100%{transform:none}}

/* reveal (IntersectionObserver) */
.rv{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.rv.in{opacity:1;transform:none}

/* ================= Mobile / narrow ================= */
@media (max-width: 860px){
  :root{--rail:0px;--gap:18px}
  .rail{position:relative;width:auto;padding:10px 10px 0}
  .rail-frame{height:auto;padding:16px 14px 14px;overflow:visible}
  .logo{font-size:40px}
  .tagline{margin-bottom:.9rem;padding-bottom:.8rem}
  .tabs{flex-direction:row;overflow-x:auto;gap:6px;margin:0 -4px;padding:0 4px 4px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .tabs::-webkit-scrollbar{display:none}
  .tab{flex:0 0 auto;min-height:50px;width:210px;scroll-snap-align:start}
  .tab img{width:56px}
  .tab-txt{margin-left:50px}
  .bio{display:none}
  .rail-contact{flex-direction:row;flex-wrap:wrap;justify-content:center;padding-top:.9rem}
  .main{margin-left:0}
  .g-sticky{position:relative;height:auto;overflow:visible;display:block}
  .g-track{position:static;flex-direction:column;align-items:stretch;padding:18px var(--gap) 0;gap:28px;transform:none!important;will-change:auto}
  .card{--imgH:auto;width:auto}
  .card-hit{width:100%}
  .card-img{width:100%;height:auto;aspect-ratio:var(--ar)}
  .card-img img{width:100%;height:auto}
  .g-note{width:auto;height:auto;padding:18px}
  .g-note.g-intro{display:none}
  .g-dock{display:none}
  .lineup{--H:150px;justify-content:flex-start}
  .panel-head{padding:16px 16px 0}
  .d-scroll{padding:60px 12px 40px}
  .d-top{grid-template-columns:1fr}
  .d-info{position:relative}
  .frame img{max-height:none}
  .d-step{grid-template-columns:1fr;gap:10px}
  .d-step-meta{position:relative;top:0}
  .d-arrow{display:none}
  .d-close{top:8px;right:6px}
}

/* ================= Reduced motion ================= */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important;transition-delay:0s!important}
  #intro{display:none}
  .rv{opacity:1;transform:none}
}