/* Niwot community guide — shared identity layer.
   Palette, page chrome, and the few graphic devices that repeat across pages.
   Content-specific styling stays inline in each page so it paints immediately.

   Two rules that are load-bearing and easy to lose in an edit:
   - clamp() needs whitespace around `+`. `1.6rem+2vw` is invalid and the
     browser silently drops the whole declaration, with no console warning.
   - border-radius is 0 everywhere in this design. No exceptions. */

:root {
  --n-white: #FAF8F2;
  --n-paper: #EEE7D9;
  --n-evergreen: #24483A;
  --n-forest: #17352B;
  --n-red: #B64F3A;
  --n-sage: #9EAD98;
  /* Sage is 4.31:1 on evergreen, so text on the dark grounds uses this
     lightened sage (5.7:1) instead. */
  --n-sage-lt: #B9C6B3;
  --n-sage-pale: #E2E8DE;
  --n-sky: #7FA9C2;
  /* Sky is 4.05:1 on evergreen, so link text on the dark grounds uses this
     lightened sky (5.9:1) instead. */
  --n-sky-lt: #A9CADD;
  --n-sky-pale: #E4EDF3;
  --n-gold: #C19A55;
  --n-ink: #252B27;
  /* Derived text-safe shades. The base red, sky and gold do not clear 4.5:1
     on every light ground in this palette, so small text uses these instead:
     --n-red-ink  4.68:1 on warm paper, 5.27:1 on soft white
     --n-sky-ink  4.6:1 on sage, 4.7:1 on paper, 5.6:1 on soft white
     The base --n-red stays for rails, rules and borders, where the minimum
     does not apply. */
  --n-red-ink: #A34531;
  --n-sky-ink: #35617D;
  --n-gold-lt: #D9B877;
  --n-rule: #D8D0BF;
  --n-muted: #5C6459;
  --n-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --n-sans: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --n-gutter: clamp(20px, 5vw, 76px);
  --n-max: 1440px;
}

*, *::before, *::after { box-sizing: border-box; }
/* `hidden` removes an element from layout and the accessibility tree; it has
   to win over every display rule, or a filtered-out .n-row stays a grid. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--n-white); color: var(--n-ink); font-family: var(--n-sans); font-size: 17px; line-height: 1.6; }
img { max-width: 100%; }
a { color: var(--n-ink); text-decoration-color: currentColor; }
a:hover { color: var(--n-red-ink); }
:where(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid var(--n-red); outline-offset: 3px; }
/* Caboose red is 2.0:1 against evergreen and 1.8:1 against forest, so on
   the dark grounds the ring is the light gold instead (5.4:1 on evergreen,
   7:1 on forest). The chip rule for the directory's checked category is in
   that page's styles. verify.mjs measures every ring against the ground
   behind it. */
.n-head :where(a, button):focus-visible,
.n-foot :where(a, button):focus-visible,
.n-bg-green :where(a, button, input, select, textarea, summary):focus-visible,
.n-skip:focus-visible { outline-color: var(--n-gold-lt); }

.n-wrap { width: 100%; max-width: var(--n-max); margin-inline: auto; padding-inline: var(--n-gutter); }
.n-skip { position: fixed; z-index: 200; left: 16px; top: -64px; background: var(--n-forest); color: var(--n-white); padding: 12px 18px; text-decoration: none; }
.n-skip:focus { top: 12px; }

/* ---- sticky header ---- */
.n-head { position: sticky; top: 0; z-index: 100; background: var(--n-evergreen); border-bottom: 3px solid var(--n-red); }
.n-head-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 60px; }
.n-mark { font-family: var(--n-serif); font-size: 1.375rem; letter-spacing: .2em; color: var(--n-white); text-decoration: none; line-height: 1; }
.n-mark:hover { color: var(--n-gold-lt); }
.n-mark small { display: block; margin-top: 3px; font-family: var(--n-sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--n-sage-lt); }
.n-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: center; }
.n-nav a { font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--n-paper); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; transition: border-color .2s ease, color .2s ease; }
.n-nav a:hover { color: var(--n-white); border-bottom-color: var(--n-gold-lt); }
.n-nav a.n-on { color: var(--n-gold-lt); border-bottom-color: var(--n-gold-lt); }
.n-burger { display: none; width: 46px; height: 46px; padding: 11px 9px; background: transparent; border: 1px solid var(--n-sage); cursor: pointer; }
.n-burger span { display: block; height: 2px; background: var(--n-paper); margin: 0 0 5px; }
.n-burger span:last-child { margin-bottom: 0; }

@media (max-width: 1080px) {
  .n-burger { display: block; }
  .n-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--n-gutter) 20px; background: var(--n-evergreen); border-bottom: 3px solid var(--n-red); }
  .n-head.n-open .n-nav { display: flex; }
  .n-nav a { font-size: 1.0625rem; letter-spacing: .06em; padding: 16px 0; border-bottom: 1px solid rgba(158, 173, 152, .35); }
  .n-nav a.n-on { border-bottom-color: var(--n-gold-lt); }
}
/* The collapsed menu is opened by guide.js. Where scripting is off the
   list is shown in full under the masthead instead, and the button that
   could not open anything is not shown. The header partial carries the same
   rule in a <noscript> for browsers without the `scripting` media feature. */
@media (max-width: 1080px) and (scripting: none) {
  .n-burger { display: none; }
  .n-nav { display: flex; position: static; padding: 0 0 12px; border-bottom: 0; }
}

/* ---- section grounds ---- */
.n-bg-white { background: var(--n-white); }
.n-bg-paper { background: var(--n-paper); }
/* Kept as a name so pages need not change; it resolves to the paper ground.
   Four grounds only: white, paper, evergreen, and the pale sky that belongs
   to civic content alone. */
.n-bg-sage { background: var(--n-paper); }
.n-bg-sky { background: var(--n-sky-pale); }
.n-bg-green { background: var(--n-evergreen); color: var(--n-paper); }
.n-bg-green h1, .n-bg-green h2, .n-bg-green h3 { color: var(--n-white); }
.n-bg-green a { color: var(--n-white); }
.n-bg-green a:hover { color: var(--n-gold-lt); }
.n-pad { padding-block: clamp(44px, 6vw, 104px); }
.n-pad-sm { padding-block: clamp(28px, 4vw, 64px); }

/* ---- type ---- */
.n-display { font-family: var(--n-serif); font-weight: 400; letter-spacing: -.02em; line-height: .9; margin: 0; }
.n-h2 { font-family: var(--n-serif); font-weight: 400; font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.25rem); line-height: 1.08; letter-spacing: -.01em; margin: 0; }
.n-h3 { font-family: var(--n-serif); font-weight: 400; font-size: clamp(1.1875rem, 1.05rem + .55vw, 1.5rem); line-height: 1.15; margin: 0; }
.n-lead { font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); line-height: 1.55; color: var(--n-ink); }
.n-body { font-size: 1rem; line-height: 1.65; color: var(--n-ink); }
.n-small { font-size: .9375rem; line-height: 1.6; color: var(--n-muted); }
.n-label { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--n-red-ink); }
.n-label--quiet { color: var(--n-muted); }
.n-bg-green .n-label { color: var(--n-gold-lt); }
.n-num { font-family: var(--n-serif); color: var(--n-red-ink); line-height: 1; }
.n-cap { font-size: 13px; letter-spacing: 0; color: var(--n-muted); margin: 10px 0 0; }
.n-bg-green .n-cap { color: var(--n-sage-lt); }
.n-bg-green .n-small { color: var(--n-sage-lt); }

/* ---- links & buttons ---- */
.n-link { color: var(--n-sky-ink); font-size: .9375rem; letter-spacing: 0; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.n-link:hover { color: var(--n-red-ink); }
.n-bg-green .n-link { color: var(--n-sky-lt); }
.n-btn { display: inline-block; padding: 15px 26px; background: var(--n-evergreen); color: var(--n-white); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; border: 2px solid var(--n-evergreen); transition: background .2s ease, border-color .2s ease; }
.n-btn:hover { background: var(--n-red); border-color: var(--n-red); color: var(--n-white); }
.n-btn--ghost { background: transparent; color: var(--n-evergreen); }
.n-btn--ghost:hover { background: var(--n-evergreen); border-color: var(--n-evergreen); color: var(--n-white); }
.n-bg-green .n-btn { background: var(--n-white); color: var(--n-evergreen); border-color: var(--n-white); }
.n-bg-green .n-btn:hover { background: var(--n-gold-lt); border-color: var(--n-gold-lt); color: var(--n-forest); }
.n-bg-green .n-btn--ghost { background: transparent; color: var(--n-white); }
.n-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- railroad divider: two rails and ties, from the line that put Niwot here ---- */
.n-rail { height: 9px; border-top: 1px solid var(--n-evergreen); border-bottom: 1px solid var(--n-evergreen); background-image: repeating-linear-gradient(90deg, var(--n-evergreen) 0 2px, transparent 2px 12px); }
.n-rail--red { border-color: var(--n-red); background-image: repeating-linear-gradient(90deg, var(--n-red) 0 2px, transparent 2px 12px); }
.n-rail--light { border-color: var(--n-sage); background-image: repeating-linear-gradient(90deg, var(--n-sage) 0 2px, transparent 2px 12px); }
.n-hr { height: 1px; background: var(--n-rule); border: 0; margin: 0; }

/* section head: label, rule, title */
.n-shead { display: grid; gap: 14px; padding-bottom: 18px; border-bottom: 2px solid var(--n-evergreen); }
.n-shead-row { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; justify-content: space-between; }
.n-bg-green .n-shead { border-bottom-color: var(--n-sage); }

/* ---- grids ---- */
.n-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 60px); align-items: start; }
.n-g2-wide { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 3vw, 60px); align-items: start; }
.n-g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.5vw, 40px); }
.n-g4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); }
@media (max-width: 1000px) { .n-g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .n-g2, .n-g2-wide, .n-g3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) { .n-g4 { grid-template-columns: minmax(0, 1fr); } }

/* ---- footer ---- */
.n-foot { background: var(--n-forest); color: var(--n-paper); }
.n-foot a { color: var(--n-paper); text-decoration: none; font-size: 1rem; }
.n-foot a:hover { color: var(--n-gold-lt); }
.n-foot-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 52px); }
.n-foot-col { display: grid; gap: 12px; align-content: start; }
.n-foot h2 { font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--n-gold-lt); margin: 0; }
.n-foot-mark { font-family: var(--n-serif); font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem); line-height: .9; letter-spacing: -.01em; color: var(--n-white); }
.n-disclaim { max-width: 78ch; font-size: .9375rem; line-height: 1.65; color: var(--n-sage); }
.n-foot-meta { display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: 13px; letter-spacing: 0; color: var(--n-sage); }
@media (max-width: 900px) { .n-foot-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---- tap targets: keep every control comfortable on touch ---- */
@media (max-width: 1080px) {
  .n-link, .n-foot a { display: inline-block; padding-top: 12px; padding-bottom: 12px; }
  .n-foot-col { gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none; animation: none; }
}

/* Sticky header is ~63px, so in-page anchor targets need clearance or the
   heading lands behind it. */
[id] { scroll-margin-top: 80px; }

/* ---- list rows that shift on hover ----
   These were style-hover="padding-left:…" in the design prototypes; a :hover
   rule belongs in the stylesheet. */
.n-shift { transition: padding-left .2s ease; }
.n-shift:hover { padding-left: 8px; }
.n-shift--sm:hover { padding-left: 6px; }

/* ---- visually hidden, but read aloud ---- */
.n-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- callout panels: 3px accent on the left edge only ---- */
.n-callout { padding: 22px; border-left: 3px solid var(--n-evergreen); }
.n-callout--paper { background: var(--n-paper); border-left-color: var(--n-red); }
.n-callout--sky { background: var(--n-sky-pale); border-left-color: var(--n-sky); }

/* ---- upcoming-event entries ----
   Written by calendar-core.js for the build and the browser alike. A card
   by default (the homepage); the events page lays the same markup out as a
   row (see its page styles). */
.n-up { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 3px solid var(--n-red); }

/* ---- forms ---- */
.n-field { display: block; width: 100%; margin-top: 8px; padding: 13px 14px; background: var(--n-white); border: 2px solid var(--n-evergreen); font: inherit; font-size: 1rem; color: var(--n-ink); }
textarea.n-field { resize: vertical; }

/* ---- photograph frames ----
   Three heights by role, so a photograph is the same size wherever it does
   the same job. Each was a one-off clamp per template before. */
.n-ph-hero img { object-fit: cover; }
.n-ph-lg img { height: clamp(240px, 27vw, 380px) !important; }
.n-ph-md img { height: clamp(220px, 24vw, 320px) !important; }
.n-ph-sm img { height: clamp(170px, 19vw, 250px) !important; }
.n-photo-natural img { height: auto !important; aspect-ratio: auto; }
.n-photo-portrait { width: min(100%, 380px); margin-inline: auto !important; }
.n-photo-portrait img { height: auto !important; aspect-ratio: auto; object-fit: contain; }

/* ---- reading column ---- */
.n-read { max-width: 68ch; }

/* ---- masthead identifier ----
   "Independent community guide" is wider than a phone can give it beside
   the menu button, so below 600px it wraps to two lines. */
.n-mark small { white-space: nowrap; }
@media (max-width: 600px) {
  .n-mark small { white-space: normal; max-width: 150px; line-height: 1.25; letter-spacing: .12em; }
}

/* ---- breadcrumb trail ----
   Home › Page, on every page but the homepage. The same list feeds the
   BreadcrumbList structured data. */
.n-crumbs { font-size: 13px; letter-spacing: 0; color: var(--n-muted); }
.n-crumbs ol { display: flex; flex-wrap: wrap; gap: 0 8px; list-style: none; margin: 0; padding: 14px 0 0; }
.n-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--n-sage); }
.n-crumbs a { display: inline-block; color: var(--n-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.n-crumbs a:hover { color: var(--n-red-ink); border-bottom-color: currentColor; }
.n-crumbs [aria-current="page"] { color: var(--n-ink); }
@media (max-width: 1080px) { .n-crumbs a { padding-top: 12px; padding-bottom: 12px; } }

/* ---- fieldsets carry no chrome of their own ---- */
fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
legend { padding: 0; }

/* ---- 2026 visual refresh -------------------------------------------------
   A Front Range editorial treatment layered over the existing content and
   interaction model. The square-edged railway identity remains intact.

   Revised in the September 2026 coherence pass. The refresh had arrived
   with a second visual vocabulary borrowed from product interfaces —
   a translucent blurred masthead, drop shadows, cards that lift and zoom
   under the cursor, a navy band from outside the palette — layered over a
   flat editorial one. Both were competent; together they read as two sites.
   The palette and the cinematic hero stay (the launch audit called them
   strong); the product vocabulary is gone. Depth is carried by rules,
   grounds and the railway devices, never by shadow, and nothing moves under
   the cursor but color. */

:root {
  --n-white: #FFFEFD;
  --n-paper: #F1EDE3;
  --n-evergreen: #173F3A;
  --n-forest: #0F302D;
  --n-red: #A64F32;
  --n-sage: #9CAD9F;
  --n-sage-lt: #C5D2CB;
  --n-sage-pale: #EAF0EC;
  --n-sky: #A9C7D2;
  --n-sky-lt: #C8DEE7;
  --n-sky-pale: #E9F1F5;
  --n-gold: #D7B77C;
  --n-gold-lt: #E5D3A8;
  --n-ink: #1C2928;
  --n-muted: #596864;
  --n-rule: #D6D6CE;
  --n-red-ink: #843E2A;
  --n-sky-ink: #315E78;
  --n-gutter: clamp(24px, 4vw, 48px);
  --n-max: 1240px;
}

body {
  background: var(--n-white);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

img { display: block; }

a { text-underline-offset: 4px; }

.n-display,
.n-h2,
.n-h3 { text-wrap: balance; }

.n-pad { padding-block: clamp(64px, 7vw, 96px); }

/* Light, editorial masthead. The same navigation and mobile-menu behavior
   remain in place; only the visual treatment changes. */
.n-head {
  min-height: 76px;
  background: var(--n-white);
  border-bottom: 1px solid var(--n-rule);
  box-shadow: none;
}

.n-head-in { min-height: 76px; }

.n-mark {
  color: var(--n-ink);
  font-size: 1.75rem;
  letter-spacing: .13em;
}

.n-mark:hover { color: var(--n-red-ink); }

.n-mark small {
  display: inline-block;
  margin: 0 0 0 12px;
  padding-left: 12px;
  border-left: 1px solid var(--n-ink);
  color: var(--n-muted);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  vertical-align: .15em;
}

.n-nav { gap: 4px clamp(14px, 1.8vw, 28px); }

.n-nav a {
  position: relative;
  padding: 28px 0 24px;
  border: 0;
  color: var(--n-ink);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .075em;
}

.n-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 19px;
  left: 0;
  height: 2px;
  background: var(--n-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}

.n-nav a:hover,
.n-nav a.n-on { color: var(--n-red-ink); }

.n-nav a:hover::after,
.n-nav a.n-on::after { transform: scaleX(1); }

.n-head :where(a, button):focus-visible { outline-color: var(--n-red); }
/* The skip link's ring is drawn outside it, over the page ground, so it is
   the red (5:1 on the soft white), not the gold meant for dark grounds. The
   hero and the events band are dark and take the gold, like .n-bg-green. */
.n-skip:focus-visible { outline-color: var(--n-red); }
.n-home-hero :where(a, button):focus-visible,
.n-home-events :where(a, button):focus-visible { outline-color: var(--n-gold-lt); }

.n-burger {
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
}

.n-burger span { background: var(--n-ink); }

.n-btn {
  min-height: 50px;
  padding: 14px 20px;
  font-weight: 600;
  letter-spacing: .085em;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.n-link { font-weight: 500; }

.n-shead {
  padding-bottom: 22px;
  border-bottom-width: 2px;
}

.n-label { font-weight: 600; }

.n-callout { padding: clamp(22px, 3vw, 32px); }

.n-field {
  min-height: 50px;
  border-width: 1px;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.n-field:focus { border-color: var(--n-red); }

.n-crumbs { background: var(--n-white); }

/* Homepage: cinematic split masthead using the existing headline, copy,
   actions and licensed Second Avenue photograph. */
.n-home-hero {
  overflow: hidden;
  background: var(--n-evergreen);
}

.n-home-hero > .n-wrap {
  max-width: none;
  padding: 0 !important;
}

.n-home .n-hero {
  min-height: 460px;
  grid-template-columns: minmax(0, 48%) minmax(0, 52%);
  gap: 0;
  align-items: stretch;
  background: var(--n-evergreen);
}

.n-home .n-hero > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(52px, 6vw, 84px) clamp(32px, 5vw, 72px) clamp(52px, 6vw, 84px) max(var(--n-gutter), calc((100vw - var(--n-max)) / 2 + var(--n-gutter))) !important;
  color: var(--n-white);
}

.n-home .n-hero-mark {
  color: var(--n-white) !important;
  font-size: clamp(3.25rem, 5.6vw, 5rem);
  line-height: .88;
  letter-spacing: -.035em;
}

.n-home .n-hero-mark + .n-lead {
  color: var(--n-gold-lt) !important;
  font-family: var(--n-serif) !important;
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.625rem) !important;
}

.n-home .n-hero .n-rail {
  border-color: var(--n-gold);
  background-image: repeating-linear-gradient(90deg, var(--n-gold) 0 2px, transparent 2px 12px);
}

.n-home .n-hero .n-rail + div { color: var(--n-sage-lt) !important; }

.n-home .n-hero .n-body { color: #E5ECE8 !important; }

.n-home .n-hero .n-btn {
  background: var(--n-white);
  border-color: var(--n-white);
  color: var(--n-ink);
}

.n-home .n-hero .n-btn:hover {
  background: var(--n-gold-lt);
  border-color: var(--n-gold-lt);
  color: var(--n-forest);
}

.n-home .n-hero .n-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, .7);
  color: var(--n-white);
}

.n-home .n-hero figure {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  background: var(--n-forest);
}

.n-home .n-hero figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 63, 58, .2), transparent 28%), linear-gradient(0deg, rgba(0, 0, 0, .28), transparent 34%);
  pointer-events: none;
}

.n-home .n-hero figure picture { display: block; height: 100%; }

.n-home .n-hero figure img {
  width: 100% !important;
  height: 100% !important;
  min-height: 460px;
  object-fit: cover !important;
}

.n-home .n-hero figure .n-cap {
  position: absolute;
  z-index: 2;
  right: 22px;
  bottom: 18px;
  margin: 0;
  color: var(--n-white);
}

/* Fast paths sit immediately under the hero, in one crisp editorial row. */
.n-home-quick {
  padding: 30px 0 38px;
  background: var(--n-white);
  border-bottom: 1px solid var(--n-rule);
}

.n-home-quick > .n-wrap { padding-top: 0 !important; }

.n-home .n-quick {
  counter-reset: quick-link;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 18px;
  border-top: 2px solid var(--n-ink);
}

.n-home .n-quick > a {
  counter-increment: quick-link;
  min-height: 118px;
  align-content: space-between !important;
  padding: 14px 0 10px !important;
  border-bottom-color: var(--n-rule) !important;
}

.n-home .n-quick > a::before {
  content: "0" counter(quick-link);
  grid-column: 1 / -1;
  color: var(--n-red-ink);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
}

.n-home .n-quick > a > span:first-child { align-self: end; }

.n-home .n-quick .n-small {
  max-width: 18ch;
  font-size: .78rem !important;
  line-height: 1.35;
}

/* A restrained civic notice between the utility links and editorial body. */
.n-home-notice {
  margin-top: 0 !important;
  background: var(--n-sky-pale);
  border-color: var(--n-sky) !important;
}

.n-home-notice > .n-wrap { padding-block: 28px !important; }

/* Events become the homepage's dark, high-contrast anchor. */
.n-home-events {
  background: var(--n-evergreen);
  color: var(--n-white);
}

.n-home-events .n-shead { border-bottom-color: var(--n-sage); }
.n-home-events .n-label { color: var(--n-gold-lt); }
.n-home-events .n-h2 { color: var(--n-white) !important; }
.n-home-events .n-link { color: var(--n-white); }

.n-home-events [data-upcoming] article {
  padding: 18px 0 0 !important;
  border-top-width: 3px !important;
  background: none;
}

.n-home-events [data-upcoming] .n-h3 { color: var(--n-white) !important; }
.n-home-events [data-upcoming] .n-body { color: var(--n-paper) !important; }
.n-home-events [data-upcoming] .n-small { color: var(--n-sage-lt); }
.n-home-events [data-upcoming] .n-link { color: var(--n-sky-lt); }

/* Destination cards: photographs stay prominent while each existing link
   receives a clearer, more tactile surface. */
.n-home-explore { background: var(--n-white); }

.n-home .n-exp { gap: 24px; }

.n-home .n-exp article {
  padding: 0 0 22px;
  border-top: 3px solid var(--n-evergreen);
  background: none;
}

.n-home .n-exp article:nth-child(2),
.n-home .n-exp article:nth-child(4) { border-top-color: var(--n-red); }

.n-home .n-exp article h3,
.n-home .n-exp article p,
.n-home .n-exp article .n-link { margin-inline: 0 !important; }

.n-home .n-exp article picture { display: block; margin-top: 18px; }
.n-home .n-exp article picture + h3 { margin-top: 16px !important; }
/* Every card photograph takes the same frame, wide card or narrow, so the
   headings below them sit on one line across each row. */
.n-home .n-exp article img { height: clamp(210px, 23vw, 300px); object-fit: cover; }

.n-home-community {
  background: var(--n-paper);
  border-color: var(--n-rule) !important;
}

/* The existing footer information remains unchanged in a denser finish. */
.n-foot { background: var(--n-forest); }

.n-foot-cols { gap: clamp(30px, 4vw, 64px); }

.n-foot a { color: #D5E0DB; }
.n-foot .n-disclaim,
.n-foot .n-foot-meta { color: #AABCB5; }

@media (max-width: 1080px) {
  .n-head { min-height: 68px; }
  .n-head-in { min-height: 68px; }
  .n-nav {
    top: 100%;
    padding: 8px var(--n-gutter) 20px;
    background: var(--n-white);
    border-bottom: 1px solid var(--n-rule);
    box-shadow: 0 18px 30px rgba(15, 48, 45, .12);
  }
  .n-nav a {
    padding: 15px 0;
    border-bottom: 1px solid var(--n-rule);
    color: var(--n-ink);
    font-size: 1rem;
  }
  .n-nav a::after { display: none; }
  .n-nav a.n-on { border-bottom-color: var(--n-red); }
}

@media (max-width: 900px) {
  .n-home .n-hero {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
  }
  .n-home .n-hero > div {
    min-height: 0;
    padding: 44px var(--n-gutter) !important;
  }
  /* Stacked, the photograph gets a fixed frame and the crop does the rest;
     left to its own ratio it would be 500px tall on a tablet. */
  .n-home .n-hero figure { height: 320px; min-height: 0; }
  .n-home .n-hero figure img { min-height: 0; }
  .n-home .n-exp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-home .n-exp-wide { grid-column: span 2; }
}

@media (max-width: 680px) {
  :root { --n-gutter: 20px; }
  .n-mark { font-size: 1.5rem; }
  .n-mark small {
    display: none;
    margin: 0;
    padding: 0;
    border: 0;
  }
  /* The launch audit measured 440px of hero text over a 320px photograph on
     a phone and asked for about 340 over 230: the census line steps aside
     (it is on Our Story and the election page), the two actions share a
     row, and the frame is 230px. */
  .n-home .n-hero > div { min-height: 0; padding: 24px var(--n-gutter) 26px !important; }
  .n-home .n-hero-mark { font-size: clamp(3rem, 14vw, 4rem); }
  .n-home .n-hero-mark + .n-lead { margin-top: 10px !important; font-size: 1.35rem !important; }
  .n-home .n-hero .n-rail { margin-top: 12px !important; }
  .n-home .n-hero .n-rail + div { display: none !important; }
  .n-home .n-hero .n-body { font-size: .9375rem; margin-top: 14px !important; }
  .n-home .n-hero .n-btns { display: flex; margin-top: 18px !important; }
  .n-home .n-hero .n-btn { flex: 1 1 140px; padding-inline: 12px; text-align: center; }
  .n-home .n-hero figure { height: 230px; }
  .n-home .n-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .n-home .n-exp { grid-template-columns: minmax(0, 1fr); }
  .n-home .n-exp-wide { grid-column: span 1; }
  .n-home-events [data-upcoming] article { min-height: 0; }
}

/* Still two across on the narrowest phones: four links in one column is a
   screen and a half before the first section. */
@media (max-width: 430px) {
  .n-home .n-quick { gap: 0 14px; }
  .n-home .n-quick > a { min-height: 104px; }
  .n-home .n-quick .n-small { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .n-home .n-exp article,
  .n-home .n-exp article img,
  .n-home-events [data-upcoming] article,
  .n-link span,
  .n-btn { transition: none; }
}