/* Citiwise: pages around the tool. Same tokens as the tool, one reading column.
   Same proportion as the tool: Fibonacci spacing (8 13 21 34 55 89), type in root-phi steps from 15. */
:root{
  --bg:#FFFFFF;--surface:#FFFFFF;--ink:#111111;--ink-2:#4F4F4C;--ink-3:#6B6B67;--line:#DDDCD9;--line-2:#F1F0EE;--accent:#2F5BEA;--ok:#2F7A4B;
  --f-ui:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-num:"Hanken Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0B0C0D;--surface:#131415;--ink:#EDEDEC;--ink-2:#B4B4B1;--ink-3:#8E8E8B;--line:#242526;--line-2:#1A1B1C;--accent:#7391FF;--ok:#6CC08E;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0B0C0D;--surface:#131415;--ink:#EDEDEC;--ink-2:#B4B4B1;--ink-3:#8E8E8B;--line:#242526;--line-2:#1A1B1C;--accent:#7391FF;--ok:#6CC08E;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--f-ui);-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:34px 34px 89px}
@media (max-width:600px){.wrap{padding-inline:21px}}
a{color:inherit;text-decoration-color:var(--ink-3);text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
header.site{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap}
header.site a.home{font:500 19px/1 var(--f-ui);letter-spacing:-.015em;text-decoration:none;line-height:0}
img.logo{height:20px;width:auto;display:block}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) img.logo{filter:invert(1)}}
:root[data-theme="dark"] img.logo{filter:invert(1)}
header.site nav{display:flex;gap:21px;flex-wrap:wrap;font-size:15px;color:var(--ink-2)}
header.site nav a{text-decoration:none}
@media (max-width:560px){header.site nav a[href="/changelog"]:not([aria-current]){display:none}}
header.site nav a:hover,header.site nav a[aria-current]{color:var(--ink)}
article{max-width:38em;margin-top:89px}
article h1{font:500 clamp(31px,4vw,39px)/1.2 var(--f-ui);letter-spacing:-.025em;margin:0 0 13px;text-wrap:balance}
article .sub{color:var(--ink-3);font:400 16px/1.6 var(--f-ui);margin:0 0 55px}
article h2{font:500 19px/1.3 var(--f-ui);letter-spacing:-.005em;color:var(--ink);margin:55px 0 13px}
article p,article li{color:var(--ink-2)}
article p b,article li b,article strong{color:var(--ink);font-weight:500}
article ul,article ol{padding-left:1.1em}
article li{margin:5px 0}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums}
code,pre,kbd{font-family:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace}
code{font-size:.86em;background:var(--line-2);padding:1px 5px;border-radius:0;color:var(--ink)}
pre{font-size:13px;line-height:1.6;background:var(--surface);border:1px solid var(--line);border-radius:0;padding:14px 16px;overflow-x:auto;color:var(--ink);margin:12px 0}
pre code{background:none;padding:0;font-size:inherit}
.url{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-radius:0;padding:12px 14px;margin:16px 0}
.url code{background:none;padding:0;font-size:15px;flex:1;min-width:0;overflow-wrap:anywhere}
button.copy{font:500 14px var(--f-ui);border:1px solid var(--line);background:none;color:var(--ink-2);border-radius:0;padding:5px 12px;cursor:pointer}
button.copy:hover{color:var(--ink);border-color:var(--ink-3)}
table{border-collapse:collapse;width:100%;font-size:15px;margin:12px 0}
th,td{text-align:left;padding:8px 14px 8px 0;vertical-align:baseline}
thead th{border-bottom:1px solid var(--line)}
th{font-weight:400;color:var(--ink-3);font-size:14px}
td{color:var(--ink-2)}
td.n{font-family:var(--f-num);text-align:right;color:var(--ink);white-space:nowrap}
.log dt{font:500 13px var(--f-ui);color:var(--ink-3);margin-top:34px}
.log dd{margin:6px 0 0;color:var(--ink-2)}
details{padding:10px 0}
details summary{cursor:pointer;color:var(--ink);font-weight:500}
footer.site{max-width:1120px;margin:89px auto 0;padding:21px 34px 55px;font-size:14px;color:var(--ink-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer.site nav{display:flex;gap:16px;flex-wrap:wrap}
footer.site a{text-decoration:none}
footer.site a:hover{color:var(--ink)}
pre.say{white-space:pre-wrap}

/* Town pages (tools/build_towns.py): wider column for tables, tables scroll inside their own box on a phone. */
article.town{max-width:52em}
article.town h3{font:500 15px/1.6 var(--f-ui);color:var(--ink);margin:34px 0 5px}
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:12px 0}
.tw table{margin:0;min-width:560px}
.tw th,.tw td.n,.tw td:first-child,.tw td:last-child{white-space:nowrap}
.tw td{min-width:7em}
.tw td:last-child a{color:var(--ink-3)}
.tw td:last-child a:hover{color:var(--ink)}
article .note{font-size:14px;color:var(--ink-3)}
ul.towns,ul.near{list-style:none;padding:0;columns:3 11em;column-gap:24px}
ul.towns li,ul.near li{margin:2px 0;break-inside:avoid}
ul.towns a,ul.near a{text-decoration:none}
ul.towns a:hover,ul.near a:hover{text-decoration:underline}

.sq{color:var(--ink-3);font-size:13px;font-family:var(--f-ui)}