/* The Reserve by MLA, info site.
   One look, Atelier (the app's own), in light and dark (data-theme), driven by the tokens below. */

/* ---------- fonts (self-hosted, OFL; a face downloads only when a direction uses it) ---------- */
@font-face { font-family: "Bodoni Moda"; src: url(/fonts/bodoni-moda.woff2) format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url(/fonts/bodoni-moda-italic.woff2) format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

/* ---------- tokens: Atelier (default) ---------- */
:root {
  --ground: #f5f3f0; --surface: #fbfaf8; --sunk: #ece8e2;
  --ink: #1a1816; --ink-2: #4b4641; --ink-3: #655f58; /* ink-2 from #524d47: 4.5:1 on the silk's darkest fold too (Research q8) */
  --line: rgba(26, 24, 22, .14); --line-strong: rgba(26, 24, 22, .34);
  --accent: #7a6448; --btn: #141312; --btn-ink: #f5f3f0;
  /* the third section ground, the band: Mockup 3's light ink-2, a deep brown (2026-10-27; in dark, a warm charcoal a
     step above the ground: below), its words light in both (the band's own tokens, below) */
  --band: #574846;
  --veil: rgba(245, 243, 240, .88); --focus: #3b5ba9; --danger: #8e2f24;
  --head: calc(4rem + 1px); /* the sticky header: its bar and its rule */

  --f-display: "Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;
  --f-body: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --logo: #000; /* her logo files: black on light, white on dark */
  --logo-img: url(/brand/the-reserve-logo.webp); --logo-ratio: 1183 / 511; /* swap both when her final file lands, under a new
     filename (/brand/* is cached for a day), and its name in scripts/build.mjs's LOGO (the preload) */
  --h-weight: 400; --h-track: 0; --h-lead: 1.08;
  --title-size: clamp(1.85rem, 1.35rem + 2.1vw, 3.3rem); --title-style: italic; --title-weight: 400;
  --page-title-size: clamp(2.6rem, 1.6rem + 4vw, 4.6rem);
  --btn-case: uppercase; --btn-track: .16em; --btn-size: .8125rem; --btn-weight: 500;
  --r-btn: 0; --r-card: 0; --r-chip: 0; --r-input: 0; --shadow: none;
  /* form-control borders need 3:1 (WCAG 1.4.11); derived per theme so every direction and mode gets it */
  --field-line: color-mix(in srgb, var(--ink) 56%, var(--ground));
  --ease: cubic-bezier(.22, 1, .36, 1);
  --silk:
    radial-gradient(90% 70% at 85% 0%, rgba(255, 255, 255, .9), transparent 60%),
    linear-gradient(118deg, transparent 28%, rgba(255, 255, 255, .7) 40%, transparent 50%),
    linear-gradient(128deg, transparent 52%, rgba(60, 48, 36, .07) 62%, transparent 74%),
    linear-gradient(106deg, transparent 64%, rgba(255, 255, 255, .55) 74%, transparent 84%),
    linear-gradient(100deg, #ebe6df 0%, #f7f4ef 34%, #e3dcd2 58%, #f4f0ea 80%, #e8e1d7 100%);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --ground: #151413; --surface: #1d1b19; --sunk: #100f0e;
  --ink: #f1ede7; --ink-2: #d2cbc1; --ink-3: #a59d92; /* ink-2 from #c7c0b6: 4.5:1 where the silk's warm sheen peaks */
  --line: rgba(241, 237, 231, .14); --line-strong: rgba(241, 237, 231, .36);
  --accent: #c9ad86; --btn: #f1ede7; --btn-ink: #151413;
  --veil: rgba(21, 20, 19, .88); --focus: #93b2ff; --danger: #f0a196; --logo: #fff;
  --band: #221e1d; /* the pick of three, 2026-10-27 */
  --silk:
    radial-gradient(90% 70% at 85% 0%, rgba(201, 173, 134, .14), transparent 60%),
    linear-gradient(118deg, transparent 28%, rgba(241, 237, 231, .07) 40%, transparent 50%),
    linear-gradient(128deg, transparent 52%, rgba(0, 0, 0, .4) 62%, transparent 74%),
    linear-gradient(106deg, transparent 64%, rgba(241, 237, 231, .05) 74%, transparent 84%),
    linear-gradient(100deg, #1a1816 0%, #24211e 34%, #141312 58%, #211e1b 80%, #171513 100%);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 {
  margin: 0; font-family: var(--f-display); font-weight: var(--h-weight); letter-spacing: var(--h-track);
  line-height: var(--h-lead);
  text-wrap: balance;
}
h2 { font-size: clamp(1.875rem, 1.3rem + 2.6vw, 3.4rem); }
h3 { font-size: 1.375rem; }
p { margin: 0; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.wrap { width: min(100% - 2.5rem, 74rem); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--btn); color: var(--btn-ink); }
.skip:focus { top: 1rem; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- the theme toggle ---------- */
html[data-theme="dark"] .icon--moon, html:not([data-theme="dark"]) .icon--sun { display: none; }
html:not(.js) .top__theme { display: none; }
/* the demo's draft labels, launch-day lines and tour video are gone from the site (2026-10-23); the frozen copy of the
   pages the edit tests build (tests/fixtures/site) still holds them, so they stay hidden there */
.demo-tag, .demo-note, .stage-live, .tour-video { display: none !important; }
/* and the hero's Join and the bar's opening date, gone with the options that showed them (2026-10-27) */
.hero__join, .joinbar__date { display: none !important; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .95rem 1.7rem;
  border: 1px solid var(--btn); border-radius: var(--r-btn); background: var(--btn); color: var(--btn-ink);
  font: var(--btn-weight) var(--btn-size)/1.1 var(--f-body); letter-spacing: var(--btn-track); text-transform: var(--btn-case);
  text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover { background: transparent; color: var(--ink); border-color: var(--ink); text-decoration: none; }
.btn--sm { min-height: 44px; padding: .65rem 1.1rem; font-size: .75rem; }
.btn--block { width: 100%; }
/* an outlined button (her mock's Apply to be an artist): the ground showing, filled on hover */
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.link-btn { padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; min-height: 44px; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 40; background: var(--ground); border-bottom: 1px solid var(--line); }
/* the veil (88% of the ground) only with the blur behind it: on a phone, without it, the words scrolling under the
   header showed through her logo */
@media (min-width: 900px) { .top { background: var(--veil); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } }
.top__bar { display: flex; align-items: center; gap: .75rem; min-height: 4rem; width: auto; margin-inline: clamp(1.25rem, 3vw, 2.5rem); } /* the full width (her note): logo at the left edge, links and Join at the right */
.top__brand { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; text-decoration: none; }
.top__nav { display: none; }
.top__nav ul { display: flex; gap: 1.75rem; }
.top__nav a, .top__menu a { text-decoration: none; font-size: .9375rem; color: var(--ink-2); }
.top__nav a:hover, .top__menu a:hover { color: var(--ink); text-decoration: underline; }
.top__theme {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid transparent;
  border-radius: 999px; background: none; color: var(--ink); cursor: pointer;
}
.top__theme:hover { border-color: var(--line-strong); }
.top__end { display: flex; align-items: center; gap: .75rem; }
.top__cta { display: none; }
.top__menu { position: relative; }
.top__menu summary { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; list-style: none; color: var(--ink); }
.top__menu summary::-webkit-details-marker { display: none; }
.top__menu nav { position: absolute; right: 0; top: calc(100% + .5rem); min-width: 13rem; padding: .5rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .35); }
.top__menu li a { display: block; padding: .75rem .9rem; }
.top__menu li:last-child a { color: var(--ink); font-weight: 600; }
@media (min-width: 640px) { .top__cta { display: inline-flex; } }
@media (min-width: 1000px) { .top__nav { display: block; } .top__menu { display: none; } }
/* the links in the middle, her logo and the Join in the corners (her pick; an option, data-nav, until 2026-10-27; the
   frozen test pages' header, which has no .top__end, keeps its row) */
@media (min-width: 1000px) {
  .top__bar:has(> .top__end) { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .top__bar:has(> .top__end) .top__brand { justify-self: start; margin-right: 0; }
  .top__end { justify-self: end; }
}

/* her logo (the interim files she sent, 2026-10-21; the final ones are to come) as a mask, so one file serves both modes
   in her two colours; the typeset name beside it is there for screen readers only */
.logo {
  display: block; flex: none; background: var(--logo); -webkit-print-color-adjust: exact; print-color-adjust: exact;
  -webkit-mask: var(--logo-img) center / contain no-repeat; mask: var(--logo-img) center / contain no-repeat;
}
/* forced colours repaint every background as Canvas, which would erase the logo: paint it in the system text colour
   (the hero's silk canvas is dropped in that mode too, below, so the hero logo sits on Canvas) */
@media (forced-colors: active) { .logo { forced-color-adjust: none; background: CanvasText; } }
.logo--bar { width: calc(2.9rem * var(--logo-ratio)); height: 2.9rem; }
.logo--foot { width: calc(4.6rem * var(--logo-ratio)); height: 4.6rem; }
.logo--hero { width: min(100%, 48rem); aspect-ratio: var(--logo-ratio); margin-inline: auto; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3.5rem, 9vw, 7.5rem); }
.hero__art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.art { position: absolute; inset: 0; display: none; }
.hero__inner { display: grid; justify-items: center; gap: clamp(1.25rem, 3vw, 2rem); text-align: center; }
.hero__mark { justify-self: stretch; } /* the logo sizes from this width */
.hero__copy { display: grid; justify-items: center; max-width: 44rem; }
/* over the silk's deepened dips (silk.js) the page's ink-2 fell to 3.4:1 at moments, her muted ink-3 to 3.2: the hero's
   quieter words take colours halfway to the ink (the page's, as :root resolves them) */
.hero__inner { --ink-2: color-mix(in srgb, var(--page-ink-2) 50%, var(--page-ink)); --ink-3: color-mix(in srgb, var(--page-ink-3) 50%, var(--page-ink)); }
/* her strong silk (data-silk) dips deeper still: three quarters of the way (a plain hero has no silk) */
:root[data-silk="strong"]:not([data-hero="plain"]) .hero__inner { --ink-2: color-mix(in srgb, var(--page-ink-2) 25%, var(--page-ink)); --ink-3: color-mix(in srgb, var(--page-ink-3) 25%, var(--page-ink)); }
.hero__title { font-size: var(--title-size); font-style: var(--title-style); font-weight: var(--title-weight); letter-spacing: 0; line-height: 1.15; }
.hero__lede { margin-top: 1.1rem; color: var(--ink-2); font-size: min(1.3rem, max(.75rem, 3.8vw)); letter-spacing: .05em; max-width: 40rem; text-wrap: balance; } /* her one-line list of the five: sized to stay one line on a phone */
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .9rem 1.25rem; margin-top: 1.25rem; }
/* Join is in the header from 640px and, on a phone, where the header has none, in the bottom bar (from the first screen,
   or on the home page once most of the hero is scrolled by) (her pick, Header and bar; an option, data-join, until
   2026-10-27) */
.hero__status { margin-top: 1.25rem; font-size: 1rem; color: var(--ink-2); }
/* the agency's name, a link to its site (2026-10-29: as About's "Visit Michelle Leo Agency"): the site's underline,
   in the hero's full ink so it stands out from the softer line on the silk */
.hero__status a { color: var(--ink); }
.hero__status a:focus-visible { outline-color: var(--ink); } /* (the focus blue could fall under 3:1 on the light silk's darker folds) */
.apps { display: flex; flex-wrap: wrap; gap: .5rem; }
/* the stores: Apple's own badge, unaltered (brand/download-on-the-app-store.svg, the black one; 40 px tall, Apple's
   on-screen minimum), App Store first; Google's own PNG (brand/get-it-on-google-play.png, unaltered) carries its clear
   space as a transparent margin, so it is drawn 59 px tall for its badge to match Apple's 40 (the file is 250 px: 4x).
   Clear space a quarter of the badge's height (10 px) around each; "Coming soon" is our own words, outside it, never on
   the artwork. Unlinked until the store listings exist. */
.stores { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; }
.stores__list { display: flex; flex-wrap: wrap; gap: 10px; }
.store { display: flex; padding: 0; }
.store__badge { display: block; width: auto; height: 40px; }
.store__badge--google { height: 59px; margin-block: -9.5px; margin-inline: -9.5px 0; } /* its own margin is its clear space */
.stores__soon { font-size: .9375rem; color: var(--ink-2); }
/* the hero's app strip (Mockup 2's): the app's own icon as a tile, "The Reserve app / Coming soon", then the badges */
.stores--strip { gap: 14px 28px; }
.app-soon { display: inline-flex; align-items: center; gap: .8rem; text-align: left; }
.app-tile { display: block; flex: none; width: 52px; height: 52px; border-radius: 23%; box-shadow: 0 0 0 1px var(--line), 0 8px 18px -10px rgba(0, 0, 0, .35); }
@supports (corner-shape: squircle) { .app-tile { corner-shape: squircle; border-radius: 30%; } }
.app-soon__text { display: grid; font-size: .9375rem; line-height: 1.3; color: var(--ink-2); }
.app-soon__text b { font-weight: 600; color: var(--ink); }
/* on a phone, where it stacks above the badges, a smaller tile and a closer row */
@media (max-width: 559.98px) { .stores--strip { gap: 10px 14px; } .app-tile { width: 40px; height: 40px; } .app-soon__text { font-size: .875rem; } }
.app { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: .45rem .95rem .45rem .7rem; border: 1px solid var(--field-line); border-radius: var(--r-chip); font-size: .8125rem; line-height: 1.25; color: var(--ink-2); }
.app > span { display: grid; }
.app__store { font-weight: 600; color: var(--ink); }
/* Atelier hero: the app's ivory silk (a token per theme; the live WebGL silk in js/silk.js draws over it) behind her logo */
.art--silk { display: block; background: var(--silk); }
.art--silk canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* the silk's four colours for the theme on screen (--silk-1..4: base, mid, high or sheen, glint; builder.css sets them
   per palette and theme), resolved by the browser on the canvas's own colour and border colours (none is drawn: no
   border width), so js/silk.js reads them as computed colours, color-mix() included */
.art--silk canvas { color: var(--silk-1); border: 0 solid; border-color: var(--silk-2) var(--silk-3) var(--silk-4); }
@media (forced-colors: active) { .art--silk canvas { display: none; } } /* decoration the mode cannot repaint */
/* her option of a plain hero (data-hero): the page's ground, no silk (js/silk.js draws no frame) */
:root[data-hero="plain"] .art--silk { display: none; }
@media (min-width: 900px) { .hero__inner { align-content: center; min-height: min(70svh, 40rem); } }


/* page heroes (For artists, legal) */
.page-head { padding-block: clamp(3rem, 8vw, 6rem) clamp(2.5rem, 6vw, 4.5rem); border-bottom: 1px solid var(--line); }
.page-head__inner > * { max-width: 46rem; }
.page-head__kicker { margin-bottom: 1rem; font-size: .9375rem; color: var(--ink-2); }
.page-head__title { font-size: var(--page-title-size); }
.page-head__lede { margin-top: 1.25rem; color: var(--ink-2); font-size: 1.125rem; }
.page-head__actions { margin-top: 1.75rem; }

/* ---------- sections ---------- */
.section { padding-block: clamp(4rem, 9vw, 7.5rem); }
.section__head { max-width: 42rem; margin-bottom: clamp(2rem, 4.5vw, 3.5rem); }
.section__head p { margin-top: 1rem; color: var(--ink-2); max-width: 36rem; }
.section__note { margin-top: 2.5rem; font-size: .9375rem; color: var(--ink-2); }
/* her mock (2026-10-25): a small letter-spaced label above each section's heading, and above the hero's logo */
.label { margin-bottom: .9rem; font-family: var(--f-body); font-size: .75rem; font-weight: 500; letter-spacing: .22em; line-height: 1.4; text-transform: uppercase; color: var(--ink-2); }
.section__head .label { margin-top: 0; }
.hero__label { margin-bottom: 0; }

/* For Artists, at the foot of the home page: the heading beside her words and the way to apply */
.work__grid { display: grid; gap: 1.5rem; }
.work__grid .section__head { margin-bottom: 0; }
.work__copy { display: grid; gap: 1.5rem; justify-items: start; max-width: 36rem; color: var(--ink-2); font-size: 1.125rem; }
@media (min-width: 900px) {
  .work__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 5rem); align-items: center; }
  .work__copy { padding-left: clamp(3rem, 6vw, 5rem); border-left: 1px solid var(--line); }
}

/* the services: a phone stacks them with a hairline over each (a column has no "between"); from 600px a vertical rule
   divides each row's columns, the gap between them is the padding either side of the rule (no grid gap, so the rule
   sits in the middle), the first column of a row on the text edge and the last on the far edge. A tablet sets three to
   a row, a short last row sharing its width (5 = 3 + 2); from 1100px the services share one row while each column is
   wide enough (her edits can add one like it: below). */
.services__list { display: grid; gap: 2rem; }
.service { padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.service__icon { width: 1.75rem; height: 1.75rem; color: var(--accent); margin-bottom: 1rem; }
.service h3 { margin-bottom: .5rem; }
.service p { color: var(--ink-2); }
@media (min-width: 600px) {
  .services__list { gap: 2.75rem 0; }
  .service { padding: 0 clamp(1rem, 2.4vw, 1.75rem); border-top: 0; }
  .service + .service { border-inline-start: 1px solid var(--line-strong); }
  .service:first-child { padding-inline-start: 0; }
  .service:last-child { padding-inline-end: 0; }
}
@media (min-width: 600px) and (max-width: 1099.98px) {
  .services__list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .service { grid-column: span 2; }
  .service:nth-child(3n + 1):nth-last-child(2), .service:nth-child(3n + 1):nth-last-child(2) + .service { grid-column: span 3; }
  .service:nth-child(3n + 1):last-child { grid-column: 1 / -1; }
  .service:nth-child(3n) { padding-inline-end: 0; }
  .service:nth-child(3n + 1) { padding-inline-start: 0; border-inline-start: 0; }
}
@media (min-width: 1100px) { .services__list { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
/* one row would leave a column narrower than "Photography" (it needs about 130px): six services go three to a row up
   to 1200px, seven or more at any width (a browser without :has keeps one row) */
@media (min-width: 1100px) and (max-width: 1199.98px) {
  .services__list:has(> :nth-child(6)) { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .services__list:has(> :nth-child(6)) > .service { grid-column: span 2; }
  .services__list:has(> :nth-child(6)) > .service:nth-child(3n + 1):nth-last-child(2), .services__list:has(> :nth-child(6)) > .service:nth-child(3n + 1):nth-last-child(2) + .service { grid-column: span 3; }
  .services__list:has(> :nth-child(6)) > .service:nth-child(3n + 1):last-child { grid-column: 1 / -1; }
  .services__list:has(> :nth-child(6)) > .service:nth-child(3n) { padding-inline-end: 0; }
  .services__list:has(> :nth-child(6)) > .service:nth-child(3n + 1) { padding-inline-start: 0; border-inline-start: 0; }
}
@media (min-width: 1200px) {
  .services__list:has(> :nth-child(7)) { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .services__list:has(> :nth-child(7)) > .service { grid-column: span 2; }
  .services__list:has(> :nth-child(7)) > .service:nth-child(3n + 1):nth-last-child(2), .services__list:has(> :nth-child(7)) > .service:nth-child(3n + 1):nth-last-child(2) + .service { grid-column: span 3; }
  .services__list:has(> :nth-child(7)) > .service:nth-child(3n + 1):last-child { grid-column: 1 / -1; }
  .services__list:has(> :nth-child(7)) > .service:nth-child(3n) { padding-inline-end: 0; }
  .services__list:has(> :nth-child(7)) > .service:nth-child(3n + 1) { padding-inline-start: 0; border-inline-start: 0; }
}

.steps__list { counter-reset: step; }
.step { counter-increment: step; position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: .9rem; padding: 1.15rem 0 1.25rem; border-top: 1px solid var(--line); }
.step::before { content: counter(step); grid-row: span 2; font-family: var(--f-display); font-size: 2rem; line-height: 1; color: var(--accent); font-weight: var(--h-weight); transition: color .3s; }
.step h3, .step p { grid-column: 2; transition: color .3s; }
.step h3 { margin-bottom: .5rem; }
.step p { color: var(--ink-2); }

/* How a reservation comes together: three steps across, as in her example. The order is the
   list's; the numerals are drawn (01, 02, 03), so none is a piece of text she edits. Stacked on a phone, a rule between. */
.how__list { counter-reset: how; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(2.5rem, 5vw, 4rem); }
.how__step { counter-increment: how; padding-block: 2rem; border-top: 1px solid var(--line); }
.how__step:first-child { padding-top: 0; border-top: 0; }
.how__step::before {
  content: counter(how, decimal-leading-zero); display: block; width: max-content; margin-bottom: 1.25rem; padding-bottom: 1.25rem;
  font-family: var(--f-display); font-size: clamp(2.75rem, 2.2rem + 1.6vw, 3.5rem); line-height: 1; font-weight: var(--h-weight);
  background: linear-gradient(var(--line-strong), var(--line-strong)) left bottom / 3rem 1px no-repeat;
}
.how__step h3 { font-family: var(--f-body); font-weight: 600; font-size: 1.25rem; line-height: 1.3; letter-spacing: 0; }
.how__step p { margin-top: .5rem; max-width: 32ch; color: var(--ink-2); text-wrap: pretty; }
/* her mock: each number large, to the left of its step's words, close by (the review note "move closer", 2026-10-26) */
.how__step { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; align-content: start; }
.how__step::before { grid-row: 1 / span 2; margin: 0; padding: 0; background: none; font-size: clamp(2.75rem, 2.2rem + 2vw, 4rem); font-variant-numeric: tabular-nums; }
.how__step > * { grid-column: 2; }
@media (min-width: 1100px) {
  /* even columns, the rules in the gaps; each step's rows shared (subgrid), so the lines start level whatever wraps
     (from 1100px: with each numeral beside its words, three across need the room; stacked below, as on a phone) */
  .how__list { --gap: clamp(2.5rem, 4vw, 3.5rem); grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }
  .how__step { position: relative; display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; padding-block: 0; border-top: 0; }
  .how__step + .how__step::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: calc(var(--gap) / -2); width: 1px; background: var(--line); }
  /* what her edit mode can make: once a step holds more than its heading and line (a subgrid has no rows to spare, so a
     third piece would land on the second), every step flows as a plain block, all starting level at the top; a fourth
     step starts a new row, with no rule before it (a margin: a row-gap would also open inside each subgrid) */
  .how__list:has(> .how__step > :nth-child(3)) > .how__step { grid-row: auto; grid-template-rows: none; }
  .how__step:nth-child(n + 4) { margin-top: 3rem; }
  .how__step:nth-child(3n + 1)::after { content: none; }
}

/* ---------- the home page's grounds (2026-10-27): the app on the sunk, the services and the founder on the page
   ground, The Reserve Experience and the waitlist on the band, the FAQ on the ground, For Artists on the sunk. The band
   is dark in both themes, so its words take the band's own light tokens (each measured on it: tests/builder.test.mjs)
   on the whole of both sections, so a piece she moves or adds there takes them too; the waitlist's form takes the
   page's back (as :root resolves them, under her palette and theme), a card on the band ---------- */
:root {
  --page-ink: var(--ink); --page-ink-2: var(--ink-2); --page-ink-3: var(--ink-3); --page-accent: var(--accent);
  --page-focus: var(--focus); --page-line: var(--line); --page-line-strong: var(--line-strong); --page-btn: var(--btn);
  --page-btn-ink: var(--btn-ink);
}
.page-home :is(.how, .join) { background: var(--band); }
.page-home :is(.how, .join) {
  --ink: #faf3f1; --ink-2: #ecdcd8; --ink-3: #dccac6; --accent: #f2c4c9; --focus: #a9c1ff;
  --line: rgba(250, 243, 241, .18); --line-strong: rgba(250, 243, 241, .38); --btn: #faf3f1; --btn-ink: #3b2e2d;
  color: var(--ink);
}
.page-home .join__panel {
  --ink: var(--page-ink); --ink-2: var(--page-ink-2); --ink-3: var(--page-ink-3); --accent: var(--page-accent);
  --focus: var(--page-focus); --line: var(--page-line); --line-strong: var(--page-line-strong); --btn: var(--page-btn);
  --btn-ink: var(--page-btn-ink);
  color: var(--ink);
}
.page-home :is(.app-band, .work) { background: var(--sunk); }
.page-home .founder { --signature-ink: var(--ink); } /* her signature's write-on there (its own stylesheet, About's) */
/* two sections on one ground read as two: the second's top padding becomes a hairline across the wrap and the same
   space after it, only where the page has them next to each other (her moves and deletions included, as the page's
   order is the markup's since 2026-10-28): the founder straight after the services, the waitlist after The Experience */
.page-home main > :is(#services + #about, #how + #waitlist) { padding-top: 0; }
.page-home main > :is(#services + #about, #how + #waitlist)::before {
  content: ""; display: block; width: min(100% - 2.5rem, 74rem); height: 1px; margin: 0 auto clamp(4rem, 9vw, 7.5rem);
  background: var(--line-strong);
}

/* ---------- the app, coming (Mockup 3's band): her words beside three phones, her app's own screens and its icon on a
   home screen. The phones are drawn here, a generic handset (a thin bezel in a dark metal frame, an island, side keys,
   glass), not a maker's art; scoped to the band, so the old tour's .phone (the frozen pages') stays as it was ---------- */
.app-band { overflow-x: clip; } /* (a turned phone's corner never widens the page) */
.app-band__in { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: center; }
.app-band h2 { max-width: 11ch; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.375rem); line-height: 1.02; }
.app-band__copy > p:not(.label) { margin-top: 1.5rem; max-width: 26rem; font-size: 1.125rem; color: var(--ink-2); }
@media (min-width: 900px) { .app-band__in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }
.phones { position: relative; isolation: isolate; height: clamp(24rem, 78vw, 30rem); }
@media (min-width: 900px) { .phones { height: clamp(28rem, 40vw, 38rem); } }
/* the shadow the three cast on the ground below them */
.phones::after { content: ""; position: absolute; z-index: -1; left: 10%; right: 6%; bottom: -3%; height: 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(37, 22, 24, .3), transparent); filter: blur(8px); }
:root[data-theme="dark"] .phones::after { background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); }
.app-band .phones > .phone {
  --phone-w: clamp(7.5rem, 27vw, 11rem); position: absolute; width: var(--phone-w);
  /* the height spelled out, not an aspect-ratio: under one, iPhone Safari (iOS 27, 2026-11-03) drew the screen 239px
     tall in a 233px phone (cause not established), grew the phone 9% and cut 12.7% off each app screen's sides */
  height: calc(var(--phone-w) / .48);
  padding: calc(var(--phone-w) * .072); /* the bezel from the phone's own width, as wide as on a laptop at any size */
  border-radius: 16% / 7.6%;
  background: linear-gradient(145deg, #6b6163 0%, #2a2224 22%, #151112 55%, #2d2527 82%, #5a5052 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 0 0 3px #070505, inset 0 1px 2px rgba(255, 255, 255, .35),
    0 1px 1px rgba(20, 10, 12, .25), 0 26px 40px -22px rgba(40, 18, 22, .55), 0 64px 90px -50px rgba(40, 18, 22, .45);
}
:root[data-theme="dark"] .app-band .phones > .phone {
  background: linear-gradient(145deg, #8a8082 0%, #3a3133 22%, #1d1819 55%, #3a3133 82%, #7a7072 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 0 0 3px #070505, inset 0 1px 2px rgba(255, 255, 255, .4),
    0 26px 40px -22px rgba(0, 0, 0, .8), 0 64px 90px -50px rgba(0, 0, 0, .7);
}
.app-band .phones > .phone--front { padding: calc(var(--phone-w) * .065); } /* the larger one: the same bezel as the two beside it */
@media (min-width: 900px) {
  .app-band .phones > .phone { --phone-w: clamp(10rem, 15vw, 14.5rem); }
  .app-band .phones > .phone--front { --phone-w: clamp(11rem, 16.5vw, 16rem); }
}
@media (max-width: 899.98px) {
  /* the box 2.65 side phones tall, about a laptop's 2.67 (605px for 227px phones), so their shadow sits right under them */
  .app-band .phones { --side-w: clamp(7rem, 25vw, 11rem); height: calc(var(--side-w) * 2.65); }
  .app-band .phones > .phone { --phone-w: var(--side-w); }
  .app-band .phones > .phone--front { --phone-w: clamp(8rem, 29vw, 12.5rem); }
  .app-band .phones > .phone--back { left: 4%; } .app-band .phones > .phone--side { left: 58%; }
}
/* the side keys: volume on the left, power on the right */
.app-band .phones > .phone::before, .app-band .phones > .phone::after { content: ""; position: absolute; width: 1.2%; border-radius: 2px; background: linear-gradient(90deg, #4a4042, #1d1819); }
.app-band .phones > .phone::before { right: -.9%; top: 25%; height: 11%; }
.app-band .phones > .phone::after { left: -.9%; top: 20%; height: 7%; box-shadow: 0 calc(var(--phone-w) * .2) 0 #2a2224; }
.phone--back { left: 3%; top: 10%; transform: rotate(-12deg); }
.phone--front { left: 32%; top: 0; z-index: 2; transform: rotate(3deg); }
.phone--side { left: 63%; top: 13%; transform: rotate(13deg); }
.app-band .phone__screen { position: relative; height: 100%; aspect-ratio: auto; overflow: hidden; border-radius: 13.4% / 6.3%; background: #070505; container-type: inline-size; isolation: isolate; }
/* the island, and the glass: a soft light across it from the upper left */
.app-band .phone__screen::after { content: ""; position: absolute; z-index: 5; top: 3cqi; left: 50%; width: 30cqi; height: 8.6cqi; transform: translateX(-50%); border-radius: 99px; background: #020101; }
.app-band .phone__screen::before { content: ""; position: absolute; z-index: 4; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 30%, rgba(255, 255, 255, 0) 46%); }
@supports (corner-shape: squircle) {
  .app-band .phones > .phone { corner-shape: squircle; border-radius: 22% / 10.5%; }
  .app-band .phone__screen { corner-shape: squircle; border-radius: 19% / 9%; }
}
/* her app's own screens, by the page's theme (each carries its status bar) */
.scr { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.scr--dark, :root[data-theme="dark"] .scr--light { display: none; }
:root[data-theme="dark"] .scr--dark { display: block; }
/* the home screen: her icon among soft unlabelled apps, on the silk, with a status bar drawn here */
.hs { position: absolute; inset: 0; background: url(/screens/home-silk.webp) 40% 50% / cover; }
.sb { position: relative; z-index: 6; display: flex; justify-content: space-between; align-items: center; padding: 4.4cqi 8cqi 0 10cqi; color: #fff; font: 600 4.4cqi/1 var(--f-body); }
.sb__icons { display: flex; gap: 1.6cqi; align-items: center; }
.sb__icons i { display: block; height: 2.6cqi; background: currentColor; border-radius: .6cqi; }
.sb__icons i:nth-child(1) { width: 4.4cqi; clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.sb__icons i:nth-child(2) { width: 3.8cqi; border-radius: 50% 50% .5cqi .5cqi; }
.sb__icons i:nth-child(3) { width: 6.6cqi; box-shadow: inset 0 0 0 .5cqi currentColor; background: linear-gradient(90deg, currentColor 70%, transparent 70%); }
.hs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7cqi 6cqi; padding: 10cqi 7cqi 0; }
.hs__app { display: block; aspect-ratio: 1; border-radius: 23%; background: rgba(255, 255, 255, .2); filter: blur(.5cqi); }
.hs__grid > .hs__app:nth-child(3n) { background: rgba(244, 236, 232, .32); }
.hs__grid > .hs__app:nth-child(4n+1) { background: rgba(201, 139, 149, .45); }
.hs__grid > .hs__app:nth-child(5n+2) { background: rgba(37, 28, 27, .45); }
.hs__app--ours { position: relative; filter: none; background: none; transform: scale(1.12); }
.hs__app--ours img { display: block; width: 100%; height: 100%; border-radius: 23%; box-shadow: 0 2cqi 5cqi rgba(0, 0, 0, .45), 0 0 0 .4cqi rgba(255, 255, 255, .35); }
.hs__app--ours b { position: absolute; left: 50%; top: calc(100% + 1.6cqi); transform: translateX(-50%); white-space: nowrap; font: 600 3.4cqi/1 var(--f-body); color: #fff; text-shadow: 0 .3cqi 1.2cqi rgba(0, 0, 0, .6); }
.hs__dock { position: absolute; left: 4.5cqi; right: 4.5cqi; bottom: 4.5cqi; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6cqi; padding: 4cqi 5cqi; border-radius: 9cqi; background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(3cqi); backdrop-filter: blur(3cqi); }
@supports (corner-shape: squircle) { :is(.hs__app, .hs__app--ours img, .hs__dock) { corner-shape: squircle; } .hs__app, .hs__app--ours img { border-radius: 30%; } }
/* the three drift a little, out of step; still under reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .app-band .phones > .phone { animation: phone-float 7s ease-in-out infinite alternate; }
  .app-band .phones > .phone--front { animation-delay: -2.3s; }
  .app-band .phones > .phone--side { animation-delay: -4.6s; }
}
@keyframes phone-float { from { translate: 0 -6px; } to { translate: 0 8px; } }

/* the app tour: gone from the site (her ask, 2026-10-24); kept only for the frozen pages the edit scenarios run on
   (tests/fixtures/site), until those scenarios are retired. The steps beside a phone showing the real app's screen for
   each, tapped through. The steps are the controls; the one on screen is .is-on. */
.tour { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.tour__head { margin-bottom: 0; }
.tour__steps { order: 1; } /* on a phone the screen comes before the steps */
.tour__stage { display: grid; justify-items: center; gap: 1rem; margin: 0; }
.js .step:not(.is-on)::before, .js .step:not(.is-on) :is(h3, p) { color: var(--ink-3); } /* without JS nothing is picked */
.step__btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.step__btn::after { content: ""; position: absolute; inset: 0; } /* the whole step is the target */
.step__btn:focus-visible { outline: none; }
.step:has(.step__btn:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.step__bar { position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.step.is-on .step__bar { transform: scaleX(var(--p, 1)); }
.tour.is-timing .step.is-on .step__bar { animation: fill var(--tour-ms, 4.5s) linear both; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* the phone: a plain bezel around the real screens (the captures carry their own status bar and island) */
.phone { width: min(72vw, 300px); padding: 9px; border-radius: 50px; background: #121110; box-shadow: 0 0 0 1px var(--line-strong), 0 40px 70px -40px rgba(0, 0, 0, .5); }
:root[data-theme="dark"] .phone { background: #2b2926; }
.phone__screen { position: relative; overflow: hidden; aspect-ratio: 600 / 1304; border-radius: 41px; background: #000; }
.tour-tap { position: absolute; inset: 0; }
.shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.shot { opacity: 0; transition: opacity .35s var(--ease); }
.shot.is-on { opacity: 1; }
:root[data-theme="dark"] .shot--light, :root:not([data-theme="dark"]) .shot--dark { display: none; }
.phone__next { position: absolute; inset: 0; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; touch-action: pan-y; }
.phone__next:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; border-radius: inherit; }
html:not(.js) .phone__next, html:not(.js) .tour__toggle { display: none; }
.tour__caption { display: grid; justify-items: center; gap: .1rem; max-width: 20rem; font-size: .8125rem; color: var(--ink-3); text-align: center; }
.tour__toggle { font-size: .875rem; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .shot, .step::before, .step h3, .step p { transition: none; } }
@media (min-width: 900px) {
  .tour { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "head stage" "steps stage"; align-items: start; column-gap: clamp(3rem, 7vw, 7rem); row-gap: 2.5rem; }
  .tour__head { grid-area: head; }
  .tour__steps { grid-area: steps; }
  .tour__stage { grid-area: stage; align-self: center; }
}

.trust { padding-block: 2.25rem; border-block: 1px solid var(--line); }
.trust__list { display: flex; flex-wrap: wrap; justify-content: center; gap: .85rem 2.75rem; font-size: .9375rem; color: var(--ink-2); }
.trust__list li { display: inline-flex; align-items: center; gap: .65rem; }
.trust__list li::before { content: ""; width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); flex: none; }

/* About: the home band and the /about/ page's sections, a heading beside its copy from 900px */
.about-band__grid { display: grid; gap: 1.25rem 2rem; }
.about-band__copy { display: grid; gap: 1rem; justify-items: start; max-width: 36rem; }
.about-band__copy > p { color: var(--ink-2); }
.about-band__copy > p > a:not(.btn) { color: var(--ink); }
.about-band__copy .cities { justify-self: stretch; }
.about-band__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 1rem; }
.about-who { background: var(--surface); }
/* a band whose heading she removed: the copy takes the whole row, not the right half beside an empty one */
.about-band__grid:not(:has(> h2)) > .about-band__copy { grid-column: 1 / -1; max-width: 44rem; }

/* the founder's section, as in her example: one left column, a small label, the serif title, her words, her signature
   (traced from her example: brand/signature-michelle-leo.svg, drawn in the ink colour as a mask) and her name. On the
   home page above the FAQ, short; her whole letter on About (#letter). */
.founder__inner { display: grid; justify-items: start; gap: 1rem; }
.founder__inner > * { max-width: 42rem; }
.founder__inner > h2 { margin-bottom: .75rem; }
.founder__inner > p:not(.founder__label, .label) { color: var(--ink-2); font-size: 1.125rem; }
.founder__inner > p > a:only-child { display: inline-flex; align-items: center; min-height: 44px; } /* "Read her letter": a full tap target */
.founder__label { margin-top: .5rem; font-size: .9375rem; color: var(--ink-2); }
.founder__inner > .founder__label:first-child { margin-top: 0; }
.founder__inner > .label { margin-bottom: -.25rem; }
.founder__sign { display: grid; gap: .5rem; margin-block: .75rem .5rem; }
.signature {
  display: block; width: clamp(12.5rem, 10rem + 8vw, 17rem); aspect-ratio: 525.2 / 116.1; background: var(--ink);
  -webkit-mask: url(/brand/signature-michelle-leo.svg) left center / contain no-repeat; mask: url(/brand/signature-michelle-leo.svg) left center / contain no-repeat;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
@media (forced-colors: active) { .signature { forced-color-adjust: none; background: CanvasText; } }
.founder__name { font-size: .9375rem; color: var(--ink-2); }
.founder--letter { border-bottom: 1px solid var(--line); }
/* About, as her mock (2026-10-26): the head centred under its label; her letter in two columns, its heading beside her
   words with a rule between; then the launch band, its words beside the Join */
.page-head--about { border-bottom: 1px solid var(--line-strong); text-align: center; } /* (a full-width hairline under it, the site's own, 2026-10-28: its ground's line in either theme) */
.page-head--about .page-head__inner > * { margin-inline: auto; }
.page-head--about .page-head__title { max-width: 60rem; text-wrap: balance; }
.page-head--about + .founder--letter { padding-top: clamp(1rem, 3vw, 2rem); }
.letter__grid { display: grid; gap: 2rem; }
.letter__title { font-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem); line-height: 1.04; text-wrap: balance; }
.letter__copy { display: grid; gap: 1.5rem; justify-items: start; max-width: 38rem; color: var(--ink-2); font-size: 1.125rem; }
.letter__copy > p { text-wrap: pretty; }
.letter__copy .founder__sign { margin-block: .5rem 0; }
.letter__link { display: inline-flex; align-items: center; gap: .75rem; min-height: 44px; color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; } /* the line runs under the arrow, as in her mock */
.launch { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.launch__grid { display: grid; gap: 1.5rem; align-items: center; }
.launch__words h2 { font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); line-height: 1.1; }
.launch__words p { margin-top: .4rem; color: var(--ink-2); font-size: 1.125rem; }
.launch__action .btn { width: 100%; }
@media (min-width: 900px) {
  .letter__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 6vw, 5rem); align-items: start; }
  .letter__copy { padding-left: clamp(3rem, 6vw, 5rem); border-left: 1px solid var(--line); }
  .launch__grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(3rem, 6vw, 5rem); }
  .launch__action { padding-left: clamp(3rem, 6vw, 5rem); border-left: 1px solid var(--line); }
  .launch__action .btn { width: 22rem; }
}
@media (min-width: 900px) { .about-band__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }

.join { background: var(--sunk); } /* (the home page's: the band, above) */
.join__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.join__intro > p { margin-top: 1rem; color: var(--ink-2); max-width: 32rem; }
.cities { border-top: 1px solid var(--line-strong); }
.city { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line-strong); }
.city__name { font-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); }
.city__state { font-size: .9375rem; color: var(--ink-2); text-align: right; }
.city--first .city__state { color: var(--ink); font-weight: 600; }
/* the launch offer (.voucher, not .offer: that is the For artists section): its line, then three occasions in boxes
   divided by the services' vertical rules, then its terms (picked 2026-10-23: O7 with the occasions). Where the
   offer is narrow (a phone, beside the form from 900 to about 1180px, or larger text) the boxes stack, one row each,
   as the services do on a phone. */
.voucher { margin-top: 2rem; container: voucher / inline-size; }
.voucher__title { font-family: var(--f-display); font-weight: var(--h-weight); letter-spacing: var(--h-track); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.2; text-wrap: balance; }
.voucher__pct { white-space: nowrap; }
.voucher__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.1rem; border-block: 1px solid var(--line-strong); }
.voucher__item { display: grid; align-content: start; gap: .35rem; padding: .95rem clamp(.8rem, 2vw, 1.25rem); }
.voucher__item:first-child { padding-inline-start: 0; }
.voucher__item + .voucher__item { border-inline-start: 1px solid var(--line-strong); }
.voucher__name { font-family: var(--f-display); font-style: italic; font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem); line-height: 1.15; } /* under the offer's own line */
.voucher__desc { font-size: .875rem; line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }
.voucher__fine { margin-top: .9rem; max-width: 30rem; font-size: .875rem; color: var(--ink-2); }
/* stacked where the offer is narrower than its three names need side by side: about 32rem at any text size (measured
   in Chrome, 2026-10-23: 518px at 100% text, 636px at 125%, where a 633px offer wrapped them) */
@container voucher (max-width: 33.5rem) {
  .voucher__list { grid-template-columns: minmax(0, 1fr); }
  .voucher__item { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); align-items: baseline; column-gap: 1rem; padding: .65rem 0; }
  .voucher__item + .voucher__item { border-inline-start: 0; border-top: 1px solid var(--line-strong); }
}
/* a browser without container queries (Safari before 16): stacked by the window's width, as before */
@supports not (container-type: inline-size) {
  @media (max-width: 599.98px), (min-width: 900px) and (max-width: 1199.98px) {
    .voucher__list { grid-template-columns: minmax(0, 1fr); }
    .voucher__item { grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr); align-items: baseline; column-gap: 1rem; padding: .65rem 0; }
    .voucher__item + .voucher__item { border-inline-start: 0; border-top: 1px solid var(--line-strong); }
  }
}
@media (forced-colors: active) { .voucher__list, .voucher__item + .voucher__item { border-color: CanvasText; } }
.join__panel { padding: clamp(1.5rem, 4vw, 2.75rem); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
/* the artist application is wider than the waitlist (H10): from 760px its intro sits above it and its fields run two to a
   row; a group of choices, the note, the boxes, the bot check and the button take the whole row. One to a row on a phone. */
@media (min-width: 760px) {
  .join--artists .join__panel { max-width: 60rem; }
  .join--artists .form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; }
  .join--artists .form > :not(.field), .join--artists .form > fieldset.field, .join--artists .form > .field:has(textarea) { grid-column: 1 / -1; }
}
/* on a phone the form comes straight after the offer, and the cities after the form (one tap from the hero lands on it) */
@media (min-width: 900px) {
  .join__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "intro panel" "cities panel"; grid-template-rows: auto 1fr; align-items: start; row-gap: 2.25rem; }
  .join--artists .join__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "panel"; grid-template-rows: auto; }
  .join__intro { grid-area: intro; }
  .join__panel { grid-area: panel; }
  .join__cities { grid-area: cities; }
}

/* ---------- the bottom bar, on every page (the build copies the home page's onto the others): a bar at the foot of the
   screen with the Join, on the home page once the hero is half gone, on the others from the first screen (once site.js
   knows no form is there: bar-ready), and gone again while a form to join or apply is on screen (site.js: hero-gone,
   at-join on <html>); on a phone's home page once three quarters of the hero are scrolled by (hero-past). It holds the
   store badges and an email field that opens the full form, so its consents are still the form's. ---------- */
.joinbar {
  position: fixed; inset: auto 0 0; z-index: 35; padding-block: .75rem calc(.75rem + env(safe-area-inset-bottom, 0px));
  background: var(--surface); border-top: 1px solid var(--line);
  transform: translateY(110%); visibility: hidden; transition: transform .3s var(--ease), visibility 0s linear .3s;
}
:root:is(.bar-ready, :not(.js)):not(.at-join) body:not(.page-home) .joinbar { transform: none; visibility: visible; transition: transform .3s var(--ease); }
@media (min-width: 640px) { :root.hero-gone:not(.at-join) .joinbar { transform: none; visibility: visible; transition: transform .3s var(--ease); } }
/* (a phone's home page: once three quarters of the hero are scrolled by, so it never sits under the hero's own store
   badges (2026-10-28); without JS from the first screen) */
@media (max-width: 639.98px) { :root:is(.hero-past, :not(.js)):not(.at-join) .joinbar { transform: none; visibility: visible; transition: transform .3s var(--ease); } }
:root.editing .joinbar { display: none !important; }
/* her logo options (data-logo; the wordmark is the default above): the bold R, the favicon's drawing (scripts/logo-bold-r.mjs),
   and the script R (Logo lab, #258); each a one-colour mask, so both modes paint it in her logo colour. Each file's name
   is in scripts/build.mjs's LOGO too (the preload). */
:root[data-logo="bold-r"] { --logo-img: url(/brand/the-reserve-bold-r.webp); --logo-ratio: 674 / 893; }
:root[data-logo="script-r"] { --logo-img: url(/brand/the-reserve-script-r.svg); --logo-ratio: 1124 / 924; }
/* L1, her bold R beside THE RESERVE (Logo lab's header cut, judged at 32 px tall: brand-assets/reserve-logo-options-
   2026-10-25/bold-r-caps/): a header logo only, as tall as its cut wants; the hero and the footer keep the wordmark */
:root[data-logo="bold-r-caps"] .logo--bar { --logo-img: url(/brand/the-reserve-bold-r-caps.svg); --logo-ratio: 3766.78 / 705.92; height: 2rem; width: calc(2rem * var(--logo-ratio)); }
@media (max-width: 359px) { :root[data-logo="bold-r-caps"] .logo--bar { height: 1.75rem; width: calc(1.75rem * var(--logo-ratio)); } } /* the smallest phone: clear of its margin at a larger text size too */
/* room below the footer as tall as the bar, so its last line is read and tapped above it: on body, as the review bar's
   room (below), and the larger of the two */
body:has(.joinbar) { padding-bottom: max(5rem, var(--review-room, 0px) - 2.5rem); }
/* the badges and the email field take two rows on a phone */
@media (max-width: 639.98px) { body:has(.joinbar) { padding-bottom: max(10rem, var(--review-room, 0px) - 2.5rem); } }
.joinbar__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem 1.25rem; }
.joinbar__apps { display: flex; }
.joinbar__apps .stores__soon { font-size: .875rem; }
/* the email field on every page (her pick; options data-bar-action and data-bar-info until 2026-10-27), which opens
   the home page's form with the address in it (site.js; from another page through this tab's sessionStorage); the
   button only without JS, off the home page */
.joinbar__email { display: flex; gap: .5rem; width: min(100%, 30rem); }
.joinbar__btn { display: none; }
:root:not(.js) body:not(.page-home) .joinbar__email { display: none; } /* (another page's email field goes to the home page's form: site.js) */
:root:not(.js) body:not(.page-home) .joinbar__btn { display: inline-flex; }
.joinbar__email input { flex: 1; min-width: 0; min-height: 44px; padding: .55rem .8rem; border: 1px solid var(--field-line); border-radius: var(--r-input); background: var(--ground); color: var(--ink); font: inherit; font-size: 1rem; }
.joinbar__email input::placeholder { color: var(--ink-3); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .joinbar { transition: none !important; } }

/* ---------- forms ---------- */
.form__title { margin-bottom: 1.5rem; font-size: 1.5rem; }
.form__lede { margin: -1rem 0 1.5rem; color: var(--ink-2); }
.form__err { margin-top: .9rem; font-size: .9375rem; font-weight: 500; color: var(--danger); }
.btn[aria-busy="true"] { cursor: progress; opacity: .75; }
.field { display: grid; gap: .45rem; min-width: 0; margin: 0 0 1.15rem; padding: 0; border: 0; }
/* a field the page brings into view (site.js point) stops below the sticky header, its message above a phone's keyboard */
.field, .check-field { scroll-margin-top: 1rem; } /* on top of html's scroll-padding-top, the header's height */
.field > label, .field > legend { padding: 0; font-size: .9375rem; font-weight: 600; color: var(--ink); }
.field legend { margin-bottom: .45rem; }
.opt { font-weight: 400; color: var(--ink-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: .75rem .9rem; border: 1px solid var(--field-line); border-radius: var(--r-input);
  background: var(--ground); color: var(--ink); font: inherit; font-size: 1rem;
}
.field textarea { min-height: 7rem; resize: vertical; }
/* an example in each field (H10): lighter than her words, still 4.5:1 on the field */
.field ::placeholder { color: var(--ink-3); opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }
.field__err { font-size: .875rem; font-weight: 500; color: var(--danger); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: .55rem 1.05rem; border: 1px solid var(--field-line); border-radius: var(--r-chip); background: var(--ground); font-size: .9375rem; font-weight: 600; cursor: pointer; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip:has(input:checked) { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
fieldset[data-invalid] .chip { border-color: var(--danger); }
fieldset[data-invalid]:has(.chip--soon input:checked) .chip:not(:has(input:checked)) { border-color: var(--field-line); } /* a city coming soon chosen: only it is marked */
.needs-elsewhere { display: none; }
form:has(select[name="lives_in"] option[value="Elsewhere"]:checked) .needs-elsewhere { display: grid; }
/* the artist application to her mock (2026-10-27): each step's number above its title, a hint under a legend, the next
   step said under Continue, the line under the form; and the form straight under the page's intro (her note N6) */
.form__step { margin-bottom: .35rem; font-size: .875rem; color: var(--ink-2); }
.field__hint { margin: -.2rem 0 .35rem; font-size: .875rem; color: var(--ink-2); }
.form__fine.form__then { margin-top: .75rem; }
.join__after { color: var(--ink-2); max-width: 60rem; }
.page-artists .page-head { border-bottom: 0; padding-bottom: 0; }
/* (with the application joined to it, her look: the head keeps the space below it that a join leaves to the upper
   one, as the application's own top space goes) */
.page-artists .page-head:has(+ .s-join-up) { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.page-artists .join--artists { padding-top: clamp(2.5rem, 6vw, 4rem); background: none; }
.join--artists .join__grid { gap: 1.75rem; }
/* the application's heading one step below the page's title (her 2xl on the title is the h2 size) */
.join--artists .join__intro > h2 { font-size: clamp(1.625rem, 1.184rem + 1.81vw, 2.8125rem); }
@media (min-width: 760px) { .join--artists .form__next { justify-self: start; width: auto; min-width: 16rem; } }
/* a city not open yet: kept in the list and said in words; chosen, the page says only Miami can join and sends nothing (the API refuses it too) */
.chip--soon { border-style: dashed; background: transparent; color: var(--ink-2); font-weight: 400; } /* chosen, it says only Miami can join (site.js) */
.chip__soon { margin-left: .4rem; font-size: .8125rem; }
/* a field the form fills itself (the waitlist's city, Miami only): a line, not a choice */
.field--fixed { display: block; padding-bottom: .75rem; border-bottom: 1px solid var(--line); font-size: 1rem; color: var(--ink-2); }
.field--fixed .field__name { font-size: .9375rem; font-weight: 600; color: var(--ink); }
/* first and last name side by side where both fit */
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); column-gap: 1rem; }
/* a file: the field's own frame, its button in the site's outline style */
.field input[type="file"] { padding: .55rem .6rem; font-size: .9375rem; cursor: pointer; }
.field input[type="file"]::file-selector-button {
  margin-right: .8rem; padding: .45rem .9rem; border: 1px solid var(--field-line); border-radius: var(--r-btn);
  background: var(--ground); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer;
}
/* the consent boxes: a real checkbox beside its words (the whole line is the target), each with its own error */
.checks { display: grid; gap: .9rem; margin: .35rem 0 1.25rem; }
.check-field { display: grid; gap: .35rem; }
.check { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .7rem; align-items: start; min-height: 44px; font-size: .875rem; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin: .1rem 0 0; accent-color: var(--btn); cursor: pointer; }
.check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.check input[aria-invalid="true"] { outline: 2px solid var(--danger); outline-offset: 2px; }
.check a { color: var(--ink); }
.check-field .field__err { margin-left: 1.95rem; }
/* the bot check: nothing to see unless it needs the visitor (site.js, interaction-only) */
.form__check:has(iframe) { margin-bottom: 1rem; }
.form__status { margin-top: .9rem; font-size: .9375rem; color: var(--ink-2); }
.form__fine { margin-top: .9rem; font-size: .875rem; color: var(--ink-2); }
/* the waitlist by city (2026-10-27): Other asks for the city; the line above the button for a city not opening first;
   its one question after joining, in the thank-you */
.needs-other { display: none; }
form:has(select[name="city"] option[value="Other"]:checked) .needs-other { display: grid; }
.form__where { margin: .25rem 0 1rem; font-size: .9375rem; color: var(--ink); text-wrap: pretty; }
.ask { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.ask__send { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.form-done .ask__send .link-btn { margin-top: 0; }
.ask__done { margin-top: 1.25rem; color: var(--ink-2); }
.ask__done:focus { outline: none; }
.form-done__title { margin-bottom: .75rem; font-size: 1.75rem; }
.form-done__title:focus { outline: none; }
.form-done > p:not(.form-done__title) { color: var(--ink-2); }
.form-done .link-btn { margin-top: 1rem; }
/* the application's step 2 (Anything else), under step 1's thank-you; sent, it gives way to a line of its own */
.form--extras { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.form-done .form-done { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.form-done .form-done .form-done__title { margin: 0; font-size: 1.25rem; }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; gap: 2rem; }
.faq__list { border-top: 1px solid var(--line-strong); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; min-height: 44px; padding: 1.2rem 0; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 1.25rem; letter-spacing: 0; line-height: 1.3; }
.faq summary::after {
  content: ""; width: 14px; height: 14px; flex: none; color: var(--ink);
  background: linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { padding-bottom: 1.4rem; max-width: 40rem; color: var(--ink-2); }
@media (min-width: 900px) { .faq__grid { grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); } }

/* ---------- For artists ---------- */
.offer__list { display: grid; gap: 2rem 2.5rem; }
.offer__item { padding-top: 1.25rem; border-top: 1px solid var(--line-strong); }
.offer__item h3 { margin-bottom: .5rem; }
.offer__item p { color: var(--ink-2); }
@media (min-width: 760px) { .offer__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fit { background: var(--surface); }
.fit__grid { display: grid; gap: 2rem; }
.fit__list { display: grid; gap: .9rem; align-content: start; }
.fit__list li { display: flex; gap: .8rem; align-items: baseline; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.fit__list li::before { content: ""; width: 6px; height: 6px; background: var(--accent); transform: translateY(-.15em) rotate(45deg); flex: none; }
@media (min-width: 900px) { .fit__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fit__grid .section__head { margin-bottom: 0; } }

/* ---------- legal stubs and 404 ---------- */
.legal__inner { max-width: 42rem; }
.legal h1 { margin-bottom: 1.25rem; font-size: clamp(2.6rem, 1.6rem + 4vw, 4.375rem); }
.legal p { max-width: 31rem; color: var(--ink-2); }
.legal p + p { margin-top: 2rem; }
.wip { display: inline-block; margin-bottom: 1.25rem; padding: .3rem .75rem; border: 1px dashed var(--line-strong); border-radius: 999px; font-size: .875rem; color: var(--ink); }
/* the privacy policy and the terms: long text at a reading measure, with headings and the site's diamond bullets */
.legal--doc .legal__inner { max-width: 40rem; }
.legal__date { margin-bottom: 1rem; font-size: .9375rem; color: var(--ink-2); }
.legal--doc .legal__lede { font-size: 1.125rem; }
.legal--doc :is(p, ul) { max-width: 32rem; }
.legal--doc p + p { margin-top: 1rem; }
.legal--doc h2 { margin: 2.75rem 0 .9rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem); }
.legal--doc h3 { margin: 1.5rem 0 .6rem; font-family: var(--f-body); font-size: 1rem; font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.legal--doc ul { display: grid; gap: .55rem; margin: .5rem 0 1rem; }
.legal--doc li { position: relative; padding-left: 1.25rem; color: var(--ink-2); }
.legal--doc li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); }
.legal--doc a { color: var(--ink); }

/* ---------- footer ---------- */
.foot { padding-block: 3.5rem 2.5rem; border-top: 1px solid var(--line); }
.foot__grid { display: grid; gap: 2rem; }
.foot__line { margin-top: .75rem; color: var(--ink-2); }
.foot__nav ul { display: grid; gap: .5rem; }
.foot__nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--ink-2); text-decoration: none; }
.foot__nav a:hover { color: var(--ink); text-decoration: underline; }
.foot__small { font-size: .875rem; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 1.5rem; }
@media (min-width: 760px) {
  .foot__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .foot__nav ul { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: clamp(1.25rem, 3vw, 2.5rem); }
  .foot__small { grid-column: 1 / -1; }
}



/* ---------- review notes (js/notes.js; only for a browser that opened the review link) ---------- */
.notes, .notes-composer, .edit-tools, .edit-gone { --n-bg: #fff; --n-ink: #1f1f1f; --n-muted: #555; --n-line: rgba(0, 0, 0, .14);
  --n-pill: #fde68a; --n-pill-ink: #3d3200; --n-err: #b42318; --n-off: #f0f0f0;
  font: 400 .875rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--n-ink); }
:root[data-theme="dark"] :is(.notes, .notes-composer, .edit-tools, .edit-gone) { --n-bg: #262626; --n-ink: #f2f2f2; --n-muted: #bdbdbd; --n-line: rgba(255, 255, 255, .18); --n-err: #ffa194; --n-off: #363636; }
.notes { position: fixed; left: 1rem; bottom: 1rem; z-index: 61; }
.notes__bar { display: flex; gap: .4rem; }
.notes__toggle, .notes__add { min-height: 44px; padding: .55rem 1rem; border: 1px solid #c9a227; border-radius: 999px; background: var(--n-pill); color: var(--n-pill-ink); font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); }
.notes__add[aria-pressed="true"] { background: var(--n-pill-ink); color: var(--n-pill); }
.notes__count { display: inline-grid; place-items: center; min-width: 1.5em; margin-left: .25rem; padding: 0 .35em; border-radius: 999px; background: var(--n-pill-ink); color: var(--n-pill); font-size: .75rem; }
.notes__panel { position: absolute; left: 0; bottom: calc(100% + .6rem); width: min(23rem, calc(100vw - 2rem)); max-height: min(72vh, 34rem); overflow: auto; padding: .9rem 1rem .75rem; border-radius: 14px; background: var(--n-bg); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .5); }
.notes__head { display: flex; justify-content: space-between; align-items: center; }
.notes__title { font-weight: 700; font-size: 1rem; }
.notes__close, .edit-gone__close { width: 36px; height: 36px; border: 0; border-radius: 999px; background: none; color: var(--n-ink); font-size: 1.4rem; cursor: pointer; }
.notes__hint { margin: .15rem 0 .7rem; color: var(--n-muted); font-size: .8125rem; }
.notes__tabs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .6rem; }
.notes__tab { min-height: 36px; padding: .3rem .7rem; border: 1px solid var(--n-line); border-radius: 999px; background: none; color: var(--n-ink); font: inherit; cursor: pointer; }
.notes__tab[aria-pressed="true"] { background: var(--n-pill); border-color: #c9a227; color: var(--n-pill-ink); font-weight: 600; }
.notes__list { margin: 0; padding: 0; list-style: none; }
.notes__item { padding: .7rem 0; border-top: 1px solid var(--n-line); }
.notes__item:focus { outline: 2px solid #2f55c9; outline-offset: 2px; }
.notes__where { font-size: .75rem; font-weight: 600; color: var(--n-muted); }
.notes__body { margin-top: .2rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.notes__quote { margin-top: .3rem; font-size: .8125rem; font-style: italic; color: var(--n-muted); overflow-wrap: anywhere; }
.notes__meta { margin-top: .3rem; font-size: .75rem; color: var(--n-muted); }
.notes__actions { display: flex; flex-wrap: wrap; gap: .1rem .9rem; margin-top: .25rem; }
.notes__link, .edit-line__btn { display: inline-flex; align-items: center; min-height: 32px; padding: 0; border: 0; background: none; color: var(--n-ink); font: inherit; font-size: .8125rem; text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.notes__empty { padding: .7rem 0; color: var(--n-muted); border-top: 1px solid var(--n-line); }
.notes__status { min-height: 1.2em; font-size: .8125rem; color: var(--n-muted); }
.notes__foot { display: flex; justify-content: space-between; gap: 1rem; padding-top: .4rem; border-top: 1px solid var(--n-line); }
.notes-pins { position: absolute; top: 0; left: 0; z-index: 59; }
.notes-pin { position: absolute; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 2px solid #3d3200; border-radius: 50% 50% 50% 4px; background: #fde68a; color: #3d3200; font: 700 .8125rem/1 system-ui, sans-serif; cursor: pointer; transform: translate(-4px, -26px); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }
.notes-pin.is-lit { outline: 4px solid rgba(253, 230, 138, .9); outline-offset: 3px; }
[data-note-anchor] > .notes-pin { z-index: 2; } /* a sticky block's own pins sit above its contents */
.notes-composer { position: fixed; z-index: 62; display: grid; gap: .35rem; width: min(20rem, calc(100vw - 1rem)); padding: .9rem; border-radius: 12px; background: var(--n-bg); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55); }
.notes-composer label { font-weight: 600; font-size: .8125rem; }
.notes-composer input, .notes-composer textarea, .edit-tools__form input:not([type="radio"]) { width: 100%; min-height: 40px; padding: .5rem .6rem; border: 1px solid var(--n-line); border-radius: 8px; background: var(--n-bg); color: var(--n-ink); font: inherit; }
/* iPhone Safari zooms the page into a field whose text is under 16 px when she taps it, and stays zoomed: the docked
   toolbar's Delete was then off the screen (iOS 27 Simulator, 2026-10-22) */
@media (pointer: coarse) { .notes-composer input, .notes-composer textarea, .edit-tools__form input:not([type="radio"]) { font-size: max(16px, 1em); } }
.notes-composer__actions { display: flex; align-items: center; gap: 1rem; margin-top: .3rem; }
.notes__save, .edit-panel__btn { min-height: 40px; padding: .45rem 1rem; border: 0; border-radius: 999px; background: var(--n-pill-ink); color: var(--n-pill); font: inherit; font-weight: 600; cursor: pointer; }
.edit-panel__btn { min-height: 44px; } /* edit mode's (the notice's Got it, the offer's Put it back, the forms'): 44 px at every width */
.notes__err { min-height: 1.1em; font-size: .8125rem; color: var(--n-err); }
:root.notes-adding, :root.notes-adding * { cursor: crosshair !important; }
:root.notes-adding [data-notes-ui], :root.notes-adding [data-notes-ui] * { cursor: pointer !important; }
@media (max-width: 520px) { .notes__add { padding-inline: .8rem; } }

/* ---------- her edit mode (js/edit.js; only for a browser that opened the review link) ----------
   The review layer's own chrome (the Notes tokens and panels), outside every direction's design, like the pins. A
   selected piece wears the pins' two colours as a ring, olive then yellow, so it shows on any ground in any look. */
:root.editing .notes__add:not(.notes__edit), :root.editing .notes-pin { display: none; } /* Notes and Edit never at once */
.notes__edit:disabled { opacity: .55; cursor: default; } /* in its place at once, working once her changes load */
/* the bar is fixed over the foot of the page: the page gets room below the footer as tall as it (edit.js measures
   --review-room), so the footer's last line is read and tapped above it. The room goes on body, not inside .foot: .foot
   is a notes anchor, and pins are placed as a % of their anchor's box, so growing it would move every footer pin. Only
   the bar's own pieces take taps, not the gaps between them. */
body { padding-bottom: max(0px, var(--review-room, 0px) - 2.5rem); }
/* not while a note is being placed: a tap in a gap between the pills would then pin a note on whatever is under the bar */
:root:not(.notes-adding) :is(.notes, .notes__bar) { pointer-events: none; }
:root:not(.notes-adding) :is(.notes > :not(.notes__bar), .notes__bar > *) { pointer-events: auto; }
/* a phone: the review pills wrap upwards into two rows, the page's lower right corner left clear (the demo button sat
   there until 2026-10-23; the phone edit scenarios are staged on this height) */
@media (max-width: 520px) { .notes__bar { flex-wrap: wrap-reverse; row-gap: .4rem; max-width: calc(100vw - 12rem); } }
.edit-line { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .6rem; width: max-content; max-width: min(23rem, calc(100vw - 2rem));
  margin: 0 0 .4rem; padding: .3rem .9rem; border-radius: 999px; background: var(--n-bg); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); font-size: .8125rem; }
.edit-line__btn { min-height: 28px; }
.edit-line__text { font-weight: 600; }
.edit-line__text:empty, .edit-line__state:empty { display: none; }
.edit-line__state, .edit-tools__state { color: var(--n-muted); }
:is(.edit-line__state, .edit-tools__state).is-bad { color: var(--n-err); }
.edit-panel { display: grid; gap: .6rem; }
.edit-panel__text { color: var(--n-ink); }
.edit-panel__btn { justify-self: start; } /* its own class: the notes scenarios click the first .notes__save */
/* The toolbar is docked under the sticky header, across the content's width, the whole time she is in Edit (edit.js
   dock: 8 px under the header, or under its open narrow menu), on every width: it never follows the selection, so a
   tap on the page, a Move or Bigger never brings one of its controls under her finger. Like the header, it takes every
   tap on it, and the page scrolls under it: html's scroll-padding counts it (--edit-room, its foot, which edit.js
   measures), so a section brought on screen lands clear of it. */
.edit-tools { position: fixed; z-index: 62; top: calc(4rem + 1px + .5rem); left: 0; right: 0; width: min(100% - 1rem, 74rem); margin-inline: auto;
  display: grid; gap: .25rem; padding: .4rem .7rem; border-radius: 12px; background: var(--n-bg); box-shadow: 0 18px 44px -16px rgba(0, 0, 0, .55); }
@media (min-width: 600px) { .edit-tools { width: min(100% - 2.5rem, 74rem); } } /* the content's width (.wrap) */
:root.editing { scroll-padding-top: calc(var(--edit-room, 9rem) + .75rem); }
/* The page gets room at its top as tall as the toolbar and the gap above it (--edit-top, measured by edit.js fitTools,
   as --review-room is), so at the top of the page its first pieces start under the toolbar's foot and take a tap: a
   page cannot scroll above its top, and under the toolbar a heading could never be selected. The room goes on main,
   outside every notes anchor (pins are a % of their anchor's box) and under the sticky header: on body it would sit
   above the header, which would then start lower and slide up as she scrolls. */
:root.editing main { padding-top: var(--edit-top, 0px); }
/* A panel and the toolbar never at once (edit.js only): while Changes, the first-visit notice or the offer of unsaved
   text is open, the toolbar keeps its place unseen and takes no tap or focus, and the panel has its full height, up to
   under the header (--edit-head): under the docked toolbar on a short screen it was 28 px, every control scrolled out */
.edit-tools.is-away { visibility: hidden; }
:root.editing .notes__panel { max-height: min(72vh, 34rem, var(--panel-room, 100dvh - var(--edit-head, 4rem) - var(--review-room, 6rem) - .5rem)); }
/* where the toolbar would cover the review bar (under the open narrow menu on a short screen), the bar steps aside
   until it no longer does (edit.js fitTools): a tap where a pill was lands on the control she sees there */
.notes.is-aside { visibility: hidden; }
/* Its crumb and its state share one line that never grows, whatever is selected and whatever it says: a long crumb
   ends in …, and so does a long state, but for the words it quotes, which give way first ("Removed “Hair, mak…”.
   Saving…": edit.js say). So no state moves the toolbar's foot, and the row under the line never moves. */
.edit-tools__top { display: flex; align-items: baseline; gap: .75rem; height: 1.25rem; overflow: hidden; }
.edit-tools__what { flex: 1 1 8em; min-width: 3em; overflow: hidden; font-size: .75rem; font-weight: 600; color: var(--n-muted); white-space: nowrap; text-overflow: ellipsis; }
.edit-tools__state { display: flex; flex: 0 1 auto; min-width: 0; font-size: .8125rem; }
.edit-tools__state > span { flex: 0 0 auto; min-width: 0; overflow: hidden; white-space: pre; text-overflow: ellipsis; }
.edit-tools__state > span:only-child { flex-shrink: 1; } /* a state with no quote ends in … */
.edit-tools__state > .edit-tools__quote { flex-shrink: 1000; min-width: 2.5em; }
/* Its controls in fixed slots: Edit text · Add ▾ · Bigger ▸, then Move up · Move down (one line on a wide screen, a
   line each on a phone), and Delete alone in a column of its own at the row's far end, its foot on the row's last
   line: at least 16 px from any other control, and above or below none at any width. Edit text and Done share one
   slot, as Delete and Undo do, each as wide as the wider of the two: the one not shown keeps its room, hidden, so her
   typing ending or a removal never moves a control. The controls under the row (Add's choices, the question's) keep out
   of Delete's column (7rem). */
.edit-tools__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 1.125rem; }
.edit-tools__sets, .edit-tools__set { display: flex; flex-wrap: wrap; gap: .3rem .4rem; }
.edit-tools__slot { display: inline-grid; }
.edit-tools__slot > * { grid-area: 1 / 1; }
.edit-tools__slot > [hidden] { display: inline-block !important; visibility: hidden; }
@media (max-width: 599px) { .edit-tools__set { flex-basis: 100%; } }
.edit-tools__btn { min-height: 40px; padding: .4rem 1rem; border: 1px solid #c9a227; border-radius: 999px; background: var(--n-pill); color: var(--n-pill-ink); font: inherit; font-weight: 600; cursor: pointer; }
.edit-tools__btn[aria-expanded="true"] { background: var(--n-pill-ink); color: var(--n-pill); }
/* a control that does not apply (or nothing is selected): kept in its slot (edit.js paintTools), off. Drawn flat, with
   no outline, on a faint grey in the muted ink, so it reads as off beside a control that is on (a yellow pill with its
   gold edge; outlined on the toolbar's ground, an off one read as a quieter button that did nothing when pressed), the
   same size, its label at over 3:1 in every look and theme (n-muted on n-off: tests/contrast-review.json) and its
   focus ring drawn in full */
.edit-tools__btn[aria-disabled="true"] { border-color: transparent; background: var(--n-off); color: var(--n-muted); cursor: default; }
.edit-tools__menu, .edit-tools__ask { padding-inline-end: 7rem; }
/* what Add offers, the question when a text is emptied, a button's label and address: the panels' own quieter pills */
.edit-tools__menu, .edit-tools__ask { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.edit-tools__menu, .edit-tools__form { padding-top: .45rem; border-top: 1px solid var(--n-line); }
.edit-tools__q { flex-basis: 100%; font-weight: 600; }
.edit-tools__opt, .edit-tools__dest { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: .35rem .9rem;
  border: 1px solid var(--n-line); border-radius: 999px; background: var(--n-bg); color: var(--n-ink); font: inherit; cursor: pointer; }
.edit-tools__form { display: grid; gap: .35rem; }
.edit-tools__form > label, .edit-tools__dests legend { font-weight: 600; font-size: .8125rem; }
.edit-tools__form input:not([type="radio"]) { min-height: 44px; }
.edit-tools__dests { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; border: 0; }
.edit-tools__dests legend { margin-bottom: .25rem; padding: 0; }
.edit-tools__dest input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.edit-tools__dest:has(input:checked) { border-color: #c9a227; background: var(--n-pill); color: var(--n-pill-ink); font-weight: 600; }
/* the page's own focus colour, set per look and theme as the toolbar's ground is: 6.4:1 or more on it, light or dark
   (the fixed #2f55c9 was 2.35:1 on the dark toolbar) */
.edit-tools__dest:has(input:focus-visible), .edit-tools__opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.edit-tools__err { font-size: .8125rem; color: var(--n-err); }
.edit-tools__err:empty { display: none; }
/* her photo's form (edit.js): the choice, its preview and its state on one line, then her words for it. The file input
   lies over its pill, unseen, so a tap anywhere on "Choose a photo" is a tap on it (a phone's own picker opens) */
.edit-tools__pickrow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; }
.edit-tools__thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; background: var(--n-off); }
.edit-tools__form .edit-tools__pick input { position: absolute; inset: 0; width: 100%; min-height: 0; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.edit-tools__pick:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.edit-tools__note { font-size: .8125rem; color: var(--n-muted); }
.edit-tools__note:empty { display: none; }
.edit-tools__meter { width: 100%; height: 6px; accent-color: #c9a227; }
/* while her photo uploads (edit.js uploading) its choice, her words and Add photo are off, drawn as the toolbar's off
   controls are (n-muted on n-off: tests/contrast-review.json); Cancel stays on */
.edit-tools__pick:has(input:disabled), .edit-tools__photo [data-act="photo-add"][aria-disabled="true"] { border-color: transparent; background: var(--n-off); color: var(--n-muted); cursor: default; }
.edit-tools__form .edit-tools__pick input:disabled { cursor: default; }
.edit-tools__form input[readonly] { background: var(--n-off); color: var(--n-muted); }
/* a phone or a tablet (the narrow menu's widths, touch): every control at least 44 px each way (the button form's
   Cancel, a short link, was 42 px wide) */
@media (max-width: 999px) {
  .edit-tools :is(.edit-tools__btn, .edit-tools__opt, .edit-tools__dest, .edit-tools__form button) { min-width: 44px; min-height: 44px; justify-content: center; }
  /* Changes is how a phone undoes a delete, a move or an add (it has no Cmd+Z): its controls are 44 px too, a phone on
     its side included (601 to 999 px wide, where they were 36 px) */
  #edit-changes :is(.notes__link, .notes__tab) { min-width: 44px; min-height: 44px; justify-content: center; }
  #edit-changes .notes__close { width: 44px; height: 44px; }
}
@media (max-width: 600px) {
  .edit-tools__btn { padding-inline: .7rem; }
}
/* the smallest phones: the first set fits one line beside Delete's column (16 px clear), so the toolbar is two lines of
   controls under its crumb and state, under a quarter of a 568 px screen (it was three, half the screen with the
   review bar's pills) */
@media (max-width: 359px) {
  .edit-tools { padding-inline: .5rem; }
  .edit-tools__row { column-gap: 1rem; }
  .edit-tools__btn { padding-inline: .5rem; font-size: .8125rem; }
}
.edit-gone { position: fixed; left: 1rem; bottom: 1rem; z-index: 61; display: flex; align-items: flex-start; gap: .25rem; max-width: min(23rem, calc(100vw - 2rem));
  padding: .6rem 0 .6rem .9rem; border-radius: 12px; background: var(--n-bg); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .45); }
.edit-gone__close { flex: none; width: 44px; height: 44px; margin-block: -.6rem; }
/* a phone: the line's buttons are as tall as the pills (44 px), so a tap a little off one never lands on the pill
   under it, and its padding stays, so a line that wraps keeps its words off its rounded edges */
@media (max-width: 520px) {
  .edit-line { min-height: 44px; }
  .edit-line__btn { min-height: 44px; }
}
/* the page in Edit: wording shows it can be typed over; a selected piece wears the ring; her own line breaks show */
:root.editing :is(.top, main, .foot) [data-e]:not(:has(> :not(br))) { cursor: text; }
:root.editing :is(.top, main, .foot) [data-e]:not(.edit-selected):not(:has(> :not(br))):hover { outline: 1px dashed currentColor; outline-offset: 2px; }
/* a selected piece still answers a hover (its cursor, as it was): Chrome's touch adjustment moves a tap to the nearest
   element that answers a tap or a hover, and once the hover ring left the selected piece a second tap near the docked
   toolbar's foot was pulled onto the toolbar's ground (the selected piece answered nothing; inferred, not read in
   Chrome's source) */
:root.editing :is(.top, main, .foot) [data-e].edit-selected:not(:has(> :not(br))):hover { cursor: text; }
/* a photo she added is a piece of its own: a tap selects it, a second its description */
:root.editing :is(.top, main, .foot) figure.photo[data-e] { cursor: pointer; }
:root.editing :is(.top, main, .foot) figure.photo[data-e]:not(.edit-selected):hover { outline: 1px dashed currentColor; outline-offset: 2px; }
:root.editing :is(.top, main, .foot) figure.photo[data-e].edit-selected:hover { cursor: pointer; } /* and answers a hover selected (as above) */
/* its dark inner ring is what shows the pale ring on a pale page (the pale one alone was 1.07:1 on a pale ground), so
   it outranks any shadow a piece has: a selected piece always has an id and only shows in Edit (0,4,0) */
.edit-selected { border-radius: 2px; }
:root.editing [data-e].edit-selected { outline: 3px solid #fde68a; outline-offset: 2px; box-shadow: 0 0 0 2px #3d3200; }
/* a section spans the screen, so its ring is drawn inside it: outside, its sides fell off the screen and the block
   before it (the hero, a positioned box) painted over its top edge */
:root.editing section[data-e].edit-selected { outline-offset: -5px; box-shadow: inset 0 0 0 2px #3d3200; }
.edit-lines { white-space: pre-line; }
/* the app tour's steps are their buttons' targets, whole (.step__btn::after), but not in Edit, where the tour does not
   advance: a step's description is a piece of its own there, to select and reword */
:root.editing .step__btn::after { content: none; }
/* a text, heading or button she added (an a-… id, only on the review link) is spaced from what it follows, as the site's
   own copy is; the pieces of a section or a copy she added keep the spacing of the block they are in. Once applied in
   code it is class="added" (docs/edits-applied.md), so the page keeps the look she approved */
:is(p, h3, .btn):is([data-e^="a-"], .added):not([data-e^="a-"] *) { margin-top: .9rem; }
.btn:is([data-e^="a-"], .added):not([data-e^="a-"] *) { margin-right: .5rem; }
/* a photo she added (edit-core.js MAKE.photo), in the site's own terms, so it looks right in both looks and themes and
   keeps this shape once applied in code: at most the copy's width, its own shape (its width and height attributes keep
   its room before it loads, so nothing below it jumps), the look's corners; its caption in the ink of the words around
   it, a step smaller */
.photo { max-width: 40rem; margin: 1.25rem 0 0; }
.photo img { display: block; max-width: 100%; height: auto; border-radius: var(--r-card); }
.photo figcaption { margin-top: .5rem; font-size: .875rem; }
@media (forced-colors: active) { :root.editing [data-e].edit-selected { outline-color: Highlight; box-shadow: none; } }

/* ---------- motion: her logo signs itself on load (the write-on's fallback: a phone, another logo) ----------
   The pen is a second mask layer: a band with a soft, slanted leading edge that widens left to right, kept only where
   it meets the logo (intersect), from 0.4 s to 2.8 s; the copy below settles in from 1.6 s, as the name is finished.
   Where mask compositing is missing, or under reduced motion, the logo and copy simply show. The write-on
   (src/css/motion-write.css) is the site's motion: where it does not play (a phone, a logo other than the wordmark in
   the hero), the logo signs in as here. Its SVG in the hero is hidden but for it. */
.hero-write { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .hero__art { animation: settle 1.6s var(--ease) both; }
  @supports (mask-composite: intersect) {
    .hero__copy { animation: drift 1s 1.6s var(--ease) both; }
    .logo--hero {
      -webkit-mask: none;
      /* (the logo layer at 100% 100%, not contain: the box has the logo's own ratio, and Safari leaves a contained
         layer a hair short of a fractional box, where intersect let the pen's band show as a line down each side) */
      mask: var(--logo-img) center / 100% 100% no-repeat,
        linear-gradient(100deg, #000 calc(100% - 5rem), transparent) left / 0% 100% no-repeat;
      mask-composite: intersect, add; /* the band's own add: Safari 15.4-15.x composites the bottom layer with nothing */
      animation: sign 2.4s .4s cubic-bezier(.4, 0, .5, 1) both;
    }
  }
}
@keyframes sign { from { mask-size: 100% 100%, 0% 100%; } to { mask-size: 100% 100%, 125% 100%; } }
@keyframes drift { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes settle { from { opacity: .4; transform: scale(1.07); } to { opacity: 1; transform: none; } }

/* ---------- the home page's hero: it fills the screen under the header (svh, not dvh: on an iPhone dvh moves with
   Safari's toolbar), its padding and logo smaller on a short screen. Her logo and the line under it fill most of it
  ; the rest scales with them. ---------- */
.page-home .hero { display: grid; align-content: center; min-height: calc(100svh - var(--head)); padding-block: clamp(1.5rem, 5svh, 4rem); }
/* on a phone the bottom bar comes up only once most of the hero is scrolled by (site.css: the bottom bar), so the hero
   fills the screen under the header, as on a laptop, with less padding */
@media (max-width: 639.98px) { .page-home .hero { padding-block: clamp(1rem, 3svh, 2rem); } }
.page-home .hero__inner { min-height: 0; gap: clamp(1.5rem, 4svh, 2.75rem); }
/* (--logo-scale: her size of it, a share of this one on every screen, the hero's width included: data-logo-size,
   scripts/look.mjs; never wider than the hero) */
.page-home .logo--hero { width: min(100%, 100% * var(--logo-scale, 1), 64rem * var(--logo-scale, 1), 46svh * var(--logo-ratio) * var(--logo-scale, 1)); }
.page-home .hero__copy { max-width: 56rem; }
.page-home .hero__title { font-size: calc(clamp(2.1rem, 1.3rem + 3.6vw, 4.6rem) * var(--logo-scale, 1)); }
.page-home .hero__lede { font-size: max(.75rem, calc(min(1.6rem, max(.75rem, 3.8vw)) * var(--logo-scale, 1))); }
.page-home .hero__status { font-size: max(.75rem, calc(clamp(1rem, .9rem + .4vw, 1.25rem) * var(--logo-scale, 1))); }
/* (the wording follows her size of the logo, the store badges do not (2026-10-27, her note "20% smaller"); the
   label keeps its .75rem, the smallest it reads at, and the two lines under the title never go below it) */
/* a short laptop screen: the logo and the line come down a step, so the hero still fits under the header */
@media (max-height: 700px) and (min-width: 640px) {
  .page-home .logo--hero { width: min(100%, 100% * var(--logo-scale, 1), 64rem * var(--logo-scale, 1), 34svh * var(--logo-ratio) * var(--logo-scale, 1)); }
  .page-home .hero__title { font-size: calc(clamp(2.1rem, 1.3rem + 2.6vw, 3.6rem) * var(--logo-scale, 1)); }
  .page-home .hero__inner { gap: clamp(1rem, 3svh, 1.75rem); }
}

@media print {
  .top__menu, .top__theme { display: none !important; }
}

/* The builder's look (planning/redesign-2026-10-25/editor-design.md §1 to §3): her own palette and the type presets,
   keyed off <html>'s data-palette and data-type (src/data/look.json for visitors, her option ops on her link), and the
   rows her drag beside makes, and her edit mode's controls. The build appends it to src/css/site.css in the visitors'
   /css/site.css, then what scripts/look.mjs writes from src/js/builder.js and src/data/look.json for them (look.json's
   palette and type preset, the fonts, the styles the pages use); every other palette, preset and style is in her
   link's /css/look.css alone. Editor's file. */

/* ---------- the palettes: Atelier is site.css's own tokens, each preset's are scripts/look.mjs's; the hero's CSS silk
   (under the WebGL one, and without it) is mixed from the tokens on every palette but Atelier, whose is site.css's ---------- */
:root[data-palette]:not([data-palette="atelier"]) {
  --silk:
    radial-gradient(90% 70% at 85% 0%, color-mix(in srgb, var(--surface) 90%, transparent), transparent 60%),
    linear-gradient(118deg, transparent 28%, color-mix(in srgb, var(--surface) 70%, transparent) 40%, transparent 50%),
    linear-gradient(100deg, var(--ground) 0%, var(--surface) 34%, color-mix(in srgb, var(--ground) 92%, var(--ink)) 58%, var(--surface) 80%, var(--ground) 100%);
}

/* ---------- her own palette, "mine": the colours she sets (--mine-<slot>-<theme>), every other token mixed from them
   (or Atelier's: focus, danger) ---------- */
:root[data-palette="mine"] {
  --ground: var(--mine-ground-light); --surface: var(--mine-surface-light); --ink: var(--mine-ink-light);
  --ink-2: var(--mine-ink-2-light); --accent: var(--mine-accent-light); --btn: var(--mine-btn-light); --btn-ink: var(--mine-btn-ink-light);
}
:root[data-palette="mine"][data-theme="dark"] {
  --ground: var(--mine-ground-dark); --surface: var(--mine-surface-dark); --ink: var(--mine-ink-dark);
  --ink-2: var(--mine-ink-2-dark); --accent: var(--mine-accent-dark); --btn: var(--mine-btn-dark); --btn-ink: var(--mine-btn-ink-dark);
}
:root[data-palette="mine"], :root[data-palette="mine"][data-theme="dark"] {
  --sunk: color-mix(in srgb, var(--ground) 94%, #000000);
  --ink-3: color-mix(in srgb, var(--ink-2) 86%, var(--ground)); /* 86: each preset's colours as hers keep 4.5:1 on her bands too */
  --line: color-mix(in srgb, var(--ink) 14%, transparent); --line-strong: color-mix(in srgb, var(--ink) 34%, transparent);
  --veil: color-mix(in srgb, var(--ground) 88%, transparent);
  --logo: var(--ink);
  --silk-1: color-mix(in srgb, var(--ground) 82%, var(--ink)); --silk-2: var(--ground); --silk-3: var(--surface);
  --silk-4: color-mix(in srgb, var(--surface) 30%, #000); /* the glint: a soft grey, as Atelier's */
}
/* in dark the silk's base sits below the ground (mixing in her light ink would lift the shadows above the folds) */
:root[data-palette="mine"][data-theme="dark"] { --silk-1: color-mix(in srgb, var(--ground) 60%, #000); }

/* ---------- the type presets (data-type): Atelier is site.css's own fonts (Bodoni Moda, Instrument Sans). Each other
   preset's two faces are scripts/look.mjs's (src/js/builder.js TYPES and FAMILIES, each face drawn as tall as the live
   look's: size-adjust), so site.css's sizes hold; here, what Research's presets set apart from that
   (planning/redesign-2026-10-25/research/type-presets.json scale): the weights, tracking, leading, the subheadings and
   the buttons. Element rules are :where()'d down to the element's own (0-0-1; Muse's page title 0-1-1, as site.css's
   .legal h1), after site.css's own: a component's rule still wins ---------- */
:root[data-type="folio"] { --title-style: normal; --h-track: -.015em; --h-lead: 1.05; }
:where(:root[data-type="folio"]) h3 { font-family: var(--f-body); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; line-height: 1.3; }
:root[data-type="maison"] { --btn-weight: 600; --btn-track: .14em; font-synthesis-style: none; } /* Manrope has no italic: never a faked one */
:where(:root[data-type="maison"]) h3 { font-weight: 500; line-height: 1.2; }
:where(:root[data-type="maison"]) body { line-height: 1.65; }
:root[data-type="club"] { --h-lead: 1.2; --btn-case: none; --btn-track: .01em; --btn-weight: 600; --btn-size: .9375rem; }
:where(:root[data-type="club"]) h3 { font-weight: 700; line-height: 1.3; }
:where(:root[data-type="club"]) body { line-height: 1.55; }
:root[data-type="muse"] { --h-lead: 1.05; }
:where(:root[data-type="muse"]) :is(.page-head__title, .legal h1) { font-weight: 300; letter-spacing: -.01em; }
:where(:root[data-type="muse"]) h3 { font-weight: 600; line-height: 1.15; }
:where(:root[data-type="muse"]) body { line-height: 1.7; }
:root[data-type="caslon"] { --btn-track: .14em; }
:where(:root[data-type="caslon"]) h3 { font-style: italic; line-height: 1.25; }
/* Salon, her mock's (2026-10-25): its headings upright and a touch light, set close; its text light too */
:root[data-type="salon"] { --title-style: normal; --title-weight: 350; --h-weight: 350; --h-track: -.012em; }
:where(:root[data-type="salon"]) body { font-weight: 350; line-height: 1.6; }

/* ---------- rows: her drag beside puts pieces side by side, two or three, stacked on a phone ---------- */
/* the row's gap spaces its pieces at every width: a piece she added in one keeps no room of its own above or beside it,
   on her link (a piece inside one of hers keeps none) as in code, where the row is a stamped div and her piece has
   class added (site.css gives those room with a 0-3-0 rule; this one matches it and comes after) */
.edit-row { --row-gap: 2rem; display: grid; gap: 1.25rem; align-items: start; }
.edit-row:empty { display: none; }
.edit-row > *, .edit-row > :is(p, h3, .btn):is([data-e^="a-"], .added) { margin-top: 0; margin-right: 0; }
@media (min-width: 600px) {
  .edit-row { display: flex; gap: 1.25rem var(--row-gap); }
  .edit-row > * { flex: 1 1 0; min-width: 0; }
}

/* ---------- her section grounds (builder.js GROUNDS; scripts/look.mjs paints them): site.css closes up two sections on
   one ground (the founder after the services, the waitlist after The Experience) with a hairline;
   once either of a pair is on a ground of hers they are no longer on one ground, so the second keeps a section's own
   space above it and no hairline ---------- */
.page-home main > :is(#about, #waitlist):is([class*=" s-ground-"], [class^="s-ground-"]),
.page-home main:has(> #services:is([class*=" s-ground-"], [class^="s-ground-"])) > #about,
.page-home main:has(> #how:is([class*=" s-ground-"], [class^="s-ground-"])) > #waitlist { padding-top: clamp(4rem, 9vw, 7.5rem) !important; }
.page-home main > :is(#about, #waitlist):is([class*=" s-ground-"], [class^="s-ground-"])::before,
.page-home main:has(> #services:is([class*=" s-ground-"], [class^="s-ground-"])) > #about::before,
.page-home main:has(> #how:is([class*=" s-ground-"], [class^="s-ground-"])) > #waitlist::before { content: none !important; }
/* her ground for dark mode alone (builder.js NIGHTS) does the same, in dark */
:root[data-theme="dark"] .page-home main > :is(#about, #waitlist):is([class*=" s-night-"], [class^="s-night-"]),
:root[data-theme="dark"] .page-home main:has(> #services:is([class*=" s-night-"], [class^="s-night-"])) > #about,
:root[data-theme="dark"] .page-home main:has(> #how:is([class*=" s-night-"], [class^="s-night-"])) > #waitlist { padding-top: clamp(4rem, 9vw, 7.5rem) !important; }
:root[data-theme="dark"] .page-home main > :is(#about, #waitlist):is([class*=" s-night-"], [class^="s-night-"])::before,
:root[data-theme="dark"] .page-home main:has(> #services:is([class*=" s-night-"], [class^="s-night-"])) > #about::before,
:root[data-theme="dark"] .page-home main:has(> #how:is([class*=" s-night-"], [class^="s-night-"])) > #waitlist::before { content: none !important; }

/* ---------- her edit mode's handles (edit.js: the grip, the edges, where a drop goes): her review link only, the
   toolbar's own, so they take its tokens (site.css .edit-tools) and paint in its layer: edit.js keeps them clear of
   the toolbar and the review bar by where it puts them ---------- */
.edit-grip { position: fixed; z-index: 61; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--n-line); border-radius: 6px; background: var(--n-bg); color: var(--n-ink); cursor: grab; touch-action: none;
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .35); }
.edit-grip::before { content: ""; width: 10px; height: 16px; background: radial-gradient(circle, currentColor 1.4px, transparent 1.7px) 0 0 / 5px 5.5px; }
.edit-grip[aria-expanded="true"] { border-color: #c9a227; background: var(--n-pill); color: var(--n-pill-ink); }
.edit-grip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (pointer: coarse), (hover: none), (max-width: 999px) { .edit-grip { width: 44px; height: 44px; } } /* a finger's size, as every control below 1000 px (edit-dock-widths) */
:root.edit-dragging, :root.edit-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.edit-lifted { opacity: .45; }
.edit-drop { position: fixed; z-index: 63; border-radius: 2px; background: var(--focus); pointer-events: none; }
.edit-drop__text, .edit-ghost__text { position: absolute; top: -1.75rem; left: 0; padding: .15rem .5rem; border-radius: 4px; background: var(--focus);
  color: var(--ground); font: 600 .8125rem/1.4 var(--f-body); white-space: nowrap; }
.edit-drop__text:empty { display: none; }
.edit-edge { position: fixed; z-index: 61; border: 1px solid var(--n-ink); border-radius: 4px; background: var(--n-bg); touch-action: none; }
.edit-edge--w { width: 12px; height: 28px; cursor: ew-resize; }
.edit-edge--h { width: 28px; height: 12px; cursor: ns-resize; }
/* the hero logo's handle (edit.js paintLogo): at its corner, in Edit's own yellow (the pills') so it reads as hers to
   use, not the page's, and a finger's size where there is no mouse (2026-10-25 20:09: the first, a small
   square in the review chrome's white, could not be found) */
.edit-edge--logo { width: 28px; height: 28px; cursor: nwse-resize; border: 2px solid var(--n-pill-ink); border-radius: 6px;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5); /* a corner's grip: three strokes toward it */
  background: linear-gradient(135deg, transparent 50%, var(--n-pill-ink) 50% 57%, transparent 57% 65%, var(--n-pill-ink) 65% 72%, transparent 72% 80%, var(--n-pill-ink) 80% 87%, transparent 87%) var(--n-pill); }
.edit-edge--logo:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (pointer: coarse), (hover: none) { .edit-edge--logo { width: 36px; height: 36px; } }
.edit-ghost { position: fixed; z-index: 62; border: 2px dashed var(--focus); border-radius: 4px; pointer-events: none; }
.edit-ghost__text { top: .35rem; left: .35rem; }
.edit-grip__steps { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; flex-basis: 100%; }
.edit-grip__label { min-width: 3.5rem; font-weight: 600; font-size: .8125rem; }
.edit-grip__chip { display: inline-block; width: 14px; height: 14px; margin-right: .4rem; border: 1px solid var(--n-line); border-radius: 50%; vertical-align: -2px; }

/* ---------- Style ▾ (edit.js openStyle): the look of the words she selected, or the whole site's, in the toolbar in the
   row's place. The toolbar's own controls (site.css .edit-tools__opt: their focus ring, their 44 px below 1000 px) and
   tokens: labelled selects for the lists, pressed buttons for italic, underline, alignment, colour and the type presets;
   on a phone it scrolls in itself under its tabs, so the page stays in view ---------- */
/* Move up and Move down read Up and Down on a phone (their names stay whole: aria-label), so Style ▾ fits beside them
   in the second line, both lines of controls clear of Delete's column (edit-dock-widths) */
@media (max-width: 599px) {
  .edit-tools__move { display: none; }
  .edit-tools__dir { text-transform: capitalize; }
}
.edit-tools__opt[aria-pressed="true"], .edit-style__done { border-color: #c9a227; background: var(--n-pill); color: var(--n-pill-ink); font-weight: 600; }
.edit-tools__opt[aria-disabled="true"] { border-color: transparent; background: var(--n-off); color: var(--n-muted); cursor: default; }
.edit-style { display: grid; gap: .5rem; padding-top: .45rem; border-top: 1px solid var(--n-line); }
.edit-style__head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.edit-style__tabs, .edit-style__set, .edit-style__types { display: flex; flex-wrap: wrap; gap: .3rem; }
.edit-style__done { margin-inline-start: auto; }
/* its height: what is left of 62% of the screen under the toolbar's other lines (edit.js fitTools: --style-room) */
.edit-style__pane { display: grid; gap: .6rem; max-height: min(26rem, var(--style-room, 42dvh)); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 2px; }
/* the lists share a line (two to a phone's), the pressed sets take the room they need after them */
.edit-style__grid { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .55rem .9rem; }
.edit-style__field { display: grid; gap: .2rem; min-width: 0; }
.edit-style__field:has(> select) { flex: 1 1 9rem; max-width: 13rem; }
.edit-style__clear { flex-basis: 100%; text-align: start; }
.edit-style__name { font-size: .75rem; font-weight: 600; color: var(--n-muted); }
.edit-style select { width: 100%; min-height: 40px; padding: .35rem .5rem; border: 1px solid var(--n-line); border-radius: 8px; background: var(--n-bg); color: var(--n-ink); font: inherit; }
.edit-style select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.edit-style__italic { font-style: italic; font-family: Georgia, serif; }
.edit-style__underline { text-decoration: underline; text-underline-offset: .15em; }
.edit-style__italic, .edit-style__underline { min-width: 44px; justify-content: center; font-weight: 600; }
/* a colour: a round swatch of the palette's own role, ringed when it is hers */
.edit-style__swatch { width: 40px; padding: 0; justify-content: center; }
.edit-style__swatch::before { content: ""; display: block; width: 22px; height: 22px; border: 1px solid var(--n-line); border-radius: 50%; }
.edit-style__swatch--ink::before { background: var(--ink); }
.edit-style__swatch--ink-2::before { background: var(--ink-2); }
.edit-style__swatch--ink-3::before { background: var(--ink-3); }
.edit-style__swatch--accent::before { background: var(--accent); }
.edit-style__swatch[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--n-pill-ink); }
/* the type presets: each named in its own headings face, its two faces under it */
.edit-style__type { display: grid; justify-items: start; padding: .3rem .9rem; border-radius: 12px; text-align: start; }
.edit-style__type-name { font-size: 1.25rem; line-height: 1.2; font-weight: 400; }
.edit-style__type-faces { font-size: .75rem; color: var(--n-muted); }
.edit-style__type[aria-pressed="true"] .edit-style__type-faces { color: var(--n-pill-ink); }
.edit-style__every { max-width: 14rem; }
/* on a phone the four tabs and Done share one line (a second pushed the toolbar's foot past 62% of the screen) */
@media (max-width: 599px) { .edit-style__head .edit-tools__opt { padding-inline: .5rem; } }
@media (max-width: 999px) {
  .edit-style :is(select, .edit-style__clear) { min-height: 44px; }
  .edit-style__swatch { width: 44px; }
}

/* ---------- the Style area's Colours and Options (edit.js colourControls, optionControls): the whole site's palette and
   her own colours, her logo, the menu, Join and the bottom bar, as pressed buttons; her colours as one picker each,
   light and dark side by side ---------- */
.edit-look__note { flex-basis: 100%; margin: 0; font-size: .75rem; color: var(--n-muted); }
.edit-look__options > .edit-style__field, .edit-look__colours > .edit-style__field { flex: 1 1 100%; }
/* her logo in the button, drawn as the header draws it: the file as a mask (--img: edit.js, from builder.js LOGO), in
   the button's own ink */
.edit-look__logo { display: block; flex: none; width: 1.5rem; height: 1.25rem; margin-inline-end: .45rem; background: currentColor;
  -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat; }
.edit-look__logo--wordmark { width: 2.9rem; }
.edit-look__logo--bold-r-caps { width: 4.6rem; }
@media (forced-colors: active) { .edit-look__logo { background: ButtonText; } }
/* a palette by its ground (ringed), text and accent */
.edit-look__dots { display: inline-flex; margin-inline-end: .45rem; }
.edit-look__dot { width: 14px; height: 14px; border: 1px solid var(--n-line); border-radius: 50%; background: var(--c); }
.edit-look__dot + .edit-look__dot { margin-inline-start: -4px; }
/* her seven colours: a name, then light and dark */
.edit-look__mine { display: grid; grid-template-columns: minmax(6rem, 8rem) 3.25rem 3.25rem; align-items: center; gap: .3rem .6rem; }
.edit-look__slot { font-size: .8125rem; }
.edit-look__pick { width: 100%; height: 30px; padding: 2px; border: 1px solid var(--n-line); border-radius: 8px; background: var(--n-bg); cursor: pointer; }
.edit-look__pick:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* beside her colours where there is room (a laptop): where to start from, and the contrast */
.edit-look__colours > .edit-look__mine { flex: 0 0 auto; }
.edit-look__side { display: grid; flex: 1 1 16rem; gap: .6rem; align-content: start; }
.edit-look__contrast { font-size: .8125rem; }
.edit-look__contrast ul { margin: .2rem 0 0; padding-inline-start: 1.1rem; }
.edit-look__warn { margin: 0; font-weight: 600; color: var(--n-err); }
@media (max-width: 999px) { .edit-look__pick, .edit-look__note .notes__link { height: 44px; } } /* a finger's size, as every control below 1000 px */

/* Her signature's write-on, where a page has <span class="signature" aria-hidden="true" data-write></span>: the build puts
   src/partials/signature-write.html there (one a page: its ids are its own), an inline SVG drawn in currentColor, so it
   takes each theme's ink. Built by brand-assets/signature-write-2026-10-27/make/build.sh with its stylesheet,
   src/css/signature-write.css, which plays only under .is-writing: src/js/signature.js adds that once, when it scrolls
   into view, or at load when it is in view already. Until then it is blank, where scripts run and motion is allowed
   (so it never shows drawn, then rubs out to write); with no script, under reduced motion, and in print it is the still
   signature (the hide is screen only). Sized as the mask span it replaces (site.css: .signature). */
.signature-write { display: block; width: clamp(12.5rem, 10rem + 8vw, 17rem); height: auto; color: var(--signature-ink, var(--ink)); }
@media screen and (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .sw:not(.is-writing) .sw__still { opacity: 0; }
}
/* print: drawn, whatever the screen was doing (above the .is-writing pens' own rules, which come later) */
@media print { .sw.sw.sw .sw__still { opacity: 1; animation: none; } .sw.sw.sw :is(.sw__ink, .sw__pen, .sw__mla) { animation: none; } }
@media (forced-colors: active) { .signature-write { color: CanvasText; } }

/* Her signature's write-on (brand-assets/signature-write-2026-10-27/make/build.sh builds it and this file, from
   write-on.cjs's output, scoped to .sw.is-writing; src/css/signature.css and src/js/signature.js play it):
   each pen's dash runs from its start to its end, the i's dot fade in, then the still signature fades in over the drawing.
   The drawing shows only while it animates: without this file, or under reduced motion, the SVG is the still signature.
   2.99s in all. */
.sw.is-writing .sw__ink { animation: sw-on 2.986s linear; }
@keyframes sw-on { from, to { visibility: visible; } }
.sw.is-writing .sw__pen { animation: linear both; }
.sw.is-writing .sw__p0 { animation-name: sw-p0; animation-duration: 0.114s; animation-delay: 0.000s; }
@keyframes sw-p0 { from { stroke-dashoffset: 559; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p1 { animation-name: sw-p1; animation-duration: 0.089s; animation-delay: 0.114s; }
@keyframes sw-p1 { from { stroke-dashoffset: 436; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p2 { animation-name: sw-p2; animation-duration: 0.049s; animation-delay: 0.292s; }
@keyframes sw-p2 { from { stroke-dashoffset: 241; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p3 { animation-name: sw-p3; animation-duration: 0.038s; animation-delay: 0.341s; }
@keyframes sw-p3 { from { stroke-dashoffset: 186; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p4 { animation-name: sw-p4; animation-duration: 0.061s; animation-delay: 0.469s; }
@keyframes sw-p4 { from { stroke-dashoffset: 303; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p5 { animation-name: sw-p5; animation-duration: 0.044s; animation-delay: 0.620s; }
@keyframes sw-p5 { from { stroke-dashoffset: 219; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p6 { animation-name: sw-p6; animation-duration: 0.023s; animation-delay: 0.754s; }
@keyframes sw-p6 { from { stroke-dashoffset: 116; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p7 { animation-name: sw-p7; animation-duration: 0.055s; animation-delay: 0.867s; }
@keyframes sw-p7 { from { stroke-dashoffset: 272; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p8 { animation-name: sw-p8; animation-duration: 0.087s; animation-delay: 1.013s; }
@keyframes sw-p8 { from { stroke-dashoffset: 430; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p9 { animation-name: sw-p9; animation-duration: 0.046s; animation-delay: 1.190s; }
@keyframes sw-p9 { from { stroke-dashoffset: 228; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p10 { animation-name: sw-p10; animation-duration: 0.025s; animation-delay: 1.236s; }
@keyframes sw-p10 { from { stroke-dashoffset: 124; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p11 { animation-name: sw-p11; animation-duration: 0.031s; animation-delay: 1.351s; }
@keyframes sw-p11 { from { stroke-dashoffset: 155; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p12 { animation-name: sw-p12; animation-duration: 0.059s; animation-delay: 1.382s; }
@keyframes sw-p12 { from { stroke-dashoffset: 293; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p13 { animation-name: sw-p13; animation-duration: 0.049s; animation-delay: 1.531s; }
@keyframes sw-p13 { from { stroke-dashoffset: 240; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p14 { animation-name: sw-p14; animation-duration: 0.055s; animation-delay: 1.580s; }
@keyframes sw-p14 { from { stroke-dashoffset: 274; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p15 { animation-name: sw-p15; animation-duration: 0.044s; animation-delay: 1.725s; }
@keyframes sw-p15 { from { stroke-dashoffset: 217; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p16 { animation-name: sw-p16; animation-duration: 0.024s; animation-delay: 1.769s; }
@keyframes sw-p16 { from { stroke-dashoffset: 119; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p17 { animation-name: sw-p17; animation-duration: 0.020s; animation-delay: 1.883s; }
@keyframes sw-p17 { from { stroke-dashoffset: 102; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p18 { animation-name: sw-p18; animation-duration: 0.056s; animation-delay: 1.993s; }
@keyframes sw-p18 { from { stroke-dashoffset: 275; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p19 { animation-name: sw-p19; animation-duration: 0.064s; animation-delay: 2.138s; }
@keyframes sw-p19 { from { stroke-dashoffset: 315; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p20 { animation-name: sw-p20; animation-duration: 0.058s; animation-delay: 2.202s; }
@keyframes sw-p20 { from { stroke-dashoffset: 288; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p21 { animation-name: sw-p21; animation-duration: 0.042s; animation-delay: 2.261s; }
@keyframes sw-p21 { from { stroke-dashoffset: 208; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p22 { animation-name: sw-p22; animation-duration: 0.029s; animation-delay: 2.393s; }
@keyframes sw-p22 { from { stroke-dashoffset: 143; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p23 { animation-name: sw-p23; animation-duration: 0.023s; animation-delay: 2.421s; }
@keyframes sw-p23 { from { stroke-dashoffset: 117; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p24 { animation-name: sw-p24; animation-duration: 0.029s; animation-delay: 2.445s; }
@keyframes sw-p24 { from { stroke-dashoffset: 145; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__p25 { animation-name: sw-p25; animation-duration: 0.072s; animation-delay: 2.564s; }
@keyframes sw-p25 { from { stroke-dashoffset: 355; } to { stroke-dashoffset: 0; } }
.sw.is-writing .sw__mla { animation: sw-fade .6s ease-out 2.386s both; }
.sw.is-writing .sw__still { animation: sw-fade .2s linear 2.786s both; }
@keyframes sw-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sw.is-writing .sw__ink, .sw.is-writing .sw__pen, .sw.is-writing .sw__mla, .sw.is-writing .sw__still { animation: none; } }

/* About: her letter on her paper (the launch round's item 6: Mockup 3's stationery letter, image 3, in her design), in
   one of two layouts, her option `about` (src/js/builder.js; 2026-10-27):
   - letter (the default): one sheet holds her heading, her words, her signature and the seal: .letter__layout is the
     paper, the article inside it plain;
   - columns: her heading on the page at the left, the letter's card at the right (the earlier About's two columns,
     the launch round's image 5): the article is the paper, opened by its small head, "A letter from Michelle".
   The paper is Poudre's paper and ink in both themes (on Noir it is the lit sheet of her mock), tilted .6 of a degree
   from 760 px; her signature writes itself in her plum (css/signature.css) above her name and title (her note N4); the
   R is pressed as a wax seal over the paper's corner. The build appends this after site.css; its .letter__title and
   .letter__link rules are the base these refine. */
.letter { padding-bottom: clamp(5rem, 9vw, 7.5rem); border-bottom: 1px solid var(--line); }
.page-head--about + .letter { padding-top: clamp(1rem, 3vw, 2rem); }
/* joined to the page head (her look), the letter's own top space goes; the same space inside it keeps its heading and
   card off the page head's hairline (padding, so nothing collapses through to show the page between them) */
.page-head--about + .letter.s-join-up > .wrap { padding-top: clamp(1rem, 3vw, 2rem); }

/* the paper: the layout in letter, the article in columns */
:root:not([data-about="columns"]) .letter__layout, :root[data-about="columns"] .letter__sheet {
  --ink: #251c1b; --ink-2: #574846; --ink-3: #6a5956; --accent: #80505a; --line: rgba(37, 28, 27, .14);
  --line-strong: rgba(37, 28, 27, .34); --field-line: #807875; --focus: #3b5ba9;
  position: relative; color: var(--ink); color-scheme: light; background: #faf6f4; border-radius: 20px;
  padding: clamp(2.25rem, 1rem + 5vw, 4.5rem) clamp(1.5rem, .5rem + 5vw, 4.5rem) clamp(2.75rem, 1.5rem + 5vw, 5rem);
  box-shadow: 0 1px 0 rgba(37, 28, 27, .05), 0 36px 64px -34px rgba(37, 28, 27, .45), 0 12px 24px -18px rgba(37, 28, 27, .3);
}
@supports (corner-shape: squircle) {
  :root:not([data-about="columns"]) .letter__layout, :root[data-about="columns"] .letter__sheet { corner-shape: squircle; border-radius: 32px; }
}
:root[data-theme="dark"]:not([data-about="columns"]) .letter__layout, :root[data-theme="dark"][data-about="columns"] .letter__sheet {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 40px 70px -32px rgba(0, 0, 0, .9);
}
@media (min-width: 760px) {
  :root:not([data-about="columns"]) .letter__layout, :root[data-about="columns"] .letter__sheet { transform: rotate(-.6deg); }
}

/* letter: one sheet, its heading at the top */
.letter__layout { display: grid; justify-items: start; gap: 1.5rem; max-width: 46rem; margin-inline: auto; }
.letter__sheet { --signature-ink: var(--accent); display: grid; justify-items: start; gap: 1.5rem; }
.letter__layout .letter__title { font-size: clamp(2.25rem, 1.7rem + 2.2vw, 3.5rem); line-height: 1.05; color: var(--ink); }
.letter__head { display: none; }

/* columns: the heading on the page, the card beside it from 900 px (above it on a phone) */
:root[data-about="columns"] .letter__layout { max-width: none; margin-inline: 0; gap: 2rem; justify-items: stretch; }
:root[data-about="columns"] .letter__layout .letter__title { font-size: clamp(2rem, 1.396rem + 2.476vw, 3.625rem); line-height: 1.04; text-wrap: balance; }
:root[data-about="columns"] .letter__sheet { max-width: 46rem; }
:root[data-about="columns"] .letter__head {
  display: block; margin-bottom: -.25rem; font-family: var(--f-display); font-style: italic; font-size: 1.25rem; line-height: 1.3;
  color: var(--accent);
}
@media (min-width: 900px) {
  :root[data-about="columns"] .letter__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(3rem, 6vw, 5rem); align-items: start; }
  :root[data-about="columns"] .letter__layout .letter__title { position: sticky; top: 7rem; }
}

/* the letter itself, in either */
.letter__words { font-size: 1.125rem; line-height: 1.65; text-wrap: pretty; }
.letter__sign { display: grid; justify-items: start; margin-top: .75rem; }
.letter__sign .signature-write { width: clamp(14rem, 9rem + 14vw, 22rem); margin: 0 0 .5rem -.4rem; }
.letter__name { font-weight: 500; }
.letter__role { color: var(--ink-2); font-size: .9375rem; }
.letter__sheet .letter__link { color: var(--ink); }
.letter__sheet :focus-visible { outline-color: var(--focus); }
.letter__seal {
  position: absolute; right: max(-1.75rem, (100% - 100vw) / 2 + 1rem); /* off the corner, inside the screen */ bottom: -2.25rem;
  display: grid; place-items: center; width: 6.5rem; aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle at 35% 30%, #a96876, #6f3a45 70%);
  box-shadow: 0 10px 20px -8px rgba(37, 28, 27, .55), inset 0 0 0 4px rgba(255, 255, 255, .08);
}
.letter__seal::before {
  content: ""; width: var(--seal-w, 62%); aspect-ratio: var(--seal-ratio, 1124 / 924); background: #f4d9dc;
  -webkit-mask: var(--seal-img, url(/brand/the-reserve-script-r.svg)) center / contain no-repeat;
  mask: var(--seal-img, url(/brand/the-reserve-script-r.svg)) center / contain no-repeat;
}
/* the seal's mark, her option `seal`: the script R by MLA (the default, above), the bold R by MLA (data-logo bold-r's),
   or the header's R and name with the R stacked over the name (scripts/logo-stacked.mjs), on a larger seal to carry it */
:root[data-seal="bold-r"] .letter__seal { --seal-img: url(/brand/the-reserve-bold-r.webp); --seal-ratio: 674 / 893; --seal-w: 42%; }
:root[data-seal="stacked"] .letter__seal { --seal-img: url(/brand/the-reserve-bold-r-stacked.svg); --seal-ratio: 2933 / 1099; --seal-w: 72%; width: 7.5rem; }
@media (max-width: 759px) {
  .letter__seal { right: 1rem; bottom: -1.75rem; width: 4.75rem; }
  :root[data-seal="stacked"] .letter__seal { right: .75rem; width: 5.25rem; }
  /* room under the agency link for the seal's upper half on a narrow phone */
  :root:not([data-about="columns"]) .letter__layout, :root[data-about="columns"] .letter__sheet { padding-bottom: 4.5rem; }
}
/* in columns the card ends at the wrap's edge, not centred: off its corner by no more than the wrap's margin allows */
@media (min-width: 760px) { :root[data-about="columns"] .letter__seal { right: max(-1.75rem, (min(100vw - 2.5rem, 74rem) - 100vw) / 2 + 1.5rem); } }
@media (forced-colors: active) {
  :root:not([data-about="columns"]) .letter__layout, :root[data-about="columns"] .letter__sheet { border: 1px solid CanvasText; }
  .letter__seal { forced-color-adjust: none; }
}
@media print {
  :root:not([data-about="columns"]) .letter__layout, :root[data-about="columns"] .letter__sheet { transform: none; box-shadow: none; }
  :root[data-about="columns"] .letter__layout .letter__title { position: static; }
}

/* ---------- the builder's look: written by scripts/look.mjs from src/js/builder.js and src/data/look.json ---------- */
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap;size-adjust:100%}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;size-adjust:110%}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;size-adjust:110%}
@font-face{font-family:"EB Garamond";src:url(/fonts/eb-garamond.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap;size-adjust:115.4%}
@font-face{font-family:"EB Garamond";src:url(/fonts/eb-garamond-italic.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap;size-adjust:115.4%}
@font-face{font-family:"Manrope";src:url(/fonts/manrope.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;size-adjust:94.4%}
@font-face{font-family:"Cardo";src:url(/fonts/cardo.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;size-adjust:109%}
@font-face{font-family:"Cardo";src:url(/fonts/cardo-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;size-adjust:109%}
@font-face{font-family:"Cardo";src:url(/fonts/cardo-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;size-adjust:109%}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-grotesk.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;size-adjust:103.4%}
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-grotesk-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap;size-adjust:103.4%}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-garamond.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap;size-adjust:120%}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-garamond-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap;size-adjust:120%}
@font-face{font-family:"Montserrat";src:url(/fonts/montserrat.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;size-adjust:98.6%}
@font-face{font-family:"Montserrat";src:url(/fonts/montserrat-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap;size-adjust:98.6%}
@font-face{font-family:"Libre Caslon";src:url(/fonts/libre-caslon-display.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;size-adjust:108.7%}
@font-face{font-family:"Libre Caslon";src:url(/fonts/libre-caslon-text-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap;size-adjust:97.4%}
@font-face{font-family:"Libre Caslon";src:url(/fonts/libre-caslon-text-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap;size-adjust:97.4%}
@font-face{font-family:"Inter";src:url(/fonts/inter.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap;size-adjust:93.4%}
@font-face{font-family:"Inter";src:url(/fonts/inter-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap;size-adjust:93.4%}
@font-face{font-family:"Newsreader";src:url(/fonts/newsreader.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap;size-adjust:106.8%}
@font-face{font-family:"Newsreader";src:url(/fonts/newsreader-italic.woff2) format("woff2");font-weight:200 800;font-style:italic;font-display:swap;size-adjust:106.8%}
@font-face{font-family:"Nunito Sans";src:url(/fonts/nunito-sans.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap;size-adjust:105.4%}
@font-face{font-family:"Nunito Sans";src:url(/fonts/nunito-sans-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap;size-adjust:105.4%}
:root{--font-bodoni-moda:"Bodoni Moda", Didot, "Bodoni 72", Georgia, serif;--font-instrument-sans:"Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;--font-instrument-serif:"Instrument Serif", "Times New Roman", Georgia, serif;--font-eb-garamond:"EB Garamond", Garamond, "Times New Roman", serif;--font-manrope:Manrope, "Helvetica Neue", Arial, sans-serif;--font-cardo:Cardo, Georgia, "Times New Roman", serif;--font-hanken-grotesk:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;--font-cormorant-garamond:"Cormorant Garamond", Garamond, "Times New Roman", serif;--font-montserrat:Montserrat, "Helvetica Neue", Arial, sans-serif;--font-libre-caslon:"Libre Caslon", "Big Caslon", Georgia, serif;--font-inter:Inter, "Helvetica Neue", Arial, sans-serif;--font-newsreader:Newsreader, "Iowan Old Style", Georgia, "Times New Roman", serif;--font-nunito-sans:"Nunito Sans", Avenir, "Avenir Next", "Helvetica Neue", Arial, sans-serif}
:root[data-type="caslon"]{--f-display:var(--font-libre-caslon);--f-body:var(--font-inter)}
:root{--silk-1:#ccc6bf;--silk-2:#f0ede9;--silk-3:#fffefd;--silk-4:#4d4d4d}
:root[data-theme="dark"]{--silk-1:#0d0c0b;--silk-2:#211f1c;--silk-3:#70634f;--silk-4:#18140f}
:root[data-palette="poudre"]{--ground:#f4ece8;--surface:#faf6f4;--sunk:#ebe0db;--ink:#251c1b;--ink-2:#574846;--ink-3:#6a5956;--line:rgba(37, 28, 27, .14);--line-strong:rgba(37, 28, 27, .34);--accent:#80505a;--btn:#251c1b;--btn-ink:#f4ece8;--focus:#3b5ba9;--danger:#a3241a;--veil:rgba(244, 236, 232, .88);--silk-1:#d7c8c3;--silk-2:#f4eae6;--silk-3:#fefaf8;--silk-4:#494647}
:root[data-palette="poudre"][data-theme="dark"]{--ground:#000000;--surface:#121212;--sunk:#0a0a0a;--ink:#ffffff;--ink-2:#c2c2c2;--ink-3:#9e9e9e;--line:rgba(255, 255, 255, .14);--line-strong:rgba(255, 255, 255, .36);--accent:#b0b0b0;--btn:#ffffff;--btn-ink:#000000;--focus:#8fb0ff;--danger:#ff8f80;--veil:rgba(0, 0, 0, .88);--silk-1:#040404;--silk-2:#161616;--silk-3:#575757;--silk-4:#1c1c1c}
:root[data-logo-size="85"]{--logo-scale:0.85}
.s-size-l.s-size-l.s-size-l{font-size:1.375rem!important}
.s-size-xl.s-size-xl.s-size-xl{font-size:clamp(1.6875rem,1.525rem + .667vw,2.125rem)!important}
.s-size-2xl.s-size-2xl.s-size-2xl{font-size:clamp(1.875rem,1.3rem + 2.6vw,3.4rem)!important}
.s-colour-ink.s-colour-ink.s-colour-ink{color:var(--ink)!important}
.s-colour-ink-2.s-colour-ink-2.s-colour-ink-2{color:var(--ink-2)!important}
.s-colour-accent.s-colour-accent.s-colour-accent{color:var(--accent)!important}
html.r-heading-colour-ink-2 :where(main,.top,.foot) :is(h2,h3){color:var(--ink-2)!important}
.s-h-l.s-h-l.s-h-l { min-height: 22rem !important; }
.s-ground-cream.s-ground-cream.s-ground-cream{background:#f4ece8!important;color:var(--ink)!important;--ground:#f4ece8!important;--surface:#faf6f4!important;--sunk:#ebe0db!important;--ink:#251c1b!important;--ink-2:#574846!important;--ink-3:#6a5956!important;--line:rgba(37,28,27,.14)!important;--line-strong:rgba(37,28,27,.34)!important;--accent:#80505a!important;--btn:#251c1b!important;--btn-ink:#f4ece8!important;--focus:#3b5ba9!important;--danger:#a3241a!important;--field-line:#807875!important;--logo:#000!important;--page-ink:var(--ink)!important;--page-ink-2:var(--ink-2)!important;--page-ink-3:var(--ink-3)!important;--page-accent:var(--accent)!important;--page-focus:var(--focus)!important;--page-line:var(--line)!important;--page-line-strong:var(--line-strong)!important;--page-btn:var(--btn)!important;--page-btn-ink:var(--btn-ink)!important;--signature-ink:var(--ink)}
:root[data-theme="dark"] .s-ground-cream.s-ground-cream.s-ground-cream{background:#000000!important;color:var(--ink)!important;--ground:#000000!important;--surface:#121212!important;--sunk:#0a0a0a!important;--ink:#ffffff!important;--ink-2:#c2c2c2!important;--ink-3:#9e9e9e!important;--line:rgba(255,255,255,.14)!important;--line-strong:rgba(255,255,255,.36)!important;--accent:#b0b0b0!important;--btn:#ffffff!important;--btn-ink:#000000!important;--focus:#8fb0ff!important;--danger:#ff8f80!important;--field-line:#8f8f8f!important;--logo:#fff!important;--page-ink:var(--ink)!important;--page-ink-2:var(--ink-2)!important;--page-ink-3:var(--ink-3)!important;--page-accent:var(--accent)!important;--page-focus:var(--focus)!important;--page-line:var(--line)!important;--page-line-strong:var(--line-strong)!important;--page-btn:var(--btn)!important;--page-btn-ink:var(--btn-ink)!important;--signature-ink:var(--ink)}
.s-ground-sand.s-ground-sand.s-ground-sand{background:#ebe0db!important;color:var(--ink)!important;--ground:#ebe0db!important;--surface:#f4ece8!important;--sunk:#e2d4ce!important;--ink:#251c1b!important;--ink-2:#574846!important;--ink-3:#6a5956!important;--line:rgba(37,28,27,.14)!important;--line-strong:rgba(37,28,27,.34)!important;--accent:#80505a!important;--btn:#251c1b!important;--btn-ink:#ebe0db!important;--focus:#3b5ba9!important;--danger:#a3241a!important;--field-line:#7c726f!important;--logo:#000!important;--page-ink:var(--ink)!important;--page-ink-2:var(--ink-2)!important;--page-ink-3:var(--ink-3)!important;--page-accent:var(--accent)!important;--page-focus:var(--focus)!important;--page-line:var(--line)!important;--page-line-strong:var(--line-strong)!important;--page-btn:var(--btn)!important;--page-btn-ink:var(--btn-ink)!important;--signature-ink:var(--ink)}
:root[data-theme="dark"] .s-ground-sand.s-ground-sand.s-ground-sand{background:#0a0a0a!important;color:var(--ink)!important;--ground:#0a0a0a!important;--surface:#161616!important;--sunk:#000000!important;--ink:#ffffff!important;--ink-2:#c2c2c2!important;--ink-3:#9e9e9e!important;--line:rgba(255,255,255,.14)!important;--line-strong:rgba(255,255,255,.36)!important;--accent:#b0b0b0!important;--btn:#ffffff!important;--btn-ink:#0a0a0a!important;--focus:#8fb0ff!important;--danger:#ff8f80!important;--field-line:#939393!important;--logo:#fff!important;--page-ink:var(--ink)!important;--page-ink-2:var(--ink-2)!important;--page-ink-3:var(--ink-3)!important;--page-accent:var(--accent)!important;--page-focus:var(--focus)!important;--page-line:var(--line)!important;--page-line-strong:var(--line-strong)!important;--page-btn:var(--btn)!important;--page-btn-ink:var(--btn-ink)!important;--signature-ink:var(--ink)}
.s-ground-brown.s-ground-brown.s-ground-brown{background:#574846!important;color:var(--ink)!important;--ground:#574846!important;--surface:#625250!important;--sunk:#4b3d3b!important;--ink:#faf3f1!important;--ink-2:#ecdcd8!important;--ink-3:#dccac6!important;--line:rgba(250,243,241,.18)!important;--line-strong:rgba(250,243,241,.38)!important;--accent:#f2c4c9!important;--btn:#faf3f1!important;--btn-ink:#3b2e2d!important;--focus:#a9c1ff!important;--danger:#ffc9bf!important;--field-line:#b2a8a6!important;--logo:#fff!important;--page-ink:var(--ink)!important;--page-ink-2:var(--ink-2)!important;--page-ink-3:var(--ink-3)!important;--page-accent:var(--accent)!important;--page-focus:var(--focus)!important;--page-line:var(--line)!important;--page-line-strong:var(--line-strong)!important;--page-btn:var(--btn)!important;--page-btn-ink:var(--btn-ink)!important;--signature-ink:var(--ink)}
:root[data-theme="dark"] .s-ground-brown.s-ground-brown.s-ground-brown{background:#221e1d!important;color:var(--ink)!important;--ground:#221e1d!important;--surface:#2b2625!important;--sunk:#1a1716!important;--ink:#faf3f1!important;--ink-2:#ecdcd8!important;--ink-3:#dccac6!important;--line:rgba(250,243,241,.18)!important;--line-strong:rgba(250,243,241,.38)!important;--accent:#f2c4c9!important;--btn:#faf3f1!important;--btn-ink:#221e1d!important;--focus:#a9c1ff!important;--danger:#ffb4a8!important;--field-line:#9b9594!important;--logo:#fff!important;--page-ink:var(--ink)!important;--page-ink-2:var(--ink-2)!important;--page-ink-3:var(--ink-3)!important;--page-accent:var(--accent)!important;--page-focus:var(--focus)!important;--page-line:var(--line)!important;--page-line-strong:var(--line-strong)!important;--page-btn:var(--btn)!important;--page-btn-ink:var(--btn-ink)!important;--signature-ink:var(--ink)}
:root[data-theme="dark"] .s-night-ivory.s-night-ivory.s-night-ivory.s-night-ivory{background:#f1ece2!important;color:var(--ink)!important;--ground:#f1ece2!important;--surface:#e5e0d7!important;--sunk:#e5e0d7!important;--ink:#1a1816!important;--ink-2:#45403a!important;--ink-3:#5a544d!important;--line:rgba(26,24,22,.16)!important;--line-strong:rgba(26,24,22,.38)!important;--accent:#6e5a3e!important;--btn:#1a1816!important;--btn-ink:#f1ece2!important;--focus:#2f55c9!important;--danger:#a3241a!important;--field-line:#797570!important;--logo:#000!important;--page-ink:var(--ink)!important;--page-ink-2:var(--ink-2)!important;--page-ink-3:var(--ink-3)!important;--page-accent:var(--accent)!important;--page-focus:var(--focus)!important;--page-line:var(--line)!important;--page-line-strong:var(--line-strong)!important;--page-btn:var(--btn)!important;--page-btn-ink:var(--btn-ink)!important;--signature-ink:var(--ink)}
.s-finish-silk.s-finish-silk.s-finish-silk{position:relative!important;isolation:isolate}
.s-finish-silk>canvas.ground-motion{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none;border:0 solid}
.s-ground-cream.s-ground-cream.s-ground-cream.s-finish-silk{background:linear-gradient(118deg,#f4ece8,#fbf8f7 32%,#f4ece8 52%,#c6bfbc 74%,#f4ece8)!important;--ink-2:color-mix(in srgb,#574846 50%,#251c1b)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#6a5956 50%,#251c1b)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#80505a 50%,#251c1b)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#3b5ba9 50%,#251c1b)!important;--page-focus:var(--focus)!important}
.s-ground-cream.s-ground-cream.s-ground-cream.s-finish-silk>canvas.ground-motion{color:#c6bfbc;border-color:#f4ece8 #fbf8f7 #0f0f0f}
:root[data-theme="dark"] .s-ground-cream.s-ground-cream.s-ground-cream.s-finish-silk{background:linear-gradient(118deg,#000000,#454545 32%,#000000 52%,#000000 74%,#000000)!important;--ink-2:color-mix(in srgb,#c2c2c2 50%,#ffffff)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#9e9e9e 50%,#ffffff)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#b0b0b0 50%,#ffffff)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#8fb0ff 50%,#ffffff)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-ground-cream.s-ground-cream.s-ground-cream.s-finish-silk>canvas.ground-motion{color:#000000;border-color:#000000 #454545 #0a0909}
.s-ground-white.s-ground-white.s-ground-white.s-finish-silk{background:linear-gradient(118deg,#ffffff,#ffffff 32%,#ffffff 52%,#c2c2c2 74%,#ffffff)!important;--ink-2:color-mix(in srgb,#574846 50%,#251c1b)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#6a5956 50%,#251c1b)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#80505a 50%,#251c1b)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#3b5ba9 50%,#251c1b)!important;--page-focus:var(--focus)!important}
.s-ground-white.s-ground-white.s-ground-white.s-finish-silk>canvas.ground-motion{color:#c2c2c2;border-color:#ffffff #ffffff #0f0f0f}
:root[data-theme="dark"] .s-ground-white.s-ground-white.s-ground-white.s-finish-silk{background:linear-gradient(118deg,#121212,#464646 32%,#121212 52%,#090909 74%,#121212)!important;--ink-2:color-mix(in srgb,#c2c2c2 50%,#ffffff)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#9e9e9e 50%,#ffffff)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#b0b0b0 50%,#ffffff)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#8fb0ff 50%,#ffffff)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-ground-white.s-ground-white.s-ground-white.s-finish-silk>canvas.ground-motion{color:#090909;border-color:#121212 #464646 #0a0909}
.s-ground-sand.s-ground-sand.s-ground-sand.s-finish-silk{background:linear-gradient(118deg,#ebe0db,#f8f4f2 32%,#ebe0db 52%,#cac1bc 74%,#ebe0db)!important;--ink-2:color-mix(in srgb,#574846 50%,#251c1b)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#6a5956 50%,#251c1b)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#80505a 50%,#251c1b)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#3b5ba9 50%,#251c1b)!important;--page-focus:var(--focus)!important}
.s-ground-sand.s-ground-sand.s-ground-sand.s-finish-silk>canvas.ground-motion{color:#cac1bc;border-color:#ebe0db #f8f4f2 #0f0f0f}
:root[data-theme="dark"] .s-ground-sand.s-ground-sand.s-ground-sand.s-finish-silk{background:linear-gradient(118deg,#0a0a0a,#454545 32%,#0a0a0a 52%,#050505 74%,#0a0a0a)!important;--ink-2:color-mix(in srgb,#c2c2c2 50%,#ffffff)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#9e9e9e 50%,#ffffff)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#b0b0b0 50%,#ffffff)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#8fb0ff 50%,#ffffff)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-ground-sand.s-ground-sand.s-ground-sand.s-finish-silk>canvas.ground-motion{color:#050505;border-color:#0a0a0a #454545 #0a0909}
.s-ground-blush.s-ground-blush.s-ground-blush.s-finish-silk{background:linear-gradient(118deg,#f1d8d7,#faf1f1 32%,#f1d8d7 52%,#cdb8b7 74%,#f1d8d7)!important;--ink-2:color-mix(in srgb,#574846 50%,#251c1b)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#5f4f4c 50%,#251c1b)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#7a4752 50%,#251c1b)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#3b5ba9 50%,#251c1b)!important;--page-focus:var(--focus)!important}
.s-ground-blush.s-ground-blush.s-ground-blush.s-finish-silk>canvas.ground-motion{color:#cdb8b7;border-color:#f1d8d7 #faf1f1 #0f0f0f}
:root[data-theme="dark"] .s-ground-blush.s-ground-blush.s-ground-blush.s-finish-silk{background:linear-gradient(118deg,#2a1d1f,#594f50 32%,#2a1d1f 52%,#150f10 74%,#2a1d1f)!important;--ink-2:color-mix(in srgb,#ecdcd8 50%,#faf3f1)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#dccac6 50%,#faf3f1)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#f2c4c9 50%,#faf3f1)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#a9c1ff 50%,#faf3f1)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-ground-blush.s-ground-blush.s-ground-blush.s-finish-silk>canvas.ground-motion{color:#150f10;border-color:#2a1d1f #594f50 #0a0909}
.s-ground-brown.s-ground-brown.s-ground-brown.s-finish-silk{background:linear-gradient(118deg,#574846,#5e4f4d 32%,#574846 52%,#2c2423 74%,#574846)!important;--ink-2:color-mix(in srgb,#ecdcd8 50%,#faf3f1)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#dccac6 50%,#faf3f1)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#f2c4c9 50%,#faf3f1)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#a9c1ff 50%,#faf3f1)!important;--page-focus:var(--focus)!important}
.s-ground-brown.s-ground-brown.s-ground-brown.s-finish-silk>canvas.ground-motion{color:#2c2423;border-color:#574846 #5e4f4d #0a0909}
:root[data-theme="dark"] .s-ground-brown.s-ground-brown.s-ground-brown.s-finish-silk{background:linear-gradient(118deg,#221e1d,#534f4f 32%,#221e1d 52%,#110f0f 74%,#221e1d)!important;--ink-2:color-mix(in srgb,#ecdcd8 50%,#faf3f1)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#dccac6 50%,#faf3f1)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#f2c4c9 50%,#faf3f1)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#a9c1ff 50%,#faf3f1)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-ground-brown.s-ground-brown.s-ground-brown.s-finish-silk>canvas.ground-motion{color:#110f0f;border-color:#221e1d #534f4f #0a0909}
:root[data-theme="dark"] .s-night-ivory.s-night-ivory.s-night-ivory.s-night-ivory.s-finish-silk{background:linear-gradient(118deg,#f1ece2,#f9f7f3 32%,#f1ece2 52%,#c3bbae 74%,#f1ece2)!important;--ink-2:color-mix(in srgb,#45403a 50%,#1a1816)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#5a544d 50%,#1a1816)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#6e5a3e 50%,#1a1816)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#2f55c9 50%,#1a1816)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-night-ivory.s-night-ivory.s-night-ivory.s-night-ivory.s-finish-silk>canvas.ground-motion{color:#c3bbae;border-color:#f1ece2 #f9f7f3 #0f0f0f}
.s-finish-satin.s-finish-satin.s-finish-satin{position:relative!important;isolation:isolate}
.s-finish-satin>canvas.ground-motion{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none;border:0 solid}
.s-ground-cream.s-ground-cream.s-ground-cream.s-finish-satin{background:linear-gradient(118deg,#f4ece8,#fbf8f7 32%,#f4ece8 52%,#c6bfbc 74%,#f4ece8)!important;--ink-2:color-mix(in srgb,#574846 50%,#251c1b)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#6a5956 50%,#251c1b)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#80505a 50%,#251c1b)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#3b5ba9 50%,#251c1b)!important;--page-focus:var(--focus)!important}
.s-ground-cream.s-ground-cream.s-ground-cream.s-finish-satin>canvas.ground-motion{color:#c6bfbc;border-color:#f4ece8 #fbf8f7 #0f0f0f}
:root[data-theme="dark"] .s-ground-cream.s-ground-cream.s-ground-cream.s-finish-satin{background:linear-gradient(118deg,#000000,#454545 32%,#000000 52%,#000000 74%,#000000)!important;--ink-2:color-mix(in srgb,#c2c2c2 50%,#ffffff)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#9e9e9e 50%,#ffffff)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#b0b0b0 50%,#ffffff)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#8fb0ff 50%,#ffffff)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-ground-cream.s-ground-cream.s-ground-cream.s-finish-satin>canvas.ground-motion{color:#000000;border-color:#000000 #454545 #0a0909}
.s-ground-white.s-ground-white.s-ground-white.s-finish-satin{background:linear-gradient(118deg,#ffffff,#ffffff 32%,#ffffff 52%,#c2c2c2 74%,#ffffff)!important;--ink-2:color-mix(in srgb,#574846 50%,#251c1b)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#6a5956 50%,#251c1b)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#80505a 50%,#251c1b)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#3b5ba9 50%,#251c1b)!important;--page-focus:var(--focus)!important}
.s-ground-white.s-ground-white.s-ground-white.s-finish-satin>canvas.ground-motion{color:#c2c2c2;border-color:#ffffff #ffffff #0f0f0f}
:root[data-theme="dark"] .s-ground-white.s-ground-white.s-ground-white.s-finish-satin{background:linear-gradient(118deg,#121212,#464646 32%,#121212 52%,#090909 74%,#121212)!important;--ink-2:color-mix(in srgb,#c2c2c2 50%,#ffffff)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#9e9e9e 50%,#ffffff)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#b0b0b0 50%,#ffffff)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#8fb0ff 50%,#ffffff)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-ground-white.s-ground-white.s-ground-white.s-finish-satin>canvas.ground-motion{color:#090909;border-color:#121212 #464646 #0a0909}
.s-ground-sand.s-ground-sand.s-ground-sand.s-finish-satin{background:linear-gradient(118deg,#ebe0db,#f8f4f2 32%,#ebe0db 52%,#cac1bc 74%,#ebe0db)!important;--ink-2:color-mix(in srgb,#574846 50%,#251c1b)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#6a5956 50%,#251c1b)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#80505a 50%,#251c1b)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#3b5ba9 50%,#251c1b)!important;--page-focus:var(--focus)!important}
.s-ground-sand.s-ground-sand.s-ground-sand.s-finish-satin>canvas.ground-motion{color:#cac1bc;border-color:#ebe0db #f8f4f2 #0f0f0f}
:root[data-theme="dark"] .s-ground-sand.s-ground-sand.s-ground-sand.s-finish-satin{background:linear-gradient(118deg,#0a0a0a,#454545 32%,#0a0a0a 52%,#050505 74%,#0a0a0a)!important;--ink-2:color-mix(in srgb,#c2c2c2 50%,#ffffff)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#9e9e9e 50%,#ffffff)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#b0b0b0 50%,#ffffff)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#8fb0ff 50%,#ffffff)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-ground-sand.s-ground-sand.s-ground-sand.s-finish-satin>canvas.ground-motion{color:#050505;border-color:#0a0a0a #454545 #0a0909}
.s-ground-blush.s-ground-blush.s-ground-blush.s-finish-satin{background:linear-gradient(118deg,#f1d8d7,#faf1f1 32%,#f1d8d7 52%,#cdb8b7 74%,#f1d8d7)!important;--ink-2:color-mix(in srgb,#574846 50%,#251c1b)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#5f4f4c 50%,#251c1b)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#7a4752 50%,#251c1b)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#3b5ba9 50%,#251c1b)!important;--page-focus:var(--focus)!important}
.s-ground-blush.s-ground-blush.s-ground-blush.s-finish-satin>canvas.ground-motion{color:#cdb8b7;border-color:#f1d8d7 #faf1f1 #0f0f0f}
:root[data-theme="dark"] .s-ground-blush.s-ground-blush.s-ground-blush.s-finish-satin{background:linear-gradient(118deg,#2a1d1f,#594f50 32%,#2a1d1f 52%,#150f10 74%,#2a1d1f)!important;--ink-2:color-mix(in srgb,#ecdcd8 50%,#faf3f1)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#dccac6 50%,#faf3f1)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#f2c4c9 50%,#faf3f1)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#a9c1ff 50%,#faf3f1)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-ground-blush.s-ground-blush.s-ground-blush.s-finish-satin>canvas.ground-motion{color:#150f10;border-color:#2a1d1f #594f50 #0a0909}
.s-ground-brown.s-ground-brown.s-ground-brown.s-finish-satin{background:linear-gradient(118deg,#574846,#5e4f4d 32%,#574846 52%,#2c2423 74%,#574846)!important;--ink-2:color-mix(in srgb,#ecdcd8 50%,#faf3f1)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#dccac6 50%,#faf3f1)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#f2c4c9 50%,#faf3f1)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#a9c1ff 50%,#faf3f1)!important;--page-focus:var(--focus)!important}
.s-ground-brown.s-ground-brown.s-ground-brown.s-finish-satin>canvas.ground-motion{color:#2c2423;border-color:#574846 #5e4f4d #0a0909}
:root[data-theme="dark"] .s-ground-brown.s-ground-brown.s-ground-brown.s-finish-satin{background:linear-gradient(118deg,#221e1d,#534f4f 32%,#221e1d 52%,#110f0f 74%,#221e1d)!important;--ink-2:color-mix(in srgb,#ecdcd8 50%,#faf3f1)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#dccac6 50%,#faf3f1)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#f2c4c9 50%,#faf3f1)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#a9c1ff 50%,#faf3f1)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-ground-brown.s-ground-brown.s-ground-brown.s-finish-satin>canvas.ground-motion{color:#110f0f;border-color:#221e1d #534f4f #0a0909}
:root[data-theme="dark"] .s-night-ivory.s-night-ivory.s-night-ivory.s-night-ivory.s-finish-satin{background:linear-gradient(118deg,#f1ece2,#f9f7f3 32%,#f1ece2 52%,#c3bbae 74%,#f1ece2)!important;--ink-2:color-mix(in srgb,#45403a 50%,#1a1816)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#5a544d 50%,#1a1816)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#6e5a3e 50%,#1a1816)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#2f55c9 50%,#1a1816)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-night-ivory.s-night-ivory.s-night-ivory.s-night-ivory.s-finish-satin>canvas.ground-motion{color:#c3bbae;border-color:#f1ece2 #f9f7f3 #0f0f0f}
.s-finish-voile.s-finish-voile.s-finish-voile{position:relative!important;isolation:isolate}
.s-finish-voile>canvas.ground-motion{position:absolute;inset:0;z-index:-1;display:block;width:100%;height:100%;pointer-events:none;border:0 solid}
.s-ground-cream.s-ground-cream.s-ground-cream.s-finish-voile{background:linear-gradient(118deg,#f4ece8,#fbf8f7 32%,#f4ece8 52%,#c6bfbc 74%,#f4ece8)!important;--ink-2:color-mix(in srgb,#574846 50%,#251c1b)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#6a5956 50%,#251c1b)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#80505a 50%,#251c1b)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#3b5ba9 50%,#251c1b)!important;--page-focus:var(--focus)!important}
.s-ground-cream.s-ground-cream.s-ground-cream.s-finish-voile>canvas.ground-motion{color:#c6bfbc;border-color:#f4ece8 #fbf8f7 #0f0f0f}
:root[data-theme="dark"] .s-ground-cream.s-ground-cream.s-ground-cream.s-finish-voile{background:linear-gradient(118deg,#000000,#454545 32%,#000000 52%,#000000 74%,#000000)!important;--ink-2:color-mix(in srgb,#c2c2c2 50%,#ffffff)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#9e9e9e 50%,#ffffff)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#b0b0b0 50%,#ffffff)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#8fb0ff 50%,#ffffff)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-ground-cream.s-ground-cream.s-ground-cream.s-finish-voile>canvas.ground-motion{color:#000000;border-color:#000000 #454545 #0a0909}
.s-ground-white.s-ground-white.s-ground-white.s-finish-voile{background:linear-gradient(118deg,#ffffff,#ffffff 32%,#ffffff 52%,#c2c2c2 74%,#ffffff)!important;--ink-2:color-mix(in srgb,#574846 50%,#251c1b)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#6a5956 50%,#251c1b)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#80505a 50%,#251c1b)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#3b5ba9 50%,#251c1b)!important;--page-focus:var(--focus)!important}
.s-ground-white.s-ground-white.s-ground-white.s-finish-voile>canvas.ground-motion{color:#c2c2c2;border-color:#ffffff #ffffff #0f0f0f}
:root[data-theme="dark"] .s-ground-white.s-ground-white.s-ground-white.s-finish-voile{background:linear-gradient(118deg,#121212,#464646 32%,#121212 52%,#090909 74%,#121212)!important;--ink-2:color-mix(in srgb,#c2c2c2 50%,#ffffff)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#9e9e9e 50%,#ffffff)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#b0b0b0 50%,#ffffff)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#8fb0ff 50%,#ffffff)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-ground-white.s-ground-white.s-ground-white.s-finish-voile>canvas.ground-motion{color:#090909;border-color:#121212 #464646 #0a0909}
.s-ground-sand.s-ground-sand.s-ground-sand.s-finish-voile{background:linear-gradient(118deg,#ebe0db,#f8f4f2 32%,#ebe0db 52%,#cac1bc 74%,#ebe0db)!important;--ink-2:color-mix(in srgb,#574846 50%,#251c1b)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#6a5956 50%,#251c1b)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#80505a 50%,#251c1b)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#3b5ba9 50%,#251c1b)!important;--page-focus:var(--focus)!important}
.s-ground-sand.s-ground-sand.s-ground-sand.s-finish-voile>canvas.ground-motion{color:#cac1bc;border-color:#ebe0db #f8f4f2 #0f0f0f}
:root[data-theme="dark"] .s-ground-sand.s-ground-sand.s-ground-sand.s-finish-voile{background:linear-gradient(118deg,#0a0a0a,#454545 32%,#0a0a0a 52%,#050505 74%,#0a0a0a)!important;--ink-2:color-mix(in srgb,#c2c2c2 50%,#ffffff)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#9e9e9e 50%,#ffffff)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#b0b0b0 50%,#ffffff)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#8fb0ff 50%,#ffffff)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-ground-sand.s-ground-sand.s-ground-sand.s-finish-voile>canvas.ground-motion{color:#050505;border-color:#0a0a0a #454545 #0a0909}
.s-ground-blush.s-ground-blush.s-ground-blush.s-finish-voile{background:linear-gradient(118deg,#f1d8d7,#faf1f1 32%,#f1d8d7 52%,#cdb8b7 74%,#f1d8d7)!important;--ink-2:color-mix(in srgb,#574846 50%,#251c1b)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#5f4f4c 50%,#251c1b)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#7a4752 50%,#251c1b)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#3b5ba9 50%,#251c1b)!important;--page-focus:var(--focus)!important}
.s-ground-blush.s-ground-blush.s-ground-blush.s-finish-voile>canvas.ground-motion{color:#cdb8b7;border-color:#f1d8d7 #faf1f1 #0f0f0f}
:root[data-theme="dark"] .s-ground-blush.s-ground-blush.s-ground-blush.s-finish-voile{background:linear-gradient(118deg,#2a1d1f,#594f50 32%,#2a1d1f 52%,#150f10 74%,#2a1d1f)!important;--ink-2:color-mix(in srgb,#ecdcd8 50%,#faf3f1)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#dccac6 50%,#faf3f1)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#f2c4c9 50%,#faf3f1)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#a9c1ff 50%,#faf3f1)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-ground-blush.s-ground-blush.s-ground-blush.s-finish-voile>canvas.ground-motion{color:#150f10;border-color:#2a1d1f #594f50 #0a0909}
.s-ground-brown.s-ground-brown.s-ground-brown.s-finish-voile{background:linear-gradient(118deg,#574846,#5e4f4d 32%,#574846 52%,#2c2423 74%,#574846)!important;--ink-2:color-mix(in srgb,#ecdcd8 50%,#faf3f1)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#dccac6 50%,#faf3f1)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#f2c4c9 50%,#faf3f1)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#a9c1ff 50%,#faf3f1)!important;--page-focus:var(--focus)!important}
.s-ground-brown.s-ground-brown.s-ground-brown.s-finish-voile>canvas.ground-motion{color:#2c2423;border-color:#574846 #5e4f4d #0a0909}
:root[data-theme="dark"] .s-ground-brown.s-ground-brown.s-ground-brown.s-finish-voile{background:linear-gradient(118deg,#221e1d,#534f4f 32%,#221e1d 52%,#110f0f 74%,#221e1d)!important;--ink-2:color-mix(in srgb,#ecdcd8 50%,#faf3f1)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#dccac6 50%,#faf3f1)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#f2c4c9 50%,#faf3f1)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#a9c1ff 50%,#faf3f1)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-ground-brown.s-ground-brown.s-ground-brown.s-finish-voile>canvas.ground-motion{color:#110f0f;border-color:#221e1d #534f4f #0a0909}
:root[data-theme="dark"] .s-night-ivory.s-night-ivory.s-night-ivory.s-night-ivory.s-finish-voile{background:linear-gradient(118deg,#f1ece2,#f9f7f3 32%,#f1ece2 52%,#c3bbae 74%,#f1ece2)!important;--ink-2:color-mix(in srgb,#45403a 50%,#1a1816)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#5a544d 50%,#1a1816)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#6e5a3e 50%,#1a1816)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#2f55c9 50%,#1a1816)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-night-ivory.s-night-ivory.s-night-ivory.s-night-ivory.s-finish-voile>canvas.ground-motion{color:#c3bbae;border-color:#f1ece2 #f9f7f3 #0f0f0f}
:root[data-theme="dark"] .s-night-ivory.s-night-ivory.s-night-ivory.s-night-ivory.s-finish-shimmer{background:linear-gradient(118deg,#f1ece2,#f9f7f3 32%,#f1ece2 52%,#c3bbae 74%,#f1ece2)!important;--ink-2:color-mix(in srgb,#45403a 50%,#1a1816)!important;--page-ink-2:var(--ink-2)!important;--ink-3:color-mix(in srgb,#5a544d 50%,#1a1816)!important;--page-ink-3:var(--ink-3)!important;--accent:color-mix(in srgb,#6e5a3e 50%,#1a1816)!important;--page-accent:var(--accent)!important;--focus:color-mix(in srgb,#2f55c9 50%,#1a1816)!important;--page-focus:var(--focus)!important}
:root[data-theme="dark"] .s-night-ivory.s-night-ivory.s-night-ivory.s-night-ivory.s-finish-shimmer>canvas.ground-motion{color:#c3bbae;border-color:#f1ece2 #f9f7f3 #0f0f0f}
:root:not([data-theme="dark"]) .s-ground-cream:not([class*="s-finish-"])+.s-ground-cream:not([class*="s-finish-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-cream:not([class*="s-finish-"]):not([class*="s-night-"])+.s-ground-cream:not([class*="s-finish-"]):not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-cream:not([class*="s-finish-"])+.s-ground-cream:not([class*="s-finish-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-cream:not([class*="s-finish-"]):not([class*="s-night-"])+.s-ground-cream:not([class*="s-finish-"]):not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-cream:not([class*="s-finish-"]).s-night-ivory+.s-ground-cream:not([class*="s-finish-"]).s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-cream:not([class*="s-finish-"]).s-night-ivory+.s-ground-cream:not([class*="s-finish-"]).s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-cream.s-finish-silk+.s-ground-cream.s-finish-silk.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-cream.s-finish-silk:not([class*="s-night-"])+.s-ground-cream.s-finish-silk:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-cream.s-finish-silk+.s-ground-cream.s-finish-silk.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-cream.s-finish-silk:not([class*="s-night-"])+.s-ground-cream.s-finish-silk:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-cream.s-finish-silk.s-night-ivory+.s-ground-cream.s-finish-silk.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-cream.s-finish-silk.s-night-ivory+.s-ground-cream.s-finish-silk.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-cream.s-finish-satin+.s-ground-cream.s-finish-satin.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-cream.s-finish-satin:not([class*="s-night-"])+.s-ground-cream.s-finish-satin:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-cream.s-finish-satin+.s-ground-cream.s-finish-satin.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-cream.s-finish-satin:not([class*="s-night-"])+.s-ground-cream.s-finish-satin:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-cream.s-finish-satin.s-night-ivory+.s-ground-cream.s-finish-satin.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-cream.s-finish-satin.s-night-ivory+.s-ground-cream.s-finish-satin.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-cream.s-finish-voile+.s-ground-cream.s-finish-voile.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-cream.s-finish-voile:not([class*="s-night-"])+.s-ground-cream.s-finish-voile:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-cream.s-finish-voile+.s-ground-cream.s-finish-voile.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-cream.s-finish-voile:not([class*="s-night-"])+.s-ground-cream.s-finish-voile:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-cream.s-finish-voile.s-night-ivory+.s-ground-cream.s-finish-voile.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-cream.s-finish-voile.s-night-ivory+.s-ground-cream.s-finish-voile.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-cream.s-finish-shimmer+.s-ground-cream.s-finish-shimmer.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-cream.s-finish-shimmer:not([class*="s-night-"])+.s-ground-cream.s-finish-shimmer:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-cream.s-finish-shimmer+.s-ground-cream.s-finish-shimmer.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-cream.s-finish-shimmer:not([class*="s-night-"])+.s-ground-cream.s-finish-shimmer:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-cream.s-finish-shimmer.s-night-ivory+.s-ground-cream.s-finish-shimmer.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-cream.s-finish-shimmer.s-night-ivory+.s-ground-cream.s-finish-shimmer.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-white:not([class*="s-finish-"])+.s-ground-white:not([class*="s-finish-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-white:not([class*="s-finish-"]):not([class*="s-night-"])+.s-ground-white:not([class*="s-finish-"]):not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-white:not([class*="s-finish-"])+.s-ground-white:not([class*="s-finish-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-white:not([class*="s-finish-"]):not([class*="s-night-"])+.s-ground-white:not([class*="s-finish-"]):not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-white:not([class*="s-finish-"]).s-night-ivory+.s-ground-white:not([class*="s-finish-"]).s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-white:not([class*="s-finish-"]).s-night-ivory+.s-ground-white:not([class*="s-finish-"]).s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-white.s-finish-silk+.s-ground-white.s-finish-silk.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-white.s-finish-silk:not([class*="s-night-"])+.s-ground-white.s-finish-silk:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-white.s-finish-silk+.s-ground-white.s-finish-silk.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-white.s-finish-silk:not([class*="s-night-"])+.s-ground-white.s-finish-silk:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-white.s-finish-silk.s-night-ivory+.s-ground-white.s-finish-silk.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-white.s-finish-silk.s-night-ivory+.s-ground-white.s-finish-silk.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-white.s-finish-satin+.s-ground-white.s-finish-satin.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-white.s-finish-satin:not([class*="s-night-"])+.s-ground-white.s-finish-satin:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-white.s-finish-satin+.s-ground-white.s-finish-satin.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-white.s-finish-satin:not([class*="s-night-"])+.s-ground-white.s-finish-satin:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-white.s-finish-satin.s-night-ivory+.s-ground-white.s-finish-satin.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-white.s-finish-satin.s-night-ivory+.s-ground-white.s-finish-satin.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-white.s-finish-voile+.s-ground-white.s-finish-voile.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-white.s-finish-voile:not([class*="s-night-"])+.s-ground-white.s-finish-voile:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-white.s-finish-voile+.s-ground-white.s-finish-voile.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-white.s-finish-voile:not([class*="s-night-"])+.s-ground-white.s-finish-voile:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-white.s-finish-voile.s-night-ivory+.s-ground-white.s-finish-voile.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-white.s-finish-voile.s-night-ivory+.s-ground-white.s-finish-voile.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-white.s-finish-shimmer+.s-ground-white.s-finish-shimmer.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-white.s-finish-shimmer:not([class*="s-night-"])+.s-ground-white.s-finish-shimmer:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-white.s-finish-shimmer+.s-ground-white.s-finish-shimmer.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-white.s-finish-shimmer:not([class*="s-night-"])+.s-ground-white.s-finish-shimmer:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-white.s-finish-shimmer.s-night-ivory+.s-ground-white.s-finish-shimmer.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-white.s-finish-shimmer.s-night-ivory+.s-ground-white.s-finish-shimmer.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-sand:not([class*="s-finish-"])+.s-ground-sand:not([class*="s-finish-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-sand:not([class*="s-finish-"]):not([class*="s-night-"])+.s-ground-sand:not([class*="s-finish-"]):not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-sand:not([class*="s-finish-"])+.s-ground-sand:not([class*="s-finish-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-sand:not([class*="s-finish-"]):not([class*="s-night-"])+.s-ground-sand:not([class*="s-finish-"]):not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-sand:not([class*="s-finish-"]).s-night-ivory+.s-ground-sand:not([class*="s-finish-"]).s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-sand:not([class*="s-finish-"]).s-night-ivory+.s-ground-sand:not([class*="s-finish-"]).s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-sand.s-finish-silk+.s-ground-sand.s-finish-silk.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-sand.s-finish-silk:not([class*="s-night-"])+.s-ground-sand.s-finish-silk:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-sand.s-finish-silk+.s-ground-sand.s-finish-silk.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-sand.s-finish-silk:not([class*="s-night-"])+.s-ground-sand.s-finish-silk:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-sand.s-finish-silk.s-night-ivory+.s-ground-sand.s-finish-silk.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-sand.s-finish-silk.s-night-ivory+.s-ground-sand.s-finish-silk.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-sand.s-finish-satin+.s-ground-sand.s-finish-satin.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-sand.s-finish-satin:not([class*="s-night-"])+.s-ground-sand.s-finish-satin:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-sand.s-finish-satin+.s-ground-sand.s-finish-satin.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-sand.s-finish-satin:not([class*="s-night-"])+.s-ground-sand.s-finish-satin:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-sand.s-finish-satin.s-night-ivory+.s-ground-sand.s-finish-satin.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-sand.s-finish-satin.s-night-ivory+.s-ground-sand.s-finish-satin.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-sand.s-finish-voile+.s-ground-sand.s-finish-voile.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-sand.s-finish-voile:not([class*="s-night-"])+.s-ground-sand.s-finish-voile:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-sand.s-finish-voile+.s-ground-sand.s-finish-voile.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-sand.s-finish-voile:not([class*="s-night-"])+.s-ground-sand.s-finish-voile:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-sand.s-finish-voile.s-night-ivory+.s-ground-sand.s-finish-voile.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-sand.s-finish-voile.s-night-ivory+.s-ground-sand.s-finish-voile.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-sand.s-finish-shimmer+.s-ground-sand.s-finish-shimmer.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-sand.s-finish-shimmer:not([class*="s-night-"])+.s-ground-sand.s-finish-shimmer:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-sand.s-finish-shimmer+.s-ground-sand.s-finish-shimmer.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-sand.s-finish-shimmer:not([class*="s-night-"])+.s-ground-sand.s-finish-shimmer:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-sand.s-finish-shimmer.s-night-ivory+.s-ground-sand.s-finish-shimmer.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-sand.s-finish-shimmer.s-night-ivory+.s-ground-sand.s-finish-shimmer.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-blush:not([class*="s-finish-"])+.s-ground-blush:not([class*="s-finish-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-blush:not([class*="s-finish-"]):not([class*="s-night-"])+.s-ground-blush:not([class*="s-finish-"]):not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-blush:not([class*="s-finish-"])+.s-ground-blush:not([class*="s-finish-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-blush:not([class*="s-finish-"]):not([class*="s-night-"])+.s-ground-blush:not([class*="s-finish-"]):not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-blush:not([class*="s-finish-"]).s-night-ivory+.s-ground-blush:not([class*="s-finish-"]).s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-blush:not([class*="s-finish-"]).s-night-ivory+.s-ground-blush:not([class*="s-finish-"]).s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-blush.s-finish-silk+.s-ground-blush.s-finish-silk.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-blush.s-finish-silk:not([class*="s-night-"])+.s-ground-blush.s-finish-silk:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-blush.s-finish-silk+.s-ground-blush.s-finish-silk.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-blush.s-finish-silk:not([class*="s-night-"])+.s-ground-blush.s-finish-silk:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-blush.s-finish-silk.s-night-ivory+.s-ground-blush.s-finish-silk.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-blush.s-finish-silk.s-night-ivory+.s-ground-blush.s-finish-silk.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-blush.s-finish-satin+.s-ground-blush.s-finish-satin.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-blush.s-finish-satin:not([class*="s-night-"])+.s-ground-blush.s-finish-satin:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-blush.s-finish-satin+.s-ground-blush.s-finish-satin.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-blush.s-finish-satin:not([class*="s-night-"])+.s-ground-blush.s-finish-satin:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-blush.s-finish-satin.s-night-ivory+.s-ground-blush.s-finish-satin.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-blush.s-finish-satin.s-night-ivory+.s-ground-blush.s-finish-satin.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-blush.s-finish-voile+.s-ground-blush.s-finish-voile.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-blush.s-finish-voile:not([class*="s-night-"])+.s-ground-blush.s-finish-voile:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-blush.s-finish-voile+.s-ground-blush.s-finish-voile.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-blush.s-finish-voile:not([class*="s-night-"])+.s-ground-blush.s-finish-voile:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-blush.s-finish-voile.s-night-ivory+.s-ground-blush.s-finish-voile.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-blush.s-finish-voile.s-night-ivory+.s-ground-blush.s-finish-voile.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-blush.s-finish-shimmer+.s-ground-blush.s-finish-shimmer.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-blush.s-finish-shimmer:not([class*="s-night-"])+.s-ground-blush.s-finish-shimmer:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-blush.s-finish-shimmer+.s-ground-blush.s-finish-shimmer.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-blush.s-finish-shimmer:not([class*="s-night-"])+.s-ground-blush.s-finish-shimmer:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-blush.s-finish-shimmer.s-night-ivory+.s-ground-blush.s-finish-shimmer.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-blush.s-finish-shimmer.s-night-ivory+.s-ground-blush.s-finish-shimmer.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-brown:not([class*="s-finish-"])+.s-ground-brown:not([class*="s-finish-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-brown:not([class*="s-finish-"]):not([class*="s-night-"])+.s-ground-brown:not([class*="s-finish-"]):not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-brown:not([class*="s-finish-"])+.s-ground-brown:not([class*="s-finish-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-brown:not([class*="s-finish-"]):not([class*="s-night-"])+.s-ground-brown:not([class*="s-finish-"]):not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-brown:not([class*="s-finish-"]).s-night-ivory+.s-ground-brown:not([class*="s-finish-"]).s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-brown:not([class*="s-finish-"]).s-night-ivory+.s-ground-brown:not([class*="s-finish-"]).s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-brown.s-finish-silk+.s-ground-brown.s-finish-silk.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-brown.s-finish-silk:not([class*="s-night-"])+.s-ground-brown.s-finish-silk:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-brown.s-finish-silk+.s-ground-brown.s-finish-silk.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-brown.s-finish-silk:not([class*="s-night-"])+.s-ground-brown.s-finish-silk:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-brown.s-finish-silk.s-night-ivory+.s-ground-brown.s-finish-silk.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-brown.s-finish-silk.s-night-ivory+.s-ground-brown.s-finish-silk.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-brown.s-finish-satin+.s-ground-brown.s-finish-satin.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-brown.s-finish-satin:not([class*="s-night-"])+.s-ground-brown.s-finish-satin:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-brown.s-finish-satin+.s-ground-brown.s-finish-satin.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-brown.s-finish-satin:not([class*="s-night-"])+.s-ground-brown.s-finish-satin:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-brown.s-finish-satin.s-night-ivory+.s-ground-brown.s-finish-satin.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-brown.s-finish-satin.s-night-ivory+.s-ground-brown.s-finish-satin.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-brown.s-finish-voile+.s-ground-brown.s-finish-voile.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-brown.s-finish-voile:not([class*="s-night-"])+.s-ground-brown.s-finish-voile:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-brown.s-finish-voile+.s-ground-brown.s-finish-voile.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-brown.s-finish-voile:not([class*="s-night-"])+.s-ground-brown.s-finish-voile:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-brown.s-finish-voile.s-night-ivory+.s-ground-brown.s-finish-voile.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-brown.s-finish-voile.s-night-ivory+.s-ground-brown.s-finish-voile.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root:not([data-theme="dark"]) .s-ground-brown.s-finish-shimmer+.s-ground-brown.s-finish-shimmer.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2),:root[data-theme="dark"] .s-ground-brown.s-finish-shimmer:not([class*="s-night-"])+.s-ground-brown.s-finish-shimmer:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root:not([data-theme="dark"]) .s-ground-brown.s-finish-shimmer+.s-ground-brown.s-finish-shimmer.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before,:root[data-theme="dark"] .s-ground-brown.s-finish-shimmer:not([class*="s-night-"])+.s-ground-brown.s-finish-shimmer:not([class*="s-night-"]).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .s-ground-brown.s-finish-shimmer.s-night-ivory+.s-ground-brown.s-finish-shimmer.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2){padding-top:0!important}
:root[data-theme="dark"] .s-ground-brown.s-finish-shimmer.s-night-ivory+.s-ground-brown.s-finish-shimmer.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)::before{content:none!important}
:root[data-theme="dark"] .page-head--about.s-night-ivory+.letter:not(.s-night-ivory).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)>.wrap,:root[data-theme="dark"] .page-head--about:not([class*="s-night-"])+.letter.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)>.wrap{padding-top:0!important}
:root[data-theme="dark"] .page-artists .page-head.s-night-ivory:has(+:not(.s-night-ivory).s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)),:root[data-theme="dark"] .page-artists .page-head:not([class*="s-night-"]):has(+.s-night-ivory.s-join-up.s-join-up.s-join-up:not(#join-weight):not(#join-weight-2)){padding-bottom:0!important}
@media (max-width: 599px) {
  .s-h-l.s-h-l.s-h-l { min-height: calc(22rem * .7) !important; }
}
@media (forced-colors: active) {
  .s-finish-silk>canvas.ground-motion{display:none}
  .s-finish-satin>canvas.ground-motion{display:none}
  .s-finish-voile>canvas.ground-motion{display:none}
}

/* Her wordmark's write-on in the hero (the site's own since the launch round, 2026-10-27; it was an option,
   data-motion; Logo lab's CSS version, #276): a pen writes the
   script, "by MLA" fades in, then the still wordmark. Its SVG is inline in the home page's hero beside the logo span
   (src/partials/logo-write.html); it plays where the hero shows the wordmark (data-logo wordmark, or bold-r-caps, a
   header logo) and the screen is 768 px wide or more. A phone, or another logo, keeps the sign-in wipe (site.css); under
   reduced motion it is the still wordmark. In every visitor's /css/site.css, after site.css's own rules. The
   write-on's own rules below are Logo lab's write-on/the-reserve-logo-write.css and site/hero-write.css, as built there,
   but for display: the rules above decide it (site.css hides the SVG everywhere else). A window widened or narrowed
   across 768 px (a phone turned) shows the other, which plays again from its start, as anything newly shown does. */
@media (min-width: 768px) {
  :root:is([data-logo="wordmark"], [data-logo="bold-r-caps"]) .hero-write { display: block; }
  :root:is([data-logo="wordmark"], [data-logo="bold-r-caps"]) .logo--hero { display: none; }
}

/* Her wordmark's write-on (brand-assets/reserve-logo-l1c-2026-10-25/make/write-on.cjs builds it and this file):
   each pen's dash runs from its start to its end, "by MLA" fade in, then the still wordmark fades in over the drawing.
   The drawing shows only while it animates: without this file, or under reduced motion, the SVG is the still wordmark.
   3.50s in all. */
.ww__ink { animation: ww-on 3.497s linear; }
@keyframes ww-on { from, to { visibility: visible; } }
.ww__pen { animation: linear both; }
.ww__p0 { animation-name: ww-p0; animation-duration: 0.256s; animation-delay: 0.000s; }
@keyframes ww-p0 { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
.ww__p1 { animation-name: ww-p1; animation-duration: 0.241s; animation-delay: 0.346s; }
@keyframes ww-p1 { from { stroke-dashoffset: 396; } to { stroke-dashoffset: 0; } }
.ww__p2 { animation-name: ww-p2; animation-duration: 0.148s; animation-delay: 0.677s; }
@keyframes ww-p2 { from { stroke-dashoffset: 244; } to { stroke-dashoffset: 0; } }
.ww__p3 { animation-name: ww-p3; animation-duration: 0.169s; animation-delay: 0.825s; }
@keyframes ww-p3 { from { stroke-dashoffset: 278; } to { stroke-dashoffset: 0; } }
.ww__p4 { animation-name: ww-p4; animation-duration: 0.122s; animation-delay: 0.994s; }
@keyframes ww-p4 { from { stroke-dashoffset: 201; } to { stroke-dashoffset: 0; } }
.ww__p5 { animation-name: ww-p5; animation-duration: 0.264s; animation-delay: 1.206s; }
@keyframes ww-p5 { from { stroke-dashoffset: 434; } to { stroke-dashoffset: 0; } }
.ww__p6 { animation-name: ww-p6; animation-duration: 0.444s; animation-delay: 1.560s; }
@keyframes ww-p6 { from { stroke-dashoffset: 728; } to { stroke-dashoffset: 0; } }
.ww__p7 { animation-name: ww-p7; animation-duration: 0.151s; animation-delay: 2.004s; }
@keyframes ww-p7 { from { stroke-dashoffset: 249; } to { stroke-dashoffset: 0; } }
.ww__p8 { animation-name: ww-p8; animation-duration: 0.030s; animation-delay: 2.245s; }
@keyframes ww-p8 { from { stroke-dashoffset: 51; } to { stroke-dashoffset: 0; } }
.ww__p9 { animation-name: ww-p9; animation-duration: 0.138s; animation-delay: 2.275s; }
@keyframes ww-p9 { from { stroke-dashoffset: 228; } to { stroke-dashoffset: 0; } }
.ww__p10 { animation-name: ww-p10; animation-duration: 0.092s; animation-delay: 2.413s; }
@keyframes ww-p10 { from { stroke-dashoffset: 153; } to { stroke-dashoffset: 0; } }
.ww__p11 { animation-name: ww-p11; animation-duration: 0.103s; animation-delay: 2.505s; }
@keyframes ww-p11 { from { stroke-dashoffset: 171; } to { stroke-dashoffset: 0; } }
.ww__p12 { animation-name: ww-p12; animation-duration: 0.121s; animation-delay: 2.608s; }
@keyframes ww-p12 { from { stroke-dashoffset: 201; } to { stroke-dashoffset: 0; } }
.ww__p13 { animation-name: ww-p13; animation-duration: 0.056s; animation-delay: 2.729s; }
@keyframes ww-p13 { from { stroke-dashoffset: 93; } to { stroke-dashoffset: 0; } }
.ww__p14 { animation-name: ww-p14; animation-duration: 0.081s; animation-delay: 2.785s; }
@keyframes ww-p14 { from { stroke-dashoffset: 135; } to { stroke-dashoffset: 0; } }
.ww__p15 { animation-name: ww-p15; animation-duration: 0.092s; animation-delay: 2.866s; }
@keyframes ww-p15 { from { stroke-dashoffset: 152; } to { stroke-dashoffset: 0; } }
.ww__p16 { animation-name: ww-p16; animation-duration: 0.075s; animation-delay: 2.958s; }
@keyframes ww-p16 { from { stroke-dashoffset: 125; } to { stroke-dashoffset: 0; } }
.ww__p17 { animation-name: ww-p17; animation-duration: 0.115s; animation-delay: 3.033s; }
@keyframes ww-p17 { from { stroke-dashoffset: 190; } to { stroke-dashoffset: 0; } }
.ww__p5b { animation-name: ww-p5; animation-duration: .12s; animation-delay: 2.155s; }
.ww__mla { animation: ww-fade .6s ease-out 2.897s both; }
.ww__still { animation: ww-fade .2s linear 3.297s both; }
@keyframes ww-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ww__ink, .ww__pen, .ww__mla, .ww__still { animation: none; } }

/* The CSS write-on in the hero (a proposal for the site; make/variants.mjs measures it): the write-on's SVG goes inline
   in place of the hero's logo span, as <svg class="ww hero-write" …>, and this file follows the write-on's own CSS
   (write-on/the-reserve-logo-write.css). Sized exactly as the hero sizes its logo box (site.css: .logo--hero), so the
   write-on ends on the same logo in the same place.
   It draws the wordmark only (hence its own 1183 / 511, not --logo-ratio), so it is wired only when the site's logo is
   the wordmark (src/data/look.json options.logo, data-logo on <html>); with the bold R or the script R the hero keeps
   its logo span. */
.hero-write { width: min(100%, 48rem); height: auto; margin-inline: auto; color: var(--logo); }
.page-home .hero-write { width: min(100%, 100% * var(--logo-scale, 1), 64rem * var(--logo-scale, 1), 46svh * 1183 / 511 * var(--logo-scale, 1)); } /* her size of the logo, as site.css's */
@media (max-height: 700px) and (min-width: 640px) { .page-home .hero-write { width: min(100%, 100% * var(--logo-scale, 1), 64rem * var(--logo-scale, 1), 34svh * 1183 / 511 * var(--logo-scale, 1)); } }
@media (forced-colors: active) { .hero-write { color: CanvasText; } }

/* Squircle corners (her pick, the site's own since the launch round, 2026-10-27; it was an option, data-corners): the
   site's shapes with continuous corners, Mockup 2's method (planning/redesign-2026-10-25/mockup-2.md on branch
   mla-reserve-mockup-2). In every visitor's stylesheet, after site.css (scripts/build.mjs).
   CSS's corner-shape: squircle (CSS Borders 4: superellipse(2), an exponent of 2^2 = 4 inside each border-radius box)
   where the browser has it (Chrome and Edge 139+; not Safari 26 or iOS: MDN and caniuse, read 2026-10-25). Elsewhere
   the fills (buttons, photos) are masked with four corners of the same curve and two rectangles (Mockup 2's
   scripts/m2/squircle.mjs; its known-answer check in Chrome: 10 of 48,000 pixels differ from the native curve by more
   than 64 of 255, against 1,419 for a plain radius), and the shapes drawn as a line (fields, chips, the panel, the
   menu, an outlined button: .btn--line) keep a plain radius: a mask would cut their line at the corners. So a masked
   fill's focus ring is drawn inside it, in its text's colour, and a filled button's hover is a tone of its fill, not a
   line. */
:root { --r-btn: 14px; --r-chip: 12px; --r-input: 12px; --r-card: 32px; }
:root .btn:not(.btn--line):hover { --tone: color-mix(in srgb, var(--btn) 84%, var(--ground)); background: var(--tone); color: var(--btn-ink); border-color: var(--tone); }
@supports (corner-shape: squircle) {
  :root :is(.btn, .chip, .app, .join__panel, .top__menu nav, .photo img, .field input, .field select, .field textarea, .joinbar__email input) { corner-shape: squircle; }
}
@supports not (corner-shape: squircle) {
  :root {
    --sq-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100L0.03 81.91L0.11 74.43L0.24 68.69L0.43 63.87L0.67 59.64L0.97 55.83L1.31 52.35L1.72 49.13L2.18 46.12L2.69 43.3L3.26 40.65L3.88 38.14L4.56 35.76L5.3 33.5L6.09 31.34L6.94 29.29L7.85 27.33L8.82 25.46L9.84 23.68L10.93 21.98L12.08 20.35L13.29 18.8L14.57 17.32L15.91 15.91L17.32 14.57L18.8 13.29L20.35 12.08L21.98 10.93L23.68 9.84L25.46 8.82L27.33 7.85L29.29 6.94L31.34 6.09L33.5 5.3L35.76 4.56L38.14 3.88L40.65 3.26L43.3 2.69L46.12 2.18L49.13 1.72L52.35 1.31L55.83 0.97L59.64 0.67L63.87 0.43L68.69 0.24L74.43 0.11L81.91 0.03L100 0L100 100Z'/%3E%3C/svg%3E");
    --sq-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 100L99.97 81.91L99.89 74.43L99.76 68.69L99.57 63.87L99.33 59.64L99.03 55.83L98.69 52.35L98.28 49.13L97.82 46.12L97.31 43.3L96.74 40.65L96.12 38.14L95.44 35.76L94.7 33.5L93.91 31.34L93.06 29.29L92.15 27.33L91.18 25.46L90.16 23.68L89.07 21.98L87.92 20.35L86.71 18.8L85.43 17.32L84.09 15.91L82.68 14.57L81.2 13.29L79.65 12.08L78.02 10.93L76.32 9.84L74.54 8.82L72.67 7.85L70.71 6.94L68.66 6.09L66.5 5.3L64.24 4.56L61.86 3.88L59.35 3.26L56.7 2.69L53.88 2.18L50.87 1.72L47.65 1.31L44.17 0.97L40.36 0.67L36.13 0.43L31.31 0.24L25.57 0.11L18.09 0.03L0 0L0 100Z'/%3E%3C/svg%3E");
    --sq-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0L0.03 18.09L0.11 25.57L0.24 31.31L0.43 36.13L0.67 40.36L0.97 44.17L1.31 47.65L1.72 50.87L2.18 53.88L2.69 56.7L3.26 59.35L3.88 61.86L4.56 64.24L5.3 66.5L6.09 68.66L6.94 70.71L7.85 72.67L8.82 74.54L9.84 76.32L10.93 78.02L12.08 79.65L13.29 81.2L14.57 82.68L15.91 84.09L17.32 85.43L18.8 86.71L20.35 87.92L21.98 89.07L23.68 90.16L25.46 91.18L27.33 92.15L29.29 93.06L31.34 93.91L33.5 94.7L35.76 95.44L38.14 96.12L40.65 96.74L43.3 97.31L46.12 97.82L49.13 98.28L52.35 98.69L55.83 99.03L59.64 99.33L63.87 99.57L68.69 99.76L74.43 99.89L81.91 99.97L100 100L100 0Z'/%3E%3C/svg%3E");
    --sq-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M100 0L99.97 18.09L99.89 25.57L99.76 31.31L99.57 36.13L99.33 40.36L99.03 44.17L98.69 47.65L98.28 50.87L97.82 53.88L97.31 56.7L96.74 59.35L96.12 61.86L95.44 64.24L94.7 66.5L93.91 68.66L93.06 70.71L92.15 72.67L91.18 74.54L90.16 76.32L89.07 78.02L87.92 79.65L86.71 81.2L85.43 82.68L84.09 84.09L82.68 85.43L81.2 86.71L79.65 87.92L78.02 89.07L76.32 90.16L74.54 91.18L72.67 92.15L70.71 93.06L68.66 93.91L66.5 94.7L64.24 95.44L61.86 96.12L59.35 96.74L56.7 97.31L53.88 97.82L50.87 98.28L47.65 98.69L44.17 99.03L40.36 99.33L36.13 99.57L31.31 99.76L25.57 99.89L18.09 99.97L0 100L0 0Z'/%3E%3C/svg%3E");
  }
  :root :is(.btn:not(.btn--line), .photo img) {
    border-radius: 0;
    -webkit-mask:
      var(--sq-tl) left top / var(--r) var(--r) no-repeat, var(--sq-tr) right top / var(--r) var(--r) no-repeat,
      var(--sq-bl) left bottom / var(--r) var(--r) no-repeat, var(--sq-br) right bottom / var(--r) var(--r) no-repeat,
      linear-gradient(#000 0 0) center / calc(100% - 2 * var(--r) + 2px) 100% no-repeat,
      linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--r) + 2px) no-repeat;
    mask:
      var(--sq-tl) left top / var(--r) var(--r) no-repeat, var(--sq-tr) right top / var(--r) var(--r) no-repeat,
      var(--sq-bl) left bottom / var(--r) var(--r) no-repeat, var(--sq-br) right bottom / var(--r) var(--r) no-repeat,
      linear-gradient(#000 0 0) center / calc(100% - 2 * var(--r) + 2px) 100% no-repeat,
      linear-gradient(#000 0 0) center / 100% calc(100% - 2 * var(--r) + 2px) no-repeat;
  }
  :root .btn:not(.btn--line) { --r: var(--r-btn); }
  :root .photo img { --r: var(--r-card); }
  /* the mask would cut a ring drawn outside the shape: inside it, in the colour the fill's text has */
  :root .btn:not(.btn--line):focus-visible { outline-color: var(--btn-ink); outline-offset: -4px; }
  /* in Edit, a plain radius: her selection and hover rings are drawn outside a piece, where the mask would cut them */
  :root.editing .btn:not(.btn--line) { -webkit-mask: none; mask: none; border-radius: var(--r-btn); }
}