/* The season's look (season.mjs). Nothing here draws until <html data-season="autumn"> is set, from the date. */

:root {
  --leaf: #f28a2e; --leaf-edge: #b85a16; --leaf-light: #f9b26a;
  --season-sky-top: #a6d6f7; --season-sky-foot: #ffe9cf;
  --season-band: #fbe7c6; --season-band-edge: #f3cf98;
  /* The footer in autumn: cream, with the day's ink (the dark theme sets the night footer back below). */
  --season-foot: #f2e0c4; --season-foot-ink: #0f2742; --season-foot-soft: #3c5672; --season-foot-faint: #51667f; --season-foot-rule: #dcc39b;
  --season-mark-navy: block; --season-mark-white: none;
  /* The card the hero's words sit in, over the painting (none in the dark theme, where the painting is hidden). */
  --season-panel: #fffaf0; --season-panel-pad: clamp(22px, 3vw, 36px) clamp(22px, 3.2vw, 40px); --season-panel-shadow: var(--shadow);
}

/* --- The site in autumn: warmer paper, cream and rules; ink, type and the blue buttons unchanged ---- */
html[data-season="autumn"] { --paper: #f9eedb; --card: #fffaf0; --sunk: #f2e0c4; --rule: #e9d3b3; }
/* The footer's words are the night theme's light ones (grown-up.css): on the cream they were unreadable in both themes
   (2026-11-02: "almost impossible to see"). In autumn the footer uses the day's ink, through the night variables. */
html[data-season="autumn"] .foot { background: var(--season-foot); --night-ink: var(--season-foot-ink); --night-soft: var(--season-foot-soft); --night-faint: var(--season-foot-faint); --night-rule: var(--season-foot-rule); }
html[data-season="autumn"] .foot__col h2, html[data-season="autumn"] .foot__theme legend,
html[data-season="autumn"] .foot__col a:hover, html[data-season="autumn"] .foot__out:hover { color: var(--season-foot-ink); }
html[data-season="autumn"] .foot__theme input:checked + span { background: var(--season-foot-ink); color: var(--season-foot); }
/* The navy wordmark on the cream footer (2026-11-02: "change this to the dark logo"); the white one on the night footer. */
html[data-season="autumn"] .foot__mark--navy { display: var(--season-mark-navy); }
html[data-season="autumn"] .foot__mark--white { display: var(--season-mark-white); }
/* The hero's words in a cream card: the headline, the paragraph and the small print over the painting's trees and
   pumpkins were hard to read (same day). The card keeps the words' 120px lift beside the devices as a margin. */
html[data-season="autumn"] .hero--shots .hero__words { background: var(--season-panel); border-radius: 28px; padding: var(--season-panel-pad); margin-bottom: 120px; box-shadow: var(--season-panel-shadow); }
@media (max-width: 1000px) { html[data-season="autumn"] .hero--shots .hero__words { margin-bottom: 0; } }

/* --- Off season: every piece is out of the page ---------------------- */
.season-hero, .season-garland, .season-leaves { display: none; }

/* --- The hero: The owner's painting, or the drawn sky and hills ---------- */
/* The hero's sky is --sky (grown-up.css); the dark theme sets its own, more specifically, so the dark hero stays dark and readable. */
html[data-season="autumn"] { --sky: linear-gradient(180deg, var(--season-sky-top) 0%, var(--season-sky-foot) 100%); }
html[data-season="autumn"] .season-hero { display: block; }
.season-hero picture, .season-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }
/* Until the painting arrives: one soft golden horizon along the foot of the sky, no outline, nothing else. */
.season-horizon { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 22%; display: block; }

/* --- Leaves on the breeze: six, each on its own path and clock ---------- */
html[data-season="autumn"] .season-leaves { display: block; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.season-leaf {
  position: absolute; top: -12%; width: clamp(44px, 5vw, 84px); aspect-ratio: 630 / 565;
  animation: season-fall calc(22s + var(--n) * 3s) linear infinite;
  animation-delay: calc(var(--n) * -5.3s);
  will-change: transform;
}
.season-leaf svg, .season-leaf img { display: block; width: 100%; height: 100%; }
.season-leaf--1 { --leaf: #ee9a4e; --leaf-edge: #c0702c; --leaf-light: #f7bf86; }
.season-leaf--2 { --leaf: #dd7352; --leaf-edge: #ad4d31; --leaf-light: #eea283; }
.season-leaf--3 { --leaf: #ecc25e; --leaf-edge: #b8902e; --leaf-light: #f5db98; }
/* Where each leaf falls: clear of the words on the left, between the words and the devices, and the far right. */
.season-leaf:nth-child(1) { left: 1%; } .season-leaf:nth-child(2) { left: 46%; } .season-leaf:nth-child(3) { left: 58%; }
.season-leaf:nth-child(4) { left: 67%; } .season-leaf:nth-child(5) { left: 94%; }
@keyframes season-fall {
  0% { transform: translate3d(0, 0, 0) rotate(-14deg); }
  25% { transform: translate3d(5vw, 28vh, 0) rotate(12deg); }
  50% { transform: translate3d(-2vw, 56vh, 0) rotate(-10deg); }
  75% { transform: translate3d(6vw, 84vh, 0) rotate(16deg); }
  100% { transform: translate3d(1vw, 118vh, 0) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .season-leaf { animation: none; top: auto; bottom: calc(8% + var(--n) * 3%); transform: rotate(calc(var(--n) * 17deg - 30deg)); }
}

/* --- The garland under the bar and above the footer -------------------- */
html[data-season="autumn"] .season-garland { display: block; height: 44px; pointer-events: none; overflow: hidden; }
.season-garland[style] { background: var(--garland) center top / auto 100% repeat-x; }
.season-garland svg { display: block; width: 100%; height: 100%; }
.season-garland--foot { background: var(--paper); }

/* --- The Thanksgiving band on the front page --------------------------- */
/* The worksheets band stays up whatever the season (2026-11-05: the fall look off, "but keep the free Thanksgiving worksheets tab"). */
.season-band { display: block; padding: clamp(28px, 4vw, 48px) 0; background: var(--season-band); border-top: 2px solid var(--season-band-edge); border-bottom: 2px solid var(--season-band-edge); }
.season-band__card {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center;
  background: var(--card); border-radius: var(--r-sheet); box-shadow: var(--shadow); padding: clamp(20px, 3vw, 36px) clamp(20px, 4vw, 48px);
}
.season-band__art { width: 100%; max-width: 300px; height: auto; justify-self: center; }
.season-band__eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 800 1rem/1.4 var(--body); color: #b0602a; }
.season-band__eyebrow svg { width: 22px; height: 20px; --leaf: #ee9a4e; --leaf-edge: #c0702c; --leaf-light: #f7bf86; }
.season-band__title { margin: 0 0 12px; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.1; }
.season-band__words p:not(.season-band__eyebrow) { margin: 0; font-size: 1.0625rem; line-height: 1.55; max-width: 36em; }
.season-band__words .cta-row { margin-top: 20px; }

@media (max-width: 700px) {
  .season-band__card { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .season-band__art { max-width: 200px; }
  .season-band__words .cta-row { justify-content: center; }
  /* A phone: the words fill the width, so no drifting leaves at all (the painting has its own); the garland is enough. */
  .season-leaf { display: none; }
}

/* Dark: the hero is the dark theme's own, so the words stay white on dark; the day painting and the drawn horizon are for the light sky only -
   unless the night painting is there (season-hero--night, hero-wide-night.jpg; 2026-11-02: "Night painting"): then dark mode
   shows it, with the words in a navy card, and light mode never does. */
.season-hero__night { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .season-horizon, :root:not([data-theme="light"]) .season-hero__day { display: none; }
  :root:not([data-theme="light"]) .season-hero--night .season-hero__night { display: block; }
  :root:not([data-theme="light"]) .hero--shots:has(.season-hero--night) { --season-panel: #17283f; --season-panel-pad: clamp(22px, 3vw, 36px) clamp(22px, 3.2vw, 40px); --season-panel-shadow: var(--shadow); }
}
:root[data-theme="dark"] .season-horizon, :root[data-theme="dark"] .season-hero__day { display: none; }
:root[data-theme="dark"] .season-hero--night .season-hero__night { display: block; }
:root[data-theme="dark"] .hero--shots:has(.season-hero--night) { --season-panel: #17283f; --season-panel-pad: clamp(22px, 3vw, 36px) clamp(22px, 3.2vw, 40px); --season-panel-shadow: var(--shadow); }
/* Dark: the band is a navy surface like the other bands (never a brown version of the cream: colours stay real, surfaces go navy), its card follows the theme, the footer is the night footer again (its own colours, grown-up.css), and the hero's words sit on the dark sky with no card. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --season-band: #132238; --season-band-edge: #1d3550;
    --season-foot: #0b2036; --season-foot-ink: #dce8f5; --season-foot-soft: #c3d4e6; --season-foot-faint: #9cb2c9; --season-foot-rule: #1d3550;
    --season-mark-navy: none; --season-mark-white: block;
    --season-panel: transparent; --season-panel-pad: 0; --season-panel-shadow: none;
  }
}
:root[data-theme="dark"] {
  --season-band: #132238; --season-band-edge: #1d3550;
  --season-foot: #0b2036; --season-foot-ink: #dce8f5; --season-foot-soft: #c3d4e6; --season-foot-faint: #9cb2c9; --season-foot-rule: #1d3550;
  --season-mark-navy: none; --season-mark-white: block;
  --season-panel: transparent; --season-panel-pad: 0; --season-panel-shadow: none;
}