/* ===========================================================================
   Ada's — design system
   ---------------------------------------------------------------------------
   Bento cards. Cool, light, near-colourless canvas. The food carries the colour.
   Two typefaces. A great deal of air. Motion you notice only if you look.
   =========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */

:root {
  /* Colour — cool, light, close in value.
     The interface stays nearly colourless so that fifteen very different
     photographs can sit on it without fighting each other. */
  --paper:       #F7FAFD;   /* palest blue-white — the page */
  --mist:        #E7F0F8;   /* light blue — alternating sections */
  --mist-deep:   #D5E4F0;   /* light blue, one step deeper — image wells */
  --ink:         #16232E;   /* deep navy-slate — text, footer */
  --ink-2:       #21323F;
  --ink-soft:    #35485A;
  --ink-muted:   #5E7285;
  --ink-faint:   #93A6B6;
  --line:        rgba(22, 35, 46, 0.11);
  --line-soft:   rgba(22, 35, 46, 0.06);
  /* Light enough to read as blue, dark enough to carry white text at AA.
     Anything lighter than this fails contrast on a filled button — put light
     blue on the surfaces instead, which is where --mist earns its keep. */
  --accent:      #3A7597;   /* 4.8:1 on --paper — AA with white text */
  --accent-deep: #2C5C79;
  --on-dark:     rgba(247, 250, 253, 0.74);
  --on-dark-dim: rgba(247, 250, 253, 0.48);

  /* One rgb triplet behind every image scrim, so they retune together. */
  --shade: 12, 22, 32;

  /* Type — Cormorant Garamond carries more refinement than Instrument Serif
     at display sizes: finer serifs, higher stroke contrast, a true light
     weight. It also runs small, so the scale below is ~10% larger than it
     would be for a normal-width face. */
  --display: "Cormorant Garamond", ui-serif, "Iowan Old Style",
             "Palatino Linotype", Palatino, Georgia, serif;
  --ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Helvetica, Arial, sans-serif;

  --t-xs:  0.75rem;
  --t-sm:  0.875rem;
  --t-base: 1.0625rem;
  --t-lead: clamp(1.15rem, 0.5vw + 1.02rem, 1.4rem);
  /* Minimums are set so that the longest deliberate line of each heading
     still fits on one row at 360px. Headings break where the copy says
     they break, never where the viewport forces it. */
  --t-md:   clamp(1.65rem, 1.5vw + 1.3rem, 2.3rem);
  --t-lg:   clamp(2.25rem, 3.8vw + 1.25rem, 4.4rem);
  --t-xl:   clamp(2.5rem, 6.6vw + 1rem, 6.6rem);
  --t-hero: clamp(2.9rem, 10vw + 0.4rem, 9.5rem);

  /* Space — deliberately generous */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 1.5rem;
  --s4: 2.25rem;
  --s5: 3.5rem;
  --s6: 5rem;
  --section: clamp(6.5rem, 14vw, 15rem);

  /* Layout */
  --wrap: 1360px;
  --narrow: 900px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --gap: clamp(0.75rem, 1.2vw, 1.15rem);

  /* Radius — generous, Apple-ish. Never small-and-shadowed. */
  --r-card: clamp(20px, 2vw, 30px);
  --r-lg:   clamp(24px, 2.6vw, 40px);
  --r-pill: 100px;

  /* Motion */
  --out:    cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.3, 0.44, 1);
  --slow: 900ms;
  --med:  520ms;
  --fast: 240ms;

  --header-h: 68px;
}

/* --- 2. Reset ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 2rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: var(--t-base);
  line-height: 1.6;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--paper); }

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

.skip-link {
  position: absolute; top: -100%; left: var(--s2); z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: var(--s2) var(--s3); border-radius: var(--r-pill);
}
.skip-link:focus { top: var(--s2); }

/* --- 3. Typography ------------------------------------------------------ */

/* Optical sizing by hand: the larger the setting, the lighter the weight and
   the tighter the tracking. Keeps every heading on the page reading as one
   voice rather than as the same font at different sizes. */
.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.t-hero { font-size: var(--t-hero); font-weight: 300; line-height: 0.96; letter-spacing: -0.022em; }
.t-xl   { font-size: var(--t-xl);   font-weight: 300; line-height: 0.98; letter-spacing: -0.019em; }
.t-lg   { font-size: var(--t-lg);   font-weight: 300; line-height: 1.0;  letter-spacing: -0.016em; }
.t-md   { font-size: var(--t-md);   font-weight: 400; line-height: 1.1;  letter-spacing: -0.012em; }

.eyebrow {
  font-family: var(--ui);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.lede {
  font-size: var(--t-lead);
  line-height: 1.45;
  letter-spacing: -0.012em;
  color: var(--ink-soft);
  max-width: 34ch;
  text-wrap: balance;
}

.body { color: var(--ink-muted); max-width: 46ch; }
.muted { color: var(--ink-muted); }
.small { font-size: var(--t-sm); }
.center { text-align: center; margin-inline: auto; }

/* --- 4. Layout ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.narrow { max-width: var(--narrow); margin-inline: auto; }

.section { padding-block: var(--section); }
.section-sm { padding-block: clamp(4rem, 8vw, 8rem); }
.section--mist { background: var(--mist); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--ink .eyebrow { color: var(--on-dark-dim); }
.section--ink .lede, .section--ink .body { color: var(--on-dark); }

/* Section header, centred — the default composition on this site */
.head { text-align: center; margin-bottom: clamp(3rem, 6vw, 6rem); }
.head .eyebrow { display: block; margin-bottom: var(--s3); }
.head .lede { margin-inline: auto; margin-top: var(--s3); }

/* --- 5. Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  padding: 1rem 2rem;
  min-height: 50px;
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: -0.008em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--med) var(--out), color var(--med) var(--out),
              border-color var(--med) var(--out), transform var(--fast) var(--spring);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--accent); color: var(--paper); }
.btn--primary:hover { background: var(--accent-deep); }

.btn--ghost { color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--light { color: var(--paper); border-color: rgba(250,252,253,0.32); }
.btn--light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn--solid-light { background: var(--paper); color: var(--ink); }
.btn--solid-light:hover { background: #fff; }

/* Frosted glass — the same material as the scrolled navbar and the floating
   island, so the three read as one system. Legible over photographs because
   the backdrop is blurred and lightened before the text sits on it. */
.btn--glass {
  background: rgba(247, 250, 253, 0.80);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-color: rgba(247, 250, 253, 0.55);
  color: var(--ink);
}
.btn--glass:hover { background: rgba(255, 255, 255, 0.92); }

/* The outline partner to --glass, for the secondary action beside it. */
.btn--glass-outline {
  background: rgba(22, 35, 46, 0.22);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-color: rgba(247, 250, 253, 0.42);
  color: var(--paper);
}
.btn--glass-outline:hover {
  background: rgba(247, 250, 253, 0.92);
  color: var(--ink);
  border-color: transparent;
}

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s2); }
.btn-row.center { justify-content: center; }

.link {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-weight: 500; font-size: 0.9375rem;
}
.link svg { transition: transform var(--med) var(--out); }
.link:hover svg { transform: translateX(4px); }

/* --- 6. Header ---------------------------------------------------------- */

.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  transition: background var(--med) var(--out), border-color var(--med) var(--out);
  border-bottom: 1px solid transparent;
}
.header__inner {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
}

.wordmark {
  font-family: var(--display);
  font-size: 1.65rem;
  letter-spacing: -0.02em;
  line-height: 1;
  /* A 26px-tall logo is a poor touch target; pad it out to 44. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer .wordmark { min-height: 0; }

.nav { display: flex; align-items: center; gap: clamp(1.5rem, 2.6vw, 2.75rem); }
.nav__link {
  font-size: 0.9375rem; font-weight: 450;
  opacity: 0.78;
  transition: opacity var(--fast) var(--out);
}
.nav__link:hover, .nav__link[aria-current="page"] { opacity: 1; }

.header__cta { padding: 0.6rem 1.35rem; min-height: 40px; font-size: 0.875rem; }

.header--over { color: var(--paper); }
.header--over .btn--ghost { color: var(--paper); border-color: rgba(250,252,253,0.34); }
.header--over .btn--ghost:hover { background: var(--paper); color: var(--ink); }
.header--over .burger span { background: var(--paper); }

.header--solid {
  background: rgba(250, 252, 253, 0.82);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border-bottom-color: var(--line-soft);
  color: var(--ink);
}
.header--solid .btn--ghost { color: var(--ink); border-color: var(--line); }
.header--solid .burger span { background: var(--ink); }

.burger {
  display: none; width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer; padding: 0; position: relative;
}
.burger span {
  position: absolute; left: 12px; width: 20px; height: 1.5px;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--med) var(--out);
}
.burger span:nth-child(1) { top: 19px; }
.burger span:nth-child(2) { top: 25px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 99;
  background: var(--paper);
  padding: calc(var(--header-h) + var(--s6)) var(--gutter) var(--s5);
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden;
  transition: opacity var(--med) var(--out), visibility var(--med);
}
.menu.is-open { opacity: 1; visibility: visible; }
.menu__list { display: flex; flex-direction: column; }
.menu__link {
  font-family: var(--display);
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--slow) var(--out), transform var(--slow) var(--out);
}
.menu.is-open .menu__link { opacity: 1; transform: none; }
.menu__foot { display: flex; flex-direction: column; gap: var(--s3); }
.menu__contact { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.menu__contact a {
  display: inline-flex; align-items: center;
  min-height: 44px;               /* touch target, not just a text link */
  color: var(--ink-muted);
}
.menu__contact a:hover { color: var(--ink); }

/* --- 7. Line reveal ----------------------------------------------------- */
/* Each line of a display heading rises out of its own mask. */

.line { display: block; overflow: hidden; padding-bottom: 0.09em; margin-bottom: -0.09em; }
.js .line > i {
  display: block; font-style: inherit;
  transform: translateY(112%);
  transition: transform 1.05s var(--out);
}
.js .is-in .line > i,
.js .line.is-in > i { transform: none; }
.js .line:nth-child(2) > i { transition-delay: 90ms; }
.js .line:nth-child(3) > i { transition-delay: 180ms; }

/* --- 8. Hero ------------------------------------------------------------ */

.hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  color: var(--paper);
  overflow: hidden;
  background: var(--ink);
}
.hero__media { position: absolute; inset: 0; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.08);
  animation: heroIn 1800ms var(--out) forwards;
}
@keyframes heroIn { to { transform: scale(1); } }

/* Enough darkening for white type to clear contrast, and no more — the
   photograph has to stay the thing you look at. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(var(--shade),0.42) 0%, rgba(var(--shade),0.10) 24%,
                                rgba(var(--shade),0.10) 60%, rgba(var(--shade),0.50) 100%),
    radial-gradient(115% 80% at 50% 52%, rgba(var(--shade),0) 22%, rgba(var(--shade),0.30) 100%);
}
.hero__inner { position: relative; width: 100%; padding-block: var(--s6); }
.hero .eyebrow { color: rgba(250,252,253,0.62); display: block; margin-bottom: var(--s4); }
/* No max-width: the copy's own line breaks set the shape. A ch-based cap
   here re-wraps lines inside their reveal masks on narrow screens. */
.hero__title { margin-inline: auto; }
.hero__sub {
  margin: var(--s4) auto 0;
  font-size: var(--t-lead);
  color: rgba(250,252,253,0.80);
  max-width: 30ch;
  letter-spacing: -0.012em;
}
.hero__actions { margin-top: clamp(2.5rem, 4vw, 3.5rem); justify-content: center; }

.pagehero { min-height: min(80svh, 760px); }

/* Scroll cue */
.cue {
  position: absolute; left: 50%; bottom: 2.5rem;
  translate: -50% 0;
  width: 22px; height: 34px;
  border: 1px solid rgba(250,252,253,0.36);
  border-radius: var(--r-pill);
}
.cue::after {
  content: ""; position: absolute; left: 50%; top: 8px;
  translate: -50% 0;
  width: 2px; height: 6px; border-radius: 2px;
  background: rgba(250,252,253,0.7);
  animation: cue 2.1s var(--out) infinite;
}
@keyframes cue {
  0%, 18% { opacity: 0; transform: translateY(0); }
  40% { opacity: 1; }
  75%, 100% { opacity: 0; transform: translateY(11px); }
}

/* --- 9. Bento ----------------------------------------------------------- */

/* Row spans, not aspect ratios. An aspect-ratio on a grid item behaves like a
   definite height, so it defeats stretch and cards sharing a row end up
   different heights. Fixed row units keep the bento aligned. */
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
}
.bento__item { grid-column: span 12; aspect-ratio: var(--ratio-m, 4 / 5); }

@media (min-width: 880px) {
  .bento { grid-auto-rows: clamp(105px, 13.5vw, 195px); }
  .bento__item {
    grid-column: span var(--span, 6);
    grid-row: span var(--rows, 4);
    aspect-ratio: auto;
  }
}

/* The card itself: image fills, text sits on a scrim at the foot */
.tile {
  position: relative;
  display: block;
  height: 100%;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--mist-deep);
  isolation: isolate;
  transition: transform var(--med) var(--spring);
}
.tile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--out);
  will-change: transform;
}
.tile::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(var(--shade),0.72) 0%, rgba(var(--shade),0.30) 32%, rgba(var(--shade),0) 62%);
  transition: opacity var(--med) var(--out);
}
.tile:hover { transform: translateY(-5px); }
.tile:hover img { transform: scale(1.045); }

.tile__body {
  position: absolute; inset: auto 0 0 0; z-index: 2;
  padding: clamp(1.5rem, 2.6vw, 2.75rem);
  color: var(--paper);
}
.tile__title, .tile__line, .tile__meta { display: block; }
.tile__title {
  font-family: var(--display);
  font-size: clamp(2.1rem, 3.4vw, 3.75rem);
  line-height: 0.98;
  letter-spacing: -0.022em;
}
.tile__line {
  margin-top: 0.55rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: rgba(250,252,253,0.78);
  max-width: 26ch;
}
.tile__meta {
  margin-top: var(--s3);
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(250,252,253,0.66);
}

/* --- 9b. Moment ---------------------------------------------------------
   A full-height pause. No card, no border — just a photograph, one line,
   and room to breathe. Breaks the grid rhythm so the page doesn't read as
   an endless deck of tiles. */

.moment {
  position: relative;
  min-height: min(100svh, 900px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--paper);
  background: var(--ink);
}
.moment--center { align-items: center; text-align: center; }
.moment__media { position: absolute; inset: -8% 0; }
.moment__media img {
  width: 100%; height: 100%; object-fit: cover;
  will-change: transform;
}
.moment__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(var(--shade),0.74) 0%, rgba(var(--shade),0.26) 42%, rgba(var(--shade),0.06) 78%);
}
.moment--center .moment__scrim { background: rgba(var(--shade),0.46); }
.moment__body {
  position: relative; z-index: 2;
  width: 100%;
  padding-block: clamp(3rem, 8vw, 7rem);
}
.moment__body .lede { color: rgba(250,252,253,0.82); }
.moment--center .moment__body .lede { margin-inline: auto; }
.moment .eyebrow { color: rgba(250,252,253,0.55); display: block; margin-bottom: var(--s3); }

/* --- 9c. Showcase -------------------------------------------------------
   An editorial list, not a grid of cards. Moving through the names swaps the
   photograph beside them. Touch devices get a thumbnail per row instead. */

.showcase { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
@media (min-width: 880px) {
  .showcase { grid-template-columns: 1fr 1fr; }
}

.showcase__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--mist-deep);
  aspect-ratio: 4 / 5;
  display: none;
}
@media (min-width: 880px) { .showcase__media { display: block; } }

.showcase__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 750ms var(--out), transform 1400ms var(--out);
}
.showcase__media img.is-active { opacity: 1; transform: scale(1); }

.showcase__list { border-top: 1px solid var(--line); }

.showcase__row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: clamp(1rem, 2vw, 1.5rem) 0;
  cursor: pointer;
  color: inherit;
  transition: padding-left var(--med) var(--out), opacity var(--med) var(--out);
}
.showcase__thumb {
  width: 62px; height: 62px; border-radius: 12px;
  overflow: hidden; flex: none; background: var(--mist-deep);
}
.showcase__thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 880px) {
  .showcase__thumb { display: none; }
  .showcase__row { grid-template-columns: 1fr auto; }
  .showcase__row:hover, .showcase__row.is-active { padding-left: 1.1rem; }
  .showcase__list:hover .showcase__row:not(:hover) { opacity: 0.42; }
}

.showcase__name {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.2vw, 2.35rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.showcase__sub {
  display: block;
  font-family: var(--ui);
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  color: var(--ink-muted);
  margin-top: 0.25rem;
}
.showcase__price {
  font-size: var(--t-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}
.showcase__foot { margin-top: var(--s4); }

/* --- 10. Product cards & rail ------------------------------------------- */

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 288px);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--gutter);
  margin-inline: calc(var(--gutter) * -1);
  padding-bottom: var(--s3);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: center; }
.rail-outer { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

.card {
  display: block;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--mist);
  transition: transform var(--med) var(--spring);
}
.card:hover { transform: translateY(-5px); }

.card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mist-deep);
}
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--out);
}
.card:hover .card__media img { transform: scale(1.05); }

.card__body { padding: clamp(1.15rem, 1.6vw, 1.6rem); }
.card__title {
  font-family: var(--display);
  font-size: 1.5rem; line-height: 1.06; letter-spacing: -0.018em;
}
.card__flavour {
  margin-top: 0.4rem;
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.card__desc { margin-top: 0.6rem; font-size: 0.9375rem; color: var(--ink-muted); }
.card__meta {
  margin-top: var(--s3);
  display: flex; gap: 0.9rem; align-items: baseline;
  font-size: var(--t-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-faint);
}
.card__price { color: var(--ink); font-weight: 500; letter-spacing: 0.06em; }

/* Custom-order card — inverted, no image to compete with */
.card--cta {
  background: var(--ink); color: var(--paper);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  min-height: 100%; gap: var(--s5);
}
.card--cta .card__title { font-size: clamp(1.9rem, 2.4vw, 2.6rem); }
.card--cta .card__desc { color: var(--on-dark); }
.card--cta .card__meta { color: var(--on-dark-dim); }
.card--cta .card__price { color: var(--paper); }

/* Product grid on category pages */
.grid {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
}

/* --- 11. Smart stack ---------------------------------------------------- */
/* Cards stick in sequence, each settling on top of the last. */

.stack { max-width: 780px; margin-inline: auto; }
.stack__item {
  position: sticky;
  top: calc(var(--header-h) + clamp(1.5rem, 5vh, 4rem) + var(--i) * 14px);
  border-radius: var(--r-lg);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: clamp(1.75rem, 3.4vw, 3.25rem);
  display: grid;
  gap: var(--s3);
  transform-origin: 50% 0%;
  transition: transform var(--med) var(--out), opacity var(--med) var(--out);
  will-change: transform;
}
.section--mist .stack__item { background: var(--paper); }
.stack__item + .stack__item { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.stack__item[data-covered="1"] { transform: scale(0.965); opacity: 0.5; }
.stack__item[data-covered="2"] { transform: scale(0.93);  opacity: 0.24; }
.stack__item[data-covered="3"] { transform: scale(0.895); opacity: 0.1; }

.stack__n {
  font-family: var(--display);
  font-size: 0.9375rem;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.stack__title {
  font-family: var(--display);
  font-size: clamp(1.75rem, 2.6vw, 2.5rem);
  line-height: 1.02; letter-spacing: -0.02em;
}
.stack__body { color: var(--ink-muted); max-width: 40ch; }

/* --- 12. Principles ----------------------------------------------------- */

.cols {
  display: grid;
  gap: clamp(2.25rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.col__n {
  font-family: var(--display);
  font-size: 0.875rem; letter-spacing: 0.14em;
  color: var(--accent);
  display: block; margin-bottom: var(--s3);
}
.col__title {
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.6vw, 1.7rem);
  line-height: 1.1; letter-spacing: -0.015em;
  margin-bottom: 0.65rem;
}
.col__body { color: var(--ink-muted); font-size: 0.9375rem; max-width: 28ch; }
.section--ink .col__body { color: var(--on-dark); }
.section--ink .col__n { color: rgba(250,252,253,0.5); }

/* --- 13. Feature panel (full-bleed rounded card) ------------------------ */

.panel {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  min-height: min(78svh, 720px);
  display: flex; align-items: flex-end;
  isolation: isolate;
}
.panel--center { align-items: center; justify-content: center; text-align: center; }
.panel__media { position: absolute; inset: 0; }
.panel__media img { width: 100%; height: 100%; object-fit: cover; }
.panel__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(var(--shade),0.80) 0%, rgba(var(--shade),0.34) 45%, rgba(var(--shade),0.12) 100%);
}
.panel--center .panel__scrim { background: rgba(var(--shade),0.56); }
.panel__body {
  position: relative; z-index: 2;
  padding: clamp(2rem, 5vw, 5rem);
  max-width: 42rem;
}
.panel .lede { color: var(--on-dark); }
.panel .eyebrow { color: var(--on-dark-dim); display: block; margin-bottom: var(--s3); }
.panel .btn-row { margin-top: clamp(2rem, 3.5vw, 2.75rem); }

/* --- 14. Statement / quote ---------------------------------------------- */

.statement { text-align: center; }
.statement .display { margin-inline: auto; max-width: 15ch; }
.statement p { margin: var(--s4) auto 0; }

.quote {
  font-family: var(--display);
  font-size: clamp(2rem, 3.6vw, 3.4rem);
  line-height: 1.1; letter-spacing: -0.02em;
  max-width: 20ch; margin-inline: auto; text-align: center;
  text-wrap: balance;
}

/* --- 14b. Portrait ------------------------------------------------------- */

.portrait { max-width: 30rem; margin-inline: auto; }
.portrait__frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--mist-deep);
  aspect-ratio: 4 / 5;
}
.portrait__frame img { width: 100%; height: 100%; object-fit: cover; }
.portrait figcaption {
  margin-top: var(--s3);
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-lead);
  color: var(--ink-muted);
}

/* --- 15. Prose (About) --------------------------------------------------- */

.prose { max-width: 33rem; margin-inline: auto; }
.prose p {
  font-size: var(--t-lead);
  line-height: 1.62;
  letter-spacing: -0.011em;
  color: var(--ink-soft);
}
.prose p + p { margin-top: var(--s4); }

/* --- 16. FAQ ------------------------------------------------------------- */

.faq { max-width: 46rem; margin-inline: auto; }
.faq__item {
  border-radius: var(--r-card);
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 0 clamp(1.25rem, 2.2vw, 2rem);
  transition: background var(--fast) var(--out);
}
.faq__item + .faq__item { margin-top: 0.6rem; }
.faq__q {
  list-style: none; cursor: pointer;
  padding-block: clamp(1.15rem, 2vw, 1.6rem);
  padding-right: 2.5rem;
  position: relative;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  line-height: 1.22; letter-spacing: -0.015em;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before, .faq__q::after {
  content: ""; position: absolute; right: 2px; top: 50%;
  width: 13px; height: 1.5px; border-radius: 2px; background: var(--ink-muted);
  transition: transform var(--med) var(--out), opacity var(--med) var(--out);
}
.faq__q::before { transform: rotate(90deg); }
.faq__item[open] .faq__q::before { transform: rotate(0); opacity: 0; }
.faq__a {
  padding-bottom: clamp(1.15rem, 2vw, 1.6rem);
  padding-right: 2.5rem;
  color: var(--ink-muted);
  max-width: 52ch;
  animation: faqIn var(--med) var(--out);
}
@keyframes faqIn { from { opacity: 0; transform: translateY(-5px); } }

.pending {
  display: inline-block; margin-top: var(--s2);
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent); border: 1px solid currentColor;
  padding: 0.22rem 0.6rem; border-radius: var(--r-pill);
}

/* --- 17. Form ------------------------------------------------------------ */

.form { display: grid; gap: var(--s5); }
.form__grid { display: grid; gap: var(--s4) var(--s4); grid-template-columns: 1fr; }
@media (min-width: 700px) {
  .form__grid { grid-template-columns: 1fr 1fr; }
  .field--full { grid-column: 1 / -1; }
}

.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field__label { font-size: 0.9375rem; font-weight: 500; }
.field__req { color: var(--accent); }
.field__help { font-size: var(--t-sm); color: var(--ink-faint); }

.field input, .field select, .field textarea {
  width: 100%;
  background: var(--mist);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 0.85rem 1rem;
  font-size: 1rem;
  min-height: 50px;
  transition: background var(--fast) var(--out), border-color var(--fast) var(--out);
  -webkit-appearance: none; appearance: none;
}
.field textarea { resize: vertical; min-height: 104px; line-height: 1.55; }
.field input:hover, .field select:hover, .field textarea:hover { background: var(--mist-deep); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: var(--paper); border-color: var(--ink);
}
.field select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%236E655B' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center;
  padding-right: 2.5rem; cursor: pointer;
}
.field :user-invalid { border-color: var(--accent); }

.aside {
  background: var(--mist);
  border-radius: var(--r-card);
  padding: clamp(1.5rem, 2.4vw, 2rem);
}
.aside li { position: relative; padding-left: 1.4rem; font-size: 0.9375rem; color: var(--ink-muted); }
.aside li + li { margin-top: 0.8rem; }
.aside li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.form__status {
  font-size: 0.9375rem; padding: var(--s3);
  border-radius: var(--r-card); background: var(--mist);
  border-left: 2px solid var(--accent);
}
.form__status[hidden] { display: none; }

/* --- 18. Footer ---------------------------------------------------------- */

.footer {
  background: var(--ink); color: var(--on-dark);
  padding-block: clamp(4rem, 8vw, 7rem) var(--s4);
  font-size: 0.9375rem;
}
.footer a { color: var(--paper); opacity: 0.82; transition: opacity var(--fast); }
.footer a:hover { opacity: 1; }
.footer__top {
  display: grid; gap: var(--s5); grid-template-columns: 1fr;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
@media (min-width: 780px) { .footer__top { grid-template-columns: 1.6fr 1fr 1fr; gap: var(--s6); } }
.footer .wordmark { color: var(--paper); font-size: 2.2rem; }
.footer__tag { color: var(--on-dark-dim); margin-top: var(--s2); font-size: var(--t-lead); }
.footer__h {
  font-size: var(--t-xs); letter-spacing: 0.19em; text-transform: uppercase;
  color: var(--on-dark-dim); margin-bottom: var(--s3);
}
.footer__list li + li { margin-top: 0.7rem; }
.footer__bottom {
  border-top: 1px solid rgba(250,252,253,0.12);
  padding-top: var(--s4);
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5);
  justify-content: space-between;
  font-size: var(--t-xs); color: var(--on-dark-dim);
}

/* --- 19. Sticky mobile order bar ---------------------------------------- */

/* A floating island rather than a full-width bar: it sits above the content
   instead of walling off the bottom of the screen, and the blur keeps the
   photograph behind it readable. */
.orderbar {
  position: fixed;
  left: 50%;
  bottom: calc(0.9rem + env(safe-area-inset-bottom));
  z-index: 90;
  translate: -50% 0;                 /* separate from `transform`, which animates */
  display: none;
  padding: 5px;
  border-radius: var(--r-pill);
  /* Same material as the scrolled navbar. */
  background: rgba(247, 250, 253, 0.82);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  border: 1px solid rgba(22, 35, 46, 0.08);
  box-shadow: 0 10px 34px rgba(12, 22, 32, 0.16),
              0 2px 8px rgba(12, 22, 32, 0.08);
  transform: translateY(150%) scale(0.9);
  opacity: 0;
  transition: transform var(--slow) var(--spring),
              opacity var(--med) var(--out);
}
.orderbar.is-visible { transform: none; opacity: 1; }

.orderbar .btn {
  width: auto;
  min-height: 40px;
  padding: 0.5rem 1.3rem;
  font-size: 0.8125rem;
  letter-spacing: 0;
  background: transparent;
  color: var(--ink);
  border: 0;
  white-space: nowrap;
}
.orderbar .btn:hover { background: rgba(22, 35, 46, 0.06); transform: none; }
.orderbar .btn:active { transform: scale(0.97); }

/* --- 20. Reveal --------------------------------------------------------- */
/* Scoped to .js so the page is readable with JavaScript disabled. */

.js .reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity var(--slow) var(--out), transform var(--slow) var(--out);
}
.js .reveal.is-in { opacity: 1; transform: none; }

/* --- 21. Responsive ------------------------------------------------------ */

@media (max-width: 880px) {
  .nav, .header__cta { display: none; }
  .burger { display: block; }
  .orderbar { display: block; }
  /* Clearance so the floating island never covers the last of the content. */
  .footer { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }

  /* Centred type over a photograph collides with the subject on a narrow
     screen. On phones the hero sits bottom-left, in the darker part of the
     frame, and the food gets the space above it. */
  .hero { align-items: flex-end; text-align: left; }
  .hero__title, .hero__sub { margin-inline: 0; }
  .hero__actions { justify-content: stretch; }
  .hero__inner { padding-block: 0 clamp(2.5rem, 7vh, 4rem); }
  .hero .eyebrow { margin-bottom: var(--s3); }
  .hero__scrim {
    background: linear-gradient(to top,
      rgba(var(--shade),0.78) 0%, rgba(var(--shade),0.38) 34%, rgba(var(--shade),0.02) 66%, rgba(var(--shade),0.26) 100%);
  }
  .cue { display: none; }

  /* Same reasoning for the full-height moments. */
  .moment--center { text-align: left; align-items: flex-end; }
  .moment--center .moment__scrim {
    background: linear-gradient(to top,
      rgba(var(--shade),0.78) 0%, rgba(var(--shade),0.36) 44%, rgba(var(--shade),0.04) 82%);
  }
  .moment--center .moment__body .lede,
  .moment--center h2 { margin-inline: 0 !important; }
  .moment--center .btn-row.center { justify-content: stretch; }
  .stack__item { position: static; transform: none !important; opacity: 1 !important; }
  .stack__item + .stack__item { margin-top: 0.7rem; }
}
@media (min-width: 881px) { .menu { display: none; } }
@media (max-width: 880px) {
  /* Small inline pills, not full-width slabs. Most people arrive on a phone,
     and a pair of compact glass buttons reads as part of the image rather
     than as two bars stacked on top of it. */
  .hero__actions .btn,
  .moment .btn-row .btn {
    width: auto;
    min-height: 40px;
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    letter-spacing: 0;
  }
  .hero__actions, .moment .btn-row { gap: 0.5rem; flex-wrap: nowrap; }
}

@media (max-width: 520px) {
  .btn-row .btn { width: 100%; }
  /* …except the hero and moment pairs, which stay small and side by side. */
  .hero__actions .btn, .moment .btn-row .btn { width: auto; }
  .statement .display, .quote { max-width: none; }
  .tile__body { padding: 1.25rem; }
  .moment__body { padding-block: 4rem 3rem; }
}

/* --- 22. Reduced motion -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .orderbar { transform: none; opacity: 1; }
  .js .reveal { opacity: 1; transform: none; }
  .js .line > i { transform: none; }
  .hero__media img { transform: none; animation: none; }
  .tile:hover, .card:hover { transform: none; }
  .stack__item { transform: none !important; opacity: 1 !important; }
  .cue { display: none; }
}

/* --- 23. Print ----------------------------------------------------------- */

@media print {
  .header, .menu, .orderbar, .panel, .hero__media, .cue { display: none !important; }
  body { background: #fff; color: #000; }
  .js .reveal, .js .line > i { opacity: 1 !important; transform: none !important; }
  .stack__item { position: static !important; }
}