/* =============================================================
   Colophon Partners — colors & type
   =============================================================
   One family, used rigorously:
     • EB Garamond — italic for display, roman for body,
       small-caps + tracking for labels (where Montserrat
       used to sit).
   A literary, restrained palette: cream paper, deep forest
   green, a single coral accent, and quiet supporting neutrals.
   ============================================================= */

/* ---------- 1. Fonts ----------------------------------------- */
/* Local copies from the brand's Word templates, with Google
   Fonts as a graceful fallback. */

@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond";
  src: url("fonts/EBGaramond-boldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond Medium";
  src: url("fonts/EBGaramondMedium-regular.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond Medium";
  src: url("fonts/EBGaramondMedium-italic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "EB Garamond SemiBold";
  src: url("fonts/EBGaramondSemiBold-regular.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Montserrat was previously used for caps labels. We've moved
   to EB Garamond small-caps. Montserrat is kept loaded as a
   safety net for any caller still referencing --clphn-sans. */
@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap");

/* ---------- 2. Tokens ---------------------------------------- */

:root {
  /* — Primary palette — */
  --clphn-paper:        #F6F1ED;  /* cream / warm white. The
                                     default page background. */
  --clphn-paper-warm:   #ECDFCE;  /* deeper cream tint, used
                                     for accented panels. */
  --clphn-paper-cool:   #ECEDED;  /* cooler off-white, neutral. */
  --clphn-forest:       #122E1D;  /* deep forest green.
                                     The signature brand color. */
  --clphn-forest-ink:   #0B1F14;  /* darker forest for text on
                                     light grounds. */
  /* Accent — there is no separate accent. The forest itself is
     the accent. Earlier drafts used a coral (#E46962) and a
     lilac (#DADBEF) pulled from Millie's PowerPoint master, but
     those were sample swatches, not brand colors. They have
     been removed. Aliases below keep older callers compiling. */
  --clphn-accent:       var(--clphn-forest);
  --clphn-coral:        var(--clphn-forest);   /* deprecated alias */
  --clphn-lilac:        var(--clphn-paper-warm); /* deprecated alias */

  /* — Neutrals — */
  --clphn-ink:          #1A1A1A;  /* near-black body text */
  --clphn-ink-soft:     #383637;  /* warm charcoal */
  --clphn-ink-muted:    #666666;  /* secondary text */
  --clphn-rule:         #D9D2CB;  /* hairline on paper */
  --clphn-rule-soft:    #E8E2DB;  /* lighter hairline */

  /* — Data viz (chart palette, derived from PPT chart images) — */
  --clphn-chart-1:      #0E3950;  /* deep petrol blue */
  --clphn-chart-2:      #6C9BAC;  /* steel blue */
  --clphn-chart-3:      #1F7A7E;  /* teal */
  --clphn-chart-4:      #122E1D;  /* forest — replaces what was coral */
  --clphn-chart-grid:   #D9D2CB;

  /* — Surfaces & state — */
  --clphn-surface:      var(--clphn-paper);
  --clphn-surface-2:    #FFFFFF;          /* "actual" white,
                                             reserved for cards
                                             that need to lift. */
  --clphn-on-forest:    var(--clphn-paper);
  --clphn-link:         var(--clphn-forest);
  --clphn-link-hover:   var(--clphn-forest-ink);

  /* — Type families — */
  --clphn-serif:        "EB Garamond", "EB Garamond Medium",
                         Garamond, "Adobe Garamond Pro",
                         Georgia, "Times New Roman", serif;
  --clphn-serif-med:    "EB Garamond Medium", "EB Garamond",
                         Garamond, Georgia, serif;
  /* "Sans" is now an alias for EB Garamond — kept so older
     callers don't break, but it's the same serif family. Use
     the .clphn-eyebrow / .clphn-caption / .clphn-meta classes
     for tracked small-caps labels. */
  --clphn-sans:         var(--clphn-serif);

  /* — Type scale (px on a 16px root) — */
  --clphn-fs-mega:      96px;   /* title-slide wordmark */
  --clphn-fs-hero:      64px;   /* section opener */
  --clphn-fs-h1:        48px;
  --clphn-fs-h2:        36px;
  --clphn-fs-h3:        28px;
  --clphn-fs-h4:        22px;
  --clphn-fs-body-lg:   20px;
  --clphn-fs-body:      17px;
  --clphn-fs-body-sm:   15px;
  --clphn-fs-caption:   13px;
  --clphn-fs-eyebrow:   11px;   /* Montserrat ALL CAPS labels */

  /* — Line heights — */
  --clphn-lh-tight:     1.05;
  --clphn-lh-display:   1.15;
  --clphn-lh-snug:      1.3;
  --clphn-lh-body:      1.55;
  --clphn-lh-loose:     1.75;

  /* — Letter spacing — */
  --clphn-tracking-eyebrow:  0.18em;  /* generous on the caps */
  --clphn-tracking-tight:   -0.01em;
  --clphn-tracking-normal:   0;

  /* — Layout / spacing — */
  --clphn-space-1:      4px;
  --clphn-space-2:      8px;
  --clphn-space-3:      12px;
  --clphn-space-4:      16px;
  --clphn-space-5:      24px;
  --clphn-space-6:      32px;
  --clphn-space-7:      48px;
  --clphn-space-8:      64px;
  --clphn-space-9:      96px;
  --clphn-space-10:    128px;

  --clphn-gutter:       80px;   /* page side margin, desktop */
  --clphn-gutter-sm:    32px;   /* mobile */
  --clphn-maxw:        1240px;
  --clphn-maxw-prose:   680px;

  /* — Radii — */
  --clphn-radius-0:     0;       /* default: nothing rounds */
  --clphn-radius-1:     2px;
  --clphn-radius-2:     4px;     /* the maximum normally used */

  /* — Hairlines / borders — */
  --clphn-border:       1px solid var(--clphn-rule);
  --clphn-border-soft:  1px solid var(--clphn-rule-soft);
  --clphn-border-ink:   1px solid var(--clphn-forest);

  /* — Shadows — */
  /* The brand is print-first; shadows are rarely used. When
     they are, they're soft and warm, never glassy. */
  --clphn-shadow-1:     0 1px 2px rgba(18, 46, 29, 0.06);
  --clphn-shadow-2:     0 4px 16px rgba(18, 46, 29, 0.08);
  --clphn-shadow-3:     0 12px 40px rgba(18, 46, 29, 0.12);

  /* — Motion — */
  --clphn-ease:         cubic-bezier(0.2, 0.6, 0.2, 1);
  --clphn-dur-fast:     140ms;
  --clphn-dur:          220ms;
  --clphn-dur-slow:     420ms;
}

/* ---------- 3. Base elements --------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html { font-size: 16px; }

body {
  font-family: var(--clphn-serif);
  font-size: var(--clphn-fs-body);
  line-height: var(--clphn-lh-body);
  color: var(--clphn-ink);
  background: var(--clphn-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--clphn-serif);
  font-weight: 400;
  color: var(--clphn-forest);
  margin: 0 0 var(--clphn-space-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--clphn-fs-h1);
  line-height: var(--clphn-lh-display);
  font-style: italic;
  letter-spacing: var(--clphn-tracking-tight);
}
h2 {
  font-size: var(--clphn-fs-h2);
  line-height: var(--clphn-lh-display);
  font-style: italic;
}
h3 {
  font-size: var(--clphn-fs-h3);
  line-height: var(--clphn-lh-snug);
}
h4 {
  font-size: var(--clphn-fs-h4);
  line-height: var(--clphn-lh-snug);
}

p {
  margin: 0 0 var(--clphn-space-4);
  text-wrap: pretty;
}

a {
  color: var(--clphn-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--clphn-dur) var(--clphn-ease);
}
a:hover { color: var(--clphn-link-hover); }

hr {
  border: 0;
  border-top: var(--clphn-border);
  margin: var(--clphn-space-6) 0;
}

::selection {
  background: var(--clphn-forest);
  color: var(--clphn-paper);
}

/* ---------- 4. Utility / semantic type classes --------------- */

.clphn-display {
  font-family: var(--clphn-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--clphn-fs-hero);
  line-height: var(--clphn-lh-display);
  letter-spacing: var(--clphn-tracking-tight);
  color: var(--clphn-forest);
}

.clphn-wordmark {
  font-family: var(--clphn-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: currentColor;
}
.clphn-wordmark::after {
  content: ".";
  font-style: italic;
}

.clphn-eyebrow {
  font-family: var(--clphn-serif);
  font-size: 13px;
  font-weight: 500;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp", "c2sc";
  letter-spacing: var(--clphn-tracking-eyebrow);
  text-transform: lowercase;
  color: var(--clphn-ink-soft);
}

.clphn-caption {
  font-family: var(--clphn-serif);
  font-style: italic;
  font-size: var(--clphn-fs-body-sm);
  font-weight: 400;
  color: var(--clphn-ink-muted);
  letter-spacing: 0;
}

.clphn-lede {
  font-family: var(--clphn-serif);
  font-size: var(--clphn-fs-body-lg);
  line-height: var(--clphn-lh-body);
  color: var(--clphn-ink-soft);
  font-style: italic;
}

.clphn-meta {
  font-family: var(--clphn-serif);
  font-style: italic;
  font-size: var(--clphn-fs-body-sm);
  font-weight: 400;
  color: var(--clphn-ink-muted);
}

/* ---------- 5. Surfaces -------------------------------------- */

.clphn-on-paper   { background: var(--clphn-paper); color: var(--clphn-ink); }
.clphn-on-forest  { background: var(--clphn-forest); color: var(--clphn-paper); }
.clphn-on-forest h1,
.clphn-on-forest h2,
.clphn-on-forest h3,
.clphn-on-forest h4 { color: var(--clphn-paper); }
.clphn-on-warm    { background: var(--clphn-paper-warm); color: var(--clphn-forest-ink); }