@charset "UTF-8";
/*
  Homepage — a restrained, monumental navy & gold sequence:

    hero (navy) → announcements (white, navy panel) → latest (white)
    → his words (navy) → books (white) → archive photograph (sunken)
    → voices (navy) → colophon (white)

  Every class is hx-prefixed so nothing collides with components.css.
  Type is Playfair Display at real display sizes; Inter carries the
  small caps and metadata. Gold is used at full confidence — rules,
  numerals, sources — never as a whisper.
*/

/* ================================================================== HERO */
.hx-hero {
  background:
    radial-gradient(120% 90% at 85% 10%, var(--navy-700) 0%, transparent 55%),
    var(--navy-950);
  color: var(--white);
  padding-top: var(--sp-fluid-xl);
  padding-bottom: var(--sp-fluid-2xl);
  overflow: hidden;
}
.hx-hero-inner {
  display: grid;
  /* Equal columns — the portrait's real ceiling is its grid track, not its
     own max-width, so growing the image means widening the right column. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-fluid-lg);
}
.hx-hero-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: clamp(var(--sp-sm), 2.4vw, var(--sp-lg));
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.hx-hero-eyebrow::before {
  content: '';
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: var(--gold-600);
  flex: none;
}
.hx-dot { color: var(--gold-600); }
.hx-hero-name {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  /* 5.625rem = 90px at the default root. rem, not px, so the A-/A+ control
     still scales it. */
  font-size: var(--fs-5xl);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  color: var(--white);
  margin: 0 0 clamp(var(--sp-sm), 2.4vw, var(--sp-lg));
  text-wrap: balance;
}
.hx-hero-name span { font-style: italic; font-weight: var(--fw-regular); color: var(--gold-300); }
/* Hidden by default — the years live inline in .hx-hero-eyebrow on wide
   screens. Swapped in directly under "Metropolitan of Pergamon" instead
   once the nav itself switches to the hamburger menu (still above the
   name, not below it); see the 1200px media query below. */
.hx-hero-years-below {
  display: none;
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-ultra);
  text-transform: uppercase;
  color: var(--gold-400);
  margin: 0 0 clamp(var(--sp-sm), 2.4vw, var(--sp-lg));
}
.hx-hero-standfirst {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--grey-300);
  max-width: 34rem;
  margin-bottom: clamp(var(--sp-lg), 3vw, var(--sp-xl));
}
.hx-hero-actions { display: flex; gap: var(--sp-sm); flex-wrap: wrap; }

/* Ghost button for navy grounds — quiet white hairline, gold on hover. */
.hx-btn-ghost {
  border-color: rgba(255, 255, 255, .35);
  color: var(--white);
}
.hx-btn-ghost:hover { border-color: var(--accent); background: var(--accent); color: var(--white); }

.hx-hero-portrait {
  margin: 0;
  justify-self: end;
  max-width: clamp(340px, 36vw, 580px);
  width: 100%;
  position: relative;
}
/* The width/height HTML attributes on homepage images exist only to reserve
   layout space before load (no CLS) — every scaled image needs height: auto
   so CSS keeps the intrinsic ratio instead of the attribute height. */
.hx-hero-portrait img {
  width: 100%;
  height: auto;
  border: 1px solid var(--gold-700);
  outline: 1px solid rgba(238, 148, 93, .35);
  outline-offset: 10px;
  box-shadow: var(--shadow-lg);
}
/* Out of flow so the grid's vertical centering measures the image alone —
   with the caption in flow, the figure's midpoint sits below the image's
   midpoint and the text column reads as pushed down. */
.hx-hero-portrait figcaption {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--sp-md);
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--grey-500);
  text-align: center;
}

@media (max-width: 860px) {
  /* .hx-hero's padding-block sets the same --sp-fluid-2xl (80px floor) top
     and bottom. That's correct when the portrait sits beside the text, but
     once it stacks first (order: -1, right below) that top value becomes
     dead air between the header and the photo rather than breathing room
     around a two-column layout — owner-reported, 2026-08-01: "padding je tu
     bespotrebno veliki". Halved on top only; bottom keeps the original
     fluid value since it still separates the section from whatever comes
     next. */
  .hx-hero { padding-top: var(--sp-xl); }
  .hx-hero-inner { grid-template-columns: 1fr; text-align: center; }
  .hx-hero-eyebrow { justify-content: center; }
  .hx-hero-eyebrow::before { display: none; }
  .hx-hero-standfirst { margin-inline: auto; }
  .hx-hero-actions { justify-content: center; }
  .hx-hero-portrait { justify-self: center; max-width: 320px; order: -1; }
  /* The eyebrow right below already names him — a caption between the
     portrait and the eyebrow would say the same thing twice in a row. */
  .hx-hero-portrait figcaption { display: none; }
}

/* Below 1200px the hero-text column is squeezed by the still-two-column
   grid (nothing stacks it full-width until the 860px breakpoint above), so
   "Metropolitan of Pergamon · 1931–2023" no longer fits one line and wraps
   mid-phrase (e.g. "1931–" / "2023") with the dot stranded between them —
   this is visible well before phone widths, on any "reduced" desktop/tablet
   window. 1200px is deliberately the same breakpoint at which the header
   nav itself becomes the hamburger menu (see components.css) — the moment
   the nav commits to its narrow-screen form, the hero commits to its own:
   the years drop onto their own line, still directly under "Metropolitan
   of Pergamon" (not under the name below it), rather than trying to keep
   fitting them into an ever-narrower single line. */
@media (max-width: 1200px) {
  .hx-hero-eyebrow-years,
  .hx-hero-eyebrow .hx-dot { display: none; }
  .hx-hero-eyebrow { margin-bottom: var(--sp-2xs); }
  .hx-hero-years-below { display: block; }
}
/* Between 861-1200px the eyebrow is still left-aligned with its gold rule
   (::before) visible — .hx-hero-years-below's text should start flush with
   "Metropolitan", not with the rule to its left, so it reads as a second
   line of the same label rather than a separate, oddly-indented element.
   Below 861px (the 860px breakpoint above) the rule is hidden and the
   eyebrow centers instead, where no indent is wanted — scoping this to a
   min-width range rather than overriding a lower breakpoint keeps the two
   rules independent instead of fighting over cascade order. */
@media (min-width: 861px) and (max-width: 1200px) {
  .hx-hero-years-below { margin-left: calc(var(--sp-fluid-md) + var(--sp-sm)); }
}

/* ========================================================= ANNOUNCEMENTS */
.hx-announce { background: var(--bg); padding-block: var(--sp-fluid-xl) 0; }
.hx-announce-panel {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-fluid-md);
  background: var(--navy-900);
  border: 1px solid var(--navy-700);
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: var(--sp-fluid-md) var(--sp-fluid-md);
  min-height: 240px;
  transition: var(--transition);
}
.hx-announce-panel + .hx-announce-panel { margin-top: var(--sp-fluid-2xs); }
.hx-announce-panel:hover { border-color: var(--gold-700); box-shadow: var(--shadow-lg); }
.hx-announce-media {
  position: absolute;
  inset: 0 0 0 45%;
  background-size: cover;
  background-position: center;
  filter: grayscale(35%);
  opacity: .85;
}
.hx-announce-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--navy-900) 46%, rgba(24, 7, 58, .82) 62%, rgba(24, 7, 58, .35) 100%);
}
.hx-announce-date,
.hx-announce-body { position: relative; }
.hx-announce-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3xs);
  padding-right: var(--sp-fluid-md);
  border-right: 1px solid rgba(238, 148, 93, .45);
}
.hx-announce-day {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5vw, 4.2rem);
  font-weight: var(--fw-display);
  line-height: var(--lh-none);
  color: var(--gold-400);
  white-space: nowrap;
}
.hx-announce-month {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--grey-300);
  white-space: nowrap;
}
.hx-announce-body .eyebrow { color: var(--gold-400); margin-bottom: var(--sp-2xs); }
.hx-announce-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--white);
  margin: 0 0 var(--sp-2xs);
  max-width: 34ch;
  text-wrap: balance;
}
.hx-announce-meta {
  font-size: var(--fs-xs);
  color: var(--grey-300);
  margin: 0 0 var(--sp-sm);
  max-width: 52ch;
}
.hx-announce-cta {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gold-400);
}
.hx-announce-panel:hover .hx-announce-cta { color: var(--gold-300); }

@media (max-width: 700px) {
  .hx-announce-panel { grid-template-columns: 1fr; gap: var(--sp-md); }
  .hx-announce-media { inset: 0; opacity: .28; }
  .hx-announce-scrim { background: linear-gradient(180deg, rgba(24, 7, 58, .9), rgba(24, 7, 58, .72)); }
  .hx-announce-date {
    flex-direction: row;
    align-items: baseline;
    gap: var(--sp-xs);
    padding: 0 0 var(--sp-sm);
    border-right: 0;
    border-bottom: 1px solid rgba(238, 148, 93, .45);
  }
}

/* ================================================================ LATEST */
.hx-latest { background: var(--bg); }
.hx-latest-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-sm);
  margin-bottom: var(--sp-fluid-sm);
}
/* Sets its own size for the same reason .hx-books-featured-text h2 does:
   this is a display-size section banner, not a document-outline subheading.
   Both section banners share one size (2.8125rem = 45px at the default root, exactly half the hero),
   so two headings of the same rank on the same page read as the same rank —
   they used to differ, 41.6 against 46.08px, for no reason anyone chose.
   Capped in rem, not px, so the A-/A+ control still scales them. */
.hx-latest-head h2 { margin: var(--sp-3xs) 0 0; font-weight: var(--fw-display); font-size: var(--fs-4xl); }

.hx-quiet-link {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent-strong);
  white-space: nowrap;
}
.hx-quiet-link:hover { color: var(--gold-600); }

.hx-latest-list { border-top: 1px solid var(--border-strong); }
.hx-latest-list li { border-bottom: 1px solid var(--border-color); }
.hx-latest-row {
  display: grid;
  grid-template-columns: clamp(8.5rem, 14vw, 12rem) minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--sp-fluid-2xs);
  padding: clamp(var(--sp-sm), 2vw, var(--sp-md)) var(--sp-3xs);
  color: inherit;
}
.hx-latest-date {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent-strong);
}
.hx-latest-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  color: var(--text-soft);
  transition: color var(--transition);
}
.hx-latest-arrow {
  font-family: var(--font-sans);
  color: var(--grey-300);
  transition: var(--transition);
}
.hx-latest-row:hover .hx-latest-title { color: var(--accent-strong); }
.hx-latest-row:hover .hx-latest-arrow { color: var(--accent); transform: translateX(4px); }

@media (max-width: 640px) {
  .hx-latest-row { grid-template-columns: minmax(0, 1fr) auto; }
  .hx-latest-date { grid-column: 1 / -1; }
}

/* ============================================================= HIS WORDS */
.hx-words {
  background:
    radial-gradient(90% 120% at 50% 0%, var(--navy-800) 0%, transparent 60%),
    var(--navy-950);
  color: var(--white);
  padding-block: var(--sp-fluid-2xl);
}
.hx-words-inner { max-width: var(--container-list); text-align: center; }
.hx-words-eyebrow {
  color: var(--gold-400);
  letter-spacing: var(--ls-ultra);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-sm);
  margin-bottom: clamp(var(--sp-lg), 4vw, var(--sp-2xl));
}
.hx-words-eyebrow::before,
.hx-words-eyebrow::after {
  content: '';
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: var(--gold-700);
}
.hx-words-lead { margin: 0; position: relative; }
.hx-words-lead::before {
  content: '\201C';
  display: block;
  font-family: var(--font-display);
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: .6;
  color: var(--gold-600);
  margin-bottom: clamp(var(--sp-sm), 2.5vw, var(--sp-lg));
}
.hx-words-lead p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-3xl);
  line-height: var(--lh-normal);
  color: var(--white);
  margin: 0 auto clamp(var(--sp-lg), 3vw, var(--sp-xl));
  max-width: 30em;
  text-wrap: balance;
}
.hx-words-lead cite {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3xs);
  font-style: normal;
}
/* The em-dash lives in its own <span> outside the <a>, so the site-wide
   blockquote-link underline lands on the book title only, never the dash. */
.hx-words-lead .hx-words-source {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--gold-400);
}
.hx-words-lead .hx-words-source a { color: inherit; }
.hx-words-lead .hx-words-source a:hover { color: var(--gold-300); }
.hx-words-detail { font-family: var(--font-sans); font-size: var(--fs-2xs); color: var(--grey-500); letter-spacing: var(--ls-wide); }

.hx-words-more {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-fluid-md);
  margin-top: var(--sp-fluid-xl);
  padding-top: var(--sp-fluid-md);
  border-top: 1px solid var(--navy-600);
  text-align: left;
}
.hx-words-small { margin: 0; border-left: 3px solid var(--gold-600); padding-left: var(--sp-fluid-2xs); }
.hx-words-small p {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--grey-100);
  margin: 0 0 var(--sp-sm);
}
.hx-words-small .hx-words-source {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--gold-400);
}
.hx-words-small .hx-words-source a { color: inherit; }
.hx-words-small .hx-words-source a:hover { color: var(--gold-300); }

@media (max-width: 700px) { .hx-words-more { grid-template-columns: 1fr; } }

/* ================================================================= BOOKS */
.hx-books { background: var(--bg); }
.hx-books-featured {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-fluid-lg);
  align-items: center;
  margin-bottom: var(--sp-fluid-xl);
}
.hx-books-featured-cover img {
  width: 100%;
  height: auto;
  max-width: 560px;
  margin-inline: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
/* Same 2.8125rem (45px) cap as .hx-latest-head h2 — see the note there. */
.hx-books-featured-text h2 { font-weight: var(--fw-display); font-size: var(--fs-4xl); margin: var(--sp-2xs) 0 var(--sp-xs); }
.hx-books-byline {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: var(--sp-sm);
}
.hx-books-desc { color: var(--text-muted); max-width: 36rem; margin-bottom: var(--sp-lg); }
.hx-books-actions { display: flex; align-items: center; gap: var(--sp-md); flex-wrap: wrap; }

.hx-books-shelf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border-color);
}
.hx-shelf-card {
  padding: var(--sp-fluid-sm) var(--sp-fluid-xs) var(--sp-fluid-sm);
  border-bottom: 1px solid var(--border-color);
  transition: var(--transition);
}
.hx-shelf-card + .hx-shelf-card { border-left: 1px solid var(--border-color); }
.hx-shelf-card:hover { background: var(--bg-sunken); }
.hx-shelf-card img { width: 100%; height: auto; max-width: 340px; margin: 0 auto var(--sp-md); }
.hx-shelf-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  color: var(--text-soft);
  margin: 0 0 var(--sp-3xs);
  text-align: center;
  transition: color var(--transition);
}
.hx-shelf-card:hover .hx-shelf-title { color: var(--accent-strong); }
.hx-shelf-subtitle {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-align: center;
  margin: 0;
}

/* The exclusive-publisher line closing the Books section. */
.hx-books-publisher {
  margin: var(--sp-fluid-sm) 0 0;
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.hx-books-publisher a { color: var(--accent-strong); font-weight: var(--fw-semibold); }
.hx-books-publisher a:hover { color: var(--gold-600); }

@media (max-width: 900px) {
  .hx-books-featured { grid-template-columns: 1fr; text-align: center; }
  .hx-books-desc { margin-inline: auto; }
  .hx-books-actions { justify-content: center; }
  .hx-books-shelf { grid-template-columns: 1fr; }
  .hx-shelf-card + .hx-shelf-card { border-left: 0; }
}

/* =============================================================== ARCHIVE */
.hx-archive { background: var(--bg-sunken); }
.hx-archive-inner { max-width: var(--container-list); }
.hx-archive-figure { margin: 0; }
.hx-archive-figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-md);
  cursor: zoom-in;
}
.hx-archive-figure figcaption {
  margin-top: var(--sp-md);
  text-align: center;
}
.hx-archive-figure figcaption span {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-faint);
}
/* Smaller and closer to the photo on a phone (owner's request, 2026-08-01):
   this is a secondary archival label, not prose, and at the desktop size it
   was competing for weight with the photo it sits under on a narrow screen.
   480px is this site's documented phone breakpoint (see STYLE.md
   "Tačke prekida").

   The size step alone (--fs-2xs -> --fs-3xs) turned out to read as barely
   changed: both are fluid clamp()s that converge toward their own floor at
   a narrow width, so at 480px the two are only 1px apart (12px -> 11px) --
   correct by the letter of the rule, invisible in practice. Caught
   2026-08-01 by reading the two tokens' actual computed clamp() values, not
   by eyeballing a screenshot. The gap is what carries the visible
   difference here, so it steps down two rungs instead of one -- --sp-xs,
   not --sp-sm -- to make "closer to the photo" the dominant, legible signal
   rather than the font size doing work it structurally can't at this
   width.

   A fixed sub-scale font-size (.625rem) was tried and reverted the same
   day: the owner, testing by narrowing a desktop Firefox window on macOS,
   suspected the real cause was never seeing 480px in the first place --
   Firefox's own minimum window width (~450px in recent versions, per
   Mozilla support docs) sits close enough to this breakpoint that whether
   it's ever crossed depends on the exact browser build and how much chrome
   (bookmarks bar, etc.) is in play, not on this CSS. A phone's own viewport
   is well under 480px regardless of any browser minimum, so it settles the
   question cleanly where a resized desktop window can't. Kept inside the
   scale (--fs-3xs) rather than reopening the sub-floor exception until
   that's confirmed on a real phone against production. */
@media (max-width: 480px) {
  .hx-archive-figure figcaption { margin-top: var(--sp-xs); }
  .hx-archive-figure figcaption span { font-size: var(--fs-3xs); }
}

/* ================================================================ VOICES */
.hx-voices { background: var(--navy-950); color: var(--white); padding-block: var(--sp-fluid-2xl); }
.hx-voices-inner { max-width: var(--container-list); }
.hx-voices-eyebrow {
  color: var(--gold-400);
  letter-spacing: var(--ls-ultra);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  margin-bottom: clamp(var(--sp-lg), 4vw, var(--sp-2xl));
}
.hx-voices-eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--navy-600); }
.hx-voices-lead { margin: 0 0 var(--sp-fluid-lg); }
.hx-voices-lead blockquote {
  margin: 0 0 var(--sp-md);
  border: 0;
  padding: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-3xl);
  line-height: var(--lh-normal);
  color: var(--white);
  max-width: 26em;
  text-wrap: balance;
}
.hx-voices-lead blockquote::before { content: '\201C'; color: var(--gold-500); }
.hx-voices-lead blockquote::after { content: '\201D'; color: var(--gold-500); }
.hx-voices-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-fluid-md) var(--sp-fluid-md);
}
.hx-voice { margin: 0; border-left: 3px solid var(--gold-600); padding-left: var(--sp-fluid-2xs); }
.hx-voice blockquote {
  margin: 0 0 var(--sp-sm);
  border: 0;
  padding: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--grey-100);
}
.hx-voice figcaption,
.hx-voices-lead figcaption { display: flex; flex-direction: column; gap: var(--sp-4xs); }
.hx-voice-author {
  font-family: var(--font-sans);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gold-400);
}
.hx-voice-role { font-family: var(--font-sans); font-size: var(--fs-2xs); color: var(--grey-500); }
.hx-voices-cta { margin-top: var(--sp-fluid-lg); }

@media (max-width: 700px) { .hx-voices-grid { grid-template-columns: 1fr; } }

/* ============================================================== COLOPHON */
.hx-colophon { background: var(--bg); }
.hx-colophon-inner {
  max-width: var(--container-narrow);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-md);
}
.hx-colophon-signature { height: clamp(62px, 6vw, 76px); width: auto; }
.hx-colophon-text { color: var(--text-muted); max-width: 40rem; margin: 0; }
/* The Foundation's name carries the visual emphasis in the colophon line —
   the preceding "The" stays plain (it's grammar, not part of the mark). */
.hx-foundation-name {
  font-weight: var(--fw-semibold);
  color: var(--accent-strong);
  letter-spacing: var(--ls-slight);
}
.hx-colophon-actions { display: flex; gap: var(--sp-sm); flex-wrap: wrap; justify-content: center; }
.hx-colophon .share-bar { margin-top: var(--sp-md); }