/* Direction: airy editorial — ivory paper, deep forest green, brass touches,
   a high-contrast Garamond display (Cormorant Garamond) over a clean grotesque body (Manrope). */

:root {
  --canvas: #fbf9f5;
  --surface: #ffffff;
  --surface-2: #f1ece2;
  --border: #e4ddcf;
  --border-strong: #b1b2af;
  --ink: #16231f;
  --muted: #5b6862;
  --accent: #1f5a49;
  --accent-hover: #1a4d3e;
  --accent-ink: #ffffff;
  --accent-text: #1b5141;
  --accent-strong: #1f5a49;
  --accent-soft: #e2eee8;
  --accent-border: #98b1a8;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #dfeadf;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f2e5d9;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f3dedb;
  --danger-strong: #b91c1c;
  --chart-1: #1f5a49;
  --chart-2: #087196;
  --chart-3: #4f3b8d;
  --chart-4: #963d6b;
  --chart-5: #7a3700;
  --chart-6: #686902;

  --font-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --font-body: "Manrope", system-ui, sans-serif;
  --display-weight: 500;
  --display-tracking: -0.02em;
  --radius-card: 22px;
  --radius-btn: 999px;
  --radius-input: 14px;
  --shadow-card: 0 18px 50px -24px rgba(22, 35, 31, 0.28);
  --x-on-photo: #ffffff;
  --x-band: #12201b;
  --x-brass: #d3a85f;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Manrope", system-ui, sans-serif;
  --eyebrow-tracking: 0.22em;
}

html[data-theme="dark"] {
  --canvas: #040d0a;
  --surface: #1d2523;
  --surface-2: #111916;
  --border: #272f2c;
  --border-strong: #4f5654;
  --ink: #fbf9f5;
  --muted: #989b97;
  --accent: #1f5a49;
  --accent-hover: #417364;
  --accent-ink: #ffffff;
  --accent-text: #6b9286;
  --accent-strong: #6b9286;
  --accent-soft: #0a1e18;
  --accent-border: #103026;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #082615;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2b1c0a;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2c100e;
  --danger-strong: #d16969;
  --chart-1: #3e7765;
  --chart-2: #1490bf;
  --chart-3: #8170c7;
  --chart-4: #b95c8a;
  --chart-5: #bc662d;
  --chart-6: #86880b;
  --x-on-photo: #ffffff;
  --x-band: #0e2c22;
  --x-brass: #d3a85f;
}

/* NestFinder — what no primitive covers: the hero, the motion, the gallery, the filter drawer. */

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--eyebrow-tracking, 0.22em);
}
/* Cormorant sets old-style figures by default; prices and counts read better lining. */
.font-display, h1, h2 { font-variant-numeric: lining-nums proportional-nums; }

/* ---------- hero ---------- */
.scrim {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.32) 48%, rgba(0, 0, 0, 0.05) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.55) 100%);
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }
.kenburns { transform-origin: 62% 45%; animation: kenburns 20s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; will-change: transform; }

@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.rise-1 { animation-delay: 0.12s; }
.rise-2 { animation-delay: 0.24s; }
.rise-3 { animation-delay: 0.38s; }

/* ---------- scroll reveal (armed by app.js only, so content shows if the script never runs) ---------- */
html.reveal-on [data-inview] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd, 0s),
    transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) var(--rd, 0s);
}
html.reveal-on [data-inview].is-in { opacity: 1; transform: none; }

/* ---------- listing cards ---------- */
.card-photo { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.group:hover .card-photo, .group:focus-within .card-photo { transform: scale(1.06); }
.card-shade { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 100%); }
.pill-glass {
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--ink);
  backdrop-filter: blur(6px);
}
.card-arrow { transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease; }
.group:hover .card-arrow { transform: translate(2px, -2px); background: var(--accent); color: var(--accent-ink); }
.lift { transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.lift:hover { transform: translateY(-3px); box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--ink) 45%, transparent); }

/* ---------- gallery ---------- */
.gallery-next { position: absolute; inset: 0; opacity: 0; transition: opacity 0.55s ease; }
.gallery-next.is-shown { opacity: 1; }
.gallery-nav {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  color: var(--ink);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s ease, background-color 0.2s ease;
}
.gallery-stage:hover .gallery-nav, .gallery-nav:focus-visible { opacity: 1; }
.gallery-nav:hover { background: var(--surface); }
@media (hover: none) { .gallery-nav { opacity: 1; } }
.gallery-count { background: color-mix(in srgb, var(--ink) 62%, transparent); color: var(--canvas); backdrop-filter: blur(6px); }
.thumb { opacity: 0.6; transition: opacity 0.25s ease, box-shadow 0.25s ease; }
.thumb:hover { opacity: 0.9; }
.thumb[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent); }

/* ---------- filters: a bar on desktop, a bottom sheet on phone and tablet ---------- */
#results { transition: opacity 0.25s ease; }
#results.htmx-request { opacity: 0.45; }
.filters-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: color-mix(in srgb, var(--ink) 45%, transparent);
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
@media (max-width: 1023.98px) {
  .filters {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    max-height: 86vh; overflow-y: auto;
    margin-top: 0 !important;
    border-radius: 28px 28px 0 0 !important;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
    transform: translateY(105%);
    visibility: hidden;
    transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s linear 0.38s;
    box-shadow: 0 -20px 60px -20px color-mix(in srgb, var(--ink) 40%, transparent);
  }
  html.filters-open .filters, .filters:target {
    transform: none; visibility: visible;
    transition: transform 0.38s cubic-bezier(0.2, 0.7, 0.2, 1), visibility 0s;
  }
  html.filters-open .filters-backdrop { opacity: 1; pointer-events: auto; }
  html.filters-open { overflow: hidden; }
}

/* ---------- small things ---------- */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
summary.plain { list-style: none; cursor: pointer; }
summary.plain::-webkit-details-marker { display: none; }
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease;
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }
.auth-photo { background: var(--x-band); }
.side-link { transition: background-color 0.2s ease, color 0.2s ease; }

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  .kenburns, .rise { animation: none; }
  html.reveal-on [data-inview] { opacity: 1; transform: none; transition: none; }
  .card-photo, .gallery-next, .filters, .lift { transition: none; }
}
html.reduced-motion .kenburns, html.reduced-motion .rise { animation: none; }
html.reduced-motion [data-inview] { opacity: 1 !important; transform: none !important; transition: none !important; }
html.reduced-motion .card-photo, html.reduced-motion .gallery-next, html.reduced-motion .filters { transition: none; }