/* @hm/guide-presentation — neutral base + components. Apps supply identity by overriding the
   --hm-* custom properties in their theme stylesheet (loaded after this one). Mobile-first. */

:root {
  --hm-bg: #f6f6f4;
  --hm-surface: #ffffff;
  --hm-surface-2: #eeeeea;
  --hm-ink: #1c1d1f;
  --hm-ink-soft: #52555a;
  --hm-line: #d6d6d0;
  --hm-accent: #1d4ed8;
  --hm-accent-ink: #ffffff;
  --hm-accent-soft: #e3e9fb;
  --hm-highlight: #9a3412;
  --hm-ok: #22662f;
  --hm-ok-soft: #e1f0e2;
  --hm-warn: #7a4d00;
  --hm-warn-soft: #fbefd5;
  --hm-stop: #a1271b;
  --hm-stop-soft: #f8e1dd;
  --hm-focus: #1d4ed8;
  --hm-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hm-font-display: var(--hm-font-body);
  --hm-radius: 14px;
  --hm-radius-sm: 8px;
  --hm-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 14px rgb(0 0 0 / 5%);
  --hm-max: 72rem;
  --hm-gutter: 16px;
  --hm-header-h: 60px;
  --hm-tab-h: 64px;
  /* Type scale: six steps (DESIGN-AUDIT.md "Proposed tokens"). */
  --hm-text-xs: 0.8125rem;   /* 13: tags, credits, dense meta */
  --hm-text-sm: 0.9375rem;   /* 15: meta lines, intros */
  --hm-text-md: 1.0625rem;   /* 17: body, row titles */
  --hm-text-lg: 1.375rem;    /* 22: section headers */
  --hm-text-xl: 1.875rem;    /* 30: page titles */
  --hm-text-2xl: 2.5rem;     /* 40: Now masthead on wide screens */
  /* Space scale: 4px steps. */
  --hm-space-1: 4px; --hm-space-2: 8px; --hm-space-3: 12px; --hm-space-4: 16px; --hm-space-6: 24px; --hm-space-8: 32px;
  --hm-tap: 48px;            /* rows, buttons, more links */
  color-scheme: light;
}

/* ------------------------------------------------------------------ reset & base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* The phone tab bar is fixed over the bottom of the page: keep focused and scrolled-to content above it. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hm-header-h) + 12px); scroll-padding-bottom: calc(var(--hm-tab-h) + env(safe-area-inset-bottom, 0px) + 12px); }
body {
  margin: 0; background: var(--hm-bg); color: var(--hm-ink);
  font: 400 var(--hm-text-md)/1.55 var(--hm-font-body);
  padding-bottom: calc(var(--hm-tab-h) + env(safe-area-inset-bottom, 0px));
  overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
a { color: var(--hm-accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--hm-font-display); line-height: 1.15; margin: 0 0 0.5rem; letter-spacing: -0.01em; text-wrap: balance; }
h1 { font-size: var(--hm-text-xl); font-weight: 650; }
h2 { font-size: var(--hm-text-lg); font-weight: 650; }
h3 { font-size: var(--hm-text-md); font-weight: 650; font-family: var(--hm-font-body); letter-spacing: 0; }
@media (min-width: 860px) { h1 { font-size: var(--hm-text-2xl); } }
p { margin: 0 0 var(--hm-space-3); }
ul, ol { margin: 0; padding: 0; }
/* Default controls never leak (SYSTEM.md rule 10). No bullets outside prose and the legal pages'
   plain lists; no native disclosure triangle (every text disclosure draws one chevron that turns
   when open; chip-style summaries carry their own icon); checkboxes and radios take the accent. */
ul { list-style: none; }
.prose ul, .prose-page section > ul:not([class]) { list-style: disc; }
.prose ol { list-style: decimal; }
.prose-page section > ul:not([class]) { padding-left: 1.25rem; margin: 0 0 0.75rem; }
summary { display: block; list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
summary:not(.chip-link)::after { content: ""; display: inline-block; flex: none; width: 7px; height: 7px; margin: 0 2px 0 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; vertical-align: 0.2em; transform: rotate(45deg); }
details[open] > summary:not(.chip-link)::after { vertical-align: -0.05em; transform: rotate(-135deg); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--hm-accent); }
.hm-interests__toggle { display: inline-flex; align-items: center; min-height: 44px; }
time { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--hm-focus); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 8px; top: -100px; z-index: 50; background: var(--hm-ink); color: var(--hm-bg); padding: 12px 16px; border-radius: var(--hm-radius-sm); }
.skip-link:focus { top: 8px; }
.muted { color: var(--hm-ink-soft); }
.small { font-size: var(--hm-text-sm); }
.eyebrow { font-size: var(--hm-text-xs); font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-highlight); margin-bottom: 0.4rem; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.icon--sm { width: 1rem; height: 1rem; }

/* ------------------------------------------------------------------ header & navigation */
.site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--hm-bg) 92%, transparent); border-bottom: 1px solid var(--hm-line); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.site-header__inner { max-width: var(--hm-max); margin: 0 auto; padding: 0 var(--hm-gutter); min-height: var(--hm-header-h); display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--hm-ink); text-decoration: none; min-height: 44px; margin-right: auto; }
.brand__mark { display: block; width: 36px; height: 36px; flex: none; }
.brand__mark svg { width: 100%; height: 100%; display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.brand__name { font-family: var(--hm-font-display); font-weight: 700; font-size: 1.1875rem; }
.brand__name--art { display: block; line-height: 0; }
.brand__name--art svg { display: block; width: var(--hm-wordmark-width, 172px); height: auto; margin-bottom: 3px; fill: currentColor; }
.brand__edition { font-size: 0.8125rem; color: var(--hm-ink-soft); letter-spacing: 0.02em; }
.icon-button { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 999px; color: var(--hm-ink); }
.icon-button:hover, .icon-button[aria-current] { background: var(--hm-surface-2); }
.icon-button .icon { width: 1.4rem; height: 1.4rem; }
.top-nav { display: none; }

.tab-bar { position: fixed; z-index: 20; inset: auto 0 0 0; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--hm-surface); border-top: 1px solid var(--hm-line); padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -2px 12px rgb(0 0 0 / 5%); }
.tab-bar__link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--hm-tab-h); color: var(--hm-ink-soft); text-decoration: none; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.01em; }
.tab-bar__link .icon { width: 1.5rem; height: 1.5rem; }
.tab-bar__link[aria-current="page"] { color: var(--hm-accent); }
.tab-bar__link[aria-current="page"] .icon { stroke-width: 2.3; }

@media (min-width: 860px) {
  html { scroll-padding-bottom: 0; }
  body { padding-bottom: 0; }
  .tab-bar { display: none; }
  .top-nav { display: flex; gap: 4px; }
  .top-nav__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border-radius: 999px; color: var(--hm-ink); text-decoration: none; font-weight: 600; font-size: 0.9375rem; }
  .top-nav__link .icon { width: 1.1rem; height: 1.1rem; color: var(--hm-ink-soft); }
  .top-nav__link:hover { background: var(--hm-surface-2); }
  .top-nav__link[aria-current="page"] { background: var(--hm-accent-soft); color: var(--hm-accent); }
  .top-nav__link[aria-current="page"] .icon { color: currentColor; }
}

/* ------------------------------------------------------------------ page frame */
main { display: block; }
.page-body { max-width: var(--hm-max); margin: 0 auto; padding: var(--hm-space-2) var(--hm-gutter) var(--hm-space-8); }
.page-body > section, .detail-main > section { margin-top: var(--hm-space-8); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--hm-space-3); margin-bottom: var(--hm-space-2); }
.section-head h2 { margin: 0; }
.section-intro { color: var(--hm-ink-soft); font-size: var(--hm-text-sm); margin-top: calc(var(--hm-space-1) * -1); }
.more-link { display: inline-flex; align-items: center; gap: var(--hm-space-1); min-height: var(--hm-tap); font-weight: 600; font-size: var(--hm-text-sm); text-decoration: none; white-space: nowrap; }
.more-link--wrap { white-space: normal; }
.empty { color: var(--hm-ink-soft); padding: var(--hm-space-3) 0; margin: 0; }

/* ------------------------------------------------------------------ hero */
.hero { max-width: var(--hm-max); margin: 0 auto; padding: 20px var(--hm-gutter) 8px; display: grid; gap: 16px; }
.hero__title { font-size: clamp(2.5rem, 12vw, 4.5rem); font-weight: 700; letter-spacing: -0.025em; margin-bottom: 0.4rem; }
.hero__lede { font-size: 1.1875rem; color: var(--hm-ink-soft); max-width: 36ch; }
.hero__meta { color: var(--hm-ink-soft); font-size: 0.9375rem; }
.hero__art { color: var(--hm-accent); order: 2; margin: 0 calc(var(--hm-gutter) * -1); }
.hero__art svg { width: 100%; height: 132px; display: block; }
@media (min-width: 600px) { .hero__art { margin: 0; } .hero__art svg { height: auto; } }
.hero--type { padding-top: 32px; }
.hero--type .hero__text { border-left: 4px solid var(--hm-highlight); padding-left: 16px; }
/* Figures: the <picture> box takes the crop (aspect ratio + radius from --photo-ratio/--photo-radius);
   the caption and credit sit below it as real text next to the image. Compact figures (cards) show
   the credit as a badge over the image. */
.photo { margin: 0; position: relative; }
.photo picture, .photo__link { display: block; position: relative; overflow: hidden; aspect-ratio: var(--photo-ratio, auto); border-radius: var(--photo-radius, var(--hm-radius)); background: var(--hm-surface-2); }
.photo__link picture { border-radius: 0; height: 100%; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo__caption { margin-top: 6px; font-size: 0.875rem; line-height: 1.4; color: var(--hm-ink-soft); }
.photo__caption .photo__credit { display: block; font-size: 0.8125rem; }
.photo__badge .photo__credit a { color: inherit; text-decoration: underline; }
/* In-body images: an optional short display caption, one line, above the one-line credit (two lines at most). */
.photo__badge .photo__text { display: block; margin-top: 6px; font-size: var(--hm-text-sm); color: var(--hm-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo__caption .photo__title { display: block; font-weight: 650; color: var(--hm-ink); }
.photo__caption .photo__date { display: block; font-size: 0.8125rem; }
.photo__badge .photo__credit { position: absolute; right: 8px; bottom: 8px; font-size: 0.6875rem; line-height: 1.3; color: #fff; background: rgb(0 0 0 / 62%); padding: 3px 8px; border-radius: 999px; max-width: calc(100% - 16px); }
.focus-top img { object-position: center top; }
.focus-bottom img { object-position: center bottom; }
.focus-left img { object-position: left center; }
.focus-right img { object-position: right center; }
.hero__photo { --photo-ratio: 4 / 3; --photo-radius: 0; margin: 0 calc(var(--hm-gutter) * -1); }
.hero__photo .photo__caption { padding: 0 var(--hm-gutter); }
@media (min-width: 600px) { .hero__photo { margin: 0; --photo-radius: var(--hm-radius); --photo-ratio: 16 / 9; } .hero__photo .photo__caption { padding: 0; } }
@media (min-width: 860px) {
  .hero { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 40px; padding-top: 40px; }
  .hero--type { grid-template-columns: 1fr; }
  .hero__art, .hero__photo { order: 2; }
  .hero__photo { --photo-ratio: 4 / 3; }
}
.page-head { max-width: var(--hm-max); margin: 0 auto; padding: var(--hm-space-6) var(--hm-gutter) var(--hm-space-1); display: grid; gap: var(--hm-space-4); }
.page-head h1 { margin-bottom: var(--hm-space-1); }
.page-head__intro { color: var(--hm-ink-soft); font-size: var(--hm-text-sm); max-width: 48ch; margin-bottom: var(--hm-space-2); }
.page-head__photo { --photo-ratio: 21 / 9; }
@media (min-width: 860px) { .page-head--photo { grid-template-columns: 1fr 1fr; align-items: end; } .page-head__photo { order: 2; } }

/* ------------------------------------------------------------------ Now layout */
.now-grid { display: grid; gap: var(--hm-space-2); }
.now-section { margin-top: var(--hm-space-6); }
.now-main > .now-section:first-child { margin-top: var(--hm-space-2); }
.evergreen { border-top: 1px solid var(--hm-line); padding-top: var(--hm-space-6); }
.evergreen > ul + ul, .evergreen > figure + ul { margin-top: var(--hm-space-3); }
/* Now masthead: date, "Today in <community>", one weather line, one alert strip. */
.masthead { max-width: var(--hm-max); margin: 0 auto; padding: var(--hm-space-4) var(--hm-gutter) 0; }
.masthead .eyebrow { margin-bottom: var(--hm-space-1); }
.masthead__title { font-size: var(--hm-text-xl); line-height: 1.1; margin: 0; }
@media (min-width: 860px) { .masthead__title { font-size: var(--hm-text-2xl); } }
.wx-line { display: flex; align-items: flex-start; gap: var(--hm-space-2); margin-top: var(--hm-space-2); color: var(--hm-ink-soft); font-size: var(--hm-text-sm); }
.wx-line__icon { width: 1.25rem; height: 1.25rem; margin-top: 1px; color: var(--hm-accent); }
.wx-line__text { margin: 0; }
.wx-line__period:first-child, .wx-line__period:not([hidden]) { color: var(--hm-ink); }
.wx-line__period:not([hidden]) ~ .wx-line__period:not([hidden])::before { content: " · "; color: var(--hm-ink-soft); }
.wx-line__more { white-space: nowrap; }
.wx-line__period:not([hidden]) ~ .wx-line__more::before { content: "· "; color: var(--hm-ink-soft); }
/* Status strip (pages/status-strip.mjs; data-fixes 4b): one compact line under the date, the core
   of the later "today band". Serious alerts as linked rows, then the all-clear and notice line. */
.status-strip { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--hm-space-3); margin-top: var(--hm-space-3); padding: var(--hm-space-1) var(--hm-space-3); border-radius: var(--hm-radius-sm); background: var(--tone-bg, var(--hm-surface-2)); color: var(--tone-ink, var(--hm-ink)); font-size: var(--hm-text-sm); line-height: 1.45; }
.status-strip__alerts { list-style: none; margin: 0; padding: 0; flex: 1 1 100%; min-width: 0; }
.status-strip__alerts li { padding: var(--hm-space-1) 0 0; }
.status-strip__sev { font-weight: 700; }
.status-strip__until { color: inherit; }
.status-strip__text { margin: 0; padding: var(--hm-space-2) 0; flex: 1 1 14rem; min-width: 0; }
.status-strip__sep { color: var(--hm-ink-soft); }
.status-strip__checked { color: var(--hm-ink-soft); white-space: nowrap; }
.status-strip a { color: inherit; font-weight: 600; display: inline-flex; align-items: center; min-height: 44px; }
.status-strip__more { white-space: nowrap; }
.now-photo { --photo-ratio: 16 / 9; }
@media (min-width: 860px) { .now-photo { max-width: 40rem; } }
@media (min-width: 860px) {
  .now-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); column-gap: 40px; }
  .evergreen { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ list rows (ListRow + ListGroup)
   One row for events, places, updates and offers (components.mjs listRow). The title link is the
   only interactive element and is stretched over the row; the chevron is a pseudo-element. A list
   is a bordered group with hairlines between visible rows; hidden rows (runtime buckets) never
   leave a double rule, and a list with no visible row draws nothing. */
.event-list, .place-list, .update-list, .guide-list, .offer-list, .link-list, .tier-list { list-style: none; }
.event-list, .place-list, .update-list, .offer-list { display: grid; background: var(--hm-surface); border: 1px solid var(--hm-line); border-radius: var(--hm-radius); overflow: hidden; }
.event-list:not(:has(> li:not([hidden]))), .place-list:not(:has(> li:not([hidden]))), .update-list:not(:has(> li:not([hidden]))), .offer-list:not(:has(> li:not([hidden]))) { display: none; }
.row { position: relative; display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 10px; column-gap: var(--hm-space-3); align-items: start; min-height: 64px; padding: var(--hm-space-3) var(--hm-space-4); border-top: 1px solid var(--hm-line); margin-top: -1px; }
.row--nolead { grid-template-columns: minmax(0, 1fr) 10px; }
.row::after { content: ""; align-self: center; width: 8px; height: 8px; border-right: 2px solid var(--hm-ink-soft); border-bottom: 2px solid var(--hm-ink-soft); transform: rotate(-45deg); }
.row:hover { background: color-mix(in srgb, var(--hm-accent-soft) 40%, var(--hm-surface)); }
.row__lead { margin: 0; padding-top: 1px; font-size: var(--hm-text-sm); font-weight: 700; line-height: 1.25; font-variant-numeric: tabular-nums; }
.row__lead > span, .row__lead small { display: block; }
.row__lead small { font-size: var(--hm-text-xs); font-weight: 500; color: var(--hm-ink-soft); }
.row__lead--date { display: grid; justify-items: center; align-content: start; width: 3.5rem; padding: 6px 0 7px; border-radius: 10px; background: var(--hm-accent-soft); line-height: 1; font-weight: 600; }
.row__mon { font-size: var(--hm-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-highlight); }
.row__day { font-family: var(--hm-font-display); font-size: var(--hm-text-lg); font-weight: 700; margin: 3px 0 2px; }
.row__dow { font-size: var(--hm-text-xs); color: var(--hm-ink-soft); }
.row__body { min-width: 0; }
.row__title { margin: 0; font-size: var(--hm-text-md); line-height: 1.3; }
.row__title a { color: var(--hm-ink); text-decoration: none; }
.row__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.row__title a:focus-visible { outline: none; }
.row:has(.row__title a:focus-visible) { outline: 3px solid var(--hm-focus); outline-offset: -3px; border-radius: var(--hm-radius-sm); }
.row__meta { margin: 2px 0 0; font-size: var(--hm-text-sm); color: var(--hm-ink-soft); }
.row__tags { margin: var(--hm-space-1) 0 0; display: flex; flex-wrap: wrap; gap: var(--hm-space-1); }
.row__tags:not(:has(:not([hidden]))) { display: none; }
/* A place row with posted hours gets its open/closed tag from the runtime: keep its line reserved so
   the row does not grow when the tag appears (no layout shift). */
.row[data-hours] .row__tags { display: flex; min-height: 24px; }
/* At most one tag: a visible runtime tag (Ended, open now) wins over the build-time one. */
.row__tags:has(> [data-ended-label]:not([hidden])) > :not([data-ended-label]),
.row__tags:has(> [data-open-badge]:not([hidden])) > :not([data-open-badge]) { display: none; }
.row.is-canceled .row__title a { text-decoration: line-through; text-decoration-thickness: 1px; }
.dist { font-variant-numeric: tabular-nums; }
.cost--free { color: var(--hm-ok); font-weight: 600; }
.cost--unknown { font-style: italic; }
[data-current-list] [data-expired] { display: none; }
.event-list + .empty, .place-list + .empty { margin-top: 0; }

.day-group { margin-top: var(--hm-space-6); }
.day-group__title { font-size: var(--hm-text-sm); font-family: var(--hm-font-body); font-weight: 700; letter-spacing: 0; color: var(--hm-ink); margin-bottom: var(--hm-space-2); }

.guide-list { display: grid; gap: var(--hm-space-3); align-items: start; }
@media (min-width: 600px) { .guide-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide-card { background: var(--hm-accent-soft); border-radius: var(--hm-radius); overflow: hidden; position: relative; }
.guide-card__photo { --photo-ratio: 16 / 9; --photo-radius: 0; }
.guide-card__body { padding: 16px; }
.guide-card__body p:last-child { margin: 0; color: var(--hm-ink-soft); }
.guide-card__title { font-family: var(--hm-font-display); font-size: var(--hm-text-lg); }
.guide-card__title a { color: var(--hm-ink); text-decoration: none; }
.guide-card__title a::after { content: ""; position: absolute; inset: 0; }
.guide-card__title a:focus-visible { outline: none; }
.guide-card:has(a:focus-visible) { outline: 3px solid var(--hm-focus); outline-offset: 2px; }

.link-list { display: grid; gap: 2px; }
.link-list a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 600px) { .link-list--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } }

/* ------------------------------------------------------------------ chips, badges, filters */
/* Tag: one pill shape, sentence case, words always present; tone only adds to the words. */
.chip { display: inline-flex; align-items: center; gap: var(--hm-space-1); font-size: var(--hm-text-xs); font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--hm-surface-2); color: var(--hm-ink); }
.chip--accent { background: var(--hm-accent-soft); color: var(--hm-accent); }
.chip--canceled { background: var(--hm-stop-soft); color: var(--hm-stop); }
.chip--postponed, .chip--tentative { background: var(--hm-warn-soft); color: var(--hm-warn); }
.chip--coming { background: var(--hm-warn-soft); color: var(--hm-warn); }
.chip--ended { background: var(--hm-surface-2); color: var(--hm-ink-soft); }
.chip--feed { text-transform: none; letter-spacing: 0; font-weight: 600; border-radius: 8px; }
.open-badge { display: inline-flex; align-items: center; gap: 6px; font-size: var(--hm-text-xs); font-weight: 600; color: var(--hm-ink-soft); }
.row__tags .open-badge--open { background: var(--hm-ok-soft); padding: 2px 8px; border-radius: 999px; }
.open-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.open-badge--open { color: var(--hm-ok); }
.open-badge--open::before { opacity: 1; box-shadow: 0 0 0 3px var(--hm-ok-soft); }
.stage { display: inline-block; font-size: var(--hm-text-xs); font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--hm-accent-soft); color: var(--hm-accent); }
.stage--proposed, .stage--hearing-scheduled, .stage--under-review { background: var(--hm-warn-soft); color: var(--hm-warn); }
.stage--completed, .stage--adopted, .stage--approved { background: var(--hm-ok-soft); color: var(--hm-ok); }
.stage--stopped { background: var(--hm-stop-soft); color: var(--hm-stop); }

.filters { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 8px 0 4px; }
.filters > * { min-width: 0; }
.chips ul { list-style: none; display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px var(--hm-gutter); margin: 0 calc(var(--hm-gutter) * -1); scrollbar-width: none; }
.chips ul::-webkit-scrollbar { display: none; }
.chips li { flex: none; scroll-snap-align: start; }
.chip-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--hm-space-4); border-radius: 999px; border: 1px solid var(--hm-line); background: var(--hm-surface); color: var(--hm-ink); text-decoration: none; font-weight: 600; font-size: var(--hm-text-sm); white-space: nowrap; }
.chip-link:hover { border-color: var(--hm-accent); }
.chip-link[aria-current] { background: var(--hm-ink); border-color: var(--hm-ink); color: var(--hm-bg); }
.chip-link__count { font-size: 0.8125rem; font-weight: 500; opacity: 0.75; }
@media (min-width: 860px) { .chips ul { flex-wrap: wrap; overflow: visible; margin: 0; padding: 4px 0; } }
/* FilterBar: "When" as the one visible row, everything else in a "Filters" disclosure (no JS needed). */
.filterbar { position: relative; display: flex; align-items: center; gap: var(--hm-space-2); margin: var(--hm-space-2) 0 var(--hm-space-1); }
.filterbar > .chips { flex: 1 1 auto; min-width: 0; }
.filterbar .chips ul { margin-right: 0; padding-right: 0; }
.filterbar { gap: 6px; }
.filterbar .chips ul { gap: 6px; }
.filterbar .chip-link { padding: 0 11px; }
@media (max-width: 419px) { .filter-panel__summary .icon { display: none; } }
.filter-panel { flex: none; }
.filter-panel__summary { display: inline-flex; }
.filter-panel[open] > .filter-panel__summary { background: var(--hm-surface-2); }
/* The open panel drops down over the list (no layout shift), full width of the bar. */
.filter-panel__body { position: absolute; z-index: 5; left: calc(var(--hm-gutter) * -1); right: calc(var(--hm-gutter) * -1); top: calc(100% + var(--hm-space-1)); display: grid; gap: var(--hm-space-2); padding: var(--hm-space-3) var(--hm-gutter); background: var(--hm-bg); border-top: 1px solid var(--hm-line); border-bottom: 1px solid var(--hm-line); box-shadow: 0 8px 18px rgb(0 0 0 / 12%); }
@media (min-width: 860px) { .filter-panel__body { left: 0; right: 0; border: 1px solid var(--hm-line); border-radius: var(--hm-radius); } }
.filter-panel__body .chips::before { content: attr(aria-label); display: block; font-size: var(--hm-text-xs); font-weight: 700; color: var(--hm-ink-soft); }
.events-more { margin-top: var(--hm-space-6); }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.results-count { margin: 0 0 var(--hm-space-2); color: var(--hm-ink-soft); font-size: var(--hm-text-sm); }
.results-note { margin: 0 0 var(--hm-space-2); color: var(--hm-ink-soft); font-size: var(--hm-text-sm); }
.now-section__range { margin: 0 0 var(--hm-space-2); color: var(--hm-ink-soft); font-size: var(--hm-text-sm); }
.empty-state { text-align: center; padding: 32px 16px; background: var(--hm-surface); border-radius: var(--hm-radius); margin-top: 16px; }
.canceled-note { border-top: 1px solid var(--hm-line); padding-top: 1rem; }
.canceled-note h2 { font-size: 1.125rem; }
.jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.jump a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--hm-surface); border: 1px solid var(--hm-line); text-decoration: none; font-weight: 600; color: var(--hm-ink); }

/* ------------------------------------------------------------------ actions */
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.actions:not(:has(*)) { display: none; }
.action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--hm-line); background: var(--hm-surface); color: var(--hm-ink); font-weight: 650; text-decoration: none; }
.action:hover { border-color: var(--hm-accent); color: var(--hm-accent); }
.action--primary { background: var(--hm-accent); border-color: var(--hm-accent); color: var(--hm-accent-ink); }
.action--primary:hover { color: var(--hm-accent-ink); filter: brightness(1.08); }
.action--text { border-style: dashed; color: var(--hm-ink-soft); font-weight: 500; }
.action--quiet { min-height: 44px; padding: 0 14px; font-size: 0.9375rem; }
.actions--place { max-width: var(--hm-max); }
/* Place actions: one row of equal pills on phones (Directions primary, Call, Website; extras wrap). */
@media (max-width: 599px) {
  .actions--place .action { flex: 1 1 auto; gap: 6px; padding: 0 14px; font-size: 0.9375rem; white-space: nowrap; }
  .actions--place .action > span { overflow-wrap: normal; }
}

/* ------------------------------------------------------------------ detail pages */
.detail { max-width: var(--hm-max); margin: 0 auto; }
.detail > .detail-head, .detail > .notice, .detail > .actions, .detail > .detail-grid:not(.page-body), .detail > .detail-photo, .detail > .place-lead { margin-left: var(--hm-gutter); margin-right: var(--hm-gutter); }
.detail-head { padding-top: 20px; }
.detail-head h1 { font-size: clamp(1.875rem, 8vw, 2.75rem); }
.detail-head__when { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.25rem; }
.detail-head__flags { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }
.detail-head__flags:empty { display: none; }
.breadcrumb { font-size: 0.9375rem; color: var(--hm-ink-soft); margin-bottom: 0.5rem; }
.breadcrumb a { display: inline-block; padding: 10px 0; margin: -10px 0; }
.detail-photo { --photo-ratio: 16 / 9; margin-top: 12px; }
/* Place pages: facts first, then a 3:2 photo; on wide screens the photo sits beside the head. */
.detail-head__addr { margin: var(--hm-space-1) 0 0; }
/* The open badge is filled in by the runtime: its line keeps its height so nothing below moves. */
.detail--place .detail-head__flags { min-height: 1.75rem; }
.detail-head__where { margin: var(--hm-space-1) 0 0; font-size: var(--hm-text-sm); }
.place-lead .detail-photo { --photo-ratio: 3 / 2; margin: 0 0 16px; }
@media (min-width: 960px) {
  .place-lead--photo { display: grid; grid-template-columns: minmax(0, 1fr) 30rem; gap: 48px; align-items: start; }
  .place-lead--photo .detail-photo { margin-top: 20px; }
}
.photo-grid, .gallery { display: grid; gap: 20px; list-style: none; padding: 0; margin: 12px 0 0; }
.photo-grid__item, .gallery .photo { --photo-ratio: 3 / 2; }
.gallery__item { min-width: 0; }
.gallery__subjects { margin: 4px 0 0; font-size: 0.9375rem; }
.gallery__subjects a { display: inline-block; padding: 8px 0; }
@media (min-width: 600px) { .photo-grid, .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.detail-grid { display: grid; gap: 24px; padding-bottom: 48px; }
.detail-main { min-width: 0; }
@media (min-width: 960px) { .detail-grid { grid-template-columns: minmax(0, 1fr) 20rem; gap: 48px; } .detail-side { padding-top: 16px; } }
.facts { margin: 16px 0; display: grid; border-top: 1px solid var(--hm-line); }
.facts__row { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--hm-line); }
.facts dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--hm-ink-soft); }
.facts dd { margin: 0; }
@media (min-width: 600px) { .facts__row { grid-template-columns: 10rem minmax(0, 1fr); gap: 16px; } .facts dt { padding-top: 3px; } }
.notice { border-radius: var(--hm-radius-sm); padding: 12px 14px; background: var(--hm-surface-2); margin: 12px 0; font-weight: 500; }
.notice--warn { background: var(--hm-warn-soft); color: var(--hm-warn); }
.notice--stop { background: var(--hm-stop-soft); color: var(--hm-stop); font-weight: 650; }
.notice--quiet { background: var(--hm-surface-2); color: var(--hm-ink); }
.offer-expired { display: none; }
[data-expired] .offer-expired { display: block; }
.offer[data-expired] { opacity: 0.65; }
/* Places hub: search entry, category tiles. */
.search-link-wrap { margin: var(--hm-space-2) 0 0; }
.search-link { display: flex; align-items: center; gap: var(--hm-space-2); min-height: var(--hm-tap); padding: 0 var(--hm-space-4); border-radius: 999px; border: 1.5px solid var(--hm-line); background: var(--hm-surface); color: var(--hm-ink-soft); text-decoration: none; font-size: var(--hm-text-md); }
.search-link:hover { border-color: var(--hm-accent); }
.tiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: var(--hm-space-2); }
.tile { display: flex; flex-direction: column; justify-content: space-between; gap: var(--hm-space-1); min-height: 72px; height: 100%; padding: var(--hm-space-3); border-radius: var(--hm-radius-sm); border: 1px solid var(--hm-line); background: var(--hm-surface); color: var(--hm-ink); text-decoration: none; }
.tile:hover { border-color: var(--hm-accent); }
.tile__title { font-weight: 650; }
.tile__meta { font-size: var(--hm-text-xs); color: var(--hm-ink-soft); }
.prose { max-width: 65ch; margin-top: 16px; }
.prose ul, .prose ol { padding-left: 1.25rem; margin: 0 0 0.75rem; }
.prose li { margin: 0 0 0.35rem; }
.prose li > p { margin: 0; }
.prose h3 { font-size: 1.125rem; margin-top: 1.25rem; }
/* Markdown tables in record bodies (e.g. a guide's facts table): scroll sideways inside the column on
   a narrow screen instead of widening the page; numbers line up. */
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--hm-line); }
.prose thead th { font-weight: 650; border-bottom-width: 2px; }
/* External link whose URL the static renderer dropped: plain text, no link affordance. */
.doc-link-inert { color: inherit; text-decoration: none; cursor: auto; }
.next-steps { margin: 20px 0 8px; }
.next-steps__title { font-size: 0.8125rem; font-family: var(--hm-font-body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--hm-ink-soft); margin-bottom: 0; }
.next-steps .actions { margin-top: 10px; }
.action > span { overflow-wrap: anywhere; }
.show-more { display: flex; justify-content: center; margin: 20px 0 8px; }
.show-more__button { font: inherit; font-weight: 650; cursor: pointer; min-width: 12rem; }
.prose h2 { font-size: 1.3125rem; margin-top: 1.5rem; }
/* Long-form section heads (guides, articles): sentence case as written, display serif, ink. Never
   uppercased: headings are a person's words (SYSTEM.md rule 11; style guide section 3). */
.prose--guide h2, .prose--longform h2 { color: var(--hm-ink); font-family: var(--hm-font-display); font-size: 1.4375rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; text-transform: none; margin-top: 2rem; }
.prose--longform h3 { font-size: 1.125rem; text-transform: none; letter-spacing: 0; }
/* Event and series head: the lede under the when-line, and the essentials block (where, by, cost). */
.detail-head__lede { margin: var(--hm-space-2) 0 0; font-size: 1.0625rem; color: var(--hm-ink); max-width: 40rem; }
.event-essentials { margin: var(--hm-space-4) 0 0; }
.event-essentials p { margin: 0 0 var(--hm-space-2); }
.event-essentials p:last-child { margin-bottom: 0; }
.prose-page { max-width: 46rem; }
.prose-page section { margin-top: 2rem; }
.plain { background: var(--hm-accent-soft); border-radius: var(--hm-radius); padding: 16px; margin-top: 16px; }
.plain h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--hm-font-body); color: var(--hm-accent); }
.plain p { font-size: 1.125rem; margin: 0; }

.hours-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours-table th, .hours-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--hm-line); vertical-align: top; }
.hours-table th { font-weight: 600; width: 9.5rem; white-space: nowrap; }
.hours-table tr.is-today { background: var(--hm-accent-soft); }
.hours-table tr.is-today th::after { content: "Today"; margin-left: 8px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--hm-accent-ink); background: var(--hm-accent); padding: 2px 6px; border-radius: 999px; vertical-align: 2px; }
.hours__note { margin-top: 8px; color: var(--hm-ink-soft); font-size: 0.9375rem; }


.timeline { list-style: none; margin: 8px 0 16px; padding: 0; }
.timeline__step { position: relative; padding: 0 0 18px 30px; display: grid; }
.timeline__step::before { content: ""; position: absolute; left: 6px; top: 6px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--hm-line); background: var(--hm-bg); }
.timeline__step::after { content: ""; position: absolute; left: 11px; top: 22px; bottom: 0; width: 2px; background: var(--hm-line); }
.timeline__step:last-child::after { display: none; }
.timeline__label { font-weight: 600; }
.timeline__date { font-size: 0.875rem; color: var(--hm-ink-soft); }
.timeline__step.is-past .timeline__label { color: var(--hm-ink-soft); font-weight: 500; }
.timeline__step.is-past::before { background: var(--hm-line); }
.timeline__step.is-current::before { border-color: var(--hm-accent); background: var(--hm-accent); box-shadow: 0 0 0 4px var(--hm-accent-soft); }
.timeline__step.is-current .timeline__label { color: var(--hm-accent); }
.timeline__step.is-future .timeline__label { color: var(--hm-ink-soft); font-weight: 500; }

/* ------------------------------------------------------------------ trust (sources list: see "reader-facing system") */
.trust { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 0.875rem; padding: 4px 10px 4px 8px; border-radius: 999px; }
.trust .icon { width: 1rem; height: 1rem; }
.trust--human { background: var(--hm-ok-soft); color: var(--hm-ok); }
.trust--machine { background: var(--hm-accent-soft); color: var(--hm-accent); }
.trust--unverified { background: var(--hm-surface-2); color: var(--hm-ink); }
.tier-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 16px; }

/* ------------------------------------------------------------------ sponsorship */
.sponsor { border: 1px dashed color-mix(in srgb, var(--hm-ink) 35%, transparent); border-radius: var(--hm-radius); padding: 12px 16px; margin: 16px 0; background: var(--hm-surface); }
.sponsor__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hm-ink-soft); margin-bottom: 4px; }
.sponsor__text { margin-bottom: 4px; }
.sponsor__disclosure { font-size: 0.875rem; color: var(--hm-ink-soft); }
.sponsor__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ------------------------------------------------------------------ articles */
.article-head__dek { font-size: var(--hm-text-md); color: var(--hm-ink-soft); max-width: 65ch; margin: var(--hm-space-1) 0 0; }
/* The article page (articles round 3, docs/design/articles/round-3/SPEC.md §2, §3). One reading
   column at 17 px on a 640 px measure; on desktop the section names stand in a rail to the left and
   a dated issue's glance in a sticky column to the right. Tokens only; the --art-* knobs are the
   theme's to override. Sizes are px per SPEC §3. The runtime (peek module) only adds state: every
   reservation it fills (link dots, the glance legend, the now line) has its space here, so nothing
   moves when it runs and nothing is drawn without it. */
.article, .peek {
  --art-measure: 640px;
  --art-rail: 170px;
  --art-rail-gap: 48px;
  --art-side: 300px;
  --art-side-gap: 64px;
  --art-now: var(--hm-highlight);
  --art-font-display: var(--hm-font-display);
  --art-font-body: var(--hm-font-body);
}
.article { max-width: var(--hm-max, 78rem); margin: 0 auto; padding: 0 var(--hm-gutter, 16px) 56px; }
.article a { color: var(--hm-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--hm-accent) 45%, transparent); }
.article a:hover { text-decoration-color: currentColor; }
.art-head { padding: 36px 0 22px; border-bottom: 1px solid var(--hm-ink); margin-bottom: 8px; }
.art-eyebrow { font: 600 13px/1.4 var(--art-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--hm-highlight); margin: 0 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.article .art-eyebrow a { color: inherit; text-decoration: none; }
.article .art-eyebrow a:hover { text-decoration: underline; }
.art-title { font: 500 40px/1.04 var(--art-font-display); letter-spacing: -.03em; margin: 0 0 16px; max-width: 18ch; text-wrap: balance; color: var(--hm-ink); }
.art-dek { font: 400 20px/1.3 var(--art-font-display); letter-spacing: -.01em; color: var(--hm-ink); max-width: 34ch; margin: 0 0 16px; text-wrap: pretty; }
.art-meta { font: 400 14px/1.5 var(--art-font-body); color: var(--hm-ink-soft); margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.art-meta time { color: var(--hm-ink); }
.art-flags { margin: 12px 0 0; }
.art-grid > .notice { max-width: var(--art-measure); margin: 16px 0; }
/* The evergreen now line: space reserved, invisible until the runtime writes a true sentence. */
.now-line { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; font: 400 15px/1.5 var(--art-font-body); color: var(--hm-ink-soft); min-height: 1.5em; visibility: hidden; }
.now-line[data-ready] { visibility: visible; }
.now-line__dot { width: .5em; height: .5em; border-radius: 50%; background: color-mix(in srgb, var(--hm-ink-soft) 45%, transparent); flex: none; align-self: center; }
.now-line[data-open] .now-line__dot { background: var(--hm-ok); box-shadow: 0 0 0 3px var(--hm-ok-soft); }
.now-line strong { color: var(--hm-ink); font-weight: 600; }
.now-line__when { white-space: nowrap; }
/* The space is the widest sentence the line can say (the build's data-size-*), drawn invisibly in
   the same grid cell as the live words: as tall as the longest count and clock in the reader's own
   fonts, with or without JavaScript, so writing the sentence never moves the lede (MAGIC 8). */
.now-line__body { display: grid; min-width: 0; }
.now-line__body > [data-now-line-text], .now-line__body::before, .now-line__body::after { grid-area: 1 / 1; }
.now-line__body::before, .now-line__body::after { visibility: hidden; font-weight: 600; }
.now-line__body::before { content: attr(data-size-count) " \00b7\00a0" attr(data-size-when); }
.now-line__body::after { content: attr(data-size-count) " \00b7\00a0" attr(data-size-when-alt); }

/* The reading column. */
.art-body { font: 400 17px/1.62 var(--art-font-body); max-width: var(--art-measure); color: var(--hm-ink); }
.art-body p { margin: 0 0 1.1em; text-wrap: pretty; }
.art-body p strong { font-weight: 650; color: var(--hm-ink); }
.art-body .lede { font-size: 19px; line-height: 1.5; }
.art-body .item { margin-bottom: 1.25em; }
.art-body ul, .art-body ol { list-style: disc; padding-left: 1.25em; margin: 0 0 1.1em; }
.art-body ol { list-style: decimal; }
.art-body h2 { font: 500 28px/1.15 var(--art-font-display); letter-spacing: -.025em; margin: 36px 0 14px; color: var(--hm-ink); text-transform: none; }
.art-body h2 small { display: block; font: 600 13px/1.4 var(--art-font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--hm-ink-soft); margin-bottom: 6px; }
.art-body h3 { font: 600 19px/1.3 var(--art-font-body); margin: 28px 0 8px; color: var(--hm-ink); text-transform: none; letter-spacing: 0; }
.day { padding-top: 4px; }
.day__body > p:first-child { margin-top: 0; }
/* Live links reserve their half-em dot before any script runs; nothing is drawn until a state is known. */
.article a[data-live]::before { content: ""; display: inline-block; width: .5em; height: .5em; border-radius: 50%; margin-right: .32em; vertical-align: .08em; visibility: hidden; background: transparent; }
.article a[data-live][data-live-state]::before { visibility: visible; }
.article .art-body a[rel~="noopener"]::after { content: " ↗"; font-size: .8em; color: var(--hm-ink-soft); }

/* The glance: one row per pick, one link per row. */
.glance { margin: 20px 0 8px; }
.glance h2 { font: 500 22px/1.2 var(--art-font-display); letter-spacing: -.02em; margin: 0 0 2px; color: var(--hm-ink); text-transform: none; }
.glance__key { font: 400 13px/1.4 var(--art-font-body); color: var(--hm-ink-soft); margin: 0 0 8px; visibility: hidden; }
/* The legend changes with the clock (one line or two); where it can take two its space is kept, so a change moves nothing. */
@media (max-width: 639px), (min-width: 1180px) { .glance__key { min-height: 2lh; } }
.peek-live-ready .glance__key { visibility: visible; }
.glance__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hm-line); }
.glance__list li { border-bottom: 1px solid var(--hm-line); }
.article .glance__list a { display: flex; gap: 12px; align-items: flex-start; min-height: 48px; padding: 9px 0; color: var(--hm-ink); text-decoration: none; }
.article .glance__list a:hover .glance__title { color: var(--hm-accent); text-decoration: underline; }
.glance__day { flex: none; width: 36px; text-align: center; font: 400 21px/1 var(--art-font-display); color: var(--hm-accent); padding-top: 2px; }
.glance__day small { display: block; font: 600 10px/1.2 var(--art-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--hm-ink-soft); margin-bottom: 3px; }
.glance__text { display: grid; gap: 1px; min-width: 0; }
.glance__title { font: 500 16px/1.35 var(--art-font-body); }
.glance__meta { font: 400 14px/1.4 var(--art-font-body); color: var(--hm-ink-soft); }
.article .glance__list a[data-live]::before { margin-top: 10px; align-self: flex-start; flex: none; }
.article .glance__cal a { color: var(--hm-accent); font: 600 15px/1.35 var(--art-font-body); min-height: 44px; align-items: center; }
.article .glance__cal a::after { content: "→"; margin-left: auto; }

/* After the body: the sponsor, then the ending. */
.article .sponsor--article { border: 1px solid var(--hm-line); border-radius: 4px; background: var(--hm-surface-2); padding: 14px 18px; margin: 36px 0 0; max-width: var(--art-measure); }
.article .sponsor__label { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--hm-ink-soft); margin: 0 0 6px; }
.article .sponsor__text { font-size: 15px; line-height: 1.5; margin: 0 0 4px; }
.article .sponsor__disclosure { font-size: 13px; color: var(--hm-ink-soft); margin: 0; }
.article .sponsor__link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; }
.art-end { max-width: var(--art-measure); border-top: 1px solid var(--hm-ink); margin-top: 40px; padding-top: 8px; }
.art-end h2 { font: 500 23px/1.2 var(--art-font-display); letter-spacing: -.015em; margin: 28px 0 8px; color: var(--hm-ink); text-transform: none; }
.cal-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 22px 0 6px; }
.cal-cta p { margin: 0; font-size: 15px; color: var(--hm-ink-soft); max-width: 36ch; }
/* "Also mentioned" is a compact list (SPEC §4.6): quieter than the article's own ending. */
.link-list--compact { list-style: none; margin: 0; padding: 0; }
/* Every row carries the same air, one line or two (round-5 P2-7): 4 px above and below, no minimum height (6 px would push the block past its 320 px budget at 390). */
.article .art-mentioned .link-list--compact a { display: flex; align-items: center; min-height: 0; padding: 4px 0; color: var(--hm-accent); text-decoration: none; font: 400 15px/1.4 var(--art-font-body); }
.article .art-mentioned .link-list--compact a:hover { text-decoration: underline; }
.article .read-next .article-row__link { text-decoration: none; }
.art-follow { display: flex; gap: 12px 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--hm-line); border-radius: 4px; padding: 18px 20px; margin: 28px 0 0; background: var(--hm-surface); }
.art-follow p { margin: 0; font-size: 16px; color: var(--hm-ink-soft); }
.art-follow p strong { font: 500 20px/1.3 var(--art-font-display); letter-spacing: -.015em; display: block; margin-bottom: 2px; color: var(--hm-ink); }
.article .art-follow .action { text-decoration: none; }
.art-end .sources-list { margin-top: 32px; }
.art-end .sources-list h2 { font: 600 13px/1.4 var(--art-font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--hm-ink-soft); margin: 0 0 6px; }
.article .sources-list a { text-decoration: none; }

@media (max-width: 859px) {
  .article { padding-bottom: calc(var(--hm-tab-h, 60px) + 40px); }
}
/* On a phone the now line's sentence takes two lines; its reserved space does too, so filling it moves nothing. */
@media (max-width: 639px) {
  .now-line { min-height: 3em; }
  .now-line__when { display: block; }
  .now-line__sep { display: none; }
  .now-line__body::before { content: attr(data-size-count) "\A" attr(data-size-when); white-space: pre-line; }
  .now-line__body::after { content: attr(data-size-count) "\A" attr(data-size-when-alt); white-space: pre-line; }
  .now-line__dot { align-self: flex-start; margin-top: .5em; } /* level with the sentence, not between its two lines */
}
@media (min-width: 860px) {
  .art-head { padding-top: 56px; }
  .art-title { font-size: 56px; }
  .art-dek { font-size: 24px; }
  .art-body .lede { font-size: 20px; }
  .art-grid, .article .sponsor--article, .art-end { margin-left: calc(var(--art-rail) + var(--art-rail-gap)); }
  .art-grid { display: grid; grid-template-columns: minmax(0, var(--art-measure)); }
  .glance { max-width: var(--art-measure); margin-top: 24px; }
  .day { display: grid; grid-template-columns: var(--art-rail) minmax(0, var(--art-measure)); column-gap: var(--art-rail-gap); align-items: start; margin-left: calc(-1 * (var(--art-rail) + var(--art-rail-gap))); }
  .art-body .day > h2 { grid-column: 1; position: sticky; top: calc(var(--hm-header-h, 0px) + 24px); margin: 36px 0 0; font-size: 34px; text-align: right; overflow-wrap: break-word; hyphens: auto; }
  .art-body .day > h2 small { margin-bottom: 8px; }
  .art-body .day > h2::after { content: ""; display: block; width: 28px; height: 2px; background: var(--hm-highlight); margin: 12px 0 0 auto; }
  .art-body .day:not([data-day]) > h2 { font-size: 26px; }
  .day > .day__body { grid-column: 2; padding-top: 36px; }
  .day > .day__body > .item:first-child { margin-top: 10px; }
}
@media (min-width: 1180px) {
  /* Room for rail, measure and side column at full size (the site max is a little narrower). */
  .article--dated { max-width: max(var(--hm-max, 78rem), calc(var(--art-rail) + var(--art-rail-gap) + var(--art-measure) + var(--art-side-gap) + var(--art-side) + 2 * var(--hm-gutter, 16px))); }
  /* The glance starts level with the title (round-5 P1-4): the head, a notice and the body stack in
     the reading column; the glance spans all three rows beside them, sticky within that span. */
  .article--dated .art-grid:not(.art-grid--single) { grid-template-columns: minmax(0, var(--art-measure)) var(--art-side); grid-template-rows: auto auto 1fr; column-gap: var(--art-side-gap); }
  .article--dated .art-grid:not(.art-grid--single) > .art-head { grid-column: 1; grid-row: 1; }
  .article--dated .art-grid:not(.art-grid--single) > .notice { grid-column: 1; grid-row: 2; }
  .article--dated .art-grid:not(.art-grid--single) .glance { grid-column: 2; grid-row: 1 / 4; position: sticky; top: calc(var(--hm-header-h, 0px) + 24px); margin-top: 56px; align-self: start; }
  .article--dated .art-grid:not(.art-grid--single) .art-body { grid-column: 1; grid-row: 3; }
  .glance h2 { font-size: 20px; }
  .glance__title { font-size: 15px; }
  .glance__meta { font-size: 13px; }
}
.article-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hm-line); }
.article-row { border-bottom: 1px solid var(--hm-line); }
.article-row__link { display: grid; gap: 2px; padding: 14px 0; min-height: 44px; text-decoration: none; color: var(--hm-ink); }
.article-row__link .eyebrow { margin-bottom: 0; }
.article-row__title { font-family: var(--hm-font-display); font-size: var(--hm-text-lg); font-weight: 650; line-height: 1.25; color: var(--hm-accent); }
.article-row__link:hover .article-row__title { text-decoration: underline; }
.article-row__dek { font-size: var(--hm-text-sm); color: var(--hm-ink); max-width: 65ch; }
.article-row__meta { font-size: var(--hm-text-xs); color: var(--hm-ink-soft); }

/* The peek card (articles SPEC §4.4, §6; runtime/peek.mjs): one native <dialog> per page, a bottom
   sheet on phones and a popover under the link on desktop. Tokens only; the --peek-* knobs are for
   a theme. Positions arrive as custom properties set by the module (no inline style). */
.peek {
  --peek-w: 420px;
  --peek-radius: 12px;
  --peek-backdrop: rgb(0 0 0 / 38%);
  --peek-backdrop-popover: rgb(0 0 0 / 8%);
  --peek-shadow: 0 2px 6px rgb(0 0 0 / 8%), 0 18px 48px rgb(0 0 0 / 18%);
  position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 86dvh; margin: 0; padding: 0; border: 0;
  overflow: auto; overscroll-behavior: contain;
  background: var(--hm-surface); color: var(--hm-ink); font-family: var(--hm-font-body);
  border-radius: var(--peek-radius) var(--peek-radius) 0 0; box-shadow: 0 -8px 40px rgb(0 0 0 / 18%);
  transform: translateY(var(--peek-drag, 0px)); transition: transform .2s cubic-bezier(.2, .8, .2, 1);
}
.peek.is-dragging { transition: none; }
.peek::backdrop { background: var(--peek-backdrop, rgb(0 0 0 / 38%)); }
/* In dark the surface and the dimmed page are close: the sheet takes the raised surface and a hairline edge. */
@media (prefers-color-scheme: dark) {
  .peek, .peek__top { background: var(--hm-surface-2); }
  .peek { box-shadow: 0 -1px 0 var(--hm-line), 0 -8px 40px rgb(0 0 0 / 40%); }
}
body.peek-open { overflow: hidden; }
.peek__top { position: sticky; top: 0; z-index: 2; background: var(--hm-surface); padding: 0 20px; }
.peek__handle { width: 40px; height: 4px; border-radius: 2px; background: var(--hm-line); margin: 10px auto 0; touch-action: none; }
.peek__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 44px; touch-action: none; }
.peek__kicker { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--hm-highlight); }
.peek__close, .peek__back { display: inline-flex; align-items: center; gap: 4px; min-width: 44px; min-height: 44px; padding: 0 10px; border: 0; border-radius: 4px; background: none; color: var(--hm-ink-soft); font: 500 14px var(--hm-font-body); cursor: pointer; }
.peek__close { margin: 0 -10px 0 0; justify-content: center; }
.peek__back { margin: 0 0 0 -10px; max-width: calc(100% + 10px); color: var(--hm-accent); font-weight: 600; text-align: left; }
.peek__back > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.peek__close:hover, .peek__back:hover { color: var(--hm-ink); background: var(--hm-surface-2); }
.peek__close svg, .peek__back svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.peek__body { padding: 0 20px calc(22px + env(safe-area-inset-bottom, 0px)); }
.peek__title { margin: 0 0 10px; font: 500 26px/1.15 var(--hm-font-display); letter-spacing: -.025em; color: var(--hm-ink); text-wrap: balance; outline-offset: 4px; }
.peek__title:focus { outline: none; }
.peek__title:focus-visible { outline: 2px solid var(--hm-focus); border-radius: 2px; }
.peek__status { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; margin: 0 0 12px; font-size: 16px; font-weight: 600; color: var(--hm-ink-soft); }
.peek__dot { flex: none; align-self: center; margin-right: 8px; width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: .55; }
.peek__status--open { color: var(--hm-ok); }
.peek__status--open .peek__dot { opacity: 1; box-shadow: 0 0 0 3px var(--hm-ok-soft); }
.peek__status--coming { color: var(--hm-warn); }
.peek__status--coming .peek__dot { opacity: 1; box-shadow: 0 0 0 3px var(--hm-warn-soft); }
.peek__status--ended .peek__dot { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; opacity: 1; }
.peek__sub { flex-basis: 100%; margin-top: 2px; padding-left: 17px; font-size: 14px; font-weight: 400; color: var(--hm-ink-soft); }
.peek__lines { display: grid; gap: 8px; margin: 0 0 16px; }
.peek__line { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--hm-ink); }
.peek__line--text { font-size: 16px; }
.peek__line a { color: var(--hm-accent); text-underline-offset: 3px; }
/* A linked record in a card (an event's venue) is a 44 px target: the row is as tall as the link. */
.peek__line a[data-peek] { display: inline-flex; align-items: center; min-height: 44px; vertical-align: middle; }
/* Unknown hours: no dot and never "Closed"; the honest state ("No Sunday hours listed") leads and
   the record's note follows as the sub-line, flush with it. */
.peek__status--none .peek__dot, .peek__text:empty { display: none; }
.peek__status--none .peek__sub { padding-left: 0; }
.peek__icon { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--hm-ink-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.peek__actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.peek__action { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--hm-line); border-radius: 3px; background: var(--hm-surface); color: var(--hm-ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.peek__action:hover { border-color: var(--hm-accent); color: var(--hm-accent); }
.peek__action--primary { background: var(--hm-accent); border-color: var(--hm-accent); color: var(--hm-accent-ink); }
.peek__action--primary:hover { color: var(--hm-accent-ink); filter: brightness(1.06); }
.peek__ext { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.peek__host { font-size: 13px; font-weight: 400; color: var(--hm-ink-soft); }
.peek__action--primary .peek__host { color: inherit; }
.peek__more { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--hm-accent); text-decoration: none; }
.peek__more:hover { text-decoration: underline; }
.peek__more > span { margin-left: 6px; }
/* Loading: bones with the card's real line heights, so nothing jumps when the record lands. */
.peek__skel { display: inline-block; height: 1em; vertical-align: middle; border-radius: 3px; background: var(--hm-surface-2); }
.peek__skel--s { width: 5em; }
.peek__skel--m { width: 60%; }
.peek__skel--l { width: 85%; }
.peek__skel--a { width: 7em; height: 44px; padding: 0; border-color: transparent; }
/* Motion (SPEC §6): the sheet rises in 320 ms and leaves in 180 ms; none with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .peek[open]:not(.is-pinned) { animation: peek-sheet-in .32s cubic-bezier(.2, .8, .2, 1); }
  .peek.is-closing { animation: peek-sheet-out .18s cubic-bezier(.4, 0, 1, 1) forwards; }
  .peek[open]:not(.is-pinned)::backdrop { animation: peek-fade-in .3s ease; }
  .peek.is-closing::backdrop { animation: peek-fade-out .18s ease forwards; }
  .is-loading .peek__skel { animation: peek-skel 1.1s ease-in-out infinite; }
  @keyframes peek-sheet-in { from { transform: translateY(100%); } }
  @keyframes peek-sheet-out { to { transform: translateY(100%); } }
  @keyframes peek-fade-in { from { opacity: 0; } }
  @keyframes peek-fade-out { to { opacity: 0; } }
  @keyframes peek-skel { 50% { opacity: .55; } }
}
/* Desktop: a popover anchored 10 px under the line of the link (above it when the link is low),
   clamped 16 px from the viewport edges. peek.mjs sets is-anchored only in popover mode (860 px and
   a hovering pointer: the hover media query or a real mouse event, since some hosts report
   hover: none with a mouse in use), so the width is the only query here. */
@media (min-width: 860px) {
  .peek.is-anchored { inset: auto; top: calc(var(--peek-y) + 10px); left: clamp(16px, calc(var(--peek-x) - var(--peek-w) / 2), calc(100vw - var(--peek-w) - 16px)); width: var(--peek-w); max-height: min(70vh, 640px); border: 1px solid var(--hm-line); border-radius: 10px; box-shadow: var(--peek-shadow); transform: none; transition: none; }
  .peek.is-anchored.is-above { top: auto; bottom: calc(100vh - var(--peek-top) + 10px); }
  .peek.is-anchored::backdrop { background: var(--peek-backdrop-popover, rgb(0 0 0 / 8%)); }
  .peek.is-anchored .peek__handle { display: none; }
  .peek.is-anchored .peek__top { padding: 6px 22px 0; }
  .peek.is-anchored .peek__body { padding: 0 22px 20px; }
  .peek.is-anchored .peek__title { font-size: 24px; }
  @media (prefers-reduced-motion: no-preference) {
    .peek.is-anchored[open]:not(.is-pinned) { animation: peek-pop-in .2s cubic-bezier(.2, .8, .2, 1); transform-origin: 50% 0; }
    .peek.is-anchored.is-above[open] { transform-origin: 50% 100%; }
    .peek.is-anchored.is-closing { animation: peek-pop-out .12s ease-in forwards; }
    @keyframes peek-pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
    @keyframes peek-pop-out { to { opacity: 0; transform: translateY(-2px) scale(.99); } }
  }
}

/* ------------------------------------------------------------------ articles: the live layer (articles round-3 SPEC §4.1 to §4.3, §2.2)
   Drawn by runtime/peek-live.mjs from the article's embedded records. Without JavaScript nothing
   here claims a state: each dot's space is reserved but invisible, there is no now rule, and the
   glance legend and the now line stay invisible with their space kept (their
   reservations are the anatomy's, above). Knobs (--art-now, --art-rail) are the anatomy's too. Ended text goes to ink-soft
   (contrast stays above 4.5:1), never opacity. Every motion sits under no-preference. */
a[data-peek][data-live]::before { content: ""; display: inline-block; width: .5em; height: .5em; border-radius: 50%; margin: 0 .2em 0 .12em; vertical-align: .08em; visibility: hidden; background: transparent; }
a[data-peek][data-live][data-live-state]::before { visibility: visible; }
a[data-peek][data-live][data-live-state="none"]::before { display: none; }
a[data-peek][data-live][data-live-state="open"]::before { background: var(--hm-ok); box-shadow: 0 0 0 3px var(--hm-ok-soft); }
a[data-peek][data-live][data-live-state="closed"]::before, a[data-peek][data-live][data-live-state="quiet"]::before { background: color-mix(in srgb, var(--hm-ink-soft) 45%, transparent); }
a[data-peek][data-live][data-live-state="ended"]::before { background: transparent; box-shadow: inset 0 0 0 1px var(--hm-ink-soft); }
a[data-peek][data-live][data-live-state="coming"]::before { background: var(--hm-warn); box-shadow: 0 0 0 3px var(--hm-warn-soft); }
.art-body [data-past], .art-body [data-past] strong, .art-body [data-past] a, .art-body .day[data-past] > h2, .art-body .day[data-past] > h2 small, .art-body .day[data-past] > .day__body { color: var(--hm-ink-soft); }
/* The now rule: the label on one line with the hairline running on from it, and the sub-phrase
   ("First up: tomorrow, 9 am") on its own line under the label, so it never wraps into the line or
   squeezes it away (round-5 P1-3). At every width the rule stays in the reading column: the rail
   belongs to the sticky day names alone, so no rule label, between sections or inside one, can sit
   where a stuck day name slides (round-5 P0-1). */
/* The hairline sits where the rule's top is (22 px below the text above, 24 px of air below it, as
   designed); the label's first line is centred on it, reaching 9 px above, and a sub-phrase adds
   its own line below. The label is a paragraph: ".now-rule >" outranks the column's paragraph margins. */
.now-rule { display: flex; align-items: flex-start; gap: 0 12px; margin: 22px 0 16px; }
.now-rule::after { content: ""; flex: 1 1 0; min-width: 80px; height: 1px; background: var(--art-now); }
.now-rule > .now-rule__label { flex: 0 1 auto; min-width: 0; margin: -9px 0 0; font: 600 13px/1.4 var(--hm-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--art-now); white-space: nowrap; }
.now-rule__sub { display: block; margin-top: 2px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--hm-ink-soft); white-space: normal; }
.glance__list li[data-past] .glance__title, .glance__list li[data-past] .glance__day { color: var(--hm-ink-soft); }
.glance__list .glance__now { height: 1px; border: 0; margin: -1px 0 0; position: relative; z-index: 1; background: var(--art-now); }
/* Once every event the article links has ended, it no longer offers their calendar (JS only). */
.cal-cta[data-past], .glance__cal[data-past] { display: none; }
/* In a bulleted list the dot keeps clear of the list's own bullet. */
.prose ul > li > a[data-peek][data-live]::before, .prose ul > li > p > a[data-peek][data-live]::before { margin-left: .2em; margin-right: .12em; }
@media (min-width: 860px) {
  /* A rule that opens a section sits level with the section's first item, below the day name's top. */
  .day__body > .now-rule:first-child { margin-top: 19px; }
}
@media (prefers-reduced-motion: no-preference) {
  a[data-peek][data-live]::before { transition: background-color .4s ease, box-shadow .4s ease; }
  .peek-live-ready a[data-peek][data-live][data-live-state="open"]::before { animation: hm-live-breathe 1.6s ease-in-out 1; }
  .now-rule--enter { animation: hm-now-in .4s ease both; }
}
@keyframes hm-live-breathe { 0% { box-shadow: 0 0 0 0 var(--hm-ok-soft); } 50% { box-shadow: 0 0 0 6px var(--hm-ok-soft); } 100% { box-shadow: 0 0 0 3px var(--hm-ok-soft); } }
@keyframes hm-now-in { from { opacity: 0; } }
/* end: articles: the live layer */

/* ------------------------------------------------------------------ search */
.search-box { position: relative; margin: 8px 0 12px; }
.search-box__label { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--hm-ink-soft); display: flex; }
.search-box input { width: 100%; min-height: 52px; padding: 0 16px 0 46px; font: inherit; font-size: 1.0625rem; color: var(--hm-ink); background: var(--hm-surface); border: 1.5px solid var(--hm-line); border-radius: 999px; -webkit-appearance: none; appearance: none; }
.search-box input:focus { border-color: var(--hm-accent); outline: 3px solid color-mix(in srgb, var(--hm-focus) 35%, transparent); outline-offset: 0; }
/* Search results by kind (WP6): a small heading per kind over the compact related rows. */
.search-results { display: grid; gap: 20px; }
.search-group h2 { font-size: 1.125rem; margin: 0 0 6px; }
.search-browse { color: var(--hm-ink-soft); }
/* The answer (an article, guide or page that answers the question) sits above the groups. */
.search-answer { padding: var(--hm-space-4); background: var(--hm-surface); border: 1px solid var(--hm-line); border-radius: var(--hm-radius); }
.search-answer .eyebrow { margin: 0 0 4px; }
.search-answer__link { display: grid; gap: 2px; font-size: 1.125rem; font-weight: 650; color: var(--hm-ink); text-decoration: none; }
.search-answer__link:hover { color: var(--hm-accent); }
.search-answer__summary { margin: 6px 0 0; color: var(--hm-ink-soft); }
.search-empty__try { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 8px 0 16px; }
/* No layout shift while the runtime starts or a linked query (?q=) loads: the box keeps its
   space until the runtime is ready, the status line has a fixed height, and the page body keeps a
   screen of height while the A to Z list is hidden, so the footer stays below the fold. */
body:not([data-runtime="ready"]) [data-search-box] { visibility: hidden; }
[data-search-status] { min-height: 1.5em; min-height: 1lh; }
.page-body:has(> [data-search-fallback][hidden]) { min-height: 100svh; }
.not-found { padding-top: 48px; max-width: 40rem; }

/* ------------------------------------------------------------------ official alerts, forecast, readings
   Severity is carried by a text label and an icon shape as well as color (never color alone).
   Tone pairs reuse tested token pairs only: stop/stop-soft, warn/warn-soft, ok/ok-soft, ink/surface-2. */
.tone--stop { --tone-ink: var(--hm-stop); --tone-bg: var(--hm-stop-soft); }
.tone--warn { --tone-ink: var(--hm-warn); --tone-bg: var(--hm-warn-soft); }
.tone--ok { --tone-ink: var(--hm-ok); --tone-bg: var(--hm-ok-soft); }
.tone--quiet { --tone-ink: var(--hm-ink); --tone-bg: var(--hm-surface-2); }

.alert-banner { border-bottom: 1px solid var(--hm-line); background: var(--hm-surface); }
.alert-banner__inner { max-width: var(--hm-max); margin: 0 auto; padding: 8px var(--hm-gutter); display: grid; gap: 6px; }
.alert-banner__list { list-style: none; display: grid; gap: 6px; }
.alert-banner__item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px; border-radius: var(--hm-radius-sm); background: var(--tone-bg); color: var(--tone-ink); border-left: 4px solid var(--tone-ink); }
.alert-banner__icon { margin-top: 0.7rem; }
.alert-banner__text { margin: 0; line-height: 1.4; min-width: 0; }
.alert-banner__sev { font-weight: 750; }
.alert-banner__link { color: inherit; font-weight: 650; text-decoration: underline; display: inline-flex; align-items: center; min-height: 44px; }
.alert-banner__until { font-size: 0.9375rem; }
.alert-banner__all { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 0.9375rem; }

.sev { display: inline-flex; align-items: center; gap: 4px; font-size: 0.8125rem; font-weight: 750; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; background: var(--tone-bg); color: var(--tone-ink); }
.advisory-list { list-style: none; display: grid; gap: 12px; }
.advisory { background: var(--hm-surface); border: 1px solid var(--hm-line); border-left: 5px solid var(--tone-ink); border-radius: var(--hm-radius-sm); padding: 14px 16px; scroll-margin-top: calc(var(--hm-header-h) + 12px); }
.advisory__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.advisory__kind { font-size: 0.875rem; font-weight: 600; color: var(--hm-ink-soft); }
.advisory__title { font-size: 1.125rem; margin-bottom: 4px; }
.advisory--compact .advisory__title { font-size: 1.0625rem; }
.advisory__title a { display: inline-flex; align-items: center; min-height: 44px; }
.advisory__headline { margin-bottom: 6px; }
.advisory__note { font-weight: 650; }
.advisory__instruction { margin: 8px 0; }
.advisory__official { margin: 10px 0 6px; }
.advisory__prov, .reading__prov, .forecast__asof { font-size: 0.875rem; color: var(--hm-ink-soft); margin: 4px 0 0; }
.advisory__prov a, .reading__prov a, .forecast__asof a { display: inline-flex; align-items: center; min-height: 44px; }
.advisory .facts { margin: 8px 0; }
.now-side .advisory-list, .updates-alerts .advisory-list, .place-notices .advisory-list { margin-bottom: 12px; }
.alerts > section { margin-top: 1.5rem; }
.earlier__summary { display: flex; align-items: center; min-height: 44px; font-weight: 650; color: var(--hm-accent); }
.earlier[open] .earlier__summary { margin-bottom: 0.75rem; }

/* ------------------------------------------------------------------ directory (compact A to Z rows) */
.dir-letters ul { list-style: none; display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto; scrollbar-width: thin; padding: 0 0 4px; margin: 0 0 0.75rem; max-width: 44rem; }
.dir-letters li { flex: none; }
.dir-letters a { display: flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0 6px; border-radius: var(--hm-radius-sm); color: var(--hm-ink); text-decoration: none; font-weight: 650; font-size: 0.875rem; }
.dir-letters a:hover { background: var(--hm-surface); }
.dir-letters a[aria-current] { background: var(--hm-ink); border-color: var(--hm-ink); color: var(--hm-bg); }
.dir-letter { margin-top: 1.25rem; scroll-margin-top: calc(var(--hm-header-h) + 8px); }
.dir-letter h2 { font-size: 1.125rem; margin: 0; padding-bottom: 4px; border-bottom: 2px solid var(--hm-ink); }
.dir-list { list-style: none; padding: 0; margin: 0; }
.dir-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--hm-line); }
.dir-row__name { font-weight: 650; display: inline-block; min-height: 28px; padding-top: 2px; }
.dir-row__meta { color: var(--hm-ink-soft); font-size: 0.875rem; }
.dir-row__links { flex-basis: 100%; display: flex; flex-wrap: wrap; column-gap: 20px; font-size: 0.9375rem; }
.dir-row__links a { display: inline-flex; align-items: center; min-height: 32px; overflow-wrap: anywhere; }
.dir-cats, .dir-groups { list-style: none; padding: 0; margin: 0; }
/* Category picker: a grid of tiles; a category with groups spans the row and lists its groups. */
.dir-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.dir-cats > li { display: flex; flex-direction: column; border: 1px solid var(--hm-line); border-radius: var(--hm-radius-sm); background: var(--hm-surface); }
.dir-cats > li > a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 52px; padding: 8px 12px; font-weight: 650; text-decoration: none; color: var(--hm-ink); }
.dir-cats > li > a .muted, .dir-groups a .muted { font-weight: 400; }
.dir-cats > li.dir-cats__grouped { grid-column: 1 / -1; }
.dir-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: 12px; padding: 0 12px 8px; }
.dir-groups li { display: flex; align-items: center; gap: 6px; }
.dir-groups a { display: inline-flex; align-items: center; min-height: 44px; }
.dir-groups .muted { white-space: nowrap; }
.dir-b2b { margin-top: 1.5rem; scroll-margin-top: calc(var(--hm-header-h) + 8px); }
.alerts__note { margin-top: 2rem; color: var(--hm-ink-soft); max-width: 44rem; }
.detail-lede { font-size: 1.125rem; }

.forecast { background: var(--hm-surface); border: 1px solid var(--hm-line); border-radius: var(--hm-radius); padding: 14px 16px; margin-bottom: 1.5rem; }
.forecast__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.forecast__period { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-content: start; padding: 10px; border-radius: var(--hm-radius-sm); background: var(--hm-bg); }
.forecast__icon { width: 1.75rem; height: 1.75rem; grid-row: span 2; color: var(--hm-accent); }
.forecast__name { font-weight: 650; font-size: 0.9375rem; }
.forecast__temp { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.forecast__short, .forecast__meta { grid-column: 1 / -1; font-size: 0.875rem; }
.forecast__meta { color: var(--hm-ink-soft); }
@media (min-width: 600px) and (max-width: 859px) { .forecast__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.reading-list { list-style: none; display: grid; gap: 10px; }
.reading { background: var(--hm-surface); border: 1px solid var(--hm-line); border-radius: var(--hm-radius-sm); padding: 12px 14px; }
.reading__line { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.reading__icon { color: var(--hm-accent); margin-top: 2px; }
.reading__value { font-weight: 700; font-variant-numeric: tabular-nums; }
.reading__title { font-weight: 650; }
.advisory__when, .advisory__affects { margin: 6px 0 0; font-size: 0.9375rem; }
.advisory__when { color: var(--hm-ink-soft); }
.reading__status { display: inline-block; font-size: 0.8125rem; font-weight: 750; letter-spacing: 0.03em; text-transform: uppercase; padding: 1px 8px; border-radius: 999px; background: var(--tone-bg); color: var(--tone-ink); }
.reading__stale { margin: 8px 0 0; }

/* ------------------------------------------------------------------ footer */
.site-footer { border-top: 1px solid var(--hm-line); background: var(--hm-surface-2); }
.site-footer__inner { max-width: var(--hm-max); margin: 0 auto; padding: 24px var(--hm-gutter) 32px; font-size: 0.9375rem; }
.asof { color: var(--hm-ink-soft); }
.footer-brand { margin: 0; }
/* The rest of the footer is "footer v2" below (footer/SPEC.md). */

/* ------------------------------------------------------------------ dark mode (DESIGN-AUDIT.md: two small tweaks)
   Photos are dimmed a little so they do not glare; the chosen filter chip uses the accent tint
   instead of inverting to cream, so it reads quieter than the current tab. */
@media (prefers-color-scheme: dark) {
  .photo img { filter: brightness(0.9); }
  .chip-link[aria-current] { background: var(--hm-accent-soft); border-color: var(--hm-accent); color: var(--hm-ink); }
}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion: no-preference) {
  .chip-link, .action, .top-nav__link, .row, .icon-button { transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
  .site-header, .tab-bar, .site-footer, .filters, .actions, .sponsor { display: none !important; }
  body { padding: 0; background: #fff; }
}

/* Business posts: "From the business" label and the Specials page (pages/specials.mjs). */
.chip--self { text-transform: none; letter-spacing: 0; font-weight: 600; border-radius: 8px; background: var(--hm-warn-soft); color: var(--hm-ink); }
.offer__flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.offer__when { font-weight: 600; }
.offer-list + .empty, .specials-section .empty { margin-top: 8px; }
.specials-section + .specials-section, .watch-along { margin-top: 28px; }
.watch-along__sub { margin: 20px 0 8px; font-size: 1.0625rem; }

/* ------------------------------------------------------------------ Tonight panel and conditions notes (pages/tonight.mjs) */
.tonight { background: var(--hm-surface); border: 1px solid var(--hm-line); border-radius: var(--hm-radius); padding: var(--hm-space-4); margin: var(--hm-space-6) 0; }
.tonight__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--hm-space-1) var(--hm-space-4); }
.tonight__head h2 { margin: 0; }
.tonight__sun { display: inline-flex; align-items: center; gap: var(--hm-space-1); margin: 0; font-size: var(--hm-text-sm); color: var(--hm-ink-soft); font-variant-numeric: tabular-nums; }
.tonight__icon { width: 1.25rem; height: 1.25rem; flex: none; color: var(--hm-accent); }
.tonight__sky { margin-top: var(--hm-space-3); }
.tonight__forecast { display: flex; align-items: flex-start; gap: var(--hm-space-2); margin: 0; font-size: var(--hm-text-md); font-weight: 600; }
.tonight__forecast .tonight__icon { margin-top: 2px; }
.tonight__none { margin: 0; color: var(--hm-ink-soft); font-size: var(--hm-text-sm); }
.tonight__asof { margin: var(--hm-space-1) 0 0; color: var(--hm-ink-soft); font-size: var(--hm-text-xs); }
.tonight__alerts { list-style: none; margin: var(--hm-space-3) 0 0; padding: 0; display: grid; gap: var(--hm-space-2); }
.tonight__alert { display: flex; align-items: flex-start; gap: var(--hm-space-2); font-size: var(--hm-text-sm); }
.tonight__alert > .icon { flex: none; margin-top: 3px; color: var(--tone-ink); }
.tonight__sev { font-weight: 700; color: var(--tone-ink); }
.tonight__until { color: var(--hm-ink-soft); white-space: nowrap; }
.tonight__empty { margin: var(--hm-space-2) 0 0; color: var(--hm-ink-soft); font-size: var(--hm-text-sm); list-style: none; }
.tonight__canal, .tonight__events { margin-top: var(--hm-space-4); padding-top: var(--hm-space-3); border-top: 1px solid var(--hm-line); }
.tonight__subhead { font-size: var(--hm-text-md); margin: 0; }
.tonight__rule { margin: var(--hm-space-1) 0 0; color: var(--hm-ink-soft); font-size: var(--hm-text-xs); }
.tonight .event-list { margin-top: var(--hm-space-1); }
.row__note { margin: 2px 0 0; font-size: var(--hm-text-sm); color: var(--hm-ink); }
.wx-note { border-left: 3px solid var(--hm-accent); padding: var(--hm-space-1) 0 var(--hm-space-1) var(--hm-space-3); margin: var(--hm-space-4) 0; }
.wx-note__title { font-size: var(--hm-text-md); margin: 0 0 var(--hm-space-1); }
.wx-note__text, .wx-note__policy { margin: 0 0 var(--hm-space-1); }
.wx-note .tonight__asof { margin: 0; }

/* ================================================================== reader-facing system (.superbee/references/design-system.md)
   Markup-level rules moved from docs/design/mockups/proposed.css (PLAN.md WP0). Editorial sizes and
   the serif section heads for these components live in apps/here-and-main/theme/tokens.css under
   .editorial. Only existing --hm-* tokens; nothing inline; nothing needs JavaScript. */

/* ------------------------------------------------------------------ related groups (related-links/SPEC.md)
   Ordinary sections in the main column. A compact ruled link list, one optional meta line per link. */
.related { margin-top: 28px; }
.related + .related { margin-top: 20px; }
.link-list--related { display: grid; gap: 0; border-top: 1px solid var(--hm-line); }
.link-list--related li { border-bottom: 1px solid var(--hm-line); }
.link-list--related a { display: grid; gap: 2px; align-content: center; width: 100%; min-height: 48px; padding: 10px 0; color: var(--hm-ink); text-decoration: none; font-weight: 600; }
.link-list--related a:hover { color: var(--hm-accent); }
.link-list__meta { display: block; font-size: 14px; font-weight: 400; color: var(--hm-ink-soft); }
.related__all { margin: 8px 0 0; font-size: 15px; }
.related__all a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* Context line under a title (area, parent place, series): links read as text. */
.detail-head__where a { color: inherit; }

/* ------------------------------------------------------------------ sources list (related-links/SPEC.md section 7)
   Quiet and last in the main column: titled rows, the domain in soft ink, then "Checked <date> ·
   Suggest a correction". Named .update-sources in the mockups. */
.sources-list { margin-top: 32px; border-top: 1px solid var(--hm-line); padding-top: 16px; font-size: 15px; }
.sources-list h2 { font-family: var(--hm-font-body); font-size: 16px; font-weight: 600; letter-spacing: 0; margin: 0 0 6px; }
.sources-list ul { display: grid; }
.sources-list li a { display: block; padding: 10px 0; min-height: 44px; }
.sources-list li a .muted { font-weight: 400; }
.sources-list .checked { color: var(--hm-ink-soft); font-size: 14px; margin: 6px 0 0; }
.sources-list .checked a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.sources-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; }
.sources-list li > span:first-child { padding: 10px 0; }
.sources-list__trust, .sources-list__feed { color: var(--hm-ink-soft); font-size: 14px; margin: 8px 0 0; }
.sources-list .notice { margin: 10px 0 0; }
/* A detail page with no sidebar content has no aside: the main column takes a readable measure. */
@media (min-width: 960px) { .detail-grid:not(:has(.detail-side)) { grid-template-columns: minmax(0, 1fr); max-width: 760px; } }

/* ------------------------------------------------------------------ event row v2 (event-rows/SPEC.md)
   One grid: time column, body, chevron. All children are direct children, so the DOM order can be
   kicker, title, time, meta, note, state while the time renders on the left. */
.row--v2 { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) 10px; grid-template-rows: auto auto auto auto; column-gap: 14px; row-gap: 0; align-items: start; min-height: 0; margin-top: 0; padding: 16px 0; border-top: 0; border-bottom: 1px solid var(--hm-line); position: relative; }
.row--v2 > * { grid-column: 2; margin: 0; }
.row--v2::after { grid-column: 3; grid-row: 1 / span 4; align-self: center; }
.row--v2 .row__lead { grid-column: 1; grid-row: 1 / span 4; width: auto; padding: 2px 0 0; font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--hm-accent); font-variant-numeric: tabular-nums; }
.row--v2 .row__lead time { display: block; white-space: nowrap; } /* <wbr> after the dash is the only break */
.row--v2 .row__lead small { display: block; font-size: 13px; font-weight: 500; color: var(--hm-ink-soft); }
.row--v2 .row__lead--date { width: 58px; padding: 8px; display: grid; justify-items: center; align-content: start; background: var(--hm-surface-2); color: var(--hm-ink); font-size: 13px; line-height: 1; }
.row--v2 .row__lead--date .row__day { margin: 3px 0 2px; }
.row--v2 .row__lead--date .row__mon { color: var(--hm-highlight); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 13px; }
.row--v2 .row__lead--date .row__dow { color: var(--hm-ink-soft); font-size: 13px; }
.row--v2 .row__kicker { font-size: 13px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--hm-highlight); }
.row--v2 .row__title { font-size: 17px; font-weight: 600; line-height: 1.3; margin-top: 2px; }
.row--v2 .row__meta { font-size: 14px; line-height: 1.5; color: var(--hm-ink-soft); margin-top: 4px; }
.row--v2 .row__note { font-size: 14px; line-height: 1.5; color: var(--hm-ink); margin-top: 4px; }
.row--v2 .row__state { font-size: 13px; font-weight: 650; margin-top: 4px; }
.row--v2[data-state="now"] .row__lead small, .row--v2[data-state="now"] .row__state { color: var(--hm-ok); }
.row--v2[data-state="ended"] { opacity: .62; }
.row--v2[data-state="ended"] .row__lead { color: var(--hm-ink-soft); }
.row--v2.is-canceled .row__title { text-decoration: line-through; }
.row--v2 .row__state--canceled { color: var(--hm-stop); }
.row--v2 .row__state--warn { color: var(--hm-warn); }
.row--v2 .row__state[data-state-line] { color: var(--hm-ink-soft); }
.row--v2[data-state="now"] .row__state[data-state-line] { color: var(--hm-ok); }
.row--v2 .row__flag { margin-top: 6px; }
/* The date box's <time> wraps its three parts; the box lays them out. */
.row--v2 .row__lead--date time { display: contents; }
/* A feed listing with no page here: the chevron becomes an outbound arrow (the link's hidden text says so). */
.row--v2.row--out::after { transform: none; border-bottom: 0; border-top: 2px solid var(--hm-ink-soft); }
/* Lists with a surface (the base presentation) keep the row text off the border. */
.event-list > .row--v2 { padding-left: var(--hm-space-4); padding-right: var(--hm-space-4); }
/* Ended rows leave every list (Today, Tonight, This week, interest and related lists) except the
   Events page's day groups, where they stay, muted, so a late reader sees what they missed. */
.event-list--today .row--v2[data-state="ended"], .event-list .row--v2[data-state="ended"] { display: none; }
.day-groups .event-list .row--v2[data-state="ended"] { display: grid; }
@media (min-width: 860px) {
  .row--v2 { grid-template-columns: 6.5rem minmax(0, 1fr) 10px; padding: 18px 0; }
  .row--v2 .row__lead time { display: inline; }
  .row--v2 .row__lead small { display: inline; margin-left: 6px; }
  .row--v2 .row__title { font-size: 18px; }
}

/* ------------------------------------------------------------------ interest picker v2 and chips (event-rows/SPEC.md)
   A Show first toggle and selectable chips. The checkbox inside each chip is visually hidden but
   focusable (the .visually-hidden recipe), so keyboard and screen readers get a real checkbox. */
.hm-interests--v2 { margin: 4px 0 12px; }
.hm-interests--v2 .hm-interests__panel { border: 0; }
.hm-interests--v2 .hm-interests__toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--hm-accent); }
.hm-interests--v2 .hm-interests__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; border: 0; min-width: 0; }
.hm-interests--v2 .hm-interests__note { margin: 8px 0 0; font-size: 14px; color: var(--hm-ink-soft); }
.hm-interests--v2 .hm-interests__links { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; }
/* With a saved choice the status line stands in for the toggle until the panel is opened (Change). */
.hm-interests--v2:not([data-hm-state="none"]) .hm-interests__panel:not([open]) > .hm-interests__toggle { display: none; }
.hm-interests--v2 .hm-interests__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; min-height: 44px; font-size: 14px; color: var(--hm-ink); }
.hm-interests--v2 .hm-interests__status button { min-height: 44px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--hm-accent); cursor: pointer; }
.hm-interests--v2 .hm-interests__status button:focus-visible { outline: 3px solid var(--hm-focus); outline-offset: 2px; }
.hm-interests--v2 .hm-interests__sep { color: var(--hm-ink-soft); }
@media (min-width: 860px) {
  .hm-interests--v2 .hm-interests__panel:not([open]), .hm-interests--v2 .hm-interests__status { text-align: right; justify-content: flex-end; }
}
.hm-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--hm-line); border-radius: 3px; background: var(--hm-surface); color: var(--hm-ink); font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; position: relative; }
.hm-chip:hover { background: var(--hm-accent-soft); }
.hm-chip__input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hm-chip:has(.hm-chip__input:checked) { background: var(--hm-accent); border-color: var(--hm-accent); color: var(--hm-accent-ink); }
.hm-chip:has(.hm-chip__input:checked)::before { content: ""; width: 5px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin: -3px 2px 0 0; }
.hm-chip:has(.hm-chip__input:focus-visible) { outline: 3px solid var(--hm-focus); outline-offset: 2px; }

/* ------------------------------------------------------------------ hubs and Living here (ia/SPEC.md) */
.hub-section { margin: 30px 0 0; }
.task-list { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--hm-line); }
.task-list li { border-bottom: 1px solid var(--hm-line); }
.task-list a { display: block; position: relative; min-height: 52px; padding: 12px 28px 12px 0; color: var(--hm-ink); text-decoration: none; font-size: 17px; font-weight: 600; }
.task-list a::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -5px; border-right: 2px solid var(--hm-accent); border-bottom: 2px solid var(--hm-accent); transform: rotate(-45deg); opacity: .7; }
.task-list small { display: block; font-size: 14px; font-weight: 400; color: var(--hm-ink-soft); margin-top: 2px; }
.task-list .task--soon { color: var(--hm-ink-soft); }
.task-list .task--soon::after { display: none; }
.guide-index .guide-list { gap: 18px; }
@media (min-width: 860px) { .task-list { grid-template-columns: 1fr 1fr; column-gap: 48px; } .guide-index .guide-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ------------------------------------------------------------------ civic update (update-page/SPEC.md)
   The "What's next" / "Outcome" callout, who decides, Have your say. */
.update-next { border: 1px solid var(--hm-line); border-left: 4px solid var(--hm-accent); border-radius: 4px; padding: 16px 18px; margin: 18px 0 24px; background: var(--hm-surface); }
.update-next .eyebrow { margin: 0 0 4px; }
.update-next h2 { margin: 0 0 6px; line-height: 1.2; }
.update-next p { margin: 0 0 6px; font-size: 16px; }
.update-next .actions { margin: 12px 0 0; }
.update-next--outcome { border-left-color: var(--hm-ok); }
.update-who { font-size: 16px; margin: 0 0 18px; }
.update-say { margin: 24px 0; }
.update-say p { font-size: 16px; }
.update-say .deadline { font-weight: 600; }
/* WP4: the Outcome line is the callout's news; the where/when lines sit under the heading. */
.update-next .update-outcome { font-size: 18px; font-weight: 600; line-height: 1.35; }
.update-next .update-then { margin-top: 10px; }

/* ------------------------------------------------------------------ footer v2 (footer/SPEC.md)
   Brand block, site links, fine print, legal and credit. The Superbee credit is a muted text link
   with the 14px mark: not a pill, not a button. */
.site-footer--v2 .site-footer__inner { display: grid; gap: 22px; padding: 30px var(--hm-gutter) 36px; }
.footer-brand-block { display: grid; gap: 4px; }
.footer-brand-block .footer-brand { font-family: var(--hm-font-display); font-size: 24px; font-weight: 500; line-height: 1.1; color: var(--hm-ink); letter-spacing: -.02em; }
.footer-brand-block .footer-brand a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; }
.footer-brand__town { color: var(--hm-ink-soft); font-weight: 400; }
.footer-brand__region { margin: 0; font-size: 14px; color: var(--hm-ink-soft); }
.footer-nav { border-top: 1px solid var(--hm-line); border-bottom: 1px solid var(--hm-line); }
.footer-nav ul { margin: 0; padding: 0; display: grid; }
.footer-nav li { border-top: 1px solid var(--hm-line); }
.footer-nav li:first-child { border-top: 0; }
.footer-nav a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 6px 0; font-size: 16px; font-weight: 600; color: var(--hm-ink); text-decoration: none; }
.footer-nav a::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--hm-accent); border-bottom: 2px solid var(--hm-accent); transform: rotate(-45deg); opacity: .7; }
.site-footer--v2 .asof { margin: 0; font-size: 14px; line-height: 1.6; color: var(--hm-ink-soft); max-width: 60ch; }
.footer-meta { display: grid; gap: 10px; font-size: 14px; color: var(--hm-ink-soft); }
.footer-links--meta { margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 0; }
.footer-links--meta a { display: inline-flex; align-items: center; min-height: 44px; color: var(--hm-ink); font-weight: 500; }
.footer-copy { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.superbee-attribution { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--hm-ink-soft); font-weight: 500; text-decoration: none; }
.superbee-attribution svg { width: 14px; height: 14px; display: block; }
.superbee-attribution:hover { color: var(--hm-ink); text-decoration: underline; }
.superbee-attribution:focus-visible, .footer-nav a:focus-visible, .footer-links--meta a:focus-visible { outline: 3px solid var(--hm-accent); outline-offset: 2px; }
.footer-links--meta a { overflow-wrap: anywhere; }
/* Get updates (/subscribe): a calendar row with its RSS link at the end. */
.subscribe-row { display: flex; align-items: center; gap: 16px; }
.subscribe-row > a:first-child { flex: 1 1 auto; }
.link-list--related .subscribe-row__feed { width: auto; display: inline-flex; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--hm-ink-soft); }
@media (min-width: 860px) {
  .site-footer--v2 .site-footer__inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "brand nav" "asof nav" "meta meta"; column-gap: 60px; align-items: start; }
  .footer-brand-block { grid-area: brand; }
  .footer-nav { grid-area: nav; border: 0; }
  .footer-nav ul { grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .footer-nav li, .footer-nav li:first-child { border-top: 1px solid var(--hm-line); }
  .footer-nav li:nth-child(-n+2) { border-top: 0; }
  .site-footer--v2 .asof { grid-area: asof; }
  .footer-meta { grid-area: meta; grid-template-columns: 1fr auto; align-items: center; border-top: 1px solid var(--hm-line); padding-top: 8px; }
}

/* ------------------------------------------------------------------ place, area, organization (PLAN.md WP5A)
   The one-line description under the title; the quick facts sit in the place lead, before the photo;
   the hours table caption shows only when some days are not listed. */
.detail-head__lede { margin: var(--hm-space-2) 0 0; font-size: 1.0625rem; line-height: 1.45; max-width: 40rem; }
.place-lead .facts--quick { margin: 12px 0 0; }
.facts--quick .facts__row--today dd { font-weight: 600; }
.hours-table__caption { caption-side: bottom; text-align: left; padding-top: 8px; font-size: 0.875rem; color: var(--hm-ink-soft); }
.place-amenities { margin: 12px 0; }
.area-rule { margin: 12px 0 0; color: var(--hm-ink-soft); font-size: 0.9375rem; }

/* Coverage states on /alerts (schema v2 phase 2): one quiet line per kind of notice. */
.coverage__list { list-style: none; margin: 0; padding: 0; }
.coverage__item { padding: var(--hm-space-2) 0; border-bottom: 1px solid var(--hm-line, var(--hm-surface-2)); font-size: var(--hm-text-sm); }
.coverage__item[data-situation="none"] .coverage__text { color: var(--hm-ink); }
.coverage__item[data-coverage-state="unchecked"] .coverage__text, .coverage__item[data-coverage-state="not-watched"] .coverage__text { color: var(--hm-ink-soft); }
.coverage__why, .coverage__fallback a { font-weight: 600; }
/* Hours rows that hold part of the year, other scopes and dated exceptions (schema v2 phase 2). */
.hours__extra { margin: var(--hm-space-2) 0 0; padding-left: 1.1rem; font-size: var(--hm-text-sm); color: var(--hm-ink-soft); }

/* ------------------------------------------------------------------ visual pass 1 (references/visual-magic-research)
   Today band: the date line and the status strip on one sky tint (data-sky, keyed to the sun by
   runtime/logic.mjs skyPhase; data-alert when a warning is in effect). Tints are tokens (--hm-sky-*,
   theme) checked for contrast with ink and soft ink in both schemes; a state, never a transition. */
.today-band { background: var(--hm-sky-2, var(--hm-surface-2)); background-image: linear-gradient(100deg, var(--hm-sky-1, var(--hm-surface-2)), var(--hm-sky-2, var(--hm-surface-2))); color: var(--hm-ink); transition: none; }
.today-band[data-sky="dawn"] { --hm-sky-1: var(--hm-sky-dawn-1); --hm-sky-2: var(--hm-sky-dawn-2); }
.today-band[data-sky="day"] { --hm-sky-1: var(--hm-sky-day-1); --hm-sky-2: var(--hm-sky-day-2); }
.today-band[data-sky="dusk"] { --hm-sky-1: var(--hm-sky-dusk-1); --hm-sky-2: var(--hm-sky-dusk-2); }
.today-band[data-sky="night"] { --hm-sky-1: var(--hm-sky-night-1); --hm-sky-2: var(--hm-sky-night-2); }
.today-band[data-alert="warn"] { --hm-sky-1: var(--hm-warn-soft); --hm-sky-2: var(--hm-warn-soft); }
.today-band[data-alert="stop"] { --hm-sky-1: var(--hm-stop-soft); --hm-sky-2: var(--hm-stop-soft); }
.today-band .status-strip { background: transparent; border-radius: 0; margin-top: 0; padding-left: 0; padding-right: 0; border-top: 1px solid color-mix(in srgb, var(--hm-ink) 14%, transparent); }
.today-band .status-strip__line--clear { font-weight: 600; }
/* Alert rows read as lines, not blocks: the title link is inline text with a tall enough tap box
   (padding), so two alerts and the All alerts link keep the band inside the first phone screen. */
.today-band .status-strip__alerts li { padding: 2px 0; line-height: 1.5; }
.today-band .status-strip__alerts a { display: inline; min-height: 0; padding: 9px 0; }
.today-band .status-strip__more { min-height: 40px; }
/* A standing hand-over (feed-status.mjs, hm-coverage/v1: "Canal: ... ended Wed, Oct 14, 6 PM") reads as a quiet note. */
.today-band .status-strip__line--standing { color: var(--hm-ink-soft); }

/* Weekend poster: the weekend section as the home hero. A tinted card with the dates as the
   headline, the issue's picks (glance rows) or the weekend's event rows, one credited photo and
   the one primary action. data-poster-lead chooses the list (the runtime flips it once the issue's
   weekend is over); the empty sentence belongs to the rows alone. */
.poster { --art-font-display: var(--hm-font-display); --art-font-body: var(--hm-font-body); position: relative; display: grid; gap: var(--hm-space-3); padding: var(--hm-space-4); border-radius: var(--hm-radius); background: var(--hm-accent-soft); color: var(--hm-ink); }
.poster__head { display: grid; gap: 2px; }
.poster__kicker { margin: 0; font-size: var(--hm-text-xs); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hm-highlight); }
.poster__dates { margin: 0; font-family: var(--hm-font-display); font-size: 1.75rem; line-height: 1.1; letter-spacing: -.02em; color: var(--hm-ink); }
.poster__note { display: block; font: 500 var(--hm-text-sm)/1.4 var(--hm-font-body); color: var(--hm-ink-soft); }
.poster__note:empty { display: none; }
.poster__photo { --photo-ratio: 21 / 9; --photo-radius: var(--hm-radius-sm); }
.poster__photo .photo__badge { padding-top: 6px; }
.poster__photo--art { display: flex; align-items: center; justify-content: center; min-height: 120px; border-radius: var(--hm-radius-sm); background: color-mix(in srgb, var(--hm-surface) 55%, transparent); color: var(--hm-accent); }
.poster__picks, .poster__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in srgb, var(--hm-ink) 18%, transparent); }
.poster__picks li, .poster__rows li { border-bottom: 1px solid color-mix(in srgb, var(--hm-ink) 18%, transparent); }
.poster__picks a, .poster__rows a { display: flex; gap: 12px; align-items: flex-start; min-height: 48px; padding: 9px 0; color: var(--hm-ink); text-decoration: none; }
.poster__picks a:hover .glance__title, .poster__rows a:hover .glance__title { text-decoration: underline; }
.poster .glance__day { color: var(--hm-accent); }
.poster .glance__day small { font-size: var(--hm-text-xs); letter-spacing: .06em; } /* the 13 px floor */
.poster .glance__title { font-weight: 600; }
.poster__row-kicker { font-size: var(--hm-text-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--hm-highlight); }
.poster__row[data-state="ended"] .glance__title, .poster__row[data-state="ended"] .glance__day { color: var(--hm-ink-soft); }
.poster__row[data-state="now"] .glance__meta { color: var(--hm-ok); font-weight: 600; }
.poster[data-poster-lead="issue"] .poster__rows, .poster[data-poster-lead="issue"] [data-empty] { display: none; }
.poster[data-poster-lead="rows"] .poster__picks { display: none; }
.poster .hero-actions { margin-top: 0; }

/* Row art: the record's photo (a 44 px thumb, no credit; the record page carries it) or one interest
   drawing from the kinds sprite, in the column before the chevron. Fixed size: no layout shift. */
.row--art { grid-template-columns: 4.5rem minmax(0, 1fr) 44px 10px; }
.row--nolead.row--art { grid-template-columns: minmax(0, 1fr) 44px 10px; }
.row__art { grid-column: -3; grid-row: 1 / -1; align-self: center; margin: 0; width: 44px; height: 44px; }
.row__art--photo picture { display: block; width: 44px; height: 44px; overflow: hidden; border-radius: var(--hm-radius-sm); background: var(--hm-surface-2); }
.row__art--photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.row--art::after, .row--v2.row--art::after { grid-column: -2; grid-row: 1 / -1; }
.kind-art { display: block; color: var(--hm-highlight); }
.row__art.kind-art { opacity: .9; }
.row--v2[data-state="ended"] .row__art { opacity: .5; }
.guide-card__art { margin: 20px 16px 0; color: var(--hm-accent); }
@media (max-width: 859px) {
  /* Phones: the photo is a thumb beside the dates and its credit line runs under the head, so the
     dates, the first pick and the primary action all sit on the first screen (the figure's parts
     become grid items; nothing in the markup changes). */
  .poster { grid-template-columns: minmax(0, 1fr) 112px; grid-template-areas: "head photo" "credit credit" "list list" "empty empty" "actions actions"; column-gap: 12px; }
  .poster__head { grid-area: head; align-self: start; }
  .poster__photo, .poster__photo .photo { display: contents; }
  .poster__photo .photo picture { grid-area: photo; --photo-ratio: 4 / 3; align-self: start; }
  .poster__photo .photo .photo__badge { grid-area: credit; }
  .poster__photo--art { display: flex; grid-area: photo; min-height: 84px; }
  .poster__photo--art .kind-art { width: 72px; height: 72px; }
  .poster__picks, .poster__rows { grid-area: list; }
  .poster [data-empty] { grid-area: empty; }
  .poster .hero-actions { grid-area: actions; }
  /* Tight pick lines, and a pick's lead held to two lines (the row opens the whole item), so the
     dates, the first pick and the action stay on the first screen in any font, wide ones included. */
  .poster__picks a, .poster__rows a { padding: 6px 0; min-height: 44px; gap: 10px; }
  .poster .glance__day { width: 32px; font-size: 19px; }
  .poster .glance__title { font-size: 15px; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .poster .glance__meta { font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line; the page has the rest */
  .poster__row-kicker { font-size: 13px; letter-spacing: .05em; }
}
@media (min-width: 860px) {
  .poster { padding: var(--hm-space-6); gap: var(--hm-space-4); }
  .poster__dates { font-size: 2.25rem; }
}