/* =========================================================================
   THEME: Leroy Helledoorn (LH) - dark, muted, nature accents.
   Lee: "accents on nature and the muted-ness" but NOT bright mode.
   ========================================================================= */

:root {
  --bg: #1a1613;           /* muted dark, earthy brown undertone */
  --fg: #e9e3d8;           /* warm off-white ink */
  --muted: #9a9183;        /* warm muted taupe */
  --accent: #3f7355;       /* dark lush rainforest green */
  --accent-2: #6f8f6a;     /* lighter moss, secondary nature tone */
  --tile-bg: #241f1a;
  --tile-bg-hover: #2b251f;
  --nav-bg: #15110d;
  --radius: 20px;
  --radius-sm: 13px;
  --gap: 18px;
  --pad: 24px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --slide-ms: 640ms;
  --nav-size: 264px;
}

/* Soft depth instead of hard borders. */
.tile {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 30px -18px rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.03);
}
.tile:hover { transform: translateY(-2px); }

.nav { border-right: 1px solid rgba(255, 255, 255, 0.05); }
[data-nav="bottom"] .nav { border-right: 0; border-top: 1px solid rgba(255, 255, 255, 0.05); }
.nav__contact { color: #16120e; }

/* A gentle nature wash behind the deck (very subtle). */
.deck::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 80% 110%, rgba(63, 115, 85, 0.16), transparent 60%),
    radial-gradient(90% 70% at 10% -10%, rgba(111, 143, 106, 0.09), transparent 55%);
}
.slides, .dots { position: absolute; z-index: 1; }

/* Display face on hero + landing name. */
.hero__name, .tile--name .tile__title { font-weight: 600; letter-spacing: -0.5px; }