/* 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: "Nothing You Could Do"; src: url(/assets/nothingyoucoulddo-400.53fedc658b.woff2) format("woff2"); font-weight: 400; 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 lit plate's ground. */
  --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;
  --hand: "Nothing You Could Do", "Bradley Hand", cursive;

  --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, .gen-tag, .promise-label {
  font-family: var(--mono); font-size: 14px; line-height: 1.4; font-weight: 400;
}
.eyebrow, .mono-link, .trail, .fieldlog, .facts dt, .field-card dt, .label, .promise-label {
  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(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) ───────────────────────── */

/* Moon and field log at the left, the logo centred, the links (and cart) at the right. Compact (Bri, 2026-10-05): tight
   padding and a smaller mark and wordmark at the top of the page. */
.masthead-in {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 10px 0 8px;
}
.fieldlog { color: var(--ink-2); display: grid; }
.lockup { display: grid; justify-items: center; gap: 4px; color: var(--ink); text-decoration: none; }
.lockup .mark { width: 44px; height: 44px; max-width: none; flex: none; }
.wordmark { display: grid; justify-items: center; font-family: var(--logo); font-size: clamp(1rem, .78rem + .7vw, 1.5rem); 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"; }
.masthead-left { grid-area: log; }
.masthead-in > .lockup { grid-area: lockup; }
.masthead-right { position: relative; grid-area: right; display: flex; justify-content: flex-end; align-items: center; gap: 20px; }
.masthead-right .nav { order: 1; }
.masthead-right .tools { order: 2; }
.masthead-right .menu-btn { order: 3; }
.tools { display: flex; align-items: center; gap: 4px; }
/* The moon button stands at the very left edge, before the field log and the logo (Bri, 2026-10-05). Its disc is
   inset in its 44px target, so the button steps out by that inset to line the disc up with the content edge. */
.masthead-left { display: flex; align-items: center; gap: 14px; margin-left: -6px; }
.theme-tool { display: flex; flex: none; }
.nav ul { display: flex; gap: 28px; }
.nav a { font-size: 17px; text-decoration: none; padding: 10px 0; white-space: nowrap; }
.nav a:hover, .nav a[aria-current] { text-decoration: underline; }
.menu-btn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 2px 0 8px; margin-right: -2px;
  background: none; border: 0; color: var(--ink); font-size: 17px; cursor: pointer;
}
.menu-icon { display: grid; gap: 5px; width: 22px; }
.menu-icon i { display: block; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform 200ms var(--ease), opacity 160ms var(--ease); }
.menu-btn[aria-expanded=true] .menu-icon i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-btn[aria-expanded=true] .menu-icon i:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded=true] .menu-icon i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.menu-btn:hover .menu-label { text-decoration: underline; text-underline-offset: .18em; }
.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); }

/* The open header shows Shop, Collections and Drops; About is in the footer, and in the menu once the links fold
   (Bri, 2026-10-05). Under 800px they fold behind a Menu button (masthead.js marks the page .menu-js; without it they
   stay in the header, and a phone shows them as a second row). 800px is the narrowest width where the moon, the logo
   and the three links sit with room to spare in production (measured, README); the field log steps out under 900px. */
.nav .menu-only { display: none; }
@media (max-width: 899px) { .fieldlog { display: none; } }
@media (max-width: 799px) {
  .menu-js .masthead-right { gap: 8px; }
  .menu-js .masthead-right .nav {
    position: absolute; z-index: 5; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 8px 20px;
    background: var(--sheet); border: 1px solid var(--rule); border-radius: 2px; box-shadow: 0 14px 30px -18px rgb(0 0 0 / .45);
  }
  .menu-js .masthead:not([data-menu-open]) .masthead-right .nav { display: none; }
  .menu-js .masthead-right .nav ul { display: grid; gap: 0; }
  .menu-js .nav .menu-only { display: list-item; }
  .menu-js .masthead-right .nav li + li { border-top: 1px solid var(--rule); }
  .menu-js .masthead-right .nav a { display: flex; align-items: center; min-height: 48px; padding: 0; font-size: 1.125rem; }
}
@media (max-width: 1023px) { .nav ul { gap: 20px; } }
@media (min-width: 800px) { .menu-btn { display: none !important; } }
/* 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: the moon, the lockup, the cart and the menu button. Without JavaScript the links are row 2. A wrapping flex
     row, so wider text spacing (WCAG 1.4.12) pushes things down instead of past the edge. */
  .masthead-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 4px 10px; padding: 8px 0 0; }
  .masthead-in > .lockup { order: 1; grid-template-columns: auto auto; align-items: center; gap: 10px; }
  .masthead-left { display: contents; }
  .theme-tool { order: 0; margin-left: -6px; }
  .masthead-right { order: 2; margin-left: auto; }
  .menu-js .masthead-right { gap: 4px; }
  .lockup .mark { width: 34px; height: 34px; min-width: 34px; }
  .wordmark { justify-items: stretch; font-size: 14px; }
  .menu-label { display: none; }
  .menu-btn { padding: 0 2px; }
  .masthead-right { gap: 4px; }
  html:not(.menu-js) .masthead-right { display: contents; }
  html:not(.menu-js) .masthead-right .nav { order: 3; flex-basis: 100%; }
  html:not(.menu-js) .nav ul { gap: 24px; }
  html:not(.menu-js) .nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
}

/* ───────────────────────── the sticky masthead (Bri, 2026-10-05) ───────────────────────── */

/* With masthead.js: sticky at the safe-area top. Its box keeps the full height in the page; past the top, the glass
   (::before) shrinks to the band and the parts glide into it by the offsets the script measured (--mx, --my, --ms). The
   part of the box below the band is transparent and lets clicks through. */
.mast-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 72px; pointer-events: none; }
.mast-js { scroll-padding-top: calc(var(--mast-band, 64px) + 16px); }
.mast-js .masthead { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; }
.mast-js .masthead::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto; height: 100%; pointer-events: none;
  background: var(--paper);
  transition: height 320ms var(--ease), background-color 320ms var(--ease), box-shadow 320ms var(--ease);
}
.mast-js .masthead :is(.lockup .mark, .wordmark, .fieldlog, .theme-tool, .masthead-right) {
  transition: transform 320ms var(--ease), opacity 220ms var(--ease);
}
.masthead.mast-still, .masthead.mast-still::before, .masthead.mast-still * { transition: none !important; }
/* The offsets are custom properties, which inherit: the menu panel inside the right group takes none of its own. */
.mast-js .masthead-right .nav { --mx: 0px; --my: 0px; --ms: 1; }

.masthead[data-compact] { pointer-events: none; }
.masthead[data-compact] :is(.lockup .mark, .nav a, .moon-btn, .cart-link, .menu-btn, .theme-card, .nav) { pointer-events: auto; }
.masthead[data-compact]::before {
  height: var(--mast-band, 64px);
  /* Liquid glass: the page blurred and a little richer behind a wash of the paper, a hairline of light along the top
     and a soft shadow at the foot, in either theme; no rule (Bri, 2026-10-05: no line under the header). */
  background: color-mix(in srgb, var(--paper) var(--glass, 70%), transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), 0 10px 24px -18px rgb(0 0 0 / .45);
}
:root[data-theme=dark] { --glass: 78%; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) { --glass: 78%; } }
:root[data-theme=dark] .masthead[data-compact]::before { box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 10px 24px -18px rgb(0 0 0 / .8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) .masthead[data-compact]::before { box-shadow: inset 0 1px 0 rgb(255 255 255 / .06), 0 10px 24px -18px rgb(0 0 0 / .8); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .masthead[data-compact]::before { background: var(--paper); } }
.masthead[data-compact] :is(.lockup .mark, .wordmark, .fieldlog, .theme-tool, .masthead-right) {
  transform: translate(var(--mx, 0), var(--my, 0)) scale(var(--ms, 1));
}
.masthead[data-compact] :is(.wordmark, .fieldlog) { opacity: 0; visibility: hidden; transition: transform 320ms var(--ease), opacity 220ms var(--ease), visibility 0s 220ms; }
/* A focused lockup in the compact band: the ring goes round the mark it shows, not the folded wordmark's box. */
/* The menu panel drops from the band, not from the full header's foot. */
.menu-js .masthead[data-compact] .masthead-right .nav { top: calc(100% + 14px); }
.masthead[data-compact] .lockup:focus-visible { outline: none; }
.masthead[data-compact] .lockup:focus-visible .mark { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 999px; }
/* ───────────────────────── 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; }
/* A supplier render cut out of its white ground (a mug, a blanket: P1-1), whole on the plate in its mount, like the lit
   plate under the lens; by night the plate is a step dimmer, so it never glares. */
picture.format-cut { display: block; background: var(--plate); box-shadow: inset 0 0 0 6px var(--mount); border-radius: 2px; }
.slide picture.format-cut img, .thumbs picture.format-cut img { object-fit: contain; padding: 7%; }
.thumbs picture.format-cut { box-shadow: inset 0 0 0 3px var(--mount); }
.thumbs picture.format-cut img { padding: 6px; }
/* A stitched left-chest piece (the wearer's left, so the viewer's right): centred 3.75 in right of the centre line on
   the tray's 16 in width, at the same top as a front print. */
.tray-embroidery-chest-left .tray-print { left: calc(73.4% - var(--pw) / 2); }

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

/* Bri (2026-10-05): no engraving in the hero. The words take the left (about 60%), set wide so the headline runs two
   lines and the intro a comfortable measure; the season's seal stands at the right, centred on them. */
.hero {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: var(--gap);
  padding-block: 24px 0;
}
/* The collections start close under the hero (Bri, 2026-10-07): the first row of tiles above the fold on a 1440 × 900
   laptop and a 390 × 844 phone (measured: the first row ends at 886 and 797). */
.hero + .colls { margin-top: 40px; }
.colls > .section-head { margin-bottom: 12px; }
.colls .colls-group-title { margin-bottom: 16px; }
.hero-copy { display: grid; gap: 20px; justify-items: start; }
.display { font-size: var(--t-display); line-height: 1.04; letter-spacing: -.02em; font-weight: 600; max-width: 17ch; }
.standfirst { font-size: 1.1875rem; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }
/* The holiday order-by note (parts.mts orderByNote): one line in the data voice, the season's ink. */
.order-by { font-family: var(--mono); font-size: 14px; line-height: 1.5; letter-spacing: .02em; color: var(--season-ink); padding-left: 12px; border-left: 2px solid currentColor; max-width: 62ch; }
.order-by small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink-2); letter-spacing: 0; }
.hero-seal-wrap { --seal: clamp(135px, 15vw, 195px); position: relative; display: flex; align-items: center; min-width: 0; }
/* The postmark: the seal at the left of its column, the cancellation lines running from behind it to the column's edge.
   The seal's disc is filled with the page, so the lines start at its rim. */
.postmark {
  position: absolute; z-index: 0; top: 50%; left: calc(var(--seal) * .55); width: calc(100% - var(--seal) * .55); height: calc(var(--seal) * .5);
  transform: translateY(-50%); color: var(--season-ink); opacity: .55; overflow: visible;
  fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round;
}
.postmark path { vector-effect: non-scaling-stroke; }
.hero-seal-wrap .hero-seal { position: relative; z-index: 1; flex: none; }
.hero-seal > circle:first-of-type { fill: var(--paper); }
.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); }
@media (max-width: 759px) {
  /* Phone: the seal above the words, smaller. */
  .hero { grid-template-columns: minmax(0, 1fr); padding-block: 12px 0; gap: 12px; }
  .hero-seal-wrap { order: -1; }
  .hero-copy { gap: 16px; }
  .standfirst { font-size: 1.0625rem; }
}

/* The season's seal (parts.mts seasonSeal): inked at a slant, at the right of the hero. */
.season-seal { color: var(--season-ink); overflow: visible; }
/* parts.mts sealLayout sizes the lines for this face, size and tracking (SEAL_FONT, SEAL_TRACK); textLength holds
   them to it if a fallback face draws instead. */
.season-seal text { font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .5px; fill: currentColor; }
.season-seal .seal-dot { fill: currentColor; }
.hero-seal { width: var(--seal, 200px); height: auto; aspect-ratio: 1; transform: rotate(-9deg); }
@media (max-width: 759px) { .hero-seal-wrap { --seal: 99px; } }

/* ───────────────────────── promises (after Bri's second mockup) ───────────────────────── */

/* What is true of every order, in one row between hairlines: a line icon in the season's ink beside a label and its
   sentence. */
.promises { margin-top: 72px; border-block: 1px solid var(--rule); }
@media (max-width: 759px) { .promises { margin-top: 48px; } }
.promises ul { display: flex; flex-wrap: wrap; justify-content: center; }
.promises li { position: relative; display: grid; grid-template-columns: auto auto; align-items: center; gap: 2px 14px; padding: 18px 40px; }
.promises li + li::before { content: ""; position: absolute; left: 0; top: 24%; bottom: 24%; width: 1px; background: var(--rule); }
.promise-icon { grid-row: 1 / 3; width: 30px; height: 30px; fill: none; stroke: var(--season-ink); stroke-width: 1.2; stroke-linejoin: round; stroke-linecap: round; }
.promise-line { font-size: 1rem; line-height: 1.4; font-style: italic; color: var(--ink-2); }
@media (max-width: 759px) {
  .promises ul { flex-direction: column; align-items: stretch; }
  .promises li { padding: 14px 4px; }
  .promises li + li::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .promise-line { font-size: .9375rem; }
}
.promises + .section { margin-top: 72px; }
@media (max-width: 759px) { .promises + .section { margin-top: 48px; } }

/* ───────────────────────── the collections (Bri, 2026-10-05) ───────────────────────── */

/* The home page and /collections/ list collections, not shirts. Open ones lie large: the cover beside the name, line
   and the prints of the first designs on their shirt colours. Coming ones are a grid of covers, "coming" pencilled
   beside each name. A cover is a transparent cutout with its own keyline and even margins (brand/assets/covers/): it
   lies straight on the ground, day or night, whole (contain, never cropped). An opaque cover, should one come back,
   sits in the narrow mount like the photographs. */
.cover { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 2px; overflow: hidden; background: var(--well); }
.cover img { width: 100%; height: 100%; object-fit: cover; }
picture.cover:not(.cover-cut) { outline: 6px solid var(--mount); outline-offset: -6px; }
.cover-cut { background: none; border-radius: 0; overflow: visible; }
.cover-cut img { object-fit: contain; }
.cover-empty { background: var(--well) url(/assets/mark-outline.ee381d6c55.svg) center / 38% no-repeat; opacity: .7; }
.coll a { display: grid; text-decoration: none; color: var(--ink); }
.coll-name { font-size: 1.25rem; line-height: 1.25; font-weight: 500; }
.coll a:hover .coll-name { text-decoration: underline; text-underline-offset: .18em; }
.coll-line { font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
.coll-cover { position: relative; display: block; }
@media (prefers-reduced-motion: no-preference) {
  .coll .cover img { transition: transform 300ms var(--ease); }
  .coll a:hover .cover img, .coll a:focus-visible .cover img { transform: scale(1.03); }
  .coll a:hover .cover-cut img, .coll a:focus-visible .cover-cut img { transform: rotate(-1.5deg) scale(1.03); }
}

.colls-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.colls-group + .colls-group { margin-top: clamp(32px, 5vw, 56px); }
.colls-group-title { margin: 0 0 var(--gap); }
.colls-group-line { margin: -8px 0 var(--gap); color: var(--muted, inherit); }
.coll a { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 28px; align-items: center; padding: 20px; background: var(--well); border-radius: 2px; height: 100%; }
.coll-body { display: grid; gap: 10px; align-content: center; justify-items: start; }
.coll .coll-name { font-size: var(--t-h2); line-height: 1.1; }
/* "coming" sits on its own line under the name on every coming tile, so no tile's mark wraps differently. */
.coll-title { display: grid; justify-items: start; gap: 4px; }
.coll-mark { font-family: var(--hand); font-size: 1.375rem; line-height: 1; color: var(--season-ink); transform: rotate(-3deg); transform-origin: left center; white-space: nowrap; }
.coll-prints { display: flex; gap: 8px; margin-top: 6px; }
.coll-prints img { width: 64px; height: 76px; object-fit: contain; background: var(--shirt); border-radius: 2px; box-shadow: var(--tray-edge); forced-color-adjust: none; }
.coll-meta { font-family: var(--mono); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.coll-is-coming .coll-meta { color: var(--ink-2); }
@media (max-width: 1023px) { .colls-grid { grid-template-columns: 1fr; } }
@media (max-width: 759px) {
  .coll a { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 16px; padding: 12px; }
  .coll .coll-name { font-size: 1.5rem; }
  .coll-mark { font-size: 1.125rem; }
  .coll-prints img { width: 44px; height: 52px; }
}

/* ───────────────────────── the newsletter sign-up ───────────────────────── */

.signup-block { display: grid; gap: 12px; align-content: center; }
.signup-block h2 { font-size: var(--t-h2); max-width: 18ch; }
.signup-line { color: var(--ink-2); max-width: 42ch; }
.signup { display: grid; gap: 8px; width: 100%; max-width: 520px; margin-top: 8px; }
.signup-row { display: flex; gap: 8px; }
.signup input[type=email] {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border: 1px solid var(--control); border-radius: 2px;
  background: var(--sheet); color: var(--ink); font: inherit; font-size: 1.0625rem;
}
.signup input[aria-invalid=true] { border-color: var(--signal); }
.signup .button { min-height: 52px; }
.signup-status { min-height: 1.5em; font-size: 1rem; color: var(--ink-2); }
.signup-status:empty { min-height: 0; }
.signup-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 459px) { .signup-row { flex-direction: column; } }

/* The band (Bri, 2026-10-05: the sign-up runs the full width): one strip of the well across the content column,
   heading and line on the left, the form on the right at its own comfortable measure. With no newsletter the same band
   is a link to the drops. */
.band {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr;
  column-gap: var(--gap); row-gap: 10px; align-items: center;
  padding: 56px clamp(24px, 5vw, 72px); background: var(--well); border-radius: 2px;
}
.band h2 { grid-column: 1; max-width: 20ch; }
.band .signup-line { grid-column: 1; align-self: start; }
.band .signup { grid-column: 2; grid-row: 1 / -1; margin: 0; justify-self: end; }
.band-drops { grid-template-rows: auto auto; text-decoration: none; color: var(--ink); }
/* Home's sign-up (Bri, 2026-10-07: a slim band near the collections, not a popup): the same band, a step quieter. */
.band-slim { padding: 28px clamp(20px, 4vw, 48px); row-gap: 4px; }
.band-slim h2 { font-size: 1.5rem; max-width: none; }
.band-slim .signup-line { font-size: 1rem; }
.band-drops .eyebrow { grid-column: 1; }
.band-drops-title { grid-column: 1; font-size: var(--t-h2); line-height: 1.12; font-weight: 560; }
.band-drops .mono-link { grid-column: 2; grid-row: 1 / -1; justify-self: end; }
.band-drops:hover .mono-link { text-decoration: underline; }
@media (max-width: 899px) {
  .band { grid-template-columns: 1fr; grid-template-rows: none; padding: 32px 24px; }
  .band .signup, .band-drops .mono-link { grid-column: 1; grid-row: auto; justify-self: stretch; margin-top: 10px; }
  .band-drops .mono-link { justify-self: start; }
}

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

.price { font-weight: 600; font-variant-numeric: tabular-nums; }
.not-yet { font-size: 1rem; color: var(--ink-2); }

.cards { display: grid; gap: 32px var(--gap); grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); }
.cards-4 { --cols: 4; }
/* A collection's series (D-035): a small heading over each group of its designs. */
.cards + .coll-series, .coll-series + .coll-series { margin-top: 56px; }
.series-head { margin-bottom: 20px; font-size: 1.375rem; }
.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 print on its shirt colour: a colour plate, not a mockup. The field is 4:5 like the gallery; the print stands in it
   whole with an even margin, the colour's own edge drawn in the tray's inset line. */
.card-art {
  display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; aspect-ratio: 4 / 5; padding: 12% 11%;
  background: var(--shirt); border-radius: 2px; box-shadow: var(--tray-edge); forced-color-adjust: none;
}
.card-art img { width: 100%; height: 100%; object-fit: contain; }
/* Wide art (parts.mts WIDE_ART) runs the tile's width, its own 8% transparent margin the only one, rather than sitting as a strip (P2-2). */
.card-art-wide { padding-inline: 0; }
/* A stitched lead (P0-2): the card is the tray at chest scale, the patch small at the left chest. */
.card-tray { forced-color-adjust: none; }
/* The fitted model shot on hover or focus, with its "Generated image" tag. display:none until then; on devices that
   hover, js/cardphotos.js switches its lazy image to eager as the card nears the screen, so it is cached by hover. */
.card-photo { position: absolute; inset: 0; display: none; opacity: 0; transition: opacity 160ms var(--ease), display 160ms allow-discrete; }
.card-photo picture, .card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 2px; }
.card-photo .gen-tag { left: 8px; top: 8px; bottom: auto; }
@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 a:has(.card-formats) { grid-template-rows: auto auto auto 1fr; }
.card-formats { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--ink-2); margin-top: -6px; }
/* Each format stays whole on its line, its middot with it (parts.mts formatLineHtml). */
.card-formats > span { white-space: nowrap; }
.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; white-space: nowrap; }
/* The swatch row: the dots, then "+N" when the card leaves colours off (cardSwatches caps it to fit the narrowest card).
   The count sits closer than a word would, so it reads as one more swatch; the total is in the link's hidden text. One
   height for every row, with or without the count, so the prices of a phone grid's cards line up. */
.card-colors { display: inline-flex; align-items: center; gap: 5px; block-size: 14px; font-family: var(--mono); font-size: 14px; line-height: 1; 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; row-gap: 10px; }
  /* Phones: the row always takes its own line under the price, so a grid's rows line up whatever their length. */
  .card-colors { flex-basis: 100%; }
  .featured .section-head .mono-link, .more .section-head .mono-link { display: none; }
  .view-all-phone { display: block; margin-top: 24px; }
}
/* The shop and a collection's own page show every card; only the "more" strips stop at a row. */
.shop-collection .cards > *, .cards-all > * { display: block !important; }

/* ───────────────────────── 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); }

/* ───────────────────────── analytics choice (production only; static/js/analytics.js) ───────────────────────── */

/* The footer's Analytics settings is a button that reads as one of the footer links. */
.footer-nav .footer-settings { display: inline-block; min-height: 0; padding: 6px 0; text-decoration: underline; text-decoration-thickness: 1px; }
.footer-nav .footer-settings:hover { text-decoration-thickness: 2px; }
/* A small sheet at the bottom left, above the masthead and the phone's sticky buy bar; full width on a phone. */
.consent-bar {
  position: fixed; z-index: 45; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); max-width: 520px;
  display: grid; gap: 12px; padding: 16px 20px;
  background: var(--sheet); color: var(--ink); border: 1px solid var(--rule); border-radius: 2px;
  box-shadow: 0 8px 28px -12px rgb(3 42 29 / .35);
}
.consent-text { font-size: 1rem; line-height: 1.5; }
.consent-actions { display: flex; align-items: center; gap: 20px; }
.consent-actions .button { min-height: 44px; padding: 0 22px; }
@media (max-width: 759px) {
  .consent-bar { left: 0; right: 0; bottom: 0; max-width: none; border-width: 1px 0 0; padding: 14px var(--pad) calc(14px + env(safe-area-inset-bottom)); }
  .footer-nav .footer-settings { padding: 0; min-height: 44px; display: inline-flex; align-items: center; }
}

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

.page-head { padding-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } /* minmax: the phone chip rows scroll inside it, not widen the page */
.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: one row of chips that scrolls sideways, edge to edge, instead of a column of seven lines (P1-7). */
@media (max-width: 759px) {
  .jump ul { flex-wrap: nowrap; gap: 8px; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--pad)); padding: 2px var(--pad) 4px; }
  .jump ul::-webkit-scrollbar { display: none; }
  .jump li:not(:last-child)::after { content: none; }
  .jump a { padding: 0 14px; border: 1px solid var(--control); border-radius: 999px; font-size: 13px; text-decoration: none; }
  .type-nav a[aria-current] { background: var(--action); border-color: var(--action); color: var(--on-action); }
}
.page-head .grid-note { margin: 0; }
.type-nav a[aria-current] { text-decoration-thickness: 2px; text-underline-offset: .3em; font-weight: 700; }
.type-grid { margin-top: 48px; }
.type-group + .type-group { margin-top: 64px; }
.type-group { scroll-margin-top: 88px; }
.collection-lede { max-width: 62ch; margin: -8px 0 24px; color: var(--ink-2); }
/* A collection with no words yet (Witching Hours) leaves no blank band between its name and its cards. */
.collection-lede:empty { margin-bottom: 0; }
.shop-collection { scroll-margin-top: 88px; 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 4;
    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 .collection-lede:empty { margin-bottom: 16px; }
  .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; } }

/* The shop index (shop.mts shopIndex, 2026-10-07): the collections on the page with their counts, like a field guide's
   thumb index, this season's first under its name. On a desktop a column that stays in view beside the grid, a dotted
   leader running from each name to its count; under 1024px one sticky row of chips under the masthead's band. */
.shop-layout { margin-top: 48px; }
/* The shop search (build/pages/shop.mts searchForm, static/js/search.js): one field and its button under the lede, at
   a reading measure; results take the grid's place in the shop's 4-up cards. The field keeps its height whatever the
   results do, so nothing above them moves. */
.shop-search { position: relative; display: flex; gap: 8px; width: 100%; max-width: 560px; margin-top: 4px; }
.shop-search input {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 16px; border: 1px solid var(--control); border-radius: 2px;
  background: var(--sheet); color: var(--ink); font: inherit; font-size: 1.0625rem;
}
.shop-search input::placeholder { color: var(--ink-2); opacity: 1; }
.shop-search input::-webkit-search-cancel-button { cursor: pointer; }
.shop-search .button { min-height: 52px; padding: 0 22px; }
.search-results { margin-top: 32px; scroll-margin-top: 88px; }
.search-count { font-family: var(--mono); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin-bottom: 24px; }
.search-empty { max-width: 52ch; }
.search-results .cards { --cols: 4; }
@media (max-width: 1023px) { .search-results .cards { --cols: 3; } }
@media (max-width: 759px) { .search-results .cards { --cols: 2; } .shop-search .button { padding: 0 16px; } }
/* The masthead's search link: a lens, beside the nav at every width. */
.search-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: inherit; border-radius: 2px; }
.search-link svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.search-link:hover { box-shadow: inset 0 0 0 1px var(--control); }
.masthead-right .search-link { order: 2; }
/* A phone row holds the moon, the lockup, the lens and the menu (production, 360px and up); with a cart there is no room
   for the lens too (measured 2026-10-07: about 30px short at 390px), and the shop's own field is one tap away. */
@media (max-width: 759px) { .masthead-right:has(.tools) .search-link { display: none; } }
.shop-index ul { display: grid; }
.shop-index a { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; color: var(--ink); text-decoration: none; font-size: 1rem; line-height: 1.35; }
.shop-index a::after { content: ""; order: 1; flex: 1 1 8px; min-width: 8px; align-self: flex-end; margin-bottom: .4em; border-bottom: 1px dotted var(--control); }
.ix-name { min-width: 0; }
.ix-count { order: 2; font-family: var(--mono); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.shop-index a:hover .ix-name { text-decoration: underline; text-underline-offset: .18em; }
.ix-label { margin: 0 0 4px; font-family: var(--mono); font-size: 12px; line-height: 1.4; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-2); }
.ix-season { color: var(--season-ink); }
.shop-index ul + .ix-label { margin-top: 20px; }
@media (min-width: 1024px) {
  .shop-layout { display: grid; grid-template-columns: 208px minmax(0, 1fr); gap: 0 48px; align-items: start; }
  .shop-index { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; padding-top: 24px; border-top: 1px solid var(--rule); }
  .mast-js .shop-index { top: calc(var(--mast-band, 64px) + 24px); max-height: calc(100vh - var(--mast-band, 64px) - 48px); }
  .shop-layout .shop-grid { --grid-cols: 4; margin-top: 0; }
  .shop-layout .type-group:first-child { margin-top: 0; }
}
@media (min-width: 1024px) and (max-width: 1279px) { .shop-layout .shop-grid, .shop-layout .cards { --grid-cols: 3; --cols: 3; } }
@media (max-width: 1023px) {
  .shop-index {
    position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad)); padding: 8px var(--pad); background: var(--paper); box-shadow: 0 1px 0 var(--rule);
  }
  .mast-js .shop-index { top: var(--mast-band, 64px); }
  .shop-index::-webkit-scrollbar { display: none; }
  .shop-index ul { display: flex; gap: 8px; }
  .shop-index li { flex: none; }
  .shop-index a { align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--control); border-radius: 999px; font-size: 15px; white-space: nowrap; }
  .shop-index a::after { content: none; }
  .ix-label, .shop-index ul + .ix-label { flex: none; margin: 0; white-space: nowrap; }
  .shop-index ul + .ix-label { margin-left: 8px; }
  .shop-layout :is(.shop-collection, .type-group) { scroll-margin-top: 76px; }
}

/* A shelf's "Show N more" (shop.mts shelf): a native disclosure in the jump links' voice, so it needs no script. */
.shelf-more { margin-top: 20px; }
.shelf-more > summary {
  display: inline-flex; align-items: center; min-height: 44px; list-style: none; cursor: pointer; color: var(--ink);
  font-family: var(--mono); font-size: 14px; text-transform: uppercase; letter-spacing: .08em;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
}
.shelf-more > summary::-webkit-details-marker { display: none; }
.shelf-more > summary:hover { text-decoration-thickness: 2px; }
.shelf-close, .shelf-more[open] .shelf-open { display: none; }
.shelf-more[open] .shelf-close { display: inline; }
.shelf-more[open] > summary { margin-bottom: 24px; }

.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); }

/* ───────────────────────── 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; } .mast-js .gallery { top: calc(var(--mast-band, 64px) + 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.fit-photo img { object-position: 50% 25%; }
/* Other colours (Bri, 2026-10-06): a short rule, then each other colour's first photo, a step smaller and quieter. */
.thumbs-rule { width: 80px; margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--rule); }
.thumbs-rule span { display: block; font-family: var(--mono); font-size: 12px; line-height: 1.3; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); text-align: center; }
.thumb-other button { width: 64px; margin-left: 8px; }
.thumb-other picture img { width: 64px; height: 80px; opacity: .85; }
.thumb-other button:hover picture img, .thumb-other button:focus-visible picture img { opacity: 1; }
.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; }
/* A fitted shot is 2:3; the 4:5 frame keeps its head and the print and gives up the legs. */
.fit-photo img { object-position: 50% 28%; }
.fit-crop img, .thumbs picture.fit-crop img { object-position: 50% 50%; }
.slide-media { position: relative; }
.slide figcaption { margin-top: 10px; font-size: 1rem; line-height: 1.5; color: var(--ink-2); max-width: 54ch; }
/* "Generated image" on every generated picture (D-013), set in the data voice on a paper chip, top left where the
   thumbnails and arrows never cover it. */
.gen-tag { position: absolute; left: 12px; top: 12px; padding: 5px 8px; font-size: 13px; line-height: 1.2; text-transform: uppercase; letter-spacing: .08em; background: var(--sheet); color: var(--ink); border-radius: 2px; box-shadow: 0 0 0 1px var(--rule); }
.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; }
/* Full screen (product.js): a round control at the stage's foot, right, ruled like the arrows. In full screen the stage
   covers the screen on the page's paper, each photo whole (contain) at its largest file, captions and the colour tiles
   aside, the counter in the corner. The same rules serve the Fullscreen API and the fixed fallback (.stage-lock). */
.stage-full {
  position: absolute; z-index: 1; right: 12px; bottom: 12px; 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;
}
.stage-full svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stage-full .exit, .stage.is-full .stage-full .enter { display: none; }
.stage.is-full .stage-full .exit { display: inline; }
.stage-full:focus-visible::before { content: ""; position: absolute; inset: -8px; z-index: -1; pointer-events: none; border: 7px solid var(--sheet); border-radius: 999px; }
html.stage-lock { overflow: hidden; }
.stage.is-full {
  position: fixed; inset: 0; z-index: 90; width: 100%; height: 100%; height: 100dvh; margin: 0;
  background: var(--paper); padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.stage.is-full::backdrop { background: var(--paper); }
.stage.is-full .slides { height: 100%; border-radius: 0; }
.stage.is-full .slide { height: 100%; }
/* Every box down to the photo has a definite height, or "contain" falls back to filling the width. */
.stage.is-full .slide figure { height: 100%; }
.stage.is-full .slide-media { height: 100%; display: flex; align-items: center; justify-content: center; }
.stage.is-full .slide picture { display: block; flex: 1 1 100%; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.stage.is-full .slide picture img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; object-position: 50% 50%; border-radius: 0; }
.stage.is-full .slide picture.format-cut { background: none; box-shadow: none; }
.stage.is-full .slide .tray { flex: none; width: auto; height: min(100%, 125vw); max-width: 100%; aspect-ratio: 4 / 5; }
.stage.is-full figcaption, .stage.is-full .slide-others, .stage.is-full .more-colors { display: none !important; }
.stage.is-full .stage-tags { position: absolute; z-index: 1; right: 12px; top: calc(12px + env(safe-area-inset-top)); display: flex; }
.stage.is-full .counter { display: block; padding: 4px 8px; background: color-mix(in srgb, var(--sheet) 92%, transparent); border-radius: 2px; }
.stage.is-full .stage-full { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); right: calc(16px + env(safe-area-inset-right)); }
.stage.is-full .arrow-prev { left: calc(16px + env(safe-area-inset-left)); }
.stage.is-full .arrow-next { right: calc(16px + env(safe-area-inset-right)); }
/* Arrows wherever a mouse is (phones swipe). */
@media (hover: hover) and (pointer: fine) { .stage.is-full .arrow { display: grid; } }
@media (forced-colors: active) { .stage-full:focus-visible::before { border-color: Canvas; } }
/* The Other colors slide and its pill are for the carousel alone: from 1024px the rail lists the other colours. */
.slide-others, .more-colors { 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). */
@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, .others-name i { forced-color-adjust: none; }
  .more-colors { border-color: ButtonText; }
  /* 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; }
}
/* The format picker (Bri, 2026-10-05): the design's formats as a row of links, the current one filled like a chosen
   size chip. Each is its own page; product.js swaps them in place. */
.format-picker { display: grid; gap: 8px; }
.format-legend { font-size: 1rem; }
.format-picker ul { display: flex; flex-wrap: wrap; gap: 8px; }
.format-picker a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--control); border-radius: 2px;
  font-size: 1rem; text-decoration: none; color: var(--ink);
}
.format-picker a:hover { border-color: var(--ink); }
.format-picker a[aria-current] { background: var(--action); border-color: var(--action); color: var(--on-action); }
.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); }
/* D-030: one sentence on why it costs more, under the price; quieter than the price, readable as body text. */
.price-note { font-size: 1rem; line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.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; }
  /* Top right on the photo, opposite the "Generated image" tag: the stage's foot holds the caption. The pill to the
     other colours sits left of the counter; it is a control, so it is round and ruled like the arrows. */
  .stage-tags { position: absolute; z-index: 1; right: 12px; top: 12px; display: flex; align-items: center; gap: 8px; }
  .counter { display: block; padding: 4px 8px; background: color-mix(in srgb, var(--sheet) 92%, transparent); border-radius: 2px; }
  .more-colors {
    position: relative; display: block; padding: 3px 12px; font-family: var(--mono); font-size: 14px; line-height: 1.4;
    background: color-mix(in srgb, var(--sheet) 92%, transparent); color: var(--ink);
    border: 1px solid var(--control); border-radius: 999px; -webkit-tap-highlight-color: transparent;
  }
  /* A 44px-tall target round a 28px pill. */
  .more-colors::after { content: ""; position: absolute; inset: -8px -4px; }
  .more-colors:focus-visible { outline-offset: 2px; box-shadow: 0 0 0 6px var(--sheet); }
  /* Other colors: the last slide keeps the photos' 4:5 frame, on the page's well, a labelled tile per colour. The
     grid comes from the tile count (shop.mts tileGrid, product.js); its rows share the height. */
  .slide-others { display: block; --tray-ground: var(--well); }
  .others {
    aspect-ratio: 4 / 5; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px;
    padding: 16px var(--pad); background: var(--well); border-radius: 2px;
  }
  .others-head { font-family: var(--mono); font-size: 14px; line-height: 1.4; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
  .others-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows, 2), minmax(0, 1fr)); gap: 12px; min-height: 0; }
  .others-grid li { min-height: 0; display: grid; }
  .others-grid button {
    display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; min-height: 0; padding: 0; text-align: left;
    background: none; border: 0; border-radius: 2px; color: var(--ink); -webkit-tap-highlight-color: transparent;
  }
  .others-grid button picture, .others-grid button picture img { width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; border-radius: 2px; }
  .others-grid button picture.format-cut img { object-fit: contain; }
  .others-grid .tray { height: 100%; min-height: 0; aspect-ratio: auto; }
  .others-name { display: flex; align-items: center; gap: 6px; min-width: 0; font-family: var(--mono); font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
  .others-name i { flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--c); box-shadow: inset 0 0 0 1px var(--control); }
  @media (hover: hover) { .others-grid button:hover .others-name { text-decoration: underline; text-underline-offset: .18em; } }
}
/* Phone tap targets (44px, WCAG 2.5.5): the breadcrumb, the size guide, a section's mono link and the logo take the
   height in padding that a negative margin gives back, so nothing on the page moves. */
@media (max-width: 759px) {
  .trail a, .size-guide, .mono-link { display: inline-block; padding-block: 14px; margin-block: -14px; }
  .masthead-in > .lockup { padding-block: 5px; margin-block: -5px; }
}
@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, .others { 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; }

/* ───────────────────────── a collection's page ───────────────────────── */

.coll-head { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; align-items: center; padding-top: 24px; }
.coll-head-copy { display: grid; gap: 16px; justify-items: start; }
.coll-head-copy .eyebrow a { text-decoration: underline; text-underline-offset: .25em; }
.coll-head-copy h1 { font-size: var(--t-display); line-height: 1.02; letter-spacing: -.02em; font-weight: 600; }
.coll-head-copy .lede { font-size: 1.25rem; line-height: 1.5; color: var(--ink-2); max-width: 36ch; }
.coll-head-body { max-width: 52ch; }
.coll-coming-line { font-family: var(--hand); font-size: 1.5rem; line-height: 1.3; color: var(--ink); transform: rotate(-2deg); max-width: 26ch; }
/* The cover stands about 400px tall (a 4:5 cutout 320px wide), so the first row of cards starts inside a 1440 × 900
   window (P1-6). */
.coll-head-cover { justify-self: end; width: min(100%, 320px); }
.coll-head + .section { margin-top: 40px; }
@media (max-width: 759px) {
  .coll-head { grid-template-columns: 1fr; gap: 28px; padding-top: 24px; }
  .coll-head-cover { justify-self: start; width: min(72%, 320px); order: -1; }
}

/* ───────────────────────── drops ───────────────────────── */

.drops { display: grid; margin-top: 48px; border-top: 1px solid var(--rule); }
.drop { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--gap); padding: 40px 0; border-bottom: 1px solid var(--rule); }
.drop-when { display: grid; gap: 4px; align-content: start; font-family: var(--mono); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.drop-status { color: var(--ink); }
.drop-next .drop-status { color: var(--season-ink); }
.drop-body { display: grid; gap: 14px; }
.drop-text { color: var(--ink-2); max-width: 58ch; }
.drop-colls { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 200px)); gap: 28px var(--gap); margin-top: 12px; }
/* Each name is centred under its cover (Bri, 2026-10-05), "coming" pencilled under the name. */
.drop-colls a { display: grid; justify-items: center; gap: 10px; text-decoration: none; color: var(--ink); text-align: center; }
.drop-colls .coll-cover { width: 100%; }
.drop-coll-name { display: grid; justify-items: center; gap: 4px; font-size: 1.0625rem; line-height: 1.3; }
.drop-coll-name .coll-mark { font-size: 1.125rem; transform: rotate(-3deg); transform-origin: center; }
.drop-colls a:hover .drop-coll-name { text-decoration: underline; }
.drops-more { margin-top: 32px; }
.drops-more + .section { margin-top: 64px; }
@media (max-width: 759px) {
  .drop { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .drop-when { grid-auto-flow: column; justify-content: start; gap: 12px; }
  .drop-colls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}

/* ───────────────────────── contact: Form No. 7 (Bri, 2026-10-05: "fun and cute") ───────────────────────── */

/* The Bureau's correspondence form: a sheet of paper in either theme (lit, like the plate), typed in the mono face,
   boxes to tick, a ruled message area, an envelope for photos and a rubber seal in the corner. */
.contact-page { max-width: 760px; }
.form7 {
  position: relative; display: grid; gap: 26px; margin-top: 32px; padding: 36px clamp(20px, 5vw, 48px) 32px;
  border-radius: 2px; box-shadow: inset 0 0 0 6px var(--mount), 0 1px 0 var(--rule);
  background-image: linear-gradient(var(--sheet), var(--sheet));
}
.form7-head { display: grid; gap: 6px; padding-bottom: 18px; border-bottom: 1.5px solid var(--ink); padding-right: 104px; }
.form7-no { justify-self: start; padding: 3px 8px; border: 1.5px solid var(--signal); color: var(--signal); text-transform: uppercase; letter-spacing: .14em; font-weight: 700; }
.form7-head h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.form7-sub { font-size: 1rem; color: var(--ink-2); }
.form7-seal {
  position: absolute; right: clamp(16px, 4vw, 40px); top: 28px; width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-content: center; gap: 2px; text-align: center; transform: rotate(-12deg);
  border: 2px solid var(--signal); box-shadow: inset 0 0 0 4px var(--sheet), inset 0 0 0 5.5px var(--signal);
  font-family: var(--mono); font-size: 11px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--signal); opacity: .85;
}
.form7-seal span + span { font-weight: 700; font-size: 13px; }
.form7 legend, .form7 label, .form7-files-label { display: flex; align-items: baseline; gap: 10px; font-size: 1.0625rem; font-weight: 600; padding: 0; }
.form7-n {
  flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border: 1.5px solid var(--ink);
  border-radius: 50%; font-family: var(--mono); font-size: 13px; font-weight: 700; transform: translateY(-2px);
}
.req { color: var(--signal); }
.form7-hint { font-weight: 400; color: var(--ink-2); font-size: 1rem; }
.form7 fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form7-kinds legend { margin-bottom: 12px; }
.tick-row { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-left: 36px; }
.tick { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 400 !important; cursor: pointer; }
.tick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tick span::before {
  content: ""; display: inline-block; width: 20px; height: 20px; margin-right: 10px; vertical-align: -4px;
  border: 1.5px solid var(--ink); background: var(--sheet);
}
.tick input:checked + span::before { content: "✓"; font-family: var(--hand); font-size: 26px; line-height: 14px; text-indent: 1px; color: var(--signal); }
.tick input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 4px; }
.form7-row { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; }
.form7-field { display: grid; gap: 8px; }
.form7 input:not([type=radio]):not([type=file]), .form7 textarea {
  width: 100%; min-height: 44px; padding: 6px 2px; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); font-family: var(--mono); font-size: 17px;
}
.form7 textarea {
  min-height: 0; resize: vertical; line-height: 32px; padding: 0 2px; border: 0;
  background: repeating-linear-gradient(transparent 0 31px, var(--rule) 31px 32px); background-attachment: local;
}
.form7 input:focus-visible, .form7 textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.form7 [aria-invalid=true] { border-color: var(--signal) !important; }
.form7-error { color: var(--signal); font-size: 1rem; line-height: 1.4; }
.form7-files { display: grid; gap: 12px; }
.envelope {
  position: relative; display: grid !important; gap: 2px; justify-items: center; padding: 30px 16px 18px; margin-left: 36px;
  border: 1.5px dashed var(--ink-2); border-radius: 2px; cursor: pointer; text-align: center; overflow: hidden;
}
.envelope-flap { position: absolute; left: 0; right: 0; top: 0; height: 18px; background: linear-gradient(to bottom left, transparent calc(50% - .75px), var(--ink-2) 50%, transparent calc(50% + .75px)) left / 50% 100% no-repeat, linear-gradient(to bottom right, transparent calc(50% - .75px), var(--ink-2) 50%, transparent calc(50% + .75px)) right / 50% 100% no-repeat; opacity: .6; }
.form7 .envelope { padding: 32px 16px 18px; }
.envelope-text { font-weight: 600; }
.envelope-hint { font-family: var(--mono); font-size: 13px; font-weight: 400; color: var(--ink-2); }
.envelope:hover { border-color: var(--ink); }
.form7 input[type=file]:focus-visible + .enclosures, .form7-files:has(input[type=file]:focus-visible) .envelope { outline: 2px solid var(--focus); outline-offset: 3px; }
.enclosures { display: flex; flex-wrap: wrap; gap: 18px; padding-left: 36px; }
.enclosure { position: relative; width: 96px; height: 96px; padding: 6px; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .18); transform: rotate(-2deg); }
.enclosure:nth-child(2) { transform: rotate(1.5deg); }
.enclosure:nth-child(3) { transform: rotate(-1deg); }
.enclosure::before { content: ""; position: absolute; left: 30%; top: -8px; width: 40%; height: 14px; background: rgb(213 161 99 / .55); transform: rotate(-3deg); }
.enclosure img { width: 100%; height: 100%; object-fit: cover; }
.enclosure-name { display: grid; place-items: center; height: 100%; font-family: var(--mono); font-size: 11px; overflow-wrap: anywhere; text-align: center; color: #032a1d; }
.enclosure-remove { position: absolute; right: -10px; top: -10px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--control); background: var(--sheet); color: var(--ink); font-size: 18px; line-height: 1; }
.form7-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 8px; border-top: 1.5px solid var(--ink); }
.form7-foot .button { margin-top: 18px; }
.form7-status { margin-top: 18px; font-size: 1rem; color: var(--ink-2); }
.form7-status:empty { display: none; }
.form7-receipt { position: relative; display: grid; gap: 14px; margin-top: 32px; padding: 44px clamp(20px, 5vw, 48px); border-radius: 2px; box-shadow: inset 0 0 0 6px var(--mount); }
.form7-receipt:focus { outline: none; }
.receipt-stamp-word {
  justify-self: start; padding: 4px 14px; border: 3px double var(--signal); color: var(--signal); transform: rotate(-6deg);
  font-family: var(--mono); font-weight: 700; font-size: 22px; letter-spacing: .18em; text-transform: uppercase;
}
.write-to { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--rule); display: grid; gap: 6px; }
.write-to-label { text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); }
.write-to-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; font-size: 1.25rem; }
.write-to-line a { overflow-wrap: anywhere; }
.copy-btn { min-height: 36px; padding: 0 12px; border: 1px solid var(--control); border-radius: 2px; background: none; font-family: var(--mono); font-size: 14px; text-transform: uppercase; letter-spacing: .08em; }
.copy-btn:hover { border-color: var(--ink); }
.copy-status { font-size: 1rem; color: var(--ink-2); }
.write-to-line noscript { font-family: var(--mono); font-size: 1.0625rem; }
.form7-check:not(:empty) { margin-top: -6px; }
@media (max-width: 639px) {
  .form7-row { grid-template-columns: 1fr; }
  .form7-head { padding-right: 0; }
  .form7-seal { width: 72px; height: 72px; top: -14px; right: 6px; font-size: 9px; }
  .form7-seal span + span { font-size: 11px; }
  .tick-row, .enclosures, .envelope { padding-left: 0; margin-left: 0; }
  .tick-row { display: grid; gap: 0; }
  .form7-files-label { flex-wrap: wrap; }
  .form7-hint { flex-basis: 100%; padding-left: 36px; }
}

/* ───────────────────────── 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) ───────────────────────── */

/* Bottom left, clear of the masthead's moon button. */
.draft-ribbon { position: fixed; z-index: 60; bottom: 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; }
}