/* TG core.css: tokens, base, shell (header + side nav), sections, shared components.
   Loaded on every page. Rebuilt from the TownTapestry app.css rules the town page actually uses (2026-10-08). */
:root{--bg:#fff; --surface:#f6f7f9; --line:#e6e8ec; --hair:#eff1f4;
  --ink:#0f1623; --ink-2:#2e3746; --muted:#5a6372; --faint:#949cab;
  --accent:#0e9f57; --accent-ink:#0b7f45; --accent-tint:#eafaf1; --accent-soft:#7fe0ad;
  --gA:#15803d; --gB:#4d7c0f; --gC:#b45309; --gD:#c2410c; --gF:#b91c1c;
  --good:#15803d; --bad:#b91c1c; --bar:#cfd4dc; --night:#121a26;
  --r:12px; --r-lg:16px; --hdr:64px; --nav:248px; --page:1192px;
  --sans:'Geist',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* grade badge tiers (.badge): diameter and letter size; phone values in the 640px block */
  --gb-big:84px; --gb-big-f:38px; --gb-lg:52px; --gb-lg-f:24px; --gb-md:40px; --gb-md-f:18px;
  --gb-sm:28px; --gb-sm-f:13px; --gb-xs:24px; --gb-xs-f:11.5px; --gb-sup:.72em; --gb-ring:3px; --gb-halo:#fff; --round:50%;}
*{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
img{display:block;max-width:100%}
h1, h2, h3, h4{margin:0}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 12px;border-radius:8px;z-index:99}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--paper,#fff);font-weight:600;font-size:14px;white-space:nowrap}
.btn:hover{border-color:#cdd2da}
.btn-accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
.btn-bad{background:var(--bad);border-color:var(--bad);color:#fff}
.btn-bad:hover{background:#991b1b;border-color:#991b1b}
.btn-glass{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.35);color:#fff;backdrop-filter:blur(8px)}
.btn-glass:hover{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.5)}
.btn-sm{height:32px;padding:0 12px;font-size:13px}
.link{color:var(--accent-ink);font-weight:600}
.link:hover{text-decoration:underline}
.hd{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);height:var(--hdr);display:flex;align-items:center;padding:0 20px 0 0}
.logo{width:var(--nav);padding-left:20px;display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.02em;white-space:nowrap;flex:none}
.logo .mk{width:30px;height:30px;border-radius:8px;background:var(--accent);display:grid;place-items:center;color:#fff;flex:none}
.logo .mk svg{width:16px;height:16px}
.logo em{font-style:normal;color:var(--accent)}
.menu-btn{display:none;border:0;background:none;padding:8px;margin-left:8px;border-radius:8px}
.hd-search{flex:1;max-width:440px;position:relative;margin-left:4px}
.hd-search input{width:100%;height:40px;border:1px solid var(--line);border-radius:10px;padding:0 12px 0 38px;font:inherit;font-size:14.5px;background:var(--surface);color:var(--ink)}
.hd-search input:focus{outline:none;border-color:var(--accent);background:#fff}
.hd-search .ic{position:absolute;left:12px;top:11px;color:var(--faint)}
.hd-results{position:absolute;left:0;right:0;top:46px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px rgba(15,22,35,.12);padding:6px;display:none;z-index:40}
.hd-results.open{display:block}
.hd-results a{display:flex;justify-content:space-between;gap:10px;padding:9px 10px;border-radius:8px;font-size:14px}
.hd-results a:hover, .hd-results a.on{background:var(--surface)}
.hd-results small{color:var(--muted)}
.hd-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.hd-nav{display:flex;align-items:center;gap:2px;margin-right:10px;flex:none}
.hd-nav a{position:relative;display:flex;align-items:center;gap:7px;height:38px;padding:0 11px;border-radius:9px;font-weight:600;font-size:14.5px;color:var(--ink);white-space:nowrap}
.hd-nav a:hover{background:var(--surface)}
.hd-nav .ic{color:var(--accent)}
.hd-nav a.on{background:var(--surface)}
.hd-guest{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px 0 4px;border-radius:999px;border:1px solid var(--line);background:#fff;white-space:nowrap}
.hd-guest:hover{background:var(--surface)}
.hd-gava{position:relative;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1.5px dashed #b9c2cb;color:#8d98a5;flex:none}
.hd-gava i{position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;border-radius:50%;background:var(--accent);color:#fff;font:800 11px/12px system-ui,sans-serif;font-style:normal;text-align:center;border:2px solid #fff}
.hd-gl{font-size:13.5px;font-weight:500;color:var(--muted)}
.hd-gl b{font-weight:700;color:var(--ink)}
@media (max-width:1240px){
  .hd-nav-ex{display:none!important}
}
/* A header with the language pill (French pages): the French labels and "S'inscrire" need Explore's room up to 1308px */
@media (max-width:1320px){
  .hd:has(.hd-right > a.ed-btn) .hd-nav-ex{display:none!important}
}
@media (max-width:1100px){
  .hd-nav-cmp{display:none!important}
  .hd-gl{display:none}
  .hd-guest{padding:0 4px}
}
@media (max-width:900px){
  .hd-nav{display:none}
  .hd .hd-search{margin:0 auto}
  .hd .hd-right{margin-left:0}
}
@media (max-width:760px){
  .hd .hd-search{display:none}
  .hd .hd-right{margin-left:auto}
}
@media (max-width:640px){
  :root{--gb-big:64px;--gb-big-f:29px;--gb-lg:44px;--gb-lg-f:20px}   /* grade badge tiers on a phone */
  .hd-guest{height:40px}
}
.shell{display:grid;grid-template-columns:var(--nav) minmax(0,1fr);max-width:1480px}
.nav{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));overflow-y:auto;border-right:1px solid var(--line);padding:16px 12px 24px;scrollbar-width:thin;display:flex;flex-direction:column;gap:2px;background:#fff}
.nav > *{flex-shrink:0}
.nav-town{display:flex;gap:10px;align-items:center;padding:6px 8px 14px;margin-bottom:6px;border-bottom:1px solid var(--hair)}
.nav-town .th{width:40px;height:40px;border-radius:10px;object-fit:cover;background:var(--accent-tint);flex:none;display:grid;place-items:center;color:var(--accent);font-weight:800}
.nav-town b{display:block;font-size:15px;letter-spacing:-.01em;line-height:1.25}
.nav-town span{font-size:12.5px;color:var(--accent-ink);font-weight:600}
.nav-save-w{margin:0 6px 8px}
.nav-save{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font:inherit;font-size:13px;font-weight:700;color:var(--ink-2);cursor:pointer}
.nav-save:hover{background:var(--surface)}
.nav-save .ic{width:15px;height:15px}
.nav-save.on{background:var(--accent-tint);border-color:var(--accent-tint);color:var(--accent-ink)}
.nav-save.on .ic{fill:currentColor}
.nav-grp{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);padding:14px 10px 6px}
.nav-a{display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:8px;font-size:14.5px;color:var(--ink-2);font-weight:500}
.nav-a:hover{background:var(--surface)}
.nav-a.on{background:var(--accent-tint);color:var(--accent-ink);font-weight:600}
.nav-a .ic{color:var(--faint)}
.nav-a.on .ic{color:var(--accent)}
.nav-a .meta{margin-left:auto;font-size:12px;color:var(--faint);font-weight:500;white-space:nowrap;max-width:84px;overflow:hidden;text-overflow:ellipsis}
.nav-toc{display:flex;flex-direction:column;border-left:2px solid var(--hair);margin:2px 0 4px 18px}
.nav-toc a{font-size:13.5px;color:var(--muted);padding:5px 12px;margin-left:-2px;border-left:2px solid transparent}
.nav-toc a:hover{color:var(--ink)}
.nav-toc a.on{color:var(--ink);border-left-color:var(--accent);font-weight:600}
.nav-post{margin:16px 6px 0;height:40px}
.nav-foot{font-size:12px;color:var(--faint);padding:16px 10px 0;display:flex;gap:10px;flex-wrap:wrap}
.nav-foot a:hover{color:var(--ink)}
.scrim{display:none}
.page{min-width:0;padding:24px 32px 64px;max-width:var(--page)}
.sec{scroll-margin-top:calc(var(--hdr) + 20px)}
.up{color:var(--good)}
.down{color:var(--bad)}
.sh{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:44px 0 16px}
.sh h2{font-size:26px;letter-spacing:-.03em;font-weight:700}
.sh p{margin:4px 0 0;color:var(--muted);font-size:14.5px}
.sh > a{font-size:14px;font-weight:600;color:var(--accent-ink);white-space:nowrap}
.why{font-size:12.5px;color:var(--faint);display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.kick{font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-ink)}
.tok{font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1;white-space:nowrap}
.tok small{font-size:14px;color:var(--faint);font-weight:600}
/* The one grade mark (components.php grade_badge, docs/build/grade-badges.md, Jamie 10/29): a fixed circle whose size
   is set by its tier, never by the grade ("A", "A+" and "B−" match). Tiers: big (subject heroes), lg (the Overall grade),
   none (cards), sm (lists, tables, sub-grades), xs (inside a sentence or a labelled chip). gn: not graded, an outlined
   circle with a muted dash. +/− raised and smaller, a true minus (tg_grade_text). */
.badge{--gc:var(--faint);--gb-d:var(--gb-md);--gb-f:var(--gb-md-f);display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--gb-d);height:var(--gb-d);aspect-ratio:1;border-radius:var(--round);background:var(--gc);color:#fff;font-weight:800;font-size:var(--gb-f);line-height:1;letter-spacing:-.03em;white-space:nowrap;vertical-align:middle;box-shadow:0 0 0 max(var(--gb-ring),.12em) color-mix(in srgb,var(--gc) 13%,var(--gb-halo))}   /* a light halo, on white and on the dark heroes */
.badge.big{--gb-d:var(--gb-big);--gb-f:var(--gb-big-f)}
.badge.lg{--gb-d:var(--gb-lg);--gb-f:var(--gb-lg-f)}
.badge.sm{--gb-d:var(--gb-sm);--gb-f:var(--gb-sm-f)}
.badge.xs{--gb-d:var(--gb-xs);--gb-f:var(--gb-xs-f);box-shadow:none}
.badge.sm:not(.gn),.badge.xs:not(.gn){color:#fff;font-size:var(--gb-f)}   /* beats TownTapestry's .tbl .sm gray text */
.badge.ga{--gc:var(--gA)}
.badge.gb{--gc:var(--gB)}
.badge.gc{--gc:var(--gC)}
.badge.gd{--gc:var(--gD)}
.badge.gf{--gc:var(--gF)}
.badge.gn{background:var(--bg);color:var(--muted);font-weight:700;box-shadow:inset 0 0 0 1.5px var(--faint)}
.badge sup{font-size:var(--gb-sup);line-height:1;margin-left:.04em;letter-spacing:0}
/* grade pill (components.php grade_pill): the round mark + a label on a tint of the grade colour; .lg = the Overall pill;
   .solo = the mark alone (a ranking list's grade column), its tint drawn as the mark's ring */
.gp{--gc:var(--faint);display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:999px;background:color-mix(in srgb,var(--gc) 11%,#fff);color:var(--gc);font-size:12.5px;font-weight:700;line-height:1.2;white-space:nowrap}
.gp-a{--gc:var(--gA)}.gp-b{--gc:var(--gB)}.gp-c{--gc:var(--gC)}.gp-d{--gc:var(--gD)}.gp-f{--gc:var(--gF)}
.gp.lg{gap:10px;padding:4px 16px 4px 4px;white-space:normal}
.gp.solo{padding:0;background:none;vertical-align:middle}
.gp-t{display:flex;flex-direction:column;font-size:13px}
.gp-s{font-size:11.5px;font-weight:500;color:var(--ink-2)}
.chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:6px;font-size:12.5px;font-weight:600;background:var(--surface);color:var(--muted)}
.chips,.vl-tags,.gps{display:flex;flex-wrap:wrap;gap:6px}
.card{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--paper,#fff);min-width:0}
.card h3{font-size:15px;font-weight:700}
.card .ch{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;gap:8px}
.card .ch a{font-size:13px;color:var(--accent-ink);font-weight:600;white-space:nowrap}
.composer{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:8px 8px 8px 12px;margin-bottom:6px;width:100%;background:#fff;text-align:left}
.composer:hover{border-color:#c9ced7}
.composer .av .ic{width:14px;height:14px}
.linkbtn{border:0;background:none;padding:0;color:var(--accent-ink);font-weight:600;font-size:inherit}
.linkbtn:hover{text-decoration:underline}
.composer span.ph{flex:1;color:var(--faint);font-size:14.5px}
.av{width:28px;height:28px;border-radius:50%;background:var(--accent-tint);color:var(--accent-ink);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
.post{padding:14px 0;border-top:1px solid var(--hair);display:block}
.post .who{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted)}
.post .who b{color:var(--ink)}
.post h4{margin:6px 0 2px;font-size:15.5px;letter-spacing:-.01em}
.post p{margin:0;color:var(--muted);font-size:14px}
.post:hover h4{color:var(--accent-ink)}
.list{list-style:none;margin:0;padding:0}
.list li{padding:9px 0;border-top:1px solid var(--hair);font-size:14px}
.list li:first-child{border-top:0;padding-top:0}
.list .m{font-size:12.5px;color:var(--muted);margin-top:2px}
.list b{font-weight:600}
.list a:hover b{color:var(--accent-ink)}
.muted{color:var(--muted);font-size:13px}
.empty{color:var(--muted);font-size:14px;margin:0}
.empty a{color:var(--accent-ink);font-weight:600}
.cmp{display:flex;flex-direction:column;gap:18px;min-width:0}
.cmp h4, .scv h4, .panel-h{font-size:13px;font-weight:600;margin:0 0 8px}
.cmp h4 span{color:var(--faint);font-weight:400}
.brow{display:grid;grid-template-columns:110px minmax(0,1fr) 60px;gap:10px;align-items:center;min-height:26px}
.brow .l{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brow .trk{height:10px;position:relative}
.brow .fill{position:absolute;left:0;top:0;bottom:0;border-radius:0 4px 4px 0;background:var(--bar);min-width:3px}
.brow.me .l{color:var(--ink);font-weight:600}
.brow.me .fill{background:var(--accent)}
.brow .v{font-size:13px;text-align:right;white-space:nowrap}
.brow.me .v{font-weight:600}
.range .fill{border-radius:4px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;align-self:start}
.stat{background:#fff;padding:14px 16px;min-width:0}
.stat .v{font-size:22px;font-weight:600;letter-spacing:-.02em}
.stat .k{font-size:12.5px;color:var(--muted);line-height:1.35;margin-top:2px}
.stat.wide{grid-column:span 2}
.better{color:var(--good);font-weight:600}
.worse{color:var(--bad);font-weight:600}
.split{display:flex;height:12px;gap:2px}
.split i{display:block;border-radius:3px}
.legend{display:flex;gap:14px;font-size:12px;color:var(--muted);flex-wrap:wrap;margin-top:8px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
/* a big figure atop a small card (Hazards' done list, Real estate's Before you buy) */
.haz-done b,.re-know .card>b{font-size:26px;letter-spacing:-.03em;color:var(--accent-ink)}
.tbl th{font-size:12px;color:var(--muted);font-weight:500;text-align:left;padding:0 0 8px;border-bottom:1px solid var(--line)}
.tbl td{padding:10px 8px 10px 0;border-bottom:1px solid var(--hair);vertical-align:middle}
.tbl .r{text-align:right;padding-right:0}
.tbl tr:last-child td{border-bottom:0}
.tbl .nm{font-weight:600}
.tbl .sm{font-size:12.5px;color:var(--muted)}
.tbl a:hover{color:var(--accent-ink)}
.tip{position:fixed;pointer-events:none;background:var(--ink);color:#fff;font-size:12.5px;padding:6px 9px;border-radius:7px;z-index:60;opacity:0;transition:opacity .1s;max-width:260px}
.sh p .link{font-size:14px}
.cdlg:not([open]){display:none}
.cdlg{border:0;padding:0;border-radius:var(--r-lg);width:min(580px,calc(100vw - 24px));max-height:calc(100vh - 40px);box-shadow:0 24px 64px rgba(15,22,35,.25);color:var(--ink)}
.cdlg::backdrop{background:rgba(15,22,35,.45)}
.cdlg form{display:flex;flex-direction:column;max-height:calc(100vh - 40px)}
/* the confirm dialog (app.js tgConfirm: every data-confirm form, instead of the browser's confirm box) */
.cfm{width:min(440px,calc(100vw - 24px));overflow:hidden}
.cfm-b{padding:22px 22px 6px}
.cfm-b h2{font-size:19px;letter-spacing:-.02em;line-height:1.3}
.cfm-b p{margin:8px 0 0;color:var(--muted);font-size:14.5px;line-height:1.55}
.cfm .cmp-f{justify-content:flex-end;border-top:0;padding-top:16px}
.cmp-h{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 8px}
.cmp-h h2{font-size:18px;letter-spacing:-.02em}
.cmp-x{border:0;background:var(--surface);width:32px;height:32px;border-radius:50%;font-size:20px;line-height:1}
.cmp-body{padding:8px 18px 4px;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.cmp-kinds{display:inline-flex;background:var(--surface);border-radius:10px;padding:3px;align-self:flex-start}
.cmp-kinds button{border:0;background:none;padding:6px 14px;border-radius:8px;font-weight:600;font-size:13.5px;color:var(--muted)}
.cmp-kinds button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(15,22,35,.12)}
.cmp-title{border:0;border-bottom:1px solid var(--line);font:inherit;font-size:18px;font-weight:600;padding:8px 0;outline:none;color:var(--ink)}
.cmp-title:focus{border-bottom-color:var(--accent)}
.cmp-text{border:0;font:inherit;font-size:15.5px;line-height:1.55;resize:vertical;min-height:110px;outline:none;padding:4px 0;color:var(--ink)}
.cmp-when{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cmp-when label, .cmp-guest label, .re-build label, .re-rb label, .rh-fair-f label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:var(--muted)}
.cmp-when small{font-weight:400;color:var(--faint)}
.cmp-when input, .cmp-guest input, .cmp-topic input{font:inherit;font-size:14px;border:1px solid var(--line);border-radius:10px;padding:9px 10px;color:var(--ink);background:#fff}
.cmp-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cmp-photo{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border:1px dashed #c9ced7;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer}
.cmp-photo:hover{border-color:var(--accent);color:var(--accent-ink)}
.cmp-photo input{position:absolute;opacity:0;width:1px;height:1px}
.cmp-photo .ic{width:16px;height:16px}
.cmp-topic{flex:1;min-width:160px}
.cmp-topic input{width:100%}
.cmp-files{display:flex;gap:8px;flex-wrap:wrap}
.cmp-files img{width:64px;height:64px;object-fit:cover;border-radius:8px}
.cmp-guest{display:flex;flex-direction:column;gap:6px}
.cmp-guest small{font-weight:400;color:var(--faint);font-size:12.5px}
.cmp-err{margin:0;color:var(--bad);font-size:13.5px;font-weight:600}
/* the private preview: "Posting is off during the preview" on the community write forms (app/lib/preview.php) */
.pv-off{margin:8px 0;padding:8px 12px;border-radius:var(--r);background:var(--accent-tint);color:var(--ink);font-size:13.5px;font-weight:600}
.cmp-f{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px 16px;border-top:1px solid var(--hair);margin-top:8px}
.cmp-f .btn{min-width:96px}
.cmp-done{padding:36px 24px 28px;text-align:center}
.cmp-done-ic{width:56px;height:56px;border-radius:50%;background:var(--accent-tint);color:var(--accent-ink);display:grid;place-items:center;font-size:26px;margin:0 auto 12px}
.cmp-done h3{font-size:20px;margin-bottom:6px}
.cmp-done p{color:var(--muted);margin:0 0 18px}
.cdlg.sent .cmp-h, .cdlg.sent .cmp-body, .cdlg.sent .cmp-f{display:none}
@media (max-width:640px){
  .cdlg{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:16px 16px 0 0;max-height:92vh}
  .cmp-when{grid-template-columns:1fr}
}
.lbx{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;width:100vw;height:100vh;margin:0;overflow:hidden}
.lbx:not([open]){display:none}
.lbx[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.lbx::backdrop{background:rgba(8,12,20,.9)}
.lbx img{max-width:94vw;max-height:84vh;object-fit:contain;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.4);cursor:zoom-out}
.lbx-cap{margin:0;color:#c4ccd8;font-size:13px;text-align:center;padding:0 16px}
.lbx-cap a{color:#fff;text-decoration:underline}
.lbx-x{position:fixed;top:16px;right:16px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;font-size:24px;line-height:1}
.lbx-x:hover{background:rgba(255,255,255,.26)}
.cmp-guest small{display:inline}
.ft{border-top:1px solid var(--line);margin-top:56px;padding-top:20px;font-size:12.5px;color:var(--faint);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ft a:hover{color:var(--ink)}
.ft-shr button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.ft-shr button:hover{color:var(--ink)}
@media (max-width:1180px) and (min-width:901px){
  :root{--nav:72px}
  .logo .wm{display:none}
  .nav{padding:12px 8px;align-items:center}
  .nav-town div, .nav-grp, .nav-toc, .nav-foot, .nav-a .lb, .nav-a .meta, .nav-post .lb{display:none}
  .nav-town{padding:4px 0 12px;justify-content:center}
  .nav-a{justify-content:center;padding:10px;width:48px}
  .nav-post{width:48px;padding:0;margin:12px 0 0}
  .nav-save-w{margin:0 0 8px}
  .nav-save{width:48px;padding:0}
  .nav-save span{display:none}
}
@media (max-width:900px){
  .menu-btn{display:inline-grid;place-items:center}
  .logo{width:auto;padding-left:4px}
  .shell{grid-template-columns:minmax(0,1fr)}
  .nav{position:fixed;left:0;top:var(--hdr);bottom:0;height:auto;width:280px;z-index:40;transform:translateX(-100%);transition:transform .2s;box-shadow:0 10px 40px rgba(0,0,0,.15)}
  body.nav-open .nav{transform:none}
  body.nav-open .scrim{display:block;position:fixed;inset:var(--hdr) 0 0 0;background:rgba(15,22,35,.35);z-index:35}
  .page{padding:16px 16px 48px}
}
@media (max-width:640px){
  .hd-search{display:none}
  .hd-right .btn:not(.btn-accent){display:none}
  .brow{grid-template-columns:84px minmax(0,1fr) 52px}
  .sh{flex-direction:column;align-items:flex-start;gap:6px}
  .sh h2{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}
:root{--lz-trail:#8a5a2b;--lz-bike:#2f74d0;--lz-hot:#d9412b}
@keyframes fpspin{to{transform:rotate(360deg)}}
@keyframes hispin{to{transform:rotate(360deg)}}
@keyframes hiin{from{opacity:0;transform:translateY(6px)}}
@keyframes ngbeat{0%,100%{transform:scale(1)}12%{transform:scale(1.07)}24%{transform:scale(1)}36%{transform:scale(1.05)}}
@keyframes pdflash{0%,40%{background:var(--accent-tint)}100%{background:transparent}}
@keyframes fdDrift{to{transform:translateX(26px)}}
@keyframes fdGlow{from{transform:scale(.92)}to{transform:scale(1.08)}}
@keyframes fdTwinkle{from{opacity:.3}to{opacity:1}}
@keyframes fdFall{from{transform:translateY(-20px)}to{transform:translateY(110px)}}
.um-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 8px 0 4px;border:1px solid transparent;border-radius:999px;background:none;font-weight:600;font-size:14px;color:var(--ink)}
.um-btn:hover, .um-btn[aria-expanded="true"]{background:var(--surface);border-color:var(--line)}
.um-pop{position:absolute;right:0;top:calc(100% + 8px);width:290px;max-width:calc(100vw - 24px);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 18px 50px rgba(15,22,35,.16),0 3px 10px rgba(15,22,35,.06);padding:8px;z-index:60}
@media (max-width:640px){
  .um-btn{padding:0;height:auto}
  .um-pop{position:fixed;top:calc(var(--hdr) + 4px);right:12px}
}
@keyframes lnspin{to{transform:rotate(360deg)}}
@keyframes xmspin{to{transform:rotate(360deg)}}
@keyframes xmin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes xmsk{to{background-position:-200% 0}}
.logo .mk:has(.wv){background:none}
.logo .mk .wv{width:30px;height:30px}
section:has(>.shr-corner){position:relative}
section:has(>.shr-corner) .kick{display:block;padding-right:88px}
.shs:not([open]){display:none}
.shs{border:0;padding:20px;border-radius:18px;width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 40px);overflow:auto;box-shadow:0 24px 64px rgba(15,22,35,.25);color:var(--ink);background:#fff}
.shs::backdrop{background:rgba(15,22,35,.45)}
/* the sheet is built by app.js on the first Share click, so a rendered-page CSS audit never sees these classes:
   keep them (TownTapestry app.css share sheet, whole) */
.shs-hd{display:flex;align-items:center;justify-content:space-between}
.shs-hd h2{font-size:17px;letter-spacing:-.01em;outline:none}
.shs-x{width:34px;height:34px;margin:-6px -8px 0 0;border:0;border-radius:50%;background:none;display:grid;place-items:center;color:var(--muted)}
.shs-x:hover{background:var(--surface);color:var(--ink)}
.shs-card{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.shs-img{width:100%;aspect-ratio:1200/630;object-fit:cover;background:var(--surface)}
.shs-meta{padding:10px 12px;font-size:12.5px;color:var(--muted)}
.shs-meta b{display:block;color:var(--ink);font-size:13.5px;line-height:1.3;margin-bottom:2px}
.shs-l{display:block;margin-top:14px;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.shs textarea{display:block;width:100%;margin-top:6px;min-height:68px;border:1px solid var(--line);border-radius:10px;padding:9px 11px;font:inherit;font-size:14px;color:var(--ink);resize:vertical}
.shs textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.shs-acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:8px;margin-top:14px}
.shs-acts button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:11px 4px 10px;border:1px solid var(--line);border-radius:12px;background:#fff;font:inherit;font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer}
.shs-acts button:hover{border-color:var(--accent);color:var(--accent-ink)}
.shs-acts .bi{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--surface);color:var(--ink-2)}
.shs-acts button:hover .bi{background:var(--accent-tint);color:var(--accent-ink)}
.shs-acts .bi .ic{width:18px;height:18px}
.shs-acts .is-main .bi,.shs-acts .is-main:hover .bi{background:var(--accent);color:#fff}
.shs-toast{margin:10px 0 0;min-height:18px;font-size:12.5px;color:var(--accent-ink);text-align:center}
@media (max-width:640px){
  .shs{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:18px 18px 0 0;padding:18px 16px 22px}
}
.brow.wh2{min-height:30px;cursor:default}
.brow.wh2 .trk{height:16px}
.brow.wh2 .fill{bottom:auto;height:7px;background:var(--accent)}
.brow.wh2 .fill.r{top:9px;background:var(--bar)}
.brow.wh2.hi .l{color:var(--ink);font-weight:600}
.brow.wh2:hover .fill{filter:brightness(.92)}
@keyframes fySpin{to{transform:rotate(360deg)}}
@keyframes fyhIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ===== TG additions ===== */
/* ===== Shared grade components (moved from town.css 10/8: used by every page) ===== */
/* ---------- grade sheet ---------- */
.gs{border-top:1px solid var(--line)}
.gs-row{display:grid;grid-template-columns:170px minmax(0,1fr) 120px 52px;align-items:center;gap:18px;padding:12px 4px;border-bottom:1px solid var(--hair);font-size:14.5px}
.gs-row:hover{background:var(--surface)}
.gs-n{font-weight:600}
.gs-d{color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-bar{position:relative;height:4px;border-radius:2px;background:var(--hair)}
.gs-bar::before{content:"";position:absolute;left:50%;top:-3px;width:1px;height:10px;background:var(--bar)}
.gs-bar i{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--ink-2);border:2px solid #fff;box-shadow:0 0 0 1px var(--ink-2)}
.gs-bar.none{background:transparent}.gs-bar.none::before{display:none}
.gs-row .badge{justify-self:end}
.gs-sub{margin:26px 0 8px;font-weight:600;font-size:14px}
.gs-sub span{font-weight:400;color:var(--muted);margin-left:8px}
.gs-fact .gs-n{font-weight:500;color:var(--ink-2)}
@media (max-width:760px){.gs-row{grid-template-columns:minmax(0,1fr) 46px;gap:4px 12px}.gs-d{grid-column:1;grid-row:2;white-space:normal;font-size:13px}.gs-bar{display:none}.gs-row .badge{grid-row:1/3;grid-column:2}}

/* ---------- neighbors grade table ---------- */
.nbg{margin-top:28px}
.nbg .panel-h{margin-bottom:10px}
.tblwrap{overflow-x:auto}
.nbg-t th.c,.nbg-t td.c{text-align:center}
.nbg-t th+th,.nbg-t td+td{padding-left:12px}   /* .tbl .r has no side padding: right-aligned figures ran into the next column's header and grade pill */
.nbg-t tr.me td{background:var(--accent-tint)}
.nbg-t tr.me td:first-child a{font-weight:700}
.nbg-t td.na{color:var(--faint)}
.nbg-t td:first-child a{font-weight:600}
.nbg-t .ngt{color:var(--faint);font-size:13px}
.nbg-note{font-size:13px;color:var(--muted);margin:10px 0 0}
.nbg-note a{color:var(--accent-ink);font-weight:600;margin-left:6px}

/* ---------- FAQ ---------- */
.tg-faq .faq-q{border-bottom:1px solid var(--hair)}
.tg-faq .faq-q:first-of-type{border-top:1px solid var(--line)}
.tg-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:15px 0;font-weight:600;font-size:16px}
.tg-faq summary::-webkit-details-marker{display:none}
.tg-faq summary::after{content:"+";color:var(--faint);font-weight:400;font-size:20px;line-height:1}
.tg-faq details[open] summary::after{content:"–"}
.tg-faq p{margin:0 0 16px;color:var(--ink-2);line-height:1.6;max-width:72ch}
/* ===== Subject-page grade blocks (docs/GRADES-ON-PAGES.md). Prefix gb-. Every subject page uses these as-is. ===== */
/* 1. The answer: kicker, finding H1, badge + context line, source line */
.gb-ans{padding:28px 0 22px;border-bottom:1px solid var(--line)}
.gb-kick{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.gb-ans h1{font-size:32px;line-height:1.15;letter-spacing:-.03em;font-weight:700;margin:8px 0 14px;max-width:24ch}
.gb-line{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.gb-ctx{font-size:15px;color:var(--ink-2)}
.gb-ctx b{color:var(--ink);font-weight:600}
.gb-ctx .sep{color:var(--faint);margin:0 6px}
.gb-src{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.gb-src a{color:var(--accent-ink);font-weight:600}
.gb-why{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--ink-2);max-width:68ch}
/* 2. What drives the grade: rows reuse .gs/.gs-row; one sentence names the strongest and weakest */
.gb-say{margin:0 0 12px;font-size:15.5px;line-height:1.6;color:var(--ink-2);max-width:70ch}
/* 3. How sure we are */
.gb-sure{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:center;margin-top:18px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.gb-range{display:flex;align-items:center;gap:8px}
.gb-range i{display:block;width:44px;height:2px;background:var(--bar);border-radius:1px}
.gb-sure p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.gb-sure p b{color:var(--ink)}
@media (max-width:640px){.gb-sure{grid-template-columns:1fr}}
/* 4. Context: one sentence each, never a second letter */
.gb-ctxl{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.gb-ctxl li{padding:2px 0 2px 14px;border-left:3px solid var(--line);font-size:15px;line-height:1.55;color:var(--ink-2)}
/* 5. A note on the data: neutral, attributed, never a warning color */
.gb-note{display:flex;gap:10px;margin-top:16px;padding:12px 14px;border-radius:10px;background:var(--surface);font-size:14px;line-height:1.55;color:var(--ink-2)}
.gb-note b{color:var(--ink);font-weight:600;white-space:nowrap}
@media (max-width:640px){.gb-ans h1{font-size:26px}}

/* ===== Shared community components (moved 10/8: every page has "Neighbors talk") ===== */
.weigh{background:var(--accent-tint);border-color:transparent}
.weigh .q{font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.3;margin:6px 0 14px}
.vbtns,.hi-when,.haz-ag{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vbtns button{height:42px;border-radius:10px;border:1px solid rgba(15,22,35,.12);background:#fff;font-weight:600}
.vbtns button[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.starters{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.starters .kick{margin-bottom:4px}
.starter{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:11px 12px;font-size:14.5px;font-weight:600;color:var(--ink-2)}
.starter:hover{border-color:var(--accent);background:var(--accent-tint)}
.starter .si{width:30px;height:30px;border-radius:8px;background:var(--surface);display:grid;place-items:center;flex:none;color:var(--accent-ink)}
.starter:hover .si{background:#fff}
.starter .si .ic{width:16px;height:16px}
.starter .st{flex:1;min-width:0}
.starter .go{color:var(--faint);font-weight:500}
.sig-src{margin:16px 0 0}
/* Sources are ALWAYS small muted type, on every page (Jamie, 10/10). One rule for every source class, so a page's own
   broad rules (.card p, .sec p, #schools > p …) can't enlarge or darken them. New source classes go in this list. */
:is(.sig-src,.gb-src,.col-src,.he-src,.hl-src,.hs-src,.sch-src,.jc-src,.hzm-src,.cv-src,.clm-src,.fy-src,.hx-src,.ox-src,
    .hub-src,.ln-src,.vs-src,.hk-src,.col-inc-src,.rc-src,.re-src,.rh-src,.ns-src){font-size:12px!important;line-height:1.5!important;color:var(--muted)!important}
:is(.sig-src,.gb-src,.col-src,.he-src,.hl-src,.hs-src,.sch-src,.jc-src,.hzm-src,.cv-src,.clm-src,.fy-src,.hx-src,.ox-src,
    .hub-src,.ln-src,.vs-src,.hk-src,.col-inc-src,.re-src,.rh-src) :where(p,li,ul,ol,span,b,strong,em,small,a,div){font-size:inherit!important;color:inherit!important}
.sig-foot .sig-src{margin:0}

/* ===== Shared subject-page rules (tools/css_dedupe.py, 10/8): once here instead of in every page file ===== */
.now.two{grid-template-columns:1fr 1.5fr}
.scale-l{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.hb-hero{position:relative;border-radius:18px;padding:32px;background:radial-gradient(circle at 0 100%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 42%),var(--night);border:1px solid var(--night);overflow:hidden;color:var(--ink);--ink:#fff;--ink-2:#d3d9e3;--muted:#aab3c2;--faint:#8792a3;--line:rgba(255,255,255,.16);--hair:rgba(255,255,255,.1);--surface:rgba(255,255,255,.08);--bg:var(--night);--accent-ink:var(--accent-soft);--accent-tint:rgba(14,159,87,.18);--bar:rgba(255,255,255,.22);--paper:rgba(255,255,255,.08)}
.hb-hero.has-photo{background:var(--night)}
/* light islands inside the dark hero (white cards over the photo) keep the page tokens */
.hb-hero :is(.haz-dc,.re-qs,.hall-day,.lib-bc,.wx-card){--ink:#0f1623;--ink-2:#2e3746;--muted:#5a6372;--faint:#949cab;--line:#e6e8ec;--hair:#eff1f4;--surface:#f6f7f9;--bg:#fff;--accent-ink:#0b7f45;--accent-tint:#eafaf1;--paper:#fff;color:var(--ink)}
.hb-bg{position:absolute;right:0;top:0;width:58%;height:100%;object-fit:cover;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 35%,#000 75%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 35%,#000 75%)}
.hb-in{position:relative;z-index:1;max-width:680px}
/* a map in the photo's place (school pages without a photo, 10/30): it fills the frame and fades in the same way */
.hb-bg .tmap{height:100%;border-radius:0}
/* buttons over a photo or a map: solid, so they read on a light picture */
.sd-hero.has-photo > .shr-chip,.sd-hero.has-photo .sd-acts .btn,.cl-top > .shr-chip{background:rgba(18,26,38,.78);border-color:rgba(255,255,255,.28);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hb-hero.has-photo .hb-in{background:linear-gradient(90deg,var(--night) 62%,rgba(18,26,38,0));padding-right:40px;margin:-32px 0 -32px -32px;padding:32px 60px 32px 32px}
.rk-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
.rk{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 5px;border-radius:999px;border:1px solid var(--line);background:var(--paper,#fff);font-size:13.5px;font-weight:600;color:var(--ink-2)}
.rk:hover{border-color:var(--accent)}
.rk i{font-style:normal;display:grid;place-items:center;min-width:26px;height:26px;border-radius:999px;background:var(--accent-tint);color:var(--accent-ink);font-size:12px;font-weight:800;padding:0 5px}
.rk-row .link{font-size:13.5px;margin-left:4px}
h2.im .who{color:var(--accent);transition:color .2s}
.hb-hero h1{font-size:44px;letter-spacing:-.04em;line-height:1.02;margin-top:6px}
.hb-hero > p{color:var(--muted);margin:10px 0 20px;font-size:16px;max-width:640px}
.paths{margin-top:8px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-top:16px}
.kpi{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--paper,#fff)}
.kpi .k{font-size:12.5px;color:var(--muted);font-weight:600}
.kpi .v{font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-top:2px}
.kpi .s{font-size:12.5px;color:var(--muted)}
.kpi .s b{color:var(--good)}
.kpi .bar{height:6px;border-radius:3px;background:#e8ebef;margin-top:8px;position:relative}
.kpi .bar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--accent)}
.kpi .bar em{position:absolute;top:-3px;width:2px;height:12px;background:var(--ink);font-style:normal}
.gpick{display:flex;flex-wrap:wrap;gap:6px}
.gpick button{min-width:46px;height:40px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:700;font-size:14px;color:var(--ink-2)}
.gpick button:hover{border-color:var(--accent)}
.gpick button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.sch-band{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin:20px 0 8px}
.card.gx{margin-top:16px}
.gx-row{margin-top:20px}
.gx-row + p{margin-top:16px}
.gx-lab{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font-size:13.5px;line-height:1.35;margin-bottom:11px}
.gx-lab b{text-align:right;font-weight:600;color:var(--ink-2)}
.gx-lab small{color:var(--faint)}
.gx-bar{position:relative;height:8px;border-radius:4px;background:#e8ebef}
.gx-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:#c9ced7}
.gx-bar em, .gx-scale em{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 0 0 1px var(--ink);transform:translate(-50%,-50%)}
.gx-bar em{width:14px;height:14px}
@media (max-width:560px){.gx-lab{flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:10px}.gx-lab b{text-align:left;font-size:13px}}
.gx-scale{position:relative;display:flex;gap:2px;height:10px}
.gx-scale span{border-radius:3px;opacity:.28}
.gx-scale span.on{opacity:1}
.gx-scale .ga{background:var(--gA)}
.gx-scale .gb{background:var(--gB)}
.gx-scale .gc{background:var(--gC)}
.gx-scale .gd{background:var(--gD)}
.gx-scale .gf{background:var(--gF)}
.gx-conf{margin-top:16px;padding:12px 14px;border-radius:10px;background:var(--surface);font-size:13.5px;color:var(--ink-2)}
.gx-how{margin-top:12px;font-size:14px}
.gx-how summary{cursor:pointer;font-weight:600;color:var(--accent-ink)}
.gx-how ul{margin:10px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:6px;color:var(--ink-2)}
.hz-star > .sh .kick{color:var(--accent-ink)}
.hz-star > .sh h2{color:var(--ink)}
.hz-cross{stroke:var(--faint);stroke-width:1;stroke-dasharray:3 3}
.hz-dot{fill:#9aa3b2;stroke:#fff;stroke-width:2}
.hz-dot.me{fill:var(--accent)}
.hz-tip{position:absolute;pointer-events:none;background:var(--night);color:#fff;font-size:12.5px;line-height:1.45;border-radius:8px;padding:7px 10px;white-space:nowrap;transform:translate(-50%,-118%);z-index:2}
.hz-tw{overflow-x:auto}
.hz-tw .tbl{min-width:560px}
.he-bar{display:grid;grid-template-columns:150px minmax(0,1fr) 52px;gap:10px;align-items:center;border:0;background:none;padding:6px 8px;border-radius:8px;text-align:left}
.he-bar:hover{background:var(--surface)}
.he-bar.on{background:var(--accent-tint)}
.he-bar .l{font-size:13.5px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.he-bar.on .l{font-weight:600;color:var(--ink)}
.he-bar .t{position:relative;height:10px;background:#f0f2f5;border-radius:4px}
.he-bar .t i{position:absolute;left:0;top:0;bottom:0;border-radius:4px}
.he-bar .t i.b{background:var(--good)}
.he-bar .t i.w{background:var(--bad)}
.he-bar .t i.s{background:#c3c9d2}
.he-bar .v{font-size:13px;text-align:right}
.he-fac{display:flex;gap:12px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.he-fac .bd{flex:1;min-width:0;position:relative}
.he-fac .nm{font-weight:600;font-size:14.5px;padding-right:58px;line-height:1.3}
.he-fac .mt{font-size:13px;color:var(--muted);margin-top:2px}
.he-fac .sites{margin-top:10px;border-top:1px solid var(--hair);padding-top:8px;display:flex;flex-direction:column;gap:5px;font-size:13px}
.he-fac .sites div{display:flex;justify-content:space-between;gap:8px}
.he-fac .sites span{color:var(--muted);white-space:nowrap}
.he-fac .sites a:hover{color:var(--accent-ink)}
.he-empty{grid-column:1/-1;padding:24px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:14px}
.he-map{border:1px solid var(--line);border-radius:14px;background:#fafbfc;padding:8px}
.he-map svg{width:100%;height:auto;display:block;max-height:560px}
.he-map .tp{stroke:#fff;stroke-width:1.2;transition:fill .25s}
.he-map .tp.me{stroke:var(--ink);stroke-width:2.6}
.he-map text{font:600 10.5px var(--sans);fill:var(--ink-2);paint-order:stroke;stroke:#fff;stroke-width:3px;pointer-events:none}
.he-map text.me{font-size:13px;font-weight:800;fill:var(--ink)}
.he-map .pin circle{stroke:#fff;stroke-width:2}
.he-map .pin.h circle{fill:#c0492f}
.he-map .pin.c circle{fill:var(--accent)}
.he-map .pin text{font:800 9px var(--sans);fill:#fff;stroke:none}
.he-map .pin.lit circle{stroke:var(--ink);stroke-width:3}
.lz-pin{cursor:pointer;outline:none}
.lz-pin circle{fill:var(--accent);stroke:#fff;stroke-width:2.5;vector-effect:non-scaling-stroke}
.lz-pin text{fill:#fff;font:700 12px var(--sans);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.lz-pin.hot circle, .lz-pin:focus-visible circle{fill:var(--lz-hot)}
.lz-map.zoomed .lz-pin:not(.hot){opacity:.35}   /* app.js sets .zoomed: the other pins step back */
.lz-poi circle{fill:#fff;stroke:var(--lz-hot);stroke-width:2.5;vector-effect:non-scaling-stroke}
.lz-poi text{font-size:10px;text-anchor:middle;dominant-baseline:central;pointer-events:none}
.lz-poi.hot circle{fill:var(--lz-hot)}
.cl-pb{display:block;height:10px;border-radius:5px;background:#eef0f3;position:relative;overflow:hidden}
.cl-pb i{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:var(--accent);transition:width .3s}
.cl-pv{text-align:right}
.cl-pv b{display:block;font-size:16px}
.cl-pv small{font-size:11.5px;color:var(--muted)}
.nx-lead-v{position:relative;display:grid;place-items:center;aspect-ratio:16/8;background:radial-gradient(circle at 30% 20%,var(--accent-tint),#f4f6f8 70%);overflow:hidden}
.nx-lead-v img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.nx-list{display:flex;flex-direction:column}
.fp-card{display:flex;gap:14px;border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff;scroll-margin-top:calc(var(--hdr) + 20px)}
.fp-card:target{outline:2px solid var(--accent);outline-offset:2px}
.hi-mapf{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);aspect-ratio:4/3;background:#f3efe4}
.hi-mapf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s}
.hi-mapf img.on{opacity:1}
.hi-years{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 0;align-items:center}
.hi-years button{height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--line);background:#fff;font:inherit;font-weight:700;font-size:14px;cursor:pointer;font-variant-numeric:tabular-nums;color:var(--ink)}
.hi-years button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.hi-sbe{display:flex;flex-wrap:wrap;gap:6px}
.hi-sbe button{height:32px;padding:0 11px;border-radius:9px;border:1px solid var(--line);background:#fff;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;color:var(--ink);font-variant-numeric:tabular-nums}
.hi-sbe button small{font-weight:500;margin-left:4px;opacity:.8}
.hi-sbe button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.rkl-tr .trk{height:7px;border-radius:4px;background:#eef0f3;overflow:hidden;display:block}
.rkl-tr .trk i{display:block;height:100%;border-radius:4px;background:var(--bar)}
.rkl-tr.me .trk i{background:var(--accent)}
.rkl-tr em{font-style:normal;font-size:11px;font-weight:700;color:#8a5a00;background:#fff3dc;padding:1px 7px;border-radius:999px;margin-left:6px;white-space:nowrap}
.rkl-tr{display:grid;grid-template-columns:44px minmax(0,1.5fr) minmax(0,1.6fr) minmax(0,.8fr) minmax(0,.8fr);gap:12px;align-items:center;padding:9px 16px;border-top:1px solid var(--hair);font-size:14px;scroll-margin-top:calc(var(--hdr) + 80px)}
.rkl-tr.hd{border-top:0;background:var(--surface);font-size:12px;font-weight:700;color:var(--muted);padding-top:10px;padding-bottom:10px}
.rkl-tr .n{font-weight:700;color:var(--muted)}
.rkl-tr .bar,.vl-side{display:flex;align-items:center;gap:10px;min-width:0}
.rkl-tr .bar .trk{flex:1;min-width:30px}
.rkl-tr .bar b{min-width:64px;text-align:right;font-size:13.5px}
.rkl-tr .c{text-align:right;color:var(--muted);font-size:13px}
.rkl-tr.me{background:var(--accent-tint)}
.rkl-tr.me .n{color:var(--accent-ink)}
.rkl-tr.nb:not(.me){background:#fffcf5}
.ng-filt{margin:0}
.ng-card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff;transition:border-color .15s,box-shadow .15s;min-width:0}
.ng-card:hover{border-color:#c9ced7;box-shadow:0 6px 24px rgba(15,22,35,.07)}
.ng-card.me{border-color:var(--accent-soft);background:linear-gradient(180deg,var(--accent-tint),#fff 55%)}
.pd-edit{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;margin-top:36px}
.pd-edit > summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;cursor:pointer;list-style:none}
.pd-edit > summary::-webkit-details-marker{display:none}
.pd-edit > summary > span:first-child{display:flex;flex-direction:column}
.pd-edit > summary b{font-size:17px;letter-spacing:-.015em}
.pd-edit > summary small{font-size:13.5px;color:var(--muted)}
.pd-edit[open] > summary{border-bottom:1px solid var(--hair)}
.fd-scene{height:200px;position:relative;background:linear-gradient(180deg,var(--fd-sky1),var(--fd-sky2));transition:background .8s; --fd-nt:#1b2340;--fd-dk:0%;--fd-cloud:#fff;--fd-win:#dcecf4;--fd-glow:0;--fd-line:#fff; --fd-sky1:#c6e4f3;--fd-sky2:#eef8f2; --fd-hf:color-mix(in srgb,var(--accent) 22%,#f6f7f9);--fd-hn:color-mix(in srgb,var(--accent) 40%,#f6f7f9); --fd-tree:color-mix(in srgb,var(--accent) 60%,#2b4a35);--fd-tree1:var(--fd-tree);--fd-tree2:var(--fd-tree);--fd-rd:color-mix(in srgb,var(--accent) 8%,#e9ecef)}
.fd-scene svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.fd-rh h2{font-size:20px;letter-spacing:-.02em}
.fd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.fd-card{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .15s,box-shadow .15s}
.fd-card:hover, .fd-card.on{border-color:var(--accent);box-shadow:0 6px 20px rgba(15,22,35,.07)}
.fd-pin{width:40px;height:40px;border-radius:var(--r);display:grid;place-items:center;background:var(--accent-tint);color:var(--accent-ink)}
.fd-ct{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.fd-ct b{font-size:15px}
.fd-ct small, .fd-ct em{font-size:12.5px;color:var(--muted);font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-ct em{color:var(--faint)}
.fd-my{display:grid;grid-template-columns:54px minmax(0,1fr);gap:12px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:14px;background:#fff}
.fd-my:hover{border-color:var(--accent)}
.fd-my img{width:54px;height:54px;border-radius:10px;object-fit:cover}
.fd-my > span:last-child{display:flex;flex-direction:column;min-width:0}
.fd-my small{font-size:12px;color:var(--muted)}
.fd-my b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fd-my.home{background:var(--accent-tint);border-color:transparent}
.fd-my.home small{color:var(--accent-ink);font-weight:700}
.rks-d{stroke:#fff;stroke-width:1.2;transition:fill .25s,opacity .25s}
.rks-d.rks-off{opacity:.35}
.rks-tip{position:absolute;transform:translate(-50%,calc(-100% - 10px));background:var(--ink);color:#fff;font-size:12.5px;padding:6px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;z-index:2}
.rks-tip b{display:block;font-size:13px}
.rkl-tr[hidden]{display:none!important}
.set-cam{position:absolute;right:0;bottom:0;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--accent-ink);display:grid;place-items:center;font-size:15px;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.set-nav{position:sticky;top:calc(var(--hdr) + 16px);align-self:start;display:flex;flex-direction:column;gap:2px;margin-top:44px}
.set-nav > a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font-weight:600;font-size:14.5px;color:var(--ink-2)}
.set-nav > a:hover{background:var(--surface)}
.set-nav > a.on{background:var(--accent-tint);color:var(--accent-ink)}
.set-pf{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start}
.set-err{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#fdeeea;color:#a1361b;font-size:14px;font-weight:600}
/* Shared form pieces: every page's form uses these, none restates them. A select with class="sel" gets the site chevron,
   inset from the right edge (page rules set only border, color and size; keep background-color, never the shorthand).
   Field errors: the server checks the whole form and prints each message under its field (.f-err, aria-invalid). */
select.sel:not([multiple]){-webkit-appearance:none;appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6372' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:14px}
[aria-invalid="true"]{border-color:var(--bad)!important}
.f-err{font-size:13px;font-weight:600;color:var(--bad)}
.set-add{display:flex;gap:10px;margin-top:16px}
.set-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px}
.set-meter i{height:4px;border-radius:2px;background:#e8ebef}
.set-meter[data-s="1"] i:nth-child(-n+1){background:#d9483b}
.set-meter[data-s="2"] i:nth-child(-n+2){background:#e3a23a}
.set-meter[data-s="3"] i:nth-child(-n+3){background:#7cb55a}
.set-meter[data-s="4"] i{background:var(--accent)}
html:has(.ln-page),html:has(.ln-main){--bg-2:#f6f7f9}   /* both homepages (/ and /uk): the map's ground */
a.kpi:hover{border-color:var(--accent)}
.shr-chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--paper,#fff);font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.shr-chip:hover{border-color:var(--accent);color:var(--accent-ink)}
.shr-chip .ic{width:15px;height:15px}
.shr-corner{position:absolute;top:16px;right:16px;z-index:3}
.has-photo>.shr-corner{box-shadow:0 2px 10px rgba(15,22,35,.16);backdrop-filter:blur(8px)}
section:has(>.shr-corner) .kick, .shr-corner~.kick{display:block;padding-right:88px}
.sfb h2{font-size:22px;line-height:1.25;margin:4px 0 0;letter-spacing:-.01em}
.sfb-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0 22px}
.sfb-tiles.few{grid-template-columns:repeat(auto-fill,minmax(200px,260px))}
.sfb-tiles:last-child{margin-bottom:0}
.sfb-t{display:flex;flex-direction:column;gap:4px;border-radius:14px;padding:14px 14px 13px;color:var(--ink-2);background:var(--surface);border-top:3px solid #c3cad3;font-size:13.5px;line-height:1.4;text-decoration:none;transition:transform .12s}
.sfb-t:hover{transform:translateY(-1px)}
.sfb-t b{font-size:26px;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.sfb-t.up{border-top-color:var(--accent)}
.sfb-body{max-width:760px}
.sfb-body p{font-size:16px;line-height:1.65;color:var(--ink-2);margin:0 0 14px}
.sfb-body p:last-child{margin-bottom:0}
.sfb-body h4{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:20px 0 4px;scroll-margin-top:72px}
.sfb-body h4:first-child{margin-top:0}
.sfb-body strong{color:var(--ink);font-weight:650}
.sfb-body .jump{color:var(--accent-ink);font-weight:600;font-size:14px;white-space:nowrap}
.sfb-foot{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.5}
.an-pane[hidden]{display:none}
.an-li{display:grid;grid-template-columns:44px 56px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 14px;border-top:1px solid var(--line);color:var(--ink)}
.an-li:first-child{border-top:0}
.an-li .r{font-weight:800;font-size:16px;color:var(--muted);text-align:center}
.an-li img, .an-li .ph{width:56px;height:42px;border-radius:8px;object-fit:cover;background:var(--surface);display:grid;place-items:center;font-size:20px}
.an-li b{display:block;font-size:15px}
.an-li small{color:var(--muted);font-size:13px}
.an-li em{font-style:normal;font-weight:700;font-size:15px;text-align:right}
.an-li em small{display:block;font-weight:500}
.an-li[hidden]{display:none}
.fyh-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.fyh-fade{animation:fyhIn .35s ease-out}
.sfb-t.wt{border-top-color:#d08a1e}
.hero{position:relative;border-radius:18px;overflow:hidden;min-height:440px;display:flex;align-items:flex-end;color:#fff;background:#24302a}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,20,.3) 0%,rgba(8,12,20,0) 30%,rgba(8,12,20,.05) 50%,rgba(8,12,20,.8) 100%);pointer-events:none}
.hero h1{font-size:72px;line-height:.95;letter-spacing:-.045em;font-weight:800}
.hero h1 small{font-size:.4em;font-weight:600;letter-spacing:-.02em;opacity:.85;margin-left:8px;display:inline-block;white-space:nowrap}
.hero .kick{color:rgba(255,255,255,.85);margin-bottom:8px;display:block}
.hero-map{flex:none;width:230px;background:rgba(255,255,255,.96);color:var(--ink);border-radius:14px;padding:10px 10px 8px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.hero-map svg{width:100%;height:auto;display:block}
.now{display:grid;grid-template-columns:1fr 1.35fr 1fr;gap:16px;align-items:start}
.tn{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;background:#000;user-select:none;touch-action:none;cursor:ew-resize}
.tn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.tn .then{clip-path:inset(0 50% 0 0)}
.tn .handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.tn .handle::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#fff;color:var(--night);display:grid;place-items:center;font-weight:700;box-shadow:0 2px 10px rgba(0,0,0,.3)}
.nb{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}
.gwrap{max-width:340px}
.gauge{width:100%;height:auto;display:block;overflow:visible}
.gauge path{fill:none}
.gauge .g-off{stroke:#e3e6eb}
.gauge .g-on{stroke:var(--accent)}
.gauge .g-needle{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.gauge .g-dot{fill:#fff;stroke:var(--ink);stroke-width:2.5}
.gauge .g-big{font:700 30px var(--sans);fill:var(--ink);letter-spacing:-.03em}
.gauge .g-rate{font:600 12.5px var(--sans);fill:var(--muted)}
.gauge .g-end{font:500 11px var(--sans);fill:var(--faint)}
.hero[data-zoomable]{cursor:zoom-in}
.hero[data-zoomable] a, .hero[data-zoomable] button{cursor:pointer}
.sch-hero{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center;border-radius:18px;padding:28px;background:linear-gradient(160deg,var(--accent-tint),#fff 70%);border:1px solid var(--line)}
.sch-hero h1{font-size:38px;letter-spacing:-.035em;line-height:1.08;margin-top:6px}
.sch-hero p{margin:10px 0 0;color:var(--ink-2);font-size:15.5px;max-width:640px}
.sch-hero .rk-row{margin-top:14px}
.hz-two{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;align-items:start}
.hz-side,.he-pict,.ng-key,.wx-yside,.si-date{display:flex;flex-direction:column;gap:12px}
.hz-side .stats, .hz-two > .stats{align-self:stretch}
.hz-then{border-radius:14px;background:var(--surface);padding:16px}
.hz-then p{margin:6px 0 0;font-size:14.5px;color:var(--ink-2);line-height:1.45}
.hz-chart{position:relative}
.hz-chart svg{width:100%;height:auto;display:block;overflow:visible}
.hz-grid{stroke:var(--hair);stroke-width:1}
.hz-ax{font:11px var(--sans);fill:var(--faint)}
.hz-line{fill:none;stroke:#9aa3b2;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.hz-line.me{stroke:var(--accent);stroke-width:2.6}
.hz-area{fill:var(--accent);opacity:.08}
.hz-end{fill:#fff;stroke:var(--accent);stroke-width:2.5}
.hz-tbl{margin-top:12px;font-size:13px;color:var(--muted)}
.hz-tbl summary{cursor:pointer;font-weight:600;color:var(--accent-ink);font-size:13.5px}
.hz-tbl .tbl{margin-top:10px}
.wx-wait{color:var(--muted);margin:40px 0 0}
.fd-rh{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.sfb{padding:26px 28px;margin-top:16px}
.at-row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.at-towns{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.kpi .s b.lo{color:var(--bad)}
.sch-hero .nog{width:var(--gb-big);height:var(--gb-big);border-radius:26px;background:var(--paper,#fff);border:1px solid var(--line);display:grid;place-items:center;color:var(--accent)}
.sch-hero .nog .ic{width:52px;height:52px}
.hz-traits{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.hz-trait{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:14px;padding:16px;background:#fff;transition:border-color .15s,box-shadow .15s}
.hz-trait:hover{border-color:#c9ced7;box-shadow:0 6px 24px rgba(15,22,35,.07)}
.hz-trait.top{background:var(--accent-tint);border-color:transparent}
.hz-trait b{font-size:17px;letter-spacing:-.015em;margin-top:6px}
.hz-trait small{font-size:13.5px;color:var(--muted);line-height:1.4}
/* The one icon tile (Jamie 10/28, docs/build/line-icons-audit.md): a sprite line icon (glyph()) in the accent ink on the
   neutral surface, 36px, in every section. No emoji, no tinted tiles. */
.hz-ti,.haz-ic,.lz-ri,.hk-ic,.wx-pi{width:36px;height:36px;border-radius:10px;background:var(--surface);display:grid;place-items:center;flex:none;color:var(--accent-ink)}
.hz-trait.top .hz-ti{background:#fff}
/* a line icon without a tile (a stat card's, a row's) and one inside text (.ic-in, sized by the text); in an SVG chart, glyph_svg()'s <use> */
.clm-stat>.ic,.clm-season>.ic,.an-type>span,.wx-cd>span,.wx-qs a>span:first-child,.wx-si,.wx-dg,.ujc-mr>.ic,.nx-dove,.uod-tt>span,.uod-cf>span{color:var(--accent-ink)}
.clm-stat>.ic .ic,.clm-season>.ic .ic,.an-type>span .ic,.wx-cd>span .ic,.uod-tt>span .ic{width:22px;height:22px}
.ic.ic-in{width:1em;height:1em;vertical-align:-.125em;color:var(--accent-ink)}
svg:not(.ic) use[href^="#i-"]{fill:none;stroke:var(--accent-ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ===== Shared subject-page rules (tools/css_dedupe.py, 10/8): once here instead of in every page file ===== */
.he-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.he-chips button{height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:13px;font-weight:600;color:var(--ink-2)}
.he-chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.cdot{width:9px;height:9px;border-radius:50%;flex:none}
.cdot.u{background:#6b57c9}
.cdot.c{background:#2f74d0}
.cmp h4{font-size:13px;font-weight:600;margin:0 0 8px}
.hz-hero h1{font-size:40px;max-width:620px}
.hz-hero h1 em{font-style:normal;color:var(--accent-ink);white-space:nowrap}
.hz-hero .hb-in > p{color:var(--ink-2);margin:12px 0 0;font-size:16px;max-width:600px}
.hz-then-d{font-size:30px;font-weight:700;letter-spacing:-.03em;color:var(--accent-ink);margin-top:6px}
.hz-rk{margin:14px 0 0;font-size:14px}
h1, h2, h3{margin:0}
.nbmap .o{fill:#eef0f3;stroke:#fff;stroke-width:1.2;vector-effect:non-scaling-stroke}
.nbmap a:hover .o{fill:#dde1e7}
.nbmap .me{fill:var(--accent);stroke:#fff;stroke-width:1.2;vector-effect:non-scaling-stroke}
.nbbox{position:relative;border:1px solid var(--line);border-radius:14px;background:#fafbfc;padding:10px}
.nbbox .in{position:relative}
.nbbox svg{width:100%;height:auto;display:block;max-height:460px}
.nbl{position:absolute;transform:translate(-50%,-50%);font-size:12px;font-weight:600;color:#3a4352;white-space:nowrap;pointer-events:none;text-shadow:0 0 3px #fff,0 0 3px #fff}
.nbl.me{color:#fff;text-shadow:none;font-size:13px}
.hz-me td{font-weight:700;background:var(--accent-tint)}
.hz-me td:first-child{padding-left:8px;border-radius:8px 0 0 8px}
.sf-ready{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.sf-rc{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;background:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.sf-rc p{margin:2px 0 10px;font-size:14px;color:var(--muted)}
.sf-calls{display:flex;flex-direction:column;gap:6px;width:100%}
.sf-calls a, .sf-calls button{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;padding:9px 12px;font-size:13.5px;text-align:left}
.sf-calls span{color:var(--muted)}
.sf-calls button b{color:var(--accent-ink);font-weight:600}
.sf-calls a:hover, .sf-calls button:hover{border-color:var(--accent)}
.vrd{border-radius:var(--r-lg);padding:20px 22px;border:1px solid var(--line);margin-top:16px;background:#fff}
.vrd h3{font-size:18px;margin:4px 0 12px}
.vrd ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 18px}
.vrd li{display:flex;gap:10px;align-items:baseline;font-size:14.5px;color:var(--ink-2)}
.read-card{margin-top:0}.read-card ul{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.read-foot{margin:14px 0 0;font-size:14px}
.vrd li span{font-size:11px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;flex:none;transform:translateY(3px);background:var(--surface);color:var(--muted)}
.sbrief{padding:26px 28px;margin-top:16px}
.sbrief .ch{margin-bottom:14px}
.sbrief h3{font-size:22px;line-height:1.25;margin-top:4px;letter-spacing:-.01em}
.sbrief-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.sbrief-body p{font-size:16px;line-height:1.65;color:var(--ink-2);margin:0 0 14px}
.sbrief-body p:last-child{margin-bottom:0}
.sbrief-body h4{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:20px 0 4px}
.sbrief-body h4:first-child{margin-top:0}
.sbrief-body strong{color:var(--ink);font-weight:650}
.sbrief-body .jump{color:var(--accent-ink);font-weight:600;font-size:14px;white-space:nowrap}
.sbrief-side{background:var(--surface);border-radius:14px;padding:18px 18px 16px}
.sbrief-side h5{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 10px}
.db-sides,.sig-stats,.rc-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sbrief-side ul,.sig-list{list-style:none;margin:0 0 16px;padding:0}
.sbrief-side ul:last-child{margin-bottom:0}
.sbrief-side li{display:flex;gap:10px;font-size:14px;line-height:1.45;color:var(--ink-2);padding:7px 0;border-top:1px solid var(--line)}
.sbrief-side li:first-child{border-top:0;padding-top:0}
.sbrief-side .dot{flex:0 0 20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;margin-top:1px}
.sbrief-side .dot.up{background:var(--accent)}
.sbrief-side .dot.wt{background:#c9a13a}
.sbrief-foot{margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);line-height:1.5}

/* ===== Shared subject-page rules (tools/css_dedupe.py, 10/8): once here instead of in every page file ===== */
.he-top{display:flex;gap:18px;align-items:center}
.he-hbadge{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none}
.he-hbadge small{font-size:11.5px;font-weight:600;color:var(--muted)}

/* ===== Hero background (10/9): town photo, else a National Register photo, else the town's shape (mocks/src/common/hero.py) ===== */
.hb-credit{position:absolute;right:12px;bottom:8px;max-width:46%;font-size:11px;line-height:1.3;color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.55);text-align:right;z-index:1}
.hb-hero.has-art{background:radial-gradient(circle at 0 100%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 42%),var(--night)}
.hb-art{position:absolute;right:0;top:0;width:64%;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);mask-image:linear-gradient(90deg,transparent 0%,#000 30%)}
.hb-art-dots circle,.hb-art pattern circle{fill:var(--accent);fill-opacity:.16}
.hb-art-nb path{fill:var(--bg);fill-opacity:.55;stroke:var(--accent);stroke-opacity:.38;stroke-width:1.4;vector-effect:non-scaling-stroke}
.hb-art-me{fill:var(--accent);fill-opacity:.28;stroke:var(--accent);stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.hb-art-xy{font:600 13px Geist,system-ui,sans-serif;letter-spacing:.06em;fill:var(--accent);fill-opacity:.8}
.hb-hero.has-art .hb-in{position:relative}
@media (max-width:760px){.hb-bg{width:100%;-webkit-mask-image:none;mask-image:none;opacity:.35}.hb-art{width:100%;opacity:.55}.hb-hero:has(.hb-credit){padding-bottom:34px}.hb-credit{max-width:calc(100% - 24px);left:12px;right:12px;bottom:9px;color:var(--muted);text-shadow:none;text-align:left}}
/* sch-hero (Safety, Schools) inside the shared hero: the badge|text grid moves to the inner wrapper */
.hb-hero.sch-hero{display:block;position:relative;overflow:hidden;padding:32px;background:radial-gradient(circle at 0 100%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 42%),var(--night);border-color:var(--night)}
.sch-in{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
@media (max-width:760px){.hb-hero.sch-hero{padding:20px}.sch-in{grid-template-columns:1fr}.hb-hero.sch-hero.has-photo .hb-in{margin:-20px;padding:20px}}

/* ===== Logo mark (10/9: Jamie's town-hall tower with the "A" clock face, mocks/logo-options.html; still iterating).
   Every header pulls the mark from this one file, so a new version is a one-file swap: public/assets/img/logo-mark.svg */
.logo .mk{width:24px;height:42px;border-radius:0;background:url(/public/assets/img/logo-mark.svg) center/contain no-repeat}
.logo .mk > svg{display:none}

/* Pages without the side nav (hubs, lists, national landing) */
.shell.no-nav{grid-template-columns:minmax(0,1fr);max-width:none}
/* ...and their page column is centered, here once (page files set only their own max-width). :where() keeps this at
   one class of weight, so a page rule can still override it. */
:where(.shell.no-nav)>.page{margin-inline:auto;width:100%}

/* ===== Shared subject-page rules (tools/css_dedupe.py, 10/8): once here instead of in every page file ===== */
.haz-chk{margin:8px 0 0}
.hz-li{width:34px;height:34px;border-radius:9px;background:var(--surface);display:grid;place-items:center;color:var(--accent-ink);flex:none}
.lib-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.lib-acts .ic{width:16px;height:16px}
.lib-stack{display:flex;height:12px;border-radius:6px;overflow:hidden;margin:12px 0 0;background:#e8ebef}
.lib-stack i{display:block;height:100%}
.lib-h3{font-size:17px;letter-spacing:-.015em;margin:26px 0 10px}
.lib-map .nbmap .o.lib-q1, .lib-sw.lib-q1{fill:#d6f0e1;background:#d6f0e1}
.lib-map .nbmap .o.lib-q2, .lib-sw.lib-q2{fill:#a7e0c0;background:#a7e0c0}
.lib-map .nbmap .o.lib-q3, .lib-sw.lib-q3{fill:#62c893;background:#62c893}
.lib-map .nbmap .o.lib-q4, .lib-sw.lib-q4{fill:#27a463;background:#27a463}
.lib-map .nbmap .o.lib-qn, .lib-sw.lib-qn{fill:#eef0f3;background:#e3e6ea}
.lib-map .nbmap .me{fill:var(--night)}
.lib-map .nbmap a:hover .o{filter:brightness(.93)}
.hz-tw .tbl.lib-tbl{min-width:0}
.lib-tbl th.r{white-space:nowrap}

/* ===== Shared subject-page rules (tools/css_dedupe.py, 10/8): once here instead of in every page file ===== */
.bignum{position:absolute;inset:0;display:grid;place-items:center;font-size:84px;font-weight:800;letter-spacing:-.05em;color:var(--accent)}
.bignum small{display:block;font-size:13px;letter-spacing:0;color:var(--muted);font-weight:600;text-align:center}
.bey{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bey-c{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;background:#fff;transition:box-shadow .15s,border-color .15s}
.bey-c:hover{border-color:#c9ced7;box-shadow:0 6px 24px rgba(15,22,35,.07)}
.bey-v{height:150px;background:var(--surface);position:relative;overflow:hidden;display:grid;place-items:center}
.bey-v > img, .ld-lead > img, .ld-mini img, .ld-dph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bey-v .yr{position:absolute;left:10px;bottom:10px;background:rgba(255,253,245,.92);color:#5c4a2e;font-size:12.5px;font-weight:700;padding:3px 9px;border-radius:999px}
.bey-v .bignum{font-size:40px}
.bey-v .bignum small{margin-top:4px}
.bey-b{padding:12px 14px 14px;display:flex;flex-direction:column;gap:2px}
.bey-b b{font-size:16px;letter-spacing:-.01em}
.bey-b small{font-size:13px;color:var(--muted)}
.vs-c0{--vc:#0e9f57;--vt:#e8f8ef}
.vs-c1{--vc:#4f46e5;--vt:#eeedfd}
.rks-crumb{display:flex;gap:8px;align-items:center;font-size:13.5px;color:var(--muted);margin:0 0 14px;flex-wrap:wrap}
.rks-crumb a:hover{color:var(--accent-ink)}
.rks-crumb b{color:var(--ink-2);font-weight:600}

/* ===== Account menu in the header (from um.css, folded in 10/10) ===== */
/* The account menu in the header (TownTapestry app.css .um-*: the rules core.css doesn't have yet). Page-local until the
   main session folds it into core.css with the new header (Core request, docs/build/account.md). */
.um{position:relative}
.um-av{width:32px;height:32px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--accent-tint);color:var(--accent-ink);font-weight:700;font-size:14px;flex:none}
.um-av img{width:100%;height:100%;object-fit:cover}
.um-av.lg{width:44px;height:44px;font-size:18px}
.um-car{width:12px;height:12px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.um-btn[aria-expanded="true"] .um-car{transform:rotate(180deg)}
.um-id{display:flex;align-items:center;gap:12px;padding:8px 8px 4px}
.um-id > span:last-child{display:flex;flex-direction:column;min-width:0}
.um-id b{font-size:15.5px;letter-spacing:-.01em}
.um-id small,.pl-dt small,.dr-sb > span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.um-sep{display:block;height:1px;background:var(--hair);margin:6px 4px}
.um-row{display:flex;align-items:center;gap:12px;width:100%;padding:9px 10px;border:0;border-radius:10px;background:none;font-size:14.5px;font-weight:500;color:var(--ink);text-align:left}
.um-row:hover,.um-row:focus-visible{background:var(--surface)}
.um-row .ic{color:var(--muted)}
.um-row > span{flex:1;display:flex;flex-direction:column;min-width:0}
.um-row small{font-size:12px;color:var(--muted);font-weight:400}
.um-row em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--muted);background:var(--surface);border-radius:999px;padding:1px 8px}
.um-f{margin:0}
.um-out{color:var(--ink-2)}
@media (max-width:640px){.um-nm,.um-car{display:none}}
/* the edition menu (app/lib/editions.php, 10/17): the account menu's markup, a pill with the edition's code and a chevron
   at every width (on phones the account menu's rules drop both, and the chevron is what says it can be changed) */
.ed-cc{flex:none;display:inline-grid;place-items:center;min-width:30px;height:24px;padding:0 6px;border-radius:7px;background:var(--surface);border:1px solid var(--line);font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.03em;color:var(--muted)}
.ed-cc.on{background:var(--night);border-color:var(--night);color:#fff}
.hd .ed-btn{gap:6px;height:36px;padding:0 10px 0 4px;border-color:var(--line);background:#fff}
.hd .ed .um-car{display:block}
.ed-nm{font-size:13.5px}
.ed-pop{width:320px}
.ed-h{padding:8px 10px 6px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ed-on{background:var(--surface)}
.ed-note{margin:2px 10px 6px;font-size:12px;color:var(--muted)}
/* the language switch (lang_switch(), Jamie 10/30): a globe and the other language's name, padding even on both sides
   (the edition pill's 4 px left is for its code chip); on phones the globe and the code */
.hd .ed-btn.ed-lang{gap:6px;padding:0 12px;font-size:13.5px;color:var(--ink-2)}
.hd .ed-lang .ic{width:16px;height:16px;color:var(--muted)}
.hd .ed-lang:hover{background:var(--surface)}
.ed-lang-c{display:none;font-size:12px;font-weight:800;letter-spacing:.04em}
.ft-ed{flex-basis:100%}
.ft-ed b{color:var(--ink-2)}
/* phones and tablets: the header on the page's 16 px gutters (was 4 px left, 20 px right); the hamburger's icon on the gutter */
@media (max-width:900px){.hd{padding:0 16px}.hd .logo{padding-left:0}.hd .menu-btn{margin-left:-8px}.hd .menu-btn+.logo{padding-left:4px}}
@media (max-width:900px) and (min-width:641px){.hd{column-gap:12px}}
@media (max-width:760px){.ed-nm{display:none}.hd .ed-btn{gap:4px;padding:0 8px 0 4px}.hd .ed-btn.ed-lang{padding:0 10px}.ed-lang-w{display:none}.ed-lang-c{display:inline}}
/* phones: a guest gets Join only (Sign in is a tab on /signup); signed in, the avatar takes Join's place */
@media (max-width:640px){.hd-guest{display:none}}
/* under 360 px a page with the hamburger (town pages) has no room for the wordmark as well: the mark alone */
@media (max-width:359px){.hd .menu-btn+.logo .wm{display:none}}
/* a header with the language pill (France: intl_lang_switch(), a.ed-btn in .hd-right) is up to 63 px wider: on phones the
   edition pill is its code alone, as the language pill, and under 430 px the logo is the mark alone. U.S. and UK headers have no such pill */
@media (max-width:640px){.hd:has(.hd-right > a.ed-btn) .ed .um-car{display:none}}
@media (max-width:430px){.hd:has(.hd-right > a.ed-btn) .logo .wm{display:none}}

/* Subject-page hero on tablets and phones: every .hb-hero (subject pages, Safety/Schools, the hubs and rankings) drops to
   22px padding and a 32px title at 900px (phone-css, 10/11: the drifting phone rules follow the majority). Kept BEFORE
   the hero-specific phone sizes below (.hz-hero h1 28px, .sch-hero h1 28px / padding 20px at 640px) so they win. */
@media (max-width:900px){.hb-hero{padding:22px}.hb-hero h1{font-size:32px}}
@media (max-width:640px){.hb-hero.has-photo .hb-in{background:rgba(18,26,38,.86)}.hb-hero .hb-bg{width:100%;-webkit-mask-image:none;mask-image:none;opacity:.35}}

/* ===== Shared page rules (tools/css_dedupe.py): once here instead of in every page file; @media ones keep their wrapper ===== */
@media (max-width:640px){
  .hz-traits{grid-template-columns:1fr 1fr}
  .hz-trait{padding:12px}
  .hz-trait b{font-size:15px}
}
@media (max-width:420px){
  .hz-traits{grid-template-columns:1fr;gap:8px}
  .hz-trait{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:12px;row-gap:2px}
  .hz-ti{grid-row:span 2}
  .hz-trait b{margin-top:0}
}
@media (max-width:640px){
  .shr-corner{top:12px;right:12px;height:30px;padding:0 11px}
}
.cl-ctl{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 9px;border-radius:999px;background:var(--night);color:#fff;font-size:13.5px;line-height:1.2}
.cl-ctl b{font-weight:700}
.cl-ctl span{color:rgba(255,255,255,.75)}
.cl-sb-c{padding:6px 18px 16px}
.cl-sb-r{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--hair);color:inherit}
.cl-sb-r .cdot{flex:none}
.cl-sb-n{flex:1;min-width:0;display:flex;flex-direction:column}
.cl-sb-n b{font-size:15px}
.cl-sb-n small,.cl-sb-m small{font-size:12.5px;color:var(--muted)}
.cl-sb-m{flex:none;display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.cl-sb-r:hover b{color:var(--accent-ink)}
.cl-sb-foot{margin:12px 0 0;font-size:14px;color:var(--ink-2);line-height:1.5}
.cl-sb-more{margin:8px 0 0;font-size:14px}
@media (max-width:760px){
  .cl-sb-r{flex-wrap:wrap}
  .cl-sb-m{align-items:flex-start;text-align:left;padding-left:22px}
}
@media (max-width:900px){
  .bey{grid-template-columns:1fr 1fr}
}
@media (max-width:1100px){
  .hz-two{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hz-kpis{grid-template-columns:1fr 1fr;gap:8px}
  .hz-kpis .kpi{padding:12px}
  .hz-kpis .kpi .v{font-size:22px}
  .hz-hero h1{font-size:28px}
  .hz-hero h1 em{white-space:normal}
}
@media (max-width:820px){
  .sfb{padding:20px 18px}
  .sfb h2{font-size:19px}
  .sfb-tiles{grid-template-columns:1fr 1fr}
  .sfb-t b{font-size:22px}
}
.lm{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.lm a{border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}
.lm a:hover{border-color:#c9ced7}
.lm .b{padding:10px 12px}
.lm b{display:block;font-size:14px;line-height:1.3}
.lm span{font-size:12.5px;color:var(--muted)}
@media (max-width:1280px){
  .lm{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .lm{grid-template-columns:1fr 1fr}
}
.at-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.at-tile{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;min-width:0}
.at-tile:hover{border-color:var(--accent)}
.at-ph{position:relative;display:block;aspect-ratio:16/10;background:var(--surface);overflow:hidden}
.at-ph img{width:100%;height:100%;object-fit:cover}
.at-ph em{position:absolute;left:8px;top:8px;background:#fff;border-radius:999px;padding:2px 8px;font-weight:700;font-size:12px;font-style:normal}
.at-tb{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px}
.at-tb small,.at-tb span{color:var(--muted);font-size:12.5px}
.at-tb b{font-size:15px;line-height:1.25}
.at-cred{margin-top:10px;font-size:12px;color:var(--muted)}
.at-cred summary{cursor:pointer}
@media (max-width:820px){
  .sbrief{padding:20px 18px}
  .sbrief-grid{grid-template-columns:1fr;gap:20px}
  .sbrief h3{font-size:19px}
}
@media (max-width:640px){
  .lib-tbl td.sm{font-size:12px}
  .sch-hero{grid-template-columns:1fr;padding:20px}
  .sch-hero h1{font-size:28px}
}
.t-body{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;margin-top:22px}

/* ===== Shared page rules (tools/css_dedupe.py): once here instead of in every page file; @media ones keep their wrapper ===== */
@media (max-width:1000px){
  .set-nav{position:sticky;top:var(--hdr);z-index:5;flex-direction:row;overflow-x:auto;margin:16px -4px 0;padding:8px 4px;background:var(--bg);border-bottom:1px solid var(--hair)}
  .set-nav>a{white-space:nowrap}
}
@media (max-width:1180px) and (min-width:901px){
  .now.two>:last-child{grid-column:auto}
}
@media (max-width:900px){
  .hero-map{display:none}
}
@media (max-width:640px){
  .hero{min-height:420px;border-radius:14px}
  .hero h1{font-size:46px}
  .he-bar{grid-template-columns:112px minmax(0,1fr) 46px;gap:8px;padding:6px 4px}
  .he-bar .l{font-size:12.5px}
  .nx-lead-v{aspect-ratio:16/10}
}
@media (max-width:900px){
  .rkl-tr{grid-template-columns:40px minmax(0,1.3fr) minmax(0,1.5fr) minmax(0,.8fr)}
  .rkl-tr>.c:last-child{display:none}
}
@media (max-width:640px){
  .rkl-tr{grid-template-columns:34px minmax(0,1fr) minmax(0,1.05fr);gap:10px;padding:9px 12px}
  .rkl-tr>.c{display:none}
  .rkl-tr .bar b{min-width:0}
  .set-add{flex-direction:column}
  .at-row{grid-template-columns:96px minmax(0,1fr)}
}
@media (max-width:560px){
  .an-li{grid-template-columns:28px 44px minmax(0,1fr) auto;gap:8px;padding:9px 10px}
}
@media (max-width:980px){
  .fyh-card{grid-template-columns:1fr}
}
.people{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.pp{display:flex;flex-direction:column;gap:8px;min-width:0}
.pp .ph{aspect-ratio:3/4;border-radius:var(--r);background:var(--surface);overflow:hidden;display:grid;place-items:center;color:var(--faint);font-size:28px;font-weight:800}
.pp .ph img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}
.pp:hover .ph img{filter:none}
.pp b{font-size:14.5px;letter-spacing:-.01em;line-height:1.2}
.pp span{font-size:12.5px;color:var(--muted);line-height:1.3}
.lm .ph img{width:100%;height:100%;object-fit:cover}
@media (max-width:1280px){
  .people{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:640px){
  .people{grid-template-columns:repeat(2,1fr)}
}
.story{background:var(--night);color:#fff;border-radius:18px;padding:28px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:28px;margin-top:44px}
.story .kick{color:var(--accent-soft)}
.story h2{font-size:28px;letter-spacing:-.03em;margin:6px 0 4px}
.story p{color:#aeb7c6;margin:0 0 16px;font-size:14.5px}
.cap{font-size:12.5px;color:#8f99aa;margin-top:8px}
.story .cap a{text-decoration:underline}
.story .go{display:inline-block;margin-top:14px;color:#fff;font-weight:600;font-size:14px;border-bottom:1px solid rgba(255,255,255,.4)}
.story.lead{margin-top:28px}
@media (max-width:640px){
  .story{padding:18px}
}

/* ===== Handbook components (Core requests 2-4, docs/build/handbook.md): the answer card (.ans, .ans-grid), its source /
   warning tags (.tb), the data-pending card (.ans.pend: a slot before a data job lands) and the school-by-grade path
   (.pipe; its grade-range span is .pg, since .g was the old grade mark). Used by the Handbook, the town home's
   "Getting set up" block and the Schools page. ===== */
.ans-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ans{border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px;background:#fff;min-width:0}
.ans:hover{border-color:#c9ced7}
.ans .q{font-size:13px;font-weight:600;color:var(--muted)}
.ans .a{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.25;word-break:break-word}
.ans .a.sm{font-size:16px}
.ans .d{font-size:13px;color:var(--muted)}
.ans .go{margin-top:auto;padding-top:6px;font-size:13px;font-weight:600;color:var(--accent-ink)}
.tb{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;align-self:flex-start}
.tb::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tb.src{background:#eef2f7;color:#3a4f6b}
.tb.warn{background:#fff7e0;color:#9a6700}
.ans.pend{border-style:dashed;background:var(--surface)}
.ans.pend .a{color:var(--muted);font-weight:600}
.pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.pipe > div{padding:14px 16px;border-left:1px solid var(--hair);position:relative;min-width:0}
.pipe > div:first-child{border-left:0}
.pipe .pg{font-size:12px;font-weight:700;color:var(--accent-ink);letter-spacing:.04em}
.pipe b{display:block;font-size:14.5px;margin-top:4px;line-height:1.3}
.pipe small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.pipe > div:not(:last-child)::after{content:"→";position:absolute;right:-8px;top:14px;width:16px;height:16px;background:#fff;color:var(--faint);font-size:12px;display:grid;place-items:center;z-index:1}
.pipe a:hover b{color:var(--accent-ink)}
@media (max-width:900px){
  .pipe{grid-template-columns:1fr 1fr}
  .pipe > div:nth-child(3){border-left:0}
  .pipe > div:nth-child(n+3){border-top:1px solid var(--hair)}
  .pipe > div::after{display:none}
}

/* ===== Shared page rules (tools/css_dedupe.py): once here instead of in every page file; @media ones keep their wrapper ===== */
.at-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--muted)}
.at-row .at-ph{aspect-ratio:auto;height:100%;min-height:110px}
.at-foot a, .at-cred a{color:inherit;text-decoration:underline}
@media (max-width:1180px) and (min-width:901px){.now{grid-template-columns:1fr 1fr}}
@media (max-width:1180px) and (min-width:901px){.now > :last-child{grid-column:span 2}}
@media (max-width:900px){.now > :last-child{grid-column:auto}}
/* Responsive rules every subject page shared (moved from the page files, 10/10, people-attractions build) */
@media (max-width:900px){.now, .now.two{grid-template-columns:1fr}}

/* ===== Shared page rules (tools/css_dedupe.py): once here instead of in every page file; @media ones keep their wrapper ===== */
.cl-seg{display:flex;flex-wrap:wrap;gap:6px}
.cl-seg button{height:36px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:600;font-size:13.5px;color:var(--ink-2)}
.cl-seg button:hover{border-color:var(--accent)}
.cl-seg button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.cl-lab{font:700 12px var(--sans);fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.cl-lab.sm{font-size:11px;font-weight:600;fill:var(--ink-2)}
.cl-lab.me{font-size:12.5px;font-weight:800}
.cl-go{color:var(--accent-ink);font-weight:700;flex:none;font-size:13.5px;white-space:nowrap}
.cl-ring{fill:none;stroke:#dde1e7;stroke-dasharray:3 4}
.cl-me,.sig-flow .me{fill:var(--ink);stroke:#fff;stroke-width:3}
.cl-ctl.sm{padding:3px 9px 3px 7px;font-size:12.5px;vertical-align:middle;margin-right:4px}
/* Declaration blocks two pages shared (grouped here, 10/10, people-attractions build) */
.re-hero .hb-in>p,.fp-hin>p{color:var(--ink-2);margin:12px 0 0;font-size:16px;max-width:620px}
.lib-hero h1,.fp-hero h1{font-size:42px;letter-spacing:-.04em;line-height:1.04;margin-top:6px}
.stand,.fp-spot{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.vt-ava img,.fp-cph img,.fp-nph img,.fp-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.hall-contact,.fp-next{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.cl-ch small,.cl-door small,.crow small,.hall-lv small,.hi-tns figcaption small,.lib-step small,.dtx small,.dpp small,.fp-nx small{display:block;font-size:12.5px;color:var(--muted)}
.fy-ru,.fp-big{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;display:flex;flex-direction:column}
.haz-dkey i,.fp-fl i{width:10px;height:10px;border-radius:3px;flex:none}
.cm-chg p,.ln-vote-more p,.at-rb p,.sb-card p{margin:0;font-size:14px;color:var(--ink-2)}
.an-tabs button[aria-pressed=true],.at-pills button[aria-pressed="true"]{background:var(--night);border-color:var(--night);color:#fff}
.cl-scatter,.at-map svg,.fp-tl svg,.ld-svg{display:block;width:100%;height:auto}

/* ===== Shared page rules (tools/css_dedupe.py): once here instead of in every page file; @media ones keep their wrapper ===== */
.rks-page{max-width:1240px}
.an-rank{position:absolute;left:10px;top:10px;min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:var(--night);color:#fff;font-weight:800;font-size:14px;display:grid;place-items:center;border:2px solid #fff;z-index:1}
.split.stk{height:16px;margin-top:6px}
.tmap{position:relative;height:240px;border-radius:var(--r);overflow:hidden;background:#e8ebef}
.clist{display:flex;flex-direction:column;gap:8px}
.crow{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:#fff}
a.crow:hover{border-color:#c9ced7}
.crow > div:nth-child(2){flex:1;min-width:0}
.crow b{font-size:14.5px}
.crow.nopage{border-style:dashed;background:var(--surface)}
.cmi{text-align:right;flex:none}
.tmap-t{position:absolute;width:1280px;height:768px}
.tmap-t img{position:absolute;width:256px;height:256px;max-width:none}
.tmap-pin{position:absolute;left:50%;top:50%;width:18px;height:18px;border-radius:50% 50% 50% 0;background:var(--accent);border:3px solid #fff;transform:translate(-50%,-100%) rotate(-45deg);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.tmap-attr{position:absolute;right:6px;bottom:4px;font-size:10.5px;background:rgba(255,255,255,.85);padding:1px 6px;border-radius:4px;color:var(--muted)}
.lz-rows{display:flex;flex-direction:column;margin-top:8px}
.lz-rows2{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));column-gap:24px}
.lz-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--hair);font-size:14px}
.lz-row>div{flex:1;min-width:0}
.lz-row b{display:block;font-weight:600}
.lz-row small{font-size:12.5px;color:var(--muted)}
@media (max-width:640px){
  .lz-rows2{grid-template-columns:1fr}
}
/* Same declarations on different pages' components (css_lint dupblock), one rule (college page port, 10/10) */
.cl-acts,.haz-hchips,.wx-hchips,.hpl-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.cl-dvp em,.fp-fb em,.fp-key{position:absolute;top:-4px;width:2px;height:20px;background:var(--ink)}
.cl-two,.sf-pt{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;align-items:start}

/* ===== Shared page rules (tools/css_dedupe.py): once here instead of in every page file; @media ones keep their wrapper ===== */
.set-main{max-width:1120px}
.set-flash{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r);background:var(--accent-tint);color:var(--accent-ink);font-weight:600;font-size:14.5px;margin-bottom:14px}
.set-out{max-width:520px;margin:40px auto;text-align:center;padding:36px 28px}
.set-out h1{font-size:28px;letter-spacing:-.03em;margin-top:12px}
.set-oi{display:inline-grid;place-items:center;width:56px;height:56px;border-radius:var(--r-lg);background:var(--accent-tint);color:var(--accent-ink)}
.set-acts{display:flex;gap:8px;justify-content:center;margin-top:18px}
.nbrow{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid var(--hair);font-size:14.5px;gap:10px}
.nbrow:first-child{border-top:0}
.nbrow a b:hover{color:var(--accent-ink)}
.ledger{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ledger div{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;border-top:1px solid var(--hair)}
.ledger div:first-child{border-top:0}
.ledger dt{color:var(--muted);font-size:13.5px}
.ledger dd{margin:0;font-weight:600}
.seg2{display:inline-flex;background:var(--surface);border-radius:10px;padding:3px}
.seg2 a{padding:6px 12px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--muted)}
.seg2 a[aria-current]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(15,22,35,.12)}
.pst-crumb{display:flex;gap:8px;font-size:13.5px;color:var(--muted);margin-bottom:14px}
.pst-crumb a:hover{color:var(--accent-ink)}
.grp-namerow{display:flex;gap:8px}
.grp-namerow input{font:inherit;font-size:15px;border:1px solid var(--line);border-radius:10px;padding:9px 10px;color:var(--ink)}
.grp-namerow input[name="name"]{flex:1;min-width:0}
.grp-emoji{width:56px;text-align:center;font-size:20px!important}
.grp-form textarea{font:inherit;font-size:14px;border:1px solid var(--line);border-radius:10px;padding:9px 10px;color:var(--ink);resize:vertical}
.grp-kinds{display:flex;flex-wrap:wrap;gap:6px}
.grp-kinds label{cursor:pointer}
.grp-kinds input{position:absolute;opacity:0;width:1px;height:1px}
.grp-kinds span{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.grp-kinds input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.grp-kinds input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.grp-colors{display:flex;gap:8px}
.grp-colors label{cursor:pointer}
.grp-colors input{position:absolute;opacity:0;width:1px;height:1px}
.grp-colors span{display:block;width:30px;height:30px;border-radius:50%;background:var(--sw);border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}
.grp-colors input:checked+span{box-shadow:0 0 0 2px var(--ink)}
.hi-facts dl{margin:10px 0 14px}
.hi-facts dl>div{display:flex;flex-direction:column;padding:9px 0;border-bottom:1px solid #eee6d6}
.hi-facts dl>div:last-child{border-bottom:0}
.hi-facts dt{font-size:12.5px;color:var(--muted)}
.hi-facts dd{margin:0;font-weight:700;font-size:15.5px;letter-spacing:-.01em}
/* Declaration blocks pages shared (grouped here, 10/10, historic-place port) */
.hi-facts,.hi-cov,.hi-cem{border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;background:#fbf8f2}
.hz-reach-l,.hpl-vacts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.he-988,.hpl-note{font-size:13px;color:var(--muted);margin:12px 0 0}
.about-in,.hi-story,.hpl-two{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:28px;align-items:start}
.hi-text p,.hpl-prose p{font-size:16px;line-height:1.7;color:var(--ink-2);margin:0 0 14px;max-width:68ch}
.hi-text p.first::first-letter,.hpl-prose p.first::first-letter{float:left;font-size:54px;line-height:.9;font-weight:800;margin:6px 10px 0 0;color:#b7791f}
.sig-card b,.hpl-walk b,.hpl-near b{display:block;font-size:14px;line-height:1.25}

/* ===== Shared page rules (tools/css_dedupe.py): once here instead of in every page file; @media ones keep their wrapper ===== */
@media (max-width:640px){
  .hpl-acts .btn{flex:1}
}
.hpl-crumb{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hpl-crumb a{color:var(--ink-2)}
.hpl-crumb a:hover{color:var(--accent-ink);text-decoration:underline}
.hpl-crumb span{color:var(--ink);font-weight:600}
.hi-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x proximity}
.hi-ph{position:relative;flex:none;width:180px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px}
.hi-ph img{width:180px;height:124px;object-fit:cover;border-radius:10px;background:var(--surface);filter:sepia(.1)}
.hi-ph:hover img{filter:none}
.hi-ph i{position:absolute;left:8px;top:8px;font-style:normal;font-size:12px;font-weight:700;background:rgba(255,253,245,.94);color:#5c4a2e;padding:2px 8px;border-radius:999px}
.hi-ph i.q{background:#f2c879;color:#4a3410}
.hi-ph span{font-size:13px;line-height:1.3;color:var(--ink-2)}
.hi-ph span small{display:block;font-size:11.5px;color:var(--faint)}
.hi-dlgb{display:flex;flex-direction:column;gap:14px;padding:6px 18px 12px;overflow-y:auto}
.hi-drop{display:grid;place-items:center;text-align:center;border:2px dashed #e2d5b9;border-radius:14px;padding:20px;background:#fdfaf3;cursor:pointer}
.hi-drop input{max-width:100%;font-size:13px;margin-bottom:6px}
.hi-drop b{display:block}
.hi-drop small{font-size:12.5px;color:var(--muted)}
.hi-f{display:flex;flex-direction:column;gap:6px;border:0;padding:0;margin:0}
.hi-f>span,.hi-f legend{font-size:13px;font-weight:700;padding:0}
.hi-f span small{font-weight:400;color:var(--faint)}
.hi-f input:not([type=radio]):not([type=file]),.hi-f select{height:40px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;background:#fff;width:100%}
.hi-seg{display:flex;flex-wrap:wrap;gap:12px;font-size:14px}
.hi-r{display:flex;gap:10px;align-items:flex-start;font-size:14px}
.hi-r b{display:block}
.hi-r small{color:var(--muted);font-size:12.5px}
.hi-dlgf{display:flex;align-items:center;gap:8px;padding:12px 18px 16px;border-top:1px solid var(--hair)}
.hi-dlgf small{margin-right:auto;font-size:12.5px;color:var(--muted)}
@media (max-width:640px){
  .hi-ph,.hi-ph img{width:160px}
  .hi-ph img{height:112px}
  .hi-when{grid-template-columns:1fr}
  .hi-dlgf{flex-wrap:wrap}
  .hi-dlgf small{width:100%}
}
.hpl-tn .tn{aspect-ratio:16/10;max-height:620px}
.hi-gap{display:flex;align-items:center;justify-content:space-between;gap:16px;border:1px dashed #e2d5b9;border-radius:var(--r);padding:14px 16px;background:#fdfaf3}
.hi-gap b{display:block;font-size:15px}
.hi-gap small{font-size:13px;color:var(--muted)}
.hi-gap.big{padding:22px}
@media (max-width:640px){
  .hi-gap{flex-direction:column;align-items:flex-start}
}
/* The History archive (docs/build/history-archive.md): then-and-now labels white (History, historic place, archive item) and the dated-decade highlight. */
#thennow .tn .lbl{color:#fff}   /* the label itself: .tn .lbl above */
.hi-ev.k-f .hi-dot,.si-decades button.on{background:#b7791f;border-color:#b7791f;color:#fff}
.tt-flash{display:flex;align-items:center;gap:10px;max-width:760px;margin:12px auto 0;padding:12px 16px;border-radius:var(--r);background:var(--accent-tint);color:var(--accent-ink);font-weight:600;font-size:14.5px}
@media (max-width:640px){
  .tt-flash{margin:10px 16px 0}
}
/* Accounts and Town Square for the U.S. only (app/lib/signups.php): the sign-up notice in the page's own column; for a
   guest outside the allowed countries (<html data-ugc="off">) every way into posting, asking or voting is hidden: the
   composer's buttons, the "Neighbors talk" sections, Weigh in and Agree / Disagree, Add a place, links into Town
   Square and members' pages. The server refuses the actions themselves; this only keeps dead ends off the page. */
.tt-flash.su-closed{max-width:none;margin:0 0 16px}
.tt-flash.su-closed svg{flex:none}
[data-ugc="off"] [data-compose],[data-ugc="off"] [data-addplace-open],[data-ugc="off"] #talk,[data-ugc="off"] #memories,
[data-ugc="off"] #pick,[data-ugc="off"] #owners,[data-ugc="off"] .weigh,[data-ugc="off"] .starters,[data-ugc="off"] .vd-vote,
[data-ugc="off"] .sig-cta,[data-ugc="off"] .hpl-addold,[data-ugc="off"] a[href="#talk"],[data-ugc="off"] a[href="#memories"],
[data-ugc="off"] a[href="#pick"],[data-ugc="off"] a[href="#owners"],[data-ugc="off"] a[href$="/posts"],[data-ugc="off"] a[href*="/posts?"],
[data-ugc="off"] a[href*="/posts#"],[data-ugc="off"] a[href$="/members"],[data-ugc="off"] a[href^="/post/"],[data-ugc="off"] a[href^="/u/"],[data-ugc="off"] a[href^="/signup"],
[data-ugc="off"] a[href^="/join"],[data-ugc="off"] [data-group-start],[data-ugc="off"] .ln-cta,[data-ugc="off"] .ln-gc em{display:none!important}
.cc-note{margin:10px 0 0;font-size:12.5px;color:var(--muted)}   /* "Viewing as a visitor from …" (the ?cc= test override) */
/* ===== Rules most pages had and a few lacked (phone-css, 10/11: the drifting phone rules follow the majority). Moved from
   the page files; the pages that lacked one now get it on phones: climate (.set-pf, .nb, .fd-scene), jobs & commute
   (.he-*), history (.tn .lbl via #thennow). docs/CSS-AUDIT.md "Phone rules unified". ===== */
.tn .lbl{position:absolute;top:12px;font-size:12px;font-weight:600;background:rgba(0,0,0,.55);padding:4px 9px;border-radius:999px;pointer-events:none}
.tn .lbl.l{left:12px}
.tn .lbl.r{right:12px}
@media (max-width:1000px){
  .set-pf{grid-template-columns:1fr}
}
@media (max-width:900px){
  .nb{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .fd-scene{height:140px}
  .he-top{flex-direction:column;align-items:flex-start;gap:12px}
  .he-hbadge{flex-direction:row}
  .sch-hero .kick{padding-right:0}
}
@media (max-width:560px){
  .an-li img,.an-li .ph{width:44px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  .fd-scene *{animation:none!important;transition:none!important}
  .fyh-fade{animation:none}
}
/* Attraction cards without a photo (town home, /attractions, a town's Attractions; ported from TownTapestry 10/11). */
.at-badge{position:absolute;right:8px;top:8px;background:var(--night);color:#fff;border-radius:999px;padding:2px 8px;font-size:11.5px;font-weight:700}
.at-noimg{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:96px;font-size:38px;color:rgba(18,26,38,.42)}
.at-k-parks{background:linear-gradient(135deg,#d9f2e3,#a8dcbf)}
.at-k-mountains{background:linear-gradient(135deg,#dfe9f7,#b7cbe9)}
.at-k-nature{background:linear-gradient(135deg,#d8eef3,#a5d3df)}
.at-k-todo{background:linear-gradient(135deg,#fbe7d6,#f3c6a0)}
.at-k-history{background:linear-gradient(135deg,#efe6d6,#d9c7a6)}
/* A place with no photo (UK attractions): the kind's line icon and name on the group's tint, quiet, not an emoji */
.at-blank{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:100%;min-height:96px;color:rgba(18,26,38,.42)}
.at-blank .ic,.at-noimg .ic{width:34px;height:34px;stroke-width:1.5}
.at-blank small{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}

/* ===== Shared page rules (tools/css_dedupe.py): once here instead of in every page file; @media ones keep their wrapper ===== */
.sig-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.sig-co{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px}
.sig-co:hover{border-color:var(--accent)}
.sig-co-ic{width:36px;height:36px;border-radius:10px;background:var(--accent-tint);color:var(--accent-ink);display:grid;place-items:center;margin-bottom:6px}
.sig-co b{font-size:16px;letter-spacing:-.01em}
.sig-co small{color:var(--muted);font-size:13px}
.sig-co dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 0;padding-top:12px;border-top:1px solid var(--hair)}
.sig-co dt{font-size:11.5px;color:var(--muted)}
.sig-co dd{margin:0;font-weight:700;font-size:16px}
/* Declaration blocks pages shared (grouped here, 10/12, compare landing: css_lint dupblock) */
.ap-opt summary em,.vl-try em,.vl-st em{font-style:normal;color:var(--faint);font-weight:500}
.hi-sbt img,.vl-ph img{width:100%;height:100%;object-fit:cover;display:block}
.cm-pb,.vl-step>span:last-child{display:flex;flex-direction:column;gap:3px}
.vs-pairs,.vl-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
/* town suggestions under a Compare box (compare.js suggest(): /compare's Add-a-town tile and the homepage band) */
.vs-res{position:absolute;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 32px rgba(15,22,35,.14);padding:6px;z-index:20;text-align:left}
.vs-res a{display:flex;flex-direction:column;padding:8px 10px;border-radius:8px}
.vs-res a:hover, .vs-res a.on{background:var(--surface)}
.vs-res b{font-size:14px}
.vs-res small{font-size:12px;color:var(--muted)}
.lib-nlist em,.vl-gap em{font-style:normal;font-size:13px;font-weight:600;color:var(--accent-ink)}
.fy-pg,.ln-loc,.pd-loc figcaption span,.sb-legend span,.sb-sights li,.sqc-f a,.wh-leg span,.vl-st li a>span{display:inline-flex;align-items:center;gap:6px}
/* a bordered row card: People's "in the news" rows and News' game cards */
.fp-nx,.nx-games a{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px;background:#fff}
/* a door band (town home + homepage): a kicker, deep-link chips, and the one solid button that opens the page */
.dr-door{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:22px;padding:16px 18px;border-radius:14px;background:var(--accent-tint);border:1px solid #cdeedb}
.dr-di{display:flex;flex-direction:column;gap:9px;min-width:0}
.dr-dk{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink)}
.dr-ch a{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;background:#fff;color:var(--ink-2);border:1px solid transparent;white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
.dr-ch a:hover{border-color:var(--accent-soft);color:var(--accent-ink)}
.dr-btn{position:relative;flex:none;display:inline-flex;align-items:center;padding:12px 42px 12px 18px;border-radius:var(--r);background:var(--accent);color:#fff;font-size:15px;font-weight:700;letter-spacing:-.01em;box-shadow:0 6px 16px -8px rgba(14,159,87,.8);transition:background .15s,transform .15s}
.dr-btn::after{content:"\2192";position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:18px}
.dr-btn:hover{background:var(--accent-ink);transform:translateX(2px)}
@media (max-width:640px){
  .dr-door{flex-direction:column;align-items:stretch}
}

/* ===== The photo viewer and its pieces (public/assets/js/photo-viewer.js; components.php lb_link/lb_tail/tile_map_stops):
   the UK History and listed-building pages and the U.S. historic-place page. Moved from uk-history.css 10/18. ===== */
.hx-yr{position:absolute;left:8px;top:8px;font:700 13px var(--sans);font-style:normal;background:var(--bg);color:var(--ink);border-radius:6px;padding:2px 8px;box-shadow:0 1px 4px rgba(0,0,0,.2)}
.hx-pv{position:absolute;z-index:80;width:220px;background:var(--bg);border-radius:10px;box-shadow:0 8px 30px rgba(15,22,35,.25);overflow:hidden;pointer-events:none}
.hx-pv img{width:100%;height:120px;object-fit:cover;display:block}
.hx-pv span{display:block;padding:7px 10px;font-size:12px;font-weight:600;color:var(--ink);line-height:1.3}
html.hxlb-on{overflow:hidden}
.hxlb{position:fixed;inset:0;z-index:1000;background:rgba(8,11,16,.97);display:grid;grid-template-columns:64px 1fr 64px;grid-template-rows:56px 1fr auto;color:var(--bg)}
.hxlb[hidden],.hxg[hidden]{display:none}
.hxlb-top{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;padding:0 14px 0 20px}
.hxlb-n{font:600 14px var(--sans);opacity:.8}
.hxlb-x{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 10px;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:var(--bg);font:600 14px var(--sans);cursor:pointer}
.hxlb-x:hover,.hxlb-x:focus-visible{background:rgba(255,255,255,.26);outline:none}
.hxlb-x svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
.hxlb-x.dark{background:var(--surface);color:var(--ink)}.hxlb-x.dark:hover{background:var(--line)}
.hxlb-a{align-self:center;justify-self:center;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:var(--bg);cursor:pointer;display:flex;align-items:center;justify-content:center}
.hxlb-a:hover{background:rgba(255,255,255,.26)}
.hxlb-a svg{width:24px;height:24px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hxlb-a[hidden]{visibility:hidden}
.hxlb-a.next{grid-column:3}
.hxlb-f{grid-column:2;margin:0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.hxlb-f img{max-width:100%;max-height:calc(100vh - 240px);object-fit:contain;border-radius:6px;transition:opacity .2s;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.hxlb-f img.ld{opacity:.35}
.hxlb-f figcaption{text-align:center;max-width:720px;line-height:1.4}
.hxlb-f figcaption .t{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-soft)}
.hxlb-f figcaption b{display:block;font-size:18px;margin:2px 0}
.hxlb-f figcaption .c{display:block;font-size:12.5px;opacity:.7}
.hxlb-f figcaption a{color:var(--bg);text-decoration:underline;text-underline-offset:2px}
.hxlb-f figcaption a.hxlb-pg{display:inline-block;margin:2px 0 6px;padding:5px 12px;border-radius:999px;background:var(--accent);text-decoration:none;font-size:13px;font-weight:700}
.hxlb-rail{grid-column:1/-1;display:flex;gap:6px;overflow-x:auto;padding:10px 16px 14px;justify-content:safe center}
.hxlb-rail button{flex:none;width:58px;height:44px;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;background:none;cursor:pointer;opacity:.55}
.hxlb-rail button.on{border-color:var(--bg);opacity:1}
.hxlb-rail img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
/* the all-photos gallery */
.hxg{position:fixed;inset:0;z-index:990;background:var(--bg);overflow-y:auto}
.hxg-in{max-width:var(--page);margin:0 auto;padding:20px 24px 40px}
.hxg-h{display:flex;justify-content:space-between;align-items:flex-start;position:sticky;top:0;background:var(--bg);padding:6px 0 10px;z-index:2}
.hxg-h h2{margin:2px 0 0}
.hxg-f{margin:4px 0 16px}
.hxg-f button b{color:var(--muted);font-weight:600;margin-left:2px}
.hxg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.hxg-grid button{position:relative;padding:0;border:0;border-radius:10px;overflow:hidden;aspect-ratio:1;cursor:zoom-in;background:var(--surface)}
.hxg-grid img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s}
.hxg-grid button:hover img{transform:scale(1.05)}
.hxg-grid span{position:absolute;left:0;right:0;bottom:0;padding:22px 8px 7px;font:600 12px/1.25 var(--sans);color:var(--bg);text-align:left;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.hxg-grid i{position:absolute;left:6px;top:6px;font:700 11px var(--sans);font-style:normal;background:var(--bg);color:var(--ink);border-radius:5px;padding:2px 6px}
.hpl-photo .hxl{display:block;cursor:zoom-in;height:100%}
.hpl-photo .hxl img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.hx-wd{font-size:15px;line-height:1.55;color:var(--ink);margin:12px 0}
.hx-wd .kick{display:block;margin-bottom:2px}
.hx-tn{position:relative;aspect-ratio:3/2;max-height:560px;border-radius:var(--r);overflow:hidden;background:var(--night)}
.hx-tn>img,.hx-tno img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hx-tno{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--x)) 0 0)}
.hx-tno img{filter:sepia(.25)}
.hx-tnh{position:absolute;top:0;bottom:0;left:var(--x);width:3px;margin-left:-1.5px;background:var(--bg);box-shadow:0 0 8px rgba(0,0,0,.5);pointer-events:none}
.hx-tnh::after{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--bg);color:var(--ink);font:700 16px/40px var(--sans);text-align:center}
.hx-tn input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;touch-action:pan-y}   /* a vertical swipe still scrolls the page */
.hx-tnl{position:absolute;top:12px;font:700 12px var(--sans);background:rgba(0,0,0,.6);color:var(--bg);border-radius:6px;padding:3px 9px}
.hx-tnl.l1{left:12px}.hx-tnl.l2{right:12px}
.hx-og{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:14px}
.hx-of{margin:0}
.hx-of .hxl{position:relative;display:block;aspect-ratio:3/2;border-radius:10px;overflow:hidden;background:#e9e3d8;cursor:zoom-in}
.hx-of img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.hx-of.st img{width:208%;max-width:none;height:112%;margin:-3% 0 0 -3%;object-position:left center}
.hx-of .hxl:hover img{transform:scale(1.04)}
.hx-of figcaption{font-size:13px;color:var(--ink);margin-top:6px;line-height:1.3}
.hx-wmap{height:380px}
.hx-pin{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:var(--bg);border:2px solid #b7791f;color:#9c6a13;font:800 12px/22px var(--sans);text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.3);z-index:2}
.hx-pin.me{background:#b7791f;color:var(--bg);width:32px;height:32px;margin:-16px 0 0 -16px;line-height:28px;font-size:14px}
.hx-ars{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 18px}
.hx-ar{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--hair);color:var(--ink);text-decoration:none;font-size:14px}
.hx-ar:hover span{color:var(--accent-ink);text-decoration:underline}
.hx-ar small{color:var(--faint);font-size:12px}
@media (max-width:760px){
  .hxlb{grid-template-columns:1fr;grid-template-rows:56px 1fr auto auto}
  .hxlb-a{display:none}
  .hxlb-f{grid-column:1;padding:0 10px}
  .hxlb-f img{max-height:calc(100vh - 260px)}
  .hxg-in{padding:12px 16px 30px}.hxg-grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .hx-wmap{height:300px}.hx-og{grid-template-columns:1fr 1fr}
}

/* Town home peek strips (app/modules/town-home/peek.php, 10/19): the door from each topic card to its subject page. Since
   10/20 a white contents card: the topic's icon (and grade) as a small cover, the page's name, its sections as a list. */
.pk-strip{margin-top:26px;display:grid;grid-template-columns:auto minmax(0,1fr);border:1px solid var(--line);border-radius:16px;background:#fff}
.pk-cover{position:relative;display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin:16px 0 0 18px;border-radius:18px;background:var(--accent-tint);color:var(--accent-ink);transition:transform .2s}
.pk-cover .pk-ic{width:34px;height:34px;color:inherit}
.pk-strip:has(a:hover) .pk-cover{transform:scale(1.05)}
.pk-badge{box-shadow:0 0 0 2px #fff}
.pk-cover .pk-badge{position:absolute;z-index:1;right:-8px;bottom:-8px}
.pk-main{display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px 18px 10px 24px}
.pk-hero{display:flex;align-items:flex-start;gap:12px;color:var(--ink)}
.pk-hin{display:flex;flex-direction:column;gap:1px;min-width:0}
.pk-kick{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.pk-h1{font-size:16px;line-height:1.25;letter-spacing:-.01em;font-weight:700}
.pk-hero:hover .pk-h1{color:var(--accent-ink)}
.pk-go{margin-left:auto;flex:none;padding-top:14px;color:var(--accent-ink);font-weight:700;font-size:13.5px;white-space:nowrap}
.pk-row{display:grid;grid-template-columns:1fr 1fr;column-gap:22px}
.pk-t{display:flex;flex-direction:column;gap:1px;min-width:0;padding:8px 0;border-top:1px solid var(--hair);color:var(--ink)}
.pk-k{font-size:13.5px}
.pk-t small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-t small .gp{display:none}
.pk-t:hover .pk-k{color:var(--accent-ink)}
.pk-q{font-size:17px;font-weight:700;line-height:1.25;letter-spacing:-.01em;color:#fff}
.pk-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.pk-ic{width:34px;height:34px;color:var(--faint)}
.pk-big{display:flex;flex-direction:column;align-items:center;text-align:center}
.pk-big b{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1}
.pk-big i{font-style:normal;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}
.pk-bars{display:flex;flex-direction:column;gap:7px;width:100%}
.pk-bars>span{display:grid;grid-template-columns:62px minmax(0,1fr) 42px;align-items:center;gap:8px;font-size:12px}
.pk-bars i{font-style:normal;color:var(--muted);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-bars em{height:9px;border-radius:99px;background:var(--hair);overflow:hidden}
.pk-bars u{display:block;height:100%;border-radius:99px;background:var(--bar)}
.pk-bars .me u{background:var(--accent)}
.pk-bars .me i{color:var(--ink)}
.pk-bars b{text-align:right;font-weight:700}
.pk-spark{width:100%;height:100%}
.pk-spark polyline{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pk-spark circle.pk-me{fill:var(--accent)}.pk-spark polyline.pk-me{stroke:var(--accent)}
.pk-spark circle.pk-them{fill:var(--bar)}.pk-spark polyline.pk-them{stroke:var(--bar)}
.pk-spark .pk-ref{stroke:var(--faint);stroke-width:1.2;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.pk-grades{display:flex;gap:6px;align-items:flex-end;max-width:100%}
.pk-grades>span{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;flex:none}
.pk-grades .me .badge{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.pk-grades i{font-style:normal;font-size:10.5px;color:var(--muted);font-weight:600;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-split{display:flex;gap:3px;width:100%;height:16px}
.pk-split i{border-radius:4px;background:var(--bar)}
.pk-split .up{background:var(--accent)}.pk-split .dn{background:var(--bad)}
.pk-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.pk-chips span{padding:4px 9px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:600;white-space:nowrap}
.pk-chips .me{background:var(--ink);border-color:var(--ink);color:#fff}
@container (max-width:200px){
  .pk-grades>span:nth-child(n+4){display:none}
  .pk-big b{font-size:34px}
}
@media (max-width:640px){
  .pk-cover{width:52px;height:52px;margin:14px 0 0 14px;border-radius:14px}
  .pk-cover .pk-ic{width:26px;height:26px}
  .pk-cover .pk-badge{right:-6px;bottom:-6px}
  .pk-main{padding:12px 14px 8px 18px}
  .pk-go{padding-top:15px;font-size:13px}
  .pk-go>span{display:none}
  .pk-row{grid-template-columns:1fr}
}