/* Let's Do This — one stylesheet, no build. Sibling of What's the Merch's for-bands pages. */
@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-grotesk-normal-400-900.woff2) format("woff2");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url(/fonts/schibsted-grotesk-italic-400-900.woff2) format("woff2");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(/fonts/courier-prime-normal-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(/fonts/courier-prime-normal-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#F2EFE7; --paper-2:#E9E5DA; --well:#FBFAF6;
  --ink:#16171A; --ink-2:#4A4B50; --ink-3:#646468;
  --rule:#C9C4B6; --rule-2:#DDD8CB;
  --go:#1D6B47; --go-ink:#14523A; --go-tint:#D9E8DE;
  --warn:#8A5100;
  --body:"Schibsted Grotesk",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"Courier Prime",ui-monospace,Menlo,monospace;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#131416; --paper-2:#1C1D20; --well:#202125;
    --ink:#ECEAE3; --ink-2:#B4B2AB; --ink-3:#8B8A84;
    --rule:#393A3F; --rule-2:#2A2B2F;
    --go:#6CC79A; --go-ink:#9EDDBC; --go-tint:#1D3329;
    --warn:#E0A54A;
  }
}
:root[data-theme="dark"]{
  --paper:#131416; --paper-2:#1C1D20; --well:#202125;
  --ink:#ECEAE3; --ink-2:#B4B2AB; --ink-3:#8B8A84;
  --rule:#393A3F; --rule-2:#2A2B2F;
  --go:#6CC79A; --go-ink:#9EDDBC; --go-tint:#1D3329;
  --warn:#E0A54A;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
a{color:var(--go-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
b,strong{font-weight:700}
code{font-family:var(--mono);font-size:.92em;background:var(--paper-2);padding:1px 5px;border-radius:2px}

/* frame */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--rule)}
.wm{font-weight:900;font-size:22px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;line-height:1}
.wm span{color:var(--go)}
.nav{display:flex;flex-wrap:wrap;gap:4px 14px;font-family:var(--mono);font-size:13px}
.nav a{color:var(--ink-2);text-decoration:none}
.nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
main{padding:28px 16px 56px;max-width:76ch;margin:0 auto}
@media (min-width:720px){main{padding:44px 24px 72px}.top{padding:16px 24px}}

/* type */
h1,h2,h3{font-weight:850;letter-spacing:-.025em;line-height:1.02;text-wrap:balance;margin:0}
h1{font-size:clamp(36px,8vw,58px);max-width:14em;margin:10px 0 18px}
h2{font-size:clamp(24px,4.6vw,30px);margin:46px 0 14px}
h3{font-size:19px;letter-spacing:-.01em;line-height:1.2;margin:0 0 6px}
p{margin:0 0 14px;text-wrap:pretty}
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);margin:0}
.lede{font-size:21px;line-height:1.42;max-width:34em;margin:0 0 22px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}

/* buttons */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.btn{display:inline-block;font-weight:800;font-size:16px;padding:11px 16px 10px;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:3px;line-height:1;text-decoration:none;white-space:nowrap}
.btn.go{background:var(--go);border-color:var(--go);color:#fff}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.sm{font-size:14px;padding:7px 11px 6px}

/* the whole thing: numbered steps */
.steps{list-style:none;counter-reset:s;padding:0;margin:0}
.steps>li{counter-increment:s;position:relative;padding:0 0 18px 50px;margin:0 0 18px;border-bottom:1px solid var(--rule-2)}
.steps>li:last-child{border-bottom:0}
.steps>li::before{content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;border:1.5px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-weight:850;font-size:17px}
.steps .cost{font-family:var(--mono);font-size:13px;color:var(--go-ink);display:block;margin:4px 0 0}

/* checklists */
ul.check{list-style:none;padding:0;margin:0 0 8px}
ul.check>li{position:relative;padding:0 0 12px 30px}
ul.check>li::before{content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border:1.5px solid var(--ink-2);border-radius:2px;background:var(--well)}
ul.check>li{cursor:pointer;border-radius:3px}
ul.check>li:focus-visible{outline:2px solid var(--go);outline-offset:4px}
ul.check>li.done{color:var(--ink-2)}
ul.check>li.done::before{background:var(--go) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat;border-color:var(--go)}
.progress{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-family:var(--mono);font-size:13px;color:var(--ink-2);margin:0 0 18px}
.progress button{font:600 12px var(--body);border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:3px;padding:3px 8px;cursor:pointer}

/* questions people ask */
.qa{display:grid;gap:12px;grid-template-columns:1fr;margin:0}
@media (min-width:720px){.qa{grid-template-columns:1fr 1fr}}
.qa>div{background:var(--well);border:1px solid var(--rule);padding:16px 18px 6px;border-radius:3px}
.qa p{font-size:16px}

/* the five problems, on the hub */
.five{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.five a{display:block;color:inherit;text-decoration:none;background:var(--well);border:1px solid var(--rule);border-radius:3px;padding:18px 18px 14px}
.five a:hover{border-color:var(--ink)}
.five h3{font-size:22px}
.five .first{font-family:var(--mono);font-size:13.5px;color:var(--go-ink);margin:8px 0 0}

/* prompts to paste */
.prompt{position:relative;background:var(--well);border:1px solid var(--rule);border-left:4px solid var(--go);padding:14px 16px;margin:0 0 12px;font-family:var(--mono);font-size:14.5px;line-height:1.5;white-space:pre-wrap}
.prompt button{position:absolute;top:8px;right:8px;font:600 12px var(--body);border:1px solid var(--rule);background:var(--paper);color:var(--ink);border-radius:3px;padding:4px 8px;cursor:pointer}

/* asides */
.notice{margin:18px 0;padding:14px 18px;background:var(--go-tint);border-radius:3px}
.notice.warn{background:var(--paper-2);border-left:4px solid var(--warn)}
.hotline{font-size:20px;font-weight:800}

/* sources + legend */
ol.sources{font-size:14px;color:var(--ink-2);padding-left:22px}
ol.sources li{margin:0 0 6px;overflow-wrap:anywhere}
.grade{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;border:1px solid currentColor;border-radius:2px;padding:0 5px;margin-left:4px;white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:12.5px;color:var(--ink-2);border-top:1px solid var(--rule);padding-top:14px;margin-top:40px}
sup{line-height:0}
sup a{text-decoration:none;font-family:var(--mono);font-size:.72em;padding:0 1px}
main{overflow-wrap:break-word}
ul.check b,ul.check a,.qa a,p a{overflow-wrap:anywhere}

/* the long read */
.essay p{font-size:18px;line-height:1.65}
.essay h2{font-size:24px}

@media print{.top,.chips,.prompt button{display:none}body{background:#fff}}

/* routes: Overview · Learn · Do · Practice · Essay */
.routes{display:flex;flex-wrap:wrap;gap:2px 4px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--rule);background:var(--paper-2);font-family:var(--mono);font-size:13.5px}
.routes .who{font-weight:700;color:var(--ink);margin-right:10px}
.routes a{color:var(--ink-2);text-decoration:none;padding:5px 9px;border-radius:3px}
.routes a:hover{color:var(--ink);background:var(--well)}
.routes a[aria-current="page"]{color:var(--paper);background:var(--ink)}
@media (min-width:720px){.routes{padding:8px 24px}}

/* three doors on an overview page */
.doors{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:12px}
@media (min-width:720px){.doors{grid-template-columns:1fr 1fr 1fr}}
.doors a{display:block;height:100%;color:inherit;text-decoration:none;background:var(--well);border:1px solid var(--rule);border-top:4px solid var(--go);border-radius:3px;padding:16px 18px 14px}
.doors a:hover{border-color:var(--ink);border-top-color:var(--go)}
.doors h3{font-size:24px;margin:4px 0 8px}
.doors p{font-size:15.5px;margin:0 0 8px}
.doors .first{font-family:var(--mono);font-size:13px;color:var(--go-ink);margin:0}

/* the hub: five rows, three routes each */
.hub{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.hub>li{background:var(--well);border:1px solid var(--rule);border-radius:3px;padding:16px 18px 14px}
.hub h3{font-size:22px;margin:2px 0 6px}
.hub h3 a{color:inherit;text-decoration:none}
.hub h3 a:hover{text-decoration:underline}
.hub .ways{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0}
.hub .ways a{font-family:var(--mono);font-size:13px;text-decoration:none;color:var(--ink);border:1px solid var(--rule);border-radius:3px;padding:6px 10px;background:var(--paper)}
.hub .ways a:hover{border-color:var(--ink)}
.hub .ways a b{color:var(--go-ink);font-weight:700}
.byroute{display:grid;gap:12px;margin:0 0 8px}
@media (min-width:720px){.byroute{grid-template-columns:1fr 1fr 1fr}}
.byroute a{display:block;color:inherit;text-decoration:none;border:1.5px solid var(--ink);border-radius:3px;padding:14px 16px}
.byroute a:hover{background:var(--well)}
.byroute h3{font-size:20px;margin:0 0 4px}
.byroute p{font-size:15px;margin:0;color:var(--ink-2)}

/* learn: facts, words, disagreements */
ol.facts{list-style:none;counter-reset:f;padding:0;margin:0 0 8px}
ol.facts>li{counter-increment:f;position:relative;padding:0 0 14px 50px;margin:0 0 12px;border-bottom:1px solid var(--rule-2)}
ol.facts>li:last-child{border-bottom:0}
ol.facts>li::before{content:counter(f);position:absolute;left:0;top:0;font-family:var(--mono);font-size:26px;line-height:1;color:var(--go-ink)}
ol.facts b{display:block;font-size:19px;letter-spacing:-.01em;line-height:1.25;margin:0 0 4px}
dl.words{margin:0 0 8px}
dl.words dt{font-weight:800;margin:12px 0 2px}
dl.words dd{margin:0;color:var(--ink-2)}
.contest{border-left:4px solid var(--rule);padding:4px 0 4px 16px;margin:0 0 16px}
.contest p{margin:0 0 8px}

/* practice: rhythm, drills */
.rhythm h3{font-family:var(--mono);font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);margin:22px 0 10px}
.drill{border:1px solid var(--rule);border-radius:3px;background:var(--well);margin:0 0 10px;padding:0 16px}
.drill summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;position:relative;padding-right:28px}
.drill summary::-webkit-details-marker{display:none}
.drill summary::after{content:"+";position:absolute;right:0;top:12px;font-family:var(--mono);font-size:20px;color:var(--go-ink)}
.drill[open] summary::after{content:"\2013"}
.drill .a{border-top:1px solid var(--rule-2);padding:12px 0 6px;font-size:16px}
.drill .a p{margin:0 0 8px}
.verdict{font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--go-ink)}

/* changelog */
ul.log{padding-left:20px;margin:0 0 8px}
ul.log li{margin:0 0 6px}
@media print{.routes,.progress{display:none}ul.check>li{cursor:auto}}

/* where this started */
.origin{margin-top:2.5rem}
.evidence{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;border:1px solid currentColor;border-radius:999px;padding:0 7px;margin-left:4px;white-space:nowrap}
@media (max-width:520px){.routes .who{display:none}}
.evidence{white-space:normal;box-decoration-break:clone;-webkit-box-decoration-break:clone;line-height:1.9}
/* local steps: the ZIP stays on the device */
.local{margin:12px 0 8px;padding:16px;border:1px solid var(--rule);border-radius:6px;background:var(--paper-2)}
.zipform{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:end}
.zipform label{display:flex;flex-direction:column;gap:6px;font-weight:700}
.zipform input{font:inherit;font-family:var(--mono);font-size:18px;width:7.5em;padding:8px 10px;border:1px solid var(--ink-2);border-radius:4px;background:var(--paper);color:var(--ink)}
.zipform button,.local .change{font:inherit;font-family:var(--mono);font-size:14px;padding:9px 14px;border:1px solid var(--ink);border-radius:4px;background:var(--ink);color:var(--paper);cursor:pointer}
.local .change{background:transparent;color:var(--ink);padding:3px 9px;font-size:12.5px;margin-left:8px}
.local .where{margin:0 0 10px;font-size:1.05rem}
.local-list{margin:0;padding-left:1.2em}
.local-list li{margin:8px 0}
.local .small{font-size:.9rem;margin:12px 0 0}
/* automation for readers (6 Nov 2026): plain lists, help-now, dated asks, share, contacts, calendar */
ul.plain{margin:0 0 1rem;padding-left:1.25em}
ul.plain>li{margin:.55rem 0}
.notice.need{background:var(--well);border:1px solid var(--rule);border-left:4px solid var(--go)}
.notice.need p{margin:0}
.notice .vcard{margin:10px 0 0;font-size:.95rem}
.expired{color:var(--ink-2)}
.expired a{color:inherit}
.expired-note{display:block;color:var(--warn);font:700 12.5px/1.4 var(--mono);letter-spacing:.02em;margin:2px 0 6px}
button.act{font:600 13px var(--body);border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:4px;padding:7px 12px;cursor:pointer;margin-right:6px}
.calendar,.vcard{line-height:1.6}
.share{display:inline-flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-left:4px}
.share button{font:600 13px var(--body);border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:4px;padding:6px 11px;cursor:pointer}
.share a{font:600 14px var(--body)}
.prompt .share{display:flex;margin:12px 0 0;white-space:normal;font-family:var(--body)}
.prompt .share button{position:static}
.local-list li.need{font-weight:600}
.local-list li.note{color:var(--ink-2)}
.progress button+button{margin-left:6px}
@media print{.share,.calendar button,.vcard button,.sharepage,.local,.progress button{display:none}}
/* reader notes (6 Nov 2026) */
.feedback{margin:44px 0 0;border-top:1px solid var(--rule);padding-top:16px}
.feedback>summary{cursor:pointer;font-weight:700;font-size:1.05rem}
.feedback[open]>summary{margin-bottom:10px}
.fb-safety{background:var(--paper-2);border-left:4px solid var(--warn);padding:10px 14px;border-radius:3px}
.fbform{display:grid;gap:14px;max-width:640px}
.fbform fieldset{border:0;padding:0;margin:0;display:grid;gap:6px}
.fbform legend{font-weight:700;margin-bottom:4px}
.fbform label{display:grid;gap:6px;font-weight:600}
.fbform fieldset label{display:flex;gap:8px;align-items:center;font-weight:400}
.fbform textarea,.fbform input[type=email],.fbform input[name=source]{font:inherit;padding:9px 11px;border:1px solid var(--ink-2);border-radius:4px;background:var(--paper);color:var(--ink);width:100%;box-sizing:border-box}
.fbform button[type=submit]{justify-self:start;font:600 15px var(--body);border:1px solid var(--ink);background:var(--ink);color:var(--paper);border-radius:4px;padding:10px 18px;cursor:pointer}
.fbform .hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.contest-bar{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:20;display:flex;gap:6px;align-items:center;background:var(--paper);border:1px solid var(--ink);border-radius:6px;padding:6px;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.contest-bar button.act{margin:0;white-space:nowrap}
.contest-bar .x{font:600 16px var(--body);border:0;background:transparent;color:var(--ink);padding:4px 10px;cursor:pointer}
table.contested{width:100%;border-collapse:collapse;font-size:.95rem}
table.contested th,table.contested td{border-bottom:1px solid var(--rule);padding:8px 6px;text-align:left;vertical-align:top}
@media print{.feedback,.contest-bar{display:none}}
[hidden]{display:none !important}
.prompt{padding-right:84px}
@media (max-width:420px){.prompt{padding-top:40px;padding-right:16px}}
/* Records (/records/): wide evidence tables scroll inside their own box */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1rem 0;border:1px solid var(--rule)}
table.record{border-collapse:collapse;font-size:.85rem;min-width:720px;width:100%}
table.record th,table.record td{border-bottom:1px solid var(--rule);padding:6px 8px;text-align:left;vertical-align:top;overflow-wrap:anywhere}
table.record th{position:sticky;top:0;background:var(--paper)}
blockquote{margin:1rem 0;padding-left:1rem;border-left:3px solid var(--rule)}
/* Hub: five-minute strip */
ul.fast li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--rule)}
ul.fast .cost{white-space:nowrap}
ul.fast{padding-left:0;margin-left:0}
/* Per-step scope tag: the step works in the United States only */
.where{font-family:var(--mono);font-size:11px;letter-spacing:.06em;border:1px solid var(--rule);border-radius:3px;padding:1px 5px;vertical-align:middle;font-weight:400;white-space:nowrap}
/* Plan picker: the reader chooses a day and a time */
.when{margin:1rem 0}
.pick input{font:inherit;font-size:.95rem;padding:4px 6px;border:1px solid var(--rule);border-radius:4px;background:var(--paper);color:var(--ink);max-width:100%}
/* Charts (source/charts.json): one accent for the point, gray for context; every value printed as text */
.chart{margin:1.6rem 0;padding:16px 18px 12px;background:var(--well);border:1px solid var(--rule-2);border-radius:6px}
.chart figcaption{font-size:.98rem;line-height:1.35;margin-bottom:12px}
.chart .cnote{font-size:.85rem;color:var(--ink-2);margin:12px 0 0}
.cbars .cr,.cranges .cr{display:grid;grid-template-columns:minmax(0,1fr);gap:3px;margin:0 0 10px}
.cbars .cl,.cranges .cl{font-size:.88rem;color:var(--ink-2)}
.cbars .ct{display:flex;align-items:center;gap:8px}
.cbars .cb{display:block;flex:none;height:14px;background:var(--rule);border-radius:0 4px 4px 0;min-width:2px}
.chart .emph .cb,.chart .emph .crg{background:var(--go)}
.chart .cv{font-family:var(--mono);font-size:.86rem;color:var(--ink);white-space:nowrap}
.cranges .ct{position:relative;display:block;height:14px;border-left:1px solid var(--rule)}
.cranges .crg{position:absolute;top:0;height:14px;background:var(--rule);border-radius:4px}
.cranges .caxis{position:relative;height:18px;margin-top:2px;border-top:1px solid var(--rule)}
.cranges .caxis span{position:absolute;transform:translateX(-50%);font-family:var(--mono);font-size:.72rem;color:var(--ink-3);top:3px}
.cranges .caxis span:first-child{transform:none}.cranges .caxis span:last-child{transform:translateX(-100%)}
.ccols{display:flex;gap:18px;align-items:flex-start}
.ccols .cc{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0;max-width:160px}
.ccols .cwell{height:170px;width:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border-bottom:1px solid var(--rule)}
.ccols .cb{display:block;width:100%;max-width:56px;flex:none;background:var(--rule);border-radius:4px 4px 0 0}
.ccols .cv{margin-bottom:4px}
.ccols .cl{font-size:.8rem;color:var(--ink-2);text-align:center;line-height:1.25;margin-top:6px}
.notice .es{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--rule-2);font-size:.95rem}
/* One-line pointer from the top of a Do page to its help-now box, for the person living the problem */
.nowlink{margin:.2rem 0 .8rem;font-size:.95rem;font-weight:600}
.nowlink a{color:var(--go-ink);text-decoration-thickness:1px;text-underline-offset:3px}
#now{scroll-margin-top:16px}

/* Keyboard focus, everywhere: visible on both themes */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,select:focus-visible{outline:2px solid var(--go);outline-offset:2px;border-radius:2px}
/* Print: a paper checklist someone can hand to a relative. Nothing interactive; links show where they go. */
@media print{
  .nowlink,.when,.ctas,#local,#local+p,.legend,.cta-row{display:none}
  body{font-size:11.5pt;line-height:1.45}
  h1{font-size:26pt} h2{font-size:16pt;break-after:avoid} h3{break-after:avoid}
  figure.chart,.notice,ol.steps>li,ul.check>li{break-inside:avoid}
  ul.check a[href^="http"]::after,.notice a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444;word-break:break-all}
  ol.sources{font-size:8.5pt;line-height:1.3}
  ol.sources li{margin-bottom:2pt}
  a{color:#14523A}
}
/* Landing page: the five problems first, each a numbered path */
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main[data-page="home"]{padding-top:8px}
.hub.paths{margin-top:4px}
.hub.paths li p:not(.eyebrow):not(.path){margin:4px 0 0;color:var(--ink-2)}
.path{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.path .step{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);border:1px solid var(--rule);border-radius:999px;padding:6px 14px 6px 6px;background:var(--paper);font-size:14px}
.path .step .n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1px solid var(--rule);font-family:var(--mono);font-size:12px}
.path .step .t{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.path .step:hover{border-color:var(--ink)}
.path .step.main{background:var(--go);border-color:var(--go);color:var(--paper)}
.path .step.main .n{border-color:var(--paper)}
.path .step.main .t{color:var(--paper)}
.scope{margin-top:14px}
@media (max-width:520px){
  .hub.paths li{padding:14px 14px 16px}
  .hub.paths h3{font-size:20px}
  .path{gap:6px}
  .path .step{padding:5px 11px 5px 5px;font-size:13px;gap:6px}
  .path .step:not(.main) .t{display:none}
}
@media (max-width:520px){
  .path .step .t{display:none}
  .path .step{padding:5px 13px 5px 5px}
}
/* On the landing page the five paths are the menu: the wordmark alone in the corner */
body:has(main[data-page="home"]) .top .nav{display:none}
/* Home: one path, five rows. Columns line up so Do reads as the step that matters. */
.pathgrid{margin:6px 0 0}
.phead,.prow{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:10px;align-items:center}
.phead{padding:0 0 10px;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-2)}
.phead i{font-style:normal;display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--rule);border-radius:50%;margin-right:7px;font-size:11px;color:var(--ink)}
.prow{padding:16px 0;border-bottom:1px solid var(--rule-2)}
.pname h2{font-size:26px;line-height:1.1;margin:0;letter-spacing:-.015em}
.pname h2 a{color:var(--ink);text-decoration:none}
.pname h2 a:hover{text-decoration:underline;text-underline-offset:4px}
.pname p{margin:4px 0 0;color:var(--ink-2);font-size:15px;line-height:1.35}
.pcells{display:contents}
.pc{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:58px;padding:9px 12px;border:1px solid var(--rule);border-radius:8px;text-decoration:none;color:var(--ink);background:var(--paper)}
.pc b{font-size:16px}
.pc span{font-family:var(--mono);font-size:12px;color:var(--ink-2);line-height:1.3}
.pc:hover{border-color:var(--ink)}
.pc.main{background:var(--go);border-color:var(--go);color:var(--paper)}
.pc.main span{color:var(--paper)}
.pc.main:hover{filter:brightness(1.08)}
@media (max-width:720px){
  .phead{display:none}
  .prow{grid-template-columns:1fr;gap:8px;padding:14px 0}
  .pname h2{font-size:22px}
  .pcells{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:6px}
  .pc{min-height:0;padding:8px 10px}
  .pc b{font-size:14px}
  .pc:not(.main) span{display:none}
}
.phead span{white-space:nowrap}.phead em{font-style:normal;margin-left:6px;color:var(--ink-3)}