:root {
  --bg: #f4f5f7;
  --ink: #21242c;
  --muted: #5c6370;
  --accent: #4655c4;
  --card: #ffffff;
  --line: #e6e8ee;
  --control-line: #9aa1b0;
  --soft-accent: #eceefb;
  --accent-hover: #3947a8;
  --danger: #872f2f;
  --danger-bg: #f8e7e3;
  --placeholder-0: #e9e2d2;
  --placeholder-1: #dfe6da;
  --placeholder-2: #e7dcd2;
  --placeholder-3: #e5e0d3;
  --placeholder-4: #dde3e6;
  --radius-image: 10px;
  --radius-card: 12px;
  --radius-panel: 14px;
  --radius-pill: 999px;
  --shadow-focus: 0 0 0 3px rgba(70, 85, 196, 0.25);
  /* Spacing scale (4px base). Use these instead of ad-hoc px values. See docs/STYLE_GUIDE.md */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-11: 44px;
  --space-12: 48px;
  --measure-form: 560px;
  --measure-menu: 224px;
  --measure-prose: 72ch;
  --touch-target: 44px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

/* Kill double-tap-to-zoom on taps (buttons, links, the photo carousel) while
   keeping pinch-zoom intact. Never use user-scalable=no. */
a, button, input, select, textarea, label,
.listing-photos-track, .listing-photo-slide, .photo-tile {
  touch-action: manipulation;
}

html {
  font-size: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
  margin: 0;
  min-inline-size: 320px;
  background: var(--bg);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.5;
}

body, input, button, select, textarea { font-family: inherit; }

img, video, svg {
  max-inline-size: 100%;
  block-size: auto;
}

button, input, select, textarea { font: inherit; }

a { color: var(--accent); }

a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

:focus:not(:focus-visible) { outline: none; }

h1, h2, h3, p, figure, dl, dd { margin-block-start: 0; }

h1, h2, h3 { line-height: 1.2; }

button, input[type="submit"] { cursor: pointer; }

button:disabled, input:disabled, select:disabled, textarea:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.wrap {
  inline-size: 100%;
  margin: 0;
  padding-inline: var(--space-2);
  overflow-x: clip;
}
/* The content wrap grows so the footer sits at the bottom of short pages. */
body > .wrap {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  padding-block-end: var(--space-6);
}
body > .wrap > .page-layout, body > .wrap > .single-column { flex: 1 0 auto; }

.visually-hidden {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  inset-block-start: -6rem;
  inset-inline-start: var(--space-4);
  z-index: 1000;
  padding: 10px var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--card);
  font-weight: 700;
}

.skip-link:focus { inset-block-start: var(--space-3); }

.main-content, .single-column, .board-copy, .listing-row-copy, .header-search { min-inline-size: 0; }

.page-layout { display: block; }

.main-content { inline-size: 100%; }

.single-column {
  inline-size: min(100%, var(--measure-form));
  margin-inline: auto;
  padding-block: var(--space-6) 0;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-block-start: auto;
  padding-block-start: var(--space-11);
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}
.footer-links { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.footer-links a { color: var(--muted); }

.legal-page { max-inline-size: var(--measure-prose); }
.legal-page h2 { margin-block: 26px var(--space-2); font-size: 1.05rem; }
.legal-page p, .legal-page li { margin-block-end: 10px; line-height: 1.6; }
.legal-page ul { padding-inline-start: 22px; }
.legal-intro { color: var(--muted); }
.legal-contact { margin-block-start: 30px; }

@media (min-width: 800px) {
  .wrap { padding-inline: var(--space-6); }

  .page-layout {
    display: flex;
    align-items: flex-start;
    gap: 28px;
  }

  .main-content { flex: 1; }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #403b34;
    --control-line: #504b43;
    --line: #81796d;
  }

  button, input, select, textarea { border-width: 2px !important; }
  .header-search input { border-width: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}