/* CivicSignals — launch site styles.

   Scope: `/` and `/methodology`. Tokens taken from
   docs/working/branding.html (oxblood/parchment/charcoal register,
   Source Serif 4 / Inter / IBM Plex Mono). Layout, hero composition,
   numbered methodology sections, sticky gutter ToC, and the contained
   16:10 illustration placeholder match the Claude Design handoff
   (Launch Landing.html + Methodology.html).
*/

/* ============================================================
   Tokens
   ============================================================ */
:root {
  --oxblood:      #7A2E1F;
  --oxblood-deep: #5B0F1A;
  --oxblood-soft: #F1E3DD;
  --charcoal:     #111214;
  --ink:          #1B1B1B;
  --ink-muted:    #5C5C5C;
  --ink-soft:     #8A8782;
  --parchment:    #FAF6F0;
  --parchment-2:  #F4EFE6;
  --warm-grey:    #E6E2DA;
  --stone:        #B8B4A9;
  --brass:        #C9A04A;

  --font-body: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-ui:   'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --page-max: 1200px;
  --page-pad: clamp(24px, 4vw, 56px);
}

/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  font-optical-sizing: auto;
  font-feature-settings: 'kern' 1, 'liga' 1, 'onum' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Faint paper texture — two low-opacity radial spots that warm the
   parchment ground without ever reading as a pattern. Kept fixed
   so it doesn't move with the scroll. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 18% 12%, rgba(122, 46, 31, 0.025), transparent 38%),
    radial-gradient(circle at 88% 82%, rgba(17, 18, 20, 0.022), transparent 42%);
}

img, svg { max-width: 100%; height: auto; }

::selection { background: var(--oxblood-soft); color: var(--ink); }

a { color: var(--oxblood); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   Focus
   ============================================================ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--oxblood-soft);
  border-radius: 1px;
}

/* ============================================================
   Page shell
   ============================================================ */
.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad);
  position: relative;
  z-index: 1;
}

main {
  flex: 1;
  width: 100%;
  position: relative;
  z-index: 1;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -40px;
  background: var(--charcoal);
  color: var(--parchment);
  padding: 8px 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  z-index: 10;
  transition: top 120ms ease;
}
.skip-link:focus {
  top: 12px;
  text-decoration: none;
  color: var(--parchment);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   Masthead
   ============================================================ */
/* Lift the header above main in stacking so the masthead's double
   rule (border-bottom + ::after at bottom: -4px) is never diluted
   by content that sits at the very top of the hero (the
   illustration frame's parchment fade overlay would otherwise
   cover the second hairline on the homepage and make it look
   single-rule). Selector beats `.page`'s default z-index: 1. */
header.page {
  z-index: 2;
}

.masthead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 28px;
  padding: 28px 0 14px;
  border-bottom: 1px solid var(--charcoal);
  position: relative;
}
.masthead::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--charcoal);
  opacity: 0.55;
}
.masthead .wordmark {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.022em;
  color: var(--charcoal);
  text-decoration: none;
}
.masthead .wordmark:hover { text-decoration: none; color: var(--oxblood); }
.masthead .label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  text-align: center;
}
.masthead nav {
  display: flex;
  gap: 22px;
  font-family: var(--font-ui);
  font-size: 13px;
}
.masthead nav a {
  color: var(--ink-muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.masthead nav a:hover { color: var(--charcoal); }
.masthead nav a[aria-current="page"] {
  color: var(--charcoal);
  border-bottom-color: var(--oxblood);
}

@media (max-width: 720px) {
  .masthead {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 6px 18px;
    padding-top: 20px;
  }
  .masthead .label { display: none; }
  .masthead nav {
    grid-column: 1 / -1;
    gap: 18px;
    font-size: 12.5px;
    padding-top: 6px;
  }
}

/* ============================================================
   HERO

   Composition is reserved around the illustration from the start.
   On desktop the illustration sits in a 16:10 frame in the right
   column with corner ticks and a placeholder caption. On mobile
   it drops to a thin 16:7 frieze beneath the lead at lower opacity.
   The frame swaps to a final image by adding `.is-real` (which
   hides the ticks + tag) and replacing the inner SVG with an <img>.
   ============================================================ */
.hero {
  position: relative;
  padding: clamp(64px, 9vw, 112px) 0 clamp(56px, 8vw, 88px);
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(440px, 58vw, 620px);
}

.hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  min-height: clamp(360px, 42vw, 480px);
}

.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 32rem;
  padding-right: clamp(8px, 2vw, 24px);
}

.hero-eyebrow {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hero-eyebrow::before {
  content: '';
  display: block;
  width: 24px; height: 1px;
  background: var(--oxblood);
}

.hero-tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(36px, 5.6vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.026em;
  margin: 0 0 30px;
  color: var(--charcoal);
  text-wrap: balance;
}
.hero-tagline em {
  font-style: italic;
  color: var(--oxblood);
  font-weight: 400;
}

.hero-lead p {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 38ch;
  text-wrap: pretty;
}
.hero-lead p:last-child { color: var(--ink-muted); }

.hero-cta {
  margin-top: 34px;
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
}

.btn-register {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 12px 22px;
  border: 1px solid var(--charcoal);
  background: var(--charcoal);
  color: var(--parchment);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.btn-register:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
  text-decoration: none;
  color: var(--parchment);
}
.btn-register::after {
  content: '↓';
  font-size: 13px;
  letter-spacing: 0;
  transform: translateY(1px);
}

.hero-secondary {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-muted);
}
.hero-secondary a {
  color: var(--ink-muted);
  border-bottom: 1px solid var(--warm-grey);
  padding-bottom: 1px;
  text-decoration: none;
}
.hero-secondary a:hover {
  color: var(--oxblood);
  border-bottom-color: var(--oxblood);
  text-decoration: none;
}

/* —— Illustration layer ——
   Sits behind the entire hero, but capped to the same horizontal
   bounds as the rest of the page (max-width 1200px, side padding
   matching --page-pad). Image renders at full fidelity: no
   opacity, no filter, no edits. The page-level gradient mask on
   .frame::before fades the left side of the frame into the
   parchment so the copy column reads cleanly without touching
   the image itself. */
.hero-illustration {
  position: absolute;
  top: 0;
  bottom: 0;
  left: max(var(--page-pad), calc(50% - var(--page-max) / 2 + var(--page-pad)));
  right: max(var(--page-pad), calc(50% - var(--page-max) / 2 + var(--page-pad)));
  z-index: 0;
}
.hero-illustration .frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-illustration svg,
.hero-illustration img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: right center;
}

.hero-illustration .placeholder-tag {
  position: absolute;
  left: 8px;
  bottom: 8px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: rgba(250, 246, 240, 0.85);
  padding: 4px 8px;
  border: 1px solid var(--warm-grey);
}
.hero-illustration.is-real .placeholder-tag { display: none; }

.hero-illustration .ticks {
  position: absolute; inset: 0; z-index: 2;
  pointer-events: none;
}
.hero-illustration .ticks::before,
.hero-illustration .ticks::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--stone);
  opacity: 0.55;
}
.hero-illustration .ticks::before {
  top: 0; left: 0;
  border-right: 0; border-bottom: 0;
}
.hero-illustration .ticks::after {
  bottom: 0; right: 0;
  border-left: 0; border-top: 0;
}
.hero-illustration.is-real .ticks { display: none; }

/* Page-level fade overlay. Strict linear ramp: parchment is
   fully opaque at the left edge and drops to 40% opacity at the
   right edge, with no plateau. The image is more visible across
   the whole width, but always more so toward the right. The
   image itself is untouched. */
.hero-illustration .frame::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to right,
    var(--parchment) 0%,
    rgba(250, 246, 240, 0.4) 100%
  );
}
.hero-illustration .frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    var(--parchment) 0%,
    rgba(250, 246, 240, 0.0) 12%,
    rgba(250, 246, 240, 0.0) 88%,
    var(--parchment) 100%
  );
}

@media (max-width: 880px) {
  .hero {
    padding: clamp(40px, 8vw, 64px) 0 clamp(40px, 6vw, 56px);
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .hero-grid {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  /* Mobile: illustration leaves the absolute layer and slots
     beneath the copy as a thin frieze. Image still untouched.
     Width matches the page content area (capped at page-max with
     side padding) so it stops at the same right margin as the
     rest of the page. */
  .hero-illustration {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    width: calc(100% - 2 * var(--page-pad));
    max-width: calc(var(--page-max) - 2 * var(--page-pad));
    margin: 28px auto 0;
    aspect-ratio: 16 / 9;
    order: 2;
  }
  .hero-illustration .frame::before {
    background: linear-gradient(
      to right,
      var(--parchment) 0%,
      rgba(250, 246, 240, 0.0) 12%,
      rgba(250, 246, 240, 0.0) 88%,
      var(--parchment) 100%
    );
  }
}

/* ============================================================
   Section frames
   ============================================================ */
.section {
  padding: clamp(48px, 6vw, 80px) 0;
  border-top: 1px solid var(--warm-grey);
  position: relative;
}
.section-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.section-eyebrow::before {
  content: '';
  width: 18px; height: 1px;
  background: currentColor;
  opacity: 0.6;
}
.section h2 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(28px, 3.2vw, 36px);
  letter-spacing: -0.016em;
  line-height: 1.12;
  color: var(--charcoal);
  margin: 0 0 22px;
  max-width: 36ch;
  text-wrap: balance;
}
.section p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 60ch;
  text-wrap: pretty;
}
.section p.muted { color: var(--ink-muted); }

/* "What's in the corpus" — body column + right-side meta ledger. */
.corpus-grid {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.corpus-grid .body p { max-width: 56ch; }
.corpus-grid .pointer {
  font-family: var(--font-ui);
  font-size: 13px;
  margin-top: 18px;
}
.corpus-grid .pointer a {
  color: var(--oxblood);
  border-bottom: 1px solid var(--warm-grey);
  padding-bottom: 1px;
  text-decoration: none;
}
.corpus-grid .pointer a:hover { border-bottom-color: var(--oxblood); }

.corpus-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  display: grid;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--warm-grey);
}
.corpus-meta dt {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--stone);
  margin-top: 8px;
}
.corpus-meta dd {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0;
}
.corpus-meta dd em { color: var(--oxblood); font-style: italic; }

@media (max-width: 880px) {
  .corpus-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Register interest
   ============================================================ */
.register { scroll-margin-top: 24px; }
.register .form-wrap {
  margin-top: 22px;
  max-width: 480px;
}
.register .signup {
  display: flex;
  border: 1px solid var(--charcoal);
  background: #fff;
}
.register .signup input[type="email"] {
  flex: 1;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 13px 14px;
  color: var(--ink);
  outline: none;
  min-width: 0;
}
.register .signup input::placeholder {
  color: var(--ink-soft);
  font-style: italic;
}
.register .signup button {
  border: 0;
  border-left: 1px solid var(--charcoal);
  background: var(--charcoal);
  color: var(--parchment);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 0 22px;
  cursor: pointer;
  transition: background 120ms ease;
}
.register .signup button:hover { background: var(--oxblood); }
.register .mail-register {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--charcoal);
  background: var(--charcoal);
  color: var(--parchment);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 13px 22px;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.register .mail-register:hover {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: var(--parchment);
  text-decoration: none;
}
.register .form-note {
  margin: 14px 0 0;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-muted);
  letter-spacing: 0.005em;
  max-width: 50ch;
}
.register .placeholder-note {
  margin-top: 16px;
  font-family: var(--font-ui);
  font-size: 11.5px;
  letter-spacing: 0.005em;
  color: var(--ink-soft);
  border-left: 2px solid var(--warm-grey);
  padding: 4px 12px;
  font-style: italic;
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  margin-top: clamp(56px, 7vw, 96px);
  padding: 32px 0 40px;
  border-top: 1px solid var(--charcoal);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-muted);
  position: relative;
  z-index: 1;
}
.site-footer .funding {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  max-width: 60ch;
  margin: 0 0 20px;
}
.site-footer .funding b { font-weight: 600; color: var(--charcoal); }
.site-footer .links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
}
.site-footer .links a { color: var(--ink-muted); text-decoration: none; }
.site-footer .links a:hover { color: var(--oxblood); }
.site-footer .links .sep { color: var(--stone); }
.site-footer .copy {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

/* ============================================================
   Methodology page
   ============================================================ */
.methodology {
  /* Vertical only — preserves .page's horizontal padding. */
  padding-top: clamp(48px, 6vw, 80px);
  padding-bottom: clamp(56px, 7vw, 96px);
}
.methodology-shell {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(24px, 4vw, 64px);
}

.doc-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 0 0 16px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.doc-eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--oxblood);
}

.methodology h1 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.024em;
  margin: 0 0 26px;
  color: var(--charcoal);
  text-wrap: balance;
}

.methodology .lede p {
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 60ch;
  text-wrap: pretty;
}

.methodology section {
  padding: 32px 0 0;
  margin: 32px 0 0;
  border-top: 1px solid var(--warm-grey);
  scroll-margin-top: 24px;
}
/* Number sits as a small mono label above the section heading,
   so the heading and body text align at the same left edge as
   the page H1. */
.methodology section > .num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 12px;
}
.methodology section > .body { min-width: 0; }

.methodology h2 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(24px, 2.4vw, 28px);
  letter-spacing: -0.012em;
  color: var(--charcoal);
  margin: 0 0 16px;
  text-wrap: balance;
}
.methodology p {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.62;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 60ch;
  text-wrap: pretty;
}
.methodology p strong {
  font-weight: 600;
  color: var(--charcoal);
}
.methodology .body a {
  color: var(--oxblood);
  border-bottom: 1px solid var(--warm-grey);
  padding-bottom: 1px;
  text-decoration: none;
  transition: border-bottom-color 120ms ease;
}
.methodology .body a:hover { border-bottom-color: var(--oxblood); }

@media (max-width: 720px) {
  .methodology section { padding: 24px 0 0; margin: 24px 0 0; }
}

/* ——— Right gutter — sticky table of contents. */
.gutter {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.gutter .sticky {
  position: sticky;
  top: 28px;
  padding-top: 4px;
}
.gutter .gutter-eyebrow {
  color: var(--stone);
  margin: 0 0 14px;
  letter-spacing: 0.18em;
}
.gutter ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.gutter a {
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 0;
  display: inline-flex;
  gap: 12px;
  align-items: baseline;
}
.gutter a:hover { color: var(--oxblood); text-decoration: none; }
.gutter a .n { color: var(--stone); }

@media (max-width: 880px) {
  .methodology-shell { grid-template-columns: 1fr; }
  .gutter { display: none; }
}

/* ============================================================
   Print
   ============================================================ */
@media print {
  body { background: #fff; color: #000; }
  body::before { display: none; }
  .masthead nav, .hero-illustration, .gutter, .site-footer .links { display: none; }
  a { color: #000; text-decoration: underline; }
  .methodology section { break-inside: avoid; }
}