/* Catulie — design tokens.
   The ground is a gallery white, not a cream: warm off-white plus a rust accent
   is the house style of every AI-built boutique this year, and it reads as one.
   What is left is sampled from Catulie's own photographs — the cool linen sheet
   she shoots flat-lays on (#C2C4C4), the near-black of the doorway in the
   hand-painted maxi shot (#110A08), the crimson of the satin dress (#B52130) and
   the green of the emerald maxi (#0A8668), which is now the colour of a
   successful add to bag. */

@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 500;
  font-display: swap; src: url('fonts/BodoniModa-400-normal-latin.woff2') format('woff2'); }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('fonts/BodoniModa-400-italic-latin.woff2') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 400;
  font-display: swap; src: url('fonts/Karla-400-normal-latin.woff2') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 500;
  font-display: swap; src: url('fonts/Karla-500-normal-latin.woff2') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: normal; font-weight: 600;
  font-display: swap; src: url('fonts/Karla-600-normal-latin-ext.woff2') format('woff2'); }
@font-face { font-family: 'Karla'; font-style: italic; font-weight: 400;
  font-display: swap; src: url('fonts/Karla-400-italic-latin.woff2') format('woff2'); }

:root {
  --paper:      #ffffff;
  --paper-warm: #f1f2f2;   /* the linen sheet, lightened */
  --paper-deep: #e2e4e4;
  --ink:        #111213;
  --ink-soft:   #55575a;
  --ink-faint:  #6f7376;   /* darkened to clear WCAG AA on white */
  --accent:     #b52130;   /* the crimson satin maxi */
  --accent-deep:#8d1622;
  --accent-wash:#fbe9ea;
  --clay:       #e6a6a0;
  --line:       #e4e5e5;
  --line-strong:#c7c9c9;
  --ok:         #0a8668;   /* the emerald maxi */
  --alert:      #b52130;

  --display: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
  --text: 'Karla', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --shell: min(1320px, 92vw);
  --shell-narrow: min(980px, 90vw);
  --radius: 2px;
  --edge: clamp(1.1rem, 4vw, 3.2rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--text); font-size: 16.5px; line-height: 1.6;
  font-synthesis-weight: none; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.04; margin: 0; letter-spacing: -.012em; }
h1 { font-size: clamp(2.9rem, 7.5vw, 6rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
h3 { font-size: 1.35rem; line-height: 1.24; }
p { margin: 0 0 1rem; }
.lede { font-size: 1.14rem; color: var(--ink-soft); max-width: 48ch; }
.shell { width: var(--shell); margin-inline: auto; }
.shell--narrow { width: var(--shell-narrow); margin-inline: auto; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--ink); color: var(--paper);
  padding: 10px 16px; transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* Small letterspaced caps do the work of a label everywhere on this site. */
.caps {
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 600; color: var(--ink-faint);
}

/* ── Buttons: one solid, one outline, one text link. No gradients, no twins. ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font-family: var(--text); font-size: .76rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 1.15em 2.4em; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  text-decoration: none; cursor: pointer; border-radius: var(--radius);
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--quiet:hover { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--light:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.btn--small { padding: .8em 1.5em; font-size: .7rem; }
.btn--block { width: 100%; }
.link-underline {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
  text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 4px; color: var(--ink);
  white-space: nowrap;
}
.link-underline:hover { border-bottom-color: var(--ink); }

/* ── Header ── */
.masthead {
  position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.masthead__inner { display: flex; align-items: center; gap: 1.5rem; padding: .95rem 0; }
.wordmark {
  font-family: var(--display); font-size: 1.55rem; letter-spacing: .38em;
  text-transform: uppercase; text-decoration: none; padding-left: .38em; line-height: 1;
}
.nav { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; }
.nav a {
  font-size: .73rem; letter-spacing: .17em; text-transform: uppercase; font-weight: 600;
  text-decoration: none; color: var(--ink-soft); padding: .3rem 0;
  border-bottom: 1px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }
.bag-button {
  border: 0; background: transparent; font: inherit; font-size: .73rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase; padding: .3rem 0; cursor: pointer;
  border-bottom: 1px solid var(--line-strong); color: var(--ink);
}
.bag-button:hover { border-bottom-color: var(--accent); }
.bag-button__count { color: var(--accent); }
.nav-toggle { display: none; }

/* ── Hero: type on paper, one photograph bleeding off the right edge.
   Not text-over-a-darkened-picture — the photograph keeps its own frame. ── */
.hero {
  display: grid; grid-template-columns: .92fr 1.08fr;
  gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
  min-height: clamp(500px, 68vh, 720px); padding: clamp(1.3rem, 2.4vw, 1.9rem) 0;
}
.hero__body { max-width: 34ch; }
.hero__body h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.hero__body h1 em { font-style: italic; color: var(--accent); }
.hero__body p { margin-top: 1.2rem; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.7rem; margin-top: 1.9rem; }
.hero__figure {
  position: relative; margin: 0; align-self: stretch;
  /* bleed to the right edge of the viewport, whatever the shell width is */
  margin-right: calc((var(--shell) - 100vw) / 2);
  background: var(--paper-warm); overflow: hidden;
}
.hero__figure img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 22%; min-height: 460px; }
.hero__figure figcaption {
  position: absolute; left: 0; bottom: 0; background: var(--paper); color: var(--ink);
  padding: .85rem 1.5rem; font-size: .7rem; letter-spacing: .17em; text-transform: uppercase;
  font-weight: 600;
}
/* ── Showcase: the photograph gets the whole width ──
   The two-column hero gave half the viewport to type on a shop whose product is
   the photograph. Now the image is full-bleed and the words sit on a solid plate
   over it — solid, not a scrim, so the copy is legible whichever of the five
   photographs is showing rather than depending on that one being dark enough. */
.showcase {
  position: relative; background: var(--ink);
  min-height: clamp(560px, 84vh, 900px);
  display: flex; align-items: flex-end;
}
.showcase__slides { position: absolute; inset: 0; }
.showcase__slide { position: absolute; inset: 0; margin: 0; opacity: 1; transition: opacity .7s ease; }
.showcase__slide[hidden] { display: block; opacity: 0; pointer-events: none; }
.showcase__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }

.showcase__overlay {
  position: relative; z-index: 2; width: 100%; padding-bottom: clamp(1.4rem, 3vw, 2.6rem);
  padding-top: clamp(3rem, 12vh, 8rem);
  /* Two of the five slides are shot against a white wall. Without this the white
     label and rail on the right vanish on exactly those two. The plate covers the
     left, so the gradient only ever reads under the type it exists for. */
  background: linear-gradient(to top, rgba(10,10,11,.5) 0%, rgba(10,10,11,.18) 40%, transparent 100%);
}
.showcase__grid { display: flex; align-items: flex-end; justify-content: space-between; gap: clamp(1.5rem, 4vw, 4rem); }

.showcase__plate {
  background: var(--paper); max-width: min(46ch, 48vw);
  padding: clamp(1.5rem, 2.6vw, 2.3rem) clamp(1.5rem, 2.6vw, 2.4rem) clamp(1.4rem, 2.4vw, 2rem);
}
.showcase__plate h1 { font-size: clamp(2.2rem, 4.4vw, 3.9rem); }
.showcase__plate h1 em { font-style: italic; color: var(--accent); }
.showcase__plate p { margin: 1rem 0 0; color: var(--ink-soft); font-size: 1.02rem; max-width: 40ch; }
.showcase__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-top: 1.6rem; }

.showcase__aside { text-align: right; padding-bottom: .3rem; }
.showcase__label {
  margin: 0 0 .8rem; display: flex; gap: .8rem; justify-content: flex-end; align-items: baseline;
  color: #fff; text-shadow: 0 1px 12px rgba(10,10,11,.7);
}
.showcase__label a { font-family: var(--display); font-size: 1.15rem; text-decoration: none;
  border-bottom: 1px solid transparent; }
.showcase__label a:hover { border-bottom-color: #fff; }
.showcase__label span { font-size: .9rem; opacity: .85; white-space: nowrap; }

.showcase__rail { display: flex; gap: .45rem; justify-content: flex-end; }
.showcase__thumb {
  display: block; width: 56px; flex: 0 0 auto; line-height: 0;
  outline: 1px solid transparent; outline-offset: 3px; opacity: .5;
  transition: opacity .18s ease, outline-color .18s ease;
}
.showcase__thumb img { width: 100%; height: 70px; object-fit: cover; background: var(--ink); }
.showcase__thumb:hover { opacity: .85; }
.showcase__thumb[aria-current="true"] { opacity: 1; outline-color: #fff; }

.showcase__nav {
  position: absolute; top: clamp(1rem, 2.5vw, 1.8rem); z-index: 3;
  width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer;
  background: rgba(255,255,255,.9); color: var(--ink); border: 0;
  border-radius: 50%; transition: background .16s ease, color .16s ease;
}
.showcase__nav:hover { background: var(--ink); color: #fff; }
.showcase__nav--prev { right: calc(clamp(.8rem, 2vw, 1.6rem) + 3rem); }
.showcase__nav--next { right: clamp(.8rem, 2vw, 1.6rem); }

/* ── Collection strip: what she sells, before anybody scrolls ── */
.strip { border-top: 1px solid var(--line); background: var(--paper); }
.strip__row {
  display: flex; align-items: center; gap: clamp(.8rem, 2vw, 2rem);
  padding: .9rem 0; overflow-x: auto; scrollbar-width: none;
}
.strip__row::-webkit-scrollbar { display: none; }
.strip__item {
  display: flex; align-items: center; gap: .7rem; text-decoration: none;
  flex: 0 0 auto; padding-right: clamp(.8rem, 2vw, 2rem);
  border-right: 1px solid var(--line);
}
.strip__row .strip__item:last-of-type { border-right: 0; }
.strip__item img { width: 40px; height: 50px; object-fit: cover; background: var(--paper-warm); }
.strip__item b { display: block; font-weight: 600; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; }
.strip__item small { display: block; font-size: .78rem; color: var(--ink-faint); margin-top: .15rem; }
.strip__item:hover b { color: var(--accent-deep); }
.strip__all {
  margin-left: auto; flex: 0 0 auto; text-decoration: none;
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  border-bottom: 1px solid var(--accent); padding-bottom: 3px;
}

/* The left column earns its weight with photographs, not more sentences.
   Each thumbnail is a real link to the piece — with no JavaScript the rail is
   five ways into the shop; with it, it drives the carousel. */
.hero__rail {
  display: flex; gap: .5rem; margin-top: 2.1rem;
  padding-top: 1.4rem; border-top: 1px solid var(--line);
}
.hero__railitem {
  display: block; width: 60px; flex: 0 0 auto; padding: 0; background: none;
  border: 0; cursor: pointer; line-height: 0;
  outline: 1px solid transparent; outline-offset: 3px;
  transition: outline-color .18s ease, opacity .18s ease;
  opacity: .55;
}
.hero__railitem img { width: 100%; height: 75px; object-fit: cover; background: var(--paper-warm); }
.hero__railitem:hover { opacity: 1; }
.hero__railitem[aria-current="true"] { opacity: 1; outline-color: var(--ink); }

.hero__note {
  margin: 1.1rem 0 0; font-size: .84rem; color: var(--ink-soft); max-width: 34ch;
}
.hero__note b { font-family: var(--display); font-size: 1.05rem; color: var(--accent-deep); font-weight: 400; }

/* ── Fact band ── */
.band { border-bottom: 1px solid var(--line); background: var(--paper-warm); }
.band__row {
  display: flex; gap: clamp(1.4rem, 5vw, 4rem); justify-content: space-between; flex-wrap: wrap;
  padding: 1.15rem 0; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-soft);
}
.band__row b { font-weight: 600; color: var(--ink); }

/* ── Sections ── */
.section { padding: clamp(3.2rem, 7vw, 6.5rem) 0; }
.section--tight { padding: clamp(2.4rem, 5vw, 4rem) 0; }
.section--dark { background: var(--ink); color: var(--paper); }
.section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark p { color: rgba(255,255,255,.76); }
.section__head {
  display: flex; align-items: end; justify-content: space-between; gap: 2rem;
  flex-wrap: wrap; margin-bottom: clamp(1.6rem, 3.5vw, 2.8rem);
}
.section__head p { margin: 0; color: var(--ink-soft); font-size: .95rem; }

/* ── Collection tiles: deliberately uneven ── */
.tiles { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.8rem, 1.6vw, 1.4rem); }
.tile {
  position: relative; display: block; text-decoration: none; overflow: hidden;
  background: var(--paper-warm); color: #fff;
}
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.7,.3,1); }
.tile:hover img { transform: scale(1.04); }
.tile::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,10,11,.68) 0%, rgba(10,10,11,.12) 46%, rgba(10,10,11,0) 70%);
}
.tile__label {
  position: absolute; left: 0; bottom: 0; z-index: 2; padding: 1.3rem 1.5rem; width: 100%;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.tile__label span:first-child { font-family: var(--display); font-size: clamp(1.4rem, 2.2vw, 2rem); }
.tile__label span:last-child { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .82; }
.tile--tall { grid-column: span 6; aspect-ratio: 4 / 5; }
.tile--wide { grid-column: span 6; aspect-ratio: 4 / 5; }
.tile--third { grid-column: span 4; aspect-ratio: 3 / 4; }
/* The fourth cell of the second row: no photograph, just the way through. */
.tile--text {
  background: var(--paper-warm); color: var(--ink); display: flex; align-items: flex-end;
  padding: 1.6rem; border: 1px solid var(--line);
}
.tile--text::after { content: none; }
.tile--text strong { display: block; font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.1; margin: .7rem 0 1.4rem; }
.tile--text:hover { border-color: var(--ink); }

/* ── Product grid ── */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: clamp(1.1rem, 2.4vw, 2.2rem) clamp(1rem, 2vw, 1.8rem); }
.grid--four { grid-template-columns: repeat(4, 1fr); }
.card { position: relative; display: block; }
.card__media { position: relative; background: var(--paper-warm); overflow: hidden; aspect-ratio: 4 / 5; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1), opacity .3s; }
.card:hover .card__media img { transform: scale(1.035); }
.card__media img.card__alt {
  position: absolute; inset: 0; opacity: 0;
}
.card:hover .card__media img.card__alt { opacity: 1; }

/* The product link stretches over the whole card, so the card is one link for a
   crawler and a screen reader while still leaving room for a real button. */
.card__link { text-decoration: none; }
.card__link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.card__link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Add to bag, from the grid ── */
.card__quick, .card__opt {
  font: inherit; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  cursor: pointer; border-radius: var(--radius);
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  transition: background .16s ease, border-color .16s ease, color .16s ease, opacity .2s ease, transform .2s ease;
}
.card__quick {
  position: absolute; z-index: 2; left: .7rem; right: .7rem; bottom: .7rem;
  font-size: .68rem; padding: .95em 1em;
}
.card__quick:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.card__quick[data-added] { background: var(--ok); border-color: var(--ok); }

.card__options {
  position: absolute; z-index: 2; left: .7rem; right: .7rem; bottom: .7rem;
  display: flex; flex-wrap: wrap; gap: .35rem;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  padding: .55rem; border: 1px solid var(--line);
}
.card__opt {
  flex: 1 1 auto; font-size: .68rem; padding: .8em .6em;
  background: transparent; color: var(--ink); border-color: var(--line-strong);
}
.card__opt:hover:not([disabled]) { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card__opt[disabled] { color: var(--ink-faint); text-decoration: line-through; cursor: not-allowed; border-style: dashed; }

/* The button is visible by default. Only a wide screen with a real pointer
   hides it until hover — width is the reliable signal, because a device that
   reports `hover: hover` when it has no pointer (some tablets, some emulators)
   would otherwise show a button nobody can ever reveal. Keyboard focus and an
   open option list both count as wanting it. */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .card__quick, .card__options { opacity: 0; transform: translateY(.4rem); pointer-events: none; }
  .card:hover .card__quick, .card:focus-within .card__quick,
  .card:hover .card__options, .card:focus-within .card__options,
  .card__quick[data-added], .card__options:not([hidden]) {
    opacity: 1; transform: none; pointer-events: auto;
  }
}
@media (max-width: 560px) {
  .card__quick { font-size: .6rem; padding: .8em .5em; left: .5rem; right: .5rem; bottom: .5rem; letter-spacing: .1em; }
  .card__options { left: .5rem; right: .5rem; bottom: .5rem; padding: .4rem; gap: .3rem; }
  .card__opt { font-size: .62rem; padding: .75em .4em; letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  .card__quick, .card__options { transform: none; }
}
.card__flag {
  position: absolute; top: .8rem; left: .8rem; z-index: 2; background: var(--paper); color: var(--ink);
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; padding: .5em .9em;
}
.card__flag--sold { background: rgba(17,18,19,.86); color: var(--paper); }
.card__flag--one { background: var(--accent); color: #fff; }
.card__body { padding-top: .95rem; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.card__name { font-family: var(--display); font-size: 1.2rem; line-height: 1.2; }
.card__price { font-size: .95rem; white-space: nowrap; }
.card__was { color: var(--ink-faint); text-decoration: line-through; margin-right: .4em; font-size: .85rem; }
.card__meta { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); padding-top: .3rem; }

/* ── Horizontal scroller (jewellery row) ── */
.scroller {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 20%);
  gap: clamp(1rem, 2vw, 1.6rem); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem; scrollbar-width: thin;
}
.scroller > * { scroll-snap-align: start; }

/* ── Filter bar ── */
.filters {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding: 1rem 0; border-block: 1px solid var(--line); margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.chip {
  font: inherit; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  padding: .62em 1.15em; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft);
  cursor: pointer; border-radius: 999px; text-decoration: none; display: inline-block;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-current="true"], .chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filters__right { margin-left: auto; display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.search { display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; }
.search input {
  font: inherit; font-size: .82rem; border: 0; background: transparent; color: var(--ink);
  padding: .55em .3em .55em 1em; width: 9rem; min-width: 0;
}
.search input:focus { outline: none; }
.search:focus-within { border-color: var(--accent); }
.search input::-webkit-search-cancel-button { cursor: pointer; }
.search button {
  font: inherit; font-size: .95rem; line-height: 1; cursor: pointer; color: var(--ink-soft);
  background: transparent; border: 0; padding: .5em .9em .5em .4em; border-radius: 999px;
}
.search button:hover { color: var(--accent-deep); }
.search__note {
  margin: 0 0 clamp(1.2rem, 2.5vw, 2rem); font-size: .92rem; color: var(--ink-soft);
  display: flex; gap: 1rem; align-items: baseline; flex-wrap: wrap;
}
.filters__right select {
  font: inherit; font-size: .78rem; padding: .55em 2em .55em .8em; border: 1px solid var(--line-strong);
  background: transparent; border-radius: var(--radius); color: var(--ink);
}

/* The About hero. Two fixes for a short window: the copy starts at the top
   instead of centring against a tall photograph — which left a screen-high void
   above the heading — and the photograph is capped against the viewport so it
   cannot be taller than the screen it is on. */
.hero--about { align-items: start; min-height: 0; padding: clamp(1.4rem, 3vw, 2.4rem) 0 clamp(2rem, 5vw, 4rem); }

/* ── A photograph that is also a way to buy the thing in it ── */
.shopfig { position: relative; margin: 0; }
.shopfig a { display: block; text-decoration: none; position: relative; }
.shopfig img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; background: var(--paper-warm); }
.shopfig figcaption {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .85rem .2rem 0; font-family: var(--display); font-size: 1.1rem;
}
.shopfig__price { font-family: var(--text); font-size: .9rem; color: var(--ink-soft); white-space: nowrap; }
.shopfig a:hover figcaption span:first-child { border-bottom: 1px solid var(--accent); }
.shopfig .card__flag { top: .8rem; left: .8rem; }
.section--dark .shopfig figcaption { color: var(--paper); }
.section--dark .shopfig__price { color: rgba(255,255,255,.7); }

/* ── Editorial split ── */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--flip > figure { order: 2; }
.split figure { margin: 0; }
.split img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.split__body { max-width: 46ch; }
.split__body h2 { margin-bottom: 1rem; }
.steps { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: step; }
.steps li { counter-increment: step; padding: 1.1rem 0 1.1rem 3.4rem; border-top: 1px solid var(--line); position: relative; }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 0; top: 1.25rem;
  font-family: var(--display); font-size: 1rem; color: var(--accent); letter-spacing: .06em;
}
.steps strong { display: block; font-weight: 500; }
.steps span { color: var(--ink-soft); font-size: .95rem; }
.section--dark .steps li { border-color: rgba(255,255,255,.16); }
.section--dark .steps span { color: rgba(255,255,255,.7); }
.section--dark .steps li::before { color: var(--clay); }

/* ── Product page ── */
.pdp { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: start; }
.pdp__gallery { display: grid; gap: .7rem; }
.pdp__stage { position: relative; background: var(--paper-warm); }
.pdp__stage img, .pdp__stage video { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  display: block; background: var(--paper-warm); }
.pdp__stage [hidden] { display: none; }
/* The clip's thumbnail carries a play glyph so it reads as a video, not a still. */
.pdp__thumbs .thumb--clip { position: relative; }
.pdp__thumbs .thumb--clip span {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-size: .95rem; text-shadow: 0 1px 6px rgba(0,0,0,.6);
  background: rgba(17,18,19,.22);
}
.pdp__thumbs { display: flex; gap: .55rem; flex-wrap: wrap; }
.pdp__thumbs button { padding: 0; border: 1px solid var(--line); background: none; cursor: pointer; width: 84px; }
.pdp__thumbs button[aria-current="true"] { border-color: var(--ink); }
.pdp__thumbs img { width: 100%; height: 105px; object-fit: cover; }
.pdp__panel { position: sticky; top: 88px; }
.pdp__price { font-size: 1.35rem; margin: .9rem 0 1.5rem; }
.pdp__desc { color: var(--ink-soft); max-width: 46ch; }
.spec { margin: 2.2rem 0 0; font-size: .94rem; border-top: 1px solid var(--line); }
.spec > div { display: flex; gap: 1.2rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.spec dt { width: 7.5rem; flex: none; color: var(--ink-faint); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; padding-top: .15em; }
.spec dd { margin: 0; }
.breadcrumb { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); padding: 1.4rem 0; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }

/* ── Size picker ── */
.sizes { display: flex; flex-wrap: wrap; gap: .55rem; margin: .5rem 0 1.5rem; }
.size {
  border: 1px solid var(--line-strong); background: transparent; font: inherit; font-size: .82rem;
  letter-spacing: .08em; padding: .7em 1.2em; cursor: pointer; border-radius: var(--radius); min-width: 3.4rem;
}
.size[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.size[disabled] { color: var(--ink-faint); text-decoration: line-through; cursor: not-allowed; border-style: dashed; }

/* ── Forms ── */
.field { display: block; margin-bottom: 1.1rem; }
.field > span { display: block; font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: .45rem; font-weight: 600; }
.input, select, textarea {
  width: 100%; font: inherit; font-size: .98rem; color: var(--ink); background: #fff;
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: .85em .95em;
}
.input:focus, select:focus, textarea:focus { border-color: var(--accent); outline-offset: 1px; }
.field--error .input { border-color: var(--alert); }
.field__error { color: var(--alert); font-size: .82rem; margin-top: .35rem; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

/* ── Newsletter ── */
.signup { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.signup form { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; }
.signup input {
  flex: 1 1 15rem; font: inherit; padding: .95em 1em; border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.07); color: var(--paper); border-radius: var(--radius);
}
.signup input::placeholder { color: rgba(255,255,255,.5); }
.signup__note { font-size: .8rem; color: rgba(255,255,255,.55); margin-top: .9rem; }

/* ── Bag drawer ── */
.drawer-scrim {
  position: fixed; inset: 0; background: rgba(17,18,19,.45); opacity: 0; pointer-events: none;
  transition: opacity .22s ease; z-index: 50;
}
.drawer-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; z-index: 51; width: min(440px, 100%);
  height: 100dvh; max-height: 100dvh; display: flex; flex-direction: column;
  background: var(--paper); border-left: 1px solid var(--line);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.3,.8,.3,1);
}
.drawer[data-open="true"] { transform: none; }
.drawer__head { display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--line); }
.drawer__body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1.2rem 1.5rem; }
.drawer__foot { border-top: 1px solid var(--line); padding: 1.3rem 1.5rem; background: var(--paper-warm); }
.icon-button { background: none; border: 0; font: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink); padding: .2rem .4rem; }
.bag-line { display: grid; grid-template-columns: 68px 1fr auto; gap: .9rem; padding: .9rem 0; border-bottom: 1px solid var(--line); }
.bag-line img { width: 68px; height: 85px; object-fit: cover; background: var(--paper-warm); }
.bag-line__meta { font-size: .8rem; color: var(--ink-soft); }
.bag-line--problem { background: var(--accent-wash); margin-inline: -.6rem; padding-inline: .6rem; }
.bag-line__warn { font-size: .8rem; color: var(--accent-deep); margin-top: .25rem; }
.bag-line__warn button {
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; margin-left: .4rem;
  background: none; border: 0; padding: 0; color: var(--accent-deep); text-decoration: underline;
}
.bag-line__gone { grid-column: 1 / -1; font-size: .9rem; color: var(--accent-deep); }
.bag-line__remove { background: none; border: 0; padding: 0; font: inherit; font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); cursor: pointer; text-decoration: underline; }
.totals { font-size: .95rem; }
.totals div { display: flex; justify-content: space-between; padding: .28rem 0; }
.totals .total { font-size: 1.1rem; font-weight: 600; border-top: 1px solid var(--line); margin-top: .5rem; padding-top: .7rem; }

/* ── Notices ── */
.notice { padding: .9rem 1.1rem; border-left: 3px solid var(--accent); background: var(--accent-wash);
  font-size: .92rem; margin-bottom: 1.2rem; }
.notice--error { border-color: var(--alert); background: #fbe9ea; color: #7a1620; }
.notice--ok { border-color: var(--ok); background: #e6f3ee; color: #0a5b47; }
.empty { padding: 3rem 0; text-align: center; color: var(--ink-faint); }

/* ── Footer ── */
.footer { border-top: 1px solid var(--line); background: var(--paper-warm); padding: clamp(2.8rem, 5vw, 4.5rem) 0 2rem; }
.footer__grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2rem; }
.footer h4 { font-size: .7rem; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 .9rem; font-weight: 600; font-family: var(--text); }
.footer ul { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.footer li { margin-bottom: .5rem; }
.footer a { text-decoration: none; color: var(--ink-soft); }
.footer a:hover { color: var(--ink); text-decoration: underline; }
.footer__legal { margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .8rem; color: var(--ink-faint); }

/* ── Long-form pages inherit the theme, not the hero scale ── */
.prose { max-width: 68ch; }
.prose h1 { font-size: clamp(2.1rem, 4vw, 3rem); margin-bottom: .4rem; }
.prose h2 { font-size: 1.5rem; margin: 2.4rem 0 .7rem; }
.prose h3 { font-size: 1.05rem; margin: 1.6rem 0 .5rem; font-family: var(--text); font-weight: 600; letter-spacing: .02em; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .45rem; }
.prose code { background: var(--paper-warm); padding: .15em .4em; font-size: .92em; }
.page-head { padding: clamp(2.5rem, 5vw, 4rem) 0 1rem; }
.updated { font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
table.data { width: 100%; border-collapse: collapse; font-size: .93rem; margin: 1rem 0 1.6rem; }
table.data th, table.data td { text-align: left; padding: .65rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.data th { font-family: var(--text); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.table-scroll { overflow-x: auto; }

@media (max-width: 1000px) {
  .pdp { grid-template-columns: 1fr; }
  .pdp__panel { position: static; }
  .grid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .split, .signup { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 1.2rem; }
  .strip__all { margin-left: 0; }
  .showcase { display: block; min-height: 0; background: var(--paper); }
  .showcase__slides { position: relative; inset: auto; aspect-ratio: 4 / 5; max-height: 58vh; }
  .showcase__overlay { padding: 0; background: none; }
  .showcase__grid { display: block; }
  .showcase__plate { max-width: none; padding: clamp(1.4rem, 5vw, 2rem) 0 0; }
  .showcase__aside { text-align: left; margin-top: 1.4rem; }
  .showcase__label { justify-content: flex-start; color: var(--ink); text-shadow: none; }
  .showcase__label span { color: var(--ink-soft); }
  .showcase__rail { justify-content: flex-start; overflow-x: auto; }
  .showcase__thumb[aria-current="true"] { outline-color: var(--ink); }
  .showcase__nav { top: auto; bottom: calc(100% - 38vh); width: 2.2rem; height: 2.2rem; font-size: 1.2rem; }
  .showcase__nav--prev { left: .8rem; right: auto; }
  .hero__figure { margin-right: calc((var(--shell) - 100vw) / 2); margin-left: calc((var(--shell) - 100vw) / 2); }
  .hero__figure img { min-height: 0; aspect-ratio: 4 / 5; }
  .hero__body { max-width: none; }
  .split--flip > figure { order: 0; }
  .tile--tall, .tile--wide, .tile--third { grid-column: span 6; aspect-ratio: 1 / 1; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .nav { gap: 1.15rem; }
  .nav a[data-desktop-only] { display: none; }
  .hero__meta { display: none; }
}
@media (max-width: 620px) {
  /* The masthead has room for the wordmark, one link and the bag. The rest of
     the collections are one tap away on the shop page's filter chips. */
  .nav a[data-wide-only] { display: none; }
}
@media (max-width: 560px) {
  .row-2 { grid-template-columns: 1fr; }
  .strip__item img { width: 34px; height: 42px; }
  .strip__item small { display: none; }
  .hero__slide figcaption { padding: .6rem 1rem; font-size: .9rem; }
  .footer__grid { grid-template-columns: 1fr; }
  .wordmark { font-size: 1.2rem; letter-spacing: .3em; }
  .tile--tall, .tile--wide, .tile--third { grid-column: span 12; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 1rem .7rem; }
  .grid--four { grid-template-columns: repeat(2, 1fr); }
  .card__name { font-size: 1rem; }
  .nav { gap: .9rem; }
  .nav a { font-size: .68rem; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}