/* Tuinen Vercammen — demo
   Idea: the garden year. Pale sage paper, deep hedge-green ink, one leaf green for the action.
   Type: Libre Franklin 700 / Source Serif 4 (self-hosted). Structure in common.css. */

@font-face { font-family: "Libre Franklin"; src: url("../fonts/libre-franklin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #eef0ea;
  --surface: #e1e6dc;
  --surface-2: #d4dbcd;
  --ink: #17231a;
  --ink-faint: #7b8676;
  --muted: #4c574c;
  --accent: #2f6b3a;
  --accent-hover: #24552d;
  --accent-ink: #ffffff;
  --display: "Libre Franklin", "Arial Black", Arial, sans-serif;
  --text: "Source Serif 4", Georgia, serif;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-head: clamp(2.25rem, 1.2rem + 3.6vw, 4.75rem);
  --margin: clamp(20px, 3vw, 48px);
  --gap: 8px;
  --section: clamp(100px, 12vw, 180px);
  --radius: 14px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --t-fast: 160ms;
}

/* ---------- hero with grass ---------- */
.hero { position: relative; overflow: clip; display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding: 24px var(--margin) clamp(120px, 14vw, 200px); min-height: calc(100svh - 70px); }
.hero__name { font-size: clamp(3rem, 1rem + 5.4vw, 6.5rem); line-height: 0.95; letter-spacing: -0.045em; }
.hero__lead { margin-top: 24px; max-width: 36ch; font-size: var(--step-lead); line-height: 1.35; }
.hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero__pic { overflow: hidden; border-radius: var(--radius); aspect-ratio: 5 / 4; }
.hero__pic img { width: 100%; height: 100%; object-fit: cover; }
.grass { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(110px, 14vw, 190px); pointer-events: none; z-index: 2; }
.wind { position: absolute; right: var(--margin); bottom: 14px; z-index: 3; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--radius); background: var(--bg); color: var(--ink); font: 700 0.875rem/1 var(--display); cursor: pointer; }
.wind:hover { background: var(--surface); }

/* ---------- scene 1: seasons ---------- */
.seasons { margin-top: var(--section); background: var(--ink); color: var(--bg); }
.seasons__stage { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: center; padding: 80px var(--margin); min-height: 100svh; }
.seasons__list { margin-top: 32px; display: grid; gap: 18px; }
.seasons__list li { max-width: 40ch; padding-left: 18px; border-left: 3px solid rgba(238,240,234,0.18); color: rgba(238,240,234,0.72); transition: color 300ms, border-color 300ms; }
.seasons__list b { font-family: var(--display); color: var(--bg); }
.seasons:not(.is-live) .seasons__list li,
.seasons[data-beat="0"] [data-step="0"], .seasons[data-beat="1"] [data-step="1"], .seasons[data-beat="2"] [data-step="2"], .seasons[data-beat="3"] [data-step="3"] { color: var(--bg); border-color: #9fd27c; }
.seasons__fig { position: relative; overflow: hidden; border-radius: var(--radius); }
.garden { width: 100%; height: auto; }
.seasons__name { position: absolute; left: 20px; top: 14px; font: 700 clamp(2rem, 1rem + 3vw, 4rem)/1 var(--display); letter-spacing: -0.04em; color: var(--ink); }
.seasons:not(.is-live) .seasons__name { display: none; }
.fx { position: absolute; inset: 0; pointer-events: none; }
.fx i { position: absolute; top: -20px; display: block; visibility: hidden; }
.seasons:not(.is-live) .fx { display: none; }
.p-petal { width: 10px; height: 7px; border-radius: 60% 0 60% 0; background: #f2b8c6; }
.p-leaf { width: 14px; height: 9px; border-radius: 0 80% 0 80%; background: #d9822b; }
.p-leaf:nth-child(3n) { background: #b5531f; }
.p-leaf:nth-child(4n) { background: #e8b23a; }
.p-snow { width: 6px; height: 6px; border-radius: 50%; background: #fff; }

/* ---------- planner ---------- */
.plan { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; padding: var(--section) var(--margin) 0; }
.plan__head { grid-column: 1 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; }
.plan__head p { max-width: 42ch; font-size: var(--step-lead); line-height: 1.35; }
.plan__form { grid-column: 1 / 6; display: grid; gap: 26px; align-content: start; }
.seg label:has(input[type="checkbox"]:checked) { background: var(--accent); color: var(--accent-ink); }
.plan__out { grid-column: 6 / 13; display: grid; gap: 14px; align-content: start; padding: clamp(20px, 3vw, 36px); border-radius: var(--radius); background: var(--surface); }
.months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.months li { display: grid; place-items: end center; height: 96px; padding-bottom: 8px; border-radius: 8px; background: var(--bg); font: 700 0.8125rem/1 var(--display); color: var(--muted); transform-origin: 50% 100%; transition: background-color 300ms var(--ease-out), color 300ms; }
.months li.is-on { background: var(--accent); color: var(--accent-ink); }
.months.is-new li.is-on { animation: sprout 600ms var(--ease-out) backwards; animation-delay: calc(var(--i) * 40ms); }
@keyframes sprout { from { transform: scaleY(0.3); } to { transform: none; } }
.plan__visits { font: 700 1.125rem/1.2 var(--display); }
.plan__price { color: var(--muted); }
.plan__price strong { display: block; color: var(--ink); font: 700 clamp(1.5rem, 1rem + 1.4vw, 2.25rem)/1.1 var(--display); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan__note { font-size: 1rem; }
.plan__out .btn { justify-self: start; }

.steps { margin-top: var(--section); }

@media (max-width: 1080px) {
  .plan__form, .plan__out { grid-column: 1 / 13; }
}
@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero__pic { aspect-ratio: 4 / 3; }
  .plan__head { grid-template-columns: 1fr; }
  .seasons__stage { grid-template-columns: 1fr; gap: 20px; padding: 48px var(--margin); }
  .seasons.is-live .seasons__list { margin-top: 12px; }
  .seasons.is-live .seasons__list li { display: none; }
  .seasons.is-live[data-beat="0"] [data-step="0"], .seasons.is-live[data-beat="1"] [data-step="1"], .seasons.is-live[data-beat="2"] [data-step="2"], .seasons.is-live[data-beat="3"] [data-step="3"] { display: block; }
}
@media (max-width: 767px) {
  .hero__name { font-size: 12.5vw; }
  .months li { height: 64px; font-size: 0.6875rem; writing-mode: vertical-rl; place-items: center; padding: 0; }
}