/* =====================================================================================
   The platform's public website (templates/site/): one design system for every public
   page - home, Rentals search and apartment pages, neighborhoods, news, about, contact,
   landlords, brokerages, advertise, legal and sign-in - on Liquid Glass.

   - Every value is a --lg-* token from static/css/lg-core.css (linked before this file):
     light is the Operator palette (data-theme="light"), dark is Midnight
     (data-theme="dark" + .dark), set before paint by templates/site/base.html from the
     visitor's choice, else their device. Tokens follow the palette, so there is no
     separate dark block here.
   - The platform identity's main colour (data-brand) is the accent: js/ui/lg-brand.js
     writes it into --ja-primary, which --lg-accent reads.
   - The site's own names below (--ink, --bg, --line, --primary ...) are kept, pointed at
     the system, because the page files (static/site/pages/*.css) read them.
   - Every class starts with "s-". Page-only rules live in static/site/pages/<page>.css.
   ===================================================================================== */

:root {
  --font: var(--lg-font);

  --brand: var(--lg-accent);
  --brand-ink: var(--lg-on-accent);
  --primary: var(--lg-accent-text);
  --primary-ink: var(--lg-on-accent);
  --primary-fill: var(--lg-accent-fill);
  --primary-hover: var(--lg-accent-fill-pressed);
  --primary-soft: var(--lg-accent-soft);
  --primary-line: var(--lg-accent-line);
  --link: var(--lg-accent-text);

  --bg: var(--lg-bg);
  --bg-soft: var(--lg-fill-ink);
  --bg-sunk: var(--lg-fill);
  --surface: var(--lg-surface);
  --surface-2: var(--lg-surface-raised);
  --line: var(--lg-separator);
  --line-strong: var(--lg-separator-strong);
  --ink: var(--lg-text);
  --ink-2: var(--lg-text-secondary);
  --ink-3: var(--lg-text-tertiary);
  --ink-4: var(--lg-text-tertiary);

  --ok: var(--lg-success-ink);
  --ok-soft: var(--lg-success-soft);
  --warn: var(--lg-warning-ink);
  --warn-soft: var(--lg-warning-soft);
  --bad: var(--lg-danger-ink);
  --bad-soft: var(--lg-danger-soft);
  --ad: var(--lg-warning-ink);
  --ad-soft: var(--lg-warning-soft);
  --ad-line: color-mix(in srgb, var(--lg-orange) 42%, transparent);

  --r-xs: var(--lg-r-xs);
  --r-sm: var(--lg-r-sm);
  --r: var(--lg-r-lg);
  --r-lg: var(--lg-r-xl);
  --r-xl: var(--lg-r-xl);
  --pill: var(--lg-r-pill);

  --sh-1: var(--lg-elev-1);
  --sh-2: var(--lg-elev-2);
  --sh-3: var(--lg-elev-3);
  --ring: 0 0 0 2px var(--lg-bg), 0 0 0 4px var(--lg-focus-ring);

  /* Full screen width (owner, 2026-10-16): no page cap, side margins grow with the screen. */
  --wrap: none;
  --gutter: clamp(20px, 2.6vw, 56px);
  --header-h: 72px;
  --ease: var(--lg-ease);
}

/* ---------- Base ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--lg-bg);
  color: var(--lg-text);
  font-family: var(--lg-font);
  font-size: var(--lg-t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--lg-accent-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 3px; }
::selection { background: color-mix(in srgb, var(--lg-accent) 24%, transparent); }
[hidden] { display: none !important; }

.s-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.s-skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--lg-accent-fill); color: var(--lg-on-accent); padding: 10px 18px; border-radius: var(--lg-r-pill); font-weight: 600; }
.s-skip:focus { top: 12px; text-decoration: none; }

/* Icons: {% icon %} (Phosphor duotone) marked .s-ic, and the sign-in pages' {% sicon %}. */
.s-ic { width: 20px; height: 20px; flex: none; }
.s-ic--sm { width: 16px; height: 16px; }
.s-ic--lg { width: 24px; height: 24px; }

.s-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.s-wrap--narrow { max-width: 860px; }
.s-wrap--mid { max-width: none; }
@media (max-width: 640px) { :root { --gutter: 16px; --header-h: 64px; } }

/* ---------- Type (SPEC §4: 28 display, 20 title, 18 heading, 16 body, 14 label, 13 secondary, 12 caption) ---- */

/* hero-lm (brand kit): display / H1 Montserrat 800 at -0.02em, H2 and H3 Montserrat 700, labels Montserrat 600
   in capitals at +0.12em, everything else Inter. */
.s-display { font-family: var(--lg-font-display); font-size: var(--lg-t-display); line-height: var(--lg-leading-tight); font-weight: var(--lg-weight-display); letter-spacing: var(--lg-tracking-display); }
.s-h1 { font-family: var(--lg-font-display); font-size: var(--lg-t-display); line-height: var(--lg-leading-tight); font-weight: var(--lg-weight-display); letter-spacing: var(--lg-tracking-display); }
.s-h2 { font-family: var(--lg-font-display); font-size: var(--lg-t-title); line-height: 1.25; font-weight: 700; letter-spacing: var(--lg-tracking-title); }
.s-h3 { font-family: var(--lg-font-display); font-size: var(--lg-t-nav-title); line-height: 1.3; font-weight: 700; letter-spacing: var(--lg-tracking-title); }
.s-h4 { font-size: var(--lg-t-body); line-height: 1.35; font-weight: 600; }
.s-lead { font-size: var(--lg-t-nav-title); line-height: 1.5; color: var(--lg-text-secondary); }
.s-muted { color: var(--lg-text-tertiary); }
.s-small { font-size: var(--lg-t-label); }
.s-tiny { font-size: var(--lg-t-caption); }
.s-num { font-variant-numeric: tabular-nums; }
.s-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--lg-font-display); font-size: var(--lg-t-caption); font-weight: var(--lg-weight-label); letter-spacing: var(--lg-tracking-label); text-transform: uppercase;
  color: var(--lg-accent-text);
}
.s-eyebrow .s-ic { width: 16px; height: 16px; }
.s-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 8px; border-radius: var(--lg-r-pill);
  background: var(--lg-accent-soft); color: var(--lg-accent-text);
  font-size: var(--lg-t-secondary); font-weight: 600;
}
.s-kicker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lg-success); box-shadow: 0 0 0 4px var(--lg-success-soft); }

.s-prose { color: var(--lg-text-secondary); font-size: var(--lg-t-body); line-height: 1.65; }
.s-prose > * + * { margin-top: 1em; }
.s-prose h2 { color: var(--lg-text); font-size: var(--lg-t-title); line-height: 1.25; font-weight: 700; letter-spacing: var(--lg-tracking-title); margin-top: 2em; }
.s-prose h3 { color: var(--lg-text); font-size: var(--lg-t-nav-title); font-weight: 700; margin-top: 1.6em; }
.s-prose a { text-decoration: underline; text-underline-offset: 3px; }
.s-prose ul, .s-prose ol { padding-left: 1.3em; }
.s-prose li + li { margin-top: 0.4em; }
.s-prose strong { color: var(--lg-text); }
.s-prose img { border-radius: var(--lg-r-lg); }
.s-prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; box-shadow: inset 3px 0 0 var(--lg-accent); color: var(--lg-text); font-weight: 500; }

/* ---------- Buttons (SPEC §5.8; the same shapes as the app's ds-button) --------------- */

.s-btn {
  --b-bg: var(--lg-glass-solid); --b-ink: var(--lg-text); --b-edge: var(--lg-elev-1);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--lg-control-h); padding: 0 22px; border-radius: var(--lg-r-pill);
  border: 0; background: var(--b-bg); color: var(--b-ink); box-shadow: var(--b-edge);
  font-weight: 600; font-size: var(--lg-t-control); line-height: 1.2; white-space: nowrap;
  transition: background-color var(--lg-dur) var(--lg-ease), color var(--lg-dur) var(--lg-ease), box-shadow var(--lg-dur) var(--lg-ease), transform var(--lg-dur-fast) var(--lg-ease);
  text-decoration: none !important; -webkit-tap-highlight-color: transparent;
}
.s-btn:hover { --b-bg: var(--lg-surface-solid); }
.s-btn:active { transform: scale(.95); }
.s-btn:focus-visible { outline: 2px solid var(--lg-focus-ring); outline-offset: 3px; }
.s-btn[disabled], .s-btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.s-btn .s-ic { width: 18px; height: 18px; }
.s-btn--primary { --b-bg: var(--lg-accent-fill); --b-ink: var(--lg-on-accent); --b-edge: var(--lg-button-shadow); }
.s-btn--primary:hover { --b-bg: var(--lg-accent-fill-pressed); }
.s-btn--dark { --b-bg: var(--lg-text); --b-ink: var(--lg-bg); --b-edge: var(--lg-elev-1); }
.s-btn--dark:hover { --b-bg: color-mix(in srgb, var(--lg-text) 86%, var(--lg-bg)); }
.s-btn--soft { --b-bg: var(--lg-accent-soft); --b-ink: var(--lg-accent-text); --b-edge: none; }
.s-btn--soft:hover { --b-bg: color-mix(in srgb, var(--lg-accent) 22%, transparent); }
.s-btn--ghost { --b-bg: transparent; --b-ink: var(--lg-text-secondary); --b-edge: none; }
.s-btn--ghost:hover { --b-bg: var(--lg-fill-ink); --b-ink: var(--lg-text); }
/* On photos and the hero film: light glass / white pill, whatever the palette. */
.s-btn--white { --b-bg: var(--lg-white); --b-ink: var(--lg-black); --b-edge: var(--lg-elev-1); }
.s-btn--white:hover { --b-bg: color-mix(in srgb, var(--lg-white) 88%, var(--lg-black)); }
.s-btn--glass { --b-bg: color-mix(in srgb, var(--lg-white) 16%, transparent); --b-ink: var(--lg-white); --b-edge: inset 0 0 0 1px color-mix(in srgb, var(--lg-white) 30%, transparent); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); }
.s-btn--glass:hover { --b-bg: color-mix(in srgb, var(--lg-white) 26%, transparent); }
.s-btn--sm { min-height: var(--lg-control-h-sm); padding: 0 14px; font-size: var(--lg-t-label); }
.s-btn--lg { min-height: var(--lg-control-h-lg); padding: 0 28px; font-size: var(--lg-t-body); }
.s-btn--block { display: flex; width: 100%; }
.s-btn--square { padding: 0; width: var(--lg-control-h); }
.s-btn--sm.s-btn--square { width: var(--lg-control-h-sm); }
@media (pointer: coarse) { .s-btn--sm { min-height: var(--lg-hit); } .s-btn--sm.s-btn--square { width: var(--lg-hit); } }

.s-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--lg-accent-text); }
.s-link .s-ic { width: 16px; height: 16px; transition: transform var(--lg-dur) var(--lg-ease); }
.s-link:hover .s-ic { transform: translateX(3px); }

/* ---------- Forms (fields are fills, solid on focus) -------------------------------- */

.s-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.s-label { font-size: var(--lg-t-label); font-weight: 600; color: var(--lg-text); }
.s-optional { font-weight: 400; color: var(--lg-text-tertiary); }
.s-help { font-size: var(--lg-t-secondary); color: var(--lg-text-tertiary); }
.s-input, .s-select, .s-textarea {
  width: 100%; min-height: var(--lg-control-h); padding: 10px 14px;
  border: 0; border-radius: var(--lg-r-sm);
  background: var(--lg-field-bg); color: var(--lg-text); font-size: var(--lg-t-body);
  transition: background-color var(--lg-dur) var(--lg-ease), box-shadow var(--lg-dur) var(--lg-ease);
}
.s-textarea { min-height: 110px; resize: vertical; line-height: 1.5; border-radius: var(--lg-r-md); }
.s-select {
  appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: var(--lg-chevron); background-size: 16px 16px;
  background-repeat: no-repeat; background-position: right 12px center;
}
.s-input::placeholder, .s-textarea::placeholder { color: var(--lg-text-tertiary); }
.s-input:hover, .s-select:hover, .s-textarea:hover { background-color: var(--lg-field-bg-hover); }
.s-input:focus, .s-select:focus, .s-textarea:focus { outline: 2px solid var(--lg-focus-ring); outline-offset: 3px; background-color: var(--lg-surface-solid); box-shadow: var(--lg-hairline); }
.s-input[aria-invalid="true"], .s-select[aria-invalid="true"], .s-textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--lg-danger-ink); }
.s-field-error { font-size: var(--lg-t-secondary); font-weight: 600; color: var(--lg-danger-ink); }
.s-input-wrap { position: relative; }
.s-input-wrap > .s-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--lg-text-secondary); pointer-events: none; width: 18px; height: 18px; }
.s-input-wrap > .s-input { padding-left: 42px; }
.s-input-wrap > .s-input-action { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--lg-text-secondary); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; }
.s-input-wrap > .s-input-action:hover { background: var(--lg-icon-btn-hover); color: var(--lg-text); }
.s-check { display: inline-flex; align-items: flex-start; gap: 10px; font-size: var(--lg-t-label); color: var(--lg-text-secondary); cursor: pointer; line-height: 1.45; }
.s-check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--lg-accent); flex: none; }
.s-form { display: flex; flex-direction: column; gap: 16px; }
.s-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .s-form-row { grid-template-columns: 1fr; } }
.s-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Chips, badges, pills -------------------------------------------------------- */

.s-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.s-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px;
  border-radius: var(--lg-r-pill); border: 0; background: var(--lg-fill);
  color: var(--lg-text); font-size: var(--lg-t-secondary); font-weight: 600; white-space: nowrap;
  transition: background-color var(--lg-dur) var(--lg-ease), color var(--lg-dur) var(--lg-ease), transform var(--lg-dur-fast) var(--lg-ease); text-decoration: none !important;
}
.s-chip:hover { background: var(--lg-fill-strong); }
.s-chip:active { transform: scale(.95); }
.s-chip .s-ic { width: 16px; height: 16px; }
.s-chip.is-on, .s-chip[aria-pressed="true"], .s-chip[aria-current="true"] { background: var(--lg-accent-fill); color: var(--lg-on-accent); }
.s-chip--glass { background: color-mix(in srgb, var(--lg-white) 16%, transparent); color: var(--lg-white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lg-white) 26%, transparent); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); }
.s-chip--glass:hover { background: color-mix(in srgb, var(--lg-white) 26%, transparent); color: var(--lg-white); }
@media (pointer: coarse) { .s-chip { min-height: var(--lg-hit); } }

.s-badge {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px;
  border-radius: var(--lg-r-pill); font-size: var(--lg-t-caption); font-weight: 600; line-height: 1;
  background: var(--lg-glass-solid); color: var(--lg-text); box-shadow: var(--lg-elev-1); white-space: nowrap;
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
}
.s-badge .s-ic { width: 12px; height: 12px; }
.s-badge--sponsored { background: color-mix(in srgb, var(--lg-orange) 18%, var(--lg-surface-solid)); color: var(--lg-warning-ink); }
.s-badge--nofee { background: var(--lg-success-fill); color: var(--lg-on-state); }
.s-badge--dark { background: color-mix(in srgb, var(--lg-black) 64%, transparent); color: var(--lg-white); box-shadow: none; }
.s-badge--brand { background: var(--lg-accent-fill); color: var(--lg-on-accent); }
.s-badge--flat { box-shadow: none; background: var(--lg-fill); color: var(--lg-text-secondary); -webkit-backdrop-filter: none; backdrop-filter: none; }
.s-badge--ad-flat { box-shadow: none; background: var(--lg-warning-soft); color: var(--lg-warning-ink); -webkit-backdrop-filter: none; backdrop-filter: none; }

.s-avail { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--lg-text-secondary); }
.s-avail::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lg-success); box-shadow: 0 0 0 3px var(--lg-success-soft); }
.s-avail--upcoming::before { background: var(--lg-orange); box-shadow: 0 0 0 3px var(--lg-warning-soft); }
.s-avail--off::before { background: var(--lg-text-quaternary); box-shadow: none; }

/* ---------- Header (a glass bar; the nav is a segmented track) ------------------------- */

.s-header {
  position: sticky; top: 0; z-index: 50; height: var(--header-h);
  background: var(--lg-glass-3);
  box-shadow: 0 1px 0 var(--lg-separator);
  -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur);
  transition: background-color var(--lg-dur) var(--lg-ease), box-shadow var(--lg-dur) var(--lg-ease), color var(--lg-dur) var(--lg-ease);
}
.s-header-row { height: 100%; display: flex; align-items: center; gap: 28px; }
.s-logo { display: inline-flex; align-items: center; color: var(--lg-text); text-decoration: none !important; flex: none; }
/* The horizontal logo (mark and name in one file): height only, the width follows (brand kit). */
.s-logo img { height: var(--lg-logo-h-nav); width: auto; max-width: none; }
.s-logo-on-dark { display: none; }
[data-theme="dark"] .s-logo-on-light { display: none; }
[data-theme="dark"] .s-logo-on-dark { display: block; }
.s-nav { display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: var(--lg-r-pill); background: var(--lg-nav-track); }
.s-nav a {
  position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--lg-r-pill); white-space: nowrap;
  color: var(--lg-text-secondary); font-weight: 500; font-size: var(--lg-t-label); text-decoration: none !important;
  transition: color var(--lg-dur) var(--lg-ease), background-color var(--lg-dur) var(--lg-ease), box-shadow var(--lg-dur) var(--lg-ease);
}
.s-nav a:hover { color: var(--lg-text); }
.s-nav a[aria-current="page"] { color: var(--lg-text); font-weight: 600; background: var(--lg-glass-solid); box-shadow: var(--lg-indicator-shadow); }
.s-header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.s-header-link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; white-space: nowrap; border-radius: var(--lg-r-pill); font-weight: 600; font-size: var(--lg-t-label); color: var(--lg-text); text-decoration: none !important; }
.s-header-link:hover { background: var(--lg-fill-ink); }
.s-burger { display: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--lg-icon-btn); color: var(--lg-text); align-items: center; justify-content: center; }
.s-burger:active { transform: scale(.9); }

/* Sign-in menu: a <details> that opens on click. The panel is a glass popover. */
.s-menu { position: relative; }
.s-menu > summary { list-style: none; cursor: pointer; }
.s-menu > summary::-webkit-details-marker { display: none; }
.s-menu > summary .s-ic--chev { width: 14px; height: 14px; transition: transform var(--lg-dur) var(--lg-ease); }
.s-menu[open] > summary .s-ic--chev { transform: rotate(180deg); }
.s-menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: 300px; padding: 8px; z-index: 60;
  background: var(--lg-glass-overlay); -webkit-backdrop-filter: var(--lg-blur-strong); backdrop-filter: var(--lg-blur-strong);
  border-radius: var(--lg-r-lg); box-shadow: var(--lg-elev-3);
}
.s-menu-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border-radius: var(--lg-r-md); color: var(--lg-text); text-decoration: none !important; }
.s-menu-item:hover { background: var(--lg-fill-ink); }
.s-menu-ic { width: 32px; height: 32px; border-radius: var(--lg-r-xs); display: grid; place-items: center; background: var(--lg-accent-soft); color: var(--lg-accent-text); flex: none; }
.s-menu-ic .s-ic { width: 18px; height: 18px; }
.s-menu-t { font-weight: 600; font-size: var(--lg-t-control); line-height: 1.3; }
.s-menu-d { font-size: var(--lg-t-secondary); color: var(--lg-text-secondary); line-height: 1.4; margin-top: 2px; }
.s-menu-sep { height: 1px; background: var(--lg-separator); margin: 6px 4px; }

/* Header over a dark hero (home): clear with light words until the page scrolls. */
.s-header--over:not(.is-solid) { background: linear-gradient(180deg, color-mix(in srgb, var(--lg-black) 42%, transparent), transparent); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.s-header--over:not(.is-solid) .s-logo,
.s-header--over:not(.is-solid) .s-nav a,
.s-header--over:not(.is-solid) .s-header-link { color: var(--lg-white); }
.s-header--over:not(.is-solid) .s-nav { background: color-mix(in srgb, var(--lg-white) 14%, transparent); -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); }
.s-header--over:not(.is-solid) .s-nav a[aria-current="page"] { color: var(--lg-white); background: color-mix(in srgb, var(--lg-white) 24%, transparent); box-shadow: none; }
.s-header--over:not(.is-solid) .s-header-link:hover { background: color-mix(in srgb, var(--lg-white) 14%, transparent); }
.s-header--over:not(.is-solid) .s-logo-on-light { display: none; }
.s-header--over:not(.is-solid) .s-logo-on-dark { display: block; }
.s-header--over:not(.is-solid) .s-burger { background: color-mix(in srgb, var(--lg-white) 16%, transparent); color: var(--lg-white); }
.s-header--over { margin-bottom: calc(var(--header-h) * -1); }

.s-mobile-nav {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; overflow-y: auto;
  background: var(--lg-bg); padding: 12px var(--gutter) 32px;
  box-shadow: inset 0 1px 0 var(--lg-separator);
}
.s-mobile-nav a.s-mobile-link { display: flex; align-items: center; justify-content: space-between; min-height: var(--lg-row-h); padding: 14px 4px; border-bottom: 1px solid var(--lg-separator); color: var(--lg-text); font-weight: 600; font-size: var(--lg-t-body); text-decoration: none !important; }
.s-mobile-nav a.s-mobile-link .s-ic { width: 18px; height: 18px; color: var(--lg-text-tertiary); }
.s-mobile-group { margin-top: 22px; }
.s-mobile-group-title { font-family: var(--lg-font-display); font-size: var(--lg-t-caption); font-weight: var(--lg-weight-label); letter-spacing: var(--lg-tracking-label); text-transform: uppercase; color: var(--lg-text-tertiary); margin-bottom: 6px; }
.s-mobile-actions { display: grid; gap: 10px; margin-top: 24px; }
body.s-menu-open { overflow: hidden; }

/* Seven links fit from 1181px when they sit a little closer; below that the menu button takes over. */
@media (max-width: 1320px) {
  .s-header-row { gap: 18px; }
  .s-nav a { padding: 0 10px; }
}
@media (max-width: 1180px) {
  .s-nav { display: none; }
  .s-burger { display: inline-flex; }
  .s-header-actions .s-hide-mobile { display: none; }
}
@media (max-width: 420px) { .s-logo img { height: var(--lg-logo-h-nav-sm); } }

/* ---------- Footer (a raised band at the foot of the page) ---------------------------- */

.s-footer { background: var(--lg-surface-raised); color: var(--lg-text-secondary); margin-top: 96px; box-shadow: inset 0 1px 0 var(--lg-separator); }
.s-footer a { color: var(--lg-text-secondary); }
.s-footer a:hover { color: var(--lg-text); }
.s-footer-top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 40px; padding: 64px 0 48px; }
.s-footer-brand .s-logo { color: var(--lg-text); }
.s-footer-brand p { margin-top: 16px; color: var(--lg-text-secondary); font-size: var(--lg-t-label); max-width: 34ch; line-height: 1.6; }
.s-footer-contact { margin-top: 18px; display: grid; gap: 8px; font-size: var(--lg-t-label); }
.s-footer-contact a, .s-footer-contact span { display: inline-flex; align-items: center; gap: 8px; color: var(--lg-text); }
.s-footer-contact .s-ic { width: 16px; height: 16px; color: var(--lg-text-tertiary); }
.s-footer-col h2 { font-family: var(--lg-font-display); font-size: var(--lg-t-caption); font-weight: var(--lg-weight-label); letter-spacing: var(--lg-tracking-label); text-transform: uppercase; color: var(--lg-text-tertiary); margin-bottom: 16px; }
.s-footer-col ul { list-style: none; padding: 0; display: grid; gap: 10px; font-size: var(--lg-t-label); }
.s-footer-social { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.s-footer-social a { height: 34px; padding: 0 12px; border-radius: var(--lg-r-pill); background: var(--lg-fill); display: inline-flex; align-items: center; font-size: var(--lg-t-secondary); font-weight: 600; text-decoration: none !important; }
.s-footer-social a:hover { background: var(--lg-fill-strong); }
.s-footer-bottom { border-top: 1px solid var(--lg-separator); padding: 22px 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: var(--lg-t-secondary); color: var(--lg-text-tertiary); }
.s-footer-bottom nav { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.s-footer-bottom a { color: var(--lg-text-tertiary); }
.s-theme-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: var(--lg-r-pill); border: 0; background: var(--lg-fill); color: var(--lg-text); font-size: var(--lg-t-secondary); font-weight: 600; transition: background-color var(--lg-dur) var(--lg-ease), transform var(--lg-dur-fast) var(--lg-ease); }
.s-theme-btn:hover { background: var(--lg-fill-strong); }
.s-theme-btn:active { transform: scale(.95); }
.s-theme-btn .s-ic { width: 16px; height: 16px; }
.s-theme-btn .s-ic-sun { display: none; }
[data-theme="dark"] .s-theme-btn .s-ic-sun { display: block; }
[data-theme="dark"] .s-theme-btn .s-ic-moon { display: none; }
@media (pointer: coarse) { .s-theme-btn, .s-footer-social a { min-height: var(--lg-hit); } }
@media (max-width: 1000px) { .s-footer-top { grid-template-columns: 1fr 1fr; } .s-footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .s-footer-top { grid-template-columns: 1fr; gap: 28px; padding-top: 48px; } }

/* ---------- Sections ------------------------------------------------------------------ */

.s-main { display: block; min-height: 50vh; }
.s-section { padding: 72px 0; }
.s-section--tight { padding: 48px 0; }
.s-section--soft { background: var(--lg-fill-ink); }
.s-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; flex-wrap: wrap; }
.s-section-head > div { max-width: 720px; }
.s-section-head .s-eyebrow { margin-bottom: 10px; }
.s-section-head .s-lead { margin-top: 10px; }
.s-section-head--center { flex-direction: column; align-items: center; text-align: center; }
.s-section-head--center > div { margin-inline: auto; }
@media (max-width: 640px) { .s-section { padding: 52px 0; } }

/* Interior page heading */
.s-pagehead { position: relative; padding: 64px 0 48px; background: var(--lg-fill-ink); box-shadow: inset 0 -1px 0 var(--lg-separator); overflow: hidden; isolation: isolate; }
.s-pagehead::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 720px; height: 720px; border-radius: 50%; background: radial-gradient(closest-side, var(--lg-accent-soft), transparent 70%); z-index: -1; }
.s-pagehead .s-eyebrow { margin-bottom: 14px; }
.s-pagehead .s-lead { margin-top: 14px; max-width: 68ch; }
.s-pagehead-actions { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }
/* Over a photo: words in absolute white on a black scrim, whatever the palette. */
.s-pagehead--photo { padding: 120px 0 84px; background: var(--lg-black); color: var(--lg-white); box-shadow: none; }
.s-pagehead--photo::before { display: none; }
.s-pagehead--photo .s-pagehead-bg { position: absolute; inset: 0; z-index: -2; }
.s-pagehead--photo .s-pagehead-bg img { width: 100%; height: 100%; object-fit: cover; }
.s-pagehead--photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--lg-black) 86%, transparent) 0%, color-mix(in srgb, var(--lg-black) 60%, transparent) 48%, color-mix(in srgb, var(--lg-black) 24%, transparent) 100%), linear-gradient(0deg, color-mix(in srgb, var(--lg-black) 52%, transparent), transparent 50%); }
.s-pagehead--photo .s-eyebrow { color: var(--lg-white); opacity: .9; }
.s-pagehead--photo .s-lead { color: color-mix(in srgb, var(--lg-white) 86%, transparent); }

.s-crumbs { font-size: var(--lg-t-secondary); color: var(--lg-text-tertiary); }
.s-crumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.s-crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.s-crumbs li + li::before { content: "/"; color: var(--lg-text-quaternary); }
.s-crumbs a { color: var(--lg-text-tertiary); }
.s-crumbs a:hover { color: var(--lg-text); }
.s-crumbs [aria-current] { color: var(--lg-text); font-weight: 600; }

/* ---------- Grids, rails, boxes --------------------------------------------------------- */

.s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 22px; }
.s-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) { .s-grid--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1600px) { .s-place { aspect-ratio: 1 / 1; } }
@media (max-width: 900px) { .s-grid--3, .s-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .s-grid--2, .s-grid--3, .s-grid--4 { grid-template-columns: 1fr; } }

.s-rail-wrap { position: relative; }
.s-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(272px, calc((100% - 66px) / 4)); gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 2px 18px; margin: -4px -2px -18px; overscroll-behavior-x: contain; }
.s-rail::-webkit-scrollbar { display: none; }
.s-rail > * { scroll-snap-align: start; }
@media (max-width: 1100px) { .s-rail { grid-auto-columns: minmax(272px, calc((100% - 44px) / 3)); } }
@media (max-width: 820px) { .s-rail { grid-auto-columns: 78%; } }
/* Wide screens show more cards in a row instead of bigger cards. */
@media (min-width: 1500px) { .s-rail { grid-auto-columns: calc((100% - 88px) / 5); } }
@media (min-width: 1880px) { .s-rail { grid-auto-columns: calc((100% - 110px) / 6); } }
.s-rail-nav { display: flex; gap: 8px; }
.s-rail-btn { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--lg-icon-btn); color: var(--lg-text); display: grid; place-items: center; transition: background-color var(--lg-dur) var(--lg-ease), opacity var(--lg-dur) var(--lg-ease), transform var(--lg-dur-fast) var(--lg-ease); }
.s-rail-btn:hover { background: var(--lg-icon-btn-hover); }
.s-rail-btn:active { transform: scale(.9); }
.s-rail-btn[disabled] { opacity: .45; cursor: default; }
.s-rail-btn .s-ic { width: 18px; height: 18px; }
@media (pointer: coarse) { .s-rail-btn { width: var(--lg-hit); height: var(--lg-hit); } }

.s-box { background: var(--lg-surface); border-radius: var(--lg-r-xl); padding: 20px; box-shadow: var(--lg-elev-2); }
.s-box--soft { background: var(--lg-fill-ink); box-shadow: none; }
.s-box--shadow { box-shadow: var(--lg-elev-2); }
.s-divider { height: 1px; background: var(--lg-separator); border: 0; margin: 0; }

/* ---------- Listing card ---------------------------------------------------------------- */

.s-card {
  position: relative; display: flex; flex-direction: column; min-width: 0;
  background: var(--lg-surface); border-radius: var(--lg-r-xl); overflow: hidden; box-shadow: var(--lg-elev-2);
  transition: box-shadow var(--lg-dur) var(--lg-ease), transform var(--lg-dur-fast) var(--lg-ease);
}
.s-card:hover { box-shadow: var(--lg-elev-3); }
.s-card:active { transform: scale(.98); }
.s-card-link { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none !important; }
.s-card-media { position: relative; aspect-ratio: 4 / 3; background: var(--lg-fill); overflow: hidden; }
.s-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--lg-dur-sheet) var(--lg-ease); color: transparent; font-size: 0; }
.s-card:hover .s-card-media img { transform: scale(1.045); }
.s-card-media::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; background: linear-gradient(0deg, color-mix(in srgb, var(--lg-black) 34%, transparent), transparent); pointer-events: none; }
.s-card-nophoto { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; color: var(--lg-text-tertiary); font-size: var(--lg-t-secondary); font-weight: 600; }
.s-card-nophoto .s-ic { width: 32px; height: 32px; }
.s-card-badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px; z-index: 1; }
.s-card-count { position: absolute; right: 12px; bottom: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: var(--lg-r-pill); background: color-mix(in srgb, var(--lg-black) 62%, transparent); color: var(--lg-white); font-size: var(--lg-t-caption); font-weight: 600; -webkit-backdrop-filter: var(--lg-blur); backdrop-filter: var(--lg-blur); }
.s-card-count .s-ic { width: 12px; height: 12px; }
.s-card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.s-card-price { font-size: var(--lg-t-title); line-height: 1.2; font-weight: 700; letter-spacing: var(--lg-tracking-title); color: var(--lg-text); font-variant-numeric: tabular-nums; }
.s-card-per { font-size: var(--lg-t-secondary); font-weight: 500; color: var(--lg-text-tertiary); letter-spacing: 0; margin-left: 1px; }
.s-card-concession { font-size: var(--lg-t-secondary); font-weight: 600; color: var(--lg-success-ink); }
.s-card-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--lg-text-secondary); font-size: var(--lg-t-label); font-weight: 500; }
.s-card-facts span { display: inline-flex; align-items: center; gap: 6px; }
.s-card-facts .s-ic { width: 16px; height: 16px; color: var(--lg-text-tertiary); }
.s-card-title { font-size: var(--lg-t-body); font-weight: 600; line-height: 1.35; color: var(--lg-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.s-card-area { font-size: var(--lg-t-secondary); color: var(--lg-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-card-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--lg-separator); display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: var(--lg-t-caption); color: var(--lg-text-tertiary); }
.s-card-foot .s-avail { font-size: var(--lg-t-caption); flex: none; }
.s-card-by { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.s-card-spacer { height: 12px; }
.s-card--sponsored { box-shadow: inset 0 0 0 1.5px var(--ad-line), var(--lg-elev-2); }
.s-card--sponsored:hover { box-shadow: inset 0 0 0 1.5px var(--ad-line), var(--lg-elev-3); }
.s-card--compact .s-card-media { aspect-ratio: 16 / 10; }
.s-card--compact .s-card-body { padding: 12px 14px 14px; gap: 4px; }
.s-card--compact .s-card-price { font-size: var(--lg-t-nav-title); }

.s-sponsored-note { display: inline-flex; align-items: center; gap: 6px; font-size: var(--lg-t-secondary); color: var(--lg-text-tertiary); }
.s-sponsored-note .s-ic { width: 14px; height: 14px; }

/* ---------- Search bar (home hero and others): a glass panel holding fields -------------- */

.s-search {
  display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr) auto; align-items: stretch;
  background: var(--lg-glass-solid); -webkit-backdrop-filter: var(--lg-blur-strong); backdrop-filter: var(--lg-blur-strong);
  border-radius: var(--lg-r-xl); padding: 8px; box-shadow: var(--lg-elev-3);
}
.s-search-field { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 18px; min-width: 0; border-radius: var(--lg-r-lg); }
.s-search-field + .s-search-field::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--lg-separator); }
.s-search-field label { font-size: var(--lg-t-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lg-text-secondary); }
.s-search-field input, .s-search-field select { width: 100%; border: 0; background: transparent; padding: 2px 0; font-size: var(--lg-t-body); font-weight: 600; color: var(--lg-text); outline: none; min-width: 0; appearance: none; -webkit-appearance: none; }
.s-search-field select { cursor: pointer; background-image: var(--lg-chevron); background-size: 16px 16px; background-repeat: no-repeat; background-position: right 0 center; padding-right: 20px; }
.s-search-field input::placeholder { color: var(--lg-text-tertiary); font-weight: 500; }
.s-search-field:focus-within { background: var(--lg-surface-solid); box-shadow: var(--lg-hairline); }
.s-search-field:focus-within::before, .s-search-field:focus-within + .s-search-field::before { opacity: 0; }
.s-search-field--where { flex-direction: row; align-items: center; gap: 12px; }
.s-search-field--where > .s-ic { color: var(--lg-accent-text); width: 20px; height: 20px; }
.s-search-field--where > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.s-search-go { min-height: 56px; border-radius: var(--lg-r-pill); padding: 0 28px; font-size: var(--lg-t-body); }
@media (max-width: 860px) {
  .s-search { grid-template-columns: 1fr 1fr; padding: 6px; border-radius: var(--lg-r-xl); }
  .s-search-field { padding: 12px 14px; }
  .s-search-field--where { grid-column: 1 / -1; border-bottom: 1px solid var(--lg-separator); border-radius: var(--lg-r-lg) var(--lg-r-lg) 0 0; }
  .s-search-field + .s-search-field::before { display: none; }
  .s-search-field:nth-child(3) { border-left: 1px solid var(--lg-separator); }
  .s-search-go { grid-column: 1 / -1; margin-top: 6px; min-height: var(--lg-control-h-lg); }
}

/* ---------- Feature blocks ------------------------------------------------------------ */

.s-feature { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--lg-r-xl); background: var(--lg-surface); box-shadow: var(--lg-elev-2); height: 100%; transition: box-shadow var(--lg-dur) var(--lg-ease), transform var(--lg-dur-fast) var(--lg-ease); }
.s-feature:hover { box-shadow: var(--lg-elev-3); }
.s-feature-ic { width: 44px; height: 44px; border-radius: var(--lg-r-sm); display: grid; place-items: center; background: var(--lg-accent-soft); color: var(--lg-accent-text); }
.s-feature-ic .s-ic { width: 24px; height: 24px; }
.s-feature h3 { font-size: var(--lg-t-nav-title); font-weight: 700; letter-spacing: var(--lg-tracking-title); }
.s-feature p { color: var(--lg-text-secondary); font-size: var(--lg-t-control); line-height: 1.55; }
.s-feature .s-link { margin-top: auto; padding-top: 6px; }
a.s-feature { color: inherit; text-decoration: none !important; }
a.s-feature:active { transform: scale(.98); }

.s-ticks { list-style: none; padding: 0; display: grid; gap: 12px; }
.s-ticks li { display: flex; gap: 12px; align-items: flex-start; color: var(--lg-text-secondary); line-height: 1.5; }
.s-ticks li > .s-ic { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--lg-success-soft); color: var(--lg-success-ink); margin-top: 1px; }
.s-ticks strong { color: var(--lg-text); }
.s-ticks--2 { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
@media (max-width: 640px) { .s-ticks--2 { grid-template-columns: 1fr; } }

.s-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.s-split--flip > :first-child { order: 2; }
.s-split-media { position: relative; border-radius: var(--lg-r-xl); overflow: hidden; aspect-ratio: 5 / 4; background: var(--lg-fill); box-shadow: var(--lg-elev-3); }
.s-split-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .s-split { grid-template-columns: 1fr; gap: 32px; } .s-split--flip > :first-child { order: 0; } }

.s-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; counter-reset: s-step; }
.s-step { position: relative; padding: 24px; border-radius: var(--lg-r-xl); background: var(--lg-surface); box-shadow: var(--lg-elev-2); }
.s-step-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--lg-accent-fill); color: var(--lg-on-accent); font-weight: 700; font-size: var(--lg-t-label); font-variant-numeric: tabular-nums; margin-bottom: 16px; }
.s-step h3 { font-size: var(--lg-t-body); font-weight: 700; }
.s-step p { margin-top: 8px; color: var(--lg-text-secondary); font-size: var(--lg-t-label); }
@media (max-width: 1000px) { .s-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .s-steps { grid-template-columns: 1fr; } }

.s-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-radius: var(--lg-r-xl); background: var(--lg-surface); box-shadow: var(--lg-elev-2); overflow: hidden; }
.s-stat { padding: 22px 24px; }
.s-stat + .s-stat { border-left: 1px solid var(--lg-separator); }
.s-stat-n { font-family: var(--lg-font-display); font-size: var(--lg-t-display); font-weight: 700; letter-spacing: var(--lg-tracking-title); line-height: 1.1; color: var(--lg-text); font-variant-numeric: tabular-nums; }
.s-stat-l { margin-top: 6px; font-size: var(--lg-t-secondary); color: var(--lg-text-tertiary); font-weight: 500; }
@media (max-width: 760px) { .s-stats { grid-template-columns: 1fr 1fr; } .s-stat:nth-child(3) { border-left: 0; } .s-stat:nth-child(n+3) { border-top: 1px solid var(--lg-separator); } }

/* Feature band (calls to action, advertising): a raised accent-tinted panel. */
.s-band { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--lg-r-xl); padding: 56px; background: var(--lg-surface); color: var(--lg-text); box-shadow: var(--lg-elev-2); }
.s-band::before { content: ""; position: absolute; inset: -30% -10% auto 45%; height: 160%; background: radial-gradient(closest-side, var(--lg-accent-soft), transparent 70%); z-index: -1; }
.s-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--lg-fill-ink) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(90deg, transparent, var(--lg-black) 60%); -webkit-mask-image: linear-gradient(90deg, transparent, var(--lg-black) 60%); }
.s-band .s-h2 { color: var(--lg-text); }
.s-band .s-lead { color: var(--lg-text-secondary); }
.s-band .s-eyebrow { color: var(--lg-accent-text); }
.s-band-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .s-band { padding: 32px 22px; } .s-band-grid { grid-template-columns: 1fr; gap: 28px; } }

/* FAQ: a grouped list (SPEC §5.4) */
.s-faq { display: grid; gap: 10px; }
.s-faq details { border-radius: var(--lg-r-lg); background: var(--lg-surface); box-shadow: var(--lg-elev-1); }
.s-faq summary { list-style: none; cursor: pointer; min-height: var(--lg-row-h); padding: 16px 20px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.s-faq summary::-webkit-details-marker { display: none; }
.s-faq summary .s-ic { width: 18px; height: 18px; color: var(--lg-text-tertiary); transition: transform var(--lg-dur) var(--lg-ease); }
.s-faq details[open] summary .s-ic { transform: rotate(45deg); }
.s-faq details > div { padding: 0 20px 18px; color: var(--lg-text-secondary); line-height: 1.6; }

/* Tabs: the segmented control (SPEC §5.2) */
.s-tabs { display: inline-flex; gap: 2px; padding: 4px; border-radius: var(--lg-r-pill); background: var(--lg-fill); }
.s-tab { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: var(--lg-r-pill); border: 0; background: transparent; color: var(--lg-text-secondary); font-weight: 500; font-size: var(--lg-t-label); white-space: nowrap; text-decoration: none !important; transition: background-color var(--lg-dur) var(--lg-ease), color var(--lg-dur) var(--lg-ease); }
.s-tab:hover { color: var(--lg-text); }
.s-tab[aria-selected="true"], .s-tab.is-on { background: var(--lg-surface-solid); color: var(--lg-text); font-weight: 600; box-shadow: var(--lg-indicator-shadow); }
.s-tab .s-ic { width: 16px; height: 16px; }

/* Alerts and empty states */
.s-alert { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-radius: var(--lg-r-lg); font-size: var(--lg-t-label); font-weight: 500; line-height: 1.5; }
.s-alert .s-ic { width: 18px; height: 18px; margin-top: 1px; }
.s-alert--ok { background: var(--lg-success-soft); color: var(--lg-success-ink); }
.s-alert--error { background: var(--lg-danger-soft); color: var(--lg-danger-ink); }
.s-alert--info { background: var(--lg-accent-soft); color: var(--lg-text); }
.s-alert--warn { background: var(--lg-warning-soft); color: var(--lg-warning-ink); }
.s-empty { text-align: center; padding: 64px 24px; border-radius: var(--lg-r-xl); background: var(--lg-surface); box-shadow: var(--lg-elev-1); }
.s-empty-ic { width: 56px; height: 56px; margin: 0 auto 16px; border-radius: var(--lg-r-md); display: grid; place-items: center; background: var(--lg-accent-soft); color: var(--lg-accent-text); }
.s-empty-ic .s-ic { width: 28px; height: 28px; }
.s-empty h2, .s-empty h3 { font-size: var(--lg-t-nav-title); font-weight: 700; }
.s-empty p { margin: 8px auto 0; max-width: 46ch; color: var(--lg-text-secondary); }
.s-empty .s-btn { margin-top: 20px; }

/* Pager */
.s-pager { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 40px; }
.s-pager ol { list-style: none; padding: 0; display: flex; gap: 6px; }
.s-pager-page, .s-pager-step { min-width: 40px; height: 40px; padding: 0 12px; border-radius: var(--lg-r-pill); border: 0; background: var(--lg-fill); color: var(--lg-text); display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; font-size: var(--lg-t-label); font-variant-numeric: tabular-nums; text-decoration: none !important; transition: background-color var(--lg-dur) var(--lg-ease), transform var(--lg-dur-fast) var(--lg-ease); }
.s-pager-page:hover, .s-pager-step:hover { background: var(--lg-fill-strong); }
.s-pager-page:active, .s-pager-step:active { transform: scale(.95); }
.s-pager-page[aria-current="page"] { background: var(--lg-accent-fill); color: var(--lg-on-accent); }
.s-pager-gap { min-width: 24px; display: inline-flex; justify-content: center; align-items: center; height: 40px; color: var(--lg-text-tertiary); }
.s-pager-words { text-align: center; margin-top: 12px; font-size: var(--lg-t-secondary); color: var(--lg-text-tertiary); }
@media (pointer: coarse) { .s-pager-page, .s-pager-step, .s-pager-gap { min-width: var(--lg-hit); height: var(--lg-hit); } }

/* Neighborhood tile (words over a photo) */
.s-place { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: var(--lg-r-xl); overflow: hidden; background: var(--lg-surface-solid); color: var(--lg-white); text-decoration: none !important; isolation: isolate; box-shadow: var(--lg-elev-2); transition: transform var(--lg-dur-fast) var(--lg-ease); }
.s-place:active { transform: scale(.96); }
.s-place img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform var(--lg-dur-sheet) var(--lg-ease); }
.s-place::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in srgb, var(--lg-black) 84%, transparent) 0%, color-mix(in srgb, var(--lg-black) 20%, transparent) 55%, color-mix(in srgb, var(--lg-black) 5%, transparent) 100%); }
.s-place:hover img { transform: scale(1.06); }
.s-place-body { position: absolute; left: 18px; right: 18px; bottom: 18px; }
.s-place-borough { font-size: var(--lg-t-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .86; }
.s-place-name { font-size: var(--lg-t-title); font-weight: 700; letter-spacing: var(--lg-tracking-title); line-height: 1.2; margin-top: 4px; }
.s-place-meta { margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; font-size: var(--lg-t-secondary); font-weight: 500; opacity: .92; }
.s-place-initials { position: absolute; inset: 0; z-index: -2; display: grid; place-items: center; font-size: var(--lg-t-display); font-weight: 700; letter-spacing: var(--lg-tracking-title); color: color-mix(in srgb, var(--lg-white) 40%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--lg-accent) 70%, var(--lg-black)), var(--lg-black)); }

/* Post (news) card */
.s-post { display: flex; flex-direction: column; border-radius: var(--lg-r-xl); overflow: hidden; background: var(--lg-surface); box-shadow: var(--lg-elev-2); color: inherit; text-decoration: none !important; height: 100%; transition: box-shadow var(--lg-dur) var(--lg-ease), transform var(--lg-dur-fast) var(--lg-ease); }
.s-post:hover { box-shadow: var(--lg-elev-3); }
.s-post:active { transform: scale(.98); }
.s-post-media { aspect-ratio: 16 / 10; background: var(--lg-fill); overflow: hidden; }
.s-post-media img { width: 100%; height: 100%; object-fit: cover; }
.s-post-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.s-post-meta { font-size: var(--lg-t-caption); font-weight: 600; color: var(--lg-text-tertiary); display: flex; gap: 8px; flex-wrap: wrap; }
.s-post-title { font-size: var(--lg-t-nav-title); font-weight: 700; letter-spacing: var(--lg-tracking-title); line-height: 1.3; color: var(--lg-text); }
.s-post-excerpt { font-size: var(--lg-t-label); color: var(--lg-text-secondary); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Reveal on scroll (only when JS runs; nothing is hidden without it) */
.s-js .s-reveal { opacity: 0; transition: opacity var(--lg-dur-sheet) var(--lg-ease); }
.s-js .s-reveal.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
  .s-js .s-reveal { opacity: 1; transform: none; }
}

/* Toast (copy link etc.): SPEC §5.13, glass-thick pill */
.s-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px) scale(.9); opacity: 0; z-index: 90; background: var(--lg-glass-overlay); -webkit-backdrop-filter: var(--lg-blur-strong); backdrop-filter: var(--lg-blur-strong); color: var(--lg-text); padding: 12px 20px; border-radius: var(--lg-r-pill); font-weight: 600; font-size: var(--lg-t-control); box-shadow: var(--lg-elev-3); transition: opacity var(--lg-dur) var(--lg-ease), transform var(--lg-dur-toast) var(--lg-spring); pointer-events: none; }
.s-toast.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Utilities */
.s-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.s-stack { display: flex; flex-direction: column; gap: 12px; }
.s-center { text-align: center; }
.s-mt-0 { margin-top: 0; } .s-mt-1 { margin-top: 8px; } .s-mt-2 { margin-top: 16px; } .s-mt-3 { margin-top: 24px; } .s-mt-4 { margin-top: 32px; } .s-mt-5 { margin-top: 48px; }
@media (max-width: 640px) { .s-hide-sm { display: none !important; } }
@media (min-width: 641px) { .s-only-sm { display: none !important; } }

/* A band's calls to action: the primary and the glass button (the markup names the on-photo
   variants, which the band no longer is). */
.s-band .s-btn--white { --b-bg: var(--lg-accent-fill); --b-ink: var(--lg-on-accent); --b-edge: var(--lg-button-shadow); }
.s-band .s-btn--white:hover { --b-bg: var(--lg-accent-fill-pressed); }
.s-band .s-btn--glass { --b-bg: var(--lg-glass-solid); --b-ink: var(--lg-text); --b-edge: var(--lg-elev-1); -webkit-backdrop-filter: none; backdrop-filter: none; }
.s-band .s-btn--glass:hover { --b-bg: var(--lg-surface-solid); }