/* CocoZuri Chocolat — one-pager.
   The ground is the Festival deck's cream (build_slides_festival.py: #FBF7EF -> #F5EDDF -> #EFE4D1),
   its gold-on-cream #A8772C and its cacao type #3A1712. Dark appears in three places only: the
   hero (the video's own ground, #1B1710, so the frame dissolves into the page), the drips that
   carry it onto the cream, and the footer band. */

@property --tint { syntax: "<color>"; inherits: true; initial-value: #a73a23; }

:root {
  --cream-1: #FBF7EF;
  --cream-2: #F5EDDF;
  --cream-3: #EFE4D1;
  --paper: #FDFAF4;
  --ink: #3A1712;
  --body: #5A4036;
  --gold: #A8772C;          /* gold on cream */
  --gold-lt: #C2A05A;
  --gold-dk: #F0C88E;       /* gold on dark */
  --night: #1B1710;         /* the video's own ground */
  --choc: #513524;
  --line: rgba(168, 119, 44, .34);
  --line-soft: rgba(168, 119, 44, .18);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --gut: clamp(16px, 4vw, 64px);
  --bar-h: 76px;
  /* corners: kept small, one set for the whole site */
  --r-ctl: 10px;            /* buttons, fields, search, arrows, icon marks */
  --r-card: 14px;           /* cards, panels, the header bar */
  --r-in: 10px;             /* a picture inside a card */
  --r-tag: 6px;             /* small counts and badges */
  --card: #F2E9DA;          /* the one panel colour: menu cards, contact cards */
  /* the inner pages keep to a 1440px measure, centred */
  --pad: max(var(--gut), calc((100vw - 1440px) / 2));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--bar-h); }
body {
  margin: 0; background: var(--cream-1); color: var(--ink);
  font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body.is-intro { overflow: hidden; }
img { display: block; max-width: 100%; }
/* no italics anywhere on the site, by the director's rule */
em, i, cite { font-style: normal; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- shared type ---------- */
.eyebrow {
  margin: 0 0 16px; font: 500 12px/1.4 var(--sans); letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold);
}
.eyebrow-dark { color: var(--gold-dk); }
.display {
  margin: 0; font: 600 clamp(34px, 4.6vw, 68px)/1.04 var(--serif); letter-spacing: -.015em;
  font-variation-settings: "opsz" 72; color: var(--ink); text-wrap: balance;
}
.display em, .hero-title em, .info-name em, .order-title em, .drawer-title em {
  font-style: normal; font-weight: 500; color: var(--gold);
}
.display-sm { font-size: clamp(34px, 4.2vw, 60px); }
.rule { display: block; width: 72px; height: 2px; background: var(--gold); margin: 26px 0 28px; }
.body { margin: 0; font: 400 clamp(15px, 1.1vw, 17px)/1.7 var(--sans); color: var(--body); max-width: 56ch; }
.fine { font-size: 13px; color: var(--body); opacity: .85; margin: 14px 0 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 26px; border-radius: var(--r-ctl); text-decoration: none;
  font: 500 14px/1 var(--sans); letter-spacing: .06em; white-space: nowrap;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:active { transform: scale(.98); }
.btn-gold { background: var(--gold-dk); color: var(--night); }
.btn-gold:hover { background: #fff1d8; }
.btn-ghost-light { border: 1px solid rgba(240, 200, 142, .55); color: var(--cream-1); }
.btn-ghost-light:hover { border-color: var(--gold-dk); background: rgba(240, 200, 142, .1); }
.btn-ink { background: var(--ink); color: var(--cream-1); }
.btn-ink:hover { background: var(--choc); }
.btn-line { border: 1px solid var(--line); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: var(--gold); background: rgba(168, 119, 44, .06); }
.btn-block { width: 100%; }

/* ---------- the cream ground, with the deck's corner medallions ---------- */
/* One ground for the whole page. Per-section gradients ended dark and started light, which
   printed a hard band at every join; the director's rule is soft gradients, no seams. */
.ground { position: relative; overflow: hidden; background: transparent; }
main { background: linear-gradient(180deg, var(--cream-1) 0%, var(--cream-2) 45%, var(--cream-1) 70%, var(--cream-2) 100%); }
.corner {
  position: absolute; width: min(46vw, 560px); aspect-ratio: 1; pointer-events: none; opacity: .16;
  background: url("assets/brand/rangoli.svg") center / contain no-repeat;
}
.corner.tl { top: 0; left: 0; transform: translate(-50%, -50%); }
.corner.tr { top: 0; right: 0; transform: translate(50%, -50%); }
.corner.br { bottom: 0; right: 0; transform: translate(50%, 50%); }
.corner.bl { bottom: 0; left: 0; transform: translate(-50%, 50%); }

/* ---------- intro: cream, mark, then the pour ---------- */
.intro { position: fixed; inset: 0; z-index: 100; background: var(--cream-1); display: grid; place-items: center; }
.intro-mark { display: grid; justify-items: center; gap: 18px; }
.intro-mark img { width: min(62vw, 320px); height: auto; opacity: 0; transform: translateY(12px); }
.intro-line { font: 400 clamp(16px, 2vw, 20px)/1.3 var(--serif); color: var(--gold); opacity: 0; }
.pour { position: absolute; left: 0; right: 0; top: 0; height: 100%; transform: translateY(-135%); will-change: transform; }
.pour-body {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, transparent 30%, rgba(255, 230, 200, .05) 45%, transparent 60%),
    linear-gradient(180deg, #2a2018 0%, var(--night) 70%);
}
.pour-drips { position: absolute; left: 0; top: 100%; width: 100%; height: clamp(90px, 16vh, 170px); margin-top: -1px; transform-origin: top; }
.intro.is-done { pointer-events: none; }

/* ---------- header ---------- */
.bar {
  position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; z-index: 50; width: 100%; height: var(--bar-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 var(--gut); border-radius: 0;
  color: var(--cream-1);
  transition: top .55s var(--ease), width .55s var(--ease), height .55s var(--ease), border-radius .55s var(--ease), padding .55s var(--ease),
    background .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease);
}
.bar.on-cream { background: rgba(251, 247, 239, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: var(--ink); box-shadow: 0 1px 0 var(--line-soft); }
.bar.float {
  top: 12px; width: min(1200px, calc(100% - 24px)); height: 62px; padding: 0 26px; border-radius: var(--r-card);
  background: rgba(251, 247, 239, .86); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 12px 34px rgba(58, 23, 18, .12), 0 0 0 1px rgba(168, 119, 44, .18);
}
/* the Menu button and its floating panel are for phones; wide screens have the links in the bar */
.nav-btn { display: none; align-items: center; gap: 10px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 8px 0; }
.nav-ico { position: relative; width: 20px; height: 10px; }
.nav-ico i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .45s var(--ease), top .45s var(--ease); }
.nav-ico i:first-child { top: 0; }
.nav-ico i:last-child { top: 8.5px; }
.nav-open .nav-ico i:first-child { top: 4.25px; transform: rotate(45deg); }
.nav-open .nav-ico i:last-child { top: 4.25px; transform: rotate(-45deg); }
.nav-panel {
  position: fixed; z-index: 49; top: 74px; left: 10px; right: 10px; padding: 8px 22px 20px; border-radius: var(--r-card);
  background: var(--cream-1); box-shadow: 0 24px 60px rgba(58, 23, 18, .22), 0 0 0 1px rgba(168, 119, 44, .2);
  opacity: 0; transform: translateY(-12px) scale(.98); transform-origin: top center; transition: opacity .4s var(--ease), transform .5s var(--ease);
}
.nav-panel.on { opacity: 1; transform: none; }
.nav-panel nav a {
  display: flex; align-items: baseline; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line-soft);
  font: 500 26px/1.1 var(--serif); color: var(--ink); text-decoration: none;
  opacity: 0; transform: translateY(10px); transition: opacity .45s var(--ease), transform .55s var(--ease), color .3s var(--ease);
}
.nav-panel nav a span { font: 500 11px/1 var(--sans); letter-spacing: .2em; color: var(--gold); }
.nav-panel nav a[aria-current="page"] { color: var(--gold); }
.nav-panel.on nav a { opacity: 1; transform: none; }
.nav-panel.on nav a:nth-child(2) { transition-delay: .04s; }
.nav-panel.on nav a:nth-child(3) { transition-delay: .08s; }
.nav-panel.on nav a:nth-child(4) { transition-delay: .12s; }
.nav-panel.on nav a:nth-child(5) { transition-delay: .16s; }
.np-foot { display: flex; gap: 8px; margin-top: 18px; }
.np-foot a { flex: 1; text-align: center; padding: 13px 6px; border: 1px solid var(--line); border-radius: var(--r-ctl); font: 500 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.np-foot a:first-child { background: var(--ink); border-color: var(--ink); color: var(--cream-1); }
.bar-side { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 36px); }
.bar-right { justify-content: flex-end; }
.bar-link { font: 500 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; text-decoration: none; position: relative; padding: 8px 0; }
.bar-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.bar-link:hover::after { transform: scaleX(1); transform-origin: left; }
.bar-logo { display: block; position: relative; width: clamp(128px, 13vw, 172px); }
.bar-logo img { width: 100%; height: auto; transition: opacity .45s var(--ease); }
.bar-logo .logo-dark { position: absolute; inset: 0; opacity: 0; }
.bar.on-cream .logo-dark { opacity: 1; }
.bar.on-cream .logo-light { opacity: 0; }
.bag { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; padding: 8px 0; }
.bag-count {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-tag);
  background: var(--gold-dk); color: var(--night); font-size: 11px; letter-spacing: 0;
}
.bar.on-cream .bag-count { background: var(--ink); color: var(--cream-1); }
.bag.bump .bag-count { animation: bump .6s var(--ease); }
@keyframes bump { 30% { transform: scale(1.35); } 100% { transform: none; } }

/* ---------- hero (dark on purpose) ----------
   The film is the headline: the chocolate turns in the upper part of the screen, the frame fades
   into the page's own dark below it, and the words sit centred underneath, never over the bar. */
.hero { position: relative; height: 100svh; min-height: 640px; background: var(--night); color: var(--cream-1); isolation: isolate; }
.hero-media { position: absolute; inset: 0; overflow: hidden; z-index: -2; background: var(--night); }
.hero-video { position: absolute; top: 0; left: 0; width: 100%; height: 74%; object-fit: cover; object-position: 50% 50%; transition: opacity .45s ease; }
.hero-video.dip { opacity: .18; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(27, 23, 16, .55) 0%, transparent 16%, transparent 46%, var(--night) 74%),
    radial-gradient(120% 90% at 50% 38%, transparent 55%, rgba(27, 23, 16, .7) 100%);
}
.hero-copy {
  position: absolute; left: 0; right: 0; bottom: clamp(120px, 14svh, 140px); margin: 0 auto;
  width: min(760px, calc(100% - 2 * var(--gut))); text-align: center;
}
.hero-title { margin: 0 auto 14px; max-width: 22ch; font: 400 clamp(25px, min(2.9vw, 5svh), 42px)/1.12 var(--serif); letter-spacing: -.015em; text-wrap: balance; font-variation-settings: "opsz" 60; }
.hero-title em { color: var(--gold-dk); }
.hero-lede { margin: 0 auto 30px; font-size: clamp(15px, 1.15vw, 17px); color: rgba(251, 247, 239, .78); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* Desktop: the film keeps its own proportions, sized by the screen's height so the bar always
   clears the words however short the window, and its sides fade into the dark. */
@media (min-width: 861px) {
  .hero-video {
    left: 0; right: 0; margin: 0 auto; height: 68svh; width: min(100%, calc(68svh * 16 / 9));
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  }
  .hero-shade { background: linear-gradient(180deg, rgba(27, 23, 16, .55) 0%, transparent 16%, transparent 50%, var(--night) 68%); }
}
@media (min-width: 861px) and (max-height: 760px) {
  .hero .scroll-cue { display: none; }
  .hero-copy { bottom: 48px; }
}
.scroll-cue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: grid; justify-items: center; gap: 10px; text-decoration: none; font: 500 10px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: rgba(251, 247, 239, .7); }
.scroll-cue::after { content: ""; width: 1px; height: 42px; background: linear-gradient(var(--gold-dk), transparent); animation: cue 2.2s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
/* The drawing is four times the drips' resting depth, so they have room to run on scroll (app.js). */
.hero-drip { position: absolute; left: 0; top: 100%; width: 100%; height: calc(4 * clamp(54px, 8vw, 96px)); margin-top: -1px; z-index: 2; pointer-events: none; }

/* ---------- philosophy ---------- */
.story { padding: clamp(150px, 18vw, 240px) var(--gut) clamp(80px, 9vw, 120px); }
/* the philosophy keeps its full size; only the floating pieces were made smaller */
.story .display { font-size: clamp(40px, 5.6vw, 84px); line-height: 1.02; }
.story-in { position: relative; z-index: 2; max-width: 980px; margin: 0 auto; text-align: center; }
.story .rule { margin-left: auto; margin-right: auto; }
.story-text { margin: 0 auto; max-width: 30ch; font: 400 clamp(24px, 2.9vw, 42px)/1.38 var(--serif); letter-spacing: -.005em; color: var(--ink); text-wrap: pretty; }
.story-text .w { opacity: .16; transition: opacity .2s linear; }
.story-text .w.lit { opacity: 1; }
/* scoped to the story: the header's floating state is also .float, and these rules (a low
   z-index, a filter, pointer-events: none) put the header under the page and made it unclickable */
.story .float { position: absolute; z-index: 1; width: clamp(64px, 8.5vw, 132px); filter: drop-shadow(0 28px 26px rgba(58, 23, 18, .22)); will-change: transform; user-select: none; pointer-events: none; }
.story .float img { display: block; width: 100%; height: auto; animation: drift 7s ease-in-out infinite; }
.f2 img { animation-duration: 8.5s; animation-delay: -2s; }
.f3 img { animation-duration: 6.4s; animation-delay: -4s; }
.f4 img { animation-duration: 9s; animation-delay: -1s; }
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
.f1 { left: 6%; top: 16%; }
.f2 { right: 6%; top: 14%; width: clamp(74px, 10vw, 150px); }
.f3 { left: 3%; bottom: 34%; width: clamp(56px, 6.5vw, 104px); filter: blur(2px) drop-shadow(0 22px 20px rgba(58, 23, 18, .2)); }
.f4 { right: 9%; bottom: 30%; width: clamp(58px, 7.5vw, 112px); }

/* ---------- the collection ---------- */
.text-link { display: inline-block; margin-top: 14px; font: 500 13px/1.4 var(--sans); letter-spacing: .04em; color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; transition: border-color .3s var(--ease), color .3s var(--ease); }
.text-link::after { content: "\2193"; margin-left: 8px; }
.text-link:hover { color: var(--ink); border-color: var(--ink); }
.text-link.go::after { content: "\2192"; }
.tab-ink { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--gold); transition: transform .55s var(--ease), width .55s var(--ease); pointer-events: none; }
.tab sup { font-size: 9px; letter-spacing: 0; margin-left: 3px; color: var(--gold); vertical-align: 5px; }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); }


/* The collection: one full screen (see "the stage" in app.js). The heading and the families sit
   at the top, the endless row of pieces through the middle, the piece at the centre's name and
   price at the foot. Every link of the row sits at the centre; the script moves it out along the
   row, scales it back and softens it by its distance from the middle. */
.stage {
  --tint: #a73a23; --bg: #7a2a19;
  position: relative; height: 100vh; height: 100svh; height: 100dvh; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center; scroll-margin-top: calc(-1 * var(--bar-h));
  background-color: var(--bg); color: var(--cream-1); transition: background-color 1s var(--ease);
}
/* a soft light behind the piece and a darker edge, over the piece's colour */
.stage-wash { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(36% 32% at 50% 50%, rgba(255, 240, 220, .18), transparent 72%), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(20, 8, 4, .28)); }
.stage-top { position: relative; z-index: 5; display: grid; justify-items: center; text-align: center; padding: calc(var(--bar-h) + clamp(14px, 3svh, 34px)) var(--gut) 0; }
.stage-top .eyebrow { margin: 0 0 8px; }
.stage-title { font-size: clamp(30px, 3.1vw, 46px); line-height: 1.04; }
/* the families: in their own order; the strip scrolls sideways when it is wider than the screen */
.tabs { position: relative; width: min(1120px, 100%); margin-top: clamp(12px, 2.4svh, 26px); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.tabs::-webkit-scrollbar { display: none; }
.tabs.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 60px); mask-image: linear-gradient(90deg, transparent, #000 60px); }
.tabs.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 60px), transparent); }
.tabs.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent); mask-image: linear-gradient(90deg, transparent, #000 60px, #000 calc(100% - 60px), transparent); }
.tabs.dragging { cursor: grabbing; }
.tabs.dragging .tab { pointer-events: none; }
.tabs-row { position: relative; display: flex; gap: clamp(22px, 2.6vw, 38px); width: max-content; margin: 0 auto; padding: 0 12px; border-bottom: 1px solid var(--line); }
.tab { position: relative; flex: 0 0 auto; padding: 15px 0 13px; white-space: nowrap; font: 500 11.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--body); transition: color .35s var(--ease); }
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); }
.tab sup { font-size: 9px; letter-spacing: 0; margin-left: 3px; color: var(--gold); vertical-align: 5px; }
.tab-ink { position: absolute; left: 0; bottom: -1px; z-index: 1; height: 2px; width: 0; background: var(--gold); transition: transform .55s var(--ease), width .55s var(--ease); pointer-events: none; }

/* the row takes the room between the heading and the price, up to a point: on a tall screen the
   whole set stays together in the middle instead of spreading to the edges */
.chain-wrap { position: relative; z-index: 2; flex: 1 1 auto; min-height: 0; max-height: min(560px, 56svh); container-type: size; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.chain-wrap.dragging { cursor: grabbing; }
.chain-wrap:focus-visible { box-shadow: inset 0 0 0 2px var(--gold); border-radius: var(--r-card); }
.chain { position: absolute; inset: 0; }
.link {
  --box-w: min(24vw, 76cqh, 330px); --box-h: var(--box-w);
  position: absolute; left: 50%; top: 50%; width: var(--box-w); height: var(--box-h);
  display: grid; place-items: center; will-change: transform, filter, opacity;
  transform: translate(-50%, -50%);
}
.link[data-size="bar"], .link[data-size="box"] { --box-w: min(32vw, 420px); --box-h: min(72cqh, 330px); }
.link[data-size="stick"] { --box-w: min(42vw, 500px); --box-h: min(44cqh, 190px); }
.link img {
  /* the box's own size, not a percentage: a grid row sized by its content would let a tall
     photograph push past it */
  max-width: min(var(--box-w), var(--nat, 100%)); max-height: var(--box-h); width: auto; height: auto; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 26px 22px rgba(58, 23, 18, .22)) drop-shadow(0 5px 7px rgba(58, 23, 18, .12));
  animation: bob 6.5s ease-in-out infinite; animation-delay: var(--d, 0s); will-change: transform;
}
/* a menu item with no photograph yet: an empty frame in its place, kept visible for the audit */
.missing {
  width: min(var(--box-w), 300px); height: min(var(--box-h), 300px); box-sizing: border-box;
  display: grid; place-content: center; justify-items: center; gap: 14px; pointer-events: none;
  border: 1.5px dashed rgba(251, 247, 239, .5); border-radius: var(--r-card); background: rgba(251, 247, 239, .06);
  animation: bob 6.5s ease-in-out infinite; animation-delay: var(--d, 0s);
}
.missing-mark { width: 30%; aspect-ratio: 1; opacity: .5; background: url(assets/brand/mark_white.png) center / contain no-repeat; }
.missing-label { font: 500 10.5px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: rgba(251, 247, 239, .72); text-align: center; padding: 0 12px; }
.stage .link.far .missing { animation-play-state: paused; }
@keyframes bob { 0%, 100% { transform: translateY(-6px) rotate(-.6deg); } 50% { transform: translateY(10px) rotate(.6deg); } }
.chain-prev, .chain-next { position: absolute; top: 50%; z-index: 150; margin-top: -26px; }
.chain-prev { left: var(--gut); }
.chain-next { right: var(--gut); }
.arrow { width: 52px; height: 52px; border-radius: var(--r-ctl); border: 1px solid var(--line); display: grid; place-items: center; color: var(--ink); background: rgba(253, 250, 244, .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease); }
.arrow:hover { background: var(--ink); color: var(--cream-1); border-color: var(--ink); }
.arrow:active { transform: scale(.94); }
.arrow.sm { width: 46px; height: 46px; }

/* the piece at the centre: a quiet count, the name, a line of notes, the price, the box */
.info { position: relative; z-index: 5; width: min(520px, calc(100% - 2 * var(--gut))); margin: 0 auto; padding: 0 0 clamp(18px, 3.4svh, 36px); text-align: center; }
.info-count { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 10px; font: 500 11px/1 var(--sans); letter-spacing: .2em; color: var(--body); }
.info-count #idxNow { color: var(--ink); }
.info-sep { width: 34px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.info-sep::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .6s var(--ease); }
/* Gifting: its heading and line above the box's name, which steps down a size */
.info-occasion { margin: 0 0 4px; font: 500 clamp(23px, 1.9vw, 29px)/1.08 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.info-occasion em { font-style: normal; color: var(--gold); }
.info-lede { margin: 0 auto 12px; max-width: 52ch; text-wrap: balance; font-size: 13.5px; line-height: 1.5; color: var(--body); }
.info.is-gift .info-name { font: 600 19px/1.2 var(--serif); margin-bottom: 6px; }
.info-name { margin: 0 0 6px; font: 500 clamp(23px, 1.9vw, 29px)/1.08 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; font-variation-settings: "opsz" 60; }
.info-notes { margin: 0 auto 12px; max-width: 50ch; font: 400 15px/1.45 var(--serif); color: var(--body); min-height: 1.45em; }
.info-price { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 16px; font: 500 15px/1 var(--sans); letter-spacing: .04em; color: var(--ink); }
.info-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--gold); }
.info-unit { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--body); }
.info-unit:empty, .info-price:has(.info-unit:empty) .info-dot { display: none; }
.add-row { display: flex; gap: 8px; align-items: center; justify-content: center; }
.add-row .btn { min-height: 44px; padding: 0 26px; font-size: 13.5px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-ctl); height: 44px; }
.qty button { width: 38px; height: 100%; font-size: 17px; color: var(--ink); }
.qty output { min-width: 20px; text-align: center; font-weight: 500; font-size: 14px; }
/* the way on to the menu: one word and an arrow, under the controls with room above it */
.info-menu { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 6px 2px; font: 500 13px/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); text-decoration: none; transition: color .3s var(--ease), gap .3s var(--ease); }
.info-menu svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.info-menu:hover { color: var(--ink); }
.info-menu:hover svg { transform: translateX(4px); }
.info-menu[hidden] { display: none; }

/* ---- the collection on its colour: cream words, the gold turned to its on-dark shade ---- */
.stage .eyebrow { color: var(--gold-dk); }
.stage .stage-title { color: var(--cream-1); }
.stage .stage-title em { color: var(--gold-dk); }
.stage .tabs-row { border-bottom-color: rgba(251, 247, 239, .22); }
.stage .tab { color: rgba(251, 247, 239, .64); }
.stage .tab:hover, .stage .tab[aria-selected="true"] { color: var(--cream-1); }
.stage .tab sup { color: var(--gold-dk); }
.stage .tab-ink { background: var(--gold-dk); }
.stage .chain-wrap:focus-visible { box-shadow: inset 0 0 0 2px var(--gold-dk); }
.stage .link img { filter: drop-shadow(0 28px 26px rgba(20, 8, 4, .34)) drop-shadow(0 6px 8px rgba(20, 8, 4, .18)); }
.stage .link.far img { animation-play-state: paused; }
.stage .chain { z-index: 1; }
.stage .info-count { color: rgba(251, 247, 239, .78); }
.stage .info-count #idxNow { color: var(--cream-1); }
.stage .info-sep { background: rgba(251, 247, 239, .28); }
.stage .info-sep::after { background: var(--gold-dk); }
.stage .info-occasion, .stage .info-name { color: var(--cream-1); }
.stage .info-occasion em { color: var(--gold-dk); }
.stage .info-lede, .stage .info-notes { color: rgba(251, 247, 239, .86); }
.stage .info-price { color: var(--cream-1); }
.stage .info-dot { background: var(--gold-dk); }
.stage .info-unit { color: rgba(251, 247, 239, .72); }
.stage .info-menu { color: var(--gold-dk); }
.stage .info-menu:hover { color: var(--cream-1); }
/* Prev · quantity · Add to your box · Next, in one row */
.info-ctl { display: flex; align-items: center; justify-content: center; gap: 8px; }
.ctl { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 46px; padding: 0 18px; border-radius: var(--r-ctl); white-space: nowrap; font: 500 13.5px/1 var(--sans); letter-spacing: .02em; color: var(--cream-1); background: rgba(20, 8, 4, .22); box-shadow: inset 0 0 0 1px rgba(251, 247, 239, .24); transition: background .3s var(--ease), transform .3s var(--ease); }
.ctl svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ctl:hover { background: rgba(20, 8, 4, .36); }
.ctl:active { transform: scale(.97); }
.ctl-add { padding: 0 24px; background: var(--cream-1); color: var(--ink); box-shadow: 0 10px 24px rgba(20, 8, 4, .2); font-weight: 600; }
.ctl-add:hover { background: #fff; }
.stage .qty { height: 46px; border-color: rgba(251, 247, 239, .3); color: var(--cream-1); }
.stage .qty button { color: var(--cream-1); }
/* short screens: the small print goes first, so the piece keeps its room and the row always fits */
@media (max-height: 760px) {
  .stage .stage-top { padding-top: calc(var(--bar-h) + 2px); }
  .stage .stage-top .eyebrow { display: none; }
  .stage .stage-title { font-size: clamp(24px, 5.4svh, 34px); }
  .stage .tabs { margin-top: 4px; }
  .stage .chain-wrap { max-height: none; }
  .stage .info { padding-bottom: 14px; }
  .stage .info-notes, .stage .info-lede { display: none; }
  .stage .info-menu { margin-top: 12px; }
  .stage .info-price { margin-bottom: 12px; }
}
@media (max-height: 600px) {
  .stage .info-count { display: none; }
  .stage .info-name, .stage .info-occasion { font-size: 22px; }
  .ctl, .stage .qty { height: 42px; }
}
/* short laptop screens: a tighter heading and foot, so the row keeps its size */
@media (min-width: 861px) and (max-height: 760px) {
  .stage-top { padding-top: calc(var(--bar-h) + 2px); }
  .stage-top .eyebrow { margin-bottom: 4px; }
  .stage-title { font-size: 28px; }
  .tabs { margin-top: 4px; }
  .chain-wrap { max-height: none; }
  .info-count { margin-bottom: 6px; }
  .info-notes { margin-bottom: 8px; }
  .info-price { margin-bottom: 12px; }
  .info-menu { margin-top: 12px; }
}
kbd { font: 500 11px/1 var(--sans); padding: 3px 6px; border: 1px solid var(--line); border-radius: 5px; }

.bar-link[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- inner pages ---------- */
.page-head { padding: calc(var(--bar-h) + clamp(28px, 3.4vw, 52px)) var(--gut) clamp(24px, 3vw, 40px); }
.ph-in { max-width: 760px; }
.ph-in .body { max-width: 52ch; }
#order { scroll-margin-top: calc(var(--bar-h) + 16px); }
.visit-band { padding: clamp(80px, 9vw, 130px) var(--gut); text-align: center; border-top: 1px solid var(--line-soft); }
.vb-in { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; }
.visit-band .body { margin: 18px auto 0; }
.vb-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }

/* ---------- the collection: a shelf (as on the Terra Green site) ---------- */
.shelf-sec { overflow-x: clip; padding: clamp(80px, 9vw, 128px) var(--gut) clamp(64px, 7vw, 100px); background: var(--cream-1); border-top: 1px solid var(--line-soft); }
.shelf { max-width: 1180px; margin: 0 auto; }
.shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: clamp(24px, 3vw, 36px); }
.shelf-head .eyebrow { margin-bottom: 12px; }
.shelf-title { font-size: clamp(32px, min(3.6vw, 7svh), 50px); }
@media (min-width: 1001px) { .shelf-head > div:first-child { flex: none; } .shelf-title { white-space: nowrap; } }
.shelf-tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.shelf-tabs::-webkit-scrollbar { display: none; }
.shelf-tabs-row { display: flex; gap: 22px; width: max-content; }
.shelf-tab { position: relative; padding: 8px 0; white-space: nowrap; font: 500 14px/1 var(--sans); color: var(--body); transition: color .2s var(--ease); }
.shelf-tab sup { margin-left: 3px; font-size: 10px; color: var(--gold); }
.shelf-tab::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.shelf-tab:hover, .shelf-tab[aria-selected="true"] { color: var(--ink); }
.shelf-tab[aria-selected="true"]::after { transform: none; }
.shelf-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 16px) / 4); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; outline: none; padding-bottom: 4px; overscroll-behavior-x: contain; }
.shelf-row::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .shelf-row { cursor: grab; } }
.shelf-row.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.shelf-row.dragging .sh-card { pointer-events: none; }
.sh-card { scroll-snap-align: start; display: grid; gap: 14px; }
.sh-tile { position: relative; aspect-ratio: 1 / 1.02; display: grid; place-items: center; overflow: hidden; border-radius: var(--r-in); background: var(--card); }
.sh-tile img { width: 76%; height: 70%; object-fit: contain; filter: drop-shadow(0 14px 16px rgba(58, 23, 18, .18)); transition: transform .5s var(--ease); -webkit-user-drag: none; }
.sh-card:hover .sh-tile img { transform: scale(1.05); }
.sh-tile.is-missing { align-content: center; gap: 12px; box-shadow: inset 0 0 0 1.5px var(--line); background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(168, 119, 44, .06) 14px 15px), var(--card); }
.sh-tile .sh-mark { width: 24%; height: auto; opacity: .32; filter: none; }
.sh-card:hover .sh-tile .sh-mark { transform: none; }
.sh-soon { font: 500 11px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); text-align: center; }
.sh-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 4px; }
.sh-fam { margin: 0 0 4px; font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.sh-name { margin: 0 0 4px; font: 600 17px/1.25 var(--serif); color: var(--ink); }
.sh-price { margin: 0; font: 400 13.5px/1.35 var(--sans); color: var(--body); }
.sh-add { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--ink); color: var(--cream-1); transition: background .25s var(--ease), transform .25s var(--ease); }
.sh-add svg { width: 18px; height: 18px; }
.sh-add:hover { background: var(--gold); transform: scale(1.06); }
.sh-add.done { animation: bagPop .5s var(--ease); background: var(--gold); }
.shelf-foot { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: clamp(24px, 3vw, 36px); }
.shelf-track { position: relative; width: min(160px, 30%); height: 2px; overflow: hidden; background: var(--line-soft); }
.shelf-track span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); transition: width .3s var(--ease); }
.shelf-menu { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
.shelf-menu svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.shelf-menu:hover { color: var(--ink); }
.shelf-arrows { display: flex; gap: 8px; }
.shelf-arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink); transition: background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease); }
.shelf-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.shelf-arrow:hover:not(:disabled) { background: var(--ink); color: var(--cream-1); }
.shelf-arrow:disabled { opacity: .3; cursor: default; }
@media (max-width: 1000px) {
  .shelf-head { flex-direction: column; align-items: stretch; }
  .shelf-tabs { margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut); }
  .shelf-row { grid-auto-columns: calc((100% - 2 * 14px) / 3); gap: 14px; }
}
@media (max-width: 760px) {
  .shelf-row { grid-auto-columns: 66%; margin: 0 calc(-1 * var(--gut)); padding: 0 var(--gut) 4px; scroll-padding: 0 var(--gut); }
  .shelf-foot { flex-wrap: wrap; }
  .shelf-menu { order: 3; flex-basis: 100%; }
}

/* ---------- the menu: a catalogue ----------
   Three voices only, the philosophy section's: the gold tag (Inter, small capitals), the title
   (Newsreader), the plain text (Inter). No italics. Filters in a column on the left; each family a
   title and a row of cards. Spacing keeps to one scale: 8 / 12 / 16 / 24 / 32 / 48 and the section
   steps. On a wide screen the page keeps to a 1440px measure, centred; the rows still run on to
   the screen's edge. */
/* The cream gradient behind the page is stretched over main's height. Filtered down to one short
   family, main was a quarter as tall and the same gradient squeezed into a visibly darker band;
   pinned at the full menu's length, the page looks the same whatever is showing. */
body[data-page="menu"] main { background-size: 100% 6000px; background-repeat: no-repeat; background-color: var(--cream-2); }
.page-head { padding-left: var(--pad); padding-right: var(--pad); padding-bottom: 0; }
.page-head .rule { margin-bottom: 0; }
.catalog { padding: clamp(32px, 4vw, 56px) var(--pad) clamp(72px, 8vw, 112px); }
.cat-layout { display: grid; grid-template-columns: 216px minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: start; }

/* the filter column: it stays in view, and scrolls on its own if a short screen can't hold it */
.cat-side {
  position: sticky; top: 100px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-bottom: 24px;
  max-height: calc(100vh - 116px); overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;
}
.cat-side::-webkit-scrollbar { display: none; }
.cat-search {
  display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: var(--r-ctl);
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); color: var(--body); transition: box-shadow .3s var(--ease);
}
.cat-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--gold); }
.cat-search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font: 400 15px/1 var(--sans); color: var(--ink); }
.cat-search input::placeholder { color: var(--body); opacity: .75; }
.cat-search input::-webkit-search-cancel-button { cursor: pointer; }
.cat-side-toggle { display: none; }
.cat-side-body { display: grid; gap: 0; }
.cat-side-head { margin: 24px 0 8px; }
.switch { display: flex; align-items: center; gap: 12px; padding: 4px 0; font: 400 15px/1.3 var(--sans); color: var(--ink); cursor: pointer; }
.switch input, .check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-ui { position: relative; flex: 0 0 auto; width: 38px; height: 22px; border-radius: 7px; background: var(--cream-3); box-shadow: inset 0 0 0 1px var(--line); transition: background .3s var(--ease); }
.switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 4px; background: var(--paper); box-shadow: 0 1px 3px rgba(58, 23, 18, .25); transition: transform .3s var(--ease); }
.switch input:checked + .switch-ui { background: var(--ink); box-shadow: none; }
.switch input:checked + .switch-ui::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-ui, .check input:focus-visible + .check-box { outline: 2px solid var(--gold); outline-offset: 2px; }
.cat-checks { list-style: none; margin: 0; padding: 0; }
.check { display: flex; align-items: center; gap: 12px; padding: 9px 0; font: 400 15px/1.3 var(--sans); color: var(--ink); cursor: pointer; border-top: 1px solid var(--line-soft); }
.cat-checks li:first-child .check { border-top: 0; }
.check-box { flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--line); background: var(--paper); transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.check-box::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 1.6px solid var(--cream-1); border-bottom: 1.6px solid var(--cream-1); transform: rotate(-45deg) scale(0); transition: transform .2s var(--ease); }
.check input:checked + .check-box { background: var(--ink); box-shadow: none; }
.check input:checked + .check-box::after { transform: rotate(-45deg) scale(1); }
.check input:checked + .check-box { animation: tick .35s var(--ease); }
@keyframes tick { 0% { transform: scale(.82); } 55% { transform: scale(1.1); } 100% { transform: none; } }
.check-box::after { transition: transform .25s var(--ease) .05s; }
.check:hover .check-name { color: var(--gold); }
.check-name { flex: 1; transition: color .2s var(--ease); }
.check-n { font: 500 13px/1 var(--sans); color: var(--gold); }
.cat-clear { justify-self: start; margin-top: 16px; font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.cat-clear:hover { color: var(--ink); border-color: var(--ink); }
.cat-clear[hidden] { display: none; }

/* the families */
.fam { scroll-margin-top: 100px; }
.fam + .fam { margin-top: clamp(48px, 5vw, 72px); }
.fam[hidden] { display: none; }
.fam-title, .sec-title { margin: 0; font: 600 clamp(24px, 2.1vw, 31px)/1.1 var(--serif); letter-spacing: -.015em; font-variation-settings: "opsz" 72; color: var(--ink); }

.rail {
  /* runs on past the column to the screen's edge, so a card cut by the edge says "there is more" */
  display: flex; align-items: flex-start; gap: 14px; margin: 16px calc(-1 * var(--pad)) 0 -6px; padding: 6px var(--pad) 10px 6px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 6px; scrollbar-width: none; overscroll-behavior-x: contain;
}
.rail::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .rail { cursor: grab; } }
.rail.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rail.dragging .card { pointer-events: none; }
.rail-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 16px; }
.rail-bar { position: relative; width: min(200px, 40vw); height: 2px; background: var(--line-soft); border-radius: 2px; overflow: hidden; }
.rail-bar span { position: absolute; left: 0; top: 0; height: 100%; background: var(--gold); border-radius: 2px; transition: transform .15s linear; }
.rail-arrows { display: flex; gap: 8px; }
.rail-arrows .arrow:disabled { opacity: .32; pointer-events: none; }
.fam.fits .rail-foot { display: none; }

/* a card: one panel, the picture at the top and the words inside the same frame */
.card {
  flex: 0 0 auto; width: clamp(176px, 13.5vw, 220px); scroll-snap-align: start; display: flex; flex-direction: column;
  padding: 10px; border-radius: var(--r-card); background: var(--card); transition: box-shadow .4s var(--ease), transform .4s var(--ease);
}
.card[hidden] { display: none; }
@media (hover: hover) { .card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgba(58, 23, 18, .4); } }
/* the studio photographs are 4:5, so the picture is too: nothing cropped. They lie on top of one
   another and take turns by crossfading (cyclePhotos in app.js). */
.card-media { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-in); background: var(--cream-3); }
button.card-media { cursor: zoom-in; }
.card-media:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .7s ease, transform 1.2s var(--ease); }
.card-photo.on { opacity: 1; }
@media (hover: hover) {
  .card:hover .card-photo { transform: scale(1.03); }
}
.card-media.is-missing { gap: 12px; align-content: center; box-shadow: inset 0 0 0 1.5px var(--line); background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(168, 119, 44, .06) 14px 15px); }
.card-media.is-missing .missing-mark { width: 26%; opacity: .32; background-image: url(assets/brand/mark.png); }
.card-missing { max-width: 100%; padding: 0 16px; text-align: center; font: 500 11px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.card-body { display: flex; flex-direction: column; padding: 12px 6px 2px; }
.card-cat { margin: 0 0 6px; font: 500 10.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.card-name { margin: 0; min-height: 2.5em; font: 600 16.5px/1.25 var(--serif); color: var(--ink); text-wrap: balance; }
.card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 10px; }
.card-price { margin: 0; font: 500 14px/1.3 var(--sans); color: var(--ink); }
.card-price span { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--body); }
/* the add button is the bag alone, drawn in outline: no shape behind it. The box stays 40px so it
   is still easy to tap. */
.card-add {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; margin: 0 -8px -8px 0;
  background: none; color: var(--ink); transition: color .3s var(--ease), transform .3s var(--ease);
}
.card-add svg { width: 26px; height: 26px; }
.card-add:hover { color: var(--gold); }
.card-add:active { transform: scale(.9); }
.card-add.done { color: var(--gold); animation: bagPop .5s var(--ease); }
@keyframes bagPop { 40% { transform: scale(1.18); } 100% { transform: none; } }

.cat-none button { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

/* the full-size view of a piece's photographs */
.shotbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(27, 23, 16, .94); color: var(--cream-1); }
.shotbox::backdrop { background: transparent; }
.shotbox[open] { display: grid; place-items: center; animation: sbIn .35s var(--ease); }
@keyframes sbIn { from { opacity: 0; } }
.shotbox figure { margin: 0; display: grid; gap: 16px; justify-items: center; }
.shotbox img { max-width: min(88vw, 760px); max-height: calc(100dvh - 150px); width: auto; height: auto; border-radius: var(--r-card); }
.shotbox img.is-cut { max-width: min(70vw, 560px); max-height: calc(100dvh - 220px); border-radius: 0; filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .4)); }
.shotbox figcaption { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 16px; text-align: center; }
.sb-n { font: 500 10.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dk); }
.sb-name { font: 600 22px/1.2 var(--serif); }
.shotbox .arrow { position: absolute; top: 50%; margin-top: -26px; color: var(--cream-1); background: rgba(251, 247, 239, .1); border-color: rgba(251, 247, 239, .3); }
.shotbox .arrow:hover { background: var(--cream-1); color: var(--ink); }
.shotbox.single .arrow { display: none; }
.sb-prev { left: var(--gut); }
.sb-next { right: var(--gut); }
.sb-close { position: absolute; top: 18px; right: var(--gut); width: 46px; height: 46px; border-radius: var(--r-ctl); font-size: 26px; line-height: 1; color: var(--cream-1); border: 1px solid rgba(251, 247, 239, .3); }
.sb-close:hover { background: var(--cream-1); color: var(--ink); }
/* screen sizes: wide desktop (the 1440 measure above), laptop, small laptop / tablet landscape,
   tablet portrait, phone, small phone */
@media (max-width: 1280px) {
  .cat-layout { grid-template-columns: 224px minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 1080px) {
  .cat-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
  .card { width: 190px; }
  .card-name { font-size: 16px; }
}
@media (max-width: 860px) {
  /* tablets upright and phones: the filters fold away under the search, at the head of the list */
  .cat-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .cat-side { position: static; max-height: none; overflow: visible; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 0; }
  .cat-side-toggle {
    display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: var(--r-ctl);
    box-shadow: inset 0 0 0 1px var(--line); font: 500 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  }
  .cat-side-n:not(:empty) { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-tag); background: var(--ink); color: var(--cream-1); letter-spacing: 0; font-size: 10px; }
  .cat-side-toggle svg { transition: transform .3s var(--ease); }
  .cat-side.open .cat-side-toggle svg { transform: rotate(180deg); }
  .cat-side-body { display: none; grid-column: 1 / -1; padding: 16px 20px 12px; border-radius: var(--r-card); background: var(--card, #F2E9DA); }
  .cat-side.open .cat-side-body { display: grid; }
  .cat-side-head { margin-top: 16px; }
  .fam { scroll-margin-top: 90px; }
  .rail { margin: 16px calc(-1 * var(--gut)) 0; padding: 6px var(--gut) 10px; scroll-padding: 0 var(--gut); gap: 12px; }
  .card { width: min(62vw, 252px); }
  .rail-arrows { display: none; }
  .rail-foot { margin-top: 12px; }
  .shotbox img { max-width: 100vw; border-radius: 0; }
  .shotbox img.is-cut { max-width: 84vw; }
  .shotbox .arrow { top: auto; bottom: 22px; margin-top: 0; }
}
@media (min-width: 561px) and (max-width: 860px) {
  /* a tablet upright has room for the families in two columns once the filters open */
  .cat-checks { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .cat-checks li:nth-child(2) .check { border-top: 0; }
}
@media (max-width: 380px) {
  .card { width: 60vw; }
  .card-body { padding: 12px 6px 2px; }
  .card-name { font-size: 16px; }
  .cat-side-toggle { padding: 0 14px; }
}

/* ---------- make one with us ----------
   A full screen, dark like the hero: the film fills it, soft dark gradients carry the heading at
   the top and the steps along the foot, and the caption sits centred just above the steps. */
.craft { position: relative; height: 100svh; min-height: 600px; scroll-margin-top: calc(-1 * var(--bar-h)); overflow: hidden; isolation: isolate; background: var(--night); color: var(--cream-1); display: flex; flex-direction: column; justify-content: space-between; }
.film { position: absolute; inset: 0; z-index: -2; margin: 0; }
.film video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.craft-shade {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(27, 23, 16, .82) 0%, rgba(27, 23, 16, .38) 24%, transparent 42%, transparent 56%, rgba(27, 23, 16, .5) 74%, rgba(27, 23, 16, .9) 100%),
    radial-gradient(120% 90% at 50% 50%, transparent 58%, rgba(27, 23, 16, .45) 100%);
}
.craft-head { padding: calc(var(--bar-h) + clamp(28px, 5svh, 56px)) var(--gut) 0; text-align: center; }
.craft-head .eyebrow { margin-bottom: 16px; font-size: 13px; }
/* the same size as the philosophy's heading (.display's own) */
.craft-title { color: var(--cream-1); }
.craft-title em { color: var(--gold-dk); }
.craft-lede { margin: 16px auto 0; font: 400 clamp(15px, 1.15vw, 17px)/1.6 var(--sans); color: rgba(251, 247, 239, .82); }
.craft-foot { padding: 0 var(--gut) clamp(14px, 3.5svh, 34px); display: grid; justify-items: center; gap: 26px; }
/* the caption: plain words over the film's dark foot, no plate */
.film-cap { display: flex; align-items: baseline; gap: 12px; margin: 0; font: 400 clamp(20px, 1.7vw, 26px)/1.1 var(--serif); letter-spacing: -.005em; color: var(--gold-dk); text-shadow: 0 1px 14px rgba(27, 23, 16, .65); }
.film-cap strong { font: 500 clamp(22px, 1.9vw, 29px)/1.1 var(--serif); color: var(--cream-1); }
.film-cap strong:empty { display: none; }
/* The steps: a chapter strip. One hairline in four segments, each step's label under its own
   segment; the gold fills a segment as its part of the film plays, and stays once it is done. */
.make-steps { list-style: none; margin: 0; padding: 0; width: min(960px, 100%); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.make-step { position: relative; width: 100%; display: flex; align-items: baseline; justify-content: center; gap: 10px; padding: 18px 0 14px; text-align: center; color: rgba(251, 247, 239, .58); transition: color .35s var(--ease); }
.make-step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(251, 247, 239, .26); }
.ms-bar { position: absolute; left: 0; top: -.5px; height: 2px; width: 100%; background: var(--gold-dk); transform: scaleX(var(--p, 0)); transform-origin: left; }
.ms-n { font: 500 12px/1 var(--sans); letter-spacing: .12em; color: var(--gold-dk); opacity: .8; font-variant-numeric: tabular-nums; }
.ms-t { font: 500 14px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; }
.make-step:hover, .make-step.is-next, .make-step.is-done { color: rgba(251, 247, 239, .86); }
.make-step.is-on { color: var(--cream-1); }
.make-step.is-on .ms-n { opacity: 1; }
/* the step to press next: a small gold point at the start of its segment, breathing */
.make-step.is-next::after { content: ""; position: absolute; left: calc(50% - 3px); top: -2.5px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-dk); animation: nudge 1.8s var(--ease) infinite; }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(240, 200, 142, .55); } 60% { box-shadow: 0 0 0 7px rgba(240, 200, 142, 0); } }


/* ---------- trusted by & karibu: the home page's closing section ----------
   Two columns under one line of headings: the teams on the wider side, in their own colours and
   sized by eye (equal weight, not equal width), and the way to the door beside them. */
.closing { padding: clamp(80px, 9vw, 128px) var(--gut); border-top: 1px solid var(--line-soft); }
.closing-in { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px clamp(40px, 5vw, 80px); }
.closing .eyebrow { margin-bottom: 10px; }
.closing-title { margin: 0 0 28px; font: 600 clamp(28px, 2.6vw, 38px)/1.1 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.closing-title em { font-style: normal; font-weight: 500; color: var(--gold); }
/* the client logos sit on the same cards as the menu and contact pages, not in a ruled grid */
.logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.logos li { display: grid; place-items: center; height: 96px; padding: 12px 16px; border-radius: var(--r-card); background: var(--card); transition: background .35s var(--ease), transform .35s var(--ease); }
.logos li:hover { background: var(--paper); transform: translateY(-2px); }
.logos img { display: block; max-width: 100%; height: auto; }
.logos-cta a { display: grid; gap: 6px; text-align: center; text-decoration: none; font: 400 17px/1.2 var(--serif); color: var(--ink); }
.logos-cta span { font: 500 11px/1.3 var(--sans); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.logos-cta span::after { content: " \2192"; }
.logos-cta a:hover span { color: var(--ink); }
.karibu { padding-left: clamp(40px, 5vw, 80px); border-left: 1px solid var(--line-soft); display: flex; flex-direction: column; }
.karibu-addr { margin: 0; font: 400 16px/1.7 var(--sans); color: var(--body); }
.karibu-reach { display: grid; gap: 4px; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.karibu-reach a { width: fit-content; font: 500 14px/1.5 var(--sans); letter-spacing: .02em; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; }
.karibu-reach a:hover { border-color: var(--gold); }
.karibu-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 28px; }
.karibu-cta .btn { min-height: 46px; padding: 0 20px; font-size: 13px; letter-spacing: .04em; }

/* ---------- visit & contact ----------
   The menu's pieces, nothing new: one-panel cards on --card, the three voices, pill fields and
   buttons, round icon marks, the 1440 measure. Left the boutique, right the order form. */
.contact { padding: clamp(32px, 4vw, 56px) var(--pad) clamp(72px, 8vw, 112px); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.visit { display: grid; gap: 16px; }
.visit .sec-title { margin-bottom: 8px; }

.reach { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reach-card {
  display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; border-radius: var(--r-card); background: var(--card);
  color: var(--ink); text-decoration: none; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.reach-ico { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--r-ctl); background: var(--ink); color: var(--cream-1); transition: background .3s var(--ease); }
.reach-text { display: grid; gap: 4px; min-width: 0; }
.reach-label { font: 500 11.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.reach-value { font: 500 15px/1.3 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (hover: hover) {
  .reach-card:hover { transform: translateY(-3px); box-shadow: 0 18px 34px -20px rgba(58, 23, 18, .4); }
  .reach-card:hover .reach-ico { background: var(--gold); }
}

.place { padding: 10px; border-radius: var(--r-card); background: var(--card); }
.place-map { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-in); background: var(--paper); }
.place-map img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .8s var(--ease); }
.place-map:hover img { transform: scale(1.03); }
.place-body { padding: 16px 10px 8px; }
.place-label { margin: 0 0 8px; font: 500 10.5px/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.place-addr { margin: 0; font: 400 16px/1.6 var(--sans); color: var(--ink); }
.place-more { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 12px 0 0; font: 400 14px/1.5 var(--sans); color: var(--body); }
.place-more span { color: var(--gold); }
.place-more a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color .3s var(--ease); }
.place-more a:hover { border-color: var(--ink); }

.order { padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-card); background: var(--card); }
.order .eyebrow { margin-bottom: 12px; }
.order .sec-title { margin-bottom: 24px; }
.box-summary { margin: 0 0 20px; padding: 14px 16px; border-radius: var(--r-in); background: var(--paper); font-size: 14px; color: var(--body); display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.box-summary:empty { display: none; }
.box-summary button { font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.field { display: grid; gap: 8px; margin-bottom: 16px; min-width: 0; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label { font: 500 11.5px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.field input, .field select, .field textarea {
  width: 100%; min-width: 0; height: 48px; padding: 0 18px; border: 0; border-radius: var(--r-ctl); background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--line); font: 400 16px/1.3 var(--sans); color: var(--ink); transition: box-shadow .3s var(--ease);
}
.field textarea { height: auto; min-height: 104px; padding: 14px 18px; border-radius: var(--r-ctl); resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--body); opacity: .7; }
/* our own chevron: the browser's arrow sits inside the box and, in a half-width column on a
   phone, clipped "Just because" to "Just beca" */
.field select { -webkit-appearance: none; appearance: none; padding-right: 40px; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23A8772C' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 18px center; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 4px rgba(168, 119, 44, .12); }
.field.bad input { box-shadow: inset 0 0 0 1.5px #a4452c; }
.err { font-size: 12.5px; color: #a4452c; }
.err:empty { display: none; }
.order-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.order-note { margin: 16px 0 0; font: 400 13.5px/1.6 var(--sans); color: var(--body); }
@media (max-width: 1080px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .order { max-width: 720px; }
}
@media (max-width: 860px) {
  .reach { grid-template-columns: 1fr; gap: 10px; }
  .reach-card { padding: 12px 14px; }
  .order { padding: 22px 18px; }
  .order-actions .btn { flex: 1 1 auto; }
}
@media (min-width: 561px) and (max-width: 860px) {
  .reach { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

/* phones: the Explore column repeats the header's menu, so it steps aside, and the address and
   the ways to reach us sit side by side under the brand */
@media (max-width: 560px) {
  .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot .foot-col:nth-child(2) { display: none; }
  .foot .foot-col:nth-child(3) { grid-column: auto; order: 0; }
  .foot .foot-col:nth-child(4) { order: 0; }
  .foot-col a, .foot-col p { font-size: 13.5px; }
}

/* ---------- how we make it: coming soon ----------
   A marker for the section still to be made, in the three voices and nothing more. */
.soon { padding: clamp(64px, 8vw, 104px) var(--gut); text-align: center; border-top: 1px solid var(--line-soft); }
.soon .eyebrow { margin-bottom: 14px; }

/* ---------- footer: four plain columns on the dark, then the legal line ----------
   Kept compact: it was over 400px tall on a laptop, most of it padding. */
.foot { background: var(--night); color: rgba(251, 247, 239, .72); padding: clamp(36px, 4vw, 52px) var(--gut) 20px; }
.foot-in { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 56px); padding-bottom: clamp(24px, 3vw, 32px); border-bottom: 1px solid rgba(240, 200, 142, .16); }
.foot-brand img { display: block; width: 148px; height: auto; }
.foot-tag { margin: 12px 0 6px; max-width: 26ch; font: 400 17px/1.35 var(--serif); color: var(--gold-dk); }
.foot-pledge { margin: 0; font: 500 10.5px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: rgba(251, 247, 239, .55); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.foot-col h3 { margin: 2px 0 4px; font: 500 10.5px/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold-dk); }
.foot-col a, .foot-col p { margin: 0; font: 400 14px/1.5 var(--sans); color: rgba(251, 247, 239, .78); text-decoration: none; }
.foot-col a { border-bottom: 1px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease); }
.foot-col a:hover { color: var(--cream-1); border-color: rgba(240, 200, 142, .5); }
.foot-base { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px; padding-top: 16px; font-size: 12.5px; color: rgba(251, 247, 239, .5); }
.foot-base p { margin: 0; }
.foot-base a { color: rgba(251, 247, 239, .7); }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(27, 23, 16, .42); opacity: 0; transition: opacity .45s var(--ease); }
.scrim.on { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(440px, 100vw);
  background: var(--cream-1); border-left: 1px solid var(--line); display: grid; grid-template-rows: auto 1fr auto;
  transform: translateX(100%); transition: transform .6s var(--ease); outline: none;
}
.drawer.on { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 26px 28px; border-bottom: 1px solid var(--line-soft); }
.drawer-title { margin: 0; font: 600 30px/1 var(--serif); }
.drawer-x { width: 44px; height: 44px; border-radius: var(--r-ctl); border: 1px solid var(--line); font-size: 24px; line-height: 1; }
.drawer-list { list-style: none; margin: 0; padding: 8px 28px; overflow-y: auto; }
.drawer-list li { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.drawer-list img { width: 64px; height: 64px; object-fit: contain; }
.dl-name { font: 600 17px/1.2 var(--serif); }
.dl-sub { font-size: 12.5px; color: var(--body); }
.dl-qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--r-ctl); height: 34px; margin-top: 8px; }
.dl-qty button { width: 30px; height: 100%; }
.dl-qty span { min-width: 18px; text-align: center; font-size: 14px; }
.dl-line { text-align: right; font-size: 14px; font-weight: 500; }
.dl-remove { display: block; margin-top: 8px; margin-left: auto; font-size: 12px; color: var(--body); text-decoration: underline; text-underline-offset: 3px; }
.drawer-empty { padding: 40px 28px; display: grid; gap: 18px; justify-items: start; align-content: start; font: 400 22px/1.3 var(--serif); }
.drawer-empty p { margin: 0; }
.drawer-foot { padding: 22px 28px 28px; border-top: 1px solid var(--line-soft); }
.drawer-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--body); }
.drawer-total strong { font: 600 26px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); }
.drawer-foot .btn { margin-top: 18px; }
.drawer.is-empty .drawer-list, .drawer.is-empty .drawer-foot { display: none; }
.drawer:not(.is-empty) .drawer-empty { display: none; }

.toast { position: fixed; left: 50%; bottom: 26px; z-index: 95; transform: translate(-50%, 20px); padding: 14px 20px; border-radius: var(--r-card); width: max-content; background: var(--ink); color: var(--cream-1); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); display: flex; gap: 12px; align-items: center; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast span { min-width: 0; }
.toast button { color: var(--gold-dk); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* the always-there way to order: it arrives after the hero (which has its own button) */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 60; display: inline-flex; align-items: center; gap: 8px;
  height: 52px; padding: 0 20px 0 16px; border-radius: var(--r-ctl); background: var(--ink); color: var(--cream-1);
  font: 500 13px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 12px 30px rgba(58, 23, 18, .28); transform: translateY(120px); transition: transform .5s var(--ease), background .3s var(--ease);
}
.wa-float:hover { background: var(--choc); }
.wa-float.on { transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  /* the film's action is in the middle of the frame, so an upright screen keeps it */
  .craft-head { padding-top: calc(var(--bar-h) + 22px); }
  .craft-head .eyebrow { font-size: 11.5px; margin-bottom: 12px; }
  .craft-lede { font-size: 15.5px; margin-top: 12px; }
  .craft-foot { gap: 14px; }
  .make-steps { gap: 10px; }
  .make-step { flex-direction: column; align-items: center; gap: 6px; padding-top: 14px; }
  .ms-n { font-size: 11px; }
  .ms-t { font-size: 12px; letter-spacing: .14em; }
  .film-cap { font-size: 19px; }
  .film-cap strong { font-size: 21px; }
  :root { --bar-h: 64px; }
  .bar-hide-sm, .bag-label { display: none; }
  .bar { padding: 0 16px; }
  .bar.float { top: 10px; width: calc(100% - 20px); height: 56px; padding: 0 14px; }
  .nav-btn { display: inline-flex; }
  .bar-left, .bar-right { gap: 0; }
  .nav-panel { top: 74px; }
  .bar-side { gap: 14px; }
  .bar-link { letter-spacing: .14em; font-size: 10.5px; }
  .bar-logo { width: 112px; }
  .bar-logo { width: 100px; }
  /* Phones: the frame keeps the top of the screen, the words get the dark below it, so the
     headline never sits on the bar. */
  .hero-video { height: 58%; }
  .hero-shade { background: linear-gradient(180deg, rgba(27, 23, 16, .5) 0%, transparent 16%, transparent 40%, var(--night) 58%); }
  .hero-copy { bottom: 56px; }
  .hero-lede { margin-bottom: 24px; }
  .eyebrow-dark { letter-spacing: .2em; font-size: 10.5px; }
  .scroll-cue { display: none; }
  .hero-title { font-size: clamp(27px, 7.4vw, 36px); }

  .stage-top { padding-top: calc(var(--bar-h) + 10px); }
  .stage-title { font-size: clamp(26px, 7.4vw, 32px); }
  .tabs { width: calc(100% + 2 * var(--gut)); margin-top: 10px; }
  .tabs-row { padding: 0 var(--gut); gap: 24px; }
  .info-occasion { font-size: 24px; }
  .info-lede { font-size: 13px; margin-bottom: 10px; }
  .link { --box-w: min(62vw, 80cqh, 330px); }
  .link[data-size="bar"], .link[data-size="box"] { --box-w: min(76vw, 400px); --box-h: min(72cqh, 300px); }
  .link[data-size="stick"] { --box-w: 76vw; --box-h: min(44cqh, 160px); }
  .ctl-step { width: 44px; padding: 0; }
  .ctl-step span { display: none; }
  .ctl-add { padding: 0 16px; font-size: 13px; }
  .stage .qty button { width: 32px; }
  .info-ctl { gap: 6px; }
  .stage.collection { padding: 0; }
  .info-count { margin-bottom: 8px; }
  .info-name { font-size: 24px; margin-bottom: 4px; }
  .info-notes { font-size: 14px; margin-bottom: 10px; }
  .info-price { margin-bottom: 14px; }
  .info-menu { margin-top: 12px; }

  .p1 { width: 56%; } .p2 { width: 46%; } .p3 { width: 44%; right: 2%; }
}
@media (max-width: 860px) {
  /* tighter vertical rhythm: desktop spacing reads as empty screens on a phone */
  .story { padding: 196px var(--gut) 150px; }
  .f1 { left: 5%; top: 92px; bottom: auto; width: 76px; }
  .f2 { right: 4%; left: auto; top: 84px; bottom: auto; width: 100px; }
  .f3 { left: 8%; top: auto; bottom: 40px; width: 70px; filter: blur(1px) drop-shadow(0 16px 14px rgba(58, 23, 18, .2)); }
  .f4 { right: 9%; left: auto; top: auto; bottom: 34px; width: 78px; }
  .page-head { padding: calc(var(--bar-h) + 24px) var(--gut) 20px; }
  .visit-band { padding: 64px var(--gut); }
  .closing { padding: 64px var(--gut) 72px; }
  .closing-in { grid-template-columns: 1fr; gap: 48px; }
  .closing-title { margin-bottom: 22px; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .logos { gap: 8px; }
  .logos li { height: 80px; padding: 10px; }
  .logos img { transform: scale(.86); }
  .logos-cta a { font-size: 15px; }
  .logos-cta span { font-size: 9.5px; letter-spacing: .12em; }
  .karibu { padding: 40px 0 0; border-left: 0; border-top: 1px solid var(--line-soft); }
  .karibu-cta { padding-top: 24px; }
  .karibu-cta .btn { flex: 1 1 auto; }
  .foot { padding-top: 32px; }
  .foot-in { grid-template-columns: 1fr 1fr; gap: 22px 16px; padding-bottom: 22px; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-col:nth-child(3) { grid-column: 1 / -1; order: 3; }
  .foot-col:nth-child(4) { order: 2; }
  .foot-base { justify-content: flex-start; flex-direction: column; padding-top: 14px; }
  .vb-cta .btn { flex: 1 1 auto; }
  /* the order button becomes a small round mark on phones */
  .wa-float { width: 54px; height: 54px; padding: 0; justify-content: center; right: 16px; bottom: 16px; }
  .wa-float span { display: none; }
  .collection { padding: 64px 0 24px; }
  .toast { left: 16px; right: 16px; bottom: 16px; width: auto; transform: translateY(20px); justify-content: space-between; }
  .toast.on { transform: none; }
}
/* short phones: the gifting heading and line take the count's place */
@media (max-width: 860px) and (max-height: 700px) {
  .info.is-gift .info-count { display: none; }
}
/* tablets upright: room for four logos a row and three footer columns */
@media (min-width: 600px) and (max-width: 860px) {
  .closing-in { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; }
  .karibu { padding: 0 0 0 32px; border-top: 0; border-left: 1px solid var(--line-soft); }
  .karibu-cta .btn { flex: 1 1 100%; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot-col:nth-child(3) { grid-column: auto; order: 0; }
  .foot-col:nth-child(4) { order: 0; }
  .foot-base { flex-direction: row; justify-content: space-between; }
}
@media (max-width: 420px) {
  .hero-cta .btn { flex: 1 1 auto; padding: 0 18px; min-height: 46px; }
  .hero-copy { bottom: 44px; }
  .add-row .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .story-text .w { opacity: 1; }
}

/* phones: a short footer (the brand on one line, Visit and Say hello side by side, the Explore
   links are already in the menu) */
@media (max-width: 599px) {
  .foot { padding: 26px var(--gut) 14px; }
  .foot-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding-bottom: 14px; }
  .foot-brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
  .foot-brand img { width: 112px; }
  .foot-tag { display: none; }
  .foot-pledge { font-size: 9.5px; letter-spacing: .2em; }
  .foot .foot-col:nth-child(2) { display: none; }
  .foot .foot-col:nth-child(3), .foot .foot-col:nth-child(4) { grid-column: auto; order: 0; }
  .foot-col { gap: 2px; }
  .foot-col h3 { margin: 0 0 4px; }
  .foot-col a, .foot-col p { font-size: 12.5px; line-height: 1.45; }
  .foot-base { flex-direction: column; gap: 2px; padding-top: 10px; font-size: 11px; }
}