/* =====================================================================
   AL250 Canonical — Colors + Type
   The American Language Academy / Standard American 250

   Typography roles (frozen — do not introduce additional faces):
     display     — Cormorant Garamond  (headlines, hero typography)
     body        — Crimson Pro          (paragraph, prose, default)
     caps        — IM Fell English SC   (eyebrows, labels, navigation)
     description — Old Standard TT      (descriptive-register only:
                   corpus citations, observation panels, marginalia,
                   Mencken-camp field-observation grid; NOT generic body)

   Color tokens (frozen). Camp tokens are surface-scoped overrides
   (Webster site, Mencken site) and do NOT propagate to neutral surfaces.

   Aesthetic register: institutional letterpress (Library of America).
   No gradients. No drop shadows on type. No rounded SaaS cards.
   No icon library. Type does the hierarchy.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IM+Fell+English+SC&family=Old+Standard+TT:ital,wght@0,400;0,700;1,400&display=swap");

:root {
  /* ----- Color: neutral / institutional surfaces ----- */
  --paper:        #f4ede0;   /* canvas */
  --paper-deep:   #ebe1cd;   /* sunken paper, table fields */
  --paper-warm:   #ede0c4;   /* alt paper for warmer compositions */
  --ink:          #1a1814;   /* body text */
  --ink-soft:     #3a342a;   /* secondary text */
  --rule:         #8a7a5e;   /* hairlines, dividers, hairline borders */
  --oxblood:      #6b1f1a;   /* urgent/declarative accent, primary CTA */
  --gold:         #8a6f1f;   /* institutional credential markers, sparing */

  /* ----- Color: auxiliary (use sparingly, in body copy only) ----- */
  --rust:         #8a3a1f;
  --green:        #2a4a2a;

  /* ----- Camp tokens (surface-scoped — Webster Camp / Mencken Camp) -----
     These NEVER propagate to neutral surfaces (Academy, Declaration,
     paid-media, reference works, ballot). They live only inside the
     camp pages. */
  --webster:       #1f3a5f;
  --webster-deep:  #122443;
  --webster-gold:  #a88838;

  --mencken:       #5a2818;
  --mencken-deep:  #3a1810;
  --mencken-gold:  #a07828;

  /* ----- Type: families (frozen) ----- */
  --font-display:     "Cormorant Garamond", Georgia, serif;
  --font-body:        "Crimson Pro", Georgia, serif;
  --font-caps:        "IM Fell English SC", serif;
  --font-description: "Old Standard TT", Georgia, serif;

  /* ----- Type: weights ----- */
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;

  /* ----- Type: scale (px) -----
     Display / hero numbers are responsive in practice — use clamp() at
     usage site. Numbers here are the canonical desktop ceilings. */
  --size-xs:      11px;
  --size-sm:      13px;
  --size-base:    16px;
  --size-body:    18px;   /* default paragraph size */
  --size-lead:    22px;   /* italic deck under H1 */
  --size-h6:      21px;
  --size-h5:      24px;
  --size-h4:      28px;
  --size-h3:      36px;
  --size-h2:      44px;
  --size-h1:      56px;
  --size-display: 72px;
  --size-hero:    96px;

  /* ----- Type: tracking ----- */
  --tracking-tight:      -0.015em;
  --tracking-snug:       -0.01em;
  --tracking-normal:     0;
  --tracking-caps:       0.25em;
  --tracking-caps-wide:  0.30em;
  --tracking-caps-extra: 0.32em;

  /* ----- Type: line-height ----- */
  --leading-tight:   1.0;
  --leading-snug:    1.1;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;
  --leading-loose:   1.65;

  /* ----- Spacing scale (8-base) ----- */
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-4xl:  80px;
  --space-5xl:  100px;

  /* ----- Radii (essentially square — no SaaS rounding) ----- */
  --radius-none: 0;
  --radius-sm:   2px;     /* hairline-only on form controls */
  --radius-md:   4px;     /* used very rarely */

  /* ----- Borders ----- */
  --border-hairline:    1px solid var(--rule);
  --border-ink:         1px solid var(--ink);
  --border-double-gold: 4px double var(--gold);

  /* ----- Motion ----- */
  --ease-linear: linear;
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --rise:        0.7s ease-out;

  /* ----- Letterpress noise overlay (subtle SVG, not a literal texture) -----
     Apply via:
       body::before { content:''; position:fixed; inset:0; z-index:1;
         background-image: var(--noise); opacity:0.5;
         mix-blend-mode:multiply; pointer-events:none; }
     Then ensure main { position:relative; z-index:2; } */
  --noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.09 0 0 0 0 0.07 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ----- Breakpoints ----- */
  --bp-sm:  500px;
  --bp-md:  700px;
  --bp-lg:  800px;
  --bp-xl:  1080px;
}

/* =====================================================================
   Semantic type styles. Apply as utility classes or inherit by selector.
   These are the canonical role mappings — H1, H2, body, eyebrow, etc.
   ===================================================================== */

/* Body default — Crimson Pro, never Old Standard TT outside descriptive
   register. */
.al-body,
body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-loose);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Hero / display — Cormorant Garamond, italic for emphasis word.
   Use clamp() at usage site for fluid sizing. */
.al-h-hero {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(64px, 11vw, var(--size-hero));
  line-height: 0.95;
  letter-spacing: var(--tracking-tight);
}

.al-h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(48px, 7vw, var(--size-h1));
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.al-h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(36px, 5vw, var(--size-h2));
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}

.al-h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--size-h3);
  line-height: var(--leading-snug);
}

.al-h4 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--size-h4);
  line-height: var(--leading-snug);
}

/* Italic deck / lede — the institutional voice's "subtitle" */
.al-deck {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--size-lead);
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Eyebrow / kicker / caps label — IM Fell English SC, all caps,
   wide tracking, often oxblood. The dash bracketing is canonical
   ("— LABEL —"). */
.al-eyebrow {
  font-family: var(--font-caps);
  font-size: var(--size-sm);
  letter-spacing: var(--tracking-caps-extra);
  color: var(--oxblood);
  text-transform: none; /* the face is already small-caps */
}

.al-eyebrow-rule {
  /* Eyebrow flanked by long em-dashes is the canonical form. */
  font-family: var(--font-caps);
  font-size: var(--size-sm);
  letter-spacing: var(--tracking-caps-extra);
  color: var(--oxblood);
}

/* Nav / button label — caps, smaller, ink-soft hovers to oxblood */
.al-caps-label {
  font-family: var(--font-caps);
  font-size: var(--size-xs);
  letter-spacing: var(--tracking-caps);
  color: var(--ink-soft);
}

/* Descriptive register — Old Standard TT. Use ONLY for:
   corpus citations, observation panels, marginalia, dictionary entries,
   the Mencken Camp field-observation grid. NEVER as generic body face. */
.al-description {
  font-family: var(--font-description);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}

.al-description-headword {
  font-family: var(--font-description);
  font-weight: var(--weight-bold);
  font-size: var(--size-h5);
}

/* Pull-quote / motto — italic Cormorant, large, often bracketed by
   gold curly-quotes. */
.al-pullquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: clamp(28px, 4vw, var(--size-h2));
  line-height: 1.3;
  color: var(--ink);
}

/* Roman numerals — italic Cormorant. Drop-cap variants stamp them in
   gold or oxblood at hero scale. */
.al-roman {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
}