/* ============================================================================
   CIES 2027 — EMAIL STYLE GUIDE (CSS)
   Content-focused subset of the CIES Framer style guide, for HTML emails.

   Scope: the styles you actually set body copy and headings in — headings,
   subtitles, body text, quotes, eyebrows, and buttons — plus exact brand
   colors. Site-chrome styles (nav, logo, strand cards, stat blocks, marquee)
   are intentionally left out.

   TWO RULES FOR EMAIL:
   1. INLINE THE STYLES. Gmail and Outlook strip <style> blocks and never load
      external CSS. Use this file as your reference and copy each declaration
      onto the element:  <p style="font-family:...; font-size:15px; ...">
   2. Keep the <style> block in <head> anyway — Apple/iOS Mail honor it, and it
      carries the font @import and the mobile media query.

   COLOR ACCURACY: every value is the exact hex from the brand palette. Use hex
   only — rgb() and CSS variables are unreliable across email clients.
   ============================================================================ */


/* ---------------------------------------------------------------------------
   WEB FONT IMPORT  (head only; ignored by clients that don't support it.
   Fallbacks below keep everything on-brand when these don't load.)
   --------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:ital,wght@0,400;0,500;0,700;1,400&family=JetBrains+Mono:wght@600&display=swap');


/* ===========================================================================
   BRAND COLORS — exact hex, copy-paste inline
   =========================================================================== */
/*
   TEXT / INK
     Ink            #1F1B18   primary text
   BACKGROUNDS
     Paper          #FBF6EE   primary background
     Paper 2        #F5EEE1   alternate / card background
   ACCENTS
     Crimson        #A20E2E   primary accent (headline emphasis, CTA)
     Crimson Deep   #7A0921   deeper accent / button hover
     Coral          #EA5A66   eyebrows, kickers, highlights
     Coral Soft     #F4A0A5   soft accent / tint
   ON-DARK TEXT
     White          #FFFFFF   label on dark buttons
     Sand           #D8D1C6   muted text on dark backgrounds
*/


/* ===========================================================================
   HEADINGS
   =========================================================================== */

/* Hero H1 — main headline */
.cies-hero-h1 {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-size: 56px;
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: #1F1B18;
  margin: 0;
}

/* Hero H1 Accent — italic crimson emphasis inside the headline */
.cies-hero-h1-accent {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 56px;
  line-height: 0.92;
  letter-spacing: -0.01em;
  color: #A20E2E;
  margin: 0;
}

/* Section H2 */
.cies-h2 {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #1F1B18;
  margin: 0 0 24px 0;
}

/* Section H2 Accent — italic crimson emphasis in a section heading */
.cies-h2-accent {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #A20E2E;
  margin: 0 0 24px 0;
}

/* Sub-heading H3 */
.cies-h3 {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #1F1B18;
  margin: 0 0 16px 0;
}


/* ===========================================================================
   BODY & SUBTITLE
   =========================================================================== */

/* Body — default paragraph text */
.cies-body {
  font-family: 'Inter Display', Inter, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: #1F1B18;
  margin: 0 0 20px 0;
}

/* Subtitle — larger intro line under a headline */
.cies-subtitle {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: 0;
  color: #1F1B18;
  margin: 0 0 20px 0;
}

/* Lead / larger body — Inter, for emphasized prompts or intros */
.cies-lead {
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #1F1B18;
  margin: 0 0 20px 0;
}


/* ===========================================================================
   QUOTES
   =========================================================================== */

/* Pull Quote — large emphasized quote */
.cies-pull-quote {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: 0;
  color: #1F1B18;
  margin: 0 0 20px 0;
}

/* Pull Quote Accent — crimson italic quote */
.cies-pull-quote-accent {
  font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  font-weight: 500;
  font-style: italic;
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: 0;
  color: #A20E2E;
  margin: 0 0 20px 0;
}


/* ===========================================================================
   EYEBROW / KICKER — small uppercase label above a heading
   =========================================================================== */

/* Eyebrow — coral uppercase mono kicker */
.cies-eyebrow {
  font-family: 'JetBrains Mono', 'Courier New', Courier, monospace;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #EA5A66;
  margin: 0 0 12px 0;
}


/* ===========================================================================
   BUTTONS — build as <a>; for Outlook use table-cell padding + bg
   =========================================================================== */

/* Primary CTA — dark button, white label */
.cies-btn-dark {
  display: inline-block;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  background-color: #1F1B18;     /* Ink */
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 4px;
}

/* Accent CTA — crimson button, white label (hover: Crimson Deep #7A0921) */
.cies-btn-crimson {
  display: inline-block;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  background-color: #A20E2E;     /* Crimson */
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 4px;
}

/* Secondary CTA — light button, ink label (use on dark panels) */
.cies-btn-light {
  display: inline-block;
  font-family: Inter, Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #1F1B18;                /* Ink */
  background-color: #FBF6EE;     /* Paper */
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 4px;
}


/* ===========================================================================
   BACKGROUND HELPERS
   =========================================================================== */
.cies-bg-paper   { background-color: #FBF6EE; }  /* primary                     */
.cies-bg-paper-2 { background-color: #F5EEE1; }  /* alternate / card            */
.cies-bg-ink     { background-color: #1F1B18; }  /* dark panel — use Sand/White */
.cies-bg-crimson { background-color: #A20E2E; }  /* accent panel — use White    */


/* ===========================================================================
   MOBILE SCALE-DOWN  (Apple/iOS Mail; guide's phone breakpoint values)
   =========================================================================== */
@media only screen and (max-width: 600px) {
  .cies-hero-h1,
  .cies-hero-h1-accent { font-size: 44px !important; }
  .cies-subtitle       { font-size: 19.5px !important; }
  .cies-h2,
  .cies-h2-accent      { font-size: 32px !important; }
  .cies-h3             { font-size: 28px !important; }
  .cies-pull-quote     { font-size: 26px !important; }
}
