@charset "UTF-8";
/* ==========================================================================
   KamalaTreats — design system

   Direction: "lacquer and foil". The default surface is a deep red-black —
   lacquerware is red under the gold — with warm gold hairlines. Product
   photography is shot on light backgrounds, so it lifts off a dark ground,
   and gold only reads as foil against dark.

   Three accents, each with one job: gold carries structure and calls to
   action, lacquer red carries emphasis, and green is reserved for "in stock".
   Nothing is coloured for decoration alone.

   The organising device is the compartment grid: cells that share hairline
   edges rather than floating as separate cards, taken from the divided gift
   platters in the catalogue. The other device is the numeral — this catalogue
   speaks in counts (18 PCS, 4 in a pack, 2 in a set, 250g), so counts are set
   large in the serif and used as the variant interface.

   No webfonts, no frameworks, no external requests of any kind.
   ========================================================================== */

/* --------------------------------------------------------------- tokens */
:root {
  color-scheme: dark light;

  /* Lacquer — the tin. Red-black rather than green-black: lacquerware is red
     under the gold, and a green ground left no room for the foil to read. */
  --ground:        #100A0A;
  --surface:       #191110;
  --surface-lift:  #241917;
  --hairline:      #3A2A22;
  --hairline-soft: #261B17;

  /* Foil — the primary accent, and the brand's own gold. */
  --foil:      #D4AF37;
  --foil-lit:  #F2DFA4;
  --foil-dim:  #8E7430;

  /* Paper — type on lacquer */
  --paper:      #F7F1E6;
  --paper-dim:  #BEB4A6;
  --paper-mute: #8E8478;

  /* Lacquer red — the emphasis accent. Used deliberately and sparingly:
     the hero's emphasised word, product ribbons, selection. */
  --red:     #A8283A;
  --red-lit: #D34457;

  /* Green now does exactly one job — "in stock" — which is where it earns
     its keep. Alert red is hotter than the brand red so a genuine error is
     never mistaken for decoration (and never relies on colour alone). */
  --leaf:      #4E9E6A;
  --cranberry: #E4586B;

  --ff-display: "Iowan Old Style", "Palatino Linotype", Palatino, Cambria, Georgia, "Times New Roman", serif;
  --ff-body: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
             "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step--1: 0.8125rem;
  --step-0:  1.0625rem;
  --step-1:  1.1875rem;
  --step-2:  clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
  --step-3:  clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  --step-4:  clamp(2.25rem, 1.5rem + 3.4vw, 3.5rem);
  --step-5:  clamp(2.75rem, 1.2rem + 6.4vw, 5.75rem);

  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --measure: 34rem;
  --shell: 78rem;
  --radius: 2px;
  --radius-img: 3px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Light mode is a genuine alternative rather than an inversion: the paper
   warms, the lacquer becomes ink, and the foil darkens enough to pass
   contrast on a light ground. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground:        #FBF5EC;
    --surface:       #FFFDF9;
    --surface-lift:  #FFFFFF;
    --hairline:      #E0D3C0;
    --hairline-soft: #EDE4D6;
    --foil:          #92701F;
    --foil-lit:      #6F5416;
    --foil-dim:      #B49A5C;
    --paper:         #1C1210;
    --paper-dim:     #57493F;
    --paper-mute:    #7C6D61;
    --red:           #98202F;
    --red-lit:       #7C1A27;
    --leaf:          #2C6B45;
    --cranberry:     #B03144;
  }
}

:root[data-theme="light"] {
  --ground:        #FBF5EC;
  --surface:       #FFFDF9;
  --surface-lift:  #FFFFFF;
  --hairline:      #E0D3C0;
  --hairline-soft: #EDE4D6;
  --foil:          #92701F;
  --foil-lit:      #6F5416;
  --foil-dim:      #B49A5C;
  --paper:         #1C1210;
  --paper-dim:     #57493F;
  --paper-mute:    #7C6D61;
  --red:           #98202F;
  --red-lit:       #7C1A27;
  --leaf:          #2C6B45;
  --cranberry:     #B03144;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--ground);
  color: var(--paper);
  font-family: var(--ff-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--foil-lit);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--red); color: #FFF3E4; }

/* ----------------------------------------------------------- typography */
h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); letter-spacing: -0.01em; }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }

.display {
  font-family: var(--ff-display);
  font-size: var(--step-5);
  line-height: 0.98;
  letter-spacing: -0.028em;
  font-weight: 600;
}

/* The eyebrow is a locator, not decoration: it always names the section or
   the collection the reader is currently inside. */
.eyebrow {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--foil);
  font-weight: 600;
  display: block;
}

.lede { font-size: var(--step-1); color: var(--paper-dim); max-width: var(--measure); }
.muted { color: var(--paper-dim); }
.small { font-size: var(--step--1); }

/* Counts and prices. Old-style figures in the serif are the one piece of
   typographic personality available without loading a webfont, and this
   catalogue is full of counts worth setting properly. */
.numeral {
  font-family: var(--ff-display);
  font-variant-numeric: oldstyle-nums tabular-nums;
  letter-spacing: -0.01em;
}

.price { font-family: var(--ff-display); font-variant-numeric: tabular-nums; font-weight: 600; }
.price--was { color: var(--paper-mute); text-decoration: line-through; font-weight: 400; }

/* -------------------------------------------------------------- layout */
.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
@media (max-width: 40rem) { .shell { width: min(100% - 1.75rem, var(--shell)); } }

.section { padding-block: var(--sp-9); }
.section--tight { padding-block: var(--sp-7); }
.section + .section { padding-top: 0; }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.rule { height: 1px; background: var(--hairline); border: 0; }

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-5);
  flex-wrap: wrap;
  padding-bottom: var(--sp-5);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--hairline);
}
.section-head p { max-width: 46ch; color: var(--paper-dim); margin-top: var(--sp-2); }

/* --------------------------------------------------------------- links */
.link {
  color: var(--foil);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  border-bottom: 1px solid color-mix(in srgb, var(--foil) 40%, transparent);
  padding-bottom: 2px;
  transition: border-color .25s var(--ease), gap .25s var(--ease);
}
.link:hover { border-color: var(--foil); gap: 0.8em; }
.link::after { content: "\2192"; }

.prose a { color: var(--foil-lit); text-decoration-color: color-mix(in srgb, var(--foil) 50%, transparent); }
.prose a:hover { text-decoration-color: currentColor; }

/* -------------------------------------------------------------- buttons */
.btn {
  --btn-bg: var(--foil);
  --btn-fg: #1A1008;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.95rem 1.6rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--btn-bg);
  transition: transform .18s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
  text-align: center;
}
.btn:hover { background: var(--foil-lit); border-color: var(--foil-lit); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--paper); border-color: var(--hairline); }
.btn--ghost:hover { background: var(--surface-lift); border-color: var(--foil); color: var(--paper); }

.btn--block { width: 100%; }
.btn--lg { padding: 1.15rem 2rem; font-size: 0.9375rem; }

/* --------------------------------------------------- the compartment grid
   Cells share hairline edges instead of floating apart, the way the dividers
   in a gift platter do. Negative margins on the container hide the outer
   rules so the block reads as one tray. */
.tray {
  display: grid;
  gap: 0;
  grid-auto-flow: dense;
  border-top: 1px solid var(--hairline);
  border-left: 1px solid var(--hairline);
}
.tray > * {
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  min-width: 0;
}
.tray--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tray--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tray--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 62rem) { .tray--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 48rem) {
  .tray--4, .tray--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 30rem) {
  /* Product grids stay two-up on phones — cards are mostly image, and one-up
     turns a 50-product listing into an unscannable column. Text-led
     compartments do collapse to one, because their copy needs the width. */
  .tray--3, .tray--2 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------- product card */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  text-decoration: none;
  position: relative;
  transition: background-color .3s var(--ease);
  isolation: isolate;
}
.card:hover { background: var(--surface-lift); }

.card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-lift);
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
.card:hover .card__media img { transform: scale(1.045); }

.card__empty {
  display: grid;
  place-items: center;
  height: 100%;
  color: var(--paper-mute);
  font-family: var(--ff-display);
  font-size: var(--step-2);
  padding: var(--sp-4);
  text-align: center;
}

.card__body { padding: var(--sp-4) var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.card__cat { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--foil-dim); }
.card__name { font-family: var(--ff-display); font-size: var(--step-1); line-height: 1.2; font-weight: 600; }
.card__foot { margin-top: auto; padding-top: var(--sp-3); display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.card__price { font-size: var(--step-1); }
.card__opts { font-size: var(--step--1); color: var(--paper-mute); }

/* A ribbon states a fact from the data — stocked out, or how many options
   exist — and never carries marketing language. */
.ribbon {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: 1;
  background: var(--red);
  color: #FFF3E4;
  border: 1px solid var(--red-lit);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius);
}
.ribbon--out { background: var(--surface); color: var(--paper-dim); border-color: var(--hairline); }

/* -------------------------------------------------------------- header */
.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--hairline-soft);
}
.masthead__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: 4.5rem;
}
.wordmark {
  font-family: var(--ff-display);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  /* No gap: "Kamala" and <b>Treats</b> are separate flex items, so a gap here
     would split the name. KamalaTreats is one word. The logo gets a margin. */
  gap: 0;
  white-space: nowrap;
}
.wordmark img { width: 30px; height: 30px; object-fit: contain; margin-inline-end: 0.6rem; }
.wordmark b { color: var(--foil); font-weight: inherit; }

.mainnav { display: flex; align-items: center; gap: var(--sp-5); margin-inline-start: auto; }
.mainnav a, .mainnav .navtop {
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--paper-dim);
  padding: 0.4rem 0;
  transition: color .2s var(--ease);
  white-space: nowrap;
}
.mainnav a:hover, .mainnav a[aria-current="page"] { color: var(--foil); }

.navgroup { position: relative; }
.navtop { display: inline-flex; align-items: center; gap: 0.4rem; }
.navtop::after {
  content: ""; width: 5px; height: 5px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s var(--ease);
}
.navgroup[data-open="true"] .navtop::after { transform: rotate(225deg) translateY(-2px); }
.navgroup[data-open="true"] .navtop { color: var(--foil); }

.navmenu {
  position: absolute;
  top: calc(100% + 0.65rem);
  inset-inline-start: -1rem;
  min-width: 15rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: var(--sp-2);
  display: none;
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / .7);
}
.navgroup[data-open="true"] .navmenu { display: block; }
.navmenu a { display: block; padding: 0.55rem 0.75rem; letter-spacing: 0.06em; }
.navmenu a:hover { background: var(--surface-lift); }

.masthead__tools { display: flex; align-items: center; gap: var(--sp-2); }

.tool {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--paper-dim);
  text-decoration: none;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.tool:hover { color: var(--foil); border-color: var(--hairline); }
.tool__count {
  font-variant-numeric: tabular-nums;
  background: var(--foil);
  color: #1A1008;
  border-radius: 999px;
  min-width: 1.35rem;
  padding: 0 0.35rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.35rem;
}
.tool__count[data-count="0"] { background: var(--hairline); color: var(--paper-dim); }

.burger { display: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; color: var(--paper); }
.burger span, .burger span::before, .burger span::after {
  content: ""; display: block; width: 20px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), opacity .2s;
}
.burger span::before { transform: translateY(-6px); }
.burger span::after  { transform: translateY(4.5px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(-1.5px); }

@media (max-width: 60rem) {
  .burger { display: inline-flex; order: -1; margin-inline-start: -0.6rem; }
  .mainnav {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ground);
    border-bottom: 1px solid var(--hairline);
    padding: var(--sp-4) 1.25rem var(--sp-6);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    display: none;
  }
  .mainnav[data-open="true"] { display: flex; }
  .mainnav > * { border-bottom: 1px solid var(--hairline-soft); }
  .mainnav a, .mainnav .navtop { padding: 0.9rem 0; font-size: 0.9375rem; width: 100%; }
  .navmenu { position: static; border: 0; box-shadow: none; padding: 0 0 var(--sp-3) var(--sp-4); min-width: 0; }
  .wordmark { margin-inline: auto; }
  .masthead__tools { margin-inline-start: 0; }
}

/* ---------------------------------------------------------------- hero
   The lid: one photograph, the wordmark, one sentence. Everything else waits
   below the fold. */
.hero {
  position: relative;
  border-bottom: 1px solid var(--hairline);
  overflow: hidden;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: var(--sp-8);
  padding-block: clamp(3rem, 7vw, 6.5rem);
}
.hero__copy { max-width: 32rem; }
.hero__copy .display { margin-block: var(--sp-4) var(--sp-5); }
.hero__copy .display em { font-style: normal; color: var(--red-lit); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--hairline);
}
.hero__fact { min-width: 7rem; }
.hero__fact dt { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--paper-mute); }
.hero__fact dd { font-family: var(--ff-display); font-size: var(--step-2); font-variant-numeric: oldstyle-nums; margin-top: 0.2rem; }

/* The single 3D moment on the site: the hero image sits on a perspective
   plane and lifts on load, like a lid coming off. Nothing else tilts. */
.hero__stage { perspective: 1400px; }
.hero__plate {
  position: relative;
  border: 1px solid var(--hairline);
  background: var(--surface);
  padding: var(--sp-3);
  transform: rotateY(-7deg) rotateX(3deg) translateZ(0);
  transform-style: preserve-3d;
  box-shadow: -30px 40px 80px -40px rgb(0 0 0 / .8);
  transition: transform .9s var(--ease);
  will-change: transform;
}
.hero__plate img { aspect-ratio: 5 / 6; object-fit: cover; width: 100%; border-radius: var(--radius-img); }
.hero__plate::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--foil) 22%, transparent);
  transform: translateZ(26px);
  pointer-events: none;
}
.hero__stage:hover .hero__plate { transform: rotateY(-3deg) rotateX(1.5deg); }

@media (max-width: 62rem) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--sp-7); }
  .hero__stage { order: -1; max-width: 26rem; }
  .hero__plate { transform: none; box-shadow: 0 30px 60px -40px rgb(0 0 0 / .8); }
}

/* ------------------------------------------------------- collection tray */
.compartment {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-6);
  padding: var(--sp-6);
  background: var(--surface);
  text-decoration: none;
  min-height: 13.5rem;
  transition: background-color .3s var(--ease);
}
.compartment:hover { background: var(--surface-lift); }
.compartment h3 { font-size: var(--step-2); }
.compartment p { color: var(--paper-dim); font-size: var(--step--1); margin-top: var(--sp-2); }
.compartment__count { font-family: var(--ff-display); font-variant-numeric: oldstyle-nums; color: var(--foil); font-size: var(--step-1); }
.compartment--wide { grid-column: span 2; }
@media (max-width: 30rem) { .compartment--wide { grid-column: span 1; } }

/* -------------------------------------------------------- product detail */
/* minmax(0,…) rather than 1fr: a bare 1fr track has an auto minimum, so one
   long word or a wide table pushes the column past the viewport instead of
   shrinking. That is what made the cart scroll sideways on a phone. */
.pdp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; padding-block: var(--sp-7); }
.pdp--cart     { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.pdp--checkout { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

/* Single column on tablets and phones. These modifiers used to be inline
   style attributes, which outrank a media query — so the cart and checkout
   stayed two-up on mobile and overflowed. */
@media (max-width: 62rem) {
  .pdp, .pdp--cart, .pdp--checkout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
}

.gallery { position: sticky; top: 6rem; }
@media (max-width: 62rem) { .gallery { position: static; } }

.gallery__main {
  border: 1px solid var(--hairline);
  background: var(--surface);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.gallery__empty { display: grid; place-items: center; height: 100%; color: var(--paper-mute); text-align: center; padding: var(--sp-6); font-family: var(--ff-display); }

.gallery__thumbs { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }
.gallery__thumb {
  width: 4.5rem; aspect-ratio: 1; padding: 0;
  border: 1px solid var(--hairline);
  background: var(--surface);
  overflow: hidden;
  transition: border-color .2s var(--ease);
}
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb[aria-current="true"] { border-color: var(--foil); }
.gallery__thumb:hover { border-color: var(--foil-dim); }

.pdp__head { border-bottom: 1px solid var(--hairline); padding-bottom: var(--sp-5); }
.pdp__head h1 { margin-block: var(--sp-3) var(--sp-4); }
.pdp__price { font-size: var(--step-3); }
.pdp__priceline { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }

.stockline { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); color: var(--leaf); }
.stockline::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stockline--out { color: var(--cranberry); }

/* The signature: variants as a row of counts. The number is the thing being
   chosen, so it is set large in the serif and the label sits underneath. */
.counts { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--hairline); }
.count {
  flex: 1 1 auto;
  min-width: 7.5rem;
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  text-decoration: none;
  background: var(--surface);
  border-inline-end: 1px solid var(--hairline);
  transition: background-color .25s var(--ease), color .25s var(--ease);
  display: block;
}
.count:last-child { border-inline-end: 0; }
.count:hover { background: var(--surface-lift); }
.count[aria-current="true"] { background: var(--foil); color: #1A1008; }
.count[aria-current="true"] .count__price { color: #1A1008; opacity: .78; }
.count__n {
  display: block;
  font-family: var(--ff-display);
  font-variant-numeric: oldstyle-nums tabular-nums;
  font-size: var(--step-3);
  line-height: 1;
  font-weight: 600;
}
.count__unit { display: block; font-size: 0.625rem; letter-spacing: 0.16em; text-transform: uppercase; margin-top: 0.45rem; opacity: .85; }
.count__price { display: block; font-size: var(--step--1); margin-top: 0.35rem; color: var(--paper-mute); font-variant-numeric: tabular-nums; }

.buybox { border: 1px solid var(--hairline); background: var(--surface); padding: var(--sp-5); }
.buybox__row { display: flex; gap: var(--sp-3); align-items: stretch; }

.qty { display: inline-flex; align-items: stretch; border: 1px solid var(--hairline); border-radius: var(--radius); }
.qty button { width: 2.75rem; color: var(--paper-dim); font-size: 1.1rem; transition: color .2s; }
.qty button:hover { color: var(--foil); }
.qty input {
  width: 3rem; text-align: center; background: none; border: 0;
  font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.trust { display: grid; gap: var(--sp-3); margin-top: var(--sp-5); padding-top: var(--sp-5); border-top: 1px solid var(--hairline-soft); }
.trust li { display: flex; gap: 0.65rem; font-size: var(--step--1); color: var(--paper-dim); list-style: none; }
.trust li::before { content: "\2014"; color: var(--foil); flex: none; }

.spec { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.spec th, .spec td { text-align: start; padding: 0.7rem 0; border-bottom: 1px solid var(--hairline-soft); vertical-align: top; }
.spec th { color: var(--paper-mute); font-weight: 500; width: 40%; }

/* ------------------------------------------------------------- editorial */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { font-size: var(--step-2); margin-top: var(--sp-7); }
.prose h3 { font-size: var(--step-1); margin-top: var(--sp-5); }
.prose ul, .prose ol { padding-inline-start: 1.25rem; }
.prose li + li { margin-top: var(--sp-2); }
.prose strong { color: var(--paper); font-weight: 650; }
.prose p { color: var(--paper-dim); }

.article-head { padding-block: var(--sp-8) var(--sp-6); border-bottom: 1px solid var(--hairline); }
.article-meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--step--1); color: var(--paper-mute); margin-top: var(--sp-4); }

.entry { display: block; padding: var(--sp-6); background: var(--surface); text-decoration: none; transition: background-color .3s var(--ease); height: 100%; }
.entry:hover { background: var(--surface-lift); }
.entry h3 { margin-block: var(--sp-3) var(--sp-3); font-size: var(--step-2); }
.entry p { color: var(--paper-dim); font-size: var(--step--1); }
.entry__meta { margin-top: var(--sp-4); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-mute); }

/* --------------------------------------------------------------- accordion */
.qa { border-bottom: 1px solid var(--hairline); }
.qa summary {
  cursor: pointer;
  padding: var(--sp-4) 0;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  align-items: baseline;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; color: var(--foil); font-size: 1.25rem; line-height: 1; flex: none; }
.qa[open] summary::after { content: "\2013"; }
.qa__body { padding-bottom: var(--sp-5); color: var(--paper-dim); max-width: 60ch; }

/* ------------------------------------------------------------ cart/forms */
.field { display: grid; gap: 0.45rem; }
.field > span { font-size: var(--step--1); color: var(--paper-dim); }
.field .req { color: var(--foil); }
.input {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease);
}
.input:focus { border-color: var(--foil); outline-offset: 1px; }
.input::placeholder { color: var(--paper-mute); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
@media (max-width: 40rem) { .grid-2 { grid-template-columns: 1fr; } }

.lineitem { display: grid; grid-template-columns: 6rem 1fr auto; gap: var(--sp-4); padding: var(--sp-5) 0; border-bottom: 1px solid var(--hairline); align-items: start; }
.lineitem__media { aspect-ratio: 1; background: var(--surface); border: 1px solid var(--hairline); overflow: hidden; }
.lineitem__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 40rem) { .lineitem { grid-template-columns: 4.5rem 1fr; } .lineitem__total { grid-column: 2; text-align: end; } }

.summary { border: 1px solid var(--hairline); background: var(--surface); padding: var(--sp-5); position: sticky; top: 6rem; }
@media (max-width: 62rem) { .summary { position: static; } }
.summary__row { display: flex; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-2) 0; font-size: var(--step--1); color: var(--paper-dim); }
.summary__row--total { border-top: 1px solid var(--hairline); margin-top: var(--sp-3); padding-top: var(--sp-4); font-size: var(--step-1); color: var(--paper); }
.summary__row--total b { font-family: var(--ff-display); font-variant-numeric: tabular-nums; }

.progress { height: 3px; background: var(--hairline); overflow: hidden; margin-block: var(--sp-3) var(--sp-2); }
.progress i { display: block; height: 100%; background: var(--foil); transition: width .5s var(--ease); }

.notice { border: 1px solid var(--hairline); border-inline-start: 2px solid var(--foil); background: var(--surface); padding: var(--sp-4) var(--sp-5); font-size: var(--step--1); color: var(--paper-dim); }
.notice--bad { border-inline-start-color: var(--cranberry); }
.notice--good { border-inline-start-color: var(--leaf); }

/* ------------------------------------------------------------ empty state */
.empty { text-align: center; padding-block: var(--sp-9); max-width: 34rem; margin-inline: auto; }
.empty h1, .empty h2 { margin-bottom: var(--sp-4); }
.empty p { color: var(--paper-dim); margin-bottom: var(--sp-6); }

/* ------------------------------------------------------------ breadcrumbs */
.crumbs { padding-block: var(--sp-4); font-size: var(--step--1); color: var(--paper-mute); border-bottom: 1px solid var(--hairline-soft); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; }
.crumbs li:not(:last-child)::after { content: "/"; margin-inline-start: 0.5rem; color: var(--hairline); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--foil); }
.crumbs [aria-current="page"] { color: var(--paper-dim); }

/* ---------------------------------------------------------------- toolbar */
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); flex-wrap: wrap; padding-block: var(--sp-4); border-bottom: 1px solid var(--hairline); margin-bottom: var(--sp-6); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  font-size: var(--step--1);
  text-decoration: none;
  color: var(--paper-dim);
  transition: border-color .2s var(--ease), color .2s var(--ease);
  white-space: nowrap;
}
.chip:hover { border-color: var(--foil); color: var(--foil); }
.chip[aria-current="true"] { background: var(--foil); border-color: var(--foil); color: #1A1008; font-weight: 600; }

.pager { display: flex; gap: var(--sp-2); justify-content: center; align-items: center; margin-top: var(--sp-7); flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 2.75rem; padding: 0.6rem 0.75rem; text-align: center;
  border: 1px solid var(--hairline); text-decoration: none; font-variant-numeric: tabular-nums;
  font-size: var(--step--1); border-radius: var(--radius);
}
.pager a:hover { border-color: var(--foil); color: var(--foil); }
.pager [aria-current="page"] { background: var(--foil); border-color: var(--foil); color: #1A1008; font-weight: 700; }
.pager .is-gap { border: 0; }

/* --------------------------------------------------------------- footer */
.sitefoot { margin-top: auto; border-top: 1px solid var(--hairline); background: var(--surface); }
.sitefoot__top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-7); padding-block: var(--sp-8) var(--sp-7); }
@media (max-width: 62rem) { .sitefoot__top { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } }
@media (max-width: 34rem) { .sitefoot__top { grid-template-columns: 1fr; } }

.sitefoot h2 { font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--foil); font-family: var(--ff-body); font-weight: 700; margin-bottom: var(--sp-4); }
.sitefoot ul { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
.sitefoot a { text-decoration: none; color: var(--paper-dim); font-size: var(--step--1); transition: color .2s var(--ease); }
.sitefoot a:hover { color: var(--foil); }
.sitefoot__legal { display: flex; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding-block: var(--sp-5); border-top: 1px solid var(--hairline); font-size: var(--step--1); color: var(--paper-mute); }
.sitefoot__legal ul { display: flex; gap: var(--sp-4); flex-wrap: wrap; }

/* --------------------------------------------------------------- utility */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; inset-block-start: -100%; inset-inline-start: var(--sp-4); z-index: 100;
  background: var(--foil); color: #1A1008; padding: 0.75rem 1.25rem; font-weight: 700; text-decoration: none;
}
.skip:focus { inset-block-start: var(--sp-3); }

.flow-2 { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }

/* Toast for cart feedback. Announced politely rather than stealing focus. */
.toast {
  position: fixed;
  inset-block-end: var(--sp-5);
  inset-inline-end: var(--sp-5);
  z-index: 80;
  background: var(--surface-lift);
  border: 1px solid var(--foil-dim);
  border-inline-start: 2px solid var(--foil);
  padding: var(--sp-4) var(--sp-5);
  max-width: 22rem;
  box-shadow: 0 24px 48px -24px rgb(0 0 0 / .8);
  transform: translateY(1rem);
  opacity: 0;
  pointer-events: none;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.toast[data-show="true"] { transform: translateY(0); opacity: 1; pointer-events: auto; }
.toast strong { display: block; font-family: var(--ff-display); font-size: var(--step-1); }
.toast a { color: var(--foil); font-size: var(--step--1); }
@media (max-width: 34rem) { .toast { inset-inline: var(--sp-4); max-width: none; } }

/* Reveal on scroll now lives in the Motion block at the end of this file and
   is driven by assets/js/motion-kit.js. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .hero__plate, .hero__stage:hover .hero__plate { transform: none; }
  .card:hover .card__media img { transform: none; }
}

/* ------------------------------------------------------ mobile buy bar
   On phones the add-to-cart control scrolls away long before the shopper has
   finished reading, so it comes back as a fixed bar once the real buybox
   leaves the viewport. The bar has no logic of its own — its button submits
   the same form, so the selected variant and quantity are always in step. */
.buybar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  display: none;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid var(--hairline);
  transform: translateY(110%);
  transition: transform .3s var(--ease);
}
.buybar__info { flex: 1; min-width: 0; }
.buybar__name {
  display: block;
  font-family: var(--ff-display);
  font-size: 1rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.buybar__price { display: block; font-size: var(--step--1); color: var(--foil); font-variant-numeric: tabular-nums; }
.buybar .btn { flex: none; padding-inline: 1.25rem; }

@media (max-width: 62rem) {
  .page-product .buybar { display: flex; }
  .page-product .buybar[data-show="true"] { transform: none; }
  /* Keep the bar from covering the last of the footer links. */
  .page-product .sitefoot__legal { padding-bottom: 5.5rem; }
  .page-product .toast { inset-block-end: 5.5rem; }
}

/* ---------------------------------------------------------- phone tuning */
@media (max-width: 30rem) {
  .card__body { padding: var(--sp-3) var(--sp-3) var(--sp-4); }
  .card__name { font-size: 1rem; }
  .card__price { font-size: 1rem; }
  .card__opts { display: none; }
  .card__foot { flex-direction: column; align-items: start; gap: 0.15rem; }

  .compartment { padding: var(--sp-5); min-height: auto; gap: var(--sp-4); }
  .section { padding-block: var(--sp-7); }
  .hero__facts { gap: var(--sp-5); }

  /* Options wrap to a grid rather than shrinking below a readable width. */
  .counts { display: grid; grid-template-columns: 1fr 1fr; }
  .count { min-width: 0; border-block-end: 1px solid var(--hairline); }
  .count:nth-child(2n) { border-inline-end: 0; }

  .buybox { padding: var(--sp-4); }
  .buybox__row { flex-wrap: wrap; }
  .buybox__row .btn { flex: 1 1 100%; }

  .gallery__thumb { width: 3.75rem; }
  .toolbar { gap: var(--sp-3); }
  .pager a, .pager span { min-width: 2.5rem; padding: 0.55rem 0.5rem; }
}

/* Comfortable tap targets on anything touch-driven. */
@media (pointer: coarse) {
  .tool { min-height: 44px; min-width: 44px; justify-content: center; }
  .mainnav a, .mainnav .navtop { min-height: 44px; align-items: center; display: flex; }
  .qty button { min-width: 44px; }
  .gallery__thumb { min-width: 44px; min-height: 44px; }
  .chip { padding: 0.6rem 1rem; }
  .qa summary { padding-block: var(--sp-4); min-height: 44px; }
}

@media print {
  .masthead, .sitefoot, .toast, .crumbs, .buybar { display: none; }
  body { background: #fff; color: #000; }
}

/* ====================================================== collection accents
   Each collection carries a colour from the original site's palette (see
   COLLECTIONS in app/lib/brand.php), passed in as --accent. It is used only
   where it identifies something — the category label on a card, the count on
   a tile, the edge that lights up on hover — never as background decoration,
   so the page gains colour without losing the lacquer ground. */

.compartment { position: relative; }
.compartment::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--accent, var(--foil));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.compartment:hover::before,
.compartment:focus-visible::before { transform: scaleX(1); }
.compartment__count { color: var(--accent, var(--foil)); }

.card__cat { color: var(--accent, var(--foil-dim)); }
.card::after {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  background: var(--accent, var(--foil));
  opacity: 0;
  transition: opacity .3s var(--ease);
  z-index: 2;
}
.card:hover::after { opacity: 1; }

/* Collection pages take their accent from the collection being viewed. */
.page-listing .eyebrow { color: var(--accent, var(--foil)); }

/* ============================================================ louder colour
   The accents now carry weight rather than hinting. Collection tiles are
   filled with their own colour, every card wears its collection's stripe,
   and the gold CTA gets the gradient the original site used.

   Tints are mixed *into the dark surface* rather than laid over it, so the
   fill stays dark enough for --paper text to keep its contrast — the colour
   gets loud without the type getting hard to read. */

.compartment {
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--accent, var(--foil)) 26%, var(--surface)) 0%,
      color-mix(in srgb, var(--accent, var(--foil)) 8%, var(--surface)) 62%,
      var(--surface) 100%);
  border-color: color-mix(in srgb, var(--accent, var(--foil)) 35%, var(--hairline));
  transition: background .35s var(--ease), transform .35s var(--ease);
}
.compartment:hover {
  background:
    linear-gradient(155deg,
      color-mix(in srgb, var(--accent, var(--foil)) 40%, var(--surface)) 0%,
      color-mix(in srgb, var(--accent, var(--foil)) 16%, var(--surface)) 70%,
      var(--surface) 100%);
}
/* The top edge is always lit now, so a tile reads as "its colour" at a glance. */
.compartment::before { transform: scaleX(1); height: 3px; }
.compartment h3 { color: var(--paper); }
.compartment__count {
  color: color-mix(in srgb, var(--accent, var(--foil)) 65%, var(--paper));
  font-weight: 600;
}

/* Every product card wears its collection's colour, not only on hover. */
.card::after { opacity: 1; height: 3px; }
.card__cat {
  color: color-mix(in srgb, var(--accent, var(--foil)) 70%, var(--paper));
  font-weight: 700;
}
.card:hover { background: color-mix(in srgb, var(--accent, var(--foil)) 9%, var(--surface-lift)); }

/* The gold gradient from the original site. */
.btn {
  background: linear-gradient(135deg, var(--foil) 0%, var(--foil-lit) 100%);
  border-color: var(--foil);
}
.btn:hover { background: linear-gradient(135deg, var(--foil-lit) 0%, var(--foil) 100%); }
.btn--ghost { background: transparent; }
.btn--ghost:hover { background: var(--surface-lift); }

/* Section heads get a coloured rule instead of a grey hairline. */
.section-head {
  border-bottom: 0;
  position: relative;
  padding-bottom: var(--sp-4);
}
.section-head::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent, var(--foil)), transparent 55%);
}

/* A warm wash behind the hero so the fold is not flat black. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(70% 90% at 12% 0%, color-mix(in srgb, var(--red) 26%, transparent), transparent 65%),
    radial-gradient(60% 80% at 95% 100%, color-mix(in srgb, var(--foil) 16%, transparent), transparent 70%);
}
.hero__inner { position: relative; z-index: 1; }

.eyebrow { color: color-mix(in srgb, var(--accent, var(--foil)) 75%, var(--foil-lit)); }

/* Three houses: give each its own colour too, so that row is not the one
   grey block on an otherwise colourful page. */
.tray--3 > .compartment:nth-child(3n+1) { --accent: #E08A3C; }
.tray--3 > .compartment:nth-child(3n+2) { --accent: #E4739B; }
.tray--3 > .compartment:nth-child(3n+3) { --accent: #4E93B8; }

.entry { border-block-start: 3px solid var(--accent, var(--foil)); }
.tray--3 > .entry:nth-child(3n+1) { --accent: #D4AF37; }
.tray--3 > .entry:nth-child(3n+2) { --accent: #9A6FB0; }
.tray--3 > .entry:nth-child(3n+3) { --accent: #4E9E6A; }

@media (prefers-reduced-motion: reduce) {
  .compartment, .compartment:hover { transition: none; }
}

/* Checkout's delivery-method tiles are compartments too, and they hold form
   controls — keep those plain rather than tinted. */
.page-utility .compartment { background: var(--surface); border-color: var(--hairline); }
.page-utility .compartment::before { display: none; }

/* -------------------------------------------------------------- typeahead */
.typeahead-wrap { position: relative; flex: 1 1 22rem; max-width: 26rem; }
.typeahead-wrap .input { width: 100%; max-width: none !important; }

.typeahead {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 0.4rem);
  z-index: 60;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 28px 56px -28px rgb(0 0 0 / .8);
  max-height: 26rem;
  overflow-y: auto;
}

.typeahead__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.75rem;
  text-decoration: none;
  border-bottom: 1px solid var(--hairline-soft);
  border-inline-start: 3px solid transparent;
}
.typeahead__item:last-of-type { border-bottom: 0; }
.typeahead__item:hover,
.typeahead__item[aria-selected="true"] {
  background: var(--surface-lift);
  border-inline-start-color: var(--accent, var(--foil));
}

.typeahead__item img,
.typeahead__noimg {
  width: 2.75rem; height: 2.75rem; flex: none;
  object-fit: cover; border-radius: 2px;
  background: var(--surface-lift); border: 1px solid var(--hairline);
}

.typeahead__text { flex: 1; min-width: 0; }
.typeahead__name {
  display: block; font-family: var(--ff-display); font-size: 1rem; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.typeahead__meta { display: block; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent, var(--paper-mute)); }
.typeahead__price { font-family: var(--ff-display); font-variant-numeric: tabular-nums; font-size: 0.875rem; flex: none; }

.typeahead__all, .typeahead__empty {
  display: block; padding: 0.7rem 0.75rem; text-align: center;
  font-size: var(--step--1); color: var(--foil); text-decoration: none;
  border-top: 1px solid var(--hairline);
}
.typeahead__empty { color: var(--paper-mute); border-top: 0; }

/* ==========================================================================
   Motion
   --------------------------------------------------------------------------
   The only job of this block is to hold revealable elements back until the
   motion kit brings them in. It is scoped to html.anim, which the inline head
   script sets ONLY when the browser can run the kit and the visitor has not
   asked for reduced motion — and which it removes again if the module never
   loads. So the failure mode is always "visible", never "blank".

   :not([data-revealed]) matters: the kit clears its inline styles when an
   animation finishes, and without this the rule would snap the element back
   to invisible.
   ========================================================================== */

.anim [data-reveal]:not([data-revealed]),
.anim [data-reveal-group] > *:not([data-revealed]) {
  opacity: 0;
}

/* Hint the compositor on the few things that animate on scroll, and take the
   hint back once they have arrived. */
.anim [data-parallax],
.anim [data-reveal]:not([data-revealed]) {
  will-change: transform, opacity;
}
.anim [data-revealed] {
  will-change: auto;
}

[data-lift],
[data-press] {
  /* Motion writes transform inline; keep the browser from fighting it with a
     CSS transition on the same property. */
  transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

[data-scroll-progress] {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--foil-dim), var(--foil-lit), var(--red-lit));
  z-index: 60;
}

/* Belt and braces. If anything above ever escapes its scope, this wins. */
@media (prefers-reduced-motion: reduce) {
  .anim [data-reveal],
  .anim [data-reveal-group] > * {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-scroll-progress] { display: none; }
}