/* ==========================================================================
   Responsive — mobile-first enhancements
   ========================================================================== */

/* Small phones */
@media (max-width: 400px) {
  :root { --header-h: 74px; --header-h-compact: 62px; }
  .brand__name { font-size: 1.02rem; }
  .brand__role { font-size: 0.54rem; letter-spacing: 0.2em; }
  .brand__mark { width: 24px; height: 32px; }
  .brand { gap: 10px; }
  .facts { grid-template-columns: 1fr; }
  .hero__meta { letter-spacing: 0.2em; }
}

@media (max-width: 599px) {
  .header-lock { display: none; }
  .frame-line::after { inset: 10px -10px -10px 10px; }
  .hero__arch { inset: -16px -14px auto; height: calc(100% + 32px); }
}

@media (max-width: 359px) {
  .brand__name { font-size: 0.9rem; }
  .brand__role { font-size: 0.5rem; letter-spacing: 0.16em; }
  .brand__mark { width: 20px; height: 28px; }
  .brand { gap: 8px; }
}

/* ≥ 600px */
@media (min-width: 600px) {
  .masonry { columns: 2; }
  .dossier__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dossier__meta .span-2 { grid-column: span 2; }
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story { grid-template-columns: 9rem 1fr; gap: 24px; }
  .story .figure { grid-column: 2; }
  .closing__links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
}

/* ≥ 768px — tablets */
@media (min-width: 768px) {
  .journey__track {
    grid-template-columns: repeat(var(--steps, 5), minmax(0, 1fr));
    gap: 28px;
  }

  .journey__track::before {
    left: 0;
    right: 0;
    top: 7px;
    bottom: auto;
    width: auto;
    height: 1px;
  }

  .journey__step { padding: 44px 0 0; }
  .journey__step::before { top: 0; }

  .tl::before { left: 50%; }
  .tl__era { padding-left: 0; text-align: center; }
  .tl__era h2 { display: inline-block; padding: 8px 16px; background: var(--ink); position: relative; }

  .tl__item {
    width: 50%;
    padding: 0 56px 72px 0;
    text-align: right;
  }

  .tl__item::before { left: auto; right: -7px; }

  .tl__item.is-right {
    margin-left: 50%;
    padding: 0 0 72px 56px;
    text-align: left;
  }

  .tl__item.is-right::before { right: auto; left: -6px; }

  .tl__item:not(.is-right) .tl__body { margin-left: auto; }
  .tl__item:not(.is-right) figcaption { justify-content: flex-end; }

  .layers { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .council__figures { grid-template-columns: 1.1fr 0.9fr; align-items: end; }

  .contact { grid-template-columns: 1.1fr 0.9fr; }

  .history-note { grid-template-columns: 0.8fr 1.2fr; }
}

/* ≥ 1024px — small desktop / landscape tablet */
@media (min-width: 1024px) {
  .hero { display: flex; align-items: center; }
  .hero > .container { width: 100%; }
  .hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(48px, 6vw, 110px); }
  .hero__portrait { justify-self: end; }
  .hero__vertical { display: block; }

  .glance { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(56px, 7vw, 120px); }
  .glance__intro { position: sticky; top: calc(var(--header-h-compact) + 40px); align-self: start; }

  .journey__head { grid-template-columns: 1fr auto; align-items: end; }

  .vision-band__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(56px, 7vw, 120px); align-items: start; }

  .action__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; align-items: start; }
  .action__primary { grid-column: 1 / span 8; }
  .action__secondary { grid-column: 9 / span 4; margin-top: clamp(80px, 12vw, 180px); }
  .action__caption-block { grid-column: 1 / span 6; margin-top: 24px; }

  .statements { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(64px, 8vw, 130px); }
  .statements__side { padding-top: 10px; }

  .closing__links { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; }
  .closing__links a { flex-direction: column; gap: 18px; padding: 30px 0 34px; }

  .bio-hero__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
  .bio-hero__figure { justify-self: end; }
  .bio-layout { grid-template-columns: 240px minmax(0, 1fr); gap: clamp(56px, 7vw, 120px); }
  .toc { position: sticky; top: calc(var(--header-h-compact) + 40px); align-self: start; }
  .chapter__figure--float { float: right; width: 44%; margin: 8px 0 28px 40px; }
  .chapter::after { content: ""; display: block; clear: both; }

  .lead-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lead-hero__figure { justify-self: end; }

  .ledger__row { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }

  .vision-hero__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }

  .theme { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
  .theme__aside { position: sticky; top: calc(var(--header-h-compact) + 90px); }

  .council { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(56px, 7vw, 110px); }

  .init-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .init-layout { grid-template-columns: 260px minmax(0, 1fr); gap: clamp(56px, 7vw, 110px); }
  .init-index { position: sticky; top: calc(var(--header-h-compact) + 40px); align-self: start; }

  .lead-story { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: clamp(40px, 5vw, 80px); }

  .masonry { columns: 3; }

  .footer__lead { grid-template-columns: 1.3fr 0.7fr; align-items: end; }
  .footer__grid { grid-template-columns: 1.3fr 0.9fr 0.9fr; gap: 56px; }

  .contact { gap: clamp(64px, 8vw, 130px); }
}

/* ≥ 1360px — full navigation */
@media (min-width: 1360px) {
  .primary-nav { display: block; }
  .site-header .brand { flex: none; }
  .menu-toggle { display: none; }
  .brand__name { font-size: 1.16rem; }
}

@media (min-width: 1440px) {
  .primary-nav__list { gap: 26px; }
  .brand__name { font-size: 1.26rem; }
}

@media (min-width: 1600px) {
  .masonry { columns: 4; }
}

/* Landscape phones: keep the hero from locking to viewport height */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { min-height: 0; }
}

@media print {
  .site-header, .menu, .scroll-cue, .theme-nav, .filter-bar, .site-footer .social { display: none !important; }
  body { background: #fff; color: #000; }
  .on-ink { background: #fff; color: #000; }
}