/* ================================================================
   Otheryards site — implemented directly from the Figma file via the
   official Figma MCP (get_design_context), not reverse-engineered
   from screenshots. Every position/size below traces to a real node:
   header/footer 164px/264px tall, logo-icon 80×80 at left:0 top:42,
   wordmark image 580×203 (landing: left:80 top:617 — lower, with
   room to breathe; sub-pages: left:60 top:164 — flush under header),
   bg-texture a 2696×2696 square at left:-154 top:-387, btn-back
   bottom-right, cta-newsletter-link + footer mark/emails as below.
   All values are expressed relative to the 1440px frame width the
   design was built at, via clamp(min, Xvw, figma-px) so the page
   scales down gracefully on smaller viewports without exceeding the
   designed size on large ones.

   The big hero "OTHERYARDS" wordmark is a traced SVG asset exported
   from Figma (assets/images/wordmark-otheryards.svg), not live text
   in the "Pizza is my Favorite" font — so it needs no font file and
   carries no licensing question. The small 24px mention in the
   footer IS live text in that font; see the FLAG below.
   ================================================================ */

/* FLAG — FONT LICENSING, NOT YET RESOLVED: applies only to the small
   24px "OTHERYARDS" footer mention, which Figma renders as live text
   in "Pizza is my Favorite" (Kimberly Geswein). The .ttf exists
   locally at assets/fonts/PizzaIsMyFavorite.ttf for preview but is
   gitignored/not committed — the font's license requires a paid
   Server/Webfont license to embed on a website (desktop tier is
   print/desktop only), not confirmed purchased. Degrades safely: an
   absent .ttf just falls through to the generic --wordmark-fallback. */
@font-face {
  font-family: "Pizza is my Favorite";
  src: url("/assets/fonts/PizzaIsMyFavorite.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #000000;
  --ink-68: rgba(0, 0, 0, 0.68);
  --ink-49: rgba(0, 0, 0, 0.49);
  --rule: rgba(0, 0, 0, 0.14);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --wordmark-fallback: "Pizza is my Favorite", cursive;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: hidden;
}

html, body {
  margin: 0;
  max-width: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { position: relative; overflow-x: hidden; }

/* Not a centered block — the menu/wordmark column stays pinned near
   the left edge (handled by each element's own left-margin clamp
   below), and the background graphic is independently right-anchored
   (see .bg-texture) so it fills the right side instead of being tied
   to a shared centered container. This wrapper is just a positioning
   root now, no max-width/centering. */
.page-frame {
  position: relative;
}

a { color: inherit; }

.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: 0.75rem;
  left: 0.75rem;
  z-index: 40;
  padding: 0.55rem 0.9rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.85rem;
  text-decoration: none;
  border-radius: 4px;
  transform: translateY(-200%);
  transition: transform 160ms var(--ease);
}
.skip-link:focus { transform: translateY(0); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ── bg-texture: one independent graphic, left-anchored, overflowing
       off the right and top of the viewport. Same square asset and same
       geometry on every page, matching the design. ── */
.bg-texture {
  position: absolute;
  z-index: 0;
  overflow: hidden;
  /* Figma: bg-texture sits at x:-154 y:-387, 2696x2696, IDENTICAL on all
     five frames (1:1557, 3:1616, 4:1826, 4:1779, 5:2216) — the landing
     frame being a 1920 basis and the sub-pages 1440 does not change the
     texture's absolute geometry. Anchored LEFT, not right: x:-154 is a
     left offset. Ratios are against the 1440 sub-page basis. */
  left: clamp(-260px, -10.694vw, -110px);
  top: clamp(-560px, -26.875vw, -280px);
  width: clamp(1100px, 187.2vw, 2696px);
  height: clamp(1100px, 187.2vw, 2696px);
  pointer-events: none;
}
.bg-texture img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Landing previously carried its own geometry override plus a separate
   portrait asset (bg-texture-landing.webp, 2880x4238, opaque RGB). Both
   removed: Figma uses one square 2696x2696 node on every frame, so a
   portrait image force-fit into a square box was cropping ~32% of it,
   and the opaque white background hid the page behind it. One node in
   the design, one asset and one rule here. */

/* ── Header: 164px tall, white, flush ─────────────────────────────── */
.site-header {
  position: relative;
  z-index: 2;
  height: clamp(96px, 11.4vw, 164px);
  background: var(--paper);
  overflow: hidden;
}

.logo-icon {
  position: absolute;
  left: 0;
  top: clamp(22px, 2.9vw, 42px);
  width: clamp(46px, 5.6vw, 80px);
  height: clamp(46px, 5.6vw, 80px);
}
.logo-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }

.header-links {
  position: absolute;
  /* Sub-pages, 1440 basis: true figures are right:80px/top:56px, gap to
     the Instagram icon only 8px — nudged out a little since font-metric
     differences tipped that into overlap in the browser. */
  right: clamp(40px, 6.5vw, 94px);
  top: clamp(30px, 3.9vw, 56px);
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.3vw, 48px);
}
/* Landing, 1920 basis (resized since first implementation): real
   figures, gap to the icon is a genuine 43px here, no nudge needed. */
body[data-panel="landing"] .header-links {
  right: clamp(40px, 5.1vw, 98px);
  top: clamp(30px, 3.13vw, 60px);
}
.header-links a {
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
}
.header-links a:hover { text-decoration: underline; text-underline-offset: 3px; }

.link-instagram {
  position: absolute;
  right: clamp(16px, 5vw, 72px);
  top: clamp(26px, 3.5vw, 51px);
  width: clamp(24px, 2.2vw, 32px);
  height: clamp(24px, 2.2vw, 32px);
  border-radius: 4px;
  display: grid;
  place-items: center;
}
.link-instagram img { width: 70%; height: 70%; }
body[data-panel="landing"] .link-instagram {
  right: clamp(60px, 11.15vw, 214px);
  top: clamp(28px, 2.86vw, 55px);
}

/* ── Stage: header+footer are normal flow, this is what pushes the
       footer down to the bottom of a properly tall, poster-like page
       (content-area height at 1440 basis ≈ 2119 - 164 - 264 = 1691,
       ratio 1691/1440 ≈ 1.174 of viewport width) — without an
       explicit min-height here the footer collapses up against the
       nav/panel content instead of sitting below the bled-in image. ── */
.stage {
  position: relative;
  min-height: clamp(560px, 117vw, 1691px);
}
/* Landing's frame is now 1920×2292 (content-area height = 2292-164-264
   = 1864, ratio 1864/1920 ≈ 97.1vw) — resized since first implementation. */
body[data-panel="landing"] .stage {
  min-height: clamp(560px, 97.1vw, 1864px);
}

/* ── Wordmark (SVG asset) ─────────────────────────────────────────── */
.wordmark-img {
  position: relative;
  z-index: 2;
  display: block;
  width: clamp(280px, 40.3vw, 580px);
  height: auto;
}

/* Landing (1920 basis): wordmark top:385 (page-relative), header is
   164 tall, so margin-top = 385-164 = 221px. Sub-pages (1440 basis):
   wordmark top:164 — flush under the header, no gap. */
.stage--landing .wordmark-img {
  margin: clamp(3rem, 11.51vw, 13.8rem) 0 0 clamp(1rem, 4.17vw, 5rem);
}
.stage--panel .wordmark-img {
  margin: 0 0 0 clamp(1rem, 4.2vw, 3.75rem);
}

/* ── Landing: tagline + nav list ──────────────────────────────────── */
/* hero-tagline-inner (the real container — a separate, now-empty
   "hero-tagline" node is a leftover, not used): x:340 y:608.45,
   wordmark bottom edge is at 385+203=588, so only ~20px gap, no
   overlap — a real change from the previous (narrower-frame) layout,
   which intentionally overlapped the wordmark. */
.hero-tagline {
  position: relative;
  z-index: 2;
  margin: clamp(0.5rem, 1.04vw, 1.25rem) 0 0 clamp(3rem, 17.7vw, 21.25rem);
  max-width: 32rem;
  transform: rotate(-2.5deg);
}
.hero-tagline p {
  margin: 0;
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* menu list starts at page y:961; tagline block ends at 608.45+67.87
   ≈ 676, so gap ≈ 285px. */
.stage-nav {
  position: relative;
  z-index: 2;
  display: grid;
  margin: clamp(8rem, 14.84vw, 17.8rem) 0 0 clamp(1rem, 4.17vw, 5rem);
}
.stage-nav a {
  width: fit-content;
  padding: 0.15rem 0;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
  transform: rotate(0.2deg);
}
.stage-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Wide screens are an editorial menu, not a Figma artboard scaled into a
   corner. The graphic becomes a right-hand atmosphere and the destination
   links become the dominant interface. */
@media (min-width: 1441px) {
  body[data-panel="landing"] .page-frame {
    min-height: 100svh;
    display: grid;
    grid-template-rows: auto 1fr auto;
  }
  body[data-panel="landing"] .stage {
    min-height: clamp(44rem, calc(100svh - 18rem), 72rem);
    padding: clamp(3rem, 7vw, 9rem) clamp(3rem, 7vw, 10rem);
    display: grid;
    align-content: center;
    justify-items: start;
  }
  body[data-panel="landing"] .bg-texture {
    left: auto;
    right: clamp(-20rem, -9vw, -8rem);
    top: clamp(-20rem, -11vw, -8rem);
    width: clamp(75rem, 72vw, 130rem);
    height: clamp(75rem, 72vw, 130rem);
    opacity: 0.92;
  }
  .stage--landing .wordmark-img {
    width: clamp(32rem, 32vw, 58rem);
    margin: 0;
  }
  .hero-tagline {
    margin: clamp(0.5rem, 1.4vw, 1.5rem) 0 0 clamp(3rem, 7vw, 10rem);
    max-width: 26rem;
  }
  .hero-tagline p { font-size: clamp(1rem, 1.1vw, 1.45rem); }
  .stage-nav {
    margin: clamp(3rem, 5vw, 6rem) 0 0;
    gap: 0.15em;
  }
  .stage-nav a {
    font-size: clamp(2.4rem, 3.5vw, 5.4rem);
    line-height: 0.95;
    letter-spacing: -0.055em;
    padding: 0;
    transition: transform 180ms var(--ease), text-decoration-color 180ms var(--ease);
  }
  .stage-nav a:hover {
    transform: translateX(0.5rem) rotate(-1deg);
    text-decoration-thickness: 2px;
  }
  body[data-panel="landing"] .site-footer { height: clamp(10rem, 12vw, 16rem); }
}

/* ── Sub-pages: small page-title label near the wordmark ─────────── */
.page-title {
  position: relative;
  z-index: 2;
  margin: clamp(-1rem, -2.6vw, -0.4rem) 0 0 clamp(9rem, 37vw, 25.5rem);
  max-width: 28rem;
  transform: rotate(-2.43deg);
}
.page-title :is(p, h1) {
  margin: 0;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* ── Panel content ─────────────────────────────────────────────────── */
.panel {
  position: relative;
  z-index: 2;
  margin: clamp(2.5rem, 12vw, 7rem) 0 0 clamp(1.25rem, 4vw, 3.5rem);
  max-width: 44rem;
  padding-right: 1.5rem;
  opacity: 1;
  transition: opacity 260ms var(--ease), transform 420ms var(--ease);
}

/* The router transitions the stage, not an individual panel. Keep the
   wordmark, title and content moving as a single composition, while leaving
   the fixed background texture and header anchored. */
.stage > .wordmark-img,
.stage > .page-title,
.stage > .hero-tagline,
.stage > .stage-nav,
.stage > .panel,
.stage > .panel__back {
  transition: opacity 260ms var(--ease), transform 420ms var(--ease);
}
.stage.is-exiting > .wordmark-img,
.stage.is-exiting > .page-title,
.stage.is-exiting > .hero-tagline,
.stage.is-exiting > .stage-nav,
.stage.is-exiting > .panel,
.stage.is-exiting > .panel__back {
  opacity: 0;
  transform: translateY(-14px);
}
.stage.is-entering > .wordmark-img,
.stage.is-entering > .page-title,
.stage.is-entering > .hero-tagline,
.stage.is-entering > .stage-nav,
.stage.is-entering > .panel,
.stage.is-entering > .panel__back {
  opacity: 0;
  transform: translateY(20px);
}

.panel__label {
  margin: 0 0 1.4rem;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  transform: rotate(0.2deg);
}

.panel__promo {
  white-space: pre-line;
  font-size: clamp(18px, 2.5vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.35;
  margin: 0 0 2rem;
}
.panel__promo a { text-decoration: underline; text-underline-offset: 3px; }

.panel__foot {
  margin-top: clamp(3rem, 12vw, 8rem);
}
.panel__cta-line {
  margin: 0 0 2.5rem;
  font-size: clamp(15px, 1.7vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.5;
  max-width: 30rem;
}
.panel__cta-line a { text-decoration: underline; text-underline-offset: 3px; }

/* Figma anchors btn-back near the page's right edge (left:calc(91.67%-36px)
   at 1440 basis), independent of the narrow text column it visually sits
   near — so this breaks out of .panel's max-width via position:absolute
   on .stage, rather than living in normal flow inside .panel__foot. */
.panel__back {
  position: absolute;
  right: clamp(20px, 5.6vw, 80px);
  bottom: clamp(1.5rem, 4vw, 3rem);
  font-size: clamp(15px, 1.7vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
  transform: rotate(0.2deg);
}
.panel__back:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Contact panel ────────────────────────────────────────────────── */
.contact-list { margin: 0 0 1rem; }
.contact-list > div { margin-bottom: 2.2rem; }
.contact-list dt {
  margin: 0 0 0.3rem;
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
}
.contact-list dd { margin: 0; }
.contact-list dd a {
  font-size: clamp(15px, 1.7vw, 24px);
  font-weight: 500;
  color: var(--ink-68);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── About panel ──────────────────────────────────────────────────── */
.about-copy {
  display: grid;
  gap: 1rem;
  margin: 0 0 1.6rem;
  font-size: 1rem;
  line-height: 1.55;
}

.people-list {
  display: grid;
  gap: 0.8rem;
  list-style: none;
  margin: 0 0 1.6rem;
  padding: 0;
}
.people-list li { padding: 0.7rem 0; border-top: 1px solid var(--rule); }
.people-list .name { font-weight: 600; font-size: 0.96rem; }
.people-list .role { display: block; margin-top: 0.1rem; font-size: 0.84rem; color: var(--ink-68); }

.status-list {
  display: grid;
  gap: 0.4rem;
  margin: 0 0 1.6rem;
  font-size: 0.95rem;
}

/* ── Newsletter panel ─────────────────────────────────────────────── */
.newsletter-copy {
  font-size: clamp(18px, 2.1vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin: 0 0 2rem;
  max-width: 34rem;
}

.signup {
  display: grid;
  gap: 0.5rem;
  max-width: 24rem;
  margin: 0 0 1.6rem;
}
.signup__field { display: flex; gap: 0.5rem; }
.signup__field input {
  flex: 1;
  min-width: 0;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  outline: none;
}
.signup__field input::placeholder { color: var(--ink-49); }
.signup__field.is-loading { opacity: 0.7; pointer-events: none; }
.signup__field.is-error input { border-color: rgba(170, 30, 30, 0.5); }
.signup__field button {
  appearance: none;
  padding: 0.6rem 1.1rem;
  border: 0;
  border-radius: 4px;
  background: var(--ink);
  color: var(--paper);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 160ms var(--ease);
}
.signup__field button:hover { opacity: 0.85; }
.signup__error {
  margin: 0;
  min-height: 1.1em;
  font-size: 0.8rem;
  color: rgba(170, 30, 30, 0.85);
  opacity: 0;
  transition: opacity 220ms;
}
.signup__error.is-visible { opacity: 1; }
.hp { position: absolute; left: -9999px; }
.signup__done {
  display: none;
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 1.6rem;
}
.signup__done.is-visible { display: block; }

/* ── Footer: 264px tall, white, divider + mark + press/help stack ─── */
.site-footer {
  position: relative;
  z-index: 2;
  height: clamp(180px, 18.3vw, 264px);
  background: var(--paper);
  overflow: hidden;
}
.site-footer__divider {
  position: absolute;
  left: clamp(20px, 5.6vw, 80px);
  right: clamp(20px, 5.6vw, 80px);
  top: 0;
  border-top: 1px solid var(--rule);
}
.site-footer__stack {
  position: absolute;
  left: clamp(20px, 5.6vw, 80px);
  top: clamp(36px, 4.9vw, 70px);
  display: grid;
  gap: 0.35rem;
}
.site-footer__mark {
  margin: 0 0 0.3rem;
  font-family: var(--wordmark-fallback);
  font-size: clamp(18px, 1.7vw, 24px);
}
.site-footer__stack p { margin: 0; font-size: 0.85rem; }
.site-footer__stack a { color: var(--ink-49); text-decoration: underline; text-underline-offset: 2px; }

/* Plain muted italic text — Figma shows nothing at all here (empty
   node), so no box/border is invented to make this look like a
   designed component; it's just an obvious placeholder note. */
.placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-style: italic;
}

@media (max-width: 640px) {
  .stage--landing .wordmark-img, .stage--panel .wordmark-img { margin-left: 1.25rem; }
  .hero-tagline, .stage-nav, .page-title, .panel { margin-left: 1.25rem; }
  .page-title { margin-top: 0.5rem; }
  .panel__foot { margin-top: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .panel, .stage > .wordmark-img, .stage > .page-title,
  .stage > .hero-tagline, .stage > .stage-nav, .stage > .panel__back,
  .skip-link, .signup__field button { transition: none !important; }
}

/* ── Press panel ──────────────────────────────────────────────────── */
/* Press kit lives at /press.html. Ticket-tier status is the one thing
   here that changes without warning, so it reads from the same
   assets/data/tour-dates.json source of truth as events.js rather than
   being hardcoded twice. Poster is the announce artwork, replaced when
   updated artwork lands. */
.press-lede {
  font-size: clamp(18px, 2.1vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.4;
  margin: 0 0 2.2rem;
  max-width: 34rem;
}

.press-poster {
  display: block;
  width: 100%;
  max-width: 21rem;
  height: auto;
  margin: 0 0 0.6rem;
  border: 1px solid var(--rule);
}
.press-poster-note {
  margin: 0 0 2.4rem;
  font-size: 0.84rem;
  color: var(--ink-49);
  max-width: 21rem;
}

.press-h {
  margin: 2.6rem 0 0.9rem;
  font-size: clamp(17px, 1.8vw, 24px);
  font-weight: 500;
  letter-spacing: -0.02em;
  transform: rotate(0.2deg);
}

.press-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  margin: 0 0 0.8rem;
}
.press-table th {
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-49);
  padding: 0 1rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
}
.press-table td {
  padding: 0.7rem 1rem 0.7rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.press-table td:last-child, .press-table th:last-child { padding-right: 0; }
.press-table .city { font-weight: 600; white-space: nowrap; }
.press-table .tbc { color: var(--ink-49); }
.press-table a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.press-status { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.press-status--out { color: var(--ink); }
.press-status--on { color: var(--ink-49); font-weight: 500; }

.press-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  margin: 0 0 0.8rem;
}
.press-facts div { padding: 0.9rem 1rem 1rem 0; border-bottom: 1px solid var(--rule); }
.press-facts b { display: block; font-size: 1.7rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.press-facts span { display: block; margin-top: 0.25rem; font-size: 0.78rem; letter-spacing: 0.03em; color: var(--ink-68); }

.press-list { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0; }
.press-list li { padding: 0.65rem 0; border-bottom: 1px solid var(--rule); font-size: 0.95rem; }
.press-list li:first-child { border-top: 1px solid var(--rule); }
.press-list b { font-weight: 600; }

.press-copy { display: grid; gap: 0.9rem; margin: 0 0 1.4rem; font-size: 1rem; line-height: 1.55; max-width: 40rem; }
.press-copy a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.press-note {
  border-left: 2px solid var(--ink);
  padding: 0.2rem 0 0.2rem 1rem;
  margin: 0 0 1.6rem;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-68);
  max-width: 40rem;
}

@media (max-width: 640px) {
  .press-table { font-size: 0.86rem; }
  .press-table th, .press-table td { padding-right: 0.6rem; }
}

/* =====================================================================
   TOURING SYSTEM — replaces the fixed Figma-artboard presentation.
   The site is now built around an index/menu and a real ticket route.
   Abstract paper treatment replaces the animal texture on every page.
   ===================================================================== */
:root {
  --paper: #ead7a2;
  --paper-light: #f5eac9;
  --ink: #1a160e;
  --red: #ca3d20;
  --green: #52752a;
  --purple: #6f3b6e;
  --orange: #b96b17;
  --rule: rgba(26, 22, 14, 0.3);
  --rule-strong: rgba(26, 22, 14, 0.66);
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html, body { background: var(--paper); }
body {
  min-width: 0;
  background-color: var(--paper);
  background-image:
    linear-gradient(115deg, rgba(255,255,255,0.25), transparent 42%),
    repeating-linear-gradient(0deg, rgba(78, 47, 16, 0.035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(78, 47, 16, 0.018) 0 1px, transparent 1px 7px);
}
.bg-texture { display: none !important; }
.page-frame { min-height: 100svh; }

/* Header and footer are utility strips now—not independently positioned art. */
.site-header,
body[data-panel="landing"] .site-header {
  position: relative;
  z-index: 5;
  height: auto;
  min-height: 4.75rem;
  padding: 0.8rem clamp(1rem, 2.7vw, 3.25rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  background: transparent;
  border-bottom: 1px solid var(--rule-strong);
  overflow: visible;
}
.logo-icon {
  position: static;
  width: 2.45rem;
  height: 2.45rem;
  flex: 0 0 auto;
}
.logo-icon img { object-fit: contain; }
.header-links,
body[data-panel="landing"] .header-links {
  position: static;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.6vw, 1.6rem);
}
.header-links a {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.link-instagram,
body[data-panel="landing"] .link-instagram {
  position: static;
  width: 1.75rem;
  height: 1.75rem;
  margin-left: 0.1rem;
}

.site-footer,
body[data-panel="landing"] .site-footer {
  height: auto;
  min-height: 8rem;
  margin-top: 0;
  background: transparent;
  overflow: visible;
}
.site-footer__divider { left: clamp(1rem, 2.7vw, 3.25rem); right: clamp(1rem, 2.7vw, 3.25rem); border-color: var(--rule-strong); }
.site-footer__stack { position: static; padding: 1.4rem clamp(1rem, 2.7vw, 3.25rem) 2rem; gap: 0.3rem; }
.site-footer__mark { font-size: 1.3rem; letter-spacing: -0.06em; }
.site-footer__stack p { font-size: 0.76rem; }
.site-footer__stack a { color: var(--ink); }

/* Landing: an index to enter through, not an oversized desktop canvas. */
.stage,
body[data-panel="landing"] .stage {
  min-height: auto;
}
.stage--landing {
  padding: clamp(1rem, 2.8vw, 3.5rem) clamp(1rem, 4.3vw, 6rem) clamp(2.6rem, 5vw, 6.5rem);
}
.landing-shell {
  width: min(100%, 1500px);
  min-height: min(780px, calc(100svh - 13rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(23rem, 1.18fr) minmax(16rem, 0.82fr);
  align-items: center;
  gap: clamp(2rem, 8vw, 11rem);
}
.landing-menu { width: 100%; max-width: 48rem; }
.landing-kicker,
.tour-hero__eyebrow,
.tour-lineup__label {
  margin: 0 0 0.9rem;
  font-size: clamp(0.65rem, 0.7vw, 0.78rem);
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.2;
}
.stage--landing .wordmark-img {
  width: min(100%, clamp(20rem, 35vw, 40rem));
  margin: 0;
  filter: contrast(1.2);
}
.landing-deck {
  max-width: 29rem;
  margin: 1.3rem 0 0;
  font-size: clamp(1rem, 1.2vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.stage-nav {
  margin: clamp(2.8rem, 5vw, 5.5rem) 0 0;
  display: grid;
  gap: 0;
}
.stage-nav a {
  width: 100%;
  padding: 0.7rem 0 0.8rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  border-top: 1px solid var(--rule-strong);
  color: var(--ink);
  font-size: clamp(1.85rem, 3.3vw, 4.75rem);
  font-weight: 800;
  letter-spacing: -0.075em;
  line-height: 0.9;
  text-decoration: none;
  transform: none;
  transition: color 180ms var(--ease), padding-left 180ms var(--ease), background-color 180ms var(--ease);
}
.stage-nav a:last-child { border-bottom: 1px solid var(--rule-strong); }
.stage-nav a b {
  display: inline-block;
  margin-right: 0.25em;
  color: var(--red);
  font-size: 0.28em;
  letter-spacing: 0;
  vertical-align: 1.4em;
}
.stage-nav a small {
  flex: 0 0 auto;
  font-size: clamp(0.58rem, 0.72vw, 0.8rem);
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
}
.stage-nav a:hover,
.stage-nav a:focus-visible {
  padding-left: 0.3em;
  background: var(--ink);
  color: var(--paper-light);
  outline: 0;
}
.stage-nav a:hover b,
.stage-nav a:focus-visible b { color: #efca31; }
.landing-note {
  margin: 1.4rem 0 0;
  color: var(--purple);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.45;
}
.landing-poster {
  position: relative;
  width: min(100%, 30rem);
  justify-self: end;
  padding: clamp(0.65rem, 1vw, 1rem);
  background: var(--ink);
  transform: rotate(2.5deg);
  box-shadow: 0.9rem 1rem 0 var(--red), 1.7rem 1.8rem 0 rgba(26,22,14,0.2);
}
.landing-poster::before {
  content: "TOUR / TICKETS LIVE";
  position: absolute;
  z-index: 1;
  top: -1.5rem;
  right: -0.15rem;
  padding: 0.36rem 0.55rem;
  background: var(--green);
  color: var(--paper-light);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  transform: rotate(-4deg);
}
.landing-poster picture, .landing-poster img { display: block; width: 100%; }
.landing-poster img { aspect-ratio: 0.667; object-fit: cover; }
.landing-poster a {
  display: block;
  margin: 0.7rem 0 0.05rem;
  color: var(--paper-light);
  font-size: clamp(0.75rem, 0.9vw, 0.92rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-decoration: none;
}
.landing-poster a span { color: #efca31; font-size: 1.2em; }

/* Tour is the conversion surface: date, location status, one clear action. */
.stage--tour {
  width: min(100%, 1500px);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 6.5rem) clamp(1rem, 4.3vw, 6rem) clamp(4rem, 7vw, 8rem);
}
.tour-hero {
  max-width: 63rem;
  padding-bottom: clamp(2rem, 4vw, 4.5rem);
  border-bottom: 2px solid var(--ink);
}
.tour-hero h1 {
  margin: 0;
  max-width: 11ch;
  font-size: clamp(3.4rem, 9vw, 10rem);
  font-weight: 900;
  letter-spacing: -0.1em;
  line-height: 0.76;
  text-transform: uppercase;
}
.tour-hero > p:not(.tour-hero__eyebrow):not(.tour-hero__note) {
  max-width: 45rem;
  margin: clamp(1.4rem, 2.5vw, 2.5rem) 0 0;
  font-size: clamp(1.05rem, 1.7vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.2;
}
.tour-hero__note {
  max-width: 36rem;
  margin: 1.1rem 0 0;
  color: rgba(26,22,14,0.72);
  font-size: 0.82rem;
  line-height: 1.4;
}
.tour-dates { margin-top: clamp(2.6rem, 5vw, 5.5rem); }
.tour-date {
  display: grid;
  grid-template-columns: minmax(2rem, 0.22fr) minmax(12rem, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 3rem);
  min-height: clamp(9rem, 12vw, 13rem);
  padding: 1.25rem 0;
  border-top: 1px solid var(--rule-strong);
}
.tour-date:last-child { border-bottom: 1px solid var(--rule-strong); }
.tour-date__number {
  align-self: start;
  margin: 0.2rem 0 0;
  color: var(--red);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.tour-date time {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}
.tour-date h3 {
  margin: 0;
  font-size: clamp(2.4rem, 5.5vw, 6.8rem);
  font-weight: 900;
  letter-spacing: -0.09em;
  line-height: 0.85;
  text-transform: uppercase;
}
.tour-date div > p { margin: 0.65rem 0 0; font-size: 0.84rem; font-weight: 600; line-height: 1.25; }
.tour-date a {
  padding: 0.75rem 0.9rem;
  background: var(--ink);
  color: var(--paper-light);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 160ms var(--ease), color 160ms var(--ease), transform 160ms var(--ease);
}
.tour-date a:hover { background: var(--red); transform: rotate(-2deg); }
.tour-date a span { color: #efca31; }
.tour-lineup {
  max-width: 76rem;
  margin-top: clamp(4rem, 8vw, 10rem);
  padding: clamp(1.5rem, 3vw, 3rem);
  background: var(--green);
  color: var(--paper-light);
  transform: rotate(-0.65deg);
}
.tour-lineup__label { color: #efca31; }
.tour-lineup h2 {
  max-width: 25ch;
  margin: 0;
  font-size: clamp(1.9rem, 4vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.075em;
  line-height: 0.88;
}
.tour-lineup p { margin: 1.5rem 0 0; font-weight: 700; }
.tour-lineup a { color: inherit; text-underline-offset: 0.18em; }

/* Remaining panels retain their content but use the same responsive flow. */
.stage--panel {
  min-height: auto;
  width: min(100%, 1100px);
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 5.5rem) clamp(1rem, 4.3vw, 6rem) clamp(4rem, 7vw, 7rem);
}
.stage--panel .wordmark-img { width: clamp(14rem, 24vw, 22rem); margin: 0; }
.page-title { margin: 1.3rem 0 0; max-width: 34rem; transform: none; }
.page-title :is(p, h1) { font-size: clamp(2.2rem, 5vw, 4.6rem); font-weight: 900; letter-spacing: -0.08em; line-height: 0.85; text-transform: uppercase; }
.panel { max-width: 48rem; margin: clamp(2rem, 5vw, 4.5rem) 0 0; padding: 0; }
.panel__label { font-size: clamp(1.2rem, 2.3vw, 2rem); font-weight: 800; }
.panel__back { position: static; display: inline-block; margin-top: 3.5rem; padding: 0.65rem 0.85rem; border: 1px solid var(--ink); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; transform: none; }
.panel__back:hover { background: var(--ink); color: var(--paper-light); }
.about-copy, .press-copy { font-size: 1.05rem; line-height: 1.55; }
.people-list li { border-color: var(--rule-strong); }
.contact-list dt { font-size: clamp(1.5rem, 3vw, 2.5rem); font-weight: 900; letter-spacing: -0.06em; }
.contact-list dd a { color: var(--ink); font-size: clamp(1rem, 1.5vw, 1.3rem); }
.newsletter-copy { max-width: 33rem; font-size: clamp(1.5rem, 3vw, 2.8rem); font-weight: 800; letter-spacing: -0.065em; line-height: 0.93; }
.signup__field input { border-radius: 0; border-color: var(--ink); background: var(--paper-light); }
.signup__field button { border-radius: 0; background: var(--red); font-weight: 800; }

@keyframes tour-rise {
  from { opacity: 0; transform: translateY(1.15rem); }
  to { opacity: 1; transform: translateY(0); }
}
.landing-menu > *, .landing-poster, .tour-hero, .tour-date, .tour-lineup {
  animation: tour-rise 650ms var(--ease) both;
}
.landing-menu > :nth-child(2), .tour-date:nth-child(2) { animation-delay: 80ms; }
.landing-menu > :nth-child(3), .tour-date:nth-child(3) { animation-delay: 140ms; }
.landing-menu > :nth-child(4), .tour-date:nth-child(4) { animation-delay: 200ms; }
.landing-poster, .tour-date:nth-child(5), .tour-lineup { animation-delay: 260ms; }

@media (max-width: 720px) {
  .site-header, body[data-panel="landing"] .site-header { min-height: 4.15rem; padding-block: 0.65rem; }
  .header-links { gap: 0.7rem; }
  .header-links a { font-size: 0.62rem; }
  .link-instagram { width: 1.5rem; height: 1.5rem; }
  .landing-shell { min-height: auto; grid-template-columns: 1fr; gap: 3.8rem; }
  .landing-menu { min-width: 0; }
  .stage--landing .wordmark-img { width: 100%; max-width: 100%; }
  .landing-deck { max-width: 100%; }
  .stage-nav a { font-size: clamp(2rem, 10.5vw, 3.3rem); padding-block: 0.65rem; }
  .stage-nav a small { max-width: 5.5rem; font-size: 0.55rem; text-align: right; line-height: 1.15; }
  .landing-note { max-width: 100%; overflow-wrap: anywhere; }
  .landing-poster { width: min(74vw, 22rem); justify-self: center; margin-right: 0.8rem; }
  .tour-date { grid-template-columns: 1.8rem 1fr; align-items: start; gap: 0.8rem; padding: 1.3rem 0 1.5rem; }
  .tour-date a { grid-column: 2; justify-self: start; margin-top: 0.3rem; }
  .tour-date h3 { font-size: clamp(3rem, 15vw, 4.5rem); }
  .tour-lineup { margin-inline: -0.25rem; }
}

@media (max-width: 460px) {
  .site-header, body[data-panel="landing"] .site-header { gap: 0.65rem; }
  .header-links { display: none; }
  .link-instagram, body[data-panel="landing"] .link-instagram { margin-left: auto; }
  .stage--landing { padding-inline: 1.35rem; }
  .landing-kicker { font-size: 0.6rem; }
  .landing-deck { font-size: 0.95rem; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-menu > *, .landing-poster, .tour-hero, .tour-date, .tour-lineup { animation: none !important; }
  .stage-nav a, .tour-date a { transition: none !important; }
}

/* Restore the Figma composition. The touring-system experiment above is
   intentionally neutralised; it changed the visual language rather than
   making the original system responsive. */
:root {
  --paper: #ffffff;
  --ink: #000000;
  --ink-68: rgba(0, 0, 0, 0.68);
  /* was 0.49 — failed WCAG AA text contrast (~4:1) on the footer email
     links; 0.6 clears 4.5:1 while staying visually "muted." */
  --ink-49: rgba(0, 0, 0, 0.6);
  --rule: rgba(0, 0, 0, 0.14);
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
html, body { background: var(--paper); }
body { background-image: none; }
.page-frame { min-height: 0; }
.site-header,
body[data-panel="landing"] .site-header {
  position: relative;
  z-index: 2;
  display: block;
  height: clamp(96px, 11.4vw, 164px);
  min-height: 0;
  padding: 0;
  background: var(--paper);
  border: 0;
  overflow: hidden;
}
.logo-icon {
  position: absolute;
  left: 0;
  top: clamp(22px, 2.9vw, 42px);
  width: clamp(46px, 5.6vw, 80px);
  height: clamp(46px, 5.6vw, 80px);
}
.header-links,
body[data-panel="landing"] .header-links {
  position: absolute;
  right: clamp(40px, 6.5vw, 94px);
  top: clamp(30px, 3.9vw, 56px);
  display: flex;
  margin: 0;
  gap: clamp(20px, 3.3vw, 48px);
}
body[data-panel="landing"] .header-links { right: clamp(40px, 5.1vw, 98px); top: clamp(30px, 3.13vw, 60px); }
.header-links a { font-size: clamp(15px, 1.4vw, 20px); font-weight: 500; letter-spacing: normal; text-transform: none; }
.link-instagram,
body[data-panel="landing"] .link-instagram {
  position: absolute;
  right: clamp(16px, 5vw, 72px);
  top: clamp(26px, 3.5vw, 51px);
  width: clamp(24px, 2.2vw, 32px);
  height: clamp(24px, 2.2vw, 32px);
  margin: 0;
}
body[data-panel="landing"] .link-instagram { right: clamp(60px, 11.15vw, 214px); top: clamp(28px, 2.86vw, 55px); }
.stage { min-height: clamp(560px, 117vw, 1691px); }
body[data-panel="landing"] .stage { min-height: clamp(560px, 97.1vw, 1864px); padding: 0; display: block; }
.stage--landing .wordmark-img {
  width: clamp(280px, 40.3vw, 580px);
  max-width: none;
  margin: clamp(3rem, 11.51vw, 13.8rem) 0 0 clamp(1rem, 4.17vw, 5rem);
  filter: none;
}
.hero-tagline { margin: clamp(0.5rem, 1.04vw, 1.25rem) 0 0 clamp(3rem, 17.7vw, 21.25rem); max-width: 32rem; }
.hero-tagline p { font-size: clamp(15px, 1.4vw, 20px); font-weight: 600; }
.stage-nav { margin: clamp(8rem, 14.84vw, 17.8rem) 0 0 clamp(1rem, 4.17vw, 5rem); display: grid; gap: 0; }
.stage-nav a {
  width: fit-content;
  display: block;
  padding: 0.15rem 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: normal;
  text-transform: none;
  transform: rotate(0.2deg);
}
.stage-nav a:hover,
.stage-nav a:focus-visible { padding-left: 0; background: transparent; color: var(--ink); outline: 0; text-decoration: underline; text-underline-offset: 4px; }
.stage-nav a b, .stage-nav a small { display: none; }
.site-footer,
body[data-panel="landing"] .site-footer { position: relative; z-index: 2; height: clamp(180px, 18.3vw, 264px); min-height: 0; margin: 0; background: var(--paper); overflow: hidden; }
.site-footer__divider { left: clamp(20px, 5.6vw, 80px); right: clamp(20px, 5.6vw, 80px); border-color: var(--rule); }
.site-footer__stack { position: absolute; left: clamp(20px, 5.6vw, 80px); top: clamp(36px, 4.9vw, 70px); padding: 0; }
.site-footer__mark { font-size: clamp(18px, 1.7vw, 24px); letter-spacing: normal; }
.site-footer__stack p { font-size: 0.85rem; }
.site-footer__stack a { color: var(--ink-49); }
.stage--panel { min-height: clamp(560px, 117vw, 1691px); width: auto; margin: 0; padding: 0; }
.stage--panel .wordmark-img { width: clamp(280px, 40.3vw, 580px); margin: 0 0 0 clamp(1rem, 4.2vw, 3.75rem); }
.page-title { margin: clamp(-1rem, -2.6vw, -0.4rem) 0 0 clamp(9rem, 37vw, 25.5rem); max-width: 28rem; transform: rotate(-2.43deg); }
.page-title :is(p, h1) { font-size: clamp(20px, 2.1vw, 30px); font-weight: 500; letter-spacing: -0.02em; line-height: normal; text-transform: none; }
.panel { max-width: 44rem; margin: clamp(2.5rem, 12vw, 7rem) 0 0 clamp(1.25rem, 4vw, 3.5rem); padding-right: 1.5rem; }
.panel__label { font-size: clamp(20px, 2.1vw, 30px); font-weight: 500; }
.panel__back { position: absolute; right: clamp(20px, 5.6vw, 80px); bottom: clamp(1.5rem, 4vw, 3rem); display: block; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: clamp(15px, 1.7vw, 24px); font-weight: 500; letter-spacing: -0.02em; text-transform: none; transform: rotate(0.2deg); }
.panel__back:hover { background: transparent; color: var(--ink); }
.about-copy, .press-copy { font-size: 1rem; line-height: 1.55; }
.contact-list dt { font-size: clamp(20px, 2.1vw, 30px); font-weight: 500; letter-spacing: -0.02em; }
.contact-list dd a { color: var(--ink-68); font-size: clamp(15px, 1.7vw, 24px); }
.newsletter-copy { font-size: clamp(18px, 2.1vw, 30px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.4; }
/* Scoped, not a --rule change: --rule (0.14 alpha) is ~1.15:1 against
   white, fine for decorative hairlines but fails the 3:1 minimum WCAG
   requires for an interactive control's border. Only the actual form
   input gets the stronger value. */
.signup__field input { border-radius: 4px; border-color: rgba(0, 0, 0, 0.45); background: var(--paper); }
.signup__field button { border-radius: 4px; background: var(--ink); font-weight: 600; }
.landing-menu > *, .landing-poster, .tour-hero, .tour-date, .tour-lineup { animation: none; }

@media (max-width: 640px) {
  .stage--landing .wordmark-img, .stage--panel .wordmark-img { margin-left: 1.25rem; }
  .hero-tagline, .stage-nav, .page-title, .panel { margin-left: 1.25rem; }
  .page-title { margin-top: 0.5rem; }
  .panel__foot { margin-top: 2rem; }
}


/* ===== CORRECTIONS (Claude, 20 Aug) =====================================
   Figma agent confirmed: bg-texture is 2696x2696 at x:-154 y:-387 on all
   five frames, constraints MIN/MIN (pinned top-LEFT). Landing's fill is
   scaleMode CROP with imageTransform [[1,0,-0.1264],[0,1,-0.0723]];
   sub-pages are scaleMode FILL, identity. Footer is the only MAX-pinned
   child, so the composition is a tall top-anchored poster, not a hero.
   ====================================================================== */
.bg-texture { display: block !important; }
.header-links,
body[data-panel="landing"] .header-links { right: clamp(80px, 8.9vw, 128px); }
body[data-panel="landing"] .header-links { right: clamp(88px, 14.1vw, 270px); }

/* =====================================================================
   FIGMA-EXACT LANDING  —  node 1:1413, 1920 x 2292
   Every value below is read directly from get_design_context on the
   Figma file, converted to vw against the 1920 basis so it scales
   proportionally below 1920 and pins to the exact Figma pixel at and
   above it. Constraints in Figma are MIN/MIN on every child except the
   footer (MAX), i.e. the composition is top-left anchored and the page
   is a tall poster, not a viewport-height hero.
   ===================================================================== */
/* Every clamp() on this page caps out at its Figma pixel value once the
   viewport reaches ~1920px (the frame's native width) — so beyond that
   point the whole composition is a fixed-size block that was simply
   left-anchored, leaving all the extra space on a wide monitor stuck on
   the right. Capping the frame's own width and centering it distributes
   that space evenly instead. No effect below 1920px — everything below
   that is already narrower than this max-width. */
body[data-panel="landing"] .page-frame { position: relative; min-height: 0; max-width: 1920px; margin: 0 auto; }

/* bg-texture 1:1557 — 2696x2696 at x:-154 y:-387, fill scaleMode CROP
   with imageTransform [[1,0,-0.1264],[0,1,-0.0723]] on the landing frame */
body[data-panel="landing"] .bg-texture {
  position: absolute;
  left: clamp(-154px, -8.0208vw, -40px);
  top: clamp(-387px, -20.1563vw, -100px);
  width: clamp(700px, 140.4167vw, 2696px);
  height: clamp(700px, 140.4167vw, 2696px);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  display: block !important;
}
body[data-panel="landing"] .bg-texture img {
  position: absolute;
  left: 12.64%;
  top: 7.23%;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: fill;
}

/* header 1:1487 — full width, 164px tall, white, clipped */
body[data-panel="landing"] .site-header {
  position: relative;
  z-index: 3;
  display: block;
  height: clamp(78px, 8.5417vw, 164px);
  min-height: 0;
  padding: 0;
  background: #fff;
  border: 0;
  overflow: visible;
}
/* logo-icon 1:1556 — left 0, top 42, 80x80, object-cover */
body[data-panel="landing"] .logo-icon {
  position: absolute;
  left: 0;
  top: clamp(12px, 2.1875vw, 42px);
  width: clamp(40px, 4.1667vw, 80px);
  height: clamp(40px, 4.1667vw, 80px);
}
body[data-panel="landing"] .logo-icon img { width: 100%; height: 100%; object-fit: cover; }

/* header-links 1:1488 — right 98, top 60, flex, gap 48, Inter Medium 20/1.5.
   Figma carries one link (contact) with link-instagram separately at
   x:1674 (= right 214). Two links overflow into the icon, so the icon
   joins the same right-anchored row rather than being pinned apart. */
body[data-panel="landing"] .site-header {
  --oy-hdr-right: clamp(20px, 5.1042vw, 98px);
  --oy-hdr-gap: clamp(14px, 2.5vw, 48px);
}
body[data-panel="landing"] .header-links {
  position: absolute;
  right: var(--oy-hdr-right);
  top: clamp(18px, 3.125vw, 60px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--oy-hdr-gap);
  margin: 0;
}
body[data-panel="landing"] .header-links a {
  font-size: clamp(13px, 1.0417vw, 20px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: #000;
}
body[data-panel="landing"] .link-instagram {
  position: absolute;
  right: calc(var(--oy-hdr-right) + var(--oy-hdr-gap) + 5.6vw);
  top: clamp(16px, 2.8646vw, 55px);
  width: clamp(20px, 1.6667vw, 32px);
  height: clamp(20px, 1.6667vw, 32px);
  border-radius: 4px;
  margin: 0;
}

/* stage — the poster body between header and footer.
   FIXED 22 Aug: wordmark/tagline/nav below were position:absolute with
   .stage's height guessed via a vw-based min-height (clamp(...vw...)) to
   compensate — since absolutely-positioned children don't contribute to
   a parent's height, the footer (a normal-flow sibling) had nothing real
   to sit below. That guess only holds if `vw` stays in sync with the
   actual layout viewport; page zoom is exactly the case where it can
   fall out of sync, and the footer visibly rides up under the nav.
   Converted the three below to normal flow (position:relative + margin
   instead of position:absolute + top/left) so .stage's height comes from
   real content again — no guessing, so nothing to get out of sync. */
body[data-panel="landing"] .stage {
  position: relative;
  z-index: 2;
  display: block;
  padding: 0;
  margin: 0;
  min-height: clamp(700px, 110.8333vw, 2128px); /* floor only, real content now determines actual height */
}

/* wordmark 2:1579 — left 80, top 385 (-164 header = 221 from stage top) */
body[data-panel="landing"] .wordmark-img {
  position: relative;
  margin: clamp(60px, 11.5104vw, 221px) 0 0 clamp(20px, 4.1667vw, 80px);
  width: clamp(240px, 30.2083vw, 580px);
  height: auto;
  max-width: none;
}

/* hero-tagline 1:1496 — top 608 (-164 header = 444), wordmark bottom edge
   sits around top 221 + (580*203/580 height ratio ~203px scaled) so the
   real gap is small; matched here via margin-top from the wordmark's own
   flow position rather than an absolute page coordinate. Inter SemiBold
   20, tracking -0.4px, centred, rotate -5.43deg. */
body[data-panel="landing"] .hero-tagline {
  position: relative;
  margin: clamp(0.5rem, 1.6vw, 1.4rem) 0 0 clamp(60px, 17.7083vw, 340px);
  width: clamp(210px, 26.0075vw, 499.345px);
  transform: rotate(-5.43deg);
}
body[data-panel="landing"] .hero-tagline p {
  margin: 0;
  font-size: clamp(13px, 1.0417vw, 20px);
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: normal;
  text-align: center;
  color: #000;
}

/* menu 2:1581 / 2:1586 / 2:1591 / 2:1601 — left 80, 53px step, Inter
   Medium 30, tracking -0.6px, rot 0.21deg. Gap above matched from the
   original 961 top minus the tagline's own end position. */
body[data-panel="landing"] .stage-nav {
  position: relative;
  margin: clamp(3rem, 8vw, 7.5rem) 0 0 clamp(20px, 4.1667vw, 80px);
  display: block;
  padding: 0;
  transform: rotate(0.21deg);
}
body[data-panel="landing"] .stage-nav a {
  display: block;
  height: clamp(28px, 2.7604vw, 53px);
  font-size: clamp(18px, 1.5625vw, 30px);
  font-weight: 500;
  letter-spacing: -0.6px;
  line-height: normal;
  text-transform: none;
  color: #000;
  padding: 0;
  background: none;
}
/* Real content flow needs breathing room before the footer now that
   nothing is absolutely positioned to fake the tall-poster gap. */
body[data-panel="landing"] .stage { padding-bottom: clamp(3rem, 8vw, 8rem); }

/* footer 1:1448 — 264 tall, bottom-pinned, divider left 80 w 1280,
   OTHERYARDS in Pizza is my FAVORITE 24, addresses Inter Medium 16 @49% */
body[data-panel="landing"] .site-footer {
  position: relative;
  z-index: 2;
  height: clamp(140px, 13.75vw, 264px);
  min-height: 0;
  margin: 0;
  background: #fff;
  overflow: hidden;
}
body[data-panel="landing"] .site-footer__divider {
  position: absolute;
  left: clamp(20px, 4.1667vw, 80px);
  top: 1px;
  width: clamp(280px, 66.6667vw, 1280px);
  right: auto;
  border-top: 1px solid rgba(0,0,0,0.14);
}
body[data-panel="landing"] .site-footer__stack {
  position: absolute;
  left: clamp(20px, 4.1667vw, 80px);
  top: clamp(30px, 4.0625vw, 78px);
  padding: 0;
}
body[data-panel="landing"] .site-footer__mark {
  font-family: "Pizza is my Favorite", var(--wordmark-fallback), cursive;
  font-size: clamp(15px, 1.25vw, 24px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  margin: 0 0 clamp(8px, 1.35vw, 26px);
}
body[data-panel="landing"] .site-footer__stack p { margin: 0; }
body[data-panel="landing"] .site-footer__stack a {
  font-size: clamp(11px, 0.8333vw, 16px);
  font-weight: 500;
  line-height: 1.5;
  color: #000;
  opacity: 0.49;
  text-decoration: none;
}

/* Header row, corrected. Figma pins link-instagram at x:1674 and the
   single "contact" link at right:98, i.e. icon first, text after. With a
   second link the two absolutely-positioned blocks overlap, so the row
   becomes one right-aligned flex line and the icon takes order:-1 to keep
   Figma's icon-then-text order. Right edge and 48px gap are unchanged. */
body[data-panel="landing"] .site-header {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--oy-hdr-gap);
  padding: clamp(16px, 2.8646vw, 55px) var(--oy-hdr-right) 0 0;
}
body[data-panel="landing"] .header-links,
body[data-panel="landing"] .link-instagram {
  position: static;
  right: auto;
  top: auto;
  flex: 0 0 auto;
}
body[data-panel="landing"] .link-instagram { order: -1; }
body[data-panel="landing"] .header-links { align-items: baseline; }

/* About page blocks. Replaces the people-list, which is gone from the
   markup. Same rhythm as .about-copy so the page reads as one column. */
.about-meta { color: var(--ink-49); font-size: 0.92rem; }
.about-block { margin: 0 0 1.9rem; max-width: 40rem; }
.about-block__label {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-49);
}
.about-block p { margin: 0 0 0.55rem; font-size: 1rem; line-height: 1.55; }
.about-block a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   FIGMA-EXACT SUB-PAGES  —  1440 x 2119 frames
   about us 4:1778, events 3:1615, contact 4:1825, newsletter 5:2215.
   Values read from get_design_context, expressed in vw against 1440.
   Note the header differs from the landing frame: links sit at right:80
   and the Instagram icon at right:40, i.e. icon AFTER the text, where
   the landing has icon before it at right:214 / links right:98.
   ===================================================================== */
body:not([data-panel="landing"]) .site-header {
  position: relative;
  z-index: 3;
  display: block;
  height: clamp(78px, 11.3889vw, 164px);
  min-height: 0;
  padding: 0;
  background: #fff;
  border: 0;
  overflow: visible;
}
body:not([data-panel="landing"]) .logo-icon {
  position: absolute;
  left: 0;
  top: clamp(12px, 2.9167vw, 42px);
  width: clamp(40px, 5.5556vw, 80px);
  height: clamp(40px, 5.5556vw, 80px);
}
body:not([data-panel="landing"]) .header-links {
  position: absolute;
  right: clamp(56px, 5.5556vw, 80px);
  top: clamp(18px, 3.8889vw, 56px);
  display: flex;
  align-items: center;
  gap: clamp(14px, 3.3333vw, 48px);
  margin: 0;
}
body:not([data-panel="landing"]) .header-links a {
  font-size: clamp(13px, 1.3889vw, 20px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: #000;
}
body:not([data-panel="landing"]) .link-instagram {
  position: absolute;
  right: clamp(14px, 2.7778vw, 40px);
  top: clamp(16px, 3.5417vw, 51px);
  width: clamp(20px, 2.2222vw, 32px);
  height: clamp(20px, 2.2222vw, 32px);
  margin: 0;
  border-radius: 4px;
}

/* bg-texture on sub-pages: same 2696 square at -154/-387, fill scaleMode
   FILL with an identity transform, so a plain centred cover. */
body:not([data-panel="landing"]) .bg-texture {
  position: absolute;
  left: clamp(-154px, -10.6944vw, -40px);
  top: clamp(-387px, -26.875vw, -100px);
  width: clamp(700px, 187.2222vw, 2696px);
  height: clamp(700px, 187.2222vw, 2696px);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
body:not([data-panel="landing"]) .bg-texture img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  position: static; left: auto; top: auto;
}

/* stage: wordmark 4:1810 left 60 top 164, 580x203.
   page-title 4:1806 left 543 top 353, Inter Medium 30, rot -2.43deg.
   panel label 4:1823 left 60 top 729, Inter Medium 30, rot 0.21deg. */
body:not([data-panel="landing"]) .stage--panel {
  position: relative;
  display: block;
  min-height: 0;
  width: auto;
  margin: 0;
  padding: 0 0 clamp(40px, 5vw, 72px);
}
body:not([data-panel="landing"]) .stage--panel .wordmark-img {
  position: relative;
  display: block;
  left: auto;
  margin: 0 0 0 clamp(16px, 4.1667vw, 60px);
  width: clamp(240px, 40.2778vw, 580px);
  height: auto;
  max-width: none;
}
body:not([data-panel="landing"]) .page-title {
  position: relative;
  z-index: 2;
  margin: clamp(-34px, -3.4vw, -12px) 0 0 clamp(120px, 37.7083vw, 543px);
  max-width: none;
  transform: rotate(-2.43deg);
}
body:not([data-panel="landing"]) .page-title :is(p, h1) {
  margin: 0;
  font-size: clamp(18px, 2.0833vw, 30px);
  font-weight: 500;
  letter-spacing: -0.6px;
  line-height: normal;
  text-transform: none;
}
body:not([data-panel="landing"]) .panel {
  position: relative;
  z-index: 2;
  margin: clamp(48px, 10.9vw, 157px) 0 0 clamp(16px, 4.1667vw, 60px);
  max-width: min(43.3vw, 624px);
  padding-right: clamp(12px, 2vw, 28px);
}
body:not([data-panel="landing"]) .panel__label {
  font-size: clamp(18px, 2.0833vw, 30px);
  font-weight: 500;
  letter-spacing: -0.6px;
  line-height: normal;
  transform: rotate(0.21deg);
  margin: 0 0 clamp(20px, 3vw, 44px);
}
body:not([data-panel="landing"]) .panel__cta-line,
body:not([data-panel="landing"]) .panel__back {
  font-size: clamp(15px, 1.6667vw, 24px);
  font-weight: 500;
  letter-spacing: -0.48px;
  line-height: normal;
}
/* footer on sub-pages: OTHERYARDS at top 70, press@ 144, help@ ~190 */
body:not([data-panel="landing"]) .site-footer {
  position: relative;
  z-index: 2;
  height: clamp(140px, 18.3333vw, 264px);
  min-height: 0;
  margin: 0;
  background: #fff;
  overflow: hidden;
}
body:not([data-panel="landing"]) .site-footer__divider {
  position: absolute;
  left: clamp(16px, 5.5556vw, 80px);
  right: auto;
  top: 1px;
  width: clamp(280px, 88.8889vw, 1280px);
  border-top: 1px solid rgba(0,0,0,0.14);
}
body:not([data-panel="landing"]) .site-footer__stack {
  position: absolute;
  left: clamp(16px, 5.5556vw, 80px);
  top: clamp(28px, 4.0278vw, 58px);
  padding: 0;
}
body:not([data-panel="landing"]) .site-footer__mark {
  font-family: "Pizza is my Favorite", var(--wordmark-fallback), cursive;
  font-size: clamp(15px, 1.6667vw, 24px);
  font-weight: 400;
  line-height: 1.5;
  margin: 0 0 clamp(10px, 1.8vw, 26px);
}
body:not([data-panel="landing"]) .site-footer__stack p { margin: 0; }
body:not([data-panel="landing"]) .site-footer__stack a {
  font-size: clamp(11px, 1.1111vw, 16px);
  font-weight: 500;
  line-height: 1.5;
  color: #000;
  opacity: 0.49;
  text-decoration: none;
}


/* Ticket movement line. The strongest fact in the campaign, and it was
   previously only in outbound email. Sits under the events promo block. */
.ticket-status {
  margin: 0 0 1.6rem;
  max-width: 34rem;
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.5;
  color: var(--ink-68);
  border-left: 2px solid var(--ink);
  padding-left: 0.9rem;
}
.ticket-status b { color: var(--ink); font-weight: 600; }