/* ==========================================================================
   HUCK.1980 — visual system
   Mobile first (390px baseline) -> desktop (1440px, 1280px max content).
   Desktop scales type up but scales whitespace up faster, so it reads emptier.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette — these six colours are the whole system. Nothing else. */
  --paper: #ede4d3;        /* Paper Cream  */
  --black: #1c1a17;        /* Premium Black */
  --chalk: #faf7f0;        /* Chalk White  */
  --teal: #2f6b63;         /* Vintage Teal */
  --terracotta: #b85c38;   /* Terracotta   */
  --mustard: #d9a441;      /* Mustard      */

  /* Accent-as-text variants. Mustard at full strength is 1.8:1 on paper, so it
     is a colour for dark grounds only; --mustard-ink is the version that can
     carry a word on a light one. The server recomputes all four from whatever
     the back office has set, so these values are the fallback, not the source
     of truth — see designVariables() in src/views/layout.js. */
  --teal-ink: #2f6b63;
  --terracotta-ink: #a05031;
  --mustard-ink: #816227;
  --teal-deep: #24524c;
  --terracotta-fill: #ae5734;

  /* Ink on paper. Everything down to --ink-hint carries text and clears 4.5:1;
     --rule and below are hairlines and never hold a word. */
  --ink-body: rgba(28, 26, 23, 0.72);
  --ink-muted: rgba(28, 26, 23, 0.64);
  --ink-hint: rgba(28, 26, 23, 0.62);
  --edge: rgba(28, 26, 23, 0.5);
  --rule: rgba(28, 26, 23, 0.16);
  --rule-soft: rgba(28, 26, 23, 0.1);

  /* Paper on black. Same ramp, measured against the dark ground. */
  --paper-body: rgba(237, 228, 211, 0.74);
  --paper-muted: rgba(237, 228, 211, 0.58);
  --edge-dark: rgba(237, 228, 211, 0.42);
  --rule-dark: rgba(237, 228, 211, 0.22);
  --rule-dark-soft: rgba(237, 228, 211, 0.14);

  /* Names the older markup and the back office still reference. */
  --ink-70: var(--ink-body);
  --ink-50: var(--ink-muted);
  --ink-30: var(--ink-hint);
  --ink-12: var(--rule);
  --paper-70: var(--paper-body);
  --paper-40: var(--paper-muted);
  --paper-20: var(--rule-dark);

  --display: 'Fraunces', 'Times New Roman', serif;
  --body: 'IBM Plex Sans Thai', 'Helvetica Neue', Arial, sans-serif;

  /* Spacing — mobile values. Desktop overrides these once, at the bottom. */
  --gutter: 20px;
  --section-y: 56px;
  --stack: 16px;
  --maxw: 1280px;

  --radius: 2px;
  --border: 1px solid var(--rule);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  /* Long exits for reveals; the short one is for hover and press. */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Stacking order, named. Nothing in this file uses a bare number. */
  --z-sticky: 60;
  --z-bar: 70;
  --z-drawer: 90;
  --z-skip: 200;
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--black);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0;
  /* Keeps short display headings from stranding a single word or "1." on a
     line of its own. Ignored by browsers that do not support it. */
  text-wrap: balance;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--teal-ink);
  outline-offset: 3px;
}
/* Teal is 2.8:1 on the black pages, so the ring would vanish exactly where the
   mastheads are. Mustard clears 7:1 there. */
.section--black :focus-visible,
.site-header--dark :focus-visible,
.nav-drawer :focus-visible,
.site-footer :focus-visible,
body.theme-dark :focus-visible { outline-color: var(--mustard); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--black);
  color: var(--paper);
  padding: 12px 18px;
  z-index: var(--z-skip);
}
.skip-link:focus { left: 8px; top: 8px; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--paper { background: var(--paper); }
.section--chalk { background: var(--chalk); }
.section--black { background: var(--black); color: var(--paper); }

.stack > * + * { margin-top: var(--stack); }

/* --------------------------------------------------------------------------
   4. Type
   -------------------------------------------------------------------------- */
/* The single kicker. It marks a page, not a section — putting one of these
   above every heading is what makes a shop look like a template. Sections
   announce themselves with .section-head below. */
.eyebrow {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--ink-muted);
}

.display-xl { font-size: clamp(64px, 21vw, 92px); letter-spacing: -0.03em; }
.display-lg { font-size: clamp(46px, 14vw, 62px); letter-spacing: -0.025em; }
.display-md { font-size: clamp(30px, 8.5vw, 38px); letter-spacing: -0.02em; }
.display-sm { font-size: 22px; letter-spacing: -0.015em; }

.wide {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-weight: 500;
}

.lede { font-size: 16px; line-height: 1.7; color: var(--ink-body); text-wrap: pretty; }
.fine { font-size: 12px; line-height: 1.55; color: var(--ink-muted); }
.mono {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

/* Accent words on a light ground use the corrected variants; the raw brand
   colours are for fills and for dark grounds. */
.mustard { color: var(--mustard-ink); }
.teal { color: var(--teal-ink); }
.terracotta { color: var(--terracotta-ink); }
.section--black .mustard,
body.theme-dark .mustard { color: var(--mustard); }

/* --------------------------------------------------------------------------
   4b. The colophon — this shop's section grammar

   A volume is a printed thing: it has a number, a name, an edition size and a
   closing date. Every section head is set like the running head of a periodical
   — the section's name in the display face, a rule carrying it across the
   measure, and the count on the right. It replaces the tracked 10px kicker that
   used to sit above each heading, and it earns its place by carrying real
   numbers rather than repeating a label.
   -------------------------------------------------------------------------- */
.section-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 28px;
}
.section-head__name {
  font-family: var(--display);
  font-size: 21px;
  line-height: 1;
  letter-spacing: -0.015em;
}
.section-head__rule {
  height: 1px;
  background: var(--rule);
  transform: translateY(-0.3em);
}
.section-head__meta {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
  white-space: nowrap;
}
.section-head__meta a { text-decoration: underline; text-underline-offset: 4px; }
.section-head__meta a:hover { color: var(--black); }

.section--black .section-head__rule,
body.theme-dark .section-head__rule { background: var(--rule-dark); }
.section--black .section-head__meta,
body.theme-dark .section-head__meta { color: var(--paper-muted); }
.section--black .section-head__meta a:hover,
body.theme-dark .section-head__meta a:hover { color: var(--paper); }

/* The same device at its smallest: a run of facts separated by rules, used
   under the hero and above the drop clock. */
.colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}
.colophon > * + *::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 1px;
  margin-right: 14px;
  vertical-align: 0.3em;
  background: currentColor;
  opacity: 0.55;
}
.colophon--paper { color: var(--paper-muted); }
.colophon--chalk { color: rgba(250, 247, 240, 0.86); }

/* Wrapped, the rule between two facts ends up leading a line and reads as a
   bullet. Below the breakpoint the facts stack and the rules come off. */
@media (max-width: 599px) {
  .colophon { display: grid; gap: 7px; justify-items: start; }
  .colophon > * + *::before { display: none; }
}

/* --------------------------------------------------------------------------
   5. Buttons & form controls
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: none;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.22s var(--ease), color 0.22s var(--ease),
              border-color 0.22s var(--ease), transform 0.12s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--block { display: flex; width: 100%; }

.btn--primary { background: var(--teal); color: var(--chalk); }
.btn--primary:hover { background: var(--teal-deep); }

.btn--secondary { border-color: var(--black); color: var(--black); }
.btn--secondary:hover { background: var(--black); color: var(--paper); }

.btn--ghost-paper { border-color: var(--edge-dark); color: var(--paper); }
.btn--ghost-paper:hover { background: var(--paper); color: var(--black); }

.btn[disabled], .btn[aria-disabled='true'] {
  opacity: 0.4;
  cursor: not-allowed;
}

.field {
  width: 100%;
  min-height: 54px;
  padding: 14px 16px;
  background: var(--chalk);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  font-family: var(--body);
  font-size: 15px;
  color: var(--black);
  transition: border-color 0.2s var(--ease);
}
.field::placeholder { color: var(--ink-hint); opacity: 1; }
/* A stronger border on any focus, and the outline kept for keyboard focus —
   removing it outright leaves someone tabbing through a form with nothing to
   tell them where they are. */
.field:focus { border-color: var(--teal); outline: none; }
.field:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* Checkout variant — fill, bottom rule only. */
.field--underline {
  border: 0;
  border-bottom: 1px solid var(--edge);
  border-radius: 0;
}
.field--underline:focus { border-bottom-color: var(--teal); }
.field--underline:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

select.field {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--black) 50%),
                    linear-gradient(135deg, var(--black) 50%, transparent 50%);
  background-position: calc(100% - 18px) 24px, calc(100% - 13px) 24px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

.label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.form-note { margin-top: 10px; }

.form-status {
  margin-top: 10px;
  font-size: 12px;
  min-height: 18px;
}
.form-status[data-state='ok'] { color: var(--teal-ink); }
.form-status[data-state='error'] { color: var(--terracotta-ink); }
.section--black .form-status[data-state='ok'] { color: var(--mustard); }

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--paper);
  border-bottom: 1px solid var(--ink-12);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease),
              color 0.3s var(--ease);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
}

/* Transparent over the home hero, with no fill at all until scrolled. */
.site-header--over {
  position: fixed;
  left: 0; right: 0;
  /* Not `transparent`: over a pale photograph cream navigation at 11px would be
     unreadable. This fades out well before it reads as a bar. */
  background: linear-gradient(180deg,
    rgba(28, 26, 23, 0.55) 0%,
    rgba(28, 26, 23, 0.48) 62%,
    rgba(28, 26, 23, 0) 100%);
  border-bottom-color: transparent;
  color: var(--chalk);
}
.site-header--over.is-stuck {
  background: var(--paper);
  border-bottom-color: var(--rule);
  color: var(--black);
}
/* Inverse pages (archive) keep a black bar. */
.site-header--dark {
  background: var(--black);
  color: var(--paper);
  border-bottom-color: var(--paper-20);
}

.wordmark {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* A logo file dropped into public/media replaces the typeset name. It is a
   flat single-colour wordmark, so the dark surfaces invert it in place rather
   than needing a second file. */
.wordmark--logo {
  display: inline-flex;
  align-items: center;
}
.wordmark__logo {
  display: block;
  height: 24px;
  width: auto;
  max-width: min(190px, 44vw);
  object-fit: contain;
  transition: filter 0.3s var(--ease);
}
.site-header--dark .wordmark__logo,
.nav-drawer .wordmark__logo,
.site-footer .wordmark__logo {
  filter: invert(1);
}
/* Transparent over the hero, solid once scrolled — the mark follows. */
.site-header--over .wordmark__logo { filter: invert(1); }
.site-header--over.is-stuck .wordmark__logo { filter: none; }

.site-footer .wordmark__logo { height: 30px; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.icon-btn svg { width: 20px; height: 20px; }

.cart-count {
  position: absolute;
  top: 6px; right: 4px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--terracotta-fill);
  color: var(--chalk);
  font-size: 9px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.nav-desktop { display: none; }

/* Slide-in mobile menu */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  background: var(--black);
  color: var(--paper);
  padding: 24px var(--gutter) 40px;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.42s var(--ease), visibility 0.42s;
  display: flex;
  flex-direction: column;
}
.nav-drawer.is-open { transform: translateY(0); visibility: visible; }
.nav-drawer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 62px;
}
.nav-drawer__links {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nav-drawer__links a {
  font-family: var(--display);
  font-size: 38px;
  line-height: 1.25;
}
.nav-drawer__links a:hover { color: var(--mustard); }
.nav-drawer__links a { transition: color 0.2s var(--ease); }
.nav-drawer__foot { margin-top: auto; color: var(--paper-70); }

/* --------------------------------------------------------------------------
   7. Media / photographs
   -------------------------------------------------------------------------- */
.photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink-12);
}
.frame { position: relative; overflow: hidden; background: var(--ink-12); }
.frame--portrait { aspect-ratio: 3 / 4; }
.frame--tall { aspect-ratio: 2 / 3; }
.frame--square { aspect-ratio: 1 / 1; }
.frame--wide { aspect-ratio: 4 / 3; }
.frame--pano { aspect-ratio: 16 / 10; }

.frame__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 62%;
  background: linear-gradient(180deg, rgba(28, 26, 23, 0) 0%, rgba(28, 26, 23, 0.72) 100%);
  pointer-events: none;
}

.badge {
  display: inline-block;
  padding: 5px 9px;
  background: var(--terracotta-fill);
  color: var(--chalk);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: var(--radius);
}
.badge--mustard { background: var(--mustard); color: var(--black); }
.badge--float { position: absolute; top: 14px; left: 14px; z-index: 2; }

/* --------------------------------------------------------------------------
   8. Home — hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 85svh;
  min-height: 520px;
  overflow: hidden;
}
.hero .photo { position: absolute; inset: 0; }
/* Two scrims, because the photograph underneath is whatever the shop uploads
   and a pale one would leave the navigation sitting on near-white. The top band
   guarantees the header a ground; the middle stays open so the picture is still
   the picture. Worst case — a blown-out white frame — cream on the top band is
   5.9:1 and on the copy band 6.8:1. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(28, 26, 23, 0.3) 0%,
    rgba(28, 26, 23, 0.12) 20%,
    rgba(28, 26, 23, 0.1) 44%,
    rgba(28, 26, 23, 0.44) 74%,
    rgba(28, 26, 23, 0.72) 100%);
}
.hero__copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding-block: 96px 40px;
  color: var(--chalk);
  /* The copy carries its own ground, so it stays legible whatever height the
     hero ends up at on a given viewport. The box stays full-bleed so the
     gradient reaches both window edges; the inset below is what puts the type
     in the same column as every section under it. */
  background: linear-gradient(180deg,
    rgba(28, 26, 23, 0) 0%,
    rgba(28, 26, 23, 0.68) 38%,
    rgba(28, 26, 23, 0.88) 100%);
  padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
}
.hero__vol {
  font-family: var(--display);
  font-size: clamp(72px, 24vw, 104px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  color: var(--chalk);
}
.hero__name {
  margin-top: 12px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.36em;
  color: var(--chalk);
}
.hero__when {
  margin-top: 14px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: rgba(250, 247, 240, 0.86);
}
.hero__colophon { margin-top: 22px; }

/* --------------------------------------------------------------------------
   9. Countdown + capture
   -------------------------------------------------------------------------- */
.capture { background: var(--paper); }

/* The deadline is the business model, so it gets its own ground rather than
   floating on the page. It is also the only way mustard can be used at size:
   #d9a441 is 1.8:1 on paper and 7.7:1 on black. The modifier is on the clock
   alone — the plain signup on /about would otherwise run straight into the
   black footer as one undifferentiated slab. */
.capture--clock {
  background: var(--black);
  color: var(--paper);
  position: relative;
}
.capture--clock .colophon { color: var(--paper-muted); }

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 26px;
  border-top: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
}
/* Hairlines between the cells rather than a gap, so the row reads as one
   instrument instead of four numbers that happen to be near each other. */
.countdown__cell {
  padding: 20px 4px 18px;
  text-align: center;
}
.countdown__cell + .countdown__cell { border-left: 1px solid var(--rule-dark-soft); }
.countdown__num {
  font-family: var(--display);
  font-size: clamp(40px, 13vw, 58px);
  line-height: 1;
  color: var(--mustard);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.countdown__label {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--paper-muted);
}
.countdown.is-live .countdown__num { color: var(--chalk); }

.capture__headline { margin-top: 40px; }
.capture__form { margin-top: 26px; }
.capture__form .btn { margin-top: 10px; }
/* On the dark band the input has to hold its own edge. */
.capture--clock .field {
  background: transparent;
  border-color: var(--edge-dark);
  color: var(--paper);
}
.capture--clock .field::placeholder { color: var(--paper-muted); opacity: 1; }
.capture--clock .field:focus { border-color: var(--mustard); }
.capture--clock .fine { color: var(--paper-muted); }
.capture--clock .btn--primary { background: var(--mustard); color: var(--black); }
.capture--clock .btn--primary:hover { background: var(--chalk); }
.capture--clock .form-status[data-state='ok'] { color: var(--mustard); }
.capture--clock .form-status[data-state='error'] { color: var(--chalk); }

/* --------------------------------------------------------------------------
   10. Horizontal scroll rows
   -------------------------------------------------------------------------- */
.hscroll {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-inline: var(--gutter);
  /* Without this the snap target aligns to the container's border box and the
     browser scrolls the gutter away on load, pinning the first card to the
     screen edge. */
  scroll-padding-inline: var(--gutter);
  padding-bottom: 6px;
  scrollbar-width: none;
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; }
.hscroll--wide { grid-auto-columns: 74%; }

.scroll-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

/* --------------------------------------------------------------------------
   11. Product cards
   -------------------------------------------------------------------------- */
.product-card { display: block; position: relative; }
.product-card__media { position: relative; }
.product-card__name {
  margin-top: 12px;
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.2;
}
.product-card__price {
  margin-top: 6px;
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-70);
  font-variant-numeric: tabular-nums;
}

/* The edition line. "Forty pieces each" is the entire proposition and the
   numbers were already on every product record, unused. A filled rule shows
   how much of the run is gone; the words carry it for anyone who cannot see
   the fill. */
.edition {
  margin-top: 12px;
  display: grid;
  gap: 7px;
}
.edition__bar {
  height: 2px;
  background: var(--rule);
  overflow: hidden;
}
.edition__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ink-body);
  transform-origin: left center;
  transform: scaleX(var(--sold, 0));
}
.edition__text {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}
/* The last few of a run is a fact worth colouring; one or two left is not. */
.edition--low .edition__fill { background: var(--terracotta-fill); }
.edition--low .edition__text { color: var(--terracotta-ink); }
.edition--gone .edition__fill { background: var(--edge); }

.section--black .edition__bar,
body.theme-dark .edition__bar { background: var(--rule-dark); }
.section--black .edition__fill,
body.theme-dark .edition__fill { background: var(--paper-body); }
.section--black .edition__text,
body.theme-dark .edition__text { color: var(--paper-muted); }
.section--black .edition--low .edition__fill,
body.theme-dark .edition--low .edition__fill { background: var(--mustard); }
.section--black .edition--low .edition__text,
body.theme-dark .edition--low .edition__text { color: var(--mustard); }

/* Product-page variant: bigger, and it sits under the price. */
.edition--lead { margin-top: 18px; gap: 9px; max-width: 320px; }
.edition--lead .edition__bar { height: 3px; }
.edition--lead .edition__text { font-size: 12px; letter-spacing: 0.12em; }

.dots-row { display: flex; gap: 5px; margin-top: 8px; }
.dot-swatch {
  width: 10px; height: 10px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--edge);
}

/* Fading the whole card halves the contrast of the name, the price and the
   word "Sold out" along with the photograph — group opacity lets the page
   through both the text and its own ground. The garment greys out instead, and
   the words stay at full strength. */
.product-card--sold { pointer-events: none; }
.product-card--sold .product-card__media .photo { filter: grayscale(1) contrast(0.94); opacity: 0.5; }
.product-card--sold .product-card__name,
.product-card--sold .product-card__price { color: var(--ink-muted); }
.product-card--sold .dots-row { opacity: 0.7; }

.soldout-bar {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--black);
  color: var(--paper);
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  text-align: center;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 14px;
}

/* --------------------------------------------------------------------------
   12. Story strip
   -------------------------------------------------------------------------- */
.story {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}
.story__copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
/* The story is the one place a heading is allowed to be a sentence rather than
   a label, so it is set at display size instead of whispered above the copy. */
.story__title { max-width: 16ch; }

/* --------------------------------------------------------------------------
   13. Archive teaser
   -------------------------------------------------------------------------- */
.teaser-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}
.teaser-head h2 { color: var(--paper); }

.thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  filter: grayscale(1) contrast(0.92);
}
.thumb__stamp {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(28, 26, 23, 0.42);
  color: var(--paper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--black);
  color: var(--paper);
  padding-block: 52px 40px;
}
.site-footer a { color: var(--paper-70); }
.site-footer a:hover { color: var(--paper); }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 12px;
  margin-top: 36px;
}
.footer-cols h4 {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--paper-muted);
  margin-bottom: 12px;
}
.footer-cols li + li { margin-top: 8px; }
.footer-cols a { font-size: 13px; }

.footer-signup { margin-top: 40px; }
.footer-signup .field {
  background: transparent;
  border-color: var(--edge-dark);
  color: var(--paper);
}
.footer-signup .field::placeholder { color: var(--paper-muted); opacity: 1; }
.footer-signup .field:focus { border-color: var(--mustard); }

.pay-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.pay-chip {
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--paper-body);
}

.footer-legal {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-dark);
  color: var(--paper-muted);
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   15. Collection page
   -------------------------------------------------------------------------- */
.masthead {
  min-height: 74svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 100px 56px;
}
.masthead__vol {
  font-family: var(--display);
  font-size: clamp(88px, 30vw, 132px);
  line-height: 0.82;
  letter-spacing: -0.045em;
}
.masthead__name {
  margin-top: 18px;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.36em;
}
.masthead__copy { margin-top: 28px; max-width: 34ch; }
.swatch-row { display: flex; gap: 10px; margin-top: 40px; }
.swatch-circle {
  width: 26px; height: 26px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--edge);
}
/* The masthead this sits on is black; an ink outline there is invisible. */
.section--black .swatch-circle,
.section--black .dot-swatch,
body.theme-dark .swatch-circle,
body.theme-dark .dot-swatch { box-shadow: inset 0 0 0 1px var(--edge-dark); }

/* A plain block stack. Not flex: the children use `margin-inline: auto` to sit
   in the centred content column, and a flex parent would turn that into
   shrink-to-fit centring instead. */
.lookbook { display: block; }
.lookbook__full { width: 100%; }
.lookbook__inset { padding-inline: 44px; }
.lookbook__line {
  padding: 46px var(--gutter);
  font-family: var(--display);
  font-size: clamp(21px, 6.2vw, 26px);
  line-height: 1.34;
  letter-spacing: -0.015em;
  max-width: 26ch;
}


/* Sticky bottom bars (collection + product) */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-bar);
  background: var(--paper);
  border-top: 1px solid var(--ink-12);
  padding: 12px var(--gutter);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  transform: translateY(105%);
  transition: transform 0.34s var(--ease);
}
.sticky-bar.is-visible { transform: translateY(0); }
.sticky-bar .btn { min-height: 48px; flex-shrink: 0; }
.sticky-bar__meta { font-size: 12px; color: var(--ink-70); }

body.has-sticky-bar { padding-bottom: 76px; }

/* --------------------------------------------------------------------------
   16. Product page
   -------------------------------------------------------------------------- */
.gallery { position: relative; }
.gallery__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track > * { scroll-snap-align: center; }
.gallery__dots {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 7px;
}
.gallery__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: rgba(250, 247, 240, 0.45);
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.gallery__dot.is-active { background: var(--chalk); transform: scale(1.35); }

.product-head__name { margin-top: 6px; }
.product-head__sku { margin-top: 10px; }
.product-head__price {
  margin-top: 18px;
  font-family: var(--display);
  font-size: 30px;
  letter-spacing: -0.02em;
}
.product-head__stock {
  margin-top: 12px;
  color: var(--ink-body);
  font-size: 14px;
  font-weight: 500;
}

.swatch-squares { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch-square {
  width: 56px; height: 56px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  padding: 0;
  cursor: pointer;
  background-clip: padding-box;
  position: relative;
  box-shadow: inset 0 0 0 1px var(--edge);
}
.swatch-square[aria-pressed='true'] { border-color: var(--black); }
.swatch-name { margin-top: 12px; font-size: 13px; }

.size-row { display: flex; flex-direction: column; gap: 8px; }
.size-btn {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--chalk);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.size-btn[aria-pressed='true'] {
  border-color: var(--black);
  border-width: 2px;
  background: var(--paper);
}

.text-link {
  display: inline-block;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 4px;
  color: var(--black);
}

/* The shipping card carries real weight — it answers the three buyer questions. */
.ship-card {
  background: var(--chalk);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: 0 1px 0 var(--ink-12);
}
.ship-card__rows { margin-top: 18px; }
.ship-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--ink-12);
  font-size: 14px;
}
.ship-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 500; }
.ship-card__free {
  margin-top: 16px;
  color: var(--teal);
  font-size: 13px;
  font-weight: 500;
}

.accordion { border-top: 1px solid var(--ink-12); }
.accordion__item { border-bottom: 1px solid var(--ink-12); }
.accordion__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--display);
  font-size: 17px;
}
.accordion__sign {
  flex-shrink: 0;
  width: 14px; height: 14px;
  position: relative;
}
.accordion__sign::before,
.accordion__sign::after {
  content: '';
  position: absolute;
  background: var(--black);
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.accordion__sign::before { top: 6px; left: 0; width: 14px; height: 1.5px; }
.accordion__sign::after { left: 6px; top: 0; width: 1.5px; height: 14px; }
.accordion__btn[aria-expanded='true'] .accordion__sign::after {
  transform: rotate(90deg);
  opacity: 0;
}
.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}
.accordion__panel > div { overflow: hidden; }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__body { padding-bottom: 22px; color: var(--ink-70); font-size: 14px; }

.measure-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.measure-table th,
.measure-table td {
  text-align: left;
  padding: 8px 0;
  border-bottom: 1px solid var(--ink-12);
  font-weight: 400;
}
.measure-table th { color: var(--ink-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; }

.bundle-card {
  border: 1px solid var(--ink-12);
  background: var(--chalk);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --------------------------------------------------------------------------
   17. Archive page (inverted)
   -------------------------------------------------------------------------- */
body.theme-dark { background: var(--black); color: var(--paper); }
body.theme-dark .eyebrow { color: var(--paper-muted); }
body.theme-dark .lede { color: var(--paper-70); }

.archive-head { padding-block: 56px 40px; }
.archive-head h1 { font-size: clamp(52px, 17vw, 76px); letter-spacing: -0.035em; }
.archive-head p { margin-top: 20px; color: var(--paper-70); max-width: 30ch; }

.vol-row { border-top: 1px solid var(--paper-20); }
.vol-row:last-child { border-bottom: 1px solid var(--paper-20); }
.vol-row__btn {
  width: 100%;
  display: grid;
  grid-template-columns: auto 64px 1fr;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.vol-row__num {
  font-family: var(--display);
  font-size: 30px;
  color: var(--paper);
  opacity: 0.4;
  letter-spacing: -0.02em;
  transition: opacity 0.24s var(--ease);
}
.vol-row.is-open .vol-row__num,
.vol-row__btn:hover .vol-row__num { opacity: 0.85; }
.vol-row__thumb {
  width: 64px; height: 64px;
  overflow: hidden;
  filter: grayscale(1);
}
.vol-row__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.vol-row__theme {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.vol-row__month { font-size: 12px; color: var(--paper-muted); }
.tag-out {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid var(--edge-dark);
  color: var(--paper-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vol-row__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.34s var(--ease);
}
.vol-row__panel > div { overflow: hidden; }
.vol-row.is-open .vol-row__panel { grid-template-rows: 1fr; }
.vol-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding-bottom: 20px;
}
.vol-strip .thumb { filter: grayscale(1) contrast(0.9); }

/* The archive before anything has closed: twelve ruled slots, the open one
   named. Same vocabulary as .vol-row so the page does not change character
   when the first volume actually lands here. */
.ledger__note { max-width: 46ch; }
.ledger__list {
  margin-top: 40px;
  border-top: 1px solid var(--rule-dark);
  counter-reset: none;
}
.ledger__row {
  display: grid;
  grid-template-columns: 84px 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule-dark-soft);
}
.ledger__num {
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--paper-muted);
}
.ledger__theme {
  font-size: 14px;
  color: var(--paper-muted);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ledger__state {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-muted);
  white-space: nowrap;
}
/* The volume that is actually buyable is the only line with full contrast. */
.ledger__row--open {
  border-bottom-color: var(--edge-dark);
}
.ledger__row--open .ledger__num,
.ledger__row--open .ledger__theme { color: var(--paper); }
.ledger__row--open .ledger__state { color: var(--mustard); }
.ledger__row--next .ledger__num,
.ledger__row--next .ledger__theme,
.ledger__row--next .ledger__state { color: var(--paper-body); }
.ledger__row--later { opacity: 0.62; }
.ledger__cta { margin-top: 36px; }

@media (min-width: 1024px) {
  .ledger__list { margin-top: 56px; }
  .ledger__row { grid-template-columns: 200px 1fr auto; padding: 20px 0; gap: 48px; }
  .ledger__num { font-size: 26px; }
  .ledger__theme { font-size: 16px; }
}

/* The paper CTA breaks out of the black page. */
.breakout-cta {
  background: var(--paper);
  color: var(--black);
  margin-top: 56px;
  padding-block: 52px;
}

/* --------------------------------------------------------------------------
   18. About page
   -------------------------------------------------------------------------- */
.about-hero { position: relative; height: 62svh; min-height: 420px; overflow: hidden; }
.about-hero .photo { position: absolute; inset: 0; }
/* A text-shadow alone is not a contrast guarantee; the radial ground is. */
.about-hero__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: clamp(44px, 15vw, 64px);
  color: var(--chalk);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 30px rgba(28, 26, 23, 0.4);
  background: radial-gradient(ellipse 70% 46% at 50% 50%,
    rgba(28, 26, 23, 0.62) 0%,
    rgba(28, 26, 23, 0.34) 55%,
    rgba(28, 26, 23, 0.12) 100%);
}
/* The mark here is set by the hero, not by the header rule it shares. */
.about-hero__mark .wordmark {
  font: inherit;
  letter-spacing: inherit;
}
.about-hero__mark .wordmark__logo {
  height: 1em;
  max-width: min(72vw, 520px);
  filter: invert(1) drop-shadow(0 2px 30px rgba(28, 26, 23, 0.4));
}

.reading {
  max-width: 60ch;
  font-size: 16px;
  line-height: 1.85;
}
.about-copy { padding-inline: 34px; }

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.trio figcaption {
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  line-height: 1.4;
}

.founder { display: grid; grid-template-columns: 60% 1fr; gap: 18px; align-items: center; }
.founder__quote {
  font-family: var(--display);
  font-style: italic;
  font-size: 17px;
  line-height: 1.36;
  letter-spacing: -0.01em;
}
.founder__by { margin-top: 14px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-muted); font-style: normal; font-family: var(--body); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.stats__item { padding: 0 10px; text-align: center; }
.stats__item + .stats__item { border-left: 1px solid var(--rule); }
/* Mustard is 1.8:1 on paper, so the numbers use the corrected ochre. On the
   black band the raw colour is back and reads at 7.7:1. */
.stats__num {
  font-family: var(--display);
  font-size: clamp(34px, 10vw, 44px);
  color: var(--mustard-ink);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.section--black .stats__num,
body.theme-dark .stats__num { color: var(--mustard); }
.stats__label {
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   19. Cart & checkout
   -------------------------------------------------------------------------- */
.line-item {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ink-12);
  align-items: start;
}
.line-item__thumb { width: 72px; aspect-ratio: 1/1; overflow: hidden; }
.line-item__name { font-family: var(--display); font-size: 16px; line-height: 1.2; }
.line-item__attrs {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.line-item__price { font-variant-numeric: tabular-nums; font-size: 14px; white-space: nowrap; }

.stepper {
  display: inline-flex;
  align-items: center;
  margin-top: 12px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--chalk);
}
.stepper button {
  width: 34px; height: 34px;
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.stepper output {
  min-width: 30px;
  text-align: center;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.ship-progress {
  background: var(--chalk);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius);
  padding: 18px;
}
.progress-track {
  height: 4px;
  background: var(--ink-12);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 12px;
}
.progress-fill {
  height: 100%;
  width: 100%;
  background: var(--mustard-ink);
  transform-origin: left center;
  transform: scaleX(var(--progress, 0));
  transition: transform 0.5s var(--ease);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--ink-body);
}
.summary-row span:last-child { font-variant-numeric: tabular-nums; color: var(--black); }
.summary-row--total {
  border-top: 1px solid var(--ink-12);
  margin-top: 6px;
  padding-top: 16px;
  color: var(--black);
}
.summary-row--total span { font-family: var(--display); font-size: 24px; letter-spacing: -0.02em; }

.checkout-section { padding-block: 28px; border-top: 1px solid var(--ink-12); }
.checkout-section:first-of-type { border-top: 0; }
.checkout-section h2 {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-muted);
  margin-bottom: 18px;
}

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field-grid > .span-2 { grid-column: 1 / -1; }

.radio-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--chalk);
  cursor: pointer;
}
.radio-row + .radio-row { margin-top: 10px; }
.radio-row:has(input:checked) { border-color: var(--black); border-width: 2px; padding: 15px; }
.radio-row input { accent-color: var(--teal); width: 18px; height: 18px; flex-shrink: 0; }
.radio-row__main { flex: 1; min-width: 0; }
.radio-row__title { display: block; font-size: 14px; font-weight: 500; }
.radio-row__sub { display: block; font-size: 13px; color: var(--ink-muted); margin-top: 3px; }
.radio-row__price { font-variant-numeric: tabular-nums; font-size: 14px; }

.summary-collapse {
  border: 1px solid var(--ink-12);
  border-radius: var(--radius);
  background: var(--chalk);
  overflow: hidden;
}
.summary-collapse__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 13px;
}
.summary-collapse__btn strong { font-family: var(--display); font-size: 18px; font-weight: 400; }
.summary-collapse__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--ease); }
.summary-collapse__panel > div { overflow: hidden; }
.summary-collapse.is-open .summary-collapse__panel { grid-template-rows: 1fr; }
.summary-collapse__body { padding: 0 18px 18px; }

.secure-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
}
.secure-line svg { width: 12px; height: 12px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   20. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   21. DESKTOP — 1024px and up
   Type scales up; whitespace scales up faster. Photographs never stretch to
   the full browser width except the home hero.
   ========================================================================== */
@media (min-width: 1024px) {
  :root {
    --gutter: 80px;
    --section-y: 128px;
    --stack: 20px;
  }

  body { font-size: 16px; }

  .display-xl { font-size: 104px; }
  .display-lg { font-size: 76px; }
  .display-md { font-size: 46px; }
  .display-sm { font-size: 28px; }
  .lede { font-size: 18px; }

  /* --- Navigation becomes a horizontal bar ------------------------------ */
  .site-header__inner { min-height: 84px; }
  .wordmark { font-size: 22px; }
  .wordmark__logo { height: 30px; max-width: 240px; }
  .site-footer .wordmark__logo { height: 36px; }
  .nav-desktop {
    display: flex;
    gap: 40px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .site-header__inner { position: relative; }
  .nav-desktop a {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s var(--ease);
  }
  .nav-desktop a:hover,
  .nav-desktop a[aria-current='page'] { border-bottom-color: currentColor; }
  .menu-toggle { display: none; }

  /* --- Home hero: full viewport, type block in the lower-left third ----- */
  .hero { height: 100svh; min-height: 700px; }
  /* The inline padding above already lands the type in the same centred column
     as every other section, so the VOL.01 block lines up with the content
     below it without the box giving up its full-bleed gradient. */
  .hero__copy {
    padding-top: 150px;
    padding-bottom: 92px;
  }
  .hero__vol { font-size: 148px; }
  .hero__name { font-size: 16px; letter-spacing: 0.42em; margin-top: 18px; }
  .hero__when { font-size: 13px; margin-top: 20px; }

  /* --- Countdown + capture --------------------------------------------- */
  /* The clock is the louder half, so it takes the wider track. */
  .capture__inner {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 88px;
    align-items: center;
  }
  .countdown { margin-top: 32px; }
  .countdown__cell { padding: 30px 4px 26px; }
  .countdown__num { font-size: 84px; }
  .countdown__label { font-size: 11px; }
  .capture__headline { margin-top: 0; }
  .capture__form { max-width: 480px; }
  .capture__form .btn { margin-top: 14px; }

  /* --- Rows become grids ------------------------------------------------ */
  .hscroll {
    grid-auto-flow: row;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    overflow: visible;
    padding-inline: 0;
  }
  .hscroll--wide { grid-template-columns: repeat(3, 1fr) 1.35fr; }
  .product-grid { grid-template-columns: repeat(4, 1fr); gap: 64px 32px; }
  .product-card__name { font-size: 20px; margin-top: 18px; }
  .product-card__price { font-size: 15px; }

  /* --- Story strip ------------------------------------------------------ */
  .story {
    grid-template-columns: 7fr 5fr;
    gap: 80px;
    align-items: center;
  }
  .story__copy { padding-right: 40px; }

  /* --- Archive teaser --------------------------------------------------- */
  .thumb-grid { grid-template-columns: repeat(6, 1fr); gap: 16px; }
  .teaser-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 60px;
    margin-bottom: 56px;
  }

  /* --- Footer ----------------------------------------------------------- */
  .site-footer { padding-block: 96px 48px; }
  .footer-top { display: grid; grid-template-columns: 3fr 5fr 4fr; gap: 64px; }
  .footer-cols { margin-top: 0; gap: 40px; }
  .footer-signup { margin-top: 0; }
  .footer-signup .row { display: flex; gap: 10px; }
  .footer-signup .btn { margin-top: 0; flex-shrink: 0; }

  /* --- Collection ------------------------------------------------------- */
  .masthead { min-height: 88svh; padding-block: 180px 96px; }
  .masthead__vol { font-size: 220px; }
  .masthead__name { font-size: 16px; letter-spacing: 0.44em; margin-top: 26px; }
  .masthead__copy { margin-top: 40px; max-width: 42ch; }
  .swatch-row { gap: 16px; margin-top: 72px; }
  .swatch-circle { width: 34px; height: 34px; }

  /* Photographs stay inside the content column — never full-bleed. */
  .lookbook__full,
  .lookbook__inset {
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .lookbook__inset { padding-inline: 260px; }
  .lookbook__line {
    max-width: var(--maxw);
    margin-inline: auto;
    padding: 104px var(--gutter);
    font-size: 40px;
  }
  .lookbook__line span { display: block; max-width: 22ch; }

  /* --- Product page: sticky gallery left 60%, info scrolls right -------- */
  .pdp {
    display: grid;
    grid-template-columns: 60fr 40fr;
    gap: 72px;
    align-items: start;
    padding-top: 56px;
  }
  .pdp__gallery { position: sticky; top: 108px; }
  .pdp__gallery .gallery__track {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: 12px;
    overflow: visible;
  }
  .pdp__gallery .gallery__dots { display: none; }
  .pdp__info { padding-bottom: 96px; }
  .product-head__price { font-size: 38px; }
  .size-row { flex-direction: row; }
  .size-btn { flex: 1; }
  /* On desktop the add-to-cart lives in the column, not pinned to the window. */
  .pdp .sticky-bar {
    position: static;
    transform: none;
    padding: 0;
    border: 0;
    background: none;
    display: block;
  }
  body.has-sticky-bar { padding-bottom: 0; }

  /* --- Archive ---------------------------------------------------------- */
  .archive-head { padding-block: 140px 96px; }
  .archive-head h1 { font-size: 132px; }
  .archive-head p { font-size: 20px; max-width: 40ch; }
  .vol-row__btn { grid-template-columns: 200px 120px 1fr auto; gap: 48px; padding: 30px 0; }
  .vol-row__num { font-size: 60px; }
  .vol-row__thumb { width: 120px; height: 120px; }
  /* Fixed tracks rather than flex, so theme, month and tag line up down the
     whole list instead of shifting with each theme's text width. */
  .vol-row__meta {
    display: grid;
    grid-template-columns: 260px 200px auto;
    align-items: baseline;
    justify-items: start;
    gap: 0;
  }
  .vol-strip { grid-template-columns: repeat(4, 1fr); gap: 20px; padding-bottom: 40px; max-width: 900px; }
  .breakout-cta { margin-top: 120px; padding-block: 112px; }
  .breakout-cta__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: center; }

  /* --- About ------------------------------------------------------------ */
  .about-hero { height: 88svh; }
  .about-hero__mark { font-size: 104px; }
  .about-copy { padding-inline: 0; }
  .reading { font-size: 21px; line-height: 1.9; max-width: 62ch; margin-inline: auto; }
  .trio { gap: 32px; }
  .trio figcaption { font-size: 10px; margin-top: 16px; }
  .founder { grid-template-columns: 60% 1fr; gap: 72px; }
  .founder__quote { font-size: 34px; line-height: 1.3; }
  .stats__num { font-size: 68px; }
  .stats__label { font-size: 11px; margin-top: 16px; }
  .stats__item { padding: 0 40px; }

  /* --- Cart & checkout -------------------------------------------------- */
  .commerce-layout {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 88px;
    align-items: start;
  }
  .commerce-layout__aside { position: sticky; top: 116px; }
  .line-item { grid-template-columns: 110px 1fr auto; gap: 28px; padding: 32px 0; }
  .line-item__thumb { width: 110px; }
  .line-item__name { font-size: 21px; }
  .checkout-section { padding-block: 44px; }
  .field-grid { gap: 20px; }
}

/* Wider than the content column — hold the max width and let margins grow. */
@media (min-width: 1440px) {
  :root { --gutter: 80px; }
  .lookbook__inset { padding-inline: 300px; }
}

/* On a 27" monitor a 1280px column marooned in the middle reads as a page that
   ran out of content. The full-bleed bands (hero, drop clock, archive, footer)
   already span the window, so the fix is to let the type and the vertical
   rhythm grow with them rather than widening the measure. */
@media (min-width: 1680px) {
  :root {
    --section-y: 152px;
    --gutter: 96px;
  }
  body { font-size: 17px; }
  .display-xl { font-size: 124px; }
  .display-lg { font-size: 88px; }
  .display-md { font-size: 52px; }
  .hero__vol { font-size: 176px; }
  .masthead__vol { font-size: 260px; }
  .archive-head h1 { font-size: 156px; }
  .countdown__num { font-size: 96px; }
  .section-head__name { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   22. Motion

   One orchestrated arrival on the hero, and hover states that respond. There
   are deliberately no scroll-triggered section reveals: the same fade applied
   to every band is the thing that makes a site feel automated.

   Every rule here starts from the element's resting state and animates *to*
   it, so a page that never runs the animation — reduced motion, a headless
   renderer, a background tab — still renders complete. Nothing is hidden
   waiting for a class.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes huck-rise {
    from { opacity: 0; transform: translateY(1.1em); }
    to { opacity: 1; transform: none; }
  }
  @keyframes huck-wipe {
    from { clip-path: inset(0 0 105% 0); }
    to { clip-path: inset(0 0 -20% 0); }
  }
  @keyframes huck-rule {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  /* The volume number wipes up out of its own baseline, then the name and the
     date follow it. Four steps, 900ms end to end. */
  .hero__vol { animation: huck-wipe 0.9s var(--ease-out) both; }
  .hero__name { animation: huck-rise 0.7s var(--ease-out) 0.24s both; }
  .hero__when { animation: huck-rise 0.7s var(--ease-out) 0.36s both; }
  .hero .eyebrow { animation: huck-rise 0.7s var(--ease-out) 0.12s both; }

  .masthead__vol { animation: huck-wipe 0.9s var(--ease-out) both; }
  .masthead__name { animation: huck-rise 0.7s var(--ease-out) 0.24s both; }
  .masthead__copy { animation: huck-rise 0.7s var(--ease-out) 0.34s both; }

  .archive-head h1 { animation: huck-wipe 0.9s var(--ease-out) both; }

  .section-head__rule {
    transform-origin: left center;
    animation: huck-rule 0.9s var(--ease-out) 0.1s both;
  }

  /* The garment lifts under the cursor; the frame holds still. */
  .product-card__media .photo {
    transition: transform 0.6s var(--ease-out), filter 0.6s var(--ease-out);
  }
  .product-card:hover .product-card__media .photo { transform: scale(1.035); }

  .thumb .photo { transition: filter 0.5s var(--ease-out), transform 0.7s var(--ease-out); }
  .thumb:hover .photo { transform: scale(1.05); }

  .edition__fill { transition: transform 0.7s var(--ease-out); }
}

/* --------------------------------------------------------------------------
   15. Back-office era additions
   Announcement bar, flash notices, order pages and the customer account.
   These follow the same tokens as everything above, so a colour changed in the
   admin lands here too.
   -------------------------------------------------------------------------- */

/* Announcement strip, above the header on every page. */
.announce { font-size: 12px; letter-spacing: 0.04em; }
.announce__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 36px;
  padding-block: 8px;
  position: relative;
}
.announce__text { margin: 0; text-align: center; }
.announce__text a { text-decoration: none; }
.announce__cta {
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 8px;
  opacity: 0.85;
}
.announce__close {
  position: absolute;
  right: 0;
  background: none;
  border: 0;
  color: inherit;
  padding: 4px;
  cursor: pointer;
  opacity: 0.6;
}
.announce__close:hover { opacity: 1; }
.announce__close svg { width: 16px; height: 16px; }

/* One-line notice after a redirect. */
.flash {
  background: var(--black);
  color: var(--paper);
  font-size: 13px;
  padding-block: 10px;
}
.flash--good { background: var(--teal); }
.flash--warn { background: var(--mustard); color: var(--black); }
.flash--error { background: var(--terracotta-fill); color: var(--chalk); }

/* Form-level error, e.g. a rejected sign-in. */
/* A rejected sign-in reads as a bordered notice, not a stripe in the margin. */
.form-error {
  color: var(--terracotta-ink);
  font-size: 14px;
  border: 1px solid var(--terracotta-ink);
  border-radius: var(--radius);
  padding: 12px 14px;
}

/* Checkbox rows in checkout and the account forms. */
.check-row { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
.check-row input { margin-top: 3px; }

/* Order pages. */
.order-card { margin-top: 14px; border-top: 1px solid var(--ink-12); }
.order-status { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.order-address { font-style: normal; margin-top: 10px; line-height: 1.7; }
.order-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.notice-card {
  border: 1px solid var(--ink-12);
  background: var(--chalk);
  padding: 18px 20px;
  border-radius: var(--radius);
}

/* Badge tones used by order status. */
.badge--good { background: var(--teal); color: var(--chalk); }
.badge--warn { background: var(--mustard); color: var(--black); }
.badge--muted { background: transparent; color: var(--ink-muted); border: 1px solid var(--edge); }

/* Customer account. */
.account-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 40px; }
.admin-table-wrap { overflow-x: auto; margin-top: 14px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th {
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  padding: 0 14px 10px 0;
  border-bottom: 1px solid var(--ink-12);
  white-space: nowrap;
}
.admin-table td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--ink-12); }

@media (max-width: 720px) {
  .order-cols { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .account-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* --------------------------------------------------------------------------
   Password field with a Show/Hide control

   The button sits inside the field's box rather than beside it, so the row
   keeps the same height as every other input and nothing reflows when the
   label switches between "Show" and "Hide".
   -------------------------------------------------------------------------- */
.password-field { position: relative; display: block; }
.password-field .field { padding-right: 72px; }

.password-field__toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  min-width: 56px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-70, rgba(28, 26, 23, .7));
  cursor: pointer;
  border-radius: 2px;
}
.password-field__toggle:hover { color: var(--black, #1c1a17); }
.password-field__toggle:focus-visible {
  outline: 2px solid var(--teal, #2f6b63);
  outline-offset: 2px;
}

/* The Turnstile widget, when it is switched on, needs room of its own. */
.cf-turnstile { margin-top: 18px; }