/* phillylate.st — one design system, one source of colour.
   Type: Newsreader (headlines) + Public Sans (brand, navigation, metadata,
   controls). Both self-hosted. Layout: a 1200px container, everything aligned
   to it. Palette: warm paper or near-black, one print red used sparingly.

   Every colour below comes from a token. There is no hardcoded light-theme ink
   anywhere, which is what made the previous dark appearance unreadable.

   Rules are rationed. A hairline is only drawn where it is doing work a label
   or a gap cannot do -- the nameplate, the footer, the edges of a control. The
   rest of the page separates with space. */

:root{
  /* tokens */
  --paper:#F6F5F2;      /* page background      */
  --surface:#FFFFFF;    /* card / panel surface */
  --ink:#17191C;        /* primary text         */
  --ink-2:#5D626A;      /* secondary text       */
  --sep:#DEDFDF;        /* decorative rules: nameplate, footer, dividers */
  --ctrl:#80868E;       /* required control edges, 3.37:1 on paper (tokens
                           color.light.controlBorder; WCAG 1.4.11 wants 3:1) */
  --red:#BD2031;        /* the identity red -- invariant, never theme-swapped */
  --accent:#BD2031;     /* the UI accent: "Top story", selected-section
                           underline, keyboard focus, link hover, action
                           emphasis. Red does not encode categories.          */
  --accent-soft:rgba(189,32,49,.10);
  --focus:#BD2031;

  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-ui:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:40px; --s8:48px;

  --wrap:1200px;
  --gutter:32px;
  --radius:6px;       /* cards             (tokens shape.cardRadius)    */
  --radius-ctl:4px;   /* controls and menus (tokens shape.controlRadius) */
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#111315;
    --surface:#181B1F;
    --ink:#F2F3F5;
    --ink-2:#B3B8C1;
    --sep:#343941;
    --ctrl:#7C838D;    /* control edges, 4.87:1 on the dark page (tokens
                          color.dark.controlBorder)                      */
    --red:#BD2031;     /* identity red is INVARIANT in both themes
                          (tokens logo.brandRedInvariant, standards 06)   */
    --accent:#FF6B78;  /* dark UI accent only -- an accessible interface
                          counterpart, never a replacement brand colour  */
    --accent-soft:rgba(255,107,120,.14);
    --focus:#FF6B78;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-ui);font-size:16px;line-height:1.5625;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  /* Short pages (a story reference, the utility pages) push the footer to the
     bottom of the screen instead of leaving it floating halfway down. */
  min-height:100vh;display:flex;flex-direction:column;
}
#main{flex:1 0 auto}
img,svg{max-width:100%;display:block}
a{color:inherit}
p{margin:0}

/* ---------- shared frame ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);width:100%}

.skip{
  position:absolute;left:-9999px;top:0;z-index:100;background:var(--surface);color:var(--ink);
  padding:var(--s3) var(--s4);border:1px solid var(--ctrl);text-decoration:none;
}
.skip:focus{left:var(--s4);top:var(--s4)}

:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* ---------- masthead: the nameplate and one rule ---------- */
.mast{background:var(--paper)}
.mast .wrap{border-bottom:1px solid var(--sep);padding-top:36px;padding-bottom:22px}
.mast-top{margin:0}
.mast-h1{margin:0;font:inherit}
.wordmark{
  font-family:var(--font-ui);font-weight:700;
  font-size:clamp(32px,4.6vw,42px);line-height:1.02;
  letter-spacing:-.032em;color:var(--ink);text-decoration:none;display:inline-block;
}
.wordmark .dot{color:var(--red)}
/* Owner instruction 2026-09-29: `late` always carries the identity red.
   The artwork masters are recoloured to match; this covers the live-text footer. */
.wordmark .late{color:var(--red)}
/* The canonical artwork, at the compact master's 240px default (200px on
   mobile). Explicit dimensions stop it shifting while it loads; it is never
   filtered, faded or shadowed -- the dark header swaps the *file* through
   <picture>. The footer's wordmark stays live TEXT and is not sized by this
   rule, because at ~105px it is below the artwork's 140px floor. */
.wordmark-img{display:block;width:240px;height:auto}
.dateline{
  margin:10px 0 0;font-size:13px;font-weight:500;letter-spacing:.005em;
  color:var(--ink-2);line-height:1.462;
}

/* ---------- feature band: lead + Today ---------- */
/* Two columns that always end together. Both are flex columns, so the compact
   list under the lead is pushed to the foot of the band and the Today rail
   spreads to fill the same height: the band is as tall as its taller side and
   neither side is left with a hole beneath it. */
.feature{
  display:grid;grid-template-columns:2fr 1fr;gap:var(--s8);
  margin-top:30px;padding-bottom:var(--s8);
}
.lead{min-width:0;display:flex;flex-direction:column}

/* the line above a headline: date, time, section. Never the publisher. */
.when{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--s3);
  margin:0 0 9px;font-size:13px;line-height:1.462;color:var(--ink-2);
}
.when time{font-variant-numeric:tabular-nums;white-space:nowrap}
.top-label{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--accent);
}
.cat{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ink-2);
}

/* the publication, directly under the headline it is attributing */
.src{font-size:13px;font-weight:600;line-height:1.462;color:var(--ink-2);margin:0}

.lead-hd{
  font-family:var(--font-display);font-weight:640;
  font-size:clamp(30px,21px + 2.1vw,48px);line-height:1.09;letter-spacing:-.022em;
  margin:0 0 var(--s3);text-wrap:balance;
}
.lead-hd a{text-decoration:none}
/* Headlines are never underlined, in any state. The hover answer is the accent
   colour instead, so a hovered headline still reads as a link without the rule
   the owner saw under every line of the lead. */
.lead-hd a:hover{color:var(--accent)}
.lead .also{margin-top:var(--s3)}

/* More headlines: the compact list that closes the lead column. It is pushed to
   the foot of the band, so the lead column ends on the same line as Today
   however short the lead is. */
.second{margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--sep)}
.second-head{
  margin:0 0 var(--s3);font-family:var(--font-ui);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);
}
.second-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s4)}
.second-item{min-width:0}
.second-hd{
  font-family:var(--font-display);font-size:18px;font-weight:600;line-height:1.333;
  letter-spacing:-.006em;margin:0 0 5px;
}
.second-hd a{text-decoration:none}
.second-hd a:hover{color:var(--accent)}
.second .when{margin-bottom:6px;font-size:13px}
.second .src{font-size:13px}

/* ---------- Today ---------- */
/* The rail is a flex column and its list shares out the free space, so its last
   item sits on the same line as the foot of the lead column. */
.today{min-width:0;display:flex;flex-direction:column}
.today-head{
  margin:0 0 var(--s4);font-family:var(--font-ui);font-size:12px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);
}
.today-list{
  list-style:none;margin:0;padding:0;flex:1;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s5);
}
.today-item{min-width:0}
.today-hd{
  font-family:var(--font-display);font-size:20px;font-weight:600;line-height:1.3;
  margin:0 0 7px;letter-spacing:-.008em;
}
.today-hd a{text-decoration:none}
.today-hd a:hover{color:var(--accent)}

/* ---------- Latest: heading, filters, cards, pager ---------- */
.latest{padding-bottom:var(--s8)}
.section-head{
  font-family:var(--font-ui);font-size:20px;font-weight:700;letter-spacing:-.012em;
  line-height:1.3;margin:0 0 var(--s4);
}
.filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s6);
  margin:0 0 30px;
}
.f{
  font-family:var(--font-ui);font-size:14px;font-weight:500;color:var(--ink-2);
  text-decoration:none;padding:var(--s1) 0;border-bottom:2px solid transparent;
  min-height:44px;display:inline-flex;align-items:center;
}
.f:hover{color:var(--ink)}
.f[aria-current="page"]{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
/* The on state of a toggled section. aria-current marks the section a page
   belongs to; is-on marks every section the reader has switched on in place, so
   more than one can be lit at once without pretending to be a single page. */
.f.is-on{color:var(--ink);font-weight:600;border-bottom-color:var(--accent)}
.more{display:none}

/* Section lede on a filtered page, and the line the script writes when it
   filters in place. Both are plain text; no number here contradicts the list
   below it, because the count is the length of that list. */
.section-intro{
  font-size:15.5px;line-height:1.62;color:var(--ink-2);margin:calc(-1 * var(--s3)) 0 30px;
  max-width:58rem;
}
.filter-status{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3);
  font-size:14px;color:var(--ink-2);margin:calc(-1 * var(--s3)) 0 26px;
}
.filter-status[hidden]{display:none}
.filter-status .n{font-weight:700;color:var(--ink)}
.filter-status a{color:var(--ink-2)}
.filter-status a:hover{color:var(--accent)}

.cards{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
}
.card{
  display:flex;flex-direction:column;gap:0;
  background:var(--surface);border-radius:var(--radius);
  padding:24px 24px 22px;min-width:0;
}
.card-hd{
  font-family:var(--font-display);font-size:24px;font-weight:600;line-height:1.22;
  letter-spacing:-.008em;margin:0 0 10px;
}
.card-hd a{text-decoration:none}
.card-hd a:hover{color:var(--accent)}
.card .also{margin-bottom:var(--s2)}
.card .share{margin-top:auto;align-self:flex-start}
.empty{
  border-radius:var(--radius);background:var(--surface);
  padding:var(--s5);color:var(--ink-2);font-size:15px;
}

/* additional coverage: a disclosure, not a wall of outlet names */
.also{font-size:13px;color:var(--ink-2);margin:0 0 var(--s1)}
.also summary{cursor:pointer;color:var(--ink-2)}
.also summary:hover{color:var(--ink)}
.also-names{margin:7px 0 0;line-height:1.55}
.also-names a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--sep)}
.also-names a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- share: one click copies, the panel is the second step ---------- */
.share{position:relative;font-size:13px;margin:var(--s2) 0 0}
.share-open{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:2px 8px;
  margin-left:-8px;
  font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--ink-2);
  border:1px solid transparent;border-radius:var(--radius-ctl);cursor:pointer;list-style:none;
}
.share-open::-webkit-details-marker{display:none}
.share-open:hover{color:var(--ink);border-color:var(--ctrl)}
.share[open]>.share-open{color:var(--ink);border-color:var(--ctrl);background:var(--surface)}
.share-face{display:inline-flex;align-items:center}
.share-icon,.check-icon,.link-icon{flex:none}
.check-icon{display:none}
/* A short flash on the Share control itself: it says the copy happened without
   holding a tick on a control the reader has already used. */
.share.flash>.share-open .share-icon{display:none}
.share.flash>.share-open .check-icon{display:block}
.share.flash>.share-open{color:var(--ink)}

/* No elevation: shadows are off (tokens shape.shadow "none"). The control
   border is what makes the panel read as a separate surface, and on mobile it
   presents as a bottom sheet over a scrim. */
.share-panel{
  position:absolute;left:0;top:calc(100% + 8px);z-index:40;width:240px;
  background:var(--surface);border:1px solid var(--ctrl);border-radius:var(--radius-ctl);
  padding:10px;
}
.share-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.share-list li{margin:0;display:flex}
.share-words{margin-top:3px;gap:2px}
.share-list .soc{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:var(--radius-ctl);
  color:var(--ink-2);text-decoration:none;background:none;border:0;
}
.share-list .soc:hover{background:var(--accent-soft);color:var(--accent)}
.share-list .copybtn{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;
  font:inherit;font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;
  background:none;border:0;border-radius:var(--radius-ctl);cursor:pointer;
}
.share-list .copybtn:hover{background:var(--accent-soft);color:var(--accent)}
.copybtn-face{display:inline-flex;align-items:center}
/* The confirmed state persists until the reader moves on. Nothing here is on a
   timer: the second press of this same control re-copies and re-confirms it. */
.share.copied .copybtn{color:var(--accent);background:var(--accent-soft)}
.share.copied .copybtn .link-icon{display:none}
.share.copied .copybtn .check-icon{display:block}
.share-url{
  margin:var(--s3) 0 0;font-size:13px;line-height:1.462;color:var(--ink-2);
}
.share-url code{
  display:block;word-break:break-all;color:var(--ink);
  background:var(--paper);border-radius:var(--radius-ctl);padding:var(--s2);
  font-size:13px;user-select:all;
}
.share-live{
  margin:0;font-size:12px;font-weight:600;color:var(--ink-2);
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
.share-close{
  display:none;width:100%;margin-top:var(--s2);font:inherit;font-size:14px;font-weight:600;
  padding:var(--s2);min-height:44px;cursor:pointer;border-radius:var(--radius-ctl);
  background:none;border:1px solid var(--ctrl);color:var(--ink);
}
.share-close:hover{border-color:var(--accent);color:var(--accent)}
html:not(.js) .copybtn{display:none}
html.js .share-url:not(.show){display:none}
/* The script hides Copy link with `hidden`; the author display above outranks
   the UA [hidden] rule, as with .pager[hidden]. */
.share-list .copybtn[hidden]{display:none}

/* ---------- pager ---------- */
.pager{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1);
  margin:var(--s7) 0 0;
}
/* The combined view builds its own pager inside this element; `hidden` has to
   be spelled out because the author `display:flex` above outranks the user
   agent's [hidden] rule. */
.pager[hidden]{display:none}
.pg{
  font-size:14px;font-weight:500;color:var(--ink-2);text-decoration:none;
  padding:var(--s2) var(--s3);min-width:44px;min-height:44px;border:1px solid var(--ctrl);
  border-radius:var(--radius-ctl);display:inline-flex;align-items:center;justify-content:center;
}
a.pg:hover{border-color:var(--accent);color:var(--accent)}
.pg.current{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:700}
.pg.off{opacity:.45}
.pg.gap{border-color:transparent;min-width:auto}

/* ---------- utility pages ---------- */
.page{padding-block:var(--s7) var(--s8);max-width:44rem}
.page h1{
  font-family:var(--font-display);font-weight:640;font-size:clamp(30px,4vw,44px);
  line-height:1.1;letter-spacing:-.02em;margin:0 0 var(--s5);
}
.page h2{font-family:var(--font-ui);font-size:19px;font-weight:700;margin:var(--s6) 0 var(--s3)}
.page p,.page li{color:var(--ink-2);margin:0 0 var(--s3);line-height:1.68}
.page a{color:var(--ink);text-decoration-color:var(--sep)}
.page a:hover{text-decoration-color:var(--accent)}

/* ---------- story reference page (served by the share endpoint) ---------- */
/* Left-aligned inside the same container as the masthead, so the wordmark,
   the rule and the story share one edge. Same stack as the wire: the line
   above the headline, the headline, the publisher underneath. */
.story{padding-block:var(--s7) var(--s8)}
.story .when,.story .src,.story-hd,.story .story-cta,.story .also,.story .story-back,.story .story-note{
  max-width:50rem;
}
.story .when{font-size:13px;margin-bottom:12px}
.story .src{font-size:13px}
.story-hd{
  font-family:var(--font-display);font-weight:640;font-size:clamp(30px,4.4vw,44px);
  line-height:1.12;letter-spacing:-.02em;margin:0 0 var(--s4);text-wrap:balance;
}
.story-cta{margin:var(--s5) 0 var(--s4)}
.readat{
  display:inline-flex;align-items:center;min-height:46px;padding:0 var(--s5);
  background:var(--ink);color:var(--paper);text-decoration:none;border-radius:var(--radius-ctl);
  font-weight:600;font-size:15px;letter-spacing:.005em;
}
.readat:hover{background:var(--red);color:#fff}
.story-note{font-size:14px;line-height:1.65;color:var(--ink-2);margin:0 0 var(--s6)}
.story-back{margin-top:var(--s6);font-size:14px}
.story-back a{color:var(--ink-2)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--sep);margin-top:var(--s7);background:var(--surface)}
.foot .wrap{padding-top:34px;padding-bottom:var(--s7)}
.foot-brand{margin:0 0 var(--s3)}
.foot-brand .wordmark{font-size:19px;letter-spacing:-.028em}
.foot-note{font-size:13px;line-height:1.462;color:var(--ink-2);margin:10px 0 0;max-width:60rem}
.foot-note a{color:var(--ink-2)}

/* ---------- responsive ---------- */
/* Tablet: 24px side padding (tokens layout.gutter 32/24/16) and two Latest
   columns. The lead/Today split is a >=1024px arrangement, so it stacks here.
   It used to hold to 900px, which meant 900-1023px showed a split the standard
   says begins only at 1024 -- the kit's own test width of 768px is the proof. */
@media (max-width:1023px){
  :root{--gutter:24px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feature{grid-template-columns:1fr;gap:var(--s6)}
  .today{padding-top:var(--s2)}
}
@media (max-width:639px){
  :root{--gutter:16px}
  .mast .wrap{padding-top:26px;padding-bottom:18px}
  .wordmark{font-size:31px}
  /* Mobile masthead: 200px (tokens logo.mastheadMobileWidth). */
  .wordmark-img{width:200px}
  .dateline{margin-top:8px;font-size:13px}
  .feature{margin-top:var(--s5);padding-bottom:var(--s6)}
  .lead-hd{font-size:clamp(29px,8vw,36px)}
  .section-head{font-size:18px;margin-bottom:var(--s3)}
  .cards{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .card{padding:20px}
  .card-hd{font-size:22px}
  .filters{gap:8px var(--s3);margin-bottom:var(--s5)}
  /* filters: four out, the rest behind More; whichever is selected stays visible */
  .f{
    min-height:44px;padding:var(--s2) var(--s3);border:1px solid var(--ctrl);
    border-radius:var(--radius-ctl);gap:var(--s2);
  }
  .f[aria-current="page"]{border-color:var(--accent);border-bottom-color:var(--accent)}
  .f-extra{display:none}
  .f-extra.is-active{display:inline-flex}
  .more{display:block}
  details.more[open] ~ .f-extra{display:inline-flex}
  .more summary{
    list-style:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;
    padding:var(--s2) var(--s3);border:1px solid var(--ctrl);border-radius:var(--radius-ctl);
    font-size:14px;font-weight:500;color:var(--ink-2);
  }
  .more summary::-webkit-details-marker{display:none}
  .more summary::after{content:" ▾";color:var(--ink-2)}
  .share-open{min-height:44px}
  .pg{min-height:44px}
}
@media (max-width:359px){
  .f{padding:var(--s2);gap:var(--s1)}
  .lead-hd{font-size:29px}
}

/* The script turns the mobile share panel into a bottom sheet. Without it the
   panel is a plain inline disclosure and still lists every destination. */
@media (max-width:639px){
  html.js .share[open]::before{
    content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55;
  }
  html.js .share[open]>.share-panel{
    position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;z-index:60;
    border-radius:12px 12px 0 0;max-height:80vh;overflow:auto;padding:var(--s5) var(--s5) var(--s6);
  }
  html.js .share[open]>.share-panel .share-list{gap:var(--s1) var(--s2)}
  html.js .share[open]>.share-panel .share-list .soc{width:46px;height:46px}
  html.js .share[open] .share-close{display:block}
}

/* 44px is the BRAND's own control target (tokens interaction.minTarget) and it
   applies at every pointer type. The old rule wrapped it in `pointer:coarse`,
   which gave a touchscreen laptop 44px targets and denied the same control
   44px under a mouse -- an arbitrary split for a standard whose stated purpose
   is a comfortable hit area. Visible glyphs may stay small; the hit area grows
   with padding, which is what the criterion measures.

   WCAG 2.2 SC 2.5.8's 24x24 floor remains the acknowledged exception for the
   two documented classes only: inline links inside prose (the "also covered"
   outlet names and the footer contact link) and any control whose size is
   essential. The 44px target is a brand requirement, not an AA pass/fail line,
   so a future report can tell a compliance failure from a brand deviation. */
.share-open,.f,.pg,.more summary,.share-close,.copybtn{min-height:44px}
.share-list .soc{width:44px;height:44px}
.pg{min-width:44px}

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

/* the address: readable, plain, no sentence around it; the footnote stays quieter */
.contact-line { margin-top: 12px; }
.contact-line a { color: var(--ink); font-weight: 500; text-decoration: none; }
.contact-line a:hover, .contact-line a:focus-visible { text-decoration: underline; }

/* --- platform: edition selector, text wordmark, setup note (added 2026-09-29) ---
   The selector row appears only when more than one edition is reachable in
   the active hostname mode; the text wordmark and the setup note serve
   editions that have no kit artwork and no verified wire yet. Same tokens,
   same radii, no shadow, no gradient, nothing under the 13px floor.        */
.editions{display:flex;flex-wrap:wrap;gap:0 20px;border-bottom:1px solid var(--sep);}
.editions .ed{min-height:44px;display:inline-flex;align-items:center;font-size:13px;
  font-weight:600;letter-spacing:.02em;color:var(--ink-2);text-decoration:none;
  border-bottom:2px solid transparent;}
.editions .ed[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent);}
.editions .ed:hover{color:var(--ink);}
.wordmark-text{font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--ink);}
.wordmark-text .late,.wordmark-text .dot{color:var(--accent);}
.setup-note{border:1px solid var(--sep);border-radius:6px;padding:24px;background:var(--surface);}
.setup-hd{font-size:24px;font-weight:600;line-height:1.22;margin:0 0 8px;}
.setup-note p{margin:0 0 8px;color:var(--ink-2);}
.setup-src{font-size:13px;}

/* --- brand bible v3.0.0 family wordmark: height-set, never width-set.
   64px desktop, 40px mobile (30px floor), width automatic from each city
   master's own viewBox — Boston is naturally wider than DC and nothing is
   stretched. Dark theme swaps the file through <picture>, never a filter. */
.wordmark-img.wordmark-v3{width:auto;height:64px}
@media (max-width:720px){.wordmark-img.wordmark-v3{height:40px}}