/* Fitter Stock brand tokens and shared pieces (see DESIGN.md). Loaded before each page's own stylesheet. */
/* Fitter Stock's own web fonts, as served on fitterstock.com: Avenir for text and buttons, FAVORA for headings.
   Subset to Latin and converted to WOFF2 from the files the site loads. */
@font-face { font-family:"FS Avenir"; src:url(/static/brand/fonts/avenir-light.woff2) format("woff2"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"FS Avenir"; src:url(/static/brand/fonts/avenir-book.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"FS Avenir"; src:url(/static/brand/fonts/avenir-medium.woff2) format("woff2"); font-weight:500 600; font-style:normal; font-display:swap; }
@font-face { font-family:"FS Avenir"; src:url(/static/brand/fonts/avenir-heavy.woff2) format("woff2"); font-weight:700 800; font-style:normal; font-display:swap; }
@font-face { font-family:"FS Avenir"; src:url(/static/brand/fonts/avenir-black.woff2) format("woff2"); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:"FAVORA"; src:url(/static/brand/fonts/favora.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap; }

:root {
  --fs-forest:#273224;
  --fs-forest-deep:#1B2318;
  --fs-forest-tint:#E8ECE3;
  --fs-sage:#A4A994;
  --fs-sage-tint:#F0F1EB;
  --fs-stone:#AA9888;
  --fs-stone-tint:#F4EFEA;
  --fs-cream:#EEEBE1;
  --fs-paper:#F7F6F1;
  --fs-surface:#FFFFFF;
  --fs-ink:#242E38;
  --fs-muted:#5F6A62;
  --fs-line:#E3E3DC;
  --fs-success:#3F7D4E;
  --fs-warning:#B7791F;
  --fs-danger:#B42318;
  --fs-font:"FS Avenir", Avenir, "Helvetica Neue", Arial, sans-serif;
  --fs-font-display:"FAVORA", Georgia, "Times New Roman", serif;
  --fs-shadow:0 10px 30px -16px rgba(27,35,24,.28);
  --fs-radius-btn:8px;
  --fs-radius-input:10px;
  --fs-radius-card:16px;
}

/* Headings use the site's serif display face at its single regular weight. */
.fs-display { font-family:var(--fs-font-display); font-weight:400; letter-spacing:0; }

/* Wordmark: monogram + wide-tracked "FITTER STOCK" with the strapline under it. */
.fs-brand { display:inline-flex; align-items:center; gap:12px; color:inherit; text-decoration:none; flex:none; }
.fs-brand__mark { flex:none; width:30px; height:38px; display:block; color:currentColor; }
.fs-brand__mark svg { width:100%; height:100%; display:block; }
.fs-brand__text { display:grid; gap:4px; line-height:1; flex:none; }
.fs-brand__name { font-family:var(--fs-font); font-weight:400; font-size:15px; letter-spacing:.32em; text-transform:uppercase; white-space:nowrap; }
.fs-brand__tag { font-family:var(--fs-font); font-weight:500; font-size:8.5px; letter-spacing:.26em; text-transform:uppercase; opacity:.72; white-space:nowrap; }
.fs-brand__sub { font-family:var(--fs-font); font-weight:700; font-size:10px; letter-spacing:.18em; text-transform:uppercase; opacity:.62; white-space:nowrap; }
.fs-brand__divider { flex:none; width:1px; height:30px; margin:0 2px; background:rgba(238,235,225,.24); }
/* Narrow headers drop the section label first, then the strapline. */
@media (max-width:1080px) { .fs-brand__divider, .fs-brand__sub { display:none; } }
@media (max-width:560px) {
  .fs-brand__tag { display:none; }
  .fs-brand__name { font-size:13px; letter-spacing:.26em; }
}

/* Video watermark: the monogram in the bottom corner of every player, never catching clicks. */
.fs-watermark { position:absolute; right:14px; bottom:14px; z-index:3; display:flex; align-items:center; gap:8px; pointer-events:none;
  color:var(--fs-cream); opacity:.62; filter:drop-shadow(0 1px 6px rgba(0,0,0,.45)); }
.fs-watermark svg { width:20px; height:26px; display:block; }
.fs-watermark span { font-family:var(--fs-font); font-size:9.5px; font-weight:500; letter-spacing:.3em; text-transform:uppercase; }
.fs-watermark--above-controls { bottom:58px; }
.fs-watermarked { position:relative; }

/* The same mark as a pseudo-element, for players whose markup is rebuilt by script (library detail,
   guided pathway, AI pathway preview, graph clips, workout classes). It sits above native controls. */
.va-player:has(video,iframe,#ytplayer)::after,
.va-pathway-stage::after,
#pwPlayerBody:has(video,iframe)::after,
.clip .player:has(video)::after,
.wb-class-stage::after {
  content:""; position:absolute; right:16px; bottom:66px; z-index:5; width:22px; height:28px; pointer-events:none;
  background:url(/static/brand/fs-monogram-cream.svg) center/contain no-repeat;
  opacity:.62; filter:drop-shadow(0 1px 5px rgba(0,0,0,.5));
}
.va-pathway-stage::after { bottom:18px; right:20px; }
.clip .player { position:relative; }
.clip .player:has(video)::after { right:10px; bottom:46px; width:16px; height:21px; }