/* Case-study page. Same tokens and language as the home page (index.html): white page, Anton headings, Inter body, one shirt-blue accent, one 4px radius.
   --blue is for large type and graphics (3.8:1 on white); --blue-ink is for small text (6.2:1). Only JS: the tour road (end of body). */
:root{--ink:#111;--soft:#444;--paper:#fff;--line:#d9d9d9;--blue:#3d84dc;--blue-ink:#2862a8;--r:4px;
 --display:Anton,Impact,sans-serif;--pad:clamp(20px,4vw,56px);--gap:clamp(16px,2.4vw,32px)}
*{box-sizing:border-box;margin:0}
html{overflow-x:clip;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:24px}
body{background:var(--paper);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:17px;line-height:1.55}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--blue-ink);outline-offset:3px}
.skip{position:absolute;left:8px;top:8px;transform:translateY(-200%);background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r);z-index:10}
.skip:focus{transform:none}

nav.top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:8px 40px;font-size:14px;z-index:3}
nav.top strong{font-family:var(--display);font-weight:400;font-size:22px;letter-spacing:.02em}
nav.top strong a{text-decoration:none;display:inline-block;padding:10px 8px;min-height:44px;min-width:44px;margin-left:-8px}
nav.top div a{color:var(--ink);text-decoration:none;margin-left:6px;padding:14px 10px;min-height:44px;display:inline-block}
nav.top div a:hover{color:var(--blue-ink);text-decoration:underline;text-underline-offset:5px}

.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--pad)}
.back{position:relative;z-index:2;display:flex;width:fit-content;align-items:center;min-height:44px;padding:0 2px;color:var(--blue-ink);font-weight:500;text-decoration:none}
.back:hover{text-decoration:underline;text-underline-offset:5px}

/* header */
header.case{padding-top:clamp(84px,9vw,120px)}
h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(64px,11vw,160px);line-height:.9;letter-spacing:.01em;margin-top:8px}
.sum{font-size:clamp(20px,2.2vw,28px);line-height:1.35;font-weight:500;max-width:34ch;margin-top:20px}
.ps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3.4vw,56px);margin-top:clamp(32px,4vw,56px)}
.ps h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.4vw,30px);line-height:1;letter-spacing:.02em;margin-bottom:12px;padding-top:14px;border-top:3px solid var(--blue)}
.ps p{color:var(--soft);max-width:40ch}

/* section headings, as in v2 */
h2.sec{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(30px,3.6vw,44px);line-height:1;letter-spacing:.02em;margin:clamp(56px,7vw,96px) 0 28px;display:flex;align-items:center;gap:16px}
h2.sec::after{content:"";flex:1;height:3px;background:var(--blue)}

/* screenshot tour */
/* Road: a grey track with a black fill that grows with --p (0 to 1, set by the script below). Each stop has a square node
   that goes from hollow to black when the fill reaches it. Desktop: road down the centre, stops alternate sides.
   Phone: road on the left edge, text then image to its right. Without JS the road is fully drawn and nothing is dimmed. */
.tour{--ry:clamp(56px,8vw,112px);--node:22px;--track:#bdbdbd;--p:1}
.stop,.end{display:grid;grid-template-columns:minmax(0,1fr) calc(var(--node) + 2 * var(--gap)) minmax(0,1fr)}
.stops{list-style:none;padding:10px 0 0;position:relative;margin-bottom:var(--ry)}
.stop+.stop{margin-top:var(--ry)}
.stops::before,.stops::after{content:"";position:absolute;left:50%;margin-left:-1.5px;width:3px;top:12px;bottom:calc(-1 * var(--ry) - 11px)}
.stops::before{background:var(--line)}
.stops::after{background:var(--ink);transform-origin:top;transform:scaleY(var(--p))}
.stop>.node,.end>.node{grid-column:2;grid-row:1;justify-self:center;align-self:start;position:relative;z-index:1;width:var(--node);height:var(--node);margin-top:-9px;background:var(--paper);border:3px solid var(--track);border-radius:var(--r)}
.end>.node{margin-top:0}
.txt{grid-row:1;min-width:0;max-width:44ch;grid-column:3}
.media{grid-row:1;min-width:0;grid-column:1}
/* odd stops: text left, image right; even stops: image left, text right */
.stop:nth-child(odd) .txt{grid-column:1;justify-self:end}
.stop:nth-child(odd) .media{grid-column:3}
.stop:nth-child(even) .media .dev{margin-left:auto}
.shot{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#0b0d10}
.dev{background:var(--ink);padding:5px;border-radius:18px;max-width:300px}
.dev img{border-radius:13px;width:100%}
.txt h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(24px,2.2vw,28px);line-height:1.05;letter-spacing:.02em;color:var(--ink);padding-top:12px;border-top:3px solid var(--line);margin-bottom:8px}
.txt p{color:var(--soft)}
.stop.on h3{color:var(--blue);border-top-color:var(--blue)}
.stop.on>.node,.end.on>.node{background:var(--ink);border-color:var(--ink)}
.demo{grid-column:3;align-self:center;font-size:14px;color:var(--soft);margin:0}
/* focus: with JS, the stop in view is full strength and the others are quieter (never hidden) */
.js .stop .media,.js .stop .txt{transition:opacity .5s ease}
.js .stop:not(.cur) .media{opacity:.62}
.js .stop:not(.cur) .txt{opacity:.8}
.js .stop>.node,.js .stop h3{transition:background-color .35s ease,border-color .35s ease,color .35s ease}
@media (max-width:900px){
 .tour{--node:22px}
 .stop,.end{grid-template-columns:var(--node) minmax(0,1fr);column-gap:18px}
 .stops::before,.stops::after{left:11px;margin-left:-1.5px}
 .stop>.node,.end>.node{grid-column:1;grid-row:1 / span 2}
 .stop .txt,.stop:nth-child(odd) .txt{grid-column:2;grid-row:1;justify-self:start}
 .stop .media,.stop:nth-child(odd) .media{grid-column:2;grid-row:2;margin-top:18px}
 .stop:nth-child(even) .media .dev{margin-left:0}
 .demo{grid-column:2;grid-row:1}
 .end>.node{grid-row:1}
}

/* how it's built */
.how{list-style:none;padding:0;border-top:1px solid var(--line)}
.how li{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding:20px 0;border-bottom:1px solid var(--line)}
.how b{grid-column:1/5;font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(22px,2.2vw,28px);line-height:1.1;letter-spacing:.01em}
.how span{grid-column:5/13;color:var(--soft);max-width:62ch}

/* article */
#article{padding-bottom:24px}
h2.art{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(36px,5.4vw,72px);line-height:.95;letter-spacing:.01em;max-width:18ch;margin-top:clamp(64px,8vw,112px)}
.byline{margin-top:18px;color:var(--soft);font-size:15px;display:flex;flex-wrap:wrap;gap:6px 18px}
.byline b{color:var(--ink);font-weight:600}
.ph{display:inline-block;padding:6px 10px;border:1.5px dashed #6b6b6b;border-radius:var(--r);background:#f3f3f3;color:var(--soft);font-size:14px;line-height:1.3}
.draft{margin-top:20px}
.prose{max-width:66ch;margin-top:clamp(28px,3.4vw,44px)}
.prose h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(26px,2.8vw,34px);line-height:1.05;letter-spacing:.01em;margin:clamp(36px,4.4vw,56px) 0 12px}
.prose p{color:#222;margin-bottom:1.1em;font-size:18px;line-height:1.7}
.prose a{color:var(--blue-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.dek{font-size:clamp(20px,2vw,24px);line-height:1.45;font-weight:500;color:var(--ink);max-width:44ch;margin-top:24px}
.byline time{color:var(--soft)}
.prose-wide{max-width:none}
.prose p.pull{font-family:var(--display);font-weight:400;text-transform:uppercase;color:var(--blue);font-size:clamp(30px,3.6vw,46px);line-height:1.05;letter-spacing:.01em;margin:clamp(32px,4vw,52px) 0;max-width:20ch}
blockquote.cite{margin:clamp(24px,3vw,36px) 0;padding-top:16px;border-top:3px solid var(--blue)}
.prose blockquote.cite p{font-size:clamp(20px,2vw,24px);line-height:1.4;font-weight:500;color:var(--ink);margin-bottom:12px}
blockquote.cite footer{font-size:14px;color:var(--soft);border:0;margin:0;padding:0}
blockquote.cite footer a{color:var(--blue-ink);display:inline-block;padding:12px 0;min-height:44px;text-underline-offset:3px}

/* arc: horizontal on desktop, vertical on phone */
.arc{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 var(--gap);margin:clamp(40px,5vw,64px) 0 8px}
.arc li{position:relative;padding-top:30px;font-weight:500;line-height:1.3;font-size:16px;padding-right:8px}
.arc li::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;background:var(--blue);border-radius:2px}
.arc li::after{content:"";position:absolute;left:22px;right:calc(var(--gap) * -1 + 6px);top:6px;height:3px;background:var(--blue)}
.arc li:last-child::after{display:none}
.arc li:last-child::before{background:var(--paper);border:3px solid var(--blue)}
.arc-cap{font-size:14px;color:var(--soft)}

footer.site{padding-block:24px 40px;font-size:14px;color:var(--soft);border-top:1px solid var(--line);margin-top:56px}

@media (max-width:900px){
 .ps{grid-template-columns:1fr}
 .ps p{max-width:62ch}
 .how b,.how span{grid-column:1/-1}
 .how span{margin-top:6px}
}
@media (max-width:700px){
 body{font-size:16px}
 nav.top{padding:4px 12px}
 nav.top div a{margin-left:0;padding:14px 8px}
 .arc{grid-template-columns:1fr;gap:0}
 .arc li{padding:0 0 24px 36px;min-height:44px}
 .arc li:last-child{padding-bottom:0}
 .arc li::after{left:6px;right:auto;top:22px;bottom:-2px;width:3px;height:auto}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
 .tour *{transition:none!important}
 .js .stop .media,.js .stop .txt{opacity:1!important}}