@font-face{font-family:"XC";src:url(fonts/xc-r.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"XC";src:url(fonts/xc-i.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"XC";src:url(fonts/xc-b.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"XC";src:url(fonts/xc-bi.woff2) format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Anton GP";src:url(fonts/anton.woff2) format("woff2");font-display:swap}
:root{--ink:#0C0C0C;--paper:#fff;--gold:#B8873B;--grey:#6E6E6A;--grey2:#9A9A96;--hair:#C9C8C2;--off:#F2F0EB;
 --col:640px;--note:250px;--gap:56px;--rail:190px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 20px/1.5 "XC",Charter,Georgia,serif;font-feature-settings:"kern","liga","onum","pnum";text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
strong{font-weight:700}
/* progress (small screens) */
.prog{position:fixed;left:0;top:0;right:0;height:2px;z-index:20;pointer-events:none}
.prog span{display:block;height:100%;width:0;background:var(--ink)}
/* cover */
.cover{background:var(--ink);color:var(--off);min-height:min(100vh,980px);padding:34px 48px 64px;display:flex;flex-direction:column;position:relative;isolation:isolate;overflow:hidden}
/* hero image: colour that fades into the black page */
.hero{position:absolute;left:0;right:0;top:0;height:82%;z-index:-1;background:url(img/hero-land.webp) center 38%/cover no-repeat}
.hero::after{content:"";position:absolute;inset:0;background:
 linear-gradient(180deg,rgba(12,12,12,.5) 0%,rgba(12,12,12,.1) 14%,rgba(12,12,12,0) 26%,rgba(12,12,12,.4) 44%,rgba(12,12,12,.74) 62%,rgba(12,12,12,.94) 82%,#0C0C0C 100%),
 linear-gradient(90deg,rgba(12,12,12,.5) 0%,rgba(12,12,12,.18) 40%,rgba(12,12,12,0) 68%)}
.cover .client{display:block;width:168px;height:auto;margin:0 0 6px}
.cover .logo{width:auto;height:30px;display:block;align-self:flex-start}
.cv{margin-top:auto;max-width:1100px;padding-left:calc((100vw - 1180px)/2 - 48px + var(--rail) + var(--gap))}
@media (max-width:1280px){.cv{padding-left:0}}
.cover h1{font:400 clamp(54px,7.4vw,118px)/.92 "Anton GP",Impact,sans-serif;letter-spacing:-.01em;color:#fff;margin:0;white-space:nowrap}
.mk{position:relative;display:inline-block;line-height:1em}
.mk .m{position:absolute;height:1.288em;left:72%;bottom:calc(100% - .145em);transform:translateX(-62%);pointer-events:none}
.cover h1{padding-top:1.1em}
.thr{display:block;width:min(33vw,420px);height:3px;margin:34px 0 0}
.stand{font-style:italic;font-size:clamp(21px,1.9vw,26px);line-height:1.35;max-width:31em;margin:30px 0 0;color:var(--off)}
.meta{font-style:italic;font-size:16px;line-height:1.4;color:var(--grey2);margin:26px 0 0}
.meta .sep{padding:0 .4em;color:#55554f}
.acts{margin:22px 0 0;display:flex;gap:28px;align-items:baseline;flex-wrap:wrap}
.act{font:700 17px/1.2 "XC",Georgia,serif;font-variant-caps:all-small-caps;letter-spacing:.06em;color:var(--off);background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--grey2);text-decoration-thickness:1px;text-underline-offset:.3em}
.act:hover{text-decoration-color:var(--off)}
.lnote{font-style:italic;font-size:16px;color:var(--grey2)}
/* book grid */
.book{display:grid;grid-template-columns:var(--rail) minmax(0,var(--col)) var(--note);column-gap:var(--gap);max-width:calc(var(--rail) + var(--col) + var(--note) + 2*var(--gap));margin:0 auto;padding:0 24px}
.text{grid-column:2;padding:56px 0 96px;min-width:0}
/* rail */
.rail{grid-column:1;position:sticky;top:0;align-self:start;height:100vh;padding:96px 0 40px;font-size:14px;line-height:1.3}
.rail ol{list-style:none;margin:0;padding:0;position:relative;z-index:1}
.rail li{margin:0 0 22px}
.rail a{display:grid;grid-template-columns:14px 34px 1fr;align-items:baseline;text-decoration:none;color:var(--grey)}
.rail .dot{width:7px;height:7px;border-radius:50%;border:1px solid var(--grey);background:var(--paper);align-self:center;margin-left:-3px}
.rail .rn{font-variant-numeric:lining-nums;letter-spacing:.06em}
.rail .rt{font-style:italic}
.rail a.done .dot{background:var(--grey);border-color:var(--grey)}
.rail a.on{color:var(--ink)}
.rail a.on .dot{background:var(--ink);border-color:var(--ink)}
.rail a:hover{color:var(--ink)}
.rail .track{position:absolute;left:24px;top:96px;bottom:auto;width:1px;height:0;background:var(--hair)}
.rail .track span{display:block;width:1px;height:0;background:var(--ink)}
/* parts */
.part{padding-top:16px;margin-bottom:64px;scroll-margin-top:20px}
.part + .part{border-top:0}
.ph{margin:0 0 40px}
.text .pn{font-size:16px;letter-spacing:.08em;font-variant-caps:all-small-caps;font-variant-numeric:lining-nums;color:var(--grey);margin:0 0 14px;font-weight:400}
.part h2{font:400 clamp(40px,4.4vw,56px)/.95 "Anton GP",Impact,sans-serif;letter-spacing:-.01em;margin:0;text-wrap:balance}
.text .sum{font-style:italic;font-size:23px;line-height:1.38;margin:22px 0 0;max-width:29em}
.text p{margin:0 0 1em;hyphens:manual}
.first::first-letter{float:left;font-weight:400;font-size:4.35em;line-height:.8;padding:.07em .08em 0 0;margin-top:.02em}
.first strong{font-variant-caps:small-caps;letter-spacing:.03em}
/* quotes */
blockquote{margin:1.6em 0 1.7em;padding:0}
blockquote p{font-style:italic;font-size:22px;line-height:1.42;margin:0 0 .45em!important}
blockquote footer{font-size:16px;font-variant-caps:all-small-caps;letter-spacing:.06em;color:var(--grey)}
blockquote footer::before{content:""}
blockquote .role{font-variant-caps:normal;letter-spacing:0;font-style:italic;font-size:16px}
.question{font-style:italic;font-size:27px;line-height:1.3;margin:.2em 0 1.1em!important;max-width:24em}
/* big figure */
.bigfig{margin:1.6em 0 1.6em}
.bigfig .num{font:400 clamp(72px,9vw,120px)/.9 "Anton GP",Impact,sans-serif;letter-spacing:-.01em;margin:0 0 .18em!important;font-feature-settings:"lnum"}
.bigfig .cap{font-style:italic;font-size:17px;line-height:1.4;color:var(--grey);margin:0!important;max-width:26em}
/* figures */
.fig{margin:2em 0 2.1em;position:relative}
.fig img{display:block;max-width:100%;height:auto}
.fig.arc img{width:440px;max-width:100%}
.fig .pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:520px}
.fig figcaption{font-style:italic;font-size:15px;line-height:1.4;color:var(--grey);margin-top:10px}
.chart{display:block;width:100%;height:auto;font-family:"XC",Georgia,serif;font-feature-settings:"lnum","tnum"}
.chart.m{display:none}
.mini svg{display:block;margin:2px 0 8px}
.mfig{display:block;width:100%;max-width:240px;height:auto;margin:4px 0 8px}
/* sidenotes */
.text{counter-reset:sn}
.snm{counter-increment:sn}
.snm::after{content:counter(sn);font-size:.62em;vertical-align:.55em;line-height:0;padding:0 .08em 0 .12em;color:var(--grey);font-feature-settings:"lnum";font-weight:400}
.snt{display:none}
.sn{float:right;clear:right;width:var(--note);margin-right:calc(-1*(var(--note) + var(--gap)));margin-top:.25em;margin-bottom:1em;font-style:italic;font-weight:400;font-size:15px;line-height:1.4;color:var(--grey);position:relative}
.sn::before{content:counter(sn) " ";font-style:normal;font-feature-settings:"lnum";padding-right:.2em}
/* lessons */
.lessons{list-style:none;margin:1.2em 0 0;padding:0}
.lessons li{position:relative;padding-left:1.1em}
.lessons li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--ink)}
.text .endnote{font-style:italic;font-size:16px;line-height:1.45;color:var(--grey);margin-top:3em!important;max-width:30em}
.text .totop{font-size:16px;margin-top:40px!important}
.totop a{color:var(--grey)}
/* desktop: chart captions in the margin */
@media (min-width:1101px){
 .fig figcaption{position:absolute;left:calc(100% + var(--gap));top:0;width:var(--note);margin:0}
 .chartfig.wide figcaption{top:auto;bottom:6px}
}
/* mid screens: no rail */
@media (max-width:1100px){
 :root{--rail:0px;--note:220px;--gap:40px}
 .book{grid-template-columns:minmax(0,var(--col)) var(--note);max-width:calc(var(--col) + var(--note) + var(--gap) + 48px)}
 .rail{display:none}
 .text{grid-column:1}
 .cover{padding:28px 32px 56px}
}
/* small screens: single column, notes on tap */
@media (max-width:820px){
 body{font-size:18.5px}
 .book{display:block;padding:0 22px;max-width:640px}
 .text{padding:40px 0 72px}
 .cover{padding:24px 22px 46px;min-height:auto}
 .cover .logo{height:24px}
 .hero{height:62%}
 .hero::after{background:linear-gradient(180deg,rgba(12,12,12,.5) 0%,rgba(12,12,12,.08) 16%,rgba(12,12,12,0) 30%,rgba(12,12,12,.5) 56%,rgba(12,12,12,.86) 78%,#0C0C0C 100%)}
 .cover .client{width:124px;margin-bottom:2px}
 .cv{margin-top:96px}
 .cover h1{font-size:min(9.6vw,62px);padding-top:1.2em}
 .thr{width:44vw;margin-top:26px;height:2.5px}
 .stand{font-size:20px}
 .text .sum{font-size:20.5px}
 .part{margin-bottom:48px}
 .ph{margin-bottom:30px}
 .part h2{font-size:clamp(36px,10.2vw,46px)}
 blockquote p{font-size:19.5px}
 .question{font-size:22px}
 .snm{cursor:pointer;padding:6px 2px;margin:-6px -2px}
 .snm::after{font-size:.7em;color:var(--ink);text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:.15em}
 .sn{display:none;float:none;width:auto;margin:.5em 0 .7em 1.1em;font-size:15.5px}
 .snt:checked + .sn{display:block}
 .chart.d{display:none}.chart.m{display:block}
 .fig .pair{gap:12px}
 .prog{display:block}
}
@media (min-width:821px){.prog{display:none}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media print{.rail,.prog,.acts{display:none}}

/* r3 hero, 8 Nov 2026: darker, richer, full-bleed on phones (John, 8 Nov: "more drama, darker, a bit more colour") */
.hero{background-image:url(img/hero-r3.webp);background-size:cover;background-repeat:no-repeat;background-position:center 38%}
@media (max-width:820px){
 .cover{min-height:max(640px,92svh)}
 .hero{height:100%;background-position:58% 40%}
 .hero::before{display:none}
 .hero::after{background:linear-gradient(180deg,rgba(12,12,12,.6) 0%,rgba(12,12,12,.15) 13%,rgba(12,12,12,.04) 28%,rgba(12,12,12,.3) 46%,rgba(12,12,12,.78) 64%,rgba(12,12,12,.93) 80%,#0C0C0C 100%)}
 .cv{margin-top:auto;padding-top:200px}
}

/* r3: more case studies and the site footer (live, 8 Nov 2026) */
.csmore{background:#0C0C0C;color:#EDEAE2;padding:64px 48px 56px}
.csmore .in{max-width:1180px;margin:0 auto}
.csmore h2{font:400 clamp(34px,4vw,54px)/.95 "Anton GP",Impact,sans-serif;color:#fff;margin:0 0 8px;letter-spacing:-.005em}
.csmore .all{font:700 17px/1.3 "XC",Georgia,serif;color:#D9B26A;text-decoration:none;border-bottom:1px solid rgba(217,178,106,.5)}
.csmore .all:hover,.csmore .all:focus-visible{color:#fff;border-color:#fff}
.csmore ul{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.csmore li a{display:block;color:inherit;text-decoration:none}
.csmore li img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:2px}
.csmore .cl{display:block;font:italic 15px/1.3 "XC",Georgia,serif;color:#B9B4A8;margin:12px 0 2px}
.csmore .hd{display:block;font:400 22px/1.05 "Anton GP",Impact,sans-serif;color:#fff}
.csmore li a:hover .hd,.csmore li a:focus-visible .hd{color:#D9B26A}
.csmore li a:focus-visible{outline:2px solid #D9B26A;outline-offset:4px}
@media (max-width:820px){.csmore{padding:48px 22px 44px}.csmore ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.csmore .hd{font-size:18px}}
@media (max-width:480px){.csmore ul{grid-template-columns:1fr}}