/* typography — element reset, headings, emphasis, body, leads, eyebrows, audience rule
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* ------------------------------------------------------------- typography */
h1, h2, h3, h4, h5, h6,
.content-area-title, .title-font {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: var(--display-lh);
  text-transform: var(--display-case);
  color: var(--text-heading);
  text-wrap: pretty;
}

h1, .title-font { font-size: clamp(2.4rem, 5vw, 3.4rem); letter-spacing: var(--display-track-hero); line-height: var(--display-lh-hero); }
h2, .content-area-title { font-size: clamp(2rem, 4.2vw, 3rem); }
/* Block section title (shared by accordion, content, contact, q&a, tabs …). A
   step below the display h2 — it was reading almost as large as a page h1 — and
   with space beneath so the block content isn't cramped against it. */
.content-area-title { font-size: clamp(2rem, 4vw, 2.2rem); margin-bottom: 1.1rem; }
h3 { font-size: 1.45rem; line-height: 1.12; }
h4 { font-size: 1.35rem; line-height: 1.15; }
h5, h6 { font-size: 1.25rem; line-height: 1.2; }
h6 { font-size: var(--fs-min); }

/* Emphasis is how a title carries a voice. One per title, on the clause that
   holds the meaning. <em> for voice, <strong> for a fact, never both. */
h1 em, h2 em, h3 em, h4 em,
.content-area-title em, .title-font em {
  font-style: var(--em-style);
  font-weight: var(--em-weight);
  color: var(--em-color);
}
h1 strong, h2 strong, h3 strong,
.content-area-title strong, .title-font strong {
  font-weight: 800;
  color: var(--strong-color);
}

p + p { margin-top: 1rem; }

/* Blockquote — default WYSIWYG quote. An accent rule and the display face lift a
   pulled quote off the body copy so it reads as intentional, not just indented
   text. Component quotes (e.g. .dncg-sc-testimonial) override at higher
   specificity. */
blockquote {
  margin: 1.75rem 0;
  padding: .2rem 0 .2rem 1.6rem;
  border-left: 4px solid var(--accent);
  max-width: var(--measure);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--text-heading);
}
blockquote p + p { margin-top: .9rem; }
blockquote :is(cite, footer) {
  display: block;
  margin-top: .9rem;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  font-style: normal;
  color: var(--muted);
}

a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: .22em; }
a:hover { color: var(--link-hover); }

strong { font-weight: 700; }
/* .92em computes to 1.012rem inside body copy (body is --fs-min, 1.1rem), under
   the floor. Pinned to --fs-min so it tracks the token rather than the arithmetic. */
code, kbd, samp { font-family: var(--font-mono); font-size: var(--fs-min); }
cite { font-style: normal; }

/* The quiet lead-in that sits ABOVE a statement. Display face, weight 400. */
.d-lead {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--text-heading);
  margin-bottom: .35rem;
  max-width: var(--measure);
}

/* The muted intro that sits AFTER a heading. Body face. */
.section-intro,
.content-area-title + p,
.title-area p {
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: var(--measure);
  margin-top: .5rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* The -text step, not the raw --em-color. An eyebrow is a small TEXT role at
     --fs-eyebrow (1.1rem), so 4.5:1 applies; --display-em is sized for heading
     emphasis, where the type is large and 3:1 applies. Identical on five brands;
     hesta steps it. The dark-ground and bg-mid-grey eyebrow colours are set in
     base.css and bridge.css and still win over this. */
  color: var(--display-em-text);
  margin-bottom: .8rem;
}
/* The audience rule — the ONLY place inside a section where the three fixed
   audience colours may appear. Semantic wayfinding, never decoration. */
.eyebrow::before { content: none; }
.eyebrow--rule::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 28px;
  height: 4px;
  background: linear-gradient(90deg,
    var(--aud-students) 0 33.33%,
    var(--aud-parents) 33.33% 66.66%,
    var(--aud-employers) 66.66% 100%);
}
.eyebrow--students { color: var(--aud-students); }
.eyebrow--students::before { content: ""; display: block; flex: 0 0 auto; width: 28px; height: 4px; background: var(--aud-students); }
.eyebrow--parents { color: var(--aud-parents); }
.eyebrow--parents::before { content: ""; display: block; flex: 0 0 auto; width: 28px; height: 4px; background: var(--aud-parents); }
.eyebrow--green,
.eyebrow--employers { color: var(--aud-employers-text); }
.eyebrow--employers::before { content: ""; display: block; flex: 0 0 auto; width: 28px; height: 4px; background: var(--aud-employers); }

.audience-rule {
  height: 4px;
  background: linear-gradient(90deg,
    var(--aud-students) 0 33.33%,
    var(--aud-parents) 33.33% 66.66%,
    var(--aud-employers) 66.66% 100%);
}