/* Heritage Village theme styles. Base rules mirror design-system/typography/typography.css section 2.
   Tokens come from tokens.css; fonts from fonts.css. Prefix hv- for every class. */

/* Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-body);
  font-family: var(--font-serif);
  font-size: var(--step-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern", "liga", "onum";
  letter-spacing: var(--tr-normal);
  background-image:
    radial-gradient(at 20% 10%, rgba(186,143,140,0.06) 0, transparent 40%),
    radial-gradient(at 80% 90%, rgba(88,100,111,0.05) 0, transparent 50%);
  background-attachment: fixed;
}

::selection { background: var(--accent-warm); color: var(--paper); }

img { max-width: 100%; height: auto; display: block; }
p { margin: 0 0 1em; }
a { color: inherit; }

/* A search box's clear button. Chrome-family browsers draw their own in blue, off the palette; this one is an x of
   two strokes in the muted ink (the ink on hover), the same in every browser that shows one. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.4em;
  background: var(--ink-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 1.5l7 7M8.5 1.5l-7 7' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.5 1.5l7 7M8.5 1.5l-7 7' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}
input[type="search"]::-webkit-search-cancel-button:hover { background: var(--ink); }

/* Utilities (from the specimen) ---------------------------------------- */
.eyebrow {
  display: inline-flex;
  flex-wrap: wrap; /* on a phone a whole item moves to the next line; without it each item broke inside itself ("Latest / News") */
  align-items: center;
  gap: 0.3em 0.6em;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-overline);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  color: var(--ink-muted);
  margin: 0 0 var(--space-md);
}
.eyebrow__lead { color: var(--ink); }
.eyebrow__sep { opacity: 0.5; }

/* Layout ---------------------------------------------------------------- */
.hv-frame {
  width: min(100% - 2 * var(--frame-x), var(--frame-max));
  margin-inline: auto;
  container-type: inline-size; /* so a wide block can measure the frame (D-73). */
}

.hv-skip-link {
  position: absolute;
  left: var(--space-md);
  top: -100px;
  padding: var(--space-xs) var(--space-md);
  background: var(--ink);
  color: var(--invert-ink);
  font-family: var(--font-sans);
  z-index: 100;
}
.hv-skip-link:focus { top: var(--space-md); }

/* Focus and hidden helpers ---------------------------------------------- */
:focus-visible { outline: 2px solid var(--accent-cool); outline-offset: 2px; }
.hv-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* A link that opens a new tab (D-191, marked by the core plugin's links.php): a small arrow in the link's colour.
   Drawn as a mask, not a character, so screen readers say nothing for it; they hear the "Opens in a new tab" note. */
.hv-newtab::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.3em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 9.5 9.5 2.5M4 2.5h5.5V8' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 9.5 9.5 2.5M4 2.5h5.5V8' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.hv-badge {
  display: inline-block;
  padding: 0.15em 0.55em;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-overline);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
  vertical-align: middle;
}

/* Masthead (D-38: seal plus wordmark) -------------------------------------- */
.hv-masthead { border-bottom: var(--hairline) solid var(--rule); }
.hv-masthead__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-md);
}
.hv-masthead__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
  color: var(--ink);
}
.hv-masthead__seal { width: auto; height: 64px; }
.hv-masthead__wordmark { display: flex; flex-direction: column; gap: 2px; }
.hv-masthead__name {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1;
  letter-spacing: var(--tr-tight);
}
.hv-masthead__place {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-overline);
  text-transform: uppercase;
  letter-spacing: var(--tr-wider);
  color: var(--ink-muted);
}
.hv-masthead__actions {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--step-small);
}
.hv-masthead__actions a,
.hv-masthead__actions button {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 40px;
  text-decoration: none;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.hv-masthead__actions svg { width: 18px; height: 18px; }
.hv-masthead__howdoi { font-weight: 600; }
/* A signed-in resident (2026-09-16): a greeting that opens Your details, and Sign out where the Residents button was
   once they are in. Both plain text like How Do I; the greeting a shade quieter. */
.hv-masthead__hi { color: var(--ink-muted) !important; }
.hv-masthead__signout { font-weight: 600; }
.hv-masthead__search { color: var(--ink-muted) !important; }
.hv-masthead__residents { padding-inline: 1em !important; }
.hv-masthead__residents,
.hv-nav__residents {
  background: var(--ink) !important;
  color: var(--invert-ink) !important;
  border-radius: 2px;
  font-weight: 600;
  letter-spacing: var(--tr-snug);
}
.hv-masthead__residents[aria-current],
.hv-nav__residents[aria-current] { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent-warm); }
/* The Residents button is where most visitors are going (D-76): a single soft light passes over it a moment after
   the page settles (a slow pass, about two and a half seconds), then it rests; under the pointer it lifts a hair and shows a rosy-taupe edge. Nothing repeats.
   Reduced-motion users get the resting button (the Motion block below turns the sweep and the lift off). */
.hv-masthead__residents {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.hv-masthead__residents::after,
.hv-nav__residents::after {
  content: "";
  position: absolute;
  inset: -20% auto -20% 0;
  z-index: -1;
  width: 45%;
  background: linear-gradient(105deg, rgba(241, 236, 230, 0) 0%, rgba(241, 236, 230, 0.28) 50%, rgba(241, 236, 230, 0) 100%);
  transform: translateX(-140%) skewX(-18deg);
  pointer-events: none;
}
.hv-masthead__residents:not([aria-current])::after { animation: hv-sheen 2600ms cubic-bezier(0.45, 0, 0.25, 1) 900ms 1 both; }
@keyframes hv-sheen {
  from { transform: translateX(-140%) skewX(-18deg); }
  to { transform: translateX(340%) skewX(-18deg); }
}
.hv-masthead__residents:hover,
.hv-masthead__residents:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(42, 37, 34, 0.18), inset 0 -2px 0 var(--accent-warm);
}
.hv-masthead__residents[aria-current]:hover,
.hv-masthead__residents[aria-current]:focus-visible { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent-warm), 0 6px 14px rgba(42, 37, 34, 0.18); }
.hv-masthead__actions .hv-masthead__menu {
  display: none;
  padding-inline: 0.8em !important;
  border: var(--hairline) solid var(--rule-strong) !important;
  border-radius: 2px;
  font-weight: 600;
}
.hv-masthead__menu[aria-expanded="true"] { background: var(--paper-deep) !important; }

.hv-search-panel {
  border-top: var(--hairline) solid var(--rule);
  background: var(--paper-deep);
  padding-block: var(--space-md);
}
.hv-search { display: flex; gap: var(--space-xs); max-width: 40rem; }
.hv-search__input {
  flex: 1;
  min-width: 0; /* a box in a row stops shrinking at its own width, which comes from size="20": 267 px in Safari, 219 in Chrome, so the button ran past a phone's frame */
  min-height: 44px;
  padding: 0 var(--space-sm);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-family: var(--font-sans);
  font-size: var(--step-body);
}
.hv-search__submit {
  min-height: 44px;
  padding: 0 var(--space-md);
  border: 0;
  border-radius: 2px;
  background: var(--ink);
  color: var(--invert-ink);
  font: inherit;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-small);
  cursor: pointer;
}

/* Menu (two levels, B1) --------------------------------------------------- */
.hv-nav { position: sticky; top: 0; z-index: 30; background: var(--paper); border-top: 3px double var(--rule); }
.hv-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.hv-nav__menu { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: var(--space-lg); min-width: 0; }
/* Stuck (D-75): once the masthead has scrolled away, a hairline and a breath of shadow under the bar, and the small
   seal and name slide in at its start. Collapsed, the brand takes no room (its flex gap is cancelled by the negative
   margin) and is hidden from keyboard and screen reader by visibility. */
.hv-stuck .hv-nav { box-shadow: 0 1px 0 var(--rule), 0 6px 18px rgba(42, 37, 34, 0.07); }
/* Logged in, WordPress's toolbar is fixed across the top; the sticky bars sit under it, not behind it. On a screen
   600px or narrower WordPress lets its toolbar scroll away, so there the row sticks at the top edge. */
.admin-bar .hv-nav, .admin-bar .hv-masthead { top: var(--wp-admin--admin-bar--height, 32px); }
@media (max-width: 600px) { .admin-bar .hv-masthead { top: 0; } }
.hv-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex: 0 0 auto;
  max-width: 0;
  margin-right: calc(-1 * var(--space-lg));
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.92);
  transform-origin: left center;
  text-decoration: none;
  color: var(--ink);
  transition: max-width 320ms ease, margin-right 320ms ease, opacity 220ms ease, transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.2), visibility 0s linear 320ms;
}
.hv-stuck.hv-nav-seal .hv-nav__brand {
  max-width: 16rem;
  margin-right: 0;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 60ms, 60ms, 0s;
}
.hv-nav__seal { width: auto; height: 30px; }
.hv-nav__brand-name { display: none; font-family: var(--font-serif); font-weight: 700; font-size: 1.125rem; letter-spacing: var(--tr-tight); line-height: 1; }
/* Room for the seal, the button, and the name is measured by nav.js against the menu as it stands (D-206), which
   puts hv-nav-seal, hv-nav-button, and hv-nav-name on the root for each one that fits on the bar's one line, in
   that order. Without a class each stays collapsed, taking no room. */
.hv-nav-name .hv-nav__brand-name { display: inline; }
/* The Residents button joins the bar's right end the same way the brand joins its left (the masthead's button has
   scrolled away with it). It shares the masthead button's look above. The sweep of light (D-76) runs once each time
   the button slides in, just after it lands; under the pointer the bar's button shows the shadow and the rosy edge
   but does not lift (D-87). Collapsed, it takes no room (the flex gap before it is cancelled by the negative margin). */
.hv-nav__residents {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 32px; /* smaller than the masthead's 40px, so the current-page ring clears the bar's edges. */
  max-width: 0;
  margin-left: calc(-1 * var(--space-lg));
  padding-inline: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(0.92);
  transform-origin: right center;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--step-small);
  transition: max-width 320ms ease, margin-left 320ms ease, padding-inline 320ms ease, opacity 220ms ease, transform 320ms cubic-bezier(0.2, 0.9, 0.3, 1.2), visibility 0s linear 320ms, box-shadow 180ms ease;
}
.hv-stuck.hv-nav-button .hv-nav__residents {
  max-width: 10rem;
  margin-left: 0;
  padding-inline: 0.8em;
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s, 0s, 0s, 60ms, 60ms, 0s, 0s;
}
.hv-stuck.hv-nav-button .hv-nav__residents:not([aria-current])::after { animation: hv-sheen 2600ms cubic-bezier(0.45, 0, 0.25, 1) 400ms 1 both; }
.hv-stuck .hv-nav__residents:hover,
.hv-stuck .hv-nav__residents:focus-visible {
  box-shadow: 0 6px 14px rgba(42, 37, 34, 0.18), inset 0 -2px 0 var(--accent-warm);
  transition: box-shadow 180ms ease;
}
.hv-stuck .hv-nav__residents[aria-current]:hover,
.hv-stuck .hv-nav__residents[aria-current]:focus-visible { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent-warm), 0 6px 14px rgba(42, 37, 34, 0.18); }
/* Sign out in the bar's right end (a resident already in the residents area): the same slide, an outline instead of
   the dark fill, no sweep of light. */
.hv-nav__residents--signout {
  background: none !important;
  color: var(--ink) !important;
  box-shadow: inset 0 0 0 var(--hairline) var(--rule-strong);
}
.hv-nav__residents--signout::after { display: none; }
/* The residents menu is the longer one (six items, 1143px on one line in 2026-10, Contact Us with its chevron since
   D-227): beside it the frame, 1280px at most, has room for the seal alone, so there the button and the name give
   way. On the public menu, which is shorter, all three fit on a wide frame. nav.js decides, by measuring. */
.hv-nav__list { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }
.hv-nav__item { position: relative; }
.hv-nav__item--top { display: flex; align-items: center; }
.hv-nav__link {
  display: inline-block;
  padding-block: var(--space-sm);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--step-menu);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: var(--tr-snug);
}
.hv-nav__link[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent-warm); }
.hv-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  min-height: 40px;
  margin-left: 2px;
  border: 0;
  background: none;
  color: var(--ink-muted);
  cursor: pointer;
}
.hv-nav__chevron { width: 14px; height: 14px; transition: transform 150ms ease; }
.hv-nav__toggle[aria-expanded="true"] .hv-nav__chevron { transform: rotate(180deg); }
.hv-nav__sub {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--space-md));
  z-index: 20;
  min-width: 16rem;
  margin: 0;
  padding: var(--space-xs) 0;
  list-style: none;
  background: var(--paper);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(42, 37, 34, 0.08);
}
.hv-nav__sub--end { left: auto; right: calc(-1 * var(--space-md)); } /* nav.js: a list that would run past the window opens toward the left */
.hv-nav__sub .hv-nav__link { display: block; padding: var(--space-xs) var(--space-md); }
.hv-nav__sub .hv-nav__link[aria-current] { box-shadow: inset 3px 0 0 var(--accent-warm); }
.hv-nav__sub .hv-nav__link:focus-visible { outline-offset: -2px; } /* the site's ring drawn just inside the link, so it stays inside the list's border */
.hv-nav__extras { display: none; }
/* Scripts off (the root keeps hv-no-js; header.php swaps it for hv-js before this file loads when scripts run): the
   chevrons, the Search button, and the phone's Menu button need nav.js. A second-level list opens under the pointer
   or while focus is anywhere in its item, so the keyboard reaches every link; the one under the pointer sits over
   one opened by focus. The chevron stays as a picture and turns as it does with scripts on, but takes no focus: a
   button that does nothing would be a dead stop. The Search button is away; the phone's menu is below. */
.hv-no-js .hv-masthead__search { display: none; }
.hv-no-js .hv-nav__sub { display: none; }
.hv-no-js .hv-nav__item--parent:hover > .hv-nav__sub,
.hv-no-js .hv-nav__item--parent:focus-within > .hv-nav__sub { display: block; }
.hv-no-js .hv-nav__item--parent:hover > .hv-nav__sub { z-index: 21; }
.hv-no-js .hv-nav__toggle { visibility: hidden; cursor: default; }
.hv-no-js .hv-nav__chevron { visibility: visible; }
.hv-no-js .hv-nav__item--parent:hover .hv-nav__chevron,
.hv-no-js .hv-nav__item--parent:focus-within .hv-nav__chevron { transform: rotate(180deg); }
/* Scripts off: the last item with a list (Contact Us; walker marks it) opens toward the left where the window is narrow, as nav.js does with
   scripts on (hv-nav__sub--end), so it does not hang past the window's right edge. The same width as nav.js's
   comment: below about 1,120 px, above the phone menu (56rem). */
@media (min-width: 56.0625rem) and (max-width: 1120px) {
  .hv-no-js .hv-nav__item--last-parent > .hv-nav__sub { left: auto; right: calc(-1 * var(--space-md)); }
}

/* Phone: the menu button opens the menu as a stacked list, with How Do I and search inside it. */
@media (max-width: 56rem) {
  .hv-masthead__row { padding-block: var(--space-sm); gap: var(--space-sm); }
  .hv-masthead__seal { height: 44px; }
  .hv-masthead__name { font-size: 1.125rem; line-height: 1.05; max-width: 6ch; }
  .hv-masthead__place { display: none; }
  .hv-masthead__actions { gap: var(--space-xs); }
  .hv-masthead__howdoi, .hv-masthead__search, .hv-masthead__hi { display: none !important; }
  .hv-masthead__residents { padding-inline: 0.8em !important; }
  .hv-masthead__actions .hv-masthead__menu { display: inline-flex; }
  .hv-search-panel { display: none; }
  .hv-masthead { position: sticky; top: 0; z-index: 30; background: var(--paper); } /* On a phone the top row is the bar that sticks (D-75); the menu opens beneath it and scrolls. */
  .hv-nav { display: none; position: static; border-top: var(--hairline) solid var(--rule); }
  /* Open, the menu is a drawer under the bar, scrolling on its own, wherever the page was scrolled to (D-75);
     nav.js sets --hv-bar-h to the row's bottom edge, toolbar or not. */
  .hv-menu-open .hv-nav { display: block; position: fixed; top: var(--hv-bar-h, 4.5rem); right: 0; bottom: 0; left: 0; z-index: 29; overflow-y: auto; background: var(--paper); }
  .hv-menu-open { overflow: hidden; }
  .hv-nav__brand, .hv-nav__residents { display: none; }
  .hv-nav__inner { flex-direction: column; align-items: stretch; gap: 0; padding-block: var(--space-xs) var(--space-md); }
  .hv-nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
  .hv-nav__list { flex-direction: column; gap: 0; }
  .hv-nav__item--top { flex-wrap: wrap; justify-content: space-between; border-bottom: var(--hairline) solid var(--rule); }
  .hv-nav__link { padding-block: var(--space-sm); font-size: var(--step-body); }
  .hv-nav__toggle { width: 44px; min-height: 44px; }
  .hv-nav__sub {
    position: static;
    flex-basis: 100%;
    min-width: 0;
    padding: 0 0 var(--space-xs) var(--space-md);
    border: 0;
    box-shadow: none;
    background: none;
  }
  .hv-nav__sub .hv-nav__link { padding-inline: 0; }
  .hv-nav__sub .hv-nav__link:focus-visible { outline-offset: 2px; } /* no border to keep inside here, and no padding beside the words */
  .hv-nav__extras { display: flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space-sm); }
  .hv-nav__extras .hv-nav__link { font-weight: 600; }
  /* Scripts off, nothing can open the menu, so the Menu button and the chevrons are away and the menu is a plain
     list in the page under the top row, every second-level link showing, ruled off from the page below. */
  .hv-no-js .hv-masthead__actions .hv-masthead__menu, .hv-no-js .hv-nav__toggle { display: none; }
  .hv-no-js .hv-nav, .hv-no-js .hv-nav__sub { display: block; }
  .hv-no-js .hv-nav { border-bottom: var(--hairline) solid var(--rule); }
}
/* The narrowest phones (320 px: an iPhone SE with Display Zoom, a laptop at 400% zoom): the seal, the name, the
   Residents button, and the menu button do not fit the row at the phone's sizes, and the button sat on the name.
   Everything stays, a little tighter. */
@media (max-width: 22.5rem) {
  .hv-masthead__row { gap: var(--space-xs); }
  .hv-masthead__brand { gap: var(--space-xs); }
  .hv-masthead__seal { height: 40px; }
  .hv-masthead__name { font-size: 1rem; }
  .hv-masthead__actions { gap: 0.375rem; }
  .hv-masthead__residents, .hv-masthead__actions .hv-masthead__menu { padding-inline: 0.55em !important; }
  .hv-masthead__actions .hv-masthead__menu { gap: 0.3em; }
}

/* Alert banner ------------------------------------------------------------- */
/* Each alert is its own full-width band that stands apart from the page by colour, not size (D-178, Nate: A, the
   sizes as before): a notice on the rosy tint over a rosy rule, an urgent alert in ink with paper-coloured words. The
   label is a small solid tag. */
.hv-alert {
  padding-block: var(--space-sm);
  background: var(--alert-tint);
  border-bottom: 2px solid var(--accent-warm);
}
.hv-alert__text {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-small);
  line-height: var(--lh-normal);
  color: var(--ink);
}
.hv-alert__label {
  display: inline-block;
  margin-right: 0.6em;
  padding: 0.15em 0.55em;
  border-radius: 2px;
  font-weight: 700;
  font-size: var(--step-overline);
  line-height: 1.4;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  vertical-align: 0.1em;
  background: var(--ink);
  color: var(--paper);
}
/* Trimming the tag's text to the capitals centres the word exactly; a plain line box leaves it riding high in
   Chromium. Browsers without text-box (iPadOS 15) keep the padding above. Same tag height either way. */
@supports (text-box: trim-both cap alphabetic) {
  .hv-alert__label { padding-block: 0.48em; text-box: trim-both cap alphabetic; }
}
/* The gap before the link sits on the message's end, so a link that wraps starts flush left. */
.hv-alert__message { margin-right: 0.35em; }
.hv-alerts .hv-alert__link {
  display: inline-block; /* moves to the next line whole rather than breaking at "Sign-in" */
  font-weight: 700;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
.hv-alert--urgent { background: var(--ink); border-bottom-color: var(--ink); }
.hv-alert--urgent .hv-alert__text { color: var(--invert-ink); }
.hv-alert--urgent .hv-alert__label {
  background: var(--link);
  color: var(--paper);
  animation: hv-alert-pulse 1.6s ease-out 3; /* three pulses, under five seconds, then still (WCAG 2.2.2) */
}
/* A rosy ring swells out of the Urgent tag and fades (D-178, Nate: only urgent alerts move). */
@keyframes hv-alert-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(176, 135, 131, 1); }
  50%  { box-shadow: 0 0 0 5px rgba(176, 135, 131, 0.55); }
  100% { box-shadow: 0 0 0 10px rgba(176, 135, 131, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hv-alert--urgent .hv-alert__label { animation: none; }
}
.hv-alerts .hv-alert--urgent .hv-alert__link { color: var(--invert-ink); }
.hv-alert--urgent .hv-alert__link:focus-visible { outline-color: var(--invert-ink); }

/* Page and article ------------------------------------------------------- */
.hv-article { padding-block: var(--space-2xl) var(--space-3xl); }
.hv-list { padding-block: var(--space-2xl) var(--space-3xl); }
.hv-page-head { margin-bottom: var(--space-xl); }
.hv-page-head .eyebrow a { color: inherit; text-decoration: none; }
.hv-page-head .eyebrow a:hover { color: var(--ink); }
.hv-page-head__title {
  max-width: 20ch;
  margin: 0 0 var(--space-md);
  font-weight: 900;
  font-size: var(--step-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tighter);
  color: var(--ink);
  text-wrap: balance;
}
.hv-page-head__title .hv-badge { font-size: var(--step-overline); letter-spacing: var(--tr-wide); vertical-align: middle; }
.hv-page-head__intro {
  max-width: var(--measure-narrow);
  margin: 0;
  font-weight: 300;
  font-style: italic;
  font-size: var(--step-lede);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-snug);
  color: var(--ink-muted);
}
.hv-page-head__hero { margin: var(--space-xl) 0 0; }
.hv-page-head__hero-img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
/* Every hero wears the Home hero's painted paper edge (D-172): the picture is masked by hero-edge.png, lifted from
   the Home hero by design-system/illustration/hero-edge.sh, over that hero's paper colour, so a drawing cropped from
   a 3:2 original gets the same edge without a file of its own. The paper sits behind the picture's box only, not
   the caption. The mask is stretched to the 21:9 box, so the edge scales with the picture as the Home hero's does.
   The ?v= changes whenever the stencil is redrawn: the server tells browsers to keep the file a year. */
.hv-page-head__hero--banner, .hv-home__hero-frame { --hero-paper: #fcf8e5; }
.hv-page-head__hero--banner { position: relative; }
.hv-page-head__hero--banner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 21 / 9; background: var(--hero-paper); }
.hv-page-head__hero--banner .hv-page-head__hero-img { position: relative; } /* above the paper */
.hv-page-head__hero--banner .hv-page-head__hero-img, .hv-home__hero-img {
  -webkit-mask: url("../brand/hero-edge.png?v=2") 0 0 / 100% 100% no-repeat;
  mask: url("../brand/hero-edge.png?v=2") 0 0 / 100% 100% no-repeat;
}
.hv-page-head__hero-img--photo { max-width: var(--measure-narrow); aspect-ratio: 3 / 2; } /* a news item's picture: a photo, not a banner */
.hv-caption {
  margin: var(--space-xs) 0 0;
  max-width: 44ch;
  font-family: var(--font-sans);
  font-size: var(--step-caption);
  line-height: var(--lh-normal);
  color: var(--ink-muted);
}
.hv-article__back { margin-top: var(--space-2xl); font-family: var(--font-sans); font-size: var(--step-small); }
.hv-article__back a { color: var(--ink-muted); }

/* Prose: the body an editor writes with the allowed blocks ------------------ */
/* Body copy. The same rules style the block editor canvas, so a Page reads in the editor as it does on the site.
   :where() keeps the editor half at zero specificity, so on the site these rules weigh exactly what .hv-prose alone does. */
.hv-prose { max-width: var(--measure); }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) > * { margin-block: 0 1.1em; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) p { text-wrap: pretty; orphans: 3; widows: 3; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) a { color: var(--link); text-decoration-color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) a:hover { text-decoration-thickness: 2px; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) h2, :is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) h3, :is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) h4 {
  margin-block: 1.6em 0.5em;
  font-weight: 900;
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--ink);
  text-wrap: balance;
}
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) h2 { font-size: var(--step-h3); }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) h3 { font-size: var(--step-h4); }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) h4 { font-size: var(--step-body); font-family: var(--font-sans); font-weight: 700; letter-spacing: var(--tr-snug); }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) > :first-child { margin-top: 0; }
/* A Group (D-166) only wraps blocks marked Residents only together; inside it they space as they do outside.
   A classic theme gets the Group's inner-container div, on the site and in the editor, so the rule reaches through it. */
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) :where(.wp-block-group, .wp-block-group__inner-container) > * { margin-block: 0 1.1em; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) ul, :is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) ol { padding-left: 1.4em; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) li { margin-block: 0.35em; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) li::marker { color: var(--ink-quiet); }
/* Footnotes (D-220), WordPress's own: a small number in the sentence, the notes in a list at the foot of the page.
   The number sits clear of the line above without moving it; its link is padded so a finger finds it. A note, or the
   number, reached by its link shows on the deeper paper until the reader moves on, and stops clear of the sticky bar. */
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) sup.fn { font-family: var(--font-sans); font-size: 0.7em; font-weight: 700; line-height: 0; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) sup.fn a { padding: 0.7em 0.2em; text-decoration: none; scroll-margin-top: 7.5rem; border-radius: 2px; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) sup.fn a:hover { text-decoration: underline; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-footnotes { font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-muted); overflow-wrap: break-word; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-footnotes li { margin-block: 0.6em; padding-inline: 0.3em; margin-inline: -0.3em; border-radius: 2px; scroll-margin-top: 7.5rem; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-footnotes li:target, :is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) sup.fn a:target { background: var(--paper-edge); }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-footnotes a[href$="-link"] { margin-left: 0.3em; padding: 0.4em 0.3em; font-family: var(--font-sans); text-decoration: none; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) blockquote, :is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-quote {
  margin: 1.6em 0;
  padding-left: var(--space-lg);
  border-left: 3px solid var(--accent-warm);
  font-style: italic;
  font-weight: 300;
  font-size: var(--step-lede);
  line-height: var(--lh-normal);
  color: var(--ink);
}
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) blockquote cite, :is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-quote cite {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--step-caption);
  color: var(--ink-muted);
}
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) figure, :is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-image { margin: 1.6em 0; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-image img { width: 100%; max-width: 100%; height: auto; }
/* A picture beside the words (the Image block's Align left or right, D-224): a set share of the column whatever size
   was picked, so the pictures on a page match; dragged smaller in the editor, its own width, never past half. On a
   phone the column is too narrow to share, so the picture stands alone at full width. A heading, another picture,
   a table, a quote, the sources, and the end of the body start below it; a list beside a left picture keeps its
   bullets off the picture. A classic theme gets the aligned figure inside a div.wp-block-image on the site, and the
   editor puts the figure inside a div[data-align], so each rule names the three forms. */
@media (min-width: 48.0625rem) {
  :is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) :is(.wp-block-image:is(.alignleft, .alignright), .wp-block-image > :is(.alignleft, .alignright), :is([data-align="left"], [data-align="right"]) > .wp-block-image) { display: block; width: min(45%, 20rem); margin-block: 0.35em 1em; }
  :is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) :is(.wp-block-image:is(.alignleft, .alignright), .wp-block-image > :is(.alignleft, .alignright), :is([data-align="left"], [data-align="right"]) > .wp-block-image).is-resized { width: fit-content; max-width: 50%; }
  :is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) :is(.wp-block-image.alignleft, .wp-block-image > .alignleft, [data-align="left"] > .wp-block-image) { float: left; margin-inline: 0 var(--space-lg); }
  :is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) :is(.wp-block-image.alignright, .wp-block-image > .alignright, [data-align="right"] > .wp-block-image) { float: right; margin-inline: var(--space-lg) 0; }
  :is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) :is(.wp-block-image.alignleft, .wp-block-image:has(> .alignleft), [data-align="left"]) ~ :is(ul, ol) { display: flow-root; }
}
@media (max-width: 48rem) {
  :is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) :is(.wp-block-image:is(.alignleft, .alignright), .wp-block-image > :is(.alignleft, .alignright), :is([data-align="left"], [data-align="right"]) > .wp-block-image) { display: block; float: none; width: auto; max-width: none; margin: 1.6em 0; }
}
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) :is(.wp-block-image:is(.alignleft, .alignright), .wp-block-image > :is(.alignleft, .alignright), :is([data-align="left"], [data-align="right"]) > .wp-block-image) > figcaption { display: block; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) :is(h2, h3, h4, .wp-block-image:not(.alignleft, .alignright), .aligncenter, .wp-block-table, .wp-block-quote, .wp-block-footnotes, .hv-block, .alignwide, .alignfull) { clear: both; }
.hv-prose::after { content: ""; display: block; clear: both; }
/* The site's wrapper round a left, right, or centered picture takes no part in the layout: an empty block holding
   only a float let its margins collapse through it, and Safari set the picture lower than the words beside it and
   dropped the gap after them. The figure inside carries the margins and the float itself. */
.hv-prose div.wp-block-image { display: contents; }
/* The Village Map page's map, drawn as lines and letters (D-189): the theme's SVG carries no attachment size, so its
   shape is kept here and the page does not move while it loads. */
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .hv-village-map-picture img { aspect-ratio: 2184 / 1728; height: auto; }
/* A wide image (the editor's Wide toggle, D-73) spans the frame, the text column's own width unchanged. Browsers without container units keep it at column width.
   The Image block also offers Full width; the frame is the widest the site goes, so Full prints as Wide (D-224). */
.hv-prose > :is(.alignwide, .alignfull) { width: 100cqw; max-width: none; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) figcaption {
  margin-top: var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--step-caption);
  color: var(--ink-muted);
}
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) strong { font-weight: 700; color: var(--ink); }
/* A video in a body (D-264). The Video block's uploaded file plays in the browser's own player at the column's
   width, in the video's own shape (16:9 until the file says). A YouTube block is the video's still under one
   Play button; YouTube's player takes its place only when pressed (assets/js/video.js). */
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-video video { display: block; width: 100%; height: auto; aspect-ratio: auto 16 / 9; background: var(--ink); }
.hv-video { position: relative; aspect-ratio: 16 / 9; background: var(--ink); overflow: hidden; }
.hv-video__frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hv-prose .hv-video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: var(--invert-ink); font: inherit; text-decoration: none; cursor: pointer; }
.hv-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.hv-video__label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
  padding: 0.5em var(--space-md);
  border: var(--hairline) solid var(--invert-ink);
  background: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-small);
  font-weight: 700;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}
.hv-video__icon { width: 0; height: 0; border-style: solid; border-width: 0.45em 0 0.45em 0.8em; border-color: transparent transparent transparent currentColor; }
.hv-video__play:hover .hv-video__label, .hv-video__play:focus-visible .hv-video__label { background: var(--invert-ink); color: var(--ink); }
.hv-video__play:focus-visible { outline: 3px solid var(--accent-cool); outline-offset: -3px; }
.hv-video__play.hv-newtab::after { content: none; } /* without the script the Play button is a link to YouTube; its new-tab arrow floated beside the label. The "Opens in a new tab" note still reaches a screen reader. */

/* Details list (Contact) --------------------------------------------------- */
.hv-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-lg) var(--space-xl);
  max-width: 62rem;
  margin: 0 0 var(--space-2xl);
  padding-block: var(--space-lg);
  border-top: 3px double var(--rule);
  border-bottom: var(--hairline) solid var(--rule);
}
.hv-details__row { margin: 0; }
.hv-details dt {
  margin: 0 0 var(--space-2xs);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--step-overline);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--ink);
}
.hv-details dd { margin: 0; font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-body); }
.hv-details dd a { color: var(--ink); }

/* Cards (Landing) ---------------------------------------------------------- */
.hv-landing { margin-top: var(--space-2xl); }
.hv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hv-card { padding: var(--space-lg) 0 0; border-top: var(--hairline) solid var(--rule-strong); }
.hv-card__title { margin: 0 0 var(--space-xs); font-size: var(--step-h4); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--tr-tight); }
.hv-card__link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.hv-card__link:hover { text-decoration-thickness: 2px; }
.hv-card__summary { margin: 0; font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-muted); }

/* Rows (news lists, search) --------------------------------------------- */
.hv-rows { max-width: var(--measure-wide); margin: 0; padding: 0; list-style: none; border-top: 3px double var(--rule); }
.hv-row { padding-block: var(--space-lg); border-bottom: var(--hairline) solid var(--rule); }
.hv-row--pictured { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--space-md) var(--space-lg); align-items: start; }
.hv-row__media { display: block; }
.hv-row__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; }
@media (max-width: 40em) { .hv-row--pictured { grid-template-columns: minmax(0, 1fr); } }
.hv-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  margin: 0 0 var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--step-caption);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.hv-row__meta a { color: inherit; text-decoration: none; }
.hv-row__meta a:hover { color: var(--ink); }
.hv-row__sep { opacity: 0.5; }
.hv-row__title { margin: 0 0 var(--space-xs); font-size: var(--step-h4); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--tr-tight); }
.hv-row__link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.hv-row__link:hover { text-decoration-thickness: 2px; }
.hv-row__summary { margin: 0; max-width: var(--measure-narrow); font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-body); }
.hv-list__empty { max-width: var(--measure-narrow); color: var(--ink-muted); }

.hv-pagination { margin-top: var(--space-xl); font-family: var(--font-sans); font-size: var(--step-small); }
.hv-pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.hv-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-sm);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 2px;
  color: var(--ink-body);
  text-decoration: none;
}
.hv-pagination .page-numbers.current { background: var(--ink); color: var(--invert-ink); border-color: var(--ink); }
.hv-pagination .page-numbers.dots { border: 0; }

/* Attachments ------------------------------------------------------------- */
.hv-attachments { max-width: var(--measure); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 3px double var(--rule); }
.hv-attachments__title {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--step-overline);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--ink);
}
.hv-attachments__list { margin: 0; padding: 0; list-style: none; }
.hv-attachments__item { display: flex; flex-wrap: wrap; gap: 0.6em; align-items: baseline; padding-block: var(--space-xs); border-bottom: var(--hairline) solid var(--rule); }
.hv-attachments__link { color: var(--link); text-decoration-color: var(--link); text-underline-offset: 0.15em; }
.hv-attachments__size { font-family: var(--font-sans); font-size: var(--step-caption); color: var(--ink-quiet); }

/* Buttons: one primary action (open the PDF, download the form) --------------- */
.hv-button {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  align-content: center; /* the label and its meta share a baseline; the line itself sits centred in the 48 px box */
  gap: 0.6em;
  min-height: 48px;
  padding: 0.55em var(--space-md);
  border: 0;
  border-radius: 2px;
  background: var(--ink);
  color: var(--invert-ink);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-small);
  line-height: var(--lh-snug);
  text-decoration: none;
  cursor: pointer;
}
.hv-button:hover { background: var(--graphite); color: var(--invert-ink); }
/* Inside a page body the prose link rule (.hv-prose a) outweighs .hv-button and painted the label ink on ink until hover. */
.hv-prose .hv-button, .hv-prose .hv-button:hover { color: var(--invert-ink); }
.hv-button__meta { font-weight: 400; opacity: 0.8; }
.hv-button.hv-newtab::after { margin-left: -0.25em; } /* the button's gap already spaces it (D-191) */

/* WordPress's own Button block, so the office can put a page's main action in the editor and have it look like the
   buttons the templates print. It wears the .hv-button look one size up: a button written into a page body is that
   page's main action, not one of a row. The editor half of the selector shows the same button in the block editor,
   and the two-class weight beats both the prose link rule above and core's own button style. */
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-buttons { margin-block: var(--space-xl); }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0.6em var(--space-xl);
  border: 0;
  border-radius: 2px;
  background: var(--ink);
  color: var(--invert-ink);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-body);
  line-height: var(--lh-snug);
  text-decoration: none;
}
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-button__link:hover { background: var(--graphite); color: var(--invert-ink); }

/* Documents and forms (Round 2) ------------------------------------------ */
.hv-row__file { display: flex; flex-wrap: wrap; gap: 0.5em; margin: var(--space-xs) 0 0; font-family: var(--font-sans); font-size: var(--step-caption); color: var(--ink-quiet); }
.hv-row__file a { color: var(--ink-muted); text-decoration-color: var(--rule-strong); text-underline-offset: 0.15em; }
.hv-row__file a:hover { color: var(--ink); }
.hv-document__action, .hv-form__action { margin: 0 0 var(--space-xl); }
.hv-form__hint { max-width: var(--measure-narrow); margin: calc(-1 * var(--space-lg)) 0 var(--space-xl); font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink-muted); }
.hv-form__missing { max-width: var(--measure-narrow); padding: var(--space-md); border-left: 3px solid var(--accent-warm); font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink-body); }
.hv-details--document { margin-top: 0; }

.hv-notice {
  max-width: var(--measure);
  margin: 0 0 var(--space-xl);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--accent-warm);
  background: var(--paper-deep);
  font-family: var(--font-sans);
  font-size: var(--step-small);
  line-height: var(--lh-normal);
  color: var(--ink-body);
}
.hv-notice a { color: var(--ink); }

/* Year groups: the newest year open, earlier years folded */
.hv-years { max-width: var(--measure-wide); border-top: 3px double var(--rule); }
.hv-year { border-bottom: var(--hairline) solid var(--rule); }
.hv-year__summary {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  min-height: 48px;
  padding: var(--space-sm) 0;
  cursor: pointer;
  list-style: none;
}
.hv-year__summary::-webkit-details-marker { display: none; }
.hv-year__summary::before {
  content: "";
  align-self: center;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: rotate(-45deg);
  transition: transform 150ms ease;
}
.hv-year[open] > .hv-year__summary::before { transform: rotate(45deg); }
.hv-year__title { display: inline; margin: 0; font-weight: 700; font-size: var(--step-h3); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--ink); }
.hv-year__count { font-family: var(--font-sans); font-size: var(--step-caption); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--ink-muted); }
.hv-year .hv-rows { border-top: 0; margin-bottom: var(--space-sm); }
.hv-year .hv-row:last-child { border-bottom: 0; }
/* Months inside a year (the monthly financial statements): a small sans heading, rows under it */
.hv-month { margin-bottom: var(--space-md); }
.hv-month__title { margin: var(--space-sm) 0 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--step-small); line-height: var(--lh-normal); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--ink); }
.hv-month .hv-rows { margin-bottom: 0; }

/* Related documents on a form page */
.hv-related { max-width: var(--measure); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 3px double var(--rule); }
.hv-related__title { margin: 0 0 var(--space-sm); font-family: var(--font-sans); font-weight: 700; font-size: var(--step-overline); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink); }
.hv-related__list { margin: 0; padding: 0; list-style: none; }
.hv-related__list li { padding-block: var(--space-xs); border-bottom: var(--hairline) solid var(--rule); }
.hv-related__list a { color: var(--link); text-decoration-color: var(--link); text-underline-offset: 0.15em; }

/* Blocks inside a body: the same partials, spaced like the prose around them, and kept clear of the prose list and heading rules */
.hv-prose .hv-block { margin-block: var(--space-xl); }
.hv-prose .hv-rows, .hv-prose .hv-years { max-width: none; padding-left: 0; list-style: none; }
.hv-prose .hv-row { margin: 0; padding-block: var(--space-lg); }
.hv-prose .hv-row__meta { margin: 0 0 var(--space-xs); }
.hv-prose .hv-row__title { margin: 0 0 var(--space-xs); font-size: var(--step-h4); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--tr-tight); }
.hv-prose .hv-row__summary, .hv-prose .hv-row__file { margin-bottom: 0; }
.hv-prose .hv-row__file { margin-top: var(--space-xs); }
.hv-prose .hv-row__meta a, .hv-prose .hv-row__file a { text-decoration: none; }
.hv-prose .hv-row__link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.hv-prose .hv-row__link:hover { text-decoration-thickness: 2px; }
.hv-prose .hv-row__file a { text-decoration: underline; }
.hv-prose .hv-year__title { margin: 0; font-size: var(--step-h3); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.hv-prose .hv-year__summary { margin: 0; }
.hv-prose .hv-month__title { margin: var(--space-sm) 0 0; font-family: var(--font-sans); font-weight: 700; font-size: var(--step-small); line-height: var(--lh-normal); letter-spacing: var(--tr-wide); text-transform: uppercase; }
.hv-block-placeholder { padding: var(--space-md); border: 1px dashed var(--rule-strong); font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink-muted); }

.hv-form-embed__title { margin: 0 0 var(--space-sm); font-size: var(--step-h3); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.hv-form-embed__description > :last-child { margin-bottom: var(--space-md); }
.hv-form-embed__more { font-family: var(--font-sans); font-size: var(--step-small); }
.hv-form-embed__more a { color: var(--ink-muted); }

.hv-contact-card {
  max-width: var(--measure-narrow);
  padding: var(--space-md) 0;
  border-top: var(--hairline) solid var(--rule-strong);
}
.hv-prose .hv-block--contact-card { margin-block: 0; }
.hv-prose .hv-block--contact-card + .hv-block--contact-card { margin-top: 0; }
.hv-contact-card__role { margin: 0 0 var(--space-2xs); font-family: var(--font-sans); font-weight: 700; font-size: var(--step-overline); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink); }
.hv-contact-card__name { margin: 0 0 var(--space-xs); font-weight: 700; font-size: var(--step-h4); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--ink); }
.hv-contact-card__links, .hv-prose .hv-contact-card__links { display: flex; flex-wrap: wrap; gap: 0.4em var(--space-md); margin: 0; padding: 0; list-style: none; font-family: var(--font-sans); font-size: var(--step-small); }
.hv-prose .hv-contact-card__links li { margin: 0; }
.hv-prose .hv-contact-card__role, .hv-prose .hv-contact-card__name, .hv-prose .hv-contact-card__note { margin-bottom: var(--space-2xs); }
.hv-prose .hv-contact-card__note { margin: var(--space-xs) 0 0; }
.hv-contact-card__links a { color: var(--link); text-decoration-color: var(--link); text-underline-offset: 0.15em; }
.hv-contact-card__note { margin: var(--space-xs) 0 0; font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-muted); }

/* Staff directory (D-109): the Staff records as contact cards under group headings; a card with a portrait puts it beside the text */
.hv-contact-card--photo { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.hv-contact-card__media { margin: 0; }
.hv-contact-card__img { display: block; width: 5rem; height: 5rem; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; }
.hv-prose .hv-contact-card__media { margin: 0; }
.hv-staff__group + .hv-staff__group { margin-top: var(--space-xl); }
.hv-staff__heading, .hv-prose .hv-staff__heading { margin: 0 0 var(--space-2xs); font-family: var(--font-sans); font-weight: 700; font-size: var(--step-small); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--ink-muted); }
.hv-staff .hv-contact-card:first-of-type { border-top-color: var(--rule); }
.hv-prose .hv-block--staff-directory { margin-block: var(--space-md) 0; }
.hv-prose .hv-block--staff-directory + .hv-block--form-embed, .hv-prose .hv-block--staff-directory + * { margin-top: var(--space-2xl); }

/* Org chart button (D-109), on Organizational Structure */
.hv-org-chart, .hv-prose .hv-org-chart { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: var(--space-md) 0 var(--space-lg); }

/* Employee Spotlight (D-109): the lead card at the top of Latest News, the cards on the Spotlights list, the page */
.hv-spotlight-card { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.hv-spotlight-card--no-photo { grid-template-columns: minmax(0, 1fr); }
.hv-spotlight-card__media { margin: 0; }
.hv-spotlight-card__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; }
.hv-spotlight-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-2xs); font-family: var(--font-sans); font-size: var(--step-caption); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--ink-muted); }
.hv-spotlight-card__meta a { color: inherit; text-decoration: none; }
.hv-spotlight-card__meta a:hover { color: var(--ink); }
.hv-spotlight-card__title { margin: 0 0 var(--space-2xs); font-size: var(--step-h4); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--tr-tight); }
.hv-spotlight-card__link { color: var(--ink); text-decoration: none; }
.hv-spotlight-card__link:hover { text-decoration: underline; text-decoration-color: var(--accent-warm); text-underline-offset: 0.15em; }
.hv-spotlight-card__role { margin: 0 0 var(--space-xs); font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink-muted); }
.hv-spotlight-card__summary { margin: 0; max-width: var(--measure-narrow); font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-body); }
.hv-spotlight-card__more { margin: var(--space-xs) 0 0; font-family: var(--font-sans); font-size: var(--step-small); }
.hv-spotlight-card__more a { color: var(--link); text-decoration-color: var(--link); text-underline-offset: 0.15em; }
.hv-spotlight-card--lead { max-width: var(--measure-wide); grid-template-columns: 10rem minmax(0, 1fr); margin: 0 0 var(--space-xl); padding: var(--space-lg) var(--space-lg) var(--space-lg) 0; border-top: 3px double var(--rule); }
.hv-spotlight-card--lead.hv-spotlight-card--no-photo { grid-template-columns: minmax(0, 1fr); }
.hv-spotlight-card--lead .hv-spotlight-card__title { font-size: var(--step-h3); line-height: var(--lh-tight); }
.hv-cards--spotlights { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: var(--space-xl) var(--space-lg); }
.hv-cards--spotlights .hv-spotlight-card { padding-top: var(--space-md); border-top: var(--hairline) solid var(--rule-strong); }
.hv-spotlight__media { max-width: 16rem; margin: 0 0 var(--space-lg); }
.hv-spotlight__img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; }
@media (max-width: 40em) {
  .hv-spotlight-card, .hv-spotlight-card--lead { grid-template-columns: 5rem minmax(0, 1fr); gap: var(--space-sm); }
  .hv-spotlight-card--lead { padding-right: 0; }
}

/* The editor's outline of an online form (the live form shows on the site) */
.hv-form--outline { max-width: var(--measure-narrow); padding: var(--space-md); border: 1px dashed var(--rule-strong); font-family: var(--font-sans); font-size: var(--step-small); }
.hv-form__outline-title { margin: 0 0 var(--space-xs); font-weight: 700; color: var(--ink); }
.hv-form__outline-fields { margin: 0 0 var(--space-xs); padding-left: 1.2em; color: var(--ink-body); }
.hv-form__outline-note { margin: 0; color: var(--ink-muted); }

/* Gravity Forms, set in the design system: labels in sans, fields on paper, one dark button */
.hv-form { max-width: var(--measure); margin-top: var(--space-xl); }
.hv-form .gform_wrapper label, .hv-form .gform_wrapper legend, .hv-form .gform_wrapper .gfield_label, .hv-form .gform_wrapper .gform-field-label, .hv-form .gform_wrapper .gfield_required, .hv-form .gform_wrapper .gfield_description, .hv-form .gform_wrapper .validation_message, .hv-form .gform_wrapper .gform_validation_errors { font-family: var(--font-sans); }
.hv-form .gform_wrapper { --gf-color-primary: var(--ink); --gf-color-primary-contrast: var(--invert-ink); --gf-color-primary-darker: var(--graphite); --gf-ctrl-border-color: var(--rule-strong); --gf-ctrl-bg-color: var(--paper); --gf-color-in-ctrl: var(--ink); --gf-color-in-ctrl-primary: var(--ink); --gf-ctrl-radius: 2px; --gf-font-family: var(--font-sans); --gf-form-gap-y: var(--space-lg); --gf-label-color-primary: var(--ink); --gf-label-color-secondary: var(--ink-muted); --gf-label-font-size-primary: var(--step-small); --gf-label-font-weight-primary: 600; --gf-ctrl-font-size: var(--step-body); --gf-color-danger: var(--accent-warm-deep); --gf-color-danger-rgb: 133, 90, 86; }
.hv-form .gform_wrapper .gform_title { margin: 0 0 var(--space-md); font-family: var(--font-serif); font-weight: 700; font-size: var(--step-h3); letter-spacing: var(--tr-tight); }
.hv-form .gform_wrapper .gform_description { display: block; margin-bottom: var(--space-lg); font-size: var(--step-small); color: var(--ink-muted); }
.hv-form .gform_wrapper input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
.hv-form .gform_wrapper textarea,
.hv-form .gform_wrapper select { min-height: 44px; padding: 0.4em var(--space-sm); border: var(--hairline) solid var(--rule-strong); border-radius: 2px; background: var(--paper); color: var(--ink); font: inherit; font-family: var(--font-sans); font-size: var(--step-body); }
.hv-form .gform_wrapper .gform_footer input[type="submit"],
.hv-form .gform_wrapper .gform_footer button,
.hv-form .gform_wrapper .gform-button {
  min-height: 48px;
  padding: 0.55em var(--space-lg);
  border: 0;
  border-radius: 2px;
  background: var(--ink);
  color: var(--invert-ink);
  font: inherit;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-small);
  cursor: pointer;
}
.hv-form .gform_wrapper .gform_footer input[type="submit"]:hover,
.hv-form .gform_wrapper .gform_footer button:hover { background: var(--graphite); }
/* The calendar button next to a date field: 44px square (WCAG 2.2 target size). Selector mirrors Gravity's own so it wins. */
.hv-form .gform-theme--framework .gfield--input-type-datepicker.gfield--datepicker-default-icon .ginput_container_date button.gform-datepicker-toggle.gform-theme-button.gform-datepicker-toggle--default,
.hv-form .gform-theme--framework .gfield--input-type-datepicker.gfield--datepicker-custom-icon .ginput_container_date button.gform-datepicker-toggle.gform-theme-button.gform-datepicker-toggle--default { --gf-local-min-height: 44px; --gf-local-min-width: 44px; margin-inline-start: var(--space-2xs); }
.hv-form .gform_wrapper .gfield_required { color: var(--accent-warm-deep); }
.hv-form .gform_wrapper .gfield_description { font-size: var(--step-caption); color: var(--ink-muted); }
/* An error is not a hint (D-233): semibold in the deeper rosy-taupe, the field's box marked as the site's own fields mark
   it, and the summary above the form set like the site's own (.hv-errors). */
.hv-form .gform_wrapper .gfield_description.validation_message { font-weight: 600; color: var(--accent-warm-deep); }
.hv-form .gform_wrapper .gfield_error input:not([type="submit"]):not([type="button"]):not([type="radio"]):not([type="checkbox"]),
.hv-form .gform_wrapper .gfield_error textarea,
.hv-form .gform_wrapper .gfield_error select { border-color: var(--accent-warm-deep); box-shadow: inset 3px 0 0 var(--accent-warm-deep); }
.hv-form .gform_wrapper .gform_validation_errors { border: 0; border-left: 3px solid var(--accent-warm-deep); border-radius: 0; background: var(--paper-deep); box-shadow: none; }
.hv-form .gform_wrapper .gform_validation_errors:focus { outline: 2px solid var(--ink); outline-offset: 2px; }
.hv-form .gform_wrapper .gform_validation_errors > h2 { font-family: var(--font-sans); font-weight: 600; font-size: var(--step-small); color: var(--ink); }
.hv-form .gform_wrapper .gform_validation_errors > h2 .gform-icon { color: var(--accent-warm-deep); }
.hv-form .gform_wrapper .gform_validation_errors > ol a { font-size: var(--step-small); color: var(--ink); }
.hv-form .gform_confirmation_message { padding: var(--space-md); border-left: 3px solid var(--accent-cool); font-family: var(--font-sans); }

/* Facilities and clubs (Round 3) ------------------------------------------ */
/* Pictures (D-101): the first one wide at its own proportions; the rest in groups of three, one big picture
   (four of six columns, two rows) beside two small ones, the big side alternating group by group. What is left
   after the last full group: one picture prints full width, two print as halves. Every picture is 3:2 (the big
   one within a gutter, cropped by a hair). Position rules only, so the editor's gallery order is the layout; on
   a phone it is one column. Dense placement: Chrome's sparse cursor never moves back up, which left holes. */
.hv-photos { max-width: var(--measure-wide); margin: 0 0 var(--space-xl); }
.hv-photos__lead { margin: 0; }
.hv-photos__img { display: block; width: 100%; height: auto; }
.hv-photos__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}
.hv-photos__cell { min-width: 0; }
.hv-photos__item { display: flex; flex-direction: column; height: 100%; margin: 0; }
.hv-photos__img--grid { flex: 1 1 auto; min-height: 0; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 48.0625rem) {
  .hv-photos__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-flow: row dense; }
  .hv-photos__cell:nth-child(3n + 1) { grid-column: 1 / span 4; grid-row: span 2; }
  .hv-photos__cell:nth-child(3n + 2),
  .hv-photos__cell:nth-child(3n + 3) { grid-column: 5 / span 2; }
  .hv-photos__cell:nth-child(6n + 4) { grid-column: 3 / span 4; }
  .hv-photos__cell:nth-child(6n + 5),
  .hv-photos__cell:nth-child(6n + 6) { grid-column: 1 / span 2; }
  /* the leftovers */
  .hv-photos__cell:nth-child(3n + 1):last-child { grid-column: 1 / -1; grid-row: auto; }
  .hv-photos__cell:nth-child(3n + 1):nth-last-child(2) { grid-column: 1 / span 3; grid-row: auto; }
  .hv-photos__cell:nth-child(3n + 2):last-child { grid-column: 4 / span 3; grid-row: auto; }
}

/* Rooms with pictures (D-101): the rooms table becomes a list when any room has a picture */
.hv-rooms { margin: 0; padding: 0; list-style: none; border-top: var(--hairline) solid var(--rule); }
.hv-room { padding-block: var(--space-md); border-bottom: var(--hairline) solid var(--rule); }
.hv-room__name { margin: 0; font-size: var(--step-body); font-weight: 700; line-height: var(--lh-tight); }
.hv-room__meta { margin: var(--space-2xs) 0 0; font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink-muted); }
.hv-room__photos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-sm);
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
}
.hv-room__photos figure { margin: 0; }

/* Group heading: a type or a category in a grouped list */
.hv-group { margin-top: var(--space-2xl); }
.hv-group:first-of-type { margin-top: 0; }
.hv-group__title { margin: 0 0 var(--space-md); font-size: var(--step-h3); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.hv-group__title a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.hv-group__title a:hover { text-decoration-thickness: 2px; }
.hv-group__intro { max-width: var(--measure-narrow); margin: calc(-1 * var(--space-xs)) 0 var(--space-lg); font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink-muted); }

/* Facility cards: the photo sits above the card's rule, so every title starts right under a rule */
.hv-cards--facilities { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-xl) var(--space-lg); align-items: start; }
.hv-card--facility { padding: 0; border-top: 0; }
.hv-card--facility .hv-card__body { padding-top: var(--space-md); border-top: var(--hairline) solid var(--rule-strong); }
.hv-card__media { margin: 0 0 var(--space-sm); }
.hv-card__img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* Model cards: the front and back drawings side by side, three models to a row at full width (D-164) */
.hv-cards--models { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
.hv-card__media-link.hv-card__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xs); }
.hv-card__pair > :only-child { grid-column: 1 / -1; }
.hv-card__meta { margin: 0 0 var(--space-2xs); font-family: var(--font-sans); font-size: var(--step-caption); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--ink-muted); }
.hv-card__meta a { color: inherit; text-decoration: none; }
.hv-card__meta a:hover { color: var(--ink); }
.hv-card__details { display: grid; gap: var(--space-sm); margin: var(--space-md) 0 0; padding-top: var(--space-sm); border-top: var(--hairline) solid var(--rule); }
.hv-card__detail { margin: 0; }
.hv-card__details dt { display: flex; align-items: center; gap: var(--space-xs); margin: 0 0 var(--space-2xs); font-family: var(--font-sans); font-weight: 700; font-size: var(--step-overline); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink); }
.hv-card__details dd { margin: 0; font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-body); }

/* Plain link lists (reservation forms on a card, the resident links) */
.hv-links { margin: 0; padding: 0; list-style: none; }
.hv-links li { margin: 0; }
.hv-links a { color: var(--link); text-decoration-color: var(--link); text-underline-offset: 0.15em; } /* garnet like every other link list (D-223) */
.hv-links a:hover { text-decoration-thickness: 2px; }
.hv-links--spaced { max-width: var(--measure); font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); }
.hv-links--spaced li { padding-block: var(--space-xs); border-bottom: var(--hairline) solid var(--rule); }
.hv-links--spaced li:first-child { border-top: var(--hairline) solid var(--rule); }

/* The resident layer of a facility or club (D-13): one section under a badge */
.hv-residents { max-width: var(--measure-wide); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 3px double var(--rule); }
.hv-residents + .hv-residents { margin-top: var(--space-xl); } /* a club's Officers right after its Contact (D-134) */
.hv-residents__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-lg); font-size: var(--step-h3); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.hv-residents__subtitle { margin: var(--space-xl) 0 var(--space-sm); font-family: var(--font-sans); font-weight: 700; font-size: var(--step-small); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--ink); }
.hv-residents .hv-details { margin-bottom: 0; border-top: 0; padding-top: 0; }
.hv-residents__prose { margin-bottom: var(--space-xl); } /* a facility's Description for residents (D-223): the same step as a subtitle's, so Where and Hours stand apart from the words */
/* A facility's wifi (D-212): the network and the password on a line each, the values in ink so they stand off their labels. */
.hv-wifi__line { display: block; }
.hv-wifi__value { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.hv-residents .hv-rows { border-top: var(--hairline) solid var(--rule); }
.hv-residents .hv-row { padding-block: var(--space-md); }
.hv-residents .hv-row__title { font-size: var(--step-body); }
.hv-residents .hv-contact-card { max-width: var(--measure-narrow); }
.hv-details--club { margin-top: 0; }

/* Rooms table */
.hv-table-wrap { max-width: var(--measure-wide); overflow-x: auto; }
.hv-table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); }
.hv-table th, .hv-table td { padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; border-bottom: var(--hairline) solid var(--rule); text-align: left; vertical-align: top; }
.hv-table thead th { font-size: var(--step-overline); font-weight: 700; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink-muted); border-bottom-color: var(--rule-strong); }
.hv-table tbody th { font-weight: 600; color: var(--ink); }
.hv-table__num { text-align: right; padding-right: var(--space-lg); font-variant-numeric: tabular-nums; }

/* The editor's table block in a page body (D-57), drawn like the rooms table: hairlines, no grid, small sans */
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-table { max-width: var(--measure-wide); overflow-x: auto; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-table table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); font-variant-numeric: tabular-nums; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-table th, :is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-table td { padding: var(--space-xs) var(--space-sm) var(--space-xs) 0; border: 0; border-bottom: var(--hairline) solid var(--rule); text-align: left; vertical-align: top; }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-table thead th { font-size: var(--step-overline); font-weight: 700; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink-muted); border-bottom-color: var(--rule-strong); }
:is(.hv-prose, :where(.editor-styles-wrapper .is-root-container)) .wp-block-table tbody tr:first-child td { padding-top: var(--space-sm); }

/* How to join */
.hv-join { max-width: var(--measure); margin-top: var(--space-xl); }
.hv-join__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: 0 0 var(--space-sm); font-size: var(--step-h4); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--tr-tight); }

/* Club directory filters (B4): a row of selects and one quiet button */
.hv-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-md) var(--space-lg);
  max-width: var(--measure-wide);
  margin: 0 0 var(--space-xl);
  padding: var(--space-md) 0 var(--space-md);
  border-top: 3px double var(--rule);
  border-bottom: var(--hairline) solid var(--rule);
  font-family: var(--font-sans);
}
.hv-filters__field { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 11rem; flex: 1 1 11rem; }
.hv-filters__label { font-size: var(--step-overline); font-weight: 700; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink); }
.hv-filters__select {
  min-height: 44px;
  padding: 0.4em var(--space-sm);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--step-small);
}
.hv-filters__actions { display: flex; align-items: center; gap: var(--space-md); }
.hv-button--quiet { min-height: 44px; background: transparent; color: var(--ink); border: var(--hairline) solid var(--ink); }
.hv-button--quiet:hover { background: var(--ink); color: var(--invert-ink); }
.hv-filters__clear { font-size: var(--step-small); color: var(--ink-muted); text-decoration-color: var(--rule-strong); }
.hv-filters__clear:hover { color: var(--ink); }
.hv-filters__result { flex-basis: 100%; margin: 0; font-size: var(--step-small); color: var(--ink-muted); }
.hv-rows--clubs .hv-row__meta { text-transform: none; letter-spacing: var(--tr-normal); font-size: var(--step-small); }
.hv-rows--clubs .hv-row__cat { text-transform: uppercase; letter-spacing: var(--tr-wide); font-size: var(--step-caption); }
/* A club's contact on the residents' list (2026-09-25) */
.hv-row__contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25em 0.9em; margin: var(--space-xs) 0 0; font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink-body); }
.hv-row__contact-role { font-size: var(--step-caption); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--ink-muted); }
.hv-row__contact a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; overflow-wrap: anywhere; }
.hv-row__contact a:hover { text-decoration-thickness: 2px; }
/* The public Clubs list: names only, in columns under each category (2026-09-25) */
.hv-list__note { max-width: var(--measure-narrow); margin: var(--space-lg) 0 0; font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink-muted); }
.hv-list__note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.hv-club-names { columns: 3 15rem; column-gap: var(--space-xl); margin: 0; padding: 0; list-style: none; border-top: 3px double var(--rule); }
.hv-club-names li { break-inside: avoid; padding: 0.55em 0; border-bottom: var(--hairline) solid var(--rule); font-size: var(--step-body); line-height: var(--lh-snug); color: var(--ink); }
.hv-club-names a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.hv-club-names a:hover { text-decoration-thickness: 2px; }

/* Blocks inside a body: the same partials at prose spacing */
.hv-prose .hv-group__title { margin: 0 0 var(--space-md); font-size: var(--step-h3); }
.hv-prose .hv-cards, .hv-prose .hv-links { padding-left: 0; list-style: none; }
.hv-prose .hv-card { margin: 0; }
.hv-prose .hv-card__title { margin: 0 0 var(--space-xs); font-size: var(--step-h4); font-weight: 700; line-height: var(--lh-snug); letter-spacing: var(--tr-tight); }
.hv-prose .hv-card__summary, .hv-prose .hv-card__meta, .hv-prose .hv-card__details dd { margin-bottom: 0; }
.hv-prose .hv-card__meta a { text-decoration: none; }
.hv-prose .hv-card__link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.hv-prose .hv-card__link:hover { text-decoration-thickness: 2px; }
.hv-prose .hv-card__media { margin: 0 0 var(--space-sm); }
.hv-card__media-link { display: block; }
.hv-prose .hv-filters { margin: 0 0 var(--space-xl); }
.hv-prose .hv-filters__result, .hv-prose .hv-filters__label { margin-bottom: 0; }
.hv-prose .hv-links li { margin: 0; }

/* Footer ---------------------------------------------------------------- */
.hv-footer {
  margin-top: var(--space-4xl);
  border-top: 3px double var(--rule);
  font-family: var(--font-sans);
  color: var(--ink-muted);
}
.hv-footer a { color: var(--ink-body); text-decoration-color: var(--rule-strong); text-underline-offset: 0.15em; }
.hv-footer a:hover { color: var(--ink); }
.hv-footer__grid {
  display: flex; /* columns as wide as their words, spread evenly; equal grid tracks left a hole after the short Office column */
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-xl) var(--space-2xl);
  padding-block: var(--space-2xl);
}
.hv-footer__col { flex: 0 1 auto; }
.hv-footer__col--wide { flex: 1 1 18rem; max-width: 40ch; } /* the after-hours paragraph */
.hv-footer__heading {
  margin: 0 0 var(--space-xs);
  font-weight: 700;
  font-size: var(--step-overline);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--ink);
}
.hv-footer__text { margin: 0 0 var(--space-xs); font-size: var(--step-small); line-height: var(--lh-normal); }
.hv-footer__list { margin: 0; padding: 0; list-style: none; font-size: var(--step-small); line-height: var(--lh-loose); }
.hv-footer__line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  padding-block: var(--space-md) var(--space-xl);
  border-top: var(--hairline) solid var(--rule);
  font-size: var(--step-caption);
  color: var(--ink-quiet);
}
.hv-footer__line p { margin: 0; }
.hv-footer__line .hv-updated { flex: 1; }
.hv-footer__line a { color: var(--ink-quiet); }
.hv-footer__credits { display: flex; flex-wrap: wrap; flex-basis: 100%; gap: 0 var(--space-md); } /* the credit wraps to its own line whole, flush left */
.hv-footer__login a + a { margin-left: var(--space-sm); } /* a signed-in visitor gets two links: Your details (or Dashboard) and Sign out */

/* Governance: committees, condos, meetings (Round 4) ----------------------- */
/* A section inside a body page: roster, members, board, contact, notes */
.hv-section__title { margin: var(--space-2xl) 0 var(--space-sm); font-size: var(--step-h3); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.hv-section__intro { max-width: var(--measure-narrow); margin: 0 0 var(--space-lg); font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-muted); }
.hv-section__note { max-width: var(--measure-narrow); margin: var(--space-sm) 0 0; font-family: var(--font-sans); font-size: var(--step-caption); color: var(--ink-muted); }
.hv-details--committee, .hv-details--condo, .hv-details--meeting { margin-top: 0; }
.hv-table--people, .hv-table--roster { max-width: var(--measure); }
.hv-table--roster { min-width: 34rem; } /* Four columns; on a phone the wrapper scrolls sideways rather than wrapping every name */
.hv-table--roster td:last-child { white-space: nowrap; }
.hv-table--people tbody th { width: 40%; }
.hv-table--people-wide { max-width: none; min-width: 42rem; } /* Contact columns (D-51); on a phone the wrapper scrolls sideways */
.hv-table--people-wide tbody th { width: auto; }
.hv-table__nowrap { white-space: nowrap; }
.hv-section__title .hv-badge { font-size: var(--step-overline); letter-spacing: var(--tr-wide); vertical-align: middle; }
.hv-table__empty { color: var(--ink-quiet); font-style: italic; }
.hv-table__note { max-width: var(--measure-narrow); margin: 0; font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-muted); } /* Where a people table would print for a resident (D-107) */
.hv-table--roster a { color: var(--ink); text-decoration-color: var(--rule-strong); text-underline-offset: 0.15em; }
.hv-table--roster a:hover { text-decoration-color: var(--accent-warm); }

/* The stale notice (B3): the same quiet box as other notices, with the cool accent so it reads as information, not alarm */
.hv-notice--stale { border-left-color: var(--accent-cool); }
.hv-notice--past { border-left-color: var(--ink-muted); }

/* Meetings on a body page: one section, upcoming then past by year */
.hv-meetings { max-width: var(--measure-wide); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 3px double var(--rule); }
.hv-meetings__title { margin: 0 0 var(--space-xs); font-size: var(--step-h3); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.hv-meetings__schedule { max-width: var(--measure-narrow); margin: 0 0 var(--space-lg); font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-muted); }
.hv-meetings__quiet, .hv-meetings__older { max-width: var(--measure-narrow); margin: var(--space-md) 0 0; font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-muted); }
.hv-meetings__subtitle { margin: var(--space-xl) 0 var(--space-sm); font-family: var(--font-sans); font-weight: 700; font-size: var(--step-small); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--ink); }
.hv-meetings .hv-list__empty { margin: 0; font-family: var(--font-sans); font-size: var(--step-small); }
.hv-years--meetings .hv-year__title { font-size: var(--step-h4); }
.hv-row--meeting .hv-row__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em 0.75em; font-size: var(--step-body); }
.hv-row__label { font-family: var(--font-sans); font-weight: 600; font-size: var(--step-caption); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--accent-warm-deep); }
.hv-row__files { display: flex; flex-wrap: wrap; gap: 0.5em; margin: var(--space-2xs) 0 0; font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink-quiet); }
.hv-row__files a { color: var(--ink); text-decoration-color: var(--rule-strong); text-underline-offset: 0.15em; }
.hv-row__files a:hover { text-decoration-color: var(--accent-warm); }
.hv-row__filetype { font-size: var(--step-caption); color: var(--ink-quiet); }
.hv-row__files--none { color: var(--ink-quiet); font-style: italic; }
.hv-rows--committees .hv-row__meta { text-transform: none; letter-spacing: var(--tr-normal); font-size: var(--step-small); }

/* One meeting: the date is the title, the files are the actions */
.hv-page-head__label { display: block; margin-top: var(--space-xs); font-family: var(--font-sans); font-weight: 600; font-size: var(--step-small); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--accent-warm-deep); }
.hv-meeting__files { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0 0 var(--space-xl); padding: 0; list-style: none; }

/* Condo cards: name, then president and trustee */
.hv-cards--condos { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.hv-card__people { display: grid; gap: var(--space-2xs); margin: 0 0 var(--space-xs); }
.hv-card__person { display: grid; grid-template-columns: 6.5em 1fr; gap: 0.5em; margin: 0; font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); }
.hv-card__person dt { padding-top: 0.2em; font-weight: 700; font-size: var(--step-overline); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink-muted); }
.hv-card__person dd { margin: 0; color: var(--ink-body); }

/* How Do I, models, trips (Round 5) ----------------------------------------- */
/* The as-you-type filter: one labeled search box and a status line, above the grouped list */
.hv-howdoi__filter {
  display: grid;
  gap: var(--space-2xs);
  max-width: var(--measure);
  margin: 0 0 var(--space-xl);
  padding: var(--space-md) 0;
  border-top: 3px double var(--rule);
  border-bottom: var(--hairline) solid var(--rule);
  font-family: var(--font-sans);
}
.hv-howdoi__label { font-size: var(--step-overline); font-weight: 700; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink); }
.hv-howdoi__box {
  min-height: 44px;
  padding: 0.4em var(--space-sm);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--step-body);
  -webkit-appearance: none;
  appearance: none;
}
.hv-howdoi__box:focus-visible { outline: 2px solid var(--accent-cool); outline-offset: 2px; }
.hv-howdoi__status { margin: var(--space-2xs) 0 0; font-size: var(--step-small); color: var(--ink-muted); }
.hv-howdoi__none { margin: 0; font-family: var(--font-sans); font-size: var(--step-small); }
.hv-rows--howdoi .hv-row { padding-block: var(--space-md); }
.hv-rows--howdoi .hv-row__title { font-size: var(--step-body); }
.hv-rows--howdoi .hv-row__summary { font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink-muted); }
/* The Watch video tag on an entry that has a video (D-213): a press plays it over the list, in the player the Video
   series section styles (below). A small outlined tag in the label's capitals, ink when pointed at; the pseudo-element
   makes the target 44 px tall without making the tag larger. Two classes, to outweigh a page body's link rule. */
.hv-row .hv-row__watch { margin: var(--space-sm) 0 0; }
.hv-row .hv-row__watch-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.5em 0.8em;
  border: var(--hairline) solid var(--ink);
  border-radius: 2px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--step-overline);
  font-feature-settings: "kern", "lnum", "tnum";
  line-height: 1.4;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: background-color 160ms ease, color 160ms ease;
}
.hv-row .hv-row__watch-tag::before { content: ""; position: absolute; top: -8px; right: -4px; bottom: -8px; left: -4px; }
.hv-row .hv-row__watch-tag:hover { background: var(--ink); color: var(--invert-ink); }
/* The triangle is as tall as the capitals; the margins take up the empty room its drawing has around it. */
.hv-row__watch-tag .hv-series__icon { flex: 0 0 auto; width: 1.4em; height: 1.4em; margin: -0.33em -0.2em -0.33em -0.42em; }
.hv-row__watch-length { font-weight: 500; letter-spacing: 0.02em; color: var(--ink-muted); }
.hv-row__watch-tag:hover .hv-row__watch-length { color: inherit; }
/* Trimming the words to their capitals centres them on the triangle exactly (as the alert's tag does); browsers
   without text-box (iPadOS 15) keep the padding above. Same tag height either way. */
@supports (text-box: trim-both cap alphabetic) {
  .hv-row .hv-row__watch-tag { padding-block: 0.83em; }
  .hv-row__watch-words, .hv-row__watch-length { text-box: trim-both cap alphabetic; }
}

/* One entry: the steps are the body; the video is one of the video series, in the site's player (the Video series section, below); the related records list their kind */
.hv-watch, .hv-related { max-width: var(--measure); margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 3px double var(--rule); }
.hv-watch .hv-section__title, .hv-related .hv-section__title { margin-top: 0; }
/* A Watch video tag without its script is a link to this heading (D-213): the margin keeps it clear of the bar that sticks to the top, as the series' own heading does. */
.hv-watch .hv-section__title { scroll-margin-top: 7.5rem; }
.hv-links__kind { margin-left: 0.5em; font-size: var(--step-caption); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--ink-quiet); }
.hv-links--inline { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); font-family: var(--font-sans); font-size: var(--step-small); }

/* Model cards: the facts under the name, one per line so no stat breaks across lines; the plans are buttons like meeting files */
.hv-card__facts { margin: 0 0 var(--space-xs); padding: 0; list-style: none; font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-body); }
.hv-card__facts li { margin: 0; }
.hv-details--model, .hv-details--trip { margin-top: 0; }
.hv-model__plans, .hv-trip__actions { margin-bottom: var(--space-xl); }

/* Trip rows: dates, kind, and cost on the first line */
.hv-rows--trips .hv-row__meta { text-transform: none; letter-spacing: var(--tr-normal); font-size: var(--step-small); }
.hv-rows--trips .hv-row__meta time { font-weight: 700; color: var(--ink); }

/* Blocks inside a body: the How Do I list at prose spacing */
.hv-prose .hv-howdoi__filter { margin: 0 0 var(--space-xl); }
.hv-prose .hv-howdoi__status, .hv-prose .hv-howdoi__label { margin-bottom: 0; }
.hv-prose .hv-rows--howdoi .hv-row__summary { margin: 0; }

/* Editor canvas ----------------------------------------------------------- */
/* The block editor loads this stylesheet inside its canvas (functions.php, add_editor_style). These rules make the
   canvas match a Page on the site: the same frame, the same left edge, the same line length, the same title.
   WordPress's own default is a centered 840 px column; the site's body copy is a 68ch measure at the frame's left edge. */
.editor-styles-wrapper { margin: 0; padding: 0; }
.editor-styles-wrapper .editor-visual-editor__post-title-wrapper,
.editor-styles-wrapper .is-root-container {
  width: min(100% - 2 * var(--frame-x), var(--frame-max));
  margin-inline: auto;
}
.editor-styles-wrapper .editor-visual-editor__post-title-wrapper { padding-top: var(--space-2xl); }
.editor-styles-wrapper .is-root-container { padding-bottom: var(--space-3xl); }
.editor-styles-wrapper .is-root-container > .wp-block { max-width: var(--measure); margin-inline: 0; }
.editor-styles-wrapper .is-root-container > .wp-block:is(.alignwide, .alignfull) { max-width: none; }
.editor-styles-wrapper .editor-post-title {
  max-width: 20ch;
  margin: 0 0 var(--space-xl);
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--step-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tighter);
  color: var(--ink);
}

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

/* Round 6: Home, the Residents landing, search ------------------------------ */

/* Home: the pitch. Headline set large, intro as a lede, the three buttons, then the picture edge to edge of the frame */
.hv-home { padding-block: var(--space-2xl) var(--space-3xl); }
.hv-home__head { margin-bottom: var(--space-xl); }
.hv-home__title {
  max-width: 16ch;
  margin: 0 0 var(--space-md);
  font-weight: 900;
  font-size: var(--step-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tighter);
  color: var(--ink);
  text-wrap: balance;
}
.hv-home__intro {
  max-width: var(--measure-narrow);
  margin: 0 0 var(--space-xl);
  font-weight: 300;
  font-style: italic;
  font-size: var(--step-lede);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-snug);
  color: var(--ink-muted);
}
.hv-home__hero { margin: 0 0 var(--space-2xl); }
.hv-home__hero-frame { position: relative; background: var(--hero-paper); } /* the paper under the hero edge (D-172) */
.hv-home__hero-img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
/* The pictures that take turns with the hero (D-168): each sits over the hero and fades in when it comes up; hero-turns.js never adds them under reduced motion, and the rule at the end hides them there too. 1200ms matches FADE_MS in hero-turns.js. */
.hv-home__hero-turn { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity 1200ms ease; pointer-events: none; }
.hv-home__hero-turn.is-showing { opacity: 1; }
.hv-home__hero-pause {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.4em var(--space-sm);
  border: var(--hairline) solid var(--ink);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-caption);
  line-height: var(--lh-snug);
  cursor: pointer;
}
.hv-home__hero-pause:hover { background: var(--ink); color: var(--invert-ink); }
.hv-home__hero-pause:focus-visible { outline: 3px solid var(--accent-cool); outline-offset: 2px; }
.hv-home__hero-pause-mark { display: inline-block; width: 0.6em; height: 0.7em; border-inline: 0.2em solid currentColor; } /* two bars: pause */
.hv-no-js .hv-home__hero-pause { display: none; } /* scripts off: no turns to pause (the display above overrides its hidden attribute) */
.hv-home__hero-pause[aria-pressed="true"] .hv-home__hero-pause-mark { width: 0; height: 0; border-style: solid; border-width: 0.4em 0 0.4em 0.65em; border-color: transparent transparent transparent currentColor; } /* a triangle: play */
/* On a phone the button is the mark alone, so it does not cover the picture; the words stay for screen readers */
@media (max-width: 48rem) {
  .hv-home__hero-pause { right: var(--space-xs); bottom: var(--space-xs); justify-content: center; min-width: 36px; min-height: 36px; padding: 0; }
  .hv-home__hero-pause-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-home__hero-turn, .hv-home__hero-pause { display: none; }
}
/* Home's reasons (D-149): a band each, picture and words side by side, swapping sides; stacked on a narrow screen */
.hv-home__body { margin: 0 0 var(--space-2xl); }
.hv-home__reasons { margin: 0 0 var(--space-3xl); }
.hv-reasons { display: grid; gap: var(--space-3xl); margin: 0; padding: 0; list-style: none; }
.hv-reason { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
.hv-reason:nth-child(even) .hv-reason__media { order: 2; }
.hv-reason--plain { grid-template-columns: minmax(0, 1fr); }
.hv-reason__image { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* The hero's painted paper edge on each reason's picture (D-177): hero-edge-3x2.png, the same edge at the same depth
   for a 3:2 frame (hero-edge.sh), over the hero's paper colour, which sits behind the picture's box only. The ?v=
   changes whenever the stencil is redrawn: the server tells browsers to keep the file a year. */
.hv-reason__media { background: #fcf8e5; }
.hv-reason__image {
  -webkit-mask: url("../brand/hero-edge-3x2.png?v=3") 0 0 / 100% 100% no-repeat;
  mask: url("../brand/hero-edge-3x2.png?v=3") 0 0 / 100% 100% no-repeat;
}
.hv-reason__words { max-width: 34rem; }
.hv-reason:nth-child(even) .hv-reason__words { justify-self: end; }
.hv-reason--plain .hv-reason__words { max-width: var(--measure, 44rem); justify-self: start; }
.hv-reason__title { margin: 0 0 var(--space-sm); font-size: var(--step-h2); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.hv-reason__text { margin: 0 0 var(--space-md); color: var(--ink-body); }
.hv-reason__more { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: var(--step-body, 1rem); }
.hv-reason__more a { color: var(--link); text-decoration-color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.hv-reason__more a::after { content: " \2192"; }
.hv-reason__more a:hover { text-decoration-thickness: 2px; }
@media (max-width: 56rem) {
  .hv-reasons { gap: var(--space-2xl); }
  .hv-reason { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .hv-reason:nth-child(even) .hv-reason__media { order: 0; }
  .hv-reason__words, .hv-reason:nth-child(even) .hv-reason__words { max-width: none; justify-self: start; }
}
/* Home's closing band: one line and two buttons */
.hv-home__visit { margin: var(--space-3xl) 0 0; padding: var(--space-2xl) var(--space-lg); border-block: var(--hairline) solid var(--rule-strong); background: var(--paper-deep); text-align: center; }
.hv-home__visit-title { margin: 0 0 var(--space-md); text-wrap: balance; font-size: var(--step-h3); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.hv-home__visit-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); margin: 0; }
.hv-home__body:empty { display: none; }

/* Quick actions: a row of buttons that wraps; the Residents button is the quiet one at the end */
.hv-quick { margin: 0 0 var(--space-lg); }
.hv-quick__list { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.hv-quick__item { margin: 0; }
.hv-quick__button { text-align: left; }
@media (max-width: 40rem) {
  .hv-quick__list { flex-direction: column; align-items: stretch; }
  .hv-quick__button { display: flex; width: 100%; }
}
.hv-article--landing .hv-quick { margin: calc(-1 * var(--space-md)) 0 var(--space-xl); }

/* The Residents landing's news feed, above its sections */
.hv-feed { margin-top: var(--space-2xl); }
.hv-feed__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-sm) var(--space-lg); max-width: var(--measure-wide); }
.hv-feed__all { font-family: var(--font-sans); font-size: var(--step-small); font-weight: 600; color: var(--ink); text-decoration-color: var(--rule-strong); text-underline-offset: 0.15em; }
.hv-feed__all:hover { text-decoration-color: var(--accent-warm); }
.hv-rows--feed .hv-row { padding-block: var(--space-md); }
.hv-rows--feed .hv-row__title { font-size: var(--step-h4); }
.hv-residents-landing .hv-landing .hv-group__title { margin-bottom: var(--space-lg); }

/* Search results: the box again under the heading, then one group per record type */
.hv-results__again { max-width: var(--measure-narrow); margin-top: var(--space-lg); }
.hv-group__count { font-family: var(--font-sans); font-size: var(--step-small); font-weight: 600; color: var(--ink-muted); vertical-align: middle; }
.hv-rows--search .hv-row { padding-block: var(--space-md); }
.hv-rows--search .hv-row__title { font-size: var(--step-h4); }
.hv-rows--search .hv-row__meta:not(:has(time)) { display: none; } /* the group heading already names the type; news keeps its date */

/* Accounts (D-125, D-126): the sign-in page, Register, and Your details ------------------------------------------ */
/* Sign in is one narrow column: a box, a button, one line under it. The page header above it is the page's own. */
.hv-signin { max-width: 30rem; margin: 0 0 var(--space-3xl); }
.hv-signin--wide { max-width: var(--measure); } /* the registration form, a Gravity Form in the .hv-form look */
.hv-form--register { margin-top: 0; }
.hv-signin__panel { margin: 0 0 var(--space-lg); padding: var(--space-md) var(--space-lg); border-left: 3px solid var(--accent-cool); background: var(--paper-deep); }
.hv-signin__title { margin: 0 0 var(--space-xs); font-size: var(--step-h3); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.hv-signin__lead { margin: 0 0 var(--space-sm); font-size: var(--step-body); line-height: var(--lh-body); color: var(--ink-body); }
.hv-signin__note { margin: var(--space-sm) 0 0; font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-muted); }
.hv-signin__note a, .hv-signin__alt a { color: var(--ink); }
/* The password box and its Show button on one line, the same height; the width fits "Hide" too, so the box never moves.
   Edge's own reveal eye is off here, or Edge would show two. */
.hv-password { display: flex; gap: var(--space-xs); align-items: stretch; }
.hv-password .hv-input { flex: 1 1 auto; min-width: 0; }
.hv-password .hv-input::-ms-reveal { display: none; }
.hv-password__toggle { flex: none; justify-content: center; align-items: center; min-width: 5.5em; }
.hv-password__toggle[hidden] { display: none; }
.hv-signin__alt { margin: var(--space-lg) 0 0; padding-top: var(--space-md); border-top: var(--hairline) solid var(--rule); font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink-muted); }

/* Fields: a sans label over a paper box, the hint between them, the error in the deeper warm accent above the box so a
   screen reader and a sighted reader meet it in the same order. */
.hv-field { margin: 0 0 var(--space-lg); padding: 0; border: 0; min-width: 0; }
.hv-field__label { display: block; margin: 0 0 var(--space-2xs); font-family: var(--font-sans); font-weight: 600; font-size: var(--step-small); line-height: var(--lh-snug); color: var(--ink); }
.hv-field__required { color: var(--accent-warm-deep); }
.hv-field__hint { margin: 0 0 var(--space-xs); font-family: var(--font-sans); font-size: var(--step-caption); line-height: var(--lh-normal); color: var(--ink-muted); }
.hv-field__hint a { color: var(--ink); }
.hv-field__hint-inline { font-family: var(--font-sans); font-size: var(--step-caption); color: var(--ink-muted); }
.hv-field__error { margin: 0 0 var(--space-xs); font-family: var(--font-sans); font-weight: 600; font-size: var(--step-caption); line-height: var(--lh-normal); color: var(--accent-warm-deep); }
.hv-field__static { margin: 0; font-family: var(--font-sans); font-size: var(--step-body); line-height: var(--lh-normal); color: var(--ink-body); }
.hv-input {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0.5em var(--space-sm);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: var(--lh-snug);
}
.hv-input:focus { outline: 2px solid var(--ink); outline-offset: 1px; border-color: var(--ink); }
.hv-input--area { min-height: 5.5em; resize: vertical; }
.hv-field--error .hv-input { border-color: var(--accent-warm-deep); box-shadow: inset 3px 0 0 var(--accent-warm-deep); }
.hv-fields--pair, .hv-fields--trio { display: grid; gap: 0 var(--space-md); }
.hv-fields--pair { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.hv-fields--trio { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

/* Radio choices: each on its own line, the note under the label in the quiet colour, a 24 px control. */
.hv-choices legend { padding: 0; } /* A legend's own 2px inset put the question off the radios' left edge. */
.hv-choices legend + .hv-field__hint, .hv-choices legend + .hv-field__error { margin-bottom: var(--space-sm); }
.hv-choices .hv-field__label { margin-bottom: var(--space-sm); }
.hv-choice { display: grid; grid-template-columns: 24px 1fr; gap: var(--space-sm); align-items: start; margin: 0 0 var(--space-sm); font-family: var(--font-sans); font-size: var(--step-body); line-height: var(--lh-snug); color: var(--ink); cursor: pointer; }
.hv-choice__input { width: 24px; height: 24px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.hv-choice__text { padding-top: 0.1em; }
.hv-choice__note { display: block; margin-top: 0.15em; font-size: var(--step-caption); line-height: var(--lh-normal); color: var(--ink-muted); }
.hv-choice--off { color: var(--ink-quiet); cursor: default; }
.hv-choice--off .hv-choice__input { cursor: default; }

/* The error summary at the top of a form, and the button row at the bottom. */
.hv-errors { max-width: var(--measure); margin: 0 0 var(--space-lg); padding: var(--space-sm) var(--space-md); border-left: 3px solid var(--accent-warm-deep); background: var(--paper-deep); font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-body); }
.hv-errors p { margin: 0; }
.hv-errors ul { margin: var(--space-xs) 0 0; padding-left: 1.2em; }
.hv-errors a { color: var(--ink); }
.hv-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); align-items: center; margin: var(--space-lg) 0 0; }
.hv-actions--end { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--hairline) solid var(--rule); }
.hv-button--quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 var(--hairline) var(--rule-strong); }
.hv-button--quiet:hover { background: var(--paper-deep); color: var(--ink); }
/* Inside a page body the rule that keeps a button's label light (.hv-prose .hv-button) painted a quiet button's label paper on paper (D-205). */
.hv-prose .hv-button--quiet, .hv-prose .hv-button--quiet:hover { color: var(--ink); }

/* Your details: four groups, each with a serif heading and a sans lead. */
.hv-profile { max-width: var(--measure); margin: 0 0 var(--space-3xl); }
.hv-profile__group { margin: 0 0 var(--space-2xl); }
.hv-profile__title { margin: 0 0 var(--space-sm); padding-top: var(--space-md); border-top: 3px double var(--rule); font-size: var(--step-h3); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); }
.hv-profile__lead { max-width: var(--measure-narrow); margin: 0 0 var(--space-lg); font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-muted); }
.hv-profile__lead a { color: var(--ink); }
/* A resident linked to a directory entry (D-227): the listing as residents read it, set off on a fold of paper like a
   quotation, quieter while they are out of the directory; the phone and email questions sit between Change what
   shows and the other choice, hanging from Change on a rule that starts under its radio, lined up with its words. */
.hv-profile__lines { display: grid; gap: var(--space-xs); margin: 0 0 var(--space-sm); }
.hv-profile__line { margin: 0; padding: var(--space-sm) var(--space-md); border-left: 3px solid var(--rule-strong); background: var(--paper-deep); font-size: var(--step-body); line-height: var(--lh-normal); color: var(--ink); overflow-wrap: anywhere; }
.hv-profile__lines--out .hv-profile__line { border-left-color: var(--rule); background: transparent; color: var(--ink-muted); }
.hv-profile__listing .hv-field__hint { margin-bottom: var(--space-sm); }
.hv-profile__listing .hv-profile__out { font-weight: 600; color: var(--ink); }
/* A phone or an address moves to the next line whole; it breaks inside only when longer than a line. */
.hv-profile__whole { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.hv-profile__change { margin: calc(-1 * var(--space-sm)) 0 var(--space-md) 11px; padding: var(--space-md) 0 var(--space-2xs) 23px; border-left: 2px solid var(--rule); }
.hv-profile__change > .hv-field:last-child { margin-bottom: 0; }
.hv-notice--welcome, .hv-notice--saved { border-left-color: var(--accent-cool); }

/* Message board (D-140) ------------------------------------------------------ */
.hv-topics__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); margin: 0 0 var(--space-lg); }
.hv-topics__help { font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink-muted); }
.hv-topics__help:hover { color: var(--ink); }
.hv-filters__field--wide { flex: 2 1 16rem; }
.hv-filters__input { width: 100%; }
.hv-badge--waiting { border-color: var(--accent-warm-deep); color: var(--accent-warm-deep); } /* D-237: small words in the deeper rosy-taupe */
.hv-row--waiting .hv-row__link { color: var(--ink-muted); }
.hv-row__found { margin-left: var(--space-sm); font-family: var(--font-sans); font-size: var(--step-caption); color: var(--ink-muted); }
.hv-topic__byline { margin: 0 0 var(--space-lg); font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink-muted); }
.hv-topic__body { margin-bottom: var(--space-lg); }
.hv-topic__remove, .hv-topic__own { max-width: var(--measure); margin: 0 0 var(--space-lg); font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink-muted); }
.hv-topic__own a { color: var(--ink); margin-right: var(--space-md); }
.hv-topic__confirm, .hv-topic__quote { max-width: var(--measure); }
.hv-topic__quote { margin: 0 0 var(--space-lg); padding: var(--space-sm) var(--space-md); border-left: 3px solid var(--rule-strong); color: var(--ink-body); }
.hv-replies { max-width: var(--measure); margin: var(--space-2xl) 0 0; }
.hv-replies__list { margin: 0; padding: 0; list-style: none; border-top: 3px double var(--rule); }
.hv-reply { padding-block: var(--space-lg); border-bottom: var(--hairline) solid var(--rule); }
.hv-reply__body { margin: 0; }
.hv-reply__own { margin: var(--space-xs) 0 0; font-family: var(--font-sans); font-size: var(--step-caption); }
.hv-reply__own a { color: var(--ink-muted); }
.hv-reply__deleted { margin: 0; font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink-quiet); font-style: italic; }
.hv-reply--waiting .hv-reply__body { color: var(--ink-muted); }
.hv-topic-form { max-width: var(--measure); }
.hv-reply-form { margin-top: var(--space-2xl); padding-top: var(--space-lg); border-top: 3px double var(--rule); }
.hv-topic__follow { max-width: var(--measure); margin: var(--space-lg) 0 0; font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink-muted); }
.hv-button--link { padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 0.15em; cursor: pointer; }
.hv-button--link:hover { text-decoration-color: var(--accent-warm); }

/* Resident directory (D-227) ------------------------------------------------- */
/* The search sits in the How Do I box's frame (a double rule over, a hairline under), the box and its button on one
   line. A line reads like the printed directory's: the name and the address on the left edge, the phone and any email
   on the right, so the eye runs down either side; on a phone the links drop under the address and grow to a thumb's
   height. */
.hv-directory__search {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* lets the box shrink below its natural width (WebKit pushed Search past the edge at 390) */
  gap: var(--space-xs);
  max-width: var(--measure-wide);
  margin: 0 0 var(--space-xl);
  padding: var(--space-md) 0;
  border-top: 3px double var(--rule);
  border-bottom: var(--hairline) solid var(--rule);
}
/* The frame keeps the page's serif, so its 78ch is the list's 78ch and the two share a right edge; its parts are sans. */
.hv-directory__label, .hv-directory__box, .hv-directory__hint { font-family: var(--font-sans); }
.hv-directory__label { font-size: var(--step-overline); font-weight: 700; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink); }
.hv-directory__row { display: flex; gap: var(--space-sm); }
.hv-directory__box {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.4em var(--space-sm);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font-size: var(--step-body);
  line-height: var(--lh-snug);
  -webkit-appearance: none;
  appearance: none;
}
.hv-directory__box:focus-visible { outline: 2px solid var(--accent-cool); outline-offset: 2px; }
.hv-directory__go { flex: none; align-items: center; }
.hv-directory__hint { margin: 0; font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-muted); }
.hv-directory__message { max-width: var(--measure-narrow); margin: 0; color: var(--ink-body); }
/* The office phone in the limit message. No kerning: WebKit sizes a serif hyphenated number in its own inline box
   with kerning and draws it without, leaving a gap before the full stop. */
.hv-directory__message a { color: var(--link); white-space: nowrap; font-kerning: none; }
.hv-directory__found { margin: 0 0 var(--space-xs); font-family: var(--font-sans); font-size: var(--step-overline); font-weight: 700; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink-muted); }
.hv-directory__lines { max-width: var(--measure-wide); margin: 0; padding: 0; list-style: none; border-top: var(--hairline) solid var(--rule-strong); }
.hv-directory__line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
  gap: var(--space-2xs) var(--space-lg);
  align-items: baseline;
  padding-block: var(--space-md);
  border-bottom: var(--hairline) solid var(--rule);
}
.hv-directory__name { margin: 0; font-size: var(--step-body); font-weight: 700; line-height: var(--lh-snug); color: var(--ink); overflow-wrap: anywhere; }
.hv-directory__where { margin: var(--space-2xs) 0 0; font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-muted); }
.hv-directory__unit { font-weight: 600; color: var(--ink); }
.hv-directory__reach { display: grid; gap: var(--space-2xs); justify-items: end; margin: 0; padding: 0; list-style: none; font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); text-align: right; }
.hv-directory__reach li { max-width: 100%; }
.hv-directory__reach a { color: var(--link); text-decoration-color: var(--link); text-underline-offset: 0.15em; overflow-wrap: anywhere; }
.hv-directory__whose { color: var(--ink-muted); }
@media (max-width: 40em) {
  .hv-directory__line { grid-template-columns: minmax(0, 1fr); }
  .hv-directory__reach { gap: 0; justify-items: start; text-align: left; }
  .hv-directory__reach a { display: inline-block; padding-block: 11px; } /* a 22px line and 22px of padding: a 44px target */
}

/* Interactive village map (D-173) ------------------------------------------------ */
/* The drawing: assets/map/village-map.svg carries class names only, so every colour, weight, and font is here. The
   page scales .hv-map__world as the map zooms and sets --hv-map-k to one over the zoom, so lines (non-scaling
   strokes) keep their weight and labels (.hv-map__s, scaled by --hv-map-k) keep their size on screen; below a phone's
   whole village the labels shrink with the map, to two thirds of their size (view.js). data-zoom on
   the svg ("whole", "closer", "closest") says which labels show. */
.hv-map__svg {
  --hv-map-k: 1;
  --hv-map-sage-wash: color-mix(in srgb, var(--brand-sage) 26%, var(--paper));
  --hv-map-sage-edge: color-mix(in srgb, var(--brand-sage) 78%, var(--ink));
  --hv-map-road: color-mix(in srgb, var(--ink-quiet) 78%, var(--paper));
  --hv-map-water: color-mix(in srgb, var(--brand-water) 42%, var(--paper));
  --hv-map-water-edge: color-mix(in srgb, var(--brand-water) 80%, var(--ink));
  --hv-map-water-ink: color-mix(in srgb, var(--brand-water) 45%, var(--ink));
  --hv-map-drive: color-mix(in srgb, var(--ink-quiet) 70%, var(--hv-map-sage-wash));
  --hv-map-road-through: color-mix(in srgb, var(--ink-quiet) 88%, var(--ink));
  --hv-map-lot: color-mix(in srgb, var(--ink-quiet) 18%, var(--paper));
  --hv-map-pick-wash: color-mix(in srgb, var(--accent-warm) 30%, var(--paper));
  --hv-map-place-pick: color-mix(in srgb, var(--brand-forest) 80%, var(--ink));
  --hv-map-outline-edge: color-mix(in srgb, var(--ink-quiet) 55%, var(--hv-map-sage-wash));
  --hv-map-outline-pick: color-mix(in srgb, var(--link) 45%, var(--paper));
  --hv-map-fade: 0.34;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  font-family: var(--font-sans);
  user-select: none;
  -webkit-user-select: none;
}
/* Browsers without color-mix() (Safari before 16.2, still on older iPads) get the same colours worked out. */
@supports not (color: color-mix(in srgb, red, red)) {
  .hv-map__svg {
    --hv-map-sage-wash: #dbdbcf;
    --hv-map-sage-edge: #767f60;
    --hv-map-road: #a29d98;
    --hv-map-water: #c5cecc;
    --hv-map-water-edge: #6e8482;
    --hv-map-water-ink: #505b58;
    --hv-map-drive: #a29f97;
    --hv-map-road-through: #7e7974;
    --hv-map-lot: #e3dfdc;
    --hv-map-pick-wash: #e2d3cf;
    --hv-map-place-pick: #49584e;
    --hv-map-outline-edge: #aeaca3;
    --hv-map-outline-pick: #cd9da4;
  }
}
.hv-map__svg path, .hv-map__svg circle { vector-effect: non-scaling-stroke; }
.hv-map__condo { fill: var(--hv-map-sage-wash); stroke: var(--hv-map-sage-edge); stroke-width: 0.9px; fill-rule: evenodd; }
/* The water as page 1 draws it: every edge under every fill, so where two shapes overlap only the outer edge shows. */
.hv-map__water-edge { fill: none; stroke: var(--hv-map-water-edge); stroke-width: 1.6px; stroke-linejoin: round; }
.hv-map__pond, .hv-map__river { fill: var(--hv-map-water); fill-rule: evenodd; }
.hv-map__stream { fill: none; stroke: var(--hv-map-water-edge); stroke-width: 1px; stroke-linecap: round; stroke-linejoin: round; }
.hv-map__lot { fill: var(--hv-map-lot); stroke: var(--hv-map-road); stroke-width: 0.5px; }
.hv-map__drives { fill: none; stroke: var(--hv-map-drive); stroke-width: 0.8px; stroke-linecap: round; }
.hv-map__casing { fill: none; stroke: var(--paper); stroke-width: 5px; stroke-linecap: round; stroke-linejoin: round; }
.hv-map__casing--through { stroke-width: 6.5px; }
.hv-map__road { fill: none; stroke: var(--hv-map-road); stroke-width: 2.6px; stroke-linecap: round; stroke-linejoin: round; }
.hv-map__road--other { stroke-width: 1.8px; }
.hv-map__road--through { stroke: var(--hv-map-road-through); stroke-width: 3.6px; }
.hv-map__place { fill: var(--brand-forest); }
.hv-map__gate { fill: none; stroke: var(--ink); stroke-width: 2px; stroke-linecap: round; }
/* The buildings' outlines (D-186): paper roofs with a light edge, under every label. They take taps only once the map
   is close enough to aim at one; at the whole village a tap still picks the condo. */
.hv-map__outline { fill: var(--paper); stroke: var(--hv-map-outline-edge); stroke-width: 0.6px; stroke-linejoin: round; pointer-events: none; }
.hv-map__svg:not([data-zoom="whole"]) .hv-map__outline { pointer-events: visiblePainted; }

.hv-map__s { transform: scale(var(--hv-map-k)); }
.hv-map__svg text { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; stroke-linejoin: round; text-anchor: middle; }
.hv-map__num { font-weight: 600; font-size: 10px; fill: var(--ink); font-variant-numeric: lining-nums; }
.hv-map__rule { stroke: var(--ink); stroke-width: 1px; }
.hv-map__disc circle { fill: var(--paper); stroke: var(--brand-forest); stroke-width: 2px; }
.hv-map__disc circle { stroke-width: 1.75px; }
.hv-map__disc text { font-family: var(--font-serif); font-weight: 700; font-size: 12px; fill: var(--ink); stroke: none; font-variant-numeric: lining-nums; }
.hv-map__disc .hv-map__disc-letter { font-size: 10px; text-anchor: start; stroke: var(--paper); stroke-width: 3px; }
.hv-map__section text { font-weight: 700; font-size: 11.5px; letter-spacing: 0.18em; fill: var(--ink-muted); stroke-width: 4px; }
.hv-map__section--end text { text-anchor: end; }
.hv-map__badge circle { fill: var(--brand-forest); stroke: var(--paper); stroke-width: 1.5px; }
.hv-map__badge use { color: var(--paper); }
.hv-map__svg symbol path { fill: none; stroke: currentColor; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; }
/* A street name follows its road: the halo is its own text under the name, since a text on a path paints each
   letter's halo over the letter before it. */
.hv-map__street text { font-weight: 600; font-size: calc(9.5px * var(--hv-map-k)); letter-spacing: 0.08em; fill: var(--ink-muted); stroke: none; dominant-baseline: central; }
.hv-map__street .hv-map__street-halo { fill: none; stroke: var(--paper); stroke-width: calc(3.5px * var(--hv-map-k)); }
.hv-map__street--through text { fill: var(--ink); font-size: calc(10px * var(--hv-map-k)); }
.hv-map__water-name text { font-family: var(--font-serif); font-style: italic; font-size: 10px; fill: var(--hv-map-water-ink); }
.hv-map__landmark text { font-weight: 600; font-size: 8.5px; letter-spacing: 0.12em; fill: var(--ink-quiet); }
.hv-map__place-name text { font-weight: 700; font-size: 10px; fill: var(--brand-forest); }
.hv-map__note text { font-family: var(--font-serif); font-style: italic; font-size: 9.5px; fill: var(--ink-muted); }

/* Which labels show: the whole village, closer, closest; a label that would cover another waits for its data-min zoom (the page marks it .is-tight). */
.hv-map__labels--closer, .hv-map__labels--closest { display: none; }
.hv-map__svg[data-zoom="closer"] .hv-map__labels--closer,
.hv-map__svg[data-zoom="closest"] .hv-map__labels--closer,
.hv-map__svg[data-zoom="closest"] .hv-map__labels--closest { display: inline; }
.hv-map__svg[data-zoom="closer"] .hv-map__section { opacity: 0.5; }
.hv-map__svg[data-zoom="closest"] .hv-map__section { opacity: 0.22; }
.hv-map__svg[data-zoom="closest"] .hv-map__badge--footprint { display: none; } /* the footprint and its name say it by then */
.hv-map__svg .is-tight { display: none; }

/* Picking: the pick in garnet (--link), the rest faded about two thirds of the way toward the paper. */
.hv-map__svg.is-picking :is(.hv-map__condo, .hv-map__road, .hv-map__place, .hv-map__lot, .hv-map__street, .hv-map__labels .hv-map__label):not(.is-selected, .is-context),
.hv-map__svg.is-picking :is(.hv-map__water-edge, .hv-map__pond, .hv-map__river, .hv-map__stream, .hv-map__drives, .hv-map__gate) { opacity: var(--hv-map-fade); }
.hv-map__svg :is(.hv-map__condo, .hv-map__road, .hv-map__place, .hv-map__lot, .hv-map__label, .hv-map__street, .hv-map__water-edge, .hv-map__pond, .hv-map__river, .hv-map__stream, .hv-map__drives, .hv-map__gate) { transition: opacity 0.35s ease; }
.hv-map__condo.is-selected { fill: var(--hv-map-pick-wash); stroke: var(--link); stroke-width: 2.2px; }
.hv-map__road.is-selected { stroke: var(--link); stroke-width: 4.4px; }
.hv-map__street.is-selected text:not(.hv-map__street-halo) { fill: var(--link); }
.hv-map__disc.is-selected circle { stroke: var(--link); }
.hv-map__place.is-selected { fill: var(--hv-map-place-pick); }
.hv-map__outline.is-selected { fill: var(--hv-map-outline-pick); stroke: var(--link); stroke-width: 1.2px; }
.hv-map__cluster.is-selected .hv-map__num { fill: var(--link); }
.hv-map__cluster.is-selected .hv-map__rule { stroke: var(--link); }
.hv-map__svg .is-selected.is-tight { display: inline; } /* a pick shows even where its label would wait for a closer zoom */
.hv-map__svg[data-zoom="whole"] .hv-map__labels--closest .is-selected { display: none; }
.hv-map__svg.has-marker .hv-map__place-name.is-selected { display: none; } /* the marker's tag names the pick */

/* The marks: a pick's marker (garnet, a small paper label, one pulse) and the viewer's home (forest, never a pick). */
.hv-map__marker .hv-map__pin { fill: var(--link); stroke: var(--paper); stroke-width: 1.5px; }
.hv-map__marker .hv-map__pin-dot { fill: var(--paper); stroke: none; }
.hv-map__marker .hv-map__tag { fill: var(--paper); stroke: var(--link); stroke-width: 1px; }
.hv-map__marker .hv-map__tag-text { font-weight: 700; font-size: 11px; fill: var(--link); stroke: none; }
.hv-map__marker .hv-map__pulse { fill: var(--link); opacity: 0; transform-box: fill-box; transform-origin: center; }
.hv-map__marker.is-new .hv-map__pulse { animation: hv-map-pulse 1.2s ease-out 1; }
@keyframes hv-map-pulse { from { opacity: 0.4; transform: scale(0.6); } to { opacity: 0; transform: scale(3.2); } }
.hv-map__home path { fill: var(--brand-forest); stroke: var(--paper); stroke-width: 1.5px; stroke-linejoin: round; }
.hv-map__home .hv-map__home-door { fill: var(--paper); stroke: none; }
.hv-map__home.is-under-pin { display: none; } /* the pin on the viewer's own building names it */

/* "Show on the map" under a condo's or a facility's heading (D-173). */
.hv-map-link { margin: calc(-1 * var(--space-xs)) 0 var(--space-lg); font-family: var(--font-sans); font-size: var(--step-small); }
.hv-map-link a { display: inline-flex; align-items: center; gap: 0.35em; min-height: 44px; color: var(--link); text-underline-offset: 0.15em; }
.hv-map-link svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

/* The page (D-173): the site header, then the map filling the rest of the window; no footer, no page scroll. */
html:has(body.hv-imap-page) { height: 100%; overflow: hidden; }
body.hv-imap-page {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px)); /* the window without a phone's browser bars; vh where dvh is unknown (Safari before 15.4) */
  overflow: hidden;
}
body.hv-imap-page .hv-main { flex: 1 1 auto; min-height: 0; display: flex; }
.hv-imap { position: relative; flex: 1 1 auto; display: flex; min-height: 0; min-width: 0; }
.hv-imap__map { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; background: var(--paper); outline-offset: -3px; }
.hv-imap__map .hv-map__svg { position: absolute; inset: 0; touch-action: none; cursor: grab; }
.hv-imap__map .hv-map__svg:active { cursor: grabbing; }
.hv-imap__map .hv-map__svg :is([data-condo], [data-place], [data-street], .hv-map__cluster, .hv-map__outline) { cursor: pointer; }

/* The panel: on a computer or a tablet held sideways, a column on the left. */
.hv-imap__panel {
  position: relative;
  z-index: 2;
  flex: 0 0 clamp(300px, 28vw, 380px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--paper);
  border-right: var(--hairline) solid var(--rule);
}
.hv-imap__sheet { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-lg) var(--space-lg) var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); }
.hv-imap__handle { display: none; }
.hv-imap__head { order: -2; }
.hv-imap__title { margin: 0 0 var(--space-xs); font-family: var(--font-serif); font-weight: 700; font-size: var(--step-h4); line-height: var(--lh-snug); letter-spacing: var(--tr-snug); color: var(--ink); }
.hv-imap__intro { margin: 0; font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-muted); }
.hv-imap__home { order: -1; align-self: flex-start; }
.hv-imap__label { display: block; margin: 0 0 var(--space-xs); font-family: var(--font-sans); font-weight: 600; font-size: var(--step-small); color: var(--ink); }
.hv-imap__search { margin: 0; }
.hv-imap__combo { position: relative; }
.hv-imap__input {
  width: 100%;
  min-height: 48px;
  padding: 0.5em 0.75em;
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 2px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem; /* 16px: a phone does not zoom the page when the box takes focus */
}
.hv-imap__input:focus { border-color: var(--ink-muted); }
.hv-imap__suggest {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: min(60vh, 22rem);
  overflow-y: auto;
  margin: 0;
  padding: var(--space-2xs) 0;
  list-style: none;
  background: var(--paper);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(42, 37, 34, 0.12);
}
.hv-imap__option { display: flex; flex-direction: column; gap: 1px; min-height: 44px; justify-content: center; padding: var(--space-xs) var(--space-md); cursor: pointer; font-family: var(--font-sans); }
.hv-imap__option[aria-selected="true"], .hv-imap__option:hover { background: var(--paper-deep); }
.hv-imap__option-label { font-weight: 600; font-size: var(--step-small); color: var(--ink); }
.hv-imap__option-detail { font-size: var(--step-caption); color: var(--ink-muted); }
.hv-imap__message { margin: var(--space-xs) 0 0; font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-body); }
.hv-imap__message:empty { display: none; }
.hv-imap__browse-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); }
.hv-imap__browse-button {
  min-height: 44px;
  padding: 0 var(--space-xs);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-caption);
  cursor: pointer;
}
.hv-imap__browse-button:hover { background: var(--paper-deep); }
.hv-imap__browse-button[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: var(--invert-ink); }
.hv-imap__list-title { margin: 0 0 var(--space-xs); font-family: var(--font-sans); font-weight: 600; font-size: var(--step-overline); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink-muted); }
.hv-imap__list-items { margin: 0; padding: 0; list-style: none; border-top: var(--hairline) solid var(--rule); }
.hv-imap__list-items li { border-bottom: var(--hairline) solid var(--rule); }
.hv-imap__list-items--condos { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); column-gap: var(--space-md); }
.hv-imap__pick { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); min-height: 44px; padding: var(--space-xs) 0; font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink); text-decoration: none; }
.hv-imap__pick:hover .hv-imap__pick-label { color: var(--link); text-decoration: underline; text-underline-offset: 0.15em; }
.hv-imap__list-items .hv-imap__pick { align-items: center; }
.hv-imap__pick-detail { font-size: var(--step-caption); color: var(--ink-muted); text-align: right; }

/* The card for what is picked. */
.hv-imap__card { padding-top: var(--space-md); border-top: 3px double var(--rule); outline: none; }
.hv-imap__card-title { margin: 0 0 var(--space-xs); font-family: var(--font-serif); font-weight: 700; font-size: var(--step-h4); line-height: var(--lh-snug); color: var(--ink); }
.hv-imap__card p { margin: 0 0 var(--space-xs); font-size: var(--step-small); line-height: var(--lh-normal); }
.hv-imap__card-lead { color: var(--ink); font-weight: 700; }
.hv-imap__card-model { font-family: var(--font-sans); font-weight: 600; }
.hv-imap__card-sub { margin: var(--space-md) 0 var(--space-2xs); font-family: var(--font-sans); font-weight: 600; font-size: var(--step-overline); letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink-muted); }
.hv-imap__card-picks, .hv-imap__card-rooms, .hv-imap__card-models { margin: 0; padding: 0; list-style: none; font-size: var(--step-small); }
.hv-imap__card-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); column-gap: var(--space-md); border-top: var(--hairline) solid var(--rule); }
.hv-imap__card-picks li { border-bottom: var(--hairline) solid var(--rule); }
.hv-imap__card-rooms li, .hv-imap__card-models li { padding: 2px 0; }
.hv-imap__card-models { margin-bottom: var(--space-xs); font-family: var(--font-sans); }
.hv-imap__card-links { margin-top: var(--space-sm) !important; font-family: var(--font-sans); }
.hv-imap__card-links a { color: var(--link); }
.hv-imap__card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-md); }
.hv-imap__action.hv-button { min-height: 44px; padding-inline: var(--space-md); }
.hv-imap__copied { font-family: var(--font-sans); font-size: var(--step-caption); color: var(--ink-muted); }
.hv-imap__foot { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: auto 0 0; padding-top: var(--space-lg); font-family: var(--font-sans); font-size: var(--step-small); }
.hv-imap__foot a { color: var(--ink); text-underline-offset: 0.15em; text-decoration-color: var(--rule-strong); }
.hv-imap__foot a:hover { color: var(--link); }

/* The map's buttons (top right, 44 px), the north arrow and the scale bar (bottom left). */
.hv-imap__controls { position: absolute; top: var(--space-md); right: var(--space-md); z-index: 1; display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-xs); }
.hv-imap__control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--space-sm);
  border: var(--hairline) solid var(--rule-strong);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-caption);
  box-shadow: 0 2px 8px rgba(42, 37, 34, 0.1);
  cursor: pointer;
}
.hv-imap__control:hover { background: var(--paper-deep); }
.hv-imap__control svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.hv-imap__corner { position: absolute; left: var(--space-md); bottom: var(--space-md); z-index: 1; display: flex; align-items: flex-end; gap: var(--space-sm); padding: 4px 8px 4px 6px; border-radius: 2px; background: rgba(247, 243, 240, 0.88); pointer-events: none; } /* the paper, a little see-through */
.hv-imap__control--all { gap: 6px; }
.hv-imap__north { width: 22px; height: 30px; }
.hv-imap__north path { fill: var(--ink-muted); }
.hv-imap__north text { font-family: var(--font-sans); font-weight: 700; font-size: 8px; fill: var(--ink-muted); text-anchor: middle; }
.hv-imap__scale { display: flex; flex-direction: column; gap: 3px; font-family: var(--font-sans); font-size: var(--step-overline); color: var(--ink-muted); }
.hv-imap__scale-bar { display: block; width: 60px; height: 5px; border: var(--hairline) solid var(--ink-muted); border-top: 0; }
.hv-imap:not(.is-ready) .hv-imap__scale { display: none; }

/* A phone or a tablet held upright: the panel is a sheet over the bottom of the map, with three heights. Held
   sideways, a phone gets the panel beside the map, as a tablet does: a sheet would leave the map a strip. */
@media (orientation: portrait) and (max-width: 1100px) {
  .hv-imap { display: block; }
  .hv-imap__map { position: absolute; inset: 0; }
  .hv-imap__panel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 12rem;
    border-right: 0;
    border-top: var(--hairline) solid var(--rule-strong);
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -6px 24px rgba(42, 37, 34, 0.14);
    transition: height 0.3s ease;
  }
  .hv-imap__panel.is-dragging { transition: none; }
  .hv-imap__handle {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    width: 100%;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: grab;
    touch-action: none;
  }
  .hv-imap__handle span { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--rule-strong); }
  .hv-imap__sheet { padding: 0 var(--space-md) var(--space-lg); gap: var(--space-sm); }
  .hv-imap:not([data-sheet="full"]) .hv-imap__sheet { overflow-y: hidden; }
  .hv-imap[data-sheet="half"] .hv-imap__sheet { overflow-y: auto; }
  /* On a short screen peek holds only the search box; Browse waits for the handle (out of the tab order too). */
  .hv-imap.is-compact[data-sheet="peek"] .hv-imap__browse { visibility: hidden; }
  /* Peek holds the search and Browse; the heading and the way back wait for the full sheet, and step aside while
     the search box has focus, so its matches have the room. */
  .hv-imap:is(:not([data-sheet="full"]), .is-searching) :is(.hv-imap__head, .hv-imap__foot) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .hv-imap__head, .hv-imap__home { order: 0; }
  .hv-imap__label { font-size: var(--step-caption); }
  .hv-imap__controls { top: var(--space-sm); right: var(--space-sm); flex-direction: row; align-items: flex-start; } /* a row: a column down the right side would cost the whole village a quarter of its size */
  .hv-imap__control-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* Show all is its icon on a phone; the words stay for screen readers */
  .hv-imap__corner { bottom: auto; top: var(--space-sm); left: var(--space-sm); }
}

/* Video series (D-205) ------------------------------------------------------- */
/* The Video series block: the videos as a list by group, a grid of numbered squares (video 01's sixteen tiles), and
   the site's own player, which the picked square grows into. series.js adds the classes that start with is-.
   Old iPads (iPadOS 15) get no container units and no color-mix() here, and a vh before every dvh. */
.hv-series {
  --hv-series-paper: #f7f3ef; /* the first frame of every video, so a square grows into the video's own opening */
  --hv-series-side: clamp(7.5rem, 11vw, 10.5rem);
  --hv-series-bar: 4.375rem; /* the bar's height: the seek line (24 px, the least a target may be) over the row of buttons */
  margin: var(--space-lg) 0 var(--space-2xl);
}
/* The block spans the frame, not the text column, so a square has room for its words. */
.hv-prose > .hv-block--video-series { max-width: none; }
@supports (width: 1cqw) {
  .hv-prose > .hv-block--video-series { width: 100cqw; }
}
@supports not (width: 1cqw) {
  .hv-prose > .hv-block--video-series { width: calc(100vw - 2 * var(--frame-x)); max-width: var(--frame-max); }
}

/* The series' name, printed by the block as the heading over it (D-209). A link from another page lands on it: the
   margin keeps it clear of the bar that sticks to the top (78 px at its tallest, and an editor's toolbar over that). */
.hv-series-name { scroll-margin-top: 7.5rem; }

/* The list, by group. */
.hv-series__index {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-lg) var(--space-xl);
  margin: 0 0 var(--space-xl);
  padding-block: var(--space-lg);
  border-top: 3px double var(--rule);
  border-bottom: var(--hairline) solid var(--rule);
}
.hv-series__group { min-width: 0; }
.hv-series .hv-series__group-name {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-overline);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-wider);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.hv-series .hv-series__lines { margin: 0; padding-left: 1.9em; font-size: var(--step-menu); line-height: var(--lh-snug); }
.hv-series .hv-series__line-item { margin-block: 0; padding-block: 0.32em; }
.hv-series .hv-series__line-item::marker { font-family: var(--font-sans); font-size: var(--step-small); font-variant-numeric: tabular-nums; color: var(--ink-quiet); }
/* A line is its title and, at the column's right edge, its length: a long title wraps and the length never drops to a line of its own. */
.hv-series .hv-series__line { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75em; color: var(--ink); text-decoration: none; }
.hv-series__line-title { text-decoration: underline; text-decoration-color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.hv-series__line:hover .hv-series__line-title, .hv-series__line.is-linked .hv-series__line-title { text-decoration-thickness: 2px; }
.hv-series__line[aria-current="true"] .hv-series__line-title { font-weight: 700; text-decoration-thickness: 2px; }
.hv-series__line-length { flex: 0 0 auto; font-family: var(--font-sans); font-size: var(--step-caption); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-muted); }

/* The grid: sixteen squares, four across. */
.hv-series .hv-series__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); max-width: 44rem; margin: 0; padding: 0; list-style: none; }
.hv-series .hv-series__cell { display: flex; margin: 0; aspect-ratio: 1; }
.hv-series .hv-series__tile, .hv-series__side {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
  padding: var(--space-sm) var(--space-sm) 0.65rem;
  border: var(--hairline) solid var(--rule);
  border-radius: 0;
  background: var(--paper-deep);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}
.hv-series__tile-num, .hv-series__side-num { font-style: italic; font-weight: 300; font-size: 2rem; line-height: 1; font-feature-settings: "kern", "lnum"; color: var(--ink-muted); transition: color 180ms ease; }
.hv-series__tile-title, .hv-series__side-title { margin-top: auto; padding-top: var(--space-xs); overflow-wrap: break-word; font-weight: 700; font-size: var(--step-small); line-height: 1.25; letter-spacing: var(--tr-snug); text-wrap: balance; }
.hv-series__tile-length { display: flex; align-items: center; margin-top: 0.4rem; font-family: var(--font-sans); font-size: var(--step-caption); line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink-muted); transition: color 180ms ease; }
/* The play mark beside the length, drawn only on hover and focus. */
.hv-series__tile-mark { width: 0; height: 0; margin-right: 0; border-style: solid; border-color: transparent transparent transparent currentColor; border-width: 0; opacity: 0; transition: border-width 180ms ease, margin-right 180ms ease, opacity 180ms ease; }
/* The ink state (square 12 in video 01): under the pointer, under the keyboard's focus, and when its line in the
   list is. Hover is its own rule, for devices that hover: after a tap a touch screen keeps :hover until the next
   tap elsewhere. :focus-visible sits inside :is(), which ignores a name a browser does not know (Safari before
   15.4); in a plain list of selectors one unknown name would drop the whole rule. */
.hv-series :is(.hv-series__tile, .hv-series__side):is(.is-linked, :focus-visible) { border-color: var(--ink); background: var(--ink); color: var(--paper); transform: translateY(-3px); box-shadow: 0 8px 18px rgba(42, 37, 34, 0.18); }
.hv-series :is(.hv-series__tile, .hv-series__side):is(.is-linked, :focus-visible) :is(.hv-series__tile-num, .hv-series__tile-length, .hv-series__side-num, .hv-series__side-label) { color: var(--paper); }
.hv-series .hv-series__tile:is(.is-linked, :focus-visible) .hv-series__tile-mark { margin-right: 0.45em; border-width: 0.36em 0 0.36em 0.6em; opacity: 1; }
@media (hover: hover) {
  .hv-series :is(.hv-series__tile, .hv-series__side):hover { border-color: var(--ink); background: var(--ink); color: var(--paper); transform: translateY(-3px); box-shadow: 0 8px 18px rgba(42, 37, 34, 0.18); }
  .hv-series :is(.hv-series__tile, .hv-series__side):hover :is(.hv-series__tile-num, .hv-series__tile-length, .hv-series__side-num, .hv-series__side-label) { color: var(--paper); }
  .hv-series .hv-series__tile:hover .hv-series__tile-mark { margin-right: 0.45em; border-width: 0.36em 0 0.36em 0.6em; opacity: 1; }
}
.hv-series :is(.hv-series__tile, .hv-series__side):is(:focus-visible) { outline: 3px solid var(--accent-cool); outline-offset: 2px; }
/* A device set to reduce motion: the colour still changes, nothing lifts. */
@media (prefers-reduced-motion: reduce) {
  .hv-series :is(.hv-series__tile, .hv-series__side) { transform: none !important; box-shadow: none !important; }
}
/* The first time the grid is seen, the notice tint runs through the sixteen once, as in video 01. */
@keyframes hv-series-tint {
  0%, 100% { background-color: var(--paper-deep); }
  45% { background-color: var(--alert-tint); }
}
.hv-series__grid.is-swept .hv-series__tile { animation: hv-series-tint 720ms ease calc(var(--i, 0) * 55ms) 1; }
.hv-series__grid.is-swept .hv-series__tile:hover, .hv-series__grid.is-swept .hv-series__tile.is-linked { animation: none; } /* an animation outranks the ink state */
/* A pick: the others fade; the picked square is replaced by the box that grows into the player. */
.hv-series__stage { position: relative; }
.hv-series .hv-series__grid[hidden], .hv-series__player[hidden] { display: none; }
.hv-series__grid.is-leaving { top: 0; left: 0; }
.hv-series__grid.is-leaving .hv-series__tile { opacity: 0; pointer-events: none; }
.hv-series .hv-series__grid .hv-series__tile.is-picked { opacity: 1; visibility: hidden; transition: none; }
.hv-series__ghost { position: absolute; z-index: 40; top: 0; left: 0; margin: 0; border: var(--hairline) solid var(--rule); pointer-events: none; will-change: transform, width, height; }

/* The player: the label, the picture between the previous and next squares, the way back. */
.hv-series__player.is-arriving :is(.hv-series__now, .hv-series__side, .hv-series__after) { opacity: 0; }
.hv-series__player :is(.hv-series__now, .hv-series__after) { transition: opacity 240ms ease; }
.hv-series__now { margin: 0 0 var(--space-md); }
.hv-series .hv-series__count { margin: 0 0 var(--space-xs); }
.hv-series .hv-series__title { margin: 0; font-size: var(--step-h3); font-weight: 900; line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--ink); }
.hv-series__title:focus { outline: none; }
.hv-series__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "frame frame" "prev next"; gap: var(--space-sm); align-items: stretch; }
.hv-series__side--prev { grid-area: prev; }
.hv-series__side--next { grid-area: next; text-align: right; }
.hv-series__side--next .hv-series__side-label { justify-content: flex-end; }
.hv-series__side { min-height: 5.5rem; }
.hv-series__side[hidden] { display: flex; visibility: hidden; } /* video 1 has no previous and the last no next: the space stays, so the picture does not move */
.hv-series__side-label { display: flex; margin-bottom: 0.35rem; font-family: var(--font-sans); font-weight: 600; font-size: var(--step-overline); line-height: 1.2; letter-spacing: var(--tr-wider); text-transform: uppercase; color: var(--ink-muted); transition: color 180ms ease; }
.hv-series__side-num { font-size: 1.5rem; }
.hv-series__frame {
  position: relative;
  grid-area: frame;
  justify-self: center;
  width: 100%;
  width: min(100%, calc((100vh - 12rem) * 16 / 9)); /* never taller than the window less the label and the bar that sticks */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: var(--hairline) solid var(--rule);
  background: var(--hv-series-paper);
  -webkit-tap-highlight-color: transparent;
}
.hv-series__frame { transition: opacity 220ms ease, transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.hv-series__frame:focus { outline: none; } /* never reached by Tab: only a press on the picture or the script puts the keyboard here */
.hv-series__frame.is-sliding-out { opacity: 0; transform: translateX(var(--hv-series-slide, -2.5rem)); transition: opacity 160ms ease, transform 160ms ease; }
.hv-series__frame.is-sliding-in { opacity: 0; transform: translateX(calc(-1 * var(--hv-series-slide, -2.5rem))); transition: none; }
.hv-series__video { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: contain; background: var(--hv-series-paper); }
.hv-series__after { margin: var(--space-md) 0 0; }
@media (min-width: 72em) {
  .hv-series__row { grid-template-columns: var(--hv-series-side) minmax(0, 1fr) var(--hv-series-side); grid-template-areas: "prev frame next"; gap: var(--space-lg); align-items: center; }
  .hv-series__side { min-height: 0; aspect-ratio: 1; }
  .hv-series__side--next { text-align: left; }
  .hv-series__side--next .hv-series__side-label { justify-content: flex-start; }
  .hv-series__frame { width: min(100%, calc((100vh - 14rem) * 16 / 9)); }
}

/* Captions, drawn by the page from the .vtt file, above the bar. */
.hv-series__captions { position: absolute; right: 4%; bottom: calc(var(--hv-series-bar) + 0.5rem); left: 4%; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; pointer-events: none; transition: bottom 200ms ease; }
.hv-series__frame.is-idle .hv-series__captions, .hv-series__frame.is-ended .hv-series__captions { bottom: 5%; }
.hv-series__cue { padding: 0.12em 0.6em 0.18em; border-radius: 2px; background: rgba(30, 27, 25, 0.88); color: #ffffff; font-family: var(--font-sans); font-weight: 500; font-size: clamp(0.8125rem, 1.7vw, 1.25rem); line-height: 1.35; white-space: pre-line; }

/* The bar: the seek line over a row of buttons. It hides three seconds into playing (is-idle). */
.hv-series__bar { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; align-items: center; min-height: var(--hv-series-bar); padding: 0 var(--space-xs) 2px; background: rgba(30, 27, 25, 0.9); color: var(--invert-ink); font-family: var(--font-sans); transition: opacity 200ms ease, transform 200ms ease; }
.hv-series__frame.is-idle .hv-series__bar, .hv-series__frame.is-ended .hv-series__bar, .hv-series__frame.is-failed .hv-series__bar { opacity: 0; transform: translateY(0.5rem); pointer-events: none; }
/* Under the end card or the error card the bar is gone for the keyboard too. Asleep (is-idle) it stays reachable: Tab wakes it. */
.hv-series__frame.is-ended .hv-series__bar, .hv-series__frame.is-failed .hv-series__bar { visibility: hidden; }
/* Each control has its place in the row, so one that is away (CC, for a video with no captions) leaves the rest where they were. */
.hv-series__play { grid-area: 2 / 1; }
.hv-series__cc { grid-area: 2 / 3; }
.hv-series__speed-wrap { grid-area: 2 / 4; }
.hv-series__mute { grid-area: 2 / 5; }
.hv-series__full { grid-area: 2 / 6; }
.hv-series__frame.is-idle { cursor: none; }
.hv-series__btn { position: relative; display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 6px; border: 0; border-radius: 2px; background: transparent; color: inherit; font: 600 var(--step-small) / 1 var(--font-sans); cursor: pointer; }
.hv-series__btn:hover { background: rgba(255, 255, 255, 0.14); }
.hv-series :is(.hv-series__btn, .hv-series__rate, .hv-series__seek):is(:focus-visible) { outline: 2px solid #5eead4; outline-offset: -2px; } /* the teal cue, lightened for the dark bar */
.hv-series__btn[hidden] { display: none; }
.hv-series__icon { display: block; }
.hv-series__play .hv-series__icon--pause, .hv-series__mute .hv-series__icon--muted, .hv-series__full .hv-series__icon--small { display: none; }
.hv-series__frame.is-playing .hv-series__play .hv-series__icon--play, .hv-series__mute[aria-pressed="true"] .hv-series__icon--sound, .hv-series__frame.is-full .hv-series__full .hv-series__icon--full { display: none; }
.hv-series__frame.is-playing .hv-series__play .hv-series__icon--pause, .hv-series__mute[aria-pressed="true"] .hv-series__icon--muted, .hv-series__frame.is-full .hv-series__full .hv-series__icon--small { display: block; }
.hv-series__cc[aria-pressed="true"] { background: var(--invert-ink); color: var(--ink); }
.hv-series__time { grid-area: 2 / 2; margin-left: 0.4em; overflow: hidden; font-size: var(--step-caption); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hv-series__speed-wrap { position: relative; display: inline-flex; }
.hv-series__speed-now { min-width: 2.6em; font-variant-numeric: tabular-nums; text-align: center; }
.hv-series__speeds { position: absolute; right: 0; bottom: calc(100% + 4px); display: flex; padding: 2px; border-radius: 2px; background: rgba(30, 27, 25, 0.96); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
.hv-series__speeds[hidden] { display: none; }
.hv-series__rate { min-width: 3.25rem; height: 44px; padding: 0 0.5em; border: 0; border-radius: 2px; background: transparent; color: var(--invert-ink); font: 500 var(--step-small) / 1 var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer; }
.hv-series__rate:hover { background: rgba(255, 255, 255, 0.14); }
.hv-series__rate[aria-checked="true"] { background: var(--invert-ink); color: var(--ink); font-weight: 700; }
/* A button's name, on hover and keyboard focus, where a pointer can hover. */
@media (hover: hover) {
  .hv-series__btn[data-tip]:is(:hover, :focus-visible)::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 0.4em 0.65em; border-radius: 2px; background: rgba(30, 27, 25, 0.96); color: var(--invert-ink); font: 600 var(--step-caption) / 1.2 var(--font-sans); white-space: nowrap; pointer-events: none; }
  .hv-series__play[data-tip]:is(:hover, :focus-visible)::after { left: 0; transform: none; }
  .hv-series__full[data-tip]:is(:hover, :focus-visible)::after { right: 0; left: auto; transform: none; }
  .hv-series__speed[aria-expanded="true"]::after { display: none; }
}
/* The seek line: a range input, so it drags and takes the arrow keys. --hv-series-played is set by player.js. */
.hv-series__seek { grid-area: 1 / 1 / 2 / -1; width: 100%; height: 24px; margin: 0; padding: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.hv-series__seek::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--invert-ink) var(--hv-series-played, 0%), rgba(255, 255, 255, 0.3) var(--hv-series-played, 0%)); }
.hv-series__seek::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); }
.hv-series__seek::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--invert-ink); }
.hv-series__seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border: 0; border-radius: 50%; background: #ffffff; }
.hv-series__seek::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: #ffffff; }

/* Over the picture: the large Play (in the middle of what the bar leaves showing, so on the smallest screens it
   does not sit on the seek line), the wait ring, the end card, the error. */
.hv-series__start { position: absolute; top: calc(50% - var(--hv-series-bar) / 2); left: 50%; display: inline-flex; align-items: center; gap: 0.5em; min-height: 56px; margin: 0; padding: 0 1.4em 0 1.1em; transform: translate(-50%, -50%); border: 0; border-radius: 28px; background: var(--ink); color: var(--invert-ink); font: 600 var(--step-body) / 1 var(--font-sans); cursor: pointer; box-shadow: 0 6px 18px rgba(42, 37, 34, 0.25); }
.hv-series__start:hover { background: var(--graphite); }
.hv-series__start[hidden] { display: none; }
.hv-series__start-mark { display: inline-flex; }
.hv-series__wait { position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border: 3px solid rgba(42, 37, 34, 0.18); border-top-color: var(--ink); border-radius: 50%; animation: hv-series-wait 900ms linear infinite; pointer-events: none; }
.hv-series__wait[hidden] { display: none; }
@keyframes hv-series-wait { to { transform: rotate(360deg); } }
.hv-series__end, .hv-series__error { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-md); background: rgba(247, 243, 239, 0.97); text-align: center; animation: hv-series-card 260ms ease; }
.hv-series__end[hidden], .hv-series__error[hidden] { display: none; }
@keyframes hv-series-card { from { opacity: 0; } }
.hv-series .hv-series__end p, .hv-series .hv-series__error p { margin: 0; }
.hv-series .hv-series__end-title, .hv-series .hv-series__end-last, .hv-series .hv-series__error-text { max-width: 28ch; font-weight: 900; font-size: clamp(1.125rem, 2.6vw, 2rem); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--ink); text-wrap: balance; }
.hv-series__end-count { display: flex; flex-direction: column; align-items: center; gap: 0.5em; font-family: var(--font-sans); font-size: var(--step-small); color: var(--ink-muted); }
.hv-series__end-meter { display: block; width: 9rem; height: 3px; background: var(--rule); }
.hv-series__end-meter span { display: block; width: 0; height: 100%; background: var(--ink); }
.hv-series__end-actions, .hv-series__error-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-sm); padding-top: var(--space-xs); }
.hv-series__end-last { display: none; }
.hv-series__end[data-state="counting"] :is(.hv-series__end-next, .hv-series__end-again, .hv-series__end-all),
.hv-series__end[data-state="stopped"] :is(.hv-series__end-now, .hv-series__end-cancel, .hv-series__end-count),
.hv-series__end[data-state="last"] :is(.hv-series__end-now, .hv-series__end-cancel, .hv-series__end-next, .hv-series__end-count, .hv-series__end-label, .hv-series__end-title) { display: none; }
.hv-series__end[data-state="last"] .hv-series__end-last { display: block; }
.hv-series .hv-series__file { font-family: var(--font-sans); font-size: var(--step-small); }

/* One video on another page (D-209, a How Do I entry's Watch section): the same picture and bar under the video's
   title, no grid, nothing after it; then a line that says which video of the series it is. Without the script the
   video is a link to its file. */
.hv-series--single { margin: 0; }
.hv-series--single .hv-series__title { margin: 0 0 var(--space-sm); font-size: var(--step-h4); }
.hv-series .hv-series__fallback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin: 0; }
.hv-series .hv-series__fallback[hidden] { display: none; }
.hv-series__fallback-length { font-family: var(--font-sans); font-size: var(--step-caption); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.hv-series .hv-series__part { margin: var(--space-sm) 0 0; font-family: var(--font-sans); font-size: var(--step-small); line-height: var(--lh-normal); color: var(--ink-muted); }
.hv-series__part a { color: var(--link); text-decoration-color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.15em; white-space: nowrap; }
.hv-series__part a:hover { text-decoration-thickness: 2px; }

/* The player a Watch video tag opens over a list (D-213): the same picture and bar in a <dialog> that covers the
   window, over the page dimmed, under the video's title and Close. watch.js opens it, grows it out of the tag, and
   shrinks it back into it; the panel scales about its top left corner. The page behind is held still (hv-watching;
   watch.js pads the page by its scroll bar's width, so nothing shifts when the bar goes). The picture is as large
   as the window allows: --hv-vd-gap is the space around the panel, --hv-vd-head the title row's height with the
   gap under it. */
html.hv-watching { overflow: hidden; }
.hv-video-dialog { position: fixed; top: 0; left: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--invert-ink); }
.hv-video-dialog[open] { display: grid; align-items: center; justify-items: center; }
.hv-video-dialog::backdrop { background: transparent; }
.hv-video-dialog__scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(30, 27, 25, 0.94); }
.hv-video-dialog__panel {
  --hv-vd-gap: clamp(0.75rem, 3vw, 2rem);
  --hv-vd-head: 3.5rem;
  position: relative;
  width: min(calc(100% - 2 * var(--hv-vd-gap)), calc((100vh - 2 * var(--hv-vd-gap) - var(--hv-vd-head)) * 16 / 9), 80rem);
  width: min(calc(100% - 2 * var(--hv-vd-gap)), calc((100dvh - 2 * var(--hv-vd-gap) - var(--hv-vd-head)) * 16 / 9), 80rem);
  margin: 0;
  transform-origin: 0 0;
}
.hv-video-dialog.is-leaving .hv-video-dialog__panel { pointer-events: none; }
.hv-video-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 2.75rem; margin: 0 0 var(--space-sm); }
.hv-video-dialog .hv-series__title { margin: 0; font-size: clamp(1.0625rem, 2.4vw, 1.375rem); font-weight: 700; color: var(--invert-ink); text-wrap: balance; }
.hv-video-dialog__close { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.3em; min-width: 44px; min-height: 44px; margin: 0; padding: 0 0.55em 0 0.9em; border: var(--hairline) solid rgba(241, 236, 230, 0.5); border-radius: 2px; background: transparent; color: var(--invert-ink); font: 600 var(--step-small) / 1 var(--font-sans); cursor: pointer; }
.hv-video-dialog__close:hover { background: rgba(255, 255, 255, 0.14); }
.hv-video-dialog__close:focus-visible { outline: 2px solid #5eead4; outline-offset: 2px; } /* the teal cue, lightened for the dark ground, as on the bar */
.hv-video-dialog .hv-series__frame { width: 100%; box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.5); }
/* A phone turned sideways: the picture takes nearly all of the screen's height. */
@media (orientation: landscape) and (max-height: 32em) {
  .hv-video-dialog__panel { --hv-vd-gap: 0.375rem; --hv-vd-head: 3rem; }
  .hv-video-dialog__head { margin-bottom: var(--space-2xs); }
}

/* Full screen: the same picture, bar, and captions fill the screen. One rule per name: a browser drops a rule
   holding a name it does not know. */
.hv-series__frame:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border: 0; background: var(--invert-paper); }
.hv-series__frame:-webkit-full-screen { width: 100vw; height: 100vh; aspect-ratio: auto; border: 0; background: var(--invert-paper); }
.hv-series__frame.is-full .hv-series__video { background: var(--invert-paper); }
.hv-series__frame.is-full .hv-series__cue { font-size: clamp(1.125rem, 2.6vw, 2.75rem); }

/* A phone: two squares across; the end card keeps to two buttons (the way back is under the player). */
@media (max-width: 40em) {
  .hv-series .hv-series__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hv-series .hv-series__line-item { padding-block: 0.5em; }
  .hv-series__frame:not(.is-full) .hv-series__end-all { display: none; }
  .hv-series__frame:not(.is-full) .hv-series__end .hv-button { min-height: 44px; }
  .hv-series__end, .hv-series__error { gap: 2px; padding: var(--space-xs); }
}
/* The narrowest screens (an iPhone SE with Display Zoom, a laptop at 400% zoom): the five buttons take the row, so
   the time is put away (the seek line still shows the place), and the end card keeps to its title, its count, and
   its buttons. */
@media (max-width: 24em) {
  .hv-series .hv-series__tile { padding-inline: var(--space-xs); }
  .hv-series__time { visibility: hidden; }
  .hv-series__frame:not(.is-full) :is(.hv-series__end-label, .hv-series__end-meter) { display: none; }
}
/* A phone turned sideways with a video open: the picture takes the screen's height, and the bar that sticks to the
   top lets go, so nothing covers the picture. */
@media (orientation: landscape) and (max-height: 32em) {
  .hv-series-open:not(.hv-menu-open) .hv-masthead, .hv-series-open:not(.hv-menu-open) .hv-nav { position: static; }
  .hv-series__frame { width: min(100%, calc(100vh * 16 / 9)); }
  .hv-series__frame { width: min(100%, calc(100dvh * 16 / 9)); }
}