/* ==========================================================================
   STAGE-T page — stage-t.css
   P01 HERO / P02 OVERVIEW (dimensions + colours) / P03 DETAILS (sticky TOC) /
   P04 CASE / P05 SPECIFICATION / P06 GALLERY strip / P07 BUY + mobile buy bar.
   Uses base.css tokens only; nothing here is shared.
   ========================================================================== */

/* right bleed: from the wrap's right edge to the viewport edge */
:root { --bleed: calc(var(--m) + max(0px, (100vw - var(--maxw)) / 2)); }

.nobr { white-space: nowrap; }
.cls { display: inline-block; }
.r-16x9 { aspect-ratio: 16 / 9; }
.r-4x5 { aspect-ratio: 4 / 5; }
.r-1x1 { aspect-ratio: 1 / 1; }
.r-3x4 { aspect-ratio: 3 / 4; }
.r-21x9 { aspect-ratio: 21 / 9; }

.sec-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.sec-head .caption { margin-top: 0; }

/* ======================================================================
   P01 — HERO
   ====================================================================== */
/* P01 — full guitar + five colours + HOTMUSIC (moved from HOME, 2026-09-28)
   Ratio-locked: everything is measured in logo cells (the STAGE-T mark is an 88×14 grid).
   cell = H/75 (12px at 900px tall), capped so the composition fits the width.
   The final T's stem (centre at 81.9 cells) sits exactly on the guitar neck. */
.hx {
  --cell: min(calc(100svh / 75), calc((100vw - 2 * var(--m)) / 93.2));
  --LX: max(var(--m), calc((100vw - 93.2 * var(--cell)) / 2));   /* composition centred */
  --NX: calc(var(--LX) + 81.9 * var(--cell));                     /* neck centre = T stem centre */
  --G: calc(67.5 * var(--cell));                                   /* guitar height (0.9H) */
  --GT: calc(5.6 * var(--cell));                                   /* guitar top */
  --LY: calc(18.75 * var(--cell));                                 /* logo top: across the upper neck */
  position: relative; height: 100svh; min-height: 600px; overflow: hidden; background: var(--stage);
}
.hx__spot {
  position: absolute; left: calc(var(--NX) - 34 * var(--cell)); top: calc(var(--GT) + 0.42 * var(--G));
  width: calc(68 * var(--cell)); height: calc(0.62 * var(--G)); pointer-events: none;
  background: radial-gradient(closest-side, rgba(236, 232, 227, 0.075), rgba(236, 232, 227, 0.02) 55%, transparent);
}
.hx__g { position: absolute; inset: 0; pointer-events: none; }
.hx__g img {
  position: absolute; top: var(--GT); height: var(--G); width: auto; max-width: none;
  left: calc(var(--NX) - var(--nx) * var(--ar) * var(--G));
  opacity: 0; transition: opacity var(--d-short) var(--ease-io);
}
.hx__g img.is-active { opacity: 1; }
.hx__mark { margin: 0; font-weight: inherit; position: absolute; left: var(--LX); top: var(--LY); width: calc(88 * var(--cell)); color: var(--resin); z-index: 2; }
.hx__logo { display: block; }
.hx__mark svg { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }
.hx__sub { position: absolute; left: calc(var(--LX) + 2px); top: calc(var(--LY) + 16 * var(--cell)); width: calc(16 * var(--cell)); color: var(--resin); z-index: 2; }
.hx__sub svg { width: 100%; height: auto; shape-rendering: crispEdges; }
.hx__body { position: absolute; left: var(--LX); top: calc(var(--LY) + 24 * var(--cell)); width: min(600px, calc(66 * var(--cell))); z-index: 3; }
.hx__lead { margin: 0; }
.hx__lead .sp { display: none; }
@media (max-width: 767px) { .hx__lead .sp { display: inline; } }
.hx__colors { margin: 32px 0 0; padding: 0; border: 0; min-width: 0; }
.hx__colors legend { padding: 0; margin-bottom: 12px; }
.hx__sw { position: relative; display: flex; gap: 4px; }
.hx__sw input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; margin: 0; }
.hx__sw label { position: relative; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.hx__sw .chip { width: 24px; height: 24px; background: var(--top); box-shadow: inset 0 0 0 5px var(--band), 0 0 0 1px rgba(135, 128, 128, 0.35); }
.hx__sw input:checked + label::after { content: ""; position: absolute; inset: 6px; box-shadow: 0 0 0 1px var(--resin); }
.hx__sw input:focus-visible + label { outline: 2px solid var(--resin); outline-offset: 2px; }
.hx__name { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; min-height: 20px; }
.hx__name .sku { font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; color: var(--sand); }
.hx__name .nm { font-family: var(--f-display); font-weight: 600; font-size: 18px; letter-spacing: 0.1em; }
.hx__name .tag { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--resin); box-shadow: inset 0 0 0 1px var(--gunmetal); padding: 4px 8px; }
.hx__name .tag[hidden] { display: none; }
.hx__cta { display: flex; align-items: center; gap: 24px; margin-top: 40px; }
.hx__case { margin: 0; font-size: 13px; letter-spacing: 0.06em; color: var(--resin); }
html:not(.js) .hx__colors { display: none; }   /* chips are built by stage-t.js; no empty legend without JS */
.hx__foot { position: absolute; left: var(--LX); bottom: 32px; display: flex; gap: 64px; align-items: center; z-index: 3; }
.hx__scroll { display: flex; align-items: center; gap: 12px; }
.hx__scroll i { position: relative; display: block; width: 48px; height: 1px; background: var(--gunmetal); overflow: hidden; }
.hx__scroll i::after { content: ""; position: absolute; inset: 0; width: 16px; background: var(--resin); animation: hxScroll 1.8s var(--ease-io) 3; }
@keyframes hxScroll { from { transform: translateX(-16px); } to { transform: translateX(48px); } }

/* load sequence: light → name → words → controls */
html.js .hx__g, html.js .hx__spot { opacity: 0; filter: brightness(0.35); }
html.js .hx.is-lit .hx__g, html.js .hx.is-lit .hx__spot { opacity: 1; filter: none; transition: opacity var(--d-long) var(--ease-out), filter var(--d-long) var(--ease-out); }
html.js .hx [data-hx] { opacity: 0; transform: translateY(16px); }
html.js .hx.is-told [data-hx] { opacity: 1; transform: none; transition: opacity var(--d-mid) var(--ease-out), transform var(--d-mid) var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }

@media (max-height: 800px) and (min-width: 768px) {   /* 1024×768 too: keeps the buy button clear of the FIG line */
  .hx__colors { margin-top: 20px; } .hx__cta { margin-top: 24px; } .hx__lead { font-size: 18px; }
}
/* phone: logo on top, guitar centred below (the stem alignment is a desktop flourish) */
@media (max-width: 767px) {
  .hx { --cell: calc((100vw - 2 * var(--m)) / 88); --LX: var(--m); --gh: max(280px, calc(100svh - 500px)); display: flex; flex-direction: column; height: auto; min-height: 100svh; padding-bottom: 32px; }
  .hx__mark { order: 1; } .hx__sub { order: 2; } .hx__g { order: 3; } .hx__body { order: 4; }
  .hx__mark { position: relative; left: auto; top: auto; margin: calc(var(--header-h) + 20px) var(--m) 0; width: calc(100vw - 2 * var(--m)); }
  .hx__sub { position: relative; left: auto; top: auto; margin: 10px var(--m) 0; width: 72px; }
  .hx__g { position: relative; inset: auto; height: var(--gh); margin-top: 16px; }
  .hx__g img { top: 0; height: 100%; left: calc(50% - var(--nx) * var(--ar) * var(--gh)); }
  .hx__spot { display: none; }
  .hx__body { position: relative; left: auto; top: auto; width: auto; margin: 16px var(--m) 0; }
  .hx__colors { margin-top: 20px; }
  .hx__sw { justify-content: space-between; }
  .hx__cta { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 24px; }
  .hx__cta .btn { width: 100%; }
  .hx__case { font-size: 12px; }
  .hx__foot { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .hx__g, html.js .hx__spot, html.js .hx [data-hx] { opacity: 1; transform: none; filter: none; }
}

/* ======================================================================
   P02-A — DIMENSIONS (BENCH)
   ====================================================================== */
.ov { padding: 96px 0 128px; }
.dim { margin: 0; }
.dim__fig { position: relative; width: calc(100% - 2 * (var(--col) + var(--g))); margin: 176px auto 200px; }
.dim__img { width: 100%; height: auto; }
.dim__cos { position: absolute; inset: 0; }
.dim__note { margin-top: 0; text-align: right; font-size: 11px; line-height: 1.6; letter-spacing: 0.04em; color: var(--ink-grey); }

/* callout: label on a tier, 1px leader down/up to a 5px point (shared by dimensions and case anatomy) */
.co { position: absolute; left: calc(var(--x) * 1%); width: 0; --lh: 44px; }
.co--t1 { --tier: 152px; }
.co--t2 { --tier: 84px; }
.co--t1, .co--t2, .co--up { top: calc(-1 * var(--tier)); height: calc(var(--tier) + var(--y) * 1%); }
.co--down { top: calc(var(--y) * 1%); bottom: calc(-1 * var(--tier)); }
.co::before { content: ""; position: absolute; left: -0.5px; width: 1px; background: var(--ink); top: var(--lh); bottom: 0; transform-origin: 50% 0; }
.co::after { content: ""; position: absolute; left: -2.5px; bottom: -2.5px; width: 5px; height: 5px; background: var(--ink); }
.co--down::before { top: 0; bottom: var(--lh); transform-origin: 50% 100%; }
.co--down::after { top: -2.5px; bottom: auto; }
.co__label { position: absolute; left: 0; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; white-space: nowrap; text-align: center; }
.co--down .co__label { top: auto; bottom: 0; flex-direction: column-reverse; }
.co__label .k { font-size: 11px; line-height: 1.4; letter-spacing: 0.04em; color: var(--ink-grey); }
.co__label .ja { font-weight: 500; font-size: 13px; line-height: 1.5; letter-spacing: 0.03em; color: var(--ink); }

.dim__ext { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); height: calc((100 - var(--y)) * 1% + 72px); width: 1px; margin-left: -0.5px; background: rgba(4, 4, 4, 0.35); }
.dim__line { position: absolute; left: 13.5%; width: 68.75%; top: calc(100% + 72px); height: 1px; background: var(--ink); transform-origin: 0 50%; }
.dim__line::before, .dim__line::after { content: ""; position: absolute; top: -6px; width: 1px; height: 13px; background: var(--ink); }
.dim__line::before { left: 0; } .dim__line::after { right: 0; }
.dim__scale { position: absolute; left: 13.5%; width: 68.75%; top: calc(100% + 104px); display: flex; align-items: flex-end; justify-content: center; gap: 32px; }
.dim__scale .t-numeral { line-height: 0.8; }
.dim__scale-t { display: flex; flex-direction: column; gap: 6px; padding-bottom: 2px; }
.dim__scale-t .k { font-size: 11px; letter-spacing: 0.04em; color: var(--ink-grey); line-height: 1; }
.dim__scale-t .ja { font-weight: 500; font-size: 13px; line-height: 1.4; letter-spacing: 0.03em; }

/* draw sequence: guitar fades → scale line draws (640ms) → leaders left to right (160ms each, 80ms apart) */
html.js .dim .dim__img, html.js .dim .dim__ext { opacity: 0; }
html.js .dim .dim__line { transform: scaleX(0); }
html.js .dim .dim__scale { opacity: 0; }
html.js [data-reveal="draw"] .co { opacity: 0; }
html.js [data-reveal="draw"] .co::before { transform: scaleY(0); }
html.js .dim.is-in .dim__img { opacity: 1; transition: opacity var(--d-mid) var(--ease-out); }
html.js .dim.is-in .dim__ext { opacity: 1; transition: opacity var(--d-short) linear 500ms; }
html.js .dim.is-in .dim__line { transform: none; transition: transform var(--d-mid) var(--ease-out) 560ms; }
html.js .dim.is-in .dim__scale { opacity: 1; transition: opacity var(--d-short) linear 1100ms; }
html.js [data-reveal="draw"].is-in .co { opacity: 1; transition: opacity 160ms linear calc(var(--base, 1200ms) + var(--i) * 240ms); }
html.js [data-reveal="draw"].is-in .co::before { transform: none; transition: transform 160ms var(--ease-out) calc(var(--base, 1200ms) + var(--i) * 240ms); }
.anat { --base: 400ms; }

/* phone version */
.dim-m { display: none; margin: 40px 0 0; }
.dim-m__stage { position: relative; }
.dim-m__fig { --h: min(66svh, 560px); --w: calc(var(--h) * 0.33293); position: relative; height: var(--h); }
.dim-m__img { position: absolute; left: 56px; top: 0; height: 100%; width: auto; max-width: none; }
.dim-m__pin { position: absolute; left: calc(56px + var(--w) * var(--x) / 100); right: 28px; top: calc(var(--y) * 1%); height: 1px; background: var(--ink); }
.dim-m__pin::before { content: ""; position: absolute; left: -2.5px; top: -2px; width: 5px; height: 5px; background: var(--ink); }
.dim-m__n { position: absolute; right: -28px; top: -11px; width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--ink); font-family: var(--f-mono); font-size: 10px; line-height: 1; background: var(--paper); }
.dim-m__scale { position: absolute; left: 20px; width: 1px; top: calc(var(--y0) * 1%); bottom: calc((100 - var(--y1)) * 1%); background: var(--ink); }
.dim-m__scale::before, .dim-m__scale::after { content: ""; position: absolute; left: -6px; width: 13px; height: 1px; background: var(--ink); }
.dim-m__scale::before { top: 0; } .dim-m__scale::after { bottom: 0; }
.dim-m__num { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 32px; }
.dim-m__num .t-numeral { line-height: 0.8; }
.dim-m__list { margin: 32px 0 16px; border-top: 1px solid var(--paper-rule); }
.dim-m__list li { display: grid; grid-template-columns: 34px 88px 1fr; align-items: center; min-height: 48px; border-bottom: 1px solid var(--paper-rule); }
.dim-m__list .n { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--ink); font-family: var(--f-mono); font-size: 10px; line-height: 1; }
.dim-m__list .k { font-size: 12px; letter-spacing: 0.04em; color: var(--ink-grey); }
.dim-m__list .ja { font-weight: 500; font-size: 13px; line-height: 1.5; }
.dim-m .dim__note { text-align: left; }

@media (max-width: 1279px) and (min-width: 768px) {
  .dim__fig { width: 100%; }
  .co__label .ja { font-size: 12px; }
}
@media (max-width: 767px) {
  .ov { padding: 64px 0 64px; }
  .dim { display: none; }
  .dim-m { display: block; }
}

/* ======================================================================
   P02-B — COLOR (BENCH)
   ====================================================================== */
.colors { padding: 96px 0 160px; border-top: 1px solid var(--paper-rule); }
.colors > .wrap { position: relative; }
.colors__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.colors__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--g); margin-top: 80px; }
.cl__fig { height: clamp(360px, 58vh, 640px); margin: 0; }
.cl__fig img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.cl:hover .cl__fig img { filter: brightness(1.04); }
.cl__meta { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--paper-rule); }
.cl__name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cl__name .swatch { width: 16px; height: 16px; }
.cl__code { font-family: var(--f-display); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: 0.02em; }
.cl__en { font-family: var(--f-display); font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: 0.12em; }
.cl__sku { margin-top: 10px; font-family: var(--f-mono); font-size: 11px; line-height: 1.5; letter-spacing: 0.08em; color: var(--ink-grey); }
.cl__tag { min-height: 16px; margin-top: 4px; font-family: var(--f-mono); font-weight: 500; font-size: 10px; line-height: 1.6; letter-spacing: 0.1em; color: var(--ink); }
.cl__desc { margin-top: 12px; font-size: 13px; line-height: 1.8; letter-spacing: 0.03em; color: var(--ink-grey); max-width: 22em; }
.colors__note { margin-top: 64px; font-size: 12px; line-height: 1.8; letter-spacing: 0.04em; color: var(--ink-grey); }

@media (max-width: 1279px) and (min-width: 768px) {
  .cl__desc { font-size: 12px; }
  .cl__en { font-size: 12px; }
}
@media (max-width: 767px) {
  .colors { padding: 64px 0 96px; }
  .colors__list {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 40vw; column-gap: 16px;
    margin: 48px calc(-1 * var(--m)) 0; padding: 0 var(--m) 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m);
    scrollbar-width: none;
  }
  .colors__list::-webkit-scrollbar { display: none; }
  .cl { scroll-snap-align: start; }
  .cl__fig { height: 52svh; }
  .cl__meta { margin-top: 24px; }
  .cl__desc { font-size: 11px; letter-spacing: 0; }
  .colors__note { margin-top: 32px; font-size: 11px; }
}

/* ======================================================================
   P03 — DESIGN DETAILS (STAGE, sticky TOC)
   ====================================================================== */
.detail { padding: 128px 0 var(--section); }
.detail__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); }
.toc-col { grid-column: 1 / span 3; position: relative; }
.toc-col::after { content: ""; position: absolute; top: 0; bottom: 0; right: calc(var(--g) / -2); width: 1px; background: var(--gunmetal); }
html.js .toc { position: sticky; top: 64px; }
.toc__cap { margin-top: 0; }
.toc__list { margin-top: 48px; }
.toc__a {
  position: relative; display: flex; align-items: center; gap: 12px; height: 44px; padding-left: 14px;
  font-family: var(--f-jp); font-weight: 500; font-size: 15px; letter-spacing: 0.06em; color: var(--sand);
  transition: color var(--d-micro) linear;
}
.toc__no { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; font-variant-numeric: tabular-nums; }
.toc__a::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--lava); opacity: 0; }
.toc__a:hover, .toc__a[aria-current] { color: var(--resin); }
.toc__a[aria-current]::before { opacity: 1; }
.toc__buy {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 40px; padding-top: 12px; width: calc(2 * var(--col) + var(--g));
  border-top: 1px solid var(--gunmetal); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; color: var(--resin);
}
.toc__buy span:first-child { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--d-short) var(--ease-out); padding-bottom: 2px; }
.toc__buy:hover span:first-child, .toc__buy:focus-visible span:first-child { background-size: 100% 1px; }
.toc__arrow { transition: transform var(--d-micro) var(--ease-out); }
.toc__buy:hover .toc__arrow { transform: translate(2px, -2px); }

.chapters { grid-column: 4 / -1; min-width: 0; }
.ch { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--g); align-items: start; padding-block: 96px 128px; scroll-margin-top: 0; }
.ch:first-of-type { padding-top: 88px; }
.ch:last-child { padding-bottom: 0; }
.ch figure { margin: 0; }
.ch .fig__img { position: relative; overflow: hidden; }
.ch .fig__img img, .ch .fig__img video { width: 100%; height: 100%; object-fit: cover; }
.ch__no { margin-bottom: 20px; }
.ch__title { margin-bottom: 40px; }
.ch__text .t-body { max-width: none; }
.ch__note { color: var(--resin); }
.ch__plinth { display: flex; align-items: center; justify-content: center; padding: 48px; }
.ch__plinth img { width: auto; max-width: 100%; height: auto; }

/* 01 BODY: 9-col 16:9 → text 5 + plinth 4 */
.ch--body .ch__main { grid-column: 1 / -1; }
.ch--body .ch__text { grid-column: 1 / span 5; margin-top: 72px; }
.ch--body .ch__aux { grid-column: 6 / span 4; margin-top: 72px; }
.ch--body .ch__plinth img { max-height: 400px; }

/* 02 PICKUP: text 4 (bottom-aligned) + portrait 5 */
.ch--pickup .ch__text { grid-column: 1 / span 4; align-self: end; padding-bottom: 40px; }
.ch--pickup .ch__main { grid-column: 5 / span 5; }

/* 03 BRIDGE: 1:1 in 6 + text 3 with the paper evidence tile */
.ch--bridge .ch__main { grid-column: 1 / span 6; }
.ch--bridge .ch__text { grid-column: 7 / span 3; padding-top: 8px; }
.ch--bridge .ch__title { margin-bottom: 48px; }
.evid, .ch .evid { margin: 36px 0 0; padding: 16px; background: var(--paper); color: var(--ink); }
.evid img { width: 100%; height: auto; }

/* 04 CONTROL: 21:9 band bleeding right, text below-left */
.ch--control .ch__main { grid-column: 1 / -1; margin-right: calc(-1 * var(--bleed)); }
.ch--control .ch__text { grid-column: 1 / span 5; margin-top: 56px; }

/* 05 NECK: portrait film 4 + text; neck plate 5 offset right */
.ch--neck .ch__main { grid-column: 1 / span 4; }
.ch--neck .ch__text { grid-column: 6 / span 4; align-self: end; padding-bottom: 40px; }
.ch--neck .ch__aux { grid-column: 5 / span 5; margin-top: 96px; }
.ch--neck .ch__plinth { padding: 0; }
.ch--neck .ch__plinth img { width: 100%; max-width: none; }
.ch__video video { object-position: 50% 50%; }

/* 06 HEADSTOCK: title + side text, then two portraits (5 + 4) bottom-aligned */
.ch--head .ch__text { grid-column: 1 / span 4; grid-row: 1; }
.ch--head .ch__text .ch__title { margin-bottom: 0; }
.ch--head .ch__text--side { grid-column: 6 / span 4; grid-row: 1; align-self: end; }
.ch--head .ch__main { grid-column: 1 / span 5; grid-row: 2; margin-top: 64px; align-self: end; }
.ch--head .ch__aux { grid-column: 6 / span 4; grid-row: 2; margin-top: 64px; align-self: end; }

.ch--head .fig__img {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%);
  mask-composite: intersect;
}

/* tablet + phone: TOC becomes a 40px horizontal bar; chapters are one column */
@media (max-width: 1279px) {
  .detail { padding-top: 96px; }
  .detail__grid { grid-template-columns: minmax(0, 1fr); }
  .toc-col { grid-column: 1; align-self: start; margin-inline: calc(-1 * var(--m)); z-index: 20; background: var(--stage); box-shadow: inset 0 -1px 0 var(--gunmetal); }
  html.js .toc-col { position: sticky; top: 0; }
  .toc-col::after { display: none; }
  html.js .toc { position: static; }
  .toc { display: flex; align-items: center; }
  .toc__cap { display: none; }
  .toc__list { display: flex; gap: 24px; margin: 0; padding: 0 var(--m); height: 40px; overflow-x: auto; scrollbar-width: none; flex: 1; }
  .toc__list::-webkit-scrollbar { display: none; }
  .toc__list li { flex: none; }
  .toc__a { height: 40px; padding-left: 10px; font-size: 13px; gap: 6px; font-weight: 600; }
  .toc__no { display: none; }
  .toc__buy { width: auto; margin: 0; padding: 0 var(--m) 0 16px; border-top: 0; min-height: 40px; font-size: 13px; flex: none; box-shadow: inset 1px 0 0 var(--gunmetal); }
  .chapters { grid-column: 1; }
  .ch { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); padding-block: 64px 64px; }
  .ch:first-of-type { padding-top: 48px; }
  .ch .ch__main, .ch .ch__text, .ch .ch__aux, .ch--head .ch__text--side { grid-column: 1 / -1 !important; grid-row: auto !important; margin-top: 0; align-self: start; padding: 0; }
  .ch .ch__main { order: 1; }
  .ch .ch__text { order: 2; margin-top: 40px; }
  .ch .ch__aux { order: 3; margin-top: 40px; width: 50%; }
  .ch--head .ch__text--side { order: 3; margin-top: 24px; }
  .ch--head .ch__aux { order: 4; }
  .ch__title { margin-bottom: 24px; }
  .ch--control .ch__main { margin-inline: calc(-1 * var(--m)); }
  .ch--control .fig__img { aspect-ratio: 4 / 3; }
  .ch--control .fig__img img { object-position: 58% 50%; }
  .ch__plinth { padding: 24px; }
  .ch--neck .ch__aux { width: 72%; }
  .ch--pickup .ch__main, .ch--neck .ch__main { width: 100%; }
}
@media (max-width: 1279px) and (min-width: 768px) {
  .ch--pickup .ch__main, .ch--neck .ch__main { width: 62%; }
  .ch--bridge .ch__main { width: 78%; }
  .ch--head .ch__main { width: 70%; }
  .ch--head .ch__aux { width: 52%; }
}
@media (max-width: 767px) {
  .detail { padding-top: 64px; }
  .toc__buy { display: none; }
  .ch .ch__aux { width: 64%; }
  .ch--head .ch__aux { width: 72%; }
  .evid { max-width: 280px; }
  .ch--bridge .ch__title { margin-bottom: 24px; }
  .ch .nobr { white-space: normal; }
}

/* ======================================================================
   P04 — CASE (STAGE → BENCH)
   ====================================================================== */
.case__open { padding: 64px 0 96px; }
.case__intro { grid-column: 1 / span 4; align-self: center; position: relative; z-index: 1; }
.case__kicker { margin: 0 0 48px; }
.case__h { display: flex; flex-direction: column; gap: 24px; font-weight: 400; }
.case__en { display: block; }
.case__lead { margin-top: 48px; color: var(--resin); }
.case__openfig { grid-column: 5 / -1; margin: 0 calc(-1 * var(--bleed)) 0 0; }
.case__openimg {
  position: relative; overflow: hidden; aspect-ratio: 16 / 9;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%); mask-image: linear-gradient(to right, transparent 0, #000 14%);
}
.case__openimg img { width: 100%; height: 100%; object-fit: cover; }

.case__tex { padding: 0 0 var(--section); }
.case__texfig { position: relative; margin: 0; }
.case__teximg { position: relative; overflow: hidden; aspect-ratio: 21 / 9;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); }
.case__teximg img { width: 100%; height: 100%; object-fit: cover; }
.case__texline { position: absolute; left: max(var(--m), (100vw - var(--maxw)) / 2 + var(--m)); top: 14%; max-width: calc(3 * var(--col) + 2 * var(--g)); color: var(--resin); }

.case__bench { padding: var(--section) 0 var(--section); }
.case__benchlead { margin-top: 64px; max-width: 30em; }
.anat { margin: 0; }
.anat__legend { display: none; margin-top: 16px; columns: 2; column-gap: 16px; font-size: 12px; line-height: 1.6; }
.anat__legend li { display: flex; align-items: center; gap: 8px; min-height: 32px; break-inside: avoid; }
.anat__fig { position: relative; background: var(--paper); }
.anat__img { width: 100%; height: auto; mix-blend-mode: multiply; }
.anat__pins { position: absolute; inset: 0; }
.anat .co { --tier: 88px; --lh: 48px; }
.anat .co__label { gap: 6px; }
.co__n { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--ink); background: var(--paper); font-family: var(--f-mono); font-size: 10px; line-height: 1; letter-spacing: 0; }
.co--up .co__label { flex-direction: column-reverse; }
.co--down .co__label { flex-direction: column; }
.anat--ext { margin-top: 64px; }
.anat--ext .anat__fig { margin: 104px auto 104px; width: calc(100% - 2 * (var(--col) + var(--g))); }

.case__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); margin-top: 128px; }
.cdim { grid-column: 1 / span 8; margin: 0; }
.cdim__svg { width: 100%; height: auto; overflow: visible; }
.cdim__body { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cdim__d line { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cdim__num text { font-family: var(--f-display); font-weight: 700; font-size: 44px; fill: var(--ink); }
.cdim__unit text, .cdim__lbl text { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.1em; fill: var(--ink-grey); }
.cdim__lbl text { font-family: var(--f-jp); letter-spacing: 0.04em; }
.cdim .dim__note { text-align: left; margin-top: 24px; }
.cdim__text { grid-column: 10 / span 3; align-self: center; }
.cdim__text .t-body { margin-top: 24px; }
.cdim__big { display: flex; align-items: baseline; gap: 6px; margin: 0; }
.cdim__n { font-family: var(--f-display); font-weight: 700; font-size: 64px; line-height: 0.9; }
.cdim__unit-t { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ink-grey); }
html.js .cdim .cdim__d { transform: scaleX(0); transform-box: fill-box; transform-origin: 0 50%; }
html.js .cdim .cdim__d--w, html.js .cdim .cdim__d--t { transform: scaleY(0); transform-origin: 50% 0; }
html.js .cdim .cdim__num { opacity: 0; }
html.js .cdim.is-in .cdim__d { transform: none; transition: transform 480ms var(--ease-out) 200ms; }
html.js .cdim.is-in .cdim__num { opacity: 1; transition: opacity var(--d-short) linear 680ms; }

.case__row--int { align-items: start; }
/* interior + hardware details: four square tiles, each with a square badge (06–09) */
.cdet { grid-column: 1 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--g); }
.cdet__item { margin: 0; }
.cdet__img { aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper); }
.cdet__img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.cdet__cap { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.cdet__cap .ja { font-weight: 500; font-size: 13px; line-height: 1.5; letter-spacing: 0.03em; }
.case__side { grid-column: 9 / span 4; }
.cspec { border-top: 1px solid var(--paper-rule); }
.cspec__row { display: grid; grid-template-columns: minmax(120px, 0.34fr) 1fr; align-items: baseline; column-gap: 16px; padding-block: 12px; border-bottom: 1px solid var(--paper-rule); }
.cspec dt { font-size: 12px; letter-spacing: 0.04em; color: var(--ink-grey); }
.cspec dd { font-weight: 500; font-size: 16px; line-height: 1.6; letter-spacing: 0.02em; }
.cspec dd small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-grey); letter-spacing: 0.04em; }
.case__note { margin-top: 20px; font-size: 12px; line-height: 1.8; letter-spacing: 0.04em; color: var(--ink-grey); }
.case__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 32px; }
.case__buy { width: 100%; max-width: 280px; }

@media (max-width: 1279px) and (min-width: 768px) {
  .case__intro { grid-column: 1 / span 4; }
  .case__openfig { grid-column: 5 / -1; }   /* intro takes 1–4: the photo must start at 5 or it drops to a new row */
  .anat--ext .anat__fig { width: 100%; }
  .anat .co__label .ja { font-size: 11px; }
  .cdim { grid-column: 1 / -1; }
  .cdim__text { grid-column: 1 / span 5; margin-top: 32px; }
  .cdet { grid-column: 1 / -1; }
  .case__side { grid-column: 1 / span 5; margin-top: 64px; }
}
@media (max-width: 767px) {
  .case__open { padding: 96px 0 64px; }
  .case__openfig { grid-column: 1 / -1; order: -1; margin: 0 calc(-1 * var(--m)); }
  .case__openimg { aspect-ratio: 3 / 4; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to bottom, transparent 0, #000 8%, #000 92%, transparent); }
  .case__intro { grid-column: 1 / -1; margin-top: 40px; }
  .case__kicker { margin-bottom: 24px; }
  .case__h { gap: 16px; }
  .case__lead { margin-top: 24px; }
  .case__tex { padding-bottom: 96px; }
  .case__teximg { aspect-ratio: 4 / 3; }
  .case__teximg img { object-position: 62% 50%; }
  .case__texline { position: static; max-width: none; margin: 24px var(--m) 0; }
  .case__bench { padding: 96px 0; }
  .case__benchlead { margin-top: 32px; }
  .anat .co__label .ja { display: none; }
  .anat .co { --tier: 40px; --lh: 24px; }
  .anat--ext .anat__fig { width: 100%; margin: 56px 0 56px; }
  .anat__legend { display: block; }
  .case__bench .sec-head .t-index { display: none; }
  .cdim__num text { font-size: 80px; }
  .cdim__num text:nth-child(3) { transform: translateY(44px); }
  .cdim__unit text { display: none; }
  .cdim__lbl text { font-size: 40px; }
  .case__row { grid-template-columns: minmax(0, 1fr); margin-top: 72px; }
  .cdim, .cdim__text, .cdet, .case__side { grid-column: 1; }
  .cdet { gap: 24px 16px; }
  .cdet__cap { gap: 8px; margin-top: 10px; }
  .cdet__cap .ja { font-size: 12px; }
  .cdim__text { margin-top: 24px; }
  .case__side { margin-top: 40px; }
  .cspec__row { grid-template-columns: 1fr; row-gap: 4px; }
  .case__buy { max-width: none; }
}

/* ======================================================================
   P05 — SPECIFICATION (BENCH)
   ====================================================================== */
.specsec { padding: 0 0 var(--s16); }
.specsec > .wrap { border-top: 1px solid var(--paper-rule); padding-top: 128px; }
.specsec__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.specsec__sub { display: flex; justify-content: space-between; gap: 24px; margin-top: 48px; padding-bottom: 20px; border-bottom: 2px solid var(--ink); }
.specsec__grid { margin-top: 48px; align-items: start; }
.specsec .spec-row__label .ja { font-weight: 500; font-size: 13px; color: var(--fg); }
.specsec__figcol { grid-column: 1 / span 5; align-self: stretch; }
.specsec__tablecol { grid-column: 6 / span 7; }
.spfig { --h: min(76vh, 700px); --w: calc(var(--h) * 0.42237); --off: calc(var(--col) * 0.5); position: relative; margin: 0; }
html.js .spfig { position: sticky; top: 104px; }
.spfig__box { height: var(--h); width: var(--w); margin-left: var(--off); }
.spfig__img { width: 100%; height: 100%; object-fit: contain; }
.spfig__pins { position: absolute; left: 0; right: 0; top: 0; height: var(--h); pointer-events: none; }
.sp-pin { position: absolute; left: calc(var(--off) + var(--w) * var(--x) / 100); right: 12px; top: calc(var(--h) * var(--y) / 100); height: 1px; background: var(--ink); transition: background-color var(--d-micro) linear; }
.sp-pin::before { content: ""; position: absolute; left: -2.5px; top: -2px; width: 5px; height: 5px; background: inherit; }
.sp-pin span { position: absolute; right: -12px; top: -12px; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--ink); background: var(--paper); font-family: var(--f-mono); font-size: 10px; line-height: 1; transition: color var(--d-micro) linear, border-color var(--d-micro) linear; }
.sp-pin.is-hot { background: var(--deep-lava); }
.sp-pin.is-hot span { border-color: var(--deep-lava); color: var(--deep-lava); }
.specsec .spec-row { padding-block: 10px; }
.specsec .spec-row[data-row] { cursor: default; }
.specsec__caselink { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.specsec__notes { margin-top: 24px; font-size: 12px; line-height: 2; letter-spacing: 0.04em; color: var(--ink-grey); }
html.js [data-reveal="rows"] > * { opacity: 0; }
html.js [data-reveal="rows"].is-in > * { opacity: 1; transition: opacity var(--d-short) linear calc(var(--r, 0) * 40ms); }
.specsec__strip { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-top: 96px; }
.tblock { display: grid; grid-template-columns: repeat(3, 200px); border: 1px solid var(--ink); }
.tblock > div { padding: 12px 14px; }
.tblock > div + div { border-left: 1px solid var(--ink); }
.tblock dt { font-size: 10px; letter-spacing: 0.06em; color: var(--ink-grey); line-height: 1.4; }
.tblock dd { margin-top: 4px; font-family: var(--f-display); font-weight: 600; font-size: 17px; letter-spacing: 0.08em; line-height: 1.2; }

@media (max-width: 1279px) and (min-width: 768px) {
  .specsec__figcol { grid-column: 1 / span 3; }
  .specsec__tablecol { grid-column: 4 / -1; }
  .spfig { --off: 0px; }
  .tblock { grid-template-columns: repeat(3, 150px); }
}
@media (max-width: 767px) {
  .specsec > .wrap { padding-top: 96px; }
  .specsec__head .t-h2 { font-size: 44px; }
  .specsec__title .line > span { white-space: nowrap; }
  .specsec__sub { margin-top: 24px; }
  .specsec__sub .t-index:last-child { display: none; }
  .specsec__figcol, .specsec__tablecol { grid-column: 1 / -1; }
  .spfig { --h: 60svh; --off: 16px; }
  html.js .spfig { position: relative; top: auto; }
  .specsec__tablecol { margin-top: 40px; }
  .specsec__strip { flex-direction: column; align-items: stretch; margin-top: 64px; }
  .tblock { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tblock dd { font-size: 14px; }
}

/* ======================================================================
   P06 — GALLERY strip (STAGE)
   ====================================================================== */
.gal { padding: var(--section) 0; }
.gal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.gal__title .caption { margin: 0 0 32px; }
.gal__ctrl { display: flex; align-items: center; gap: 32px; }
.gal__btns { display: flex; gap: 8px; }
.gal__btn { width: 48px; height: 48px; display: grid; place-items: center; font-family: var(--f-jp); font-size: 16px; color: var(--resin); box-shadow: inset 0 0 0 1px var(--gunmetal); transition: box-shadow var(--d-micro) linear, opacity var(--d-micro) linear; }
.gal__btn:hover { box-shadow: inset 0 0 0 1px var(--resin); }
.gal__btn:disabled { opacity: 0.35; cursor: default; box-shadow: inset 0 0 0 1px var(--gunmetal); }
.strip {
  margin-top: 56px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none;
  padding-inline: max(var(--m), (100vw - var(--maxw)) / 2 + var(--m)); scroll-padding-inline: max(var(--m), (100vw - var(--maxw)) / 2 + var(--m));
  overscroll-behavior-x: contain;
}
.strip::-webkit-scrollbar { display: none; }
.strip:focus-visible { outline-offset: -2px; }
.strip.is-drag { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.strip.is-drag img { pointer-events: none; }
.strip__list { display: flex; gap: var(--g); width: max-content; }
.strip__item { scroll-snap-align: start; transition: opacity 240ms var(--ease-out); }
.strip__item figure { margin: 0; }
.strip__a { display: block; color: inherit; }
.strip__a:focus-visible { outline: 2px solid var(--resin); outline-offset: 4px; }
.strip__img { height: 64vh; min-height: 420px; aspect-ratio: var(--ar); overflow: hidden; }
.strip__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.strip__item--cut .strip__img img { object-fit: contain; }
@media (hover: hover) {
  .strip__list:hover .strip__item:not(:hover) { opacity: 0.45; }
  .strip__item:hover .strip__img img { transform: scale(1.03); }
}
@media (max-width: 767px) {
  .gal__head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .gal__ctrl { width: 100%; justify-content: space-between; }
  .strip { margin-top: 32px; scroll-snap-type: x mandatory; }
  .strip__list { gap: 16px; }
  .strip__img { height: auto; min-height: 0; width: 80vw; }
  .strip__item--cut .strip__img { width: 40vw; }
}

/* ======================================================================
   P07 — BUY (BENCH)
   ====================================================================== */
.buy { padding: var(--section) 0; }
.buy__grid { align-items: center; }
.buy__fig { grid-column: 1 / span 5; margin: 0; }
.buy__stack { position: relative; aspect-ratio: 1235 / 1443; max-height: 72vh; margin-inline: auto; }
.buy__img { position: absolute; inset: 0; opacity: 0; transition: opacity var(--d-short) var(--ease-out); }
.buy__img.is-on { opacity: 1; }
.buy__img img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.buy__panel { grid-column: 7 / span 6; }
.buy__mark { font-weight: 400; }
.buy__logo { --px: 5px; display: inline-block; width: calc(88 * var(--px)); color: var(--ink); }
.buy__logo > svg { width: 100%; height: auto; }
.buy__sub { display: block; width: calc(33 * var(--px) / 2); margin-top: calc(var(--px) * 2); }
.buy__sub svg { width: 100%; height: auto; }
.picker { margin: 56px 0 0; padding: 0; border: 0; min-width: 0; }
.picker__legend { display: flex; align-items: baseline; gap: 12px; padding: 0; }
.picker__legend .ja { font-weight: 500; font-size: 13px; letter-spacing: 0.04em; }
.picker__opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.picker__opt { position: relative; display: block; cursor: pointer; }
.picker__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.picker__box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 64px; height: 72px; box-shadow: inset 0 0 0 1px var(--paper-rule); transition: box-shadow var(--d-micro) linear; }
.picker__sw { width: 24px; height: 24px; background: var(--c); box-shadow: inset 0 0 0 1px rgba(95, 90, 88, 0.35); }
.picker__code { font-family: var(--f-mono); font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: 0.1em; color: var(--ink-grey); }
.picker__opt:hover .picker__box { box-shadow: inset 0 0 0 1px var(--ink-grey); }
.picker__opt input:checked + .picker__box { box-shadow: inset 0 0 0 1px var(--ink); }
.picker__opt input:checked + .picker__box .picker__code { color: var(--ink); }
.picker__opt input:focus-visible + .picker__box { outline: 2px solid var(--ink); outline-offset: 2px; }
.picker__info { margin-top: 28px; min-height: 92px; }
.picker__name { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; font-family: var(--f-display); font-weight: 600; font-size: 28px; line-height: 1.1; letter-spacing: 0.06em; }
.picker__tag { font-family: var(--f-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.12em; }
.picker__tag[hidden] { display: none; }
.picker__desc { margin-top: 10px; font-size: 13px; line-height: 1.8; letter-spacing: 0.03em; color: var(--ink-grey); }
.buy__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 32px; padding-block: 24px; border-top: 1px solid var(--paper-rule); border-bottom: 1px solid var(--paper-rule); }
.buy__model { display: flex; align-items: baseline; gap: 16px; }
.buy__name { font-family: var(--f-display); font-weight: 700; font-size: 28px; letter-spacing: 0.04em; line-height: 1; }
.buy__sku { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-grey); }
.buy__btn { min-width: 280px; }
.buy__notes { margin-top: 24px; display: grid; gap: 6px; font-size: 12px; line-height: 1.8; letter-spacing: 0.04em; color: var(--ink-grey); }
.buy__notes a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1279px) and (min-width: 768px) {
  .buy__fig { grid-column: 1 / span 3; }
  .buy__panel { grid-column: 4 / -1; }
  .buy__row { flex-direction: column; align-items: stretch; }
  .buy__btn { width: 100%; }
}
@media (max-width: 767px) {
  .buy__fig { grid-column: 1 / -1; }
  .buy__stack { width: 64%; }
  .buy__panel { grid-column: 1 / -1; margin-top: 48px; }
  .buy__logo { --px: 3.5px; }
  .picker__opts { gap: 6px; }
  .picker__box { width: calc((100vw - 2 * var(--m) - 24px) / 5); height: 64px; }
  .picker__name { font-size: 24px; }
  .buy__row { flex-direction: column; align-items: stretch; gap: 16px; }
  .buy__btn { width: 100%; min-width: 0; }
  .buy__notes { font-size: 11px; }
}


/* IN THE BOX (flat-lay ≤ 6 columns, white seamless → multiply on paper) */
.box { margin-top: var(--s16); padding-top: 96px; position: relative; align-items: start; }
.box::before { content: ""; position: absolute; top: 0; left: var(--m); right: var(--m); height: 1px; background: var(--paper-rule); }
.box__fig { grid-column: 1 / span 6; margin: 0; }
.box__stack { position: relative; aspect-ratio: 1 / 1; background: var(--paper); -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 5%, #000 95%, transparent); mask-composite: intersect; }
.box__img { position: absolute; inset: 0; opacity: 0; transition: opacity var(--d-short) var(--ease-out); }
.box__img.is-on { opacity: 1; }
.box__img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.box__text { grid-column: 8 / span 5; align-self: center; }
.box__h { display: flex; align-items: baseline; gap: 16px; margin-top: 24px; font-weight: 400; }
.box__ja { font-weight: 700; font-size: 22px; letter-spacing: 0.06em; font-feature-settings: "palt"; }
.box__list { margin-top: 32px; border-top: 1px solid var(--paper-rule); }
.box__list li { display: flex; align-items: baseline; gap: 24px; min-height: 48px; padding-block: 12px; border-bottom: 1px solid var(--paper-rule); font-weight: 500; font-size: 15px; letter-spacing: 0.03em; }
.box__list .n { width: 24px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-grey); }
.box__note { margin-top: 20px; font-size: 12px; line-height: 1.8; letter-spacing: 0.04em; color: var(--ink-grey); }
@media (max-width: 1279px) and (min-width: 768px) {
  .box__fig { grid-column: 1 / span 4; }
  .box__text { grid-column: 5 / -1; }
}
@media (max-width: 767px) {
  .box { margin-top: 96px; padding-top: 64px; }
  .box__fig, .box__text { grid-column: 1 / -1; }
  .box__text { margin-top: 32px; }
}

/* ======================================================================
   Mobile sticky buy bar (56px) — after P01, hidden in P07
   ====================================================================== */
.buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: flex; align-items: center; justify-content: space-between;
  height: calc(56px + env(safe-area-inset-bottom)); padding: 0 0 env(safe-area-inset-bottom) var(--m);
  background: var(--stage); color: var(--resin); box-shadow: inset 0 1px 0 var(--gunmetal);
  transform: translateY(100%); transition: transform var(--d-short) var(--ease-out); visibility: hidden;
}
.buybar[hidden] { display: none; }
.buybar.is-on { transform: none; visibility: visible; }
.buybar__name { font-family: var(--f-display); font-weight: 600; font-size: 16px; letter-spacing: 0.12em; }
.buybar__btn { height: 56px; min-width: 136px; justify-content: center; gap: 12px; }
@media (min-width: 768px) { .buybar { display: none; } }

/* ======================================================================
   Reduced motion
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.js .dim .dim__line, html.js [data-reveal="draw"] .co::before, html.js .cdim .cdim__d { transform: none !important; }
  html.js .dim *, html.js [data-reveal="draw"] *, html.js [data-reveal="draw"] .co { transition-delay: 0s !important; transition-duration: 200ms !important; }
  .strip__img img, .buy__img, .box__img, .buybar { transition-duration: 1ms !important; }
  .strip__item:hover .strip__img img { transform: none; }
}

/* P06 — one official YouTube video under the strip (click-to-load facade from base.css) */
.gal__yt { margin-top: 96px; align-items: end; }
.gal__yt-text { grid-column: 1 / span 4; display: grid; gap: 16px; align-content: end; }
.gal__yt-text .caption { margin: 0; }
.gal__yt-v { grid-column: 6 / span 7; }
@media (max-width: 1279px) { .gal__yt-text { grid-column: 1 / span 3; } .gal__yt-v { grid-column: 4 / span 5; } }
@media (max-width: 767px) { .gal__yt { margin-top: 64px; } .gal__yt-text, .gal__yt-v { grid-column: 1 / -1; } .gal__yt-text { padding-bottom: 0; margin-bottom: 24px; } }