/* ==========================================================================
   The Comix Mixtape — podcast.cartoonist.coop
   Styling carried over from the main site rebuild for a consistent
   identity across the co-op's properties. Same design tokens, same
   AAA-compliant colors, same fonts.
   ========================================================================== */

/* Self-hosted fonts. JetBrains Mono for body/headings, Rammetto One
   for the big display H1. All woff2, font-display: swap so text isn't
   blocked while they load. */
@font-face {
  font-family: 'Rammetto One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/RammettoOne-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
}

:root {
  --paper: #faf7f0;
  --ink: #2c241d;
  --orange: #a04928;
  --halftone: #c9c4b8;
  --muted: #4d4a42;
  --border-color: var(--ink);

  --display: 'Rammetto One', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'JetBrains Mono', 'Courier New', monospace;
}

/* Dark theme: same token system, different values. Every other rule
   reads from these variables, so nothing else changes for dark mode. */
:root[data-theme="dark"] {
  --paper: #1e1a16;
  --ink: #f4f0e6;
  --orange: #d46d48;
  --halftone: #292520;
  --muted: #b8b2a4;
  --border-color: #787160;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  line-height:1.7;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  transition:background 0.2s ease, color 0.2s ease;
}
a{color:inherit}

/* Visible focus indicator for keyboard nav. A 2px ink outline with
   offset works on any background in both modes, unlike a color-only
   change. */
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.wrap{max-width:960px;margin:0 auto;padding:0 24px}

/* top bar */
.topbar{border-bottom:3px solid var(--border-color)}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:18px;padding-bottom:18px;gap:16px;
}
.eyebrow{
  font-family:var(--body);font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;font-size:13px;
}
.topbar-right{display:flex;align-items:center;gap:16px}
.backlink{
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:12px;text-decoration:none;
  border-bottom:2px solid transparent;padding-bottom:2px;white-space:nowrap;
}
.backlink:hover,.backlink:focus-visible{border-bottom-color:var(--orange)}

/* theme toggle — boxed to match the main site's footer toggle */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  padding:8px;border:3px solid var(--border-color);background:var(--paper);
  color:var(--ink);cursor:pointer;line-height:0;
}
.theme-toggle:hover,.theme-toggle:focus-visible{background:var(--ink);color:var(--paper)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:none}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:block}

/* hero */
.hero{padding:56px 0 44px}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.kicker{
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;font-size:14px;color:var(--orange);margin:0 0 14px;
}
h1{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:-.01em;line-height:1;font-size:clamp(40px,7vw,72px);margin:0 0 22px;
}
h1 .alt{color:var(--orange)}
.lede{font-size:clamp(17px,2.4vw,20px);max-width:42ch;margin:0 0 8px}
.credit{font-size:13px;color:var(--muted);margin:14px 0 0}

/* cover art with offset */
.cover-frame{position:relative;width:100%;max-width:360px;margin-left:auto}
.cover-frame::before{
  content:"";position:absolute;inset:0;transform:translate(14px,14px);
  background:var(--orange);z-index:0;
}
.cover-frame img{
  position:relative;z-index:1;display:block;width:100%;height:auto;
  border:4px solid var(--border-color);background:var(--paper);
}

/* section shared */
.sec{padding:44px 0;border-top:3px solid var(--border-color)}
.sec-head{
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:clamp(22px,4vw,32px);margin:0 0 26px;
}

/* listen grid */
.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.chip{
  display:flex;align-items:center;gap:14px;padding:18px 20px;
  border:3px solid var(--border-color);background:var(--paper);text-decoration:none;
  transition:transform .08s ease,background .12s ease,color .12s ease;
}
.chip svg{flex:0 0 auto;width:26px;height:26px}
.chip .lbl{font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:15px;line-height:1.1}
.chip .sub{font-family:var(--body);font-size:13px;color:var(--muted);display:block;letter-spacing:0;text-transform:none;font-weight:400;margin-top:2px}
.chip:hover,.chip:focus-visible{background:var(--ink);color:var(--paper);transform:translate(-2px,-2px)}
.chip:hover .sub,.chip:focus-visible .sub{color:var(--paper)}
.chip:hover svg [data-fill],.chip:focus-visible svg [data-fill]{fill:var(--paper)}
.chip:hover svg [data-stroke],.chip:focus-visible svg [data-stroke]{stroke:var(--paper)}
.chip.todo{border-style:dotted;border-color:var(--orange)}

/* about */
.about p{font-size:18px;max-width:64ch;margin:0 0 18px}
.about p:last-child{margin-bottom:0}
.about .inline{border-bottom:2px solid var(--orange);text-decoration:none}

/* nib list */
ul.nib-list{list-style:none;padding-left:5em;margin:14px 0 0}
ul.nib-list li{position:relative;margin-bottom:0.5em}
ul.nib-list li::before{
  content:"\2712"; /* nib */
  position:absolute;left:-1.5em;color:var(--orange);
}

/* episodes */
.ep{padding:24px 0;border-top:2px solid var(--halftone)}
.ep:first-child{border-top:none;padding-top:0}
.ep .meta{
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.08em;font-size:14px;color:var(--orange);margin:0 0 6px;
}
.ep .meta .dur{color:var(--muted)}
.ep h3{font-family:var(--body);font-weight:700;font-size:21px;line-height:1.15;margin:0}
.ep .sub{font-size:15px;color:var(--muted);margin:6px 0 0}

/* Show-notes dropdown. The summary is the clickable toggle; styled to
   read as a small labeled control that matches the meta type. */
.ep-notes-toggle{margin:10px 0 0}
.ep-notes-toggle summary{
  font-family:var(--body);font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:14px;color:var(--orange);
  cursor:pointer;display:inline-block;padding:2px 0;
}
.ep-notes-toggle summary:hover,.ep-notes-toggle summary:focus-visible{text-decoration:underline}
.ep .ep-notes{font-size:15px;color:var(--ink);margin:10px 0 0;max-width:64ch;line-height:1.6}
.ep .ep-notes p{margin:0 0 10px}
.ep .ep-notes p:last-child{margin-bottom:0}
.ep .ep-notes a{border-bottom:2px solid var(--orange);text-decoration:none}
.ep audio{width:100%;max-width:440px;margin-top:14px;height:40px}

.archive-link{margin:32px 0 0;font-size:16px}
.ep-count{font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:14px;color:var(--muted);margin:0 0 26px}
.archive-hero{padding:44px 0 20px}

/* footer */
footer{border-top:3px solid var(--border-color);padding:38px 0 46px;margin-top:8px}
.social{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.social a{
  width:46px;height:46px;display:inline-flex;align-items:center;justify-content:center;
  border:3px solid var(--border-color);text-decoration:none;
}
.social svg{width:22px;height:22px}
.social svg [data-fill]{fill:var(--ink)}
.colophon{
  font-family:var(--body);text-transform:uppercase;letter-spacing:.08em;
  font-size:14px;font-weight:700;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
}
.colophon .tag{color:var(--orange)}

@media (max-width:760px){
  .hero{padding:40px 0 30px}
  .hero .wrap{grid-template-columns:1fr;gap:36px}
  .cover-frame{max-width:300px;margin:0 auto}
}

/* Respect reduced-motion preference. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
}