/*
Theme Name: Eagle Mountain Value
Theme URI: https://eaglemountainvalue.local
Author: Eagle Mountain Value
Description: Custom theme for the Eagle Mountain Value newsletter — a redesigned local community site with a global navigation bar and global footer. Faithful reproduction of the approved mockups (Home + Property Tax Estimator, Issue Library, and long-form issue articles).
Version: 1.35.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eagle-mountain-value
*/

/* ---------------------------------------------------------------------------
   Base reset — the page design lives in inline styles carried from the
   approved mockups; this file only supplies global defaults + responsive
   fallbacks + the small pieces of behaviour that inline styles can't express.
--------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: 'Mona Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #111827;
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { text-decoration: none; }
img { max-width: 100%; }

/* Visually hidden, still announced. WordPress markup expects this class name;
   .emv-sr is the theme's own, emitted by shared civic markup (emv_council_offsite)
   that is not confined to the Civic page. It was only ever defined in civic.css,
   which loads on /civic/ alone — so the moment a shared component rendered
   anywhere else, "(opens Civic Roll Call in a new tab)" printed on the page. */
.screen-reader-text,
.emv-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   GLOBAL FOCUS TREATMENT — one ring for the whole site, not one per page.

   The designed ring used to live only at `.emv-broadsheet :focus-visible`, and
   the tokens it reads are declared on that same scope. Everything outside it
   — the sticky header and the footer on EVERY page, plus /about/ and its five
   policy children, /events/, /contact/ and /directory/ — therefore fell back to
   the browser's own 1px blue. Two focus treatments on one site, and the
   designed one was missing from the global chrome.

   The tokens are re-declared on :root so this rule does not depend on being
   inside the broadsheet scope. `.emv-broadsheet :focus-visible` (0,2,0) still
   out-specifies the element selectors below (0,1,1), which is deliberate: the
   broadsheet's ring was verified by tabbing with real key events and its
   declarations are identical to these, so nothing there changes.
--------------------------------------------------------------------------- */
:root {
  --emv-focus: #eda23c;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--emv-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   SKIP LINK. Off-screen until focused — positioned away rather than
   `display: none`, which would drop it out of the tab order and make it
   useless. It is the first tab stop on every page.
--------------------------------------------------------------------------- */
.emv-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: #0d2337;
  color: #ffffff;
  font-family: 'Mona Sans', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 22px;
  border-bottom-right-radius: 8px;
}
.emv-skip:focus {
  left: 0;
}
/* The header is sticky at z-index 50 and the admin bar sits above that, so the
   link has to clear both when it appears. */
body.admin-bar .emv-skip:focus { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .emv-skip:focus { top: 46px; }
}

/* ---------------------------------------------------------------------------
   THE MASTHEAD — the site-wide page-head, in two rows.

   WHY IT IS TWO ROWS. It was one 76px strip carrying a nameplate, six nav
   links and two controls, and they did not fit: the row measured 1192px inside
   a 1120px shell at every desktop width. Flex cannot shrink a row of nowrap
   labels, so the 72px of overflow went where overflow goes — Subscribe sat
   104px outside the page's own right margin, out of line with every other
   element on the site, and from about 1000 to 1190px of viewport it was cut
   off the screen altogether by the `overflow-x: clip` on .emv-site. The
   primary call to action was unreachable on a half-tiled 1440 window.

   Six long labels ("Free things to do", "Meeting people") need a row of their
   own. That is already what this bar did below 1000px; this promotes it to
   every width, which also happens to be what the publication is. A newspaper
   page-head is a masthead line over a strip of departments, ruled off above
   and below, and the Sept 14 prototype draws the nav that way (`.nav`:
   border-top, border-bottom, the six labels between them).

   WHAT IT COSTS: 34px of sticky height on desktop, 76 → 110. The phone header
   was already 110 for this same reason, so the two now agree.

   RULES, NOT SHADOWS. The two rows are separated by a full-width hairline and
   the whole head is closed by another, which is how this design system
   separates departments everywhere else. Nothing here floats on a shadow. The
   controls are squared to the house 2px rather than the mockup's 8px — 2px is
   the radius used 16 times in this file; 8px was used three times, all of them
   in this header.
--------------------------------------------------------------------------- */
/* THE HEIGHT IS A TOKEN, because three other places in this stylesheet need
   it and every one of them had a copy of the old number written out by hand:
   the subscribe band's scroll stop, the issue headings' scroll stop and
   /new-here/'s section anchors all encoded "the site header is 76px, and 138
   under 780px". They were right when they were written and all three went
   stale the moment this bar became two rows — every anchored jump on the site
   would have landed with its target 36px underneath the header.

   Deterministic now, so it can be a media query rather than a measurement,
   and it lands on the same number at both ends: 68px line + a 46px rail + two
   hairlines is 116 on the desktop, and 60 + 54 + 2 is 116 on the phone, where
   the line is shorter but the tap targets are taller. Only the narrowest
   widths differ, where the nameplate takes a third line. /civic/ still
   measures the real element in JS — it has a second sticky rail of its own to
   add, and the search bar can open under both. */
:root { --emv-head: 116px; }
/* Measured 118 at 320px, where the nameplate takes a third line. Rounded up
   rather than down: an anchor that stops a couple of pixels low is invisible,
   one that stops high hides the line the reader jumped for. */
@media (max-width: 360px) { :root { --emv-head: 120px; } }

.emv-masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Nearly solid rather than the old 0.9 — this is paper, and the blur is
     only insurance for whatever scrolls under it. */
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule, #dde2e8);
}

/* --- Row one: the masthead line ---------------------------------------- */
.emv-masthead__line { border-bottom: 1px solid var(--rule, #dde2e8); }

.emv-masthead__line-inner {
  max-width: var(--shell, 1120px);
  margin: 0 auto;
  padding: 0 var(--gutter, 32px);
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 22px;
}

/* `flex: none` and a nowrap nameplate: this lockup is the one thing in the
   bar that must never be shrunk or broken. On the phone both are released
   (see the 780px block) because there the row is only ever brand + controls. */
.emv-masthead__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--ink, #111827);
  flex: none;
}
.emv-masthead__mark { height: 40px; width: auto; display: block; }
.emv-masthead__name {
  font-size: 20px;
  font-weight: 800;
  /* -0.005em, not the -0.022em this carried until Sept 2026. That number was
     tuned for the Newsreader/Inter pairing; Mona Sans at 800 has closed
     apertures already and minus two-hundredths clotted "Eagle Mountain" into
     one dark mass. line-height 1.1 rather than 1 so the `g` has somewhere to
     go. */
  letter-spacing: -0.005em;
  line-height: 1.1;
  white-space: nowrap;
}
.emv-masthead__accent { color: var(--gold-800, #a0601f); }

/* --- The folio: place and date ------------------------------------------
   It fills the ~575px of dead white this row inherited when the links moved
   down, and it answers the question the homepage prototype says a stranger
   arrives with — "Eagle Mountain Value" is a name, not a description, and
   somebody landing from a search result cannot tell where this is or whether
   it is still running. `margin-right: auto` is what pushes the controls to
   the right margin. */
.emv-masthead__folio {
  margin: 0 auto 0 0;
  padding-left: 22px;
  border-left: 1px solid var(--rule, #dde2e8);
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--slate, #64707d);
  min-width: 0;
}
.emv-masthead__place {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.emv-masthead__date {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

/* --- The controls -------------------------------------------------------
   Both are a true 38px so they sit on one shared top and bottom edge; the
   pair used to measure 40 and 43 and aligned on neither. */
.emv-nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

.emv-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 2px;
  border: 1px solid var(--rule, #dde2e8);
  background: #ffffff;
  color: var(--slate, #64707d);
  cursor: pointer;
  flex: none;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.emv-search-toggle:hover {
  border-color: var(--nv-600, #24486a);
  color: var(--nv-800, #0d2337);
}

.emv-masthead__cta {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 20px;
  border-radius: 2px;
  background: var(--nv-800, #0d2337);
  color: #ffffff;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.emv-masthead__cta:hover { background: var(--nv-700, #16344e); }

/* --- Row two: the department rail ---------------------------------------
   `space-between` rather than a fixed gap: the hairlines above and below run
   the full width, so a left-aligned row would leave a ragged right end under
   a ruled line and read as unfinished. The first label lands under the
   nameplate and the last under Subscribe, both flush to the margin.

   `gap` is still declared — under space-between it acts as the MINIMUM
   spacing, which is what keeps the labels from closing up into a hedge at the
   widths where they only just fit. */
.emv-nav-primary {
  max-width: var(--shell, 1120px);
  margin: 0 auto;
  /* THE 5px TOP AND BOTTOM ARE THE FOCUS RING'S ROOM, and they are not
     optional. `overflow-x: auto` below forces the computed overflow-y to
     `auto` as well — CSS gives you no way to scroll one axis and overflow the
     other visibly — so this box clips anything outside its padding edge. The
     site's focus ring is a 2px outline at a 3px offset, which needs 5px on
     every side of the link. Without this padding the rail was exactly as tall
     as the links inside it and a keyboard user got a ring with its top and
     bottom sliced off. */
  padding: 5px var(--gutter, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  /* Scrollable at EVERY width, not just on the phone. It is a no-op while the
     six fit, and it means there is no band of widths where the rail is too
     wide for the window and simply gets clipped by the `overflow-x: clip` on
     .emv-site. space-between degrades correctly on its own: once free space
     goes negative it behaves as flex-start and the gap above becomes the real
     spacing. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.emv-nav-primary::-webkit-scrollbar { display: none; }

.emv-nav-primary__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  /* 36 here and 44 on the phone, plus the rail's 5px either side. WCAG 2.2 AA
     (2.5.8) floors at 24, so both clear it comfortably; the phone gets the
     full 44 because most arrivals are a thumb tapping a link in the
     newsletter, and the desktop is pointer-driven. Height comes from the link
     rather than the rail so every label sits on one line — and so the two
     breakpoints land the head on the same 116px either way. */
  min-height: 36px;
  color: var(--slate, #64707d);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.emv-nav-primary__link:hover { color: var(--ink, #111827); }

/* THE CURRENT PAGE IS A GOLD BAR, not ink alone. Grey against black at one
   weight is a difference you have to look for; a marker on the rule is one
   you see. `bottom: 0` lands it on the hairline that closes the head, because
   the link's own min-height is what gives the rail its height — there is no
   rail padding between the two. */
.emv-nav-primary__link[aria-current="page"] {
  color: var(--ink, #111827);
  font-weight: 700;
}
.emv-nav-primary__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold-500, #eda23c);
}

/* --- The search bar, toggled by the magnifier --------------------------- */
.emv-search-bar {
  border-top: 1px solid var(--mist-100, #eef0f3);
  background: var(--mist-50, #f7f8fa);
}
.emv-search-bar__form {
  max-width: var(--shell, 1120px);
  margin: 0 auto;
  padding: 14px var(--gutter, 32px);
  display: flex;
  align-items: center;
  gap: 12px;
  /* What the magnifier's stroke="currentColor" resolves against. The input
     sets its own ink, so nothing else inherits this. */
  color: var(--slate, #64707d);
}
.emv-search-bar__form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--ink, #111827);
  font-family: inherit;
  /* 16px exactly: anything smaller and iOS Safari zooms the page on focus. */
  font-size: 16px;
  padding: 6px 0;
}

/* Image placeholders (the mockups leave photo slots empty) */
.emv-imgslot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  background: repeating-linear-gradient(135deg, #eef0f3, #eef0f3 12px, #e7eaee 12px, #e7eaee 24px);
  color: #9aa4b1;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Range slider (Property Tax Estimator) */
input[type="range"] { accent-color: #eda23c; }

/* ---------------------------------------------------------------------------
   Prose — editor-authored body copy (the /about pages, pillar landing pages
   and any generic page). Everything else on the site is inline-styled from
   the mockups; this is the one place where content is written in the admin,
   so it needs real typography rather than browser defaults.
--------------------------------------------------------------------------- */
.emv-prose > *:first-child { margin-top: 0; }
.emv-prose > *:last-child { margin-bottom: 0; }

.emv-prose p { margin: 0 0 1.15em; }

.emv-prose .emv-lede {
  font-size: 1.16em;
  line-height: 1.6;
  color: #111827;
  font-weight: 500;
  margin-bottom: 1.4em;
}

/* THE HEADINGS ARE SET IN THE DISPLAY FACE, like every other heading on the
   site.

   These were Inter at 800 — the mockup's convention, and the last place on the
   site where a section heading was set in the UI face. Every other heading the
   reader meets is Newsreader: the hero, .emv-head on every section of every
   page, the issue titles, the subscribe band. So /about/ and its five children
   read as a different publication from the one that links to them, and the
   giveaway was the type before it was anything else.

   The sizes here stepped up when these headings moved from the UI face to the
   display face, because the serif they moved to sat visually smaller at the
   same em. That serif is gone — the site is one family now — but the sizes are
   left where they are: they were retuned by eye against the surrounding prose,
   not derived from the face, and 1.46em/1.18em is where the hierarchy reads. */
.emv-prose h2 {
  font-family: var(--display, 'Mona Sans', system-ui, -apple-system, sans-serif);
  font-size: 1.46em;
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.18;
  color: var(--ink, #111827);
  margin: 2.1em 0 0.55em;
  padding-top: 1.1em;
  border-top: 1px solid var(--rule, #dde2e8);
}
.emv-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }

.emv-prose h3 {
  font-family: var(--display, 'Mona Sans', system-ui, -apple-system, sans-serif);
  font-size: 1.18em;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.25;
  color: var(--ink, #111827);
  margin: 1.75em 0 0.45em;
}

.emv-prose ul,
.emv-prose ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.emv-prose li { margin-bottom: 0.55em; }
.emv-prose li > strong { color: #111827; }

/* The corrected gold, not the brand file's. #ab6522 measures 4.55:1 on white
   — it passes there and nowhere else, and these links now sit on the sheet
   (#ffffff) inside a page whose sibling components print on --paper, where it
   falls to 4.31:1. --gold-800 is the value :root already records as the
   correction, annotated "was #ab6522". The same substitution was made in the
   /about/ sidebar; the body copy it sits in was simply missed with it. */
.emv-prose a {
  color: var(--gold-800, #a0601f);
  font-weight: 600;
  border-bottom: 1px solid var(--paper-line, #e6c9a8);
}
.emv-prose a:hover,
.emv-prose a:focus-visible { border-bottom-color: var(--gold-800, #a0601f); }

.emv-prose blockquote {
  margin: 1.6em 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid #eda23c;
  color: #4b5563;
}

.emv-prose hr { border: none; border-top: 1px solid #e5e7eb; margin: 2.2em 0; }

.emv-prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
}

/* WordPress admin bar spacing for the sticky header. This used to be
   `header[style*="sticky"]` — it matched on the word "sticky" inside the
   inline style attribute, so it silently stopped applying the moment the
   header's position moved into this file. */
body.admin-bar .emv-masthead { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .emv-masthead { top: 46px; }
}

/* ---------------------------------------------------------------------------
   Responsive fallbacks — the mockups are desktop-first with fixed grids.
   Collapse the multi-column layouts gracefully on smaller screens.
--------------------------------------------------------------------------- */
/* Footer went from three columns to four when the Trust column landed; drop
   to two before the links start wrapping mid-word. */
@media (max-width: 1000px) {
  .emv-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 36px !important; }
}
@media (max-width: 560px) {
  .emv-footer-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 900px) {
  section > div[style*="grid-template-columns"],
  div[style*="grid-template-columns: 1.05fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  div[style*="grid-template-columns: 1fr 384px"],
  div[style*="grid-template-columns: 1.4fr"],
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns: repeat(2"] {
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------------------------
   THE MASTHEAD, NARROWER.

   Nothing here re-arranges the bar any more — it is already two rows at every
   width, which is what the old cascade spent three media queries arranging by
   hand (flex-wrap, order: 3, margin-left: 0, a re-hung margin-left: auto on
   the controls). All that is left is fit.
--------------------------------------------------------------------------- */
@media (max-width: 1000px) {
  /* The folio goes first. Row one has no width to spare below this, and the
     place and date are the one thing in the head that is grace rather than
     navigation. */
  .emv-masthead__folio { display: none; }

  /* IT WAS THE FOLIO THAT PINNED THE CONTROLS TO THE RIGHT MARGIN — its
     `margin-right: auto` ate the free space in row one. Hiding it dropped the
     search button and Subscribe back against the nameplate and left 350px of
     white after them. The auto margin has to move here with it. */
  .emv-nav-actions { margin-left: auto; }

  /* Tighter minimum spacing, so the rail spends what is left of the shell on
     the labels rather than on the air between them. */
  .emv-nav-primary { gap: 22px; }
}

@media (max-width: 780px) {
  /* THE NAMEPLATE IS RELEASED HERE, and only here. Above 780 it is `flex:
     none` with nowrap because six links are competing for its row and flex
     would otherwise crush the lockup to 168px and let the text spill out of
     its own box. On the phone that row holds the brand and two controls and
     nothing else, so the nameplate can shrink and wrap to two lines beside
     the mark — which is what a masthead does at that width. */
  .emv-masthead__line-inner {
    min-height: 60px;
    padding: 8px 20px;
    gap: 14px;
  }
  .emv-masthead__brand { flex: 1 1 auto; min-width: 0; gap: 10px; }
  .emv-masthead__mark { height: 34px; }
  .emv-masthead__name { font-size: 17px; white-space: normal; }

  .emv-nav-actions { gap: 10px; }
  .emv-masthead__cta { padding: 0 14px; font-size: 14px; }

  .emv-nav-primary { padding: 5px 20px; gap: 20px; }
  /* 44px, the comfortable WCAG target rather than the 24px floor. Most
     arrivals are a phone tapping a link in the newsletter, so this row is the
     control the majority of readers actually touch. Horizontal padding is
     deliberately NOT added — it would push a label off the screen and start
     the sideways scroll one item early. */
  .emv-nav-primary__link { min-height: 44px; font-size: 14.5px; }

  .emv-search-bar__form { padding: 12px 20px; }
}

/* ---------------------------------------------------------------------------
   THE STRIP NO LONGER FITS 375 — AND THAT IS NOW THE INTENT.

   It used to. At 375px the row measured scrollWidth 340 against clientWidth
   335 and cut "New here?" through its last characters — five pixels, which
   reads as a rendering fault rather than as an invitation to swipe, and lands
   on the one item a brand-new arrival is looking for. At 390 it fitted at
   exactly 350/350: no slack at all, so a single word of copy anywhere in the
   row brought the clip back. Gap 20 → 14 and 14.5px → 14px reclaimed about
   33px and cleared 375 with room.

   The word arrived. "Registry" became "Business Directory" (132px against 57),
   and 375 now measures 379/335: "New here?" starts on screen and runs 44px
   past the edge. That is deliberately NOT chased back. Forty-four pixels of a
   half-shown label is the swipe affordance five pixels failed to be, and the
   only way to reclaim it — gap 14 → 2 — would jam five links into a hedge.
   Below 780px this row is a scroller by design (see .emv-nav-primary above);
   it is now actually scrolling.

   Taking width out rather than adding padding, for the reason recorded above:
   horizontal padding would start the sideways scroll an item earlier.
   ------------------------------------------------------------------------- */
/* THE LOCKUP HAS TO GIVE WAY BEFORE THE CONTROLS DO.

   Row one on a phone is brand + search + Subscribe, and the controls are
   `flex: none` because a 38px tap target and a call to action are not
   negotiable. Everything that has to yield is therefore in the lockup, and it
   yields in two measured steps rather than by being crushed: the mark and the
   nameplate step down, and Subscribe gives up horizontal padding rather than
   height. Measured clear at 430, 390, 375, 360 and 320 with no overlap. */
@media (max-width: 430px) {
  .emv-masthead__line-inner { gap: 12px; }
  .emv-masthead__brand { gap: 8px; }
  .emv-masthead__mark { height: 30px; }
  .emv-masthead__name { font-size: 15px; }
  .emv-nav-actions { gap: 8px; }
  .emv-masthead__cta { padding: 0 12px; font-size: 13.5px; }
}

@media (max-width: 400px) {
  .emv-nav-primary { gap: 14px; }
  .emv-nav-primary__link { font-size: 14px; }
}

@media (max-width: 360px) {
  .emv-masthead__mark { height: 28px; }
  .emv-masthead__name { font-size: 14px; }
  .emv-masthead__cta { padding: 0 10px; font-size: 13px; }
}

@media (max-width: 720px) {
  .emv-hide-mobile { display: none !important; }
  div[style*="grid-template-columns: 92px 1fr auto"] { grid-template-columns: 64px 1fr auto !important; gap: 14px !important; }
  section [style*="padding: 64px 56px"],
  section [style*="padding: 60px 56px"] { padding: 40px 24px !important; }
}

/* ===========================================================================
   THE BROADSHEET — the site's design system
   ---------------------------------------------------------------------------
   It lives in a stylesheet because hover, :focus-visible, media queries and
   prefers-reduced-motion cannot be written into a style attribute.

   2026-08-17: THE SCOPE NOW COVERS THE WHOLE PUBLIC SITE. It was reaching four
   page types — the front page, /issue-library/, /civic/ (via its own sheet) and
   the issue hero — while /directory/, /about/ plus its five policy children,
   /events/ and /contact/ rendered outside it and therefore still wore the
   original mockup: an Inter masthead at 40px against Newsreader at 51–66px, a
   16px-rounded subscribe band against a squared one, and the browser's default
   blue focus ring against the designed gold one. Which of the two systems a
   reader saw depended on which link they had followed.

   page.php, template-directory.php and template-coming-soon.php now open with
   the wrapper, and emv_page_head() renders the shared hero rather than a second
   masthead of its own. Anything below that is scoped to a single page carries
   its own second class (.emv-home, .emv-library, .emv-page, .emv-directory,
   .emv-soon) — the scope holds what is true of the printing, never of one page.

   Editorial layout — Newsreader for headlines, Inter for interface, hairline
   rules instead of card grids. The page is a community paper: the newsletter
   leads, city hall is one section inside it, not the whole front page.

   The scope was called .emv-home until the Issue Library was set from the same
   case. Two pages now share these tokens, these atoms (eyebrow, folio, link,
   button, chip) and this behaviour (one focus ring, one reveal, one reduced-
   motion rule), so the scope is named for the printing rather than for the
   page: .emv-broadsheet carries the design system, .emv-home and .emv-library
   carry only what is true of one page. A component built here is available to
   both — the library's masthead IS the home hero in its no-photograph state,
   and its finder IS the hero's subscription coupon with a search blank ruled
   onto it instead of an email one.
   =========================================================================== */
.emv-broadsheet {
  --nv-900: #071825;
  --nv-800: #0d2337;
  --nv-700: #16344e;
  --nv-600: #24486a;
  --nv-500: #37618c;
  --gold-500: #eda23c;
  --gold-400: #f2b764;
  --ink: #111827;

  /*
   * Two brand tokens, nudged, and only inside this page. design-tokens.json
   * derives gold.800 (#ab6522) as "Ember's hue darkened until it clears WCAG
   * AA on white", and it does: 4.55:1. But this page also sets accent text on
   * mist (#f7f8fa) and paper (#fbf4ec), where it falls to 4.28 and 4.17.
   * Brand slate (#6b7280) likewise drops to 4.43 on paper. Each is darkened
   * by the smallest amount that clears 4.5:1 on all three surfaces, extending
   * the token file's own rule to the backgrounds actually in use.
   */
  --gold-800: #a0601f;  /* was #ab6522 — 5.01 / 4.72 / 4.60 */
  --slate:    #64707d;  /* was #6b7280 — 5.05 / 4.76 / 4.63 */

  --mist-400: #9ca3af;  /* decorative only — fails AA on every surface here */
  --mist-200: #e5e7eb;
  --mist-100: #eef0f3;
  --mist-50:  #f7f8fa;
  --paper: #fbf4ec;
  --paper-line: #e6c9a8;
  --dim: #a9bdd0;
  /* The Civic page's --yea / --nay under this page's names. A passed and a
     failed motion have to be told apart in the city hall column, and inventing
     a second pair of verdict colours for the home page would put two greens and
     two reds in one design system. */
  --green: #1b7f5a;
  --red: #a4231c;

  /*
   * Rules, not shadows. This page is set the way a paper is set: sections are
   * separated by ruled lines of two weights — a heavy one that opens a
   * department and a hairline that separates entries inside it — and by the
   * colour of the stock underneath. Nothing on the page floats on a drop
   * shadow except the one control that has to look pressable.
   */
  --rule-heavy: var(--ink);
  --rule: #dde2e8;
  --rule-warm: #e8d9c4;

  /* One family, two names. The site ran Newsreader against Inter until Sept
     2026; it is Mona Sans throughout now, but the tokens stay split so the
     display/text distinction remains something the CSS can express — and so
     reintroducing a display face is a two-line change rather than a hunt
     through 200 call sites. Hierarchy is carried by weight and tracking. */
  --display: 'Mona Sans', system-ui, -apple-system, sans-serif;
  --ui: 'Mona Sans', system-ui, -apple-system, sans-serif;

  --shell: 1120px;
  --gutter: 32px;
}

.emv-shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* --- THE MEASURE: RUNNING TEXT RUNS THE SHEET ------------------------------
   2026-09-16, site-wide, and it reverses a rule that had been applied one
   component at a time since the panels landed.

   Every body paragraph on this site used to carry its own `ch` cap — 62, 66,
   68, 72 — chosen for reading comfort. On a flat page that is correct
   typography. On a SHEET it is not, because the sheet already measures the
   page: the panel has edges, the items inside it draw hairlines from edge to
   edge, and a paragraph that stops 300px short of those edges does not read as
   a considered line length. It reads as text that failed to fill its box, with
   a rule underneath pointing at nothing for the last third of its run. That is
   what was reported, twice, on two unrelated pages.

   So the sheet is the measure. A paragraph inside a panel takes the panel's
   width, which is 1,056px at the widest and narrower at every step below it.

   WHAT KEEPS A CAP, and why each one is not the same thing:
     - `.emv-shell`, `.emv-c-shell`, `.emv-signup__plate` — these ARE the box.
       Uncapping them uncaps the page.
     - Headlines (`.emv-head`, `.emv-hero__title`, `.emv-lead__title`). A
       24ch cap on 40px display type is a headline break, not a short line, and
       nothing draws a rule to its right.
     - The hero mastheads (`.emv-hero__body`, `.emv-hero__deck`,
       `.emv-c-head__deck`). A masthead is a composition on colour, not a sheet
       with a ruled foot.
     - Anything that sets a COLUMN in a multi-column object — `.emv-page-doc`
       in the /about/ grid, the subscribe band's particulars. There the cap is
       the column, and the text already fills it.
   -------------------------------------------------------------------------- */

/* --- Atoms ---------------------------------------------------------------- */

/* Section label. A newspaper department head: the label stands on its own
   rule, and the rule measures the words rather than a fixed ornament width.
   Tokens carry fallbacks because the pages still built from inline styles
   (page heads, subscribe bands, the welcome issue) use this atom outside the
   .emv-broadsheet / .emv-council / .emv-dir token scopes. */
.emv-eyebrow {
  display: inline-block;
  justify-self: start;
  max-width: 100%;
  margin: 0 0 18px;
  font-family: var(--ui, 'Mona Sans', system-ui, -apple-system, sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-800, #a0601f);
}
/* A stepped rule — a solid lead segment dropping to a hairline, the way a
   printer's rule sits under a department head. Two layers on one 2px band:
   the hairline runs the full width, the heavy segment overprints its start. */
.emv-eyebrow::after {
  content: "";
  display: block;
  height: 2px;
  margin-top: 9px;
  background:
    linear-gradient(currentColor 0 0) 0 0 / 20px 2px no-repeat,
    linear-gradient(currentColor 0 0) 0 0 / 100% 1px no-repeat;
}
.emv-eyebrow--onDark { color: var(--gold-500, #eda23c); }
/* On a photograph it steps up one tint. gold-500 clears the flat navy panels
   this modifier was written for by a mile, but the home hero is not a flat
   panel — the eyebrow is the topmost line of the copy block, which puts it on
   lit sky no matter how the picture is cropped, and the scrim can only be
   pushed so far before the sunset is gone. gold-400 is not a new colour here:
   it is what the headline's italic is already set in, one line below. */
.emv-hero:not(.emv-hero--noimg) .emv-eyebrow--onDark { color: var(--gold-400, #f2b764); }

.emv-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
}
.emv-chip::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.emv-chip--onDark { color: var(--gold-500); }
.emv-chip--plain  { color: var(--gold-800); }

/* Figures never reflow as the slider moves. */
.emv-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
/* A vote tally is one token; the en dash in "5–0" is otherwise a break point. */
.emv-nowrap { white-space: nowrap; }

.emv-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 700;
  color: var(--gold-800);
  transition: gap 160ms ease, color 160ms ease;
}
.emv-link svg { flex: none; }
.emv-link:hover { color: #7f4b16; gap: 12px; }
.emv-link--onDark { color: var(--gold-500); }
.emv-link--onDark:hover { color: var(--gold-400); }

/* A link set inside a paragraph of running copy, where .emv-link's inline-flex
   row would break the line. It lived in assets/css/civic.css until the shared
   civic-tool wrapper started emitting one — inc/civic-tools.php's "Tell the
   council" line rides along with the estimator onto the home page, which does
   not load that stylesheet, so the link came out in default browser blue. A
   class the markup layer reaches for anywhere has to be styled everywhere. */
.emv-c-inline {
  color: var(--gold-800);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.emv-c-inline:hover { color: #7f4b16; }

.emv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  padding: 14px 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
/* Fallbacks, for the reason .emv-eyebrow's carry them: a var() that resolves
   to nothing is invalid at computed-value time, so a button rendered outside
   a token scope loses its GROUND — it came out as dark text on nothing. The
   subscribe band is exactly that case: it closes /civic/, which is outside
   .emv-broadsheet, and its button was the one that went missing. */
.emv-btn--primary { background: var(--nv-800, #0d2337); color: #fff; }
.emv-btn--primary:hover { background: var(--nv-700, #16344e); }
.emv-btn--gold { background: var(--gold-500, #eda23c); color: var(--nv-900, #071825); font-size: 16px; padding: 15px 26px; }
.emv-btn--gold:hover { background: var(--gold-400, #f2b764); }
/* The site's focus ring is gold, and this button is gold — measured, the
   outline came out at exactly the background colour, which is a focus
   indicator with a contrast ratio of 1:1 on every gold button on the site
   (the hero coupon, the band, and Civic's off-site link). All three sit on
   warm stock, so the ring is drawn in ink there: 8.4:1 against the button and
   17:1 against the paper it stands on. The compound selector is deliberate —
   `.emv-broadsheet :focus-visible` scores the same as a single class plus a
   pseudo-class and is declared later in this file, so a plainer selector
   loses the tie. */
.emv-btn.emv-btn--gold:focus-visible { outline-color: var(--nv-900, #071825); }
.emv-btn--ghost { background: transparent; color: var(--ink, #111827); border-color: var(--mist-200, #e5e7eb); }
.emv-btn--ghost:hover { border-color: var(--nv-600, #24486a); }

/* One focus treatment for the page, never removed. */
.emv-broadsheet :focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; }

.emv-head {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.3rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0 0 12px;
  max-width: 24ch;
}
.emv-head--onDark { color: #fff; }
.emv-head:last-child { margin-bottom: 0; }
.emv-deck { font-family: var(--ui); font-size: 16.5px; line-height: 1.65; color: var(--slate); margin: 0; }

/* --- The subscribe band ---------------------------------------------------
   The closing ask, and the only component that renders on all eleven
   templates. It is the paper's standing house advertisement: a navy plate,
   the pitch printed on the left, and THE PARTICULARS ruled down the right.

   That right-hand column is the whole redesign. The band was a 620px block of
   copy inside a 1120px panel — 45% of the widest object on the page was empty
   navy — and what now stands in the space is not decoration but the four
   questions a reader asks before typing an address: how often it comes, what
   it costs, who else takes it, how to stop it. It is set the way .emv-figstrip
   sets a standing statistic, because that is what it is.

   Everything here used to be a `style` attribute on the markup, which is why
   the stylesheet carried a block of `.emv-broadsheet #subscribe … !important`
   further down to undo the radii and the Inter headline — and why /civic/, the
   one template outside that scope, still drew the original rounded card. Those
   overrides are gone. Every token below carries a fallback for the same
   reason .emv-eyebrow's do: this component cannot assume the scope it lands in.
   -------------------------------------------------------------------------- */
.emv-signup {
  --signup-ground: var(--nv-900, #071825);
  --signup-rule: var(--nv-600, #24486a);
  /* The quiet type on navy. #6b8299 was the old note colour and measures
     4.51:1 — inside AA by two hundredths, which is not a margin. This is
     5.63:1 and still reads as the quiet weight. */
  --signup-quiet: #7d93a8;

  max-width: var(--shell, 1120px);
  margin: 56px auto 80px;
  padding: 0 var(--gutter, 32px);
}

/* The plate. A gold rule opens it the way a heavy rule opens a department, and
   the ground is lifted very slightly under the copy — flat navy at this size
   reads as a hole in the page rather than as printed stock. No shadow and no
   radius: the standing rule of this printing is that separation comes from the
   ground and the rules on it. */
.emv-signup__plate {
  position: relative;
  /* ONE COLUMN, 2026-09-16, and this is the other half of removing the
     particulars. The plate was `minmax(0, 1fr) 296px` with a 56px gutter, and
     when the four facts came out of emv_subscribe_band() the track stayed — so
     every page on the site closed with 352px of empty navy down the right of
     its widest object, which is the fault the column was introduced to fix,
     arriving the other way round. The ask takes the plate. */
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  padding: 52px 56px 54px;
  border-top: 3px solid var(--gold-500, #eda23c);
  background:
    radial-gradient(118% 92% at 6% 0%, rgba(55, 97, 140, 0.26), rgba(55, 97, 140, 0) 62%),
    var(--signup-ground);
}

.emv-signup__title {
  font-family: var(--display, 'Mona Sans', system-ui, -apple-system, sans-serif);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: #ffffff;
  margin: 0 0 14px;
  max-width: 17ch;
  text-wrap: balance;
}
.emv-signup__deck {
  font-family: var(--ui, 'Mona Sans', system-ui, -apple-system, sans-serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--dim, #a9bdd0);
  margin: 0 0 30px;
}

/* --- The coupon -----------------------------------------------------------
   The form is printed on warm stock, the same object the front page's hero
   carries and for the reason written at .emv-coupon: against a blue-black
   ground a warm sheet reads as paper and a white one reads as a dialog box.
   The clipped dashed hairline is the one detail that says coupon rather than
   card, and the ink rule across the top is the same department mark the plate
   itself opens with — in ink, because gold on gold would be two marks.
   -------------------------------------------------------------------------- */
/* THE ONE THING ON THIS PLATE THAT IS NOT SET TO THE MEASURE, and it is not
   text. With the particulars gone the coupon's column is the whole plate
   again, so the cap that used to live in the 860px block is a base rule once
   more: an email blank ruled across 1,008px does not read as a coupon, it
   reads as a search bar, and the reader has to travel the width of the page
   from the field to the button. Everything above and below it — the bridge,
   the deck, the fine print — takes the plate, which is what makes the short
   blank read as a form rather than as a column that stopped early.
   Released again at 560, where the field and the button stack. */
.emv-signup__coupon {
  max-width: 480px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 18px;
  padding: 20px 22px 22px;
  background: var(--paper, #fbf4ec);
  border-top: 3px solid var(--nv-900, #071825);
}
.emv-signup__coupon::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(7, 24, 37, 0.34);
  pointer-events: none;
}

/* A ruled blank, not a box. The field is the line you write on. */
.emv-signup__blank {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--ui, 'Mona Sans', system-ui, -apple-system, sans-serif);
  font-size: 16px;
  color: var(--ink, #111827);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(7, 24, 37, 0.38);
  border-radius: 0;
  /* 12px for the reason written at .emv-hero__form's blank: 10 measured 41px
     tall against a 44px minimum. The two blanks are the same object printed
     twice and have to stay the same height. */
  padding: 12px 2px;
  transition: border-color 160ms ease;
}
.emv-signup__blank::placeholder { color: var(--slate, #64707d); }
.emv-signup__blank:hover { border-bottom-color: var(--nv-800, #0d2337); }
/* Ink, not gold. The site's gold ring is calibrated against navy; on warm
   stock it nearly disappears, and this is the one field the whole band is
   asking to be filled in. */
.emv-signup__blank:focus-visible {
  outline: 2px solid var(--nv-800, #0d2337);
  outline-offset: 3px;
  border-radius: 2px;
  border-bottom-color: var(--nv-800, #0d2337);
}
.emv-signup__go {
  position: relative;
  flex: none;
  border-radius: 2px;
  padding: 13px 24px;
}

/* The tool teaser. Not a card and not a button: a line of type in the column
   the calculator used to fill, so the section keeps its two-column shape on a
   tax week without the front page doing the Civic page's work. */
.emv-cityhall__teaser {
  display: flex;
  align-items: flex-start;
  padding-top: 6px;
}
.emv-cityhall__teaserLink {
  font-family: var(--display, 'Mona Sans', system-ui, -apple-system, sans-serif);
  font-size: 21px;
  line-height: 1.4;
  max-width: 22ch;
}

/* ----------------------------------------------------------------------------
   THE COLOPHON — .emv-who
   ----------------------------------------------------------------------------
   The block a paper prints to say who makes it, set as a SIGNED NOTE: the
   portrait in the left column, and in the right the writer's own words in
   italic display type, closed by the rule-gap-rule motif and the signature.

   THE ORDER IS THE DESIGN. Note, then mark, then name — that is a letter.
   Name, then role, then paragraph is a staff directory, which is what this
   block was on its first pass and is the single most generic composition on
   the internet. Nothing else changed to fix that; the order did.

   A PERSON, NOT A CARD. No border, no lift, no shadow: the portrait and the
   note sit on the sheet's own stock, the way a masthead photograph sits in a
   paper. The sheet is warm (.emv-band--paper), which is what separates this
   from the four white sheets above it without drawing a box.

   The portrait is a fixed square rather than the photograph's own ratio, so a
   second person added later cannot change the block's rhythm by supplying a
   differently-shaped file. It is capped with the same 3px gold rule the tiles
   and the folios carry — the theme's way of saying "this is a named thing".
   -------------------------------------------------------------------------- */
.emv-who {
  list-style: none;
  /* The 34px every other section puts between its head and its content. There
     is no .emv-sec__deck in this band to inherit it from. */
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 44px;
}
.emv-who__person {
  display: grid;
  /* Asymmetric on purpose. The note is held to a reading measure rather than
     stretched across a 1038px sheet; what is left is margin, which is what a
     colophon should have. */
  grid-template-columns: 216px minmax(0, 54ch);
  gap: 42px;
  align-items: start;
}

/* --- The plate ------------------------------------------------------------ */
.emv-who__plate {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--nv-800, #0d2337);
  border-bottom: 3px solid var(--gold-500, #eda23c);
}
.emv-who__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* NO PHOTOGRAPH YET — and the left column goes with it, 2026-09-16.
   .emv-who__plate--empty used to draw a hatched square reading "Add headshot",
   on the argument that the composition needs the left column to hold its width
   either way. It does not: the note is already held to a reading measure, so
   dropping the column leaves a signed paragraph at its natural width, which is
   what a colophon without a portrait should look like. What the hatch actually
   did was show every visitor the outline of something that is not there. See
   the note in front-page.php. */
.emv-who__person--nophoto {
  grid-template-columns: minmax(0, 54ch);
}

/* --- The note ------------------------------------------------------------- */
/* The one piece of first-person copy on the front page, and the only italic
   setting on it outside the hero. Italic is the site's voice-of-a-person mark;
   the rest of the page is upright because the rest of the page is the
   publication talking. */
.emv-who__note {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.16rem, 1.02rem + 0.52vw, 1.45rem);
  line-height: 1.52;
  /* Mona Sans has no optical-size axis; every setting above ~18px is tracked
     in by hand. See the note in emv_assets(). */
  letter-spacing: -0.008em;
  color: var(--nv-800, #0d2337);
  margin: 0;
  text-wrap: pretty;
  /* HANGING PUNCTUATION. The opening quote hangs OUTSIDE the measure so that
     every line of the note — and the signature below it — starts on one
     vertical. Set the mark inside the measure instead and the whole block sits
     a glyph-width right of the name under it, which is the detail that makes
     a pull quote look pasted in rather than set.

     --hang is the measured advance width of “ in Mona Sans at this setting:
     8.31px at 22.98px type = 0.362em. It is a ratio of the glyph, so it holds
     at every step of the clamp above. Re-measure it if the display face ever
     changes — the two lines below are the only thing keeping the note and the
     name on the same left edge, and being wrong is invisible until you look
     for it. The largest it can hang is ~8px against the sheet's smallest
     padding (20px at phone width), so it cannot reach the sheet's edge. */
  --hang: 0.362em;
  text-indent: calc(var(--hang) * -1);
}
.emv-who__note::before {
  content: '\201C';
  /* Upright inside an italic paragraph: an italic quote mark at this size
     leans away from the line it opens and reads as a stray mark. */
  font-style: normal;
  color: var(--gold-500, #eda23c);
}

/* --- The signature -------------------------------------------------------- */
.emv-who__sign { margin: 26px 0 0; }

/* The house rule-gap-rule mark. The design system reserves it for mastheads,
   section dividers and SIGN-OFF LINES; this is the site's only sign-off line,
   and it was the one place the mark was missing. Tokens from the system:
   28px rules, 10px gap, 2px thick. */
.emv-who__motif {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}
.emv-who__motif::before,
.emv-who__motif::after {
  content: '';
  display: block;
  width: 28px;
  height: 2px;
  background: var(--gold-500, #eda23c);
}
.emv-who__name {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.45rem, 1.28rem + 0.62vw, 1.78rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
  color: var(--nv-900, #071825);
}
/* Was --nv-500 semibold, which is blue text at link weight sitting under a
   name: it read as a link and is not one. Slate measures 4.78:1 on this sheet
   (--panel is #fdf8f1 on a --paper band, NOT the --paper token itself) and is
   the colour every other caption on the site uses. */
.emv-who__role {
  display: block;
  margin-top: 10px;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--slate, #64707d);
}

@media (max-width: 800px) {
  .emv-who__person { grid-template-columns: 180px minmax(0, 1fr); gap: 32px; }
  /* Re-stated because the rule above resets the columns at this width and the
     modifier is no more specific than it is. */
  .emv-who__person--nophoto { grid-template-columns: minmax(0, 1fr); }
}
/* Stacked, and the plate comes down with it. A 216px square above a note is
   still a masthead photograph; a 216px square is not something to set beside
   a 30-character measure. */
@media (max-width: 640px) {
  .emv-who { gap: 36px; }
  .emv-who__person { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .emv-who__plate { width: 168px; }
  .emv-who__sign { margin-top: 22px; }
}

/* ----------------------------------------------------------------------------
   THE SECTION HEAD — .emv-sec__head / .emv-sec__deck
   ----------------------------------------------------------------------------
   The title and the subtitle that now open every section, under the same
   .emv-folio rule the page already used. The subtitle used to carry a 58ch cap
   so that it read as one line; it still does, because the copy is one
   sentence, and the cap was making the sentence wrap early inside a sheet
   twice its width. See "THE MEASURE" above.
   -------------------------------------------------------------------------- */
.emv-sec__head { margin: 22px 0 0; }
.emv-sec__deck {
  margin: 12px 0 0;
}
/* The proof — whatever the section is showing — hangs below the subtitle at
   the same distance in every section, so the rhythm holds across a page whose
   sections contain very different objects. */
.emv-sec__head + .emv-sec__deck + * { margin-top: 34px; }

/* ----------------------------------------------------------------------------
   THE SECTION DOOR — .emv-door
   ----------------------------------------------------------------------------
   One button per section, bottom-left, on the section's own left edge. See
   emv_section_door(). The margin above it is larger than the gap inside the
   section's content so the button reads as the section closing rather than as
   one more item in the list.
   -------------------------------------------------------------------------- */
.emv-door { margin: 40px 0 0; }
.emv-door__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 2px;
}
/* The arrow travels on hover — the only motion on the control, and it points
   the way the button goes. Suppressed under reduced-motion by the sitewide
   guard further down this file. */
.emv-door__arrow { transition: transform 160ms ease; }
.emv-door__btn:hover .emv-door__arrow { transform: translateX(3px); }

/* The bridge line — one sentence above an otherwise identical block, carrying
   the reason this page's reader in particular should subscribe. Set as a lede
   rather than an eyebrow: it is a sentence, not a label, and it has to read as
   the last thing the page says rather than the first thing the band does. */
/* `--display`, not `--serif`. These four rules asked for a token that is
   declared nowhere on the site — .emv-broadsheet, .emv-council and .emv-dir all
   name it `--display` — so every one of them was silently falling through to
   its own literal fallback. They rendered in Newsreader by luck, and any change
   to the display face would have missed them. */
.emv-signup__bridge {
  font-family: var(--display, 'Mona Sans', system-ui, -apple-system, sans-serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--signup-quiet);
  margin: 0 0 22px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}

/* ----------------------------------------------------------------------------
   THE CONSENT ROW — .emv-consent
   ----------------------------------------------------------------------------
   A real checkbox inside the coupon, on both forms. It is `required`, so the
   browser blocks the submit and names the control with no script involved;
   this has to hold when JS fails, because a consent that only exists in
   JavaScript is not a consent.

   Set as the small print on a printed coupon: ranged left under the blank,
   hanging indent so the sentence wraps to its own left edge rather than under
   the box. Ink on the warm stock, not the navy plate — the coupon is paper and
   everything printed on it is ink.

   The focus ring is ink for the same reason .emv-signup__blank's is: the
   site's gold ring is calibrated against navy and nearly vanishes on paper.
   -------------------------------------------------------------------------- */
.emv-consent {
  flex: 1 0 100%;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 2px 0 0;
  font-family: var(--ui, 'Mona Sans', system-ui, -apple-system, sans-serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink, #111827);
}
/* The box is drawn at 18px and TARGETED at 24.
   It was 15 x 15 — the only control on the page under the WCAG 2.5.8 floor of
   24, and the required gate on the one thing these pages ask anyone to do, on
   a phone, one-handed. The ::before carries the hit area outward without
   changing the drawn square, so the printed-form look survives; `position` on
   the box is what the pseudo-element hangs off. The label is still a target in
   its own right, as it was. */
.emv-consent__box {
  position: relative;
  flex: none;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--nv-800, #0d2337);
  cursor: pointer;
}
.emv-consent__box::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
}
.emv-consent__box:focus-visible {
  outline: 2px solid var(--nv-800, #0d2337);
  outline-offset: 2px;
}
.emv-consent__label { cursor: pointer; }
/* The two policy links are the only ink-coloured links on the stock, so they
   carry an underline rather than a colour change — see .emv-signup__blank for
   why gold is not available down here. */
.emv-consent__label a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.emv-consent__label a:hover { text-decoration-thickness: 2px; }
.emv-consent__label a:focus-visible {
  outline: 2px solid var(--nv-800, #0d2337);
  outline-offset: 2px;
  border-radius: 2px;
}

.emv-signup__note {
  font-family: var(--ui, 'Mona Sans', system-ui, -apple-system, sans-serif);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--signup-quiet);
  margin: 16px 0 0;
}

/* The confirmation replaces the coupon, so it is printed on the same stock —
   swapping a sheet of paper for a floating pill would collapse the object the
   reader was just looking at. Green, not gold: a check mark is a verdict. */
.emv-signup__done {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  padding: 16px 22px;
  background: var(--paper, #fbf4ec);
  border-top: 3px solid var(--nv-900, #071825);
  font-family: var(--ui, 'Mona Sans', system-ui, -apple-system, sans-serif);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink, #111827);
}
.emv-signup__done svg { flex: none; color: var(--green, #1b7f5a); }

/* --- The particulars ------------------------------------------------------
   Four standing facts, ruled. The column hairline runs the full depth of the
   plate rather than the depth of the list — align-items: stretch on the grid
   is what does that, and without it the rule stops wherever the shorter column
   ran out of copy.
   -------------------------------------------------------------------------- */
.emv-signup__terms {
  border-left: 1px solid var(--signup-rule);
  padding-left: 40px;
}
.emv-signup__termsHead {
  font-family: var(--ui, 'Mona Sans', system-ui, -apple-system, sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signup-quiet);
  margin: 0;
  padding-bottom: 14px;
}
/* The list closes on a rule. Without one the column simply stops, and a
   department that stops is not the same as a department that ends. */
.emv-signup__list {
  margin: 0;
  border-bottom: 1px solid var(--signup-rule);
}
.emv-signup__row {
  padding: 14px 0 15px;
  border-top: 1px solid var(--signup-rule);
}
/* The opening rule is the bright one — a department head stands on a heavier
   line than the entries under it. */
.emv-signup__row:first-child { border-top-color: var(--dim, #a9bdd0); }
.emv-signup__row dt {
  font-family: var(--ui, 'Mona Sans', system-ui, -apple-system, sans-serif);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--signup-quiet);
  margin: 0 0 6px;
}
.emv-signup__row dd {
  margin: 0;
  font-family: var(--display, 'Mona Sans', system-ui, -apple-system, sans-serif);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: #ffffff;
}
/* Lining tabular figures so the column does not reflow its own width the day
   the count ticks over into another digit. */
.emv-signup__fig {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
}
.emv-signup__unit {
  font-family: var(--ui, 'Mona Sans', system-ui, -apple-system, sans-serif);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--dim, #a9bdd0);
  margin-left: 5px;
}

/* --- The anchor lands under a sticky header --------------------------------
   The header's Subscribe is a link to #subscribe, and the header itself is
   `position: sticky`. So the jump put the band's top edge at y=0 with 77px of
   header sitting on top of it: the gold cap rule and the opening of the band —
   the printed-sheet signature every section on this site opens on — landed
   behind the header. The header is taller once the nav drops to its own row,
   hence the two steps. theme.js initAnchorFocus() handles the other half of
   this, which is where the caret goes.

   THE FIGURES ARE MEASURED, NOT ASSUMED. The header does not have two heights,
   it has three, and they step exactly where the two rules below it do:

       above 780px .......  77px   (one row)
       520 - 780px ....... 113px   (nav drops to its own row)
       up to  510px ...... 157px   (the actions wrap under the logo too)

   Each stop is that height plus a 15px breath. A single 154px step — the
   figure the issue headings further down this file use, from a 138px header
   that is no longer what this one measures — lands three pixels short at phone
   width, which is enough to shave the band's gold cap rule. Verified at 360,
   375, 390, 430, 460, 480, 500, 520, 560, 620, 700, 780, 800, 900, 1100, 1440.
   -------------------------------------------------------------------------- */
/* One stop rather than three, now that the header is one height rather than
   growing a row and then a wrapped nameplate under it. The 16px breath is what
   keeps the band's gold cap rule clear of the bar. */
.emv-signup { scroll-margin-top: calc(var(--emv-head) + 16px); }

/* --- The band's motion ----------------------------------------------------
   Declared here rather than left to `.emv-broadsheet [data-reveal]`, because
   /civic/ renders this band outside that scope and would otherwise get no
   entrance and — worse — no reduced-motion guard.
   -------------------------------------------------------------------------- */
.emv-signup [data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms ease, transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* The particulars land after the ask, not with it. */
.emv-signup__terms[data-reveal] { transition-delay: 110ms; }

@media (prefers-reduced-motion: reduce) {
  .emv-signup [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --- The band, narrowed ---------------------------------------------------- */
@media (max-width: 1000px) {
  .emv-signup__plate { padding: 46px 40px 48px; }
  .emv-signup__terms { padding-left: 30px; }
}

/* The column becomes a strip. Below this the particulars cannot hold a column
   beside the ask without squeezing both, so they go under it and set as a
   ruled two-up — which is .emv-figstrip's arrangement, and the one this list
   borrowed its type from in the first place. */
@media (max-width: 860px) {
  .emv-signup__plate {
    grid-template-columns: 1fr;
    row-gap: 32px;
    padding: 42px 34px 44px;
  }
  .emv-signup__terms {
    border-left: none;
    border-top: 1px solid var(--dim, #a9bdd0);
    padding-left: 0;
    padding-top: 20px;
  }
  /* Exactly two columns, never auto-fit: three across leaves the fourth row
     orphaned under a closing rule that then runs across nothing. Two columns
     set four particulars as a block and three as a block with one short cell,
     and both close square. The column hairline and the cell padding are
     .emv-figstrip's, which is the arrangement this is borrowing. */
  .emv-signup__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .emv-signup__row { padding-right: 24px; }
  .emv-signup__row:nth-child(even) {
    padding-left: 24px;
    border-left: 1px solid var(--signup-rule);
  }
  .emv-signup__row:first-child { border-top-color: var(--signup-rule); }
}

@media (max-width: 560px) {
  .emv-signup { padding: 0 var(--gutter, 20px); }
  .emv-signup__plate { padding: 32px 22px 34px; }
  .emv-signup__title { max-width: none; }
  .emv-signup__deck { margin-bottom: 26px; }
  /* At coupon width a row crushes the field, and stacking is also what makes
     it read as something filled in: a ruled blank with an instruction under. */
  .emv-signup__coupon {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    max-width: none;
  }
  .emv-signup__go { width: 100%; padding: 15px 24px; }
  .emv-signup__done { display: flex; }
  .emv-signup__list { grid-template-columns: 1fr; }
}

/* --- Hero -----------------------------------------------------------------
   The photograph IS the hero — full bleed, with the headline set into it. It
   used to be a card floating beside the copy inside a navy box, which is the
   arrangement every landing page on the internet arrives at by default.

   The copy is anchored to the BOTTOM of the frame, and that is the whole
   design. In the valley-at-sunset photograph this page is built around, the
   sky is the bright half and everything under the horizon is nearly black,
   lit only by house windows. Setting the type down there means the picture
   supplies most of its own contrast, the scrim stays light enough to keep the
   sunset intact, and the headline lands among the lit windows of the town it
   is about. A replacement image wants the same shape: dark along the bottom.
   -------------------------------------------------------------------------- */
/* The height is a composition decision, not a taste one. A 4:3 photograph
   cropped to 1440 × H shows H/1080 of its height, so the taller the hero, the
   less the crop can be moved — and past about 700px the horizon is pinned to
   the middle of the frame with the headline sitting on lit sky. At 700px and
   below, with the crop pushed to the bottom, the horizon lands in the upper
   third and the valley floor fills the rest, which is the arrangement the type
   needs. Hence a cap well under the viewport rather than a full-bleed 100vh. */
.emv-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(540px, 76vh, 760px);
  background: var(--nv-900);
  overflow: hidden;
  isolation: isolate;
}

.emv-hero__bg { position: absolute; inset: 0; z-index: -2; }
.emv-hero__bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Lower the picture in the frame — more sunset above the horizon, less of
     the flat valley floor along the bottom edge. Every point this drops moves
     the horizon further down the hero and puts more of the headline on lit
     sky, so the scrim's middle stops are set to match; the two are tuned
     together and neither should be changed on its own. */
  object-position: 50% 78%;
}

/* Two scrims doing two different jobs. The vertical one lifts the copy off the
   valley floor and dies out before it reaches the sunset. The horizontal one
   protects the left third on a wide screen, where the picture opens up and a
   long headline would otherwise run out onto lit sky.

   These were first tuned against a copy block that ended around the horizon.
   It does not any more: the headline runs to four lines, and eyebrow, rule and
   first line now sit ABOVE the ridge, on the brightest part of the picture —
   the yellow band where the sun is actually setting. A vertical gradient can't
   reach that far up without flattening the sky across the full width, so the
   work is done by the left-hand pair instead, which is where the type is. The
   right half of the frame, which is all sunset and a cream coupon that carries
   its own contrast, is left where it was. */
.emv-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* Anchored under the copy block itself, so the headline gets its own
       shadow without the sunset losing a stop of exposure. Wider and taller
       than the block it covers, and centred low, so its falloff — not its
       edge — is what crosses the type. */
    radial-gradient(120% 108% at 2% 80%,
      rgba(7, 24, 37, 0.80) 0%,
      rgba(7, 24, 37, 0.48) 50%,
      rgba(7, 24, 37, 0.00) 78%),
    linear-gradient(to top,
      rgba(7, 24, 37, 0.76) 0%,
      rgba(7, 24, 37, 0.70) 24%,
      rgba(7, 24, 37, 0.54) 42%,
      rgba(7, 24, 37, 0.28) 60%,
      rgba(7, 24, 37, 0.07) 78%,
      rgba(7, 24, 37, 0.00) 90%),
    /* The one that carries the eyebrow, and the only stop set that matters up
       there — at the eyebrow's height the vertical gradient is already spent.
       It PLATEAUS rather than ramping from the edge: the copy column starts at
       the gutter and runs to about half the frame, so the weight it needs at
       38% is the weight that sets the whole curve, and a plain 0%-to-nothing
       ramp would have to start near-opaque at x=0 to still be worth 0.5 out
       there. Holding flat to 22% buys the same protection over the type with a
       left edge that reads as a photograph rather than a black corner. */
    linear-gradient(to right,
      rgba(7, 24, 37, 0.75) 0%,
      rgba(7, 24, 37, 0.73) 22%,
      rgba(7, 24, 37, 0.56) 38%,
      rgba(7, 24, 37, 0.27) 56%,
      rgba(7, 24, 37, 0.07) 70%,
      rgba(7, 24, 37, 0.00) 82%);
}

/* Grain. A wide sky rendered as 8-bit webp bands visibly once a gradient is
   laid over it; a little noise breaks the steps up. Also the one texture on
   the page, which is what keeps the scrim from reading as flat plastic. */
.emv-hero__scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.055;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
}

/* The block is bottom-anchored, so this top padding only bites when the copy
   is short. It is kept modest because the hero's real height is set by the
   headline, and a hero that fills a laptop screen edge to edge buys drama at
   the cost of the thing the page is for — getting the reader into the paper.

   Two columns, both anchored to the bottom edge: the story on the left, the
   subscription coupon on the right. `align-items: end` is what keeps them
   independent — the coupon is the shorter object, and hanging it from the same
   baseline means its height can never push the headline up the frame.

   The foot rule is a third item spanning both columns, so it forms a SECOND
   row — which is why the story and the coupon still resolve `end` against each
   other and nothing above the rule moved when it was added. Its spacing is a
   margin rather than a row-gap because every breakpoint below re-declares
   `gap` as a shorthand, and a shorthand would silently reset a row-gap set
   here. Row-gap stays 0 until the columns stack, where it becomes the thing
   separating story from coupon and the margin stands down. */
.emv-hero__inner {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 366px;
  align-items: end;
  column-gap: 60px;
  row-gap: 0;
  padding-top: 84px;
  /* Bottom-anchored is not the same as flush. This was cut to 22px to pay for
     the foot rule's height and the whole block ended up stuck to the bottom
     edge of the frame — the rule read as the hero running out of room rather
     than closing. Slightly more than the 62px this had before the rule
     existed, because a hairline and a line of small caps are a lighter thing
     to end on than a paragraph was, and they need the extra air to sit rather
     than hang. The cost is paid at the top of the frame, which is sky. */
  padding-bottom: 70px;
}
/* --solo: the hero with no coupon beside it.
   The front page hangs a subscription coupon in the second column and the
   library hangs a finder there, so the base rule reserves 366px for one. The
   trust pages, /directory/ and /events/ have neither — they carry a title and a
   deck and nothing else — and left as a two-column grid that reserves a third
   of the masthead for an object that never arrives. One column, and the body's
   own max-width then does the measuring.

   Written as `.emv-hero .emv-hero__inner--solo` on purpose: the @1040
   breakpoint below re-declares `.emv-hero__inner`'s columns at the same
   specificity and later in the file, so a single-class modifier would silently
   lose the second column back at every width under 1040. */
.emv-hero .emv-hero__inner--solo { grid-template-columns: minmax(0, 1fr); column-gap: 0; }

.emv-hero__body { max-width: 640px; }
/* Both columns are hung from the same bottom edge, so a trailing margin on the
   deck is 30px of nothing holding the story column below the coupon. The two
   have to end on the same line for the pairing to read as deliberate. */
.emv-hero__body > :last-child { margin-bottom: 0; }

.emv-hero__title {
  font-family: var(--display);
  font-weight: 700;
  /* Bigger than it was, and set tighter. The tracking below is not taste: Mona
     Sans has no optical-size axis, so at 65.6px it keeps the sidebearings it
     was drawn with for running text and goes loose without correction. This is
     the largest type on the site and the front page's LCP element — see the
     font request in functions.php. */
  font-size: clamp(2.5rem, 1.3rem + 4.2vw, 4.1rem);
  line-height: 1.0;
  letter-spacing: -0.028em;
  color: #fff;
  margin: 0 0 20px;
  max-width: 17ch;
  text-wrap: balance;
  /* Insurance, not the contrast strategy — the scrim is that. This only has to
     hold a descender that lands on a lit window. */
  text-shadow: 0 1px 24px rgba(7, 24, 37, 0.55);
}
/* THE PAYOFF LINE — italic, but not at the headline's weight.

   This is the thing that went wrong when Newsreader left in Sept 2026, and it
   is worth being precise about what broke, because the obvious diagnosis is
   the wrong one. It was never the italic. A serif italic at 700 is an
   editorial gesture — voice, an aside, the standfirst dropping out of the
   headline. A GROTESQUE at 700 and 65px, slanted twelve degrees and set in
   bright amber, is a decal: it reads as sportswear or as a sale banner, and
   the eye files the whole hero under advertising. The face changed underneath
   a weight that only the old face could carry.

   400 is the fix. The slant survives, so the sentence keeps the change of
   voice the <em> is in the copy to mark, and the drop from 700 gives it the
   quiet the roman lines above are shouting past. Statement heavy, resolution
   light — the same weight-spread this design system now uses in the masthead
   nav, applied at display size.

   And the tracking is set here rather than inherited. The headline runs
   -0.028em because Mona Sans has no optical-size axis and goes loose at 65px
   (see above) — but that correction is calibrated for 700. At 400 the strokes
   are thinner and the counters more open, so the same number closes the line
   up; -0.012em is the equivalent correction for this weight. */
.emv-hero__title em {
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.012em;
  color: var(--gold-400);
}
.emv-hero__deck {
  font-family: var(--ui);
  font-size: 16.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.84);
  margin: 0 0 30px;
  max-width: 46ch;
}

/* --- The foot rule --------------------------------------------------------
   The line the whole hero is hung from. Every section below the hero OPENS on
   a heavy rule (.emv-folio); this is the hero closing on one, which is what
   makes the picture read as the front page of the same paper rather than a
   banner above it. It also gives `align-items: end` something visible to align
   to — before it, the coupon's bottom edge agreed with the deck's bottom edge
   and no reader could tell, because nothing was drawn there.

   White at a third rather than the ink rules used below: on a photograph an
   opaque rule reads as a bar laid over the image, and this has to read as
   printed into it.
   -------------------------------------------------------------------------- */
.emv-hero__foot {
  grid-column: 1 / -1;
  margin-top: 26px;
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.32);
}

/* Left-aligned only, with the rule running on unbroken beneath the coupon.
   Balancing it with something on the right was tried and is wrong twice over:
   it puts a second call to action directly under the Subscribe button, and it
   closes off the asymmetry that keeps the composition from being two boxes. */
.emv-hero__folio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 13px;
  margin: 0;
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.emv-hero__folioItem + .emv-hero__folioItem::before {
  content: "·";
  margin-inline-end: 13px;
  color: rgba(255, 255, 255, 0.42);
}
/* The edition number in the display face, the way a masthead sets it. It is
   the one figure on this line, so it is allowed to be the one thing on it that
   is not small caps.

   `text-transform: none` is what makes that true. The rule above uppercases the
   whole line and the abbreviation inherited it, so the folio opened on "NO. 62"
   — which is the word "no" shouted, not the masthead abbreviation, and it read
   as a refusal for the length of a glance. Lowercase "o" is the whole fix and
   is also simply how a masthead sets it. */
.emv-hero__folio b {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  font-variant-numeric: lining-nums tabular-nums;
  color: #fff;
}

/* THE ROW BECOMES A STACK BEFORE IT BECOMES A WRAP. `flex-wrap` looks like the
   answer for a folio too long for the screen, and it is not: the separator is a
   ::before on the second item, so a wrap carries the dot down with it and the
   second line opens on a floating "·" under the edition number. That reads as a
   list item, or as a typo.

   Under 480 the two facts set as two lines with no separator between them,
   which is what a masthead does when it runs out of measure anyway. The guard
   is here rather than in the copy because home.hero.folio is editable, and the
   line has to survive whatever gets typed into it.

   WRITTEN TWO CLASSES DEEP, for the reason recorded at `.emv-hero__inner--solo`
   and again at `.emv-week--lead`: the @760 block further down the file
   re-declares `.emv-hero__folio`'s `gap` as a shorthand at single-class
   specificity, and a shorthand later in the file would silently reset the row
   gap this stack depends on — leaving the two lines 3px apart. */
@media (max-width: 480px) {
  .emv-hero .emv-hero__folio {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .emv-hero .emv-hero__folioItem + .emv-hero__folioItem::before {
    content: none;
    margin-inline-end: 0;
  }
}

/* --- The coupon -----------------------------------------------------------
   A newspaper prints its subscription offer as a coupon, and that is what this
   is: a piece of warm stock lying on the photograph with a form ruled onto it.

   It is set on --paper, the same stock the civic section is printed on, rather
   than on white — against the blue-black valley floor a warm sheet reads as
   paper and a white one reads as a dialog box. And it carries NO drop shadow,
   which is the page's standing rule: the separation comes from the stock and
   the ink rule around it, the way every other edge on this page does. The gold
   button inside is still allowed to look pressable, because it is the one
   control here that has to.
   -------------------------------------------------------------------------- */
.emv-coupon {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--nv-900);
  /* The heavy rule across the top is the same department mark the sections
     below use, so the coupon belongs to the same printing as the rest. */
  border-top: 3px solid var(--nv-900);
  padding: 26px 26px 24px;
}
/* The clipped hairline just inside the edge — the one detail that says coupon
   rather than card. Decorative, so it never reaches the accessibility tree. */
.emv-coupon::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px dashed rgba(7, 24, 37, 0.34);
  pointer-events: none;
}
.emv-coupon > * { position: relative; }

/* The rule belongs to the head, not to the label — see the note in
   front-page.php. Everything the coupon says about itself sits above this
   line; everything it asks for sits below it. */
.emv-coupon__head {
  margin-bottom: 18px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(7, 24, 37, 0.22);
}
.emv-coupon__label {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--nv-900);
  margin: 0;
}

/* Circulation. Label and figure on one baseline, pushed to opposite edges of
   the coupon, which is how a masthead sets a standing statistic — and what
   stops it reading as a sentence of marketing copy. */
/* Reads as a sentence now — "506 neighbors read it" — so the number and the
   words that name it sit together. It used to be a label pushed left and a
   figure pushed right by space-between, which is a stat line on a media kit;
   split across 300px the two halves stopped being one statement. */
.emv-coupon__circ {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 7px;
  margin: 13px 0 0;
}
.emv-coupon__circLabel {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  /* --slate is the token calibrated against paper — 4.63:1. */
  color: var(--slate);
}
/* The number is the second-largest thing in the coupon after the button, on
   purpose: it is the only claim here a reader can weigh. Lining tabular
   figures so it does not reflow its own width the day it ticks over. */
.emv-coupon__figure {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--nv-900);
}

/* The form is stacked, not side by side. At coupon width a row would crush the
   field, and stacking is also what makes it read as something filled in: a
   ruled blank with an instruction under it. */
.emv-hero__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* A ruled blank, not a box. The field is the line you write on. */
.emv-hero__form input[type="email"] {
  min-width: 0;
  font-family: var(--ui);
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(7, 24, 37, 0.38);
  border-radius: 0;
  /* 12px, not 10. At 10 the blank measured 41px tall, three short of the 44px
     minimum tap target — on the one control the entire front page exists to get
     filled in, and on the size of screen where a mis-tap costs the most. The
     two extra pixels a side buy the height without touching the rule the field
     is written on, which is where the design of this thing lives. */
  padding: 12px 2px;
  transition: border-color 160ms ease;
}
.emv-hero__form input[type="email"]::placeholder { color: var(--slate); }
.emv-hero__form input[type="email"]:hover { border-bottom-color: var(--nv-800); }
/* The page's gold ring is calibrated against navy and photograph; on paper it
   nearly disappears, so the coupon uses ink instead. This has to be stated
   explicitly — the selector out-specifies `.emv-broadsheet :focus-visible`, and
   leaving it to inherit would have put an invisible ring on the one field the
   whole page is asking to be filled in. */
.emv-hero__form input[type="email"]:focus-visible {
  outline: 2px solid var(--nv-800);
  outline-offset: 3px;
  border-radius: 2px;
  border-bottom-color: var(--nv-800);
}
.emv-hero__form .emv-btn { width: 100%; border-radius: 2px; padding: 15px 24px; }

.emv-hero__note {
  font-family: var(--ui);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--slate);
  margin: 16px 0 0;
}

.emv-hero__done {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--ui);
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--ink);
}
/* Confirmation is green on paper. The gold it used to be was set against a
   navy panel; on warm stock it is barely a mark. */
.emv-hero__done svg { flex: none; color: var(--green); }

/* No Featured Image set: back to the survey grid the hero used to carry. The
   council's agenda is mostly plats, rezones and rights-of-way, so a plat grid
   is more honest atmosphere than a gradient — but it is the fallback now, not
   the design. It also drops the tall min-height, because there is no picture
   to give height to. */
.emv-hero--noimg { min-height: 0; background: var(--nv-800); }
/* 82px below the copy was right when the copy ended in the deck. It now ends
   in a rule, and a rule with 82px of navy under it does not close anything —
   it floats. Cut to sit the same distance below the rule as the picture case
   does. */
.emv-hero--noimg .emv-hero__inner { padding-top: 76px; padding-bottom: 62px; }
.emv-hero--noimg .emv-hero__scrim {
  background-image:
    linear-gradient(rgba(55, 97, 140, 0.26) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 97, 140, 0.26) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(120% 100% at 92% 4%, #000 0%, transparent 62%);
          mask-image: radial-gradient(120% 100% at 92% 4%, #000 0%, transparent 62%);
}
.emv-hero--noimg .emv-hero__scrim::after { content: none; }
.emv-hero--noimg .emv-hero__title { text-shadow: none; }
.emv-hero--noimg .emv-hero__deck { color: var(--dim); }
/* The note is inside the coupon in both cases, so it stays ink on paper — it
   used to be white-on-photo out here and needed a dim variant on navy. */

/* --- Bands ---------------------------------------------------------------- */
.emv-band { padding-top: 74px; padding-bottom: 74px; }
.emv-band--sunken { background: var(--mist-50); border-top: 1px solid var(--mist-100); border-bottom: 1px solid var(--mist-100); }
/* Warm stock for the civic section. The page runs picture → white → paper →
   white → navy, so city hall is marked out by what it is printed on rather
   than by a box drawn around it. Both --gold-800 and --slate were already
   calibrated against this surface; see the token note above. */
.emv-band--paper { background: var(--paper); border-top: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.emv-band--tight { padding-top: 56px; padding-bottom: 56px; }

/* --- Folio ----------------------------------------------------------------
   The section head, and the piece of furniture that holds the page together.
   Each department opens on a heavy rule that runs the full measure, with the
   department name sitting under its left end and the way onward under its
   right. Previously each section led with a short eyebrow and its own stub of
   a rule, which left every band floating in a column with a dead margin beside
   it. A rule that spans the measure ties the whole page to one width.
   -------------------------------------------------------------------------- */
.emv-folio {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
  flex-wrap: wrap;
  border-top: 2px solid var(--rule-heavy);
  padding-top: 13px;
  margin-bottom: 30px;
}
.emv-folio__label {
  /* Rendered as an <h2> on /events/, where the section heads had to become
     real headings for the day sections below them to be h3s without a skip. */
  margin: 0;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--ink);
}
.emv-folio--gold { border-top-color: var(--gold-500); }
.emv-folio--gold .emv-folio__label { color: var(--gold-800); }

/* --- Lead story -----------------------------------------------------------
   Two leads in one component. With art it is a two-column story, headline
   left so it starts on the same vertical as every other line of type on the
   page. With no art the column goes full measure and the headline gets bigger
   — which is what a paper does when it has no picture, and is the state this
   site is actually in until beehiiv is connected.
   -------------------------------------------------------------------------- */
.emv-lead__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 42%);
  gap: 52px;
  align-items: start;
  color: inherit;
}
.emv-lead--noart .emv-lead__link { grid-template-columns: minmax(0, 1fr); }

.emv-lead__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--mist-50);
}
.emv-lead__media img { transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.emv-lead__link:hover .emv-lead__media img { transform: scale(1.035); }

/* A short gold rule leading the kicker — the one repeated ornament on the
   page, and it appears once, so it stays an accent rather than a texture. */
.emv-lead__kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-800);
  margin-bottom: 16px;
}
.emv-lead__kicker::before { content: ""; width: 24px; height: 2px; background: var(--gold-500); flex: none; }

.emv-lead__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.8rem, 1.1rem + 2.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: pretty;
}
.emv-lead--noart .emv-lead__title {
  font-size: clamp(2.1rem, 1.2rem + 3.2vw, 3.3rem);
  line-height: 1.05;
  letter-spacing: -0.028em;
  max-width: 19ch;
}
.emv-lead__deck { font-family: var(--ui); font-size: 16.5px; line-height: 1.65; color: var(--slate); margin: 0; }

/* --- What is inside the issue ---------------------------------------------
   The lead's contents line, and the thing that ties this page to the one it
   links to: the issue's masthead prints the same list beside its own headline,
   so the page a reader lands on is recognisably the page they clicked.

   Set as a caption rather than as chips — a row of pills under every lead would
   be six bordered objects on a page whose whole argument is rules and stock.
   The names are the author's, printed as he wrote them; how many fit is decided
   in front-page.php, by measure. */
.emv-lead__inside {
  margin: 14px 0 0;
  font-family: var(--ui);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--slate);
}
.emv-lead__insideLabel {
  margin-right: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-800);
}
/* The overflow count. Kept in --slate rather than faded into --mist-400, which
   the token block marks decorative for exactly this reason: it fails AA on
   every surface on this page. The middot is drawn here so the PHP joins one
   list with one separator. */
.emv-lead__insideRest { white-space: nowrap; font-weight: 600; }
.emv-lead__insideRest::before { content: "· "; }
.emv-lead--noart .emv-lead__deck { font-size: 18px; line-height: 1.62; }

/* The byline is a ruled footer line, not a profile chip. The circular gold
   monogram that used to sit here is the single most recognisable ornament in
   generated web design, and a one-author newsletter has no use for an avatar
   in the first place — the name is the credential. */
.emv-lead__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 28px;
  flex-wrap: wrap;
  margin-top: 26px;
  padding-top: 15px;
  border-top: 1px solid var(--rule);
}
.emv-lead__by {
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--slate);
}
.emv-lead__by b { font-weight: 700; color: var(--ink); }
/* --slate, not --mist-400. The separator sat at 2.5:1 between a byline and a
   date both set at 4.5:1 or better, which at 11.5px does not read as a lighter
   separator — it reads as a character that failed to render. It is aria-hidden
   either way; this is about the dot being visible to the eye that is using it. */
.emv-lead__dot { color: var(--slate); margin: 0 3px; }
.emv-lead__cta { font-size: 14px; }
.emv-lead__link:hover .emv-lead__cta { color: #7f4b16; gap: 12px; }

/* --- This week, as a pair -------------------------------------------------
   The newsletter publishes twice a week, so the department carries two
   stories, and they are peers — a lead with a runner-up beside it would say
   the second one mattered less. Two equal columns divided by one rule, which
   is how a paper sets two stories of equal weight.

   The 48px on each side rather than a 96px grid gap is what keeps the two
   measures identical: hang the whole gutter off the second column, as
   .emv-cityhall does, and it is 96px narrower than the first.

   These rules follow --noart deliberately. A pair column is never the wide
   single-column treatment, so where the two modifiers collide (title size,
   deck size) the pair has to be the one that wins, and both are one class
   deep.
   -------------------------------------------------------------------------- */
/* THE WEEK'S LEAD. `.emv-week` used to be a name two components shared: this
   one, and the day strip /events/ defined later in this file — which is why the
   layout is hung on `--lead` and doubled up, so it would out-specify a
   four-track grid and a second heavy rule it must not inherit. /events/ has
   since been rebuilt as `.emv-ag` and defines no `.emv-week` at all, so the
   collision is gone and this is now the only claim on the name. The doubling
   is left standing rather than unpicked: it costs nothing, and it is the thing
   that would have to be put back the next time a page wants to call something
   a week. */
.emv-week.emv-week--lead { display: block; border-top: 0; }
.emv-week.emv-week--lead.emv-week--pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.emv-week--pair > :first-child { padding-right: 48px; }
.emv-week--pair > :last-child { padding-left: 48px; border-left: 1px solid var(--rule); }

/* Art on top in a column this narrow — a 4:3 picture beside 512px of text
   leaves neither enough room. 16:9 also keeps the two headlines on the same
   line as each other, which is the whole point of setting them as a pair. */
.emv-lead--pair .emv-lead__link { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.emv-lead--pair .emv-lead__media { order: -1; aspect-ratio: 16 / 9; }
.emv-lead--pair .emv-lead__kicker { margin-bottom: 13px; }
.emv-lead--pair .emv-lead__title {
  font-size: clamp(1.45rem, 0.95rem + 1.3vw, 1.95rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
  max-width: none;
  margin-bottom: 13px;
}
.emv-lead--pair .emv-lead__deck { font-size: 15.5px; line-height: 1.62; max-width: none; margin-bottom: 22px; }

/* Both bylines land on ONE line across the pair. A two-line headline beside a
   three-line one otherwise ends its column 35px higher, and the two rules
   reading as one rule is most of what makes this a spread rather than two
   stories that happen to be adjacent. The deck keeps a margin of its own so
   the auto margin can only ever add space, never close the gap to nothing on
   whichever column is the tall one. */
.emv-lead--pair,
.emv-lead--pair .emv-lead__link { height: 100%; }
/* align-items on the base rule is `start`, which stops the text block filling
   its row — and a text block that does not fill cannot push its own foot down. */
.emv-lead--pair .emv-lead__link { grid-template-rows: auto minmax(0, 1fr); align-items: stretch; }
/* No picture, no picture row — otherwise the text is placed in the auto row
   and the 1fr under it is what stretches, so the foot never moves. */
.emv-lead--pair.emv-lead--noart .emv-lead__link { grid-template-rows: minmax(0, 1fr); }
.emv-lead--pair .emv-lead__text { display: flex; flex-direction: column; }
.emv-lead--pair .emv-lead__foot { margin-top: auto; padding-top: 13px; }

/* --- City hall ------------------------------------------------------------
   A column rule, which is what a newspaper uses when two columns are of
   honestly different lengths. The plain-English read is short and the tool is
   tall; a gap alone made the left column look like it had failed to fill,
   while a ruled gutter makes the difference read as setting.
   -------------------------------------------------------------------------- */
.emv-cityhall__head { margin-bottom: 26px; max-width: 28ch; }
.emv-cityhall {
  display: grid;
  /* Two equal columns. The gutter has to be split down the middle to get
     there: hang all 81px of it off the second track — as this did when the
     read was two thirds — and two `1fr` tracks put 528px of read against
     447px of card, which is not a half. 40px of padding on each side of the
     rule instead, the same way .emv-week--pair does it, so both measures come
     out at 488px against the shell's 1056px. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--paper-line);
}
/* The rule lives in the gutter, on a wrapper, never on the tool card — see the
   note in front-page.php. It spans the taller of the two columns, which is what
   makes columns of honestly different lengths read as set rather than unfilled. */
.emv-cityhall__main { padding-right: 40px; }
.emv-cityhall__aside {
  padding-left: 40px;
  border-left: 1px solid var(--paper-line);
}
/* The copy column is NOT stretched to meet the bottom of the tool. Pinning the
   sourcing note to the foot of the column was tried and looks worse: on a quiet
   week the read is a couple of sentences, and the note ends up floating a
   couple of hundred pixels below the text it qualifies. A column that simply
   ends, with the rule running on past it, is ordinary newspaper setting. */
/* The grid still closes up when there is genuinely nothing for the second
   column — but that is now only true when no note is featured at all. Every
   other state fills it; see emv_civic_home_aside(). */
.emv-cityhall--solo { grid-template-columns: minmax(0, 1fr); }
.emv-cityhall--solo .emv-cityhall__main { padding-right: 0; }

/* The headline sets over its own column now — see the note in front-page.php.
   28ch was a cap for a headline running the full 1056px measure; in a 580px
   column it is never reached, and the only thing it can still do is stop the
   solo state from filling. */
.emv-cityhall__head { margin: 0 0 20px; max-width: none; }
/* Solo, the column is the whole measure again, and a headline is the one thing
   that must not take it — 1056px of Newsreader at 2.3rem is a banner. */
.emv-cityhall--solo .emv-cityhall__head { max-width: 24ch; }

/* The read, set as a read. This is the same slot as .emv-brief — the fallback
   branch a few lines down in front-page.php — and a slot should not change
   typeface depending on which branch filled it. It was inheriting the page's
   interface font and reading like a UI blurb next to a headline in Newsreader. */
.emv-cityhall__body { max-width: 62ch; font-family: var(--display); font-size: 19px; line-height: 1.6; color: #26313c; }
.emv-cityhall__body p { margin: 0 0 0.95em; }
.emv-cityhall__body > p:first-of-type { font-size: 20.5px; line-height: 1.54; color: var(--ink); }

/* The initial. This page has said from the masthead down that it is set the way
   a paper is set, and a printed initial opening the civic column is the oldest
   mark in that vocabulary — it says "leader" without a word of chrome. In
   gold-800, because the section's accent is otherwise spent entirely on links
   and a chip, and because a deep burnt amber is what a two-colour press would
   have put there anyway. Earned by length, never applied to a one-line note:
   see the $lead test in emv_civic_featured_home(). */
.emv-cityhall__body--lead > p:first-of-type::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 700;
  font-size: 3.9em;
  line-height: 0.78;
  letter-spacing: -0.02em;
  margin: 0 0.075em 0 0;
  color: var(--gold-800);
}
/* A floated initial is sized by hand — font-size × line-height against the
   paragraph's line box — and lands a pixel either side of a line boundary,
   which is how you get a cap sunk two lines with a third line still indented
   beside its own white space. initial-letter does the arithmetic properly:
   sink exactly three lines, cap height to the first line's ascender, baseline
   on the third. The float above stays as the fallback for anything that
   doesn't have it. */
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .emv-cityhall__body--lead > p:first-of-type::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    -webkit-initial-letter: 3;
    initial-letter: 3;
    margin: 0 10px 0 0;
  }
}

/* --- City hall: key figures ----------------------------------------------
   A ruled strip across the foot of the read, hairlines between the cells: a
   newspaper's table of figures, not three cards. It opens on the heavy rule the
   page uses to start a department index, because that is what it is — the
   numbers the section is actually about, closing the read.
   -------------------------------------------------------------------------- */
.emv-figstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  margin: 30px 0 0;
  border-top: 1px solid var(--rule-heavy);
  border-bottom: 1px solid var(--paper-line);
}
.emv-figstrip__cell { padding: 15px 22px 17px 0; }
.emv-figstrip__cell + .emv-figstrip__cell { padding-left: 22px; border-left: 1px solid var(--paper-line); }
.emv-figstrip__label {
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 7px;
  text-wrap: balance;
}
.emv-figstrip__value {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.35rem + 0.9vw, 2.2rem);
  line-height: 1;
  letter-spacing: -0.024em;
  color: var(--nv-800);
  margin: 0;
}

/* --- City hall: the second column ----------------------------------------
   The section was designed around the property tax estimator and only worked
   when one was attached, which is almost never. What goes here now is whatever
   the best available object is — figures, then the other notes, then a standing
   line — so the department fills its measure every week.

   All of it is set in rules on bare paper rather than as cards. The estimator
   is the exception on this page and earns it by being a control; a fact box and
   a list of headlines are type, and type on this page sits on hairlines.
   -------------------------------------------------------------------------- */
.emv-cityhall__aside > * + * { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--paper-line); }

/* The department-head atom, one step down: a 380px column cannot carry the
   full-size eyebrow without the tracking eating two lines. */
.emv-aside__label { font-size: 11px; letter-spacing: 0.14em; margin-bottom: 15px; }
.emv-aside__label::after { margin-top: 7px; }

/* Also at city hall. Set as a narrow .emv-latest: date hanging in its own
   column in tabular figures, headline in Newsreader beside it. The archive
   index directly below uses that arrangement at full width, so the two read as
   the same instrument at two sizes instead of two different lists. */
.emv-also__list { list-style: none; margin: 0; padding: 0; }
.emv-also__row {
  display: grid;
  /* Wide enough for "Coming up" on one line under the date — the flag wrapping
     to two lines is what pushes the date column out of alignment with the
     headline beside it. */
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule-warm);
  color: inherit;
  transition: color 160ms ease;
}
.emv-also__item:first-child .emv-also__row { padding-top: 0; }
.emv-also__item:last-child .emv-also__row { border-bottom: none; padding-bottom: 0; }
.emv-also__when {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nv-700);
  line-height: 1.3;
}
.emv-also__flag { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.11em; color: var(--gold-800); margin-top: 4px; white-space: nowrap; }
.emv-also__title {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.36;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: pretty;
}
/* Only the rows that carry a real per-item record are links, so only those get
   the arrow — it is the tell for which row goes somewhere. */
.emv-also__title svg { margin-left: 4px; vertical-align: -1px; color: var(--gold-800); transition: transform 160ms ease; }
a.emv-also__row:hover .emv-also__title { color: var(--gold-800); }
a.emv-also__row:hover .emv-also__title svg { transform: translate(2px, -2px); }

/* What they voted on, for the branch where nothing is featured and the section
   is showing the newest synced brief. Same instrument as the Civic page's
   motion list — result over motion, hairline between — at rail width and
   unfolded, because four short motions do not need a disclosure control. */
.emv-votes__list { list-style: none; margin: 0; padding: 0; }
.emv-votes__item { padding: 13px 0; border-bottom: 1px solid var(--rule-warm); }
.emv-votes__item:first-child { padding-top: 0; }
.emv-votes__item:last-child { border-bottom: none; padding-bottom: 0; }
.emv-votes__result {
  display: block;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.emv-votes__result--pass { color: var(--green); }
.emv-votes__result--fail { color: var(--red); }
.emv-votes__motion { font-family: var(--display); font-size: 16.5px; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
/* Never a silent top-N. A vote record that quietly stops at four reads as the
   whole night's business. */
.emv-votes__more { font-family: var(--ui); font-size: 12px; line-height: 1.55; color: var(--slate); margin: 16px 0 0; }

/* The last resort: no tool, no figures, nothing else on. Two sentences and one
   link, which is still a column rather than a hole. */
.emv-standing__text { font-family: var(--display); font-size: 17px; line-height: 1.6; color: #26313c; margin: 0 0 16px; }
/* Rendered by emv_civic_featured_home(). civic.css supplies this on /civic/
   and does not load here, so without it both links run together. */
.emv-home .emv-c-actions { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 22px 0 0; }

.emv-brief {
  display: block;
  border-top: 2px solid var(--gold-500);
  padding: 20px 0 0;
  color: inherit;
  transition: border-color 180ms ease;
}
.emv-brief__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; font-family: var(--ui); font-size: 13px; color: var(--slate); }
.emv-brief__date { font-weight: 600; color: var(--ink); }
.emv-brief__text { font-family: var(--display); font-size: 19px; line-height: 1.58; color: #26313c; margin: 0 0 18px; max-width: 58ch; }
.emv-brief__cta { font-family: var(--ui); }
/* --- Sponsor credit -------------------------------------------------------
   Small, fixed and quiet on purpose. This is a disclosure, not an ad unit:
   there is no banner inventory on this site and the visual weight should say
   so. When unsold nothing renders at all, so there is no empty state to style.
   -------------------------------------------------------------------------- */
.emv-sponsor { margin: 56px 0 0; padding: 24px 0 0; border-top: 1px solid var(--mist-200); text-align: center; }
/* On its own band the ground does the separating, so the credit gives up the
   rule and the space it needed as a section footer. Keeping both put a hairline
   inside a striped band three lines from the band's own edge — two boundaries
   for one break. The band's borders are the boundary; the credit just sits in
   it. See emv_sponsor_band() in inc/sponsor.php. */
.emv-band--sponsor .emv-sponsor { margin: 0; padding: 0; border-top: 0; }
.emv-sponsor__label { font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); margin: 0 0 12px; }
.emv-sponsor__body { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.emv-sponsor__logo { max-height: 34px; width: auto; display: block; }
.emv-sponsor__name { font-family: var(--display); font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
a.emv-sponsor__body:hover .emv-sponsor__name { color: var(--gold-800); }
.emv-sponsor__note { font-family: var(--ui); font-size: 12px; line-height: 1.6; color: var(--slate); margin: 12px auto 0; max-width: 52ch; }
.emv-sponsor__note a { color: var(--slate); text-decoration: underline; }
.emv-sponsor__note a:hover { color: var(--ink); }

/* --- Presenter banner ------------------------------------------------------
   The strip under the hero photograph. A newspaper prints its presenting
   sponsor on a single ruled line, not in a box beside the news, and that is
   exactly the register wanted here: 48px, one line of type, warm stock, one
   hairline underneath and no shadow, no radius, no card.

   IT CHANGES STOCK, NOT WEIGHT. The picture above it is dark; below it is the
   desk (--stock, #efece6) that every band lies on. A white strip in that gap
   would read as the top sheet of the news rather than as a credit, and a boxed
   one would read as an ad unit. Paper (--paper) keeps it quiet and legible as
   its own object, with no more presence than a rule — which is all a
   disclosure should have.

   WHY NOT PRINT IT ON THE DESK ITSELF. Tempting, and truer to the metaphor: a
   credit lying on the desk rather than set on stock of its own is exactly what
   this is, and it would introduce no new surface at all. It fails on contrast.
   --slate on the desk is 4.24:1 — the token is calibrated against white, mist
   and paper (see the token note at .emv-broadsheet) and the desk is darker than
   all three — so the label and the disclosure would both need a new, darker
   grey invented for this one strip. Paper is already cleared at 4.63:1.

   ONLY ONE EDGE IS DRAWN. The seam with the photograph needs no rule: a hard
   dark edge meeting cream is already the strongest boundary on the page, and a
   warm hairline laid across it would be invisible. The rule underneath is the
   one that does work, because paper and desk are two warm neutrals four points
   of luminance apart and nothing else separates them.

   FULL BLEED, SHELL INSIDE. The ground runs edge to edge so that rule is a
   real rule across the page; the contents sit on the same 1120/32 measure as
   every other band, so the label lines up with the news beneath it.
   -------------------------------------------------------------------------- */
.emv-presenter {
  background: var(--paper);
  border-bottom: 1px solid var(--paper-line);
}
.emv-presenter__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.emv-presenter__label {
  flex: none;
  margin: 0;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
/* A printer's vertical, not a border on the label: it has to measure the
   strip's height rather than the type's, and it must not move when the label
   wraps out of the row on a phone. */
.emv-presenter__rule {
  flex: none;
  width: 1px;
  align-self: stretch;
  margin: 3px 0;
  background: var(--paper-line);
}
.emv-presenter__mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: inherit;
}
.emv-presenter__logo {
  max-height: 28px;
  width: auto;
  display: block;
}
.emv-presenter__name {
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 160ms ease;
}
a.emv-presenter__mark:hover .emv-presenter__name { color: var(--gold-800); }

/* The unsold slot. Dashed and hatched — the site's standing mark for "this is
   provisional" — sized to the shape a real wordmark will take so that dropping
   one in changes nothing about the strip's height. The umber is dark enough to
   clear AA on paper at this size; a placeholder that has to be squinted at is
   not showing anyone anything. */
.emv-presenter__slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 132px;
  height: 30px;
  border: 1px dashed #d8b993;
  border-radius: 3px;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.6) 0 7px,
    rgba(230, 201, 168, 0.3) 7px 14px
  );
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #7a5c34;
}

/* The disclosure rides the far end of the same line. Pushed by auto margin
   rather than justify-content, so the label / rule / mark cluster stays welded
   together at the left however long the sponsor's name turns out to be. */
.emv-presenter__note {
  margin: 0 0 0 auto;
  text-align: right;
  font-family: var(--ui);
  font-size: 12px;
  line-height: 1.45;
  color: var(--slate);
}
/* The link is one phrase and breaks as one. Wrapped mid-name across two lines
   it stopped reading as the name of a policy. */
.emv-presenter__note a { color: var(--slate); text-decoration: underline; white-space: nowrap; }
.emv-presenter__note a:hover { color: var(--ink); }

/* Narrow: the disclosure takes its own line and the whole strip centres. It
   stops being slim at this width, and that is the right trade — the clause is
   the part that must not be dropped. */
@media (max-width: 860px) {
  .emv-presenter__inner {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
    padding-top: 10px;
    padding-bottom: 11px;
  }
  .emv-presenter__note {
    margin: 0;
    width: 100%;
    text-align: center;
    font-size: 11.5px;
  }
}
@media (max-width: 420px) {
  .emv-presenter__rule { display: none; }
  .emv-presenter__inner { gap: 12px; }
}

/* --- Tax estimator -------------------------------------------------------- */
.emv-calc { background: #fff; border: 1px solid var(--mist-200); border-radius: 16px; overflow: hidden; box-shadow: 0 18px 44px -18px rgba(13, 35, 55, 0.24); }
.emv-calc__head { background: var(--nv-800); padding: 20px 24px; }
.emv-calc__title { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.2; letter-spacing: -0.012em; color: #fff; margin: 8px 0 0; }
.emv-calc__body { padding: 24px; }
.emv-calc__label { display: block; font-family: var(--ui); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--slate); margin-bottom: 8px; }
.emv-calc__value { font-family: var(--display); font-weight: 700; font-size: 36px; line-height: 1; letter-spacing: -0.02em; color: var(--nv-800); margin-bottom: 18px; }
.emv-calc__range { width: 100%; accent-color: var(--gold-500); cursor: pointer; margin: 0 0 6px; height: 28px; -webkit-appearance: none; appearance: none; background: transparent; }
.emv-calc__scale { display: flex; justify-content: space-between; font-family: var(--ui); font-size: 11.5px; font-weight: 600; color: var(--slate); margin-bottom: 22px; }
.emv-calc__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.emv-calc__cell { background: var(--mist-50); border: 1px solid var(--mist-100); border-radius: 10px; padding: 13px 15px; }
.emv-calc__cellLabel { font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 6px; }
/* The rate itself. It takes a line of its own rather than riding on the
   label's: the home page's aside gives each cell about 112px of content, so a
   label plus a six-decimal figure wraps there whatever separator sits between
   them, and a hanging "·" at the head of the second line is worse than the
   line it saves. As a block it sets identically at every width. Out of the
   label's caps and tracking because a figure is a number, not a heading. */
.emv-calc__cellRate { display: block; text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--nv-700); margin-top: 3px; }
.emv-calc__cellValue { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.1; color: var(--ink); }
.emv-calc__cellUnit { font-family: var(--ui); font-size: 11.5px; color: var(--slate); margin-top: 3px; }
.emv-calc__delta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: rgba(237, 162, 60, 0.12);
  border: 1px solid var(--gold-500);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.emv-calc__deltaLabel { font-family: var(--ui); font-size: 13.5px; font-weight: 600; color: #7a4a14; }
.emv-calc__deltaValue { font-family: var(--display); font-weight: 700; font-size: 21px; line-height: 1; color: var(--gold-800); }
.emv-calc__deltaMonth { font-family: var(--ui); font-size: 13px; font-weight: 600; color: #7a4a14; }
/* --- Try a different rate ---------------------------------------------------
   A disclosure below the answer, not a third column beside it: the reader's
   hypothetical is measured against the two real rates, so it must not be set
   as their equal. Hidden in the markup and unhidden by theme.js, because the
   input is inert without scripting.
   -------------------------------------------------------------------------- */
.emv-calc__try { border-top: 1px solid var(--mist-200); padding-top: 12px; }
.emv-calc__try[hidden] { display: none; }
.emv-calc__tryToggle {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ui); font-size: 13px; font-weight: 700;
  color: var(--nv-700); cursor: pointer; padding: 5px 0;
  list-style: none; /* Firefox's marker */
}
.emv-calc__tryToggle::-webkit-details-marker { display: none; }
/* The marker is drawn rather than inherited so it can be a consistent size in
   both states — the UA triangle is not, and it sits on the text baseline. */
.emv-calc__tryToggle::before {
  content: '+';
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none;
  border: 1px solid var(--mist-200); border-radius: 999px;
  font-size: 14px; line-height: 1; color: var(--slate);
}
.emv-calc__try[open] .emv-calc__tryToggle::before { content: '−'; }
.emv-calc__tryToggle:hover { color: var(--gold-800); }
.emv-calc__tryToggle:hover::before { border-color: var(--gold-500); color: var(--gold-800); }
.emv-calc__tryToggle:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; }
.emv-calc__tryBody { padding-top: 12px; }
.emv-calc__tryLabel { display: block; font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 7px; }
.emv-calc__tryRow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.emv-calc__tryInput {
  font-family: var(--ui); font-size: 17px; font-weight: 600; color: var(--ink);
  width: 8.5em; padding: 9px 11px; background: #fff;
  border: 1px solid var(--mist-200); border-radius: 8px;
}
.emv-calc__tryInput:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; border-color: var(--gold-500); }
.emv-calc__tryReset {
  font-family: var(--ui); font-size: 12.5px; font-weight: 600; color: var(--slate);
  background: none; border: 1px solid var(--mist-200); border-radius: 8px;
  padding: 10px 13px; cursor: pointer;
}
.emv-calc__tryReset:hover { color: var(--ink); border-color: var(--mist-400); }
.emv-calc__tryReset:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.emv-calc__tryNote { font-family: var(--ui); font-size: 11.5px; line-height: 1.55; color: var(--slate); margin: 0 0 12px; }
.emv-calc__tryOut { margin-bottom: 4px; }
/* The two comparisons the hypothetical exists to produce. Ruled off the figure
   above it because it answers a different question — what it costs, then what
   it costs relative to the record. */
.emv-calc__tryDelta {
  font-family: var(--ui); font-size: 12.5px; font-weight: 600; line-height: 1.5;
  color: var(--nv-700); margin: 9px 0 0; padding-top: 9px;
  border-top: 1px solid var(--mist-100);
}

.emv-calc__foot { font-family: var(--ui); font-size: 11.5px; line-height: 1.55; color: var(--slate); margin: 0; }
/* The shared tool wrapper emits the disclaimer as a sibling of .emv-calc__body
   rather than inside it, because the body element carries the id and data
   attributes the tool's JS binds to and is produced whole by the tool itself.
   As a direct child it inherits no padding, so it needs its own or the text
   sits flush against the card border. */
.emv-calc > .emv-calc__foot { padding: 0 24px 24px; }
/* The wrapper's source link is new here — the hardcoded estimator had no link
   in its footnote — so its links need muting explicitly, or they render in
   default browser blue. */
.emv-calc__foot a { color: var(--slate); text-decoration: underline; }
.emv-calc__foot a:hover { color: var(--ink); }

/* The one control that has to be comfortable on a phone. The default WebKit
   thumb is not. */
.emv-calc__range::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: var(--mist-200); }
.emv-calc__range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -11px;
  border-radius: 999px; background: var(--gold-500); border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(13, 35, 55, 0.3); cursor: grab;
}
.emv-calc__range::-webkit-slider-thumb:active { cursor: grabbing; }
.emv-calc__range::-moz-range-track { height: 4px; border-radius: 999px; background: var(--mist-200); }
.emv-calc__range::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 999px;
  background: var(--gold-500); border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(13, 35, 55, 0.3); cursor: grab;
}

/* --- Recent issues --------------------------------------------------------
   An index, set like one: a heavy rule to open it, hairlines between entries,
   the date hanging in its own column in tabular figures so the dates stack
   into a straight edge.
   -------------------------------------------------------------------------- */
.emv-latest { border-top: 2px solid var(--rule-heavy); }
.emv-latest__row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 30px;
  align-items: baseline;
  padding: 22px 14px 22px 0;
  border-bottom: 1px solid var(--rule);
  color: inherit;
  transition: background 200ms ease, padding-left 200ms ease;
}
/* A wash that fades out across the row rather than a flat grey block behind
   it — closer to a highlighter than to a table's zebra stripe. */
.emv-latest__row:hover { background: linear-gradient(90deg, var(--paper), rgba(251, 244, 236, 0) 78%); padding-left: 14px; }
.emv-latest__date {
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nv-700);
  line-height: 1.3;
}
.emv-latest__date span { display: block; font-weight: 500; color: var(--slate); margin-top: 3px; }
.emv-latest__title { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -0.012em; color: var(--ink); margin: 0 0 7px; text-wrap: pretty; }
.emv-latest__tag { font-family: var(--ui); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }
.emv-latest__arrow { color: var(--mist-400); font-size: 19px; line-height: 1; transition: transform 200ms ease, color 200ms ease; }
.emv-latest__row:hover .emv-latest__arrow { transform: translateX(5px); color: var(--gold-800); }

/* --- Home overrides for shared components ---------------------------------
   Two components on this page are built elsewhere and rendered here: the tool
   wrapper (inc/civic-tools.php, shared with /civic/) and the subscribe band
   (inc/site-structure.php, shared with every page). Both are rounded cards on
   a drop shadow, which is right where they live and wrong on a page set
   entirely in rules. The overrides are scoped to .emv-broadsheet so the components
   are unchanged everywhere else. The !important flags are unavoidable: the
   subscribe band writes its radius as an inline style attribute.
   -------------------------------------------------------------------------- */
.emv-home .emv-calc { border-radius: 0; box-shadow: none; border-color: var(--rule); }

/* The band draws its own rules and its own top mark now (see .emv-band); all
   that is left to say here is that a page which already closes on a rule does
   not want 56px of air before it. */
.emv-broadsheet .emv-signup { margin-top: 0; }

/* ---------------------------------------------------------------------------
   The rest of the inline-styled furniture on the newly-scoped pages.

   page.php and template-coming-soon.php were written to the mockup convention,
   which means radii and pill borders live in `style` attributes — and an inline
   declaration can only be reached with !important. These are the same three
   corrections the subscribe band above already makes, applied to the objects
   those two templates draw: the /about/ section nav, and the "in the meantime"
   chips on /events/.

   Rules, not radii, is the standing rule of this printing. The sidebar becomes
   a ruled panel on newsprint rather than a grey rounded card; the chips become
   square-cornered blocks. Nothing moves — only the corners and the ground.
--------------------------------------------------------------------------- */
/* --- The prose page's own composition ------------------------------------
   page.php used to declare all of this in `style` attributes, which is why the
   responsive block near the top of this file had to fight it with !important.
   The sheet now carries the measure and the padding (see THE PANEL), so what
   is left here is only the split between the document and its section nav. */
.emv-page-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 56px;
  align-items: start;
}

/* The document. 17.5px/1.72 is the setting these pages already carried; it is
   in the stylesheet now rather than on the element so the measure below can
   apply to it. --ink at 13.2:1 was never the problem; the LINE LENGTH was.
   Without a cap the column ran the full width of the sheet on a wide screen,
   which is 70-odd characters of 17.5px type — past the point where the eye
   reliably finds the start of the next line. */
.emv-page-doc {
  font-size: 17.5px;
  line-height: 1.72;
  color: #26313c;
  min-width: 0;
  max-width: 68ch;
}

/* Sticky under the header (64px) plus the room the sheet's cap needs. */
.emv-page-aside { position: sticky; top: 108px; }

/* The sidebar tucks under the document before the measure gets too narrow. It
   stays visible rather than being hidden — on the /about pages it is the only
   way to move between the policies.

   THIS BLOCK MUST FOLLOW THE TWO RULES ABOVE. It used to sit near the top of
   the file and carry !important on every declaration, because what it was
   overriding was a `style` attribute on page.php's markup. Those inline styles
   are gone, so the flags went with them — but a plain declaration only wins on
   source order, and at the top of the file it lost to the base rule down here
   and stopped collapsing the grid at all. Measured at 390px: the document
   column came out about 100px wide, one word to a line, with the section nav
   printed over the top of it. */
@media (max-width: 900px) {
  .emv-page-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .emv-page-aside { position: static; }
}

.emv-broadsheet .emv-page-nav {
  padding: 20px 22px;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
}
.emv-broadsheet .emv-page-nav__label {
  margin: 0 0 14px;
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  /* This label is a page title on the five policy children — "About Eagle
     Mountain Value" — and at 260px it wraps to two lines. Letterspaced caps
     with default leading set those two lines almost touching. */
  line-height: 1.45;
  text-transform: uppercase;
  /* 4.60:1 on --paper. The #ab6522 this replaces measured 4.17:1. */
  color: var(--gold-800);
}
.emv-broadsheet .emv-page-nav__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.emv-broadsheet .emv-page-nav__link {
  font-family: var(--ui);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  /* 4.63:1 on --paper. The #6b7280 this replaces measured 4.43:1. */
  color: var(--slate);
  transition: color 160ms ease;
}
/* The page you are on is the one link set in full ink, and it is marked for
   assistive tech too — the colour alone was never saying it. */
.emv-broadsheet .emv-page-nav__link[aria-current="page"] { color: var(--ink); }
/* The state theme.js's [style-hover] shim used to apply here, moved into the
   stylesheet: no script needed, no rewriting of the element's style attribute
   on every mouseenter, and :focus-visible rather than the shim's `focus`, so a
   mouse click no longer leaves the hover colour stuck on. Underline as well as
   darken, because colour alone is not an affordance. */
.emv-broadsheet .emv-page-nav__link:hover,
.emv-broadsheet .emv-page-nav__link:focus-visible {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The chip row at the foot of a coming-soon page. */
.emv-broadsheet .emv-soon-links a { border-radius: 0 !important; }
/* --- Motion --------------------------------------------------------------- */
.emv-broadsheet [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* The hero is above the fold — it animates on load, not on scroll. */
@keyframes emv-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.emv-broadsheet [data-rise] { opacity: 0; animation: emv-rise 640ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.emv-broadsheet [data-rise="1"] { animation-delay: 60ms; }
.emv-broadsheet [data-rise="2"] { animation-delay: 150ms; }
.emv-broadsheet [data-rise="3"] { animation-delay: 250ms; }
/* The foot rule lands last, so the hero draws its own bottom edge after the
   things standing on it have arrived. */
.emv-broadsheet [data-rise="4"] { animation-delay: 340ms; }

@media (prefers-reduced-motion: reduce) {
  .emv-broadsheet [data-reveal],
  .emv-broadsheet [data-rise] { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .emv-broadsheet *, .emv-broadsheet *::before, .emv-broadsheet *::after { transition-duration: 1ms !important; }
}

/* --- Responsive -----------------------------------------------------------
   Most arrivals are a phone tapping a link in the newsletter, so the narrow
   end is the real design and the wide one is the variation.
   -------------------------------------------------------------------------- */
@media (max-width: 1040px) {
  .emv-hero__title { max-width: 18ch; }
  /* column-gap, not the `gap` shorthand: the foot rule's spacing is a margin
     precisely so these narrower breakpoints cannot reset it. */
  .emv-hero__inner { grid-template-columns: minmax(0, 1fr) 330px; column-gap: 44px; }
  .emv-coupon__figure { font-size: 27px; }
  .emv-lead__link { grid-template-columns: 1fr; gap: 30px; }
  /* Art goes above the headline once the columns stack — a picture below its
     own byline reads as a different story. */
  .emv-lead__media { order: -1; aspect-ratio: 16 / 9; max-width: 620px; }
  /* minmax(0, …), not a bare 1fr: a bare fr track takes its minimum from its
     content, so the fact box's own grid — three tracks with a floor — widened
     the stacked column past the viewport instead of wrapping inside it. */
  .emv-cityhall { grid-template-columns: minmax(0, 1fr); }
  /* The column rule becomes a horizontal one when the columns stack — which the
     comment here has always claimed and the declarations never did. */
  .emv-cityhall__main { padding-right: 0; }
  .emv-cityhall__aside {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    margin-top: 36px;
  }
  /* Except above the estimator, which is already a bordered card: a hairline
     36px above a border is two rules doing one rule's job. */
  .emv-cityhall__aside:not(:has(.emv-calc)) {
    padding-top: 32px;
    border-top: 1px solid var(--paper-line);
  }
  .emv-calc { max-width: 460px; }
  .emv-also__list { max-width: 660px; }
  /* The read has the whole measure back, so the headline does too. */
  .emv-cityhall__head { max-width: 24ch; }
}

/* Below this the headline has no room left beside a 330px coupon, so the two
   objects stack — story, then coupon, which is the order they were read in
   anyway. The coupon keeps a measure rather than running the full width: a
   full-bleed sheet of paper stops reading as a coupon lying on the picture and
   starts reading as the bottom of the hero. */
@media (max-width: 900px) {
  .emv-hero__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .emv-coupon { max-width: 440px; }
  /* Stacked, the row-gap restored by that shorthand is what separates story
     from coupon, and it spaces the foot rule too — so the margin stands down
     rather than adding to it. */
  .emv-hero__foot { margin-top: 0; }
}

/* Two headlines in ~380px each stop being a two-up and start being two narrow
   things, so the pair stacks and the column rule lies down between them. */
@media (max-width: 860px) {
  .emv-week.emv-week--lead.emv-week--pair { grid-template-columns: minmax(0, 1fr); }
  .emv-week--pair > :first-child { padding-right: 0; }
  .emv-week--pair > :last-child {
    padding-left: 0;
    border-left: none;
    margin-top: 44px;
    padding-top: 44px;
    border-top: 1px solid var(--rule);
  }
  /* Stacked, each column has the full measure back — so does its headline. */
  .emv-lead--pair .emv-lead__title { font-size: clamp(1.6rem, 1.05rem + 1.9vw, 2.1rem); }
  .emv-lead--pair .emv-lead__media { max-width: 620px; }
}

@media (max-width: 760px) {
  .emv-broadsheet { --gutter: 20px; }

  /* The scrim comes up much harder on a phone, and object-position stops
     mattering at all. A container narrower than the photograph is tall can
     only be covered by scaling to its height, so the whole vertical range of
     the image is always on screen and there is no vertical slack left to crop
     with — the dark valley floor that carries the type on a wide screen is
     down to a band at the bottom. The gradient has to do that job instead,
     and it is allowed to: the top quarter stays open so the sunset still
     reads, and everything from the headline down is protected. */
  .emv-hero { min-height: clamp(520px, 76vh, 700px); }
  .emv-hero__inner { padding-top: 64px; padding-bottom: 44px; }
  .emv-hero__scrim {
    background:
      linear-gradient(to top,
        rgba(7, 24, 37, 0.95) 0%,
        rgba(7, 24, 37, 0.92) 26%,
        rgba(7, 24, 37, 0.86) 46%,
        rgba(7, 24, 37, 0.66) 64%,
        rgba(7, 24, 37, 0.30) 80%,
        rgba(7, 24, 37, 0.00) 96%);
  }
  .emv-hero--noimg { min-height: 0; }
  .emv-hero--noimg .emv-hero__inner { padding-top: 44px; padding-bottom: 52px; }
  .emv-hero__title { max-width: 100%; }
  /* Everything from the deck down is tightened on a phone. The stack is
     eyebrow → four-line headline → six-line deck → coupon, and each of those
     is set at a size chosen on a wide screen; left alone they push the
     Subscribe button a full screen down. */
  /* row-gap after the shorthand, deliberately: on a phone this gap is repeated
     three times down a stack that is already the full height of the screen,
     and every pixel of it is a pixel further from the Subscribe button. The
     stacked hero is the one place the foot rule costs height without earning
     any — there are no columns left for it to tie together — so it is paid for
     out of the padding below it rather than added on top. */
  .emv-hero__inner { gap: 30px; row-gap: 24px; padding-bottom: 40px; }
  .emv-hero__deck { font-size: 15.5px; line-height: 1.62; }
  .emv-hero__foot { padding-top: 11px; }
  .emv-coupon { max-width: none; padding: 22px 20px 20px; }
  .emv-coupon__head { margin-bottom: 14px; padding-bottom: 11px; }
  .emv-coupon__circ { margin-top: 9px; }
  .emv-coupon__figure { font-size: 24px; }
  .emv-hero__form { gap: 13px; }
  /* Tracking comes off so the folio still sets on one line at 390px, where it
     is the full width of the screen minus the gutters. */
  .emv-hero__folio { font-size: 11px; letter-spacing: 0.12em; gap: 3px 11px; }
  .emv-hero__folio b { font-size: 14px; }
  .emv-band { padding-top: 50px; padding-bottom: 50px; }
  .emv-band--tight { padding-top: 40px; padding-bottom: 40px; }

  .emv-lead__foot { gap: 10px 20px; }
  .emv-latest__row { grid-template-columns: 62px minmax(0, 1fr) auto; gap: 16px; padding-right: 0; }
  .emv-latest__row:hover { padding-left: 0; }
  .emv-latest__title { font-size: 19px; }
  .emv-calc__pair { grid-template-columns: 1fr; }

  .emv-cityhall__body { font-size: 17.5px; }
  .emv-cityhall__body > p:first-of-type { font-size: 19px; }
  /* Stacked cells, not a row: three figures across a phone gives each of them
     about 100px, which is under the width of "+$251/yr" at any size worth
     setting it at. Vertical hairlines become horizontal ones. */
  .emv-figstrip { grid-template-columns: minmax(0, 1fr); }
  .emv-figstrip__cell { padding: 13px 0 14px; }
  .emv-figstrip__cell + .emv-figstrip__cell { padding-left: 0; border-left: none; border-top: 1px solid var(--paper-line); }
  .emv-also__row { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; }
}

/* ===========================================================================
   ISSUE LIBRARY
   ---------------------------------------------------------------------------
   The archive, set as the back section of the same paper. It used to be the
   one page on the site that looked bought rather than printed: a navy header
   with a rounded white search pill in it, then 58 white cards with 16px
   corners, drop shadows, a lift-on-hover transform and a circular gold
   monogram of the same author's initial on every single one.

   Nothing here is new furniture. The masthead is .emv-hero in its
   no-photograph state; the finder is .emv-coupon with a search blank ruled
   onto it where the email blank goes; the section head is .emv-folio; the
   footer band is the shared subscribe component under the same .emv-broadsheet
   overrides the front page gives it. What this block adds is the grid — an
   index of issues, ruled by row, which is the one thing the front page has no
   equivalent of because it never shows more than five.
   =========================================================================== */

/* --- The masthead ---------------------------------------------------------
   An inside page, so the headline is a step down from the front page's: two
   words at 4.1rem read as shouting, and the deck beside it is doing the real
   explaining. Everything else — the stock, the plat grid, the scrim, the foot
   rule and its folio — is inherited unchanged.
   -------------------------------------------------------------------------- */
.emv-hero--index .emv-hero__title {
  font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.2rem);
  max-width: 14ch;
  text-wrap: balance;
}
.emv-hero--index .emv-hero__deck { max-width: 50ch; margin-bottom: 0; }

/* --- The finder -----------------------------------------------------------
   The coupon, filled in with a different blank. On the front page that object
   asks for an address; here it asks which issue you are after — same warm
   stock, same clipped hairline, same ruled head, so the two pages are visibly
   printed by the same press.

   The search field is a ruled blank rather than a box for the reason the
   email field is: on paper, a line is what you write on and a bordered
   rectangle is a dialog.
   -------------------------------------------------------------------------- */
.emv-finder__field {
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(7, 24, 37, 0.38);
  transition: border-color 160ms ease;
}
/* It is a <form> now rather than a <div> — see the note in
   page-issue-library.php — so it has a user-agent margin to zero out. */
.emv-finder__field { margin: 0; }
.emv-finder__field:hover,
.emv-finder__field:focus-within { border-bottom-color: var(--nv-800); }

/* The line that says which of the two things this field does. Set quietly:
   it is an instruction, and an instruction that shouts is an admission the
   control did not explain itself. */
.emv-finder__hint {
  margin: 10px 0 0;
  font-family: var(--ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--slate);
}

.emv-kbd {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(7, 24, 37, 0.06);
  border: 1px solid rgba(7, 24, 37, 0.14);
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 5px;
}
.emv-finder__field svg { flex: none; color: var(--slate); }
.emv-finder__field input {
  flex: 1;
  min-width: 0;
  font-family: var(--ui);
  font-size: 16px;
  color: var(--ink);
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 10px 2px;
}
.emv-finder__field input::placeholder { color: var(--slate); }
/* Ink, not the page's gold ring — see the same note on the coupon's email
   blank. Stated explicitly because it has to out-specify
   `.emv-broadsheet :focus-visible`, and gold on warm stock is nearly nothing. */
.emv-finder__field input:focus-visible {
  outline: 2px solid var(--nv-800);
  outline-offset: 4px;
  border-radius: 2px;
}
/* The browser's own clear affordance is a grey X drawn on a warm sheet. */
.emv-finder__field input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Tags are a section index, not a row of pills. They were capsules — gold fill
   for the active one, navy outline for the rest — which is the same control a
   filter bar uses on every SaaS dashboard. Set as ruled small caps they read
   as the departments of the paper, and the gold rule marks the one you are in.

   This row renders only when there is more than one real tag to choose
   between; see the note in page-issue-library.php. */
.emv-finder__tags { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 20px 0 0; }
.emv-lib-tag {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}
.emv-lib-tag:hover { color: var(--nv-900); border-bottom-color: var(--paper-line); }
.emv-lib-tag[aria-current] { color: var(--nv-900); border-bottom-color: var(--gold-500); }

/* The count sits inside the finder, under the blank, because it is the answer
   to what was typed into it — it is the one line on the page that changes as
   you type, and it belongs next to the thing changing it. Tabular figures so a
   result count ticking down does not shift the line's width.

   No rule above it, deliberately: the field it answers already draws one along
   its own bottom edge, and a second hairline 14px under that one is the ladder
   the coupon's head was restructured to avoid. */
.emv-finder__count {
  font-family: var(--ui);
  font-size: 12.5px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--slate);
  margin: 15px 0 0;
}

/* --- The index ------------------------------------------------------------
   Three columns, ruled by ROW rather than by card: every entry draws a
   hairline under itself, the cards in a row stretch to a common height, and
   the rules meet into one line that breaks only at the gutters — which is what
   a column rule does on a printed index page.

   By row, and not by column, on purpose: the live search hides cards with
   `display: none`, so anything keyed to nth-child (a left border on every
   third cell, say) would draw itself against the wrong cells the moment a
   search narrowed the grid. A rule each card owns cannot be wrong.
   -------------------------------------------------------------------------- */
.emv-index {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 44px;
  row-gap: 36px;
}

.emv-issue-card {
  display: flex;
  flex-direction: column;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--rule);
  color: inherit;
}

.emv-issue-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 20px;
  border: 1px solid var(--rule);
  background: var(--mist-50);
}
.emv-issue-card__media img { transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); }
.emv-issue-card:hover .emv-issue-card__media img { transform: scale(1.04); }

/* The tag when there is a real one, otherwise the weekday — the same fallback
   the front page uses, and on this archive it is the one that fires: 57 of the
   58 imported issues carry beehiiv's "Issue" placeholder rather than a tag, so
   what distinguishes them is Monday's issue from Thursday's.

   No gold dash leading it. That ornament is deliberately used once on the
   front page; repeated down 58 cells it would stop being an accent and become
   the texture of the page. */
.emv-issue-card__kicker {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-800);
  margin-bottom: 11px;
}

.emv-issue-card__title {
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.26;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: pretty;
}
/* A cell with no picture gets a bigger headline, which is what the front page
   does with a lead that has no art, and what a paper does with the space. */
.emv-issue-card--noart .emv-issue-card__title { font-size: 25px; line-height: 1.2; }

/* Clamped, and this is a layout decision rather than a cosmetic one: beehiiv
   subtitles run from six words to forty, and an unclamped deck drags one cell
   in a row four lines deeper than its neighbours, which pulls that row's rule
   down with it and the ruled grid stops being ruled. */
.emv-issue-card__deck {
  font-family: var(--ui);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Date and direction, and no byline. One author writes every issue in this
   archive, so 58 repetitions of the same name is not a credit — it is the
   loudest repeated mark in the grid, which is exactly what the gold monogram
   that used to sit here was. The date is what actually tells two entries
   apart, so it gets the line to itself.

   `margin-top: auto` is what makes the row rules line up: the foot is pushed
   to the bottom of a stretched cell, so every card in a row ends on the same
   baseline whatever its headline did. */
.emv-issue-card__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.emv-issue-card__arrow {
  color: var(--mist-400);
  font-size: 17px;
  line-height: 1;
  transition: transform 200ms ease, color 200ms ease;
}
.emv-issue-card:hover .emv-issue-card__arrow { transform: translateX(5px); color: var(--gold-800); }
/* The hover mark is a rule under the headline rather than a lift: nothing on
   this printing floats, and a card that rises off the page on a drop shadow is
   the single most recognisable gesture in generated web design. */
.emv-issue-card:hover .emv-issue-card__title {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--gold-500);
}

/* --- Nothing found --------------------------------------------------------
   Set like a standing note in the paper, ranged left, rather than centred in
   80px of white space. No rule of its own: it always appears directly under
   the folio — the grid above it is zero-height when nothing matched — and a
   second heavy rule 30px under that one reads as a mistake.

   No `display` declaration anywhere in here either: the element is toggled
   with the `hidden` attribute, and a display rule would out-specify it and pin
   the empty state open behind the results.
   -------------------------------------------------------------------------- */
.emv-library__empty { padding-top: 4px; }
.emv-library__emptyTitle {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
}
.emv-library__emptyBody {
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate);
  margin: 0;
}
.emv-library__empty .emv-link { margin-top: 18px; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1040px) {
  .emv-index { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
}

/* One column, and the entry stops being a cell in a grid and becomes a row in
   an index — picture beside the headline rather than above it, the way the
   front page's archive list is set. A full-width 16:9 photograph above every
   one of 58 entries is a phone scrolling through pictures, not an archive. */
@media (max-width: 720px) {
  .emv-index { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
  .emv-issue-card { display: grid; grid-template-columns: 108px minmax(0, 1fr); column-gap: 18px; align-items: start; padding-bottom: 22px; }
  .emv-issue-card__media { grid-row: 1 / span 4; aspect-ratio: 1 / 1; margin-bottom: 0; }
  .emv-issue-card__kicker { margin-bottom: 7px; }
  .emv-issue-card__title { font-size: 18px; margin-bottom: 7px; }
  .emv-issue-card--noart .emv-issue-card__title { font-size: 20px; }
  .emv-issue-card__deck { font-size: 14px; -webkit-line-clamp: 2; }
  .emv-issue-card__foot { padding-top: 12px; font-size: 11.5px; margin-top: 0; }
  /* Text-only entries have no picture to hang the second column off. */
  .emv-issue-card--noart { grid-template-columns: minmax(0, 1fr); }
}

/* ===========================================================================
   THE ISSUE PAGE — .emv-issue
   ---------------------------------------------------------------------------
   The most-visited surface on the site and the last one still wearing the
   original mockup. Every link in the newsletter, every card in the library and
   every "Read this issue" on the front page lands here.

   THE HARD PART IS THAT beehiiv INLINES EVERYTHING.

   The stored body is a rendered email. Every element in it carries its own
   `style` attribute — `font-family:'Helvetica',Arial,sans-serif` on all of
   them, `color:#1D1D1F`, fixed pixel sizes, `text-align:left`, plus a
   `--wt-text-on-background-color` custom property the email theme set. Measured
   before this block existed: all eight body headings on a sample issue resolved
   to Helvetica, and so did the running text. Neither of the site's two
   typefaces appeared anywhere below the masthead.

   An inline declaration can only be beaten by `!important`, so that is what
   this block is: a short, deliberate list of the properties beehiiv sets that
   have to be taken back, applied to the body wrapper's descendants. It is
   ugly and it is the only thing that works. The rule of thumb throughout —
   TAKE TYPOGRAPHY, LEAVE STRUCTURE. Fonts, colours and the ornament (radii,
   shadows) are ours; the layout beehiiv built inside a block, and anything it
   emphasised, is Colten's editorial intent and is left alone.
   =========================================================================== */

/* --- The measure ----------------------------------------------------------
   ONE NUMBER, SET HERE, USED BY EVERY OBJECT THAT SITS AT THE READING COLUMN:
   the body, the contents band under the photograph, the end mark, the colophon
   and the share row. It used to be 680px repeated in five places, which is five
   places to disagree; it is now 100%, so the column fills the shell (1056px
   between the gutters) and the page runs to the same width as the hero, the
   photograph and everything else on the site.
   -------------------------------------------------------------------------- */
.emv-issue {
  --measure: 100%;
}

.emv-issue__crumbs {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 22px;
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--dim);
}
.emv-issue__crumbs a { color: var(--dim); border-bottom: 1px solid transparent; }
.emv-issue__crumbs a:hover { color: #fff; border-bottom-color: rgba(255, 255, 255, 0.5); }

/* The byline on the hero's foot rule. Small caps on one baseline, which is what
   a byline is in print — not a 46px gold circle with an initial in it. */
.emv-issue .emv-hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}

/* --- Inside this issue ---------------------------------------------------
   The contents block, hung in the masthead's second column — the slot the
   front page fills with its subscription coupon and /issue-library/ with its
   finder, and that this page left empty, which is why half of every issue's
   masthead was navy with nothing on it.

   It was a band at the body's measure under the photograph. What that costs
   here is the whole reason it moved: the picture is 600px tall, so the contents
   of a thirteen-minute read sat below the fold on every screen the site is read
   on.

   Set on paper stock for the coupon's reason — a warm sheet on the blue-black
   masthead reads as something printed, a navy panel on navy is a rectangle
   nobody can see — but WITHOUT the coupon's dashed inner hairline, which is
   that component's signature and would make this a second coupon.
   -------------------------------------------------------------------------- */
.emv-issue__inside {
  background: var(--paper);
  border: 1px solid var(--nv-900);
  /* The same heavy top rule every department below opens on, so the panel
     belongs to the same printing as the article it indexes. */
  border-top: 3px solid var(--nv-900);
  padding: 21px 24px 17px;
}

.emv-issue__insideLabel {
  margin: 0 0 11px;
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(7, 24, 37, 0.22);
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--nv-900);
}

.emv-issue__insideList {
  counter-reset: emv-inside;
  list-style: none;
  margin: 0;
  padding: 0;
}
.emv-issue__insideList li {
  counter-increment: emv-inside;
  border-top: 1px solid rgba(7, 24, 37, 0.13);
}
.emv-issue__insideList li:first-child { border-top: 0; }

.emv-issue__insideLink {
  display: flex;
  align-items: baseline;
  gap: 12px;
  /* 38px of target from the padding either side of a 14.5px line. Short of the
     44px the rest of the site holds to, and deliberately: eleven rows at 44px
     is a 500px panel, and the entries are stacked with nothing else near them
     to mis-hit. */
  padding: 9px 0;
  font-family: var(--ui);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--nv-900);
  transition: color 160ms ease;
}

/* The folio. Drawn from the counter rather than printed into the markup so it
   can be set in lining tabular figures, and zero-padded to two digits — the
   same figure, in the same shape, that the body prints in the margin beside
   each department rule. A reader who came in on 04 sees 04 when they land. */
.emv-issue__insideLink::before {
  content: counter(emv-inside, decimal-leading-zero);
  flex: none;
  min-width: 2em;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gold-800);
}

.emv-issue__insideName { border-bottom: 1px solid transparent; }
.emv-issue__insideLink:hover { color: var(--gold-800); }
.emv-issue__insideLink:hover .emv-issue__insideName { border-bottom-color: currentColor; }
.emv-issue__insideLink:focus-visible { outline: 2px solid var(--gold-800); outline-offset: 3px; }

/* The panel's foot line — the overflow count on a contents block, the way down
   to the rest of the box on a weather ear. Ruled off, in the same small caps as
   the label at the head, so both panels close the same way. */
.emv-issue__insideRest {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid rgba(7, 24, 37, 0.22);
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--slate);
}

/* --- The weather ear ------------------------------------------------------
   The forecast, lifted out of the issue's Utility Box and set as a table. Not
   the whole box: measured across the archive those render at a median of 676px
   and up to 2,126px, and a masthead cannot carry that. The rest of the box
   stays in the article, and the ear links down to it.

   Everything here is the theme's own markup — inc/utility-box.php reads the
   lines into day, condition, high and low and nothing of beehiiv's comes with
   them — so there is no email styling to take back, which is the whole reason
   this reads as furniture rather than as something pasted in.
   -------------------------------------------------------------------------- */
.emv-issue__utilityBody {
  font-family: var(--ui);
  color: var(--ink);
}

.emv-ub__wx {
  list-style: none;
  margin: 0;
  padding: 0;
}
.emv-ub__wxRow {
  display: grid;
  /* Day, then his own condition in the middle, then the figures flush right.
     The middle column is the flexible one because the condition is the only
     part whose length he chooses — "Sunny" one week, "PM Snow Showers (43%)"
     the next — and it is the part that may wrap. */
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0 10px;
  padding: 5px 0;
}
.emv-ub__wxRow + .emv-ub__wxRow { border-top: 1px solid rgba(7, 24, 37, 0.09); }

.emv-ub__wxDay {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nv-900);
}
.emv-ub__wxWhat {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--slate);
}
.emv-ub__wxIcon { flex: none; font-size: 12px; line-height: 1; }
.emv-ub__wxCond { min-width: 0; }
.emv-ub__wxTemp {
  min-width: 5.4em;
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: 13px;
  color: var(--slate);
}
.emv-ub__wxTemp b { font-weight: 700; color: var(--ink); }
/* The low is the second figure and reads as one: a slash would be a third
   character competing with two numbers in a 90px column. */
.emv-ub__wxLow::before { content: " / "; color: var(--mist-400); }

/* The way down to the rest of the box. Set on the panel's foot rule, in the
   same small caps as the "+N more sections" line the contents panel uses. */
.emv-issue__utilityMore {
  color: var(--gold-800);
  border-bottom: 1px solid transparent;
}
.emv-issue__utilityMore:hover { border-bottom-color: currentColor; }

/* --- In this issue, under the photograph ----------------------------------
   Where the contents live once the Utility Box has the masthead slot. Set as the
   contents block a magazine prints under its masthead, not as a widget: paper
   ground, hairline top and bottom, entries in the same small caps and the same
   numbering as the folios in the body's margin.

   IT SITS AT THE BODY'S MEASURE, whatever that measure currently is — it is part
   of the article, the first thing the article says about itself, and it should
   never be wider or narrower than the text under it. Both now read `--measure`,
   so the two cannot drift apart.
   -------------------------------------------------------------------------- */
.emv-issue__contents {
  background: var(--paper);
  border-top: 1px solid var(--paper-line);
  border-bottom: 1px solid var(--paper-line);
  padding: 24px 0 26px;
}
.emv-issue__contentsInner {
  max-width: var(--measure);
  margin: 0 auto;
}
.emv-issue__contentsList {
  counter-reset: emv-inside;
  list-style: none;
  margin: 0;
  padding: 0;
  /* Two columns once there is room: seven entries in one column is a tall block
     standing between the photograph and the first line of the issue. */
  columns: 2;
  column-gap: 34px;
}
.emv-issue__contentsList li {
  counter-increment: emv-inside;
  break-inside: avoid;
}
.emv-issue__contentsList .emv-issue__insideLink { padding: 7px 0; }

@media (max-width: 640px) {
  .emv-issue__contentsList { columns: 1; }
}

/* --- The art -------------------------------------------------------------
   Square corners, no shadow, no negative margin lifting it over the masthead.
   The plugin's version put a 16px radius and a 48px navy drop shadow on this
   image and pulled it up 36px so it overlapped the navy band — a card-deck
   trick on a page that is a document. A newspaper prints the picture under the
   headline, at the measure of the text, with the caption ruled off beneath it.

   FLUSH TO THE MASTHEAD. It used to open on 40px of white, which read as a gap
   between two things rather than as the join it is: the navy ends and the
   photograph begins on the same line, which is how a nameplate and the picture
   under it are printed.
   -------------------------------------------------------------------------- */
.emv-issue__art { margin: 0; padding: 0; background: #fff; }
/* ONE FRAME FOR EVERY ISSUE. Measured across the archive: 50 of the 59 covers
   are already 16:9, seven are nearer 4:3 and one is 2:1, and left to themselves
   they made the height of the page's opening move by 150px from issue to issue
   — the article started in a different place depending on which camera Colten
   had that week. The frame is the median the pictures already are, so nine of
   them are cropped a little at the middle and fifty are untouched.

   A crop is a layout decision, not an edit to the writing: the picture inside
   the frame is still his. Anything that must not be cropped can be set as the
   attachment's own image and centred by the admin. */
.emv-issue__artimg {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 0;
  box-shadow: none;
}
.emv-issue__caption {
  margin: 11px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate, #64707d);
}

.emv-issue__bandbody { background: #fff; padding-top: 48px; }

/* A heading landed on from the contents block — or from a link someone was sent
   — must not come to rest underneath the sticky site header. Set in
   scroll-margin so it moves the scroll stop rather than the heading, and put
   on the headings rather than on the page so it costs nothing anywhere else.

   Derived from --emv-head, the header's own token, rather than from a copy of
   its height written out here. The copy that used to live on this line said
   76px and 138px and was silently wrong the day the bar became two rows. */
.emv-issue .emv-issue__body h2[id],
.emv-issue .emv-issue__body h3[id] {
  scroll-margin-top: calc(var(--emv-head) + 16px);
}

/* --- The body ------------------------------------------------------------
   THE MEASURE COMES FROM `--measure` ON .emv-issue, and nothing here sets a
   width of its own. beehiiv's wrapper carries `max-width: 672px`, which is its
   number rather than ours and is applied to a div that also holds the email
   chrome; the `.rendered-post` wrapper is gone by the time this renders (see
   inc/issue-content.php), so the column is this element's job either way.
   -------------------------------------------------------------------------- */
.emv-issue__body {
  /* THE FALLBACK IS LOAD-BEARING. This class is borrowed off the issue page by
     two other templates — the front page's slice of the week's events and the
     community page's lift — to get the body typography. Neither sits inside
     .emv-issue, so --measure is undefined there and they keep the 680px column
     they were built against. */
  max-width: var(--measure, 680px);
  margin: 0 auto;
  font-family: var(--ui);
  font-size: 18px;
  line-height: 1.72;
  color: #26313c;
}

/* TAKE THE FAMILY. LEAVE THE COLOUR.
 *
 * font-family is forced everywhere, because beehiiv sets Helvetica on every
 * single element and there is no case where that is wanted.
 *
 * Colour is NOT forced, and that is a correction rather than an omission. The
 * first version of this block carried `color: inherit !important` on p, li,
 * span and div, and it made the navy "Utility Box" — the weather, the school
 * dates, the standing links, one of the most useful things in any issue —
 * render as near-black text on a #1b4369 panel. beehiiv paints that box by
 * setting a dark colour on the block and then overriding it with an explicit
 * `<span style="color:#FFFFFF">` inside, so forcing inheritance takes the
 * white away and leaves the dark.
 *
 * beehiiv's body ink is #1D1D1F on white, which is 16:1 and perfectly good.
 * There is nothing to win here and a whole class of dark-on-dark bugs to lose,
 * so the colours stand as the author set them. The one exception is links,
 * handled in PHP where the surrounding ground can actually be inspected — see
 * emv_issue_strip_email_chrome().
 */
.emv-issue__body *:not(pre):not(code) {
  font-family: inherit !important;
}

.emv-issue__body p { margin: 0 0 1.15em; }
.emv-issue__body > div > p:last-child { margin-bottom: 0; }

/* Headings. beehiiv treats levels as type sizes, and inc/issue-content.php has
   already demoted every one of them by a step so the page has a single h1 —
   which means what arrives here as h2 was beehiiv's "biggest", h3 its next, and
   so on. They are set in the display face at a real scale rather than at the
   pixel sizes the email carried, and the size is forced because those pixel
   values are inline. */
/* DOUBLED CLASS, AND IT IS LOAD-BEARING RATHER THAN TIDINESS. The font-family
   rule above is `.emv-issue__body *:not(pre):not(code)`, and :not() takes its
   argument's specificity — so that selector scores (0,1,2) and a plain
   `.emv-issue__body h2` at (0,1,1) LOSES to it. The first version of this block
   had exactly that bug: sizes applied, the display face did not, and every body
   heading stayed in Helvetica. Repeating the class takes these to (0,2,1).
   It used to be written `.emv-issue .emv-issue__body h2`, which scores the same
   — but the front page prints an issue's events section into a bare
   `.emv-issue__body` with no `.emv-issue` above it, so half the typography
   stopped at the page boundary and the same words were set two ways on two
   pages. The doubled class needs no ancestor and travels with the block. */
.emv-issue__body.emv-issue__body h2,
.emv-issue__body.emv-issue__body h3,
.emv-issue__body.emv-issue__body h4,
.emv-issue__body.emv-issue__body h5,
.emv-issue__body.emv-issue__body h6 {
  font-family: var(--display) !important;
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.014em;
  text-wrap: balance;
}
.emv-issue__body.emv-issue__body h2 { font-size: 30px !important; margin: 1.9em 0 0.5em; }
.emv-issue__body.emv-issue__body h3 { font-size: 23px !important; margin: 1.8em 0 0.45em; }
.emv-issue__body.emv-issue__body h4 { font-size: 20px !important; margin: 1.7em 0 0.4em; }
.emv-issue__body.emv-issue__body h5,
.emv-issue__body.emv-issue__body h6 { font-size: 18px !important; margin: 1.5em 0 0.4em; }

/* --- Departments ---------------------------------------------------------
   THE RULE IS DRAWN ON WHAT THE ISSUE CALLS A SECTION, NOT ON A TAG NAME.

   It used to be `h2`, which meant it appeared wherever an editor had happened
   to pick the bigger of beehiiv's two heading sizes — every department in 52
   issues, and in the other six, one heading out of seven. Those six printed as
   an unbroken column of text with no departments at all: the same publication,
   set two ways, decided by a choice of type size in an email editor.

   emv_issue_mark_departments() now marks whichever level carries the sections,
   so the rule, the size and the folio all land on the same headings the
   masthead's contents block lists — in every issue, whichever level it used.
   An h3 doing sub-heading duty inside a section never gets one by accident.
   -------------------------------------------------------------------------- */
.emv-issue__body.emv-issue__body .emv-dept {
  position: relative;
  font-size: 30px !important;
  margin: 2.15em 0 0.5em;
  padding-top: 0.8em;
  /* The heavy rule that opens a department, the same one .emv-folio draws. */
  border-top: 2px solid var(--rule-heavy);
}
.emv-issue__body.emv-issue__body > div:first-child .emv-dept,
.emv-issue__body.emv-issue__body > .emv-dept:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* The folio. The number is the one the contents block gave that section, which
   is what ties the two together — and it is the only thing on the page that
   reads at a glance as "you are in section four of seven" on an article that
   runs to fourteen thousand pixels.

   IT SITS ABOVE THE HEADING AT EVERY WIDTH, and that is now the only place it
   can sit. It used to move into the margin above 1160px, because a 680px column
   inside a 1056px measure left 188px of white either side to print a marginal
   figure on. The column fills the measure now, so that white is gone; the old
   rule set `left: -104px`, which would hang the number outside the shell and
   scroll the page sideways.

   attr() rather than a counter, because the count belongs to the sections the
   PHP found — a CSS counter would number every marked heading it met, and be
   wrong the day anything else on the page carries the class. */
.emv-issue__body.emv-issue__body .emv-dept::before {
  content: attr(data-folio);
  display: block;
  margin-bottom: 8px;
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--gold-800);
}

/* A heading inside one of Colten's coloured pull-out panels keeps beehiiv's
   own treatment. The panel is his editorial device, it is painted from the
   inside out, and a department rule drawn across the top of it would read as
   the panel being cut in half. */
.emv-issue__body.emv-issue__body [style*="background-color"] h2,
.emv-issue__body.emv-issue__body [style*="background-color"] .emv-dept {
  border-top: 0;
  padding-top: 0;
  margin-top: 0.6em;
}
/* A department inside a painted panel keeps its folio, but only once the folio
   has somewhere to be: in the margin it sits on the page's own white, clear of
   the panel. Inline — below 1160px — it would print gold-800 on the author's
   navy, which is 2.4:1. */
.emv-issue__body.emv-issue__body [style*="background-color"] .emv-dept::before { content: none; }

/* --- The printed initial -------------------------------------------------
   The home page opens its civic column on one and has since the redesign; this
   page, which is the one surface anybody reads for thirteen minutes at a time,
   opened on nothing. Same mark, same gold, sunk two lines rather than three
   because the paragraph it lands on here is Colten's second — the one under the
   greeting — and it runs to about a line and a half.

   Which paragraph gets it is decided in PHP, where the copy can actually be
   measured: see emv_issue_mark_lede(). Seven issues in the archive open on two
   short lines and go straight into the first department, and they get no
   initial at all. The ornament is earned by the copy; the layout is the same
   either way.
   -------------------------------------------------------------------------- */
.emv-issue__body.emv-issue__body .emv-lede::first-letter {
  float: left;
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.7em;
  line-height: 0.82;
  letter-spacing: -0.02em;
  margin: 0.04em 0.08em 0 0;
  color: var(--gold-800);
}
/* A floated initial is sized by hand and lands a pixel either side of a line
   boundary. initial-letter does the arithmetic properly: sink exactly two
   lines, cap height to the first line's ascender, baseline on the second. The
   float above stays as the fallback for anything that doesn't have it. */
@supports (initial-letter: 2) or (-webkit-initial-letter: 2) {
  .emv-issue__body.emv-issue__body .emv-lede::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    margin: 0 9px 0 0;
    -webkit-initial-letter: 2;
    initial-letter: 2;
  }
}

/* beehiiv writes <b>, not <strong>, throughout. Weight only — see the colour
   note above. */
.emv-issue__body b,
.emv-issue__body strong { font-weight: 700; }

/* Links keep beehiiv's colour unless the PHP pass judged them safe to restyle
   — that is, unless they sit on the page's own white ground rather than inside
   a panel the author painted. #E67E3B on white is 3.1:1, under AA for body
   text; the site's own link brown is 5.4:1 on the same ground. Inside a navy
   panel the orange is the right colour and is left alone. */
.emv-issue__body a { font-weight: 600; }
.emv-issue__body a.emv-il {
  color: var(--gold-700, #a0601f);
  border-bottom: 1px solid var(--paper-line);
}
.emv-issue__body a.emv-il:hover { border-bottom-color: currentColor; }

.emv-issue__body img {
  display: block;
  height: auto;
  max-width: 100%;
  /* The email rounds its images; this printing does not. */
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Image captions — beehiiv wraps them in <small><p>. */
.emv-issue__body small {
  display: block;
  font-size: 13px !important;
  line-height: 1.5;
  color: var(--slate, #64707d) !important;
}
.emv-issue__body small p { margin: 0; }

.emv-issue__body ul,
.emv-issue__body ol { margin: 0 0 1.15em; padding-left: 1.3em; }
.emv-issue__body li { margin-bottom: 0.5em; }

/* Colten's coloured pull-out panels — the Utility Box and anything like it —
   are left exactly as he built them, radius and all. The rules-not-shadows
   principle governs the SITE's furniture: the cards, the bands, the mastheads
   this theme draws. A box the author painted inside his own article is his
   device, not the theme's, and squaring it off would be the design system
   editing the writing. */

/* --- The end mark --------------------------------------------------------
   A paper marks the foot of a story so the reader knows the column ended
   rather than ran out, and this page needs it more than most: what follows the
   last line is three more headlines, which without a mark read as more issue.

   The white ring is a knockout, not a drop shadow — it is how a printer cuts a
   hole in a rule to sit a mark in it, and the page's standing rule against
   shadows is about objects pretending to float, which this does not.
   -------------------------------------------------------------------------- */
.emv-issue__endmark {
  position: relative;
  max-width: var(--measure);
  height: 9px;
  margin: 44px auto 0;
}
.emv-issue__endmark::before {
  content: "";
  position: absolute;
  inset: 4px 0 auto;
  height: 1px;
  background: var(--rule);
}
.emv-issue__endmark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 9px;
  height: 9px;
  transform: translateX(-50%);
  background: var(--gold-500);
  outline: 7px solid #fff;
}

/* --- The colophon -------------------------------------------------------- */
.emv-issue__colophon {
  max-width: var(--measure);
  margin: 40px auto 0;
  padding-top: 16px;
  border-top: 2px solid var(--rule-heavy);
  font-family: var(--ui);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate, #64707d);
}
.emv-issue__colophon strong { color: var(--ink); }
.emv-issue__colophon .emv-link { margin-left: 4px; }

/* The corrections promise itself, under the colophon it follows. Smaller than
   the colophon and with no rule of its own: it is the fine print of the line
   above rather than a third section, and a second 2px rule this close to the
   foot would read as the article ending twice. */
.emv-issue__policy {
  max-width: var(--measure);
  margin: 10px auto 0;
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.65;
  color: var(--slate, #64707d);
  text-wrap: pretty;
}
.emv-issue__policy strong { color: var(--ink); font-weight: 600; }

@media (max-width: 760px) {
  .emv-issue__bandbody { padding-top: 30px; }
  .emv-issue__body { font-size: 17px; line-height: 1.68; }
  .emv-issue__body.emv-issue__body h2,
  .emv-issue__body.emv-issue__body .emv-dept { font-size: 25px !important; }
  .emv-issue__body.emv-issue__body h3 { font-size: 21px !important; }
  .emv-issue__body.emv-issue__body h4 { font-size: 19px !important; }
  .emv-issue__inside { padding: 18px 20px 15px; }
  .emv-issue__endmark { margin-top: 34px; }
}

/* ===========================================================================
   SEARCH RESULTS
   The one page on the site whose whole job is to be scanned rather than read.
   Set as a ruled list, not as cards: a reader with a specific question is
   comparing twelve titles against each other, and cards put a border and 24px
   of padding between every pair of things being compared.
   =========================================================================== */
.emv-search__form {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 40px;
  max-width: 620px;
}

.emv-search__input {
  flex: 1;
  min-width: 0;
  font-family: var(--ui);
  font-size: 17px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--mist-200);
  border-bottom-width: 2px;
  border-radius: 0;
  padding: 13px 14px;
}

.emv-search__input:focus {
  outline: none;
  border-color: var(--nv-600);
}

.emv-search__empty,
.emv-search__none {
  max-width: 620px;
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.68;
  color: #26313c;
}

.emv-search__none p { margin: 0 0 1em; }
.emv-search__none p:last-child { margin-bottom: 0; }

.emv-search__noneLead {
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
}

.emv-results {
  list-style: none;
  margin: 0 0 52px;
  padding: 0;
}

.emv-results:last-child { margin-bottom: 0; }

.emv-result + .emv-result { border-top: 1px solid var(--rule); }

.emv-result__link {
  display: block;
  padding: 20px 0;
  color: inherit;
}

.emv-result__link:hover .emv-result__title { color: var(--gold-800); }

.emv-result__meta {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--slate);
}

/* The section a hit was found in, marked in gold because it is the part of
   the result that is doing the new work — it is the difference between "this
   issue mentions it somewhere" and "it is in the Utility Box". */
.emv-result__section { color: var(--gold-800); }

.emv-result__title {
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
  transition: color 160ms ease;
}

.emv-result__snippet {
  margin: 0;
  font-family: var(--ui);
  font-size: 15.5px;
  line-height: 1.6;
  color: #4a5561;
}

/* The match itself. A background wash rather than bold: the snippet is set in
   running text and a bolded term inside it reads as emphasis the writer put
   there, which is a claim we should not make on his behalf. */
.emv-hit {
  background: #fdf0d5;
  color: inherit;
  padding: 0 2px;
  border-radius: 2px;
}

.emv-folio--tight { margin-top: 8px; }

/* --- Who to call ----------------------------------------------------------
   Six doors into the business register, set on the front page as a row of
   ruled cells rather than as chips. Chips read as filters — controls that
   narrow something already on the page — and these are destinations. Each one
   carries its real count, because the count is the part that says this is a
   record rather than a menu.
   -------------------------------------------------------------------------- */
/* Three across, two rows. An auto-fit track laid five across the 1056px
   measure and left the sixth alone on a row of its own with a rule under it
   and nothing beside it — and at six across "Electrical & Plumbing" broke over
   two lines while the other five sat on one. Six is a known quantity here, so
   the grid states it. */
.emv-trades {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}

@media (max-width: 900px) {
  .emv-trades { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .emv-trades { grid-template-columns: 1fr; }
}

.emv-trade {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 18px 16px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  transition: color 160ms ease;
}

/* The vertical rules between cells, drawn only where a cell has a neighbour
   to its left — a border on every cell would draw one down the page's own
   left edge, outside the measure. */
/* The vertical rules sit between columns, so they are drawn on every cell that
   is not in the first column — by nth-child and not by "+ .emv-trade", which
   follows the DOM and would rule the first cell of the second row as though it
   had a neighbour to its left. */
.emv-trade:not(:nth-child(3n + 1)) {
  padding-left: 18px;
  box-shadow: inset 1px 0 0 var(--rule);
}

@media (max-width: 900px) {
  .emv-trade:not(:nth-child(3n + 1)) { padding-left: 0; box-shadow: none; }
  .emv-trade:not(:nth-child(2n + 1)) { padding-left: 18px; box-shadow: inset 1px 0 0 var(--rule); }
}

.emv-trade:hover { color: var(--gold-800); }

.emv-trade__name {
  font-family: var(--ui);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.25;
}

.emv-trade__n {
  flex: none;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--slate);
  font-variant-numeric: tabular-nums;
}

.emv-trade:hover .emv-trade__n { color: var(--gold-800); }

.emv-trades__foot {
  margin: 18px 0 0;
  font-family: var(--ui);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--slate);
}

/* On a phone the grid collapses to one column, and the inset rule that drew
   the cell divisions would run down the left of every row. */
@media (max-width: 560px) {
  .emv-trade { padding-left: 0 !important; box-shadow: none !important; }
}

/* --- The colophon ---------------------------------------------------------
   The trust cluster on the front page. Set as a ruled two-column list — name
   left, the page's own summary right — which is how a masthead prints its
   standing information, and deliberately not as cards: five cards would make
   the policies look like features being sold rather than commitments being
   stated.
   -------------------------------------------------------------------------- */
.emv-colophon { border-top: 1px solid var(--rule); }

.emv-colophon__row {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 8px 28px;
  align-items: baseline;
  padding: 15px 0 14px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  transition: color 160ms ease;
}

.emv-colophon__row:hover { color: var(--gold-800); }

.emv-colophon__name {
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.emv-colophon__line {
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
}

.emv-colophon__row:hover .emv-colophon__line { color: #4a5561; }

@media (max-width: 640px) {
  .emv-colophon__row { grid-template-columns: 1fr; gap: 3px; }
}

/* --- Section self-links ---------------------------------------------------
   The "#" that follows every anchored heading in an issue. Quiet but always
   drawn, never hover-only: an affordance that appears on hover does not exist
   on a phone, and the phone is where most of these are read.
   -------------------------------------------------------------------------- */
.emv-anchor {
  display: inline-block;
  margin-left: 0.4em;
  font-family: var(--ui);
  font-size: 0.62em;
  font-weight: 700;
  color: var(--mist-200);
  vertical-align: baseline;
  transition: color 160ms ease;
}

.emv-anchor:hover,
.emv-anchor:focus-visible { color: var(--gold-800); }

/* The confirmation. Drawn as a label beside the mark rather than by swapping
   the "#" for a tick, so the heading's width does not jump as it appears. */
.emv-anchor.is-copied { color: var(--gold-800); }

.emv-anchor.is-copied::after {
  content: "Copied";
  margin-left: 0.5em;
  font-size: 0.95em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --- Send this to a neighbor ----------------------------------------------
   The share row at the foot of an issue. Set as three text buttons on one
   ruled line — not brand-coloured icons, which would put three other
   companies' logos at the end of every issue and read as an advertisement for
   them rather than an offer to the reader.
   -------------------------------------------------------------------------- */
/* No rule of its own: the end mark directly above it is already a ruled line
   across the same measure, and two hairlines 45px apart is a box being drawn
   round the share buttons in two strokes. Used on the issue page only. */
.emv-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  max-width: var(--measure);
  margin: 26px auto 0;
}

.emv-share__label {
  margin-right: 4px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--slate);
}

.emv-share__btn {
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  border: 1px solid var(--mist-200);
  border-bottom-width: 2px;
  padding: 7px 13px;
  transition: border-color 160ms ease, color 160ms ease;
}

.emv-share__btn:hover {
  color: var(--gold-800);
  border-color: var(--gold-500);
}

.emv-share__btn.is-copied {
  color: var(--gold-800);
  border-color: var(--gold-500);
}

/* Replaces the label rather than sitting beside it: this control is a fixed
   width in a row of three, and growing it would shove the other two along. */
.emv-share__btn.is-copied { font-size: 0; }
.emv-share__btn.is-copied::after {
  content: "Copied";
  font-size: 13.5px;
}

/* The estimator's next step. Set above the footnote and in body size, because
   it is an offer rather than a citation — the source link below it is the
   small print, and these two had been reading as one paragraph of small print
   with nothing in it for the reader to do. */
.emv-calc__act {
  /* Same reason .emv-calc__foot carries its own inset: a direct child of the
     card gets none of the body's padding, and this was setting flush against
     both borders while everything above and below it was inset 24px. */
  padding: 0 24px;
  margin: 4px 0 10px;
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.6;
  color: #26313c;
}

/* --- Events ----------------------------------------------------------------
   The week's list, lifted from the newsletter. It reuses .emv-issue__body so
   the blocks are set in the typography they were written for; these are the
   few things that are this page's rather than an issue's.
   -------------------------------------------------------------------------- */
/* --- The week, set as a calendar -------------------------------------------
   inc/events-parse.php reads the newsletter's bulleted lines into
   { day, time, title, where }; everything to the plate below is how that is
   set. Three rules govern it, and the third is the one that was got wrong
   first and had to be rebuilt:

   ONE SPINE. The grid, the folio rule above it and the source line below all
   start and end on the shell's own edges.

   RULES, NOT BOXES. Columns are separated by hairlines and opened by the heavy
   rule a department head uses. Nothing is a card and nothing floats.

   THE NAME IS THE LOUDEST THING. The first version set each event as a row
   three columns wide — time, name, place, spread over 1056px — under a day
   heading larger than any of them. So the page's biggest type said "Tuesday",
   an event was a thin ribbon with three places to look, and you could not tell
   at a glance what was on. Now the week is one object: a column per day, each
   event a three-line block, and the event's name is the largest type in it.
   -------------------------------------------------------------------------- */

.emv-folio__dateline {
  margin-left: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--slate);
}
.emv-folio__note {
  font-family: var(--ui);
  font-size: 13px;
  font-style: italic;
  color: var(--slate);
}

/* --- THE WEEK AS ONE AGENDA -----------------------------------------------
   This replaced a grid of four day-columns. The reason is measured, not
   stylistic: on the live August 20 issue the days held 5, 2, 1 and 2 events,
   and a grid gives every column both the same width and the same height — so
   row one was four 779px tracks carrying 750, 347, 155 and 285px of content.
   51% of the schedule was empty, Monday was an 80%-empty column with a hairline
   down its side pointing at nothing, and the fifth day wrapped onto a second
   row 643px below the shortest column, where it read as a different section.

   A calendar grid works when the days are evenly loaded. A week of local
   listings never is, and this one structurally never will be: Thursday is the
   food truck rally plus the high school's home fixtures, Monday is one class at
   the senior centre.

   So: one row per day, the date in a rail on the left, the events in a single
   column beside it. A day is exactly as tall as its events. There is no second
   row to wrap onto, so there is nothing to strand, and the event names form one
   continuous column down the page — one scan path instead of four plus a
   surprise.
   -------------------------------------------------------------------------- */
.emv-ag {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 2px solid var(--rule-heavy);
}

.emv-ag__day {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 0 28px;
  padding: 22px 0 4px;
  /* TWO WEIGHTS OF RULE, because there are two sizes of break. A day opening
     and one event following another are not the same event, and at one weight
     the reader has only the rule's LENGTH to tell them apart — a day's runs the
     full measure, an event's starts at the time rail. That is a real signal but
     a quiet one, and it is the only thing separating "Friday starts here" from
     "here is another Thursday thing". So the day takes the darker hairline. */
  border-top: 1px solid var(--nv-600);
}
.emv-ag__day:first-child { border-top: 0; }

/* --- The date rail --------------------------------------------------------
   Sticky, so the day you are inside names itself the whole time you are inside
   it rather than only at the instant you scroll past its heading. That
   self-labelling is the one thing the column grid genuinely did better, and it
   is worth keeping without keeping the grid. 96px clears the 76px site header.

   `align-self: start` is what makes the sticky work at all — a grid item
   defaults to stretching the full row height, and a stretched item has no room
   to travel inside.
   -------------------------------------------------------------------------- */
.emv-ag__rail {
  position: sticky;
  top: 96px;
  align-self: start;
  padding-bottom: 20px;
}

.emv-ag__date {
  display: flex;
  align-items: baseline;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0;
}
.emv-ag__wd {
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
}
.emv-ag__num {
  font-family: var(--display);
  font-size: 34px;
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
  color: var(--ink);
}
.emv-ag__count {
  margin: 9px 0 0;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--slate);
}

.emv-ag__flag {
  display: inline-block;
  margin-top: 10px;
  padding: 3px 8px 4px;
  border-radius: 2px;
  background: var(--gold-500);
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--nv-900);
}
/* Passed is a word, not a badge — it is a caveat, and a gold chip would give it
   the same weight as Today. NOT --mist-400: that token's own comment says
   decorative only and it fails AA on every surface here. */
.emv-ag__flag--past {
  padding: 0;
  background: none;
  border-radius: 0;
  font-weight: 700;
  color: var(--slate);
}

/* TODAY IS THE ONE INVERTED THING ON THE PAGE, and now it can be a filled block
   without a fight. Under the old grid it could not: filling a day meant filling
   a column, the first column carried no left padding, and a navy ground there
   either ran its text against its own edge or pushed the column off the page's
   left edge. A rail is not a column of content — it is furniture — so filling
   it neither breaks the spine (the block's left edge IS the spine) nor
   interrupts the scan, because the names it labels are in the next column
   along and stay black. */
.emv-ag__day--today .emv-ag__rail {
  padding: 16px 18px 18px;
  margin-top: -4px;
  background: var(--nv-800);
}
.emv-ag__day--today .emv-ag__wd { color: var(--gold-400); }
.emv-ag__day--today .emv-ag__num { color: #ffffff; }
.emv-ag__day--today .emv-ag__count { color: var(--dim); }

.emv-ag__day--past .emv-ag__num,
.emv-ag__day--past .emv-ev__title { color: var(--slate); }

/* --- One event ------------------------------------------------------------
   Time in a narrow rail, then the name, then the place, then the kind.

   THE RAIL IS NOT THE THREE-COLUMN ROW THAT WAS REJECTED. That one put time at
   x=192, name at x=364 and PLACE at x=855 — one event spread across 1056px with
   three separate places to look, and the note back was that it was "not super
   easy to tell what's happening". The fault was the place: a venue 500px from
   the name it belongs to. The name and its place are one thought and they stay
   stacked in one column here. A time is not part of that thought — it is the
   index you scan by — and an index belongs in the margin, which is where every
   printed programme has always put it.
   -------------------------------------------------------------------------- */
.emv-ag__events {
  list-style: none;
  margin: 0;
  padding: 0;
}

.emv-ev {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 148px;
  gap: 0 24px;
  align-items: baseline;
  padding: 14px 0 16px;
  border-top: 1px solid var(--rule);
}
.emv-ev:first-child,
/* Set by the filter script on whichever row is first once the hidden ones are
   out. Without it, filtering to one kind leaves the surviving row drawing a
   hairline directly under the day's own rule. */
.emv-ev--lead { border-top: 0; padding-top: 2px; }

/* The script hides rows with the `hidden` attribute, and `display: grid` beats
   the browser's default `[hidden] { display: none }`. */
.emv-ev[hidden],
.emv-ag__day[hidden] { display: none; }

/* Right-aligned and tabular, which is the whole reason a rail beats a line
   above the name: the start times stack into one readable column of numerals
   and proportional figures would make it ragged. */
.emv-ev__when {
  margin: 0;
  text-align: right;
  font-family: var(--ui);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.35;
}
.emv-ev__start {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold-800);
}
/* The finish, quieter and under the start. Nobody scans a listings page by its
   end times — the question is what starts when, and the finish only matters
   once you have picked something. */
.emv-ev__end {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--slate);
}
.emv-ev__recur {
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-800);
}
/* An empty cell in a column of times reads as a rendering fault; the words read
   as what they are, which is the newsletter not having said. */
.emv-ev__notime {
  display: block;
  font-size: 12.5px;
  font-style: italic;
  color: var(--slate);
}

.emv-ev__body { min-width: 0; }

.emv-ev__title {
  margin: 0;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
}
.emv-ev__link {
  color: inherit;
  background-image: linear-gradient(var(--gold-500), var(--gold-500));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1.5px;
  transition: background-size 200ms ease, color 200ms ease;
}
.emv-ev__link:hover { color: var(--gold-800); background-size: 100% 1.5px; }

.emv-ev__where {
  margin: 5px 0 0;
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate);
}
.emv-ev__where a {
  color: var(--gold-800);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* --- The kind -------------------------------------------------------------
   Printed on every row, not left to the filter bar, so a reader who never
   touches a control still learns that the thing at 5:30 is a council meeting.
   In the right margin because it is an index, like the time: a column of kinds
   can be run down with the eye without reading a word of the listings.

   The dot is reinforcement, never the message — the label is always beside it,
   so nothing here is carried by colour alone.
   -------------------------------------------------------------------------- */
.emv-ev__kind {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 2px 0 0;
  font-family: var(--ui);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate);
}
.emv-ev__kindDot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--slate);
}
.emv-ev__kindDot--sports    { background: var(--nv-500); }
.emv-ev__kindDot--city      { background: var(--gold-800); }
.emv-ev__kindDot--seniors   { background: var(--green); }
.emv-ev__kindDot--family    { background: var(--red); }
.emv-ev__kindDot--community { background: var(--slate); }

/* The empty state — reachable only by filtering to a kind that lives entirely
   in the standing list below. Set on the spine like everything else here. */
.emv-ag__none {
  margin: 0 0 22px;
  padding: 16px 18px;
  border-left: 3px solid var(--gold-500);
  background: var(--mist-50);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.emv-ag__none[hidden] { display: none; }

/* --- The bar over the week ------------------------------------------------
   The first way this page has had of answering "just show me the family
   things". Every chip is a real link with its own URL — the /directory/ rule —
   so it works before the JavaScript arrives and survives it failing, and a
   filtered view can be sent to somebody else.
   -------------------------------------------------------------------------- */
.emv-agbar { margin: 0 0 24px; }
.emv-agbar__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.emv-filt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  /* 40px tall against a 44px guideline is the deliberate trade: these sit in a
     wrapping row and 44px chips push the week a further line down the page on
     every phone. The row gap is 8px, so no two targets are ever adjacent. */
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: #ffffff;
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease, color 180ms ease;
}
.emv-filt:hover { border-color: var(--nv-600); background: var(--mist-50); }
.emv-filt--on,
.emv-filt--on:hover {
  border-color: var(--nv-800);
  background: var(--nv-800);
  color: #ffffff;
}
.emv-filt__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--slate);
}
.emv-filt__dot--sports    { background: var(--nv-500); }
.emv-filt__dot--city      { background: var(--gold-800); }
.emv-filt__dot--seniors   { background: var(--green); }
.emv-filt__dot--family    { background: var(--red); }
.emv-filt__dot--community { background: var(--slate); }
/* On the navy chip the category dots lose their contrast, and a dot that has
   gone muddy is worse than no dot: the label carries the meaning anyway. */
.emv-filt--on .emv-filt__dot { background: var(--gold-400); }

.emv-filt__n {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  font-weight: 700;
  color: var(--slate);
}
.emv-filt--on .emv-filt__n { color: var(--gold-400); }

/* The standing band, in the same agenda rows as the week — the recurrence
   takes the place the time takes above, so "Thursdays" lands in the same rail
   "6:00 PM" does. Two lists of the same kind of thing on one page should not be
   two designs. It takes the warm rule: a cool grey hairline on cream reads as
   a smudge. */
.emv-ag__events--standing {
  border-top: 2px solid var(--rule-heavy);
  padding-top: 4px;
}
.emv-ag__events--standing .emv-ev {
  border-color: var(--rule-warm);
  padding: 18px 0 20px;
  /* A WIDER RAIL THAN THE WEEK'S. Up there the rail holds a clock time and 104px
     is generous for one. Here it holds a recurrence, and "Wednesdays and
     Thursdays" broke over three lines in the same track while the row beside it
     sat half empty. It is the same rail doing a longer job, so it gets the room
     — taken from the kind column, which is 148px for two short words. */
  grid-template-columns: 168px minmax(0, 1fr) 148px;
}
.emv-ag__events--standing .emv-ev:first-child { border-top: 0; }
.emv-ag__events--standing .emv-ev__title { font-size: 21px; }
/* Set as a sentence rather than a stack of small caps: two weekdays and a range
   is four lines of shouting otherwise, and this band is the quiet one. */
.emv-ag__events--standing .emv-ev__recur {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  line-height: 1.5;
  margin-bottom: 3px;
}

/* --- The issue's picture --------------------------------------------------- */
.emv-plate { margin: 44px 0 0; }
.emv-plate__img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: cover;
  object-position: 50% 50%;
  background: var(--mist-100);
}
.emv-plate__cap {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--rule);
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--slate);
}

@media (max-width: 1080px) {
  .emv-ag__day { grid-template-columns: 120px minmax(0, 1fr); gap: 0 22px; }
  .emv-ev { grid-template-columns: 96px minmax(0, 1fr) 132px; gap: 0 18px; }
  .emv-ag__num { font-size: 30px; }
  .emv-ev__title { font-size: 19px; }
}

/* THE KIND LEAVES THE MARGIN FIRST. Below this the right rail costs the event
   name more than the index is worth — a 148px column taken off a shrinking
   measure is what starts breaking names over four lines. It moves under the
   place, where it is still on every row and still not carried by colour. */
@media (max-width: 900px) {
  .emv-ev {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 0 18px;
  }
  .emv-ev__kind {
    grid-column: 2;
    margin-top: 8px;
  }
}

/* --- The phone ------------------------------------------------------------
   The rail stops being a rail. Under 620px there is not enough width to give
   132px to furniture and still set a name on the remainder, so the date
   becomes the section rule that opens the day and the times move back above
   their names.

   The rail also stops being sticky. A sticky date block on a phone eats the
   top of the viewport for the whole length of a day, and the day is most of the
   screen already — the thing sticky solves (losing track of which day you are
   in) does not arise when only one day is visible at a time.
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  .emv-ag__day {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 18px 0 6px;
  }

  .emv-ag__rail {
    position: static;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0 12px;
    padding-bottom: 14px;
  }
  .emv-ag__count { margin: 0; }
  .emv-ag__flag { margin-top: 0; margin-left: auto; }

  .emv-ag__day--today .emv-ag__rail {
    margin: 0 0 14px;
    padding: 12px 16px 13px;
  }

  .emv-ev {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 13px 0 15px;
  }
  /* Left-aligned once it is a line above the name rather than a column beside
     it — a right-aligned line on the phone's full width strands the time on
     the far side of the screen from the name it belongs to. */
  .emv-ev__when {
    text-align: left;
    margin-bottom: 4px;
  }
  .emv-ev__start,
  .emv-ev__end,
  .emv-ev__recur,
  .emv-ev__notime { display: inline; }
  .emv-ev__end::before { content: " "; }

  .emv-ev__kind { grid-column: 1; margin-top: 8px; }
  .emv-ev__title { font-size: 19.5px; }

  .emv-agbar { margin-bottom: 20px; }
}

/* ONE SPINE, IN BOTH STATES. These three were centred in the shell, under a
   folio rule that spans the full measure — which is what made the old page
   look like a narrow column pinned to the middle of a wider one. They now
   start on the page's own left edge, and so does the fallback body, so the
   schedule and the reprint sit on the same line. */
.emv-events__body { max-width: 680px; margin: 0; }

.emv-events__source,
.emv-events__stale {
  margin: 26px 0 0;
  font-family: var(--ui);
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate);
}

/* Only drawn when the import has fallen behind. Set in the warning stock the
   civic page uses for "not certified yet", because it is the same kind of
   statement: here is the thing, and here is exactly how much to trust it. */
.emv-events__stale {
  margin: 0 0 30px;
  padding: 11px 14px;
  background: #fdf0d5;
  border-left: 3px solid var(--gold-500);
  color: #26313c;
}

.emv-events__empty { font-family: var(--ui); font-size: 17px; line-height: 1.7; color: #26313c; }
.emv-events__emptyLead { font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 10px; }
.emv-events__plan { font-size: 16px; }

/* The front page's slice of the week's events. Same body typography as an
   issue, capped so it reads as a taste rather than a reprint. */
/* ON THE PAGE'S OWN LEFT EDGE, not centred.
   This block is an issue's events section lifted whole (emv_issue_section_html)
   and set in .emv-issue__body, which centres a 680px reading column — right on
   the issue page, wrong here, where the folio rule above it spans the full
   measure and the centred column gave the section a second left edge 190px in.
   The measure stays; only the centring goes. Same rule as everywhere else on
   this site: nothing sets its own left edge, the layout does. */
.emv-week-events { max-width: 680px; margin: 0; }
/* beehiiv pads its outermost blocks 10px either side. On the issue page every
   line carries that inset equally so it reads as the column's edge; here the
   folio rule above and the link below are drawn at the page's edge, and 10px is
   enough to see. Direct children only — the padding inside a block is the
   author's layout. */
.emv-week-events > div { padding-left: 0 !important; padding-right: 0 !important; }
.emv-week-events__more { max-width: 680px; margin: 18px 0 0; font-family: var(--ui); font-size: 15px; }

/* The parsed version of the same block: the next few DATED events, grouped by
   day. Rows are the site's .emv-ev, unchanged — the events page and the front
   page show the same object, so they should not be two components that drift.
   Only the day heading is new here, because the front page shows a handful of
   events across two or three days rather than a whole week of columns. */
.emv-week-events__list { max-width: 680px; margin: 0; padding: 0; list-style: none; }

.emv-week-events__day { display: block; }
/* The day owns the rule that opens its group, so the first event under it does
   not draw a second one 8px below. Every later .emv-ev keeps its own hairline,
   which is what separates events within a day. */
.emv-week-events__day + .emv-ev { border-top: 0; }
.emv-week-events__day:first-child .emv-week-events__dayLabel { border-top: 0; padding-top: 0; margin-top: 0; }

.emv-week-events__dayLabel {
  margin: 22px 0 6px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
}

/* Today is the one thing in this block a reader scans for, so it is the one
   thing that is not slate. The separator is drawn rather than typed so the
   day label stays one string for a screen reader. */
.emv-week-events__today { color: var(--gold-800); }
.emv-week-events__today::before { content: "\00b7"; margin: 0 0.45em 0 0.1em; color: var(--slate); }

/* --- Standing pages (New here?, Meeting people) ----------------------------
   Reference lists rather than prose, set as ruled definition rows for the same
   reason the civic "How to be heard" block is: a reader comes back to these
   looking for one line, not to read them through.
   -------------------------------------------------------------------------- */
.emv-kit__intro { font-size: 17.5px; line-height: 1.72; color: #26313c; margin-bottom: 40px; }

.emv-kit__group + .emv-kit__group { margin-top: 44px; }

.emv-kit__groupTitle {
  margin: 0 0 4px;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-800);
  border-top: 2px solid var(--rule-heavy);
  padding-top: 13px;
}

.emv-kit__list { margin: 0; }

.emv-kit__row {
  display: grid;
  grid-template-columns: minmax(160px, 260px) minmax(0, 1fr);
  gap: 6px 32px;
  align-items: baseline;
  padding: 16px 0 15px;
  border-bottom: 1px solid var(--rule);
}

/* The name of the thing, set in the display face — the same call the front
   page's tiles make. A dt here is not a data label: it is the line the reader
   scans the column for, and every other scannable name on the site (tile name,
   section head, issue headline) is Newsreader. In Inter at 700 this column
   read as a table of form fields. */
.emv-kit__row dt {
  margin: 0;
  font-family: var(--display);
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--ink);
}

.emv-kit__row dd {
  margin: 0;
  font-family: var(--ui);
  font-size: 15.5px;
  line-height: 1.6;
  color: #4a5561;
}

.emv-kit__links { display: block; margin-top: 6px; font-weight: 600; }
.emv-kit__links a + span { margin: 0 6px; color: var(--mist-200); }

.emv-kit__lift { max-width: 680px; margin: 0 auto; }

@media (max-width: 640px) {
  .emv-kit__row { grid-template-columns: 1fr; gap: 3px; }
}
.emv-kit__note { margin: 20px 0 0; font-family: var(--ui); font-size: 14.5px; line-height: 1.6; color: var(--slate); }
.emv-trades__new { margin: 0 0 20px; font-family: var(--ui); font-size: 15.5px; line-height: 1.6; color: #26313c; }

/* E2's weekly tag. Same slot as .emv-ev__recur used to occupy in the deleted
   EVERY WEEK block — above the time, in the when column — so a standing date
   reads as standing without needing a section of its own. */
.emv-ev__weekly {
  display: block;
  font-family: var(--ui, 'Mona Sans', system-ui, sans-serif);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate, #64707d);
  margin-bottom: 3px;
}

/* E12's tail line. Set as a note under the list rather than as a day, so a
   short list reads as the end of a publishing cycle instead of as a page that
   failed to load the rest. */
.emv-events__tail {
  margin: 0;
  font-family: var(--ui, 'Mona Sans', system-ui, sans-serif);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate, #64707d);
}

/* ============================================================================
   THE PANEL — .emv-band > .emv-shell
   ============================================================================
   WHY THIS EXISTS. The page was set as one continuous run of white with hairline
   rules between departments, on the reasoning recorded at --rule-heavy ("Rules,
   not shadows"). Measured against a reader rather than against the metaphor, it
   did not hold: the gap ABOVE a section's rule and the gap BELOW its closing
   button were within a few pixels of each other, so a rule read as decoration
   rather than as a boundary, and every section — issues, events, the register,
   the colophon — was the same left-ragged column of type on the same white,
   trailing off into a dead right margin. Nothing bounded anything. The report
   from the person who has to use it was that sections were hard to tell apart
   and hard to find.

   So the departments get boxed. Not floated on a blur — that is the card trick
   the issue page's note already rejects — but PRINTED: a sheet of stock lying on
   a darker desk, capped by its department's rule, flagged at the top-left with
   its name reversed out of that rule, and ruled off above the way onward. The
   shadow is one hairline of contact and a long, nearly invisible lift; the sheet
   sits ON the page, it does not hover over it.

   Three things change for the reader:
     1. Every section now has FOUR edges. The dead right margin becomes the
        sheet's margin, which is a composition rather than an absence.
     2. Section starts are unmissable at scroll speed — a solid flag, at a fixed
        position on every sheet, is findable in peripheral vision in a way a
        12px letterspaced label on white is not.
     3. Ground carries meaning again. City hall keeps its warm stock (see
        .emv-band--paper), and it now reads as warm stock ON warm ground, one
        department printed on different paper, instead of as the only section
        that happens to have a background.

   No markup was invented for this. Every page on the site already builds its
   sections out of `.emv-band > .emv-shell` with an `.emv-folio` at the top and
   an `.emv-door` at the bottom, so the whole treatment is a restyle of furniture
   that is already there. `.emv-band--open` is the opt-out, for the two bands on
   the issue page that are the article itself rather than a department of a
   routing page.
   -------------------------------------------------------------------------- */

.emv-band {
  /* Declared on the band, not on .emv-broadsheet, so --tight can override them
     by cascade and the mobile block can reset both in one place. */
  --panel-pad: 40px;
  --panel-top: 34px;
  --panel-bot: 42px;
  --panel-gap: 24px;

  --stock:      #efece6;  /* the desk */
  --panel:      #ffffff;  /* the sheet */
  --panel-edge: #e1ddd5;
  --panel-cap:  var(--nv-800);
  --panel-rule: var(--rule);
}
.emv-band--tight { --panel-top: 26px; --panel-bot: 32px; }

/* --- The desk ------------------------------------------------------------- */
/* Overrides the 74px vertical padding declared at .emv-band above: that padding
   was the ONLY thing separating two sections, and it is now the sheets' own
   padding that does the separating. What is left here is the gap between two
   sheets. Adjacent bands drop the top half of it so the gap between any two
   sheets is one value rather than two stacked. */
.emv-band:not(.emv-band--open) {
  background: var(--stock);
  padding: var(--panel-gap) var(--gutter);
}
.emv-band:not(.emv-band--open) + .emv-band:not(.emv-band--open) { padding-top: 0; }

/* --- The sheet ------------------------------------------------------------ */
/* .emv-shell already carries the measure (max-width + gutter). Re-padding it
   here rather than wrapping a new element keeps the 1120px measure exactly
   where it was — the sheet is the measure, and below 1184px the band's own
   gutter holds it off the edge of the screen. */
.emv-band:not(.emv-band--open) > .emv-shell {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  /* The department rule, moved from .emv-folio's border-top to the sheet's own
     top edge — same weight, same job, now bounding the section instead of
     sitting inside it. */
  border-top: 3px solid var(--panel-cap);
  border-radius: 2px;
  padding: var(--panel-top) var(--panel-pad) var(--panel-bot);
  /* One hairline of contact, then a long lift with almost no opacity in it.
     Anything blurrier reads as a UI card; this reads as paper on a desk. */
  box-shadow:
    0 1px 0 rgba(7, 24, 37, 0.03),
    0 18px 34px -26px rgba(7, 24, 37, 0.34);
}

/* --- The flag ------------------------------------------------------------- */
/* :first-child ON EVERY SELECTOR IN THIS BLOCK. The flag is not a style for
   `.emv-folio`; it is the sheet's CAP, and a cap has one edge. The rules pull
   the folio up by exactly the sheet's top padding, so a folio further down the
   sheet was pulled up over whatever preceded it — a second navy plate floating
   in the middle of the paper, overlapping the block above it, while the actual
   cap at the top of the sheet stayed bare. The search results page is the one
   template that does this: its sheet opens with the search field and then uses
   two folios as inner department heads ("62 issues", "On this site"). Those are
   department rules, not flags, and they render as plain `.emv-folio` again now.
   Every other sheet on the site opens ON its folio, so nothing else moves. */
/* The department name, reversed out of the sheet's cap. Pulled up by exactly
   the sheet's top padding and out to its left edge, so the flag is part of the
   cap rather than the first line of the content. Its LEFT PADDING equals the
   sheet's, which is the alignment that matters: the flag's first letter stands
   on the same vertical as every headline, deck and button below it. */
.emv-band:not(.emv-band--open) > .emv-shell > .emv-folio:first-child {
  border-top: 0;
  align-items: center;
  min-height: 34px;
  margin: calc(var(--panel-top) * -1) calc(var(--panel-pad) * -1) 28px;
  padding: 0 var(--panel-pad) 0 0;
}
.emv-band:not(.emv-band--open) > .emv-shell > .emv-folio:first-child > .emv-folio__label {
  background: var(--panel-cap);
  color: #ffffff;
  padding: 10px 22px 10px var(--panel-pad);
  border-bottom-right-radius: 2px;
  font-size: 11.5px;
  letter-spacing: 0.18em;
}
/* The dateline on /events/ ("This week 27 August–2 September") is set INSIDE
   the label, so it comes along onto the cap and cannot stay --slate. */
.emv-band:not(.emv-band--open) > .emv-shell > .emv-folio:first-child > .emv-folio__label .emv-folio__dateline {
  color: var(--gold-400);
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* The title and deck follow the flag directly. .emv-sec__head's own 22px would
   stack on top of the flag's 28px; the flag sets the distance for both. */
.emv-band:not(.emv-band--open) > .emv-shell > .emv-folio:first-child + .emv-sec__head { margin-top: 0; }

/* --- The foot ------------------------------------------------------------- */
/* The one button that closes a section, ruled off across the sheet. On white it
   was a control standing in open space with nothing to say it was the end of
   anything; on a bounded sheet it becomes the sheet's footer. */
.emv-band:not(.emv-band--open) > .emv-shell > .emv-door {
  margin: 28px calc(var(--panel-pad) * -1) 0;
  padding: 22px var(--panel-pad) 0;
  border-top: 1px solid var(--panel-rule);
}

/* --- A sheet with no department to name ----------------------------------
   The cap is 3px of navy BECAUSE a flag is reversed out of it. Three sheets on
   the site open a page with an untitled introduction — the first band on
   /new-here/ and on /community/, and a generic page with no eyebrow to take —
   and each drew the full cap with nothing written on it. That is the failure
   already recorded at .emv-hero__folio: a rule with no line on it reads as the
   page having run out, not as it having started.

   So an unflagged sheet keeps every other part of the treatment — the desk,
   the four edges, the contact shadow — and drops the cap to the same hairline
   as the rest of its border. The sheet still bounds its section; it just no
   longer announces a department it does not have. */
.emv-band--unflagged:not(.emv-band--open) > .emv-shell {
  border-top: 1px solid var(--panel-edge);
  padding-top: calc(var(--panel-top) + 2px);
}

/* --- City hall: printed on different paper -------------------------------- */
/* --paper was already this department's mark. It now has a ground of its own to
   sit on as well, so the difference survives being one sheet among five rather
   than the one band among five with a background. Warm edge, warm foot rule,
   and the cap and flag go gold — the colour .emv-folio--gold was already asking
   for on this section. */
.emv-band--paper:not(.emv-band--open) {
  --stock:      #f1e5d3;
  --panel:      #fdf8f1;
  --panel-edge: #ead6ba;
  --panel-cap:  var(--gold-500);
  --panel-rule: var(--paper-line);
  /* The 1px paper-line rules the band used to draw across the full width are
     the sheet's border now. */
  border-top: 0;
  border-bottom: 0;
}
.emv-band--paper:not(.emv-band--open) > .emv-shell > .emv-folio:first-child > .emv-folio__label,
.emv-band:not(.emv-band--open) > .emv-shell > .emv-folio--gold:first-child > .emv-folio__label {
  background: var(--gold-500);
  /* 9.1:1. The reversed white used on the navy cap is 1.9:1 on gold. */
  color: var(--nv-900);
}
.emv-band--paper:not(.emv-band--open) > .emv-shell > .emv-folio:first-child > .emv-folio__label .emv-folio__dateline,
.emv-band:not(.emv-band--open) > .emv-shell > .emv-folio--gold:first-child > .emv-folio__label .emv-folio__dateline {
  color: rgba(7, 24, 37, 0.72);
}

/* --sunken's mist ground was a third stock invented to separate one band from
   the white on either side of it. There is no white on either side of it now,
   and a third ground would only compete with city hall's. It becomes an
   ordinary sheet. */
.emv-band--sunken:not(.emv-band--open) { border-top: 0; border-bottom: 0; }

/* --- The opt-out ---------------------------------------------------------- */
/* Two bands on the issue page are the article, not a department of a routing
   page: the contents block set at the body's own measure, and the body itself.
   Boxing those would put a card around the thing a reader came to read. They
   keep the white they set for themselves and the vertical padding the band had
   before this block existed. */
.emv-band--open { padding-top: 74px; padding-bottom: 74px; }
.emv-band--open.emv-band--tight { padding-top: 56px; padding-bottom: 56px; }

/* --- Small screens -------------------------------------------------------- */
@media (max-width: 760px) {
  .emv-band { --panel-pad: 20px; --panel-top: 26px; --panel-bot: 30px; --panel-gap: 14px; }
  .emv-band--tight { --panel-top: 20px; --panel-bot: 24px; }
  /* The flag's tracking comes off for the same reason the hero folio's does:
     "WHERE THE CONVERSATION IS" has to fit a 390px screen minus two gutters
     and two paddings before it is allowed to wrap onto the cap. */
  .emv-band:not(.emv-band--open) > .emv-shell > .emv-folio:first-child > .emv-folio__label {
    font-size: 11px;
    letter-spacing: 0.13em;
    padding: 9px 16px 9px var(--panel-pad);
  }
  .emv-band:not(.emv-band--open) > .emv-shell > .emv-door { margin-top: 30px; padding-top: 20px; }
  .emv-band--open { padding-top: 50px; padding-bottom: 50px; }
  .emv-band--open.emv-band--tight { padding-top: 40px; padding-bottom: 40px; }
}

/* --- Two rules where the sheet only needs one ------------------------------
   .emv-cityhall closes its own two columns on a --paper-line, which was the
   bottom of the section when the section had no bottom. The sheet's foot rule
   now runs the full measure 26px below it, so the block's own rule became the
   first of two hairlines with a strip of nothing between them. The wider one
   wins: it is the one that lines up with every other sheet's foot on the page. */
.emv-band:not(.emv-band--open) > .emv-shell > .emv-cityhall {
  padding-bottom: 0;
  border-bottom: 0;
}

/* --- The last sheet --------------------------------------------------------
   The subscribe block is not a .emv-band — it is its own section with its own
   plate — but on a panelled page it is the last thing in the stack, and it was
   coming out on white, 32px narrower than every sheet above it, with the stock
   stopping dead above it. Only when it follows a panelled band: the same block
   also closes /civic/ and /directory/, which are not panelled and where a strip
   of stock would be the only one on the page.

   The plate keeps its own gold cap and its own flat ground. All that changes is
   that it now stands on the same desk, at the same measure, as the sheets it
   follows. */
.emv-band:not(.emv-band--open) + .emv-signup {
  max-width: none;
  margin: 0;
  padding: 24px var(--gutter, 32px) 76px;
  background: #efece6;
}
.emv-band:not(.emv-band--open) + .emv-signup > .emv-signup__plate {
  max-width: var(--shell, 1120px);
  margin: 0 auto;
}
@media (max-width: 760px) {
  .emv-band:not(.emv-band--open) + .emv-signup { padding: 14px var(--gutter, 20px) 48px; }
}

/* ============================================================================
   THE TILES — .emv-tiles
   ============================================================================
   The front page's last four departments — events, city hall, the business
   registry, the colophon — reduced to four doors. Each one used to render a
   working copy of the page it links to; a tile carries a mark, a name, one line
   and a button, and the page itself stays where it is.

   THESE ARE THE PAGE'S NAVIGATION. Everything on this site that is not the
   newsletter is behind one of them, so they are the last thing on the page that
   should read as small print. The first version set them at the size of a
   caption — a 26px gold stub, a 1.35rem name, a 14.5px line — and four boxes of
   the same size holding four short lines of the same type read as one paragraph
   broken into quarters. A reader had to read all four to learn that they went
   anywhere. Three things fix that, in order of how much they do:

     1. A MARK. A calendar, a civic building, a shopfront, a pen — set in a
        plate of the warm stock the civic pages are printed on. It is the only
        part of a tile that identifies it before it is read, and it is what makes
        the four scannable rather than legible.
     2. A GOLD CAP RULE, 3px, the full width of the tile, replacing the short
        stub. The same mark the folios and the .emv-band section heads carry:
        the theme's way of saying "this is a named section of the paper", which
        is exactly what each of these four is.
     3. THE NAME AT DISPLAY SIZE, 1.55rem, which at half the measure is the
        second-largest type on the page after the lead's headline — the right
        rank for the thing that takes you off the front page.

   FOUR OBJECTS, TWO TO A LINE. An earlier pass set them as one ruled index —
   four cells of a table sharing hairlines, four across. It read as a single
   block of small print, and at a quarter of the measure each name had about
   240px to sit in. Separated and paired, each tile is its own bounded object at
   half the measure, and the four read as a menu.

   NO SHADOW AND NO RADIUS AT REST, past the 2px the sheets use. These sit ON a
   sheet (see THE PANEL), and a second layer of floating stock inside the first
   is the point at which the metaphor starts stacking. The lift and the shadow
   are on :hover only, where they are an affordance and not a texture, and both
   are dropped under prefers-reduced-motion.
   -------------------------------------------------------------------------- */
.emv-tiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.emv-tile__link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Full height so the button sits on the same line across a row even when one
     description wraps to two lines and its neighbour does not. */
  height: 100%;
  padding: 26px 26px 24px;
  border: 1px solid var(--rule);
  /* The folio's cap rule. See note 2 above. */
  border-top: 3px solid var(--gold-500);
  border-radius: 2px;
  color: inherit;
  text-decoration: none;
  background: var(--panel, #ffffff);
  transition: background 160ms ease, border-color 160ms ease,
              transform 160ms ease, box-shadow 160ms ease;
}

/* The mark. Plate in --paper, the warm stock the civic section prints on, so it
   reads as an inked stamp on the sheet rather than as an app icon. */
.emv-tile__mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  margin-bottom: 16px;
  border: 1px solid var(--paper-line);
  border-radius: 2px;
  background: var(--paper);
  color: var(--gold-800);
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.emv-tile__mark svg { display: block; }

.emv-tile__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1.16;
  letter-spacing: -0.016em;
  color: var(--ink);
  text-wrap: balance;
}
.emv-tile__line {
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
  margin-top: 9px;
  /* Pushes the button to the foot of the taller tile in the row. */
  margin-bottom: 22px;
}
.emv-tile__cta {
  margin-top: auto;
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-800);
  text-wrap: balance;
}
.emv-tile__arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform 160ms ease;
}

/* Hover moves the whole object, not one part of it: the sheet lifts, the rule
   goes gold all the way round, and the mark inverts to solid gold. */
.emv-tile__link:hover,
.emv-tile__link:focus-visible {
  background: var(--panel, #ffffff);
  border-color: var(--gold-500);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -14px rgba(17, 24, 39, 0.34);
}
.emv-tile__link:hover .emv-tile__mark,
.emv-tile__link:focus-visible .emv-tile__mark {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--nv-900, #071825);
}
.emv-tile__link:hover .emv-tile__arrow,
.emv-tile__link:focus-visible .emv-tile__arrow { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  .emv-tile__link,
  .emv-tile__mark,
  .emv-tile__arrow { transition: none; }
  .emv-tile__link:hover,
  .emv-tile__link:focus-visible { transform: none; box-shadow: none; }
}

/* One column only once two of these will not fit side by side. The pairing is
   the layout, so it is held for as long as it is readable. */
@media (max-width: 560px) {
  .emv-tiles { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .emv-tile__link { padding: 22px 20px; }
  .emv-tile__name { font-size: 1.4rem; }
  .emv-tile__mark { width: 42px; height: 42px; margin-bottom: 14px; }
  .emv-tile__line { margin-bottom: 16px; }
}

/* ============================================================================
   THE LEAD, SMALLER — .emv-week--lead
   ============================================================================
   The latest issue is one story in a section whose job is to show what the
   newsletter is, not to be the newsletter. Set at the sizes .emv-lead carries
   by default it was a 2.5rem headline over a 4:3 photograph filling 42% of the
   measure — the largest object on the page after the hero, and about twice the
   room the four tiles under it get between them.

   So this usage is tuned down: a narrower picture in a wider format, a smaller
   gutter, and display type a third smaller. Nothing structural changes, and the
   section keeps every part it had. The band also takes --tight, which is the
   theme's existing shorter sheet padding, so the sheet closes up around the
   smaller contents instead of leaving the space the big version needed.

   Scoped to .emv-week--lead rather than edited into .emv-lead itself: the base
   component is the full-size treatment, and this is the front page asking for
   a quieter one.
   -------------------------------------------------------------------------- */
.emv-week--lead .emv-lead__link {
  grid-template-columns: minmax(0, 1fr) minmax(0, 34%);
  gap: 38px;
}
/* 16:9 rather than 4:3. A narrower column at the old ratio is a shorter
   picture, which would have left the art ending well above the byline; the
   wider format keeps the two columns finishing within a line of each other. */
.emv-week--lead .emv-lead__media { aspect-ratio: 16 / 9; }

.emv-week--lead .emv-lead__kicker { margin-bottom: 12px; }
.emv-week--lead .emv-lead__title {
  font-size: clamp(1.45rem, 1rem + 1.4vw, 1.85rem);
  line-height: 1.14;
  letter-spacing: -0.018em;
  margin-bottom: 12px;
}
/* --noart is the state a logged-out visitor sees before beehiiv is connected.
   It still goes bigger than the two-column setting — a paper with no picture
   sets its headline larger — but from a lower base than it used to. */
.emv-week--lead .emv-lead--noart .emv-lead__title {
  font-size: clamp(1.7rem, 1.1rem + 2vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: -0.024em;
  max-width: 22ch;
}
.emv-week--lead .emv-lead__deck { font-size: 15.5px; line-height: 1.6; }
.emv-week--lead .emv-lead--noart .emv-lead__deck { font-size: 16.5px; }
.emv-week--lead .emv-lead__inside { margin-top: 12px; font-size: 13px; }
.emv-week--lead .emv-lead__foot { margin-top: 20px; padding-top: 13px; }

/* THE STACK HAS TO BE RESTATED HERE, at the width the base component stacks at.
   `.emv-lead__link` drops to one column at 1040px on a single-class selector;
   every rule above is two classes deep, so without this the two-column grid
   above wins at every width and a 390px phone gets a 34% picture beside a 66%
   column of type — the byline breaking onto four lines is what that looks like.
   Any future addition to this block wants the same treatment. */
@media (max-width: 1040px) {
  .emv-week--lead .emv-lead__link { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* Art above the headline once the columns stack — a picture below its own
     byline reads as a different story. Held to a measure so it does not become
     the largest object on a tablet. */
  .emv-week--lead .emv-lead__media { max-width: 560px; }
}

/* ==========================================================================
   THE REDESIGN, 2026-09-16 — EMV_Prototype_Homepage.html and
   EMV_Prototype_Free_Things_To_Do.html.
   Appended at the foot of the file on purpose: several of these override
   single-class base rules at equal specificity, which is decided on source
   order. Moving this block up silently reverts it.
   ========================================================================== */

/* --- The masthead ---------------------------------------------------------
   A name and one line, where the hero used to carry an eyebrow, a headline, a
   45-word deck, a coupon and a folio. Five objects of content came out; the
   frame has to come down with them or the photograph reads as a page that
   failed to load its contents.

   clamp() rather than a fixed height so it still fills a laptop viewport
   without swallowing a phone's. The floor is 380px, which is the smallest the
   scrim's two stops resolve cleanly at — below that the gradient's dark end
   lands above the type. */
.emv-hero--mast { min-height: clamp(380px, 52vh, 560px); }

/* The name is a nameplate, not a headline: it is two or three words and it is
   the site's own name, so it does not want the 4.1rem a sentence-length
   headline was set at. The line under it is the description a stranger needs
   and it carries more weight here than a deck normally would, because it is the
   only sentence in the frame. */
.emv-hero--mast .emv-hero__title { font-size: clamp(2.5rem, 5.4vw, 3.5rem); }
.emv-hero--mast .emv-hero__deck { font-size: clamp(1.05rem, 1.6vw, 1.22rem); max-width: 46ch; }
.emv-hero--mast .emv-hero__inner { padding-top: 64px; padding-bottom: 54px; }

/* --- Six routes, not four tiles -------------------------------------------
   Four tiles sat two-up. Six at two-up is three rows of a page that is mostly
   this block, so they go three-up on a desk and two-up on a tablet. The cards
   are shorter to pay for it: no button, and the mark comes down to 38px.

   THE BUTTON IS GONE ON PURPOSE. A card whose whole surface is the link does
   not need a second control inside it saying so, and six of them made the
   block read as a form. The name is the promise and the card is the target. */
.emv-tiles--six { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.emv-tiles--six .emv-tile__link { padding: 22px 22px 22px; }
.emv-tiles--six .emv-tile__mark { width: 38px; height: 38px; margin-bottom: 13px; }
.emv-tiles--six .emv-tile__mark svg { width: 21px; height: 21px; }
.emv-tiles--six .emv-tile__name { font-size: 1.22rem; }
/* The base rule holds 22px under the line to push a button to the foot of the
   tallest card in a row. There is no button, so that is 22px of nothing. */
.emv-tiles--six .emv-tile__line { font-size: 14.5px; margin-bottom: 0; }

@media (max-width: 1040px) {
  .emv-tiles--six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .emv-tiles--six { grid-template-columns: minmax(0, 1fr); }
}

/* --- A quiet door ---------------------------------------------------------
   emv_section_door() sets a filled primary button, which is the right weight
   for a page's one next step and the wrong weight three inches above the
   subscribe block's own button. Two solid controls that close on top of each
   other make the reader choose between them, and the one that matters loses.

   It keeps the sheet's foot rule, because the job of that rule is to say the
   section has ended, and that is true whatever is standing on it. */
.emv-door--quiet { margin-top: 30px; font-family: var(--ui); font-size: 14.5px; font-weight: 600; }
.emv-band:not(.emv-band--open) > .emv-shell > .emv-door--quiet {
  margin: 26px calc(var(--panel-pad) * -1) 0;
  padding: 18px var(--panel-pad) 0;
  border-top: 1px solid var(--panel-rule);
}

/* --- The latest issue, with the date leading ------------------------------
   The kicker slot used to take a tag or the weekday. It takes the publication
   date now: it is the one thing in the block that says the feed is live, and a
   reader coming back on Tuesday is checking whether Monday's is up before
   reading a word of it. Set in the numeric face so it reads as a date rather
   than as a category. */
.emv-week--lead .emv-lead__kicker.emv-num {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.06em;
}

/* --- The footer's two rows ------------------------------------------------
   Rows, not columns. See footer.php. The first row is the six pages people come
   back for and is set brighter and heavier than the second, which is the four
   they read once — the weight step is the only thing distinguishing them now
   that the column headings are gone, so it has to be visible rather than
   detectable. */
.emv-footer__row a { text-decoration: none; }
.emv-footer__row a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  /* Two per line rather than one: six links stacked is a column of six rows of
     mostly empty space, and the footer is the last thing between the reader and
     the bottom of the page. */
  .emv-footer__row { gap: 10px 20px; }
}

/* --- Free things to do ----------------------------------------------------
   An evergreen list page. Entries are a name, a meta line and a description,
   and the address drops out silently where there is not one — so the meta line
   has to look deliberate at one item as well as at two. */
.emv-free__route {
  font-family: var(--ui);
  font-size: 15.5px;
  color: var(--slate);
  margin: 0;
}
.emv-free__list { list-style: none; margin: 18px 0 0; padding: 0; }
.emv-free__item {
  padding: 18px 0;
  border-top: 1px solid var(--panel-rule, var(--rule));
}
.emv-free__item:first-child { border-top: none; padding-top: 4px; }
.emv-free__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.22rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
  margin: 0;
}
/* The meta line is the practical half — where it is and what it costs — so it
   is set in the small caps the rest of the site uses for standing detail, not
   as another line of prose. */
.emv-free__meta {
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-800);
  margin: 6px 0 0;
}
/* NO MEASURE CAP ON THIS PAGE, 2026-09-16. Both of these used to stop at 68ch,
   which on a 1120px sheet wrapped the description around 830px and left a
   quarter of every entry blank to the right of it — with the item's own rule
   running the full width underneath, so the short column read as a bug rather
   than as typography. Entries here are one or two sentences, not an article, so
   the line never gets long enough for the measure to be earning anything. The
   text runs the width of the sheet. */
.emv-free__body {
  font-family: var(--ui);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--slate);
  margin: 8px 0 0;
}
.emv-free__more {
  font-family: var(--ui);
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--slate);
}

/* The editor's outstanding list. Dashed, like every other provisional edge on
   this site, and it never renders for a reader — see the note in
   template-free-things.php. */
.emv-free__todo {
  margin: 22px 0 0;
  padding: 14px 16px;
  border: 1px dashed var(--gold-500);
  border-radius: 2px;
  background: var(--paper);
  font-family: var(--ui);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink);
}
.emv-free__todoHead {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-800);
}
.emv-free__todoHead span { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--slate); }
.emv-free__todo ul { margin: 0; padding-left: 18px; }
.emv-free__todo li + li { margin-top: 5px; }

/* ---------------------------------------------------------------------------
   THE PHONE STRIP HAS TO LOOK SCROLLABLE.

   Colten's gap, 2026-09-15: "confirm on a phone that all six are reachable."
   They are not, in the sense that matters — the rail is wider than the window
   with the scrollbar hidden, so the last labels are off-screen and nothing on
   the page says so. Five items got away with this because the fifth was half
   visible at the edge, which reads as an invitation to swipe. Six do not: the
   row ends on clean white and looks finished.

   THE FIX IS AN AFFORDANCE, NOT A SHORTER LIST. A mask fading the last 18px
   whenever there is more to the right, and nothing when there is not. It costs
   no height, no tap target and no item.

   `mask-image` rather than a gradient overlay: an overlay would sit on top of
   the links and eat taps on whichever one is under it, which is the item the
   reader is trying to reach. The mask makes pixels transparent instead and
   leaves hit-testing alone.

   The breakpoint is 660 and not the 1000 it used to be, and the number is
   measured rather than guessed. The rail is a full-width row of its own now
   rather than the tail of a crowded bar, so it has the whole shell to spend:
   its intrinsic width is 661px, and it therefore does not begin to overflow
   until the viewport drops below that. Applying the fade any higher would dim
   the end of "Past issues" on a row with nothing after it.

   `animation-timeline: scroll(self inline)` drives it from the strip's own
   scroll position, so the fade is on at rest and gone at the right-hand end,
   with no script and no resize listener. Where scroll-driven animations are
   unsupported the fade simply stays on, which is the safe way round: it says
   "there is more" on a row where there is.
--------------------------------------------------------------------------- */
@media (max-width: 660px) {
  .emv-nav-primary {
    mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
  }
}

@supports (animation-timeline: scroll()) {
  @media (max-width: 660px) {
    .emv-nav-primary {
      animation: emv-nav-fade linear both;
      animation-timeline: scroll(self inline);
    }
    /* Both ends: no fade at 0% would be wrong — the row sits at its left edge
       at rest and that is exactly when there is most to the right. The fade
       only lifts as the end comes into view. */
    @keyframes emv-nav-fade {
      0%, 88% {
        mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
      }
      100% {
        mask-image: linear-gradient(to right, #000 100%, transparent 100%);
        -webkit-mask-image: linear-gradient(to right, #000 100%, transparent 100%);
      }
    }
  }
}

/* ==========================================================================
   EVENTS, REBUILT — EMV_Prototype_Events.html rev.10, 2026-09-16.

   The agenda above this is a two-column grid: a sticky date rail at 132px and
   the events beside it, with each event itself a three-column grid of time,
   name and kind. That shape was built to answer "when is it on". The prototype
   asks the same data to carry FOUR facts per item — time, place, cost and
   audience — and four facts do not fit in a 104px time column.

   So `--days` unwinds both grids into a heading and a stacked list. Everything
   the filter script touches keeps its class and its attributes; only the boxes
   change. Appended at the foot because these override single-class rules at
   equal specificity, which is decided on source order.
   ========================================================================== */

.emv-ag--days { border-top: 2px solid var(--rule-heavy); }

.emv-ag--days .emv-ag__day {
  display: block;
  padding: 26px 0 6px;
  border-top: 1px solid var(--nv-600);
}
.emv-ag--days .emv-ag__day:first-child { border-top: 0; padding-top: 10px; }

/* The day heading is the day, spelled out. It was an abbreviation and a numeral
   in a sticky rail — "Tue 18" — which is the right object for a column and the
   wrong one for a heading a reader is meant to read. Day name, comma, month,
   ordinal, settled 2026-09-09 and applied everywhere. */
.emv-ag--days .emv-ag__date {
  display: flex;
  align-items: baseline;
  /* WRAP, or the Today flag has nowhere to go. At 390px "Wednesday, September
     16th" fills the line on its own and a non-wrapping flex row pushed the flag
     out to the right on a line of its own, floating over the event count.
     Wrapped it falls to the left margin under the date, which is where a
     stamp belongs. */
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.emv-ag--days .emv-ag__count {
  margin: 3px 0 0;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

/* A day with nothing on it keeps its heading and says so. It is a fallback and
   it should never be visible in a normal week, which is why it is set quiet
   rather than given a treatment of its own. */
.emv-ag__quiet {
  margin: 10px 0 14px;
  font-family: var(--ui);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--slate);
}

.emv-ag--days .emv-ag__events { margin-top: 10px; }

/* --- One event ------------------------------------------------------------ */
.emv-ev--entry {
  display: block;
  padding: 13px 0 15px;
  border-top: 1px solid var(--rule);
}
.emv-ag--days .emv-ag__events > .emv-ev--entry:first-child { border-top: 0; }

/* The name takes the "every week" tag inline rather than stacked above it. The
   tag used to sit in the time rail where there was a column to hold it; beside
   the name it reads as a qualifier on the name, which is what it is. */
.emv-ev--entry .emv-ev__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 10px;
  font-size: 19px;
}
.emv-ev--entry .emv-ev__weekly {
  display: inline-block;
  margin: 0;
  padding: 2px 7px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  color: var(--slate);
  background: var(--paper);
  white-space: nowrap;
}

/* --- The meta line --------------------------------------------------------
   time · place · cost · audience, in that order, with any part dropping out
   silently when the issue did not carry it.

   THE COST IS THE ONE PART SET LOUDER, and that is the whole point of the line.
   D4: free and low-cost family activities are the top-ranked want at 65.9% and
   the top want among financially strained households. A reader scanning for
   what they can afford should be able to find the answer without reading the
   row. Free reads green, a price and "Ticketed" read in the gold the rest of
   the site uses for standing detail — not red, because a paid event is not a
   warning. */
.emv-ev__meta {
  margin: 5px 0 0;
  font-family: var(--ui);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1.6;
  text-transform: uppercase;
  color: var(--slate);
}
.emv-ev__dot { margin: 0 7px; color: var(--rule-heavy); }
.emv-ev__bit--cost { color: var(--gold-800); }
.emv-ev__bit--audience {
  padding: 1px 6px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  letter-spacing: 0.1em;
}

.emv-ev__note {
  margin: 7px 0 0;
  font-family: var(--ui);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--slate);
}
.emv-ev__note a { color: var(--gold-800); }

/* --- The closures line ----------------------------------------------------
   Above the week, once, and never as list entries. The audit found a week
   holding three items, two of which were closures — they are not things to go
   to, and as rows they read like events and pad the count. */
.emv-events__closed {
  margin: 0 0 20px;
  padding: 12px 15px;
  border-left: 3px solid var(--gold-500);
  background: var(--paper);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.emv-events__closedItem + .emv-events__closedItem { margin-left: 4px; }

/* --- Next week ------------------------------------------------------------
   DELIBERATELY THINNER THAN THIS WEEK. If it renders at equal weight the page
   has two lists of the same size and no answer to "what do I do Saturday". No
   day headings, no detail line, smaller name. */
.emv-head--small { font-size: clamp(1.4rem, 2.2vw, 1.75rem); }

.emv-next { list-style: none; margin: 14px 0 0; padding: 0; }
.emv-next__item { padding: 10px 0; border-top: 1px solid var(--rule); }
.emv-next__item:first-child { border-top: 0; }
.emv-next__title {
  margin: 0;
  font-family: var(--ui);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.emv-next__title a { color: inherit; }
.emv-next__title a:hover { color: var(--gold-800); }
.emv-next__meta {
  margin: 3px 0 0;
  font-family: var(--ui);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--slate);
}

/* --- The three routes -----------------------------------------------------
   Each heading is a question addressed to a different reader. They are set as
   one ruled run rather than as three bands, because three sheets in a row at
   the foot of a long page is three more objects than the page needs — and
   because the ASK below them has to look different from all three, which it
   cannot if each of them already has its own sheet. */
.emv-route { list-style: none; margin: 0; padding: 0; }
.emv-route__item { padding: 20px 0; border-top: 1px solid var(--rule); }
.emv-route__item:first-child { border-top: 0; padding-top: 2px; }
.emv-route__title {
  margin: 0;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: balance;
}
.emv-route__body {
  margin: 7px 0 0;
  font-family: var(--ui);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--slate);
}
.emv-route__go { margin: 9px 0 0; font-family: var(--ui); font-size: 15px; font-weight: 600; }

@media (max-width: 560px) {
  .emv-ag--days .emv-ag__date { font-size: 19px; }
  .emv-ev--entry .emv-ev__title { font-size: 17.5px; }
  .emv-ev__meta { font-size: 11.5px; }
  .emv-ev__dot { margin: 0 5px; }
}

/* The ≤620 block above belongs to the RAIL layout, where the day's furniture is
   one flex row and `margin-left: auto` pushes Today to the right-hand end of
   it. There is no rail in `--days`, so that auto margin shoved the flag to the
   far edge of the sheet on its own line, hanging over the event count. It only
   ever meant "sit at the end of the rail", and there is no rail to sit at the
   end of. */
@media (max-width: 620px) {
  .emv-ag--days .emv-ag__flag { margin-left: 0; margin-top: 0; }
  .emv-ag--days .emv-ag__count { margin: 3px 0 0; }
}

/* ==========================================================================
   MEETING PEOPLE — EMV_Prototype_Meeting_People.html rev.10, 2026-09-16.
   The smallest rework of the five: the groups block is unchanged, and what is
   new is the Senior Center's standing programme and a route out at the foot.
   ========================================================================== */

/* The three things a visitor needs before the schedule: where, what it costs,
   and how to ask. The phone number is the one that was missing — it sat in a
   build note rather than on the page, and somebody reading this wants to know
   whether they can go. It is also the honest answer to eligibility until the
   call in backlog B3 is made, which is why it is a real tel: link and not a
   printed string. */
.emv-meet__standing {
  margin: 0 0 20px;
  font-family: var(--ui);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink);
}
.emv-meet__standing a { color: var(--gold-800); font-weight: 600; }

/* A REAL TABLE, because it is one. The wrapper scrolls rather than the page:
   three columns of times do not compress below about 420px, and a table that
   pushes the whole document sideways is worse than one that scrolls inside its
   own sheet. */
.emv-meet__tableWrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.emv-meet__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ui);
  font-size: 15.5px;
  text-align: left;
}
.emv-meet__table th,
.emv-meet__table td {
  padding: 11px 16px 11px 0;
  border-bottom: 1px solid var(--panel-rule, var(--rule));
  vertical-align: baseline;
}
.emv-meet__table thead th {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  border-bottom-color: var(--ink);
}
/* The day is a row header, so a screen reader announces "Wednesday" with each
   cell instead of leaving the reader to count back up the column. */
.emv-meet__table tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.emv-meet__table td { color: var(--ink); }
.emv-meet__table td.emv-num { font-variant-numeric: tabular-nums lining-nums; color: var(--slate); }
.emv-meet__table tbody tr:last-child th,
.emv-meet__table tbody tr:last-child td { border-bottom: none; }

/* The two things the table cannot hold: the one session that is not at the
   Senior Center, and what runs through the year rather than every week. */
.emv-meet__note {
  margin: 16px 0 0;
  font-family: var(--ui);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--slate);
}

/* --- Volunteering ---------------------------------------------------------
   A standing list, and set as one: five organizations, a name and a line each,
   with no datestamp. These do not turn over, and stamping them framed an
   established list as a snapshot. */
.emv-meet__places { list-style: none; margin: 18px 0 0; padding: 0; }
.emv-meet__place { padding: 15px 0; border-top: 1px solid var(--rule); }
.emv-meet__place:first-child { border-top: none; padding-top: 2px; }
.emv-meet__placeName {
  margin: 0;
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.emv-meet__placeName a { color: inherit; }
.emv-meet__placeName a:hover { color: var(--gold-800); }
.emv-meet__placeNote {
  margin: 6px 0 0;
  font-family: var(--ui);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--slate);
}

/* --- Where to go next -----------------------------------------------------
   One label and two lines. Lighter than a route block on purpose: every other
   section on this page is a label over content, and a heavier block at the foot
   was the thing that read as out of place. */
.emv-meet__next {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate);
}
.emv-meet__next li + li { margin-top: 10px; }
.emv-meet__next .emv-link { font-weight: 700; }

/* ==========================================================================
   NEW HERE? — EMV_Prototype_New_Here.html rev.9, 2026-09-16. Ten sections,
   48 items, and the longest page on the site by some way. Everything here is
   in service of one thing: somebody with a hurt kid finding the emergency room
   without reading the turf rules.
   ========================================================================== */

/* --- The jump row ---------------------------------------------------------
   A GRID, NOT A LINE. Ten links plus "Trash, snow, dogs and your builder" do
   not sit on one line on a phone, and the names are not shortened to make them
   fit — a shortened name is a worse link, and these are what a reader in a
   hurry scans. Two columns at phone width, three on a tablet, four on a desk.

   Set as chips rather than as a list of links: at ten items a plain run reads
   as a paragraph of blue, and the thing that makes this scannable is each name
   having its own edges. */
.emv-nh__jump ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.emv-nh__jump a {
  display: block;
  height: 100%;
  padding: 10px 13px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--gold-500);
  border-radius: 2px;
  background: var(--panel, #ffffff);
  font-family: var(--ui);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 160ms ease, background 160ms ease;
}
.emv-nh__jump a:hover,
.emv-nh__jump a:focus-visible { border-color: var(--gold-500); background: var(--paper); }

@media (max-width: 900px) { .emv-nh__jump ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .emv-nh__jump ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } }

/* THE JUMP HAS TO CLEAR THE STICKY HEADER. Without this the anchor lands with
   the section's heading underneath the bar — which on this page means a reader
   who tapped "Emergency rooms" arrives looking at the first entry and not at
   the line telling them one of the two is pediatric only. --emv-head is the
   header's own height, plus air. */
.emv-nh section[id] { scroll-margin-top: calc(var(--emv-head) + 20px); }

/* --- The items ------------------------------------------------------------
   A bold lead, a sentence, and sometimes a second paragraph carrying the
   caveat. The lead is usually itself the link, which is why nothing here draws
   a separate "read more" — the words that name the errand are the words that
   go to the page about it. */
.emv-nh__lead {
  margin: 0 0 4px;
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}
.emv-nh__list { list-style: none; margin: 18px 0 0; padding: 0; }
.emv-nh__item { padding: 14px 0; border-top: 1px solid var(--panel-rule, var(--rule)); }
.emv-nh__item:first-child { border-top: none; padding-top: 2px; }

.emv-nh__para {
  margin: 0;
  font-family: var(--ui);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--slate);
}
.emv-nh__para + .emv-nh__para { margin-top: 8px; }
.emv-nh__para b { color: var(--ink); font-weight: 700; }
.emv-nh__para a { color: var(--gold-800); }
.emv-nh__para a:hover { color: var(--ink); }

/* THE ONE LINE IN AN ITEM A READER MUST NOT MISS. The gas meter that is
   unlocked but not turned on; the ER that will not take an adult. It is a rule
   and a change of ground, not a colour — the sentence says the thing itself, so
   a reader who sees no colour at all loses nothing. */
.emv-nh__flag {
  margin: 10px 0 0;
  padding: 10px 14px;
  border-left: 3px solid var(--gold-500);
  background: var(--paper);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}
.emv-nh__flag b { font-weight: 700; }
.emv-nh__flag a { color: var(--gold-800); }