/* Every Girl Name, the Deck design system (round-two v2, chosen 2026-10-04).
   Warm and bright: one saturated raspberry on light ground, a serif with generous curves for
   names, soft edges, hairlines. No shadows, no gradients, no dark pages.
   Type scale (five sizes): --t1 13 / --t2 15 / --t3 18 / --t4 26 / --t5 display.
   Spacing: 4 8 12 16 24 32 48 64. Three tones: loved, common, rare; "no figures" is the ground.
   Logical properties throughout (Arabic is right to left).
   This file: tokens, base elements, layout chrome (header, rail, tray, footer), and the shared
   components (Keep, collapsed names, cards, the rarity strip, the map, the places table).
   Page CSS lives in deck-<area>.css, linked by the page model (m.css). See DECK_NOTES.md. */
:root{
 --ground:#fbf4ec;--card:#fffdfb;--ink:#2a1a22;--ink2:#6b5560;--line:#e6dbd1;--field:#9a8a80;
 --accent:#c81e5f;--accent-d:#ad1751;--wash:#fbe6ee;--warn:#8a5a1a;
 --loved:#c81e5f;--common:#ee7fa8;--rare:#f6c0d2;--land:#e9e5e0;
 --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
 --text:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
 --t1:13px;--t2:15px;--t3:18px;--t4:26px;--t5:clamp(44px,11vw,76px);
 --r:20px;--r2:14px;
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:var(--t2)/1.5 var(--text);font-variant-numeric:lining-nums tabular-nums}
a{color:var(--accent);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.01em;line-height:1.15;margin:0}
h1{font-size:clamp(32px,6vw,48px)}
h2{font-size:var(--t4)}
h3{font-size:var(--t3)}
p{margin:0}
ul,ol{margin:0;padding:0}
button{font:inherit;color:inherit}
:lang(en) q{quotes:"\2018" "\2019"}
img,svg{max-width:100%}
[hidden]{display:none!important}
.sr,.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;inset-inline-start:12px;top:-60px;background:var(--ink);color:var(--card);padding:10px 14px;border-radius:999px;z-index:50}
.skip:focus{top:10px}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
.quiet{color:var(--ink2)}
.small{font-size:var(--t1)}
.eyebrow{font:600 12px/1.35 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.lede{font-size:var(--t3);line-height:1.5;max-width:62ch}

/* ---- header: brand, the deck, all names, your list, language ---- */
.top{border-bottom:1px solid var(--line);background:var(--ground)}
.top-in{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px;min-height:56px}
.brand{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;margin-inline-end:auto;padding:4px 0}
.mark{width:28px;height:28px;flex:none}
.wm{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.015em;white-space:nowrap}
/* the wordmark: "<em>Every</em> Girl Name", the promise word in raspberry italic (base.njk accents the brand's first word) */
.wm em{font-style:italic;color:var(--accent)}
.nav{display:flex;gap:2px;align-items:center}
.nav a{display:inline-flex;align-items:center;gap:6px;color:var(--ink);text-decoration:none;font-size:var(--t2);padding:8px 12px;border-radius:999px;white-space:nowrap;min-height:40px}
.nav a:hover{background:var(--wash)}
.nav a[aria-current=page]{box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
.count{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font:600 12px/20px var(--text);text-align:center}
.count:empty{display:none}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;min-height:40px;min-width:40px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px;border:1.5px solid var(--line);border-radius:999px;font:600 13px/1 var(--text)}
.lang summary::-webkit-details-marker{display:none}
.lang[open] summary,.lang summary:hover{border-color:var(--ink)}
.lang ul{position:absolute;inset-inline-end:0;top:calc(100% + 4px);z-index:40;list-style:none;min-width:160px;padding:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--r2)}
.lang a{display:block;padding:8px 12px;border-radius:10px;color:var(--ink);text-decoration:none}
.lang a:hover{background:var(--wash)}
.lang a[aria-current=true]{font-weight:600;color:var(--accent)}
@media (max-width:639px){
 .nav .nav-deck{display:none}
 /* the tray at the foot of the screen is "Your list" with its count on these pages */
 .has-rail .nav .nav-list{display:none}
 .wm{font-size:18px}
 .mark{width:26px;height:26px}
 .brand{gap:6px}
 .nav a{font-size:14px;padding:6px 4px}
 .top-in{gap:0 6px}
 .lang summary{min-width:36px;padding:0 6px}
}

/* ---- the page shell: content, and the kept-names rail on wide screens ---- */
.shell{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;padding-top:16px;padding-bottom:48px;align-items:start}
.main{min-width:0;overflow-x:clip}
.shell .wrap{max-width:none;padding:0}
.crumbs ol{display:flex;flex-wrap:wrap;gap:4px 8px;list-style:none;font-size:var(--t1);color:var(--ink2);margin-bottom:16px}
.crumbs li+li::before{content:"/";margin-inline-end:8px;color:var(--line)}
.crumbs a{color:var(--ink2)}
.rail{display:none}
@media (min-width:1000px){
 .has-rail .shell{grid-template-columns:minmax(0,1fr) 240px;gap:48px}
 .rail{display:block;position:sticky;top:16px;border-inline-start:1px solid var(--line);padding-inline-start:24px}
}
.rail h2{font-size:var(--t4);display:flex;align-items:center;gap:8px}
.kept{list-style:none;margin:12px 0 16px}
.kept li{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;padding:8px 0;border-bottom:1px solid var(--line)}
.kept li.new{animation:newk .9s ease-out}
@keyframes newk{0%{background:var(--wash)}100%{background:transparent}}
.kept .kn{font:600 20px/1.15 var(--display);color:var(--ink);text-decoration:none;display:block}
.kept a.kn:hover{color:var(--accent)}
.kept .ks{font-size:var(--t1);color:var(--ink2);display:block;margin-top:2px}
.rm{border:0;background:none;color:var(--ink2);width:32px;height:32px;border-radius:999px;font:500 20px/1 var(--text);cursor:pointer;flex:none}
.rm:hover{background:var(--wash);color:var(--ink)}
.rail-empty{font-size:var(--t2);margin:12px 0}
.rail-go{width:100%}

/* ---- the tray: the same list on phones, always on screen ---- */
.tray{position:fixed;inset-inline:0;bottom:0;z-index:30;display:flex;align-items:center;gap:8px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));background:var(--card);border-top:1px solid var(--line)}
.tray-h{color:var(--ink);text-decoration:none;font:600 14px/1.1 var(--text);display:flex;align-items:center;gap:6px;flex:none;padding:6px 2px;min-height:40px}
.tray-list{list-style:none;display:flex;gap:6px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none;padding:2px 0}
.tray-list::-webkit-scrollbar{display:none}
.tray-list li{display:flex;align-items:center;background:var(--wash);color:var(--ink);border-radius:999px;padding-inline-start:12px;flex:none;font:600 15px/1 var(--display);white-space:nowrap}
.tray-list li.new{animation:newt .9s ease-out}
@keyframes newt{0%{background:var(--common)}100%{background:var(--wash)}}
.tray-list .rm{width:30px;height:32px;color:var(--accent)}
.tray-list li.tray-empty{background:none;padding:0 4px;font:400 var(--t1)/1.25 var(--text);color:var(--ink2);white-space:normal;flex:1 1 auto;min-width:0}
.tray-go{flex:none;color:#fff;background:var(--accent);border-radius:999px;padding:0 14px;min-height:36px;display:inline-flex;align-items:center;font:600 14px/1 var(--text);text-decoration:none}
.tray-go:hover{background:var(--accent-d)}
@media (min-width:1000px){.tray{display:none}}
@media (max-width:999px){.has-rail{padding-bottom:72px}}
body:not(.has-rail) .tray{display:none}

/* ---- footer ---- */
.foot{border-top:1px solid var(--line);padding:32px 0 32px;font-size:var(--t1);color:var(--ink2)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:24px 16px}
.foot-grid>.foot-brand{grid-column:1/-1}
@media (min-width:760px){.foot-grid{grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr))}.foot-grid>.foot-brand{grid-column:auto}}
.foot-brand p{margin-top:8px;max-width:52ch}
.foot-brand .wm{font-size:18px}
.foot-h{font:600 12px/1.3 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-bottom:8px}
.foot ul{list-style:none}
.foot li{padding:3px 0}
.foot a{color:var(--ink)}
.letters{display:flex;flex-wrap:wrap;gap:4px;margin-top:24px}
.letters a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;border-radius:999px;font:600 var(--t1)/1 var(--text)}
.letters a{color:var(--ink);text-decoration:none;border:1px solid var(--line)}
.letters a:hover{border-color:var(--accent);color:var(--accent)}
.letters a[aria-current=page]{background:var(--ink);color:var(--card);border-color:var(--ink)}

/* ---- buttons, fields, chips ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px;border-radius:999px;font:600 var(--t2)/1 var(--text);text-decoration:none;cursor:pointer;border:1.5px solid transparent;background:none;color:var(--ink)}
.btn-keep{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-keep:hover{background:var(--accent-d);border-color:var(--accent-d)}
.btn-keep[aria-pressed=true]{background:var(--card);color:var(--accent)}
.btn-pass{background:var(--card);color:var(--ink);border-color:var(--ink)}
.btn-pass:hover{background:var(--ground)}
.btn-line{color:var(--accent);border-color:var(--accent);min-height:40px;padding:0 16px}
.btn-line:hover{background:var(--wash)}
.btn-ink{background:var(--ink);color:var(--card);border-color:var(--ink);min-height:38px;padding:0 18px}
.btn-ink:hover{background:#4a3340}
.btn:disabled{opacity:.4;cursor:default}
.linkbtn{background:none;border:0;padding:6px 4px;color:var(--accent);font:500 var(--t2)/1.3 var(--text);text-decoration:underline;text-underline-offset:.18em;cursor:pointer}
.linkbtn:disabled{color:var(--ink2);text-decoration:none;cursor:default}
.flabel{display:block;font:600 12px/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2);margin-bottom:8px}
.hint{font-size:var(--t1);color:var(--ink2);margin-top:4px}
input[type=text],input[type=search]{width:100%;min-height:44px;padding:8px 14px;border:1.5px solid var(--field);border-radius:var(--r2);background:var(--card);color:var(--ink);font:16px/1.3 var(--text)}
input[type=text]:focus,input[type=search]:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--wash)}
.chip{min-height:36px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:500 14px/1 var(--text);cursor:pointer}
.chip:hover{border-color:var(--ink2)}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--card)}
.seg{display:inline-flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--card)}
.seg button{min-height:38px;border:0;background:none;color:var(--ink);font:600 14px/1.1 var(--text);cursor:pointer;padding:0 14px;white-space:nowrap}
.seg button+button{border-inline-start:1.5px solid var(--ink)}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--card)}
.seg button:focus-visible{outline-offset:-5px;border-radius:999px}
.seg button[aria-pressed=true]:focus-visible{outline-color:var(--rare)}

/* ---- Keep (deckui.mjs keepButton): aria-pressed is the state, the words switch by CSS ---- */
.keep{flex:none;min-height:32px;padding:0 12px;border-radius:999px;border:1.5px solid var(--accent);background:var(--card);color:var(--accent);font:600 13px/1 var(--text);cursor:pointer;white-space:nowrap}
.keep:hover{background:var(--wash)}
.keep[aria-pressed=true]{background:var(--accent);color:#fff}
.keep.keep-big{min-height:44px;padding:0 20px;font-size:var(--t2);background:var(--accent);color:#fff}
.keep.keep-big:hover{background:var(--accent-d)}
.keep.keep-big[aria-pressed=true]{background:var(--card);color:var(--accent)}
.keep .kt-on,.keep[aria-pressed=true] .kt-off{display:none}
.keep[aria-pressed=true] .kt-on{display:inline}

/* ---- a collapsed name (deckui.mjs nameToggle): the name is the button, a chevron beside it ---- */
.nt{display:inline-flex;align-items:center;gap:.12em;max-width:100%;margin:0;padding:0;padding-inline-end:.08em;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:start;cursor:pointer;overflow-wrap:anywhere;border-radius:8px}
.nt:hover{color:var(--accent)}
.nt .chev{flex:none;width:max(14px,.3em);height:max(14px,.3em);color:var(--accent);transition:transform .15s ease-out}
/* the chevron is an empty <i> (deckui.mjs CHEV): its 12 x 12 path drawn as a mask in currentColor */
.chev{display:inline-block;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
@media (forced-colors:active){.chev{forced-color-adjust:none;background:ButtonText}}
.nt[aria-expanded=true] .chev{transform:rotate(180deg)}

/* ---- the collapsed name row (deckui.mjs nameRow): name, one line, Keep; the panel below ---- */
.nrows{list-style:none}
.nrow{border-bottom:1px solid var(--line)}
.nrow-h{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n k" "l l";align-items:center;gap:2px 12px;padding:10px 0}
.nrow-n{grid-area:n;font:600 22px/1.15 var(--display);margin:0;min-width:0}
.nrow-line{grid-area:l;font-size:var(--t1);color:var(--ink2);min-width:0}
.nrow-k{grid-area:k}
@media (min-width:640px){
 .nrow-h{grid-template-columns:minmax(150px,auto) minmax(0,1fr) auto;grid-template-areas:"n l k";gap:16px}
 .nrow-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
.nrow-more{padding:0 0 16px}
.nrow-more .say,.nrow-more .mean{font-size:var(--t1)}
.nrow-more .sent{font-size:var(--t2);margin-top:8px}
.nrow-more .hn b{font-size:var(--t3)}
.nrow-more .strip{margin-top:8px}
.nrow-more .marks{height:20px}
.nrow-more .m.t0{height:20px}
.nrow-more .m.t1{height:12px}
.nrow-more .m.t2{height:6px}
.nrow-go{margin-top:8px;font-size:var(--t1)}

/* ---- long sections collapse to a summary line with "Show all" ---- */
.more-sec{margin-top:8px}
.more-sec>summary{display:inline-flex;align-items:center;gap:6px;min-height:40px;cursor:pointer;color:var(--accent);font:600 var(--t2)/1.2 var(--text);list-style:none;border-radius:999px}
.more-sec>summary::-webkit-details-marker{display:none}
.more-sec>summary::after{content:"";width:7px;height:7px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);margin-inline-start:4px}
.more-sec[open]>summary::after{transform:translateY(2px) rotate(-135deg)}
.more-sec>summary:hover{text-decoration:underline;text-underline-offset:.18em}
.more-sec .sa-on,.more-sec[open] .sa-off{display:none}
.more-sec[open] .sa-on{display:inline}
.more-body{padding-top:8px}
.showall{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-top:8px;padding:0;border:0;background:none;cursor:pointer;color:var(--accent);font:600 var(--t2)/1 var(--text);border-radius:999px}
.showall:hover{text-decoration:underline;text-underline-offset:.18em}
.showall .sa-on,.showall[aria-expanded=true] .sa-off{display:none}
.showall[aria-expanded=true] .sa-on{display:inline}
.sec{border-top:1px solid var(--line);padding:24px 0}
.sec>h2{margin-bottom:12px}
.sumline{font-size:var(--t3);line-height:1.45;max-width:62ch}
.prose-s p{max-width:66ch;margin:8px 0}
.prose-s h3{margin-top:16px}
.src{font-size:var(--t1);color:var(--ink2);margin-top:12px}

/* ---- the card (home deck, name page hero) ---- */
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px}
@media (max-width:479px){.card{padding:16px}}
.name{font:600 var(--t5)/1 var(--display);letter-spacing:-.02em;margin:0 0 8px;overflow-wrap:anywhere}
.say{font-size:var(--t2);color:var(--ink2)}
.say b{font-weight:700;color:var(--ink);letter-spacing:.04em}
.dot{margin:0 4px}
.mean{font-size:var(--t2);color:var(--ink2)}
.mean q{color:var(--ink)}
.mean .nw{white-space:nowrap}
.sent{font-size:var(--t3);line-height:1.4;margin-top:16px;max-width:60ch}
.sent .nw{white-space:nowrap}
.sent .sw{width:10px;height:10px;border-radius:999px;margin:0;margin-inline-end:6px;vertical-align:1px}
.hn{margin-top:8px;font-size:var(--t2);color:var(--ink2);line-height:1.3}
.hn b{font:600 var(--t4)/1.1 var(--display);color:var(--accent);margin-inline-end:4px;white-space:nowrap}
.why{margin-top:12px;font-size:var(--t1);color:var(--ink2)}
.warn{color:var(--warn)}
.more{margin-top:16px;padding-top:12px;border-top:1px solid var(--line)}
.more-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:16px}
.flip{min-height:34px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);font:600 13px/1 var(--text);color:var(--accent);cursor:pointer}
.flip:hover{border-color:var(--accent)}

/* ---- the rarity strip: one mark per place sorted by rank, three tones; three places labelled ---- */
.strip{margin-top:16px}
.marks{display:flex;align-items:flex-end;gap:2px;height:28px;border-bottom:1px solid var(--line)}
.m{flex:1 1 0;min-width:0;display:block;border-radius:2px 2px 0 0;height:8px}
.m.t0{height:28px;background:var(--loved)}
.m.t1{height:17px;background:var(--common)}
.m.t2{background:var(--rare)}
.m.tn{background:none;border:1px solid var(--line);border-bottom:0}
.top3{display:flex;flex-wrap:wrap;gap:2px 16px;margin-top:8px;font-size:var(--t1);color:var(--ink2)}
.top3 b{color:var(--ink);font-weight:600}
.sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-inline-end:8px;vertical-align:-1px}
.sw.t0{background:var(--loved)}
.sw.t1{background:var(--common)}
.sw.t2{background:var(--rare)}
.sw.tn{background:none;border:1px solid var(--line)}

/* ---- the map pair: Europe and beyond; three tones, dots for places without national figures ---- */
.map{display:grid;grid-template-columns:58fr 42fr;gap:8px;align-items:start}
@media (max-width:599px){.map{grid-template-columns:1fr}}
.pane{margin:0;position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.pane svg{display:block;width:100%;height:auto}
.pane .land{fill:var(--land)}
.pane use.t0,.pane circle.t0{fill:var(--loved)}
.pane use.t1,.pane circle.t1{fill:var(--common)}
.pane use.t2,.pane circle.t2{fill:var(--rare)}
.pane use{stroke:var(--card);stroke-width:.7}
.pane circle{stroke:var(--card);stroke-width:2}
.pane.world circle{stroke-width:3}
.hit{cursor:help}
.pane use.hit:hover{stroke:var(--ink);stroke-width:1.2}
.pane circle.hit:hover{stroke:var(--ink)}
.ml{font-family:var(--text);font-weight:600;fill:var(--ink);paint-order:stroke;stroke:var(--card);stroke-width:3.5px;stroke-linejoin:round;pointer-events:none}
.pane figcaption{position:absolute;right:12px;top:6px;font-size:12px;color:var(--ink2);pointer-events:none}
.key{position:absolute;left:8px;bottom:8px;display:flex;gap:4px 12px;flex-wrap:wrap;padding:4px 10px;border-radius:999px;background:var(--card);font-size:12px;color:var(--ink);pointer-events:none}
.key .sw{margin-inline-end:6px}
.tip{position:fixed;z-index:60;max-width:260px;padding:7px 12px;border-radius:12px;background:var(--ink);color:var(--card);font:500 var(--t1)/1.35 var(--text);pointer-events:none}

/* ---- tables, and every place behind the picture ---- */
table{border-collapse:collapse;width:100%;font-size:var(--t2)}
th,td{text-align:start;padding:8px 0;padding-inline-end:12px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{font:600 12px/1.3 var(--text);letter-spacing:.07em;text-transform:uppercase;color:var(--ink2)}
tbody th{font-weight:600}
/* a place's swatch hangs in the margin, so a long place name wraps under its own first letter */
.places tbody th{position:relative;padding-inline-start:20px}
.places thead th:first-child{padding-inline-start:20px}
.places tbody th>.sw{position:absolute;inset-inline-start:0;top:13px;margin:0}
.num{text-align:end;white-space:nowrap}
td.num:last-child,th.num:last-child{padding-inline-end:0}
.yr{color:var(--ink2);font-size:var(--t1);font-weight:400}
.scope{font:500 11px/1 var(--text);color:var(--ink2);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;margin-inline-start:4px}
.placelist{margin-top:16px}
.notes{margin-top:12px;display:grid;gap:6px}
.notes p{font-size:var(--t1);color:var(--ink2)}
.tscroll{overflow-x:auto;max-width:100%}
@media (max-width:479px){.places th,.places td{padding-inline-end:8px}.places{font-size:14px}}

/* ---- pages not yet re-skinned keep their markup; these keep them readable meanwhile ---- */
.main .band{margin-bottom:24px}
.main .d{font-family:var(--display)}
.main .kick,.main .kicker{font:600 12px/1.35 var(--text);letter-spacing:.09em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.main .lede-s{color:var(--ink2);max-width:66ch;margin-top:8px}
.main .tile-map,.main .mapcard svg{max-width:640px}
.nf{padding:32px 0}
.nf h1{margin:8px 0 16px}
.nf .acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}