/* 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 IDENTITY (home, top — color test) ---------- */
.lead-identity {
  padding: 32px var(--gutter) 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-soft);
}
.lead-identity h1 {
  font-family: var(--sans); font-weight: 700;
  font-size: 44px; line-height: 0.96;
  letter-spacing: -0.05em;
  color: #E2323F;
  text-wrap: balance;
}
.lead-identity .dek {
  margin-top: 14px;
  font-size: 17px; line-height: 1.45;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ---------- 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); }

/* ---------- MEGA MENU (desktop, under Index) ---------- */
.strip-shell { position: relative; }
.mega-caret { font-size: 10px; opacity: 0.55; }
.mega {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  z-index: 60;
  visibility: hidden; opacity: 0; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.16s, transform 0.16s, visibility 0.16s;
}
.mega.open {
  visibility: visible; opacity: 1; pointer-events: auto;
  transform: translateY(0);
}
.mega-inner {
  /* Wider than --max on purpose. Biblioteca takes a third column on the left,
     and fitting it inside 760px narrowed the two article columns enough to push
     their descriptions onto a third line. That changes the row heights, and the
     Biblioteca tile's height is measured against those rows. */
  max-width: 1020px; margin: 0 auto;
  padding: 14px var(--gutter) 18px;
  display: grid; grid-template-columns: auto 1fr 1fr;
  gap: 2px 18px;
}
.mega-item {
  /* flex-start, not center: keeps every tile's top edge on the same line as its
     row, so Biblioteca stays aligned with Cruise if a description ever wraps to
     an extra line and grows the row. */
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px;
}
.mega-item:hover { background: var(--paper-2); }
.mega-img {
  width: 56px; height: 56px; flex-shrink: 0;
  background: var(--paper-2); border: 1px solid var(--rule-soft);
}
/* ---- Biblioteca: its own left column, image over text ----
   Two grid items rather than one, so both edges are set by the grid instead of
   by fixed pixel heights: the image sits in row 1 and stretches to whatever the
   Cruise row is, and the text sits in row 2, so its first line always starts on
   the same line as the top of the Ports tile. That stays true if a description
   wraps to an extra line and grows the rows. */
.mega-feature-img,
.mega-feature-text {
  grid-column: 1;
  padding: 10px;
  /* The column gap is 18px for the two article columns. Pulling 16px back here
     leaves 2px, so tile edge to tile edge is 10 + 2 + 10 = 22px — the same gap
     as between the Cruise and Ports tiles. */
  margin-right: -16px;
}
/* Rows 1 AND 2, so the artwork runs from the top of the Cruise tile to the
   bottom of the Ports tile. Stretched rather than given a fixed 134px, so it
   still lands on those two edges if a description wraps and grows a row. */
.mega-feature-img { grid-row: 1 / span 2; display: flex; }
.mega-feature-img .mega-img { width: 288px; height: auto; align-self: stretch; }
.mega-feature-text {
  /* Row 3, level with the Casinos row. Between them these two claim the whole
     left column — leave any cell of it empty and the sixth tile auto-places
     into the gap, which shunts the bottom row a column to the left. */
  grid-row: 3;
  display: flex; flex-direction: column; gap: 3px;
  width: 308px;
}
.mega-feature-img:hover,
.mega-feature-text:hover,
.mega-inner:has(.mega-feature-img:hover) .mega-feature-text,
.mega-inner:has(.mega-feature-text:hover) .mega-feature-img { background: var(--paper-2); }
.mega-feature-text:hover .mega-title,
.mega-inner:has(.mega-feature-img:hover) .mega-feature-text .mega-title { color: var(--accent); }
/* Inline SVG (not img) so the glyphs take the theme variables and survive
   dark mode — same fill/stroke classes as the games thumbnails. */
.mega-img svg { display: block; width: 100%; height: 100%; }
.mega-img .fi { fill: var(--ink); }
.mega-img .fa { fill: var(--accent); }
.mega-img .fw { fill: var(--paper); }
.mega-img .fn { fill: none; }
.mega-img .si { stroke: var(--ink); }
/* Biblioteca's tile is finished full-colour artwork, so it arrives as an external
   file rather than inline markup: nothing in it reads a theme variable, so the
   reason above does not apply, and 44KB of path data inlined here would land in
   the HTML of every page on the site instead of in one cached request.
   contain leaves the box's own paper-2 background as the surround. */
.mega-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mega-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mega-title {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink);
  display: flex; align-items: center; gap: 6px;
}
.mega-title .ct { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.mega-item:hover .mega-title,
.mega-item[aria-current="page"] .mega-title { color: var(--accent); }
.mega-desc { font-family: var(--sans); font-size: 12px; line-height: 1.4; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  .mega { transition: none; transform: none; }
}

/* Mobile: hide the strip — the bottom tabbar handles navigation. */
@media (max-width: 640px) {
  .index-strip { display: none; }
  .mega { 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; }

/* Podcast rail variant: square thumb replaces the index number.
   Desktop keeps the right-edge play button; mobile moves play onto
   the thumb (bottom-left corner square) and hides the right button. */
.rail-item--thumb .thumb {
  position: relative;
  width: 88px; height: 88px; flex-shrink: 0;
  margin-right: 14px;
  align-self: center;
}
.rail-item--thumb .thumb img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}
.rail-item--thumb .thumb::after {
  /* hairline inset so light artwork doesn't bleed into the paper bg */
  content: ""; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--rule-soft);
  pointer-events: none;
}
.rail-item--thumb .thumb-num {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: var(--ink); color: var(--paper);
  font-family: var(--mono); font-size: 15px; letter-spacing: 0.04em;
}
.rail-item--thumb .thumb-play {
  display: none;
  position: absolute; inset: 0;
}
.rail-item--thumb .thumb-play svg {
  position: absolute; left: 0; bottom: 0;
  width: 22px; height: 22px;
  padding: 5px; box-sizing: border-box;
  /* Fixed colors, not theme vars: the square sits on the baked-light tile
     artwork, so it must stay ink-on-light in dark mode too. */
  background: #111; fill: #f4f3ee;
}
.rail-item--thumb.is-playing .thumb-play svg { background: var(--accent); fill: #fff; }
@media (max-width: 640px) {
  .rail-item--thumb .play-sm { display: none; }
  .rail-item--thumb .thumb-play { display: block; }
  .rail-item--thumb .core { padding-right: 0; }
}

/* ---------- 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); }
.article-body blockquote {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 16px;
  margin: 20px 0;
  color: var(--ink-2);
}
.article-body blockquote > :last-child { margin-bottom: 0; }

.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);
}
/* hover-capable pointers only: iOS keeps :hover stuck on the last-tapped
   row across bfcache restores, leaving one title permanently accent. */
@media (hover: hover) {
  .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;
}
.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-player {
  padding: 4px 24px 14px;
  border-bottom: 1px solid var(--rule-soft);
}
.gqs-player-title {
  font-family: var(--sans); font-weight: 600;
  font-size: 14.5px; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 10px;
  min-height: 19px;
}
.gqs-player-scrub {
  position: relative;
  height: 3px;
  background: var(--rule-soft);
  margin-bottom: 6px;
}
.gqs-player-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--accent);
  width: 0%;
  pointer-events: none;
}
.gqs-player-seek {
  position: absolute; top: -8px; left: 0;
  width: 100%; height: 19px;
  opacity: 0; cursor: pointer; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent;
}
.gqs-player-times {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--ink-3); letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.gqs-player-controls {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-bottom: 14px;
}
.gqs-player-skip {
  background: transparent; border: 0; padding: 6px 10px;
  font-family: var(--mono); font-size: 11.5px;
  color: var(--ink-2); cursor: pointer;
  letter-spacing: 0.04em;
}
.gqs-player-skip:hover { color: var(--ink); }
.gqs-player-play {
  width: 42px; height: 42px;
  background: var(--accent); color: #fff;
  border: 0; padding: 0; cursor: pointer; border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.gqs-player-play svg { width: 14px; height: 14px; fill: #fff; margin-left: 1px; }
.gqs-player-play.is-playing svg { margin-left: 0; }
.gqs-player-icon-pause { display: none; }
.gqs-player-play.is-playing .gqs-player-icon-play  { display: none; }
.gqs-player-play.is-playing .gqs-player-icon-pause { display: inline; }
.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; }
}

/* ---------- ACCOUNT PAGE ---------- */
.acct-wrap { max-width: 640px; padding: 0 var(--gutter) 60px; }
.acct-caps {
  display: block;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 8px;
}
.acct-new, .acct-have, .acct-linked { padding: 24px 0; border-bottom: 1px solid var(--rule-soft); }
.acct-linked { border-bottom: 0; }
.acct-wrap p { font-size: 14px; line-height: 1.55; color: var(--ink-2); max-width: 58ch; margin: 0 0 12px; }
.acct-form { display: flex; gap: 10px; max-width: 430px; }
.acct-input {
  flex: 1; min-width: 0;
  border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em;
  padding: 8px 12px;
}
.acct-input:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.acct-code {
  font-family: var(--mono); font-size: 26px; letter-spacing: 0.05em;
  margin: 4px 0 14px;
  user-select: all; word-break: break-all;
}
.acct-row { display: flex; gap: 10px; flex-wrap: wrap; }
.acct-warn { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 14px; }
.acct-status { font-family: var(--mono); font-size: 12px; color: var(--ink); padding-top: 14px; min-height: 20px; }
[data-acct] .acct-linked { display: none; }
[data-acct].linked .acct-linked { display: block; }
[data-acct].linked .acct-new, [data-acct].linked .acct-have { display: none; }
@media (max-width: 640px) {
  .acct-code { font-size: 20px; }
  .acct-form { flex-wrap: wrap; }
}

/* ---------- SAVE RIBBONS + STRIP ICONS ---------- */
.index-strip .strip-gap { margin-left: auto; }
.index-strip .strip-icon {
  padding: 14px 14px;
  border-right: 0; border-left: 1px solid var(--rule-soft);
}
.index-strip .strip-icon svg { width: 15px; height: 15px; display: block; }
.index-strip .strip-icon.is-active { color: var(--accent); }
.article-head .byline .fav-ribbon {
  margin-left: auto;
  border: 0; padding: 0; background: transparent;
  color: var(--ink-3); cursor: pointer;
  display: inline-flex; align-items: center;
}
.article-head .byline .fav-ribbon svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
}
.article-head .byline .fav-ribbon:hover { color: var(--ink); }
.article-head .byline .fav-ribbon.on { color: var(--accent); }
.article-head .byline .fav-ribbon.on svg { fill: var(--accent); stroke: var(--accent); }