/* ==========================================================================
   ALONE Body & Candle Co — design system

   THE PALETTE IS DERIVED FROM HER PHOTOGRAPHS, not from her old store
   theme (which gave us black, white and one pink, and was the reason the
   first design felt thin). Every colour below was sampled out of the five
   product images with a median-cut quantiser, then adjusted only for
   contrast. Provenance, in her own pictures:

     oat / stone      #A39B83  #B9B19C   the soap-table backdrop
     clay / taupe     #988066  #7E614A   the marble, the wood
     terracotta       #C8674F  #9F422E   the sugar scrub
     coral / blush    #E79478  #BC7C5B   the scrub's high notes
     sage / olive     #4B603A  #6A7751   the pothos, the spray labels
     amber / gold     #8A6E3F  #7E743D   the wax, the warmer
     cream            #F2EAC9  #EBEBE1   the wax melts, the cards
     espresso         #241F1A            the shadowed slate

   The feel it is aiming for: soft, earthy, homey — a warm room, not a
   boutique. Rounded, layered, low-contrast surfaces with real depth; the
   "deep immersion" comes from texture, glow and photography, not from noise.
   ========================================================================== */

:root {
  /* ---- ink ---- */
  --ink:        #241F1A;   /* espresso — 15.3:1 on paper */
  --ink-soft:   #4E443B;   /* 8.9:1 */
  --ink-mute:   #665C51;   /* darkened a touch so it still clears AA over the backdrop */

  /* ---- paper & earth surfaces ---- */
  --paper:      #FBF7EF;   /* warm cream, the base */
  --paper-warm: #F3EADC;   /* oat — alternating bands */
  --sand:       #EDE2D0;   /* deeper earth, cards on oat */
  --clay-tint:  #E7D9C6;   /* the warmest surface, used sparingly */
  --line:       #E2D6C2;   /* hairlines, always warm, never grey */

  /* ---- accents, all sampled from the products ---- */
  --blush:      #F0A98F;   /* soft coral — fills and hovers, never text */
  --blush-deep: #A04229;   /* deep enough for AA over the backdrop at 40% */
  --clay:       #C8674F;   /* mid terracotta — decoration, large text */
  --sage:       #4B603A;   /* deep olive — 6.5:1, safe for text */
  --sage-soft:  #6A7751;   /* the leaf tone */
  --gold:       #8A6E3F;   /* amber — large text and rules only */
  --gold-soft:  #C9A96A;

  /* ---- type ---- */
  --serif: "Cormorant Garamond", "Didot", "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "Jost", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* ---- space & shape ---- */
  --wrap: 1180px;
  --wrap-narrow: 720px;
  --radius: 10px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.86rem);
  --step-0:  clamp(0.98rem, 0.94rem + 0.16vw, 1.08rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.38vw, 1.40rem);
  --step-2:  clamp(1.50rem, 1.32rem + 0.85vw, 2.05rem);
  --step-3:  clamp(2.00rem, 1.60rem + 1.90vw, 3.30rem);
  --step-4:  clamp(2.60rem, 1.85rem + 3.60vw, 5.40rem);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.75rem;
  --space-4: 3rem;
  --space-5: 5rem;
  --space-6: 8rem;

  /* ---- the backdrop slideshow ----
     These two numbers are a readability budget, not a taste call: the photographs behind the
     page are only ever as strong as the wash on top of them allows. A test computes the worst
     case (a black pixel in a photograph) against every text colour, so raising the opacity
     without thinning the wash fails the build rather than quietly making text unreadable. */
  --backdrop-opacity: 0.40;
  --backdrop-wash: 0.50;

  /* ...and a second, local wash that only covers the content column. The photographs stay at
     full strength in the heroes, the bands and the margins; the dense text gets a quiet panel.
     The two together are what the readability test checks. */
  --content-veil: 0.66;

  /* ---- warm shadows: tinted with espresso, never neutral grey ---- */
  --lift-1: 0 1px 2px rgba(36, 31, 26, .04), 0 4px 14px rgba(36, 31, 26, .05);
  --lift-2: 0 2px 6px rgba(36, 31, 26, .06), 0 14px 40px rgba(36, 31, 26, .09);
  --lift-3: 0 30px 70px rgba(36, 31, 26, .18);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.75;
  font-weight: 300;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.10; margin: 0; letter-spacing: 0.005em; text-wrap: balance; }
p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin-bottom: 0.45em; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-4) 0; }
:focus-visible { outline: 2px solid var(--blush-deep); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--blush); color: var(--ink); }

/* skip link — first focusable element, off-screen until focused */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 0.7em 1.4em;
  font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
}
.skip-link:focus { left: 0.75rem; top: 0.75rem; }

/* ==========================================================================
   Texture & atmosphere — the "deep immersion" layer.
   A fixed paper grain and two soft earth glows sit behind everything and are
   pure decoration: no text sits on them, and they never move.
   ========================================================================== */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 12% -5%, rgba(240, 169, 143, .20), transparent 62%),
    radial-gradient(55vw 45vh at 95% 8%, rgba(201, 169, 106, .16), transparent 60%),
    radial-gradient(70vw 60vh at 50% 105%, rgba(75, 96, 58, .12), transparent 65%);
}
body > * { position: relative; z-index: 1; }

/* ---------- the backdrop slideshow ----------
   Cynthia at work, behind everything, drained to a wash. Sits under all content; the order is
   shuffled once per visit and carried across pages.

   Which photograph shows is the `data-slide` attribute on <html>. The first-paint script in the
   <head> sets it before anything is drawn, so a new page opens on the very picture the last one
   was showing; alone.js then moves it along. Deliberately NOT given its own
   view-transition-name: a named layer paints above the page during a transition, which is what
   used to throw the unwashed photograph over the whole screen on every click. It rides inside
   the page snapshot instead, identical on both sides of the sweep, so it simply holds still. */
.backdrop {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: var(--backdrop-opacity);
}
.backdrop__slide {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0;
  transition: opacity 1.2s ease;
}
[data-slide="0"] .backdrop__slide:nth-child(1),
[data-slide="1"] .backdrop__slide:nth-child(2),
[data-slide="2"] .backdrop__slide:nth-child(3),
[data-slide="3"] .backdrop__slide:nth-child(4),
[data-slide="4"] .backdrop__slide:nth-child(5),
[data-slide="5"] .backdrop__slide:nth-child(6),
[data-slide="6"] .backdrop__slide:nth-child(7),
[data-slide="7"] .backdrop__slide:nth-child(8) { opacity: 1; }
.backdrop-wash {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(251, 247, 239, var(--backdrop-wash));
}
/* the content column's own wash, feathered at the edges so there is no visible seam */
.content-veil {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: rgba(251, 247, 239, var(--content-veil));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* ---------- layout ---------- */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, var(--wrap-narrow)); margin-inline: auto; }
.section { padding-block: var(--space-5); }
.section--warm {
  background:
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 40%),
    rgba(243, 234, 220, .66);
}

/* ---------- type helpers ---------- */
.eyebrow {
  font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.30em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 400;
}
.lede { font-size: var(--step-1); line-height: 1.6; color: var(--ink-soft); font-weight: 300; }
.center { text-align: center; }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; border: 1px solid var(--ink); background: var(--ink); color: #fff;
  padding: 1em 2.5em; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
  border-radius: var(--radius-pill);
  box-shadow: var(--lift-1);
  transition: background .3s ease, color .3s ease, border-color .3s ease,
              transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease;
}
.btn:hover { background: var(--blush-deep); border-color: var(--blush-deep); color: #fff;
             transform: translateY(-2px); box-shadow: var(--lift-2); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: none; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--wide { display: block; width: 100%; text-align: center; }
.btn--disabled, .btn[disabled] {
  background: var(--sand); border-color: var(--line); color: var(--ink-mute);
  cursor: not-allowed; box-shadow: none;
}
.btn--disabled:hover, .btn[disabled]:hover { background: var(--sand); color: var(--ink-mute);
  border-color: var(--line); transform: none; }

/* ---------- announcement + header ---------- */
.announce {
  background: var(--ink); color: #F3E6D6; text-align: center;
  font-size: 0.64rem; letter-spacing: 0.34em; text-transform: uppercase; padding: 0.9em 1rem;
}
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 247, 239, 0.86);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid transparent;
  transition: border-color .4s ease, background .4s ease, box-shadow .4s ease,
              transform .45s cubic-bezier(.2,.7,.2,1);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 10px 30px rgba(36, 31, 26, .06);
}
.site-header.is-hidden { transform: translateY(-101%); }
/* reading progress, hairline under the bar */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: transparent; pointer-events: none;
}
.scroll-progress > span {
  display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--sage), var(--gold-soft), var(--clay));
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-2); padding-block: 1.2rem;
  transition: padding .4s cubic-bezier(.2,.7,.2,1);
}
.site-header.is-stuck .site-header__inner { padding-block: 0.7rem; }
.site-header.is-stuck .wordmark__logo { height: 44px; }
.nav { display: flex; gap: 1.9rem; list-style: none; margin: 0; padding: 0; }
.nav a {
  position: relative; font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-soft); padding-bottom: 3px; transition: color .25s;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--blush-deep); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav--left { flex: 1 1 0; }
.nav--right { justify-content: flex-end; }
.wordmark { text-align: center; line-height: 1; flex: 0 0 auto; }
.wordmark__name {
  font-family: var(--serif); font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.4rem);
  letter-spacing: 0.36em; text-indent: 0.36em; display: block;
}
.wordmark__sub {
  display: block; font-size: 0.55rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 0.5em; text-indent: 0.34em;
}
/* her own hand-drawn wordmark, sitting in the centre of the bar */
.wordmark__logo { display: block; height: 54px; width: auto; }
.footer-logo { display: block; height: 88px; width: auto; }
.header-actions { display: flex; gap: 1rem; align-items: center; flex: 1 1 0; justify-content: flex-end; }
.header-actions a { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); }
.header-actions a:hover { color: var(--ink); }
.menu-toggle { display: none; }
.nav-toggle { display: none; }

/* the Shop call to action */
.header-actions .shop-cta,
.shop-cta {
  display: inline-block; border: 1px solid var(--ink); background: var(--ink); color: #fff;
  padding: 0.75em 1.6em; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase;
  border-radius: var(--radius-pill); box-shadow: var(--lift-1);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.header-actions .shop-cta:hover,
.shop-cta:hover { background: var(--blush-deep); border-color: var(--blush-deep); transform: translateY(-1px); }

/* ---------- the Shop mega-menu ----------
   Hover and keyboard-focus both open it, with no JavaScript required; the script only keeps
   aria-expanded honest for screen readers. */
.shop-menu { position: relative; }
.megamenu {
  position: absolute; top: calc(100% + 0.9rem); right: 0; z-index: 60;
  width: min(640px, calc(100vw - 3rem));
  padding: 1.3rem;
  background: rgba(251, 247, 239, .97);
  backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--lift-3);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2,.7,.2,1), visibility .35s;
}
.shop-menu:hover .megamenu,
.shop-menu:focus-within .megamenu { opacity: 1; visibility: visible; transform: none; }
.megamenu__label {
  font-size: 0.6rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-mute); margin: 0 0 0.9rem;
}
.megamenu__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
.megamenu__item {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.55rem; border-radius: var(--radius);
  transition: background .25s ease, transform .25s ease;
}
.megamenu__item:hover, .megamenu__item:focus-visible { background: var(--sand); transform: translateX(3px); }
.megamenu__item img {
  width: 52px; height: 62px; object-fit: cover; border-radius: 8px; flex: 0 0 auto;
}
.megamenu__name { font-family: var(--serif); font-size: 0.98rem; line-height: 1.25; display: block; }
.megamenu__price { font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink-mute); }
.megamenu__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.megamenu__foot a { color: var(--blush-deep); }

/* ---------- marquee ----------
   A slow band of her own words. Decorative: the same five words are on the page as real
   content, so this copy is hidden from screen readers. */
.marquee {
  position: relative; overflow: hidden; padding: 1.1rem 0;
  background: linear-gradient(90deg, var(--sand), var(--paper-warm), var(--sand));
  border-block: 1px solid var(--line);
}
.marquee__track {
  display: flex; width: max-content; gap: 3.5rem; padding-right: 3.5rem;
  animation: marquee 42s linear infinite;
}
.marquee__item {
  font-family: var(--serif); font-size: var(--step-1); letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--ink-soft); white-space: nowrap;
  display: flex; align-items: center; gap: 3.5rem;
}
.marquee__item::after { content: "✦"; font-size: 0.7em; color: var(--gold); letter-spacing: 0; }
@keyframes marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ---------- page transitions ----------
   Cross-document View Transitions. The first-paint script puts `vt` on <html> where the browser
   supports them; everywhere else see `.vt-fallback` further down.

   The sweep: the new page washes up over the old one behind a soft, feathered edge, bottom to
   top (top to bottom when going back). Nothing fades to nothing and nothing moves sideways, so
   there is never a moment where both pages are half-transparent — that dip, plus the old
   additive blending, is what read as a flash. The old page simply holds still underneath; the
   backdrop photograph is the same in both, so only the page itself appears to change. */
@view-transition { navigation: auto; }
:root { view-transition-name: root; --sweep-time: .8s; --sweep-ease: cubic-bezier(.45, 0, .2, 1); }

::view-transition-group(root) { animation-duration: var(--sweep-time); }
::view-transition-image-pair(root) { isolation: auto; }
::view-transition-old(root),
::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) {
  animation: page-leave var(--sweep-time) linear both;
}
::view-transition-new(root) {
  /* a mask three screens tall: clear / feathered edge / solid — slid from top to bottom */
  -webkit-mask-image: linear-gradient(180deg, transparent 0 34%, #000 58% 100%);
  mask-image: linear-gradient(180deg, transparent 0 34%, #000 58% 100%);
  -webkit-mask-size: 100% 300%; mask-size: 100% 300%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: page-arrive var(--sweep-time) var(--sweep-ease) both;
}
html:active-view-transition-type(back)::view-transition-new(root) {
  -webkit-mask-image: linear-gradient(0deg, transparent 0 34%, #000 58% 100%);
  mask-image: linear-gradient(0deg, transparent 0 34%, #000 58% 100%);
  animation-name: page-arrive-back;
}
/* the outgoing page stays exactly as it was until it is covered */
@keyframes page-leave { from, to { opacity: 1; } }
@keyframes page-arrive {
  from { -webkit-mask-position: 0 0%;   mask-position: 0 0%; }
  to   { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
}
@keyframes page-arrive-back {
  from { -webkit-mask-position: 0 100%; mask-position: 0 100%; }
  to   { -webkit-mask-position: 0 0%;   mask-position: 0 0%; }
}

/* ---------- hero — the immersive opener ---------- */
.hero {
  position: relative; display: grid; grid-template-columns: 1.02fr 1fr; align-items: stretch;
  min-height: clamp(460px, 78vh, 820px);
  background:
    radial-gradient(80% 70% at 15% 20%, rgba(240,169,143,.22), transparent 60%),
    radial-gradient(70% 60% at 90% 90%, rgba(75,96,58,.14), transparent 62%),
    linear-gradient(160deg, rgba(243,234,220,.78), rgba(251,247,239,.60) 55%, rgba(237,226,208,.72));
  overflow: hidden;
}
/* a soft earth glow bleeding out of the photograph side, kept low so the
   photograph stays the richest thing on the page */
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 22%;
  background: linear-gradient(180deg, transparent, rgba(243, 234, 220, .55));
  pointer-events: none;
}
.hero__copy {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--space-5) clamp(1.5rem, 5.5vw, 5.5rem);
}
.hero__title { font-size: var(--step-4); margin-bottom: 1.3rem; }
.hero__title em { font-style: italic; color: var(--blush-deep); }
.hero__text { max-width: 36ch; color: var(--ink-soft); }
.hero__actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin-top: 1.8rem; }
.hero__media { position: relative; overflow: hidden; min-height: 420px; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  /* alone.js only ever sets --drift, starting from 0, so the photograph never jumps on load */
  transform: translate3d(0, var(--drift, 0px), 0) scale(1.06); will-change: transform;
}
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(243,234,220,.20), transparent 26%),
              linear-gradient(0deg, rgba(36,31,26,.24), transparent 36%);
  pointer-events: none;
}

/* ---------- five words ---------- */
.words {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.45), transparent);
}
.words__item { padding: var(--space-3) 1.2rem; text-align: center; border-right: 1px solid var(--line); }
.words__item:last-child { border-right: 0; }
.words__word {
  font-family: var(--serif); font-size: var(--step-1); letter-spacing: 0.18em;
  text-transform: uppercase; display: block; color: var(--ink);
}
.words__gloss { font-size: 0.74rem; color: var(--ink-mute); margin-top: 0.6em; display: block; line-height: 1.5; }

/* ---------- section headings ---------- */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.section-head h2 { font-size: var(--step-3); }
.section-head a { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.section-head a:hover { color: var(--ink); border-color: var(--blush-deep); }

/* ---------- product grid ---------- */
.grid { display: grid; gap: var(--space-3) 1.6rem; }
.grid--5 { grid-template-columns: repeat(5, 1fr); }
.card { display: flex; flex-direction: column; }
.card__media {
  position: relative; overflow: hidden; background: var(--sand);
  aspect-ratio: 4 / 5; border-radius: var(--radius-lg);
  box-shadow: var(--lift-1);
  transition: box-shadow .5s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.card:hover .card__media { box-shadow: var(--lift-2); transform: translateY(-4px); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1); }
.card:hover .card__media img { transform: scale(1.055); }
.card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(36,31,26,.28));
  opacity: 0; transition: opacity .5s ease;
}
.card:hover .card__media::after { opacity: 1; }
.card__body { padding-top: 1rem; text-align: center; flex: 1 1 auto; display: flex; flex-direction: column; }
.card__title { font-family: var(--serif); font-size: 1.06rem; letter-spacing: 0.05em; line-height: 1.3; }
.card__title a { border-bottom: 1px solid transparent; }
.card:hover .card__title a { border-color: var(--blush); }
.card__price { font-size: 0.78rem; letter-spacing: 0.1em; color: var(--ink-soft); margin-top: 0.35em; }
.card__body .card__price { margin-top: auto; padding-top: 0.35em; }
.card--soldout .card__media img { opacity: 0.78; }
.card--soldout .card__title { color: var(--blush-deep); }
.badge {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2;
  background: rgba(251, 247, 239, .94); color: var(--blush-deep);
  font-size: 0.58rem; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 0.5em 0.9em; border: 1px solid var(--blush); border-radius: var(--radius-pill);
  backdrop-filter: blur(6px);
}
/* quick-look trigger, revealed on hover but always reachable by keyboard */
.card__peek {
  position: absolute; left: 50%; bottom: 0.9rem; z-index: 2;
  transform: translate(-50%, 140%);
  background: rgba(251, 247, 239, .95); color: var(--ink);
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.6em 1.2em; border-radius: var(--radius-pill); border: 1px solid var(--line);
  box-shadow: var(--lift-1); backdrop-filter: blur(8px);
  transition: transform .45s cubic-bezier(.2,.7,.2,1), background .25s;
}
.card:hover .card__peek, .card__peek:focus-visible { transform: translate(-50%, 0); }
.card__peek:hover { background: #fff; }

/* a note that sits beside a category holding only one product, so the row still reads
   as a designed layout rather than a single card lost in whitespace */
.category-note { grid-column: 2 / -1; align-self: center; padding-left: clamp(0.5rem, 3vw, 2.5rem); }
.category-note .eyebrow { margin-bottom: 0.7rem; }
.category-note p { color: var(--ink-soft); max-width: 44ch; }
.category-note .btn { margin-top: 0.6rem; }

/* ---------- category chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.55rem; justify-content: center; list-style: none; padding: 0; margin: 0 0 var(--space-3); }
.chips a {
  display: inline-block; border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 0.5em 1.15em; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); background: rgba(255,255,255,.5);
  transition: border-color .25s, color .25s, background .25s;
}
.chips a:hover { border-color: var(--blush); color: var(--ink); }
.chips a[aria-current="page"],
.chips a.is-current { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- split feature ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(1.5rem, 5vw, 5rem); }
.split__media {
  position: relative; aspect-ratio: 4 / 5; overflow: hidden;
  background: var(--sand); border-radius: var(--radius-lg); box-shadow: var(--lift-2);
}
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(200deg, transparent 55%, rgba(36,31,26,.16));
}
.split--flip .split__media { order: 2; }

/* ---------- product detail ---------- */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.pdp__media { position: sticky; top: 7.5rem; }
.pdp__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--lift-2); }
.pdp__zoom { display: block; position: relative; cursor: zoom-in; }
.pdp__zoom::after {
  content: "View larger"; position: absolute; right: 1rem; bottom: 1rem;
  background: rgba(251,247,239,.94); color: var(--ink);
  font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 0.55em 1em; border-radius: var(--radius-pill); box-shadow: var(--lift-1);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
.pdp__zoom:hover::after, .pdp__zoom:focus-visible::after { opacity: 1; transform: none; }
.pdp__title { font-size: var(--step-3); margin-bottom: 0.5rem; }
.pdp__price { font-size: var(--step-1); font-family: var(--serif); color: var(--ink-soft); margin-bottom: var(--space-3); }
.pdp__desc { color: var(--ink-soft); }
.pdp__desc h3 { font-size: var(--step-1); margin: var(--space-3) 0 0.6rem; }
.pdp__buy { margin-top: var(--space-3); }
.pdp__buy .fineprint { text-align: left; margin-top: 0.9rem; }
.pdp__alt { margin: 0.9rem 0 0; font-size: 0.78rem; }
.pdp__alt a { color: var(--blush-deep); border-bottom: 1px solid var(--line); padding-bottom: 1px; }
.pdp__alt a:hover { border-color: var(--blush); }

/* the real options and their exact prices, from her store admin */
.pdp__options { margin-top: var(--space-4); }
.pdp__options .eyebrow { margin-bottom: 0.6rem; }
.pdp__options .meta-list { margin-top: 0; }
.pdp__options .meta-list li span:last-child { font-variant-numeric: tabular-nums; }
.meta-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; border-top: 1px solid var(--line); }
.meta-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--line); font-size: 0.82rem; }
.meta-list span:first-child { color: var(--ink-mute); letter-spacing: 0.06em; }

/* ---------- prose (content pages) ---------- */
.prose { max-width: 68ch; }
.page-photo { margin: 0 0 var(--space-3); }
.page-photo img { width: 100%; max-width: 280px; height: auto; border-radius: var(--radius-lg); box-shadow: var(--lift-2); }
.prose h1 { font-size: var(--step-3); margin-bottom: var(--space-3); }
.prose h2 { font-size: var(--step-2); margin: var(--space-4) 0 var(--space-2); }
.prose h3 { font-size: var(--step-1); margin: var(--space-3) 0 0.5rem; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 1.4em; }
.prose ul li::before { content: "—"; position: absolute; left: 0; color: var(--blush-deep); }
.prose blockquote {
  margin: var(--space-3) 0; padding-left: 1.4rem; border-left: 2px solid var(--blush);
  font-family: var(--serif); font-size: var(--step-1); font-style: italic; color: var(--ink-soft);
}
.prose code { background: var(--sand); padding: 0.15em 0.4em; font-size: 0.85em; border-radius: 4px; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: 0.9rem; }
.prose th, .prose td { text-align: left; padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--line); }
.prose th { font-family: var(--sans); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); font-weight: 400; }
.page-head {
  position: relative; padding-block: var(--space-4) var(--space-3); text-align: center;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(240,169,143,.12), transparent 70%);
}

/* ---------- FAQ accordions ----------
   Native <details>, so they open with no JavaScript and can be found by in-page search. */
.faq__item { border-bottom: 1px solid var(--line); padding: 1.15rem 0; }
.faq__item > summary {
  cursor: pointer; font-family: var(--serif); font-size: var(--step-1);
  list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  transition: color .25s ease;
}
.faq__item > summary:hover { color: var(--blush-deep); }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
  content: "+"; color: var(--blush-deep); font-family: var(--sans); font-size: 1.1rem;
  transition: transform .3s cubic-bezier(.2,.7,.2,1);
}
.faq__item[open] > summary::after { content: "–"; }
.faq__body { padding-top: 0.9rem; color: var(--ink-soft); }
.faq__body > :first-child { margin-top: 0; }
.faq__body > :last-child { margin-bottom: 0; }

/* ---------- form ---------- */
.form { display: grid; gap: 1rem; max-width: 520px; }
.form input, .form textarea, .form select {
  width: 100%; padding: 0.95em 1em; border: 1px solid var(--line); background: rgba(255,255,255,.7);
  font: inherit; font-size: 0.92rem; border-radius: var(--radius);
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.form input:focus, .form textarea:focus, .form select:focus {
  background: #fff; border-color: var(--blush); box-shadow: 0 0 0 4px rgba(240,169,143,.22); outline: none;
}
.form label { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); display: block; margin-bottom: 0.45rem; }
.prefill { color: var(--blush-deep); }

/* honeypot — invisible to people and to screen readers, irresistible to bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- notice ---------- */
.notice {
  background: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.3)), var(--sand);
  border: 1px solid var(--line); border-left: 3px solid var(--blush);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.3rem; font-size: 0.85rem; color: var(--ink-soft); margin: var(--space-3) 0;
}
.notice strong { color: var(--ink); font-weight: 500; }

/* ---------- trust strip ----------
   Four claims Cynthia has already published. Nothing invented, nothing we cannot source. */
.trust { border-top: 1px solid var(--line); background: var(--paper-warm); padding-block: var(--space-3); }
.trust__list {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3) 1.6rem;
  list-style: none; margin: 0; padding: 0;
}
.trust__item { display: flex; gap: 0.85rem; align-items: flex-start; margin: 0; }
.trust__item svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--blush-deep); margin-top: 3px; }
.trust__title { font-family: var(--serif); font-size: 1.02rem; margin: 0; line-height: 1.25; }
.trust__note { font-size: 0.78rem; color: var(--ink-mute); margin: 0.2rem 0 0; line-height: 1.45; }
.handle { display: block; font-size: 0.72rem; color: var(--ink-mute); letter-spacing: 0.02em; }
.site-footer .handle { color: #9C9086; }

/* ---------- the relaunch pop-up ----------
   Home page only, JS-opened. Sits above the sweep so it is never caught behind a transition. */
.signup {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center; padding: 1.2rem;
}
.signup[hidden] { display: none; }
.signup__scrim {
  position: absolute; inset: 0;
  background: rgba(36, 31, 26, .46);
  backdrop-filter: blur(3px);
  animation: scrim-in .45s ease both;
}
.signup__panel {
  position: relative; z-index: 1;
  width: min(100%, 30rem); max-height: calc(100vh - 2.4rem); overflow-y: auto;
  background: var(--paper); border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 30px 70px rgba(36, 31, 26, .30);
  padding: clamp(1.7rem, 4.5vw, 2.7rem);
  text-align: center;
  animation: signup-in .55s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes scrim-in { from { opacity: 0; } }
@keyframes signup-in { from { opacity: 0; transform: translateY(20px) scale(.985); } }
.signup__close {
  position: absolute; top: .45rem; right: .5rem;
  width: 2.3rem; height: 2.3rem; padding: 0;
  border: 0; border-radius: 50%; background: none;
  font-size: 1.5rem; line-height: 1; color: var(--ink-mute); cursor: pointer;
}
.signup__close:hover { background: var(--paper-warm); color: var(--ink); }
.signup__emoji { font-size: 2.6rem; line-height: 1; margin: 0 0 .7rem; }
.signup__title { font-size: var(--step-2); margin: 0 0 .7rem; }
.signup__lede { color: var(--ink-soft); margin: 0 0 1.5rem; }
.signup__label {
  display: block; text-align: left; margin-bottom: .4rem;
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute);
}
.signup__form input { width: 100%; margin-bottom: .8rem; }
.signup__yes { width: 100%; }
.signup__error { margin: .7rem 0 0; font-size: .82rem; color: var(--blush-deep); }
.signup__no {
  display: block; width: 100%; margin-top: .9rem; padding: .45rem;
  border: 0; background: none; font: inherit; font-size: .85rem;
  color: var(--ink-mute); text-decoration: underline; text-underline-offset: .25em; cursor: pointer;
}
.signup__no:hover { color: var(--ink); }
.signup__step[hidden] { display: none; }

/* ---------- footer ---------- */
.site-footer {
  position: relative; color: #DED2C4; padding: var(--space-5) 0 var(--space-3);
  margin-top: var(--space-6);
  background:
    radial-gradient(70% 90% at 15% 0%, rgba(201,169,106,.14), transparent 60%),
    radial-gradient(60% 80% at 90% 100%, rgba(75,96,58,.18), transparent 60%),
    #241F1A;
}
.site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--sage), var(--gold-soft), var(--clay), var(--blush));
}
.site-footer a { color: #DED2C4; }
.site-footer a:hover { color: var(--blush); }
.site-footer .wordmark__name { color: #FBF7EF; }
.site-footer .wordmark__sub { color: #9C9086; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-3); }
.footer-grid h2, .footer-grid h4 { font-family: var(--sans); font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: #A79A8C; margin-bottom: 1rem; font-weight: 400; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; font-size: 0.85rem; }
.footer-grid li { margin-bottom: 0.55em; }
.footer-bottom { border-top: 1px solid rgba(222,210,196,.18); margin-top: var(--space-4); padding-top: var(--space-2); display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.72rem; color: #A79A8C; }

/* ==========================================================================
   Standalone-site additions
   ========================================================================== */

/* concept banner — the site is not live, and says so */
.concept-banner {
  background: var(--ink); color: #F3E6D6; font-size: 0.74rem; line-height: 1.5;
  padding: 0.65rem 1rem; text-align: center;
}
.concept-banner strong { color: #fff; font-weight: 500; }


/* buy/enquire link under each product card */
.card__buy { margin: 0.7rem 0 0; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.card__buy a { color: var(--ink-mute); border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.card:hover .card__buy a { color: var(--blush-deep); border-color: var(--blush); }

/* small explanatory print */
.fineprint { font-size: 0.78rem; color: var(--ink-mute); margin-top: 1.2rem; max-width: 62ch; }
.section .fineprint { margin-inline: auto; text-align: center; }

/* external-link affordance */
.notice a[rel~="noopener"]::after { content: " \2197"; font-size: 0.85em; }
.btn[rel~="noopener"]::after { content: " \2197"; font-size: 0.85em; margin-left: 0.35em; }

/* ==========================================================================
   Interaction layer (see src/js/alone.js) — every rule here only takes effect
   once the script has run, so the site is never broken without JavaScript.
   ========================================================================== */

/* ---------- the sweep, for browsers without cross-document View Transitions ----------
   Gated on `.vt-fallback`, which the first-paint script sets before anything is drawn. (It used
   to be `@supports not (view-transition-name: root)`, but browsers now exist that support the
   property without supporting transitions between pages — they got neither, just a hard cut.)

   One continuous upward sweep across the page change: on the way out, `.page-veil` (built by
   the script) washes up from the bottom behind a feathered edge; the next page opens under the
   same cream `.page-sweep`, which carries on upward and away. Both are the colour of the page
   itself, and neither snaps, so there is no light-dark-light blink. */
.page-sweep { display: none; }
.page-veil { display: none; }

.vt-fallback .page-sweep,
.vt-fallback .page-veil {
  display: block; position: fixed; left: 0; right: 0; top: -40vh; height: 140vh;
  z-index: 300; pointer-events: none;
  background: linear-gradient(180deg, transparent 0, var(--paper) 24%, var(--paper) 100%);
}
/* arriving: starts over the screen, lifts away upward — so its feathered edge is the bottom one */
.vt-fallback .page-sweep {
  top: 0;
  background: linear-gradient(180deg, var(--paper) 0, var(--paper) 76%, transparent 100%);
}
.vt-fallback .page-sweep.is-sweeping { animation: page-sweep .75s cubic-bezier(.45, 0, .2, 1) .05s both; }
@keyframes page-sweep {
  from { transform: translateY(0); }
  to   { transform: translateY(-105%); }
}
.vt-fallback main { animation: page-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes page-rise {
  from { transform: translateY(14px); }
  to   { transform: none; }
}
/* leaving: rises from below the screen until it covers it */
.vt-fallback .page-veil {
  z-index: 301;
  transform: translateY(105%);
  transition: transform .42s cubic-bezier(.55, 0, .45, 1);
}
.vt-fallback .page-veil.is-up { transform: translateY(0); }
.vt-fallback .page-veil.is-reset { transition: none; }

/* back-to-top — appears once you are well into the page */
.to-top {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 70;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(251,247,239,.92); color: var(--ink);
  backdrop-filter: blur(8px); box-shadow: var(--lift-2);
  font-size: 1.15rem; line-height: 1; display: grid; place-items: center;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, background .25s ease, color .25s ease;
}
.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--blush-deep); color: #fff; border-color: var(--blush-deep); }

/* scroll reveal — opt-in, and only when the script asks for it */
.has-reveal [data-reveal] { opacity: 0; transform: translateY(22px); }
.has-reveal [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}

/* Full-screen drawer, driven by the same checkbox the no-JS menu uses.
   Note it is the HEADER that goes full-screen, not the inner row: the header carries a
   backdrop-filter, and a filtered element becomes the containing block for fixed children — so
   a `position: fixed` inner would be trapped inside the 70px bar. */
.is-menu-open .site-header {
  position: fixed; inset: 0; z-index: 60; border-bottom: 0; box-shadow: none;
  background:
    radial-gradient(70% 50% at 20% 0%, rgba(240,169,143,.28), transparent 60%),
    linear-gradient(170deg, var(--paper-warm), var(--paper));
  backdrop-filter: none;
  overflow-y: auto;
  animation: drawer-in .45s cubic-bezier(.2,.7,.2,1) both;
}
.is-menu-open .site-header__inner {
  flex-direction: column; align-items: flex-start; justify-content: flex-start;
  gap: 0.4rem; padding: 6rem 2rem 3rem; min-height: 100%;
}
.is-menu-open .site-header__inner .nav,
.is-menu-open .site-header__inner .header-actions {
  display: flex; flex-direction: column; align-items: flex-start; width: 100%; gap: 0.4rem;
  flex: 0 0 auto;               /* never stretch to fill the screen */
}
.is-menu-open .site-header__inner .nav a {
  font-family: var(--serif); font-size: var(--step-2); letter-spacing: 0.06em;
  text-transform: none; padding: 0.35rem 0;
}
.is-menu-open .site-header__inner .wordmark { order: -1; margin-bottom: 1.5rem; }
.is-menu-open .menu-toggle { position: fixed; top: 1.1rem; right: 1.4rem; z-index: 61; }
@keyframes drawer-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
/* closing plays the same movement in reverse instead of cutting straight back to the page */
.is-menu-closing .site-header { animation: drawer-out .3s cubic-bezier(.4, 0, .6, 1) both; }
@keyframes drawer-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-10px); }
}

/* modal / lightbox */
.overlay {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(36, 31, 26, .55);
  backdrop-filter: blur(10px) saturate(1.1);
  opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s;
}
.overlay.is-open { opacity: 1; visibility: visible; }
.overlay__panel {
  position: relative; width: min(920px, 100%); max-height: 88vh; overflow: auto;
  background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: var(--lift-3);
  transform: translateY(18px) scale(.985); transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.overlay.is-open .overlay__panel { transform: none; }
.overlay__close {
  position: absolute; top: 0.7rem; right: 0.9rem; z-index: 2;
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(251,247,239,.92); color: var(--ink); font-size: 1.3rem; line-height: 1;
  transition: background .25s, transform .25s;
}
.overlay__close:hover { background: var(--blush); transform: rotate(90deg); }
.quick { display: grid; grid-template-columns: 1fr 1fr; }
.quick__media { background: var(--sand); }
.quick__media img { width: 100%; height: 100%; object-fit: cover; }
.quick__body { padding: clamp(1.4rem, 3vw, 2.6rem); }
.quick__body h2 { font-size: var(--step-2); margin-bottom: 0.4rem; }
.quick__price { font-family: var(--serif); font-size: var(--step-1); color: var(--ink-soft); }
.quick__flag { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--blush-deep); }
.quick__actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: var(--space-3); }
.lightbox { width: 100%; height: auto; border-radius: var(--radius-lg); display: block; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__media { min-height: 340px; order: -1; }
  .pdp { grid-template-columns: 1fr; }
  .pdp__media { position: static; }
  .words { grid-template-columns: repeat(2, 1fr); }
  .words__item { border-bottom: 1px solid var(--line); }
  .quick { grid-template-columns: 1fr; }
  .trust__list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .announce { font-size: 0.56rem; letter-spacing: 0.18em; padding: 0.7em 0.8rem; }
  .nav { display: none; }
  .nav-toggle { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; }
  .menu-toggle {
    display: inline-block; background: none; border: 0; font-size: 0.66rem;
    letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; order: 1;
  }
  .nav-toggle:focus-visible ~ .menu-toggle { outline: 2px solid var(--blush-deep); outline-offset: 3px; }
  .header-actions { gap: 0.8rem; order: 3; flex: 0 0 auto; }
  .header-actions a { font-size: 0.64rem; letter-spacing: 0.12em; }
  .site-header__inner { gap: 0.5rem; padding-block: 0.9rem; flex-wrap: wrap; }
  .wordmark { order: 2; flex: 1 1 auto; }
  /* CSS-only mobile menu. The checkbox sits just before the label; when checked, the two
     nav lists drop to full-width rows beneath the logo row. */
  .nav-toggle:checked ~ .nav--left,
  .nav-toggle:checked ~ .header-actions {
    order: 5; flex: 1 1 100%;
    display: flex; flex-direction: column; align-items: flex-start;
    gap: 0.85rem; padding: 0.9rem 0 0.2rem;
  }
  .nav-toggle:checked ~ .header-actions .nav--right {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.85rem;
  }
  .wordmark__logo { height: 40px; }
  .footer-logo { height: 72px; }
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .split--flip .split__media { order: 0; }
  .words { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .trust__list { grid-template-columns: 1fr; }
  .section { padding-block: var(--space-4); }
  .concept-banner { font-size: 0.68rem; text-align: left; }
  .shop-cta { padding: 0.6em 1.1em; font-size: 0.62rem; }
  .quick__media { max-height: 40vh; }
  /* the drawer already lists everything; a hover panel has no place on a phone */
  .megamenu { display: none; }
}

/* ---------- print ---------- */
@media print {
  .site-header, .announce, .site-footer, .hero__actions, .overlay { display: none; }
  body { background: #fff; }
  body::before, body::after { display: none; }
}

/* ---------- motion, respectfully ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__media img { transform: none !important; }
  .has-reveal [data-reveal] { opacity: 1 !important; transform: none !important; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
  @view-transition { navigation: none; }
}

/* ==========================================================================
   Calm & legibility pass — 2026-09-30. See AI-SLOP-AUDIT-AND-PLAN.md (D1, D3, D5, D8).
   Kept together at the end so the whole pass reads, and reverts, as one block.
   ========================================================================== */

/* D1 — one atmosphere, not five. The paper grain and the three colour glows are gone; Cynthia's
   backdrop slideshow is the texture now. */
body::before, body::after { display: none; }

/* D3 — the smallest text was 0.55–0.68rem with 0.2–0.34em tracking, grey on beige. Readable now. */
.eyebrow { font-size: 0.8rem; letter-spacing: 0.12em; color: var(--ink-soft); }
.announce { font-size: 0.74rem; letter-spacing: 0.16em; }
.nav a { font-size: 0.8rem; letter-spacing: 0.1em; }
.shop-cta { font-size: 0.74rem; letter-spacing: 0.12em; }
.btn { font-size: 0.78rem; letter-spacing: 0.12em; }
.badge, .card__peek, .quick__flag { font-size: 0.72rem; letter-spacing: 0.1em; }
.form label, .prose th, .signup__label { font-size: 0.78rem; letter-spacing: 0.08em; }
.footer-grid h2, .footer-grid h4 { font-size: 0.74rem; letter-spacing: 0.12em; }
.megamenu__label, .megamenu__foot { font-size: 0.74rem; letter-spacing: 0.1em; }
.megamenu__price { font-size: 0.8rem; letter-spacing: 0.02em; }

/* D8 — price and Buy were the least visible things on the card */
.card__price { font-size: 0.95rem; letter-spacing: 0.02em; color: var(--ink); }
.card__buy { font-size: 0.74rem; letter-spacing: 0.1em; }
.card__buy a {
  display: inline-block; color: var(--ink); border: 1px solid var(--ink);
  border-radius: var(--radius-pill); padding: 0.55em 1.3em;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.card:hover .card__buy a, .card__buy a:hover, .card__buy a:focus-visible {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.words__item { padding-block: 1.4rem; }

/* ---------- navigation that moves with the page ----------
   The current-page underline is a real element with its own view-transition-name, so during the
   sweep it glides from one link to the next instead of vanishing and reappearing. */
.nav a[aria-current="page"]::after { transform: scaleX(0); }
.nav__mark {
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--blush-deep); view-transition-name: nav-mark;
}
/* the photograph you clicked flies into place on the product page (named by alone.js only for
   that one image, only for that one navigation) */
::view-transition-group(nav-mark),
::view-transition-group(product-photo) {
  animation-duration: var(--sweep-time); animation-timing-function: var(--sweep-ease);
}
::view-transition-group(product-photo) { overflow: clip; border-radius: var(--radius-lg); }
::view-transition-old(product-photo),
::view-transition-new(product-photo) { height: 100%; object-fit: cover; }

/* the Shop panel shows a larger photograph of whatever you are pointing at */
.megamenu { width: min(820px, calc(100vw - 3rem)); }
.megamenu__body { display: grid; grid-template-columns: 1fr 190px; gap: 1rem; align-items: start; }
.megamenu__preview {
  border-radius: var(--radius); overflow: hidden; background: var(--sand);
  aspect-ratio: 4 / 5;
}
.megamenu__preview img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .28s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.megamenu__preview.is-swapping img { opacity: 0; transform: scale(1.03); }

/* the mobile drawer's links arrive one after another instead of all at once */
@keyframes drawer-item {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.is-menu-open:not(.is-menu-closing) .site-header__inner .nav li,
.is-menu-open:not(.is-menu-closing) .site-header__inner .shop-menu {
  animation: drawer-item .5s cubic-bezier(.2,.7,.2,1) both;
}
.is-menu-open .nav--left li:nth-child(1)  { animation-delay: .08s; }
.is-menu-open .nav--left li:nth-child(2)  { animation-delay: .13s; }
.is-menu-open .nav--right li:nth-child(1) { animation-delay: .18s; }
.is-menu-open .nav--right li:nth-child(2) { animation-delay: .23s; }
.is-menu-open .site-header__inner .shop-menu { animation-delay: .28s; }

@media (max-width: 720px) {
  .announce { font-size: 0.66rem; letter-spacing: 0.1em; }
  .menu-toggle { font-size: 0.76rem; letter-spacing: 0.12em; }
  .header-actions a { font-size: 0.72rem; letter-spacing: 0.08em; }
}
@media (max-width: 1000px) {
  .megamenu__body { grid-template-columns: 1fr; }
  .megamenu__preview { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .is-menu-open .site-header__inner .nav li,
  .is-menu-open .site-header__inner .shop-menu { animation: none !important; }
}


/* ---- basket & checkout (own payments, D11) ------------------------------------------------ */
.basket-link { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: inherit; white-space: nowrap; }
.basket-link__count { display: inline-block; min-width: 1.4em; padding: 0 0.35em; margin-left: 0.3em; border-radius: 1em; background: var(--ink); color: #fff; text-align: center; font-size: 0.7rem; letter-spacing: 0; }
.pdp__form .pdp__options { border: 0; padding: 0; margin: var(--space-4) 0 var(--space-3); }
.pdp__form .pdp__options .eyebrow { margin-bottom: 0.6rem; padding: 0; }
.opt { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0; border-bottom: 1px solid var(--line); font-size: 0.85rem; cursor: pointer; }
.opt input { accent-color: var(--ink); }
.opt__label { flex: 1; }
.opt__price { font-variant-numeric: tabular-nums; }
.pdp__qty { display: flex; align-items: center; gap: 1rem; margin-bottom: var(--space-3); font-size: 0.8rem; letter-spacing: 0.08em; }
.pdp__qty input, .basket__qty input { width: 4.5rem; padding: 0.55rem; border: 1px solid var(--line); background: transparent; font: inherit; }
.form-note { min-height: 1.4em; font-size: 0.82rem; margin: 0.8rem 0 0; }
.basket { max-width: 44rem; margin: 0 auto; }
.basket__lines { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.basket__line { display: grid; grid-template-columns: 1fr auto auto auto; gap: 0.4rem 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.basket__name { grid-column: 1; font-weight: 500; text-decoration: none; color: inherit; }
.basket__opt { grid-column: 1; grid-row: 2; color: var(--ink-mute); font-size: 0.8rem; }
.basket__qty { grid-column: 2; grid-row: 1 / span 2; }
.basket__sum { grid-column: 3; grid-row: 1 / span 2; font-variant-numeric: tabular-nums; }
.basket__rm { grid-column: 4; grid-row: 1 / span 2; background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: var(--ink-mute); }
.basket__subtotal { display: flex; justify-content: space-between; font-size: 1.05rem; margin: var(--space-4) 0 var(--space-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.basket-link__count[hidden] { display: none; }

.page-photo__note { margin-top: 0.5rem; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-mute); }