/* Layout: full-width bands in a centred 1080px column, alternating pale sky with ocean-blue and teal bands.
   Palette: Southern California coast. Sunset coral is the one loud thing (buttons). */
:root {
  --bg: #EEF8FA;          /* pale sky */
  --fg: #0D3B4A;          /* deep ocean ink */
  --muted: #3F6470;
  --sea: #08626E;         /* teal, text accents */
  --rule: #0E8A96;        /* section dividers */
  --sun: #C8401F;         /* sunset coral: buttons */
  --on-sun: #FFFFFF;
  --line: #BFDDE3;
  --hero-bg: linear-gradient(180deg, #A6DDEE 0%, #C4EAF3 50%, #EEF8FA 100%);
  --ocean: #0B5470;       /* ocean-blue band */
  --teal: #3CC8E6;          /* bright Caribbean turquoise */        /* teal band */
  --on-dark: #F4FBFC; --on-dark-muted: #CDE8EC; --on-dark-accent: #9BE7EC; --on-dark-rule: #FF9A7A; --on-dark-line: #2F7489;
  --slate-bg: #0D3B4A; --slate-fg: #F4FBFC; --slate-label: #FF9A7A;
  --display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --body: 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0B2530; --fg: #F3F8F8; --muted: #A9C3C6; --sea: #5CCFD6; --rule: #3BB8C2;
    --sun: #C8401F; --on-sun: #FFFFFF; --line: #1E4A57;
    --hero-bg: linear-gradient(180deg, #145A70 0%, #0F3B4B 55%, #0B2530 100%);
    --ocean: #0E4560; --teal: #3CC8E6; --slate-bg: #071C24; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0B2530; --fg: #F3F8F8; --muted: #A9C3C6; --sea: #5CCFD6; --rule: #3BB8C2;
  --sun: #C8401F; --on-sun: #FFFFFF; --line: #1E4A57;
  --hero-bg: linear-gradient(180deg, #145A70 0%, #0F3B4B 55%, #0B2530 100%);
  --ocean: #0E4560; --teal: #3CC8E6; --slate-bg: #071C24; color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 1.0625rem/1.65 var(--body); }
a { color: var(--sea); text-underline-offset: 3px; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }
.wrap { max-width: 1080px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 760px; }
.band { padding-block: clamp(48px, 8vw, 96px); }
.hero, .page-head { background: var(--hero-bg); }
/* Dark bands re-point the tokens, so everything inside picks up light-on-dark colours. */
.band-alt { --fg: var(--on-dark); --muted: var(--on-dark-muted); --sea: var(--on-dark-accent); --rule: var(--on-dark-rule); --line: var(--on-dark-line); color: var(--fg); background: var(--ocean); }
h1, h2, h3, .display { font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.05; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7vw, 5rem); }
.display { font-size: clamp(2.4rem, 6vw, 4.2rem); color: var(--sea); }
.h2 { font-size: clamp(1.6rem, 3.2vw, 2.2rem); }
.h3 { font-size: 1.25rem; letter-spacing: 0.03em; }
p { margin: 0 0 1em; max-width: 65ch; }
.eyebrow { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.85rem; color: var(--sea); margin-bottom: 1rem; }
.lede { font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.5; }
.tagline { font-size: 1.2rem; font-style: italic; color: var(--muted); }
.meta { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95rem; color: var(--muted); }
.role { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; color: var(--sea); margin-bottom: 0.6em; }

/* Header and footer */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 18px; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: 1.4rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg); text-decoration: none; }
.wordmark span { color: var(--sea); }
.nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.nav a { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9rem; color: var(--muted); text-decoration: none; padding-block: 4px; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--fg); }
.nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--sun); }
.site-footer { border-top: 1px solid var(--line); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-block: 28px; color: var(--muted); font-size: 0.95rem; }
.site-footer p { margin: 0; }

/* Buttons */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn { display: inline-block; font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 1rem; text-decoration: none; padding: 12px 22px; border: 2px solid var(--sun); transition: background-color .15s, color .15s; }
.btn-solid { background: var(--sun); color: var(--on-sun); }
.btn-solid:hover { background: transparent; color: var(--sea); }
.btn-line { color: var(--sea); }
.btn-line:hover { background: var(--sun); color: var(--on-sun); }

/* Hero and slate */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero-copy { min-width: 0; }
.slate { background: var(--slate-bg); color: var(--slate-fg); border: 3px solid var(--slate-fg); max-width: 420px; width: 100%; justify-self: end; transform: rotate(-1.5deg); margin-top: 76px; }
/* The clapper sticks tilt up about 70px above the slate's box, so the margin keeps them clear of anything above. */
.slate-sticks { height: 44px; background: repeating-linear-gradient(-45deg, var(--slate-fg) 0 22px, var(--slate-bg) 22px 44px); transform-origin: left bottom; transform: rotate(-8deg) translateY(-6px); border: 3px solid var(--slate-fg); margin: -3px -3px 0; }
.slate-body { display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 0; }
.slate-row { padding: 10px 12px; border-right: 2px solid var(--slate-fg); border-bottom: 2px solid var(--slate-fg); min-width: 0; }
.slate-row.wide { grid-column: 1 / -1; border-right: 0; }
.slate-row:nth-child(4) { border-right: 0; }
.slate-row:last-child { border-bottom: 0; }
.slate dt { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.72rem; color: var(--slate-label); }
.slate dd { margin: 0; font-family: var(--display); text-transform: uppercase; font-size: 1.35rem; line-height: 1.2; }
@media (prefers-reduced-motion: no-preference) {
  .slate-sticks { animation: clap 0.9s 0.3s ease-out both; }
  @keyframes clap { 0% { transform: rotate(-8deg) translateY(-6px); } 55% { transform: rotate(0) translateY(0); } 100% { transform: rotate(-8deg) translateY(-6px); } }
}

/* Grids */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.trio article { border-top: 3px solid var(--rule); padding-top: 18px; }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; }
.feature { text-align: left; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.steps li { position: relative; }
.step-n { display: block; font-family: var(--display); font-size: 3rem; line-height: 1; color: var(--sea); margin-bottom: 10px; }
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.person { border-top: 3px solid var(--rule); padding-top: 18px; }
.cast { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 32px 40px; }
.cast li { border-top: 1px solid var(--line); padding-top: 16px; }
.cast .h3 { margin-bottom: 0.2em; }
.episodes { list-style: none; padding: 0; margin: 0; }
.episodes li { display: flex; gap: 16px; align-items: baseline; padding-block: 12px; border-bottom: 1px solid var(--line); font-family: var(--display); text-transform: uppercase; font-size: 1.2rem; letter-spacing: 0.03em; }
.episodes span { font-size: 0.8rem; letter-spacing: 0.14em; color: var(--sea); min-width: 52px; font-variant-numeric: tabular-nums; }
.promise { font-family: var(--display); text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1.3; }
.contacts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 48px; }
.contacts dt { font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9rem; color: var(--muted); margin-bottom: 4px; }
.contacts dd { margin: 0; font-size: 1.2rem; overflow-wrap: anywhere; }
.mail { overflow-wrap: anywhere; }

@media (max-width: 820px) {
  .hero-grid, .two-col, .trio, .people, .contacts { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slate { justify-self: start; }
}
@media (max-width: 460px) { .steps { grid-template-columns: minmax(0, 1fr); } }