/* hub-masthead.css — single source of truth for the masthead on every hub page.
   Linked by every content page so the top reads identically whatever the reader opens.
   All vars are scoped to .masthead so this file can never clobber a page's own CSS.
   Canonical reference: the dc-archetype-bom memo masthead. */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300..900;1,8..60,300..900&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

.masthead {
  --mh-ink: #1A1A1A;
  --mh-ink-soft: #3D3D3D;
  --mh-muted: #6B6B6B;
  --mh-rule: #D9D9D6;
  --mh-rule-soft: #E8E8E5;
  --mh-navy: #0E2A47;
  --mh-burgundy: #8B2332;

  border-bottom: 1px solid var(--mh-ink);
  padding: 56px 0 32px;
  margin-bottom: 56px;
}

.masthead-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mh-muted);
  font-weight: 500;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--mh-rule);
  margin-bottom: 36px;
}
.masthead-top .doctype { color: var(--mh-navy); font-weight: 600; }
.masthead-top .draft { color: var(--mh-burgundy); font-weight: 600; }

.masthead .title-block {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 56px;
  align-items: end;
}

.masthead h1.title {
  font-family: 'Source Serif 4', 'Times New Roman', Georgia, serif;
  font-variation-settings: 'opsz' 60;
  font-weight: 400;
  font-size: clamp(36px, 4.8vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--mh-ink);
  margin: 0;
}

.masthead h1.title .subtitle {
  display: block;
  margin-top: 14px;
  font-size: 0.5em;
  font-weight: 400;
  color: var(--mh-muted);
  letter-spacing: 0;
  font-style: italic;
  line-height: 1.3;
}

.masthead .dossier {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 11px;
  line-height: 1.85;
  color: var(--mh-ink);
  border-top: 1px solid var(--mh-ink);
  padding-top: 14px;
  margin: 0;
}
.masthead .dossier .row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--mh-rule-soft);
}
.masthead .dossier .row:last-child { border-bottom: none; }
.masthead .dossier dt {
  color: var(--mh-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 9.5px;
  font-weight: 500;
  padding-top: 2px;
}
.masthead .dossier dd { color: var(--mh-ink); font-weight: 500; font-size: 11.5px; }

.masthead .deck {
  margin-top: 28px;
  font-family: 'Source Serif 4', 'Times New Roman', Georgia, serif;
  font-variation-settings: 'opsz' 24;
  font-size: 19px;
  line-height: 1.5;
  color: var(--mh-ink-soft);
  font-weight: 400;
  max-width: 760px;
}

@media (max-width: 720px) {
  .masthead { padding: 36px 0 24px; }
  .masthead .title-block { grid-template-columns: 1fr; gap: 28px; }
}