/*
 * Direction m: the system. One source of truth for the hub and every site in
 * the family. Site builders copy this folder unchanged into their own
 * assets/system/ and override in a site-local stylesheet beside it.
 *
 * Contents: 1 faces; 2 tokens; 3 title palettes; 4 site palettes; 5 base;
 * 6 type; 7 bar, dock and the Pages sheet; 8 buttons, prices and labels;
 * 9 the cover; 10 folio, Continued, house adverts, imprint footer;
 * 11 back page, imprint pages, flatplan, 404; 12 proof marks and examples;
 * 13 motion; 14 view transitions; 15 the opening layer.
 */

/* 1. Faces: SIL Open Font License 1.1, self-hosted, subset (Yeseva One unmodified). */
@font-face { font-family: "Literata"; src: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/fonts/literata-roman.b26cc2a4cf.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/fonts/literata-italic.e8c7769457.woff2) format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/fonts/archivo.cf73184f4c.woff2) format("woff2"); font-weight: 400 900; font-stretch: 62% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/fonts/newsreader.bc00483f0c.woff2) format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Yeseva One"; src: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/fonts/yeseva-one.c4bc89a952.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* 2. Tokens. Colours are written with light-dark(), so the platform theme switch sets them. */
:root {
  color-scheme: light dark;
  --paper: light-dark(#E7E9E5, #101214);
  --raised: light-dark(#F6F7F4, #1B1E22);
  --sunk: light-dark(#DCDFDA, #0B0C0E);
  --ink: light-dark(#15171A, #EDEFEA);
  --ink-2: light-dark(#464B52, #B2B7BC);
  --rule: light-dark(#737872, #7C838A);
  --hair: light-dark(#C9CDC7, #2C3036);
  --call: #ED802B;
  --on-call: #15171A;
  --call-edge: light-dark(#15171A, #ED802B);
  --mark: #ED802B;
  --shade: light-dark(rgb(20 24 22 / .22), rgb(0 0 0 / .55));
  --sh-1: 0 1px 1px rgb(0 0 0 / .08), 0 14px 26px -16px var(--shade);
  --sh-2: 0 2px 3px rgb(0 0 0 / .10), 0 28px 44px -20px var(--shade);

  --f-read: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-app: "Archivo", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-cond: "Archivo", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
  --f-style: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-celebrate: "Yeseva One", Georgia, serif;

  --measure: 66ch;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --wide: 1680px;
  --dock-h: 0px;

  --ease-place: cubic-bezier(.2, .8, .2, 1);
  --ease-open: cubic-bezier(.3, .7, .1, 1);
  --ease-swing: cubic-bezier(.65, 0, .35, 1);
  --t-press: 80ms;
  --t-hover: 180ms;
  --t-turn: 360ms;
  --t-place: 520ms;
  --t-press-in: 600ms;
  --t-reduced: 160ms;
}

/* 3. Title palettes: cover ground, masthead ink, band, band text, band secondary, the colour plate. */
.t-organise  { --c-ground: light-dark(#D9E6E3, #0F2A27); --c-ink: light-dark(#0E3B36, #9FD6CB); --c-band: light-dark(#0E3B36, #9FD6CB); --c-band-ink: light-dark(#F3F7F6, #0B1F1C); --c-band-2: light-dark(#C1CECC, #2C4742); --c-plate: light-dark(#3FA593, #3E8F80); --wm-r: 3.144; --wm-k: 1; }
.t-simplify  { --c-ground: light-dark(#F3E7A6, #2A2714); --c-ink: light-dark(#2A2817, #F3E39A); --c-band: light-dark(#2A2817, #F3E39A); --c-band-ink: light-dark(#F3E7A6, #2A2714); --c-band-2: light-dark(#C7BD87, #565031); --c-plate: light-dark(#C7A21E, #B0902A); --wm-r: 4.41; --wm-k: .78; }
.t-design    { --c-ground: light-dark(#E2F2F7, #0E2A33); --c-ink: light-dark(#A3164F, #FF9CC6); --c-band: light-dark(#A3164F, #FF9CC6); --c-band-ink: light-dark(#FDEFF4, #0E2A33); --c-band-2: light-dark(#E9BFD0, #434353); --c-plate: light-dark(#3FB6C9, #2E8FA0); --wm-r: 4.439; --wm-k: .78; }
.t-share     { --c-ground: light-dark(#E7DFFA, #1E1638); --c-ink: light-dark(#43278F, #CDBDFF); --c-band: light-dark(#43278F, #CDBDFF); --c-band-ink: light-dark(#F3EFFD, #1E1638); --c-band-2: light-dark(#CCC3E5, #453B64); --c-plate: light-dark(#E46FA8, #B4508A); --wm-r: 3.858; --wm-k: .86; }
.t-juggle    { --c-ground: light-dark(#F8DDD7, #3A1512); --c-ink: light-dark(#A3221B, #FFB4A8); --c-band: light-dark(#A3221B, #FFB4A8); --c-band-ink: light-dark(#FFF4F1, #3A1512); --c-band-2: light-dark(#EBC6C2, #653833); --c-plate: light-dark(#E9A23B, #B97E2A); --wm-r: 3.178; --wm-k: 1.02; }
.t-declutter { --c-ground: light-dark(#F4EFE6, #2A2119); --c-ink: light-dark(#6B4A26, #E8C9A0); --c-band: light-dark(#6B4A26, #E8C9A0); --c-band-ink: light-dark(#FBF8F2, #2A2119); --c-band-2: light-dark(#DBD2C5, #544637); --c-plate: light-dark(#8FB39A, #6E8F78); --wm-r: 5.04; --wm-k: .84; }
.t-style     { --c-ground: light-dark(#F1DDD4, #1A2033); --c-ink: light-dark(#23325A, #F1C9B8); --c-band: light-dark(#23325A, #F1C9B8); --c-band-ink: light-dark(#F7ECE6, #1A2033); --c-band-2: light-dark(#C8C3C7, #494550); --c-plate: light-dark(#D98B76, #A86A5A); --wm-r: 2.109; --wm-k: 1.14; }
.t-stage     { --c-ground: light-dark(#E6DCC8, #13293A); --c-ink: light-dark(#1B4A69, #BFD8E8); --c-band: light-dark(#1B4A69, #BFD8E8); --c-band-ink: light-dark(#F4EFE6, #13293A); --c-band-2: light-dark(#C4CBCB, #395060); --c-plate: light-dark(#C98F4B, #9C6E3A); --wm-r: 4.855; --wm-k: .66; }
.t-celebrate { --c-ground: light-dark(#F4C04F, #2E1027); --c-ink: light-dark(#3A1630, #F4C04F); --c-band: light-dark(#3A1630, #F4C04F); --c-band-ink: light-dark(#F9E3AE, #2E1027); --c-band-2: light-dark(#CFB692, #5A3730); --c-plate: light-dark(#B3427E, #9A3769); --wm-r: 6.201; --wm-k: .8; }
.t-gifttrix  { --c-ground: light-dark(#D9BC94, #2A1C10); --c-ink: light-dark(#3A2410, #E7CDA7); --c-band: light-dark(#3A2410, #E7CDA7); --c-band-ink: light-dark(#F4E6D2, #2A1C10); --c-band-2: light-dark(#CBBBA7, #544331); --c-plate: light-dark(#B9543C, #93432F); --wm-r: 5.468; --wm-k: .8; }
.t-house     { --c-ground: var(--raised); --c-ink: var(--ink); --c-band: var(--ink); --c-band-ink: var(--paper); --c-band-2: light-dark(#C4C8C2, #3D4248); --c-plate: var(--mark); }

/* Wordmarks and patterns, one rule per title (relative URLs, resolved from this file). */
.t-organise  .wm { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/organise.cbfd96c83e.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/organise.cbfd96c83e.svg); }
.t-simplify  .wm { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/simplify.0f17d3a145.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/simplify.0f17d3a145.svg); }
.t-design    .wm { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/design.9e476f90b0.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/design.9e476f90b0.svg); }
.t-share     .wm { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/share.98dd2007ed.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/share.98dd2007ed.svg); }
.t-juggle    .wm { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/juggle.87284eda0a.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/juggle.87284eda0a.svg); }
.t-declutter .wm { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/declutter.c8fcbe8b95.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/declutter.c8fcbe8b95.svg); }
.t-style     .wm { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/style.6efab3f3d0.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/style.6efab3f3d0.svg); }
.t-stage     .wm { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/stage.a5e38e868d.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/stage.a5e38e868d.svg); }
.t-celebrate .wm { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/celebrate.69ff693e05.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/celebrate.69ff693e05.svg); }
.t-gifttrix  .wm { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/gifttrix.f334c67e40.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/wordmarks/gifttrix.f334c67e40.svg); }

.t-organise  .pat { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/ichimatsu.c1c1eebcbd.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/ichimatsu.c1c1eebcbd.svg); --pat-s: 18px; }
.t-simplify  .pat { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/tatewaku.326c03b7fe.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/tatewaku.326c03b7fe.svg); --pat-s: 16px; }
.t-design    .pat { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/uroko.19eb17b7cd.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/uroko.19eb17b7cd.svg); --pat-s: 18px; }
.t-share     .pat { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/yagasuri.b3d2ef1d8c.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/yagasuri.b3d2ef1d8c.svg); --pat-s: 16px; }
.t-juggle    .pat { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/shippo.875716b98b.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/shippo.875716b98b.svg); --pat-s: 22px; }
.t-declutter .pat { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/asanoha.109afd3378.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/asanoha.109afd3378.svg); --pat-s: 26px; }
.t-style     .pat { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/seigaiha.427384f9b2.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/seigaiha.427384f9b2.svg); --pat-s: 34px; }
.t-stage     .pat { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/kikko.7d513de584.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/kikko.7d513de584.svg); --pat-s: 24px; }
.t-celebrate .pat { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/kanoko.a3d63c1e75.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/kanoko.a3d63c1e75.svg); --pat-s: 14px; }
.t-gifttrix  .pat { -webkit-mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/hishi.610b2854c2.svg); mask-image: url(/2026-10-10-round-2-m-areas/_assets/previews/m/organise/system/patterns/hishi.610b2854c2.svg); --pat-s: 18px; }

/* 4. Site palettes for page grounds (each built site sets one on <body>). */
.site-hub       { --s-paper: var(--paper); --s-ink: var(--ink); --s-ink-2: var(--ink-2); --s-accent: var(--ink); }
.site-organise  { --s-paper: light-dark(#EEF3F1, #0C1615); --s-ink: light-dark(#13201E, #E8F0EE); --s-ink-2: light-dark(#3F524E, #A9BDB8); --s-accent: light-dark(#0E3B36, #9FD6CB); --s-block: light-dark(#2E7D70, #5FB3A3); }
.site-style     { --s-paper: light-dark(#F6EEEA, #141826); --s-ink: light-dark(#1E2233, #F3ECE8); --s-ink-2: light-dark(#4E5368, #BDB6C4); --s-accent: light-dark(#23325A, #F1C9B8); --s-block: light-dark(#23325A, #F1C9B8); }
.site-celebrate { --s-paper: light-dark(#FBF3E2, #1C0B18); --s-ink: light-dark(#2A1023, #FBEFD9); --s-ink-2: light-dark(#5C4555, #D2BFC8); --s-accent: light-dark(#6B2457, #F4C04F); --s-block: light-dark(#B5770F, #F4C04F); }

/* 5. Base. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; min-height: 100vh; background: var(--s-paper, var(--paper)); color: var(--s-ink, var(--ink));
  font: 400 1.0625rem/1.55 var(--f-read); font-optical-sizing: auto;
  padding-bottom: var(--dock-h);
}
@media (min-width: 600px) { body { font-size: 1.125rem; } }
img, svg, picture { display: block; max-width: 100%; }
picture img { width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
::selection { background: var(--mark); color: var(--on-call); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
html { scrollbar-color: var(--rule) var(--paper); accent-color: var(--ink); caret-color: var(--mark); }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip {
  position: absolute; left: .75rem; top: .75rem; z-index: 100; padding: .7rem 1rem; background: var(--ink); color: var(--paper);
  font: 600 .95rem/1 var(--f-app); text-decoration: none; border-radius: 6px; transform: translateY(-160%);
}
.skip:focus-visible { transform: none; outline-color: var(--mark); }
.wrap { width: min(100% - 2 * var(--gutter), var(--wide)); margin-inline: auto; }
.read { max-width: var(--measure); }
hr.hair { border: 0; border-top: 1px solid var(--hair); margin: 0; }

/* 6. Type. */
.h-house { font: 800 clamp(2.55rem, .9rem + 5vw, 5.4rem)/.94 var(--f-cond); font-stretch: 72%; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
.h-1 { font: 800 clamp(2.1rem, 1.1rem + 3.4vw, 4.25rem)/1 var(--f-cond); font-stretch: 78%; letter-spacing: -.015em; text-wrap: balance; margin: 0; }
.h-2 { font: 750 clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem)/1.04 var(--f-cond); font-stretch: 82%; letter-spacing: -.01em; text-wrap: balance; margin: 0; }
.h-3 { font: 700 1.2rem/1.2 var(--f-app); margin: 0; text-wrap: balance; }
.stand { font: 400 clamp(1.15rem, 1rem + .6vw, 1.5rem)/1.4 var(--f-read); text-wrap: pretty; margin: 0; }
.label { font: 650 .75rem/1.2 var(--f-app); letter-spacing: .16em; text-transform: uppercase; }
.imprint-caps { font: 500 .8rem/1 var(--f-read); letter-spacing: .32em; text-transform: uppercase; }
.small { font: 500 .8125rem/1.4 var(--f-app); }
.prose p, .prose li { max-width: var(--measure); text-wrap: pretty; }
.prose p { margin: 0 0 1em; }
.quote-hers { font: 400 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.35 var(--f-read); text-wrap: pretty; margin: 0; }
.quote-hers::before { content: "\201C"; } .quote-hers::after { content: "\201D"; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* 7. The page bar, the dock and the Pages sheet. */
.bar {
  position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--s-paper, var(--paper)) 94%, transparent);
  border-bottom: 1px solid var(--hair);
}
.bar__in { display: flex; align-items: center; gap: .5rem; min-height: 60px; }
.imprint-link { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; text-decoration: none; color: var(--s-ink, var(--ink)); }
.imprint-link svg { width: 30px; height: 30px; color: var(--s-ink, var(--ink)); }
.imprint-link .imprint-caps { white-space: nowrap; }
.bar__title { display: none; align-items: center; min-height: 44px; padding-left: .9rem; margin-left: .3rem; border-left: 1px solid var(--hair); text-decoration: none; }
.bar__title .wm { height: 22px; width: calc(22px * var(--wm-r)); }
.bar__tools { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.bar__signin { display: none; font: 500 .9rem/1.2 var(--f-app); color: var(--s-ink-2, var(--ink-2)); white-space: nowrap; }
.bar__signin a { color: var(--s-ink, var(--ink)); font-weight: 650; min-height: 44px; display: inline-flex; align-items: center; }
.bar .btn-call, .bar .btn-pages { display: none; }
.bar__signin-short { font: 650 .9rem/1 var(--f-app); min-height: 44px; display: inline-flex; align-items: center; padding: 0 .4rem; }
@media (min-width: 900px) {
  .bar__title { display: inline-flex; }
  .bar .btn-call, .bar .btn-pages { display: inline-flex; }
}
@media (min-width: 1240px) { .bar__signin { display: inline; } .bar__signin-short { display: none; } }
@media (max-width: 899px) { .bar { position: relative; } }

.theme-btn {
  inline-size: 44px; block-size: 44px; display: inline-grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--rule); background: transparent; cursor: pointer; color: var(--s-ink, var(--ink));
}
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .moon { display: none; }
.theme-btn[aria-pressed="true"] .sun { display: none; }
.theme-btn[aria-pressed="true"] .moon { display: block; }
@media (hover: hover) and (pointer: fine) { .theme-btn:hover { background: var(--raised); } }

.dock {
  position: fixed; inset: auto 0 0 0; z-index: 45; display: flex; gap: .5rem; align-items: center;
  padding: .55rem max(.75rem, env(safe-area-inset-right)) calc(.55rem + env(safe-area-inset-bottom)) max(.75rem, env(safe-area-inset-left));
  background: var(--s-paper, var(--paper)); border-top: 1px solid var(--hair); box-shadow: 0 -10px 24px -18px var(--shade);
}
.dock .btn-call { flex: 1; justify-content: center; }
.dock .call-short { display: none; }
@media (max-width: 379px) { .dock .call-long { display: none; } .dock .call-short { display: inline; } }
@media (max-width: 899px) { :root { --dock-h: calc(68px + env(safe-area-inset-bottom)); } }
@media (min-width: 900px) { .dock { display: none; } }

.btn-pages {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1rem; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--raised); color: var(--ink); font: 650 .95rem/1 var(--f-app); cursor: pointer;
}
.bar .btn-pages { min-height: 44px; }
.btn-pages svg { flex: none; width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .btn-pages:hover { background: var(--paper); border-color: var(--ink); } }

.sheet {
  margin: 0; padding: 0; border: 0; color: var(--ink); background: var(--raised);
  inset: auto 0 0 0; width: 100%; max-width: none; max-height: min(86vh, 760px); border-radius: 18px 18px 0 0;
  box-shadow: 0 -24px 60px -20px rgb(0 0 0 / .45); overflow: auto; overscroll-behavior: contain;
}
.sheet::backdrop { background: rgb(10 12 14 / .42); }
@media (min-width: 900px) {
  .sheet { inset: 68px 1.25rem auto auto; width: min(560px, 92vw); max-height: calc(100vh - 90px); border-radius: 14px; }
}
.sheet__head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.1rem .8rem; background: var(--raised); border-bottom: 1px solid var(--hair); }
.sheet__close { inline-size: 44px; block-size: 44px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; cursor: pointer; display: grid; place-items: center; }
.sheet__close svg { width: 18px; height: 18px; }
.sheet__body { padding: .4rem 1.1rem 1.4rem; }
@media (prefers-reduced-motion: no-preference) {
  .sheet:popover-open { animation: sheet-in 280ms var(--ease-place); }
  @media (max-width: 899px) { .sheet:popover-open { animation-name: sheet-up; } }
}
@keyframes sheet-in { from { transform: translateY(-10px); opacity: .4; } }
@keyframes sheet-up { from { transform: translateY(40px); opacity: .5; } }

/* The flatplan: in the Pages sheet and on the 404. */
.flatplan { list-style: none; margin: 0; padding: 0; }
.flatplan li + li { border-top: 1px solid var(--hair); }
.flatplan a { display: grid; grid-template-columns: 2.4rem 14px 1fr; gap: .25rem .75rem; align-items: start; padding: .75rem 0; min-height: 48px; text-decoration: none; }
.flatplan .fp-n { font: 600 .8rem/1.5 var(--f-app); color: var(--ink-2); font-variant-numeric: tabular-nums; padding-top: .1rem; }
.flatplan .fp-c { width: 14px; height: 30px; border-radius: 2px; background: var(--c-band, var(--ink)); margin-top: .15rem; }
.flatplan .fp-t { font: 650 1rem/1.25 var(--f-app); }
.flatplan .fp-l { grid-column: 3; font: 400 .875rem/1.35 var(--f-app); color: var(--ink-2); }
.flatplan a[aria-current="page"] .fp-t::after { content: " \2022 this page"; font-weight: 500; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .flatplan a:hover .fp-t { text-decoration: underline; text-underline-offset: .2em; } }
.flatplan-group { margin: 1.1rem 0 .2rem; }

/* 8. Buttons, prices and labels. */
.btn-call {
  display: inline-flex; align-items: center; gap: .6rem; min-height: 52px; padding: 0 1.35rem;
  border-radius: 999px; background: var(--call); color: var(--on-call); border: 1.5px solid var(--call-edge);
  font: 700 1rem/1.1 var(--f-app); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--t-press) linear, box-shadow var(--t-hover) var(--ease-place);
}
.bar .btn-call { min-height: 44px; padding: 0 1.1rem; font-size: .95rem; }
.btn-call svg { flex: none; width: 18px; height: 18px; transition: transform var(--t-hover) var(--ease-place); }
@media (hover: hover) and (pointer: fine) { .btn-call:hover { box-shadow: inset 0 0 0 1.5px var(--call-edge); } .btn-call:hover svg { transform: translateX(4px); } }
.btn-call:active { transform: scale(.97); }
.btn-call:focus-visible { outline-color: var(--ink); }
.btn-line {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: 0 1.1rem; border-radius: 999px;
  border: 1.5px solid var(--s-ink, var(--ink)); background: transparent; color: var(--s-ink, var(--ink)); font: 650 .95rem/1.1 var(--f-app); text-decoration: none; cursor: pointer;
}
.btn-line svg { flex: none; width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) { .btn-line:hover { background: var(--s-ink, var(--ink)); color: var(--s-paper, var(--paper)); } }
.btn-line:active { transform: scale(.97); }
.call-note { font: 500 .875rem/1.4 var(--f-app); color: var(--s-ink-2, var(--ink-2)); margin: .6rem 0 0; }

.price { font: 700 1rem/1.3 var(--f-app); font-variant-numeric: lining-nums; }
.price-label { font: 500 .75rem/1.3 var(--f-app); letter-spacing: .02em; color: var(--s-ink-2, var(--ink-2)); white-space: nowrap; }
.cover__band .price-label, .cover__band .quiet-line { color: var(--c-band-2); }
.quiet-line { font: 500 .75rem/1.4 var(--f-app); color: var(--s-ink-2, var(--ink-2)); margin: 0; }
.cancel-line { font: 500 .8125rem/1.45 var(--f-app); color: var(--s-ink-2, var(--ink-2)); margin: 0; }
.cancel-line a, a.cancel-line { color: inherit; }
.caption { font: 500 .75rem/1.35 var(--f-app); margin: 0; }
.example-tag {
  display: inline-flex; align-items: center; gap: .4rem; font: 650 .75rem/1 var(--f-app); letter-spacing: .08em; text-transform: uppercase;
  padding: .4rem .6rem; border: 1px dashed currentColor; border-radius: 4px;
}
.price-block { display: grid; gap: .55rem; padding: 1rem 1.1rem; background: var(--raised); border-radius: 10px; border: 1px solid var(--hair); }
.price-block .price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; }
.price-block .price { font-size: 1.15rem; }

/* 9. The cover. */
.cover { position: relative; display: flex; flex-direction: column; isolation: isolate; container-type: inline-size; min-width: 0; }
.cover__face {
  position: relative; z-index: 1; isolation: isolate; display: flex; flex-direction: column; flex: 1;
  background: var(--c-ground); color: var(--c-ink); text-decoration: none; border-radius: 3px 7px 7px 3px; overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform var(--t-hover) var(--ease-place), box-shadow var(--t-hover) var(--ease-place);
}
.cover__face .pat { position: absolute; inset: 0; z-index: -1; background: var(--c-ink); opacity: .055; -webkit-mask-size: var(--pat-s) auto; mask-size: var(--pat-s) auto; -webkit-mask-repeat: repeat; mask-repeat: repeat; }
.cover__face::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 9px; background: linear-gradient(90deg, rgb(0 0 0 / .16), rgb(255 255 255 / .05) 45%, transparent); pointer-events: none; z-index: 3; }
.cover__imprint { display: flex; align-items: center; gap: .45rem; padding: .8rem .95rem 0 1.1rem; font: 650 .75rem/1 var(--f-app); letter-spacing: .16em; text-transform: uppercase; }
.cover__imprint svg { width: 18px; height: 18px; flex: none; }
.cover__imprint .cover__shelf { margin-left: auto; letter-spacing: .1em; opacity: .9; text-align: right; }
.cover__mast { position: relative; display: block; padding: .5rem .95rem .7rem 1.1rem; --mh: clamp(30px, 17cqi, 78px); }
.wm { display: block; background: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: left bottom; mask-position: left bottom; }
.cover__mast .wm { height: calc(var(--mh) * var(--wm-k)); width: min(100%, calc(var(--mh) * var(--wm-k) * var(--wm-r))); }
.cover__mast .wm--plate { position: absolute; left: 1.1rem; bottom: .7rem; color: var(--c-plate); }
.cover__mast .wm--ink { position: relative; }
.cover__photo { position: relative; margin: 0 10px; }
.cover__photo picture { border-radius: 2px; overflow: hidden; aspect-ratio: 4 / 3.5; background: color-mix(in srgb, var(--c-ink) 18%, var(--c-ground)); }
.cover__photo img { width: 100%; height: 100%; object-fit: cover; }
.cover__seal { position: absolute; top: -26px; right: 8px; width: clamp(44px, 16cqi, 66px); height: auto; aspect-ratio: 1; color: var(--c-ink); background: var(--c-ground); border-radius: 50%; padding: 3px; transform: rotate(-9deg); z-index: 2; }
.cover__caption { padding: .5rem .95rem .65rem 1.1rem; color: var(--c-ink); }
.cover__band { position: relative; display: flex; flex-direction: column; gap: .55rem; flex: 1; padding: .9rem .95rem 1rem 1.1rem; background: var(--c-band); color: var(--c-band-ink); }
.cover__line { font: 650 clamp(.95rem, 4.6cqi, 1.15rem)/1.25 var(--f-app); margin: 0; text-wrap: pretty; }
.cover__rule { height: 1px; background: currentColor; opacity: .3; }
.cover__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .15rem .7rem; margin-top: auto; }
.cover__price .price { font-size: clamp(.95rem, 4.2cqi, 1.05rem); }
.cover__go { display: inline-flex; align-items: center; gap: .3rem; font: 650 .8125rem/1 var(--f-app); }
.cover__go svg { width: 16px; height: 16px; transition: transform var(--t-hover) var(--ease-place); }
.cover__corner { position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; background: linear-gradient(135deg, transparent 50%, color-mix(in srgb, var(--c-band) 72%, #000) 50%), linear-gradient(315deg, var(--s-paper, var(--paper)) 50%, transparent 50%); transform: scale(0); transform-origin: 100% 100%; transition: transform var(--t-hover) var(--ease-place); }
.cover__pullout {
  position: relative; z-index: 0; display: flex; align-items: center; gap: .55rem; min-height: 46px; margin: -6px 12px 0; padding: 14px .9rem 8px;
  background: var(--raised); color: var(--ink-2); border: 1px solid var(--hair); border-top: 0; border-radius: 0 0 8px 8px;
  font: 500 .875rem/1.25 var(--f-app); text-decoration: none; transition: transform var(--t-hover) var(--ease-place);
}
.cover__pullout { display: grid; grid-template-columns: 1fr auto; gap: 0 .5rem; }
.cover__pullout .po-q { grid-column: 1; font-size: .8125rem; }
.cover__pullout b { grid-column: 1; color: var(--c-ink); font-weight: 700; }
.cover__pullout svg { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 16px; height: 16px; color: var(--ink); }
.cover__face:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.cover__face:active { transform: scale(.985); transition-duration: var(--t-press); }
@media (hover: hover) and (pointer: fine) {
  .cover__face:hover { transform: translateY(-6px) rotate(-.35deg); box-shadow: var(--sh-2); }
  .cover__face:hover .cover__corner { transform: scale(1); }
  .cover__face:hover .cover__go svg { transform: translateX(4px); }
  .cover:hover .cover__pullout, .cover__pullout:hover { transform: translateY(5px); }
  .cover__pullout:hover { color: var(--ink); }
}
/* The wide cover: photograph left, words right (tablet leads and the odd last title). */
.cover--wide .cover__face { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; }
.cover--wide .cover__imprint { grid-column: 2; grid-row: 1; }
.cover--wide .cover__mast { grid-column: 2; grid-row: 2; --mh: clamp(30px, 9cqi, 70px); }
.cover--wide .cover__photo { grid-column: 1; grid-row: 1 / 4; margin: 10px 0 0 10px; }
.cover--wide .cover__photo picture { aspect-ratio: auto; height: 100%; min-height: 220px; }
.cover--wide .cover__caption { grid-column: 1; grid-row: 4; align-self: end; }
.cover--wide .cover__band { grid-column: 2; grid-row: 3 / 5; }
.cover--wide .cover__line { font-size: clamp(1rem, 2.4cqi, 1.25rem); }
/* The type cover: no photograph (the phone's summary covers). */
.cover--type .cover__photo, .cover--type .cover__caption { display: none; }
.cover--type .cover__mast { padding-top: .9rem; padding-bottom: 1.1rem; }
.cover--type .cover__seal-type { display: block; }
.cover__seal-type { display: none; width: 46px; height: 46px; margin: -.4rem 0 .2rem 1.1rem; color: var(--c-ink); opacity: .9; transform: rotate(-9deg); }
/* Returning visitor */
.cover.is-returned .cover__face { box-shadow: 0 0 0 3px var(--s-paper, var(--paper)), 0 0 0 5px var(--c-ink), var(--sh-2); transform: translateY(-6px); }
.cover__returned { display: none; }
.cover.is-returned .cover__returned { display: inline-flex; position: absolute; z-index: 4; left: 12px; top: -14px; padding: .3rem .55rem; background: var(--ink); color: var(--paper); border-radius: 4px; font: 650 .75rem/1 var(--f-app); letter-spacing: .04em; }

/* 10. Folio, Continued, house adverts, imprint footer. */
.continued {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .3rem 1rem; min-height: 72px; padding: 1.1rem 1.25rem;
  border: 1.5px solid var(--s-ink, var(--ink)); border-radius: 12px; text-decoration: none; background: var(--raised);
}
.continued .label { color: var(--s-ink-2, var(--ink-2)); grid-column: 1; }
.continued .continued__t { grid-column: 1; font: 750 clamp(1.25rem, 1rem + 1vw, 1.7rem)/1.1 var(--f-cond); font-stretch: 84%; }
.continued svg { grid-column: 2; grid-row: 1 / 3; width: 28px; height: 28px; transition: transform var(--t-hover) var(--ease-place); }
@media (hover: hover) and (pointer: fine) { .continued:hover svg { transform: translateX(4px); } .continued:hover { background: var(--paper); } }
.continued:active { transform: scale(.99); }
.adverts { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); align-items: start; }
.advert-all { display: grid; place-content: center; text-align: center; gap: .5rem; min-height: 160px; border: 1.5px dashed var(--rule); border-radius: 10px; text-decoration: none; padding: 1rem; }
.advert-all .h-3 { font-size: 1.05rem; }
.folio { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem 1rem; padding: 1rem 0; border-top: 1px solid var(--hair); font: 500 .8125rem/1.4 var(--f-app); color: var(--s-ink-2, var(--ink-2)); }
.folio .num { color: var(--s-ink, var(--ink)); font-weight: 650; }
.imprint-footer { padding: 2.5rem 0 calc(2rem + var(--dock-h) * 0); background: var(--sunk); color: var(--ink); }
.imprint-footer .wrap { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .imprint-footer .wrap { grid-template-columns: 1.3fr 1fr 1fr; align-items: start; } }
.imprint-footer h2 { margin: 0 0 .6rem; }
.imprint-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.imprint-footer li a { display: inline-flex; align-items: center; min-height: 44px; font: 500 .95rem/1.2 var(--f-app); }
.imprint-footer .tagline { font: 400 1.1rem/1.4 var(--f-read); margin: .5rem 0 0; }
.imprint-footer .seal-foot { width: 64px; height: 64px; color: var(--ink); }

/* 11. Back page steps, imprint pages, 404. */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: .9rem; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 2.6rem 1fr; gap: .2rem .9rem; align-items: start; }
.steps li::before { content: counter(s); grid-row: 1 / 3; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid var(--s-ink, var(--ink)); font: 700 1rem/1 var(--f-app); }
.steps b { font: 700 1.05rem/1.3 var(--f-app); }
.steps span { color: var(--s-ink-2, var(--ink-2)); font: 400 1rem/1.45 var(--f-read); }
.imprint-page .summary { font: 400 clamp(1.3rem, 1.05rem + 1vw, 1.9rem)/1.35 var(--f-read); text-wrap: pretty; max-width: 34ch; }
.imprint-page h2 { font: 750 1.35rem/1.15 var(--f-cond); font-stretch: 86%; margin: 2.2rem 0 .6rem; }
.imprint-page .prose { margin-top: 1rem; }
.imprint-page .prose ul { padding-left: 1.2rem; }
.imprint-page .prose li { margin: .3rem 0; }

/* 12. Proof marks and examples. */
.edit-line { position: relative; display: inline; }
.edit-line .strike { position: absolute; left: -.15em; right: -.15em; top: 52%; height: 3px; background: var(--mark); border-radius: 2px; transform-origin: 0 50%; }
.example { position: relative; border: 1.5px dashed var(--rule); border-radius: 12px; padding: 1rem; background: var(--raised); }
.example > .example-tag { position: absolute; top: -.85rem; left: .9rem; background: var(--raised); color: var(--ink-2); }
.seg { display: inline-flex; flex-wrap: wrap; gap: .35rem; padding: .3rem; border: 1px solid var(--rule); border-radius: 26px; background: var(--paper); }
.seg button { min-height: 40px; min-width: 44px; padding: 0 .95rem; border-radius: 999px; border: 0; background: transparent; font: 650 .9rem/1 var(--f-app); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.chip {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 1rem; border-radius: 999px; border: 1.5px solid var(--rule);
  background: var(--raised); color: var(--ink); font: 600 .95rem/1.15 var(--f-app); cursor: pointer; text-align: left;
  transition: background var(--t-hover) var(--ease-place), border-color var(--t-hover) var(--ease-place);
}
.chip svg { width: 16px; height: 16px; flex: none; }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--ink); } }
.chip:active { transform: scale(.97); }

/* 13. Motion: every animation starts from a visible state and only runs when motion is allowed. */
@media (prefers-reduced-motion: no-preference) {
  .lt-ready :is([data-place].play, [data-place="first"]) > * { animation: m-place var(--t-place) var(--ease-place) both; }
  .lt-ready :is([data-place].play, [data-place="first"]) > :nth-child(2) { animation-delay: 45ms; }
  .lt-ready :is([data-place].play, [data-place="first"]) > :nth-child(3) { animation-delay: 90ms; }
  .lt-ready :is([data-place].play, [data-place="first"]) > :nth-child(4) { animation-delay: 135ms; }
  .lt-ready :is([data-place].play, [data-place="first"]) > :nth-child(5) { animation-delay: 180ms; }
  .lt-ready :is([data-place].play, [data-place="first"]) > :nth-child(6) { animation-delay: 225ms; }
  .lt-ready :is([data-place].play, [data-place="first"]) .wm--plate { animation: m-register var(--t-press-in) var(--ease-place) 120ms both; }
  .lt-ready :is([data-place].play, [data-place="first"]) > :nth-child(2) .wm--plate { animation-delay: 165ms; }
  .lt-ready :is([data-place].play, [data-place="first"]) > :nth-child(3) .wm--plate { animation-delay: 210ms; }
  .lt-ready :is([data-place].play, [data-place="first"]) > :nth-child(4) .wm--plate { animation-delay: 255ms; }
  .lt-ready :is(.press-mast.play, .press-mast[data-first]) .wm--plate { animation: m-register var(--t-press-in) var(--ease-place) 80ms both; }
  .lt-ready .develop[data-first] img { animation: m-develop 900ms var(--ease-place) both; }
  .lt-ready .edit-run:not(.edit-run--late) .strike, .lt-ready .edit-run--late.play .strike { animation: m-strike 280ms var(--ease-place) both; animation-delay: calc(500ms + var(--i, 0) * 90ms); }
  .lt-ready .edit-run:not(.edit-run--late) .edit-note, .lt-ready .edit-run--late.play .edit-note { animation: m-note var(--t-reduced) ease-out both; animation-delay: calc(640ms + var(--i, 0) * 90ms); }
  .edit-run li:nth-child(1) { --i: 0; } .edit-run li:nth-child(2) { --i: 1; } .edit-run li:nth-child(3) { --i: 2; } .edit-run li:nth-child(4) { --i: 3; }
  .lt-ready .develop.play img { animation: m-develop 900ms var(--ease-place) both; }
  .dock { animation: m-dock var(--t-turn) var(--ease-place) both; }
}
@keyframes m-place { from { transform: translateY(16px) rotate(1.2deg); } }
@keyframes m-register { from { transform: translate(-3px, -2px); } }
@keyframes m-strike { from { transform: scaleX(0); } }
@keyframes m-note { from { opacity: 0; } }
@keyframes m-develop { from { transform: scale(1.04); opacity: .82; } }
@keyframes m-dock { from { transform: translateY(100%); } }

/* 14. Cross-document view transitions (same origin only; Firefox navigates plainly). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 300ms; animation-timing-function: var(--ease-place); }
  html:active-view-transition-type(forward)::view-transition-old(root) { animation-name: m-out-left; }
  html:active-view-transition-type(forward)::view-transition-new(root) { animation-name: m-in-right; }
  html:active-view-transition-type(back)::view-transition-old(root) { animation-name: m-out-right; }
  html:active-view-transition-type(back)::view-transition-new(root) { animation-name: m-in-left; }
  ::view-transition-group(*) { animation-duration: var(--t-turn); animation-timing-function: var(--ease-open); }
  .bar { view-transition-name: m-bar; }
  .dock { view-transition-name: m-dock; }
  ::view-transition-group(m-bar), ::view-transition-group(m-dock) { animation: none; }
}
@keyframes m-out-left { to { transform: translateX(-6%); opacity: 0; } }
@keyframes m-in-right { from { transform: translateX(8%); opacity: 0; } }
@keyframes m-out-right { to { transform: translateX(6%); opacity: 0; } }
@keyframes m-in-left { from { transform: translateX(-8%); opacity: 0; } }

/* 15. The opening layer (cover.js): the cover grows, then swings open on its spine. */
.opening { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; perspective: 1600px; }
.opening__inside { position: absolute; inset: 0; opacity: 0; overflow: hidden; }
.opening__grow { position: absolute; inset: 0; transform-origin: 0 0; perspective: 1600px; }
.opening__board { position: absolute; inset: 0; background: var(--c-ground); color: var(--c-ink); transform-origin: 0 50%; backface-visibility: hidden; display: grid; place-content: center; overflow: hidden; }
.opening__board .pat { position: absolute; inset: 0; background: var(--c-ink); opacity: .09; -webkit-mask-size: var(--pat-s) auto; mask-size: var(--pat-s) auto; }
.opening__board .wm { position: relative; width: min(70vw, 760px); height: calc(min(70vw, 760px) / var(--wm-r)); opacity: 0; -webkit-mask-position: center; mask-position: center; }
.opening__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0), rgb(0 0 0 / .35)); opacity: 0; }
.inside { position: absolute; inset: 0; background: var(--s-paper); color: var(--s-ink); padding: 0 var(--gutter); }
.inside__bar { height: 60px; display: flex; align-items: center; gap: .6rem; border-bottom: 1px solid color-mix(in srgb, var(--s-ink) 14%, transparent); }
.inside__bar svg { width: 30px; height: 30px; }
.inside__mast { padding-top: clamp(1.2rem, 4vh, 2.5rem); color: var(--s-accent); }
.inside__mast .wm { height: clamp(44px, 9vw, 96px); width: calc(clamp(44px, 9vw, 96px) * var(--wm-r)); max-width: 100%; }
.inside__h { margin: 1rem 0 .8rem; max-width: 18ch; }
.inside__price { font: 700 1.05rem/1.3 var(--f-app); }