/* Ordinary Wonders Bureau — the whole visual layer. Design law: the judge's brief (2026-10-04).
   A 1970s naturalist field-guide colour plate × an invented agency's typed field bulletin.
   Tokens first (§1), then type (§2), then components in page order (§3). Nothing moves on its own. */

/* ───────────────────────── fonts ───────────────────────── */

@font-face { font-family: "Source Serif 4"; src: url(/assets/ss4-roman-opsz20-60-wght400-700.b43eb3d178.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(/assets/ss4-italic-opsz20-wght400-600.5b9ad1cfe7.woff2) format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/assets/courierprime-400.21bf7ff8d9.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url(/assets/courierprime-700.0662241571.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cinzel Wordmark"; src: url(/assets/cinzel-wordmark.c6a1ac0b9d.woff2) format("woff2"); font-weight: 500 700; font-display: block; }
/* Metric-matched fallbacks (prep/fonts.py) so the swap doesn't move the page. */
@font-face { font-family: "Source Serif 4 Fallback"; src: local("Georgia"); size-adjust: 102.2%; ascent-override: 101.3%; descent-override: 32.8%; line-gap-override: 0%; }
@font-face { font-family: "Courier Prime Fallback"; src: local("Courier New"); size-adjust: 99.9%; ascent-override: 78.2%; descent-override: 34.2%; line-gap-override: 0%; }

/* ───────────────────────── tokens ───────────────────────── */

/* Two themes, one pair of inks. Day is forest ink on cream paper; night is the same pair swapped: cream ink on a
   forest-night ground, and the button inverts with them (forest on cream, cream on forest). Paper and ink never change
   with the season. */
:root {
  --paper: #f6f0e4; --sheet: #fbf8f0; --well: #ede5d5;
  --ink: #032a1d; --ink-2: #42563b; --control: #6f7a66;
  --action: #1f3b2c; --on-action: #fbf8f0; --focus: #032a1d;
  --signal: #a3401b; --gold: #d5a163; --rule: #dcd3c1;
  /* The ground under Printful's white-ground photos and the lit plate: they multiply onto it (§cutouts). */
  --plate: #fbf9ef;
  --backdrop: rgb(3 42 29 / .32);
  --tray-edge: inset 0 0 0 1px rgb(3 42 29 / .10), inset 0 10px 24px -14px rgb(3 42 29 / .22);
  --mark-forest: var(--ink); --mark-gold: var(--gold); --mark-underlay: var(--paper);
  --moon-unlit: #032a1d; /* light: a gold crescent on a forest disc; a paper-coloured dark side reads as gibbous */
  color-scheme: light;

  /* Seasons (content/site.md `season`, on <html data-season>). A season is four inks and nothing else: --s-deep (the
     seal, the fleuron, the season label), --s-pale (the orb behind the hero), --s-land (the mesa and footer band) and
     --s-flower (the wildflowers). Each theme maps them to the same roles below, so day and night show the same season.
     Without a season the engravings keep the base sage and there is no orb. */
  --s-deep: var(--ink-2); --s-pale: transparent; --s-land: var(--ink-2); --s-flower: var(--ink-2);
  --land: var(--s-land); --land-2: var(--s-flower); --orb: var(--s-pale); --season-ink: var(--s-deep); --land-dim: 1;
  /* The mount (after Ffern's sand frame): a narrow band of the well around photographs and the plate. Declared here
     so it resolves to the page's well and keeps it inside a lit specimen. */
  --mount: var(--well);

  --serif: "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
  --mono: "Courier Prime", "Courier Prime Fallback", "Courier New", monospace;
  --logo: "Cinzel Wordmark", "Source Serif 4", Georgia, serif;

  --t-display: clamp(2.5rem, 1.6rem + 3vw, 4.5rem);
  --t-h1: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
  --t-h2: clamp(1.75rem, 1.35rem + 1.2vw, 2.375rem);
  --t-body: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);

  --pad: clamp(16px, 4.4vw, 64px);
  --max: 1312px;
  --gap: 24px;
  --section: 96px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
:root[data-season=autumn] { --s-deep: #7c4a2a; --s-pale: #f2dcc2; --s-land: #8e6a52; --s-flower: #b07f3e; }
:root[data-season=winter] { --s-deep: #46606d; --s-pale: #e2e9ea; --s-land: #77868c; --s-flower: #8d9ea2; }
:root[data-season=spring] { --s-deep: #4c6639; --s-pale: #ebefd5; --s-land: #6f8a5a; --s-flower: #b48490; }
:root[data-season=summer] { --s-deep: #6b590c; --s-pale: #f4e7b6; --s-land: #6f8a4a; --s-flower: #cfa21f; }
:root[data-theme=dark] {
  --paper: #0f1f18; --sheet: #152820; --well: #1c3128;
  --ink: #ece6d6; --ink-2: #b3bea9; --control: #7f8f80;
  --action: #ece6d6; --on-action: #0f1f18; --focus: #d5a163;
  --signal: #e5916a; --rule: #2a3f35;
  --plate: #e6dfcb;
  --backdrop: rgb(0 0 0 / .6);
  --tray-edge: inset 0 0 0 1px rgb(0 0 0 / .45), inset 0 10px 24px -14px rgb(0 0 0 / .45);
  --moon-unlit: #0f1f18;
  /* The same season, by night: the engravings take its inks lifted toward the cream (the mesa warmed by the flower
     ink, and dimmed, since a tonal engraving drawn light on dark reads as a negative), the orb is its pale step as a
     soft glow of moonlight, and the seal and season label take the pale step. */
  --land: color-mix(in oklab, color-mix(in oklab, var(--s-land), var(--s-flower)) 72%, #ece6d6);
  --land-2: color-mix(in oklab, var(--s-flower) 75%, #ece6d6);
  --land-dim: .72;
  --orb: radial-gradient(closest-side, color-mix(in srgb, var(--s-pale) 22%, transparent) 0, color-mix(in srgb, var(--s-pale) 16%, transparent) 72%, transparent 100%);
  --season-ink: color-mix(in oklab, var(--s-pale) 85%, var(--s-flower));
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --paper: #0f1f18; --sheet: #152820; --well: #1c3128;
    --ink: #ece6d6; --ink-2: #b3bea9; --control: #7f8f80;
    --action: #ece6d6; --on-action: #0f1f18; --focus: #d5a163;
    --signal: #e5916a; --rule: #2a3f35;
    --plate: #e6dfcb;
    --backdrop: rgb(0 0 0 / .6);
    --tray-edge: inset 0 0 0 1px rgb(0 0 0 / .45), inset 0 10px 24px -14px rgb(0 0 0 / .45);
    --moon-unlit: #0f1f18;
    /* The same season, by night: the engravings take its inks lifted toward the cream (the mesa warmed by the flower
       ink, and dimmed, since a tonal engraving drawn light on dark reads as a negative), the orb is its pale step as a
       soft glow of moonlight, and the seal and season label take the pale step. */
    --land: color-mix(in oklab, color-mix(in oklab, var(--s-land), var(--s-flower)) 72%, #ece6d6);
    --land-2: color-mix(in oklab, var(--s-flower) 75%, #ece6d6);
    --land-dim: .72;
    --orb: radial-gradient(closest-side, color-mix(in srgb, var(--s-pale) 22%, transparent) 0, color-mix(in srgb, var(--s-pale) 16%, transparent) 72%, transparent 100%);
    --season-ink: color-mix(in oklab, var(--s-pale) 85%, var(--s-flower));
    color-scheme: dark;
  }
}
/* A lit specimen: light tokens inside, whatever the theme (the plate, the receipt). By night its sheet is the dimmer
   plate, so it reads as paper under a lamp rather than a lit screen. */
.lit {
  --paper: #f7f3ea; --sheet: var(--plate); --well: #efe9da;
  --ink: #032a1d; --ink-2: #42563b; --control: #6f7a66;
  --action: #1f3b2c; --on-action: #fbf9ef; --focus: #032a1d; --signal: #a3401b; --rule: #d8d6c9;
  color: var(--ink);
  background: var(--sheet);
  color-scheme: light;
}

@media (max-width: 759px) { :root { --gap: 16px; --section: 64px; } }

/* ───────────────────────── base ───────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--serif);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 560; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
h1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -.012em; }
h2 { font-size: var(--t-h2); line-height: 1.12; letter-spacing: -.01em; }
h3 { font-size: 1.125rem; line-height: 1.3; font-weight: 500; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
i, em { font-style: italic; }
b, strong { font-weight: 600; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
main:focus { outline: none; }
::selection { background: var(--gold); color: #032a1d; }

.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: absolute; left: 8px; top: -100px; z-index: 50; padding: 12px 16px; background: var(--sheet); color: var(--ink); border-radius: 2px; }
.skip:focus { top: 8px; }

/* The data voice: Courier Prime. Caps only on short labels; never a sentence a reader must read. */
.mono, .eyebrow, .mono-link, .trail, .fieldlog, .counter, .facts dt, .field-card, .tile-label, .tile-go, .hero-label, .gen-tag, .edition-code, .edition-moon {
  font-family: var(--mono); font-size: 14px; line-height: 1.4; font-weight: 400;
}
.eyebrow, .mono-link, .trail, .fieldlog, .facts dt, .field-card dt, .tile-label, .tile-go, .hero-label, .plate-caption .mono, .label, .edition-code, .edition-moon {
  text-transform: uppercase; letter-spacing: .08em;
}
.eyebrow { letter-spacing: .1em; color: var(--ink-2); }
.eyebrow a { text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.mono-link { text-decoration: none; color: var(--ink); white-space: nowrap; }
.mono-link:hover { text-decoration: underline; }
.small { font-size: 1rem; line-height: 1.5; color: var(--ink-2); }

/* ───────────────────────── layout ───────────────────────── */

.masthead-in, .footer-in, main > *:not(.hero, dialog, .sticky-buy, script) {
  width: min(100% - 2 * var(--pad), var(--max));
  margin-inline: auto;
}
.section { margin-top: var(--section); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 24px; }

/* ───────────────────────── buttons ───────────────────────── */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 48px; padding: 0 28px;
  background: var(--action); color: var(--on-action);
  border: 0; border-radius: 2px;
  font: 600 1.0625rem/1.2 var(--serif);
  text-decoration: none;
  transition: opacity 160ms var(--ease);
}
.button:hover { opacity: .9; text-decoration: none; }
.button:disabled, .button[aria-disabled=true] { opacity: .6; cursor: progress; }
.button-tall { min-height: 56px; }
.button-wide { width: 100%; }
.text-button { padding: 10px 0; min-height: 44px; background: none; border: 0; text-decoration: underline; text-underline-offset: .18em; font-size: 1rem; }
.error { color: var(--signal); font-size: 1rem; line-height: 1.5; }

/* ───────────────────────── masthead (§3.1) ───────────────────────── */

.masthead-in {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 18px 0 16px;
  border-bottom: 1px solid var(--ink-2);
}
.fieldlog { color: var(--ink-2); display: grid; }
.lockup { display: grid; justify-items: center; gap: 6px; color: var(--ink); text-decoration: none; }
.lockup .mark { width: 52px; height: 52px; max-width: none; flex: none; }
.wordmark { display: grid; justify-items: center; font-family: var(--logo); font-size: clamp(1rem, .8rem + .9vw, 1.75rem); line-height: 1; }
.wm-name { font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.wm-bureau {
  display: flex; align-items: center; gap: .6em; width: 100%;
  margin-top: .3em; font-size: .48em; font-weight: 500; letter-spacing: .42em; text-transform: uppercase;
}
.wm-bureau::before, .wm-bureau::after { content: ""; flex: 1; height: 1px; background: currentColor; }
.wm-bureau { padding-left: .42em; } /* balance the trailing letter-space */
.masthead-in { grid-template-areas: "log lockup right"; }
.fieldlog { grid-area: log; }
.masthead-in > .lockup { grid-area: lockup; }
.masthead-right { grid-area: right; display: flex; justify-content: flex-end; align-items: center; gap: 20px; }
.tools { display: flex; align-items: center; gap: 4px; }
.nav ul { display: flex; gap: 28px; }
.nav a { font-size: 17px; text-decoration: none; padding: 10px 0; }
.nav a:hover, .nav a[aria-current] { text-decoration: underline; }
.moon-btn {
  width: 44px; height: 44px; padding: 3px; display: grid; place-items: center;
  background: none; border: 0; border-radius: 999px; color: var(--ink);
}
.moon-btn svg { width: 38px; height: 38px; }
.moon-btn:hover, .moon-btn:focus-visible { box-shadow: inset 0 0 0 1px var(--control); }
@media (prefers-reduced-motion: no-preference) {
  .moon-btn svg { transition: transform 160ms var(--ease); }
  .moon-btn:hover svg, .moon-btn:focus-visible svg { transform: rotate(-12deg) scale(1.08); }
}
.moon-dark { fill: var(--moon-unlit); }
.moon-lit { fill: var(--gold); }
.moon-rim { fill: none; stroke: var(--ink); stroke-width: 1; }
.cart-link { display: inline-flex; align-items: center; gap: .3em; height: 44px; background: none; border: 0; padding: 0 4px; font-size: 17px; line-height: 1; white-space: nowrap; }
.cart-link:hover { text-decoration: underline; }
.cart-count { display: inline-block; min-width: 2.2ch; }

.theme-card {
  position: fixed; inset: auto; margin: 0; width: 300px; padding: 20px;
  background: var(--sheet); color: var(--ink);
  border: 1px solid var(--control); border-radius: 2px;
}
.theme-card:not(:popover-open) { display: none; }
.theme-card::backdrop { background: transparent; }
.theme-head { display: flex; justify-content: space-between; align-items: flex-start; }
.theme-title { font-weight: 600; margin-bottom: 8px; }
.theme-moon-art { width: 96px; height: 96px; margin: -12px -12px -16px 0; }
.theme-moon-art .moon-rim { stroke-width: .5; }
.theme-choices { border: 0; padding: 0; display: grid; }
.theme-choices label { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; min-height: 44px; cursor: pointer; }
.theme-choices input { appearance: none; flex: none; width: 18px; height: 18px; margin: 3px 0 0; border: 1.5px solid var(--control); border-radius: 999px; background: var(--sheet); }
.theme-choices input:checked { border-color: var(--action); background: var(--action); box-shadow: inset 0 0 0 3px var(--sheet); }
@media (forced-colors: active) { .theme-choices input { appearance: auto; } }
.theme-choices span { display: grid; font-size: 1rem; line-height: 1.35; }
.theme-choices span b { font-weight: 600; }
.theme-choices span { color: var(--ink-2); }
.theme-choices span b { color: var(--ink); }
.theme-moon { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 14px; color: var(--ink-2); }

@media (max-width: 1023px) { .nav ul { gap: 20px; } .masthead-right { gap: 12px; } }
/* Under 360px the side-by-side lockup and the tools don't fit one row: the mark stacks over a smaller wordmark,
   and keeps its size rather than collapsing (A11Y-11). */
@media (max-width: 359px) {
  .masthead-in > .lockup { grid-template-columns: auto !important; justify-items: start; gap: 4px !important; }
  .masthead-in .lockup .mark { width: 32px; height: 32px; min-width: 32px; }
  .masthead-in .wordmark { font-size: 14px; }
}
@media (max-width: 759px) {
  /* Row 1 (lockup, then moon and cart) is a wrapping flex row, so wider text spacing (WCAG 1.4.12) pushes the tools
     onto their own line instead of past the edge; the nav is always row 2. */
  .masthead-in {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 4px 12px; padding: 12px 0 0;
  }
  .fieldlog { display: none; }
  .masthead-in > .lockup { order: 1; grid-template-columns: auto auto; align-items: center; gap: 10px; }
  .tools { order: 2; margin-left: auto; }
  .nav { order: 3; flex-basis: 100%; }
  .lockup .mark { width: 36px; height: 36px; min-width: 36px; }
  .wordmark { justify-items: stretch; font-size: 16px; }
  .masthead-right { display: contents; }
  .nav ul { gap: 24px; }
  .nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
}

/* ───────────────────────── the tray (§5.2) ───────────────────────── */

.tray {
  position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--shirt); border-radius: 2px; box-shadow: var(--tray-edge);
}
.tray-collar { position: absolute; inset: 0 0 auto; width: 100%; height: auto; }
.tray-collar .rib { fill: color-mix(in oklab, var(--shirt) 88%, black); }
.tray-collar .neck { fill: var(--tray-ground, var(--paper)); }
.tray-print { position: absolute; left: calc((100% - var(--pw)) / 2); top: 27.5%; width: var(--pw); height: auto; }

/* ───────────────────────── cutouts (Amendment 3) ───────────────────────── */

/* A Printful flat-lay cut out of its white ground: the shirt itself lies on the page, no frame, no added shadow. */
.cutout img { width: 100%; height: auto; }
/* Printful's on-body photos keep their white ground. They read as a lit specimen plate in both themes: the cream
   sheet behind (--plate, a step dimmer by night), and multiply so the white becomes that sheet and nothing else shifts
   by more than a few percent. */
.on-body { isolation: isolate; background: var(--plate); }
.on-body img { mix-blend-mode: multiply; }

/* ───────────────────────── hero (§3.2) ───────────────────────── */

.hero {
  --side: max(var(--pad), (100% - var(--max)) / 2);
  display: grid; grid-template-columns: var(--side) minmax(0, 5fr) minmax(0, 7fr) var(--side);
  align-items: center;
  min-height: 680px; padding-top: 16px;
}
.hero-copy { grid-column: 2; display: grid; gap: 24px; justify-items: start; padding-block: 48px; padding-right: var(--gap); }
.display { font-size: var(--t-display); line-height: 1.02; letter-spacing: -.02em; font-weight: 600; max-width: 12ch; }
.standfirst { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-2); max-width: 34ch; }
.hero-copy .button { margin-top: 8px; }
.hero-plate { grid-column: 3 / 5; position: relative; min-height: 660px; display: grid; align-items: end; padding-bottom: 32px; }
.art { display: block; background: currentColor; color: var(--land); mask-repeat: no-repeat; mask-size: contain; }
.art-flowers { color: var(--land-2); }
.art-mesa { mask-image: url(/assets/line-mesa-mask.185ff0c16f.png); } /* the raster mask once MARKS writes it (Amendment 4) */
.art-flowers { mask-image: url(/assets/line-wildflowers.7420625576.svg); }
/* The mesa spans the plate behind the shirt, full strength (line art, not a tint), and fades in from the left so no
   straight edge shows: the art's own mask intersected with a 14% ramp. Its ridge sits behind the shirt's chest, so
   the shoulders stand above it and the hem stands in the grass. */
.hero-mesa {
  opacity: var(--land-dim);
  position: absolute; left: 0; right: 0; bottom: 104px; height: 380px;
  -webkit-mask-image: url(/assets/line-mesa-mask.185ff0c16f.png), linear-gradient(90deg, transparent 0, #000 14%);
  mask-image: url(/assets/line-mesa-mask.185ff0c16f.png), linear-gradient(90deg, transparent 0, #000 14%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  mask-size: auto 100%, 100% 100%; mask-position: right bottom, 0 0; mask-repeat: no-repeat;
}
/* The season's orb rises behind the mesa: painted first in the plate, so the engraving draws over it and the shirt
   stands in front. Transparent with no season. */
.hero-plate::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: clamp(260px, 30vw, 420px); aspect-ratio: 1; right: calc(var(--side) + 2%); top: 6%;
  border-radius: 50%; background: var(--orb); /* a colour by day, a glow by night */
}
.hero-specimen { position: relative; z-index: 1; display: grid; gap: 8px; width: min(540px, 72%); margin-left: max(0px, calc((100% - var(--side)) * .56 - 270px)); text-decoration: none; color: var(--ink); }
.hero-specimen:hover .hero-name { text-decoration: underline; }
/* The flat-lay's canvas has about 8% of white below the hem: pull the caption up under the shirt. */
.hero-cut-wrap { position: relative; display: block; margin-bottom: -6%; }
/* The sprig grows in front of the hem's lower-left corner (about 20% across, 92% down the square image), overlapping
   the shirt by about 40px and clear of the print. */
.hero-flowers { position: absolute; z-index: 2; width: 28%; aspect-ratio: 150 / 190; left: -1%; bottom: 7.6%; mask-position: left bottom; }
.hero-label { position: absolute; right: var(--side); bottom: 40px; color: var(--ink-2); z-index: 2; }
.tray-hero { --tray-ground: var(--paper); }
.plate-caption { display: grid; gap: 2px; position: relative; }
.plate-caption .mono { color: var(--ink-2); }
.hero-name { font-size: 1.125rem; line-height: 1.3; }
.price { font-weight: 600; font-variant-numeric: tabular-nums; }
.not-yet { font-size: 1rem; color: var(--ink-2); }

/* Below 1180px the caption's name runs into the plate's right-hand corner, where the label sits on the caption's
   last lines and reads as part of it. The label takes its own line under the price instead; the mesa rises with the
   specimen, so the hem still stands in the grass. */
@media (max-width: 1179px) {
  .hero-plate { padding-bottom: 64px; }
  .hero-label { bottom: 24px; }
  .hero-mesa { bottom: 136px; }
}
@media (max-width: 1023px) {
  .hero { grid-template-columns: var(--side) minmax(0, 1fr) minmax(0, 1fr) var(--side); min-height: 0; }
  .hero-specimen { width: 86%; margin-left: 4%; }
  .hero-mesa { height: 300px; }
}
@media (max-width: 759px) {
  .hero { grid-template-columns: var(--pad) minmax(0, 1fr) var(--pad); padding-top: 8px; }
  .hero-copy { grid-column: 2; padding-block: 24px 24px; padding-right: 0; gap: 16px; }
  .standfirst { font-size: 1.0625rem; }
  .hero-copy p:last-child { width: 100%; }
  .hero-copy .button { width: 100%; margin-top: 0; }
  /* Phone: the shirt takes the full width right under the button; the mesa stands behind its lower half. The band
     has the mask's own proportions (line-mesa-mask.png, 1184 × 760) at the plate's full width, so the drawing is
     whole: the ridge and the stems keep their natural tops instead of a band-shaped crop's straight edge. */
  .hero-plate { grid-column: 1 / -1; min-height: 0; display: flex; flex-direction: column; align-items: stretch; padding: 0 var(--pad); }
  .hero-mesa { left: 0; right: 0; bottom: 88px; height: auto; aspect-ratio: 1184 / 760; mask-size: contain, 100% 100%; mask-position: center bottom, 0 0; }
  .hero-specimen { width: 100%; margin: 0; }
  .hero-flowers { display: none; }
  .hero-label { position: static; order: 3; align-self: flex-end; margin-top: 4px; }
}

/* The season's seal (parts.mts seasonSeal): inked at a slant in the plate's upper left, over the sky of the mesa and
   clear of the shirt. */
.season-seal { color: var(--season-ink); overflow: visible; }
.season-seal text { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; fill: currentColor; }
.hero-seal { position: absolute; z-index: 2; width: 124px; height: 124px; left: 3%; top: 7%; transform: rotate(-9deg); }
@media (max-width: 1023px) { .hero-seal { width: 104px; height: 104px; left: auto; right: var(--side); top: 2%; } }
@media (max-width: 759px) {
  .hero-plate:has(> .hero-seal) { padding-top: 20px; }
  .hero-seal { width: 96px; height: 96px; right: calc(var(--pad) + 8px); top: 4px; }
}

/* The edition band (home, under the hero; parts.mts editionBand): the season named twice, as a code in Courier and
   by name in the serif, and tonight's moon as its status line. A band of the well across the content column, after
   Ffern's section bands; the code is the season's one coloured word. */
.edition {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px 24px;
  margin-top: 56px; padding: 18px 24px; background: var(--well); border-radius: 2px;
}
.edition-code { color: var(--season-ink); }
.edition-name { font-size: 1.375rem; line-height: 1.2; font-style: italic; text-align: center; }
.edition-moon { justify-self: end; color: var(--ink-2); }
.edition + .section { margin-top: 64px; }
@media (max-width: 759px) {
  .edition { grid-template-columns: 1fr; justify-items: center; text-align: center; margin-top: 40px; padding: 16px; gap: 6px; }
  .edition-moon { justify-self: center; }
  .edition + .section { margin-top: 48px; }
}

/* ───────────────────────── cards (§3.3) ───────────────────────── */

.cards { display: grid; gap: 32px var(--gap); grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); }
.cards-4 { --cols: 4; }
.card a { display: grid; grid-template-rows: auto auto 1fr; gap: 12px; block-size: 100%; text-decoration: none; color: var(--ink); }
.card-media { position: relative; display: block; }
/* The cutout's canvas is Printful's square; the shirt fills about 94% of its width. */
.card-media-cut { aspect-ratio: 1; }
.card-media-cut > .cutout img { aspect-ratio: 1; object-fit: contain; }
/* The Printful photo on hover or focus. display:none until then, so its lazy image loads on intent only. */
.card-photo { position: absolute; inset: 0; display: none; opacity: 0; transition: opacity 160ms var(--ease), display 160ms allow-discrete; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) {
  .card a:hover .card-photo { display: block; opacity: 1; }
  @starting-style { .card a:hover .card-photo { opacity: 0; } }
}
.card a:focus-visible .card-photo { display: block; opacity: 1; }
@starting-style { .card a:focus-visible .card-photo { opacity: 0; } }
.card-name { font-size: 1.125rem; font-weight: 500; line-height: 1.3; }
.card a:hover .card-name { text-decoration: underline; }
.card-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: -4px; align-self: end; }
.card-meta .price { font-size: 17px; }
.card-colors { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 14px; color: var(--ink-2); white-space: nowrap; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 10px; height: 10px; border-radius: 999px; background: var(--c); box-shadow: inset 0 0 0 1px var(--control); }
.view-all-phone { display: none; }
/* One line under a grid's heading while nothing in it can be bought. */
.grid-note { margin: -12px 0 24px; max-width: 62ch; font-size: 17px; line-height: 1.5; color: var(--ink-2); }

@media (max-width: 1279px) { .cards { --cols: 4; } .cards-5 > :nth-child(n+5) { display: none; } }
@media (max-width: 1023px) { .cards { --cols: 3; } .cards-5 > :nth-child(n+4), .cards-4 > :nth-child(n+4) { display: none; } }
@media (max-width: 759px) {
  .cards { --cols: 2; row-gap: 24px; }
  .cards-5 > :nth-child(-n+4), .cards-4 > :nth-child(-n+4) { display: block; }
  .card-meta { flex-wrap: wrap; }
  .featured .section-head .mono-link, .more .section-head .mono-link { display: none; }
  .view-all-phone { display: block; margin-top: 24px; }
}
/* The shop shows every card. */
.shop-collection .cards > * { display: block !important; }

/* ───────────────────────── collection tiles (§3.4) ───────────────────────── */

.tiles { display: grid; grid-template-columns: repeat(var(--tiles, 4), minmax(0, 1fr)); gap: var(--gap); }
.tile { display: grid; }
/* Tiles in a row share a height; the label's row takes the slack, so EXPLORE sits on the tile's foot in every tile
   whether its label runs one line or three. */
.tile a { display: grid; grid-template-rows: auto 1fr auto; align-content: start; gap: 4px; padding: 16px 16px 20px; background: var(--well); text-decoration: none; color: var(--ink); border-radius: 2px; justify-items: center; text-align: center; }
.tile-media { display: flex; justify-content: center; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 12px; }
/* Amendment 10: the lead design's whole print lies on a field of its lead shirt colour, mounted on the tile like a
   plate in a drawer. The build crops the print to its art and bakes in an even margin, so the field (the image's own
   background) is the slot's height and the print's width, with the same space on all four sides. Shirt colours are
   product truth: they keep their hue in forced colours, and no text sits on them. */
.tile-art {
  height: 100%; width: auto; max-width: 100%; object-fit: contain;
  background: var(--shirt); border-radius: 2px; box-shadow: var(--tray-edge); forced-color-adjust: none;
  transition: transform 160ms var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .tile a:hover .tile-art, .tile a:focus-visible .tile-art { transform: scale(1.03); }
}
.tile-label { font-size: 15px; font-weight: 400; letter-spacing: .14em; } /* Amendment 8: Courier Prime 700 is the stamp's only */
.tile a:hover .tile-label, .tile a:focus-visible .tile-label { text-decoration: underline; text-underline-offset: .25em; }
.tile-go { color: var(--ink-2); }
@media (max-width: 1023px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* An odd last tile spans the row rather than sitting alone in half of it; its slot keeps its neighbours' height. */
  .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  /* Exactly a half-width tile's slot height: (half the row, less the tile's 16px padding each side) × 3/4. */
  .tiles { container-type: inline-size; }
  .tile:last-child:nth-child(odd) .tile-media { aspect-ratio: auto; height: calc(((100cqw - var(--gap)) / 2 - 32px) * .75); }
}
@media (max-width: 759px) {
  .tiles { grid-template-columns: 1fr; gap: 12px; }
  .tile a { grid-template-columns: 112px 1fr; grid-template-rows: auto auto; align-content: center; justify-items: start; text-align: left; padding: 0; gap: 2px 16px; min-height: 112px; }
  .tile-media { grid-row: 1 / 3; width: 112px; height: 112px; aspect-ratio: auto; margin: 0; padding: 8px; }
  .tile:last-child:nth-child(odd) { grid-column: auto; }
  .tile:last-child:nth-child(odd) .tile-media { aspect-ratio: auto; height: 112px; }
  .tile-label { align-self: end; }
  .tile-go { align-self: start; }
}

/* ───────────────────────── story band (§3.5) ───────────────────────── */

/* The season's fleuron between hairlines (parts.mts seasonRule): the break before the story band. */
.season-rule { display: flex; align-items: center; gap: 20px; margin-top: var(--section); color: var(--season-ink); }
.season-rule::before, .season-rule::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.season-rule svg { flex: none; width: 160px; height: 32px; }
.season-rule + .section { margin-top: 56px; }
@media (max-width: 759px) { .season-rule svg { width: 128px; height: 26px; } .season-rule + .section { margin-top: 40px; } }



.story { display: grid; grid-template-columns: 5fr 3fr 4fr; gap: var(--gap); align-items: end; }
.story-copy { display: grid; gap: 20px; align-self: center; }
.story-copy p { max-width: 46ch; }
.story-flowers { height: 320px; mask-position: center bottom; }
.under-study { align-self: center; display: grid; gap: 12px; }
.under-study ul { font-family: var(--mono); font-size: 14px; line-height: 2.2; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); }
@media (max-width: 1023px) { .story { grid-template-columns: 1fr 1fr; } .story-flowers { display: none; } }
@media (max-width: 759px) {
  .story { grid-template-columns: 1fr; gap: 24px; }
  .story-flowers { display: block; height: 120px; order: 2; }
  .under-study { order: 3; }
}

/* ───────────────────────── footer (§3.9) ───────────────────────── */

.footer { margin-top: 128px; }
.footer-in { display: grid; grid-template-columns: 4fr 4fr 4fr; gap: 32px var(--gap); }
.footer-brand { display: grid; gap: 16px; align-content: start; justify-items: start; }
.lockup-footer { grid-template-columns: auto auto; align-items: center; gap: 12px; }
.lockup-footer .mark { width: 48px; height: 48px; }
.lockup-footer .wordmark { font-size: 1.125rem; justify-items: stretch; }
.footer-brand p { font-size: 17px; }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.footer-nav a, .footer-contact a { display: inline-block; padding: 6px 0; font-size: 1rem; }
.footer-contact { display: grid; align-content: start; gap: 4px; }
.footer .disclosure { grid-column: 1 / -1; max-width: 66ch; }
.trademark { grid-column: 1 / -1; font-size: 14px; color: var(--ink-2); margin-top: -20px; }
.footer-base { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 14px; color: var(--ink-2); }
.footer-base p:last-child { text-transform: uppercase; letter-spacing: .08em; }
.footer-art { position: relative; height: 160px; margin-top: 32px; overflow: hidden; }
/* One continuous band (MARKS's strip: the wildflowers whole at its left end, the mesa whole at its right, a drawn
   ground line between). Two halves of the band each mask the strip at the band's height, the left half pinned to
   the strip's left end and the right half to its right end, so each engraving shows once, whole, at any width, and
   the ground line runs through the seam. The height scales with the viewport so the two ends never meet on a phone
   (they need about 5.7× the height in width). */
.footer-band { height: clamp(48px, 16vw, 160px); color: var(--land); opacity: var(--land-dim); }
/* The halves overlap by 80px and cross-fade there, so the hand-drawn line's small step at the seam blends away. */
.footer-band::before, .footer-band::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: calc(50% + 40px); background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: auto 100%, 100% 100%; mask-size: auto 100%, 100% 100%;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.footer-band::before {
  left: 0;
  -webkit-mask-image: url(/assets/line-footer-mask.edebacfa6f.png), linear-gradient(to left, transparent, #000 80px);
  mask-image: url(/assets/line-footer-mask.edebacfa6f.png), linear-gradient(to left, transparent, #000 80px);
  -webkit-mask-position: left bottom, 0 0; mask-position: left bottom, 0 0;
}
.footer-band::after {
  right: 0;
  -webkit-mask-image: url(/assets/line-footer-mask.edebacfa6f.png), linear-gradient(to right, transparent, #000 80px);
  mask-image: url(/assets/line-footer-mask.edebacfa6f.png), linear-gradient(to right, transparent, #000 80px);
  -webkit-mask-position: right bottom, 0 0; mask-position: right bottom, 0 0;
}
.footer-art .art { position: absolute; bottom: 0; height: 160px; }
.footer-art .art-flowers { left: max(0px, (100% - 1440px) / 2); width: 300px; mask-position: left bottom; }
.footer-art .art-mesa { right: max(0px, (100% - 1440px) / 2); width: 420px; mask-position: right bottom; }
@media (max-width: 759px) {
  .footer { margin-top: 96px; }
  .footer-in { grid-template-columns: 1fr; }
  .footer-nav a, .footer-contact a { padding: 0; min-height: 44px; display: inline-flex; align-items: center; }
  .trademark { margin-top: 0; }
  .footer-art:not(.footer-band) { height: 112px; }
  .footer-art .art { height: 112px; }
  .footer-art .art-flowers { width: 180px; }
  .footer-art .art-mesa { width: 240px; }
}

.disclosure { font-size: 1rem; line-height: 1.5; color: var(--ink-2); }

/* ───────────────────────── page heads, prose ───────────────────────── */

.page-head { padding-top: 48px; display: grid; gap: 12px; }
.page-head .lede { color: var(--ink-2); }
/* The collection jump links: one unbordered line of mono links, middots between them (the separator trails its link,
   so a wrapped line never starts with one). Underlined, so they read as links and not a label line (C-16); bordered
   chips would be five badges over the per-viewport ceiling. */
.jump ul { display: flex; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.jump li { display: inline-flex; align-items: center; }
.jump li:not(:last-child)::after { content: "·" / ""; padding: 0 12px; color: var(--ink-2); font-family: var(--mono); }
.jump a {
  display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap;
  font-family: var(--mono); font-size: 14px; text-transform: uppercase; letter-spacing: .08em;
  text-decoration-thickness: 1px; text-underline-offset: .3em;
}
.jump a:hover { text-decoration-thickness: 2px; }
/* A phone fits about one name a line: the line becomes a column index, with no separators left dangling. */
@media (max-width: 759px) {
  .jump ul { flex-direction: column; align-items: flex-start; }
  .jump li:not(:last-child)::after { content: none; }
}
.page-head .grid-note { margin: 0; }
.collection-lede { max-width: 62ch; margin: -8px 0 24px; color: var(--ink-2); }
.shop-collection { scroll-margin-top: 24px; margin-top: var(--section); }
/* Collections pack side by side as column groups of one card grid (C-01): each spans as many columns as it has
   designs, and subgrid lines up every heading, lede and card row across them. Every card is a 5-up card's width. */
@media (min-width: 760px) {
  .shop-grid { --grid-cols: 5; display: grid; grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr)); gap: 64px var(--gap); margin-top: 64px; grid-auto-flow: row dense; }
  .shop-grid > .shop-collection {
    margin-top: 0; grid-column: span min(var(--n), var(--grid-cols)); grid-row: span 3;
    display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start;
    padding-top: 24px; border-top: 1px solid var(--rule);
  }
  .shop-grid .section-head { margin-bottom: 8px; }
  .shop-grid h2 { font-size: 1.75rem; }
  .shop-grid .collection-lede { margin: 0 0 24px; max-width: none; font-size: 1rem; line-height: 1.5; }
  .shop-grid .shop-collection > .cards { --cols: min(var(--n), var(--grid-cols)); }
}
@media (min-width: 760px) and (max-width: 1279px) { .shop-grid { --grid-cols: 4; } }
@media (min-width: 760px) and (max-width: 1023px) { .shop-grid { --grid-cols: 3; } }

.prose-page { max-width: 66ch; padding-top: 48px; }
.prose-page h1 { margin-bottom: 24px; }
.prose { display: grid; gap: 1em; }
.prose h2 { font-size: 1.5rem; line-height: 1.2; margin-top: .8em; }
.prose h3 { font-size: 1.1875rem; font-weight: 600; margin-top: .6em; }
.prose ul { list-style: disc; padding-left: 1.2em; display: grid; gap: .4em; }
.prose ol { list-style: decimal; padding-left: 1.4em; display: grid; gap: .4em; }
.prose blockquote { padding-left: 20px; border-left: 2px solid var(--rule); color: var(--ink-2); }
.prose hr { border: 0; border-top: 1px solid var(--rule); width: 100%; margin: 1em 0; }
.prose code { font-family: var(--mono); font-size: .9em; }
.prose img { border-radius: 2px; }
/* A page's photo (Amendment 2): right under the H1, a visible caption, and the "Generated image" tag as text. */
.page-photo { margin: 0 0 32px; display: grid; gap: 8px; }
.page-photo-media { position: relative; }
.page-photo img { width: 100%; height: auto; border-radius: 2px; outline: 6px solid var(--mount); outline-offset: -6px; }
.page-photo-cutout img { outline: none; border-radius: 0; }
.page-photo figcaption { font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.contact-line { margin-bottom: 24px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.contact-line .mono { text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }

/* ───────────────────────── product page (§3.6) ───────────────────────── */

.trail { padding-top: 16px; color: var(--ink-2); }
.trail ol { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; }
.trail li { padding: 6px 0; }
.trail li + li::before { content: "/"; margin-right: 8px; }
.trail a { text-decoration: none; }
.trail a:hover { text-decoration: underline; }
.specimen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px var(--gap); margin-top: 16px; align-items: start; }

.gallery { display: grid; grid-template-columns: 80px minmax(0, 600px); gap: 16px; }
/* The photos travel with the buy box, which always runs longer (C-04); not on short desktop windows, where the
   pinned gallery's foot would never be seen. */
@media (min-width: 760px) { .gallery { position: sticky; top: 24px; } }
@media (min-width: 1024px) and (max-height: 799px) { .gallery { position: static; } }
.thumbs { display: grid; gap: 12px; align-content: start; }
.thumbs button { display: block; width: 80px; padding: 0; border: 0; background: none; border-radius: 2px; }
.thumbs button[aria-current] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
/* The selected thumbnail already wears a ring 2-4px out; focus there draws 6-8px out, with a 2px gap of page ground
   between, so focusing it is a second ring and not a 1px thickening of the first (WCAG 2.4.7). The thumbnails don't
   scroll, and the 12px gap between them leaves the ring room. */
.thumbs button[aria-current]:focus-visible { outline-offset: 6px; }
/* Photo thumbnails only: the tray thumbnail's print keeps its own width and place (F-02). */
.thumbs picture img { width: 80px; height: 100px; object-fit: cover; border-radius: 2px; }
.thumbs picture.cutout img { object-fit: contain; }
.stage { position: relative; }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 2px; }
.slides:focus-visible { outline: none; }
/* The slides are positioned, so an inset outline on the strip paints under them (WCAG 2.4.7): the ring is drawn by
   the stage, above the slides. It lies on a 3px border of page ground, so it always sits on --paper (brief §1.1),
   never on the photo: dark mode's gold ring is about 2:1 on the cream plate and the Ivory tray (1.4.11). A border,
   not an inset shadow, because forced colours drop shadows; there the band is Canvas (below). */
.stage:has(> .slides:focus-visible)::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: 2px;
  border: 3px solid var(--paper); outline: 2px solid var(--focus); outline-offset: -5px;
}
.slides::-webkit-scrollbar { display: none; }
.slide { flex: 0 0 100%; scroll-snap-align: start; }
.slide figure { position: relative; }
.slide picture, .slide picture img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
.slide picture.on-body { outline: 6px solid var(--mount); outline-offset: -6px; }
/* The flat-lay cutout lies on the page at 88% of the frame, so the sleeve tips clear its edges. */
.slide picture.cutout { display: grid; place-items: center; }
.slide picture.cutout img { width: 88%; aspect-ratio: 1; object-fit: contain; }
.slide figcaption { margin-top: 8px; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.gen-tag { position: absolute; left: 12px; bottom: 12px; padding: 6px; font-size: 13px; background: color-mix(in srgb, var(--sheet) 92%, transparent); color: var(--ink); border-radius: 2px; }
.slide-shot figcaption ~ .gen-tag { bottom: auto; }
.arrow {
  position: absolute; z-index: 1; top: calc(50% - 22px); width: 44px; height: 44px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--sheet) 92%, transparent); color: var(--ink);
  border: 1px solid var(--control); border-radius: 999px; font-size: 18px;
}
/* The arrows stand on the photo, so their 3px-offset ring would too (gold is about 2:1 on the cream plate and the
   Ivory tray). A ring of --sheet 7px wide lies under it, as the strip's band does, so the ring always sits on ground
   (brief §1.1, WCAG 1.4.11). It hugs the arrow's edge without covering its own --control border, and paints under the
   arrow's outline because the arrow is a stacking context (z-index) and the band is its negative layer. A border, not
   a shadow: forced colours drop shadows; there the band is Canvas (below). */
.arrow:focus-visible::before {
  content: ""; position: absolute; inset: -8px; z-index: -1; pointer-events: none;
  border: 7px solid var(--sheet); border-radius: 999px;
}
.arrow:disabled { opacity: 0; pointer-events: none; }
.arrow-prev { left: 12px; }
.arrow-next { right: 12px; }
.counter { display: none; }

.buy { display: grid; gap: 16px; align-content: start; }
.buy h1 { margin-top: -6px; }
.buy-price { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.buy-desc { display: grid; gap: .8em; }
.buy-form { display: grid; gap: 16px; }
.buy-form fieldset { border: 0; padding: 0; min-width: 0; }
.buy-form legend { padding: 0; margin-bottom: 8px; font-size: 1rem; width: 100%; display: flex; justify-content: space-between; align-items: baseline; }
.buy-form legend b { font-weight: 600; }
.swatches legend { display: block; }
.swatch-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Touch feedback comes from the selected ring and :focus-visible; the default tap flash would tint the shirt colour. */
.swatch, .chip, .theme-choices label, .button { -webkit-tap-highlight-color: transparent; }
.swatch { position: relative; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; border-radius: 999px; }
.swatch::before {
  content: ""; width: 40px; height: 40px; border-radius: 999px; background: var(--c);
  box-shadow: inset 0 0 0 1px var(--control);
  forced-color-adjust: none;
}
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch:has(input:checked)::before { box-shadow: inset 0 0 0 1px var(--control), 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.swatch:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 5px; }
.size-guide { font-size: 1rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: grid; place-items: center; min-width: 52px; height: 44px; padding: 0 10px;
  border: 1px solid var(--control); border-radius: 2px;
  font-family: var(--mono); font-size: 15px;
}
.chip input:checked + span { background: var(--action); border-color: var(--action); color: var(--on-action); }
.chip input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.chip input:disabled + span { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
.sizes[aria-invalid=true] .chip span { border-color: var(--signal); }
#size-field:focus { outline: none; }
#size-field:focus-visible { outline: 2px solid var(--focus); outline-offset: 6px; }
/* Forced colours. After the chip rules, so the selected chip's system colours win the cascade. The selected chip
   fills with Highlight, as the selected swatch's ring does: SelectedItem can be a pale tint on a light Canvas (1.4:1
   to 1.6:1 in Chrome's light palette). On-body photos stop multiplying: over a dark Canvas, multiply turns them black. */
@media (forced-colors: active) {
  .swatch::before { border: 1px solid CanvasText; }
  .swatch:has(input:checked)::before { outline: 3px solid Highlight; outline-offset: 2px; }
  .chip input:checked + span { forced-color-adjust: none; background: Highlight; color: HighlightText; border: 2px solid CanvasText; }
  .button { border: 2px solid ButtonText; }
  .thumbs button[aria-current] img { outline: 3px solid Highlight; outline-offset: -3px; }
  .tray, .dots i { forced-color-adjust: none; }
  .on-body img { mix-blend-mode: normal; }
  /* The strip ring's ground band stays Canvas: a forced border would turn CanvasText and merge with the ring. */
  .stage:has(> .slides:focus-visible)::after { border-color: Canvas; }
  /* So does the arrows' band, for the same reason. */
  .arrow:focus-visible::before { border-color: Canvas; }
}
.fit-note { font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.opens-note { font-size: 1rem; color: var(--ink-2); margin-top: -8px; }
.not-yet-note { font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.not-yet-note strong { color: var(--ink); }
.not-yet-note strong { display: block; font-size: 1.0625rem; }

.facts { display: grid; border-top: 1px solid var(--rule); }
.facts div { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.facts dt { color: var(--ink-2); padding-top: 3px; }
.facts dd { font-size: 1rem; line-height: 1.5; }

.accordions { display: grid; }
.accordions details { border-bottom: 1px solid var(--rule); }
.accordions details:first-child { border-top: 1px solid var(--rule); }
.accordions summary {
  display: flex; justify-content: space-between; align-items: center; min-height: 48px; cursor: pointer;
  list-style: none; font-size: 1.0625rem;
}
.accordions summary::-webkit-details-marker { display: none; }
.accordions summary::after { content: "+"; font-family: var(--mono); font-size: 20px; color: var(--ink-2); }
.accordions details[open] summary::after { content: "−"; }
.acc-body { display: grid; gap: 12px; padding: 4px 0 20px; font-size: 1rem; line-height: 1.5; }
.acc-body ul { list-style: disc; padding-left: 1.2em; display: grid; gap: 4px; }
.size-table { border-collapse: collapse; font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; width: 100%; max-width: 360px; }
.size-table th, .size-table td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule); font-weight: 400; }
.size-table thead th { color: var(--ink-2); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }

.sticky-buy { display: none; }

@media (max-width: 1023px) {
  .specimen { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .thumbs { display: none; }
  .counter { display: block; position: absolute; right: 12px; bottom: 12px; padding: 4px 8px; background: color-mix(in srgb, var(--sheet) 92%, transparent); border-radius: 2px; }
}
@media (max-width: 759px) {
  .trail li[aria-current] { display: none; }
  .trail li:nth-child(2)::after { content: ""; }
  .specimen { grid-template-columns: 1fr; gap: 24px; margin-top: 8px; }
  .gallery { margin-inline: calc(-1 * var(--pad)); }
  .slides, .slide picture img { border-radius: 0; }
  .slide figcaption { padding-inline: var(--pad); }
  .arrow { display: none; }
  .buy h1 { margin-top: 0; }
  .chip span { min-width: 44px; padding: 0 6px; }
  .chip-row { gap: 6px; }
  .sticky-buy:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 64px; padding: 10px var(--pad) calc(10px + env(safe-area-inset-bottom));
    background: var(--sheet); border-top: 1px solid var(--rule);
  }
  .sticky-buy .button { min-height: 44px; padding: 0 18px; }
  .page-product .footer { padding-bottom: 80px; }
  /* Tabbing scrolls focus clear of the bar (WCAG 2.4.11). */
  html:has(.sticky-buy:not([hidden])) { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* ───────────────────────── observe a little closer (§3.7) ───────────────────────── */

.observe { display: grid; grid-template-columns: 3fr 5fr 4fr; gap: var(--gap); align-items: start; padding-top: 48px; border-top: 1px solid var(--rule); }
.observe-copy { display: grid; gap: 16px; }
.observe-copy p { font-size: var(--t-body); }
.plate { display: grid; grid-template-columns: 56px 1fr 56px; gap: 12px; padding: 32px 32px 20px; border-radius: 2px; box-shadow: inset 0 0 0 6px var(--mount); }
.plate-frame { position: relative; grid-column: 1 / -1; }
.nowrap { white-space: nowrap; }
.plate-print { width: 100%; }
.plate figcaption { grid-column: 2; grid-row: 2; align-self: center; font-family: var(--mono); font-size: 14px; color: var(--ink-2); text-align: center; text-transform: uppercase; letter-spacing: .08em; }
.plate figcaption i { font-family: var(--serif); font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.observe-card { padding-top: 8px; }
.field-card { display: grid; gap: 0; font-size: 15px; border-top: 1px solid var(--rule); }
.field-card div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
.field-card dt { color: var(--ink-2); }
.field-card dd { text-transform: uppercase; letter-spacing: .08em; }

/* The hand lens (§4.1). It rests in the plate's caption row, bottom right, off the print (C-05). */
.lens-btn {
  position: relative; grid-column: 3; grid-row: 2; align-self: center; width: 56px; height: 56px; padding: 0; border-radius: 999px;
  border: 3px solid var(--gold); background: radial-gradient(circle at 35% 30%, rgb(255 255 255 / .75), rgb(255 255 255 / .18) 55%, rgb(213 161 99 / .18));
  /* A 1px forest ring outside the gold rim: the rim alone is about 2:1 on the lit plate (A11Y-14). */
  box-shadow: inset 0 0 0 1px rgb(3 42 29 / .25), 0 0 0 1px #032a1d;
  transition: opacity 160ms var(--ease);
  cursor: zoom-in;
}
.lens-btn::after { content: ""; position: absolute; width: 22px; height: 6px; right: -16px; bottom: -6px; background: #6b4d2a; border-radius: 3px; transform: rotate(45deg); }
.lens {
  position: absolute; left: 0; top: 0; width: 200px; height: 200px; border-radius: 999px; pointer-events: none;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 1px rgb(3 42 29 / .25);
  opacity: 0;
  /* At rest the lens sits on the resting glyph below the print's corner (centre 28px in from the right, 12 + 28px
     below the frame), scaled to its 56px. */
  transform: translate(calc(100cqw - 128px), calc(100cqh - 60px)) scale(.28);
}
/* The glass clips the magnified print; the handle stays outside it, the resting glyph's handle scaled by 1/.28, so
   picking the lens up has no seam (C-06). No outer shadow: light mode keeps its one shadow, the tray's. */
.lens-glass { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: var(--sheet); }
.lens-glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 32% 26%, rgb(255 255 255 / .26), transparent 38%), radial-gradient(circle, transparent 84%, rgb(3 42 29 / .14) 100%);
}
.lens::after { content: ""; position: absolute; width: 79px; height: 21px; right: -57px; bottom: -21px; background: #6b4d2a; border-radius: 11px; transform: rotate(45deg); }
.plate-frame { container-type: size; aspect-ratio: 1000 / 1201; }
.lifted .lens { opacity: 1; }
.plate:has(.lifted) .lens-btn { opacity: 0; }
.lens.glide { transition: transform 160ms var(--ease), opacity 160ms var(--ease); }
.lens-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.lens-world img, .lens-world .lens-pic { width: 100%; height: 100%; }
.marginalia { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--signal); stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lens .marginalia { stroke-width: 3px; }

.lens-dialog { width: min(920px, 100% - 32px); max-height: calc(100% - 32px); padding: 0; border: 1px solid var(--control); border-radius: 2px; background: var(--sheet); color: var(--ink); }
.lens-dialog::backdrop { background: var(--backdrop); }
.lens-dialog .drawer-head { padding: 16px 20px; }
/* Lit, like the plate. The pane fills the dialog, which clips an outset ring's sides, and an inset one would sit on
   the print (gold on the lit ground is about 2:1). So the pane carries a 5px border in its own colour, unseen at rest;
   on focus the border's outer 3px turns --sheet and the ring is drawn on its inner 2px, clear of the scrolled print. */
.lens-pane { overflow: auto; overscroll-behavior: contain; max-height: 65vh; background: #fbf9ef; border: 5px solid #fbf9ef; --signal: #a3401b; }
.lens-pane:focus-visible { border-color: var(--sheet); outline-offset: -5px; }
/* Forced colours: the band stays Canvas, so the border neither frames the pane at rest nor merges with the ring. */
@media (forced-colors: active) { .lens-pane, .lens-pane:focus-visible { border-color: Canvas; } }
/* Forced colours would set the lit plate's print and the lens pane on Canvas, where on a dark palette the prints'
   navy and brown inks all but vanish. Both keep the lit ground, as the trays and tiles keep their shirt colour: the
   frame takes it itself, or the figure's forced Canvas shows through. Kept out of forcing, the pane's ring names its
   system colour. */
@media (forced-colors: active) {
  .plate-frame, .lens-pane { forced-color-adjust: none; background: #fbf9ef; }
  .lens-pane:focus-visible { outline-color: Highlight; }
}
.lens-full { position: relative; width: 1200px; max-width: none; }
.lens-full img { width: 1200px; max-width: none; }
.lens-dialog .field-card { margin: 16px 20px 20px; }

/* No field card: two zones. The plate takes the card's side, in the buy box's track (columns 8–12), so its right
   edge meets the content edge as the buy box's does above it and nothing stands in for a missing third column; it
   keeps about the carded plate's width. The copy holds the left at the story band's measure. */
.observe-bare { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.observe-bare .observe-copy p { max-width: 46ch; }
.observe-bare .observe-card { display: none; }
@media (max-width: 1023px) {
  .observe, .observe-bare { grid-template-columns: 1fr 1fr; } .observe-copy { grid-column: 1 / -1; }
  .observe-bare .plate { grid-column: 1 / -1; justify-self: center; width: min(100%, 520px); }
}
@media (max-width: 759px) {
  .observe, .observe-bare { grid-template-columns: 1fr; padding-top: 32px; }
  .observe-copy { display: contents; }
  .observe-copy h2 { order: 1; }
  .plate { order: 2; padding: 20px 20px 16px; grid-template-columns: minmax(0, 1fr) 56px; }
  .observe-bare .plate { width: auto; justify-self: stretch; }
  .plate figcaption { grid-column: 1; text-align: left; }
  .plate-word { display: none; }
  .lens-btn { grid-column: 2; }
  .observe-card { order: 3; }
  .observe-copy > :not(h2) { order: 4; }
}

/* ───────────────────────── dialogs: the cart drawer (§3.8) ───────────────────────── */

.drawer {
  margin: 0 0 0 auto; height: 100%; max-height: none; width: min(440px, 100%); max-width: 100%;
  padding: 0; border: 0; border-left: 1px solid var(--rule);
  background: var(--sheet); color: var(--ink);
}
.drawer::backdrop { background: var(--backdrop); }
/* A drawer taller than the window scrolls, and Chrome makes a scrolling element a Tab stop of its own. Drawn outside,
   that stop's ring would fall past the screen's edges (the drawer fills a phone, and meets three edges on a desktop);
   it is drawn 2-4px inside the sheet instead, on the drawer's own --sheet. Not the lens dialog: it always keeps 16px of
   backdrop around it, where its outside ring shows whole, and an inside ring would run behind its print pane. */
.drawer:focus-visible { outline-offset: -4px; }
.drawer-in { display: flex; flex-direction: column; min-height: 100%; padding: 0 24px 24px; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 0 16px; border-bottom: 1px solid var(--rule); }
.drawer-head h2 { font-size: 1.75rem; }
.drawer-head h2:focus { outline: none; }
.drawer-head h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.close { width: 44px; height: 44px; display: grid; place-items: center; background: none; border: 0; font-size: 28px; line-height: 1; margin-right: -10px; }
.drawer-added { padding-top: 16px; font-size: 1rem; color: var(--ink-2); }
.drawer-empty { padding: 32px 0; display: grid; gap: 8px; }
.lines { display: grid; }
.line { display: grid; grid-template-columns: 72px 1fr auto; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.tray-line { width: 72px; height: 90px; aspect-ratio: auto; }
.line-thumb { width: 72px; height: 90px; object-fit: contain; }
.line-info { display: grid; gap: 2px; justify-items: start; }
.line-name { font-size: 17px; line-height: 1.3; text-decoration: none; }
.line-name:hover { text-decoration: underline; }
.line-info .mono { color: var(--ink-2); }
.line-side { display: grid; justify-items: end; gap: 8px; min-width: 112px; }
.line-price { font-weight: 600; font-variant-numeric: tabular-nums; }
.stepper { display: inline-flex; align-items: center; margin-top: 8px; border: 1px solid var(--control); border-radius: 2px; }
.step { width: 44px; height: 44px; background: none; border: 0; font-size: 20px; }
.step:disabled { opacity: .4; cursor: not-allowed; }
.qty { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }
.remove { font-size: 15px; }
.drawer-foot { margin-top: auto; padding-top: 24px; display: grid; gap: 12px; }
.subtotal { display: flex; justify-content: space-between; font-weight: 600; font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.drawer-foot .note { font-size: 1rem; color: var(--ink-2); }
.drawer-foot .text-button { justify-self: center; }
/* Under 380px the line's third column would clip its price (WCAG 1.4.10): the side column drops under the name. */
@media (max-width: 379px) {
  .line { grid-template-columns: 72px 1fr; }
  .line-side { grid-column: 2; justify-items: start; min-width: 0; }
}

/* The registrar's stamp (§4.4). */
.stamp { width: 112px; height: 64px; color: var(--signal); transform: rotate(var(--tilt, 0deg)); overflow: visible; }
.stamp text { font-family: var(--mono); font-weight: 700; font-size: 12px; letter-spacing: .04em; fill: currentColor; }
.stamp text + text { letter-spacing: 0; }

/* ───────────────────────── journal (§3.10) ───────────────────────── */

.journal { padding-top: 48px; max-width: 66ch; } /* the prose pages' column (C-19) */
.journal h1 { margin-bottom: 32px; }
.entries { display: grid; }
.entry-item a { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 28px 0; border-top: 1px solid var(--rule); text-decoration: none; color: var(--ink); }
.entry-item a:has(.entry-cover) { grid-template-columns: 160px 1fr; }
.entry-text { display: grid; gap: 6px; align-content: start; }
.entry-text .mono { color: var(--ink-2); }
.entry-title { font-size: 1.5rem; font-weight: 560; line-height: 1.2; }
.entry-item a:hover .entry-title { text-decoration: underline; }
.entry-dek { font-size: 17px; color: var(--ink-2); }
.draft-tag { color: var(--signal); }
.entry .mono { color: var(--ink-2); }
.entry h1 { margin: 8px 0 12px; }
.entry > .mono:nth-of-type(2) { margin-bottom: 24px; }
@media (max-width: 759px) { .entry-item a:has(.entry-cover) { grid-template-columns: 96px 1fr; gap: 16px; } }

/* ───────────────────────── demo checkout ───────────────────────── */

.requisition .page-head h1 { margin-bottom: 4px; }
.demo-notice { padding: 12px 16px; background: var(--well); border-left: 3px solid var(--signal); border-radius: 2px; font-size: 1rem; line-height: 1.5; max-width: 62ch; }
.req-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px var(--gap); margin-top: 48px; align-items: start; }
.req-summary { display: grid; gap: 8px; padding: 24px; background: var(--well); border-radius: 2px; }
.req-summary h2, .req-form h2 { font-size: 1.5rem; }
.line-plain { grid-template-columns: 1fr auto; padding: 14px 0; }
.totals { display: grid; gap: 6px; padding-top: 12px; font-variant-numeric: tabular-nums; }
.totals div { display: flex; justify-content: space-between; }
.totals .total { font-weight: 600; font-size: 1.125rem; padding-top: 6px; border-top: 1px solid var(--rule); }
.req-form { display: grid; gap: 16px; max-width: 560px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 1rem; font-weight: 600; }
.optional, .hint { font-weight: 400; color: var(--ink-2); font-size: 1rem; }
.field input, .field select {
  min-height: 48px; padding: 10px 12px; border: 1px solid var(--control); border-radius: 2px;
  background: var(--sheet); font-size: 1.0625rem; width: 100%;
}
.field input[aria-invalid=true], .field select[aria-invalid=true] { border-color: var(--signal); }
.field-row { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; }
.country { display: flex; gap: 12px; align-items: baseline; font-size: 1rem; }
.country .mono { text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.receipt { position: relative; margin-top: 48px; padding: 32px; max-width: 640px; display: grid; gap: 12px; border-radius: 2px; }
.receipt h2:focus { outline: none; }
.receipt-stamp { position: absolute; right: 32px; top: 24px; width: 140px; height: 80px; }
@media (max-width: 759px) {
  .req-grid { grid-template-columns: 1fr; margin-top: 24px; }
  .req-summary { padding: 16px; }
  .receipt { padding: 20px; }
  .receipt-stamp { position: static; justify-self: end; }
}

/* ───────────────────────── 404 (§3.11) ───────────────────────── */

.lost { display: grid; grid-template-columns: 240px 1fr; gap: 48px; align-items: center; padding-top: 64px; max-width: 900px; }
.empty-tray { width: 240px; height: 300px; display: grid; place-items: center; padding: 20px; border: 2px dashed var(--ink-2); border-radius: 2px; text-align: center; }
.empty-tray .mono { display: grid; gap: 4px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .08em; }
/* The path keeps its own line and breaks after its slashes (the script marks them); breaking anywhere is only the
   fallback for a segment longer than the line. */
.lost-path { text-transform: none; letter-spacing: 0; color: var(--ink); overflow-wrap: anywhere; }
.lost-copy { display: grid; gap: 16px; }
.lost-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.lost-links a { display: inline-block; padding: 10px 0; }
@media (max-width: 759px) { .lost { grid-template-columns: 1fr; padding-top: 32px; gap: 32px; } .empty-tray { width: 100%; max-width: 240px; } }

/* ───────────────────────── draft ribbon (dev builds with --drafts) ───────────────────────── */

.draft-ribbon { position: fixed; z-index: 60; top: 12px; left: 12px; padding: 4px 10px; background: var(--signal); color: var(--paper); font-family: var(--mono); font-size: 14px; text-transform: uppercase; letter-spacing: .1em; border-radius: 2px; pointer-events: none; }

/* ───────────────────────── motion (§4) ───────────────────────── */

/* Theme iris: the lamplight opens out of the moon button. */
html.iris::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html.iris::view-transition-new(root) { animation: owb-iris 480ms var(--ease) both; mix-blend-mode: normal; }
/* Out to the farthest viewport corner (moon.js sets --iris-r), so the edge is in view for the whole 480ms. */
@keyframes owb-iris { from { clip-path: circle(0 at var(--iris-x) var(--iris-y)); } to { clip-path: circle(var(--iris-r, 150vmax) at var(--iris-x) var(--iris-y)); } }
/* Dye bath: the new shirt colour seeps in from the edge nearest the swatch. */
html.dyeing::view-transition-old(root), html.dyeing::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(dye) { animation: none; mix-blend-mode: normal; }
::view-transition-new(dye) { animation: owb-dye 420ms var(--ease) both; mix-blend-mode: normal; }
@keyframes owb-dye { from { clip-path: circle(0 at var(--ox) var(--oy)); } to { clip-path: circle(var(--dye-r, 150%) at var(--ox) var(--oy)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; scroll-behavior: auto !important; }
}