/* site.css — Flashfeed v2 global design-system overrides.
   Loaded last, wins over TrendTrack's generated CSS. Site-wide scope.

   Font DS:
     Circular Std Book (400) = headings + body + everything (the default).
     Circular Std (500, Medium) = smaller subtitles only (.weight-500 labels).
   TrendTrack applies fonts solely via the two --_typography---font--* tokens
   (0 hardcoded uses), so re-pointing those tokens re-fonts the whole site. */

/* ---------- Circular Std faces ---------- */
/* Book family = 400 default (+ 600/700 Bold so any bold UI text renders a real
   face instead of a synthesized fake-bold) */
@font-face{font-family:'Circularstd book';src:url('/assets/CircularStd-Book.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Circularstd book';src:url('/assets/CircularStd-Bold.woff') format('woff');font-weight:600 700;font-style:normal;font-display:swap}
/* the named "Circular Std" = Medium 500, reserved for subtitles */
@font-face{font-family:'Circularstd';src:url('/assets/CircularStd-Medium.woff') format('woff');font-weight:500;font-style:normal;font-display:swap}

/* ---------- DS token swap ---------- */
:root{
  /* both roles default to Book; headings are Book too (see weights below) */
  --_typography---font--primary:'Circularstd book', Arial, sans-serif;
  --_typography---font--secondary:'Circularstd book', Arial, sans-serif;
  /* headings render as Circular Std Book (400), not the DS default semibold */
  --_typography---h1--font-weight:400;
  --_typography---h2--font-weight:400;
  --_typography---h3--font-weight:400;
  --_typography---h4--font-weight:400;
  --_typography---h5--font-weight:400;
  --_typography---h6--font-weight:400;
}

/* ---------- smaller subtitles -> Circular Std (500) ---------- */
.weight-500{ font-family:'Circularstd', Arial, sans-serif; font-weight:500; }

/* ---------- font smoothing (from Flashfeed's Webflow site) ---------- */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* ---------- kill TrendTrack's radial box-edge lines ----------
   custom.css does: [data-bx-radial]{&::before{...border-left/right 1px
   currentColor 20%, radially masked}}. The hero carries the attribute on two
   nested boxes, so it painted 4 stray vertical lines (2 per box). Removed. */
[data-bx-radial]::before{content:none!important;display:none!important}

/* ---------- clipped text (Flashfeed's .cc_span-grey-clip, DS-ified) ----------
   Grey-to-white gradient clipped to the glyphs. Tokenised so the gradient and
   the halo are set in one place; use .u-text-clip on any copy site-wide. */
:root{
  --_typography---clip--grey:linear-gradient(0deg,#e9ecffbf,#fff);
  --_typography---clip--grey-halo:#b0b7c733;
  /* serif accent runs optically small next to Circular — scale it up (OG: 1.25) */
  --_typography---serif--optical-scale:1.25;
}
.u-text-clip{
  background-image:var(--_typography---clip--grey);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 var(--_typography---clip--grey-halo);
}

/* ---------- button halo + glow (Flashfeed's ring & dropshadow, DS-ified) -----
   Two nested shells around any button: .btn_halo draws the offset 1px ring,
   .btn_glow carries the coloured dropshadow. Both are button-agnostic — they
   wrap .button-dark here, but work on any DS button. */
/* rem, not px — the DS root font-size is fluid (16px desktop / ~19px @991 /
   ~22px @767) and every other component tracks it. Values are the OG Flashfeed
   px at a 16px root: 11 / 17 / 7. */
:root{
  --_button---radius:.6875rem;
  --_button---halo--radius:1.0625rem;
  --_button---halo--inset:.4375rem;
  --_button---halo--bg:#545ad305;
  --_button---halo--ring:#8a9bbb33;
  --_button---glow:0 -6px 20px -8px #0004ff33,0 20px 14px -12px #0000007d,0 0 70px 1px #7eb4ff12;
}
/* align-self:center is load-bearing: below 767 the DS flips .button-group to a
   stretch column, which blew these shells out to the full container width while
   the button inside stayed pill-sized and left-aligned. justify-content keeps
   the button centred if anything ever does stretch them. */
.btn_halo{
  position:relative;z-index:1;display:inline-flex;
  align-self:center;justify-content:center;
  padding:var(--_button---halo--inset);
  border-radius:var(--_button---halo--radius);
  background-color:var(--_button---halo--bg);
  box-shadow:0 0 0 1px var(--_button---halo--ring);
}
.btn_glow{
  display:inline-flex;
  align-self:center;justify-content:center;
  border-radius:var(--_button---radius);
  box-shadow:var(--_button---glow);
}

/* ---------------------------------------------------------------------------
   Flashfeed nav lockup
   Both files are normalised to the same 3665x677 box (the white one ships from
   Figma on a 3766x832 canvas — 101px of left and 155px of top filter bleed —
   so it is translated back onto the dark one's origin). Identical viewBox means
   the light/dark swap is pixel-stable: no reflow, no jump.
   Which one shows follows the theme flag already on the page: base = dark
   surface = white lockup, invert = light surface = ink lockup. The nav reads
   the body flag the scroll observer writes (slater-61158.js copies the section
   flag onto data-theme-nav); the footer lockups read their own section flag.
--------------------------------------------------------------------------- */
.nav_logo__img{
  display:block;
  /* 1.5em, not 1.75. The lockup is 5.4:1, so every 1px of height buys 5.4px of
     width — at 1.75em it was 28x151 on a 1200px row and read as the loudest
     thing in the nav, ahead of the links it sits next to. */
  height:1.5em;width:auto;
  /* the DS ships img{max-width:100%}; the lockup is 5.4:1 so inside a flex row
     that clamp collapses it to a sliver before the row has a width */
  max-width:none;
  flex-shrink:0;
}
.nav_logo__img.is-dark{display:none}
[data-theme-nav='invert'] .header .nav_logo__img.is-light,
[data-theme-section='invert'] .nav_logo__img.is-light{display:none}
[data-theme-nav='invert'] .header .nav_logo__img.is-dark,
[data-theme-section='invert'] .nav_logo__img.is-dark{display:block}
/* The DS root font-size is fluid and does NOT fall on small screens — it peaks
   in the 700-991 band (21.6px at 744 against 16px at 1440). An em height that
   is right on desktop therefore grows ~35% exactly where the row has the least
   width, which is why the lockup ate the mobile nav: 38px tall, ~205px wide,
   next to a 44px menu button. 1.15em cancels that growth back out (24.9px at
   744, 18.4px at a 16px-root phone) so the lockup holds one optical size from
   the widest desktop down. */
@media screen and (max-width:991px){
  .nav_logo__img{height:1.15em}
}