/*
==============================================================================
  AVAVA | Radio Station HTML Template
  archive.css — styles of the Streaming archive page (loaded after style.css)
==============================================================================

  TABLE OF CONTENTS

  01. Search — the query line, four filters, active chips (the intro lives in style.css)
  02. Latest — the newest recording: frame, wave, chapters, figures, tracks, neighbours
  03. Archive map — "The whole roll": the year of weeks, the week card, three facts
  04. All recordings — "Everything on the shelf": the ledger by weeks
  05. Download — the slip: stub, formats, subscribe
  06. Responsive

==============================================================================
*/

:root {
  /* the frame of the latest recording is a night photo in both themes: a dark
     wash under cream text, like the hero on the home page */
  --al-wash: rgba(13, 13, 13, .5);
  --al-edge: rgba(13, 13, 13, .84);
  --al-cream: #f5f4f1;
  --al-ember8: rgba(201, 80, 42, .08);
  --al-ember55: rgba(201, 80, 42, .55);
}

/* ============================================================================
   01. Search
   ========================================================================= */
.sec--search { background: var(--card); padding-top: 40px; }
.as-bar { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(16px, 2vw, 30px); padding: 18px 0; border-bottom: 1px solid var(--i16); }
.as-field { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 280px; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.as-glass { flex: none; font: 400 32px / 1 'DM Mono', ui-monospace, monospace; color: var(--i45); }
.as-q { font-size: clamp(20px, 2.1vw, 28px); padding: 12px 0; border-bottom-color: var(--i4); }
.as-q::-webkit-search-decoration, .as-q::-webkit-search-cancel-button { -webkit-appearance: none; }
.as-field > .mono { flex: none; }
.as-drops { display: flex; align-items: flex-end; flex-wrap: wrap; gap: clamp(12px, 1.6vw, 26px); }
/* The choice is the browser's own <select>, laid over the drawn button: the
   list that opens is native, so it works with a keyboard, a screen reader and
   a phone's picker; the drawn button only shows what was chosen. */
.as-drop { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.as-sel { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; width: 100%; opacity: 0; cursor: pointer; font: inherit; }
.as-sel:focus-visible + .as-pick, .as-drop:focus-within .as-pick { border-bottom-color: var(--accent); }
.as-drop:focus-within .as-pick .v { color: var(--accent); }
.as-pick { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--i28); white-space: nowrap; text-transform: none; letter-spacing: 0; }
.as-pick .v { font: 400 14px / normal 'DM Mono', ui-monospace, monospace; letter-spacing: .06em; color: var(--i7); }
.as-pick.is-on .v { color: var(--accent); }
.as-pick:hover { border-bottom-color: var(--accent); }
.as-active { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px 0; }
.as-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--accent);
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .12em;
  color: var(--accent); white-space: nowrap;
}
.as-chip.is-on { background: var(--accent); color: #fff; }
.as-chip .x { opacity: .6; }
.as-chip:hover { background: var(--accent); color: #fff; }
.as-clear:hover { color: var(--accent); }
.as-clear[disabled] { opacity: .45; cursor: default; }
.as-clear[disabled]:hover { color: inherit; }
.as-chips { display: contents; }
.ar-empty { padding: 28px 0; font-size: 15px; line-height: 1.6; color: var(--i6); }
.as-count { margin-left: auto; }

/* ============================================================================
   02. Latest
   ========================================================================= */
.sec--latest { background: var(--paper); }
.al-sheet { background: var(--card); border: 1px solid var(--i12); }
.al-perf { display: flex; justify-content: space-between; padding: 10px 18px; border-bottom: 1px dashed var(--i16); }
.al-perf > span { width: 8px; height: 8px; border-radius: 50%; background: var(--i16); box-shadow: inset 0 1px 2px var(--i16); flex: none; }
.al-perf--b { border-bottom: 1px solid var(--i12); border-top: 1px dashed var(--i16); }
.al-frame { position: relative; width: 100%; aspect-ratio: 21 / 9; overflow: hidden; background: var(--i10); }
.al-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.al-tint { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(201, 80, 42, .34), var(--al-wash) 46%, var(--al-edge)); }
.al-badge { position: absolute; left: 18px; top: 16px; padding: 6px 11px; background: var(--accent); color: #fff; }
.al-newest { position: absolute; right: 18px; top: 16px; display: flex; align-items: center; gap: 10px; color: var(--al-cream); }
.al-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; gap: clamp(18px, 2.4vw, 40px); padding: clamp(18px, 2vw, 30px); }
.al-disc { position: relative; flex: none; width: clamp(92px, 8.6vw, 124px); aspect-ratio: 1; }
.al-notch, .al-arc, .ar-arc { position: absolute; border-radius: 50%; }
.al-notch { inset: 0; background: repeating-conic-gradient(rgba(245, 244, 241, .45) 0deg .7deg, transparent .7deg 7.5deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)); }
/* the ring around the disc is how far the recording has been played — the
   page writes the share into --p as it plays */
.al-arc { inset: 11px; background: conic-gradient(var(--accent) 0 var(--p, 0%), rgba(245, 244, 241, .18) var(--p, 0%) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 7px)); }
.al-pin { position: absolute; left: 50%; top: -4px; width: 2px; height: 12px; margin-left: -1px; background: var(--accent); }
.al-play, .ar-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 54%; height: 54%; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-size: 16px;
}
.al-play { box-shadow: 0 14px 34px rgba(0, 0, 0, .55); }
.al-play:hover, .ar-play:hover { background: #E0663D; }
.al-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.al-title h2 { font-size: clamp(30px, 4.2vw, 68px); line-height: .92; letter-spacing: -.05em; color: var(--al-cream); text-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.al-with { display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px; }
.al-with .serif { font-size: clamp(18px, 2vw, 28px); line-height: 1; color: var(--accent); }
.al-with .mono { color: rgba(245, 244, 241, .75); }
.al-len { flex: none; padding: 7px 11px; background: rgba(245, 244, 241, .9); border: 1px solid rgba(245, 244, 241, .4); color: #141110; }

.al-body { padding: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 40px) 0; }
.al-wave { position: relative; height: 76px; }   /* the 21:34 flag hangs into the padding above, as in the prototype */
.al-bars { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.al-bars > span { flex: 1; min-width: 0; background: var(--i18); }
.al-bars > span.p { background: var(--accent); }
.al-head { position: absolute; left: 18%; top: -10px; bottom: 0; width: 2px; background: var(--accent); box-shadow: 0 0 16px rgba(201, 80, 42, .6); }
.al-time { position: absolute; left: 18%; top: -30px; transform: translateX(-50%); padding: 4px 9px; background: var(--accent); color: #fff; white-space: nowrap; }
.al-chaps { display: flex; gap: 2px; margin-top: 14px; }
.al-chap { min-width: 0; }
.al-chap:nth-child(1) { flex: 18; }
.al-chap:nth-child(2) { flex: 24; }
.al-chap:nth-child(3) { flex: 20; }
.al-chap:nth-child(4) { flex: 25; }
.al-chap:nth-child(5) { flex: 21; }
.al-chap:nth-child(6) { flex: 15; }
.al-chap button { display: flex; flex-direction: column; gap: 7px; width: 100%; min-width: 0; text-align: left; text-transform: none; }
.al-chap .abar { display: flex; align-items: center; height: 26px; padding: 0 9px; min-width: 0; background: var(--i10); }
.al-chap .abar .mono { letter-spacing: .04em; color: var(--i7); }
.al-chap .t { letter-spacing: .06em; color: var(--i42); }
.al-chap.is-on .abar { background: var(--accent); }
.al-chap.is-on .abar .mono { color: var(--ink); }
:root:not([data-theme="dark"]) .al-chap.is-on .abar .mono { color: #fff; }
.al-chap.is-on .t { color: var(--accent); }
.al-chap button:hover { opacity: .8; }
.al-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; padding-top: 14px; }
.al-tools .link-d { color: var(--i55); }
.al-tools .link-d:hover { color: var(--accent); }
.al-dl { margin-left: auto; }
.al-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin: clamp(16px, 1.8vw, 24px) clamp(20px, 2.4vw, 40px) 0; padding: 16px 0; border-top: 1px solid var(--i16); border-bottom: 1px solid var(--i16); }
.al-figs li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.al-figs .orb, .am-facts .orb, .ar-totals .orb, .ar-stats .orb { font-size: clamp(17px, 1.9vw, 27px); line-height: 1; white-space: nowrap; }
.al-tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(18px, 2.4vw, 40px); padding: clamp(14px, 1.6vw, 20px) clamp(20px, 2.4vw, 40px) 0; }
.al-tracks li { display: flex; align-items: baseline; gap: 11px; min-width: 0; padding: 10px 0; border-top: 1px solid var(--i14); }
.al-tracks li:hover { border-top-color: var(--accent); }
.al-tracks .t { flex: none; letter-spacing: .06em; color: var(--i45); }
.al-tracks .n { font: 400 14px / 1.35 Archivo, sans-serif; color: var(--i82); }
.al-tracks li.is-on .t, .al-tracks li.is-on .n { color: var(--accent); }
.al-nbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 32px); margin: clamp(18px, 2vw, 26px) clamp(20px, 2.4vw, 40px) clamp(20px, 2.2vw, 30px); padding-top: 16px; border-top: 2px solid var(--accent); }
.al-nb { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.al-nb--next { align-items: flex-end; text-align: right; }
.al-nb .n { font: 600 clamp(15px, 1.5vw, 20px) / 1.2 Archivo, sans-serif; color: var(--ink); max-width: 100%; }
.al-nb:hover { opacity: .75; }

/* ============================================================================
   03. Archive map
   ========================================================================= */
.sec--map { background: var(--card); }
.am-sheet { background: var(--card); border: 1px solid var(--i12); }
.am-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 22px; padding: clamp(24px, 2.8vw, 42px) clamp(24px, 2.6vw, 44px) clamp(18px, 2vw, 26px); }
.am-h { font-size: clamp(26px, 3.4vw, 58px); line-height: .95; }
.am-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.am-legend > span:not(.mono) { width: 24px; height: 10px; }
.am-l0 { background: var(--i10); }
.am-l1 { background: rgba(201, 80, 42, .25); }
.am-l2 { background: rgba(201, 80, 42, .45); }
.am-l3 { background: rgba(201, 80, 42, .7); }
.am-l4 { background: var(--accent); }
.am-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .42fr); gap: clamp(18px, 2.2vw, 36px); padding: 0 clamp(24px, 2.6vw, 44px); align-items: stretch; }
.am-roll { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.am-months { display: flex; min-width: 0; }
.am-months > span { flex: 1; min-width: 0; text-align: center; }
.am-perf { display: flex; justify-content: space-between; padding: 7px 10px; background: var(--i10); border-bottom: 1px dashed var(--i16); }
.am-perf > span { width: 6px; height: 6px; border-radius: 50%; background: var(--i16); box-shadow: inset 0 1px 2px var(--i16); flex: none; }
.am-perf--b { border-bottom: 0; border-top: 1px dashed var(--i16); }
.am-weeks { flex: 1; min-height: 180px; display: flex; gap: 2px; min-width: 0; padding: 10px; background: var(--i10); }
/* a week is a button: it opens in the panel beside the roll */
.am-weeks > .am-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: none; cursor: pointer; outline-offset: 2px; }
.am-weeks > .am-col:hover, .am-weeks > .am-col.is-on, .am-weeks > .am-col:focus-visible { outline: 1px solid var(--accent); }
.am-weeks i { flex: 1; width: 100%; display: block; }
.am-years { position: relative; height: 38px; margin-top: 6px; }
.am-years .line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--i2); }
.am-years .ticks { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: flex-start; }
/* the years switch the roll */
/* the tick keeps no width of its own, so the years sit exactly on the rail's
   ends — the button gets its reach from padding its margins take back */
.am-years .ticks > .am-yr { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 0; min-height: 36px; padding: 0 20px; margin: 0 -20px; box-sizing: content-box; border: 0; background: none; cursor: pointer; overflow: visible; }
.am-years .ticks > .am-yr:hover > b, .am-years .ticks > .am-yr:focus-visible > b { color: var(--accent); }
.am-years .ticks > .am-yr > i { display: block; width: 1px; height: 8px; background: var(--i28); }
.am-years .ticks > .am-yr > b { font-weight: 400; color: var(--i45); }
.am-years .ticks > .am-yr.is-on > i { height: 14px; background: var(--accent); }
.am-years .ticks > .am-yr.is-on > b { color: var(--accent); }
.am-week { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: clamp(16px, 1.8vw, 24px); border: 1px solid var(--al-ember55); background: rgba(201, 80, 42, .07); }
.am-wh, .am-wn { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.am-wh .mono { white-space: nowrap; }
.am-wh .mono:last-child { margin-left: auto; }
.am-wn { gap: 10px; }
.am-wn .orb { font-size: clamp(24px, 2.6vw, 38px); line-height: 1; color: var(--ink); }
.am-days { display: flex; flex-direction: column; }
/* a day is a way into its recording; a day with nothing to open stays still */
.am-days li { border-top: 1px solid var(--i14); min-width: 0; }
.am-day { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 8px 0; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; min-width: 0; }
.am-days li:hover:has(.am-day:not([disabled])) { border-top-color: var(--accent); }
.am-day[disabled] { cursor: default; }
.am-day[disabled] .n { color: var(--i45); }
.am-days .d { flex: none; width: 34px; color: var(--i45); }
.am-days .n { font: 400 14px / 1.3 Archivo, sans-serif; color: var(--i84); }
.am-days .dur { margin-left: auto; flex: none; letter-spacing: .06em; }
.am-days li.is-on .d, .am-days li.is-on .n { color: var(--accent); }
.am-open { margin-top: auto; }
.am-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 30px); margin: clamp(22px, 2.4vw, 34px) clamp(24px, 2.6vw, 44px) clamp(24px, 2.8vw, 42px); padding-top: 16px; border-top: 2px solid var(--accent); }
.am-facts li { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.am-facts .orb { font-size: clamp(18px, 2vw, 28px); }
.am-facts p { font: 400 14px / 1.5 Archivo, sans-serif; color: var(--i6); text-wrap: pretty; }

/* ============================================================================
   04. All recordings (the ledger pieces .ar-head/.ar-totals/.ar-btn/.ar-foot live in style.css §19b)
   ========================================================================= */
.sec--recs { background: var(--paper); }
.ar-stats { display: flex; align-items: flex-end; gap: clamp(16px, 2vw, 32px); }
.ar-stats li { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ar-stats .mono { white-space: nowrap; }
.ar-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.ar-sheet { background: var(--card); border: 1px solid var(--i12); padding: clamp(24px, 2.8vw, 42px) clamp(20px, 2.4vw, 40px); }
.ar-lead { display: flex; align-items: stretch; flex-wrap: wrap; gap: clamp(16px, 2vw, 30px); padding: clamp(16px, 1.8vw, 24px); margin-bottom: clamp(14px, 1.6vw, 22px); border: 1px solid var(--al-ember55); background: var(--al-ember8); }
.ar-disc { position: relative; flex: none; width: 86px; height: 86px; }
.ar-arc { inset: 0; background: conic-gradient(var(--accent) 0 var(--p, 0%), var(--i16) var(--p, 0%) 100%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px)); }
.ar-play { font-size: 15px; cursor: pointer; }
.ar-lt { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ar-lt h3 { font-size: clamp(19px, 2vw, 28px); line-height: 1.1; letter-spacing: -.03em; color: var(--ink); }
.ar-lt .clip { letter-spacing: .04em; }
.ar-stats { flex: none; align-items: center; gap: clamp(14px, 2vw, 28px); }
.ar-stats .orb { font-size: clamp(15px, 1.5vw, 21px); }
.ar-th, .ar-row { display: grid; grid-template-columns: 3px 74px minmax(0, 1.4fr) minmax(0, .9fr) 104px minmax(90px, .8fr) 58px 84px 34px; gap: 12px; }
.ar-th { padding-bottom: 9px; border-bottom: 2px solid var(--accent); }
.ar-th button { display: flex; align-items: baseline; gap: 5px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--i5); }
.ar-th button.r { justify-content: flex-end; }
.ar-th button.is-on { color: var(--accent); }
.ar-th button:hover { color: var(--accent); }
.ar-th button > span { opacity: .9; }
.ar-row { align-items: center; padding: 11px 0; border-bottom: 1px solid var(--i12); cursor: pointer; }
.ar-row:hover { background: var(--hover); }
.ar-row.is-new { background: var(--al-ember8); }
.ar-row .ar-stripe { align-self: stretch; }
.ar-row .date { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ar-row .date .mono:first-child { letter-spacing: .06em; color: var(--i65); white-space: nowrap; }
.ar-row.is-new .date .mono:first-child { color: var(--accent); }
.ar-row .show { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ar-row .show .n { font: 600 15px / 1.3 Archivo, sans-serif; color: var(--ink); }
.ar-row.is-new .show .n { color: var(--accent); }
.ar-row .show .ar-tag { flex: none; padding: 3px 7px; }
.ar-row .hst { font-size: 15px; line-height: 1.25; color: var(--i78); }
.ar-row .day { position: relative; min-width: 0; height: 16px; display: flex; align-items: center; gap: 10px; }
.ar-row .day .track { position: relative; flex: 1; min-width: 0; height: 16px; }
.ar-row .day .rail { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--i12); }
.ar-row .day .seg { position: absolute; top: 8px; height: 8px; background: var(--i42); }
.ar-row.is-new .day .seg { background: var(--accent); }
.ar-row .day .t { position: absolute; right: 0; top: -7px; letter-spacing: .06em; }
.ar-row .dur { letter-spacing: .06em; text-align: right; }
.ar-row .plays { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ar-row .plays .abar { flex: 1; min-width: 0; height: 3px; background: var(--i14); }
.ar-row .plays .abar > span { display: block; height: 3px; background: var(--i35); }
.ar-row.is-new .plays .abar > span { background: var(--accent); }
.ar-row .plays .mono { flex: none; letter-spacing: .04em; }
.ad-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  background: var(--accent); color: #fff;
  font-family: 'DM Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
}
.ad-btn:hover { background: #E0663D; color: #fff; }
/* light theme: ember buttons darken to ink on hover, as everywhere on the site */
:root:not([data-theme="dark"]) .ad-btn:hover,
:root:not([data-theme="dark"]) .al-play:hover, :root:not([data-theme="dark"]) .ar-play:hover { background: #141110; color: #fff; }
.ar-pages { display: flex; align-items: center; gap: 5px; }
.ar-pages a { min-width: 30px; padding: 8px 0; text-align: center; letter-spacing: .08em; color: var(--i6); }
.ar-pages a.is-on { background: var(--accent); color: #fff; }
.ar-pages a:hover { background: var(--i10); color: var(--ink); }
.ar-pages a.is-on:hover { background: var(--accent); color: #fff; }

/* ============================================================================
   05. Download
   ========================================================================= */
.sec--download { background: var(--card); padding-bottom: 60px; }
.ad-sheet { background: var(--card); border: 1px solid var(--i12); }
.ad-top, .ad-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; padding: 14px clamp(20px, 2.4vw, 40px); }
.ad-top { border-bottom: 1px solid var(--i12); }
.ad-sub { gap: 12px; border-top: 1px solid var(--i12); }
.ad-r { margin-left: auto; }
.ad-grid { display: grid; grid-template-columns: minmax(200px, .5fr) minmax(0, 1fr); align-items: stretch; }
.ad-stub { display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 2.4vw, 34px) clamp(18px, 2vw, 30px); border-right: 2px dashed var(--i2); }
.ad-no { font-size: clamp(26px, 3vw, 44px); line-height: 1; color: var(--ink); }
.ad-kv { display: flex; flex-direction: column; gap: 9px; }
.ad-kv li { display: flex; align-items: baseline; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--i14); }
.ad-kv .v { margin-left: auto; letter-spacing: .06em; color: var(--i78); text-align: right; }
.ad-kv .v.accent { color: var(--accent); }
.ad-stamp { margin-top: auto; align-self: flex-start; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 18px; border: 2px solid var(--accent); color: var(--accent); transform: rotate(-4deg); }
.ad-stamp .mono:last-child { opacity: .75; }
.ad-main { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px); padding: clamp(20px, 2.4vw, 34px) clamp(20px, 2.4vw, 40px); }
.ad-hl { display: flex; align-items: baseline; flex-wrap: wrap; gap: 18px; }
.ad-hl h2 { font-size: clamp(22px, 2.6vw, 38px); line-height: 1; letter-spacing: -.04em; color: var(--ink); }
.ad-hl .serif { font-size: clamp(17px, 1.8vw, 24px); line-height: 1.1; color: var(--i7); }
.ad-fmts { display: flex; flex-direction: column; gap: 10px; }
.ad-fmt { display: grid; grid-template-columns: 96px minmax(0, 1fr) 78px; gap: 14px; align-items: center; width: 100%; padding: 11px 12px; border: 1px solid var(--i16); text-align: left; text-transform: none; }
.ad-fmt .l { color: var(--i75); }
.ad-fmt .abar { display: block; height: 4px; background: var(--i12); }
.ad-fmt .abar > span { display: block; height: 4px; background: var(--i28); }
.ad-fmt .m { text-align: right; }
.ad-fmt.is-on { border-color: var(--al-ember55); background: rgba(201, 80, 42, .1); }
.ad-fmt.is-on .l { color: var(--accent); }
.ad-fmt.is-on .abar > span { background: var(--accent); }
.ad-fmt:hover { border-color: var(--accent); }
.sec--download .ad-url { font-size: 13px; letter-spacing: .02em; line-height: 1.5; color: var(--i6); word-break: break-all; }
.ad-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.ad-btn { padding: 16px 28px; }
.ad-feed { padding: 8px 13px; border: 1px solid var(--i22); color: var(--i7); white-space: nowrap; }
.ad-feed:hover { border-color: var(--accent); color: var(--accent); }

/* ============================================================================
   06. Responsive
   ========================================================================= */
@media (max-width: 900px) {
  .ar-th { display: none; }
  .ar-row { grid-template-columns: 3px 74px minmax(0, 1fr) 34px; grid-template-areas: "s d show b" "s d host b" "s d ch b" "s d day b" "s d plays b"; row-gap: 4px; }
  .ar-row .ar-stripe { grid-area: s; }
  .ar-row .date { grid-area: d; }
  .ar-row .show { grid-area: show; }
  .ar-row .hst { grid-area: host; }
  .ar-row .chn { grid-area: ch; }
  .ar-row .day { grid-area: day; max-width: 240px; }
  .ar-row .day .t { position: static; flex: none; }
  .ar-row .dur { display: none; }
  .ar-row .plays { grid-area: plays; max-width: 240px; }
  .ar-btn { grid-area: b; align-self: center; }
}

@media (max-width: 760px) {
  .sec--search { padding-top: 24px; }
  .am-grid { grid-template-columns: minmax(0, 1fr); }
  .ad-grid { grid-template-columns: minmax(0, 1fr); }
  .ad-stub { border-right: 0; border-bottom: 2px dashed var(--i2); }
  .as-field { min-width: 0; flex-basis: 100%; }
  .as-field > .mono { display: none; }
  .as-glass { font-size: 24px; }
  .as-count { flex-basis: 100%; margin-left: 0; }
  .al-frame { aspect-ratio: auto; min-height: 340px; }
  .al-perf > span:nth-child(even) { display: none; }
  .al-newest { top: 52px; right: auto; left: 18px; }
  .al-cap { flex-wrap: wrap; align-items: flex-start; }
  .al-len { display: none; }
  .al-wave { height: 56px; }
  .al-chaps { flex-wrap: wrap; }
  .al-chaps .al-chap:nth-child(n) { flex: 1 1 calc(50% - 2px); }
  .al-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .al-tracks { grid-template-columns: minmax(0, 1fr); }
  .al-nbs { grid-template-columns: minmax(0, 1fr); }
  .al-nb--next { align-items: flex-start; text-align: left; }
  .am-head, .am-grid { padding-left: 18px; padding-right: 18px; }
  .am-facts { grid-template-columns: minmax(0, 1fr); margin-left: 18px; margin-right: 18px; }
  .am-months > span:nth-child(even) { visibility: hidden; }
  .am-weeks { min-height: 120px; }
  .ar-sheet { padding-left: 18px; padding-right: 18px; }
  .ar-lead { padding: 16px; }
  .ar-totals, .ar-totals ul, .ar-stats { flex-wrap: wrap; row-gap: 14px; }
  .ar-totals { width: 100%; }
  .ar-totals .mono, .ar-stats .mono { white-space: normal; }
  .ar-row { grid-template-columns: 3px minmax(0, 1fr) 34px; grid-template-areas: "s d b" "s show b" "s host b" "s ch b" "s day b" "s plays b"; }
  .ar-row .date { flex-direction: row; gap: 10px; }
  .ar-foot .ar-more { width: 100%; justify-content: center; }
  .ad-fmt { grid-template-columns: 80px minmax(0, 1fr) 70px; gap: 10px; }
}