/* ============================================================
   V2 — Hospitality direction.
   Dark, quiet, image-led. Orpheus-forward, minimal UI chrome.
   ============================================================ */

:root {
  --ink:       #0e1518;   /* near-black with a hint of teal */
  --ink-2:     #131d21;
  --paper:     #f5efe4;   /* warmer cream */
  --paper-soft:rgba(245,239,228,.7);
  --paper-dim: rgba(245,239,228,.45);
  --accent:    #e5d3a3;   /* champagne/brass — warm against the dark */
  --accent-dk: #b89b5c;
  --teal:      #21868e;   /* Lakecliff brand teal, used sparingly */
  --rule:      rgba(245,239,228,.14);
  --serif-h:   "Cormorant Garamond", "Orpheus Pro", Georgia, serif;
  --serif-b:   "EB Garamond", "Adobe Garamond Pro", Georgia, serif;
  --sans:      ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*,*::before,*::after { box-sizing: border-box; }
html,body { margin: 0; }
body {
  font-family: var(--serif-b);
  color: var(--paper);
  background: var(--ink);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--paper); text-decoration: none; }
a:hover { color: var(--accent); }
img { max-width: 100%; display: block; }

h1,h2,h3 {
  font-family: var(--serif-h);
  font-weight: 300;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
  line-height: 1.05;
}
h1 { font-size: clamp(2.8rem, 7vw, 6.4rem); font-style: italic; }
h2 { font-size: clamp(2rem, 4.2vw, 3.6rem); }
h3 { font-size: 1.3rem; letter-spacing: .02em; }

.eyebrow {
  font-family: var(--sans);
  font-size: .65rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
}

.container { width: min(1280px, 92%); margin-inline: auto; }
.narrow    { width: min(740px, 92%); margin-inline: auto; }

/* ---------- Nav (fixed, minimal, letter-spaced) ---------- */
header.site {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  padding: 1.8rem 0;
  background: transparent;
  transition: background .3s ease, padding .3s ease;
}
header.site.scrolled {
  background: rgba(14,21,24,.86);
  padding: 1.1rem 0;
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
header.site .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
}
.mark::before {
  content: "";
  width: 56px; height: 56px;
  /* the source PNG is already the Lakecliff teal (#1d8890) — no filter, so the
     mark matches the golf club's brand exactly (Mahin, 2026-08-07) */
  background: url("images/lakecliff-mark.png") center/contain no-repeat;
}
.mark .name {
  font-family: var(--serif-h);
  font-size: 1.25rem;
  letter-spacing: .08em;
  font-weight: 400;
}
nav.main ul {
  display: flex;
  gap: 2.6rem;
  list-style: none;
  margin: 0; padding: 0;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  font-weight: 500;
}
nav.main a { opacity: .85; transition: opacity .2s, color .2s; }
nav.main a:hover { opacity: 1; color: var(--accent); }
/* the longer "Fitness & Wellness" label + the bigger mark leave no breathing room
   between the lockup and the nav on laptops — tighten progressively, never wrap */
nav.main ul { white-space: nowrap; }
@media (max-width: 1300px) { nav.main ul { gap: 1.7rem; } }
@media (max-width: 1210px) { nav.main ul { gap: 1.15rem; letter-spacing: .22em; } }
@media (max-width: 1080px) { nav.main ul { gap: .85rem;  letter-spacing: .14em; font-size: .63rem; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.hero .bg-media { position: absolute; inset: 0; z-index: -2; background: #000; }
.hero .bg-media video,
.hero .bg-media img.poster {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse at center, rgba(14,21,24,.25) 0%, rgba(14,21,24,.72) 100%),
    linear-gradient(180deg, rgba(14,21,24,.4), rgba(14,21,24,.15) 40%, rgba(14,21,24,.7));
}
.hero .copy {
  text-align: center;
  padding: 6rem 1.5rem 3rem;
  max-width: 50rem;
}
.hero h1 {
  font-weight: 300;
  text-shadow: 0 2px 40px rgba(0,0,0,.35);
}
.hero .sub {
  font-family: var(--serif-b);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--paper-soft);
  max-width: 42ch;
  margin: 1rem auto 0;
}
.hero .scroll-cue {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--paper-dim);
  writing-mode: vertical-rl;
  transform: translateX(-50%) rotate(180deg);
}
.hero .scroll-cue::before {
  content: "";
  display: block;
  width: 1px; height: 38px;
  margin: 0 auto 1rem;
  background: linear-gradient(transparent, var(--paper-dim));
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .36em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 1.1rem 2.4rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: transparent;
  transition: background .2s, color .2s;
}
.btn:hover { background: var(--accent); color: var(--ink); }
.btn.solid { background: var(--accent); color: var(--ink); }
.btn.solid:hover { background: var(--accent-dk); border-color: var(--accent-dk); }
.btn.plain {
  border: none;
  padding: 0;
  color: var(--accent);
  letter-spacing: .3em;
}
.btn.plain::after {
  content: " →";
  transition: margin-left .2s;
  display: inline-block;
  margin-left: .4rem;
}
.btn.plain:hover::after { margin-left: .9rem; }

/* ---------- Sections ---------- */
section { padding: 9rem 0; }
section.tight { padding: 6rem 0; }

.quiet {
  text-align: center;
  max-width: 54ch;
  margin: 0 auto;
}
.quiet h2 { margin-bottom: 1.5rem; font-weight: 300; }
.quiet p {
  font-size: 1.2rem;
  color: var(--paper-soft);
  margin: 0 0 1.6em;
}
.quiet .eyebrow { display: block; margin-bottom: 1.8rem; }

/* ---------- Full-bleed image block ---------- */
.bleed {
  padding: 0;
  position: relative;
  min-height: 85vh;
  display: grid;
  align-items: end;
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.bleed::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
}
.bleed::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(14,21,24,.05) 0%, rgba(14,21,24,.35) 55%, rgba(14,21,24,.85) 100%);
}
.bleed .container { padding: 5rem 0 5rem; max-width: 900px; }
.bleed h2 { max-width: 18ch; font-weight: 300; font-style: italic; margin-bottom: 1.4rem; }
.bleed p {
  font-size: 1.2rem;
  color: var(--paper-soft);
  max-width: 48ch;
  margin: 0 0 2rem;
}

/* ---------- Two-up columns ---------- */
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.two.narrow-text { grid-template-columns: 1.1fr 1fr; }
.two .img {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center;
}
.two .img.wide { aspect-ratio: 4/3; }
.two h2 { font-weight: 300; margin-bottom: 1rem; }
.two p { color: var(--paper-soft); font-size: 1.1rem; margin: 0 0 1.2em; }
@media (max-width: 820px) {
  .two, .two.narrow-text { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ---------- Numbered list ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 3rem 2.5rem;
  counter-reset: pillar;
  border-top: 1px solid var(--rule);
  padding-top: 4rem;
}
.pillar { counter-increment: pillar; }
.pillar::before {
  content: "0" counter(pillar);
  display: block;
  font-family: var(--serif-h);
  font-size: 1.6rem;
  font-style: italic;
  color: var(--accent);
  margin-bottom: 1rem;
  font-weight: 400;
}
.pillar h3 {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: .8rem;
}
.pillar p { color: var(--paper-soft); font-size: .96rem; margin: 0; }

/* ---------- Pricing card (minimal) ---------- */
.rates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.rate {
  padding: 3rem 2rem;
  text-align: center;
  border-left: 1px solid var(--rule);
}
.rate:first-child { border-left: none; }
.rate .label {
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--paper-dim);
  font-weight: 500;
  margin-bottom: 1.6rem;
}
.rate .price {
  font-family: var(--serif-h);
  font-size: 4rem;
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  color: var(--paper);
}
.rate .price small {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-top: .8rem;
  font-weight: 500;
}
.rate p {
  color: var(--paper-soft);
  font-size: .95rem;
  margin-top: 1.6rem;
}

/* ---------- Footer ---------- */
footer.site {
  border-top: 1px solid var(--rule);
  padding: 5rem 0 3rem;
  font-size: .88rem;
}
footer.site .cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
  color: var(--paper-soft);
}
footer.site h4 {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .36em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.4rem;
  font-weight: 500;
}
footer.site ul { list-style: none; padding: 0; margin: 0; }
footer.site li { margin-bottom: .6rem; }
footer.site a { color: var(--paper-soft); }
footer.site a:hover { color: var(--accent); }
footer.site .legal {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  font-family: var(--sans);
  font-size: .65rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--paper-dim);
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}
@media (max-width: 820px) {
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  footer.site .legal { flex-direction: column; align-items: center; gap: .6rem; text-align: center; }
}

/* ---------- Mission & values ---------- */
.values {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2.6rem;
  margin-top: 2.6rem;
  border-top: 1px solid var(--rule);
  padding-top: 2.6rem;
}
.values .value {
  font-family: var(--serif-h);
  font-size: 1.9rem;
  font-style: italic;
  font-weight: 300;
  color: var(--accent);
}
.values .value:not(:last-child)::after {
  content: "·";
  margin-left: 2.6rem;
  color: var(--rule);
  font-style: normal;
}
@media (max-width: 600px) {
  .values { gap: 1rem; }
  .values .value:not(:last-child)::after { display: none; }
}

/* ---------- Bios (Come meet us) ---------- */
.bios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 4rem;
  border-top: 1px solid var(--rule);
  padding-top: 4rem;
}
.bio { display: flex; flex-direction: column; }
.bio .portrait {
  aspect-ratio: 4/5;
  background-size: cover;
  background-position: center top;
  margin-bottom: 1.8rem;
}
.bio .role {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin-bottom: .7rem;
}
.bio h3 { font-family: var(--serif-h); font-size: 2rem; font-style: italic; font-weight: 300; margin-bottom: .9rem; }
.bio p { color: var(--paper-soft); font-size: 1rem; margin: 0 0 1em; }

/* ---------- Two-column simple list (workshops, etc.) ---------- */
.list-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem 3rem;
  border-top: 1px solid var(--rule);
  padding-top: 2.4rem;
  margin-top: 2.4rem;
  list-style: none;
  padding-left: 0;
}
.list-2 li {
  font-size: 1.1rem;
  color: var(--paper-soft);
  padding-left: 1.4rem;
  position: relative;
}
.list-2 li::before {
  content: "—";
  position: absolute; left: 0;
  color: var(--accent);
}
@media (max-width: 600px) { .list-2 { grid-template-columns: 1fr; } }

/* ---------- Facts / hours strip ---------- */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 2.5rem 0;
}
.fact {
  padding: 2rem 1.5rem;
  border-left: 1px solid var(--rule);
  text-align: center;
}
.fact:first-child { border-left: none; }
.fact .k {
  font-family: var(--sans);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--paper-dim);
  font-weight: 500;
  margin-bottom: .9rem;
}
.fact .v {
  font-family: var(--serif-h);
  font-size: 1.7rem;
  font-style: italic;
  font-weight: 300;
  color: var(--paper);
  line-height: 1.15;
}
.fact .v small { display: block; font-family: var(--serif-b); font-style: normal; font-size: .9rem; color: var(--paper-soft); margin-top: .35rem; }
@media (max-width: 620px) {
  .fact { border-left: none; border-top: 1px solid var(--rule); }
  .fact:first-child { border-top: none; }
}

/* ---------- Gallery strip ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 4px;
}
.gallery .shot {
  aspect-ratio: 3/2;
  background-size: cover;
  background-position: center;
}

/* ---------- Inline note ---------- */
.note {
  border-left: 2px solid var(--accent);
  padding: .3rem 0 .3rem 1.4rem;
  margin: 1.6rem auto 0;
  max-width: 54ch;
  color: var(--paper-soft);
  font-style: italic;
  font-size: 1.02rem;
}

@media (max-width: 720px) {
  section { padding: 6rem 0; }
  .two .img { aspect-ratio: 3/2; }
  .bio .portrait { aspect-ratio: 3/2; }
}

/* ---------- Brand lockup (wave + Lakecliff + RACQUET CLUB) ---------- */
.mark .lockup { display: flex; flex-direction: column; line-height: 1.05; }
.mark .tag {
  font-family: var(--sans);
  font-size: .5rem;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: .28rem;
  font-weight: 500;
  white-space: nowrap;
}

/* ---------- Mobile nav (hamburger drawer) ---------- */
.nav-toggle {
  display: none;
  background: none; border: 0; cursor: pointer;
  padding: .5rem; margin: -.5rem;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px;
  background: var(--paper); margin: 5px 0;
  transition: transform .22s ease, opacity .18s ease;
}
@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  /* logo + toggle must paint above the drawer (same stacking context inside header) */
  .mark, .nav-toggle { position: relative; z-index: 20; }
  .mark::before { width: 46px; height: 46px; }   /* keep the lockup + burger on one line */
  nav.main ul {
    display: flex; flex-direction: column; gap: 1.9rem;
    position: fixed; top: 0; left: 0; right: 0;
    padding: 6.2rem 8% 2.8rem;
    background: rgba(14,21,24,.97);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule);
    transform: translateY(-102%);
    transition: transform .28s ease;
    z-index: 15;               /* under the fixed header (z-20) so logo + X stay visible */
    font-size: .8rem;
  }
  body.nav-open nav.main ul { transform: translateY(0); }
  body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  body.nav-open header.site { background: transparent; }
}

/* ---------- Small-screen legibility (Mahin, 2026-08-08) ----------
   "pretty dark and hard to read on a phone". Measured first: on solid dark
   panels the copy is fine (8.3:1), but --paper-dim was 4.09:1 (fails AA), and
   text over photos ran 1.6-4.5:1 — and on a phone the photo sections fill the
   whole screen, so that IS the page.

   The obvious fix (a heavier scrim) buys contrast by making it darker still,
   which is the opposite of what was asked. So instead: LIGHTEN the photo
   overlays so the images read bright and warm, and give the type its own local
   backing — a shadow on hero text, and a scrim concentrated only where copy
   actually sits. Warmth is preserved by keeping every hue exactly as-is and
   changing only luminance/alpha. Desktop is untouched. */
@media (max-width: 900px) {
  :root {
    /* a pure luminance lift of the brand ink — same hue ratio (14:21:24 -> 29:43:48),
       26% brighter page, cream still 12.7:1. Warmth lives in the cream/champagne
       type, which is unchanged, so this reads lighter without going grey. */
    --ink:        #1d2b30;
    --ink-2:      #24363b;
    --paper-soft: rgba(245,239,228,.88);  /* was .70 -> 8.3:1,  now 10.2:1 */
    --paper-dim:  rgba(245,239,228,.72);  /* was .45 -> 4.09:1 (AA fail), now 7.3:1 */
    --rule:       rgba(245,239,228,.22);  /* hairlines were nearly invisible on glass */
  }
  /* surfaces that hardcoded the old ink, kept in step with the lift */
  header.site.scrolled { background: rgba(29,43,48,.90); }
  body.nav-open nav.main ul,
  nav.main ul { background: rgba(29,43,48,.975); }
  body { font-size: 18px; line-height: 1.72; }

  /* let the photography come through, then back the words themselves */
  .hero::after {
    background:
      radial-gradient(ellipse at center, rgba(14,21,24,.06) 0%, rgba(14,21,24,.44) 100%),
      linear-gradient(180deg, rgba(14,21,24,.30), rgba(14,21,24,.04) 42%, rgba(14,21,24,.52));
  }
  .hero h1,
  .hero .sub,
  .hero .eyebrow { text-shadow: 0 1px 3px rgba(0,0,0,.55), 0 2px 22px rgba(0,0,0,.75); }
  .hero .sub { color: var(--paper); }
  /* A scrim behind the WORDS instead of over the whole photo. Measured on the
     live site: over the bright pool/court heroes the eyebrow was 1.8-2.8:1 even
     with the shadow. This feathers to nothing at the edges, so the image still
     reads bright while the copy gets a solid base. */
  .hero .copy {
    background: radial-gradient(ellipse 128% 74% at 50% 48%,
                rgba(14,21,24,.80) 0%, rgba(14,21,24,.66) 42%,
                rgba(14,21,24,.28) 74%, rgba(14,21,24,0) 100%);
  }

  /* bleed sections: brighter at the top, darker only under the copy */
  .bleed::after {
    /* top stays clear so the photo actually reads; the ramp reaches full strength
       by ~55% because the copy block is bottom-aligned and starts around there */
    background:
      linear-gradient(180deg, rgba(14,21,24,0) 0%, rgba(14,21,24,.10) 28%,
                              rgba(14,21,24,.68) 55%, rgba(14,21,24,.90) 76%,
                              rgba(14,21,24,.95) 100%);
  }
  .bleed h2, .bleed .eyebrow { text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 2px 18px rgba(0,0,0,.7); }
  .bleed p, .quiet p { color: var(--paper-soft); }

  /* less dead dark space between blocks — a big part of "feels dark" */
  section { padding: 4.6rem 0; }
  section.tight { padding: 3.6rem 0; }
  .bleed { min-height: 74vh; }
  .bleed .container { padding: 3.2rem 0; }

  /* small type was the least legible thing on glass */
  .eyebrow { font-size: .7rem; letter-spacing: .28em; }
  .note { color: var(--paper-dim); font-size: .95rem; }
  .btn { font-size: .7rem; letter-spacing: .26em; padding: 1.05rem 2rem; }
  .fact .v small, .rate p { color: var(--paper-soft); }
}