/* Edition system — carries the homepage's charcoal masthead, edition faces,
   and folio rhythm across every public content page so the whole surface reads
   as one book. Loaded AFTER the page's base sheet (curriculum.css / editorial.css)
   and scoped under body.edition. Two page flavours:
   .ed-curriculum (Library, Principles, Practices — .page has no side padding) and
   .ed-editorial (About, FAQ, Contact, Privacy, Terms — .page is padded 22px, so
   the masthead breaks out of it). */

:root {
  --serif-ed: "EB Garamond", "Libre Baskerville", Georgia, "Times New Roman", serif;
  --greek-ed: "Gentium Book Plus", "EB Garamond", Georgia, serif;
}

/* One line adopts the edition serif for every heading and paragraph that
   already reads var(--serif) in the base sheet. */
body.edition {
  --serif: var(--serif-ed);
}

/* ---- charcoal masthead ---- */
body.edition header,
body.edition .top {
  height: auto;
  min-height: 64px;
  gap: clamp(16px, 3vw, 40px);
  background: var(--charcoal);
  color: #e9e2d4;
  border-bottom: 0;
}

body.edition .logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #e9e2d4;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

body.edition .ed-seal {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 33%;
  flex: none;
  filter: grayscale(1) contrast(1.06) brightness(1.05);
  box-shadow: inset 0 0 0 1px rgba(184, 168, 120, 0.3);
}

body.edition header .nav,
body.edition .top .nav {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}

body.edition header .nav a,
body.edition .top .nav a {
  color: #b6ac98;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}

body.edition header .nav a:hover,
body.edition .top .nav a:hover {
  color: #efe8d8;
  border-bottom-color: var(--bronze-soft);
  text-decoration: none;
}

/* Match components.css's own (0,4,2) aria-current selector and win on load
   order: keep the current-page link light on charcoal, and drop the bronze
   left-margin marker that reads as a stray line on the dark bar. */
body.edition header .nav a:not(.logo)[aria-current="page"],
body.edition .top .nav a:not(.logo)[aria-current="page"] {
  color: #efe8d8;
  font-weight: 500;
}

body.edition header .nav a:not(.logo)[aria-current="page"]::before,
body.edition .top .nav a:not(.logo)[aria-current="page"]::before {
  display: none;
}

/* The current page is a non-link marker (a <span aria-current>), not a
   self-referential link that reloads the page the visitor is already on. */
body.edition header .nav [aria-current="page"],
body.edition .top .nav [aria-current="page"] {
  color: #efe8d8;
  font-weight: 500;
  cursor: default;
  border-bottom: 0;
}

body.edition header .nav a:focus-visible,
body.edition .top .nav a:focus-visible {
  outline: 3px solid var(--threshold-focus);
  outline-offset: 3px;
  box-shadow: none;
}

/* About's .page carries 22px side padding; break the bar out of it so the
   charcoal spans the page column while its content stays aligned. */
body.ed-editorial header,
body.ed-editorial .top {
  margin-inline: -22px;
  padding-inline: 22px;
}

/* ---- folio eyebrow ---- */
body.edition .eyebrow {
  border: 0;
  padding: 0;
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The curriculum intro read as a skinny left column beside a full-width card
   grid; give it a fuller measure so the lede and the grid feel balanced. */
body.ed-curriculum .intro {
  max-width: 52em;
}

/* ---- edition reading rhythm ---- */
/* EB Garamond has a smaller x-height than Baskerville; nudge body copy up a
   touch so the measure reads at the same optical size. */
body.edition .lead,
body.edition .hero p {
  font-size: 19px;
  line-height: 1.7;
}

body.edition .section p,
body.edition .qa p,
body.edition .note {
  font-size: 16.5px;
}

body.edition .hero h1 {
  letter-spacing: -0.005em;
  text-wrap: balance;
}

/* Greek, wherever it appears in the reading, is set in the polytonic face. */
body.edition [lang="grc"],
body.edition .grc {
  font-family: var(--greek-ed);
}

@media (max-width: 640px) {
  /* Let the masthead grow and wrap the nav onto its own full-width row
     instead of clipping it against a fixed height (the Library nav void). */
  body.edition header,
  body.edition .top {
    flex-wrap: wrap;
    height: auto;
    row-gap: 10px;
  }

  body.edition header .nav,
  body.edition .top .nav {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 8px 18px;
  }

  body.ed-editorial header,
  body.ed-editorial .top {
    margin-inline: -22px;
    padding-inline: 22px;
    row-gap: 10px;
  }
}