/* ===========================================================
   Frekvenci — the static article pages (stories/<slug>.html)
   Built by transmission/articles/build_articles.py. Everything
   here sits on top of styles.css: the hero, the cream paper, the
   ON THIS PAGE rail (.lg-*) and the Hub cards are the site's own.
   Type floor: body 18px, small text 13–15px, labels 12–13px.
   Muted ink on cream is #6B6064 (5.0:1) or darker.
   =========================================================== */

.ax-hero{position:relative;max-width:1440px;margin:0 auto;padding:44px var(--gutter) 0}
.ax-title{font-size:76px;max-width:1040px;line-height:.9}
.ax-lede{max-width:680px}
.ax-crumbs{margin:0 0 18px;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px 0;
  font-family:'NHaas','Arial Black',sans-serif;font-weight:900;font-size:13px;letter-spacing:.08em}
.ax-crumbs li{display:flex;align-items:center;color:#B8AEDA}
.ax-crumbs li+li::before{content:"/";margin:0 10px;color:#B8AEDA}
.ax-crumbs a{color:var(--cream);text-decoration:underline;text-underline-offset:4px;min-height:32px;display:inline-flex;align-items:center}
.ax-crumbs a:hover{color:var(--cyan)}
.ax-crumbs [aria-current]{color:#D8D0EE}

/* the article column */
.ax-article h2{scroll-margin-top:24px;margin-top:46px}
.ax-article h2:first-child{margin-top:0}
.ax-article h3{margin:30px 0 10px;font-family:'NHaas','Arial Black',sans-serif;font-weight:900;font-size:24px;
  line-height:1.05;letter-spacing:.01em;color:var(--ink);scroll-margin-top:24px}
.ax-article ul,.ax-article ol{margin:0 0 20px;padding-left:24px}
.ax-article li{margin-bottom:8px}
.ax-article li::marker{color:#B33A25;font-weight:700}
.ax-article strong{color:var(--ink)}
.ax-article code{font-family:ui-monospace,Consolas,monospace;font-size:15px;background:#F7EEDC;border:1px solid #1E1A1F33;border-radius:6px;padding:1px 6px}
.ax-article blockquote{margin:0 0 24px;padding:16px 22px;border-left:6px solid var(--pink);background:#F7EEDC;border-radius:0 16px 16px 0;font-size:18px}
.ax-article blockquote p:last-child{margin-bottom:0}
.ax-article sup{line-height:0}
.ax-article sup a{font-family:'NHaas','Arial Black',sans-serif;font-weight:900;font-size:13px;text-decoration:none;padding:0 2px}
.ax-article a.ax-out::after{content:" \2197";font-size:.8em}
.ax-lead{font-size:21px;line-height:1.55;color:var(--ink)}

/* tables (data from the archive) */
.ax-tablewrap{overflow-x:auto;margin:0 0 26px;border:3px solid var(--ink);border-radius:18px;background:#F7EEDC;box-shadow:6px 6px 0 var(--cyan)}
.ax-article table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.4}
.ax-article th,.ax-article td{padding:10px 14px;text-align:left;border-bottom:2px dashed #1E1A1F22;vertical-align:top}
.ax-article tr:last-child td{border-bottom:0}
.ax-article th{font-family:'NHaas','Arial Black',sans-serif;font-weight:900;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:#EFE3C8}
.ax-article td.ax-num,.ax-article th.ax-num{text-align:right;font-variant-numeric:tabular-nums}

/* charts: two drawings of the same numbers, picked by the column's width */
.ax-chart{margin:8px 0 30px;padding:20px 22px 16px;border:3px solid var(--ink);border-radius:22px;background:#F7EEDC;box-shadow:8px 8px 0 var(--pink);container-type:inline-size}
.ax-chart-k{font-family:'NHaas','Arial Black',sans-serif;font-weight:900;font-size:12px;letter-spacing:.08em;color:#6B6064;text-transform:uppercase}
.ax-chart-t{font-family:'NHaas','Arial Black',sans-serif;font-weight:900;font-size:22px;line-height:1.1;margin:6px 0 12px;color:var(--ink)}
.ax-chart svg{display:block;width:100%;height:auto;overflow:visible}
.ax-chart .ax-svg-wide{display:none;max-width:680px}
.ax-chart .ax-svg-narrow{display:block;max-width:420px}
@container (min-width:640px){
  .ax-chart .ax-svg-wide{display:block}
  .ax-chart .ax-svg-narrow{display:none}
}
.ax-chart .ax-bar{fill:#FF3D8A;stroke:#1E1A1F;stroke-width:1.5}
.ax-chart .ax-bar.is-hl{fill:#22D3EE}
.ax-chart .ax-hit{fill:transparent}
.ax-chart .ax-hit:hover + .ax-bar,.ax-chart g.ax-col:hover .ax-bar{fill:#C026D3}
.ax-chart .ax-grid{stroke:#1E1A1F;stroke-opacity:.14;stroke-width:1}
.ax-chart .ax-base{stroke:#1E1A1F;stroke-width:2}
.ax-chart .ax-tick{fill:#6B6064;font-family:'GT America',Arial,sans-serif}
.ax-chart .ax-lab{fill:#2A2428;font-family:'GT America',Arial,sans-serif}
.ax-chart .ax-val{fill:#1E1A1F;font-family:'NHaas','Arial Black',sans-serif;font-weight:900;paint-order:stroke;stroke:#F7EEDC;stroke-width:4px;stroke-linejoin:round}
.ax-chart figcaption{font-size:14px;line-height:1.5;color:#5A5147;margin-top:12px}
.ax-chart details{margin-top:10px}
.ax-chart summary{cursor:pointer;font-family:'NHaas','Arial Black',sans-serif;font-weight:900;font-size:13px;letter-spacing:.06em;color:var(--ink);min-height:40px;display:inline-flex;align-items:center}
.ax-chart details table{font-size:14px;margin-top:6px}
.ax-chart details th,.ax-chart details td{padding:6px 10px}

/* a curated list of records from the catalogue */
.ax-picks{list-style:none;margin:0 0 30px;padding:0;border:3px solid var(--ink);border-radius:22px;background:#F7EEDC;box-shadow:8px 8px 0 var(--cyan);overflow:hidden;counter-reset:pick}
.ax-picks li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;padding:14px 20px;margin:0;border-bottom:2px dashed #1E1A1F22;counter-increment:pick}
.ax-picks li:last-child{border-bottom:0}
.ax-picks li::before{content:counter(pick);width:36px;height:36px;border-radius:999px;border:2px solid var(--ink);background:#FFD166;display:flex;align-items:center;justify-content:center;font-family:'NHaas',sans-serif;font-size:15px;color:#0F0D22}
.ax-pick-t{font-family:'NHaas',sans-serif;font-size:19px;line-height:1.15}
.ax-pick-t a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:2px;text-underline-offset:3px}
.ax-pick-t a:hover{color:#B33A25}
.ax-pick-m{font-size:14px;color:#5A5147;margin-top:4px;line-height:1.45}
.ax-pick-m a{color:#5A5147}
.ax-pick-n{font-size:15px;color:#2A2428;margin-top:6px;line-height:1.5}

/* LISTEN / EXPLORE */
.ax-explore{margin:10px 0 34px;padding:22px 24px;border-radius:22px;background:var(--ink);color:var(--cream);box-shadow:8px 8px 0 #FFD166}
.ax-explore-k{font-family:'NHaas','Arial Black',sans-serif;font-weight:900;font-size:13px;letter-spacing:.08em;color:#FFD166}
.ax-explore-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.ax-article .ax-explore a,.ax-explore a{font-family:'NHaas','Arial Black',sans-serif;font-weight:900;font-size:14px;letter-spacing:.05em;text-decoration:none;
  padding:10px 16px;background:var(--cream);color:#0F0D22;border:2px solid #0F0D22;border-radius:999px;box-shadow:3px 3px 0 var(--pink);min-height:44px;display:inline-flex;align-items:center;gap:8px}
.ax-article .ax-explore a:hover,.ax-explore a:hover{background:#FFD166;color:#0F0D22}
.ax-explore a small{font-family:'GT America',Arial,sans-serif;font-weight:400;font-size:13px;letter-spacing:.02em;color:#5A5147}

/* sources + the page's own record */
.ax-sources{margin:0 0 24px;padding-left:28px;font-size:16px;line-height:1.5}
.ax-sources li{margin-bottom:10px;scroll-margin-top:24px}
.ax-sources li:target{background:#FFD16655;border-radius:8px}
.ax-src-pub{color:#5A5147}
.ax-meta{margin-top:34px;padding:18px 22px;border:2px dashed #1E1A1F55;border-radius:18px;font-size:15px;line-height:1.55;color:#4A4246}
.ax-meta b{color:var(--ink)}
.ax-meta-k{font-family:'NHaas','Arial Black',sans-serif;font-weight:900;font-size:12px;letter-spacing:.08em;color:#6B6064;margin-bottom:6px}
.ax-figure{margin:0 0 30px}
.ax-figure img{display:block;width:100%;height:auto;border:3px solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--purple)}
.ax-figure figcaption{font-size:14px;color:#5A5147;margin-top:10px}

/* the rail: ON THIS PAGE + LISTEN */
.ax-rail .lg-other{color:#B33A25}
.ax-rail .ax-rail-meta{font-family:'GT America',Arial,sans-serif;font-size:13px;letter-spacing:.06em;color:#6B6064;text-transform:uppercase;line-height:1.6;margin-bottom:6px}

/* KEEP READING */
.ax-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;margin-top:40px}
.ax-more .hubtitle{color:var(--cream)}
.ax-more .hubcard-dek{color:#B8AEDA}
.ax-more .hubcard-read{color:#B8AEDA}

/* the cards' tag line on stories.html and the hub */
.hubcard-tags{font-family:'GT America',Arial,sans-serif;font-size:12px;letter-spacing:.08em;color:#6B6064;margin-top:8px;text-transform:uppercase}

@media (max-width:1080px){
  .ax-title{font-size:56px}
  .ax-more{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .ax-rail .ax-rail-meta{width:100%}
}
@media (max-width:560px){
  .ax-title{font-size:38px;text-shadow:2px 2px 0 #E8508B,4px 4px 0 #F2A93B,6px 6px 0 #2F5FA6}
  .ax-hero{padding-top:28px}
  .ax-article h3{font-size:21px}
  .ax-lead{font-size:19px}
  .ax-more{grid-template-columns:minmax(0,1fr)}
  .ax-chart{padding:16px 14px 12px;box-shadow:5px 5px 0 var(--pink)}
  .ax-picks li{grid-template-columns:36px minmax(0,1fr);padding:12px 14px;gap:10px}
  .ax-picks li::before{width:30px;height:30px;font-size:13px}
  .ax-explore{padding:18px 16px;box-shadow:5px 5px 0 #FFD166}
}

/* the article cards' caption: full ink on the pastel blocks (the seed cards keep 60%) */
.hubcard-img span.ax-cap{color:#1E1A1F}

/* the rail's LISTEN / THIS PAGE part: beside the article on a wide screen; on a
   narrow one the same links are in the LISTEN / EXPLORE block at the article's end */
.ax-rail-extra{display:contents}
@media (max-width:1100px){ .ax-rail-extra{display:none} }
.ax-rail .lg-toclink + .ax-rail-extra > .lg-nav-k:first-child{margin-top:22px}
/* year pages: earlier / later year (written by build_articles.py) */
.ax-yearnav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 34px}
.ax-yearnav a{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border:3px solid var(--ink);border-radius:18px;background:#F7EEDC;box-shadow:6px 6px 0 var(--pink);
  color:var(--ink);text-decoration:none;font-family:'NHaas','Arial Black',sans-serif;font-weight:900;font-size:18px;line-height:1.15;min-height:44px}
.ax-yearnav a small{font-family:'GT America',Arial,sans-serif;font-weight:400;font-size:13px;letter-spacing:.06em;color:#5A5147}
.ax-yearnav a.ax-yearnav-next{text-align:right;align-items:flex-end}
.ax-yearnav a:hover,.ax-yearnav a:focus-visible{background:#FFD166}
@media (max-width:560px){ .ax-yearnav{grid-template-columns:1fr} .ax-yearnav span{display:none} .ax-yearnav a{box-shadow:4px 4px 0 var(--pink)} }