/* ==========================================================================
   RATC redesign prototype - shared foundation (8 Oct 2026)
   Spec: direction.md section 4 + orchestrator rulings. API: shared/README.md
   Rule of this file: the FINISHED, STILL page is the default CSS. Every move
   lives in the MOTION block near the end, inside
   @media (prefers-reduced-motion: no-preference) and :root:not([data-motion="still"]).
   Page builders: do not edit. Page-only CSS goes in pages/<page>.css.
   ========================================================================== */

/* Cross-document view transitions between the prototype pages (same origin only,
   so links to the live site and the xAI pages never transition). */
@view-transition { navigation: auto; types: ratc-page; }

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  /* grounds */
  --ground-black: #0E080D;
  --ink-plum: #1B0F19;
  --night-plum: #2D192D;
  --wine: #581D27;
  --mulberry: #73363A;
  --slate-teal: #3A585E;
  --dark-red: #700404;      /* ground only, never type */
  /* type */
  --bone: #E8C392;          /* display lines */
  --cream: #F7D8A5;         /* reading text */
  --lift-purple: #A77FA0;   /* punch words, dark grounds only */
  --lift-teal: #7FA8AD;
  --lift-rust: #C4674A;
  /* objects */
  --mustard: #D98C42;
  --heart-red: #983733;     /* objects only, never type */
  --dusk-violet: #4B3745;

  /* roles (re-set by every ground class) */
  --ground: var(--ink-plum);
  --text: var(--cream);
  --display: var(--bone);
  --label: var(--bone);
  --accent: var(--mustard);
  --punch: var(--lift-purple);
  --punch-purple: var(--lift-purple);
  --punch-teal: var(--lift-teal);
  --punch-rust: var(--lift-rust);
  --punch-mustard: var(--mustard);
  --rule: var(--dusk-violet);
  --mp-ink: #3D2B38;
  --mp-ink-2: #2A343C;
  --call-color: var(--mustard);
  --focus: var(--bone);

  /* type scale (4.4) */
  --font-display: "Anton", Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --font-body: "Archivo Narrow", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-mega: clamp(3.5rem, 2rem + 6vw, 8rem);
  --fs-display: clamp(2.75rem, 1.6rem + 4.4vw, 5.5rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-body: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --fs-small: 1rem;
  --fs-label: 0.875rem;

  /* layout (4.5) */
  --w-read: 680px;
  --w-mid: 780px;
  --wrap: 1180px;
  --w-wide: 1400px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-pad: 6rem;
  --header-h: 64px;
  --bar-h: 0px;             /* phone bottom bar height, set below 900px */
  --radius-img: 3px;
  --radius-pill: 24px;

  /* motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-folder: cubic-bezier(.2, .7, .2, 1);
  --grain-opacity: .14;
}

/* Animatable hour values (so the light can glide when the dial changes) */
@property --lamp      { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@property --lamp-a    { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --slat-a    { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --edge-a    { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --wash-a    { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --art-bright { syntax: "<number>"; inherits: true; initial-value: 1; }

/* ---------- 2. Hour states (4.3) ----------------------------------------
   Default (no attribute, scripts off) = daylight. Hours change tokens and
   overlays only, never an image and never the layout. */
:root,
:root[data-hour="daylight"] {
  --scene-ground: var(--night-plum);
  --hour-punch: var(--lift-teal);      /* 6.29 on night plum */
  --scene-label: var(--bone);
  --scene-accent: var(--mustard);
  --scene-mp: #4B3745;
  --scene-mp-2: #5E2D36;
  --lamp: 0%;   --lamp-a: 0;  --slat-a: .14; --edge-a: 0;  --wash-a: 0;   --art-bright: 1;
}
:root[data-hour="dusk"] {
  --scene-ground: var(--wine);
  --hour-punch: var(--cream);          /* 9.46 */
  --scene-label: var(--cream);
  --scene-accent: var(--cream);
  --scene-mp: #73363A;
  --scene-mp-2: #4B3745;
  --lamp: 78%;  --lamp-a: .24; --slat-a: 0;  --edge-a: 0;  --wash-a: 0;   --art-bright: 1;
}
:root[data-hour="midnight"] {
  --scene-ground: var(--ink-plum);
  --hour-punch: var(--lift-purple);    /* 5.48 */
  --scene-label: var(--bone);
  --scene-accent: var(--mustard);
  --scene-mp: #3D2B38;
  --scene-mp-2: #2A343C;
  --lamp: 52%;  --lamp-a: .2;  --slat-a: 0;  --edge-a: .38; --wash-a: 0;  --art-bright: 1;
}
:root[data-hour="three"] {
  --scene-ground: var(--ground-black);
  --hour-punch: var(--lift-rust);      /* 5.09 */
  --scene-label: var(--bone);
  --scene-accent: var(--mustard);
  --scene-mp: #392934;
  --scene-mp-2: #243036;
  --lamp: 30%;  --lamp-a: .22; --slat-a: 0;  --edge-a: 0;  --wash-a: 0;   --art-bright: .88;
}
:root[data-hour="dawn"] {
  --scene-ground: var(--slate-teal);
  --hour-punch: var(--cream);          /* 5.60 */
  --scene-label: var(--cream);
  --scene-accent: var(--cream);
  --scene-mp: #4B3745;
  --scene-mp-2: #73363A;
  --lamp: 0%;   --lamp-a: 0;  --slat-a: 0;  --edge-a: 0;  --wash-a: .1;  --art-bright: 1;
}

/* ---------- 3. Base ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: clip;   /* with body: nothing can widen the phone layout */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
  /* phone: the bottom bar (its height already includes the safe area) plus a margin, so a
     focused link or button is never scrolled in behind it (polish 9 Oct) */
  scroll-padding-bottom: calc(var(--bar-h) + 16px);
  background: var(--ink-plum);
  color-scheme: dark;
}
body {
  margin: 0;
  background: var(--ink-plum);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
  overflow-x: clip;
  padding-bottom: var(--bar-h);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; }
main:focus { outline: none; }
[hidden] { display: none !important; }
::selection { background: var(--mustard); color: var(--ink-plum); }

/* Focus: 2px solid bone, 3px offset, everywhere, never removed (4.2 rule 5) */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 16px; top: 10px; z-index: 200;
  padding: 10px 18px; border-radius: var(--radius-pill);
  background: var(--mustard); color: var(--ink-plum);
  font: 700 1rem/1.2 var(--font-body); text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; outline-color: var(--bone); }

/* ---------- 4. Type (4.4) ------------------------------------------------ */
.t-mega, .t-display, .t-h1, .t-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--display);
  text-wrap: balance;
  letter-spacing: .005em;
}
.t-mega    { font-size: var(--fs-mega);    line-height: .92; }
.t-display { font-size: var(--fs-display); line-height: .95; }
.t-h1      { font-size: var(--fs-h1);      line-height: 1; }
.t-h2      { font-size: var(--fs-h2);      line-height: 1.05; }
.t-h3 { font: 700 var(--fs-h3)/1.2 var(--font-body); color: var(--text); text-wrap: balance; }
.t-body  { font-size: var(--fs-body); line-height: 1.6; }
.t-small { font-size: var(--fs-small); line-height: 1.5; }
.label, .t-label {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--fs-label);
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--label);
}
.caps { text-transform: uppercase; }        /* for short display lines only */
.prose { max-width: 66ch; }
.prose p { margin-bottom: 1.1em; }
.measure { max-width: 66ch; }

/* Anton stack: short display lines in varied sizes. Each line is a span. */
.stack { display: flex; flex-direction: column; align-items: flex-start; gap: .04em;
  font-family: var(--font-display); color: var(--display); line-height: .9; text-transform: uppercase; }
.stack > * { display: block; }
.stack .s-xl { font-size: var(--fs-mega); }
.stack .s-l  { font-size: var(--fs-display); }
.stack .s-m  { font-size: var(--fs-h1); }
.stack .s-s  { font-size: var(--fs-h2); }

/* Punch words (4.2 rule 2). On wine, dark red, mulberry, slate teal every
   variant resolves to cream, so a builder cannot break contrast by accident. */
.punch          { color: var(--punch); }
.punch--purple  { color: var(--punch-purple); }
.punch--teal    { color: var(--punch-teal); }
.punch--rust    { color: var(--punch-rust); }  /* on night plum: 24px and up only */
.punch--mustard { color: var(--punch-mustard); }

/* Post-title headlines: sentence case as published; the review bar can set capitals. */
.headline { text-transform: none; }
:root[data-headline="caps"] .headline { text-transform: uppercase; letter-spacing: .01em; }

/* ---------- 5. Grounds --------------------------------------------------- */
.g-black, .g-ink, .g-night, .g-wine, .g-mulberry, .g-teal, .g-red, .g-scene {
  background-color: var(--ground);
  color: var(--text);
}
.g-black {
  --ground: var(--ground-black);
  --mp-ink: #392934; --mp-ink-2: #243036;
}
.g-ink {
  --ground: var(--ink-plum);
  --mp-ink: #3D2B38; --mp-ink-2: #2A343C;
}
.g-night {
  --ground: var(--night-plum);
  --punch-rust: var(--lift-rust);          /* 4.18: large text only */
  --mp-ink: #4B3745; --mp-ink-2: #5E2D36;
  --rule: #4B3745;
}
/* coloured grounds: punch words and accents are cream (the system's own rule) */
.g-wine, .g-mulberry, .g-teal, .g-red {
  --label: var(--cream);
  --accent: var(--cream);
  --punch: var(--cream);
  --punch-purple: var(--cream); --punch-teal: var(--cream);
  --punch-rust: var(--cream);   --punch-mustard: var(--cream);
}
.g-wine     { --ground: var(--wine);       --mp-ink: #73363A; --mp-ink-2: #4B3745; --rule: #73363A; }
.g-mulberry { --ground: var(--mulberry);   --mp-ink: #4B3745; --mp-ink-2: #581D27; --rule: #581D27; --call-color: var(--cream); }
.g-teal     { --ground: var(--slate-teal); --mp-ink: #4B3745; --mp-ink-2: #73363A; --rule: #4B3745; --call-color: var(--cream);
  --display: var(--bone); /* bone only at display size here (4.62); small text is cream */ }
.g-red      { --ground: var(--dark-red);   --mp-ink: #73363A; --mp-ink-2: #4B3745; --rule: #73363A; }
/* the hour-driven scene ground (home-a opening, home-b lamp pool, TDG establishing band) */
.g-scene {
  --ground: var(--scene-ground);
  --punch: var(--hour-punch);
  --punch-purple: var(--hour-punch); --punch-teal: var(--hour-punch);
  --punch-rust: var(--hour-punch);   --punch-mustard: var(--hour-punch);
  --label: var(--scene-label);
  --accent: var(--scene-accent);
  --mp-ink: var(--scene-mp); --mp-ink-2: var(--scene-mp-2);
}
:root[data-hour="dawn"] .g-scene { --call-color: var(--cream); }

/* ---------- 6. Layout (4.5) --------------------------------------------- */
.wrap      { width: min(100% - 2 * var(--gutter), var(--wrap));   margin-inline: auto; }
.wrap-read { width: min(100% - 2 * var(--gutter), var(--w-read)); margin-inline: auto; }
.wrap-mid  { width: min(100% - 2 * var(--gutter), var(--w-mid));  margin-inline: auto; }
.wrap-wide { width: min(100% - 2 * var(--gutter), var(--w-wide)); margin-inline: auto; }
.section { position: relative; padding-block: var(--section-pad); isolation: isolate; }
.section--tight { padding-block: calc(var(--section-pad) * .6); }
.flow > * + * { margin-top: var(--flow, 1rem); }
.rule { border: 0; border-top: 2px solid var(--rule); margin: 2rem 0; }
.memphis-clear { background-color: var(--ground); box-shadow: none; } /* text block that sits over a pattern area */
@media (max-width: 899px) {
  :root { --section-pad: 4rem; --header-h: 56px; --bar-h: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 7. Header and desktop navigation (4.6) ---------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: var(--ink-plum);
  border-top: 3px solid var(--bone);
  border-bottom: 1px solid var(--dusk-violet);
  view-transition-name: site-header;
}
.site-header__bar {
  height: 100%;
  display: flex; align-items: center; gap: clamp(12px, 1.6vw, 28px);
}
.site-logo { display: inline-flex; flex: none; border-radius: 8px; }
.site-logo img { height: 44px; width: auto; }
.site-nav { flex: 1 1 auto; min-width: 0; }
.site-nav__list { list-style: none; display: flex; align-items: center; gap: clamp(4px, 1vw, 14px); }
.site-nav__list > li { position: relative; }
.site-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 8px;
  background: none; border: 0;
  font: 600 1rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--cream); text-decoration: none; white-space: nowrap;
  position: relative;
}
.site-nav__link::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 6px; height: 3px;
  background: var(--mustard); transform: scaleX(0); transform-origin: left;
}
.site-nav__link:hover::after,
.site-nav__link[aria-expanded="true"]::after,
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__btn svg { width: 12px; height: 12px; flex: none; }
.site-nav__btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60;
  min-width: 270px; list-style: none;
  padding: 10px 0;
  background: var(--night-plum);
  border: 2px solid var(--bone);
  border-top: 6px solid var(--mustard);
}
.menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 18px; min-height: 44px;
  font: 700 1.125rem/1.25 var(--font-body); color: var(--cream); text-decoration: none;
}
.menu a:hover { background: var(--wine); }
.menu a:focus-visible { outline-offset: -4px; }
.menu .menu__note { font: 600 .875rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lift-teal); }
/* Scripts off: menus open on hover or keyboard focus so every destination stays reachable */
html:not(.ratc-ready) .navgroup:is(:hover, :focus-within) > .menu { display: block !important; }

.site-tools { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.tool-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 12px;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  background: none; color: var(--cream); text-decoration: none;
  font: 600 1rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
}
.tool-btn:hover { border-color: var(--dusk-violet); }
.tool-btn svg { width: 18px; height: 18px; flex: none; }

/* Still toggle (header and footer copies stay in sync) */
.still-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 14px 0 12px;
  border: 2px solid var(--bone); border-radius: var(--radius-pill);
  background: var(--ground); color: var(--cream);
  font: 600 .875rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.still-toggle svg { width: 20px; height: 12px; flex: none; }
.still-toggle .still-flat { display: none; }
.still-toggle[aria-pressed="true"] { background: var(--bone); color: var(--ink-plum); }
.still-toggle[aria-pressed="true"] .still-zig { display: none; }
.still-toggle[aria-pressed="true"] .still-flat { display: block; }

@media (max-width: 1279px) and (min-width: 900px) {
  /* mid widths: icon-only Search, tighter nav */
  .site-header__bar { gap: 12px; }
  .site-logo img { height: 40px; }
  .tool-btn { padding: 0 8px; }
  .tool-btn .tool-btn__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .site-tools { gap: 8px; }
  .site-tools .btn--sm { padding: 0 14px; }
  .site-nav__list { gap: 2px; }
  .site-nav__link { padding: 0 6px; font-size: .9375rem; letter-spacing: .03em; }
  .site-nav__link::after { left: 6px; right: 6px; bottom: 4px; }
}
@media (max-width: 1099px) and (min-width: 900px) {
  /* Every nav item stays on one line down to 900px (polish 9 Oct): tighter type and gaps, and the
     header's Still shows its icon only. Its name "Still" is still read out (the word is kept, at size 0),
     and the footer and menu copies keep the word. */
  .site-header__bar { gap: 10px; }
  .site-logo img { height: 34px; }
  .site-nav__link { padding: 0 4px; letter-spacing: .01em; }
  .site-nav__link::after { left: 4px; right: 4px; }
  .site-nav__btn { gap: 4px; }
  .site-tools { gap: 6px; }
  .site-tools .tool-btn { padding: 0 6px; }
  .site-tools .btn--sm { padding: 0 12px; }
  .site-header .still-toggle { font-size: 0; letter-spacing: 0; gap: 0; padding: 0; min-width: 44px; justify-content: center; }
}
@media (max-width: 899px) {
  .site-nav, .site-tools .tool-btn { display: none; }
  .site-logo img { height: 38px; }
  .site-tools { gap: 8px; }
  .site-tools .btn { min-height: 38px; padding-inline: 14px; }
  .still-toggle { min-height: 38px; padding-inline: 10px; }
}
@media (max-width: 374px) {
  /* small phones (320 to 374): the header Still shows its icon only, name kept, so nothing is cut off */
  .site-header__bar { gap: 10px; }
  .site-logo img { height: 36px; }
  .site-tools .btn { padding-inline: 12px; }
  .site-header .still-toggle { font-size: 0; letter-spacing: 0; gap: 0; padding: 0; min-width: 44px; justify-content: center; }
}

/* ---------- 8. Phone bottom bar, shows sheet, menu dialog -------------- */
.bottom-bar { display: none; }
@media (max-width: 899px) {
  .bottom-bar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    height: var(--bar-h); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--ink-plum);
    border-top: 2px solid var(--bone);
    view-transition-name: bottom-bar;
  }
}
.bottom-bar__item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 56px; padding: 0 4px;
  background: none; border: 0; color: var(--cream); text-decoration: none;
  font: 600 .875rem/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase;
}
.bottom-bar__item svg { width: 22px; height: 22px; }
.bottom-bar__item[aria-expanded="true"] { color: var(--mustard); }
.bottom-bar__item:focus-visible { outline-offset: -4px; }
.bottom-sheet {
  position: fixed; left: 12px; right: 12px; bottom: calc(var(--bar-h) + 10px); z-index: 56;
  list-style: none; padding: 8px 0;
  background: var(--night-plum); border: 2px solid var(--bone); border-top: 6px solid var(--mustard);
}
.bottom-sheet a { display: block; padding: 14px 18px; font: 700 1.25rem/1.2 var(--font-body); color: var(--cream); text-decoration: none; }
.bottom-sheet a:focus-visible { outline-offset: -4px; }
@media (min-width: 900px) { .bottom-sheet { display: none !important; } }

.menu-dialog {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--night-plum); color: var(--cream);
  overflow: auto; overscroll-behavior: contain;
}
.menu-dialog::backdrop { background: var(--ink-plum); }
.menu-dialog__inner { position: relative; min-height: 100%; padding: 12px var(--gutter) calc(32px + env(safe-area-inset-bottom, 0px)); isolation: isolate; }
.menu-dialog__head .site-logo img { height: 38px; }
.menu-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 56px; margin-bottom: 20px; }
.menu-dialog__list { list-style: none; display: grid; gap: 6px; }
.menu-dialog__big {
  display: inline-block; padding: 4px 0;
  font: 400 clamp(2.25rem, 9vw, 3.25rem)/1 var(--font-display); text-transform: uppercase;
  color: var(--bone); text-decoration: none;
}
.menu-dialog__group { margin: 10px 0 6px; padding-left: 14px; border-left: 3px solid var(--mustard); }
.menu-dialog__group .label { display: block; margin-bottom: 4px; }
.menu-dialog__group ul { list-style: none; }
.menu-dialog__group a { display: block; padding: 8px 0; font: 700 1.375rem/1.2 var(--font-body); color: var(--cream); text-decoration: none; }
.menu-dialog__tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 24px; }
.menu-dialog__small { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.menu-dialog__small a { display: inline-block; padding: 8px 0; font-size: 1rem; color: var(--cream); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 12px;
  border: 2px solid var(--bone); border-radius: var(--radius-pill);
  background: var(--ground); color: var(--cream);
  font: 600 .875rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.icon-btn svg { width: 16px; height: 16px; }

/* ---------- 9. Search dialog -------------------------------------------- */
.search-dialog {
  width: min(760px, 100% - 32px); max-height: min(86vh, 900px);
  margin: 8vh auto auto; padding: 0;
  border: 2px solid var(--bone); border-top: 6px solid var(--mustard); border-radius: 0;
  background: var(--night-plum); color: var(--cream);
  overflow: hidden;
}
.search-dialog::backdrop { background: rgb(14 8 13 / .86); }
.search-dialog__inner { display: flex; flex-direction: column; max-height: inherit; padding: 18px 22px 22px; }
.search-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.search-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.search-form input[type="search"] {
  flex: 1 1 300px; min-width: 0; min-height: 52px;
  padding: 8px 14px;
  background: var(--ink-plum); color: var(--cream);
  border: 2px solid var(--bone); border-radius: 0;
  font: 400 1.375rem/1.2 var(--font-body);
}
.search-form input::placeholder { color: #c9b08c; opacity: 1; } /* 8.9:1 on ink plum */
.search-form input:focus-visible { outline-offset: 2px; }
.search-status { margin: 14px 0 8px; }
.search-results { list-style: none; overflow: auto; overscroll-behavior: contain; margin: 0 -8px; padding: 0 8px 4px; }
.search-hit {
  display: grid; gap: 2px; padding: 10px 10px; text-decoration: none; color: var(--cream);
  border-bottom: 1px solid var(--dusk-violet);
}
.search-hit:hover { background: var(--wine); }
.search-hit:focus-visible { outline-offset: -2px; background: var(--wine); }
.search-hit__date { font: 600 .875rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lift-teal); }
.search-hit:hover .search-hit__date, .search-hit:focus-visible .search-hit__date { color: var(--cream); }
.search-hit__title { font: 700 1.125rem/1.3 var(--font-body); }
.search-hit mark { background: var(--mustard); color: var(--ink-plum); padding: 0 2px; }
@media (max-width: 899px) {
  .search-dialog { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border-width: 0; border-top-width: 6px; }
  .search-dialog__inner { height: 100%; padding: 14px var(--gutter) calc(18px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- 10. Buttons, pills, toggles, labels, stamps, tabs ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 22px;
  border: 2px solid var(--bone); border-radius: var(--radius-pill);
  background: transparent; color: var(--text);
  font: 700 1rem/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--bone); color: var(--ink-plum); text-decoration: none; }
.btn--mustard { background: var(--mustard); border-color: var(--mustard); color: var(--ink-plum); }
.btn--mustard:hover { background: var(--bone); border-color: var(--bone); }
.btn--bone { background: var(--bone); border-color: var(--bone); color: var(--ink-plum); }
.btn--bone:hover { background: var(--cream); border-color: var(--cream); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .9375rem; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* text link with an arrow, for "Every episode" style links */
.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .25em; }
.link-arrow::after { content: "\2192"; text-decoration: none; display: inline-block; }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border: 2px solid currentColor; border-radius: var(--radius-pill);
  font: 600 var(--fs-label)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--label);
}
.pill--accent { color: var(--accent); }

.toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 14px;
  border: 2px solid var(--bone); border-radius: var(--radius-pill);
  background: transparent; color: var(--cream);
  font: 600 .875rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.toggle:hover { border-color: var(--cream); }
.toggle[aria-pressed="true"] { background: var(--bone); color: var(--ink-plum); }
.toggle-group { display: flex; flex-wrap: wrap; gap: 8px; }

/* Rubber stamp: dates, kinds. Double rule via outline (no box shadows). */
.stamp {
  display: inline-block;
  padding: 5px 10px 4px;
  border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 2px;
  font: 600 var(--fs-label)/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent);
  transform: rotate(-2deg);
}
.stamp--bone { color: var(--display); }
.stamp--flat { transform: none; }

/* Mustard folder tab (ink plum text 6.89:1). The trapezoid is a pseudo-element so focus outlines are not clipped. */
.folder-tab {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 32px; padding: 6px 18px 5px;
  background: none; border: 0;
  font: 600 var(--fs-label)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-plum); text-decoration: none; white-space: nowrap;
}
.folder-tab::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--mustard);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 100%, 0 100%);
}
button.folder-tab { min-height: 36px; }
button.folder-tab:hover::before { background: var(--bone); }
.folder-tab[aria-expanded="true"]::before { background: var(--bone); }
.folder-tab svg { width: 14px; height: 14px; }
.new-tab { display: none; }
.is-new .new-tab { display: inline-flex; }

/* NEEDS YOUR CALL: dashed outline plus a mono tag, shown only while the Review tab's
   "Show my calls" switch is on (polish 9 Oct). ratc.js swaps the classes, see README. */
.needs-call-off { position: relative; }   /* what a hidden marker keeps: nothing visible */
/* before ratc.js has run (scripts on), keep markers out of sight so the clean page paints first */
:root.js:not([data-calls]) .needs-call { outline: 0; }
:root.js:not([data-calls]) .needs-call::after { content: none; }
.needs-call { position: relative; outline: 2px dashed var(--call-color); outline-offset: 6px; }
.needs-call::after {
  content: "NEEDS YOUR CALL";
  position: absolute; z-index: 5; left: -8px; top: -8px; transform: translateY(-100%);
  width: max-content; max-width: max(100%, 24ch);
  padding: 3px 8px; background: var(--mustard); color: var(--ink-plum);
  font: 600 .875rem/1.25 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  white-space: normal; pointer-events: none;
}
.needs-call[data-call]::after { content: "NEEDS YOUR CALL: " attr(data-call); }
.needs-call--below::after { top: auto; bottom: -8px; transform: translateY(100%); }
.needs-call--right::after { left: auto; right: -8px; }
.needs-call:focus-visible { outline-style: solid; outline-color: var(--focus); }

/* Placeholders: marked only when the review bar asks for it */
:root[data-placeholders="on"] [data-placeholder] {
  text-decoration: underline dotted var(--lift-teal) 2px;
  text-underline-offset: .2em;
  background-image: linear-gradient(rgb(127 168 173 / .16), rgb(127 168 173 / .16));
}

/* ---------- 11. Art frames, grain, hour light --------------------------- */
.art { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-img); background: var(--ink-plum); isolation: isolate; }
.art > img, .art > picture > img { width: 100%; height: auto; border-radius: inherit; }
.art--cover > img { height: 100%; object-fit: cover; }
.art--frame { border: 2px solid var(--bone); }
/* weathered print grain: art only, never text or controls */
.art::after, .grain::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: url("../assets/texture/grain-256.webp") 0 0 / 256px 256px repeat;
  mix-blend-mode: overlay; opacity: var(--grain-opacity);
}
.grain { position: relative; isolation: isolate; }
.art--no-grain::after { content: none; }
.art figcaption, .caption { margin-top: 10px; font-size: var(--fs-small); line-height: 1.5; color: var(--text); }

/* hour light: a decorative layer over the art only */
.hour-lit > img { filter: brightness(var(--art-bright)); }
.hour-lit::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to left, rgb(127 168 173 / var(--edge-a)) 0, rgb(127 168 173 / 0) 6%),
    radial-gradient(circle at var(--window-x, 76%) var(--window-y, 24%), rgb(127 168 173 / var(--wash-a)) 0, rgb(127 168 173 / 0) 46%),
    radial-gradient(circle at var(--lamp-x, 34%) var(--lamp-y, 30%), rgb(217 140 66 / var(--lamp-a)) 0, rgb(217 140 66 / 0) var(--lamp)),
    repeating-linear-gradient(172deg, rgb(247 216 165 / var(--slat-a)) 0 16px, rgb(247 216 165 / 0) 16px 40px);
}

/* ---------- 12. Memphis patterns (4.8) and torn print edge ------------
   Six named patterns. Shapes are a mask filled with the ground's own low-contrast
   ink (1.6:1 or less), so the colour always follows the ground. Two area layers
   (--mp-area, --mp-area-2, unioned) keep them to gutters, section padding and
   seams, so by default they never sit under text in a .wrap column.
   --mp-gutter is the real left/right margin outside .wrap. To spread a pattern
   wider (under art, a desk band), override --mp-area on the section, and put
   .memphis-clear on any text block that ends up inside the pattern area. */
.mp-scatter-left, .mp-frieze-top, .mp-pixel-dissolve-bottom,
.mp-zigzag-rail, .mp-corner-cluster, .mp-desk-surface {
  position: relative; isolation: isolate;
  --mp-gutter: max(var(--gutter), (100% - var(--wrap)) / 2);
}
.mp-scatter-left::before, .mp-frieze-top::before, .mp-pixel-dissolve-bottom::before,
.mp-zigzag-rail::before, .mp-corner-cluster::before, .mp-desk-surface::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(118deg, var(--mp-ink) 0 52%, var(--mp-ink-2) 88%);
  -webkit-mask-image: var(--mp-img), var(--mp-area, linear-gradient(#000, #000)), var(--mp-area-2, linear-gradient(transparent, transparent));
  mask-image: var(--mp-img), var(--mp-area, linear-gradient(#000, #000)), var(--mp-area-2, linear-gradient(transparent, transparent));
  -webkit-mask-size: var(--mp-sz), 100% 100%, 100% 100%;
  mask-size: var(--mp-sz), 100% 100%, 100% 100%;
  -webkit-mask-repeat: var(--mp-rep, repeat), no-repeat, no-repeat;
  mask-repeat: var(--mp-rep, repeat), no-repeat, no-repeat;
  -webkit-mask-position: var(--mp-pos, 0 0), 0 0, 0 0;
  mask-position: var(--mp-pos, 0 0), 0 0, 0 0;
  -webkit-mask-composite: source-in, source-over;
  mask-composite: intersect, add;   /* shapes AND (area OR area-2) */
}
.mp-scatter-left {
  --mp-img: var(--mp-scatter); --mp-sz: 240px 240px; --mp-pos: 0 28px;
  /* the left margin, plus the top padding over the left 45% */
  --mp-area: linear-gradient(to right, #000 0 calc(var(--mp-gutter) - 14px), transparent calc(var(--mp-gutter) - 2px));
  --mp-area-2: conic-gradient(at 45% calc(var(--section-pad) - 22px), transparent 0 270deg, #000 270deg 360deg);
}
.mp-frieze-top {
  --mp-img: var(--mp-frieze); --mp-sz: 120px 82px; --mp-rep: repeat-x; --mp-pos: 0 10px;
}
.mp-pixel-dissolve-bottom {
  --mp-img: var(--mp-pixel); --mp-sz: 192px 96px; --mp-rep: repeat-x; --mp-pos: 0 100%;
}
.mp-zigzag-rail {
  --rail-w: clamp(10px, calc((100vw - var(--wrap)) / 2 - 28px), 64px);
  --mp-img: var(--mp-rail); --mp-sz: var(--rail-w) calc(var(--rail-w) * 2); --mp-rep: repeat-y;
  --mp-pos: calc(100% - max(6px, min(28px, (100vw - var(--wrap)) / 4))) 0;
  --mp-area: linear-gradient(transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.mp-corner-cluster {
  --mp-img: var(--mp-corner); --mp-sz: 420px 300px; --mp-rep: no-repeat; --mp-pos: 100% 0;
  /* the top-right corner: right margin plus the top padding; the art usually covers the rest */
  --mp-area: radial-gradient(ellipse 60% 70% at 100% 0, #000 0 45%, transparent 100%);
}
.mp-desk-surface {
  --mp-img: var(--mp-desk); --mp-sz: 96px 48px; --mp-pos: 0 100%;
  --mp-area: linear-gradient(to top, #000 0 calc(var(--mp-desk-h, var(--section-pad)) - 24px), transparent var(--mp-desk-h, var(--section-pad)));
}
.mp-desk-surface::before { transform: perspective(700px) rotateX(38deg); transform-origin: 50% 100%; }
@media (max-width: 899px) {
  /* phone: side patterns move into the section's top padding so they never meet text */
  .mp-scatter-left { --mp-sz: 160px 160px; --mp-pos: 0 0;
    --mp-area: linear-gradient(#000 0 calc(var(--section-pad) - 22px), transparent calc(var(--section-pad) - 8px));
    --mp-area-2: linear-gradient(transparent, transparent); }
  .mp-frieze-top { --mp-sz: 88px 60px; --mp-pos: 0 2px; }
  .mp-pixel-dissolve-bottom { --mp-sz: 128px 64px; }
  .mp-corner-cluster { --mp-sz: 220px 157px;
    --mp-area: radial-gradient(ellipse 70% 60% at 100% 0, #000 0 30%, transparent 70%); }
}

/* Torn print edge: the section's own ground tears up into the one above, with grain */
.edge-torn { position: relative; }
.edge-torn::after {
  content: ""; position: absolute; left: 0; right: 0; top: -23px; height: 24px; z-index: 3; pointer-events: none;
  background-color: var(--ground);
  background-image: url("../assets/texture/grain-256.webp");
  background-size: 256px 256px;
  background-blend-mode: overlay;
  -webkit-mask: var(--edge-torn) 0 0 / 600px 24px repeat-x;
  mask: var(--edge-torn) 0 0 / 600px 24px repeat-x;
}
.edge-torn--flip::after { transform: scaleX(-1); }

/* ---------- 13. Receipt panel ------------------------------------------- */
.receipt {
  --focus: var(--ink-plum);
  --label: var(--ink-plum);
  --text: var(--ink-plum);
  --ground: var(--cream);
  position: relative; isolation: isolate;
  padding: 22px 24px 34px;
  color: var(--ink-plum);
}
.receipt::before { /* the paper, with a torn zigzag foot; on a layer so review tags are never clipped */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--cream);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%;
}
.receipt__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding-bottom: 12px; margin-bottom: 14px; border-bottom: 2px dashed rgb(27 15 25 / .5); }
.receipt__kind { display: inline-block; padding: 3px 9px; border: 2px solid var(--ink-plum); font: 600 .875rem/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.receipt__page { margin: 0 0 16px; border: 1px solid rgb(27 15 25 / .35); background: #fff; }
.receipt__page img { width: 100%; height: auto; mix-blend-mode: multiply; }
.receipt__page figcaption { padding: 6px 10px; border-top: 1px solid rgb(27 15 25 / .25); background: var(--cream); font: 600 .875rem/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-plum); }
.receipt__passage { margin: 0 0 16px; padding-left: 14px; border-left: 4px solid var(--mustard); font-size: 1.0625rem; line-height: 1.55; }
.receipt__source { margin: 0; font-size: 1rem; line-height: 1.45; }
.receipt__source a { color: var(--ink-plum); text-decoration-thickness: 1px; }
.receipt .needs-call { --call-color: var(--ink-plum); }
.receipt-wrap { position: relative; padding-top: 34px; }   /* room for a folder tab sitting on top */
.receipt-wrap > .folder-tab { position: absolute; top: 0; left: 18px; }

/* ---------- 14. String (a documented link) ------------------------------ */
.string { overflow: visible; pointer-events: none; }
.string path { fill: none; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
/* .string--fit: fills its positioned container; RATC.drawString (or data-from/data-to) draws it in real pixels */
.string--fit { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.string-label--fit { position: absolute; z-index: 2; transform: translate(-50%, 12px); white-space: nowrap; }
.string-label--fit[data-orient="v"] { transform: translate(18px, -50%); }
.string__edge { stroke: var(--bone); stroke-width: calc(var(--string-w, 3px) + 2px); stroke-linecap: round; }
.string__line { stroke: var(--heart-red); stroke-width: var(--string-w, 3px); stroke-linecap: round; }
.string-label {
  display: inline-block; padding: 3px 9px;
  background: var(--ground); border: 1px solid var(--bone);
  font: 600 .875rem/1.25 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--label);
}

/* ---------- 15. Player (click to play, iris) ----------------------------- */
.player { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-img); background: var(--ground-black); isolation: isolate; }
.player__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.player::after { /* grain over the poster only */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: url("../assets/texture/grain-256.webp") 0 0 / 256px 256px repeat; mix-blend-mode: overlay; opacity: var(--grain-opacity);
}
.player.is-playing::after { content: none; }
.player__play {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 16px; border: 0; background: linear-gradient(rgb(14 8 13 / 0) 40%, rgb(14 8 13 / .55));
  color: var(--cream); text-decoration: none; cursor: pointer;
}
.player__play:focus-visible { outline-offset: -6px; }
.player__badge {
  display: grid; place-items: center;
  width: clamp(64px, 9vw, 96px); aspect-ratio: 1; border-radius: 50%;
  background: var(--ground-black); border: 3px solid var(--bone);
}
.player__badge svg { width: 38%; height: 38%; margin-left: 8%; fill: var(--bone); }
.player__play:hover .player__badge { background: var(--wine); }
.player__cta { padding: 4px 10px; background: var(--ground-black); font: 600 .875rem/1.25 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); }
.player__stage { position: absolute; inset: 0; z-index: 3; background: var(--ground-black); clip-path: circle(75% at 50% 50%); }
.player__stage iframe { width: 100%; height: 100%; border: 0; }
/* The stage (not the player) goes full screen, so the player box keeps its place in the page. */
.player__stage:fullscreen { border-radius: 0; }
.player:fullscreen { border-radius: 0; aspect-ratio: auto; } /* older pages that put the player itself in full screen */
/* Back from full screen: hidden for its first frames back so the browser does not score the return
   as a layout shift (see onFullscreen in ratc.js). Not motion, so it is outside the motion block. */
.player__stage.was-fs:not(:fullscreen) { animation: ratc-fs-back 34ms steps(1) !important; }
@keyframes ratc-fs-back { from, to { visibility: hidden; } }

/* ---------- 16. Mosaic dissolve band ("new scene") ---------------------- */
/* Finished and Still state (polish 9 Oct): a low-contrast pixel edge in the section's OWN Memphis
   inks (--mp-ink, --mp-ink-2: dusk violet, mulberry or slate teal tones, 1.2 to 1.5:1 on their ground),
   never black blocks. With motion, extra tiles fill the band as the seam arrives and dissolve as
   you scroll, leaving this same edge. --mosaic-from is no longer used (it painted the black notches). */
.mosaic-band {
  --tile: 32px; --cols: 12;
  position: absolute; top: 0; left: var(--mosaic-x, 0); z-index: 1; pointer-events: none;
  display: grid; grid-template-columns: repeat(var(--cols), var(--tile)); grid-auto-rows: var(--tile);
  view-timeline: --mosaic block;
}
.mosaic-band--right { left: auto; right: 0; }
.mosaic-band > i { display: block; background: var(--mosaic-ink, var(--mp-ink)); transform-origin: 50% 0; }
.mosaic-band > i.is-alt { background: var(--mosaic-ink-2, var(--mp-ink-2)); }
.mosaic-band > i.is-gap, .mosaic-band > i.is-hole { visibility: hidden; }
@media (max-width: 899px) {
  .mosaic-band { --tile: 20px; --cols: 6; }
  .mosaic-band > i:nth-child(12n+7), .mosaic-band > i:nth-child(12n+8), .mosaic-band > i:nth-child(12n+9),
  .mosaic-band > i:nth-child(12n+10), .mosaic-band > i:nth-child(12n+11), .mosaic-band > i:nth-child(12n+12) { display: none; }
}

/* ---------- 17. Registration ("this is the headline") ------------------- */
.reg { position: relative; isolation: isolate; }
.reg__copy { position: absolute; inset: 0; z-index: -1; pointer-events: none; visibility: hidden; user-select: none; }
.reg__copy--a { color: var(--reg-a, var(--lift-purple)); }
.reg__copy--b { color: var(--reg-b, var(--lift-teal)); }

/* ---------- 18. Footer and hour dial (5.6) ------------------------------ */
.site-footer {
  position: relative;
  background: var(--ink-plum); color: var(--cream);
  border-top: 2px solid var(--bone);
  padding: 56px 0 calc(48px + var(--bar-h));
}
.site-footer__grid { display: grid; grid-template-columns: 1.1fr 1fr 1.2fr; gap: 48px; }
.site-footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; }
.site-footer .site-logo img { height: 52px; }
.site-footer__lede { font: 700 var(--fs-h3)/1.2 var(--font-body); color: var(--bone); margin: 0; text-wrap: balance; }
.site-footer__links { list-style: none; display: grid; gap: 2px; }
.site-footer__links a { display: inline-block; padding: 6px 0; color: var(--cream); font-size: 1.0625rem; }
.site-footer h2 { margin-top: 8px; }
.hour-dial { width: 100%; }
.hour-dial__face { width: 100%; max-width: 300px; height: auto; margin: 4px 0 2px; }
.hour-dial__needle { transform-origin: 150px 150px; transform: rotate(var(--dial-angle, 0deg)); }
.hour-dial__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.hour-dial__buttons .toggle { min-height: 40px; padding: 0 12px; }
.hour-dial__readout { margin: 0; }
.hour-dial__still { margin-top: 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 899px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: 36px; }
}

/* ---------- 19. Review tab (prototype only, 4.11) ----------------------- */
/* A slim tab with the word REVIEW turned on its side (polish 9 Oct). Desktop: on the left edge at
   the bottom, inside the page gutter, so it never sits on a first-screen button. Phone: on the
   right edge, halfway down, 28px wide. It slides out of the way while keyboard focus is
   under it (.is-tucked, ratc.js). */
.review { position: fixed; left: 0; bottom: calc(16px + var(--bar-h)); z-index: 70; }
.review__btn {
  display: flex; align-items: center; justify-content: center; gap: 0;
  writing-mode: vertical-rl; transform: rotate(180deg);   /* reads bottom to top */
  width: 28px; min-height: 96px; padding: 12px 0; margin: 0;
  background: var(--ground-black); color: var(--mustard);
  border: 2px dashed var(--mustard); border-right: 0;    /* turned 180deg: its right side is the screen's left edge */
  border-radius: 8px 0 0 8px;
  font: 600 .875rem/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
}
.review__btn[aria-expanded="true"] { border-style: solid; }
.review__btn:focus-visible { outline-offset: 2px; }
.review.is-tucked .review__btn { translate: -32px 0; }   /* fully out of the way, back when focus moves on */
.review__panel {
  position: absolute; left: calc(100% + 10px); bottom: 0;
  width: min(380px, 100vw - 56px); max-height: calc(100vh - var(--bar-h) - 40px); overflow: auto;
  padding: 16px 18px 18px;
  background: var(--ground-black); color: var(--cream);
  border: 2px solid var(--mustard);
  display: grid; gap: 16px;
}
.review__row { display: grid; gap: 8px; justify-items: start; }
.review__row > .label { color: var(--bone); }
.review__calls { padding-bottom: 14px; border-bottom: 1px solid var(--dusk-violet); }
.review__note { font-size: 1rem; line-height: 1.45; margin: 0; }
.review__links { display: flex; gap: 16px; flex-wrap: wrap; }
.review__links a { color: var(--cream); font-weight: 700; }
.review__asof { color: var(--lift-teal); margin: 0; }
@media (max-width: 899px) {
  /* phone: right edge, centred between the header and the bottom bar; the column itself lets taps through */
  .review { left: auto; right: 0; top: var(--header-h); bottom: var(--bar-h); display: flex; align-items: center; pointer-events: none; }
  .review__btn { pointer-events: auto; border-right: 2px dashed var(--mustard); border-left: 0; border-radius: 0 8px 8px 0; }
  /* QA 9 Oct: no wider than the page gutter (16px on a 390 phone), so the tab never sits on the last letters of a line */
  .review__btn { width: min(28px, var(--gutter)); font-size: .6875rem; letter-spacing: .06em; }
  .review__btn[aria-expanded="true"] { border-right-style: solid; }
  .review.is-tucked .review__btn { translate: 32px 0; }
  .review__panel {
    pointer-events: auto; position: fixed; left: 12px; right: 40px; bottom: calc(var(--bar-h) + 12px); top: auto;
    width: auto; max-height: calc(100dvh - var(--header-h) - var(--bar-h) - 32px);
  }
}
@media (prefers-reduced-motion: no-preference) {
  :root:not([data-motion="still"]) .review__btn { transition: translate 180ms var(--ease-out); }
}

/* ---------- 20. Announcer --------------------------------------------- */
.ratc-announce { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ==========================================================================
   MOTION. Everything below only runs when the device allows motion AND the
   visitor has not pressed Still. Removing this block leaves a complete page.
   Text never moves on its own and is never animated from invisible.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* hour glide when the dial changes (a state, eased) */
  :root:not([data-motion="still"]) .g-scene { transition: background-color 900ms ease; }
  :root:not([data-motion="still"]) .hour-lit::before,
  :root:not([data-motion="still"]) .hour-lit > img {
    transition: --lamp 900ms ease, --lamp-a 900ms ease, --slat-a 900ms ease, --edge-a 900ms ease, --wash-a 900ms ease, --art-bright 900ms ease, filter 900ms ease;
  }
  :root:not([data-motion="still"]) .hour-dial__needle { transition: transform 600ms var(--ease-out); }

  /* nav underline and small UI feedback */
  :root:not([data-motion="still"]) .site-nav__link::after { transition: transform 180ms var(--ease-out); }
  :root:not([data-motion="still"]) .menu:not([hidden]) { animation: ratc-menu-bar 220ms var(--ease-out); }
  :root:not([data-motion="still"]) .btn,
  :root:not([data-motion="still"]) .toggle,
  :root:not([data-motion="still"]) .folder-tab::before { transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }

  /* Registration: copies start off register and snap to 0. The bone text never moves. */
  :root:not([data-motion="still"]) .reg.reg--play .reg__copy {
    visibility: visible;
    animation: 600ms var(--ease-out) both;
  }
  :root:not([data-motion="still"]) .reg.reg--play .reg__copy--a { animation-name: ratc-reg-a; }
  :root:not([data-motion="still"]) .reg.reg--play .reg__copy--b { animation-name: ratc-reg-b; }

  /* Print-in: art and grain edge only, scroll-linked. */
  @supports (animation-timeline: view()) {
    :root:not([data-motion="still"]) .print-in {
      animation: ratc-print-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
    }
    /* Mosaic dissolve band: the extra tiles scale 1 to 0, staggered, scroll-linked, and leave the
       static pixel edge behind (so the finished frame is the Still frame). */
    :root:not([data-motion="still"]) .mosaic-band > i.is-gap {
      visibility: visible;
      animation: ratc-mosaic-out linear both;
      animation-timeline: --mosaic;
      animation-range: cover calc(8% + var(--d, 0) * 1%) cover calc(30% + var(--d, 0) * 1%);
    }
    /* still device, Still off, scripts on: static fallback below keeps the pattern */
  }

  /* String draw: drawn by default, undrawn only once scripts are ready and before it enters view */
  :root.ratc-ready:not([data-motion="still"]) .string:not(.is-in) path { stroke-dashoffset: 1; }
  :root.ratc-ready:not([data-motion="still"]) .string path { transition: stroke-dashoffset var(--string-ms, 900ms) ease-in-out; }

  /* Iris: the player box opens from the centre */
  :root:not([data-motion="still"]) .player__stage.is-opening { animation: ratc-iris 450ms var(--ease-out) both; }

  /* Folder open (same-document view transition, see RATC.folderOpen) */
  :root:not([data-motion="still"])::view-transition-group(folder) { animation-duration: 320ms; animation-timing-function: var(--ease-folder); }

  /* Ambient life: ART LAYERS ONLY, slow, stopped by Still. Needs scripts (Still lives in ratc.js). */
  :root.ratc-ready:not([data-motion="still"]) .ambient-breathe::before { animation: ratc-breathe 7s ease-in-out infinite; }
  :root.ratc-ready:not([data-motion="still"]) .ambient-rain::before { animation: ratc-rain 1.4s linear infinite; }
  :root.ratc-ready:not([data-motion="still"]) .ambient-drift { animation: ratc-drift 40s ease-in-out infinite alternate; }

  /* Page to page: mosaic dissolve ("new scene") */
  :root:not([data-motion="still"]):active-view-transition-type(ratc-page)::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
  :root:not([data-motion="still"]):active-view-transition-type(ratc-page)::view-transition-new(root) {
    mix-blend-mode: normal;
    -webkit-mask-size: 384px 384px; mask-size: 384px 384px;
    animation: ratc-mosaic-page 420ms linear both;
  }
  :root:not([data-motion="still"]):active-view-transition-type(folder)::view-transition-old(root),
  :root:not([data-motion="still"]):active-view-transition-type(folder)::view-transition-new(root) { animation: none; }
  /* Act IX morph (homepage stop or envelope <-> article title block), page to page only: the arriving
     shape grows on a solid block, so no frame mixes the Act IX label with the headline or sets the
     headline on the old page's words. Scoped to ratc-page so same-page folder opens never paint it (QA 9 Oct) */
  :root:not([data-motion="still"]):active-view-transition-type(ratc-page)::view-transition-old(act-ix) { animation: none; opacity: 0; }
  :root:not([data-motion="still"]):active-view-transition-type(ratc-page)::view-transition-new(act-ix) { animation: none; }
  :root:not([data-motion="still"]):active-view-transition-type(ratc-page)::view-transition-group(act-ix) { background: var(--ink-plum); }
}

/* Ambient layers exist (decoration only) but are static unless the block above runs */
.ambient-rain { position: relative; overflow: hidden; }
.ambient-rain::before {
  content: ""; position: absolute; left: 0; right: 0; top: -120px; bottom: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(104deg, rgb(247 216 165 / 0) 0 22px, rgb(247 216 165 / .09) 22px 23px, rgb(247 216 165 / 0) 23px 47px);
  opacity: .7;
}

@keyframes ratc-reg-a { 0% { transform: translate(-5px, 3px); opacity: 1; } 78% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(0, 0); opacity: 0; } }
@keyframes ratc-reg-b { 0% { transform: translate(4px, -3px); opacity: 1; } 78% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(0, 0); opacity: 0; } }
@keyframes ratc-print-in { from { clip-path: inset(0 0 8% 0); transform: translateY(24px); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes ratc-mosaic-out { from { transform: scale(1); } to { transform: scale(0); } }
@keyframes ratc-iris { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes ratc-menu-bar { from { border-top-color: var(--bone); } to { border-top-color: var(--mustard); } }
@keyframes ratc-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .82; } }
@keyframes ratc-rain { from { transform: translateY(0); } to { transform: translateY(120px); } }
@keyframes ratc-drift { from { transform: translateX(-1.5%); } to { transform: translateX(1.5%); } }
@keyframes ratc-mosaic-page {
  0%    { -webkit-mask-image: var(--mosaic-1); mask-image: var(--mosaic-1); }
  20%   { -webkit-mask-image: var(--mosaic-2); mask-image: var(--mosaic-2); }
  40%   { -webkit-mask-image: var(--mosaic-3); mask-image: var(--mosaic-3); }
  60%   { -webkit-mask-image: var(--mosaic-4); mask-image: var(--mosaic-4); }
  80%   { -webkit-mask-image: var(--mosaic-5); mask-image: var(--mosaic-5); }
  100%  { -webkit-mask-image: none; mask-image: none; }
}

/* Reduced motion or Still: no view-transition animation at all (4.10) */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
:root[data-motion="still"]::view-transition-group(*),
:root[data-motion="still"]::view-transition-old(*),
:root[data-motion="still"]::view-transition-new(*) { animation: none !important; }

/* ---------- Generated SVG data (Memphis, torn edge, mosaic masks) ------- */
/* @generated memphis start (SCRATCH/tools/make-memphis.py, do not hand-edit) */
:root {
  --mp-scatter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='square'%3E%3Cpath d='M26 18v16M18 26h16' stroke-width='3'/%3E%3Crect x='89' y='15' width='14' height='14' stroke-width='3' transform='rotate(12 96 22)'/%3E%3Cpath d='M146 58l7 -8l7 8l7 -8l7 8l7 -8' stroke-width='3'/%3E%3Cpath d='M52 108.26L61 123.74H43Z' stroke-width='3' stroke-linejoin='miter'/%3E%3Cpath d='M198 112v12M192 118h12' stroke-width='2.5'/%3E%3Cpath d='M98 178l6 -7l6 7l6 -7l6 7l6 -7l6 7' stroke-width='3'/%3E%3Crect x='18' y='196' width='12' height='12' stroke-width='3'/%3E%3Cpath d='M212 195.4L222 212.6H202Z' stroke-width='3' stroke-linejoin='miter'/%3E%3Cpath d='M66 55.12L74 68.88H58Z' fill='%23000' stroke='none'/%3E%3Crect x='177.5' y='21.5' width='9' height='9' fill='%23000' stroke='none'/%3E%3Cpath d='M128 118h6v6h-6zM136 126h6v6h-6zM128 134h6v6h-6z' fill='%23000' stroke='none'/%3E%3Cpath d='M78 214h6v6h-6zM70 222h6v6h-6z' fill='%23000' stroke='none'/%3E%3Cpath d='M162 212.84L168 223.16H156Z' fill='%23000' stroke='none' transform='rotate(180 162 218)'/%3E%3Cpath d='M150 145v10M145 150h10' stroke-width='2.5'/%3E%3Crect x='114.5' y='82.5' width='7' height='7' fill='%23000' stroke='none'/%3E%3Cpath d='M8 152l6 -6l6 6l6 -6' stroke-width='2.5'/%3E%3Crect x='223' y='67' width='10' height='10' stroke-width='3' transform='rotate(30 228 72)'/%3E%3Cpath d='M196 163.7L201 172.3H191Z' fill='%23000' stroke='none' transform='rotate(90 196 168)'/%3E%3C/g%3E%3C/svg%3E");
  --mp-scatter-size: 240px 240px;
  --mp-frieze: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='82' viewBox='0 0 120 82'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='square'%3E%3Cpath d='M0 28l10 -12l10 12l10 -12l10 12l10 -12l10 12l10 -12l10 12l10 -12l10 12l10 -12l10 12' stroke-width='3'/%3E%3Cpath d='M0 6h120' stroke-width='2'/%3E%3Cpath d='M20 43v14M13 50h14' stroke-width='3'/%3E%3Crect x='53.5' y='43.5' width='13' height='13' stroke-width='3' transform='rotate(45 60 50)'/%3E%3Cpath d='M100 45.12L108 58.88H92Z' fill='%23000' stroke='none'/%3E%3Cpath d='M4 70h6v6h-6zM36 70h6v6h-6zM68 70h6v6h-6zM100 70h6v6h-6z' fill='%23000' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --mp-frieze-size: 120px 82px;
  --mp-pixel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='96' viewBox='0 0 192 96'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='square'%3E%3Cpath d='M169 9h6v6h-6zM25 25h6v6h-6zM41 25h6v6h-6zM49 25h6v6h-6zM57 25h6v6h-6zM65 25h6v6h-6zM121 25h6v6h-6zM153 25h6v6h-6zM9 33h6v6h-6zM57 33h6v6h-6zM73 33h6v6h-6zM89 33h6v6h-6zM121 33h6v6h-6zM153 33h6v6h-6zM161 33h6v6h-6zM1 41h6v6h-6zM25 41h6v6h-6zM65 41h6v6h-6zM73 41h6v6h-6zM113 41h6v6h-6zM121 41h6v6h-6zM129 41h6v6h-6zM145 41h6v6h-6zM17 49h6v6h-6zM33 49h6v6h-6zM41 49h6v6h-6zM73 49h6v6h-6zM81 49h6v6h-6zM89 49h6v6h-6zM121 49h6v6h-6zM145 49h6v6h-6zM153 49h6v6h-6zM169 49h6v6h-6zM185 49h6v6h-6zM25 57h6v6h-6zM41 57h6v6h-6zM49 57h6v6h-6zM57 57h6v6h-6zM73 57h6v6h-6zM89 57h6v6h-6zM97 57h6v6h-6zM105 57h6v6h-6zM121 57h6v6h-6zM129 57h6v6h-6zM137 57h6v6h-6zM161 57h6v6h-6zM177 57h6v6h-6zM185 57h6v6h-6zM9 65h6v6h-6zM33 65h6v6h-6zM65 65h6v6h-6zM89 65h6v6h-6zM105 65h6v6h-6zM129 65h6v6h-6zM145 65h6v6h-6zM161 65h6v6h-6zM185 65h6v6h-6zM25 73h6v6h-6zM33 73h6v6h-6zM41 73h6v6h-6zM57 73h6v6h-6zM65 73h6v6h-6zM81 73h6v6h-6zM89 73h6v6h-6zM97 73h6v6h-6zM113 73h6v6h-6zM121 73h6v6h-6zM129 73h6v6h-6zM137 73h6v6h-6zM145 73h6v6h-6zM153 73h6v6h-6zM177 73h6v6h-6zM185 73h6v6h-6zM1 81h6v6h-6zM9 81h6v6h-6zM25 81h6v6h-6zM33 81h6v6h-6zM41 81h6v6h-6zM49 81h6v6h-6zM57 81h6v6h-6zM65 81h6v6h-6zM73 81h6v6h-6zM81 81h6v6h-6zM89 81h6v6h-6zM97 81h6v6h-6zM105 81h6v6h-6zM121 81h6v6h-6zM129 81h6v6h-6zM137 81h6v6h-6zM145 81h6v6h-6zM161 81h6v6h-6zM169 81h6v6h-6zM177 81h6v6h-6zM185 81h6v6h-6zM1 89h6v6h-6zM9 89h6v6h-6zM17 89h6v6h-6zM25 89h6v6h-6zM33 89h6v6h-6zM41 89h6v6h-6zM49 89h6v6h-6zM57 89h6v6h-6zM73 89h6v6h-6zM81 89h6v6h-6zM89 89h6v6h-6zM97 89h6v6h-6zM105 89h6v6h-6zM121 89h6v6h-6zM129 89h6v6h-6zM137 89h6v6h-6zM145 89h6v6h-6zM153 89h6v6h-6zM169 89h6v6h-6zM177 89h6v6h-6zM185 89h6v6h-6z' fill='%23000' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --mp-pixel-size: 192px 96px;
  --mp-rail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='80' viewBox='0 0 40 80'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='square'%3E%3Cpath d='M8 0L32 10L8 20L32 30L8 40L32 50L8 60L32 70L8 80' stroke-width='3'/%3E%3Crect x='34.5' y='5.5' width='5' height='5' fill='%23000' stroke='none'/%3E%3Crect x='0.5' y='45.5' width='5' height='5' fill='%23000' stroke='none'/%3E%3Cpath d='M36 49v6M33 52h6' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
  --mp-rail-size: 100% auto;
  --mp-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='300' viewBox='0 0 420 300'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='square'%3E%3Crect x='139' y='44' width='10' height='10' stroke-width='3'/%3E%3Cpath d='M365 261.56L369 268.44H361Z' fill='%23000' stroke='none'/%3E%3Cpath d='M270 137v12M264 143h12' stroke-width='2.5'/%3E%3Cpath d='M113 82h6v6h-6zM121 82h6v6h-6zM113 90h6v6h-6z' fill='%23000' stroke='none'/%3E%3Cpath d='M389 40v16M381 48h16' stroke-width='2.5'/%3E%3Crect x='276' y='24' width='8' height='8' stroke-width='3'/%3E%3Cpath d='M115 149.12L123 162.88H107Z' stroke-width='3' stroke-linejoin='miter' transform='rotate(90 115 156)'/%3E%3Cpath d='M270 8h6v6h-6zM278 16h6v6h-6z' fill='%23000' stroke='none'/%3E%3Cpath d='M176 210v16M168 218h16' stroke-width='2.5'/%3E%3Cpath d='M118 240h6v6h-6zM126 240h6v6h-6zM118 248h6v6h-6z' fill='%23000' stroke='none'/%3E%3Cpath d='M316 184.25L319.2 189.75H312.8Z' fill='%23000' stroke='none' transform='rotate(15 316 187)'/%3E%3Cpath d='M48 6h6v6h-6zM64 6h6v6h-6zM56 14h6v6h-6z' fill='%23000' stroke='none'/%3E%3Cpath d='M281 23.98L288 36.02H274Z' stroke-width='3' stroke-linejoin='miter' transform='rotate(90 281 30)'/%3E%3Cpath d='M397 194v8M393 198h8' stroke-width='2.5'/%3E%3Crect x='291.8' y='8.8' width='8.4' height='8.4' fill='%23000' stroke='none'/%3E%3Cpath d='M374 85.81L381.2 98.19H366.8Z' fill='%23000' stroke='none' transform='rotate(30 374 92)'/%3E%3Cpath d='M392 83l6 -7l6 7l6 -7l6 7' stroke-width='2.5'/%3E%3Cpath d='M395 93v14M388 100h14' stroke-width='2.5'/%3E%3Cpath d='M65 174.25L68.2 179.75H61.8Z' fill='%23000' stroke='none'/%3E%3Cpath d='M138 13h6v6h-6zM146 21h6v6h-6z' fill='%23000' stroke='none'/%3E%3Cpath d='M378 141.56L382 148.44H374Z' stroke-width='3' stroke-linejoin='miter' transform='rotate(30 378 145)'/%3E%3Cpath d='M22 9h6v6h-6zM30 9h6v6h-6zM22 17h6v6h-6z' fill='%23000' stroke='none'/%3E%3Crect x='379' y='208' width='10' height='10' stroke-width='3'/%3E%3Crect x='398' y='259' width='18' height='18' stroke-width='3' transform='rotate(45 407 268)'/%3E%3Cpath d='M161 265.81L168.2 278.19H153.8Z' fill='%23000' stroke='none' transform='rotate(90 161 272)'/%3E%3Crect x='245.2' y='83.2' width='9.6' height='9.6' fill='%23000' stroke='none'/%3E%3Cpath d='M306 64.87L310.8 73.13H301.2Z' fill='%23000' stroke='none' transform='rotate(15 306 69)'/%3E%3Cpath d='M313 21.18L318.6 30.82H307.4Z' fill='%23000' stroke='none'/%3E%3Cpath d='M407 167v8M403 171h8' stroke-width='2.5'/%3E%3Cpath d='M81 94l6 -7l6 7l6 -7l6 7' stroke-width='2.5' transform='rotate(30 81 94)'/%3E%3Cpath d='M392 258.84L398 269.16H386Z' stroke-width='3' stroke-linejoin='miter' transform='rotate(30 392 264)'/%3E%3Cpath d='M87 93h6v6h-6zM103 93h6v6h-6zM95 101h6v6h-6z' fill='%23000' stroke='none'/%3E%3Cpath d='M314 27h6v6h-6zM322 27h6v6h-6zM314 35h6v6h-6z' fill='%23000' stroke='none'/%3E%3Crect x='354.4' y='22.4' width='7.2' height='7.2' fill='%23000' stroke='none' transform='rotate(90 358 26)'/%3E%3Cpath d='M-2 85l6 -7l6 7l6 -7l6 7' stroke-width='2.5' transform='rotate(45 -2 85)'/%3E%3Cpath d='M326 93h6v6h-6zM342 93h6v6h-6zM334 101h6v6h-6z' fill='%23000' stroke='none'/%3E%3Cpath d='M82 215l6 -7l6 7l6 -7l6 7' stroke-width='2.5'/%3E%3Crect x='363' y='11' width='12' height='12' stroke-width='3' transform='rotate(90 369 17)'/%3E%3Cpath d='M406 239.5L412.4 250.5H399.6Z' fill='%23000' stroke='none' transform='rotate(45 406 245)'/%3E%3Cpath d='M248 112.25L251.2 117.75H244.8Z' fill='%23000' stroke='none' transform='rotate(90 248 115)'/%3E%3Cpath d='M25 18l6 -7l6 7l6 -7l6 7' stroke-width='2.5' transform='rotate(15 25 18)'/%3E%3Crect x='143.6' y='137.6' width='4.8' height='4.8' fill='%23000' stroke='none' transform='rotate(90 146 140)'/%3E%3Cpath d='M288 126.56L292 133.44H284Z' stroke-width='3' stroke-linejoin='miter' transform='rotate(90 288 130)'/%3E%3Cpath d='M349 56l6 -7l6 7l6 -7l6 7' stroke-width='2.5' transform='rotate(90 349 56)'/%3E%3Cpath d='M99 13l6 -7l6 7l6 -7l6 7' stroke-width='2.5' transform='rotate(30 99 13)'/%3E%3Cpath d='M322 271h6v6h-6zM330 279h6v6h-6z' fill='%23000' stroke='none'/%3E%3C/g%3E%3C/svg%3E");
  --mp-corner-size: 420px 300px;
  --mp-desk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='48' viewBox='0 0 96 48'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='square'%3E%3Cpath d='M12 7v10M7 12h10' stroke-width='2'/%3E%3Crect x='57.5' y='9.5' width='5' height='5' fill='%23000' stroke='none'/%3E%3Crect x='32' y='32' width='8' height='8' stroke-width='2'/%3E%3Cpath d='M84 31v10M79 36h10' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
  --mp-desk-size: 96px 48px;
  --edge-torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='24' viewBox='0 0 600 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24L0 10L0 14L9 4L23 7L36 6L45 14L53 13L72 4L78 5L90 7L112 13L118 12L130 15L149 7L169 13L183 4L194 15L213 9L227 6L239 9L248 5L266 5L283 9L297 4L317 12L326 10L334 12L349 14L366 13L378 15L386 4L399 8L407 7L416 10L430 11L447 6L464 9L476 14L490 15L498 13L509 12L522 6L542 10L556 14L569 14L585 4L598 4L600 9L600 24Z'/%3E%3Cpath d='M410 2h2v1h-1zM580 5h3v1h-1zM511 3h4v2h-1zM146 2h2v1h-1zM574 4h3v2h-1zM408 2h2v1h-1zM521 3h2v1h-1zM112 1h4v1h-1zM432 4h2v2h-1zM390 4h3v2h-1zM566 0h4v1h-1zM549 2h4v2h-1zM114 2h3v1h-1zM464 0h4v2h-1zM512 1h4v1h-1zM305 5h4v1h-1zM156 2h2v1h-1zM331 3h2v1h-1zM371 2h2v1h-1zM246 4h2v1h-1zM497 0h4v1h-1zM131 5h3v1h-1z'/%3E%3C/svg%3E");
  --mosaic-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M0 6h1v1h-1zM6 0h1v1h-1zM6 4h1v1h-1zM4 2h1v1h-1zM1 1h1v1h-1zM0 0h1v1h-1zM4 0h1v1h-1zM2 6h1v1h-1zM6 2h1v1h-1zM2 2h1v1h-1zM3 5h1v1h-1z'/%3E%3C/svg%3E");
  --mosaic-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M0 6h1v1h-1zM6 0h1v1h-1zM6 4h1v1h-1zM4 2h1v1h-1zM1 1h1v1h-1zM0 0h1v1h-1zM4 0h1v1h-1zM2 6h1v1h-1zM6 2h1v1h-1zM2 2h1v1h-1zM3 5h1v1h-1zM0 2h1v1h-1zM5 6h1v1h-1zM2 4h1v1h-1zM3 1h1v1h-1zM7 0h1v1h-1zM2 1h1v1h-1zM3 4h1v1h-1zM3 3h1v1h-1zM7 4h1v1h-1zM3 2h1v1h-1z'/%3E%3C/svg%3E");
  --mosaic-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M0 6h1v1h-1zM6 0h1v1h-1zM6 4h1v1h-1zM4 2h1v1h-1zM1 1h1v1h-1zM0 0h1v1h-1zM4 0h1v1h-1zM2 6h1v1h-1zM6 2h1v1h-1zM2 2h1v1h-1zM3 5h1v1h-1zM0 2h1v1h-1zM5 6h1v1h-1zM2 4h1v1h-1zM3 1h1v1h-1zM7 0h1v1h-1zM2 1h1v1h-1zM3 4h1v1h-1zM3 3h1v1h-1zM7 4h1v1h-1zM3 2h1v1h-1zM5 4h1v1h-1zM0 7h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM5 2h1v1h-1zM3 0h1v1h-1zM6 7h1v1h-1zM0 5h1v1h-1zM4 5h1v1h-1zM4 3h1v1h-1zM6 3h1v1h-1z'/%3E%3C/svg%3E");
  --mosaic-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M0 6h1v1h-1zM6 0h1v1h-1zM6 4h1v1h-1zM4 2h1v1h-1zM1 1h1v1h-1zM0 0h1v1h-1zM4 0h1v1h-1zM2 6h1v1h-1zM6 2h1v1h-1zM2 2h1v1h-1zM3 5h1v1h-1zM0 2h1v1h-1zM5 6h1v1h-1zM2 4h1v1h-1zM3 1h1v1h-1zM7 0h1v1h-1zM2 1h1v1h-1zM3 4h1v1h-1zM3 3h1v1h-1zM7 4h1v1h-1zM3 2h1v1h-1zM5 4h1v1h-1zM0 7h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM5 2h1v1h-1zM3 0h1v1h-1zM6 7h1v1h-1zM0 5h1v1h-1zM4 5h1v1h-1zM4 3h1v1h-1zM6 3h1v1h-1zM2 3h1v1h-1zM1 4h1v1h-1zM1 2h1v1h-1zM7 5h1v1h-1zM6 1h1v1h-1zM2 5h1v1h-1zM7 6h1v1h-1zM1 6h1v1h-1zM2 7h1v1h-1zM4 4h1v1h-1zM1 7h1v1h-1z'/%3E%3C/svg%3E");
  --mosaic-5: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath d='M0 6h1v1h-1zM6 0h1v1h-1zM6 4h1v1h-1zM4 2h1v1h-1zM1 1h1v1h-1zM0 0h1v1h-1zM4 0h1v1h-1zM2 6h1v1h-1zM6 2h1v1h-1zM2 2h1v1h-1zM3 5h1v1h-1zM0 2h1v1h-1zM5 6h1v1h-1zM2 4h1v1h-1zM3 1h1v1h-1zM7 0h1v1h-1zM2 1h1v1h-1zM3 4h1v1h-1zM3 3h1v1h-1zM7 4h1v1h-1zM3 2h1v1h-1zM5 4h1v1h-1zM0 7h1v1h-1zM4 6h1v1h-1zM6 6h1v1h-1zM5 2h1v1h-1zM3 0h1v1h-1zM6 7h1v1h-1zM0 5h1v1h-1zM4 5h1v1h-1zM4 3h1v1h-1zM6 3h1v1h-1zM2 3h1v1h-1zM1 4h1v1h-1zM1 2h1v1h-1zM7 5h1v1h-1zM6 1h1v1h-1zM2 5h1v1h-1zM7 6h1v1h-1zM1 6h1v1h-1zM2 7h1v1h-1zM4 4h1v1h-1zM1 7h1v1h-1zM4 7h1v1h-1zM6 5h1v1h-1zM7 3h1v1h-1zM7 7h1v1h-1zM1 0h1v1h-1zM1 5h1v1h-1zM1 3h1v1h-1zM5 1h1v1h-1zM0 4h1v1h-1zM3 6h1v1h-1z'/%3E%3C/svg%3E");
}
/* @generated memphis end */