/* ============================================================================
   CENTRE CITY MALL — COMPONENTS
   ========================================================================== */

/* The scrolling news TICKER stays gone — a headline you cannot read at the
   speed it travels is the clearest "old web" signal a site can send. The
   tenant marquee is back: both reference sites carry one, and unlike the
   ticker it is a picture, not a sentence, so it does not need to be read. */
.ticker { display: none !important; }

/* ================================================================= HEADER
   Transparent over the hero photograph, solid cream once you scroll past it.
   Both reference sites do this and it is worth the extra state: it lets the
   hero image start at the very top of the screen instead of under a bar. */
.site-header {
  position: sticky; top: 0;
  z-index: var(--z-nav);
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-base) var(--e-out),
              background var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
}

/* Over the hero: no bar at all. Only pages that open with a full-bleed image
   set data-hero, so inner pages keep the normal cream header. */
body[data-hero] .site-header:not(.is-stuck) {
  background: linear-gradient(180deg, rgba(12,11,9,.55), transparent);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}
body[data-hero] .site-header:not(.is-stuck) .brand__name,
body[data-hero] .site-header:not(.is-stuck) .brand__name em { color: #fff; }
body[data-hero] .site-header:not(.is-stuck) .brand__sub { color: rgba(255,255,255,.68); }
body[data-hero] .site-header:not(.is-stuck) .nav__link { color: rgba(255,255,255,.82); }
body[data-hero] .site-header:not(.is-stuck) .nav__link:hover { color: #fff; background: rgba(255,255,255,.14); }
body[data-hero] .site-header:not(.is-stuck) .nav__link[aria-current="page"] { color: var(--gold); }
body[data-hero] .site-header:not(.is-stuck) .menu-btn { border-color: rgba(255,255,255,.4); }
body[data-hero] .site-header:not(.is-stuck) .menu-btn__bars span { background: #fff; }
body[data-hero] .site-header:not(.is-stuck) .live-pill {
  border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.12);
  color: #fff; backdrop-filter: blur(6px);
}
body[data-hero] .site-header:not(.is-stuck) .live-pill__label { color: #fff; }

.header-bar {
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-5);
}

/* ---- Wordmark: the mall's C mark + stacked type ---- */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; flex: none; }
.brand__mark { width: 36px; height: 36px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name {
  font-family: var(--sans);
  font-size: 1.05rem; font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--navy);
}
.brand__name em { font-style: normal; font-weight: 700; color: var(--roof); }
.brand__sub {
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--fg-mute); margin-top: 2px;
}

/* ---- Primary nav ----
   Five links, left-aligned next to the wordmark rather than centred in the
   bar. Eight links spread across the full width gave nothing any priority. */
.nav { display: flex; align-items: center; gap: 0.1rem; margin-right: auto; }
.nav__link {
  position: relative;
  padding: 0.5rem 0.8rem;
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--fg-dim);
  transition: color var(--d-fast) var(--e-out), background var(--d-fast) var(--e-out);
  white-space: nowrap;
}
.nav__link:hover { color: var(--fg); background: var(--paper-3); }
.nav__link[aria-current="page"] { color: var(--wine); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }

/* ---- Live status pill: the site's heartbeat ---- */
.live-pill {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.42rem 0.85rem 0.42rem 0.6rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(23,20,15,.025);
  transition: border-color var(--d-base) var(--e-out), background var(--d-base) var(--e-out);
}
.live-pill:hover { border-color: var(--line-2); background: rgba(23,20,15,.05); }
.live-pill__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fg-mute); flex: none;
  position: relative;
}
/* A dot and two words. It used to pulse an expanding ring and tick a live
   clock beside it — motion in the header, permanently, for no reason. */
.live-pill[data-state="open"]    .live-pill__dot { background: var(--roof); }
.live-pill[data-state="closing"] .live-pill__dot { background: var(--poui); }
.live-pill[data-state="opening"] .live-pill__dot { background: var(--poui); }
.live-pill[data-state="closed"]  .live-pill__dot { background: var(--ink-mute); }
.live-pill__label { color: var(--fg); }
.live-pill__time { display: none; }

/* ---- Menu toggle ---- */
.menu-btn {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
}
.menu-btn__bars { width: 18px; height: 12px; position: relative; }
.menu-btn__bars span {
  position: absolute; left: 0; right: 0; height: 1.6px;
  background: var(--fg); border-radius: 2px;
  transition: transform var(--d-base) var(--e-out), opacity var(--d-fast) linear;
}
.menu-btn__bars span:nth-child(1) { top: 0; }
.menu-btn__bars span:nth-child(2) { top: 5.2px; }
.menu-btn__bars span:nth-child(3) { top: 10.4px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(1) { transform: translateY(5.2px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn__bars span:nth-child(3) { transform: translateY(-5.2px) rotate(-45deg); }

/* ---- Mobile drawer ---- */
.drawer {
  position: fixed; inset: var(--header-h) 0 0;
  z-index: calc(var(--z-nav) - 1);
  background: var(--paper);
  padding: var(--s-6) var(--gutter) var(--s-8);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--s-6);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform var(--d-slow) var(--e-out), visibility 0s linear var(--d-slow);
}
.drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.drawer__link {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4);
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: var(--t-md);
  font-weight: 600;
}
.drawer__link span:last-child {
  font-size: var(--t-sm); font-weight: 400;
  letter-spacing: 0; color: var(--fg-mute);
}
.drawer__link[aria-current="page"] { color: var(--wine); }

@media (max-width: 1080px) {
  .nav { display: none; }
  .menu-btn { display: flex; }
  .header-bar { gap: var(--s-4); }
  .brand { margin-right: auto; }
}
@media (max-width: 900px) { .live-pill { padding: .38rem .7rem .38rem .55rem; font-size: .68rem; } }
/* Below this the header needs the room for the wordmark and the menu button,
   and the same status is repeated at the top of every page anyway. */
@media (max-width: 460px) { .live-pill { display: none; } }

/* ================================================================ BUTTONS */
.btn {
  --btn-bg: transparent;
  --btn-fg: var(--fg);
  --btn-bd: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.55rem;
  min-height: 46px;
  padding: 0.7rem 1.35rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--d-fast) var(--e-out),
              border-color var(--d-base) var(--e-out),
              color var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
  white-space: nowrap;
}
/* The sweep-fill is gone. Every button on the site wiped a black panel across
   itself over half a second on hover; it drew the eye to the chrome instead of
   to the label, and it was the loudest thing on any page. A button now just
   gets darker. */
.btn:active { transform: translateY(1px); }

/* Wine for the primary action — it is the red of the "Mall" script on the
   mall's own sign, and it is the one colour on the site that reads as a
   decision. Gold for the big closing call, ink for a quiet one. */
.btn--primary { --btn-bg: var(--wine); --btn-fg: #fff; --btn-bd: var(--wine); box-shadow: var(--shadow-2); }
.btn--primary:hover { --btn-bg: var(--wine-2); --btn-bd: var(--wine-2); box-shadow: var(--shadow-3); }

.btn--gold { --btn-bg: var(--gold); --btn-fg: #241a06; --btn-bd: var(--gold); font-weight: 700; box-shadow: var(--shadow-2); }
.btn--gold:hover { --btn-bg: var(--gold-2); --btn-bd: var(--gold-2); box-shadow: var(--shadow-3); }

.btn--ink { --btn-bg: var(--ink-band); --btn-fg: #fff; --btn-bd: var(--ink-band); }
.btn--ink:hover { --btn-bg: #2A2521; --btn-bd: #2A2521; }

.btn--ghost { --btn-bd: var(--edge); }
.btn--ghost:hover { --btn-bd: var(--ink-mute); background: var(--paper-2); }

/* The outline button on a photograph or a dark band. Every dark ground on the
   site is listed here — miss one and the button renders as near-black text
   on a near-black photograph, which is to say as an empty outlined pill. */
.on-dark .btn--ghost,
.band--ink .btn--ghost,
.band--wine .btn--ghost,
.hero .btn--ghost,
.closing .btn--ghost,
.page-head .btn--ghost,
.site-footer .btn--ghost {
  --btn-bd: rgba(255,255,255,.5); --btn-fg: #fff;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.on-dark .btn--ghost:hover,
.band--ink .btn--ghost:hover,
.band--wine .btn--ghost:hover,
.hero .btn--ghost:hover,
.closing .btn--ghost:hover,
.page-head .btn--ghost:hover,
.site-footer .btn--ghost:hover {
  background: rgba(255,255,255,.2); --btn-bd: #fff;
}

.btn--roof { --btn-bg: var(--roof); --btn-fg: #fff; --btn-bd: var(--roof); }
.btn--roof:hover { --btn-bg: var(--roof-2); --btn-bd: var(--roof-2); }

.btn--quiet { --btn-bd: transparent; color: var(--fg-dim); }
.btn--quiet::before { display: none; }
.btn--quiet:hover { color: var(--fg); --btn-bd: var(--line-2); }

.btn--sm { min-height: 38px; padding: 0.45rem 1rem; font-size: var(--t-xs); }
.btn--lg { min-height: 56px; padding: 0.95rem 1.9rem; font-size: var(--t-base); }
.btn--block { width: 100%; }

.btn__icon { width: 17px; height: 17px; flex: none; }
.btn:hover .btn__icon--go { transform: translateX(3px); }
.btn__icon--go { transition: transform var(--d-base) var(--e-out); }

/* ================================================================== CHIPS */
.chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 36px;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--fg-dim);
  background: rgba(23,20,15,.018);
  cursor: pointer;
  transition: all var(--d-fast) var(--e-out);
  white-space: nowrap;
}
.chip:hover { color: var(--fg); border-color: var(--ink-mute); }
.chip[aria-pressed="true"], .chip.is-on {
  background: var(--ink-band); border-color: var(--ink-band); color: #fff;
}
.chip__icon { width: 14px; height: 14px; flex: none; }
.chip__count {
  font-variant-numeric: tabular-nums;
  opacity: .6; font-weight: 500;
}
.chip--static { cursor: default; }
.chip--static:hover { color: var(--fg-dim); border-color: var(--line-2); }

/* Small inline tag (not interactive) */
.tag {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.tag--demo   { color: var(--poui);  border-color: color-mix(in srgb, var(--poui) 45%, transparent); }
.tag--anchor { color: var(--poui); border-color: color-mix(in srgb, var(--poui) 45%, transparent); }
.tag--avail  { color: var(--roof);   border-color: color-mix(in srgb, var(--roof) 45%, transparent); }

/* ---- Open/closed status badge ---- */
.status {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: var(--t-xs); font-weight: 600;
}
.status__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-mute); flex: none; }
.status[data-state="open"]    { color: var(--roof); }
.status[data-state="open"]    .status__dot { background: var(--roof); }
.status[data-state="closing"] { color: var(--poui); }
.status[data-state="closing"] .status__dot { background: var(--poui); }
.status[data-state="opening"] { color: var(--ink-dim); }
.status[data-state="opening"] .status__dot { background: var(--ink-dim); }
.status[data-state="closed"]  { color: var(--ink-mute); }
.status__detail { color: var(--fg-mute); font-weight: 500; }

/* ============================================================ BRAND TILES */
/* A shop's mark is its monogram, set in the display face on one of the mall's
   four signage colours, chosen by trade. It replaced a system that gave every
   tenant an invented pictogram on a gradient in its own hue — twenty-five
   rainbow panels, each with a thin-line glyph nobody had chosen, which is what
   a generated site looks like.

   Two shops in the same trade share a colour deliberately: repetition is what
   separates a palette from a random number. The ghosted arc is the mall's own
   mark from the sign outside, and it is what makes twenty-two monograms read
   as one family instead of twenty-two initials.

   If a tenant supplies a real logo, `logo` on its record in data.js wins and
   the monogram never renders. */
.tile {
  --tone: var(--navy);
  --tone-ink: #F3EEE2;
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1;
  border-radius: var(--r-md);
  overflow: hidden;
  flex: none;
  background: var(--tone);
  color: var(--tone-ink);
}
/* Tone is set by the attribute, not by the component, so the shop marks, the
   card panels and the hover sweep all read off one list. */
[data-tone="navy"] { --tone: #252742; }
[data-tone="roof"] { --tone: #234E47; }
[data-tone="wine"] { --tone: #7A1A2C; }
[data-tone="poui"] { --tone: #8A560A; }

/* There is no ghosted C in here any more. At 42px on a list row it read as a
   stray hair on the tile, and at 132px on a shop page as a scuff — a mark you
   would ask a printer to clean off rather than a device. The four signage
   colours, repeating by trade, are what make the marks a family. */
.tile__mono {
  position: relative; z-index: 1;
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-size: 0.82em;
  letter-spacing: 0.01em;
  line-height: 1;
  user-select: none;
}
/* A tenant's real logo, when one has been supplied. */
.tile__logo {
  position: relative; z-index: 1;
  width: 68%; height: 68%;
  object-fit: contain;
}

.tile__ghost { display: none; }

.tile--sm { width: 42px; font-size: 1.15rem; border-radius: var(--r-sm); }
.tile--md { width: 62px; font-size: 1.7rem; }
.tile--lg { width: 96px; font-size: 2.6rem; border-radius: var(--r-lg); }
.tile--xl { width: 132px; font-size: 3.6rem; border-radius: var(--r-xl); }

/* ============================================================ STORE CARDS */
.card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out);
}
.card:hover {
  border-color: transparent;
  transform: translateY(-8px);
  box-shadow: var(--shadow-lift);
}

/* The card is the container, so the panel and the mark inside it both scale off
   the CARD's width — the same card looks right at four across, at three on the
   food page, and at two on a phone, with no breakpoint list to keep in step. */
.store-card { container-type: inline-size; min-height: 100%; }

/* ---- the mark panel -------------------------------------------------------
   The shopfront. A 5:4 panel carrying the shop's mark, on a tint of that
   shop's tone rather than a slab of it — four across and seven rows deep, full
   strength would be a swatch book. `container-type` is what lets the monogram,
   the arc and the pill all scale off the CARD's width instead of the
   viewport's, so the panel looks the same at four across and at one. */
.store-card__panel {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  /* 9%/4% was so close to the cream ground that at four across the whole grid
     read as one beige field with letters on it — the tints were doing no work
     and the shop's own colour was invisible. 17%/7% is still a mat rather than
     a slab, and now you can see the categories group by colour down the page. */
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--tone) 17%, var(--paper)),
      color-mix(in srgb, var(--tone) 7%, var(--paper)));
  border-bottom: 1px solid var(--line);
  transition: background var(--d-slow) var(--e-out);
}
/* On hover the mat deepens toward the shop's colour, so the card answers in
   its own hue rather than just lifting. */
.card:hover .store-card__panel {
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--tone) 30%, var(--paper)),
      color-mix(in srgb, var(--tone) 14%, var(--paper)));
}
/* No ghosted device in here. The mall's arc works at 42px on a list row, where
   it reads as the sign outside; blown up to half a panel and screened back to
   16% it reads as a scuff on the paper, which is exactly the accidental-looking
   ornament this site has been getting rid of. The panel is a mat. */
.store-card__mark {
  position: relative; z-index: 1;
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  font-size: 21cqi;
  line-height: 1;
  letter-spacing: 0.005em;
  color: var(--tone);
  user-select: none;
  transition: transform var(--d-slow) var(--e-out);
}
img.store-card__mark {
  width: 74%; height: 74%;
  object-fit: contain;
  mix-blend-mode: multiply;   /* melts a logo file's own white box into the mat */
}
.card:hover .store-card__mark { transform: scale(1.09) rotate(-1.5deg); }

/* On a wide card — three across on the food page, or two on a tablet — a 5:4
   panel becomes a tall field of tint with a small mark adrift in the middle of
   it. Above 330px the panel gets shallower and the mark stops growing. */
@container (min-width: 330px) {
  .store-card__panel { aspect-ratio: 16 / 10; }
  .store-card__mark { font-size: 70px; }
}

/* The trade, labelling the mark. Up here it names the panel; under the shop
   name it was competing with the name for the first line you read. */
.store-card__pill {
  position: absolute; left: .7rem; top: .7rem; z-index: 2;
  padding: .28rem .6rem;
  border-radius: var(--r-full);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(4px);
  font-size: .68rem; font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
}

.store-card__body {
  display: flex; flex-direction: column; gap: .5rem;
  padding: var(--s-4) var(--s-5) var(--s-5);
  flex: 1;
}
/* Shop names read better in the text face at this size. Fraunces at 1.1rem
   with the optical-size axis dialled down was fighting the body copy. */
.store-card__name {
  font-family: var(--sans);
  font-size: var(--t-md);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
/* `flex: 1` and -webkit-line-clamp do not co-operate: flex grows the box past
   the clamp height, so a third line escapes and prints over the rule beneath
   it. The blurb is now a fixed two lines and the FOOTER takes the slack, which
   is also what aligns the status line across a row of uneven cards. */
.store-card__blurb {
  font-size: var(--t-sm); color: var(--fg-dim); line-height: 1.55;
  flex: none;
  max-height: 3.1em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Status on the left, place on the right. The status string is the variable
   one ("Opens tomorrow 10 am" vs "Open until 6 pm"), so it is the one allowed
   to shrink; the unit number never wraps, because a half-wrapped "Shop 49B"
   is worse than no shop number at all. */
.store-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}
.store-card__foot > .status { min-width: 0; }
.store-card__floor {
  flex: none;
  font-size: var(--t-xs); color: var(--fg-mute);
  white-space: nowrap;
}
/* Quiet corner arrow, bottom-right of the panel. It rides in on hover, so it
   is an affordance on a pointer and simply absent on a phone, where the whole
   card is the tap target anyway. */
.store-card__go {
  position: absolute; right: .7rem; bottom: .7rem; z-index: 2;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tone); color: var(--paper);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}
.card:hover .store-card__go { opacity: 1; transform: translateY(0); }
.store-card__go svg { width: 14px; height: 14px; }

/* Tone signature along the foot of the card, drawn in on hover. */
.store-card__sweep {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--tone);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--d-slow) var(--e-out);
}
.card:hover .store-card__sweep { transform: scaleX(1); }

/* Stretched link keeps the whole card clickable without nesting anchors. */
.stretch::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.store-card__foot, .store-card .tag { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .store-card__go { opacity: 1; transform: none; }
  .store-card__sweep { transform: scaleX(1); }
  .card:hover .store-card__mark { transform: none; }
}

/* Available-unit variant */
.card--avail { background: transparent; border-style: dashed; border-color: color-mix(in srgb, var(--roof) 30%, transparent); }
.card--avail:hover { border-color: var(--roof); }

/* ================================================================== STATS
   Huge gold Fraunces numerals on the ink band. This is the single most
   recognisable thing on brentwoodmall.serversrus.net — 38 / 3 / 24-7 / 2022
   set at about 4rem in gold on near-black — and it is exactly the kind of
   moment this site had none of. Four small ink numbers on cream said nothing;
   four enormous gold ones say "this is a real place, at this scale". */
.stat { padding: 0; border-top: 0; }
.stat__value {
  font-family: var(--display);
  font-size: clamp(3rem, 6.4vw, 6rem);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-variation-settings: 'SOFT' 18, 'WONK' 0, 'opsz' 144;
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  /* The figures count up (see runCountUp in app.js), so the box must be sized
     for the widest value it will hold or the label under it jumps sideways as
     the digits change. tabular-nums fixes the digit widths; this fixes the
     count going 0 -> 22 without the row reflowing. */
  min-height: 1em;
}
.stat__label {
  margin-top: 0.85rem;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255,255,255,.68);
  max-width: 22ch;
}
/* The same figure on a cream page — used by visit.html and leasing.html. */
.stat--paper .stat__value { color: var(--gold-deep); }
.stat--paper .stat__label { color: var(--fg-dim); }
/* The long explanatory note under each figure is dropped on the home page —
   four paragraphs of footnote under four numbers is not a statistic, it is an
   essay. Kept in the stylesheet for the pages that genuinely need it. */
.stat__note { margin-top: 0.3rem; font-size: var(--t-xs); color: var(--fg-mute); line-height: 1.5; }

/* =============================================================== AMENITY */
.amenity { display: flex; gap: var(--s-4); align-items: flex-start; }
.amenity__icon {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--poui);
  background: var(--poui-3);
}
.amenity__icon svg { width: 20px; height: 20px; }
.amenity__title { font-size: var(--t-base); font-weight: 600; }
.amenity__text { margin-top: 0.35rem; font-size: var(--t-sm); color: var(--fg-dim); line-height: 1.55; }

/* ------------------------------------------------- COMPONENTS ON A BAND
   Jul 31 2026. Coloured full-bleed grounds now run on the inner pages too,
   and the last pass on this site was lost to exactly one bug repeated three
   times: a component written for cream, dropped onto a dark ground, rendering
   dark-on-dark or white-on-white. So every shared component that can land on a
   band declares its dark case here, once, next to its light case — rather than
   each page discovering the problem separately.

   Note the second half: a light card nested INSIDE a dark band has to reassert
   ink, because `.on-dark h3` would otherwise paint a heading white on a white
   card. Both directions matter. */
.on-dark .amenity__icon {
  border-color: rgba(255,255,255,.22);
  background: rgba(255,255,255,.08);
  color: var(--gold);
}
.on-dark .amenity__title { color: #fff; }
.on-dark .amenity__text  { color: rgba(255,255,255,.70); }

.on-dark .acc__item { border-bottom-color: rgba(255,255,255,.16); }
.on-dark .acc__btn { color: rgba(255,255,255,.92); }
.on-dark .acc__btn:hover,
.on-dark .acc__btn[aria-expanded="true"] { color: var(--gold); }
.on-dark .acc__sign::before, .on-dark .acc__sign::after { background: currentColor; }
.on-dark .acc__panel p { color: rgba(255,255,255,.70); }

.on-dark .note-band,
.on-dark .sourced {
  border-color: rgba(255,255,255,.24);
  border-left-color: var(--gold);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.74);
}
.on-dark .note-band b,
.on-dark .sourced b { color: #fff; }
/* .sourced's links are roof green, which on the wine band was dark green on
   dark red — the exact failure this whole block exists to prevent. */
.on-dark .sourced a { color: var(--gold); }

.on-dark .around {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.18);
}
.on-dark .around__item p { color: rgba(255,255,255,.72); }
.on-dark .around__item a { color: var(--gold); }

.on-dark .src-note { color: rgba(255,255,255,.58); }
.on-dark .src-note__icon { color: var(--gold); }
.on-dark .chip, .on-dark .pill { border-color: rgba(255,255,255,.24); color: rgba(255,255,255,.82); }

/* .contact-card is NOT a light surface — it is a border and nothing else, so
   on a band it has the band's colour behind it and must go light with it.
   (Assuming otherwise here put ink-on-wine text on the events page: the class
   name says "card" but the ruleset never sets a background.) */
.on-dark .contact-card { border-color: rgba(255,255,255,.20); }
.on-dark .contact-card:hover { border-color: rgba(255,255,255,.40); }
.on-dark .contact-card__icon { border-color: rgba(255,255,255,.22); color: var(--gold); }
.on-dark .contact-card__label { color: rgba(255,255,255,.62); }
.on-dark .contact-card__value { color: #fff; }
.on-dark .contact-card__note  { color: rgba(255,255,255,.62); }

/* Genuinely light surfaces nested in a dark band keep their ink. Both of
   these do paint a background of their own. */
.on-dark .card,
.on-dark .media-card { color: var(--fg); }
.on-dark .card h1, .on-dark .card h2, .on-dark .card h3, .on-dark .card h4,
.on-dark .media-card h3, .on-dark .media-card h4 { color: var(--fg); }

/* ================================================================ EVENTS */
.event {
  position: relative;
  display: grid;
  /* The middle column was 1fr, which stretched the row to the full shell while
     the blurb inside it stopped at its 62ch measure — so every event had a
     third of a page of nothing between the text and its tag. Sizing the column
     to the measure puts the tag back beside what it labels. */
  grid-template-columns: 128px minmax(0, 64ch) auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-5) var(--s-4);
  border-bottom: 1px solid var(--line);
  transition: background var(--d-base) var(--e-out), padding-left var(--d-base) var(--e-out);
}
.event:hover { background: var(--paper-2); }
.event__when { font-size: var(--t-sm); font-weight: 600; color: var(--fg-mute); }
.event__title { font-family: var(--sans); font-size: var(--t-md); font-weight: 650; line-height: 1.25; letter-spacing: -0.015em; }
.event__blurb { margin-top: 0.6rem; font-size: var(--t-sm); color: var(--fg-dim); max-width: 62ch; }
.event__tag { flex: none; }
.event[data-accent="gold"]  .event__when { color: var(--poui); }
.event[data-accent="sea"]   .event__when { color: var(--roof); }
.event[data-accent="teal"]  .event__when { color: var(--roof); }
.event[data-accent="flame"] .event__when { color: var(--chac-2); }
@media (max-width: 860px) {
  .event { grid-template-columns: 1fr; gap: var(--s-3); align-items: start; }
  
}

/* ============================================================== ACCORDION */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__btn {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0;
  text-align: left;
  font-size: var(--t-md);
  font-weight: 500;
  font-family: var(--display);
  font-variation-settings: 'SOFT' 26, 'WONK' 1, 'opsz' 40;
  letter-spacing: -0.015em;
  transition: color var(--d-fast) var(--e-out);
}
.acc__btn:hover { color: var(--wine); }
.acc__sign { position: relative; width: 16px; height: 16px; flex: none; }
.acc__sign::before, .acc__sign::after {
  content: ''; position: absolute; inset: 50% 0 auto 0;
  height: 1.5px; background: currentColor;
  transition: transform var(--d-base) var(--e-out);
}
.acc__sign::after { transform: rotate(90deg); }
.acc__btn[aria-expanded="true"] .acc__sign::after { transform: rotate(0deg); }
.acc__btn[aria-expanded="true"] { color: var(--wine); }
.acc__panel {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--d-slow) var(--e-out);
}
.acc__panel[data-open="true"] { grid-template-rows: 1fr; }
.acc__panel > div { overflow: hidden; }
.acc__panel p { padding-bottom: var(--s-5); color: var(--fg-dim); max-width: 72ch; font-size: var(--t-sm); line-height: 1.7; }

/* ================================================================== FORMS */
.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field__label { font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-dim); }
.field__req { color: var(--chac); }
.field__hint { font-size: var(--t-xs); color: var(--fg-mute); }
.field__err { font-size: var(--t-xs); color: var(--chac-2); font-weight: 600; min-height: 1.2em; }

.input, .textarea, .select {
  width: 100%;
  min-height: 50px;
  padding: 0.75rem 1rem;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--fg);
  font-size: var(--t-base);
  transition: border-color var(--d-base) var(--e-out), background var(--d-base) var(--e-out);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-mute); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--ink-mute); }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--poui);
  background: var(--paper-3);
  box-shadow: 0 0 0 3px rgba(176,112,14,.18);
}
.textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7D6C' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 17px;
  padding-right: 2.6rem;
  cursor: pointer;
}
.field[data-invalid="true"] .input,
.field[data-invalid="true"] .textarea,
.field[data-invalid="true"] .select { border-color: var(--chac); }

.checkbox { display: flex; align-items: flex-start; gap: 0.7rem; cursor: pointer; font-size: var(--t-sm); color: var(--fg-dim); }
.checkbox input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--poui); flex: none; cursor: pointer; }

.form-note {
  padding: var(--s-4);
  border: 1px solid var(--line);
  border-left: 2px solid var(--poui);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--fg-dim);
  background: var(--poui-3);
}
.form-status { font-size: var(--t-sm); font-weight: 600; min-height: 1.5em; }
.form-status[data-tone="ok"]  { color: var(--roof); }
.form-status[data-tone="err"] { color: var(--chac-2); }

/* ================================================================= SEARCH */
.search {
  position: relative;
  display: flex; align-items: center;
  background: var(--paper-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-full);
  transition: border-color var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out);
}
.search:focus-within {
  border-color: var(--poui);
  box-shadow: 0 0 0 4px rgba(176,112,14,.15), var(--shadow-2);
}
.search__icon { width: 19px; height: 19px; margin-left: 1.15rem; color: var(--fg-mute); flex: none; }
.search__input {
  flex: 1; min-width: 0;
  padding: 1rem 0.9rem;
  background: none; border: 0; outline: none;
  font-size: var(--t-base);
}
.search__input::placeholder { color: var(--ink-mute); }
.search__clear {
  width: 34px; height: 34px; margin-right: 0.5rem;
  display: grid; place-items: center;
  border-radius: 50%; color: var(--fg-mute); flex: none;
  transition: background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out);
}
.search__clear:hover { background: var(--paper-4); color: var(--fg); }
.search__clear svg { width: 15px; height: 15px; }
.search--lg .search__input { padding: 1.25rem 1rem; font-size: var(--t-md); }
.search--lg .search__icon { width: 22px; height: 22px; margin-left: 1.4rem; }

/* ============================================================== EMPTY/LOAD */
.empty {
  padding: var(--s-9) var(--s-5);
  text-align: center;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
}
.empty__icon { width: 40px; height: 40px; margin: 0 auto var(--s-4); color: var(--fg-mute); }
.empty__title { font-family: var(--sans); font-size: var(--t-md); font-weight: 650; }
.empty__text { margin-top: var(--s-3); color: var(--fg-dim); font-size: var(--t-sm); }

/* ================================================================= FOOTER
   Ink, gold column heads, and the wordmark drawn enormous and hollow across
   the bottom edge. Both reference sites end this way and it is the right
   ending: after a page of cream the site signs its name. */
.site-footer {
  position: relative;
  background: var(--ink-band);
  color: rgba(255,255,255,.66);
  padding-top: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
}

/* The closing line above the footer columns. */
.footer-call {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: var(--s-6);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid rgba(255,255,255,.14);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.footer-call__title {
  font-size: clamp(2.4rem, 5.4vw, 5rem);
  line-height: 0.98;
  color: #fff;
  max-width: 14ch;
}
.site-footer .cool, .site-footer .hot, .site-footer .serif-i { color: var(--gold); }
/* The wordmark is navy, which is invisible on the ink footer. */
.site-footer .brand__name { color: #fff; }
.site-footer .brand__name em { color: var(--gold); }
.site-footer .brand__sub { color: rgba(255,255,255,.55); }
@media (max-width: 700px) { .footer-call { display: block; } .footer-call .btn { margin-top: var(--s-5); } }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: var(--s-7) var(--s-6);
  padding-bottom: var(--s-8);
}
@media (max-width: 980px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

.footer-col__head {
  font-family: var(--display);
  font-style: italic;
  font-size: var(--t-base); font-weight: 600;
  font-variation-settings: 'SOFT' 30, 'WONK' 0, 'opsz' 24;
  letter-spacing: 0; text-transform: none;
  color: var(--gold);
  margin-bottom: var(--s-3);
}
.footer-col a { display: block; padding: 0.34rem 0; font-size: var(--t-sm); color: rgba(255,255,255,.66); transition: color var(--d-fast) var(--e-out); }
.footer-col a:hover { color: #fff; }

.footer-lede { font-size: var(--t-sm); color: rgba(255,255,255,.66); max-width: 40ch; margin-top: var(--s-4); line-height: 1.65; }

.socials { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--s-5); }
/* These were written for the footer and hardcoded white — so the same three
   buttons on the contact page's "Follow along" panel were white on white: a
   blank hundred-pixel gap under the paragraph where Facebook, Instagram and
   the Linktree were sitting invisibly. Light surface is the default now, and
   the dark bands opt in below. */
.social {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  color: var(--fg-mute);
  transition: all var(--d-base) var(--e-out);
}
.site-footer .social,
.on-dark .social,
.band--ink .social,
.band--wine .social,
.page-head .social {
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.72);
}
.social:hover { color: #241a06; background: var(--gold); border-color: var(--gold); }
.social svg { width: 17px; height: 17px; }

.footer-bar {
  display: flex; flex-wrap: wrap; gap: var(--s-4);
  align-items: center; justify-content: space-between;
  padding-block: var(--s-5);
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: var(--t-xs);
  color: rgba(255,255,255,.5);
}
.footer-bar__links { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer-bar a:hover { color: #fff; }

/* The wordmark drawn hollow across the bottom edge, half of it cropped away
   by the end of the page. It is the site signing off. */
.footer-mark {
  display: block;
  font-family: var(--display);
  font-size: clamp(3.4rem, 15.5vw, 16rem);
  font-weight: 600;
  line-height: 0.78;
  letter-spacing: -0.05em;
  font-variation-settings: 'SOFT' 24, 'WONK' 0, 'opsz' 144;
  color: transparent;
  -webkit-text-stroke: 1px rgba(221,178,100,.28);
  text-align: center;
  user-select: none;
  pointer-events: none;
  margin-bottom: -0.22em;
  white-space: nowrap;
  overflow: hidden;
}

/* ============================================================ BREADCRUMBS */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--t-xs); color: var(--fg-mute); }
.crumbs a:hover { color: var(--gold-deep); }
.crumbs__sep { opacity: .5; }
.crumbs [aria-current] { color: var(--fg-dim); }

/* ============================================================== PAGE HEAD */
/* Every inner page opens the same way the home page does: the headline on
   paper, and opposite it a photograph of the part of the building that page is
   actually about. Before this the right-hand half of each page head was empty. */
.page-head {
  position: relative;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-head__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.page-head__copy { min-width: 0; }
.page-head__title { margin-top: var(--s-4); font-size: var(--t-2xl); }
.page-head__lede { margin-top: var(--s-5); }

.page-head__shot {
  position: relative;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--navy);
  box-shadow: var(--shadow-3);
  aspect-ratio: 16 / 10;
  animation: heroUp 1000ms var(--e-out) 200ms both;
}
.page-head__shot img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--e-out);
}
.page-head__shot:hover img { transform: scale(1.04); }
.page-head__shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: grid;
  gap: .1rem;
  padding: 2.4rem 1.1rem .95rem;
  background: linear-gradient(180deg, transparent, rgba(10,14,26,.9));
  font-size: var(--t-xs);
  color: rgba(255,255,255,.74);
}
.page-head__shot figcaption b {
  font-family: var(--display);
  font-size: var(--t-md);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #fff;
}
.page-head__shot figcaption a {
  justify-self: start;
  margin-top: .3rem;
  font-size: .7rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.62);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.page-head__shot figcaption a:hover { color: #FFD277; }
@media (max-width: 900px) {
  .page-head__grid { grid-template-columns: 1fr; gap: 2rem; }
  .page-head__shot { aspect-ratio: 16 / 9; }
}

/* ================================================================ SCROLLER */
.scroller {
  display: flex; gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--s-4);
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.scroller > * { scroll-snap-align: start; flex: none; }

/* ================================================================= TO-TOP */
.to-top { display: none !important; }
.to-top-unused {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  z-index: var(--z-sticky);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--poui); color: var(--paper);
  box-shadow: var(--shadow-2), var(--glow-poui);
  opacity: 0; transform: translateY(14px) scale(.9);
  pointer-events: none;
  transition: all var(--d-base) var(--e-out);
}
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { transform: translateY(-2px); }
.to-top svg { width: 19px; height: 19px; }

/* Shop number, where a directory actually records one. */
.store-card__unit {
  display: inline-block;
  flex: none;
  white-space: nowrap;
  padding: .1rem .45rem;
  border-radius: var(--r-sm);
  background: var(--roof-3);
  color: var(--roof-2);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
}