/* ILoveFreeShit site skin v2: TOKEN OVERRIDES ONLY (CSS custom properties).
   Drop in AFTER site.css. Changes the skin only: colors, type families, border/shadow weights and textures.
   No layout tokens are changed (--gut, --max, --s1..--s9 and --r stay exactly as live).
   Source of the palette: the ILFS "Free Shit of the Day" shorts (render code INK/CREAM/RED/GOLD, the car-interior tan,
   the sky sunburst title cards) and the round-6 cartoon Bill. See ../SYSTEM.md. */

@font-face{font-family:"ILFS Caption";src:url(/static/fonts/BarlowCondensed-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap;size-adjust:115%}
@font-face{font-family:"ILFS Caption";src:url(/static/fonts/BarlowCondensed-Bold.woff2) format("woff2");font-weight:700;font-display:swap;size-adjust:115%}
/* Metric-matched fallbacks for the caption face, so text sets at the same width and line height while Barlow is still
   loading on a slow connection and nothing moves when it swaps in (throttled LTE shifted the home page by 0.25).
   size-adjust = 115% x (Barlow width / fallback width); ascent/descent overrides rebuild Barlow's 1000/200 line box at
   115%. First match wins: Arial Narrow (Windows, Mac), Arial or its metric twins Arimo and Liberation Sans (iPhone,
   Linux), Roboto (Android). Capitals and mixed case need different ratios, so there are two sets (see --display-mixed).
   Barlow/fallback width ratios, measured on the site's own caption strings: capitals Arial .693, Roboto .747; mixed
   case Arial .771, Roboto .821; Arial Narrow is 82% of Arial's width. */
@font-face{font-family:"ILFS Caption FB Narrow";src:local("Arial Narrow Bold"),local("ArialNarrow-Bold");font-weight:700 900;size-adjust:97.2%;ascent-override:118.3%;descent-override:23.7%;line-gap-override:0%}
@font-face{font-family:"ILFS Caption FB Arial";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Arimo-Bold"),local("Liberation Sans Bold"),local("LiberationSans-Bold");font-weight:700 900;size-adjust:79.7%;ascent-override:144.3%;descent-override:28.9%;line-gap-override:0%}
@font-face{font-family:"ILFS Caption FB Roboto";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:700 900;size-adjust:85.9%;ascent-override:133.9%;descent-override:26.8%;line-gap-override:0%}
@font-face{font-family:"ILFS Caption FB Narrow Mixed";src:local("Arial Narrow Bold"),local("ArialNarrow-Bold");font-weight:700 900;size-adjust:108.1%;ascent-override:106.4%;descent-override:21.3%;line-gap-override:0%}
@font-face{font-family:"ILFS Caption FB Arial Mixed";src:local("Arial Bold"),local("Arial-BoldMT"),local("Arimo Bold"),local("Arimo-Bold"),local("Liberation Sans Bold"),local("LiberationSans-Bold");font-weight:700 900;size-adjust:88.7%;ascent-override:129.7%;descent-override:25.9%;line-gap-override:0%}
@font-face{font-family:"ILFS Caption FB Roboto Mixed";src:local("Roboto Bold"),local("Roboto-Bold");font-weight:700 900;size-adjust:94.4%;ascent-override:121.8%;descent-override:24.4%;line-gap-override:0%}

:root{
  /* shorts palette */
  --cream:#FFF6E9;          /* shorts CREAM: caption fill, cards, stickers */
  --paper:#FFFBF2;          /* card paper (a hair lighter than cream so cards lift off the tan page) */
  --kraft:#E6DAC0;          /* the car-interior tan (shorts scene background) */
  --dash:#B98B5C;           /* the dashboard brown, used for footers/strips */
  --ink:#241712;            /* shorts INK: every outline, every hard shadow */
  --ink2:#4A2E1F;
  --red:#D3303F;            /* shorts RED (#E23B4A) taken one step deeper so cream text on it passes AA: 4.60:1 (the shorts red is 3.96:1) */
  --red-hi:#E23B4A;         /* the exact shorts badge red: focus rings, hover, no text on it */
  --red-text:#B8222F;       /* AA for small red text: 5.31:1 on the tan page, 6.15:1 on card paper */
  --mustard:#F2C23A;        /* shorts GOLD: the highlighted caption word, the speed-line wipe */
  --gold:#F2C23A;
  --sky:#8FD3FF;            /* title-card sky */
  --ray:#79BFEC;            /* title-card sunburst ray */
  --mint:#7FE0A8; --gum:#FFA8C5; --lilac:#C9B3FF; --lime:#C6F36B; --slime:#B6FF3B; --teal:#8EE6E0;   /* category stickers: unchanged hues, they are wayfinding */
  --hood:#42536F;           /* Bill's hoodie navy (mascot only) */

  /* roles */
  --bg:#F3EAD6;             /* page: light car-interior tan instead of plain cream */
  --fg:var(--ink);
  --muted:var(--ink2);
  --line:var(--ink);
  --card:var(--paper);
  --shadow:var(--ink);
  --foot:var(--kraft);

  /* size-adjust:115% on the @font-face makes the condensed face set at the same line breaks as the live Bricolage
     (measured: 68 of 74 tracked boxes keep their exact height at 390px; page height 9386 -> 9351px). */
  /* type: Barlow Condensed ExtraBold is the shorts' caption + badge face. Body stays Atkinson (the shorts' footnote face). */
  --display:"ILFS Caption","ILFS Caption FB Narrow","ILFS Caption FB Arial","ILFS Caption FB Roboto","Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --display-mixed:"ILFS Caption","ILFS Caption FB Narrow Mixed","ILFS Caption FB Arial Mixed","ILFS Caption FB Roboto Mixed","Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --text:"Atkinson",system-ui,-apple-system,"Segoe UI",sans-serif;

  /* weights: same 3px line as live; hard shadow a touch heavier and dropped down, like the shorts' pills (6,8 at 1080) */
  --b:3px;
  --sh:5px;
  --sh-y:6px;

  /* textures (procedural SVG noise, no images): fine warm grain + soft paper mottle, as in the shorts' paper pass.
     v2: both noise alphas halved (QA P1: grain fought the text). */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .09 0 0 0 0 .07 0 0 0 .275 -.11'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --mottle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .09 0 0 0 0 .07 0 0 0 .25 -.11'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E");
  /* v2 hero headline (QA P0): light mode = solid ink fill. The hard drop is optional: set --hero-drop to
     ".045em .07em 0 var(--gold)" for a shorts-style gold drop, or leave it none (default, cleanest read). */
  --hero-ink:#1E1A17;
  --hero-drop:none;
  --sunburst:repeating-conic-gradient(from -4.5deg at 50% 62%, var(--sky) 0deg 9deg, var(--ray) 9deg 18deg);
}

@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
    --bg:#1E1A17;           /* warm near-black (the shorts have no dark mode; this is the car at night) */
    --fg:#FFF6E9;
    --muted:#E6DAC0;
    --line:#FFF6E9;
    --card:#2A2420;
    --shadow:#FFF6E9;       /* live dark mode uses cream hard shadows; kept */
    --foot:#171310;
    --red-text:#FF7D89;
    --hood:#A7A5A1;         /* dark-mode Bill wears the heather-gray hoodie (7.03:1 on #1E1A17) */
  }}:root[data-theme=dark]{
    --bg:#1E1A17;           /* warm near-black (the shorts have no dark mode; this is the car at night) */
    --fg:#FFF6E9;
    --muted:#E6DAC0;
    --line:#FFF6E9;
    --card:#2A2420;
    --shadow:#FFF6E9;       /* live dark mode uses cream hard shadows; kept */
    --foot:#171310;
    --red-text:#FF7D89;
    --hood:#A7A5A1;         /* dark-mode Bill wears the heather-gray hoodie (7.03:1 on #1E1A17) */
  }

/* ILoveFreeShit site skin v2: SKIN RULES (optional, load after tokens.css).
   Type styling, textures and image treatment only. No display/position/grid/flex/margin/padding/width/height/order
   is set anywhere in this file, so the bones (layout, structure, sections, nav, order, components, copy) cannot move.
   text-transform is visual only: the copy in the DOM stays word for word. */

/* paper: fine grain + mottle over the tan page (v2: half strength, see tokens) */
body{background-image:var(--grain),var(--mottle);background-size:180px 180px,600px 600px;background-attachment:scroll}
@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])) body{background-image:var(--grain);background-blend-mode:screen}}:where(:root[data-theme=dark]) body{background-image:var(--grain);background-blend-mode:screen}

/* hero headline. v2 light (QA P0): condensed caps in SOLID INK (#1E1A17), no outline, optional hard drop via --hero-drop.
   Dark keeps the v1 shorts caption: cream fill, ink outline, hard black drop. */
.mega{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.005em;line-height:.92;
  color:var(--hero-ink);-webkit-text-stroke:0;text-shadow:var(--hero-drop)}
@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])) .mega{color:var(--cream);-webkit-text-stroke:.085em var(--ink);paint-order:stroke fill;text-shadow:.045em .075em 0 #000}}:where(:root[data-theme=dark]) .mega{color:var(--cream);-webkit-text-stroke:.085em var(--ink);paint-order:stroke fill;text-shadow:.045em .075em 0 #000}
/* v2 (QA P1): the subhead sentence is set in the body face (Atkinson) at semibold, sentence case. Type only: family, weight,
   tracking, case and size. Size is pinned to .5em, the live desktop value (the live phone value is .54em): Atkinson is wider
   than Bricolage, and at .54em the sentence broke onto a 4th line with "good job." alone; at .5em it keeps the live 3 lines. */
.mega .hero-sub{font-family:var(--text);font-weight:600;font-size:.5em;text-transform:none;letter-spacing:0;
  color:var(--fg);-webkit-text-stroke:0;text-shadow:none}

/* section heads: condensed caps in ink, gold keyline under (the gold caption highlight, as an underline) */
.h2,.h3,.kicker{font-family:var(--display);text-transform:uppercase;letter-spacing:.01em}
.h2{text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:.16em;text-underline-offset:.12em;text-decoration-skip-ink:none}

/* stickers, chips, pills, buttons = the shorts' badges: condensed caps, ink line, hard dropped shadow */
.chip,.pill,.btn,.tag,.card-cat,.stamp-sm,.tile-name,.foot-h,.panel-h,.tagbar-k{font-family:var(--display);letter-spacing:.03em}
.chip,.pill{box-shadow:2px 3px 0 var(--shadow)}
.chip-free,.btn-red{background:var(--red);color:var(--cream)}
.card-h{font-family:var(--display);font-weight:800;letter-spacing:0}

/* cards: cream paper, same line, the dropped hard shadow */
.card{background:var(--card)}

/* the speech bubble = the shorts' cream footnote card */
.bubble{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.02em}

/* mascot discs: the title-card sunburst behind Bill. Hero = sky rays; other placements keep their color with soft rays */
.mascot-disc{background-image:repeating-conic-gradient(from -4.5deg at 50% 62%, transparent 0deg 9deg, rgb(36 23 18 / .07) 9deg 18deg)}
.mascot-hero .mascot-disc{background-color:var(--sky);background-image:var(--sunburst)}

/* state picker band: the title-card sky with faint rays */
.pick-bar{background-image:repeating-conic-gradient(from 0deg at 12% 140%, transparent 0deg 6deg, rgb(36 23 18 / .045) 6deg 12deg)}

/* v2 dark-mode Bill (heather hoodie), CSS only, every engine (QA P1).
   v1 used content:url() on the <img>. That only works where the engine supports `content` on replaced elements: current
   Firefox 155 / WebKit 26.6 / Chrome do (re-tested in v2), but older Firefox builds (QA's report) and ESR keep the navy file.
   v2 drops that dependency and uses only object-position + background, which every engine has supported for years: the <img> keeps its box, src, alt, size and bob animation; in dark mode its own pixels are slid out of its content box
   (object-position, clipped by the img) and the heather file is painted as the img's background, in the exact same box.
   Same 480x430 aspect, so nothing moves. .is-gag (set by the theme-toggle gag JS while it plays) turns this off so the
   animated WebP shows. Upload /static/img/mascot-480-dark.webp next to the light files. */
@media (prefers-color-scheme:dark){:where(:root:not([data-theme=light])) .mascot-img:not(.is-gag){object-position:-9999px 0;background:url(/static/img/mascot-480-dark.webp) 0 0/100% 100% no-repeat}}:where(:root[data-theme=dark]) .mascot-img:not(.is-gag){object-position:-9999px 0;background:url(/static/img/mascot-480-dark.webp) 0 0/100% 100% no-repeat}

/* v2 theme-toggle gag hook (js/toggle-gag.js): while .is-gag is on, the animated WebP (a blob: URL in --gag) is painted in the
   img's own box the same way. Removing .is-gag drops back to the static Bill for the current theme. */
.mascot-img.is-gag{object-position:-9999px 0;background:var(--gag) 0 0/100% 100% no-repeat}

/* caption text set in mixed case uses the mixed-case fallback metrics (same face once Barlow has loaded) */
.h1,.card-h,.pick-q,.pick-saved,.joke,.panel-h,.wanted-name,.panel-title,.tile-name{--display:var(--display-mixed)}

:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark}