/* ==========================================================================
   STAGE-T — home.css  (HOME only; body[data-page="home"])
   H01 HERO (STAGE-T, five colours) · S02 STATEMENT · S03 DETAIL (Story Scroll) · S05 CASE
   LU LINEUP (all models) · S07B TIPSY (M40T) · S08 FINAL CTA
   Uses base.css tokens: --m --g --col --wrap --maxw --section, type classes, .btn/.link/.caption.
   ========================================================================== */

[data-page="home"] {
  /* distance from the wrap's content edge to the viewport edge (for one-side bleed) */
  --bleed: calc((100vw - var(--wrap)) / 2 + var(--m));
  --c: calc(var(--col) + var(--g));                 /* one column + gutter */
}
.sp { display: none; }
@media (max-width: 1023px) { .sp { display: inline; } }
@media (max-width: 767px) { .pc { display: none; } }

/* feathering helpers: dark-studio photos dissolve into Stage Black (the only gradients allowed) */
.feather {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}

/* ===== HOME H01 — HERO: STAGE-T first. Five colours stand side by side in front of the pixel mark;
   each guitar opens the STAGE-T page in its colour (the colour selector lives there, as its first module).
   --GH = guitar height; the row is centred, the mark sits behind the necks. */
.hl {
  --GH: min(calc(100svh - var(--header-h) - 190px), calc((100vw - 2 * var(--m)) / 5 / 0.36));
  --MW: min(calc(100vw - 2 * var(--m)), 1320px);
  position: relative; height: 100svh; min-height: 640px; overflow: hidden; background: var(--stage);
}
.hl__spot { position: absolute; left: 50%; bottom: 60px; width: min(110vw, 1600px); height: 70svh; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(236, 232, 227, 0.07), rgba(236, 232, 227, 0.02) 60%, transparent); }
.hl__mark { position: absolute; left: calc(50% - var(--MW) / 2); top: calc(var(--header-h) + max(24px, 6svh)); width: var(--MW); color: var(--resin); z-index: 1; }   /* no transform: the reveal resets it */
.hl__mark svg { display: block; width: 100%; height: auto; shape-rendering: crispEdges; }
.hl__row { position: absolute; left: 50%; bottom: 150px; z-index: 2; display: flex; align-items: flex-end; margin: 0; padding: 0; list-style: none; transform: translateX(-50%); }
.hl__g { width: calc(var(--GH) * 0.36); display: flex; justify-content: center; }
.hl__g a { position: relative; display: block; }
.hl__g img { height: var(--GH); width: auto; max-width: none; transition: transform var(--d-short) var(--ease-out), opacity var(--d-short) var(--ease-out); }
.hl__row:hover .hl__g:not(:hover) img { opacity: 0.55; }
.hl__g a:hover img, .hl__g a:focus-visible img { transform: translateY(-10px); }
.hl__g a:focus-visible { outline: 2px solid var(--resin); outline-offset: 6px; }
.hl__tag { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); display: flex; gap: 8px; align-items: baseline; white-space: nowrap; opacity: 0; transition: opacity var(--d-micro) linear; }
.hl__tag .sku { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--sand); }
.hl__tag .nm { font-family: var(--f-display); font-weight: 600; font-size: 14px; letter-spacing: 0.1em; }
.hl__g a:hover .hl__tag, .hl__g a:focus-visible .hl__tag { opacity: 1; }
.hl__foot { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--m) 36px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.hl__text { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 28px; }
.hl__sub { width: 66px; color: var(--resin); grid-row: 1 / span 2; align-self: end; padding-bottom: 6px; }
.hl__sub svg { display: block; width: 100%; height: auto; }
.hl__lead { margin: 0; font-size: 20px; }
.hl__lead .sp { display: none; }
.hl__meta { margin: 4px 0 0; font-size: 13px; letter-spacing: 0.06em; color: var(--sand); }
.hl__cta { display: flex; gap: 16px; }
.hl__cta .btn { min-width: 220px; }

/* load sequence: mark 8-Step → guitars rise one by one → words */
html.js .hl__g { opacity: 0; transform: translateY(24px); }
html.js .hl.is-lit .hl__g { opacity: 1; transform: none; transition: opacity var(--d-mid) var(--ease-out), transform var(--d-mid) var(--ease-out); transition-delay: calc(500ms + var(--i) * 90ms); }
html.js .hl [data-hl] { opacity: 0; transform: translateY(12px); }
html.js .hl.is-lit [data-hl] { opacity: 1; transform: none; transition: opacity var(--d-mid) var(--ease-out), transform var(--d-mid) var(--ease-out); transition-delay: calc(1000ms + var(--i) * 100ms); }
@media (max-width: 1279px) {
  .hl__foot { flex-direction: column; align-items: flex-start; gap: 20px; }
  .hl__row { bottom: 190px; }
  .hl { --GH: min(calc(100svh - var(--header-h) - 250px), calc((100vw - 2 * var(--m)) / 5 / 0.36)); }
}
/* phone: the mark on top, the five overlapping in a row, words and buttons below */
@media (max-width: 767px) {
  .hl { --GH: min(46svh, calc((100vw - 2 * var(--m)) * 1.05)); height: auto; min-height: 100svh; display: flex; flex-direction: column; padding: calc(var(--header-h) + 20px) 0 32px; }
  .hl__spot { display: none; }
  .hl__mark { position: relative; left: auto; top: auto; width: auto; margin: 0 var(--m); }
  .hl__row { position: relative; left: auto; bottom: auto; transform: none; justify-content: center; margin: 20px 0 0; }
  .hl__g { width: calc((100vw - 2 * var(--m)) / 5); }
  .hl__g img { height: var(--GH); }
  .hl__g:nth-child(1), .hl__g:nth-child(5) { z-index: 1; } .hl__g:nth-child(2), .hl__g:nth-child(4) { z-index: 2; } .hl__g:nth-child(3) { z-index: 3; }
  .hl__tag { display: none; }
  .hl__row:hover .hl__g:not(:hover) img { opacity: 1; }
  .hl__foot { position: relative; width: 100%; margin: 0; padding: 24px var(--m) 0; gap: 20px; }
  .hl__text { grid-template-columns: 1fr; row-gap: 12px; }
  .hl__sub { grid-row: auto; width: 56px; padding: 0; }
  .hl__lead { font-size: 18px; }
  .hl__lead .sp { display: inline; }
  .hl__cta { flex-direction: column; align-self: stretch; gap: 12px; }
  .hl__cta .btn { width: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .hl__g, html.js .hl [data-hl] { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   S02 STATEMENT「OUTLINE」
   ========================================================================== */
.s02 { position: relative; padding: 56px 0 var(--section); overflow: clip; }
.s02__grid { align-items: start; }
.s02__no { grid-column: 1 / span 6; grid-row: 1; margin: 0; }
.s02__word { grid-column: 1 / span 8; grid-row: 2; margin-top: 64px; position: relative; z-index: 2; white-space: nowrap; font-size: min(18.4vw, 272px); }
.s02__title { grid-column: 1 / span 5; grid-row: 3; margin-top: 128px; position: relative; z-index: 2; }
.s02__body { grid-column: 1 / span 5; grid-row: 4; margin-top: 48px; position: relative; z-index: 2; }
.s02__big { grid-column: 6 / -1; grid-row: 2 / span 4; margin-right: calc(-1 * var(--bleed)); margin-top: 72px; }
.s02__big-img { aspect-ratio: 3881 / 5100;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 14%), linear-gradient(to bottom, transparent, #000 9%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 14%), linear-gradient(to bottom, transparent, #000 9%, #000 90%, transparent);
  mask-composite: intersect; }
.s02__par { position: absolute; left: 0; right: 0; top: -2.5%; bottom: -2.5%; }
.s02__par img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; }
.s02__small { grid-column: 2 / span 3; grid-row: 5; margin-top: 200px; }
.s02__small-img { aspect-ratio: 4 / 5; }
.s02__small-img, .s04__img--b5 .fig__img, .s04__video video { -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect; }
.s02__small-img img { object-position: 50% 30%; }
.s02__note { font-family: var(--f-jp); letter-spacing: 0.04em; text-transform: none; font-size: 12px; white-space: nowrap; }

@media (max-width: 1279px) {
  .s02__word { grid-column: 1 / -1; }
  .s02__title, .s02__body { grid-column: 1 / span 4; }
  .s02__body br.pc { display: none; }
  .s02__big { grid-column: 5 / -1; }
  .s02__small { grid-column: 1 / span 3; }
}
@media (max-width: 767px) {
  .s02 { padding-top: 40px; }
  .s02__grid > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .s02__word { margin-top: 40px; }
  .s02__title { margin-top: 24px; }
  .s02__body { margin-top: 24px; }
  .s02__big { margin: 48px calc(-1 * var(--m)) 0; }
  .s02__big-img { aspect-ratio: 4 / 5; }
  .s02__small { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--g); align-items: end; }
  .s02__small figcaption { display: block; white-space: normal; margin: 0 0 8px; }
  .s02__small figcaption::before { display: block; margin-bottom: 12px; }
}

/* ==========================================================================
   S03 DETAIL — Story Scroll (BENCH)
   Static stack by default (no JS / reduced motion); .is-live = sticky stage + one zooming image.
   ========================================================================== */
.s03 { position: relative; padding: var(--section) 0; }
.s03__stage { position: relative; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--m); }
.s03__no { margin: 0 0 64px; }
.s03__cam, .s03__progress { display: none; }
.s03__stop { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--g); align-items: center; padding-block: 48px; border-top: 1px solid var(--paper-rule); }
.s03__stop > :not(.s03__still) { grid-column: 1 / span 4; }
.s03__still { grid-column: 6 / span 5; grid-row: 1 / span 6; }
.s03__still img { width: 100%; height: auto; }
.s03__still--full img { width: auto; height: min(80vh, 760px); margin-inline: auto; }
.s03__idx { margin-bottom: 16px; }
.s03__title { margin-bottom: 32px; }
.s03__jp { font-weight: 500; font-size: 18px; line-height: 1.7; letter-spacing: 0.04em; }
.s03__cap { margin-top: 24px; font-family: "IBM Plex Mono", var(--f-jp); font-size: 12px; text-transform: none; letter-spacing: 0.06em; }
.s03__next { margin-top: 32px; justify-self: start; }
@media (max-width: 767px) {
  .s03__stop > * { grid-column: 1 / -1 !important; }
  .s03__still { grid-row: auto; margin-top: 24px; }
  .s03__jp { font-size: 15px; }
}

/* ---- live (JS, motion allowed) ---- */
.s03.is-live { padding: 0; }
.s03.is-live .s03__track { position: relative; }
.s03.is-live .s03__stage { position: sticky; top: 0; height: 100vh; height: 100svh; max-width: none; padding: 0; overflow: hidden; }
.s03.is-live .s03__no { position: absolute; left: var(--bleed); top: 56px; margin: 0; z-index: 3; }
.s03.is-live .s03__cam {
  display: block; position: absolute; top: 0; bottom: 0; z-index: 1;
  left: calc(var(--bleed) + 4 * var(--c)); width: calc(7 * var(--col) + 6 * var(--g));
  --focus-top: 0px; --focus-bottom: 0px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 72px, #000 calc(100% - 72px), transparent);
}
.s03__master { position: absolute; left: 0; top: 0; width: 1286px; height: 3887px; max-width: none; transform-origin: 0 0; }
.s03.is-live .s03__still, .s03.is-live .s03__next { display: none; }
.s03.is-live .s03__stops { position: absolute; left: var(--bleed); top: 0; bottom: 0; width: calc(4 * var(--col) + 3 * var(--g)); z-index: 2; }
.s03.is-live .s03__stop {
  display: block; position: absolute; left: 0; right: 0; top: 50%; padding: 0; border: 0;
  opacity: 0; visibility: hidden; transform: translateY(calc(-50% + 16px));
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s linear 240ms;
}
.s03.is-live .s03__stop.is-past { transform: translateY(calc(-50% - 16px)); }
.s03.is-live .s03__stop.is-active {
  opacity: 1; visibility: visible; transform: translateY(-50%);
  transition: opacity 320ms var(--ease-out) 240ms, transform 320ms var(--ease-out) 240ms, visibility 0s;
}
.s03.is-live .s03__title { margin-bottom: 40px; }
.s03.is-live .s03__progress {
  display: block; position: absolute; right: var(--bleed); top: 50%; transform: translateY(-50%); z-index: 3;
  width: calc(var(--col) + 12px);
}
.s03__list li + li { margin-top: 8px; }
.s03__list a { display: flex; align-items: center; gap: 12px; min-height: 28px; font-family: "IBM Plex Mono", var(--f-jp); font-weight: 400; font-size: 12px; letter-spacing: 0.06em; color: var(--ink-grey); white-space: nowrap; transition: color var(--d-micro) linear; }
.s03__list a:hover, .s03__list a[aria-current="step"] { color: var(--ink); }
.s03__n { margin-right: -4px; }
.s03__pip { width: 8px; height: 8px; box-shadow: inset 0 0 0 1px currentColor; flex: none; }
.s03__list a[aria-current="step"] .s03__pip { background: var(--deep-lava); box-shadow: none; }
.s03__buy { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 40px; font-family: var(--f-display); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; white-space: nowrap; }
.s03__buy:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 767px) {
  .s03.is-live .s03__no { display: none; }
  .s03.is-live .s03__cam { left: 0; width: 100%; --focus-top: 40px; --focus-bottom: 120px; -webkit-mask-image: none; mask-image: none; }
  .s03.is-live .s03__stops { left: 0; right: 0; width: auto; top: auto; bottom: 0; height: 120px; background: rgba(236, 232, 227, 0.9); }
  .s03.is-live .s03__stop { top: 18px; left: var(--m); right: var(--m); transform: translateY(12px); }
  .s03.is-live .s03__stop.is-past { transform: translateY(-12px); }
  .s03.is-live .s03__stop.is-active { transform: none; }
  .s03.is-live .s03__idx { margin-bottom: 8px; }
  .s03.is-live .s03__title { font-size: 28px; margin-bottom: 8px; }
  .s03.is-live .s03__jp { font-size: 14px; line-height: 1.6; }
  .s03.is-live .s03__jp br { display: none; }
  .s03.is-live .s03__cap { display: none; }
  .s03.is-live .s03__progress { left: var(--m); right: var(--m); top: 16px; width: auto; transform: none; }
  .s03__list { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
  .s03__list li + li { margin: 0; }
  .s03__list a { min-height: 44px; align-items: flex-start; font-size: 0; gap: 0; position: relative; }
  .s03__list a .s03__pip { width: 100%; height: 2px; box-shadow: none; background: var(--paper-rule); }
  .s03__list a[aria-current="step"] .s03__pip { background: var(--deep-lava); }
  .s03__n { display: none; }
  .s03.is-live .s03__buy { display: none; }
}

/* ==========================================================================
   S05 CASE — Beat 1 (STAGE photo) + Beat 2 (anatomy on Gunmetal plinths)
   ========================================================================== */
.s05 { padding-bottom: var(--section); }
.s05__beat1 { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; }
.s05__photo { position: absolute; top: 0; bottom: 0; right: 0; left: calc(var(--bleed) + 4 * var(--c)); }
.s05__photo .fig__img { height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 16%), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect; }
.s05__par { position: absolute; left: 0; right: 0; top: -2.5%; bottom: -2.5%; }
.s05__par img { position: absolute; right: -6%; bottom: 0; width: 118%; height: auto; max-width: none; }
.s05__b1-text { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding-block: 56px 40px; pointer-events: none; }
.s05__b1-text > * { pointer-events: auto; }
.s05__no { margin: 0; }
.s05__b1-main { max-width: calc(4 * var(--c)); margin-block: auto; }   /* centred in the photo's height below the section number */
.s05__title { margin-top: 32px; }
.s05__intro { margin-top: 24px; }

.s05__beat2 { padding-top: var(--s16); }
.s05__lead { margin-top: 0; max-width: calc(6 * var(--c)); }
.s05__plinth { position: relative; margin: 0; }
.s05__plinth--ext { margin-top: 64px; padding: 56px 0 104px; }
.s05__plinth--ext .s05__stagebox { width: 84%; margin-left: 6%; }
.s05__stagebox { position: relative; container-type: inline-size; }
.s05__cut img { width: 100%; height: auto; }
.s05__row { margin-top: 32px; align-items: start; }
.s05__plinth--int { grid-column: 1 / span 7; padding: 48px 0 104px; }
.s05__plinth--int .s05__stagebox { width: 88%; margin-inline: auto; }
.s05__side { grid-column: 8 / -1; }
.s05__plate .fig__img { aspect-ratio: 5762 / 2469; }
.s05__spec { margin-top: 32px; border-top: 1px solid var(--gunmetal); }
.s05__spec > div { display: grid; grid-template-columns: 128px 1fr; align-items: baseline; padding: 11px 0 12px; border-bottom: 1px solid var(--gunmetal); }
.s05__spec dt { font-family: var(--f-jp); font-weight: 400; font-size: 12px; letter-spacing: 0.08em; color: var(--sand); }
.s05__spec dd { font-weight: 500; font-size: 15px; letter-spacing: 0.04em; }
.s05__spec small { display: inline-block; font-size: 12px; font-weight: 400; color: var(--sand); margin-left: 4px; }
.s05__buy { margin-top: 32px; float: right; }
.s05__side::after { content: ""; display: block; clear: both; }

/* callouts: li spans dot ↔ label; ::before = leader (1px), ::after = square pixel dot; .co__n square badge, zero-padded */
.s05__callouts { position: absolute; inset: 0; counter-reset: none; }
.co { position: absolute; left: calc(var(--x) * 1%); width: 0; }
.co--up { top: calc(var(--ly) * 1%); height: calc((var(--y) - var(--ly)) * 1%); }
.co--down { top: calc(var(--y) * 1%); height: calc((var(--ly) - var(--y)) * 1%); }
.co::before { content: ""; position: absolute; left: 0; width: 1px; background: var(--resin); top: 10px; bottom: 0; }
.co--down::before { top: 0; bottom: 10px; }
.co::after { content: ""; position: absolute; left: -2px; width: 5px; height: 5px; background: var(--resin); }
.co--up::after { bottom: -2px; }
.co--down::after { top: -2px; }
.co__n { position: absolute; left: -10px; width: 21px; height: 21px; box-shadow: inset 0 0 0 1px var(--resin); display: grid; place-items: center; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0; color: var(--resin); background: var(--gunmetal); }
.co--up .co__n { top: -10px; }
.co--down .co__n { bottom: -10px; }
.co__t { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 500; letter-spacing: 0.04em; line-height: 1.4; color: var(--resin); }
.co--up .co__t { bottom: calc(100% + 16px); }
.co--down .co__t { top: calc(100% + 16px); }
/* draw-in (leader grows from the dot, then the number and label appear) */
html.js [data-anatomy] .co::before { transform: scaleY(0); transform-origin: 50% 100%; }
html.js [data-anatomy] .co--down::before { transform-origin: 50% 0; }
html.js [data-anatomy] .co__n, html.js [data-anatomy] .co__t, html.js [data-anatomy] .co::after { opacity: 0; }
html.js [data-anatomy].is-drawn .co::before { transform: none; transition: transform 320ms var(--ease-out) calc(var(--i, 0) * 120ms + 200ms); }
html.js [data-anatomy].is-drawn .co::after { opacity: 1; transition: opacity 160ms linear calc(var(--i, 0) * 120ms + 200ms); }
html.js [data-anatomy].is-drawn .co__n, html.js [data-anatomy].is-drawn .co__t { opacity: 1; transition: opacity 240ms var(--ease-out) calc(var(--i, 0) * 120ms + 480ms); }
.co:nth-child(2) { --i: 1; } .co:nth-child(3) { --i: 2; } .co:nth-child(4) { --i: 3; } .co:nth-child(5) { --i: 4; }

@media (max-width: 1279px) {
  .s05__plinth--int { grid-column: 1 / -1; }
  .s05__side { grid-column: 1 / -1; margin-top: 48px; }
  .s05__b1-main { max-width: calc(5 * var(--c)); }
}
@media (max-width: 767px) {
  .s05__beat1 { height: auto; min-height: 0; overflow: visible; }
  .s05__photo { position: relative; left: auto; }
  .s05__photo .fig__img { aspect-ratio: 3 / 4; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 90%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 90%, transparent); }
  .s05__par img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .s05__b1-text { height: auto; padding-block: 24px 0; }
  .s05__no { margin-bottom: 32px; }
  .s05__title { margin-top: 24px; }
  .s05__beat2 { padding-top: 96px; }
  .s05__plinth--ext, .s05__plinth--int { padding: 32px 0 24px; margin-inline: calc(-1 * var(--m)); }
  .s05__plinth--ext .s05__stagebox, .s05__plinth--int .s05__stagebox { width: auto; margin: 0 var(--m); }
  .s05__callouts { position: static; margin-top: 24px; display: grid; gap: 10px; }
  .co { position: static; width: auto; height: auto !important; display: flex; align-items: center; gap: 12px; }
  .co::before { display: none; }
  .co::after { content: attr(data-n); left: calc(var(--x) * 1%); top: calc(var(--y) * var(--ar) * 1cqw); width: 18px; height: 18px; margin: -9px 0 0 -9px; display: grid; place-items: center; font-family: var(--f-mono); font-size: 9px; color: var(--ink); background: var(--resin); }
  .co__n, .co__t { position: static; transform: none; }
  .co__n { flex: none; }
  html.js [data-anatomy] .co__n, html.js [data-anatomy] .co__t, html.js [data-anatomy] .co::after { opacity: 1; }
  .s05__buy { float: none; width: 100%; }
}

/* ==========================================================================
   LU LINEUP — every model in one row (the guitar wall), grouped by category → series.
   Generated by tools/build_lineup.py. Basses stand 1.14× taller (their real length next to a guitar).
   ========================================================================== */
.lu { padding: var(--section) 0 64px; box-shadow: inset 0 1px 0 var(--gunmetal); }
.lu__head { display: grid; grid-template-columns: 1fr auto; align-items: end; row-gap: 16px; column-gap: 32px; }
.lu__word { grid-column: 1; grid-row: 1; margin: 0; }
.lu__head .lu__all { grid-column: 2; grid-row: 1; }
@media (max-width: 767px) { .lu__word { font-size: 56px; } }
.lu__h { margin: 0; }
.lu__all { margin-bottom: 8px; }
.lu__scroll { margin-top: 64px; }
.lu__wall {
  --iw: clamp(64px, calc((min(100vw, var(--maxw)) - 2 * var(--m) - 440px) / 10), 116px);
  --ih: calc(var(--iw) / 0.34);
  display: flex; align-items: stretch; gap: 48px;
}
.lu__cat { display: flex; flex-direction: column; }
.lu__cat--bass { padding-left: 48px; box-shadow: inset 1px 0 0 var(--gunmetal); }
.lu__catname { margin: 0 0 24px; font-size: 13px; letter-spacing: 0.06em; color: var(--sand); }
.lu__groups { display: flex; gap: 28px; flex: 1; }
.lu__grp { display: flex; flex-direction: column; }
.lu__sname { margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid var(--gunmetal); font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; line-height: 1; color: var(--sand); }
.lu__grp ul { display: flex; gap: 12px; margin: auto 0 0; padding: 0; list-style: none; }
.lu__it a { display: flex; flex-direction: column; align-items: center; gap: 12px; width: var(--iw); }
.lu__img { display: flex; align-items: flex-end; justify-content: center; height: var(--ih); }
.lu__cat--bass .lu__img { height: calc(var(--ih) * 1.14); }
.lu__it--feat .lu__img { height: calc(var(--ih) * 1.08); }
.lu__img img { height: 100%; width: auto; max-width: none; transition: transform var(--d-short) var(--ease-out), opacity var(--d-short) var(--ease-out); }
.lu__img--none { width: 40%; box-shadow: inset 0 0 0 1px var(--gunmetal); }
.lu__wall:hover .lu__it a:not(:hover) img { opacity: 0.45; }
.lu__it a:hover img, .lu__it a:focus-visible img { transform: translateY(-10px); }
.lu__it a:focus-visible { outline: 2px solid var(--resin); outline-offset: 6px; }
.lu__name { position: relative; font-family: var(--f-display); font-weight: 600; font-size: 16px; letter-spacing: 0.08em; line-height: 1; white-space: nowrap; }
.lu__it--feat .lu__name::before { content: ""; position: absolute; left: -12px; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--lava); }
@media (max-width: 1279px) {
  .lu__scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--m)); padding: 16px var(--m) 8px; }
  .lu__scroll::-webkit-scrollbar { display: none; }
  .lu__wall { --iw: 88px; width: max-content; }
}
@media (max-width: 767px) {
  .lu__head { grid-template-columns: 1fr; }
  .lu__head .lu__all { grid-column: 1; grid-row: 2; }
  .lu__scroll { margin-top: 48px; }
  .lu__wall { --iw: 76px; gap: 32px; }
  .lu__cat--bass { padding-left: 32px; }
  .lu__groups { gap: 20px; }
}

/* ==========================================================================
   SR SERIES — CLASSIC / GALAXY / FUSION: one card each (TIPSY has the M40T block above)
   ========================================================================== */
.sr { padding: 0 0 var(--section); }
.sr__grid { row-gap: 64px; }
.sr__card { grid-column: span 4; }
.sr__fig { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stage); }
.sr__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--d-long) var(--ease-out); }
.sr__fig:hover .sr__img { transform: scale(1.03); }
.sr__card:nth-child(1) .sr__img { object-position: 58% 50%; }
.sr__card:nth-child(2) .sr__img { object-position: 76% 50%; }
.sr__fig--pair { display: flex; align-items: flex-end; justify-content: center; gap: 12%; padding: 8% 0 6%; }
.sr__fig--pair::before { content: ""; position: absolute; inset: 20% 0 0; background: radial-gradient(closest-side, rgba(236, 232, 227, 0.08), transparent); }
.sr__fig--pair img { position: relative; height: 100%; width: auto; max-width: none; transition: transform var(--d-short) var(--ease-out); }
.sr__fig--pair img + img { height: 100%; }
.sr__fig--pair:hover img { transform: translateY(-8px); }
.sr__name { margin: 28px 0 0; font-family: var(--f-display); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: 0.04em; }
.sr__lead { margin: 12px 0 0; font-size: 15px; line-height: 1.8; letter-spacing: 0.05em; }
.sr__links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin: 16px 0 0; padding: 0; list-style: none; }
.sr__links .link { font-family: var(--f-display); font-weight: 600; font-size: 17px; letter-spacing: 0.08em; }
.sr__type { margin-left: 8px; font-family: var(--f-jp); font-weight: 400; font-size: 11px; letter-spacing: 0.04em; color: var(--sand); }
@media (max-width: 1279px) { .sr__card { grid-column: span 4; } .sr__card:nth-child(3) { grid-column: 1 / -1; } .sr__card:nth-child(3) .sr__fig { aspect-ratio: 16 / 9; } }
@media (max-width: 767px) { .sr__card, .sr__card:nth-child(3) { grid-column: 1 / -1; } .sr__card:nth-child(3) .sr__fig { aspect-ratio: 4 / 5; } .sr__name { font-size: 32px; } }

/* ==========================================================================
   S08 FINAL CTA — left page text, right page photo
   ========================================================================== */
.s08 { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.s08__photo { position: absolute; top: 0; bottom: 0; right: 0; left: 50%; margin: 0; }
.s08__photo .fig__img { height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%), linear-gradient(to bottom, transparent, #000 6%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 18%), linear-gradient(to bottom, transparent, #000 6%, #000 92%, transparent);
  mask-composite: intersect; }
.s08__par { position: absolute; inset: -2% 0; }
.s08__par img { position: absolute; bottom: 0; left: 0; width: 100%; height: calc(100% / 0.74); max-width: none; object-fit: cover; object-position: 50% 100%; }   /* top 26% out of frame: lid script gone (proposal S08) */
html.js .s08__photo[data-reveal="soft"].is-in { transition-duration: 1400ms; }
.s08__grid { width: 100%; padding-block: 120px; }
.s08__text { grid-column: 1 / span 6; position: relative; z-index: 2; }
.s08 { --c8: calc(40vw / 88); }
@supports (width: round(down, 10.4px, 1px)) { .s08 { --c8: round(down, calc(40vw / 88), 1px); } }
.s08__logo { width: calc(88 * var(--c8)); }
.s08__sub { width: calc(22 * var(--c8)); margin-top: calc(2.5 * var(--c8)); }
.s08__logo svg, .s08__sub svg { width: 100%; height: auto; color: var(--resin); shape-rendering: crispEdges; }
.s08__title { margin-top: 72px; }
.s08__body { margin-top: 40px; }
.s08__buy { margin-top: 80px; width: 400px; height: 64px; }
@media (max-width: 1279px) { .s08__text { grid-column: 1 / span 4; } .s08__buy { width: 100%; max-width: 400px; } }
@media (max-width: 767px) {
  .s08 { display: block; min-height: 0; padding-bottom: 96px; --c8: 3.5px; }
  .s08__photo { position: relative; left: auto; }
  .s08__photo .fig__img { aspect-ratio: 1 / 1;   /* full width, top quarter out of frame so the lid script is gone (as on desktop) */ -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent); mask-image: linear-gradient(to bottom, #000 80%, transparent); }
  .s08__par img { position: static; width: 100%; height: 100%; transform: none; object-fit: cover; object-position: 50% 100%; }
  .s08__grid { padding-block: 0; margin-top: -24px; }
  .s08__text { grid-column: 1 / -1; }
  .s08__sub { width: 99px; margin-top: 10px; }
  .s08__title { margin-top: 40px; }
  .s08__body { margin-top: 24px; }
  .s08__buy { margin-top: 40px; width: 100%; height: 56px; }
}
@media (min-width: 420px) and (max-width: 767px) { .s08 { --c8: 4px; } }

/* ==========================================================================
   S07B M40T TEASER (STAGE) — the second guitar: text 1–5, amp scene 6–12 bleeding right.
   Kept a step below STAGE-T: no 8-Step, smaller type, outline buy button; the Tipsy gradients carry the colour.
   ========================================================================== */
.m40 { position: relative; padding: var(--section) 0 var(--s16); overflow: clip; }
.m40__grid { align-items: center; }
.m40__text { grid-column: 1 / span 5; grid-row: 1; position: relative; z-index: 2; }
.m40__fig { grid-column: 6 / -1; grid-row: 1; margin-right: calc(-1 * var(--bleed)); }
.m40__img { aspect-ratio: 3 / 2;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%), linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 12%), linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent);
  mask-composite: intersect; }
.m40__img > img { position: absolute; inset: 0; object-position: 40% 60%; opacity: 0; transition: opacity var(--d-mid) var(--ease-io); }
.m40__img > img.is-active { opacity: 1; }
html.js .m40__fig .m40__img > img { transition: opacity var(--d-mid) var(--ease-io), transform var(--d-long) var(--ease-out); }   /* keep the crossfade alongside the soft reveal */
.m40__logo { display: block; width: 240px; height: auto; margin-left: -8px; }   /* the script's swash starts ~8px in */
.m40__title { margin-top: 24px; font-weight: inherit; }
.m40__series { display: block; font-family: var(--f-display); font-weight: 600; font-size: 28px; line-height: 1; letter-spacing: 0.14em; }
.m40__lead { display: block; margin-top: 24px; }
.m40__body { margin-top: 12px; }
.m40__colors { margin: 40px 0 0; padding: 0; border: 0; min-width: 0; }
.m40__colors legend { padding: 0; margin-bottom: 12px; }
.m40__sw { position: relative; display: flex; gap: 4px; margin-left: -10px; }   /* chips align with the text edge */
.m40__sw input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; margin: 0; }
.m40__sw label { position: relative; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.m40__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); }
.m40__sw input:checked + label::after { content: ""; position: absolute; inset: 6px; box-shadow: 0 0 0 1px var(--resin); }
.m40__sw input:focus-visible + label { outline: 2px solid var(--resin); outline-offset: 2px; }
.m40__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 12px; min-height: 20px; }
.m40__name .sku { font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.1em; color: var(--resin); }
.m40__name .desc { font-size: 12px; letter-spacing: 0.04em; color: var(--sand); }
.m40__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 32px; margin-top: 40px; }
html:not(.js) .m40__colors { display: none; }   /* chips are built by home.js */

@media (max-width: 1279px) {
  .m40__text { grid-column: 1 / span 4; }
  .m40__fig { grid-column: 5 / -1; }
  .m40__logo { width: 200px; }
}
@media (min-width: 768px) and (max-width: 1023px) {   /* tablet: image on top, bleeding both sides, text below */
  .m40__fig { grid-column: 1 / -1; grid-row: 1; margin-inline: calc(-1 * var(--m)); }
  .m40__img { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 88%, transparent); }
  .m40__text { grid-column: 1 / span 6; grid-row: 2; margin-top: 48px; }
}
@media (max-width: 767px) {
  .m40 { padding: var(--section) 0 var(--s12); }
  .m40__grid > * { grid-column: 1 / -1 !important; }
  .m40__fig { grid-row: 1; margin: 0 calc(-1 * var(--m)); }
  .m40__img { aspect-ratio: 4 / 3; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 5%, #000 86%, transparent); }
  .m40__img > img { object-position: 36% 60%; }
  .m40__text { grid-row: 2; margin-top: 40px; }
  .m40__logo { width: 180px; margin-left: -6px; }
  .m40__series { font-size: 24px; }
  .m40__lead { margin-top: 20px; }
  .m40__colors { margin-top: 32px; }
  .m40__sw { justify-content: space-between; margin-left: 0; }
  .m40__cta { flex-direction: column; align-items: stretch; gap: 16px; margin-top: 32px; }
  .m40__cta .btn { width: 100%; }
  .m40__cta .link { align-self: flex-start; }
}
@media (prefers-reduced-motion: reduce) { html.js .m40__fig .m40__img > img { transition: opacity 200ms linear; } }