/* =====================================================================
   Season hub — /fpl/{season}/ ("The Season, gameweek by gameweek",
   owner-approved mockup 2026-09-27). Loaded ONLY by renderSeasonHub and
   scoped to .hx-* (plus the hub's pre-rendered pSEO search row), so no
   other pSEO page changes. Same grammar as /news (.nx-*) and the weekly
   articles (.ax-*): one continuous sheet, hairline rules as the only
   structure, headshots straight on the surface with a club crest, every
   numeral in JetBrains Mono (tabular), a two-line keyword H1 with the
   eyebrow inside it, no countdown. Tokens only: the v3 light values and
   their Matchnight flip live in pseo-base.css (loaded on every pSEO page);
   typographic pink is --v3-pink-text, fills never encode meaning.
   Fonts: the same-origin @font-face block (NEWS_HUB_FONT_FACES) is inlined
   in <head> by the generator so the H1 lays out on its final metrics.
   ===================================================================== */

/* main.container.hx-main outranks the deferred shell CSS `.container{…}` rules (CLS). */
/* 76rem + gutters: the sheet shares its edges with the navbar and the search row. */
main.container.hx-main { max-width: calc(76rem + 24px); padding-left: 12px; padding-right: 12px; padding-bottom: 12px; }
.hx-page {
  background: var(--v3-sheet); border-radius: var(--v3-radius-sheet); border: 1px solid transparent;
  box-shadow: var(--v3-glow); max-width: 1216px; margin: 0 auto; padding: 0 56px 8px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.5; color: var(--v3-ink);
  -webkit-font-smoothing: antialiased;
}
.hx-page ul, .hx-page ol { list-style: none; margin: 0; padding: 0; }
.hx-page p, .hx-page h1, .hx-page h2, .hx-page h3 { margin: 0; }
.hx-page a { color: inherit; text-decoration: none; }
.hx-page a:hover { color: inherit; }
.hx-page img { display: block; }
.hx-page a:focus-visible, .hx-page summary:focus-visible { outline: 2px solid var(--v3-pink); outline-offset: 3px; border-radius: 4px; }
.hx-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
.hx-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hx-sep { margin: 0 .5em; opacity: .55; }
.hx-eyebrow { display: block; font: 600 12px/1.2 'Inter', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--v3-ink-soft); }
.hx-kind { color: var(--v3-pink-text); }
.hx-lab { display: block; font: italic 600 12px/1.3 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-ink-soft); }
.hx-link { font: 500 15px/1.2 'Inter', system-ui, sans-serif; color: var(--v3-ink); text-decoration: underline; text-decoration-color: var(--v3-pink); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.hx-page a.hx-link { text-decoration: underline; text-decoration-color: var(--v3-pink); }
.hx-btn { display: inline-block; height: 44px; padding: 0 22px; border-radius: var(--v3-radius-pill); font: 600 14px/44px 'Inter', system-ui, sans-serif; white-space: nowrap; background: var(--v3-ink); color: var(--v3-canvas); }
.hx-page a.hx-btn, .hx-page a.hx-btn:hover { color: var(--v3-canvas); }
.hx-page a.hx-btn:hover { background: var(--v3-purple); }
.hx-crest { width: 16px; height: 16px; flex: none; object-fit: contain; }
.hx-club { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.hx-face { object-fit: contain; object-position: bottom; }
/* Missing cutout: a quiet initial — no circle, no fill, no border. */
.hx-face--mono { display: inline-flex; align-items: center; justify-content: center; font: 700 16px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--v3-ink-soft); }
.hx-tag { font: italic 600 12px/1 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-ink-soft); white-space: nowrap; }
.hx-page a:hover .hx-ed-t, .hx-page a.hx-arc-cell:hover .hx-arc-t, .hx-page a.hx-who:hover .hx-who-name,
.hx-page .hx-task a:hover, .hx-page .hx-reads a:hover, .hx-page .hx-pos a:hover, .hx-page a.hx-club-cell:hover span,
.hx-page a.hx-arc-gw:hover .hx-arc-num, .hx-crumb a:hover { text-decoration: underline; text-decoration-color: var(--v3-pink); text-underline-offset: 4px; }

/* Breadcrumb — one quiet line above the masthead (not the retired in-content crumb) */
.hx-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 22px 0 0; font: 500 12px/1.2 'Inter', system-ui, sans-serif; letter-spacing: .04em; color: var(--v3-ink-soft); }
.hx-crumb .hx-sep { margin: 0 .2em; }
.hx-crumb [aria-current] { color: var(--v3-ink); font-weight: 600; }

/* Masthead — the keyword eyebrow lives INSIDE the single h1; quiet deadline line top-right */
.hx-page header.hx-mast { position: relative; margin: 0; padding: 40px 0 0; text-align: left; }
.hx-page .hx-h1 { margin: 0; font: 800 clamp(40px, 5.2vw, 76px)/0.96 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -.025em; text-transform: uppercase; color: var(--v3-ink); }
.hx-h1 .hx-h1-eyebrow { margin-bottom: 22px; }
/* Exactly two lines on desktop (plain + italic). */
.hx-h1-l1, .hx-h1-l2 { display: block; white-space: nowrap; }
.hx-h1-l2 { font-style: italic; font-weight: 500; }
.hx-mast-clock { position: absolute; top: 40px; right: 0; max-width: 380px; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; }
.hx-clock-lab { font: italic 600 12px/1 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--v3-ink-soft); }
.hx-clock-when { font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; white-space: nowrap; color: var(--v3-ink); }
.hx-clock-plain { font: 500 15px/1.4 'Inter', system-ui, sans-serif; color: var(--v3-ink); }
.hx-clock-sub { font: 400 12px/1.4 'Inter', system-ui, sans-serif; color: var(--v3-ink-soft); }
.hx-live { display: inline-flex; align-items: center; gap: 10px; font: 700 22px/1 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -.01em; text-transform: uppercase; }
.hx-live-dot { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--v3-live); box-shadow: var(--v3-live-glow); }
.hx-live-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--v3-live); opacity: .35; animation: hx-pulse 2s ease-out infinite; }
@keyframes hx-pulse { 0% { transform: scale(.6); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }

/* ============ The signature: the season spine ============
   One hairline, 38 Mono numerals hanging from it. The played stretch is a
   solid ink segment on the rule (each played cell paints its share), played
   numerals are ink and link to that gameweek's page, the next gameweek is the
   one large pink numeral with its date, the rest are quiet. Ticks never touch
   the numerals: ≥10px clear space between every tick and its numeral. */
.hx-spine { display: grid; grid-template-columns: 104px repeat(38, minmax(0, 1fr)); align-items: start; margin-top: 44px; padding: 0 0 40px; border-top: 1px solid var(--v3-border-strong); border-bottom: 1px solid var(--v3-border); }
.hx-spine-lab { padding-top: 20px; font: italic 600 11px/1 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--v3-ink-soft); }
.hx-gw { position: relative; display: block; min-height: 36px; padding-top: 22px; font: 500 14px/1 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--v3-ink-soft); }
.hx-gw::before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 6px; background: var(--v3-border-strong); }
.hx-gw.is-played { font-weight: 700; color: var(--v3-ink); }
.hx-gw.is-played::before { height: 10px; background: var(--v3-ink); }
.hx-gw.is-played::after { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 3px; background: var(--v3-ink); }
.hx-gw.is-now { margin-left: -3px; padding-top: 26px; font-size: 22px; font-weight: 700; letter-spacing: -.03em; color: var(--v3-pink-text); }
.hx-gw.is-now::before { left: 3px; width: 3px; height: 14px; background: var(--v3-pink); }
.hx-gw-when { position: absolute; top: 100%; left: 4px; margin-top: 4px; white-space: nowrap; font: italic 600 11px/1.2 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--v3-pink-text); }
.hx-page a.hx-gw:hover { text-decoration: underline; text-decoration-color: var(--v3-pink); text-underline-offset: 4px; }
/* Phone instrument (hidden on desktop): status line + thin progress rule + snap row */
.hx-spm { display: none; }
.hx-spm-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 4px; }
.hx-spm-line .hx-mono { font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.hx-spm-rule { display: flex; height: 3px; margin-top: 12px; background: var(--v3-border); }
.hx-spm-rule i { flex: 1 1 0; height: 100%; }
.hx-spm-rule i.is-on { background: var(--v3-ink); }
.hx-spm-row { display: flex; gap: 6px; margin: 14px -18px 0; padding: 0 18px 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hx-spm-row::-webkit-scrollbar { display: none; }
.hx-gwm { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--v3-radius-pill); border: 1px solid transparent; font: 500 14px/1 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; color: var(--v3-ink-soft); }
.hx-gwm.is-played { font-weight: 700; color: var(--v3-ink); border-color: var(--v3-border-strong); }
.hx-gwm.is-now { font-weight: 700; background: var(--v3-ink); color: var(--v3-canvas); }
.hx-page a.hx-gwm.is-now, .hx-page a.hx-gwm.is-now:hover { color: var(--v3-canvas); }

/* ============ Now — the lead ============ */
.hx-now { display: grid; grid-template-columns: minmax(0, 1fr) 480px; column-gap: 56px; align-items: start; padding: 56px 0; border-bottom: 1px solid var(--v3-border); }
.hx-now-text { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hx-page .hx-now-h { margin-top: 24px; font: 700 48px/1.04 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -.025em; text-wrap: balance; color: var(--v3-ink); }
.hx-page .hx-now-dek { margin-top: 20px; max-width: 46ch; font: 400 18px/1.5 'Inter', system-ui, sans-serif; color: var(--v3-ink-soft); text-wrap: pretty; }
.hx-now-cta { display: flex; align-items: center; gap: 24px; margin-top: 36px; }
.hx-eds { display: flex; flex-direction: column; min-width: 0; }
.hx-eds > .hx-lab { padding-bottom: 6px; }
.hx-ed { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 16px; align-items: end; padding: 24px 0 0; border-bottom: 1px solid var(--v3-border); }
.hx-ed:last-of-type { border-bottom: 0; }
.hx-ed > .hx-face { width: 56px; height: 56px; }
.hx-ed-body, .hx-ed-num { padding-bottom: 16px; min-width: 0; }
.hx-ed-kind { display: block; font: 600 11px/1 'Inter', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--v3-pink-text); }
.hx-ed-kind .hx-mono { margin-left: 8px; letter-spacing: .06em; color: var(--v3-ink-soft); }
.hx-ed-t { display: block; margin-top: 6px; font: 600 18px/1.2 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -.01em; }
.hx-ed-num { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.hx-ed-val { display: inline-flex; align-items: center; gap: 6px; font: 700 22px/1 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.hx-ed-num small { display: block; margin-top: 6px; white-space: nowrap; font: italic 600 10px/1 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-ink-soft); }
.hx-ed--soon .hx-ed-kind { color: var(--v3-ink-soft); }
.hx-ed--soon .hx-ed-t { font-style: italic; font-weight: 500; color: var(--v3-ink-soft); }
.hx-eds > .hx-link { align-self: flex-start; margin-top: 22px; }

/* ============ Sections — marginalia grid (same as the articles) ============ */
.hx-sec { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 48px; padding: 48px 0; border-bottom: 1px solid var(--v3-border); }
.hx-sec-margin { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.hx-sec-idx { font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--v3-pink-text); }
.hx-sec-kick { font: italic 600 12px/1.4 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-ink-soft); }
.hx-sec-margin .hx-link { margin-top: 8px; font-size: 14px; }
.hx-sec-body { min-width: 0; }
.hx-page .hx-h2 { font: 700 28px/1.1 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -.02em; text-wrap: balance; color: var(--v3-ink); }
.hx-sec-body > .hx-h2 + * { margin-top: 28px; }

/* 01 · task directory — four hairline columns grouped by what the manager is deciding */
.hx-tasks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hx-task { min-width: 0; padding-right: 28px; }
.hx-task + .hx-task { border-left: 1px solid var(--v3-border); padding-left: 28px; }
.hx-task:last-child { padding-right: 0; }
.hx-page .hx-task-h { font: 700 20px/1.1 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -.02em; color: var(--v3-ink); }
.hx-task-h .hx-mono { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--v3-pink-text); }
.hx-task ul { margin-top: 16px; }
.hx-task li a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--v3-border); font: 500 15px/1.25 'Inter', system-ui, sans-serif; }
.hx-task li:last-child a { border-bottom: 0; }
.hx-task li a .hx-mono { flex: none; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--v3-ink-soft); }
.hx-task li a.is-lead { font-weight: 600; }
.hx-task li a.is-lead .hx-mono { color: var(--v3-pink-text); }

/* 02 · form table — hairline rows; no rule above the first or below the last */
.hx-table { width: 100%; border-collapse: collapse; }
.hx-page .hx-table th { padding: 0 24px 12px 0; background: none; border-bottom: 1px solid var(--v3-ink); text-align: left; white-space: nowrap; font: italic 600 11px/1 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-ink-soft); }
.hx-page .hx-table td { padding: 16px 24px 16px 0; background: none; border-bottom: 1px solid var(--v3-border); vertical-align: middle; font-size: 15px; color: var(--v3-ink); }
.hx-page .hx-table tr:last-child td { border-bottom: 0; }
.hx-page .hx-table th:last-child, .hx-page .hx-table td:last-child { padding-right: 0; }
.hx-page .hx-table .num { text-align: right; }
.hx-table .hx-mono { font-size: 15px; font-weight: 600; white-space: nowrap; }
.hx-page .hx-table td.c-rank { width: 36px; padding-right: 12px; }
.hx-table td.c-rank .hx-mono { font-size: 13px; color: var(--v3-ink-soft); }
.hx-table td.c-pts .hx-mono { font-size: 17px; font-weight: 700; }
/* Headshot straight on the surface, standing on the row's own rule; 22px of air above the head. */
.hx-page .hx-table td.c-who { padding-top: 22px; padding-bottom: 0; vertical-align: bottom; }
.hx-who { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: end; min-width: 0; }
.hx-who > .hx-face { width: 48px; height: 48px; }
.hx-who-text { display: block; min-width: 0; padding-bottom: 12px; }
.hx-who-name { display: block; font: 600 17px/1.15 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -.01em; overflow-wrap: anywhere; }
.hx-who-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; font: 500 12px/1.2 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .02em; color: var(--v3-ink-soft); }
.hx-who-meta .hx-crest { width: 14px; height: 14px; }
.hx-table td.c-line, .hx-table td.c-stats { display: none; }
.hx-form-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-top: 22px; }
.hx-page .hx-form-note { font-size: 13px; line-height: 1.5; color: var(--v3-ink-soft); text-align: right; max-width: 62ch; }

/* 03 · fixtures — crest + code, each side's FDR as a Mono digit, no colour fills */
.hx-fix { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: 48px; align-items: start; }
.hx-fix--reads { grid-template-columns: minmax(0, 420px); }
.hx-fix-list { min-width: 0; }
.hx-fixhead { display: grid; grid-template-columns: 1fr 120px 1fr; align-items: end; padding-bottom: 10px; border-bottom: 1px solid var(--v3-ink); }
.hx-fixhead .hx-lab { font-size: 11px; white-space: nowrap; }
.hx-fixhead-fdr { text-align: center; }
.hx-fixhead-r { text-align: right; }
.hx-fixrow { display: grid; grid-template-columns: 1fr 36px 24px 36px 1fr; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--v3-border); font: 600 16px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .02em; }
.hx-fixrow:last-child { border-bottom: 0; }
.hx-fixrow .hx-crest { width: 20px; height: 20px; }
.hx-club--away { justify-content: flex-end; }
.hx-fdr { font-size: 17px; font-weight: 700; text-align: center; color: var(--v3-ink); }
.hx-v { text-align: center; font: italic 600 11px/1 'Inter Tight', 'Inter', system-ui, sans-serif; color: var(--v3-ink-soft); }
.hx-page .hx-fix-note { margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--v3-ink-soft); }
.hx-reads > .hx-lab { padding-bottom: 6px; }
.hx-reads li a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--v3-border); font: 600 15px/1.2 'Inter Tight', 'Inter', system-ui, sans-serif; }
.hx-reads li:last-child a { border-bottom: 0; }
.hx-reads li a .hx-mono { font-size: 12px; font-weight: 600; color: var(--v3-ink-soft); }

/* 04 · browse — positions as hairline rows; clubs as a compact crest grid */
.hx-browse { display: grid; grid-template-columns: 300px minmax(0, 1fr); column-gap: 48px; align-items: start; }
.hx-browse--one { grid-template-columns: minmax(0, 1fr); }
.hx-browse-kick { margin-bottom: 14px; }
.hx-pos li a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--v3-border); font: 600 17px/1.2 'Inter Tight', 'Inter', system-ui, sans-serif; }
.hx-pos li:first-child a { padding-top: 0; }
.hx-pos li:last-child a { border-bottom: 0; }
.hx-pos li a .hx-mono { font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--v3-ink-soft); }
.hx-clubs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
.hx-club-cell { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 0; border-bottom: 1px solid var(--v3-border); font: 500 15px/1.2 'Inter', system-ui, sans-serif; }
.hx-club-cell span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hx-club-cell .hx-crest { width: 20px; height: 20px; }
.hx-club-cell:nth-child(-n+3) { padding-top: 0; }
.hx-club-cell:nth-last-child(-n+3):nth-child(3n+1), .hx-club-cell:nth-last-child(-n+3):nth-child(3n+1) ~ .hx-club-cell { border-bottom: 0; }

/* 05 · the season so far — one row per gameweek, folded under a <details>
   (opened on ≥761px by a tiny inline script; collapsed on phones) */
.hx-arc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.hx-arc summary::-webkit-details-marker { display: none; }
.hx-arc-count { font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--v3-ink-soft); }
.hx-arc-plus { display: none; margin-left: 10px; font-style: normal; color: var(--v3-pink-text); }
.hx-arc-plus::before { content: "+"; }
.hx-arc[open] .hx-arc-plus::before { content: "\2212"; }
.hx-arc-rows { margin-top: 28px; }
.hx-arc-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); column-gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--v3-border); }
.hx-arc-row:first-child { padding-top: 0; }
.hx-arc-row:last-child { border-bottom: 0; }
.hx-arc-gw { display: flex; align-items: baseline; gap: 10px; }
.hx-arc-num { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.hx-arc-date { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--v3-ink-soft); }
.hx-arc-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
.hx-arc-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hx-arc-kind { font: 600 11px/1.1 'Inter', system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--v3-pink-text); }
.hx-arc-t { font: 600 16px/1.25 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -.01em; }
.hx-arc-t .hx-mono { font-weight: 700; font-size: .92em; }
.hx-arc-cell--soon .hx-arc-kind { color: var(--v3-ink-soft); }
.hx-arc-cell--soon .hx-arc-t { font-style: italic; font-weight: 500; color: var(--v3-ink-soft); }

/* Closing CTA band, methodology, FAQ */
.hx-cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; padding: 56px 0; border-bottom: 1px solid var(--v3-border); }
.hx-page .hx-cta-h { font: 800 44px/1 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: -.025em; text-transform: uppercase; color: var(--v3-ink); }
.hx-cta-h em { display: block; font-style: italic; font-weight: 500; }
.hx-page .hx-cta-p { margin-top: 14px; max-width: 46ch; font-size: 16px; line-height: 1.5; color: var(--v3-ink-soft); }
.hx-trust { border-bottom: 1px solid var(--v3-border); }
.hx-trust summary, .hx-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.hx-trust summary::-webkit-details-marker, .hx-faq summary::-webkit-details-marker { display: none; }
.hx-trust summary { padding: 18px 0; font: 600 13px/1.2 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-ink-soft); }
.hx-trust summary .hx-mono::before, .hx-faq summary .hx-mono::before { content: "+"; font-size: 16px; color: var(--v3-ink-soft); }
.hx-trust[open] summary .hx-mono::before, .hx-faq details[open] summary .hx-mono::before { content: "\2212"; }
.hx-trust-body { padding: 0 0 20px; max-width: 70ch; font-size: 14px; line-height: 1.6; color: var(--v3-ink-soft); }
.hx-faq { padding: 12px 0 8px; }
.hx-page .hx-faq-h { padding: 20px 0 6px; font: italic 600 12px/1.4 'Inter Tight', 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--v3-ink-soft); }
.hx-faq details { border-bottom: 1px solid var(--v3-border); }
.hx-faq details:last-child { border-bottom: 0; }
.hx-faq summary { padding: 16px 0; font: 500 15px/1.35 'Inter', system-ui, sans-serif; color: var(--v3-ink); }
.hx-faq-body { padding: 0 0 18px; max-width: 70ch; font-size: 14px; line-height: 1.6; color: var(--v3-ink-soft); }

/* The pSEO shell's search row, pre-rendered in #pseo-sidebar with the React
   bar's own classes. Same fixed geometry as pseo-shell.css (the reserved band
   in main.container stays exactly as tall), restyled to the Edition tokens.
   These #id rules outrank the shell's class rules once its CSS lands, so the
   static bar and the hydrated bar paint identically. */
#pseo-sidebar .pseo-hubnav { position: fixed; top: calc(var(--top-nav-offset) + var(--pseo-hubnav-gap)); left: 0; right: 0; z-index: 40; width: min(calc(100vw - 24px), 1216px); margin-inline: auto; font-family: 'Inter', system-ui, sans-serif; }
#pseo-sidebar .pseo-hubnav-bar { position: relative; z-index: 92; display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--pseo-hubnav-height); }
#pseo-sidebar .pseo-hubnav-search { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 12px; height: 48px; margin: 0; padding: 0 20px; border-radius: var(--v3-radius-pill); border: 1px solid var(--v3-border-strong); background: var(--v3-sheet); color: var(--v3-ink-soft); box-shadow: var(--v3-glow); }
#pseo-sidebar .pseo-hubnav-search svg { width: 18px; height: 18px; flex: none; }
#pseo-sidebar .pseo-hubnav-search:focus-within { border-color: var(--v3-pink); color: var(--v3-ink); }
#pseo-sidebar .pseo-hubnav-search-input { flex: 1 1 auto; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; outline: none; font: 400 15px/1 'Inter', system-ui, sans-serif; color: var(--v3-ink); }
#pseo-sidebar .pseo-hubnav-search-input::placeholder { font-weight: 400; color: var(--v3-ink-soft); }
#pseo-sidebar .pseo-hubnav-explore { display: inline-flex; flex: none; align-items: center; gap: 10px; height: 48px; margin: 0; padding: 0 20px; border-radius: var(--v3-radius-pill); border: 1px solid var(--v3-border); background: var(--v3-card); box-shadow: var(--v3-glow); color: var(--v3-ink); font: 600 14px/1 'Inter', system-ui, sans-serif; letter-spacing: 0; white-space: nowrap; cursor: pointer; }
#pseo-sidebar .pseo-hubnav-explore:hover { background: var(--v3-card-raised); }
#pseo-sidebar .pseo-hubnav-explore:focus-visible { outline: 2px solid var(--v3-pink); outline-offset: 2px; }
#pseo-sidebar .pseo-hubnav-explore svg:first-child { width: 16px; height: 16px; }
#pseo-sidebar .pseo-hubnav-chevron { width: 12px; height: 12px; opacity: .7; }
#pseo-sidebar .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Dark (Matchnight): tokens flip in pseo-base.css; only the sheet edge and the
   ink-button hover need their own values here (purple under canvas-ink fails AA). */
@media (prefers-color-scheme: dark) {
  .hx-page { border-color: var(--v3-border); }
  .hx-page a.hx-btn:hover { background: var(--v3-ink); opacity: .88; }
  .hx-page a:focus-visible, .hx-page summary:focus-visible { outline-color: var(--v3-pink-text); }
}
@media (prefers-reduced-motion: reduce) {
  .hx-live-dot::after { animation: none; opacity: .3; }
  .hx-spm-row { scroll-behavior: auto; }
}

/* Tablet */
@media (max-width: 1100px) {
  .hx-page { padding: 0 32px 8px; }
  .hx-now { grid-template-columns: minmax(0, 1fr) 400px; column-gap: 40px; }
  .hx-sec { grid-template-columns: 150px minmax(0, 1fr); column-gap: 32px; }
  .hx-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
  .hx-task:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hx-task:nth-child(odd):not(:last-child) { padding-right: 28px; }
  .hx-fix, .hx-browse { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .hx-reads { border-top: 1px solid var(--v3-border); padding-top: 22px; }
}
/* The 38-numeral spine needs ~26px per column; below that it becomes the phone instrument. */
@media (max-width: 960px) {
  .hx-h1-l1 { white-space: normal; }
  .hx-mast-clock { position: static; max-width: none; margin-top: 24px; align-items: flex-start; text-align: left; }
  .hx-spine { display: none; }
  .hx-spm { display: block; margin: 26px 0 0; border-bottom: 1px solid var(--v3-border); }
  .hx-spm-row { margin-left: -32px; margin-right: -32px; padding-left: 32px; padding-right: 32px; scroll-padding-left: 32px; }
  .hx-now { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .hx-sec { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .hx-sec-margin { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 12px; }
  .hx-sec-margin .hx-link { margin: 0 0 0 auto; }
}

/* Mobile (≤760): one column; every headshot contained in its own row, nothing scrolls sideways */
@media (max-width: 760px) {
  main.container.hx-main { padding-bottom: 12px; }
  .hx-page { border-radius: 22px; padding: 0 18px 4px; }
  .hx-crumb { padding-top: 18px; }
  .hx-page header.hx-mast { padding-top: 22px; }
  .hx-page .hx-h1 { font-size: 39px; }
  .hx-h1 .hx-h1-eyebrow { margin-bottom: 14px; line-height: 1.5; }
  .hx-h1-l2 { white-space: normal; }
  .hx-mast-clock { margin-top: 22px; }
  .hx-clock-when { font-size: 18px; white-space: normal; }
  .hx-live { font-size: 20px; }
  /* No rule above the status line: the instrument opens on air, closes on a hairline. */
  .hx-spm-row { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; scroll-padding-left: 18px; }
  .hx-now { padding: 26px 0 28px; row-gap: 28px; }
  .hx-page .hx-now-h { margin-top: 14px; font-size: 30px; }
  .hx-page .hx-now-dek { margin-top: 16px; font-size: 16px; }
  .hx-now-cta { margin-top: 24px; }
  .hx-ed { grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 12px; padding-top: 20px; }
  .hx-ed > .hx-face { width: 48px; height: 48px; }
  .hx-ed-body, .hx-ed-num { padding-bottom: 14px; }
  .hx-ed-kind .hx-mono { display: block; margin: 4px 0 0; }
  .hx-ed-t { font-size: 16px; }
  .hx-ed-val { font-size: 18px; }
  .hx-sec { padding: 30px 0; }
  .hx-page .hx-h2 { font-size: 24px; }
  .hx-sec-body > .hx-h2 + * { margin-top: 20px; }
  .hx-tasks { column-gap: 20px; row-gap: 26px; }
  .hx-task, .hx-task:nth-child(odd):not(:last-child) { padding-right: 0; }
  .hx-task:nth-child(even) { padding-left: 20px; }
  .hx-page .hx-task-h { font-size: 17px; }
  .hx-task li a { padding: 9px 0; font-size: 14px; }
  .hx-task li a .hx-mono { display: none; }
  /* Form table → self-contained rows: rank · (name, then crest club · pos · price) · pts over form · owned */
  .hx-form thead { display: none; }
  .hx-form, .hx-form tbody { display: block; }
  .hx-form tr { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "rank who pts" "rank line stats"; column-gap: 10px; row-gap: 6px; align-items: center; padding: 18px 0 12px; border-bottom: 1px solid var(--v3-border); }
  .hx-form tr:last-child { border-bottom: 0; }
  .hx-page .hx-form td, .hx-page .hx-form td.c-who { display: block; padding: 0; border: 0; }
  .hx-page .hx-form td.c-rank { grid-area: rank; width: auto; padding: 0; }
  .hx-form td.c-who { grid-area: who; min-width: 0; }
  .hx-form td.c-pts { grid-area: pts; text-align: right; }
  .hx-page .hx-form td.c-pos, .hx-page .hx-form td.c-price, .hx-page .hx-form td.c-form, .hx-page .hx-form td.c-own { display: none; }
  .hx-page .hx-form td.c-line { grid-area: line; display: flex; align-items: center; gap: 6px; min-width: 0; padding-left: 56px; white-space: nowrap; font: 500 12px/1.2 'JetBrains Mono', ui-monospace, monospace; color: var(--v3-ink-soft); }
  .hx-page .hx-form td.c-stats { grid-area: stats; display: block; padding-left: 10px; white-space: nowrap; text-align: right; font: 500 11px/1.2 'JetBrains Mono', ui-monospace, monospace; color: var(--v3-ink-soft); }
  .hx-form td.c-line .hx-tag { font-size: 11px; }
  .hx-form .hx-who { grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; align-items: center; }
  .hx-form .hx-who > .hx-face { width: 44px; height: 44px; }
  .hx-form .hx-who-text { padding-bottom: 0; }
  .hx-form .hx-who-meta { display: none; }
  .hx-form-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hx-page .hx-form-note { text-align: left; }
  .hx-fixrow { font-size: 15px; }
  .hx-pos li a { font-size: 16px; }
  .hx-clubs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-club-cell { padding: 10px 0; font-size: 14px; }
  .hx-club-cell:nth-child(-n+3) { padding-top: 10px; }
  .hx-club-cell:nth-child(-n+2) { padding-top: 0; }
  .hx-club-cell:nth-last-child(-n+3):nth-child(3n+1), .hx-club-cell:nth-last-child(-n+3):nth-child(3n+1) ~ .hx-club-cell { border-bottom: 1px solid var(--v3-border); }
  .hx-club-cell:nth-last-child(-n+2):nth-child(odd), .hx-club-cell:nth-last-child(-n+2):nth-child(odd) ~ .hx-club-cell { border-bottom: 0; }
  .hx-arc summary { flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 4px; }
  .hx-arc-plus { display: inline; }
  .hx-arc-row { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 14px 0; }
  .hx-arc-num { font-size: 22px; }
  .hx-arc-cells { display: flex; flex-direction: column; gap: 5px; }
  .hx-arc-cell { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 10px; align-items: baseline; }
  .hx-arc-cell--empty { display: none; }
  .hx-arc-kind { font-size: 10px; letter-spacing: .1em; }
  .hx-arc-t { font-size: 14px; }
  .hx-cta { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 40px 0; }
  .hx-page .hx-cta-h { font-size: 32px; }
  #pseo-sidebar .pseo-hubnav-bar { gap: 8px; }
  #pseo-sidebar .pseo-hubnav-search { height: 44px; padding: 0 16px; }
  #pseo-sidebar .pseo-hubnav-search-input { font-size: 14px; }
  #pseo-sidebar .pseo-hubnav-explore { width: 44px; height: 44px; padding: 0; justify-content: center; }
  #pseo-sidebar .pseo-hubnav-explore-text, #pseo-sidebar .pseo-hubnav-chevron { display: none; }
}
/* Phones narrower than the crest · club · pos · price + form · owned line: the
   stats drop to their own line under it, so the two never collide. */
@media (max-width: 420px) {
  .hx-form tr { grid-template-areas: "rank who pts" "rank line line" "rank stats stats"; row-gap: 4px; }
  .hx-page .hx-form td.c-stats { padding-left: 56px; text-align: left; }
}