/* ==========================================================================
   BASE — design tokens, reset, shared vocabulary
   Palette: Paper #FAF4EA · Sand #F2E7D8 · Ink #191210 · Espresso #2E2118
            Taupe #8C7B6A · Tangerine #ED550F
   Type:    Fraunces (display / voice) · Archivo (body / labels)
   ========================================================================== */

:root {
  --paper: #faf4ea;
  --sand: #f2e7d8;
  --ink: #191210;
  --ink-2: #241a13;
  --espresso: #2e2118;
  --taupe: #8c7b6a;
  --orange: #ed550f;
  --orange-deep: #b83f06;
  --on-orange: #1f1006;
  --cream-on-dark: #f6ecdd;
  --muted-on-dark: #a4907c;
  --line-light: #e2d4c0;
  --line-dark: rgba(246, 236, 221, 0.14);
  --focus: #ed550f;

  --font-display: "Fraunces", "Georgia", serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --w-wide: 1280px;
  --w-text: 68ch;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.7s;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--espresso);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.menu-open { overflow: hidden; }

img, svg { display: block; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

::selection { background: var(--orange); color: var(--cream-on-dark); }

/* ---------- shared vocabulary ---------- */

.eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--taupe);
}
.eyebrow em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--orange);
}
.eyebrow-light { color: var(--muted-on-dark); }

.voice {
  font-style: italic;
  color: var(--orange);
}
.voice-dark {
  font-style: italic;
  color: var(--on-orange);
}

/* Premiere / upcoming badge — bottom-left corner tag over a thumbnail.
   Shared between the Latest section and the episode archive grid. */
.premiere-tag {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream-on-dark);
  background: var(--orange);
  padding: 0.32rem 0.6rem;
  border-radius: 2px;
  pointer-events: none;
}
.premiere-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cream-on-dark);
  flex-shrink: 0;
}
.premiere-tag[hidden] { display: none; }

.section-title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 460;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.16;
  padding-bottom: 0.05em;
  letter-spacing: -0.015em;
  color: var(--espresso);
  max-width: 22ch;
}
.section-title-light { color: var(--cream-on-dark); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: transform 0.18s var(--ease-out), background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-sm { padding: 0.7rem 1.15rem; font-size: 0.7rem; }

.btn-solid { background: var(--orange); color: #fff4ea; }
.btn-solid:hover { background: var(--orange-deep); }

.btn-solid-dark { background: var(--ink); color: var(--cream-on-dark); }
.btn-solid-dark:hover { background: #000; }

.btn-outline { border-color: var(--espresso); color: var(--espresso); background: transparent; }
.btn-outline:hover { background: var(--espresso); color: var(--paper); }

.btn-ghost-light { border-color: rgba(246, 236, 221, 0.35); color: var(--cream-on-dark); background: transparent; }
.btn-ghost-light:hover { border-color: var(--cream-on-dark); }

.btn-ink { background: var(--ink); color: var(--cream-on-dark); }
.btn-ink:hover { background: #000; }

.btn-ghost-ink { border-color: rgba(25, 18, 16, 0.45); color: var(--on-orange); background: transparent; }
.btn-ghost-ink:hover { border-color: var(--ink); background: rgba(25, 18, 16, 0.06); }

/* ---------- placeholder plates ---------- */

.ph {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  overflow: hidden;
  border-radius: 2px;
}
.ratio-3x4 { aspect-ratio: 3 / 4; }
.ratio-4x5 { aspect-ratio: 4 / 5; }
.ratio-16x9 { aspect-ratio: 16 / 9; }
.ratio-16x10 { aspect-ratio: 16 / 10; }
.ratio-9x16 { aspect-ratio: 9 / 16; }

/* Real photo replacing a .ph placeholder — same box (radius, full-bleed
   cover fit), pair with a .ratio-* class for the aspect ratio. */
.ph-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.ph-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.9;
  padding: 1rem;
  position: relative;
  z-index: 1;
}

.ph-dark {
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(246, 236, 221, 0.045) 14px 15px),
    linear-gradient(160deg, #2b2018 0%, #1e1611 100%);
  border: 1px solid var(--line-dark);
}
.ph-dark .ph-label { color: var(--muted-on-dark); }

.ph-light {
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(46, 33, 24, 0.05) 14px 15px),
    linear-gradient(160deg, #f0e5d3 0%, #e8dbc6 100%);
  border: 1px solid var(--line-light);
}
.ph-light .ph-label { color: var(--taupe); }

.ph-sand {
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(46, 33, 24, 0.055) 14px 15px),
    linear-gradient(160deg, #eadcc6 0%, #e0d0b6 100%);
  border: 1px solid #d8c6ab;
}
.ph-sand .ph-label { color: #8a7458; }