/* ============================================================
   STRAVION — Global stylesheet entry point
   Consumers link THIS one file. It is a manifest of @imports only;
   every token, font and base rule lives in the files below.
   ============================================================ */

/* ============================================================
   STRAVION — Webfonts
   Wordmark & monogram:  Century Gothic Regular (proprietary system font,
                         not webfont-able) with Jost — its closest
                         geometric web relative — self-hosted as fallback.
   Everything else:      DM Sans (variable) — worked at the light end
   Self-hosted Latin subsets. Both are variable files spanning the
   full weight axis, so one binary covers every weight we use.
   ============================================================ */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../assets/fonts/dmsans-variable.woff2") format('woff2');
}

@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 100 1000;
  font-display: swap;
  src: url("../assets/fonts/dmsans-variable-italic.woff2") format('woff2');
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/jost-variable.woff2") format('woff2');
}

/* ---- Brand display / signature faces (user-uploaded, self-hosted) ----
   Decorative faces for editorial moments — pull quotes, signatures,
   feature numerals. NOT for body or the wordmark. */
@font-face {
  font-family: 'Dominik';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/dominik.ttf") format('truetype');
}

@font-face {
  font-family: 'ZY Vigorous';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/zy-vigorous.ttf") format('truetype');
}

@font-face {
  font-family: 'ZY Cherish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/zy-cherish.ttf") format('truetype');
}

/* ============================================================
   STRAVION — Colour
   A warm, low-key palette: espresso darks, gold accents, cream
   lights. Gold is precious — thin rules, eyebrows, single accents.
   Application ratio ≈ 70% dark/neutral · 25% cream & tan · 5% gold.
   Slate Ink + Mist Grey are an optional cool-neutral pairing.
   ============================================================ */

:root {
  /* ---- Base palette (raw values) ---- */
  --ink:           #0E0D0C; /* Base Ink — primary text & backgrounds */
  --espresso-deep: #321D0C; /* Deep Espresso — rich dark fields */
  --espresso:      #462A14; /* Espresso — secondary dark tone */

  --gold:          #C3A56F; /* Brand Gold — accents, rules, eyebrows */
  --gold-soft:     #B19158; /* Soft Gold — subdued accent / labels */

  --tan-warm:      #E4CBA3; /* Warm Tan — light accent on dark */
  --tan:           #D8B37E; /* Tan — mid warm tone */
  --sienna:        #B78145; /* Sienna — depth & gradients */
  --umber:         #7A4920; /* Umber — hairlines & shadow */

  --cream:         #F0ECE1; /* Cream — light backgrounds */
  --off-white:     #FDFCFA; /* Off-White — page base */

  --slate-ink:     #0E1622; /* Slate Ink — cool dark · alt ground */
  --mist:          #BFC7D0; /* Mist Grey — cool neutral · alt text */

  /* ---- Cream channel (for translucent neutrals on dark) ---- */
  --cream-rgb: 240, 236, 225; /* @kind color */
  --ink-rgb:   14, 13, 12;     /* @kind color */
  --gold-rgb:  195, 165, 111;  /* @kind color */

  /* ============================================================
     SEMANTIC ALIASES — DARK GROUND (the brand's default register)
     Most Stravion expressions live on ink/espresso fields.
     ============================================================ */
  --surface-base:    var(--ink);          /* page background */
  --surface-deep:    var(--espresso-deep); /* rich panel */
  --surface-raised:  var(--espresso);      /* raised field */
  --surface-card:    rgba(var(--cream-rgb), 0.04); /* card on dark */
  --surface-card-hover: rgba(var(--cream-rgb), 0.07);

  --text-primary:    var(--cream);                       /* headlines & body */
  --text-secondary:  rgba(var(--cream-rgb), 0.72);       /* supporting copy */
  --text-muted:      rgba(var(--cream-rgb), 0.45);       /* captions, meta */
  --text-faint:      rgba(var(--cream-rgb), 0.28);       /* hairline labels */
  --text-on-accent:  var(--ink);

  --eyebrow:         var(--gold-soft);     /* tracked eyebrow text */
  --accent:          var(--gold);          /* the single gold accent */
  --accent-quiet:    var(--gold-soft);

  --rule:            rgba(var(--gold-rgb), 0.42); /* thin gold hairline */
  --rule-faint:      rgba(var(--cream-rgb), 0.12);
  --border-subtle:   rgba(var(--cream-rgb), 0.12);
  --border-strong:   rgba(var(--cream-rgb), 0.24);

  /* ============================================================
     ATMOSPHERE GRADIENTS
     The signature "Capital Intelligence" ground: an ink field
     warming to a low bronze horizon, with a soft light at centre.
     ============================================================ */
  --gradient-atmosphere:
    radial-gradient(120% 80% at 50% 118%,
      rgba(183, 129, 69, 0.55) 0%,
      rgba(70, 42, 20, 0.28) 34%,
      rgba(14, 13, 12, 0) 64%),
    linear-gradient(177deg,
      #0E0D0C 0%,
      #15110D 38%,
      #2A1E12 72%,
      #3C2A18 100%); /* @kind color */

  --gradient-slate:
    radial-gradient(120% 80% at 50% 118%,
      rgba(120, 140, 165, 0.30) 0%,
      rgba(14, 22, 34, 0) 60%),
    linear-gradient(177deg, #0E1622 0%, #0E141F 60%, #131C2A 100%); /* @kind color */

  /* Lower protection scrim for copy over imagery */
  --scrim-bottom: linear-gradient(180deg, rgba(14,13,12,0) 0%, rgba(14,13,12,0.55) 55%, rgba(14,13,12,0.92) 100%); /* @kind color */
  --scrim-top:    linear-gradient(0deg, rgba(14,13,12,0) 0%, rgba(14,13,12,0.7) 100%); /* @kind color */
}

/* ============================================================
   LIGHT GROUND — cream / off-white pages
   Apply `.on-cream` (or set data-ground="cream") to flip the
   semantic aliases for editorial light layouts.
   ============================================================ */
.on-cream,
[data-ground="cream"] {
  --surface-base:    var(--off-white);
  --surface-deep:    var(--cream);
  --surface-raised:  #FFFFFF;
  --surface-card:    #FFFFFF;
  --surface-card-hover: var(--cream);

  --text-primary:    var(--ink);
  --text-secondary:  rgba(var(--ink-rgb), 0.70);
  --text-muted:      rgba(var(--ink-rgb), 0.50);
  --text-faint:      rgba(var(--ink-rgb), 0.32);
  --text-on-accent:  var(--cream);

  --eyebrow:         var(--gold-soft);
  --accent:          var(--gold-soft);
  --accent-quiet:    var(--sienna);

  --rule:            rgba(var(--gold-rgb), 0.55);
  --rule-faint:      rgba(var(--ink-rgb), 0.12);
  --border-subtle:   rgba(var(--ink-rgb), 0.12);
  --border-strong:   rgba(var(--ink-rgb), 0.22);
}

/* Cool-neutral alternate ground (slate + mist) */
.on-slate,
[data-ground="slate"] {
  --surface-base:   var(--slate-ink);
  --surface-deep:   #0B1019;
  --surface-raised: #131C2A;
  --text-primary:   var(--mist);
  --text-secondary: rgba(191, 199, 208, 0.72);
  --text-muted:     rgba(191, 199, 208, 0.45);
  --eyebrow:        var(--mist);
  --accent:         var(--mist);
}

/* ============================================================
   STRAVION — Typography
   Wordmark/monogram: Century Gothic Regular (Jost is the web fallback),
                      one weight & one tracking everywhere (--weight-wordmark,
                      --tracking-wordmark ≈ 0.5em).
   Everything else:   DM Sans, worked at the LIGHT end (300),
   with selective 600 for hierarchy. Generous tracking on
   uppercase eyebrows; tight, near-zero tracking on display.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-sans:    'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Wordmark / monogram — Jost (self-hosted, free Google geometric sans), the chosen
     web stand-in for Century Gothic. Century Gothic stays in the stack so any machine
     with the proprietary brand font installed still uses it; Jost renders everywhere else.
     One weight (--weight-wordmark) and one tracking (--tracking-wordmark) throughout. */
  --font-display: 'Jost', 'Century Gothic', 'CenturyGothic', 'URW Gothic', 'Avant Garde', system-ui, sans-serif;

  /* ---- Decorative / display faces (editorial moments only) ---- */
  --font-signature: 'ZY Vigorous', Georgia, serif; /* @kind font */   /* elegant italic display */
  --font-script:    'ZY Cherish', Georgia, serif; /* @kind font */    /* refined italic display */
  --font-feature:   'Dominik', Georgia, 'Times New Roman', serif; /* @kind font */ /* upright serif feature face */

  /* ---- Weights (work at the light end) ---- */
  --weight-light:    300; /* headlines & body — the default register */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600; /* selective emphasis & subheads */
  --weight-bold:     700;

  /* The wordmark weight — matches the master artwork, which is a REGULAR-weight
     geometric sans (Century Gothic), NOT bold. Every "STRAVION" rendering uses
     this single token so font, thickness & tracking stay identical everywhere. */
  --weight-wordmark: 400; /* @kind font */

  /* ---- Tracking ---- */
  --tracking-wordmark: 0.5em;   /* the mark, ≈0.58em at large sizes */
  --tracking-eyebrow:  0.4em;   /* uppercase tracked labels */
  --tracking-label:    0.18em;  /* smaller uppercase meta */
  --tracking-wide:     0.08em;
  --tracking-normal:   0;
  --tracking-display:  -0.01em; /* tight on display sizes */
  --tracking-tight:    -0.02em;

  /* ---- Line heights ---- */
  --leading-display: 1.06;
  --leading-section: 1.12;
  --leading-snug:    1.3;
  --leading-body:    1.7;
  --leading-lead:    1.55;

  /* ============================================================
     TYPE SCALE — screen / interface (rem, base 16px)
     Honours the brand's print ratios (Display 40 · Section 26 ·
     Lead 14 · Body 10.5 …) scaled up for screens & slides.
     Each token pairs a size with its intended leading / weight
     via the .type-* classes below.
     ============================================================ */
  --text-display-xl: clamp(3rem, 7.5vw, 6.5rem); /* hero statements */
  --text-display:    clamp(2.25rem, 4vw, 3.25rem); /* 40-ish display */
  --text-section:    clamp(1.5rem, 2.4vw, 2rem);   /* 26 section */
  --text-lead:       clamp(1.125rem, 1.5vw, 1.375rem); /* atmospheric lead */
  --text-subhead:    1.0625rem;   /* 17 — semibold hierarchy */
  --text-body-lg:    1.125rem;    /* 18 */
  --text-body:       1rem;        /* 16 */
  --text-caption:    0.8125rem;   /* 13 */
  --text-eyebrow:    0.75rem;     /* 12 — tracked uppercase */
  --text-micro:      0.6875rem;   /* 11 — finest meta */
}

/* ---- Base element defaults (opt-in via the stylesheet on a root) ---- */
.stravion,
.type-base {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-normal);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   TYPE ROLES — utility classes mirroring the brand scale
   ============================================================ */
.type-display-xl {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-display-xl);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.type-display {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.type-section {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-section);
  line-height: var(--leading-section);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.type-lead {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
  color: var(--text-secondary);
  text-wrap: pretty;
}
.type-subhead {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-subhead);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
}
.type-body {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  text-wrap: pretty;
}
.type-caption {
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-caption);
  line-height: var(--leading-lead);
  color: var(--text-muted);
}
.type-eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-eyebrow);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--eyebrow);
}
.type-label {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  font-size: var(--text-micro);
  line-height: 1.2;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Editorial italic flourish — DM Sans italic, light */
.type-flourish {
  font-style: italic;
  font-weight: var(--weight-light);
}

/* Selective emphasis inside a light headline: a single 600 word */
.emph { font-weight: var(--weight-semibold); }

/* ============================================================
   STRAVION — Spacing & layout rhythm
   "Air is the luxury signal." A calm 4px base scale, plus a set
   of generous editorial rhythm steps for hero compositions.
   Layout rule: hero copy anchors the LOWER THIRD; the upper
   two-thirds hold atmosphere or quiet space.
   ============================================================ */

:root {
  /* ---- Base 4px scale ---- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-12:  6rem;     /* 96 */
  --space-16:  8rem;     /* 128 */
  --space-20:  10rem;    /* 160 */

  /* ---- Editorial rhythm (vertical cadence within a frame) ---- */
  --rhythm-eyebrow-to-hero: var(--space-5); /* eyebrow → hero headline */
  --rhythm-hero-to-support: var(--space-5); /* hero → supporting line */
  --rhythm-block:           var(--space-9); /* between content blocks */

  /* ---- Page framing ---- */
  --gutter:        clamp(1.25rem, 5vw, 5rem); /* @kind spacing */
  --gutter-tight:  clamp(1rem, 3vw, 2.5rem); /* @kind spacing */
  --measure:       64ch; /* @kind spacing */
  --measure-tight: 42ch; /* @kind spacing */
  --content-max:   1280px; /* @kind spacing */
  --content-wide:  1440px; /* @kind spacing */

  /* ---- Hairline weight ---- */
  --hairline: 1px; /* @kind spacing */
}

/* ============================================================
   STRAVION — Effects: radii, shadows, blur, motion
   Architectural restraint. Corners are near-square; depth comes
   from gradient and hairline, not heavy shadow. Motion is a
   slow, eased fade — never bounce, never spring.
   ============================================================ */

:root {
  /* ---- Corner radii (minimal — editorial, architectural) ---- */
  --radius-none: 0;
  --radius-xs:   2px;   /* default for inputs & small chips */
  --radius-sm:   4px;   /* cards, tiles */
  --radius-md:   8px;
  --radius-lg:   14px;  /* large media panels */
  --radius-pill: 999px; /* pill buttons / tags */
  --radius-circle: 50%;

  /* ---- Shadows (soft, low, warm-black — used sparingly) ---- */
  --shadow-none: none;
  --shadow-sm:  0 1px 2px rgba(14, 13, 12, 0.20);
  --shadow-md:  0 8px 24px -8px rgba(14, 13, 12, 0.45);
  --shadow-lg:  0 24px 60px -16px rgba(14, 13, 12, 0.55);
  /* On cream pages, a quieter ambient lift */
  --shadow-card: 0 18px 48px -24px rgba(70, 42, 20, 0.30);

  /* ---- Hairline borders (token-ready) ---- */
  --border-hairline: var(--hairline) solid var(--border-subtle);
  --border-gold:     var(--hairline) solid var(--rule);

  /* ---- Blur / glass (used only over imagery) ---- */
  --blur-sm: blur(8px); /* @kind other */
  --blur-md: blur(18px); /* @kind other */
  --glass-dark:  rgba(14, 13, 12, 0.55); /* @kind color */
  --glass-light: rgba(240, 236, 225, 0.08); /* @kind color */

  /* ---- Motion: slow, eased, no bounce ---- */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast:   180ms; /* @kind other */
  --duration-base:   320ms; /* @kind other */
  --duration-slow:   600ms; /* @kind other */
  --duration-reveal: 900ms; /* @kind other */

  --transition-base: all var(--duration-base) var(--ease-standard); /* @kind other */
  --transition-color: color var(--duration-fast) var(--ease-standard),
                      background-color var(--duration-fast) var(--ease-standard),
                      border-color var(--duration-fast) var(--ease-standard),
                      opacity var(--duration-fast) var(--ease-standard); /* @kind other */
}

/* ============================================================
   STRAVION — Base & primitives
   Light reset + brand-level helpers used across cards, kits and
   slides: the atmosphere ground, the wordmark, the gold hairline,
   and the editorial reveal.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

/* Opt-in root: add class="stravion" to a page/body to adopt the
   brand defaults without forcing them on every consumer element. */
.stravion {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-light);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-primary);
  background: var(--surface-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.stravion ::selection { background: rgba(var(--gold-rgb), 0.30); color: var(--cream); }

/* ---- Atmosphere grounds ---- */
.ground-atmosphere { background: var(--gradient-atmosphere); }
.ground-slate      { background: var(--gradient-slate); }
.ground-ink        { background: var(--ink); }
.ground-cream      { background: var(--off-white); }

/* ============================================================
   THE WORDMARK  —  Century Gothic Regular (Jost fallback), wide tracking, title-case.
   Use <span class="wordmark">Stravion</span>. The tracking lives
   on the letters; a trailing letter gains the full tracking so
   the mark reads optically centred — offset with negative margin.
   ============================================================ */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-wordmark);
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
  display: inline-block;
  /* compensate for the trailing letter's tracking */
  margin-right: calc(-1 * var(--tracking-wordmark));
  color: var(--text-primary);
  line-height: 1;
}
.wordmark--gold { color: var(--gold); }
.wordmark--cream { color: var(--cream); }
.wordmark--ink { color: var(--ink); }

/* Stacked lockup with descriptor */
.lockup { display: inline-flex; flex-direction: column; align-items: center; gap: 0.5em; }
.lockup .descriptor {
  font-family: var(--font-sans);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5em;
  font-size: 0.26em;          /* ≤ 26% of wordmark cap height */
  color: var(--text-secondary);
  margin-right: -0.5em;       /* compensate trailing tracking */
}

/* The 'S' monogram */
.monogram {
  font-family: var(--font-display);
  font-weight: var(--weight-wordmark);
  letter-spacing: 0;
  display: inline-grid;
  place-items: center;
  line-height: 1;
}

/* ============================================================
   THE GOLD HAIRLINE  —  a single thin rule signals structure.
   Never frame a whole composition; one rule beneath a headline
   or in the footer.
   ============================================================ */
.hairline {
  border: 0;
  height: var(--hairline);
  background: var(--rule);
  width: 100%;
}
.hairline--short { width: 56px; }
.hairline--faint { background: var(--rule-faint); }

/* ============================================================
   EDITORIAL REVEAL  —  slow upward fade. Base state is the
   VISIBLE end-state so print / reduced-motion show content.
   ============================================================ */
/* Resting state is always the visible end-state — never hide content behind a
   timeline. (Capture, print, PDF and frozen-timeline contexts must show copy.)
   A whisper-subtle upward settle is applied via @starting-style on TRANSFORM
   ONLY, so even a frozen start leaves content fully opaque and legible. */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reveal { transition: transform var(--duration-reveal) var(--ease-out); }
  @starting-style {
    .reveal { transform: translateY(12px); }
  }
  .reveal-2 { transition-delay: 120ms; }
  .reveal-3 { transition-delay: 240ms; }
  .reveal-4 { transition-delay: 360ms; }
}

/* Utility: the lower-third anchor for hero compositions */
.lower-third {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
}