/* ============================================================
   JIOFIT — Editorial Couture Design System (v2)
   Warm quiet-luxury base (Cucinelli/LEU) ×
   experimental editorial typography (JUUN.J)
   ============================================================ */

/* Fonts are linked from each page <head> (with preconnect) rather than
   @import-ed here: an @import cannot start until this file has downloaded
   and parsed, which serialises the font request behind the stylesheet. */

:root {
  /* ---- Earth-neutral palette ---- */
  --cream:      #F2EDE4;   /* page base */
  --cream-deep: #EAE3D5;   /* panel / alt section */
  --sand:       #DFD5C2;   /* hairline fills, image mats */
  --camel:      #C9A87C;   /* accent */
  --taupe:      #8A6D4B;   /* secondary accent / eyebrows */
  --umber:      #5C4E41;   /* body text on cream */
  --espresso:   #3B2F26;   /* dark surface 1 */
  --ink:        #1A1512;   /* dark surface 2 / text */
  --cream-on-dark: #EFE8DB;
  --muted-on-dark: rgba(239, 232, 219, 0.6);

  --hairline: rgba(59, 47, 38, 0.16);
  --hairline-dark: rgba(239, 232, 219, 0.14);

  /* ---- Type ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-sans: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;

  /* ---- Space scale ---- */
  --s-2: 0.5rem;
  --s-3: 1rem;
  --s-4: 1.75rem;
  --s-5: 3rem;
  --s-6: 5rem;
  /* The two section-scale steps shrink with the screen: 128/192px from 1280px
     wide, down to 80/112px on a phone, where the full size was a screenful
     of nothing between sections. */
  --s-7: clamp(5rem, 10vw, 8rem);
  --s-8: clamp(7rem, 15vw, 12rem);

  --max-width: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* Tallest a photo may be: the screen minus the fixed header and some air,
     so a full look always fits in one view on a laptop. Width-led frames use
     it as width = var(--frame-max-h) × (their aspect ratio). */
  --frame-max-h: max(calc(100vh - 10rem), 26rem);

  /* ---- Motion ---- */
  --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-long: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---- Layered, colour-tinted shadows ---- */
  --shadow-lift:
    0 1px 2px rgba(59, 47, 38, 0.05),
    0 6px 18px rgba(59, 47, 38, 0.08),
    0 22px 48px rgba(59, 47, 38, 0.10);
  --shadow-float:
    0 2px 4px rgba(26, 21, 18, 0.06),
    0 12px 32px rgba(26, 21, 18, 0.12),
    0 40px 90px rgba(26, 21, 18, 0.16);

  /* ---- Elevation: base, raised, floating ---- */
  /* Tinted with the camel rather than with grey, so a lifted surface still
     reads warm against the cream. */
  --e-1:
    0 1px 2px rgba(92, 78, 65, 0.05),
    0 6px 14px -8px rgba(138, 109, 75, 0.22);
  --e-2:
    0 1px 2px rgba(92, 78, 65, 0.05),
    0 10px 22px -10px rgba(138, 109, 75, 0.24),
    0 26px 48px -26px rgba(92, 78, 65, 0.3);
  --e-3:
    0 2px 4px rgba(92, 78, 65, 0.06),
    0 16px 34px -12px rgba(138, 109, 75, 0.26),
    0 44px 80px -34px rgba(59, 47, 38, 0.38);

  /* ---- Frosted surfaces ---- */
  --g-fill: rgba(250, 247, 241, 0.66);
  --g-fill-deep: rgba(250, 247, 241, 0.84);
  --g-fill-dark: rgba(239, 232, 219, 0.1);
  --g-blur: 22px;
  --g-sat: 1.25;
  --g-line: 1px solid rgba(255, 255, 255, 0.55);
  --g-line-dark: 1px solid rgba(239, 232, 219, 0.16);
  --g-top: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --g-top-dark: inset 0 1px 0 rgba(239, 232, 219, 0.14);

  --r: 12px;
  --r-sm: 8px;
  --lift: -7px;
}

/* svh ignores the mobile browser toolbar, so the cap holds while it shows */
@supports (height: 100svh) {
  :root { --frame-max-h: max(calc(100svh - 10rem), 26rem); }
}

/* ============ RESET / BASE ============ */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  background-color: var(--cream);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 380;
  line-height: 1.05;
  letter-spacing: -0.03em;
}

a {
  color: inherit;
  text-decoration: none;
}

ul { list-style: none; }

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

::selection {
  background: var(--camel);
  color: var(--ink);
}

/* ============ UTILITIES ============ */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* keeps a phrase such as "ready-to-wear" from breaking at its hyphens */
.nowrap { white-space: nowrap; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.eyebrow::before {
  content: '';
  width: 2rem;
  height: 1px;
  background: var(--camel);
  flex: none;
}

.eyebrow--bare::before { display: none; }

.on-dark .eyebrow { color: var(--camel); }

/* Grain overlay — subtle tactile noise */
.grain {
  position: relative;
  isolation: isolate;
}

.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

/* Reveal on scroll — transform/opacity only */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease-out-long), transform 0.9s var(--ease-out-long);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal[data-delay="1"] { transition-delay: 0.12s; }
.reveal[data-delay="2"] { transition-delay: 0.24s; }
.reveal[data-delay="3"] { transition-delay: 0.36s; }

/* ============ BUTTONS ============ */
.btn-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2.1rem;
  border-radius: 999px;
  border: 1px solid var(--ink);
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  position: relative;
  overflow: hidden;
  transition: color 0.45s var(--ease-spring), border-color 0.45s var(--ease-spring), transform 0.45s var(--ease-spring);
}

.btn-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ink);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.5s var(--ease-spring);
  z-index: -1;
}

.btn-pill:hover { color: var(--cream); }
.btn-pill:hover::before { transform: scaleY(1); }
.btn-pill:active { transform: scale(0.97); }

.btn-pill:focus-visible {
  outline: 2px solid var(--camel);
  outline-offset: 3px;
}

/* Solid variant */
.btn-pill--solid {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}

.btn-pill--solid::before { background: var(--camel); }
.btn-pill--solid:hover { color: var(--ink); border-color: var(--camel); }

/* On-dark variant */
.btn-pill--light {
  border-color: var(--cream-on-dark);
  color: var(--cream-on-dark);
}

.btn-pill--light::before { background: var(--cream-on-dark); }
.btn-pill--light:hover { color: var(--ink); border-color: var(--cream-on-dark); }

/* ============ CURRENCY SWITCH ============ */
/* Segmented control. Shares the .size-pill language: hairline group border,
   ink fill on the selected option. 3-letter codes, not symbols — "$" would
   be ambiguous for the Canadian visitors we route to USD. */
.cur-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  padding: 0.2rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
}

.cur-opt {
  padding: 0.4rem 0.65rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--umber);
  cursor: pointer;
  transition: color 0.35s var(--ease-spring), background-color 0.35s var(--ease-spring);
}

.cur-opt:hover { color: var(--ink); }
.cur-opt:active { transform: scale(0.96); }

.cur-opt.selected {
  background: var(--ink);
  color: var(--cream);
}

.cur-opt:focus-visible {
  outline: 2px solid var(--camel);
  outline-offset: 2px;
}

/* Currency dock — the switcher is not permanent chrome. It surfaces only while
   prices are actually on screen, on the pages where a price gets paid, and
   retires once they scroll away. visibility (not display) so it can transition
   and so it leaves the tab order while hidden. */
.cur-dock {
  position: fixed;
  right: var(--gutter);
  bottom: 1.6rem;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.5rem 0.4rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: rgba(242, 237, 228, 0.88);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.5s var(--ease-spring), transform 0.5s var(--ease-spring),
    visibility 0s linear 0.5s;
}

.cur-dock.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity 0.5s var(--ease-spring), transform 0.5s var(--ease-spring),
    visibility 0s;
}

.cur-dock-label {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--umber);
  white-space: nowrap;
}

/* The dock already carries the group border. */
.cur-dock .cur-switch {
  border: 0;
  padding: 0;
}

@media (prefers-reduced-motion: reduce) {
  .cur-dock { transform: none; }
  .cur-dock.is-visible { transform: none; }
}

/* Remote-Fit tier explainer — only shown when a non-NGN price is displayed. */
.tier-note {
  margin-top: var(--s-4);
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  background: var(--cream-deep);
  font-size: 0.8rem;
  line-height: 1.7;
  color: var(--umber);
}

.tier-note[hidden] { display: none; }
.tier-note .eyebrow { display: block; margin-bottom: 0.4rem; }

/* Qualifier under a price (e.g. the consultation credit) */
.price-note {
  margin-top: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.7rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: var(--taupe);
}

/* Text arrow link */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding-bottom: 0.35rem;
}

.link-arrow::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--camel);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-spring);
}

.link-arrow:hover::after,
.link-arrow:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.link-arrow .arr {
  transition: transform 0.5s var(--ease-spring);
}

.link-arrow:hover .arr { transform: translateX(5px); }

.link-arrow:focus-visible {
  outline: 2px solid var(--camel);
  outline-offset: 4px;
}

/* ============ IMAGE TREATMENT ============ */
.img-frame {
  position: relative;
  overflow: hidden;
  background: var(--sand);
}

.img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.6s var(--ease-out-long);
}

/* warm colour treatment + gradient depth */
.img-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, rgba(26, 21, 18, 0.28), transparent 45%);
}

.img-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--camel);
  opacity: 0.10;
  mix-blend-mode: multiply;
}

.img-frame:hover img,
a:hover .img-frame img {
  transform: scale(1.045);
}

/* ============ HEADER / NAV ============ */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: transform 0.5s var(--ease-spring);
}

.header .nav {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  padding: 1.4rem var(--gutter);
  transition: padding 0.5s var(--ease-spring);
}

.header::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: rgba(242, 237, 228, 0.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--hairline);
  transition: opacity 0.45s var(--ease-spring);
  z-index: -1;
}

.header.scrolled::before { opacity: 1; }
.header.scrolled .nav { padding-top: 0.5rem; padding-bottom: 0.5rem; }

.nav-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-logo {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 450;
  letter-spacing: 0.38em;
  color: var(--ink);
}

.nav-logo:focus-visible {
  outline: 2px solid var(--camel);
  outline-offset: 4px;
}

.nav-links {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
}

.nav-links a:not(.btn-pill) {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  position: relative;
  padding: 0.25rem 0;
}

.nav-links a:not(.btn-pill)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease-spring);
}

.nav-links a:not(.btn-pill):hover::after,
.nav-links a:not(.btn-pill).active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-links a:focus-visible {
  outline: 2px solid var(--camel);
  outline-offset: 4px;
}

.nav-links .btn-pill {
  padding: 0.6rem 1.4rem;
  font-size: 0.65rem;
}

/* current page indicator on the nav pill */
.nav-links .btn-pill.active {
  background: var(--ink);
  color: var(--cream);
}

/* Hamburger */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  align-items: flex-start;
  padding-left: 4px;
}

.menu-toggle span {
  display: block;
  width: 26px;
  height: 1.5px;
  /* currentColor, so the hero treatment below can recolour the bars: as a
     fixed ink they stayed dark on a dark photograph. */
  background: currentColor;
  transition: transform 0.45s var(--ease-spring), opacity 0.3s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(3.75px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  transform: translateY(-3.75px) rotate(-45deg);
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--camel);
  outline-offset: 3px;
}

/* ============ HERO — full bleed ============ */
/* One photograph, the whole screen. The copy sits on it, carried by a scrim
   rather than by a panel.

   The photography is 4:5 and the window is usually wider than it is tall, so
   cover scales the plate to roughly twice the height on show and half of it is
   always outside the frame: a full-length gown cannot fit, and the archive is
   where the whole look lives. What the crop has to do is clear the nav at the
   top and then give the rest of the frame to the garment, which is what the
   26% below buys. A phone is narrower than 4:5, so there cover fills the
   height exactly and trims the sides instead -- the only case where the bleed
   is literally full.

   Those two numbers are only the starting point. Victoria frames the photo in
   the admin, which sets --hero-x / --hero-y (the point of the photograph held
   at that same point of the frame) and --hero-zoom (how far into it the crop
   is pushed). Every rule below reads them through a fallback, so a photograph
   she has not framed keeps exactly the crop it had: 26% down on a laptop,
   where the vertical trim is the one that matters, and 30% on a phone, where
   it is the sides that go. Once she has framed one, her point governs both --
   she chose it looking at both shapes. */
/* Height is the admin's, because on a screen wider than the plate it is the
   only lever that shows more of the photograph: the hero fills the width
   whatever happens, so only a taller frame lets more of the picture through.
   What it costs is below -- .bleed-copy and the scroll cue hang off the foot
   of this box, so a taller hero carries the headline and the booking button
   down past the fold with it. */
.hero {
  position: relative;
  min-height: var(--hero-h, 100svh);
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}

.bleed-figure {
  position: absolute;
  inset: 0;
}

.bleed-figure .img-frame,
.bleed-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* transform-origin tracks the same point, so zooming pushes into the part of
   the photograph she framed rather than into the middle of the screen. */
.bleed-figure img {
  object-position: var(--hero-x, 50%) var(--hero-y, 26%);
  transform-origin: var(--hero-x, 50%) var(--hero-y, 26%);
  scale: var(--hero-zoom, 1);
}

/* The scrim has to carry the copy, so it is heavier at the foot than the
   site's standard image treatment. */
/* Two scrims, not one. Victoria can put any photograph here from the admin --
   a dark velvet studio shot or a bright lawn at midday -- and the copy has to
   stay readable on both, so the left third is darkened regardless of what the
   picture is doing. */
.hero .img-frame::before {
  background:
    linear-gradient(
      to right,
      rgba(26, 21, 18, 0.72),
      rgba(26, 21, 18, 0.34) 34%,
      transparent 62%
    ),
    linear-gradient(
      to top,
      rgba(26, 21, 18, 0.66),
      rgba(26, 21, 18, 0.1) 46%,
      rgba(26, 21, 18, 0.42)
    );
}

.bleed-copy {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(3.5rem, 11vh, 7rem);
  z-index: 3;
  max-width: min(34rem, 42vw);
  color: var(--cream-on-dark);
}

.bleed-copy .eyebrow { color: var(--camel); }

.bleed-word {
  margin: 0.9rem 0 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(3.2rem, 8.5vw, 7.5rem);
  font-weight: 380;
  font-variation-settings: 'opsz' 144;
  line-height: 0.88;
  letter-spacing: 0.015em;
  color: var(--cream-on-dark);
}

/* display:contents keeps the letters in the heading's own layout box, so they
   can be staggered without a wrapper of their own. */
.bleed-word-mark { display: contents; }

.bleed-word .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  animation: charUp 1.1s var(--ease-out-long) forwards;
}

@keyframes charUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Used by the inner-page heroes: copy lines and the hanging inset settle in. */
@keyframes figUp {
  to { opacity: 1; transform: translateY(0); }
}

/* Readable by assistive tech and crawlers, painted nowhere. */
.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;
}

.bleed-copy p {
  max-width: 30rem;
  margin-bottom: 1.75rem;
  font-size: 0.95rem;
  line-height: 1.7;
  color: rgba(239, 232, 219, 0.78);
}

.bleed-chip {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(3.5rem, 11vh, 7rem);
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: right;
  max-width: 19rem;   /* the line is a sentence Victoria can edit, so it must wrap */
  padding: 1rem 1.25rem;
  border-radius: var(--r);
  background: rgba(239, 232, 219, 0.1);
  border: 1px solid rgba(239, 232, 219, 0.16);
  -webkit-backdrop-filter: blur(22px) saturate(1.25);
  backdrop-filter: blur(22px) saturate(1.25);
  box-shadow: var(--e-2), inset 0 1px 0 rgba(239, 232, 219, 0.14);
}

.bleed-chip-k {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--camel);
}

.bleed-chip-v {
  font-size: 0.75rem;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: rgba(239, 232, 219, 0.8);
}

/* Centred, not on the gutter. The copy is anchored bottom-left on a
   viewport-height offset and the cue on a fixed one, so sharing a column the
   two converge as the window gets shorter: at 720px tall the cue sat 6px over
   the booking pill, at 650px, 14px. Reserving space cannot fix it, because the
   copy's offset is capped at 7rem and a floor that high would freeze it and
   push it into the title on short screens. Bottom centre is clear of both the
   copy and the season chip at every width. */
.hero-scrollcue {
  position: absolute;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(239, 232, 219, 0.7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.hero-scrollcue::after {
  content: '';
  width: 1px;
  height: 2.4rem;
  background: rgba(239, 232, 219, 0.7);
  animation: cueDrop 2.2s var(--ease-out-long) infinite;
  transform-origin: top;
}

@keyframes cueDrop {
  0% { transform: scaleY(0); }
  45% { transform: scaleY(1); }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* The nav floats on the photograph until the page scrolls out from under it. */
body:has(.hero .bleed-figure) .header:not(.scrolled):not(.menu-open) .nav-logo,
body:has(.hero .bleed-figure) .header:not(.scrolled):not(.menu-open) .nav-links a:not(.btn-pill),
body:has(.hero .bleed-figure) .header:not(.scrolled):not(.menu-open) .menu-toggle { color: var(--cream-on-dark); }

body:has(.hero .bleed-figure) .header:not(.scrolled):not(.menu-open) .nav-links a:not(.btn-pill)::after { background: var(--camel); }

body:has(.hero .bleed-figure) .header:not(.scrolled):not(.menu-open) .nav-links .btn-pill {
  border-color: rgba(239, 232, 219, 0.5);
  color: var(--cream-on-dark);
}

body:has(.hero .bleed-figure) .header:not(.scrolled):not(.menu-open) .nav-links .btn-pill::before { background: var(--camel); }
body:has(.hero .bleed-figure) .header:not(.scrolled):not(.menu-open) .nav-links .btn-pill:hover { color: var(--ink); }

/* ============ THE BAND UNDER THE HERO ============ */
/* Three looks at a third of the width each, no gutter: the Fabiana Filippi
   split, and the first thing the page shows once the hero scrolls away. */
.bleed-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bleed-strip-item {
  position: relative;
  aspect-ratio: 4 / 5;
}

.bleed-strip-item figcaption {
  position: absolute;
  left: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(0.9rem, 2vw, 1.5rem);
  z-index: 3;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-on-dark);
}

/* ============ COLLECTIONS ============ */
/* The one section that keeps the large step on top: the first chapter after
   the hero. Every other section uses --s-7. */
.collections {
  padding-block: var(--s-8) var(--s-7);
}

.collections-head {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: var(--s-7);
}

/* Two lines on every screen wider than a phone: the list, then "all cut in
   Lagos." after the forced break. 23ch holds the first line; 5vw keeps it
   clear of the line drawing down to 901px. */
.collections-head h2 {
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  max-width: 23ch;
}

/* Both rows share one two-column grid and interlock: the Bridal photo holds
   the left column with its text opposite, at the top; the Aso Ebi photo rises
   in the right column under that text, and its own text sits under the Bridal
   photo. The middle row (1fr) is whatever is left of a photo's height after
   the text row beside it, so longer text from the admin pushes the photos
   apart instead of running into them. Each text block hugs the gutter, level
   with the edge of the photo above or below it. */
.collection-rows {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(3rem, 7vw, 7rem);
  /* clears the inset, which hangs 3.5rem below its photo */
  row-gap: clamp(5rem, 8vw, 7.5rem);
}

.collection-row { display: contents; }

/* Width follows the height cap, and the photo sits against the gutter. */
.cr-media {
  grid-column: 1;
  grid-row: 1 / 3;
  position: relative;
  width: min(100%, calc(var(--frame-max-h) * 3 / 4));
  justify-self: end;
  align-self: start;
}

.cr-media .img-frame {
  aspect-ratio: 3 / 4;
}

/* small inset image overlapping the big one */
.cr-inset {
  position: absolute;
  right: clamp(-2.5rem, -3vw, -1.25rem);
  bottom: -3.5rem;
  width: clamp(9rem, 17vw, 15rem);
  aspect-ratio: 3 / 4;
  border: 6px solid var(--cream);
  box-shadow: var(--shadow-lift);
  z-index: 2;
}

.cr-body {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.collection-row--flip .cr-media { grid-column: 2; grid-row: 2 / 4; justify-self: start; }
.collection-row--flip .cr-body { grid-column: 1; grid-row: 3; justify-self: end; align-self: end; }
.collection-row--flip .cr-inset { right: auto; left: clamp(-2.5rem, -3vw, -1.25rem); }

.cr-index {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-style: italic;
  color: var(--camel);
  display: block;
  margin-bottom: 0.75rem;
}

.cr-body h3 {
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  margin: 0.75rem 0 1.25rem;
}

.cr-body p {
  color: var(--umber);
  font-size: 0.975rem;
  max-width: 34ch;
  margin-bottom: 1.75rem;
}

/* ---- Editorial sketch accents — fill the dead space beside short
   headings/columns with hand-drawn line motifs. Purely decorative,
   never displaces surrounding text. ---- */
.head-sketch {
  position: absolute;
  top: -0.5rem;
  right: 0;
  width: clamp(8rem, 13vw, 12.5rem);
  color: var(--ink);
  opacity: 0.8;
  pointer-events: none;
}

.head-sketch svg { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .head-sketch { display: none; }
}

/* ============ ESSENTIALS STRIP (LEU rhythm) ============ */
.essentials {
  padding: var(--s-7) 0;
  background: var(--cream-deep);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.essentials-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: var(--s-6);
}

.essentials-head h2 {
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  margin-top: 1rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
}

.product-card {
  display: block;
  position: relative;
}

.product-card .img-frame {
  aspect-ratio: 3 / 4;
  margin-bottom: 1.1rem;
}

/* hover swap */
.product-card .img-b {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s var(--ease-spring);
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.product-card:hover .img-b { opacity: 1; }

/* frosted quick-look pill — Cucinelli touch */
.product-card .quick-pill {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translate(-50%, 12px);
  z-index: 2;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: rgba(242, 237, 228, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(242, 237, 228, 0.5);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.45s var(--ease-spring), transform 0.45s var(--ease-spring);
  white-space: nowrap;
}

.product-card:hover .quick-pill,
.product-card:focus-visible .quick-pill {
  opacity: 1;
  transform: translate(-50%, 0);
}

.product-card:focus-visible {
  outline: 2px solid var(--camel);
  outline-offset: 4px;
}

.product-card h3 {
  font-size: 1.3rem;
  font-weight: 450;
  letter-spacing: -0.01em;
  margin-bottom: 0.2rem;
}

.product-card .price {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--taupe);
}

/* set from the admin when a piece is out of stock */
.product-card .sold-tag {
  margin-top: 0.35rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}

/* consultation form spam trap: off-screen for people, visible to bots */
.field--trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ============ STATEMENT (dark, kinetic type) ============ */
.statement {
  background: var(--ink);
  color: var(--cream-on-dark);
  padding: var(--s-7) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.statement::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 40% at 80% 0%, rgba(201, 168, 124, 0.12), transparent 70%),
    radial-gradient(45% 40% at 12% 100%, rgba(138, 109, 75, 0.14), transparent 70%);
  pointer-events: none;
}

.statement-text {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.3rem, 6.4vw, 6rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 16ch;
  margin: 0 auto;
}

.statement-text em {
  font-style: italic;
  font-weight: 300;
  color: var(--camel);
}

/* inline images inside the statement, JUUN.J style */
.state-img {
  display: inline-block;
  vertical-align: baseline;
  width: 1.9em;
  height: 0.92em;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 0.08em;
  transform: translateY(0.14em);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.state-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.statement .btn-pill { margin-top: var(--s-5); }

/* ============ GALLERY / ARCHIVE ============ */
.archive {
  padding-block: var(--s-7);
}

.archive-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: var(--s-6);
}

.archive-head h2 {
  font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  margin-top: 1rem;
}

/* Index-style tabs */
.index-tabs {
  display: flex;
  gap: 2.5rem;
}

.index-tab {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  transition: color 0.4s var(--ease-spring);
}

/* The underline belongs to the word, not the count beside it. */
.index-tab-label {
  position: relative;
  display: inline-block;
  padding-bottom: 0.5rem;
}

.index-tab sup {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.7rem;
  color: var(--camel);
  margin-left: 0.35rem;
  letter-spacing: 0;
  text-transform: none;
}

.index-tab-label::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-spring);
}

.index-tab:hover { color: var(--ink); }

.index-tab.active {
  color: var(--ink);
}

.index-tab:hover .index-tab-label::after,
.index-tab:focus-visible .index-tab-label::after,
.index-tab.active .index-tab-label::after {
  transform: scaleX(1);
  transform-origin: left;
}

.index-tab:focus-visible {
  outline: 2px solid var(--camel);
  outline-offset: 4px;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: tabIn 0.8s var(--ease-out-long);
}

@keyframes tabIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Even grid of full looks: three across on a laptop (a whole row fits on
   screen), two across below 900px. Every tile is 3:4, which keeps the full
   height of the 3:4 and 4:5 shots; the square ones are centred with backdrop
   to spare. Click or tap opens the full photo in the viewer (home.js). */
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(1.25rem, 2.6vw, 2.75rem);
}

.archive-grid .g-item { position: relative; }
.archive-grid .g-item .img-frame { aspect-ratio: 3 / 4; }

/* hover swap inside archive */
.hover-swap { position: relative; overflow: hidden; }

.hover-swap .secondary-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s var(--ease-spring);
  z-index: 2;
}

/* hover only: a tap on a phone would otherwise leave the second angle stuck on */
@media (hover: hover) {
  .hover-swap:hover .secondary-img { opacity: 1; }
}

/* Whole-tile button added by home.js. Transparent; it carries the focus ring
   and the "View" pill. */
.g-open {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 1.1rem;
  cursor: zoom-in;
}

.g-open:focus-visible {
  outline: 2px solid var(--camel);
  outline-offset: -6px;
}

.g-view {
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: rgba(242, 237, 228, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(242, 237, 228, 0.5);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s var(--ease-spring), transform 0.45s var(--ease-spring);
}

.g-item:hover .g-view,
.g-open:focus-visible .g-view {
  opacity: 1;
  transform: translateY(0);
}

.g-open:active .g-view { transform: scale(0.96); }

@media (hover: none) {
  .g-view { display: none; }
}

/* archive caption — title and note under a head gradient, top-left so the
   "View" pill keeps the foot of the tile. Isolated so its layers never paint
   over neighbouring tiles. */
.g-item--cap .img-frame { isolation: isolate; }

.g-item--cap .img-frame::before {
  z-index: 3;
  background:
    linear-gradient(to bottom, rgba(26, 21, 18, 0.58), transparent 30%),
    linear-gradient(to top, rgba(26, 21, 18, 0.28), transparent 45%);
}

.g-cap {
  position: absolute;
  top: clamp(1rem, 2.4vw, 1.75rem);
  left: clamp(1rem, 2.4vw, 1.75rem);
  right: clamp(1rem, 2.4vw, 1.75rem);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  color: var(--cream);
  pointer-events: none;
}

.g-cap strong {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 380;
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.g-cap span {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.82;
}

.archive-cta {
  text-align: center;
  margin-top: var(--s-7);
}

/* ============ PROCESS (dark) ============ */
.process {
  background: var(--espresso);
  color: var(--cream-on-dark);
  padding: var(--s-7) 0;
  position: relative;
  overflow: hidden;
}

.process::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 50% at 50% -10%, rgba(201, 168, 124, 0.10), transparent 70%);
  pointer-events: none;
}

.process-head {
  margin-bottom: var(--s-6);
}

.process-head h2 {
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  margin-top: 1rem;
  max-width: 14ch;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--hairline-dark);
  padding-top: var(--s-5);
}

.step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 2.4rem;
  color: var(--camel);
  display: block;
  margin-bottom: 1rem;
  line-height: 1;
}

.step h3 {
  font-size: 1.35rem;
  font-weight: 450;
  margin-bottom: 0.6rem;
  letter-spacing: -0.01em;
}

.step p {
  font-size: 0.9rem;
  color: var(--muted-on-dark);
  line-height: 1.7;
}

/* ============ CTA BAND (JUUN.J "claim your style") ============ */
.cta-band {
  display: block;
  background: var(--ink);
  color: var(--cream-on-dark);
  text-align: center;
  padding: var(--s-7) var(--gutter);
  border-top: 1px solid var(--hairline-dark);
  position: relative;
  overflow: hidden;
}

.cta-band .cta-line {
  display: block;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 8vw, 7.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  transition: transform 0.7s var(--ease-spring);
}

.cta-band .cta-line em {
  font-style: italic;
  color: var(--camel);
}

.cta-band .cta-sub {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  transition: color 0.45s var(--ease-spring);
}

.cta-band .cta-sub .arr { transition: transform 0.5s var(--ease-spring); }

.cta-band:hover .cta-line { transform: translateY(-6px); }
.cta-band:hover .cta-sub { color: var(--camel); }
.cta-band:hover .cta-sub .arr { transform: translateX(6px); }

.cta-band:focus-visible {
  outline: 2px solid var(--camel);
  outline-offset: -4px;
}

/* ============ FOOTER (dark) ============ */
.footer {
  background: var(--ink);
  color: var(--muted-on-dark);
  padding: var(--s-6) 0 var(--s-4);
  border-top: 1px solid var(--hairline-dark);
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  padding-bottom: var(--s-5);
}

/* Large enough for its letters to rise in (see SCROLL-LINKED MOTION) */
.footer-brand .footer-logo {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0.3em;
  color: var(--cream-on-dark);
  display: inline-block;
  margin-bottom: 1.25rem;
  transition: opacity 0.3s var(--ease-spring);
}

.footer-brand .footer-logo:hover { color: var(--camel); }
.footer-brand .footer-logo:active { opacity: 0.7; }

.footer-brand p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  max-width: 26ch;
  color: var(--muted-on-dark);
}

.footer h4 {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--camel);
  margin-bottom: 1.2rem;
}

.footer ul {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.footer a {
  font-size: 0.9rem;
  color: var(--muted-on-dark);
  transition: color 0.35s var(--ease-spring);
}

.footer a:hover { color: var(--cream-on-dark); }

.footer a:focus-visible {
  outline: 2px solid var(--camel);
  outline-offset: 3px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--hairline-dark);
  padding-top: var(--s-4);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(239, 232, 219, 0.38);
}

/* ============ MOBILE NAV — THE INDEX SHEET ============ */
/* The nav collapses only once it genuinely stops fitting. Measured at 768px:
   the links set 512px, the wordmark 124px and the two gutters 61px — 697px of
   the 768 available — so every iPad in portrait keeps the real nav and the
   hamburger is a phone control, not a tablet one.

   Below that the links become a sheet hung off the bottom of the bar. The
   bar, the wordmark and the toggle stay put and stay live: the Cecilie
   Bahnsen arrangement, where you can always see where you are, rather than a
   full-screen takeover that replaces the page. */

/* The rail belongs to the sheet. Above the breakpoint the footer carries it,
   so it must default to hidden before the media query turns it on. */
.nav-rail { display: none; }

@media (max-width: 760px) {
  /* Height of the bar while the sheet is open: the compact padding top and
     bottom plus the 44px touch target. The sheet hangs off the bottom of it. */
  :root { --nav-h: calc(max(0.9rem, env(safe-area-inset-top, 0px)) + 0.9rem + 44px); }

  .menu-toggle { display: flex; }

  /* Hamburger holds the left slot, so the wordmark re-centres. */
  .header .nav { grid-template-columns: 1fr auto 1fr; }

  .nav-logo {
    text-align: center;
    text-indent: 0.38em; /* optically centre the tracked text */
  }

  /* Open, the bar drops the floating pill and becomes the top edge of the
     sheet: one continuous cream surface, divided by a single hairline. */
  .header.menu-open .nav {
    margin: 0;
    padding-top: max(0.9rem, env(safe-area-inset-top, 0px));
    padding-bottom: 0.9rem;
    border-radius: 0;
    border-color: transparent;
    background: var(--cream);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .header.menu-open::before { opacity: 0; }

  .nav-links {
    position: fixed;
    top: var(--nav-h);
    left: 0;
    right: 0;
    bottom: 0;
    /* Inside the header's own stacking context (z-100), so the sheet paints
       over the page instead of under it. */
    z-index: 1;
    counter-reset: navitem;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: clamp(0.5rem, 3vw, 1.25rem) var(--gutter)
      calc(var(--gutter) + env(safe-area-inset-bottom, 0px));
    background: var(--cream);
    border-top: 1px solid var(--hairline);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    pointer-events: none;
    transition: opacity 0.4s var(--ease-spring),
      transform 0.4s var(--ease-spring),
      visibility 0s linear 0.4s;
  }

  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity 0.45s var(--ease-spring),
      transform 0.55s var(--ease-out-long),
      visibility 0s;
  }

  /* Each destination is an index entry: a camel numeral, the name at display
     size, a hairline beneath. The desktop underline is a hover affordance and
     has no job on a touch screen. */
  .nav-links > a:not(.btn-pill) {
    counter-increment: navitem;
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
    /* Height-relative, so the four rows take up the sheet on a tall phone
       instead of leaving a void above the booking pill, and stay compact on
       a short one. At 2.9vh the four of them still left 283px of nothing
       between ABOUT and the pill on a 844px screen, which read as the sheet
       running out rather than as air. */
    padding: clamp(0.95rem, 5.2vh, 2.9rem) 0;
    border-bottom: 1px solid var(--hairline);
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 7.5vw, 2.4rem);
    font-weight: 380;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-transform: none;
    color: var(--ink);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s var(--ease-out-long),
      transform 0.5s var(--ease-out-long),
      color 0.35s var(--ease-spring);
  }

  .nav-links > a:not(.btn-pill)::after { display: none; }

  .nav-links > a:not(.btn-pill)::before {
    content: counter(navitem, decimal-leading-zero);
    flex: none;
    width: 2.4em;
    font-family: var(--font-sans);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--camel);
    opacity: 0.55;
  }

  /* Where you are: the name warms to the secondary accent and its numeral
     comes up to full strength. */
  .nav-links > a:not(.btn-pill).active,
  .nav-links > a:not(.btn-pill):active { color: var(--taupe); }
  .nav-links > a:not(.btn-pill).active::before { opacity: 1; }

  .nav-links.open > a:not(.btn-pill) { opacity: 1; transform: translateY(0); }

  .nav-links.open > a:not(.btn-pill):nth-child(1) { transition-delay: 0.06s; }
  .nav-links.open > a:not(.btn-pill):nth-child(2) { transition-delay: 0.12s; }
  .nav-links.open > a:not(.btn-pill):nth-child(3) { transition-delay: 0.18s; }
  .nav-links.open > a:not(.btn-pill):nth-child(4) { transition-delay: 0.24s; }
  .nav-links.open > a:not(.btn-pill):nth-child(5) { transition-delay: 0.30s; }

  /* The booking pill and the contact rail sit at the foot of the sheet, in
     the thumb's reach rather than up under the bar. */
  .nav-links .btn-pill {
    margin-top: auto;
    justify-content: center;
    width: 100%;
    padding: 1.1rem 2rem;
    font-size: 0.7rem;
    color: var(--cream-on-dark);
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.55s var(--ease-out-long) 0.3s,
      transform 0.55s var(--ease-out-long) 0.3s,
      color 0.45s var(--ease-spring);
  }

  /* Pre-fill the pill. The sweep is a hover affordance and a phone has no
     hover, so the primary action has to read as solid from the start. */
  .nav-links .btn-pill::before { transform: scaleY(1); }

  .nav-links.open .btn-pill { opacity: 1; transform: translateY(0); }

  .nav-rail {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    margin-top: 1.1rem;
    padding-top: 0.95rem;
    border-top: 1px solid var(--hairline);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.55s var(--ease-out-long) 0.36s,
      transform 0.55s var(--ease-out-long) 0.36s;
  }

  .nav-links.open .nav-rail { opacity: 1; transform: translateY(0); }

  .nav-rail a {
    padding: 0.35rem 0;
    font-family: var(--font-sans);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--umber);
    transition: color 0.35s var(--ease-spring);
  }

  .nav-rail a:hover,
  .nav-rail a:active { color: var(--taupe); }

  .nav-rail a:focus-visible {
    outline: 2px solid var(--camel);
    outline-offset: 4px;
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-links,
    .nav-links.open,
    .nav-links > a:not(.btn-pill),
    .nav-links .btn-pill,
    .nav-rail { transform: none; }
  }
}

/* ---- TABLET ----
   Between the phone sheet and the full desktop bar the wordmark stayed hard
   left while the destinations and the booking pill ran out to the right edge,
   so on a 768px screen the bar filled 92% of the width and read as one dense
   band rather than a composition. The phone sheet already centres the
   wordmark; this carries that up through the tablet range and gives each of
   the three zones a side -- destinations, wordmark, booking. */
@media (min-width: 761px) and (max-width: 900px) {
  .header .nav {
    position: relative;
    /* minmax(0, 1fr), not 1fr: a flanking column that grew to fit its own
       content would push the wordmark off the centre it is here to hold. */
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }

  /* The hamburger belongs to the sheet, so this is empty at this width and
     would only hold the first column against the destinations. */
  .nav-left { display: none; }

  .nav-logo {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
    text-indent: 0.38em; /* optically centre the tracked text */
  }

  .nav-links {
    grid-column: 1;
    grid-row: 1;
    justify-content: flex-start;
    gap: 1rem;
  }

  /* The four names have to clear the wordmark inside a third of the bar, and
     0.2em tracking alone spends 50px of that third. Tracking comes off first,
     then a little size: at 0.7rem they fill the column exactly and ABOUT ends
     8px from the J. */
  .nav-links a:not(.btn-pill) {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }

  /* The pill is the third zone, but it cannot be a grid item: it sits inside
     .nav-links, which below 760 is the sheet. So it is lifted out of the row
     and anchored to the far side instead. */
  .nav-links .btn-pill {
    position: absolute;
    top: 50%;
    right: max(var(--gutter), env(safe-area-inset-right, 0px));
    transform: translateY(-50%);
  }
}

@media (max-width: 900px) {
  /* The dock centres on narrow screens — a right-anchored pill collides with
     the thumb reach zone and the quick-look pills. */
  .cur-dock {
    right: auto;
    left: 50%;
    bottom: 1.1rem;
    transform: translate(-50%, 14px) scale(0.96);
  }

  .cur-dock.is-visible { transform: translate(-50%, 0) scale(1); }

  @media (prefers-reduced-motion: reduce) {
    .cur-dock,
    .cur-dock.is-visible { transform: translateX(-50%); }
  }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px) {
  /* A phone keeps the full screen and nothing more. The photograph's whole
     height already shows at this shape, so extra height could only trim the
     sides harder -- it would cost the gown its width and return nothing. */
  .hero { min-height: 100svh; }

  /* A portrait screen is narrower than the photograph's 4:5, so cover fills
     the height exactly and trims the sides: the whole gown, edge to edge.
     Same declarations as above with a different fallback: an unframed photo
     sits 30% down here, a framed one keeps the point Victoria picked. */
  .bleed-figure img {
    object-position: var(--hero-x, 50%) var(--hero-y, 30%);
    transform-origin: var(--hero-x, 50%) var(--hero-y, 30%);
  }

  .bleed-copy {
    max-width: none;
    right: var(--gutter);
  }

  /* A shade smaller here: with the web font still loading the fallback sets
     wider, and at this width that is the difference between two lines and
     three. */
  .bleed-copy p {
    max-width: none;
    font-size: 0.875rem;
  }

  /* on a phone the copy sits over the middle of the picture, so the scrim
     works bottom-up rather than left-to-right */
  .hero .img-frame::before {
    background: linear-gradient(
      to top,
      rgba(26, 21, 18, 0.82),
      rgba(26, 21, 18, 0.14) 52%,
      rgba(26, 21, 18, 0.34)
    );
  }

  .bleed-chip { display: none; }

  /* The band is a three-up read: one glance, three houses. Stacked into a
     single column it is just three full-bleed photos with no copy and nowhere
     to go — 1.7 screens of it — and all three pictures run again in
     Collections a screen later. On a phone the hero hands straight over. */
  .bleed-strip { display: none; }

  /* one column: each row stacks photo over text */
  .collection-rows { display: block; }

  .collection-row {
    display: grid;
    grid-template-columns: 1fr;
    /* the photo's inset hangs 2.5rem below it, so the text needs its own gap */
    gap: clamp(1.5rem, 3.5vw, 4rem);
    margin-bottom: var(--s-7);
  }

  .collection-row:last-child { margin-bottom: 0; }

  .cr-media,
  .cr-body,
  .collection-row--flip .cr-media,
  .collection-row--flip .cr-body {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .cr-body,
  .collection-row--flip .cr-body {
    justify-self: stretch;
    align-self: auto;
  }

  .cr-body { padding-top: 3.5rem; }

  /* single column: centre the capped photo (matters on a portrait tablet) */
  .cr-media,
  .collection-row--flip .cr-media { justify-self: center; }

  .cr-inset { bottom: -2.5rem; right: 0; }
  .collection-row--flip .cr-inset { left: 0; }

  .product-grid { grid-template-columns: 1fr 1fr; }

  .archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .steps { grid-template-columns: 1fr 1fr; row-gap: var(--s-5); }

  .footer-top { grid-template-columns: 1fr; }

  /* Touch targets: footer lists and archive tabs to a 44px minimum */
  .footer ul { gap: 0; }

  .footer ul a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .index-tab { padding-top: 0.75rem; }
}

@media (max-width: 560px) {
  /* the copy reaches the foot of the screen here, so the cue would sit on it */
  .hero-scrollcue { display: none; }

  .bleed-copy { bottom: clamp(2rem, 6vh, 3.5rem); }

  .product-grid { grid-template-columns: 1fr; }

  .steps { grid-template-columns: 1fr; }

  /* below ~393px "Bridal, Aso Ebi and" no longer fits at 2.6rem, which
     strands "and" on a line of its own */
  .collections-head h2 { font-size: min(2.6rem, 10.6vw); }

  .essentials-head { flex-direction: column; align-items: flex-start; }

  .archive-head { flex-direction: column; align-items: flex-start; }

  /* two-across tiles are ~170px wide here */
  .g-cap { top: 0.75rem; left: 0.75rem; right: 0.75rem; gap: 0.3rem; }
  .g-cap strong { font-size: 0.95rem; }
  .g-cap span { font-size: 0.55rem; }
}

/* ============================================================
   SUBPAGE COMPONENTS
   ============================================================ */

/* ---- Editorial page hero ----
   The copy on the left; on the right either a portrait with a smaller photo
   laid over its lower corner (the pairing the homepage's collection rows use)
   or, on the reading pages, an index of the sections below. The whole hero
   fits in the first screen of a laptop. */
.page-hero {
  padding: clamp(8.5rem, 17vh, 11.5rem) 0 clamp(3.5rem, 7vh, 5.5rem);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(50% 42% at 14% 0%, rgba(201, 168, 124, 0.24), transparent 70%),
    radial-gradient(38% 34% at 90% 100%, rgba(138, 109, 75, 0.14), transparent 70%),
    var(--cream);
  border-bottom: 1px solid var(--hairline);
}

.page-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: end;
  gap: clamp(2.5rem, 6vw, 7rem);
}

/* Labels pinned to the top of the photo, title and text to its foot: the
   column is as tall as the photo beside it, so the type frames the space
   instead of floating in it. */
.page-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
}

.page-hero-copy .eyebrow { margin-bottom: 1.5rem; }

/* the copy settles in line by line on load */
.page-hero-copy > * {
  opacity: 0;
  transform: translateY(24px);
  animation: figUp 0.9s var(--ease-out-long) forwards;
}

.page-hero-copy > :nth-child(2) { animation-delay: 0.06s; }
.page-hero-copy > :nth-child(3) { animation-delay: 0.12s; }
.page-hero-copy > :nth-child(4) { animation-delay: 0.22s; }
.page-hero-copy > :nth-child(5) { animation-delay: 0.3s; }

.page-hero h1 {
  font-size: clamp(3.25rem, 8.2vw, 8.5rem);
  font-weight: 380;
  line-height: 1;
  margin-top: auto;
  text-wrap: balance;
}

.page-hero h1 em {
  font-style: italic;
  color: var(--camel);
}

.page-hero .page-hero-meta {
  max-width: 26rem;
  margin-top: clamp(1.5rem, 3vh, 2.25rem);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--umber);
}

.page-hero-copy .link-arrow { margin-top: 1.75rem; }

.page-hero .page-index {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--camel);
  display: block;
  margin-bottom: 0.6rem;
}

/* Portrait, 4:5, as tall as the screen allows. The frame is visible from
   the first paint (it is the page's largest image, so an opacity fade would
   hold back Largest Contentful Paint); only the photo inside settles. */
.page-hero-media {
  position: relative;
  justify-self: end;
  width: min(100%, calc(min(66vh, 42rem) * 0.8));
}

/* room for the inset, which hangs 2.5rem below the portrait */
.page-hero-media:has(.page-hero-inset) { margin-bottom: 2.5rem; }

.page-hero-media > .img-frame {
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-float);
}

.page-hero-media > .img-frame img {
  animation: photoSettle 1.8s var(--ease-out-long) both;
}

@keyframes photoSettle {
  from { scale: 1.08; }
  to { scale: 1; }
}

.page-hero-media > .page-hero-inset {
  position: absolute;
  left: clamp(-4.5rem, -5vw, -2rem);
  bottom: -2.5rem;
  width: 40%;
  aspect-ratio: 3 / 4;
  border: 6px solid var(--cream);
  box-shadow: var(--shadow-lift);
  z-index: 2;
  opacity: 0;
  transform: translateY(24px);
  animation: figUp 1s var(--ease-out-long) 0.35s forwards;
}

.page-hero-inset img { animation: none; }

/* Reading pages: the sections below, as a numbered index */
.page-hero-index {
  justify-self: end;
  width: min(100%, 27rem);
  padding-bottom: 0.4rem;
  opacity: 0;
  transform: translateY(24px);
  animation: figUp 0.9s var(--ease-out-long) 0.3s forwards;
}

.page-hero-index ol {
  list-style: none;
  margin-top: 1rem;
  border-top: 1px solid var(--hairline);
}

.page-hero-index li { border-bottom: 1px solid var(--hairline); }

.page-hero-index a {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: baseline;
  gap: 0.75rem;
  padding: 1rem 0.25rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: opacity 0.3s var(--ease-spring);
}

.page-hero-index .num {
  font-style: italic;
  font-size: 0.9rem;
  color: var(--camel);
}

.page-hero-index .arr {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--taupe);
  transition: transform 0.45s var(--ease-spring);
}

.page-hero-index a:hover .arr,
.page-hero-index a:focus-visible .arr { transform: translateY(4px); }

.page-hero-index a:focus-visible {
  outline: 2px solid var(--camel);
  outline-offset: 2px;
}

.page-hero-index a:active { opacity: 0.6; }

/* jump targets clear the fixed header */
.terms-article,
#booking-form-section { scroll-margin-top: 7rem; }

@media (max-width: 900px) {
  .page-hero-inner {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .page-hero-media {
    width: min(72%, 24rem);
    margin-top: 0.5rem;
  }

  .page-hero-media > .page-hero-inset {
    left: -30%;
    width: 46%;
  }

  .page-hero-index { justify-self: stretch; width: 100%; }
}

/* ---- Shop: editorial product layout ---- */
.shop-editorial {
  padding: var(--s-7) 0;
}

.shop-grid-xl {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: clamp(3rem, 6vw, 5rem);
}

/* The two wide cards are capped by screen height, like the home rows. */
.shop-grid-xl .product-card:nth-child(4n + 1) {
  grid-column: 1 / span 7;
  width: min(100%, calc(var(--frame-max-h) * 4 / 5));
  justify-self: end;
}
.shop-grid-xl .product-card:nth-child(4n + 1) .img-frame { aspect-ratio: 4 / 5; }

.shop-grid-xl .product-card:nth-child(4n + 2) {
  grid-column: 9 / span 4;
  align-self: end;
}

.shop-grid-xl .product-card:nth-child(4n + 3) {
  grid-column: 2 / span 4;
}

.shop-grid-xl .product-card:nth-child(4n + 4) {
  grid-column: 7 / span 6;
  align-self: center;
  width: min(100%, calc(var(--frame-max-h) * 4 / 5));
  justify-self: start;
}
.shop-grid-xl .product-card:nth-child(4n + 4) .img-frame { aspect-ratio: 4 / 5; }

.product-card .card-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

/* ---- Consultation ---- */
.consult-section {
  padding: var(--s-7) 0;
}

.consult-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}

.consult-aside {
  position: sticky;
  top: 7rem;
}

.consult-aside h2 {
  font-size: clamp(2.2rem, 3.6vw, 3.2rem);
  margin: 1rem 0 2.5rem;
}

/* vertical steps */
.steps-vertical .step {
  position: relative;
  padding: 0 0 2.25rem 3.25rem;
}

.steps-vertical .step::before {
  content: '';
  position: absolute;
  left: 0.55rem;
  top: 0.5rem;
  bottom: -0.5rem;
  width: 1px;
  background: var(--hairline);
}

.steps-vertical .step:last-child::before { display: none; }

.steps-vertical .step-num {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.15rem;
  margin: 0;
  background: var(--cream);
  padding: 0.15rem 0;
}

.steps-vertical .step h3 {
  font-size: 1.3rem;
  font-weight: 450;
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}

.steps-vertical .step p {
  font-size: 0.925rem;
  color: var(--umber);
  max-width: 34ch;
}

/* offer cards */
.offer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  margin-bottom: var(--s-5);
}

.offer-card .img-frame { aspect-ratio: 3 / 4; margin-bottom: 1rem; }

.offer-card h3 {
  font-size: 1.2rem;
  font-weight: 450;
  letter-spacing: -0.01em;
  margin-bottom: 0.2rem;
}

/* These cards are half-width, and carry a qualifier under the price. The
   inherited .product-card title/price row (space-between) has no room for a
   third child here, so stack instead. */
.offer-card .card-meta {
  display: block;
}

.offer-card .price {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--taupe);
  margin-top: 0.2rem;
}

/* ---- Form (editorial underline fields) ---- */
.consult-form-panel {
  background: var(--cream-deep);
  border: 1px solid var(--hairline);
  padding: clamp(1.75rem, 4vw, 3.5rem);
}

.consult-form-panel > h3 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 380;
  margin-bottom: 0.4rem;
}

.consult-form-panel > p {
  font-size: 0.9rem;
  color: var(--umber);
  margin-bottom: 2.5rem;
}

.field {
  margin-bottom: 1.9rem;
}

.field label {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 0.45rem;
}

.field input,
.field textarea {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--hairline);
  padding: 0.55rem 0;
  border-radius: 0;
  transition: border-color 0.4s var(--ease-spring);
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(92, 78, 65, 0.45);
}

.field input:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.field input:focus-visible,
.field textarea:focus-visible {
  outline: none;
}

.field textarea {
  resize: vertical;
  min-height: 7rem;
}

.field input[type="file"] {
  border: 1px dashed var(--hairline);
  padding: 1rem;
  font-size: 0.85rem;
  color: var(--umber);
}

.field input[type="file"]::file-selector-button {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  margin-right: 1rem;
  cursor: pointer;
  transition: background-color 0.4s var(--ease-spring), color 0.4s var(--ease-spring);
}

.field input[type="file"]::file-selector-button:hover {
  background: var(--ink);
  color: var(--cream);
}

.field small {
  display: block;
  font-size: 0.75rem;
  color: var(--umber);
  opacity: 0.75;
  margin-top: 0.5rem;
}

.form-note {
  font-size: 0.75rem;
  color: var(--umber);
  opacity: 0.7;
  text-align: center;
  margin-top: 1rem;
}

/* ---- About ---- */
.story {
  padding: var(--s-7) 0;
}

.story-grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.story-copy .pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 1.25rem 0 2rem;
}

.story-copy p {
  color: var(--umber);
  font-size: 0.975rem;
  margin-bottom: 1.4rem;
  max-width: 56ch;
}

.story-media {
  position: relative;
  width: min(100%, calc(var(--frame-max-h) * 3 / 4));
  justify-self: end;
}

.story-media .img-frame { aspect-ratio: 3 / 4; }

.founder-card {
  position: absolute;
  left: clamp(-2.5rem, -3vw, -1rem);
  bottom: 2.5rem;
  z-index: 2;
  background: rgba(242, 237, 228, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(242, 237, 228, 0.6);
  padding: 1.4rem 1.75rem;
  box-shadow: var(--shadow-lift);
  max-width: 16rem;
}

.founder-card h3 {
  font-size: 1.35rem;
  font-weight: 450;
  margin-bottom: 0.15rem;
}

.founder-card p {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--taupe);
}

.contact-strip {
  padding: var(--s-7) 0;
  border-top: 1px solid var(--hairline);
}

.contact-grid {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.contact-grid .img-frame {
  aspect-ratio: 4 / 5;
  max-width: calc(var(--frame-max-h) * 4 / 5);
}

.contact-copy h2 {
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  margin: 1rem 0 1.5rem;
}

.contact-copy p {
  color: var(--umber);
  font-size: 0.975rem;
  max-width: 44ch;
  margin-bottom: 2.25rem;
}

/* ---- Terms ---- */
.terms-flow {
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--s-7) var(--gutter);
}

.terms-article {
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: clamp(1rem, 4vw, 3rem);
}

.terms-article:last-child { border-bottom: none; }

.terms-article .t-index {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.9rem;
  color: var(--camel);
  line-height: 1;
  padding-top: 0.4rem;
}

.terms-article h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin-bottom: 1.25rem;
}

.terms-article > div > p {
  color: var(--umber);
  font-size: 0.95rem;
  margin-bottom: 1.25rem;
  max-width: 58ch;
}

.terms-article ul {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* paragraphs only carry margin-bottom, so one following a list needs its own gap */
.terms-article ul + p {
  margin-top: 1.25rem;
}

.terms-article li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.925rem;
  line-height: 1.75;
  color: var(--umber);
  max-width: 60ch;
}

.terms-article li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--camel);
}

.terms-article strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---- Subpage responsive ---- */
@media (max-width: 900px) {
  .shop-grid-xl { grid-template-columns: 1fr 1fr; gap: 1.25rem; row-gap: 2.5rem; }

  .shop-grid-xl .product-card:nth-child(4n + 1),
  .shop-grid-xl .product-card:nth-child(4n + 2),
  .shop-grid-xl .product-card:nth-child(4n + 3),
  .shop-grid-xl .product-card:nth-child(4n + 4) {
    grid-column: auto / span 1;
    align-self: auto;
    width: auto;
    justify-self: stretch;
  }

  .shop-grid-xl .product-card .img-frame { aspect-ratio: 3 / 4 !important; }

  .consult-grid { grid-template-columns: 1fr; }
  .consult-aside { position: static; }

  .story-grid,
  .contact-grid { grid-template-columns: 1fr; }

  .story-media { justify-self: center; }
  .contact-grid .img-frame { margin-inline: auto; }

  .founder-card { left: 1rem; bottom: 1rem; }

  .terms-article { grid-template-columns: 1fr; gap: 0.75rem; }
}

@media (max-width: 560px) {
  .offer-grid { grid-template-columns: 1fr; }
  .shop-grid-xl { grid-template-columns: 1fr; }
}

/* ============================================================
   PAGE TRANSITIONS + PRELOADER
   ============================================================ */

/* Fade-in on load (JS adds .loaded); CSS-only fallback keeps it visible */
main, .header, .footer {
  transition: opacity 0.5s var(--ease-out-long);
}

body.leaving main,
body.leaving .header,
body.leaving .footer {
  opacity: 0;
}

/* Preloader — homepage brand moment.
   One timeline: the letters rise (done by about 1.0s), the bar fills, the
   wordmark holds, and only then does the curtain lift (1.5s, gone by 2.2s).
   It used to lift at 0.45s, while the T was still half risen and the bar
   nearly full from its own easing, so the whole thing read as a flash. */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  animation: preloaderOut 0.7s var(--ease-out-long) 1.5s forwards;
  pointer-events: none;
}

.preloader-mark {
  font-family: var(--font-display);
  font-weight: 450;
  font-size: clamp(2.4rem, 7vw, 5rem);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--ink);
  overflow: hidden;
  position: relative;
}

.preloader-mark span {
  display: inline-block;
  transform: translateY(110%);
  animation: preloadCharUp 0.9s var(--ease-out-long) forwards;
}

.preloader-line {
  position: absolute;
  left: 50%;
  bottom: clamp(3rem, 10vh, 6rem);
  transform: translateX(-50%);
  width: min(40vw, 220px);
  height: 1px;
  background: var(--hairline);
  overflow: hidden;
}

.preloader-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--camel);
  transform: scaleX(0);
  transform-origin: left;
  /* Not the page-wide ease-out: that is front-loaded and had the bar at 88%
     in the first half second. This one fills steadily and lands as the curtain
     starts to move. */
  animation: preloadBar 1.45s cubic-bezier(0.45, 0, 0.25, 1) forwards;
}

@keyframes preloadCharUp {
  to { transform: translateY(0); }
}

@keyframes preloadBar {
  to { transform: scaleX(1); }
}

@keyframes preloaderOut {
  to { transform: translateY(-100%); }
}

.preloader.done { display: none; }

/* ============================================================
   PRODUCT QUICK-LOOK MODAL (Cucinelli frosted pattern)
   ============================================================ */
.ql-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(26, 21, 18, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease-spring);
}

.ql-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.ql-panel {
  position: relative;
  width: min(1000px, 100%);
  max-height: 90vh;
  max-height: 90dvh;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  background: rgba(242, 237, 228, 0.86);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(242, 237, 228, 0.6);
  box-shadow: var(--shadow-float);
  transform: translateY(28px) scale(0.98);
  opacity: 0;
  transition: transform 0.6s var(--ease-spring), opacity 0.6s var(--ease-spring);
}

.ql-overlay.open .ql-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* front/back split imagery */
.ql-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  background: var(--sand);
  min-height: 420px;
}

.ql-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ql-body {
  padding: clamp(1.75rem, 3vw, 2.75rem);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.ql-body .ql-index {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--camel);
  margin-bottom: 0.5rem;
}

.ql-body h3 {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 380;
  margin-bottom: 0.4rem;
}

.ql-body .ql-price {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--taupe);
  margin-bottom: 1.5rem;
}

.ql-body .ql-desc {
  font-size: 0.925rem;
  line-height: 1.7;
  color: var(--umber);
  margin-bottom: 1.75rem;
}

.ql-spec {
  border-top: 1px solid var(--hairline);
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.85rem;
}

.ql-spec dt {
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.65rem;
  color: var(--taupe);
  padding-top: 0.15rem;
}

.ql-spec dd {
  color: var(--umber);
  text-align: right;
  max-width: 60%;
}

.ql-sizes {
  margin: 1.5rem 0;
}

.ql-sizes .ql-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
  margin-bottom: 0.75rem;
  display: block;
}

.size-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.size-pill {
  min-width: 3rem;
  padding: 0.55rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--umber);
  transition: border-color 0.35s var(--ease-spring), color 0.35s var(--ease-spring), background-color 0.35s var(--ease-spring);
}

.size-pill:hover { border-color: var(--taupe); }

.size-pill.selected {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--cream);
}

/* ---- Size guide ---- */
/* It opens inside the quick-look, not over it. The size you are choosing stays
   on screen while you read the numbers, which is the one thing a chart in its
   own modal always loses. */

.ql-sizes-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.ql-sizes .ql-label { margin-bottom: 0; }

.sg-toggle {
  padding: 0.2rem 0;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--umber);
  cursor: pointer;
  transition: color 0.35s var(--ease-spring), border-color 0.35s var(--ease-spring);
}

.sg-toggle:hover { color: var(--taupe); border-bottom-color: var(--camel); }
.sg-toggle:focus-visible { outline: 2px solid var(--camel); outline-offset: 3px; }

.sizeguide {
  margin: 0 0 1.5rem;
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--cream-deep);
}

.sizeguide[hidden] { display: none; }

.sg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.sg-head[hidden] { display: none; }

.sg-h {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
}

.sg-h--conv {
  display: block;
  margin: 1.35rem 0 0.75rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--hairline);
}

/* With no garment table and no fit note above it, the conversion heading is
   the top of the panel and has nothing to be ruled off from. A piece can carry
   a fit note without measurements, and then the rule still has work to do. */
.sizeguide.no-measure:not(:has(.sg-note:not([hidden]))) .sg-h--conv {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.sg-units {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  flex: none;
  padding: 0.2rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
}

.sg-unit {
  padding: 0.3rem 0.6rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-sans);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--umber);
  cursor: pointer;
  transition: color 0.35s var(--ease-spring), background-color 0.35s var(--ease-spring);
}

.sg-unit.selected { background: var(--ink); color: var(--cream); }
.sg-unit:focus-visible { outline: 2px solid var(--camel); outline-offset: 2px; }

.sg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  /* Lining figures of a single width, so a column of numbers reads as one. */
  font-variant-numeric: tabular-nums lining-nums;
}

.sg-table th,
.sg-table td {
  padding: 0.55rem 0.4rem;
  border-bottom: 1px solid var(--hairline);
  text-align: right;
  font-weight: 400;
  color: var(--umber);
}

.sg-table thead th {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe);
}

.sg-table th:first-child,
.sg-table td:first-child { text-align: left; }

.sg-table tbody th {
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.sg-table tbody tr:last-child th,
.sg-table tbody tr:last-child td { border-bottom: 0; }

/* The row for the size selected in the picker above. */
.sg-table tbody tr.is-selected th,
.sg-table tbody tr.is-selected td {
  background: rgba(201, 168, 124, 0.18);
  color: var(--ink);
}

.sg-note {
  margin-top: 0.85rem;
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--umber);
}

.sg-note[hidden] { display: none; }

/* A size problem is this house's best route, not a dead end. */
.sg-bespoke {
  display: block;
  margin-top: 1.35rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--umber);
  transition: color 0.35s var(--ease-spring);
}

.sg-bespoke span {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

.sg-bespoke:hover,
.sg-bespoke:hover span { color: var(--taupe); }
.sg-bespoke:focus-visible { outline: 2px solid var(--camel); outline-offset: 3px; }

.size-pill:focus-visible {
  outline: 2px solid var(--camel);
  outline-offset: 2px;
}

.ql-actions {
  margin-top: auto;
  padding-top: 1.5rem;
}

.ql-actions .btn-pill { width: 100%; justify-content: center; }

.ql-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 3;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(242, 237, 228, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  font-size: 1.1rem;
  color: var(--ink);
  transition: transform 0.4s var(--ease-spring), background-color 0.4s var(--ease-spring);
}

.ql-close:hover { transform: rotate(90deg); background: var(--cream); }

.ql-close:focus-visible {
  outline: 2px solid var(--camel);
  outline-offset: 2px;
}

body.ql-locked { overflow: hidden; }

/* ============================================================
   ARCHIVE VIEWER — full-screen look, built by home.js
   ============================================================ */
html.lb-locked { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--cream-on-dark);
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(201, 168, 124, 0.10), transparent 70%),
    radial-gradient(50% 40% at 50% 100%, rgba(138, 109, 75, 0.12), transparent 70%),
    var(--ink);
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "top  top   top"
    "prev stage next"
    ".    views .";
  opacity: 0;
  transition: opacity 0.4s var(--ease-spring);
}

.lightbox:not([open]) { display: none; }
.lightbox.is-open { opacity: 1; }
.lightbox::backdrop { background: transparent; }

.lb-top {
  grid-area: top;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1rem var(--gutter) 0.5rem;
}

.lb-count {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
}

.lb-count em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.15rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--camel);
  margin-left: 0.6rem;
}

.lb-cap {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.lb-cap span {
  display: block;
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-on-dark);
  margin-top: 0.2rem;
}

.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--hairline-dark);
  color: var(--cream-on-dark);
  font-size: 1.1rem;
  line-height: 1;
  transition: background-color 0.35s var(--ease-spring), border-color 0.35s var(--ease-spring),
    transform 0.35s var(--ease-spring);
}

.lb-btn:hover { background-color: rgba(239, 232, 219, 0.1); border-color: rgba(239, 232, 219, 0.35); }
.lb-btn:active { transform: scale(0.94); }

.lb-btn:focus-visible {
  outline: 2px solid var(--camel);
  outline-offset: 3px;
}

.lb-close { justify-self: end; }
.lb-close:hover { transform: rotate(90deg); }
.lb-close:active { transform: rotate(90deg) scale(0.94); }

.lb-prev { grid-area: prev; justify-self: center; align-self: center; }
.lb-next { grid-area: next; justify-self: center; align-self: center; }
.lb-prev:hover .lb-arr { transform: translateX(-3px); }
.lb-next:hover .lb-arr { transform: translateX(3px); }
.lb-arr { transition: transform 0.35s var(--ease-spring); }

.lb-stage {
  grid-area: stage;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 0.5rem 0;
  touch-action: pan-y;
}

/* The whole photo, never cropped: contain within the stage. */
.lb-img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  transition: opacity 0.45s var(--ease-spring), transform 0.6s var(--ease-out-long);
}

.lightbox:not(.is-open) .lb-img { transform: scale(0.97); }
.lb-img.is-leaving { opacity: 0; transition-duration: 0.18s; }
.lb-img.from-next { opacity: 0; transform: translateX(28px); transition: none; }
.lb-img.from-prev { opacity: 0; transform: translateX(-28px); transition: none; }

.lb-views {
  grid-area: views;
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  min-height: 4.5rem;
  padding: 0.75rem 0 1.1rem;
}

.lb-thumb {
  width: 2.75rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  opacity: 0.5;
  outline: 1px solid transparent;
  outline-offset: 3px;
  transition: opacity 0.35s var(--ease-spring), outline-color 0.35s var(--ease-spring),
    transform 0.35s var(--ease-spring);
}

.lb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lb-thumb:hover { opacity: 0.85; }
.lb-thumb:active { transform: scale(0.95); }
.lb-thumb[aria-pressed="true"] { opacity: 1; outline-color: var(--camel); }

.lb-thumb:focus-visible {
  opacity: 1;
  outline: 2px solid var(--camel);
}

@media (max-width: 700px) {
  /* Arrows move under the photo, either side of the angle thumbnails. */
  .lightbox {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "top   top   top"
      "stage stage stage"
      "prev  views next";
  }

  .lb-top { grid-template-columns: 1fr auto; row-gap: 0.4rem; }
  .lb-close { grid-column: 2; grid-row: 1; }
  .lb-cap { grid-column: 1 / -1; grid-row: 2; text-align: left; font-size: 0.95rem; }

  .lb-stage { padding: 0.25rem 0.75rem; }
  .lb-prev { margin-left: var(--gutter); }
  .lb-next { margin-right: var(--gutter); }
  .lb-btn { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .lightbox,
  .lb-img,
  .lb-img.is-leaving { transition: none; }
  .lightbox:not(.is-open) .lb-img,
  .lb-img.from-next,
  .lb-img.from-prev { transform: none; }
}

/* trigger button on product cards */
.q-look {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translate(-50%, 12px);
  z-index: 2;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  background: rgba(242, 237, 228, 0.72);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(242, 237, 228, 0.5);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.45s var(--ease-spring), transform 0.45s var(--ease-spring), background-color 0.3s ease;
  white-space: nowrap;
}

.product-card:hover .q-look,
.product-card:focus-within .q-look {
  opacity: 1;
  transform: translate(-50%, 0);
}

.q-look:hover { background: var(--cream); }

.q-look:focus-visible {
  outline: 2px solid var(--camel);
  outline-offset: 3px;
  opacity: 1;
}

/* touch devices have no hover — keep the pill visible */
@media (hover: none) {
  .q-look,
  .product-card .quick-pill { opacity: 1; transform: translate(-50%, 0); }

  /* Expand the hit area to 44px without altering the rendered link */
  .link-arrow::before {
    content: '';
    position: absolute;
    inset: -9px -4px;
  }
}

/* ============================================================
   TESTIMONIALS / CLIENT STORIES
   ============================================================ */
.stories {
  padding: var(--s-7) 0;
  background: var(--cream);
}

.stories-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: var(--s-6);
}

.stories-head h2 {
  font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  margin-top: 1rem;
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.story-card {
  background: var(--cream-deep);
  border: 1px solid var(--hairline);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  display: flex;
  flex-direction: column;
}

.story-card .quote-mark {
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 0.7;
  color: var(--camel);
  margin-bottom: 1rem;
}

.story-card blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 1.15rem;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 1.75rem;
}

.story-card .client {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: auto;
}

.story-card .client-photo {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  overflow: hidden;
  flex: none;
  background: var(--sand);
}

.story-card .client-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-card .client-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.story-card .client-meta {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* ============================================================
   MEASUREMENT / REMOTE-FIT GUIDE
   ============================================================ */
.remotefit {
  padding: var(--s-7) 0;
  background: var(--cream-deep);
  border-top: 1px solid var(--hairline);
}

.remotefit-head {
  max-width: 40rem;
  margin-bottom: var(--s-6);
}

.remotefit-head h2 {
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  margin: 1rem 0 1rem;
}

.remotefit-head p {
  color: var(--umber);
  font-size: 0.975rem;
}

.remotefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  border-top: 1px solid var(--hairline);
  padding-top: var(--s-5);
}

.rf-step .rf-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 2.2rem;
  color: var(--camel);
  display: block;
  margin-bottom: 0.85rem;
  line-height: 1;
}

.rf-step h3 {
  font-size: 1.25rem;
  font-weight: 450;
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.rf-step p {
  font-size: 0.9rem;
  color: var(--umber);
  line-height: 1.7;
}

/* The measuring guide: the six measurements drawn where they are actually
   taken. A client on a video call with a tape in her hand needs to see where
   it goes, which a row of word-pills could never tell her. */
.rf-guide {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--hairline);
}

.rf-figure { margin: 0; }

.rf-figure svg {
  display: block;
  width: 100%;
  max-width: 21rem;
  height: auto;
  margin-inline: auto;
}

.rf-form {
  fill: none;
  stroke: var(--umber);
  stroke-width: 1.4;
  stroke-linecap: round;
}

/* The tape lines read as guides, not as part of the garment. */
.rf-rule {
  fill: none;
  stroke: var(--camel);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.rf-cap {
  fill: none;
  stroke: var(--camel);
  stroke-width: 1;
  stroke-linecap: round;
}

.rf-disc { fill: var(--camel); }

.rf-discnum {
  fill: var(--cream);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-anchor: middle;
}

.rf-measures {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.05rem;
}

.rf-measures li {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-bottom: 1.05rem;
  border-bottom: 1px solid var(--hairline);
}

.rf-measures li:last-child { padding-bottom: 0; border-bottom: 0; }

.rf-mnum {
  flex: none;
  width: 2rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--camel);
}

.rf-measures h3 {
  margin-bottom: 0.3rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}

.rf-measures p {
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--umber);
}

.rf-guided {
  margin-top: var(--s-4);
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--taupe);
}

@media (max-width: 900px) {
  /* The drawing stops earning its column and becomes a plate above the list. */
  .rf-guide { grid-template-columns: 1fr; }
  .rf-figure svg { max-width: 15rem; }
}

@media (max-width: 900px) {
  /* Stacked single column. The grid needs explicit rows: with implicit `auto`
     rows .ql-body sizes to its content, so its own overflow-y never engages and
     the panel's max-height silently clips the enquire CTA off the bottom with
     no way to reach it. `minmax(0, 1fr)` is required — a bare `1fr` keeps an
     auto minimum and overflows just the same. */
  .ql-panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    max-height: 88vh;
    max-height: 88dvh; /* dvh: the panel must fit under mobile browser chrome */
  }

  /* The panel itself never scrolls, so .ql-close stays pinned while the
     details scroll beneath it.
     grid-template-rows is required: the implicit row sizes to the images'
     intrinsic height, which leaves `height: 100%` on them circular. They then
     render at their aspect-ratio height, overflow the capped .ql-media, and
     paint over the top of the details column. Pinning the row to 100% lets
     object-fit crop instead; overflow guards the 1px rounding case. */
  .ql-media {
    min-height: 0;
    height: 240px;
    height: clamp(180px, 32dvh, 300px);
    grid-template-rows: 100%;
    overflow: hidden;
  }

  .ql-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .stories-grid { grid-template-columns: 1fr; }
  .stories-head { flex-direction: column; align-items: flex-start; }

  .remotefit-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ============================================================
   MOBILE HARDENING
   Safe-area insets for notched devices, plus touch-target minimums.
   The target rules are scoped to coarse pointers: applying them everywhere
   would loosen the desktop composition for no benefit.
   ============================================================ */

/* ---- Notch and home-indicator safe areas ----
   .header and .cur-dock are position:fixed, so without an explicit inset they
   render under the status bar and the home indicator. .container needs the
   left/right insets for landscape, where the notch eats into the gutter. */
@supports (padding: max(0px)) {
  .header .nav {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
    padding-top: max(1.4rem, env(safe-area-inset-top));
  }

  .header.scrolled .nav { padding-top: max(0.5rem, env(safe-area-inset-top)); }

  .container {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }

  .cur-dock { bottom: max(1.6rem, calc(env(safe-area-inset-bottom) + 0.6rem)); }

  @media (max-width: 900px) {
    .cur-dock { bottom: max(1.1rem, calc(env(safe-area-inset-bottom) + 0.6rem)); }
  }
}

/* ---- Touch targets ---- */
@media (hover: none) and (pointer: coarse) {
  .nav-logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .btn-pill { min-height: 44px; justify-content: center; }

  .cur-opt {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 0.55rem padding leaves these at 40px — under the comfortable minimum for
     a thumb, and these six fields are the whole enquiry funnel. */
  .field input,
  .field textarea {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }

  .size-pill { min-height: 44px; }

  .ql-close { width: 44px; height: 44px; }

  .q-look { min-height: 44px; }

  .index-tab { min-height: 44px; }

  /* Small tracked caps in the menu sheet; the type is 11px, so the row has
     to carry the target. */
  .nav-rail a { min-height: 44px; display: inline-flex; align-items: center; }

  /* Both sit in a dense column of small caps, so the row carries the target.
     The units switch keeps its pill shape by growing square. */
  .sg-toggle { min-height: 44px; display: inline-flex; align-items: center; }
  .sg-unit { min-height: 36px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* ============ REDUCED MOTION ============ */
/* ============ SCROLL-LINKED MOTION ============
   home.js puts .motion on <html> when motion is allowed, then gives each
   moving part its scroll progress as --scrub: 0 as it enters at the foot of
   the screen, 1 as it leaves at the top, eased toward the true value every
   frame so the motion stays soft even when a mouse wheel scrolls in steps.
   Everything here moves with transform or opacity only. Without .motion (no
   JavaScript, or reduced motion) every part rests where the layout puts it. */

/* A gold reading line along the foot of the header */
.scroll-line {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--taupe), var(--camel));
  transform-origin: 0 50%;
  transform: scaleX(var(--scrub, 0));
  pointer-events: none;
}

/* Hero: the portrait drifts a few pixels against the pointer (desktop). The
   1.04 is the overscan the drift needs so no edge can swing into view; it
   multiplies the admin's zoom rather than replacing it. */
.motion .hero.is-tilting .hero-tilt img {
  scale: calc(var(--hero-zoom, 1) * 1.04);
  translate: calc(var(--mx, 0) * -7px) calc(var(--my, 0) * -5px);
}

/* Collections: each main photo unfolds from its outer top corner, 85% to
   full size by the time it is well on screen, and drifts a little slower
   than the page; the inset drifts faster, so the two part in depth. */
.motion .cr-media > .img-frame:not(.cr-inset) {
  transform-origin: 0 0;
  scale: calc(0.85 + 0.15 * min(1, var(--scrub, 1) * 2.5));
  translate: 0 calc((var(--scrub, 0.5) - 0.5) * var(--drift-main, 32px));
}

.motion .collection-row--flip .cr-media > .img-frame:not(.cr-inset) { transform-origin: 100% 0; }

/* the inset rests a third of the way up the screen, not halfway, so it dips
   only a little on the way in, toward the words below it, and rises more on
   the way out */
.motion .cr-inset {
  translate: 0 calc((0.35 - var(--scrub, 0.35)) * var(--drift-inset, 72px));
}

/* One column: each photo's text follows it closely, so the drift is gentler
   and the inset can never reach the words beneath it. */
@media (max-width: 900px) {
  .motion .cr-media { --drift-main: 12px; --drift-inset: 24px; }
}

/* Statement, the signature moment: the words start dim and brighten one
   after another, in reading order, as the band crosses the screen */
.motion .statement-text .sw {
  opacity: calc(0.14 + 0.86 * clamp(0, (var(--scrub, 1) - 0.22 - 0.26 * var(--i, 0) / var(--n, 1)) * 12, 1));
}

/* Archive: a round "View" label follows the pointer over the looks */
.cursor-view {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 4.25rem;
  height: 4.25rem;
  margin: -2.125rem 0 0 -2.125rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* A lens, not a sticker. The fill is a radial that only gathers under the
     word and falls to almost nothing at the rim, so the photograph reads
     straight through the edge of the disc. The brightness lift in the filter
     is what keeps the ink legible over a dark look -- a flat sheer fill went
     unreadable on the deep reds in the Aso Ebi set. */
  background: radial-gradient(
    circle at 50% 44%,
    rgba(250, 247, 241, 0.46),
    rgba(250, 247, 241, 0.16) 62%,
    rgba(250, 247, 241, 0.06)
  );
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) brightness(1.3);
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat)) brightness(1.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  /* The warm page shadow disappears on a photograph, so the disc gets its own
     edge: a lit top rim and a short dark drop to lift it off the image. */
  box-shadow:
    var(--g-top),
    0 10px 26px -12px rgba(26, 21, 18, 0.45);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  /* The disc is sheer on purpose, so on a near-black look the field under the
     word fell to 3.07:1 -- under AA for caps this small. Filling the glass in
     would buy contrast at the cost of the transparency the lens is for, so
     the word carries its own light instead: three tight opaque rings pad the
     glyphs, two wide faint ones fade that pad into the disc. Over a pale
     photograph it is cream on cream and costs nothing. Measured across the
     archive: 5.25:1 on the darkest patch, 12.75:1 at mid, 16.46:1 lightest. */
  text-shadow:
    0 0 3px rgba(250, 247, 241, 1),
    0 0 7px rgba(250, 247, 241, 1),
    0 0 13px rgba(250, 247, 241, 1),
    0 0 24px rgba(250, 247, 241, 0.7),
    0 0 40px rgba(250, 247, 241, 0.4);
  pointer-events: none;
  opacity: 0;
  scale: 0.5;
  transition: opacity 0.35s var(--ease-spring), scale 0.55s var(--ease-spring);
}

.cursor-view.is-on { opacity: 1; scale: 1; }
.cursor-view.is-down { scale: 0.9; }

/* the round label stands in for the pointer and the pill while it shows */
.cursor-on .g-open { cursor: none; }
.cursor-on .g-item:hover .g-view { opacity: 0; }

/* Footer: the wordmark's letters rise in, as the hero's do */
.motion .footer-logo .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 1.1s var(--ease-out-long), transform 1.1s var(--ease-out-long);
  transition-delay: calc(var(--i) * 80ms);
}

.motion .footer-logo.is-in .char {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .reveal { opacity: 1; transform: none; }
  .bleed-word .char { opacity: 1; transform: none; }

  /* preloader must still clear itself even without animation */
  .preloader { animation: none; display: none; }
  .preloader-mark span { transform: none; }
  body.leaving main,
  body.leaving .header,
  body.leaving .footer { opacity: 1; }
}

/* ============================================================
   THE SPREAD
   The house style for the body of the site: a magazine rather than
   a shop. Each section opens with an oversized echo of its own
   title; cards sit on raised paper and lift; the dark bands carry
   frosted panels; the nav detaches into a floating pill once the
   page scrolls under it.

   These are deliberate overrides of the components defined above,
   kept together so the direction can be read -- and reversed -- in
   one place.
   ============================================================ */

/* ---- Section openers ---- */

.collections-head,
.essentials-head,
.archive-head,
.process-head,
.stories-head,
.consult-aside {
  position: relative;
  isolation: isolate;
}

/* The title again at display size, pushed out past the gutter and clipped by
   the edge of the screen. data-echo is set by home.js. */
[data-echo]::before {
  content: attr(data-echo);
  position: absolute;
  left: -0.06em;
  bottom: calc(100% - 0.72em);
  z-index: -1;
  font-family: var(--font-display);
  font-size: clamp(4rem, 11vw, 11rem);
  font-weight: 380;
  font-variation-settings: 'opsz' 144;
  line-height: 0.78;
  letter-spacing: -0.045em;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0.07;
  pointer-events: none;
  user-select: none;
}

.on-dark [data-echo]::before { color: var(--cream-on-dark); opacity: 0.1; }

/* The echo rises above its heading, so each band needs headroom for it or it
   runs up into the section before. */
.collections,
.essentials,
.archive,
.process,
.stories { padding-top: calc(var(--s-7) + clamp(2rem, 5vw, 5rem)); }

.collections-head h2,
.essentials-head h2,
.archive-head h2,
.process-head h2,
.stories-head h2 {
  font-size: clamp(2.6rem, 5.5vw, 5rem);
  letter-spacing: -0.035em;
}

/* ---- Nav: the floating pill ---- */

.header::before { display: none; }

.header .nav {
  border-radius: 999px;
  border: 1px solid transparent;
  transition: padding 0.5s var(--ease-spring),
    background-color 0.5s var(--ease-spring),
    box-shadow 0.5s var(--ease-spring),
    border-color 0.5s var(--ease-spring),
    margin 0.5s var(--ease-spring);
}

.header.scrolled .nav {
  margin: 0.7rem var(--gutter);
  padding-left: 1.6rem;
  padding-right: 0.8rem;
  background: var(--g-fill-deep);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: var(--e-2), var(--g-top);
}

/* ---- Surfaces ---- */

.img-frame,
.page-hero-media > .img-frame { border-radius: var(--r); }

.product-card .img-frame,
.archive-grid .g-item .img-frame,
.offer-card .img-frame {
  box-shadow: var(--e-1);
  transition: box-shadow 0.5s var(--ease-spring), transform 0.5s var(--ease-spring);
}

.product-card:hover .img-frame,
.archive-grid .g-item:hover .img-frame,
.offer-card:hover .img-frame {
  box-shadow: var(--e-3);
  transform: translateY(var(--lift));
}

.cr-media .img-frame { box-shadow: var(--e-2); }
.cr-inset { border-radius: var(--r); box-shadow: var(--e-3); }
.page-hero-media > .img-frame { box-shadow: var(--e-3); }

.page-hero-media > .page-hero-inset {
  border: none;
  border-radius: var(--r-sm);
  box-shadow: var(--e-3);
}

/* the hero's photograph is the page, not a plate on it */
.hero .img-frame { border-radius: 0; }

/* The band under it is one continuous picture cut into thirds. Rounding each
   third left a notch at every seam and at the top corners, where the dark
   hero showed through between the photographs. */
.bleed-strip .img-frame { border-radius: 0; }

/* ---- Collections ---- */

/* The copy floats on a frosted plate over the photograph's edge, capped so it
   reads as a card rather than as a second column of background. */
.cr-body {
  max-width: 27rem;
  padding: 1.5rem 1.75rem;
  border-radius: var(--r);
  background: var(--g-fill);
  border: var(--g-line);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  box-shadow: var(--e-2), var(--g-top);
}

.cr-body h3 {
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  letter-spacing: -0.03em;
}

/* ---- Essentials ---- */

.essentials {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(255, 255, 255, 0.6), transparent 72%),
    var(--cream-deep);
}

.product-card {
  padding: 0.75rem 0.75rem 1.4rem;
  border-radius: var(--r);
  background: rgba(250, 247, 241, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--e-1);
  transition: box-shadow 0.5s var(--ease-spring), transform 0.5s var(--ease-spring);
}

.product-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--e-3);
}

/* the card is doing the lifting now, so the photo inside it stays put */
.product-card:hover .img-frame {
  transform: none;
  box-shadow: var(--e-1);
}

.product-card h3,
.product-card .price,
.product-card .sold-tag,
.product-card .card-meta { padding-left: 0.3rem; }

.product-card .quick-pill {
  background: var(--g-fill-deep);
  border: var(--g-line);
  box-shadow: var(--e-1), var(--g-top);
}

/* ---- Statement ---- */

.statement {
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(201, 168, 124, 0.16), transparent 70%),
    var(--ink);
}

.state-img { box-shadow: var(--e-3); }

/* ---- Archive ---- */

.index-tabs {
  padding: 0.7rem 1.75rem 0.4rem;   /* side room so the first and last tab clear the curve */
  border-radius: 999px;
  background: var(--g-fill);
  border: var(--g-line);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  box-shadow: var(--e-1), var(--g-top);
}

/* ---- Process ---- */

.steps { border-top: none; }

.step {
  padding: 1.6rem 1.5rem 1.9rem;
  border-radius: var(--r);
  background: var(--g-fill-dark);
  border: var(--g-line-dark);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  box-shadow: var(--e-1), var(--g-top-dark);
  transition: background-color 0.5s var(--ease-spring), transform 0.5s var(--ease-spring);
}

.step:hover {
  background: rgba(239, 232, 219, 0.14);
  transform: translateY(var(--lift));
}

/* ---- Client stories ---- */

.story-card {
  border-radius: var(--r);
  background: var(--g-fill-deep);
  border: var(--g-line);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  box-shadow: var(--e-1), var(--g-top);
  transition: box-shadow 0.5s var(--ease-spring), transform 0.5s var(--ease-spring);
}

.story-card:hover {
  box-shadow: var(--e-2);
  transform: translateY(var(--lift));
}

.story-card .client-photo {
  box-shadow: var(--e-1), 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* ---- CTA ---- */

.cta-band::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 168, 124, 0.5), transparent);
}

/* ---- Inner page heroes ---- */

/* The portrait breaks the container and runs to the right edge of the screen;
   the title overlaps its left side. */
.page-hero-inner {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 3vw, 3rem);
}

.page-hero-media {
  width: min(100%, calc(min(62vh, 38rem) * 0.8 + var(--gutter)));
  margin-right: calc(var(--gutter) * -1);
}

.page-hero-media > .img-frame {
  aspect-ratio: 4 / 5;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.page-hero h1 {
  font-size: clamp(3rem, 7.6vw, 7.5rem);
  letter-spacing: -0.04em;
  position: relative;
  z-index: 2;
}

.page-hero-index ol { border-radius: var(--r); overflow: hidden; }

/* ---- About ---- */

.story-copy .pull-quote {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  letter-spacing: -0.025em;
}

.founder-card {
  border-radius: var(--r);
  background: var(--g-fill-deep);
  border: var(--g-line);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  box-shadow: var(--e-2), var(--g-top);
}

.contact-strip {
  background:
    radial-gradient(70% 90% at 20% 0%, rgba(201, 168, 124, 0.18), transparent 70%),
    var(--cream-deep);
}

/* ---- Consultation ---- */

.consult-form-panel {
  border-radius: var(--r);
  background: var(--g-fill-deep);
  border: var(--g-line);
  -webkit-backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  backdrop-filter: blur(var(--g-blur)) saturate(var(--g-sat));
  box-shadow: var(--e-3), var(--g-top);
}

.consult-form-panel > h3 {
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  letter-spacing: -0.03em;
}

.field input,
.field textarea { border-radius: var(--r-sm); }

.offer-card {
  padding: 0.6rem 0.6rem 1.1rem;
  border-radius: var(--r);
  background: rgba(250, 247, 241, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--e-1);
  transition: box-shadow 0.5s var(--ease-spring), transform 0.5s var(--ease-spring);
}

.offer-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--e-3);
}

.offer-card:hover .img-frame { transform: none; box-shadow: var(--e-1); }

.offer-card h3,
.offer-card .card-meta { padding-left: 0.3rem; }

.remotefit {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255, 255, 255, 0.5), transparent 72%),
    var(--cream-deep);
}

.cur-dock { box-shadow: var(--e-2), var(--g-top); }

/* ---- Shop ---- */

.shop-grid-xl .product-card {
  padding: 0.75rem 0.75rem 1.4rem;
  border-radius: var(--r);
  background: rgba(250, 247, 241, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: var(--e-1);
}

.shop-grid-xl .product-card:hover {
  transform: translateY(var(--lift));
  box-shadow: var(--e-3);
}

/* ---- Narrow ---- */

@media (max-width: 900px) {
  /* The echo is a desktop flourish: at phone width it is wider than the
     screen and clips to a meaningless fragment. */
  [data-echo]::before { display: none; }

  .collections,
  .essentials,
  .archive,
  .process,
  .stories { padding-top: var(--s-7); }

  /* The two-column hero above is unconditional, so it would otherwise beat
     the stacking rule in the subpage media query and leave the copy in a
     163px column with the portrait pressed against it. */
  .page-hero-inner { grid-template-columns: 1fr; }

  .page-hero-media {
    margin-right: 0;
    width: min(72%, 24rem);
  }

  .page-hero-media > .img-frame {
    border-top-right-radius: var(--r);
    border-bottom-right-radius: var(--r);
  }

  .cr-body { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .product-card:hover,
  .product-card:hover .img-frame,
  .offer-card:hover,
  .offer-card:hover .img-frame,
  .story-card:hover,
  .step:hover,
  .archive-grid .g-item:hover .img-frame,
  .shop-grid-xl .product-card:hover { transform: none; }
}

/* ============================================================
   THE ESSENTIALS
   The one page that opens as an index rather than as a spread: the
   write-up carries the page on its own, and the pieces below it are
   laid out as a catalogue instead of an editorial scatter.
   The portrait and its inset are untouched -- only the type beside
   them changes, and only on this page.
   ============================================================ */

/* ---- The write-up ---- */

/* The copy rises to the top of the column and the title is set large
   enough to be the page, with a ghost of itself behind it. */
.page-hero--index .page-hero-copy {
  position: relative;
  isolation: isolate;
  align-self: start;
}

.page-hero--index .page-hero-copy .eyebrow {
  font-size: 0.5625rem;
  letter-spacing: 0.34em;
  color: var(--taupe);
  margin-bottom: 0;
}

.page-hero--index h1 {
  margin-top: 1.5rem;
  font-size: clamp(3rem, 9vw, 9.5rem);
  font-weight: 350;
  letter-spacing: -0.04em;
  line-height: 0.92;
}

.page-hero--index h1 em { color: var(--taupe); }

/* A title of two long lines -- About's "Born in Lagos, worn worldwide." --
   oversets its column at the size above and crosses onto the portrait, so it
   steps down. Still far larger and tighter than it was; just not Essentials
   large, which a fourteen-character title can afford and a thirty cannot. */
.page-hero--long h1 { font-size: clamp(2.6rem, 7.4vw, 7.8rem); }

/* A rule across the column, then the sentence under it in a narrow
   measure -- the catalogue's caption, not a paragraph of body copy. */
.page-hero--index .page-hero-meta {
  max-width: 32ch;
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
  font-size: 0.875rem;
}

/* The write-up is short and sits at the top of its column, so the portrait
   at full height left a long fall of empty cream under the paragraph. It
   comes down to about three quarters, which also lets the type lead, as this
   treatment intends. The 4:5 frame is kept, so nothing is cropped away. */
.page-hero--index .page-hero-media {
  width: min(100%, calc(min(50vh, 27rem) * 0.8 + var(--gutter)));
}

/* ---- The product list ---- */

/* Three across with the gutters almost closed, so the photographs read
   as one plate of cloth rather than as a row of cards. Nothing is
   raised: the scatter, the paper, the radius and the lift all go. */
.shop-grid-xl {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  row-gap: clamp(2.25rem, 4vw, 3.25rem);
}

.shop-grid-xl .product-card,
.shop-grid-xl .product-card:nth-child(4n + 1),
.shop-grid-xl .product-card:nth-child(4n + 2),
.shop-grid-xl .product-card:nth-child(4n + 3),
.shop-grid-xl .product-card:nth-child(4n + 4) {
  grid-column: auto;
  width: 100%;
  align-self: start;
  justify-self: stretch;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.shop-grid-xl .product-card .img-frame,
.shop-grid-xl .product-card:nth-child(4n + 1) .img-frame,
.shop-grid-xl .product-card:nth-child(4n + 4) .img-frame {
  aspect-ratio: 4 / 5;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0.9rem;
}

.shop-grid-xl .product-card:hover,
.shop-grid-xl .product-card:hover .img-frame {
  transform: none;
  box-shadow: none;
}

.shop-grid-xl .product-card h3 {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
}

.shop-grid-xl .product-card .price {
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
}

.shop-grid-xl .product-card .quick-pill {
  border-radius: 0;
  background: rgba(250, 247, 241, 0.88);
  border: 1px solid var(--hairline);
  box-shadow: none;
  font-size: 0.5625rem;
  letter-spacing: 0.3em;
}

@media (max-width: 900px) {
  .shop-grid-xl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }
}

@media (max-width: 560px) {
  .shop-grid-xl { grid-template-columns: 1fr; }
}

/* Stacked, the portrait is no longer beside the copy and so has no gap to
   close; it keeps the width every other page gives it. This rule outranks
   the subpage media query above on specificity alone, so it has to be said
   again here. */
@media (max-width: 900px) {
  .page-hero--index .page-hero-media { width: min(72%, 24rem); }
}

/* Archive tab pill: one fixed height on tablet and phone. The 44px touch
   target on each tab and the extra top padding were stacking on the pill's own
   padding, so it grew past the 56px of the nav pill it sits under. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .index-tabs {
    box-sizing: border-box;
    align-items: center;
    height: 56px;
    padding-block: 0;
  }

  .index-tab { padding-top: 0; min-height: 44px; white-space: nowrap; }
}

@media (max-width: 560px) {
  .index-tabs {
    width: 100%;
    justify-content: space-between;
    gap: 0.75rem;
    padding-inline: 1.1rem;
  }

  .index-tab { letter-spacing: 0.14em; }
}