/* LT UK, direction A: "Her seal, opened out". A quiet Japanese lifestyle magazine on paper, sumi ink and her
   orange (#ff914d). Her border leaves her seal as one string, runs down the lane in the page's margin, ties each
   part into its place, and closes into a ring round the free call (string.js). Every page is a table laid square
   round her seal. The fixed spine of 27 October: A's colours, B's pill in A's place, D's held steps, the
   oriental grounds, Aloja headings over Lora. The shared system for every page; TEMPLATE.md says how to use it. */

@font-face { font-family: "Aloja"; font-style: normal; font-weight: 400; font-display: swap; src: url("/2026-10-28-morning/_assets/previews/a/round2/_assets/fonts/aloja.f29ab89306.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400; font-display: swap; src: url("/2026-10-28-morning/_assets/previews/a/round2/_assets/fonts/lora-400-normal.a7e3bcfbf6.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 700; font-display: swap; src: url("/2026-10-28-morning/_assets/previews/a/round2/_assets/fonts/lora-700-normal.97a79a60c8.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 400; font-display: swap; src: url("/2026-10-28-morning/_assets/previews/a/round2/_assets/fonts/lora-400-italic.1be4ea8fcd.woff2") format("woff2"); }
@font-face { font-family: "Lora"; font-style: italic; font-weight: 700; font-display: swap; src: url("/2026-10-28-morning/_assets/previews/a/round2/_assets/fonts/lora-700-italic.3418613e15.woff2") format("woff2"); }

/* the circle between pages: the next page opens out of a circle where the visitor clicked (site.js stores the
   point; the head script plays it on pagereveal). Browsers without it change page plainly. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

:root {
  --paper: #fcfbf8;
  --paper-2: #f6f1e9;
  --ink: #1c1a18;
  --ink-2: #55504a;
  --rule: rgba(28, 26, 24, 0.16);
  --rule-strong: rgba(28, 26, 24, 0.5);
  --or: #ff914d;
  --or-text: #a3461a;
  --on-or: #1c1a18;
  --frost: rgba(252, 251, 248, 0.95);
  --pill-solid: rgba(252, 250, 246, 0.985);
  --pill-edge: rgba(28, 26, 24, 0.13);
  --mono-ring: #807a72;
  --hover: rgba(255, 145, 77, 0.18);
  --shadow: 0 10px 34px rgba(28, 26, 24, 0.16), 0 1px 3px rgba(28, 26, 24, 0.08);
  --pic-bg: #e9e2d6;
  --g-op: 0.055;
  --grain: url("/2026-10-28-morning/_assets/previews/a/round2/_assets/images/site-grain-1.8d718d3c00.svg");
  /* the four parts: a colour each (the string's tints, swatches, rules) and a text tone that holds 4.5:1 */
  --c-startups: #ff914d; --t-startups: #a3461a;
  --c-business: #5b6c8f; --t-business: #4d5d7e;
  --c-home: #7d8f69; --t-home: #56664a;
  --c-gifts: #a8677a; --t-gifts: #8c4d60;
  /* the held steps' paper tints */
  --g0: #fcfbf8; --g1: #f7f2ea; --g2: #f3ede3;
  --serif: "Lora", Georgia, serif;
  --head: "Aloja", "Lora", Georgia, serif;
  --m: clamp(20px, 6vw, 120px);
  --max: 1560px;
  --pad: clamp(56px, 10vh, 128px);
  /* the string's lane, its height (--band-h, the helper's data-lt-height: slim on every page, David 27 October
     23:47 UTC), its box (--band, 1.18 times the height), the tables' gutters (the box plus clear paper either side,
     so the string never touches a piece), and where content starts clear of the lane */
  --lane: 18px; --band-h: 12px; --band: calc(var(--band-h) * 1.18); --gut: 20px;
  /* content starts 22 px clear of the band's inner side (the string never comes within 20 px of words); the right
     edge matches the left on wide screens, so the column and her seal sit on the screen's own centre (P22) */
  --inset: calc(var(--lane) + var(--band) / 2 + 22px);
  --inset-r: var(--m);
  /* a block the string wraps (data-wrap) keeps this much clear paper above and below it for the band and its 20 px */
  --wrap-clear: calc(var(--band) + 34px);
  /* and its right side sits this far in from the column, so the band stays about 10 px off the screen's edge */
  --wrap-right: max(0px, calc(var(--band) + 22px - var(--inset-r)));
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --brake: cubic-bezier(0.16, 0.84, 0.24, 1);
  --s: 450ms;
  color-scheme: light;
}
/* phones: sections closer together, so a short screen never holds a band of bare paper between them */
@media (max-width: 639px) { :root { --pad: clamp(44px, 7vh, 72px); } }
@media (min-width: 640px) { :root { --lane: 24px; --band-h: 14px; --gut: 22px; } }
@media (min-width: 1024px) { :root { --lane: calc(var(--m) + 44px); --band-h: 16px; --gut: 26px; --inset: calc(var(--m) + 76px); --inset-r: var(--inset); } }
@media (min-width: 1440px) { :root { --band-h: 18px; --gut: 28px; } }
:root[data-theme="dark"] {
  --paper: #151412; --paper-2: #1c1a17; --ink: #f2eee7; --ink-2: #bdb6ab;
  --rule: rgba(242, 238, 231, 0.17); --rule-strong: rgba(242, 238, 231, 0.5);
  --or-text: #ffa46e;
  --frost: rgba(27, 25, 22, 0.94); --pill-solid: rgba(30, 28, 25, 0.985); --pill-edge: rgba(242, 238, 231, 0.15);
  --mono-ring: #8e877d; --hover: rgba(255, 145, 77, 0.16);
  --shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --pic-bg: #2a2621; --g-op: 0.07;
  --grain: url("/2026-10-28-morning/_assets/previews/a/round2/_assets/images/site-grain-2.82206b4043.svg");
  --t-startups: #ffa46e;
  --c-business: #8fa0c4; --t-business: #9fb0d4;
  --c-home: #a9bb94; --t-home: #b3c49e;
  --c-gifts: #d197a8; --t-gifts: #dba5b5;
  --g0: #151412; --g1: #1b1916; --g2: #211e1a;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #151412; --paper-2: #1c1a17; --ink: #f2eee7; --ink-2: #bdb6ab;
    --rule: rgba(242, 238, 231, 0.17); --rule-strong: rgba(242, 238, 231, 0.5);
    --or-text: #ffa46e;
    --frost: rgba(27, 25, 22, 0.94); --pill-solid: rgba(30, 28, 25, 0.985); --pill-edge: rgba(242, 238, 231, 0.15);
    --mono-ring: #8e877d; --hover: rgba(255, 145, 77, 0.16);
    --shadow: 0 10px 34px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
    --pic-bg: #2a2621; --g-op: 0.07;
    --grain: url("/2026-10-28-morning/_assets/previews/a/round2/_assets/images/site-grain-2.82206b4043.svg");
    --t-startups: #ffa46e;
    --c-business: #8fa0c4; --t-business: #9fb0d4;
    --c-home: #a9bb94; --t-home: #b3c49e;
    --c-gifts: #d197a8; --t-gifts: #dba5b5;
    --g0: #151412; --g1: #1b1916; --g2: #211e1a;
    color-scheme: dark;
  }
}
[data-part="startups"] { --pc: var(--c-startups); --pt: var(--t-startups); }
[data-part="business"] { --pc: var(--c-business); --pt: var(--t-business); }
[data-part="home"] { --pc: var(--c-home); --pt: var(--t-home); }
[data-part="gifts"] { --pc: var(--c-gifts); --pt: var(--t-gifts); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; scroll-padding-bottom: 110px; background-color: var(--paper); background-image: var(--grain); }
body { margin: 0; color: var(--ink); font-family: var(--serif); font-size: 1.125rem; line-height: 1.6; overflow-x: hidden; overflow-x: clip; }
img { max-width: 100%; height: auto; }
h1, h2, h3, h4, p, figure, blockquote, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--or); color: var(--on-or); }
:focus-visible { outline: 3px solid var(--or-text); outline-offset: 4px; border-radius: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: 16px; z-index: 100; padding: 12px 18px; background: var(--ink); color: var(--paper); border-radius: 999px; transform: translateY(-200%); text-decoration: none; }
.skip:focus { transform: none; }

/* ---- the string (string.js lays her border; these place it and give each run its colour by class: her orange
   first, the part's tint where the page is in a part, ink in the orange call block; P16) ---- */
.lt-run--or, .lt-run--startups { --lt-border-orange: #ff914d; }
.lt-run--business { --lt-border-orange: var(--c-business); }
.lt-run--home { --lt-border-orange: var(--c-home); }
.lt-run--gifts { --lt-border-orange: var(--c-gifts); }
/* inside the orange call block the string keeps her band in a deep tone of her own orange, so the close still reads
   as her border (composition 4, N1) */
.lt-run--ink { --lt-border-orange: #8a3a12; }
.sw.sw--none { background: transparent; }
.string { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; pointer-events: none; overflow: visible; }
.string--stage { z-index: 0; height: 100%; }
.string--cursor { position: fixed; z-index: 69; width: 100vw; height: 100vh; opacity: 0; transition: opacity 0.35s ease; }
.string--cursor.on { opacity: 1; }
/* on touch, a short length where the finger lifts, gone within 0.6 s (P15) */
.string--touch { position: fixed; z-index: 69; width: 100vw; height: 100vh; opacity: 0; }
.string--touch.on { opacity: 1; }
.string--touch.on.fade { opacity: 0; transition: opacity 0.6s ease-out; }
/* the orbit round her seal: its own small layer, turned by the compositor alone */
.orbit-host { position: absolute; z-index: 1; pointer-events: none; will-change: transform; transform-origin: 50% 50%; }
.orbit-host svg { display: block; overflow: visible; }
.lane-ref { position: absolute; left: 0; right: 0; top: 0; height: 0; max-width: var(--max); margin: 0 auto; visibility: hidden; pointer-events: none; }
.lane-ref i { position: absolute; top: 0; height: 1px; left: calc(var(--lane) - var(--band) / 2); width: var(--band); }
.vp-probe { position: fixed; top: 0; left: 0; width: 0; height: 100vh; height: 100svh; visibility: hidden; pointer-events: none; }

/* ---- type: Aloja (capitals) for headings, Lora larger and bold for subheadings, Lora for the rest ---- */
h1, .hook, .pc-name, .ti-name, .foot-name b, .sheet-h { font-family: var(--head); font-weight: 400; font-synthesis: none; text-transform: uppercase; letter-spacing: 0.02em; }
/* Aloja's brush strokes taper to a point. In these four headings, at their largest size, a tapered end falls alone
   in its part of the line and reads under 3:1 on the paper (WCAG 1.4.3): a hairline of the heading's own colour keeps
   those ends solid. The colour is unchanged; every other heading is left as drawn */
#h-laura, #h-keep, #h-onsite, #h-acc { -webkit-text-stroke: 1px currentColor; }
h1 { font-size: clamp(2rem, 4.4vw, 4.6rem); line-height: 1.04; max-width: 15ch; }
.hook { font-size: clamp(1.9rem, 3.8vw, 3.4rem); line-height: 1.06; max-width: 20ch; }
.hook--big { font-size: clamp(2.2rem, 5vw, 4.6rem); max-width: 16ch; }
h3, h4, .sub { font-family: var(--serif); font-weight: 700; line-height: 1.2; }
h3, .sub { font-size: clamp(1.45rem, 2.1vw, 1.95rem); }
h4 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
.kicker { font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.lede { font-size: clamp(1.1rem, 1.45vw, 1.3rem); line-height: 1.55; max-width: 40ch; }
.plain { max-width: 58ch; color: var(--ink-2); }
.small { font-size: 0.9375rem; color: var(--ink-2); }
.leave { font-size: 0.95rem; }

/* ---- actions ---- */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; border-radius: 999px; background: var(--or); color: var(--on-or); font-size: 1.0625rem; text-decoration: none; transition: background-color 0.25s ease, transform 0.25s var(--ease); }
.btn::after, .quiet::after { content: ""; width: 18px; height: 1px; margin-left: 12px; background: currentColor; transition: width 0.3s var(--ease); }
.btn:hover { background: #ff8136; }
.btn:hover::after, .quiet:hover::after { width: 28px; }
.btn:active { transform: scale(0.98); }
.btn-ink { background: #1c1a18; color: #fcfbf8; }
.btn-ink:hover { background: #000; }
.quiet { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--rule-strong); }
.quiet:hover { color: var(--or-text); text-decoration-color: currentColor; }

/* ---- sections: full-width grounds, content in one measured box clear of the lane ---- */
main { display: block; }
.wrap { position: relative; max-width: var(--max); margin: 0 auto; padding: var(--pad) var(--inset-r) var(--pad) var(--inset); }
.head { display: grid; gap: 18px; margin-bottom: clamp(32px, 6vh, 72px); }
.lab { display: flex; gap: 12px; align-items: baseline; margin-bottom: 20px; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-2); }
.lab-n { color: var(--or-text); font-size: 0.95rem; letter-spacing: 0.04em; }
@media (min-width: 1024px) {
  /* the section names stand upright in the margin, beside the string's lane */
  .lab { position: absolute; left: auto; right: calc(100% - var(--lane) + var(--band) / 2 + 24px); top: calc(var(--pad) + 4px); margin: 0; writing-mode: vertical-rl; white-space: nowrap; line-height: 1.2; }
}

/* ---- the oriental grounds: one per part, in the border's family, ink at about 5 percent; never grids,
   never dots, never orange (orange patterning is her border's alone) ---- */
.ground { position: relative; isolation: isolate; }
.ground::before { content: ""; position: absolute; inset: 0; z-index: -1; background-color: var(--ink); opacity: var(--g-op); pointer-events: none; -webkit-mask-repeat: repeat; mask-repeat: repeat; }
/* each ground fades in just after its section's run of the string has arrived, once, and stays (P9; string.js marks
   it .g-in) */
html.js:not(.still) .ground::before { transition: opacity 0.9s ease 0.12s; }
html.g-wait .ground:not(.g-in)::before { opacity: 0 !important; }
.ground[data-ground="asanoha"]::before { -webkit-mask-image: url("/2026-10-28-morning/_assets/previews/a/round2/_assets/images/grounds/asanoha.73e819784d.svg"); mask-image: url("/2026-10-28-morning/_assets/previews/a/round2/_assets/images/grounds/asanoha.73e819784d.svg"); -webkit-mask-size: 52px auto; mask-size: 52px auto; }
.ground[data-ground="seigaiha"]::before { -webkit-mask-image: url("/2026-10-28-morning/_assets/previews/a/round2/_assets/images/grounds/seigaiha.4c28532a6b.svg"); mask-image: url("/2026-10-28-morning/_assets/previews/a/round2/_assets/images/grounds/seigaiha.4c28532a6b.svg"); -webkit-mask-size: 56px auto; mask-size: 56px auto; }
.ground[data-ground="shippo"]::before { -webkit-mask-image: url("/2026-10-28-morning/_assets/previews/a/round2/_assets/images/grounds/shippo.007578124f.svg"); mask-image: url("/2026-10-28-morning/_assets/previews/a/round2/_assets/images/grounds/shippo.007578124f.svg"); -webkit-mask-size: 52px auto; mask-size: 52px auto; }
.ground[data-ground="kikko"]::before { -webkit-mask-image: url("/2026-10-28-morning/_assets/previews/a/round2/_assets/images/grounds/kikko.6dca1da037.svg"); mask-image: url("/2026-10-28-morning/_assets/previews/a/round2/_assets/images/grounds/kikko.6dca1da037.svg"); -webkit-mask-size: 40px auto; mask-size: 40px auto; }

/* ---- the pill: B's styling in A's place, bottom centre at every width ---- */
.pill { position: fixed; z-index: 60; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 2px; width: max-content; max-width: calc(100% - 12px); padding: 5px; border-radius: 999px; background: var(--pill-solid); border: 1px solid var(--pill-edge); box-shadow: var(--shadow); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .pill { background: var(--frost); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); }
}
.brand { display: inline-flex; align-items: center; gap: 12px; flex: none; color: var(--ink); text-decoration: none; border-radius: 999px; }
.mono { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--mono-ring); transition: box-shadow 0.25s ease; }
.mono img { display: block; width: 25px; height: auto; }
.brand:hover .mono { box-shadow: inset 0 0 0 2px var(--or); }
:root[data-theme="dark"] .mono img { filter: invert(0.95); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mono img { filter: invert(0.95); } }
.brand-words { display: none; line-height: 1.05; }
.brand-words b { font: 400 19px/1 var(--head); letter-spacing: 0.04em; }
.brand-words small, .nav-sub { font: 400 11px/1.3 var(--serif); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.brand-words small { display: block; margin-top: 4px; }
.nav-a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; min-width: 48px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 700 0.9375rem/1 var(--serif); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.22s ease; }
.nav-a:hover { background: var(--hover); }
.nav-a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--or); text-underline-offset: 6px; }
.nav-call { background: var(--or); color: var(--on-or); padding: 0 18px; }
.nav-call:hover { background: #ff8136; }
.nav-theme { padding: 0; width: 48px; }
.nav-theme-i { display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; background: linear-gradient(90deg, currentColor 50%, transparent 50%); transition: transform 0.5s var(--brake); }
:root[data-theme="dark"] .nav-theme-i { transform: rotate(180deg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-theme-i { transform: rotate(180deg); } }
html:not(.js) .nav-theme, html:not(.js) .nav-four { display: none; }
.nav-wide { display: none; }
.nav-four[aria-expanded="true"] { background: var(--hover); }
@media (min-width: 1024px) {
  .nav-wide { display: inline-flex; }
  .nav-four { display: none; }
  .brand { padding-right: 18px; }
  .brand-words { display: grid; }
  .nav-a { padding: 0 15px; }
}
@media (max-width: 1023px) { html:not(.js) .nav-wide { display: inline-flex; } html:not(.js) .pill { flex-wrap: wrap; justify-content: center; border-radius: 26px; } }
@media (max-width: 360px) { .pill { gap: 0; padding: 4px; } .nav-a { padding: 0 11px; font-size: 0.875rem; } .nav-call { padding: 0 13px; } .nav-theme { width: 44px; min-width: 44px; } .mono { width: 46px; height: 46px; } }

/* the sheet that "The four" slides up out of the pill */
.sheet { position: fixed; z-index: 59; left: 8px; right: 8px; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 70px); max-width: 520px; margin: 0 auto; max-height: calc(100svh - 110px); overflow: auto; padding: 14px 16px 16px; border-radius: 22px; background: var(--pill-solid); color: var(--ink); border: 1px solid var(--pill-edge); box-shadow: var(--shadow); transform: translateY(calc(100% + 96px)); visibility: hidden; transition: transform 420ms var(--brake), visibility 0s linear 420ms; }
.sheet.is-open { transform: none; visibility: visible; transition: transform 420ms var(--brake), visibility 0s; }
html:not(.js) .sheet { display: none; }
.sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-bottom: 6px; }
.sheet-h { font-size: 1.25rem; }
.sheet-close, .panel-close, .pc-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid currentColor; background: transparent; color: inherit; font: 400 0.9375rem/1 var(--serif); cursor: pointer; transition: background-color 0.22s ease; }
.sheet-close:hover, .panel-close:hover { background: var(--hover); }
.sheet-list a { display: grid; grid-template-columns: 14px 1fr; column-gap: 12px; align-items: baseline; padding: 11px 10px; margin: 0 -10px; border-radius: 14px; text-decoration: none; }
.sheet-list a:hover { background: var(--hover); }
.sheet-list b { font-size: 1.0625rem; }
.sheet-list span:last-child { grid-column: 2; font-size: 0.875rem; color: var(--ink-2); line-height: 1.4; }
.sw { display: inline-block; width: 12px; height: 12px; background: var(--pc, var(--or)); }
.sheet-more { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rule); }

/* C's label, riding beside the head of the cursor string, with a fine pointer only */
.cursor-tag { position: fixed; z-index: 70; left: 0; top: 0; pointer-events: none; padding: 7px 13px; border-radius: 999px; background: var(--ink); color: var(--paper); font: 400 0.8125rem/1 var(--serif); letter-spacing: 0.02em; opacity: 0; transition: opacity 0.2s; will-change: transform; white-space: nowrap; }
.cursor-tag.on { opacity: 1; }
@media not all and (hover: hover) and (pointer: fine) { .cursor-tag { display: none; } }

/* ---- the table: her seal at the centre, N pieces laid square round it (the dial on the front door) ---- */
.table-wrap { position: relative; width: 100%; margin: 0 auto; }
.table { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gut); }
.table[data-n="4"] { aspect-ratio: 1; }
.table-item { position: relative; display: block; overflow: hidden; background: var(--pic-bg); color: #1c1a18; text-decoration: none; border-radius: 3px; transition: transform 0.5s var(--ease), box-shadow 0.5s ease, opacity 0.4s ease; }
.table-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.table-item:focus-visible { outline-offset: 3px; z-index: 2; }
/* its words are set in the picture, at its outer corner, clear of the seal */
.ti-lab { position: absolute; z-index: 2; display: grid; gap: 2px; max-width: calc(100% - 16px); padding: 7px 10px 8px; background: #fcfbf8; color: #1c1a18; box-shadow: 0 2px 10px rgba(28, 26, 24, 0.12); border-radius: 2px; }
.table[data-n="4"] .table-item:nth-of-type(1) .ti-lab { left: 8px; top: 8px; }
.table[data-n="4"] .table-item:nth-of-type(2) .ti-lab { right: 8px; top: 8px; }
.table[data-n="4"] .table-item:nth-of-type(3) .ti-lab { left: 8px; bottom: 8px; }
.table[data-n="4"] .table-item:nth-of-type(4) .ti-lab { right: 8px; bottom: 8px; }
.ti-top { display: flex; align-items: center; gap: 7px; }
.ti-name { font-size: clamp(1rem, 1.5vw, 1.3rem); line-height: 1.1; overflow-wrap: break-word; }
.ti-for { font-size: 0.8125rem; line-height: 1.3; color: #55504a; }
.ti-open { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; }
.ti-open::after { content: ""; width: 16px; height: 1px; background: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .ti-open { display: none; }
  .table-item:hover, .table-item:focus-visible { transform: scale(1.03); box-shadow: 0 16px 34px rgba(28, 26, 24, 0.22); }
  .table:has(.table-item:hover) .table-item:not(:hover) { opacity: 0.84; }
}
@media (max-width: 400px) { .ti-lab { padding: 5px 8px 6px; } }
@media (max-width: 360px) { .ti-lab { left: 6px; right: auto; max-width: calc(100% - 12px); } .ti-name { font-size: 0.85rem; white-space: nowrap; } .ti-top { gap: 5px; } .ti-for { display: none; } }
/* the seal sits on a paper disc where the pieces meet; the string's orbit runs round it, outside its own ring */
.table-seal { position: absolute; left: 50%; top: 50%; width: 32%; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--paper); transform: translate(-50%, -50%); pointer-events: none; box-shadow: 0 4px 18px rgba(28, 26, 24, 0.14); }
.table-seal img { grid-area: 1 / 1; display: block; width: calc(100% - 2 * var(--band) - 22px); height: auto; aspect-ratio: 1; border-radius: 50%; }
.seal--dark { display: none !important; }
:root[data-theme="dark"] .seal--light { display: none !important; }
:root[data-theme="dark"] .seal--dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .seal--light { display: none !important; }
  :root:not([data-theme="light"]) .seal--dark { display: block !important; }
}
/* six pieces: three above the seal, three below it; on phones the seal above a grid of two by three */
.table[data-n="6"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto var(--seal-row, 150px) auto; }
.table[data-n="6"] .table-item { aspect-ratio: 1; }
.table[data-n="6"] .table-item:nth-of-type(n+4) { grid-row: 3; }
@media (max-width: 639px) {
  .table[data-n="6"] { grid-template-columns: 1fr 1fr; grid-template-rows: var(--seal-row, 132px) auto auto auto; }
  .table[data-n="6"] .table-item:nth-of-type(n) { grid-row: auto; }
  .table[data-n="6"] .table-item:nth-of-type(1) { grid-row: 2; }
  .table[data-n="6"] .table-seal { top: calc(var(--seal-row, 132px) / 2); width: calc(var(--seal-row, 132px) - 8px); }
}
.table[data-n="6"] .table-seal { width: calc(var(--seal-row, 150px) - 8px); }
/* the dial's pause: one quiet round button (its words stay its name), in one place tied to the dial, just under
   the table at its right end, clear of the string's way out down the middle (composition 1, 19; composition 4, N10) */
.dial-pause { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; margin: 14px 0 0 auto; padding: 0; border: 1px solid var(--rule-strong); border-radius: 50%; background: transparent; color: var(--ink-2); font-size: 0.8125rem; cursor: pointer; }
.dial-pause .dp-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dial-pause:hover { color: var(--ink); background: var(--hover); }
.dp-i { position: relative; width: 12px; height: 12px; }
.dp-i::before, .dp-i::after { content: ""; position: absolute; top: 1px; bottom: 1px; width: 3px; background: currentColor; }
.dp-i::before { left: 2px; } .dp-i::after { right: 2px; }
.dial-pause[aria-pressed="true"] .dp-i::before { left: 2px; width: 0; height: 0; top: 0; background: none; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.dial-pause[aria-pressed="true"] .dp-i::after { display: none; }
html.still .dial-pause { display: none; }
/* a table centred on the screen itself, not on its column (the column's left side holds the string's lane): her
   seal then falls on the screen's centre line, the pill's axis (P22). For phones and tablets; the page's main is the
   container it measures. */
main#page { container: page / inline-size; }
@media (max-width: 1023px) {
  main .table-wrap.on-axis { --tw: min(100cqw - 2 * max(var(--m), 22px), var(--tw-max, 560px)); width: var(--tw); max-width: none; min-width: 0; justify-self: start; margin-left: calc(50cqw - var(--inset) - var(--tw) / 2); margin-right: 0; }
}

/* the opening plays once a visit: the pieces lie a little askew and settle square on D's brake while the
   string's ring closes round her seal */
.table-item:nth-of-type(1) { --x: -5%; --y: 4%; --r: -4deg; }
.table-item:nth-of-type(2) { --x: 6%; --y: -3%; --r: 3.5deg; }
.table-item:nth-of-type(3) { --x: -3%; --y: 6%; --r: 4.5deg; }
.table-item:nth-of-type(4) { --x: 5%; --y: 5%; --r: -3deg; }
.table-item:nth-of-type(5) { --x: -4%; --y: 3%; --r: 3deg; }
.table-item:nth-of-type(6) { --x: 4%; --y: -4%; --r: -3.5deg; }
html.op .table-item { transform: translate(var(--x), var(--y)) rotate(var(--r)); box-shadow: 0 12px 26px rgba(28, 26, 24, 0.18); }
html.op.go .table-item { transform: none; box-shadow: 0 0 0 rgba(28, 26, 24, 0); transition: transform 1.1s var(--brake), box-shadow 1.1s ease; }

/* ---- the front door's opening: words, and the four tables round her seal, over a faded wallpaper of the
   four parts' grounds ---- */
.open { position: relative; }
.open > .wrap { display: grid; gap: 16px; padding-top: 26px; padding-bottom: 64px; }
.open-words { display: grid; gap: 16px; justify-items: start; align-content: center; }
.tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; width: fit-content; max-width: 100%; margin-bottom: clamp(14px, 2.2vw, 26px); padding: 0 0 12px; border-bottom: 1px solid var(--rule); font-style: italic; font-size: clamp(1.1rem, 1.7vw, 1.55rem); color: var(--or-text); }
.tag-by { white-space: nowrap; font-style: normal; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.open .lede { font-size: clamp(1.02rem, 1.4vw, 1.25rem); }
.open .table-wrap { max-width: min(100%, 560px, calc(100svh - 470px)); min-width: min(100%, 300px); margin-top: 10px; }
.open .table-wrap.on-axis { --tw-max: max(280px, min(560px, 100svh - 536px)); }
/* phones: the first screen ends above the pill, the dial's pause included; each table shows its name at reading
   size and the word to open it, and the panel it opens says the rest (composition 1, 11 and 12) */
@media (max-width: 639px) {
  .open > .wrap { gap: 12px; padding-top: 18px; }
  .open-words { gap: 12px; }
  .open .tag { margin-bottom: 4px; padding-bottom: 8px; }
  .open .table-wrap { margin-top: 6px; }
  .open .ti-for { display: none; }
  .open .ti-name { font-size: 1.0625rem; }
  .open .dial-pause { margin-top: 10px; }
}
/* her three short sentences, one to a line at every width (composition 1, 17) */
.open-words { container: words / inline-size; width: 100%; }
.open h1 .l { display: block; white-space: nowrap; }
.open h1 { max-width: none; font-size: min(clamp(2rem, 4.4vw, 4.6rem), 10.4cqi); }
.wall { position: absolute; inset: 0; z-index: -1; overflow: hidden; -webkit-mask-image: radial-gradient(ellipse 70% 62% at var(--wx, 50%) var(--wy, 60%), #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 70% 62% at var(--wx, 50%) var(--wy, 60%), #000 20%, transparent 78%); pointer-events: none; }
.wall-p { position: absolute; }
.wall-p:nth-child(1) { left: 0; top: 0; right: calc(100% - var(--wx, 50%)); bottom: calc(100% - var(--wy, 60%)); background-color: rgba(255, 145, 77, 0.06); }
.wall-p:nth-child(2) { left: var(--wx, 50%); top: 0; right: 0; bottom: calc(100% - var(--wy, 60%)); background-color: rgba(91, 108, 143, 0.06); }
.wall-p:nth-child(3) { left: 0; top: var(--wy, 60%); right: calc(100% - var(--wx, 50%)); bottom: 0; background-color: rgba(125, 143, 105, 0.07); }
.wall-p:nth-child(4) { left: var(--wx, 50%); top: var(--wy, 60%); right: 0; bottom: 0; background-color: rgba(168, 103, 122, 0.06); }
.wall .ground::before { opacity: calc(var(--g-op) * 1.3); }
@media (min-width: 640px) and (max-width: 1023px) {
  .open > .wrap { padding-top: 48px; justify-items: center; text-align: center; }
  .open-words { justify-items: center; }
  .open .tag { justify-content: center; }
  .open .table-wrap.on-axis { --tw-max: max(300px, min(560px, 100svh - 560px)); }
}
@media (min-width: 1024px) {
  .open > .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 5vw; align-items: center; min-height: 100vh; min-height: 100svh; padding-top: 48px; padding-bottom: 104px; }
  .open h1 { font-size: min(clamp(2.4rem, 3.8vw, 4.1rem), 10.4cqi); }
  .open .table-wrap { max-width: min(100%, calc(100svh - 200px), 640px); margin-top: 0; }
}

/* ---- the four parts rise over the end of the opening, on their own time, once the reader starts down ---- */
.sheet-rise { position: relative; margin-top: -34px; background-color: var(--paper); background-image: var(--grain); border-radius: 28px 28px 0 0; box-shadow: 0 -18px 40px -26px rgba(28, 26, 24, 0.3); }
html.js:not(.still) .sheet-rise { transform: translateY(min(24vh, 220px)); transition: transform 0.8s var(--brake); }
html.js .sheet-rise.risen { transform: none; }
html.js .sheet-rise.now { transition: none; }
/* until the sheet has risen it lies over the top of the held steps below it, so the held steps' stage gives up
   that strip (clip-path clips its hit-testing too) and the sheet's own links take a tap; the clip rises with it */
html.js:not(.still) .sheet-rise + .ride > .ride-stage { clip-path: inset(min(24vh, 220px) -100vmax -100vmax -100vmax); transition: clip-path 0.8s var(--brake), background-color 800ms var(--brake); }
html.js:not(.still) .sheet-rise.risen + .ride > .ride-stage { clip-path: inset(0 -100vmax -100vmax -100vmax); }
html.js:not(.still) .sheet-rise.now + .ride > .ride-stage { transition: none; }
html.js:not(.still) .sheet-rise:not(.risen) + .ride { pointer-events: none; }
html.js:not(.still) .sheet-rise:not(.risen) + .ride > .ride-stage { pointer-events: auto; }
.sheet-rise > .wrap { padding-top: clamp(56px, 9vh, 104px); }
/* after a held section and after an opening, the next section follows without a screen of bare paper between */
.ride.ride-on + section > .wrap, .area-open + section > .wrap { padding-top: clamp(28px, 5vh, 56px); }

/* the four parts open in place directly beneath the dial: the tables are the parts, so there is no second set of
   cards (P65; composition 1, 5 and 6) */
.door-panels { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .door-panels { grid-column: 1 / -1; } }
.door-panels .part-panel .pp { margin: var(--wrap-clear) var(--wrap-right) var(--wrap-clear) 0; }
.pp-wide { grid-column: 1 / -1; min-width: 0; }

/* the four cards: words set in the picture, closed by default, opening in place (B's way) with C's buttons */
.parts-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.part-h { margin: 0; font: inherit; }
.part-card { display: grid; width: 100%; padding: 0; margin: 0 0 30px; border: 0; background: none; color: var(--ink); text-align: left; font: inherit; cursor: pointer; transition: opacity 0.4s ease, transform 0.6s var(--ease); }
span.part-card { cursor: default; }
.pc-pic { position: relative; display: block; overflow: hidden; background: var(--pic-bg); border-radius: 3px; }
.pc-pic img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; transition: transform 1.2s var(--ease); }
.pc-label { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; max-width: calc(100% - 20px); padding: 9px 9px 9px 14px; background: #fcfbf8; color: #1c1a18; border-radius: 2px; box-shadow: 0 2px 12px rgba(28, 26, 24, 0.14); }
.pc-name { font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1; }
.pc-btn { min-height: 36px; padding: 0 14px; font-size: 0.875rem; border-color: #1c1a18; }
html:not(.js) .pc-btn { display: none; }
.pc-words { display: grid; gap: 4px; padding: 14px 2px 0; }
.pc-for { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pt); }
.pc-line { color: var(--ink-2); font-size: 1rem; line-height: 1.5; max-width: 40ch; }
.part-card[aria-expanded="true"] .pc-btn { background: #1c1a18; color: #fcfbf8; }
@media (hover: hover) and (pointer: fine) {
  .part-card:hover .pc-pic img { transform: scale(1.03); }
  .part-card:hover { transform: translateY(-4px); }
  .parts-grid:has(.part-card:hover) .part-card:not(:hover):not([aria-expanded="true"]) { opacity: 0.72; }
}
.part-card:focus-visible { outline-offset: 6px; }
@media (min-width: 700px) {
  html.js .parts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3vw; }
  html.js .part-h:nth-of-type(odd) { grid-column: 1; }
  html.js .part-h:nth-of-type(even) { grid-column: 2; }
  html.js .part-h:nth-of-type(1), html.js .part-h:nth-of-type(2) { grid-row: 1; }
  html.js .part-h:nth-of-type(3), html.js .part-h:nth-of-type(4) { grid-row: 3; }
  html.js .part-panel { grid-column: 1 / -1; }
  html.js .part-panel:nth-of-type(1), html.js .part-panel:nth-of-type(2) { grid-row: 2; }
  html.js .part-panel:nth-of-type(3), html.js .part-panel:nth-of-type(4) { grid-row: 4; }
  .pc-pic img { aspect-ratio: 4 / 5; }
}
@media (min-width: 1024px) {
  html.js .parts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2vw; }
  html.js .part-h:nth-of-type(n) { grid-row: 1; }
  html.js .part-h:nth-of-type(1) { grid-column: 1; }
  html.js .part-h:nth-of-type(2) { grid-column: 2; margin-top: 48px; }
  html.js .part-h:nth-of-type(3) { grid-column: 3; }
  html.js .part-h:nth-of-type(4) { grid-column: 4; margin-top: 48px; }
  html.js .part-panel:nth-of-type(n) { grid-row: 2; }
  .pc-label { left: 8px; right: 8px; bottom: 8px; max-width: none; justify-content: space-between; }
}

/* a panel slides open (0fr to 1fr) on D's brake; closed, it is hidden from focus and from reading */
.dc-panel { display: grid; grid-template-rows: 1fr; }
.dc-in { min-height: 0; }
html.js .dc-panel { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--s) var(--brake), visibility 0s linear var(--s); }
html.js .dc-panel > .dc-in { overflow: hidden; }
html.js .dc-panel.is-open { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--s) var(--brake), visibility 0s; }
html.js .dc-panel.is-set > .dc-in { overflow: visible; }
html.js .dc-panel.dc-now { transition: none !important; }
/* a closed panel's contents are skipped by layout until it opens, so the page's first layout stays short (H19: no
   task on load over 200 ms); on closing they stay laid out until the slide has ended */
html.js .dc-panel > .dc-in { content-visibility: hidden; transition: content-visibility 0s linear var(--s); transition-behavior: allow-discrete; }
html.js .dc-panel.is-open > .dc-in { content-visibility: visible; transition: none; }
html.js .dc-panel.dc-now > .dc-in { transition: none !important; }
.part-panel .pp { margin: var(--wrap-clear) var(--wrap-right) var(--wrap-clear) 0; }

/* inside an opened panel: her part's ground, framed by the string (data-wrap) */
.pp { display: grid; gap: 28px; padding: clamp(20px, 3vw, 40px); background-color: var(--paper-2); border-radius: 3px; }
.pp-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pp-k { font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pt, var(--ink-2)); }
.pp-h { font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.15; max-width: 24ch; }
.pp-grid { display: grid; gap: 32px; align-items: start; }
.pp-main { display: grid; gap: 16px; align-content: start; justify-items: start; }
.pp-line { max-width: 54ch; color: var(--ink-2); }
.pp-side { display: grid; gap: 14px; align-content: start; }
.pp-side figcaption { font-size: 0.9375rem; color: var(--ink-2); }
@media (min-width: 1024px) { .pp-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); column-gap: 4vw; } .pp-grid--even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
html:not(.js) .panel-close { display: none; }

/* prices: a figure, what it holds, and the floor lines beside it, small and whole */
.price { display: grid; gap: 8px; width: 100%; padding-top: 14px; border-top: 2px solid var(--pc, var(--rule-strong)); }
.price + .price { margin-top: 12px; }
.price-name { font-weight: 700; font-size: 1.25rem; line-height: 1.3; }
.price-fig { font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1.1; }
.price-incl { display: grid; gap: 4px; padding-left: 0; font-size: 0.9375rem; color: var(--ink-2); max-width: 60ch; }
.price-incl li { position: relative; padding-left: 18px; }
.price-incl li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 9px; height: 1px; background: var(--ink-2); }
.floors { display: grid; gap: 6px; margin-top: 4px; font-size: 0.875rem; line-height: 1.5; color: var(--ink-2); max-width: 64ch; }
.floors--all { padding-top: 12px; border-top: 1px solid var(--rule); }
/* her own prices, word for word, in her capitals and spacing */
.her { display: grid; gap: 2px; width: 100%; padding: 12px 0; border-top: 1px solid var(--rule); }
.her span { white-space: pre-wrap; font-size: clamp(1.05rem, 1.6vw, 1.35rem); }
.her .her-name { font-size: 0.8125rem; letter-spacing: 0.1em; color: var(--pt, var(--or-text)); }
.read { margin-top: 6px; }

/* the before-and-after: its divider is a length of the string */
.ba { display: grid; gap: 10px; width: 100%; }
.ba-frame { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--pic-bg); border-radius: 3px; touch-action: pan-y; -webkit-user-select: none; user-select: none; cursor: ew-resize; }
.ba-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-after { clip-path: inset(0 0 0 var(--ba, 50%)); }
.ba-cut { position: absolute; z-index: 2; top: 0; bottom: 0; left: var(--ba, 50%); width: 24px; margin-left: -12px; pointer-events: none; }
.ba-cut svg { display: block; width: 24px; height: 100%; overflow: visible; }
html:not(.js) .ba-cut { border-left: 3px solid #ff914d; width: 0; margin-left: -1px; }
.ba-side { position: absolute; z-index: 2; bottom: 8px; padding: 2px 8px; background: #fcfbf8; color: #1c1a18; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; border-radius: 2px; pointer-events: none; }
.ba-side--b { left: 8px; } .ba-side--a { right: 8px; }
.ba-range { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
html:not(.js) .ba-range { display: none; }
.ba:focus-within .ba-frame { outline: 3px solid var(--or-text); outline-offset: 3px; }
.ba figcaption { font-size: 0.9375rem; color: var(--ink-2); }

/* the room through a day: three lights in one frame */
.room-frame { position: relative; display: grid; width: 100%; background: var(--pic-bg); border-radius: 3px; overflow: hidden; }
.room-frame img { grid-area: 1 / 1; display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; opacity: 0; transition: opacity 0.6s ease; }
.room-frame img.is-on { opacity: 1; }
html:not(.js) .room-frame { grid-template-columns: repeat(3, 1fr); gap: 6px; }
html:not(.js) .room-frame img { grid-area: auto; opacity: 1; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--rule-strong); border-radius: 999px; padding: 3px; gap: 2px; }
.seg button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font-size: 0.9375rem; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
@media (max-width: 380px) { .seg button { padding: 0 11px; font-size: 0.875rem; } }

.slot-await { display: grid; }

/* quotes */
.quote blockquote p { font-style: italic; font-size: clamp(1.4rem, 2.4vw, 2.2rem); line-height: 1.28; max-width: 26ch; }
.quote figcaption { margin-top: 12px; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }

/* ---- how she works: held in place, D's way; the stage carries its own short run of the string ---- */
.ride { position: relative; }
.ride-stage { position: relative; z-index: 2; background: var(--g0); background-image: var(--grain); }
.ride-in { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: var(--pad) var(--inset-r) var(--pad) var(--inset); }
.ride .head { margin-bottom: clamp(24px, 4vh, 48px); }
.plate { display: none; }
.moves { display: grid; gap: 44px; }
.move { display: grid; gap: 10px; align-content: start; }
.move-pic { position: relative; display: block; overflow: hidden; margin-bottom: 8px; }
.move-pic img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.move-n { font-family: var(--serif); font-weight: 700; font-size: clamp(2.2rem, 3.6vw, 3rem); line-height: 1; color: var(--or-text); font-variant-numeric: lining-nums; }
.move p { max-width: 42ch; color: var(--ink-2); }
.ticks { display: none; }
@media (min-width: 900px) { .moves { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3vw; } }
.ride-probe { position: absolute; top: 0; left: 0; width: 1px; height: var(--step-len, 0px); visibility: hidden; pointer-events: none; }
/* every step is held for one step's length, the last one included, before the stage leaves (composition 1, 2) */
.ride.ride-on { --n: 3; --step-len: 50svh; height: calc(100svh + var(--n) * var(--step-len)); }
.ride.ride-on .ride-stage { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow-x: clip; transition: background-color 800ms var(--brake); }
.ride.ride-on .ride-stage[data-step="1"] { background-color: var(--g1); }
.ride.ride-on .ride-stage[data-step="2"] { background-color: var(--g2); }
.ride.ride-on .ride-in { width: 100%; padding-top: 22px; padding-bottom: 92px; }
.ride.ride-on .lab { margin-bottom: 8px; }
/* the stage's string frames the plate: its top run lies between the heading and the plate, its bottom run between
   the plate and the step's words, with 20 px of paper from each */
.ride.ride-on .head { margin-bottom: var(--wrap-clear); }
.ride.ride-on .ride-body { display: grid; gap: var(--wrap-clear); justify-items: start; }
.ride.ride-on .plate { display: block; position: relative; width: clamp(120px, calc(100svh - 640px), min(100% - 24px - var(--band), 44svh)); aspect-ratio: 1; overflow: hidden; background: var(--pic-bg); border-radius: 3px; }
.plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateX(4%) scale(1.03); transition: opacity var(--s) var(--brake), transform var(--s) var(--brake); }
.plate img.is-past { transform: translateX(-4%) scale(1.03); }
.plate img.is-on { opacity: 1; transform: none; }
.plate-n { position: absolute; z-index: 2; right: 10px; bottom: 10px; display: flex; gap: 6px; align-items: baseline; padding: 3px 10px; background: #fcfbf8; color: #1c1a18; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.pn-now { font-size: 1rem; letter-spacing: 0; }
.ride.ride-on .move-pic { display: none; }
.ride.ride-on .moves { grid-template-columns: minmax(0, 1fr); gap: 0; }
/* every step stays in the accessibility tree (WCAG 1.3.1, 1.3.2): the steps not shown are faded out, never hidden */
.ride.ride-on .move { grid-area: 1 / 1; opacity: 0; transform: translateX(28px); transition: opacity var(--s) var(--brake), transform var(--s) var(--brake); }
.ride.ride-on .move.is-on { opacity: 1; transform: none; }
.ride.ride-on .move.is-past { transform: translateX(-28px); }
.ride.ride-on.ride-away .move { transition: none; }
.ride.ride-on .ticks { display: flex; gap: 8px; margin-top: 16px; }
.ticks > span { display: block; width: 12px; height: 12px; border: 1.5px solid var(--ink); transition: background-color var(--s) var(--brake); }
.ticks > span.is-on, .ticks > span.is-past { background: var(--or); border-color: var(--or); }
.ticks > span.is-on { border-color: var(--ink); }
@media (max-width: 1023px) { .ride.ride-on h3 { font-size: 1.5rem; } .ride.ride-on .move p { font-size: 1rem; } .ride.ride-on .move-n { font-size: 2.2rem; } }
@media (min-width: 1024px) {
  .ride.ride-on { --step-len: 60vh; height: calc(100vh + var(--n) * var(--step-len)); }
  .ride.ride-on .ride-stage { height: 100vh; }
  .ride.ride-on .ride-in { padding-top: 88px; padding-bottom: 104px; }
  .ride.ride-on .lab { top: 94px; }
  .ride.ride-on .ride-body { grid-template-columns: auto minmax(0, 1fr); column-gap: 6vw; align-items: center; }
  .ride.ride-on .plate { width: clamp(220px, calc(100vh - 430px), min(40vw, 620px)); }
  .ride.ride-on .move-n { font-size: clamp(3rem, 5vw, 4.6rem); }
  /* the step's words take the width they have, so the right of the stage is not left empty (composition 1, 9) */
  .ride.ride-on h3 { font-size: clamp(1.9rem, 2.6vw, 2.6rem); }
  .ride.ride-on .move p { max-width: 34ch; font-size: clamp(1.15rem, 1.45vw, 1.45rem); }
}

/* ---- meet Laura: her own photograph, the string wrapped round it ---- */
.meet-grid { display: grid; gap: 48px; align-items: center; }
.portrait { width: min(100% - max(0px, var(--band) + 22px - var(--inset-r)), 440px); margin-block: var(--wrap-clear); }
.portrait img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.meet-words { display: grid; gap: 24px; justify-items: start; }
@media (min-width: 900px) { .meet-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 7vw; } }

/* ---- where: the panorama bleeds off the right edge, clear of the lane ---- */
.pano { position: relative; margin: 0 calc(var(--inset-r) * -1) clamp(32px, 6vh, 60px) 0; }
.pano img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px 0 0 3px; }
.pano-words { position: absolute; left: clamp(12px, 3vw, 40px); bottom: clamp(12px, 3vw, 40px); max-width: calc(100% - 24px); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.35em; padding: 4px 16px 8px; background: #1c1a18; color: #fff; }
.h-num { font-family: var(--head); text-transform: uppercase; font-size: clamp(2.2rem, 8vw, 7.5rem); line-height: 1.05; }
.h-to { font-style: italic; font-size: clamp(1.3rem, 3vw, 2.4rem); color: #ffb88a; }
@media (min-width: 768px) { .pano img { aspect-ratio: 16 / 6; } }
.when-grid { display: grid; gap: 24px; }
.when-grid > div { display: grid; gap: 6px; align-content: start; padding-top: 14px; border-top: 1px solid var(--rule); }
.when-grid .kicker { color: var(--ink-2); }
@media (min-width: 900px) { .when-grid { grid-template-columns: repeat(3, 1fr); gap: 4vw; } }

/* ---- the call: a big block of her orange; ink on it in both themes; the string closes into a ring round
   its button ---- */
.call-block { position: relative; background: #ff914d; color: #1c1a18; }
.call-block .wrap { display: grid; gap: 22px; justify-items: start; padding-top: clamp(72px, 13vh, 150px); padding-bottom: clamp(72px, 13vh, 150px); }
.call-block .lab, .call-block .lab-n, .call-block .plain { color: #1c1a18; }
/* the ring round the button has clear paper round it, and the string arrives square to its left side after a
   full turn from the lane, so the button sits in from the words by what that turn needs */
.call-block .actions { margin: calc(var(--band) + 16px) 0 calc(var(--band) + 22px); }
.call-block [data-string-end] { margin-left: max(0px, calc(var(--lane) - var(--inset) + var(--band) * 2.6 + 26px)); }
/* wide screens: the call block composed across its width, the heading and its button on the left, the words and
   the note on the right (composition 1, 9; composition 3, 4) */
@media (min-width: 1024px) {
  .call-block .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 6vw; align-items: end; }
  .call-block .wrap > .hook { grid-column: 1; grid-row: 1; max-width: 14ch; }
  .call-block .wrap > .plain { grid-column: 2; grid-row: 1; align-self: end; font-size: clamp(1.15rem, 1.4vw, 1.4rem); }
  .call-block .wrap > .actions { grid-column: 1; grid-row: 2; }
  .call-block .wrap > .leave { grid-column: 2; grid-row: 2; align-self: center; margin: 0; }
  /* a page with a second line for the call (what to bring) sets it under the first, never over it */
  .call-block .wrap > .plain.cb-more { grid-row: 2; align-self: start; font-size: clamp(1.05rem, 1.2vw, 1.2rem); }
  .call-block .wrap:has(> .cb-more) > .leave { grid-row: 3; align-self: start; }
  .call-block .wrap:has(> .cb-more) > .actions { grid-row: 2 / span 2; align-self: center; }
}
.call-block :focus-visible { outline-color: #1c1a18; }
.call-block ::selection { background: #1c1a18; color: #fcfbf8; }
.call-block .leave { margin-top: 6px; }

/* ---- footer ---- */
.foot .wrap { display: grid; gap: 36px; padding-top: 56px; padding-bottom: 128px; }
.foot-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.foot-name b { font-size: 1.9rem; }
.foot-name span { font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.foot-brand { display: grid; gap: 12px; align-content: start; }
.foot-brand p { color: var(--ink-2); max-width: 44ch; font-size: 1rem; }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.foot-links a, .foot-social a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; border-bottom: 1px solid var(--rule); }
.foot-links a:hover, .foot-social a:hover { color: var(--or-text); border-bottom-color: currentColor; }
.foot-social { display: grid; gap: 10px; }
.foot-social li { display: grid; }
.foot-social a { justify-self: start; }
.foot-social span { font-size: 0.9375rem; color: var(--ink-2); }
.foot-small { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 0.875rem; color: var(--ink-2); max-width: 78ch; }
.foot-links li { display: grid; }
@media (min-width: 900px) { .foot .wrap { grid-template-columns: 1.1fr 1.2fr 1fr; align-items: start; } }
/* phones: the foot sized for the page it closes, every link and line kept (composition 4, S10) */
@media (max-width: 639px) {
  .foot .wrap { gap: 20px; padding-top: 36px; padding-bottom: 104px; }
  .foot-name b { font-size: 1.5rem; }
  .foot-brand { gap: 6px; }
  .foot-brand p { font-size: 0.9375rem; line-height: 1.5; }
  .foot-links { column-gap: 18px; }
  .foot-links a { min-height: 40px; font-size: 0.9375rem; }
  .foot-social { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .foot-social a { min-height: 40px; font-size: 0.9375rem; }
  .foot-social span { font-size: 0.8125rem; line-height: 1.4; margin-top: 4px; }
  .foot-small { padding-top: 12px; font-size: 0.8125rem; line-height: 1.5; }
}

/* ---- reveals: D's fade with a short slide, set off once, played to their end ---- */
html.js .rv { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease-out var(--d, 0s), transform 0.6s var(--brake) var(--d, 0s); }
html.js .rv.in { opacity: 1; transform: none; }
html.js .rv.now, html.js .up.now { transition: none !important; }
html.js .up { opacity: 0; transform: translateY(40px); }
html.js .up.in { opacity: 1; transform: none; transition: opacity 0.9s ease, transform 0.9s var(--brake); }

/* the dark theme in its own right (composition 1, 16; composition 2, 20): the pale made photographs are dimmed
   gently and sit on a dark mat, never inverted, and the label chips take the dark ground's family, so her seal stays
   the brightest thing on the table. Her marks and her portrait are never filtered. */
:root[data-theme="dark"] :is(.pc-pic, .plate, .table-item, .room-frame, .ba-frame, .pano, .move-pic, .ex-post-pic) img { filter: brightness(0.74) saturate(0.9) contrast(1.04); }
:root[data-theme="dark"] :is(.table-item, .plate, .ba-frame, .room-frame) { box-shadow: 0 0 0 1px rgba(242, 238, 231, 0.1); }
:root[data-theme="dark"] :is(.ti-lab, .pc-label, .plate-n, .ba-side) { background: #24211d; color: #f2eee7; box-shadow: 0 0 0 1px rgba(242, 238, 231, 0.14), 0 2px 10px rgba(0, 0, 0, 0.4); }
:root[data-theme="dark"] .ti-for { color: #c9c2b6; }
:root[data-theme="dark"] .pc-btn { border-color: currentColor; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.pc-pic, .plate, .table-item, .room-frame, .ba-frame, .pano, .move-pic, .ex-post-pic) img { filter: brightness(0.74) saturate(0.9) contrast(1.04); }
  :root:not([data-theme="light"]) :is(.table-item, .plate, .ba-frame, .room-frame) { box-shadow: 0 0 0 1px rgba(242, 238, 231, 0.1); }
  :root:not([data-theme="light"]) :is(.ti-lab, .pc-label, .plate-n, .ba-side) { background: #24211d; color: #f2eee7; box-shadow: 0 0 0 1px rgba(242, 238, 231, 0.14), 0 2px 10px rgba(0, 0, 0, 0.4); }
  :root:not([data-theme="light"]) .ti-for { color: #c9c2b6; }
  :root:not([data-theme="light"]) .pc-btn { border-color: currentColor; }
}

/* ---- reduced motion: nothing moves; every end state at once ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; scroll-behavior: auto !important; }
}
html.still *, html.still *::before, html.still *::after { transition: none !important; animation: none !important; }
html.still .rv, html.still .up { opacity: 1 !important; transform: none !important; }
html.still .table-item, html.still .part-card, html.still .sheet-rise { transform: none !important; }
html.still .part-card:hover .pc-pic img { transform: none !important; }

@media (forced-colors: active) {
  .btn, .nav-call, .ti-lab, .pc-label, .price { border: 2px solid ButtonText; }
  .string, .orbit-host { display: none; }
}

@media (max-width: 430px) {
  .btn { padding: 0 22px; font-size: 1rem; }
  .btn::after { width: 14px; margin-left: 10px; }
}

/* ---- inner pages until they are rebuilt from TEMPLATE.md (start-ups, call): their old blocks, quiet ---- */
.sec { position: relative; max-width: var(--max); margin: 0 auto; padding: var(--pad) var(--inset-r) var(--pad) var(--inset); }
.first { max-width: var(--max); margin: 0 auto; padding: 56px var(--inset-r) clamp(48px, 8vh, 96px) var(--inset); display: grid; gap: 44px; align-items: center; }
.first-words { display: grid; gap: 22px; justify-items: start; }
.first-pics { position: relative; display: grid; gap: 24px; justify-items: center; }
.pic { position: relative; display: block; overflow: hidden; background: var(--pic-bg); }
.pic img { display: block; width: 100%; height: auto; }
@media (min-width: 1024px) { .first { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 6vw; min-height: 92vh; } .first--call { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.spread { position: relative; width: min(100%, 580px); aspect-ratio: 1 / 1.02; margin: 0 auto; }
.spread-back { position: absolute; right: 0; top: 0; width: 76%; }
.spread-back img { aspect-ratio: 3 / 2; object-fit: cover; }
.spread-front { position: absolute; left: 0; bottom: 0; width: 64%; border: 8px solid var(--paper); box-shadow: var(--shadow); }
.spread-front img { aspect-ratio: 1; object-fit: cover; }
.six-grid { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 960px; }
.six-card { display: grid; grid-template-rows: auto 1fr auto; width: 100%; aspect-ratio: 1; margin: 0 0 12px; padding: 16px; border: 1px solid var(--rule-strong); background: var(--paper); color: var(--ink); text-align: left; font: inherit; cursor: pointer; }
html:not(.js) .six-card { aspect-ratio: auto; cursor: default; }
.six-n { color: var(--or-text); font-size: 1.1rem; }
.six-name { align-self: end; font-family: var(--head); text-transform: uppercase; font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.05; }
.six-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 0.875rem; }
.dot { display: inline-block; width: 14px; height: 14px; background: var(--or); }
.six-card[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--or); }
.six-p { padding: 16px 4px 28px; font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.35; max-width: 40ch; }
html.js .six-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
html.js .six-h:nth-of-type(odd) { grid-column: 1; }
html.js .six-h:nth-of-type(even) { grid-column: 2; }
html.js .six-panel { grid-column: 1 / -1; }
html.js .six-h:nth-of-type(1), html.js .six-h:nth-of-type(2) { grid-row: 1; }
html.js .six-panel:nth-of-type(1), html.js .six-panel:nth-of-type(2) { grid-row: 2; }
html.js .six-h:nth-of-type(3), html.js .six-h:nth-of-type(4) { grid-row: 3; }
html.js .six-panel:nth-of-type(3), html.js .six-panel:nth-of-type(4) { grid-row: 4; }
html.js .six-h:nth-of-type(5), html.js .six-h:nth-of-type(6) { grid-row: 5; }
html.js .six-panel:nth-of-type(5), html.js .six-panel:nth-of-type(6) { grid-row: 6; }
.six-h { margin: 0; font: inherit; }
.dc-open { display: inline-flex; align-items: center; gap: 10px; min-height: 32px; font-size: 0.9375rem; }
html:not(.js) .dc-open { display: none; }
.rows { display: grid; margin-top: clamp(28px, 5vh, 56px); }
.row { display: grid; gap: 6px; padding: 22px 0; border-top: 1px solid var(--rule); }
.row dt { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--or-text); }
.row dd { max-width: 60ch; }
@media (min-width: 900px) { .row { grid-template-columns: 260px 1fr; gap: 4vw; } }
.keep-grid { display: grid; gap: 44px; align-items: start; }
@media (min-width: 1024px) { .keep-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 5vw; } }
.step-list { display: grid; }
.step { display: grid; grid-template-columns: 64px 1fr; gap: 6px 20px; padding: 28px 0; border-top: 1px solid var(--rule); }
.step-n { font-family: var(--serif); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--or-text); grid-row: span 2; }
.step div { display: grid; gap: 8px; }
.step div p { color: var(--ink-2); max-width: 54ch; }
.who { font-size: 0.8125rem; letter-spacing: 0.14em; text-transform: uppercase; }
.reply p { font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.35; max-width: 36ch; }
@media (min-width: 900px) { .step { grid-template-columns: 96px 1fr 220px; } .step-n { grid-row: auto; font-size: 3rem; } .who { text-align: right; } }
.hour-grid { display: grid; gap: 40px; }
.hour-grid > div { display: grid; gap: 24px; justify-items: start; }
@media (min-width: 900px) { .hour-grid { grid-template-columns: 1fr 1fr; gap: 6vw; align-items: center; } }
.slot { display: inline-grid; gap: 2px; min-width: 210px; padding: 12px 18px 14px; border: 1px solid var(--rule-strong); border-left: 3px solid var(--pc, var(--or)); }
.slot-k { font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.slot-v { font-style: italic; font-size: 1.3rem; color: var(--ink-2); }
.su-k { display: inline-flex; align-items: center; gap: 10px; color: var(--t-startups); }
.su-cap { font-size: 0.875rem; color: var(--ink-2); }
.su-keep-words { display: grid; gap: 22px; justify-items: start; }
.su-h3 { font-family: var(--head); text-transform: uppercase; font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.4rem); margin-top: 12px; }
.su-room .pic img { aspect-ratio: 4 / 3; object-fit: cover; }
.call-block .cb-in { position: relative; max-width: var(--max); margin: 0 auto; padding: clamp(64px, 12vh, 140px) var(--inset-r) clamp(64px, 12vh, 140px) var(--inset); display: grid; gap: 24px; justify-items: start; }
/* dark theme: the call block keeps her orange, a shade deeper, so the end of a dark page is not its brightest slab
   (composition 3, 14; composition 4, N9) */
:root[data-theme="dark"] .call-block { background: #d97a3e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .call-block { background: #d97a3e; } }
.call-block .cb-quiet { color: #1c1a18; text-decoration-color: rgba(28, 26, 24, 0.6); }