/* No @import chain. The stylesheets are linked individually and each carries
   its own ?v=<mtime>, because an @import cannot be cache-busted: the parent
   revalidates and the imported child is served from cache, which shipped a
   stale pattern layer. Load order is set by the template, not by imports. */

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.68 var(--sans);
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; }
img { height: auto; }
a { color: var(--ink); text-decoration: none; }
a:hover { color: var(--accent-ink); }
::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(36px, 5.2vw, 68px); }
h2 { font-size: clamp(27px, 3.2vw, 42px); }
h3 { font-size: clamp(19px, 1.6vw, 23px); }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sect) 0; }

.shell { width: 100%; max-width: var(--max); margin: 0 auto; }
.pad   { padding-left: var(--gut); padding-right: var(--gut); }
.sect  { padding: 0 var(--gut) var(--sect); position: relative; }
.sect--band { padding-top: var(--sect); }
.stack { display: flex; flex-direction: column; gap: 18px; }
.row   { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.push  { margin-left: auto; }
.muted { color: var(--mut); }
.soft  { color: var(--soft); }
.lilac { color: var(--mut); }
.gold  { color: var(--accent-ink); }
.eyebrow {
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 600;
}
.lede { font-size: clamp(16px, 1.3vw, 18.5px); line-height: 1.72; color: var(--soft); max-width: 62ch; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--paper); padding: 10px 18px; z-index: 200; }
.skip:focus { left: 8px; top: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The pattern layer moved to pattern.css, imported via tokens.css, so the
   admin contact sheet and the storefront cannot drift apart. */

/* ==========================================================================
   Design characters

   A design is a preset of palette, type pair, frame and motion. The palette and
   type come in as tokens; the two below are the structural half of it, keyed off
   data-frame and data-motion on <html>. Nothing here restates a colour.
   ========================================================================== */

/* -- frame: how surfaces are edged ---------------------------------------- */
:root[data-frame="flat"] { --frame: 1px solid transparent; --radius: 0px; }
:root[data-frame="flat"] .card--pad,
:root[data-frame="flat"] .totals,
:root[data-frame="flat"] .empty,
:root[data-frame="flat"] fieldset { border-color: var(--line); }
:root[data-frame="flat"] .facet a,
:root[data-frame="flat"] .filterbar a { border-color: transparent; background: var(--paper-2); }

:root[data-frame="soft"] { --radius: 14px; }
:root[data-frame="soft"] .card__well,
:root[data-frame="soft"] .hero__well,
:root[data-frame="soft"] .tile,
:root[data-frame="soft"] .card--pad,
:root[data-frame="soft"] .totals,
:root[data-frame="soft"] .empty,
:root[data-frame="soft"] fieldset,
:root[data-frame="soft"] .note,
:root[data-frame="soft"] .facet a,
:root[data-frame="soft"] .sizefinder,
:root[data-frame="soft"] .datecheck { border-radius: 14px; overflow: hidden; }
:root[data-frame="soft"] .btn { border-radius: 999px; }

/* ruled: horizontal rules instead of boxes, the front-page look */
:root[data-frame="ruled"] .card--pad,
:root[data-frame="ruled"] .empty,
:root[data-frame="ruled"] .totals { border-left: 0; border-right: 0; }
:root[data-frame="ruled"] .sect { border-bottom: 1px solid var(--line); }
:root[data-frame="ruled"] h2 { border-bottom: 2px solid var(--ink); padding-bottom: 10px; }

/* crested: centred and symmetrical, rules above and below the heading */
:root[data-frame="crested"] .sect > .stack,
:root[data-frame="crested"] .band .stack { align-items: center; text-align: center; }
:root[data-frame="crested"] .lede { margin-left: auto; margin-right: auto; text-align: center; }
:root[data-frame="crested"] h2 { letter-spacing: .04em; }
:root[data-frame="crested"] .eyebrow::before,
:root[data-frame="crested"] .eyebrow::after { content: '\2014'; opacity: .5; margin: 0 10px; }

/* blocked: solid accent slabs, hard edges, the loud one */
:root[data-frame="blocked"] .eyebrow { background: var(--accent); color: var(--on-accent); padding: 5px 11px; }
:root[data-frame="blocked"] .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .06em; }
:root[data-frame="blocked"] .price__now { background: var(--accent); color: var(--on-accent); padding: 2px 10px; }

/* The motion layer moved to pattern.css. It has to live beside the shape
   vocabulary it animates, and in a sheet the admin also loads: it was left
   here once and the contact sheet rendered ninety-five perfectly still
   mandalas, which is not a contact sheet for motion. */

@media (prefers-reduced-motion: reduce) {
  .mz, .mz-rings { animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* ==========================================================================
   Header
   ========================================================================== */
.announce {
  position: relative; overflow: hidden;
  background: var(--paper-2); border-bottom: 1px solid var(--line);
  padding: 10px var(--gut); text-align: center; font-size: 13.5px;
}
.announce a { color: var(--accent-ink); border-bottom: 1px solid currentColor; font-weight: 600; }
.announce > span { position: relative; z-index: 1; }

.masthead {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  padding: clamp(16px, 2.2vw, 26px) var(--gut);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); }
.brand__word { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); letter-spacing: .01em; }
.brand svg { display: block; }
.mainnav { display: flex; flex-wrap: wrap; gap: clamp(13px, 1.7vw, 24px); font-size: 14.5px; }
.mainnav a { padding: 4px 0; border-bottom: 1px solid transparent; color: var(--soft); }
.mainnav a:hover, .mainnav a[aria-current] { border-bottom-color: var(--accent); color: var(--accent-ink); }
.headtools { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.searchbox { display: flex; border: var(--frame); background: var(--paper); }
.searchbox input { background: transparent; border: 0; color: var(--ink); padding: 9px 12px; font: 400 14px var(--sans); min-width: 0; width: 150px; }
.searchbox input::placeholder { color: var(--faint); }
.searchbox button { background: transparent; border: 0; color: var(--accent-ink); padding: 0 12px; cursor: pointer; }

.bagbtn { display: flex; align-items: center; gap: 7px; border: var(--frame); padding: 9px 14px; font-size: 14px; }
.bagbtn__n { background: var(--accent); color: var(--paper); font-size: 12px; font-weight: 600; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 5px; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 30px; font: 600 15px var(--sans); border: 1px solid transparent;
  border-radius: var(--radius); cursor: pointer; text-align: center;
  transition: background .16s, color .16s, border-color .16s;
}
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--ink); color: var(--paper); }
.btn--ghost { background: transparent; color: var(--accent-ink); border-color: var(--accent); }
.btn--ghost:hover { background: var(--accent); color: var(--on-accent); }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--quiet:hover { border-color: var(--accent); color: var(--accent-ink); }
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--wide { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: stretch; }
/* grid and flex children default to min-content width, which lets wide media
   push a track open. Nothing here should ever widen the page. */
.hero > *, .split > *, .grid > *, .tiles > *, .facets > *, .promise > * { min-width: 0; }
.hero__copy {
  padding: clamp(28px, 4vw, 62px) clamp(4px, 2vw, 34px) clamp(28px, 4vw, 62px) 0;
  display: flex; flex-direction: column; gap: 20px; justify-content: center;
}
.hero__copy > * { position: relative; z-index: 1; }
/* The photograph sits in its own sampled backdrop colour, so its edge dissolves.
   width:100% and min-width:0 are load-bearing: aspect-ratio combined with
   max-height otherwise makes the box derive its width from its capped height,
   which overflows the grid track it is sitting in. */
.hero__well { overflow: hidden; background: var(--well); aspect-ratio: 2/3; max-height: 660px; width: 100%; min-width: 0; }
/* contain, not cover. cover crops, and on a full-length garment shot every crop
   takes a head or a pair of shoes. Because --well is derived to match the
   backdrop the photography is lit on, the letterboxing contain produces is the
   same colour as the photograph's own wall, so it reads as one continuous
   field rather than as a picture sitting in a box. Nothing ever clips. */
.hero__well img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; }
.hero__facts { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font-size: 12.5px; letter-spacing: .03em; padding: 6px 13px; border: 1px solid var(--line-2); color: var(--soft); background: var(--paper); }
.chip--gold { border-color: var(--accent); color: var(--accent-ink); }

@media (max-width: 720px) {
  .hero { display: flex; flex-direction: column-reverse; }
  .hero__copy { padding: clamp(24px, 5vw, 40px) 0 0; }
  .hero__well { max-height: 460px; }
}

/* ==========================================================================
   Product cards
   ========================================================================== */
.grid { display: grid; gap: var(--gap); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }

.card { display: flex; flex-direction: column; position: relative; background: transparent; transition: transform .22s; }
.card:hover { transform: translateY(-3px); }
.card__well { display: block; overflow: hidden; background: var(--well); aspect-ratio: 2/3; position: relative; }
.card__well img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; transition: transform .55s cubic-bezier(.2,.7,.2,1); }
.card:hover .card__well img { transform: scale(1.03); }
/* The .week rules lived here for a five-row "wedding week" band that sat
   directly above the occasion tiles and linked back to the same four
   categories. It was the second occasion section on one page. Its teaching
   moved onto the tiles as .tile__day and .tile__wear below, and the band went. */

/* The two halves of the fit band: do it yourself, or have us do it. They were
   two separate sections until the homepage turned out to be saying "get your
   size right" in six places. */
.fitcol { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.fitcol__tag { font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
               font-weight: 600; opacity: .78; }
.fitcol h3 { font-family: var(--serif); font-size: clamp(21px, 2.6vw, 26px); line-height: 1.2; }
.fitcol__lede { font-size: 15.5px; line-height: 1.6; max-width: 46ch; opacity: .9; }
.fitcol .tablewrap, .fitcol .sizefinder { width: 100%; }

.datecheck { margin-top: 22px; border: var(--frame); background: var(--paper); padding: 18px;
             display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-items: center; }
.datecheck label { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); font-weight: 600; }
.datecheck__out { font-size: 15px; color: var(--soft); margin: 0; }
.datecheck__out strong { color: var(--accent-ink); }
.datecheck__out.is-tight strong { color: var(--pat-1); }

/* shop-by facets */
.facets { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.facet { display: flex; flex-direction: column; gap: 8px; }
.facet__label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); font-weight: 600; }
.facet a {
  border: 1px solid var(--line-2); background: var(--paper); padding: 14px 16px;
  display: flex; align-items: baseline; gap: 8px; font-size: 15.5px; font-weight: 500;
  transition: border-color .16s, background .16s;
}
.facet a small { font-size: 12.5px; color: var(--mut); font-weight: 400; margin-left: auto; }
.facet a:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--paper)); }

/* size finder */
.sizefinder { border: var(--frame); background: var(--paper); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.sizefinder > label { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); font-weight: 600; }
.sizefinder__out { font-size: 15px; color: var(--soft); margin: 0; }
.sizefinder__out strong { color: var(--accent-ink); font-size: 17px; }

.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 15.5px; }
.ticks li { padding-left: 26px; position: relative; }
.ticks li::before { content: '\2713'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

.card--pad { border: var(--frame); background: var(--paper); padding: 22px; }
.card--pad:hover { border-color: var(--accent); }
.card__body { padding: 14px 2px 0; display: flex; flex-direction: column; gap: 6px; }
.card__name { font-family: var(--serif); font-size: 19px; line-height: 1.22; }
.card__meta { font-size: 13px; color: var(--mut); }
.card__price { font-size: 18px; font-weight: 600; color: var(--accent-ink); display: flex; align-items: baseline; gap: 9px; }
.card__was { font-size: 13.5px; color: var(--strike); text-decoration: line-through; font-weight: 400; }
.card__sizes { font-size: 12px; color: var(--mut); letter-spacing: .02em; }

.flag {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--accent); color: var(--on-accent);
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px;
}
.flag--dark { background: var(--paper); color: var(--accent-ink); }
.flag--right { left: auto; right: 0; }

/* the inherited photographs carry a wholesaler stamp in the lower right */
.card__well--stamped img { clip-path: inset(0 0 6.5% 0); transform: scale(1.07); transform-origin: top center; }
.card__well--stamped:hover img { transform: scale(1.11); }

/* ==========================================================================
   Occasion tiles
   ========================================================================== */
.tiles { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 235px), 1fr)); }
.tile {
  position: relative; isolation: isolate; overflow: hidden;
  /* Taller than it was: the tile now carries the day and the cloth note that
     the deleted wedding-week band used to carry in its own section. */
  min-height: 320px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px; background: var(--well);
}
/* A tall portrait dropped into a short wide tile always crops to the midriff.
   Until the wide candid event photography is in, anchor high so the tile shows
   the top of the garment rather than a random slice of its middle. */
.tile__img { position: absolute; inset: 0; z-index: -1; }
.tile__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; opacity: .55; }
.tile--wide .tile__img img { object-position: center center; }
.tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--ink) 86%, transparent) 4%, color-mix(in srgb, var(--ink) 24%, transparent) 62%); }
.tile__motif { position: absolute; top: 16px; right: 16px; color: var(--paper); opacity: .8; }
.tile__name { font-family: var(--serif); font-size: 23px; color: var(--paper); }
/* What the day is like, in the tile's own voice. Absorbed from the deleted
   wedding-week band so the occasion is taught once instead of twice. */
.tile__day { font-size: 12px; letter-spacing: .09em; text-transform: uppercase;
             color: var(--accent-2); margin-top: 6px; font-weight: 600; }
.tile__blurb { font-size: 13.5px; color: color-mix(in srgb, var(--paper) 82%, var(--ink)); margin-top: 5px; }
/* What the cloth has to survive. Sits against a rule so it reads as the answer
   to the line above it rather than more blurb. */
.tile__wear { font-size: 13px; color: color-mix(in srgb, var(--paper) 74%, var(--ink));
              margin-top: 8px; padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--paper) 24%, transparent); }
.tile__n { font-size: 12px; color: var(--accent-2); margin-top: 9px; letter-spacing: .1em; text-transform: uppercase; }

/* ==========================================================================
   Bands
   ========================================================================== */
.band { position: relative; isolation: isolate; overflow: hidden; padding: clamp(34px, 4.6vw, 66px) var(--gut); }
.band--gold { background: var(--accent); color: var(--on-accent); }
.band--gold a { color: var(--on-accent); }
.band--gold .eyebrow { color: var(--on-accent); opacity: .82; }
.band--gold .btn--primary { background: var(--on-accent); color: var(--accent-ink); }
.band--gold .btn--primary:hover { background: var(--ink); color: var(--paper); }
.band--deep { background: var(--ink); color: var(--paper); }
/* Pulled towards paper because the band's ground is ink, and paper opposes ink
   whichever way round a palette runs. Bare accent-2 was tuned on light grounds
   and fell to 1.9:1 on the one design whose paper is dark. */
.band--deep .eyebrow { color: color-mix(in srgb, var(--accent-2) 55%, var(--paper)); }
.band--deep .lede { color: color-mix(in srgb, var(--paper) 78%, var(--ink)); }
.band--cream, .band--desk { background: var(--paper-2); }

.promise { display: grid; gap: clamp(18px, 2.4vw, 34px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.promise__item { display: flex; flex-direction: column; gap: 6px; }
.promise__head { font-family: var(--serif); font-size: 22px; }
.promise__sub { font-size: 14.5px; line-height: 1.55; }

.split { display: grid; gap: clamp(20px, 3vw, 46px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: center; }

/* ==========================================================================
   Product page
   ========================================================================== */
.pdp { display: grid; gap: clamp(22px, 3.4vw, 50px); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .pdp { grid-template-columns: 1fr; } }
.gallery { display: flex; flex-direction: column; gap: 10px; }
.gallery__main { background: var(--well); aspect-ratio: 2/3; overflow: hidden; }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; display: block; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.gallery__thumbs button { padding: 0; border: 1px solid transparent; background: var(--well); cursor: pointer; aspect-ratio: 2/3; overflow: hidden; }
.gallery__thumbs button[aria-current="true"] { border-color: var(--accent); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }

.price { display: flex; align-items: baseline; gap: 12px; }
.price__now { font-size: 32px; font-weight: 600; color: var(--accent-ink); }
.price__was { font-size: 17px; color: var(--strike); text-decoration: line-through; }
.price__off { font-size: 13px; color: var(--on-accent); background: var(--pat-1); padding: 3px 10px; font-weight: 600; }

.sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.sizebtn {
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink);
  padding: 11px 15px; font: 500 14px var(--sans); cursor: pointer; line-height: 1.2;
  display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 64px;
}
.sizebtn small { font-size: 11.5px; color: var(--mut); }
.sizebtn:hover { border-color: var(--accent); }
.sizebtn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.sizebtn[aria-pressed="true"] small { color: var(--on-accent); opacity: .88; }
.sizebtn[disabled] { opacity: .38; cursor: not-allowed; text-decoration: line-through; }

.spec { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.spec th, .spec td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { color: var(--mut); font-weight: 500; width: 34%; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }

.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.table th { color: var(--accent-ink); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
/* The wrapper paints its own paper ground, so it must also set its own ink:
   inside .band--gold the inherited colour is --on-accent, which is paper-toned
   on purpose, and paper-toned text on a paper ground is invisible. */
.tablewrap { border: var(--frame); overflow-x: auto; background: var(--paper); color: var(--ink); }

.stars { color: var(--accent); letter-spacing: .1em; font-size: 15px; }
.stars .off { color: var(--line-2); }

.review { border: var(--frame); background: var(--paper); padding: 17px 19px; display: flex; flex-direction: column; gap: 8px; }
.review__who { font-size: 13px; color: var(--mut); }
.review__reply { border-left: 2px solid var(--accent); padding-left: 12px; font-size: 14px; color: var(--soft); }

.note { border-left: 3px solid var(--accent); background: var(--paper-2); padding: 14px 17px; font-size: 14.5px; color: var(--soft); }
.note--warn { border-left-color: var(--accent-2); }
.note--bad { border-left-color: var(--pat-1); }
.note--good { border-left-color: var(--pat-3); }

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary { cursor: pointer; padding: 16px 2px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; color: var(--accent-ink); font-size: 20px; line-height: 1; }
.accordion details[open] summary::after { content: '\2212'; }
.accordion .accordion__body { padding: 0 2px 18px; color: var(--soft); font-size: 15px; }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); font-weight: 600; }
input[type=text], input[type=email], input[type=tel], input[type=password],
input[type=number], input[type=date], select, textarea {
  background: var(--paper-2); border: 1px solid var(--line-2); color: var(--ink);
  padding: 12px 14px; font: 400 15px var(--sans); border-radius: var(--radius); width: 100%;
}
textarea { min-height: 110px; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--accent-ink) 50%), linear-gradient(135deg, var(--accent-ink) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 38px; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
.formgrid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
fieldset { border: var(--frame); background: var(--paper); padding: 20px; margin: 0; }
legend { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink); font-weight: 600; padding: 0 8px; }

.radio { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line-2); padding: 14px 16px; cursor: pointer; background: var(--paper); }
.radio:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--paper)); }
.radio input { margin-top: 3px; accent-color: var(--accent); }
.radio__t { font-weight: 600; }
.radio__b { font-size: 14px; color: var(--soft); }

/* ==========================================================================
   Layout odds
   ========================================================================== */
.crumbs { font-size: 13px; color: var(--mut); padding: 14px var(--gut) 0; }
.crumbs a { color: var(--accent-ink); }
.crumbs span + span::before { content: ' / '; color: var(--faint); }

.filterbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 28px; }
.filterbar a { border: 1px solid var(--line-2); padding: 9px 17px; font-size: 14px; background: var(--paper); }
.filterbar a[aria-current] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }

.linelist { border: var(--frame); background: var(--paper); }
.lineitem { display: grid; grid-template-columns: 76px 1fr auto; gap: 14px; padding: 14px; border-bottom: 1px solid var(--line); align-items: center; }
.lineitem:last-child { border-bottom: 0; }
.lineitem__img { background: var(--well); aspect-ratio: 2/3; overflow: hidden; }
.lineitem__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lineitem__qty { width: 62px; }

.totals { border: var(--frame); background: var(--paper); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.totals__row { display: flex; justify-content: space-between; font-size: 15px; }
.totals__row--big { font-size: 20px; font-weight: 600; color: var(--accent-ink); border-top: 1px solid var(--line); padding-top: 12px; }

.foot { border-top: 1px solid var(--line); background: var(--paper-3); padding: clamp(32px, 4vw, 54px) var(--gut) 28px; position: relative; isolation: isolate; overflow: hidden; }
.foot__grid { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.foot h4 { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 12px; font-weight: 600; }
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; }
.foot a { color: var(--soft); }
.foot a:hover { color: var(--accent-ink); }
.foot__base { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line-2); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13px; color: var(--mut); }

.empty { border: var(--frame); background: var(--paper); padding: clamp(28px, 4vw, 52px); text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.toast { border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--paper)); padding: 12px 16px; font-size: 14.5px; margin-bottom: 18px; }

@media (max-width: 620px) {
  .mainnav { order: 3; width: 100%; justify-content: flex-start; }
  .headtools { width: 100%; }
  .searchbox { flex: 1; }
  .searchbox input { width: 100%; }
  .lineitem { grid-template-columns: 60px 1fr; }
  .lineitem > :last-child { grid-column: 1 / -1; }
}

@media print {
  .bloom, .pat, .announce, .mainnav, .headtools, .foot, .btn { display: none !important; }
  body { background: #fff; color: #000; }
}



/* ==========================================================================
   Per-composition sections

   These exist for one design each. They are not variants of a shared block:
   a nameplate is not a hero with different padding, and a contents index has
   no equivalent anywhere else in the system.
   ========================================================================== */

/* -- Masthead: the front page ---------------------------------------------- */
.nameplate { text-align: center; }
.nameplate__kicker {
  font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mut); margin: 0 0 14px;
}
.nameplate__word {
  font-family: var(--serif); font-size: clamp(52px, 13vw, 168px);
  line-height: .88; letter-spacing: -.02em; margin: 0;
}
.nameplate__rule {
  height: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--ink);
  margin: 18px auto 20px; max-width: min(96%, 1100px); padding-top: 4px;
}
.nameplate__standfirst {
  font-family: var(--serif); font-size: clamp(18px, 2.2vw, 27px); line-height: 1.4;
  max-width: 40ch; margin: 0 auto 22px; color: var(--soft);
}
.nameplate__cta { justify-content: center; }

.contents__list { list-style: none; margin: 14px 0 0; padding: 0; }
.contents__row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.contents__n { font-size: 12px; color: var(--accent-ink); font-weight: 600; flex: none; width: 26px; }
.contents__title { font-family: var(--serif); font-size: clamp(19px, 2.2vw, 26px); flex: none; }
.contents__title:hover { color: var(--accent-ink); }
/* The leader dots, drawn rather than typed, so they fill whatever space is left */
.contents__dots {
  flex: 1 1 auto; height: 1px; min-width: 20px;
  background-image: radial-gradient(circle, var(--line-2) 1px, transparent 1px);
  background-size: 6px 1px; background-repeat: repeat-x; background-position: 0 bottom;
  align-self: end; margin-bottom: 5px;
}
.contents__note { font-size: 13.5px; color: var(--mut); flex: none; text-align: right; }

.pullquote { text-align: center; }
.pullquote__q {
  font-family: var(--serif); font-size: clamp(24px, 4.4vw, 54px); line-height: 1.22;
  margin: 0 auto; max-width: 22ch; text-wrap: balance;
}
.pullquote__q::before { content: '\201C'; }
.pullquote__q::after  { content: '\201D'; }
.pullquote__by {
  margin: 18px 0 0; font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mut);
}

/* -- Modern: search first --------------------------------------------------- */
.searchfirst__inner { gap: 14px; max-width: 60ch; }
.searchfirst__h { font-size: clamp(30px, 4.6vw, 58px); line-height: 1.04; }
.searchfirst__box { display: flex; gap: 10px; width: 100%; max-width: 560px; }
.searchfirst__box input {
  flex: 1 1 auto; min-width: 0; padding: 14px 16px; font: 400 16px var(--sans);
  background: var(--paper-2); border: var(--frame); color: var(--ink); border-radius: var(--radius);
}
.searchfirst__box input:focus { outline: none; border-color: var(--accent); }
.searchfirst__quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.searchfirst__facts { font-size: 13.5px; }

/* -- Stamp: the deal strip -------------------------------------------------- */
.dealstrip__row {
  display: grid; gap: 1px; background: color-mix(in srgb, var(--on-accent) 22%, transparent);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.dealstrip__item {
  background: var(--accent); padding: 18px 20px; display: flex; flex-direction: column; gap: 5px;
  color: var(--on-accent);
}
.dealstrip__item:hover { background: color-mix(in srgb, var(--accent) 86%, var(--ink)); }
.dealstrip__big { font-family: var(--serif); font-size: clamp(17px, 1.7vw, 22px); line-height: 1.15; }
.dealstrip__sub { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }

/* -- Crest: the wedding week ------------------------------------------------ */
.weekrow {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--line);
  border: var(--frame); grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.weekrow__day { background: var(--paper); padding: 18px 16px; display: flex; flex-direction: column; gap: 7px; }
.weekrow__n {
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-size: 13px; font-weight: 600;
}
.weekrow__name { font-family: var(--serif); font-size: 21px; }
.weekrow__note { font-size: 13.5px; color: var(--mut); }
.weekrow__wear { font-size: 13.5px; color: var(--accent-ink); font-weight: 500; }
.weekrow__go { font-size: 13px; color: var(--soft); margin-top: auto; padding-top: 6px; }
.weekrow__go:hover { color: var(--accent-ink); }

/* -- grid variants ---------------------------------------------------------- */
.grid--6 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 12px; }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
/* The editorial treatment drops the retail furniture: no flags, no size run.
   An edit is a selection, not a shelf. */
.card--edit .flag, .card--edit .card__sizes { display: none; }
.card--edit .card__name { font-size: 20px; }
/* The price-led one does the opposite and puts the number first. */
.card--buy .card__name { font-size: 15px; }
.card--buy .price { order: -1; font-size: 19px; }


/* Feature: one occasion argued in one line and one photograph. Masthead runs
   two back to back making opposite cases, so the second mirrors the first. */
.feature__split--flip > :first-child { order: 2; }
.feature__well { overflow: hidden; background: var(--well); aspect-ratio: 2/3; max-height: 520px; width: 100%; min-width: 0; }
.feature__well img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Store line: an address and a fit note as a colophon, or the same facts as
   an invitation, depending on which design is closing with it. */
.storeline__cols { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.storeline__cols > * { min-width: 0; }

/* Stamp sets its headings in capitals. That is the design, not a shout: the
   original is a rubber stamp and a stamp has one case. */
:root[data-design="stamp"] h1,
:root[data-design="stamp"] h2 { text-transform: uppercase; letter-spacing: .01em; }

/* ==========================================================================
   The review switcher

   Fixed bottom right, on every page, collapsible, and it remembers its state.
   It replaced the control in the header, which meant scrolling to the top of a
   long page every time you wanted the next template.
   ========================================================================== */
.rev { position: fixed; right: 14px; bottom: 14px; z-index: 90; font-family: var(--sans); }
.rev[hidden] { display: none; }

.rev__tab {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line-2);
  padding: 10px 15px; font: 500 13.5px var(--sans);
  box-shadow: 0 12px 34px -14px color-mix(in srgb, var(--ink) 62%, transparent);
}
.rev__tab:hover { border-color: var(--accent); }
.rev__dot {
  width: 15px; height: 15px; border-radius: 50%; flex: none;
  background: conic-gradient(var(--accent) 0 33%, var(--pat-1) 0 66%, var(--pat-2) 0);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent);
}

.rev__body {
  position: absolute; right: 0; bottom: 0; width: min(92vw, 330px);
  max-height: min(78vh, 620px); overflow: auto;
  background: var(--paper); border: 1px solid var(--line-2); padding: 14px;
  box-shadow: 0 20px 50px -18px color-mix(in srgb, var(--ink) 66%, transparent);
}
.rev__body[hidden] { display: none; }
.rev__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rev__head strong { font-family: var(--serif); font-weight: 400; font-size: 19px; }
.rev__close {
  background: transparent; border: 0; cursor: pointer; color: var(--mut);
  font-size: 22px; line-height: 1; padding: 0 4px;
}
.rev__close:hover { color: var(--ink); }

.rev__lab {
  margin: 0 0 8px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--mut); font-weight: 600;
}
.rev__off {
  float: right; text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: 11px; color: var(--accent-ink); border-bottom: 1px solid;
}

.rev__list { display: grid; gap: 4px; margin-bottom: 14px; }
.rev__opt {
  display: flex; align-items: center; gap: 9px; padding: 6px;
  border: 1px solid transparent; color: var(--ink); cursor: pointer;
}
.rev__opt:hover { border-color: var(--line-2); }
.rev__opt.is-on { border-color: var(--accent); }
.rev__optbody { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rev__name { font-size: 13px; }
.rev__meta { font-size: 10.5px; color: var(--mut); letter-spacing: .02em; }

.rev__pals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.rev__pal {
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer;
  background: transparent; border: 1px solid transparent; padding: 4px 2px 5px;
  font: 400 10px var(--sans); color: var(--mut);
}
.rev__pal:hover { border-color: var(--line-2); color: var(--ink); }
.rev__pal.is-on { border-color: var(--accent); color: var(--accent-ink); }
.rev__palname { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Paper, accent and ink of what it selects, so the swatch is a preview rather
   than a label you have to click to understand. */
.rev__chip {
  width: 26px; aspect-ratio: 1; flex: none; background: var(--a);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent),
              inset 0 -7px 0 0 var(--b);
}
.rev__pal .rev__chip { width: 100%; aspect-ratio: 3/2; }

.rev__reset {
  margin-top: 10px; width: 100%; padding: 7px; cursor: pointer;
  background: transparent; border: 1px solid var(--line-2); color: var(--soft);
  font: 400 12px var(--sans);
}
.rev__reset:hover { border-color: var(--accent); color: var(--accent-ink); }

/* While a template is being fetched. Brief, but without it a slow swap looks
   like a dead click. */
.rev.is-busy .rev__tab { opacity: .6; }
@media print { .rev { display: none !important; } }

/* Original against Current. A rebuild you cannot hold up against its source is
   a rebuild nobody can check, so the toggle sits at the top of the switcher. */
.rev__mode { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 12px; }
.rev__modebtn {
  padding: 7px 8px; text-align: center; cursor: pointer; font: 500 12px var(--sans);
  border: 1px solid var(--line-2); color: var(--mut); background: transparent;
}
.rev__modebtn + .rev__modebtn { border-left: 0; }
.rev__modebtn:hover { color: var(--ink); }
.rev__modebtn.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

/* ---- the standing promise bar -----------------------------------------------
   Appended under every design's own footer. Styled from the active design's own
   variables so it reads as part of whichever of the seven is on screen. */
.promisebar {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px 22px; padding: 14px 24px;
  background: var(--ink); color: var(--paper);
  font-size: 12.5px; line-height: 1.5; text-align: center;
  border-top: 1px solid color-mix(in srgb, var(--paper) 16%, transparent);
}
.promisebar span { opacity: .82; }
.promisebar a { color: var(--paper); text-decoration: underline; text-underline-offset: 2px; }
.promisebar a:hover { opacity: 1; }

/* The ambient layers hold still for anyone who asked motion to stop. The
   masthead's strike animates opacity up from zero, so animation:none alone
   leaves the stylesheet value, which is visible; no override needed. */
@media (prefers-reduced-motion: reduce) {
  .dc-orn, .dc-orn * { animation: none !important; }
}

/* ---- the sampler ------------------------------------------------------------
   The eighth theme: every unique section from the other seven, each block
   wrapped in its own theme's data-design and data-palette so its tokens,
   scoped styles and ornament all apply. The block paints its theme's own
   paper and ink because the cloned sections are transparent and relied on
   their sheet wrapper for a ground; here the wrapper is the block. */
.sh-block { position: relative; isolation: isolate; background: var(--paper); color: var(--ink); }

/* The sampler runs edge to edge. Each skin's sheet wrapper caps itself at
   1440px inline, which is right for a single theme's page and wrong for a
   review surface, so the cap is lifted here; important because an inline
   style cannot be beaten any other way. */
:root[data-full] body > div[style*="max-width"] { max-width: none !important; }
.sh-tag {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px clamp(19px, 3.33vw, 48px);
  background: var(--ink); color: var(--paper);
  font-family: Archivo, system-ui, sans-serif;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
}
.sh-tag a { color: var(--accent-2); text-decoration: none; }
.sh-tag a:hover { text-decoration: underline; }
.sh-tag--bare { background: transparent; color: var(--mut); border-top: 1px solid var(--line); }

/* ---- the header picker in the switcher -------------------------------------*/
.rev__chrome { display: flex; flex-direction: column; gap: 5px; }
.rev__chrome select {
  font: inherit; font-size: 13px; padding: 7px 9px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 6px; width: 100%;
}