/* /blog/ hub (generated by scripts/generate-blog-index.mjs).
   Tokens only: accent comes from /static-theme.css + /static-theme.js, so the
   page follows the visitor's chosen accent. Radii: 4px containers, 3px
   controls. Motion: the star chart reveals once on load and then stops. */
:root {
  --background: #0A0A0A; --foreground: #FAFAFA; --muted: #141414; --muted-foreground: #A3A3A3;
  --border: #262626; --border-strong: #353535; --faint: #8C8C8C; --surface: #0E0E0E; --good: #35D07F; --bad: #FF6B5E;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.hub-page { background: var(--background); color: var(--foreground); font-family: var(--font-display); line-height: 1.6; }
:where(.hub-page) a { color: inherit; }
.hub-page a:focus-visible, .hub-page button:focus-visible, .hub-page input:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: 2px; }
.cv-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hub-wrap { max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; }

/* Shared top nav (same rules as STATIC_NAV_CSS in scripts/shared/static-page-nav.mjs). */
.top-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 2.5rem; padding-bottom: 1rem; border-bottom: 1px solid #2A2A2A; }
.top-nav .brand { display: inline-flex; align-items: center; gap: 0.75rem; color: #FAFAFA; text-decoration: none; font-weight: 700; border: none; }
.top-nav .brand:hover { color: #FFFFFF; }
.top-nav .brand img { width: 32px; height: 32px; display: block; }
.top-nav .nav-links { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }
.top-nav .nav-links a { color: var(--accent); text-decoration: none; font-weight: 500; border: none; }
.top-nav .nav-links a:hover { color: var(--accent-hover); }
.top-nav .nav-links a[aria-current="page"] { color: #FAFAFA; }

/* Micro-labels */
.hub-kicker, .eyebrow, .track-label, .arc-month, .hc-legend, .sec-head p.kick { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.eyebrow { font-size: 10.5px; color: var(--muted-foreground); display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; margin-bottom: .55rem; }
.eyebrow i { font-style: normal; color: #444; }
.tag { display: inline-block; padding: 1px 6px; border: 1px solid rgba(var(--accent-rgb), .7); color: #fff; background: rgba(var(--accent-rgb), .18); border-radius: 3px; font-size: 9.5px; letter-spacing: .12em; margin-right: .25rem; }

/* Header */
.hub-head { margin-bottom: 1.6rem; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: .4rem 3rem; align-items: end; }
.hub-kicker { grid-column: 1 / -1; }
.hub-head-copy { padding-bottom: .35rem; }
.hub-kicker { font-size: 11px; color: var(--foreground); }
.hub-kicker::before { content: ''; display: inline-block; width: 18px; height: 2px; background: var(--accent); vertical-align: middle; margin-right: 10px; }
.hub-kicker span { color: var(--muted-foreground); }
.hub-head h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height: 1.03; letter-spacing: -.035em; margin: .5rem 0 0; font-weight: 600; }
.hub-lede { color: #C9C9C9; max-width: 640px; font-size: 1.08rem; }
.hub-sub { color: var(--faint); font-size: .85rem; margin-top: .6rem; }
.hub-sub a { color: var(--muted-foreground); text-decoration: underline; text-decoration-color: #444; text-underline-offset: 3px; }
.hub-sub a:hover { color: #fff; }

/* Star chart */
.hc-wrap { position: relative; margin: 0 0 3.5rem; border: 1px solid var(--border); border-radius: 4px; padding: 14px 14px 8px; overflow: hidden;
  background: radial-gradient(ellipse 55% 85% at 74% 45%, rgba(var(--accent-rgb), .08), transparent 70%), linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 100% 38px, #060606; }
.hc { display: block; width: 100%; height: auto; overflow: visible; }
.hc--compact { display: none; }
.hc-band { fill: transparent; transition: fill .2s; }
.hc-lane:hover .hc-band { fill: rgba(255,255,255,.02); }
.hc-rule { stroke: #1f1f1f; stroke-dasharray: 2 4; }
.hc-lane-label { font: 500 11px var(--font-mono); letter-spacing: .1em; fill: var(--foreground); }
.hc-lane-count { font: 400 10px var(--font-mono); letter-spacing: .08em; fill: var(--faint); }
.hc-lane-link { cursor: pointer; }
.hc--compact .hc-lane-label { font-size: 17px; }
.hc--compact .hc-lane-count { font-size: 15px; }
.hc--compact .hc-month { font-size: 14px; }
.hc-lane-link:hover .hc-lane-label, .hc-lane-link:focus-visible .hc-lane-label { fill: var(--accent-hover); }
.hc-axis-line { stroke: #2a2a2a; }
.hc-tick { stroke: #3a3a3a; }
.hc-month { font: 400 9.5px var(--font-mono); letter-spacing: .08em; fill: var(--faint); }
.hc-year { fill: var(--muted-foreground); }
.hc-break { stroke: #4a4a4a; stroke-width: 1.2; fill: none; }
.hc-core { fill: #FFF4EC; }
.hc-hit { fill: transparent; }
.hc-spike { stroke-width: .9; opacity: .85; fill: none; }
.hc-star { cursor: pointer; opacity: 0; animation: hc-ignite .7s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--d) * 1ms); outline: none; }
.hc-star.is-sotf .hc-core { fill: #060606; stroke: #FFF4EC; stroke-width: 1.1; }
.hc-halo { transform-box: fill-box; transform-origin: center; transition: transform .18s ease-out; }
/* Glow and spikes are decoration: only the core and the hit circle take the pointer,
   so a big star's halo never blocks the small stars around it. */
.hc-halo, .hc-spike, .hc-line, .hc-labels .hc-leader { pointer-events: none; }
.hc-star:hover .hc-core, .hc-star:focus-visible .hc-core { opacity: 1 !important; }
.hc-star:hover .hc-halo, .hc-star:focus-visible .hc-halo { opacity: 1 !important; transform: scale(1.6); }
.hc-star:focus-visible .hc-hit { stroke: var(--accent-hover); stroke-width: 1.2; }
.hc-line { fill: none; stroke: rgba(var(--accent-rgb), .5); stroke-width: .9; stroke-dasharray: 2000; stroke-dashoffset: 2000; animation: hc-draw 1.8s ease-out forwards; animation-delay: calc(var(--d) * 1ms); }
.hc-line.is-ghost { opacity: 0; animation: none; stroke-dashoffset: 0; transition: opacity .2s; }
.hc.dim-others .hc-star:not(.is-hot) { opacity: .28 !important; }
.hc.dim-others .hc-line:not(.is-hot) { opacity: .15; }
.hc.dim-others .hc-line.is-hot { opacity: 1; stroke: rgba(var(--accent-rgb), .95); stroke-width: 1.4; }
.hc-label { opacity: 0; animation: hc-fade .6s ease-out forwards; animation-delay: calc(var(--d) * 1ms); }
.hc-label text { font: 500 10.5px var(--font-display); letter-spacing: .02em; fill: #CFCFCF; }
.hc-label.is-latest text { fill: #fff; }
.hc-label:hover text { fill: #fff; }
.hc-leader { stroke: rgba(255,255,255,.22); stroke-width: .8; fill: none; }
.hc-scan { opacity: 0; animation: hc-scan 2.6s cubic-bezier(.45,0,.55,1) forwards; pointer-events: none; }
@keyframes hc-ignite { 0% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes hc-fade { to { opacity: 1; } }
@keyframes hc-draw { to { stroke-dashoffset: 0; } }
@keyframes hc-scan { 0% { opacity: 1; transform: translateX(0); } 92% { opacity: 1; } 100% { opacity: 0; transform: translateX(1060px); } }
.hc-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; align-items: center; padding: 8px 4px 2px; font-size: 10px; color: var(--faint); }
@media (hover: none) { .hc-legend .lg-hover { display: none; } }
.hc-legend .hc-hint { margin-left: auto; text-transform: none; letter-spacing: 0; font-family: var(--font-display); font-size: 12px; }
.lg-star { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #FFF4EC; box-shadow: 0 0 6px 2px rgba(var(--accent-rgb), .6); margin-right: 7px; vertical-align: middle; }
.lg-big { width: 8px; height: 8px; }
.lg-ring { display: inline-block; width: 7px; height: 7px; border-radius: 50%; border: 1px solid #FFF4EC; margin-right: 7px; vertical-align: middle; }
.lg-line { display: inline-block; width: 18px; height: 1px; background: rgba(var(--accent-rgb), .8); margin-right: 7px; vertical-align: middle; }
.hc-tip { position: absolute; z-index: 3; width: 300px; max-width: calc(100% - 16px); pointer-events: none; background: rgba(12,12,12,.97); border: 1px solid var(--border-strong); border-left: 2px solid var(--accent); border-radius: 4px; padding: 10px 12px; box-shadow: 0 14px 34px rgba(0,0,0,.65); }
.hc-tip .tip-meta { font: 400 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); }
.hc-tip .tip-title { font-weight: 600; font-size: 14.5px; line-height: 1.3; margin: 4px 0 6px; color: #fff; }
.hc-tip .tip-desc { font-size: 12.5px; line-height: 1.45; color: var(--muted-foreground); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Section heads */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: .9rem; margin-bottom: 1.25rem; }
.sec-head h2 { font-size: 1.45rem; font-weight: 600; letter-spacing: -.02em; }
.sec-head p { color: var(--muted-foreground); font-size: .92rem; }

/* Cards (shared) */
.lead-card, .feat-card, .pick-card, .sotf-tile { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; overflow: hidden; transition: border-color .18s, background-color .18s; }
.lead-card:hover, .feat-card:hover, .pick-card:hover, .sotf-tile:hover { border-color: rgba(var(--accent-rgb), .75); background: #121212; }
.card-cover, .lead-cover { position: relative; aspect-ratio: 16 / 9; background: #070707; overflow: hidden; border-bottom: 1px solid var(--border); }
.card-img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) brightness(.92); transition: filter .25s; }
.lead-card:hover .card-img, .feat-card:hover .card-img, .pick-card:hover .card-img { filter: none; }
.cv { display: block; width: 100%; height: 100%; }
.cv-bg { fill: #070707; }
.cv-grid line { stroke: rgba(255,255,255,.045); stroke-width: .6; }
.cv-line { stroke: rgba(var(--accent-rgb), .6); stroke-width: .9; }
.cv-stat { font: 600 46px var(--font-mono); fill: #fff; letter-spacing: -.02em; }
.cv-cap { font: 500 11.5px var(--font-display); fill: #C4C4C4; }
.cv-label { font: 500 8.5px var(--font-mono); letter-spacing: .14em; fill: #8A8A8A; }
.card-body { padding: .9rem 1rem 1.05rem; }
.card-body h3 { font-size: 1.06rem; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: #F2F2F2; transition: color .18s; }
.card-body p:not(.eyebrow) { color: var(--muted-foreground); font-size: .88rem; line-height: 1.5; margin-top: .45rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.feat-card:hover h3, .pick-card:hover h3, .lead-card:hover h2 { color: #fff; }

/* Lead */
.hub-lead { margin-bottom: 3.5rem; }
.lead-card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.lead-cover { border-bottom: 0; border-right: 1px solid var(--border); }
.lead-body { padding: 1.6rem 1.8rem; display: flex; flex-direction: column; justify-content: center; }
.lead-body h2 { font-size: clamp(1.45rem, 2.6vw, 2.15rem); line-height: 1.12; letter-spacing: -.025em; font-weight: 600; transition: color .18s; }
.lead-dek { color: #BDBDBD; margin-top: .8rem; font-size: 1rem; line-height: 1.55; }
.read-link { margin-top: 1.1rem; color: var(--accent-hover); font-weight: 600; font-size: .95rem; }
.read-link::after { content: ' \2192'; }

/* Tracks */
.hub-tracks { margin-bottom: 3.5rem; }
.track-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.track { display: flex; flex-direction: column; gap: .8rem; }
.track-label { font-size: 11.5px; font-weight: 500; color: #fff; display: flex; align-items: center; gap: .6rem; }
.track-label::before { content: ''; width: 8px; height: 8px; background: var(--accent); border-radius: 1px; transform: rotate(45deg); }
.track-label span { color: var(--faint); margin-left: auto; }
.track-brief { color: var(--muted-foreground); font-size: .9rem; line-height: 1.5; margin-top: .3rem; min-height: 2.7em; }
.track-list { list-style: none; border-top: 1px solid var(--border); }
.track-list li { border-bottom: 1px solid var(--border); }
.track-list a { display: flex; justify-content: space-between; gap: 1rem; padding: .62rem .1rem; text-decoration: none; }
.row-title { font-size: .95rem; line-height: 1.35; color: #E6E6E6; }
.row-meta { font: 400 10.5px var(--font-mono); color: var(--faint); white-space: nowrap; padding-top: .2rem; letter-spacing: .04em; }
.track-list a:hover .row-title { color: var(--accent-hover); }
.track-all { font-size: .88rem; color: var(--muted-foreground); text-decoration: none; margin-top: auto; }
.track-all::after { content: ' \2192'; }
.track-all:hover { color: var(--accent-hover); }
.track-links { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; margin-top: auto; }
.track-links .track-all { margin-top: 0; }

/* State of the Frontier tile */
.sotf-tile { padding: 1rem 1rem 1.05rem; background: linear-gradient(180deg, rgba(var(--accent-rgb), .07), transparent 60%), var(--surface); }
.sotf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: .7rem 0 .8rem; }
.sotf-stat { border-left: 1px solid var(--border-strong); padding-left: .6rem; display: flex; flex-direction: column; }
.sotf-stat b { font: 600 1.45rem var(--font-mono); letter-spacing: -.02em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.sotf-stat span { font-size: .74rem; color: var(--muted-foreground); line-height: 1.3; margin-top: .25rem; }
.sotf-stat i { font: normal 500 10.5px var(--font-mono); margin-top: .3rem; color: var(--muted-foreground); }
.sotf-stat i.is-up { color: var(--good); }
.sotf-stat i.is-down { color: var(--bad); }
.sotf-stat i.is-flat { color: var(--muted-foreground); }
.sotf-desc { color: var(--muted-foreground); font-size: .86rem; line-height: 1.5; }

/* Picks */
.hub-picks { margin-bottom: 3.5rem; }
.pick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }

/* Archive */
.hub-archive { margin-bottom: 3.5rem; }
.arc-tools { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.arc-search { flex: 1 1 240px; min-width: 0; background: var(--muted); color: var(--foreground); border: 1px solid var(--border); border-radius: 3px; padding: .55rem .85rem; font: inherit; font-size: .95rem; }
.arc-search::placeholder { color: var(--faint); }
.arc-search:focus { border-color: rgba(var(--accent-rgb), .8); outline: none; }
.arc-tabs, .arc-toggles { display: flex; flex-wrap: wrap; gap: .35rem; }
.arc-tab { background: transparent; color: var(--muted-foreground); border: 1px solid var(--border); border-radius: 3px; padding: .42rem .7rem; font: 500 .82rem var(--font-display); cursor: pointer; display: inline-flex; gap: .45rem; align-items: center; }
.arc-tab span { font: 400 10.5px var(--font-mono); color: var(--faint); }
.arc-tab:hover { color: #fff; border-color: var(--border-strong); }
.arc-tab[aria-pressed="true"] { color: #fff; background: #1C1C1C; border-color: #555; box-shadow: inset 0 -2px 0 var(--accent); }
.arc-count { color: var(--muted-foreground); font-size: .85rem; margin-bottom: .6rem; }
.arc-month { font-size: 10.5px; color: var(--muted-foreground); font-weight: 500; display: flex; gap: .7rem; align-items: center; padding: 1.1rem 0 .45rem; }
.arc-month span { color: var(--faint); }
.arc-month::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.arc-rows { list-style: none; }
.arc-row { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) 9rem 6.6rem; gap: 1rem; align-items: baseline; padding: .5rem .25rem; border-bottom: 1px solid #181818; }
.arc-row:hover { background: #101010; }
.arc-no, .arc-date, .arc-track { font: 400 11px var(--font-mono); color: var(--faint); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.arc-track { text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.arc-date { text-align: right; }
.arc-title { color: #E9E9E9; text-decoration: none; font-size: .98rem; line-height: 1.35; }
.arc-title:hover { color: var(--accent-hover); }
.arc-row.is-pick .arc-title::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: .55rem; vertical-align: .15em; background: var(--accent); transform: rotate(45deg); }
.arc-row.is-dated .arc-title { color: #A8A8A8; }
.arc-desc { display: none; color: var(--muted-foreground); font-size: .86rem; line-height: 1.5; margin-top: .25rem; }
.arc-list.show-desc .arc-desc { display: block; }
.arc-row[hidden], .arc-group[hidden] { display: none; }
.arc-empty { color: var(--muted-foreground); padding: 1.5rem 0; }

/* Closing CTA */
.hub-cta { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 4px; padding: 1.6rem 1.8rem; margin-bottom: 1rem;
  background: radial-gradient(ellipse 50% 120% at 100% 50%, rgba(var(--accent-rgb), .14), transparent 70%), var(--surface); }
.hub-cta h2 { font-size: 1.4rem; font-weight: 600; letter-spacing: -.02em; }
.hub-cta p:not(.eyebrow) { color: var(--muted-foreground); max-width: 620px; margin-top: .35rem; }
.hub-btn { display: inline-block; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; padding: .8rem 1.5rem; border-radius: 3px; white-space: nowrap; }
.hub-btn:hover { background: var(--accent-hover); }

@media (max-width: 980px) {
  .hub-head { grid-template-columns: 1fr; }
  .hub-head h1 { margin-bottom: .5rem; }
  .track-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .pick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lead-card { grid-template-columns: 1fr; }
  .lead-cover { border-right: 0; border-bottom: 1px solid var(--border); }
  .track-brief { min-height: 0; }
}
@media (max-width: 760px) {
  .hc--wide, .hc-legend .hc-hint { display: none; }
  .hc--compact { display: block; }
  .hc-wrap { padding: 10px 8px 6px; }
}
@media (max-width: 640px) {
  .hub-wrap { padding: 1.5rem 1rem 2.5rem; }
  .top-nav { flex-direction: column; align-items: flex-start; }
  .pick-grid { grid-template-columns: 1fr; }
  .lead-body { padding: 1.1rem 1.1rem 1.3rem; }
  .arc-row { grid-template-columns: 2.4rem minmax(0, 1fr); gap: .25rem .7rem; }
  .arc-track, .arc-date { grid-column: 2; text-align: left; }
  .arc-track { display: none; }
  .hub-cta { padding: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hc-star, .hc-label { opacity: 1; animation: none; }
  .hc-line { animation: none; stroke-dashoffset: 0; }
  .hc-scan { display: none; }
  .hc-halo, .card-img, .lead-card, .feat-card, .pick-card, .sotf-tile { transition: none; }
}