/* F · Stack — the brand's tokens, one file for every page and the designer (10-09: the designer kept its own copy and
   drifted, a 36 px title on phones where the site's step is 40). Values only; components live in base.css, f.css,
   f-product.css, f-pages.css and the designer's flow.css. The brand guide (/brand) documents each token. */
.dir-f{
  --font-display:"Funnel Display",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Funnel Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  /* six sizes. The display fills a phone's width with "Anywhere," (4.96 em); on desktop it scales with the screen so
     the hero keeps its two lines and the tile fits beside the second one */
  --fs-1:clamp(14px,13.6px + .1vw,15px);                 /* small print, captions, labels */
  --fs-2:clamp(17px,16.6px + .1vw,18px);                 /* body, buttons, nav */
  --fs-3:clamp(20px,18.5px + .4vw,24px);                 /* lead, card titles, questions */
  --fs-4:clamp(26px,21px + 1.3vw,36px);                  /* h3, step titles, the designer's titles */
  --fs-5:clamp(40px,28px + 3.2vw,80px);                  /* h2, page titles */
  --fs-6:calc(17.4vw + 2px);                             /* the giant words */
  --w-1:400; --w-2:600; --w-3:800;
  --lh-display:.9; --display-track:-.035em; --h-track:-.015em;   /* tight tracking for the giant sizes, gentler from fs-4 down */
  --bg:#FFFFFF; --surface:#F3F3F1; --text:#121212; --ink:#121212; --muted:#5B5B5B; --line:#E4E4E1;
  --accent:#121212; --accent-hover:#383838; --accent-text:#FFFFFF;
  --stage:#E5E6E3;                                        /* the build frames' own backdrop, so the canvas has no edge */
  --city:#1B3A8F; --golf:#174A33; --race:#952B1D;         /* white text: 10.3, 10.2 and 8.0 to 1 */
  --route:#D34651;
  --mark-top:#C8402B;
  --notice-bg:#121212; --notice-text:#FFFFFF;
  --radius:16px; --btn-radius:999px;
  --dwell:38svh;                                          /* how long each panel holds before the next one arrives */
}
@media (min-width:1024px){ .dir-f{--fs-6:clamp(120px,12.2vw,184px)} }
/* holiday: cranberry buttons and banner; the panels keep their colours */
.dir-f[data-season="holiday"]{--accent:#B3261E; --accent-hover:#951F18; --notice-bg:#B3261E}