/* tokens/typography.css */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Jost:wght@300;400;500&display=swap');

:root {
  /* ─── TYPE ROLES — the only names a client brand guide needs to map to ───
     Set the family + size for each role in tokens/brand.css. Everything else
     in the system reads these. */
  --font-h1: 'Marcellus', Georgia, serif;
  --font-h2: var(--font-h1);
  --font-h3: var(--font-h1);
  --font-body: 'Jost', 'Helvetica Neue', Helvetica, sans-serif;
  --font-button: var(--font-body);
  --font-link: var(--font-body);
  --font-eyebrow: var(--font-body);

  --text-h1: clamp(56px, 7.5vw, 128px);   /* hero headline */
  --text-h2: clamp(40px, 5vw, 84px);      /* section headline */
  --text-h3: 24px;                        /* card / group heading */
  --text-body: 17px;
  --text-button: 14px;                    /* buttons + CTA links */
  --text-link: 14px;
  --text-eyebrow: 14px;                   /* uppercase kicker */
  --text-caption: 12px;                   /* meta, specs, captions */

  --weight-h1: 400;
  --weight-h2: 400;
  --weight-h3: 400;
  --weight-body: 400;
  --weight-button: 400;

  --tracking-h1: -1px;
  --tracking-caps: 3px;                   /* uppercase eyebrow/button tracking */
  --leading-display: 1.04;
  --leading-body: 1.6;
  --case-button: uppercase;               /* set to none for sentence-case brands */

  /* ─── Legacy aliases — templates authored before the role names ─── */
  --font-display: var(--font-h1);
  --text-hero: var(--text-h1);
  --text-hero-sm: var(--text-h2);
}

/* tokens/colors.css */
:root {
  /* Neutral, themeable palette — swap these to rebrand every hero at once */
  --color-bg: #f4f2ee;          /* page background */
  --color-surface: #ffffff;     /* cards, inputs */
  --color-ink: #171715;         /* primary text */
  --color-ink-muted: #6c6a64;   /* secondary text, eyebrows */
  --color-accent: #8a7a63;      /* links, markers, hovers */
  --color-line: #d8d4cc;        /* hairlines, borders */
  --color-inverse-bg: #171715;  /* dark sections */
  --color-inverse-ink: #f4f2ee; /* text on dark */
  --color-inverse-muted: #a3a09a;
  /* Secondary accents. Client brand sheets override these; they must exist here so a
     section styled against them still paints in the neutral library theme. */
  --color-accent-alt: #6d5f4c;  /* eyebrow markers, secondary rules */
  --color-gold: #c2a878;        /* warm accent on dark grounds (buttons, captions) */
  --color-scrim: rgba(23, 23, 21, 0.45); /* overlay on imagery */
}

/* tokens/spacing.css */
:root {
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  --space-2xl: 96px;
  --gutter: 56px;      /* page edge padding */
  --header-h: 96px;    /* hero top bar height */
  --radius: 0px;       /* sharp corners by default; raise to soften the whole system */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* tokens/type-roles.css */
/* Role layer — binds each type role to the elements that play it.
   Templates may still set their own sizes; families and weights come from here. */

body { font-family: var(--font-body); font-weight: var(--weight-body); }

h1 { font-family: var(--font-h1); font-weight: var(--weight-h1); letter-spacing: var(--tracking-h1); line-height: var(--leading-display); }
h2 { font-family: var(--font-h2); font-weight: var(--weight-h2); line-height: var(--leading-display); }
h3, .h3 { font-family: var(--font-h3); font-weight: var(--weight-h3); }
p, li, dd, dt, td, th, input, select, textarea { font-family: var(--font-body); }

/* !important: templates carry their own .btn/.link/.eyebrow type rules later in the
   cascade at equal specificity — the role layer has to win for brand mapping to hold. */
.btn, button, [type="submit"] {
  font-family: var(--font-button) !important;
  font-weight: var(--weight-button) !important;
  font-size: var(--text-button) !important;
  letter-spacing: var(--tracking-caps) !important;
  text-transform: var(--case-button) !important;
}

.link, .cta {
  font-family: var(--font-link) !important;
  font-size: var(--text-link) !important;
  letter-spacing: var(--tracking-caps) !important;
  text-transform: var(--case-button) !important;
}
.eyebrow, .kicker {
  font-family: var(--font-eyebrow) !important;
  font-size: var(--text-eyebrow) !important;
  letter-spacing: var(--tracking-caps) !important;
  text-transform: uppercase !important;
}
.logo { font-family: var(--font-h1); }

/* ─── Logo slot ───
   Every header carries:
   <a class="logo"><span class="logo-img"></span><span class="logo-text">Brand</span></a>
   Drop a client logo by setting --brand-logo (+ the two display switches) in brand.css. */
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-img {
  display: var(--brand-logo-display, none);
  width: var(--brand-logo-width, 150px);
  height: var(--brand-logo-height, 34px);
  background: var(--brand-logo, none) left center / contain no-repeat;
}
.logo-text { display: var(--brand-text-display, inline); }

/* tokens/responsive.css */
/* Responsive layer — inherited by every template via styles.css.
   Tablet: 861–1180px reduces column counts. Mobile: ≤860px stacks and
   converts split heroes into full-bleed image + light overlay copy. */

@media (max-width:1024px) and (min-width: 721px) {
  :root { --gutter: 40px; --space-2xl: 72px; }
  /* Template <style> blocks sit later in the cascade at equal specificity, so these need !important. */
  .cols, .cards, .grid, main { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .ucols { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  /* children with explicit placements would re-create the collapsed tracks */
  .hero main > *, .hero > *:not(header), .grid > *, .cols > *, .cards > * { grid-column: auto !important; grid-row: auto !important; }
  main { grid-template-rows: auto !important; grid-auto-rows: minmax(180px, auto); }
  .collage > div { margin: 0 !important; }
  .b, .c { margin: 0 !important; }
}

/* Overflow safety for every non-desktop width — button rows must be able to wrap
   and shrink, whatever column the band above put them in. */
@media (max-width:1024px) {
  /* real containment, not clipping: maps own their tiles, header rows shrink */
  .leaflet-container, .sec:has(.leaflet-container) { overflow: hidden !important; }
  /* hamburger takes over at this width; the inline row must still be able to
     shrink for any header that doesn't load nav-mobile.js */
  header, .navbar, .wrap { flex-wrap: wrap; }
  header .right, .navbar .right { flex-wrap: wrap; min-width: 0; }
  .navhost .phone { display: none !important; }
  .ctas, .meta, .info, .tabs, .trust, .counts, .head { flex-wrap: wrap !important; }
  .btn { padding: 15px 24px !important; }
  .marquee, .track, .strip, .collage { min-width: 0; max-width: 100%; }
  .phone { white-space: nowrap; }
}

@media (max-width:768px) {
  :root {
    --gutter: 22px;
    --header-h: 60px;
    --space-2xl: 44px;
    --space-xl: 32px;
    --space-lg: 26px;
    --text-hero: clamp(38px, 11vw, 62px);
    --text-hero-sm: clamp(30px, 8.5vw, 44px);
    --text-h3: 20px;
    --text-body: 16px;
    --text-eyebrow: 12px;
    --text-caption: 11px;
    --tracking-caps: 2px;
  }

  /* --- headers --- */
  header { height: auto !important; min-height: var(--header-h); flex-wrap: wrap; gap: 8px 16px; padding: 12px var(--gutter) !important; }
  .logo { font-size: 18px !important; letter-spacing: 3px; }
  /* inline nav is replaced by the hamburger panel (nav-mobile.js) below 860px;
     kept as a fallback for any header without the script */
  nav { gap: 14px !important; font-size: 11px !important; letter-spacing: 1px !important; flex-wrap: wrap; }
  .navhost nav { display: none !important; }
  header .right, .navbar .right { gap: 12px !important; flex-wrap: wrap; }

  /* --- split heroes: photo goes full-bleed, copy overlays in light ink --- */
  .hero { position: relative; min-height: 560px; }
  .hero:has(.copy) .img, .hero:has(.copy) .media { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; border: 0 !important; z-index: 0; }
  .hero:has(.copy) .img::after, .hero:has(.copy) .media::after {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(to top, rgba(23,23,21,.88) 0%, rgba(23,23,21,.42) 55%, rgba(23,23,21,.6) 100%);
  }
  .hero:has(.copy) .img image-slot, .hero:has(.copy) .media image-slot { display: block; width: 100%; height: 100%; }
  /* heroes without a .copy wrapper keep their authored stacking; just let the photo shrink */
  .hero:not(:has(.copy)) .img { min-height: 0 !important; }
  .hero:has(.copy) header { position: relative; z-index: 5; border-color: rgba(244,242,238,.3) !important; }
  .hero:has(.copy) header .logo, .hero:has(.copy) header nav a { color: var(--color-inverse-ink) !important; }
  .hero .copy {
    position: absolute !important; left: var(--gutter) !important; right: var(--gutter) !important;
    top: auto !important; bottom: 108px !important; transform: none !important; z-index: 3;
    color: var(--color-inverse-ink); max-width: none !important; padding: 0 !important;
  }
  .hero .copy h1, .hero .copy h2 { width: auto !important; max-width: 18ch; }
  .hero .copy p, .hero .copy .eyebrow, .hero .copy .eyebrow span { color: var(--color-inverse-ink) !important; opacity: .9; }
  .hero .copy .cta, .hero .copy .link { color: var(--color-inverse-ink) !important; border-color: var(--color-inverse-ink) !important; }
  .hero .copy .btn.solid { background: var(--color-inverse-ink) !important; color: var(--color-ink) !important; border-color: var(--color-inverse-ink) !important; }
  .hero .copy .btn.ghost { color: var(--color-inverse-ink) !important; border-color: var(--color-inverse-ink) !important; }
  .hero .copy .meta, .hero .copy .ctas { border-color: rgba(244,242,238,.35) !important; }
  .hero .copy .ctas { flex-wrap: wrap; }
  .hero .meta { flex-wrap: wrap; gap: 10px 18px !important; }

  /* stacked hero grids (header row + content) */
  .hero { grid-template-columns: minmax(0, 1fr) !important; }
  .hero header { grid-column: 1 !important; }

  /* --- generic section stacking --- */
  .sec { grid-template-columns: minmax(0, 1fr) !important; padding-left: var(--gutter); padding-right: var(--gutter); }
  .sec .img { position: relative !important; aspect-ratio: 4 / 3; min-height: 0; border-left: 0 !important; }
  .sec .img image-slot { display: block; width: 100%; height: 100%; }
  .cols, .ucols, .cards, .stats, .body, .unit, .collage, .cats, .grid { grid-template-columns: minmax(0, 1fr) !important; }
  main { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: auto !important; grid-auto-rows: minmax(200px, auto); }
  /* children with explicit grid-column/row placements would re-create implicit tracks */
  .hero main > *, .hero > *:not(header), .grid > *, .cols > *, .cards > *, .collage > * { grid-column: auto !important; grid-row: auto !important; }
  a[style*="position:fixed"], .back-to-bank { display: none !important; }
  .row { grid-template-columns: minmax(0, 1fr) !important; }
  .row.flip .img { order: 0 !important; }
  .col + .col { border-left: 0 !important; padding-left: 0 !important; }
  .stat + .stat { border-left: 0 !important; padding-left: 0 !important; border-top: 1px solid rgba(244,242,238,.25); padding-top: var(--space-sm); }
  .collage > div { margin: 0 !important; min-height: 220px; }
  .head { flex-direction: column; align-items: flex-start !important; gap: var(--space-sm) !important; }
  .ctas { flex-wrap: wrap; }
  .btn { padding: 15px 24px; }
  h1, h2 { text-wrap: balance; }

  /* forms */
  form { grid-template-columns: minmax(0, 1fr) !important; display: grid !important; }
  input, select, button[type="submit"] { border: 1px solid var(--color-ink) !important; width: 100%; box-sizing: border-box; }

  /* tables scroll rather than squash */
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .tabs { flex-wrap: wrap; }

  /* galleries */
  .strip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .sticky { position: static !important; }
  .rail { flex-direction: row !important; overflow-x: auto; border-top: 0 !important; border-bottom: 1px solid var(--color-line); }
  .rail button { border-bottom: 0 !important; white-space: nowrap; padding: 14px 16px 14px 0 !important; }

  /* slider / carousel controls */
  .ctrl { left: var(--gutter) !important; right: auto !important; bottom: 24px !important; gap: 14px !important; flex-wrap: wrap; }
  .hero .bar { left: var(--gutter) !important; bottom: 82px !important; width: 120px !important; }
  .arrows button, .nav button { width: 44px; height: 44px; }
  .dots button { width: 24px !important; }
  .vert, .cue { display: none !important; }
}

@media (max-width:640px) {
  :root { --gutter: 18px; --text-hero: clamp(34px, 12vw, 48px); }
  .strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .grid:has(> .cell) { grid-auto-rows: 150px; } /* masonry cells only — other grids size to content */
  .hero .copy { bottom: 96px !important; }
}

/* tokens/brand.css */
/* ══════════════════════════════════════════════════════════════════════
   BRAND SHEET — the only file to edit when a client brand guide arrives.
   Everything in every template reads these values. Uncomment and fill in.
   Loaded last, so anything set here wins.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── 1. LOGO ───────────────────────────────────────────────────────
     Put the file in brand/ and point at it. Setting these three lines
     swaps every header wordmark for the client mark. */
  /* --brand-logo: none;
     --brand-logo-display: block;
     --brand-text-display: none;
     --brand-logo-width: 170px;
     --brand-logo-height: 36px; */

  /* Light-background headers use --brand-logo; dark/photo headers can use a
     reversed file here (falls back to the same logo). */
  /* --brand-logo-inverse: none; */

  /* ─── 2. FONTS ──────────────────────────────────────────────────────
     Add the @font-face or Google import above this block, then map roles.
     H1/H2/H3 may all share one display face; body/button/link may share a sans. */
  /* --font-h1: 'ClientDisplay', Georgia, serif;
     --font-h2: var(--font-h1);
     --font-h3: 'ClientSans', Helvetica, sans-serif;
     --font-body: 'ClientSans', Helvetica, sans-serif;
     --font-button: var(--font-body);
     --font-link: var(--font-body);
     --font-eyebrow: var(--font-body); */

  /* ─── 3. TYPE SIZES ────────────────────────────────────────────────
     Keep the clamp() pattern so headlines stay responsive. */
  /* --text-h1: clamp(52px, 7vw, 120px);
     --text-h2: clamp(38px, 5vw, 76px);
     --text-h3: 24px;
     --text-body: 17px;
     --text-button: 14px;
     --text-link: 14px;
     --text-eyebrow: 13px;
     --text-caption: 12px; */

  /* Weights, tracking, and casing — for brands with a bolder or lowercase voice. */
  /* --weight-h1: 400; --weight-h2: 400; --weight-h3: 500; --weight-body: 400; --weight-button: 500;
     --tracking-h1: -1px; --tracking-caps: 2px; --case-button: none; */

  /* ─── 4. COLORS ────────────────────────────────────────────────────
     Six values brand the whole system. */
  /* --color-bg: #f4f2ee;
     --color-surface: #ffffff;
     --color-ink: #171715;
     --color-ink-muted: #6c6a64;
     --color-accent: #8a7a63;
     --color-line: #d8d4cc;
     --color-inverse-bg: #171715;
     --color-inverse-ink: #f4f2ee;
     --color-scrim: rgba(23, 23, 21, 0.45); */

  /* ─── 5. SHAPE & RHYTHM ────────────────────────────────────────────
     --radius above 0 softens every card, button, and input at once. */
  /* --radius: 0px;
     --gutter: 56px;
     --header-h: 96px; */
}