/* vegan trainers: THE SHOP (2026-11-04). A small independent trainer shop where every pair on the wall is vegan, and each
   wears a swing tag that says why. Warm paper and painted brick, oak, downlights. Young Serif is the shop's sign-writing,
   Archivo its own voice, Plex Mono its tags and labels. Green is spent only on a confirmed verdict, amber on likely, red
   on animal material; everything else is ink. */
:root{
  --paper:#F5EFE6;--paper-2:#FBF8F2;--card:#FFFDF9;--ink:#2A2520;--ink-2:#6B6158;--ink-3:#958B81;--line:#E4DACD;--dash:#d8cdbd;
  --vegan:#2F6B47;--maybe:#A9660F;--danger:#9C4034;
  --display:'Young Serif',Georgia,serif;--ui:'Archivo',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
  --wall-base:#dfcab3;--plate:url(/shop/img/wall-brick.webp);--plate-hi:url(/shop/img/wall-brick-hi.webp);--pool:rgba(255,226,176,.7);--pool-a:.85;--vig:rgba(80,50,22,.26);--glow:#ffd9a0;
  --chrome:64px;
  /* one column for the whole site: the span of the wall's shelves (92% of the wall, which is 1.5x the hero's height), up
     to 1216px. The fascia, the headline, the search pill and every page's content line up with the shelves' edges. */
  --span:min(1216px,calc(min(clamp(520px,100svh - 64px,960px),66.67vw) * 1.38));
  color-scheme:light;
}
*{box-sizing:border-box;margin:0}
html{background:var(--paper)}
body{font-family:var(--ui);color:var(--ink);background:var(--paper);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:calc(var(--span) + 64px);margin:0 auto;padding:0 32px}
.main{padding-top:36px;padding-bottom:88px}

/* ---- voices ---- */
.lab,.kicker,.eyebrow{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.06em;color:var(--ink-2)}
.lab{text-transform:uppercase;font-size:11px}
.kicker,.eyebrow{display:block;margin-bottom:12px}
h1{font-family:var(--display);font-weight:400;font-size:clamp(36px,5vw,66px);line-height:1;letter-spacing:-.02em;text-wrap:balance}
h2{font-family:var(--display);font-weight:400;font-size:clamp(26px,3vw,36px);line-height:1.08;letter-spacing:-.015em;margin:44px 0 12px;text-wrap:balance}
h2::first-letter{text-transform:uppercase}
h3{font-family:var(--ui);font-weight:600;font-size:18px;line-height:1.25;margin:10px 0 6px}
.lede{color:var(--ink-2);font-size:17px;margin-top:14px;max-width:40em}
.lede b,.lede strong{color:var(--ink);font-weight:600}
h2.sec{margin:0;font-size:clamp(30px,3.6vw,46px);line-height:1.02}

/* ---- the fascia ---- */
header.site{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:24px;height:64px}
.wordmark{display:inline-flex;align-items:baseline;gap:8px;text-decoration:none;font-family:var(--display);font-size:23px;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.wordmark i{font-style:normal;color:var(--vegan);font-family:var(--ui);font-weight:700;font-size:15px}
header.site nav{margin-left:auto;display:flex;gap:26px}
header.site nav a{text-decoration:none;font-size:14px;font-weight:500;white-space:nowrap;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:2px;transition:background-size 220ms ease}
header.site nav a:hover,header.site nav a[aria-current]{background-size:100% 1.5px}

/* ---- buttons, the search pill, chips ---- */
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.btn,.pillbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;border-radius:999px;font:inherit;font-size:14.5px;font-weight:600;text-decoration:none;cursor:pointer;
  background:var(--card);color:var(--ink);border:1px solid var(--line);transition:transform 160ms ease,background 160ms ease,border-color 160ms ease}
.btn:hover{border-color:var(--ink-3)}
.btn.accent,.pillbtn{background:var(--ink);color:var(--paper-2);border-color:var(--ink)}
.btn.accent:hover,.pillbtn:hover{background:#000}
.btn:active,.pillbtn:active{transform:scale(.97)}
.pillbtn{height:40px;padding:0 18px;font-size:14px}
.btn span[aria-hidden],.pillbtn span[aria-hidden]{transition:transform 160ms ease}
.btn:hover span[aria-hidden],.pillbtn:hover span[aria-hidden]{transform:translateX(3px)}
.ask{display:flex;align-items:center;background:var(--card);border-radius:999px;box-shadow:0 1px 0 rgba(42,37,32,.06),0 6px 18px -8px rgba(60,40,20,.35);padding:5px 5px 5px 20px;width:min(420px,100%)}
.ask input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);outline:none;height:38px}
.ask input::placeholder{color:var(--ink-3)}
.ask button{border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:600;background:var(--ink);color:var(--paper-2);border-radius:999px;height:40px;padding:0 18px;transition:transform 160ms ease,background 160ms ease}
.ask button:hover{background:#000}
.ask button:active{transform:scale(.97)}
.ask:focus-within{box-shadow:0 0 0 2px var(--ink),0 6px 18px -8px rgba(60,40,20,.35)}
.tools{margin:26px 0 6px;scroll-margin-top:84px}
.tools .ask{box-shadow:none;border:1px solid var(--line);width:min(480px,100%);padding:5px 6px 5px 20px}
.tools .ask:focus-within{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.filters{display:flex;flex-direction:column;gap:10px;margin:18px 0 4px}
.frow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.flab{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);min-width:52px}
.pill{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 15px;border:1px solid var(--line);background:var(--card);border-radius:999px;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background 160ms ease,border-color 160ms ease,color 160ms ease}
.pill:hover{border-color:var(--ink-3)}
.pill.on{background:var(--ink);border-color:var(--ink);color:var(--paper-2)}
.pill .tick{display:none}
.pill.on .tick{display:inline}
.count{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin:20px 0 16px}

/* ---- verdict marks: one stamp, four states, used on cards, tags and the key ---- */
.mark{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;white-space:nowrap;padding:5px 13px 5px 6px;border:1.5px solid var(--vegan);border-radius:999px;color:var(--vegan);font-size:13px;font-weight:700;line-height:1.2}
.mark i,.mk{font-style:normal;display:inline-grid;place-items:center;width:18px;height:18px;flex:none;border-radius:50%;background:var(--vegan);color:#fff;font-size:10px;font-weight:700;line-height:1}
.mark.u{border-color:var(--maybe);color:var(--maybe)}.mark.u i{background:var(--maybe)}
.mark.n{border-color:var(--danger);color:var(--danger)}.mark.n i{background:var(--danger)}
.mark.x{border-color:var(--line);color:var(--ink-2)}.mark.x i{background:var(--ink-3)}
.mk.t-u{background:var(--maybe)}.mk.t-n{background:var(--danger)}.mk.t-x{background:var(--ink-3)}
.key{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 26px;background:var(--card);border-radius:12px;padding:16px 18px;margin:22px 0 0}
.key-i{display:flex;gap:10px;align-items:flex-start}
.key-t{font-size:13px;line-height:1.4;color:var(--ink-2)}
.key-t b{display:block;font-weight:600;color:var(--ink)}

/* ---- cards: the whole shop ---- */
.models{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:30px 22px}
.mcard{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.mcard .shot{position:relative;aspect-ratio:4/3;border-radius:8px;overflow:hidden;background:#ece6dc}
.mcard .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;transform:scale(1.14);transition:transform 500ms cubic-bezier(.2,.8,.2,1),opacity 160ms ease}
.mcard:hover .shot img{transform:scale(1.2)}
.mcard .shot img.swap{opacity:.4}
.mcard .badge{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:6px;background:var(--card);border-radius:999px;padding:4px 10px 4px 5px;font-size:12px;font-weight:600}
.mcard .badge i{font-style:normal;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:10px;background:var(--vegan)}
.mcard .badge.u i{background:var(--maybe)}.mcard .badge.x i{background:var(--ink-3)}
.mcard a.go{text-decoration:none;color:inherit;display:block}
.mcard a.go::after{content:"";position:absolute;inset:0;z-index:1}
.mcard .nm{font-weight:600;font-size:16.5px;line-height:1.2;letter-spacing:-.005em;overflow-wrap:anywhere}
.mcard .br{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-top:3px}
.mcard .ft{font-size:12.5px;color:var(--ink-3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcard .ft .cw{color:var(--ink)}
/* five swatches always fit the card: they shrink with it rather than run off its edge */
/* the swatch row keeps its height even when a model has no swatches, so every card in a row lines its name up */
.sw{position:relative;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,42px)) auto;gap:6px;align-items:center;margin-top:-2px;min-height:32px}
.sw button{width:100%;aspect-ratio:42/32;border:1px solid var(--line);border-radius:6px;background:#efe9df;padding:0;overflow:hidden;cursor:pointer;transition:border-color 140ms ease,transform 140ms ease}
.sw button img{width:100%;height:100%;object-fit:cover;transform:scale(1.35);display:block}
.sw button:hover,.sw button.on{border-color:var(--ink)}
.sw button:active{transform:scale(.95)}
.sw .more{font-family:var(--mono);font-size:11.5px;color:var(--ink-2);padding-left:4px}
.sw .more.m{display:none}
.sw button:nth-of-type(n+6){display:none}
.empty{border:1px dashed var(--dash);border-radius:12px;padding:40px 24px;text-align:center;font-family:var(--display);font-size:20px;margin-top:16px}
.pager{display:flex;gap:12px;align-items:center;justify-content:center;margin:40px 0 4px;flex-wrap:wrap}
.pager button{height:42px;padding:0 20px;border-radius:999px;border:1px solid var(--line);background:var(--card);font:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer}
.pager button:hover:not(:disabled){border-color:var(--ink-3)}
.pager button:disabled{color:var(--ink-3);background:transparent;cursor:default}
.pager .pinfo{font-family:var(--mono);font-size:12px;color:var(--ink-2);min-width:120px;text-align:center}

/* ---- the home page's rooms ---- */
.browse-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.how{background:var(--ink);color:var(--paper);padding:clamp(56px,8vw,104px) 0}
.how .eyebrow{color:#b7ab9e}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px}
.steps>div{border-top:1px solid #4a423a;padding-top:20px}
.steps .n{font-family:var(--display);font-size:44px;line-height:1;color:#e9dccb}
.steps h3{font-size:18px;margin:14px 0 8px}
.steps p{font-size:15px;color:#cfc3b5;max-width:34ch}
.how .sign{display:flex;gap:16px;align-items:center;margin-top:44px;flex-wrap:wrap;font-size:14.5px;color:#cfc3b5}
.how .sign a{color:var(--paper)}
.how .mark{background:var(--paper);border-color:var(--paper)}

/* ---- a model page: the question, the swing tag that answers it ---- */
.crumb{font-family:var(--mono);font-size:12px;color:var(--ink-2);margin-bottom:12px}
.crumb a{text-decoration:none;border-bottom:1px solid var(--ink-3)}
.crumb a:hover{border-color:var(--ink);color:var(--ink)}
.top{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:start}
.top h1{margin-top:4px}
.answer{position:relative;margin-top:22px;background:var(--card);border-radius:4px 4px 16px 16px;padding:34px 28px 24px;box-shadow:0 1px 0 rgba(40,25,10,.06),0 16px 36px -20px rgba(60,40,20,.45);max-width:640px;font-size:15px;color:var(--ink-2)}
.top .answer{transform:rotate(1deg);transform-origin:50% 0}
.answer::before{content:"";position:absolute;top:13px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--paper);box-shadow:inset 0 1px 2px rgba(0,0,0,.3),0 0 0 4px #efe6d8}
.top .answer::after{content:"";position:absolute;left:50%;bottom:calc(100% - 19px);width:1.5px;height:44px;background:#a8987f;transform:rotate(-1deg);transform-origin:50% 100%}
.answer b,.answer summary b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(24px,2.3vw,30px);line-height:1.1;color:var(--ink)}
.answer>.mark{margin-bottom:12px}
.a-body summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:12px}
.a-body summary::-webkit-details-marker{display:none}
.a-body summary::after{content:"";flex:none;width:9px;height:9px;margin:10px 4px 0 auto;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);transition:transform 160ms ease}
.a-body[open] summary::after{transform:rotate(-135deg);margin-top:14px}
.a-lead{margin-top:12px}
.a-lead strong{color:var(--ink);font-weight:600}
.a-lead a{color:var(--ink)}
.answer .from{margin-top:14px;padding-top:12px;border-top:1px dashed var(--dash);font-size:14.5px;color:var(--ink-2)}
.answer .from b{display:inline;font-family:var(--display);font-size:20px;color:var(--ink)}

/* the stage: one colourway at a time. The photo and its swatches hold column one, the tag runs down column two, so pointing
   at a swatch swaps the whole panel without the swatches moving. */
.stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:56px;margin-top:52px;scroll-margin-top:80px}
.pdp-detail{display:none}
.pdp-detail.cur{display:contents}
.plate{grid-column:1;grid-row:1;position:relative}
.lbl{grid-column:2;grid-row:1/span 2;align-self:start;min-width:0}
.cws{grid-column:1;grid-row:2;align-self:start;margin-top:16px}
.pshot{position:relative;aspect-ratio:1;border-radius:8px;overflow:hidden;background:#ece6dc}
.pshot img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)}
.pdp-detail.dim .pshot img{opacity:.6;filter:grayscale(.4)}
/* the inked stamp: pressed on at an angle, a hand checking it rather than a badge */
.ink{position:absolute;top:18px;right:18px;width:clamp(88px,9vw,118px);aspect-ratio:1;color:var(--vegan);transform:rotate(-11deg);mix-blend-mode:multiply;opacity:.88;pointer-events:none}
.ink.u{color:var(--maybe)}.ink.n{color:var(--danger)}.ink.x{color:var(--ink-3)}
.ink svg{width:100%;height:100%;display:block}
.ink text{font-family:var(--mono);font-size:15px;letter-spacing:.06em;font-weight:600;fill:currentColor}
.cap{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-family:var(--mono);font-size:11.5px;color:var(--ink-3)}
.lbl .kick{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2);text-transform:uppercase}
.lbl .nm{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.5vw,34px);line-height:1.08;letter-spacing:-.012em;margin:8px 0 0;text-transform:capitalize;text-wrap:balance}
.lbl .nm::first-letter{text-transform:uppercase}
.spec{margin-top:20px;border-top:1.5px solid var(--ink)}
.spec div{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:9px 0;border-bottom:1px dashed var(--dash);font-size:14.5px}
.spec dt{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding-top:3px}
.spec dd{margin:0;min-width:0;overflow-wrap:anywhere}
.verdict{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.ev{font-size:14px;color:var(--ink-2);max-width:58ch}
.ev q{quotes:'\201C' '\201D';font-style:italic;color:var(--ink)}
.ev b{color:var(--ink);font-weight:600}
/* buying: one row per shop, the whole row is the link; the first leads in ink */
.buy{margin-top:22px;display:flex;flex-direction:column}
.route{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 6px;border-bottom:1px solid var(--line);text-decoration:none;transition:padding 220ms cubic-bezier(.2,.8,.2,1),background 160ms ease}
.route:hover{padding-left:14px}
.r-shop{font-weight:600;font-size:15px}
.r-mid{font-family:var(--display);font-size:21px;line-height:1.15;min-width:0}
.r-mid s{font-family:var(--ui);font-size:13px;opacity:.55;margin-left:6px}
.r-mid .st{display:block;font-family:var(--ui);font-size:13px;color:var(--ink-2);margin-top:2px}
.r-go{font-size:13px;font-weight:600;white-space:nowrap}
.route:first-child{background:var(--ink);color:var(--paper-2);padding:18px 22px;border:0;border-radius:14px;box-shadow:0 14px 30px -18px rgba(42,37,32,.8);margin-bottom:14px}
.route:first-child .st{color:#c9bdaf}
.route:first-child:hover{background:#000;padding-left:28px}
.route:active{transform:scale(.99)}
.chp{position:absolute;top:-11px;right:14px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:#fff;background:var(--vegan);padding:3px 9px;border-radius:999px}
.src{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:12px;font-family:var(--mono);font-size:12px;color:var(--ink-2);text-decoration:none;padding:2px 6px}
.src s{opacity:.6}
.src-go{flex:none;white-space:nowrap}
.src:hover{color:var(--ink)}
/* the swatches: the home cards' swatches, bigger, every colourway, vegan first, animal material faded and struck */
.cwh{display:flex;justify-content:space-between;align-items:baseline;gap:6px 14px;flex-wrap:wrap;margin-bottom:10px;font-size:13.5px;color:var(--ink-2)}
.cwh b{font-weight:600;color:var(--ink)}
.cwh .tally{display:flex;gap:4px 14px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px}
.cwh .d{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--vegan)}
.cwh .d.u{background:var(--maybe)}.cwh .d.n{background:var(--danger)}.cwh .d.x{background:var(--ink-3)}
.gsel{margin:0 0 12px}
.gsel .pill{height:32px;padding:0 12px;font-size:12.5px}
.sws{display:flex;flex-wrap:wrap;gap:6px}
.sws button{position:relative;width:48px;height:36px;flex:none;border:1px solid var(--line);border-radius:6px;background:#efe9df;padding:0;overflow:hidden;cursor:pointer;transition:border-color 140ms ease,transform 140ms ease}
.sws button img{width:100%;height:100%;object-fit:cover;transform:scale(1.35);display:block}
.sws button:hover,.sws button.peek{border-color:var(--ink-3)}
.sws button.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.sws button:active{transform:scale(.95)}
.sws button.t-u::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--maybe);box-shadow:0 0 0 1.5px #fff}
.sws button.t-x img{opacity:.6}
.sws button.t-x::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--ink-3);box-shadow:0 0 0 1.5px #fff}
.sws button.t-n img{opacity:.42;filter:grayscale(.7)}
.sws button.t-n::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .75px),var(--danger) calc(50% - .75px),var(--danger) calc(50% + .75px),transparent calc(50% + .75px));opacity:.7}
.sbuy{display:none}
.note{margin-top:56px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2);max-width:72ch}
.note a{color:var(--ink)}
.rel{margin-top:14px;font-size:14px;display:flex;gap:6px 18px;flex-wrap:wrap;align-items:baseline;max-width:860px}
.rel .lab{color:var(--ink-2)}
.rel a{color:var(--ink);text-underline-offset:3px}
.rel a.all{font-weight:600}
.also{margin-top:36px;font-size:14px;color:var(--ink-2);line-height:2}
.also a{color:var(--ink-2)}
.also .lab{display:block;margin-bottom:6px;line-height:1.4}

/* ---- long reads: the 2026 report and the prose pages ---- */
.prose{max-width:680px}
.prose p{margin:16px 0;color:var(--ink-2);font-size:16.5px;line-height:1.65}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink)}
.prose ul{color:var(--ink-2);margin:14px 0;padding-left:20px}
.prose li{margin:7px 0}
.prose h2{margin-top:44px}
.prose .key{margin:20px 0}
/* the report: one column, one left edge for crumb, title, text, tables and headings */
.article{max-width:42rem;margin:0 auto}
.article h1{font-size:clamp(34px,6vw,56px);line-height:1.02}
.a-byline{display:flex;flex-wrap:wrap;align-items:center;gap:5px 12px;margin-top:18px;padding-bottom:16px;border-bottom:1.5px solid var(--ink)}
.a-byline .dot{color:var(--ink-3);font-size:9px}
.article .a-stand{font-size:clamp(18px,4.7vw,20.5px);line-height:1.5;color:var(--ink);margin-top:24px}
.article .a-stand strong{font-weight:600}
.article p{font-size:17px;line-height:1.7;color:var(--ink);margin:20px 0}
.article ul{font-size:17px;line-height:1.7;color:var(--ink);padding-left:20px}
.article li{margin:8px 0}
.article strong{font-weight:600}
.article a{color:var(--ink)}
/* the short rule over each heading is a background, so the heading's first letter can still take its capital */
.article h2{font-size:clamp(26px,5.6vw,32px);margin:52px 0 6px;padding-top:20px;background:linear-gradient(var(--ink),var(--ink)) 0 0/44px 2px no-repeat}
.kfind{background:var(--card);border-radius:14px;overflow:hidden;margin:28px 0 8px;box-shadow:0 1px 0 rgba(40,25,10,.06),0 16px 36px -24px rgba(60,40,20,.45)}
.kfind .kf-h{padding:12px 18px;background:var(--ink);color:#d9cfc3}
/* each finding: the figure, then what it means right beside it */
.kf-r{display:grid;grid-template-columns:6.5rem minmax(0,1fr);align-items:baseline;gap:16px;padding:14px 18px;border-bottom:1px dashed var(--dash)}
.kf-r:last-child{border-bottom:0}
.kf-n{font-family:var(--display);font-size:32px;line-height:1;font-variant-numeric:tabular-nums;flex:none}
.kf-n.hi{color:var(--vegan)}.kf-n.bad{color:var(--danger)}
.kf-l{font-size:14.5px;color:var(--ink-2)}
.league{list-style:none;padding:0;margin:20px 0 8px;max-width:none}
.league a.br{display:block;background:var(--card);border-radius:12px;padding:14px 16px;margin:0 0 10px;text-decoration:none;color:var(--ink);transition:transform 160ms ease,box-shadow 160ms ease}
.league a.br:hover{transform:translateY(-1px);box-shadow:0 10px 24px -16px rgba(60,40,20,.5)}
.br-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.br-name{font-weight:600;font-size:17px;line-height:1.1}
.br-pct{font-family:var(--display);font-size:22px;color:var(--vegan);font-variant-numeric:tabular-nums;flex:none;line-height:1}
.br-bar{display:block;height:8px;border-radius:999px;background:#ece4d8;margin:10px 0;overflow:hidden}
.br-bar span{display:block;height:100%;background:var(--vegan);border-radius:999px}
.br-nums{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--ink-2)}
.br-nums b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.pull{margin:36px 0;padding:4px 0 4px 20px;border-left:3px solid var(--danger)}
.pull .pn{font-family:var(--display);font-size:clamp(48px,13vw,68px);line-height:.92;color:var(--danger)}
.pull .pt{font-family:var(--display);font-size:19px;line-height:1.35;margin-top:10px}
.picks{background:var(--card);border-radius:14px;overflow:hidden;margin:22px 0 10px}
.picks a{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px dashed var(--dash);text-decoration:none;transition:background 160ms ease}
.picks a:last-child{border-bottom:0}
.picks a:hover{background:#fff}
.pk-n{font-weight:600;font-size:15px;min-width:0}
.pk-c{display:block;font-size:12.5px;font-weight:400;color:var(--ink-2);margin-top:3px}
.pk-p{font-family:var(--display);font-size:21px;flex:none;line-height:1}
.a-foot{margin-top:44px;padding-top:16px;border-top:1.5px solid var(--ink);font-size:14px;color:var(--ink-2)}
.a-foot a{color:var(--ink)}
@media(min-width:861px){
  /* one line per brand: name, bar, rate, then the counts in two tidy columns, all on the same centre line */
  .league a.br{display:grid;grid-template-columns:8.5rem minmax(0,1fr) 4rem 11.5rem;align-items:center;gap:18px;padding:14px 18px}
  .br-top{display:contents}.br-name{grid-column:1}.br-bar{grid-column:2;margin:0}.br-pct{grid-column:3;text-align:right}
  /* the rate comes before the bar in the markup, so every cell is pinned to the one row or the bar and counts drop to a second */
  .br-name,.br-bar,.br-pct,.br-nums{grid-row:1}
  .br-nums{grid-column:4;display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;line-height:1.35}
}

/* ---- the foot of the shop ---- */
footer{border-top:1px solid var(--line);padding:48px 0 60px;font-size:14px;color:var(--ink-2)}
footer .wrap{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap}
footer .wordmark{color:var(--ink);font-size:21px}
footer .hand{font-family:var(--mono);font-size:12px;margin-top:10px}
footer .fdisc{max-width:460px;margin-top:14px}
footer .fnav{display:flex;flex-direction:column;gap:8px}
footer .fnav .lab{margin-bottom:2px}
footer .fnav a{text-decoration:none;color:var(--ink)}
footer .fnav a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- in between: a laptop that is not wide, a tablet ---- */
@media(max-width:1060px){
  .top{grid-template-columns:1fr;gap:0}
  .top .answer{transform:none;max-width:720px}
  .top .answer::after{display:none}
}
@media(max-width:900px){
  .stage{grid-template-columns:1fr;grid-template-rows:none;margin-top:36px}
  .plate{grid-row:1}.cws{grid-row:2;margin-top:14px}.lbl{grid-column:1;grid-row:3;margin-top:26px}
  .pshot{max-width:640px}
  .steps{grid-template-columns:1fr;gap:28px}
}

/* ---- the phone ---- */
@media(max-width:760px){
  :root{--chrome:56px}
  .wrap{padding:0 18px}
  .main{padding-top:24px;padding-bottom:72px}
  header.site .wrap{height:56px;gap:14px}
  header.site nav{gap:16px}
  header.site nav a.wide{display:none}
  .wordmark{font-size:20px}
  h1{font-size:clamp(32px,9.6vw,44px)}
  .answer{padding:40px 18px 18px;margin-top:16px}
  .answer b,.answer summary b{font-size:23px}
  .a-lead{font-size:14.5px}
  .models{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 12px}
  .mcard .nm{font-size:14.5px}
  .mcard .badge{font-size:11px}
  .sw{gap:5px;grid-template-columns:repeat(3,minmax(0,34px)) auto;min-height:26px}
  .sw button:nth-of-type(n+4),.sw .more.d{display:none}
  .sw .more.m{display:inline}
  .pill{height:40px}
  .stage{margin-top:28px}
  .ink{width:84px;top:12px;right:12px}
  .lbl .nm{font-size:25px}
  .sws{gap:5px}
  .sws button{width:44px;height:33px}
  .route{grid-template-columns:64px minmax(0,1fr) auto;gap:10px}
  .route:first-child{padding:16px 18px}
  .r-mid{font-size:19px}
  .key{grid-template-columns:1fr}
  .sbuy{position:fixed;left:10px;right:10px;bottom:10px;z-index:40;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--paper-2);border-radius:999px;text-decoration:none;box-shadow:0 10px 30px -10px rgba(0,0,0,.5);transform:translateY(140%);transition:transform 260ms cubic-bezier(.2,.8,.2,1)}
  .sbuy.show{transform:none}
  .sbuy .mk{box-shadow:0 0 0 2px var(--ink)}
  .sb-t{flex:1;min-width:0;display:flex;flex-direction:column}
  .sb-t b{font-family:var(--display);font-weight:400;font-size:18px;line-height:1.1}
  .sb-t span{font-size:11.5px;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sb-go{background:var(--paper-2);color:var(--ink);border-radius:999px;padding:11px 15px;font-weight:600;font-size:13.5px;white-space:nowrap}
  body:has(.sbuy) footer{padding-bottom:110px}
  footer .wrap{gap:28px}
  .kf-n{font-size:28px}
}
@media(max-width:380px){
  header.site nav{gap:12px}
  header.site nav a[href="/#browse"]{display:none}
  header.site nav a{font-size:13px}
  .wordmark{font-size:18px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}