/* =====================================================================================================================
   PENDLE PERFORMANCE 2026 - DESIGN TOKENS ("Cinematic", Martin's choice A, 9 Oct 2026)
   One file of numbers every page shares. Components (components.css) only ever read these.

   THE FRAME - every full-screen section, every page, measured to the pixel:
     eyebrow line (--anchor) from the section top:  96 @390x844 | 88 @360x740 | 128 @1440x900 | 152 @1920x1080
     left / right content edge (--edge):            28          | 24          | 120          | 120
     bottom line = screen - dock - air:             773         | 673         | 760          | 928
   The dock is the LIVE site's bottom bar, kept as Martin knows it (9 Oct 07:15): seven big icon buttons on a computer
   (120 px), the blue menu strip on a phone (51 px). Content never runs under it.
   ===================================================================================================================== */

@font-face{font-family:"CX Bebas";src:url(../fonts/bebas-neue.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"CX Lato";src:url(../fonts/lato-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"CX Lato";src:url(../fonts/lato-700.woff2) format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"CX Inter";src:url(../fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"CX Plate";src:url(../fonts/UKNumberPlate.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  /* colour - the Pendle identity: near-black, ONE accent (the site's cyan), dark text on cyan keys */
  --ink:#05070a; --page:#05070a; --panel:#10151c;
  --cyan:#00aeef; --cyan-rgb:0,174,239; --ice:#7fd9ff; --on-cyan:#00121b; --steel:#c9d6e6;
  --text:#f3f5f7; --body:#c9d4e0; --muted:#9aa9ba; --kick:#7fd9ff; --ok:#35c07a;
  --dock-strip:linear-gradient(160deg,#385a7d 0%,#010d3f 100%);          /* the live phone bar, exactly */
  --dock-fade:linear-gradient(0deg,rgba(19,19,19,.83) 36%,rgba(19,19,19,0) 100%);   /* the live computer bar, exactly */

  /* type */
  --f-display:"CX Bebas","Bebas Neue",Impact,"Arial Narrow",sans-serif;
  --f-text:"CX Inter",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-ui:"CX Lato",Lato,"CX Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-plate:"CX Plate","CX Bebas",Impact,sans-serif;
  --h1:50px; --h1-lh:48px; --h2:38px; --h2-lh:38px; --lede:15px; --lede-lh:22px; --small:13px;

  /* frame - whole pixels, stepped by screen size */
  --screen:100vh;
  --top:64px; --air-top:24px;
  --dock:51px; --air-bottom:16px; --safe-b:env(safe-area-inset-bottom,0px);
  --gutter:24px; --max:1680px;
  --anchor:calc(var(--top) + var(--air-top));
  --edge:max(var(--gutter), calc((100% - var(--max)) / 2));
  --line:calc(var(--dock) + var(--air-bottom) + var(--safe-b));          /* distance of the bottom line from the screen bottom */
  --row-gap:14px; --gap-h:10px; --col-gap:24px;
  --ctl:44px; --ctl-gap:14px;

  /* surfaces */
  --t-colour:.15s; --t-press:.1s;
  --glow:0 0 40px -12px rgba(var(--cyan-rgb),.55);
  --card-face:linear-gradient(180deg,rgba(24,31,41,.86) 0%,rgba(14,19,26,.90) 100%);
  --card-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.4),0 1px 0 rgba(0,0,0,.5),0 24px 48px -20px rgba(0,0,0,.85);
  --radius:18px;
}
@supports (height:100svh){:root{--screen:100svh}}

/* 375+ phones (390x844 = the reference phone) */
@media (min-width:375px){:root{--gutter:28px;--h1:54px;--h1-lh:52px;--h2:42px;--h2-lh:42px;--lede:16px;--lede-lh:24px}}
@media (min-width:375px) and (min-height:800px){:root{--air-top:32px;--air-bottom:20px;--row-gap:16px;--gap-h:12px;--ctl:48px;--ctl-gap:16px}}
/* tablets and up: the seven-icon bar */
@media (min-width:768px){:root{--dock:120px;--air-bottom:20px;--safe-b:0px}}
@media (min-width:700px){:root{--gutter:48px;--top:72px;--air-top:40px;--row-gap:22px;--gap-h:16px;--col-gap:32px;
  --h1:84px;--h1-lh:80px;--h2:62px;--h2-lh:60px;--lede:18px;--lede-lh:28px;--small:14px}}
@media (min-width:1200px){:root{--gutter:120px;--top:80px;--air-top:48px;--row-gap:24px;--gap-h:18px;--col-gap:48px;
  --h1:108px;--h1-lh:98px;--h2:76px;--h2-lh:72px;--lede:19px;--lede-lh:30px;--ctl:52px;--ctl-gap:18px}}
@media (min-width:1200px) and (max-height:940px){:root{--h1:96px;--h1-lh:88px;--h2:66px;--h2-lh:64px;--lede:18px;--lede-lh:28px}}
@media (min-width:1800px) and (min-height:1000px){:root{--top:88px;--air-top:64px;--air-bottom:32px;--row-gap:30px;--gap-h:22px;--col-gap:64px;
  --h1:140px;--h1-lh:126px;--h2:96px;--h2-lh:92px;--lede:22px;--lede-lh:34px;--ctl:56px;--ctl-gap:22px;--small:15px}}

/* SHORT COMPUTER SCREENS (1366x768, 1280x800 laptops): the same frame, a little tighter, and the same seven-icon bar at a
   slightly smaller size - so every screen still fits between the top bar and the bar with nothing touching */
@media (min-width:768px) and (max-height:830px){:root{--dock:100px;--air-bottom:16px}}
@media (min-width:1100px) and (max-height:830px){:root{--top:68px;--air-top:28px;--row-gap:14px;--gap-h:10px;--col-gap:40px;
  --h1:70px;--h1-lh:66px;--h2:50px;--h2-lh:50px;--lede:16px;--lede-lh:24px;--ctl:44px;--ctl-gap:14px}}