/* ==========================================================================
   Mojolnir product pages — product.css (every page built by tools/build_products.py)
   Modelled on the M40T page (m40t.css), generalised:
   01 hero — .mh (a same-camera scene per colour) or .mh--pack (packshots + the model name)
   02 palette (N colours) · 03 features (.fb--a … .fb--e) · film (optional) · gallery (optional)
   spec · in the box (with or without the gig bag) · buy · phone buy bar.
   ========================================================================== */

.cls { display: inline-block; }                 /* keep a description clause together */

/* two-tone colour chip (edge colour = band, centre = top), square like HOME */
.chip { display: block; 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); flex: none; }

/* white-seamless photographs sit on paper: white multiplies into the paper tone */
.wb img { mix-blend-mode: multiply; }
.wb .fb__img { background: var(--paper);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent); mask-composite: intersect; }       /* the reveal wrapper isolates blending: give it the paper to multiply onto */

/* ======================================================================
   T01 HERO — full-bleed amp scene, text over the dark amp on the right
   The scene is 3:2. Its height = the hero height (--H); it is anchored to
   the right edge, so the amp is always at the right and the text panel can
   be placed in scene coordinates (fractions of --H).
   ====================================================================== */
.mh { --H: max(100svh, 640px); --IW: calc(var(--H) * 1.49975); position: relative; height: var(--H); overflow: hidden; background: var(--stage); }
.mh__scene { position: absolute; inset: 0; }
.mh__scene img {
  position: absolute; top: 0; right: 0; height: 100%; width: var(--IW); max-width: none; object-fit: cover;
  opacity: 0; transition: opacity 640ms var(--ease-out);
  /* when the viewport is wider than 3:2 the scene ends before the left edge: feather it into Stage Black */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%); mask-image: linear-gradient(to right, transparent 0, #000 9%);
}
.mh__scene img.is-active { opacity: 1; }

/* a light shade over the amp only (not a scrim over the guitar) */
.mh::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to left, rgba(4, 4, 4, 0.5) 0, rgba(4, 4, 4, 0.34) calc(var(--IW) * 0.34), rgba(4, 4, 4, 0) calc(var(--IW) * 0.5));
}
.mh__body {
  position: absolute; z-index: 2;
  right: max(var(--m), calc(var(--IW) * 0.055)); width: min(430px, calc(var(--IW) * 0.3));
  top: calc(var(--H) * 0.3); bottom: calc(var(--H) * 0.11);
  display: flex; flex-direction: column; justify-content: flex-end;
}
.mh__title { margin: 0; font-weight: 400; display: flex; flex-direction: column; align-items: flex-start; }
.mh__logo { width: clamp(200px, calc(var(--H) * 0.3), 300px); height: auto; margin-left: -4px; }
.mh__series { margin-top: 6px; font-family: var(--f-display); font-weight: 600; font-size: 17px; line-height: 1; letter-spacing: 0.32em; }
.mh__lead { margin-top: 20px; font-size: clamp(18px, calc(var(--H) * 0.023), 22px); }
.mh__colors { margin: clamp(16px, calc(var(--H) * 0.03), 28px) 0 0; padding: 0; border: 0; min-width: 0; }
.mh__legend { padding: 0; margin-bottom: 4px; color: var(--resin); opacity: 0.8; }
.chips { position: relative; display: flex; gap: 4px; margin-left: -10px; }
.chips input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; margin: 0; }
.chips label { position: relative; display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.chips input:checked + label::after { content: ""; position: absolute; inset: 6px; box-shadow: 0 0 0 1px var(--resin); }
.chips input:focus-visible + label { outline: 2px solid var(--resin); outline-offset: 0; }
.chips label:hover .chip { transform: translateY(-2px); }
.chips .chip { transition: transform var(--d-micro) var(--ease-out); }
.mh__now { display: grid; gap: 2px; margin-top: 8px; min-height: 48px; }
.mh__sku { font-family: var(--f-mono); font-weight: 500; font-size: 12px; line-height: 1.6; letter-spacing: 0.1em; }
.mh__desc { font-size: 13px; line-height: 1.7; letter-spacing: 0.03em; color: var(--resin); opacity: 0.82; }
.mh__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; margin-top: clamp(16px, calc(var(--H) * 0.03), 28px); }
.mh__bag { font-size: 13px; letter-spacing: 0.06em; color: var(--resin); }

/* ---------- packshot hero (.mh--pack): the model name behind, the guitar standing at the right ----------
   The name is the page's mark (like the STAGE-T pixel logo); the neck crosses it. A dark finish
   (data-tone="spot") gets a brighter spotlight so a black guitar still reads on Stage Black. */
.mh--pack { --G: min(calc(var(--H) - var(--header-h) - 48px), 1040px); --GR: max(var(--m), calc((100vw - min(100vw, var(--maxw))) / 2 + var(--m) + 11vw)); }
.mh--pack::after { display: none; }
.pk__spot { position: absolute; right: calc(var(--GR) - 18vw); bottom: 0; width: min(64vw, 1100px); height: 92%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(236, 232, 227, 0.09), rgba(236, 232, 227, 0.025) 60%, transparent); transition: opacity var(--d-mid) var(--ease-out); }
.pk__spot--hi { background: radial-gradient(closest-side, rgba(236, 232, 227, 0.34), rgba(236, 232, 227, 0.1) 55%, transparent); opacity: 0; }
.mh--pack[data-tone="spot"] .pk__spot--hi { opacity: 1; }
.pk__word { position: absolute; left: var(--m); top: calc(var(--header-h) + max(16px, 4svh)); z-index: 1; margin: 0;
  font-family: var(--f-display); font-weight: 700; font-size: min(calc(var(--H) * 0.36), 22vw); line-height: 0.8; letter-spacing: -0.01em; color: var(--resin); white-space: nowrap; }
.pk__g { position: absolute; right: var(--GR); bottom: 24px; height: var(--G); z-index: 2; }
.pk__g img { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: none; opacity: 0; transition: opacity 640ms var(--ease-out); }
.pk__g img:first-child { position: relative; }
.pk__g img.is-active { opacity: 1; }
.mh--pack .mh__body { left: var(--m); right: auto; width: min(460px, 36vw); top: auto; bottom: 40px; }
/* scene hero without a series logo: the model name in the display face (the pack hero shows it big already) */
.mh__name { display: block; margin: 0 0 14px -3px; font-family: var(--f-display); font-weight: 700; font-size: clamp(60px, calc(var(--H) * 0.088), 100px); line-height: 0.82; letter-spacing: 0; color: var(--resin); white-space: nowrap; }
.mh__series-l { font-family: var(--f-mono); font-weight: 500; font-size: 12px; letter-spacing: 0.14em; color: var(--sand); }
html:not(.js) .pk__g img:not(.is-active) { display: none; }

/* scene hero, words on the left: the scene is anchored to the left edge and fades out to the right */
.mh--left .mh__scene img { left: 0; right: auto;
  -webkit-mask-image: linear-gradient(to left, transparent 0, #000 9%); mask-image: linear-gradient(to left, transparent 0, #000 9%); }
.mh--left::after { background: linear-gradient(to right, rgba(4, 4, 4, 0.5) 0, rgba(4, 4, 4, 0.34) calc(var(--IW) * 0.34), rgba(4, 4, 4, 0) calc(var(--IW) * 0.5)); }
.mh--left .mh__body { right: auto; left: max(var(--m), calc(var(--IW) * 0.055)); }

/* short landscape screens (1280×720 …): tighten the stack so it stays below the headstock */
@media (min-width: 768px) and (max-height: 820px) and (min-aspect-ratio: 5/4) {
  .mh__body { bottom: calc(var(--H) * 0.07); }
  .mh__logo { width: 190px; }
  .mh__name { font-size: 60px; margin-bottom: 10px; }
  .mh__lead { margin-top: 14px; }
  .mh__colors, .mh__cta { margin-top: 14px; }
  .mh__now { min-height: 0; }
}

/* load sequence: scene lights up, then the words */
html.js .mh__scene { opacity: 0; filter: brightness(0.35); }
html.js .mh.is-lit .mh__scene { opacity: 1; filter: none; transition: opacity var(--d-long) var(--ease-out), filter var(--d-long) var(--ease-out); }
html.js .mh [data-mh-i] { opacity: 0; transform: translateY(16px); }
html.js .mh.is-told [data-mh-i] { 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); }
html:not(.js) .mh__scene img:not(.is-active) { display: none; }
html:not(.js) .chips, html:not(.js) .picker, html:not(.js) .mh__legend { display: none; }   /* selectors need the page script; the default colour stays readable */

/* packshot hero on tablets / phones: name, guitar, then the words */
@media (max-width: 767px), (max-aspect-ratio: 5/4) {
  .mh--pack { --G: min(58svh, 150vw); }
  .mh--pack .pk__word { position: relative; left: auto; top: auto; order: 1; padding: 20px var(--m) 0; font-size: min(26vw, 200px); }
  .mh--pack .pk__g { position: relative; right: auto; bottom: auto; order: 2; align-self: center; margin-top: -2vw; }
  .mh--pack .pk__spot { right: 50%; transform: translateX(50%); width: 140vw; height: 70%; top: 18%; }
  .mh--pack .mh__body { order: 3; left: auto; bottom: auto; width: auto; }
}

/* two colours: chips side by side, not pushed to the edges on phones */
@media (max-width: 767px), (max-aspect-ratio: 5/4) {
  .chips[data-n="2"], .chips[data-n="3"] { justify-content: flex-start; gap: 16px; }
  .mh__name { font-size: 56px; margin: 0; }
}

/* phone, and portrait / square screens: scene on top (cropped around the guitar), text below */
@media (max-width: 767px), (max-aspect-ratio: 5/4) {
  .mh { --H: auto; height: auto; min-height: 100svh; display: flex; flex-direction: column; padding-top: var(--header-h); }
  .mh::after { display: none; }
  .mh__scene { position: relative; inset: auto; height: min(46svh, 120vw); min-height: 300px; }
  .mh__scene img {
    left: 0; right: auto; width: 100%; height: 100%; object-position: var(--pp, 41% 62%);
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent);
  }
  .mh__body { position: relative; inset: auto; width: auto; max-width: 560px; padding: 12px var(--m) 32px; justify-content: flex-start; }
  .mh__title { flex-direction: row; align-items: flex-end; gap: 16px; }
  .mh__logo { width: 156px; }
  .mh__series { font-size: 14px; letter-spacing: 0.26em; margin: 0 0 10px; }
  .mh__lead { margin-top: 12px; font-size: 17px; }
  .mh__colors { margin-top: 12px; }
  .mh__legend { display: none; }
  .chips { justify-content: space-between; margin-inline: -10px; max-width: 360px; }
  .mh__now { margin-top: 4px; }
  .mh__cta { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 16px; }
  .mh__btn { width: 100%; }
  .mh__bag { font-size: 12px; }
}
@media (min-width: 768px) and (max-aspect-ratio: 5/4) {
  .mh__scene { height: 56svh; }
  .mh__body { padding-inline: var(--m); max-width: none; }
}

/* ======================================================================
   T02 PALETTE — five fronts, equal height, bottoms aligned
   ====================================================================== */
.pal { padding: var(--section) 0 160px; }
.pal__head { align-items: start; row-gap: 24px; }
.pal__no { grid-column: 1 / span 2; margin-top: 12px; }
.pal__h { grid-column: 3 / span 4; }
.pal__text { grid-column: 7 / span 6; }
.pal__text .t-body { margin-top: 20px; }
.pal__set { margin: 96px 0 0; padding: 0; border: 0; min-width: 0; }
.pal__list { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); column-gap: var(--g); }
.pal__list[style*="--n:2"], .pal__list[style*="--n: 2"] { max-width: 760px; margin-inline: auto; }
.pal__item { position: relative; display: block; cursor: pointer; }
.pal__item input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.pal__card { display: block; }
.pal__fig { display: block; height: clamp(380px, 62vh, 660px); }
.pal__fig img { height: 100%; width: auto; max-width: 100%; margin-inline: auto; object-fit: contain; object-position: 50% 100%; transition: transform var(--d-short) var(--ease-out); }
.pal__item:hover .pal__fig img { transform: translateY(-6px); }
.pal__meta { display: block; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--paper-rule); transition: border-color var(--d-micro) linear; }
.pal__name { display: flex; align-items: center; gap: 12px; }
.pal__name .chip { width: 20px; height: 20px; box-shadow: inset 0 0 0 4px var(--band), 0 0 0 1px rgba(95, 90, 88, 0.3); }
.pal__code { font-family: var(--f-display); font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: 0.02em; }
.pal__sku { font-family: var(--f-mono); font-size: 11px; line-height: 1; letter-spacing: 0.08em; color: var(--ink-grey); }
.pal__mk { margin-left: auto; opacity: 0; }
.pal__desc { display: block; margin-top: 12px; font-size: 13px; line-height: 1.8; letter-spacing: 0.03em; color: var(--ink-grey); max-width: 22em; }
.pal__item input:checked + .pal__card .pal__meta { border-top-color: var(--ink); }
.pal__item input:checked + .pal__card .pal__mk { opacity: 1; }
.pal__item input:checked + .pal__card .pal__desc { color: var(--ink); }
.pal__item input:focus-visible + .pal__card { outline: 2px solid var(--ink); outline-offset: 8px; }
.pal__now { display: none; }
.pal__foot { margin-top: 64px; }                     /* the colour disclaimer only (no caption line) */
.pal__note { font-size: 12px; line-height: 1.8; letter-spacing: 0.04em; color: var(--ink-grey); }

/* ======================================================================
   T03 FEATURES — editorial blocks, each laid out differently
   ====================================================================== */
.feat { padding: 64px 0 var(--section); border-top: 1px solid var(--paper-rule); }
.fb { align-items: start; }
.feat__no { margin: 0 0 96px; }
.fb + .fb { margin-top: 176px; }
.fb figure { margin: 0; }
.fb__img { position: relative; overflow: hidden; }
.fb__img img { width: 100%; height: auto; }
.fb__no { margin-bottom: 20px; }
.fb__h { font-family: var(--f-jp); font-weight: 700; font-size: 32px; line-height: 1.4; letter-spacing: 0.06em; font-feature-settings: "palt"; }
.fb .t-body { margin-top: 24px; }

/* a: image left (6 cols), text right, centred against it */
.fb--a { align-items: center; }
.fb--a .fb__main { grid-column: 1 / span 6; }
.fb--a .fb__text { grid-column: 8 / span 4; }
/* b: text low on the left, image to the right edge */
.fb--b { align-items: end; }
.fb--b .fb__text { grid-column: 1 / span 4; padding-bottom: 8px; }   /* last line just above the photo's bottom edge */
.fb--b .fb__main { grid-column: 6 / span 7; }
/* c: a wide plate across the page, number / title / text beneath */
.fb--c { row-gap: 0; }
.fb--c .fb__main { grid-column: 1 / -1; }
.fb--c .fb__no { grid-column: 1 / span 2; margin: 56px 0 0; }
.fb--c .fb__h { grid-column: 3 / span 4; margin-top: 48px; }
.fb--c .fb__body { grid-column: 8 / span 4; margin-top: 52px; }
/* d: a smaller image at column 2, text with a rule */
.fb--d { align-items: center; }
.fb--d .fb__main { grid-column: 2 / span 5; }
.fb--d .fb__text { grid-column: 8 / span 4; border-left: 1px solid var(--rule); padding-left: 40px; }
/* e: text left, two images side by side */
.fb--e .fb__text { grid-column: 1 / span 4; }
.fb--e .fb__pair { grid-column: 6 / span 7; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--g); align-items: end; }
/* white-seamless photos in a pair (layout e): the paper tone + soft edge, like single .wb figures */
.fb__pair .fb__img.wb { background: var(--paper);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent), linear-gradient(to bottom, transparent, #000 4%, #000 96%, transparent); mask-composite: intersect; }
/* optional fixed crop ratio for a feature image: style="--r: 4 / 5" on .fb__img */
.fb__img[style*="--r"] { aspect-ratio: var(--r); }
.fb__img[style*="--r"] img { height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
/* packshot details (transparent) stand on the paper without a frame */
.fb__img--cut img { width: auto; max-width: 100%; max-height: 72vh; margin-inline: auto; }

/* MOJO TRICK pickup diagram (tools/diagrams.py, feature "diagram") — closes its feature as a full-width row.
   Ink on paper: lit coils ink, coils that are off in the rule colour. SVG text is set in user units (viewBox 1100 wide):
   on phones the drawing keeps a 640px width inside its own horizontal scroll box, so the sizes below stay ≥ 11px there. */
.fb__dia { grid-column: 1 / -1; margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--rule); }
.mt { --mt-on: var(--ink); --mt-ink: var(--ink); --mt-off: var(--paper-rule); --mt-bg: var(--paper); margin: 0; max-width: 1120px; }
.mt__draw { position: relative; }
.mt__svg { display: block; width: 100%; height: auto; overflow: visible; }
.mt__mode { font-family: var(--f-jp); font-weight: 700; font-size: 28px; letter-spacing: 0.06em; font-feature-settings: "palt"; fill: var(--ink); }
.mt__sub { font-family: var(--f-jp); font-weight: 400; font-size: 17px; letter-spacing: 0.04em; font-feature-settings: "palt"; fill: var(--ink-grey); }
.mt__pos { font-family: var(--f-mono); font-weight: 500; font-size: 16px; letter-spacing: 0.08em; fill: var(--ink-grey); }
@media (max-width: 1279px) {       /* the drawing scales down to ~0.65 on tablets: larger user-unit text */
  .mt__mode { font-size: 32px; } .mt__sub { font-size: 20px; } .mt__pos { font-size: 19px; }
}
@media (max-width: 767px) {
  .fb__dia { order: 3; margin-top: 64px; padding-top: 32px; }
  .mt__draw { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; margin-right: calc(-1 * var(--m)); padding-right: var(--m); scrollbar-width: thin; }
  .mt__svg { width: 640px; max-width: none; }
  .mt__mode { font-size: 32px; } .mt__sub { font-size: 21px; } .mt__pos { font-size: 20px; }
}

/* ======================================================================
   T04 FILM (STAGE) — a square crop of the silent loop (left part of the
   16:9 frame: the drummer and the studio mark on the right never show),
   text beside it; the full film opens in a Stage Black player.
   ====================================================================== */
.mfl { padding: var(--section) 0; }
.mfl__no { margin: 0 0 64px; }
.mfl__grid { align-items: end; }
.mfl__fig { grid-column: 1 / span 6; margin: 0; }
.mfl__frame { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--stage); }
.mfl__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 16% 50%; }   /* source x 90–810 of 1280: the drum shells reach x ≈ 830 at 1.1 s, the drummer and the bug stay past x ≈ 1000 */
.mfl__text { grid-column: 8 / span 4; }    /* last line sits on the photo's bottom edge */
.mfl__lead { margin-top: 28px; }
.mfl__btn { margin-top: 48px; }
.mfl__play { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent currentColor; flex: none; }

/* full-film player */
.mfp { position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center; background: var(--stage); color: var(--resin); opacity: 0; transition: opacity var(--d-short) var(--ease-io); }
.mfp[hidden] { display: none; }
.mfp.is-open { opacity: 1; }
.mfp__top { position: absolute; left: 0; right: 0; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; padding-inline: 48px; }
.mfp__t { margin: 0; min-width: 0; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mfp__close { flex: none; min-height: 44px; min-width: 44px; font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: 0.14em; }
.mfp__video { display: block; width: min(100vw, (100vh - 144px) * 16 / 9); width: min(100vw, (100svh - 144px) * 16 / 9); aspect-ratio: 16 / 9; background: var(--stage); }
html.mfp-locked, html.mfp-locked body { overflow: hidden; }

/* ======================================================================
   T05 SPEC
   ====================================================================== */
.msp { padding: var(--section) 0; border-top: 1px solid var(--paper-rule); }
.msp__grid { margin-top: 64px; align-items: start; }
.msp__side { grid-column: 1 / span 3; position: sticky; top: calc(var(--header-h) + 32px); }
.msp__model { margin: 20px 0 6px; font-family: var(--f-display); font-weight: 700; font-size: 40px; line-height: 1; letter-spacing: 0.02em; }
.msp__table { grid-column: 5 / span 8; }
.msp .spec-row { grid-template-columns: 40px minmax(160px, 0.8fr) 1fr; }
.msp__notes { margin-top: 24px; display: grid; gap: 4px; font-size: 12px; line-height: 1.8; letter-spacing: 0.04em; color: var(--ink-grey); }

/* ======================================================================
   T06 IN THE BOX — the MOJO gig bag
   ====================================================================== */
.mbox { padding: var(--section) 0; border-top: 1px solid var(--paper-rule); }
.mbox__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.mbox__grid { margin-top: 80px; align-items: start; }
.mbox figure { margin: 0; }
.mbox__bag { grid-column: 1 / span 4; }
.mbox__emb { grid-column: 5 / span 2; }
.mbox figure.mbox__emb { margin-top: calc(142% + 1.46 * var(--g)); }   /* bottom-aligned with the bag photo (bag 4 cols at 1:1.46, detail 2 cols at 2:3) */
.mbox__emb .fb__img { aspect-ratio: 2 / 3; -webkit-mask-image: none; mask-image: none; }   /* black to the edge: no feather */
.mbox__emb img { height: 100%; object-fit: cover; object-position: 40% 55%; }
.mbox__text { grid-column: 8 / span 5; align-self: start; }
.mbox__lead { font-size: 32px; }
.mbox__list { margin-top: 40px; border-top: 1px solid var(--paper-rule); }
.mbox__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; }
.mbox--bag .mbox__list li:first-child { font-weight: 700; }
.mbox__list .n { width: 24px; flex: none; font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; color: var(--ink-grey); }
.mbox__bagspec { margin-top: 56px; }
.mbox__bagname { font-weight: 700; font-size: 13px; letter-spacing: 0.06em; }
.mbox__dl { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--g); }
.mbox__dl div { display: grid; grid-template-columns: 6.5em 1fr; gap: 12px; padding-block: 9px; border-bottom: 1px solid var(--paper-rule); font-size: 12px; line-height: 1.7; letter-spacing: 0.03em; }
.mbox__dl div:nth-child(-n+2) { border-top: 1px solid var(--paper-rule); }
.mbox__dl dt { color: var(--ink-grey); }
.mbox__dl dd { margin: 0; }

.mbox--plain .mbox__text { grid-column: 1 / span 5; }
.mbox--plain .mbox__list { grid-column: 7 / span 6; margin-top: 0; }
@media (max-width: 1279px) { .mbox--plain .mbox__text { grid-column: 1 / span 3; } .mbox--plain .mbox__list { grid-column: 4 / span 5; } }
@media (max-width: 767px) { .mbox--plain .mbox__text, .mbox--plain .mbox__list { grid-column: 1 / -1; } .mbox--plain .mbox__list { margin-top: 28px; } }

/* ======================================================================
   GALLERY (optional) — three photographs in a row (people, rooms, stages)
   ====================================================================== */
.pgal { padding: var(--section) 0; }
.pgal__no { margin: 0 0 64px; }
.pgal__row { align-items: end; }
.pgal__row figure { margin: 0; }
.pgal__row figure:nth-child(1) { grid-column: 1 / span 5; }
.pgal__row figure:nth-child(2) { grid-column: 6 / span 4; }
.pgal__row figure:nth-child(3) { grid-column: 10 / span 3; }
.pgal__img { overflow: hidden; }
.pgal__img img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1279px) { .pgal__row figure:nth-child(1) { grid-column: 1 / span 4; } .pgal__row figure:nth-child(2) { grid-column: 5 / span 4; } .pgal__row figure:nth-child(3) { display: none; } }
@media (max-width: 767px) { .pgal__row figure:nth-child(n) { grid-column: 1 / -1; display: block; } .pgal__row figure + figure { margin-top: 32px; } }
/* two photographs: a wide one and a narrower one, with a column of air between */
@media (min-width: 1280px) { .pgal__row--2 figure:nth-child(1) { grid-column: 1 / span 6; } .pgal__row--2 figure:nth-child(2) { grid-column: 8 / span 5; } }

/* ======================================================================
   T07 BUY (STAGE)
   ====================================================================== */
.mbuy { padding: var(--section) 0; }
.mbuy__fig { margin: 0; }
.mbuy__stack { position: relative; aspect-ratio: var(--ar, 3); width: min(100%, 1180px); margin-inline: auto; }
.mbuy__img { position: absolute; inset: 0; opacity: 0; transition: opacity var(--d-short) var(--ease-out); }
.mbuy__img.is-on { opacity: 1; }
.mbuy__img img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
.mbuy__grid { margin-top: 120px; align-items: start; }
.mbuy__mark { grid-column: 1 / span 5; margin: 0; font-weight: 400; display: flex; flex-direction: column; align-items: flex-start; }
.mbuy__logo { width: 280px; height: auto; margin-left: -4px; }
.mbuy__word { font-family: var(--f-display); font-weight: 700; font-size: 120px; line-height: 0.82; letter-spacing: -0.01em; }
.mbuy__series { margin-top: 8px; font-family: var(--f-display); font-weight: 600; font-size: 17px; line-height: 1; letter-spacing: 0.32em; }
.mbuy__panel { grid-column: 7 / span 6; }
.picker { margin: 0; padding: 0; border: 0; min-width: 0; }
.picker__legend { padding: 0; 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: 10px; width: 64px; height: 76px; box-shadow: inset 0 0 0 1px var(--gunmetal); transition: box-shadow var(--d-micro) linear; }
.picker__code { font-family: var(--f-mono); font-weight: 500; font-size: 11px; line-height: 1; letter-spacing: 0.1em; color: var(--sand); }
.picker__opt:hover .picker__box { box-shadow: inset 0 0 0 1px var(--sand); }
.picker__opt input:checked + .picker__box { box-shadow: inset 0 0 0 1px var(--resin); }
.picker__opt input:checked + .picker__box .picker__code { color: var(--resin); }
.picker__opt input:focus-visible + .picker__box { outline: 2px solid var(--resin); outline-offset: 2px; }
.picker__desc { margin-top: 20px; min-height: 24px; font-size: 13px; line-height: 1.8; letter-spacing: 0.03em; color: var(--sand); }
.mbuy__row { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 28px; padding-block: 24px; border-top: 1px solid var(--gunmetal); border-bottom: 1px solid var(--gunmetal); }
.mbuy__model { display: flex; align-items: baseline; gap: 16px; }
.mbuy__name { font-family: var(--f-display); font-weight: 700; font-size: 28px; letter-spacing: 0.04em; line-height: 1; }
.mbuy__sku { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--sand); }
.mbuy__btn { min-width: 280px; }
.mbuy__notes { margin-top: 24px; display: grid; gap: 6px; font-size: 12px; line-height: 1.8; letter-spacing: 0.04em; color: var(--sand); }
.mbuy__notes p:first-child { color: var(--resin); }

/* ---------- phone sticky buy bar (after the hero, hidden in T06) ---------- */
.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%); visibility: hidden; transition: transform var(--d-short) var(--ease-out), visibility 0s linear var(--d-short);
}
.buybar[hidden] { display: none; }
.buybar.is-on { transform: none; visibility: visible; transition: transform var(--d-short) var(--ease-out); }
.buybar__name { display: flex; align-items: baseline; gap: 12px; font-family: var(--f-display); font-weight: 600; font-size: 16px; letter-spacing: 0.12em; }
.buybar__code { font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; color: var(--sand); }
.buybar__btn { height: 56px; min-width: 136px; justify-content: center; gap: 12px; }
@media (min-width: 768px) { .buybar { display: none; } }

/* ======================================================================
   Tablet (8 columns)
   ====================================================================== */
@media (max-width: 1279px) {
  .pal__no { grid-column: 1 / span 1; }
  .pal__h { grid-column: 2 / span 3; }
  .pal__text { grid-column: 5 / span 4; }
  .pal__desc .cls { display: inline; }
  .fb--a .fb__main { grid-column: 1 / span 4; }
  .fb--a .fb__text { grid-column: 5 / span 4; padding-left: 16px; }
  .fb--b .fb__text { grid-column: 1 / span 3; }
  .fb--b .fb__main { grid-column: 4 / span 5; }
  .fb--c .fb__no { grid-column: 1 / span 1; }
  .fb--c .fb__h { grid-column: 2 / span 3; }
  .fb--c .fb__body { grid-column: 5 / span 4; }
  .fb--d .fb__main { grid-column: 1 / span 4; }
  .fb--d .fb__text { grid-column: 5 / span 4; padding-left: 32px; }
  .fb--e .fb__text { grid-column: 1 / span 3; }
  .fb--e .fb__pair { grid-column: 4 / span 5; }
  .mfl__fig { grid-column: 1 / span 4; }
  .mfl__text { grid-column: 5 / span 4; padding-left: 16px; }
  .msp__side { grid-column: 1 / span 2; }
  .msp__table { grid-column: 3 / span 6; }
  .mbox__bag { grid-column: 1 / span 3; }
  .mbox__emb { grid-column: 4 / span 1; }
  .mbox figure.mbox__emb { margin-top: calc(288% + 2.92 * var(--g)); }   /* bag 3 cols, detail 1 col */
  .mbox__text { grid-column: 5 / span 4; }
  .mbox__dl { grid-template-columns: 1fr; }
  .mbox__dl div:nth-child(2) { border-top: 0; }
  .mbuy__mark { grid-column: 1 / span 3; }
  .mbuy__logo { width: 220px; }
  .mbuy__word { font-size: 88px; }
  .mbuy__panel { grid-column: 4 / span 5; }
  .mbuy__row { flex-wrap: wrap; }
}

/* ======================================================================
   Phone (4 columns)
   ====================================================================== */
@media (max-width: 767px) {
  .pal { padding: var(--section) 0 96px; }
  .pal__no, .pal__h, .pal__text { grid-column: 1 / -1; }
  .pal__no { margin-top: 0; }
  .pal__set { margin-top: 48px; }
  .pal__list { column-gap: 8px; }
  .pal__fig { height: auto; aspect-ratio: var(--ar, 0.33); }
  .pal__fig img { width: 100%; height: 100%; }
  .pal__item:hover .pal__fig img { transform: none; }
  .pal__meta { margin-top: 20px; padding-top: 10px; }
  .pal__name { flex-direction: column; align-items: flex-start; gap: 8px; }
  .pal__code { font-size: 17px; }
  .pal__sku, .pal__desc, .pal__mk { display: none; }
  .pal__item input:focus-visible + .pal__card { outline-offset: 4px; }
  .pal__now { display: grid; gap: 4px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--paper-rule); font-size: 13px; line-height: 1.8; letter-spacing: 0.03em; }
  .pal__now-sku { font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.1em; color: var(--ink-grey); }
  .pal__foot { margin-top: 32px; }

  .feat { padding: 48px 0 var(--section); }
  .feat__no { margin-bottom: 48px; }
  .fb + .fb { margin-top: 112px; }
  .fb > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .fb__h { font-size: 24px; }
  .fb .t-body { margin-top: 16px; }
  .fb__no { margin-bottom: 12px; }
  .fb--b .fb__text { order: 2; padding: 32px 0 0; }
  .fb--a .fb__text, .fb--d .fb__text { margin-top: 32px; padding-left: 0; border-left: 0; }
  .fb--d .fb__main { width: 84%; }
  .fb--e .fb__pair { margin-top: 32px; column-gap: 8px; }
  .fb--c .fb__no { margin: 32px 0 12px; }
  .fb--c .fb__h { margin-top: 0; }
  .fb--c .fb__body { margin-top: 16px; }

  .mfl__no { margin-bottom: 40px; }
  .mfl__fig, .mfl__text { grid-column: 1 / -1; }
  .mfl__frame { aspect-ratio: 4 / 5; }
  .mfl__frame video { object-position: 19% 50%; }
  .mfl__text { padding: 40px 0 0; }
  .mfl__h { font-size: 26px; }
  .mfl__lead { margin-top: 20px; }
  .mfl__btn { width: 100%; min-width: 0; margin-top: 36px; }
  .mfp__top { height: 56px; padding-inline: 24px; }

  .msp__grid { margin-top: 40px; }
  .msp__side { position: static; grid-column: 1 / -1; display: flex; align-items: baseline; gap: 16px; margin-bottom: 24px; }
  .msp__model { margin: 0; font-size: 28px; }
  .msp__side .t-index { order: 3; margin-left: auto; }
  .msp__table { grid-column: 1 / -1; }
  .msp .spec-row { grid-template-columns: 32px 1fr; }

  .mbox__grid { margin-top: 40px; row-gap: 0; }
  .mbox__bag { grid-column: 1 / span 3; }
  .mbox__emb { grid-column: 4 / span 1; align-self: end; }
  .mbox figure.mbox__emb { margin-top: 0; }
  .mbox__text { grid-column: 1 / -1; margin-top: 48px; }
  .mbox__lead { font-size: 22px; }
  .mbox__list { margin-top: 28px; }
  .mbox__list li { font-size: 14px; gap: 16px; min-height: 44px; padding-block: 10px; }
  .mbox__bagspec { margin-top: 40px; }
  .mbox__dl div { grid-template-columns: 6em 1fr; }

  .mbuy__stack { width: 100%; }
  .mbuy__grid { margin-top: 64px; }
  .mbuy__mark, .mbuy__panel { grid-column: 1 / -1; }
  .mbuy__mark { flex-direction: row; align-items: flex-end; gap: 16px; margin-bottom: 40px; }
  .mbuy__logo { width: 156px; }
  .mbuy__word { font-size: 64px; }
  .mbuy__series { font-size: 14px; letter-spacing: 0.26em; margin: 0 0 10px; }
  .picker__opts { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 6px; }
  .picker__box { width: auto; }
  .mbuy__row { flex-direction: column; align-items: stretch; gap: 20px; }
  .mbuy__btn { width: 100%; min-width: 0; }
}

/* ======================================================================
   Reduced motion
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  html.js .mh__scene, html.js .mh [data-mh-i] { opacity: 1; transform: none; filter: none; }
  .mh__scene img, .mbuy__img, .buybar, .pal__fig img, .chips .chip, .mfp { transition-duration: 1ms !important; }
  .pal__item:hover .pal__fig img, .chips label:hover .chip { transform: none; }
}

/* white-seamless photos sit on the paper: multiply drops their near-white backdrop into the paper tone (no grey box) */
.bench .wb img, .bench img[src*="bag-"] { mix-blend-mode: multiply; }
@media (max-width: 767px) { .mbox__emb { display: none; } }   /* the logo close-up is too small to read on a phone */