/* Splash page: sun-washed, homey, quietly refined. */
.splash {
  --sun-wash: #fbf3d0;
  --paper: #fffdf5;
  --eucalyptus: #24382e;
  --eucalyptus-soft: #4d6357;
  --sage: #7e9a7a;
  --marigold: #e8a33d;
  --marigold-deep: #b9761a;
  --rule: #e7dcb2;
  --serif: "Alegreya", Georgia, serif;
  --sans: "Alegreya Sans", system-ui, sans-serif;
  background: var(--sun-wash);
  color: var(--eucalyptus);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  min-height: 100vh;
}
@media (prefers-color-scheme: dark) {
  .splash {
    --sun-wash: #1d2620; --paper: #243029; --eucalyptus: #f3ecd2; --eucalyptus-soft: #c9c3a8;
    --sage: #9bb596; --marigold: #f0b75a; --marigold-deep: #f0b75a; --rule: #3a4a40;
  }
}
body:has(.splash) { background: #fbf3d0; }
@media (prefers-color-scheme: dark) { body:has(.splash) { background: #1d2620; } }
main.page:has(.splash) { max-width: none; padding: 0; }

.splash a { color: inherit; }
.splash .wrap { max-width: 1120px; margin: 0 auto; padding-inline: 1.5rem; }

/* header */
.splash-head { display: flex; align-items: center; justify-content: space-between; padding-block: 1.75rem; }
.wordmark { font-family: var(--serif); font-size: 1.35rem; font-weight: 500; text-decoration: none; display: flex; align-items: center; gap: .55rem; }
.wordmark svg { width: 28px; height: 28px; }
.splash .quiet-link { font-weight: 500; text-decoration: none; border-bottom: 1.5px solid var(--marigold); padding-bottom: 1px; }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: 3.5rem; align-items: center; padding-block: 3.5rem 5rem; }
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.04; letter-spacing: -.012em; margin: 0 0 1.5rem; max-width: 13ch; }
.hero .lede { font-size: 1.25rem; line-height: 1.6; color: var(--eucalyptus-soft); max-width: 34ch; margin: 0 0 2.25rem; }
.actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.splash .btn-sun { font: 600 1.05rem var(--sans); background: var(--eucalyptus); color: var(--sun-wash); padding: .85rem 1.6rem; border-radius: 999px; text-decoration: none; border: 0; }
.splash .btn-sun:hover { background: #18271f; }
@media (prefers-color-scheme: dark) { .btn-sun { color: #1d2620; } .splash .btn-sun:hover { background: #fff8de; } }

/* hero illustration */
.bed { margin: 0; }
.bed svg { width: 100%; height: auto; display: block; overflow: visible; }
.sun-disc { fill: url(#sunglow); }
.splash button.btn-sun { cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {
  .sun-disc { animation: rise 1.8s cubic-bezier(.2, .7, .2, 1) both; }
  .grow { transform-box: fill-box; transform-origin: 50% 100%; animation: sprout 1.1s cubic-bezier(.2, .8, .25, 1) both;
    animation-delay: calc(.3s + var(--i) * 140ms); }
  @keyframes rise { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes sprout { from { transform: scaleY(.15); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }
}

/* section headings */
.splash h2.section { font-family: var(--serif); font-weight: 500; font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.15; margin: 0 0 .75rem; }
.contact h2.section { font-size: 1.75rem; }

/* what grows here */
.grows { background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.grows .wrap { padding-block: 4.5rem; }
.grows-intro { color: var(--eucalyptus-soft); margin: 0 0 2.5rem; max-width: 46ch; }
.season-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; }
.season h3 { font-family: var(--serif); font-weight: 500; font-size: 1.6rem; margin: 0; }
.season .months { color: var(--eucalyptus-soft); margin: .1rem 0 1rem; }
.season .crops { font-family: var(--serif); font-size: 1.35rem; line-height: 1.55; margin: 0; max-width: 32ch; }
.season .now { display: inline-block; margin-left: .7rem; font: 600 .9rem var(--sans); color: var(--marigold-deep); vertical-align: .3rem; }

/* from seed to supper */
.craft { padding-block: 5rem 4.5rem; }
.craft-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; margin-top: 2rem; }
.craft-item svg { width: 40px; height: 40px; margin-bottom: .75rem; }
.craft-item h3 { font-family: var(--serif); font-weight: 500; font-size: 1.3rem; line-height: 1.25; margin: 0 0 .4rem; }
.craft-item p { margin: 0; color: var(--eucalyptus-soft); font-size: 1.05rem; }

/* gatherings + contact */
.lower { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 3.5rem; padding-block: 1rem 6rem; }
.gatherings ul { list-style: none; margin: 0; padding: 0; }
.gatherings li { display: grid; grid-template-columns: 4.25rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--rule); }
.gatherings .date { font-family: var(--serif); line-height: 1.1; text-align: center; }
.gatherings .date b { display: block; font-size: 1.75rem; font-weight: 500; }
.gatherings .title { font-weight: 600; }
.gatherings .meta { color: var(--eucalyptus-soft); font-size: 1rem; }
.gatherings .empty { color: var(--eucalyptus-soft); border-top: 1px solid var(--rule); padding-top: 1rem; }
.contact { background: var(--paper); border-radius: 18px 18px 18px 4px; padding: 2rem; align-self: start; box-shadow: 0 1px 0 var(--rule); }
.contact p { color: var(--eucalyptus-soft); }
.contact .line { color: var(--eucalyptus); font-weight: 500; margin: .25rem 0; }
.public-text { white-space: pre-wrap; }

.splash-foot { border-top: 1px solid var(--rule); padding-block: 1.75rem 2.5rem; color: var(--eucalyptus-soft); font-size: 1rem; }
.splash-foot .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

.splash :focus-visible { outline: 3px solid var(--marigold); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 860px) {
  .hero, .lower, .season-cols { grid-template-columns: 1fr; gap: 2.5rem; }
  .craft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero { padding-block: 1.5rem 3.5rem; }
}
@media (max-width: 480px) {
  .splash .wrap { padding-inline: 1rem; }
  .craft-grid { grid-template-columns: 1fr; }
  .splash { font-size: 1.0625rem; }
}

/* garden finder */
.finder { margin-top: .5rem; max-width: 34rem; }
.finder label { display: block; font-weight: 500; margin-bottom: .5rem; color: var(--eucalyptus); }
.finder-row { display: flex; gap: .6rem; flex-wrap: wrap; }
.finder input { flex: 1 1 14rem; font: 400 1.1rem var(--sans); color: var(--eucalyptus); background: var(--paper);
  border: 1.5px solid var(--rule); border-radius: 999px; padding: .8rem 1.25rem; }
.finder input:focus { border-color: var(--marigold); outline: 3px solid color-mix(in srgb, var(--marigold) 35%, transparent); outline-offset: 0; }
.results-wrap { padding-block: 1rem 3rem; }
.finder-status { color: var(--eucalyptus-soft); margin: 0 0 1rem; }
.results { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; max-width: 46rem; }
.splash .result { display: grid; gap: .1rem; padding: 1.1rem 1.4rem; background: var(--paper); border: 1px solid var(--rule);
  border-radius: 14px; text-decoration: none; }
.splash .result:hover { border-color: var(--marigold); }
.r-name { font-family: var(--serif); font-size: 1.4rem; font-weight: 500; }
.r-place, .r-tag { color: var(--eucalyptus-soft); }
.r-go { margin-top: .35rem; font-weight: 600; color: var(--marigold-deep); }

/* garden page */
.crumb { margin: 0 0 1rem; }
.crumb a { color: var(--eucalyptus-soft); }
.hero h1.garden-name { font-size: clamp(2.3rem, 4.4vw, 3.6rem); max-width: 16ch; }

.organizers { padding-block: 0 5rem; max-width: 1120px; }
.organizers p { color: var(--eucalyptus-soft); max-width: 52ch; }