/* Sunday Supper. Tokens only. Mobile-first.

   REBUILT 2026-08-20. The page used to be the only one on the site laid out on
   the full-bleed `.split` component; everything here is inside `.container`, so
   it sits on the same --maxw axis as home, story, catering, wineclub, purveyors,
   location and press. Four bands, four different shapes: an asymmetric hero, a
   centred menu card, a photo scroller that breaks to the container's full width,
   and a ruled archive. */

/* ---------------------------------------------------------------------------
   HERO

   Type left, one photograph right, and the ratio between the two columns is
   chosen so their heights land together: at 1240px the media column is ~620px
   wide, and the set-table shot is 3:2 native, so it renders ~413px tall against
   a copy block of roughly the same. That is the whole reason the old layout left
   a void here, and it is why the image is not cropped to a taller frame.
   --------------------------------------------------------------------------- */
/* COMPACTED 2026-08-30. Renato: "this hero page is too large vertically it needs
   compacting." It was standing 747px, which on a laptop at 1440x680 filled the whole
   window with the copy adrift in the middle of it.

   Two levers, both on the media side, because the copy is already four short elements and
   there is nothing in it to cut. The section's own padding comes down, and the collage is
   capped so it stops growing with the column on a wide screen: at 470px the top frame runs
   313 and the square pair 228, and the overlap removes about 27, which lands the whole
   thing near 515 instead of 587. The copy block is roughly 250, so the two columns finish
   close enough that the centred copy reads as placed rather than as floating. */
.supper-hero.section { padding-top: clamp(16px, 2.2vw, 32px); padding-bottom: clamp(22px, 3vw, 44px); }
.supper-hero__in { display: grid; gap: clamp(26px, 4vw, 56px); }
.supper-hero__h { margin: 8px 0 clamp(14px, 1.8vw, 20px); font-size: clamp(2.3rem, 6.4vw, 3.6rem); }
/* Held near 46ch: the client's lede is three sentences and the full column
   width would run it past a comfortable measure on a laptop. */
.supper-hero__lede { max-width: 46ch; color: var(--ink-2); }

.supper-hero__act { margin-top: clamp(20px, 2.6vw, 28px); }

/* ---------------------------------------------------------------------------
   THE HERO COLLAGE (2026-08-30)

   Three photographs, overlapped, edged in the page ground so they read as prints
   laid down on the page rather than three tiles in a grid. Stacey described the
   device for catering and it belongs here more than it did there: "they were all
   nestled together and all the information was on one side and the pictures were
   on the other."

   WHY OVERLAP AT ALL. A 2x2 of separate frames is a gallery; this page is trying
   to say one evening, not four pictures. The overlap is what makes the three read
   as a single object, and the ground-coloured edge is what stops it reading as a
   mistake.

   THE PULL IS IN PERCENT, NOT PIXELS, so the overlap stays proportional as the
   column narrows instead of eating half a photograph on a small laptop.

   NOTHING IS CROPPED TO A SHAPE IT IS NOT. Each frame carries its own
   aspect-ratio off the file's real pixels, the same rule the scroller below
   follows, so a portrait stays portrait and the reserved space is right before
   the image loads.
   --------------------------------------------------------------------------- */
.supper-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.1vw, 14px);
  align-items: start;
}
.supper-collage__f {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-soft);
  /* The ground-coloured edge is what separates the overlapping frames. */
  box-shadow: 0 0 0 clamp(4px, 0.6vw, 8px) var(--bg);
}
.supper-collage__f img { display: block; width: 100%; height: auto; }
.supper-collage__f--a { grid-column: 1 / -1; aspect-ratio: 3 / 2; }
/* SQUARE, and the media column is the narrower of the two. Both are here for one reason:
   the two columns have to finish at roughly the same height or the centred copy floats
   down the page with a void above the eyebrow.

   The arithmetic, measured rather than guessed. At 3:4 in a 585px column the collage stood
   799px against a copy block of about 350, and shortening the frames alone only bought 24
   of that back. Narrowing the column to 5 of 11 takes it to about 534px wide, a square
   lower pair then runs 260 tall against a 356 top frame, and the overlap removes another
   30. That lands near 585 and the void closes to something the eye reads as breathing room
   rather than as a gap. The copy column gains the width the media gave up, which the
   two-line headline wanted anyway. */
.supper-collage__f--b { aspect-ratio: 1 / 1; }
.supper-collage__f--c { aspect-ratio: 1 / 1; }
.supper-collage__f--a img,
.supper-collage__f--b img,
.supper-collage__f--c img { height: 100%; object-fit: cover; }

/* The overlap only exists where there is room for it. Below 700px the frames sit
   apart in a plain grid, because a 6% pull on a 170px tile is a nick, not a
   composition, and the shadow ring alone already separates them. */
@media (min-width: 700px) {
  .supper-collage__f--b { margin-top: -12%; z-index: 2; }
  .supper-collage__f--c { margin-top: 5%; z-index: 1; }
  .supper-collage__f--a { z-index: 0; }
  .supper-collage__f { position: relative; }
}

@media (min-width: 860px) {
  .supper-hero__in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
  .supper-collage { max-width: 470px; margin-left: auto; }
}

/* ---------------------------------------------------------------------------
   EVERY PLATE STARTS IN ARIZONA

   One photograph, one paragraph, and deliberately NOT the hero's shape. Three
   bands in a row built from a picture beside some words is how a page stops
   having any rhythm, so this one runs narrow-portrait against a wide measure and
   the band below it is a woven grid.
   --------------------------------------------------------------------------- */
.supper-source__in { display: grid; gap: clamp(24px, 3.6vw, 48px); align-items: center; }
.supper-source__shot { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--bg-soft); }
.supper-source__shot img { display: block; width: 100%; height: auto; }
.supper-source__h { margin: 0 0 clamp(12px, 1.6vw, 18px); font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.supper-source__p { margin: 0; color: var(--ink-2); max-width: 52ch; font-size: clamp(1.02rem, 1.5vw, 1.14rem); }
@media (min-width: 860px) {
  .supper-source__in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}

/* ---------------------------------------------------------------------------
   AN EVENING BUILT AROUND ARIZONA - words and pictures woven

   NINE CELLS FOR NINE THINGS: the client's six lines and three photographs, with
   no filler tile and no empty corner. At three columns the photographs fall on a
   diagonal, which pulls the eye across the lines instead of past them; each spans
   two rows so the grid stays full.

   The lines are set as statements rather than list items. They were a bulleted
   card before and the bullets were carrying six accent moments on a page whose
   diet allows about one (client, 7/21: "less words, more calm").
   --------------------------------------------------------------------------- */
.supper-includes__h { margin: 0 0 clamp(22px, 3vw, 34px); font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.supper-weave { display: grid; gap: clamp(14px, 2vw, 26px); }
.supper-weave__shot { margin: 0; border-radius: var(--r); overflow: hidden; background: var(--bg-soft); }
.supper-weave__shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.supper-weave__line {
  margin: 0;
  align-self: center;
  color: var(--ink);
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.6;
  padding-left: clamp(12px, 1.4vw, 18px);
  border-left: 1px solid var(--line);
  max-width: 34ch;
}
@media (min-width: 900px) {
  .supper-weave {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(120px, auto);
  }
  .supper-weave__shot { grid-row: span 2; }
  .supper-weave__shot--tall { aspect-ratio: 3 / 4; }
}

/* ---------------------------------------------------------------------------
   REVEAL

   The one piece of motion on this page, and it is doing a job: the collage and
   the woven grid both land as compositions rather than as a stack of things that
   were always there. Nothing loops, nothing parallaxes, nothing moves on a timer.
   Driven by IntersectionObserver, never a scroll listener.

   NO-JS AND REDUCED-MOTION BOTH GET THE FINISHED STATE, not a hidden one. An
   opacity-0 default that waits for JavaScript is how a page ships blank.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
    will-change: opacity, transform;
  }
  .js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   AN EVENING BUILT AROUND ARIZONA — the menu card

   The client's six lines, set as the object they describe. Every supper prints a
   menu; one of them is photographed on the table in the scroller below and three
   more are linked at the foot of this page. A card at a menu's measure with a
   hairline between courses, no markers, and a short centred rule under the
   heading, which is the one printed-menu device worth borrowing.
   --------------------------------------------------------------------------- */
/* THE PHOTOGRAPH PAIR. One landscape, one portrait, and the column ratio is chosen
   so their heights match without cropping either: across the container a 3:2 over
   4.5 columns and a 2:3 over 2 columns both resolve near 510px tall. They are the
   largest images on the page on purpose, because this band is the one answering
   "what is this actually like" and the card underneath cannot.

   Stacked on a phone, landscape first: the people shot is the one worth the scroll,
   and a 2:3 portrait at full phone width is already most of a screen. */
/* .supper-evening and .supper-card were removed with the band they styled
   (2026-08-30). Their six lines now live in .supper-weave and their two
   photographs moved into the hero collage and the sourcing band. */

/* ---------------------------------------------------------------------------
   FROM THE TABLE — the photo scroller (client, 2026-08-17)

   Stacey: "it's a hefty ticket price. So I want people to know what they're
   getting." A scroller rather than a grid, because she asked for one ("a little
   carousel at the bottom... so it just kinda goes through some different photos")
   and because the set will grow as they shoot more suppers; a grid has to be
   re-balanced every time a photo is added, a track does not.

   ONE HEIGHT FOR EVERY FRAME, width follows the file's intrinsic ratio, nothing
   cropped. Two client passes landed on this. The original track forced all ten
   through a 320x300 landscape box with object-fit: cover, throwing away most of
   every portrait. The 8/20 rebuild fixed the cropping but gave tall frames more
   height than wide ones, on the theory that a ragged top edge reads like
   photographs propped on a shelf. The owners disagreed, twice: April on the 8/21
   call, "just so they're all the same size... so you're not having all that white
   space, like this first picture is tall... just so it looks more systematic", and
   Stacey on her list, "just make them all resize to have the exact same height".
   So heights match and the widths are ragged instead — which is the one of the two
   that a scroller can absorb, since it scrolls sideways anyway.

   Scroll snap, no library, no autoplay. Autoplay would move the page under
   somebody reading the card above it.
   --------------------------------------------------------------------------- */
.supper-shots__h {
  margin: 0 0 clamp(18px, 2.4vw, 26px);
  font-size: clamp(1.4rem, 3.4vw, 2rem);
}

.supper-shots { position: relative; }
.supper-shots__track {
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
  display: flex;
  /* Every frame is the same height now, so this no longer does any work — kept
     because a future frame with an odd intrinsic size should still sit on the
     line rather than float. */
  align-items: flex-end;
  gap: clamp(10px, 1.4vw, 18px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* The scrollbar is the affordance on a trackpad; hiding it entirely leaves no
     hint that there is more, so it stays and is simply thin. */
  scrollbar-width: thin;
}
.supper-shots__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg-soft);
  line-height: 0;
}
.supper-shots__item img {
  display: block;
  height: var(--shot-h);
  width: auto;
  /* The track scrolls, so a frame is allowed to be wider than its parent. Without
     this the global img max-width squashes every landscape shot. */
  max-width: none;
}
/* The single height. --tall / --wide are still emitted by the template and still
   describe the file honestly, but they no longer change the height; they are left
   in place so the markup keeps saying which way a frame runs. */
.supper-shots__item { --shot-h: clamp(280px, 52vw, 360px); }

/* Arrows sit over the ends of the track, bottom-aligned with the shorter frames
   rather than centred on a ragged row. Hidden in the markup and revealed by
   script, so no-JS gets a plain scroller instead of dead buttons. 44px so they
   are a real target on a phone. */
.supper-shots__nav {
  position: absolute;
  bottom: calc(clamp(210px, 42vw, 310px) / 2 - 10px);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 10px rgb(0 0 0 / 0.10);
}
.supper-shots__nav:hover { border-color: var(--accent); color: var(--accent); }
.supper-shots__nav--prev { left: -6px; }
.supper-shots__nav--next { right: -6px; }
@media (min-width: 720px) {
  .supper-shots__nav--prev { left: -20px; }
  .supper-shots__nav--next { right: -20px; }
}

/* ---------------------------------------------------------------------------
   MENUS FROM PAST SUPPERS

   April asked for the old site's habit back: "I liked on the last website how you
   linked the Sunday supper menus from prior." A ledger of rows, date first,
   because the date is what somebody is scanning for. Centred on the same axis as
   the card above it so the lower half of the page holds one column.
   --------------------------------------------------------------------------- */
/* A hairline, not a fill. The archive used to sit on --bg-soft, where the 11.2px
   PDF/PNG label measured 4.17:1 and failed AA; --text-muted is only AA against the
   bone page background. So the band is delimited by a rule instead, which is also
   the device /press and /happenings use for their own archive sections. */
/* The band supplies its own top space via the rule below, so the section must not
   also pay for one: stacked, the two plus the scroller's bottom padding opened
   about 200px of nothing between the last photo and the hairline. */
.section:has(> .supper-archive) { padding-top: 0; }
.supper-archive {
  display: grid;
  gap: clamp(16px, 2.4vw, 40px);
  border-top: 1px solid var(--line);
  padding-top: clamp(30px, 4vw, 52px);
}
.supper-menus__h {
  margin: 0;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  max-width: 12ch;
}
.supper-menus { list-style: none; margin: 0; padding: 0; }
@media (min-width: 780px) {
  /* Label column then the rows, so the band uses the container it sits in rather
     than leaving a 600px void beside a centred list. */
  .supper-archive { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); align-items: start; }
}
.supper-menus li + li { border-top: 1px solid var(--line); }
.supper-menus__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(13px, 1.7vw, 17px) 0;
  text-decoration: none;
  color: inherit;
}
.supper-menus__link:hover .supper-menus__date { color: var(--accent); }
.supper-menus__date { font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.15rem); letter-spacing: 0.04em; text-transform: uppercase; }
.supper-menus__kind { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
  .supper-shots__track { scroll-behavior: auto; }
}