/* ================================================================
   BANO STUDIOS — D03 THEME (base tokens + chrome)
   Ported verbatim from Website Resources/BANO STUDIOS/d03-site/shared/d03.css
   Loaded by every D03-styled page alongside optional per-page CSS in
   assets/css/pages/*.css (via the $pageCSSFile convention).
   Parallel to assets/css/main.css during the port — pages pick which to load.
   ================================================================ */

/* D03 — Brutalist Grotesk · Shared CSS for entire D03 site */

:root {
  --d03-red: #e63946;       /* brand red — for buttons, dividers, large headings */
  --d03-red-text: #c01a26;  /* darker red — for small body text on light bg (passes WCAG AA 4.5:1) */
  --d03-ink: #0a0a0a;
  --d03-paper: #f2f1ec;
  --d03-paper2: #e8e6df;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; width: 100%; }
body {
  background: var(--d03-paper);
  color: var(--d03-ink);
  font-family: 'Space Grotesk', ui-sans-serif, sans-serif;
  -webkit-font-smoothing: antialiased;
  max-width: 100vw;
}

img { display: block; max-width: 100%; }

/* Typography */
.d03-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.d03-red { color: var(--d03-red); }
/* WCAG AA: small red mono text on LIGHT bg uses the darker variant (passes 4.5:1).
   Also covers .d03-red descendants of .d03-mono (e.g. <span class="d03-red"> inside a mono div). */
.d03-mono.d03-red, .d03-red.d03-mono,
.d03-mono .d03-red { color: var(--d03-red-text); }
/* On DARK bg the darker variant fails; revert to brand red which passes 4.5:1 against ink */
.d03-bg-ink .d03-mono.d03-red,
.feat-event.dark .d03-mono.d03-red,
.d03-bg-ink .d03-red.d03-mono,
.feat-event.dark .d03-red.d03-mono,
.d03-bg-ink .d03-mono .d03-red,
.feat-event.dark .d03-mono .d03-red { color: var(--d03-red); }
.d03-bg-red { background: var(--d03-red); color: #fff; }
.d03-bg-ink { background: var(--d03-ink); color: var(--d03-paper); }
.d03-bg-paper { background: var(--d03-paper); color: var(--d03-ink); }

.d03-title { font-weight: 700; letter-spacing: -0.05em; line-height: 0.88; }
.d03-h1 { font-size: clamp(56px, 14vw, 220px); }
.d03-h2 { font-size: clamp(40px, 8vw, 128px); line-height: 0.9; letter-spacing: -0.04em; font-weight: 700; }
.d03-h3 { font-size: clamp(32px, 5vw, 72px); line-height: 0.95; letter-spacing: -0.03em; font-weight: 700; }
.d03-h4 { font-size: clamp(22px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -0.02em; font-weight: 700; }

.d03-wrap { max-width: 1440px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
.d03-border { border-color: var(--d03-ink); }
.d03-chip {
  border: 1.5px solid var(--d03-ink);
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', monospace;
  display: inline-block;
  background: transparent;
}
.d03-chip-red { border-color: var(--d03-red); color: var(--d03-red); }
.d03-chip-solid { background: var(--d03-ink); color: var(--d03-paper); }

/* Shared links/buttons */
.d03-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 12px 22px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  border: 2px solid var(--d03-ink);
  background: transparent;
  color: var(--d03-ink);
  text-decoration: none;
  transition: all .15s ease;
}
.d03-btn:hover { background: var(--d03-ink); color: var(--d03-paper); }
.d03-btn.solid { background: var(--d03-ink); color: var(--d03-paper); }
.d03-btn.solid:hover { background: var(--d03-red); border-color: var(--d03-red); }
.d03-btn.red { background: var(--d03-red); border-color: var(--d03-red); color: #fff; }
.d03-btn.red:hover { background: var(--d03-ink); border-color: var(--d03-ink); }
.d03-btn.ghost-light { border-color: #fff; color: #fff; }
.d03-btn.ghost-light:hover { background: #fff; color: var(--d03-ink); }

/* Marquee */
.d03-marquee-wrap { overflow: hidden; }
.d03-marquee { display: flex; gap: 40px; white-space: nowrap; animation: d03m 40s linear infinite; }
@keyframes d03m { to { transform: translateX(-50%); } }

/* Header / Nav */
.d03-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--d03-paper);
  border-bottom: 2px solid var(--d03-ink);
}
.d03-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px clamp(20px, 5vw, 56px);
  gap: 16px;
}
.d03-brand {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
}
.d03-brand img { height: 34px; width: auto; }
.d03-brand-name { font-size: 20px; font-weight: 800; letter-spacing: -0.03em; }
.d03-nav {
  display: flex; gap: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.d03-nav a {
  padding: 8px 12px;
  text-decoration: none;
  color: var(--d03-ink);
  border: 1.5px solid transparent;
  transition: all .12s;
}
.d03-nav a:hover { border-color: var(--d03-ink); }
.d03-nav a.active { background: var(--d03-ink); color: var(--d03-paper); }
.d03-header-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 10px 18px;
  background: var(--d03-ink);
  color: var(--d03-paper);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
  border: 2px solid var(--d03-ink);
  transition: all .12s;
}
.d03-header-cta:hover { background: var(--d03-red); border-color: var(--d03-red); }

.d03-mobile-toggle {
  display: none;
  background: transparent;
  border: 2px solid var(--d03-ink);
  padding: 8px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  cursor: pointer;
}

.d03-mobile-menu {
  display: none;
  border-top: 2px solid var(--d03-ink);
  background: var(--d03-paper);
  padding: 20px clamp(20px, 5vw, 56px) 24px;
  flex-direction: column;
  gap: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.d03-mobile-menu a {
  padding: 14px 0;
  border-bottom: 1px solid #0a0a0a22;
  color: var(--d03-ink);
  text-decoration: none;
  display: flex; justify-content: space-between;
}
.d03-mobile-menu a:last-child { border-bottom: none; }
.d03-mobile-menu a.active { color: var(--d03-red); }
.d03-header.open .d03-mobile-menu { display: flex; }

/* Footer */
.d03-footer {
  border-top: 2px solid var(--d03-ink);
  background: var(--d03-ink);
  color: var(--d03-paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
}
.d03-footer-top {
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 56px);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  border-bottom: 1px solid #ffffff22;
}
.d03-footer h3, .d03-footer h4 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 24px;
  color: var(--d03-red);
}
.d03-footer ul { list-style: none; margin: 0; padding: 0; }
.d03-footer ul li { margin-bottom: 10px; }
.d03-footer a { color: var(--d03-paper); text-decoration: none; transition: color .12s; }
.d03-footer a:hover { color: var(--d03-red); }
.d03-footer .brand-blurb {
  font-size: 11px;
  line-height: 1.7;
  opacity: 0.8;
  max-width: 340px;
}
.d03-footer-bottom {
  padding: 24px clamp(20px, 5vw, 56px);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 11px;
}
.d03-footer-bottom .links { display: flex; gap: 24px; }

/* Page hero (shared pattern for interior pages) */
.d03-page-hero {
  border-bottom: 2px solid var(--d03-ink);
  padding: clamp(56px, 9vw, 120px) clamp(20px, 5vw, 56px) clamp(48px, 7vw, 96px);
}
.d03-page-hero .eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--d03-red);
  margin-bottom: 24px;
}
.d03-page-hero h1 {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.88;
  font-size: clamp(56px, 12vw, 180px);
  margin: 0 0 32px;
  max-width: 1100px;
}
.d03-page-hero .lead {
  max-width: 640px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}

/* Mini stats bar for page heroes */
.d03-stat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--d03-ink);
  border-bottom: 2px solid var(--d03-ink);
  background: var(--d03-ink);
  color: var(--d03-paper);
}
.d03-stat-bar > div {
  padding: clamp(24px, 3vw, 40px);
  border-right: 1px solid #ffffff22;
}
.d03-stat-bar > div:last-child { border-right: none; }
.d03-stat-bar .num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.9;
}
.d03-stat-bar .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-top: 14px;
  opacity: 0.75;
}

/* Card grid utilities */
.d03-card {
  border: 2px solid var(--d03-ink);
  background: var(--d03-paper);
  padding: clamp(24px, 3vw, 40px);
}

/* Section header pattern */
.d03-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: clamp(32px, 5vw, 56px);
}
.d03-section-header .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.65;
}

/* Two-column with rule */
.d03-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 2px solid var(--d03-ink);
  border-bottom: 2px solid var(--d03-ink);
}
.d03-two-col > div {
  padding: clamp(32px, 5vw, 72px) clamp(20px, 4vw, 48px);
}
.d03-two-col > div + div {
  border-left: 2px solid var(--d03-ink);
}

/* Responsive */
@media (max-width: 900px) {
  .d03-nav { display: none; }
  .d03-header-cta { display: none; }
  .d03-mobile-toggle { display: inline-flex; }

  .d03-footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .d03-stat-bar { grid-template-columns: 1fr 1fr; }
  .d03-stat-bar > div { border-right: none; border-bottom: 1px solid #ffffff22; }
  .d03-stat-bar > div:nth-child(2n) { border-right: none; }
  .d03-stat-bar > div:nth-child(2) { border-left: 1px solid #ffffff22; }

  .d03-two-col { grid-template-columns: 1fr; }
  .d03-two-col > div + div { border-left: none; border-top: 2px solid var(--d03-ink); }
}

@media (max-width: 600px) {
  .d03-footer-top { grid-template-columns: 1fr; }
  .d03-stat-bar { grid-template-columns: 1fr; }
  .d03-stat-bar > div { border-bottom: 1px solid #ffffff22; border-left: none !important; }
  .d03-stat-bar > div:last-child { border-bottom: none; }

  .d03-page-hero h1 { font-size: clamp(44px, 13vw, 96px); }
  .d03-section-header { align-items: flex-start; flex-direction: column; }
  .d03-header-inner { padding: 14px 18px; }
  .d03-brand img { height: 28px; }
  .d03-brand-name { font-size: 17px; }
}
/* ================================================================
   SCROLL-TRIGGERED ANIMATIONS
   Each [data-animate] element starts hidden + offset; gets .is-visible
   added by IntersectionObserver when it scrolls into view. Once-only.
   ================================================================ */

[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1),
              transform .7s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
[data-animate="slide-left"]  { transform: translateX(-32px); }
[data-animate="slide-right"] { transform: translateX(32px); }

/* On mobile, sections stack vertically, so horizontal slide-in just causes
   off-screen overflow (visible left/right clipping before observer fires).
   Fall back to the default upward translate on small viewports. */
@media (max-width: 900px) {
  [data-animate="slide-left"],
  [data-animate="slide-right"] { transform: translateY(24px); }
}

[data-animate].is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Stagger delays */
[data-animate-delay="1"] { transition-delay: 80ms; }
[data-animate-delay="2"] { transition-delay: 160ms; }
[data-animate-delay="3"] { transition-delay: 240ms; }
[data-animate-delay="4"] { transition-delay: 320ms; }
[data-animate-delay="5"] { transition-delay: 400ms; }
[data-animate-delay="6"] { transition-delay: 480ms; }
[data-animate-delay="7"] { transition-delay: 560ms; }
[data-animate-delay="8"] { transition-delay: 640ms; }

/* Tabular numerals on stat counters so digits don't shift width while animating */
[data-counter] { font-variant-numeric: tabular-nums; }

/* Equipment-list row stagger uses a smaller step */
.d03-equip-list > div[data-animate] {
  transition: opacity .5s cubic-bezier(.2,.8,.2,1),
              transform .5s cubic-bezier(.2,.8,.2,1);
}
.d03-equip-list > div[data-animate-delay="1"]  { transition-delay: 40ms; }
.d03-equip-list > div[data-animate-delay="2"]  { transition-delay: 80ms; }
.d03-equip-list > div[data-animate-delay="3"]  { transition-delay: 120ms; }
.d03-equip-list > div[data-animate-delay="4"]  { transition-delay: 160ms; }
.d03-equip-list > div[data-animate-delay="5"]  { transition-delay: 200ms; }
.d03-equip-list > div[data-animate-delay="6"]  { transition-delay: 240ms; }
.d03-equip-list > div[data-animate-delay="7"]  { transition-delay: 280ms; }
.d03-equip-list > div[data-animate-delay="8"]  { transition-delay: 320ms; }
.d03-equip-list > div[data-animate-delay="9"]  { transition-delay: 360ms; }
.d03-equip-list > div[data-animate-delay="10"] { transition-delay: 400ms; }
.d03-equip-list > div[data-animate-delay="11"] { transition-delay: 440ms; }
.d03-equip-list > div[data-animate-delay="12"] { transition-delay: 480ms; }

/* ================================================================
   REDUCED-MOTION FALLBACK
   Users who set prefers-reduced-motion at the OS level get NO animations.
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-animate].is-visible,
  [data-animate="slide-left"],
  [data-animate="slide-right"] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .d03-film-img-wrap img,
  .d03-film-landscape img {
    filter: grayscale(0);
    transition: none;
  }
  .d03-marquee {
    animation: none;
  }
}

/* Hide the floating reCAPTCHA v3 badge.
   Per Google's terms, we MUST surface the equivalent attribution wherever
   reCAPTCHA runs — see getRecaptchaNotice() in includes/functions.php,
   rendered next to each form. Hiding the badge also eliminates a Lighthouse
   Best-Practices console error about CSP frame-ancestors. */
.grecaptcha-badge { visibility: hidden !important; }