/* The Sensory — design system.
   Replaces the Task 6 placeholder scaffold. Palette keeps the deep green
   brand anchor already fixed by head()'s theme-color (#1a3a1a) and adds a
   warm terracotta/gold accent pulled from the site's own renders (roof
   tiles, string lights) so the CSS matches imagery already on the site
   rather than inventing an unrelated mood. Every class here targets markup
   that already exists in content/pages/*.mjs and lib/layout.mjs — no markup
   contract changed, only what was previously unstyled. */

:root {
  --sensory-green: #1a3a1a;
  --sensory-green-light: #2e5c2e;
  --sensory-green-pale: #e9efe6;
  --sensory-terracotta: #b96a3a;
  --sensory-gold: #cf9a44;
  --sensory-gold-pale: #f3e4c4;
  --sensory-cream: #faf6ee;
  --sensory-ink: #16241a;
  --sensory-text: #16241a;
  --sensory-text-soft: rgba(22, 36, 26, 0.68);
  --sensory-line: rgba(22, 36, 26, 0.12);
  --font-sans: 'DM Sans', 'Segoe UI', sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --radius: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 24px 48px -28px rgba(20, 30, 20, 0.45);
  --shadow-card: 0 14px 30px -18px rgba(20, 30, 20, 0.35);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--sensory-text);
  background:
    radial-gradient(60rem 40rem at 8% -10%, rgba(207, 154, 68, 0.10), transparent 60%),
    radial-gradient(50rem 36rem at 100% 0%, rgba(46, 92, 46, 0.10), transparent 55%),
    var(--sensory-cream);
  line-height: 1.6;
}

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

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.15;
  margin: 0 0 0.6em;
  color: var(--sensory-ink);
}

h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.4rem); }

em { color: var(--sensory-terracotta); font-style: italic; }

dfn {
  font-style: normal;
  font-weight: 600;
  color: var(--sensory-green-light);
}

.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------------------------------------------------------------------
 * Header / nav
 * ------------------------------------------------------------------- */

.hdr {
  background: var(--sensory-green);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 8px 24px -16px rgba(0, 0, 0, 0.5);
}

.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
}

.brand {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  text-decoration: none;
  color: inherit;
}

.nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.nav a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.94rem;
  transition: color 0.15s ease;
}

.nav a:hover { color: #fff; }

.nav a[aria-current="page"] {
  color: var(--sensory-gold-pale);
  font-weight: 600;
}

.navtoggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
}

/* ---------------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.btn:hover { transform: translateY(-2px); filter: brightness(1.05); }

.btn--wa {
  background: #25d366;
  color: #06210f;
}

.btn--call {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: none;
}

/* ---------------------------------------------------------------------
 * Hero (home.mjs only — full-bleed concept photo)
 * ------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: flex-end;
  background-image: linear-gradient(180deg, rgba(10,20,12,0.38) 0%, rgba(10,20,12,0.42) 45%, rgba(10,20,12,0.9) 100%), var(--hero-img);
  background-size: cover;
  background-position: center;
  color: #fff;
  overflow: hidden;
}

.hero__in {
  padding: 3rem 1.25rem 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: flex-start;
}

/* Desktop: keep the photo mostly uncovered — text confined to the left
   third, lit by a left-to-right gradient instead of the full-bleed bottom
   vignette used on mobile (where there's no room to spare a two-thirds
   clear zone). */
@media (min-width: 900px) {
  .hero {
    background-image: linear-gradient(100deg, rgba(8,16,10,0.88) 0%, rgba(8,16,10,0.72) 22%, rgba(8,16,10,0.3) 34%, rgba(8,16,10,0) 48%), var(--hero-img);
  }

  .hero__in {
    max-width: 36%;
    padding-left: clamp(2rem, 4vw, 3.5rem);
  }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 0.4rem 0.9rem 0.4rem 0.5rem;
  border-radius: 999px;
  font-size: 0.85rem;
  margin: 0;
  backdrop-filter: blur(6px);
}

.brand-mark { width: auto; height: 26px; object-fit: contain; display: inline-block; margin: 0; }

.hero h1 {
  color: #fff;
  font-size: clamp(2.1rem, 4.6vw, 3.5rem);
  max-width: 32ch;
  margin: 0;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.5);
}

.hero h1 em {
  color: var(--sensory-gold-pale);
}

.hero-sub {
  max-width: 58ch;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.05rem;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.render-tag.render-tag--hero {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 2;
  background: rgba(10, 20, 12, 0.55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(6px);
}

.hero-stats.glass {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  backdrop-filter: blur(16px);
  overflow: hidden;
  margin-top: 0.5rem;
}

.hero-stat {
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.03);
}

.hero-stat strong {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  color: var(--sensory-gold-pale);
}

.hero-stat span {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.35;
}

/* ---------------------------------------------------------------------
 * Section rhythm + glass panels (used on every page)
 * ------------------------------------------------------------------- */

.section {
  padding: clamp(2.5rem, 5vw, 4.5rem) 0;
}

section.section:nth-of-type(even) {
  background: linear-gradient(180deg, rgba(185, 106, 58, 0.05), rgba(185, 106, 58, 0) 70%);
}

.section-glass {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--shadow-soft);
}

.section-intro {
  font-size: 1.08rem;
  color: var(--sensory-text-soft);
  max-width: 66ch;
}

.glass, .glass-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

/* ---------------------------------------------------------------------
 * Card grids: idea-grid, club-grid, infra-card
 * ------------------------------------------------------------------- */

.idea-grid, .club-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.idea-block, .club-floor, .infra-card {
  border-radius: var(--radius-sm);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.idea-block:hover, .club-floor:hover, .infra-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.idea-block h3, .club-floor h3, .infra-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
}

.club-floor ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--sensory-text-soft);
}

.club-floor li { margin-bottom: 0.3rem; }

.infra-card {
  margin-bottom: 1rem;
  display: block;
}

.infra-source {
  font-size: 0.8rem;
  color: var(--sensory-text-soft);
  font-style: italic;
  margin: 0.5rem 0 0;
}

/* ---------------------------------------------------------------------
 * Spec list (what each plot includes / 404 links)
 * ------------------------------------------------------------------- */

.spec-list {
  list-style: none;
  margin: 1.25rem 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.spec-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1rem;
  background: rgba(255, 255, 255, 0.6);
  border-left: 3px solid var(--sensory-terracotta);
  border-radius: 8px;
  font-size: 0.95rem;
}

.spec-label {
  color: var(--sensory-text-soft);
  font-weight: 600;
}

.spec-value { text-align: right; }

/* 404 page reuses .spec-list for plain links — drop the row chrome there */
#not-found .spec-list li {
  background: none;
  border-left: none;
  padding: 0.3rem 0;
  display: block;
}

#not-found .spec-list a {
  color: var(--sensory-green-light);
  font-weight: 600;
  text-decoration: none;
}

/* ---------------------------------------------------------------------
 * Plant tags
 * ------------------------------------------------------------------- */

.plant-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.25rem 0;
}

.plant-tag {
  background: var(--sensory-green-pale);
  color: var(--sensory-green);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.produce-note, .staffing-note, .rrr-note, .dist-caption {
  color: var(--sensory-text-soft);
  font-size: 0.92rem;
  font-style: italic;
  margin-top: 0.5rem;
}

/* ---------------------------------------------------------------------
 * Status badge (model farmhouse — built today)
 * ------------------------------------------------------------------- */

.status-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--sensory-green-pale);
  color: var(--sensory-green);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  margin-bottom: 0.9rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2e9e4f;
  box-shadow: 0 0 0 0 rgba(46, 158, 79, 0.6);
  animation: status-pulse 2.2s infinite;
}

@keyframes status-pulse {
  0% { box-shadow: 0 0 0 0 rgba(46, 158, 79, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(46, 158, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 158, 79, 0); }
}

/* ---------------------------------------------------------------------
 * Distance grid (location section)
 * ------------------------------------------------------------------- */

.dist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 1.25rem 0 0.5rem;
}

.dist-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.65);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}

.dist-name { font-size: 0.82rem; color: var(--sensory-text-soft); }
.dist-time { font-family: var(--font-serif); font-size: 1.25rem; color: var(--sensory-terracotta); }

.directions {
  background: rgba(255, 255, 255, 0.5);
  border-left: 3px solid var(--sensory-green-light);
  padding: 0.85rem 1rem;
  border-radius: 8px;
}

/* ---------------------------------------------------------------------
 * FAQ
 * ------------------------------------------------------------------- */

.faq-item {
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.3rem;
  margin-top: 0.9rem;
}

.faq-q {
  font-weight: 700;
  margin: 0 0 0.4rem;
  color: var(--sensory-ink);
}

.faq-a {
  margin: 0;
  color: var(--sensory-text-soft);
}

/* ---------------------------------------------------------------------
 * Final CTA band
 * ------------------------------------------------------------------- */

.cta-section {
  padding: clamp(3rem, 6vw, 5rem) 0;
  background: linear-gradient(135deg, var(--sensory-green), var(--sensory-green-light));
}

.cta-panel {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
  color: #fff;
  padding: clamp(2rem, 5vw, 3rem);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.cta-panel h2 { color: #fff; }
.cta-panel p { color: rgba(255, 255, 255, 0.85); }

.cta-btn {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.9rem 1.8rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--sensory-gold), var(--sensory-terracotta));
  color: #241205;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease;
}

.cta-btn:hover { transform: translateY(-2px); }

.cta-phone {
  display: block;
  margin-top: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.92rem;
}

.cta-phone a { color: var(--sensory-gold-pale); text-decoration: underline; }

/* ---------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------- */

.ftr {
  background: var(--sensory-green);
  color: rgba(255, 255, 255, 0.86);
  margin-top: 3rem;
  border-top: 2px solid var(--sensory-gold);
}

.ftr__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  padding: 2.5rem 1.25rem;
}

.ftr h5 {
  color: #fff;
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ftr p { color: rgba(255, 255, 255, 0.72); }

.ftr ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ftr a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: none;
}

.ftr a:hover { color: var(--sensory-gold-pale); }

.ftr .btn { margin: 0.6rem 0.6rem 0 0; }

.ftr__btm {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 1rem 1.25rem;
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .nav { display: none; }
  .navtoggle { display: inline-flex; }
  .hero { min-height: 92vh; }
  .idea-grid, .club-grid { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
 * Gallery (Task 9), render badges, floor plan, signboard, compare table
 * ------------------------------------------------------------------- */

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0;
}

figure.gallery-item {
  margin: 0;
  position: relative;
}

figure.gallery-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  transition: transform 0.25s ease;
}

figure.gallery-item:hover img { transform: scale(1.02); }

figure.gallery-item figcaption {
  font-size: 0.85rem;
  color: var(--sensory-text-soft);
  margin-top: 0.45rem;
}

.render-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: rgba(26, 58, 26, 0.1);
  color: var(--sensory-green);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin-bottom: 0.4rem;
}

.floorplan-figure img {
  border-radius: var(--radius-sm);
  border: 1px solid var(--sensory-line);
}

.floorplan-list {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
  color: var(--sensory-text-soft);
}

.floorplan-list li { margin-bottom: 0.3rem; }

.signboard-figure { max-width: 360px; margin: 1rem 0; }

.farmhouse-photo { margin-top: 1.5rem; }

.farmhouse-photo img {
  aspect-ratio: auto;
  max-height: 460px;
  width: 100%;
  object-fit: cover;
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.92rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.compare-table th, .compare-table td {
  text-align: left;
  padding: 0.65rem 0.8rem;
  border-bottom: 1px solid var(--sensory-line);
  vertical-align: top;
}

.compare-table th {
  color: var(--sensory-green);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--sensory-green-pale);
}

.compare-table tbody tr:hover { background: rgba(207, 154, 68, 0.08); }