/* ==========================================================================
   DESIGN / CRAFT — design.css (page layout only; tokens and parts live in base.css)
   A magazine: D00 cover → D01 contents → D02–D09 eight chapters (each a different
   spread) → D10 colophon. Desktop spreads from 1280px (12 columns); below that every
   chapter becomes "image → question → answer" while keeping each image's ratio.
   ========================================================================== */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* column helpers (distance from the wrap's content edge to the start of column n) */
.d-main {
  position: relative; z-index: 0;                       /* own stacking context so the light layer sits above the body ground */
  --step: calc(var(--col) + var(--g));
  --bleed: calc((100vw - var(--wrap)) / 2 + var(--m));   /* wrap content edge → viewport edge */
}

/* ---------- STAGE ↔ BENCH "lighting" -------------------------------------
   No hard cut between dark and paper chapters: the paper ground fades in and out over
   240px (128px on phones) centred on each edge — inside the empty chapter padding, so
   no text or photo ever sits on the in-between tone. Works without JS. */
.d-main { --lamp: min(240px, var(--section-l)); }
.d-main > section.stage { background: transparent; }            /* the body is Stage Black already */
.d-main .d-bench { position: relative; z-index: 0; background: transparent; }
.d-main .d-bench::before {
  content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none;
  top: calc(var(--lamp) / -2); bottom: calc(var(--lamp) / -2);
  background: linear-gradient(to bottom, rgba(236, 232, 227, 0) 0, var(--paper) var(--lamp), var(--paper) calc(100% - var(--lamp)), rgba(236, 232, 227, 0) 100%);
}

/* ---------- shared chapter parts ---------- */
.d-ch { padding-block: calc(var(--section-l) / 2); overflow-x: clip; }
.d-head__no { display: flex; align-items: center; gap: 12px; }
.d-head__no::after { content: ""; width: 24px; height: 1px; background: var(--fg2); }
.d-head__no .t-index { line-height: 1; }
.d-head__title { margin-top: 20px; }
.d-head__title .t-h2 { display: block; white-space: nowrap; }
.d-q { margin-top: var(--s6); word-break: keep-all; word-break: auto-phrase; overflow-wrap: anywhere; }
.d-a { margin-top: var(--s4); }
.d-a .t-body { max-width: 34em; }
/* Japanese answers: break between phrases (Chrome), never start a line with ー / small kana (all browsers) */
.d-a .t-body, .d-toc__ja { line-break: strict; word-break: auto-phrase; }
figure { margin: 0; }

/* feathered edges for dark-studio photos (the only gradients on the page) */
.d-feather {
  --fl: 10%; --fr: 10%; --ft: 10%; --fb: 10%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, #000 var(--fl), #000 calc(100% - var(--fr)), transparent 100%), linear-gradient(to bottom, transparent 0, #000 var(--ft), #000 calc(100% - var(--fb)), transparent 100%);
  mask-composite: intersect;
}

/* "loupe": BENCH macro crops — the 1px crop frame is drawn first, then the photo appears inside it */
.d-loupe { position: relative; }
.d-loupe::before, .d-loupe::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.d-loupe::before { border-block: 1px solid var(--ink); }
.d-loupe::after { border-inline: 1px solid var(--ink); }
html.js .d-loupe::before { transform: scaleX(0); transform-origin: left center; }
html.js .d-loupe::after { transform: scaleY(0); transform-origin: center top; }
html.js .d-loupe img { opacity: 0; }
html.js .d-loupe.is-in::before, html.js .d-loupe.is-in::after { transform: none; transition: transform 480ms var(--ease-out) var(--delay, 0ms); }
html.js .d-loupe.is-in img { opacity: 1; transition: opacity var(--d-mid) var(--ease-out) calc(var(--delay, 0ms) + 400ms); }

/* ======================================================================
   D00 COVER
   ====================================================================== */
.d-cover { position: relative; overflow: clip; }
.d-cover__fig { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.d-cover__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.d-cover__fig {
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 76%, transparent 100%);
}
/* light sweep: a dark veil slides off toward the top right, along the photo's own band of orange light */
.d-cover__sweep { display: none; }
html.js .d-cover__sweep {
  display: block; position: absolute; left: 0; bottom: 0; width: 300%; height: 300%; pointer-events: none;
  background: linear-gradient(to top right, rgba(4, 4, 4, 0) 36%, rgba(4, 4, 4, 0.9) 56%);
  transform: translate(-66.667%, 66.667%); will-change: transform;
}
html.js .d-cover__fig.is-lit .d-cover__sweep { transform: translate(0, 0); transition: transform var(--d-long) var(--ease-out) 120ms; }
.d-cover__grid { position: relative; z-index: 1; padding-top: var(--s4); padding-bottom: var(--s6); }
.d-cover__text { grid-column: 1 / -1; display: flex; flex-direction: column; }
.d-cover__en { margin-top: var(--s3); }
.d-cover__jp { margin-top: var(--s4); word-break: keep-all; word-break: auto-phrase; }
.d-cover__credit { margin-top: var(--s4); font-family: var(--f-jp); text-transform: none; letter-spacing: 0.08em; }

@media (min-width: 1024px) {
  .d-cover { display: flex; min-height: max(100svh, 680px); }
  .d-cover__fig {
    position: absolute; top: 0; bottom: 0; right: 0; aspect-ratio: auto;
    left: calc((100% - var(--wrap)) / 2 + var(--m) + 5 * (var(--col) + var(--g)));
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to bottom, #000 80%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to right, transparent 0, #000 24%), linear-gradient(to bottom, #000 80%, transparent 100%);
    mask-composite: intersect;
  }
  .d-cover__fig img { object-position: 50% 26%; }
  .d-cover__grid { width: 100%; padding-top: calc(var(--header-h) + clamp(24px, 5vh, 56px)); padding-bottom: clamp(32px, 5vh, 56px); }
  .d-cover__text { grid-column: 1 / span 5; }
  .d-cover__en { margin-top: clamp(20px, 3.2vh, 40px); }
  .d-cover__jp { margin-top: clamp(32px, 7vh, 80px); font-size: clamp(44px, 3.9vw, 56px); white-space: nowrap; }
  .d-cover__credit { margin-top: clamp(24px, 5vh, 56px); }
}
@media (min-width: 1280px) {
  .d-cover__text { grid-column: 1 / span 6; }
  .d-cover__fig { left: calc((100% - var(--wrap)) / 2 + var(--m) + 6 * (var(--col) + var(--g))); }
}

/* ======================================================================
   D01 CONTENTS — the page's only navigation
   ====================================================================== */
.d-toc { padding-bottom: var(--section-l); }
.d-toc__title { margin-top: var(--s3); font-family: var(--f-jp); font-weight: 700; font-size: 28px; line-height: 1; letter-spacing: 0.12em; font-feature-settings: "palt"; }
.d-toc__list { margin-top: var(--s4); }
.d-toc__row {
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-items: baseline;
  padding-block: 14px; color: var(--sand); transition: color var(--d-micro) linear;
}
.d-toc__no { position: relative; font-family: var(--f-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; line-height: 1; }
.d-toc__no::before { content: ""; position: absolute; left: -12px; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: var(--lava); opacity: 0; }
.d-toc__name { font-family: var(--f-jp); font-weight: 700; font-size: 20px; line-height: 1.2; letter-spacing: 0.06em; font-feature-settings: "palt"; white-space: nowrap; }
.d-toc__dots { display: none; }
.d-toc__ja { grid-column: 2; font-size: 14px; line-height: 1.6; letter-spacing: 0.05em; word-break: keep-all; }
.d-toc__row:hover, .d-toc__row:focus-visible { color: var(--resin); }
.d-toc__row:hover .d-toc__no::before, .d-toc__row:focus-visible .d-toc__no::before { opacity: 1; }
.d-toc__row:focus-visible { outline-offset: 0; }
@media (min-width: 768px) {
  .d-toc__title { margin-top: var(--s4); font-size: 32px; }
  .d-toc__list { margin-top: var(--s6); }
  .d-toc__row { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: var(--g); align-items: center; height: 64px; padding: 0; }
  .d-toc__no { grid-column: 1; padding-left: calc(var(--col) * 0.6); font-size: 12px; }
  .d-toc__no::before { left: calc(var(--col) * 0.6 - 12px); }
  .d-toc__name { grid-column: 2 / span 2; font-size: 22px; }
  .d-toc__dots { display: block; grid-column: 4 / span 2; height: 0; border-top: 1px dotted rgba(135, 128, 128, 0.5); transform: translateY(4px); }
  .d-toc__ja { grid-column: 6 / span 3; font-size: 15px; }
}
@media (min-width: 1280px) {
  .d-toc__name { grid-column: 3 / span 3; }
  .d-toc__dots { grid-column: 6 / span 4; }
  .d-toc__ja { grid-column: 10 / span 3; }
}

/* ======================================================================
   Chapters — mobile / tablet: image → head → question → answer → small image
   ====================================================================== */
:where(.d-ch .grid) > * { grid-column: 1 / -1; }
:where(.d-ch .grid > figure:not([class*="__sub"]):not(.d-body__back)) { order: -1; }
.d-text { margin-top: var(--s6); max-width: 600px; }
.d-body__back, .d-neck__sub, .d-joint__sub, .d-finish__sub { margin-top: var(--s8); }   /* beats the figure reset */
:where(.d-ch figure[class*="__sub"]) { grid-column: 1 / span 3; }
.d-joint__sub { grid-column: 1 / span 2; }

/* D02 THE BODY — full-bleed 16:9, then a 5 / 7 split below */
.d-body { padding-top: 0; }
.d-body__hero { display: flex; flex-direction: column; }
.d-body__headwrap { order: 2; margin-top: var(--s6); }
.d-body__img { aspect-ratio: 16 / 9; }
.d-body__img img { width: 100%; height: 100%; object-fit: cover; }
.d-body__grid { margin-top: 0; }
.d-body__q { margin-top: var(--s6); }
.d-body__a { margin-top: var(--s4); }
.d-body__back .fig__img { aspect-ratio: 3862 / 1517; }
.d-body__back .d-feather { --fl: 22%; --fr: 0%; --ft: 0%; --fb: 0%; }

/* D03 THE NECK (BENCH) */
.d-neck__main .fig__img, .d-neck__sub .fig__img { background: #fff; }

/* D06 THE BRIDGE — flush to the top of its section, single-side bleed */
.d-bridge { padding-top: calc(var(--lamp) / 2); }
.d-bridge__main { margin-inline: calc(-1 * var(--m)); }
.d-bridge__main .d-feather { --fl: 0%; --fr: 0%; --ft: 0%; --fb: 14%; }

/* D08 THE FINISH */
.d-finish__main { margin-inline: calc(-1 * var(--m)); }
.d-finish__main .d-feather { --fl: 0%; --fr: 0%; --ft: 6%; --fb: 12%; }

/* D04 THE JOINT */
.d-joint__main .d-feather { --fl: 8%; --fr: 8%; --ft: 8%; --fb: 10%; }

/* D09 THE CASE — 21:9 dark band above (velvet + embroidered logo), paper plinth below (latch + handle detail, 3 rows, link to spec.html#case) */
.d-case { display: flex; flex-direction: column; }
.d-case__band { order: -1; }
.d-case__band .fig__img { aspect-ratio: 4 / 3; }
.d-case__band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.d-case__band .d-feather { --fl: 0%; --fr: 0%; --ft: 12%; --fb: 14%; }
.d-case__grid { margin-top: var(--s6); }
.d-case__text { max-width: 600px; }
.d-case__text .d-q { margin-top: var(--s6); }
.d-plinth { margin-top: var(--s8); padding: var(--s3); }
.d-plinth__img { mix-blend-mode: multiply; }       /* the white seamless ground becomes the paper; the black case stays black */
.d-plinth__img img { width: 100%; height: auto; }
.d-plinth__spec { margin-top: var(--s6); }
.d-plinth__more { margin-top: var(--s3); }
.d-dt { display: contents; }
.d-plinth .spec-row__value { font-size: 15px; }
.d-plinth .spec-row__label .ja { font-size: 13px; letter-spacing: 0.08em; }

@media (min-width: 768px) {
  :where(.d-ch figure[class*="__sub"]) { grid-column: 1 / span 4; }
  .d-case__band .fig__img { aspect-ratio: 21 / 9; }
  .d-case__band .d-feather { --fl: 8%; }
  .d-plinth { padding: var(--s6); }
  .d-plinth .spec-row__value { font-size: 17px; }
  .d-joint__main, .d-control__main, .d-pickup__main { grid-column: 1 / span 6; }
}

/* ======================================================================
   Desktop spreads (12 columns)
   ====================================================================== */
@media (min-width: 1280px) {
  :where(.d-ch .grid) > * { order: 0; }
  .d-text { margin-top: 0; max-width: none; }
  .d-body__back, .d-neck__sub, .d-joint__sub, .d-finish__sub { margin-top: 0; }

  /* D02 THE BODY — head sits in the black of the photo, top left */
  .d-body__hero { display: block; position: relative; }
  .d-body__headwrap { position: absolute; top: 0; left: 0; right: 0; z-index: 2; margin-top: 0; padding-top: var(--s8); pointer-events: none; }
  .d-body__grid { margin-top: var(--s12); grid-template-rows: auto auto; }
  .d-body__q { grid-column: 1 / span 7; grid-row: 1; margin-top: 0; }
  .d-body__a { grid-column: 1 / span 5; grid-row: 2; }
  .d-body__back { grid-column: 7 / span 6; grid-row: 1 / span 2; align-self: end; }

  /* D03 THE NECK — 70 / 30, main crop left, text + second image right */
  .d-neck__grid { grid-template-rows: auto 1fr; }
  .d-neck__main { grid-column: 1 / span 8; grid-row: 1 / span 2; }
  .d-neck__text { grid-column: 9 / span 4; grid-row: 1; padding-left: var(--s6); }
  .d-neck__sub { grid-column: 9 / span 4; grid-row: 2; align-self: end; padding-left: var(--s6); margin-top: var(--s6); }

  /* D04 THE JOINT — tall image cols 2–6, 7–8 left empty, text pressed low in 9–12, small image top right */
  .d-joint__grid { grid-template-rows: auto 1fr; }
  .d-joint__main { grid-column: 2 / span 5; grid-row: 1 / span 2; }
  .d-joint__sub { grid-column: 11 / span 2; grid-row: 1; align-self: start; }
  .d-joint__text { grid-column: 9 / span 4; grid-row: 2; align-self: end; padding-top: var(--s12); }

  /* D05 THE PICKUP — 50 / 50 */
  .d-pickup__main { grid-column: 1 / span 6; grid-row: 1; }
  .d-pickup__text { grid-column: 8 / span 4; grid-row: 1; align-self: center; }

  /* D06 THE BRIDGE — one image, 7 columns, flush to the top and bleeding right; text in 1–5 */
  .d-bridge__main { grid-column: 6 / -1; grid-row: 1; margin-inline: 0 calc(-1 * var(--bleed)); }
  .d-bridge__main .d-feather { --fl: 14%; --fb: 14%; }
  .d-bridge__text { grid-column: 1 / span 5; grid-row: 1; align-self: end; padding-bottom: 40px; }
  .d-bridge__text .d-a { max-width: calc(4 * var(--col) + 3 * var(--g)); }

  /* D07 THE CONTROL — 4:5 in five columns right of centre; text 1–4 */
  .d-control__main { grid-column: 7 / span 5; grid-row: 1; }
  .d-control__text { grid-column: 1 / span 4; grid-row: 1; align-self: center; }

  /* D08 THE FINISH — large 4:5 bleeding left, text right, a 1:1 detail stepped down below */
  .d-finish__grid { grid-template-rows: auto auto; }
  .d-finish__main { grid-column: 1 / span 6; grid-row: 1; margin-inline: calc(-1 * var(--bleed)) 0; }
  .d-finish__main .d-feather { --fr: 14%; }
  .d-finish__text { grid-column: 8 / span 5; grid-row: 1; align-self: start; padding-top: var(--s16); }
  .d-finish__text .d-a { max-width: calc(4 * var(--col) + 3 * var(--g)); }
  .d-finish__sub { grid-column: 6 / span 3; grid-row: 2; margin-top: var(--s8); }

  /* D09 THE CASE */
  .d-case { display: block; }
  .d-case__grid { margin-top: 0; }
  .d-case__head { grid-column: 1 / span 6; }
  .d-case__text { grid-column: 7 / span 5; max-width: none; padding-top: 56px; }
  .d-case__text .d-q { margin-top: 0; }
  .d-case__band { margin-top: var(--s12); }
  .d-case__band .d-feather { --fl: 0%; --ft: 16%; --fb: 16%; }
  .d-plinth { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--g); align-items: center; margin-top: var(--s12); padding: var(--s12) 0; }
  .d-plinth__fig { grid-column: 2 / span 6; }
  .d-plinth__spec { grid-column: 8 / span 4; margin-top: 0; }
  .d-plinth .spec-row { grid-template-columns: 32px 150px minmax(0, 1fr); }
}

/* ======================================================================
   D10 COLOPHON + CTA
   ====================================================================== */
.d-colophon { padding-top: calc(var(--section-l) / 2); padding-bottom: var(--section); }
.d-colophon__grid { margin-top: var(--s6); row-gap: 0; }
.d-colophon__grid > * { grid-column: 1 / -1; }
.d-colophon__label { color: var(--fg2); font-family: var(--f-jp); letter-spacing: 0.16em; }
.d-colophon__list { margin-top: var(--s4); font-family: var(--f-mono); font-size: 12px; line-height: 1.6; letter-spacing: 0.08em; }
.d-colophon__list > div { display: grid; grid-template-columns: 1fr; gap: 4px; padding-block: 12px; }
.d-colophon__list dt { color: var(--fg2); font-family: var(--f-jp); letter-spacing: 0.1em; }
.d-colophon__list dd { color: var(--resin); }
.d-colophon__colors { display: grid; gap: 6px; }
.d-colophon__colors li { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; }
.d-colophon__colors .swatch { width: 12px; height: 12px; }
.d-colophon__code { color: var(--fg2); min-width: 8ch; }
.d-colophon__colors em { flex-basis: 100%; padding-left: 24px; font-family: var(--f-jp); font-style: normal; font-size: 11px; color: var(--fg2); }
@media (min-width: 768px) {       /* one aligned table: swatch / code / name / edition */
  .d-colophon__colors { grid-template-columns: 12px max-content max-content 1fr; align-items: center; gap: 6px 16px; }
  .d-colophon__colors li { display: contents; }
  .d-colophon__colors .swatch { grid-column: 1; }
  .d-colophon__code { grid-column: 2; }
  .d-colophon__colors li > span[lang] { grid-column: 3; }
  .d-colophon__colors em { grid-column: 4; flex-basis: auto; padding-left: 16px; }
}
.d-colophon__cta { margin-top: var(--s12); display: flex; flex-direction: column-reverse; align-items: flex-start; gap: var(--s4); }
.d-colophon__cta .btn { width: 100%; }
@media (min-width: 768px) {
  .d-colophon__label { grid-column: 1 / span 2; }
  .d-colophon__list, .d-colophon__cta { grid-column: 3 / -1; }
  .d-colophon__list { margin-top: 0; }
  .d-colophon__list > div { grid-template-columns: 200px 1fr; gap: 24px; padding-block: 8px; }
  .d-colophon__label { padding-top: 8px; }
  .d-colophon__cta { flex-direction: row; justify-content: space-between; align-items: center; }
  .d-colophon__cta .btn { width: auto; }
}
@media (min-width: 1280px) {
  .d-colophon__label { grid-column: 1 / span 3; }
  .d-colophon__list { grid-column: 4 / span 7; }
  .d-colophon__list > div { grid-template-columns: calc(3 * var(--col) + 2 * var(--g)) 1fr; gap: var(--g); }
  .d-colophon__cta { grid-column: 4 / -1; }
}

/* ---------- reduced motion: no sweep, no drawn frames ---------- */
@media (prefers-reduced-motion: reduce) {
  html.js .d-cover__sweep { display: none; }
  html.js .d-loupe::before, html.js .d-loupe::after { transform: none; }
  html.js .d-loupe img { opacity: 1; transition: none; }
}