/* Public reading pages. Palette, fonts and spacing come from site-tokens.css. */
.walkthrough-page{--nav-clearance:136px}
.walkthrough-page main{padding-block:var(--s5) var(--s4)}
.walkthrough-page section{padding:0}
.walkthrough-page a{text-underline-offset:4px}
.walkthrough-page a:hover{color:var(--ink)}
.walkthrough-page a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.walkthrough-page .nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:6px}
.walkthrough-page .nav .play:hover{color:var(--accent-ink)}
.walkthrough-page .site-skip{min-width:44px;max-width:calc(100vw - 32px)}
.walk-breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s1);list-style:none;margin:0 0 var(--s3);padding:0;font-size:var(--t-s);color:var(--muted)}
.walk-breadcrumbs li{display:flex;align-items:center;gap:var(--s1);min-width:0}
.walk-breadcrumbs li+li::before{content:"/";color:var(--muted)}
.walk-breadcrumbs a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.walk-intro{max-width:780px;margin-bottom:var(--s5)}
.walk-intro h1{font:700 clamp(40px,6vw,72px)/1.06 var(--display);color:var(--sand);margin-block:var(--s2) var(--s3)}
.walk-intro .walk-lede{font-size:clamp(20px,2.4vw,24px);line-height:1.45;max-width:55ch}
.walk-intro p+p{margin-top:var(--s2)}
.walk-note{max-width:65ch;color:var(--muted);font-size:var(--t-s)}
.walk-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);margin-top:var(--s3)}
.walk-link{display:inline-flex;align-items:center;gap:var(--s1);min-width:44px;min-height:44px;font-weight:700}
.walk-card{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s4);align-items:center;padding-block:var(--s4);border-block:1px solid var(--line-2)}
.walk-card figure{margin:0;min-width:0}
.walk-cover,.walk-shot>a{display:block;min-width:44px;min-height:44px;border-radius:var(--r)}
.walk-cover:hover,.walk-shot>a:hover{outline:1px solid var(--lagoon);outline-offset:2px}
.walk-card img{width:100%;border:1px solid var(--line-2);border-radius:var(--r)}
.walk-card figcaption{margin-top:var(--s1);color:var(--muted);font-size:var(--t-s)}
.walk-card h2,.walk-related h2,.walk-toc h2,.walk-before h2,.walk-after h2{font:700 var(--t-xl)/1.12 var(--display);color:var(--sand);margin-bottom:var(--s2)}
.walk-card p{max-width:55ch}
.walk-card .walk-meta{color:var(--muted);font-size:var(--t-s);margin-bottom:var(--s1)}
.walk-related,.walk-before,.walk-after{margin-block:var(--s5)}
.walk-related p,.walk-before p,.walk-after p{max-width:65ch}
.walk-related ul,.walk-after ul{list-style:none;padding:0;margin:var(--s2) 0 0;display:flex;flex-wrap:wrap;gap:0 var(--s3)}
.walk-toc{padding:var(--s3)!important;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);margin-block:var(--s4) var(--s5)}
.walk-toc h2{font-size:var(--t-l)}
.walk-toc ol{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1) var(--s3);list-style:none;margin:var(--s2) 0 0;padding:0}
.walk-toc li{min-width:0}
.walk-toc a{display:flex;align-items:center;gap:var(--s2);min-height:44px;min-width:44px;padding:var(--s1);border-radius:var(--r);color:var(--ink)}
.walk-toc a:hover{background:var(--bg-3)}
.walk-toc .walk-number{font:500 var(--t-s)/1.5 var(--mono);color:var(--muted);flex:none}
.walk-before ul{max-width:65ch;margin:var(--s2) 0 0;padding-left:var(--s3)}
.walk-before li+li{margin-top:var(--s1)}
.walkthrough-steps{list-style:none;margin:0;padding:0}
.walkthrough-steps>li{border-top:1px solid var(--line-2);padding-block:var(--s5)}
.walk-step{scroll-margin-top:136px;min-width:0}
.walk-step header{max-width:65ch;margin-bottom:var(--s3)}
.walk-step h2{font:700 clamp(28px,3.6vw,40px)/1.15 var(--display);color:var(--sand);margin-top:var(--s1)}
.walk-step .walk-copy{max-width:65ch}
.walk-step .walk-copy p+p{margin-top:var(--s2)}
.walk-step .walk-result{padding-left:var(--s2);border-left:3px solid var(--accent)}
.walk-step .walk-tip{color:var(--muted);font-size:var(--t-s)}
.walk-shot-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,280px);gap:var(--s3);align-items:start;margin-top:var(--s4)}
.walk-shot{min-width:0;margin:0}
.walk-shot-label{display:block;font:500 var(--t-xs)/1.5 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s1)}
.walk-shot img{width:100%;height:auto;background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r)}
.walk-shot figcaption{font-size:var(--t-s);line-height:1.5;color:var(--muted);margin-top:var(--s1);max-width:65ch}
.walk-after{border-top:1px solid var(--line-2);padding-top:var(--s4)!important}
.walk-after p+p{margin-top:var(--s2)}
.walk-footer{font:400 var(--t-s)/1.5 var(--body);letter-spacing:0;align-items:center}
.walk-footer .footer-links{gap:var(--s1) var(--s3)}
.walk-footer a{color:var(--lagoon)}
@media(max-width:760px){
 .walk-card{grid-template-columns:1fr;gap:var(--s3)}
 .walk-shot-pair{grid-template-columns:1fr;gap:var(--s4)}
 .walk-shot-mobile{width:min(100%,390px);justify-self:center}
 .walk-intro{margin-bottom:var(--s4)}
 .walkthrough-steps>li{padding-block:var(--s4)}
}
@media(max-width:560px){
 .walkthrough-page main{padding-top:var(--s3)}
 .walkthrough-page .nav ul{gap:var(--s1);justify-content:space-between}
 .walk-toc{padding:var(--s2)!important}
 .walk-toc ol{grid-template-columns:1fr;gap:var(--s1)}
 .walk-intro h1{font-size:clamp(36px,10vw,48px)}
 .walk-footer{align-items:flex-start;flex-direction:column}
}