/* ============================================================================
   quad.css: QUAD Interior Systems, customer presentation.
   Tokens and page classes only. The engine's [data-sc-*] mechanism, .sc-stage,
   .sc-copy and the pin/pan/scrub rules live in scrollcraft.css and are never
   restyled here. Never set `position` on a [data-sc-stage].
   ========================================================================== */

/* display: Cormorant Garamond (Latin) with Noto Serif Thai; text: Inter Tight with IBM Plex Sans Thai. All OFL, self-hosted. */
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-garamond-latin-300-normal.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-garamond-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-garamond-latin-300-italic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Noto Serif Thai"; src: url("../assets/fonts/noto-serif-thai-thai-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "Inter Tight"; src: url("../assets/fonts/inter-tight-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("../assets/fonts/ibm-plex-sans-thai-thai-300-normal.woff2") format("woff2"); font-weight: 300; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("../assets/fonts/ibm-plex-sans-thai-thai-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; src: url("../assets/fonts/ibm-plex-sans-thai-thai-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0E01-0E5B, U+200C-200D, U+25CC; }

/* --------------------------------------------------------------- tokens ---- */
:root {
  /* brand palette (QUAD_VISUAL_DIRECTION.md) */
  --deep: #101113;  --ink: #16181B;  --rule: #2D3034;
  --gold: #A97D4B;  --gold-light: #D8B98F;  --champagne: #C3A171;
  --cream: #F5F2EC; --cream-2: #E7E2D9;
  --body: #B9B3AA;  --muted: #8F8A82;
  /* on paper: small gold text needs the deeper stop (5.9:1); the mid gold is for rules and large marks (3.3:1) */
  --paper-ink: #16181B; --paper-soft: #4A4D52; --paper-mute: #635F58; --paper-gold: #7A5628; --paper-rule: #CFC8BD;

  --serif: "Cormorant Garamond", "Noto Serif Thai", Georgia, "Times New Roman", serif;
  --sans: "Inter Tight", "IBM Plex Sans Thai", system-ui, sans-serif;

  /* engine tokens, rebranded */
  --sc-canvas: var(--deep);  --sc-surface: var(--ink);
  --sc-ink: var(--cream);    --sc-ink-soft: var(--body);
  --sc-accent: var(--gold-light);  --sc-accent-ink: var(--deep);
  --sc-font-display: var(--serif);
  --sc-font-text: var(--sans);
  --sc-gutter: clamp(16px, 5.4vw, 108px);
  --sc-maxw: 96rem;
  --sc-section: clamp(4.5rem, 9vw, 10rem);
  --sc-r-sm: 2px; --sc-r-md: 2px; --sc-r-lg: 2px;
  --sc-hairline: color-mix(in oklab, var(--sc-ink) 16%, transparent);

  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --folio-h: 88px;
}
html { background: var(--deep); }
body { font-family: var(--sans); font-weight: 300; font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem); letter-spacing: 0.005em; }
html[data-lang="th"] body { line-height: 1.75; font-weight: 300; }

/* both languages live in the DOM; one shows */
html[data-lang="th"] [data-l="en"], html[data-lang="en"] [data-l="th"] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.noscript { position: relative; z-index: 300; margin: 0; padding: 18px var(--sc-gutter); background: var(--cream); color: var(--paper-ink); font-size: 15px; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; background: var(--cream); color: var(--paper-ink); padding: 12px 16px; font-size: 14px; transition: top 160ms var(--ease); }
.skip:focus { top: 12px; }
.num { font-variant-numeric: lining-nums tabular-nums; }
code { font-family: var(--sans); font-size: 0.86em; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 3px; border-radius: 2px; }

/* ---------------------------------------------------------------- grounds ---
   Each chapter lands on its own ground and stays there. Restating `color` and
   the inherited tokens on the subtree is deliberate (taste.md: redefining
   --sc-ink alone does not re-ink text that already computed on <body>). */
[data-ground="deep"] { --g-bg: var(--deep); --g-ink: var(--cream); --g-soft: var(--body); --g-mute: var(--muted); --g-accent: var(--gold-light); --g-line: rgba(245, 242, 236, 0.14);
  --wall: #1e2125; --hatchc: rgba(245, 242, 236, 0.10); --dim: #D8B98F; --label: #B9B3AA; --floor: #D8B98F; --floorfill: #14161a; --planwall: #23272b; --plan-ink: #F5F2EC; }
[data-ground="ink"]  { --g-bg: var(--ink);  --g-ink: var(--cream); --g-soft: var(--body); --g-mute: var(--muted); --g-accent: var(--gold-light); --g-line: rgba(245, 242, 236, 0.14);
  --wall: #24282d; --hatchc: rgba(245, 242, 236, 0.10); --dim: #D8B98F; --label: #B9B3AA; --floor: #D8B98F; --floorfill: #1a1c20; --planwall: #262a2f; --plan-ink: #F5F2EC; }
[data-ground="cream"] { --g-bg: var(--cream); --g-ink: var(--paper-ink); --g-soft: var(--paper-soft); --g-mute: var(--paper-mute); --g-accent: var(--paper-gold); --g-line: rgba(22, 24, 27, 0.15);
  --wall: #EDE8DD; --hatchc: rgba(22, 24, 27, 0.19); --dim: #7A5628; --label: #4A4D52; --floor: #16181B; --floorfill: #E6E0D3; --planwall: #DAD2C3; --plan-ink: #16181B; }
/* the top wash follows the ground the reader is on, so the folio never sits on top of scrolling text */
html[data-ground="deep"] { --wash-rgb: 16, 17, 19; }
html[data-ground="ink"] { --wash-rgb: 22, 24, 27; }
html[data-ground="cream"] { --wash-rgb: 245, 242, 236; }
.title, .ch, .spread { background: var(--g-bg); color: var(--g-ink); --sc-ink: var(--g-ink); --sc-ink-soft: var(--g-soft); --sc-accent: var(--g-accent); --sc-canvas: var(--g-bg); }
.ch--collection, .spread { --sc-hairline: var(--g-line); }

/* finish variables: on <html>, and overridable on a figure (the automatic door is only bought in Sand Black) */
[data-finish="sand-black"]  { --frame: #2C2C2E; --frame-edge: rgba(245, 242, 236, 0.20); --int-a: #F6EFE0; --int-b: #C0A780; --glass: rgba(70, 56, 42, 0.16); --glass-edge: rgba(255, 255, 255, 0.34); --handle: #CFC8BB; --roomfloor: rgba(80, 56, 30, 0.17); --roomhorizon: rgba(80, 56, 30, 0.30); --refl: rgba(255, 255, 255, 0.22); }
[data-finish="sand-white"]  { --frame: #EBE8E1; --frame-edge: rgba(22, 24, 27, 0.42);  --int-a: #6E665A; --int-b: #2A2622; --glass: rgba(255, 255, 255, 0.06); --glass-edge: rgba(255, 255, 255, 0.28); --handle: #2C2C2E; --roomfloor: rgba(0, 0, 0, 0.30); --roomhorizon: rgba(245, 242, 236, 0.16); --refl: rgba(255, 255, 255, 0.09); }
[data-finish="grey"]        { --frame: #7D858B; --frame-edge: rgba(22, 24, 27, 0.34);  --int-a: #F1EADC; --int-b: #B39F78; --glass: rgba(60, 60, 60, 0.12); --glass-edge: rgba(255, 255, 255, 0.34); --handle: #24262A; --roomfloor: rgba(70, 60, 40, 0.17); --roomhorizon: rgba(70, 60, 40, 0.28); --refl: rgba(255, 255, 255, 0.22); }
[data-finish="mill-finish"] { --frame: #C4C8CB; --frame-edge: rgba(255, 255, 255, 0.85); --int-a: #7C7365; --int-b: #302B25; --glass: rgba(255, 255, 255, 0.05); --glass-edge: rgba(255, 255, 255, 0.30); --handle: #2C2C2E; --roomfloor: rgba(0, 0, 0, 0.28); --roomhorizon: rgba(245, 242, 236, 0.16); --refl: rgba(255, 255, 255, 0.10); }

/* -------------------------------------------------------------- typography -- */
.sc-display { font-family: var(--serif); font-weight: 300; letter-spacing: -0.012em; line-height: 1.02; text-wrap: balance; margin: 0; font-variant-numeric: lining-nums; }
html[data-lang="th"] .sc-display { line-height: 1.24; letter-spacing: 0; font-weight: 300; }
.q-h1 { font-size: clamp(2.9rem, 7vw, 7.4rem); }
.q-h2 { font-size: clamp(2.4rem, 4.6vw, 4.6rem); }
html[data-lang="th"] .q-h1 { font-size: clamp(2.3rem, 5.4vw, 5.5rem); }
html[data-lang="th"] .q-h2 { font-size: clamp(1.95rem, 3.7vw, 3.7rem); }
.display--md { font-size: clamp(2.3rem, 3.8vw, 3.9rem); }
html[data-lang="th"] .display--md { font-size: clamp(1.9rem, 3.1vw, 3.2rem); }
.sc-body, .body { font-size: 1.05rem; line-height: 1.7; max-width: 44ch; color: var(--g-soft); margin: 0; text-wrap: pretty; }
html[data-lang="th"] .sc-body, html[data-lang="th"] .body { max-width: 40ch; line-height: 1.8; }
.sc-lede { font-family: var(--serif); font-style: italic; font-size: clamp(1.45rem, 2.1vw, 2.05rem); font-weight: 300; line-height: 1.3; max-width: 30ch; color: var(--g-ink); margin: 0; text-wrap: balance; }
html[data-lang="th"] .sc-lede { font-style: normal; line-height: 1.55; font-size: clamp(1.3rem, 1.8vw, 1.75rem); }
.sc-label { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--g-accent); margin: 0; }
html[data-lang="th"] .sc-label { letter-spacing: 0.04em; text-transform: none; font-size: 13.5px; }
.micro { font-size: 12.5px; line-height: 1.6; color: var(--g-mute); margin: 0; max-width: 60ch; text-wrap: pretty; }
html[data-lang="th"] .micro { font-size: 13px; }
/* chapter numeral: a gold hairline and the numeral in the serif */
.numeral { display: flex; width: fit-content; align-items: center; gap: 16px; margin: 0 0 clamp(1rem, 2.2vw, 1.8rem); font-family: var(--serif); font-style: italic; font-size: 1.5rem; font-weight: 400; letter-spacing: 0.08em; color: var(--g-accent); line-height: 1; }
.numeral::before { content: ""; width: 40px; height: 1px; background: var(--gold); }
.tag { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--g-accent); }
html[data-lang="th"] .tag { letter-spacing: 0.03em; text-transform: none; font-size: 13px; }
.tag::before { content: ""; width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }
.tag--illus { margin-top: 0.5rem; }
a { text-underline-offset: 0.22em; }
.link { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; cursor: pointer; }
.link:hover { text-decoration-thickness: 2px; }
.link--solo { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 0; } /* a link on its own line is a target of its own, not part of a sentence */
@media (pointer: coarse) { .link--solo { min-height: 44px; } }

/* ---------------------------------------------------------------- buttons ---
   One family: pills with a hairline, a solid variant for the main action. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 28px; border-radius: 999px; background: transparent; border: 1px solid color-mix(in oklab, var(--g-ink) 55%, transparent); color: var(--g-ink); font: 500 12.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; transition: background 220ms var(--ease), color 220ms var(--ease), border-color 220ms var(--ease), transform 120ms var(--ease), box-shadow 220ms var(--ease); }
html[data-lang="th"] .btn { font-size: 14.5px; letter-spacing: 0.02em; text-transform: none; font-weight: 400; }
.btn--solid { background: var(--g-ink); color: var(--g-bg); border-color: var(--g-ink); box-shadow: 0 14px 30px -20px rgba(16, 17, 19, 0.7); }
.btn:active, .operate:active, .keep:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { border-color: var(--gold); color: var(--g-ink); background: color-mix(in oklab, var(--gold) 10%, transparent); }
  .btn--solid:hover { background: color-mix(in oklab, var(--g-ink) 84%, var(--gold)); color: var(--g-bg); }
}

/* --------------------------------------------------------------- chrome ---- */
.wash { position: fixed; z-index: 50; left: 0; right: 0; top: 0; height: 84px; pointer-events: none; background: linear-gradient(to bottom, rgba(var(--wash-rgb, 16, 17, 19), 0.97) 0, rgba(var(--wash-rgb, 16, 17, 19), 0.97) 56%, rgba(var(--wash-rgb, 16, 17, 19), 0)); transition: opacity 240ms var(--ease); }
html[data-ch="0"] .wash { opacity: 0; }
.folio { position: fixed; z-index: 60; left: var(--sc-gutter); top: 18px; display: grid; gap: 3px; color: var(--fc, var(--cream)); pointer-events: none; transition: opacity 240ms var(--ease), color 240ms var(--ease); font-size: 12px; line-height: 1.3; }
html[data-ground="cream"] { --fc: var(--paper-ink); --fc-soft: var(--paper-mute); --fc-accent: var(--paper-gold); }
html:not([data-ground="cream"]) { --fc: var(--cream); --fc-soft: var(--body); --fc-accent: var(--gold-light); }
.folio a { pointer-events: auto; text-decoration: none; }
.folio__mark { font-family: var(--serif); font-size: 15px; font-weight: 500; letter-spacing: 0.42em; justify-self: start; padding: 7px 14px 7px 0; margin: -7px 0; }
.folio__chapter { margin: 0; display: flex; letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; }
html[data-lang="th"] .folio__chapter { letter-spacing: 0.02em; text-transform: none; font-size: 13px; }
.folio__chapter > span { display: none; align-items: baseline; gap: 10px; }
.folio__chapter b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 14px; color: var(--fc-accent); letter-spacing: 0.08em; }
html[data-ch="1"] [data-folio="1"], html[data-ch="2"] [data-folio="2"], html[data-ch="3"] [data-folio="3"], html[data-ch="4"] [data-folio="4"], html[data-ch="5"] [data-folio="5"] { display: inline-flex; }
.folio__bench { margin: 0; color: var(--fc-soft); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
html[data-ch="0"] .folio, html[data-ch="6"] .folio { opacity: 0; }

.tools { position: fixed; z-index: 60; right: var(--sc-gutter); top: 8px; display: flex; align-items: center; gap: 6px; color: var(--fc, var(--cream)); transition: color 240ms var(--ease); }
.tools button { background: none; border: 0; color: inherit; font: inherit; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; min-height: 44px; min-width: 44px; padding: 0 10px; position: relative; opacity: 0.82; transition: opacity 160ms var(--ease); }
html[data-lang="th"] .tools button { letter-spacing: 0.04em; text-transform: none; font-size: 13px; }
.tools .lang { display: flex; }
.tools .lang button[aria-pressed="true"] { opacity: 1; }
.tools .lang button[aria-pressed="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 1px; background: var(--fc-accent); }
.tools__contents { border-left: 1px solid color-mix(in oklab, var(--fc, var(--cream)) 28%, transparent) !important; margin-left: 4px; padding-left: 16px !important; }
@media (hover: hover) and (pointer: fine) { .tools button:hover { opacity: 1; } }

.dock { position: fixed; z-index: 55; right: 12px; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; gap: 6px; padding: 8px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 320ms var(--ease), visibility 0s linear 320ms; }
html.in-collection .dock { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 320ms var(--ease), visibility 0s; }
.dock__sw { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--sw); box-shadow: 0 0 0 1px rgba(22, 24, 27, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12); padding: 0; position: relative; transition: transform 160ms var(--ease); }
.dock__sw::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--paper-gold); opacity: 0; transition: opacity 160ms var(--ease); }
.dock__sw[aria-checked="true"]::after { opacity: 1; }
.dock__sw:active { transform: scale(0.94); }

/* contents sheet */
dialog.contents { border: 0; padding: 0; width: 100%; max-width: none; height: 100%; max-height: none; background: transparent; color: var(--cream); }
dialog.contents::backdrop { background: rgba(16, 17, 19, 0.84); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.contents__sheet { max-width: 68rem; margin: clamp(56px, 9vh, 96px) auto 0; padding: 0 var(--sc-gutter) 48px; }
.contents__top { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(245, 242, 236, 0.18); padding-bottom: 20px; }
.contents__title { margin: 0; font-family: var(--serif); font-size: clamp(2.2rem, 3.6vw, 3.2rem); font-weight: 300; }
.contents__close { background: none; border: 0; color: inherit; font: inherit; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; min-height: 44px; padding: 0 4px; }
html[data-lang="th"] .contents__close { text-transform: none; letter-spacing: 0.02em; font-size: 14px; }
.contents__cols { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2rem, 6vw, 6rem); padding-top: 28px; }
.contents ol, .contents ul { list-style: none; margin: 0; padding: 0; }
.contents a { display: grid; grid-template-columns: 3.2rem 1fr auto; gap: 8px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid rgba(245, 242, 236, 0.12); text-decoration: none; min-height: 48px; }
.contents a b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 15px; color: var(--gold-light); }
.contents__chapters a { font-family: var(--serif); font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 300; }
.contents__systems a { font-size: 1rem; }
.contents__systems a b { font-family: var(--sans); font-style: normal; font-size: 12px; letter-spacing: 0.2em; font-weight: 500; }
.cfit { font-style: normal; font-size: 12px; color: var(--body); }
.cfit[data-status="fits"] { color: var(--gold-light); }
@media (hover: hover) and (pointer: fine) { .contents a:hover { background: rgba(245, 242, 236, 0.05); } }

/* ------------------------------------------------------------ TITLE PAGE --- */
.title__stage { background: var(--deep); }
.title__scene { position: absolute; inset: 0; overflow: hidden; --e: calc(var(--sc-p, 0) * var(--sc-p, 0) * (3 - 2 * var(--sc-p, 0))); }
.title__grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(245, 242, 236, 0.05) 1px, transparent 1px); background-size: calc(100% / 12) 100%; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent); translate: calc(var(--px, 0) * -6px) 0; }
.title__glow { position: absolute; width: 90vmax; height: 90vmax; right: -34vmax; bottom: -52vmax; background: radial-gradient(closest-side, rgba(169, 125, 75, 0.22), rgba(169, 125, 75, 0.06) 55%, transparent 72%); opacity: calc(0.55 + var(--e) * 0.45); translate: calc(var(--px, 0) * -16px) calc(var(--py, 0) * -10px); }
.title__rule { position: absolute; left: var(--sc-gutter); top: 0; bottom: 0; width: 1px; background: var(--gold); opacity: 0.85; transform-origin: 50% 0; transform: scaleY(calc(0.35 + var(--e) * 0.65)); }
.title__wordmark { position: absolute; z-index: 2; left: calc(var(--sc-gutter) + 2.6vw); top: 41%; margin: 0; font-family: var(--serif); font-size: clamp(5.6rem, 22vw, 28rem); font-weight: 300; letter-spacing: 0.1em; line-height: 0.8; color: var(--cream); translate: calc(var(--px, 0) * -10px) calc(-50% + var(--py, 0) * -6px); transform: translate3d(calc(var(--e) * -1.4vw), 0, 0); white-space: nowrap; }
.pane { position: absolute; z-index: 3; top: -2px; bottom: -2px; will-change: transform; border-inline: 3px solid #08090a;
  background:
    repeating-linear-gradient(90deg, rgba(245, 242, 236, 0.075) 0 2px, transparent 2px 5px, rgba(8, 9, 10, 0.16) 5px 7px, transparent 7px 10px),
    linear-gradient(103deg, rgba(216, 185, 143, 0.18), rgba(245, 242, 236, 0.035) 46%, rgba(216, 185, 143, 0.11));
  -webkit-backdrop-filter: blur(3.2px) saturate(1.15); backdrop-filter: blur(3.2px) saturate(1.15);
  box-shadow: inset 1px 0 0 rgba(245, 242, 236, 0.20), inset -1px 0 0 rgba(245, 242, 236, 0.12); }
.pane--a { left: 3vw; width: 50vw; transform: translate3d(calc(var(--e) * -62vw), 0, 0); translate: calc(var(--px, 0) * 8px) 0; }
.pane--b { left: 50vw; width: 48vw; transform: translate3d(calc(var(--e) * 62vw), 0, 0); translate: calc(var(--px, 0) * 14px) 0; background:
    repeating-linear-gradient(90deg, rgba(245, 242, 236, 0.06) 0 2px, transparent 2px 5px, rgba(8, 9, 10, 0.14) 5px 7px, transparent 7px 10px),
    linear-gradient(97deg, rgba(216, 185, 143, 0.10), rgba(245, 242, 236, 0.03) 50%, rgba(216, 185, 143, 0.16)); }
/* a slow reflection travelling across the glass, only while the title page is the page */
.pane { overflow: hidden; }
.pane::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%; background: linear-gradient(90deg, transparent, rgba(245, 242, 236, 0.11), transparent); transform: skewX(-14deg) translateX(-200%); animation: pane-sheen 12s ease-in-out infinite; pointer-events: none; }
.pane--b::after { animation-delay: 4.5s; }
html:not([data-ch="0"]) .pane::after { animation-play-state: paused; }
@keyframes pane-sheen { 0%, 52% { transform: skewX(-14deg) translateX(-200%); } 100% { transform: skewX(-14deg) translateX(420%); } }
.title__copy { position: absolute; z-index: 5; left: calc(var(--sc-gutter) + 2.6vw); bottom: clamp(28px, 7vh, 76px); max-width: 34rem; display: grid; gap: 14px; }
.title__sub { margin: 0; font-size: 12px; letter-spacing: 0.34em; color: var(--gold-light); font-weight: 500; }
.title__tagline { margin: 0; font-family: var(--serif); font-size: clamp(2rem, 3.2vw, 3.3rem); font-weight: 300; line-height: 1.08; color: var(--cream); }
html[data-lang="th"] .title__tagline { line-height: 1.3; font-size: clamp(1.8rem, 2.8vw, 2.8rem); }
.title__promise { margin: 0; color: var(--body); max-width: 36ch; }
.title__contents { position: absolute; z-index: 5; right: var(--sc-gutter); bottom: clamp(28px, 7vh, 76px); opacity: clamp(0, calc((var(--sc-p, 0) - 0.1) * 5), 1); translate: 0 calc((1 - clamp(0, calc((var(--sc-p, 0) - 0.1) * 5), 1)) * 14px); }
.title__contents ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; min-width: min(21rem, 40vw); }
.title__contents a { display: grid; grid-template-columns: 2.8rem 1fr; align-items: baseline; padding: 11px 0; border-top: 1px solid rgba(245, 242, 236, 0.16); text-decoration: none; font-family: var(--serif); font-size: clamp(1.15rem, 1.4vw, 1.35rem); color: var(--cream); min-height: 44px; }
.title__contents li:last-child a { border-bottom: 1px solid rgba(245, 242, 236, 0.16); }
.title__contents b { font-style: italic; font-size: 15px; font-weight: 400; letter-spacing: 0.08em; color: var(--gold-light); }
@media (hover: hover) and (pointer: fine) { .title__contents a:hover span { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; } }

/* ------------------------------------------------- I. openings (the rail) --- */
.rail__stage { background: var(--ink); }
.rail { display: flex; align-items: center; gap: clamp(20px, 3vw, 52px); height: 100%; padding: var(--folio-h) var(--sc-gutter) 32px; }
.rail__lead { flex: 0 0 min(36rem, 84vw); display: grid; gap: 1.4rem; align-content: center; padding-right: clamp(0px, 3vw, 3rem); }
.rail__item { flex: 0 0 auto; margin: 0; width: min(62svh, 40vw, 620px); display: grid; gap: 12px; align-self: center; }
.rail__item img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent); mask-image: linear-gradient(to bottom, #000 86%, transparent); }
figcaption { font-size: 12.5px; line-height: 1.5; color: var(--g-mute); letter-spacing: 0.02em; }
html[data-lang="th"] figcaption { font-size: 13px; }
.rail__item figcaption { display: flex; gap: 10px; align-items: baseline; margin-top: -26px; position: relative; padding-left: 2px; }
.rail__item figcaption::before, .photo figcaption::before { content: ""; width: 22px; height: 1px; background: var(--gold); flex: none; align-self: center; }
.rail__end { flex: 0 0 min(24rem, 70vw); display: grid; align-content: center; padding-right: var(--sc-gutter); }
.rail__end .sc-lede { max-width: 12ch; font-size: clamp(2rem, 3.2vw, 3.2rem); }

/* --------------------------------------------- I. your opening (signature) --- */
.survey__stage { background: var(--ink); }
.survey__grid { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(1rem, 4vw, 5rem); padding: var(--folio-h) var(--sc-gutter) 28px; align-items: center; }
.survey__panel { display: grid; gap: clamp(12px, 1.8vh, 20px); align-content: center; max-width: 32rem; }
.survey__fig { margin: 0; height: 100%; min-height: 0; display: flex; position: relative; overflow: clip; }
.survey__fig svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 28px); margin-top: 6px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--g-mute); }
html[data-lang="th"] .field label { letter-spacing: 0.02em; text-transform: none; font-size: 13px; }
.field__box { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--g-line); transition: border-color 160ms var(--ease); }
.field__box:focus-within { border-color: var(--gold-light); }
.field input[type="text"] { width: 100%; min-width: 0; background: none; border: 0; color: var(--g-ink); font: 300 clamp(2.3rem, 3.6vw, 3.5rem)/1.1 var(--serif); padding: 2px 0; font-variant-numeric: lining-nums tabular-nums; outline-offset: 6px; }
.field em { font-style: normal; font-size: 13px; color: var(--g-mute); letter-spacing: 0.06em; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; margin: 0; padding: 0; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 1px; background: var(--g-line); }
.range::-moz-range-track { height: 1px; background: var(--g-line); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--gold-light); border: 0; box-shadow: 0 0 0 5px color-mix(in oklab, var(--gold) 18%, transparent); }
.range::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--gold-light); border: 0; }
[data-ground="cream"] .range::-webkit-slider-thumb { background: var(--gold); }
[data-ground="cream"] .range::-moz-range-thumb { background: var(--gold); }
.samples { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0; }
.samples .sc-label { margin-right: 4px; }
.samples button { background: none; border: 1px solid var(--g-line); border-radius: 999px; color: var(--g-ink); font: inherit; font-size: 13px; padding: 0 16px; min-height: 40px; font-variant-numeric: tabular-nums; transition: border-color 160ms var(--ease), background 160ms var(--ease), transform 100ms var(--ease); }
.samples button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .samples button:hover { border-color: var(--gold-light); } }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, auto); gap: 6px 22px; justify-content: start; }
.steps li { position: relative; padding-left: 16px; font-size: 13px; letter-spacing: 0.04em; color: var(--g-mute); transition: color 240ms var(--ease); }
.steps li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; transition: background 240ms var(--ease); }
.steps li.is-on { color: var(--g-ink); }
.steps li.is-on::before { background: var(--gold-light); border-color: var(--gold-light); }
.tag [data-tag] { display: none; }
#openingTag[data-custom="false"] [data-tag="example"], #openingTag[data-custom="true"] [data-tag="yours"] { display: inline; }

/* --------------------------------------- II. the collection (cream paper) ---- */
.ch--collection { padding-block: var(--sc-section) clamp(2rem, 4vw, 4rem); }
.collection__head { display: grid; gap: clamp(1rem, 2vw, 1.6rem); margin-bottom: clamp(3rem, 6vw, 6rem); }
.finishes { display: grid; gap: 16px; margin-bottom: clamp(3rem, 6vw, 6rem); }
.finish-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 24px); }
.finish { background: none; border: 0; padding: 0; text-align: left; color: var(--g-ink); display: grid; gap: 8px; font: inherit; position: relative; }
.finish__sw { display: block; aspect-ratio: 5 / 3; background: var(--sw); border: 1px solid var(--g-line); position: relative; transition: transform 220ms var(--ease); }
.finish[aria-checked="true"] .finish__sw { outline: 1px solid var(--g-ink); outline-offset: 5px; }
.finish__name { font-family: var(--serif); font-size: 1.45rem; font-weight: 400; line-height: 1.1; }
html[data-lang="th"] .finish__name { font-size: 1.2rem; }
.finish__pi { font-size: 12px; color: var(--g-mute); letter-spacing: 0.02em; }
.finish:active .finish__sw { transform: scale(0.985); }
.index { display: grid; gap: 18px; }
.index__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--g-line); }
.index__item { border-left: 1px solid var(--g-line); }
.index__item:first-child { border-left: 0; }
.index__item a { display: grid; gap: 8px; align-content: start; padding: 18px clamp(6px, 0.9vw, 14px) 20px; text-decoration: none; color: var(--g-ink); height: 100%; min-height: 44px; transition: background 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .index__item a:hover { background: rgba(22, 24, 27, 0.04); } }
.thumb { width: 100%; height: auto; aspect-ratio: 80 / 104; display: block; }
.index__no { font-size: 12px; font-weight: 500; letter-spacing: 0.22em; color: var(--g-accent); }
.index__name { font-family: var(--serif); font-size: 1.12rem; line-height: 1.2; min-height: 3.6em; text-wrap: balance; }
html[data-lang="th"] .index__name { font-size: 1rem; line-height: 1.4; }
.index__fit { font-size: 12px; color: var(--g-mute); line-height: 1.35; min-height: 2.7em; }
.index__fit[data-status="fits"] { color: var(--g-ink); }
.index__fit[data-status="fits"]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); margin-right: 6px; vertical-align: 0.06em; }
.index__fit[data-status="wide"]::before, .index__fit[data-status="tall"]::before, .index__fit[data-status="both"]::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; margin-right: 6px; vertical-align: 0.06em; }
/* Thai compounds and number-unit pairs kept on one line (see keepTh in tools/build.mjs) */
.nb { white-space: nowrap; }

/* door symbols in the standard notation: ink outlines whatever the finish, operation marks in gold */
.thumb .th-open { fill: none; stroke: var(--g-ink); stroke-width: 1.4; }
.thumb .th-panel { fill: color-mix(in oklab, var(--g-ink) 4%, transparent); stroke: var(--g-ink); stroke-width: 1.1; }
.thumb .th-fixed { fill: color-mix(in oklab, var(--g-ink) 15%, transparent); }
.thumb .th-sym { fill: none; stroke: var(--g-accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.thumb .th-shaft { fill: none; stroke: var(--g-accent); stroke-width: 2.2; }
.thumb .th-head { fill: var(--g-accent); }
.thumb .th-axis { stroke: var(--g-ink); stroke-width: 1.1; stroke-dasharray: 7 2.5 1.6 2.5; }
.thumb .th-pin { fill: var(--g-ink); }
.thumb .th-motor { fill: var(--g-ink); }
.thumb .th-sensor { fill: var(--g-accent); }

/* ----------------------------------------------------------------- spreads -- */
.spread { padding-block: clamp(3.5rem, 7vw, 7.5rem); border-top: 1px solid var(--g-line); }
.spread__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5.5vw, 7rem); align-items: start; }
.spread--hinged .spread__grid, .spread--auto .spread__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.spread--hinged .spread__media, .spread--auto .spread__media { order: -1; }
.spread__text { display: grid; gap: clamp(1.6rem, 2.8vw, 2.6rem); align-content: start; }
.spread--tall .spread__text { padding-bottom: 46vh; }
.spread__head { display: grid; gap: 1rem; }
.spread__media { position: sticky; top: calc(var(--folio-h) + 8px); height: calc(100svh - var(--folio-h) - 40px); display: flex; }
.systabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--g-line); }
.systabs button { flex: 1 1 0; min-width: 8.5rem; background: none; border: 0; border-bottom: 1px solid transparent; margin-bottom: -1px; text-align: left; padding: 12px 14px 14px 0; color: var(--g-mute); font: inherit; display: grid; gap: 4px; min-height: 60px; transition: color 160ms var(--ease), border-color 160ms var(--ease); }
.systabs b { font-size: 12px; font-weight: 500; letter-spacing: 0.22em; display: flex; align-items: center; gap: 8px; }
.systabs b::after, .cfgtabs button span::after { content: ""; width: 6px; height: 6px; border-radius: 50%; }
[data-status="fits"] > b::after, [data-status="fits"] > span::after { background: var(--gold); }
[data-status="wide"] > b::after, [data-status="tall"] > b::after, [data-status="both"] > b::after, [data-status="wide"] > span::after, [data-status="tall"] > span::after, [data-status="both"] > span::after { border: 1px solid currentColor; }
.systabs span { font-family: var(--serif); font-size: 1.1rem; line-height: 1.2; }
html[data-lang="th"] .systabs span { font-size: 0.98rem; line-height: 1.35; }
.systabs button[aria-checked="true"] { color: var(--g-ink); border-bottom-color: var(--g-ink); }
@media (hover: hover) and (pointer: fine) { .systabs button:hover { color: var(--g-ink); } }
.photo { margin: 0; display: grid; gap: 12px; max-width: 34rem; }
.photo img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.photo figcaption { display: flex; gap: 10px; align-items: baseline; }
/* a definite width, never shrink-to-fit: a lazy image that sizes its own box shifts every section below it */
.photo--second { justify-self: end; width: min(100%, 26rem); max-width: none; }

.plate { display: grid; gap: clamp(1.1rem, 2vw, 1.6rem); align-content: start; }
.plate[hidden], .cfg[hidden] { display: none; }
.plate__id { display: flex; align-items: baseline; gap: 14px; margin: 0; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--g-accent); }
html[data-lang="th"] .plate__id { letter-spacing: 0.04em; text-transform: none; font-size: 13px; }
.plate__no { font-weight: 500; color: var(--g-ink); letter-spacing: 0.24em; }
.plate__name { margin: 0.4rem 0 0; font-family: var(--serif); font-size: clamp(2.1rem, 3.2vw, 3.3rem); font-weight: 300; line-height: 1.05; text-wrap: balance; }
html[data-lang="th"] .plate__name { line-height: 1.28; font-size: clamp(1.75rem, 2.6vw, 2.6rem); }
.specs { margin: 0; }
.specs .row { display: grid; grid-template-columns: minmax(8rem, 36%) 1fr; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--g-line); align-items: baseline; }
.specs .row:last-child { border-bottom: 1px solid var(--g-line); }
.specs dt { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-mute); line-height: 1.4; }
html[data-lang="th"] .specs dt { letter-spacing: 0.01em; text-transform: none; font-size: 13.5px; }
.specs dd { margin: 0; font-size: 1.02rem; color: var(--g-ink); font-weight: 400; }
.specs .num { font-family: var(--serif); font-size: 1.85rem; font-weight: 400; letter-spacing: 0; line-height: 1; }
.specs small { font-size: 13px; color: var(--g-mute); }
.specs .dim { color: var(--g-mute); font-size: 12px; margin-left: 4px; }
.panelcap { letter-spacing: 0.08em; font-size: 0.86rem; }
.fin { display: inline-flex; align-items: center; gap: 8px; margin: 2px 16px 2px 0; font-size: 0.95rem; }
.fin i { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: 0 0 0 1px rgba(22, 24, 27, 0.4); display: inline-block; flex: none; }
.fit { position: relative; margin: 0; padding-left: 16px; font-size: 0.95rem; color: var(--g-ink); }
.fit::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.fit[data-status="wide"], .fit[data-status="tall"], .fit[data-status="both"] { color: var(--g-mute); }
.fit[data-status="wide"]::before, .fit[data-status="tall"]::before, .fit[data-status="both"]::before { background: none; border: 1px solid currentColor; }
.note { margin: 0; font-size: 0.92rem; color: var(--g-soft); }
.cfgtabs { display: flex; flex-wrap: wrap; gap: 8px; }
.cfgtabs button { background: none; border: 1px solid var(--g-line); border-radius: 999px; color: var(--g-ink); font: inherit; font-size: 13px; letter-spacing: 0.06em; min-height: 44px; min-width: 58px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease), transform 100ms var(--ease); }
.cfgtabs button span { display: inline-flex; align-items: center; gap: 7px; }
.cfgtabs button:active { transform: scale(0.97); }
.cfgtabs button[aria-checked="true"] { background: var(--g-ink); color: var(--g-bg); border-color: var(--g-ink); }
.cfgtabs button[aria-checked="true"] span::after { background: var(--g-bg); }
.ctls { display: flex; flex-wrap: wrap; gap: 16px 30px; }
.ctls:empty { display: none; }
.ctls--leaf { display: grid; gap: 18px; padding: 18px 0 4px; border-top: 1px solid var(--g-line); }
.ctl { display: grid; gap: 8px; }
.ctl__label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-mute); }
html[data-lang="th"] .ctl__label { letter-spacing: 0.01em; text-transform: none; font-size: 13.5px; }
.rng { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; max-width: 30rem; }
.rng output { font-family: var(--serif); font-size: 1.7rem; font-weight: 400; min-width: 4.4ch; text-align: right; font-variant-numeric: lining-nums tabular-nums; color: var(--g-ink); }
.seg { display: inline-flex; border: 1px solid var(--g-line); border-radius: 999px; overflow: hidden; }
.seg button { background: none; border: 0; color: var(--g-soft); font: inherit; font-size: 13.5px; min-height: 44px; padding: 0 18px; transition: background 160ms var(--ease), color 160ms var(--ease); }
.seg button + button { border-left: 1px solid var(--g-line); }
.seg button[aria-checked="true"] { background: var(--g-ink); color: var(--g-bg); }
.tests { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.tests li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 2px 1rem; align-items: baseline; padding: 0.85rem 0; border-top: 1px solid var(--g-line); }
.tests li:last-child { border-bottom: 1px solid var(--g-line); }
.tests li[hidden] { display: none; }
.tests .num { font-family: var(--serif); font-size: 1.95rem; font-weight: 400; line-height: 1; }
.tests .lbl { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-accent); }
html[data-lang="th"] .tests .lbl { letter-spacing: 0.01em; text-transform: none; font-size: 13px; }
.tests em { grid-column: 2; font-style: normal; color: var(--g-soft); font-size: 0.95rem; }
/* keep: a pill; a gold tick appears once the system is kept */
.keep { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 26px 0 20px; border-radius: 999px; background: none; border: 1px solid color-mix(in oklab, var(--g-ink) 55%, transparent); color: var(--g-ink); font: inherit; font-size: 14px; letter-spacing: 0.03em; transition: background 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 100ms var(--ease); }
.keep__mark { width: 16px; height: 16px; border-radius: 50%; border: 1px solid currentColor; position: relative; flex: none; }
.keep[aria-pressed="true"] .keep__mark { background: var(--gold); border-color: var(--gold); }
.keep[aria-pressed="true"] .keep__mark::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--g-bg); border-width: 0 1.5px 1.5px 0; rotate: 45deg; }
.keep .keep__on, .keep[aria-pressed="true"] .keep__off { display: none; }
.keep[aria-pressed="true"] .keep__on { display: inline; }
.keep[aria-pressed="true"] { background: var(--g-ink); color: var(--g-bg); border-color: var(--g-ink); }
@media (hover: hover) and (pointer: fine) { .keep:hover { border-color: var(--gold); } .keep[aria-pressed="true"]:hover { background: color-mix(in oklab, var(--g-ink) 86%, var(--gold)); } }

/* the operating drawing */
.fig { margin: 0; display: flex; flex-direction: column; width: 100%; min-height: 0; gap: 12px; }
.fig__frame { flex: 1 1 auto; min-height: 0; position: relative; overflow: clip; }
.fig__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fig__plan { flex: 0 0 auto; height: clamp(130px, 26svh, 250px); position: relative; border-top: 1px solid var(--g-line); overflow: clip; }
.fig__plan[hidden] { display: none; }
.fig__plansvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fig__planlabel { position: absolute; left: 0; top: 8px; z-index: 1; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--g-mute); }
html[data-lang="th"] .fig__planlabel { letter-spacing: 0.02em; text-transform: none; font-size: 13px; }
.fig__foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; }
.fig__cap { font-size: 12px; letter-spacing: 0.12em; color: var(--g-soft); text-transform: uppercase; }
html[data-lang="th"] .fig__cap { letter-spacing: 0.02em; text-transform: none; font-size: 13.5px; }
/* operate: the door's own control, a solid pill with a gold medallion */
.operate { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px 0 7px; border-radius: 999px; background: var(--g-ink); border: 1px solid var(--g-ink); color: var(--g-bg); font: 500 12.5px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 16px 34px -22px rgba(16, 17, 19, 0.85); transition: background 220ms var(--ease), box-shadow 220ms var(--ease), transform 120ms var(--ease); }
html[data-lang="th"] .operate { font-size: 14.5px; letter-spacing: 0.02em; text-transform: none; font-weight: 400; }
.operate__icon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, var(--gold-light), var(--gold)); flex: none; }
.operate__icon svg { width: 20px; height: 20px; fill: none; stroke: var(--deep); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 320ms var(--ease); }
.operate[aria-pressed="true"] .operate__icon svg { transform: scaleX(-1); }
.operate .operate__close, .operate[aria-pressed="true"] .operate__open { display: none; }
.operate[aria-pressed="true"] .operate__close { display: inline; }
@media (hover: hover) and (pointer: fine) { .operate:hover { background: color-mix(in oklab, var(--g-ink) 84%, var(--gold)); box-shadow: 0 18px 38px -20px rgba(16, 17, 19, 0.9); } }

/* drawing classes (doors.js, scenes.js) */
.st-int-a { stop-color: var(--int-a); } .st-int-b { stop-color: var(--int-b); }
.d-wall { fill: var(--wall); }
.d-roomfloor { fill: var(--roomfloor); }
.d-horizon { stroke: var(--roomhorizon); stroke-width: 1; fill: none; }
.d-refl { fill: var(--refl); pointer-events: none; }
.d-hatchline { stroke: var(--hatchc); stroke-width: 6; fill: none; }
.d-floorfill { fill: var(--floorfill); }
.d-floor { stroke: var(--floor); stroke-width: 1.4; opacity: 0.85; fill: none; }
.d-open-outline { fill: none; stroke: var(--dim); stroke-width: 1; stroke-dasharray: 6 5; opacity: 0.85; }
.d-pocket { fill: none; stroke: var(--dim); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.8; }
.d-frame { fill: var(--frame); stroke: var(--frame-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.d-casing { fill: var(--frame); }
.d-glass { fill: var(--glass); stroke: var(--glass-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.d-fixmark { fill: none; stroke: var(--frame); stroke-width: 1; opacity: 0.45; }
.d-sheen { pointer-events: none; }
.d-handle { fill: var(--handle); }
.d-handle-line { stroke: var(--handle); }
.d-track { fill: var(--frame); stroke: var(--frame-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.d-track-hidden { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 8 6; fill: none; opacity: 0.7; }
.d-axis { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 10 4 2 4; fill: none; }
.d-axis__pin { fill: var(--dim); }
.d-dim { stroke: var(--dim); stroke-width: 1; fill: none; }
.d-dim--ext { opacity: 0.45; stroke-dasharray: 2 3; }
.d-dimtext { fill: var(--label); font-family: var(--sans); font-size: 22px; font-weight: 400; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; }
/* the stated maximum, when the opening is larger: the door is drawn at it, and this says so */
.d-maxdim { stroke: var(--g-accent); stroke-width: 1.4; fill: none; }
.d-maxline { stroke: var(--g-accent); stroke-width: 1.4; stroke-dasharray: 6 5; fill: none; }
.d-maxtext { fill: var(--g-accent); font-family: var(--sans); font-size: 22px; font-weight: 500; letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
.d-sensor__body { fill: var(--frame); stroke: var(--frame-edge); stroke-width: 1; vector-effect: non-scaling-stroke; }
.d-sensor__eye { fill: var(--dim); }
.d-wave { fill: none; stroke: var(--dim); stroke-width: 1.6; stroke-linecap: round; }
.p-wall { fill: var(--planwall); stroke: var(--g-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.p-pocket { fill: none; stroke: var(--dim); stroke-width: 1; stroke-dasharray: 3 3; }
.p-track { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 7 5; fill: none; }
.p-leaf, .p-fold { stroke: var(--plan-ink); }
.p-panel { fill: var(--plan-ink); }
.p-panel--fixed { fill: color-mix(in oklab, var(--plan-ink) 42%, transparent); }
.p-arc { fill: none; stroke: var(--dim); stroke-width: 1.6; }
.p-ref { fill: none; stroke: var(--dim); stroke-width: 1; stroke-dasharray: 5 5; opacity: 0.55; }
.p-dim { fill: none; stroke: var(--dim); stroke-width: 1; }
.p-pin { fill: var(--g-bg); stroke: var(--dim); stroke-width: 12; }
.p-label { fill: var(--label); font-family: var(--sans); font-size: 17px; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.p-label--angle { fill: var(--dim); font-family: var(--serif); font-size: 26px; font-weight: 500; }
/* survey and peak */
.sv-outline { fill: none; stroke: var(--gold-light); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; }
.sv-outline.is-complete { stroke: var(--gold-light); stroke-width: 2.4; }
.sv-diag, .sv-level { fill: none; stroke: var(--gold-light); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.85; }
.sv-corner { fill: var(--deep); stroke: var(--gold-light); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; }
.sv-scan { stroke: rgba(216, 185, 143, 0.28); stroke-width: 1; fill: none; }
.sv-bob { fill: var(--gold-light); opacity: 0; }
.sv-bubble { opacity: 0; }
.sv-bubble__tube { fill: rgba(16, 17, 19, 0.6); stroke: var(--gold-light); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.sv-bubble__tick { stroke: var(--gold-light); stroke-width: 1; opacity: 0.6; }
.sv-bubble__dot { fill: var(--gold-light); }
.sv-done { opacity: 0; }
.sv-done__ring { fill: rgba(16, 17, 19, 0.7); stroke: var(--gold-light); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sv-done__tick { fill: none; stroke: var(--gold-light); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.si-outline { fill: none; stroke: rgba(216, 185, 143, 0.55); stroke-width: 1; }
.si-floor { stroke: rgba(216, 185, 143, 0.4); stroke-width: 1; }
.pk-stroke { stroke: var(--gold-light); stroke-width: 1.8; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: butt; }
.pk-mitre__c { fill: none; stroke: var(--gold-light); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0; }
.pk-detail { opacity: 0; }
.pk-leader { stroke: var(--gold-light); stroke-width: 1; stroke-dasharray: 3 3; }
.pk-detail__bg { fill: rgba(16, 17, 19, 0.92); stroke: var(--gold-light); stroke-width: 1.2; }
.pk-detail__bar { fill: #3a3d42; stroke: rgba(245, 242, 236, 0.35); stroke-width: 1; }
.pk-detail__bar--b { fill: #44474c; }
.pk-detail__seam { stroke: var(--gold-light); stroke-width: 2; }
.pk-detail__right { fill: none; stroke: var(--gold-light); stroke-width: 1.4; }
.pk-label { fill: var(--gold-light); font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: 0.02em; }
.pk-label--big { font-size: 34px; }
.pk-part { fill: var(--gold-light); opacity: 0; }
.pk-bolt { fill: none; stroke: var(--gold-light); stroke-width: 1.5; vector-effect: non-scaling-stroke; opacity: 0; }
.pk-complete { fill: none; stroke: var(--gold-light); stroke-width: 1; stroke-dasharray: 4 5; opacity: 0; }

/* -------------------------------------------------------- the 3D acts ------- */
.stage3d { position: absolute; inset: 0; }
.stage3d canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 700ms var(--ease); }
/* a scene appears once its shaders are compiled, never half-built and never by freezing the page */
.stage3d.is-live canvas { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .stage3d canvas { transition: none; } }
html.no-webgl .stage3d, .stage3d.is-fallback { display: none; }

/* III. made to size: the station fills the stage, the ledger reads on a veil at the left */
.make__stage { background: var(--deep); }
.make__veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(16, 17, 19, 1) 0%, rgba(16, 17, 19, 0.95) 34%, rgba(16, 17, 19, 0.62) 47%, rgba(16, 17, 19, 0) 64%), linear-gradient(to top, rgba(16, 17, 19, 0.75), transparent 24%), linear-gradient(to bottom, rgba(16, 17, 19, 0.7), transparent 30%); }
html.no-webgl .make__veil { display: none; }
.make__copy { position: absolute; left: var(--sc-gutter); top: 0; bottom: 0; width: min(38rem, 46vw); display: grid; align-content: center; gap: clamp(0.6rem, 1.4vh, 1.2rem); padding-top: var(--folio-h); }
.make__copy .numeral { margin-bottom: 0.2rem; }
.ledger { list-style: none; margin: clamp(0.8rem, 2.4vh, 2rem) 0 0; padding: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: clamp(1.2rem, 2.4vw, 2.4rem); }
.ledger li { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; row-gap: 4px; align-items: baseline; padding: clamp(0.7rem, 1.6vh, 1.2rem) 0; border-top: 1px solid var(--g-line); }
.ledger li:last-child { border-bottom: 1px solid var(--g-line); }
.ledger .num { font-family: var(--serif); font-size: clamp(2.2rem, 3.4vw, 3.5rem); font-weight: 300; line-height: 1; white-space: nowrap; }
.ledger__k { font-size: 0.98rem; color: var(--g-soft); }

/* III. parts of a panel: the model on the page's own cream, tags pinned to the parts */
.anatomy__stage { background: var(--cream); }
.anatomy__copy { position: absolute; left: var(--sc-gutter); top: calc(var(--folio-h) + 2vh); max-width: 30rem; display: grid; pointer-events: none; }
/* the whole panel, then the close-up of the top hardware: two captions in the same place, one at a time */
.anatomy__view { grid-area: 1 / 1; display: grid; gap: 0.8rem; align-content: start; }
.anatomy__view .sc-label { margin-bottom: -0.2rem; }
html.no-webgl .anatomy__view--close { display: none; }
html.no-webgl .anatomy__view:not(.anatomy__view--close) { opacity: 1 !important; transform: none !important; }
.tags3d { position: absolute; inset: 0; pointer-events: none; }
.tag3d { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform; }
.tag3d::before { content: ""; position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.tag3d__txt { position: absolute; top: 0; display: grid; gap: 2px; padding: 6px 12px; white-space: nowrap; background: rgba(245, 242, 236, 0.9); border-left: 1px solid var(--gold); transform: translate(12px, -50%); color: var(--paper-ink); }
.tag3d.is-l .tag3d__txt { right: 0; border-left: 0; border-right: 1px solid var(--gold); transform: translate(-12px, -50%); text-align: right; }
.tag3d b { font-family: var(--serif); font-size: 1.05rem; font-weight: 500; line-height: 1.15; }
html[data-lang="th"] .tag3d b { font-size: 0.98rem; font-weight: 400; }
.tag3d code { font-size: 12px; letter-spacing: 0.08em; color: var(--paper-gold); }
.parts-list { display: none; list-style: none; margin: 0; padding: 0; }
.parts-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 7px 0; border-top: 1px solid var(--g-line); font-size: 0.92rem; }
.parts-list code { color: var(--g-mute); }
html.no-webgl .parts-list { display: grid; position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); top: 42%; max-width: 40rem; }

/* four nations: four flags in glass become one door */
.nations__stage { background: var(--deep); }
.nations__head { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); top: calc(var(--folio-h) + 1vh); display: grid; gap: 12px; justify-items: center; text-align: center; pointer-events: none; }
.nations__list { position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: clamp(22px, 5.5vh, 60px); list-style: none; margin: 0 auto; padding: 0; max-width: 84rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 40px); }
.nation { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 2px; align-items: center; padding-top: 16px; border-top: 1px solid rgba(216, 185, 143, 0.38); }
.nation__flag { grid-row: 1 / span 3; width: 42px; height: 28px; object-fit: cover; display: block; box-shadow: 0 0 0 1px rgba(245, 242, 236, 0.22), 0 10px 24px -14px rgba(0, 0, 0, 0.8); }
.nation__country { font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold-light); }
html[data-lang="th"] .nation__country { letter-spacing: 0.02em; text-transform: none; font-size: 13px; }
.nation__name { font-family: var(--serif); font-size: clamp(1.4rem, 1.9vw, 1.95rem); font-weight: 400; line-height: 1.1; color: var(--cream); }
.nation__role { font-size: 13px; color: var(--body); line-height: 1.45; }
html.no-webgl .nations__list { top: 40%; bottom: auto; }

/* ------------------------------------------------------------- the silence -- */
.ch--silence { min-height: 92svh; display: grid; align-items: end; }
.silence__scene { position: relative; min-height: 92svh; display: grid; align-items: end; padding: 0 var(--sc-gutter) clamp(3rem, 12vh, 8rem); }
.silence__scene svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.85; }
.silence__line { position: relative; margin: 0; font-family: var(--serif); font-style: italic; font-size: clamp(1.9rem, 3.2vw, 3rem); font-weight: 300; color: var(--cream); max-width: 26ch; }
html[data-lang="th"] .silence__line { font-style: normal; line-height: 1.45; font-size: clamp(1.6rem, 2.6vw, 2.5rem); }

/* ------------------------------------------------------------------ the peak -- */
.peak__stage { background: var(--deep); }
.peak__grid { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(15rem, 4fr) minmax(0, 8fr); gap: clamp(1rem, 4vw, 5rem); padding: var(--folio-h) var(--sc-gutter) 30px; align-items: center; }
.peak__side { display: grid; gap: clamp(1rem, 2.4vh, 1.8rem); align-content: center; }
.steps--peak { grid-template-columns: repeat(2, auto); }
.steps--peak li.is-current { color: var(--gold-light); }
.peak__fig { margin: 0; position: relative; height: 100%; min-height: 0; overflow: clip; }
.peak__fig svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.peak__fact { position: absolute; left: 0; bottom: 4px; margin: 0; display: flex; align-items: baseline; gap: 12px; opacity: 0; color: var(--g-soft); font-size: 0.95rem; }
.peak__fact .num { font-family: var(--serif); font-size: clamp(2rem, 3vw, 3rem); font-weight: 300; color: var(--cream); }
.peak__end { position: absolute; right: var(--sc-gutter); bottom: 40px; margin: 0; opacity: 0; text-align: right; max-width: 22ch; z-index: 3; }

/* ------------------------------------------------------------ IV. installed --- */
.ch--installed { padding-top: var(--sc-section); overflow: clip; }
.installed__head { display: grid; gap: clamp(1rem, 2vw, 1.6rem); margin-bottom: clamp(3rem, 7vw, 7rem); max-width: 96rem; }
.installed__head .sc-display { max-width: 15ch; }
.mosaic { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 44px); padding: 0 var(--sc-gutter) var(--sc-section); align-items: start; max-width: 96rem; margin-inline: auto; }
.mosaic__item { margin: 0; display: grid; gap: 10px; will-change: transform; }
.mosaic__item img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.mosaic__item figcaption { display: flex; gap: 10px; align-items: baseline; }
.mosaic__item figcaption::before { content: ""; width: 22px; height: 1px; background: var(--gold); flex: none; align-self: center; }
.m-a { grid-column: 1 / span 5; grid-row: 1; }
.m-b { grid-column: 7 / span 4; grid-row: 1; margin-top: clamp(4rem, 12vw, 12rem); }
.m-c { grid-column: 3 / span 6; grid-row: 2; }
.m-d { grid-column: 10 / span 3; grid-row: 2; margin-top: clamp(2rem, 8vw, 8rem); }
.m-e { grid-column: 1 / span 4; grid-row: 3; margin-top: clamp(0rem, 2vw, 2rem); }

/* --------------------------------------------------------------- colophon ---- */
.ch--selection { padding-block: var(--sc-section) 0; }
.colophon { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(2.5rem, 5vw, 5rem) clamp(1rem, 3vw, 3rem); align-items: start; }
.colophon__lede { grid-column: 1 / span 6; display: grid; gap: 1.6rem; }
.colophon__selection { grid-column: 7 / span 6; display: grid; gap: 1.3rem; }
.brief { margin: 0; }
.brief .row { display: grid; grid-template-columns: minmax(6rem, 30%) 1fr; gap: 1rem; padding: 0.9rem 0; border-top: 1px solid var(--g-line); align-items: baseline; }
.brief .row:last-child { border-bottom: 1px solid var(--g-line); }
.brief dt { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-mute); }
html[data-lang="th"] .brief dt { letter-spacing: 0.01em; text-transform: none; font-size: 13.5px; }
.brief dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 400; }
.brief__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.brief__list li { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: baseline; }
.brief__list b { font-size: 12px; letter-spacing: 0.16em; font-weight: 500; }
.brief__list code { grid-column: 2; color: var(--g-mute); }
.brief__list em { grid-column: 2; font-style: normal; font-size: 0.92rem; color: var(--g-soft); }
.brief__empty { color: var(--g-mute); display: block !important; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 0.4rem; }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-top: clamp(5rem, 10vw, 9rem); padding: 1.6rem var(--sc-gutter) 2.2rem; border-top: 1px solid var(--g-line); }
.wordmark-foot { margin: 0; font-family: var(--serif); font-size: 15px; letter-spacing: 0.42em; font-weight: 500; color: var(--g-ink); }
.wordmark-foot span { font-family: var(--sans); font-size: 12px; font-weight: 400; letter-spacing: 0.3em; margin-left: 1.2em; color: var(--g-mute); }
.foot__logos { display: flex; align-items: center; gap: 24px; }
.foot__logos img { display: block; height: 30px; width: auto; mix-blend-mode: multiply; opacity: 0.92; }

/* ------------------------------------------------------------------- print --- */
.print-sheet { display: none; }
@media print {
  @page { size: A4; margin: 16mm; }
  html, body { background: #fff !important; }
  body > *:not(.print-sheet) { display: none !important; }
  .print-sheet { display: block !important; color: #16181B; font: 400 10.5pt/1.5 "Inter Tight", "IBM Plex Sans Thai", sans-serif; }
  .print-sheet header { display: flex; justify-content: space-between; border-bottom: 1px solid #16181B; padding-bottom: 8pt; margin-bottom: 20pt; }
  .print-sheet .ps-mark { margin: 0; font-family: "Cormorant Garamond", serif; font-weight: 500; letter-spacing: 0.3em; }
  .print-sheet .ps-mark span { font-family: "Inter Tight", sans-serif; font-weight: 400; margin-left: 1em; letter-spacing: 0.2em; font-size: 8pt; }
  .print-sheet .ps-date { margin: 0; font-size: 9pt; color: #4A4D52; }
  .print-sheet h1 { font-family: "Cormorant Garamond", "Noto Serif Thai", serif; font-weight: 300; font-size: 28pt; margin: 0 0 14pt; }
  .print-sheet dl { margin: 0 0 16pt; }
  .print-sheet dl div { display: grid; grid-template-columns: 30% 1fr; padding: 5pt 0; border-top: 0.5pt solid #bbb; }
  .print-sheet dt { color: #635F58; font-size: 9pt; text-transform: uppercase; letter-spacing: 0.1em; }
  .print-sheet dd { margin: 0; }
  .print-sheet table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
  .print-sheet th { text-align: left; font-weight: 500; font-size: 8pt; text-transform: uppercase; letter-spacing: 0.1em; color: #635F58; border-bottom: 0.5pt solid #16181B; padding: 4pt 6pt 4pt 0; }
  .print-sheet td { vertical-align: top; padding: 7pt 6pt 7pt 0; border-bottom: 0.5pt solid #ccc; }
  .print-sheet code { color: #635F58; }
  .print-sheet footer { margin-top: 22pt; font-size: 8.5pt; color: #4A4D52; border-top: 0.5pt solid #bbb; padding-top: 8pt; }
}

/* ----------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .pane--a { transform: translate3d(-62vw, 0, 0) !important; }
  .pane--b { transform: translate3d(62vw, 0, 0) !important; }
  .title__wordmark { transform: none !important; translate: 0 -50% !important; }
  .title__contents { opacity: 1 !important; translate: 0 0 !important; }
  .title__rule { transform: none !important; }
  .title__grid, .title__glow, .pane { translate: none !important; }
  .mosaic__item { transform: none !important; }
  .pane::after { animation: none; display: none; }
  .operate__icon svg { transition: none; }
}

/* ------------------------------------------------------------------ tablet -- */
@media (max-width: 1100px) {
  .dock { right: auto; left: 50%; top: auto; bottom: 10px; translate: -50% 0; flex-direction: row; padding: 6px 10px; background: rgba(245, 242, 236, 0.94); border: 1px solid var(--paper-rule); border-radius: 999px; }
  .dock__sw { width: 34px; height: 34px; }
  .index__list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .index__item:nth-child(5n + 1) { border-left: 0; }
  .index__item:nth-child(n + 6) { border-top: 1px solid var(--g-line); }
  .spread__grid, .spread--hinged .spread__grid, .spread--auto .spread__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nations__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .make__copy { width: min(34rem, 52vw); }
}
/* on wide screens the closing line sits under the drawing, where the cycle figure was */
@media (min-width: 861px) {
  .peak__side { grid-column: 1; grid-row: 1; }
  .peak__fig { grid-column: 2; grid-row: 1; }
  .peak__end { position: static; grid-column: 2; grid-row: 1; align-self: end; justify-self: start; text-align: left; max-width: 26ch; margin: 0 0 4px; }
}
@media (max-height: 780px) and (min-width: 861px) {
  :root { --folio-h: 74px; }
  .survey__panel { gap: 8px; }
  .field input[type="text"] { font-size: 2.3rem; }
  .ledger li { padding: 0.5rem 0; }
  .ledger .num { font-size: 2.4rem; }
  .nation__role { display: none; }
}

/* ------------------------------------------------------------------- phone --- */
@media (max-width: 860px) {
  :root { --folio-h: 62px; }
  .folio { top: 12px; }
  .folio__bench { display: none; }
  .tools { top: 2px; }
  .tools button { padding: 0 8px; }
  .tools__contents { padding-left: 12px !important; }
  .dock { right: auto; left: 50%; top: auto; bottom: 10px; translate: -50% 0; flex-direction: row; padding: 6px 10px; background: rgba(245, 242, 236, 0.92); border: 1px solid var(--paper-rule); border-radius: 999px; }
  .dock__sw { width: 34px; height: 34px; }

  .title__wordmark { font-size: 27vw; top: 34%; left: calc(var(--sc-gutter) + 2vw); letter-spacing: 0.06em; }
  .pane--a { left: 0; width: 56vw; transform: translate3d(calc(var(--e) * -60vw), 0, 0); }
  .pane--b { left: 44vw; width: 58vw; transform: translate3d(calc(var(--e) * 62vw), 0, 0); }
  .title__copy { left: var(--sc-gutter); right: var(--sc-gutter); bottom: 150px; }
  .title__contents { left: var(--sc-gutter); right: var(--sc-gutter); bottom: 12px; }
  .title__contents ol { min-width: 0; grid-template-columns: 1fr 1fr; column-gap: 20px; }
  .title__contents a { padding: 8px 0; font-size: 1.05rem; grid-template-columns: 2rem 1fr; }
  .title__contents li:nth-child(3) a { border-bottom: 1px solid rgba(245, 242, 236, 0.16); }

  .rail { padding-bottom: 24px; }
  .rail__item { width: min(74vw, 62svh * 0.8, 340px); }
  .rail__item img { aspect-ratio: 4 / 5; }
  .rail__lead { flex-basis: 86vw; }

  .survey__grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 44svh) auto; gap: 8px; align-content: start; padding-top: 56px; }
  .survey__fig { order: -1; }
  .survey__panel { gap: 8px; }
  .survey__panel .sc-body, .survey__panel .steps { display: none; }
  .survey__panel .q-h2 { font-size: 2rem; }
  .field input[type="text"] { font-size: 2.1rem; }
  .samples .sc-label { display: none; }
  .samples button { flex: 1 1 auto; }

  .finish-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the ten systems become a list: a small elevation, the name, and the fit */
  .index__list { grid-template-columns: 1fr; }
  .index__item { border-left: 0 !important; border-top: 1px solid var(--g-line) !important; }
  .index__item:first-child { border-top: 0 !important; }
  .index__item a { grid-template-columns: 52px 1fr; grid-template-areas: "thumb no" "thumb name" "thumb fit"; gap: 2px 16px; align-items: center; padding: 12px 0; }
  .index__item .thumb { grid-area: thumb; width: 52px; }
  .index__no { grid-area: no; align-self: end; }
  .index__name { grid-area: name; min-height: 0; font-size: 1.2rem; }
  .index__fit { grid-area: fit; min-height: 0; align-self: start; }

  .spread__grid, .spread--hinged .spread__grid, .spread--auto .spread__grid { grid-template-columns: 1fr; }
  .spread__media, .spread--hinged .spread__media, .spread--auto .spread__media { order: -1; }
  .spread__text { padding-bottom: 76px; }
  .spread__media { position: sticky; top: var(--folio-h); height: 50svh; z-index: 2; background: var(--g-bg); padding-bottom: 8px; }
  .fig { gap: 8px; }
  .fig__plan { height: clamp(70px, 11svh, 110px); }
  .fig__cap { display: none; }
  .fig__foot { justify-content: flex-start; }
  .operate { min-height: 46px; padding: 0 20px 0 5px; }
  .operate__icon { width: 34px; height: 34px; }
  .spread--tall .spread__text { padding-bottom: 30vh; }
  .systabs button { min-width: 0; padding-right: 8px; }
  .specs .row { grid-template-columns: 1fr; gap: 2px; }
  .tests li { grid-template-columns: 1fr; }
  .tests em { grid-column: 1; }
  .keep { width: 100%; justify-content: center; }
  .photo { max-width: none; }
  .photo--second { justify-self: start; }

  /* made to size: the station above, the ledger below */
  .stage3d--machine { bottom: 46%; }
  .make__veil { background: linear-gradient(to bottom, rgba(16, 17, 19, 0) 40%, rgba(16, 17, 19, 0.9) 54%, var(--deep) 60%); }
  .make__copy { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; top: auto; bottom: 0; padding: 0 0 22px; align-content: end; }
  .make__copy .numeral { display: none; }
  .make__copy .q-h1 { font-size: 2.2rem; }
  .ledger { margin-top: 4px; }
  .ledger li { padding: 0.4rem 0; } /* keeps the shared subgrid columns, so the widest value sets the label column */
  .ledger .num { font-size: 1.55rem; }
  .ledger__k { font-size: 0.86rem; }

  /* parts of a panel: the model above, the parts as a list below */
  .stage3d--anatomy { top: calc(var(--folio-h) + 56px); bottom: 40%; }
  /* the canvases end in the page ground, never on a hard line */
  .stage3d--machine canvas, .stage3d--nations canvas, .stage3d--anatomy canvas { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent); mask-image: linear-gradient(to bottom, #000 78%, transparent); }
  .tags3d { display: none; }
  .anatomy__copy { top: calc(var(--folio-h) + 4px); }
  .anatomy__copy .sc-body { display: none; }
  .anatomy__copy .q-h2 { font-size: 1.9rem; }
  .parts-list { display: grid; position: absolute; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 16px; top: auto; grid-template-columns: 1fr 1fr; column-gap: 18px; }
  .parts-list li { font-size: 0.8rem; padding: 5px 0; flex-direction: column; gap: 0; }
  .parts-list code { font-size: 12px; }
  html.no-webgl .parts-list { top: auto; }

  /* four nations: the door above, the partners in two columns below */
  .stage3d--nations { bottom: 38%; }
  .nations__head .q-h2 { font-size: 1.85rem; }
  .nations__list { grid-template-columns: 1fr 1fr; gap: 14px 16px; bottom: 16px; }
  .nation { column-gap: 10px; padding-top: 10px; }
  .nation__flag { width: 30px; height: 20px; grid-row: 1 / span 2; }
  .nation__name { font-size: 1.3rem; }
  .nation__role { grid-column: 1 / -1; font-size: 12px; }

  .peak__grid { grid-template-columns: 1fr; grid-template-rows: minmax(0, 46svh) auto; gap: 8px; align-content: start; padding-top: 56px; }
  .peak__fig { order: -1; }
  .peak__side .q-h2 { font-size: 2rem; }
  .steps--peak { grid-template-columns: repeat(3, auto); gap: 4px 14px; }
  .peak__fact { position: static; margin-top: -4px; }
  .peak__end { right: var(--sc-gutter); left: var(--sc-gutter); bottom: 18px; text-align: left; max-width: none; }

  .mosaic { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .m-a { grid-column: 1 / span 5; grid-row: auto; }
  .m-b { grid-column: 2 / span 5; grid-row: auto; margin-top: 0; }
  .m-c { grid-column: 1 / span 6; grid-row: auto; }
  .m-d { grid-column: 3 / span 4; grid-row: auto; margin-top: 0; }
  .m-e { grid-column: 1 / span 5; grid-row: auto; margin-top: 0; }

  .colophon { grid-template-columns: 1fr; }
  .colophon__lede, .colophon__selection { grid-column: 1; grid-row: auto; }
  .actions .btn { flex: 1 1 auto; }
  .foot { flex-direction: column; align-items: flex-start; }
  .contents__cols { grid-template-columns: 1fr; }
  .contents a { grid-template-columns: 2.6rem 1fr auto; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .spread__media { height: 42svh; }
  .nation__role { display: none; }
}