/* ════════════════════════════════════════════════════════════════
   design_cohesion_v2.css
   Unifies hero typography, section widths, and gutter spacing
   across architecture.html, principles.html, and terminal.html.
   Add this <link> after style.css and cohesion_patch.css on
   all three pages.
════════════════════════════════════════════════════════════════ */


/* ── 1. SHARED GUTTER TOKEN ─────────────────────────────────────
   All hero/content blocks use 60px on desktop to match the
   principles page, narrowing to 24px at ≤720px.
   (Terminal and Architecture used 48px; this brings them in line.)
──────────────────────────────────────────────────────────────── */

:root {
  --page-gutter: 60px;           /* was 48px on terminal / arch    */
  --content-max:  900px;         /* was 820px on terminal          */
}


/* ── 2. TERMINAL HERO ───────────────────────────────────────────
   Overrides .t-hero and its children to match .principles-hero
──────────────────────────────────────────────────────────────── */

.t-hero {
  padding: 118px var(--page-gutter) 72px;
  max-width: var(--content-max);
}

/* Overline: size, tracking, and opacity now match principles */
.t-hero .overline {
  font-size:      0.62rem;                    /* was 0.72rem       */
  letter-spacing: 0.22em;                    /* was 0.18em        */
  color:          rgba(255, 255, 255, 0.28); /* was 0.36 — dimmer */
  margin-bottom:  28px;                      /* was 18px          */
}

/* H1: fluid scale + tighter tracking to match principles h1 */
.t-hero h1 {
  font-size:      clamp(2.6rem, 5.5vw, 4rem); /* was fixed 2.85rem */
  letter-spacing: -0.04em;                    /* was -0.03em       */
  line-height:    1.04;                       /* was 1.09          */
  margin-bottom:  32px;
}

/* Lead paragraphs: dim to match principles .lead opacity */
.t-hero .lead {
  font-size:   0.96rem;                      /* was 1.0rem         */
  line-height: 1.82;                         /* was 1.72           */
  color:       rgba(255, 255, 255, 0.44);    /* was 0.78 — big fix */
  max-width:   580px;
  margin-bottom: 12px;
}
.t-hero .lead:last-child {
  margin-bottom: 0;
}


/* ── 3. TERMINAL SECTION WIDTHS & GUTTERS ───────────────────────
   Matches the 900px / 60px gutter used by principles sections
──────────────────────────────────────────────────────────────── */

.t-divider,
.t-ai-section,
.t-state-section,
.t-contact-section,
.t-transmission,
.t-note {
  max-width: var(--content-max);
}

.t-divider {
  padding-left:  var(--page-gutter);
  padding-right: var(--page-gutter);
}

.t-ai-section {
  padding-left:  var(--page-gutter);
  padding-right: var(--page-gutter);
}

.t-state-section {
  padding-left:  var(--page-gutter);
  padding-right: var(--page-gutter);
}

.t-contact-section {
  padding-left:  var(--page-gutter);
  padding-right: var(--page-gutter);
}

.t-transmission {
  padding-left:  var(--page-gutter);
  padding-right: var(--page-gutter);
}

.t-note {
  padding-left:  var(--page-gutter);
  padding-right: var(--page-gutter);
}


/* ── 4. ARCHITECTURE INTRO ──────────────────────────────────────
   Aligns kicker size/tracking with the principles overline
──────────────────────────────────────────────────────────────── */

.dev-intro-kicker {
  font-size:      0.62rem;   /* was 0.72rem */
  letter-spacing: 0.22em;   /* was 0.16em  */
}

/* Intro paragraph opacity: match principles .lead at 0.44 */
.dev-intro p {
  color: rgba(255, 255, 255, 0.44); /* was 0.44 already on arch — confirmed */
}


/* ── 5. FOOTER LINK CONSISTENCY ─────────────────────────────────
   All pages show a small footer link; unify size + spacing
──────────────────────────────────────────────────────────────── */

footer a {
  font-size:      0.75rem;
  letter-spacing: 0.10em;
  margin-top:     12px;
}


/* ── 6. RESPONSIVE: ≤720px ──────────────────────────────────────
   Terminal breakpoint was 720px; principles used the same.
   Collapse gutter and adjust hero heading size to match.
──────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {

  .t-hero {
    padding: 88px 24px 52px;
  }

  .t-hero h1 {
    font-size: 2.2rem;
  }

  .t-divider,
  .t-ai-section,
  .t-state-section,
  .t-contact-section,
  .t-transmission,
  .t-note {
    padding-left:  24px;
    padding-right: 24px;
  }

  /* Architecture intro at the same breakpoint */
  .dev-intro {
    padding-left:  24px;
    padding-right: 24px;
  }
}


/* ── 7. RESPONSIVE: ≤480px ──────────────────────────────────────
   Keep terminal sections from growing awkward padding.
──────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {

  .t-hero {
    padding-left:  20px;
    padding-right: 20px;
  }

  .t-divider,
  .t-ai-section,
  .t-state-section,
  .t-contact-section,
  .t-transmission,
  .t-note {
    padding-left:  20px;
    padding-right: 20px;
  }
}