/*
 * ============================================================================
 * MAIN STREET CIVIC — the first SIGNATURE pack. ADR-0021.
 * ============================================================================
 *
 * Cut from the direction comp `comp/os-website-direction-a-main-street`, whose thesis
 * this keeps: the ground is a Main Street at dusk, the lamps are on, and reading
 * surfaces are painted sign boards hung along it.
 *
 * ----------------------------------------------------------------------------
 * WHY THIS PACK DRAWS THE CHROME, WHEN THE OTHER FOUR DO NOT.
 *
 * ADR-0021's ruling of 2026-08-31 has two cases. A STANDARD pack styles a header the
 * tenant selected — "The Headers/Menu, Footers, Directory Cards, Events, Jobs, and other
 * website components should serve as there own tools that the pack just helps style".
 * A SIGNATURE pack owns its chrome, because the chrome IS the design: "that pack would
 * have to own that chrome because it literally is the site and to change it would be a
 * design change not a menu change." The street below is that second case, and it is the
 * only thing in this file that claims it.
 *
 * THE CONSTANT HOLDS EITHER WAY, and it is the reason the question was ever asked:
 * MENU CONTENT FLOWS THROUGH. Every storefront on the street is one `li` of the tenant's
 * own menu, drawn by CSS out of markup this pack did not write and cannot see the
 * contents of. Add a page in PageStudio and put it in the menu and the street grows a
 * shop; rename it to something long and the shop widens; remove it and the street
 * closes up. No code changes for any of that, because there is no code — a signature
 * chrome that hardcoded its own entries is exactly what the ruling rejects.
 *
 * That is also why nothing here is a new `data-nav-format`. A format id is a thing
 * somebody selects, and this is not selectable: it arrives with the pack.
 * ----------------------------------------------------------------------------
 *
 * ----------------------------------------------------------------------------
 * WHAT IT STILL OBEYS.
 *
 * OVERRIDES ONLY (decision 3). `site.css` is loaded first and is complete; a section
 * this file never mentions still renders sanely on the night ground.
 *
 * NO SCRIPT (decision 2). Every state below is CSS: `:hover`, `:focus-visible`,
 * `[aria-current]`, `:has()`. A pack that needed JavaScript would be a codebase.
 *
 * COLOURS COME THROUGH THE THEME WHERE THE TENANT HAS SET ONE, `parkland.css`'s own
 * arrangement: each token below is `var(--brand-*, <the comp's value>)`. A chamber that
 * has saved no theme gets the dusk palette exactly as the comp drew it, which is what
 * makes this pack finished with no photography, no logo and no brand guide.
 * ----------------------------------------------------------------------------
 */

.site {
  /*
   * --- the dusk palette ---
   *
   * ONLY THE `--brand-*` SLOTS ARE READ, and that is not a style preference — it is the
   * only set that is actually absent when a tenant has chosen nothing. `--accent`,
   * `--accent-teal` and `--accent-gold` are DECLARED in `site.css`'s own `:root` with the
   * house blue, teal and yellow, so `var(--accent, …)` never reaches its fallback and a
   * pack written against them wears the base palette instead of its own. Measured on the
   * demo chamber at 1440 before this line existed: blue and teal awnings and a yellow
   * ticket button on a dusk street.
   *
   * The five below ARE emitted only where a tenant saved them (`themeVariables`,
   * `render/theme-style.ts` — "an absent field sets no property"), so each fallback here
   * is what an untouched chamber renders. The lamp is literal on purpose: a signature
   * pack's light source is the design, and a chamber that wants a different one wants a
   * different pack.
   */
  --ms-night: var(--brand-quaternary, #0f1d19);
  --ms-night-deep: #0a1512;
  --ms-bone: var(--brand-white, #f3eee2);
  --ms-ink: var(--brand-black, #16211c);
  --ms-lamp: #e9b44c;
  --ms-patina: var(--brand-quinary, #6e9c8c);
  --ms-awning: var(--brand-free, #8c3b33);

  --ms-bone-dim: #c9d3cb;
  --ms-ink-soft: #46514a;
  --ms-brass: #8a5a12;
  --ms-rule-night: rgb(110 156 140 / 0.28);
  --ms-rule-bone: rgb(22 33 28 / 0.16);

  /* --- the three faces, self-hosted (declared in apps/sites/src/app/layout.tsx) --- */
  --ms-display: var(--face-fraunces, 'Fraunces'), Georgia, 'Times New Roman', serif;
  --ms-body: var(--face-public-sans, 'Public Sans'), system-ui, -apple-system, 'Segoe UI',
    sans-serif;
  --ms-sign: var(--face-barlow-condensed, 'Barlow Condensed'), 'Arial Narrow',
    'Helvetica Neue', sans-serif;

  /* --- rhythm --- */
  --ms-gutter: clamp(20px, 5vw, 56px);
  --ms-band: clamp(3.5rem, 8vw, 7.5rem);
  --ms-page: 76rem;

  /* --- the street's own measures --- */
  --ms-storey: 11.5rem;
  --ms-kerb: 2.25rem;

  background: var(--ms-night);
  color: var(--ms-bone);
  font-family: var(--ms-body);

  /*
   * ---------------------------------------------------------------------------
   * THE BASE'S OWN SURFACE TOKENS, MOVED TO NIGHT.
   *
   * `site.css` paints every card, rule and tint from `--card`, `--rule` and `--tint`,
   * and each of the eight directory card designs, the plan table and the board reach for
   * them by name. Chasing those selectors one at a time is how a pack turns into a
   * transcript of the base sheet — and it loses, because a design's own selector
   * (`.directory[data-variant='storefront-showcase'] .listing`) outranks anything a pack
   * writes at two classes. Measured before this block existed: the showcase cards stayed
   * `--card` white with this pack's bone ink on them, at 1.54:1.
   *
   * Moving the token instead means every card design this pack has never heard of lands
   * on the night ground already, which is decision 3's promise from the other side.
   * ---------------------------------------------------------------------------
   */
  --card: #17251f;
  --tint: #1c2b24;
  --rule: rgb(110 156 140 / 0.28);
  --paper: var(--ms-night);
  --ground-dark: var(--ms-night-deep);
  --on-ink: var(--ms-bone);
  --on-ink-mute: var(--ms-bone-dim);

  /*
   * The two muted text tokens go with them. They are what every secondary line this pack
   * has not named by hand resolves to — a member's own detail page is the case that
   * showed it, where "ESTABLISHED", "WEBSITE" and the description were all still the
   * base's blue-grey `--ink-mute` sitting on a green night.
   */
  --ink-soft: var(--ms-bone-dim);
  --ink-mute: var(--ms-bone-dim);
  --kicker: var(--ms-lamp);
  --kicker-on-ink: var(--ms-lamp);
  --kicker-ink: var(--ms-lamp);
}

/*
 * A painted board is the one place the light tokens come back, so a base rule reaching
 * for `--card` INSIDE a bone section gets a bone answer rather than a night one.
 */
.site .text,
.site .faq,
.site .plans,
.site .contact,
.site .split {
  --card: #fbf8f0;
  --tint: #ece5d5;
  --rule: rgb(22 33 28 / 0.16);
  --ink-soft: var(--ms-ink-soft);
  --ink-mute: var(--ms-ink-soft);
  --kicker: var(--ms-brass);
  --kicker-ink: var(--ms-brass);
}

/*
 * A signature pack sets the type itself. `site.css` hands `.site` the tenant's chosen
 * body face here; this overrides it deliberately, because the faces ARE the design in
 * the same way the street is — a chamber that wanted its own font wants a different pack.
 */

.site-main {
  background: var(--ms-night);
}

/* ==========================================================================
   TYPE
   ========================================================================== */

.site h1,
.site h2,
.site h3,
.site h4 {
  font-family: var(--ms-display);
  font-variation-settings:
    'SOFT' 32,
    'WONK' 1,
    'opsz' 120;
  font-weight: 620;
  letter-spacing: -0.014em;
  line-height: 1.05;
  text-wrap: balance;
}

.site h1 {
  font-size: clamp(2.5rem, 6vw, 4.9rem);
}

.site h2 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
}

.site h3 {
  font-size: clamp(1.22rem, 2vw, 1.55rem);
  font-variation-settings:
    'SOFT' 32,
    'WONK' 1,
    'opsz' 40;
  letter-spacing: -0.005em;
}

.site p,
.site li,
.site dd,
.site dt {
  font-family: var(--ms-body);
}

.site ::selection {
  background: var(--ms-lamp);
  color: var(--ms-night);
}

/*
 * A kicker is a painted sign line: condensed, spaced, with a rule struck out ahead of
 * it. The base already renders one; this changes what it is made of.
 */
.site .kicker,
.site .showcase-kicker,
.site .listing-letter,
.site .directory-count,
.site .event-when,
.site .post-when {
  font-family: var(--ms-sign);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ms-lamp);
}

.site .showcase-kicker::before,
.site .kicker::before {
  content: '';
  display: inline-block;
  width: 2.1rem;
  height: 1px;
  margin-right: 0.75rem;
  vertical-align: middle;
  background: currentColor;
}

/* ==========================================================================
   THE STREET — the masthead this pack owns
   ==========================================================================

   The anatomy, once, because the rest of this section is unreadable without it. Every
   piece is drawn from markup the CMS already emits; nothing was added for it.

     header.site-header ......... the sky, and the pavement at its foot
       ::before ................. the town's own light thrown back into the sky
       ::after .................. the road, the kerb line and the gutter
     a.site-brand ............... the chamber's hanging sign, on its bracket
     nav.site-nav ............... the row itself (and, on a phone, the walk along it)
     li.menu-item ............... ONE STOREFRONT — one entry of the tenant's menu
       ::before ................. the cornice and roofline
       ::after .................. the awning
     li > a ..................... the shop's own painted sign, and the whole target
       ::before ................. the lit window above the sign
       ::after .................. the pool of lamp light on the pavement
     ul.menu-children ........... the lit upper-storey windows of a branch

   Six facade recipes cycle on `:nth-child(6n)`, so a street of four shops and a street
   of eleven are both a street rather than a repeated tile. */

.site-header {
  position: relative;
  z-index: 1000;
  display: block;
  padding: 0;
  border-bottom: none;
  background:
    linear-gradient(178deg, #0e1c2a 0%, #2f3a45 38%, #6e4237 78%, #8a5230 100%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  overflow: hidden;
  isolation: isolate;
}

/*
 * The bloom: the lamps' own light thrown back up into the sky. Two soft pools rather
 * than one wash, so the sky is brightest where the street below is busiest.
 */
.site-header::before {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 68%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      120% 100% at 22% 100%,
      rgb(233 180 76 / 0.17) 0%,
      rgb(233 180 76 / 0) 58%
    ),
    radial-gradient(
      110% 100% at 74% 100%,
      rgb(233 180 76 / 0.13) 0%,
      rgb(233 180 76 / 0) 56%
    );
}

/* The road: asphalt, a kerb hairline, and the gutter shadow the buildings stand in. */
.site-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--ms-kerb);
  z-index: 3;
  pointer-events: none;
  /*
   * The road has to be a different SUBSTANCE from the night behind it, or the buildings
   * float. Asphalt is lighter than the sky at this hour and catches the lamps; the kerb
   * is the hairline where it stops.
   */
  background: linear-gradient(to bottom, #33403a 0%, #232e29 42%, #17211d 100%);
  box-shadow:
    inset 0 1px 0 rgb(200 214 202 / 0.34),
    inset 0 2px 0 rgb(0 0 0 / 0.5),
    inset 0 14px 16px -12px rgb(0 0 0 / 0.7);
}

/* --- the chamber's own hanging sign --- */

.site-brand {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 1.15rem var(--ms-gutter) 0;
  min-height: 44px;
  text-decoration: none;
}

.site-header .site-name {
  font-family: var(--ms-display);
  font-variation-settings:
    'SOFT' 32,
    'WONK' 1,
    'opsz' 40;
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  font-weight: 620;
  letter-spacing: -0.01em;
  color: var(--ms-bone);
  text-shadow: 0 1px 10px rgb(9 19 16 / 0.85);
}

.site-brand:hover .site-name {
  color: var(--ms-lamp);
}

.site-header .site-logo {
  filter: drop-shadow(0 1px 10px rgb(9 19 16 / 0.85));
}

/* --- the row --- */

/*
 * Sky above the roofline. The tallest of the six recipes lifts its cornice 1.6rem above
 * its facade, so without room here the roofs are cut off by the header's own `overflow`
 * — which is what happened the first time this was rendered.
 */
.site-header .site-nav {
  position: relative;
  z-index: 2;
  padding: clamp(2rem, 5vw, 4rem) var(--ms-gutter) 0;
}

.site-header .menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 0;
  margin: 0;
  padding: 0;
  width: min(var(--ms-page), 100%);
  margin-inline: auto;
  min-height: calc(var(--ms-storey) + var(--ms-kerb));
}

/*
 * A street with nothing on it is still a street. An empty menu leaves the sky and the
 * road and draws no shops — the honest empty state, and the one a brand-new tenant sees
 * before anybody has made a page.
 */
.site-header .menu:empty {
  min-height: calc(var(--ms-kerb) + 3rem);
}

/* ---------- one storefront ---------- */

.site-header .menu > li {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 6.5rem;

  /*
   * THE LIFT IS THE BUILDING'S HEIGHT, not just its cornice's. The first version moved
   * only the parapet and every facade still began on the same line, so the row read as
   * one long shed with five hats on it. Bottoms stay aligned — they are all standing on
   * the same road — and the tops step.
   */
  height: calc(var(--ms-storey) + var(--ms-shop-lift));
  margin-bottom: var(--ms-kerb);
  align-items: stretch;

  /* The facade. Clapboard siding, drawn rather than photographed. */
  background:
    repeating-linear-gradient(
      to bottom,
      rgb(255 255 255 / 0.045) 0,
      rgb(255 255 255 / 0.045) 1px,
      transparent 1px,
      transparent 9px
    ),
    linear-gradient(to bottom, var(--ms-facade-top) 0%, var(--ms-facade-bottom) 100%);
  box-shadow:
    inset 1px 0 0 rgb(255 255 255 / 0.05),
    inset -1px 0 0 rgb(0 0 0 / 0.35);

  /* Per-shop values the six recipes below fill. */
  --ms-facade-top: #1d2c26;
  --ms-facade-bottom: #16221d;
  --ms-shop-awning: var(--ms-awning);
  --ms-shop-lift: 0rem;
  --ms-on: 0;
}

/*
 * THE SIX RECIPES. Height, facade and awning vary by position in the row, so the
 * skyline steps rather than sitting flat, and the eleventh shop is as much a building
 * as the first. Nothing here knows what any entry says.
 */
.site-header .menu > li:nth-child(6n + 1) {
  --ms-facade-top: #21322b;
  --ms-facade-bottom: #17241e;
  --ms-shop-awning: var(--ms-awning);
  --ms-shop-lift: 0.9rem;
}

.site-header .menu > li:nth-child(6n + 2) {
  --ms-facade-top: #1a2b2c;
  --ms-facade-bottom: #132022;
  --ms-shop-awning: var(--ms-patina);
  --ms-shop-lift: 0rem;
}

.site-header .menu > li:nth-child(6n + 3) {
  --ms-facade-top: #26302a;
  --ms-facade-bottom: #1a241f;
  --ms-shop-awning: #7a5230;
  --ms-shop-lift: 1.6rem;
}

.site-header .menu > li:nth-child(6n + 4) {
  --ms-facade-top: #1c2a30;
  --ms-facade-bottom: #142025;
  --ms-shop-awning: var(--ms-awning);
  --ms-shop-lift: 0.45rem;
}

.site-header .menu > li:nth-child(6n + 5) {
  --ms-facade-top: #232e26;
  --ms-facade-bottom: #18221c;
  --ms-shop-awning: #4f6f66;
  --ms-shop-lift: 1.2rem;
}

.site-header .menu > li:nth-child(6n + 6) {
  --ms-facade-top: #1e2925;
  --ms-facade-bottom: #15201c;
  --ms-shop-awning: #8a5230;
  --ms-shop-lift: 0.2rem;
}

/* A branch with children is a taller building: shop below, offices lit above. */
.site-header .menu > li:has(.menu-children) {
  height: calc(var(--ms-storey) + 3.25rem);
  flex-grow: 1.35;
}

/* The cornice: a parapet cap that oversails the facade by a hair on each side. */
.site-header .menu > li::before {
  content: '';
  position: absolute;
  left: -3px;
  right: -3px;
  top: 0;
  height: 0.85rem;
  background: linear-gradient(to bottom, #2c3a33 0%, #1b2620 100%);
  box-shadow:
    0 2px 0 rgb(0 0 0 / 0.4),
    inset 0 1px 0 rgb(233 180 76 / 0.14);
}

/* The awning, striped and scalloped, hung under the cornice. */
.site-header .menu > li::after {
  content: '';
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  top: 1.15rem;
  height: 1.5rem;
  background: repeating-linear-gradient(
    90deg,
    var(--ms-shop-awning) 0,
    var(--ms-shop-awning) 0.62rem,
    rgb(243 238 226 / 0.82) 0.62rem,
    rgb(243 238 226 / 0.82) 1.24rem
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 72%,
    92% 100%,
    84% 72%,
    76% 100%,
    68% 72%,
    60% 100%,
    52% 72%,
    44% 100%,
    36% 72%,
    28% 100%,
    20% 72%,
    12% 100%,
    4% 72%,
    0 100%
  );
  filter: brightness(calc(0.86 + var(--ms-on) * 0.28));
  transform: translateY(0);
}

/* ---------- the shop's own sign, which is also the whole target ---------- */

.site-header .menu > li > a,
.site-header .menu > li.menu-heading > span {
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  bottom: 0.9rem;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.9rem;
  padding: 0.45rem 0.4rem;

  font-family: var(--ms-sign);
  font-size: clamp(0.82rem, 1.15vw, 1rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;

  /* The painted board: bone, with the grain of a brushed sign and a hairline frame. */
  color: var(--ms-ink);
  background:
    linear-gradient(to bottom, #f6f2e8 0%, var(--ms-bone) 55%, #e3dcca 100%);
  box-shadow:
    inset 0 0 0 1px rgb(22 33 28 / 0.28),
    0 2px 0 rgb(0 0 0 / 0.4),
    0 6px 14px -6px rgb(0 0 0 / 0.6);
}

/* A branch heading is a sign that leads nowhere, and says so by not being painted. */
.site-header .menu > li.menu-heading > span {
  color: var(--ms-bone);
  background: rgb(243 238 226 / 0.07);
  box-shadow: inset 0 0 0 1px var(--ms-rule-night);
}

/* The lit window, above the sign. It is what "the lights come on" means here. */
.site-header .menu > li > a::before {
  content: '';
  position: absolute;
  left: 0.35rem;
  right: 0.35rem;
  bottom: calc(100% + 0.5rem);
  height: 3.1rem;

  /*
   * A LIT PANE, NOT A TINT. The first version laid the lamp colour over the facade at
   * half alpha and the result was olive — a dark green facade showing through warm amber
   * averages to mud. Light is nearly opaque and warmest at the top where the fitting is,
   * with the glass frame drawn around it and the spill thrown onto the wall.
   */
  background:
    linear-gradient(to bottom, #ffe6a8 0%, #f2c469 34%, #d99f3d 78%, #b47c28 100%);
  box-shadow:
    inset 0 0 0 1px rgb(60 40 8 / 0.55),
    inset 0 -0.5rem 0.9rem -0.4rem rgb(120 78 20 / 0.6),
    0 0 26px rgb(233 180 76 / 0.32),
    0 0 60px rgb(233 180 76 / 0.16);
  filter: brightness(calc(0.86 + var(--ms-on) * 0.26));
}

/* The pool of lamp light the window throws onto the pavement. */
.site-header .menu > li > a::after {
  content: '';
  position: absolute;
  left: -0.6rem;
  right: -0.6rem;
  top: calc(100% + 0.9rem);
  height: 1.6rem;
  pointer-events: none;
  background: radial-gradient(
    60% 100% at 50% 0%,
    rgb(233 180 76 / calc(0.16 + var(--ms-on) * 0.18)) 0%,
    rgb(233 180 76 / 0) 72%
  );
}

/* ---------- the lit offices above a branch ---------- */

.site-header .menu-children {
  position: absolute;
  left: 0.55rem;
  right: 0.55rem;
  top: 2.9rem;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  border-left: none;
}

.site-header .menu-children a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 1.55rem;
  padding: 0.1rem 0.35rem;

  font-family: var(--ms-sign);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;

  color: #2a1f0a;
  background: rgb(233 180 76 / 0.82);
  box-shadow: inset 0 0 0 1px rgb(233 180 76 / 0.55);
}

.site-header .menu-children a:hover,
.site-header .menu-children a:focus-visible {
  color: #1c1405;
  background: var(--ms-lamp);
  text-decoration: none;
}

/* ---------- the shop lights up ---------- */

.site-header .menu > li:hover,
.site-header .menu > li:focus-within {
  --ms-on: 1;
}

.site-header .menu > li:hover::after,
.site-header .menu > li:focus-within::after {
  transform: translateY(-4px);
}

.site-header .menu > li > a:hover {
  color: var(--ms-ink);
  background: linear-gradient(to bottom, #fffdf6 0%, #f7f3e7 55%, #eae3d1 100%);
  text-decoration: none;
}

/*
 * The shop you are standing in. `aria-current` is the renderer's own marker, so the
 * street answers the address without being told anything twice.
 */
.site-header .menu > li > a[aria-current='page'] {
  color: #241a06;
  background: linear-gradient(to bottom, #f6dfa8 0%, var(--ms-lamp) 60%, #d79f36 100%);
  box-shadow:
    inset 0 0 0 1px rgb(36 26 6 / 0.4),
    0 2px 0 rgb(0 0 0 / 0.4),
    0 0 28px rgb(233 180 76 / 0.42);
}

.site-header .menu > li > a[aria-current='page']::before {
  filter: brightness(1.45);
}

/* The base draws a growing rule under a menu link. There is no room for it on a sign. */
.site-header .menu > li > a::after,
.site-header .menu > li > a:hover::after {
  transform: none;
}

/* Focus has to be visible against a lit window as well as against a dark facade. */
.site-header .menu a:focus-visible,
.site-header .menu span:focus-visible,
.site-header .site-brand:focus-visible {
  outline: 3px solid var(--ms-lamp);
  outline-offset: 3px;
}

/* ==========================================================================
   THE PAGE — night ground, sign boards for the reading
   ========================================================================== */

.site-main > * {
  padding-block: var(--ms-band);
  padding-inline: max(var(--ms-gutter), calc(50% - var(--ms-page) / 2));
}

/*
 * A prose section is a painted board hung on the night, not a hole cut in it. The plate
 * is drawn on the section itself with an inset shadow so it keeps its edges at every
 * width, and the ink on it is the same ink as the shop signs.
 */
.site .text,
.site .faq,
.site .plans,
.site .contact,
.site .split {
  position: relative;
  background: var(--ms-bone);
  color: var(--ms-ink);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.7),
    inset 0 -1px 0 rgb(22 33 28 / 0.18);
}

.site .text h1,
.site .text h2,
.site .text h3,
.site .faq h2,
.site .faq h3,
.site .plans h2,
.site .contact h2,
.site .split h2,
.site .split h3 {
  color: var(--ms-ink);
}

.site .text p,
.site .faq p,
.site .plans p,
.site .contact p,
.site .split p,
.site .prose,
.site .split-body,
.site .contact-details {
  color: var(--ms-ink-soft);
}

.site .plans .kicker,
.site .contact .kicker,
.site .split .kicker,
.site .text .kicker,
.site .faq .kicker {
  color: var(--ms-brass);
}

/* Everything on the night keeps bone ink. */
.site .events,
.site .directory,
.site .listing-band,
.site .posts,
.site .recognition,
.site .board,
.site .sponsors,
.site .stat-band,
.site .showcase,
.site .feature-row,
.site .card-list,
.site .gallery,
.site .video {
  color: var(--ms-bone);
}

.site .events h2,
.site .directory h2,
.site .posts h2,
.site .recognition h2,
.site .board h2,
.site .stat-band h2,
.site .showcase h2,
.site .feature-row h2,
.site .card-list h2,
.site .listing-band-heading {
  color: var(--ms-bone);
}

/* ==========================================================================
   THE OPENING — the sky over the town, not a photograph of it
   ========================================================================== */

.site .hero {
  position: relative;
  background:
    linear-gradient(178deg, #0a1512 0%, #12241e 58%, #1b3128 84%, #24402f 100%);
  color: var(--ms-bone);
  isolation: isolate;
  padding-block: clamp(4.5rem, 11vw, 9rem);

  /*
   * The lamplight below oversails the section by 10% a side so the glow has somewhere to
   * fall off to. Without this it oversails the DOCUMENT: measured at 390, 768 and 1440,
   * every page carrying a hero scrolled sideways by exactly 10% of the viewport, and the
   * one page without a hero did not. `clip` rather than `hidden` because `hidden` on a
   * block ancestor would make a sticky masthead stop sticking.
   */
  overflow: clip;
}

/* Stars, only where the sky is dark enough to hold them. */
.site .hero::before {
  content: '';
  position: absolute;
  inset: 0 0 42% 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #c9d3cb 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 28% 11%, #c9d3cb 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 47% 31%, #e9e4d6 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 66% 16%, #c9d3cb 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 81% 27%, #c9d3cb 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 92% 9%, #c9d3cb 50%, transparent 51%);
  background-repeat: no-repeat;
}

/* The lamplight of the town below, catching the foot of the hero. */
.site .hero::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 45%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    100% 100% at 50% 100%,
    rgb(233 180 76 / 0.12) 0%,
    rgb(233 180 76 / 0) 62%
  );
}

.site .hero h1 {
  color: var(--ms-bone);
  max-width: 17ch;
  text-shadow: 0 2px 22px rgb(9 19 16 / 0.7);
}

.site .hero-sub {
  color: var(--ms-bone-dim);
  max-width: 54ch;
  font-size: clamp(1.05rem, 1.4vw, 1.22rem);
  line-height: 1.6;
}

/* ==========================================================================
   THE STAMPED TICKET — every call to action on this site is one
   ========================================================================== */

.site .hero-action a,
.site .cta-band-action a,
.site .split-action a,
.site .card-action a,
.site .post-action a,
.site .contact form button,
.site .contact-form button,
.site button[type='submit'] {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.8rem 1.35rem;

  font-family: var(--ms-sign);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;

  color: var(--ms-night);
  background: var(--ms-lamp);
  border: none;
  border-radius: 0;
  cursor: pointer;

  /* A ticket has its corners knocked off by the machine that stamped it. */
  clip-path: polygon(
    0 6px,
    6px 0,
    calc(100% - 6px) 0,
    100% 6px,
    100% calc(100% - 6px),
    calc(100% - 6px) 100%,
    6px 100%,
    0 calc(100% - 6px)
  );
}

.site .hero-action a:hover,
.site .cta-band-action a:hover,
.site .split-action a:hover,
.site .card-action a:hover,
.site .post-action a:hover,
.site button[type='submit']:hover {
  filter: brightness(1.07);
  transform: translateY(-2px);
  text-decoration: none;
}

.site .hero-action a:active,
.site .cta-band-action a:active,
.site button[type='submit']:active {
  transform: translateY(0);
}

/*
 * The bold band paints its own button in the base sheet at `.cta-band[data-tone='bold']
 * .cta-band-action a` — three classes, so it beats this pack's two and the ticket came
 * out house yellow on a dusk street. Same shape, one class deeper.
 */
.site .cta-band[data-tone='bold'] .cta-band-action a {
  color: var(--ms-night);
  background: var(--ms-lamp);
}

.site .cta-band[data-tone='bold'] .cta-band-action a:hover {
  color: var(--ms-night);
  background: #f5c86a;
}

.site .cta-band[data-tone='bold'] :focus-visible {
  outline: 3px solid var(--ms-lamp);
  outline-offset: 3px;
}

/* ==========================================================================
   THE CALL TO ACTION — a lamp-lit band across the road
   ========================================================================== */

.site .cta-band {
  background:
    linear-gradient(178deg, #14261f 0%, #1c3327 62%, #24402f 100%);
  color: var(--ms-bone);
  box-shadow:
    inset 0 1px 0 rgb(110 156 140 / 0.3),
    inset 0 -1px 0 rgb(110 156 140 / 0.3);
}

.site .cta-band h2 {
  color: var(--ms-bone);
}

.site .cta-band-body {
  color: var(--ms-bone-dim);
}

/* ==========================================================================
   WHAT IS COMING UP — the chamber's own diary, chalked on a board
   ========================================================================== */

.site .events-plate {
  background: transparent;
}

.site .event-list {
  display: grid;
  gap: 1px;
  background: var(--ms-rule-night);
  box-shadow: 0 0 0 1px var(--ms-rule-night);
}

.site .event {
  background: linear-gradient(to bottom, #16241f 0%, #111d19 100%);
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
}

.site .event:hover {
  background: linear-gradient(to bottom, #1c2e26 0%, #16241f 100%);
}

.site .event h3,
.site .event a {
  color: var(--ms-bone);
}

.site .event a:hover {
  color: var(--ms-lamp);
}

.site .event-when {
  font-family: var(--ms-sign);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ms-lamp);
}

.site .event-venue,
.site .event-summary {
  color: var(--ms-bone-dim);
}

.site .event-cancelled,
.site .event-rescheduled {
  font-family: var(--ms-sign);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8a49c;
}

/*
 * The honest empty states. A chamber with nothing booked says so on the same board it
 * would have listed them on, rather than dropping the section and leaving a gap.
 */
.site .events-empty,
.site .posts-empty,
.site .plans-empty,
.site .board-empty,
.site .directory-empty {
  font-family: var(--ms-sign);
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ms-bone-dim);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  box-shadow: inset 0 0 0 1px var(--ms-rule-night);
}

.site .plans-empty {
  color: var(--ms-ink-soft);
  box-shadow: inset 0 0 0 1px var(--ms-rule-bone);
}

/* ==========================================================================
   THE DIRECTORY — the businesses on the street, as a row of brass plates
   ========================================================================== */

.site .listings {
  display: grid;
  gap: clamp(0.75rem, 1.6vw, 1.1rem);
}

.site .listing {
  position: relative;
  background: linear-gradient(to bottom, #18261f 0%, #12201b 100%);
  padding: clamp(1rem, 2.2vw, 1.5rem);
  box-shadow:
    inset 0 0 0 1px var(--ms-rule-night),
    inset 3px 0 0 var(--ms-lamp);
}

.site .listing:hover {
  background: linear-gradient(to bottom, #1e2f27 0%, #17251f 100%);
  box-shadow:
    inset 0 0 0 1px rgb(110 156 140 / 0.5),
    inset 3px 0 0 var(--ms-lamp);
}

.site .listing-name {
  font-family: var(--ms-display);
  font-variation-settings:
    'SOFT' 32,
    'WONK' 1,
    'opsz' 40;
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  font-weight: 620;
  color: var(--ms-bone);
  text-decoration: none;
}

.site .listing-name:hover {
  color: var(--ms-lamp);
}

.site .listing-category,
.site .listing-description,
.site .listing-meta-line,
.site .listing-phone,
.site .listing-address,
.site .listing-site {
  color: var(--ms-bone-dim);
}

.site .listing-category {
  font-family: var(--ms-sign);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ms-lamp);
}

.site .listing-site:hover,
.site .listing-phone:hover,
.site .listing-address:hover {
  color: var(--ms-lamp);
}

/*
 * The stand-in a member with no logo gets: their initials, painted on the shop window
 * rather than set in the base's blue-grey. A chamber whose members have uploaded nothing
 * — which is every chamber on day one — sees this on every card, so it is the pack's.
 */
.site .listing-art,
.site .board-art,
.site .recognition-art {
  font-family: var(--ms-sign);
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ms-lamp);
  background:
    linear-gradient(to bottom, rgb(233 180 76 / 0.14) 0%, rgb(233 180 76 / 0.05) 100%);
  box-shadow: inset 0 0 0 1px rgb(233 180 76 / 0.24);
  border-radius: 0;
}

.site .listing-letter {
  font-family: var(--ms-sign);
  font-size: 1.1rem;
  letter-spacing: 0.24em;
  color: var(--ms-lamp);
  border-bottom: 1px solid var(--ms-rule-night);
}

/*
 * A CHAMBER WITH NO CATEGORIES YET STILL GETS THE WHOLE COLUMN.
 *
 * The base reserves a 15rem rail beside the results from 1000px up. The demo chamber has
 * no categories on its listings, so that rail renders EMPTY and the directory sat 276px
 * to the right of everything else on the page — measured on `/directory` at 1440. When
 * there is nothing in it, the rail is not there and the results take the page.
 */
@media (min-width: 1000px) {
  .site .directory-layout:has(> .directory-rail:empty) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      'search'
      'results';
  }
}

.site .directory-rail:empty {
  display: none;
}

/* The directory's own controls, on the night. */
.site .directory-filter,
.site .directory-view-choice,
.site .directory-tag,
.site .directory-page,
.site .directory-page-step {
  font-family: var(--ms-sign);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ms-bone-dim);
  border-radius: 0;
}

.site .directory-filter:hover,
.site .directory-view-choice:hover,
.site .directory-page:hover,
.site .directory-page-step:hover {
  color: var(--ms-lamp);
}

.site .directory-filter[aria-current='true'],
.site .directory-view-choice[aria-current='true'],
.site .directory-page[aria-current='page'] {
  color: var(--ms-night);
  background: var(--ms-lamp);
}

.site .directory-count {
  color: var(--ms-bone-dim);
  font-size: 0.86rem;
  letter-spacing: 0.14em;
}

.site .directory input,
.site .directory select,
.site .contact input,
.site .contact textarea,
.site .contact select {
  font-family: var(--ms-body);
  border-radius: 0;
}

.site .directory input,
.site .directory select {
  color: var(--ms-bone);
  background: rgb(243 238 226 / 0.06);
  border: 1px solid var(--ms-rule-night);
}

.site .directory input::placeholder {
  color: var(--ms-bone-dim);
  opacity: 0.85;
}

/* ==========================================================================
   WHAT IT COSTS TO BELONG — plans as tickets on the sign board
   ========================================================================== */

.site .plan {
  background: #fbf8f0;
  color: var(--ms-ink);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--ms-rule-bone);
  padding: clamp(1.25rem, 2.6vw, 2rem);
}

.site .plan h3 {
  font-family: var(--ms-sign);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ms-ink);
}

.site .plan-price {
  font-family: var(--ms-display);
  font-variation-settings:
    'SOFT' 32,
    'WONK' 1,
    'opsz' 60;
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 620;
  color: var(--ms-ink);
}

.site .plan-perks li {
  color: var(--ms-ink-soft);
}

/* ==========================================================================
   FORMS ON THE NIGHT — the join application and the contact form
   ==========================================================================

   `site.css` writes a form label in `--ink` and a field in `--paper`, both of which are
   right on the light ground it was built for and both of which vanish on this one:
   measured on `/join`, every label was near-black on near-black and the fields had no
   visible edge. A pack that moves the ground owes the forms standing on it. */

.site .join-form-field label,
.site .directory-controls label {
  font-family: var(--ms-sign);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ms-lamp);
}

.site .join-form-field input,
.site .join-form-field select,
.site .join-form-field textarea {
  color: var(--ms-bone);
  background: rgb(243 238 226 / 0.07);
  border: 1px solid var(--ms-rule-night);
  border-radius: 0;
}

.site .join-form-field input::placeholder {
  color: var(--ms-bone-dim);
  opacity: 0.8;
}

/*
 * THE CONTACT FORM STANDS ON A PAINTED BOARD, NOT ON THE NIGHT — `.contact` is one of the
 * bone sections above. It therefore gets the ink treatment rather than the lamp one:
 * lamp-on-bone measured 1.78:1 when both forms were styled as one.
 */
.site .contact-form-field label {
  font-family: var(--ms-sign);
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ms-brass);
}

.site .contact-form-field input,
.site .contact-form-field textarea {
  color: var(--ms-ink);
  background: #fffdf7;
  border: 1px solid var(--ms-rule-bone);
  border-radius: 0;
}

.site .contact-form-field input::placeholder,
.site .contact-form-field textarea::placeholder {
  color: var(--ms-ink-soft);
  opacity: 0.85;
}

.site .join-form-field input:hover,
.site .join-form-field select:hover,
.site .join-form-field textarea:hover {
  border-color: var(--ms-patina);
}

.site .contact-form-field input:hover,
.site .contact-form-field textarea:hover {
  border-color: var(--ms-brass);
}

.site .join-form-field input:focus-visible,
.site .join-form-field select:focus-visible,
.site .join-form-field textarea:focus-visible,
.site .contact-form-field input:focus-visible,
.site .contact-form-field textarea:focus-visible,
.site .directory input:focus-visible {
  outline: 3px solid var(--ms-lamp);
  outline-offset: 2px;
  border-color: var(--ms-lamp);
}

.site .join h2,
.site .join p {
  color: var(--ms-bone);
}

.site .join-form-refusal {
  color: #f0b4ac;
}

.site .join-form-sent {
  font-family: var(--ms-sign);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ms-lamp);
}

/* The application's own ticket, which the base names rather than typing. */
.site .join-form-submit {
  font-family: var(--ms-sign);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ms-night);
  background: var(--ms-lamp);
  border: none;
  border-radius: 0;
  min-height: 44px;
  padding: 0.8rem 1.35rem;
  clip-path: polygon(
    0 6px,
    6px 0,
    calc(100% - 6px) 0,
    100% 6px,
    100% calc(100% - 6px),
    calc(100% - 6px) 100%,
    6px 100%,
    0 calc(100% - 6px)
  );
}

.site .join-form-submit:hover:not(:disabled) {
  filter: brightness(1.07);
}

.site .join-form-submit:disabled {
  filter: saturate(0.4);
  cursor: default;
}

/* ==========================================================================
   THE PEOPLE — board and recognition, lettered like a door
   ========================================================================== */

.site .board-name,
.site .recognition-name {
  font-family: var(--ms-display);
  font-variation-settings:
    'SOFT' 32,
    'WONK' 1,
    'opsz' 40;
  color: var(--ms-bone);
}

.site .board-position,
.site .board-employer {
  font-family: var(--ms-sign);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.84rem;
  color: var(--ms-lamp);
}

.site .board-group-title,
.site .recognition-tier {
  font-family: var(--ms-sign);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ms-lamp);
}

.site .board-member,
.site .recognition-member {
  background: linear-gradient(to bottom, #17251f 0%, #121e1a 100%);
  box-shadow: inset 0 0 0 1px var(--ms-rule-night);
  border-radius: 0;
  padding: clamp(1rem, 2vw, 1.4rem);
}

/* ==========================================================================
   THE NUMBERS — a stat is painted large on the side of a building
   ========================================================================== */

.site .stat-band {
  background: linear-gradient(178deg, #101f1a 0%, #16281f 100%);
  box-shadow:
    inset 0 1px 0 var(--ms-rule-night),
    inset 0 -1px 0 var(--ms-rule-night);
}

.site .stat dd,
.site .stat-value {
  font-family: var(--ms-display);
  font-variation-settings:
    'SOFT' 32,
    'WONK' 1,
    'opsz' 120;
  font-weight: 620;
  color: var(--ms-lamp);
}

.site .stat-label {
  font-family: var(--ms-sign);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ms-bone-dim);
}

/* ==========================================================================
   FAQ — a folded notice on the board
   ========================================================================== */

.site .faq-item {
  border-bottom: 1px solid var(--ms-rule-bone);
}

.site .faq-question {
  font-family: var(--ms-sign);
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ms-ink);
}

.site .faq-answer {
  color: var(--ms-ink-soft);
}

/* ==========================================================================
   CARDS AND FEATURES — small boards, same paint
   ========================================================================== */

.site .card,
.site .feature {
  background: linear-gradient(to bottom, #17251f 0%, #121e1a 100%);
  color: var(--ms-bone);
  border-radius: 0;
  box-shadow: inset 0 0 0 1px var(--ms-rule-night);
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
}

.site .card:hover,
.site .feature:hover {
  box-shadow: inset 0 0 0 1px rgb(233 180 76 / 0.45);
}

.site .card h3,
.site .feature h3 {
  color: var(--ms-bone);
}

.site .card-body,
.site .feature-body {
  color: var(--ms-bone-dim);
}

.site .card-picture,
.site .feature-picture,
.site .hero-picture,
.site .split-picture,
.site .gallery-picture {
  border-radius: 0;
}

/* ==========================================================================
   THE FAR END OF THE STREET — the footer
   ========================================================================== */

.site-footer {
  position: relative;
  background:
    linear-gradient(to bottom, var(--ms-night-deep) 0%, #081310 100%);
  color: var(--ms-bone-dim);
  border-top: 1px solid var(--ms-rule-night);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  padding-inline: max(var(--ms-gutter), calc(50% - var(--ms-page) / 2));
}

/* One lamp still burning at the end of the road. */
.site-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 40%;
  pointer-events: none;
  background: radial-gradient(
    60% 100% at 50% 0%,
    rgb(233 180 76 / 0.09) 0%,
    rgb(233 180 76 / 0) 70%
  );
}

.site-footer .site-name {
  font-family: var(--ms-display);
  font-variation-settings:
    'SOFT' 32,
    'WONK' 1,
    'opsz' 40;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: 620;
  color: var(--ms-bone);
}

.site-footer .site-name:hover {
  color: var(--ms-lamp);
}

/* Down here the menu is a list of addresses, not a street. */
.site-footer .menu > li > a,
.site-footer .menu > .menu-heading > span,
.site-footer .menu-children a {
  font-family: var(--ms-sign);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ms-bone-dim);
  background: none;
  box-shadow: none;
  padding: 0.35rem 0;
}

.site-footer .menu > li > a:hover,
.site-footer .menu-children a:hover {
  color: var(--ms-lamp);
  text-decoration: none;
}

.site-footer .menu > li > a[aria-current='page'] {
  color: var(--ms-lamp);
  background: none;
}

.site-footer .menu > li > a::after {
  background: var(--ms-lamp);
}

.site-footer .menu-children {
  border-left: 1px solid var(--ms-rule-night);
}

.site-footer-contact,
.site-footer-legal {
  color: var(--ms-bone-dim);
}

.site-footer-contact-link:hover {
  color: var(--ms-lamp);
}

.site-footer :focus-visible {
  outline: 3px solid var(--ms-lamp);
  outline-offset: 3px;
}

/* ==========================================================================
   A SITE WITH NOTHING ON IT YET
   ========================================================================== */

.site .empty-state {
  color: var(--ms-bone);
  padding-block: clamp(4rem, 12vw, 8rem);
  padding-inline: max(var(--ms-gutter), calc(50% - var(--ms-page) / 2));
}

.site .empty-state h1 {
  color: var(--ms-bone);
}

.site .empty-state p {
  color: var(--ms-bone-dim);
}

/* ==========================================================================
   THE WALK ALONG THE STREET — narrow windows
   ==========================================================================

   A street does not reflow into a stack; you walk further down it. Below 768px the row
   keeps its shape and the NAV scrolls, never the page — `overflow-x` lives on the nav,
   so the document itself has nothing to scroll sideways. Scroll snapping makes it a
   walk from shopfront to shopfront rather than a drag. */

@media (max-width: 767px) {
  .site {
    --ms-storey: 9.5rem;
    --ms-kerb: 1.75rem;
  }

  .site-header .site-nav {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-inline: 0;
  }

  .site-header .site-nav::-webkit-scrollbar {
    display: none;
  }

  /*
   * THE ROW HAS TO BE RESTATED HERE. `site.css` turns the masthead's menu into a COLUMN
   * below 720px (`@media (max-width: 719px) { .site-header .menu { flex-direction:
   * column } }`) — the right answer for a list of words, and the wrong one for a street,
   * which stacked into six shops down the right-hand margin the first time this was
   * rendered at 390. Same specificity as the base's rule, and this sheet loads after it.
   */
  .site-header .menu {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 0;
    width: max-content;
    min-width: 100%;
    padding-inline: var(--ms-gutter);
  }

  .site-header .menu > li {
    flex: 0 0 8.5rem;
    scroll-snap-align: center;
  }

  .site-header .menu > li:has(.menu-children) {
    flex: 0 0 9.5rem;
  }

  .site-header .menu > li > a,
  .site-header .menu > li.menu-heading > span {
    font-size: 0.8rem;
    letter-spacing: 0.06em;
  }
}

/* ==========================================================================
   REDUCED MOTION — the street is finished standing still
   ==========================================================================

   Everything above that moves is a hover or focus response, and each is a transform or
   a filter with a transition attached only under the query below. With motion off the
   page renders complete: the lamps are lit, the awnings hang, the current shop is the
   bright one. Nothing is hidden waiting for a transition that will not come. */

@media (prefers-reduced-motion: no-preference) {
  .site-header .menu > li::after {
    transition: transform 0.22s ease, filter 0.25s ease;
  }

  .site-header .menu > li > a {
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  }

  .site-header .menu > li > a::before {
    transition: filter 0.35s ease;
  }

  .site-header .menu > li > a::after {
    transition: background 0.35s ease;
  }

  .site .hero-action a,
  .site .cta-band-action a,
  .site .split-action a,
  .site .card-action a,
  .site .post-action a,
  .site button[type='submit'] {
    transition: transform 0.16s ease, filter 0.16s ease;
  }

  .site .listing,
  .site .card,
  .site .feature,
  .site .event {
    transition: background 0.2s ease, box-shadow 0.2s ease;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header .menu > li:hover::after,
  .site-header .menu > li:focus-within::after {
    transform: none;
  }
}

/* ==========================================================================
   REDUCED TRANSPARENCY AND FORCED CONTRAST
   ==========================================================================
   The sign boards are already opaque; what softens under these queries is the glow. */

@media (prefers-contrast: more) {
  .site {
    --ms-bone-dim: #e4ece5;
    --ms-ink-soft: #23302a;
    --ms-rule-night: rgb(110 156 140 / 0.6);
  }

  .site-header .menu > li > a {
    box-shadow:
      inset 0 0 0 2px var(--ms-ink),
      0 2px 0 rgb(0 0 0 / 0.5);
  }
}