/* Wood Meadow — photo-led community site
   ======================================
   Modelled on lakelinganore.org, which Aaron pointed at as the target. The gap from the
   first two passes was STRUCTURAL, not cosmetic: that site is a wide, photo-led brochure —
   full-bleed hero with overlaid welcome text, then alternating full-width image/text bands
   that create a visual rhythm. The earlier version was a narrow 46rem document with a
   small contained header image, and no palette tuning closes that distance.

   So: full-bleed sections, a tall hero, large imagery throughout, a utility bar with
   contact details, and a multi-column footer.

   THE HONEST DEPENDENCY: this aesthetic is carried by photography. Lake Linganore works
   because of big outdoor photographs. Until Wood Meadow has its own, the image areas use
   layered CSS gradients that read as deliberate rather than broken — each one is a single
   element to swap for a real photo, and the markup already has the <img> path commented in
   place. Expect the site to improve more from one good wide shot of the pool house than
   from anything else here.

   Type: Georgia for display (warm, old-style numerals, on every device, so no webfont
   request and no flash of the wrong face — there is no build step here and there should be
   no font loader either), system sans for body. */

:root{
  --paper:#fbf9f3;
  --paper-2:#ffffff;
  --band:#f1efe6;          /* alternating band tint */
  --ink:#241f1a;
  --muted:#6b645a;
  --rule:#ded7c7;
  --green:#2f4f35;         /* deep tree line, for the dark bands */
  --green-2:#3c6243;       /* links and accents on light ground */
  --green-mid:#4a6b4e;
  --wheat:#9c6b24;
  --warn-bg:#fdf3d8; --warn-ink:#6b5214; --warn-rule:#e8d49a;
}
:root[data-theme=dark]{
  --paper:#171715; --paper-2:#1e1e1b; --band:#201f1c; --ink:#ebe6db; --muted:#a39b8d;
  --rule:#343128; --green:#8fb894; --green-2:#7aa881; --green-mid:#6d9574; --wheat:#d5a155;
  --warn-bg:#352c13; --warn-ink:#efdca6; --warn-rule:#5a4a1d;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:18px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

/* Contained text inside full-bleed sections. Wider than the old 46rem so photographs have
   room to behave like photographs. */
.inner{max-width:64rem;margin:0 auto;padding:0 1.25rem}
.narrow{max-width:46rem}

/* ---- utility bar + nav ------------------------------------------------- */
.util{background:var(--green);color:#f2f6f2;font-size:.86rem}
.util .inner{display:flex;gap:1rem;flex-wrap:wrap;justify-content:space-between;
             padding:.5rem 1.25rem}
.util a{color:#f2f6f2;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)}

header.site{background:var(--paper-2);border-bottom:1px solid var(--rule);
            position:sticky;top:0;z-index:10}
header.site .inner{display:flex;align-items:center;justify-content:space-between;
                   gap:1rem;flex-wrap:wrap;padding:.7rem 1.25rem}
.brand{display:flex;align-items:baseline;gap:.5rem;text-decoration:none;color:var(--ink)}
.brand b{font:600 1.5rem/1 Georgia,"Iowan Old Style",serif;letter-spacing:-.015em}
.brand span{color:var(--muted);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
nav{display:flex;gap:.15rem;flex-wrap:wrap}
nav a{padding:.5rem .7rem;text-decoration:none;color:var(--ink);font-size:.95rem;
      border-bottom:3px solid transparent}
nav a:hover{border-bottom-color:var(--rule)}
nav a[aria-current=page]{border-bottom-color:var(--green-2);font-weight:600}

/* ---- full-bleed hero --------------------------------------------------- */
.hero{position:relative;min-height:min(60vh,30rem);display:grid;align-items:end;
      background:var(--green)}
.hero .shot{position:absolute;inset:0;background-size:cover;background-position:center}
/* Stand-in: a layered meadow horizon. Replace the whole .shot element with
   <img src="/assets/pool-house.jpg" alt="..."> when a photograph exists. */
.hero .shot.standin{
  background:
    radial-gradient(1200px 300px at 70% 18%, rgba(255,226,160,.55), transparent 70%),
    radial-gradient(60px 60px at 72% 22%, rgba(255,240,200,.95), transparent 70%),
    linear-gradient(#b9d4e6 0, #cfe0e4 38%, #a9c48c 38%, #85a86d 56%, #5f8358 72%, #44663f 100%);
}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(18,24,18,.82) 0, rgba(18,24,18,.35) 45%, rgba(18,24,18,.08) 100%)}
.hero .inner{position:relative;z-index:1;padding-bottom:2.5rem;padding-top:5rem;color:#fff}
.hero h1{font:600 clamp(2rem,5.5vw,3.4rem)/1.08 Georgia,serif;margin:0 0 .5rem;
         letter-spacing:-.02em;text-shadow:0 1px 18px rgba(0,0,0,.35)}
.hero p{font-size:clamp(1.05rem,2.2vw,1.3rem);max-width:34rem;margin:0;color:#f0ece2}
.hero .actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.5rem}
.btn{display:inline-block;padding:.85rem 1.5rem;border-radius:.35rem;text-decoration:none;
     font-weight:600;font-size:1rem;min-height:3rem;line-height:1.3}
.btn.solid{background:#fff;color:var(--green)}
.btn.ghost{border:1.5px solid rgba(255,255,255,.75);color:#fff}
.btn:hover{filter:brightness(1.05)}

/* ---- alternating bands ------------------------------------------------- */
section.band{padding:3.25rem 0}
section.band.tint{background:var(--band)}
section.band.dark{background:var(--green);color:#f1f5f0}
section.band.dark a{color:#fff}
section.band.dark .muted{color:#cfdccf}
.band h2{font:600 clamp(1.5rem,3vw,2rem)/1.2 Georgia,serif;margin:0 0 .6rem;letter-spacing:-.015em}
.band .kicker{font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
              color:var(--wheat);font-weight:700;margin:0 0 .4rem}
section.band.dark .kicker{color:#e6c98b}

/* image + text pair; reverses on alternate bands for rhythm */
.split{display:grid;grid-template-columns:1fr;gap:1.75rem;align-items:center}
@media(min-width:48rem){
  .split{grid-template-columns:1.05fr 1fr;gap:2.5rem}
  .split.flip .pic{order:2}
}
.pic{border-radius:.6rem;overflow:hidden;border:1px solid var(--rule);
     min-height:15rem;background:var(--band)}
.pic img{display:block;width:100%;height:100%;object-fit:cover}
.pic.standin-pool{background:
  radial-gradient(400px 160px at 30% 20%, rgba(255,235,185,.5), transparent 70%),
  linear-gradient(#cfe3ee 0 30%, #e8e2d2 30% 44%, #8fc3d6 44% 76%, #6aa7bd 76% 100%)}
.pic.standin-trees{background:
  linear-gradient(#cfe0e8 0 26%, #7f9e6a 26% 48%, #5d7f52 48% 72%, #42603c 72% 100%)}
.pic.standin-house{background:
  linear-gradient(#d8e6ec 0 34%, #c9b795 34% 42%, #a98d63 42% 62%, #7f9a68 62% 100%)}

/* ---- cards ------------------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.1rem}
.card{background:var(--paper-2);border:1px solid var(--rule);border-radius:.6rem;
      overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.card:hover{border-color:var(--green-2)}
.card .thumb{height:8.5rem;background:var(--band)}
.card .body{padding:1.1rem;flex:1}
.card h3{font:600 1.2rem/1.25 Georgia,serif;margin:0 0 .35rem}
.card p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.5}
.card .more{display:block;padding:0 1.1rem 1.1rem;color:var(--green-2);font-weight:600;
            font-size:.95rem}
section.band.dark .card{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}
section.band.dark .card h3,section.band.dark .card p{color:#f1f5f0}
section.band.dark .card p{opacity:.85}

/* ---- text, tables, forms ---------------------------------------------- */
.lede{font-size:clamp(1.1rem,2.2vw,1.25rem);line-height:1.6}
h3{font:600 1.15rem/1.3 Georgia,serif;margin:1.6rem 0 .3rem}
p{margin:.7rem 0}
a{color:var(--green-2);text-underline-offset:2px}
.muted,.hint{color:var(--muted);font-size:.95rem}
.note{border-left:4px solid var(--wheat);background:var(--paper-2);padding:.9rem 1.1rem;
      border-radius:0 .45rem .45rem 0;margin:1.2rem 0}
.note strong{font-family:Georgia,serif}
table{width:100%;border-collapse:collapse;margin:1.1rem 0;background:var(--paper-2);
      border:1px solid var(--rule);border-radius:.5rem;overflow:hidden}
caption{text-align:left;color:var(--muted);font-size:.92rem;padding:0 0 .45rem}
th,td{text-align:left;padding:.75rem .85rem;border-bottom:1px solid var(--rule);vertical-align:top}
th{font:600 .8rem/1.3 -apple-system,sans-serif;text-transform:uppercase;letter-spacing:.07em;
   color:var(--muted);background:var(--band)}
tbody tr:last-child td{border-bottom:0}
form{margin-top:1.25rem;background:var(--paper-2);border:1px solid var(--rule);
     border-radius:.6rem;padding:1.5rem}
label{display:block;margin:1.15rem 0 .3rem;font-weight:600}
label:first-of-type{margin-top:0}
input,select,textarea{width:100%;font:inherit;font-size:1.05rem;padding:.8rem .85rem;
  border:1px solid var(--rule);border-radius:.4rem;background:var(--paper);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green-2);outline-offset:1px}
textarea{min-height:9rem;resize:vertical}
button{font:600 1.05rem/1 -apple-system,sans-serif;background:var(--green);color:#fff;
  border:0;padding:.95rem 1.8rem;border-radius:.4rem;cursor:pointer;margin-top:1.4rem;min-height:3rem}
button:hover{filter:brightness(1.12)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.todo{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-rule);
      padding:.75rem .95rem;border-radius:.45rem;font-size:.92rem;margin:.9rem 0}

/* ---- footer ------------------------------------------------------------ */
footer.site{background:#1d2a1e;color:#d7e0d6;margin-top:0;padding:2.75rem 0 1.5rem;font-size:.95rem}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1.75rem}
footer.site h4{font:600 1.05rem/1.2 Georgia,serif;margin:0 0 .5rem;color:#fff}
footer.site a{color:#d7e0d6;text-decoration:none;display:block;padding:.15rem 0}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site .legal{margin-top:2rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14);
  color:#a4b1a4;font-size:.86rem}
@media print{.util,nav,.hero .actions,footer.site{display:none}}