/* flowithpee.xyz — v2
   Direction: high contrast, geometric sans, oversized numerals, card surfaces, air.
   One typeface. Contrast is the accent. */

@font-face{font-family:'Aeonik';src:url('assets/fonts/Aeonik-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Aeonik';src:url('assets/fonts/Aeonik-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Aeonik';src:url('assets/fonts/Aeonik-Bold.woff2') format('woff2');font-weight:700;font-display:swap}

:root{
  --bg:#FAFAFA;
  --card:#F2F2F3;
  --card-2:#EAEAEC;
  --ink:#0A0A0A;
  --dim:#55555C;
  --faint:#9A9AA2;
  --line:rgba(10,10,10,.10);
  --line-2:rgba(10,10,10,.22);
  --inv-bg:#0A0A0A;
  --inv-ink:#FAFAFA;
  --inv-dim:rgba(250,250,250,.66);
  --inv-faint:rgba(250,250,250,.42);
  --inv-line:rgba(250,250,250,.16);
  --live:#1F8A4C;
  --live-bg:rgba(31,138,76,.12);
  --f:'Aeonik','Schibsted Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --maxw:1120px;
  --pad:clamp(20px,5vw,60px);
  --gap:clamp(72px,11vw,160px);
  --r:18px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B0B0C;--card:#141416;--card-2:#1C1C1F;--ink:#F4F4F5;--dim:#A6A6AE;--faint:#6E6E78;
    --line:rgba(244,244,245,.12);--line-2:rgba(244,244,245,.26);
    --inv-bg:#F4F4F5;--inv-ink:#0B0B0C;--inv-dim:rgba(11,11,12,.70);--inv-faint:rgba(11,11,12,.50);--inv-line:rgba(11,11,12,.14);
    --live:#4ADE80;--live-bg:rgba(74,222,128,.14);
  }
}
:root[data-theme="dark"]{
  --bg:#0B0B0C;--card:#141416;--card-2:#1C1C1F;--ink:#F4F4F5;--dim:#A6A6AE;--faint:#6E6E78;
  --line:rgba(244,244,245,.12);--line-2:rgba(244,244,245,.26);
  --inv-bg:#F4F4F5;--inv-ink:#0B0B0C;--inv-dim:rgba(11,11,12,.70);--inv-faint:rgba(11,11,12,.50);--inv-line:rgba(11,11,12,.14);
  --live:#4ADE80;--live-bg:rgba(74,222,128,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f);
  font-size:17px;line-height:1.6;letter-spacing:-.011em;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:8px}

h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.035em;line-height:1.03;text-wrap:balance}
h1{font-size:clamp(42px,7.6vw,84px)}
h2{font-size:clamp(30px,4.8vw,56px)}
h3{font-size:clamp(19px,2.2vw,24px);letter-spacing:-.022em;line-height:1.25}
p{margin:0 0 1.05em}p:last-child{margin-bottom:0}
.lede{font-size:clamp(17px,2vw,21px);line-height:1.55;color:var(--dim);letter-spacing:-.012em}
.dim{color:var(--dim)}
.eyebrow{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 85%,transparent);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:13px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{font-weight:500;font-size:16.5px;letter-spacing:-.03em;text-decoration:none}
.nav-links{display:flex;gap:24px;list-style:none;margin:0;padding:0}
.nav-links a{font-size:13.5px;color:var(--dim);text-decoration:none}
.nav-links a:hover{color:var(--ink)}
.nav-right{display:flex;align-items:center;gap:10px}
.theme{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);
  border-radius:99px;background:transparent;color:var(--dim);cursor:pointer;padding:0;flex:none}
.theme:hover{color:var(--ink);border-color:var(--line-2)}
.theme svg{width:15px;height:15px}
.theme .moon{display:none}
:root[data-theme="dark"] .theme .moon{display:block}
:root[data-theme="dark"] .theme .sun{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .moon{display:block}:root:not([data-theme="light"]) .theme .sun{display:none}}
@media (max-width:860px){
  .nav-in{flex-wrap:wrap;row-gap:10px}
  .nav-links{order:3;width:100%;gap:18px;overflow-x:auto;scrollbar-width:none}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links a{white-space:nowrap}
}

.btn{display:inline-flex;align-items:center;gap:8px;font-size:15px;text-decoration:none;padding:13px 24px;
  border-radius:99px;border:1px solid var(--line-2);transition:background .2s,color .2s,border-color .2s}
.btn:hover{border-color:var(--ink)}
.btn-solid{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn-solid:hover{opacity:.86}
.actions{display:flex;flex-wrap:wrap;gap:10px}

.sec{padding:var(--gap) 0}
.sec-head{margin-bottom:clamp(32px,5vw,56px)}
.sec-head h2{max-width:20ch;margin:14px 0 16px}
.sec-head .lede{max-width:58ch}

/* hero */
.hero{padding:clamp(56px,9vw,120px) 0 0}
.chips{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0 0 30px;padding:0}
.chip{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:99px;padding:7px 14px}
.hero h1{max-width:19ch;margin-bottom:28px;color:color-mix(in srgb,var(--ink) 58%,var(--bg))}
.hero h1 em{font-style:normal;color:var(--ink)}
.hero .lede{max-width:52ch;margin-bottom:18px}
.hero .bridge{font-size:16px;color:var(--faint);max-width:50ch;margin-bottom:34px}

/* translator */
.trans{background:var(--inv-bg);color:var(--inv-ink);border-radius:var(--r);padding:clamp(26px,4vw,46px);margin-top:clamp(48px,7vw,80px)}
.trans .eyebrow{color:var(--inv-faint);margin-bottom:24px}
.trans-io{min-height:clamp(118px,15vw,140px);display:flex;flex-direction:column;justify-content:center;gap:13px}
.trans-term{font-size:clamp(14px,1.6vw,16px);font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--inv-dim)}
.trans-arrow{color:var(--inv-faint);font-size:14px;line-height:1}
.trans-plain{font-size:clamp(22px,3.2vw,36px);line-height:1.24;letter-spacing:-.03em;max-width:24ch}
.fade{transition:opacity .34s ease}.fade.out{opacity:0}
@media (prefers-reduced-motion:reduce){.fade{transition:none}}
.trans-picker{display:flex;flex-wrap:wrap;gap:7px;margin-top:28px;padding-top:24px;border-top:1px solid var(--inv-line)}
.trans-btn{font-family:inherit;font-size:12.5px;color:var(--inv-dim);background:transparent;border:1px solid var(--inv-line);
  border-radius:99px;padding:7px 14px;cursor:pointer;transition:all .18s}
.trans-btn:hover{color:var(--inv-ink);border-color:var(--inv-ink)}
.trans-btn.on{background:var(--inv-ink);color:var(--inv-bg);border-color:var(--inv-ink)}
.trans-foot{margin-top:20px;font-size:14px;color:var(--inv-faint);max-width:54ch}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stat{padding:clamp(28px,3.4vw,38px) clamp(18px,2.4vw,30px);border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font-size:clamp(34px,5vw,56px);font-weight:500;letter-spacing:-.045em;line-height:1;margin-bottom:10px;font-variant-numeric:tabular-nums}
.stat span{font-size:13px;color:var(--dim);line-height:1.45;display:block;max-width:24ch}
@media (max-width:900px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2n+1){border-left:0;padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
}

/* capability cards */
.caps{display:grid;gap:14px}
@media (min-width:860px){.caps{grid-template-columns:1fr 1fr}}
.cap{background:var(--card);border-radius:var(--r);padding:clamp(24px,3.2vw,34px);text-decoration:none;color:inherit;
  display:block;transition:background .22s,transform .22s}
.cap:hover{background:var(--card-2);transform:translateY(-2px)}
.cap h3{margin-bottom:12px}
.cap p{font-size:15.5px;color:var(--dim);margin:0 0 16px}
.cap .proof{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}

/* work rows */
.worklist{border-top:1px solid var(--line)}
.wrow{display:grid;grid-template-columns:1fr auto;gap:clamp(16px,3vw,32px);align-items:baseline;padding:26px 0;
  border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:padding-left .22s}
.wrow:hover{padding-left:10px}
.wrow-t{font-size:clamp(18px,2.2vw,24px);letter-spacing:-.025em;line-height:1.28;max-width:30ch}
.wrow-c{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
@media (max-width:720px){.wrow{grid-template-columns:1fr;row-gap:8px}.wrow-c{white-space:normal}}

/* studio */
.studio-card{background:var(--card);border-radius:var(--r);padding:clamp(26px,3.6vw,42px);display:grid;gap:clamp(20px,3vw,36px)}
@media (min-width:820px){.studio-card{grid-template-columns:1.1fr 1fr;align-items:center}}
.tag{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--live);background:var(--live-bg);border-radius:99px;padding:6px 13px;margin-bottom:18px}
.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--live)}
.studio-card h3{font-size:clamp(26px,3.4vw,38px);letter-spacing:-.035em;margin-bottom:14px}
.studio-card p{font-size:16.5px;color:var(--dim);max-width:46ch}
.rivu-demo{background:var(--bg);border-radius:14px;padding:clamp(22px,3vw,30px);border:1px solid var(--line)}
.rivu-demo .eyebrow{margin-bottom:12px}
.rivu-demo .amt{font-size:clamp(32px,4.4vw,46px);font-weight:500;letter-spacing:-.04em;line-height:1;margin-bottom:10px;font-variant-numeric:tabular-nums}
.rivu-demo .sub{font-size:13.5px;color:var(--faint)}
.bar{height:6px;border-radius:99px;background:var(--line);margin:18px 0 10px;overflow:hidden}
.bar i{display:block;height:100%;width:62%;background:var(--ink);border-radius:99px}

/* links out */
.links{display:grid;gap:12px}
@media (min-width:700px){.links{grid-template-columns:repeat(2,1fr)}}
.linkrow{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--card);border-radius:14px;
  padding:20px 24px;text-decoration:none;color:inherit;transition:background .2s}
.linkrow:hover{background:var(--card-2)}
.linkrow b{font-weight:500;font-size:16.5px;display:block;margin-bottom:3px}
.linkrow span{font-size:13.5px;color:var(--faint)}
.linkrow .go{font-size:16px;color:var(--faint)}

/* testimonials */
.tlist{position:relative;margin-top:8px}
.trows{border-top:1px solid var(--line)}
.trow{display:block;padding:24px 0;border-bottom:1px solid var(--line)}
.trow-n{font-size:clamp(18px,2.1vw,22px);letter-spacing:-.025em;display:block;margin-bottom:5px}
.trow-r{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.trow-fig{margin:16px 0 0}
.trow-fig img{border:1px solid var(--line);border-radius:12px;background:#fff;width:100%}
.trow-hint{display:none}
@media (min-width:920px){
  .tlist{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(28px,4vw,52px);min-height:480px;align-items:start}
  .trows{grid-column:1}
  .trow{cursor:pointer;transition:padding-left .22s}
  .trow:hover,.trow:focus-visible{padding-left:10px;outline:none}
  .trow:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
  .trow-hint{display:block;font-size:12.5px;color:var(--faint);margin-top:16px}
  .trow-fig{position:absolute;top:0;right:0;width:calc(65% - 26px);margin:0;opacity:0;transform:translateY(8px);
    pointer-events:none;transition:opacity .28s,transform .28s}
  .trow-fig img{max-height:440px;width:auto;max-width:100%;object-fit:contain;object-position:left top}
  .trow:first-child .trow-fig{opacity:1;transform:none}
  .trows:hover .trow-fig,.trows:focus-within .trow-fig{opacity:0;transform:translateY(8px)}
  .trow:hover .trow-fig,.trow:focus-within .trow-fig{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){.trow,.trow-fig{transition:none}}

/* about strip */
.astrip{display:grid;gap:clamp(24px,4vw,46px);align-items:center}
@media (min-width:820px){.astrip{grid-template-columns:260px 1fr}}
.astrip img{border-radius:var(--r);width:100%;max-width:300px}
.astrip p{font-size:clamp(17px,2vw,20px);line-height:1.5;color:var(--dim);max-width:52ch}

/* contact */
.contact{background:var(--inv-bg);color:var(--inv-ink);border-radius:var(--r);padding:clamp(36px,6vw,76px);
  margin-top:clamp(56px,8vw,110px);margin-bottom:var(--gap)}
.contact .eyebrow{color:var(--inv-faint)}
.contact h2{max-width:15ch;margin:16px 0 18px}
.contact p{color:var(--inv-dim);max-width:48ch;font-size:17px}
.contact .actions{margin-top:30px}
.contact .btn{border-color:var(--inv-line);color:var(--inv-ink)}
.contact .btn:hover{border-color:var(--inv-ink)}
.contact .btn-solid{background:var(--inv-ink);color:var(--inv-bg);border-color:var(--inv-ink)}

.foot{border-top:1px solid var(--line);padding:30px 0 46px;display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;font-size:13.5px;color:var(--faint)}
.foot a{color:var(--dim);text-decoration:none;margin-left:18px}
.foot a:hover{color:var(--ink)}

.rv{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}

/* studio page */
.page-hero{padding:clamp(44px,7vw,92px) 0 0}
.page-hero h1{max-width:16ch;margin-bottom:20px}
.back{font-size:13.5px;color:var(--dim);text-decoration:none;display:inline-block;margin-bottom:30px}
.back:hover{color:var(--ink)}
.prod{background:var(--card);border-radius:var(--r);padding:clamp(26px,3.6vw,42px);margin-bottom:16px}
.prod h3{font-size:clamp(24px,3.2vw,34px);margin-bottom:12px}
.prod p{font-size:16.5px;color:var(--dim);max-width:56ch}
.prod ul{margin:18px 0 22px;padding-left:18px;color:var(--dim);font-size:15.5px}
.prod li{margin-bottom:7px}

/* ---------- case study pages ---------- */
.cs-top{padding:clamp(40px,6vw,84px) 0 0}
.cs-disc{font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:18px}
.cs-top h1{max-width:22ch;margin-bottom:26px;font-size:clamp(34px,5.6vw,64px)}
.cs-top .lede{max-width:58ch;margin-bottom:40px}
.cs-facts{display:grid;gap:18px;background:var(--card);border-radius:var(--r);padding:clamp(22px,3vw,30px)}
@media (min-width:620px){.cs-facts{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.cs-facts{grid-template-columns:repeat(4,1fr)}}
.cs-fact .eyebrow{margin-bottom:7px}
.cs-fact p{font-size:15px;margin:0}
.cs-stats .stat b{font-size:clamp(28px,3.6vw,42px)}
.cs-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:clamp(36px,5vw,56px)}
@media (max-width:900px){
  .cs-stats{grid-template-columns:repeat(2,1fr)}
  .cs-stats .stat:nth-child(2n+1){border-left:0;padding-left:0}
  .cs-stats .stat:nth-child(n+3){border-top:1px solid var(--line)}
}
.cs-body{padding:clamp(48px,7vw,88px) var(--pad) 0;max-width:700px}
.blk{padding-bottom:clamp(40px,6vw,68px)}
.blk-c{max-width:none}
.blk-c h2{font-size:clamp(26px,3.6vw,40px);margin-bottom:20px;max-width:22ch}
.blk-c h3{font-size:19px;margin:30px 0 10px}
.blk-c p{font-size:16.5px;color:var(--dim)}
.blk-c strong{color:var(--ink);font-weight:500}
.blk-c ul{margin:0 0 1.05em;padding-left:20px;color:var(--dim);font-size:16.5px}
.blk-c li{margin-bottom:9px}
.pull{border-left:3px solid var(--ink);padding:6px 0 6px 24px;margin:30px 0;
  font-size:clamp(20px,2.6vw,27px);line-height:1.3;letter-spacing:-.028em;color:var(--ink)}
.note{background:var(--card);border-radius:14px;padding:22px 24px;font-size:14.5px;color:var(--dim);margin:26px 0}
.note p{font-size:14.5px;margin:0}
.res{display:grid;gap:12px;margin:10px 0 26px}
@media (min-width:680px){.res{grid-template-columns:repeat(3,1fr)}}
.res div{background:var(--card);border-radius:14px;padding:24px}
.res b{display:block;font-size:30px;font-weight:500;letter-spacing:-.04em;line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums}
.res span{font-size:13px;color:var(--dim);line-height:1.45;display:block}
.cs-quote{border-left:3px solid var(--line-2);padding-left:24px;margin:26px 0;font-size:16.5px;color:var(--dim)}
.cs-quote cite{display:block;font-style:normal;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:12px}
.tbl{width:100%;border-collapse:collapse;margin:10px 0 24px;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:14px 14px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:500}
.tbl td{color:var(--dim)}.tbl td:first-child{color:var(--ink)}
.cs-nav{display:flex;justify-content:space-between;gap:20px;padding:34px 0;border-top:1px solid var(--line);font-size:15px}
.cs-nav a{text-decoration:none;color:var(--dim)}
.cs-nav a:hover{color:var(--ink)}

/* work index */
.wcards{display:grid;gap:14px}
.wcard{background:var(--card);border-radius:var(--r);padding:clamp(26px,3.6vw,42px);text-decoration:none;color:inherit;
  display:block;transition:background .22s,transform .22s}
.wcard:hover{background:var(--card-2);transform:translateY(-2px)}
.wcard .cs-disc{margin-bottom:14px}
.wcard h2{font-size:clamp(22px,2.8vw,32px);max-width:26ch;margin-bottom:14px}
.wcard p{font-size:16px;color:var(--dim);max-width:60ch;margin-bottom:20px}
.wcard-foot{display:flex;flex-wrap:wrap;gap:22px;align-items:center}
.wcard-stat{font-size:13px;color:var(--dim)}
.wcard-stat b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.wcard-go{font-size:13.5px;color:var(--faint);margin-left:auto}
@media (max-width:640px){.wcard-go{margin-left:0}}

/* ---------- writing index ---------- */
.wgroup{margin-top:clamp(36px,5vw,56px)}
.wgroup > .eyebrow{margin-bottom:8px}
.wgroup > p{font-size:15px;color:var(--dim);max-width:58ch;margin:0 0 16px}
.writing{border-top:1px solid var(--line)}
.piece{display:grid;grid-template-columns:1fr auto;gap:clamp(14px,3vw,30px);align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:padding-left .22s}
.piece:hover{padding-left:10px}
.piece-t{font-size:16.5px;letter-spacing:-.015em;line-height:1.35}
.piece-m{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
@media (max-width:700px){.piece{grid-template-columns:1fr;row-gap:6px}.piece-m{white-space:normal}}
.more{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px}
/* ---------- about ---------- */
.about{display:grid;gap:clamp(28px,5vw,56px);align-items:start}
@media (min-width:900px){.about{grid-template-columns:1fr minmax(240px,300px)}}
.about img{border-radius:var(--r)}
.about-facts{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:10px}
.about-facts li{font-size:15px;color:var(--dim);padding-left:16px;position:relative}
.about-facts li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--ink)}
.aside{background:var(--card);border-radius:14px;padding:clamp(20px,3vw,26px);margin-top:30px}
.aside .eyebrow{margin-bottom:10px}
.aside p{font-size:15.5px;color:var(--dim);max-width:58ch}
.aside a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   Responsiveness pass: tap targets and measure
   ============================================================ */

/* page-hero intro had no measure limit and ran to 87 characters */
.page-hero .lede{max-width:640px}

/* theme toggle was 34px, below the 44px comfortable minimum */
.theme{width:40px;height:40px}

/* translator chips are the most-tapped control on the site */
.trans-btn{min-height:40px;display:inline-flex;align-items:center;justify-content:center}

/* back links were 22px tall */
.back{padding:11px 0;margin-bottom:19px}

/* case study prev/next were 24px tall */
.cs-nav a{display:inline-block;padding:10px 0}

/* expand the brand hit area without making the nav taller */
.brand{position:relative;display:inline-block}
.brand::after{content:"";position:absolute;inset:-10px -8px}

/* uppercase micro labels: 11px is the floor, give them a touch more */
.chip,.eyebrow,.cs-disc,.wrow-c,.trow-r,.piece-m,.res span,.stat span{font-size:11.5px}
.stat span,.res span{font-size:13px}

/* real touch devices get the full 44px regardless of viewport width */
@media (pointer:coarse){
  .theme{width:44px;height:44px}
  .trans-btn{min-height:44px}
  .linkrow{padding:22px 24px}
  .piece{padding:22px 0}
}

/* ---------- filter tabs ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(26px,4vw,38px)}
.tab{font-family:inherit;font-size:13.5px;color:var(--dim);background:transparent;border:1px solid var(--line);
  border-radius:99px;padding:10px 18px;cursor:pointer;transition:all .18s;min-height:40px;
  display:inline-flex;align-items:center;gap:7px}
.tab:hover{color:var(--ink);border-color:var(--line-2)}
.tab.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tab i{font-style:normal;opacity:.55;font-variant-numeric:tabular-nums}
@media (pointer:coarse){.tab{min-height:44px}}

/* ---------- media card grid ---------- */
.vgrid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.vcard{background:var(--card);border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;
  display:flex;flex-direction:column;transition:background .22s,transform .22s}
.vcard:hover{background:var(--card-2);transform:translateY(-2px)}
.vcard[hidden]{display:none}
.vthumb{aspect-ratio:16/9;background:var(--card-2);position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
.vthumb img{width:100%;height:100%;object-fit:cover;display:block}
.vplay{position:absolute;left:12px;bottom:12px;width:30px;height:30px;border-radius:99px;
  background:rgba(10,10,10,.72);display:flex;align-items:center;justify-content:center}
.vplay svg{width:11px;height:11px;fill:#fff;margin-left:2px}
.vthumb .vword{font-size:12px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}
.vbody{padding:15px 17px 17px;display:flex;flex-direction:column;gap:7px;flex:1}
.vtag{font-size:10.5px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--faint)}
.vcard h3{font-size:15.5px;line-height:1.3;letter-spacing:-.018em;margin:0}
.vmeta{font-size:12.5px;color:var(--faint);margin:0;margin-top:auto;padding-top:4px}
.vempty{color:var(--faint);font-size:15px;padding:30px 0}

/* ============================================================
   Left sidebar navigation (desktop only)
   Below 1080px the existing top bar is kept: it already works
   on touch and a sidebar would eat too much of a narrow screen.
   ============================================================ */
@media (min-width:1080px){
  :root{--sidebar:220px}

  /* a floating fixed nav, not a panel: transparent, no border, links centred */
  .nav{
    position:fixed;inset:0 auto 0 0;width:var(--sidebar);
    border:0;background:transparent;backdrop-filter:none;pointer-events:none;
  }
  .nav-in{
    position:relative;flex-direction:column;align-items:stretch;justify-content:center;
    height:100%;max-width:none;padding:32px 26px;gap:0;
  }
  .nav-in > *{pointer-events:auto}

  .brand{position:absolute;top:32px;left:26px;font-size:18px;margin:0}

  .nav-links{flex-direction:column;align-items:stretch;gap:2px;width:100%;order:0;overflow:visible}
  .nav-links a{
    display:block;font-size:16px;padding:9px 0 9px 14px;
    border-left:2px solid transparent;transition:color .18s,border-color .18s;
  }
  .nav-links a:hover{border-left-color:var(--line-2)}
  .nav-links a.on{color:var(--ink);border-left-color:var(--ink)}

  .nav-right{position:absolute;bottom:30px;left:26px;right:26px;margin:0;justify-content:flex-start;gap:10px}
  .nav-right .btn{flex:1;justify-content:center}

  main,footer{padding-left:var(--sidebar)}
}