/* ═══════════════════════════════════════════════════════════════
   cs.css: /case-studies and /case-studies/<slug>

   Built by tools/build_case_studies.py. Loaded after post-chrome.css (the
   nav and footer), never with style.css. Same ground, ink and type as the
   blog's post.css, so a reader moving between a guide and a case study
   stays in one place.

   Width: every block runs the full screen up to 1920px with a fluid gutter
   (the site's rule: no narrow frame, no dead margins). Line length is held
   by the columns inside, never by narrowing the page.
   ═══════════════════════════════════════════════════════════════ */

@font-face{font-family:"Satoshi";src:url("/fonts/satoshi-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("/fonts/satoshi-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url("/fonts/satoshi-900.woff2") format("woff2");font-weight:900;font-style:normal;font-display:swap}

:root{
  --paper:#fbfaf7;
  --paper-2:#f3f0ea;
  --card:#fff;
  --ink:#14110d;          /* 18.0:1 on paper */
  --ink-2:#3b362f;        /* 11.5:1 */
  --muted:#655e54;        /* 6.1:1 */
  --link:#b33a0a;         /* 5.7:1 */
  --accent:#ff5a1f;       /* marks and the button ground, never text on light */
  --black:#08070a;
  --on-dark:#fff;
  --on-dark-2:#bdb8b1;    /* 10.4:1 on black */
  --on-dark-3:#8f8a83;    /* 5.9:1 on black */
  --on-dark-accent:#ff8a5c;
  --line:rgba(20,16,12,.12);
  --line-dark:rgba(255,255,255,.12);
  --slide:#f7efe6;        /* the slides' own cream, shown while they load */
  --font:"Satoshi",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --pad:clamp(18px,3.6vw,80px);
  --nav-h:64px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --expo:cubic-bezier(.16,1,.3,1);   /* exponential ease-out */
}

html{-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body.cs-page{
  margin:0;perspective:none;overflow-x:clip;
  background:var(--paper);color:var(--ink-2);
  font-family:var(--font);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
.cs-page main{display:block}
.cs-page p{max-width:none}
.cs-page ::selection{background:rgba(255,90,31,.24);color:var(--ink)}
.cs-page .ic{width:1em;height:1em;fill:currentColor;flex:0 0 auto;display:inline-block;vertical-align:-.125em}
.cs-page :focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:6px}
.cs-hero :focus-visible,.cs-cta :focus-visible,.cs-lightbox :focus-visible,
.cs-page .premium-nav :focus-visible,.cs-page .premium-footer :focus-visible{outline-color:#fff}
.cs-page .logo-link:focus-visible{outline:2px solid #fff !important;outline-offset:4px !important}
.cs-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:16px;top:-80px;z-index:10002;background:var(--card);color:var(--ink);
  font:700 16px/1 var(--font);padding:14px 18px;border-radius:12px;text-decoration:none;box-shadow:0 8px 24px -8px rgba(0,0,0,.35)}
.skip-link:focus{top:12px}

.cs-wrap{box-sizing:border-box;width:100%;max-width:1920px;margin:0 auto;padding-inline:var(--pad)}
.cs-h2{margin:0;color:var(--ink);font:700 clamp(26px,2.1vw,40px)/1.12 var(--font);letter-spacing:-.018em}
@media (min-width:900px){.cs-h2{white-space:nowrap}}

/* ── Hero: near-black, text left, the slides right ─────────────── */
.cs-hero{background:var(--black);color:var(--on-dark);padding:clamp(22px,2.6vw,44px) 0 clamp(36px,4vw,72px)}
.cs-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,3vw,48px);margin-top:clamp(22px,2.4vw,36px)}
@media (min-width:1100px){
  .cs-hero-grid{grid-template-columns:minmax(360px,.8fr) minmax(0,1.2fr);gap:clamp(40px,4.2vw,104px);align-items:center}
}
.cs-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:14px;color:var(--on-dark-2)}
.cs-crumb a{color:var(--on-dark-2);text-decoration:none}
.cs-crumb a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.cs-crumb .ic{width:12px;height:12px;opacity:.6}
.cs-crumb [aria-current]{color:#fff}
.cs-hero h1{margin:0;color:#fff;font:700 clamp(32px,3.1vw,58px)/1.06 var(--font);letter-spacing:-.024em;text-wrap:balance}
.cs-meta{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.cs-meta span{padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.07);color:var(--on-dark-2);font-size:14px;line-height:1.2}
.cs-lede{margin:18px 0 0;max-width:46ch;color:#d4cfc9;font-size:clamp(17px,1.2vw,20.5px);line-height:1.55;text-wrap:pretty}

.cs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px clamp(16px,1.6vw,32px);margin:clamp(30px,3vw,48px) 0 0;padding:0}
.cs-stat{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;min-width:0;margin:0}
.cs-stat dd{margin:0;font:900 clamp(22px,1.9vw,34px)/1.08 var(--font);letter-spacing:-.02em;color:#fff;overflow-wrap:break-word}
.cs-stat dt{font-size:14px;line-height:1.4;color:var(--on-dark-2)}

.cs-by{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(24px,2.4vw,34px)}
.cs-by img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#26232b}
.cs-by p{margin:0;display:flex;flex-direction:column;font-size:13.5px;line-height:1.35;color:var(--on-dark-2)}
.cs-by a{color:#fff;font-weight:700;font-size:15px;text-decoration:none}
.cs-by a:hover{text-decoration:underline;text-underline-offset:3px}

/* ── The slide viewer ─────────────────────────────────────────── */
.cs-viewer{min-width:0}
.cs-stage{position:relative;width:100%;margin-inline:auto}
@media (min-width:1100px){
  /* the whole slide, its caption and the controls fit one screen */
  .cs-stage,.cs-controls{max-width:max(560px,calc((100svh - var(--nav-h) - 270px) * 4 / 3))}
  .cs-controls{margin-inline:auto}
}
.cs-track{display:flex;margin:0;padding:0;list-style:none;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;outline-offset:6px;border-radius:20px}
.cs-track::-webkit-scrollbar{display:none}
.cs-slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.cs-slide figure{margin:0}
.cs-zoom{display:block;width:100%;aspect-ratio:4/3;padding:0;border:0;border-radius:20px;overflow:hidden;background:var(--slide);cursor:zoom-in;
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 70px -30px rgba(0,0,0,.9)}
.cs-zoom img{display:block;width:100%;height:100%;object-fit:cover}
.cs-slide figcaption{display:flex;flex-direction:column;gap:5px;padding:16px 2px 0}
.cs-cap-t{color:#fff;font:700 clamp(16px,1.1vw,18px)/1.35 var(--font)}
.cs-cap-l{color:var(--on-dark-2);font-size:16px;line-height:1.5}
.cs-cap-s{display:flex;gap:7px;align-items:baseline;color:var(--on-dark-3);font-size:13px;line-height:1.45}
.cs-cap-s .ic{width:14px;height:14px;transform:translateY(2px);opacity:.85}

.cs-controls{display:flex;align-items:center;gap:10px;margin-top:20px}
.cs-arrow,.cs-full{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;padding:0;border-radius:50%;
  border:1px solid var(--line-dark);background:transparent;color:#fff;cursor:pointer;transition:background-color .15s,border-color .15s,opacity .15s}
.cs-arrow:hover,.cs-full:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.24)}
.cs-arrow[disabled]{opacity:.3;cursor:default;background:transparent}
.cs-arrow .ic,.cs-full .ic{width:18px;height:18px}
.cs-count{margin:0 4px;min-width:3.4em;text-align:center;font:700 15px/1 var(--font);font-variant-numeric:tabular-nums;color:var(--on-dark-3)}
.cs-count b{color:#fff}
.cs-thumbs{display:flex;gap:8px;margin-left:auto;overflow-x:auto;scrollbar-width:none;padding:3px}
.cs-thumbs::-webkit-scrollbar{display:none}
.cs-thumb{flex:0 0 auto;display:block;width:clamp(52px,4.4vw,76px);aspect-ratio:4/3;border-radius:12px;overflow:hidden;opacity:.42;
  background:var(--slide);transition:opacity .2s,box-shadow .2s}
.cs-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.cs-thumb:hover{opacity:.8}
.cs-thumb[aria-current="true"]{opacity:1;box-shadow:0 0 0 2px var(--black),0 0 0 4px var(--accent)}
.cs-full{display:none}
.js .cs-full{display:grid}

/* phones and tablets: the slide runs edge to edge */
@media (max-width:1099px){
  .cs-viewer{margin-inline:calc(var(--pad) * -1)}
  .cs-track{border-radius:0}
  .cs-zoom{border-radius:0;box-shadow:none}
  .cs-slide figcaption,.cs-controls{padding-inline:var(--pad)}
}
@media (max-width:560px){
  .cs-thumbs{display:none}
  .cs-controls{justify-content:space-between}
  .cs-full{margin-left:0}
  .cs-stats{grid-template-columns:minmax(0,1fr);gap:14px}
  .cs-stat{flex-direction:row-reverse;justify-content:flex-end;align-items:baseline;gap:12px}
  .cs-stat dd{font-size:22px;flex:0 0 auto;max-width:62%}
  .cs-stat dt{font-size:14px}
  .cs-stats-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-stats-4 .cs-stat{flex-direction:column-reverse;align-items:flex-start;gap:6px}
}

/* ── The story: three boxes, read left to right ───────────────────
   The problem, the work, the result. An arrow sits on each gap so the eye
   travels in one direction, and the result is the dark box: where it ends.
   On a phone the boxes stack and the arrows turn to point down. */
.cs-story{padding:clamp(48px,5vw,96px) 0 clamp(16px,1.6vw,28px)}
.cs-story-grid{--g:clamp(28px,1.9vw,36px);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--g)}
@media (min-width:900px){.cs-story-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cs-block{position:relative;min-width:0;display:flex;flex-direction:column;gap:18px;box-sizing:border-box;
  padding:clamp(24px,2.3vw,44px);border-radius:28px;background:var(--card);
  box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(20,16,12,.04),0 22px 44px -34px rgba(20,16,12,.4)}
.cs-block-1{z-index:3}.cs-block-2{z-index:2}.cs-block-3{z-index:1}
.cs-block-h{display:flex;align-items:center;gap:14px}
.cs-block-ic{display:grid;place-items:center;flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:var(--paper-2);color:var(--ink)}
.cs-block-ic .ic{width:24px;height:24px}
.cs-block-1 .cs-block-ic{background:rgba(179,58,10,.09);color:var(--link)}
.cs-block h2{margin:0;color:var(--ink);font:700 clamp(22px,1.6vw,30px)/1.15 var(--font);letter-spacing:-.014em}
.cs-block p{margin:0;font-size:clamp(16.5px,1.08vw,19px);line-height:1.68;color:var(--ink-2);text-wrap:pretty}
.cs-block-3{background:radial-gradient(120% 80% at 100% 0%,rgba(255,90,31,.2),rgba(255,90,31,0) 60%),var(--black);
  box-shadow:0 1px 2px rgba(8,7,10,.2),0 28px 50px -30px rgba(8,7,10,.6)}
.cs-block-3 .cs-block-ic{background:var(--accent);color:var(--black)}
.cs-block-3 h2{color:#fff}
.cs-block-3 p{color:#e4e0db}
.cs-block-3 ::selection{background:rgba(255,90,31,.45);color:#fff}

/* the arrow on the gap: an orange disc with a paper ring that cuts into both boxes */
.cs-step{position:absolute;z-index:2;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--accent);color:var(--black);box-shadow:0 0 0 6px var(--paper),0 10px 20px -8px rgba(179,58,10,.55)}
.cs-step .ic{width:20px;height:20px}
@media (min-width:900px){.cs-step{top:50%;right:calc(var(--g) / -2);transform:translate(50%,-50%)}}
@media (max-width:899px){.cs-step{left:50%;bottom:calc(var(--g) / -2);transform:translate(-50%,50%) rotate(90deg)}}

/* the client's words, when the slides carry them: a box of their own */
.cs-quote{margin:var(--g,32px) 0 0;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(14px,1.8vw,32px);
  padding:clamp(26px,3vw,56px);border-radius:28px;background:var(--paper-2)}
.cs-story .cs-quote{margin-top:clamp(28px,1.9vw,36px)}
.cs-quote::before{content:"\201C";grid-row:1 / span 2;font:900 clamp(64px,6vw,112px)/.8 var(--font);color:var(--accent)}
.cs-quote blockquote{margin:0}
.cs-quote blockquote p{margin:0;color:var(--ink);font:700 clamp(22px,2.2vw,40px)/1.2 var(--font);letter-spacing:-.018em;text-wrap:balance}
.cs-quote figcaption{margin-top:14px;color:var(--muted);font-size:15px}

/* the one authored moment on the page: the story comes in left to right, then
   each arrow lands. Only when cs.js holds it back (cs-wait), and never for a
   reader who asked for less motion, so the default is always visible. */
@media (prefers-reduced-motion:no-preference){
  .cs-wait .cs-block{--d:0s}
  .cs-wait .cs-block,.cs-wait .cs-quote{transition:opacity .8s var(--expo) var(--d,0s),translate 1.1s var(--expo) var(--d,0s)}
  .cs-wait .cs-block:not(.in),.cs-wait .cs-quote:not(.in){opacity:0;translate:0 44px}
  .cs-wait .cs-step{transition:opacity .45s var(--expo) calc(var(--d) + .42s),scale .9s var(--expo) calc(var(--d) + .42s)}
  .cs-wait .cs-block:not(.in) .cs-step{opacity:0;scale:.2}
  @media (min-width:900px){.cs-wait .cs-block-2{--d:.14s}.cs-wait .cs-block-3{--d:.28s}.cs-wait .cs-quote{--d:.42s}}
}

/* ── The boxes that lead somewhere: Keep reading, related cases ── */
.cs-go{margin-top:auto;padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;font:700 15px/1.2 var(--font);color:var(--link)}
.cs-go .ic{box-sizing:content-box;width:18px;height:18px;padding:11px;border-radius:50%;background:var(--paper-2);color:var(--ink);
  transition:background-color .3s var(--expo),color .3s var(--expo),transform .5s var(--expo)}
.cs-link,.cs-more .cs-card a{box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(20,16,12,.04),0 22px 44px -36px rgba(20,16,12,.4);
  transition:transform .5s var(--expo),box-shadow .5s var(--expo)}
.cs-link:hover,.cs-more .cs-card a:hover{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(20,16,12,.18),0 2px 4px rgba(20,16,12,.04),0 36px 60px -34px rgba(20,16,12,.5)}
.cs-link:hover .cs-go .ic,.cs-more .cs-card a:hover .cs-go .ic{background:var(--accent);color:var(--black);transform:translateX(4px)}
@media (prefers-reduced-motion:reduce){.cs-link:hover,.cs-more .cs-card a:hover{transform:none}}

/* ── Keep reading: three boxes across the width ───────────────── */
.cs-read{padding:clamp(40px,4vw,72px) 0 clamp(56px,6vw,104px)}
.cs-read .cs-h2{margin-bottom:clamp(18px,1.8vw,28px)}
.cs-links{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(14px,1.4vw,24px);margin:0;padding:0;list-style:none}
@media (min-width:900px){.cs-links{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cs-link{display:flex;flex-direction:column;gap:10px;height:100%;box-sizing:border-box;padding:clamp(22px,2vw,34px);border-radius:28px;
  background:var(--card);text-decoration:none;color:var(--ink-2)}
.cs-link-t{color:var(--ink);font:700 clamp(19px,1.35vw,24px)/1.28 var(--font);letter-spacing:-.01em;text-wrap:balance}
.cs-link-d{font-size:16px;line-height:1.55;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.cs-link-service{background:var(--slide)}
.cs-link-service .cs-go .ic{background:var(--card)}

/* ── Call to action ───────────────────────────────────────────── */
.cs-cta{background:var(--black);color:#fff;padding:clamp(48px,5.4vw,96px) 0}
.cs-cta-in{display:grid;gap:28px;align-items:center}
@media (min-width:1000px){.cs-cta-in{grid-template-columns:minmax(0,1fr) auto;gap:64px}}
.cs-cta h2{margin:0 0 10px;color:#fff;font:700 clamp(28px,2.6vw,48px)/1.1 var(--font);letter-spacing:-.022em}
.cs-cta p{margin:0;max-width:62ch;color:var(--on-dark-2);font-size:clamp(16px,1.12vw,19px);line-height:1.6}
.cs-cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.cs-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:12px 26px;box-sizing:border-box;border-radius:999px;
  background:var(--accent);color:var(--black);font:700 16px/1.3 var(--font);text-decoration:none;border:1px solid var(--accent);transition:background-color .15s,border-color .15s}
.cs-btn:hover{background:#ff7440;border-color:#ff7440}
.cs-btn .ic{width:18px;height:18px}
.cs-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.cs-btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
@media (max-width:560px){.cs-cta-actions .cs-btn{width:100%}}

/* ── Cards: the index and "More case studies" ─────────────────── */
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));gap:clamp(30px,2.6vw,48px) clamp(16px,1.6vw,30px);margin:0;padding:0;list-style:none}
@media (min-width:900px){.cs-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.cs-card{min-width:0}
.cs-card[hidden]{display:none}
.cs-card a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;border-radius:20px}
.cs-card-img{display:block;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--slide);
  box-shadow:0 0 0 1px rgba(20,16,12,.07),0 1px 2px rgba(20,16,12,.05);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.cs-card-img img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.cs-card a:hover .cs-card-img{transform:translateY(-5px);box-shadow:0 0 0 1px rgba(20,16,12,.09),0 28px 50px -28px rgba(20,16,12,.45)}
.cs-card a:hover .cs-card-img img{transform:scale(1.025)}
.cs-card-body{display:flex;flex-direction:column;gap:10px;padding:18px 2px 0}
.cs-card-t{margin:0;color:var(--ink);font:700 clamp(18px,1.2vw,21px)/1.28 var(--font);letter-spacing:-.008em;text-wrap:pretty}
.cs-card a:hover .cs-card-t{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
.cs-card-m{display:flex;flex-wrap:wrap;gap:4px 0;font-size:14px;line-height:1.45;color:var(--muted)}
.cs-card-m span+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;margin:0 9px;vertical-align:.25em}
/* the service gets its own line, so a wrap never starts a line with a dot */
.cs-card-m span:first-child{flex-basis:100%}
.cs-card-m span:nth-child(2)::before,.cs-card-m span.cs-wrapped::before{display:none}

/* ── More case studies: boxed cards, then the way on ──────────── */
.cs-more{padding:clamp(56px,6vw,104px) 0}
.cs-more-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px;margin-bottom:clamp(18px,1.8vw,28px)}
.cs-all{display:inline-flex;align-items:center;gap:8px;font:700 16px/1 var(--font);color:var(--link);text-decoration:none}
.cs-all:hover{text-decoration:underline;text-underline-offset:4px}
.cs-more .cs-grid{gap:clamp(14px,1.4vw,24px)}
.cs-more .cs-card a{box-sizing:border-box;padding:8px;border-radius:28px;background:var(--card)}
.cs-more .cs-card-img{border-radius:20px}
.cs-more .cs-card a:hover .cs-card-img{transform:none;box-shadow:none}
.cs-more .cs-card a:hover .cs-card-img img{transform:scale(1.04)}
.cs-more .cs-card a:hover .cs-card-t{text-decoration:none}
.cs-more .cs-card-body{flex:1 1 auto;padding:18px clamp(12px,1.1vw,18px) clamp(12px,1.1vw,18px)}

.cs-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.4vw,24px);margin-top:clamp(14px,1.4vw,24px)}
.cs-pager a{display:flex;align-items:center;gap:clamp(12px,1.2vw,20px);min-width:0;min-height:clamp(76px,6vw,104px);box-sizing:border-box;
  padding:14px clamp(14px,1.8vw,32px);border-radius:28px;background:var(--black);color:#fff;text-decoration:none;
  font:700 clamp(16px,1.25vw,22px)/1.2 var(--font);letter-spacing:-.01em;
  box-shadow:0 1px 2px rgba(8,7,10,.2),0 22px 44px -32px rgba(8,7,10,.55);transition:transform .5s var(--expo),box-shadow .5s var(--expo)}
.cs-pager a[rel="next"]{justify-content:flex-end;text-align:right}
.cs-pager-ic{display:grid;place-items:center;flex:0 0 auto;width:clamp(40px,3.2vw,52px);height:clamp(40px,3.2vw,52px);border-radius:50%;
  background:rgba(255,255,255,.1);color:#fff;transition:background-color .3s var(--expo),color .3s var(--expo),transform .5s var(--expo)}
.cs-pager-ic .ic{width:20px;height:20px}
.cs-pager a[rel="prev"] .cs-pager-ic .ic{transform:rotate(180deg)}
.cs-pager a:hover{transform:translateY(-4px);box-shadow:0 2px 4px rgba(8,7,10,.2),0 34px 56px -30px rgba(8,7,10,.6)}
.cs-pager a:hover .cs-pager-ic{background:var(--accent);color:var(--black)}
.cs-pager a[rel="prev"]:hover .cs-pager-ic{transform:translateX(-4px)}
.cs-pager a[rel="next"]:hover .cs-pager-ic{transform:translateX(4px)}
.cs-pager a:focus-visible{outline-color:var(--link)}
@media (max-width:560px){.cs-pager{grid-template-columns:minmax(0,1fr)}.cs-pager a{min-height:72px}}
@media (prefers-reduced-motion:reduce){.cs-pager a:hover,.cs-pager a:hover .cs-pager-ic{transform:none}}

/* ── The index ────────────────────────────────────────────────── */
.cs-index-hero{padding-bottom:clamp(40px,4.4vw,80px)}
.cs-index-head{display:grid;gap:28px;margin-top:clamp(18px,1.8vw,28px)}
@media (min-width:1100px){.cs-index-head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,5vw,120px);align-items:end}}
.cs-index-hero h1{margin:clamp(22px,2.6vw,44px) 0 0;font-size:clamp(38px,4.4vw,80px);line-height:1;letter-spacing:-.03em}
@media (min-width:900px){.cs-index-hero h1{white-space:nowrap}}
.cs-index-hero .cs-lede{max-width:56ch;margin:0}
.cs-stats-4{grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
@media (max-width:640px){.cs-stats-4{grid-template-columns:repeat(2,minmax(0,1fr))}}

.cs-list{padding:0 0 clamp(64px,7vw,128px)}
.cs-bar{position:sticky;top:var(--nav-h);z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;
  margin-inline:calc(var(--pad) * -1);padding:18px var(--pad);background:rgba(251,250,247,.92);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);transition:box-shadow .25s var(--ease)}
.cs-bar.stuck{box-shadow:0 10px 24px -18px rgba(20,16,12,.35)}
.cs-chips{display:flex;flex-wrap:wrap;gap:8px}
.cs-chip{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:8px 10px 8px 16px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-2);font:700 15px/1 var(--font);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.cs-chip:hover{border-color:rgba(20,16,12,.3)}
.cs-chip span{min-width:1.6em;padding:5px 7px;border-radius:999px;background:var(--paper-2);color:var(--muted);font-size:12.5px;text-align:center;font-variant-numeric:tabular-nums}
.cs-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cs-chip[aria-pressed="true"] span{background:rgba(255,255,255,.16);color:#fff}
.cs-sub{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;margin:6px 0 clamp(22px,2.2vw,34px)}
.cs-search{position:relative;display:block;flex:0 1 340px;min-width:220px}
.cs-search input{box-sizing:border-box;width:100%;height:44px;padding:0 18px 0 44px;border-radius:999px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);font:400 16px/1 var(--font);-webkit-appearance:none;appearance:none}
.cs-search::before{content:"";position:absolute;left:16px;top:50%;width:18px;height:18px;transform:translateY(-50%);opacity:.55;pointer-events:none;
  background:no-repeat center/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2314110d' d='m229.66 218.34-50.07-50.06a88.11 88.11 0 1 0-11.31 11.31l50.06 50.07a8 8 0 0 0 11.32-11.32ZM40 112a72 72 0 1 1 72 72 72.08 72.08 0 0 1-72-72Z'/%3E%3C/svg%3E")}
.cs-search input::placeholder{color:#6f685e}
.cs-search input{caret-color:var(--link)}
.cs-search input:focus{outline:2px solid var(--link);outline-offset:2px}
.cs-result{margin:0;font-size:15px;color:var(--muted)}
.cs-none{margin:40px 0;padding:56px 24px;text-align:center;background:var(--paper-2);border-radius:20px;color:var(--muted);font-size:17px}
.cs-none button{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--link);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (max-width:720px){
  .cs-bar{position:static}
  .cs-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);width:100%}
  .cs-chips::-webkit-scrollbar{display:none}
  .cs-chip{flex:0 0 auto}
  .cs-search{flex:1 1 100%}
  .cs-sub{flex-direction:column-reverse;align-items:stretch}
}

/* ── Full size view ───────────────────────────────────────────── */
.cs-lightbox{box-sizing:border-box;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:rgba(8,7,10,.97);color:#fff;font-family:var(--font)}
.cs-lightbox[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.cs-lightbox::backdrop{background:rgba(8,7,10,.85)}
.cs-lb-bar{display:flex;align-items:center;justify-content:space-between;padding:14px clamp(14px,2vw,28px)}
.cs-lb-count{margin:0;font:700 15px/1 var(--font);color:var(--on-dark-2);font-variant-numeric:tabular-nums}
.cs-lb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:0 clamp(12px,5vw,84px)}
.cs-lb-stage img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:12px;object-fit:contain;background:var(--slide)}
.cs-lb-btn{display:grid;place-items:center;width:48px;height:48px;padding:0;border-radius:50%;border:1px solid var(--line-dark);background:rgba(255,255,255,.06);color:#fff;cursor:pointer}
.cs-lb-btn:hover{background:rgba(255,255,255,.14)}
.cs-lb-btn .ic{width:20px;height:20px}
.cs-lb-prev,.cs-lb-next{position:absolute;top:50%;transform:translateY(-50%)}
.cs-lb-prev{left:clamp(8px,1.4vw,20px)}
.cs-lb-next{right:clamp(8px,1.4vw,20px)}
.cs-lb-cap{margin:0;padding:14px clamp(16px,4vw,64px) 22px;text-align:center;color:var(--on-dark-2);font-size:15px;line-height:1.5}
.cs-lb-cap b{color:#fff}
@media (max-width:700px){.cs-lb-prev,.cs-lb-next{top:auto;bottom:-62px;transform:none}.cs-lb-stage{padding:0}}

@media print{
  .premium-nav,.premium-footer,.cs-controls,.cs-cta,.cs-more,.cs-read,.cs-bar{display:none !important}
  .cs-hero{background:#fff;color:#000}
  .cs-track{display:block;overflow:visible}
  .cs-slide{break-inside:avoid;margin-bottom:16px}
  .cs-block,.cs-quote{opacity:1 !important;translate:none !important;break-inside:avoid}
  .cs-step{display:none}
}