/* Layout: the black box, opened. Dark hatched packaging bands hold the figure, the buy box and the story;
   a white paper band in the middle is the booklet (close-ups, the finished views, the guide). Text left-aligned, the figure centred. */
@font-face { font-family: "Arimo"; src: url("/fonts/LiberationSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Arimo"; src: url("/fonts/LiberationSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("/fonts/Lora-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("/fonts/Lora-Italic-Variable.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
:root {
  color-scheme: dark;
  --surface: #0d0d0d; --surface-raised: #262626; --hatch: #232323;
  --line: #3a3a3a; --line-strong: #8a8378;
  --ink: #e8e0d4; --ink-2: #b8b0a4; --ink-muted: #8a8378;
  --gold: #c9a84c; --gold-ink: #ecbc44; --gold-deep: #a8842e; --on-gold: #1f1d1b;
  --copper: #c8642a; --focus: #c9a84c; --danger: #ff2a2a;
  --paint-206: #161618; --paint-207: #f2f0eb; --paint-305: #c6cad4; --paint-456: #98623a; --paint-205: #583a26; --paint-201: #c42026;
  --paint-200: #f6c414; --paint-453: #545c3a; --paint-457: #8e8e8c; --paint-102: #1e5fc8; --paint-105: #6e3c19; --paint-106: #0a0a0c;
  --font-display: Arimo, "Liberation Sans", Arial, Helvetica, "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-lore: Lora, Georgia, "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --font-sans: Arimo, "Liberation Sans", Arial, Helvetica, "Noto Sans JP", "Hiragino Sans", sans-serif;
  --gutter-l: max(16px, env(safe-area-inset-left, 0px)); --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --content-max: 1200px; --measure: 62ch;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --r-sm: 6px; --r-full: 999px;
}
[data-theme="paper"] {
  color-scheme: light;
  --surface: #ffffff; --surface-raised: #f4f0e8; --hatch: #ffffff;
  --line: #d9d2c3; --line-strong: #4a4541;
  --ink: #1f1d1b; --ink-2: #4a4541; --ink-muted: #7a736a;
  --gold-ink: #866822; --focus: #866822; --danger: #c42026;
}
* { box-sizing: border-box; }
/* The `hidden` attribute must beat any component's own `display` (e.g. .drawer is
   display:grid). Without this, [hidden] loses the cascade and the element — the cart
   drawer — stays painted open and the close button appears dead. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--copper); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- type ---- */
.display-xl { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4.6vw, 58px); line-height: 1.05; letter-spacing: 0.06em; text-transform: uppercase; }
.heading { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; text-wrap: balance; }
.title { font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.25; letter-spacing: 0; }
.numeral { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1; }
.price { font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.subtitle { font-family: var(--font-lore); font-style: italic; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.3; }
.lore { font-family: var(--font-lore); font-style: italic; font-size: 18px; line-height: 1.65; }
.caption { font-family: var(--font-lore); font-style: italic; font-size: 14px; line-height: 1.45; }
.body { font-size: 16px; line-height: 1.6; }
.body-sm { font-size: 14px; line-height: 1.5; }
.eyebrow { font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: 0.32em; text-transform: uppercase; }
.label { font-weight: 700; font-size: 13px; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; }
.meta { font-size: 13px; line-height: 1.4; }
.chip-number { font-weight: 700; font-size: 14px; line-height: 1; }
:lang(ja) .subtitle, :lang(ja) .lore, :lang(ja) .caption { font-style: normal; }
:lang(ja) .display-xl, :lang(ja) .heading { letter-spacing: 0.08em; }
:lang(ja) .body, :lang(ja) .body-sm, :lang(ja) .lore { line-height: 1.8; }

/* ---- bands and texture ---- */
.band { padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-block: var(--s8); }
.band--tight { padding-block: var(--s7); }
.hatch { background-color: var(--surface); background-image: repeating-linear-gradient(-45deg, var(--hatch) 0 1px, transparent 1px 11px); }
.paper { background: var(--surface); color: var(--ink); }
.wrap { max-width: var(--content-max); margin: 0 auto; }

/* ---- ornament ---- */
.divider { display: flex; align-items: center; gap: var(--s1); color: var(--gold); width: 100%; max-width: 420px; }
.divider__line { flex: 1; height: 1px; background: currentColor; }
.divider__line--in { background: linear-gradient(90deg, transparent, currentColor); }
.divider__line--out { background: linear-gradient(90deg, currentColor, transparent); }
.divider__diamond { width: 8px; height: 8px; transform: rotate(45deg); background: currentColor; flex: none; }
.divider__diamond--open { width: 10px; height: 10px; background: var(--surface); border: 1.5px solid currentColor; }
.divider--left { max-width: 280px; }
.divider--left .divider__diamond { width: 10px; height: 10px; }
.section-head { display: grid; gap: var(--s3); margin-bottom: var(--s6); }
.section-head h2 { margin: 0; color: var(--gold-ink); }
.section-head p { margin: 0; color: var(--ink-2); max-width: var(--measure); }
.frame { position: relative; }
.frame::before, .frame::after {
  content: ""; position: absolute; width: 96px; height: 96px; pointer-events: none; border: 0 solid var(--gold);
  background-repeat: no-repeat; background-image: linear-gradient(var(--line-strong), var(--line-strong)), linear-gradient(var(--line-strong), var(--line-strong));
  background-size: 72px 1px, 1px 72px;
}
.frame::before { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; background-position: 12px 12px, 12px 12px; }
.frame::after { right: 0; bottom: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; background-position: right 12px bottom 12px, right 12px bottom 12px; }

/* ---- masthead ---- */
.mast { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(13, 13, 13, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.mast__in { max-width: var(--content-max); margin: 0 auto; display: flex; align-items: center; gap: var(--s5); min-height: 64px; }
.brand { display: flex; align-items: center; gap: var(--s3); text-decoration: none; flex: none; }
.brand img.knot { width: 34px; height: auto; }
.brand img.word { width: 118px; height: auto; }
.nav { display: flex; gap: var(--s5); margin-left: var(--s4); flex-wrap: nowrap; white-space: nowrap; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 14px; letter-spacing: 0.04em; }
.nav a:hover { color: var(--gold-ink); }
.mast__tools { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.lang a { background: transparent; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; color: var(--ink-2); font-size: 13px; letter-spacing: 0.06em; text-decoration: none; }
.lang a[aria-current="true"] { background: var(--surface-raised); color: var(--ink); }
.cartbtn { display: inline-flex; align-items: center; gap: var(--s2); background: transparent; border: 1px solid var(--gold-ink); color: var(--gold-ink); border-radius: var(--r-sm); min-height: 40px; padding: 0 14px; cursor: pointer; font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.cartbtn:hover { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.cartbtn svg { width: 18px; height: 18px; }
.cartbtn .count { font-variant-numeric: tabular-nums; }
@media (max-width: 820px) { .nav { display: none; } }
@media (max-width: 760px) { .brand img.word { display: none; } }
/* Mobile header fit: the 6-language switch + full "Cart" label overflowed a
   phone (~545px on a 390 viewport), which forced a page-wide horizontal scroll
   and clipped the cart button. Compact the tools so the whole header fits one
   row: tighter language chips + cart as icon/count only (the word "Cart" stays
   in the DOM, visually hidden, so screen readers keep the label). */
@media (max-width: 760px) {
  .mast__tools { gap: var(--s2); min-width: 0; }
  .lang a { padding: 0 7px; font-size: 11px; min-height: 40px; letter-spacing: 0.04em; }
  .cartbtn { padding: 0 11px; }
  .cartbtn > span[data-i18n="cart.button"] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
}

/* ---- hero ---- */
.hero { padding-block: var(--s7) var(--s8); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "stage text" "stage buy"; column-gap: var(--s7); row-gap: var(--s5); align-items: start; }
.hero__stage { grid-area: stage; position: relative; padding: var(--s6); min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: var(--s5); }
.hero__figure { max-width: 100%; height: auto; }
.hero__gallery { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: auto; }
@media (max-width: 520px) { .hero__gallery { grid-template-columns: repeat(2, 1fr); } }
.hero__stage img { width: min(100%, 720px); height: auto; }
.hero__text { grid-area: text; display: grid; gap: var(--s3); }
.hero__text .eyebrow { color: var(--copper); margin: 0; }
.hero__text h1 { margin: 0; color: var(--gold-ink); text-wrap: balance; }
.hero__text .subtitle { margin: 0; color: var(--gold-ink); }
.hero__text .divider { margin: var(--s2) 0 var(--s3); }
.hero__lede { margin: 0; color: var(--ink); max-width: var(--measure); }
.hero__meta { margin: 0; color: var(--ink-muted); }
/* Purchase column: stacks the in-column edition band above the buybox card. */
.hero__buy { grid-area: buy; display: grid; gap: var(--s5); align-content: start; }
.reveal { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { animation: rise 900ms cubic-bezier(.2,.7,.2,1) both; }
  .reveal--late { animation-delay: 180ms; }
  @keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
@media (max-width: 960px) { .hero__grid { grid-template-columns: 1fr; grid-template-areas: "text" "stage" "buy"; } .hero__stage { min-height: 0; padding: var(--s5); } }

/* ---- hero "handcrafted" ink stamp ---- */
/* A diagonal double-ring rubber stamp in the top-left of the stage, over the art but
   clear of the figure (centred lower). Gold/ember ink, ~0.8 opacity so it reads as a
   mark, not a sticker. Pure CSS: two rings via box-shadow, rotated label inside. */
.stamp {
  /* Nudged down + right off the gold top-left corner bracket (which draws ~72px from a
     12px inset) into the open dark negative space, so the seal no longer collides with
     the frame ornament. Size/rotation unchanged. */
  position: absolute; top: var(--s7); left: var(--s6); z-index: 2;
  display: block;
  width: 112px; height: 112px;
  opacity: 1; pointer-events: none;
  transform: rotate(-12deg);
}
.stamp img { display: block; width: 100%; height: 100%; object-fit: contain; max-width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .stamp { animation: stamp-in 700ms cubic-bezier(.2,.7,.2,1) both; animation-delay: 420ms; }
  @keyframes stamp-in { from { opacity: 0; transform: rotate(-12deg) scale(1.35); } to { opacity: 1; transform: rotate(-12deg) scale(1); } }
}
/* Smaller stages: shrink the seal and tuck it in so it never crowds the figure. */
@media (max-width: 960px) { .stamp { width: 92px; height: 92px; } }
@media (max-width: 520px) { .stamp { width: 78px; height: 78px; top: var(--s5); left: var(--s4); } }

/* ---- buy box ---- */
.buybox { background: var(--surface-raised); border-radius: var(--r-sm); padding: var(--s5); display: grid; gap: var(--s4); }
.buybox__price { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.buybox__vat { color: var(--ink-2); }
.buybox fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.buybox legend { padding: 0; color: var(--ink-2); margin-bottom: var(--s2); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice__box { display: grid; grid-template-columns: 1fr auto; gap: var(--s1) var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); }
.choice__box:hover { border-color: var(--line-strong); }
.choice input:checked + .choice__box { border-color: var(--gold-ink); box-shadow: inset 0 0 0 1px var(--gold-ink); }
.choice input:focus-visible + .choice__box { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice__name { font-weight: 700; }
.choice__price { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.choice__note { grid-column: 1 / -1; color: var(--ink-2); }
.choice__brands { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin-top: var(--s1); color: var(--ink-muted); }
.choice__brands svg { height: 20px; width: auto; display: block; }
.choice__brands-caption { font-variant-numeric: normal; }
.pay-methods { border: 0; margin: 0; padding: 0; min-inline-size: 0; display: grid; gap: var(--s3); }
.pay-methods legend { padding: 0; margin-bottom: var(--s2); }
.qtyrow { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s4); }
.qtyrow .label { color: var(--ink-2); }
.qty { display: inline-grid; grid-template-columns: 44px 56px 44px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); justify-self: start; }
.qty__btn { all: unset; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 46px; color: var(--ink); cursor: pointer; font-size: 18px; border-radius: var(--r-sm); }
.qty__btn:hover { color: var(--gold-ink); }
.qty__btn[disabled] { color: var(--ink-muted); cursor: not-allowed; }
.qty__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
.qty__input { all: unset; text-align: center; color: var(--ink); font-size: 16px; width: 56px; height: 46px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; padding: 0 var(--s5); border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; text-align: center; font-weight: 700; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
.btn--primary { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.btn--primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.btn--secondary { background: transparent; color: var(--gold-ink); border-color: var(--gold-ink); }
.btn--secondary:hover { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.btn--quiet { background: transparent; color: var(--ink); padding: 0 var(--s3); min-height: 40px; }
.btn--quiet:hover { color: var(--copper); text-decoration: underline; text-underline-offset: 4px; }
.btn--block { display: flex; width: 100%; }
.btn[disabled] { background: var(--surface-raised); color: var(--ink-muted); border-color: var(--line); cursor: not-allowed; }
.notes { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; color: var(--ink-2); }
.notes li { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); align-items: baseline; }
.notes li::before { content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); align-self: center; }
.trust { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: 0; padding: 0; list-style: none; color: var(--ink-2); }
.trust li { display: inline-flex; align-items: center; gap: var(--s2); }
.trust li::before { content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.buybox__meta { margin: 0; color: var(--ink-2); text-align: center; border-top: 1px solid var(--line); padding-top: var(--s3); }
.season { margin: 0; color: var(--gold-ink); }

/* ---- pre-launch countdown ---- */
.launch { display: grid; gap: var(--s3); justify-items: center; text-align: center; padding: var(--s5) var(--s4); border: 1px solid var(--gold-ink); border-radius: var(--r-sm); background: var(--surface); }
.launch__eyebrow { margin: 0; color: var(--gold-ink); }
.launch__timer { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s4); }
.launch__unit { display: grid; gap: var(--s1); min-width: 64px; }
.launch__num { color: var(--ink); font-variant-numeric: tabular-nums; }
.launch__lbl { color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.08em; }
.launch__note { margin: 0; color: var(--ink-2); }
.launch__live { margin: 0; color: var(--gold-ink); }
@media (max-width: 420px) { .launch__timer { gap: var(--s3); } .launch__unit { min-width: 56px; } .launch__num { font-size: 28px; } }

/* ---- edition scarcity (standalone band) ---- */
/* A premium gold-framed display between the hero and the showcase. Mirrors the
   .launch framed treatment. Two variants keyed off body.sales-closed (toggled by
   launch.js): OPEN -> big live "N of 100" count + gold progress bar, filled by
   public/js/scarcity.js from GET /api/stock (revealed only on a successful fetch);
   CLOSED -> static headline + "limited to 100" line, no number, no bar.
   Brand rule: the NUMBER sits in --ink, never gold; gold is only the frame, dot and bar. */
.scarce { display: grid; gap: var(--s4); justify-items: center; text-align: center;
  max-width: 560px; margin: 0 auto; padding: var(--s6) var(--s5);
  border: 1px solid var(--gold-ink); border-radius: var(--r-sm); background: var(--surface); }
.scarce__head { margin: 0; color: var(--gold-ink); }
.scarce__sub { margin: 0; color: var(--ink-2); }
/* Live count — hidden until scarcity.js confirms stock; number in --ink, tabular. */
.scarce__count { margin: 0; color: var(--ink-2); display: flex; align-items: center; justify-content: center; gap: var(--s3); min-height: 40px; }
.scarce__count::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-full); background: var(--gold-ink); flex: 0 0 auto; }
.scarce__num { color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; }
/* Progress bar: muted track reserves height (no layout shift), gold fill width set by JS. */
.scarce__bar { width: 100%; max-width: 360px; height: 8px; border-radius: var(--r-full);
  background: var(--surface-raised); overflow: hidden; }
.scarce__fill { display: block; height: 100%; width: 0; border-radius: var(--r-full);
  background: var(--gold); transition: width 600ms cubic-bezier(.2,.7,.2,1); }
.scarce__closed { margin: 0; color: var(--ink-2); }
/* Open shop: show the live count + bar, hide the static closed line. The live region
   and bar also carry [hidden] until scarcity.js confirms stock, so a failed fetch
   shows only the headline + subline (no broken/zero state). */
.scarce__closed { display: none; }
/* Closed shop: launch.js sets body.sales-closed — show the static line, drop count + bar. */
body.sales-closed .scarce__count,
body.sales-closed .scarce__bar { display: none; }
body.sales-closed .scarce__closed { display: block; }
@media (max-width: 420px) { .scarce { padding: var(--s5) var(--s4); } .scarce__num { font-size: 28px; } }
/* In-column variant: the band sits at the top of the purchase column, directly above
   the buybox card. Full column width (no 560px cap / auto-centre), a touch more compact
   vertically than the standalone band, but keeps the gold frame, diamond divider, live
   count (number in --ink, tabular) and gold bar. */
.scarce--col { max-width: none; margin: 0; padding: var(--s5); gap: var(--s3); }
.scarce--col .scarce__num { font-size: 30px; }

/* ---- why ---- */
.why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) var(--s7); }
.why h3 { margin: 0 0 var(--s2); color: var(--ink); }
.why p { margin: 0; color: var(--ink-2); }
@media (max-width: 860px) { .why { grid-template-columns: 1fr; max-width: 560px; } }

/* ---- colours ---- */
.swatch-row { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s5); margin-bottom: var(--s6); }
.swatch { display: inline-flex; flex-direction: column; align-items: center; gap: var(--s1); color: var(--ink-2); }
.chip { display: inline-block; width: 18px; height: 18px; border-radius: var(--r-full); background: var(--chip); border: 1px solid var(--line-strong); flex: none; }
.swatch .chip { width: 32px; height: 32px; }
.chip--lg { width: 28px; height: 28px; }
.paint-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.paint-row { display: grid; grid-template-columns: 28px 1fr auto; column-gap: var(--s3); align-items: center; background: var(--surface-raised); border-radius: var(--r-sm); padding: var(--s2) var(--s3); min-height: 56px; }
.paint-row__name { color: var(--ink); min-width: 0; }
.paint-row__name b { color: var(--ink); margin-right: var(--s2); }
.paint-row__use { grid-column: 2; color: var(--ink-2); min-width: 0; }
.paint-row__kind { grid-column: 3; grid-row: 1 / span 2; color: var(--ink-2); white-space: nowrap; }
.paint-foot { margin: var(--s5) 0 0; color: var(--ink-muted); }
@media (max-width: 1000px) { .paint-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .paint-list { grid-template-columns: 1fr; } .paint-row__kind { display: none; } }

/* ---- paper band: details, gallery, guide ---- */
.details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s8); }
.details figure { margin: 0; display: grid; gap: var(--s2); }
.details img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.details figcaption { color: var(--ink-2); }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); align-items: end; }
.gallery figure { margin: 0; display: grid; gap: var(--s2); }
.gallery img { width: 100%; height: auto; }
.gallery figcaption { color: var(--ink-muted); }
.gallery-caption { margin: var(--s5) 0 0; color: var(--ink-2); }
@media (max-width: 760px) { .gallery, .details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide { margin-top: var(--s9); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s6); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; max-width: 560px; } }

/* =====================================================================
   PAINTING GUIDE — 3D spine-fold flipbook (pure CSS, radio-driven, no JS)
   Mechanism pinned to freefrontend css-book-effects #3, reskinned to the
   Surrealm design system. Each leaf is ONE open step-spread (photo left,
   text right) hinged at the spine; a checked radio swings the leaves that
   come before it to the left in 3D (rotateY(-180deg)), revealing its own
   spread on top of the right stack. 10 steps = 10 leaves + 10 radios.
   Tokens only; no ad-hoc colour/shadow/gradient outside --* and rgba()
   layered over the ink token for paper grain (same technique as before).
   ===================================================================== */

/* ---- the step selector: a radio group styled as a page rail ----
   Real <input type=radio> (visually hidden) + <label> markers; the labels are
   44px touch targets and announce "Step N / 10". This both DRIVES the flip
   (CSS :checked chains, no JS) and gives an accessible, keyboard-operable
   control (arrow keys move between radios natively; label click/tap selects). */
.stepper { border: 0; margin-top: var(--s8); padding: 0; min-inline-size: 0; }
.stepper__legend { padding: 0; margin: 0 0 var(--s4); color: var(--ink-muted); }
.stepper__rail { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0; padding: 0; }
/* the native radios are direct children of the .stepper fieldset, before the rail
   and .pages (see markup); they DRIVE the flip and the marker states. Visually
   hidden but focusable/operable — the rail <label>s point at them via for=. */
.stepper__radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.stepper__marker { position: relative; display: grid; justify-items: center; gap: var(--s2); padding: var(--s2) 0 var(--s1); min-height: 44px; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; }
/* connecting line through the node centres (node is 36px tall → centre at 18px) */
.stepper__marker::before { content: ""; position: absolute; top: calc(var(--s2) + 17px); left: 50%; width: 100%; height: 1px; background: var(--line); z-index: 0; }
.stepper__marker:last-child::before { display: none; }
.stepper__marker .step__badge { position: relative; z-index: 1; background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--ink-2); transition: background .15s ease, color .15s ease, border-color .15s ease; }
.stepper__marker-label { color: var(--ink-muted); white-space: nowrap; }
.stepper__marker:hover .step__badge { border-color: var(--gold); color: var(--ink); }
/* CURRENT marker: #rN:checked ~ .stepper__rail .stepper__marker:nth-of-type(N).
   DONE markers (1..N-1): nth-of-type(-n+{N-1}) → badge + connector fill gold.
   Hand-written equivalent of the leaf trigger chains, keyed to the same radios. */
#r1:checked  ~ .stepper__rail .stepper__marker:nth-of-type(1),
#r2:checked  ~ .stepper__rail .stepper__marker:nth-of-type(2),
#r3:checked  ~ .stepper__rail .stepper__marker:nth-of-type(3),
#r4:checked  ~ .stepper__rail .stepper__marker:nth-of-type(4),
#r5:checked  ~ .stepper__rail .stepper__marker:nth-of-type(5),
#r6:checked  ~ .stepper__rail .stepper__marker:nth-of-type(6),
#r7:checked  ~ .stepper__rail .stepper__marker:nth-of-type(7),
#r8:checked  ~ .stepper__rail .stepper__marker:nth-of-type(8),
#r9:checked  ~ .stepper__rail .stepper__marker:nth-of-type(9),
#r10:checked ~ .stepper__rail .stepper__marker:nth-of-type(10) { }
#r1:checked  ~ .stepper__rail .stepper__marker:nth-of-type(1)  .step__badge,
#r2:checked  ~ .stepper__rail .stepper__marker:nth-of-type(2)  .step__badge,
#r3:checked  ~ .stepper__rail .stepper__marker:nth-of-type(3)  .step__badge,
#r4:checked  ~ .stepper__rail .stepper__marker:nth-of-type(4)  .step__badge,
#r5:checked  ~ .stepper__rail .stepper__marker:nth-of-type(5)  .step__badge,
#r6:checked  ~ .stepper__rail .stepper__marker:nth-of-type(6)  .step__badge,
#r7:checked  ~ .stepper__rail .stepper__marker:nth-of-type(7)  .step__badge,
#r8:checked  ~ .stepper__rail .stepper__marker:nth-of-type(8)  .step__badge,
#r9:checked  ~ .stepper__rail .stepper__marker:nth-of-type(9)  .step__badge,
#r10:checked ~ .stepper__rail .stepper__marker:nth-of-type(10) .step__badge {
  border-color: var(--gold-ink); border-width: 2px; color: var(--gold-ink); background: var(--surface);
}
/* DONE: every marker BEFORE the current one — gold badge + gold connector line. */
#r2:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+1) .step__badge,
#r3:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+2) .step__badge,
#r4:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+3) .step__badge,
#r5:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+4) .step__badge,
#r6:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+5) .step__badge,
#r7:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+6) .step__badge,
#r8:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+7) .step__badge,
#r9:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+8) .step__badge,
#r10:checked ~ .stepper__rail .stepper__marker:nth-of-type(-n+9) .step__badge {
  background: var(--gold); border-color: var(--gold); color: var(--on-gold);
}
#r2:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+1)::before,
#r3:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+2)::before,
#r4:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+3)::before,
#r5:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+4)::before,
#r6:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+5)::before,
#r7:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+6)::before,
#r8:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+7)::before,
#r9:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+8)::before,
#r10:checked ~ .stepper__rail .stepper__marker:nth-of-type(-n+9)::before {
  background: var(--gold);
}
/* CURRENT + DONE marker labels read in ink (not muted). */
#r1:checked  ~ .stepper__rail .stepper__marker:nth-of-type(1)  .stepper__marker-label,
#r2:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+2) .stepper__marker-label,
#r3:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+3) .stepper__marker-label,
#r4:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+4) .stepper__marker-label,
#r5:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+5) .stepper__marker-label,
#r6:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+6) .stepper__marker-label,
#r7:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+7) .stepper__marker-label,
#r8:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+8) .stepper__marker-label,
#r9:checked  ~ .stepper__rail .stepper__marker:nth-of-type(-n+9) .stepper__marker-label,
#r10:checked ~ .stepper__rail .stepper__marker:nth-of-type(-n+10) .stepper__marker-label {
  color: var(--ink);
}
/* focus ring: the hidden radio is focusable; show the ring on its rail marker. */
#r1:focus-visible  ~ .stepper__rail .stepper__marker:nth-of-type(1),
#r2:focus-visible  ~ .stepper__rail .stepper__marker:nth-of-type(2),
#r3:focus-visible  ~ .stepper__rail .stepper__marker:nth-of-type(3),
#r4:focus-visible  ~ .stepper__rail .stepper__marker:nth-of-type(4),
#r5:focus-visible  ~ .stepper__rail .stepper__marker:nth-of-type(5),
#r6:focus-visible  ~ .stepper__rail .stepper__marker:nth-of-type(6),
#r7:focus-visible  ~ .stepper__rail .stepper__marker:nth-of-type(7),
#r8:focus-visible  ~ .stepper__rail .stepper__marker:nth-of-type(8),
#r9:focus-visible  ~ .stepper__rail .stepper__marker:nth-of-type(9),
#r10:focus-visible ~ .stepper__rail .stepper__marker:nth-of-type(10) {
  outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--r-sm);
}

/* =====================================================================
   THE BOOK — TRUE 3D interleaved-sheet model (reference css-book-effects #3).
   An open book with the spine at centre. The LEFT half is a static backing
   showing step-1's photo. On the RIGHT, ten half-page SHEETS are stacked,
   each hinged on the spine (its LEFT edge). Every sheet has TWO solid,
   OPAQUE faces with backface-visibility:hidden — so a turning page is never
   see-through: you always see either its front or its back, full paper.
     sheet i .front = step i TEXT page   (right page of opening i)
     sheet i .back  = step i+1 PHOTO page (left page of opening i+1)
   Checking #rN rotates sheets 1..N-1 by -180deg (they swing left and stack
   face-down on the LEFT pile), uncovering opening N: left = photo N (back of
   sheet N-1, or the static backing for N=1), right = text N (front of sheet N).
   --------------------------------------------------------------------- */
.pages {
  position: relative;
  margin-top: var(--s6);
  /* A5 proportion open spread; width-driven height so it scales fluidly.
     Wider than before so the controls get their own outer gutter and never
     sit over the photo or text. */
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;
  aspect-ratio: 1.62 / 1;
  perspective: 2000px;
  perspective-origin: 50% 42%;
  /* the DEEP book drop-shadow the owner called out — on-brand ink. */
  box-shadow: 0 41px 38px -20px rgba(31, 29, 27, 0.45);
  border-radius: var(--r-sm);
}

/* ---- STATIC BACKINGS (never rotate) — the two deepest pages of the book.
   Left backing = step-1 photo (seen at opening 1, before any sheet turns).
   Right backing = a quiet colophon paper (only ever peeks at the last opening). */
.book__back {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
  overflow: hidden;
}
.book__back--left  { left: 0;  z-index: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.book__back--right { right: 0; z-index: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* ---- A SHEET: a half page on the right, hinged on the spine. ---- */
.sheet {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  transform-origin: 0 50%;        /* hinge = spine (left edge of the sheet) */
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform 1s cubic-bezier(0.37, 0.02, 0.33, 1),
              z-index 0s linear 0.5s;
  will-change: transform;
  pointer-events: none;           /* only the control labels take clicks */
}
/* rest z-order (right pile): sheet 1 on top … sheet 10 deepest.
   At opening N the visible right page is sheet N, which has the highest z
   among the still-unturned sheets N..10 — correct without extra rules. */
.sheet:nth-of-type(1)  { z-index: 10; }
.sheet:nth-of-type(2)  { z-index: 9; }
.sheet:nth-of-type(3)  { z-index: 8; }
.sheet:nth-of-type(4)  { z-index: 7; }
.sheet:nth-of-type(5)  { z-index: 6; }
.sheet:nth-of-type(6)  { z-index: 5; }
.sheet:nth-of-type(7)  { z-index: 4; }
.sheet:nth-of-type(8)  { z-index: 3; }
.sheet:nth-of-type(9)  { z-index: 2; }
.sheet:nth-of-type(10) { z-index: 1; }

/* The two physical, OPAQUE faces of a sheet. */
.sheet__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  background-color: var(--surface-raised);   /* solid paper — never transparent */
}
.sheet__front { z-index: 2; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.sheet__back  { transform: rotateY(180deg); z-index: 1; border-radius: var(--r-sm) 0 0 var(--r-sm); }

/* A page-fold shading overlay that peaks as the sheet passes 90° — sells the
   lift. Opaque paper underneath stays opaque; this is just a shadow wash. */
.sheet__face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  background: linear-gradient(90deg, rgba(31,29,27,0.26), rgba(31,29,27,0) 60%);
}
.sheet__back::after { background: linear-gradient(270deg, rgba(31,29,27,0.26), rgba(31,29,27,0) 60%); }

/* ---- TRIGGER CHAINS — checking #rN turns sheets 1..N-1 to the LEFT ----
   Each sheet k turns whenever a radio with index > k is checked. Its turned
   z-index is 20+k so the turned (left) pile sits above the unturned (right)
   pile and the MOST-RECENTLY-TURNED sheet (k = N-1, the highest turned index)
   rests on top of the left pile — exactly the photo for opening N. */
#r2:checked  ~ .book-stage .pages .sheet:nth-of-type(1),
#r3:checked  ~ .book-stage .pages .sheet:nth-of-type(1),
#r4:checked  ~ .book-stage .pages .sheet:nth-of-type(1),
#r5:checked  ~ .book-stage .pages .sheet:nth-of-type(1),
#r6:checked  ~ .book-stage .pages .sheet:nth-of-type(1),
#r7:checked  ~ .book-stage .pages .sheet:nth-of-type(1),
#r8:checked  ~ .book-stage .pages .sheet:nth-of-type(1),
#r9:checked  ~ .book-stage .pages .sheet:nth-of-type(1),
#r10:checked ~ .book-stage .pages .sheet:nth-of-type(1) { transform: rotateY(-180deg); z-index: 21; }
#r3:checked  ~ .book-stage .pages .sheet:nth-of-type(2),
#r4:checked  ~ .book-stage .pages .sheet:nth-of-type(2),
#r5:checked  ~ .book-stage .pages .sheet:nth-of-type(2),
#r6:checked  ~ .book-stage .pages .sheet:nth-of-type(2),
#r7:checked  ~ .book-stage .pages .sheet:nth-of-type(2),
#r8:checked  ~ .book-stage .pages .sheet:nth-of-type(2),
#r9:checked  ~ .book-stage .pages .sheet:nth-of-type(2),
#r10:checked ~ .book-stage .pages .sheet:nth-of-type(2) { transform: rotateY(-180deg); z-index: 22; }
#r4:checked  ~ .book-stage .pages .sheet:nth-of-type(3),
#r5:checked  ~ .book-stage .pages .sheet:nth-of-type(3),
#r6:checked  ~ .book-stage .pages .sheet:nth-of-type(3),
#r7:checked  ~ .book-stage .pages .sheet:nth-of-type(3),
#r8:checked  ~ .book-stage .pages .sheet:nth-of-type(3),
#r9:checked  ~ .book-stage .pages .sheet:nth-of-type(3),
#r10:checked ~ .book-stage .pages .sheet:nth-of-type(3) { transform: rotateY(-180deg); z-index: 23; }
#r5:checked  ~ .book-stage .pages .sheet:nth-of-type(4),
#r6:checked  ~ .book-stage .pages .sheet:nth-of-type(4),
#r7:checked  ~ .book-stage .pages .sheet:nth-of-type(4),
#r8:checked  ~ .book-stage .pages .sheet:nth-of-type(4),
#r9:checked  ~ .book-stage .pages .sheet:nth-of-type(4),
#r10:checked ~ .book-stage .pages .sheet:nth-of-type(4) { transform: rotateY(-180deg); z-index: 24; }
#r6:checked  ~ .book-stage .pages .sheet:nth-of-type(5),
#r7:checked  ~ .book-stage .pages .sheet:nth-of-type(5),
#r8:checked  ~ .book-stage .pages .sheet:nth-of-type(5),
#r9:checked  ~ .book-stage .pages .sheet:nth-of-type(5),
#r10:checked ~ .book-stage .pages .sheet:nth-of-type(5) { transform: rotateY(-180deg); z-index: 25; }
#r7:checked  ~ .book-stage .pages .sheet:nth-of-type(6),
#r8:checked  ~ .book-stage .pages .sheet:nth-of-type(6),
#r9:checked  ~ .book-stage .pages .sheet:nth-of-type(6),
#r10:checked ~ .book-stage .pages .sheet:nth-of-type(6) { transform: rotateY(-180deg); z-index: 26; }
#r8:checked  ~ .book-stage .pages .sheet:nth-of-type(7),
#r9:checked  ~ .book-stage .pages .sheet:nth-of-type(7),
#r10:checked ~ .book-stage .pages .sheet:nth-of-type(7) { transform: rotateY(-180deg); z-index: 27; }
#r9:checked  ~ .book-stage .pages .sheet:nth-of-type(8),
#r10:checked ~ .book-stage .pages .sheet:nth-of-type(8) { transform: rotateY(-180deg); z-index: 28; }
#r10:checked ~ .book-stage .pages .sheet:nth-of-type(9) { transform: rotateY(-180deg); z-index: 29; }
/* sheet 10 never turns (no #r11) — its front (text 10) is the last right page. */

/* Fold shading peaks mid-turn: a shadow wash over the opaque face (the paper
   underneath stays fully opaque — the wash only deepens the fold). */
#r2:checked  ~ .book-stage .pages .sheet:nth-of-type(1)  .sheet__face::after,
#r3:checked  ~ .book-stage .pages .sheet:nth-of-type(2)  .sheet__face::after,
#r4:checked  ~ .book-stage .pages .sheet:nth-of-type(3)  .sheet__face::after,
#r5:checked  ~ .book-stage .pages .sheet:nth-of-type(4)  .sheet__face::after,
#r6:checked  ~ .book-stage .pages .sheet:nth-of-type(5)  .sheet__face::after,
#r7:checked  ~ .book-stage .pages .sheet:nth-of-type(6)  .sheet__face::after,
#r8:checked  ~ .book-stage .pages .sheet:nth-of-type(7)  .sheet__face::after,
#r9:checked  ~ .book-stage .pages .sheet:nth-of-type(8)  .sheet__face::after,
#r10:checked ~ .book-stage .pages .sheet:nth-of-type(9)  .sheet__face::after {
  animation: fold-shade 1s ease both;
}
@keyframes fold-shade {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

/* =====================================================================
   PAGE SURFACES — warm parchment, gold hairlines, corner brackets.
   .photo-page = a left (photo) page; .step = a right (text) page. Both share
   the parchment wash + gold corner brackets so every face reads as one object.
   ===================================================================== */
.page-paper {
  position: absolute;
  inset: 0;
  background-color: var(--surface-raised);
  background-image:
    radial-gradient(135% 150% at 50% 0%, var(--surface) 42%, var(--surface-raised) 120%),
    radial-gradient(120% 120% at 50% 120%, transparent 60%, rgba(31, 29, 27, 0.05) 140%),
    repeating-linear-gradient(26deg, rgba(122, 115, 106, 0.040) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-63deg, rgba(122, 115, 106, 0.026) 0 1px, transparent 1px 7px);
  box-shadow: inset 0 1px 10px -6px rgba(255, 255, 255, 0.14);
}

/* ---- GOLD CORNER BRACKETS (match the printed booklet furniture) ----
   Each page carries an L-bracket in all four corners: two thin gold hairlines
   with a small diamond+dot node at the OUTER tip. Pure CSS, gold token only. */
.corners { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.corners span {
  position: absolute;
  width: 34px;
  height: 34px;
}
/* the two hairlines of the L */
.corners span::before,
.corners span::after {
  content: "";
  position: absolute;
  background: var(--gold);
}
.corners span::before { width: 100%; height: 1px; }   /* horizontal arm */
.corners span::after  { height: 100%; width: 1px; }    /* vertical arm */
/* the diamond+dot node at the outer tip of each corner */
.corners span i {
  position: absolute;
  width: 7px; height: 7px;
  border: 1px solid var(--gold);
  background: var(--surface-raised);
  transform: rotate(45deg);
}
.corners span i::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 2px; height: 2px;
  background: var(--ink-muted);
  border-radius: 50%;
}
/* corner placement (inset from the page edge); arms grow inward from the node */
.corners .c-tl { top: 12px; left: 12px; }
.corners .c-tl::before { top: 0; left: 0; }  .corners .c-tl::after { top: 0; left: 0; }  .corners .c-tl i { top: -4px; left: -4px; }
.corners .c-tr { top: 12px; right: 12px; }
.corners .c-tr::before { top: 0; right: 0; } .corners .c-tr::after { top: 0; right: 0; } .corners .c-tr i { top: -4px; right: -4px; }
.corners .c-bl { bottom: 12px; left: 12px; }
.corners .c-bl::before { bottom: 0; left: 0; } .corners .c-bl::after { bottom: 0; left: 0; } .corners .c-bl i { bottom: -4px; left: -4px; }
.corners .c-br { bottom: 12px; right: 12px; }
.corners .c-br::before { bottom: 0; right: 0; } .corners .c-br::after { bottom: 0; right: 0; } .corners .c-br i { bottom: -4px; right: -4px; }

/* ---- the spine-side gutter shadow on a page (soft crease toward the fold) ---- */
.page-left-gutter  { box-shadow: inset -14px 0 22px -18px rgba(31,29,27,0.5); }
.page-right-gutter { box-shadow: inset 14px 0 22px -18px rgba(31,29,27,0.5); }

/* ---- LEFT PHOTO PAGE ---- */
.photo-page {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--s6) var(--s7);
  z-index: 1;
}
.photo-page img {
  width: auto; max-width: 100%; max-height: 100%; height: auto;
  border-radius: 2px;
  box-shadow: 0 6px 18px -10px rgba(31, 29, 27, 0.5);
  position: relative; z-index: 1;
}
.photo-page .pg-num {
  position: absolute; bottom: var(--s4); left: var(--s6);
  color: var(--ink-muted); font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.16em; font-variant-numeric: tabular-nums; z-index: 4;
}
.mobile-photo { margin: 0; }
/* colophon = the quiet back of the last sheet / right backing: a small gold
   diamond centred on parchment, in keeping with the booklet's furniture. */
.colophon { place-items: center; }
.colophon__mark { width: 14px; height: 14px; border: 1px solid var(--gold); transform: rotate(45deg); opacity: 0.7; }
.colophon__mark::after { content: ""; position: absolute; inset: 0; margin: auto; width: 4px; height: 4px; background: var(--gold); }

/* ---- RIGHT TEXT PAGE (the step) ---- */
.step {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  align-content: start;
}
.step__inner {
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  align-content: start;
  min-height: 0;
  height: 100%;
  /* generous inner padding; outer edges clear the corner brackets, the inner
     (spine) edge keeps a wider margin so the gutter crease never crowds text. */
  padding: var(--s7) var(--s6) var(--s7) var(--s7);
}
.step__head {
  display: grid;
  grid-template-columns: 36px 1fr;
  column-gap: var(--s3);
  align-items: baseline;
  padding-top: var(--s3);
}
.step__badge { width: 36px; height: 36px; border-radius: var(--r-full); background: var(--surface); border: 1.5px solid var(--gold); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; grid-row: 1 / span 2; align-self: start; font-variant-numeric: tabular-nums; }
.step__label { color: var(--ink-muted); align-self: end; margin: 0; }
.step__title { color: var(--ink); grid-column: 2; margin: 2px 0 0; border-top: 1px solid rgba(201, 168, 76, 0.28); padding-top: var(--s3); }
.step__text { margin: var(--s4) 0 0; color: var(--ink); overflow-y: auto; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); align-items: center; color: var(--ink); margin: var(--s4) 0 0; }
.legend__item { display: inline-flex; align-items: center; gap: var(--s2); }
.tip { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: baseline; border-top: 1px solid rgba(201, 168, 76, 0.28); padding-top: var(--s3); margin: var(--s5) 0 0; }
.tip__label { color: var(--copper); }
.tip__text { margin: 0; color: var(--ink-2); }
.step .pg-num {
  position: absolute; bottom: var(--s4); right: var(--s6);
  color: var(--ink-muted); font-family: var(--font-display); font-weight: 700;
  font-size: 12px; letter-spacing: 0.16em; font-variant-numeric: tabular-nums; z-index: 4;
}

/* =====================================================================
   TEXT COMPOSITION — requirement B. The newly-revealed RIGHT page's text
   COMPOSES in on every turn: the title assembles PER-LETTER (letters fly up
   from depth, blur→sharp, staggered), then body / legend / tip stagger in.
   Keyed to the checked radio so it REPLAYS on every turn (incl. first load).
   Per-letter spans are injected by guide-stepper.js (CSP-safe external JS);
   the stagger delay is set inline per span by that script.
   ===================================================================== */
/* title letters: driven by JS-added .is-composing on the active title */
.step__title .ltr {
  display: inline-block;
  white-space: pre;      /* preserve spaces between words */
  transform-style: preserve-3d;
}
.step__title.is-composing .ltr {
  animation: ltr-in 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes ltr-in {
  0%   { opacity: 0; transform: translateY(14px) translateZ(-60px); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) translateZ(0); filter: blur(0); }
}
/* body text of the ACTIVE step staggers in after the title. Keyed to :checked
   so it replays every turn. The LEGEND swatches + TIP compose in with the
   heading's richer character (blur→sharp + translateZ rise) — see below, driven
   by a JS-added .is-composing so they share the heading's per-turn trigger.
   (photo page is NOT animated — it reads as the solid page being uncovered.) */
#r1:checked  ~ .book-stage .pages .sheet:nth-of-type(1)  .step__body > .step__text,
#r2:checked  ~ .book-stage .pages .sheet:nth-of-type(2)  .step__body > .step__text,
#r3:checked  ~ .book-stage .pages .sheet:nth-of-type(3)  .step__body > .step__text,
#r4:checked  ~ .book-stage .pages .sheet:nth-of-type(4)  .step__body > .step__text,
#r5:checked  ~ .book-stage .pages .sheet:nth-of-type(5)  .step__body > .step__text,
#r6:checked  ~ .book-stage .pages .sheet:nth-of-type(6)  .step__body > .step__text,
#r7:checked  ~ .book-stage .pages .sheet:nth-of-type(7)  .step__body > .step__text,
#r8:checked  ~ .book-stage .pages .sheet:nth-of-type(8)  .step__body > .step__text,
#r9:checked  ~ .book-stage .pages .sheet:nth-of-type(9)  .step__body > .step__text,
#r10:checked ~ .book-stage .pages .sheet:nth-of-type(10) .step__body > .step__text {
  animation: line-in 520ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
#r1:checked  ~ .book-stage .pages .sheet:nth-of-type(1)  .step__label,
#r2:checked  ~ .book-stage .pages .sheet:nth-of-type(2)  .step__label,
#r3:checked  ~ .book-stage .pages .sheet:nth-of-type(3)  .step__label,
#r4:checked  ~ .book-stage .pages .sheet:nth-of-type(4)  .step__label,
#r5:checked  ~ .book-stage .pages .sheet:nth-of-type(5)  .step__label,
#r6:checked  ~ .book-stage .pages .sheet:nth-of-type(6)  .step__label,
#r7:checked  ~ .book-stage .pages .sheet:nth-of-type(7)  .step__label,
#r8:checked  ~ .book-stage .pages .sheet:nth-of-type(8)  .step__label,
#r9:checked  ~ .book-stage .pages .sheet:nth-of-type(9)  .step__label,
#r10:checked ~ .book-stage .pages .sheet:nth-of-type(10) .step__label {
  animation: line-in 460ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
/* stagger: label first, then body text, after the title settles. */
.step__label { animation-delay: 480ms; }
.step__body > .step__text { animation-delay: 600ms; }
@keyframes line-in {
  0%   { opacity: 0; transform: translateY(10px); filter: blur(3px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}

/* LEGEND swatches + TIP — the same compose character as the heading: letters/
   units rise from depth, blur→sharp, same easing. Driven by .is-composing that
   guide-stepper.js adds to the ACTIVE step's legend items + tip on every turn
   (the heading's trigger), removed/re-added with a reflow so it REPLAYS each
   flip. The stagger delay (--d) is set inline per unit by that script so the
   swatches run in sequence and the tip lands after the last swatch — one
   coordinated compose-in: heading → body → swatches → tip. */
.legend__item,
.tip { transform-style: preserve-3d; }
.legend__item.is-composing,
.tip.is-composing {
  animation: compose-rise 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--d, 0ms);
}
@keyframes compose-rise {
  0%   { opacity: 0; transform: translateY(14px) translateZ(-60px); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) translateZ(0); filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
  /* instant: no 3D turn, no fly-in. Sheets snap; all content simply visible. */
  .sheet { transition: none !important; }
  .sheet__face::after { display: none !important; }
  .step__title.is-composing .ltr,
  .legend__item.is-composing, .tip.is-composing,
  .step__label, .step__body > * { animation: none !important; opacity: 1 !important; filter: none !important; transform: none !important; }
}

/* =====================================================================
   PAGE-TURN CONTROLS — in a RESERVED OUTER GUTTER beside the book, never over
   the photo or text. The book + its two gutter columns form .book-stage; the
   controls are global <label for="rN±1"> living in the gutters. Only the
   ACTIVE step's prev/next pair is shown (the rest are hidden), so each visible
   control always points at the right neighbour. Circular, gold hairline on
   ink, SVG-free CSS chevron, 44px touch target.
   ===================================================================== */
.book-stage {
  display: grid;
  grid-template-columns: var(--book-gutter) minmax(0, 1fr) var(--book-gutter);
  align-items: center;
  column-gap: var(--s3);
  --book-gutter: 56px;
  margin-top: var(--s7);   /* breathing room between the step rail and the book */
}
.book-stage .pages { grid-column: 2; margin-top: 0; }
.book-nav {
  grid-row: 1;
  align-self: center;
  justify-self: center;
  position: relative;
  width: 44px; height: 44px;
}
.book-nav--prev { grid-column: 1; }
.book-nav--next { grid-column: 3; }
.step__ctrl {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 44px; height: 44px;
  display: none;                 /* hidden until its step is active */
  align-items: center; justify-content: center;
  border-radius: var(--r-full);
  border: 1px solid var(--gold);
  background: var(--ink);
  cursor: pointer;
  transition: box-shadow .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.step__ctrl:hover { box-shadow: 0 0 0 6px rgba(201, 168, 76, 0.18); }
.step__ctrl:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.step__ctrl .chev { width: 9px; height: 9px; border: solid var(--gold); border-width: 0 0 1.5px 1.5px; display: inline-block; }
.step__ctrl--prev .chev { transform: translateX(2px) rotate(45deg); }
.step__ctrl--next .chev { transform: translateX(-2px) rotate(-135deg); }
/* show only the active step's controls */
#r1:checked  ~ .book-stage .step__ctrl[data-for="1"],
#r2:checked  ~ .book-stage .step__ctrl[data-for="2"],
#r3:checked  ~ .book-stage .step__ctrl[data-for="3"],
#r4:checked  ~ .book-stage .step__ctrl[data-for="4"],
#r5:checked  ~ .book-stage .step__ctrl[data-for="5"],
#r6:checked  ~ .book-stage .step__ctrl[data-for="6"],
#r7:checked  ~ .book-stage .step__ctrl[data-for="7"],
#r8:checked  ~ .book-stage .step__ctrl[data-for="8"],
#r9:checked  ~ .book-stage .step__ctrl[data-for="9"],
#r10:checked ~ .book-stage .step__ctrl[data-for="10"] { display: inline-flex; }

/* a slim status line under the book: "Step N / 10" — decorative, numbers in ink */
.stepper__nav { display: flex; align-items: center; justify-content: center; gap: var(--s5); margin-top: var(--s5); flex-wrap: wrap; }
.stepper__status { margin: 0; color: var(--ink-muted); text-align: center; font-variant-numeric: tabular-nums; }

/* ---- ENLARGE / fullscreen control (helps tablet painters) ---- */
.book-enlarge {
  all: unset;
  box-sizing: border-box;
  display: inline-flex; align-items: center; gap: var(--s2);
  min-height: 44px; padding: 0 var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-full);
  color: var(--ink-2); background: var(--surface);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .15s ease, color .15s ease;
}
.book-enlarge:hover { border-color: var(--gold); color: var(--ink); }
.book-enlarge:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.book-enlarge__ico { flex: none; }
.book-enlarge__ico--close { display: none; }
.book-enlarge__txt { white-space: nowrap; }
/* when enlarged (class on the fieldset): swap icon + label text handled by JS aria;
   icon swap purely by state class */
.stepper.is-enlarged .book-enlarge__ico--open { display: none; }
.stepper.is-enlarged .book-enlarge__ico--close { display: inline-block; }

/* ENLARGED BOOK — the guide fills the viewport (native fullscreen on the
   fieldset, or a CSS-class fallback). The book grows to use the space; rail,
   status + controls stay usable; background goes to the paper surface. */
.stepper:fullscreen,
.stepper.is-enlarged {
  background: var(--surface);
  padding: var(--s6) var(--s5);
  display: flex; flex-direction: column; justify-content: center;
  overflow: auto;
}
.stepper:fullscreen .pages,
.stepper.is-enlarged .pages { max-width: min(1400px, 94vw); }
.stepper:fullscreen .book-stage,
.stepper.is-enlarged .book-stage { --book-gutter: 72px; }
/* the CSS-class fallback (no native fullscreen) pins it over the page */
.stepper.is-enlarged {
  position: fixed; inset: 0; z-index: 40; margin: 0;
}

/* =====================================================================
   RESPONSIVE ≤720px — no 3D. The book lies as ONE page per step: show only
   the checked step, stacked photo-over-text, full width, no horizontal scroll.
   The sheets collapse to flat blocks; the static backings are hidden.
   ===================================================================== */
@media (max-width: 720px) {
  /* ===== mobile painting-guide = native SWIPE CAROUSEL =====================
     The desktop 3D spine-fold book (absolutely-positioned sheets + faces) does
     not translate to a phone — it collapsed, blanked the photo and overflowed.
     On <=720px the pages become a horizontal scroll-snap track: every step is
     ONE full-width slide the painter swipes left/right through (native touch on
     iOS + Android). Nothing is absolutely positioned, so it cannot overflow or
     overlap. The stepper rail above stays as a compact tap-to-jump indicator
     that fits the width (no horizontal scrollbar). guide-stepper.js keeps the
     rail and the swipe position in sync both ways. */
  .book-stage {
    grid-template-columns: 1fr;
    --book-gutter: 0px;
    row-gap: var(--s4);
  }
  .book-stage .pages { grid-column: 1; }
  .book-nav, .book__back, .book-enlarge { display: none !important; }

  /* the swipe track */
  .pages {
    position: static;
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    gap: var(--s4);
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    perspective: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;                 /* Firefox/Android: no scrollbar */
    box-shadow: none;
    background: none;
    padding: 0;
  }
  .pages::-webkit-scrollbar { display: none; }   /* WebKit (iOS/Chrome): no scrollbar */
  .pages::before { display: none !important; }

  /* each sheet = one full-width slide */
  .sheet {
    position: static !important;
    right: auto !important;
    flex: 0 0 100%;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    transition: none !important;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    display: block !important;
  }
  .sheet__face {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    backface-visibility: visible !important;
  }
  .sheet__face::after { display: none; }
  .sheet__back { display: none !important; }     /* front only: photo + notes */
  .sheet__front {
    position: static;
    min-height: 0;
    overflow: hidden;
    background: var(--surface-raised, #fff);
    border: 1px solid var(--line, rgba(31, 29, 27, 0.1));
    border-radius: var(--r-sm, 10px);
  }

  /* strip the paper/chrome overlays that only make sense inside the 3D book */
  .page-paper, .corners, .pg-num, .step__ctrl { display: none !important; }

  /* slide body: photo on top, notes below, in normal flow */
  .step { display: block !important; position: static !important; height: auto !important; width: 100%; padding: 0; }
  .mobile-photo { display: block; position: relative; z-index: 1; margin: 0; }
  .mobile-photo img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: contain; border-bottom: 1px solid rgba(201, 168, 76, 0.22); }
  .step__inner { display: grid; gap: var(--s4); padding: var(--s5); }
  .step__text { overflow: visible; }

  /* content visible instantly — the swipe is the interaction, not a reveal */
  .step__label, .step__body > *, .step__title.is-composing .ltr,
  .legend__item.is-composing, .tip.is-composing {
    animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
  }

  /* stepper rail = compact indicator that FITS the width -> no scrollbar.
     (desktop uses grid 1fr; the old mobile override forced 56px + overflow-x
     auto, which is exactly what produced the horizontal scrollbar.) */
  .stepper__rail { grid-auto-columns: 1fr; overflow: visible; padding: 0; }
  .stepper__marker { min-height: 40px; }
  .stepper__marker .step__badge { width: 28px; height: 28px; font-size: 13px; }
  .stepper__marker::before { top: calc(var(--s2) + 14px); }
  .stepper__marker-label { display: none; }
  .stepper__nav { position: static; margin-top: var(--s5); }
}
@media (max-width: 720px) { html, body { overflow-x: hidden; } }
/* desktop: the mobile-only photo block is not rendered */
.mobile-photo { display: none; }
.guide-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s5) var(--s7); margin-top: var(--s7); padding-top: var(--s6); border-top: 1px solid var(--line); }
.guide-notes h3 { margin: 0 0 var(--s2); color: var(--ink); }
.guide-notes p { margin: 0; color: var(--ink-2); max-width: var(--measure); }

/* ---- story ---- */
.story { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--s7); align-items: start; }
.story__text { max-width: 60ch; color: var(--ink-2); display: grid; gap: var(--s4); }
.story__text p { margin: 0; }
.story__text .last { color: var(--ink); }
.story__emblem { justify-self: end; width: 220px; }
@media (max-width: 760px) { .story { grid-template-columns: 1fr; } .story__emblem { justify-self: center; order: -1; width: 160px; } }

/* ---- box + making ---- */
.twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--s7); }
@media (max-width: 860px) { .twocol { grid-template-columns: 1fr; } }
.contents { display: grid; gap: var(--s3); }
.contents ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); color: var(--ink-2); }
.contents li { display: grid; grid-template-columns: 12px 32px 1fr; align-items: baseline; column-gap: var(--s2); }
.contents li::before { content: ""; width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); align-self: center; }
.contents .qtyn { color: var(--ink); font-weight: 700; }
.contents .extra { color: var(--ink-muted); margin-top: var(--s2); }
.specs { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s5); margin: var(--s5) 0 0; }
.specs dt { color: var(--ink-muted); }
.specs dd { margin: 0; color: var(--ink); }
.status { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: var(--s5) 0 0; padding: 0; list-style: none; max-width: 560px; }
.status li { display: grid; justify-items: center; gap: var(--s2); position: relative; text-align: center; }
.status li::before { content: ""; position: absolute; top: 17px; left: 50%; width: 100%; height: 1px; background: var(--line); }
.status li:last-child::before { display: none; }
.status li.done::before { background: var(--gold); }
.status__mark { position: relative; z-index: 1; width: 36px; height: 36px; border-radius: var(--r-full); display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1.5px solid var(--line-strong); color: var(--ink-2); font-family: var(--font-display); font-weight: 700; font-size: 16px; }
.status li.done .status__mark { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.status li.current .status__mark { border-color: var(--gold-ink); font-size: 0; }
.status li.current .status__mark::after { content: ""; width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg); }
.status__name { color: var(--ink-muted); }
.status li.done .status__name, .status li.current .status__name { color: var(--ink); }
.credit { display: grid; justify-items: center; gap: var(--s2); color: var(--ink-muted); text-align: center; margin-top: var(--s8); }
.credit img { width: 88px; height: auto; }
.line { display: grid; justify-items: center; text-align: center; gap: var(--s3); }
.line img { width: 72px; height: auto; }
.line h2 { margin: 0; color: var(--gold-ink); }
.line p { margin: 0; color: var(--ink-2); max-width: 56ch; }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5) var(--s7); }
.faq h3 { margin: 0 0 var(--s2); color: var(--ink); font-size: 16px; }
.faq p { margin: 0; color: var(--ink-2); max-width: var(--measure); }
@media (max-width: 760px) { .faq { grid-template-columns: 1fr; } }

/* ---- footer ---- */
.foot { border-top: 1px solid var(--line); padding-block: var(--s7); }
.foot__in { max-width: var(--content-max); margin: 0 auto; display: grid; gap: var(--s5); }
.foot__row { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); align-items: center; justify-content: space-between; }
.foot img { width: 150px; height: auto; }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); }
.foot nav a { color: var(--ink-2); text-decoration: none; font-size: 14px; }
.foot nav a:hover { color: var(--gold-ink); text-decoration: underline; }
.foot .meta { color: var(--ink-muted); }

/* ---- sticky buy bar ---- */
.buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 19; background: rgba(13,13,13,0.94); backdrop-filter: blur(8px); border-top: 1px solid var(--gold); padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-top: var(--s3); padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px)); }
.buybar__in { max-width: var(--content-max); margin: 0 auto; display: flex; align-items: center; gap: var(--s4); }
.buybar__name { font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-ink); }
.buybar__price { color: var(--ink); font-variant-numeric: tabular-nums; }
body.sales-closed #buybar { display: none !important; }  /* pre-launch: no sticky buy bar / price, even on scroll */
.buybar .btn { margin-left: auto; min-height: 44px; }
@media (max-width: 560px) { .buybar__name { display: none; } }

/* ---- cart drawer + checkout ---- */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 30; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--surface); border-left: 1px solid var(--line); z-index: 31; display: grid; grid-template-rows: auto 1fr auto; padding-top: env(safe-area-inset-top, 0px); padding-right: env(safe-area-inset-right, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.drawer__head h2 { margin: 0; color: var(--gold-ink); font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; }
.iconbtn { all: unset; cursor: pointer; width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: var(--r-sm); color: var(--ink-2); }
.iconbtn:hover { color: var(--ink); background: var(--surface-raised); }
.iconbtn:focus-visible { outline: 2px solid var(--focus); }
.drawer__body { overflow: auto; padding: var(--s5); display: grid; gap: var(--s4); align-content: start; }
.line-item { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.line-item__name { font-weight: 700; }
.line-item__sum { text-align: right; font-variant-numeric: tabular-nums; }
.line-item .qty { grid-column: 1; }
.line-item__remove { all: unset; cursor: pointer; color: var(--ink-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; justify-self: end; align-self: center; }
.line-item__remove:hover { color: var(--danger); }
.empty { color: var(--ink-2); margin: 0; }
.drawer__foot { padding: var(--s5); border-top: 1px solid var(--line); display: grid; gap: var(--s3); }
.sum { display: flex; justify-content: space-between; align-items: baseline; }
.sum .price { font-size: 26px; }
.checkout { padding-left: var(--gutter-l); padding-right: var(--gutter-r); padding-block: var(--s8); border-top: 1px solid var(--line); }
.checkout__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s7); align-items: start; }
@media (max-width: 900px) { .checkout__grid { grid-template-columns: 1fr; } }
.form { display: grid; gap: var(--s5); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.fields .span2 { grid-column: 1 / -1; }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }
.field { display: grid; gap: var(--s2); }
.field__label { color: var(--ink-2); }
.input { font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3) var(--s4); min-height: 48px; width: 100%; }
.input:hover { border-color: var(--line-strong); }
.input::placeholder { color: var(--ink-muted); }
select.input { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: right 22px center, right 16px center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.field.error .input { border-color: var(--danger); border-width: 1.5px; }
.field__error { color: var(--danger); display: flex; gap: var(--s2); align-items: center; }
.field__error::before { content: ""; width: 8px; height: 8px; background: var(--danger); transform: rotate(45deg); flex: none; }
.check { display: grid; grid-template-columns: 20px 1fr; gap: var(--s3); align-items: start; color: var(--ink); cursor: pointer; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box { width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); position: relative; margin-top: 2px; }
.check input:checked + .check__box { background: var(--gold); border-color: var(--gold); }
.check input:checked + .check__box::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--on-gold); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check input:focus-visible + .check__box { outline: 2px solid var(--focus); outline-offset: 2px; }
.summary { background: var(--surface-raised); border-radius: var(--r-sm); padding: var(--s5); display: grid; gap: var(--s3); position: sticky; top: calc(env(safe-area-inset-top, 0px) + 80px); }
.summary h3 { margin: 0; color: var(--gold-ink); font-size: 16px; letter-spacing: 0.06em; text-transform: uppercase; }
.summary .row { display: flex; justify-content: space-between; gap: var(--s4); color: var(--ink-2); }
.summary .row b { color: var(--ink); }
.summary .total { border-top: 1px solid var(--line); padding-top: var(--s3); color: var(--ink); font-weight: 700; }
.summary .row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.notice { border: 1px solid var(--line); border-radius: var(--r-sm); padding: var(--s3) var(--s4); color: var(--ink-2); display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: baseline; }
.notice::before { content: ""; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); align-self: center; }
.confirm { display: grid; gap: var(--s5); max-width: 640px; }
.confirm h2 { margin: 0; color: var(--gold-ink); }
.confirm p { margin: 0; color: var(--ink-2); }
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 88px); transform: translateX(-50%); background: var(--surface-raised); color: var(--ink); border: 1px solid var(--gold); border-radius: var(--r-sm); padding: var(--s3) var(--s5); z-index: 40; font-size: 14px; max-width: calc(100% - 32px); }

/* ---- back to top ---- */
.totop { position: fixed; right: var(--gutter-r); bottom: calc(env(safe-area-inset-bottom, 0px) + var(--s5)); z-index: 18; width: 44px; height: 44px; display: inline-grid; place-items: center; background: rgba(13,13,13,0.92); backdrop-filter: blur(8px); color: var(--gold-ink); border: 1px solid var(--gold-ink); border-radius: var(--r-full); cursor: pointer; }
.totop:hover { background: var(--gold); color: var(--on-gold); border-color: var(--gold); }
.totop:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.totop svg { width: 20px; height: 20px; }
/* Lift clear of the sticky buy bar while it is on screen. */
body:has(#buybar:not([hidden])) .totop { bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); }
/* ---- product showcase: real photos + 3D, on a staged backdrop ---- */
.showcase{ position:relative; overflow:hidden;
  background: radial-gradient(85% 65% at 50% 12%, #1b1710 0%, #110f0c 46%, #0b0b0b 100%); }
.showcase::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(58% 48% at 50% 36%, rgba(201,168,76,.10), transparent 70%); }
.showcase::after{ content:""; position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 200px 46px rgba(0,0,0,.72); }
.showcase .section-head{ position:relative; z-index:1; }
.showcase .section-head p{ max-width:62ch; }
.sg-3d{ position:relative; z-index:1; margin:10px 0 34px; }
.sg-3d__poster{ position:relative; border:1px solid var(--gold,#c9a84c); border-radius:12px; overflow:hidden;
  background:#0d0d0d; box-shadow:0 26px 74px rgba(0,0,0,.6); }
.sg-3d__poster img{ display:block; width:100%; height:560px; object-fit:contain; object-position:center; opacity:.96; background:radial-gradient(70% 70% at 50% 45%, #16140f, #0b0b0b); }
.sg-3d__cta{ position:absolute; inset:auto 0 0 0; display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:34px 16px 26px; background:linear-gradient(to top, rgba(8,8,8,.94), rgba(8,8,8,0)); }
.sg-3d__hint{ color:var(--ink-2,#bcb4a4); font-size:13px; letter-spacing:.04em; }
.sg-3d__canvas{ width:100%; height:560px; border:1px solid var(--gold,#c9a84c); border-radius:12px; touch-action:none;
  background: radial-gradient(70% 70% at 50% 42%, #16140f, #0b0b0b); box-shadow:0 26px 74px rgba(0,0,0,.6); }
.sg-3d__canvas canvas{ display:block; border-radius:12px; }
@media (max-width:760px){ .sg-3d__canvas, .sg-3d__poster img{ height:420px; max-height:420px; } }
.showcase__grid{ position:relative; z-index:1; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); }
.sg-item{ margin:0; cursor:zoom-in; border:1px solid var(--line,#2c2922); border-radius:10px; overflow:hidden;
  background:#0c0c0c; transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.sg-item img{ display:block; width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; }
.sg-item:hover, .sg-item:focus-visible{ transform:translateY(-3px); border-color:var(--gold,#c9a84c);
  box-shadow:0 14px 34px rgba(0,0,0,.5); outline:none; }
.sg-lightbox{ position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  background:rgba(6,6,6,.95); padding:24px; }
.sg-lb__fig{ margin:0; max-width:92vw; max-height:90vh; display:flex; flex-direction:column; align-items:center; gap:10px; }
.sg-lb__img{ max-width:92vw; max-height:82vh; object-fit:contain; border:1px solid #2c2922; border-radius:8px; }
.sg-lb__cap{ color:var(--ink-2,#bcb4a4); font-size:14px; text-align:center; max-width:70ch; }
.sg-lb__close{ position:fixed; top:16px; right:18px; }
.sg-lb__nav{ position:fixed; top:50%; transform:translateY(-50%); }
.sg-lb__prev{ left:14px; } .sg-lb__next{ right:14px; }
.sg-lb__close, .sg-lb__nav{ background:rgba(20,18,14,.82); color:var(--gold-ink,#ecbc44); border:1px solid #3a3528;
  border-radius:999px; width:44px; height:44px; font-size:22px; line-height:1; cursor:pointer; }
.sg-lb__close:hover, .sg-lb__nav:hover{ color:#fff; border-color:var(--gold,#c9a84c); }