/* Type system (owner, October 20th 2026, the same decision across every Situated
   Strategies site). Three families, one size per category.
   Newsreader: display, titles, headings.
   IBM Plex Sans: reading text.
   IBM Plex Mono: navigation, labels, keys (commands, list labels), code.
   Self-hosted, SIL OFL, latin subsets, in /fonts. */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 800;font-display:swap;src:url("/fonts/Newsreader-var.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400 800;font-display:swap;src:url("/fonts/Newsreader-Italic-var.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400 600;font-display:swap;src:url("/fonts/IBMPlexSans-var.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:italic;font-weight:400;font-display:swap;src:url("/fonts/IBMPlexSans-Italic-var.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/IBMPlexMono-400.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/IBMPlexMono-500.woff2") format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/IBMPlexMono-600.woff2") format("woff2")}
:root{
  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --t-display:clamp(44px,11vw,116px); /* the hero wordmark */
  --t-title:clamp(38px,6vw,60px);     /* page h1 */
  --t-heading:clamp(28px,3.8vw,38px); /* section h2, hero subheading */
  --t-subhead:24px;                   /* h3 */
  --t-nav:12px;                       /* top nav, prev/next (mono caps) */
  --t-lead:20px;                      /* intro paragraph */
  --t-body:17px;                      /* everything you read */
  --t-small:14px;                     /* notes, footer, buttons */
  --t-key:15px;                       /* mono keys: commands, list labels */
  --t-code:14px;                      /* kbd, code blocks, install lines */
  --t-label:12px;                     /* mono caps: eyebrows, column heads, counters */

  --bg:#d9d2c5;--panel:#f3efe8;--panel2:#e8e2d7;--ink:#1e1a15;--muted:#5e564b;--line:#c7bdad;--accent:#2f4a72;--accent-ink:#fff;--gold:#b08528;
  --code-bg:#1e1a15;--code-ink:#ece6db;
  --shadow:0 1px 2px rgba(50,40,25,.07),0 12px 30px rgba(50,40,25,.10);
  --route:repeating-linear-gradient(90deg,var(--gold) 0 6px,transparent 6px 11px);
  color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#1b1916;--panel:#262320;--panel2:#302b26;--ink:#ece6db;--muted:#a89f92;--line:#403931;--accent:#d3b076;--accent-ink:#1b1916;--gold:#dfb861;
  --code-bg:#0f0d0b;--shadow:0 1px 2px rgba(0,0,0,.35),0 12px 30px rgba(0,0,0,.30);color-scheme:dark}}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-body)/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.wrap{max-width:960px;margin:0 auto;padding:22px 20px 70px}

/* navigation */
nav{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:56px}
nav a{color:var(--muted);text-decoration:none;font:500 var(--t-nav)/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding:4px 0}
nav a:hover{color:var(--accent)}
nav a.on{color:var(--ink);border-bottom:2px solid var(--gold)}
nav a.ext::after{content:" ↗";font-size:.7em}
nav .brand{display:flex;align-items:center;gap:12px;color:var(--ink);font:500 30px/1 var(--serif);letter-spacing:-.02em;text-transform:none;margin-right:auto;font-variation-settings:"opsz" 72}
nav .brand img{width:40px;height:40px;border-radius:10px;display:block;box-shadow:0 0 0 1px var(--line)}
.home nav .brand{display:none}
.home nav{justify-content:flex-end}
.next{margin-top:56px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.next a{font:500 var(--t-nav)/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}

/* headings */
h1,h2,h3{font-family:var(--serif);font-weight:500;color:var(--ink);font-variation-settings:"opsz" 72}
h1{font-size:var(--t-title);line-height:1.02;letter-spacing:-.015em;margin:0 0 18px;max-width:20ch}
h2{font-size:var(--t-heading);line-height:1.1;letter-spacing:-.01em;margin:0 0 10px}
h3{font-size:var(--t-subhead);line-height:1.2;margin:24px 0 10px}
section{margin-top:56px}

/* reading text */
.lead{font-size:var(--t-lead);line-height:1.6;color:var(--muted);max-width:62ch;margin:0 0 26px}
.sub{color:var(--muted);margin:0 0 18px;max-width:66ch}
.meta,footer{font-size:var(--t-small);color:var(--muted)}
.meta{margin:0 0 18px}
p.meta:has(+ .cmd){margin:0}
b,strong{font-weight:600}

/* labels (mono caps) */
.eyebrow,th{font:500 var(--t-label)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.eyebrow{color:var(--accent);margin:0 0 16px}
th{color:var(--muted);text-align:left;padding:0 16px 12px 0}

/* code */
kbd{font:var(--t-code) var(--mono);background:var(--panel2);padding:2px 7px;border-radius:6px;white-space:nowrap}
.cmd,code{background:var(--code-bg);color:var(--code-ink);border-radius:12px;font:var(--t-code)/1.6 var(--mono)}
.cmd{display:flex;align-items:center;gap:12px;padding:14px 16px;overflow:auto;margin:8px 0 18px}
.cmd span{flex:1;white-space:nowrap}
.cmd button{font:500 var(--t-label) var(--mono);letter-spacing:.06em;text-transform:uppercase;padding:7px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.25);background:transparent;color:inherit;cursor:pointer}
code{display:block;margin:10px 0 18px;padding:14px 16px;white-space:pre-wrap;overflow-wrap:anywhere}

/* buttons */
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 18px}
.btn{font:500 13px/1 var(--mono);letter-spacing:.06em;padding:14px 20px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);text-decoration:none;display:inline-block}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* homepage hero */
.hero{padding:16px 0 4px}
.lockup{display:flex;align-items:center;gap:clamp(16px,3vw,32px);margin:0 0 30px}
.lockup img{width:clamp(64px,14vw,144px);height:auto;border-radius:22%;box-shadow:0 0 0 1px var(--line),var(--shadow)}
.lockup span{font:500 var(--t-display)/.9 var(--serif);letter-spacing:-.03em;font-variation-settings:"opsz" 72}
.hero h1{font-size:var(--t-heading);line-height:1.15;max-width:26ch;margin-bottom:22px}
.about p{max-width:64ch;margin:0 0 16px}
footer .badge{flex-basis:100%;margin-top:6px}.badge{display:inline-block;width:fit-content}.badge img{display:block;width:230px;height:auto}

/* Itemized lists and tables. Everything with .hl hovers the same way:
   the others fade back and a dashed route draws across the one you're on. */
table{width:100%;border-collapse:collapse}
td{text-align:left;vertical-align:top;padding:16px 16px 16px 0;border-top:1px solid var(--line)}
.hl td,.hl:not(table)>*{background:var(--route) no-repeat 0 -1px/0 2px;transition:opacity .25s ease,background-size .4s ease}
.hl td:nth-child(2){transition-delay:0s,.1s}.hl td:nth-child(3){transition-delay:0s,.2s}
.hl tbody:hover tr:not(:hover) td,.hl tbody:focus-within tr:not(:focus-within) td,
.hl:not(table):hover>:not(:hover),.hl:not(table):focus-within>:not(:focus-within){opacity:.4}
.hl tr:hover td,.hl tr:focus-within td,.hl:not(table)>:hover,.hl:not(table)>:focus-within{background-size:100% 2px}
.hl:not(table){list-style:none;padding-left:0;border-bottom:1px solid var(--line)}
ol.hl,div.hl{margin:14px 0 18px}
.hl+.meta,.hl+p{margin-top:16px}
.tok{white-space:nowrap}
.hl tr:last-child td{border-bottom:1px solid var(--line)}
table.hl{margin-top:14px}
.hl th:first-child{width:40%}
td:first-child,.list .k{font:600 var(--t-key)/1.6 var(--mono);color:var(--accent);padding-right:24px}

/* keyed list: mono key, text beside it */
.list .item{display:grid;grid-template-columns:220px 1fr;gap:6px 28px;padding:20px 0;border-top:1px solid var(--line)}
.list .d p{margin:0 0 8px}.list .d p:last-child{margin:0}

/* numbered lists: gold mono counter in a left gutter */
.steps,.points,.faq{counter-reset:n}
.steps>li,.points>li{counter-increment:n;position:relative;padding:14px 0 14px 48px;border-top:1px solid var(--line)}
.faq summary::before{counter-increment:n}
.steps>li::before,.points>li::before,.faq summary::before{content:counter(n,decimal-leading-zero);font:500 var(--t-label)/1.6 var(--mono);color:var(--gold)}
.steps>li::before,.points>li::before{position:absolute;left:0;top:14px;line-height:calc(var(--t-body)*1.6)}
.steps>li>b:first-child{display:block;margin-bottom:2px}
.points{max-width:640px;margin-bottom:26px}
.points>li{padding-top:11px;padding-bottom:11px}.points>li::before{top:11px}

/* questions */
.faq summary{list-style:none;display:grid;grid-template-columns:48px 1fr auto;align-items:baseline;padding:18px 0;font-weight:600;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 var(--t-lead)/1 var(--mono);color:var(--accent);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details{border-top:1px solid var(--line)}
.faq details p{margin:0 0 20px 48px;max-width:64ch;color:var(--muted)}

/* homepage table: rows open on hover */
.atlas{table-layout:fixed}
.atlas th:nth-child(1){width:150px}.atlas th:nth-child(2){width:190px}
.atlas td{padding:18px 16px 18px 0}
.atlas td:nth-child(2){color:var(--muted)}
.atlas .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.atlas .more>div{overflow:hidden;color:var(--muted)}
.atlas .more p{margin:8px 0 6px}.atlas .more a{font-weight:600;font-size:var(--t-small);text-decoration:none}
.atlas tr:hover .more,.atlas tr:focus-within .more{grid-template-rows:1fr}
@media (hover:none){.atlas .more{grid-template-rows:1fr}}

/* two plain columns (install) */
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px}
.two h3{margin-top:0}

footer{margin-top:60px;padding-top:20px;border-top:1px solid var(--line);display:flex;gap:18px;flex-wrap:wrap}

@media (max-width:760px){.two{grid-template-columns:1fr}}
@media (max-width:640px){
  nav{flex-wrap:nowrap;overflow-x:auto;gap:16px;margin:0 -20px 40px;padding:0 20px 6px;scrollbar-width:none}nav::-webkit-scrollbar{display:none}
  nav .brand{font-size:24px}nav .brand img{width:32px;height:32px}.home nav .brand{display:none}
  .hl thead{display:none}table.hl,.hl tbody,.hl tr,.hl td{display:block;width:100%}
  .hl td{border:0;padding:0 0 4px}.hl tr{padding:16px 0;border-top:1px solid var(--line)}.hl tr:last-child td{border:0}.hl tr:last-child{border-bottom:1px solid var(--line)}
  .hl td:first-child{overflow-wrap:anywhere}
  .list .item{grid-template-columns:1fr}
  .steps>li,.points>li{padding-left:36px}.faq summary{grid-template-columns:36px 1fr auto}.faq details p{margin-left:36px}}
@media (prefers-reduced-motion:reduce){.hl td,.hl:not(table)>*,.atlas .more,.faq summary::after{transition:none}}

/* Long paths and commands wrap on narrow screens; the nav wraps instead of overflowing. */
@media (max-width: 640px) {
  kbd { white-space: normal; overflow-wrap: anywhere; }
  .cmd span { white-space: normal; overflow-wrap: anywhere; }
  h1, .lead, .sub, p { overflow-wrap: anywhere; }
}
nav { flex-wrap: wrap; row-gap: 6px; }


/* Motion (owner, October 21st 2026): everything that moves on this site moves because
   the reader did something (motion.js). Arrivals are gated on html.js, which the script
   adds only when prefers-reduced-motion is off. */
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.is-in{opacity:1;transform:none}

/* The sample map: one made-up session, stepped through by hand. The trail is the
   gold route from the hover lists, drawn one leg per press; the moments list fills in
   beside it. */
.map .sub{margin-bottom:22px}
.route{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px 40px;align-items:center;padding:22px 0 8px;border-top:1px solid var(--line);outline:none}
.route:focus-visible{outline:2px solid var(--gold);outline-offset:8px;border-radius:8px}
.route svg{width:100%;height:auto;display:block;overflow:visible}
.route .ground{fill:none;stroke:var(--line);stroke-width:1;opacity:.9}
.route .trail{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;transition:stroke-dashoffset .7s cubic-bezier(.2,.7,.2,1)}
.route .wp circle{fill:var(--panel);stroke:var(--line);stroke-width:1.5;transition:fill .3s ease,stroke .3s ease}
.route .wp text{font:500 11px var(--mono);letter-spacing:.08em;fill:var(--muted);opacity:0;transition:opacity .3s ease}
.route .wp.is-shown circle{stroke:var(--gold)}
.route .wp.is-shown text{opacity:1}
.route .wp.is-now circle{fill:var(--accent);stroke:var(--accent)}
.legs{list-style:none;margin:0;padding:0;min-height:260px}
.legs>li{display:grid;grid-template-columns:40px 1fr;gap:0 10px;padding:10px 0;border-top:1px solid var(--line);opacity:.28;transition:opacity .35s ease}
.legs>li:first-child{border-top:0}
.legs>li.is-shown{opacity:.7}
.legs>li.is-now{opacity:1}
.legs .k{font:500 var(--t-label)/1.7 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.legs b{display:block;font-weight:600}
.legs p{margin:2px 0 0;color:var(--muted);font-size:var(--t-small);line-height:1.5}
.map-ctl{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-top:6px}
.map-ctl .count{font:500 var(--t-label)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-left:auto}
.map-ctl .btn:disabled{opacity:.4;cursor:default}
.route.is-done .legs>li{opacity:.85}
.route.is-done .legs>li.is-now{opacity:1}
.map .meta{margin-top:14px}
@media (max-width:760px){.route{grid-template-columns:1fr;gap:16px}.legs{min-height:0}}
@media (prefers-reduced-motion:reduce){.route .trail,.route .wp circle,.route .wp text,.legs>li{transition:none}}