/*! Honor Society brand 0.6.4 | brand.css: tokens + base + all components | https://brand.honorsociety.org */
/* Fonts are not bundled. Each platform hosts Mukta (OFL) and Didot (licensed) itself. */

/* ---- tokens/tokens.css ---- */
/*
 * HonorSociety.org design tokens. One prefix: --hs-.
 * Source of truth for hs_theme, Laravel, Shopify and Zendesk Guide.
 * tokens.json holds the same values. Change both together.
 * #162351 is not a brand colour. Never use it.
 */

:root {
  /* Color: blue scale. 700 and 600 are navy mixed with 25% and 50% of blue-500. */
  --hs-blue-900: #172456;
  --hs-blue-800: #1f2f6e;
  --hs-blue-700: #1d3a92;
  --hs-blue-600: #1b46b6;
  --hs-blue-500: #175cff;

  /* Color: brand roles. Blue is for icons, illustration and status bars only, never text. */
  --hs-navy: var(--hs-blue-800);
  --hs-navy-deep: var(--hs-blue-900);
  --hs-blue: var(--hs-blue-500);

  /* Color: action gold = buttons, link underlines, focus, heading rule. */
  --hs-action-gold: #faf053;
  --hs-action-gold-hover: #f2e63a;

  /* Color: honor gold = recognition (plates, credential cards, rules under member names). */
  --hs-honor-gold: #c9a227;
  --hs-gold-ink: #8a5a00;

  /* Color: text and lines on light grounds. */
  --hs-ink: #2b3142;
  --hs-slate: #596172;
  --hs-slate-500: #7e858e;
  --hs-slate-400: #949fb7;
  --hs-line: #e6e8ef;
  --hs-line-strong: #d9dde7;

  /* Color: grounds. */
  --hs-white: #ffffff;
  --hs-soft: #f7f8fb;
  --hs-plate: #faf3e9;
  --hs-plate-line: #eadfc8;
  --hs-plate-muted: #5d6478;
  --hs-footer: #222222;

  /* Color: text, lines and surfaces on navy. */
  --hs-on-navy: rgba(255, 255, 255, 0.86);
  --hs-on-navy-line: rgba(255, 255, 255, 0.24);
  --hs-on-navy-surface: rgba(255, 255, 255, 0.08);

  /* Ground: navy treatment B. Deep navy to navy to a touch of blue, light from the lower right.
     Paint it as background-image over background-color var(--hs-navy), so flat navy is the fallback.
     Body text on it: 6.4:1 at the lightest corner. */
  --hs-ground-navy: linear-gradient(135deg, var(--hs-blue-900) 0%, var(--hs-blue-800) 45%, var(--hs-blue-700) 78%, var(--hs-blue-600) 100%);

  /* Color: status. */
  --hs-success: #0f7a41;
  --hs-success-surface: #e9f5ee;
  --hs-danger: #c0392b;
  --hs-danger-surface: #fdecec;
  --hs-warning: #8a6d1a;
  --hs-warning-surface: #fdf7d6;
  --hs-info-surface: #eaf0ff;

  /* Color: tiers. Free uses --hs-slate. */
  --hs-tier-bronze: #8b5a2b;
  --hs-tier-silver: #c0c0c0;
  --hs-tier-gold: #ffd700;
  --hs-tier-signature: #1c2841;

  /* Type: families. Didot LT Std is always weight 700. */
  --hs-font-display: "Didot LT Std", "Hoefler Text", Garamond, "Times New Roman", serif;
  --hs-font-body: "Mukta", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --hs-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* codes a member copies */

  /* Type: sizes. */
  --hs-text-xs: 0.75rem;
  --hs-text-eyebrow: 0.8125rem;
  --hs-text-sm: 0.875rem;
  --hs-text-md: 1rem;
  --hs-text-body: 1.0625rem;
  --hs-text-lead: 1.125rem;
  --hs-text-question: 1.25rem; /* FAQ question */
  --hs-text-h3: 1.375rem;
  --hs-text-h2: clamp(1.75rem, 1.6vw + 1.1rem, 2.5rem);
  --hs-text-h1: clamp(2.25rem, 2.2vw + 1.1rem, 3.25rem);

  /* Type: weights, leading, tracking. */
  --hs-weight-regular: 400;
  --hs-weight-medium: 500;
  --hs-weight-semibold: 600;
  --hs-weight-bold: 700;
  --hs-leading-tight: 1.05;
  --hs-leading-snug: 1.25;
  --hs-leading-body: 1.5;
  --hs-leading-prose: 1.7;
  --hs-tracking-eyebrow: 0.12em;

  /* Space: 4px steps up to 64px. */
  --hs-space-1: 4px;
  --hs-space-2: 8px;
  --hs-space-3: 12px;
  --hs-space-4: 16px;
  --hs-space-5: 24px;
  --hs-space-6: 32px;
  --hs-space-7: 48px;
  --hs-space-8: 64px;
  --hs-band-pad: clamp(2.5rem, 5vw, 4rem);
  --hs-card-pad: 1.25rem;
  --hs-card-pad-lg: 1.5rem; /* from 48rem */

  /* Control heights: tap targets. A button is 48px; a small button and a form control are 40px. */
  --hs-button-h: 48px;
  --hs-control-h: 40px;

  /* Radius: no 12px or 30px. */
  --hs-radius-sm: 4px;
  --hs-radius-md: 8px;
  --hs-radius-pill: 999px;
  --hs-radius-round: 50%;

  /* Shadow. A plain panel has none. card: link cards only. gold: the gold button.
     dialog: a dialog, the video play disc, and a panel that floats over two bands
     (the award deadline card, a form card that overlaps two bands). */
  --hs-shadow-card: 0 1px 2px rgba(31, 47, 110, 0.06);
  --hs-shadow-dialog: 0 12px 30px rgba(31, 47, 110, 0.14);
  --hs-shadow-gold: 0 6px 18px rgba(250, 240, 83, 0.28);
  /* Letterpress: text pressed into the plate. A warm shade above, a paper highlight below. */
  --hs-shadow-letterpress: 0 -1px 0 rgba(103, 75, 43, 0.16), 0 1px 0 rgba(255, 255, 255, 0.9);
  --hs-shadow-letterpress-date: 0 -1px 0 rgba(45, 49, 61, 0.25), 0 1px 0 rgba(255, 255, 255, 0.98);

  /* Focus: outline in action gold, plus a navy ring on light grounds. */
  --hs-focus-width: 3px;
  --hs-focus-offset: 3px;
  --hs-focus-color: var(--hs-action-gold);
  --hs-focus-ring: 0 0 0 1px var(--hs-navy);

  /* Heading rule: a bar under a page H1 or a band's H2. */
  --hs-rule-width: 56px;
  --hs-rule-height: 4px;
  --hs-rule-radius: 2px;
  --hs-rule-gap: clamp(0.7rem, 1.5vw, 1.05rem);

  /* Motion: colour, border, shadow and transform only. */
  --hs-duration: 200ms;
  --hs-ease: ease;
  --hs-transition: 200ms ease;

  /* Layout. */
  --hs-header-h: 64px;
  --hs-header-h-lg: 72px; /* from 992px */
  --hs-gutter: 12px;
  --hs-container-sm: 540px;
  --hs-container-md: 720px;
  --hs-container-lg: 960px;
  --hs-container-xl: 1140px;
  --hs-container-xxl: 1320px;
  /* Body text fills its container. Only display headings keep a ch cap, set in their own component. */
  --hs-measure: none;
  --hs-measure-lead: none;

  /* Breakpoints (media queries cannot read custom properties):
     sm 36rem (576px), md 48rem (768px), lg 62rem (992px),
     xl 75rem (1200px), xxl 87.5rem (1400px). Mobile-first min-width. */
}

/* ---- components/base.css ---- */
/*
 * Base: box model, body type, focus, prose.
 * Element rules sit in :where(), so they have zero specificity and any hs- class wins.
 * Ground context: a band sets --hs-ctx-* properties; components read them with a light-ground fallback.
 * Round 3 adds: anchor scroll margin, figure and caption, fine print, byline.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-regular);
  line-height: var(--hs-leading-body);
  color: var(--hs-ink);
  background: var(--hs-white);
}

:where(h1, h2, h3, h4) {
  margin: 0;
  font-family: var(--hs-font-display);
  font-weight: var(--hs-weight-bold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-heading, var(--hs-navy));
}

:where(p, ul, ol, blockquote, figure, table) {
  margin: 0;
}

:where(strong, b) {
  font-weight: var(--hs-weight-semibold);
}

:where(img, svg, video) {
  max-inline-size: 100%;
  block-size: auto;
}

:where(a) {
  color: var(--hs-ctx-link, var(--hs-navy));
}

/* One focus style everywhere: gold outline plus a 1px navy ring for light grounds (gold on white is 1.19:1). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--hs-focus-width) solid var(--hs-focus-color);
  outline-offset: var(--hs-focus-offset);
  box-shadow: var(--hs-focus-ring);
}

/* Anchor targets clear the site header (64px, 72px from 62rem) plus 16px. :where() keeps it overridable. */
:where([id]) {
  scroll-margin-top: calc(var(--hs-header-h) + var(--hs-space-4));
}

@media (min-width: 62rem) {
  :where([id]) {
    scroll-margin-top: calc(var(--hs-header-h-lg) + var(--hs-space-4));
  }
}

.hs-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Prose: long-form body copy (articles, editor pages). Text, tables and figures fill the container (--hs-measure: none).
   Optional classed children: .hs-lead as the intro, .hs-quote--pull (quote.css), .hs-fine-print as the closing note. */
.hs-prose {
  font-size: var(--hs-text-body);
  line-height: var(--hs-leading-prose);
  color: var(--hs-ctx-text, var(--hs-ink));
}

.hs-prose > * + * {
  margin-block-start: var(--hs-space-4);
}

.hs-prose > :where(p, ul, ol, blockquote, h2, h3, h4) {
  max-inline-size: var(--hs-measure);
}

.hs-prose :where(h2) {
  font-size: var(--hs-text-h2);
  line-height: var(--hs-leading-snug);
}

.hs-prose :where(h3) {
  font-size: var(--hs-text-h3);
}

.hs-prose > :where(h2) {
  margin-block-start: var(--hs-space-7);
}

.hs-prose > :where(h3) {
  margin-block-start: var(--hs-space-6);
}

.hs-prose > :where(h2, h3) + * {
  margin-block-start: var(--hs-space-3);
}

.hs-prose > :first-child {
  margin-block-start: 0;
}

/* Inline link: gold underline as the brand cue, weight 500 as the second cue (navy vs ink is 1.04:1). */
.hs-prose :where(a) {
  font-weight: var(--hs-weight-medium);
  color: var(--hs-ctx-link, var(--hs-navy));
  text-decoration-line: underline;
  text-decoration-color: var(--hs-action-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--hs-transition);
}

.hs-prose :where(a):hover {
  text-decoration-color: var(--hs-ctx-link-hover, var(--hs-navy));
}

.hs-prose :where(ul, ol) {
  padding-inline-start: 1.25em;
}

.hs-prose :where(li) + :where(li) {
  margin-block-start: var(--hs-space-2);
}

.hs-prose :where(li)::marker {
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-prose :where(blockquote) {
  padding-inline-start: var(--hs-space-5);
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-lead);
  font-style: italic;
  font-weight: var(--hs-weight-regular);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-heading, var(--hs-navy));
  box-shadow: inset 3px 0 0 var(--hs-ctx-line, var(--hs-line-strong));
}

.hs-prose :where(blockquote) :where(footer, cite) {
  display: block;
  margin-block-start: var(--hs-space-2);
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-sm);
  font-style: normal;
  color: var(--hs-ctx-muted, var(--hs-slate));
}

/* Tables: wrap in .hs-table-scroll so a wide table scrolls, never the page. */
.hs-table-scroll {
  max-inline-size: 100%;
  overflow-x: auto;
}

.hs-prose :where(table) {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
  font-variant-numeric: tabular-nums;
}

.hs-prose :where(th, td) {
  padding: var(--hs-space-2) var(--hs-space-3);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--hs-ctx-line, var(--hs-line));
}

.hs-prose :where(th) {
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-prose :where(thead th) {
  border-block-end-color: var(--hs-line-strong);
}

.hs-prose :where(caption) {
  padding-block-end: var(--hs-space-2);
  text-align: start;
  font-size: var(--hs-text-sm);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

/* Figure: an image with an optional caption. Class form for templates; element form inside .hs-prose (filtered_html has no classes).
   Image: full column width, 8px radius. Caption: 14px slate (6.2:1 on white, 5.9:1 on soft), 8px under the image. */
.hs-figure,
.hs-prose :where(figure) {
  margin: 0;
}

.hs-figure__img,
.hs-prose :where(figure) :where(img) {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border-radius: var(--hs-radius-md);
  background-color: var(--hs-soft);
}

.hs-figure__caption,
.hs-prose :where(figcaption) {
  max-inline-size: var(--hs-measure);
  margin-block-start: var(--hs-space-2);
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

/* Fine print: a short note under content (conditions, sources, "as of" lines). Not for legal terms: use .hs-disclosure.
   14px, muted on every ground: slate 6.2:1 on white, white 86% on navy. Links keep a 1px underline in the text colour. */
.hs-fine-print {
  max-inline-size: var(--hs-measure-lead);
  margin: 0;
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

* + .hs-fine-print {
  margin-block-start: var(--hs-space-3);
}

/* Inside prose: an editorial or source note, set off from the body by space and a hairline. */
.hs-prose > .hs-fine-print {
  margin-block-start: var(--hs-space-6);
  padding-block-start: var(--hs-space-4);
  border-block-start: 1px solid var(--hs-ctx-line, var(--hs-line));
}

/* The fine-print link wins over the prose link: no gold underline, no weight 500. */
.hs-prose > .hs-fine-print a {
  font-weight: inherit;
  text-decoration-color: currentColor;
}

.hs-fine-print a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.hs-fine-print a:hover {
  color: var(--hs-ctx-heading, var(--hs-navy));
}

/* Byline: who wrote it and when. 40px avatar, the author name as a link (ink 13.0:1, line-strong underline), the date in slate.
   The avatar takes alt="": the name next to it says who it is. */
.hs-byline {
  display: flex;
  align-items: center;
  gap: var(--hs-space-3);
  margin: 0;
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

.hs-byline__text {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--hs-space-2);
}

.hs-byline__name {
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-ctx-text, var(--hs-ink));
  text-decoration-line: underline;
  text-decoration-color: var(--hs-ctx-line, var(--hs-line-strong));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--hs-transition);
}

.hs-byline__name:hover {
  text-decoration-color: currentColor;
}

/* The dot is drawn by CSS, so a screen reader reads "Taylor Example. April 1, 2026". */
.hs-byline__date::before {
  content: "\00B7" / "";
  margin-inline-end: var(--hs-space-2);
}

@media (prefers-reduced-motion: reduce) {
  .hs-prose :where(a),
  .hs-byline__name {
    transition: none;
  }
}

/* ---- components/band.css ---- */
/*
 * Band: a full-width <section> with one ground and one idea. Container: the Bootstrap-width column.
 * A change of ground is the only separator between bands: no borders, no rules.
 * Each ground sets the --hs-ctx-* properties that headings, eyebrows, links and cards read.
 */

.hs-container {
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: var(--hs-gutter);
}

/* Mirrors Bootstrap .container (576/768/992/1200/1400px), so every edge lines up with the header. */
@media (min-width: 36rem) {
  .hs-container { max-inline-size: calc(var(--hs-container-sm) + 2 * var(--hs-gutter)); }
}

@media (min-width: 48rem) {
  .hs-container { max-inline-size: calc(var(--hs-container-md) + 2 * var(--hs-gutter)); }
}

@media (min-width: 62rem) {
  .hs-container { max-inline-size: calc(var(--hs-container-lg) + 2 * var(--hs-gutter)); }
}

@media (min-width: 75rem) {
  .hs-container { max-inline-size: calc(var(--hs-container-xl) + 2 * var(--hs-gutter)); }
}

@media (min-width: 87.5rem) {
  .hs-container { max-inline-size: calc(var(--hs-container-xxl) + 2 * var(--hs-gutter)); }
}

.hs-band {
  padding-block: var(--hs-band-pad);
  color: var(--hs-ctx-text, var(--hs-ink));
  background-color: var(--hs-white);
}

.hs-band--soft {
  background-color: var(--hs-soft);
}

/* Treatment B. The flat navy colour shows where gradients are stripped (email, some editors). */
.hs-band--navy {
  --hs-ctx-text: var(--hs-on-navy);
  --hs-ctx-muted: var(--hs-on-navy);
  --hs-ctx-heading: var(--hs-white);
  --hs-ctx-eyebrow: var(--hs-action-gold);
  --hs-ctx-rule: var(--hs-action-gold);
  --hs-ctx-link: var(--hs-white);
  --hs-ctx-link-hover: var(--hs-white);
  --hs-ctx-surface: var(--hs-on-navy-surface);
  --hs-ctx-line: var(--hs-on-navy-line);
  --hs-ctx-tint: var(--hs-on-navy-surface);
  background-color: var(--hs-navy);
  background-image: var(--hs-ground-navy);
}

/* Compact: a band that holds one row (the anchor nav, a link row). 16px top and bottom, 24px from 48rem.
   Keeps its ground; a ground modifier and --compact combine. .hs-award-hero + .hs-band (0,2,0) still pads back the card overhang. */
.hs-band--compact {
  padding-block: var(--hs-space-4);
}

@media (min-width: 48rem) {
  .hs-band--compact { padding-block: var(--hs-space-5); }
}

/* Plate: recognition grounds only (member identity, credentials). Its rule is honor gold. */
.hs-band--plate {
  --hs-ctx-muted: var(--hs-plate-muted);
  --hs-ctx-eyebrow: var(--hs-gold-ink);
  --hs-ctx-rule: var(--hs-honor-gold);
  --hs-ctx-line: var(--hs-plate-line);
  background-color: var(--hs-plate);
}

/* Bleed: for a band that must sit inside a narrower page column (Drupal #content).
   The ground spans the viewport; the content keeps the column edges.
   Must sit below the ground modifiers: same specificity, so source order clears their ground. */
.hs-band--bleed {
  position: relative;
  isolation: isolate;
  background: none;
}

.hs-band--bleed::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  z-index: -1;
  inline-size: 100vw;
  transform: translateX(-50%);
  background-color: var(--hs-white);
}

.hs-band--bleed.hs-band--soft::before { background-color: var(--hs-soft); }

.hs-band--bleed.hs-band--plate::before { background-color: var(--hs-plate); }

.hs-band--bleed.hs-band--navy::before {
  background-color: var(--hs-navy);
  background-image: var(--hs-ground-navy);
}

/* Flow: every block in a content band (grid, prose, callout, steps, link row, a sub-heading) sits one gap apart.
   Head bands (page head, hero, award hero, CTA band) and the single-figure stat band keep their own spacing.
   The band foot keeps its own margin. Vertical margins collapse, so the larger band-head margin still wins after the head.
   :where() keeps the band test at zero weight: (0,3,0) beats the component margin: 0 rules, as before. */
:where(.hs-band:not(.hs-page-head, .hs-hero, .hs-award-hero, .hs-cta-band)) > .hs-container:not(:has(> .hs-stat__figure)) > * + :not(.hs-band__foot) {
  margin-block-start: var(--hs-space-5);
}

/* Band head: eyebrow, h2, lead. */
.hs-band__head {
  margin-block-end: clamp(var(--hs-space-6), 3.5vw, var(--hs-space-7));
}

.hs-band__head--center {
  text-align: center;
}

.hs-band__head--center .hs-lead {
  margin-inline: auto;
}

.hs-band__foot {
  margin-block-start: clamp(var(--hs-space-5), 3vw, var(--hs-space-6));
}

/* ---- components/eyebrow.css ---- */
/*
 * Eyebrow: a short label above a heading. Write it in sentence case; CSS uppercases it,
 * so screen readers say words, not letters.
 * Colour follows the ground: slate on light (6.2:1), action gold on navy (10.5:1), gold ink on plate (5.4:1).
 */

.hs-eyebrow {
  display: block;
  margin: 0 0 var(--hs-space-2);
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-eyebrow);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  letter-spacing: var(--hs-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hs-ctx-eyebrow, var(--hs-slate));
}

/* ---- components/heading.css ---- */
/*
 * Heading: Didot 700 at the h1, h2 or h3 step. The size class is separate from the element,
 * so the outline stays correct (a band opens with an h2 even where it looks like an h1).
 * Rule: the 56x4 bar under a page H1 or a band's opening H2. It is a brand mark, not a separator.
 * Honor rule: honor gold, for recognition only (member names, credentials, plates).
 */

.hs-heading {
  margin: 0;
  font-family: var(--hs-font-display);
  font-weight: var(--hs-weight-bold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-heading, var(--hs-navy));
  text-wrap: balance;
}

.hs-heading--h1 {
  font-size: var(--hs-text-h1);
  line-height: var(--hs-leading-tight);
}

.hs-heading--h2 {
  font-size: var(--hs-text-h2);
  line-height: 1.12;
}

.hs-heading--h3 {
  font-size: var(--hs-text-h3);
}

.hs-heading--rule::after {
  content: "";
  display: block;
  inline-size: var(--hs-rule-width);
  block-size: var(--hs-rule-height);
  margin-block-start: var(--hs-rule-gap);
  border-radius: var(--hs-rule-radius);
  background: var(--hs-ctx-rule, var(--hs-action-gold));
}

.hs-heading--honor::after {
  background: var(--hs-honor-gold);
}

.hs-heading--center {
  text-align: center;
}

.hs-heading--center::after {
  margin-inline: auto;
}

/* Lead: the one paragraph under a heading. */
.hs-lead {
  max-inline-size: var(--hs-measure-lead);
  margin: var(--hs-space-4) 0 0;
  font-size: var(--hs-text-lead);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

/* ---- components/group-head.css ---- */
/*
 * Group heading: the title of one group inside a band (a letter in a directory, an award in a recipient list),
 * with the count of items in it. Markup: <h3 class="hs-group-head"> with __title and __count spans,
 * so the heading reads "A, 13 members". The count is computed in code, never typed: it drifts.
 * Title: Didot 700 at the h3 step, navy. Count: 14px 600 muted (slate 6.2:1), on the title's baseline.
 * A 1px line under the head ties the group to its items. It is inside a band, so the "no rules between bands" ban does not apply.
 */

.hs-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--hs-space-1) var(--hs-space-3);
  margin: 0 0 var(--hs-space-4);
  padding-block-end: var(--hs-space-2);
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-h3);
  font-weight: var(--hs-weight-bold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-heading, var(--hs-navy));
  box-shadow: inset 0 -1px 0 var(--hs-ctx-line, var(--hs-line));
}

.hs-group-head__count {
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--hs-ctx-muted, var(--hs-slate));
}

/* Groups after the first: 48px above, so each group starts clearly. */
.hs-group + .hs-group {
  margin-block-start: var(--hs-space-7);
}

/* ---- components/button.css ---- */
/*
 * Button: a pill for the one action a band asks for. Every other route is .hs-link.
 * .hs-button alone is the gold primary. Variants: --navy, --on-navy (navy grounds), --secondary.
 * Sizes: default 48px; --sm 40px for repeated actions inside cards and dialogs.
 * Width: --block fills its column, for the one submit button of a narrow form (the auth card).
 * Labels: navy deep on gold 12.4:1 (11.4:1 on hover); white on navy 12.4:1; navy on white 12.4:1.
 */

.hs-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hs-space-2);
  min-block-size: var(--hs-button-h);
  padding: var(--hs-space-3) var(--hs-space-6);
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-body);
  font-weight: var(--hs-weight-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  color: var(--hs-navy-deep);
  background-color: var(--hs-action-gold);
  border: 1.5px solid var(--hs-action-gold);
  border-radius: var(--hs-radius-pill);
  box-shadow: var(--hs-shadow-gold);
  cursor: pointer;
  transition:
    background-color var(--hs-transition),
    border-color var(--hs-transition),
    color var(--hs-transition);
}

.hs-button:hover {
  color: var(--hs-navy-deep);
  background-color: var(--hs-action-gold-hover);
  border-color: var(--hs-action-gold-hover);
}

/* Restated: the base :where() focus ring has no specificity, and the glow would replace it. */
.hs-button:focus-visible {
  outline: var(--hs-focus-width) solid var(--hs-focus-color);
  outline-offset: var(--hs-focus-offset);
  box-shadow: var(--hs-focus-ring), var(--hs-shadow-gold);
}

.hs-button--navy {
  color: var(--hs-white);
  background-color: var(--hs-navy);
  border-color: var(--hs-navy);
  box-shadow: none;
}

.hs-button--navy:hover {
  color: var(--hs-white);
  background-color: var(--hs-navy-deep);
  border-color: var(--hs-navy-deep);
}

/* On a navy ground the navy button disappears; this is its stand-in. */
.hs-button--on-navy {
  color: var(--hs-navy);
  background-color: var(--hs-white);
  border-color: var(--hs-white);
  box-shadow: none;
}

.hs-button--on-navy:hover {
  color: var(--hs-navy);
  background-color: var(--hs-soft);
  border-color: var(--hs-soft);
}

/* Secondary: a tinted pill, never an outline. For a second action in a dialog or a repeated card action.
   Fill follows the ground: info surface on light (navy 10.9:1), white 8% on navy (white 9.3:1). */
.hs-button--secondary {
  color: var(--hs-ctx-heading, var(--hs-navy));
  background-color: var(--hs-ctx-tint, var(--hs-info-surface));
  border-color: var(--hs-ctx-tint, var(--hs-info-surface));
  box-shadow: none;
}

.hs-button--secondary:hover {
  color: var(--hs-ctx-heading, var(--hs-navy));
  background-color: var(--hs-ctx-tint, var(--hs-info-surface));
  border-color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-button--navy:focus-visible,
.hs-button--on-navy:focus-visible,
.hs-button--secondary:focus-visible {
  box-shadow: var(--hs-focus-ring);
}

.hs-button--sm {
  min-block-size: var(--hs-control-h);
  padding: var(--hs-space-2) var(--hs-space-5);
  font-size: var(--hs-text-md);
}

/* Full width: a flex box, so the label stays centred on every line. */
.hs-button--block {
  display: flex;
  inline-size: 100%;
}

.hs-button:disabled,
.hs-button.is-disabled,
.hs-button[aria-disabled="true"] {
  color: var(--hs-slate-500);
  background-color: var(--hs-line);
  border-color: var(--hs-line);
  box-shadow: none;
  cursor: not-allowed;
}

/* Action row: one button, then at most one text link.
   Below 36rem the button is full width and the link sits under it, centred. */
.hs-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--hs-space-4);
  text-align: center;
}

.hs-actions > .hs-link {
  align-self: center;
}

@media (min-width: 36rem) {
  .hs-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hs-space-4) var(--hs-space-5);
    text-align: start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-button {
    transition: none;
  }
}

/* ---- components/link.css ---- */
/*
 * Text link: every route that is not the band's one button.
 * Navy (white on navy) with a 2px action-gold underline. Hover: only the underline changes,
 * to navy on light and to white on navy. The text colour stays.
 */

.hs-link {
  display: inline-block;
  padding-block-end: 2px;
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  text-decoration: none;
  color: var(--hs-ctx-link, var(--hs-navy));
  border-block-end: 2px solid var(--hs-action-gold);
  transition: border-color var(--hs-transition);
}

.hs-link:hover {
  color: var(--hs-ctx-link, var(--hs-navy));
  border-block-end-color: var(--hs-ctx-link-hover, var(--hs-navy));
}

.hs-link[aria-current] {
  border-block-end-color: var(--hs-ctx-link-hover, var(--hs-navy));
}

@media (prefers-reduced-motion: reduce) {
  .hs-link {
    transition: none;
  }
}

/* ---- components/link-list.css ---- */
/*
 * Link list and link row: two or more text links with no button.
 * Link list: a vertical <ul>, one route per row, with an optional meta (source, length).
 *   Use it for video links under a recipient grid, or for a short list of related pages.
 *   Links are quiet, as the anchor nav: navy 600 (12.4:1) with a 1px line-strong underline that turns navy on hover.
 *   No gold underline: a stack of gold bars breaks "one gold element per viewport, never two stacked".
 * Link row: two or three .hs-link side by side; they wrap on a phone. Use it in place of .hs-actions when there is no button.
 * Each row is at least 40px tall, so a link is a full tap target. Colours follow the ground (white on navy).
 * Meta: 14px muted (slate 6.2:1 on white, white 86% on navy).
 */

.hs-link-list {
  display: grid;
  gap: var(--hs-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-link-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--hs-space-3);
  min-block-size: var(--hs-control-h);
  padding-block: var(--hs-space-2);
}

.hs-link-list__link {
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-link, var(--hs-navy));
  text-decoration-line: underline;
  text-decoration-color: var(--hs-ctx-line, var(--hs-line-strong));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--hs-transition);
}

.hs-link-list__link:hover {
  text-decoration-color: currentColor;
}

.hs-link-list__meta {
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

.hs-link-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hs-space-3) var(--hs-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-link-row > li {
  display: flex;
  align-items: center;
  min-block-size: var(--hs-control-h);
}

/* Must follow .hs-link-list and .hs-link-row: same specificity, so source order sets the top margin. */
* + .hs-link-list,
* + .hs-link-row {
  margin-block-start: var(--hs-space-3);
}

@media (prefers-reduced-motion: reduce) {
  .hs-link-list__link {
    transition: none;
  }
}

/* ---- components/back-link.css ---- */
/*
 * Back link: one route up to the parent page ("All scholarships"). Use it when a breadcrumb would be only two steps.
 * It sits above the eyebrow in a page head or a hero, in place of the breadcrumb. Never both.
 * Same type as the breadcrumb: 14px, muted, hairline underline (slate 6.2:1 on light; white 86% on navy, 6.4:1).
 * Hover turns the text and the underline navy (white on navy). The arrow is drawn by CSS, so a screen reader reads the label only.
 * 12px padding above and below makes a 40px tap target; a negative top margin keeps the visible gap tight.
 */

.hs-back-link {
  display: inline-block;
  padding-block: var(--hs-space-3);
  margin-block: calc(-1 * var(--hs-space-3)) var(--hs-space-1);
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-muted, var(--hs-slate));
  text-decoration-line: underline;
  text-decoration-color: var(--hs-ctx-line, var(--hs-line-strong));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--hs-transition), text-decoration-color var(--hs-transition);
}

/* inline-block: an atomic box takes no underline from its parent. */
.hs-back-link::before {
  content: "\2190" / "";
  display: inline-block;
  margin-inline-end: var(--hs-space-2);
}

.hs-back-link:hover {
  color: var(--hs-ctx-heading, var(--hs-navy));
  text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .hs-back-link {
    transition: none;
  }
}

/* ---- components/social.css ---- */
/*
 * Social links: Honor Society's own channels (LinkedIn, Instagram, Facebook, YouTube).
 * Default: each channel is a 40px round icon button with its name as a visually hidden label.
 *   Icons are inline SVG, 24px viewBox, stroke currentColor at 1.5, as every brand icon. They are simple glyphs, not vendor logos.
 *   Icon and ring follow the ground: navy icon and line-strong ring on light (ring 1.4:1 is decoration; the icon is navy 12.4:1),
 *   white icon and white 24% ring on navy. Hover turns the ring navy (white on navy).
 * --labelled: the icon plus the visible name, for a page where the row is the band's content.
 * --text: no SVG, names only, styled as the anchor nav. The hs_html_page validator has no <svg>: use this variant there.
 * Markup: <ul class="hs-social" aria-label="Honor Society on social media"> with one <li> per channel.
 */

.hs-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hs-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

* + .hs-social {
  margin-block-start: var(--hs-space-3);
}

.hs-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hs-space-2);
  min-inline-size: var(--hs-control-h);
  block-size: var(--hs-control-h);
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-semibold);
  line-height: 1;
  text-decoration: none;
  color: var(--hs-ctx-link, var(--hs-navy));
  border-radius: var(--hs-radius-pill);
  box-shadow: inset 0 0 0 1px var(--hs-ctx-line, var(--hs-line-strong));
  transition: box-shadow var(--hs-transition);
}

.hs-social__link:hover {
  color: var(--hs-ctx-link, var(--hs-navy));
  box-shadow: inset 0 0 0 1px var(--hs-ctx-link-hover, var(--hs-navy));
}

/* Restated: the ring is a box-shadow, and the base focus ring would replace it. */
.hs-social__link:focus-visible {
  outline: var(--hs-focus-width) solid var(--hs-focus-color);
  outline-offset: var(--hs-focus-offset);
  box-shadow: var(--hs-focus-ring), inset 0 0 0 1px var(--hs-ctx-link-hover, var(--hs-navy));
}

.hs-social__icon {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
}

/* Labelled: icon and name in a pill. */
.hs-social--labelled .hs-social__link {
  padding-inline: var(--hs-space-3) var(--hs-space-4);
}

/* Text only: names as quiet links, as the anchor nav: navy 600 with a 1px line-strong underline that turns navy on hover.
   No gold underline: four gold bars in a row break "one gold element per viewport". */
.hs-social--text {
  gap: 0 var(--hs-space-5);
}

.hs-social--text .hs-social__link {
  block-size: auto;
  min-block-size: var(--hs-control-h);
  min-inline-size: 0;
  border-radius: 0;
  box-shadow: none;
  text-decoration-line: underline;
  text-decoration-color: var(--hs-ctx-line, var(--hs-line-strong));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--hs-transition);
}

.hs-social--text .hs-social__link:hover {
  box-shadow: none;
  text-decoration-color: currentColor;
}

.hs-social--text .hs-social__link:focus-visible {
  box-shadow: var(--hs-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  .hs-social__link {
    transition: none;
  }
}

/* ---- components/card.css ---- */
/*
 * Card: a bordered 8px panel. Three forms:
 * - basic: a panel, no shadow;
 * - link: the whole card is one <a>, with the card shadow; hover turns the border navy (no lift, no zoom);
 * - media: an image on top, then the body. Combine with --link when it leads somewhere.
 * On navy grounds the card reads the ground's surface and line.
 * Catalog slots: __value (the one key figure: "$2,500", "20% off"), __meta (one line or one row of facts),
 * __logo (a partner logo on a white tile), __tags (static tags), __foot (status or tier badge, then the one action).
 * Catalog variants: --award (value first, link card), --offer (partner logo, value, tier; state is-locked),
 * --article (media card with a 16:9 image), --place (a compact link card for a location).
 * Value navy 12.4:1; meta slate 6.2:1 on white. A locked offer keeps its text contrast and greys only the logo.
 */

.hs-card {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-2);
  padding: var(--hs-card-pad);
  color: var(--hs-ctx-text, var(--hs-ink));
  background-color: var(--hs-ctx-surface, var(--hs-white));
  border: 1px solid var(--hs-ctx-line, var(--hs-line));
  border-radius: var(--hs-radius-md);
}

@media (min-width: 48rem) {
  .hs-card { padding: var(--hs-card-pad-lg); }
}

.hs-card__icon {
  display: block;
  inline-size: 28px;
  block-size: 28px;
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-card__title {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-h3);
  font-weight: var(--hs-weight-bold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-card__text {
  margin: 0;
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

.hs-card__meta {
  margin: 0;
  font-size: var(--hs-text-sm);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

/* Meta as a row of facts: ul.hs-card__meta > li, joined by a CSS dot, so a screen reader reads a list. */
ul.hs-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--hs-space-2);
  padding: 0;
  list-style: none;
}

ul.hs-card__meta > li + li::before {
  content: "\00B7" / "";
  margin-inline-end: var(--hs-space-2);
}

/* Value: the one key figure of a catalog item. Mukta 700, so it never competes with the Didot title. */
.hs-card__value {
  margin: 0;
  font-family: var(--hs-font-body);
  font-size: 1.5rem;
  font-weight: var(--hs-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--hs-leading-tight);
  color: var(--hs-ctx-heading, var(--hs-navy));
}

/* Logo: the partner's own mark, never redrawn. Every logo fills the same 144 x 56px tile (object-fit: contain), so logos read one size. A white tile with a line edge, so a logo with a white box sits cleanly. */
.hs-card__logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  block-size: 56px;
  margin: 0;
  flex: none;
}

.hs-card__logo img {
  display: block;
  inline-size: 144px;
  max-inline-size: 100%;
  block-size: 100%;
  padding: var(--hs-space-2);
  object-fit: contain;
  background-color: var(--hs-white);
  border: 1px solid var(--hs-line);
  border-radius: var(--hs-radius-sm);
}

/* Tags: a row of static .hs-tag labels. */
.hs-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hs-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Foot: pinned to the bottom, so cards in one grid row line up their badges and actions. */
.hs-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-3);
  margin-block-start: auto;
  padding-block-start: var(--hs-space-2);
}

/* Badges and the meta line in the foot centre on the action. */
.hs-card .hs-card__foot > * {
  align-self: center;
}

/* Award: the value leads, over a hairline. The card is a flex column with a fixed-height value slot and the foot pinned down,
   so titles and foots line up across a grid row even when a card has no value or meta. */
.hs-card--award {
  gap: var(--hs-space-3);
}

.hs-card--award .hs-card__value {
  min-block-size: 2.25rem;
  padding-block-end: var(--hs-space-3);
  border-block-end: 1px solid var(--hs-ctx-line, var(--hs-line));
}

/* Offer: logo, value, partner name. Locked: a tier above the viewer's. The logo greys; the text keeps its contrast. */
.hs-card--offer .hs-card__logo {
  margin-block-end: var(--hs-space-2);
}

.hs-card--offer.is-locked {
  background-color: var(--hs-ctx-surface, var(--hs-soft));
}

.hs-card--offer.is-locked .hs-card__logo img {
  filter: grayscale(1);
}

/* Article: a media card with a 16:9 image. */
.hs-card--article .hs-card__media {
  aspect-ratio: 16 / 9;
}

/* Place: a compact link card (a university): smaller title, location first in the meta. */
.hs-card--place {
  gap: var(--hs-space-1);
}

.hs-card--place .hs-card__title {
  font-size: var(--hs-text-lead);
}

/* Tag: a short status label ("Optional upgrade"). Pill, sentence case in markup. */
.hs-card__tag {
  align-self: flex-start;
  margin-block-start: var(--hs-space-1);
  padding: 0 var(--hs-space-2);
  font-size: var(--hs-text-xs);
  font-weight: var(--hs-weight-semibold);
  line-height: 1.6;
  letter-spacing: var(--hs-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hs-ink);
  background-color: var(--hs-soft);
  border: 1px solid var(--hs-line);
  border-radius: var(--hs-radius-pill);
}

/* Link card: one anchor around the whole card. No chevron, no "Learn more" inside. */
.hs-card--link {
  text-decoration: none;
  box-shadow: var(--hs-shadow-card);
  transition: border-color var(--hs-transition);
}

.hs-card--link:hover {
  color: var(--hs-ctx-text, var(--hs-ink));
  border-color: var(--hs-ctx-heading, var(--hs-navy));
}

/* Restated: the card shadow would replace the base focus ring. */
.hs-card--link:focus-visible {
  outline: var(--hs-focus-width) solid var(--hs-focus-color);
  outline-offset: var(--hs-focus-offset);
  box-shadow: var(--hs-focus-ring);
}

/* Media card: the image runs to the card edges; the body keeps the padding. */
.hs-card--media {
  gap: 0;
  padding: 0;
  overflow: clip;
}

.hs-card__media {
  display: block;
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 30%;
  background-color: var(--hs-soft);
}

.hs-card--media .hs-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-2);
  padding: var(--hs-card-pad);
}

@media (min-width: 48rem) {
  .hs-card--media .hs-card__body { padding: var(--hs-card-pad-lg); }
}

/* Grid of cards: one column, two from 36rem, three from 62rem (--3). */
.hs-card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hs-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A card inside a plain <li> fills the cell, so cards in a row share one height. */
.hs-card-grid > li:not(.hs-card) {
  display: grid;
}

@media (min-width: 36rem) {
  .hs-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
  .hs-card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .hs-card--link {
    transition: none;
  }
}

/* ---- components/page-head.css ---- */
/*
 * Page head: the light opening band of every page except the homepage.
 * Compose it on a band: class="hs-band hs-band--soft hs-page-head" (add hs-band--bleed inside a page column).
 * Content: eyebrow, H1 with the gold rule, lead (or, on an article, the byline), then an optional action row
 * or, on a catalog, one large search field (search.css). Nothing else.
 * Must load after band.css: .hs-page-head and .hs-band are both (0,1,0), so source order sets the padding.
 */

.hs-page-head {
  padding-block: var(--hs-space-5) var(--hs-space-6);
}

/* The H1 and the lead take the full container width: an empty right side on desktop is intended. */
.hs-page-head__lead {
  max-inline-size: none;
}

.hs-page-head__actions {
  margin-block-start: var(--hs-space-5);
}

/* Byline in an article page head: 16px under the gold rule, as the lead. */
.hs-page-head__byline {
  margin-block-start: var(--hs-space-4);
}

/* ---- components/hero.css ---- */
/*
 * Hero: the navy opening band of an acquisition page (homepage, landing pages).
 * Compose it on a band: class="hs-band hs-band--navy hs-hero". The ground is treatment B.
 * Content: H1 thesis (no rule: the gold button is the accent), lead, one gold button, one text link.
 * Must load after band.css: same specificity, source order sets the padding.
 */

.hs-hero {
  padding-block: clamp(var(--hs-space-7), 8vw, calc(var(--hs-space-8) + var(--hs-space-5)));
}

.hs-hero__title {
  max-inline-size: 22ch;
}

.hs-hero__lead {
  max-inline-size: var(--hs-measure);
  margin: var(--hs-space-5) 0 0;
  font-size: var(--hs-text-body);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-text, var(--hs-on-navy));
}

.hs-hero__actions {
  margin-block-start: var(--hs-space-6);
}

/* ---- components/award-hero.css ---- */
/*
 * Award hero: the opening band of one award page (recipe R2, award detail). Decided: option C, "Overlap".
 * Compose it on a band: class="hs-band hs-band--navy hs-award-hero". The ground is treatment B.
 * Left: eyebrow, H1 (no rule, 22ch as the hero title), lead, then the facts as a <dl>.
 * Right: a white deadline card with the next deadline, an optional note and the one gold Apply button.
 * The card hangs into the next band: 32px on a phone, 48px from 62rem. On a phone it follows the facts.
 * The next band must follow the hero directly: its top padding grows so its first line clears the card.
 * Facts: 1 to 4 items (2 to 5 with the deadline). The amount takes the --amount modifier.
 * Labels: 13px eyebrow spec in white 86% (6.4:1 at the lightest corner). Values: white Mukta 600 16px;
 * the amount is Didot 700 at the h2 step. Lining figures: Mukta's tabular $ leaves a gap before the amount.
 * Deadline: the date the page prints today, in <time datetime>. A rolling rule goes in the note.
 * The card takes the dialog shadow: it floats over two bands. A plain panel has no shadow.
 * Must load after band.css: .hs-award-hero and .hs-band are both (0,1,0), so source order sets the padding.
 */

.hs-award-hero {
  --hs-award-hero-card: 22rem;
  --hs-award-hero-overhang: var(--hs-space-6);
  position: relative;
  z-index: 1; /* Keeps the card above the next band, also when that band is positioned (hs-band--bleed). */
  padding-block: var(--hs-space-5) 0;
}

.hs-award-hero__inner {
  display: grid;
  gap: var(--hs-space-5);
}

.hs-award-hero__title {
  max-inline-size: 22ch;
}

.hs-award-hero__lead {
  margin-block-start: var(--hs-space-3);
  font-size: var(--hs-text-md);
}

.hs-award-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hs-space-3) var(--hs-space-6);
  margin: var(--hs-space-4) 0 0;
}

.hs-award-hero__fact {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  max-inline-size: 16rem;
}

.hs-award-hero__label {
  font-size: var(--hs-text-eyebrow);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  letter-spacing: var(--hs-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hs-ctx-muted, var(--hs-on-navy));
}

.hs-award-hero__value {
  margin: 0;
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-semibold);
  font-variant-numeric: lining-nums;
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-heading, var(--hs-white));
}

.hs-award-hero__fact--amount .hs-award-hero__value {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-h2);
  font-weight: var(--hs-weight-bold);
  line-height: var(--hs-leading-tight);
}

/* A light panel on navy: it resets the ground context, so the eyebrow, button and link read light-ground values. */
.hs-award-hero__card {
  --hs-ctx-text: var(--hs-ink);
  --hs-ctx-muted: var(--hs-slate);
  --hs-ctx-heading: var(--hs-navy);
  --hs-ctx-eyebrow: var(--hs-slate);
  --hs-ctx-link: var(--hs-navy);
  --hs-ctx-link-hover: var(--hs-navy);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-2);
  inline-size: 100%;
  max-inline-size: var(--hs-award-hero-card);
  margin-block-end: calc(-1 * var(--hs-award-hero-overhang));
  padding: var(--hs-space-4) var(--hs-card-pad) var(--hs-space-5);
  color: var(--hs-ink);
  background-color: var(--hs-white);
  border-radius: var(--hs-radius-md);
  box-shadow: var(--hs-shadow-dialog);
}

.hs-award-hero__card > .hs-eyebrow {
  margin: 0;
}

.hs-award-hero__date {
  margin: 0;
  font-size: var(--hs-text-h3);
  font-weight: var(--hs-weight-semibold);
  font-variant-numeric: lining-nums;
  line-height: var(--hs-leading-snug);
  color: var(--hs-navy);
}

.hs-award-hero__note {
  margin: 0;
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

/* One column at every width: the button is full width and the text link sits under it, centred. */
.hs-award-hero__actions {
  flex-direction: column;
  align-items: stretch;
  margin-block-start: var(--hs-space-2);
  text-align: center;
}

/* The band under the hero pads back the overhang. max() keeps a larger band padding. */
.hs-award-hero + .hs-band {
  padding-block-start: max(var(--hs-band-pad), calc(var(--hs-space-6) + var(--hs-space-5)));
}

@media (min-width: 62rem) {
  .hs-award-hero {
    --hs-award-hero-overhang: var(--hs-space-7);
    padding-block-start: var(--hs-space-7);
  }

  .hs-award-hero__inner {
    grid-template-columns: minmax(0, 1fr) var(--hs-award-hero-card);
    column-gap: var(--hs-space-7);
    align-items: end;
  }

  .hs-award-hero__text {
    padding-block-end: var(--hs-space-7);
  }

  .hs-award-hero__lead {
    font-size: var(--hs-text-lead);
  }

  .hs-award-hero__card {
    padding: var(--hs-space-5) var(--hs-card-pad-lg);
  }

  .hs-award-hero + .hs-band {
    padding-block-start: max(var(--hs-band-pad), calc(var(--hs-space-7) + var(--hs-space-5)));
  }
}

/* ---- components/callout.css ---- */
/*
 * Callout: a note set apart from the copy. Base = neutral note (soft ground, line-strong bar).
 * Status variants: --info, --success, --warning, --danger. Each has a tinted surface and a 4px bar.
 * The title carries the meaning; colour and icon only repeat it. Body text is ink on every surface (11.3:1 or more).
 * A callout is always a light panel, so it resets the ground context for links inside it.
 * Static notes need no role. A message injected after an action takes role="status" (or role="alert" for errors).
 */

.hs-callout {
  --hs-ctx-text: var(--hs-ink);
  --hs-ctx-muted: var(--hs-slate);
  --hs-ctx-heading: var(--hs-navy);
  --hs-ctx-link: var(--hs-navy);
  --hs-ctx-link-hover: var(--hs-navy);
  --hs-callout-bar: var(--hs-line-strong);
  --hs-callout-icon: var(--hs-slate);
  display: flex;
  align-items: flex-start;
  gap: var(--hs-space-3);
  padding: var(--hs-space-4) var(--hs-space-5);
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
  color: var(--hs-ink);
  background-color: var(--hs-soft);
  border-radius: var(--hs-radius-md);
  box-shadow: inset 4px 0 0 var(--hs-callout-bar);
}

.hs-callout__icon {
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 2px;
  color: var(--hs-callout-icon);
}

.hs-callout__body {
  min-inline-size: 0;
}

.hs-callout__body > * + * {
  margin-block-start: var(--hs-space-2);
}

.hs-callout__title {
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-ink);
}

/* Bar and icon on their surface: blue 4.6:1, success 4.8:1, warning 4.5:1, danger 4.8:1 (3:1 needed). */
.hs-callout--info {
  --hs-callout-bar: var(--hs-blue);
  --hs-callout-icon: var(--hs-blue);
  background-color: var(--hs-info-surface);
}

.hs-callout--success {
  --hs-callout-bar: var(--hs-success);
  --hs-callout-icon: var(--hs-success);
  background-color: var(--hs-success-surface);
}

.hs-callout--warning {
  --hs-callout-bar: var(--hs-warning);
  --hs-callout-icon: var(--hs-warning);
  background-color: var(--hs-warning-surface);
}

.hs-callout--danger {
  --hs-callout-bar: var(--hs-danger);
  --hs-callout-icon: var(--hs-danger);
  background-color: var(--hs-danger-surface);
}

/* ---- components/disclosure.css ---- */
/*
 * Disclosure: legal and participation terms (scholarship terms, dues terms, disclaimers).
 * It sits in its own band, after the FAQ and before the CTA band, under a normal band head (eyebrow, h2 with rule).
 * Body: 14px at 1.6, muted (slate 6.2:1 on white, 5.9:1 on soft), so the terms read as terms, not as the pitch.
 * Bold labels ("No Purchase Necessary:") and h3 group titles are ink 600 Mukta, never Didot: a quiet block.
 * Measure 44rem: short lines keep long legal text readable at 14px. Copy every paragraph; legal text is never cut.
 * Links: inline, 1px underline in the text colour, navy on hover. No gold: gold is for the action.
 * Markup: <div class="hs-disclosure"> with <h3>, <p>, <ul> inside. Element selectors, so pasted terms need no classes.
 */

.hs-disclosure {
  max-inline-size: var(--hs-measure-lead);
  font-size: var(--hs-text-sm);
  line-height: 1.6;
  color: var(--hs-ctx-muted, var(--hs-slate));
}

.hs-disclosure > * + * {
  margin-block-start: var(--hs-space-3);
}

.hs-disclosure :where(h3, h4) {
  margin-block-start: var(--hs-space-5);
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-text, var(--hs-ink));
}

.hs-disclosure > :first-child {
  margin-block-start: 0;
}

.hs-disclosure :where(strong, b) {
  color: var(--hs-ctx-text, var(--hs-ink));
}

.hs-disclosure :where(ul, ol) {
  padding-inline-start: 1.25em;
}

.hs-disclosure :where(a) {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.hs-disclosure :where(a):hover {
  color: var(--hs-ctx-heading, var(--hs-navy));
}

/* ---- components/tabs.css ---- */
/*
 * Tabs: page tabs that switch between sibling views (a member's Profile and Articles).
 * Each tab is a link to its own URL. The current tab carries aria-current="page"
 * (or aria-selected="true" inside a role="tablist"), and the style hangs on that attribute.
 * Current: navy text and a 3px navy underline. Never gold: gold is the colour of action.
 * Labels: slate 6.2:1 on white, navy 12.4:1. The row scrolls sideways on a narrow screen, never the page.
 */

/* The padding is room for the focus outline (3px + 3px offset), which a scroll box would clip. */
.hs-tabs {
  --hs-tabs-on-current: var(--hs-white);
  margin: calc(-1 * var(--hs-space-2));
  padding: var(--hs-space-2);
  overflow-x: auto;
  scrollbar-width: thin;
}

.hs-tabs__list {
  display: flex;
  gap: var(--hs-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
  box-shadow: inset 0 -1px 0 var(--hs-ctx-line, var(--hs-line));
}

.hs-tabs__item {
  flex: none;
  margin: 0;
}

.hs-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--hs-space-2);
  min-block-size: var(--hs-button-h);
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-body);
  white-space: nowrap;
  text-decoration: none;
  color: var(--hs-ctx-muted, var(--hs-slate));
  background: none;
  border: 0;
  border-block-end: 3px solid transparent;
  cursor: pointer;
  transition: color var(--hs-transition), border-color var(--hs-transition);
}

.hs-tabs__tab:hover {
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-tabs__tab[aria-current],
.hs-tabs__tab[aria-selected="true"] {
  color: var(--hs-ctx-heading, var(--hs-navy));
  border-block-end-color: var(--hs-ctx-heading, var(--hs-navy));
}

/* Count pill: a white pill with a hairline; it fills navy on the current tab.
   22px line plus the 1px border equals the label's 24px line, so a tab with a count is no taller. */
.hs-tabs__count {
  min-inline-size: 1.75rem;
  padding: 0 var(--hs-space-2);
  font-size: var(--hs-text-eyebrow);
  font-weight: var(--hs-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.375rem;
  text-align: center;
  color: var(--hs-ctx-heading, var(--hs-navy));
  background-color: var(--hs-ctx-surface, var(--hs-white));
  border: 1px solid var(--hs-ctx-line, var(--hs-line-strong));
  border-radius: var(--hs-radius-pill);
}

/* White on navy 12.4:1; on a navy ground the fill turns white and the number navy. */
.hs-tabs__tab[aria-current] .hs-tabs__count,
.hs-tabs__tab[aria-selected="true"] .hs-tabs__count {
  color: var(--hs-tabs-on-current);
  background-color: var(--hs-ctx-heading, var(--hs-navy));
  border-color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-band--navy .hs-tabs {
  --hs-tabs-on-current: var(--hs-navy);
}

@media (prefers-reduced-motion: reduce) {
  .hs-tabs__tab {
    transition: none;
  }
}

/* ---- components/chips.css ---- */
/*
 * Chips: two components that share a pill shape.
 * - Filter chip (.hs-chip): a link or button that filters one list (benefit categories, article topics).
 *   40px tall, sentence case. The current chip carries aria-current="page" (a link) or aria-pressed="true"
 *   (a button) and fills navy: white on navy 12.4:1. Never gold: gold is the colour of action.
 * - Tag (.hs-tag): a static label (a skill, a language). Not interactive, so no hover and no 40px height.
 * A tag that states a status ("Optional upgrade") is .hs-card__tag in card.css, not this.
 */

.hs-chips {
  --hs-chips-on-current: var(--hs-white);
  display: flex;
  flex-wrap: wrap;
  gap: var(--hs-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* One line that scrolls sideways. The padding is room for the focus outline, which a scroll box would clip. */
.hs-chips--scroll {
  flex-wrap: nowrap;
  margin: calc(-1 * var(--hs-space-2));
  padding: var(--hs-space-2);
  overflow-x: auto;
  scrollbar-width: thin;
}

.hs-chips > li {
  flex: none;
  margin: 0;
}

.hs-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--hs-space-2);
  min-block-size: var(--hs-control-h);
  padding: 0 var(--hs-space-4);
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  white-space: nowrap;
  text-decoration: none;
  color: var(--hs-ctx-text, var(--hs-ink));
  background-color: var(--hs-ctx-surface, var(--hs-white));
  border: 1px solid var(--hs-ctx-line, var(--hs-line-strong));
  border-radius: var(--hs-radius-pill);
  cursor: pointer;
  transition:
    color var(--hs-transition),
    background-color var(--hs-transition),
    border-color var(--hs-transition);
}

.hs-chip:hover {
  color: var(--hs-ctx-heading, var(--hs-navy));
  border-color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-chip[aria-current],
.hs-chip[aria-pressed="true"] {
  color: var(--hs-chips-on-current);
  background-color: var(--hs-ctx-heading, var(--hs-navy));
  border-color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-band--navy .hs-chips {
  --hs-chips-on-current: var(--hs-navy);
}

/* Tag: ink on soft 12.2:1. The optional second part (a level) is regular slate, 5.9:1. */
.hs-tag {
  display: inline-flex;
  align-items: baseline;
  gap: var(--hs-space-1);
  padding: var(--hs-space-1) var(--hs-space-3);
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-text, var(--hs-ink));
  background-color: var(--hs-ctx-surface, var(--hs-soft));
  border: 1px solid var(--hs-ctx-line, var(--hs-line));
  border-radius: var(--hs-radius-pill);
}

.hs-tag__meta {
  font-weight: var(--hs-weight-regular);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

@media (prefers-reduced-motion: reduce) {
  .hs-chip {
    transition: none;
  }
}

/* ---- components/form.css ---- */
/*
 * Form: fields, controls, checks, fieldsets, errors, the form alert and the password field.
 * Field order, top to bottom: label, control, hint, error. The hint sits below the control, where Drupal core
 * prints a field description. In a fieldset the hint follows the options.
 * Controls: 40px, 4px radius, 16px text (16px stops the iOS zoom on focus).
 * Control border slate 500: 3.7:1 on white, so the box is visible (WCAG 1.4.11 asks 3:1).
 * Focus: the shared focus style (gold outline, navy ring) plus a navy border. No separate input ring.
 * Text: label ink 13.0:1, hint slate 6.2:1, placeholder slate 6.2:1, error danger 5.4:1 on white.
 * A placeholder shows an example value only, never the label: every control keeps a visible <label for>.
 * Mark the optional fields, not the required ones: most fields are required.
 * The form alert is a danger callout (callout.css) with .hs-form-alert for its list of links.
 * Password toggle: one pattern everywhere, an eye / eye-off icon button inside the field, 44px hit area.
 * Around a form: .hs-form-link (quiet route), .hs-form-divider (hairline) and .hs-form-note (support line).
 */

.hs-form {
  display: grid;
  gap: var(--hs-space-5);
  margin: 0;
}

.hs-field {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-2);
  min-inline-size: 0;
}

.hs-label {
  margin: 0;
  padding: 0;
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ink);
}

.hs-optional {
  font-weight: var(--hs-weight-regular);
  color: var(--hs-slate);
}

.hs-hint {
  margin: 0;
  font-size: var(--hs-text-sm);
  line-height: 1.4;
  color: var(--hs-slate);
}

/* ------------------------------------------------------------ Controls: input, select, textarea */

.hs-control {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  min-block-size: var(--hs-control-h);
  margin: 0;
  /* No block padding: at 16px Mukta's line box is taller than a padded 40px control, and the text would clip. */
  padding: 0 var(--hs-space-3);
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-md);
  line-height: normal;
  color: var(--hs-ink);
  background-color: var(--hs-white);
  border: 1px solid var(--hs-slate-500);
  border-radius: var(--hs-radius-sm);
  transition: border-color var(--hs-transition);
}

.hs-control::placeholder {
  color: var(--hs-slate);
  opacity: 1;
}

.hs-control:hover {
  border-color: var(--hs-slate);
}

/* Restated with the border: the base :where() rule has no specificity, and the control's own border would win. */
.hs-control:focus-visible {
  border-color: var(--hs-navy);
  outline: var(--hs-focus-width) solid var(--hs-focus-color);
  outline-offset: var(--hs-focus-offset);
  box-shadow: var(--hs-focus-ring);
}

/* Invalid: a 2px danger edge (border plus an inset line); the error text under the control says what to fix. */
.hs-control[aria-invalid="true"] {
  border-color: var(--hs-danger);
  box-shadow: inset 0 0 0 1px var(--hs-danger);
}

.hs-control[aria-invalid="true"]:focus-visible {
  box-shadow: inset 0 0 0 1px var(--hs-danger), var(--hs-focus-ring);
}

/* Disabled text is exempt from contrast; the soft ground and the lighter border say "cannot change". */
.hs-control:disabled {
  color: var(--hs-slate-400);
  -webkit-text-fill-color: var(--hs-slate-400);
  background-color: var(--hs-soft);
  border-color: var(--hs-line-strong);
  cursor: not-allowed;
}

/* Select: the native arrow is replaced by a navy chevron drawn from two gradients, so it reads the token. */
select.hs-control {
  padding-inline-end: var(--hs-space-7);
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--hs-navy) 50%),
    linear-gradient(135deg, var(--hs-navy) 50%, transparent 50%);
  background-position:
    calc(100% - 19px) 55%,
    calc(100% - 14px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

textarea.hs-control {
  min-block-size: 7.5rem;
  padding: var(--hs-space-2) var(--hs-space-3);
  line-height: var(--hs-leading-body);
  resize: vertical;
}

/* Width follows the value: a ZIP code or a GPA does not need the full row. */
.hs-control--short {
  max-inline-size: 10rem;
}

.hs-control--medium {
  max-inline-size: 20rem;
}

/* ------------------------------------------------------------ Checkbox and radio */

/* The row is 40px tall with its padding: the label is the tap target, not only the 20px box. */
.hs-check {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: start;
  gap: var(--hs-space-1) var(--hs-space-3);
  padding-block: var(--hs-space-2);
}

/* Native box in navy: the browser keeps the checked, indeterminate and forced-colours states. */
.hs-check__input {
  inline-size: 20px;
  block-size: 20px;
  margin: 2px 0 0;
  accent-color: var(--hs-navy);
  cursor: pointer;
}

.hs-check__label {
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
  color: var(--hs-ink);
  cursor: pointer;
}

.hs-check > .hs-hint,
.hs-check > .hs-field-error {
  grid-column: 2;
}

.hs-check__input:disabled,
.hs-check__input:disabled + .hs-check__label {
  color: var(--hs-slate-400);
  cursor: not-allowed;
}

/* ------------------------------------------------------------ Fieldset: a group with one legend */

.hs-fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-2);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* A legend is not a flex item in every browser; float: none plus the margin keeps the gap. */
.hs-fieldset > .hs-label {
  float: none;
  inline-size: auto;
  margin-block-end: var(--hs-space-2);
}

/* Checks keep their own 8px padding, so the options stack with no extra gap. */
.hs-fieldset__options {
  display: grid;
}

/* Date parts or a city / ZIP pair on one line. */
.hs-fieldset__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hs-space-3);
}

.hs-fieldset__row > * {
  flex: 1 1 8rem;
}

/* ------------------------------------------------------------ Errors */

.hs-field-error {
  margin: 0;
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-semibold);
  line-height: 1.4;
  color: var(--hs-danger);
}

.hs-field-error[hidden] {
  display: none;
}

/* Form alert: the summary at the top of a form that failed. It takes role="alert" and focus after submit. */
.hs-form-alert__list {
  margin: 0;
  padding-inline-start: 1.25em;
}

.hs-form-alert__list li + li {
  margin-block-start: var(--hs-space-1);
}

.hs-form-alert__list a {
  font-weight: var(--hs-weight-medium);
  color: var(--hs-ink);
  text-decoration-line: underline;
  text-decoration-color: var(--hs-danger);
  text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------ Password: reveal toggle, strength meter, rules */

/* --hs-password-toggle: the toggle's hit area, 44px square (WCAG 2.5.5). It overhangs the 40px control by 2px
   above and below, and it has no ground, so the overhang does not show. */
.hs-password__input {
  --hs-password-toggle: 44px;
  position: relative;
}

.hs-password__input .hs-control {
  padding-inline-end: var(--hs-space-7);
}

/* The toggle ships hidden and password.js shows it: without JavaScript the field is a plain password input.
   Icon slate 6.2:1, navy 12.4:1 on hover. Focus is the shared style from base.css. */
.hs-password__toggle {
  position: absolute;
  inset-block-start: calc((var(--hs-control-h) - var(--hs-password-toggle)) / 2);
  inset-inline-end: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--hs-password-toggle);
  block-size: var(--hs-password-toggle);
  padding: 0;
  color: var(--hs-slate);
  background: none;
  border: 0;
  border-radius: var(--hs-radius-sm);
  cursor: pointer;
  transition: color var(--hs-transition);
}

.hs-password__toggle[hidden] {
  display: none;
}

.hs-password__toggle:hover {
  color: var(--hs-navy);
}

.hs-password__icon {
  inline-size: 20px;
  block-size: 20px;
}

/* aria-pressed picks the icon: the eye while the password is hidden, the eye-off while it shows. */
.hs-password__icon--hide,
.hs-password__toggle[aria-pressed="true"] .hs-password__icon--show {
  display: none;
}

.hs-password__toggle[aria-pressed="true"] .hs-password__icon--hide {
  display: block;
}

/* Strength meter: one 4px bar on the line track, filled a third (weak), two thirds (fair) or full (strong).
   The fill length repeats the colour, and a visually hidden live label says the word to a screen reader.
   Fill on the line track: danger 4.4:1, warning 4.0:1, success 4.4:1 (3:1 needed). */
.hs-meter {
  position: relative;
  block-size: 4px;
  margin-block-start: var(--hs-space-1);
  overflow: hidden;
  background-color: var(--hs-line);
  border-radius: var(--hs-rule-radius);
}

/* The fill grows by transform, not width: motion stays on colour and transform. */
.hs-meter__fill {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  background-color: var(--hs-danger);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--hs-transition), background-color var(--hs-transition);
}

.hs-meter.is-weak .hs-meter__fill {
  transform: scaleX(0.33);
}

.hs-meter.is-fair .hs-meter__fill {
  background-color: var(--hs-warning);
  transform: scaleX(0.66);
}

.hs-meter.is-strong .hs-meter__fill {
  background-color: var(--hs-success);
  transform: scaleX(1);
}

/* Rules: shown from the start, so the rules are known before submit. A met rule turns success and gains a tick. */
.hs-password__rules {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hs-space-1) var(--hs-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--hs-text-sm);
  line-height: 1.4;
  color: var(--hs-slate);
}

.hs-password__rule {
  display: inline-flex;
  align-items: center;
  gap: var(--hs-space-1);
}

/* An open circle before a rule; a tick (two borders of a rotated box) once it is met. */
.hs-password__rule::before {
  content: "";
  flex: none;
  inline-size: 10px;
  block-size: 10px;
  border: 1.5px solid currentColor;
  border-radius: var(--hs-radius-round);
}

.hs-password__rule.is-met {
  color: var(--hs-success);
}

.hs-password__rule.is-met::before {
  inline-size: 6px;
  block-size: 11px;
  margin-inline: 2px;
  border-width: 0 2px 2px 0;
  border-radius: 0;
  transform: translateY(-2px) rotate(45deg);
}

/* ------------------------------------------------------------ Form link, divider and support note */

/* Form link: a quiet route next to a form ("Forgot your password?", "Sign out", "Join now"). Navy 600 (12.4:1) with
   a 1px line-strong underline that turns navy on hover, as the link list: the form's gold button stays the one gold element. */
.hs-form-link {
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-navy);
  text-decoration-line: underline;
  text-decoration-color: var(--hs-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--hs-transition);
}

.hs-form-link:hover {
  color: var(--hs-navy);
  text-decoration-color: currentColor;
}

/* A form link in the hint slot under a control, at body size: it is a route, not a hint.
   12px padding above and below makes a 46px tap target; the negative margin keeps the visible gap. */
.hs-hint > .hs-form-link {
  display: inline-block;
  margin-block: calc(-1 * var(--hs-space-3));
  padding-block: var(--hs-space-3);
  font-size: var(--hs-text-md);
}

/* Divider: one hairline between a form and its support note. Never between bands. */
.hs-form-divider {
  block-size: 1px;
  margin: 0;
  background-color: var(--hs-line);
  border: 0;
}

/* Support note: where to get help with this form. Slate 6.2:1; the lead-in in ink 13.0:1. */
.hs-form-note {
  margin: 0;
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
  color: var(--hs-slate);
}

.hs-form-note strong {
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-ink);
}

/* The lead-in question ("Need help signing in?") stands on its own line; the answer starts on the next. */
.hs-form-note > strong:first-child {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .hs-control,
  .hs-password__toggle,
  .hs-meter__fill,
  .hs-form-link {
    transition: none;
  }
}

/* ---- components/auth.css ---- */
/*
 * Auth card: the one column of an account page (sign in, reset password, one-time login, change password or email).
 * .hs-auth is the column: at most 35rem (560px) wide, centred in the container, on the white band.
 * Inside it: .hs-auth__card (1px line border, 8px radius, no shadow), then an optional .hs-auth__alt line under the card.
 * .hs-auth__head holds an optional eyebrow, the heading and the intro. The heading is the page H1 at the h2 size, with
 * no gold rule: the full-width gold button is the one gold element in the card.
 * Routes inside the card are quiet .hs-form-link (form.css), for the same reason.
 * Text: heading navy 12.4:1, intro slate 6.2:1, alt line slate 6.2:1 on white.
 */

.hs-auth {
  --hs-auth-max: 35rem;
  display: grid;
  gap: var(--hs-space-5);
  inline-size: 100%;
  max-inline-size: var(--hs-auth-max);
  margin-inline: auto;
}

.hs-auth__card {
  display: grid;
  gap: var(--hs-space-5);
  min-inline-size: 0;
  padding: var(--hs-card-pad);
  color: var(--hs-ink);
  background-color: var(--hs-white);
  border: 1px solid var(--hs-line);
  border-radius: var(--hs-radius-md);
}

/* Grid items may shrink below their content, so a long word wraps instead of widening the card. */
.hs-auth__card > * {
  min-inline-size: 0;
}

@media (min-width: 36rem) {
  .hs-auth__card {
    padding: var(--hs-space-6);
  }
}

.hs-auth__head {
  display: grid;
  gap: var(--hs-space-2);
}

/* The head's gap sets the 8px from eyebrow to heading. */
.hs-auth__head > .hs-eyebrow {
  margin: 0;
}

.hs-auth__intro {
  margin: 0;
  font-size: var(--hs-text-body);
  line-height: var(--hs-leading-body);
  color: var(--hs-slate);
}

.hs-auth__intro strong {
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-ink);
  overflow-wrap: anywhere;
}

/* Secondary action line under the card: "New to Honor Society? Join now". Centred, one quiet link. */
.hs-auth__alt {
  margin: 0;
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
  text-align: center;
  color: var(--hs-slate);
}

/* An account address inside a notice or a heading: it may break anywhere, so it never overflows at 320px. */
.hs-auth__account {
  overflow-wrap: anywhere;
}

/* ---- components/confirm.css ---- */
/*
 * Confirmation panel: what a page shows after an action that sends something, in place of the form.
 * Example: "Check your email" after a reset request. It says what happened, where it went, and what to do next.
 * Row one: a 24px icon in a 40px success disc (an envelope for "email sent", a tick otherwise), then the heading on the
 * same line. The disc centres on the heading's first line; a heading that wraps continues beside the disc.
 * Row two: the text, full width, from the card's left edge, as the form was. No button: the next step is a quiet link.
 * It lives inside .hs-auth__card on account pages, and in any panel or dialog elsewhere.
 * Icon success on its surface 4.8:1 (3:1 needed). Text slate 6.2:1; the address in ink 13.0:1 on white.
 */

/* --hs-confirm-line is the first line box of an .hs-heading--h2 (size x its 1.12 leading, heading.css).
   The taller of disc and line box sets the row; the shorter one moves down by half the difference. */
.hs-confirm {
  --hs-confirm-icon: 40px;
  --hs-confirm-line: calc(var(--hs-text-h2) * 1.12);
  display: grid;
  grid-template-columns: var(--hs-confirm-icon) minmax(0, 1fr);
  align-items: start;
  gap: var(--hs-space-2) var(--hs-space-3);
}

.hs-confirm__icon {
  inline-size: var(--hs-confirm-icon);
  block-size: var(--hs-confirm-icon);
  margin-block-start: max(0px, calc((var(--hs-confirm-line) - var(--hs-confirm-icon)) / 2));
  padding: var(--hs-space-2);
  color: var(--hs-success);
  background-color: var(--hs-success-surface);
  border-radius: var(--hs-radius-round);
}

.hs-confirm > .hs-heading {
  margin-block-start: max(0px, calc((var(--hs-confirm-icon) - var(--hs-confirm-line)) / 2));
}

.hs-confirm__text {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--hs-text-body);
  line-height: var(--hs-leading-body);
  color: var(--hs-slate);
}

/* The address the email went to: ink, and it may break anywhere so a long address never overflows at 320px. */
.hs-confirm__text strong {
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-ink);
  overflow-wrap: anywhere;
}

/* ---- components/table.css ---- */
/*
 * Table: a data table, and a comparison table (--compare) with a sticky first column and a current column.
 * Wrap every table in .hs-table-wrap (role="region", tabindex="0", aria-label): the wrapper scrolls sideways,
 * never the page, and a keyboard user can scroll it.
 * Heads: th scope="col" / scope="row". Numbers: tabular. Cell text ink 13.0:1.
 * Current column (the tier the page is about): mark each of its cells .is-current and add a visually hidden
 * "(this page)" to its head. Navy head, info-surface cells, 2px navy sides. Never gold.
 * On a phone the current column can start off screen: scroll the wrapper to it on load (the site's
 * tier-comparison.js does this today).
 */

/* position: relative keeps the visually hidden cell text inside the scroll box; without it, it widens the page. */
.hs-table-wrap {
  position: relative;
  max-inline-size: 100%;
  overflow-x: auto;
  background-color: var(--hs-white);
  border: 1px solid var(--hs-line);
  border-radius: var(--hs-radius-md);
}

/* Separate borders: with collapsed borders a sticky cell loses its lines in some browsers. */
.hs-table {
  inline-size: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-snug);
  font-variant-numeric: tabular-nums;
  color: var(--hs-ink);
}

.hs-table caption {
  padding: var(--hs-space-3) var(--hs-space-4) 0;
  font-size: var(--hs-text-sm);
  text-align: start;
  color: var(--hs-slate);
}

.hs-table th,
.hs-table td {
  padding: var(--hs-space-3) var(--hs-space-4);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--hs-line);
}

.hs-table thead th {
  font-weight: var(--hs-weight-semibold);
  vertical-align: bottom;
  color: var(--hs-navy);
  border-block-end-color: var(--hs-line-strong);
}

.hs-table tbody th {
  font-weight: var(--hs-weight-regular);
}

.hs-table tbody tr:last-child > * {
  border-block-end: 0;
}

/* A number column: end-aligned so the digits line up, and never broken across lines. */
.hs-table .hs-table__num {
  text-align: end;
  white-space: nowrap;
}

.hs-table a {
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-navy);
  text-decoration-line: underline;
  text-decoration-color: var(--hs-action-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--hs-transition);
}

.hs-table a:hover {
  text-decoration-color: var(--hs-navy);
}

/* ------------------------------------------------------------ Comparison table */

.hs-table--compare {
  min-inline-size: 38rem;
}

.hs-table--compare th,
.hs-table--compare td {
  text-align: center;
  vertical-align: middle;
}

.hs-table--compare thead th {
  white-space: nowrap;
}

/* Sticky label column. It needs its own ground, and an inset edge shows where the columns slide under it. */
.hs-table--compare > * > tr > :first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  min-inline-size: 8.5rem;
  text-align: start;
  white-space: normal;
  background-color: var(--hs-white);
  box-shadow: inset -1px 0 0 var(--hs-line);
}

@media (min-width: 48rem) {
  .hs-table--compare > * > tr > :first-child {
    min-inline-size: 14rem;
  }
}

/* Even rows: soft stripe, painted on the sticky cell too. (0,2,2). */
.hs-table--compare tbody tr:nth-child(even) > * {
  background-color: var(--hs-soft);
}

/* Current column. Must sit below the stripe: both (0,2,2), so source order wins it back. */
.hs-table--compare tr > .is-current {
  background-color: var(--hs-info-surface);
  box-shadow: inset 2px 0 0 var(--hs-navy), inset -2px 0 0 var(--hs-navy);
}

/* White on navy 12.4:1. */
.hs-table--compare thead tr > .is-current {
  color: var(--hs-white);
  background-color: var(--hs-navy);
}

.hs-table--compare thead .is-current a {
  color: var(--hs-white);
}

/* Tier dot: the tier colour as a 10px mark before the tier name. Decorative; the name carries the meaning. */
.hs-table__dot {
  display: inline-block;
  inline-size: 10px;
  block-size: 10px;
  margin-inline-end: var(--hs-space-2);
  vertical-align: 0.05em;
  background-color: var(--hs-slate);
  border-radius: var(--hs-radius-round);
  box-shadow: 0 0 0 1px var(--hs-line-strong);
}

.hs-table__dot--bronze { background-color: var(--hs-tier-bronze); }

.hs-table__dot--silver { background-color: var(--hs-tier-silver); }

.hs-table__dot--gold { background-color: var(--hs-tier-gold); }

.hs-table__dot--signature { background-color: var(--hs-tier-signature); }

/* Marks: success 5.4:1 on white, 4.7:1 on the current column; the dash slate 500 3.7:1. Each has hidden text. */
.hs-table__yes,
.hs-table__amount {
  font-weight: var(--hs-weight-bold);
  color: var(--hs-success);
}

.hs-table__no {
  color: var(--hs-slate-500);
}

/* Small-screen exception: the cells tighten so two tier columns show beside the labels at 375px. */
@media (max-width: 35.99rem) {
  .hs-table--compare {
    min-inline-size: 0;
    font-size: var(--hs-text-sm);
  }

  .hs-table--compare th,
  .hs-table--compare td {
    padding: var(--hs-space-3) var(--hs-space-2);
  }

  .hs-table--compare .hs-table__dot {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-table a {
    transition: none;
  }
}

/* ---- components/breadcrumb.css ---- */
/*
 * Breadcrumb: the trail above the eyebrow in a page head. Use it for at least three steps;
 * a two-step trail (Home / Page) stays in the BreadcrumbList schema only.
 * Markup: nav.hs-breadcrumb aria-label="Breadcrumb" > ol > li. The last item is the page itself: plain text, aria-current="page".
 * Links: slate 6.2:1 (5.9:1 on soft) with a hairline underline; hover turns both navy. Current page: ink.
 */

.hs-breadcrumb {
  display: block;
}

.hs-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0 0 var(--hs-space-3);
  padding: 0;
  list-style: none;
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

.hs-breadcrumb__item {
  margin: 0;
}

/* The slash is drawn by CSS, so a screen reader reads the list, not the separators. */
.hs-breadcrumb__item + .hs-breadcrumb__item::before {
  content: "/";
  margin-inline: var(--hs-space-2);
  color: var(--hs-ctx-muted, var(--hs-slate-500));
}

.hs-breadcrumb__link {
  color: var(--hs-ctx-muted, var(--hs-slate));
  text-decoration-line: underline;
  text-decoration-color: var(--hs-ctx-line, var(--hs-line-strong));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--hs-transition), text-decoration-color var(--hs-transition);
}

.hs-breadcrumb__link:hover {
  color: var(--hs-ctx-heading, var(--hs-navy));
  text-decoration-color: currentColor;
}

.hs-breadcrumb__item[aria-current] {
  font-weight: var(--hs-weight-medium);
  color: var(--hs-ctx-text, var(--hs-ink));
}

@media (prefers-reduced-motion: reduce) {
  .hs-breadcrumb__link {
    transition: none;
  }
}

/* ---- components/pager.css ---- */
/*
 * Pager: two forms for a long list.
 * - Numbered pager (.hs-pager): real links, so every page has a URL and works without JavaScript.
 *   40px round targets. The current page carries aria-current="page" and fills navy (white 12.4:1), as a chip does.
 * - Load more (.hs-load-more): one navy button under a card grid, with the count above it.
 *   Ship it as a link to the next page (?page=2); a script may then append the cards in place.
 *   Never a ghost or outline button.
 */

.hs-pager__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--hs-space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--hs-font-body);
}

.hs-pager__item {
  margin: 0;
}

.hs-pager__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hs-space-1);
  min-inline-size: var(--hs-control-h);
  min-block-size: var(--hs-control-h);
  padding: 0 var(--hs-space-3);
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-decoration: none;
  color: var(--hs-ctx-heading, var(--hs-navy));
  border: 1px solid transparent;
  border-radius: var(--hs-radius-pill);
  transition: border-color var(--hs-transition), background-color var(--hs-transition);
}

.hs-pager__link:hover {
  border-color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-pager__link[aria-current] {
  color: var(--hs-white);
  background-color: var(--hs-navy);
  border-color: var(--hs-navy);
}

.hs-pager__gap {
  padding-inline: var(--hs-space-1);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

.hs-pager__arrow {
  inline-size: 18px;
  block-size: 18px;
}

/* Small-screen exception: below 36rem the previous and next links keep their arrow and drop the word. */
@media (max-width: 35.99rem) {
  .hs-pager__word {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* Load more: centred; below 36rem the button is full width, like every single action. */
.hs-load-more {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--hs-space-3);
  margin-block-start: var(--hs-space-6);
  text-align: center;
}

.hs-load-more__status {
  margin: 0;
  font-size: var(--hs-text-sm);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

@media (min-width: 36rem) {
  .hs-load-more {
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-pager__link {
    transition: none;
  }
}

/* ---- components/search.css ---- */
/*
 * Search: one search field and its button in a GET form, so every search has a URL and works without JavaScript.
 * Markup: form.hs-search[role=search] > label.hs-visually-hidden + input.hs-control.hs-search__input[type=search]
 * + button.hs-button.hs-search__button. The field is the shared form control (form.css); this file only sizes the row.
 * Default: 40px field, small navy button, for a search inside a content band.
 * --large: 48px field at 18px text with a 48px button, for the search in a page head. Its button is the band's gold button.
 * The field stays white on every ground: ink 13.0:1, placeholder slate 6.2:1, border slate 500 3.7:1 on white.
 */

.hs-search {
  display: flex;
  align-items: stretch;
  gap: var(--hs-space-2);
  inline-size: 100%;
  max-inline-size: 40rem;
  margin: 0;
}

.hs-search__input {
  flex: 1 1 auto;
  min-inline-size: 0;
}

/* The native clear button stays: it is a real control. Safari's inner shadow goes. */
.hs-search__input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

.hs-search__button {
  flex: none;
  min-block-size: var(--hs-control-h);
  padding-block: var(--hs-space-2);
  padding-inline: var(--hs-space-5);
  font-size: var(--hs-text-md);
}

.hs-search--large .hs-search__input {
  min-block-size: var(--hs-button-h);
  padding-inline: var(--hs-space-4);
  font-size: var(--hs-text-lead);
}

.hs-search--large .hs-search__button {
  min-block-size: var(--hs-button-h);
  padding-inline: var(--hs-space-6);
  font-size: var(--hs-text-body);
}

/* In a page head the search follows the lead, as an action row would. */
.hs-page-head .hs-search {
  margin-block-start: var(--hs-space-5);
}

/* ---- components/filter.css ---- */
/*
 * Filter: the filter panel above a catalog's results. One GET form, so a filtered list has a URL and works without JavaScript.
 * Markup: form.hs-filter > details.hs-filter__panel[data-hs-filter] > summary.hs-filter__summary + .hs-filter__fields.
 * Fields: .hs-field.hs-filter__field (label.hs-label + select.hs-control), then .hs-filter__actions (Apply button, Clear all link).
 * Below 48rem the panel is a "Filters" disclosure, closed until opened: the list starts higher on a phone.
 * From 48rem filter.js opens it and this file hides the summary: the selects sit in one row.
 * Without filter.js the summary stays visible at every width, so the panel always opens.
 * Clear all in the panel shows only while the panel is a drawer; filter.js adds is-inline on wide screens and the results bar carries Clear all there.
 * Summary label navy 12.4:1 on white; the count is white on navy 12.4:1. Never gold: gold is for action, not state.
 */

.hs-filter {
  margin: 0;
}

.hs-filter__panel {
  color: var(--hs-ctx-text, var(--hs-ink));
  background-color: var(--hs-ctx-surface, var(--hs-white));
  border: 1px solid var(--hs-ctx-line, var(--hs-line));
  border-radius: var(--hs-radius-md);
}

/* 48px row: a full tap target. The native marker is replaced by a CSS chevron. */
.hs-filter__summary {
  display: flex;
  align-items: center;
  gap: var(--hs-space-2);
  min-block-size: var(--hs-button-h);
  padding-inline: var(--hs-space-4);
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-heading, var(--hs-navy));
  list-style: none;
  border-radius: var(--hs-radius-md);
  cursor: pointer;
}

.hs-filter__summary::-webkit-details-marker {
  display: none;
}

.hs-filter__summary::after {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  margin-inline-start: auto;
  border-block-end: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--hs-transition);
}

.hs-filter__panel[open] > .hs-filter__summary::after {
  transform: translateY(2px) rotate(225deg);
}

/* Active filter count: printed only when at least one filter is set. */
.hs-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 24px;
  block-size: 24px;
  padding-inline: var(--hs-space-2);
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--hs-white);
  background-color: var(--hs-navy);
  border-radius: var(--hs-radius-pill);
}

.hs-filter__fields {
  display: grid;
  gap: var(--hs-space-4);
  padding: 0 var(--hs-space-4) var(--hs-space-4);
}

.hs-filter__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hs-space-2) var(--hs-space-5);
}

/* Clear all: a quiet form link with a 44px tap target. */
.hs-filter__clear {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

@media (min-width: 48rem) {
  .hs-filter__panel.is-inline .hs-filter__clear {
    display: none;
  }

  .hs-filter__panel[open] > .hs-filter__summary {
    display: none;
  }

  .hs-filter__panel[open] > .hs-filter__fields {
    padding-block-start: var(--hs-space-4);
  }

  .hs-filter__fields {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    align-items: end;
    padding-inline: var(--hs-space-5);
  }

  .hs-filter__actions {
    min-block-size: var(--hs-control-h);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-filter__summary::after {
    transition: none;
  }
}

/* ---- components/results-bar.css ---- */
/*
 * Results bar: the line between a catalog's filters and its results.
 * Markup, in this order: p.hs-results-bar__count[role=status], .hs-results-bar__sort (label + select), then an optional
 * ul.hs-results-bar__active of removable filter chips and a Clear all link.
 * The count and the sort share the first row; the active filters take the second row.
 * The sort select joins the filter form with form="FORM-ID". Its Sort button (data-hs-filter-apply) is for the no-JS page:
 * filter.js hides it and submits on change.
 * Count slate 6.2:1 on white, the number ink 13.0:1. A remove chip is a filter chip (chips.css) with a CSS-drawn cross.
 */

.hs-results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-3) var(--hs-space-5);
  padding-block-end: var(--hs-space-4);
  border-block-end: 1px solid var(--hs-ctx-line, var(--hs-line));
}

.hs-results-bar__count {
  margin: 0;
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

.hs-results-bar__count strong {
  font-weight: var(--hs-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--hs-ctx-text, var(--hs-ink));
}

.hs-results-bar__sort {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hs-space-2) var(--hs-space-3);
}

.hs-results-bar__sort .hs-control {
  inline-size: auto;
}

.hs-results-bar__apply[hidden] {
  display: none;
}

.hs-results-bar__active {
  display: flex;
  flex-basis: 100%;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hs-space-2) var(--hs-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-results-bar__active > li {
  margin: 0;
}

/* The cross is drawn by CSS: the link text plus its visually hidden "Remove filter:" prefix name the action. */
.hs-results-bar__remove::after {
  content: "\00D7" / "";
  font-size: var(--hs-text-lead);
  font-weight: var(--hs-weight-regular);
  line-height: 1;
}

/* Clear all: a quiet form link, as tall as the chips beside it. */
.hs-results-bar__active .hs-form-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--hs-control-h);
}

/* ---- components/result.css ---- */
/*
 * Result: one row in a list of search results of mixed types (scholarship, benefit, article, page).
 * Markup: ol.hs-results > li.hs-result > p.hs-result__type, h2.hs-result__title > a, p.hs-result__path, p.hs-result__text.
 * The title link is the row's only link. <strong> in the text marks the matched words (ink, 600); no gold, no highlight fill.
 * Rows sit between hairlines, 20px apart. Type eyebrow slate 6.2:1; title navy 12.4:1; path and text slate 6.2:1 on white.
 */

.hs-results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-result {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-1);
  margin: 0;
  padding-block: var(--hs-space-5);
  border-block-end: 1px solid var(--hs-ctx-line, var(--hs-line));
}

.hs-result__type {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hs-space-2) var(--hs-space-3);
  margin: 0;
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-eyebrow);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  letter-spacing: var(--hs-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hs-ctx-eyebrow, var(--hs-slate));
}

.hs-result__title {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-h3);
  font-weight: var(--hs-weight-bold);
  line-height: var(--hs-leading-snug);
}

/* A hairline underline that turns navy on hover, as the link list. 4px padding lifts the target past 24px. */
.hs-result__title a {
  display: inline-block;
  padding-block: var(--hs-space-1);
  color: var(--hs-ctx-heading, var(--hs-navy));
  text-decoration-line: underline;
  text-decoration-color: var(--hs-ctx-line, var(--hs-line-strong));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--hs-transition);
}

.hs-result__title a:hover {
  text-decoration-color: currentColor;
}

.hs-result__path {
  margin: 0;
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-muted, var(--hs-slate));
  overflow-wrap: anywhere;
}

.hs-result__text {
  margin: var(--hs-space-1) 0 0;
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

.hs-result__text strong {
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-ctx-text, var(--hs-ink));
}

@media (prefers-reduced-motion: reduce) {
  .hs-result__title a {
    transition: none;
  }
}

/* ---- components/detail.css ---- */
/*
 * Detail: the body of an item page (a scholarship, a benefit, a university): a main column and a key-facts aside.
 * Markup: div.hs-detail > div.hs-detail__main + aside.hs-detail__aside. Source order: main first, then the aside.
 * Below 62rem one column, and CSS order puts the aside first: the facts and the action come right after the page head.
 * From 62rem two columns: main, then a 26rem aside, wide enough for the facts to read without wrapping. The aside sticks under the site header while the main column scrolls.
 * Blocks in the main column sit 32px apart. No colours of its own: the aside holds an .hs-facts panel.
 */

.hs-detail {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-6);
}

.hs-detail__main {
  min-inline-size: 0;
}

.hs-detail__main > * + * {
  margin-block-start: var(--hs-space-6);
}

/* A section heading in the main column keeps its content close but not touching. */
.hs-detail__main :is(h2, h3) + * {
  margin-block-start: var(--hs-space-4);
}

.hs-detail__aside {
  order: -1;
  min-inline-size: 0;
}

@media (min-width: 62rem) {
  .hs-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 26rem;
    align-items: start;
    gap: var(--hs-space-7);
  }

  .hs-detail__aside {
    position: sticky;
    inset-block-start: calc(var(--hs-header-h-lg) + var(--hs-space-5));
    order: 0;
  }
}

/* ---- components/facts.css ---- */
/*
 * Facts: the key facts of one item and its one primary action, in a bordered panel (the aside of .hs-detail).
 * Markup: div.hs-facts > optional h2.hs-facts__title, dl.hs-facts__list of div.hs-facts__item (dt + dd),
 * then .hs-facts__action (one button) and an optional p.hs-facts__note.
 * --value on the first item sets its value large (an amount, a discount).
 * Label slate 6.2:1, value ink 13.0:1, large value navy 12.4:1, note slate 6.2:1 on white. Items between hairlines.
 * No shadow: a plain panel. On a soft band the panel stays white.
 */

.hs-facts {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
  padding: var(--hs-card-pad);
  color: var(--hs-ctx-text, var(--hs-ink));
  background-color: var(--hs-ctx-surface, var(--hs-white));
  border: 1px solid var(--hs-ctx-line, var(--hs-line));
  border-radius: var(--hs-radius-md);
}

@media (min-width: 48rem) {
  .hs-facts { padding: var(--hs-card-pad-lg); }
}

.hs-facts__title {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-h3);
  font-weight: var(--hs-weight-bold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-facts__list {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.hs-facts__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--hs-space-1);
  padding-block: var(--hs-space-3);
  border-block-start: 1px solid var(--hs-ctx-line, var(--hs-line));
}

.hs-facts__item:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.hs-facts__item dt {
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

.hs-facts__item dd {
  margin: 0;
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-text, var(--hs-ink));
}

.hs-facts__item--value dd {
  font-size: 1.75rem;
  font-weight: var(--hs-weight-bold);
  font-variant-numeric: tabular-nums;
  line-height: var(--hs-leading-tight);
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-facts__action {
  display: flex;
  flex-direction: column;
}

.hs-facts__note {
  margin: 0;
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

/* ---- components/code-box.css ---- */
/*
 * Code box: a coupon or promotion code that a member copies after they redeem a benefit.
 * The code is in a monospace face, so 0 and O, 1 and l stay distinct. One tap selects the whole code.
 * The Copy button is a small secondary pill (a card action). It ships hidden; code-box.js shows it when the
 * browser can write to the clipboard. Without JavaScript the member selects the code and copies it.
 * Code ink on soft 12.2:1; label slate 6.2:1.
 */

.hs-code {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-2);
  min-inline-size: 0;
}

.hs-code__label {
  margin: 0;
  font-size: var(--hs-text-sm);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-slate);
}

.hs-code__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-3);
  padding: var(--hs-space-3) var(--hs-space-3) var(--hs-space-3) var(--hs-space-4);
  background-color: var(--hs-soft);
  border: 1px solid var(--hs-line-strong);
  border-radius: var(--hs-radius-md);
}

.hs-code__value {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-family: var(--hs-font-mono);
  font-size: var(--hs-text-lead);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
  color: var(--hs-ink);
  user-select: all;
}

.hs-code__copy[hidden] {
  display: none;
}

.hs-code__copy-icon {
  inline-size: 18px;
  block-size: 18px;
}

/* After a copy the label reads "Copied" for two seconds; the border turns navy as a second cue. */
.hs-code__copy.is-copied {
  border-color: var(--hs-navy);
}

.hs-code__note {
  margin: 0;
  font-size: var(--hs-text-sm);
  line-height: 1.4;
  color: var(--hs-slate);
}

/* ---- components/empty-state.css ---- */
/*
 * Empty state: what a list shows when it has nothing in it yet.
 * It says what is missing in one line and gives the one action that fills it. No apology, no illustration.
 * A list the viewer cannot fill (another member's articles) gets the line only, no action.
 * --search: a search or a filter that matched nothing. The text gives the fix (spelling, fewer filters, with a Clear all link),
 * then .hs-empty__links lists two to four destinations as a wrapping row of pill links (.hs-empty__link). Help, not a dead end.
 * Pill link: navy text on white, 1px navy border, 44px tall; hover fills navy with white text (12.4:1).
 * Title navy 11.7:1 on soft; text slate 5.9:1 on soft.
 */

.hs-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hs-space-2);
  padding: var(--hs-space-6) var(--hs-space-5);
  text-align: center;
  color: var(--hs-ctx-text, var(--hs-ink));
  background-color: var(--hs-ctx-surface, var(--hs-soft));
  border: 1px solid var(--hs-ctx-line, var(--hs-line));
  border-radius: var(--hs-radius-md);
}

@media (min-width: 48rem) {
  .hs-empty {
    padding: var(--hs-space-7) var(--hs-space-6);
  }
}

.hs-empty__icon {
  inline-size: 28px;
  block-size: 28px;
  margin-block-end: var(--hs-space-1);
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-empty__title {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-h3);
  font-weight: var(--hs-weight-bold);
  line-height: var(--hs-leading-snug);
  text-wrap: balance;
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-empty__text {
  margin: 0;
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

.hs-empty__actions {
  margin-block-start: var(--hs-space-4);
}

/* Inline links in the text (Clear all filters): a 1px underline in the text colour, navy on hover. */
.hs-empty__text a {
  color: inherit;
  font-weight: var(--hs-weight-semibold);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.hs-empty__text a:hover {
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-empty__links-title {
  margin: var(--hs-space-4) 0 0;
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-ctx-text, var(--hs-ink));
}

/* The suggested destinations: a centred, wrapping row of navy-outline pill links. */
.hs-empty__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--hs-space-2);
  margin: var(--hs-space-2) 0 0;
  padding: 0;
  list-style: none;
}

.hs-empty__link {
  display: inline-flex;
  align-items: center;
  min-block-size: calc(var(--hs-control-h) + var(--hs-space-1));
  padding: 0 var(--hs-space-4);
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  text-decoration: none;
  color: var(--hs-ctx-heading, var(--hs-navy));
  background-color: var(--hs-white);
  border: 1px solid var(--hs-ctx-heading, var(--hs-navy));
  border-radius: var(--hs-radius-pill);
  transition:
    color var(--hs-transition),
    background-color var(--hs-transition);
}

.hs-empty__link:hover {
  color: var(--hs-white);
  background-color: var(--hs-ctx-heading, var(--hs-navy));
}

/* ---- components/dialog.css ---- */
/*
 * Dialog: a native <dialog class="hs-dialog"> opened with showModal() (dialog.js, about 15 lines).
 * Parts: __header (title and close), __body (scrolls), __footer (actions; stays in view).
 * Sizes: --sm 440px (a confirm), default 560px (a short form), --lg 720px (a long form or a photo editor).
 * Actions: the primary button first, then a secondary pill (Cancel). On a phone they stack, full width.
 * The browser traps focus, closes on Escape and returns focus to the opener. Title: navy 12.4:1.
 */

/* No position here: an open modal is position: fixed by the browser. */
.hs-dialog {
  --hs-dialog-w: 35rem;
  --hs-dialog-pad: var(--hs-space-5);
  inline-size: min(var(--hs-dialog-w), 100vw - 2 * var(--hs-space-4));
  max-inline-size: calc(100vw - 2 * var(--hs-space-4));
  max-block-size: 90vh;
  max-block-size: 90dvh;
  margin: auto;
  padding: 0;
  font-family: var(--hs-font-body);
  color: var(--hs-ink);
  background-color: var(--hs-white);
  border: 1px solid var(--hs-line);
  border-radius: var(--hs-radius-md);
  box-shadow: var(--hs-shadow-dialog);
}

@media (min-width: 36rem) {
  .hs-dialog {
    --hs-dialog-pad: var(--hs-space-6);
  }
}

.hs-dialog--sm {
  --hs-dialog-w: 27.5rem;
}

.hs-dialog--lg {
  --hs-dialog-w: 45rem;
}

/* A long dialog scrolls its body, never the whole box: the header holds still and the footer stays in view. */
.hs-dialog[open] {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Navy at 40%. The literal is the fallback: older engines do not pass custom properties to ::backdrop. */
.hs-dialog::backdrop {
  background-color: rgba(31, 47, 110, 0.4);
  background-color: color-mix(in srgb, var(--hs-navy) 40%, transparent);
}

/* The page behind an open dialog holds still; the gutter stops a layout shift. */
:root:has(.hs-dialog[open]) {
  overflow: hidden;
  scrollbar-gutter: stable;
}

.hs-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hs-space-3);
  flex: none;
  padding: var(--hs-dialog-pad) var(--hs-dialog-pad) 0;
}

.hs-dialog__title {
  display: flex;
  align-items: center;
  min-block-size: var(--hs-control-h);
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-h3);
  font-weight: var(--hs-weight-bold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-navy);
}

/* Close: a 40px round button with a hairline ring. */
.hs-dialog__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  inline-size: var(--hs-control-h);
  block-size: var(--hs-control-h);
  margin-inline-end: calc(-1 * var(--hs-space-2));
  padding: 0;
  color: var(--hs-navy);
  background-color: var(--hs-white);
  border: 1px solid var(--hs-line-strong);
  border-radius: var(--hs-radius-round);
  cursor: pointer;
  transition: border-color var(--hs-transition), background-color var(--hs-transition);
}

.hs-dialog__close:hover {
  background-color: var(--hs-soft);
  border-color: var(--hs-navy);
}

.hs-dialog__close-icon {
  inline-size: 16px;
  block-size: 16px;
}

/* The side padding is also room for focus rings, which the scroll box would clip. */
.hs-dialog__body {
  flex: 1 1 auto;
  min-block-size: 0;
  padding: var(--hs-space-5) var(--hs-dialog-pad);
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
}

.hs-dialog__body > * + * {
  margin-block-start: var(--hs-space-4);
}

.hs-dialog__footer {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hs-space-3);
  padding: var(--hs-space-4) var(--hs-dialog-pad) var(--hs-dialog-pad);
  box-shadow: inset 0 1px 0 var(--hs-line);
}

/* Single small-screen exception: below 30rem each action is full width, the primary on top. */
@media (max-width: 29.99rem) {
  .hs-dialog__footer > .hs-button {
    flex: 1 0 100%;
  }
}

/* Opening: a short fade and a 8px rise, only for readers who allow motion. */
@media (prefers-reduced-motion: no-preference) {
  .hs-dialog[open] {
    transition: opacity var(--hs-transition), transform var(--hs-transition);
  }

  @starting-style {
    .hs-dialog[open] {
      opacity: 0;
      transform: translateY(8px);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hs-dialog__close {
    transition: none;
  }
}

/* ---- components/plate.css ---- */
/*
 * Recognition plate: the cream band that opens a member page (member profile, membership hub).
 * Compose it on a band: class="hs-band hs-band--plate hs-plate" (add hs-band--bleed inside a page column).
 * Content: optional avatar, eyebrow, the member name as the H1 with the honor rule, optional headline,
 * "Member since". No tier badge on the plate: the tier shows in the credential card.
 * An optional aside sits on the right from 62rem (tier ladder, credential summary).
 * Name: Didot 700 at the H1 step, pressed into the plate. Navy on plate 11.3:1, plate muted 5.4:1, gold ink 5.4:1.
 * Must load after band.css: .hs-plate and .hs-band are both (0,1,0), so source order sets the padding.
 */

.hs-plate {
  padding-block: clamp(var(--hs-space-6), 4vw, var(--hs-space-7));
  /* Kept from both reference pages: cream on white is 1.05:1, so the plate needs its own edge. */
  box-shadow: inset 0 -1px 0 var(--hs-plate-line);
}

.hs-plate__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hs-space-6);
  align-items: center;
}

@media (min-width: 62rem) {
  .hs-plate--aside .hs-plate__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 28.75rem);
  }
}

/* Photo and text: the photo wraps above the text when the row is too narrow. */
.hs-plate__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hs-space-5) var(--hs-space-6);
}

.hs-plate__text {
  flex: 1 1 16rem;
  min-inline-size: 0;
}

.hs-plate__name {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-h1);
  font-weight: var(--hs-weight-bold);
  line-height: var(--hs-leading-tight);
  overflow-wrap: anywhere;
  text-wrap: balance;
  color: var(--hs-ctx-heading, var(--hs-navy));
  text-shadow: var(--hs-shadow-letterpress);
}

/* Honor rule: honor gold, never action gold. Recognition only. */
.hs-plate__name::after {
  content: "";
  display: block;
  inline-size: var(--hs-rule-width);
  block-size: var(--hs-rule-height);
  margin-block-start: var(--hs-rule-gap);
  border-radius: var(--hs-rule-radius);
  background: var(--hs-honor-gold);
}

.hs-plate__headline {
  margin: var(--hs-space-4) 0 0;
  font-size: var(--hs-text-lead);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ink);
}

.hs-plate__at {
  font-weight: var(--hs-weight-regular);
  color: var(--hs-slate);
}

.hs-plate__since {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--hs-space-1) var(--hs-space-2);
  margin: var(--hs-space-4) 0 0;
}

.hs-plate__since-label {
  font-size: var(--hs-text-xs);
  font-weight: var(--hs-weight-semibold);
  letter-spacing: var(--hs-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hs-plate-muted);
}

/* The join date reads like an inscription. */
.hs-plate__since-date {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-body);
  font-weight: var(--hs-weight-bold);
  color: var(--hs-navy);
  text-shadow: var(--hs-shadow-letterpress-date);
}

.hs-plate__aside {
  min-inline-size: 0;
}

/* ---- components/credential.css ---- */
/*
 * Credential card: the member's standing, in an aside next to the profile or on the hub.
 * Compose it on a card: class="hs-card hs-credential". The 4px top bar is honor gold (recognition only).
 * Content: eyebrow, title ("Gold Member") with an optional tier badge, facts, then links under a hairline.
 * The bar is decoration (2.4:1 on white); the eyebrow and title carry the meaning.
 * Fact labels are slate (6.2:1). The profile uses slate 500 today (3.7:1), which fails AA at 12px.
 * Must load after card.css: same specificity, so source order sets the border.
 */

.hs-credential {
  --hs-ctx-eyebrow: var(--hs-gold-ink);
  border-block-start: var(--hs-rule-height) solid var(--hs-honor-gold);
}

.hs-credential .hs-eyebrow {
  margin-block-end: 0;
}

.hs-credential__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hs-space-2) var(--hs-space-3);
}

.hs-credential__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hs-space-4);
  margin: var(--hs-space-2) 0 0;
}

.hs-credential__facts dt {
  font-size: var(--hs-text-xs);
  font-weight: var(--hs-weight-semibold);
  letter-spacing: var(--hs-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hs-slate);
}

.hs-credential__facts dd {
  margin: 0;
  font-weight: var(--hs-weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--hs-ink);
}

.hs-credential__links {
  display: grid;
  gap: var(--hs-space-3);
  margin: var(--hs-space-3) 0 0;
  padding: var(--hs-space-4) 0 0;
  list-style: none;
  box-shadow: inset 0 1px 0 var(--hs-line);
}

/* ---- components/tier-badge.css ---- */
/*
 * Tier badge: the name of a member's tier as a small pill. Text in markup is the tier name ("Gold").
 * Use it on the credential card and in lists. Never on the recognition plate.
 * Modifiers: --bronze, --silver, --gold, --signature, --free. Fills are the --hs-tier-* tokens; Free is slate.
 * Label: white on bronze 5.8:1, on signature 14.7:1, on slate 6.2:1; navy on silver 6.8:1, on gold 8.9:1.
 * Silver and gold are pale (1.8:1 and 1.4:1 on white), so they get a 1px inset edge that clears 3:1:
 * slate 500 on silver's ground (3.7:1 on white), gold ink on gold's (5.9:1 on white).
 */

.hs-tier-badge {
  --hs-tier-fill: var(--hs-slate);
  --hs-tier-text: var(--hs-white);
  --hs-tier-edge: var(--hs-tier-fill);
  display: inline-flex;
  align-items: center;
  padding: var(--hs-space-1) var(--hs-space-3);
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-xs);
  font-weight: var(--hs-weight-semibold);
  line-height: 1;
  letter-spacing: var(--hs-tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hs-tier-text);
  background-color: var(--hs-tier-fill);
  border-radius: var(--hs-radius-pill);
  box-shadow: inset 0 0 0 1px var(--hs-tier-edge);
}

.hs-tier-badge--bronze {
  --hs-tier-fill: var(--hs-tier-bronze);
}

.hs-tier-badge--silver {
  --hs-tier-fill: var(--hs-tier-silver);
  --hs-tier-text: var(--hs-navy);
  --hs-tier-edge: var(--hs-slate-500);
}

.hs-tier-badge--gold {
  --hs-tier-fill: var(--hs-tier-gold);
  --hs-tier-text: var(--hs-navy);
  --hs-tier-edge: var(--hs-gold-ink);
}

/* Signature is near-navy; on a navy ground its edge takes the ground's line, so the pill stays visible. */
.hs-tier-badge--signature {
  --hs-tier-fill: var(--hs-tier-signature);
  --hs-tier-edge: var(--hs-ctx-line, var(--hs-tier-signature));
}

.hs-tier-badge--free {
  --hs-tier-fill: var(--hs-slate);
}

/* ---- components/status.css ---- */
/*
 * Status: a small pill that states where an item stands ("Open", "Closing soon", "Ready to use").
 * The label carries the meaning; the colour only repeats it. Write it in sentence case: CSS uppercases it.
 * Same type as the tier badge: 12px, 600, 0.12em tracking.
 * Variants and contrast:
 *   --open    success on success surface 4.8:1
 *   --soon    warning on warning surface 4.5:1
 *   --closed  slate on soft 5.9:1, line edge
 *   --new     navy on info surface 10.9:1
 *   --locked  plate muted on plate 5.4:1, plate-line edge (a tier above the viewer's)
 *   --ready   white on navy 12.4:1 (the viewer can use it now)
 * Never gold or honor gold: gold is for action and recognition, never for a state.
 */

.hs-status {
  --hs-status-text: var(--hs-slate);
  --hs-status-fill: var(--hs-soft);
  --hs-status-edge: var(--hs-status-fill);
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: var(--hs-space-1) var(--hs-space-3);
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-xs);
  font-weight: var(--hs-weight-semibold);
  line-height: 1;
  letter-spacing: var(--hs-tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--hs-status-text);
  background-color: var(--hs-status-fill);
  border-radius: var(--hs-radius-pill);
  box-shadow: inset 0 0 0 1px var(--hs-status-edge);
}

.hs-status--open {
  --hs-status-text: var(--hs-success);
  --hs-status-fill: var(--hs-success-surface);
}

.hs-status--soon {
  --hs-status-text: var(--hs-warning);
  --hs-status-fill: var(--hs-warning-surface);
}

.hs-status--closed {
  --hs-status-edge: var(--hs-line);
}

.hs-status--new {
  --hs-status-text: var(--hs-navy);
  --hs-status-fill: var(--hs-info-surface);
}

.hs-status--locked {
  --hs-status-text: var(--hs-plate-muted);
  --hs-status-fill: var(--hs-plate);
  --hs-status-edge: var(--hs-plate-line);
}

.hs-status--ready {
  --hs-status-text: var(--hs-white);
  --hs-status-fill: var(--hs-navy);
}

/* On a navy ground the navy pill would vanish: it takes the ground's line as its edge. */
.hs-band--navy .hs-status--ready {
  --hs-status-edge: var(--hs-on-navy-line);
}

/* ---- components/avatar.css ---- */
/*
 * Avatar: a member's photo or initials in a circle. Three sizes:
 * - default 40px: header, bylines, article cards, feed rows (today 32, 40, 44, 48px);
 * - --md 64px: member and recipient cards, author card (today 64, 80, 88px);
 * - --lg 112px to 184px, fluid: the plate on the profile and the hub (today 112, 160, 184px by breakpoint).
 * Photo: <img class="hs-avatar" width height alt>. Initials: <span class="hs-avatar hs-avatar--initials" role="img" aria-label="Name">.
 * Initials are navy on plate (11.3:1): an avatar is member identity, so it takes the recognition ground.
 * The ring and ground read the band context, so the header avatar on navy needs no modifier.
 */

.hs-avatar {
  --hs-avatar-size: var(--hs-control-h);
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: var(--hs-avatar-size);
  block-size: var(--hs-avatar-size);
  overflow: hidden;
  object-fit: cover;
  object-position: 50% 30%;
  background-color: var(--hs-ctx-tint, var(--hs-plate));
  border-radius: var(--hs-radius-round);
  box-shadow: 0 0 0 1px var(--hs-ctx-line, var(--hs-plate-line));
}

.hs-avatar--md {
  --hs-avatar-size: var(--hs-space-8);
}

.hs-avatar--lg {
  --hs-avatar-size: clamp(7rem, 4rem + 10vw, 11.5rem);
}

.hs-avatar--initials {
  font-family: var(--hs-font-body);
  font-size: calc(var(--hs-avatar-size) * 0.38);
  font-weight: var(--hs-weight-semibold);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--hs-ctx-heading, var(--hs-navy));
}

/* The default medallion has transparent corners: a ring or ground would show as a halo. */
.hs-avatar--default {
  object-fit: contain;
  background: none;
  box-shadow: none;
}

/* ---- components/member-card.css ---- */
/*
 * Member card: one member in a directory (featured members, scholarship recipients).
 * Compose it on a link card: <a class="hs-card hs-card--link hs-member-card">. The whole card is the profile link.
 * Content: a 64px avatar, the name in Didot (navy 12.4:1), then one or two meta lines in slate (6.2:1).
 * --recipient: the award as an eyebrow above the name, and a one-line story under the meta. The card links
 * to the recipient story. A video goes in the band's link list, never inside the card (one card, one link).
 * --links (round 3, built: A "Two links"): a basic card, not a link card, for a row that needs two routes:
 * the name to the profile or story, and a second link (the school's page, the video). Recipient lists, video rows.
 * --row in ul.hs-member-rows (round 3, decided: B "Row list" for long lists, about 20+ rows): no card, no avatar.
 * One row per member: the name link left, the second link right, a hairline under each row.
 * Grid: put the cards in .hs-card-grid (add --3 for three columns from 62rem).
 * Must load after card.css: same specificity, so source order sets the direction.
 */

.hs-member-card {
  flex-direction: row;
  align-items: center;
  gap: var(--hs-space-4);
}

.hs-member-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-1);
  min-inline-size: 0;
}

.hs-member-card__name {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-lead);
  font-weight: var(--hs-weight-bold);
  line-height: var(--hs-leading-snug);
  overflow-wrap: anywhere;
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-member-card__meta {
  margin: 0;
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

.hs-member-card .hs-eyebrow {
  margin: 0;
  font-size: var(--hs-text-xs);
}

/* Recipient: avatar and name on one row, the story under them at full card width. */
.hs-member-card--recipient {
  flex-wrap: wrap;
  /* Lines pack at the top: in a stretched grid row, heads and stories start at the same height. */
  align-content: flex-start;
}

.hs-member-card--recipient .hs-member-card__body {
  flex: 1 1 10rem;
}

.hs-member-card__story {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

/* Two links: a basic card (no hover border, no shadow) whose name and meta line are each a link.
   Name link: Didot navy 12.4:1 with a 1px line-strong underline. Meta link: 14px slate 6.2:1 with a hairline underline.
   Hover turns the underline navy (and the meta text navy). Each link is 40px tall: a full tap target, without a stretched link. */
.hs-member-card--links {
  align-items: center;
}

.hs-member-card--links .hs-member-card__body {
  gap: 0;
}

.hs-member-card__link,
.hs-member-card__meta-link {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--hs-control-h);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
  transition: color var(--hs-transition), text-decoration-color var(--hs-transition);
}

.hs-member-card__link {
  color: var(--hs-ctx-heading, var(--hs-navy));
  text-decoration-color: var(--hs-ctx-line, var(--hs-line-strong));
}

.hs-member-card__meta-link {
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-muted, var(--hs-slate));
  text-decoration-color: var(--hs-ctx-line, var(--hs-line-strong));
}

.hs-member-card__link:hover,
.hs-member-card__meta-link:hover {
  color: var(--hs-ctx-heading, var(--hs-navy));
  text-decoration-color: currentColor;
}

.hs-member-card--links .hs-eyebrow {
  margin-block-end: calc(-1 * var(--hs-space-2));
}

/* Row list: a long list (about 20+ rows), such as the 131 recipients on /scholarship-recipients-all.
   No card, no avatar, no eyebrow: the group heading above the list names the award.
   Name link Didot 700 18px navy 12.4:1, left; second link 14px slate 6.2:1 (5.9:1 on soft), right.
   On a narrow row the second link wraps under the name. A 1px line under each row (ctx line on navy). */
.hs-member-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-member-card--row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--hs-space-4);
  box-shadow: inset 0 -1px 0 var(--hs-ctx-line, var(--hs-line));
}

.hs-member-card--row .hs-member-card__link {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-lead);
  font-weight: var(--hs-weight-bold);
  line-height: var(--hs-leading-snug);
  overflow-wrap: anywhere;
}

@media (prefers-reduced-motion: reduce) {
  .hs-member-card__link,
  .hs-member-card__meta-link {
    transition: none;
  }
}

/* ---- components/quote.css ---- */
/*
 * Quote: a member testimonial or review excerpt. Markup: <figure class="hs-quote"> with a <blockquote>
 * and a <figcaption>. Write the quote without quotation marks; the component draws the opening mark.
 * Text: Didot italic (the regular italic cut), navy on light (12.4:1), white on navy.
 * Caption: name in ink semibold, then the affiliation or source in slate (6.2:1).
 * --card: the same quote in a bordered panel, smaller, for a grid of reviews.
 * --pull: a pull quote inside .hs-prose. Larger Didot italic between a navy top rule and a hairline,
 * full column width, 48px clear of the body text. Navy, never gold: gold is for the action.
 * A quotation that is part of the argument stays on the plain .hs-prose blockquote (base.css).
 */

.hs-quote {
  display: grid;
  gap: var(--hs-space-4);
  max-inline-size: 40rem;
  margin: 0;
}

/* The mark is decoration; the empty alt text keeps screen readers quiet. */
.hs-quote::before {
  content: "\201C" / "";
  display: block;
  block-size: 0.5em;
  font-family: var(--hs-font-display);
  font-size: 4rem;
  font-weight: var(--hs-weight-bold);
  line-height: 1;
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-quote__text {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  font-style: italic;
  font-weight: var(--hs-weight-regular);
  line-height: 1.35;
  text-wrap: pretty;
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-quote__text > * {
  margin: 0;
}

.hs-quote__cite {
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

.hs-quote__name {
  display: block;
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-ctx-text, var(--hs-ink));
}

.hs-quote--card {
  align-content: start;
  max-inline-size: none;
  padding: var(--hs-card-pad);
  background-color: var(--hs-ctx-surface, var(--hs-white));
  border: 1px solid var(--hs-ctx-line, var(--hs-line));
  border-radius: var(--hs-radius-md);
}

@media (min-width: 48rem) {
  .hs-quote--card { padding: var(--hs-card-pad-lg); }
}

.hs-quote--card::before {
  font-size: 3rem;
}

.hs-quote--card .hs-quote__text {
  font-size: var(--hs-text-h3);
}

.hs-quote--pull {
  max-inline-size: none;
  padding-block: var(--hs-space-5);
  border-block-start: var(--hs-rule-height) solid var(--hs-ctx-heading, var(--hs-navy));
  border-block-end: 1px solid var(--hs-ctx-line, var(--hs-line));
}

.hs-quote--pull::before {
  display: none;
}

/* Reset the prose blockquote bar and indent; the rules above set the quote apart. */
.hs-quote--pull .hs-quote__text {
  padding: 0;
  font-size: clamp(1.5rem, 1.6vw + 1.1rem, 2.125rem);
  line-height: 1.3;
  box-shadow: none;
}

.hs-prose > .hs-quote--pull {
  margin-block: var(--hs-space-7);
}

/* ---- components/stat.css ---- */
/*
 * Stat: a checkable figure with its label ("$1M+ given to nonprofits").
 * Single figure in a band: eyebrow, .hs-stat__figure, then the band's h2 says what the figure means.
 * Several figures: <dl class="hs-stats"> with one .hs-stat per figure (label in <dt>, figure in <dd>).
 * Figure: Didot 700, 48px to 64px, as the homepage trust figures. Didot LT Std draws lining figures;
 * lining-nums asks the fallbacks (Hoefler Text, Garamond), which default to old-style, for the same.
 * Colour follows the ground: white on navy (12.4:1 on flat navy), navy on light (12.4:1).
 * The figure is never gold: on navy the eyebrow is already the gold element.
 * Every figure needs a source in site facts before it ships.
 */

.hs-stat__figure {
  display: block;
  margin: 0 0 var(--hs-space-3);
  font-family: var(--hs-font-display);
  font-size: clamp(3rem, 2.5vw + 2.25rem, 4rem);
  font-weight: var(--hs-weight-bold);
  font-variant-numeric: lining-nums;
  line-height: 1;
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hs-space-6);
  margin: 0;
}

@media (min-width: 48rem) {
  .hs-stats {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }
}

/* The <dt> comes first in the source, so a screen reader hears the label; the figure shows on top. */
.hs-stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
}

.hs-stat .hs-stat__figure {
  margin: 0 0 var(--hs-space-2);
}

.hs-stat__label {
  max-inline-size: 24ch;
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

/* ---- components/steps.css ---- */
/*
 * Steps: a numbered procedure where order matters ("How to apply"). Markup: <ol class="hs-steps">.
 * Each item: an optional h3 .hs-steps__title and a .hs-steps__text. The number is a CSS counter in a 40px navy ring.
 * Numerals are Mukta, as on the certificate gate and the ring size tool: a numeral in a small ring reads
 * better in the body face, and the Didot fallbacks (Hoefler Text, Garamond) draw old-style figures.
 * Layout: a list with the marker on the left; from 48rem, columns with the marker on top and a hairline
 * that runs to the next step. Default three columns; --4 gives four from 62rem.
 * --list: always the vertical list, for short one-line steps (certificate download).
 * Navy ring and numeral on light (12.4:1); white on navy.
 */

.hs-steps {
  --hs-steps-mark: var(--hs-control-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hs-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: hs-step;
}

.hs-steps__item {
  position: relative;
  display: grid;
  grid-template-columns: var(--hs-steps-mark) minmax(0, 1fr);
  column-gap: var(--hs-space-4);
  align-content: start;
  counter-increment: hs-step;
}

.hs-steps__item::before {
  content: counter(hs-step);
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--hs-steps-mark);
  block-size: var(--hs-steps-mark);
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--hs-ctx-heading, var(--hs-navy));
  border: 1.5px solid currentColor;
  border-radius: var(--hs-radius-round);
}

/* Didot h3, as a card title: a step is a short heading, not a label. */
.hs-steps__title {
  align-self: center;
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-h3);
  font-weight: var(--hs-weight-bold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-steps__text {
  grid-column: 2;
  max-inline-size: var(--hs-measure);
  margin: var(--hs-space-2) 0 0;
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

/* A step with no title: the text sits on the marker's centre line. */
.hs-steps__item > .hs-steps__text:first-child {
  align-self: center;
  margin: 0;
  color: var(--hs-ctx-text, var(--hs-ink));
}

@media (min-width: 48rem) {
  .hs-steps:not(.hs-steps--list) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hs-space-6);
  }

  .hs-steps:not(.hs-steps--list) .hs-steps__item {
    grid-template-columns: minmax(0, 1fr);
  }

  .hs-steps:not(.hs-steps--list) .hs-steps__item::before {
    grid-row: auto;
    margin-block-end: var(--hs-space-4);
  }

  .hs-steps:not(.hs-steps--list) .hs-steps__text {
    grid-column: auto;
  }

  /* The rail from this marker towards the next one. It is a sequence mark, not a band separator. */
  .hs-steps:not(.hs-steps--list) .hs-steps__item:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: calc(var(--hs-steps-mark) / 2);
    inset-inline: calc(var(--hs-steps-mark) + var(--hs-space-3)) 0;
    block-size: 1px;
    background: var(--hs-ctx-line, var(--hs-line-strong));
  }
}

@media (min-width: 62rem) {
  .hs-steps--4:not(.hs-steps--list) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --4 between 48rem and 62rem: two rows of two, so the rail after step 2 would point at nothing. */
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .hs-steps--4:not(.hs-steps--list) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hs-steps--4 .hs-steps__item:nth-child(2n)::after {
    content: none;
  }
}

/* ---- components/qa.css ---- */
/*
 * Questions and answers (FAQ). Block name hs-qa: hs_pages already uses .hs-faq for the /faqs page.
 * List (default): every answer is open. A question is an h3 in Mukta 600 (ink 11.3:1); a hairline separates items.
 * --accordion: <details>/<summary>. The answer stays in the HTML, so search engines and Ctrl+F still find it.
 * Put the question text straight in <summary>: a heading inside it loses its role in some screen readers.
 * Answers are body text: ink, 52ch measure. Links inside answers take .hs-prose (add it to .hs-qa__answer).
 */

.hs-qa {
  display: grid;
  max-inline-size: var(--hs-measure-lead);
}

.hs-qa__question {
  margin: 0;
  font-family: var(--hs-font-body);
  font-size: var(--hs-text-question);
  font-weight: var(--hs-weight-semibold);
  line-height: 1.3;
  color: var(--hs-ctx-text, var(--hs-ink));
}

.hs-qa__answer {
  max-inline-size: var(--hs-measure);
  margin-block-start: var(--hs-space-2);
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-text, var(--hs-ink));
}

.hs-qa__answer > * + * {
  margin-block-start: var(--hs-space-3);
}

/* List: the hairline sits above every item but the first. */
.hs-qa:not(.hs-qa--accordion) .hs-qa__item + .hs-qa__item {
  margin-block-start: var(--hs-space-5);
  padding-block-start: var(--hs-space-5);
  box-shadow: inset 0 1px 0 var(--hs-ctx-line, var(--hs-line));
}

/* Accordion: a hairline above and below every item, so the first and last close the set. */
.hs-qa--accordion .hs-qa__item {
  box-shadow: inset 0 -1px 0 var(--hs-ctx-line, var(--hs-line));
}

.hs-qa--accordion .hs-qa__item:first-child {
  box-shadow:
    inset 0 1px 0 var(--hs-ctx-line, var(--hs-line)),
    inset 0 -1px 0 var(--hs-ctx-line, var(--hs-line));
}

.hs-qa--accordion .hs-qa__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hs-space-4);
  min-block-size: var(--hs-button-h);
  padding-block: var(--hs-space-3);
  font-size: var(--hs-text-lead);
  list-style: none;
  cursor: pointer;
  transition: color var(--hs-transition);
}

.hs-qa--accordion .hs-qa__question::-webkit-details-marker {
  display: none;
}

.hs-qa--accordion .hs-qa__question:hover {
  color: var(--hs-ctx-heading, var(--hs-navy));
}

/* Chevron drawn from two borders; it turns up when the item is open. */
.hs-qa--accordion .hs-qa__question::after {
  content: "";
  flex: none;
  inline-size: 0.6rem;
  block-size: 0.6rem;
  margin-inline-end: var(--hs-space-1);
  border-block-end: 2px solid var(--hs-ctx-heading, var(--hs-navy));
  border-inline-end: 2px solid var(--hs-ctx-heading, var(--hs-navy));
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--hs-transition);
}

.hs-qa--accordion .hs-qa__item[open] > .hs-qa__question::after {
  transform: translateY(25%) rotate(-135deg);
}

/* The base focus ring would sit under the item hairlines; the offset goes inwards instead. */
.hs-qa--accordion .hs-qa__question:focus-visible {
  outline-offset: calc(-1 * var(--hs-focus-width));
}

.hs-qa--accordion .hs-qa__answer {
  margin-block-start: 0;
  padding-block-end: var(--hs-space-5);
}

@media (prefers-reduced-motion: reduce) {
  .hs-qa--accordion .hs-qa__question,
  .hs-qa--accordion .hs-qa__question::after {
    transition: none;
  }
}

/* ---- components/anchor-nav.css ---- */
/*
 * Anchor nav: "On this page" links to the bands below. It sits directly under the page head, never inside it.
 * Markup: <nav class="hs-anchor-nav" aria-labelledby> with a visible label and a list of in-page links.
 * Links: navy semibold (12.4:1) with a 1px line-strong underline that turns navy on hover.
 * No action gold: a row of six gold underlines breaks "one gold element per viewport", and gold is for the action.
 * Not chips: chips filter a list (round 2b); these links scroll the page.
 * Each target band needs scroll-margin-top (header clearance plus 16px) in the page CSS.
 */

.hs-anchor-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--hs-space-1) var(--hs-space-5);
}

.hs-anchor-nav__label {
  margin: 0;
  font-size: var(--hs-text-eyebrow);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  letter-spacing: var(--hs-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hs-ctx-eyebrow, var(--hs-slate));
}

.hs-anchor-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--hs-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 40px tap target: 24px line plus 8px above and below. */
.hs-anchor-nav__link {
  display: inline-block;
  padding-block: var(--hs-space-2);
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-link, var(--hs-navy));
  text-decoration-line: underline;
  text-decoration-color: var(--hs-ctx-line, var(--hs-line-strong));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--hs-transition);
}

.hs-anchor-nav__link:hover {
  text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .hs-anchor-nav__link {
    transition: none;
  }
}

/* ---- components/cta-band.css ---- */
/*
 * CTA band: the closing band of a page. It names the product and offers one action.
 * Compose it on a navy band: class="hs-band hs-band--navy hs-cta-band". Centred.
 * Content: eyebrow, h2 (no rule: the gold button is the band's gold accent, as in the hero), lead,
 * one gold button plus at most one text link, then an optional fine-print note.
 * Text on the navy ground: white heading, body rgba(255,255,255,0.86) 6.4:1 at the lightest corner.
 */

.hs-cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hs-cta-band .hs-heading {
  max-inline-size: 24ch;
}

.hs-cta-band .hs-lead {
  margin-inline: auto;
  max-inline-size: var(--hs-measure);
}

.hs-cta-band__actions {
  align-self: stretch;
  margin-block-start: var(--hs-space-6);
}

@media (min-width: 36rem) {
  .hs-cta-band__actions {
    align-self: center;
    justify-content: center;
  }
}

.hs-cta-band__note {
  max-inline-size: var(--hs-measure);
  margin: var(--hs-space-5) 0 0;
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

/* ---- components/rating.css ---- */
/*
 * Rating proof card: one outside rating, with its source and its date. Round 3, built: A "Figure first".
 * Compose it on a card: class="hs-card hs-rating". Put two to four in .hs-card-grid (add --3 for three).
 * Content, top to bottom: source (eyebrow), score (Didot figure plus its scale), basis, "as of" date, then the link to the source.
 * Every figure comes from site facts and links to the live vendor profile. Never redraw a vendor mark; no AggregateRating schema.
 * Figure: Didot 700, 40px to 48px (smaller than .hs-stat__figure, which is sized for a band), navy 12.4:1, lining figures.
 * Scale ("out of 5"): Mukta 600 16px slate 6.2:1. Basis: 16px ink 13.0:1. Date: 14px slate.
 * The link sits at the foot of the card (margin-top: auto), so links line up across a row of cards.
 * The link is quiet (navy 600, 1px line-strong underline, navy on hover): a row of cards with gold underlines breaks
 * "one gold element per viewport".
 * Must load after card.css: same specificity, so source order sets the gap.
 */

.hs-rating {
  gap: var(--hs-space-1);
}

.hs-rating__source {
  margin: 0 0 var(--hs-space-2);
  font-size: var(--hs-text-eyebrow);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  letter-spacing: var(--hs-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hs-ctx-eyebrow, var(--hs-slate));
}

.hs-rating__score {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--hs-space-2);
  margin: 0;
}

.hs-rating__figure {
  font-family: var(--hs-font-display);
  font-size: clamp(2.5rem, 1vw + 2.1rem, 3rem);
  font-weight: var(--hs-weight-bold);
  font-variant-numeric: lining-nums;
  line-height: 1;
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-rating__scale {
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

.hs-rating__basis {
  margin: var(--hs-space-2) 0 0;
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-text, var(--hs-ink));
}

.hs-rating__date {
  margin: 0;
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-body);
  font-variant-numeric: tabular-nums;
  color: var(--hs-ctx-muted, var(--hs-slate));
}

.hs-rating__foot {
  margin: auto 0 0;
  padding-block-start: var(--hs-space-4);
}

.hs-rating__link {
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-ctx-link, var(--hs-navy));
  text-decoration-line: underline;
  text-decoration-color: var(--hs-ctx-line, var(--hs-line-strong));
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--hs-transition);
}

.hs-rating__link:hover {
  text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .hs-rating__link {
    transition: none;
  }
}

/* ---- components/plan-compare.css ---- */
/*
 * Plan compare: two memberships side by side. Round 3, built: A "Twin cards".
 * Markup: <ul class="hs-plan-compare"> with two <li class="hs-card hs-plan">. The free plan comes first.
 * Each plan: optional card tag, name (Didot h3 step), price line, one sentence, a list of what it includes, then one route.
 * Visitor copy: "Membership" ($0 to join, route "Start Free Membership") and "Professional Track™" (tag "Optional upgrade").
 * Member copy: never "free membership" or "paid membership"; the second card is "Active membership", route "Activate your membership".
 * Price: the amount in Didot 700 at the h2 step (navy 12.4:1), the words around it in 16px slate (6.2:1). Prices from site facts only;
 * acquisition pages (homepage, landing, join) carry no prices: drop the price line there.
 * List: a navy tick drawn by CSS before each item; items in ink 13.0:1. Only what the plan includes: no crosses, no dashes.
 * The route sits at the foot (margin-top: auto), so the two routes line up. One card gets the gold button at most; the other a text link.
 * Equal weight on purpose: the free plan is the page's primary route, and the upgrade is optional. Two columns from 48rem.
 * Must load after card.css: same specificity, so source order sets the gap.
 */

.hs-plan-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hs-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .hs-plan-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--hs-space-5);
  }
}

.hs-plan {
  gap: var(--hs-space-3);
}

.hs-plan > .hs-card__tag {
  margin-block: 0 calc(-1 * var(--hs-space-1));
}

.hs-plan__name {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-h3);
  font-weight: var(--hs-weight-bold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-plan__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--hs-space-2);
  margin: 0;
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

.hs-plan__amount {
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-h2);
  font-weight: var(--hs-weight-bold);
  font-variant-numeric: lining-nums;
  line-height: var(--hs-leading-tight);
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-plan__text {
  margin: 0;
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

.hs-plan__list {
  display: grid;
  gap: var(--hs-space-2);
  margin: var(--hs-space-1) 0 0;
  padding: var(--hs-space-4) 0 0;
  list-style: none;
  font-size: var(--hs-text-md);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-text, var(--hs-ink));
  box-shadow: inset 0 1px 0 var(--hs-ctx-line, var(--hs-line));
}

/* In a basic card the list follows the title like card text does: no rule, no inset. Only a plan card draws the rule. */
.hs-card:not(.hs-plan) > .hs-plan__list {
  margin-block-start: 0;
  padding-block-start: 0;
  box-shadow: none;
}

.hs-plan__item {
  position: relative;
  padding-inline-start: var(--hs-space-6);
}

/* Tick: an L of two 2px borders turned 45 degrees, 6 x 11px, centred on the first line. */
.hs-plan__item::before {
  content: "";
  position: absolute;
  inset-block-start: 0.3em;
  inset-inline-start: var(--hs-space-2);
  inline-size: 6px;
  block-size: 11px;
  border-block-end: 2px solid var(--hs-ctx-heading, var(--hs-navy));
  border-inline-end: 2px solid var(--hs-ctx-heading, var(--hs-navy));
  transform: rotate(45deg);
}

.hs-plan__foot {
  margin: auto 0 0;
  padding-block-start: var(--hs-space-3);
}

.hs-plan__foot > .hs-button {
  inline-size: 100%;
}

@media (min-width: 36rem) {
  .hs-plan__foot > .hs-button {
    inline-size: auto;
  }
}

/* ---- components/leader.css ---- */
/*
 * Leader profile: one person in the society's leadership (/society-leadership). Round 3, built: A "Portrait beside the bio".
 * Markup: <article class="hs-leader"> with the photo, then __body: name (h2 or h3 by the outline), role, bio (.hs-prose), routes.
 * Photo: a 4:5 portrait, 8px radius, object-fit cover tuned to the face. No circle: house style keeps people photos rectangular.
 *   Phone: on top, at most 16rem wide. From 48rem: a 15rem column beside the text; 18rem from 62rem.
 *   alt names the person (the leader’s full name): the photo is the first thing in the article.
 * Name: Didot 700 at the h2 step, navy 12.4:1. Role: Mukta 600 16px slate 6.2:1, under the name. No honor-gold rule:
 *   honor gold marks a member's recognition, not a job title.
 * Bio: prose at 17px/1.7, 52ch. Routes: a .hs-link-list or one .hs-link.
 * --no-photo: no image and no media column. No initials monogram: a placeholder in the photo's place reads as missing content.
 */

.hs-leader {
  display: grid;
  gap: var(--hs-space-5);
  align-items: start;
}

.hs-leader__photo {
  display: block;
  inline-size: 100%;
  max-inline-size: 16rem;
  block-size: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 25%;
  background-color: var(--hs-soft);
  border-radius: var(--hs-radius-md);
}

.hs-leader__body {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-4);
  min-inline-size: 0;
}

.hs-leader__head {
  display: flex;
  flex-direction: column;
  gap: var(--hs-space-1);
}

.hs-leader__name {
  margin: 0;
  font-family: var(--hs-font-display);
  font-size: var(--hs-text-h2);
  font-weight: var(--hs-weight-bold);
  line-height: 1.12;
  color: var(--hs-ctx-heading, var(--hs-navy));
}

.hs-leader__role {
  margin: 0;
  font-size: var(--hs-text-md);
  font-weight: var(--hs-weight-semibold);
  line-height: var(--hs-leading-snug);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

@media (min-width: 48rem) {
  .hs-leader {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--hs-space-6);
  }

  .hs-leader__photo {
    max-inline-size: none;
  }
}

@media (min-width: 62rem) {
  .hs-leader {
    grid-template-columns: 18rem minmax(0, 1fr);
    gap: var(--hs-space-7);
  }
}

/* No photo (/society-leadership has no portrait today): no media column. The body takes the full width
   at every size and the prose keeps its 52ch measure. Last in the file: it must override both grid steps. */
@media (min-width: 48rem) {
  .hs-leader--no-photo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- components/video.css ---- */
/*
 * Video facade: a poster with a play button that loads the player only on click. Round 3, built: A "Centred disc".
 * Markup: <figure class="hs-video"> > <div class="hs-video__media"> > <a class="hs-video__link" href="https://www.youtube.com/watch?v=ID">
 *   with the poster <img>, an empty .hs-video__play, and a visually hidden "Play video: <title>" label; then an optional <figcaption>.
 * No JS: the link opens the video on YouTube. With video.js: a click swaps the link for a youtube-nocookie iframe that starts at once.
 *   Nothing loads from YouTube before the click. Host the poster on our server: an i.ytimg.com poster sends the visitor to Google.
 * Frame: 16:9, 8px radius. Play disc: 64px, navy with a white 2px ring and a white triangle, so it clears 3:1 on a dark or a light poster.
 *   Hover and focus: the disc turns action gold with a navy-deep triangle (the act-here colour). The poster never zooms.
 * Caption: 14px slate under the frame; the meta (source, length) after it.
 * Reduced motion: no transition. The player starts only after a click, so nothing moves on its own.
 */

.hs-video {
  margin: 0;
}

.hs-video__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background-color: var(--hs-navy);
  border-radius: var(--hs-radius-md);
}

.hs-video__link,
.hs-video__frame {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  border-radius: var(--hs-radius-md);
}

.hs-video__link {
  overflow: clip;
  color: var(--hs-white);
}

.hs-video__poster {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.hs-video__play {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: var(--hs-space-8);
  block-size: var(--hs-space-8);
  background-color: var(--hs-navy);
  border-radius: var(--hs-radius-round);
  box-shadow: 0 0 0 2px var(--hs-white), var(--hs-shadow-dialog);
  transform: translate(-50%, -50%);
  transition: background-color var(--hs-transition);
}

/* Triangle: 20 x 24px, nudged 2px right so it looks centred. */
.hs-video__play::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 20px;
  block-size: 24px;
  background-color: var(--hs-white);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transform: translate(calc(-50% + 2px), -50%);
  transition: background-color var(--hs-transition);
}

.hs-video__link:hover .hs-video__play,
.hs-video__link:focus-visible .hs-video__play {
  background-color: var(--hs-action-gold);
}

.hs-video__link:hover .hs-video__play::before,
.hs-video__link:focus-visible .hs-video__play::before {
  background-color: var(--hs-navy-deep);
}

.hs-video__caption {
  margin-block-start: var(--hs-space-2);
  font-size: var(--hs-text-sm);
  line-height: var(--hs-leading-body);
  color: var(--hs-ctx-muted, var(--hs-slate));
}

.hs-video__caption-title {
  font-weight: var(--hs-weight-semibold);
  color: var(--hs-ctx-text, var(--hs-ink));
}

.hs-video__meta::before {
  content: "\00B7" / "";
  margin-inline: var(--hs-space-2);
}

/* Video grid: one column, two from 48rem. */
.hs-video-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hs-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .hs-video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
  .hs-video-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .hs-video__play,
  .hs-video__play::before {
    transition: none;
  }
}

/* ---- components/utilities.css ---- */
/*
 * Utilities: single-purpose classes that sit on any element.
 * Loaded last, so a utility beats a component rule of equal specificity by source order, with no !important.
 * .hs-hide-below-md hides an element below md (48rem), for a feature that does not work on phones.
 * It uses a max-width query, the one small-screen exception, so the element keeps its own display from md up.
 */

@media (max-width: 47.99rem) {
  .hs-hide-below-md {
    display: none;
  }
}