/* WYW — shared base: tokens, fonts, reset, nav, menu overlay, statements,
   queue marquee, footer, nav themes. Every page loads this first, then its
   own page stylesheet (home.css for the landing page). */

@font-face {
  font-family: 'Alte Haas Grotesk';
  src: url('../assets/fonts/AlteHaasGroteskRegular.woff2') format('woff2'),
       url('../assets/fonts/AlteHaasGroteskRegular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Alte Haas Grotesk';
  src: url('../assets/fonts/AlteHaasGroteskBold.woff2') format('woff2'),
       url('../assets/fonts/AlteHaasGroteskBold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

:root {
  --green: #7FA47B;
  --green-deep: #5c7f5b;
  --cream: #F3ECDA;
  --paper: #E8E5DA;
  --ink: #26251F;
  /* marker highlight — design value: #769C72 at 75% (rect in ref/13.svg).
     Semi-transparent so it composites darker on the dark frames and muted on
     paper, exactly like the Figma frames */
  --highlight: rgba(118, 156, 114, 0.75);
  --dark: #383838;

  --font-display: 'Alte Haas Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  font-family: var(--font-display);
  overflow-x: hidden;
}

img { display: block; }

/* ---------- Accessibility utilities ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: -100px;
  left: 16px;
  z-index: 200;
  background: var(--ink);
  color: var(--cream);
  padding: 12px 20px;
  border-radius: 27px;
  text-decoration: none;
  font-weight: 700;
  transition: top 0.2s ease;
}

.skip-link:focus-visible { top: 16px; }

:focus-visible {
  outline: 2.5px solid currentColor;
  outline-offset: 4px;
}

/* ---------- Nav ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 36px;
  pointer-events: none;
}

.nav > * { pointer-events: auto; }

.nav__menu {
  width: 78px;
  height: 54px;
  border: none;
  /* rounded rect, not a full pill — design button component is rx24 @ 64px
     tall (ref/13.svg), scaled to our 54px nav height */
  border-radius: 20px;
  background: var(--ink);
  display: grid;
  place-content: center;
  gap: 5px;
  cursor: pointer;
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    background 0.3s ease;
}

.nav__menu:hover,
.nav__menu:focus-visible { transform: scale(1.08); }

.nav__menu span {
  display: block;
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--cream);
  transition: transform 0.35s cubic-bezier(0.77, 0, 0.18, 1), opacity 0.25s ease;
}

/* Header logo hidden on the landing hero — the logo lives inside the phone
   frame (per design); themed pages turn it back on.
   Absolutely centered so the Venues button widening on hover (badge pop-in)
   can't shove it sideways — flex space-between centering moved with it. */
.nav__logo {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.nav__logo img {
  width: clamp(54px, 5.5vw, 76px);
  height: auto;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav__logo:hover img,
.nav__logo:focus-visible img { transform: scale(1.07); }

/* Venues button — griflan-style rollover:
   fill wipes across, label inverts, hand badge pops in, button widens */

.nav__venues {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  /* fixed height (matches the menu pill) — the badge gif is taller than the
     label but must never grow the button */
  height: 54px;
  padding: 0 28px;
  border-radius: 20px; /* matches .nav__menu — design rx24 @ 64px scaled */
  background: var(--cream);
  color: var(--green);
  text-decoration: none;
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  transition: color 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}

.nav__venues-fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  border-radius: inherit;
  transform: translateX(-101%);
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1);
}

.nav__venues-label { position: relative; z-index: 1; }

.nav__venues-badge {
  position: relative;
  z-index: 1;
  width: 0;
  margin-left: 0;
  opacity: 0;
  transform: scale(0.2) rotate(-25deg);
  transition:
    width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    margin-left 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s ease;
}

/* high-five badge (transparent gif — works on every nav theme's fill).
   The art keeps spark headroom at the top, so the hands sit low in the
   square canvas; the translateY lifts them optically centred in the pill.
   The nudge lives on the IMG because the span animates transform for the
   pop-in — never put both on the same element. */
.nav__venues-badge img { width: 46px; height: auto; transform: translateY(-2px); }

.nav__venues:hover .nav__venues-fill,
.nav__venues:focus-visible .nav__venues-fill { transform: translateX(0); }

.nav__venues:hover,
.nav__venues:focus-visible { color: var(--cream); }

/* the badge reveal is hover-capable devices only: on iOS, content-changing
   hover turns the first tap into "hover" and the pill needs TWO taps to
   navigate (Tom's iPhone, launch day). Keyboard focus keeps the reveal. */
.nav__venues:focus-visible .nav__venues-badge {
  width: 46px;
  margin-left: 8px;
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

@media (hover: hover) {
  .nav__venues:hover .nav__venues-badge {
    width: 46px;
    margin-left: 8px;
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* ---------- Fullscreen menu overlay ---------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 49; /* just under the nav pills so the button stays clickable */
  background: var(--green) url('../assets/bg-green-halftone.jpg') center / cover no-repeat;
  /* ONE column by default: nav links, then the socials beneath them, both
     on the same left edge. The two-column form below is the desktop layout
     (socials bottom-right, aligned with the Venues button) — on a phone it
     stranded Instagram and LinkedIn halfway down the right-hand side,
     level with nothing, because the link column is tall and `align-items:
     end` bottom-aligned the socials against it. Reported from two iPhones
     on 2026-08-09. */
  display: grid;
  grid-template-columns: 1fr;
  /* centred when it fits; `safe` drops to the start when the content is
     taller than the viewport, so the first link can never be pushed up
     under the close button and out of reach - which the venues index did
     at 320x640 (CTO QA, 2026-09-11). Browsers without `safe` keep plain
     center and get the height fallback below. */
  align-content: center;
  align-content: safe center;
  row-gap: 6svh;
  /* bottom padding clears the queue marquee on any aspect ratio */
  padding: 13svh 36px calc(11.5vw + 6svh) 9vw;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
}

body.menu-open .menu-overlay {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.45s ease;
}

body.menu-open { overflow: hidden; }

.menu-overlay__nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6svh;
}

.menu-overlay__link {
  color: var(--cream);
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(38px, 7.2svh, 82px);
  line-height: 1;
  letter-spacing: -0.04em;
  padding: 0.04em 0.14em;
  margin-left: -0.14em;
  /* marker highlight sweeps in on rollover — CREAM block + ink text (the
     "scan" treatment from how-it-works): the brand --highlight green was
     invisible against the overlay's green background */
  background-image: linear-gradient(var(--cream), var(--cream));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size 0.35s cubic-bezier(0.77, 0, 0.18, 1), color 0.35s ease;
  /* staggered rise when the overlay opens */
  opacity: 0;
  transform: translateY(28px);
}

body.menu-open .menu-overlay__link {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    background-size 0.35s cubic-bezier(0.77, 0, 0.18, 1), color 0.35s ease;
}

/* The entrance cascade reads straight down the open menu: the three big
   links, with the venues index landing between "for venues" and "let's
   chat". Delays are stated PER ELEMENT rather than by position in the nav,
   because the index is a <div> among the anchors and any nth-child sum
   would silently re-number the moment the block moves. :nth-of-type on
   .menu-overlay__link counts only the three big anchors; the rows count
   among themselves inside the index. */
body.menu-open .menu-overlay__nav > .menu-overlay__link:nth-of-type(1) { transition-delay: 0.10s, 0.10s, 0s, 0s; }
body.menu-open .menu-overlay__nav > .menu-overlay__link:nth-of-type(2) { transition-delay: 0.16s, 0.16s, 0s, 0s; }
body.menu-open .menu-overlay__nav > .menu-overlay__link:nth-of-type(3) { transition-delay: 0.42s, 0.42s, 0s, 0s; }

/* ---- the venues index ----

   The section index, nested under its parent link (2026-09-11): the ticket
   strip on the venues pages came out, so the menu carries the section - one
   tap to any of its pages from anywhere on the site. It replaced a 20px
   footnote row, which read as a caption to "for venues" rather than as the
   three destinations it is (UX audit finding 5).

   The DOM is flat and in reading order - home, for venues, the three rows,
   let's chat - so phones need no reordering and Tab follows the page. The
   two-column desktop form is placement only, in the 901 block below. */

.menu-overlay__index {
  display: grid;
  gap: 2px;
  /* NESTED under "for venues" at every width (founder, 2026-09-11 evening:
     the side-column version was liked, the nesting was asked for): indented
     off the parent's left edge with a cream hairline as the tie, the rows
     then "let's chat" continue below in the same column. */
  margin: 0.2svh 0 1.2svh 0.12em;
  border-left: 1px solid rgba(243, 236, 218, 0.35);
  padding-left: clamp(16px, 4vw, 22px);
  width: min(100%, 460px);
}

.menu-overlay__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 18px;
  /* title + arrow on one line, the one-liner beneath, at every width */
  min-height: 48px;
  padding: 9px 0;
  color: var(--cream);
  text-decoration: none;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* the row's own rise; the sweep and the arrow are owned by the children, so
   no element is ever driven by two transitions at once */
body.menu-open .menu-overlay__row { opacity: 1; transform: translateY(0); }
body.menu-open .menu-overlay__row:nth-child(1) { transition-delay: 0.24s; }
body.menu-open .menu-overlay__row:nth-child(2) { transition-delay: 0.30s; }
body.menu-open .menu-overlay__row:nth-child(3) { transition-delay: 0.36s; }

/* justify-self keeps the marker block hugging the words - the same reason
   the big links sit in a start-aligned column. Padding and the matching
   negative margin are .menu-overlay__link's, so the two sweeps have the
   same overhang and the titles still sit flush to the column edge. */
.menu-overlay__row-t {
  grid-column: 1;
  justify-self: start;
  font-weight: 700;
  font-size: clamp(26px, 3.6svh, 34px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  padding: 0.04em 0.14em;
  margin-left: -0.14em;
  background-image: linear-gradient(var(--cream), var(--cream));
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 0% 100%;
  transition: background-size 0.35s cubic-bezier(0.77, 0, 0.18, 1), color 0.35s ease;
}

.menu-overlay__row-l {
  grid-column: 1;
  margin-top: 3px;
  font-size: clamp(15px, 1.1vw, 16px);
  line-height: 1.35;
  color: rgba(243, 236, 218, 0.72);
}

.menu-overlay__row-go {
  grid-column: 2;
  grid-row: 1 / span 2;
  display: flex;
  flex: none;
  color: var(--cream);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-overlay__row-go svg { width: 22px; height: 22px; }

/* the same cream marker the big links take, on the TITLE only - over the
   one-liner it would paint a block across the row. Hover is gated to real
   pointers: iOS parks :hover on the last-tapped element, and the overlay
   moves focus to "home" as it opens, which is what lit rows up and left
   them lit (two iPhones, 2026-08-09). */
.menu-overlay__row:focus-visible .menu-overlay__row-t {
  background-size: 100% 100%;
  color: var(--ink);
}

.menu-overlay__row:focus-visible .menu-overlay__row-go { transform: translateX(8px); }

@media (hover: hover) {
  .menu-overlay__row:hover .menu-overlay__row-t {
    background-size: 100% 100%;
    color: var(--ink);
  }

  .menu-overlay__row:hover .menu-overlay__row-go { transform: translateX(8px); }
}

/* The marker sweep is a POINTER rollover. iOS keeps :hover on the
   last-tapped element, and the overlay also moves focus to "home" when it
   opens, so menu rows lit up and stayed lit with no input — reported from
   two iPhones on 2026-08-09. :focus-visible is untouched: it is the
   keyboard's affordance and only fires on real keyboard focus. */
.menu-overlay__link:focus-visible {
  background-size: 100% 100%;
  color: var(--ink);
}

@media (hover: hover) {
  .menu-overlay__link:hover {
    background-size: 100% 100%;
    color: var(--ink);
  }
}

/* beneath the links and on their left edge; the desktop block below turns
   this back into the bottom-right stack */
.menu-overlay__foot {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 26px;
}

/* ---- desktop: the original two-column takeover ----
   Right padding matches the nav's 36px so the socials right-align with the
   Venues button, and align-items:end bottom-aligns them with the "contact"
   line (design feedback). */
@media (min-width: 901px) {
  .menu-overlay {
    grid-template-columns: 1fr auto;
    align-items: end;
    row-gap: 0;
    /* the nav column and the socials had no gutter between them: with only
       the big links in the nav, nothing ever reached the column edge. The
       venues index does - at 901-1024 its arrows landed flush against
       "Instagram" - so the two columns now hold each other off. */
    column-gap: clamp(28px, 3vw, 64px);
  }

  /* ---- desktop: the same single column, the index a little deeper ----
     (The two-column form - index beside "for venues" - lived here for an
     hour on 2026-09-11; the founder asked for it nested instead. No heading
     over the index at any width: one there would be a kicker.) */
  .menu-overlay__index {
    margin-left: 0.16em;
    padding-left: clamp(24px, 2.4vw, 40px);
  }

  .menu-overlay__foot {
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
  }
}

/* socials carry the same brand glyphs as the footer row. They used to be
   plain text with a "↗" after the label, which iOS renders from the EMOJI
   font — a boxed arrow that looked nothing like the desktop line (Tom
   2026-08-07). The glyph is drawn, so every platform gets the same mark. */
.menu-overlay__foot a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--cream);
  text-decoration: none;
  font-size: clamp(15px, 1.15vw, 22px);
}

.menu-overlay__foot a svg {
  width: 1.15em;
  height: auto;
  flex: none;
  /* the footer's icon pop, same spring */
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* the underline slides in under the LABEL only — on the link it would run
   beneath the glyph too */
.menu-overlay__foot a span {
  padding-bottom: 3px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1.5px;
  transition: background-size 0.3s ease;
}

.menu-overlay__foot a:focus-visible span { background-size: 100% 1.5px; }
.menu-overlay__foot a:focus-visible svg { transform: scale(1.18); }

@media (hover: hover) {
  .menu-overlay__foot a:hover span { background-size: 100% 1.5px; }
  .menu-overlay__foot a:hover svg { transform: scale(1.18); }
}

/* cream queue marching along the bottom of the overlay (footer treatment) */
.menu-overlay__queue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 11.5vw;
  overflow: hidden;
  color: var(--cream);
}

.menu-overlay__queue .banner__track {
  align-items: flex-start;
  gap: 1vw;
  padding: 0;
  animation-duration: 90s;
}

.menu-overlay__queue .banner__figure { height: 13vw; }

/* hamburger → X while the overlay is open */
body.menu-open .nav__menu span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.menu-open .nav__menu span:nth-child(2) { opacity: 0; }
body.menu-open .nav__menu span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* the overlay is hero-green — force the hero nav treatment over any theme */
body.menu-open .nav__menu { background: var(--ink); }
body.menu-open .nav__menu span { background: var(--cream); }
body.menu-open .nav__venues { background: var(--cream); color: var(--green); }
body.menu-open .nav__venues:hover,
body.menu-open .nav__venues:focus-visible { color: var(--cream); }
body.menu-open .nav__logo { display: block; }
body.menu-open .nav__logo .nav__logo-ink { display: none; }
body.menu-open .nav__logo .nav__logo-cream { display: block; }

/* ---------- Reduced motion ----------
   The overlay's entrance is a rise + a fade; under reduce, everything is
   simply already there when the menu opens, and the marker sweep and the
   arrow slide land instantly on hover/focus instead of travelling. The
   overlay's own opacity fade is what makes it appear at all, so it stays.
   (The big links had no branch before this round - added with the index
   rather than left half-covered.) */

@media (prefers-reduced-motion: reduce) {
  .menu-overlay__link,
  .menu-overlay__row {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body.menu-open .menu-overlay__link,
  body.menu-open .menu-overlay__row {
    transition: none;
    transition-delay: 0s;
  }

  .menu-overlay__row-t,
  .menu-overlay__row-go,
  .menu-overlay__foot a span,
  .menu-overlay__foot a svg { transition: none; }
}

/* ---------- Tap flash (nav + menu on touch) ----------
   Phones paint their own highlight box over whatever was last tapped —
   iOS and Chrome Android both default to a translucent BLACK. Tom saw it
   as a dark box around "home" when the menu opens, which is also the link
   shared.js moves focus to. Kill the highlight on the nav controls and the
   menu links, and neutralise the plain :focus a browser might ring on that
   programmatic focus; keyboard focus keeps its ring via :focus-visible. */

.nav__menu,
.nav__venues,
.nav__logo,
.menu-overlay a { -webkit-tap-highlight-color: transparent; }

/* The overlay is a full-screen scrollable list of very large type, so a
   drag that starts on a word is ambiguous: iOS resolved it as a text
   selection and threw up the copy/look-up callout instead of scrolling
   (reported 2026-08-09). These are navigation targets, not prose — there is
   nothing here anyone wants to select. `touch-action: manipulation` also
   drops the 300ms double-tap-to-zoom wait on the links. */
.menu-overlay {
  -webkit-user-select: none;
  user-select: none;
}

.menu-overlay a { touch-action: manipulation; }

.menu-overlay a:focus { outline: none; }

/* a pointer open focuses the overlay itself (shared.js, tabindex -1) so
   no link is painted until the keyboard is used; the container never
   shows a ring of its own */
.menu-overlay:focus,
.menu-overlay:focus-visible { outline: none; }

/* restates the global :focus-visible ring — it has to out-order the line
   above, which would otherwise swallow it */
.menu-overlay a:focus-visible {
  outline: 2.5px solid currentColor;
  outline-offset: 4px;
}

/* ---------- Cookie consent banner (built by js/consent.js) ---------- */

.consent {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 90;
  max-width: 400px;
  background: var(--ink);
  color: var(--cream);
  border-radius: 22px;
  padding: 22px 24px;
  box-shadow: 0 18px 50px rgba(38, 37, 31, 0.35);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.consent.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.consent p {
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.consent a { color: inherit; }

.consent__actions {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}

.consent__btn {
  height: 42px;
  padding: 0 20px;
  border-radius: 21px;
  border: none;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.consent__btn:hover,
.consent__btn:focus-visible { transform: scale(1.06); }

/* ink text on green — the brand's marker-highlight pairing, and it clears AA
   (cream-on-green was only 2.4:1) */
.consent__btn--yes { background: var(--green); color: var(--ink); }

.consent__btn--no {
  background: transparent;
  color: var(--cream);
  border: 1.5px solid rgba(243, 236, 218, 0.5);
}

@media (max-width: 640px) {
  .consent { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* ---------- Email links — green rollover, slide-in underline (site-wide) ---------- */

a[href^="mailto:"]:not(.pill) {
  color: inherit;
  text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1.5px;
  transition: background-size 0.3s ease, color 0.25s ease;
}

a[href^="mailto:"]:not(.pill):hover,
a[href^="mailto:"]:not(.pill):focus-visible {
  color: var(--green-deep);
  background-size: 100% 1.5px;
}

/* ---------- Marker highlight ---------- */

/* green marker highlight (gradient so the sweep-in can animate background-size).
   tight vertical padding so the box never bleeds into the line above's
   descenders on multi-line headings. */
.hl {
  background-image: linear-gradient(var(--highlight), var(--highlight));
  background-repeat: no-repeat;
  /* hug the text (design feedback): the block covers ~cap-to-descender,
     biased low so it clears cap tops and sits under the baseline, instead
     of filling the whole line box. Keep the JS sweep-in height in sync
     (main.js animates backgroundSize '0% 0.85em' -> '100% 0.85em'). */
  background-size: 100% 0.85em;
  background-position: 0 68%;
  padding: 0 0.12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ---------- Statements ---------- */

.statement {
  min-height: 74svh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 8svh 6vw;
}

.statement__text {
  font-weight: 700;
  font-size: clamp(34px, 5vw, 76px);
  line-height: 1.12;
  letter-spacing: -0.04em;
}

.statement__sub {
  margin-top: 9svh;
  font-size: clamp(18px, 1.8vw, 30px);
  letter-spacing: -0.02em;
}

/* ---------- Queue figure marquee (s3 ribbons, footer, menu overlay) ---------- */

.banner__track {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 3.2svh;
  width: max-content;
  padding: 0 1svh;
  animation: queue-march 46s linear infinite;
}

@keyframes queue-march {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.banner__figure {
  height: 22.8svh; /* scales with the 31.2svh ribbon (same ratio as 19/26) */
  width: auto;
  flex: none;
}

/* Alternating figures sit back a little so the queue reads with some depth.
   0.55 took them under the visibility floor on the green ribbons (1.29:1),
   which is half of why those bands looked unpopulated — see the .banner--a
   note in home.css. 0.78 keeps the depth and keeps every figure readable. */
.banner__figure:nth-child(even) { opacity: 0.78; }

@media (prefers-reduced-motion: reduce) {
  .banner__track { animation: none; }
}

/* ---------- Footer (design frame 18: 1920x1727, values in vw = px/19.2) ---------- */

.footer {
  position: relative;
  /* single non-tiled sheet (BG 2 export) — the old 1300px tile showed seams */
  background: var(--paper) url('../assets/bg-paper-3200.jpg') center / cover no-repeat;
  color: var(--ink);
  /* 100svh so the s3 dark stage can ride fully off-screen at max scroll,
     PLUS the reinstated gallery's height — the extra term keeps
     .footer__top's flexed height (and so the text position) identical to
     the gallery-less layout Tom signed off (2026-07-29) */
  min-height: calc(100svh + 33.2vw);
  display: flex;
  flex-direction: column;
}

.footer__top { flex: 1; }

/* centred like the statement sections, with the same kind of breathing room
   (Tom 2026-07-26 — replaces the earlier left-aligned row + photo strip) */
.footer__top {
  min-height: 64svh;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 5svh;
  padding: 12svh 7vw 10svh;
}

.footer__mission {
  font-weight: 700;
  /* matches .statement__text — this section reads as the closing statement */
  font-size: clamp(34px, 5vw, 76px);
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.footer__follow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4vw;
}

.footer__follow-heading {
  font-size: clamp(20px, 1.9vw, 40px);
  letter-spacing: -0.02em;
}

/* IG CTA — the site's griflan button language, scaled up as the closing
   call to action: green fill wipes across on hover, springy lift, the
   Instagram glyph does a little pop-and-tilt (venues-badge energy) */
.footer__ig-pill {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 0.9vw, 16px);
  height: clamp(56px, 4.2vw, 80px);
  padding: 0 clamp(26px, 2.2vw, 42px);
  border-radius: clamp(20px, 1.55vw, 30px); /* rounded rect per the button component */
  background: var(--dark);
  color: var(--cream);
  text-decoration: none;
  font-size: clamp(17px, 1.4vw, 28px);
  font-weight: 700;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer__ig-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--green);
  border-radius: inherit;
  transform: translateX(-101%);
  transition: transform 0.45s cubic-bezier(0.77, 0, 0.18, 1);
}

.footer__ig-pill svg,
.footer__ig-pill span { position: relative; z-index: 1; }

.footer__ig-pill svg {
  width: clamp(22px, 1.75vw, 32px);
  height: auto;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer__ig-pill:hover,
.footer__ig-pill:focus-visible { transform: translateY(-4px) scale(1.04); }

.footer__ig-pill:hover::before,
.footer__ig-pill:focus-visible::before { transform: translateX(0); }

.footer__ig-pill:hover svg,
.footer__ig-pill:focus-visible svg { transform: rotate(-10deg) scale(1.18); }

/* IG gallery — the original design's three-photo strip, reinstated
   2026-07-29 (Tom). One deliberate change from the original: margin-bottom
   is 0, the images sit flush on the green band (there used to be a 4.8vw
   paper gap). display: block on the imgs kills the baseline whitespace
   that would otherwise open a sliver above the band. */
.footer__gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  height: 33.2vw; /* 638px @1920, as the original */
  margin-bottom: 0;
}

.footer__gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The band is sized by its CONTENT plus clearance for the queue marquee
   pinned to its bottom edge — the same shape `.footer--compact` and the
   ≤640 block already use.

   It used to carry `min-height: 26.3vw`, straight off the 1920 design frame.
   That number scales with the viewport but the logo, links and copyright
   line inside it do NOT (they are clamp()ed type), so the wider the window
   the more dead green opened up under the copyright: ~100px of nothing at
   1710 (a 15" MacBook Air full-screen, which is what "~1280" was reported
   from). Reported 2026-08-09 as "a huge empty green block before the page
   ends". 13.5vw is the 11.5vw marquee plus 2vw of air above the figures. */
.footer__bar {
  position: relative;
  min-height: 0;
  padding-bottom: 13.5vw;
  background: var(--green);
  color: var(--cream);
  overflow: hidden;
}

.footer__row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 3vw;
  padding: 4vw 2.7vw 0;
}

.footer__logo { width: clamp(80px, 7.8vw, 160px); height: auto; }

.footer__links {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 3.2vw;
}

.footer__links a {
  color: var(--cream);
  text-decoration: none;
  font-size: clamp(13px, 1.05vw, 22px);
  letter-spacing: 0.01em;
  padding-bottom: 3px;
  /* underline slides in from the left on rollover */
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1.5px;
  transition: background-size 0.3s ease;
}

.footer__links a:hover,
.footer__links a:focus-visible { background-size: 100% 1.5px; }

.footer__social { display: flex; gap: 1.3vw; }

.footer__social a {
  display: block;
  color: var(--cream);
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer__social a:hover,
.footer__social a:focus-visible { transform: scale(1.18); }

.footer__social svg { width: clamp(20px, 1.5vw, 30px); height: auto; }

/* cream queue marching along the bottom of the band, legs cut by the edge */
.footer__queue {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 11.5vw;
  overflow: hidden;
  color: var(--cream);
}

.footer__queue .banner__track {
  align-items: flex-start;
  gap: 1vw;
  padding: 0;
  animation-duration: 90s;
}

/* ~19 figures across, feet just clipped by the page edge (frame 18 —
   the dark strip below them in the frame is Figma canvas, not design) */
.footer__queue .banner__figure { height: 13vw; }

/* legal line under the footer row, on every page. Full cream — the whole
   green band is cream-on-green by brand. Values match the copy in
   page.css, which is what the subpages' compact footer has been using. */
.footer__legal {
  position: relative;
  z-index: 1;
  padding: 1.8vw 2.7vw 0;
  font-size: clamp(12px, 0.9vw, 15px);
  color: var(--cream);
}

/* ---------- Paper-theme nav ---------- */

.nav__logo-ink {
  display: none;
  width: clamp(48px, 5vw, 68px);
  height: auto;
}

/* The themed logo sits in a BLACK app-icon tile (Tom's mock; +30% on
   2026-08-05 — it deliberately sticks out below the 54px pill row). The
   tile mirrors the hero's .app-icon exactly (ink squircle, cream glyph at
   62% of box width, 26%-ish corners) so the phone->header handoff clone
   lands on it pixel-identical — resize glyph/radius IN STEP with the box
   or the dock will pop. Same tile in both themes; the ink menu overlay
   drops the tile and shows the bare cream logo at full size. */
.theme-paper .nav__logo,
.theme-dark .nav__logo {
  display: grid;
  place-items: center;
  width: 92px;
  height: 84px;
  border-radius: 24px;
  background: var(--ink);
}

.theme-paper .nav__logo .nav__logo-ink,
.theme-dark .nav__logo .nav__logo-ink { display: none; }
.theme-paper .nav__logo .nav__logo-cream,
.theme-dark .nav__logo .nav__logo-cream {
  display: block;
  /* out-specifies the generic .nav__logo img width clamp; 62% of the box */
  width: 57px;
  height: auto;
}

body.menu-open .nav__logo { background: none; }
body.menu-open .nav__logo .nav__logo-cream { width: clamp(54px, 5.5vw, 76px); }

.theme-paper .nav__venues { background: var(--green); color: var(--cream); }
.theme-paper .nav__venues:hover,
.theme-paper .nav__venues:focus-visible { color: var(--cream); }

/* ---------- Dark-theme nav (section 4) — cream pills, green accents ---------- */

.theme-dark .nav__menu { background: var(--cream); }
.theme-dark .nav__menu span { background: var(--green); }
.theme-dark .nav__venues { background: var(--cream); color: var(--ink); } /* green-on-cream was 2.38:1 - read as a blank pill (audit 2026-09-11) */
.theme-dark .nav__venues:hover,
.theme-dark .nav__venues:focus-visible { color: var(--cream); }

/* menu pill rollover — goes green to echo the venues pill (Tom 2026-08-05).
   After the theme blocks so the hover wins in both themes; the dark theme's
   green bars flip to cream so they don't vanish on the green fill. (The
   open-menu X stays ink: body.menu-open out-specifies these.) */
.nav__menu:hover,
.nav__menu:focus-visible { background: var(--green); }
.theme-dark .nav__menu:hover span,
.theme-dark .nav__menu:focus-visible span { background: var(--cream); }

/* ...except on the hero, where the fill was the SAME hex as the backdrop:
   the pill dissolved into the green and only the bars read, nothing like
   the green chip the rollover shows on for-venues (Tom 2026-08-07, "match
   the burger to venues"). The overlay already dodges this by keeping the
   burger ink on its green sheet. No theme class = the hero, and there the
   fill goes a shade deeper; :not(.menu-open) leaves the open X ink. */
body:not(.theme-paper):not(.theme-dark):not(.menu-open) .nav__menu:hover,
body:not(.theme-paper):not(.theme-dark):not(.menu-open) .nav__menu:focus-visible {
  background: var(--green-deep);
}

/* ---------- Mobile ---------- */

@media (max-width: 640px) {
  /* the controls come down a size on phones — burger + Venues were eating the
     row (Tom 2026-08-07). Both keep a 40px hit height, and the pair keeps the
     shared radius the desktop row has (20/20 there, 14/14 here). */
  .nav { padding: 16px 16px; }
  .nav__menu { width: 54px; height: 40px; border-radius: 14px; }
  .nav__venues { min-width: 0; height: 40px; padding: 0 16px; font-size: 15px; border-radius: 14px; }
  /* NO LOGO TILE ON PHONES (Tom 2026-08-07): burger + tile + Venues read as
     too busy a row, and the takeover menu already carries the logo. On the
     narrowest phones the tile was overlapping the wider "book a demo" pill
     outright (measured -33px at 320). Hidden at REST in BOTH themes — the
     un-themed hero already hides it — while body.menu-open out-specifies
     this (0,2,1 vs 0,2,0), so opening the menu still shows the bare cream
     logo, centred in the row by the base rule.
     Supersedes the tile's mobile geometry and its top-pin, both now
     unreachable; desktop was never repositioned and is untouched. */
  .theme-paper .nav__logo,
  .theme-dark .nav__logo { display: none; }
  /* ...and with no tile at this width, the open menu's logo is just the mark:
     collapse the tile BOX too. body.menu-open re-displays the anchor as
     `block`, which top-anchors the mark inside the leftover 92x84 tile box
     and hung it 6px off the top of the viewport (the old mobile box was
     shallower, so it merely sat high). Collapsed, the mark centres in the row
     off the base rule — pixel-identical to the homepage's menu logo, which is
     the one this is meant to match. Desktop keeps the tile, so it keeps its
     box. */
  body.menu-open .nav__logo { width: auto; height: auto; }
  .menu-overlay { padding: 12svh 16px calc(11.5vw + 14svh) 8vw; }
  /* the belt for the `safe center` above: a short phone viewport can't fit
     the menu plus the index, so it top-aligns and scrolls */
  @media (max-height: 720px) {
    .menu-overlay { align-content: start; }
  }
  .menu-overlay__link { font-size: clamp(32px, 5.4svh, 60px); }
  /* the socials were 20px-tall rows in a full-screen touch menu. Vertical
     padding only — horizontal padding would pull the two labels off the nav
     column's left edge — and the row gap keeps them apart. The underline
     lives on the inner span, so padding the anchor leaves it exactly where
     it was. (The old `gap: 0` paid back the space a VERTICAL stack lost to
     that padding; as a row it needs its horizontal gap, or "Instagram" and
     the LinkedIn glyph collide.) */
  .menu-overlay__foot { gap: 28px; }
  .menu-overlay__foot a { padding: 12px 0; }

  /* hamburger → X, smaller pill geometry */
  body.menu-open .nav__menu span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.menu-open .nav__menu span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  /* ---- footer: same centred treatment, tightened for phone widths ---- */
  .footer { min-height: calc(100svh + 62vw); } /* keeps the text position, see the desktop note */
  .footer__gallery { height: 62vw; }
  .footer__top { min-height: 56svh; gap: 4svh; padding: 12svh 7vw 9svh; }
  .footer__mission { font-size: clamp(30px, 9vw, 54px); }
  .footer__follow { gap: 3vw; }
  .footer__follow-heading { font-size: 20px; }
  .footer__ig-pill { height: 46px; padding: 0 18px; font-size: 16px; border-radius: 20px; gap: 8px; }
  .footer__ig-pill svg { width: 20px; }

  .footer__row {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6vw;
    padding: 13vw 7vw 0;
  }
  .footer__logo { width: 96px; }
  .footer__links {
    flex: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3.5vw 6vw;
  }
  /* On a phone this row IS the site's secondary navigation, and the links
     were 19px tall — a thumb can't hit that. The padding grows the hit box
     to 45px; the underline is re-anchored off the TEXT (background-position
     resolves against the padding box, so `left bottom` would drop it to the
     new box edge), and the flex gaps shed the space the padding just added
     so the visible spacing barely moves. Row gap goes to 0 because the
     padded boxes must not overlap — overlapping targets mis-fire. */
  .footer__links { gap: 0 2.5vw; }
  .footer__links a {
    font-size: 15px;
    padding: 12px 8px 14px;
    background-position: left calc(100% - 12px);
  }
  /* same trick on the socials: 24px glyphs in a 44px box, gap pays it back */
  .footer__social { gap: 4px; }
  .footer__social a { padding: 10px; }
  .footer__social svg { width: 24px; display: block; }

  /* the queue marquee is pinned to the bottom of the bar — grow the bar to
     content and pad it so the row clears the marching figures */
  .footer__bar { min-height: 0; padding-bottom: 26vw; }
  .footer__queue { height: 17vw; }
  .footer__queue .banner__figure { height: 19vw; }
  /* only the centring is a phone change: the padding/size this rule used to
     restate never reached the subpages (page.css out-orders it), so they
     come from the base rule on every page now */
  .footer__legal { text-align: center; }
}

/* Short phones (iPhone SE and friends) hit the menu link type's 32px clamp
   FLOOR, which leaves the site's primary navigation as 34px rows. Pad them to
   a thumb-sized 44px; the rows sit 1.6svh apart so nothing collides. The
   marker block grows with the padding, but it only ever paints on
   hover/focus-visible — which a touch device does not fire — so this is hit
   area only. */
@media (max-width: 640px) and (max-height: 640px) {
  .menu-overlay__link { padding-top: 5px; padding-bottom: 5px; }
}