/* ============================================================
   NEXT STAGE — Colour & type foundations
   Display/headlines : Freight Text Light Italic (supplied)
   Body / labels     : Source Sans 3 (stand-in for Freight Sans; swap when licensed webfonts arrive)
   All fonts are self-hosted from assets/fonts.
   ============================================================ */

@font-face {
  font-family: "Freight Text";
  src: url("../fonts/freight-text-light-italic.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: block; /* preloaded and small: avoids a flash of a fallback serif */
}

@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-sans-3-normal-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-sans-3-normal-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  /* ---- BRAND COLOURS ------------------------------------- */
  --oxblood:       #58160C;  /* primary — dominant */
  --warm-stone:    #FFECD5;  /* primary — dominant */
  --burnt-umber:   #8F2500;  /* secondary */
  --signal-orange: #FE5002;  /* secondary — emphasis / CTA only, sparingly */
  --dusty-mauve:   #B37793;  /* secondary */

  /* ---- EXTENDED / DERIVED -------------------------------- */
  --oxblood-deep:  #3D0E06;  /* near-black oxblood for text on stone */
  --oxblood-tint:  #74281A;  /* hover lift on oxblood surfaces */
  --stone-light:   #FFF1E0;  /* lifted page background */
  --stone-deep:    #EBD3B6;  /* stone borders / dividers */
  --ink:           #58160C;  /* darkest tone = Oxblood (no separate ink) */
  --cream:         #FFF6EC;  /* lightest surface */

  /* ---- SEMANTIC SURFACES & TEXT -------------------------- */
  --bg:            var(--cream);
  --bg-stone:      var(--warm-stone);
  --bg-oxblood:    var(--oxblood);
  --surface:       #FFFFFF;

  --fg1:           var(--ink);        /* primary text */
  --fg2:           #6B5546;           /* secondary / muted text */
  --fg3:           #9A8675;           /* tertiary / captions */
  --fg-on-dark:    var(--warm-stone); /* text on oxblood */
  --fg-on-dark-2:  #C99E86;           /* muted text on oxblood */

  --line:          var(--stone-deep); /* hairline borders */
  --line-soft:     #F3E2CC;

  --accent:        var(--signal-orange);
  --accent-hover:  #E54600;

  /* ---- TYPE FAMILIES ------------------------------------- */
  --serif-display: "Freight Text", serif;
  --serif-roman:   "Freight Text", serif;  /* only the Light Italic cut exists, so serif text is italic */
  --sans:          "Source Sans 3", "Helvetica Neue", Arial, sans-serif;

  /* ---- TYPE SCALE (fluid, editorial) --------------------- */
  --t-display:  clamp(3.25rem, 7vw, 6rem);     /* hero headline */
  --t-h1:       clamp(2.5rem, 4.5vw, 4rem);
  --t-h2:       clamp(2rem, 3.2vw, 3rem);
  --t-h3:       clamp(1.5rem, 2.2vw, 2rem);
  --t-h4:       1.375rem;
  --t-lead:     clamp(1.125rem, 1.5vw, 1.5rem); /* intro paragraph */
  --t-body:     1.0625rem;
  --t-small:    0.9375rem;
  --t-label:    0.75rem;   /* eyebrows / nav */

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

  /* ---- RADII (restrained) -------------------------------- */
  --r-sm: 2px;   --r-md: 4px;   --r-lg: 8px;   --r-pill: 999px;

  /* ---- SHADOWS (soft, warm-tinted, used sparingly) ------- */
  --shadow-sm: 0 1px 2px rgba(43, 20, 16, 0.06);
  --shadow-md: 0 8px 28px -12px rgba(43, 20, 16, 0.18);
  --shadow-lg: 0 24px 64px -24px rgba(43, 20, 16, 0.28);

  /* ---- MOTION -------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  420ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg2);
}

.display {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-display);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--oxblood);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h1);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--oxblood);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.06;
  color: var(--oxblood);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--serif-roman);
  font-weight: 400;
  font-size: var(--t-h3);
  line-height: 1.2;
  color: var(--ink);
}

h4, .h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: var(--t-h4);
  line-height: 1.3;
  color: var(--ink);
}

.lead {
  font-family: var(--serif-roman);
  font-weight: 300;
  font-size: var(--t-lead);
  line-height: 1.45;
  color: var(--fg1);
  text-wrap: pretty;
}

p, .body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--fg1);
  text-wrap: pretty;
}

.small { font-size: var(--t-small); line-height: 1.5; }
.caption {
  font-family: var(--sans);
  font-size: var(--t-small);
  color: var(--fg3);
}

a { color: var(--oxblood); text-underline-offset: 3px; }