/* DOCUMENT PAGES — privacy, support, terms.
 *
 * Pages a listener reads once and leaves: no controls, no state, no script. They
 * exist because stores require them, and they are the station's voice in the one
 * place most products switch to somebody else's boilerplate.
 *
 * WHY THIS FILE EXISTS. privacy.html and support.html were written with their own
 * near-identical <style> blocks. Roku then asked for terms of use as well, which
 * is the third copy — the rule-of-three trigger, and it was called in advance:
 * the DOSI note on the earlier commit said "extract when a third document page
 * appears, terms.html is plausible if Roku asks for one." It did.
 *
 * 404.html IS DELIBERATELY NOT A CLIENT. It carries its own copy and should keep
 * it: it has to render when everything it would otherwise depend on has already
 * failed, and a 404 that needed a stylesheet to load is a 404 that cannot report
 * a missing stylesheet. That is a documented exception, not an oversight.
 *
 * Everything here is mobile-first — the unqualified rule is the phone, and there
 * is no max-width query anywhere in this file. Colours and faces come from
 * tokens.css; nothing here redefines .btn, which is a ratchet. */

*{box-sizing:border-box}

body{
  margin:0; min-height:100dvh;                  /* dvh, not vh: vh clips under mobile browser chrome */
  background:var(--bg); color:var(--ink);
  font-family:var(--sans);
  padding:2.5rem 16px 4rem;                     /* 16px side gutter at every width */
}

/* ~65 characters of running text. Wider reads as a wall and these pages are
   already the least-wanted reading on the station. */
/* The column width is one value, so the header, the page and the footer line
   up. Text pages keep 42rem; the music hub (body.wide) is a grid of sleeves,
   not prose, and takes 64rem. */
body{ --doc-w:42rem }
body.wide{ --doc-w:64rem }
main{ max-width:var(--doc-w); margin:0 auto }

/* The station's mark, linking home, on every document page. */
.doc-top{ max-width:var(--doc-w); margin:-1rem auto 1.75rem; display:flex; align-items:center;
  justify-content:space-between; gap:1rem }
.doc-brand{ display:inline-flex; align-items:center; min-height:44px }
.doc-brand img{ display:block; height:24px; width:auto }
@media (min-width:640px){ .doc-brand img{ height:29px } }
.doc-listen{ display:inline-flex; align-items:center; min-height:44px; padding:0 14px;
  border:1px solid var(--brand); border-radius:22px; color:var(--brand); text-decoration:none;
  font-size:.875rem; font-weight:500 }
.doc-listen:hover{ background:rgba(80,240,80,.08) }

.eyebrow{
  font-family:var(--cond); font-weight:700;
  font-size:.8125rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim); margin:0 0 .5rem;
}

h1{
  font-family:var(--cond); font-weight:700;
  font-size:clamp(2rem,8vw,3rem); line-height:1.05;
  letter-spacing:-.02em; margin:0 0 .75rem; text-wrap:balance;
}

.lede{ color:var(--ink); font-size:1.0625rem; line-height:1.6; margin:0 0 .5rem }
.lede:last-of-type{ margin-bottom:2.5rem }
.updated{ color:var(--dim); font-size:.875rem; margin:0 0 2.5rem }

/* The rule belongs to the heading that follows it, not to the section above —
   so the border is on h2 rather than a separate element nobody can see. */
h2{
  font-family:var(--cond); font-weight:700;
  font-size:1.375rem; line-height:1.2; margin:2.5rem 0 .75rem;
  padding-top:1.5rem; border-top:1px solid var(--line);
  text-wrap:balance;
}
h3{ font-family:var(--cond); font-weight:700; font-size:1.0625rem; margin:1.5rem 0 .5rem; color:var(--ink) }

p,li{ color:var(--dim); line-height:1.65; margin:0 0 1rem }
li{ margin:0 0 .5rem }
ul,ol{ margin:0 0 1rem; padding-left:1.25rem }
strong{ color:var(--ink); font-weight:500 }
code{ font-family:var(--mono); font-size:.9375em; color:var(--ink) }
a{ color:var(--brand) }

/* ONE COMPONENT, NOT TWO. This was `.keep` on the privacy page and `.contact` on
   the support page — identical rules under two names, which is the divergent-
   duplication shape waiting to happen: the next person restyles one and the
   pages quietly stop matching. It lifts the single thing a reader may have come
   for, so a page gets at most one. */
.note{
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--brand);
  padding:1.25rem; margin:0 0 1rem;
}
.note p{ margin:0 0 .5rem; color:var(--ink) }
.note p:last-child{ margin:0 }
/* A mailto is a tap target on a phone, so it gets a target's height rather than
   a line of text's. */
.note a{ font-weight:500; display:inline-flex; align-items:center; min-height:44px }
/* A stream URL is one unbroken 45-character word, wider than a phone at 16px
   gutters; without this it is the page that scrolls sideways, not the link. */
.note a{ overflow-wrap:anywhere }

/* A question in a support list. Looks like h3 and is not one, because these are
   not sections and should not appear in a document outline. */
.q{ font-family:var(--cond); font-weight:700; color:var(--ink); font-size:1.0625rem; margin:1.5rem 0 .5rem }

.ways{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2.5rem }
/* .btn comes from tokens.css. These lines size the TARGET, which an <a> does not
   get from padding alone — an inline anchor takes its height from its text and
   ignores vertical padding entirely. 44px is the floor, and the gap above keeps
   two correct-sized targets from misfiring into each other. */
.ways .btn{ min-height:44px; display:inline-flex; align-items:center; text-decoration:none }
.ways .btn.key{ border-color:var(--brand); color:var(--brand) }

/* ---------------- music: the hub and one page per album ----------------
   Generated by albums.js. Phone first: the sleeve sits above the title and
   goes beside it from 640px. Every link a thumb lands on is 44px. */
.crumbs ol{ list-style:none; margin:0 0 1.25rem; padding:0; display:flex; flex-wrap:wrap; gap:0 .5rem;
  font-family:var(--mono); font-size:.75rem; color:var(--dim) }
.crumbs li + li::before{ content:"/"; margin-right:.5rem; opacity:.6 }
.crumbs a{ display:inline-flex; align-items:center; min-height:44px; color:var(--dim); text-decoration:none }
.crumbs a:hover{ color:var(--ink) }
.crumbs [aria-current]{ display:inline-flex; align-items:center; min-height:44px; color:var(--ink) }

/* The wide banner, where an album has one: the scene the sleeve comes from,
   across the top, before the facts. */
.album-hero{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  border-radius:4px; margin:0 0 1.5rem }
.album-top picture{ display:block }   /* holds the phone and wide crops; the img inside keeps every rule above */
.album-head{ display:grid; gap:1.25rem; margin-bottom:1rem }
/* With a banner above, the square sleeve is the same scene twice — the
   banners are recomposed from the sleeves — so it is dropped at every width
   and the title takes the full column under the banner. The sleeve still
   appears on the music hub and on albums without a banner. */
.has-hero .album-art{ display:none }

/* THE TITLE IN THE BANNER. The banners are composed with the subject in the
   right third and the left empty, for type on the share card. On the page
   that space was just empty, so from 768px the album's name, artist and
   actions sit in it over a shade: the same arrangement as the card a visitor
   tapped to get here. Album pages with a banner take the wide column for the
   picture; everything under it keeps the 42rem reading measure, aligned with
   the title above it. Phones keep the banner and put the text beneath it. */
.album-body{ max-width:42rem }
@media (min-width:768px){
  .album-top.has-hero{ position:relative; border-radius:4px; overflow:hidden; margin-bottom:2.5rem }
  .album-top.has-hero .album-hero{ margin:0; border-radius:0 }
  .album-top.has-hero::after{ content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(90deg, rgba(11,16,20,.92) 0%, rgba(11,16,20,.78) 38%, rgba(11,16,20,0) 66%) }
  .album{ --hero-inset:2.5rem }
  .album-top.has-hero .album-head{ position:absolute; inset:0; z-index:1; margin:0; display:flex;
    flex-direction:column; justify-content:center; padding:0 var(--hero-inset); max-width:58% }
  /* The words start where the title does, not at the picture's edge
     (Percy, 2026-10-30: the two left edges didn't line up). */
  .album-top.has-hero ~ .album-body{ margin-left:var(--hero-inset) }
  .album-top.has-hero .album-head h1{ font-size:clamp(2rem, 4vw, 3rem); line-height:1.05; margin:.25rem 0 .5rem; color:#fff }
  .album-top.has-hero .album-head .lede{ margin:0; color:#fff }
  .album-top.has-hero .album-facts,
  .album-top.has-hero .album-tags{ color:var(--ink); opacity:.85 }
  .album-top.has-hero .ways{ margin-top:1.25rem }
}
.album-art{ width:100%; max-width:22rem; height:auto; border-radius:4px; display:block }
@media (min-width:640px){
  .album-head{ grid-template-columns:15rem minmax(0,1fr); align-items:start; gap:1.75rem }
  .album-head.has-hero{ grid-template-columns:1fr }
}
.album-head h1{ margin-top:0 }
.album-facts,.album-tags{ color:var(--dim); font-size:.875rem; margin:.25rem 0 }
/* A style name wraps whole: "Neo-" ending one line and "Soul" starting the
   next read as two styles (Percy, 2026-10-30). */
.album-tags span{ white-space:nowrap }
/* The album's story is what the page is for, so it reads brighter than the
   station's secondary grey; still a step under the headings (Percy, 2026-10-30). */
.album-body > p{ color:color-mix(in srgb, var(--ink) 85%, var(--dim)) }
.album-head .ways{ margin-top:1.25rem }

.album-tracks{ margin:0; padding:0; list-style:none; counter-reset:trk }
.album-tracks li{ counter-increment:trk; display:flex; align-items:baseline; gap:.75rem;
  padding:.6rem 0; border-bottom:1px solid var(--line); min-width:0 }
.album-tracks li::before{ content:counter(trk); font-family:var(--mono); font-size:.75rem; color:var(--dim);
  min-width:1.5rem }
.trk-t{ flex:1; min-width:0; color:var(--ink) }
/* The track-by-track guide (album-notes.json): a line under the title, then a
   lyric of Percy's, quoted. */
.trk-note{ display:block; margin-top:.25rem; color:var(--dim); font-size:.875rem; line-height:1.5 }
.trk-lyric{ display:block; margin-top:.25rem; font-style:italic; color:var(--ink) }
.album-story .byline{ color:var(--dim); font-size:.875rem }
.album-quote{ margin:1rem 0; padding:0 0 0 1rem; border-left:2px solid var(--line) }
.album-quote p{ margin:0; font-style:italic; color:var(--ink) }
.album-quote footer{ margin-top:.35rem; color:var(--dim); font-size:.875rem }
.album-quote footer::before{ content:"— " }
.made-for strong{ color:var(--ink) }
.trk-w{ flex:none; font-family:var(--mono); font-size:.75rem; color:var(--dim); display:flex; gap:.6rem; align-items:baseline }
/* One song's price, beside its length: a 44px target however small the text. */
.trk-price{ min-height:44px; display:inline-flex; align-items:center; padding:0 .75rem;
  font-size:.75rem; text-decoration:none }
.trk-air{ color:var(--brand); letter-spacing:.06em; text-transform:uppercase; font-size:.625rem }
.trk-e{ font-family:var(--mono); font-size:.625rem; border:1px solid var(--line); border-radius:2px;
  padding:0 .25rem; color:var(--dim); text-decoration:none }

.album-more{ list-style:none; margin:0; padding:0 }
.album-more li{ border-bottom:1px solid var(--line) }
.album-more a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none }
.album-more span{ color:var(--dim); font-size:.875rem; margin-left:.5rem }

.album-grid{ list-style:none; margin:1.5rem 0 0; padding:0; display:grid; gap:1rem;
  grid-template-columns:repeat(2,minmax(0,1fr)) }
@media (min-width:640px){ .album-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (min-width:960px){ .wide .album-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem 1.25rem } }
.album-grid a{ display:flex; flex-direction:column; gap:.35rem; text-decoration:none; color:var(--ink) }
.album-grid img{ width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:4px; display:block }
.album-grid .g-t{ font-family:var(--cond); font-weight:700; line-height:1.25 }
.album-grid .g-a{ font-family:var(--mono); font-size:.75rem; color:var(--dim) }

.doc-foot{ max-width:var(--doc-w); margin:3rem auto 0; padding-top:1rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:0 1.25rem }
.doc-foot a{ display:inline-flex; align-items:center; min-height:44px; color:var(--dim); text-decoration:none; font-size:.875rem }
.doc-foot a:hover{ color:var(--ink) }
.doc-social{ flex-basis:100%; display:flex; flex-wrap:wrap; gap:0 6px; border-top:1px solid var(--line); margin-top:.25rem }
.doc-social a{ justify-content:center; min-width:44px }
.doc-social svg{ width:20px; height:20px; fill:currentColor }

/* A store's own badge (art/badges): a 48px tap target with room around it,
   no link underline across it (Amazon's rules: unaltered, clear space). */
.store-badge{display:inline-flex;min-height:48px;padding:4px 0;text-decoration:none;border:0}
.store-badge img{display:block;height:48px;width:auto}