/* ==========================================================================
   GALLERY — brand-wide: STAGE-T first (G01–G12 + YouTube + 2027 LIMITED EDITION),
   then TIPSY / CLASSIC / GALAXY / FUSION in the same visual system.
   Series filter (?s=all|stage-t|tipsy|classic|galaxy|fusion) — without JS everything shows.
   Desktop ≥1280: 12-column editorial sequence. ≤1279: single-column "beat".
   Photographs only, no captions. Page-scoped; shared tokens come from base.css.
   ========================================================================== */

.gallery {
  --span3: calc(3 * var(--col) + 2 * var(--g));
  --span4: calc(4 * var(--col) + 3 * var(--g));
  --span6: calc(6 * var(--col) + 5 * var(--g));
  --gap-l: var(--section);          /* 192 — between groups */
  --gap-m: var(--s16);              /* 128 — between related groups */
  --dim: 0.55;                      /* black overlay → brightness 45% */
}

/* ---------- item: link → frame → zoom → img ---------- */
.g-item { position: relative; margin: 0; }
/* deep links (#g01–#g69) land clear of the fixed header, also without JS */
.g-item[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
.g-open { position: relative; display: block; color: inherit; cursor: pointer; }
.g-open:focus-visible { outline-offset: 4px; }
.g-frame { position: relative; display: block; overflow: hidden; background: var(--stage); }
.g-zoom { display: block; width: 100%; height: 100%; transition: transform 400ms var(--ease-out); }
.g-zoom img { width: 100%; height: 100%; object-fit: cover; }
.g-contain .g-zoom img { object-fit: contain; }
/* spotlight: every other image drops to 45% brightness (a black veil, opacity only) */
.g-frame::after {
  content: ""; position: absolute; inset: 0; z-index: 1; background: var(--stage); opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--ease-out);
}

.ar-45 { aspect-ratio: 4 / 5; }
.ar-34 { aspect-ratio: 3 / 4; }
.ar-11 { aspect-ratio: 1 / 1; }
.ar-32 { aspect-ratio: 3 / 2; }
.ar-169 { aspect-ratio: 16 / 9; }
.ar-219 { aspect-ratio: 21 / 9; }

@media (hover: hover) and (pointer: fine) {
  .gallery:has(.g-hit:hover) .g-hit:not(:hover) .g-frame::after,
  .gallery:has(.g-hit:hover) .g-hit:not(:hover) ~ .g-frame::after { opacity: var(--dim); }
  .g-hit:hover .g-zoom { transform: scale(1.03); }
}
.gallery:has(.g-hit:focus-visible, .g-hit :focus-visible) .g-hit:not(:focus-visible):not(:has(:focus-visible)) .g-frame::after { opacity: var(--dim); }
.g-hit:focus-visible .g-zoom { transform: scale(1.03); }
/* the film figure is the hover target but its frame is a sibling of the link */
.g-film.g-hit:hover .g-frame::after { opacity: 0; }

/* ---------- groups ---------- */
.g-group { margin-top: var(--gap-l); }
.g-group--m { margin-top: var(--gap-m); }
.g-group.g-group--first { margin-top: var(--s8); }

/* ---------- series: one section per filter key; STAGE-T first ---------- */
.g-series { margin-top: var(--section-l); }
.g-hero + .g-series { margin-top: var(--gap-m); }
.g-series.is-off { display: none; }
.g-shead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; scroll-margin-top: var(--header-h); }
.g-series[id] { scroll-margin-top: calc(var(--header-h) + 24px); }
.g-shead__h { margin: 0; }
.g-shead__models { display: flex; flex-wrap: wrap; gap: 0 32px; margin: 0; }
.g-shead__models .link { color: var(--fg2); transition: color var(--d-micro) linear; }
.g-shead__models .link:hover, .g-shead__models .link:focus-visible { color: var(--resin); }

/* ---------- series filter (hero) — the header nav's type: Sofia 15 / 0.14em, sand → resin, lava pixel on the current one ---------- */
.g-filter { display: flex; flex-wrap: wrap; gap: 0 32px; margin-top: 40px; pointer-events: auto; }
html:not(.js) .g-filter { display: none; }            /* without JS every series is on the page */
.g-filter__a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--f-display); font-weight: 500; font-size: 15px; letter-spacing: 0.14em; line-height: 1; color: var(--sand);
  transition: color var(--d-micro) linear;
}
.g-filter__a--ja { font-family: var(--f-jp); font-size: 14px; letter-spacing: 0.08em; }
.g-filter__a::before { content: ""; position: absolute; left: -12px; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--lava); opacity: 0; }
.g-filter__a:hover, .g-filter__a[aria-current="true"] { color: var(--resin); }
.g-filter__a[aria-current="true"]::before { opacity: 1; }
.g-filter__a:focus-visible { outline-offset: 2px; }
@media (min-width: 1280px) {
  /* a short index under the count, clear of the opening image */
  .g-filter { flex-direction: column; align-items: flex-start; gap: 0; margin-top: 32px; }
  .g-filter__a { min-height: 40px; }
}

/* a series filter other than STAGE-T: the opening image steps aside, the title block stays */
.gallery.is-filtered .g01 { display: none; }
.gallery.is-filtered .g-hero { height: auto; min-height: 0; }
.gallery.is-filtered .g-hero + .g-series, .gallery.is-filtered .g-series.is-lead { margin-top: var(--s12); }
@media (min-width: 1280px) {
  .gallery.is-filtered .g-filter { flex-direction: row; gap: 0 32px; margin-top: 40px; }
}

/* ---------- G01 · opening ---------- */
.g-hero { position: relative; height: 100vh; height: 100svh; min-height: 600px; }
.g-hero__head { position: relative; z-index: 2; padding-top: calc(var(--header-h) + 40px); pointer-events: none; }
.g-kicker.caption { margin: 0 0 20px; }
.g-title .t-h1 { display: block; }
.g-count { margin-top: 32px; }
.g01 { position: absolute; top: var(--header-h); right: 0; z-index: 1; width: min(80vw, calc((100svh - var(--header-h) - 96px) * 1.3769)); }   /* below the header: the neck never runs behind the buy button */
.ar-g01 { aspect-ratio: 4826 / 3505; background: transparent; }
.g01 .g-zoom img, .b-cut .g-zoom img { object-fit: contain; }
/* short desktop viewports (1280×720, 1366×768): the smaller image would push its upper-left steps into the title */
@media (min-width: 1280px) and (max-height: 820px) {
  .g01 { width: min(80vw, calc((100svh - var(--header-h) - 96px) * 1.3769), calc(100vw - 520px)); }
}

/* ---------- desktop sequence ---------- */
@media (min-width: 1280px) {

  /* G02 · 70 / 30, bottoms aligned */
  .g02a { grid-column: 1 / span 8; }
  .g02b { grid-column: 10 / span 3; align-self: end; }

  /* G03 · 50 / 50 */
  .g03a { grid-column: 1 / span 6; }
  .g03b { grid-column: 7 / span 6; }

  /* G04 · image cols 7–10 — the quietest photo on the page */
  .g-sub { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  .g04 .g-open { grid-column: 7 / span 4; grid-row: 1; }

  /* G06 · contact sheet */
  .g06i { grid-column: span 3; }

  /* G07 · offset pair: right one 240px lower, bottom 48px under the left */
  .g07a { grid-column: 1 / span 6; }
  .g07b { grid-column: 8 / span 5; margin-top: 240px; }
  .g07b .g-open { width: fit-content; margin-inline: auto; }
  .g07b .g-frame { height: calc(var(--span6) * 1.25 - 192px); width: calc((var(--span6) * 1.25 - 192px) * 2410 / 5894); }

  /* G09 · 30 / 70, headstock bottom-aligned */
  .g09a { grid-column: 1 / span 4; align-self: end; }
  .g09b { grid-column: 5 / span 8; }

  /* G11 · mirrors G04: image cols 3–6 */
  .g11 .g-open { grid-column: 3 / span 4; grid-row: 1; justify-self: center; }
  .g11 .g-frame { height: calc(var(--span4) * 1.5); width: calc(var(--span4) * 1.5 * 2413 / 5713); }

  /* generic groups for the other series (same proportions as the STAGE-T sequence) */
  .gp-7030 > :nth-child(1) { grid-column: 1 / span 8; }
  .gp-7030 > :nth-child(2) { grid-column: 10 / span 3; align-self: end; }
  .gp-5050 > :nth-child(1) { grid-column: 1 / span 6; }
  .gp-5050 > :nth-child(2) { grid-column: 7 / span 6; }
  .gp-sheet > * { grid-column: span 3; }
  .gp-wide--l > * { grid-column: 1 / span 10; }
  .gp-wide--r > * { grid-column: 3 / span 10; }
  .gp-offset > :nth-child(1) { grid-column: 1 / span 7; }
  .gp-offset > :nth-child(2) { grid-column: 9 / span 4; margin-top: 240px; }
  .gp-trio > * { grid-column: span 4; }
  .gp-trio > :nth-child(2) { margin-top: 120px; }
  .gp-trio > :nth-child(3) { margin-top: 240px; }
  .gp-sub1 .g-open { grid-column: 7 / span 4; grid-row: 1; }
  .g-filmw--tipsy .g-film { grid-column: 3 / span 10; }
  .g-filmw--galaxy .g-film { grid-column: 1 / span 10; }

  /* LIMITED · three equal frames stepping down 120px each (an 8-bit stair); label sits in the space above RE */
  .g-lim-w { align-items: start; }
  .g-lim-h { grid-column: 9 / span 4; grid-row: 1; margin: 0; }
  .g-lim { grid-column: span 4; grid-row: 1; }
  .g-lim[data-color="PK"] { grid-column: 1 / span 4; }
  .g-lim[data-color="PU"] { grid-column: 5 / span 4; margin-top: 120px; }
  .g-lim[data-color="RE"] { grid-column: 9 / span 4; margin-top: 240px; }
}

/* dark-studio frames whose black is not the page black: feather the edges */
.g09a .g-frame { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%); mask-image: linear-gradient(to right, transparent 0, #000 22%); }
.g11 .g-frame, .g07b .g-frame { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 120px); mask-image: linear-gradient(to bottom, transparent 0, #000 120px); }
.g-lim .g-frame {
  /* the limited shots sit on a grey spotlight (their black is #070707, not Stage Black): an ellipse that reaches
     zero at every edge, eased so no plateau edge or ring shows */
  -webkit-mask-image: radial-gradient(closest-side, #000 48%, rgba(0,0,0,0.82) 64%, rgba(0,0,0,0.45) 80%, rgba(0,0,0,0.14) 92%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 48%, rgba(0,0,0,0.82) 64%, rgba(0,0,0,0.45) 80%, rgba(0,0,0,0.14) 92%, transparent 100%);
}
.g-lim-h { color: var(--fg2); }

/* ---------- bands (G05 / G08 / G10 / G12) ---------- */
.g-band { width: 100%; }
.g05 .g-zoom img { object-position: 45% 50%; }

/* ---------- FILMS (G10 STAGE-T band, TIPSY poster tile, GALAXY loop tile) ---------- */
.g-film { position: relative; }
.g-film .g-frame video, .g-film .g-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 400ms var(--ease-out); }
.g-filmw .g-film .g-frame img { object-position: 50% 50%; }
.g-film:hover .g-frame video, .g-film:hover .g-frame img { transform: scale(1.03); }
.g-film__open { position: absolute; inset: 0; z-index: 1; display: block; }
.g-film__open:focus-visible { outline-offset: -4px; }
/* play mark (no text): the tile reads as a film; duration / sound are shown in the player */
.g-film__play {
  position: absolute; left: var(--m); top: 24px; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  color: var(--resin); box-shadow: inset 0 0 0 1px rgba(236, 232, 227, 0.55);
  transition: background-color 240ms var(--ease-out), color 240ms var(--ease-out), box-shadow 240ms var(--ease-out);
}
.g-film__play i { display: block; width: 0; height: 0; margin-left: 3px; border-left: 11px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.g-film__open:hover .g-film__play, .g-film__open:focus-visible .g-film__play { background: var(--resin); color: var(--ink); box-shadow: none; }
.g-film .video-toggle { z-index: 2; right: var(--m); bottom: 24px; }

/* ---------- FUSION · the fronts, every colour side by side (same height, bottoms aligned) ---------- */
.gallery .gp-fronts.g-group { --fh: min(30vw, 520px); display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 16px; }
.gp-fronts > .g-item { flex: none; }
.gp-fronts .g-frame { height: var(--fh); width: auto; background: transparent; }
.gp-fronts > .g-item:nth-child(4) { margin-right: var(--g); }       /* a breath between the guitar and the bass */
@media (max-width: 1279px) {
  .gallery .gp-fronts.g-group { flex-direction: row; align-items: flex-end; --fh: 60vw; overflow-x: auto; justify-content: flex-start; padding-inline: var(--m); scrollbar-width: none; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--m); }
  .gp-fronts::-webkit-scrollbar { display: none; }
  .gp-fronts > .g-item { scroll-snap-align: start; }
}
@media (max-width: 767px) {
  .gallery .gp-fronts.g-group { --fh: 104vw; gap: 12px; }
}

/* ---------- end ---------- */
.g-end { margin-top: var(--s12); padding-bottom: var(--section); text-align: center; }
.g-end__buy { min-width: 304px; }
.g-end__note { margin-top: 32px; }
.g-end__note span { display: inline-block; }
.g-end [hidden] { display: none; }

/* ==========================================================================
   ≤1279 · single-column beat
   ========================================================================== */
@media (max-width: 1279px) {
  .gallery { --beat-full: 80vw; --beat-part: 56vw; --beat-gap: 16px; --gap-l: 128px; --gap-m: 128px; }
  .g-group.grid, .g-group.wrap { display: flex; flex-direction: column; gap: var(--beat-gap); }
  .b-full { width: var(--beat-full); align-self: center; }
  .b-part { width: var(--beat-part); }
  .b-l { align-self: flex-start; }
  .b-r { align-self: flex-end; }

  .g-hero { height: auto; min-height: 0; overflow: hidden; }
  .g-hero__head { padding-bottom: 24px; }
  .g01 { position: relative; top: auto; right: auto; width: 110vw; margin-left: 3vw; }

  .g02b .g-frame, .g03b .g-frame { margin-right: 0; }
  .g07b .g-open, .g11 .g-open { width: fit-content; }
  .g07b .g-frame { height: 90vw; width: calc(90vw * 2410 / 5894); }
  .g07b { padding-right: 12vw; margin-top: -8vw; }
  .g11 { padding-left: 16vw; }
  .g11 .g-frame { height: 96vw; width: calc(96vw * 2413 / 5713); }

  .g05 .g-frame, .g-film .g-frame { aspect-ratio: 16 / 9; }
  .g09a .g-frame { aspect-ratio: 1 / 1; }
  .g09a .g-zoom img { object-position: 50% 40%; }

  /* G06 · the only horizontal scroll on the page */
  .g06.g-group { flex-direction: row; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m); padding-inline: var(--m); scrollbar-width: none; overscroll-behavior-x: contain; }
  .g06::-webkit-scrollbar { display: none; }
  .g06i { flex: 0 0 40vw; scroll-snap-align: start; }

  .g-lim-h { margin-bottom: 16px; }

  /* other series: contact sheets scroll sideways like G06 */
  .gp-sheet.g-group { flex-direction: row; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--m); padding-inline: var(--m); scrollbar-width: none; overscroll-behavior-x: contain; }
  .gp-sheet::-webkit-scrollbar { display: none; }
  .gp-sheet > .g-item { flex: 0 0 40vw; scroll-snap-align: start; }
  .gp-offset > :nth-child(2) { margin-top: -8vw; }
  .gp-sub1 .g-sub { width: 64vw; align-self: flex-end; }
  .g-filmw .g-film { width: var(--beat-full); align-self: center; }
  .g-shead { padding-inline: var(--m); }
  .g-lim-w.g-group { padding-inline: 0; }
  .g-lim-h { padding-inline: var(--m); }
}

@media (max-width: 767px) {
  .gallery { --beat-full: 100vw; --beat-part: 75vw; --gap-l: 64px; --gap-m: 64px; }
  .g-group.wrap { padding-inline: 0; }
  .g01 { width: 134vw; margin-left: 4vw; }
  .g-hero__head { padding-top: calc(var(--header-h) + 32px); }
  .g-kicker.caption { margin-bottom: 12px; }
  .g-count { margin-top: 20px; }
  .g07b .g-frame { height: 110vw; width: calc(110vw * 2410 / 5894); }
  .g07b { padding-right: 14vw; margin-top: 0; }
  .g11 { padding-left: 14vw; }
  .g11 .g-frame { height: 116vw; width: calc(116vw * 2413 / 5713); }
  .g06.g-group, .gp-sheet.g-group { padding-inline: var(--m); }
  .g06i, .gp-sheet > .g-item { flex-basis: 60vw; }
  .gp-offset > :nth-child(2) { margin-top: 0; }
  .gp-sub1 .g-sub { width: 80vw; }
  .g-shead { gap: 8px 24px; }
  .g-shead__models { gap: 0 24px; }
  .g-filter { gap: 0 24px; margin-top: 24px; }
  .g-film__play { left: var(--m); top: 16px; width: 40px; height: 40px; }
  .g-film .video-toggle { right: 16px; bottom: 16px; }
  .g-end__buy { width: 100%; min-width: 0; }
  .g-end { padding-inline: var(--m); }
}

/* ==========================================================================
   Lightbox — 100% Stage Black, counter + close + buy only (no captions), no thumbnails, no dots
   ========================================================================== */
.lb { position: fixed; inset: 0; z-index: 250; color: var(--resin); --lb-pad-x: 48px; --lb-pad-y: 80px; touch-action: pinch-zoom; }
.lb__stage, .lb__nav { touch-action: pinch-zoom; }   /* one-finger pans reach the swipe handler; two-finger pinch stays native */
.lb[hidden] { display: none; }
.lb__bg { position: absolute; inset: 0; background: var(--stage); opacity: 0; transition: opacity var(--d-short) var(--ease-io); }
.lb.is-open .lb__bg { opacity: 1; }
.lb__stage { position: absolute; inset: 0; overflow: hidden; }
.lb__img {
  position: absolute; left: 0; top: 0; max-width: none; transform-origin: 50% 50%; user-select: none; -webkit-user-drag: none;
  will-change: transform, opacity;
}
.lb__img[hidden] { display: none; }
.lb.is-zoomed .lb__img.is-current { cursor: zoom-out; }
.lb__ui { position: absolute; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-inline: var(--lb-pad-x); opacity: 0; transition: opacity var(--d-short) var(--ease-out); }
.lb.is-open .lb__ui { opacity: 1; transition-delay: 320ms; }
.lb.is-closing .lb__ui { opacity: 0; transition-delay: 0s; transition-duration: 160ms; }
.lb__top { top: 0; height: 72px; }
.lb__bottom { bottom: 0; height: 72px; justify-content: flex-end; }
.lb__count { display: inline-flex; align-items: center; gap: 12px; color: var(--resin); }
.lb__close { min-height: 44px; min-width: 44px; font-family: var(--f-display); font-weight: 600; font-size: 15px; letter-spacing: 0.14em; }
.lb__buy { flex: none; }
.lb__buy .btn__jp { font-size: 14px; }
.lb__nav {
  position: absolute; top: 72px; bottom: 72px; z-index: 2; width: 50%; display: flex; align-items: center;
  padding-inline: var(--lb-pad-x); font-family: var(--f-mono); font-size: 13px; color: var(--sand); cursor: pointer;
  opacity: 0; transition: opacity var(--d-short) var(--ease-out);
}
.lb.is-open .lb__nav { opacity: 1; transition-delay: 320ms; }
.lb__nav--prev { left: 0; justify-content: flex-start; }
.lb__nav--next { right: 0; justify-content: flex-end; }
.lb__nav span { transition: transform var(--d-short) var(--ease-out), color var(--d-micro) linear; }
.lb__nav:hover span, .lb__nav:focus-visible span { color: var(--resin); }
.lb__nav--prev:hover span { transform: translateX(-8px); }
.lb__nav--next:hover span { transform: translateX(8px); }
.lb__nav:focus-visible { outline-offset: -8px; }
.lb.is-zoomed .lb__nav { pointer-events: none; opacity: 0; }
@media (max-width: 767px) {
  .lb { --lb-pad-x: 24px; --lb-pad-y: 64px; }
  .lb__top, .lb__bottom { height: 56px; }
  .lb__nav { top: 56px; bottom: 56px; }
  .lb__nav span { display: none; }
  .lb__bottom { justify-content: flex-start; height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
}

/* ---------- film player ---------- */
.fp { position: fixed; inset: 0; z-index: 250; background: var(--stage); color: var(--resin); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--d-short) var(--ease-io); }
.fp[hidden] { display: none; }
.fp.is-open { opacity: 1; }
.fp__top { position: absolute; left: 0; right: 0; top: 0; height: 72px; display: flex; align-items: center; justify-content: space-between; padding-inline: 48px; z-index: 1; }
.fp__info { margin: 0; color: var(--resin); }
.fp__video { width: min(100vw, (100vh - 144px) * 16 / 9); width: min(100vw, (100svh - 144px) * 16 / 9); aspect-ratio: 16 / 9; background: var(--stage); }
@media (max-width: 767px) { .fp__top { padding-inline: 24px; height: 56px; } }

html.g-locked, html.g-locked body { overflow: hidden; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .g-zoom, .g-film .g-frame video { transition: none; transform: none !important; }
  .lb__bg, .lb__ui, .lb__nav, .fp { transition-duration: 200ms !important; transition-delay: 0s !important; }
}

/* ON YOUTUBE — two official-channel videos, 50/50 (click-to-load facade from base.css) */
.gy__head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-bottom: 24px; }
.gy__h { margin: 0; color: var(--fg2); font-weight: 400; }
.gy-a { grid-column: 1 / span 6; }
.gy-b { grid-column: 7 / span 6; }
@media (max-width: 1279px) { .gy-a { grid-column: 1 / span 4; } .gy-b { grid-column: 5 / span 4; } }
@media (max-width: 767px) {
  .gy__head { flex-direction: column; align-items: flex-start; gap: 8px; padding-inline: var(--m); }
  .gy-a, .gy-b { grid-column: 1 / -1; }
  .gy-b { margin-top: 32px; }
}