/* ============================================================
 * Ted Saunders — Personal Brand
 * Colors, typography, gradients, shadows, and semantic tokens.
 * ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Poppins:wght@200;300;400;500;600;700&display=swap");

/* Local brand font — Cinzel (uploaded by user, replaces Google CDN copy) */
@font-face {
  font-family: "Cinzel";
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Cinzel-VariableFont_wght.ttf") format("truetype-variations"),
       url("fonts/Cinzel-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Cinzel";
  font-weight: 400;
  src: url("fonts/Cinzel-Regular.ttf") format("truetype");
  font-display: swap;
}
/* Castoro — uploaded brand serif (Regular + Italic) */
@font-face {
  font-family: "Castoro";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("fonts/Castoro-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Castoro";
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  src: url("fonts/Castoro-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Cinzel";
  font-weight: 500;
  src: url("fonts/Cinzel-Medium.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  font-weight: 600;
  src: url("fonts/Cinzel-SemiBold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  font-weight: 700;
  src: url("fonts/Cinzel-Bold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  font-weight: 800;
  src: url("fonts/Cinzel-ExtraBold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  font-weight: 900;
  src: url("fonts/Cinzel-Black.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* ----------------------------------------------------------
   * BRAND COLORS  —  the documented palette
   * (Signature Style page · "Brand Color Palette")
   * ---------------------------------------------------------- */

  /* Base — 60% of any composition (backgrounds, frames) */
  --c-black:           #000000;
  --c-midnight-slate:  #1D252D;
  --c-stormy-blue:     #415462;
  --c-linen:           #F5EDE3;

  /* Primary — 30% (foundational identity hues) */
  --c-soft-turquoise:  #52AAA5;
  --c-espresso:        #5A3419;
  --c-espresso-deep:   #221B0F;   /* used as section dark bg */

  /* Accent — 10% (warmth + pop) */
  --c-orange:          #D95F10;
  --c-harvest-gold:    #D89733;
  --c-butter:          #F6D36B;
  --c-cream:           #FFEACA;   /* warm parchment text */
  --c-cream-deep:      #FFF0D9;

  /* Bronze gradient stops — used on buttons, dividers, the
     gold triangle, type-fills, quote-marks, etc. The signature
     visual flourish of the brand. */
  --c-bronze-1: #BF8753;
  --c-bronze-2: #FAC288;
  --c-bronze-3: #C9915C;
  --c-bronze-4: #D39B65;
  --c-bronze-5: #AB7442;

  /* Borders / hairlines */
  --c-hairline:       #D19D63;     /* the warm gold hairlines bracketing sections */
  --c-hairline-soft:  rgba(209,157,99,0.4);

  /* ----------------------------------------------------------
   * SEMANTIC SURFACE / TEXT TOKENS
   * ---------------------------------------------------------- */
  --bg:             var(--c-black);
  --bg-elev:        #12161B;         /* slightly lifted dark */
  --bg-deep:        #0E191F;
  --bg-light:       #FFFFFF;         /* used in brand guide */
  --bg-warm:        var(--c-linen);

  --fg:             #FFFFFF;
  --fg-muted:       var(--c-cream);
  --fg-dim:         rgba(255,255,255,0.6);
  --fg-on-light:    #0E191F;

  --border:         rgba(255,255,255,0.12);
  --border-warm:    var(--c-hairline);

  /* ----------------------------------------------------------
   * SIGNATURE GRADIENTS
   * ---------------------------------------------------------- */

  /* The "bronze magic" — directional polished-metal sheen.
     Use on: primary buttons, the play triangle, quote marks,
     stat-label gold accents, dividers. */
  --grad-bronze: linear-gradient(
    135deg,
    #BF8753 1%,
    #FAC288 20%,
    #C9915C 35%,
    #FAC288 55%,
    #BF8753 69%,
    #D39B65 87%,
    #AB7442 100%
  );

  /* The "butter → bronze" — softer, used on light buttons
     ("Explore the Work", "View Full Case Study"). */
  --grad-butter-bronze: linear-gradient(180deg, #FFF2C6 0%, #BD8332 100%);

  /* Espresso aura — the warm radial wash bleeding through dark
     sections. Applied behind the hero and feature panels. */
  --grad-espresso-aura: radial-gradient(
    60% 80% at 50% 0%,
    rgba(90,52,25,0.65) 0%,
    rgba(90,52,25,0) 70%
  );

  /* Vignette — fade content to pure black at the bottom of a
     full-bleed image. */
  --grad-vignette-bottom: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 100%);
  --grad-vignette-top:    linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 60%);

  /* ----------------------------------------------------------
   * TYPOGRAPHY  —  three families, three voices
   *
   *  Cinzel    → display / poster / headline ("WEILDING MAGIC")
   *  Montserrat → eyebrow labels, nav, buttons, captions
   *               (substituted for proprietary Gotham + Mont)
   *  Poppins   → body, testimonial, stat numerals
   * ---------------------------------------------------------- */
  --font-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --font-sans:    "Montserrat", "Gotham", "Helvetica Neue", system-ui, sans-serif;
  --font-body:    "Poppins", "Helvetica Neue", system-ui, sans-serif;
  --font-serif:   "Castoro", "Cinzel", "Times New Roman", serif;

  /* Type scale (1920 design width) */
  --t-hero:       149px;   /* Cinzel · the brand wordmark moment */
  --t-display-1:  96px;    /* "Through film" */
  --t-display-2:  48px;    /* "The boy who brought…" / section H1 */
  --t-stat:       102.5px; /* Poppins ExtraLight numerals */
  --t-h1:         34px;    /* "Photography" archive tiles */
  --t-h2:         29px;    /* "Stories that dare…" */
  --t-eyebrow:    24px;    /* DIRECTOR · PHILOSOPHER · ARCHITECT */
  --t-body:       24px;    /* Poppins · hero body */
  --t-button:     20px;    /* Gotham Bold · CTA labels */
  --t-meta:       20px;    /* dates, captions */

  /* Tracking */
  --track-display:  -0.022em;
  --track-eyebrow:   0.130em;   /* the wide D I R E C T O R spacing */
  --track-display-body: 0.020em;

  /* ----------------------------------------------------------
   * SPACING (8px base)
   * ---------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* Radii — corners are very subtle in this brand */
  --r-xs: 3px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 19px;     /* archive cards */
  --r-xl: 24px;     /* video player frame */
  --r-pill: 999px;

  /* Shadows — soft, warm, gold-tinted */
  --shadow-card:      0px 12px 40px rgba(0,0,0,0.05);
  --shadow-glow-gold: 0px 1px 30px rgba(240,170,64,0.16);
  --shadow-stat-gold: 0px 4px 24px rgba(232,170,101,0.49);
  --shadow-display:   0px 4px 19px rgba(0,0,0,1);
}

/* ============================================================
 *  SEMANTIC TYPE RULES
 *  Use these classes instead of hand-rolling sizes.
 * ============================================================ */

.t-hero {
  font-family: var(--font-display);
  font-size: var(--t-hero);
  line-height: 0.92;
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  color: var(--fg);
}

.t-display-1 {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-display-1);
  line-height: 1;
  color: var(--fg);
}

.t-display-2 {
  font-family: var(--font-display);
  font-size: var(--t-display-2);
  line-height: 0.92;
  letter-spacing: var(--track-display-body);
  text-transform: uppercase;
  color: var(--fg);
}

.t-eyebrow {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-eyebrow);
  line-height: 1;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg);
}

.t-eyebrow-gold {
  composes: t-eyebrow;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  background: var(--grad-bronze);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.t-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--fg-muted);
}

.t-stat {
  font-family: var(--font-body);
  font-weight: 200;
  font-size: var(--t-stat);
  line-height: 1;
  background: var(--grad-bronze);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

.t-stat-label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.4;
  color: var(--c-cream);
}

.t-meta {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-meta);
  opacity: 0.73;
  color: var(--c-cream);
}

.t-quote-body {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  color: var(--fg);
}

.t-nav {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg);
}

.t-button {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-button);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}