/* ==========================================================================
   Pan D Endz : pages.css
   The inner page hero, and the sections that sections.js builds.

   Scope: every class here starts with pg-, and every one of them is created by
   src/shared/js/sections.js, so nothing in this file can reach into a concept's
   film styles or into afterfilm.css.
   Names: BEM, .pg-<block>__<element>, state classes .is-*.
   Values: tokens only. No raw colour, size, or easing is written by hand.
   Order: mobile first. Wider screens are added in min-width blocks.
   Motion: transform, opacity, filter and clip-path only, and all of it is
   switched off in the reduced motion block at the bottom of this file.

   A page links this sheet after afterfilm.css, because the grocery list reuses
   the menu board's row styles from there and refines them here.
   ========================================================================== */

/* ============================================================ 1. THE PAGE TOP
   Every inner page opens the same way: dark world, seven tenths of the screen,
   the words hanging off the left gutter at the bottom. The h1 here is the one
   h1 on the page.

   Layers inside it, back to front:
     1 the smoke blob        2 the scrim        3 the embers        4 the words

   The scrim goes under the embers so the sparks read as sparks in front of the
   picture rather than as dots under a sheet of glass, which is the order the
   films use too. */

.pg-hero {
  position: relative;
  display: flex;
  align-items: flex-end;

  min-height: 70vh;
  min-height: 70svh;
  padding: var(--s-7) var(--gutter) var(--s-6);

  overflow: hidden;
  background: var(--char);
  color: var(--cream);

  /* Its own stacking context, so the layer numbers below cannot collide with
     the nav or the thermometer. */
  isolation: isolate;
}

/* --- the atmosphere ------------------------------------------------------- */

.pg-hero__smoke {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* One soft blob, drifting up and across forever. There is no film on these
   pages to scrub it against, so it runs on a plain CSS animation: only
   transform and opacity move, so it costs the compositor and nothing else. */
.pg-hero__blob {
  position: absolute;
  top: 78%;
  left: 46%;

  width: 90vmax;
  height: 90vmax;
  margin: -45vmax 0 0 -45vmax;

  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.4;

  /* Festival Cream muted, the same smoke colour the films use. */
  background: radial-gradient(
    circle at 50% 50%,
    color-mix(in srgb, var(--cream-muted) 45%, transparent) 0%,
    transparent 68%
  );

  will-change: transform, opacity;
  animation: pg-drift 46s var(--ease-smoke) infinite alternate;
}

@keyframes pg-drift {
  from {
    transform: translate3d(-7%, 8%, 0) scale(0.9);
    opacity: 0.26;
  }
  to {
    transform: translate3d(9%, -16%, 0) scale(1.15);
    opacity: 0.5;
  }
}

/* base.css draws .scrim-b. It is lifted above the smoke here so the words keep
   their contrast ratio whatever the smoke happens to be doing. */
.pg-hero__scrim {
  z-index: 2;
  height: 78%;
}

.pg-hero__embers {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* --- the words ------------------------------------------------------------ */

.pg-hero__inner {
  position: relative;
  z-index: 4;
  width: 100%;
}

.pg-hero__kicker {
  margin: 0 0 var(--s-2);
  color: var(--gold);              /* 12.4:1 on char */
}

.pg-hero__title {
  margin: 0;
}

.pg-hero__intro {
  max-width: 52ch;
  margin: var(--s-3) 0 0;
  color: var(--cream-muted);       /* 10.1:1 on char */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.pg-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* =================================================================== 2. LUNCH
   Come at lunchtime. Words on one side, a circle of the sides picture on the
   other, and the motto stamped across the copy at a slight angle. */

.pg-lunch {
  display: grid;
  gap: var(--s-5);
  padding: var(--s-7) var(--gutter);
  background: var(--paper);
  color: var(--ink);
  /* --paper is mixed from --heat, so this warms with the rest of the page. */
  transition: background-color var(--t-slow) var(--ease-smoke);
}

.pg-lunch__copy > .kicker {
  margin: 0 0 var(--s-2);
  color: var(--green);             /* 5.9:1 cold, 5.1:1 hot */
}

.pg-lunch__title {
  margin: 0 0 var(--s-3);
}

.pg-lunch__body {
  max-width: var(--measure);
  margin: 0 0 var(--s-3);
  color: var(--ink-muted);         /* 7.5:1 cold, 6.5:1 hot */
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* The motto, set large in Bungee and knocked three degrees off true, the way a
   rubber stamp lands. Deep bonnet on paper is 5.3:1 cold and 6.4:1 hot, and at
   this size it is large text, so it clears AA with room to spare. */
.pg-stamp {
  max-width: none;
  margin: var(--s-4) 0;

  color: var(--bonnet-deep);
  font-family: var(--font-sign);
  font-size: var(--fs-d3);
  line-height: 1.15;
  letter-spacing: var(--track-label);
  text-transform: uppercase;

  transform: rotate(-3deg);
  transform-origin: left center;
}

.pg-lunch__cta {
  margin-top: var(--s-2);
}

.pg-lunch__figure {
  margin: 0;
}

.pg-lunch__img {
  width: min(100%, 26rem);
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
  background: var(--coal);
}

/* ============================================================ 3. THE SHELF
   Everything in the grocery, grouped by category. The rows are the menu
   board's rows (.af-menu__* from afterfilm.css), so there is one definition of
   a painted board row on the site and this only sets the spacing and the
   sold-out treatment. */

.pg-list {
  padding: var(--s-6) var(--gutter) var(--s-7);
  background: var(--paper);
  color: var(--ink);
  transition: background-color var(--t-slow) var(--ease-smoke);
}

.pg-list__title {
  margin: 0 0 var(--s-5);
}

.pg-list__group + .pg-list__group {
  margin-top: var(--s-6);
}

.pg-list__rows {
  gap: var(--s-3);
}

/* Sold out. Same ruling as the hanging price tags: no opacity on text. The
   struck price turns ink-muted, which is 7.5:1 on cold paper and 6.5:1 on hot,
   and the line under it says so in words, so colour is never the only signal. */
.pg-list__row.is-out .af-menu__price {
  color: var(--ink-muted);
  text-decoration: line-through;
}

.pg-list__out {
  margin: var(--s-1) 0 0;
  color: var(--bonnet-deep);
}

/* ================================================================ 4. GALLERY
   A contact sheet. Twelve columns, and a repeating rhythm of spans so the
   pictures fall into unequal pairs, one full-width frame, and a row of three.
   Each figure wipes open as it arrives. */

.pg-gallery {
  padding: var(--s-6) var(--gutter) var(--s-7);
  background: var(--char);
  color: var(--cream);
}

.pg-gallery__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-3);
}

.pg-shot {
  /* On a phone every picture is full width. The rhythm starts at 700px. */
  grid-column: span 12;
  margin: 0;

  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--t-slow) var(--ease-smoke);
}

.pg-shot.is-in {
  clip-path: inset(0);
}

/* The button is only a way to open the picture: it has no look of its own. */
.pg-shot__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: zoom-in;
}

.pg-shot__open:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.pg-shot__img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--coal);
  transition: filter var(--t-med) var(--ease-smoke);
}

.pg-shot__open:hover .pg-shot__img,
.pg-shot__open:focus-visible .pg-shot__img {
  filter: brightness(1.12);
}

.pg-shot__cap {
  margin-top: var(--s-1);
  color: var(--cream-muted);       /* 10.1:1 on char */
}

/* --- the lightbox --------------------------------------------------------- */

/* A real <dialog>, opened with showModal(), so the browser handles the top
   layer, the focus trap, the inert page behind it and the Escape key. The
   buttons are positioned against the dialog, which the user agent stylesheet
   already positions for us: setting position here would break its centring. */
.pg-lb {
  width: min(96vw, 1400px);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  overflow: visible;
}

.pg-lb::backdrop {
  background: color-mix(in srgb, var(--char) 92%, transparent);
}

.pg-lb__frame {
  display: block;
}

.pg-lb__img {
  width: 100%;
  height: auto;
  max-height: 80vh;
  /* contain, not cover: in the lightbox the whole picture is the point. */
  object-fit: contain;
  background: var(--coal);
  border-radius: var(--r-tag);
}

.pg-lb__cap {
  margin: var(--s-2) 0 0;
  color: var(--cream);             /* 17.5:1 on char */
  text-align: center;
}

.pg-lb__close,
.pg-lb__nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;
  padding: 0;

  border: 1px solid var(--cream-muted);   /* 10.1:1, a real control boundary */
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--char) 82%, transparent);
  color: var(--cream);
  cursor: pointer;
}

.pg-lb__close:focus-visible,
.pg-lb__nav:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.pg-lb__close {
  top: var(--s-2);
  right: var(--s-2);
}

.pg-lb__nav {
  top: 40%;
}

.pg-lb__nav--prev {
  left: var(--s-2);
}

.pg-lb__nav--next {
  right: var(--s-2);
}

/* ================================================================== 5. ABOUT
   Text, and nothing but text. No cards, no icons, no rounded boxes. */

.pg-about {
  padding: var(--s-6) var(--gutter) var(--s-7);
  background: var(--paper);
  color: var(--ink);
  transition: background-color var(--t-slow) var(--ease-smoke);
}

.pg-about__sub {
  max-width: 36ch;
  margin: 0 0 var(--s-6);
  color: var(--green);
  font-style: italic;
  font-variation-settings: var(--fraunces-wonk);
}

.pg-about__story h2,
.pg-about__closing h2 {
  margin: 0 0 var(--s-4);
}

.pg-about__p {
  max-width: var(--measure);
  margin: 0 0 var(--s-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* The pull quote. A green rule down the left edge and nothing else: no box, no
   quotation marks, no tint. */
.pg-about__why {
  max-width: var(--measure);
  margin: var(--s-6) 0;
  padding-left: var(--s-3);
  border-left: 3px solid var(--green);
}

.pg-about__whytitle {
  margin: 0 0 var(--s-2);
  color: var(--green);
}

.pg-about__whybody {
  max-width: none;
  margin: 0;
  font-style: italic;
  font-variation-settings: var(--fraunces-wonk);
}

/* Mission, team, heritage: three plain columns under hairlines. */
.pg-about__cols {
  display: grid;
  gap: var(--s-5);
  margin: var(--s-6) 0;
}

.pg-about__col {
  padding-top: var(--s-2);
  border-top: 1px solid var(--rule);
}

.pg-about__col > .kicker {
  margin: 0 0 var(--s-2);
  color: var(--green);
}

.pg-about__colbody {
  margin: 0;
  color: var(--ink-muted);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

.pg-about__closing {
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
}

/* ============================================================= 6. DISH STRIP
   The photographs that belong to the menu board, in a strip you push sideways.
   The board itself stays a list of words. */

.pg-strip {
  padding: var(--s-6) 0 var(--s-7);
  background: var(--char);
  color: var(--cream);
}

.pg-strip__title {
  margin: 0 var(--gutter) var(--s-4);
}

.pg-strip__rail {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-1) var(--gutter) var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: var(--gutter);
  overscroll-behavior-x: contain;
}

.pg-strip__rail:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
}

.pg-dish {
  flex: 0 0 min(22rem, 76vw);
  margin: 0;
  scroll-snap-align: start;
}

.pg-dish__img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-tag);
  background: var(--coal);
}

.pg-dish__cap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-1) var(--s-2);
  margin-top: var(--s-2);
}

.pg-dish__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: var(--fraunces-soft);
  font-size: var(--fs-d3);
  line-height: 1.1;
  letter-spacing: var(--track-display);
}

.pg-dish__price {
  color: var(--gold);              /* 12.4:1 on char */
  font-family: var(--font-sign);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  white-space: nowrap;
}

/* ======================================================= WIDER SCREENS ONLY */

@media (min-width: 700px) {
  /* The contact sheet rhythm. Four plain classes rather than one custom
     property, so a span can never fail to substitute and leave a figure one
     column wide. sections.js picks them in the order 7, 5, 5, 7, 12, 4, 4, 4
     and then starts again. */
  .pg-shot--s4 { grid-column: span 4; }
  .pg-shot--s5 { grid-column: span 5; }
  .pg-shot--s7 { grid-column: span 7; }
  .pg-shot--s12 { grid-column: span 12; }

  .pg-gallery__grid {
    gap: var(--s-4);
  }
}

@media (min-width: 800px) {
  .pg-about__cols {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .pg-lunch {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--s-7);
    align-items: center;
  }

  /* The shelf runs in two columns, the same as the menu board. */
  .pg-list__rows {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-7);
  }
}

/* ========================================================== REDUCED MOTION
   Nothing moves. Everything that motion would have revealed is simply there. */

@media (prefers-reduced-motion: reduce) {
  .pg-hero__blob {
    animation: none;
    transform: translate3d(0, -4%, 0);
    will-change: auto;
  }

  .pg-shot {
    clip-path: none;
    transition: none;
  }

  .pg-shot__img,
  .pg-lunch,
  .pg-list,
  .pg-about {
    transition: none;
  }

  .pg-shot__open:hover .pg-shot__img,
  .pg-shot__open:focus-visible .pg-shot__img {
    filter: none;
  }
}