/* Metta Blue. Ultramarine paper, real photographs.
   Type roles: Tangerine Bold = the script; Newsreader = display headlines (chosen on purpose);
   Inter = everything else (copy, menu, buttons, labels, captions, footer). */
@font-face { font-family: 'Newsreader'; src: url(fonts/newsreader.woff2) format('woff2'); font-weight: 300 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Newsreader'; src: url(fonts/newsreader-italic.woff2) format('woff2'); font-weight: 300 500; font-style: italic; font-display: swap; }
@font-face { font-family: 'Tangerine'; src: url(fonts/tangerine-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'VT323'; src: url(fonts/vt323.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(fonts/inter-var.woff2) format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }

/* v49 (Chance, 2026-10-19: lines of the next card peeking in on Safari): a card is one real screen tall. Safari's
   small viewport (svh) is the height with its toolbar showing; once a native scroll (the long markets board) tucks
   the toolbar away, the screen is taller than svh and every svh card let the next card peek in at the bottom. The
   homepage controller (src/home-slides.js) sets --app-h to the real window height; everywhere else it stays svh. */
:root { --app-h: 100svh; }
/* v49: pinch to zoom is a peek that springs back (src/pinch.js); no double-tap zoom either */
html { touch-action: pan-x pan-y; }
/* while a peek is held the zoomed card is clipped to the page, so it can never widen the page (a mobile browser widens
   its layout to fit wide content, which every card then reads as a new screen size) */
html.is-peek main { overflow: clip; }
:root {
  --ultra: #1a1fa0;        /* the paper */
  --ultra-deep: #11147a;   /* shadowed paper */
  --ink: #f4f1e8;          /* warm paper white */
  --ink-soft: rgba(244, 241, 232, .72);
  --hair: rgba(244, 241, 232, .26);
  --yellow: #e8ef3f;       /* the only accent */
  --emboss-face: #12168a;  /* darker blue, pressed up out of the paper */
  --gut: clamp(22px, 5vw, 88px);
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --script: 'Tangerine', 'Snell Roundhand', cursive;
  --bar: 72px;             /* the header once it turns solid */
  --ease: cubic-bezier(.22, .61, .12, 1);
}
* { box-sizing: border-box; }
html { background: var(--ultra); color: var(--ink); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; text-rendering: optimizeLegibility; }
body { margin: 0; font: 400 16px/1.6 var(--sans); font-optical-sizing: auto; letter-spacing: -.006em; overflow-x: clip; -webkit-font-smoothing: antialiased; }
/* house style: all ordinary copy and the menu are lower case. The deliberately styled type keeps its case:
   the display headlines (Newsreader), the brand names and cities, and the script. */
body { text-transform: lowercase; }
h1, h2, .script { text-transform: none; }
/* Inter display headlines are lower case too, like the copy */
.gl-head h2, .doors h2 { text-transform: lowercase; }
section[id] { scroll-margin-top: var(--bar); }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--yellow); color: var(--ultra-deep); }
:focus-visible { outline: 1px solid var(--yellow); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; z-index: 50; left: 12px; top: 12px; padding: 10px 14px; background: var(--ink); color: var(--ultra); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* The root supplies overscroll fallback. v43 makes the actual fixed menu the opaque top
   sampling source; its normal-height underlay sits BELOW the menu, never over the lettering.
   The bottom edge is unchanged so this remains an isolated top-chrome experiment. */
html.page-home, .page-home body { background-color: var(--viewport-bg, var(--ultra)); }
.page-home :is(.cover, .markets, .doors, .foot) { background-color: var(--ultra); }
.viewport-edge { position: fixed; left: 0; right: 0; height: 4px; z-index: 45; pointer-events: none;
  background-color: var(--viewport-bg, var(--ultra)); }
.viewport-edge[data-edge="top"] { top: 0; height: var(--bar); z-index: 29; }
.viewport-edge[data-edge="bottom"] { bottom: 0; }
/* Translating the skip link off-screen alone lets Safari reveal it behind the status bar. Keep
   the native link focusable, but do not paint it until keyboard focus deliberately exposes it. */
.skip { opacity: 0; clip-path: inset(50%); pointer-events: none; }
.skip:focus { opacity: 1; clip-path: none; pointer-events: auto; }

/* v42: neutralize the SOURCE of Safari's above-menu bleed. Only cards fully behind the
   opaque menu get the current card's color. Clip their children (not display/visibility) so
   geometry, sticky timelines, media state and keyboard/assistive navigation stay intact.
   Removing the marker restores the exact original paint, with no opacity transition/replay.
   Focus restores it immediately too; printing retains every card's original appearance. */
@media screen {
  .page-home main > section[data-past-card]:not(:focus-within) {
    background: var(--viewport-bg, var(--ultra)) !important;
    border-color: var(--viewport-bg, var(--ultra)); box-shadow: none !important;
  }
  .page-home main > section[data-past-card]:not(:focus-within) > *,
  .page-home main > section[data-past-card]:not(:focus-within)::before,
  .page-home main > section[data-past-card]:not(:focus-within)::after { clip-path: inset(50%) !important; }
}

/* paper grain over everything, like the printed poster */
body::after { content: ''; position: fixed; inset: -50%; z-index: 40; pointer-events: none; background: url(assets/grain.png); opacity: .07; mix-blend-mode: overlay; }

/* ---------- small type ---------- */
.label { font: 500 13px/1.2 var(--sans); letter-spacing: .02em; font-feature-settings: 'tnum'; }
.script { font-family: var(--script); font-weight: 700; color: var(--yellow); letter-spacing: 0; line-height: 1; }
.link { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; transition: background-size .5s var(--ease); }
.link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- header ---------- */
/* The bar takes the colour of the card under it (--bar-bg / --bar-ink, set per card by src/site.js on the home
   page). Brand pages leave them unset and keep their own rules. */
.top { position: fixed; inset: 0 0 auto; z-index: 30; display: flex; align-items: center; gap: 32px; height: 96px; padding: 0 var(--gut); font-size: 15px;
  color: var(--bar-ink, var(--ink));
  transition: height .5s var(--ease); }
/* Keep the sample on a real, unfiltered fixed element above the global grain. Texture is a
   separate absolute paint layer, at the same viewport-anchored grain origin as body::after.
   Scope to the scripted homepage: designer headers and no-JS layouts keep their original rules. */
.js.page-home .top { z-index: 46; background-color: var(--viewport-bg, var(--ultra)); }
.js.page-home .top::after { content: ''; position: absolute; inset: 0; z-index: 1;
  pointer-events: none; background: url(assets/grain.png) calc(-50vw) calc(-50vh);
  opacity: .07; mix-blend-mode: overlay; }
/* the colour changes the instant the next card's edge passes under the bar, like paper, never a blended in-between */
.top::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bar-bg, var(--ultra)); opacity: 0; transition: opacity .5s var(--ease);
  /* v33: a card can lend the bar its own paper, lined up with the card's (the showrooms stucco; src/site.js barTone) */
  background-image: var(--bar-paper, none); background-size: var(--bar-paper-size, auto); background-position: 0 var(--bar-paper-y, 0); background-repeat: repeat; }
/* over the terminal the bar goes dark, so the screen reads edge to edge (its colour comes from .term's --bar-bg) */
.top.on-term::before { opacity: 1; }
/* v39 (Chance): and it is part of the screen. The bar shows the top strip of one virtual screen spanning bar + card
   (the card draws the rest): the same glow, scanlines, vignette and sheen, sized to the whole screen and lined up by
   --crt-y / --crt-h (src/site.js termGlass). When the photo is up the glass eases off, as on the card (--gl-s/--gl-v
   mirror the card's .5 / .55). */
@property --gl-s { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --gl-v { syntax: '<number>'; inherits: true; initial-value: 1; }
.top.on-term::before {
  background-color: #02041a;
  background-image:
    radial-gradient(ellipse 140% 100% at 50% 50%, transparent 56%, rgb(0 0 0 / calc(.7 * var(--gl-v))) 100%),
    linear-gradient(160deg, rgb(255 255 255 / calc(.05 * var(--gl-v))), transparent 38%),
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0) 0 2px, rgb(0 0 0 / calc(.3 * var(--gl-s))) 2px 3px),
    radial-gradient(ellipse 110% 85% at 50% 42%, #0b1046 0%, #02041a 62%, #000 100%);
  background-size: 100% var(--crt-h, 100vh); background-position: 0 var(--crt-y, 0px); background-repeat: no-repeat;
  transition: opacity .5s var(--ease), --gl-s .6s, --gl-v .6s; }
.top.on-term.term-love { --gl-s: .5; --gl-v: .55; }
.top.past { height: var(--bar); }
.top.past::before, html:not(.js) .top::before { opacity: 1; }
.top .home { display: block; width: 92px; color: inherit; transition: opacity .5s var(--ease), visibility .5s; }
/* the cover already says METTA, so the small mark waits until the cover has gone */
.js .top:not(.past) .home { opacity: 0; visibility: hidden; }
/* on arrival the bar is empty: the menu comes in once the visitor starts to scroll (or tabs into it) */
.top nav { transition: opacity .6s var(--ease); }
.js .top:not(.moved) nav { opacity: 0; pointer-events: none; }
/* (still in the tab order: tabbing to it brings the menu in, src/site.js) */
/* the terminal's break-in: the first time, the page stops scrolling while the computer takes over */
html.term-hold { overflow: hidden; scrollbar-gutter: stable; }
html.slide-mode { scroll-behavior: auto; overscroll-behavior-y: none; }
.top .home svg { display: block; width: 100%; height: auto; fill: currentColor; }
.top nav { display: flex; gap: 30px; margin-left: auto; align-items: center; }
.top nav a { text-decoration: none; }
.top nav a:not(.book):hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.book { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; font-weight: 450; border: 1px solid var(--ink); border-radius: 999px; text-decoration: none; transition: background .4s var(--ease), color .4s var(--ease); }
.book:hover { background: var(--ink); color: var(--ultra); }
.top .book { border-color: currentColor; transition: background .4s var(--ease); }
.top .book:hover { background: var(--bar-ink, var(--ink)); color: var(--bar-bg, var(--ultra)); border-color: var(--bar-ink, var(--ink)); }

/* ---------- 1. cover: the wordmark as a window onto a photograph ---------- */
.cover { position: relative; min-height: 100vh; min-height: var(--app-h); display: grid; grid-template-rows: 1fr auto; padding: 120px var(--gut) 40px; }
.cover-mark { position: relative; align-self: center; width: 100%; margin: 0; }
.cover-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
/* v61: "showroom" is a chrome signature (an image with its shadow baked in; tools/prep-chrome-word.cjs). It sits where the
   embossed script sat: its ink centred at --cw-x of the mark's width and --cw-y of its height, --cw-w of the mark wide,
   at the same -6deg lean. The image box is --cw-box times the ink's width (equal padding for the shadow). */
.cover-mark { --cw-x: 59.2%; --cw-y: 108%; --cw-w: 40.5%; }
.cover-mark .cover-word { position: absolute; left: var(--cw-x); top: var(--cw-y); width: calc(var(--cw-w) * var(--cw-box)); max-width: none; height: auto; translate: -50% -50%; rotate: -6deg; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cover-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: end; }
.cover-foot p { margin: 0; max-width: 32ch; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.45; letter-spacing: -.01em; }
.cover-foot p strong { font-weight: 600; }
.cover-foot .label { justify-self: end; color: var(--ink-soft); }

/* ---------- 2. the wall: the editorial, edge to edge, walked sideways ---------- */
.plate { position: relative; margin: 0; }
.plate img { width: 100%; }
@media (max-height: 500px) { .threshold picture img { min-height: 0; } }
.wall { --lead: min(44vw, 640px); --feather: 7vh; --feather-lead: 22vh; position: relative; background: var(--ultra); }
.wall-stage { position: relative; height: calc(100vh - var(--bar)); height: calc(var(--app-h) - var(--bar)); min-height: 360px; overflow: hidden; }
.wall-window { position: relative; height: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.wall-window::-webkit-scrollbar { display: none; }
.wall-strip { position: relative; display: flex; height: 100%; width: max-content; }
.wall-gap { flex: none; width: var(--lead); }
/* phone and portrait: the words sit at the head of the strip and travel with it */
.wall-lead { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: var(--lead); display: grid; align-content: end; padding: 0 var(--gut) clamp(40px, 9vh, 96px); }
/* this headline is plain copy in Inter, so it follows the house lower case like the line under it */
.wall-lead h2 { margin: 0; font: 400 clamp(36px, 4.2vw, 68px)/1.04 var(--sans); letter-spacing: -.035em; text-transform: lowercase; }
.wall-lead h2 em { font-style: normal; display: block; } /* "in with the new." always gets its own line */
/* out with the old: light. in with the new: heavy. */
.wall-lead .wl-old { font-weight: 300; letter-spacing: -.03em; }
.wall-lead .wl-new { font-weight: 650; letter-spacing: -.04em; }
.wall-strip img { flex: none; height: 100%; width: auto; object-fit: fill; }
.wall-mirror { display: none; }
/* neighbouring photos share the same studio blue, so each one dissolves into the next */
.wall-strip img + img { margin-left: calc(var(--feather) * -1); -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--feather)); mask-image: linear-gradient(90deg, transparent, #000 var(--feather)); }
.wall-strip .wall-gap + img { margin-left: calc(var(--feather-lead) * -1); -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--feather-lead)); mask-image: linear-gradient(90deg, transparent, #000 var(--feather-lead)); }
/* landscape screens: the words hold on the left; a window one photograph wide walks the wall on the right,
   so each photograph gets the whole frame the way it does on a phone */
@media (min-width: 701px) and (min-aspect-ratio: 1/1) {
  .wall { --win: min(54vw, calc((var(--app-h) - var(--bar)) * .77)); --feather: 9vh; --feather-lead: 7vh; }
  .wall-stage { display: grid; grid-template-columns: minmax(0, 1fr) var(--win); }
  .wall-lead { position: relative; z-index: 2; width: auto; padding-right: clamp(24px, 4vw, 72px); }
  /* the hall of mirrors: the photograph continues into its own soft reflection behind the words */
  .wall-mirror { display: block; position: absolute; z-index: 1; inset: 0 var(--win) 0 0; overflow: hidden; }
  .wall-mirror .wall-strip { position: absolute; left: 100%; top: 0; transform-origin: 0 0; transform: scaleX(-1);
    /* the strip's far end fades into the paper, so the reflection never shows a hard end */
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40vh), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40vh), transparent); }
  .wall-mirror::after { content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--ultra) 0%, rgb(26 31 160 / .9) 36%, rgb(26 31 160 / .5) 74%, rgb(26 31 160 / .12) 100%); }
  .wall-window { z-index: 1; }
  /* the mirror's edge: one fine line of light where the photograph meets its reflection */
  .wall-window::before { content: ''; position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; width: 1px;
    background: linear-gradient(transparent, rgb(255 255 255 / .55) 18%, rgb(255 255 255 / .55) 82%, transparent); mix-blend-mode: screen; }
  .wall-gap { display: none; }
  .slide-mode .wall-gap { display: block; width: var(--win); }
  .wall-strip .wall-gap + img { margin-left: 0; -webkit-mask-image: none; mask-image: none; }
}
/* no script, phone: the words sit above a plain sideways scroller */
@media (max-width: 700px), (max-aspect-ratio: 999/1000) {
  html:not(.js) .wall-stage { height: auto; }
  html:not(.js) .wall-lead { position: static; width: auto; padding-top: 64px; padding-bottom: 32px; }
  html:not(.js) .wall-window { height: calc(var(--app-h) - var(--bar)); }
  html:not(.js) .wall-gap { display: none; }
  html:not(.js) .wall-strip .wall-gap + img { margin-left: 0; -webkit-mask-image: none; mask-image: none; }
}
/* with script: the stage pins under the header and scrolling walks the wall sideways */
.wall-pin .wall-stage { position: sticky; top: var(--bar); }
/* phones: a sideways swipe on the photographs moves them too (src/site.js turns it into page scroll) */
.wall-pin.wall-swipe .wall-stage { touch-action: pan-y; }
.wall-pin .wall-window { overflow: hidden; }
/* the photo card's "more this way" arrow: a hairline ring and arrow at the photographs' top right. Only with the
   one-card-per-gesture controller (src/home-slides.js), and only while there is another photograph to the right. */
.wall-next { display: none; }
.slide-mode .wall-next { display: grid; place-items: center; position: absolute; z-index: 3; top: clamp(16px, 2.8vh, 28px); right: clamp(16px, 2.2vw, 32px);
  width: 46px; height: 46px; padding: 0; border: 1px solid rgb(255 255 255 / .78); border-radius: 50%; background: rgb(8 10 34 / .14); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 14px rgb(0 0 0 / .14);
  opacity: 0; visibility: hidden; transform: translateX(-6px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s .3s, background-color .25s; }
.slide-mode .wall.has-more .wall-next { opacity: 1; visibility: visible; transform: none; transition: opacity .5s var(--ease) .18s, transform .6s var(--ease) .18s, visibility 0s, background-color .25s; }
.wall-next svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .3)); }
.wall-next:hover { background: rgb(255 255 255 / .16); }
.wall-next:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.wall-pin .wall-strip, .wall-pin .wall-lead { will-change: transform; }

/* ---------- the terminal: the story, told by the computer ---------- */
.term { --crt: #02041a; --ph: #7c9fff; --ph-hi: #dfe8ff; --ph-dim: #4f68c8; --bar-bg: #02041a; position: relative; background: var(--ultra); }
/* before the break-in the screen is still dark paper, so the bar stays blue */
.term.is-armed { --bar-bg: var(--ultra); }
.term-stage { position: relative; height: calc(100vh - var(--bar)); height: calc(var(--app-h) - var(--bar)); min-height: 320px; overflow: hidden; }
.term-pin .term-stage { position: sticky; top: var(--bar); }
.crt { position: absolute; inset: 0; overflow: hidden; color: var(--ph); text-transform: lowercase; letter-spacing: .01em;
  font: 400 20px/1.25 'VT323', ui-monospace, Menlo, monospace;
  background: radial-gradient(ellipse 110% 85% at 50% 42%, #0b1046 0%, var(--crt) 62%, #000 100%); }
/* the glass: scanlines, a slow rolling band, a vignette and a soft reflection */
.crt::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0) 0 2px, rgb(0 0 0 / .3) 2px 3px); }
.crt::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse 140% 100% at 50% 50%, transparent 56%, rgb(0 0 0 / .7) 100%), linear-gradient(160deg, rgb(255 255 255 / .05), transparent 38%); }
/* v40: the viewport IS the glass, no bezel or inset box. Menu and story are two transparent
   slices of the same full-height displacement surface. The glow/scanlines continue through the bar. */
.crt-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.term.is-curved { overflow: clip; } /* contain the negative top inset when returning to the card above */
.term.is-curved .term-stage { overflow: visible; }
.term.is-curved .crt { --crt-curve: .035; top: calc(-1 * var(--bar)); border-radius: 0; background-color: var(--crt); }
.term.is-curved .crt-screen { padding-top: calc(var(--bar) + var(--crt-pad-top)); }
.term.is-curved:not(.term-pin) .crt { margin-bottom: calc(-1 * var(--bar)); }
/* The full-height glass remains edge-to-edge. The menu's decorative slice uses the same
   viewport-sized gradients and --crt-y/--crt-h coordinates over its new solid sampling base. */
.term.is-curved.term-pin .crt, .term.is-curved.term-pin .crt::before, .term.is-curved.term-pin .crt::after { background-size: 100% 100%; background-position: 0 0; }
html:not(.js) .top.on-term.crt-curved:not(.crt-flow)::before { background: none; }
/* The moving scanline band is outside the filter, so it does not invalidate the bend every frame. */
.term.is-curved .crt.is-bent .crt-screen { filter: url(#crt-barrel); }
.crt-menu-surface, .crt-menu-row { display: contents; }
.top.on-term.crt-curved .crt-menu-surface { display: block; position: absolute; inset: 0 0 auto; height: var(--crt-h, var(--app-h));
  filter: url(#crt-barrel); pointer-events: none; }
.top.on-term.crt-curved .crt-menu-row { display: flex; align-items: center; gap: 32px; height: var(--bar); padding: 0 var(--gut); }
.top.on-term.crt-curved a { position: relative; pointer-events: auto; }
/* SVG filters do not move hit testing. Extend the native links to include their curved visible ink;
   the remaining full-height transparent surface never catches a click or swipe. */
.top.on-term.crt-curved a::after { content: ''; position: absolute;
  inset: var(--hit-t, 0px) var(--hit-r, 0px) var(--hit-b, 0px) var(--hit-l, 0px); }
@media (max-width: 700px) { .top.on-term.crt-curved .crt-menu-row { padding: 0 20px; gap: 16px; } }

/* v39: on the pinned card the screen's layers are drawn for bar + card and the card shows its part, so the bar
   (above) continues them without a seam */
.term-pin .crt, .term-pin .crt::before, .term-pin .crt::after { background-size: 100% calc(100% + var(--bar)); background-position: 0 calc(var(--bar) * -1); background-repeat: no-repeat; }
.crt-band { position: absolute; left: 0; right: 0; top: -30%; height: 30%; z-index: 2; pointer-events: none;
  background: linear-gradient(transparent, rgb(120 160 255 / .06), transparent); animation: crt-band 7s linear infinite; }
@keyframes crt-band { to { transform: translateY(440%); } }
.crt-screen { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; gap: clamp(18px, 4.5vh, 52px);
  --crt-pad-top: clamp(20px, 4vh, 44px); padding: var(--crt-pad-top) var(--gut);
  text-shadow: 0 0 1px var(--ph-hi), 0 0 8px rgb(90 130 255 / .75), 0 0 24px rgb(60 95 255 / .35); }
.crt-status { display: flex; justify-content: space-between; gap: 20px; color: var(--ph-dim); font-size: 18px; }
.crt-boot { font-size: clamp(18px, 1.7vw, 26px); line-height: 1.35; }
.crt-boot .ln { white-space: pre; }
.crt-say { color: var(--ph-hi); font-size: clamp(17px, min(2.6vw, 4.4vh), 50px); line-height: 1.16; max-width: 74ch;
  /* a hair of colour fringing, like an old tube slightly out of convergence */
  text-shadow: -.6px 0 rgb(255 70 140 / .32), .6px 0 rgb(0 220 255 / .32), 0 0 1px var(--ph-hi), 0 0 9px rgb(90 130 255 / .8), 0 0 26px rgb(60 95 255 / .38); }
/* v57 (Chance, 2026-10-19): on upright phones "she loves fashion. i love technology." stays on one line, the typing
   cursor included: 37 VT323 characters are 14.79em, the cursor .63em, the .2px tracking 7.4px; so the type is the
   screen's text width (100vw less both gutters, less 10px of margin) over 15.5em, never more than the old 6vw. On a
   390-wide phone that is 21.7px instead of 23.4px; tablets keep 34px. */
@media (max-width: 900px) and (orientation: portrait) { .crt-say { font-size: clamp(18px, min(6vw, (100vw - 2 * var(--gut) - 10px) / 15.5), 34px); } .crt-boot { font-size: 17px; } .crt-status { font-size: 15px; } }
@media (max-height: 500px) and (orientation: landscape) { .crt-screen { gap: 12px; --crt-pad-top: 14px; } .crt-status { font-size: 14px; } .crt-boot { font-size: 16px; } }
.crt .ln, .love-ln { min-height: 1.16em; white-space: pre-wrap; }

/* "we love our jobs." takes the waiting prompt's place at the end of the story */
.love-ln { display: none; }
.term.is-love .love-ln, .term:not(.term-pin) .love-ln { display: block; }
.term.is-love .crt-say .ln[data-k="prompt"], .term:not(.term-pin) .crt-say .ln[data-k="prompt"] { display: none; }
/* upright screens: the story, and below it the photo's space; at "we love our jobs." the story clears */
.crt-body { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: clamp(14px, 3.2vh, 40px); }
.crt-say { flex: none; }
.love-row { flex: 1; min-height: 0; position: relative; }
@media (max-aspect-ratio: 9999/10000) { .term.term-pin.is-love .crt-say .ln { display: none; } }
/* landscape screens: one card. story left, photo right, the photo exactly as tall as the story. src/site.js sets
   the type size and photo width to fit the screen; the fallbacks here assume a 4:5 photo and 71 characters */
@media (min-aspect-ratio: 1/1) {
  .crt-body { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr) var(--pic-w, 26.5%);
    column-gap: var(--pic-gap, 4.5%); align-items: start; align-content: start; }
  .crt-say { font-size: var(--say-fs, 2.2cqw); max-width: none; }
}

/* the photo, in a thin phosphor frame. Shown only by its own state classes (set in src/site.js) */
.love-pic { position: absolute; left: 0; top: 0; margin: 0; visibility: hidden; }
@media (min-aspect-ratio: 1/1) { .love-pic { position: relative; width: 100%; aspect-ratio: var(--ar); } }
.term.is-love .love-pic.is-drawn { visibility: visible; }
.love-pic canvas, .love-pic img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.love-pic img { object-fit: cover; visibility: hidden; }
.term.is-love .love-pic.is-final { box-shadow: 0 0 0 1px rgb(124 159 255 / .3), 0 0 30px rgb(60 95 255 / .3); }
.term.is-love .love-pic.is-final img { visibility: visible; animation: love-settle .32s steps(4) both, love-jit 7s 1.4s steps(1) infinite; }
@keyframes love-settle { 0% { transform: translateX(6px); filter: brightness(1.5) saturate(.4); } 50% { transform: translateX(-3px); } 100% { transform: none; filter: none; } }
@keyframes love-jit { 0%, 95%, 100% { transform: none; } 95.6% { transform: translateX(4px) skewX(-.7deg); } 96.4% { transform: translateX(-2px); } }
/* while the photo is up the glass eases off a little, so it reads clearly */
.crt::before, .crt::after { transition: opacity .6s; }
.term.is-love .crt::before { opacity: .5; }
.term.is-love .crt::after { opacity: .55; }
/* no pin (no script, reduced motion): everything simply shown, in the same arrangement */
.term:not(.term-pin) .term-stage { height: auto; min-height: calc(var(--app-h) - var(--bar)); }
.term:not(.term-pin) .crt { position: relative; min-height: calc(var(--app-h) - var(--bar)); }
.term:not(.term-pin) .crt-screen { position: relative; }
.term:not(.term-pin) .love-pic { position: relative; visibility: visible; width: 100%; aspect-ratio: var(--ar);
  box-shadow: 0 0 0 1px rgb(124 159 255 / .3), 0 0 30px rgb(60 95 255 / .3); }
.term:not(.term-pin) .love-pic img { visibility: visible; }
.term:not(.term-pin) .love-pic canvas { display: none; }
@media (max-aspect-ratio: 9999/10000) { .term:not(.term-pin) .love-row { flex: none; width: min(calc(min(64vh, 600px) * .8), 100%); } }
/* the machine's answer: plain phosphor rather than the bright typed voice */
.crt-say .ln[data-k="out"] { color: var(--ph); text-shadow: 0 0 1px var(--ph), 0 0 8px rgb(90 130 255 / .6), 0 0 22px rgb(60 95 255 / .28); }
.crt-cursor { display: inline-block; width: .55em; height: .9em; margin-left: .08em; vertical-align: -.1em; background: currentColor;
  box-shadow: 0 0 10px rgb(90 130 255 / .8); animation: crt-blink 1.06s steps(1) infinite; }
@keyframes crt-blink { 50% { opacity: 0; } }
/* without script the message is simply on the screen */
html:not(.js) .crt-boot, html:not(.js) .crt-cursor { display: none; }
/* with script: paper until the page breaks, then dead glass, then the screen switches on */
.term-js.is-armed .crt { visibility: hidden; }
.term-js.is-off .crt-screen, .term-js.is-off .crt-band { visibility: hidden; }
/* (backwards, not both: once switched on, the screen's own filter applies; the last keyframe equals its rest state) */
.term-js.is-on .crt-screen { animation: crt-on .8s cubic-bezier(.3, .7, .2, 1) backwards, crt-flicker 5s 1s infinite; }
.term-js.is-instant .crt-screen { animation: crt-flicker 5s 1s infinite; }
.term-js.is-cleared .crt-boot { display: none; }
@keyframes crt-on {
  0% { transform: scale(1.04, .003); filter: brightness(6) saturate(0); background-color: var(--ph-hi); }
  32% { transform: scale(1.04, .003); filter: brightness(6) saturate(0); background-color: var(--ph-hi); }
  64% { transform: scale(1, 1.03); filter: brightness(1.7); background-color: rgb(124 159 255 / .18); }
  100% { transform: none; filter: none; background-color: transparent; } }
@keyframes crt-flicker { 0%, 40%, 42%, 76%, 78%, 100% { opacity: 1; } 41% { opacity: .93; } 77% { opacity: .97; } }
/* the break-in: bands of the page invert, shift hue, tear, and fill with noise for about a second */
.glitch { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.glitch i { position: absolute; left: 0; right: 0; display: block; overflow: hidden; }
.glitch .g-inv { -webkit-backdrop-filter: invert(1); backdrop-filter: invert(1); }
.glitch .g-hue { -webkit-backdrop-filter: hue-rotate(150deg) saturate(3) contrast(1.6); backdrop-filter: hue-rotate(150deg) saturate(3) contrast(1.6); }
.glitch .g-bar { mix-blend-mode: difference; }
.glitch .g-txt { background: #02041a; color: #7c9fff; font: 400 18px/1 'VT323', ui-monospace, monospace; white-space: nowrap; text-transform: none;
  text-shadow: 0 0 6px rgb(90 130 255 / .85); }
.glitch .g-noise { background: url(assets/grain.png) 0 0 / 90px; mix-blend-mode: hard-light; opacity: .9; }
/* the page itself tears: a hard sideways shear while it breaks */
html.glitch-rgb main { transform: skewX(var(--tear, 0deg)); }
.glitch.flash { background: #02041a; }
html.glitch-rgb main :is(h2, p, a, span, li) { text-shadow: -4px 0 rgb(255 30 90 / .85), 4px 0 rgb(0 225 255 / .85); }
html.glitch-inv main img { filter: invert(1) hue-rotate(160deg) saturate(2); }


/* ---------- 4. designers: a holographic globe ---------- */
/* Base (no script, reduced motion): a plain grid of the brands. With script the section pins and the globe turns
   from one brand's home to the next (.gl-pin, src/site.js). */
/* A black card with blue and white type, to break up the blue. Everything here is Inter. */
.designers { --holo: #cfdcff; --dz-ink: #f4f3f7; --dz-soft: rgba(244, 243, 247, .7); --dz-blue: #8f9bff; --dz-accent: #5b6bff;
  --dz-hair: rgba(143, 155, 255, .24); --bar-bg: #000; --bar-ink: #f4f3f7;
  position: relative; padding: clamp(90px, 13vh, 150px) var(--gut); background: #000; color: var(--dz-ink); }
.gl-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: clamp(36px, 6vh, 64px); }
.gl-head h2 { margin: 0; font: 400 clamp(36px, 4.2vw, 68px)/1.04 var(--sans); letter-spacing: -.035em; color: var(--dz-ink); }
.gl-slot, .gl-canvas, .gl-list { display: none; }
.gl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 44px 28px; }
.gl-brand { margin: 0; }
.gl-photo { display: block; aspect-ratio: 3 / 4; overflow: hidden; background: #0b0c14; }
.gl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-name { margin: 14px 0 6px; font: 500 clamp(24px, 2vw, 32px)/1.05 var(--sans); letter-spacing: -.03em; text-transform: lowercase; color: var(--dz-ink); }
.gl-name a { text-decoration: none; }
.gl-name a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--dz-accent); }
.gl-where { margin: 0; font: 500 14px/1.4 var(--sans); color: var(--dz-blue); }
.gl-line { margin: 10px 0 0; max-width: 34ch; font: 400 14px/1.55 var(--sans); color: var(--dz-soft); }

/* pinned: one screen. The heading, then the brand names as tabs, then the globe on the left and the brand on the right */
.gl-pin.designers { padding: 0; }
.gl-pin .gl-stage { position: sticky; top: var(--bar); height: calc(100vh - var(--bar)); height: calc(var(--app-h) - var(--bar)); min-height: 320px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr);
  padding: clamp(22px, 4vh, 44px) var(--gut) clamp(16px, 3vh, 32px); column-gap: clamp(24px, 4vw, 64px); background: #000; }
.gl-pin .gl-head { grid-area: 1 / 1 / 2 / 3; margin: 0; position: relative; z-index: 2; }
.gl-pin .gl-head h2 { font-size: clamp(32px, 3.4vw, 56px); }
.gl-pin .gl-slot { display: block; grid-area: 3 / 1; min-height: 0; }
.gl-pin .gl-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.gl-pin .gl-cards { display: grid; grid-area: 3 / 2; position: relative; z-index: 1; align-self: center; justify-self: center; width: min(100%, max(clamp(200px, min(21vw, 36vh), 380px), 34ch)); min-height: 0; }
/* Every card occupies the same grid cell. Hidden cards retain their footprint, so the globe and photos never
   jump when a long brand name or description takes over. Only opacity changes, in either scroll direction. */
.gl-pin .gl-brand { grid-area: 1 / 1; position: relative; align-self: start; visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .22s ease-out, visibility 0s .22s; }
.gl-pin .gl-brand.on { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .22s ease-out, visibility 0s; }
.gl-pin .gl-photo { position: relative; width: clamp(200px, min(21vw, 34vh), 380px); box-shadow: 0 0 0 1px rgb(143 155 255 / .3), 0 30px 70px -30px rgb(40 50 200 / .45); }
.gl-pin .gl-name { font-size: clamp(28px, 2.6vw, 44px); margin-top: clamp(14px, 2.2vh, 22px); }
/* the brand names: a tab bar right under the heading, the current one underlined in blue on the hairline */
.gl-pin .gl-list { display: flex; flex-wrap: wrap; gap: 0 clamp(16px, 2vw, 30px); grid-area: 2 / 1 / 3 / 3; list-style: none; margin: clamp(14px, 2.4vh, 24px) 0 0; padding: 0;
  position: relative; z-index: 2; border-bottom: 1px solid var(--dz-hair); font: 500 clamp(13px, 1vw, 15px)/1 var(--sans); }
.gl-pin .gl-list li { display: flex; }
.gl-pin .gl-list a { display: block; padding: 10px 0 12px; margin-bottom: -1px; border-bottom: 2px solid transparent; text-decoration: none; text-transform: lowercase;
  color: var(--dz-blue); transition: color .25s, border-color .25s; white-space: nowrap; }
.gl-pin .gl-list a:hover { color: var(--dz-ink); }
.gl-pin .gl-list a.on { color: var(--dz-ink); border-bottom-color: var(--dz-accent); }
/* v33: the brands are a sideways carousel on this one screen: the names (tabs) and a pair of arrows by the heading.
   Swipes, trackpad and arrow keys step along too (src/home-slides.js); scrolling up or down leaves the card. */
.gl-nav { display: none; }
.gl-pin .gl-nav { display: flex; gap: 10px; grid-area: 1 / 2; justify-self: end; align-self: end; position: relative; z-index: 3; }
.gl-nav button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgb(143 155 255 / .55); border-radius: 50%;
  background: rgb(10 12 40 / .5); color: var(--dz-ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .25s, background-color .25s, opacity .3s; }
.gl-nav button:hover:not(:disabled) { border-color: var(--dz-ink); background: rgb(91 107 255 / .24); }
.gl-nav button:disabled { opacity: .28; cursor: default; }
.gl-nav button:focus { outline: none; }
.gl-nav button:focus-visible { outline: 2px solid var(--dz-ink); outline-offset: 3px; }
.gl-nav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
/* upright screens: the heading and arrows, the names in a sideways strip, the globe, then the brand: photo beside its words */
@media (max-aspect-ratio: 9999/10000) {
  .gl-pin .gl-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; padding-bottom: clamp(18px, 3vh, 30px); }
  .gl-pin .gl-head { grid-area: 1 / 1; }
  .gl-pin .gl-nav { grid-area: 1 / 1; align-self: center; }
  .gl-pin .gl-nav button { width: 42px; height: 42px; }
  /* v56 (Chance, 2026-10-19): every name in view at once, in two rows, rather than a sideways strip. Each row sits on
     its own hairline; the chosen name is underlined on it. Phones lay out at least 390 wide (the fit script), so the
     ten names (about 470px at 14px) always wrap into two rows of 346-386px with a 13px gap; tablets fit them in one. */
  .gl-pin .gl-list { --gl-row: 36px; display: flex; grid-area: 2 / 1; flex-wrap: wrap; overflow: visible; touch-action: pan-x pan-y;
    margin: clamp(8px, 1.6vh, 16px) 0 0; padding: 0; gap: 0 13px; font-size: 14px; border-bottom: 0;
    background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--gl-row) - 1px), var(--dz-hair) calc(var(--gl-row) - 1px) var(--gl-row)); }
  .gl-pin .gl-list a { display: flex; align-items: center; box-sizing: border-box; height: var(--gl-row); padding: 2px 0 0; margin-bottom: 0; }
  .gl-pin .gl-slot { grid-area: 3 / 1; }
  .gl-pin .gl-cards { grid-area: 4 / 1; }
  .gl-pin .gl-head h2 { font-size: clamp(30px, 8.4vw, 48px); }
  .gl-pin .gl-cards { align-self: end; justify-self: stretch; width: auto; }
  .gl-pin .gl-brand { align-self: end; }
  .gl-pin .gl-brand { display: grid; grid-template-columns: minmax(0, min(50%, 30svh)) minmax(0, 1fr); gap: 16px; align-items: end; }
  .gl-pin .gl-photo { width: 100%; }
  .gl-pin .gl-name { font-size: clamp(24px, 6.4vw, 40px); margin-top: 0; }
  .gl-pin .gl-stage { --gl-globe: .74; }
  .gl-pin .gl-line { font-size: 13px; }
}
/* short landscape screens (phones turned sideways): the essentials, plus the names as a sideways strip */
@media (max-height: 500px) and (orientation: landscape) {
  .gl-pin .gl-head h2 { font-size: 26px; }
  .gl-pin .gl-line { display: none; }
  .gl-pin .gl-stage { grid-template-rows: auto auto minmax(0, 1fr); padding-top: 12px; }
  .gl-pin .gl-nav { align-self: center; } .gl-pin .gl-nav button { width: 38px; height: 38px; }
  .gl-pin .gl-list { display: flex; grid-area: 2 / 1 / 3 / 3; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x;
    margin-top: 6px; gap: 0 20px; font-size: 13px; }
  .gl-pin .gl-list::-webkit-scrollbar { display: none; }
  .gl-pin .gl-list a { padding: 8px 0 9px; }
  .gl-pin .gl-slot { grid-area: 3 / 1; }
  .gl-pin .gl-cards { grid-area: 3 / 2; }
  .gl-pin .gl-brand { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: end; }
  .gl-pin .gl-photo { width: min(32vh * .75 * 1.33, 22vw); }
  .gl-pin .gl-name { font-size: 26px; margin-top: 0; }
}

/* ---------- 4c. over 1,000 retail stores: the retailers, laid out like a printed directory ---------- */
/* Smaller marks, more per row. Every cell draws its own top and left hairline; the list clips the first column's
   left line, so the directory stays open at the sides at any column count and an unfilled last row stays empty. */
.doors { --cols: 6; padding: clamp(64px, calc(var(--app-h) * 0.1), 120px) var(--gut) clamp(56px, calc(var(--app-h) * 0.09), 110px); }
/* one full card when it fits (desktop, phone portrait); taller screens of logos scroll freely (src/home-slides.js) */
.slide-mode .doors { min-height: calc(var(--app-h) - var(--bar)); display: flex; flex-direction: column; justify-content: center; }
.doors-head { margin-bottom: clamp(26px, calc(var(--app-h) * 0.04), 44px); }
.doors h2 { margin: 0; max-width: 18ch; font: 400 clamp(34px, 3.8vw, 60px)/1.04 var(--sans); letter-spacing: -.035em; }
.doors-sub { margin: clamp(14px, calc(var(--app-h) * 0.022), 22px) 0 0; max-width: 46ch; font: 400 clamp(15px, 1.15vw, 18px)/1.5 var(--sans); color: var(--ink-soft); }
.doors-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  overflow: hidden; border-bottom: 1px solid var(--hair); }
.doors-grid li { display: grid; place-items: center; min-height: clamp(78px, calc(var(--app-h) * 0.11), 112px); padding: 18px clamp(12px, 1.6vw, 26px);
  margin-left: -1px; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); }
/* printed, not glowing: the faintest impression under each mark */
.doors-grid img { width: calc(var(--w) * 1.12); max-width: 100%; height: auto; max-height: 46px; object-fit: contain; filter: drop-shadow(0 1px 0 rgb(4 5 47 / .35)); }
/* v38: the logos settle into the directory. The grid's hairlines stay put; each mark comes into focus where it
   sits (a soft fade, a few px of lift, blur to sharp), in a wave from the top left (src/site.js sets --d). Only
   opacity, transform and filter move, so it stays on the compositor. Resets once the card is off screen. */
.js .doors-grid img { opacity: 0; transform: translate3d(0, 8px, 0) scale(.97); filter: blur(4px) drop-shadow(0 1px 0 rgb(4 5 47 / 0));
  transition: opacity .85s var(--ease) var(--d, 0ms), transform 1.15s var(--ease) var(--d, 0ms), filter .95s var(--ease) var(--d, 0ms); }
.js .doors-grid li.on img { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 1px 0 rgb(4 5 47 / .35)); }
.js .doors-grid.playing img { will-change: opacity, transform, filter; }
.js .doors-grid.reset img { transition: none; }
@media (max-width: 1199px) { .doors { --cols: 5; } }
@media (max-width: 980px) { .doors { --cols: 4; } }
@media (max-width: 700px) {
  .doors { --cols: 3; padding: 40px 16px 36px; }
  .doors h2 { font-size: clamp(30px, 8.6vw, 40px); }
  .doors-sub { font-size: 15px; }
  .doors-grid li { min-height: 68px; padding: 12px 8px; }
  .doors-grid img { width: min(100%, calc(var(--w) * 1.3)); max-height: 30px; }
}

/* ---------- 5. the closing photograph (v56, replaces 1999 called) ---------- */
/* One of Isabella's photographs fills the whole screen, behind the menu bar too: the wide one on landscape screens,
   the upright one on portrait screens. The bar goes clear over it and its ink turns dark (src/site.js barTone,
   --bar-clear); the browser's top tint and the page behind the bars take the photo's own top colour. */
.closing { position: relative; height: var(--app-h); overflow: hidden; background: var(--cl-wide-top);
  --bar-bg: var(--cl-wide-top); --bar-ink: #0c0e3c; --bar-clear: 1; }
.closing-photo, .closing-photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.closing-photo img { object-fit: cover; object-position: 50% 40%; }
@media (orientation: portrait) {
  .closing { background: var(--cl-tall-top); --bar-bg: var(--cl-tall-top); }
  .closing-photo img { object-position: 50% 30%; }
}
html.js.page-home.bar-clear .top { background-color: transparent; }
html.js.page-home.bar-clear .top::before, html.js.page-home.bar-clear .top::after { opacity: 0; }
html.page-home.bar-clear .viewport-edge { background-color: transparent; }

/* ---------- 6. markets ---------- */
/* Where to find us: all Inter */
/* v45 (Chance chose concept B, full width): a cork bulletin board on the ring-to-enter stucco. The wall tile starts
   at the card's top-left and the menu borrows it (--bar-texture), so the stucco runs up behind the menu. The brass
   frame and the deckled sheet are photographed pieces drawn as 9-slices, so the sheet can grow with a long list.
   Type: Inter, with the month names in the site's italic serif, printed into the paper (multiply). */
.markets { --mk-fr: 15px; --mk-sh: 54px; --mk-cork-w: 420px; --mk-print: #1b1d4a;
  --bar-bg: var(--ultra); --bar-texture: 1;
  display: flex; flex-direction: column; justify-content: center; padding: clamp(18px, calc(var(--app-h) * .034), 40px) var(--gut);
  background-color: var(--ultra); background-repeat: repeat; background-position: 0 0; background-size: min(calc(var(--mk-wall-w) * 1px), 170vw) auto; }
.slide-mode .markets { min-height: calc(var(--app-h) - var(--bar)); }
.mk-board { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; padding: clamp(14px, 2.2vw, 30px);
  border: var(--mk-fr) solid transparent; border-image: var(--mk-frame) var(--mk-frame-slice) / var(--mk-fr) stretch;
  background: #b9773f var(--mk-cork) 0 0 / var(--mk-cork-w) auto repeat; background-clip: padding-box;
  filter: drop-shadow(5px 10px 12px rgb(3 5 40 / .5)) drop-shadow(1px 2px 2px rgb(3 5 40 / .35)); }
/* faint daylight from the upper left, as on the wall */
.mk-board::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 120% at 15% 0%, rgb(255 240 210 / .1), transparent 55%), linear-gradient(to bottom right, transparent 60%, rgb(40 15 0 / .14)); }
.mk-sheet { position: relative; flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-content: start;
  border: var(--mk-sh) solid transparent; border-image: var(--mk-paper) 150 fill / var(--mk-sh) stretch; color: var(--mk-print);
  filter: drop-shadow(1px 3px 2px rgb(50 22 0 / .36)) drop-shadow(3px 9px 10px rgb(50 22 0 / .2)); }
.mk-head, .mk-list { margin: -14px -12px -18px; mix-blend-mode: multiply; }
.markets h2 { margin: 0; font: 400 clamp(34px, 3.3vw, 52px)/1 var(--sans); letter-spacing: -.04em; text-transform: lowercase; }
.markets h2 em { font-style: normal; display: block; }
.mk-lede { margin: 18px 0 0; font-size: 16px; line-height: 1.45; opacity: .7; }
/* the months run down the sheet in balanced columns, like a printed season card (v46: a long season packs without
   gaps); on wide screens each row is date | show and place, so the whole season fits one card */
.mk-list { columns: 3 15rem; column-gap: clamp(26px, 3vw, 48px); }
.mk-month { break-inside: avoid; padding-bottom: 22px; }
.mk-month h3 { margin: 0 0 8px; font: italic 400 27px/1.15 var(--serif); letter-spacing: .005em; color: var(--ultra); }
.mk-month h3 span { font-size: .62em; opacity: .6; margin-left: .12em; font-variant-numeric: oldstyle-nums; }
.mk-month ol { list-style: none; margin: 0; padding: 0; }
.mk-row { padding: 11px 0 12px; border-top: 1px solid rgb(27 29 74 / .16); font-size: 15.5px; line-height: 1.3; }
.mk-when { display: block; color: var(--ultra); font-weight: 500; font-size: 15px; font-feature-settings: 'tnum', 'lnum'; }
.mk-what { margin: 4px 0 0; } .mk-what b { display: block; font-weight: 500; font-size: 19px; letter-spacing: -.015em; } .mk-what span { display: block; margin-top: 3px; font-size: 14px; opacity: .66; }
@media (min-width: 981px) and (min-height: 600px) {
  /* the title runs across the top so the season gets the sheet's full width: three columns, date | show and place */
  .mk-sheet { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .mk-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 26px; margin-bottom: 22px; }
  .markets h2 { font-size: clamp(34px, 2.9vw, 46px); } .markets h2 em { display: inline; }
  .mk-lede { margin: 0; font-size: 15px; }
  .mk-list { columns: 3 18rem; margin-top: 0; }
  .mk-month { padding-bottom: 14px; }
  .mk-month h3 { font-size: 23px; margin-bottom: 2px; }
  .mk-row { display: grid; grid-template-columns: 7.6em minmax(0, 1fr); gap: 0 10px; align-items: baseline; padding: 6px 0 7px; font-size: 14px; }
  .mk-when { font-size: 13.5px; white-space: nowrap; }
  .mk-what { margin: 0; } .mk-what b { font-size: 16px; } .mk-what span { margin-top: 1px; font-size: 12.5px; }
}
/* shorter laptop screens: a slimmer sheet margin and tighter rows, so the season still fits one card */
@media (min-width: 981px) and (min-height: 600px) and (max-height: 899px) {
  .markets { --mk-sh: 34px; padding-block: 12px; }
  .mk-board { padding: 14px; }
  .mk-head { margin-bottom: 12px; } .markets h2 { font-size: 36px; }
  .mk-month { padding-bottom: 8px; } .mk-month h3 { font-size: 21px; margin-bottom: 0; }
  .mk-row { padding: 4px 0 5px; }
  .mk-what b { font-size: 15px; } .mk-what span { font-size: 12px; }
}

/* ---------- 7. threshold ---------- */
.threshold { position: relative; }
.threshold picture img { width: 100%; height: 100vh; height: var(--app-h); min-height: 620px; object-fit: cover; }
.threshold-copy { position: absolute; left: var(--gut); top: clamp(80px, 14vh, 160px); max-width: min(520px, 80vw); }
.threshold-copy h2 { margin: 0 0 30px; font: 300 clamp(44px, 5.4vw, 92px)/.98 var(--serif); letter-spacing: -.02em; text-shadow: 0 1px 30px rgba(10, 12, 60, .3); }
.threshold-copy h2 em { font-style: italic; }
.threshold-copy .book { min-height: 54px; padding: 0 30px; font-size: 16px; background: var(--ink); color: var(--ultra); border-color: var(--ink); }
.threshold-copy .book:hover { background: var(--yellow); border-color: var(--yellow); color: var(--ultra-deep); }

/* ---------- brand pages (/<slug>/) ----------
   The live pages' content, in this site's hand: the film or photograph full screen with the name set into it,
   the brand's own words beside its portrait, the collection as one sideways strip, then the next designer. */
html.page-brand { --ultra: #000; --ultra-deep: #000; background: #000; }
.page-brand body { background: #000; }
.page-brand .top::before { opacity: 0; }
.page-brand .top.past::before { opacity: 1; }
/* brand pages have no cover to wait for: the mark and the menu are there from the start */
.js.page-brand .top:not(.past) .home, .js.page-brand .top:not(.moved) nav { opacity: 1; visibility: visible; pointer-events: auto; }
.bp-hero { position: relative; height: 100vh; height: var(--app-h); min-height: 520px; overflow: hidden; background: var(--ultra-deep); }
.bp-hero-img, .bp-yt, .bp-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bp-hero-img { object-fit: cover; }
/* a YouTube film is 16:9; cover the screen with it like the photographs do */
/* v37: centre the film. `inset: auto` came after `left`/`top` in this rule and reset them, so the film sat up and to the
   left (top-left corner showing, the poster around it). The shorthand goes first now, then the offsets. */
.bp-yt iframe { inset: auto; left: 50%; top: 50%; width: max(100%, 177.78svh); height: max(100%, 56.25vw); translate: -50% -50%; opacity: 0; transition: opacity 1.2s var(--ease); pointer-events: none; }
.bp-yt.playing iframe { opacity: 1; }
/* v36: on touch devices the hero is locked in px at load (src/site.js), so the toolbar collapsing on the first scroll
   can't resize it or rescale its photo/film */
.bp-hero.is-locked { height: var(--hero-h); min-height: 0; }
.bp-hero.is-locked .bp-hero-copy { bottom: var(--hero-copy-b); }
.bp-hero.is-locked .bp-yt iframe { width: max(100%, calc(var(--hero-svh) * 1.7778)); }
/* the words sit on the photograph's own shadow: a soft black fall-off from the bottom, nothing boxed */
.bp-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgb(0 0 0 / .82) 0%, rgb(0 0 0 / .42) 26%, rgb(0 0 0 / 0) 52%), linear-gradient(to bottom, rgb(0 0 0 / .38), rgb(0 0 0 / 0) 22%); }
.bp-hero-copy { position: absolute; z-index: 1; left: var(--gut); right: var(--gut); bottom: clamp(30px, 7vh, 72px); display: flex; justify-content: space-between; align-items: end; gap: 24px 40px; flex-wrap: wrap; }
/* v37 (Chance): every font on the brand pages is Inter. The big names use the site's Inter display style (regular
   weight, tight tracking, as "our designers", "our services", "where to find us"); the lat/long line is gone. */
.bp-name { margin: 0; font: 400 clamp(64px, 10.5vw, 180px)/.92 var(--sans); letter-spacing: -.05em; text-transform: lowercase; text-shadow: 0 2px 40px rgb(0 0 0 / .35); }
.bp-where { margin: clamp(12px, 2vh, 20px) 0 0; font-size: clamp(15px, 1.15vw, 18px); }
.bp-hero-copy .book { background: rgb(0 0 0 / .25); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.bp-hero-copy .book:hover { background: var(--ink); }

.bp-profile { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 110px); align-items: start; padding: clamp(90px, 14vh, 160px) var(--gut); }
.bp-portrait { margin: 0; position: sticky; top: calc(var(--bar) + 4vh); }
.bp-portrait img { width: 100%; max-height: calc(var(--app-h) - var(--bar) - 8vh); object-fit: cover; box-shadow: 0 40px 90px -40px rgb(0 0 0 / .75); }
.bp-copy { max-width: 60ch; padding-top: clamp(0px, 4vh, 40px); }
.bp-copy p { margin: 0 0 1.15em; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.65; color: var(--ink-soft); }
.bp-copy p strong { font-weight: 500; color: var(--ink); }
.bp-copy .bp-lede { margin-bottom: .9em; font: 400 clamp(30px, 3.2vw, 52px)/1.06 var(--sans); letter-spacing: -.03em; color: var(--ink); }
.bp-copy .bp-lede strong { font-weight: 400; }
.bp-copy .bp-first { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.5; color: var(--ink); letter-spacing: -.01em; }
.bp-facts { margin: clamp(36px, 6vh, 60px) 0 0; border-top: 1px solid var(--hair); }
.bp-facts div { display: grid; grid-template-columns: minmax(110px, 30%) 1fr; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--hair); font-size: 15px; }
.bp-facts dt { color: var(--ink-soft); }
.bp-facts dd { margin: 0; }
.bp-facts a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease); }
.bp-facts a:hover { background-size: 100% 1px; }

.bp-gallery { padding: 0 0 clamp(90px, 14vh, 150px); }
.bp-gal-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; padding: 0 var(--gut) clamp(22px, 4vh, 36px); }
.bp-gal-head h2 { margin: 0; font: 400 clamp(32px, 3.4vw, 56px)/1.04 var(--sans); letter-spacing: -.035em; text-transform: lowercase; }
.bp-gal-nav { display: flex; gap: 10px; }
.bp-gal-nav button { width: 46px; height: 46px; border: 1px solid var(--hair); border-radius: 50%; background: none; color: var(--ink); font: 400 18px/1 var(--sans); cursor: pointer; transition: border-color .3s, background .3s, color .3s; }
.bp-gal-nav button:hover { border-color: var(--ink); background: var(--ink); color: var(--ultra); }
.bp-gal-nav button:disabled { opacity: .3; pointer-events: none; }
.bp-strip { display: flex; gap: clamp(8px, .8vw, 14px); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 var(--gut); padding: 0 var(--gut); scrollbar-width: none; overscroll-behavior-x: contain; }
.bp-strip::-webkit-scrollbar { display: none; }
/* v59: every photo at its own shape. The site-wide img { max-width: 100% } used to clamp each photo's width to the strip
   on phones while its height stayed fixed, squeezing every one (the wide frames into portraits). One row height per
   brand, low enough that the brand's widest photo still fits the strip whole (--bp-ar-all, set by the build). */
.bp-strip img { flex: none; height: min(74vh, 760px, calc((100vw - 2 * var(--gut)) / var(--bp-ar-all, 1))); width: auto; max-width: none; scroll-snap-align: start; background: var(--ultra-deep); }
/* upright screens: the row fits the brand's widest upright photo at most of the screen, with a peek of the next. The
   few wide frames that crop well are cropped to that shape on their subject (cover, never a squeeze); wide group shots
   and flat-lays a portrait crop would cut apart wait for a larger screen (src/bp-gallery.json) */
@media (max-width: 900px) and (orientation: portrait) {
  .bp-strip img { height: min(64vh, 560px, calc((100vw - 2 * var(--gut)) * .88 / var(--bp-ar, .8))); }
  .bp-strip img.bp-crop { aspect-ratio: var(--bp-ar); object-fit: cover; object-position: var(--x, 50%) 50%; }
  .bp-strip img.bp-desk { display: none; }
}

.bp-next { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; padding: clamp(70px, 11vh, 120px) var(--gut); border-top: 1px solid var(--hair); }
.bp-next-link { display: grid; grid-template-columns: clamp(110px, 12vw, 180px) 1fr; grid-template-rows: auto auto 1fr; column-gap: clamp(20px, 3vw, 44px); text-decoration: none; }
.bp-next-link img { grid-row: 1 / 4; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform .8s var(--ease); }
.bp-next-link:hover img { transform: scale(1.03); }
.bp-next-link .label { color: var(--ink-soft); align-self: end; }
/* a brand's kind ("ready-to-wear") never splits at its hyphens */
.bp-where .nobr, .bp-next-where .nobr { white-space: nowrap; }
.bp-next-name { margin-top: 10px; font: 400 clamp(48px, 6vw, 104px)/.95 var(--sans); letter-spacing: -.045em; text-transform: lowercase; }
.bp-next-link:hover .bp-next-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 10px; }
.bp-next-where { margin-top: 14px; color: var(--ink-soft); font-size: 15px; }
.bp-all { justify-self: end; }

@media (max-width: 760px) {
  .bp-hero { min-height: 480px; }
  .bp-name { font-size: clamp(52px, 15vw, 96px); }
  .bp-hero-copy { bottom: 28px; }
  .bp-profile { grid-template-columns: 1fr; gap: 40px; padding-top: 64px; padding-bottom: 80px; }
  .bp-portrait { position: static; }
  .bp-portrait img { max-height: none; aspect-ratio: 4 / 5; }
  .bp-copy { padding-top: 0; }
  .bp-gal-nav { display: none; }
  .bp-next { grid-template-columns: 1fr; padding-top: 56px; padding-bottom: 64px; }
  .bp-next-link { grid-template-columns: 96px 1fr; }
  .bp-all { justify-self: start; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .bp-name { font-size: 56px; }
  .bp-hero-copy { bottom: 20px; }
  .bp-strip img { height: min(72vh, calc((100vw - 2 * var(--gut)) / var(--bp-ar-all, 1))); }
}

/* ---------- footer ---------- */
.foot { display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: baseline; padding: 30px var(--gut) 34px; font-size: 14px; color: var(--ink-soft); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* v54: the label inside the garment (home page). The cloth is the inside of a garment with its neckline seam; the
   woven main label carries the mark, the satin care label the links. Pieces are generated blank and cut by
   tools/prep-footer.cjs; zones are set inline from src/footer-media.json, so the type scales with the photo. */
/* v55: a full card like the others: one real screen under the bar (never shorter than the label needs) */
.foot.fl { --fl-w: clamp(400px, min(48vw, calc((var(--app-h) - var(--bar) - 190px) * var(--fl-ar))), 660px);
  --fl-h: max(calc(var(--fl-w) / var(--fl-ar) + var(--fl-room, 150px)), calc(var(--app-h) - var(--bar)));
  /* v63: the card runs up behind the menu (the bar goes clear over it, as over the closing photo; src/site.js barTone).
     --fl-h stays the cloth area under the bar, so the label and the photo sit exactly where they did; the card is
     --bar taller and the photo starts --bar down. --fl-tint is the fabric's colour at the screen's top edge. */
  --bar-bg: var(--fl-tint, #00189a); --bar-clear: 1; --clothtop: var(--clothtop-l);
  --cloth-w: max(100%, calc(var(--fl-h) / var(--cloth-ar)));
  position: relative; display: block; height: calc(var(--fl-h) + var(--bar)); padding: 0; overflow: hidden; color: var(--ink);
  background: #00189a var(--cloth-l) center var(--bar) / var(--cloth-w) auto no-repeat; }
/* the new fabric above the photo's top edge: as wide as the photo, its last row meeting the photo's first (1 px under,
   so no hairline can open at a fractional bar height) */
.foot.fl::before { content: ''; position: absolute; left: 50%; top: calc(var(--bar) + 1px); translate: -50% -100%;
  width: var(--cloth-w); aspect-ratio: var(--clothtop-ar); background: var(--clothtop) 0 0 / 100% 100% no-repeat; pointer-events: none; }
/* the label hangs from the neckline: the seam sits --fl-seam down the cloth photo as drawn */
.fl-piece { position: absolute; left: 50%; translate: -50% 0; width: var(--fl-w); aspect-ratio: var(--fl-ar);
  top: calc(var(--bar) + max(var(--fl-h), 100vw * var(--cloth-ar)) * var(--fl-seam) - var(--fl-w) * .012);
  filter: drop-shadow(0 1px 1px rgba(0, 6, 60, .45)) drop-shadow(0 8px 12px rgba(0, 6, 60, .3)); }
.fl-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fl-main, .fl-care { position: absolute; container-type: inline-size; }
.fl-main { display: grid; place-items: center; }
/* woven: the mark in the label's blue thread, sitting in the weave */
.fl-main svg { width: 40cqw; height: auto; fill: #1d2287; mix-blend-mode: multiply; filter: blur(.2px); translate: 0 6%; }
/* printed satin: dark blue ink, centred care-label lines */
/* (padding in % of the piece: cqw on the container itself would resolve against the viewport) */
.fl-care { display: flex; flex-direction: column; align-items: center; padding: 5.8% 2.3% 0; text-align: center; color: #1f2470; mix-blend-mode: multiply; }
.fl-care p, .fl-care ul { margin: 0; padding: 0; list-style: none; }
.fl-care p { font: 500 max(10.5px, 6.6cqw)/1.4 var(--sans); letter-spacing: .02em; }
.fl-care .fl-head { margin-bottom: 3cqw; font-size: max(11px, 7.4cqw); font-weight: 600; letter-spacing: .16em; }
.fl-care hr { width: 28cqw; margin: 7cqw auto; border: 0; border-top: 1px solid currentColor; opacity: .45; }
.fl-care li + li { margin-top: 2.6cqw; }
.fl-care a { display: inline-block; padding: 1.6cqw 0; font: 500 max(10.5px, 6.6cqw)/1.35 var(--sans); letter-spacing: .02em; text-decoration: none; }
/* v55: hover darkens the ink on the satin (the plain footer's lighten-on-hover made it vanish) */
.foot .fl-care a:hover, .foot .fl-care a:focus-visible { color: #080a3c; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.fl-care a:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.fl-care .fl-mail { font-size: max(10.5px, 5.6cqw); letter-spacing: 0; }
/* the care instruction, printed in capitals like a real care label (Chance's call; everything else stays lowercase) */
.fl-care .fl-dry { font: 600 max(10.5px, 5.4cqw)/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.fl-fine { position: absolute; left: var(--gut); right: var(--gut); bottom: 24px; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: 13px; color: var(--ink-soft); }
.fl-fine a { text-decoration: none; }
.fl-fine a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- arrival: quiet fades only ---------- */
.js .rise { opacity: 0; transform: translateY(14px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js .rise.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .markets { --mk-fr: 10px; --mk-sh: 32px; --mk-cork-w: 300px; padding-inline: 14px; }
  .mk-board { padding: 12px; }
  /* a long sheet: the paper repeats down its length like real paper (tools/prep-markets-tall.cjs), never stretched */
  .mk-sheet { grid-template-columns: minmax(0, 1fr); gap: 30px; border-image: var(--mk-paper-tall) 150 fill / var(--mk-sh) stretch round; }
  .mk-head, .mk-list { margin: -6px -4px -8px; }
  .markets h2 { font-size: 34px; } .mk-lede { margin-top: 8px; font-size: 14px; }
  .mk-list { column-gap: 28px; } .mk-month { padding-bottom: 16px; } .mk-month h3 { font-size: 23px; margin-bottom: 4px; }
  .mk-row { padding: 9px 0 10px; } .mk-what b { font-size: 17px; } .mk-what span { font-size: 13.5px; }
}
@media (max-width: 700px) {
  :root { --bar: 64px; }
  .top { height: 76px; padding: 0 20px; gap: 16px; }
  .top .home { width: 74px; }
  .top nav { gap: 18px; font-size: 14px; }
  .top nav .opt { display: none; }
  .book { min-height: 40px; padding: 0 16px; }
  /* phone cover reads like the poster: the mark at the top, the script under it, open grainy blue, words at the foot */
  .cover { padding: 92px 14px 28px; }
  .cover-mark { align-self: start; margin-top: 8svh; }
  /* v62 (Chance: "on mobile ... a tad higher and to the right"): from the old script's 50% / 142% */
  .cover-mark { --cw-x: 56%; --cw-y: 130%; --cw-w: 60.6%; }
  .cover-foot { padding: 0 6px; }
  .cover-foot { grid-template-columns: 1fr; gap: 18px; }
  .cover-foot .label { justify-self: start; }
  .gl-head { flex-direction: column; align-items: start; gap: 12px; }
  .wall { --lead: 86vw; --feather: 5vh; --feather-lead: 14vh; }
  .wall-lead { padding: 0 20px 44px; }
  .threshold-copy { left: 20px; right: 20px; }
  /* the label as wide as the screen allows; the cloth's smaller photo */
  /* v55 phone: a full upright card; the label hangs from the neckline at the top, the garment's body below it */
  .foot.fl { --fl-w: min(430px, calc(100vw - 8px)); --fl-room: 130px; background-image: var(--cloth-s); --clothtop: var(--clothtop-s); }
  .fl-care .fl-dry { letter-spacing: .08em; }
  .fl-fine { bottom: 18px; gap: 6px 20px; font-size: 12px; }
}
/* v54: a phone on its side: the footer is one real screen under the bar and the label fits in it, a tighter care label */
@media (max-height: 500px) and (orientation: landscape) {
  .foot.fl { --fl-h: max(300px, calc(var(--app-h) - var(--bar))); --fl-w: calc((var(--fl-h) - 62px) * var(--fl-ar)); background-image: var(--cloth-s); --clothtop: var(--clothtop-s); }
  .fl-care { padding-top: 2.6%; }
  .fl-care .fl-head { margin-bottom: 1cqw; font-size: max(10.5px, 7.4cqw); }
  .fl-care p, .fl-care a, .fl-care .fl-mail { font-size: max(10px, 6.6cqw); }
  .fl-care hr { margin: 4cqw auto; }
  .fl-care li + li { margin-top: 1cqw; }
  .fl-care a { padding: 1cqw 0; }
  .fl-fine { bottom: 12px; font-size: 12px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  :root { --bar: 56px; }
  .top { height: 64px; font-size: 13px; }
  .top .home { width: 72px; }
  .book { min-height: 36px; padding: 0 16px; }
  .cover { padding: 76px var(--gut) 20px; }
  .cover-mark { width: 72%; justify-self: center; --cw-x: 62.8%; --cw-y: 122%; --cw-w: 56.3%; }
  .cover-foot { grid-template-columns: minmax(0, 1fr) auto; }
  .cover-foot p { font-size: 15px; }
  .wall-lead { padding-bottom: 24px; }
  .wall-lead h2 { font-size: 32px; }
  .threshold-copy { top: 70px; }
  .threshold-copy h2 { font-size: 38px; margin-bottom: 16px; }
  /* short landscape: the title beside a two-column list, so the season still fits one card */
  .markets { --mk-fr: 9px; --mk-sh: 28px; padding-block: 10px; }
  .mk-board { padding: 9px; }
  .mk-sheet { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); gap: 22px; border-image: var(--mk-paper-tall) 150 fill / var(--mk-sh) stretch round; }
  .mk-list { columns: 2 11rem; column-gap: 22px; } .mk-month { padding-bottom: 8px; }
  .markets h2 { font-size: 28px; } .mk-lede { font-size: 13px; }
  .mk-month h3 { font-size: 18px; margin-bottom: 2px; }
  .mk-row { padding: 5px 0 6px; font-size: 13px; } .mk-when { font-size: 12.5px; } .mk-what { margin-top: 1px; } .mk-what b { font-size: 14px; } .mk-what span { font-size: 12px; margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation: none !important; }
  .js .rise { opacity: 1; transform: none; }
  .js .doors-grid img { opacity: 1; transform: none; filter: drop-shadow(0 1px 0 rgb(4 5 47 / .35)); transition: none; }
}

/* "feast your eyes." (v38, Chance): the designers' photographs as a reel, between the designers and "where to find
   us". Concept B, with his note: no blending; after the first swipe each photograph as close to full screen as it can
   be. A sibling of "out with the old, in with the new." (same light/bold Inter headline, the same round glass arrow),
   but its own object: a reel you thumb through. Markup tools/build.mjs (feastHtml), behaviour src/feast.js. */
/* v39 (Chance): black, like the globe card above it (its ink and paper-white too), and the bar goes black with it */
.feast { --fe-bg: #000; --fe-ink: #f4f3f7; --bar-bg: #000; --bar-ink: #f4f3f7; position: relative; background: var(--fe-bg); color: var(--fe-ink); }
.fe-title { margin: 0; font: 400 clamp(36px, 4.2vw, 68px)/1.04 var(--sans); letter-spacing: -.035em; }
.fe-title .fe-a { font-weight: 300; letter-spacing: -.03em; }
.fe-title .fe-b { display: block; font-weight: 650; letter-spacing: -.04em; }
.fe-strip { list-style: none; margin: 0; padding: 0; }
.fe-name { position: absolute; z-index: 2; left: 22px; bottom: 22px; display: inline-flex; align-items: center; gap: 7px; color: #fff;
  font: 500 14px/1.2 var(--sans); letter-spacing: .01em; text-decoration: none; text-shadow: 0 1px 12px rgb(0 0 0 / .5); }
.fe-name svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .35)); }
.fe-name:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.fe-ctl { display: flex; gap: 10px; }
.fe-ctl button { display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid rgb(255 255 255 / .78); border-radius: 50%;
  background: rgb(0 0 0 / .18); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 14px rgb(0 0 0 / .14);
  transition: opacity .35s var(--ease), background-color .25s, visibility 0s; }
.fe-ctl button:hover { background: rgb(255 255 255 / .16); }
.fe-ctl button:disabled { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s var(--ease), visibility 0s .35s; }
.fe-ctl svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .3)); }
.fe-prev svg { transform: scaleX(-1); }

/* without script, or with reduced motion: a native sideways strip that snaps photo by photo */
.feast:not(.fe-reel) { padding: clamp(56px, 9vh, 96px) 0 clamp(48px, 8vh, 80px); }
.feast:not(.fe-reel) .fe-lead { padding: 0 var(--gut) clamp(22px, 3.4vh, 34px); }
.feast:not(.fe-reel) .fe-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); padding: 0 var(--gut); scrollbar-width: none; }
.feast:not(.fe-reel) .fe-strip::-webkit-scrollbar { display: none; }
.feast:not(.fe-reel) .fe-fig { position: relative; flex: none; height: min(76svh, 760px); aspect-ratio: var(--a); scroll-snap-align: start; background: #0b0b0d; }
.feast:not(.fe-reel) .fe-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feast:not(.fe-reel) .fe-soft { display: none; }
.feast:not(.fe-reel) .fe-ctl { justify-content: flex-end; padding: 18px var(--gut) 0; }

/* the reel: one card; the photograph in front is sharp, full height (never cropped top or bottom; on a screen
   narrower than the photo it fills the width instead, trimming only the sides), with clean edges and a gap of
   paper between photographs; the ones either side rest in a soft blue memory */
.feast.fe-reel { height: calc(100vh - var(--bar)); height: calc(var(--app-h) - var(--bar)); overflow: hidden; }
.fe-reel .fe-stage { position: absolute; inset: 0; overflow: hidden; }
.fe-reel .fe-strip { position: absolute; inset: 0; }
.fe-reel .fe-fig { position: absolute; left: 0; top: 0; height: 100%; overflow: hidden; background: #0b0b0d; transform: translate3d(200vw, 0, 0);
  transition: transform .82s var(--ease); backface-visibility: hidden; }
.fe-reel .fe-soft, .fe-reel .fe-img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--fx, 50%) 50%; }
.fe-reel .fe-img { opacity: 0; transition: opacity .72s var(--ease); }
.fe-reel .fe-fig.is-cur .fe-img.ok { opacity: 1; }
.fe-reel .fe-fig::after { content: ''; position: absolute; inset: 0; z-index: 1; background: var(--fe-bg); opacity: .62; pointer-events: none; transition: opacity .72s var(--ease); }
/* the words sit on a softer, darker memory so they always read */
.fe-reel.is-intro .fe-fig:not(.is-cur)::after { opacity: .74; }
.fe-reel.is-intro.cur-fill .fe-fig.is-cur::before { content: ''; position: absolute; z-index: 1; inset: 45% 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / 0), rgb(0 0 0 / .45)); }
.fe-reel .fe-fig.is-cur::after { opacity: 0; }
.fe-reel .fe-name { opacity: 0; transition: opacity .45s var(--ease); }
.fe-reel .fe-fig.is-cur .fe-name { opacity: 1; transition: opacity .6s var(--ease) .4s; }
.fe-reel .fe-fig.is-fill .fe-name { left: auto; right: 22px; bottom: 26px; }
.fe-reel .fe-lead { position: absolute; z-index: 3; left: var(--gut); bottom: clamp(40px, 9vh, 96px); pointer-events: none;
  transition: opacity .55s var(--ease), transform .82s var(--ease); }
.fe-reel:not(.is-intro) .fe-lead { opacity: 0; transform: translate3d(-28px, 0, 0); }
.fe-reel.cur-fill .fe-lead { text-shadow: 0 1px 24px rgb(0 0 0 / .32); }
.fe-reel .fe-ctl { position: absolute; z-index: 3; top: clamp(16px, 2.8vh, 28px); right: clamp(16px, 2.2vw, 32px); }
.fe-reel.is-moving .fe-fig { will-change: transform; }
.fe-reel.no-anim .fe-fig, .fe-reel.no-anim .fe-img, .fe-reel.no-anim .fe-fig::after, .fe-reel.no-anim .fe-lead, .fe-reel.no-anim .fe-name { transition: none !important; }
@media (max-width: 760px) {
  .fe-title { font-size: clamp(32px, 8.6vw, 40px); }
  .fe-reel .fe-lead { left: 22px; bottom: 26px; }
  .fe-name { font-size: 13px; }
  .fe-ctl button { width: 42px; height: 42px; }
  .fe-ctl svg { width: 19px; height: 19px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .fe-title { font-size: 34px; }
  .fe-reel .fe-lead { bottom: 22px; }
  .fe-name { left: 14px; bottom: 14px; font-size: 13px; }
  .fe-ctl button { width: 40px; height: 40px; }
}

/* Ultramarine drafting ink on warm pattern paper. Geometry never stretches:
   every panel, handle, flap and HTML label uses the same 500 x 450 scale. */
.svc {
 --svc-paper: #efe9dc; --svc-ink: #1a1fa0; --svc-hair: rgb(26 31 160 / .28);
 --bar-bg: #efe9dc; --bar-ink: #1a1fa0;
 position: relative; height: calc(100vh - var(--bar, 72px)); height: calc(var(--app-h) - var(--bar, 72px));
 background: var(--svc-paper); color: var(--svc-ink); font-family: var(--sans, 'Inter', sans-serif); text-transform: lowercase; isolation: isolate;
}
.svc .svc-stage {
 position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 18px;
 width: 100%; height: calc(100vh - var(--bar, 72px)); height: calc(var(--app-h) - var(--bar, 72px));
 padding: clamp(22px, 3.4svh, 36px) var(--gut, 5vw) 24px;
}
.svc.svc-pin { height: calc((100vh - var(--bar, 72px)) * 2); height: calc((var(--app-h) - var(--bar, 72px)) * 2); }
.svc.svc-pin .svc-stage { position: sticky; top: var(--bar, 72px); }
.svc .svc-head { display: flex; justify-content: space-between; align-items: start; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--svc-hair); }
.svc .svc-title { margin: 0; font: 400 clamp(32px, 3.4vw, 52px)/1.05 var(--sans, 'Inter', sans-serif); letter-spacing: -.055em; text-transform: lowercase; }
.svc .svc-deck { margin: 10px 0 0; font-size: 16px; line-height: 1.3; letter-spacing: -.015em; }
.svc .svc-board { position: relative; min-height: 0; container-type: size; --svc-piece-w: min(48cqw, 111.11cqh); }
.svc .svc-piece { position: absolute; width: var(--svc-piece-w); aspect-ratio: 500 / 450; top: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; container-type: inline-size; }
.svc .svc-piece-sales { left: 25%; z-index: 2; }
.svc .svc-piece-strategy { left: 75%; z-index: 1; }
.svc .svc-draft { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-linejoin: round; stroke-linecap: round; }
.svc .svc-draft path, .svc .svc-draft circle { vector-effect: non-scaling-stroke; }
.svc .svc-draft text { fill: currentColor; stroke: none; font: 400 10px var(--sans, 'Inter', sans-serif); letter-spacing: .025em; }
.svc .svc-cut { stroke-width: 1.35; fill: var(--svc-paper); }
.svc .svc-seam { stroke-width: .85; stroke-dasharray: 5 5; opacity: .68; }
.svc .svc-mark { stroke-width: 1.1; }
.svc .svc-fine { stroke-width: .75; opacity: .72; }
.svc .svc-fold-line { stroke-width: .85; stroke-dasharray: 8 4 2 4; }
.svc .svc-drill { stroke-width: .85; }
.svc .svc-number { fill: var(--svc-paper); stroke-width: 1; }
.svc .svc-copy { position: absolute; top: 42%; left: 20%; width: 60%; }
.svc .svc-key { margin: 0 0 1.8cqw; font-size: 2.6cqw; line-height: 1.2; font-weight: 500; letter-spacing: .025em; }
.svc .svc-name { margin: 0; font-size: 13.2cqw; line-height: .98; font-weight: 400; letter-spacing: -.06em; }
.svc .svc-description { margin: 3.2cqw 0 0; font-size: 4.6cqw; line-height: 1.35; letter-spacing: -.023em; text-wrap: pretty; }
.svc .svc-flap-front, .svc .svc-finish { left: 50%; pointer-events: none; visibility: hidden; }
.svc .svc-flap-front { z-index: 3; }
.svc .svc-finish { z-index: 4; }
.svc .svc-heart { fill: #1a1fa0; fill-opacity: 0; opacity: 0; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.svc .svc-bag-labels { opacity: 0; }
.svc .svc-bag-labels text { font-size: 13px; letter-spacing: .01em; }
.svc .svc-foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; min-height: 45px; padding-top: 16px; border-top: 1px solid var(--svc-hair); }
.svc .svc-legend { display: flex; align-items: center; gap: 8px; font-size: 10px; line-height: 1.2; letter-spacing: .01em; }
.svc .svc-legend-line { width: 25px; border-top: 1px solid currentColor; }
.svc .svc-legend-line-dashed { margin-left: 12px; border-top-style: dashed; }
.svc .svc-assembly { display: flex; align-items: center; gap: 13px; margin: 0; font-size: 17px; line-height: 1.3; letter-spacing: -.035em; }
.svc .svc-match { display: block; width: 22px; height: 10px; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: skewY(-30deg); }
.svc .svc-note { justify-self: end; margin: 0; font-size: 10px; line-height: 1.3; letter-spacing: .01em; }
.svc .svc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 900px) and (orientation: portrait), (max-width: 600px) {
 .svc .svc-stage { gap: 10px; padding: 20px 18px 18px; }
 .svc .svc-head { padding-bottom: 14px; gap: 12px; }
 .svc .svc-title { font-size: 32px; }
 .svc .svc-deck { font-size: 13px; margin-top: 7px; }
 .svc .svc-board { --svc-piece-w: min(100cqw, 55.55cqh); }
 .svc .svc-piece-sales { left: 50%; top: 25%; }
 .svc .svc-piece-strategy { left: 50%; top: 75%; }
 .svc .svc-foot { grid-template-columns: 1fr auto; gap: 10px 8px; padding-top: 13px; }
 .svc .svc-assembly { grid-column: 1 / -1; grid-row: 1; justify-content: center; font-size: 15px; gap: 10px; }
 .svc .svc-legend { font-size: 8px; gap: 5px; }
 .svc .svc-legend-line { width: 14px; }
 .svc .svc-legend-line-dashed { margin-left: 4px; }
 .svc .svc-note { font-size: 8px; }
}
@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) {
 .svc .svc-stage { padding: 28px 38px 24px; }
 .svc .svc-title { font-size: 44px; }
 .svc .svc-deck { font-size: 16px; }
 .svc .svc-assembly { font-size: 18px; }
 .svc .svc-legend, .svc .svc-note { font-size: 10px; }
}
@media (max-height: 500px) and (orientation: landscape) {
 .svc .svc-stage { padding: 12px 30px; gap: 7px; }
 .svc .svc-head { padding-bottom: 9px; gap: 16px; align-items: center; }
 .svc .svc-intro { display: flex; align-items: baseline; gap: 16px; }
 .svc .svc-title { font-size: 27px; }
 .svc .svc-deck { margin: 0; font-size: 11px; }
 .svc .svc-foot { min-height: 24px; padding-top: 8px; gap: 10px; }
 .svc .svc-legend, .svc .svc-note { font-size: 8px; }
 .svc .svc-legend { gap: 5px; }
 .svc .svc-legend-line { width: 16px; }
 .svc .svc-legend-line-dashed { margin-left: 3px; }
 .svc .svc-assembly { font-size: 13px; gap: 9px; }
 .svc .svc-match { width: 15px; height: 7px; }
 /* Wide panels retain readable copy on a low cutting table. */
 .svc .svc-key { font-size: 3cqw; margin-bottom: 2.5cqw; }
 .svc .svc-name { font-size: 13cqw; }
 .svc .svc-description { font-size: 4.8cqw; margin-top: 2cqw; line-height: 1.25; }
}

/* ---------- the showrooms card (v32): two variants, built one at a time (SHOWROOMS=prints | models) ---------- */
.sh { position: relative; }
.sh-stage { position: relative; min-height: calc(100vh - var(--bar)); min-height: calc(var(--app-h) - var(--bar)); }
.sh-title { margin: 0; font: 400 clamp(40px, 4.3vw, 66px)/1.02 var(--sans); letter-spacing: -.035em; text-transform: lowercase; }
.sh-lede { margin: 18px 0 0; max-width: 32ch; color: var(--ink-soft); font: 400 clamp(15px, 1.12vw, 17px)/1.5 var(--sans); }
.sh-swipe { display: none; margin: 0; font-size: 13px; color: var(--ink-soft); text-align: center; }
.sh-wall, .sh-gallery { scrollbar-width: none; }
.sh-wall::-webkit-scrollbar, .sh-gallery::-webkit-scrollbar { display: none; }

/* ===== A. sun prints: the rooms as cyanotypes, pinned to the blue ===== */
.sh-prints .sh-stage { display: grid; grid-template-columns: minmax(250px, .6fr) minmax(0, 1.5fr); gap: clamp(24px, 3vw, 56px);
  align-items: center; padding: clamp(24px, 4vh, 48px) var(--gut); }
/* two rows of prints always fit the screen: width follows the height available */
.sh-wall { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.6vh, 30px) clamp(18px, 2vw, 34px); align-items: center;
  width: min(100%, calc((var(--app-h) - var(--bar) - 130px) * 1.3 + 34px)); justify-self: center; }
.sh-print { position: relative; margin: 0; height: fit-content; container-type: inline-size; transform: rotate(var(--r));
  filter: drop-shadow(0 1px 1px rgb(4 6 40 / .35)) drop-shadow(0 14px 22px rgb(4 6 40 / .36)); }
.sh-paper { position: relative; display: block; width: 100%; }
.sh-paper img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* arriving: each print develops from the pale, unwashed emulsion to its blue, one after another */
.sh-washed { transition: opacity 1.9s cubic-bezier(.4, 0, .2, 1) calc(var(--i) * .42s + .2s); }
.js .sh-prints:not(.is-washed) .sh-washed { opacity: 0; transition: none; }
/* pencil, written in each print's paper margin (measured per sheet: --m top, --pb bottom, --l left) */
.sh-pencil { position: absolute; left: var(--l); right: calc(var(--l) + 1%); top: var(--m); bottom: calc(100% - var(--pb));
  display: flex; flex-direction: column; justify-content: center; color: rgb(58 58 70 / .84); }
.sh-pencil .sh-line { display: flex; align-items: baseline; gap: .6em; padding-right: 3.2em; }
.sh-pencil b { font: italic 400 max(13px, 4cqw)/1.05 var(--serif); letter-spacing: .005em; white-space: nowrap; }
.sh-pencil em { font: italic 400 max(10px, 2.75cqw)/1 var(--serif); color: rgb(58 58 70 / .7); white-space: nowrap; }
.sh-pencil .sh-addr { margin-top: .3cqw; font: 400 max(9.5px, 2.4cqw)/1.25 var(--sans); color: rgb(58 58 70 / .66); white-space: nowrap; }
.sh-ed { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font: italic 400 max(10px, 3.1cqw)/1 var(--serif); color: rgb(58 58 70 / .58); }

/* upright tablets: the words above, the prints below */
@media (min-width: 701px) and (max-aspect-ratio: 999/1000) {
  .sh-prints .sh-stage { grid-template-columns: 1fr; align-content: center; gap: 36px; }
  .sh-wall { width: min(100%, calc((var(--app-h) - var(--bar) - 300px) * 1.36 + 34px)); }
}
/* phones: one print at a time on a shelf you swipe along */
@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  .sh-prints .sh-stage { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 18px; padding: 24px 0; }
  .sh-copy { padding: 0 22px; }
  .sh-wall { display: flex; width: 100%; min-width: 0; justify-self: stretch; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 14px 22px 22px;
    overscroll-behavior-x: contain; touch-action: pan-x; }
  .sh-print { flex: 0 0 min(80vw, 420px); scroll-snap-align: center; }
  .sh-prints .sh-swipe { display: block; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .sh-prints .sh-stage { flex-direction: row; align-items: center; padding: 12px 0 12px 22px; gap: 4px; }
  .sh-copy { flex: 0 0 30%; padding: 0; }
  .sh-prints .sh-title { font-size: 30px; } .sh-prints .sh-lede { font-size: 13px; margin-top: 8px; }
  .sh-wall { flex: 1; min-width: 0; padding-block: 10px; }
  .sh-print { flex-basis: calc((var(--app-h) - var(--bar) - 64px) * 1.3); }
  .sh-prints .sh-swipe { display: none; }
}

/* ===== B. rooms in miniature: white architect's models in a grey gallery ===== */
.sh-models { --bar-bg: #59595d; --bar-ink: #f4f1e8; background: linear-gradient(180deg, #5b5b5f 0%, #8a898d 46%, #a9a8ac 100%); color: #f4f1e8; }
.sh-models .sh-stage { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(18px, 3.5vh, 40px);
  padding: clamp(26px, 5vh, 52px) var(--gut) clamp(20px, 4vh, 40px); }
.sh-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.sh-models .sh-lede { margin: 0; max-width: 36ch; text-align: right; color: rgb(244 241 232 / .82); text-wrap: balance; }
.sh-models .sh-lede .sh-paris { white-space: nowrap; }
.sh-models .sh-lede .script { font-size: 1.95em; line-height: 0; vertical-align: -.14em; margin: 0 .04em; }
.sh-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 26px); align-content: end; }
.sh-model { margin: 0; min-width: 0; cursor: pointer; }
.sh-frame { position: relative; display: block; width: 100%; aspect-ratio: 1; max-height: calc(var(--app-h) - var(--bar) - 320px); min-height: 160px;
  padding: 0; border: 0; border-radius: 0; background: #9e9da1; overflow: hidden; cursor: pointer; color: inherit; font: inherit; }
.sh-frame:focus { outline: none; }
.sh-frame:focus-visible { outline: 2px solid #f4f1e8; outline-offset: -2px; }
.sh-mini, .sh-real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-mini { object-position: 50% 66%; transform-origin: 50% 62%; transition: transform .8s var(--ease) .12s, opacity .4s ease .12s; }
.sh-real { opacity: 0; transform: scale(1.1); transition: opacity .45s ease, transform .6s ease; }
/* step inside: the camera moves into the model, and the model becomes the room */
.sh-model.is-inside .sh-mini { transform: scale(1.75); opacity: 0; transition: transform .95s cubic-bezier(.55, 0, .25, 1), opacity .45s ease .42s; }
.sh-model.is-inside .sh-real { opacity: 1; transform: none; transition: opacity .6s ease .4s, transform 1.2s var(--ease) .4s; }
.sh-label { padding-top: 16px; }
.sh-label b { display: block; font: 500 18px/1.2 var(--sans); letter-spacing: -.01em; }
.sh-label > .sh-where { display: block; margin-top: 4px; font: 400 12.5px/1.5 var(--sans); color: rgb(244 241 232 / .78); }
.sh-label > .sh-step { display: inline-block; margin-top: 10px; font: 500 12.5px/1 var(--sans); border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.sh-step .sh-out, .sh-model.is-inside .sh-step .sh-in { display: none; }
.sh-model.is-inside .sh-step .sh-out { display: inline; }
@media (max-width: 1000px) and (min-width: 701px) { .sh-head { display: block; } .sh-models .sh-lede { text-align: left; margin-top: 12px; } }
/* upright tablets: the gallery fills the screen as a two-and-a-bit shelf you swipe, like the phone */
@media (min-width: 701px) and (max-aspect-ratio: 999/1000) {
  .sh-models .sh-stage { grid-template-rows: auto auto; align-content: center; padding-inline: 0; }
  .sh-head { padding: 0 var(--gut); }
  .sh-gallery { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gut); overscroll-behavior-x: contain; touch-action: pan-x; }
  .sh-model { flex: 0 0 62%; scroll-snap-align: center; }
  .sh-frame { max-height: none; }
  .sh-models .sh-swipe { display: block; color: rgb(244 241 232 / .8); }
}
@media (max-width: 700px), (max-height: 500px) and (orientation: landscape) {
  .sh-models .sh-stage { grid-template-rows: auto auto auto; align-content: center; padding: 24px 0 22px; gap: 20px; }
  .sh-head { display: block; padding: 0 22px; }
  .sh-models .sh-lede { text-align: left; margin-top: 10px; }
  .sh-gallery { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 22px; overscroll-behavior-x: contain; touch-action: pan-x; }
  .sh-model { flex: 0 0 min(82vw, 420px); scroll-snap-align: center; }
  .sh-frame { max-height: none; }
  .sh-models .sh-swipe { display: block; color: rgb(244 241 232 / .8); }
}
@media (max-height: 500px) and (orientation: landscape) {
  .sh-models .sh-stage { grid-template-columns: 30% minmax(0, 1fr); grid-template-rows: 1fr; align-items: center; padding: 12px 0 12px 22px; gap: 4px; }
  .sh-head { padding: 0; } .sh-models .sh-title { font-size: 30px; } .sh-models .sh-lede { font-size: 13px; margin-top: 8px; }
  .sh-model { flex-basis: calc(var(--app-h) - var(--bar) - 130px); }
  .sh-label { padding-top: 6px; } .sh-label b { font-size: 15px; } .sh-label > .sh-where { font-size: 10.5px; line-height: 1.35; } .sh-label > .sh-where .sh-bldg { display: none; } .sh-label > .sh-step { margin-top: 4px; font-size: 11px; }
  .sh-models .sh-swipe { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-mini, .sh-real, .sh-model.is-inside .sh-mini, .sh-model.is-inside .sh-real, .sh-washed { transition: none !important; }
}

/* ===== C. ring the bell (round 2): one stucco wall across the whole card; the buzzer and a "ring to enter" placard
   on it; a bell opens its room in a modal. --u = CSS px per source px of the panel photo, so every piece, and the
   wall tile's grain, keep the photo's own scale. ===== */
.sh-bells { --u: min((var(--app-h) - var(--bar) - 130px) / 797, (100vw - 2 * var(--gut)) / 960, 1.25px);
  /* the tile starts at the card's top-left, so the bar (which borrows it, --bar-texture) lines up seamlessly */
  --bar-bg: var(--ultra); --bar-texture: 1;
  background-color: var(--ultra); background-repeat: repeat; background-position: 0 0; background-size: calc(var(--tw) * var(--u)) auto; }
.sh-bells .sh-stage { display: grid; place-items: center; }
.sh-scene { display: flex; flex-direction: row-reverse; align-items: flex-start; justify-content: center; gap: calc(110 * var(--u)); }
/* the objects sit on the wall: a soft contact shadow from the upper-left light, as in the photo */
.sh-panel, .sh-placard { filter: drop-shadow(calc(4 * var(--u)) calc(7 * var(--u)) calc(9 * var(--u)) rgb(3 5 40 / .5)) drop-shadow(calc(1 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u)) rgb(3 5 40 / .35)); }
.sh-placard { width: calc(668 * .6 * var(--u)); height: auto; margin-top: calc(232 * var(--u)); display: block; }
.sh-panel { position: relative; flex: none; container-type: inline-size; }
.sh-plate { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* one row = one button: the bell and its name card */
.sh-bell { position: absolute; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
.sh-bell:focus { outline: none; }
.sh-bell:focus-visible { outline: 1.5px solid rgb(244 241 232 / .9); outline-offset: 2px; border-radius: 6px; }
.sh-press { position: absolute; border-radius: 50%; background: radial-gradient(circle at 50% 42%, rgb(0 0 0 / 0) 40%, rgb(30 18 0 / .34) 72%, rgb(30 18 0 / 0) 100%); opacity: 0; transition: opacity .12s ease; }
.sh-bell:active .sh-press, .sh-bell.is-pressing .sh-press { opacity: 1; transition: none; }
/* the lamp warms like a filament when rung, and cools when the room is closed */
.sh-lamp { position: absolute; height: auto; opacity: 0; pointer-events: none; transition: opacity 1s cubic-bezier(.2, .7, .3, 1); }
.sh-bell.is-lit .sh-lamp { opacity: 1; transition: opacity .3s cubic-bezier(.3, 0, .6, 1) .05s; }
.sh-name { position: absolute; display: flex; align-items: center; padding-left: calc(14 * var(--u)); overflow: hidden; white-space: nowrap;
  font: italic 400 max(11px, calc(27 * var(--u)))/1 var(--serif); letter-spacing: .01em; color: rgb(29 31 78 / .9); mix-blend-mode: multiply; }

/* phones and upright tablets: the placard above the buzzer */
@media (max-width: 700px), (min-width: 701px) and (max-aspect-ratio: 999/1000) {
  .sh-bells { --u: min((var(--app-h) - var(--bar) - 96px) / 1083, (100vw - 48px) / 480); }
  .sh-scene { flex-direction: column; align-items: center; gap: calc(46 * var(--u)); }
  .sh-placard { margin-top: 0; }
}
/* short landscape screens (also small phones under 700px wide): side by side, sized by the height */
@media (max-height: 500px) and (orientation: landscape) {
  .sh-bells { --u: min((var(--app-h) - var(--bar) - 28px) / 797, (100vw - 60px) / 1000); }
  .sh-scene { flex-direction: row-reverse; align-items: flex-start; gap: calc(110 * var(--u)); }
  .sh-placard { margin-top: calc(232 * var(--u)); }
}

/* ----- the room, in a modal: warm paper, the room's photo, the facts, and a way to book ----- */
html.sh-modal-open { overflow: hidden; scrollbar-gutter: stable; }
.sh-modal { padding: 0; margin: auto; border: 0; background: none; color: var(--ultra); max-width: none; max-height: none; overflow: visible; }
.sh-modal::backdrop { background: rgb(6 8 52 / .62); opacity: 0; transition: opacity .32s ease; }
.sh-modal.is-open::backdrop { opacity: 1; }
.sh-sheet { position: relative; box-sizing: border-box; width: min(960px, 100vw - 2 * var(--gut)); max-height: calc(var(--app-h) - 48px); overflow: auto; overscroll-behavior: contain;
  background: var(--ink); box-shadow: 0 30px 80px rgb(2 3 30 / .45), 0 2px 6px rgb(2 3 30 / .25);
  opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease; }
.sh-modal.is-open .sh-sheet { opacity: 1; transform: none; transition: opacity .45s ease .05s, transform .55s var(--ease) .05s; }
.sh-modal.is-text .sh-sheet { width: min(560px, 100vw - 2 * var(--gut)); }
.sh-close { position: absolute; top: 14px; right: 16px; z-index: 2; padding: 8px 4px; border: 0; background: none; cursor: pointer;
  font: 400 13px/1 var(--sans); color: var(--ultra); border-bottom: 1px solid currentColor; }
.sh-pane:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: min(560px, var(--app-h) - 48px); }
.sh-pane-text:not([hidden]) { grid-template-columns: 1fr; min-height: 0; }
.sh-photo { margin: 0; min-height: 0; background: var(--ultra-deep); }
.sh-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sh-info { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 4vw, 52px) clamp(24px, 3.4vw, 48px); }
.sh-kicker { margin: 0; font: 400 13px/1.3 var(--sans); color: rgb(26 31 160 / .66); }
.sh-city { margin: 10px 0 0; font: 400 clamp(38px, 3.6vw, 54px)/1 var(--sans); letter-spacing: -.035em; }
.sh-bldg { margin: 18px 0 0; font: italic 400 21px/1.2 var(--serif); }
.sh-where { margin: 8px 0 0; font: 400 15px/1.55 var(--sans); }
.sh-facts { margin: 16px 0 0; font: 400 15px/1.55 var(--sans); color: rgb(26 31 160 / .8); max-width: 40ch; text-wrap: pretty; }
.sh-cta { align-self: flex-start; margin-top: 26px; padding: 12px 24px; border: 1px solid currentColor; border-radius: 999px; color: var(--ultra); text-decoration: none; font: 400 15px/1 var(--sans); }
.sh-cta:hover { background: var(--ultra); color: var(--ink); }
.sh-others { margin: 28px 0 0; padding-top: 16px; border-top: 1px solid rgb(26 31 160 / .18); font: 400 13px/1.7 var(--sans); color: rgb(26 31 160 / .66); }
.sh-others > span:first-child { margin-right: 4px; }
.sh-other { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--ultra); border-bottom: 1px solid rgb(26 31 160 / .35); }
.sh-other:hover { border-bottom-color: currentColor; }
@media (max-width: 700px) {
  .sh-sheet, .sh-modal.is-text .sh-sheet { width: calc(100vw - 24px); max-height: calc(var(--app-h) - 24px); }
  .sh-pane:not([hidden]) { grid-template-columns: 1fr; min-height: 0; }
  .sh-photo { aspect-ratio: 4 / 3; }
  .sh-info { padding: 22px 22px 24px; }
  .sh-city { font-size: 36px; } .sh-bldg { margin-top: 12px; font-size: 19px; }
  .sh-where, .sh-facts { font-size: 14px; } .sh-facts { margin-top: 10px; }
  .sh-cta { margin-top: 18px; } .sh-others { margin-top: 18px; padding-top: 12px; }
  .sh-close { top: 10px; right: 10px; padding: 8px 10px; background: rgb(244 241 232 / .92); border-bottom: 0; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .sh-pane:not([hidden]) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .sh-pane-text:not([hidden]) { grid-template-columns: 1fr; min-height: 0; }
  .sh-photo { aspect-ratio: auto; }
  .sh-close { top: 10px; right: 12px; padding: 6px 2px; background: none; border-bottom: 1px solid currentColor; font-size: 12px; }
  .sh-sheet, .sh-modal.is-text .sh-sheet { max-height: calc(var(--app-h) - 20px); }
  .sh-sheet { width: calc(100vw - 40px); }
  .sh-pane:not([hidden]):not(.sh-pane-text) { min-height: calc(var(--app-h) - 20px); }
  .sh-info { padding: 18px 26px; }
  .sh-city { font-size: 30px; margin-top: 4px; } .sh-bldg { margin-top: 8px; font-size: 17px; }
  .sh-where, .sh-facts { font-size: 13px; } .sh-facts { margin-top: 6px; }
  .sh-cta { margin-top: 12px; padding: 9px 18px; font-size: 13px; } .sh-others { margin-top: 12px; padding-top: 8px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .sh-lamp, .sh-bell.is-lit .sh-lamp, .sh-sheet, .sh-modal.is-open .sh-sheet, .sh-modal::backdrop { transition: none !important; }
}

/* v48 (Chance, 2026-10-18): the retailers card is a showroom visitors' book lying open on blue linen. The left page
   is "signed in": every store's real logo as a rubber stamp. The right and following pages are "remarks": real buyers'
   words from portalwholesale.com, each linked to the page that holds it. Geometry variables come from the photograph's
   own measured pages (tools/build.mjs bkVars, tools/prep-book.cjs). src/book.js paginates and turns the pages. Without
   script, and in print, the pages sit as plain sheets of the same paper. */
.bk-card { --bk-ink: #26307f; --bk-text: #1d2266; --bk-soft: rgb(27 29 74 / .64); --bk-rule: rgb(60 70 150 / .26);
  --bar-bg: var(--ultra); --bar-texture: 1; position: relative; overflow: clip;
  background: var(--ultra) var(--bk-linen) 0 0 / 520px auto repeat; }
.bk-card .doors-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.bk-card .doors-sub { max-width: 30ch; }
.bk-nav { display: flex; align-items: center; gap: 10px; }
.bk-nav[hidden] { display: none; }
.bk-hint { margin: 0 6px 0 0; font: 400 13px/1.3 var(--sans); color: rgb(244 241 232 / .72); }
.bk-turn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--ink); cursor: pointer;
  border: 1px solid rgb(244 241 232 / .7); border-radius: 50%; background: rgb(244 241 232 / .08);
  transition: background-color .25s var(--ease), opacity .3s var(--ease), border-color .25s var(--ease); }
.bk-turn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.bk-turn:hover { background: rgb(244 241 232 / .18); border-color: var(--ink); }
.bk-turn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.bk-turn:disabled { opacity: .28; cursor: default; background: none; }
.bk-hint { transition: opacity .4s var(--ease); } .bk-nav.is-end .bk-hint { opacity: 0; }

/* the book */
.bk { position: relative; }
.bk-book { position: relative; aspect-ratio: var(--bk-ar); perspective: 2600px; }
/* the photograph is a background, so the card's only images are the stores' own marks */
.bk-photo { position: absolute; inset: 0; background: var(--bk-photo) 0 0 / 100% 100% no-repeat; }
/* its shadow on the linen is baked (tools/prep-book.cjs): a CSS drop-shadow here re-rasterised on every resize */
.bk-shade-cast { position: absolute; left: calc(var(--sd-x) * 1%); top: calc(var(--sd-y) * 1%); width: calc(var(--sd-w) * 1%); height: calc(var(--sd-h) * 1%);
  background: var(--bk-shadow) 0 0 / 100% 100% no-repeat; pointer-events: none; }
.bk-pg { position: absolute; container-type: inline-size; top: calc(var(--sl-y) * 1%); left: calc(var(--sl-x) * 1%);
  width: calc(var(--s-w) * 1%); height: calc(var(--s-h) * 1%); color: var(--bk-text); text-transform: lowercase; }
.bk-pg.is-r { top: calc(var(--sr-y) * 1%); left: calc(var(--sr-x) * 1%); }
.bk-h { display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw; margin: 0; padding-bottom: 1.3cqw;
  border-bottom: 1px solid var(--bk-rule); }
.bk-word { font: italic 400 4.6cqw/1 var(--serif); color: var(--bk-ink); }
.bk-credit { font: 400 max(9px, 2.45cqw)/1.2 var(--sans); letter-spacing: .01em; color: var(--bk-soft); text-decoration: underline;
  text-decoration-color: rgb(27 29 74 / .28); text-decoration-thickness: 1px; text-underline-offset: .22em; }
.bk-credit:hover { color: var(--bk-text); text-decoration-color: currentColor; }
.bk-pg a:focus-visible { outline: 1.5px solid var(--bk-ink); outline-offset: 2px; border-radius: 2px; }
/* stamps: positions are in the page's own width (cqw), so the layout scales with the page */
.bk-stamps { position: absolute; inset: 8cqw 0 0; margin: 0; padding: 0; list-style: none; }
.bk-stamps li { position: absolute; left: calc(var(--x) * 1cqw); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1cqw); rotate: var(--r); }
.bk-stamp { display: block; width: 100%; height: auto; opacity: .9; mix-blend-mode: multiply; user-select: none; -webkit-user-drag: none; }
/* remarks */
.bk-remarks { margin: 0; padding: 0; list-style: none; }
.rm { padding: 2.5cqw 0 2.3cqw; border-bottom: 1px solid var(--bk-rule); }
.rm-q { margin: 0; }
.rm-q p { margin: 0; font: italic 400 max(11.5px, 4.2cqw)/1.28 var(--serif); letter-spacing: -.004em; color: var(--bk-text); text-wrap: pretty; }
.rm-q p::before { content: '\201C'; margin-left: -.4em; } .rm-q p::after { content: '\201D'; }
.rm-by { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .15em 1em; margin: 1.3cqw 0 0;
  font: 400 max(9.5px, 2.8cqw)/1.25 var(--sans); letter-spacing: .01em; color: var(--bk-soft); }
.rm-src { display: inline-flex; align-items: center; gap: .3em; color: inherit; text-decoration: none; white-space: nowrap; }
.rm-src svg { width: .85em; height: .85em; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.rm-src:hover { color: var(--bk-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* the turning leaf (src/book.js builds it for each turn): the right-hand sheet, hinged at the gutter */
.bk-leaf { position: absolute; z-index: 3; left: calc(var(--lf-x) * 1%); top: calc(var(--lf-y) * 1%); width: calc(var(--lf-w) * 1%);
  height: calc(var(--lf-h) * 1%); transform-origin: 0 50%; transform-style: preserve-3d; pointer-events: none; }
.bk-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.bk-face.is-back { transform: rotateY(180deg); }
.bk-sheet { position: absolute; top: calc(var(--fi-t) * 1%); left: calc(var(--ff-l) * 1%); width: calc(var(--fi-w) * 1%); aspect-ratio: var(--bk-ar);
  background: var(--bk-photo) 0 0 / 100% 100% no-repeat; }
.bk-face.is-back > .bk-sheet { left: calc(var(--fb-l) * 1%); }
.bk-face .bk-pg { top: calc(var(--ffp-t) * 1%); left: calc(var(--ffp-l) * 1%); width: calc(var(--fp-w) * 1%); height: calc(var(--fp-h) * 1%); visibility: visible; }
.bk-face.is-back .bk-pg { top: calc(var(--fbp-t) * 1%); left: calc(var(--fbp-l) * 1%); }
.bk-shade { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: linear-gradient(90deg, rgb(12 14 50 / .34), rgb(12 14 50 / .1) 45%, rgb(12 14 50 / 0)); }
.bk-face.is-back .bk-shade { background: linear-gradient(270deg, rgb(12 14 50 / .3), rgb(12 14 50 / .08) 45%, rgb(12 14 50 / 0)); }
.bk-cast { position: absolute; z-index: 2; top: calc(var(--lf-y) * 1%); height: calc(var(--lf-h) * 1%); width: calc(var(--lf-w) * 1%); opacity: 0; pointer-events: none; }
.bk-cast.is-r { left: calc(var(--lf-x) * 1%); background: linear-gradient(90deg, rgb(12 14 50 / .26), rgb(12 14 50 / 0) 70%); }
.bk-cast.is-l { left: calc((var(--lf-x) - var(--lf-w)) * 1%); background: linear-gradient(270deg, rgb(12 14 50 / .26), rgb(12 14 50 / 0) 70%); }

/* with script: one card; pages not in view are laid out (for pagination) but hidden */
.js .doors.bk-card { display: flex; flex-direction: column; height: calc(var(--app-h) - var(--bar)); min-height: 0;
  padding: clamp(36px, calc(var(--app-h) * 0.065), 80px) var(--gut) clamp(24px, calc(var(--app-h) * 0.045), 52px); }
.js .bk-card .doors-head { flex: none; margin: 0 0 clamp(16px, calc(var(--app-h) * 0.03), 30px); }
.js .bk-card .bk { flex: 1 1 auto; min-height: 0; container-type: size; display: flex; align-items: center; justify-content: center; }
.js .bk-card .bk-book { flex: none; width: min(100cqw, 100cqh * var(--bk-ar)); }
.bk-live .bk-book > .bk-pg:not(.is-shown) { visibility: hidden; }
/* before the card arrives, the pages are clean; src/book.js stamps them and writes the remarks in */
.bk-wait .bk-book > .bk-pg .bk-stamp, .bk-wait .bk-book > .bk-pg .rm { opacity: 0; }

/* wide screens: the words on the left, the book beside them, a little askew as it was set down */
@media (min-width: 1100px) and (min-height: 560px) {
  .js .doors.bk-card { display: grid; grid-template-columns: minmax(280px, 25vw) minmax(0, 1fr); column-gap: clamp(28px, 3vw, 64px); }
  .js .bk-card .doors-head { flex-direction: column; align-items: flex-start; justify-content: space-between; margin: 0; padding-block: clamp(8px, calc(var(--app-h) * 0.04), 48px) clamp(8px, calc(var(--app-h) * 0.02), 24px); }
  .js .bk-card .bk { height: 100%; }
  .js .bk-card .bk-book { rotate: -1.2deg; }
}

/* phones upright: one page at a time, filling the width; the rest of the book runs off the screen's edge, and turning
   or the next gesture slides it across (src/book.js sets data-side) */
@media (max-width: 700px) {
  .js .doors.bk-card { padding: 26px 16px 14px; }
  .js .bk-card .doors-head { margin-bottom: 18px; }
  .bk-card .doors h2, .bk-card h2 { font-size: clamp(30px, 8.4vw, 38px); }
  .bk-card .doors-sub { font-size: 14px; max-width: 24ch; }
  .bk-hint { display: none; }
  .js .bk-card .bk { justify-content: flex-start; align-items: center; margin-inline: -16px; }
  .js .bk-card .bk-book { width: min((100cqw - 20px) / var(--pg-frac), 100cqh * var(--bk-ar));
    translate: calc(10px - var(--pp-l) * 100%) 0; transition: translate .9s cubic-bezier(.45, .05, .2, 1); }
  .js .bk-card .bk-book[data-side="r"] { translate: calc(100cqw - 10px - var(--pp-r) * 100%) 0; }
}
/* phones on their side: the book at full width, taller than the screen; the card scrolls freely (src/home-slides.js zone) */
@media (max-height: 500px) and (orientation: landscape) {
  .js .doors.bk-card { height: auto; display: block; padding: 22px max(16px, env(safe-area-inset-right)) 22px max(16px, env(safe-area-inset-left)); }
  .js .bk-card .bk { height: calc((100vw - 32px) / var(--bk-ar)); }
  .bk-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .js .bk-card .bk-book { transition: none; } }

/* without script, and in print: the same pages as plain sheets of the book's paper, one after another */
.bk-card:not(.bk-live) :is(.bk-photo, .bk-shade-cast, .bk-nav) { display: none; }
.bk-card:not(.bk-live) .bk-book { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 22px; aspect-ratio: auto; width: auto; }
.bk-card:not(.bk-live) .bk-pg { position: relative; inset: auto; width: auto; height: auto; padding: 22px 22px 18px;
  background: #f1ead8 var(--bk-paper) 0 0 / 300px auto repeat; box-shadow: 0 10px 24px rgb(0 0 40 / .35); }
.bk-card:not(.bk-live) .bk-stamps { position: relative; inset: auto; height: calc(var(--st-h) * 1cqw); margin-top: 3cqw; }
@media print {
  .bk-card { overflow: visible; height: auto !important; display: block !important; background: none; }
  .bk-card .bk { container-type: normal !important; display: block !important; height: auto !important; margin: 0 !important; }
  .bk-card .bk-photo, .bk-card .bk-shade-cast, .bk-card .bk-nav, .bk-leaf, .bk-cast { display: none !important; }
  .bk-card .bk-book { display: grid !important; grid-template-columns: 1fr 1fr; gap: 16px; aspect-ratio: auto !important; width: auto !important; translate: none !important; rotate: none !important; }
  .bk-card .bk-book > .bk-pg { position: relative; inset: auto; width: auto; height: auto; padding: 16px; visibility: visible !important; break-inside: avoid; border: 1px solid #ccc; }
  .bk-card .bk-stamps { position: relative; inset: auto; height: calc(var(--st-h) * 1cqw); }
  .bk-card .bk-stamp, .bk-card .rm { opacity: 1 !important; }
}