@font-face {
  font-family: "Dialup";
  src: url("/assets/fonts/Dialup-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Permanence";
  src: url("/assets/fonts/Permanence-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --gbc-bg: #12170e;
  --gbc-custard: #e6e49f;
  --gbc-ink: #241921;
  --gbc-thistle: #e5d0e3;
  --gbc-orchid: #e0b0d5;
  --gbc-fern: #607744;
  --fj-green: #6a9431;
  --fj-cream: #f3e7bf;
  --fj-ink: #241921;
  --fj-coral: #f4a2aa;
  --fj-slate: #6e7e85;
  --fj-image-well: #dce9ee;
  --radius: 1.35rem;
  --site-wide: 120rem;
  --reading-width: 54rem;
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--gbc-custard);
  background: var(--gbc-bg);
  font-size: 1rem;
  line-height: 1.65;
}
a {
  color: var(--gbc-orchid);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}
a:hover { color: var(--gbc-custard); }
img { display: block; max-width: 100%; height: auto; }

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.7rem 1rem;
  color: #fff;
  background: var(--gbc-ink);
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }

.site-header { background: transparent; }
.site-header__inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  width: min(calc(100% - 6rem), var(--site-wide));
  margin-inline: auto;
  padding-block: 1.4rem;
}
.site-title {
  font-family: "Dialup", Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.45rem, 4.1vw, 4.25rem);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: normal;
  color: var(--gbc-orchid);
  text-decoration: none;
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem clamp(1.25rem, 2.3vw, 2.8rem);
  padding-top: 0.35rem;
  font-size: clamp(0.92rem, 1.25vw, 1.2rem);
  font-weight: 800;
}
.site-nav a { color: var(--gbc-orchid); text-decoration: none; }
.site-nav a:hover { color: var(--gbc-custard); }

.archive-intro {
  width: min(calc(100% - 6rem), var(--site-wide));
  margin-inline: auto;
  padding: clamp(4rem, 7vw, 8rem) 0 clamp(3.5rem, 5vw, 6rem);
}
.archive-intro h1 {
  max-width: 14ch;
  margin: 0;
  font-size: clamp(4rem, 7.25vw, 8.8rem);
  font-weight: 400;
  line-height: 0.95;
}
.archive-intro > p:not(.eyebrow):not(.feed-link),
.future-jerks-intro__copy {
  max-width: 80rem;
  margin: 2.2rem 0 0;
  font-size: clamp(1.08rem, 1.55vw, 1.55rem);
  line-height: 1.65;
}
.archive-intro .feed-link {
  margin: 2rem 0 0;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  font-weight: 800;
}
.eyebrow,
.episode-number {
  margin: 0 0 1.2rem;
  font-size: 0.86rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.home-page .archive-intro .eyebrow { display: none; }

.home-page .archive-intro h1,
.home-page .episode-card h2,
.episode-page .episode-hero h1,
.about-page .page-heading h1,
.not-found-page .not-found h1 {
  font-family: "Dialup", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: normal;
}
.future-jerks-page .archive-intro h1,
.future-jerks-page .future-jerks-card h2,
.future-jerks-episode-page .episode-hero h1 {
  font-family: "Permanence", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: normal;
}

/* Game Boy Crammer archive */
.home-page .archive-intro h1 { color: var(--gbc-custard); }
.home-page .archive-intro > p:not(.eyebrow):not(.feed-link) { color: var(--gbc-custard); }
.home-page .archive-intro .feed-link a { color: var(--gbc-orchid); }

.episode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 2vw, 2.25rem);
  width: min(calc(100% - 6rem), var(--site-wide));
  margin-inline: auto;
  padding-bottom: 7rem;
}
.episode-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius);
  color: var(--gbc-ink);
  background: var(--gbc-thistle);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.episode-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.22);
}
.episode-card__visual {
  display: block;
  overflow: hidden;
  color: var(--gbc-ink);
  background: var(--gbc-ink);
  text-decoration: none;
}
.episode-card__image {
  width: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}
.episode-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(1.4rem, 2.1vw, 2.4rem);
}
.episode-card .episode-number { color: var(--gbc-ink); }
.episode-card h2 {
  margin: 0;
  font-size: clamp(2rem, 2.55vw, 3rem);
  line-height: 1.03;
}
.episode-card h2 a { color: var(--gbc-ink); text-decoration: none; }
.episode-card__body > p:not(.episode-number) {
  margin: 1.6rem 0 0;
  color: var(--gbc-ink);
  font-size: clamp(1rem, 1.25vw, 1.22rem);
  line-height: 1.55;
}
.text-link {
  margin-top: auto;
  padding-top: 1.25rem;
  font-size: clamp(0.95rem, 1.15vw, 1.12rem);
  font-weight: 850;
}
.episode-card .text-link { color: var(--gbc-fern); }

.episode-image-missing {
  display: grid;
  min-height: 12rem;
  place-content: center;
  padding: 1rem;
  color: var(--gbc-custard);
  background: var(--gbc-ink);
  text-align: center;
}
.episode-image-missing span,
.episode-image-missing small { display: block; }
.episode-image-missing span { font-size: 1.35rem; font-weight: 900; }
.episode-image-missing small { color: var(--gbc-orchid); }

/* Future Jerks archive */
.future-jerks-page,
.future-jerks-episode-page { color: var(--fj-cream); background: var(--fj-green); }
.future-jerks-page .site-title,
.future-jerks-episode-page .site-title { color: var(--fj-ink); }
.future-jerks-page .site-nav a,
.future-jerks-episode-page .site-nav a { color: var(--fj-coral); }
.future-jerks-page .site-nav a:hover,
.future-jerks-episode-page .site-nav a:hover { color: var(--fj-cream); }
.future-jerks-intro { padding-bottom: clamp(3.5rem, 5vw, 5rem); }
.future-jerks-intro h1 { max-width: none; color: var(--fj-ink); }
.future-jerks-intro .eyebrow { color: var(--fj-image-well); }
.future-jerks-intro__copy { color: var(--fj-cream); }
.future-jerks-intro__copy p { margin: 0 0 0.8rem; }
.future-jerks-intro .feed-link a { color: var(--fj-coral); }

.future-jerks-grid {
  display: grid;
  gap: clamp(1.25rem, 2vw, 2rem);
  width: min(calc(100% - 6rem), var(--site-wide));
  margin-inline: auto;
  padding-bottom: 7rem;
}
.future-jerks-card {
  display: grid;
  grid-template-columns: minmax(18rem, 22rem) 1fr;
  overflow: hidden;
  border-radius: var(--radius);
  color: var(--fj-ink);
  background: var(--fj-cream);
}
.future-jerks-card__visual {
  display: grid;
  min-height: 21rem;
  place-items: center;
  padding: 1.75rem;
  background: var(--fj-image-well);
  text-decoration: none;
}
.future-jerks-card__visual img {
  width: 100%;
  max-width: 300px;
  max-height: 300px;
  object-fit: contain;
}
.future-jerks-card__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.7rem, 3vw, 3rem);
}
.future-jerks-card .episode-number { color: var(--fj-green); }
.future-jerks-card h2 {
  margin: 0;
  font-size: clamp(2.65rem, 4.1vw, 5rem);
  line-height: 0.95;
}
.future-jerks-card h2 a { color: var(--fj-ink); text-decoration: none; }
.future-jerks-card__body > p:not(.episode-number) {
  max-width: 66rem;
  margin: 1.5rem 0 0;
  color: var(--fj-ink);
  font-size: clamp(1rem, 1.25vw, 1.25rem);
}
.future-jerks-card .text-link { color: var(--fj-green); }

/* Interior pages */
.content-width {
  width: min(calc(100% - 3rem), var(--reading-width));
  margin-inline: auto;
}
.episode,
.standard-page { padding: clamp(3rem, 7vw, 6rem) 0 6rem; }
.episode-hero,
.page-heading { margin-bottom: 3rem; }
.episode-hero h1,
.page-heading h1,
.not-found h1 {
  margin: 0;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.98;
}
.episode-page .episode-hero,
.about-page .page-heading {
  padding: clamp(1.6rem, 4vw, 3rem);
  border-radius: var(--radius);
  color: var(--gbc-ink);
  background: var(--gbc-thistle);
}
.episode-page .episode-hero .eyebrow,
.about-page .page-heading .eyebrow { color: var(--gbc-fern); }
.episode-page .episode-hero__image {
  width: 100%;
  max-height: 44rem;
  margin-top: 2rem;
  border-radius: calc(var(--radius) * 0.65);
  background: var(--gbc-ink);
  object-fit: contain;
}
.episode-page .transcript,
.about-page .transcript { color: var(--gbc-custard); }
.episode-page .transcript h2,
.episode-page .transcript h3,
.about-page .transcript h2,
.about-page .transcript h3 { color: var(--gbc-orchid); }

.transcript {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.04rem, 2vw, 1.18rem);
}
.transcript > p,
.transcript > h2,
.transcript > h3,
.transcript > ul,
.transcript > ol { max-width: 47rem; margin-right: auto; margin-left: auto; }
.transcript h2 {
  margin-top: 2.8rem;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.2;
}
.transcript a { overflow-wrap: anywhere; }
.transcript-image { margin: 2.5rem auto; }
.transcript-image img {
  width: auto;
  max-height: 75vh;
  margin-inline: auto;
  border-radius: 0.65rem;
}
.section-rule {
  max-width: 47rem;
  margin: 2.8rem auto;
  border: 0;
  border-top: 1px solid rgba(230, 228, 159, 0.35);
}
.episode-audio {
  max-width: 47rem;
  margin: 2rem auto 2.5rem;
  padding: 1.2rem;
  border-radius: 0.8rem;
  color: var(--gbc-ink);
  background: var(--gbc-thistle);
}
.episode-audio audio { display: block; width: 100%; }
.episode-audio figcaption {
  margin-top: 0.6rem;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 0.82rem;
}
.back-link { margin: 0 0 2rem; font-size: 0.9rem; font-weight: 800; }
.published-date { margin: 1rem 0 0; }

.future-jerks-episode-page .content-width { --reading-width: 64rem; }
.future-jerks-episode-page .back-link a,
.future-jerks-episode-page .episode-feed-link a { color: var(--fj-coral); }
.future-jerks-episode-page .episode-hero {
  padding: clamp(1.6rem, 4vw, 3rem);
  border-radius: var(--radius);
  color: var(--fj-ink);
  background: var(--fj-cream);
}
.future-jerks-episode-page .episode-hero .eyebrow { color: var(--fj-green); }
.future-jerks-episode-page .published-date { color: var(--fj-slate); }
.future-jerks-episode-image {
  display: block;
  width: 440px;
  max-width: 100%;
  height: auto;
  max-height: none;
  margin: 2rem auto 0;
  padding: 1.25rem;
  border-radius: calc(var(--radius) * 0.65);
  background: var(--fj-image-well);
  object-fit: contain;
}
.future-jerks-description {
  max-width: 47rem;
  margin: 0 auto 1.5rem;
  color: var(--fj-cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.08rem, 2vw, 1.28rem);
}
.future-jerks-episode-page .episode-audio { background: var(--fj-cream); }
.episode-feed-link { max-width: 47rem; margin: 1rem auto; font-size: 0.9rem; font-weight: 800; }

.episode-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(230, 228, 159, 0.35);
}
.episode-nav a {
  padding: 1.1rem;
  border-radius: 0.75rem;
  color: var(--gbc-ink);
  background: var(--gbc-thistle);
  font-weight: 800;
  text-decoration: none;
}
.future-jerks-episode-page .episode-nav {
  border-top-color: rgba(243, 231, 191, 0.45);
}
.future-jerks-episode-page .episode-nav a { background: var(--fj-cream); }
.episode-nav a:last-of-type { text-align: right; }
.episode-nav a span {
  display: block;
  color: var(--gbc-fern);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.future-jerks-episode-page .episode-nav a span { color: var(--fj-green); }

.not-found { min-height: 60vh; padding: clamp(4rem, 12vw, 9rem) 0; }
.not-found > p:not(.eyebrow) { max-width: 38rem; }
.button-link {
  display: inline-block;
  padding: 0.8rem 1.1rem;
  border-radius: 0.5rem;
  color: var(--gbc-ink);
  background: var(--gbc-orchid);
  font-weight: 800;
  text-decoration: none;
}
.button-link:hover { color: var(--gbc-ink); background: var(--gbc-custard); }
.site-footer {
  width: min(calc(100% - 6rem), var(--site-wide));
  margin: 2rem auto 0;
  padding: 2rem 0 3rem;
  border-top: 1px solid rgba(230, 228, 159, 0.28);
  color: var(--gbc-custard);
  font-size: 0.82rem;
}
.future-jerks-page .site-footer,
.future-jerks-episode-page .site-footer {
  border-top-color: rgba(243, 231, 191, 0.38);
  color: var(--fj-cream);
}

@media (max-width: 72rem) {
  .site-header__inner,
  .archive-intro,
  .episode-grid,
  .future-jerks-grid,
  .site-footer { width: min(calc(100% - 3rem), var(--site-wide)); }
  .episode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .future-jerks-card { grid-template-columns: minmax(15rem, 19rem) 1fr; }
  .future-jerks-card__visual { min-height: 18rem; }
}

@media (max-width: 48rem) {
  .site-header__inner {
    align-items: flex-start;
    flex-direction: column;
    gap: 1rem;
    padding-block: 1.25rem;
  }
  .site-title { font-size: clamp(2.8rem, 12vw, 4rem); }
  .site-nav { width: 100%; justify-content: space-between; padding-top: 0; }
  .archive-intro { padding: 3.6rem 0 3rem; }
  .archive-intro h1 { font-size: clamp(3.7rem, 16vw, 6.25rem); }
  .archive-intro > p:not(.eyebrow):not(.feed-link),
  .future-jerks-intro__copy { font-size: 1.05rem; }
  .episode-grid { grid-template-columns: 1fr; }
  .episode-card h2 { font-size: clamp(2.2rem, 8vw, 3.3rem); }
  .future-jerks-card { grid-template-columns: 1fr; }
  .future-jerks-card__visual { min-height: 0; padding: 1.4rem; }
  .future-jerks-card__visual img { max-width: min(100%, 440px); max-height: none; }
  .future-jerks-card h2 { font-size: clamp(2.6rem, 12vw, 4.3rem); }
  .content-width { width: min(calc(100% - 2rem), var(--reading-width)); }
  .episode,
  .standard-page { padding-top: 2.5rem; }
  .episode-hero h1,
  .page-heading h1,
  .not-found h1 { font-size: clamp(3rem, 14vw, 5rem); }
  .episode-nav { grid-template-columns: 1fr; }
  .episode-nav__empty { display: none; }
  .episode-nav a:last-of-type { text-align: left; }
}

@media (max-width: 27rem) {
  .site-header__inner,
  .archive-intro,
  .episode-grid,
  .future-jerks-grid,
  .site-footer { width: min(calc(100% - 2rem), var(--site-wide)); }
  .site-nav { gap: 0.5rem 0.9rem; font-size: 0.88rem; }
  .episode-card__body,
  .future-jerks-card__body { padding: 1.25rem; }
  .episode-page .episode-hero,
  .about-page .page-heading,
  .future-jerks-episode-page .episode-hero { padding: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .episode-card { transition: none; }
}

@media print {
  .site-header,
  .site-footer,
  .episode-nav,
  .episode-audio { display: none; }
  body,
  .future-jerks-page,
  .future-jerks-episode-page { color: #000; background: #fff; }
  .content-width { width: 100%; }
  .episode-page .transcript,
  .about-page .transcript,
  .future-jerks-description { color: #000; }
}