/* ==========================================================================
   v3 — BASE, NAV, BANDS, BLOCKS, BUTTONS, FOOTER
   ========================================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--compare);
  color: var(--contrast);
  font-family: Poppins, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--color-9); outline-offset: 2px; }
.band :focus-visible { outline-color: var(--gal-accent); }

/* Routing moves focus to the new page's h1 so a screen reader announces where
   it landed. The heading is not interactive, and Chrome paints :focus-visible
   on a programmatic focus that follows a click, which drew a ring around the
   hero title on every navigation. Suppressed for that target only. */
h1[tabindex="-1"]:focus, h1[tabindex="-1"]:focus-visible { outline: none; }

/* The skip link lands focus on <main> so the next Tab starts inside it in every
   browser. It is a target, not a control, so it takes no ring either. */
main[tabindex="-1"]:focus, main[tabindex="-1"]:focus-visible { outline: none; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--yellow-4); color: var(--on-yellow);
  padding: .7rem 1.1rem; font-weight: 600; border-radius: 0 0 .35rem 0;
}
.skip:focus { left: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.icon { width: 1.15em; height: 1.15em; flex: none; }

/* --------------------------------------------------------------------------
   TYPE — Poppins carries everything. PT Serif is emphasis in copy, nothing else.

   This follows v1, where PT Serif appears three times and every one of them is
   italic 400 inside running text: an emphasised phrase in the hero headline
   (`.hero h1 em`), a pull quote (`.prose .pull`), and a `.serif` utility. No
   heading is set in it. v2 had no serif at all; a middle version briefly set
   the headings in it, which is not what the face is for here.

   So: exactly one rule below names the family, and it sets font-style in the
   same declaration block, so no selector can pick the face up upright by
   accident. Only one PT Serif face is embedded at all - italic 400, no roman
   and no bold - so an upright or bold PT Serif would be synthesized by the
   browser: a silent font fallback of exactly the kind this folder exists to
   prevent. build.py asserts the upright half: every font-family naming PT
   Serif must carry font-style: italic beside it.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.2; font-weight: 600; }

em, .pull, .hero h1 em {
  font-family: "PT Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

h1 { font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }

/* The emphasised phrase in the hero headline, as v1 sets it: the serif italic
   against the sans, and the band's accent color. --gal-accent over the scrim
   is 6.48:1 at its strong end and 5.27:1 at its weak end - see the scrim
   arithmetic in NOTES.md. */
.hero h1 em { color: var(--gal-accent); font-weight: 400; }

/* A pull quote inside body copy. Its font-size and color live in
   04-modules.css, after `.def p` - see the note there. */
.pull {
  line-height: 1.55;
  border-left: 3px solid var(--yellow-4);
  padding: .2rem 0 .2rem 1.2rem; margin: 0; max-width: 52ch;
}

.kicker {
  margin: 0 0 .55rem;
  font-size: .74rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-text);
}
.gal .kicker, .band .kicker { color: var(--gal-accent); }

.lede { font-size: 1.05rem; color: var(--muted); max-width: 62ch; }
.gal .lede, .band .lede { color: var(--gal-ink-2); }

.crumb { margin: 0 0 1rem; font-size: .82rem; }
.crumb a, .crumb span { color: var(--gal-ink-3); }
.crumb a { text-decoration: underline; }
.crumb a:hover { color: var(--gal-ink); }

/* --------------------------------------------------------------------------
   NAV — v2's bar. County tokens; the reading-progress bar is the county's.

   Every item is inline, the current page carries a 3px --color-6 underline,
   and Membership is a filled pill at the end. Twelve items plus the pill is a
   lot for an 80rem row, so the type is .875rem and the padding tight; the row
   wraps rather than overflowing if it ever runs out of width.

   Two things asked for: the "Horry County Government" line is gone from the
   lockup, and the mark is a ship's wheel rather than the museum's doorway.
   -------------------------------------------------------------------------- */
.nav--main {
  background: var(--bg-color);
  box-shadow: 0 1px 3px 0px var(--shadow-lt);
  position: sticky;
  top: 0;
  z-index: 40;
}
.nav--wrapper { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--nav-padding); }
.nav--primary {
  align-items: center;
  column-gap: 1rem;
  display: flex;
  /* The safety net: if the row ever runs out of width it wraps rather than
     overflowing. At 1280px it does not - see the padding below. */
  flex-wrap: wrap;
  min-height: 4rem;
}

.logo--wrapper {
  align-items: center;
  color: var(--color-9);
  column-gap: .6rem;
  display: flex;
  margin-right: auto;
  padding: .5rem 0;
  text-decoration: none;
}
.logo-mark { color: var(--color-6); flex: none; height: 2.4rem; width: 2.4rem; }
.logo-type { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }

.nav-toggle {
  align-items: center;
  background: none;
  border: 1px solid var(--hair-ui);
  border-radius: .3rem;
  color: var(--color-9);
  column-gap: .45rem;
  cursor: pointer;
  display: none;
  font: inherit;
  font-weight: 600;
  padding: .45rem .8rem;
}

.nav--listings {
  align-items: center;
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav--listings a {
  border-bottom: 3px solid transparent;
  color: var(--contrast);
  display: block;
  font-size: .875rem;
  font-weight: 500;
  /* .45rem, not more: twelve items plus the pill and the lockup have to fit
     the 1248px content box inside an 80rem container. At .55rem they did not,
     by about twenty pixels, and the whole list dropped to a second line. */
  padding: .5rem .45rem;
  text-decoration: none;
  white-space: nowrap;
}
.nav--listings a:hover { color: var(--accent-text); border-bottom-color: var(--color-3); }
.nav--listings a[aria-current="page"] {
  color: var(--accent-text);
  border-bottom-color: var(--color-6);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   GROUPED NAV
   A disclosure button and a panel of ordinary links - not role="menubar".
   The WAI menubar pattern is for application menus and owes arrow-key roving
   focus, typeahead and a lot else; a site nav does not need any of it, and the
   links keep their normal semantics and Tab order this way.
   -------------------------------------------------------------------------- */
.has-menu { position: relative; }
.nav-group {
  align-items: center;
  background: none;
  border: 0; border-bottom: 3px solid transparent;
  color: var(--contrast);
  cursor: pointer;
  display: flex;
  font: inherit; font-size: .875rem; font-weight: 500;
  gap: .3rem;
  padding: .5rem .45rem;
  white-space: nowrap;
}
.nav-group:hover { color: var(--accent-text); border-bottom-color: var(--color-3); }
.nav-group[aria-expanded="true"] { color: var(--accent-text); border-bottom-color: var(--color-6); }
/* The group holding the page you are on, so the bar still says where you are
   once its items are behind a click. */
.nav-group.here { color: var(--accent-text); font-weight: 600; border-bottom-color: var(--color-6); }
.nav-group .caret { width: .8rem; height: .8rem; flex: none; }
.nav-group[aria-expanded="true"] .caret { transform: rotate(180deg); }

.nav-menu {
  position: absolute; top: 100%; left: 0; z-index: 50;
  min-width: 12rem;
  margin: 0; padding: .35rem 0;
  list-style: none;
  background: var(--bg-color);
  border: 1px solid var(--hair-ui); border-radius: .35rem;
  box-shadow: var(--dropshadow-sm);
}
.nav-menu a { border-bottom: 0; padding: .55rem .9rem; }
.nav-menu a:hover { background: var(--wash); border-bottom-color: transparent; }
.nav-menu a[aria-current="page"] { border-bottom-color: transparent; background: var(--wash); }

/* Membership, as v2 had it - a filled pill, in blue rather than the yellow
   v2 used.

   --color-7, not --color-6. White on --color-6 measures 4.75:1, which clears
   the 4.5 rule but was the tightest thing in the whole build at 14px bold, and
   this project's own token note reserves --color-6 for fills over text. White
   on --color-7 is 7.54:1 and the blue is a shade deeper, not a different
   color. Hover goes to --color-8 (11.3:1). */
.nav-cta { align-self: center; margin-left: .8rem; }
.nav-cta a {
  background: var(--color-7);
  /* Zero, not transparent. Inheriting the items' 3px underline gave the pill a
     43px box around a 40px background - 1.6px taller than its neighbors and
     sitting 1.5px high in the row. */
  border-bottom: 0;
  border-radius: var(--circle);
  color: var(--lightest) !important;
  font-weight: 600;
  line-height: 1.35;
  padding: .42rem 1.05rem;
}
.nav-cta a:hover { background: var(--color-8); }

.scrolling-progress-bar { height: 3px; background: var(--compare-less); }
.scrolling-progress-bar .progress { height: 100%; width: 0; background: var(--color-6); }

/* --------------------------------------------------------------------------
   THE PAGE SHELL
   -------------------------------------------------------------------------- */
main { display: block; }
/* The prototype was one document with fifteen .page divs and a JavaScript
   router; this site serves a document per route, so the display rules that
   hid the inactive ones are gone. Nothing else in the prototype's CSS knew
   about .page. */

.in { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--nav-padding); }

/* --------------------------------------------------------------------------
   THE GALLERY BAND — the hero on Home, the page head everywhere else.

   Text sits over a photograph, so the scrim is not decorative. A DOM contrast
   probe composites only the base color and reports nonsense here; the alpha is
   solved arithmetically instead, against the brightest pixel a photograph can
   contain (pure white).

   The scrim is --scrim-rgb, half the band's navy and half black, at 78% -> 74%.
   Darkening the tint buys back more than the lower alpha costs, so more of the
   photograph comes through and every ink over it still gains:

                      strong (78%)      weak (74%)
     h1      white       9.75:1           8.39:1     (was 9.88 / 8.03)
     p       --blue-1    8.99:1           7.73:1     (was 9.11 / 7.41)
     .crumb  --blue-3    5.34:1           4.60:1     (was 5.41 / 4.40)
     .kicker --yellow-4  6.39:1           5.50:1     (was 6.48 / 5.27)

   --blue-3 is the binding ink, not --yellow-4: on the old navy it needed
   alpha 0.787 to hold 4.5:1 and the weak end ran at 0.78, so the breadcrumb
   was fractionally under. On this tint its floor is 0.735. Nothing over an
   image is allowed a lighter scrim than 74%.
   -------------------------------------------------------------------------- */
.band {
  position: relative;
  /* --hero is set per band by app.js, from the inlined data URI. It is the one
     thing about a band that cannot be known at build time. */
  background-color: var(--gal);
  background-image: var(--hero, none);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--gal-ink);
  isolation: isolate;
}
.band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  /* rgba(), not color-mix(): see --gal-rgb in 02-tokens.css. A dropped
     scrim would put white text straight onto a photograph. */
  background: linear-gradient(105deg,
    rgba(var(--scrim-rgb), .78) 0%,
    rgba(var(--scrim-rgb), .78) 42%,
    rgba(var(--scrim-rgb), .74) 100%);
}
/* The two-column bands darken the text's half: the left side by side, the
   top once they stack (see RESPONSIVE). The far half stays at the 74% floor,
   so no ink loses contrast; the panel carries its own tint on top. */
.hero::before, .feature::before {
  background: linear-gradient(to right,
    rgba(var(--scrim-rgb), .9) 0%,
    rgba(var(--scrim-rgb), .9) 40%,
    rgba(var(--scrim-rgb), .74) 60%,
    rgba(var(--scrim-rgb), .74) 100%);
}
.band .in { padding-top: 3.25rem; padding-bottom: 3.25rem; }
.band h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); color: var(--gal-ink); }
.band h2 { color: var(--gal-ink); }
.band p { color: var(--gal-ink-2); }

/* Home gets a taller band and the two-column split. */
.hero .in {
  padding-top: 4.5rem; padding-bottom: 4.5rem;
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 2.75rem; align-items: end;
}
.hero h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); max-width: 22ch; }
.hero .sub {
  margin: 1rem 0 0; font-size: 1.12rem; color: var(--gal-ink-2); max-width: 46ch;
}
.hero .free {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: 1.35rem; padding: .4rem .9rem;
  background: var(--gal-accent); color: var(--on-yellow);
  font-weight: 700; font-size: .84rem; letter-spacing: .1em;
  text-transform: uppercase; border-radius: var(--circle);
}

/* A panel on a band. Tinted with the band's own navy, not with white.

   White at 9% was the first version, and it lightens the very ground its own
   text sits on. Worst case - a pure white region of the photograph under the
   78% end of the scrim, then 9% white on top - puts the panel heading
   (--gal-accent) at 4.12:1, under the 4.5:1 this project holds to. A 45% navy
   tint darkens instead: the same worst case gives 7.34:1 for the heading,
   10.3:1 for --gal-ink-2 body text and 11.2:1 for white. rgba() rather than
   color-mix() because this one is load-bearing - see 02-tokens.css. */
.visit-panel {
  background: rgba(var(--gal-rgb), .45);
  border: 1px solid var(--gal-hair);
  border-radius: .5rem; padding: 1.35rem 1.4rem;
}
.visit-panel h2, .visit-panel .panel-h {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gal-accent); margin-bottom: .9rem;
}

/* A tick list inside a band: --color-6 is only 3.43:1 on the navy, which
   clears 3:1 for an icon but reads as dim. The band's own accent instead. */
.band .ticks li { color: var(--gal-ink-2); }
.band .ticks .icon { color: var(--gal-accent); }
.visit-row { display: flex; gap: .7rem; padding: .55rem 0; border-top: 1px solid var(--gal-hair); }
.visit-row:first-of-type { border-top: 0; padding-top: 0; }
.visit-row .icon { color: var(--gal-ink-3); margin-top: .22rem; }
.visit-row b { display: block; color: var(--gal-ink); font-weight: 600; font-size: .93rem; }
.visit-row span { display: block; color: var(--gal-ink-2); font-size: .855rem; line-height: 1.45; }
.visit-row a { color: var(--gal-ink-2); }

/* --------------------------------------------------------------------------
   BLOCKS — block-list/block-container.css: a white card on the gray ground.
   -------------------------------------------------------------------------- */
.block { padding: 3rem 0; }
.block.tight { padding: 1.75rem 0 3rem; }
.block--container {
  max-width: var(--max-width); margin: 0 auto;
  background: var(--bg-color);
  border-radius: .4rem; box-shadow: var(--dropshadow-sm);
  padding: 2.25rem clamp(1rem, 3vw, 2.5rem) 2.5rem;
}
/* The county's section heading: 2em / 800, over a 12.5rem blue bar with
   asymmetric radii. Verbatim from block-container.css by way of v2, where it
   is called their most recognisable single detail - which is why v3 gets the
   bar rather than the left rule it had before. Poppins 800 is embedded for it. */
.block--container > h2 {
  color: var(--contrast);
  display: flex;
  flex-direction: column;
  font-size: 2em;
  font-weight: 800;
  margin-bottom: 1em;
}
.block--container > h2::before {
  background: var(--color-6);
  border-bottom-left-radius: 5rem;
  border-top-right-radius: 5rem;
  content: "";
  height: .5rem;
  margin-bottom: .5rem;
  width: 12.5rem;
  max-width: 100%;
}
/* The lede belongs to the heading, so it closes the gap the 1em leaves. */
.block--container > h2 + .lede { margin: -1em 0 1.75rem; }

/* block-container.css: an h4 with a 4px blue left rule, applied to an h3 (and
   on the home page an h2) so no outline skips a level. Also v2's. */
.rule-h {
  display: flex;
  font-size: 1.5rem;
  font-weight: 200;
  line-height: 1.2;
  color: var(--contrast);
  margin: 0 0 1rem;
}
.rule-h::before {
  align-self: stretch;
  background: var(--color-6);
  border-bottom-right-radius: .5rem;
  border-top-left-radius: .5rem;
  content: "";
  margin-right: 1rem;
  width: 4px;
  flex: none;
}
/* One h3 size across the site. .rule-h is worn by an h2 on the home page and
   an h3 everywhere else, so the size is narrowed to the h3 rather than taken
   off the class - the h2 keeps block-container.css's 1.5rem. */
h3.rule-h { font-size: 1rem; }

.def > div + div .rule-h { margin-top: 2rem; }

.prose p { margin: 0 0 1rem; max-width: 74ch; }
.prose p:last-child { margin-bottom: 0; }
/* A bare URL is one unbreakable word: horrycountylegacyproject.squarespace.com
   on /learn/ is 356px wide and pushed the whole page sideways at 345px. Let
   these break instead. */
.prose a, .def a { color: var(--accent-text); overflow-wrap: anywhere; }
.prose a { color: var(--accent-text); }

/* A dark full-bleed feature between two white blocks. */
.feature { padding: 0; }
.feature .in { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.feature h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }

/* A band heading takes the same bar. --color-6 is only 3.4:1 on the navy, so
   the bar uses the band's own accent; the text uses the band's ink. */
.band h2 {
  color: var(--gal-ink);
  display: flex;
  flex-direction: column;
  font-weight: 800;
}
.band h2::before {
  background: var(--gal-accent);
  border-bottom-left-radius: 5rem;
  border-top-right-radius: 5rem;
  content: "";
  height: .5rem;
  margin-bottom: .5rem;
  width: 12.5rem;
  max-width: 100%;
}
/* ...but not the small uppercase panel headings inside a band. */
.visit-panel h2 { display: block; font-weight: 600; }
.visit-panel h2::before { content: none; }

/* --------------------------------------------------------------------------
   BUTTONS — library/buttons
   -------------------------------------------------------------------------- */
.button {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .6rem 1.15rem; border-radius: var(--circle);
  font: inherit; font-size: .9rem; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.primary-button-color { background: var(--yellow-4); color: var(--on-yellow); }
.primary-button-color:hover { background: var(--yellow-5); }
.secondary-button {
  background: transparent; color: var(--accent-text); border-color: var(--hair-ui);
}
.secondary-button:hover { background: var(--wash); border-color: var(--color-6); }
.band .secondary-button, .gal .secondary-button {
  color: var(--gal-ink); border-color: var(--gal-hair);
}
.band .secondary-button:hover, .gal .secondary-button:hover {
  background: color-mix(in srgb, var(--lightest) 12%, transparent);
  border-color: var(--gal-ink-3);
}
.button-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.75rem; }

.chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .35rem .8rem; border-radius: var(--circle);
  border: 1px solid var(--hair-ui); background: transparent;
  color: var(--contrast); font: inherit; font-size: .82rem; cursor: pointer;
}
.chip:hover { border-color: var(--color-6); }
.chip[aria-pressed="true"] {
  background: var(--color-8); border-color: var(--color-8);
  color: var(--lightest); font-weight: 600;
}
.chip .dot { width: .6rem; height: .6rem; border-radius: var(--circle); background: var(--c, var(--color-5)); }
.chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* --------------------------------------------------------------------------
   GRIDS
   -------------------------------------------------------------------------- */
/* Every auto-fit floor is wrapped in min(..., 100%). A bare minmax(19rem, 1fr)
   cannot shrink below 19rem, so on a 320px phone .g2's cards ran 15px past the
   screen and took the page with them. min() lets the track collapse to the
   container instead. */
.grid { display: grid; gap: 1.25rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); }
.split { display: grid; gap: 2rem; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

/* --------------------------------------------------------------------------
   FOOTER — controls/control-footer.css, _Footer.cshtml
   -------------------------------------------------------------------------- */
.main-footer {
  display: flex; flex-direction: column;
  background: var(--footer); color: var(--lightest);
}
.footer-in {
  max-width: var(--max-width); margin: 0 auto; width: 100%;
  padding: 2.75rem var(--nav-padding) 2rem;
  display: grid; gap: 2rem;
  grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
}
.footer-brand { display: flex; flex-direction: column; gap: .9rem; }
/* hcg-tree-inline.svg is fill="currentColor" throughout, so it takes color. */
.footer-brand svg { width: 3.25rem; height: auto; color: var(--lightest); }
.footer-brand p { margin: 0; font-size: .855rem; color: var(--gray-lt); max-width: 34ch; }
/* Without this the global link color (--accent-text, a dark blue) lands on
   #222 at 2.11:1. Found by the probe, not by looking. */
.footer-brand a { color: var(--lightest); }
.footer-brand b { color: var(--lightest); font-size: 1rem; display: block; }
.footer-col h2 {
  font-size: .76rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--yellow-4); margin-bottom: .7rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.footer-col a { color: var(--lightest); text-decoration: none; font-size: .875rem; }
.footer-col a:hover { text-decoration: underline; }
.footer-col p { margin: 0 0 .4rem; font-size: .875rem; color: var(--gray-lt); }
.footer--bottom { border-top: 1px solid rgba(var(--light-rgb), .18); }
.footer--bottom .in {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  padding-top: 1rem; padding-bottom: 1.25rem;
  font-size: .8rem; color: var(--gray-lt);
}
.footer--bottom a { color: var(--gray-lt); }
.social-media { display: flex; gap: .5rem; }
.social-media a {
  display: grid; place-items: center; width: 2rem; height: 2rem;
  border: 1px solid rgba(var(--light-rgb), .3);
  border-radius: var(--circle); color: var(--lightest);
}
.social-media a:hover { background: color-mix(in srgb, var(--lightest) 14%, transparent); }
.social-media .icon { width: 1rem; height: 1rem; }

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 62rem) {
  .hero .in { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  .split { grid-template-columns: 1fr; }
  .hero::before, .feature::before {
    background: linear-gradient(to bottom,
      rgba(var(--scrim-rgb), .9) 0%,
      rgba(var(--scrim-rgb), .9) 40%,
      rgba(var(--scrim-rgb), .74) 60%,
      rgba(var(--scrim-rgb), .74) 100%);
  }
}

/* The row collapses behind Menu and the items stack. This was briefly 65rem:
   the flat bar of thirteen items needed 1015px, so collapsing at 992px left a
   dead zone from 992-1015 where the Membership pill was cut off the right
   edge. Grouping took the row from 986px to 395px, so the dead zone is gone
   and the breakpoint is back with the layout queries at 62rem. */
@media (max-width: 62rem) {
  .nav-toggle { display: flex; }
  .nav--listings {
    align-items: stretch;
    display: none;
    flex-direction: column;
    padding-bottom: .75rem;
    width: 100%;
  }
  .nav--listings.open { display: flex; }
  .nav--listings a {
    border-bottom: 1px solid var(--hair-soft);
    padding: .7rem .25rem;
  }
  .nav--listings a[aria-current="page"] { border-bottom-color: var(--color-6); }
  /* Stacked, a floating panel makes no sense: the groups become accordions. */
  .nav-group {
    border-bottom: 1px solid var(--hair-soft);
    justify-content: space-between;
    padding: .7rem .25rem;
    width: 100%;
  }
  .nav-menu {
    position: static; min-width: 0; padding: 0 0 0 .9rem;
    border: 0; border-radius: 0; box-shadow: none; background: none;
  }
  .nav-menu a { padding: .6rem .25rem; }
  .nav-cta { margin: .6rem 0 0; }
  .nav-cta a { justify-content: center; text-align: center; }
}

@media (max-width: 54rem) {
  .band .in { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .hero .in { padding-top: 3rem; padding-bottom: 3rem; }
  .block { padding: 1.75rem 0; }
  .block--container { border-radius: 0; }
}