@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400 700; font-display:swap; src:url(fonts/spacegrotesk-latin.woff2) format('woff2'); }
:root{--paper:#d8d3c5;--paper-2:#eeece5;--ink:#10120f;--muted:#666a61;--line:rgba(23,26,22,.18);--acid:#f2ff16;
--pad:clamp(1.1rem,4vw,3rem);--display:"Arial Narrow","Helvetica Neue",Arial,sans-serif;
--body:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
/* label face, not a typewriter. Real monospace lives on --code, for the places
   where character alignment is the point. */
--mono:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
--code:ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace;}
/* Light theme, from the Research Reader's day palette. Warm cream rather than white,
   dark surfaces soften to charcoal instead of near black. Mirrored in index-v8-dtc.html. */
html[data-theme="light"]{--paper:#f1ead4;--paper-2:#f8f4e8;--ink:#313438;--muted:#74736d;--line:rgba(49,52,56,.17);color-scheme:light}
.theme-toggle{width:2.4rem;height:2.4rem;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;font-size:.95rem;line-height:1;flex:0 0 auto}
.theme-toggle::before{content:"\2600"}
html[data-theme="light"] .theme-toggle::before{content:"\263D"}
.theme-toggle:hover{background:var(--acid)}
*{box-sizing:border-box}
html{background:var(--paper);max-width:100%;overflow-x:hidden}
body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--body);font-size:16px;line-height:1.55;max-width:100%;overflow-x:hidden}
a{color:inherit}
img{display:block;width:100%}
::selection{color:var(--ink);background:var(--acid)}
.wrap{max-width:62rem;margin:0 auto;padding:0 var(--pad)}
.case-top{border-bottom:1px solid var(--line);padding:1.1rem 0}
.case-top .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}
.back{font-family:var(--mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.09em;text-decoration:none}
.back:hover{background:var(--acid)}
.who{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted)}

/* ── Site navigation ────────────────────────────────────────────────────────
   One sticky pill on every page: brand left, links centred with a Work dropdown,
   CTA right. Under 780px the links collapse into a panel behind the menu button.
   No JavaScript: the panel is a <details>, forced open and laid out as a row on
   desktop. The homepage carries a copy of this block inline, since it does not
   load this stylesheet. Keep the two in step. */
.site-top{position:sticky;top:0;z-index:60;padding:.7rem var(--pad)}
.site-top .bar{max-width:64rem;margin:0 auto;display:flex;align-items:center;gap:.6rem;
  background:var(--paper-2);border:1.5px solid var(--ink);border-radius:999px;padding:.4rem .4rem .4rem 1.15rem}
.site-top .brand{font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.015em;text-decoration:none;white-space:nowrap}
.site-cta{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;text-decoration:none;
  white-space:nowrap;padding:.65rem 1.05rem;border-radius:999px;background:var(--ink);color:var(--paper)}
.site-cta:hover{background:var(--acid);color:var(--ink)}
.site-menu{position:relative}
.site-menu>summary{list-style:none;cursor:pointer;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;border:1.5px solid var(--ink)}
.site-menu>summary::-webkit-details-marker{display:none}
.site-menu>summary .bars,.site-menu>summary .bars::before,.site-menu>summary .bars::after{display:block;width:1rem;height:1.5px;background:var(--ink);content:""}
.site-menu>summary .bars{position:relative}
.site-menu>summary .bars::before{position:absolute;top:-5px}
.site-menu>summary .bars::after{position:absolute;top:5px}
.site-menu[open]>summary .bars{background:transparent}
.site-menu[open]>summary .bars::before{top:0;transform:rotate(45deg)}
.site-menu[open]>summary .bars::after{top:0;transform:rotate(-45deg)}
.site-menu .panel{position:absolute;right:0;top:calc(100% + .7rem);min-width:15rem;display:grid;gap:.15rem;
  background:var(--paper-2);border:1.5px solid var(--ink);border-radius:1rem;padding:.6rem .9rem}
.site-menu .panel>a,.site-menu .dd>summary{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;
  text-decoration:none;white-space:nowrap;padding:.7rem 0;border-bottom:1px solid var(--line);display:block;cursor:pointer;list-style:none}
.site-menu .panel>a:last-child{border-bottom:0}
.site-menu .dd>summary::-webkit-details-marker{display:none}
.site-menu .dd>summary::after{content:" \25BE";color:var(--muted)}
.site-menu .dd .dd-panel{display:grid;gap:.1rem;padding:0 0 .5rem .8rem}
.site-menu .dd .dd-panel a{font-family:var(--body);font-size:.9rem;text-decoration:none;padding:.4rem 0;display:block}
.site-menu .dd .dd-panel a:hover{background:var(--acid)}
.site-menu a.here{border-bottom-color:var(--ink)}
@media (min-width:781px){
  .site-menu>summary{display:none}
  .site-menu{margin:0 auto;position:static}
  .site-menu .panel{display:flex!important;position:static;min-width:0;gap:1.5rem;background:none;border:0;padding:0;border-radius:0}
  .site-menu .panel>a,.site-menu .dd>summary{border-bottom:2px solid transparent;padding:.2rem 0;color:var(--muted)}
  .site-menu .panel>a:hover,.site-menu .dd>summary:hover{color:var(--ink);border-bottom-color:var(--ink)}
  .site-menu .panel>a.here,.site-menu .dd.here>summary{color:var(--ink);border-bottom-color:var(--acid)}
  .site-menu .dd{position:relative}
  .site-menu .dd .dd-panel{position:absolute;left:50%;translate:-50% 0;top:calc(100% + .9rem);min-width:13rem;
    background:var(--paper-2);border:1.5px solid var(--ink);border-radius:.9rem;padding:.5rem .9rem;z-index:5}
}
.case-hero{padding:clamp(2.5rem,7vw,5.5rem) 0 clamp(1.5rem,4vw,3rem)}
.eyebrow{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.11em;color:var(--muted);margin:0 0 1rem}
h1{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:.98;margin:0 0 1.1rem;font-size:clamp(2.4rem,7.5vw,5rem)}
.standfirst{font-size:clamp(1.05rem,2.1vw,1.3rem);max-width:52ch;margin:0}
.numbers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr));margin:clamp(1.5rem,4vw,2.5rem) 0}
.numbers div{background:var(--paper-2);padding:clamp(1rem,2.2vw,1.5rem)}
.numbers b{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.8rem,4vw,2.6rem);line-height:1}
.numbers span{display:block;font-size:.82rem;color:var(--muted);margin-top:.4rem}
section.blk{padding:clamp(1.75rem,4vw,3rem) 0;border-top:1px solid var(--line)}
h2{font-family:var(--display);font-weight:700;letter-spacing:-.015em;font-size:clamp(1.6rem,3.6vw,2.4rem);margin:0 0 1rem;line-height:1.05}
h3{font-size:1rem;margin:1.5rem 0 .5rem}
p{max-width:62ch;margin:0 0 1rem}
p:last-child{margin-bottom:0}
ul.ctx{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;max-width:62ch}
ul.ctx li{padding-left:1.25rem;position:relative}
ul.ctx li::before{content:"";position:absolute;left:0;top:.55em;width:.55rem;height:.55rem;background:var(--acid);border:1.5px solid var(--ink)}
.channel{border-left:2px solid var(--ink);padding:.15rem 0 .15rem 1rem;margin:0 0 1.4rem;max-width:62ch}
.channel h3{margin:0 0 .35rem;font-family:var(--display);font-size:1.15rem}
.caveat{background:var(--paper-2);border:1.5px solid var(--ink);padding:clamp(1.1rem,2.5vw,1.6rem);max-width:62ch}
.caveat p:first-child{font-family:var(--display);font-weight:700;font-size:1.1rem}
.ref{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:1.4rem 0;max-width:62ch}
.ref p{font-size:1.05rem}
.cta{padding:clamp(2rem,5vw,3.5rem) 0 clamp(3rem,7vw,5rem);border-top:1px solid var(--line)}
.btn{display:inline-block;font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;text-decoration:none;padding:.85rem 1.3rem;border:1.5px solid var(--ink);background:var(--acid)}
.btn.ghost{background:transparent}
.rv-inline-cta{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;text-decoration:none;border-bottom:3px solid var(--acid);padding-bottom:5px}
.rv-inline-cta span{transition:transform .2s}
.rv-inline-cta:hover span{transform:translateX(.25rem)}
.btns{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.2rem}
footer.f{border-top:1px solid var(--line);padding:1.4rem 0 2.5rem;font-size:.82rem;color:var(--muted)}
footer.f .wrap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ── Site footer ────────────────────────────────────────────────────────────
   Every page of the site, in columns, so nothing is reachable only through the
   menu. Mirrored inline on the homepage, which does not load this stylesheet. */
.site-foot{margin-top:clamp(2.5rem,6vw,5rem);padding:clamp(2rem,5vw,3.5rem) 0 clamp(2rem,5vw,3rem);
  background:var(--ink);color:var(--paper)}
.site-foot .foot-top{display:flex;align-items:baseline;gap:1.2rem;flex-wrap:wrap;
  padding-bottom:1.6rem;border-bottom:1px solid rgba(242,240,232,.16)}
.site-foot .foot-brand{font-family:var(--display);font-weight:700;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.02em;text-decoration:none}
.site-foot .foot-line{margin:0;flex:1 1 18rem;max-width:34ch;font-size:.9rem;opacity:.7}
.site-foot .foot-social{display:flex;gap:1rem}
.site-foot .foot-social a{font-family:var(--mono);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  text-decoration:none;border-bottom:2px solid var(--acid);padding-bottom:3px}
.site-foot .foot-cols{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(min(11rem,100%),1fr));padding:1.8rem 0}
.site-foot .foot-cols > div{display:grid;gap:.55rem;align-content:start;min-width:0}
/* .62 rather than .45, and .64 on the spans below: at this size and weight anything
   lower fails the 4.5:1 contrast floor against the footer's near-black. Same fix as
   the homepage carries inline. */
.site-foot .foot-cols h3{margin:0 0 .35rem;font-family:var(--mono);font-size:.66rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;opacity:.62}
.site-foot .foot-cols a{font-size:.92rem;text-decoration:none;opacity:.85;width:fit-content;border-bottom:1px solid transparent}
.site-foot .foot-cols a:hover{opacity:1;border-bottom-color:var(--acid)}
.site-foot .foot-cols span{font-size:.92rem;opacity:.64}
.site-foot .foot-legal{margin:0;padding-top:1.4rem;border-top:1px solid rgba(242,240,232,.16);font-size:.78rem;opacity:.5;max-width:70ch}