/* ==========================================================================
   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      */

  --teal-deep: #24534d;
  --ink-70: rgba(28, 26, 23, 0.7);
  --ink-50: rgba(28, 26, 23, 0.5);
  --ink-30: rgba(28, 26, 23, 0.3);
  --ink-12: rgba(28, 26, 23, 0.12);
  --paper-70: rgba(237, 228, 211, 0.7);
  --paper-40: rgba(237, 228, 211, 0.4);
  --paper-20: rgba(237, 228, 211, 0.2);

  --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(--ink-12);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   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);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--black);
  color: var(--paper);
  padding: 12px 18px;
  z-index: 200;
}
.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
   -------------------------------------------------------------------------- */
.eyebrow {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  color: var(--ink-50);
}
.eyebrow--paper { color: var(--paper-70); }

.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-70); }
.fine { font-size: 11px; line-height: 1.5; color: var(--ink-50); }
.mono {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink-50);
}

.mustard { color: var(--mustard); }
.teal { color: var(--teal); }
.terracotta { color: var(--terracotta); }

/* --------------------------------------------------------------------------
   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(--paper-40); 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(--ink-12);
  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-30); }
/* 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(--ink-12);
  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: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-50);
  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); }
.form-status[data-state='error'] { color: var(--terracotta); }
.section--black .form-status[data-state='ok'] { color: var(--mustard); }

/* --------------------------------------------------------------------------
   6. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  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;
  background: transparent;
  border-bottom-color: transparent;
  color: var(--chalk);
}
.site-header--over.is-stuck {
  background: var(--paper);
  border-bottom-color: var(--ink-12);
  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);
  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: 90;
  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__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);
  color: var(--chalk);
  font-size: 9px;
  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; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(28, 26, 23, 0.34) 0%,
    rgba(28, 26, 23, 0) 34%,
    rgba(28, 26, 23, 0.62) 82%,
    rgba(28, 26, 23, 0.86) 100%);
}
.hero__copy {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 var(--gutter) 40px;
  color: var(--chalk);
}
.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: 12px;
  letter-spacing: 0.14em;
  color: rgba(250, 247, 240, 0.7);
}

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

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
}
.countdown__cell { padding: 4px 0; }
.countdown__num {
  font-family: var(--display);
  font-size: clamp(38px, 12vw, 52px);
  line-height: 1;
  color: var(--mustard);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.countdown__label {
  margin-top: 8px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-50);
}
.countdown.is-live .countdown__num { color: var(--terracotta); }

.capture__headline { margin-top: 36px; }
.capture__form { margin-top: 24px; }
.capture__form .btn { margin-top: 10px; }

/* --------------------------------------------------------------------------
   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: 4px;
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-70);
  font-variant-numeric: tabular-nums;
}
.product-card__badge { margin-top: 10px; }

.dots-row { display: flex; gap: 5px; margin-top: 8px; }
.dot-swatch {
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--ink-12);
}

.product-card--sold { opacity: 0.5; pointer-events: none; }
.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; }

/* --------------------------------------------------------------------------
   13. Archive teaser
   -------------------------------------------------------------------------- */
.teaser-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
}

.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: 8px;
  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-40);
  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(--paper-20);
  color: var(--paper);
}
.footer-signup .field::placeholder { color: var(--paper-40); }
.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(--paper-20);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--paper-70);
}

.footer-legal {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--paper-20);
  color: var(--paper-40);
  font-size: 11px;
  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%;
  border: 1px solid var(--ink-12);
}

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

.rule-label {
  display: flex;
  align-items: center;
  gap: 16px;
}
.rule-label::before,
.rule-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--black);
}
.rule-label span {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  white-space: nowrap;
}

/* Sticky bottom bars (collection + product) */
.sticky-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  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: 8px;
  color: var(--mustard);
  font-size: 13px;
  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(--ink-12);
}
.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(--ink-12);
  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-50); font-size: 10px; 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-40); }
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-40); }
.tag-out {
  display: inline-block;
  padding: 3px 7px;
  border: 1px solid var(--paper-40);
  color: var(--paper-70);
  font-size: 8px;
  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 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; }
.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);
}
/* 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: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-50);
  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: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-50); 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(--ink-12); }
.stats__num {
  font-family: var(--display);
  font-size: clamp(34px, 10vw, 44px);
  color: var(--mustard);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stats__label {
  margin-top: 10px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-50);
  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: 5px;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.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(--ink-12);
  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%;
  background: var(--mustard);
  transition: width 0.5s var(--ease);
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  font-size: 14px;
  color: var(--ink-70);
}
.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.24em;
  color: var(--ink-50);
  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(--ink-12);
  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: 12px; color: var(--ink-50); 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; }
  /* Sits in the same centred 1280px column as every other section, so the
     VOL.01 block lines up with the content below it. */
  .hero__copy {
    max-width: var(--maxw);
    margin-inline: auto;
    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 --------------------------------------------- */
  .capture__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 96px;
    align-items: center;
  }
  .countdown { gap: 20px; max-width: 560px; }
  .countdown__num { font-size: 76px; }
  .countdown__label { font-size: 10px; }
  .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; }
}

/* --------------------------------------------------------------------------
   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); color: var(--chalk); }

/* Form-level error, e.g. a rejected sign-in. */
.form-error {
  color: var(--terracotta);
  font-size: 14px;
  border-left: 2px solid var(--terracotta);
  padding-left: 12px;
}

/* 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-50); border: 1px solid var(--ink-12); }

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