:root {
  /* Palette — cozy woods + lake (modernized with a ring color) */
  --color-primary: #7b5e3b;
  --highlight-color: #7e63426e;
  /* warm wood */
  --color-primary-600: #6e5436;
  --color-primary-700: #5e482f;

  --color-accent: #a8b5a2;
  --light-accent: #ddd3c1;

  /* soft sage */
  --color-bg: #f5f0e7;
  /* parchment header/footer */
  --color-surface: #fffaf2;
  /* soft paper */
  --color-page: #d9c6b0;
  /* sand base */
  --color-text: #2f2a25;
  /* cozy brown-black */
  --color-muted: #5b5148;

  /* muted text */
  --color-border: #e2d6c7;

  --color-map-hover: #b3b8b1cc;
  --color-map-hover-bg: #efefefcc;

  /* States */
  --color-success: #2e7a4d;
  --color-danger: #b33b3b;
  --color-ring: #7aa28b;
  /* focus ring that matches accent */

  /* Typography (fluid) */
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --font-serif: Georgia, "Times New Roman", Times, serif;
  --fs-0: clamp(0.94rem, 0.33vw + 0.84rem, 1rem);
  --fs-1: clamp(1.1rem, 0.6vw + 0.95rem, 1.25rem);
  --fs-2: clamp(1.4rem, 1.2vw + 1rem, 1.75rem);
  --fs-3: clamp(2rem, 2.5vw + 1rem, 3rem);

  /* Layout rhythm */
  --max-w: 1100px;
  --radius-2xl: 20px;
  --radius: 14px;
  --radius-sm: 10px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Elevation */
  --shadow-1: 0 4px 18px rgba(0, 0, 0, .07);
  --shadow-2: 0 18px 50px rgba(0, 0, 0, .10);

  /* Media */
  --hero-image: url('/images/woods-lake.jpg');
}

::selection {
  background: var(--highlight-color);
  /* color: white; */

}

/* Dark mode tokens */
/* @media (prefers-color-scheme: dark) {
  :root {
    --color-page: #2b251f;
    --color-bg: #332a23;
    --color-surface: #3a3028;
    --color-text: #f6efe7;
    --color-muted: #d4c6b9;
    --color-border: #4a3f36;
    --color-accent: #99b29a;
    --color-ring: #9dc4ae;
  }
} */

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

html,
body {
  height: 100%;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-text);
  background: linear-gradient(180deg, var(--color-page) 0%, color-mix(in srgb, var(--color-page) 70%, var(--color-surface)) 100%);
  font-family: var(--font-sans);
  font-size: var(--fs-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: calc(var(--radius-sm) + 2px);
}

.container {
  width: min(100% - 2rem, var(--max-w));
  margin-inline: auto;
}

/* Hero */
.hero {
  min-height: calc(100dvh - 120px);
  display: grid;
  place-items: center;
  padding: var(--space-12) 0 var(--space-10);
}

.hero--coming-soon {
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--color-page) 20%, transparent) 0%,
      color-mix(in srgb, var(--color-page) 60%, transparent) 100%),
    var(--hero-image) center/cover no-repeat;
}

/* Footer */
.site-footer {
  background: var(--color-page);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-12);
  color: var(--color-text);
}

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-12);
  padding: var(--space-12) 0 var(--space-6);
}

.footer__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-1);
  letter-spacing: .2px;
}

.footer__tagline {
  margin: 0 0 var(--space-6);
  color: var(--color-muted);
  font-size: var(--fs-0);
}

.footer__heading {
  margin: 0 0 var(--space-4);
  font-weight: 700;
  font-size: var(--fs-0);
}

.footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-3);
}

.footer__list a {
  color: var(--color-text);
  text-decoration: none;
}

.footer__list a:hover {
  text-decoration: underline;
}

/* Social row */
.social {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: var(--space-4);
}

.social a {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-surface) 50%, transparent);
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}

.social a:hover {
  transition: 0.5s;
  filter: brightness(0.85);
}

.social svg {
  width: 18px;
  height: 18px;
  fill: var(--color-muted);
}

.social a:hover svg {
  fill: var(--color-text);
}

.disable-highlight {
  /* iOS Safari */
  -webkit-touch-callout: none;
  /* Safari */
  -webkit-user-select: none;
  /* Konqueror HTML */
  -khtml-user-select: none;
  /* Old versions of Firefox */
  -moz-user-select: none;
  /* Internet Explorer/Edge */
  -ms-user-select: none;
  /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
  user-select: none;
}

/* Bottom strip */
.footer__bottom {
  border-top: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-page) 85%, var(--color-surface));
}

.footer__bottom-inner {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) 0;
}

.footer__mini {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer__mini a {
  color: var(--color-muted);
  text-decoration: none;
}

#loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background: #fff;
  transition: opacity .35s ease, visibility .35s ease;
}

#loader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader__wrap {
  display: grid;
  place-items: center;
  gap: .75rem;
}

.loader__logo {
  width: 160px;
  height: auto;
  animation: loaderPulse 1.6s ease-in-out infinite;
}

.loader__text {
  font: 600 12px/1.2 system-ui, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #666;
}

@keyframes loaderPulse {
  0% {
    opacity: .25;
    transform: scale(.98);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: .25;
    transform: scale(.98);
  }
}

/* Hide the app until ready (prevents flash) */
#app[hidden] {
  display: none !important;
}



/* Media Queries */

@media (max-width: 768px) {
  .hero {
    padding: var(--space-10) 0 var(--space-8);
  }
}

@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
  }
}

@media (max-width: 640px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }

  .footer__bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}