/* ChickenSandwichWars.com — design system */
:root{
  --bg:#0A0B0D; --bg-2:#101216; --panel:#14171C; --panel-2:#1A1E24;
  --line:#252A32; --line-2:#333A45;
  /* Three inks, and the muted one is a contrast floor as much as a colour.
     At #7C8590 it measured 4.80:1 on a card and 4.47:1 on a hovered one --
     under the 4.5:1 WCAG AA minimum, so every card description, table header
     and date on the site failed the moment the pointer landed on it. #98A2AE
     is 6.94:1 on a card and 6.48:1 hovered, and still reads as clearly
     subordinate to --ink and --ink-2. */
  --ink:#EDEFF2; --ink-2:#B4BBC4; --ink-3:#98A2AE;
  --accent:#F2A413; --accent-2:#E5484D; --hot:#FF5A1F;
  --up:#3DD68C; --down:#FF6369; --flat:#8A93A0;
  --max:1240px; --radius:4px;
  /* Vertical rhythm. Every gap inside a boxed component comes from this scale,
     so a label sits closer to its heading than the heading does to its body and
     the grouping is deliberate rather than whatever the leading happened to
     leave behind. */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:32px;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --display:'Archivo','Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
img{max-width:100%}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono)}

/* ---------- header ---------- */
.topbar{background:#000;border-bottom:1px solid var(--line);font-size:12px;letter-spacing:.04em}
/* Full-bleed marquee: two identical tracks scroll left in lockstep, each
   translating by its own width, so the second is in position the moment the
   first clears. min-width keeps the loop seamless on very wide viewports. */
.ticker{display:flex;align-items:center;height:34px;overflow:hidden;white-space:nowrap;color:var(--ink-2)}
.ticker-track{display:flex;gap:26px;padding-right:26px;flex:none;min-width:100%;animation:ticker-scroll 70s linear infinite}
.ticker:hover .ticker-track,.ticker:focus-within .ticker-track{animation-play-state:paused}
.ticker b{color:var(--ink);font-weight:600}
@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){
  .ticker{overflow-x:auto;scrollbar-width:none}
  .ticker::-webkit-scrollbar{display:none}
  .ticker-track{animation:none}
  .ticker-track[aria-hidden]{display:none}
}
.up{color:var(--up)} .down{color:var(--down)} .flat{color:var(--flat)}

header.site{position:sticky;top:0;z-index:50;background:rgba(10,11,13,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.masthead{display:flex;align-items:center;gap:24px;height:64px}
.logo{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.05;display:flex;align-items:center;gap:10px}
.logo .mark{width:26px;height:26px;border-radius:3px;background:linear-gradient(140deg,var(--accent),var(--accent-2));display:grid;place-items:center;font-size:14px;flex:none}
.logo span.b{color:var(--accent)}
nav.primary{display:flex;gap:22px;margin-left:auto;font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
nav.primary a{color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent}
nav.primary a:hover,nav.primary a.on{color:var(--ink);border-bottom-color:var(--accent)}
.searchbtn{background:var(--panel);border:1px solid var(--line);color:var(--ink-3);border-radius:var(--radius);padding:7px 12px;font-size:13px;font-family:var(--sans);cursor:pointer;display:flex;gap:8px;align-items:center}
.searchbtn:hover{border-color:var(--line-2);color:var(--ink)}
.subnav{border-bottom:1px solid var(--line);background:var(--bg-2)}
.subnav .wrap{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;font-size:12.5px;height:42px;align-items:center;color:var(--ink-3);letter-spacing:.03em}
.subnav .wrap::-webkit-scrollbar{display:none}
.subnav a{white-space:nowrap}
.subnav a.on{color:var(--accent)}
/* Primary links ride in the subnav scroller only on phones -- see layout.js. */
.subnav a.phone-only{display:none}
.menutoggle{display:none;background:none;border:1px solid var(--line);color:var(--ink);border-radius:3px;padding:6px 10px;cursor:pointer}

/* ---------- mobile drawer ----------
   Off entirely outside the mobile breakpoint: every rule that gives these
   elements a box lives in the max-width:760px block near the bottom of this
   file, so desktop renders the markup as nothing. */
.drawer,.drawer-scrim{display:none}

/* ---------- type ---------- */
/* One line-height for four sizes cannot be right for all of them: 1.12 is a
   display setting, and on a 17px card title that wraps to two lines it puts the
   descenders of one line into the ascenders of the next. Leading tightens as
   size grows, which is the standard relationship. */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(30px,4.4vw,50px);line-height:1.08}
h2{font-size:clamp(22px,2.6vw,31px);line-height:1.18}
h3{font-size:20px;line-height:1.3}
h4{font-size:16px;letter-spacing:0;line-height:1.35}
p{margin:0 0 1rem}
.dek{color:var(--ink-2);font-size:clamp(16px,1.6vw,19px);line-height:1.55;max-width:70ch}
/* Overlines. Both used to inherit the 1.6 body leading, which on an 11px line
   is 3.3px of half-leading above and below -- so the gap to the heading under
   them was an accident of the line box rather than a decision, and read as the
   label touching the title. Tight leading plus an explicit margin makes the
   pair a group: label to heading is smaller than heading to body.
   The margin is inert on the few `<span class="kicker">` uses, since vertical
   margins do not apply to inline boxes.

   Size, weight and tracking are the other half of it. 11px is below the 12px
   floor every mainstream design system sets, and this string is also uppercase
   and tracked -- which removes the word shapes lowercase gives the eye. Three
   legibility taxes stacked on one label. So: 12px, weight 500 (already in the
   font request, and small strokes bloom lighter on a dark ground than they do
   on white), and .12em rather than .14em, which at this size was pulling the
   words apart. The kicker takes --ink-2 (9.28:1 on a card): a category label is
   a signpost meant to be scanned, so it sits brighter than the description
   under it, the standard editorial arrangement. It cannot compete with the
   title regardless -- 12px tracked caps against 17px of 800-weight display. */
.eyebrow{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);line-height:1.4;margin-bottom:12px}
.kicker{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);line-height:1.4;margin-bottom:6px}
.lede{font-size:18px;color:var(--ink-2);line-height:1.6}
.section{padding:44px 0;border-top:1px solid var(--line)}
.section:first-of-type{border-top:0}
.section-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:var(--sp-6)}
.section-head h2{margin:0}
.section-head .more{margin-left:auto;font-size:13px;color:var(--accent);font-weight:600}

/* ---------- hero ---------- */
.hero{padding:52px 0 34px;border-bottom:1px solid var(--line);background:
  radial-gradient(900px 380px at 12% -10%, rgba(242,164,19,.13), transparent 60%),
  radial-gradient(700px 340px at 88% 0%, rgba(229,72,77,.10), transparent 62%)}
.hero h1{max-width:19ch}
.hero .dek{max-width:64ch;font-size:clamp(16px,1.7vw,20px)}
.hero-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:32px}
.hero-stats .cell{background:var(--bg);padding:16px 18px}
.hero-stats .v{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:-.02em}
.hero-stats .l{font-size:12px;color:var(--ink-3);margin-top:5px;line-height:1.4}

/* ---------- grid + cards ---------- */
/* The gutter between cards is wider than the padding inside them, so the cards
   read as separate objects rather than one field of text. */
.grid{display:grid;gap:var(--sp-6)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.55fr .95fr;gap:34px;align-items:start}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-5)}
.card.tight{padding:14px 16px}
.card h3{font-size:17px;line-height:1.3;margin-bottom:var(--sp-2)}
.card.tight .kicker{margin-bottom:var(--sp-1)}
/* A list is a body element like any other: its 1em top margin stacked on the
   heading's own and opened a gap twice the size of the one under every other
   card heading. */
.card ol,.card ul{margin-top:0}
.card > :last-child{margin-bottom:0}
/* Card footer meta -- a count or a date under the description. Far enough to
   read as a separate line of the card, not another paragraph of it. */
.card .meta{font-size:12px;color:var(--ink-3);font-family:var(--mono);margin-top:14px}
a.card{display:block}
a.card:hover{border-color:var(--line-2);background:var(--panel-2);color:inherit}
a.card:hover h3{color:var(--accent)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.panel-head{padding:14px var(--sp-5);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.panel-head h3{margin:0;font-size:15px;letter-spacing:0}
.panel-body{padding:18px var(--sp-5)}
.panel-body > :last-child{margin-bottom:0}
.pad{padding:18px var(--sp-5)}

/* ---------- tables ---------- */
/* .tablescroll stacks the scroller, an edge fade and a hint line. Both extras
   are display:none here, so on desktop this is the plain bordered box it has
   always been -- the grid just gives the fade somewhere to sit without
   absolute positioning or height arithmetic. */
.tablescroll{display:grid;grid-template-columns:minmax(0,1fr)}
.tablescroll > .tablewrap{grid-row:1;grid-column:1}
.tablescroll > .tablefade,.tablescroll > .tablehint{display:none}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
table{border-collapse:collapse;width:100%;font-size:14px}
th{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-weight:500;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--bg-2);position:sticky;top:0}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panel-2)}
td.num,th.num{text-align:right;font-family:var(--mono);white-space:nowrap}
td.name{font-weight:600}
.rank{font-family:var(--display);font-weight:800;color:var(--ink-3);width:40px}

/* ---------- badges ---------- */
.badge{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border-radius:3px;border:1px solid var(--line-2);color:var(--ink-2);white-space:nowrap}
.badge.hot{color:#FFD08A;border-color:#6b4a12;background:rgba(242,164,19,.12)}
.badge.rocket{color:#FFB2A0;border-color:#7a3320;background:rgba(255,90,31,.13)}
.badge.good{color:#9BEBC4;border-color:#1f5c42;background:rgba(61,214,140,.10)}
.badge.warn{color:#FFC7A1;border-color:#7a4a20;background:rgba(255,145,60,.12)}
.badge.bad{color:#FFB3B6;border-color:#7a2427;background:rgba(229,72,77,.13)}
.badge.mut{color:var(--ink-3)}
.tags{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- source refs ---------- */
sup.ref{font-family:var(--mono);font-size:9.5px;color:var(--accent);margin-left:3px;vertical-align:super}
sup.ref a{color:var(--accent)}
.srclist{font-size:12.5px;color:var(--ink-3);line-height:1.7}
.srclist li{margin-bottom:6px}
.asof{font-family:var(--mono);font-size:11px;color:var(--ink-3)}
/* Secondary body copy -- card descriptions, panel notes, form intros. 13px is
   below the size this much running prose wants; 14px at slightly tighter
   leading is the same block of text, easier to read, and closer in weight to
   the heading it sits under. */
.note{font-size:14px;color:var(--ink-3);line-height:1.55;font-weight:400}
.callout{border-left:2px solid var(--accent);padding:2px 0 2px 16px;color:var(--ink-2);margin:18px 0}
.analysis{background:linear-gradient(180deg,rgba(242,164,19,.06),transparent);border:1px solid var(--line);border-left:2px solid var(--accent);border-radius:var(--radius);padding:var(--sp-5)}
.analysis .kicker{margin-bottom:var(--sp-2)}
.analysis > :last-child{margin-bottom:0}

/* ---------- stat blocks ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.stat{background:var(--panel);padding:var(--sp-4)}
.stat .v{font-family:var(--display);font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
/* The label names the value, the note qualifies it -- an equal gap either side
   of the label left it ambiguous which it belonged to. */
.stat .l{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-family:var(--mono);line-height:1.4;margin-top:var(--sp-1)}
.stat .n{font-size:12px;color:var(--ink-3);margin-top:var(--sp-2);line-height:1.45}

/* ---------- score ---------- */
.scorebox{display:flex;align-items:center;gap:18px}
.scorenum{font-family:var(--display);font-size:52px;font-weight:800;line-height:1;letter-spacing:-.03em}
.bars{display:grid;gap:9px}
.bar{display:grid;grid-template-columns:150px 1fr 42px;gap:12px;align-items:center;font-size:12.5px}
.bar .track{height:6px;background:var(--panel-2);border-radius:3px;overflow:hidden}
.bar .fill{height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent));border-radius:3px}
.bar .val{font-family:var(--mono);text-align:right;color:var(--ink-2)}
.bar .lbl{color:var(--ink-3)}
/* The as-of date under a score component's label. Mono so the periods line up down the
   column, and never smaller than 12px. Its colour is the finding: an undated or overdue
   figure is the one thing on this panel the eye should catch. */
.bar .asof{display:block;font-family:var(--mono);font-size:12px;line-height:1.3;margin-top:3px;color:var(--ink-3)}
.bar .asof.aging{color:#FFC7A1}
.bar .asof.stale{color:#FFB3B6}
.bar .asof.unknown{color:#FFC7A1;font-style:italic}

/* ---------- charts ---------- */
.chart{width:100%}
.chart .row{display:grid;grid-template-columns:190px 1fr 88px;gap:12px;align-items:center;font-size:13px;padding:4px 0}
.chart .track{height:16px;background:var(--panel-2);border-radius:2px;overflow:hidden;position:relative}
.chart .fill{height:100%;background:linear-gradient(90deg,rgba(242,164,19,.85),rgba(229,72,77,.85))}
.chart .fill.neg{background:linear-gradient(90deg,rgba(255,99,105,.9),rgba(180,40,45,.9))}
.chart .v{font-family:var(--mono);text-align:right;color:var(--ink-2);font-size:12.5px}
.chart .lbl{color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- news ---------- */
.newsitem{border-bottom:1px solid var(--line);padding:var(--sp-5) 0}
.newsitem:last-child{border-bottom:0}
.newsitem .head{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-bottom:var(--sp-2)}
.newsitem h3{font-size:19px;margin:0 0 var(--sp-2);line-height:1.28}
.newsitem .means{color:var(--ink-2);font-size:15px;line-height:1.6;margin-bottom:0}
.newsitem .means b{color:var(--ink)}
.date{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.05em}

/* ---------- forms ---------- */
form.csw{display:grid;gap:14px;max-width:640px}
.field{display:grid;gap:6px}
label{font-size:12.5px;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
input,select,textarea{background:var(--bg-2);border:1px solid var(--line);color:var(--ink);border-radius:var(--radius);padding:10px 12px;font-family:var(--sans);font-size:15px;width:100%}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{min-height:120px;resize:vertical}
.btn{display:inline-block;background:var(--accent);color:#14100a;border:0;border-radius:var(--radius);padding:11px 20px;font-weight:700;font-size:14.5px;cursor:pointer;font-family:var(--sans)}
.btn:hover{background:#ffb62b;color:#14100a}
.btn.ghost{background:transparent;border:1px solid var(--line-2);color:var(--ink)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent);background:transparent}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.formnote{font-size:12.5px;color:var(--ink-3)}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;align-items:center}
.chip{background:var(--panel);border:1px solid var(--line);color:var(--ink-2);border-radius:99px;padding:5px 13px;font-size:12.5px;cursor:pointer;font-family:var(--sans)}
.chip:hover{border-color:var(--line-2);color:var(--ink)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#14100a;font-weight:600}
.searchinput{max-width:320px}

/* ---------- search overlay ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);z-index:100;display:none;padding:12vh 20px}
.overlay.open{display:block}
.searchpanel{max-width:640px;margin:0 auto;background:var(--panel);border:1px solid var(--line-2);border-radius:6px;overflow:hidden}
.searchpanel input{border:0;border-bottom:1px solid var(--line);border-radius:0;font-size:17px;padding:16px 18px;background:var(--panel)}
#searchResults{max-height:52vh;overflow-y:auto}
#searchResults a{display:block;padding:11px 18px;border-bottom:1px solid var(--line)}
#searchResults a:hover{background:var(--panel-2)}
#searchResults .t{font-weight:600;font-size:14.5px}
#searchResults .s{font-size:12px;color:var(--ink-3)}

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--line);background:#08090B;margin-top:56px;padding:44px 0 30px;font-size:13.5px;color:var(--ink-3)}
footer.site .cols{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:28px}
footer.site h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px;font-weight:500}
footer.site ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
footer.site a{color:var(--ink-2)}
footer.site a:hover{color:var(--accent)}
footer.site .fine{margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;line-height:1.7}
.breadcrumb{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:.06em;padding:16px 0 0}
.breadcrumb a{color:var(--ink-3)}

/* ---------- misc ---------- */
.list-reset{list-style:none;margin:0;padding:0}
.bullets{padding-left:18px;color:var(--ink-2)}
.bullets li{margin-bottom:7px}
.empty{border:1px dashed var(--line-2);border-radius:var(--radius);padding:var(--sp-7) var(--sp-6);text-align:center;color:var(--ink-3)}
.empty h3{color:var(--ink-2);margin-bottom:var(--sp-2)}
.prose{max-width:74ch}
.prose h2{margin-top:2em;margin-bottom:.55em;font-size:24px}
/* Long-form measure is 74ch; at that width 16.5px wants more leading than the
   1.6 the body sets, or the eye loses the line return. */
.prose p{font-size:16.5px;color:var(--ink-2);line-height:1.7}
.toc{font-size:13.5px;color:var(--ink-2)}
.toc a{display:block;padding:5px 0;border-bottom:1px solid var(--line)}
.sticky{position:sticky;top:120px}
.cta{background:linear-gradient(120deg,rgba(242,164,19,.12),rgba(229,72,77,.08));border:1px solid var(--line-2);border-radius:var(--radius);padding:var(--sp-6)}
.cta h3{margin-bottom:var(--sp-2)}
.cta p{margin-bottom:18px}
.cta > :last-child{margin-bottom:0}

@media(max-width:1000px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:26px}
  .sticky{position:static}
  footer.site .cols{grid-template-columns:repeat(2,1fr)}
}
/* Table scroll was invisible everywhere below the desktop layout: mobile and
   tablet browsers hide scrollbars, so 36 of 52 tables cut their content off
   with nothing to say so -- the brands index showed 351px of an 893px table.
   The fade covers every width where a table can scroll, not only phones; the
   worded hints further down are phone-specific. */
@media(max-width:920px){
  .tablescroll > .tablefade{grid-row:1;grid-column:1;justify-self:end;align-self:stretch;
    width:56px;margin:1px 1px 1px 0;pointer-events:none;
    border-radius:0 var(--radius) var(--radius) 0;
    background:linear-gradient(to left,var(--panel) 18%,rgba(20,23,28,0));
    opacity:0;transition:opacity .18s ease}
  .tablescroll.is-scrollable > .tablefade{display:block;opacity:1}
  .tablescroll.at-end > .tablefade{opacity:0}
}

/* 761-920px -- an iPad in portrait is 810 or 820pt, and lands here. The full
   desktop masthead does not fit: logo, five nav items and a labelled search
   button need 903px, so below that the page scrolled sideways exactly as
   phones did -- 142px of overrun at 761px. This band keeps the horizontal nav
   rather than dropping to the drawer, since a 900px-wide laptop window should
   not suddenly grow a hamburger; it only tightens it enough to fit. */
@media(min-width:761px) and (max-width:920px){
  .masthead{gap:16px}
  .logo{font-size:16px;gap:8px;min-width:0}
  .logo .mark{width:23px;height:23px;font-size:13px}
  nav.primary{gap:14px;font-size:12px;letter-spacing:.05em}
  .searchbtn span{display:none}
  .searchbtn{padding:7px 10px}
  .subnav .wrap{gap:16px;font-size:12px}
}

@media(max-width:760px){
  /* ---- header ----
     The masthead used to measure 440px against a 393px viewport, which put the
     menu button off-screen and made every page horizontally scrollable. Three
     things caused that and all three are fixed here: the wordmark could not
     shrink (min-width:auto on a flex item), it was set at a fixed 19px, and the
     two buttons were sized by padding rather than to a tap target. */
  .wrap{padding:0 16px}
  .masthead{height:56px;gap:10px}
  .logo{font-size:clamp(11.5px,3.7vw,17px);gap:7px;min-width:0}
  .logo > span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .logo .mark{width:22px;height:22px;font-size:12px}
  nav.primary{display:none}
  .searchbtn,.menutoggle{width:44px;height:44px;flex:none;padding:0;display:grid;place-items:center;font-size:17px;margin:0}
  .searchbtn{margin-left:auto}
  .searchbtn span{display:none}
  .menutoggle{display:grid}
  .subnav .wrap{height:44px;gap:18px}
  .subnav a{padding:12px 0}
  .subnav a.phone-only{display:block}

  /* ---- drawer ----
     Fixed, not absolute. The old panel was absolutely positioned at left:0
     right:0, so it was only ever as wide as the viewport and sat at document
     x=0 -- once the page was scrolled sideways it stopped covering the content
     beside it, which is what made body text appear to bleed through the menu.
     A fixed panel is positioned against the viewport and cannot come apart
     from it. It also clears the subnav, which used to overlap the first item. */
  .drawer-scrim{display:block;position:fixed;inset:0;z-index:88;background:rgba(0,0,0,.62);
    opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
  .drawer-scrim.open{opacity:1;visibility:visible}
  .drawer{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;z-index:89;
    width:min(84vw,330px);background:var(--bg-2);border-left:1px solid var(--line-2);
    box-shadow:-18px 0 40px rgba(0,0,0,.45);
    transform:translateX(100%);visibility:hidden;transition:transform .24s ease,visibility .24s ease;
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .drawer.open{transform:none;visibility:visible}
  @media (prefers-reduced-motion:reduce){
    .drawer,.drawer-scrim{transition:none}
  }
  .drawer-head{display:flex;align-items:center;height:56px;padding:0 8px 0 18px;
    border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg-2);z-index:1}
  .drawer-title{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
  .drawer-close{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;
    background:none;border:0;color:var(--ink-2);font-size:16px;cursor:pointer;font-family:var(--sans)}
  .drawer-search{margin:14px 18px 4px;padding:11px 14px;background:var(--panel);border:1px solid var(--line);
    border-radius:var(--radius);color:var(--ink-3);font-family:var(--sans);font-size:14.5px;text-align:left;cursor:pointer}
  .drawer-nav{display:flex;flex-direction:column;padding:6px 18px 0}
  .drawer-group{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-3);margin:18px 0 2px}
  .drawer-nav a{display:flex;align-items:center;min-height:44px;padding:4px 0;
    border-bottom:1px solid var(--line);color:var(--ink-2);font-size:15px}
  .drawer-nav a.on{color:var(--accent);font-weight:600}

  /* ---- layout ---- */
  .g2,.g3,.g4{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .section{padding:32px 0}
  .hero{padding:34px 0 26px}
  .hero-stats{grid-template-columns:1fr 1fr;margin-top:24px}
  .hero-stats .cell{padding:14px}
  .hero-stats .v{font-size:21px}
  .hero-stats .l{font-size:11.5px}
  .stats{grid-template-columns:1fr 1fr}
  .chart .row{grid-template-columns:minmax(0,1fr) 90px 62px;font-size:12px}
  .bar{grid-template-columns:96px minmax(0,1fr) 32px;gap:10px}
  .scorebox{gap:14px}
  .scorenum{font-size:42px}
  footer.site{margin-top:40px;padding:34px 0 24px}
  footer.site .cols{grid-template-columns:1fr 1fr;gap:22px}
  footer.site .cols > *{min-width:0}
  .cta{padding:18px}
  .card{padding:var(--sp-4)}
  .grid{gap:18px}
  .panel-body,.pad{padding:14px 16px}
  /* A single non-wrapping flex row of title + badge + score is wider than a
     phone once a brand name is long. */
  .panel-head{flex-wrap:wrap;gap:8px 10px;padding:12px 16px}
  .panel-head > *{min-width:0}
  .prose h2{font-size:21px}

  /* Anchors have to clear the sticky header, which is 56 + 44 here, not the
     64 + 42 it is on desktop. */
  [id^="src-"], .prose h2, section[id]{scroll-margin-top:112px}
  .sticky{top:112px}

  /* 16px is the threshold below which iOS Safari zooms the page in on focus and
     leaves it zoomed -- which on its own made every form feel broken. */
  input,select,textarea{font-size:16px}
  .btn{padding:12px 20px}
  .chip{min-height:36px;padding:6px 14px}
  .filters .searchinput{max-width:none;flex:1 1 100%}

  /* width:100% on a table narrower than its content crushes whichever columns
     can wrap: the numeric ones held their nowrap width and the name column
     absorbed the entire shortfall, so "Krispy Krunchy Chicken" came out over
     three lines. A floor under the name column stops that. Long labels still
     wrap rather than forcing the column open, and the extra scroll it can cost
     is now signposted. */
  .tablewrap .idcol{min-width:min(48vw,var(--idw,180px))}
  /* --fcw is measured in C.table() from the widest token in the first column, so
     a date never breaks at its hyphens while a phrase still wraps at its spaces.
     nowrap would not do: the column then sizes to its longest whole value, and
     "2025-07 to 2026-07" took 168px of a 359px table, pushing a column clean off
     the screen. */
  .tablewrap td:first-child:not(.idcol),.tablewrap th:first-child:not(.idcol){min-width:var(--fcw,0px)}
  .tablehint{grid-row:2;grid-column:1;margin:8px 0 0;font-family:var(--mono);
    font-size:11px;letter-spacing:.06em;line-height:1.5;color:var(--ink-3)}
  .tablescroll.is-scrollable > [data-swipehint]{display:block}
  .tablewrap th{position:static}

  .overlay{padding:6vh 12px}
  .searchpanel input{font-size:16px}
  #searchResults{max-height:60vh}
  #searchResults a{padding:13px 16px}
}

@media(max-width:640px){
  /* Columns marked hideSmall step aside here rather than sitting off-screen.
     Nothing is lost: the label below every such table restores the full set,
     and it is a checkbox, so it works with JavaScript switched off. */
  .hide-sm{display:none}
  .tablescroll > label.tablehint{display:block;cursor:pointer;padding:9px 0 0;margin:0}
  label.tablehint b{color:var(--accent);font-weight:500;text-decoration:underline;text-underline-offset:3px}
  .tablehint .th-b{display:none}
  .colstoggle:checked ~ .tablehint .th-a{display:none}
  .colstoggle:checked ~ .tablehint .th-b{display:inline}
  .colstoggle:checked ~ .tablewrap .hide-sm{display:table-cell}
}

@media(max-width:520px){
  .hero-stats,.stats{grid-template-columns:1fr}
  footer.site .cols{grid-template-columns:1fr}
  .chart .row{grid-template-columns:minmax(0,1fr) 68px 56px}
}

/* ---------- grid overflow containment ----------
   Grid children default to min-width:auto, so a wide table inside an aside can
   force its track past its fr share and squeeze the main column. */
.split > *, .grid > *, .hero-stats > *, .stats > *{min-width:0}
/* An aside panel has roughly 440px to divide. table-layout:fixed splits that
   into equal columns, which left a street address 130px wide and four lines
   deep beside two figures that need eighty. Sizing the numeric columns to what
   they actually hold gives the identity column the remainder. */
.panel table{table-layout:fixed;width:100%}
.panel table td.num,.panel table th.num{width:88px}
.panel table td{word-wrap:break-word;overflow-wrap:anywhere}
.tablewrap table{table-layout:auto}
[id^="src-"], .prose h2, section[id]{scroll-margin-top:130px}
.subnav .wrap{-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.panel td.num{white-space:normal}

/* Honeypot. Positioned off-screen rather than display:none, which some bots skip;
   aria-hidden and tabindex="-1" keep it out of the accessibility tree and tab order. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}