@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-block: 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-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);
}
.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);
}

/* ================================================================ 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); }