/* ==========================================================
   LegenDairy – brand tokens (from HANDOFF.md §1)
   ========================================================== */
:root {
  --black: #000;     /* sampled from the sloth artwork's background (#000000), so it blends into the page */
  --white: #fff;
  --gold: #bca360;        /* light gold – accents and text on black */
  --gold-deep: #8f7330;   /* deep gold, same hue – the wholesale background and gold text on white; white and black text both reach 4.5:1 on it */
  --sand: #e4dfd7;
  --star: #fbbc04;
  --placeholder: #161616;

  --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  --column: 540px;   /* mobile-first column, centered on wide screens */
  --gutter: 22px;
  --gap: 32px;       /* airy: the owner prefers generous space between elements */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }   /* no automatic text enlarging by phone browsers (long paragraphs were getting "boosted") */
body {
  font-family: var(--font-sans);
  background: var(--black);
  color: var(--white);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; margin-inline: auto; }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Screens ---------- */
.screen { min-height: 100svh; display: flex; padding: 94px var(--gutter) 36px; }   /* 94 = 72px fixed header + 22 */
#home.screen { padding-top: 76px; }   /* screen 1 (locked) keeps its original geometry – the 72px header still clears its first line (106px+) */
.in { width: 100%; max-width: var(--column); margin: 0 auto; display: flex; flex-direction: column; }
.in > * { margin-bottom: var(--gap); }
/* Layered bg: stretched exactly to each screen's own real height (no crop, no fade —
   every screen gets its full 3-sheet pattern regardless of how tall its content is). */
.dark  { background: var(--black) url("/assets/images/bg/layers-shop.svg?v=10") center / 100% 100% no-repeat local; color: var(--white); color-scheme: dark; }
.light { background: var(--white) url("/assets/images/bg/layers-events.svg?v=10") center / 100% 100% no-repeat local; color: var(--black); }
.gold  { background: var(--gold-deep) url("/assets/images/bg/layers-wholesale.svg?v=11") center / 100% 100% no-repeat local; color: var(--white); }
.sand  { background: var(--sand);  color: var(--black); }

/* ---------- Top bar ---------- */
/* ---------- Fixed site header (brand · language flags · menu) ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  /* space-between with equal gaps → the flags sit centred between the end of the brand lockup and the menu icon */
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px;
  height: 72px; padding: 0 var(--gutter);   /* 72px, like signworkscr.com (owner, 2026-09-27) */
  background: var(--black);   /* solid black (owner, 2026-09-27): the sloth and the gold logo are made for pure black – over white/gold screens a see-through bar turned grey and dulled them */
  color: var(--white);
}
/* brand lockup (owner, 2026-09-27): the whole sloth from screen 2 (head and body, same light and colours, black cut to transparent)
   and the script logo, both at the smallest size that still reads crisply – sloth 48px high (face ~33px, from a 192px source),
   logo 95px wide (~29px high, from a 347px source), sized to sit in balance with the sloth's face */
.site-header-brand { display: flex; align-items: center; gap: 3px; margin-left: -4px; color: inherit; }
.brand-sloth { display: block; width: 47px; height: 48px; }
.brand-logo { display: block; width: 95px; height: auto; }
/* flags: small quiet buttons (18px, still crisp from the 192px source); padding keeps a finger-sized tap area */
.site-header-langs { display: flex; align-items: center; }
.lang-flag { display: block; padding: 15px 13px; margin: 0 -7px; }   /* a 44×44 tap area; the negative margin keeps the flags exactly where they were (review 2026-09-29, list G) */
.lang-flag img { display: block; width: 18px; height: 14px; }

.mb {
  background: none; border: 0; color: inherit; cursor: pointer;
  /* the icon stays 20×11, the tap area is 44×44 (UX report, owner 2026-09-29); the negative margins keep its place in the bar */
  width: 44px; height: 44px; padding: 16.5px 12px; margin: -16.5px -12px;
  display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;
  flex-shrink: 0;
}
.mb span { display: block; height: 1.5px; border-radius: 1px; background: currentColor; }
.mb span:nth-child(1) { width: 100%; }
.mb span:nth-child(2) { width: 74%; }
.mb span:nth-child(3) { width: 100%; }

/* ---------- Type ---------- */
/* One headline style for every screen (owner-approved 2026-09-26): same size, weight, line gap and spacing.
   Sentence case, not capitals (owner, 2026-09-26) – headlines are written with normal English capitalisation.
   The owner likes calm, airy pages – headlines that don't shout: ~26–30px on a phone, weight 700, max 3 lines.
   The only exceptions: the locked screen 1, and the part openers (.h1-xl). */
.h1 {
  font-weight: 700; line-height: 1.14; letter-spacing: .01em;
  font-size: clamp(25px, 7vw, 30px);
}
.h1-xl { font-size: clamp(38px, 11.2vw, 46px); line-height: 1; letter-spacing: .02em; margin-top: 14px; }   /* part openers: EVENTS, WHOLESALE */
/* Part opener hidden in a sentence (screen 7, owner 2026-09-26): the sentence in normal case at headline size,
   the one title word in capitals, about 2.4× bigger, on its own line */
.h1-open { text-transform: none; }
/* One size for every big word (EVENT on 7 and 9, WHOLESALE on 10): as big as the longest one, WHOLESALE, fits the phone width */
.h1-open .h1-word { display: block; font-size: min(2.4em, 12.6vw); font-weight: 800; line-height: .92; letter-spacing: .015em; margin: .04em 0 .06em -.03em; }
.h1-open .h1-word-inline { display: inline; margin: 0; }   /* screen 9: "EVENT soon?" – the big word and the rest on one line */
.h2-s { font-weight: 800; line-height: 1.1; font-size: clamp(22px, 6vw, 28px); }
.big { font-weight: 800; line-height: 1.2; font-size: clamp(20px, 5.6vw, 26px); }
.tl { font-size: 15px; font-weight: 800; letter-spacing: .01em; }   /* text links – normal case like all buttons (owner, 2026-09-27) */
.lab {
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;   /* 12px minimum for legibility (review 2026-09-27) */
  color: var(--gold);
}
.gold .lab { color: var(--white); }
p { font-size: 14px; line-height: 1.55; }
.quote {
  font-family: var(--font-serif); font-style: italic; color: var(--gold);
  font-size: clamp(36px, 10.6vw, 52px); line-height: 1.12; text-wrap: balance;
}
.ld { text-transform: none; font-style: normal; } /* "LegenDairy" brand spelling inside uppercase headlines */

/* ---------- Helpers ---------- */
.center { text-align: center; }
/* "Skip to content" (list H): invisible until reached with the keyboard's Tab, then a gold tab at the top-left */
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 8px; background: var(--gold); color: var(--black); font-size: 14px; font-weight: 800; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.push { margin-top: auto; }
.tuck { margin-top: -18px; }       /* label/headline pairs sit close together (14px with the 32px gap) */
.lab-foot { font-weight: 600; text-align: center; }
.down { text-align: center; font-size: 18px; margin-top: auto; }
.w-full { width: 100%; }
.w-82 { width: 82%; }
.w-58 { width: 58%; }
.w-52 { width: 52%; max-width: 220px; }
.mt { margin-top: 14px; }
.small { font-size: 12px; }
.lab-tight { margin-bottom: 6px; }
.rule-top { border-top: 1px solid #ddd; padding-top: 14px; }
.gold .rule-top { border-color: var(--white); }
.lab-rule { border-bottom: 1px solid var(--white); padding-bottom: 12px; font-size: 12px; }

/* ---------- Components ---------- */
/* ===== LOCKED 2026-09-26 – screen 1 approved by the owner (CLAUDE.md "Locked screens"). Everything from here
   down to the "shot" keyframes is screen 1; do not change without his explicit request. ===== */
/* Screen 1: the logo's top edge sits at the exact middle of the screen (row 1 ends at 50svh);
   the quote is centred between y=72px and mid-screen; lines under the logo;
   location at the bottom. */
#home { position: relative; overflow-x: clip; }   /* clip: the "shot" scale-up of the lines must never flash a sideways scrollbar */
#home .in { display: grid; grid-template-rows: calc(50svh - 76px) auto 1fr; }
#home .in > * { margin: 0; grid-column: 1; }
#home .intro-quote {
  grid-row: 1; align-self: center; margin-top: -4px;  /* centred between y=72px and mid-screen – the quote's approved position */
  text-align: center; font-size: clamp(39px, 11.5vw, 55px);
}
#home .home-mid { grid-row: 2; align-self: start; }   /* main.js sets margin-top to centre it between quote and location */
#home .home-logo { margin: 0; }
#home .home-nav { margin-top: 1.5vh; font-size: 15px; gap: 16px; }
#home .lab-foot { grid-row: 3; align-self: end; text-transform: none; letter-spacing: .04em; }

/* "Luxury inferno" quote: warm-white letters whose tops scorch (burnt edge + ember line), then fine flames
   rise from the tops of the letters (canvas.fire, drawn by main.js behind the text). Keeps burning. */
#home .intro-quote { position: relative; color: #fff8ec; }
#home .intro-quote .w { display: inline-block; position: relative; z-index: 1; transform-origin: 50% 100%; }
#home .intro-quote .fire {
  position: absolute; z-index: 0; pointer-events: none;
  filter: blur(.8px); mix-blend-mode: screen;
}
.fire-on .w {
  /* top of the letter: ember line → burnt → toasted → warm white. Scrolled so it starts all white. */
  background: linear-gradient(to bottom, #ffae4a 0%, #7c2c0c 7%, #b8672a 16%, #ecd2aa 27%, #fff8ec 38%, #fff8ec 100%);
  background-size: 100% 260%; background-position: 0 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
html:not(.intro-on) .fire-on .w,
.intro-on .fire-on .w.on { animation: scorch 1.6s .45s ease-in forwards, ember 2.6s 2s ease-in-out infinite; }
@keyframes scorch { to { background-position: 0 38%; } }
@keyframes ember {
  0%, 100% { filter: drop-shadow(0 -1px 3px rgba(255, 140, 40, .45)); }
  50%      { filter: drop-shadow(0 -2px 6px rgba(255, 110, 20, .7)); }
}
#home .loc { display: inline-flex; align-items: center; gap: 5px; padding: 6px 4px; }   /* the padding gives a bigger tap target */
#home .loc .pin { flex: none; }

/* Screen 1 = the opening video (owner, 2026-10-09: it replaces the old quote-with-flames screen). A full-height black screen under the
   fixed header; the whole frame is always visible (contain – never cropped, black sides on a computer). It plays on every entry, ends on its
   closing frame (quote, logo, three lines) and stays there; a visitor who doesn't want to wait just scrolls on. main.js plays it only while on screen. */
#home.screen.intro-screen { display: block; position: relative; height: 100svh; min-height: 0; padding: 72px 0 0; background: #000; overflow: hidden; }
.intro-video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
#home.intro-screen .replay { right: 12px; top: auto; bottom: 12px; transform: none; }
/* the maps link under the video: appears when the video has ended (or at once when the video isn't played), above the two corner buttons */
.intro-loc { position: absolute; left: 0; right: 0; bottom: 62px; z-index: 2; margin: 0; text-align: center; text-transform: none; letter-spacing: .04em;
  opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s .6s; }
.intro-reveal .intro-loc, .intro-skipped .intro-loc { opacity: 1; visibility: visible; transition: opacity .6s ease; }
@media (min-width: 1024px) { .intro-loc { left: 50%; right: auto; transform: translateX(-50%); width: calc((100svh - 80px) * .5625); } }
/* temporary closure notice (partials/closed-note.njk): one short gold line above/under the opening hours; the phone and computer
   versions sit in different blocks, so each is hidden where the other one shows */
.closed-note { margin: 6px 0; font-size: 13px; font-weight: 700; letter-spacing: .03em; line-height: 1.35; color: var(--gold); }
.closed-note-desk { display: none; }
@media (min-width: 1024px) { .closed-note-desk { display: block; } .closed-note-phone { display: none; } }
/* speaker: the video's salsa track is off until the visitor taps this (browsers don't allow sound before a tap) */
.sound { position: absolute; left: 12px; bottom: 12px; z-index: 2; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  color: var(--gold); background: rgba(0, 0, 0, .55); border: 1px solid rgba(188, 163, 96, .55); border-radius: 50%; cursor: pointer; }
.sound[hidden] { display: none; }
/* on a computer the video is a centred portrait column (9:16 of the height under the header): keep both buttons at its bottom corners, not at the screen edges */
@media (min-width: 1024px) {
  #home.intro-screen .sound { left: max(12px, calc(50% - (100svh - 80px) * .28125 + 12px)); }
  #home.intro-screen .replay { right: max(12px, calc(50% - (100svh - 80px) * .28125 + 12px)); }
}
.sound .on-only { display: none; }
.sound.on .on-only { display: inline; }
.sound.on .off-only { display: none; }
@media (min-width: 1024px) { #home.screen.intro-screen { padding-top: 80px; } }

/* Screen 1 intro (html.intro-on is set inline in base.njk; main.js runs the timeline).
   Every step stays on screen once it appears. */
/* each word rises out of the fire: from below, stretched and blurred-hot, into place */
.intro-on #home .intro-quote .w { opacity: 0; transform: translateY(.7em) scaleY(1.4); transition: opacity .5s ease-out, transform .6s cubic-bezier(.2, .8, .3, 1); }
.intro-on #home .intro-quote .w.on,
.intro-reveal #home .intro-quote .w { opacity: 1; transform: none; }
.intro-on #home .home-logo,
.intro-on #home .lab-foot { opacity: 0; transform: translateY(16px); transition: opacity .8s ease, transform .8s ease; }
.intro-logo #home .home-logo,
.intro-reveal #home .home-logo,
.intro-reveal #home .lab-foot { opacity: 1; transform: none; }
/* the three lines land one after another like shots – instant snap, no slow fade */
.intro-on #home .home-nav a { opacity: 0; }
.intro-w1 #home .home-nav a:nth-child(1),
.intro-w2 #home .home-nav a:nth-child(2),
.intro-w3 #home .home-nav a:nth-child(3),
.intro-reveal #home .home-nav a { animation: shot .13s cubic-bezier(.2, .9, .3, 1.4) both; }
@keyframes shot {
  from { opacity: 0; transform: scale(1.6); }
  to   { opacity: 1; transform: scale(1); }
}
/* ===== end of LOCKED screen 1 ===== */

/* ===== LOCKED 2026-09-26 – screens 2–6 approved by the owner (CLAUDE.md "Locked screens"). Everything from here
   to "end of LOCKED screens 2–6" is frozen, and so is every shared style these screens use (header, .h1, .lab, .more,
   .mini, .down, .w-*, the layered backgrounds) – a change for a later screen must not move screens 1–6 by a pixel. ===== */

/* Black screens after the (locked) home screen: true #000 top sheet, so photos cut on pure black – the sloth –
   melt into the page with no visible rectangle. */
.dark:not(#home) { background-image: url("/assets/images/bg/layers-shop-black.svg?v=1"); }

/* Screen 2 (sloth): only as tall as its content – no forced full-screen height, so the scroll flows on */
#sloth { min-height: 0; }
/* Location links (pin + text) on screens 2 and 3 – identical to the locked screen 1 link: 11px, weight 600, .04em */
#sloth .lab, .loc-line { text-transform: none; letter-spacing: .04em; font-weight: 600; }
#sloth .loc, .loc-line .loc { display: inline-flex; align-items: center; gap: 5px; padding: 6px 4px 6px 0; }
#sloth .loc .pin, .loc-line .pin { flex: none; }
.more + .loc-line { margin-top: -26px; }   /* sits right under "Read more" as a pair */
#sloth .down { margin-top: 0; }

/* Screens 3–4: photo, then short story blocks (small heading · text · Read more); only as tall as their content */
#shop, #obsessions { min-height: 0; }
.story > * + * { margin-top: 10px; }
.story h3 { font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.story-kicker { font-weight: 700; }
.story .more { margin-top: 8px; }
.story .more + .loc-line { margin-top: 6px; }   /* menu link sits right under Read more, like Get directions on screen 3 */
/* Legal footer (owner, 2026-09-27): screen 13 + the foot of every other page; consent line under the forms */
.legal { padding-top: 18px; border-top: 1px solid rgba(128, 128, 128, .35); text-align: center; font-size: 12px; line-height: 1.6; opacity: .85; }
.legal p + p { margin-top: 8px; }
.legal a, .consent a { text-decoration: underline; text-underline-offset: 2px; }
.legal-links { font-weight: 700; }
.legal-br { display: none; }   /* phone: two links per line (owner, 2026-09-29); computer: one line */
@media (max-width: 1023px) { .legal-br { display: inline; } .legal-mid { display: none; } }
.site-foot { background: var(--black); color: #bbb; padding: 28px var(--gutter) 40px; }
.site-foot .legal { max-width: var(--column); margin: 0 auto; }
.consent { font-size: 12px; line-height: 1.5; opacity: .85; }
.story-pics { display: none; }   /* computer only (desktop block) */
/* quote buttons (screens 7, 9, events page): one line on the phone too, like every button on the site (owner, 2026-09-28) */
.btn-quote br { display: none; }
.btn-quote .btn-sep { display: inline; white-space: pre; }
.btn-quote { white-space: nowrap; }
br.br-pc { display: none; }   /* a line break the owner asked for on a computer only (full-width column, ≥1280px) */
@media (min-width: 1280px) { br.br-pc { display: inline; } }
.faq-cols > .faqs:first-child { border-bottom: 0; }   /* screen 11: the two lists read as one on a phone */
.story + .story { margin-top: 28px; }   /* clear breathing room between the story blocks (32px gap + 28 = 60px) */

/* Screens 5 (reel) + 6 (team): the full-screen media sits where the top black sheet of the 3-layer
   background is (4px inset, 16px corners, gold hairline), so the gold and white sheets frame it like every other screen */
.team, .reel-screen { position: relative; overflow: hidden; }
.team-photo, .reel, .team::after {
  position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px);
  max-width: none; margin: 0; border-radius: 16px;
}
.team-photo, .reel { object-fit: cover; box-shadow: 0 0 0 1px rgba(188, 163, 96, .35); }
.team::after {
  content: ""; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .35) 32%, rgba(0, 0, 0, 0) 55%);
}
.team .in { position: relative; z-index: 1; justify-content: flex-end; }
.team .h1 { color: var(--white); margin-bottom: 8px; }
.team .loc-line { margin-bottom: 4px; }
.reel-screen { padding: 0; }
/* Screen 3 additions (owner OK, 2026-09-27): rating → Google reviews, opening hours, See the menu button */
.shop-info { display: flex; flex-direction: column; gap: 8px; }
.shop-info.tuck { margin-top: -26px; }   /* rating sits right under the headline (owner) */
.shop-info .rating { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin: 0; padding: 2px 0; font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.shop-info .rating .stars { font-size: 18px; letter-spacing: 2px; }
.shop-info .loc-line { margin: 0; }
.shop-info .pin { margin-right: 5px; vertical-align: -1px; }
/* ===== end of LOCKED screens 2–6 ===== */

/* Screen 1: tiny ↻ in the bottom-right corner, only when today's intro was already shown – tap to play it again.
   Absolutely placed so the location line stays exactly centred. */
#home .lab-foot { position: relative; }
.replay { display: none; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; place-items: center; padding: 0; border: 0; background: none; cursor: pointer;
  color: var(--gold); opacity: .6; font-size: 15px; line-height: 1; }
.intro-skipped .replay, .intro-reveal .replay { display: grid; }   /* always there once the intro has finished (owner, 2026-09-27) */


/* Screen 7 (events opener): headline, photo, the owner's text, button + WhatsApp as on screen 11, closing lines –
   only as tall as its content, like 3–4 */
#events { min-height: 0; }
.photo-45 { aspect-ratio: 4 / 5; }
#events .btn, #event-cta .btn { gap: 16px; line-height: 1.5; }   /* two-line label: "Check available dates / Get a quote" (owner) */

/* Screen 9 (events summary + CTA): only as tall as its content, like 7–8; three quick facts with a small gold dot */
#event-cta { min-height: 0; }
.facts { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.facts li { display: flex; align-items: center; gap: 10px; }
.facts li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex: none; }

/* Screen 8 (screens 8 + 9 merged): cans image, then The cans / The crew / The experience, each with Read more */
#serve { min-height: 0; }
.trio .more { grid-column: 2; justify-self: start; margin-top: 8px; }
.light .more { color: var(--gold-deep); }
.gold .more { color: var(--white); }   /* gold text would vanish on the gold screens */   /* deeper gold on white – the client's #bca360 is too faint for 13px text (5:1 contrast) */
.prose [id] { scroll-margin-top: 94px; }   /* Read more anchors land below the fixed header */

/* "Read more" – quiet gold text link, always exactly 8px under the text above it (owner, 2026-09-27).
   As a direct child of a screen it also cancels the screen's 32px gap. */
.in > .more { margin-top: calc(8px - var(--gap)) !important; }
.more {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin-top: 8px; padding: 6px 0;
  font-size: 13px; font-weight: 700; letter-spacing: .03em; color: var(--gold);
}

.home-logo { margin-top: 14vh; text-align: center; }
.home-logo img { width: 100%; max-width: 360px; }
.home-nav {
  display: flex; flex-direction: column; gap: 14px; margin-top: 8px;
  text-align: center; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.list {
  display: flex; flex-direction: column; gap: 14px;
  font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.stars { color: var(--star); font-size: 22px; letter-spacing: 3px; line-height: 1; }
.mini {
  display: inline-flex; align-items: center; gap: .7em; align-self: flex-start;
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  padding: 8px 0;
}
.ph {
  display: grid; place-items: center; place-content: center; text-align: center;
  background: #eee; color: #888;
  font-size: 14px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  aspect-ratio: 4 / 5;
}
.ph small { display: block; font-size: 10px; margin-top: 4px; }
.dark .ph { background: var(--placeholder); color: #777; }
.ph-wide { aspect-ratio: 3 / 2; }
.ph-fill { aspect-ratio: auto; flex: 1; min-height: 220px; }
.ph-photo { aspect-ratio: 16 / 10; }
.gold .ph { background: none; border: 1px solid var(--white); color: var(--white); aspect-ratio: 1 / 1; }
.photo { width: 100%; object-fit: cover; }
.photo-fill { flex: 1 1 0; min-height: 220px; height: 0; }
.photo.ph-photo { object-position: center 35%; }
.bar-g { width: 60px; height: 4px; background: var(--gold); }
.gold .bar-g { background: var(--white); }   /* the WHOLESALE opener sits on gold */

/* Events: 01–03 list and "whole experience" rows */
.trio { display: flex; flex-direction: column; gap: 36px; margin-top: 10px; }
.trio > div { display: grid; grid-template-columns: 30px 1fr; }
.trio b { grid-row: 1 / 3; font-size: 12px; color: var(--gold); padding-top: 3px; }
.trio h3 { font-size: 15px; font-weight: 800; letter-spacing: .01em; }   /* = screen 4 story headings */
.trio p { font-size: 12px; margin-top: 8px; }
.rows { display: flex; flex-direction: column; gap: 22px; list-style: none; }
.rows li { display: flex; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.rows span { width: 42%; }
.rows li::after { content: ""; flex: 1; border-top: 1px solid var(--gold); }

/* Buttons and link rows */
.btn {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  padding: 22px 20px; border: 0; border-radius: 8px; cursor: pointer;   /* rounded like the computer's buttons – one look site-wide (owner, 2026-09-29) */
  font: inherit; font-size: 15px; font-weight: 800; letter-spacing: .01em;   /* buttons in normal English case (owner, 2026-09-27) */
  background: var(--black); color: var(--white);
}
.gold .btn { background: var(--white); color: var(--gold-deep); }
.btn.go { background: var(--gold); color: var(--black); }
.gold .btn.go { background: var(--white); color: var(--gold-deep); }
.link {
  display: flex; justify-content: space-between; align-items: center; padding: 18px 0;
  font-size: 15px; font-weight: 800; letter-spacing: .01em;
  border-top: 1px solid rgba(128, 128, 128, .5);
}
#contact .link { font-weight: 400; }   /* screen 13: Google Maps / Waze / WhatsApp / phone in regular weight (owner, 2026-09-28) */
.whatsapp .lab { margin-bottom: 6px; text-transform: none; letter-spacing: .01em; font-size: 13px; }
.light .whatsapp .lab, .light .trio b { color: var(--gold-deep); }   /* deeper gold on white (same as Read more) – the client's #bca360 is too faint there */

/* Wholesale: "Our friends" logo banner */
/* Screen 10 "Our friends": one row of logos gliding left while on screen (main.js adds .run), paused off screen */
.marquee { overflow: hidden; margin-top: 14px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logos-track { display: flex; align-items: center; gap: 28px; padding-right: 28px; width: max-content; list-style: none; animation: marquee 66s linear infinite; animation-play-state: paused; }
.marquee.run .logos-track { animation-play-state: running; }
.logos-track li { flex: none; }
.logos-track img { width: 48px; height: 48px; object-fit: contain; margin: 0; padding: 5px; border-radius: 50%; background: rgba(255, 255, 255, .92); }   /* a light disc behind each partner logo, so dark logos don't sink into the gold (list F) */
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; } .logos-track { animation: none; } html { scroll-behavior: auto; } }
/* Screen 12: wholesale close – a lead-in line above the headline pair, only as tall as its content */
#wholesale-cta { min-height: 0; }
.lead-in { font-size: 17px; font-weight: 600; line-height: 1.4; margin-bottom: 22px; }   /* sits close above the headline, like a kicker */

/* Screen 11: wholesale FAQ – questions in white, a tap opens the answer (in black); all closed by default */
#wholesale-product { min-height: 0; }
.faqs { border-bottom: 1px solid rgba(255, 255, 255, .55); }
.faq { border-top: 1px solid rgba(255, 255, 255, .55); }
.faq summary {
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--white); cursor: pointer;
  white-space: nowrap;   /* every question on one line (owner) – the texts are kept short enough for a 320px phone */
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 24px; font-weight: 300; line-height: 1; }
.faq[open] summary::after { content: "−"; }
.faq .ans { padding: 0 0 18px; color: var(--black); font-size: 14px; line-height: 1.55; }
.faq .ans > * + * { margin-top: 10px; }

/* Screen 10: who it's for – normal case, one per line, a small matching line icon on the left */
.audience { list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 15px; font-weight: 600; }
.audience li { display: flex; align-items: center; gap: 12px; }
.audience svg { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Contact */
.soc { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.soc a { width: 38px; height: 38px; display: block; }
.soc img { width: 100%; height: 100%; border-radius: 8px; }
.rating { font-size: 18px; font-weight: 800; margin-top: 8px; }
/* Screen 13: the same live Google line as screen 3 (owner, 2026-09-27) */
.rating-live { display: inline-flex; align-items: center; gap: 8px; padding: 2px 0; font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.rating-live .stars { font-size: 18px; letter-spacing: 2px; }
.hours { font-size: 17px; font-weight: 700; margin-top: 6px; }   /* screen 13: easy to read at a glance (owner, 2026-09-27) */
/* Screen 13: LegenDairy Locals – local price + WhatsApp channel (owner, 2026-09-28) */
.locals-deal { font-size: 15px; line-height: 1.5; margin: 6px 0 4px; }
.locals-note { font-size: 13px; color: #5c5a55; margin: 2px 0 4px; }   /* fine print, dark enough on sand */
.locals-btn { margin-top: 14px; }
/* the offer's own line, all of it – "get 15% OFF the entire menu" – bold and 50% bigger (owner, 2026-09-29) */
.locals-offer { display: block; margin: 8px 0 6px; line-height: 1.3; font-size: 1.5em; font-weight: 800; }
.locals-offer strong { font-weight: inherit; }
.locals-flag { display: inline-block; width: 18px; height: 14px; margin: 0 0 0 6px; vertical-align: middle; }   /* the header's little flag, for the look */
.nowrap { white-space: nowrap; }
br.br-phone { display: none; }   /* a line break on the phone only ("We're local too —" / "and you're part…", owner 2026-09-29) */
@media (max-width: 1023px) { br.br-phone { display: inline; } }
.cr-heart { display: inline-block; width: 1.15em; height: auto; vertical-align: -.2em; margin-left: 2px; }   /* the Costa Rica heart after "…part of our community." */
.locals-title { margin-bottom: 14px; }   /* the site's headline style, like "Come find us." (owner, 2026-09-28) */
.btn-ico { display: inline-flex; align-items: center; gap: 10px; }   /* small WhatsApp mark before the label – decoration only (owner) */
/* phone (owner, 2026-09-28): under the reviews, a big gap, then the same thin line as above the legal links – a new part */
@media (max-width: 1023px) {
  /* phone (owner, 2026-09-28): opening hours right under the headline, a big gap, then the line of the links */
  #contact .in > h2 { order: -2; }
  #contact .in > div:nth-of-type(4) { order: -1; margin-bottom: 64px; }
  #contact .locals { margin-top: 32px; margin-bottom: 64px; padding-top: 28px;   /* centred: equal space above the line and below the button (owner) */ border-top: 1px solid rgba(128, 128, 128, .35); }
}
@media (min-width: 1024px) {
  #contact .locals-deal { max-width: 760px; margin-inline: auto; }
  #contact .locals-btn { width: fit-content; margin-inline: auto; }
}

/* Menu page: slides run edge to edge */
.bleed { width: calc(100% + 2 * var(--gutter)); max-width: none; margin-inline: calc(-1 * var(--gutter)); }

/* Menu (/menu/) – data in _data/menu.json */
.quote-sm { font-family: var(--font-serif); font-style: italic; color: var(--gold); font-size: 20px; line-height: 1.3; }
.dishes { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
.dishes li { text-align: center; }
.dishes img, .dish-blank { display: block; width: 100%; aspect-ratio: 1; }
.dishes h3 { font-size: 13px; font-weight: 700; letter-spacing: .02em; margin-top: 6px; }
.price { font-size: 12px; color: var(--gold); margin-top: 2px; font-variant-numeric: tabular-nums; }
.menu-brand { text-align: center; }
.menu-brand img { width: 70%; max-width: 280px; }
.menu-tagline { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-top: 8px; }
.menu-brand ~ .quote-sm { font-size: 16px; text-align: center; color: #fff8ec; }   /* same warm white as the screen 1 quote */
html[lang="es"] .menu-quote { font-size: min(16px, 3.5vw); white-space: nowrap; }   /* the Spanish line is ~25% longer – one line on every phone */
.cur { font-size: 70%; margin-right: 1px; }   /* the colón sign 30% smaller than the price (owner, 2026-09-27) */   /* menu page: tagline and quote smaller (owner, 2026-09-27) */
/* Menu parts: a thin gold rule and a centered title, like the printed menu's "—— World Bites ——" */
/* Category bar: stays pinned under the fixed header while you scroll the menu (2026-09-27); the pill of the part
   you are in fills gold (main.js). One row, scrolls sideways if a phone is too narrow. */
.menu-jump {
  position: sticky; top: 72px; z-index: 20;
  display: flex; justify-content: safe center; gap: 6px; overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter)); padding: 10px var(--gutter);
  background: var(--black); border-bottom: 1px solid rgba(188, 163, 96, .25);
}
.menu-jump::-webkit-scrollbar { display: none; }
.menu-jump a {
  flex: none; font-size: 13px; font-weight: 700; letter-spacing: .01em;
  padding: 7px 10px; border: 1px solid rgba(188, 163, 96, .6); border-radius: 999px; color: var(--gold);
  transition: background .2s, color .2s;
}
.menu-jump a.on { background: var(--gold); color: var(--black); }
.menu-part { padding-top: 30px; scroll-margin-top: 128px; }   /* header 72 + category bar 56 */
.menu-part > * + * { margin-top: 22px; }
.part-head {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-serif); font-weight: 400; font-size: 26px; color: var(--gold); text-align: center;
}
.part-head::before, .part-head::after { content: ""; flex: 1; border-top: 1px solid rgba(188, 163, 96, .6); }
.part-sub { text-align: center; font-size: 13px; color: #ccc; margin-top: 6px !important; }
.visit-loc { line-height: 1.9; }
.visit-hours { display: inline-block; margin-top: 4px; font-size: 17px; font-weight: 600; letter-spacing: .01em; color: var(--white); }   /* easy to read at a glance (owner, 2026-09-27) */
.visit-loc .loc { display: inline-flex; align-items: center; gap: 5px; padding: 4px; color: var(--gold); font-weight: 600; letter-spacing: .04em; }
.menu-sub { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 14px; }
.menu-sub small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--gold); margin-top: 3px; }
.bites-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 14px; }
.bites-grid > li > img { width: 100%; aspect-ratio: 1; object-fit: contain; margin-bottom: 8px; }
.bites-grid .country { display: flex; align-items: center; gap: 7px; }
.bites-grid .country img { width: 26px; height: 26px; margin: 0; }
.bites-grid .teaser { flex-direction: column; justify-content: center; gap: 12px; text-align: center; }
.bites-grid .teaser .globe { width: 64px; height: 64px; margin: 0 auto; }
.bites-grid h3 { font-size: 14px; font-weight: 800; letter-spacing: .01em; margin-top: 4px; }
.bites-grid p:last-child { font-size: 12px; line-height: 1.45; color: #ccc; margin-top: 4px; }
.bites-grid .lab { font-size: 11px; }
.bites-grid .bite-name { display: flex; align-items: center; gap: 7px; }   /* the flag beside the dish name (owner, 2026-09-27) */
.bites-grid .bite-name img { width: 26px; height: 26px; margin: 0; flex: none; }
.menu-duo { display: contents; }   /* gelato + packages | coffee: side by side on a computer only */
.bites-grid .teaser { display: flex; align-items: center; }
.bites-grid .teaser p { font-size: 22px; line-height: 1.25; color: var(--gold); }
.menu-head small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--gold); margin-top: 4px; }
.dish-list { list-style: none; display: flex; flex-direction: column; gap: 18px; }
.dish-list li { display: grid; grid-template-columns: 100px 1fr; gap: 14px; align-items: center; }
.dish-list img, .dish-list .dish-blank { width: 100px; height: 100px; margin: 0; }   /* 100px: big enough to sell the dish, room for a one-line description (owner, 2026-09-27) */
.dish-list .dish-blank { background: #111; border-radius: 50%; }
.dish-list h3 { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; font-weight: 800; }
.dish-list .price { font-size: 14px; font-weight: 700; white-space: nowrap; margin: 0; }
.dish-list p { font-size: 12px; line-height: 1.45; color: #ccc; margin-top: 4px; }
.dish-list .tag { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--gold); margin-top: 1px; }   /* "Vegan" – small, normal case (owner) */
.menu-head { font-weight: 800; font-size: 18px; letter-spacing: .01em; border-bottom: 1px solid rgba(255, 255, 255, .35); padding-bottom: 10px; margin-bottom: 14px; }
.price-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.price-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.price-list li span:last-child { color: var(--gold); font-variant-numeric: tabular-nums; }
.bites { list-style: none; display: flex; flex-direction: column; gap: 22px; margin-top: 18px; }
.bites h3 { font-size: 16px; font-weight: 800; letter-spacing: .01em; margin-top: 4px; }
.bites p:last-child { font-size: 13px; color: #ccc; margin-top: 4px; }

/* Long-form content pages (About the shop / events / wholesale) */
.prose > * + * { margin-top: 14px; }
.prose h2 { font-weight: 700; letter-spacing: .01em; line-height: 1.15; font-size: clamp(20px, 5.6vw, 26px); margin-top: 44px; }
.prose h3 { font-size: 14px; font-weight: 800; letter-spacing: .01em; margin-top: 24px; }
.prose h3 + p { margin-top: 6px; }
.prose p, .prose li { font-size: 15px; line-height: 1.7; }
.dark .prose p, .dark .prose li { color: #ddd; }
.prose ul { padding-left: 1.2em; }
.prose .lead { font-size: 18px; line-height: 1.4; font-weight: 800; }
/* About the shop (2026-09-27): a photo at the start of each part, dish parts end with their menu link */
/* One rhythm (owner, 2026-09-27): 14px between everything inside a part – text, photos, links – and 56px before each new part.
   No single word left alone on a line: text-wrap pretty on paragraphs, balance on headings. */
.about .prose > * + * { margin-top: 14px; }
.about .prose h2 { margin-top: 56px; }
/* photo parts (.part = head · photo · text): on a phone their boxes vanish and everything reads top to bottom exactly
   as before; on a computer they become two columns (desktop block at the end). */
.prose .part, .prose .part-title, .prose .part-text { display: contents; }
.prose .part-title > * + *, .prose .part-text > *, .prose .part > .about-img, .prose .part > .about-pair { margin-top: 14px; }
.about .prose p { text-wrap: pretty; }
.about .prose h1, .about .prose h2, .about .prose .lead, .about .cards p, .about .faq .ans p, .about .faq summary { text-wrap: balance; }   /* short blocks: even lines, never one word alone */
.about-img { width: 100%; max-width: none; margin-inline: 0; }
.gold .about-img { border-radius: 12px; }   /* photos sit on the gold like cards */
.about-tall { aspect-ratio: 4 / 5; object-fit: cover; object-position: center 40%; }
.about-sloth { width: 70%; margin-inline: auto; }
.about-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.about-pair img { width: 100%; margin: 0; }
.prose .kicker { font-weight: 700; }
.about .prose .lead-lines { text-wrap: wrap; }   /* the owner's own line breaks – don't re-balance them */

/* Content-page building blocks (events / wholesale pages, 2026-09-27) */
.prose .cards { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prose .cards li { padding: 16px 14px; border: 1px solid rgba(128, 128, 128, .35); border-radius: 12px; }
.prose .cards svg { width: 26px; height: 26px; fill: none; stroke: var(--gold-deep); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; display: block; margin-bottom: 10px; }
.prose .cards h3 { margin: 0 0 6px; font-size: 15px; }
.prose .cards p { font-size: 13px; line-height: 1.5; }
.prose .cards li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.prose .cards li:target { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }   /* the card a link points to (e.g. #team) */   /* an odd last card spans the row */
.prose .cards-1 { grid-template-columns: 1fr; }   /* one card per row – for longer descriptions (ice cream styles) */
.gold .prose .cards li { border-color: rgba(255, 255, 255, .5); }
.prose .chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.prose .chips li { font-size: 13px; font-weight: 700; line-height: 1; padding: 8px 12px; border: 1px solid currentColor; border-radius: 999px; }
.prose .checks { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.prose .checks li { display: flex; gap: 10px; font-weight: 600; }
.prose .checks li::before { content: "✓"; font-weight: 800; }
.prose .faqs, .prose .faq-cols { margin-top: 18px; }
.prose .faq-cols .faqs { margin-top: 0; }
.light .faqs { border-color: rgba(0, 0, 0, .18); }
.light .faq { border-color: rgba(0, 0, 0, .18); }
.light .faq summary { color: var(--black); white-space: normal; }
.light .faq .ans { color: #333; }
.about .faq summary { white-space: normal; }   /* content pages: longer questions may wrap */
.about .faq .ans p { font-size: 14px; line-height: 1.6; }
.gold .prose p, .gold .prose li { color: var(--white); }
.gold .prose .faq .ans p { color: var(--black); }
.about .btn + .btn { margin-top: calc(12px - var(--gap)); }
.prose .loc-line, .dark .prose .loc-line { font-size: 13px; line-height: 1.4; color: var(--gold); }   /* same small gold link as screen 4 */
.prose .tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
.prose .tags li { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.steps li { display: grid; grid-template-columns: 30px 1fr; }
.steps b { grid-row: 1 / span 4; font-size: 12px; color: var(--gold); padding-top: 4px; }
.steps li > :not(b) { grid-column: 2; }
.steps h3 { margin-top: 0; }
.steps p { font-size: 14px; }
.steps p + p { margin-top: 8px; }

/* Forms (#16–19): a full page with a close ×, the thank-you screen replaces the form after sending */
.form-page { --line: #555; --lab: var(--gold); }
.form-page.gold { --line: var(--white); --lab: var(--white); }
.form-page.light { --line: #bbb; }
.light .muted { color: #555; }
.light .done .note { color: #777; }
.form-page .in { position: relative; }
.form-page .lab { color: var(--lab); padding-top: 28px; }
.form-page .x { position: absolute; top: 10px; right: -4px; font-size: 32px; line-height: 1; margin: 0; }
.fld { display: block; }
.fld span { display: block; margin-top: 22px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--lab); }
.fld input, .fld textarea {
  display: block; width: 100%; padding: 12px 0 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  background: none; color: inherit; font: 16px var(--font-sans); outline: none; resize: none;
}
.fld input:focus, .fld textarea:focus { border-color: var(--lab); box-shadow: 0 2px 0 var(--lab); }   /* a clearly thicker line on the field you're in, not just a colour change (review 2026-09-29) */
.req { font-size: 12px; color: var(--lab); margin-top: 8px; }
.muted { color: #ccc; }
.gold .muted { color: inherit; }
.form-page form .btn { margin-top: 34px; }
.form-note { margin-top: 14px; font-size: 14px; font-weight: 700; }   /* "ready in WhatsApp – tap Send" / error, right under the button (main.js) */
.form-note:empty { display: none; }
.form-page form .tl { margin-top: 22px; font-size: 13px; }
.done { display: none; flex: 1; flex-direction: column; align-items: center; text-align: center; }
.done .lab { align-self: flex-start; }
.done > h2 { margin-top: 22vh; }
.done > p { margin-top: 40px; }
.done .note { color: #aaa; font-size: 12px; margin-top: 22px; }
.done .end { margin-top: auto; width: 100%; padding-top: 40px; }
.form-page.sent .form-head, .form-page.sent form { display: none; }
.form-page.sent .done { display: flex; }
.next { border-top: 1px solid rgba(128, 128, 128, .5); padding-top: 14px; }
.next span { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; opacity: .55; margin-bottom: 6px; }
.next a { font-size: 16px; font-weight: 800; text-transform: uppercase; }

/* ---------- Full-screen menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(12px, 2.4vh, 26px);   /* 10 links fit a small phone too */
  background: var(--black); color: var(--white);
  font-size: clamp(18px, 2.9vh, 22px); font-weight: 800; text-transform: uppercase;
}
.menu[hidden] { display: none; }
.menu > a { font-weight: 400; }
.menu > a.strong { font-weight: 800; }   /* Events and Wholesale – the business lines – in bold, like the desktop bar (owner, 2026-09-29) */
.menu-close {
  position: absolute; top: 14px; right: 22px;
  background: none; border: 0; color: var(--white); font-size: 30px; cursor: pointer;
}
.lang-switch {
  list-style: none; display: flex; gap: 18px; margin-top: 20px;
  font-size: 12px; letter-spacing: .08em;
}
.lang-switch a { color: var(--gold); }
.lang-switch [aria-current] { opacity: .55; }

body.menu-open { overflow: hidden; }

/* TEMPORARY working numbers on each screen (site.json → showNumbers) */
.show-n [data-n] { position: relative; }
.show-n [data-n]::before {
  content: attr(data-n); position: absolute; top: 80px; right: var(--gutter); z-index: 35;
  background: #e00; color: #fff; font: 800 12px/1 var(--font-sans); padding: 4px 9px; border-radius: 10px;
  pointer-events: none;
}
.show-n .form-page.sent::before { content: attr(data-n-sent); }

/* ===================== Desktop (≥ 1024px) – modelled on signworkscr.com (owner, 2026-09-27) =====================
   The phone design is untouched. On a computer:
   · header 80px: sloth + logo · main links in the bar · flags · gold "Get directions" button (no menu icon);
   · a 1280px container; light, large headlines (48px / 300) with the big words bold; body 18px;
   · solid part colours with a thin glowing gold line between screens instead of the stretched phone frame;
   · photo screens as two columns in a zig-zag, photos as rounded cards with a soft shadow;
   · the calls to action (screens 9, 12) as cards with a glowing top line; FAQ centred; contact as footer columns. */
.site-nav, .head-cta { display: none; }
@media (min-width: 1024px) {
  :root { --gutter: 32px; --split: .55; }   /* --split: where the right vertical line sits (+64px gap) – see "ONE GRID" below */
  @media (max-width: 1279px) { :root { --split: .5; } }   /* small laptops: a little more room on the right */

  /* header */
  .site-header { height: 80px; gap: 20px; padding-inline: max(32px, calc((100vw - 1216px) / 2)); }
  .brand-sloth { width: 55px; height: 56px; }
  .brand-logo { width: 118px; }
  .site-nav { display: flex; flex: 1; justify-content: center; gap: 4px; white-space: nowrap; }   /* 10 short links (owner, 2026-09-27) on one line, with air */
  .site-nav a { position: relative; padding: 8px 11px; font-size: 13px; letter-spacing: .04em; color: rgba(255, 255, 255, .8); transition: color .3s; }
  .site-nav a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
  .site-nav a:hover { color: var(--white); }
  .site-nav a.strong { font-weight: 700; color: var(--white); }   /* Events and Wholesale – the business lines – in bold (owner, 2026-09-28) */
  .site-nav a:hover::after { transform: scaleX(1); }
  .head-cta { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 6px; background: var(--gold); color: var(--black); font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; transition: background .3s; }
  .head-cta:hover { background: #d1b877; }
  .mb { display: none; }
  @media (max-width: 1199px) {   /* too narrow for all 10 links: the menu icon (same full-screen menu as the phone) */
    .site-nav { display: none; }
    .mb { display: flex; }
    .site-header .head-cta { margin-left: auto; }
  }

  /* screens: container, colours, the glowing line between parts */
  .screen { padding: 128px 32px 104px; }
  #home.screen { padding-top: 76px; }
  /* screen 1 on a computer (owner, 2026-09-27): the burning quote in one line across the screen – same words, same fire */
  #home .intro-quote { font-size: clamp(40px, 4.3vw, 64px); white-space: nowrap; }   /* one line that always fits the 1216px column */
  #home .intro-quote br { display: none; }
  #home .intro-quote br + .w { margin-left: .26em; }   /* the space the line break used to give */
  /* logo and the three lines on a computer (owner, 2026-09-27): +50%, then −15% → 459px logo, 19px lines */
  #home .home-logo img { max-width: 459px; }
  #home .home-nav { font-size: 19px; gap: 20px; }
  .in { max-width: 1216px; }
  .dark, .light, .gold, .dark:not(#home) {
    background-image: linear-gradient(90deg, transparent 5%, rgba(188, 163, 96, .85) 50%, transparent 95%);
    background-size: 100% 1px; background-position: top; background-repeat: no-repeat;
  }
  .gold { background-image: linear-gradient(90deg, transparent 5%, rgba(255, 255, 255, .7) 50%, transparent 95%); }
  #home { background-image: none; }

  /* type */
  /* headlines keep the phone's typography (owner, 2026-09-27): weight 700, the big words 800 – only larger */
  .h1 { font-size: clamp(34px, 3vw, 40px); line-height: 1.14; letter-spacing: .005em; }
  .h1-open .h1-word { font-size: 1.75em; letter-spacing: .01em; }
  .in > p, .story p, .facts li, .audience li { font-size: 18px; line-height: 1.6; }
  .in > p, .story p, .trio p { text-wrap: pretty; }   /* never one word alone on the last line (owner) */
  .story h3 { font-size: 17px; }
  .lead-in { font-size: 20px; }
  .btn { width: auto; align-self: flex-start; min-width: 280px; padding: 16px 26px; border-radius: 8px; font-size: 15px; gap: 24px; }
  .more { font-size: 14px; }
  /* quote buttons (screens 7, 9, events page): one line, the same size as the screen 12 button – the width of the right column (owner, 2026-09-27) */
  .btn-quote br { display: none; }
  .btn-quote .btn-sep { display: inline; white-space: pre; }
  #events .btn-quote, #event-cta .btn-quote, .btn-quote, #shop .btn, .about .in > .btn { line-height: normal; white-space: nowrap; width: calc(min(1216px, 100vw - 64px) * (1 - var(--split)) - 64px); }   /* + screen 3 "See the menu" (owner) */

  /* photo screens: two columns, zig-zag (photo right · left · right · left · right) */
  .screen:is(#sloth, #shop, #obsessions, #events, #serve) { min-height: 100vh; display: flex; align-items: center; }   /* .screen: the content pages reuse these ids on headings */
  #sloth .in, #shop .in, #obsessions .in, #events .in, #serve .in { position: relative; justify-content: center; min-height: 560px; }
  /* ONE GRID FOR THE WHOLE SITE (owner, 2026-09-27: "imagine a long vertical line"): two vertical lines on every page –
     the left line = the container's left edge, the right line = --split of the width + a 64px gap. Everything in the
     right column (text, buttons, photos beside text) starts on the right line; everything on the left starts on the left one.
     padding % comes from the screen, the photo's % from .in – so the padding uses .in's own width, min(1216px, 100%). */
  #sloth .in, #serve .in { padding-right: calc(min(1216px, 100%) * (1 - var(--split))); }
  #obsessions .in { justify-content: flex-start; }
  #shop .in, #events .in { padding-left: calc(min(1216px, 100%) * var(--split) + 64px); }   /* screens 3 and 7: text on the right line */
  #sloth .in > img, #shop .in > img, #obsessions .in > img, #events .in > img, #serve .in > img {
    position: absolute; top: 50%; transform: translateY(-50%); margin: 0;
    width: calc((1 - var(--split)) * 100% - 64px); max-width: none; max-height: calc(100vh - 208px); object-fit: contain;
  }
  #shop .in > img, #events .in > img { width: calc(var(--split) * 100%); }
  /* screen 7 (owner, 2026-09-27): a portrait photo from a little above the text to a little below it */
  #events.screen .in > img.photo { top: -40px; bottom: auto; height: calc(100% + 80px - var(--gap)); width: auto;   /* − the last line's bottom margin → 40px both ends */ max-height: none; transform: none; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 25%; }   /* an iPhone portrait frame (3:4), 40px above to 40px below the text */
  #events .story-kicker br { display: none; }   /* "No event is too small. No event is too big." in one line (owner) */
  #events .h1 br { display: none; }   /* "and make it LegenDairy." in one line (owner) */
  /* screen 4 on a computer (owner, 2026-09-27): instead of the collage, three dish photos beside each part,
     their top on the first line of the part's text (row 2 = the text under the small heading) */
  #obsessions .in > img { display: none; }
  #obsessions .story { display: grid; grid-template-columns: calc(var(--split) * 100%) minmax(0, 1fr); grid-template-rows: auto auto auto auto 1fr; column-gap: 64px; }
  #obsessions .story > * { grid-column: 1; }
  #obsessions .story > .story-pics { grid-column: 2; grid-row: 2 / 6; align-self: start; margin-top: 15px;   /* the text's own 10px + half its line gap */
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  #obsessions .story-pics img { width: 100%; margin: 0; border-radius: 12px; aspect-ratio: 5 / 4; object-fit: cover; }   /* trims the black above the dish so the food itself starts at the text line */
  #obsessions .story + .story, #obsessions .story:first-of-type { margin-top: 64px; }   /* headline → first part = part → part (owner) */
  #sloth .in > img, #obsessions .in > img, #serve .in > img { right: 0; }
  #shop .in > img, #events .in > img { left: 0; }
  #shop .in > img, #events .in > img.photo {
    object-fit: cover; height: auto; aspect-ratio: 4 / 3; border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 18px 40px rgba(3, 6, 16, .55);
  }
  #shop .in > img { aspect-ratio: 5 / 4; }
  /* screen 3 (owner, 2026-09-28): the photo exactly as tall as the text box beside it – headline top to button bottom */
  #shop.screen .in > img { top: 0; transform: none; height: calc(100% - var(--gap)); max-height: none; aspect-ratio: auto; object-fit: cover; object-position: center; }
  /* one-line headlines stay one line (owner: whatever is one line on the phone is one line here too) */
  #shop .h1 { white-space: nowrap; }   /* "One place. Three obsessions." stays in two lines, as on the phone (owner, 2026-09-27) */
  /* screen 4: each part's heading = the screen headline minus 15%, same weight (owner, 2026-09-27) */
  #obsessions .story h3 { font-size: clamp(21.7px, 1.9vw, 25.5px); font-weight: 700; line-height: 1.14; letter-spacing: .005em; }   /* −25% (owner, 2026-09-27) */
  /* screen 3: more air between the closing lines (owner doesn't like crowding) */
  #shop .story-kicker { margin-top: 22px; }
  #shop .in > .more { margin-top: calc(26px - var(--gap)) !important; }
  #shop .in > .more + .loc-line { margin-top: calc(18px - var(--gap)); }
  #shop .in > .btn { margin-top: 18px; }
  #events .in > img.photo { border-color: rgba(0, 0, 0, .08); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .45); }
  #sloth .down, #obsessions .down, #events .down, #wholesale .down { display: none; }
  #serve .trio { gap: 40px; }
  #serve .trio h3 { font-size: 17px; font-weight: 800; letter-spacing: .01em; }   /* same as the text on screen 4 (owner) */
  #serve .trio p { font-size: 18px; line-height: 1.6; }

  /* screen 5 (owner, 2026-09-27): no full-screen media on a computer – the reel as a centred card with room around it */
  .reel-screen { min-height: 0; padding: 104px 32px; display: flex; justify-content: center; }
  .reel { position: relative; z-index: 1; inset: auto; width: auto; height: min(84vh, 820px); aspect-ratio: 9 / 16; object-fit: cover;
    box-shadow: 0 0 0 1px rgba(188, 163, 96, .35), 0 30px 70px -24px rgba(0, 0, 0, .9); }
  /* the whole portrait video, uncropped, over a soft blurred backdrop of itself – fills the wide screen without black bars */
  .reel-screen::after {   /* ::after – ::before carries the red working number (data-n) */
    content: ""; position: absolute; inset: -60px; z-index: 0; pointer-events: none;
    background: url("/assets/images/dessert-show-poster.jpg") center / cover; filter: blur(40px) brightness(.35) saturate(1.2);
  }
  /* screen 6 (owner, 2026-09-27): the phone design – photo with the headline on it – but 25% smaller, with room around it */
  .team { min-height: 100vh; }
  .team .team-photo, .team::after { inset: 12.5%; width: 75%; height: 75%; }
  .team .team-photo { object-position: center 30%; }
  .team .h1 { font-size: 56px; }   /* as before on the photo */
  .team .in { position: absolute; left: 12.5%; right: 12.5%; bottom: 12.5%; max-width: none; margin: 0; padding: 0 48px 40px; }

  /* calls to action (screens 9 and 12): text on the left line, button + WhatsApp on the right line (no inset card,
     so nothing breaks the two vertical lines – owner, 2026-09-27) */
  #event-cta .in, #wholesale-cta .in {
    display: grid; grid-template-columns: calc(var(--split) * 100%) minmax(0, 1fr); column-gap: 64px; align-items: start;
  }
  #event-cta .in > *, #wholesale-cta .in > * { grid-column: 1; }
  #event-cta .btn, #wholesale-cta .btn { grid-column: 2; grid-row: 1 / span 2; align-self: end; width: 100%; }
  #event-cta .whatsapp, #wholesale-cta .whatsapp { grid-column: 2; grid-row: 3 / span 2; }

  /* screen 10: text left, who-it's-for grid right, friends across */
  #wholesale .in { display: grid; grid-template-columns: calc(var(--split) * 100%) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  #wholesale .in > * { grid-column: 1; }
  #wholesale .audience { grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; align-self: center; }
  #wholesale .audience li { padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .3); }
  #wholesale .in { align-content: center; }
  #wholesale .rule-top { grid-column: 1 / -1; margin-top: 72px; }
  #wholesale .marquee { -webkit-mask-image: none; mask-image: none; }   /* logos run from the very end of the white line (owner) */

  /* screen 11 (owner, 2026-09-27): the questions in two columns on the site's two vertical lines (under the text of
     screen 10) – a much shorter, calmer page. Two independent lists, so an open answer never moves the other column. */
  .faq-cols { display: grid; grid-template-columns: calc(var(--split) * 100%) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .faq-cols > .faqs:first-child { border-bottom: 1px solid rgba(255, 255, 255, .55); }
  .light .faq-cols > .faqs:first-child { border-bottom-color: rgba(0, 0, 0, .18); }
  #wholesale-product .faq summary { font-size: 16px; padding: 20px 0; }

  /* contact as footer columns */
  #contact { min-height: 0; }
  #contact .tl, #contact .lab { font-size: 13px; }
  #contact .link { font-size: 16px; }
  /* screen 13 (owner, 2026-09-27): three equal, centred columns – where we are · how to reach us · follow & reviews */
  #contact .in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 72px; align-items: start; text-align: center; }
  #contact .in > h2 { grid-column: 1; grid-row: 1; }
  #contact .in > div:nth-of-type(4) { grid-column: 1; grid-row: 2; }   /* opening hours level with "See what our guests say" (owner) */
  #contact .in > div:nth-of-type(1) { grid-column: 2; grid-row: 1 / span 2; margin-top: 0 !important; }
  #contact .in > div:nth-of-type(2) { grid-column: 3; grid-row: 1; }
  #contact .in > div:nth-of-type(3) { grid-column: 3; grid-row: 2; }
  #contact .in > .reviews { grid-column: 1 / -1; grid-row: 3; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 72px; margin-top: 56px; }   /* the three reviews on screen 13's three columns */
  #contact .in > .locals { grid-column: 1 / -1; grid-row: 4; margin-top: 56px; justify-self: center; width: 100%; max-width: 760px;
    padding-top: 28px; border-top: 1px solid rgba(128, 128, 128, .35); }   /* under the reviews; the same thin line as above the legal links, as wide as the text (owner) */
    /* owner tried the button on one row with the text (2026-09-28) and preferred it centred under the text – keep */
  #contact .in > .legal { grid-column: 1 / -1; grid-row: 5; justify-self: center; max-width: 900px; margin-top: 40px; }
  #contact .hours { font-size: 22px; }
  .legal { font-size: 12px; }
  .site-foot .legal { max-width: 900px; }
  #contact .link { justify-content: center; gap: 10px; }
  #contact .soc { justify-content: center; }

  /* menu */
  /* menu on a computer (owner, 2026-09-27): a real desktop opening (bigger logo and quote, room around them), no line under
     the category bar, the two dish columns out to the page edges – a wide gap between them – and each price close to its dish */
  .menu-page .in { max-width: 1216px; }
  .menu-page .menu-brand img { width: 440px; max-width: 440px; }
  .menu-page .menu-quote { font-size: 26px; line-height: 1.3; margin-top: 28px; white-space: nowrap; }
  .menu-page .menu-jump { top: 80px; border-bottom: 0; margin-top: 36px; padding: 14px var(--gutter); gap: 10px; }
  .menu-page .menu-jump a { font-size: 15px; padding: 9px 18px; }
  /* desserts on a computer (owner, 2026-09-27): photo tiles in 3 columns, exactly like World Bites – big photo, then name + price,
     then the one-line description. The phone keeps the approved list (small photo beside the text). */
  .menu-page .dish-list { display: grid; grid-template-columns: repeat(3, 285px); justify-content: space-between; gap: 64px 0; }
  .menu-page .dish-list li { display: block; }
  .menu-page .dish-list img, .menu-page .dish-list .dish-blank { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; margin: 0 0 8px; }
  .menu-page .dish-list h3 { font-size: 14px; margin-top: 4px; }
  /* World Bites: the outer columns out to the page edges, photos ~20% smaller, much more room between the dishes (owner) */
  .menu-page .bites-grid { grid-template-columns: repeat(3, 285px); justify-content: space-between; gap: 64px 0; }
  .menu-page .bites-grid .teaser .globe { width: 96px; height: 96px; }
  /* gelato + packages in the left dish column, coffee beside them in the right one (owner) */
  .menu-page .menu-duo { display: grid; grid-template-columns: 414px 414px; justify-content: space-between; align-items: start; row-gap: 32px; }
  /* one generous gap between all the parts of the menu – 140px (owner, 2026-09-27: "too dense") */
  .menu-page .menu-part { padding-top: 108px; scroll-margin-top: 42px; }   /* 108 + the 32px under the previous part; a jump lands the heading right under the bar */
  .menu-page #desserts { padding-top: 60px; scroll-margin-top: 90px; }      /* the first part, right under the category bar */
  .menu-page .menu-duo > #gelato { grid-column: 1; grid-row: 1; }
  .menu-page .menu-duo > #take-home { grid-column: 1; grid-row: 2; }
  .menu-page .menu-duo > #coffee { grid-column: 2; grid-row: 1; }
  .menu-page .menu-duo > .menu-visit { grid-column: 2; grid-row: 2; }   /* Visit us under Coffee, level with Gelato Packages (owner, 2026-09-27) */
  .menu-page .visit-hours { font-size: 18px; }   /* = the body text on a computer */
  .menu-page .price-list, .menu-page .part-sub, .menu-page .menu-part > .lab, .menu-page .menu-part > .small { max-width: 640px; margin-inline: auto; }

  /* content pages (2026-09-27, owner: "wider text, like a paragraph · balance photo and text"):
     each photo part is two columns on the site's two vertical lines, sides alternating (.flip), the photo level with the text;
     the parts without a photo (cards, steps, FAQ…) start on the left line too. */
  .about .in { max-width: 1216px; }
  /* everything that isn't a photo part starts on the left line, as wide as the text of the parts around it (owner, 2026-09-27) */
  .about .prose > :not(.part) { max-width: calc(var(--split) * 100%); margin-inline: 0; }
  .about .prose > .faq-cols { max-width: none; }   /* the FAQ uses both lines */
  /* wholesale page (owner, 2026-09-27): a thin white line with softly fading ends between the topics, exactly midway
     between the end of one topic and the next heading; it spans both vertical lines (the heading is --split wide) */
  /* 2026-09-28 (owner: the full-width lines were busy): more air between the topics + a short white accent above each
     topic heading, on the left line – marks where a topic starts, like a bookmark, instead of cutting the page */
  .wholesale-page .prose > h2, .about.wholesale-page .prose > .part + h2 { position: relative; margin-top: 128px; }
  .wholesale-page .prose > h2::before {   /* black, exactly in the vertical middle of the 128px gap (owner, 2026-09-28) */
    content: ""; position: absolute; left: 0; top: -65px; width: 48px; height: 2px; pointer-events: none;
    background: var(--black);
  }
  /* wholesale "Our ice cream styles": two columns on the two lines, two boxes each, read down the left column first (owner) */
  .wholesale-page .prose > .cards-1 { max-width: none; grid-template-columns: calc(var(--split) * 100%) minmax(0, 1fr); column-gap: 64px; row-gap: 12px;
    grid-auto-flow: column; grid-template-rows: repeat(2, auto); }
  .events-page .prose > .cards { max-width: none; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }   /* "What's included": the four cards in one row, left line to right edge (owner) */
  .about .in > .btn, .about .in > .whatsapp { align-self: flex-start; }
  .prose .part {
    display: grid; grid-template-columns: calc(var(--split) * 100%) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
    column-gap: 64px; margin-top: 120px;   /* the same two vertical lines as the home page */
  }
  .prose .part:first-child { margin-top: 0; }
  .prose .part-title, .prose .part-text { display: block; grid-column: 1; }
  .prose .part-title { grid-row: 2; }
  .prose .part-title, .prose .part-title > * { text-align: left; }   /* beside a photo the heading lines up with its text */
  .prose .part-text { grid-row: 3; margin-top: 20px; }
  .prose .part-title > :first-child { margin-top: 0; }
  /* the photo sits beside the text, centred on the whole text block – heading + text (owner, 2026-09-27, final) */
  .prose .part > .about-img, .prose .part > .about-pair { grid-column: 2; grid-row: 1 / 5; align-self: center; margin: 0; }
  .prose .part.flip .part-title, .prose .part.flip .part-text { grid-column: 2; }
  .prose .part.flip > .about-img, .prose .part.flip > .about-pair { grid-column: 1; }
  .prose .part > .about-img { max-height: 640px; object-fit: cover; }
  /* About, "Come find us" (owner, 2026-09-27): the sloth fills the right column; main.js sets its top so it sits at the
     vertical centre of the text box on the left (heading → WhatsApp line) and never moves */
  .prose .part { position: relative; }
  .prose .part > .about-sloth { position: absolute; grid-column: 2; grid-row: 1 / -1; top: 0; left: 0; width: 100%;   /* its box = the whole right column */
    margin: 0; max-height: none; object-fit: contain; }
  .about .prose > :not(.part) + .part, .about .prose > .part + :not(.part) { margin-top: 120px; }
  /* content pages = the home page's typography, value for value (owner, 2026-09-27: "it must look like the same site") */
  .about .prose h1 { font-size: clamp(34px, 3vw, 40px); font-weight: 700; line-height: 1.14; letter-spacing: .005em; }              /* = home .h1 */
  .about .prose h2 { font-size: clamp(28.9px, 2.55vw, 34px); font-weight: 700; line-height: 1.14; letter-spacing: .005em; }         /* = screen 4 part headings */
  .about .prose .lead { font-size: 18px; font-weight: 600; line-height: 1.6; }                                                         /* = screen 12 lead-in */
  .about .prose p, .about .prose li { font-size: 18px; line-height: 1.6; }                                                             /* = home text */
  .dark .prose p, .dark .prose li { color: var(--white); }
  .about .prose .kicker { font-weight: 700; }
  .about .prose .loc-line, .about .dark .prose .loc-line { font-size: 18px; font-weight: 600; line-height: 1.6; letter-spacing: .04em; } /* = screen 4 menu links */
  .about .prose .cards h3, .about .prose .steps h3 { font-size: 17px; font-weight: 800; letter-spacing: .01em; line-height: normal; }  /* = screen 8 */
  .about .prose .cards p, .about .prose .steps p { font-size: 18px; line-height: 1.6; }
  .light .prose .steps b { color: var(--gold-deep); }                                                                                   /* = screen 8 numbers */
  .about .faq summary { font-size: 16px; font-weight: 700; padding: 20px 0; }                                                           /* = screen 11 */
  .about .faq .ans p { font-size: 14px; line-height: 1.55; }
  .light .faq .ans { color: var(--black); }
  .about-img { border-radius: 16px; }
}

/* ===== Site review 2026-09-27 (work list, stage A) ===== */
/* #2 · labels on the sand background (screen 13): a darker gold that passes WCAG AA – 5.1:1 (gold was 1.9, deep gold 3.4) */
.sand .lab { color: #6f5823; }
/* #4 · bigger tap areas without moving anything: an invisible hit zone around the small links (≥ 24px, WCAG 2.2) */
.home-nav a, .more, .loc, .whatsapp .tl, .consent a, .form-page form .tl a, .legal a, .rating { position: relative; }
.home-nav a::before, .more::before, .loc::before, .whatsapp .tl::before, .consent a::before, .form-page form .tl a::before, .legal a::before, .rating::before {
  content: ""; position: absolute; inset: -10px -6px;
}

/* Work list #10 · real Google reviews on screen 13 (live from Google, googlePlace.js) */
.reviews { display: grid; gap: 22px; margin-top: 8px; }
.review { margin: 0; padding-top: 16px; border-top: 1px solid rgba(0, 0, 0, .15); text-align: center; }
.review-stars { color: var(--star); font-size: 14px; letter-spacing: 2px; margin: 0; }
.review blockquote { margin: 8px 0 0; }
.review blockquote p { font-size: 15px; line-height: 1.55; margin: 0; text-wrap: pretty; }
.review figcaption { margin-top: 10px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: #6f5823; }   /* the accessible gold on sand */
.review figcaption a { text-decoration: underline; text-underline-offset: 2px; }

/* Screen 3 · one short real Google review under the rating (owner, 2026-09-28) – live from Google */
.shop-quote { margin: 4px 0 2px; }
.shop-quote blockquote { margin: 0; }
.shop-quote blockquote p { margin: 0; font-family: var(--font-serif); font-style: italic; font-size: 16px; line-height: 1.45; color: #fff8ec; text-wrap: pretty; }
.shop-quote figcaption { margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .02em; color: var(--gold); }
.shop-quote figcaption a, .review figcaption a { position: relative; text-decoration: underline; text-underline-offset: 2px; }
.shop-quote figcaption a::before, .review figcaption a::before { content: ""; position: absolute; inset: -10px -6px; }
@media (min-width: 1024px) { .shop-quote blockquote p { font-size: 18px; } }

/* Google-style review card (owner, 2026-09-28: authentic, as if read on Google) – screen 3 (one) and screen 13 (the rest).
   Google's own look: white card, Roboto/Arial, grey text, yellow stars, the G logo; not the site's type on purpose. */
.g-review { margin: 0; background: #fff; color: #3c4043; border-radius: 8px; padding: 14px 16px; text-align: left;
  font-family: Roboto, Arial, sans-serif; box-shadow: 0 1px 2px rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15); }
.g-head { display: flex; align-items: center; gap: 10px; }
.g-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 500 14px Roboto, Arial, sans-serif; }
.g-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.g-who a, .g-who b { color: #202124; font-size: 14px; font-weight: 500; text-decoration: none; position: relative; }
.g-who a::before { content: ""; position: absolute; inset: -10px -6px; }
.g-who a:hover { text-decoration: underline; }
.g-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #70757a; }
.g-stars { color: #fbbc04; font-size: 13px; letter-spacing: 1px; }
.g-logo { flex: none; width: 20px; height: 20px; margin: 0; align-self: flex-start; }
.g-review blockquote { margin: 10px 0 0; }
.g-review blockquote p { margin: 0; font-size: 14px; line-height: 20px; color: #3c4043; }
.shop-info .g-review { margin: 6px 0 4px; }
@media (min-width: 1024px) { .shop-info .g-review { max-width: 100%; } }
/* Screen 13 reviews: long ones are clamped in the card (the full text is on Google) */
#contact .g-review blockquote p { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; }
/* Phone (owner, 2026-09-28): up to 5 reviews in one row you swipe sideways, like Google's – a shorter page */
@media (max-width: 1023px) {
  #contact .reviews { position: relative; display: flex; gap: 12px; overflow-x: auto;   /* relative: keeps the screen-reader star text inside the row (else the page scrolls sideways) */ scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 10px; scroll-padding-inline: var(--gutter); }
  #contact .reviews::-webkit-scrollbar { display: none; }
  #contact .reviews .g-review { flex: 0 0 84%; scroll-snap-align: start; }
}
/* Computer: three columns stay three reviews */
@media (min-width: 1024px) { #contact .reviews .g-review:nth-child(n+4) { display: none; } }

/* Phone folds (owner, 2026-09-29): the events part (7–9) and the wholesale part (10–12) each fold into one banner –
   the owner's headline, a small photo and a button that opens the part in place (main.js). Computer: no banners, nothing folds. */
.fold-banner, .fold-close { display: none; }
@media (max-width: 1023px) {
  /* only when scripts run (html.js, base.njk) – without them the parts stay open and the banners stay hidden */
  .js .fold-banner { display: flex; min-height: 0; padding: 64px var(--gutter) 56px; }
  .js .fold-banner.gone { display: none; }
  /* a wide banner photo, the button's width, 2:1 (owner, 2026-09-29 – panoramic photos to come); image → headline = text → button */
  .fold-pic { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 12px; margin: 0 0 var(--gap); }
  .fold-banner .in > .btn { margin-bottom: 0; }
  .js .fold-body:not(.open) { display: none; }
  /* "Close events ↑" / "Close wholesale ↑": a small button in the big buttons' style, on the right (owner, 2026-09-29) */
  .js .fold-close { display: inline-flex; align-items: center; gap: 8px; align-self: flex-end; margin-top: 8px; padding: 11px 18px; border: 0; border-radius: 8px; cursor: pointer;
    font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .01em; background: var(--black); color: var(--white); }
  .js .gold .fold-close { background: var(--white); color: var(--gold-deep); }
}

/* Screen 3 as the phone's info hub (owner, 2026-09-29): under the photo – hours + live "open now", address, Get directions,
   See the menu, visitor facts; the hours line above and the two links below step aside. Computer: unchanged, no hub. */
.shop-now, .shop-video { display: none; }
@media (max-width: 1023px) {
  /* Airy rhythm (owner, 2026-09-29: "the most important screen on the phone – too crowded"): each group – rating, photo,
     when & where, the two buttons, visitor facts, the story – sits 40px from the next; lines inside a group 12px apart. */
  #shop .shop-info { gap: 12px; }
  #shop .in > img { margin-bottom: 40px; }
  /* the owner's promo video between the visitor facts and "Our place" (owner, 2026-09-29) – full vertical frame */
  .shop-now .shop-video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; margin-top: 28px; background: #111; }
  .shop-now { display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; }
  .shop-now .loc-line, .shop-now .open-now { margin: 0; font-size: 14px; color: var(--white); }   /* the whole hub speaks white (owner, 2026-09-29) */
  .shop-now .loc-line:first-child { font-size: 17px; }   /* Open daily · hours – bigger (owner) */
  .shop-now .open-now { font-weight: 400; }
  .shop-now .pin { margin-right: 9px; vertical-align: -1px; }
  .shop-now .btn:first-of-type { margin-top: 28px; }
  .shop-now .btn + .btn { margin-top: 2px; }   /* 12 + 2 = 14px between the two buttons */
  .shop-now .practical { margin-top: 28px; list-style: none; font-size: 14px; line-height: 1.5; display: flex; flex-direction: column; gap: 8px; }   /* one fact per line (owner, 2026-09-29) */
  /* a line icon per fact (owner, 2026-09-29) on the same vertical line as the icons above (11px), text on the same line as their text (18px) */
  /* the fact icons a little bigger (15px, owner 2026-09-29), still centred on the same line as the 11px icons above; all text starts at 20px */
  .shop-now .practical li { position: relative; padding-left: 20px; color: var(--white); }
  .shop-now .practical .fact-ico { position: absolute; left: -2px; top: calc(.75em - 7.5px); width: 15px; height: 15px; }
  .shop-now .open-now { gap: 10.5px; }
  .shop-now .open-now::before { margin-left: 1.5px; }   /* the status dot centred on the icons' line too */
  .btn-line { background: var(--white); color: var(--black); }   /* Get directions: a white button (owner, 2026-09-29) */  #shop .shop-info .loc-line, #shop .in > .more + .loc-line, #shop .in > .btn { display: none; }
  #shop .in > .more { margin-bottom: 0; }
}
.open-now { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.open-now::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #9a9a9a; }
.open-now.is-open::before { background: #3ecf6e; box-shadow: 0 0 0 3px rgba(62, 207, 110, .2); }
.open-now[hidden] { display: none; }

/* Work list #11 (reduced, owner 2026-09-28): one line of visitor facts – menu "Visit us" and about "Come find us" */
.practical { font-size: 13px; line-height: 1.6; color: var(--muted, #bbb); text-wrap: balance; }
.menu-visit .practical { margin-top: 8px !important; }
@media (min-width: 1024px) { .about .prose .practical { font-size: 15px; } }