/* ─────────────────────────────────────────────────────────────
   LONG HAIR DON'T CARE — Shared page chrome
   One source of truth for the base reset, scroll/reveal motion,
   typography guards, nav/footer overrides and mobile hardening.
   Load AFTER styles.css and BEFORE any page-level <style>.
───────────────────────────────────────────────────────────── */

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body { background: #0C0A05; color: #fff; font-family: "Abel", sans-serif; overflow-x: hidden; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #0C0A05; }
::-webkit-scrollbar-thumb { background: #32454F; border-radius: 2px; }

/* ── Reveal-on-scroll ──
   Content is visible by default; the hidden entrance state only
   exists when the visitor allows motion, so reduced-motion users
   never meet an opacity-0 page. `.settled` is added after the
   entrance finishes so will-change doesn't pin layers forever. */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0; transform: translateY(20px); will-change: transform, opacity;
    transition: opacity 0.6s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                transform 0.6s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
  }
  .reveal.visible { opacity: 1; transform: none; }
  .reveal.settled { will-change: auto; }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  .reveal-delay-4 { transition-delay: 0.4s; }
}

/* ── Typography guards ── */
p, li, blockquote { text-wrap: pretty; orphans: 2; widows: 2; }
p, blockquote { max-width: 48ch; margin-left: auto; margin-right: auto; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

/* Bethany Elingston ships a single 400 weight — the token sheet's 600 on
   headings triggers browser faux-bold, so h1/h2 render heavier than the
   same face elsewhere (hero wordmark, logline, card titles). Pin the real
   weight and forbid synthesis so all display type matches the landing. */
h1, h2, h3, h4, h5, h6 { font-weight: 400; font-synthesis: none; }

/* ── Links ── */
a { color: #7FADC6; }
a:hover { color: #a7cbdd; }
a.card-link { text-decoration: none; color: inherit; display: block; }
.credit-link { color: inherit; text-decoration: none; transition: color 0.3s ease; }
.credit-link:hover { color: #7FADC6; }

/* ── Interior-page body column (Synopsis and the statement pages) ── */
.synopsis-body p { font-family: "Abel", sans-serif; font-size: 19px; line-height: 1.85; color: rgba(255,255,255,0.74); margin-bottom: 30px; }
.synopsis-body p:last-child { margin-bottom: 0; }
.synopsis-body p.lede::first-letter {
  font-family: "Bethany Elingston", serif;
  float: left; font-size: 86px; line-height: 0.72; padding: 8px 14px 0 0;
  color: #7FADC6;
}
.synopsis-body p.final { color: rgba(255,255,255,0.92); }

.director-signoff { margin-top: 4px !important; }
.director-photo {
  position: absolute; right: -150px; bottom: -56px; width: 280px;
  transform: rotate(15deg); background: #fff; padding: 11px 11px 11px;
  box-shadow: 7px 11px 26px rgba(0,0,0,0.45); border-radius: 2px; z-index: 3;
}
.director-photo img { width: 100%; display: block; }
@media (max-width: 1180px) {
  .director-photo { position: static; right: auto; bottom: auto; margin: 64px auto 0; }
}

/* ── Nav: hamburger only on mobile; center links only on desktop ── */
nav > button { display: none !important; }
@media (max-width: 820px) {
  nav > div { display: none !important; }
  nav > button { display: flex !important; }
}

/* ── Buttons: shrink all design-system buttons by 20% (overrides runtime-injected sizes) ── */
.lhdc-btn-sm { padding: 6.4px 16px !important; font-size: 8px !important; }
.lhdc-btn-md { padding: 9.6px 22.4px !important; font-size: 8.8px !important; }
.lhdc-btn-lg { padding: 12.8px 30.4px !important; font-size: 10.4px !important; }

/* Reserve border space so :hover border doesn't grow the box */
.lhdc-btn-secondary, .lhdc-btn-ghost { border: 1px solid transparent !important; box-sizing: border-box !important; }

/* ── Footer ── */
footer img { height: 40px !important; margin-bottom: 9px !important; margin-left: 0 !important; }
footer p[data-lhdc-subline] { font-family: Abel, sans-serif; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin: 0 0 16px !important; }
footer hr[data-lhdc-divider] { border: none; border-top: 1px solid rgba(255,255,255,0.08); width: 100%; max-width: 280px; margin: 0 0 20px; }
/* Copyright line — left-align to logo/tagline (global auto-margin p rule would center it) */
footer > div > div:last-child p { margin-left: 0 !important; margin-right: 0 !important; }

/* ── Nav logo: 15% larger on desktop only ── */
@media (min-width: 761px) {
  nav img { height: 31px !important; }
}

/* ── Mobile hardening ── */
@media (max-width: 760px) {
  h1, h2, h3, h4, h5, h6, p, li, blockquote, span, div { text-wrap: pretty; orphans: 2; widows: 2; }
  /* Hamburger: distance from top == distance from the right edge (44px hit box, 18px icon) */
  nav > button:last-of-type { top: 18px !important; right: 14px !important; transform: none !important; }
  /* Footer 3-col → two columns */
  footer > div > div:first-child { grid-template-columns: repeat(2, 1fr) !important; gap: 36px !important; }
}

/* ── A11y (design audit 2026-09) ─────────────────────────────── */
/* Visible keyboard focus everywhere; mouse clicks stay ring-free */
:focus-visible { outline: 2px solid #7FADC6 !important; outline-offset: 3px; }
/* Large buttons clear the 44px touch-target minimum */
.lhdc-btn-lg { min-height: 44px !important; }