/* Public area: the finder, service pages, events, labs and the information pages.
   Every colour comes from the tokens in acab.css, so dark mode follows automatically. */

/* ---------- finder: hero and search ---------- */
.hero{padding-block:48px 8px}
.hero .label{margin-bottom:14px}
.hero-title{color:var(--accent);font-size:clamp(38px,6vw,76px);line-height:1;max-width:15ch}
.finder-form{margin-top:32px;display:flex;flex-direction:column;gap:14px}
.finder-fields{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.finder-q{flex:2 1 300px}
.finder-method{flex:1 1 220px}
.finder-fields label{font-size:14px;font-weight:700}
.finder-fields input[type=search],.finder-fields select{min-height:52px;font-size:17px;background:var(--surface);border-color:var(--ink)}
.finder-buttons{display:flex;flex-wrap:wrap;gap:12px;flex:1 1 auto}
.btn.big{min-height:52px;padding:0 24px;font-size:16px}
.btn.big.primary{font-weight:700;padding:0 28px}
.btn .ico,.ico{width:20px;height:20px;flex:none}
.locate{border-color:var(--line)}
.hint{max-width:70ch}

/* place suggestions (an ARIA combobox listbox) */
.combo{position:relative}
.suggest{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px 0;list-style:none;background:var(--surface);
  border:1.5px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);max-height:min(60vh,360px);overflow-y:auto}
.suggest li{padding:10px 14px;min-height:44px;display:flex;flex-direction:column;justify-content:center;cursor:pointer;line-height:1.3}
.suggest li .sub{font-size:13px;color:var(--muted)}
.suggest li[aria-selected="true"],.suggest li:hover{background:var(--tint)}
.suggest li.note{cursor:default;color:var(--muted);font-size:14px}
.suggest li.note:hover{background:transparent}

/* quick filters: checkboxes that look like pills (they work without JavaScript too) */
.toggles{display:flex;flex-wrap:wrap;gap:8px}
.pill{position:relative;display:inline-flex}
.pill input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.pill span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font-size:14px;border-radius:22px;border:1.5px solid var(--line);
  background:transparent;color:var(--ink);pointer-events:none}
.pill input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.pill input:checked+span::before{content:"✓";margin-right:6px;font-weight:700}
.pill input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.pill:hover span{border-color:var(--ink)}

/* ---------- finder: results ---------- */
.finder-results{padding-block:28px 56px}
.results-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.results-layout.has-map.map-on{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
@media (max-width:960px){.results-layout.has-map.map-on{grid-template-columns:minmax(0,1fr)}}
.results-col{display:flex;flex-direction:column;gap:12px;min-width:0;max-width:820px}
.results-layout.map-on .results-col{max-width:none}
.results-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px}
.results-title{font-family:var(--mono);font-weight:500;font-size:14px;letter-spacing:.02em;color:var(--ink)}
.results-title .muted{font-weight:400}
.results-sort{font-size:12px}
.alternatives{font-size:14px;color:var(--muted)}
.view-tabs{display:flex;background:var(--surface);border-radius:999px;padding:4px;box-shadow:inset 0 0 0 1px var(--line);max-width:520px}
.view-tabs .tab{flex:1;min-height:44px;font:inherit;font-size:14px;border:0;border-radius:999px;background:transparent;color:var(--ink);cursor:pointer;padding:0 8px}
.view-tabs .tab[aria-pressed="true"]{background:var(--rose);color:var(--surface);font-weight:700}
.view-tabs .tab:focus-visible{outline:3px solid var(--focus);outline-offset:1px}

.result-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.result-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.result-card.highlight{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.result-top{display:flex;gap:12px;align-items:flex-start}
.pin-num{flex:none;width:28px;height:28px;border-radius:50%;background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-weight:500;font-size:13px;
  display:flex;align-items:center;justify-content:center}
.pin-num.approx{background:var(--surface);color:var(--accent);border:2px dashed var(--accent)}
.pin-icon{flex:none;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--accent);display:flex;align-items:center;justify-content:center}
.pin-icon .ico{width:17px;height:17px}
.result-name{flex:1;min-width:0}
.result-name h3{font-size:20px;font-weight:600;line-height:1.2;overflow-wrap:anywhere}
.result-name h3 a{color:var(--accent);text-decoration:none}
.result-name h3 a:hover{text-decoration:underline}
.result-kind{margin-top:2px;font-size:14px;color:var(--muted)}
.result-dist{flex:none;font-family:var(--mono);font-size:13px;white-space:nowrap;padding-top:3px}
.chips{list-style:none;margin:0;padding:0}
.result-card .chip,.event-card .chip{border:0;border-radius:3px;background:var(--bg-deep);color:var(--ink);padding:3px 10px;white-space:normal}
.event-card .chip.quiet{background:transparent;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.result-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 12px;font-size:13px;border-top:1px dashed var(--line);padding-top:10px}
.status{font-weight:700}
.status.ok{color:var(--ok)}
.status.warn{color:var(--warn)}
.verified{color:var(--muted)}
.stale-note{color:var(--warn);font-weight:600}
.intro{color:var(--muted);max-width:62ch}

/* ---------- map ---------- */
.map-col{display:flex;flex-direction:column;gap:12px;min-width:0;position:sticky;top:16px}
@media (max-width:960px){.map-col{position:static}}
.map-box{position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-deep)}
.map-box.on{min-height:clamp(560px,72vh,860px)}   /* taller on big screens, beside a long results list */
/* stacked under the list on a phone or tablet: tall enough to read, short enough to scroll past */
@media (max-width:960px){.map-box.on{min-height:clamp(320px,60vh,440px)}}
.map-gate{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px;max-width:52ch}
.map-msg{padding:24px;color:var(--muted)}
.map{position:absolute;inset:0}
/* on a touch screen one finger scrolls the page past the map (map.js), so say how to move it */
.map-hint{display:none!important}
@media (pointer:coarse){.map-hint{display:block!important}}
.map-legend{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column;gap:8px;font-size:13px}
.map-legend p{display:flex;align-items:center;gap:10px}
.lg{flex:none;display:inline-block;width:16px;height:16px}
.lg-site{width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--accent)}
.lg-approx{width:14px;height:14px;border-radius:50%;border:2px dashed var(--accent);background:var(--surface)}
.lg-county{height:12px;background:color-mix(in srgb,var(--accent) 22%,transparent);border:1px solid color-mix(in srgb,var(--accent) 70%,transparent)}
.lg-travel{width:18px;height:18px;border-radius:50%;border:2px dashed var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.lg-event{width:14px;height:14px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--surface);border:2.5px solid var(--accent)}
/* Leaflet, recoloured with the brand tokens (scoped under .map-box so they win over leaflet.css, which
   loads later, only when the map is shown) */
.map-box .leaflet-container{background:var(--bg-deep);font-family:var(--body)}
.map-box .leaflet-container.map-atlas{background:var(--map-water)}
/* the atlas's city names (map.js showPlaces): a dot on the place, the name beside it with a halo of land colour.
   They sit in a pane under the pins and never take a click or a tap. */
.map-box .map-place{pointer-events:none;overflow:visible}
.map-box .map-place-dot{position:absolute;left:-2px;top:-2px;width:4px;height:4px;border-radius:50%;background:var(--map-label)}
.map-box .map-place-name{position:absolute;left:6px;top:-9px;white-space:nowrap;font-family:var(--body);font-size:11px;line-height:18px;
  color:var(--map-label);text-shadow:0 0 2px var(--map-land),0 0 2px var(--map-land),0 0 4px var(--map-land)}
.map-box .map-place.rank-1 .map-place-dot{left:-3px;top:-3px;width:6px;height:6px}
.map-box .map-place.rank-1 .map-place-name{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.map-box .map-place.rank-2 .map-place-name{font-size:12px;font-weight:600}
.map-box .leaflet-container a{color:var(--link)}
.map-box .leaflet-bar a,.map-box .leaflet-bar a:hover{background:var(--surface);color:var(--ink);border-bottom-color:var(--line);width:36px;height:36px;line-height:36px}
.map-box .leaflet-bar{border:1px solid var(--line)}
.map-box .leaflet-control-attribution.leaflet-control{background:var(--surface);color:var(--muted)}
.map-box .leaflet-popup-content-wrapper,.map-box .leaflet-popup-tip{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
.map-box .leaflet-popup-content{font-size:14px;margin:12px 16px;line-height:1.4}
.map-box .leaflet-popup-content b{display:block;font-size:15px;margin-bottom:2px}
.map-box .map-marker{background:none;border:0}
.map-box .map-pin{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);
  background:var(--accent);border:2px solid var(--surface);box-shadow:var(--shadow)}
.map-box .map-pin span{transform:rotate(45deg);color:var(--accent-ink);font-family:var(--mono);font-weight:500;font-size:13px}
.map-box .map-pin.approx{background:var(--surface);border:2px dashed var(--accent)}
.map-box .map-pin.approx span{color:var(--accent)}
.map-box .map-pin.event{background:var(--surface);border:3px solid var(--accent);width:24px;height:24px}
.map-box .map-pin.event span{color:var(--accent);font-size:11px}
.map-box .map-pin.you{border-radius:50%;transform:none;width:18px;height:18px;background:var(--ink);border:3px solid var(--surface)}

/* ---------- events band and cards ---------- */
.band{background:var(--bg-deep);border-block:1px solid var(--line)}
.band .wrap{padding-block:48px}
.band-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 16px}
.band-head h2{font-size:clamp(28px,4vw,40px)}
.band-lede{margin:8px 0 24px;color:var(--muted);max-width:60ch}
.event-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px}
.event-grid.compact{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));margin-top:8px}
.event-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:8px;min-width:0}
.event-card h3{font-size:18px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.event-card h3 a{color:var(--ink)}
.event-date{font-family:var(--mono);font-size:13px;color:var(--rose);letter-spacing:.02em}
.event-where{font-size:14px;color:var(--muted)}
.event-host{font-size:14px}
.event-card .chips{margin-top:4px}

/* ---------- notes under the finder ---------- */
.finder-notes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px;padding-block:40px 0}
.note-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:10px}
.note-card h2{font-size:20px}
.note-card p{max-width:34em}   /* about 75 characters a line however wide the card grows on a big monitor */
.note-card.cta{border-color:var(--accent)}

/* ---------- service page ---------- */
.service{padding-block:20px 0}
.back{font-size:15px;margin-bottom:12px}
.back a{display:inline-flex;align-items:center;min-height:44px}
.service-head{display:flex;flex-direction:column;gap:8px;max-width:820px}
.open-line{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--muted)}
.open-line.ok{color:var(--ok)}
.open-line.warn{color:var(--warn)}
.service-head h1{color:var(--accent);font-size:clamp(30px,5vw,52px);overflow-wrap:anywhere}
.service-kind{font-size:15px;color:var(--muted)}
.service-head .lede{margin-top:4px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.btn.pill{border-radius:999px;min-height:48px;padding:0 22px;border-color:var(--line);background:var(--surface)}
.actions .btn{white-space:normal;text-align:center;max-width:100%;overflow-wrap:anywhere}
.btn.pill.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.small.pill{min-height:44px}
/* "Show phone and email" (a form: phone numbers and email addresses are not in the page until asked for) */
/* One pill for every social and messaging app (service.html's plat_pill): the platform's icon (acab/icons.py,
   coloured in acab.css) at 24px, then the handle. A link, a copy button (service.js) or plain text: all the
   same size. */
.btn.plat{gap:8px;min-height:44px;padding:6px 16px 6px 12px;font-size:15px;font-weight:500;max-width:100%;
  white-space:normal;overflow-wrap:anywhere;text-align:left}
.btn.plat .picon{width:24px;height:24px;flex:none}
span.plat-static,span.plat-copy{cursor:auto}
span.plat-static:hover,span.plat-copy:hover{background:var(--surface)}
/* a hidden number before the reveal, without JavaScript (service.js makes it a button that reveals it): a dashed
   edge, so it does not look like something to tap */
span.plat-static[data-reveal-msg]{border-style:dashed}
/* what a copy button says once pressed (service.js): on its own line at the end of the row of pills */
.plat-status{flex-basis:100%;color:var(--ink);overflow-wrap:anywhere}
.plat-value{font-family:var(--mono);user-select:all;-webkit-user-select:all}
.reveal-form{display:inline-flex;flex-wrap:wrap;margin:0;max-width:100%}
.site .reveal-form{margin:0 0 8px}
dd .reveal-form{margin-top:6px}
.reveal-status{margin:8px 0 0;color:var(--warn)}
.reveal-form .reveal-status{flex-basis:100%;margin:6px 0 0}
/* a revealed contact detail with no link can be long: let it wrap on a phone */
.actions .chip{white-space:normal;overflow-wrap:anywhere;max-width:100%}
.stale-warning{margin-top:20px;max-width:820px}
.service-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:20px;margin-top:24px;align-items:start}
@media (max-width:900px){.service-grid{grid-template-columns:minmax(0,1fr)}}
.service-main,.service-side{display:flex;flex-direction:column;gap:16px;min-width:0}
/* a wide window: the side column (sites, hours) gets more room and the main panels flow into two columns, so no
   panel of short lines stretches past a comfortable measure. The panels keep their order (down, then across). */
@media (min-width:1400px){
  .service-grid{grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:24px}
  .service-main{display:block;columns:2 400px;column-gap:24px}
  .service-main>*{break-inside:avoid;margin:0 0 16px}
}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:10px;min-width:0}
.panel h2{font-size:19px;color:var(--accent)}
.panel h3.sub{font-size:15px;margin-top:8px}
.test-list{list-style:none;margin:0;padding:0}
.test-list li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.test-list .tick{flex:none;width:22px;height:22px;color:var(--ok);margin-top:1px}
.test-list span{display:flex;flex-direction:column}
.note{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.facts{margin:0;display:flex;flex-direction:column;gap:6px;font-size:15px}
.facts div{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:12px}
@media (max-width:520px){.facts div{grid-template-columns:minmax(0,1fr);gap:0}}
.facts dt{color:var(--muted);font-size:14px}
.facts dd{margin:0}
.know-list,.lab-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:15px}
.lab-list li{display:flex;flex-direction:column;gap:2px}
/* "What they give away": short items in as many columns as fit (one on a phone), a dot before each */
.give-list{margin:0;padding:0 0 0 18px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr));gap:4px 24px;font-size:15px}
.give-list li{overflow-wrap:anywhere}
.address{font-size:15px}
/* A public address (service.html's address_row): a map pin, the address as a link to Google Maps (underlined like
   any link, not a pill), then an icon-only copy button that service.js shows. "Address copied" goes on its own
   line below. The address is inline text, so when it wraps the button sits after its last word, not at the
   right edge of a box. Chromium will break a line before any inline button (even after a no-break space), so
   the button is taken out of flow instead: the end padding on the address text keeps room for it beside the
   last word (padding wraps with the word it follows), and the button, absolutely placed at its static position
   right after the link, is pulled back over that room. The pin hangs in the row's left padding so every line
   of the address lines up. The row's padding and the link's keep both 44px tall to touch without spacing the
   lines; the button's -11px top margin centres it on the last line. */
.addr{display:flex;flex-direction:column;align-items:flex-start;font-size:16px;max-width:100%;min-width:0}
.site .addr{font-size:15px}
.addr-line{display:block;position:relative;max-width:100%;min-width:0;padding:11px 0 11px 26px;line-height:1.4}
a.addr-link{padding-block:11px;text-decoration:none;color:var(--link);overflow-wrap:anywhere}
.addr-link .picon{position:absolute;left:0;top:calc(11px + .7em - 10px);width:20px;height:20px}
.addr-text{padding-inline-end:46px;text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:1px}
.addr-line:has(> .addr-copy[hidden]) .addr-text{padding-inline-end:0}   /* no script, no button: no room kept */
a.addr-link:hover .addr-text{text-decoration-thickness:2px}
.addr-copy{position:absolute;margin:-11px 0 0 -44px;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:1px solid transparent;border-radius:999px;background:none;color:var(--muted);cursor:pointer}
.addr-copy:hover{background:var(--tint);color:var(--ink)}
.addr-copy svg{width:20px;height:20px}
.addr-status{color:var(--ink);overflow-wrap:anywhere}
.hours{border-collapse:collapse;width:100%;font-size:14px}
.hours th,.hours td{text-align:left;padding:6px 0;border-bottom:1px solid var(--line);font-weight:400}
.hours th{color:var(--muted);width:42%}
.hours tr.today th,.hours tr.today td{font-weight:700;color:var(--ink)}
.trust .promise-line{display:flex;gap:10px;align-items:flex-start;font-weight:600}
.trust .promise-line svg{flex:none;width:20px;height:20px;color:var(--ok);margin-top:2px}

/* ---------- events page ---------- */
.event-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:8px}
.event-filter label{font-weight:600}
.event-filter select{width:auto;min-width:220px;max-width:100%}
.month{margin-top:28px}
.month-head{font-size:22px;margin-bottom:14px}
.events-note{margin-top:40px;max-width:760px}

/* ---------- labs page ---------- */
.labs-table th[scope=row]{font-weight:600;min-width:180px}
.labs-table .sub{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:2px}
.labs-table a.sub{color:var(--link)}
@media (max-width:760px){
  .labs-table{border:0;background:transparent}
  .labs-table table,.labs-table tbody,.labs-table tr,.labs-table th,.labs-table td{display:block;width:100%}
  .labs-table thead{display:none}
  .labs-table tr{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;padding:6px 0}
  .labs-table td,.labs-table th[scope=row]{border:0;padding:6px 14px}
  .labs-table td::before{content:attr(data-label);display:block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
}
.sources{margin-top:32px}
.source-list{font-size:14px}
.source-list a{overflow-wrap:anywhere}   /* long source URLs wrap instead of widening the page on phones */
.source-list ul{list-style:disc;margin:4px 0 8px}
details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}

/* ---------- information pages ---------- */
.prose.wide{max-width:900px}
.prose code{font-family:var(--mono);font-size:.92em;background:var(--tint);padding:1px 5px;border-radius:3px;overflow-wrap:anywhere}
.prose .table-wrap code{background:transparent;padding:0}
pre.code{margin:0;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow-x:auto;font-size:13px;line-height:1.5}
pre.code code{background:transparent;padding:0;overflow-wrap:normal;white-space:pre}
dl.fields{margin:0;display:flex;flex-direction:column;gap:4px}
dl.fields dt{font-weight:600;margin-top:10px}
dl.fields dd{margin:0;color:var(--ink)}
.gate-list li{padding-left:4px}
.guide{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:860px){.guide{grid-template-columns:minmax(0,1fr);gap:16px}}
.guide-toc{position:sticky;top:16px;font-size:15px}
@media (max-width:860px){.guide-toc{position:static}}
.guide-toc ol{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column}
.guide-toc a{display:flex;align-items:center;min-height:36px;color:var(--ink);text-decoration:none;border-left:3px solid transparent;padding-left:10px}
.guide-toc a:hover{border-left-color:var(--rose)}
.guide-body{max-width:72ch}
.guide-body h2{scroll-margin-top:16px}
.compare th[scope=row]{font-weight:600;white-space:nowrap}
@media (max-width:520px){.compare th[scope=row]{white-space:normal}}
/* "Secure messaging": one pill per messaging app (.btn.plat) */
.messaging{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:4px}

/* ---------- team page (/team) ----------
   One card per person. Cards share the full page width: one person gets one wide card, more people wrap into
   columns at least 560px wide. Inside, a container query lays a wide card out in three columns (who, bio,
   projects + contact) and stacks a narrow one, so the bio always keeps a reading measure. */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,560px),1fr));gap:24px}
.person{container-type:inline-size;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(20px,3vw,40px)}
.person-inner{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}
.person-id{display:flex;align-items:center;gap:16px}
@container (min-width:1000px){
  .person-inner{grid-template-columns:220px minmax(0,66ch) minmax(260px,1fr);column-gap:clamp(28px,3vw,48px);align-items:start}
  .person-id{flex-direction:column;align-items:flex-start}
}
.person-id h2{color:var(--ink)}
.person-role{margin-top:6px}
/* the monogram: the seal's ring with the initials in Fraunces, from the seal tokens (so it follows dark mode) */
.monogram{flex:none;width:96px;height:96px}
.monogram .ring{fill:none;stroke:var(--seal-ring);stroke-width:4}
.monogram .inner{fill:none;stroke:var(--seal-peak);stroke-width:1.25}
.monogram text{fill:var(--seal-ring);font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:0;
  font-variation-settings:'SOFT' 100,'WONK' 1}
@media (max-width:520px){.monogram{width:72px;height:72px}}
.person-bio{display:flex;flex-direction:column;gap:14px;max-width:70ch}
.person-bio .lede{color:var(--ink);font-size:clamp(18px,1.6vw,20px);line-height:1.45}
.person-side{display:flex;flex-direction:column;gap:24px}
.person-side h3{margin-bottom:10px}
.person-projects{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.person-projects li{display:flex;flex-direction:column;gap:2px;padding-left:12px;border-left:3px solid var(--rose)}
.person-projects span{color:var(--muted);font-size:15px}
.person-email{overflow-wrap:anywhere}
.team-help{margin-top:40px}