/* Home page — June-10 additions (breadth strip, purveyors line, hero slideshow).
   Tokens only; matches the values strip + brand. */

/* ===== OPENING ==================================================================
   The photograph never carries words. The words sit on their own ground, either
   under the picture (stack) or beside it (split). Three axes, set by the
   controller, so the landing links differ structurally rather than cosmetically:

     .ghero--stack / --split           where the words live
     .ghero--band-light / --band-dark  what they sit on
     .ghero__cta / --small-only        whether the buttons are here or in the bar

   The opening fits ONE screen in both layouts: the words and buttons take the
   height they need and the PHOTOGRAPH absorbs the slack, so nothing clickable ever
   falls below the fold. --fold-clear keeps the cookie bar off the buttons and lets
   the next section peek, which is the invitation to scroll. */
.ghero {
  --fold-nav: 84px;
  --fold-clear: 72px;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--fold-nav) - var(--fold-clear));
}
@media (min-width: 980px) {
  .ghero { --fold-nav: 92px; }
}
body:has(.cookie-bar:not([hidden])) .ghero { --fold-clear: 150px; }

.ghero__media {
  position: relative;
  flex: 1 1 auto;
  min-height: 150px;
  overflow: hidden;
  background: var(--bg-soft);
}
@media (min-height: 700px) { .ghero__media { min-height: 220px; } }
@media (min-height: 860px) { .ghero__media { min-height: 300px; } }

.ghero__band { flex: 0 0 auto; }
.ghero__band-in {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(26px, 3.6vw, 44px) clamp(20px, 5vw, 40px) clamp(28px, 3.8vw, 48px);
  text-align: center;
}

/* Band grounds. Light is the default; dark is the version approved 7/29. */
.ghero--band-light { background: var(--bg); }
.ghero--band-light .ghero__band { background: var(--paper); border-top: 1px solid var(--line); }
.ghero--band-light .ghero__h { color: var(--ink); }
/* 8/5, April on the descriptor line: "maybe just doing like a darker text there just so
   it's more prevalent on the screen because it's so light… I like it, but it's just not
   very readable." Was --text-muted, which is a 4.6:1 caption grey. Now full --ink, about
   11:1 on paper, so it reads as a statement rather than a caption. */
.ghero--band-light .ghero__terms { color: var(--ink); }

.ghero--band-dark { background: var(--ink-deep); }
.ghero--band-dark .ghero__band { background: var(--ink-deep); }
.ghero--band-dark .ghero__h { color: var(--onink-bright); }
.ghero--band-dark .ghero__terms { color: var(--onink-bright); }
/* On the dark band the outline button needs light ink to stay legible. */
.ghero--band-dark .ghero__cta .btn:not(.btn--solid) { color: var(--onink-bright); border-color: var(--onink-dim); }
.ghero--band-dark .ghero__cta .btn:not(.btn--solid):hover { border-color: var(--onink-bright); }
.ghero--band-dark .ghero__cta .btn--solid { background: var(--paper); border-color: var(--paper); color: var(--ink); }

/* Instagram mark in the band (client, 8/10). The box is 44px even though the glyph is
   24px: on a phone the icon IS the entire hit area, and a 24px target fails a thumb.
   Colour is a token on both band grounds, so the mark stays legible if the hero is ever
   switched back to the dark band. No hover transform — the house style is calm, and a
   single social icon is not the place to introduce motion. */
.ghero__ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: clamp(8px, 1.2vw, 14px);
  color: var(--text-muted);
  transition: color .2s ease;
}
.ghero__ig svg { display: block; }
.ghero__ig:hover,
.ghero__ig:focus-visible { color: var(--ink); }
.ghero--band-dark .ghero__ig { color: var(--onink-dim); }
.ghero--band-dark .ghero__ig:hover,
.ghero--band-dark .ghero__ig:focus-visible { color: var(--onink-bright); }

/* Type. The headline is ALWAYS larger than the rotating words (client 7/30): the
   headline is the voice, the descriptors are the credentials. */
.ghero__h {
  margin: 0;
  font-size: clamp(1.6rem, min(4.4vw, 5.6svh), 3rem);
  line-height: 1.06;
  text-wrap: balance;
}
/* "Welcome to Amelia's" in the logo script (April, 8/5).
   THE FACE LANDED 2026-08-10. April named it on the call — "that cursive font is called
   San Diego" — and then sent the file as she offered. It is loaded as a web font now:
   the OS/2 table reads fsType 0, Installable Embedding, no restrictions. The previous
   note here asserted a desktop-only licence and refused on that basis; that was an
   assumption made without the file, and the file disproves it. Licence basis and the
   one open EULA question are in assets/fonts/README.md.
   font-style is NORMAL, not italic: San Diego ships one Regular cut, so italic would
   synthesize a slant on top of a face that is already cursive.

   THE THREE OVERRIDES BELOW ARE DELIBERATE. Each one fights a house rule that is
   correct everywhere else, so do not "tidy" them back:

   1. text-transform: lowercase. base.css uppercases every public h1/h2/h3, and that is
      right for Audrey. On a signature script it is a wreck — the caps do not join, they
      set ~40% wider and the line overflowed onto two. Renato picked all-lowercase off a
      rendered comparison, 8/10. Nothing here is a fallback for a missing font.
   2. letter-spacing: 0. A connected script cannot be tracked out; even 0.01em opens
      visible gaps at the joins.
   3. font-size: min(8.2vw, 1.5em) — the two terms do different jobs and neither is
      taste. The em term matches the CAPS LINE beside it: this face has a small x-height,
      so at equal font-size it reads smaller than the Audrey line, and 1.5em is what puts
      the two at equal rendered width from 600px up. The vw term is the WRAP GUARD, and
      it is why there are no breakpoints here: below ~618px the h1 clamp is pinned to its
      1.6rem floor while the container keeps widening, so a fixed em cannot track it —
      that mismatch is what left the script at 0.79 of the caps width around 430-480px.
      Measured script-width against caps-width at 320 / 360 / 390 / 430 / 480 / 600 /
      768 / 900 / 980 / 1280 / 1920: ratio stays 0.96-1.18 and the phrase holds one line
      at every one. Re-measure both if you touch either number.

   Weight stays 400, the one real cut. A synthesized 700 shipped briefly on 8/10 and was
   too heavy; the presence comes from size instead, which is the honest lever when a
   family has a single weight. */
.ghero__script {
  display: block;
  font-family: var(--font-script, var(--font-display));
  font-style: normal;
  font-weight: 400;
  font-size: min(8.2vw, 1.5em);
  text-transform: lowercase;
  letter-spacing: 0;
  line-height: 1.12;
}
.ghero__rest { display: block; }

/* The descriptor line. One line, all terms, no rotation (8/5). */
.ghero__terms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  column-gap: 1.15em;
  row-gap: 2px;
  margin: clamp(10px, 1.4vw, 15px) 0 0;
  font-family: var(--font-body);
  letter-spacing: 0.06em;
  text-transform: lowercase;
  /* Capped below the headline's floor so it can never out-scale it (client 7/30: the
     headline is the voice, the descriptors are the credentials). */
  font-size: clamp(0.82rem, min(1.5vw, 1.9svh), 0.95rem);
  line-height: 1.5;
  font-weight: 500;
}
/* Each term is atomic — it wraps as a unit or not at all. This is the hard constraint
   from the call: never "scratch" on one line and "made" on the next. */
.ghero__term { white-space: nowrap; }

/* THE DOTS ONLY EXIST WHERE THE ROW HOLDS ONE LINE (Renato, 8/10).
   The separator is a ::before, i.e. it belongs to the term that FOLLOWS it, which keeps
   a dot from being stranded at the END of a wrapped line — but it does the opposite at a
   line START, and that is what shipped: "locally sourced" ended line one and line two
   opened "· seed-oil-free". CSS cannot ask whether a flex item is first on its line, so
   the dots come off wherever the row is known to wrap.
   Measured, not guessed: the four terms need 416px with dots and 405px without. The
   container clears 416px at a 480px viewport, which is why the dots switch on there and
   not sooner. Between roughly 450 and 479px the dotless row does fit one line, so those
   widths read as a single line with no separators — that is expected, not a bug; putting
   the dots back would wrap it. The column-gap on .ghero__terms carries the separation
   below 480, and is zeroed above it because the dot's own padding takes over. */
@media (min-width: 480px) {
  .ghero__terms { column-gap: 0; }
  .ghero__term + .ghero__term::before {
    content: "·";
    padding: 0 0.55em;
    opacity: 0.55;
  }
}

/* Scroll cue — "classy… I would actually make it pulse, but not in an obnoxious way." */
.ghero__scroll {
  position: absolute;
  left: 50%;
  bottom: 14px;
  translate: -50% 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: var(--ink-2);
  opacity: 0.75;
  transition: opacity .3s ease, translate .3s ease;
  animation: cue-pulse 2.4s ease-in-out infinite;
}
.ghero { position: relative; }
.ghero__scroll:hover, .ghero__scroll:focus-visible { opacity: 1; }
.ghero__scroll[data-cue-hidden="true"] { opacity: 0; pointer-events: none; }
@keyframes cue-pulse {
  0%, 100% { translate: -50% 0; }
  50%      { translate: -50% 5px; }
}
/* Motion is a nicety; the cue still reads without it. */
@media (prefers-reduced-motion: reduce) {
  .ghero__scroll { animation: none; }
}

.ghero__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(18px, 2.6vw, 28px);
}
@media (min-width: 980px) {
  .ghero__cta--small-only { display: none; }
}

/* SPLIT (/v3). Words hold the left, the rotating photograph the right. Stacks on a
   phone with the picture first, so the page still opens on an image. */
@media (min-width: 900px) {
  .ghero--split {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    align-items: stretch;
  }
  /* Photograph RIGHT, words LEFT, whatever the source order. */
  .ghero--split .ghero__media { grid-column: 2; grid-row: 1; }
  .ghero--split .ghero__band  { grid-column: 1; grid-row: 1; display: flex; align-items: center; border-top: 0; }
  .ghero--split .ghero__band-in {
    text-align: left;
    padding: clamp(40px, 5vw, 80px) clamp(32px, 4.5vw, 72px);
    max-width: 34rem;
    margin-inline: 0 auto;
  }
  .ghero--split .ghero__h { font-size: clamp(1.9rem, 3.4vw, 3.1rem); }
  .ghero--split .ghero__cta { justify-content: flex-start; }
}

/* One purposeful entrance on the words. The photograph does not move. */
@media (prefers-reduced-motion: no-preference) {
  .ghero__band-in > * { opacity: 0; transform: translateY(12px); animation: heroRise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
  .ghero__h     { animation-delay: 0.06s; }
  .ghero__words { animation-delay: 0.16s; }
  .ghero__cta   { animation-delay: 0.24s; }
}
@keyframes heroRise { to { opacity: 1; transform: none; } }

.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .8s ease;
}
.hero__slide[data-active="true"] { opacity: 1; }
.hero__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* people shots: bias toward the upper-middle so faces survive a wide/tall crop */
.hero__slide--face img { object-position: center 40%; }
/* subject low in frame (e.g. a plated dish): keep the lower band in view */
.hero__slide--low img { object-position: center 72%; }
/* Per-slide vertical focus for the gallery hero. A named class rather than an
   inline style attribute, which the conventions audit rejects (FE-1). */
.hero__slide--y40 img { object-position: center 40%; }
.hero__slide--y45 img { object-position: center 45%; }
.hero__slide--y55 img { object-position: center 55%; }
/* with one slide / no JS, the first slide just shows */
.hero__slides:not([data-ready]) .hero__slide:first-child { opacity: 1; }

.hero__dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 4px;
  display: flex;
  gap: 0;
  z-index: 3;
}
/* the slideshow owns the hero corners — drop the static caption to avoid overlap */
.hero__media[data-hero-slideshow] .hero__cap { display: none; }
.hero__dot {
  /* The DOT stays 9px; the CONTROL does not. A 9x9 tap target is a miss waiting to
     happen, so the button is a 44px box and the visible dot is drawn inside it with a
     pseudo-element. Nothing about the appearance changes. */
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hero__dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 1px solid var(--white);
  border-radius: 999px;
  background: transparent;
}
.hero__dot[aria-current="true"]::before { background: var(--white); }
/* 7/21 calm pass: the hero keeps dots (manual nav) + pause (WCAG 2.2.2) but
   drops the two floating arrow buttons — fewer layers over the photo. */
.hero__arrows { display: none; }
.hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(35, 37, 31, .42);
  color: var(--white);
  cursor: pointer;
  pointer-events: auto;
}
.hero__arrow:hover { background: rgba(35, 37, 31, .68); }
.hero__arrow--prev { left: 10px; }
.hero__arrow--next { right: 10px; }
.hero__pause {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(35, 37, 31, .42);
  color: var(--white);
  cursor: pointer;
  z-index: 3;
}
.hero__pause:hover { background: rgba(35, 37, 31, .68); }
/* single-slide hero hides the controls */
.hero__media[data-single] .hero__dots,
.hero__media[data-single] .hero__arrows,
.hero__media[data-single] .hero__pause,
.ghero__media[data-single] .hero__dots,
.ghero__media[data-single] .hero__arrows,
.ghero__media[data-single] .hero__pause { display: none; }

/* ===== CLOSING STAMP (7/29) =====================================================
   Where the round seal is finally legible: no photo under it, cream ground, full
   size. "It needs to be big" / "that logo needs to be set on white or like a
   solid." This band is also the first time the page names the city. */
.closer {
  background: var(--cream);
  border-top: 1px solid var(--line);
  padding: clamp(48px, 8vw, 104px) 0 clamp(52px, 8vw, 108px);
}
.closer__in { text-align: center; }
.closer__seal {
  width: clamp(160px, 24vw, 260px);
  height: auto;
  margin: 0 auto clamp(22px, 3.4vw, 34px);
}
.closer__h {
  margin: 0;
  font-size: clamp(1.5rem, 3.6vw, 2.6rem);
  line-height: 1.1;
  max-width: 22ch;
  margin-inline: auto;
  text-wrap: balance;
}
.closer__place {
  margin: clamp(16px, 2.4vw, 22px) 0 0;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.closer__hours { margin: 10px 0 0; }
.closer__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(24px, 3.6vw, 36px);
}


/* Arrow outros and the cart/account icons picked up the sage accent on hover. */
.link-arrow { color: var(--ink); }
.link-arrow:hover { color: var(--ink-deep); }

/* The open-now line was built for the old hero, where it sat in white over a dark
   photo. On the cream closer that is white-on-cream and effectively invisible, so
   it takes the page ink here. Caught by screenshotting the band, not by reading the
   CSS. The dot keeps its own colour: it is a status indicator, not decoration, and
   it is the one place colour still earns its place. */
.closer .open-dot { color: var(--ink); font-weight: 500; letter-spacing: 0.02em; }

/* The cookie bar is fixed to the bottom and would sit over the Order Now button on
   a short or narrow screen. Reserve the room ONLY while it is showing, and give it
   back the moment it is dismissed, rather than permanently shrinking the photo for
   a first-visit-only overlay. */
body:has(.cookie-bar:not([hidden])) .ghero { --fold-clear: 150px; }

/* Short viewports (a 720p laptop, landscape phone): the photo's floor is what
   pushed the button under the fold, so the floor only grows once there is height to
   spend on it. Mobile-first — small floor by default. */
.ghero__media { min-height: 150px; }
@media (min-height: 700px) {
  .ghero__media { min-height: 220px; }
}
@media (min-height: 860px) {
  .ghero__media { min-height: 300px; }
}

/* /v1's Order Now button exists for small screens only: on desktop the link sits in
   the bar as asked, but under 980px that bar is the hamburger, so without this the
   phone would show Reserve alone. It is never visible at the same time as the bar
   link, so Order Now still appears exactly once. */
@media (min-width: 980px) {
  .ghero__cta--small-only { display: none; }
}

/* ===== PAGE GRID ===============================================================
   The single band between the hero and the footer: one three-across grid of the
   destinations. Replaces the old .frames triptych AND the .mosaic collage, which the
   client rejected together on 8/10 for being "organized at the top and then a collage
   at the bottom".

   Every rule here is a specific instruction from that call, so none of it is free to
   drift back:
     - The caption sits BELOW the photo on the page background, never over the image.
       The old .m-cap laid white type on a dark gradient burned into the photograph,
       which is exactly what "not embedded into the picture" ruled out.
     - No arrow glyph. The caption is the word alone.
     - The photos are smaller than the old triptych's 3:4 portraits: a 4:3 landscape
       tile, three across, reads as "smaller photos with the label on the white".

   3xN, not 3x2. Six tiles today; an events tile is still owed to the client and must
   drop in as a seventh without touching this file. */
.pages-band { padding: clamp(36px, 5vw, 68px) 0 clamp(44px, 7vw, 92px); background: var(--bg); }
.page-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3vw, 34px) clamp(16px, 2.4vw, 28px);
}
/* Two across as soon as there is room, three from the tablet breakpoint up. Mobile
   first throughout — the conventions audit rejects max-width queries. */
@media (min-width: 34em) {
  .page-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 60em) {
  .page-grid { grid-template-columns: repeat(3, 1fr); }
}
.page-tile { margin: 0; }
.page-tile a { display: block; }
.page-tile__img { display: block; overflow: hidden; background: var(--bg-soft); }
.page-tile__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: opacity .25s ease;
}
.page-tile a:hover .page-tile__img img { opacity: 0.9; }
/* The label, on the page's own background. Centred under its photo so a grid of six
   reads as one set rather than six left-aligned fragments. */
.page-tile__cap {
  display: block;
  margin-top: clamp(9px, 1.4vw, 13px);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: clamp(0.82rem, 1.5vw, 0.95rem);
  color: var(--ink);
  text-align: center;
  transition: border-color .2s ease;
}
.page-tile a:hover .page-tile__cap { border-bottom-color: var(--ink); }

/* The round sub-logo, between the grid and the footer (client, 8/10): "just on the white,
   like kind of big. And then the footers below that." Width is capped in vw as well as px
   so it stays a stamp and never becomes a second hero on a wide screen. The intrinsic
   width/height on the <img> reserve its box before the file arrives, so adding it does not
   shift the grid above it while loading. */
.sublogo {
  margin: clamp(34px, 6vw, 76px) 0 0;
  text-align: center;
}
/* Block + auto margins rather than relying on the parent's text-align: a <picture> is
   given display:block elsewhere in this codebase, and a block box does not respond to
   text-align — which is why the mark sat against the left edge (owner, 8/11). */
.sublogo picture { display: block; }
.sublogo img {
  display: block;
  margin-inline: auto;
  width: clamp(190px, 26vw, 360px);
  height: auto;
}