/* ============================================================
   Clap If You Don't Care — "Eric's Notes" design system
   Approved round 02 (concept 2b). See data/site.json and the
   clap-podcast-brand notes for the rules this file implements.

   Non-negotiables encoded here:
   - Four faces, four jobs, no overlap.
   - ONE highlighter swipe per view, never two.
   - Red-pen asides are VERBATIM transcript lines only.
   - No ruled/notepad paper texture. No emoji. No gradients.
   - Never two of the same colourway adjacent.
   ============================================================ */

:root {
  /* Palette — exact values from the approved system */
  --paper:        #F5EFE3;
  --ink:          #1F2A44;
  --highlighter:  #F5C518;
  --pen:          #D64545;

  --muted-on-paper: #6D7688;
  --muted-on-ink:   #8B95AB;
  --fine-on-gold:      #8A6D0C;
  --fine-on-gold-deep: #5A4A1A;

  /* Derived, used sparingly */
  --paper-edge: #E3DACA;
  --ink-edge:   #33405E;

  --measure: 68ch;
  --shell: 1120px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
  --section-y: clamp(2.75rem, 6vw, 5rem);

  --font-head: "Gabarito", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-hand: "Caveat", ui-rounded, cursive;
  --font-serif: "Instrument Serif", Georgia, serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, .96rem + .2vw, 1.125rem);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* ---------- TYPE — four faces, four jobs ---------- */

/* Gabarito 900 — headlines ONLY */
h1, h2, h3, .head {
  font-family: var(--font-head);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.03em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 1.4rem + 6.4vw, 6.5rem); }
h2 { font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem); }
h3 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem); }

/* Hanken Grotesk — body + all fine print */
.fine {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Caveat — handwriting: eyebrow + red-pen aside. Lowercase. Nothing else. */
.eyebrow, .aside {
  font-family: var(--font-hand);
  text-transform: lowercase;
}

/* Instrument Serif italic — ONLY the (n.) mark and the & in "Bops & the flops" */
.pos, .amp {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* ---------- SIGNATURE DEVICES ---------- */

/* 1. Highlighter swipe — one per view, never two */
.swipe {
  background: linear-gradient(transparent 12%, var(--highlighter) 12% 88%, transparent 88%);
  padding: 0 .18em;
  /* On ink grounds the swiped text flips to ink so it stays readable */
}
.ink .swipe, .ink-panel .swipe { color: var(--ink); }

/* A swipe that wraps renders as two separate bands, which reads as two
   highlights on the page even though it is one phrase. Keep short swipes
   intact. Only used where the phrase is short enough to never overflow. */
.nowrap { white-space: nowrap; }

/* 2. Red-pen aside — VERBATIM transcript lines only */
.aside {
  display: block;
  color: var(--pen);
  font-size: clamp(1.15rem, 1rem + .55vw, 1.5rem);
  line-height: 1.25;
  transform: rotate(-1deg);
  transform-origin: left center;
  max-width: 46ch;
}
.aside::before { content: "↳ "; font-family: var(--font-body); font-weight: 400; }
.aside cite {
  display: block;
  margin-top: .35rem;
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-on-paper);
  transform: rotate(1deg); /* counter-rotate so the credit sits straight */
}
.ink .aside cite { color: var(--muted-on-ink); }
.gold .aside cite { color: var(--fine-on-gold); }

/* 3. Eyebrow — lowercase Caveat top-left, date on the right */
.eyebrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.3rem);
  color: var(--muted-on-paper);
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--paper-edge);
  padding-bottom: .5rem;
}
.eyebrow > span:last-child { white-space: nowrap; }
.ink .eyebrow { color: var(--muted-on-ink); border-bottom-color: var(--ink-edge); }
.gold .eyebrow { color: var(--fine-on-gold); border-bottom-color: rgba(90,74,26,.28); }

/* ---------- LAYOUT ---------- */
.shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
@media (min-width: 640px) { .shell { width: min(100% - 4rem, var(--shell)); } }

section { padding-block: var(--section-y); }

/* The first section already has the masthead above it. A full section's worth
   of top padding on top of that reads as a hole, not as breathing room. */
main > section:first-child { padding-top: clamp(1.5rem, 3vw, 2.5rem); }

/* A section that flows straight into the next one (same ground, no break)
   shouldn't pay full bottom padding as well. */
.section--continues { padding-bottom: clamp(1.75rem, 3.5vw, 2.75rem); }

/* Colourways — never two of the same adjacent */
.paper { background: var(--paper); color: var(--ink); }
.ink   { background: var(--ink);   color: var(--paper); }
.gold  { background: var(--highlighter); color: var(--ink); }

.ink .fine  { color: var(--muted-on-ink); }
.gold .fine { color: var(--fine-on-gold-deep); }
.paper .fine { color: var(--muted-on-paper); }

.lede { max-width: var(--measure); font-size: clamp(1.05rem, 1rem + .45vw, 1.3rem); }

/* 3px rule above footers — the card skeleton signature */
.rule { border: 0; border-top: 3px solid currentColor; opacity: .18; margin-block: 1.25rem; }

/* ---------- HEADER ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--paper-edge);
}
.site-head__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .85rem; }
.wordmark {
  font-family: var(--font-head); font-weight: 900;
  font-size: clamp(1rem, .9rem + .45vw, 1.25rem);
  line-height: .9; letter-spacing: -.03em;
  text-decoration: none; max-width: 9ch;
}
.nav { display: flex; align-items: center; gap: clamp(.85rem, 2.5vw, 1.75rem); }
.nav a {
  font-weight: 700; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase;
  text-decoration: none; color: var(--muted-on-paper);
  padding-block: .35rem; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--pen); }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; padding: .7rem 1.15rem;
  border: 2px solid var(--ink); background: var(--ink); color: var(--paper);
  transition: transform .12s ease, background .12s ease, color .12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--pen { background: var(--pen); border-color: var(--pen); color: var(--paper); }
.ink .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.ink .btn--ghost { background: transparent; color: var(--paper); }
.ink .btn--ghost:hover { background: var(--paper); color: var(--ink); }

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---------- HERO ---------- */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) var(--section-y); }
.hero__grid { display: grid; gap: var(--gap); align-items: end; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.35fr .9fr; } }

.hero h1 { margin-bottom: 1.25rem; }
.hero__tag { font-size: clamp(1.15rem, 1rem + .85vw, 1.75rem); font-weight: 600; max-width: 26ch; line-height: 1.25; }
.hero__art { border: 3px solid var(--ink); align-self: end; }
.hero__meta { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; }

/* ---------- CARDS ---------- */
.card {
  display: grid; grid-template-rows: auto 1fr auto;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink);
  padding: clamp(1.25rem, 3vw, 1.9rem);
  text-decoration: none;
  transition: transform .14s ease, box-shadow .14s ease;
}
a.card:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--ink); }
.card__eyebrow {
  font-family: var(--font-hand); text-transform: lowercase;
  font-size: 1.05rem; color: var(--muted-on-paper);
  display: flex; justify-content: space-between; gap: .75rem; align-items: baseline;
}
.card h3 { margin-block: .6rem .5rem; }
.card__foot { margin-top: auto; padding-top: 1rem; border-top: 3px solid rgba(31,42,68,.16); }

.card--pen { border-color: var(--pen); }
a.card--pen:hover { box-shadow: 6px 6px 0 var(--pen); }
.card--gold { background: var(--highlighter); }
.card--gold .card__eyebrow { color: var(--fine-on-gold); }
.card--gold .fine { color: var(--fine-on-gold-deep); }
.card--gold .card__foot { border-top-color: rgba(90,74,26,.3); }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.5rem); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }

/* ---------- FEATURED EPISODE ---------- */
.featured { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 820px) { .featured { grid-template-columns: 300px 1fr; } }
.featured__art { border: 3px solid currentColor; }
.featured h2 { margin-block: .75rem 1rem; }

/* ---------- EPISODE LIST ---------- */
.ep-list { display: grid; gap: 0; border-top: 2px solid var(--ink); }
.ep {
  display: grid; gap: .35rem 1.5rem; align-items: baseline;
  padding-block: clamp(1.1rem, 2.5vw, 1.6rem);
  border-bottom: 1px solid var(--paper-edge);
  text-decoration: none;
  transition: background .12s ease, padding-inline .12s ease;
}
@media (min-width: 760px) {
  .ep { grid-template-columns: 8.5rem 1fr auto; }
}
.ep:hover { background: rgba(31,42,68,.045); padding-inline: .75rem; }
.ep__date { font-family: var(--font-body); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-paper); }
.ep__title { font-family: var(--font-head); font-weight: 900; line-height: .95; letter-spacing: -.02em; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); }
.ep__meta { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-on-paper); white-space: nowrap; }
.ep__desc { grid-column: 1 / -1; color: var(--muted-on-paper); max-width: var(--measure); font-size: .95rem; }
@media (min-width: 760px) { .ep__desc { grid-column: 2 / 3; } }

.ep__tag {
  display: inline-block; font-weight: 700; font-size: .62rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .18rem .45rem; border: 1.5px solid currentColor;
}
.ep__tag--nmf { color: var(--pen); }

/* ---------- FILTERS ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.filter {
  font-family: var(--font-body); font-weight: 700; font-size: .74rem; letter-spacing: .08em;
  text-transform: uppercase; padding: .5rem .9rem; cursor: pointer;
  border: 2px solid var(--ink); background: transparent; color: var(--ink);
}
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ---------- PRESS ---------- */
.press-entry { display: grid; gap: .5rem 2rem; padding-block: clamp(1.5rem, 3.5vw, 2.5rem); border-bottom: 1px solid var(--paper-edge); }
@media (min-width: 760px) { .press-entry { grid-template-columns: 1fr 1.6fr; } }
.press-entry:first-of-type { border-top: 2px solid var(--ink); }
.press-entry__q { font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem); font-weight: 600; line-height: 1.35; max-width: 40ch; }

.stats { display: grid; gap: clamp(1rem, 3vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.stat__figure { font-family: var(--font-head); font-weight: 900; line-height: .85; letter-spacing: -.03em; font-size: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

/* ---------- HOSTS ---------- */
.host { display: grid; gap: .9rem; }

/* The role label is an eyebrow, not fine print. Rendering it as fine print made
   it identical to the citation above it, so consecutive host blocks ran
   together into one strip of small caps with no visible boundary. Caveat
   handwriting is the system's label voice and separates the two jobs cleanly. */
.host__role {
  font-family: var(--font-hand);
  text-transform: lowercase;
  font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  line-height: 1.2;
  color: var(--muted-on-paper);
  margin-bottom: .15rem;
}
.ink .host__role { color: var(--muted-on-ink); }
.gold .host__role { color: var(--fine-on-gold); }

.host__quote {
  font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem);
  font-weight: 600;
  line-height: 1.35;
  border-left: 3px solid var(--pen);
  padding-left: 1rem;
}
/* The citation belongs to the quote, so it sits inside the rule rather than
   floating between two blocks where it could be mistaken for the next label. */
.host__quote cite {
  display: block;
  margin-top: .65rem;
  font-style: normal;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-on-paper);
}
.ink .host__quote cite { color: var(--muted-on-ink); }

/* ---------- EPISODE DETAIL ---------- */
.ep-detail__body { max-width: var(--measure); }
.ep-detail__body p { margin-bottom: 1rem; }
.ep-detail__body a { color: var(--pen); text-underline-offset: 3px; }
.ep-detail__body a:hover { background: var(--highlighter); color: var(--ink); text-decoration: none; }
/* Native <audio>. Browsers won't let us restyle the internals, so we frame it
   instead: the surrounding border and ground do the brand work. */
.player {
  width: 100%;
  height: 54px;
  margin-block: 1.5rem;
  border: 2px solid var(--ink);
  background: var(--paper);
  border-radius: 0;
}
.player::-webkit-media-controls-panel { background: var(--paper); }

/* ---------- FOOTER ---------- */
.site-foot { background: var(--ink); color: var(--paper); padding-block: clamp(3rem, 7vw, 5rem) 2rem; }
.foot-grid { display: grid; gap: var(--gap); }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.site-foot a { color: var(--paper); text-decoration: none; }
.site-foot a:hover { color: var(--highlighter); }
.foot-list { list-style: none; padding: 0; display: grid; gap: .5rem; }
.site-foot .aside { margin-top: 1.35rem; }
.site-foot .foot-grid > div + div { padding-top: .25rem; }
.foot-bottom { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--ink-edge); display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; }

/* ---------- UTILITIES ---------- */
.stack > * + * { margin-top: var(--flow, 1rem); }
.mt-lg { margin-top: clamp(2rem, 5vw, 3.5rem); }
.mb-lg { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.center-col { max-width: var(--measure); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--paper); padding: .75rem 1rem; z-index: 100;
  font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase;
}
.skip:focus { left: .5rem; top: .5rem; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }

/* Wide content must scroll inside its own container, never the body */
.scroll-x { overflow-x: auto; }

@media print {
  .site-head, .site-foot, .filters { display: none; }
  body { background: #fff; }
}