/* ═══════════════════════════════════════════════════════════════════════════
   THE STORYTELLING COLLAB — COLORS & TYPE
   Foundational design tokens. Import this file first.

   Voice of the system: "Goldman Sachs pitchbook meets Condé Nast editorial."
   Warm parchment foundation · deep harbor blue · rust amber accent ·
   Fraunces display serif + Plus Jakarta Sans body.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Webfonts ──────────────────────────────────────────────────────────────
   Fraunces (display) + Plus Jakarta Sans (body), loaded from Google Fonts.
   Fraunces is a variable optical-size serif — set font-variation-settings
   'opsz' 144 for display headlines, 'opsz' 96 for mid-size moments.            */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,300;1,9..144,400;1,9..144,500;1,9..144,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ── PARCHMENT / WOOD FOUNDATION ──────────────────────────────────────────
     The brand sits on warm white-oak. Every surface is one of these.          */
  --ivory:    #EADDBE;   /* primary wood/parchment background — the canvas    */
  --cream:    #DCC9A8;   /* slightly deeper parchment, for banded sections     */
  --paper:    #F4EBD3;   /* lightest warm paper — text on dark, soft cards     */
  --paper-l:  #FBF4DE;   /* near-white paper — the "hire" comparison card      */

  /* ── INK / NEUTRALS (warm grey-browns, never pure black) ──────────────────*/
  --ink:      #1F1D19;   /* primary text — warm near-black                     */
  --char:     #2D2B26;   /* charcoal — dark editorial section background       */
  --soft:     #4A463E;   /* secondary text, body copy on light                 */
  --stone:    #807A6E;   /* muted captions, attributions, eyebrow on light     */
  --mist:     #B8B1A2;   /* faintest text, disabled                            */
  --line:     #C8B894;   /* hairline borders on parchment                      */
  --line-l:   #DBCBA8;   /* lighter hairline, inner dividers                   */

  /* ── HARBOR / ROYAL BLUE (the only dark accent — never black) ─────────────*/
  --harbor:   #1B3552;   /* deep harbor blue — primary CTAs                    */
  --harbor-d: #112538;   /* harbor pressed / deep                              */
  --royal:    #15315C;   /* royal blue — dark hero sections, closing           */
  --royal-d:  #0E2347;   /* royal deep — footer                                */

  /* ── AMBER / RUST (golden-hour accent — used sparingly) ───────────────────*/
  --amber:    #C8753C;   /* rust amber — italic emphasis on hero subhead       */
  --amber-l:  #E8985C;   /* lighter amber — illustration sun, warm glows       */
  --gold:     #C8985C;   /* gold — chapter-rail active state, section eyebrows  */

  /* ── TYPE FAMILIES ────────────────────────────────────────────────────────*/
  --serif-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans-body:     'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ── OPTICAL-SIZE PRESETS (apply with font-variation-settings) ────────────*/
  --opsz-display: 'opsz' 144;   /* headlines, display moments                 */
  --opsz-mid:     'opsz' 96;    /* sub-display, names, list items             */

  /* ── DISPLAY TYPE SCALE (Fraunces) ────────────────────────────────────────
     Fluid clamps tuned to the cinematic landing page.                         */
  --fs-hero:      clamp(3rem, 8vw, 7.5rem);     /* hero headline               */
  --fs-display:   clamp(3rem, 7vw, 6.5rem);     /* manifesto, statement        */
  --fs-name:      clamp(4.5rem, 13vw, 12rem);   /* founder poster credit       */
  --fs-h2:        clamp(2.4rem, 5vw, 4.5rem);   /* section headlines           */
  --fs-h3:        1.6rem;                        /* card headlines              */
  --fs-lede:      clamp(1.1rem, 1.5vw, 1.4rem);  /* italic ledes               */

  /* ── BODY TYPE SCALE (Plus Jakarta Sans) ──────────────────────────────────*/
  --fs-body:      1rem;        /* default running text                         */
  --fs-small:     0.88rem;     /* dense copy, list values                      */
  --fs-eyebrow:   0.7rem;      /* uppercase eyebrows / labels                  */
  --fs-micro:     0.62rem;     /* vertical marks, footnotes                    */

  /* ── LETTERSPACING ────────────────────────────────────────────────────────*/
  --ls-display:   -0.035em;    /* tight display tracking                       */
  --ls-tight:     -0.02em;     /* sub-display                                  */
  --ls-eyebrow:   0.24em;      /* uppercase eyebrow tracking                   */
  --ls-rail:      0.28em;      /* widest — chapter labels                      */

  /* ── LINE HEIGHT ──────────────────────────────────────────────────────────*/
  --lh-hero:      0.95;
  --lh-display:   1.05;
  --lh-body:      1.55;
  --lh-lede:      1.65;

  /* ── SPACING SCALE (rem) ──────────────────────────────────────────────────*/
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2.5rem;
  --sp-5: 3.5rem;     /* page gutter                                          */
  --sp-6: 6rem;
  --sp-7: 9rem;       /* standard chapter vertical padding                    */
  --sp-8: 12rem;      /* manifesto / proof generous padding                   */
  --sp-9: 14rem;      /* statement / invitation — maximum air                 */

  /* ── BORDERS ──────────────────────────────────────────────────────────────
     The brand is square. Corners are sharp. Radius is near-zero by default.   */
  --radius:       0px;         /* default — editorial, no rounding             */
  --radius-soft:  2px;         /* the only softening — boats, tiny chips       */
  --hairline:     1px solid var(--line);
  --rule:         2px solid var(--ink);    /* the editorial rule               */

  /* ── ELEVATION (used very sparingly — this brand prefers borders) ─────────*/
  --shadow-text:  0 2px 30px rgba(15, 18, 28, 0.4);   /* type over imagery    */
  --shadow-soft:  0 1px 24px rgba(31, 29, 25, 0.08);  /* the rare raised card */

  /* ── MOTION ───────────────────────────────────────────────────────────────
     Slow, cinematic, never bouncy. Everything eases in and settles.           */
  --ease:      cubic-bezier(.2, .8, .2, 1);
  --dur-fast:  0.25s;
  --dur-mid:   0.4s;
  --dur-slow:  1s;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE WOOD FOUNDATION
   Layered SVG turbulence → warm white-oak grain. Apply to <body> or any
   surface that should read as the brand's foundational parchment texture.
   Dark sections (royal, char, cream) cover this; transparent sections sit on it.
   ═══════════════════════════════════════════════════════════════════════════ */
.wood-foundation,
body.wood-foundation {
  background-color: var(--ivory);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 1400' preserveAspectRatio='none'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.006 0.42' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.27 0 0 0 0 0.13 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.2 0 0 0 0 0.08 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 1400px 1400px, 400px 400px;
  background-repeat: repeat, repeat;
  background-attachment: fixed;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEMANTIC TYPE CLASSES
   Drop these on elements directly. They encode the brand's editorial register.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Base */
body {
  font-family: var(--sans-body);
  color: var(--ink);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

/* Hero headline — the largest moment. Italic emphasis is in ink, never gold. */
.t-hero {
  font-family: var(--serif-display);
  font-size: var(--fs-hero);
  font-weight: 400;
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-display);
  font-variation-settings: var(--opsz-display);
}
.t-hero em { font-style: italic; font-weight: 400; }

/* Display headline — manifesto, statement, big single lines */
.t-display {
  font-family: var(--serif-display);
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-variation-settings: var(--opsz-display);
}
.t-display em { font-style: italic; font-weight: 400; }

/* Section headline (h2) */
.t-h2 {
  font-family: var(--serif-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-tight);
  font-variation-settings: var(--opsz-display);
}
.t-h2 em { font-style: italic; }

/* Card / sub headline (h3) */
.t-h3 {
  font-family: var(--serif-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-variation-settings: var(--opsz-mid);
}
.t-h3 em { font-style: italic; }

/* Lede — the italic serif paragraph that introduces or resolves a section */
.t-lede {
  font-family: var(--serif-display);
  font-size: var(--fs-lede);
  font-style: italic;
  font-weight: 300;
  color: var(--soft);
  line-height: var(--lh-lede);
  font-variation-settings: var(--opsz-display);
}

/* Body — running sans copy */
.t-body {
  font-family: var(--sans-body);
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--soft);
  line-height: var(--lh-body);
}

/* Eyebrow — uppercase label with wide tracking. Often paired with a dash rule.*/
.t-eyebrow {
  font-family: var(--sans-body);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink);
}

/* Chapter number — serif, wide-tracked, with a leading rule */
.t-chapter-num {
  font-family: var(--serif-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-rail);
  text-transform: uppercase;
  color: var(--ink);
}

/* Roman-numeral rail item (i, ii, iii…) — the editorial signal */
.t-rail {
  font-family: var(--serif-display);
  font-size: 0.78rem;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--stone);
  font-variation-settings: var(--opsz-mid);
}

/* Attribution — small italic caps under statements */
.t-attr {
  font-family: var(--serif-display);
  font-size: 0.78rem;
  font-style: italic;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone);
}