/* Hallmark · genre: editorial · macrostructure: Letter (marketing) · Catalogue (shop) · Conversational FAQ (content) · design-system: design.md · designed-as-app
 * H5 letter hero knobs: dateline=place, salutation=script, body=2 paragraphs, signoff=footer
 * theme: custom · vibe: "canvas and thread, coastal Southern, timeless" · paper: oklch(97.4% 0.009 80) · accent: oklch(51.9% 0.079 257)
 * display: Cormorant Garamond 700 · body: Jost 400 · outlier: Mrs Saint Delafield (2 slots: salutation, signature) · axes: light / roman-serif / cool
 * enrichment: E5 custom illustration, tier A CSS art (embroidery hoop) + E8 her own photographs · nav: N12 banner + retract · footer: Ft6 letter close
 * motion primitives (3): stitch (thread sews itself) · settle (prints settle once) · press
 * Hallmark · pre-emit critique: P5 H4 E4 S5 R4 V5
 * slop test (58 gates) run 2026-09-22 · contrast: pass (40, 41) · nav: N12 · footer: Ft6 · slop: pass (42 to 45) · honest: pass (46)
 * chrome: pass (47) · tokens: pass (48) · responsive: pass (49) · icons: pass (30) · mobile: pass (34, 49, 50 to 57) · accent footprint ≤ 4.6 %
 * Colours, fonts, sizes, spaces, radii, easings and layers come from tokens.css only.
 */

/* ── 1 · base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-padding-top: calc(var(--masthead-h) + var(--space-xs)); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; overflow-x: clip;
  background: var(--color-paper); color: var(--color-ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
picture { display: contents; }
p, figure, blockquote, ol, ul, dl, dd, fieldset, legend { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
h1, h2, h3 {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-style: normal;
  line-height: var(--leading-display); letter-spacing: var(--tracking-display);
  color: var(--color-ink); overflow-wrap: anywhere; min-width: 0; text-wrap: balance;
}
a { color: var(--color-accent-deep); text-decoration: underline dashed var(--color-accent); text-decoration-thickness: var(--rule-hair); text-underline-offset: 0.28em; }
@media (hover: hover) { a:hover { text-decoration-style: solid; } }
:focus { outline: none; }
:focus-visible { outline: var(--rule-thread) solid var(--color-focus); outline-offset: 3px; }
::selection { background: var(--color-paper-blue); color: var(--color-ink); }
strong { font-weight: 500; color: var(--color-ink); }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--gutter); top: 0; transform: translateY(-120%); z-index: var(--z-toast); background: var(--color-ink); color: var(--color-paper); padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); text-decoration: none; }
.skip:focus-visible { transform: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--page-max)); margin-inline: auto; }
.muted { color: var(--color-muted); }
.caps { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 500; }
.nowrap { white-space: nowrap; }

/* ── 2 · type roles ───────────────────────────────────────────────────── */
.h1 { font-size: var(--text-display); }
.h2 { font-size: var(--text-2xl); }
.h3 { font-size: var(--text-lg); }
.lede { font-size: var(--text-base); color: var(--color-ink-2); max-width: var(--measure); text-wrap: pretty; }
.prose { display: grid; gap: var(--space-md); color: var(--color-ink-2); max-width: var(--measure); text-wrap: pretty; }
.salutation { font-family: var(--font-script); font-weight: 400; font-size: calc(var(--text-2xl) * 1.35); line-height: 1; color: var(--color-accent); letter-spacing: 0; }
.dateline { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-muted); font-weight: 500; }

/* the drawn underline that carries emphasis in a heading (never italic) */
.mark { position: relative; display: inline-block; color: var(--color-accent); white-space: nowrap; }
.mark__thread { position: absolute; left: 0; bottom: -0.16em; width: 100%; height: 0.36em; overflow: visible; pointer-events: none; }

/* ── 3 · stitch primitive: a running stitch that sews itself ─────────── */
.st { fill: none; stroke: var(--color-accent); stroke-width: var(--rule-thread); stroke-linecap: round; }
.st--light { stroke: var(--color-thread-light); }
.js .stitch-run .st { opacity: 0; transform: scale(0.3); transform-box: fill-box; transform-origin: center; }
.js .stitch-run.is-sewn .st {
  opacity: 1; transform: none;
  transition: opacity var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stitch-step));
}
.stitch-ring { position: absolute; inset: calc(-1 * var(--space-2xs)); width: calc(100% + 2 * var(--space-2xs)); height: calc(100% + 2 * var(--space-2xs)); overflow: visible; pointer-events: none; }

/* ── 4 · settle primitive: prints settle into place once ──────────────── */
.print {
  margin: 0; background: var(--color-paper); padding: var(--space-xs) var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-print); transform: rotate(var(--r, 0deg));
}
.print img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--space-3xs); background: var(--color-paper-2); }
.print figcaption { margin-top: var(--space-sm); padding-inline: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); line-height: 1.4; }
.js [data-settle] { opacity: 0; transform: translateY(var(--space-lg)) rotate(calc(var(--r, 0deg) - 3deg)); }
.js [data-settle="rise"] { transform: translateY(var(--space-lg)); }
.js [data-settle].is-settled {
  opacity: 1; transform: rotate(var(--r, 0deg));
  transition: opacity var(--dur-long) var(--ease-out), transform calc(var(--dur-long) * 1.4) var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* ── 5 · buttons and links (press primitive lives here) ───────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
  min-height: var(--hit); padding: var(--space-sm) var(--space-lg);
  border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-accent-ink);
  font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); line-height: 1;
  letter-spacing: var(--tracking-caps); text-transform: uppercase; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .btn:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); color: var(--color-accent-ink); } }
.btn:active { transform: translateY(1px) scale(0.985); }
.btn--ghost { background: transparent; color: var(--color-accent-deep); }
@media (hover: hover) { .btn--ghost:hover { background: var(--color-paper-blue); color: var(--color-accent-deep); border-color: var(--color-accent-deep); } }
.btn--block { display: flex; width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[data-state="loading"] { cursor: progress; }
.btn[data-state="loading"]::before {
  content: ""; width: 0.9em; height: 0.9em; border-radius: 50%;
  border: var(--rule-thread) solid currentColor; border-right-color: transparent; animation: spin 700ms linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }
.link { font-weight: 500; color: var(--color-accent-deep); white-space: nowrap; }
a:not(.btn):active { color: var(--color-ink); }
.link::after { content: ""; display: inline-block; width: 0.42em; height: 0.42em; margin-left: 0.45em; border-top: var(--rule-thread) solid currentColor; border-right: var(--rule-thread) solid currentColor; transform: translateY(-0.06em) rotate(45deg); }

/* ── 6 · N12 masthead: banner that retracts + the bar + progress thread ── */
.masthead { position: sticky; top: 0; z-index: var(--z-nav); transition: transform var(--dur-long) var(--ease-out); view-transition-name: masthead; }
.masthead.is-compact { transform: translateY(calc(-1 * var(--space-xl))); }
.masthead.is-dismissed { transform: none; }
.banner {
  height: var(--space-xl); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding-inline: var(--gutter); background: var(--color-ink); color: var(--color-paper);
  font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
}
.banner p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.banner__lg { display: none; }
.banner a { color: var(--color-paper); text-decoration-color: var(--color-paper); }
.banner__x { position: relative; flex: none; width: var(--space-lg); height: var(--space-lg); border: 0; border-radius: 50%; background: transparent; color: var(--color-paper); line-height: 1; font-size: var(--text-base); }
.banner__x::before { content: ""; position: absolute; inset: calc(-1 * var(--space-xs)); }
.banner__x:active, .lightbox__close:active { transform: scale(0.94); }
.masthead.is-dismissed .banner { display: none; }
.bar { position: relative; background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.bar__inner { display: flex; align-items: center; gap: var(--space-lg); min-height: calc(var(--space-2xl) - var(--space-xs)); }
.brand { display: flex; align-items: center; gap: var(--space-sm); margin-right: auto; color: var(--color-accent); text-decoration: none; min-width: 0; }
.brand img { width: 2.5rem; height: 2.5rem; flex: none; }
.brand__name { display: grid; font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; line-height: 1.12; }
@media (min-width: 30rem) { .brand__name { display: block; font-size: var(--text-md); letter-spacing: var(--tracking-caps); line-height: 1; } }
.nav-links { display: none; }
.nav-links a { font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.nav-links a[aria-current="page"] { color: var(--color-accent); }
.nav-links a.btn[aria-current="page"] { background: transparent; color: var(--color-accent-deep); }
@media (hover: hover) { .nav-links a:not(.btn):hover { color: var(--color-accent); } }
.bar__menu {
  min-height: var(--hit); padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-ink-2); border-radius: var(--radius-pill);
  background: transparent; color: var(--color-ink); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-caps); text-transform: uppercase;
  transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.bar__menu:active { transform: translateY(1px) scale(0.985); }
.bar__menu[aria-expanded="true"] { background: var(--color-paper-2); }
.sheet { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); box-shadow: var(--shadow-print); padding: var(--space-md) var(--gutter) var(--space-xl); }
.sheet.is-open { display: block; }
.sheet ul { list-style: none; padding: 0; margin: 0; display: grid; }
.sheet li + li { border-top: var(--rule-hair) solid var(--color-rule-2); }
.sheet a { display: flex; align-items: center; min-height: calc(var(--hit) + var(--space-xs)); font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-ink); text-decoration: none; white-space: nowrap; }
.sheet .btn { margin-top: var(--space-lg); }
.js .sheet.is-open li { animation: sheet-in var(--dur-short) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(calc(-1 * var(--space-xs))); } }
.progress { position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--rule-hair)); height: var(--rule-thread); overflow: hidden; pointer-events: none; }
.progress span { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--color-accent) 0 var(--space-sm), transparent var(--space-sm) calc(var(--space-sm) + var(--space-xs))); transform: translateX(calc((var(--progress, 0) - 1) * 100%)); }
@supports (animation-timeline: scroll()) {
  .progress span { animation: progress-sew linear both; animation-timeline: scroll(root); }
  @keyframes progress-sew { from { transform: translateX(-100%); } to { transform: translateX(0); } }
}

/* ── 7 · Letter hero (H5) ─────────────────────────────────────────────── */
.letter { padding-block: var(--space-xl) var(--space-3xl); }
.letter__grid { display: grid; gap: var(--space-2xl); align-items: start; }
.letter__text { display: grid; gap: var(--space-lg); min-width: 0; }
.letter__text .salutation { margin-bottom: calc(-1 * var(--space-xs)); }
.letter__title { font-size: var(--text-display); max-width: 15ch; }
.letter__print { --r: 2deg; width: min(100%, 26rem); justify-self: end; }
.letter__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); font-size: var(--text-sm); line-height: 1.4; color: var(--color-muted); }

/* ── 8 · Catalogue (F6 product plates) ─────────────────────────────────── */
.catalogue { padding-block: var(--space-2xl) var(--space-3xl); }
.head-hang { display: grid; gap: var(--space-md); padding-bottom: var(--space-xl); max-width: 42rem; }
.head-hang .h2 { font-size: var(--text-2xl); }
.plates { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); }
.plate a { display: grid; gap: var(--space-sm); color: inherit; text-decoration: none; }
.plate__img { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: var(--radius-arch); overflow: hidden; background: var(--color-paper-2); transition: transform var(--dur-micro) var(--ease-out); }
.plate__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-long) var(--ease-out); }
.plate__img .plate__alt { opacity: 0; }
@media (hover: hover) { .plate a:hover .plate__alt { opacity: 1; } }
/* lift: the plate rises to meet the pointer. Declared before the press rule so a held click still wins. */
@media (hover: hover) {
  .plate a { transition: transform var(--dur-short) var(--ease-out); }
  .plate a:hover { transform: translateY(calc(var(--space-2xs) * -1)); }
  .plate a:hover .plate__img { transform: scale(1.02); }
  .plate a:hover .plate__name { color: var(--color-accent); }
}
.plate a:active .plate__img { transform: scale(0.985); }
.plate__meta { display: grid; gap: var(--space-3xs); }
.plate__no { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-muted); font-weight: 500; }
.plate__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: 1.1; color: var(--color-ink); white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.plate__price { font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums lining-nums; }

/* ── 9 · See it stitched: the embroidery hoop (tier A CSS art + SVG) ───── */
.studio { position: relative; background: var(--color-paper-2); padding-block: var(--space-3xl) var(--space-2xl); }
.studio__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.studio__panel { display: grid; gap: var(--space-lg); max-width: 32rem; min-width: 0; }
.hoop { --hoop: min(84vw, 26rem); position: relative; width: var(--hoop); aspect-ratio: 1; margin-inline: auto; }
.hoop--small { --hoop: 13.5rem; }
.hoop__ring {
  position: absolute; inset: 0; border-radius: 50%; padding: calc(var(--hoop) * 0.045);
  background: radial-gradient(circle at 34% 28%, var(--color-wood-light), var(--color-wood) 55%, var(--color-wood-deep));
  box-shadow: var(--shadow-print);
}
.hoop__ring::after { content: ""; position: absolute; inset: calc(var(--hoop) * 0.028); border-radius: 50%; border: var(--rule-hair) solid var(--color-wood-deep); pointer-events: none; }
.hoop__cloth { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; }
.hoop__clasp {
  position: absolute; left: 50%; top: calc(var(--hoop) * -0.03); width: calc(var(--hoop) * 0.12); height: calc(var(--hoop) * 0.1);
  transform: translateX(-50%); border-radius: var(--radius-sm) var(--radius-sm) var(--space-2xs) var(--space-2xs);
  background: linear-gradient(var(--color-brass), var(--color-brass-deep));
}
.hoop__clasp::after { content: ""; position: absolute; left: 50%; top: 30%; width: 34%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--color-brass-deep); box-shadow: inset 0 0 0 var(--rule-hair) var(--color-brass); }
.cloth { fill: var(--color-fabric); }
.weave { stroke: var(--color-fabric-weave); stroke-width: 0.6; }
.thread-fill-a { fill: var(--color-thread); }
.thread-fill-b { fill: var(--color-thread-light); }
.thread-fill-white-a { fill: var(--color-thread-white); }
.thread-fill-white-b { fill: var(--color-thread-white-shade); }
.thread { font-family: var(--font-display); font-weight: 700; stroke: var(--color-thread-shade); stroke-width: 0.5; paint-order: stroke; }
.thread--white { stroke: var(--color-thread-white-shade); }
.thread-shadow { flood-color: var(--color-thread-shade); flood-opacity: 0.45; }
.js .thread.is-stitching { stroke-dasharray: 1400; stroke-dashoffset: 1400; fill-opacity: 0; animation: thread-in 900ms var(--ease-out) forwards; }
@keyframes thread-in { 60% { stroke-dashoffset: 0; fill-opacity: 0; } to { stroke-dashoffset: 0; fill-opacity: 1; } }
.motif { transition: opacity var(--dur-short) var(--ease-out); }
.field { display: grid; gap: var(--space-xs); }
.field__label { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 500; color: var(--color-ink-2); }
.field__row { display: flex; gap: var(--space-xs); align-items: stretch; }
.input {
  min-height: var(--hit); width: 100%; min-width: 0; padding: var(--space-sm) var(--space-md);
  border: var(--rule-hair) solid var(--color-ink-2); border-radius: var(--radius-md);
  background: var(--color-paper); color: var(--color-ink);
  outline: var(--rule-thread) solid transparent; outline-offset: var(--rule-hair);
  transition: background-color var(--dur-short) var(--ease-out);
}
@media (hover: hover) { .input:hover { background: var(--color-paper-blue); } }
.input:focus-visible { outline-color: var(--color-focus); }
.input:active { background: var(--color-paper-blue); }
.input:disabled { opacity: 0.55; cursor: not-allowed; }
.input::placeholder { color: var(--color-muted); }
.field__help { font-size: var(--text-sm); color: var(--color-muted); min-height: 1lh; }
.copy { flex: none; }
.copy[data-state="copied"] { background: var(--color-paper-blue); color: var(--color-accent-deep); }

/* choice pills: radios that get stitched round when picked */
.pills { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.pill { position: relative; display: inline-flex; }
.pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pill span {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--hit); padding: var(--space-xs) var(--space-md);
  border: var(--rule-hair) solid var(--color-ink-2); border-radius: var(--radius-pill); background: var(--color-paper);
  font-size: var(--text-sm); white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.pill span i { font-style: normal; color: var(--color-muted); font-variant-numeric: tabular-nums lining-nums; }
@media (hover: hover) { .pill:hover span { background: var(--color-paper-blue); } }
.pill:active span { transform: translateY(1px) scale(0.985); }
.pill input:checked + span { border-color: var(--color-accent); background: var(--color-paper-blue); color: var(--color-accent-deep); }
.pill input:checked + span i { color: var(--color-accent-deep); }
.pill input:focus-visible + span { outline: var(--rule-thread) solid var(--color-focus); outline-offset: 3px; }
.pill .stitch-ring { inset: calc(-1 * var(--space-2xs)); }
.swatch { width: var(--space-md); height: var(--space-md); flex: none; border-radius: 50%; border: var(--rule-hair) solid var(--color-rule); background: var(--color-wood-light); }
.swatch--blue { background: linear-gradient(var(--color-wood-light) 0 38%, var(--color-ink) 38% 62%, var(--color-wood-light) 62%); }
.pills--color + .field__help { margin-top: var(--space-xs); min-height: 0; }
.gallery__note { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-muted); max-width: var(--measure); }

/* ── 10 · Occasion index ──────────────────────────────────────────────── */
.occasions { padding-block: var(--space-3xl) var(--space-2xl); }
.occasions__grid { display: grid; gap: var(--space-2xl); align-items: start; }
.occasions__print { --r: -2.5deg; width: min(100%, 22rem); }
.occasions__text { display: grid; gap: var(--space-md); align-content: start; min-width: 0; }
.occasions__text .index { margin-top: var(--space-md); }
.index { list-style: none; padding: 0; margin-top: var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.index li { border-bottom: var(--rule-hair) solid var(--color-rule); }
.index a { display: grid; gap: var(--space-3xs); padding-block: var(--space-md); min-height: var(--hit); color: var(--color-ink); text-decoration: none; transition: transform var(--dur-micro) var(--ease-out); }
.index a:active { transform: translateX(var(--space-3xs)); }
.index__who { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: 1.15; white-space: nowrap; transition: color var(--dur-short) var(--ease-out); }
.index__what { font-size: var(--text-sm); color: var(--color-muted); white-space: nowrap; }
.index__what::after { content: "\2009\2192"; color: var(--color-accent); }
@media (hover: hover) { .index a:hover .index__who { color: var(--color-accent); } }

/* ── 11 · Process (F4 step sequence + the thread that sews through it) ─ */
.scalloped { position: relative; }
.scalloped::before, .scalloped::after {
  content: ""; position: absolute; left: 0; right: 0; height: var(--space-md); pointer-events: none;
  background: radial-gradient(circle at 50% 100%, var(--surface) calc(var(--space-md) * 0.66), transparent calc(var(--space-md) * 0.66 + 0.5px)) 0 0 / var(--space-lg) var(--space-md) repeat-x;
}
.scalloped::before { top: calc(-1 * var(--space-md) + 1px); }
.scalloped::after { bottom: calc(-1 * var(--space-md) + 1px); transform: scaleY(-1); }
.process { --surface: var(--color-paper-blue); background: var(--surface); padding-block: var(--space-3xl) var(--space-4xl); }
.studio.scalloped { --surface: var(--color-paper-2); }
.process__grid { display: grid; gap: var(--space-2xl); }
.process__head { display: grid; gap: var(--space-md); align-content: start; }
.steps { --badge: calc(var(--space-xl) + var(--space-xs)); position: relative; list-style: none; padding: 0; display: grid; gap: var(--space-2xl); }
.step { position: relative; z-index: var(--z-base); display: grid; grid-template-columns: var(--badge) minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.step__no {
  display: grid; place-items: center; width: var(--badge); height: var(--badge);
  background: var(--color-accent); color: var(--color-accent-ink);
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); line-height: 1;
  --scallop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50.0 6.0A9 9 0 0 1 66.8 9.3A9 9 0 0 1 81.1 18.9A9 9 0 0 1 90.7 33.2A9 9 0 0 1 94.0 50.0A9 9 0 0 1 90.7 66.8A9 9 0 0 1 81.1 81.1A9 9 0 0 1 66.8 90.7A9 9 0 0 1 50.0 94.0A9 9 0 0 1 33.2 90.7A9 9 0 0 1 18.9 81.1A9 9 0 0 1 9.3 66.8A9 9 0 0 1 6.0 50.0A9 9 0 0 1 9.3 33.2A9 9 0 0 1 18.9 18.9A9 9 0 0 1 33.2 9.3A9 9 0 0 1 50.0 6.0Z'/%3E%3C/svg%3E");   /* inline so it also works when the site is opened straight from disk */
  -webkit-mask: var(--scallop) center / contain no-repeat; mask: var(--scallop) center / contain no-repeat;
}
.step__body { display: grid; gap: var(--space-xs); padding-top: var(--space-xs); }
.step__body .h3 { font-size: var(--text-lg); }
.step__body p { color: var(--color-ink-2); max-width: var(--measure); }
.process__thread { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: var(--z-under); }
.process__cta { margin-top: var(--space-2xl); display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.process__thread .st { stroke-width: var(--rule-thread); }
.steps { view-timeline-name: --steps; }
@keyframes stitch-in { from { opacity: 0; transform: scale(0.3); } to { opacity: 1; transform: none; } }
.process__thread.is-scroll .stitch-run .st { transition: none; animation: stitch-in linear both; animation-timeline: --steps; animation-range: cover calc(18% + var(--p, 0) * 42%) cover calc(20% + var(--p, 0) * 42%); }

/* ── 12 · Proof (T1 pull quote with marginalia) ───────────────────────── */
.proof { padding-block: var(--space-3xl) var(--space-2xl); }
.proof__grid { display: grid; gap: var(--space-lg); align-items: end; }
.proof blockquote { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1.18; letter-spacing: var(--tracking-display); color: var(--color-ink); max-width: 26ch; }
.proof__margin { display: grid; gap: var(--space-3xs); padding-top: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); max-width: 16rem; }
.stars { color: var(--color-accent); letter-spacing: 0.2em; font-size: var(--text-sm); }

/* ── 13 · Conversational FAQ (accordion: grid-rows 0fr → 1fr) ─────────── */
.faq { padding-block: var(--space-2xl) var(--space-3xl); }
.faq__grid { display: grid; gap: var(--space-xl); }
.qa-list { border-top: var(--rule-hair) solid var(--color-rule); }
.qa { border-bottom: var(--rule-hair) solid var(--color-rule); }
.qa summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) var(--hit); align-items: center; gap: var(--space-md); min-height: calc(var(--hit) + var(--space-sm)); padding-block: var(--space-sm); cursor: pointer; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:active .h3 { color: var(--color-accent-deep); }
.qa summary .h3 { font-size: var(--text-md); line-height: 1.2; }
.qa__icon { position: relative; justify-self: end; width: var(--space-lg); height: var(--space-lg); transition: transform var(--dur-short) var(--ease-in-out); }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: var(--rule-thread); background: var(--color-accent); transform: translate(-50%, -50%); border-radius: var(--rule-thread); }
.qa__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] .qa__icon { transform: rotate(45deg); }
.qa__a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-long) var(--ease-in-out); }
@starting-style { .qa[open] .qa__a { grid-template-rows: 0fr; } }
.qa__a > div { overflow: hidden; }
.qa__a .prose { padding-bottom: var(--space-lg); }
.faq-group + .faq-group { margin-top: var(--space-2xl); }
.faq-group .h2 { margin-bottom: var(--space-lg); }

/* ── 14 · Ft6 letter close ────────────────────────────────────────────── */
.close { --surface: var(--color-paper-2); position: relative; background: var(--surface); padding-block: var(--space-2xl) var(--space-xl); margin-top: var(--space-md); }
.close::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--space-md) + 1px); height: var(--space-md); background: radial-gradient(circle at 50% 100%, var(--surface) calc(var(--space-md) * 0.66), transparent calc(var(--space-md) * 0.66 + 0.5px)) 0 0 / var(--space-lg) var(--space-md) repeat-x; }
.close__grid { display: grid; gap: var(--space-xl); }
.close__letter { display: grid; gap: var(--space-sm); max-width: 36rem; }
.close__line { font-family: var(--font-display); font-weight: 400; font-size: var(--text-lg); line-height: 1.25; color: var(--color-ink); }
.close__sign { font-family: var(--font-script); font-size: calc(var(--text-2xl) * 1.5); line-height: 0.9; color: var(--color-accent); }
.close__ps { color: var(--color-ink-2); max-width: var(--measure); }
.close__seal { width: 6rem; height: 6rem; }
.close__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.close__links a { font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; text-decoration: none; min-height: var(--hit); display: inline-flex; align-items: center; }
@media (hover: hover) { .close__links a:hover { text-decoration: underline dashed var(--color-accent); text-underline-offset: 0.28em; } }
.close__fine { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-lg); font-size: var(--text-xs); color: var(--color-muted); letter-spacing: 0.04em; }

/* ── 15 · Product page (H2 split diptych · F3 spec sheet · C4 sticky bar) ─ */
.crumbs { padding-top: var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-xs); }
.crumbs li { white-space: nowrap; }
.crumbs li + li::before { content: "\00B7"; margin-right: var(--space-xs); color: var(--color-rule); }
.crumbs a { color: var(--color-muted); text-decoration: none; }
@media (hover: hover) { .crumbs a:hover { text-decoration: underline dashed var(--color-accent); text-underline-offset: 0.28em; } }
.product { display: grid; gap: var(--space-2xl); padding-block: var(--space-lg) var(--space-3xl); }
.gallery { min-width: 0; }
.gallery__main { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: var(--radius-arch); overflow: hidden; background: var(--color-paper-2); cursor: zoom-in; }
.gallery__main img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity var(--dur-short) var(--ease-out); }
.gallery__main img.is-leaving { opacity: 0; }
.gallery__main { transition: transform var(--dur-micro) var(--ease-out); }
.gallery__main:active { transform: scale(0.992); }
.gallery__hint { position: absolute; right: var(--space-md); bottom: var(--space-md); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink-2); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.thumbs { display: flex; gap: var(--space-md); margin-top: var(--space-sm); padding: var(--space-sm); margin-inline: calc(-1 * var(--space-sm)); overflow-x: auto; scrollbar-width: none; }
.thumbs::-webkit-scrollbar { display: none; }
.thumb { position: relative; flex: none; width: 4.25rem; aspect-ratio: 4 / 5; padding: 0; border: 0; border-radius: 50%; background: var(--color-paper-2); transition: transform var(--dur-micro) var(--ease-out); }
.thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.thumb:active { transform: scale(0.97); }
.thumb[aria-current="true"] { box-shadow: 0 0 0 var(--rule-hair) var(--color-accent); }
.thumb .stitch-ring { inset: calc(-1 * var(--space-xs)); width: calc(100% + 2 * var(--space-xs)); height: calc(100% + 2 * var(--space-xs)); }
.product__info { display: grid; gap: var(--space-lg); min-width: 0; align-content: start; }
.product__title { font-size: var(--text-2xl); }
.price { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-accent-deep); font-variant-numeric: tabular-nums lining-nums; line-height: 1; }
.price[data-changing] { opacity: 0.3; transition: opacity var(--dur-micro) var(--ease-in); }
.product__intro { color: var(--color-ink-2); max-width: var(--measure); }
.legend { font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 500; color: var(--color-ink-2); margin-bottom: var(--space-sm); }
.try { display: grid; gap: var(--space-lg); padding: var(--space-lg); border-radius: var(--radius-lg); background: var(--color-paper-2); }
.try__controls { display: grid; gap: var(--space-md); min-width: 0; align-content: center; }
.try__note { font-size: var(--text-sm); color: var(--color-muted); }
.buy { display: grid; gap: var(--space-sm); }
.buy__note { font-size: var(--text-sm); color: var(--color-muted); }
.group-note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: center; padding-block: var(--space-md); border-block: var(--rule-hair) solid var(--color-rule-2); color: var(--color-ink-2); font-size: var(--text-sm); }
.group-note img { width: 3rem; height: auto; }
.spec { width: 100%; border-collapse: collapse; font-size: var(--text-sm); font-variant-numeric: tabular-nums lining-nums; }
.spec th, .spec td { text-align: left; vertical-align: top; padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.spec th { width: 38%; padding-right: var(--space-md); font-weight: 500; font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--color-muted); }
.spec td { color: var(--color-ink-2); }
.more { padding-block: var(--space-xl) var(--space-3xl); }
.more .plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.more .plate:nth-child(3) { display: none; }

.buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-md);
  padding: var(--space-sm) var(--gutter) max(var(--space-sm), env(safe-area-inset-bottom));
  background: var(--color-paper); border-top: var(--rule-hair) solid var(--color-rule);
  transform: translateY(110%); visibility: hidden;
  transition: transform var(--dur-long) var(--ease-out), visibility 0s linear var(--dur-long);
}
.buy-bar.is-visible { transform: none; visibility: visible; transition: transform var(--dur-long) var(--ease-out), visibility 0s; }
.buy-bar__text { display: grid; min-width: 0; line-height: 1.25; }
.buy-bar__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.buy-bar__price { font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums lining-nums; }

.lightbox { position: fixed; inset: 0; margin: auto; width: min(92vw, 56rem); height: fit-content; max-height: 94dvh; padding: 0; border: 0; background: transparent; overflow: visible; }
.lightbox::backdrop { background: var(--color-scrim); }
.lightbox[open] { animation: modal-in 300ms var(--ease-out); }
.lightbox[open]::backdrop { animation: fade-in 300ms var(--ease-out); }
.lightbox.is-closing { animation: modal-out 220ms var(--ease-in) forwards; }
@keyframes modal-in { from { opacity: 0; transform: scale(0.96); } }
@keyframes modal-out { to { opacity: 0; transform: scale(0.98); } }
@keyframes fade-in { from { opacity: 0; } }
.lightbox__fig { margin: 0; display: grid; gap: var(--space-sm); justify-items: center; }
.lightbox__fig img { max-height: 84dvh; width: auto; max-width: 100%; border-radius: var(--radius-md); }
.lightbox__count { color: var(--color-paper); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.lightbox__btn { position: absolute; top: 50%; width: var(--hit); height: var(--hit); display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--color-paper); color: var(--color-ink); font-size: var(--text-lg); line-height: 1; transform: translateY(-50%); transition: transform var(--dur-micro) var(--ease-out); }
.lightbox__btn:active { transform: translateY(-50%) scale(0.95); }
.lightbox__btn--prev { left: calc(-1 * var(--space-sm)); }
.lightbox__btn--next { right: calc(-1 * var(--space-sm)); }
.lightbox__close { position: absolute; top: calc(-1 * var(--space-2xl) + var(--space-xs)); right: 0; min-height: var(--hit); padding: 0 var(--space-md); border: 0; border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 500; }

/* ── 16 · The custom order letter (form as correspondence) ─────────────── */
.write { padding-block: var(--space-xl) var(--space-3xl); }
.write__grid { display: grid; gap: var(--space-2xl); align-items: start; grid-template-areas: "intro" "paper" "print"; }
.write__intro { grid-area: intro; display: grid; gap: var(--space-lg); align-content: start; }
.write__print { grid-area: print; --r: -2deg; width: min(100%, 20rem); }
.paper { grid-area: paper; position: relative; min-width: 0; padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-md); background: var(--color-paper); box-shadow: var(--shadow-print); }

/* the stamp in the corner: her seal on a perforated blue stamp, postmarked when the letter is sent */
.post { position: absolute; top: var(--space-lg); right: var(--space-lg); width: 3.75rem; transform: rotate(4deg); }
.stamp {
  --perf: var(--space-2xs);
  display: grid; place-items: center; aspect-ratio: 4 / 5; padding: var(--perf); background: var(--color-accent);
  -webkit-mask: radial-gradient(circle at var(--perf) var(--perf), transparent calc(var(--perf) * 0.6), var(--color-ink) calc(var(--perf) * 0.6 + 0.5px)) calc(-1 * var(--perf)) calc(-1 * var(--perf)) / calc(var(--perf) * 2) calc(var(--perf) * 2) round, linear-gradient(var(--color-ink) 0 0) content-box;
  mask: radial-gradient(circle at var(--perf) var(--perf), transparent calc(var(--perf) * 0.6), var(--color-ink) calc(var(--perf) * 0.6 + 0.5px)) calc(-1 * var(--perf)) calc(-1 * var(--perf)) / calc(var(--perf) * 2) calc(var(--perf) * 2) round, linear-gradient(var(--color-ink) 0 0) content-box;
}
.stamp img { width: 84%; height: auto; }
.post__mark { position: absolute; right: 0; top: 18%; width: 210%; max-width: none; height: auto; overflow: visible; pointer-events: none; }
.post__mark .st { stroke: var(--color-ink-2); }

.letter-form { display: grid; font-family: var(--font-display); font-weight: 400; font-size: var(--text-md); line-height: 1.5; color: var(--color-ink); }
.letter-form .salutation { padding-right: calc(3.75rem + var(--space-md)); margin-bottom: var(--space-lg); white-space: nowrap; font-size: min(calc(var(--text-2xl) * 1.35), 10.5vw); }
.line { display: grid; gap: var(--space-2xs); margin: 0; }
.cue { display: block; text-wrap: pretty; }
.fill + .cue { margin-top: var(--space-md); }
.fill { display: flex; align-items: baseline; gap: var(--space-xs); min-width: 0; }
.punct { display: none; }
.opt { flex: none; font-size: var(--text-sm); color: var(--color-muted); font-family: var(--font-body); }
.blank {
  flex: 1 1 auto; min-width: 0; width: 100%; height: var(--hit); padding: 0 var(--space-2xs);
  border: 0; border-bottom: var(--rule-thread) solid var(--color-ink-2); border-radius: 0; background: transparent;
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.2; color: var(--color-accent-deep);
  outline: var(--rule-thread) solid transparent; outline-offset: var(--space-3xs);
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.blank--num { flex: 0 0 4.5ch; width: 4.5ch; text-align: center; }
/* the party names, written into the letter so you can read them back */
.named {
  flex: 1 1 auto; min-width: 0; padding: 0 var(--space-2xs);
  border-bottom: var(--rule-thread) solid var(--color-ink-2);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6; color: var(--color-accent-deep);
  text-wrap: pretty;
}
@media (hover: hover) { .blank:hover { background-color: var(--color-paper-blue); } }
.blank:focus-visible { outline-color: var(--color-focus); background-color: var(--color-paper-blue); }
.blank:active { background-color: var(--color-paper-blue); }
.blank:disabled { opacity: 0.55; cursor: not-allowed; }
.blank::placeholder { color: var(--color-muted); }
.blank[aria-invalid="true"] { border-bottom-color: var(--color-error); }
.select { position: relative; display: flex; flex: 1 1 auto; min-width: 0; }
.select select { appearance: none; -webkit-appearance: none; padding-right: var(--space-xl); cursor: pointer; text-overflow: ellipsis; }
.select::after { content: ""; position: absolute; right: var(--space-xs); top: 44%; width: 0.4em; height: 0.4em; border-right: var(--rule-thread) solid var(--color-ink-2); border-bottom: var(--rule-thread) solid var(--color-ink-2); transform: translateY(-50%) rotate(45deg); pointer-events: none; }
.line--area { margin-top: var(--space-md); }
.blank--area {
  --lines: 2.25rem;
  display: block; width: 100%; height: auto; min-height: calc(var(--lines) * 4 + var(--space-xs)); margin-top: var(--space-2xs); padding: var(--space-3xs) var(--space-2xs) 0;
  border-bottom: 0; line-height: var(--lines); resize: vertical;
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--lines) - var(--rule-hair)), var(--color-rule) calc(var(--lines) - var(--rule-hair)) var(--lines));
  background-attachment: local; background-position: 0 calc(var(--space-3xs) + var(--space-2xs));
}
.letter-form .signoff { margin-top: var(--space-md); }
.errors { font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; color: var(--color-error); min-height: 1lh; margin: var(--space-3xs) 0 var(--space-xs); }
.letter-form__send { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-lg); font-family: var(--font-body); line-height: 1.5; }
.letter-form__send small { font-size: var(--text-sm); color: var(--color-muted); }
.honey { position: absolute; left: -100vw; width: 1px; height: 1px; overflow: hidden; }
.sent { display: grid; gap: var(--space-md); justify-items: start; }
.sent svg { width: var(--space-2xl); height: var(--space-2xl); }
.notice { display: flex; gap: var(--space-sm); align-items: flex-start; margin-top: var(--space-md); padding: var(--space-md); border-radius: var(--radius-md); background: var(--color-paper-2); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-sm); line-height: 1.5; }
.notice--error { box-shadow: inset 0 0 0 var(--rule-hair) var(--color-error); }
.notice b { color: var(--color-error); font-weight: 500; }

/* ── 17 · Bridal page parts ───────────────────────────────────────────── */
.duo { display: grid; gap: var(--space-2xl); align-items: center; padding-block: var(--space-2xl) var(--space-3xl); }
.duo__print { --r: 1.8deg; width: min(100%, 24rem); }
.duo__text { display: grid; gap: var(--space-lg); min-width: 0; }
.options-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums lining-nums; }
.options-table td { padding: var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.options-table td:last-child { text-align: right; font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); color: var(--color-accent-deep); }

.maids__grid { display: grid; gap: var(--space-2xl); align-items: start; }
.maids__text { min-width: 0; }
.plates--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.party { display: grid; gap: var(--space-md); min-width: 0; padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-lg); background: var(--color-paper-2); scroll-margin-top: calc(var(--masthead-h) + var(--space-md)); }
.party__lede { max-width: 28rem; font-size: var(--text-sm); color: var(--color-ink-2); }
.party .hoop { margin: var(--space-xs) 0; }
.party__names { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xs); }
.party__names li {
  position: relative; display: inline-flex; align-items: center; border: var(--rule-hair) solid var(--color-ink-2); border-radius: var(--radius-pill); background: var(--color-paper);
  transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out);
}
.party__names li:has(.chip[aria-pressed="true"]) { border-color: var(--color-accent); background: var(--color-paper-blue); }
.party__names .stitch-ring { inset: calc(-1 * var(--space-2xs)); }
.chip, .chip__x { display: inline-flex; align-items: center; min-height: var(--hit); border: 0; background: transparent; line-height: 1; transition: color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.chip { padding: 0 var(--space-2xs) 0 var(--space-md); border-radius: var(--radius-pill) 0 0 var(--radius-pill); font-size: var(--text-sm); color: var(--color-ink); white-space: nowrap; }
.chip[aria-pressed="true"] { color: var(--color-accent-deep); }
.chip__x { justify-content: center; width: var(--hit); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; font-size: var(--text-md); color: var(--color-muted); }
@media (hover: hover) { .chip:hover { color: var(--color-accent-deep); } .chip__x:hover { color: var(--color-error); } }
.chip:active, .chip__x:active { transform: scale(0.94); }
.party__names li.is-leaving { opacity: 0; transform: scale(0.9); transition: opacity var(--dur-short) var(--ease-in), transform var(--dur-short) var(--ease-in); }

/* bridal party planner: names on the left, the day on the right, one send */
.planner { --surface: var(--color-paper-blue); background: var(--surface); padding-block: var(--space-3xl) var(--space-3xl); scroll-margin-top: var(--masthead-h); }
.planner__head { display: grid; gap: var(--space-md); max-width: 44rem; margin-bottom: var(--space-2xl); }
.planner__grid { display: grid; gap: var(--space-xl); align-items: start; }
.planner__step { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; font-weight: 500; color: var(--color-ink-2); }
.planner__step span { display: grid; place-items: center; width: var(--space-xl); height: var(--space-xl); border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); font-family: var(--font-display); font-size: var(--text-md); letter-spacing: 0; }
.planner .party { background: var(--color-paper); }
.planner__side { display: grid; gap: var(--space-xl); min-width: 0; }
.planner__side .steps { gap: var(--space-xl); }
.process__cta:empty { display: none; }
.planner__letter { grid-area: auto; }
.planner__side .step:nth-of-type(n) { margin-left: 0; }
.planner__letter .check-row { font-family: var(--font-body); margin-block: var(--space-xs); }
.planner__form { display: grid; gap: var(--space-md); min-width: 0; padding: var(--space-xl) var(--space-lg); border-radius: var(--radius-lg); background: var(--color-paper); }
.party-form { display: grid; gap: var(--space-sm); }
.party-form__row { display: grid; gap: var(--space-sm); }
.field__error { min-height: 1lh; font-size: var(--text-sm); color: var(--color-error); line-height: 1.4; }
.input[aria-invalid="true"] { border-color: var(--color-error); }
textarea.input { resize: vertical; line-height: 1.5; }
.select--input { display: flex; }
.party-form .select { display: flex; width: 100%; }
.party-form .select select { width: 100%; padding-right: var(--space-xl); }
.check-row { display: flex; align-items: center; gap: var(--space-sm); min-height: var(--hit); font-size: var(--text-sm); color: var(--color-ink-2); cursor: pointer; }
.check-row input { width: 1.125rem; height: 1.125rem; accent-color: var(--color-accent); }
.opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--color-muted); }
.field__label .opt { font-size: var(--text-xs); line-height: 1; }

/* FAQ: topic index (pills on phones, a sticky contents list on desktop) */
.faq-index { margin-top: var(--space-lg); }
.faq-index ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.faq-index a {
  display: inline-flex; align-items: center; gap: var(--space-sm); min-height: var(--hit); padding: 0 var(--space-md);
  border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill);
  font-size: var(--text-sm); color: var(--color-ink-2); text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
@media (hover: hover) { .faq-index a:hover { background: var(--color-paper-blue); } }
.faq-index a:active { transform: translateY(1px) scale(0.985); }
.faq-index a[aria-current="true"] { border-color: var(--color-accent); background: var(--color-paper-blue); color: var(--color-accent-deep); }
.faq-group { scroll-margin-top: calc(var(--masthead-h) + var(--space-md)); }

/* ── 18 · Short pages: thank you, 404 ─────────────────────────────────── */
.note-page { padding-block: var(--space-2xl) var(--space-3xl); }
.note-page__grid { display: grid; gap: var(--space-2xl); align-items: center; }
.note-page .prose ol { padding-left: var(--space-lg); display: grid; gap: var(--space-xs); }
.link-list { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-xl); }
.hoop--thanks { --hoop: min(72vw, 20rem); margin-inline: 0; }
.st--thick { stroke: var(--color-thread); stroke-width: 7; }
.loose { fill: none; stroke: var(--color-thread); stroke-width: 3; stroke-linecap: round; opacity: 0; transition: opacity var(--dur-long) var(--ease-out); }
.loose.is-shown { opacity: 1; }

/* ── 19 · Layout: 40 rem and up ───────────────────────────────────────── */
@media (min-width: 40rem) {
  .plates { gap: var(--space-2xl) var(--space-lg); }
  .plate__name { font-size: var(--text-lg); }
  .index a { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-md); }
  .index__who { font-size: var(--text-lg); }
  .try { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .steps { --badge: var(--space-2xl); }
  .step { gap: var(--space-lg); }
  .step__no { font-size: var(--text-lg); }
  .try .hoop { margin-inline: 0; }
  .paper { padding: var(--space-2xl) var(--space-2xl) var(--space-xl); }
  .post { top: var(--space-xl); right: var(--space-xl); width: 4.5rem; }
  .letter-form { font-size: var(--text-lg); line-height: 2.1; }
  .letter-form .salutation { padding-right: calc(4.5rem + var(--space-xl)); margin-bottom: var(--space-md); }
  .line { display: block; }
  .cue { display: inline; }
  .fill + .cue { margin-top: 0; }
  .fill { display: inline-flex; vertical-align: baseline; max-width: 100%; }
  .punct { display: inline; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); margin-left: calc(-1 * var(--space-xs)); }
  .blank { flex: 0 1 auto; width: 12ch; }
  .blank--wide { width: 21ch; }
  .blank--num { flex: 0 0 4.5ch; width: 4.5ch; }
  .blank--date { width: 11.5em; }
  .select { display: inline-flex; flex: 0 1 auto; }
  .select select { width: auto; }
  .blank--area { width: 100%; }
  .more .plates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .more .plate:nth-child(3) { display: block; }
  .buy-bar { display: none; }
  .banner__sm { display: none; }
  .banner__lg { display: inline; }
}

/* ── 20 · Layout: 60 rem and up (desktop) ─────────────────────────────── */
@media (min-width: 60rem) {
  .nav-links { display: flex; align-items: center; gap: var(--space-xl); }
  .bar__menu, .sheet { display: none !important; }
  .letter { padding-block: var(--space-2xl) var(--space-3xl); }
  .letter__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: var(--space-3xl); }
  .letter__print { margin-top: var(--space-xl); }
  .plates { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plates--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3xl); }
  .occasions__grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); gap: var(--space-3xl); }
  .occasions__print { margin-top: var(--space-2xl); }
  .process__grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: var(--space-3xl); }
  .step:nth-of-type(2) { margin-left: var(--space-2xl); }
  .step:nth-of-type(3) { margin-left: calc(var(--space-2xl) * 2); }
  .proof__grid { grid-template-columns: minmax(0, 40rem) minmax(0, 15rem); column-gap: var(--space-3xl); }
  .faq__grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--space-3xl); }
  .close__grid { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .product { grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); gap: var(--space-3xl); align-items: start; }
  .product__info { position: sticky; top: calc(var(--masthead-h) + var(--space-md)); }
  .write__grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); grid-template-rows: auto 1fr; grid-template-areas: "intro paper" "print paper"; gap: var(--space-2xl) var(--space-3xl); }
  .maids__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-3xl); }
  .planner__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl) var(--space-3xl); }
  .party-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .party { margin-top: var(--space-md); }
  .faq-head { position: sticky; top: calc(var(--masthead-h) + var(--space-md)); align-self: start; }
  .faq-index ol { display: grid; gap: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
  .faq-index li { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
  .faq-index a { display: flex; min-height: calc(var(--hit) + var(--space-2xs)); padding: 0; border: 0; border-radius: 0; background: none; font-size: var(--text-base); }
  .faq-index a::before { content: ""; flex: none; width: var(--space-lg); border-top: var(--rule-thread) dashed var(--color-accent); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-short) var(--ease-out); }
  .faq-index a[aria-current="true"] { background: none; }
  .faq-index a[aria-current="true"]::before { transform: none; }
  @media (hover: hover) { .faq-index a:hover { background: none; color: var(--color-accent-deep); } }
  .hoop--thanks { justify-self: end; }
  .duo { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-3xl); }
  .duo--flip .duo__print { order: 2; justify-self: end; }
  .note-page__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
}

/* ── 21 · Page changes: the masthead stays, the page crossfades ───────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 160ms var(--ease-in) both vt-out; }
::view-transition-new(root) { animation: 320ms var(--ease-out) both vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ── 22 · Reduced motion: spatial motion collapses to a short fade ────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js [data-settle] { transform: rotate(var(--r, 0deg)); }
  .js [data-settle="rise"] { transform: none; }
  .buy-bar { transform: none; opacity: 0; visibility: hidden; transition-property: opacity, visibility; }
  .buy-bar.is-visible { opacity: 1; visibility: visible; }
  .party__names li.is-leaving { transform: none; }
  .plate a:hover, .plate a:hover .plate__img { transform: none; }
  .faq-index a::before { transform: none; opacity: 0; }
  .faq-index a[aria-current="true"]::before { opacity: 1; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  .js .stitch-run .st { transform: none; }
  .masthead.is-compact { transform: none; }
  .btn[data-state="loading"]::before { animation: none; }
}