/* Hear Homer: wine-dark sea above, daylight below. Every page opens in the
   dark water of the hero, then the wave cuts to the foam-light reading
   surface. The signature element is the soundline: runtimes drawn to scale. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--foam); color: var(--ink);
  font-family: var(--font-body); font-size: var(--size-body);
  line-height: 1.65; font-weight: 420;
  font-feature-settings: "onum" 1;
  overflow-x: hidden; /* phone safety net: nothing scrolls the page sideways */
}
img, svg { max-width: 100%; height: auto; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--s4); }

h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; margin: 0 0 var(--s3); }
h1 { font-size: var(--size-h1); font-weight: 750; letter-spacing: -0.01em; }
h2 { font-size: var(--size-h2); font-weight: 700; margin-top: var(--s12); }
h3 { font-size: var(--size-h3); font-weight: 650; margin-top: var(--s8); }
p, ul, ol, dl { margin: 0 0 var(--s4); max-width: none; }
a { color: var(--wine); text-decoration-thickness: 1.5px; text-underline-offset: 2px; }
a:hover { color: var(--terra-deep); }
strong, b { font-weight: 650; }
:focus-visible { outline: 2px solid var(--dawn); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s4); top: var(--s4); background: var(--dawn); color: var(--sea);
  padding: var(--s2) var(--s3); z-index: 10; }

.eyebrow { font-family: var(--font-display); font-size: var(--size-meta);
  font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; }

/* header */
.site-head { background-color: var(--sea); background-image: var(--grain);
  background-blend-mode: soft-light; }
.head-row { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); padding: var(--s3) var(--s4); flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--font-display); font-weight: 750; font-size: 1.1rem;
  color: var(--inverse); text-decoration: none; }
.brand-mark { width: 26px; height: 26px; color: var(--dawn); flex: none; }
/* navigation: a native <details> disclosure. Zero JavaScript, keyboard accessible,
   works with scripts disabled. A tap panel on phones, an inline row on wider screens.
   Closed by default on mobile (the UA hides the menu); the link tap navigates away,
   so it closes itself on the next page. */
.nav-details { position: relative; }
.nav-button { list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  gap: var(--s2); min-height: 44px; padding: var(--s2); color: var(--inverse);
  font-family: var(--font-display); font-weight: 600; font-size: var(--size-ui); }
.nav-button::-webkit-details-marker { display: none; }

/* MOBILE: the hamburger opens a dark drawer. Each group is a ruled section with a
   saffron header (a one-tap link to its pillar) and indented sub-links, so it reads
   as clean, evenly spaced sections rather than one long list. */
.site-nav { display: flex; flex-direction: column; position: absolute; top: 100%; right: 0;
  min-width: 18rem; max-width: min(24rem, calc(100vw - var(--s6))); z-index: 40; margin-top: var(--s2);
  max-height: calc(100vh - 84px); overflow-y: auto;
  background: var(--sea-soft); border: 1px solid var(--sea-line); border-radius: var(--radius);
  padding: var(--s3); gap: var(--s1);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--sea-deep) 62%, transparent); }
.nav-details:not([open]) .site-nav { display: none; }
.site-nav > a { display: block; padding: var(--s3) var(--s4); font-family: var(--font-display);
  font-weight: 700; font-size: 1.05rem; color: var(--inverse); text-decoration: none; border-radius: var(--radius); }
.site-nav > a:hover, .site-nav > a:focus-visible { background: var(--sea); color: var(--inverse); }
.site-nav > a.nav-quiz { color: var(--dawn); }
.nav-group { display: flex; flex-direction: column; border-top: 1px solid var(--sea-line);
  margin-top: var(--s2); padding-top: var(--s2); }
.nav-top { display: block; padding: var(--s2) var(--s4); font-family: var(--font-display);
  font-weight: 700; font-size: 1.05rem; color: var(--dawn); text-decoration: none; border-radius: var(--radius); }
.nav-top:hover, .nav-top:focus-visible { background: var(--sea); color: var(--dawn); }
.nav-panel { display: flex; flex-direction: column; margin-top: var(--s1); }
.nav-panel a { display: block; padding: var(--s2) var(--s4) var(--s2) var(--s8); color: var(--inverse); opacity: 0.8;
  font-family: var(--font-display); font-size: 0.98rem; text-decoration: none; border-radius: var(--radius); }
.nav-panel a:hover, .nav-panel a:focus-visible { opacity: 1; background: var(--sea); color: var(--inverse); }
.nav-panel a.active { color: var(--dawn); opacity: 1; }

/* DESKTOP: inline bar; headers are links to pillars, sub-links drop on hover/focus. */
@media (min-width: 880px) {
  .nav-button { display: none; }
  .nav-details::details-content { content-visibility: visible; }
  .site-nav { display: flex; flex-direction: row; align-items: center; gap: var(--s1);
    position: static; margin: 0; min-width: 0; max-width: none; max-height: none; overflow: visible;
    background: none; border: none; padding: 0; box-shadow: none; }
  .nav-details:not([open]) .site-nav { display: flex; }
  .site-nav > a, .nav-top { padding: var(--s2) var(--s3); font-size: var(--size-ui); font-weight: 600;
    opacity: 0.82; color: var(--inverse); white-space: nowrap; }
  .site-nav > a:hover, .nav-top:hover { background: none; opacity: 1; color: var(--inverse); }
  .site-nav > a.nav-quiz { opacity: 1; color: var(--inverse); box-shadow: inset 0 -2px 0 var(--dawn); }
  .nav-group { position: relative; border-top: none; margin: 0; padding: 0; }
  .nav-group > .nav-top { color: var(--inverse); }
  .nav-group > .nav-top::after { content: " \25BE"; color: var(--dawn); font-size: 0.72em; }
  .nav-group:hover > .nav-top, .nav-group:focus-within > .nav-top { opacity: 1; }
  .nav-panel { display: none; position: absolute; top: 100%; left: 0; min-width: 15rem; margin-top: 0;
    flex-direction: column; background: var(--sea-soft); border: 1px solid var(--sea-line);
    border-radius: var(--radius); padding: var(--s2);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--sea-deep) 70%, transparent); z-index: 60; }
  .nav-group:hover > .nav-panel, .nav-group:focus-within > .nav-panel { display: flex; }
  .nav-panel a { padding: var(--s2) var(--s3); font-size: 0.95rem; opacity: 0.85; }
}

/* hero: the wine-dark sea, textured with grain so it is not a flat block of color */
.hero { background-color: var(--sea); background-image: var(--grain);
  background-blend-mode: soft-light; color: var(--inverse); padding-top: var(--s8); }
/* homepage hero: a dark public-domain painting bled behind the wine-dark, faded by a
   gradient so it reads as atmosphere and the text stays at full contrast. */
.page-home .hero {
  background-image: var(--grain),
    linear-gradient(155deg, color-mix(in srgb, var(--sea) 93%, transparent),
      color-mix(in srgb, var(--sea) 60%, transparent) 88%),
    url("/assets/img/art/bocklin-calypso.jpg");
  background-size: 180px, cover, cover;
  background-position: 0 0, center, center 22%;
  background-repeat: repeat, no-repeat, no-repeat;
  background-blend-mode: soft-light, normal, normal; }
.hero-credit { font-family: var(--font-display); font-size: var(--size-meta); color: var(--inverse);
  opacity: 0.45; margin: var(--s8) 0 0; }
.hero h1 { color: var(--inverse); max-width: 21ch; }
.crumbs { font-family: var(--font-display); font-size: var(--size-meta);
  margin-bottom: var(--s4); }
.crumbs a { color: var(--inverse); opacity: 0.6; text-decoration: none; }
.crumbs a:hover { opacity: 1; text-decoration: underline; }
.crumbs [aria-current] { opacity: 0.9; color: var(--dawn); }
/* the verdict: an editorial standfirst on the wine-dark water. A dawn hairline, a
   small-caps label directly above, then a large serif lede that runs wide across
   the hero instead of hanging in a narrow right-hand column. The most-read sentence
   on the page, so it is set large and given room. */
.answer { margin: var(--s6) 0 var(--s8); max-width: 54em;
  border-top: 1px solid var(--dawn); padding-top: var(--s4); }
.answer .eyebrow { color: var(--dawn); display: block; margin-bottom: var(--s3);
  font-size: var(--size-meta); }
.answer p { margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.62rem); line-height: 1.45;
  font-weight: 430; color: var(--inverse); }
.wave { display: block; width: 100%; height: 64px; }
.wave path { fill: var(--foam); }
/* home hero: a plain-language dek states what the site is, and the soundline
   signature is lifted into the hero so the page opens on the one thing that is
   ours, the field of runtimes drawn to scale, instead of dead space. */
.hero-dek { font-family: var(--font-display); font-size: 1.15rem; font-weight: 500;
  color: var(--inverse); opacity: 0.85; max-width: 54ch; margin: 0 0 var(--s6); }
.hero-soundlines .soundlines-fig { margin: var(--s8) 0 0; }
.hero-soundlines figcaption { color: var(--inverse); opacity: 0.6; }
.hero-soundlines .soundline-label { color: var(--inverse); }
.hero-soundlines .soundline-meta { color: var(--inverse); opacity: 0.72; }
.hero-soundlines .rt-wave { color: var(--dawn); }
@media (min-width: 760px) {
  .hero-soundlines .soundlines-fig { display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--s6) var(--s8); align-items: start; }
  .hero-soundlines .soundlines-fig figcaption { grid-column: 1 / -1; }
}

/* body: ONE consistent left edge, aligned with the hero above. Prose sits at a
   readable measure and structural elements (specs, tables, art, quiz) run to the
   full width, but everything begins at the same left margin so the page reads as a
   single column, not three staggered ones. */
.content { padding: var(--s8) var(--s4) var(--s16); }
.content > h2:first-child { margin-top: var(--s4); }
/* full-bleed CTA: a wine-dark band edge to edge, its content centered. */
.content > .cta { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw); border-radius: 0; padding-top: var(--s12); padding-bottom: var(--s12);
  padding-left: max(var(--s6), calc(50vw - 33rem)); padding-right: max(var(--s6), calc(50vw - 33rem)); }

/* soundline: runtime drawn to scale. Title and time share a line; the proportional
   wave sits beneath, so each row reads like an entry in a discography. */
.soundline-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s2) var(--s4);
  align-items: baseline; margin-bottom: var(--s6); }
.soundline-label { grid-column: 1; grid-row: 1; font-family: var(--font-display);
  font-size: 1.05rem; font-weight: 650; }
.soundline-meta { grid-column: 2; grid-row: 1; text-align: right; font-family: var(--font-display);
  font-size: var(--size-meta); font-weight: 650; color: var(--ink-soft); letter-spacing: 0.03em; }
.soundline-row .rt-wave { grid-column: 1 / -1; grid-row: 2; }
.soundline { display: block; height: 26px; color: var(--wine); }
.rt-wave { display: block; max-width: 100%; height: auto; color: var(--wine); }
.answer .soundline, .pick-card .soundline { color: var(--dawn); }

/* pick card */
.pick-card { position: relative; background: var(--foam-deep); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s8) var(--s6) var(--s6);
  margin: var(--s6) 0 var(--s8); transition: border-color 0.15s ease; }
.pick-card:hover { border-color: var(--bronze); }
.pick-badge { position: absolute; top: 0; left: var(--s6); transform: translateY(-50%);
  display: inline-block; background: var(--bronze); color: var(--inverse);
  font-family: var(--font-display); font-size: var(--size-meta); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 3px var(--s3);
  border-radius: var(--radius); }
.pick-card h2, .pick-card h3 { margin-top: 0; }
.pick-card .go-listing { position: relative; z-index: 1; font-weight: 650; }

/* chooser: an index of routes into the poem, not a stack of cards. Hairline-ruled
   rows, the question in the display face, a wine arrow that steps forward on hover.
   Choosing a path should feel like running a finger down a contents page. */
.chooser { list-style: none; padding: 0; margin: var(--s6) 0 var(--s12); max-width: none;
  border-top: 1px solid var(--line); }
.chooser li { margin: 0; }
.chooser a { display: flex; justify-content: space-between; align-items: center;
  gap: var(--s4); padding: var(--s4) var(--s2); text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line); transition: background 0.15s ease, padding 0.15s ease; }
.chooser a:hover { background: var(--foam-deep); padding-left: var(--s4); }
.chooser .q { font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.05rem, 2.4vw, 1.25rem); }
.chooser .go { font-family: var(--font-display); font-weight: 650; color: var(--wine);
  font-size: 1.3rem; flex: none; }

/* verdicts */
.verdict { border-top: 1px solid var(--line); padding: var(--s4) 0; }
.verdict .eyebrow { color: var(--dawn-deep); }
.verdict p { margin: var(--s1) 0 0; }

/* recording spec card: an authoritative liner-notes entry, ruled top and bottom
   rather than boxed. Verification leads in bronze, the title carries the weight,
   the specs sit in an even grid, and the whole entry is one tap target into the
   listing button. */
.spec-card { margin: var(--s8) 0; padding: var(--s4) 0 var(--s6);
  border-top: 2px solid var(--bronze); border-bottom: 1px solid var(--line); }
.spec-cred { font-family: var(--font-display); font-size: var(--size-meta); font-weight: 650;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--bronze); margin: 0 0 var(--s3); }
.spec-card h3 { margin: 0 0 var(--s6); font-size: clamp(1.3rem, 3.2vw, 1.7rem); line-height: 1.12; }
.chip { font-family: var(--font-display); font-size: var(--size-meta); font-weight: 700;
  vertical-align: middle; }
.chip-free { color: var(--dawn-deep); border: 1px solid var(--dawn-deep);
  border-radius: var(--radius); padding: 1px var(--s2); }
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s6); margin: 0 0 var(--s6); max-width: none; }
.spec-row dt { font-family: var(--font-display); font-size: var(--size-meta);
  font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); }
.spec-row dd { margin: 3px 0 0; font-family: var(--font-display); font-size: var(--size-ui); font-weight: 500; }
.spec-extras { font-style: italic; color: var(--ink-soft); margin: 0 0 var(--s6); max-width: 62ch; }
.spec-verify { font-size: var(--size-meta); font-family: var(--font-display);
  color: var(--ink-soft); margin: var(--s3) 0 0; }
.pending-note { font-style: italic; color: var(--ink-soft); }
.spec-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: stretch; }
.spec-actions .btn { flex: 1 1 220px; min-height: 52px; margin-top: 0; }
/* the pick seal: our "best for" call, framed openly as OUR PICK (an opinion), not an
   objective award. A bronze-bordered editorial badge at the top of a recording page. */
/* Our-Pick award seal: a wine-dark card with a saffron laurel and top rule. The
   laurel is a decorative CSS background (no crawlable text), so it adds visual
   weight without SEO noise; the pick's words stay real, extractable text. */
.pick-seal { display: block; max-width: var(--measure); margin: 0 0 var(--s8);
  padding: var(--s8); border-radius: var(--radius); background: var(--sea);
  border-top: 4px solid var(--dawn); color: var(--inverse); }
.pick-seal .k { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-display);
  font-size: var(--size-meta); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dawn); margin: 0 0 var(--s3); }
.pick-seal .k::before { content: ""; flex: none; width: 1.6em; height: 1.6em;
  background: var(--laurel) center/contain no-repeat; }
.pick-seal .v { display: block; font-family: var(--font-display); font-size: clamp(1.4rem, 1rem + 1.6vw, 1.8rem);
  font-weight: 700; color: var(--inverse); line-height: 1.14; }
.pick-seal .vibe { display: block; font-family: var(--font-body); font-style: italic; font-size: 1.06rem;
  color: var(--inverse); opacity: 0.85; margin-top: var(--s4); max-width: none; }
@media (min-width: 640px) { .spec-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* registry table */
.table-wrap { position: relative; overflow-x: auto; margin: var(--s6) 0;
  border: 1px solid var(--line); border-radius: var(--radius); }
table.registry { border-collapse: collapse; width: 100%; min-width: 640px;
  font-family: var(--font-display); font-size: var(--size-ui); }
.registry th { background: var(--sea); color: var(--inverse); text-align: left;
  padding: var(--s2) var(--s3); font-weight: 650; letter-spacing: 0.04em; }
.registry td { padding: var(--s2) var(--s3); border-top: 1px solid var(--line); }
.registry tr:nth-child(even) td { background: var(--foam-deep); }
/* ranked registry: a rank medallion per row, top three in saffron */
.reg-rank { text-align: center; width: 3em; }
.reg-rank span { display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em;
  font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; border-radius: 50%;
  background: var(--foam); color: var(--ink-soft); }
.reg-rank.rank-top span { background: var(--dawn); color: var(--sea); }

/* decision matrix: the "if you..." picks as a scannable table, stacked to cards on phones */
.verdict-table { border-collapse: collapse; width: 100%; min-width: 560px; }
.verdict-table th, .verdict-table td { text-align: left; vertical-align: top; padding: var(--s4); }
.verdict-table thead th { font-family: var(--font-display); font-size: var(--size-meta); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-soft); font-weight: 700; padding: 0 var(--s4) var(--s3);
  border-bottom: 2px solid var(--bronze); }
.verdict-table thead th:first-child, .verdict-table tbody th { padding-left: 0; }
.verdict-table tbody th { font-family: var(--font-display); font-weight: 700; color: var(--bronze);
  font-size: var(--size-ui); width: 26%; border-top: 1px solid var(--line); }
.verdict-table tbody td { border-top: 1px solid var(--line); font-family: var(--font-body); color: var(--ink-soft); }
.verdict-table tbody td:first-of-type a { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.verdict-table .vt-time { display: block; margin-top: 2px; font-family: var(--font-display);
  font-variant-numeric: tabular-nums; font-size: var(--size-meta); color: var(--ink-soft); font-weight: 500; }
@media (max-width: 559px) {
  .verdict-table, .verdict-table tbody, .verdict-table tr, .verdict-table th, .verdict-table td { display: block; }
  .verdict-table { min-width: 0; }
  .verdict-table thead { display: none; }
  .verdict-table tbody tr { border-top: 2px solid var(--bronze); padding: var(--s4) 0; }
  .verdict-table tbody th { width: auto; border: 0; padding: 0 0 var(--s2); }
  .verdict-table tbody td { border: 0; padding: 0 0 var(--s2); }
}

/* the small head-to-head comparison table fits on phones instead of scrolling */
.cmp { min-width: 0; }
@media (max-width: 560px) { .cmp { font-size: 0.86rem; } .cmp th, .cmp td { padding: var(--s2); } }
.tbl-note { font-family: var(--font-display); font-size: var(--size-meta);
  color: var(--ink-soft); }

/* pending */
.pending { border: 1px dashed var(--line); border-radius: var(--radius);
  padding: var(--s4) var(--s6); margin: var(--s8) 0; }

/* CTA: a wine-dark island in daylight, optionally over a dimmed public-domain
   nocturne set through --cta-art. The dark gradient keeps text at full contrast. */
.cta { position: relative; overflow: hidden; background: var(--sea); color: var(--inverse);
  border-radius: var(--radius); padding: var(--s8) var(--s6); margin: var(--s12) 0; }
.cta::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--cta-art, none); background-size: cover; background-position: center;
  opacity: 0.3; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(
  160deg, color-mix(in srgb, var(--sea) 60%, transparent),
  color-mix(in srgb, var(--sea-deep) 90%, transparent)); }
.cta > * { position: relative; z-index: 1; }
.cta-lead { font-family: var(--font-display); font-weight: 650; font-size: 1.15rem;
  margin: 0 0 var(--s4); }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  font-family: var(--font-display); font-weight: 700; text-align: center;
  text-decoration: none; border-radius: var(--radius); padding: var(--s3) var(--s6); }
.btn-primary { background: var(--dawn); color: var(--sea); }
.btn-primary:hover { background: var(--inverse); color: var(--sea); }
/* the listing CTA: a real, large, obvious button that also covers its whole card,
   so the entire card is one tap target instead of a line of tiny grey text. */
.btn-listing { display: inline-block; background: var(--bronze); color: var(--inverse);
  margin-top: var(--s4); }
.btn-listing:hover { background: var(--sea); color: var(--inverse); }
.btn-listing::after { content: " \2192"; }
.cta-fine { font-size: var(--size-meta); font-family: var(--font-display);
  opacity: 0.8; margin: var(--s3) 0 0; }
.cta-fine a { color: var(--inverse); }

/* on-page jump navigation for long pages, hairline-bounded not boxed. */
.toc { margin: 0 0 var(--s8); padding: var(--s4) 0 0; border: 0; border-top: 2px solid var(--bronze); }
.toc-label { font-family: var(--font-display); font-size: var(--size-meta); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 var(--s3); }
.toc ul { list-style: none; margin: 0; padding: 0; max-width: none; columns: 2; column-gap: var(--s8);
  counter-reset: toc; }
.toc li { margin-bottom: var(--s2); break-inside: avoid; counter-increment: toc; }
.toc a { font-family: var(--font-display); font-size: var(--size-ui); font-weight: 600; }
.toc a::before { content: counter(toc) ". "; color: var(--bronze); font-weight: 700; }

/* faq: native details accordions. Answer text stays in the DOM when collapsed, so
   it is fully crawlable and extractable; the FAQPage schema carries it regardless. */
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-of-type { border-bottom: 1px solid var(--line); }
.faq-item summary { cursor: pointer; list-style: none; position: relative;
  padding: var(--s4) var(--s8) var(--s4) 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { margin: 0; display: inline; font-size: var(--size-h3); }
.faq-item summary::after { content: "+"; position: absolute; right: var(--s2); top: 50%;
  transform: translateY(-50%); font-family: var(--font-display); font-weight: 400;
  font-size: 1.6rem; line-height: 1; color: var(--wine); }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover h3 { color: var(--wine); }
.faq-a { padding: 0 0 var(--s4); max-width: var(--measure); }
.faq-a p { margin: 0; }
/* translator and narrator names link to their entity, above the card cover link */
.spec-grid a { position: relative; z-index: 2; color: var(--wine); text-decoration-thickness: 1px; }

/* related */
.related { border-top: 3px solid var(--sea); margin-top: var(--s12); padding-top: var(--s6); }
.related ul { list-style: none; padding: 0; display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); max-width: none; }
.related li { margin: 0; }
.related a { display: flex; align-items: center; min-height: 100%; background: var(--foam-deep);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4);
  font-family: var(--font-display); font-weight: 600; font-size: var(--size-ui);
  text-decoration: none; color: var(--ink); transition: border-color 0.15s ease, background 0.15s ease; }
.related a:hover { border-color: var(--wine); background: var(--line); color: var(--wine-deep); }

/* footer */
.site-foot { background-color: var(--sea-deep); background-image: var(--grain);
  background-blend-mode: soft-light; color: var(--inverse); padding: var(--s12) 0 var(--s8); }
.foot-brand { max-width: 48ch; margin-bottom: var(--s8);
  border-bottom: 1px solid var(--sea-line); padding-bottom: var(--s6); }
.foot-brand .brand { font-size: 1.25rem; }
.foot-brand p { margin: var(--s3) 0 0; opacity: 0.72; font-family: var(--font-body);
  font-size: var(--size-ui); max-width: none; }
.foot-grid { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.foot-col h4 { color: var(--dawn); font-size: var(--size-meta); letter-spacing: 0.12em;
  text-transform: uppercase; margin-bottom: var(--s2); }
.foot-col ul { list-style: none; padding: 0; margin: 0; }
.foot-col li { margin-bottom: var(--s2); }
.foot-col a { color: var(--inverse); opacity: 0.8; text-decoration: none;
  font-family: var(--font-display); font-size: var(--size-ui); }
.foot-col a:hover { opacity: 1; text-decoration: underline; }
.foot-meta { border-top: 1px solid var(--sea-line); margin-top: var(--s8);
  padding-top: var(--s6); font-size: var(--size-meta); opacity: 0.75; }
.foot-meta p { max-width: none; }
.colophon { font-style: italic; }

@media (max-width: 719px) {
  .content { padding-top: var(--s6); }
  h2 { margin-top: var(--s8); }
  .table-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0;
    width: 28px; background: linear-gradient(to left, var(--foam), transparent);
    pointer-events: none; }
}
/* mobile hardening: full-width thumb-friendly primary actions and 44px tap targets */
@media (max-width: 559px) {
  .cta .btn-primary, a.quiz-cta-btn, .spec-card > .btn-primary { display: flex; width: 100%; }
  .spec-actions .btn { flex-basis: 100%; }
  .nav-panel a { min-height: 44px; display: flex; align-items: center; }
  .hero { padding-top: var(--s6); }
  h2 { margin-top: var(--s8); }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* liner-notes cards: fully tappable via the stretched cover link */
.spec-card, .spec-mini { position: relative; }
.card-cover::after { content: ""; position: absolute; inset: 0; }
.spec-mini { background: var(--foam-deep); border: 1px solid var(--line);
  border-top: 2px solid var(--wine); border-radius: var(--radius);
  padding: var(--s4); margin: var(--s4) 0; }
.spec-mini h3 { margin-top: 0; }
.spec-mini dl { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--s3);
  margin: 0; font-family: var(--font-display); font-size: var(--size-ui); max-width: none; }
.spec-mini dt { color: var(--ink-soft); font-size: var(--size-meta);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 650; }
.spec-mini dd { margin: 0; }
.mini-pair { display: grid; gap: var(--s4); margin: var(--s6) 0; }
@media (min-width: 620px) { .mini-pair { grid-template-columns: 1fr 1fr; } }

/* the soundwave signature */
.rt-wave { color: var(--wine); display: block; }
.registry td svg { vertical-align: middle; }

/* review and listener quotes: attributed, dated, no bar. Clean italic serif with a
   display-face citation naming exactly where the quote is from. */
.listeners blockquote { margin: 0 0 var(--s6); padding: 0; font-family: var(--font-body);
  font-style: italic; font-size: 1.16rem; line-height: 1.45; max-width: var(--measure); }
.listeners blockquote p { margin: 0; max-width: none; }
.listeners cite { display: block; margin-top: var(--s2); font-style: normal;
  font-family: var(--font-display); font-size: var(--size-meta); font-weight: 600; color: var(--ink-soft); }
.listeners cite a { color: var(--wine); }

/* homepage art direction and final craft details */
.page-home .hero h1 { font-size: clamp(2.3rem, 8vw, 3.9rem); max-width: 18ch; }
.soundlines-fig { margin: 0 0 var(--s8); }
.soundlines-fig figcaption { font-family: var(--font-display); font-size: var(--size-meta);
  font-weight: 650; color: var(--ink-soft); letter-spacing: 0.08em;
  text-transform: uppercase; margin-bottom: var(--s3); }
::selection { background: var(--dawn); color: var(--sea); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .chooser .go { transition: transform 0.15s ease; }
  .chooser a:hover .go { transform: translateX(3px); }
}
.wave-out path { fill: var(--sea-deep); }

/* opening-lines comparison: the same first line across translations, so a reader
   can hear the difference in a glance. Hairline-ruled, italic serif, attributed. */
.openings { display: grid; gap: var(--s6); margin: var(--s6) 0 var(--s8); max-width: none;
  grid-template-columns: 1fr; }
@media (min-width: 640px) { .openings { grid-template-columns: 1fr 1fr; } }
.openings figure { margin: 0; padding-top: var(--s3); border-top: 1px solid var(--line); }
.openings blockquote { margin: 0 0 var(--s2); font-family: var(--font-body); font-style: italic;
  font-size: 1.2rem; line-height: 1.38; max-width: none; }
.openings figcaption { font-family: var(--font-display); font-size: var(--size-meta); color: var(--ink-soft); }
.openings figcaption a { color: var(--wine); }

/* listen next: adjacency cards for the reader who finished the poem, fully tappable. */
.listen-next { margin-top: var(--s12); }
.next-grid { display: grid; gap: var(--s4); grid-template-columns: 1fr; margin: var(--s6) 0; max-width: none; }
@media (min-width: 620px) { .next-grid { grid-template-columns: 1fr 1fr; } }
.next-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s4); background: var(--foam-deep); transition: border-color 0.15s ease; }
.next-card:hover { border-color: var(--wine); }
.next-card h3 { margin: 0 0 var(--s1); }
.next-meta { font-family: var(--font-display); font-size: var(--size-meta); color: var(--ink-soft); margin: 0 0 var(--s2); }
.next-card p { margin: 0 0 var(--s3); max-width: none; }
.next-link { font-family: var(--font-display); font-weight: 650; color: var(--wine); font-size: var(--size-ui); }
/* small resource note: a link out to an official sample or interview video. */
.watch { font-family: var(--font-display); font-size: var(--size-ui); color: var(--ink-soft); }
.watch a { color: var(--wine); }

/* the finder quiz: zero-JS. Radio inputs reveal the matching result through a
   sibling selector, so every recommendation stays in the HTML for crawlers and LLMs,
   and the result is the high-intent moment where the affiliate action lives. */
.quiz { margin: var(--s6) 0 var(--s8); max-width: none; }
.quiz-opt { position: absolute; width: 1px; height: 1px; opacity: 0; }
.quiz-label { display: flex; align-items: center; gap: var(--s3); min-height: 52px;
  cursor: pointer; padding: var(--s3) var(--s4); margin-bottom: var(--s2);
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--foam-deep);
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; line-height: 1.25;
  transition: border-color 0.15s ease, background 0.15s ease; }
.quiz-label::before { content: ""; flex: none; width: 1.1em; height: 1.1em;
  border: 2px solid var(--line); border-radius: 50%; }
.quiz-label:hover { border-color: var(--wine); }
.quiz-opt:checked + .quiz-label { border-color: var(--bronze); background: var(--foam);
  box-shadow: inset 0 0 0 1px var(--bronze); }
.quiz-opt:checked + .quiz-label::before { border-color: var(--bronze); background: var(--bronze);
  box-shadow: inset 0 0 0 2px var(--foam); }
.quiz-opt:focus-visible + .quiz-label { outline: 2px solid var(--dawn); outline-offset: 2px; }
.quiz-results { margin-top: var(--s6); }
/* result reveal: a two-column "card" so the answer lands like a personality-quiz
   result, a themed painting beside the pick. Stacks to one column on phones. */
.qr { display: none; grid-template-columns: 1fr; gap: var(--s6);
  margin-top: var(--s6); padding: var(--s6); border-radius: var(--radius); }
.qr-first { background: #f8efd8; } .qr-grand { background: #f4e0e6; }
.qr-short { background: #e0ecef; } .qr-free { background: #e7efdc; }
.qr-drama { background: #ece5f3; } .qr-fry { background: #f8e7d4; }
@media (min-width: 620px) { .qr { grid-template-columns: 15rem 1fr; align-items: center; column-gap: var(--s8); } }
.qr-art { margin: 0; }
.qr-art img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--radius); border: 1px solid var(--line); }
.qr-body > :first-child { margin-top: 0; }
.qr h3 { font-size: clamp(1.3rem, 3vw, 1.6rem); margin: var(--s2) 0; }
.qr-badge { font-family: var(--font-display); font-size: var(--size-ui); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bronze); display: block; }
@media (prefers-reduced-motion: no-preference) {
  .quiz-results .qr { animation: qr-reveal 0.45s ease both; }
  @keyframes qr-reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}
.qr-cta { margin: var(--s4) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.qr-more { font-family: var(--font-display); font-size: var(--size-ui); font-weight: 600; }
#quiz-first:checked ~ .quiz-results .qr-first,
#quiz-grand:checked ~ .quiz-results .qr-grand,
#quiz-short:checked ~ .quiz-results .qr-short,
#quiz-free:checked ~ .quiz-results .qr-free,
#quiz-drama:checked ~ .quiz-results .qr-drama,
#quiz-fry:checked ~ .quiz-results .qr-fry { display: grid; }

/* key-takeaway callout: the one-glance summary of a recording, ruled not boxed. */
.callout { border-top: 2px solid var(--bronze); border-bottom: 1px solid var(--line);
  padding: var(--s4) 0; margin: var(--s6) 0; max-width: none; }
.callout-label { font-family: var(--font-display); font-size: var(--size-meta); font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--bronze); display: block; margin-bottom: var(--s2); }
.callout p { margin: 0; max-width: var(--measure); font-size: 1.08rem; }

/* who it is for / who should skip: two ruled columns with meaningful markers, a
   bronze check for the reasons to pick it and a muted arrow for the reasons to look
   elsewhere (each of those bridges to the better fit). */
.for-skip { display: grid; gap: var(--s6) var(--s8); margin: var(--s6) 0; max-width: none;
  grid-template-columns: 1fr; }
@media (min-width: 640px) { .for-skip { grid-template-columns: 1fr 1fr; } }
.for-skip > div { padding-top: var(--s3); border-top: 2px solid var(--line); }
.for-skip > div:first-child { border-top-color: var(--bronze); }
.for-skip h3 { margin: 0 0 var(--s4); font-size: var(--size-h3); }
.for-skip ul { list-style: none; margin: 0; padding: 0; max-width: none; }
.for-skip li { position: relative; padding-left: 1.9em; margin-bottom: var(--s3); }
.for-skip li::before { position: absolute; left: 0; top: 0; font-family: var(--font-display);
  font-weight: 700; font-size: 1.05em; }
.for-skip > div:first-child li::before { content: "\2713"; color: var(--bronze); }
.for-skip > div:last-child li::before { content: "\2192"; color: var(--ink-soft); }
/* the skip side gets the Cyclops eye and a terracotta rule: the honest downside */
.for-skip > div:last-child { border-top-color: var(--terra); }
.for-skip > div:last-child h3 { display: inline-flex; align-items: center; gap: var(--s2); }
.for-skip > div:last-child h3::before { content: ""; flex: none; width: 1.3em; height: 1.3em;
  background: var(--cyclops) center/contain no-repeat; }

/* portrait-orientation art is constrained and centered so a tall canvas does not
   swallow the reading column. */
.art.portrait { max-width: 460px; margin-left: auto; margin-right: auto; }

/* marginalia: a real, dated historical note set like a manuscript gloss. The
   audience is here for the history, so these are earned facts, never filler. */
.fact { margin: var(--s12) 0; max-width: var(--measure);
  border-top: 1px solid var(--line); padding-top: var(--s3); }
.fact .fact-label { display: block; font-family: var(--font-display); font-size: var(--size-meta);
  font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--dawn-deep); margin-bottom: var(--s2); }
.fact p { margin: 0; font-family: var(--font-body); font-style: italic; font-size: 1.08rem; color: var(--ink); }

/* public-domain art figures. Rule from the image manifest: an image never sits
   above the answer block or the pick card, so the extraction zone stays text-fast.
   width/height on every <img> means the browser reserves the box: zero layout
   shift, no JS. Files are self-hosted, resized to 1600px, compressed under 350KB. */
.art { margin: var(--s12) 0; }
.art img { width: 100%; height: auto; display: block; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--foam-deep); }
.art figcaption { font-family: var(--font-display); font-size: var(--size-meta);
  color: var(--ink-soft); margin-top: var(--s2); line-height: 1.4; max-width: var(--measure); }

/* pull quotes: translators, narrators, the director, the poem itself. Short,
   attributed, dated, and shaped to be lifted verbatim by a reader or an engine. */
.pquote { margin: var(--s12) 0; max-width: 48ch; }
.pquote::before { content: "\201C"; display: block; font-family: var(--font-body);
  font-size: 3.6rem; line-height: 0.6; color: var(--dawn); margin-bottom: var(--s2); }
.pquote p { font-family: var(--font-body); font-style: italic; font-weight: 430;
  font-size: 1.5rem; line-height: 1.36; margin: 0 0 var(--s3); max-width: none; }
.pquote cite { display: block; font-family: var(--font-display); font-style: normal;
  font-size: var(--size-meta); font-weight: 600; color: var(--ink-soft); }
.pquote cite a { color: var(--wine); }

/* ============================================================================
   Modern web-platform layer. Every rule here is a progressive enhancement:
   browsers without support fall back to the plain, fast, correct page. Zero
   JavaScript, zero added critical-path bytes of any consequence, nothing that
   moves the LCP text. Support checked against current sources, July 2026.
   ============================================================================ */

/* 1. Typographic craft. balance evens out headline line lengths (Chrome/Edge
   114+, Firefox 121+, Safari 17.5+); pretty kills orphans in body copy
   (Chrome/Edge 117+, Safari 26+). Unsupported browsers ignore the keyword. */
h1, h2, h3, h4, .cta-lead, .pick-badge + h2 { text-wrap: balance; }
p, li, dd, figcaption, blockquote, .answer p { text-wrap: pretty; }

/* 2. Cross-document view transitions. Navigating between pages cross-fades like
   a native app instead of a hard white flash, with the wine-dark header held
   steady across the change. No script. Chrome 126+, Safari 18.2+; every other
   browser just navigates the old way, so nothing breaks. */
@view-transition { navigation: auto; }
.site-head { view-transition-name: site-head; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 240ms; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important; }
}

/* 3. Scroll-driven reveal, tied to the site's wave signature. Deep-page elements
   rise and resolve as they enter the viewport, driven entirely by the scroll
   position through a view() timeline (no IntersectionObserver, no JS). Guarded
   twice: only where the feature exists AND motion is welcome. The critical
   above-the-fold zone (hero, pick card, soundlines) is deliberately excluded so
   nothing flashes on load or delays the LCP. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes hh-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
    .content .art, .content .pquote, .content .fact, .content .listeners blockquote,
    .content .verdict, .content .spec-card, .content .faq-item {
      animation: hh-rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 18%;
    }
  }
}

/* ---- quiz link in the nav: the saffron accent, so it reads as the primary action ---- */
.site-nav a.nav-quiz { color: var(--dawn); font-weight: 700; }
.site-nav a.nav-quiz:hover, .site-nav a.nav-quiz:focus-visible { color: var(--dawn); opacity: 1; }
@media (min-width: 760px) { .site-nav a.nav-quiz { opacity: 1; box-shadow: inset 0 -2px 0 var(--dawn); } }

/* ---- the free-credit explainer on the CTA island ---- */
.cta-credit { font-family: var(--font-body); font-size: var(--size-body); line-height: 1.5;
  margin: 0 0 var(--s6); color: var(--inverse); opacity: 0.9; max-width: 48ch; }

/* ---- YouTube embed on the comparison pages: a deliberate, scoped exception to
   the otherwise zero-JS build. Lazy-loaded and on the privacy domain, so it costs
   nothing until the reader scrolls to it. ---- */
.video-fig { margin: var(--s12) 0; }
.video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--line); background: var(--sea); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-fig figcaption { font-family: var(--font-display); font-size: var(--size-meta);
  color: var(--ink-soft); margin-top: var(--s2); line-height: 1.4; max-width: none; }

/* ---- browse widget: a scannable card grid of the next best pages ---- */
.browse { margin: var(--s16) 0 var(--s12); }
.browse > p { color: var(--ink-soft); max-width: var(--measure); }
.browse-grid { display: grid; gap: var(--s3); grid-template-columns: 1fr; margin-top: var(--s6); max-width: none; }
@media (min-width: 560px) { .browse-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .browse-grid { grid-template-columns: 1fr 1fr 1fr; } }
.browse-card { display: flex; flex-direction: column; gap: var(--s1); min-height: 64px; justify-content: center;
  padding: var(--s4) var(--s6); border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--foam-deep); text-decoration: none; transition: border-color 0.15s, transform 0.15s; }
.browse-card:hover { border-color: var(--wine); transform: translateY(-2px); }
.browse-title { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.browse-note { font-size: var(--size-meta); color: var(--ink-soft); }

/* ---- honest page-level reviewed date, sits under the hero answer ---- */
.reviewed { font-family: var(--font-display); font-size: var(--size-meta); color: var(--inverse);
  opacity: 0.62; margin: var(--s4) 0 0; letter-spacing: 0.02em; }
/* mini-card sample link reads as an action, not a footnote */
.spec-mini .spec-verify a { font-family: var(--font-display); font-weight: 700; color: var(--wine); }

/* verification stamp + reception (a retailer's own rating, dated and attributed) */
.cred-check { color: var(--bronze); font-weight: 800; }
.spec-reception { font-family: var(--font-display); font-size: var(--size-ui); margin: 0 0 var(--s4); color: var(--ink); }
.spec-stars { color: var(--dawn-deep); }
.spec-reception-note { color: var(--ink-soft); font-weight: 500; }

/* ---- ranked picks strip: the opinion layer above the neutral registry table.
   Wine-dark tiles with a numbered medallion and a plain-language vibe. ---- */
.picks { margin: var(--s8) 0 var(--s12); }
.picks > p { color: var(--ink-soft); max-width: var(--measure); }
.picks-grid { list-style: none; margin: var(--s6) 0 0; padding: 0; display: grid; gap: var(--s4);
  grid-template-columns: 1fr; max-width: none; }
@media (min-width: 740px) { .picks-grid { grid-template-columns: repeat(3, 1fr); } }
.pick-tile { margin: 0; }
.pick-tile a { display: flex; flex-direction: column; gap: var(--s2); height: 100%;
  padding: var(--s6); background: var(--sea); color: var(--inverse); border-radius: var(--radius);
  border: 1px solid var(--sea-line); text-decoration: none;
  background-image: var(--grain); background-blend-mode: soft-light;
  transition: transform 0.15s, border-color 0.15s; }
.pick-tile a:hover, .pick-tile a:focus-visible { transform: translateY(-3px); border-color: var(--dawn); }
.pick-rank { display: inline-flex; align-items: center; justify-content: center; width: 1.9em; height: 1.9em;
  border-radius: 50%; background: var(--dawn); color: var(--sea); font-family: var(--font-display);
  font-weight: 800; font-size: 0.95rem; }
.pick-tag { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em;
  font-size: var(--size-meta); font-weight: 700; color: var(--dawn); }
.pick-name { font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; line-height: 1.15; }
.pick-vibe { font-family: var(--font-body); font-style: italic; font-size: 1rem; opacity: 0.88; }

/* TOC gets clearer hover affordance so it reads as navigation, not decoration */
.toc a { text-decoration: none; }
.toc a:hover, .toc a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }