:root{
  --paper:#f7f3ea; --paper-2:#fbf9f3; --ink:#1d1a16; --accent:#c0532a;
  --muted:#8a8175; --rule:#e4ddcf; --restaurant:#9c8a72; --fuel:#bcae97;
  --display:"Alegreya",Georgia,serif; --body:"Lora",Georgia,serif;
  --label:"Be Vietnam Pro",system-ui,sans-serif;
  --gap:1.5rem; --col-min:20rem;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--body);font-weight:400;line-height:1.6;
  color:var(--ink);background:var(--paper)}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.08;margin:.2em 0}
.kicker{font-family:var(--body);text-transform:uppercase;letter-spacing:.16em;
  font-size:11px;font-weight:600;color:var(--accent)}
main{max-width:820px;margin:0 auto;padding:1rem 1.25rem 3rem}
/* Rethink v2 (V0): hub Field-Guide pages use a wide canvas so the 3-col
   .hub-grid breathes on desktop; long-form prose pages keep the 820px line. */
body[data-page="hubs"] main{max-width:min(1200px,94vw)}
.dek{color:var(--muted);max-width:46ch}
/* pull-quote — shared editorial primitive */
.pullquote{
  border-left:3px solid var(--accent);
  margin:1.75rem 0 1.5rem 0;
  padding:.6rem 0 .6rem 1.2rem;
  font-family:var(--display);
  font-size:1.25rem;
  font-weight:400;
  font-style:italic;
  line-height:1.35;
  color:var(--ink);
  max-width:38ch;
}
.pullquote em{font-style:normal;color:var(--accent)}
/* nav */
.site-nav{display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:center;max-width:980px;
  margin:0 auto;padding:1rem 1.25rem;border-bottom:1px solid var(--rule);font-size:.95rem}
.site-nav a{color:var(--muted);text-decoration:none}
.site-nav a:hover{color:var(--ink)}
.site-nav a.active{color:var(--accent);font-weight:600}
.site-nav a.brand{font-family:var(--display);font-weight:600;color:var(--ink)}
/* big numbers */
.bignums{display:flex;flex-wrap:wrap;gap:1.75rem;margin:1.5rem 0}
.bignum .v{font-family:var(--display);font-weight:900;font-size:2.6rem;color:var(--accent);line-height:1}
.bignum .l{color:var(--muted);font-size:.85rem;margin-top:.3rem}
/* map frame */
.map-frame{background:var(--paper-2);border:1px solid var(--rule);border-radius:8px;
  padding:.5rem;text-align:center}
.map-frame img{width:100%;max-width:520px;height:auto;display:block;margin:0 auto}
/* stepper */
.stepper{margin:1.5rem 0}
.stage{min-height:340px}
.stage .kicker{display:block;margin-bottom:.4rem}
.stage h2{font-size:1.9rem;margin:.05em 0 .4rem}
.stage h2 em{font-style:italic;color:var(--accent)}
.stage .narr{font-size:1.05rem;color:#4a4439;max-width:48ch;margin:0 0 1rem}
.stage.intro{padding-top:1.5rem}
.step-nav{display:flex;align-items:center;gap:.9rem;margin-top:1.25rem;
  padding-top:1rem;border-top:1px solid var(--rule)}
.step-nav button{font-family:var(--body);font-weight:600;border:1px solid var(--rule);
  background:#fff;border-radius:7px;padding:.5rem 1rem;cursor:pointer;color:var(--ink)}
.step-nav button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.step-nav button:disabled{opacity:.4;cursor:default}
.dots{display:flex;gap:6px;margin-left:auto}
.dot{width:7px;height:7px;border-radius:50%;background:var(--rule);transition:.2s}
.dot.on{background:var(--accent);width:20px;border-radius:4px}
/* value-ramp bars */
.bar-row{display:grid;grid-template-columns:130px 1fr auto;align-items:center;gap:.6rem;
  margin:.35rem 0;font-size:.9rem}
.bar{display:block;height:13px;border-radius:3px;background:var(--accent)}
.bar.old{background:var(--fuel)}
/* cards */
.cards-row{display:grid;grid-template-columns:repeat(auto-fit, minmax(var(--col-min, 20rem), 1fr));gap:1rem;margin-top:1rem}
.topic-card{display:block;padding:1.25rem;border:1px solid var(--rule);border-radius:10px;
  background:var(--paper-2);text-decoration:none;color:var(--ink);transition:.15s}
.topic-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.topic-card h3{font-size:1.2rem;margin:0 0 .3rem}
.topic-card p{margin:0 0 .5rem;color:var(--muted);font-size:.92rem}
.topic-card .go{color:var(--accent);font-weight:600;font-size:.88rem}
/* --- responsive magazine grid (R1) --------------------------------- */
/* Columns appear/disappear by available width, not by device.
   Source order stays reading order; no JS, no per-page breakpoints. */
.mag-grid{
  display:grid;
  gap:var(--gap, 1.5rem);
  grid-template-columns:repeat(auto-fit, minmax(var(--col-min, 20rem), 1fr));
}
.mag-grid--2{ --col-min:24rem; }     /* caps at ~2 cols on common widths */
.mag-grid--tight{ --gap:1rem; }
.span-2{ grid-column:span 2; }        /* a block that wants double width */
.span-all{ grid-column:1 / -1; }      /* full-bleed band (mastheads, notes) */
/* growth chart + line race shared */
.chart svg,.linerace{width:100%;max-width:560px;display:block;margin:0 auto}
.chart .axis,.linerace .axis{font:11px var(--body);fill:var(--muted)}
.chart .lbl,.linerace .lbl{font:12px var(--body);fill:var(--muted)}
.linerace .lbl.accent{fill:var(--accent);font-weight:600}
.how{font-size:.85rem;color:var(--accent);text-decoration:none;border-bottom:1px dotted var(--accent)}
footer{max-width:820px;margin:0 auto;padding:2rem 1.25rem 4rem;border-top:1px solid var(--rule)}
.note{color:var(--muted);font-size:.85rem}
@media (max-width:640px){
  .bignum .v{font-size:2.1rem}
  .bar-row{grid-template-columns:90px 1fr auto}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* --- sections magazine (Phase 1) --- */
.section-strip {
  display: flex; gap: 1rem; align-items: baseline;
  padding: .35rem 1.2rem; border-bottom: 1px solid var(--rule, #e3ddd2);
  font-family: var(--body); font-size: .85rem;
}
.section-strip .strip-label {
  font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  font-size: .7rem; color: var(--muted, #6b5a47); text-decoration: none;
}
.section-strip a { color: var(--ink, #2c2118); text-decoration: none; }
.section-strip a.active { color: var(--accent, #c0532a); font-weight: 600; }
.street-hem { color: var(--accent); font-weight: 600; }
/* --- streetlife part 2: the four lives --- */
header.part2{margin-top:3rem}
.lives-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;max-width:560px;margin:0 auto}
.lives-grid figure{margin:0}
.lives-grid img{width:100%}
.lives-grid figcaption{font-size:.8rem;text-align:center;opacity:.75}
.lives-pair{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;max-width:560px;margin:0 auto}
.chip{display:inline-block;padding:.05rem .55rem;border-radius:.7rem;color:#fff;font-size:.78rem;margin:0 .25rem .2rem 0}
.chip.sustenance{background:#3e7a5e}
.chip.anchors{background:#44608c}
.chip.third_places{background:#c0532a}
.chip.display{background:#c99a2e}
.bar.sustenance{background:#3e7a5e}
.bar.anchors{background:#44608c}
.bar.third_places{background:#c0532a}
.bar.display{background:#c99a2e}
@media (max-width:520px){.lives-grid,.lives-pair{grid-template-columns:1fr}}
/* --- chains story: persistent map + legend chips --- */
.chains-map{margin:1.25rem 0 .5rem;border:1px solid var(--rule);border-radius:8px;
  background:var(--paper-2);padding:.4rem}
.chains-map svg{width:100%;height:auto;display:block;background:var(--paper,#faf6ef)}
.chains-legend{display:flex;flex-wrap:wrap;gap:.5rem;margin:.25rem 0 .5rem}
.chains-legend:empty{display:none}
.chains-legend .chip{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;
  padding:.35rem .7rem;border:1px solid var(--rule);border-radius:.7rem;
  background:#fff;color:var(--ink);font-size:.82rem;cursor:default}
.chains-legend .chip .sw{width:12px;height:12px;border-radius:50%;display:inline-block}
.chains-legend .chip{cursor:pointer;transition:border-color .15s,box-shadow .15s,background .15s}
.chains-legend .chip .n{opacity:.55;font-variant-numeric:tabular-nums}
.chains-legend .chip.on{background:#3a2c20;color:#fff;border-color:#3a2c20}
.chains-legend .chip.on .n{opacity:.7}
.chains-legend .chip:focus-visible{outline:2px solid var(--accent,#c0532a);outline-offset:2px}
/* ranked-hub labels drawn on the SVG */
.hubs .knot{pointer-events:auto}
text.hub-label{font:600 11px var(--label);fill:#3a2c20}
text.hub-label-bg{font:600 11px var(--label);fill:none;
  stroke:var(--paper,#faf6ef);stroke-width:3px;stroke-linejoin:round;paint-order:stroke}
/* gentle pulse on the top-5 ranked knots — motion-gated below */
@media (prefers-reduced-motion: no-preference){
  .knot.pulse .g-core{animation:knot-pulse 2.4s ease-in-out infinite}
  @keyframes knot-pulse{0%,100%{opacity:.95}50%{opacity:.6}}
}
/* hub tooltip (custom; the native <title> is the no-JS fallback) */
.chains-tip{position:fixed;z-index:50;max-width:230px;pointer-events:none;
  background:#2b211a;color:#f4ecdf;padding:.45rem .6rem;border-radius:.5rem;
  font:.78rem/1.35 var(--label);box-shadow:0 4px 14px rgba(0,0,0,.28)}
.chains-tip b{display:block;font-size:.8rem;margin-bottom:.2rem}
.chains-tip .tip-list{opacity:.85}
/* mobile: sticky map above the scrolling stepper (matches place-names' map-stage).
   The persistent #chains-map pins to the top so it never scrolls away while the
   step cards + nav scroll beneath; a paper background masks content sliding under
   it. The legend chips sit with the map and wrap to as many rows as needed. */
@media (max-width:640px){
  .chains-map{position:sticky;top:0;z-index:3;margin:.75rem 0 .4rem;
    background:var(--paper);padding-top:.5rem}
  .chains-map svg{max-height:46dvh;width:auto;max-width:100%;margin:0 auto}
  .chains-legend{position:sticky;top:46dvh;z-index:3;background:var(--paper);
    margin:0 0 .4rem;padding:.15rem 0}
}
/* method parameter table */
table.params{border-collapse:collapse;margin:.4rem 0 .8rem;font-size:.86rem;width:100%;max-width:640px}
table.params th,table.params td{text-align:left;padding:.32rem .55rem;border-bottom:1px solid var(--rule,#e4ddcf);vertical-align:top}
table.params thead th{font-weight:600;color:var(--muted,#8a8175);font-size:.78rem;
  text-transform:uppercase;letter-spacing:.04em}
table.params td:nth-child(2){white-space:nowrap;font-variant-numeric:tabular-nums}
/* --- Phase Z: Street Life → Field Guide bridge --- */
.fg-bridge{margin-top:2rem;font-family:var(--body)}
/* --- cover: featured card + section blocks --- */
.featured-card { display: block; padding: 1.4rem 1.6rem; border: 1px solid var(--rule, #e4ddcf);
  border-left: 4px solid var(--accent, #c0532a); text-decoration: none; color: inherit; }
.featured-card h2 { margin: .2rem 0 .4rem; }
.cover-section { margin: 2rem 0; }
.cover-section-label a { text-decoration: none; color: var(--muted, #8a8175);
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.featured-card.has-img { display: grid; grid-template-columns: 200px 1fr; gap: 1.2rem;
  align-items: stretch; padding: 0; overflow: hidden; }
.featured-card .featured-img { width: 100%; height: 100%; object-fit: cover;
  min-height: 140px; display: block; }
.featured-card .featured-body { padding: 1.3rem 1.5rem; }
@media (max-width: 560px) {
  .featured-card.has-img { grid-template-columns: 1fr; }
  .featured-card .featured-img { max-height: 180px; }
}