/* Leo the Legend: page layout for the landing page and the press page.
   Colors, type scale and spacing come from tokens.css; buttons, cards, chips, the band
   and the hills come from bundle.css (the design system's shared sheet). */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body { background: var(--sky); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; height: auto; }
p, h1, h2, h3, figure, ul { margin: 0; }
a { color: var(--ink-muted); }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible { outline: var(--outline-heavy) solid var(--focus-ring); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; top: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--surface); border-radius: var(--radius-chip); }
.skip:focus { left: var(--space-2); z-index: 10; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-4); }
.section { padding: var(--space-8) 0; }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.title { font-family: var(--font-display); font-weight: 900; letter-spacing: 0.01em; margin: 0; }
.hero-title { font-size: 60px; line-height: 64px; }
.section-title { font-size: 40px; line-height: 44px; }
.panel { background: var(--surface); border-radius: var(--radius-card); box-shadow: inset 0 0 0 var(--outline) var(--ink); padding: var(--space-5); }
.shot { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); box-shadow: inset 0 0 0 var(--outline) var(--ink); background: var(--surface); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Landing page */
.brand-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.brand-row img { width: 56px; height: 56px; border-radius: 12px; }
.brand-name { font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 30px; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; }
.hero-clip { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); box-shadow: inset 0 0 0 var(--outline) var(--ink), var(--shadow-card); background: var(--ink); }
.play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.hills-wrap { margin-top: -120px; position: relative; z-index: 0; }
.hills-wrap .leo-hills { height: 200px; }
.caption-eyebrow { display: block; margin-bottom: var(--space-1); }
.footer-hills { height: 160px; margin-top: var(--space-6); }
.leo-sticky-bar { display: none; }

/* Press page */
.press body, body.press { background: var(--surface); }
.topbar { background: var(--sky); padding: var(--space-4) 0; }
.topbar .wrap { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.topbar img { width: 40px; height: 40px; border-radius: 9px; }
.topbar .brand-name { font-size: 20px; line-height: 26px; }
.topbar .spacer { flex: 1; }
.press .wrap { max-width: 960px; }
.press .section { padding: var(--space-7) 0; border-top: 1px solid var(--line); }
.press main .section:first-child { border-top: 0; }
.page-title { font-size: 48px; line-height: 52px; }
.press .section-title { font-size: 32px; line-height: 36px; }
.copybox { background: var(--panel); border-radius: var(--radius-button); padding: var(--space-4) var(--space-5); white-space: pre-wrap; font-size: 17px; line-height: 26px; margin: 0; }
.facts { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 26px; }
.facts th, .facts td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--line); }
.facts th { width: 200px; font-weight: 700; color: var(--ink-muted); }
.facts td { overflow-wrap: anywhere; }
.press .shot { border-radius: var(--radius-button); background: var(--sky); }
.press .grid-3 { gap: var(--space-4); }
.cast .leo-card { padding: var(--space-4); }
.cast .leo-card > img { margin-bottom: var(--space-3); }
.files { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.filecard { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--panel); border-radius: var(--radius-button); color: var(--ink); text-decoration: none; font-weight: 700; }
.filecard img { width: 48px; height: 48px; border-radius: 10px; }
.press footer .wrap { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; }

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .section { padding: var(--space-7) 0; }
  .hero-title { font-size: 38px; line-height: 42px; }
  .section-title { font-size: 30px; line-height: 34px; }
  .page-title { font-size: 34px; line-height: 38px; }
  .press .section-title { font-size: 26px; line-height: 30px; }
  .press .section { padding: var(--space-6) 0; }
  .grid-4, .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .facts, .facts tbody, .facts tr, .facts th, .facts td { display: block; width: auto; }
  .facts tr { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  .facts th, .facts td { padding: 0; border-bottom: 0; }
  .facts th { margin-bottom: var(--space-1); }
  .hills-wrap { margin-top: -40px; }
  .actions .leo-btn { width: 100%; }
  .leo-sticky-bar { display: flex; position: sticky; bottom: 0; z-index: 5; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .leo-btn { transition: none; }
  .leo-btn-primary:hover, .leo-btn-primary:focus-visible { transform: none; }
}