/* =====================================================================
   THE BANNER — Foundations: Color & Type
   Bespoke intelligence. Dark, old-world editorial. Quiet authority.

   These ARE the brand fonts (not substitutes). The @import below pulls the
   real @font-face rules for Great Vibes, Cormorant Garamond, and Inter into
   the stylesheet closure. When self-hosted font files are uploaded to fonts/,
   swap this @import for local @font-face rules — the tokens never change.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Great+Vibes&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ---- Core palette (from brand sheet) ---------------------------- */
  --ink:        #0A0A0A;  /* primary background (near-black)           */
  --ink-raised: #0D0D0D;  /* cards / nav / raised surfaces             */
  --ink-line:   #1A1A1A;  /* hairline borders                          */
  --paper:      #FAFAF8;  /* primary text / wordmark (warm white)      */
  --umber:      #9E7050;  /* THE accent — used sparingly               */
  --muted:      #C0C0C0;  /* secondary text                            */

  /* ---- Derived / semantic color tokens ---------------------------- */
  --bg:          var(--ink);
  --surface:     var(--ink-raised);
  --surface-2:   #111111;          /* slightly raised within a surface */
  --border:      var(--ink-line);
  --border-soft: #141414;          /* even quieter hairline            */

  --fg-1: var(--paper);            /* primary text                     */
  --fg-2: var(--muted);            /* secondary text                   */
  --fg-3: #7A7A78;                 /* tertiary / captions / meta       */
  --fg-4: #4A4A48;                 /* faintest — timestamps, disabled  */

  --accent:        var(--umber);
  --accent-hover:  #B08763;        /* umber lifted ~8% for hover       */
  --accent-press:  #875E42;        /* umber dropped for active         */
  --accent-tint:   rgba(158,112,80,0.12); /* umber wash on dark        */
  --accent-line:   rgba(158,112,80,0.35); /* umber hairline            */

  --on-accent: #0A0A0A;            /* text sitting on umber fills      */

  /* protection scrim for text over imagery/video */
  --scrim: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.55) 55%, rgba(10,10,10,0.92) 100%); /* @kind other */

  /* ---- Type families --------------------------------------------- */
  --font-script:  'Great Vibes', cursive;                  /* WORDMARK ONLY */
  --font-display: 'Cormorant Garamond', 'Times New Roman', serif; /* editorial */
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Type scale (editorial — generous, airy; fluid clamp lengths) -- */
  --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.84rem); /* @kind other */
  --step-0:  clamp(0.95rem, 0.92rem + 0.2vw, 1.0625rem); /* @kind other */
  --step-1:  clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem); /* @kind other */
  --step-2:  clamp(1.6rem, 1.4rem + 0.7vw, 2rem); /* @kind other */
  --step-3:  clamp(2.1rem, 1.7rem + 1.5vw, 3rem); /* @kind other */
  --step-4:  clamp(2.8rem, 2.1rem + 3vw, 4.5rem); /* @kind other */
  --step-5:  clamp(3.6rem, 2.4rem + 5vw, 6.5rem); /* @kind other */

  /* ---- Spacing scale (8px base, editorial rhythm) ---------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---- Radii (restrained — never pill) --------------------------- */
  --radius-0: 0px;     /* default for editorial surfaces / buttons    */
  --radius-1: 2px;     /* inputs, small chrome                        */
  --radius-2: 4px;     /* cards, raised surfaces                      */
  --radius-round: 50%; /* avatars / dots only                         */

  /* ---- Elevation (whisper-soft, never glossy) -------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(0,0,0,0.4);
  --shadow-2: 0 8px 30px -12px rgba(0,0,0,0.7);
  --shadow-3: 0 24px 60px -20px rgba(0,0,0,0.85);

  /* ---- Motion (slow, considered — no bounce) --------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-1: 160ms; /* @kind other */
  --dur-2: 280ms; /* @kind other */
  --dur-3: 520ms; /* @kind other */

  /* ---- Letterspacing --------------------------------------------- */
  --track-label: 0.22em; /* @kind other */
  --track-tight: -0.01em; /* @kind other */
}

/* =====================================================================
   Base element styles  (apply via the .banner scope or globally)
   ===================================================================== */

.banner, body.banner {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* ---- Wordmark: Great Vibes, ONLY for "The Banner" ---------------- */
.wordmark {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--fg-1);
  line-height: 1;
  letter-spacing: 0;
}

/* ---- Editorial headlines & taglines: Cormorant Garamond --------- */
.display, h1.banner-h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-4);
  line-height: 1.05;
  letter-spacing: var(--track-tight);
  color: var(--fg-1);
  text-wrap: balance;
}
h2.banner-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--step-3);
  line-height: 1.12;
  color: var(--fg-1);
  text-wrap: balance;
}
h3.banner-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--fg-1);
}
.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step-2);
  color: var(--fg-2);
  letter-spacing: 0.01em;
}

/* ---- UI / body: Inter ------------------------------------------- */
p.banner-p, .body {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--fg-2);
  text-wrap: pretty;
  max-width: 64ch;
}

/* ---- Section label: small, uppercase, tracked, umber ------------ */
.label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--accent);
}

/* ---- Meta / eyebrow neutral variant ----------------------------- */
.meta {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--fg-3);
}