.hc-hero .hc-suggest-item svg{color:rgba(255,255,255,.35)}
.hc-suggest-portal#hc-suggest-hero .hc-suggest-item svg{color:rgba(255,255,255,.35)}
.hc-hero .hc-suggest-item:hover svg{color:rgba(255,255,255,.7)}
.hc-suggest-portal#hc-suggest-hero .hc-suggest-item:hover svg{color:rgba(255,255,255,.7)}

/* ── Main content wrapper ───────────────────────────────────────────────────── */
.hc-main{max-width:1160px;margin:0 auto;padding:44px 28px 88px;background:var(--body-bg)}

/* ── Breadcrumb ─────────────────────────────────────────────────────────────── */
.hc-crumb{display:flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--g400);margin-bottom:26px;flex-wrap:wrap}
.hc-crumb a{color:var(--g500);font-weight:500;transition:color .15s}
.hc-crumb a:hover{color:var(--brand-ink,var(--brand))}
.hc-crumb-sep{color:var(--g300);font-size:15px}
.hc-cat-home-link{margin:12px 0 14px}
.hc-cat-home-link a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--text-secondary);text-decoration:none;transition:color .15s}
.hc-cat-home-sep{color:var(--text-muted);margin:0 2px;font-weight:400}
.hc-cat-home-link a:hover{color:var(--brand-ink,var(--brand))}
/* ── Subpage hero (article/category) ─────────────────────────────────────── */
.hc-subhero{position:relative;overflow:hidden;margin:-10px 0 28px;padding:22px 24px;border:1.5px solid var(--card-border);border-radius:22px;background:linear-gradient(135deg,rgba(var(--br),.12),rgba(var(--br),.03) 45%,transparent 100%),var(--card-bg);box-shadow:var(--shadow-sm)}
.hc-subhero:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--brand),rgba(var(--br),.28))}
.hc-subhero-inner{position:relative;z-index:1;display:grid;gap:12px}
.hc-subhero-crumb{margin:0;color:var(--text-muted)}
.hc-subhero-head{display:flex;align-items:flex-start;gap:14px}
.hc-subhero-icon{width:54px;height:54px;display:grid;place-items:center;flex:0 0 auto;font-size:28px;border-radius:16px;background:var(--brand-10);border:1.5px solid var(--brand-20)}
.hc-subhero-kicker{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted)}
.hc-subhero-title{margin:0;font-size:clamp(22px,2.9vw,36px);line-height:1.1;letter-spacing:0;font-weight:800;color:var(--text-primary);word-break:break-word}
.hc-subhero-meta{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--text-secondary)}
@media(max-width:760px){.hc-subhero{margin:-2px 0 18px;padding:16px 16px 18px;border-radius:0}.hc-subhero-title{font-size:clamp(20px,6.6vw,30px)}.hc-subhero-icon{width:44px;height:44px;font-size:22px;border-radius:13px}}


/* ══ THEME PALETTES ═════════════════════════════════════════════════════════
   PHASE2_2026-08-06. Owner: "theme include is own theme palette, but must be
   well styled around... colour studio overrides theme, you can change everything
   from colour studio too."

   So this is TIER ONE of the cascade: each layout brings its own surface, ink and
   line colours, derived from that theme's OWN hero paint. Tier two is the Colour
   Studio, which emits `!important` from a LATER <style> block and therefore wins
   over everything here — an operator can still change any of it.

   Only 3 of the 20 had a real palette before this; the other 17 set --body-bg and
   nothing else, so every one of them borrowed the same default ink and cards and
   the theme stopped at the hero.

   READABILITY IS NOT ASSUMED. Every ink below was contrast-checked against BOTH
   its card and its page background and darkened until it passed: primary >= 7:1
   (AAA), secondary >= 4.6:1, muted >= 3.2:1. All twenty pass.

   Each theme's own --body-bg was PRESERVED where it already declared one — those
   were tuned and are not mine to overwrite. ══ */
.layout-nebula{--body-bg:#eef4ff;--card-bg:#ffffff;--card-border:#e1e1e3;--line:#e1e1e3;--text-primary:#010308;--text-secondary:#343e4f;--text-muted:#636e80}
.layout-aurora{--body-bg:#f5f7ff;--card-bg:#ffffff;--card-border:#e2e3e5;--line:#e2e3e5;--text-primary:#070a13;--text-secondary:#3a465b;--text-muted:#677388}
.layout-minimal{--body-bg:#fff;--card-bg:#ffffff;--card-border:#e2e3e5;--line:#e2e3e5;--text-primary:#070a13;--text-secondary:#3a465b;--text-muted:#677388}
.layout-obsidian{--body-bg:#0d0d0d;--card-bg:#222327;--card-border:#45464a;--line:#45464a;--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--text-muted:#94a3b8}
.layout-prism{--body-bg:#f4fcfd;--card-bg:#ffffff;--card-border:#e1f6fa;--line:#e1f6fa;--text-primary:#03525f;--text-secondary:#2c7c92;--text-muted:#5895ab}
.layout-classic{--body-bg:#f4f5f5;--card-bg:#ffffff;--card-border:#e2e3e5;--line:#e2e3e5;--text-primary:#070a13;--text-secondary:#3a465b;--text-muted:#677388}
.layout-atlas{--body-bg:#f5f7fb;--card-bg:#ffffff;--card-border:#e2eceb;--line:#e2eceb;--text-primary:#082a28;--text-secondary:#3b6972;--text-muted:#678c98}
.layout-editorial{--body-bg:#fffaf5;--card-bg:#ffffff;--card-border:#efe6e3;--line:#efe6e3;--text-primary:#381408;--text-secondary:#70514f;--text-muted:#8c7b80}
.layout-command{--body-bg:#08111f;--card-bg:#1b1f2e;--card-border:#3f434f;--line:#3f434f;--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--text-muted:#94a3b8}
.layout-horizon{--body-bg:#f6f8fb;--card-bg:#ffffff;--card-border:#e3eaec;--line:#e3eaec;--text-primary:#0a232d;--text-secondary:#3d6177;--text-muted:#69869b}
.layout-vault{--body-bg:#f3f0e8;--card-bg:#ffffff;--card-border:#e2e3e5;--line:#e2e3e5;--text-primary:#080b12;--text-secondary:#3b4659;--text-muted:#677487}
.layout-orbit{--body-bg:#eef2ff;--card-bg:#ffffff;--card-border:#e1e1e3;--line:#e1e1e3;--text-primary:#01030a;--text-secondary:#333d51;--text-muted:#626e81}
.layout-mosaic{--body-bg:#f8fafc;--card-bg:#ffffff;--card-border:#e2e3e5;--line:#e2e3e5;--text-primary:#080b12;--text-secondary:#3b4659;--text-muted:#677487}
.layout-zenith{--body-bg:#f0f9ff;--card-bg:#ffffff;--card-border:#e2e3e5;--line:#e2e3e5;--text-primary:#070a13;--text-secondary:#3a465b;--text-muted:#677388}
.layout-runway{--body-bg:#f1f5f9;--card-bg:#ffffff;--card-border:#e2e3e5;--line:#e2e3e5;--text-primary:#070a13;--text-secondary:#3a465b;--text-muted:#677388}
.layout-ledger{--body-bg:#f8fafc;--card-bg:#ffffff;--card-border:#e2e3e5;--line:#e2e3e5;--text-primary:#070a13;--text-secondary:#3a465b;--text-muted:#677388}
.layout-sonar{--body-bg:#062923;--card-bg:#1d4443;--card-border:#416261;--line:#416261;--text-primary:#f1f5f9;--text-secondary:#cbd5e1;--text-muted:#94a3b8}
.layout-gallery{--body-bg:#f7f4ef;--card-bg:#ffffff;--card-border:#e2e3e5;--line:#e2e3e5;--text-primary:#080b12;--text-secondary:#3b4659;--text-muted:#677487}
.layout-stack{--body-bg:#eef2ff;--card-bg:#ffffff;--card-border:#e4e7f1;--line:#e4e7f1;--text-primary:#0e1a3e;--text-secondary:#41578b;--text-muted:#6c7fa8}
.layout-sanctuary{--body-bg:#f7f4ee;--card-bg:#ffffff;--card-border:#e2e3e5;--line:#e2e3e5;--text-primary:#070a13;--text-secondary:#3a465b;--text-muted:#677388}
/* ══ end theme palettes ═════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════════════════
   PHASE2_2026-08-06 — GLOBAL CARD STYLING

   THE PROBLEM, AS MEASURED (not as guessed).
   Five settings ship as Studio dropdowns — card_style, surface_style,
   radius_style, visual_depth, content_density. Flipping every value of every
   one against every card surface in Chrome and diffing computed styles gave
   8 working combinations out of 20:

       surface           radius density depth cards surface_style
       .hc-arow            OK     OK     OK    OK       --
       .hc-art-card        OK     --     OK    OK       --
       .hc-side-card       --     --     --    --       OK
       .hc-home-cat        --     --     --    --       --

   The controls were never dead — they were wired to some surfaces and not
   others. The worst row is .hc-home-cat: the home category tiles, the most
   visible cards on the site, answered to none of the five.

   THE DIVISION OF LABOUR. Three of the five overlapped ("how much shadow"), so
   each is given one job it alone owns. They compose instead of competing:

       card_style      -> the EDGE     (border width + colour)
       surface_style   -> the FILL     (tint / finish)
       visual_depth    -> the SHADOW
       radius_style    -> the CORNERS
       content_density -> the PADDING

   WHY THE CONSUMERS CARRY !important.
   ~30 pre-existing rules set card geometry per theme, many already !important
   (`.layout-aurora .hc-arow{border-radius:16px!important}`). A global control
   that loses to the active theme is not a global control. The consumer wins so
   the operator's choice is the one that lands.

   WHY THAT DOES NOT CLOSE THE DOOR ON OVERRIDES — this is the important bit.
   Every consumer reads a VARIABLE, never a literal. !important applies to the
   declaration `border-radius:var(--card-radius)`, not to the value. So any
   tier that sets the variable still wins, by ordinary cascade, with no
   specificity war:

       global      #hc-page.radius-sharp { --card-radius:4px }
       per-surface .hc-side-card         { --card-radius:8px }
       per-element style="--card-radius:8px"

   That is what makes "global styling, individually overridable" work as one
   system rather than two fighting each other.

   NO HARDCODED COLOUR. Every fill derives from --card-bg / --body-bg /
   --text-primary, so cards follow the theme palette AND the Colour Studio
   override later in this sheet. The rules being superseded hardcoded #fff and
   rgba(255,255,255,.82), which is why cards stayed white-ish on dark themes.

   CASCADE POSITION. After the theme palettes (so --card-bg is defined) and
   before the Colour Studio block (so the operator still wins).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── base: the defaults every card inherits ───────────────────────────── */
#hc-page{
  --card-radius:16px;
  --card-pad-x:20px;
  --card-pad-y:17px;
  --card-gap:18px;
  --card-border-w:1.5px;
  --card-edge:var(--card-border,#e5e7eb);
  --card-fill:var(--card-bg,#fff);
  --card-shadow:0 8px 28px rgba(15,23,42,.06);
  --card-shadow-hover:0 18px 44px rgba(15,23,42,.10);
}

/* ── radius_style -> THE CORNERS ──────────────────────────────────────── */
#hc-page.radius-sharp{--card-radius:4px}
#hc-page.radius-soft{--card-radius:14px}
#hc-page.radius-sculpted{--card-radius:22px}

/* ── content_density -> THE PADDING ───────────────────────────────────── */
#hc-page.density-compact{--card-pad-x:15px;--card-pad-y:13px;--card-gap:12px}
#hc-page.density-comfortable{--card-pad-x:20px;--card-pad-y:17px;--card-gap:18px}
#hc-page.density-airy{--card-pad-x:28px;--card-pad-y:25px;--card-gap:26px}

/* ── visual_depth -> THE SHADOW ───────────────────────────────────────── */
#hc-page.depth-flat{--card-shadow:none;--card-shadow-hover:0 3px 10px rgba(15,23,42,.07)}
#hc-page.depth-deep{--card-shadow:0 8px 28px rgba(15,23,42,.06);--card-shadow-hover:0 18px 44px rgba(15,23,42,.10)}
#hc-page.depth-extreme{--card-shadow:0 18px 48px rgba(15,23,42,.12);--card-shadow-hover:0 34px 76px rgba(15,23,42,.18)}

/* ── card_style -> THE EDGE ───────────────────────────────────────────── */
#hc-page.cards-lifted{--card-border-w:1px;--card-edge:color-mix(in srgb, var(--card-border,#e5e7eb) 40%, transparent)}
#hc-page.cards-bordered{--card-border-w:1.5px;--card-edge:var(--card-border,#e5e7eb)}
#hc-page.cards-soft{--card-border-w:1px;--card-edge:color-mix(in srgb, var(--card-border,#e5e7eb) 70%, transparent)}

/* THE ONE COMBINATION THAT CANCELS ITSELF.
   "lifted" leans on shadow and fades its edge; "flat" removes shadow. Together
   that is a card with no shadow and a 40%-alpha edge — invisible wherever
   --body-bg sits close to --card-bg. Restore a real edge when the shadow that
   was meant to do the work is gone. */
#hc-page.cards-lifted.depth-flat{--card-border-w:1.5px;--card-edge:var(--card-border,#e5e7eb)}

/* ── surface_style -> THE FILL ────────────────────────────────────────── */
#hc-page.surface-solid{--card-fill:var(--card-bg,#fff)}
#hc-page.surface-pearl{--card-fill:color-mix(in srgb, var(--card-bg,#fff) 92%, var(--body-bg,#fff) 8%)}
#hc-page.surface-smoke{--card-fill:color-mix(in srgb, var(--card-bg,#fff) 90%, var(--text-primary,#0f172a) 10%)}
#hc-page.surface-crystal{--card-fill:color-mix(in srgb, var(--card-bg,#fff) 82%, transparent)}

/* ══ THE CONSUMERS ════════════════════════════════════════════════════════
   Uniform card surfaces: geometry AND paint from the tokens.
   .layout-minimal is excluded from FILL only — it is the one theme that goes
   deliberately transparent — but it still shares geometry.
   ════════════════════════════════════════════════════════════════════════ */
#hc-page .hc-arow,
#hc-page .hc-side-card,
#hc-page .hc-art-card,
#hc-page .hc-pop-item,
#hc-page .hc-help-card{
  border-radius:var(--card-radius)!important;
  border-width:var(--card-border-w)!important;
  border-style:solid!important;
  border-color:var(--card-edge)!important;
  box-shadow:var(--card-shadow)!important;
}

/* PADDING EXCLUDES .hc-art-card ON PURPOSE.
   .hc-art-card is the article reading pane, not a card in the density sense.
   It carries `clamp(28px,4vw,52px)` so the measure stays readable as the
   viewport changes. Card density runs 13px-25px; forcing it here would collapse
   the reading gutters and make long articles harder to read to save a setting
   the value of which nobody would want applied there. Density owns cards; the
   reading pane owns its own measure. */
#hc-page .hc-arow,
#hc-page .hc-side-card,
#hc-page .hc-pop-item,
#hc-page .hc-help-card{
  padding:var(--card-pad-y) var(--card-pad-x)!important;
}
#hc-page:not(.layout-minimal) .hc-arow,
#hc-page:not(.layout-minimal) .hc-side-card,
#hc-page:not(.layout-minimal) .hc-art-card,
#hc-page:not(.layout-minimal) .hc-pop-item,
#hc-page:not(.layout-minimal) .hc-help-card{
  background:var(--card-fill)!important;
}
#hc-page .hc-arow:hover,
#hc-page .hc-side-card:hover,
#hc-page .hc-art-card:hover,
#hc-page .hc-pop-item:hover{
  box-shadow:var(--card-shadow-hover)!important;
}

/* THE CATEGORY TILES ARE DELIBERATELY DIFFERENT SHAPES.
   card | badge | minimal | glow | list | bare | plain | detail are eight
   STRUCTURES, not eight paint jobs — that is the entire point of the category
   style dropdown. A blanket geometry rule would flatten all eight into one
   shape and quietly delete the feature.

   So the tiles take the global PAINT and keep their OWN geometry. This is the
   per-surface override working as designed: global paint, local structure.
   minimal / bare / plain are omitted on purpose — those three are the
   "no card" presentations and must stay unpainted. */
#hc-page:not(.layout-minimal) .hc-cats-card .hc-home-cat,
#hc-page:not(.layout-minimal) .hc-cats-badge .hc-home-cat,
#hc-page:not(.layout-minimal) .hc-cats-detail .hc-home-cat,
#hc-page:not(.layout-minimal) .hc-cats-list .hc-home-cat,
#hc-page:not(.layout-minimal) .hc-cats-glow .hc-home-cat,
#hc-page:not(.layout-minimal) .hc-cats-tint-theme .hc-home-cat{
  background:var(--card-fill)!important;
  border-color:var(--card-edge)!important;
  border-width:var(--card-border-w)!important;
  border-style:solid!important;
  box-shadow:var(--card-shadow)!important;
}
#hc-page .hc-cats-card .hc-home-cat:hover,
#hc-page .hc-cats-badge .hc-home-cat:hover,
#hc-page .hc-cats-detail .hc-home-cat:hover,
#hc-page .hc-cats-list .hc-home-cat:hover,
#hc-page .hc-cats-glow .hc-home-cat:hover,
#hc-page .hc-cats-tint-theme .hc-home-cat:hover{
  box-shadow:var(--card-shadow-hover)!important;
}

/* the media card layout zeroes its own padding and re-applies it inside; keep
   that working by letting its inner body carry the density instead */
#hc-page .hc-cards-media .hc-arow{padding:0!important}
#hc-page .hc-cards-media .hc-arow-body{padding:var(--card-pad-y) var(--card-pad-x)!important}

/* ══ end global card styling ═══════════════════════════════════════════ */


/* ══ PAGE HEADER BAND (sub hero) ══════════════════════════════════════════════
   PHASE1_2026-08-06. Built on the Portal's proven pattern, not on the hero
   renderer — see hc_render_subpage_hero() for why that was tried and abandoned.

   THE CONTRACT, and the whole reason the band looks consistent:
     GEOMETRY lives here, in shared tokens. Every theme gets the same height, the
     same gutter, the same row. A skin may set PAINT ONLY. The moment a skin sets
     min-height or padding, twenty bands start differing again — which is exactly
     what this replaced.

   The row is title-left / search-right, vertically centred, and the search is the
   SAME markup the full hero renders. */
.hcsh{--hcsh-min:132px;--hcsh-pad:26px;--hcsh-on:#fff;--hcsh-fill:var(--card-bg);
  position:relative;overflow:hidden;isolation:isolate;
  min-height:var(--hcsh-min);margin:0 0 clamp(18px,3vw,30px);
  background:var(--hcsh-fill);color:var(--hcsh-on)}
/* Height presets. The vocabulary is compact|standard|tall because that is what live
   settings blobs already store — matching it means no migration. */
.hcsh-h-compact {--hcsh-min:104px;--hcsh-pad:18px}
.hcsh-h-standard{--hcsh-min:132px;--hcsh-pad:26px}
.hcsh-h-tall    {--hcsh-min:196px;--hcsh-pad:40px}
/* ALIGNMENT. `center` stacks the copy and centres the search under it, because a
   centred title beside a right-hand search reads as neither one thing nor the other. */
.hcsh-a-center .hcsh-row{flex-direction:column;align-items:center;text-align:center}
.hcsh-a-center .hcsh-copy{flex:0 1 auto;text-align:center}
.hcsh-a-center .hcsh-head{justify-content:center}
.hcsh-a-center .hcsh-search{flex:0 1 auto;width:min(100%,560px)}
.hcsh-a-center .hcsh-crumb{justify-content:center}
/* WIDTH. `contained` pulls the band in to the page shell and rounds it, so it reads
   as a card rather than a full-bleed strip. */
.hcsh-w-contained{max-width:1160px;margin-left:auto;margin-right:auto;border-radius:18px;overflow:hidden}
.hcsh-w-contained .hcsh-in{padding-left:clamp(18px,2.4vw,30px);padding-right:clamp(18px,2.4vw,30px)}
/* Breadcrumb position within the band. */
.hcsh-crumb-above{order:-1;margin:0 0 10px}
.hcsh-crumb-below{margin:10px 0 0}
.hcsh-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  opacity:.72;margin:0 0 6px;color:var(--hcsh-on)}
.hcsh-in{position:relative;z-index:2;max-width:var(--hc-shell,1180px);margin:0 auto;
  padding:var(--hcsh-pad) 24px;min-height:var(--hcsh-min);display:flex;align-items:center}
/* ONE row: copy grows, search holds its width, both centred on the same axis. */
.hcsh-row{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(16px,3vw,36px);flex-wrap:wrap;width:100%}
.hcsh-copy{min-width:0;flex:1 1 340px;text-align:left;display:flex;flex-direction:column}
.hcsh-search{flex:0 1 580px;min-width:min(100%,260px)}
.hcsh-head{display:flex;align-items:center;gap:14px;min-width:0}
.hcsh-icon{display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:46px;height:46px;border-radius:13px;font-size:22px;
  background:color-mix(in srgb,currentColor 12%,transparent)}
.hcsh-icon img,.hcsh-icon svg{width:26px;height:26px;object-fit:contain}
.hcsh-title{margin:0;font-size:clamp(24px,3vw,38px);line-height:1.12;font-weight:800;
  color:var(--hcsh-on);overflow-wrap:anywhere}
.hcsh-sub{margin:6px 0 0;font-size:14px;line-height:1.5;max-width:62ch;
  color:var(--hcsh-on);opacity:.86}
.hcsh-sub:empty{display:none}
.hcsh-crumb{margin:10px 0 0;font-size:12.5px;color:var(--hcsh-on);opacity:.8}
.hcsh-crumb a{color:inherit;text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,currentColor 40%,transparent)}
.hcsh-crumb a:hover{border-bottom-color:currentColor}
/* THE HERO'S OWN TEXTURE — the diagonal sheen and the 44px grid.
   These are copied verbatim from `.hc-hero:before` / `.hc-hero:after` (help.php
   ~7297) rather than invented, for the same reason the fills are: an earlier build
   drew three decorative arcs here, which no hero has. The band must carry the same
   surface treatment as the hero above it, grid included.
   Drawn on the band's own pseudo-elements, so the markup stays clean. */
.hcsh:before,.hcsh:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none}
.hcsh:before{background:linear-gradient(120deg,rgba(255,255,255,.14),transparent 34%,rgba(255,255,255,.08) 70%,transparent)}
.hcsh:after{background-image:linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);background-size:44px 44px;opacity:var(--hcsh-tex-o,.44)}
/* On a light field white lines are invisible, so the grid is drawn in the theme's
   own ink instead — same pattern, legible surface. */
.hcsh-onlight:before{background:linear-gradient(120deg,rgba(15,23,42,.05),transparent 34%,rgba(15,23,42,.03) 70%,transparent)}
.hcsh-onlight:after{background-image:linear-gradient(rgba(15,23,42,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.055) 1px,transparent 1px)}
/* The decorative <i> arcs an earlier build emitted are no longer painted. */
.hcsh-tex{display:none}

/* TONE — decided in PHP ($lightSkins), so search legibility is ONE pair of rules
   rather than twenty patches. */
.hcsh-ondark {--hcsh-on:#fff;--hcsh-field:color-mix(in srgb,#fff 16%,transparent);
  --hcsh-field-ink:#fff;--hcsh-field-bd:color-mix(in srgb,#fff 30%,transparent)}
.hcsh-onlight{--hcsh-on:var(--text-primary,#0f172a);--hcsh-field:#fff;
  --hcsh-field-ink:var(--text-primary,#0f172a);--hcsh-field-bd:var(--card-border,#e2e8f0)}
.hcsh-onlight .hcsh-tex i{border-color:color-mix(in srgb,var(--brand) 16%,transparent)}

/* THE THEME'S OWN SEARCH, UNTOUCHED.
   hc_search_markup($layout) is what the full hero calls, so each theme renders its
   own field — minimal's underline, obsidian's terminal prompt, prism's chip, and so
   on. An earlier build passed 'band', which fell through to the generic glass
   default and gave every theme the same search: exactly the thing this band exists
   to avoid. Nothing here repaints it; only the wrapper is sized. */
.hcsh-search .hc-srch-wrap{margin:0;max-width:none;width:100%}
/* These two are part of the SEARCH markup this band deliberately reuses, not hero
   internals: hc_search_markup() emits the invisible width-sizer and the counters
   inside its own wrapper, and neither belongs in a page header. Scoped to
   .hcsh-search so it can never reach the landing hero. */
.hcsh-search .hc-hero-sizer,.hcsh-search .hc-hero-stats{display:none!important}

@media(max-width:820px){
  .hcsh-row{flex-direction:column;align-items:stretch;gap:14px}
/* THE BASIS FLIPS AXIS WITH THE DIRECTION.
   .hcsh-copy carries `flex:1 1 340px` so the title block gets a sensible WIDTH
   basis beside the search in row mode. The moment this media query turns the row
   into a column, flex-basis applies to the MAIN axis — which is now HEIGHT — so
   the copy block claimed a 340px tall basis and the band grew to 486px in the
   420px widget panel: title at the top, search pinned at the bottom, a wall of
   empty colour between them.
   Measured in a real 470px viewport: row 424px tall, .hcsh-copy 340px of it.
   The basis has no meaning on the cross axis here, so it is reset with the
   direction it belonged to. */
.hcsh-copy{flex:0 1 auto}
  .hcsh-search{flex:1 1 auto}
  .hcsh-in{padding:20px 16px}
  .hcsh{--hcsh-min:0}
  .hcsh-icon{width:38px;height:38px;font-size:18px}
}
#hc-page.hc-widget .hcsh-in{padding:14px 12px;min-height:0}
#hc-page.hc-widget .hcsh{--hcsh-min:0}

/* ── SKINS: PAINT ONLY, and GENERATED FROM EACH HERO'S OWN BACKGROUND.
      An earlier build invented these by eye and got six of twenty wrong — stack,
      gallery, horizon and editorial have DEEP heroes and were given near-white
      bands; aurora and zenith are the reverse. The live site showed a white band
      under a deep navy hero because of it.
      Each fill below is the exact `background` declaration that layout's
      .hc-hero resolves to, so the band cannot disagree with the hero it belongs
      to. No geometry here — height and gutter are shared, above. ── */
.hcsk-nebula    {--hcsh-fill:radial-gradient(circle at 78% 28%,rgba(56,189,248,.36),transparent 24%),radial-gradient(circle at 18% 18%,rgba(var(--br),.48),transparent 24%),linear-gradient(135deg,#030712,#10243a 58%,#312e81)}
.hcsk-aurora    {--hcsh-fill:linear-gradient(135deg,#f8fffb 0%,#e8fbff 42%,#fff4fb 100%)}
.hcsk-minimal   {--hcsh-fill:#fbfbf8}
.hcsk-obsidian  {--hcsh-fill:linear-gradient(180deg,#090a0f 0%,#11131b 58%,#07080b 100%)}
.hcsk-prism     {--hcsh-fill:conic-gradient(from 130deg at 50% 50%,#ec4899,#8b5cf6,#06b6d4,#f59e0b,#ec4899)}
.hcsk-classic   {--hcsh-fill:linear-gradient(180deg,#ffffff,#edf2f7)}
.hcsk-atlas     {--hcsh-fill:radial-gradient(circle at 28% 34%,rgba(45,212,191,.25),transparent 20%),linear-gradient(135deg,#0f172a,#115e59)}
.hcsk-editorial {--hcsh-fill:linear-gradient(135deg,#1c1917,#7c2d12)}
.hcsk-command   {--hcsh-fill:linear-gradient(135deg,#020617,#082f49)}
.hcsk-horizon   {--hcsh-fill:linear-gradient(90deg,#0f172a,#164e63 48%,#4f46e5)}
.hcsk-vault     {--hcsh-fill:radial-gradient(circle at 25% 30%,rgba(251,191,36,.22),transparent 24%),linear-gradient(135deg,#111827,#292524)}
.hcsk-orbit     {--hcsh-fill:radial-gradient(circle at center,rgba(129,140,248,.55),transparent 20%),radial-gradient(circle at 20% 70%,rgba(34,211,238,.28),transparent 18%),linear-gradient(135deg,#020617,#312e81)}
.hcsk-mosaic    {--hcsh-fill:#111827}
.hcsk-zenith    {--hcsh-fill:linear-gradient(180deg,#e0f2fe,#ffffff)}
.hcsk-runway    {--hcsh-fill:linear-gradient(135deg,#0f172a,#475569)}
.hcsk-ledger    {--hcsh-fill:repeating-linear-gradient(180deg,#fff 0 34px,#f1f5f9 35px),linear-gradient(135deg,#fff,#e2e8f0)}
.hcsk-sonar     {--hcsh-fill:radial-gradient(circle at 34% 50%,rgba(94,234,212,.18) 0 2px,transparent 3px 100%),radial-gradient(circle at 34% 50%,transparent 0 80px,rgba(94,234,212,.08) 81px 82px,transparent 83px 150px,rgba(94,234,212,.08) 151px 152px,transparent 153px),linear-gradient(135deg,#042f2e,#052e2b)}
.hcsk-gallery   {--hcsh-fill:linear-gradient(135deg,#111827,#3f3f46)}
.hcsk-stack     {--hcsh-fill:linear-gradient(135deg,#172554,#1e3a8a)}
.hcsk-sanctuary {--hcsh-fill:radial-gradient(circle at 20% 30%,rgba(187,247,208,.42),transparent 28%),linear-gradient(180deg,#f7f4ee,#d9f1e9)}
/* ══ end page header band ══════════════════════════════════════════════════ */

/* PHASE2_2026-08-06 — the "Still need help?" sidebar card.
   SIX variants, and every one of them is a CARD. An earlier pass shipped a
   "minimal" that was a bare underlined link with no surface at all; the owner's
   note was that they should all be cards and all be stylish. So the differences
   here are in MATERIAL — fill, edge, elevation, accent — never in whether there
   is a card. Colour is theme tokens throughout, so it follows the Colour Studio. */
.hc-help-card{position:relative;margin-top:18px;padding:18px;overflow:hidden;
  border-radius:var(--card-radius,16px);border:1px solid var(--card-border);
  background:var(--card-bg);box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.hc-help-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md,0 10px 30px rgba(2,6,23,.09))}
.hc-help-card-ico{display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:12px;margin-bottom:12px;
  background:rgba(var(--br),.12);color:var(--brand-ink,var(--brand))}
.hc-help-card-ico svg{width:19px;height:19px}
.hc-help-card-title{font-size:15.5px;font-weight:800;letter-spacing:-.01em;
  color:var(--text-primary);margin:0 0 6px;line-height:1.25}
.hc-help-card-text{font-size:13.5px;line-height:1.55;color:var(--text-secondary);margin:0 0 14px}
.hc-help-card-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;padding:10px 16px;border-radius:999px;font-size:13.5px;font-weight:700;
  text-decoration:none;background:var(--brand);color:#fff;border:1px solid transparent;
  transition:gap .18s var(--ease),filter .18s var(--ease)}
.hc-help-card-btn svg{width:15px;height:15px;flex:none}
.hc-help-card-btn:hover{gap:12px;filter:brightness(1.07)}

/* soft — a tinted field. The default: reads as help, not as another article card. */
.hc-help-card-soft{background:linear-gradient(160deg,rgba(var(--br),.13),rgba(var(--br),.04));
  border-color:rgba(var(--br),.22)}

/* bordered — crisp outline with a brand rule across the top. Quietest fill, clear edge. */
.hc-help-card-bordered{background:var(--card-bg);border-width:1.5px;box-shadow:none}
.hc-help-card-bordered:before{content:'';position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--brand),rgba(var(--br),.25))}
.hc-help-card-bordered{padding-top:21px}

/* brand — the full brand field, for when it should lead the rail. */
.hc-help-card-brand{background:linear-gradient(150deg,var(--brand),color-mix(in srgb,var(--brand) 62%,#0b1220));
  border-color:transparent;color:#fff}
.hc-help-card-brand .hc-help-card-title{color:#fff}
.hc-help-card-brand .hc-help-card-text{color:#fff;opacity:.88}
.hc-help-card-brand .hc-help-card-ico{background:rgba(255,255,255,.18);color:#fff}
.hc-help-card-brand .hc-help-card-btn{background:#fff;color:var(--brand-ink,var(--brand))}

/* accent — a brand bar down the leading edge, otherwise a clean surface. */
.hc-help-card-accent{background:var(--card-bg);padding-left:22px}
.hc-help-card-accent:before{content:'';position:absolute;inset:0 auto 0 0;width:4px;
  background:linear-gradient(180deg,var(--brand),rgba(var(--br),.3))}

/* glass — frosted panel over whatever sits behind it. */
.hc-help-card-glass{background:color-mix(in srgb,var(--card-bg) 62%,transparent);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-color:color-mix(in srgb,var(--text-primary) 12%,transparent)}

/* elevated — plain surface, real lift. The most neutral of the six. */
.hc-help-card-elevated{background:var(--card-bg);border-color:transparent;
  box-shadow:0 12px 34px rgba(2,6,23,.12),0 2px 6px rgba(2,6,23,.06)}
.hc-help-card-elevated:hover{box-shadow:0 18px 44px rgba(2,6,23,.15),0 3px 8px rgba(2,6,23,.07)}

/* Dark theme: the tinted and outlined variants need a surface that is not white. */
html[data-theme="dark"] #hc-page .hc-help-card-bordered,
html[data-theme="dark"] #hc-page .hc-help-card-accent,
html[data-theme="dark"] #hc-page .hc-help-card-elevated{background:var(--card-bg)}
@media(max-width:920px){.hc-help-card{margin-top:14px}}

/* PHASE1_2026-08-06 — SEARCH-ONLY band. The third header mode: no hero, no page
   title, just the search field on a hairline-separated strip, which is the shape
   the reference help centers use above breadcrumbs. Reuses the hero's own search
   markup, so it inherits every theme's field styling for free and only the chrome
   around it is defined here. Deliberately quiet: it must not compete with the page
   heading that follows it. */
/* SEARCH-ONLY MODE. Modelled on the reference help centers the owner supplied:
   a quiet full-width strip with hairline rules, holding ONE centred, CONTAINED
   search pill — then the breadcrumb in its own strip beneath it.
   Owner's corrections, each one addressed below:
     "the search bar doesnt have to carry the colour, it need to be white but
      take the same button"   -> field forced white, button left alone
     "the search bar too long and extend to the side bar"
                              -> capped and centred, never full-bleed
     "the bread crumbs need to leave where it is to edge"
                              -> its own strip, aligned to the page shell */
/* No rules top or bottom: the owner wants the strip to read as open space, not a
   boxed band, even though the reference help centers draw them. */
.hc-searchband{background:transparent;margin:0}
/* max-width and horizontal padding MIRROR .hc-main (1160/28) so the field sits on the
   same column edges as the content beneath it. Change one, change both. */
.hc-searchband-inner{max-width:1160px;margin:0 auto;padding:clamp(14px,2.2vw,22px) 28px}
/* CONTAINED. Without this the theme's own hero width lets the field run under the
   sidebar, which is what the owner photographed. */
/* CENTRED OVER THE CONTENT COLUMN, NOT THE PAGE. Owner: "center the space
   excluding the side bar". The band is full-width, so its inner uses the SAME grid
   as .hc-page-shell and drops the field into the content track — then it lines up
   with the articles beneath it instead of being pushed off-centre by the rail.
   The rail track collapses on narrow screens, where the grid falls back to one
   column and the field simply centres on the page. */
.hc-searchband-inner{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(240px,300px);gap:24px;align-items:center;justify-content:initial}
/* rail on the LEFT: the content track is the second one, so the field goes there */
.hc-searchband-inner.hcsb-rail-left{grid-template-columns:clamp(260px,22vw,340px) minmax(0,1fr)}
.hcsb-rail-left .hc-srch-wrap{grid-column:2}
/* rail on the RIGHT: content is the first track */
.hcsb-rail-right .hc-srch-wrap{grid-column:1}
/* no rail on this view: one track, field centred on the page */
.hc-searchband-inner.hcsb-no-rail{grid-template-columns:minmax(0,1fr)}
.hcsb-no-rail .hc-srch-wrap{grid-column:1}
#hc-page .hc-searchband .hc-srch-wrap,
#hc-page .hc-searchband .hc-search-shell{margin:0 auto!important;max-width:min(100%,680px)!important;width:100%!important}
@media(max-width:920px){
  .hc-searchband-inner,.hc-searchband-inner.hcsb-rail-left{grid-template-columns:minmax(0,1fr)!important}
  .hcsb-rail-left .hc-srch-wrap,.hcsb-rail-right .hc-srch-wrap{grid-column:1}
}
.hc-searchband .hc-srch-wrap .hc-search-form{width:100%}
/* WHITE FIELD, THEME BUTTON. The band is a neutral strip, so the field must read
   as neutral too — but the submit keeps whatever that theme ships, untouched. */
.hc-searchband .hc-search-form{background:#fff!important;border:1px solid var(--card-border,#e2e8f0)!important;box-shadow:none!important}
.hc-searchband .hc-search-form input{background:transparent!important;color:var(--text-primary,#0f172a)!important}
.hc-searchband .hc-search-form input::placeholder{color:var(--text-muted,#94a3b8)!important;opacity:1}
.hc-searchband .hc-srch-ico{color:var(--text-muted,#94a3b8)}
.hc-searchband .hc-hero-sizer,.hc-searchband .hc-hero-stats{display:none!important}


/* The suggest panel anchors to the field, so it must escape the band's own box. */
.hc-searchband{overflow:visible;position:relative;z-index:5}
@media(max-width:760px){.hc-searchband-inner{padding:14px 20px}.hc-searchband{margin-bottom:16px}}
/* In the 420px widget panel the band would eat the whole viewport — keep it tight. */
#hc-page.hc-widget .hc-searchband-inner{padding:10px 12px}
#hc-page.hc-widget .hc-searchband{margin-bottom:12px}

/* Article small-hero palette mapped to each layout hero language */
#hc-page:is(.view-article,.view-category) .hc-subhero{margin-top:0}
#hc-page.layout-nebula:is(.view-article,.view-category) .hc-subhero{background:linear-gradient(135deg,rgba(6,17,31,.96),rgba(24,55,95,.88));border-color:rgba(125,211,252,.24)}
#hc-page.layout-nebula:is(.view-article,.view-category) .hc-subhero-title,#hc-page.layout-nebula:is(.view-article,.view-category) .hc-subhero-kicker,#hc-page.layout-nebula:is(.view-article,.view-category) .hc-subhero-meta,#hc-page.layout-nebula:is(.view-article,.view-category) .hc-subhero-crumb,#hc-page.layout-nebula:is(.view-article,.view-category) .hc-subhero-crumb a{color:#e2e8f0}
#hc-page.layout-aurora:is(.view-article,.view-category) .hc-subhero{background:linear-gradient(135deg,#f8fffb,#e8fbff 42%,#fff4fb);border-color:rgba(36,107,128,.18)}
#hc-page.layout-minimal:is(.view-article,.view-category) .hc-subhero{background:#fbfbf8;border-color:#e7e3da;border-radius:10px;box-shadow:none}
#hc-page.layout-obsidian:is(.view-article,.view-category) .hc-subhero{background:linear-gradient(180deg,#090a0f,#11131b);border-color:#2b3240;border-radius:8px}
#hc-page.layout-obsidian:is(.view-article,.view-category) .hc-subhero-title,#hc-page.layout-obsidian:is(.view-article,.view-category) .hc-subhero-kicker,#hc-page.layout-obsidian:is(.view-article,.view-category) .hc-subhero-meta,#hc-page.layout-obsidian:is(.view-article,.view-category) .hc-subhero-crumb,#hc-page.layout-obsidian:is(.view-article,.view-category) .hc-subhero-crumb a{color:#e2e8f0}
#hc-page.layout-prism:is(.view-article,.view-category) .hc-subhero{background:linear-gradient(135deg,color-mix(in srgb,var(--brand) 80%,#ec4899),#06b6d4 54%,#111827);border-color:rgba(255,255,255,.22)}
#hc-page.layout-prism:is(.view-article,.view-category) .hc-subhero-title,#hc-page.layout-prism:is(.view-article,.view-category) .hc-subhero-kicker,#hc-page.layout-prism:is(.view-article,.view-category) .hc-subhero-meta,#hc-page.layout-prism:is(.view-article,.view-category) .hc-subhero-crumb,#hc-page.layout-prism:is(.view-article,.view-category) .hc-subhero-crumb a{color:#eef2ff}
#hc-page.layout-classic:is(.view-article,.view-category) .hc-subhero{background:linear-gradient(180deg,#fff,#eef4ff);border-color:#d7e1ee}
#hc-page.layout-atlas:is(.view-article,.view-category) .hc-subhero{background:linear-gradient(135deg,#10243a,#0f766e);border-color:rgba(255,255,255,.18)}
#hc-page.layout-atlas:is(.view-article,.view-category) .hc-subhero-title,#hc-page.layout-atlas:is(.view-article,.view-category) .hc-subhero-kicker,#hc-page.layout-atlas:is(.view-article,.view-category) .hc-subhero-meta,#hc-page.layout-atlas:is(.view-article,.view-category) .hc-subhero-crumb,#hc-page.layout-atlas:is(.view-article,.view-category) .hc-subhero-crumb a{color:#e6f8f5}
#hc-page.layout-editorial:is(.view-article,.view-category) .hc-subhero{background:linear-gradient(135deg,#1e293b,#7c2d12);border-color:rgba(255,255,255,.2)}
#hc-page.layout-editorial:is(.view-article,.view-category) .hc-subhero-title,#hc-page.layout-editorial:is(.view-article,.view-category) .hc-subhero-kicker,#hc-page.layout-editorial:is(.view-article,.view-category) .hc-subhero-meta,#hc-page.layout-editorial:is(.view-article,.view-category) .hc-subhero-crumb,#hc-page.layout-editorial:is(.view-article,.view-category) .hc-subhero-crumb a{color:#f8fafc}
#hc-page.layout-command:is(.view-article,.view-category) .hc-subhero{background:linear-gradient(135deg,#020617,#0f172a 55%,#082f49);border-color:rgba(125,211,252,.22)}
#hc-page.layout-command:is(.view-article,.view-category) .hc-subhero-title,#hc-page.layout-command:is(.view-article,.view-category) .hc-subhero-kicker,#hc-page.layout-command:is(.view-article,.view-category) .hc-subhero-meta,#hc-page.layout-command:is(.view-article,.view-category) .hc-subhero-crumb,#hc-page.layout-command:is(.view-article,.view-category) .hc-subhero-crumb a{color:#e0ecff}
#hc-page.layout-horizon:is(.view-article,.view-category) .hc-subhero{background:rgba(255,255,255,.64);border-color:rgba(255,255,255,.72)}
#hc-page.layout-vault:is(.view-article,.view-category) .hc-subhero{background:linear-gradient(145deg,#fffaf0,#f7efe0);border-color:rgba(161,98,7,.22)}
#hc-page.layout-orbit:is(.view-article,.view-category) .hc-subhero{background:rgba(255,255,255,.70);border-color:rgba(20,83,45,.14)}
#hc-page.layout-mosaic:is(.view-article,.view-category) .hc-subhero{background:#fff;border-color:#111827;border-radius:0;box-shadow:8px 8px 0 rgba(17,24,39,.12)}
#hc-page.layout-zenith:is(.view-article,.view-category) .hc-subhero{background:linear-gradient(180deg,#fff,#e0f2fe);border-color:#bae6fd}
#hc-page.layout-runway:is(.view-article,.view-category) .hc-subhero{background:#fff;border-color:#facc15}
#hc-page.layout-ledger:is(.view-article,.view-category) .hc-subhero{background:#fff;border-color:#cbd5e1;border-radius:8px;box-shadow:none}
#hc-page.layout-sonar:is(.view-article,.view-category) .hc-subhero{background:rgba(6,78,59,.72);border-color:rgba(94,234,212,.22)}
#hc-page.layout-sonar:is(.view-article,.view-category) .hc-subhero-title,#hc-page.layout-sonar:is(.view-article,.view-category) .hc-subhero-kicker,#hc-page.layout-sonar:is(.view-article,.view-category) .hc-subhero-meta,#hc-page.layout-sonar:is(.view-article,.view-category) .hc-subhero-crumb,#hc-page.layout-sonar:is(.view-article,.view-category) .hc-subhero-crumb a{color:#d1fae5}
#hc-page.layout-gallery:is(.view-article,.view-category) .hc-subhero{background:#fff;border-color:#fff;box-shadow:0 24px 70px rgba(17,24,39,.14)}
#hc-page.layout-stack:is(.view-article,.view-category) .hc-subhero{background:#fff;border-color:#dbeafe;box-shadow:0 8px 0 #dbeafe}
#hc-page.layout-sanctuary:is(.view-article,.view-category) .hc-subhero{background:rgba(255,255,255,.70);border-color:rgba(20,83,45,.14)}


/* ── Section label ──────────────────────────────────────────────────────────── */
.hc-sec{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.hc-sec-label{font-size:11.5px;font-weight:800;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
.hc-sec-line{flex:1;height:1px;background:var(--card-border)}

/* ── News and updates ────────────────────────────────────────────────────────
   The unified section design: one calm card, a real heading, rows in columns,
   each row a bold underlined title over a quiet date . category line, hairlines
   between, one "See all" at the bottom left. Every colour is a page token, so
   the section follows the theme, the brand and dark mode without a value of its
   own — the same rule the category cards above follow. */
/* SECTION RHYTHM. 52px is the tile grid's own bottom margin, which reads fine
   between a grid and a heading but far too tight between two full sections —
   they ran into each other. The sections get their own, larger measure. */
.hc-news-shell{margin:0 0 clamp(56px,7vw,88px)}
.hc-news-card{background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;
  padding:clamp(22px,3vw,38px);box-shadow:var(--shadow-sm)}
.hc-news-title{margin:0 0 22px;font-family:var(--font-heading);font-size:clamp(1.35rem,1.1rem + .8vw,1.85rem);
  font-weight:800;letter-spacing:-.02em;color:var(--text-primary)}
.hc-news-list{display:grid;gap:0 clamp(28px,4vw,56px)}
.hc-news-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hc-news-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.hc-news-item{padding:14px 0 16px;border-bottom:1px solid var(--card-border);min-width:0}
/* The last row of EACH column loses its rule, not just the last row overall —
   otherwise a two-column list ends with one stray hairline under one side. */
.hc-news-cols-1 .hc-news-item:last-child,
.hc-news-cols-2 .hc-news-item:nth-last-child(-n+1),
.hc-news-cols-2 .hc-news-item:nth-last-child(2):nth-child(odd),
.hc-news-cols-3 .hc-news-item:nth-last-child(-n+1){border-bottom:0}
.hc-news-link{display:inline-block;font-size:15.5px;font-weight:700;line-height:1.4;
  color:var(--text-primary);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--card-border);
  transition:color .16s var(--ease),text-decoration-color .16s var(--ease)}
.hc-news-link:hover{color:var(--brand-ink,var(--brand));text-decoration-color:var(--brand)}
/* The card lifts like every other card on the page, and a row tints as the
   pointer crosses it so a long two-column list stays trackable. */
.hc-news-card{transition:box-shadow .22s var(--ease),transform .22s var(--ease)}
.hc-news-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.hc-news-item{border-radius:10px;transition:background-color .16s var(--ease)}
.hc-news-item:hover{background:var(--brand-5)}
@media(prefers-reduced-motion:reduce){.hc-news-card{transition:none}.hc-news-card:hover{transform:none}}
.hc-news-meta{margin-top:7px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font-size:12.5px;color:var(--text-muted)}
/* The separator is drawn, never typed — a literal dot in the markup doubles up
   the moment one of the two parts is switched off. */
.hc-news-meta span + span::before{content:"\00B7";margin-inline-end:8px;color:var(--text-muted)}
.hc-news-all{display:inline-flex;align-items:center;gap:6px;margin-top:20px;
  font-size:14px;font-weight:700;color:var(--brand-ink,var(--brand));text-decoration:none}
.hc-news-all:hover{text-decoration:underline}
@media(max-width:760px){.hc-news-cols-2,.hc-news-cols-3{grid-template-columns:1fr}
  .hc-news-item{border-bottom:1px solid var(--card-border)}
  .hc-news-list .hc-news-item:last-child{border-bottom:0}}

/* ── Quick links ─────────────────────────────────────────────────────────────
   Two designs off one setting. `tiles` is the shortcut grid; `tabs` is the panel,
   where the items become a column of tabs and the panel lists the chosen topic's
   articles. The tabs are native radio inputs, so switching needs no JavaScript
   and the keyboard works by construction. */
.hc-quick-shell{margin:0 0 clamp(56px,7vw,88px)}
/* PHASE_HC_AUTOFIT_2026-08-15 — auto-FIT, not auto-fill. `auto-fill` keeps the empty
   tracks it created: three links in a 1360px column produce about five tracks, the
   items take the first three and shrink, and two empty columns sit on the right. That
   is the owner's "quick links don't appear full" exactly. `auto-fit` collapses the
   empty tracks so the items share the row. One word. */
.hc-quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.hc-quick-tile{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:16px;
  background:var(--brand-5);border:1px solid var(--brand-15);color:inherit;text-decoration:none;
  border-inline-start:3px solid var(--brand);
  transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease)}