/* ===== Gaia Boutique: design system ===== */

:root {
  --white: #ffffff;
  --black: #000000;
  /* The ground a garment photograph sits on. Her walls are limewash, not
     paper, so a warm off-white reads as matting rather than as a gap. */
  --ground: #f6f4f0;
  --max-width: 1440px;
  --pad-mobile: 16px;
  --pad-desktop: 40px;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Jost', Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.4,0,.2,1);
  --dur-fast: .15s;
  --dur: .3s;
  --dur-slow: .8s;
}

* { box-sizing: border-box; }

/* ===== page changes: the browser's own crossfade =====
   Replaces the old white "GAIA" curtain, which held every click for ~0.4s
   and slid <body>, making the header and floating buttons jump. The header
   is its own layer so it stays perfectly still while the page fades.
   Browsers without support (Firefox today) simply change page instantly. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .2s; animation-timing-function: var(--ease); }
::view-transition-group(site-header) { animation-duration: 0s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

html {
  scroll-behavior: smooth;
  /* Root-level clip only. Do NOT put overflow-x on <body>: that turns body into the
     scroll container and silently breaks every position: sticky pin on this page
     (hero manifesto, statement, commission). */
  overflow-x: hidden;
}

body {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-serif);
  -webkit-font-smoothing: antialiased;
}

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

.skip-link {
  position: absolute;
  top: -60px;
  left: 8px;
  z-index: 200;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px 20px;
  border-radius: 4px;
  transition: top .2s var(--ease);
}
.skip-link:focus {
  top: 8px;
}

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

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

button {
  font-family: var(--font-sans);
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

.label,
.footer-heading,
.oo-label + .oo-sub {
  font-family: var(--font-sans);
}

/* generic label style */
.label,
.meta-code,
.meta-price,
.nav-link,
.footer-heading,
footer a,
.explore,
.oo-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.heading,
.hero-label,
.gallery-tag,
.footer-bottom span {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.heading {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 24px;
}

p {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  margin: 0 0 16px;
}

/* ===== buttons ===== */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 12px 36px;
  border-radius: 999px;
  white-space: nowrap;
}

.btn-black {
  background: var(--black);
  color: var(--white);
  border: 1px solid var(--black);
  transition: background var(--dur) var(--ease);
}
.btn-black:hover {
  background: rgba(0,0,0,.8);
}

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--white);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-outline:hover {
  border-color: rgba(255,255,255,.8);
  color: rgba(255,255,255,.8);
}

/* ===== reveal on scroll ===== */
.reveal {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.in {
  opacity: 1;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal-left.in {
  opacity: 1;
  transform: none;
}

.reveal-scale {
  opacity: 0;
  transform: scale(.95);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal-scale.in {
  opacity: 1;
  transform: none;
}

/* ===== header ===== */
.site-header {
  position: sticky;
  top: 0;
  height: 70px;
  z-index: 50;
  /* Solid, so the nav never has to compete with a photograph passing under it.
     Over sections marked data-theme="dark" it goes transparent again, below,
     which is what keeps the hero floating. Same treatment the mega menu
     already uses when it opens. */
  background: var(--white);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.08);
  color: var(--black);
  transition: color .3s ease, background .3s ease, box-shadow .3s ease;
}

/* Over a dark section the photograph is the background and white text reads
   cleanly on it, so the bar gets out of the way entirely. The hero asks for
   the same, through data-header-float, because it is pulled up behind the bar
   on purpose. */
.site-header.is-dark,
.site-header.is-float {
  background: transparent;
  box-shadow: none;
}

.site-header.is-dark,
.site-header.is-dark a,
.site-header.is-dark button,
.site-header.is-dark .logo,
.site-header.is-dark .nav-link {
  color: var(--white);
}
.site-header.is-dark svg {
  color: var(--white);
  fill: currentColor;
}
.site-header.is-dark svg[stroke] { fill: none; stroke: currentColor; }
.site-header { transition: color .3s ease; }
.site-header a, .site-header button { transition: color .3s ease; }

.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  height: 70px;
  padding: 0 var(--pad-desktop);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-left,
.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex: 1;
}

.header-right {
  justify-content: flex-end;
}

.nav-link {
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.nav-oneofone em {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: normal;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
}

.caret {
  font-size: 13px;
}

.wordmark {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* One line in the header. The hero and the page curtain still stack their
     letters, which is what the column direction above is for. */
  line-height: 0.9;
  font-family: var(--font-serif);
  font-size: 27px;
  letter-spacing: 0.14em;
  height: 44px;
  justify-content: center;
  color: inherit;
}

.wordmark-div {
  font-size: 13px;
  opacity: 0.6;
  margin: 2px 0;
}

[hidden] {
  display: none !important;
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 24px;
}
.hamburger span {
  display: block;
  height: 1px;
  background: currentColor;
  width: 100%;
}

.mobile-menu {
  display: none;
  flex-direction: column;
  background: var(--white);
  color: var(--black);
  padding: 16px;
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
}
.mobile-menu.open {
  display: flex;
}
.mobile-menu a {
  font-family: var(--font-sans);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 14px 0;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

/* ===== mega menu ===== */
.site-header.menu-open {
  background: var(--white);
  color: var(--black);
}
.mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 505px;
  background: var(--white);
  color: var(--black);
  z-index: 49;
  transform-origin: top;
  transform: scaleY(.98);
  opacity: 0;
  pointer-events: none;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.mega-menu.open {
  transform: scaleY(1);
  opacity: 1;
  pointer-events: auto;
}
/* A closed dropdown keeps its links out of the Tab order. */
.mega-menu:not(.open) {
  visibility: hidden;
  transition: transform .25s var(--ease), opacity .25s var(--ease), visibility 0s linear .25s;
}
.mega-menu-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  height: 100%;
  padding: 40px;
  display: grid;
  grid-template-columns: 180px 260px 1fr;
  gap: 64px;
  align-items: start;
  overflow: hidden;
}
.mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mega-list a {
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color .2s var(--ease);
}
.mega-list a:hover {
  color: #e18d5f;
}
.mega-list a.is-active {
  color: #e18d5f;
}
.mega-copy h3 {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 16px;
}
.mega-copy p {
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.5;
  margin: 0;
  max-width: 260px;
}
.mega-imgs {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}
.mega-fig {
  position: relative;
  width: 238px;
  max-width: 45%;
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  background: #eee;
}
.mega-fig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mega-img-b {
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.mega-fig.is-swapping .mega-img-b {
  opacity: 1;
}

/* ===== search / currency / bag ===== */
.search-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 160px;
  background: var(--white);
  color: var(--black);
  z-index: 49;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .25s var(--ease), opacity .25s var(--ease);
}
.search-panel.open {
  max-height: 160px;
  opacity: 1;
}
.search-panel-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  height: 160px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}
.search-panel-inner input {
  font-family: var(--font-serif);
  font-size: 21px;
  border: none;
  border-bottom: 1px solid var(--black);
  background: transparent;
  padding: 8px 2px;
  outline: none;
  width: 100%;
  max-width: 480px;
}
.search-popular {
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: .6;
  margin: 0;
}

.currency-menu {
  position: absolute;
  top: 100%;
  right: 40px;
  background: var(--white);
  color: var(--black);
  box-shadow: 0 8px 24px rgba(0,0,0,.15);
  display: flex;
  flex-direction: column;
  min-width: 100px;
  z-index: 49;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.currency-menu.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.currency-menu button {
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-align: left;
  padding: 12px 16px;
}
.currency-menu button:hover {
  background: rgba(0,0,0,.05);
}

.bag-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 59;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s var(--ease);
}
.bag-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}
.bag-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
  max-width: 100%;
  background: var(--white);
  color: var(--black);
  z-index: 60;
  padding: 32px;
  transform: translateX(100%);
  transition: transform .3s var(--ease);
}
.bag-drawer:not(.open) {
  visibility: hidden;
  transition: transform .4s var(--ease), visibility 0s linear .4s;
}
.bag-drawer.open {
  transform: translateX(0);
}
.bag-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.bag-drawer-head h3 {
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0;
}
.bag-close {
  font-size: 17px;
}
.bag-drawer p {
  font-size: 19px;
}

/* ===== hero ===== */
.hero {
  position: relative;
  height: 200vh;
  margin-top: -70px; /* sit under the transparent sticky header, like the original */
  background: var(--black);
}

.hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  overflow: hidden;
}

.hero-half {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.hero-half:hover {
  cursor: default;
}

.hero-track {
  display: flex;
  height: 100%;
  will-change: transform;
  transition: transform var(--dur-slow) var(--ease);
}

.hero-slide {
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
}
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-wordmark {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  color: var(--white);
  mix-blend-mode: difference;
  height: 45vh;
  margin: auto 0;
  /* Four letters in the box that held two. */
  font-size: 11vh;
  line-height: 0.85;
  letter-spacing: 0;
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(100%) scale(.1);
  transition: opacity .9s ease-out .4s, transform .9s ease-out .4s;
}
body.is-loaded .hero-wordmark {
  opacity: 1;
  transform: none;
}

.hero-label {
  position: absolute;
  bottom: 40px;
  z-index: 3;
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--white);
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity .6s var(--ease) 1s, color var(--dur-fast) var(--ease);
}
body.is-loaded .hero-label {
  opacity: 1;
}
.hero-label-left { left: 40px; }
.hero-label-right { right: 40px; }

/* ===== experience toggle ===== */
.experience-toggle {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  background: var(--white);
  border-radius: 999px;
  padding: 0;
  display: flex;
  gap: 0;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  opacity: 0;
  transition: opacity .6s var(--ease) 1.3s;
}
body.is-loaded .experience-toggle {
  opacity: 1;
}

.toggle-mobile {
  display: none;
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  background: var(--black);
  color: var(--white);
  border-radius: 999px;
  padding: 12px 22px;
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  opacity: 0;
  transition: opacity .6s var(--ease) 1.3s;
}
body.is-loaded .toggle-mobile {
  opacity: 1;
}

.toggle-thumb {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background: var(--black);
  border-radius: 999px;
  transition: transform .4s var(--ease);
  z-index: 0;
}

.toggle-opt {
  position: relative;
  z-index: 1;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--black);
  white-space: nowrap;
  background: transparent;
  transition: color 0.25s ease;
}
.toggle-opt.active {
  background: transparent;
  color: var(--white);
}

/* ===== manifesto ===== */
.manifesto {
  position: absolute;
  top: 100vh;
  left: 0;
  right: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* The template ran this over dark editorial photographs. Her hero is her own
     work, printed and bright, so the scrim has to carry more weight for her
     words to stay readable on top of it. */
  /* Her words sit over whichever hero frame is showing, and some of those are
     very bright. The scrim carries the contrast, so it is heavier than it
     looks like it needs to be on the dark frames. */
  background: rgba(0,0,0,.75);
  opacity: var(--m-op, 0);
  /* Above the stacked mark and the hero labels (both z-index 3), so her words
     read clean rather than crossing the letters. The mark stays visible as a
     ghost under the scrim, which is where it belongs once the words arrive.
     Still below the Experience pill (40) and the header (50). */
  z-index: 4;
}
.manifesto-inner {
  max-width: 760px;
  width: calc(100% - 32px);
  background: transparent;
  text-align: center;
  transform: translateY(var(--m-shift, 400px));
}
.manifesto-inner p {
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 600;
  line-height: 1.45;
  margin: 0 0 22px;
}
.manifesto-inner p:last-child {
  margin-bottom: 0;
}

/* ===== generic section container ===== */
main > section {
  width: 100%;
}

/* ===== collectibles row ===== */
.collectibles {
  background: var(--white);
  padding: 40px 0 120px;
}
.collectibles-head {
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}
.collectibles-head h2 {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: normal;
  text-transform: none;
  margin: 0;
}
.all-collectibles {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.all-collectibles .underline-label {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.collectibles-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-left: 40px;
  padding-bottom: 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
}
.collectibles-track::-webkit-scrollbar {
  display: none;
}
.collectibles-track.dragging {
  cursor: grabbing;
}
.collectibles-track .card {
  flex: 0 0 calc((100% - 40px - 16px * 4.2) / 5.2);
  display: block;
}
.card-media {
  /* Her photographs are tall. A 2:3 frame holds them with the least matting,
     and contain guarantees nothing is ever cut off, on any product. */
  aspect-ratio: 2 / 3;
  overflow: hidden;
  position: relative;
  background: var(--ground);
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
}
.card-media img:last-child {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.card:hover .card-media img:last-child {
  opacity: 1;
}
/* Small mark for a piece published in the last 30 days. Top left, so it never
   meets the ONLY ONE mark at the bottom. Same quiet style as that one. */
.card-new {
  position: absolute;
  left: 10px;
  top: 10px;
  z-index: 2;
  padding: 4px 8px;
  background: rgba(255,255,255,.88);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--black);
  pointer-events: none;
}
.just-in {
  padding-bottom: 72px;
}
.just-in[hidden] {
  display: none;
}
.card-caption {
  padding-top: 8px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.card-sku {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.card-edition {
  display: block;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  margin-top: 2px;
}
.card-price {
  font-family: var(--font-sans);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ===== feature skirts ===== */
.feature-skirts {
  background: var(--black);
  color: var(--white);
  min-height: 100vh;
  display: flex;
  padding: 40px;
  gap: 24px;
}
.fs-left {
  width: 50%;
  height: calc(100vh - 80px);
  overflow: hidden;
}
.fs-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-right {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.fs-top {
  display: flex;
  gap: 16px;
  height: 55vh;
}
.fs-img {
  width: 45%;
  height: 100%;
  overflow: hidden;
}
.fs-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-bottom {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.fs-bottom .label {
  color: var(--white);
}
.fs-bottom p {
  color: var(--white);
  font-size: 19px;
  max-width: 480px;
}
.fs-bottom .btn {
  width: fit-content;
}

/* ===== A NEW WAVE ===== */
.new-wave {
  padding: 120px 40px;
  display: grid;
  grid-template-columns: 280px 1fr 200px;
  gap: 32px;
  align-items: center;
}
.nw-left p {
  font-size: 19px;
}
.nw-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.nw-mid img {
  width: 100%;
  max-width: 400px;
  height: auto;
  aspect-ratio: 600/800;
}
.nw-mid .caption {
  font-style: italic;
  font-size: 19px;
  margin-top: 12px;
  margin-bottom: 0;
}
.nw-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  height: 100%;
  gap: 10px;
  text-align: right;
}
.meta-code {
  font-size: 13px;
}
.meta-edition {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 19px;
  letter-spacing: normal;
  text-transform: none;
}
.meta-price {
  font-size: 13px;
}

/* ===== product rows ===== */
.product-row {
  padding: 80px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  position: relative;
}
.pr-image img {
  width: 100%;
  height: auto;
}
.pr-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.row-heading {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  font-size: 30px;
  letter-spacing: normal;
  text-transform: none;
  margin: 16px 0 12px;
}
.row-a .pr-text {
  padding-left: 20px;
}
.row-b {
  position: relative;
}
.pr-meta-b {
  position: absolute;
  right: 40px;
  bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  text-align: right;
}

/* ===== category strip (hover accordion) ===== */
.category-strip {
  padding: 60px 0;
  overflow: hidden;
}
.cat-strip {
  display: flex;
  gap: 0;
  padding: 0 40px;
}
.cat-card {
  flex: 0 0 calc(13.3333% - 5px);
  margin: 0 2.5px;
  transition: flex-basis .5s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.cat-card:hover {
  flex-basis: calc(33.3333% - 5px);
}
.cat-strip:not(:hover) .cat-card:nth-child(3) {
  flex-basis: calc(33.3333% - 5px);
}
.cat-card .cat-img {
  height: 54vh;
  overflow: hidden;
}
.cat-card .cat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.cat-caption {
  background: var(--white);
  padding: 14px 12px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.cat-card .cat-caption .label {
  margin-top: 0;
  font-size: 16px;
  letter-spacing: 0.1em;
  font-weight: 500;
  color: var(--black);
  opacity: 1;
  transform: none;
}
.cat-card .explore {
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  width: fit-content;
  opacity: 1;
}

@media (max-width: 767px) {
  .cat-strip {
    overflow-x: auto;
    padding: 0 16px;
    gap: 12px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .cat-strip::-webkit-scrollbar {
    display: none;
  }
  .cat-card,
  .cat-card:hover,
  .cat-strip:not(:hover) .cat-card:nth-child(3) {
    flex: 0 0 220px;
    margin: 0;
  }
  .cat-card .cat-img {
    height: 300px;
  }
  .cat-card .explore {
    opacity: 1;
  }
  .cat-card .cat-caption .label {
    font-size: 15px;
  }
}

/* ===== statement ===== */
.statement {
  position: relative;
  height: 200vh;
  background: var(--black);
}
.statement-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.statement-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  animation: kenburns 20s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.08); }
  to { transform: scale(1); }
}
.statement-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.4);
  opacity: var(--m-op, 0);
}
.statement-text {
  position: relative;
  z-index: 1;
  color: var(--white);
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.5;
  max-width: 672px;
  text-align: center;
  padding: 0 24px;
  transform: translateY(var(--m-shift, 400px));
  margin: 0;
}

/* ===== 1 of 1 ===== */
.one-of-one {
  padding: 100px 40px;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 48px;
}
.oo-label {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: rgba(0,0,0,.5);
  display: block;
  margin-bottom: 24px;
}
.oo-label em {
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: lowercase;
}
.oo-sub {
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.9;
  margin-bottom: 24px;
}
.oo-body {
  font-size: 19px;
  max-width: 420px;
}
.oo-left .btn {
  margin-top: 12px;
}
.oo-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 32px;
  cursor: grab;
  user-select: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.oo-row::-webkit-scrollbar {
  display: none;
}
.oo-row.dragging {
  cursor: grabbing;
}
.oo-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 calc(50vw / 3.33);
  color: inherit;
}
.oo-card img {
  width: 100%;
  aspect-ratio: 300/400;
  -webkit-user-drag: none;
  user-select: none;
}
.oo-card .label {
  margin-top: 4px;
  font-size: 13px;
}
.oo-card .price {
  font-family: var(--font-sans);
  font-size: 13px;
}
.sold-tag {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.sold-tag span {
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ===== commission ===== */
.commission {
  background: var(--black);
  color: var(--white);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.commission-left {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  padding: 40px;
}
.commission-left .heading {
  font-size: 28px;
  line-height: 1.3;
}
.commission-left p {
  color: var(--white);
  font-size: 19px;
  max-width: 460px;
}
.commission-right {
  display: flex;
  flex-direction: column;
}
.commission-right img {
  width: 100%;
  height: 100vh;
  object-fit: cover;
  margin-bottom: 40px;
}
.commission-right img:last-child {
  margin-bottom: 0;
}

/* ===== beyond ===== */
.beyond {
  background: var(--black);
  color: var(--white);
  padding: 120px 40px;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
}
.beyond-media {
  width: 110px;
  height: 156px;
  margin: 0 auto 32px;
  overflow: hidden;
}
.beyond-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenburns 20s ease-in-out infinite alternate;
}
.beyond p {
  color: var(--white);
}
.beyond .sub-line {
  font-family: var(--font-sans);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 24px;
}
.beyond .btn {
  margin-top: 12px;
}

/* ===== gifting ===== */
.gifting {
  padding: 120px 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.gift-left p {
  font-size: 19px;
  max-width: 440px;
}
.gift-right img {
  width: 100%;
  height: auto;
}

/* ===== gallery ===== */
.gallery {
  position: relative;
  height: 768px;
  overflow: hidden;
  background: var(--black);
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,.7) 100%);
  z-index: 1;
  pointer-events: none;
}
.gallery-wordmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-serif);
  color: var(--white);
  font-size: 7vw;
  letter-spacing: 0.04em;
  mix-blend-mode: difference;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}
.gallery-viewport {
  position: relative;
  z-index: 2;
  overflow: hidden;
  max-width: calc(5 * 160px + 4 * 5px);
  width: 100%;
  margin: 0 40px;
}
.gallery-track {
  display: flex;
  gap: 5px;
  transition: transform .5s var(--ease);
  cursor: grab;
  user-select: none;
}
.gallery-track.dragging {
  cursor: grabbing;
  transition: none;
}
.gallery-slide {
  flex: 0 0 160px;
  height: 220px;
}
.gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-overlay-top {
  position: absolute;
  top: 24px;
  left: 40px;
  display: flex;
  gap: 16px;
  z-index: 2;
}
.gallery-tag {
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
}
.gallery-tag.active {
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.gallery-arrows {
  position: absolute;
  bottom: 24px;
  right: 40px;
  display: flex;
  gap: 12px;
  z-index: 2;
}
.gallery-prev,
.gallery-next {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--white);
  color: var(--white);
  font-size: 19px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== photo parallax ===== */
.plx-frame {
  overflow: hidden;
  position: relative;
}
.plx-frame .plx {
  height: calc(100% + 80px);
  width: 100%;
  object-fit: cover;
  margin-top: -40px;
  transform: translateY(var(--plx, 40px));
  will-change: transform;
  display: block;
}
.fs-left .plx-frame,
.fs-img .plx-frame {
  width: 100%;
  height: 100%;
}
.nw-mid .plx-frame {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 600 / 800;
}
.pr-image .plx-frame {
  width: 100%;
}
.row-a .pr-image .plx-frame {
  aspect-ratio: 700 / 900;
}
.row-b .pr-image .plx-frame {
  aspect-ratio: 600 / 800;
}
.gift-right .plx-frame {
  width: 100%;
  aspect-ratio: 800 / 1000;
}
.commission-right .plx-frame {
  width: 100%;
  /* Two photographs at two thirds of a screen, rather than four at full
     height. Her invitation does not need four screens of scrolling. */
  height: 68vh;
  margin-bottom: 40px;
}
.commission-right .plx-frame:last-child {
  margin-bottom: 0;
}

/* ===== hover states (links, icons) ===== */
.nav-link:hover,
.icon-btn:hover,
.hero-label:hover,
.site-header.is-dark .nav-link:hover,
.site-header.is-dark .icon-btn:hover {
  color: #e18d5f;
}

/* ===== newsletter ===== */
.newsletter {
  padding: 140px 40px;
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.newsletter p {
  font-size: 28px;
}
.newsletter-form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.newsletter-form input {
  font-family: var(--font-sans);
  font-size: 14px;
  border: none;
  border-bottom: 1px solid var(--black);
  background: transparent;
  padding: 8px 4px;
  min-width: 260px;
  outline: none;
}
.newsletter-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.newsletter .newsletter-consent {
  font-family: var(--font-sans);
  font-size: 13px;
  color: rgba(0,0,0,.55);
  margin-top: 14px;
}
.newsletter .newsletter-error {
  font-family: var(--font-sans);
  font-size: 14px;
  color: #8a3b24;
  margin-top: 16px;
}
.newsletter-thanks {
  font-family: var(--font-sans);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-top: 20px;
}

/* ===== footer ===== */
.site-footer {
  background: var(--black);
  color: var(--white);
  padding: 96px 40px 48px;
}
.footer-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.footer-heading {
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}
.footer-col a {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: .8;
  width: fit-content;
  transition: opacity .2s var(--ease);
}
.footer-address,
.footer-hours {
  font-family: var(--font-sans);
  font-size: 13px;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.9;
  opacity: .8;
}
.footer-col a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer-bottom {
  max-width: var(--max-width);
  margin: 64px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.6);
}

/* --- iOS Safari: the URL bar shrinks the viewport mid-scroll, which made
   every 100vh pin jump. svh is the stable small-viewport height; browsers
   that do not know it keep the vh line above. --- */
@supports (height: 100svh) {
  .hero { height: 200svh; }
  .hero-pin { height: 100svh; }
  .manifesto { top: 100svh; height: 100svh; }
  .statement { height: 200svh; }
  .statement-pin { height: 100svh; }
  .feature-skirts { min-height: 100svh; }
  .fs-left { height: calc(100svh - 80px); }
  .commission-left { height: 100svh; }
  .commission-right img { height: 100svh; }
  .hero-wordmark { height: 45svh; }
}

/* ===== responsive ===== */
@media (max-width: 1023px) {
  .feature-skirts {
    flex-direction: column;
    min-height: auto;
    padding: 24px 16px;
  }
  .fs-left, .fs-right {
    width: 100%;
  }
  .fs-left {
    height: 60vh;
  }
  .new-wave {
    grid-template-columns: 1fr;
    padding: 80px 16px;
    text-align: left;
  }
  .nw-right {
    align-items: flex-start;
    text-align: left;
  }
  .product-row {
    grid-template-columns: 1fr;
    padding: 48px 16px;
  }
  .pr-meta-b {
    position: static;
    align-items: flex-start;
    text-align: left;
    margin-top: 16px;
  }
  .one-of-one {
    grid-template-columns: 1fr;
    padding: 64px 16px;
  }
  .commission {
    grid-template-columns: 1fr;
  }
  .commission-left {
    position: relative;
    height: auto;
    padding: 48px 16px;
  }
  .commission-right .plx-frame {
    height: 60vh;
    margin-bottom: 24px;
  }
  .gifting {
    grid-template-columns: 1fr;
    padding: 64px 16px;
  }
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .header-inner {
    padding: 0 16px;
  }
  .header-left,
  .header-right {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .wordmark {
    font-size: 22px;
    height: 36px;
  }
  .hero-pin {
    flex-direction: column;
  }
  .hero-half {
    width: 100%;
    height: 50vh;
  }
  .hero-label {
    bottom: 24px;
    font-size: 13px;
  }
  .hero-label-left { left: 16px; }
  .hero-label-right { right: 16px; }
  .manifesto-inner {
    padding: 32px 20px;
  }
  .manifesto-inner p {
    font-size: 23px;
    margin-bottom: 18px;
  }
  .experience-toggle {
    display: none;
  }
  .toggle-mobile {
    display: block;
  }
  .collectibles-track .card {
    flex: 0 0 220px;
  }
  .collectibles-head {
    padding: 0 16px;
  }
  .collectibles-track {
    padding-left: 16px;
  }
  .mega-menu {
    height: auto;
  }
  .mega-menu-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 16px;
  }
  .mega-copy {
    display: none;
  }
  .mega-fig {
    width: 45%;
  }
  .mega-menu-inner,
  .search-panel-inner {
    padding: 24px 16px;
  }
  .bag-drawer {
    width: 100%;
  }
  .feature-skirts {
    padding: 16px;
  }
  .fs-top {
    flex-direction: column;
    height: auto;
    gap: 12px;
  }
  .fs-img {
    width: 100%;
    height: 40vh;
  }
  .category-strip {
    padding: 40px 0;
  }
  .statement-text {
    font-size: 19px;
    line-height: 1.5;
  }
  .commission-right .plx-frame {
    height: 50vh;
  }
  .gallery-viewport {
    margin: 0 16px;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px 16px;
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .newsletter {
    padding: 80px 16px;
  }
  .newsletter p {
    font-size: 23px;
  }
  .site-footer {
    padding: 64px 16px 32px;
  }
}

/* ===== reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body,
  .hero-wordmark,
  .hero-label,
  .experience-toggle,
  .toggle-mobile,
  .reveal,
  .reveal-left,
  .reveal-scale,
  .manifesto,
  .manifesto-inner,
  .statement-overlay,
  .statement-text,
  .hero-track {
    opacity: 1 !important;
    transform: none !important;
  }
  .plx-frame .plx,
  .statement-bg,
  .beyond-media img {
    transform: none !important;
    animation: none !important;
  }
  .mega-img-b {
    transition: none !important;
  }
}

/* ===== the bag ===== */
.bag-count {
  position: absolute;
  top: -4px;
  right: -8px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 15px;
  text-align: center;
}
.bag-btn { position: relative; }
.site-header.is-dark .bag-count {
  background: var(--white);
  color: var(--black);
}
.bag-body {
  display: flex;
  flex-direction: column;
  height: calc(100% - 70px);
}
.bag-empty { padding: 24px; opacity: .6; }
.bag-lines {
  list-style: none;
  margin: 0;
  padding: 0 24px;
  overflow-y: auto;
  flex: 1;
}
.bag-line {
  display: flex;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.bag-line-img {
  flex: 0 0 62px;
  aspect-ratio: 2 / 3;
  background: var(--ground);
  overflow: hidden;
}
.bag-line-img img { width: 100%; height: 100%; object-fit: contain; }
.bag-line-text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.bag-line-name { font-family: var(--font-serif); font-size: 17px; }
.bag-line-meta {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .6;
}
.bag-line-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bag-line-price { font-family: var(--font-serif); font-size: 16px; }
.bag-remove {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .5;
  padding: 0;
}
.bag-remove:hover { opacity: 1; }
.bag-foot { padding: 20px 24px 28px; border-top: 1px solid rgba(0,0,0,.12); }
.bag-total {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-serif);
  font-size: 18px;
  margin-bottom: 6px;
}
.bag-note {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: .06em;
  opacity: .55;
  margin: 0 0 16px;
}
.bag-checkout { display: block; text-align: center; }

@media (max-width: 480px) {
  /* The drawer is 380px, which is wider than a phone. Leave a sliver of the
     page visible behind it so it reads as a drawer rather than a new screen. */
  .bag-drawer { width: calc(100vw - 32px); }
  .bag-lines { padding: 0 16px; }
  .bag-foot { padding: 16px 16px 24px; }
}

/* ===== photo gaps =====
   A labelled grey panel standing in for a photograph Gaia has not supplied yet.
   Deliberately plain: a reviewer should never mistake one for a design choice.
   Remove the whole element when the real photograph arrives.

   :where() keeps position at zero specificity so the panel can still be dropped
   into .statement-bg / .salon-bg / .plx-frame slots that position it themselves. */
:where(.photo-gap) {
  position: relative;
}
.photo-gap.photo-gap {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
}
.photo-gap {
  width: 100%;
  background: #e4e2de;
  color: rgba(0,0,0,0.45);
  border: 1px solid rgba(0,0,0,0.08);
}
.photo-gap::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(0,0,0,0.14);
  pointer-events: none;
}
.photo-gap > span {
  position: relative;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  max-width: 24ch;
}
[data-theme="dark"] .photo-gap,
.photo-gap.is-dark {
  background: #23211f;
  color: rgba(255,255,255,0.5);
  border-color: rgba(255,255,255,0.12);
}
[data-theme="dark"] .photo-gap::before,
.photo-gap.is-dark::before {
  border-color: rgba(255,255,255,0.16);
}

/* Full-bleed gaps sit behind headlines and under the header, so the label
   goes to the bottom-left corner where nothing else lives. */
.photo-gap.salon-bg.salon-bg,
.photo-gap.statement-bg.statement-bg {
  align-items: flex-end;
  justify-content: flex-start;
  padding: 24px;
}
.photo-gap.salon-bg > span,
.photo-gap.statement-bg > span {
  text-align: left;
}

/* ===================================================================== */
/* MOBILE AND TABLET REPAIRS                                             */
/* Appended last on purpose: these override the blocks above by order,   */
/* so the original rules stay readable and nothing had to be unpicked.   */
/* ===================================================================== */


/* --- Tablet, 768–1023px. This band previously got the full desktop nav
   with no room for it, and a 5.2-card rail. --- */
@media (max-width: 1023px) {
  .header-left,
  .header-right {
    display: none;
  }
  .hamburger {
    display: flex;
  }
  .collectibles-track .card {
    flex: 0 0 240px;
  }
  .collectibles-head {
    padding: 0 24px;
  }
  .collectibles-track {
    padding-left: 24px;
  }

  /* Photo carousel: was a hard 768px-tall band with 160px slides and a
     viewport capped at five of them. Now it grows with the screen. */
  .gallery {
    height: auto;
    flex-direction: column;
    padding: 72px 0 32px;
  }
  .gallery-viewport {
    max-width: none;
    margin: 0 24px;
  }
  .gallery-slide {
    flex: 0 0 30vw;
    height: 40vw;
  }
  .gallery-arrows {
    position: static;
    align-self: flex-end;
    margin: 24px 24px 0;
  }
  .gallery-overlay-top {
    left: 24px;
  }
  .gallery-wordmark {
    font-size: clamp(32px, 9vw, 96px);
  }

  /* 1-of-1 rail: flex-basis was 50vw/3.33 with no breakpoint anywhere,
     which put each card at about 15% of a phone screen. */
  .oo-card {
    flex: 0 0 240px;
  }
}

/* --- Phone, under 768px --- */
@media (max-width: 767px) {
  .gallery-viewport {
    margin: 0 16px;
  }
  .gallery-slide {
    flex: 0 0 58vw;
    height: 78vw;
  }
  .gallery-arrows {
    margin: 20px 16px 0;
  }
  .gallery-overlay-top {
    left: 16px;
  }
  .oo-card {
    flex: 0 0 220px;
  }

  /* Four serif letters at 11vh, nowrap, on a 375px screen. */
  .hero-wordmark {
    font-size: clamp(36px, 10vh, 80px);
  }

  /* The menu used to leave the page scrolling behind it. */
  .mobile-menu {
    box-shadow: 0 24px 48px rgba(0,0,0,0.12);
  }
  body.menu-open {
    overflow: hidden;
  }
}

/* A grid item defaults to min-width:auto, so the 1-of-1 rail pushed its own
   column wider than the screen and the whole page scrolled sideways. Body
   overflow-x is not an option here — it kills every sticky pin. */
.oo-left,
.oo-right,
.one-of-one > * {
  min-width: 0;
}

/* ===== search results =====
   The panel was a fixed 160px box with nothing to show. It grows now. */
.search-panel.open {
  max-height: 78vh;
}
.search-panel-inner {
  height: auto;
  min-height: 160px;
  max-height: 78vh;
  overflow-y: auto;
  justify-content: flex-start;
  padding: 32px 40px;
}
.search-results {
  display: flex;
  flex-direction: column;
  max-width: 560px;
  width: 100%;
}
.search-hint {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.5);
  padding: 12px 0;
}
.search-hit {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  color: inherit;
}
.search-hit:hover {
  opacity: .62;
}
.search-hit img,
.search-hit-gap {
  width: 44px;
  height: 60px;
  object-fit: cover;
  flex: 0 0 44px;
  background: #e4e2de;
}
.search-hit-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.search-hit-name {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.search-hit-designer {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: rgba(0,0,0,0.55);
}
.search-hit-all {
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.14em;
  padding: 16px 0;
  border-bottom: none;
}

@media (max-width: 767px) {
  .search-panel-inner {
    padding: 24px 16px;
  }
  .search-panel-inner input {
    font-size: 18px;
  }
}

/* Bag lines that sold since they were added (live check in bag.js). */
.bag-line.is-gone .bag-line-img, .bag-line.is-gone .bag-line-price { opacity: .4; }
.bag-line-gone { display: block; font-family: var(--font-sans); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #8a3b24; margin-top: 4px; }

/* ===== footer policy links ===== */
.footer-policies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}
.footer-policies a {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: .8;
  transition: opacity .2s var(--ease);
}
.footer-policies a:hover {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ===================================================================== */
/* OCT 12 POLISH: readable type, photo-gap collapse, two home sections   */
/* ===================================================================== */

/* ----- type scale: body 18px desktop / 17px phone ----- */
body { font-size: 18px; line-height: 1.6; }
.product-description p, .product-bullets li { line-height: 1.55; }
.bag-count { font-size: 11px; line-height: 15px; }
@media (max-width: 767px) {
  body, p { font-size: 17px; }
}

/* ----- photo gaps: never visible without a picture -----
   A .photo-gap that has no <img> inside leaves the layout entirely. When a
   real photo is placed inside the same wrapper the rule stops applying.
   Wrappers that carry layout (frames, collage figures) go with it.
   Tiles (.is-tile) are the neutral branded fallback and stay. */
.photo-gap:not(:has(img)):not(.is-tile),
.plx-frame:has(> .photo-gap):not(:has(img)),
.world-item:has(> .photo-gap):not(:has(img)),
.nw-mid:not(:has(img)) .caption {
  display: none !important;
}
.photo-gap:empty { display: none !important; }
.photo-gap.is-tile {
  background: var(--ground);
  border: 0;
  color: rgba(0,0,0,.7);
}
.photo-gap.is-tile::before { display: none; }
.photo-gap.is-tile > span {
  font-family: var(--font-serif);
  font-size: 24px;
  letter-spacing: 0;
  text-transform: none;
  max-width: 18ch;
}

/* Category tile in the shop strip when a category has no photograph. */
.cat-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--ground);
  text-align: center;
  padding: 16px;
  box-sizing: border-box;
}
.cat-tile > span {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.15;
  color: rgba(0,0,0,.78);
}

/* ----- Collections of comfort: editorial, unlike Just in ----- */
.collections-edit {
  background: var(--ground);
  padding: 120px 40px 140px;
  display: grid;
  grid-template-columns: minmax(280px, 5fr) 7fr;
  gap: 24px 80px;
  align-items: start;
}
.collections-edit .collectibles-head {
  position: sticky;
  top: 120px;
  padding: 0;
  margin: 0;
  display: block;
}
.collections-edit .collectibles-head h2 {
  font-style: normal;
  font-weight: 400;
  font-size: clamp(44px, 4.6vw, 76px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 40px;
}
.collections-edit .ce-link {
  font-size: 15px;
  letter-spacing: 0.1em;
  gap: 10px;
  padding: 16px 28px;
  border: 1px solid #000;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.collections-edit .ce-link:hover { background: #000; color: #fff; }
.collections-edit .ce-link svg { transform: rotate(-90deg); }
.collections-edit .collectibles-track.ce-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 72px 40px;
  overflow: visible;
  padding: 0;
  cursor: default;
  user-select: auto;
}
.collections-edit .collectibles-track .card { flex: none; min-width: 0; }
.collections-edit .card:nth-child(even) { transform: translateY(96px); }
.collections-edit .card-media { background: var(--white); }
.collections-edit .card-caption { padding-top: 14px; }
.collections-edit .card-sku { font-size: 15px; letter-spacing: 0.06em; line-height: 1.4; }
.collections-edit .card-edition { font-size: 18px; margin-top: 4px; }
.collections-edit .card-price { font-size: 16px; }
/* the offset column needs room at the bottom so nothing touches the next section */
.collections-edit .collectibles-track.ce-grid { padding-bottom: 96px; }

@media (max-width: 1023px) {
  .collections-edit {
    grid-template-columns: 1fr;
    padding: 80px 24px 88px;
    gap: 40px;
  }
  .collections-edit .collectibles-head { position: static; }
  .collections-edit .collectibles-head h2 { font-size: clamp(40px, 8vw, 60px); margin-bottom: 28px; }
  .collections-edit .collectibles-track.ce-grid { gap: 48px 24px; padding-bottom: 56px; }
  .collections-edit .card:nth-child(even) { transform: translateY(48px); }
}
@media (max-width: 767px) {
  .collections-edit { padding: 64px 16px 72px; }
  .collections-edit .collectibles-track.ce-grid { gap: 36px 14px; padding-bottom: 40px; }
  .collections-edit .card:nth-child(even) { transform: translateY(32px); }
  .collections-edit .card-sku { font-size: 13px; }
  .collections-edit .card-edition { font-size: 16px; }
  .collections-edit .card-price { font-size: 15px; }
  .collections-edit .card-caption { flex-direction: column; gap: 4px; }
}

/* ----- Only one: every piece fits; quiet reveal and hover ----- */
.one-of-one { grid-template-columns: 1fr 1.6fr; gap: 64px; }
.oo-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px 20px;
  overflow: visible;
  cursor: default;
  user-select: auto;
  margin-bottom: 0;
}
.oo-card { flex: none; min-width: 0; gap: 8px; }
.oo-media {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--ground);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.oo-media img { transition: transform .9s var(--ease); object-fit: cover; }
.oo-card .label { font-size: 14px; line-height: 1.4; margin-top: 4px; }
.oo-card .price { font-size: 15px; }
.oo-card.oo-pre {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.oo-card.oo-pre.oo-in { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) {
  .oo-card:hover .oo-media { transform: translateY(-6px); box-shadow: 0 14px 28px rgba(0,0,0,.12); }
  .oo-card:hover .oo-media img { transform: scale(1.04); }
}
.oo-card:focus-visible .oo-media { box-shadow: 0 0 0 2px #000; }

/* Under 1280px the two columns stack and the pieces become a swipe row. */
@media (max-width: 1279px) {
  .one-of-one { grid-template-columns: 1fr; padding: 72px 24px; gap: 40px; }
  .oo-row {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    cursor: grab;
    scroll-snap-type: x proximity;
    padding-bottom: 8px;
  }
  .oo-card { flex: 0 0 240px; scroll-snap-align: start; }
}
@media (max-width: 767px) {
  .one-of-one { padding: 64px 16px; }
  .oo-card { flex: 0 0 62vw; max-width: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  .oo-card.oo-pre { opacity: 1 !important; transform: none !important; transition: none !important; }
  .oo-media, .oo-media img { transition: none !important; }
  .collections-edit .card:nth-child(even) { transform: none; }
}


/* ===================================================================== */
/* DESIGNERS: header dropdown, mobile menu, and the Designers page        */
/* Same panel, type and hover colour as the SHOP mega menu.               */
/* ===================================================================== */
.designers-menu {
  height: auto;
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}
.designers-menu-inner {
  display: block;
  height: auto;
  overflow: visible;
  padding: 40px 40px 36px;
}
.designers-list {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  column-count: 5;
  column-gap: 40px;
}
.designers-list li {
  break-inside: avoid;
  padding: 0 0 13px;
}
.designers-list a {
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  transition: color .2s var(--ease);
}
.designers-list a:hover,
.designers-list a:focus-visible,
.designers-all:hover,
.designers-all:focus-visible {
  color: #e18d5f;
}
.designers-all {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: color .2s var(--ease);
}
@media (max-width: 1279px) {
  .designers-list { column-count: 4; column-gap: 28px; }
}
/* Between a tablet and a wide laptop the five links need a little less air. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .header-left, .header-right { gap: 18px; }
  .nav-link { letter-spacing: 0.1em; }
}

/* Mobile menu: SHOP carries its categories, so Pre-Loved is reachable. */
.mobile-menu {
  max-height: calc(100vh - 70px);
  overflow-y: auto;
}
.mobile-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  padding: 2px 0 6px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}
.mobile-sub a {
  font-size: 13px;
  padding: 9px 0;
  border-bottom: 0;
  color: rgba(0,0,0,0.7);
}

/* Designers page */
.designers-intro .shop-intro-left { flex: 1 1 auto; max-width: none; }
.designer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 16px;
  row-gap: 44px;
  padding: 32px 40px 100px;
}
.designer-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.designer-card-img {
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--ground);
}
.designer-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  transition: transform .5s var(--ease);
}
.designer-card:hover .designer-card-img img,
.designer-card:focus-visible .designer-card-img img {
  transform: scale(1.03);
}
.designer-card-name {
  font-family: var(--font-serif);
  font-size: 26px;
  line-height: 1.15;
  margin-top: 14px;
  overflow-wrap: anywhere;
}
.designer-card-count {
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(0,0,0,.5);
  margin-top: 6px;
}
.designer-card-blurb {
  font-family: var(--font-serif);
  font-size: 16px;
  line-height: 1.45;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 1023px) {
  .designer-grid { grid-template-columns: repeat(3, 1fr); padding: 24px 16px 72px; }
}
@media (max-width: 767px) {
  .designer-grid { grid-template-columns: repeat(2, 1fr); column-gap: 10px; row-gap: 32px; }
  .designer-card-name { font-size: 21px; margin-top: 10px; }
  .designer-card-blurb { font-size: 15px; -webkit-line-clamp: 2; }
}

/* Shop filtered to one designer: the story sits where the intro line was. */
.shop-intro.is-designer { align-items: flex-start; }
.shop-intro.is-designer .shop-intro-left { flex: 1 1 auto; max-width: 720px; }
.shop-intro.is-designer .shop-intro-left p { max-width: 640px; }
.shop-intro.is-designer .shop-intro-right { display: none; }
.designer-para { display: block; }
.designer-para + .designer-para { margin-top: 12px; }
.designer-back {
  display: inline-block;
  margin-top: 18px;
  font-family: var(--font-sans);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
}