/* Site-wide typography and motion tokens. Component dimensions stay in their own stylesheets. */
:root {
  --font-body: Arial, Helvetica, sans-serif;
  --font-display: Impact, 'Arial Black', sans-serif;
  --font-weight-body: 400;
  --font-weight-strong: 700;
  --font-weight-display: 900;
  --leading-body: 1.6;
  --leading-heading: .91;
  --tracking-heading: -.035em;
  --motion-feedback: 120ms;
  --motion-fast: 150ms;
  --motion-reveal: 300ms;
  --motion-rail: 1200ms;
  --ease-standard: ease;
  --ease-rail: cubic-bezier(.22, 1, .36, 1);
  --colour-paper: #fff8ee;
  --colour-berry: #5b1f33;
  --colour-olive: #4c5229;
  --colour-wood: #ac8150;
}
@media (prefers-reduced-motion: reduce) {
  :root { --motion-feedback: 0ms; --motion-fast: 0ms; --motion-reveal: 0ms; --motion-rail: 0ms; }
}

/*
 * One content frame; full-bleed surfaces.
 *
 * The standard header's 1440px outer frame and responsive gutters lead the
 * layout. The home page retains its existing 1530px first content frame.
 * These tokens are deliberately separate from component --wrap/--gutter names.
 */
:root {
  --site-gutter: 5vw;
  --site-content-max: calc(1440px - 2 * var(--site-gutter));
  --site-content-inset: max(var(--site-gutter), calc((100% - var(--site-content-max)) / 2));
}
@media (max-width: 600px) {
  :root { --site-gutter: 6vw; }
}
:root:has(.homepage-header) { --site-content-max: 1530px; }
:root:has(.wall-header) { --site-gutter: 40px; --site-content-max: 1240px; }
@media (max-width: 700px) {
  :root:has(.wall-header) { --site-gutter: 20px; }
}

@media screen {
  /*
   * Shells own their backgrounds. Never shrink their border boxes or replace
   * the body/html canvas with a content-width box. !important is confined to
   * frame geometry because legacy page styles load after the shared tokens.
   */
  body :where(.wrap, .content-wrap, .memory-heading, .memory-credit, .memory-film,
    .be-page, .be-section, .bt-page, .sale-strip, .homepage-header, .ticket-header,
    .engine-header, .shop-shell, .shop-footer, .account-shell, .ticket-shell,
    .ob-wrap:not(.ob-pay-card), main.page, .unsubscribe-header, .unsubscribe-main,
    .producer-wrap, .gw-shell, .wall-header, .wall-hero, .wall-barski, .wall-footer,
    body > main.editorial-page) {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: var(--site-content-inset) !important;
  }

  /* Inner frames already receive the outer shell's inset, exactly once. */
  body :is(.wrap, .content-wrap, .be-page, .be-section, .shop-shell, .account-shell)
    :is(.wrap, .content-wrap, .be-section, .bt-page) {
    width: 100% !important;
    padding-inline: 0 !important;
  }
  body .producer-intro { padding-inline: 0; }
  /* The festival photograph is full bleed; its copy is the inner frame. */
  body .festival-hero-couple { padding-inline: 0 !important; }
  body .festival-hero-couple .festival-hero-copy { padding-inline: var(--site-content-inset); }
  body .festival-hero-couple .festival-hero-media .festival-brand-lockup { left: var(--site-content-inset); }
  body .can-story { margin-inline: 0; }
  body :is(.calendar-heading, .calendar-days, .calendar-zone, .calendar-day,
    .calendar-detail, .contact-block, .account-state, .shop-checkout,
    .ob-faq-list, .sale-opening, .gw-card, .gw-bottom, .be-month-picker) { max-width: none !important; }
  body .calendar-days { margin-inline: 0; padding-inline: 0; }
  body.checkout-return-page .plain-hero { max-width: none; }
  body .ticket-check h1 { font-size: clamp(32px, 8vw, 80px); overflow-wrap: anywhere; }

  /* Media strips are inner frames, not the painted section surrounding them. */
  body :is(.memory-stage, .photo-track, .photo-credit) {
    box-sizing: border-box;
    width: calc(100% - 2 * var(--site-content-inset));
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }
  body :is(.wrap, .content-wrap) :is(.memory-stage, .photo-track, .photo-credit) {
    width: 100%;
  }
  body .chapter-copy, body .journey-controls {
    left: var(--site-content-inset);
    right: var(--site-content-inset);
  }
  body .journey-cta, body .barski-editorial .photo-caption {
    left: var(--site-content-inset);
  }

  /* Gift shells have their own stylesheet but share the same content frame. */
  body:has(.gift-sender-shell, .gift-showcase, .gift-receiver) > :is(.header, .footer) {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--site-content-inset);
  }
  body .gift-receiver :is(.ticket, .receiver-message) {
    width: 100%;
    max-width: none;
  }
  body .gift-receiver .receiver-message { padding-inline: 0; }
  body .gift-receiver .gift-claim {
    width: calc(100% - 2 * var(--site-content-inset));
    max-width: none;
    margin-inline: auto;
  }
  body .gift-receiver .message-card {
    width: calc(100% - 2 * var(--site-content-inset));
    max-width: none;
    margin-inline: auto;
    transform: none !important;
  }
  body.account-dashboard .ob-account-workspace .ob-photo-file { flex: 1 0 auto; }

  /* News is rendered without the ordinary site's body/box-sizing reset. */
  body:has(> main.editorial-page) { margin: 0; }
  body.shop-terms-page { margin: 0; display: flow-root; }
  body:has(> main.editorial-page) > header {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: var(--site-content-inset);
  }
  /* Native disclosure ink belongs inside its hit area, including open FAQs. */
  body summary { list-style-position: inside; }
  /* Keep the ticket music controls within their sidebar section at every size. */
  body .booking-music .music-controls {
    position: static;
    transform: none;
    flex-direction: row;
    justify-content: flex-start;
    height: auto;
    min-height: 44px;
    margin-top: 14px;
  }
}
@media screen and (min-width: 761px) and (orientation: portrait) {
  /* The TV header leads at the race panel's inner edge, on both sides. */
  body.mostwanted-page .mw-ticker { padding-right: calc(var(--u) * 3 + var(--inset)); }
}
@media screen and (max-width: 760px) {
  /* A 30px date badge needs a 15px half-width on both sides of its axis. */
  body .bt-timeline { --bt-axis: 15px; }
}
@media screen and (max-width: 699px) {
  body .festival-hero-couple .festival-hero-media .festival-brand-lockup {
    max-width: none;
    padding-inline: var(--site-content-inset);
  }
}