/* gammonfrog — page layouts */

/* ---------- LAYOUT ---------- */
.page { max-width: var(--max); margin: 0 auto; }
main.scroll { padding-bottom: 96px; }
@media (min-width: 641px) {
  main.scroll { padding-bottom: 24px; }
}

/* ---------- SECTION HEADER ---------- */
.section-h {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 22px var(--gutter) 10px;
  border-bottom: 1px solid var(--rule);
}
.section-h h2 {
  font-size: 12px; font-family: var(--mono); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ink);
}
.section-h .more {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.02em;
}
.section-h .more::after { content: " →"; }

/* ---------- HOME HERO ---------- */
.hero {
  display: block;
  padding: 18px var(--gutter) 22px;
  border-bottom: 1px solid var(--rule);
}
.hero .kicker {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.hero .kicker .dot {
  width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
}
.hero h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
.hero .dek {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}
.hero .meta {
  margin-top: 14px;
  display: flex; gap: 14px; align-items: center;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.02em;
}
.hero .img-ph {
  margin-top: 16px;
  aspect-ratio: 16 / 11;
  background: var(--ink); color: var(--paper);
  position: relative;
  overflow: hidden;
}
.hero .img-ph::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg, transparent 0 9px, rgba(255,255,255,0.04) 9px 10px);
}
.hero .img-ph .ph-label {
  position: absolute; left: 12px; bottom: 10px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ---------- LEAD LISTEN (home) ---------- */
.lead-listen {
  padding: 20px var(--gutter) 22px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.lead-listen .ek {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 12px; display: flex; gap: 8px; align-items: center;
}
.lead-listen .ek::before {
  content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }
.lead-listen h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: 32px; line-height: 1.04;
  letter-spacing: -0.038em; color: var(--ink);
  text-wrap: balance;
}
.lead-listen h1 a:hover { color: var(--accent); }
.lead-listen .dek {
  margin-top: 10px;
  font-size: 15.5px; line-height: 1.45;
  color: var(--ink-2); text-wrap: pretty;
}

/* Big play card */
.big-play {
  margin-top: 32px;
  background-color: var(--paper-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' preserveAspectRatio='none'><g stroke='%23367B39' stroke-width='1' stroke-opacity='0.25' fill='none' stroke-linecap='round'><path d='M45,18 q6,-5 11,-1 q5,4 10,0 q5,-4 10,1'/><path d='M210,22 l16,1'/><path d='M408,38 q0,3 1,7'/><path d='M555,28 q4,14 1,28'/><path d='M105,72 q-3,10 0,22'/><path d='M295,78 l12,-17'/><path d='M450,92 q4,14 0,28'/><path d='M65,148 l16,0'/><path d='M225,158 l13,-20'/><path d='M365,180 q-13,3 -22,0'/><path d='M510,176 q-2,7 -4,11'/><path d='M148,168 q1,6 3,9'/><path d='M385,118 l1,1'/><path d='M260,118 l1,1'/></g></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--ink);
  display: grid; grid-template-columns: auto 1fr;
  gap: 14px;
  padding: 16px;
  align-items: center;
}
.big-play .bp-body { min-width: 0; }
.big-play .lt {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.big-play .ttl {
  font-family: var(--sans); font-weight: 500; font-size: 14px;
  line-height: 1.35; color: var(--ink);
}
.big-play .scrub {
  margin-top: 12px;
  height: 3px; background: var(--rule-soft);
  position: relative;
}
.big-play .scrub-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 38%;
  background: var(--accent);
}
.big-play .scrub-times {
  margin-top: 6px;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.04em;
}
.big-play .scrub-times .ap-current,
.big-play .scrub-times .ap-duration { color: var(--ink-4); }
.big-play .play-big {
  width: 44px; height: 44px;
  background: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  transform: translateY(11px);
}
.big-play .play-big svg { width: 16px; height: 16px; fill: var(--paper-2); margin-left: 2px; }

/* ---------- INDEX STRIP ---------- */
.index-strip {
  display: flex; gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
  scrollbar-width: none;
}
.index-strip::-webkit-scrollbar { display: none; }
.index-strip a {
  flex-shrink: 0;
  padding: 14px 16px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); border-right: 1px solid var(--rule-soft);
  display: flex; align-items: center; gap: 6px;
}
.index-strip a:last-child { border-right: 0; }
.index-strip a .ct {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-3);
}
.index-strip a:hover { background: var(--paper-2); }
.index-strip a.is-active { color: var(--accent); }
.index-strip a.is-active .ct { color: var(--accent); }

/* Mobile: hide the strip — the bottom tabbar handles navigation. */
@media (max-width: 640px) {
  .index-strip { display: none; }
}

/* ---------- RAIL & READING SECTION HEADERS ---------- */
.rail-h,
.reading-h {
  padding: 22px var(--gutter) 6px;
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--rule);
}
.rail-h h2,
.reading-h h2 {
  font-family: var(--sans); font-weight: 700;
  font-size: 22px; letter-spacing: -0.02em;
}
.rail-h .count,
.reading-h .more {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* ---------- LISTEN RAIL ---------- */
.rail {
  display: grid;
  grid-template-columns: 1fr;
}
.rail-item {
  display: flex; align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--rule-soft);
  padding: 12px var(--gutter);
}
.rail-item .num {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-4); letter-spacing: 0.04em;
  width: 22px; flex-shrink: 0;
  /* Align baseline with the H3 title, not the eyebrow above it */
  padding-top: 22px;
}
.rail-item .core { flex: 1; min-width: 0; padding-right: 12px; }
.rail-item .ek {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-3); letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.rail-item h3 {
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  line-height: 1.2; letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
.rail-item h3 a:hover { color: var(--accent); }
.rail-item .meta {
  margin-top: 6px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.02em;
  display: flex; gap: 10px;
}
.rail-item .play-sm {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
  text-decoration: none;
}
.rail-item .play-sm svg { width: 14px; height: 14px; fill: var(--paper); margin-left: 1px; }
.rail-item.is-playing .play-sm { background: var(--accent); }
.rail-item.is-playing .play-sm svg { fill: #fff; }

/* ---------- ARTICLE ROW ---------- */
.row {
  display: grid;
  grid-template-columns: 1fr 88px;
  gap: 14px;
  padding: 14px var(--gutter);
  border-bottom: 1px solid var(--rule-soft);
}
.row .ek {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 6px;
  display: flex; gap: 8px; align-items: center;
}
.row .ek .audio-flag {
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 4px;
}
.row .ek .audio-flag::before {
  content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
}
.row h3 {
  font-family: var(--sans); font-weight: 600;
  font-size: 17px; line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--ink);
  text-wrap: balance;
}
.row a:hover h3 { color: var(--accent); }
.row .meta {
  margin-top: 8px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.02em;
}
.row .thumb {
  background: var(--paper-2); aspect-ratio: 1 / 1;
  position: relative; overflow: hidden;
}
.row .thumb::before {
  content: "gf";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.row .thumb::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(20px, -50%) skew(-18deg);
  width: 2px; height: 22px;
  background: var(--accent);
}
.row .thumb img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
}
.row .thumb:has(img)::before,
.row .thumb:has(img)::after { display: none; }

/* ---------- ARTICLE PAGE ---------- */
.crumbs {
  padding: 12px var(--gutter);
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule-soft);
}
.crumbs a { color: var(--ink); }
.crumbs span { margin: 0 6px; color: var(--ink-4); }

.article-head {
  padding: 22px var(--gutter) 18px;
}
.article-head .cat {
  font-family: var(--mono); font-size: 11px;
  color: var(--accent); letter-spacing: 0.06em;
  text-transform: uppercase; margin-bottom: 14px;
  display: flex; gap: 8px; align-items: center;
}
.article-head .cat::before {
  content: ""; width: 16px; height: 1px; background: var(--accent);
}
.article-head h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: 36px; line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--ink); text-wrap: balance;
}
.article-head .dek {
  margin-top: 14px;
  font-size: 17px; line-height: 1.45;
  color: var(--ink-2); text-wrap: pretty;
}
.article-head .byline {
  margin-top: 18px;
  display: flex; gap: 14px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.02em;
  border-top: 1px solid var(--rule-soft);
  padding-top: 14px;
}
.article-head .byline strong { font-weight: 500; color: var(--ink); }
.article-head .article-hero {
  margin: 22px 0 0;
  aspect-ratio: 21 / 9;
  background: var(--paper-2);
  overflow: hidden;
}
.article-head .article-hero img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.article-head .article-hero figcaption {
  margin-top: 8px;
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-3); letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Audio above the fold — Newsprint design */
.audio-block {
  background-color: #CEE8BA80;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' preserveAspectRatio='none'><g stroke='%23367B39' stroke-width='1.6' stroke-opacity='0.5' fill='none' stroke-linecap='round'><path d='M45,18 q6,-5 11,-1 q5,4 10,0 q5,-4 10,1'/><path d='M210,22 l16,1'/><path d='M408,38 q0,3 1,7'/><path d='M555,28 q4,14 1,28'/><path d='M105,72 q-3,10 0,22'/><path d='M295,78 l12,-17'/><path d='M450,92 q4,14 0,28'/><path d='M65,148 l16,0'/><path d='M225,158 l13,-20'/><path d='M365,180 q-13,3 -22,0'/><path d='M510,176 q-2,7 -4,11'/><path d='M148,168 q1,6 3,9'/><path d='M385,118 l1,1'/><path d='M260,118 l1,1'/></g></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  color: var(--ink);
  margin: 0 var(--gutter) 4px;
  padding: 20px;
}
.audio-block .ek {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
  display: flex; gap: 8px; align-items: center;
}
.audio-block .ek::before {
  content: ""; width: 6px; height: 6px; background: var(--accent); border-radius: 50%;
}
.audio-block .row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 14px; align-items: center;
  border: 0; padding: 0;
}
.audio-block .lbl {
  font-family: var(--sans); font-size: 16px; font-weight: 500;
  color: var(--ink); line-height: 1.3;
  margin-bottom: 20px;
}
.audio-block .play-big {
  width: 44px; height: 44px;
  background: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.audio-block .play-big svg { width: 14px; height: 14px; fill: var(--paper-2); margin-left: 2px; }
.audio-block .scrub {
  margin-top: 0;
  height: 2px; background: #A6CC8A;
  position: relative;
}
.audio-block .scrub-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: var(--accent);
}
.audio-block .scrub-times {
  margin-top: 8px;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em;
}
.audio-block .scrub-times .ap-current,
.audio-block .scrub-times .ap-duration { color: var(--ink-4); }
.audio-block .controls {
  margin-top: 20px;
  display: flex; gap: 16px; align-items: center;
}
.audio-block .ctl {
  flex: none;
  padding: 0;
  border: 0;
  color: var(--ink-3);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: transparent;
  cursor: pointer;
}
.audio-block .controls .ctl.is-rate {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
.audio-block .controls .ctl:hover { opacity: 0.5; }
.audio-block .controls .ctl-prev,
.audio-block .controls .ctl-next,
.audio-block .controls .ctl-queue {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.audio-block .controls .ctl-prev svg,
.audio-block .controls .ctl-next svg,
.audio-block .controls .ctl-queue svg {
  width: 16px; height: 16px; fill: var(--ink-3);
}
.audio-block .controls .ctl-queue { margin-left: auto; }
.audio-block .controls .ctl-queue .count {
  position: absolute; top: -4px; right: -6px;
  min-width: 14px; height: 14px; padding: 0 3px;
  background: var(--accent, #E2323F); color: #fff;
  border-radius: 7px;
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  line-height: 14px; text-align: center;
  letter-spacing: 0;
}
.audio-block .controls .ctl:disabled {
  opacity: 0.3; cursor: default;
}
.audio-block .controls .ctl:disabled:hover { opacity: 0.3; }

.or {
  text-align: center;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-4); letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 14px 0 6px;
}
.or::before, .or::after {
  content: ""; display: inline-block; width: 32px; height: 1px;
  background: var(--rule-soft); vertical-align: middle; margin: 0 8px;
}

.pull {
  margin: 28px var(--gutter);
  padding: 20px 0 20px 16px;
  border-left: 3px solid var(--accent);
  font-family: var(--sans); font-weight: 600;
  font-size: 22px; line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ink); text-wrap: balance;
}

.pager {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.pager a {
  padding: 16px var(--gutter);
  display: block;
}
.pager a + a { border-left: 1px solid var(--rule); }
.pager .lt {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-3); letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pager .ttl {
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  line-height: 1.25; letter-spacing: -0.012em;
  color: var(--ink);
}

.more-like {
  padding: 22px var(--gutter) 6px;
  border-bottom: 1px solid var(--rule);
}
.more-like h2 {
  font-family: var(--sans); font-weight: 700;
  font-size: 22px; letter-spacing: -0.02em;
}

/* ---------- ARTICLE BODY ---------- */
.article-body {
  padding: 24px var(--gutter) 32px;
}
.article-body p,
.article-body ul,
.article-body ol {
  font-size: 17px; line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 16px;
  text-wrap: pretty;
}
.article-body p:first-of-type::first-line {
  font-weight: 500;
}
.article-body h2 {
  margin-top: 32px;
  font-family: var(--sans); font-weight: 700;
  font-size: 22px; letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  margin-bottom: 12px;
}
.article-body em, .article-body i { font-style: normal; color: var(--ink); font-weight: 500; }
.article-body strong { color: var(--ink); }

.share-row {
  display: flex; gap: 8px;
  padding: 16px var(--gutter);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ---------- CATEGORY PAGE ---------- */
.cat-head {
  background-color: var(--paper-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' preserveAspectRatio='none'><g stroke='%23367B39' stroke-width='1' stroke-opacity='0.25' fill='none' stroke-linecap='round'><path d='M45,18 q6,-5 11,-1 q5,4 10,0 q5,-4 10,1'/><path d='M210,22 l16,1'/><path d='M408,38 q0,3 1,7'/><path d='M555,28 q4,14 1,28'/><path d='M105,72 q-3,10 0,22'/><path d='M295,78 l12,-17'/><path d='M450,92 q4,14 0,28'/><path d='M65,148 l16,0'/><path d='M225,158 l13,-20'/><path d='M365,180 q-13,3 -22,0'/><path d='M510,176 q-2,7 -4,11'/><path d='M148,168 q1,6 3,9'/><path d='M385,118 l1,1'/><path d='M260,118 l1,1'/></g></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 32px var(--gutter) 22px;
}
.cat-head .ek {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.cat-head h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: 64px; line-height: 0.92; letter-spacing: -0.05em;
  color: var(--ink); text-wrap: balance;
}
.cat-head .dek {
  margin-top: 14px;
  font-size: 15.5px; line-height: 1.45;
  color: var(--ink-2); text-wrap: pretty;
  max-width: 36ch;
}
.cat-head .stats {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--rule-soft);
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.cat-head .stat .n {
  font-family: var(--sans); font-weight: 700;
  font-size: 28px; letter-spacing: -0.03em;
  color: var(--ink);
}
.cat-head .stat .l {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}

.feat {
  padding: 18px var(--gutter) 22px;
  border-bottom: 1px solid var(--rule);
}
.feat .ek {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.feat h2 {
  font-family: var(--sans); font-weight: 700;
  font-size: 26px; line-height: 1.05; letter-spacing: -0.03em;
  color: var(--ink); text-wrap: balance;
}
.feat a { color: inherit; text-decoration: none; }
.feat a:hover h2 { color: var(--accent); }
.feat .dek {
  margin-top: 10px;
  font-size: 15px; color: var(--ink-2); line-height: 1.45;
}
.feat .meta {
  margin-top: 12px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3); letter-spacing: 0.04em;
}

.list-rail { display: block; }
.list-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--rule-soft);
  align-items: start;
  color: inherit; text-decoration: none;
}
.list-row .date {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.02em;
  line-height: 1.2; padding-top: 2px;
}
.list-row .date strong { display: block; color: var(--ink); font-weight: 500; font-size: 14px; }
.list-row .ek {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-3); letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
  display: flex; gap: 8px; align-items: center;
}
.list-row .ek .audio-tag {
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 4px;
}
.list-row .ek .audio-tag::before {
  content: ""; width: 5px; height: 5px; background: var(--accent); border-radius: 50%;
}
.list-row h3 {
  font-family: var(--sans); font-weight: 600;
  font-size: 16px; line-height: 1.22; letter-spacing: -0.012em;
  color: var(--ink);
}
.list-row:hover h3 { color: var(--accent); }
.list-row .meta {
  margin-top: 6px;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-4); letter-spacing: 0.02em;
}

/* ---------- DIRECTORY PAGE ---------- */
.dir-body { padding: 8px 0 24px; }
.dir-body > p {
  padding: 16px var(--gutter);
  font-size: 16px; line-height: 1.5;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule-soft);
}
.dir-body > p:first-child { padding-top: 18px; }
.dir-body > h2 {
  padding: 18px var(--gutter) 10px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent);
  border-top: 1px solid var(--rule-soft);
}
.dir-body > h2:first-child { border-top: 0; }
.dir-body > ul {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0; padding: 0;
  border-bottom: 1px solid var(--rule-soft);
}
.dir-body > ul > li {
  border-top: 1px solid var(--rule-soft);
  border-right: 1px solid var(--rule-soft);
}
.dir-body > ul > li:nth-child(2n) { border-right: 0; }
.dir-body > ul > li > a {
  display: block;
  padding: 12px var(--gutter);
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.dir-body > ul > li > a::after {
  content: " ↗"; color: var(--accent); font-weight: 400;
}
.dir-body > ul > li > a:hover { background: var(--paper-2); color: var(--accent); }

@media (max-width: 640px) {
  .dir-body > ul { grid-template-columns: 1fr; }
  .dir-body > ul > li { border-right: 0; }
}

/* ---------- INDEX PAGE ---------- */
.index-head {
  padding: 22px var(--gutter) 14px;
  border-bottom: 1px solid var(--rule);
}
.index-head h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: 36px; line-height: 1.0; letter-spacing: -0.04em;
  color: var(--ink);
}
.index-head .meta {
  margin-top: 6px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.04em;
}

/* ---------- LISTEN PAGE ---------- */
.listen-head {
  padding: 22px var(--gutter) 18px;
  border-bottom: 1px solid var(--rule);
}
.listen-head .ek {
  font-family: var(--mono); font-size: 11px;
  color: var(--accent); letter-spacing: 0.06em;
  text-transform: uppercase; margin-bottom: 10px;
}
.listen-head h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: 28px; line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.listen-head .dek {
  margin-top: 10px;
  font-size: 15px; line-height: 1.4;
  color: var(--ink-2);
}

/* ---------- EPISODE RAIL (listen / podcast) ---------- */
.ep-rail { display: grid; grid-template-columns: 1fr; }
.ep {
  display: flex; align-items: stretch;
  gap: 0;
  border-bottom: 1px solid var(--rule-soft);
  padding: 12px var(--gutter);
}
.ep .num {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-4); letter-spacing: 0.04em;
  width: 30px; flex-shrink: 0; padding-top: 22px;
}
.ep .core { flex: 1; min-width: 0; padding-right: 12px; }
.ep .ek {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-3); letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.ep h3 {
  font-family: var(--sans); font-weight: 600; font-size: 16px;
  line-height: 1.2; letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
.ep .meta {
  margin-top: 6px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.02em;
  display: flex; gap: 10px;
}
.ep .play-sm {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--ink); color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
  text-decoration: none;
}
.ep .play-sm svg { width: 14px; height: 14px; fill: var(--paper); margin-left: 1px; }
.ep h3 a { color: inherit; text-decoration: none; cursor: pointer; }
.ep h3 a:hover { color: var(--accent); }
.ep .play-sm { cursor: pointer; }
.ep.is-playing { background: var(--paper-2); }
.ep.is-playing .play-sm { background: var(--accent); }

.listen-hero {
  margin: 18px var(--gutter) 0;
  padding: 24px 20px;
  background-color: var(--paper-2);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 200' preserveAspectRatio='none'><g stroke='%23367B39' stroke-width='1' stroke-opacity='0.25' fill='none' stroke-linecap='round'><path d='M45,18 q6,-5 11,-1 q5,4 10,0 q5,-4 10,1'/><path d='M210,22 l16,1'/><path d='M408,38 q0,3 1,7'/><path d='M555,28 q4,14 1,28'/><path d='M105,72 q-3,10 0,22'/><path d='M295,78 l12,-17'/><path d='M450,92 q4,14 0,28'/><path d='M65,148 l16,0'/><path d='M225,158 l13,-20'/><path d='M365,180 q-13,3 -22,0'/><path d='M510,176 q-2,7 -4,11'/><path d='M148,168 q1,6 3,9'/><path d='M385,118 l1,1'/><path d='M260,118 l1,1'/></g></svg>");
}
.listen-hero .lbl {
  font-family: var(--sans); font-weight: 700;
  font-size: 22px; line-height: 1.15; letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 20px;
  text-wrap: balance;
}
.listen-hero .lbl a { color: inherit; text-decoration: none; }
.listen-hero .lbl a:hover { color: var(--accent); }
.listen-hero .player {
  background: transparent; padding: 0;
  display: block;
}
.listen-hero .player .scrub {
  margin-top: 0;
  height: 2px; background: var(--rule-soft);
  position: relative;
}
.listen-hero .player .scrub-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: var(--accent);
}
.listen-hero .player .ap-seek {
  position: absolute; inset: -8px 0;
  width: 100%; height: calc(100% + 16px);
  opacity: 0; cursor: pointer;
}
.listen-hero .scrub-times {
  margin-top: 8px;
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em;
}
.listen-hero .scrub-times .ap-current,
.listen-hero .scrub-times .ap-duration { color: var(--ink-4); }
.listen-hero .controls {
  margin-top: 20px;
  display: flex; gap: 16px; align-items: center;
}
.listen-hero .controls .play-big {
  width: 44px; height: 44px; flex-shrink: 0;
  background: var(--ink); color: var(--paper-2);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer;
  padding: 0;
}
.listen-hero .controls .play-big svg { width: 16px; height: 16px; fill: var(--paper-2); margin-left: 2px; }
.listen-hero .controls .ctl {
  flex: none;
  padding: 0;
  border: 0;
  color: var(--ink-3);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: transparent; cursor: pointer;
}
.listen-hero .controls .ctl.is-rate {
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 1px;
}
.listen-hero .controls .ctl:hover { opacity: 0.5; }
.listen-hero .controls .ctl-prev,
.listen-hero .controls .ctl-next,
.listen-hero .controls .ctl-queue {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.listen-hero .controls .ctl-prev svg,
.listen-hero .controls .ctl-next svg,
.listen-hero .controls .ctl-queue svg {
  width: 18px; height: 18px; fill: var(--ink-3);
}
.listen-hero .controls .ctl-queue { margin-left: 0; }
.listen-hero .controls .ctl-play-all { margin-left: auto; }
.listen-hero .controls .ctl-shuffle-all { margin-left: 0; }
.listen-hero .controls .ctl-queue .count {
  position: absolute; top: -4px; right: -6px;
  min-width: 14px; height: 14px; padding: 0 3px;
  background: var(--accent, #E2323F); color: #fff;
  border-radius: 7px;
  font-family: var(--mono); font-size: 9px; font-weight: 500;
  line-height: 14px; text-align: center;
  letter-spacing: 0;
}
.listen-hero .controls .ctl:disabled {
  opacity: 0.3; cursor: default;
}
.listen-hero .controls .ctl:disabled:hover { opacity: 0.3; }
@media (max-width: 600px) {
  .listen-hero .controls {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: 8px;
    row-gap: 16px;
    align-items: center;
    justify-items: center;
  }
  /* Reset desktop flex-margin tricks so grid placement wins */
  .listen-hero .controls .ctl-queue,
  .listen-hero .controls .ctl-play-all,
  .listen-hero .controls .ctl-shuffle-all { margin-left: 0; }

  /* Row 1: transport with skip flanking */
  .listen-hero .controls .ctl-back15 { grid-row: 1; grid-column: 1; }
  .listen-hero .controls .ctl-prev   { grid-row: 1; grid-column: 2; }
  .listen-hero .controls .play-big   { grid-row: 1; grid-column: 3; }
  .listen-hero .controls .ctl-next   { grid-row: 1; grid-column: 4; }
  .listen-hero .controls .ctl-fwd30  { grid-row: 1; grid-column: 5; }

  /* Row 2: rate + bulk actions + queue */
  .listen-hero .controls .ctl.is-rate       { grid-row: 2; grid-column: 1; }
  .listen-hero .controls .ctl-play-all      { grid-row: 2; grid-column: 2 / span 2; }
  .listen-hero .controls .ctl-shuffle-all   { grid-row: 2; grid-column: 4; }
  .listen-hero .controls .ctl-queue         { grid-row: 2; grid-column: 5; }
}

.load-more-wrap {
  display: flex; justify-content: center;
  padding: 18px var(--gutter) 24px;
  border-bottom: 1px solid var(--rule);
}
.load-more {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 10px 18px;
  cursor: pointer;
}
.load-more:hover { background: var(--ink); color: var(--paper); }
.load-more .ct { color: var(--ink-3); margin-left: 6px; }
.load-more:hover .ct { color: var(--paper); }

/* ---------- NEWSLETTER ---------- */
.nl {
  background: transparent;
  padding: 24px var(--gutter);
  margin: 0;
}
.nl .ek {
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 10px;
}
.nl h3 {
  font-family: var(--sans); font-weight: 700;
  font-size: 24px; line-height: 1.1; letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.nl form {
  margin-top: 14px;
  display: flex; gap: 8px;
}
.nl input {
  flex: 1; padding: 12px; background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink); font: inherit; font-family: var(--sans);
}
.nl input::placeholder { color: var(--ink-4); }
.nl button {
  background: var(--accent); color: #fff;
  padding: 0 16px;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 0; cursor: pointer;
}

/* ---------- GREETING ---------- */
.greeting {
  padding: 14px var(--gutter) 4px;
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3);
  display: flex; justify-content: space-between; align-items: baseline;
}
.greeting .ts { color: var(--ink-4); }

/* ---------- ABOUT PAGE ---------- */
.about-head {
  padding: 22px var(--gutter) 18px;
  border-bottom: 1px solid var(--rule);
}
.about-head h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: 36px; line-height: 1.0;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.about-body {
  padding: 24px var(--gutter) 32px;
}
.about-body p {
  font-size: 17px; line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 16px;
}

/* ----- Queue sheet ----- */
.gqs-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease-out;
}
.gqs-backdrop.is-shown { opacity: 1; pointer-events: auto; }
.gqs-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  height: 80vh; max-height: 80vh;
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.22s ease-out;
}
.gqs-sheet.is-open { transform: translateY(0); }
.gqs-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--rule-soft);
}
.gqs-title {
  font-family: var(--sans); font-weight: 700; font-size: 16px;
  color: var(--ink); margin: 0;
}
.gqs-close {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.gqs-close svg { width: 18px; height: 18px; }
.gqs-speed {
  display: flex; gap: 8px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--rule-soft);
  flex-wrap: wrap;
}
.gqs-speed-btn {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
  background: transparent;
  border: 1px solid var(--rule-soft);
  padding: 5px 10px;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.gqs-speed-btn:hover { background: var(--paper-2); }
.gqs-speed-btn.is-on {
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
}
.gqs-tabs {
  display: flex; gap: 32px;
  padding: 0 24px;
  border-bottom: 1px solid var(--rule-soft);
}
.gqs-actions {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 24px;
  border-bottom: 1px solid var(--rule-soft);
}
.gqs-actions .gqs-meta {
  flex: 1;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
}
.gqs-action {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
  background: transparent; border: 0;
  padding: 0; cursor: pointer;
}
.gqs-action:hover { color: var(--ink); }
.gqs-action.is-on { color: var(--accent); }
.gqs-tab {
  position: relative;
  padding: 14px 0;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 8px;
}
.gqs-tab.is-viewed {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--ink);
}
.gqs-tab .active-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.gqs-tab .count {
  color: var(--ink-4); font-size: 10px;
}
.gqs-body {
  flex: 1; overflow-y: auto;
  padding: 8px 0 24px;
  -webkit-overflow-scrolling: touch;
}
.gqs-body.is-scrolled { box-shadow: inset 0 1px 0 var(--rule-soft); }
.gqs-empty {
  padding: 48px 24px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-4);
  text-align: center;
}
.gqs-list { list-style: none; padding: 0; margin: 0; }
.gqs-item {
  display: grid;
  grid-template-columns: 32px 60px 1fr auto;
  gap: 16px; align-items: center;
  padding: 12px 24px;
  border-bottom: 1px solid var(--rule-soft);
  position: relative;
  cursor: pointer;
}
.gqs-item.is-playing { background: var(--paper-2); }
.gqs-item.is-playing::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
}
.gqs-item.is-playing .title { color: var(--accent); }
.gqs-item.is-played { opacity: 0.5; }
.gqs-item.is-dragging { opacity: 0.4; }
.gqs-item.is-drag-over { box-shadow: inset 0 2px 0 var(--ink); }
.gqs-item .ord {
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-4); text-align: center;
}
.gqs-item .ord svg { width: 12px; height: 12px; fill: var(--accent); }
.gqs-item .thumb {
  width: 60px; height: 60px;
  background: var(--paper-3);
}
.gqs-item .core { min-width: 0; }
.gqs-item .eyebrow {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 4px;
}
.gqs-item .title {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.gqs-item .right {
  display: inline-flex; align-items: center; gap: 16px;
}
.gqs-item .dur {
  font-family: var(--mono); font-size: 10px;
  color: var(--ink-4);
}
.gqs-item .gqs-drag, .gqs-item .gqs-rm {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-3);
}
.gqs-item .gqs-drag { cursor: grab; }
.gqs-item .gqs-drag:active { cursor: grabbing; }
.gqs-item .gqs-drag svg { width: 10px; height: 14px; fill: currentColor; }
.gqs-item .gqs-rm svg { width: 14px; height: 14px; }
.gqs-item .gqs-rm:hover { color: var(--ink); }
body.gqs-locked { overflow: hidden; }
@media (max-width: 600px) {
  .gqs-item .gqs-drag { display: none; }
  .gqs-item {
    grid-template-columns: 28px 48px 1fr auto;
    gap: 12px;
    padding: 12px 16px;
  }
  .gqs-item .thumb { width: 48px; height: 48px; }
  .gqs-tabs { gap: 20px; padding: 0 16px; }
  .gqs-head { padding: 16px 20px; }
  .gqs-sheet { height: calc(100dvh - var(--topbar-h)); max-height: calc(100dvh - var(--topbar-h)); }
  .gqs-speed { padding: 12px 16px; }
  .gqs-actions { padding: 10px 16px; gap: 12px; }
}