/* CurioBeyond Studios website stylesheet.
   Palette and type follow the locked brand identity (build prompt, section 4).
   Text is navy or ink on white or mist, or white on navy. Teal and green are
   fills and shapes only, never text. No reserved program color. No gradients. No shadows. */

@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/oswald-500.woff2") format("woff2");
}
@font-face {
  font-family: "Oswald";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/oswald-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-600.woff2") format("woff2");
}

:root {
  --white: #FFFFFF;
  --mist: #F5F6F8;
  --navy: #0B1220;
  --ink: #181818;
  --slate: #2A484E;
  --teal: #1EA6AE;
  --green: #3FC77A;
  --pale: #CAD7E7;

  --font-display: "Oswald", "Arial Narrow", Arial, sans-serif;
  --font-body: "Inter", Arial, Helvetica, sans-serif;

  --gutter: 16px;
  --measure: 42rem;

  /* Lockup: 320px wide on a phone, 360px from 768px up. Clear space on every
     side equals the height of the C in the eye mark, which is 0.142 of the
     lockup width (measured from the master file). */
  --lockup-width: 320px;
  --lockup-clear: calc(var(--lockup-width) * 0.142);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: auto;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 1.125rem; /* 18px */
  line-height: 1.55;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--teal);
}
a:hover {
  text-decoration-color: var(--green);
}

/* Visible focus for every interactive element. Navy on white, white on navy. */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
.statement :focus-visible,
.site-footer :focus-visible,
.series-panel :focus-visible {
  outline-color: var(--white);
}

h1,
h2,
.footer-display {
  font-family: var(--font-display);
  margin: 0;
}
h1 {
  font-weight: 600;
  line-height: 1;
}
h2 {
  font-weight: 500;
}
h3,
p,
ul,
ol {
  margin: 0;
}

/* Skip link: visible only when focused. */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  padding: 12px 20px;
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  min-height: 44px;
}
.skip-link:focus {
  top: 8px;
}

/* Buttons: navy fill, white text, 44px minimum touch target. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.0625rem;
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.button:hover {
  background: var(--slate);
}

/* Label box: navy text on a flat Signal Green box. */
.label-box {
  display: inline-block;
  padding: 6px 12px;
  background: var(--green);
  color: var(--navy);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.3;
}

/* Header: the lockup on flat white with its clear space. */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lockup-clear);
  background: var(--white);
  padding: 0 max(var(--gutter), calc((100vw - var(--lockup-width)) / 2 - 1px));
}
@media (min-width: 420px) {
  .site-header {
    padding: 0 var(--gutter);
  }
}
.lockup-link {
  display: block;
  padding: var(--lockup-clear) 0;
  text-decoration: none;
}
.lockup {
  width: var(--lockup-width);
  height: auto;
}
.site-nav {
  display: flex;
  gap: 8px 24px;
  flex-wrap: wrap;
  padding-bottom: var(--lockup-clear);
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 500;
}
@media (min-width: 768px) {
  :root {
    --lockup-width: 360px;
  }
  .site-header {
    padding: 0 32px;
  }
  .site-nav {
    padding-bottom: 0;
  }
}

/* Dev build marker for slots with no copy. Never in a production build. */
.dev-copy-needed {
  margin: 0 var(--gutter) 16px;
  padding: 12px 16px;
  background: #FF5A44;
  color: var(--navy);
  font-weight: 600;
}

/* ---------- Home: hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
  background: var(--white);
}
.hero-text {
  position: relative;
  z-index: 1;
  padding: 24px var(--gutter) 40px;
  max-width: 1400px;
}
.hero h1 {
  /* 8vw at the widest (was 9.4vw): smaller so the hero button shows above the
     fold on a common laptop screen (Dan, 2026-10-03; Kodi's option A). */
  font-size: clamp(2.75rem, 8vw, 8.75rem);
  line-height: 0.98;
  color: var(--navy);
  max-width: 14ch;
}
.hero-sub {
  margin-top: 28px;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  font-weight: 500;
  color: var(--ink);
  max-width: 40rem;
  /* Even line breaks for the sub line; the series titles carry non-breaking
     spaces in the markup so a title never splits (Kodi, 2026-10-03). Not balance. */
  text-wrap: pretty;
}
.hero-text .button {
  margin-top: 28px;
}
/* The shapes live in their own band under the text, so no shape ever sits
   under the headline. CSS holds the final state; the script sets the start
   state and plays the wipe into this state once, on a timer, when the band
   comes into view. Nothing is pinned to the scroll. */
.hero-shapes {
  position: relative;
  z-index: 0;
  height: 32vh;
  min-height: 180px;
  pointer-events: none;
}
.shape {
  position: absolute;
}
.shape-teal {
  right: 0;
  bottom: 0;
  width: 58%;
  height: 100%;
  background: var(--teal);
  clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%);
}
.shape-green {
  left: 0;
  bottom: 22%;
  width: 40%;
  height: 20%;
  background: var(--green);
}
.shape-pale {
  left: 9%;
  bottom: 56%;
  width: 24%;
  height: 11%;
  background: var(--pale);
}
@media (min-width: 768px) {
  .hero-text {
    padding: 32px 32px 56px;
  }
  .hero-shapes {
    height: 34vh;
  }
}
@media (min-width: 1200px) {
  .hero-text {
    padding: 40px 48px 64px;
  }
}
/* Short screens (Dan, 2026-10-03: the hero button must show without scrolling on
   a common laptop). At 900px tall and below the headline also scales with the
   height (12vh), so a 1366x768 or 1280x720 laptop fits the button above the
   fold; wider and taller screens keep the 8vw size. At 800px and below the two
   gaps above the button close a little as well. Wording unchanged. */
@media (max-height: 900px) {
  .hero h1 {
    font-size: clamp(2.75rem, min(8vw, 12vh), 8.75rem);
  }
}
@media (max-height: 800px) and (min-width: 768px) {
  .hero-text {
    padding-top: 24px;
  }
  .hero-text .button {
    margin-top: 20px;
  }
}

/* ---------- Home: statement (gated, exists only when EPISODE_ONE_LIVE is true) ---------- */
.statement {
  background: var(--navy);
  color: var(--white);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: 64px var(--gutter);
}
.statement-inner {
  max-width: 1400px;
}
.beat {
  font-size: clamp(2.25rem, 7.5vw, 6.5rem);
  font-weight: 600;
  line-height: 1.05;
  color: var(--white);
  /* Balanced wrapping so a beat never leaves one word alone on its last line
     (Kodi F1, 2026-10-02). The markup also carries a non-breaking space before
     the last word of each beat for browsers that ignore this property. */
  text-wrap: balance;
}
.beat + .beat {
  margin-top: 0.35em;
}
.statement-anchor {
  margin-top: 40px;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  font-weight: 500;
}
.statement-anchor a {
  text-decoration-color: var(--green);
}
@media (min-width: 768px) {
  .statement {
    padding: 80px 32px;
  }
}

/* ---------- Home: series ---------- */
.series {
  padding: 64px var(--gutter) 80px;
  background: var(--mist);
}
.series h2 {
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin-bottom: 32px;
}
.series-grid {
  display: grid;
  gap: 24px;
  max-width: 1400px;
}
.series-card {
  position: relative;
  overflow: hidden;
  background: var(--white);
  min-height: 360px;
  display: flex;
}
.series-body {
  position: relative;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.series-title {
  font-size: 1.875rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--navy);
}
.series-subtitle {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--navy);
}
.series-line {
  color: var(--ink);
}
/* Card description (Kodi's spec, 2026-10-03): body type, sentence case, 16px,
   weight 400, line-height 1.5, ink on white, about 30rem wide at most, balanced
   line breaks (text-wrap: balance, with pretty as the fallback) so no lone word
   sits on the last line, always in plain view. It sits 8px under the
   sub-headline; every other gap stays 16px. */
.series-description {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  max-width: 30rem;
  text-wrap: pretty;
  text-wrap: balance;
}
.series-subtitle + .series-description {
  margin-top: -8px;
}
.series-status {
  margin-top: auto;
}
.series-body .button {
  align-self: flex-start;
}
/* The navy panel slides up on hover, keyboard focus, or a tap. It only
   exists in the markup when the series has both a question and an answer. */
.series-panel {
  position: absolute;
  inset: 0;
  background: var(--navy);
  color: var(--white);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Parked one extra pixel below the card: at a fractional card height, exactly
     100% could leave a hairline of the navy panel showing along the card's bottom
     edge (Kodi's note 4b, 2026-10-03). */
  transform: translateY(calc(100% + 1px));
  transition: transform 0.35s ease;
  overflow: auto;
}
.series-card:hover .series-panel,
.series-card:focus-within .series-panel,
.series-card.is-open .series-panel {
  transform: translateY(0);
}
.panel-label {
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.panel-text {
  font-size: 1.125rem;
  margin-bottom: 12px;
}
@media (min-width: 768px) {
  .series {
    padding: 80px 32px 96px;
  }
  .series-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
  .series-body,
  .series-panel {
    padding: 40px 32px;
  }
}
@media (min-width: 1200px) {
  .series {
    padding: 96px 48px 112px;
  }
}

/* ---------- Home: email sign-up (exists only when EMAIL_SIGNUP_LIVE is true) ---------- */
.signup {
  padding: 64px var(--gutter);
  max-width: var(--measure);
}
.signup h2 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  margin-bottom: 12px;
}
.signup-form {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}
.signup-form label {
  font-weight: 600;
}
.signup-form input {
  min-height: 48px;
  padding: 10px 14px;
  font: inherit;
  border: 2px solid var(--navy);
  background: var(--white);
  color: var(--navy);
}
.signup-consent {
  font-size: 1rem;
}

/* ---------- Text pages (legal, disclosure, sources, 404) ---------- */
.text-page {
  max-width: var(--measure);
  padding: 32px var(--gutter) 80px;
  color: var(--navy);
}
.text-page h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 24px;
}
.text-page h2 {
  font-size: 1.5rem; /* 24px, never below 20px */
  margin-top: 40px;
  margin-bottom: 12px;
  line-height: 1.2;
}
.text-page p,
.text-page ul,
.text-page ol {
  margin-bottom: 18px;
}
.text-page li {
  margin-bottom: 8px;
}
.text-page ul,
.text-page ol {
  padding-left: 1.4em;
}
/* A bare policy link (the YouTube and Google addresses) is one long word; let it
   wrap so the page never scrolls sideways on a 320px screen. */
.text-page a {
  overflow-wrap: anywhere;
}
.sources-label {
  font-weight: 600;
}
.source-list li {
  margin-bottom: 14px;
}
.episode-sources {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 4px solid var(--teal);
}
@media (min-width: 768px) {
  .text-page {
    padding: 48px 32px 96px;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy);
  color: var(--white);
  padding: 64px var(--gutter) 40px;
}
.footer-display {
  font-weight: 600;
  font-size: clamp(3rem, 12.5vw, 11rem);
  line-height: 0.95;
  color: var(--white);
  overflow-wrap: anywhere;
}
.social-links {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
}
.social-links li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
}
.social-label {
  font-weight: 600;
}
.social-links a,
.footer-contact a,
.footer-nav a {
  color: var(--white);
  text-decoration-color: var(--green);
}
.social-links a:hover,
.footer-contact a:hover,
.footer-nav a:hover {
  text-decoration-color: var(--teal);
}
.footer-brand {
  margin-top: 32px;
  font-weight: 600;
}
.footer-contact {
  margin-top: 8px;
}
.footer-legal {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 2px solid var(--teal);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  font-size: 1rem;
}
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
}
.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
@media (min-width: 768px) {
  .site-footer {
    padding: 80px 32px 48px;
  }
}

/* ---------- Home page: centered (Dan, 2026-10-03) ----------
   Every rule here is scoped to body.page-home (index.html in both states), so
   the legal and disclosure pages and the 404 keep their left-aligned reading
   column exactly as built. The hero shapes keep their own
   band under the text, as the designer placed them; centering the text does
   not move them. */
.page-home .site-header {
  justify-content: center;
}
.page-home .hero-text {
  text-align: center;
  margin: 0 auto;
}
.page-home .hero h1,
.page-home .hero-sub {
  margin-left: auto;
  margin-right: auto;
}
.page-home .hero-sub {
  /* Room under the headline's descenders at wide sizes (Kodi, 2026-10-03). */
  margin-top: clamp(28px, 2.4vw, 40px);
}
.page-home .statement {
  justify-content: center;
  text-align: center;
}
.page-home .statement-inner {
  margin: 0 auto;
}
.page-home .series {
  text-align: center;
}
.page-home .series-grid {
  margin: 0 auto;
}
.page-home .series-body {
  align-items: center;
}
.page-home .series-body .button {
  align-self: center;
}
.page-home .series-description {
  margin-left: auto;
  margin-right: auto;
}
.page-home .series-panel {
  text-align: center;
  align-items: center;
}
.page-home .signup {
  margin: 0 auto;
  text-align: center;
}
.page-home .signup-form {
  justify-items: center;
}
.page-home .site-footer {
  text-align: center;
}
.page-home .social-links,
.page-home .footer-legal,
.page-home .footer-nav {
  justify-content: center;
}
/* On a phone the home page's footer links sit a little closer when there are
   seven of them (State 2), so the row breaks as four and three rather than
   leaving one link alone. The five-link State 1 footer keeps its normal gap
   (Kodi, 2026-10-03). */
@media (max-width: 480px) {
  .page-home .footer-nav:has(> a:nth-child(7)) {
    column-gap: 16px;
  }
}

/* ---------- Animation start states (Kodi, 2026-10-03) ----------
   Only when the home page script will run (html.js, set before the first paint)
   and motion is allowed: the hero shapes wait off their own edges and the second
   statement beat waits hidden, so the finished state never flashes before the
   wipe and the fade. With reduced motion, or JavaScript off, none of this applies
   and the finished state shows at once. */
@media (prefers-reduced-motion: no-preference) {
  .js .shape-teal {
    transform: translateX(100%);
  }
  .js .shape-green {
    transform: translateX(-110%);
  }
  .js .shape-pale {
    transform: translateX(-130%);
  }
  .js .beat-two {
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px);
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .series-panel {
    transition: none;
  }
}