/* ==========================================================================
   Manifest page styles. Every selector is scoped under .page-manifest.
   Shared chrome/components live in assets/css/site.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero (navy page head)
   -------------------------------------------------------------------------- */

.page-manifest .manifest-hero { padding: clamp(30px, 3.2vw, 50px) 0; }

.page-manifest .manifest-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  justify-content: space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(var(--paper-rgb), 0.28);
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-soft);
}

.page-manifest .manifest-hero h1 {
  margin: clamp(18px, 2vw, 26px) 0 0;
  max-width: 15ch;
}

.page-manifest .manifest-hero-lead {
  margin: 16px 0 0;
  max-width: 640px;
  font: 400 clamp(16.5px, 1.2vw, 19px)/1.55 var(--font-sans);
  color: rgba(var(--paper-rgb), 0.84);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Preamble
   -------------------------------------------------------------------------- */

.page-manifest .manifest-preamble { padding-top: clamp(48px, 5.5vw, 88px); }

.page-manifest .manifest-preamble-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 3vw, 56px);
  padding-bottom: clamp(34px, 4vw, 52px);
  border-bottom: 1px solid var(--ink);
}

.page-manifest .manifest-preamble .eyebrow { letter-spacing: 0.2em; }

.page-manifest .manifest-preamble-body p {
  margin: 0 0 18px;
  max-width: 64ch;
  font: 400 16.5px/1.65 var(--font-sans);
  color: var(--ink2);
  text-wrap: pretty;
}
.page-manifest .manifest-preamble-body p:last-child { margin-bottom: 0; }

.page-manifest .manifest-preamble-body .manifest-preamble-lede {
  font: 400 clamp(18px, 1.5vw, 21px)/1.6 var(--font-sans);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   The six directives
   -------------------------------------------------------------------------- */

.page-manifest .manifest-directives { padding-bottom: clamp(48px, 5.5vw, 88px); }

.page-manifest .directive {
  padding: clamp(30px, 3.4vw, 46px) 0;
  border-bottom: 1px solid var(--rule);
}

.page-manifest .directive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(20px, 3vw, 56px);
}

.page-manifest .directive .eyebrow { letter-spacing: 0.2em; }

.page-manifest .directive-title {
  margin: 16px 0 0;
  max-width: 22ch;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.02em;
}

.page-manifest .directive-body p {
  margin: 0 0 16px;
  max-width: 64ch;
  font: 400 16.5px/1.65 var(--font-sans);
  color: var(--ink2);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Signature (Join CTA + the four terms)
   -------------------------------------------------------------------------- */

.page-manifest .manifest-signature { padding: clamp(48px, 5.5vw, 88px) 0; }

.page-manifest .manifest-signature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 3.5vw, 64px);
  align-items: start;
}

.page-manifest .manifest-signature .eyebrow { letter-spacing: 0.2em; }

.page-manifest .manifest-signature-title {
  margin: 16px 0 0;
  max-width: 20ch;
}

.page-manifest .manifest-signature-lead {
  margin: 20px 0 0;
  max-width: 52ch;
  font: 400 16.5px/1.65 var(--font-sans);
  color: var(--ink2);
  text-wrap: pretty;
}

.page-manifest .manifest-signature-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

/* Prototype hover for the quiet outline button on the band: paper fill. */
.page-manifest .manifest-signature .btn--tertiary:hover { background: var(--paper); }

.page-manifest .manifest-terms {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule-strong);
}
.page-manifest .manifest-terms li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.page-manifest .manifest-terms li:last-child { border-bottom: none; }
.page-manifest .manifest-terms li > span:first-child {
  font: 400 11px/1.6 var(--font-mono);
  color: var(--accent-text);
}
.page-manifest .manifest-terms li > span:last-child {
  font: 400 16px/1.6 var(--font-sans);
  color: var(--ink2);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.page-manifest .manifest-faq { padding: clamp(48px, 5.6vw, 90px) 0; }

.page-manifest .manifest-faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(28px, 4vw, 68px);
}

.page-manifest .manifest-faq-title {
  margin: 14px 0 0;
  max-width: 16ch;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.06;
}

.page-manifest .manifest-faq-lead {
  margin: 18px 0 0;
  max-width: 42ch;
  font: 400 17px/1.6 var(--font-sans);
  color: var(--ink2);
  text-wrap: pretty;
}

.page-manifest .manifest-faq-cta { margin-top: 24px; }

.page-manifest .manifest-faq .faq { border-top: 1px solid var(--ink); }