/* Fredoka (Milena Brandão, SIL OFL) — variable wght 400–700. Self-hosted from Google Fonts.
   Rounded and friendly: titles, numbers, buttons, chips, tabs, tags.
   SF Pro is the iOS system font; referenced via the -apple-system stack in typography.css (no files shipped). */
@font-face{font-family:"Fredoka";font-style:normal;font-weight:400 700;font-display:swap;src:url("/ds/assets/fonts/Fredoka-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Fredoka";font-style:normal;font-weight:400 700;font-display:swap;src:url("/ds/assets/fonts/Fredoka-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* Untrod colour system — taken from the mascot.
   Wanderer blue (its body) is the primary. Ember (its beanie and backpack) inks walked streets.
   Light (:root) is a soft lavender-white that matches the mascot artwork's ground; Dark ([data-theme="dark"]) is an indigo-charcoal.
   Five friendly hues colour icon tiles, medals, stamps and progress. */
:root{
  --paper-0:#FFFFFF;
  --paper-25:#F6F5FA;
  --paper-50:#EEEDF5;
  --paper-100:#E4E3EE;
  --paper-200:#D2D1E0;
  --paper-300:#B3B2C6;
  --paper-400:#8F8EA6;
  --paper-500:#6E6D85;
  --paper-600:#525168;
  --paper-700:#3A394D;
  --paper-800:#252433;
  --paper-900:#161622;

  --ink-000:#0C0C12;
  --ink-050:#12121A;
  --ink-100:#1B1B26;
  --ink-200:#252531;
  --ink-300:#30303E;
  --ink-400:#444456;
  --ink-500:#66667B;
  --ink-600:#8D8DA3;
  --ink-700:#B5B5C8;
  --ink-800:#D9D9E6;
  --ink-900:#F3F3F9;

  /* Wanderer blue — primary (mascot body) */
  --wander-50:#F0F2FC;
  --wander-100:#DFE3F8;
  --wander-200:#BCC3EF;
  --wander-300:#95A0E2;
  --wander-400:#7381D6;
  --wander-500:#5868C8;
  --wander-600:#4553B0;
  --wander-700:#353F8C;

  /* Ember — walked streets (mascot beanie) */
  --orange-50:#FDF0EB;
  --orange-100:#FBDDD2;
  --orange-200:#F7BEA8;
  --orange-300:#F29878;
  --orange-400:#EC7450;
  --orange-500:#E4532A;
  --orange-600:#C2421D;
  --orange-700:#933216;

  --blue-100:#DCEBF9;  --blue-500:#3B94D9;  --blue-600:#2C78B5;
  --green-100:#D8F0E2; --green-500:#3AA874; --green-600:#2C8859;
  --purple-100:#ECE3F9;--purple-500:#9467D8;--purple-600:#7A4EBC;
  --pink-100:#FDE4E1;  --pink-500:#EE7A70;  --pink-600:#D25F55;
  --yellow-100:#FCEFCF;--yellow-500:#EFB43A;--yellow-600:#C99222;

  /* Safety — the only true red. Hazards, SOS, closures. */
  --red-500:#D9303A;
  --red-400:#F0646A;

  --surface-base:var(--paper-25);
  --surface-raised:var(--paper-0);
  --surface-sunken:var(--paper-50);
  --surface-card:var(--paper-0);
  --surface-sheet:rgba(255,255,255,.98);
  --surface-overlay:rgba(22,22,34,.40);
  --surface-pressed:var(--paper-50);
  --surface-inverse:var(--paper-900);

  --text-primary:var(--paper-900);
  --text-secondary:var(--paper-500);
  --text-tertiary:var(--paper-400);
  --text-on-accent:#FFFFFF;
  --text-on-inverse:var(--paper-0);
  --text-accent:var(--wander-600);

  --line-hairline:rgba(30,30,60,.07);
  --line-subtle:rgba(30,30,60,.12);
  --line-strong:rgba(30,30,60,.24);

  --accent:var(--wander-500);
  --accent-pressed:var(--wander-600);
  --accent-wash:var(--wander-50);
  --accent-wash-strong:var(--wander-100);

  --walked:var(--orange-500);
  --walked-wash:var(--orange-100);

  --tone-wander:var(--wander-500); --tone-wander-wash:var(--wander-100);
  --tone-orange:var(--orange-500); --tone-orange-wash:var(--orange-100);
  --tone-blue:var(--blue-500);     --tone-blue-wash:var(--blue-100);
  --tone-green:var(--green-500);   --tone-green-wash:var(--green-100);
  --tone-purple:var(--purple-500); --tone-purple-wash:var(--purple-100);
  --tone-pink:var(--pink-500);     --tone-pink-wash:var(--pink-100);
  --tone-yellow:var(--yellow-500); --tone-yellow-wash:var(--yellow-100);

  --lip-accent:var(--wander-700);
  --lip-neutral:var(--paper-200);

  --stamp:var(--purple-500);
  --stamp-wash:var(--purple-100);
  --safety:var(--red-500);
  --safety-wash:#FCE3E3;

  --map-land:#EEEDF4;
  --map-building:#E4E3EC;
  --map-water:#C3D8F2;
  --map-park:#CDE8CF;
  --map-street-unwalked:#FFFFFF;
  --map-street-walked:var(--orange-500);
  --map-street-route:var(--wander-500);
  --map-label:#8F8EA6;
  --map-label-halo:#EEEDF4;
  --map-you:var(--wander-500);
  --map-you-ring:#FFFFFF;
}

[data-theme="dark"]{
  --surface-base:var(--ink-050);
  --surface-raised:var(--ink-100);
  --surface-sunken:var(--ink-200);
  --surface-card:var(--ink-100);
  --surface-sheet:rgba(27,27,38,.98);
  --surface-overlay:rgba(0,0,0,.56);
  --surface-pressed:var(--ink-200);
  --surface-inverse:var(--ink-900);

  --text-primary:var(--ink-900);
  --text-secondary:var(--ink-600);
  --text-tertiary:var(--ink-500);
  --text-on-accent:#FFFFFF;
  --text-on-inverse:var(--ink-050);
  --text-accent:#A3ADF0;

  --line-hairline:rgba(220,220,255,.06);
  --line-subtle:rgba(220,220,255,.10);
  --line-strong:rgba(220,220,255,.22);

  --accent:#6E7DDB;
  --accent-pressed:#5868C8;
  --accent-wash:rgba(110,125,219,.14);
  --accent-wash-strong:rgba(110,125,219,.24);

  --walked:#EE7A56;
  --walked-wash:rgba(238,122,86,.18);

  --tone-wander:#8C98E6; --tone-wander-wash:rgba(110,125,219,.22);
  --tone-orange:#EE7A56; --tone-orange-wash:rgba(238,122,86,.18);
  --tone-blue:#6BB0E6;   --tone-blue-wash:rgba(59,148,217,.20);
  --tone-green:#5DC293;  --tone-green-wash:rgba(58,168,116,.20);
  --tone-purple:#AE8CE6; --tone-purple-wash:rgba(148,103,216,.22);
  --tone-pink:#F49A91;   --tone-pink-wash:rgba(238,122,112,.20);
  --tone-yellow:#F3C55C; --tone-yellow-wash:rgba(239,180,58,.20);

  --lip-accent:#3A4596;
  --lip-neutral:var(--ink-000);

  --stamp:#AE8CE6;
  --stamp-wash:rgba(148,103,216,.22);
  --safety:var(--red-400);
  --safety-wash:rgba(240,100,106,.16);

  --map-land:#17171F;
  --map-building:#1E1E28;
  --map-water:#172438;
  --map-park:#16251D;
  --map-street-unwalked:#2E2E3B;
  --map-street-walked:#EE7A56;
  --map-street-route:#8C98E6;
  --map-label:#6E6D85;
  --map-label-halo:#17171F;
  --map-you:#8C98E6;
  --map-you-ring:#FFFFFF;
}

/* Type system:
   Fredoka 600–700 — titles, section headers, numbers, buttons, chips, tabs, tags (rounded, friendly)
   SF Pro — body and chrome. Sizes follow iOS Dynamic Type "Large". */
:root{
  --font-display:"Fredoka","SF Pro Rounded",ui-rounded,-apple-system,system-ui,sans-serif;
  --font-numeral:var(--font-display);
  --font-body:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro","Helvetica Neue",system-ui,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,monospace;

  /* Display (Fredoka) — rounded, slightly tight */
  --display-hero-size:96px;  --display-hero-lh:88px;  --display-hero-tracking:-0.03em;
  --display-xl-size:64px;    --display-xl-lh:62px;    --display-xl-tracking:-0.025em;
  --display-l-size:40px;     --display-l-lh:44px;     --display-l-tracking:-0.02em;
  --display-m-size:30px;     --display-m-lh:34px;     --display-m-tracking:-0.015em;
  --display-s-size:22px;     --display-s-lh:26px;     --display-s-tracking:-0.01em;
  --display-xs-size:18px;    --display-xs-lh:22px;    --display-xs-tracking:0;
  --display-weight:700;
  --display-weight-title:600;

  /* iOS text styles (SF Pro) */
  --ios-large-title-size:34px; --ios-large-title-lh:41px;
  --ios-title1-size:28px;      --ios-title1-lh:34px;
  --ios-title2-size:22px;      --ios-title2-lh:28px;
  --ios-title3-size:20px;      --ios-title3-lh:25px;
  --ios-headline-size:17px;    --ios-headline-lh:22px;
  --ios-body-size:17px;        --ios-body-lh:22px;
  --ios-callout-size:16px;     --ios-callout-lh:21px;
  --ios-subhead-size:15px;     --ios-subhead-lh:20px;
  --ios-footnote-size:13px;    --ios-footnote-lh:18px;
  --ios-caption1-size:12px;    --ios-caption1-lh:16px;
  --ios-caption2-size:11px;    --ios-caption2-lh:13px;

  /* Stat label — sentence case, grey, sits above or below a number */
  --label-size:13px; --label-lh:16px; --label-tracking:0; --label-weight:500;

  --text-heading-family:var(--font-display);
  --text-number-family:var(--font-numeral);
  --text-body-family:var(--font-body);
}

:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-7:32px;
  --space-8:40px;
  --space-9:56px;
  --space-10:72px;

  --margin-screen:20px;     /* horizontal page margin */
  --gap-section:32px;       /* between content sections */
  --hit-target:44px;        /* iOS minimum */
  --tabbar-height:83px;     /* incl. home indicator */
  --safe-top:59px;          /* status bar + dynamic island */
  --safe-bottom:34px;
}

:root{
  --radius-xs:8px;
  --radius-s:12px;     /* icon tiles, small tiles */
  --radius-m:20px;     /* cards, list groups */
  --radius-l:26px;     /* hero cards, route + journal cards, sheets */
  --radius-xl:36px;    /* device-edge sheets */
  --radius-pill:999px; /* buttons, chips, segmented */

  --border-hairline:1px solid var(--line-hairline);
  --border-subtle:1px solid var(--line-subtle);

  /* Game-like "lip": a crisp darker bottom edge instead of a blurry drop shadow.
     Cards sit on a 3px lip; buttons on a 4px lip that collapses when pressed. */
  --lip-card:0 3px 0;/* @kind other */
  --lip-button:0 4px 0;/* @kind other */
  --shadow-card:0 0 0 1.5px var(--line-hairline),0 3px 0 var(--line-subtle);
  --shadow-float:0 0 0 1.5px var(--line-hairline),0 3px 0 var(--line-subtle),0 10px 24px rgba(40,34,26,.10);
  --shadow-sheet:0 -1px 0 var(--line-hairline),0 -10px 32px rgba(40,34,26,.10);
  --shadow-accent:0 4px 0 var(--lip-accent);
  --blur-chrome:saturate(140%) blur(20px);/* @kind other */
}
[data-theme="dark"]{
  --shadow-card:0 0 0 1.5px rgba(255,240,220,.05),0 3px 0 rgba(0,0,0,.45);
  --shadow-float:0 0 0 1.5px rgba(255,240,220,.06),0 3px 0 rgba(0,0,0,.5),0 12px 28px rgba(0,0,0,.40);
  --shadow-sheet:0 -8px 40px rgba(0,0,0,.45);
}

:root{
  --ease-standard:cubic-bezier(.32,.72,0,1); /* @kind other */
  --ease-out:cubic-bezier(.2,.8,.2,1); /* @kind other */
  --ease-ink:cubic-bezier(.45,0,.2,1); /* @kind other */
  --dur-fast:160ms; /* @kind other */
  --dur-base:280ms; /* @kind other */
  --dur-slow:480ms; /* @kind other */
  --dur-ink:1200ms; /* @kind other */
  --press-scale:.97; /* @kind other */
  --press-opacity:.6; /* @kind other */
}
/* iOS sheet-like easing; ink easing draws walked streets along their length. */
@media (prefers-reduced-motion:reduce){
  :root{
    --dur-fast:0ms; /* @kind other */
    --dur-base:0ms; /* @kind other */
    --dur-slow:0ms; /* @kind other */
    --dur-ink:0ms; /* @kind other */
  }
}

/* untrod.app/streets: walk-every-street pages (MKT-28). Design: "Walk Every Street" (Ru's claude.ai/design
   project, web/design-src/Walk Every Street.dc.html), frames t1–t8. The design-system tokens are prepended
   at build time (build_pages.py), so every var() here is a DS token. */
*{box-sizing:border-box}
body{margin:0;background:var(--paper-25);color:var(--text-primary);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{color:var(--wander-600);text-decoration:none}
.disp{font-family:var(--font-display)}
.wrap{max-width:1440px;margin:0 auto;padding:0 120px}
.ember{color:#E4532A}
.ico{display:inline-flex;flex:none;line-height:0}
.ico svg{width:100%;height:100%}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* header: the site's top nav. Bar height, wordmark and link type come inline from the home page's
   design source (build_pages.site_header_style); this only lays them out and colours the links the
   way the home page does (a: --text-accent, hover --accent-pressed + underline). */
.site-top{justify-content:space-between;gap:16px}
.site-mark,.site-mark:hover{text-decoration:none;color:var(--text-primary)}
.site-top nav{display:flex;align-items:center;gap:28px}
.site-top nav a:not(.btn){color:var(--text-accent)}
.site-top nav a:not(.btn):hover{color:var(--accent-pressed);}
.site-top nav a[aria-current]{color:var(--text-primary)}
.mark{font:700 28px/1 var(--font-display);letter-spacing:-0.02em;color:var(--text-primary)}
.foot{margin-top:112px;border-top:1px solid var(--line-hairline)}
.foot .wrap{padding-top:28px;padding-bottom:36px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.foot .mark{font-size:20px}
.foot small{font:400 13px/18px var(--font-body);color:var(--paper-500)}
.foot small a{text-decoration:underline}
.foot nav{display:flex;gap:18px;font:400 13px/18px var(--font-body);color:var(--paper-500)}

/* street map (StreetMap): three paths, strokes in output pixels */
.smap{display:block;width:100%;height:100%}
img.smap{object-fit:cover;object-position:50% 50%}
.smap path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.smap .rv{stroke:#C9DCF3;vector-effect:none}
.smap .pa{stroke:#DCDBE7;stroke-width:calc(var(--mw,.9px) * .6)}
.smap .mi{stroke:#ABAAC0;stroke-width:calc(var(--mw,.9px) * var(--k,1))}
.smap .ma{stroke:#8584A0;stroke-width:var(--Mw,1.6px)}
.smap .wk{stroke:#E4532A;stroke-width:var(--ww,2.4px)}
.fade-hero{-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 62%,transparent 100%)}
.fade-soft{-webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 100%);mask-image:radial-gradient(closest-side,#000 72%,transparent 100%)}
.fade-edges{-webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 10%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(transparent,#000 10%,#000 90%,transparent);mask-composite:intersect}
.fade-left{-webkit-mask-image:linear-gradient(to right,transparent,#000 38%);mask-image:linear-gradient(to right,transparent,#000 38%)}
.fade-bottom{-webkit-mask-image:linear-gradient(to top,transparent,#000 32%);mask-image:linear-gradient(to top,transparent,#000 32%)}

/* App Store badge (stand-in, as in the design) and buttons */
.badge{display:inline-flex;flex-direction:column;justify-content:center;height:54px;padding:0 20px 0 22px;background:#000;color:#fff;border-radius:11px;box-shadow:0 0 0 1px #A6A6A6 inset}
.badge:hover{color:#fff}
.badge span:first-child{font:500 11px/1 var(--font-body);letter-spacing:.02em}
.badge span:last-child{font:600 23px/1.05 var(--font-body);letter-spacing:-0.02em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:56px;padding:0 28px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;font:600 17px var(--font-display);letter-spacing:-0.01em;transition:transform 90ms var(--ease-out),box-shadow 90ms var(--ease-out)}
.btn:active{transform:translateY(4px);box-shadow:none!important}
.btn.md{height:46px;padding:0 20px;font-size:16px}
.btn.sm{height:36px;padding:0 16px;font-size:14px}
.btn-primary.sm{box-shadow:0 3px 0 var(--lip-accent)}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 4px 0 var(--lip-accent)}
.btn-primary:hover{color:#fff}
.btn-secondary{background:var(--accent-wash-strong);color:var(--text-accent);box-shadow:0 4px 0 color-mix(in oklch,var(--accent) 35%,transparent)}
.btn .ico{width:18px;height:18px}
.card{background:#fff;border-radius:var(--radius-m);box-shadow:var(--shadow-card)}
.card-l{background:#fff;border-radius:var(--radius-l);box-shadow:var(--shadow-card)}
.circ{display:inline-flex;align-items:center;justify-content:center;flex:none;border-radius:999px}
.t-blue{background:var(--tone-blue-wash);color:var(--tone-blue)}
.t-green{background:var(--tone-green-wash);color:var(--tone-green)}
.t-purple{background:var(--tone-purple-wash);color:var(--tone-purple)}
.t-pink{background:var(--tone-pink-wash);color:var(--tone-pink)}
.t-yellow{background:var(--tone-yellow-wash);color:var(--tone-yellow)}
.t-orange{background:var(--tone-orange-wash);color:var(--tone-orange)}
.seg{position:relative;display:flex;height:44px;padding:4px;border-radius:999px;background:var(--surface-sunken)}
.seg button{position:relative;z-index:1;flex:1;border:0;background:transparent;cursor:pointer;font:800 14px var(--font-display);letter-spacing:-0.01em;color:var(--text-secondary);border-radius:999px}
.seg button[aria-selected=true]{color:var(--text-primary);background:var(--surface-raised);box-shadow:inset 0 0 0 1.5px var(--line-hairline),0 2px 0 var(--line-subtle)}

/* city page: hero */
.hero{padding-top:24px;display:grid;grid-template-columns:minmax(0,1fr) 640px;gap:64px;align-items:center}
.crumbs{font:500 15px var(--font-body);color:var(--paper-500);display:flex;gap:8px}
.hero h1{margin:20px 0 0;font:600 44px/50px var(--font-display);letter-spacing:-0.015em;max-width:560px;text-wrap:balance}
.atleast{margin-top:44px;font:600 32px/1 var(--font-display);color:var(--paper-500)}
.days{display:flex;align-items:baseline;gap:18px;margin-top:6px;color:#E4532A;white-space:nowrap}
.days b{font:700 220px/0.86 var(--font-display);letter-spacing:-0.045em}
.days span{font:700 80px/1 var(--font-display);letter-spacing:-0.02em}
.days.n5 b{font-size:150px}.days.n5 span{font-size:60px}
.days.n6 b{font-size:128px}.days.n6 span{font-size:52px}
.pace-line{margin-top:22px;font:400 22px/30px var(--font-body);color:var(--paper-600);display:flex;gap:12px;flex-wrap:wrap}
.pace-line i{font-style:normal;color:var(--paper-300)}
.cta{margin-top:56px;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.cta div{font:600 24px/28px var(--font-display)}
/* The map is the hero (Ru 2026-10-28): it fills a box wider than its column, bleeding into the page
   margin, and fades out toward the edges and corners instead of letterboxing. */
.hero-l{position:relative;z-index:1}
.heromap{position:relative;z-index:0;width:calc(100% + 200px);height:820px;margin:-40px -120px -40px -80px;--mw:.9px;--Mw:1.6px;--ww:2.4px}
.heromap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.intro{padding-top:88px}
.intro p{margin:0;max-width:1000px;font:400 26px/38px var(--font-body);color:var(--paper-700);text-wrap:pretty}
/* the stats strip: one card, cells split by 1px dividers (the card's own colour showing through the gap) */
.stats{margin-top:44px;max-width:1000px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:1px;background:var(--paper-100);overflow:hidden}
.stat{display:flex;flex-direction:column;gap:10px;padding:24px 28px;background:#fff}
.stat b{font:600 38px/1 var(--font-display);letter-spacing:-0.015em;color:var(--paper-800);font-variant-numeric:tabular-nums}
.stat .lbl{display:flex;align-items:flex-start;gap:8px;font:500 15px/20px var(--font-body);color:var(--paper-500)}
.stat .lbl .ico{width:18px;height:18px;margin-top:1px}
.tone-green{color:var(--tone-green)}.tone-blue{color:var(--tone-blue)}.tone-purple{color:var(--tone-purple)}.tone-yellow{color:var(--tone-yellow)}
.stat .lbl>span{display:inline-flex;flex:none}
.intro h2{margin:0 0 20px}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
.rel{display:flex;flex-direction:column;gap:6px;padding:20px 24px;text-decoration:none;color:var(--paper-900)}
.rel b{font:600 20px var(--font-display)}
.rel span{font:400 15px var(--font-body);color:var(--paper-500)}
@media (max-width:720px){.rel-grid{grid-template-columns:1fr 1fr}}
.intro p.scope{margin:16px 0 28px;font:500 15px/22px var(--font-body);color:var(--paper-500);max-width:820px}
.intro p.lede{margin:28px 0 0;font:400 19px/28px var(--font-body);max-width:820px}
.intro p.note{margin:28px 0 0;font:400 15px/22px var(--font-body);color:var(--paper-500);max-width:640px}

/* sections */
.sec{padding-top:112px}
.sec h2{margin:0;font:600 36px/40px var(--font-display);letter-spacing:-0.015em}
.sec .sub{margin:10px 0 0;font:400 19px/27px var(--font-body);color:var(--paper-600)}
.small-grid{margin-top:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.small{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius-l);box-shadow:var(--shadow-card);padding:10px}
.small .pic{position:relative;aspect-ratio:16/11;border-radius:18px;overflow:hidden;background:var(--paper-25);--mw:.6px;--Mw:1.5px}
.small .pic .smap{position:absolute;inset:0}
.small .pic .mi{stroke:#C4C3D5}.small .pic .ma{stroke:#E4532A}
.small .txt{padding:18px 12px 12px;display:flex;flex-direction:column;gap:8px}
.small .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.small .nm{font:600 24px/28px var(--font-display)}
.small .dd{color:#E4532A;white-space:nowrap}
.small .dd b{font:700 34px/1 var(--font-display);letter-spacing:-0.02em}
.small .dd span{font:700 18px/1 var(--font-display)}
.small .why{font:400 16px/23px var(--font-body);color:var(--paper-600)}
.small .meta{font:500 14px/18px var(--font-body);color:var(--paper-500)}
.after{margin-top:32px}

.pace{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:80px;align-items:start}
.pace-big{margin-top:40px;display:flex;align-items:baseline;gap:14px;color:#E4532A}
.pace-big b{font:700 120px/0.86 var(--font-display);letter-spacing:-0.045em}
.pace-big span{font:700 44px/1 var(--font-display)}
.pace-at{margin-top:14px;font:400 19px/26px var(--font-body);color:var(--paper-600)}
.slider{margin-top:32px;max-width:520px;--p:28.57%}
.slider .track{position:relative;height:44px}
.slider .track>div{position:absolute;top:16px;height:12px;border-radius:999px;pointer-events:none}
.slider .rail{left:0;right:0;background:var(--paper-100)}
.slider .fill{left:0;width:var(--p);background:var(--wander-500);box-shadow:inset 0 -3px 0 var(--wander-700)}
.slider .thumb{position:absolute;top:6px!important;width:32px;height:32px!important;margin-left:-16px;border-radius:999px!important;background:#fff;box-shadow:0 0 0 1.5px var(--line-subtle),0 3px 0 var(--line-strong);left:var(--p)}
.slider input{position:absolute;inset:0;width:100%;height:44px;margin:0;opacity:0;cursor:grab;touch-action:none;z-index:2}
.slider input:active{cursor:grabbing}
.slider .ends{display:flex;justify-content:space-between;font:500 14px var(--font-body);color:var(--paper-500);margin-top:4px}
.slider input:focus-visible+.thumb,.slider:focus-within .thumb{box-shadow:0 0 0 1.5px var(--line-subtle),0 3px 0 var(--line-strong),0 0 0 5px var(--wander-200)}
.pace-rows{padding:4px 24px;margin-top:8px}
.pace-rows>div{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:76px;border-bottom:1px solid var(--line-hairline)}
.pace-rows>div:last-child{border-bottom:0}
.pace-rows .l{display:flex;flex-direction:column;gap:2px}
.pace-rows .l b{font:600 20px/24px var(--font-display)}
.pace-rows .l span{font:400 14px/18px var(--font-body);color:var(--paper-500)}
.pace-rows .v{white-space:nowrap}
.pace-rows .v b{font:700 30px/1 var(--font-display);letter-spacing:-0.02em}
.pace-rows .v span{font:600 17px/1 var(--font-display);color:var(--paper-600)}

.facts{margin-top:32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.fact{padding:24px;display:flex;flex-direction:column;gap:8px}
.fact span{font:500 15px var(--font-body);color:var(--paper-500)}
.fact b{font:600 26px/30px var(--font-display);overflow-wrap:anywhere}
.fact p{margin:0;font:400 16px/22px var(--font-body);color:var(--paper-600)}
.mix{margin-top:24px;padding:24px 28px 28px}
.mix>span{font:500 15px var(--font-body);color:var(--paper-500)}
.bar{margin-top:16px;display:flex;gap:4px;height:20px}
.bar div{border-radius:4px}
.bar div:first-child{border-radius:999px 4px 4px 999px}
.bar div:last-child{border-radius:4px 999px 999px 4px}
.bar div:only-child{border-radius:999px}
.c-blue{background:var(--blue-500);box-shadow:inset 0 -3px 0 var(--blue-600)}
.c-green{background:var(--green-500);box-shadow:inset 0 -3px 0 var(--green-600)}
.c-yellow{background:var(--yellow-500);box-shadow:inset 0 -3px 0 var(--yellow-600)}
.c-grey{background:var(--paper-300);box-shadow:inset 0 -3px 0 var(--paper-400)}
.legend{margin-top:18px;display:flex;gap:16px 40px;flex-wrap:wrap}
.legend div{display:flex;align-items:center;gap:10px}
.legend i{width:12px;height:12px;border-radius:999px;box-shadow:none}
.legend b{font:600 18px var(--font-display)}
.legend span{font:400 15px var(--font-body);color:var(--paper-500)}

.marks{margin-top:32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px;align-items:center}
.kinds{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.kinds>div{display:flex;align-items:center;gap:14px}
.kinds .circ{width:48px;height:48px}.kinds .circ .ico{width:23px;height:23px}
.kinds b{display:block;font:700 36px/1 var(--font-display);letter-spacing:-0.02em}
.kinds span span{font:500 16px var(--font-body);color:var(--paper-500)}
.stamps{padding:32px 24px 28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.stamps>div{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.stamp{position:relative;width:104px;height:104px;transform:rotate(-8deg);filter:drop-shadow(0 6px 10px rgba(18,21,27,.16))}
.stamp svg{position:absolute;inset:0;width:100%;height:100%}
.stamp .ico{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;color:#fff}
.stamps b{font:600 18px/22px var(--font-display);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;hyphens:auto}
.stamps span{font:400 14px/20px var(--font-body);color:var(--paper-600)}

.persp{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:40px 64px}
.persp>div{display:flex;align-items:center;gap:20px}
.persp .circ{width:56px;height:56px}.persp .circ .ico{width:27px;height:27px}
.persp span{font:600 28px/34px var(--font-display);text-wrap:balance}
.persp a{color:var(--wander-600);text-decoration:underline;text-underline-offset:4px}

.tbl{margin-top:28px;padding:4px 28px 8px}
.tbl .hd,.tbl .tr{display:grid;grid-template-columns:minmax(0,1fr) 200px 160px;gap:16px;align-items:center}
.tbl .hd{border-bottom:1px solid var(--line-subtle)}
.tbl .hd button{all:unset;cursor:pointer;display:flex;align-items:center;gap:6px;height:52px;font:600 15px var(--font-body);color:var(--paper-600)}
.tbl .hd button:focus-visible{outline:2px solid var(--wander-500);outline-offset:2px;border-radius:6px}
.tbl .hd button+button{justify-content:flex-end}
.tbl .hd .ico{width:16px;height:16px;display:none}
.tbl .hd [data-dir="1"] .up,.tbl .hd [data-dir="-1"] .down{display:inline-flex}
.tbl .tr{min-height:52px;border-bottom:1px solid var(--line-hairline)}
.tbl .tr:last-of-type{border-bottom:0}
.tbl .tr span:nth-child(1){font:500 17px var(--font-body)}
.tbl .tr span:nth-child(2){font:400 17px var(--font-body);color:var(--paper-600);text-align:right;font-variant-numeric:tabular-nums}
.tbl .tr span:nth-child(3){font:600 19px var(--font-display);text-align:right}
.more{all:unset;cursor:pointer;display:none;align-items:center;min-height:52px;font:600 16px var(--font-display);color:var(--wander-600)}

.parts h2{font-size:30px;line-height:34px}
.parts .sub{font-size:17px;line-height:24px;color:var(--paper-500)}
.pgrid{margin-top:28px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px}
.pgrid a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:15px 0;border-bottom:1px solid var(--line-subtle)}
.pgrid a span:first-child{font:500 16px/21px var(--font-body)}
.pgrid a span:last-child{font:600 17px/21px var(--font-display);white-space:nowrap}
.parent-link{margin:16px 0 0;font:500 16px var(--font-body);color:var(--paper-600)}
.parent-link a{color:var(--wander-600);text-decoration:underline;text-underline-offset:3px}

.faq{display:grid;grid-template-columns:360px minmax(0,1fr);gap:64px;align-items:start}
.qa{padding:0 28px}
.qa details{border-bottom:1px solid var(--line-hairline)}
.qa details:last-child{border-bottom:0}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:68px;font:600 20px/26px var(--font-display)}
.qa summary::-webkit-details-marker{display:none}
.qa summary .ico{width:22px;height:22px;color:var(--paper-500);transition:transform 200ms var(--ease-standard)}
.qa details[open] summary .ico{transform:rotate(180deg)}
.qa p{margin:0;padding:0 40px 24px 0;font:400 17px/26px var(--font-body);color:var(--paper-600);text-wrap:pretty}
.qa p a{text-decoration:underline}

.embed{padding:40px;display:grid;grid-template-columns:minmax(0,1fr) 480px;gap:56px;align-items:center}
.embed>div:first-child{display:flex;flex-direction:column;align-items:flex-start}
.embed h2{font-size:30px;line-height:34px}
.embed p{margin:10px 0 0;font:400 17px/25px var(--font-body);color:var(--paper-600)}
.embed .seg{width:220px;margin-top:24px}
.embed code{display:block;margin-top:20px;width:100%;background:var(--paper-50);border-radius:12px;padding:16px 18px;font:400 13px/20px var(--font-mono);color:var(--paper-700);white-space:pre-wrap;word-break:break-all}
.embed .btn{margin-top:16px}
.stage{height:300px;border-radius:20px;display:flex;align-items:center;justify-content:center;background:var(--paper-25);box-shadow:inset 0 0 0 1px var(--line-hairline);overflow:hidden}
.stage.dark{background:#0B0B0F}

/* embed card (EmbedCard, 400 × 220) */
.ecard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 156px;width:400px;height:220px;flex:none;border-radius:22px;background:#fff;color:#161622;box-shadow:inset 0 0 0 1.5px rgba(30,30,60,.10),0 3px 0 rgba(30,30,60,.14);overflow:hidden;text-align:left}
.ecard:hover{color:#161622}
.ecard .l{display:flex;flex-direction:column;padding:20px 0 18px 22px;min-width:0}
.ecard .nm{font:600 21px/25px var(--font-display);letter-spacing:-0.01em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ecard .nm.long{font-size:16px;line-height:20px}
.ecard .n{margin-top:auto;display:flex;align-items:baseline;gap:8px;color:#E4532A;white-space:nowrap}
.ecard .n b{font:700 68px/0.86 var(--font-display);letter-spacing:-0.045em}
.ecard .n.n4 b{font-size:60px}.ecard .n.n5 b{font-size:54px}
.ecard .n span{font:700 24px/1 var(--font-display)}
.ecard .to{margin-top:6px;font:500 14px/18px var(--font-body);color:#525168}
.ecard .wm{margin-top:12px;font:700 16px/1 var(--font-display);letter-spacing:-0.02em}
.ecard .m{position:relative;--mw:.5px;--Mw:.9px;--ww:1.4px}
.ecard .m .smap{position:absolute;inset:0}
.ecard.dark{background:#1B1B26;color:#F3F3F9;box-shadow:inset 0 0 0 1.5px rgba(220,220,255,.10),0 3px 0 rgba(0,0,0,.5)}
.ecard.dark:hover{color:#F3F3F9}
.ecard.dark .n{color:#EE7A56}
.ecard.dark .to{color:#8D8DA3}
.ecard.dark .rv{stroke:#1F2B40}.ecard.dark .pa{stroke:#26263A}.ecard.dark .mi{stroke:#3E3E56}.ecard.dark .ma{stroke:#424258}.ecard.dark .wk{stroke:#EE7A56}

/* index: see the "index (Streets Index)" block at the end */

/* ranking */
.rk h1{margin:0;font:600 56px/60px var(--font-display);letter-spacing:-0.02em;max-width:900px;text-wrap:balance}
.rk>p{margin:24px 0 0;max-width:800px;font:400 21px/31px var(--font-body);color:var(--paper-700);text-wrap:pretty}
.filters{margin-top:40px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.filters .seg{width:240px}
.sel{position:relative;display:flex;align-items:center}
.sel select{appearance:none;-webkit-appearance:none;height:44px;padding:0 44px 0 18px;border:0;border-radius:999px;background:#fff;box-shadow:var(--shadow-card);font:600 16px var(--font-display);color:var(--text-primary);cursor:pointer}
.sel .ico{position:absolute;right:16px;width:18px;height:18px;pointer-events:none;color:var(--paper-500)}
.filters .cnt{font:500 15px var(--font-body);color:var(--paper-500)}
.rsearch{position:relative;display:flex;align-items:center}
.rsearch .ico{position:absolute;left:16px;width:18px;height:18px;color:var(--paper-500);pointer-events:none}
.rsearch input{width:240px;height:44px;padding:0 18px 0 44px;border:0;border-radius:999px;background:#fff;box-shadow:var(--shadow-card);font:500 16px var(--font-body);color:var(--text-primary);outline:none}
.rsearch input:focus{box-shadow:0 0 0 2px var(--wander-500)}
.rsearch input::placeholder{color:var(--paper-500)}
.filters .csv{margin-left:auto;font:600 15px var(--font-display);color:var(--wander-600);display:inline-flex;align-items:center;gap:6px}
.filters .csv .ico{width:16px;height:16px}
.rtbl{margin-top:20px;padding:4px 28px 8px}
.rtbl .hd,.rtbl a{display:grid;grid-template-columns:72px minmax(0,1fr) 260px 180px 140px;gap:16px;align-items:center}
.rtbl .hd{height:52px;border-bottom:1px solid var(--line-subtle);font:600 15px var(--font-body);color:var(--paper-600)}
.rtbl .hd span:nth-child(n+4),.rtbl a span:nth-child(n+4){text-align:right}
.rtbl a{min-height:56px;border-bottom:1px solid var(--line-hairline)}
.rtbl a:last-child{border-bottom:0}
.rtbl a[hidden]{display:none}
.rtbl .r{font:600 18px var(--font-display);color:var(--paper-500);font-variant-numeric:tabular-nums}
.rtbl .c{font:600 19px var(--font-display)}
.rtbl .c small{display:none}
.rtbl .k{font:400 16px var(--font-body);color:var(--paper-600);font-variant-numeric:tabular-nums}
.rtbl .d{font:600 19px var(--font-display)}
.rtbl .d small{display:none}

/* narrower desktops */
@media (max-width:1300px){
  .wrap{padding-left:56px;padding-right:56px}
  .hero{grid-template-columns:minmax(0,1fr) 520px;gap:40px}
  .heromap{height:700px;margin:-30px -56px -30px 0;width:calc(100% + 56px)}
  .days b{font-size:180px}.days.n5 b{font-size:124px}.days.n5 span{font-size:52px}
  .pace{grid-template-columns:minmax(0,1fr) 440px;gap:48px}
  .embed{grid-template-columns:1fr}
  .rtbl .hd,.rtbl a{grid-template-columns:56px minmax(0,1fr) 200px 140px 110px}
}
@media (max-width:1100px){
  .hero{grid-template-columns:minmax(0,1fr) 400px;gap:24px}
  .heromap{height:600px}
  .days b{font-size:150px}.days span{font-size:60px}.days.n5 b{font-size:104px}.days.n5 span{font-size:44px}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr}
  .heromap{width:calc(100% + 112px);margin:16px -56px 0;height:min(80vw,640px)}
}
@media (max-width:1000px){
  .stats{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat:last-child:nth-child(odd){grid-column:1/-1}
  .small-grid,.facts{grid-template-columns:1fr}
  .pace,.marks,.faq{grid-template-columns:1fr;gap:32px}
  .persp{grid-template-columns:1fr}
}

/* phone (frames 6b, 1b, 2b, 3b, 7b) */
@media (max-width:700px){
  .wrap{padding-left:20px;padding-right:20px}
  .site-top nav{gap:16px}
  .site-top nav a.dt{display:none}
  .mark{font-size:22px}
  .hero{padding-top:4px;gap:0}
  .crumbs{display:none}
  .hero h1{margin:0;font-size:28px;line-height:32px}
  .atleast{margin-top:18px;font-size:20px}
  .days{gap:10px;margin-top:2px}
  .days b{font-size:112px}.days span{font-size:44px}
  .days.n5 b{font-size:84px}.days.n5 span{font-size:34px}
  .days.n6 b{font-size:72px}.days.n6 span{font-size:30px}
  .pace-line{margin-top:10px;font-size:16px;line-height:22px;gap:8px}
  .hero-l{display:contents}
  .hero-head{order:1}
  .heromap{order:2;width:calc(100% + 40px);margin:0 -20px;max-width:none;height:400px;--mw:.55px;--Mw:1px;--ww:1.7px}
  .cta{order:3;margin:8px 0 0;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  .cta div{font-size:18px;line-height:22px;max-width:150px}
  .badge{height:50px;padding:0 18px 0 20px;border-radius:10px}
  .badge span:first-child{font-size:10px}.badge span:last-child{font-size:21px}
  .intro{padding-top:64px}
  .intro p{font-size:19px;line-height:28px}
  .stats{margin-top:28px}
  .stat{gap:8px;padding:18px 18px}
  .stat b{font-size:29px}
  .stat .lbl{font-size:14px;line-height:18px;gap:6px}
  .stat .lbl .ico{width:16px;height:16px}
  .intro p.note{font-size:14px;line-height:20px}
  .intro p.scope{font-size:14px;line-height:20px}
  .intro p.lede{font-size:16px;line-height:24px}
  .sec{padding-top:64px}
  .sec h2{font-size:26px;line-height:30px;letter-spacing:-0.01em}
  .sec .sub{margin-top:8px;font-size:16px;line-height:23px}
  .small-grid{margin-top:20px;gap:12px}
  .small{display:grid;grid-template-columns:104px minmax(0,1fr);gap:14px;align-items:center;padding:8px;border-radius:var(--radius-m)}
  .small .pic{width:104px;height:104px;aspect-ratio:auto;border-radius:14px;--mw:.4px;--Mw:1px}
  .small .txt{padding:0 8px 0 0;gap:4px}
  .small .nm{font-size:19px;line-height:23px}
  .small .dd b{font-size:26px}.small .dd span{font-size:15px}
  .small .why{font-size:14px;line-height:19px}
  .small .meta{display:none}
  .after{margin-top:20px}.after .btn{width:100%}
  .pace-big{margin-top:24px;gap:10px}.pace-big b{font-size:80px}.pace-big span{font-size:32px}
  .pace-at{margin-top:10px;font-size:16px;line-height:22px}
  .slider{margin-top:18px}
  .slider .ends{font-size:13px;margin-top:2px}
  .pace-rows{padding:0 16px;margin-top:20px}
  .pace-rows>div{min-height:64px;gap:12px}
  .pace-rows .l b{font-size:17px;line-height:21px}.pace-rows .l span{font-size:13px;line-height:17px}
  .pace-rows .v b{font-size:24px}.pace-rows .v span{font-size:15px}
  .facts{margin-top:20px;gap:12px}
  .fact{padding:18px;gap:4px}.fact span{font-size:14px}.fact b{font-size:22px;line-height:26px}.fact p{font-size:15px;line-height:21px}
  .mix{margin-top:12px;padding:18px}
  .mix>span{font-size:14px}
  .bar{margin-top:12px;gap:3px;height:16px}
  .legend{margin-top:14px;flex-direction:column;gap:8px}
  .legend i{width:10px;height:10px}
  .legend b{font-size:16px;flex:1}.legend span{font-size:14px}
  .marks{margin-top:20px;gap:20px}
  .kinds{gap:18px 12px}.kinds>div{gap:10px}
  .kinds .circ{width:40px;height:40px}.kinds .circ .ico{width:19px;height:19px}
  .kinds b{font-size:26px}.kinds span span{font-size:14px}
  .stamps{padding:24px 8px 20px;gap:4px}
  .stamp{width:80px;height:80px}
  .stamp .ico{width:26px;height:26px;margin:-13px 0 0 -13px}
  .stamps b{font-size:15px;line-height:19px}
  .stamps span{display:none}
  .persp{margin-top:22px;gap:22px}
  .persp>div{gap:14px}
  .persp .circ{width:44px;height:44px}.persp .circ .ico{width:21px;height:21px}
  .persp span{font-size:20px;line-height:25px}
  .tbl{margin-top:20px;padding:0 16px}
  .tbl .hd,.tbl .tr{grid-template-columns:minmax(0,1fr) 64px 64px;gap:8px}
  .tbl .hd button{height:48px;font-size:14px;gap:4px}
  .tbl .hd .ico{width:14px;height:14px}
  .tbl .tr{min-height:48px}
  .tbl .tr:last-of-type{border-bottom:1px solid var(--line-hairline)}
  .tbl .tr span:nth-child(1){font-size:15px;line-height:19px}
  .tbl .tr span:nth-child(2){font-size:15px}
  .tbl .tr span:nth-child(3){font-size:17px}
  .js .tbl.clip .tr:nth-of-type(n+11),.js .pgrid.clip a:nth-child(n+9){display:none}
  .js .more{display:flex}
  .tbl .hd .km-long{display:none}
  .parts h2{font-size:24px;line-height:28px}
  .parts .sub{font-size:15px;line-height:21px}
  .pgrid{margin-top:20px;grid-template-columns:1fr;background:#fff;border-radius:var(--radius-m);box-shadow:var(--shadow-card);padding:0 16px}
  .pgrid a{padding:0;min-height:52px;align-items:center;border-bottom-color:var(--line-hairline)}
  .pgrid .more{border-top:0}
  .qa{padding:0 16px}
  .qa summary{min-height:60px;padding:10px 0;gap:12px;font-size:17px;line-height:22px}
  .qa summary .ico{width:20px;height:20px}
  .qa p{padding:0 0 18px;font-size:15px;line-height:22px}
  .embed{padding:22px 16px 20px;gap:0;display:flex;flex-direction:column;align-items:stretch}
  .embed h2{font-size:22px;line-height:26px}
  .embed p{font-size:15px;line-height:21px;margin-top:8px}
  .embed>div:first-child{display:contents}
  .embed .seg{order:4;width:100%;margin-top:16px}
  .embed code{display:none}
  .embed .btn{order:5;width:100%;margin-top:14px;height:56px;font-size:17px}
  .stage{order:3;margin-top:16px;height:220px;border-radius:16px}
  .stage .ecard{zoom:.8}
  .foot{margin-top:56px}
  .foot .wrap{flex-direction:column;align-items:flex-start;gap:8px;padding-top:20px;padding-bottom:32px}
  .foot .mark{font-size:18px}
  .rk{padding-top:12px}
  .rk h1{font-size:30px;line-height:34px;letter-spacing:-0.015em}
  .rk>p{margin-top:14px;font-size:17px;line-height:25px}
  .filters{margin-top:24px;flex-direction:column;align-items:stretch;gap:12px}
  .filters .seg{width:100%}
  .sel select{width:100%;height:48px}
  .filters .csv{margin-left:0}
  .rsearch input{width:100%}
  .rtbl{margin-top:16px;padding:0 16px}
  .rtbl .hd{display:none}
  .rtbl a{grid-template-columns:32px minmax(0,1fr) auto;gap:10px;min-height:64px;padding:8px 0}
  .rtbl a span:nth-child(3),.rtbl a span:nth-child(4){display:none}
  .rtbl .r{font-size:17px}
  .rtbl .c{display:flex;flex-direction:column;gap:2px;font-size:18px;line-height:22px;min-width:0}
  .rtbl .c small{display:block;font:400 14px/18px var(--font-body);color:var(--paper-500)}
  .rtbl .d{font-size:20px;white-space:nowrap}
  .rtbl .d small{display:inline;font:600 14px var(--font-display);color:var(--paper-500)}
}

/* index (Streets Index): Ru's claude.ai/design file "Streets Index.dc.html", transcribed in
   web/design-src/Streets Index.spec.md. Desktop 1440 first, phone (390) in the media query below. */
.t-wander{background:var(--tone-wander-wash);color:var(--tone-wander)}
.circ.c44{width:44px;height:44px}.circ.c44 .ico{width:21px;height:21px}
.circ.c52{width:52px;height:52px}.circ.c52 .ico{width:25px;height:25px}
.ix{padding-top:80px;display:flex;flex-direction:column;align-items:center;text-align:center}
.ix h1{margin:0;font:600 64px/68px var(--font-display);letter-spacing:-0.025em;max-width:980px;text-wrap:balance}
.ix-lede{margin:24px 0 0;max-width:720px;font:400 22px/31px var(--font-body);color:var(--paper-600);text-wrap:pretty}
.search{position:relative;width:760px;max-width:100%;margin-top:44px;text-align:left}
.sbox{height:80px;background:#fff;border-radius:var(--radius-m);box-shadow:0 0 0 1.5px var(--line-subtle),0 4px 0 var(--line-subtle);display:flex;align-items:center;gap:16px;padding:0 20px 0 28px;cursor:text}
.sbox:focus-within,.sbox.has{box-shadow:0 0 0 2.5px var(--wander-500),0 4px 0 var(--wander-700)}
.sbox>.ico{width:28px;height:28px;color:#6E6D85}
.sbox input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:500 28px/1 var(--font-display);color:var(--text-primary);caret-color:var(--wander-500);-webkit-appearance:none;appearance:none}
.sbox input::placeholder{color:var(--paper-400)}
.sbox input::-webkit-search-cancel-button{display:none}
.sclear{flex:none;width:44px;height:44px;border:0;border-radius:999px;background:transparent;color:var(--paper-500);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.sclear:hover{background:var(--paper-50)}
.sclear[hidden]{display:none}
.sclear .ico{width:22px;height:22px}
.results{position:absolute;left:0;right:0;top:96px;z-index:5;background:#fff;border-radius:var(--radius-m);box-shadow:var(--shadow-float);padding:8px;margin:0;list-style:none}
.results[hidden]{display:none}
.results a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-radius:14px}
.results a[aria-selected=true],.results a:hover{background:var(--paper-50);color:inherit}
.results .nm{display:flex;flex-direction:column;gap:2px;min-width:0}
.results .nm span:first-child{font:400 21px/26px var(--font-body)}
.results .nm b{font-weight:650}
.results .nm span:last-child{font:400 15px/20px var(--font-body);color:var(--paper-500)}
.results .d{font:600 22px/1 var(--font-display);white-space:nowrap}
.results .d small{font-size:17px;font-weight:600;color:var(--paper-500)}
.nf{position:absolute;left:0;right:0;top:96px;z-index:5;background:#fff;border-radius:var(--radius-m);box-shadow:var(--shadow-float);padding:28px 28px 30px}
.nf[hidden],.nf [hidden]{display:none!important}
.nf-ask,.nf-done{display:flex;gap:20px;align-items:flex-start}
.nf-body{flex:1;min-width:0}
.nf h2{margin:0;font:600 26px/30px var(--font-display);letter-spacing:-0.01em}
.nf p{margin:6px 0 0;font:400 18px/26px var(--font-body);color:var(--paper-600)}
.nf form{margin-top:18px;display:flex;gap:12px}
.nf input{flex:1;min-width:0;height:50px;border:0;border-radius:999px;background:var(--paper-25);box-shadow:inset 0 0 0 1.5px var(--line-subtle);padding:0 20px;font:400 17px var(--font-body);color:var(--text-primary);outline:0}
.nf input:focus{box-shadow:inset 0 0 0 2px var(--wander-500)}
.nf input::placeholder{color:var(--paper-400)}
.nf .btn{height:50px}
.nf .nf-err{margin-top:10px;font:500 15px/20px var(--font-body);color:var(--red-500)}
.nf .nf-err:empty{display:none}
.ix-count{margin:28px 0 0;font:400 16px/22px var(--font-body);color:var(--paper-500)}
.ix-h2{margin:0;font:600 36px/40px var(--font-display);letter-spacing:-0.015em}
.ix-sub{margin:10px 0 0;font:400 19px/27px var(--font-body);color:var(--paper-600)}
.ix-known{padding-top:104px}
.kn{margin-top:28px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.kcard{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius-l);box-shadow:var(--shadow-card);padding:10px}
.kcard:hover{color:inherit}
.kcard .pic{position:relative;aspect-ratio:1;border-radius:18px;overflow:hidden;background:var(--paper-25)}
.kcard .pic .smap{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.kcard .txt{padding:18px 12px 12px;display:flex;flex-direction:column}
.kcard .nm{font:600 24px/28px var(--font-display);letter-spacing:-0.01em}
.kcard:hover .nm{color:var(--wander-600)}
.kcard .co{font:400 15px/20px var(--font-body);color:var(--paper-500)}
.kcard .dd{margin-top:14px;color:#E4532A;white-space:nowrap}
.kcard .dd b{font:700 52px/0.9 var(--font-display);letter-spacing:-0.035em}
.kcard .dd span{font:700 22px/1 var(--font-display)}
.ix-facts{padding-top:96px}
.ixf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ixf>div{padding:36px 40px;display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.ixf>div+div{border-left:1px solid var(--line-hairline)}
.ixf .lbl{margin-top:18px;font:500 17px/22px var(--font-body);color:var(--paper-500)}
.ixf .v{margin-top:12px;color:#E4532A;white-space:nowrap}
.ixf .v b{font:700 72px/0.9 var(--font-display);letter-spacing:-0.04em}
.ixf .v span{font:700 30px/1 var(--font-display)}
.ixf .who{margin-top:14px;font:600 20px/26px var(--font-display);color:var(--wander-600)}
.ixf .who:hover{}
.ixf .txt{display:contents}
.ix-all{padding-top:112px}
.ixa-bar{margin-top:32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.chips{display:none;flex-wrap:wrap;gap:8px}
.js .chips{display:flex}
.chip{display:inline-flex;align-items:center;height:40px;min-width:40px;justify-content:center;padding:0 16px;margin-bottom:3px;border-radius:999px;border:0;cursor:pointer;white-space:nowrap;flex:none;font:800 15px/1 var(--font-display);letter-spacing:-0.01em;background:var(--surface-raised);color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--line-subtle),0 3px 0 var(--line-subtle);transition:all var(--dur-fast) var(--ease-out)}
.chip[aria-pressed=true]{background:var(--accent-wash);color:var(--text-accent);box-shadow:inset 0 0 0 2px var(--accent),0 3px 0 color-mix(in oklch,var(--accent) 45%,transparent)}
.xall{flex:none;border:0;background:none;padding:8px 0;cursor:pointer;font:600 17px/1 var(--font-display);color:var(--wander-600)}
.xall:hover{}
.xall[hidden]{display:none}
.cols{margin-top:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 48px;align-items:start}
.col{border-top:1px solid var(--line-subtle);min-width:0}
.grp{border-bottom:1px solid var(--line-hairline)}
.grp[hidden]{display:none}
.grp summary{list-style:none;cursor:pointer;min-height:60px;display:flex;align-items:center;gap:12px}
.grp summary::-webkit-details-marker{display:none}
.grp summary .cn{flex:1;min-width:0;font:600 20px/24px var(--font-display)}
.grp summary .ct{font:400 15px/20px var(--font-body);color:var(--paper-500);white-space:nowrap}
.grp summary .ico{width:20px;height:20px;color:var(--paper-500);transition:transform var(--dur-fast) var(--ease-out)}
.grp[open] summary .ico{transform:rotate(180deg)}
.grp summary:hover .cn{color:var(--wander-600)}
.grp .rows{padding:0 0 14px}
.grp .rows a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;font:400 16px/22px var(--font-body)}
.grp .rows a small{font:inherit;color:var(--paper-500)}
.grp .rows .dd{white-space:nowrap}
.grp .rows .dd b{font:600 17px/1 var(--font-display);font-variant-numeric:tabular-nums}
.grp .rows .dd span{font:400 14px/1 var(--font-body);color:var(--paper-500)}
.ix-rank{padding-top:48px}
.rcard{display:flex;align-items:center;gap:16px;padding:20px 24px;background:#fff;border-radius:var(--radius-m);box-shadow:var(--shadow-card);font:600 20px/26px var(--font-display)}
.rcard:hover{color:var(--wander-600)}
.rcard .lt{flex:1;min-width:0}
.rcard>.ico{width:24px;height:24px;color:var(--wander-600)}
.ix-band{padding-top:112px}
.band{position:relative;overflow:hidden;background:var(--orange-500);border-radius:28px;box-shadow:0 4px 0 color-mix(in oklch,var(--orange-500) 70%,black);padding:56px 64px;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:center;color:#fff}
.band-map{position:absolute;top:0;right:0;bottom:0;width:70%;pointer-events:none;opacity:.5;-webkit-mask-image:linear-gradient(to right,transparent,#000 60%);mask-image:linear-gradient(to right,transparent,#000 60%)}
.band-map img{width:100%;height:100%;object-fit:cover;filter:brightness(0) invert(1)}
.band-t{position:relative;display:flex;flex-direction:column;align-items:flex-start}
.band h2{margin:0;font:600 52px/56px var(--font-display);letter-spacing:-0.02em;color:#fff}
.band p{margin:16px 0 0;font:500 24px/32px var(--font-body);color:#fff;max-width:620px}
.btn-inverse{background:var(--surface-inverse);color:var(--text-on-inverse);box-shadow:0 4px 0 #000}
.btn-inverse:hover{color:var(--text-on-inverse)}
.band .btn{margin-top:32px}
.band-art{position:relative;justify-self:center;width:260px;height:260px;border-radius:999px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center}
.band-art .ms{position:relative;height:240px;width:168px;display:flex;align-items:flex-end;justify-content:center}
.band-art .ms::before{content:"";position:absolute;left:18%;right:18%;bottom:-5px;height:14px;border-radius:50%;background:rgba(0,0,0,.14)}
.band-art img{position:relative;height:100%;width:auto}
@media (max-width:1300px){
  .ix h1{font-size:56px;line-height:60px}
  .ixf>div{padding:32px 28px}
  .ixf .v b{font-size:60px}
  .kcard .dd b{font-size:44px}
}
@media (max-width:1000px){
  .kn{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .band{grid-template-columns:1fr}
  .band-art{display:none}
}
@media (max-width:700px){
  .ix{padding-top:28px;align-items:stretch;text-align:left}
  .ix h1{font-size:34px;line-height:38px;letter-spacing:-0.02em;max-width:none}
  .ix-lede{margin-top:16px;font-size:17px;line-height:25px}
  .search{margin-top:24px}
  .sbox{height:60px;border-radius:18px;gap:12px;padding:0 8px 0 18px}
  .sbox>.ico{width:22px;height:22px}
  .sbox input{font-size:21px}
  .sclear{width:40px;height:40px}
  .results,.nf{top:74px;border-radius:18px}
  .results{padding:6px}
  .results a{min-height:60px;padding:8px 14px;border-radius:12px;gap:12px}
  .results .nm span:first-child{font-size:18px;line-height:22px}
  .results .nm span:last-child{font-size:14px;line-height:18px}
  .results .d{font-size:18px}.results .d small{font-size:14px}
  .nf{padding:20px 18px 22px}
  .nf-ask,.nf-done{flex-direction:column;gap:14px}
  .nf h2{font-size:22px;line-height:26px}
  .nf p{font-size:16px;line-height:23px}
  .nf form{flex-direction:column;gap:10px}
  .nf input{flex:none;width:100%}
  .nf .btn{width:100%}
  .ix-count{margin-top:20px;font-size:14px;line-height:20px}
  .ix-h2{font-size:24px;line-height:28px}
  .ix-sub{margin-top:8px;font-size:16px;line-height:23px}
  .ix-known{padding-top:56px}
  .kn{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:16px -20px 0;padding:0 20px 8px;scroll-padding:0 20px;scrollbar-width:none}
  .kn::-webkit-scrollbar{display:none}
  .kcard{flex:none;width:248px;scroll-snap-align:start}
  .kcard .dd b{font-size:42px}.kcard .dd span{font-size:19px}
  .ix-facts{padding-top:56px}
  .ixf{grid-template-columns:1fr}
  .ixf>div{flex-direction:row;align-items:center;gap:14px;padding:18px 18px}
  .ixf>div+div{border-left:0;border-top:1px solid var(--line-hairline)}
  .ixf .circ.c44{width:40px;height:40px}.ixf .circ.c44 .ico{width:19px;height:19px}
  .ixf .txt{display:flex;flex-direction:column;flex:1;min-width:0}
  .ixf .lbl{margin:0;font-size:14px;line-height:18px}
  .ixf .who{margin-top:2px;font-size:17px;line-height:22px}
  .ixf .v{order:3;margin:0}
  .ixf .v b{font-size:44px}.ixf .v span{font-size:19px}
  .ix-all{padding-top:64px}
  .ixa-bar{margin-top:20px;flex-direction:column;align-items:stretch;gap:12px}
  .chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -20px;padding:0 20px 4px;scrollbar-width:none}
  .chips::-webkit-scrollbar{display:none}
  .xall{align-self:flex-start}
  .cols{display:block;margin-top:16px;border-top:1px solid var(--line-subtle)}
  .col{display:contents}
  .grp summary{min-height:56px}
  .grp summary .cn{font-size:18px;line-height:22px}
  .grp .rows a{min-height:44px;align-items:center;padding:4px 0}
  .ix-rank{padding-top:32px}
  .rcard{padding:16px;font-size:17px;line-height:22px;gap:14px}
  .rcard .circ.c44{width:40px;height:40px}
  .ix-band{padding-top:64px}
  .band{grid-template-columns:1fr;padding:28px 22px 26px;gap:18px;border-radius:24px}
  .band-art{display:flex;order:-1;width:160px;height:160px}
  .band-art .ms{height:140px;width:98px}
  .band-map{width:100%;-webkit-mask-image:linear-gradient(to bottom,transparent,#000 70%);mask-image:linear-gradient(to bottom,transparent,#000 70%)}
  .band h2{font-size:32px;line-height:36px;letter-spacing:-0.015em}
  .band p{margin-top:10px;font-size:18px;line-height:25px}
  .band .btn{margin-top:22px;width:100%}
}