/* Site styles. Tokens on :root are shared with the calendar (calendar.css) and the planner (planner.css). */

@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque.a756882d8a.woff2") format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("/fonts/atkinson-hyperlegible-next.18b2a1a39a.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --ink: #13201A;
  --ink-2: #26332B;
  --body: #3F4E44;
  --moss: #3A6435;
  --moss-deep: #2E4A33;
  --dawn: #F1EDE3;
  --mist: #E2DCCF;
  --sage: #CDD4B8;
  --sage-light: #E7E9D6;
  --wheat: #E8D9AA;
  --harvest: #E7C997;
  --card: #FBF8EF;
  --card-2: #FFFCF4;
  --sun: #E6A13A;
  --ready: #F2C46B;
  --frost: #7E9DB6;
  --frost-ink: #2D4A63;
  --night: #121A14;
  --soil: #3E2D20;
  --wood: #97704C;
  --twine: #D8C396;
  --brown-ink: #4A4128;
  --tomato: #9A3B20;
  --display: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --sans: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --gutter: clamp(20px, 4.45vw, 64px);
  --dawn-light: linear-gradient(90deg, #E8E6D8 0%, #E7E9D6 32%, #EDE6CC 62%, #F0DFC0 86%, #EAE2D2 100%);
  --k-indoor: #3E5C78;
  --k-sow: #76512C;
  --k-plant: #3A6435;
  --k-harvest: #8F4C0E;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--dawn); }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--dawn); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
main { flex: 1 0 auto; }
a { color: var(--ink); text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
a:hover { color: var(--moss); }
button, input, select { font: inherit; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--moss); outline-offset: 3px; }
h1, h2, .display { font-family: var(--display); font-stretch: 88%; font-optical-sizing: auto; letter-spacing: -.025em; font-weight: 420; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -120px; z-index: 100; padding: 12px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; color: #fff; }
.wrap { width: min(1312px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
@media (max-width: 1099px) { .wide-only { display: none !important; } }
@media (min-width: 1100px) { .narrow-only { display: none !important; } }

/* Buttons and the ZIP form */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 24px; border: 0; border-radius: 999px; background: var(--ink); color: #F1F4EE; font: 700 17px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .3s, color .3s; }
.btn:hover { background: var(--moss-deep); color: #fff; }
.btn svg { flex: none; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(19,32,26,.55); }
.btn-ghost:hover { background: rgba(255,255,255,.35); color: var(--ink); }
.btn-outline { background: transparent; color: var(--ink); min-height: 52px; box-shadow: inset 0 0 0 1.5px rgba(19,32,26,.45); }
.btn-outline:hover { background: rgba(255,255,255,.3); color: var(--ink); }
.btn-block { display: flex; width: 100%; }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 15px; gap: 8px; }
@media (min-width: 1100px) { .btn { min-height: 60px; padding: 0 30px; font-size: 18px; } .btn-small { min-height: 44px; padding: 0 18px; font-size: 15px; } }

.zip-form { display: flex; align-items: center; gap: 6px; width: min(560px, 100%); padding: 6px 6px 6px 20px; border-radius: 999px; background: #fff; box-shadow: 0 24px 48px -24px rgba(19,32,26,.55); }
.zip-form:focus-within { box-shadow: 0 0 0 3px var(--moss), 0 24px 48px -24px rgba(19,32,26,.55); }
.zip-form input { flex: 1; min-width: 0; height: 56px; padding: 0; border: 0; background: transparent; font: 500 19px/1 var(--sans); color: var(--ink); letter-spacing: .02em; }
.zip-form input::placeholder { color: #5F6B62; opacity: 1; }
.zip-form input:focus { outline: none; }
.zip-form .btn { flex: none; padding: 0 20px; }
.zip-icon { display: flex; flex: none; color: var(--moss); }
@media (max-width: 599px) { .zip-icon, .zip-form .btn svg { display: none; } }
.zip-form.is-night { background: #F3F1E8; box-shadow: 0 30px 60px -30px rgba(0,0,0,.8); }
.zip-form.is-compact { width: min(420px, 100%); padding: 4px 4px 4px 16px; box-shadow: inset 0 0 0 1.5px rgba(19,32,26,.16); }
.zip-form.is-compact input { height: 44px; font-size: 17px; }
.zip-form.is-compact .btn { min-height: 44px; padding: 0 18px; font-size: 15px; }
.zip-form.is-compact:focus-within { box-shadow: 0 0 0 3px var(--moss); }
.form-status { margin: 0; min-height: 0; font: 600 16px/1.4 var(--sans); color: var(--frost-ink); }
.form-status:empty { display: none; }
@media (min-width: 1100px) {
  .zip-form { gap: 8px; padding: 8px 8px 8px 26px; box-shadow: 0 30px 60px -30px rgba(19,32,26,.55); }
  .zip-form input { height: 60px; font-size: 21px; }
  .zip-form .btn { padding: 0 30px; }
  .zip-form:focus-within { box-shadow: 0 0 0 3px var(--moss), 0 30px 60px -30px rgba(19,32,26,.55); }
}

/* Header and menu */
.site-header { position: relative; z-index: 20; flex: none; background: var(--dawn-light); }
.site-header.is-over { position: absolute; top: 0; left: 0; right: 0; background: none; }
.header-inner { height: 68px; padding: 0 12px 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.logo-mark { flex: none; width: 28px; height: 28px; }
.brand-name { font: 560 26px/1 var(--display); font-stretch: 88%; letter-spacing: -.01em; white-space: nowrap; }
.menu-toggle { display: grid; place-items: center; flex: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.7); color: var(--ink); cursor: pointer; }
.menu-close, .menu-toggle[aria-expanded="true"] .menu-bars { display: none; }
.menu-toggle[aria-expanded="true"] .menu-close { display: inline; }
.site-nav { display: none; position: absolute; top: calc(100% - 4px); left: 12px; right: 12px; flex-direction: column; align-items: stretch; padding: 8px 20px 20px; border-radius: 24px; background: var(--card-2); box-shadow: 0 30px 60px -30px rgba(19,32,26,.55); font: 500 19px/1 var(--sans); }
.site-header.is-open .site-nav { display: flex; }
.nav-link { padding: 16px 4px; border-bottom: 1.5px solid rgba(19,32,26,.08); color: var(--ink); text-decoration: none; white-space: nowrap; }
.nav-link:hover { color: var(--moss); }
.nav-link[aria-current] { color: var(--moss-deep); font-weight: 700; }
.nav-cta { margin-top: 16px; }
.zip-chip { display: none; }
@media (min-width: 1100px) {
  .header-inner { height: 96px; padding: 0 var(--gutter); gap: 24px; }
  .brand { gap: 12px; }
  .logo-mark { width: 34px; height: 34px; }
  .brand-name { font-size: 32px; }
  .menu-toggle { display: none; }
  .site-nav { display: flex; position: static; flex-direction: row; align-items: center; gap: 36px; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 17px; }
  .nav-link { padding: 14px 0; border: 0; }
  .nav-link[aria-current] { font-weight: 500; box-shadow: inset 0 -2px 0 var(--moss); }
  .nav-cta { margin: 0; min-height: 48px; padding: 0 22px; font-size: 16px; }
}
.layout-site:not(.page-landing) .header-inner { height: 76px; }
@media (min-width: 1100px) { .layout-site:not(.page-landing) .header-inner { height: 88px; } }

/* App layout (/garden-planner): compact bar, menu at every width */
.site-header.is-app { background: #FBFCF9; border-bottom: 1.5px solid rgba(19,32,26,.1); }
.site-header.is-app .header-inner { height: 64px; padding: 0 12px 0 20px; justify-content: flex-start; gap: 14px; }
.site-header.is-app .logo-mark { width: 28px; height: 28px; }
.site-header.is-app .brand-name { font-size: 26px; }
.site-header.is-app .menu-toggle { display: grid; margin-left: auto; background: var(--dawn); }
.site-header.is-app .site-nav { display: none; position: absolute; top: calc(100% + 6px); left: auto; right: 12px; width: min(340px, calc(100% - 24px)); flex-direction: column; align-items: stretch; gap: 0; padding: 8px 20px 20px; border-radius: 24px; background: var(--card-2); box-shadow: 0 30px 60px -30px rgba(19,32,26,.55); font-size: 18px; }
.site-header.is-app.is-open .site-nav { display: flex; }
.site-header.is-app .nav-link { padding: 15px 4px; border-bottom: 1.5px solid rgba(19,32,26,.08); }
.site-header.is-app .nav-link[aria-current] { box-shadow: none; font-weight: 700; }
.site-header.is-app .nav-cta { margin-top: 16px; min-height: 52px; }
.zip-chip { align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; background: var(--sage-light); color: var(--moss-deep); font: 700 15px/1.2 var(--sans); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zip-chip:hover { color: var(--ink); background: var(--sage); }
.site-header.is-app .zip-chip { display: inline-flex; min-width: 0; }
@media (max-width: 520px) { .site-header.is-app .brand-name { display: none; } }
@media (min-width: 1100px) { .site-header.is-app .header-inner { height: 76px; padding: 0 32px; } .site-header.is-app .brand-name { font-size: 28px; } .site-header.is-app .logo-mark { width: 30px; height: 30px; } }

/* Footer: the day ends in night */
.site-footer { flex: none; background: var(--night); color: #CFD6C8; }
.night-fade { position: relative; height: 140px; overflow: hidden; background: linear-gradient(180deg, var(--dawn) 0%, #6F7466 38%, var(--night) 100%); }
.night-fade .stars { position: absolute; left: 0; top: 0; }
.footer-inner { padding: 16px 20px 40px; display: flex; flex-direction: column; gap: 36px; }
.credits { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.credit { display: flex; flex-direction: column; gap: 4px; }
.credit dt { font: 600 13px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #A3AE97; }
.credit dd { margin: 0; font: 400 17px/1.4 var(--sans); color: #E9ECE1; }
.footer-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; font: 500 16px/1 var(--sans); }
.footer-nav a { padding: 14px 0; color: #E9ECE1; text-decoration: none; }
.footer-nav a:hover, .footer-nav a[aria-current] { color: #fff; text-decoration: underline; }
.footer-note { margin: 0; font: 400 14px/1.5 var(--sans); color: #A3AE97; }
@media (min-width: 900px) {
  .footer-inner { padding: 24px var(--gutter) 56px; align-items: center; gap: 56px; }
  .credits { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; width: min(820px, 100%); }
  .credit { display: contents; }
  .credit dt { text-align: right; font-size: 14px; line-height: 1.6; }
  .credit dd { font-size: 18px; }
  .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 34px; }
  .footer-note { text-align: center; }
}
.star { fill: #F3F0E2; opacity: .5; }
.app-footer { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; padding: 14px 16px; border-top: 1.5px solid rgba(19,32,26,.1); background: #FBFCF9; font: 500 14px/1.4 var(--sans); color: var(--body); }
.app-footer a { color: var(--body); padding: 12px 0; margin: -12px 0; }

/* Night scene (landing footer) */
.night-scene { position: relative; height: 600px; overflow: hidden; }
.night-photo img { position: absolute; left: -120px; top: 40px; width: max(600px, calc(100% + 160px)); height: auto; max-width: none; filter: brightness(.4) saturate(.5) contrast(1.06); }
.night-scene::before { content: ""; position: absolute; inset: 0; z-index: 1; background: #2B4A33; mix-blend-mode: color; opacity: .6; }
.night-scene::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #E7C997 0, rgba(196,150,110,.55) 49px, rgba(50,60,45,0) 130px), linear-gradient(180deg, rgba(18,26,20,.3) 0%, rgba(18,26,20,.2) 35%, rgba(18,26,20,.55) 70%, #0F1A22 100%); }
.night-scene .stars { position: absolute; left: 0; top: 0; z-index: 2; width: 390px; height: auto; }
.night-copy { position: relative; z-index: 3; height: 100%; padding: 150px 20px 0; display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; }
.night-note { margin: 0; display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--sans); color: #CAD6DE; }
.night-title { margin: 0; font-size: 54px; line-height: .95; color: #F3F1E8; }
.night-copy .zip-form { align-self: stretch; width: auto; }
@media (min-width: 600px) {
  .night-scene { height: 700px; }
  .night-photo img { left: -6.95%; top: -40px; width: max(122.3%, 1100px); }
  .night-scene .stars { width: 640px; }
  .night-copy { padding: 150px var(--gutter) 0; gap: 36px; }
  .night-copy .zip-form { align-self: center; width: min(540px, 100%); padding: 8px 8px 8px 28px; }
  .night-title { font-size: clamp(54px, 6.7vw, 96px); }
  .night-note { font-size: 16px; }
  .night-scene::after { background: linear-gradient(180deg, #E7C997 0, rgba(196,150,110,.55) 57px, rgba(50,60,45,0) 150px), linear-gradient(180deg, rgba(18,26,20,.35) 0%, rgba(18,26,20,.15) 30%, rgba(18,26,20,.4) 64%, #0F1A22 100%); }
}

/* Eyebrow labels */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 600 15px/1.2 var(--sans); color: var(--body); }
.eyebrow-rule { flex: none; width: 24px; height: 1.5px; background: currentColor; }
.eyebrow.is-brown { color: var(--brown-ink); }
@media (min-width: 1100px) { .eyebrow { font-size: 16px; } .eyebrow-rule { width: 28px; } }

/* ============ Landing ============ */

/* 1 · Dawn. The headline is planted in the raised bed: it sits between the photo and a second copy of the photo
   clipped to the front of the bed. Everything inside the stage is measured in photo pixels (--u). */
.hero { position: relative; overflow: hidden; container-type: inline-size; background: var(--dawn); --u: min(100cqw / 780, .56px); }
.hero-media { position: relative; overflow: hidden; height: calc(84px + 1174 * var(--u)); }
.hero-media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 2; background: linear-gradient(180deg, rgba(241,237,227,0) 0%, var(--dawn) 86%); pointer-events: none; }
.hero-stage { position: absolute; left: calc(14px - 1078 * var(--u)); top: calc(84px - 54 * var(--u)); width: calc(2200 * var(--u)); height: calc(1228 * var(--u)); transform-origin: 50% 40%; animation: push 2.4s cubic-bezier(.2,.6,.2,1) both; }
.hero-pic img { position: absolute; left: 45.4545%; top: 0; width: 54.5455%; height: 100%; max-width: none; }
.hero-front img { -webkit-clip-path: url(#bed-front-crop); clip-path: url(#bed-front-crop); }
.hero-wash { position: absolute; left: 0; right: 0; top: 0; height: calc(560 * var(--u)); background: linear-gradient(180deg, var(--dawn) 0%, rgba(241,237,227,.7) 29%, rgba(241,237,227,0) 64%), radial-gradient(ellipse 22% 42% at 62% 58%, rgba(241,237,227,.42), rgba(241,237,227,0) 100%); }
.hero-title { margin: 0; color: var(--ink); }
.ht-line { position: absolute; left: calc(1078 * var(--u)); top: calc(54 * var(--u)); font-size: calc(208 * var(--u)); line-height: 1; letter-spacing: -.025em; white-space: nowrap; }
.ht-when { display: block; }
.ht-plant { display: block; font-size: calc(292 * var(--u)); line-height: 1; letter-spacing: -.025em; margin-top: calc(-36 * var(--u)); }
.sprout { display: inline-block; animation: sprout 1.15s cubic-bezier(.2,.7,.1,1) both; }
.s0 { animation-delay: .35s; } .s1 { animation-delay: .45s; } .s2 { animation-delay: .55s; } .s3 { animation-delay: .65s; } .s4 { animation-delay: .75s; }
.ht-sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-copy { position: relative; z-index: 3; margin-top: 4px; padding: 0 20px 36px; display: flex; flex-direction: column; gap: 18px; animation: rise 1s 1.1s cubic-bezier(.2,.7,.2,1) both; }
.hero-sub { margin: 0; font: 420 34px/1 var(--display); font-stretch: 88%; letter-spacing: -.015em; }
.hero-lede { margin: 0; max-width: 500px; font: 400 18px/1.5 var(--sans); color: var(--ink-2); }
.hero-chips { margin: 0; padding: 0 0 0 4px; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; font: 600 15px/1 var(--sans); color: var(--ink-2); }
.hero-chips li { display: flex; align-items: center; gap: 7px; }
.hero-chips svg { color: var(--moss); }
.hero-more { display: none; }
.round-icon { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid rgba(19,32,26,.45); display: flex; align-items: center; justify-content: center; }

@media (min-width: 600px) {
  .hero { --u: calc(100cqw / 1714.29); }
  .hero-media { height: auto; aspect-ratio: 3 / 2; }
  .hero-stage { left: calc(-80.95 * var(--u)); top: calc(-16.67 * var(--u)); transform-origin: 55% 40%; }
  .hero-pic img { left: 0; width: 100%; }
  .hero-front img { -webkit-clip-path: url(#bed-front); clip-path: url(#bed-front); }
  .hero-wash { left: calc(80.95 * var(--u)); right: auto; top: calc(16.67 * var(--u)); width: calc(1714.29 * var(--u)); height: calc(1142.86 * var(--u)); background: radial-gradient(ellipse calc(420 * var(--u)) calc(230 * var(--u)) at calc(1090 * var(--u)) calc(330 * var(--u)), rgba(238,234,224,.4), rgba(238,234,224,0) 100%), linear-gradient(180deg, rgba(238,234,224,.8) 0, rgba(238,234,224,.38) calc(131 * var(--u)), rgba(238,234,224,0) calc(244 * var(--u))), linear-gradient(90deg, rgba(238,234,224,.84) 0, rgba(238,234,224,.55) calc(393 * var(--u)), rgba(238,234,224,0) calc(721 * var(--u))); }
  .ht-line { left: calc(142.86 * var(--u)); top: calc(236.9 * var(--u)); font-size: calc(285.71 * var(--u)); }
  .ht-when, .ht-plant { display: inline-block; font-size: inherit; margin: 0; }
  .ht-sub { left: calc(150 * var(--u)); top: calc(511.9 * var(--u)); width: auto; height: auto; overflow: visible; clip: auto; font-size: calc(71.43 * var(--u)); line-height: 1; letter-spacing: -.015em; animation: rise 1s 1s cubic-bezier(.2,.7,.2,1) both; }
  .hero-sub { display: none; }
  .hero-copy { margin-top: -8px; padding: 0 var(--gutter) 48px; gap: 20px; }
  .hero-lede { font-size: 19px; }
}
@media (min-width: 1280px) { .hero-lede { font-size: 20px; } }
@media (min-width: 1024px) {
  .hero { aspect-ratio: 3 / 2; }
  .hero-media { position: absolute; inset: 0; aspect-ratio: auto; overflow: visible; }
  .hero-media::after { display: none; }
  .hero-copy { position: absolute; left: var(--gutter); top: calc(611.9 * var(--u)); width: 600px; margin: 0; padding: 0; gap: 22px; animation-delay: 1.2s; }
  .hero-lede { max-width: min(500px, calc(721 * var(--u) - var(--gutter) - 12px)); font-size: 18px; }
  .hero-chips { gap: 28px; font-size: 16px; }
  .hero-chips li { gap: 9px; }
  .hero-more { position: absolute; left: var(--gutter); bottom: 44px; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 6px 0; text-decoration: none; font: 600 17px/1 var(--sans); color: var(--ink-2); animation: rise 1s 1.5s cubic-bezier(.2,.7,.2,1) both; }
  /* A soft morning mist behind the intro so the text never sits on the fence pickets. */
  .hero-copy::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--gutter) - 60px); top: -30px; bottom: -72px; width: calc(100% + var(--gutter) + 150px); pointer-events: none; background: radial-gradient(closest-side, rgba(241,237,227,.95) 0%, rgba(241,237,227,.9) 58%, rgba(241,237,227,.6) 80%, rgba(241,237,227,0) 100%); }
  .hero-lede { color: var(--ink); font-weight: 500; }
  .hero-chips { color: var(--ink); font-weight: 700; }
  .hero-more { color: var(--ink); text-shadow: 0 0 12px rgba(241,237,227,.95), 0 0 4px rgba(241,237,227,.95); }
}

/* 2 · The year: a hill of photos under the sun's path (desktop), one frost line down the page (phones). */
.year { position: relative; overflow: hidden; padding: 56px 0 64px; background: linear-gradient(180deg, var(--dawn) 0%, #E7E9D6 30%, #ECE8D0 62%, #F0E1C6 88%, #EAE2D2 100%); }
.year-head { display: flex; flex-direction: column; gap: 16px; }
.year-head-main { display: flex; flex-direction: column; gap: 16px; }
.year-title { margin: 0; font-size: clamp(46px, 13.8vw, 92px); line-height: .95; }
.year-lede { margin: 0; max-width: 430px; font: 400 17px/1.5 var(--sans); color: var(--body); }
.hill { position: relative; width: min(720px, 100% - 40px); margin: 40px auto 0; }
.hill-sun, .hill-frost, .hill-free, .hill-pin { display: none; }
.months { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.month { position: relative; display: flex; gap: 16px; padding: 0 0 30px 34px; }
.month-line { position: absolute; left: 11px; top: 0; bottom: 0; border-left: 2px dashed var(--frost); }
.line-free .month-line { left: 10.5px; border-left: 3px solid var(--moss); }
.line-to-free .month-line { bottom: auto; height: 44px; }
.line-to-free::before { content: ""; position: absolute; left: 10.5px; top: 44px; bottom: 0; border-left: 3px solid var(--moss); }
.line-to-frost .month-line { left: 10.5px; bottom: auto; height: 128px; border-left: 3px solid var(--moss); }
.line-to-frost::before { content: ""; position: absolute; left: 11px; top: 128px; bottom: -86px; border-left: 2px dashed var(--frost); }
.month-dot { position: absolute; left: 6px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--frost); }
.line-free .month-dot, .line-to-frost .month-dot { background: var(--moss); box-shadow: none; }
.month.is-sun .month-dot { left: 1px; top: 9px; width: 22px; height: 22px; background: var(--sun); box-shadow: 0 0 0 5px rgba(230,161,58,.25); }
.row-pin { position: absolute; left: 0; top: 32px; z-index: 2; display: flex; align-items: center; gap: 8px; }
.m-oct .row-pin { top: 118px; }
.row-pin .pin-dot { width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--frost); display: flex; align-items: center; justify-content: center; color: #3E5C78; }
.row-pin .pin-label { padding: 6px 10px; border-radius: 8px; background: #fff; font: 700 14px/1 var(--sans); color: var(--frost-ink); white-space: nowrap; box-shadow: 0 8px 20px -12px rgba(19,32,26,.5); }
.month-photo { flex: none; margin: 0; width: 96px; height: 150px; border-radius: 999px 999px 12px 12px; overflow: hidden; background: #D3D4C2; }
.m-mar .month-photo { width: 104px; } .m-apr .month-photo, .m-summer .month-photo { width: 112px; } .m-may .month-photo { width: 120px; } .m-jun .month-photo { width: 128px; }
.month-photo .grow, .month-photo picture { display: block; height: 100%; }
.month-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-30-60 { object-position: 30% 60%; } .p-52-78 { object-position: 52% 78%; } .p-60-50 { object-position: 60% 50%; } .p-66-58 { object-position: 66% 58%; } .p-58-50 { object-position: 58% 50%; } .p-88-60 { object-position: 88% 60%; } .p-42-60 { object-position: 42% 60%; }
.month-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.month-name { margin: 0 0 2px; font: 480 38px/1 var(--display); font-stretch: 88%; letter-spacing: -.025em; white-space: nowrap; }
.tasks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.tasks li { display: flex; align-items: center; gap: 9px; }
.task-icon { flex: none; width: 38px; height: 38px; }
.task-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.task-text strong { font: 700 16px/1.1 var(--sans); }
.task-text span { font: 500 14px/1.15 var(--sans); }
.k-indoor { color: var(--k-indoor); } .k-sow, .k-sow-fall { color: var(--k-sow); } .k-plant-out, .k-plant { color: var(--k-plant); } .k-harvest { color: var(--k-harvest); }
.month-note { margin: 0; display: flex; flex-direction: column; gap: 10px; font: 500 17px/1.35 var(--sans); color: #7A4F16; }
.year-legend { margin: 6px 0 0 34px; display: flex; flex-wrap: wrap; gap: 8px 18px; font: 600 14px/1.3 var(--sans); color: var(--body); }
.legend-free, .legend-frost { display: inline-flex; align-items: center; gap: 8px; }
.legend-free::before { content: ""; width: 22px; border-top: 3px solid var(--moss); }
.legend-frost::before { content: ""; width: 22px; border-top: 2px dashed var(--frost); }

@media (min-width: 700px) {
  .year { padding: 88px 0 88px; }
  .month-photo { width: 132px; height: 190px; }
  .m-mar .month-photo { width: 142px; } .m-apr .month-photo, .m-summer .month-photo { width: 152px; } .m-may .month-photo { width: 162px; } .m-jun .month-photo { width: 172px; }
  .month { gap: 24px; padding-bottom: 36px; }
  .tasks { flex-direction: row; flex-wrap: wrap; gap: 12px 24px; }
  .month-text { padding-top: 8px; }
}

@media (min-width: 1100px) {
  .year { padding: 124px 0 104px; background: var(--dawn-light); }
  .year-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 60px; }
  .year-head-main { gap: 20px; }
  .year-lede { margin: 0 0 12px; font-size: 19px; line-height: 1.55; }
  .hill { width: auto; max-width: 1440px; margin-top: 36px; container-type: inline-size; }
  .hill-sun { display: block; position: absolute; left: 0; top: 0; width: 100%; height: auto; overflow: visible; }
  .sun-path { stroke: #B4852C; stroke-width: 1.8; stroke-dasharray: 1 8; stroke-linecap: round; }
  .sun-halo { stroke: #E2A03C; stroke-width: 1.2; opacity: .55; }
  .sun-disc { fill: var(--sun); }
  .hill-frost { display: block; position: absolute; left: -50vw; right: -50vw; top: 34.6528cqw; border-top: 2px dashed var(--frost); }
  .hill-free { display: block; position: absolute; z-index: 1; left: 38.1944cqw; width: 54.7917cqw; top: calc(34.7222cqw - 2px); height: 4px; border-radius: 2px; background: var(--moss); transform-origin: left center; }
  .hill-pin { display: block; position: absolute; z-index: 2; top: 34.7222cqw; width: 0; height: 0; margin: 0; }
  .hill-pin.is-last { left: 38.1944cqw; } .hill-pin.is-first { left: 92.9861cqw; }
  .hill-pin .pin-dot { position: absolute; left: -15px; top: -15px; width: 30px; height: 30px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--frost); display: flex; align-items: center; justify-content: center; color: #3E5C78; }
  .hill-pin .pin-label { position: absolute; top: -58px; padding: 9px 13px; border-radius: 8px; background: #fff; font: 700 15px/1 var(--sans); color: var(--frost-ink); white-space: nowrap; box-shadow: 0 10px 24px -14px rgba(19,32,26,.5); }
  .hill-pin.is-last .pin-label { left: 24px; } .hill-pin.is-first .pin-label { right: 24px; }
  .months { position: relative; display: grid; grid-template-columns: repeat(5, 184fr) 112fr 184fr; column-gap: 1.1111cqw; padding: 0 4.4444cqw; }
  .month { display: grid; grid-template-rows: 34.7222cqw auto; gap: 0; padding: 0; }
  .month-line, .month-dot, .row-pin, .line-to-free::before, .line-to-frost::before { display: none; }
  .month-photo { position: relative; align-self: end; width: 100% !important; height: auto; border-radius: 0; overflow: visible; background: none; }
  .month-photo .grow { position: absolute; inset: 0; overflow: hidden; background: #D3D4C2; }
  .month-photo .grow::after { content: ""; position: absolute; inset: 0; background: #6E9A58; mix-blend-mode: color; opacity: .18; }
  .m-feb .grow::after { background: #5E86B0; } .m-may .grow::after, .m-jun .grow::after, .m-summer .grow::after { background: #D2A13A; } .m-oct .grow::after { background: #C27A34; }
  .m-feb .month-photo { aspect-ratio: 184 / 221; clip-path: polygon(0% 11.26%, 8.33% 10.59%, 16.67% 9.89%, 25% 9.14%, 33.33% 8.34%, 41.67% 7.5%, 50% 6.61%, 58.33% 5.66%, 66.67% 4.67%, 75% 3.62%, 83.33% 2.51%, 91.67% 1.35%, 100% 0.13%, 100% 100%, 0% 100%); }
  .m-mar .month-photo { aspect-ratio: 184 / 268; clip-path: polygon(0% 16.55%, 8.33% 15.45%, 16.67% 14.29%, 25% 13.09%, 33.33% 11.84%, 41.67% 10.54%, 50% 9.18%, 58.33% 7.78%, 66.67% 6.33%, 75% 4.83%, 83.33% 3.28%, 91.67% 1.69%, 100% 0.05%, 100% 100%, 0% 100%); }
  .m-apr .month-photo { aspect-ratio: 184 / 334; clip-path: polygon(0% 18.39%, 8.33% 17%, 16.67% 15.58%, 25% 14.13%, 33.33% 12.66%, 41.67% 11.15%, 50% 9.63%, 58.33% 8.08%, 66.67% 6.51%, 75% 4.93%, 83.33% 3.34%, 91.67% 1.73%, 100% 0.12%, 100% 100%, 0% 100%); }
  .m-may .month-photo { aspect-ratio: 184 / 400; clip-path: polygon(0% 15.2%, 8.33% 13.85%, 16.67% 12.51%, 25% 11.18%, 33.33% 9.86%, 41.67% 8.55%, 50% 7.26%, 58.33% 6%, 66.67% 4.75%, 75% 3.54%, 83.33% 2.36%, 91.67% 1.21%, 100% 0.11%, 100% 100%, 0% 100%); }
  .m-jun .month-photo { aspect-ratio: 184 / 438; clip-path: polygon(0% 7.76%, 8.33% 6.83%, 16.67% 5.95%, 25% 5.11%, 33.33% 4.32%, 41.67% 3.59%, 50% 2.91%, 58.33% 2.29%, 66.67% 1.72%, 75% 1.22%, 83.33% 0.78%, 91.67% 0.41%, 100% 0.1%, 100% 100%, 0% 100%); }
  .m-summer .month-photo { aspect-ratio: 112 / 440; clip-path: polygon(0% 0.31%, 8.33% 0.2%, 16.67% 0.11%, 25% 0.05%, 33.33% 0.01%, 41.67% 0%, 50% 0.05%, 58.33% 0.19%, 66.67% 0.42%, 75% 0.74%, 83.33% 1.14%, 91.67% 1.63%, 100% 2.2%, 100% 100%, 0% 100%); }
  .m-oct .month-photo { aspect-ratio: 184 / 426; clip-path: polygon(0% 0.19%, 8.33% 1.55%, 16.67% 3.11%, 25% 4.84%, 33.33% 6.73%, 41.67% 8.75%, 50% 10.88%, 58.33% 13.11%, 66.67% 15.41%, 75% 17.75%, 83.33% 20.12%, 91.67% 22.5%, 100% 24.87%, 100% 100%, 0% 100%); }
  .month-text { padding-top: 2.0833cqw; gap: 12px; }
  .month-name { margin: 0 0 8px; font-size: 3.4722cqw; }
  .m-summer .month-name { font-size: 2.0833cqw; line-height: 1.1; }
  .tasks { flex-direction: column; gap: 12px; }
  .tasks li { gap: 10px; }
  .task-icon { width: clamp(36px, 3.3333cqw, 48px); height: auto; }
  .task-text { gap: 3px; }
  .task-text strong { font-size: clamp(15px, 1.25cqw, 18px); }
  .task-text span { font-size: clamp(13px, 1.0417cqw, 15px); }
  .note-icon { width: 56px; height: 56px; }
  .year-legend { display: none; }
}

/* 3 · Winter: the two dates through the sunrise. */
.frost { position: relative; background: #EAE2D2; --date-size: clamp(100px, 32.8vw, 190px); }
.frost-scene { position: relative; min-height: calc(772px + var(--date-size)); overflow: hidden; }
.frost-photo { position: absolute; left: 0; right: 0; top: calc(122px + var(--date-size)); bottom: 0; }
.frost-photo img { --iw: min(308%, 1400px); display: block; width: var(--iw); max-width: none; height: auto; margin-left: calc(50% - .556 * var(--iw)); }
.frost-photo::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 130px; z-index: 1; background: linear-gradient(180deg, #EAE2D2 0%, rgba(234,226,210,.55) 45%, rgba(234,226,210,0) 100%); }
.frost-photo::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px; z-index: 1; background: linear-gradient(180deg, rgba(205,212,184,0) 0%, var(--sage) 100%); }
.frost-stage { position: relative; z-index: 2; padding: 48px 20px 0; color: #13212C; }
.frost-title { margin: 0; font-size: 32px; line-height: 1; }
.frost-label { margin: 12px 0 0; font: 700 14px/1 var(--sans); }
.frost-date { margin: 0; display: flex; flex-direction: column; }
.frost-day { font: 300 var(--date-size)/1 var(--display); font-stretch: 75%; letter-spacing: -.02em; }
.frost-date.is-last { margin-top: 18px; margin-left: -4px; }
.frost-date.is-first { align-items: flex-end; margin-right: -4px; }
.frost-date.is-first .frost-name { position: relative; }
.frost-date.is-first .frost-name::before { content: ""; position: absolute; z-index: -1; inset: -16px -22px -16px -34px; border-radius: 50%; background: radial-gradient(closest-side, rgba(234,226,210,.88) 55%, rgba(234,226,210,0)); pointer-events: none; }
.frost-name { margin-top: 6px; font: 700 17px/1 var(--sans); }
.frost-days { position: relative; margin: 36px 0 12px; padding: 20px 0 20px 16px; font: 700 17px/1 var(--sans); }
.frost-span { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: #13212C; transform-origin: top center; }
.frost-note { margin: 0; padding: 0 20px 8px; background: var(--sage); font: 500 15px/1.5 var(--sans); color: var(--ink-2); }

@media (min-width: 900px) {
  .frost { container-type: inline-size; background: var(--sage); }
  .frost-scene { min-height: 0; aspect-ratio: 1440 / 1000; }
  .frost-photo { left: -22.64%; top: -4%; right: auto; bottom: auto; width: 126.39%; z-index: 0; }
  .frost-photo img { width: 100%; margin: 0; }
  .frost-photo::before { display: none; }
  .frost-photo::after { display: none; }
  .frost-scene::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(205,212,184,0) 0%, var(--sage) 100%) bottom / 100% 15.28cqw no-repeat, radial-gradient(ellipse 22% 26% at 86% 36%, rgba(226,233,240,.5), rgba(226,233,240,0) 100%), radial-gradient(ellipse 20% 24% at 13% 36%, rgba(226,233,240,.3), rgba(226,233,240,0) 100%), linear-gradient(180deg, rgba(226,233,240,.36) 0%, rgba(226,233,240,.1) 32%, rgba(226,233,240,0) 44%); }
  .frost-scene::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 11.8cqw; z-index: 1; background: var(--dawn-light); -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, transparent 100%); }
  .frost-stage { position: absolute; inset: 0; padding: 0; }
  .frost-date.is-first .frost-name::before { display: none; }
  .frost-title { position: absolute; left: 4.4444cqw; top: 5.8333cqw; font-size: 3.1944cqw; }
  .frost-label { position: absolute; right: 4.4444cqw; top: 7.2cqw; margin: 0; font-size: clamp(14px, 1.1111cqw, 16px); }
  .frost-day { position: absolute; top: 14.0972cqw; font-size: 15.2778cqw; }
  .frost-date.is-last .frost-day { left: 4.0278cqw; }
  .frost-date.is-first .frost-day { right: 4.1667cqw; }
  .frost-name { position: absolute; top: 29.1667cqw; margin: 0; font-size: clamp(16px, 1.3194cqw, 19px); }
  .frost-date.is-last .frost-name { left: 4.4444cqw; }
  .frost-date.is-first .frost-name { right: 4.4444cqw; }
  .frost-days { position: absolute; left: 0; right: 0; top: 18.8889cqw; margin: 0; padding: 0; text-align: center; font-size: clamp(15px, 1.25cqw, 18px); }
  .frost-span { left: 27.9861cqw; top: 2.9861cqw; bottom: auto; width: 42.5cqw; height: 2px; transform-origin: left center; }
  .frost-note { position: absolute; z-index: 2; left: 50%; top: 23.3333cqw; width: max(32.6389cqw, 300px); padding: 0; background: none; transform: translateX(-50%); text-align: center; font-size: clamp(15px, 1.1806cqw, 17px); color: #13212C; }
}

/* 4 · Spring: the crops on their own green. */
.crops { padding: 64px 0 72px; background: var(--sage); }
.crops-head { display: grid; grid-template-areas: "label" "title"; gap: 14px; }
.crops-title { grid-area: title; margin: 0; font-size: clamp(50px, 15.9vw, 124px); line-height: .9; }
.crops-label { grid-area: label; margin: 0; font: 600 15px/1 var(--sans); color: #33443A; }
.crops-all { grid-area: all; justify-self: end; padding: 12px 0; font: 700 19px/1 var(--sans); }
.crop-grid { margin-top: 32px; margin-bottom: 30px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 10px; }
.crop-card { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--ink); text-decoration: none; text-align: center; transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.crop-card:hover { color: var(--ink); transform: translateY(-6px); }
.crop-card img { display: block; width: min(108px, 100%); height: auto; aspect-ratio: 1; object-fit: cover; -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 98%); mask-image: radial-gradient(closest-side, #000 60%, transparent 98%); }
.crop-card strong { font: 480 clamp(19px, 5.64vw, 22px)/1 var(--display); font-stretch: 88%; letter-spacing: -.025em; }
.crop-card span { margin-top: 3px; font: 500 14px/1.2 var(--sans); color: #33443A; }
@media (min-width: 700px) {
  .crop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
  .crop-card img { width: min(160px, 100%); }
  .crop-card strong { font-size: 26px; }
}
@media (min-width: 1100px) {
  .crops { padding: 124px 0 120px; }
  .crops-head { grid-template-columns: 1fr auto; grid-template-areas: "title label" "title all"; align-items: end; gap: 0; }
  .crops-label { justify-self: end; font-size: 16px; }
  .crops-all { margin-bottom: 2px; }
  .crop-grid { margin-top: 60px; margin-bottom: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 36px 32px; }
  .crop-card { gap: 4px; }
  .crop-card img { width: min(204px, 100% + 12px); max-width: none; }
  .crop-card strong { font-size: 32px; }
  .crop-card span { margin-top: 4px; font-size: 16px; }
}

/* 5 · Summer: the bed through the season. */
.bed-section { padding: 88px 0 72px; background: linear-gradient(180deg, var(--sage) 0px, var(--wheat) 170px); }
.bed-head { display: flex; flex-direction: column; gap: 16px; }
.bed-head-main { display: flex; flex-direction: column; gap: 16px; }
.bed-title { margin: 0; font-size: clamp(46px, 13.8vw, 92px); line-height: .95; }
.bed-lede { margin: 0; max-width: 420px; font: 400 17px/1.5 var(--sans); color: #3E3A26; }
.bed-layout { margin-top: 30px; display: flex; flex-direction: column; gap: 26px; }
.bed-frame { padding: 14px; border-radius: 8px; background: var(--wood) repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 2px, transparent 2px 13px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -5px 0 rgba(0,0,0,.16), 0 40px 60px -40px rgba(70,48,20,.8); }
.bed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; background: var(--twine); }
.sq { position: relative; aspect-ratio: 1; margin: 0; padding: 0; border: 0; cursor: pointer; background: var(--soil) radial-gradient(circle at 30% 25%, rgba(255,255,255,.08), transparent 65%); container-type: inline-size; transition: box-shadow .3s; }
.sq:hover { box-shadow: inset 0 0 0 2px rgba(246,231,184,.55); }
.sq[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #F6E7B8, inset 0 0 0 6px rgba(62,45,32,.9); }
.sq:focus-visible { outline-offset: -3px; outline-color: #F6E7B8; }
.sq-n { position: absolute; left: 5.4cqw; top: 4.6cqw; font: 700 clamp(12px, 6.6cqw, 14px)/1 var(--sans); color: #F3E9D2; }
.sq-plants { position: absolute; inset: 15.5cqw 7cqw 7cqw; display: grid; align-content: center; justify-content: center; }
.sq-plants.n1 { grid-template-columns: 70cqw; }
.sq-plants.n4 { grid-template-columns: repeat(2, 35cqw); gap: 5cqw; }
.sq-plants.n9 { grid-template-columns: repeat(3, 23.3cqw); gap: 3.5cqw; }
.sq-plants.n16 { grid-template-columns: repeat(4, 17.4cqw); gap: 2.6cqw; }
.sq-dot { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 1; }
.sq-dot img { display: block; width: 100%; height: auto; }
.sq-plants.is-young .sq-dot img { width: 66%; }
.sq-ghost { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6cqw; }
.sq-ghost img { width: 34cqw; height: auto; opacity: .32; filter: grayscale(.85); }
.sq-ghost span { font: 700 clamp(12px, 7.2cqw, 15px)/1 var(--sans); color: #D6C5A2; }
.sq-ready { position: absolute; right: 4.5cqw; top: 3.9cqw; padding: 4px 8px; border-radius: 999px; background: var(--ready); font: 700 12px/1 var(--sans); color: #3D2708; }
.bed-controls { margin-top: 22px; display: flex; align-items: center; gap: 10px; }
.bed-play { flex: none; width: 48px; height: 48px; padding: 0; border-radius: 50%; border: 1.5px solid rgba(19,32,26,.5); background: transparent; display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; }
.bed-play .icon-pause, .bed-play[data-playing="true"] .icon-play { display: none; }
.bed-play[data-playing="true"] .icon-pause { display: block; }
.bed-pills { display: none; }
.bed-stepper { flex: 1; display: flex; align-items: center; justify-content: space-between; height: 48px; border-radius: 999px; background: rgba(255,252,244,.7); }
.step-btn { width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; display: flex; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; }
.step-btn:hover { background: rgba(19,32,26,.06); }
.step-month { font: 520 28px/1 var(--display); font-stretch: 88%; letter-spacing: -.025em; }
.bed-ticks { margin: 14px 0 0 58px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.tick { height: 4px; border-radius: 2px; background: rgba(19,32,26,.16); transition: background-color .3s; }
.tick.is-on { background: var(--moss); }
.bed-caption { margin: 18px 0 0; font: 400 18px/1.45 var(--sans); color: #2F2A18; }
.caption-month { display: none; }
.bed-card { padding: 22px; border-radius: 24px; background: var(--card); box-shadow: 0 30px 60px -40px rgba(70,48,20,.55); display: flex; flex-direction: column; gap: 16px; }
.card-body { display: flex; flex-direction: column; gap: 16px; }
.card-top { display: flex; align-items: center; gap: 14px; }
.card-icon { flex: none; width: 76px; height: 76px; border-radius: 50%; background: #EEF1E6; display: flex; align-items: center; justify-content: center; }
.card-icon img { width: 60px; height: 60px; }
.card-name { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card-name h3 { margin: 0; font: 480 36px/.95 var(--display); font-stretch: 88%; letter-spacing: -.025em; }
.status { align-self: flex-start; margin: 0; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; font: 700 14px/1 var(--sans); white-space: nowrap; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tone-young { background: #DDE8D2; color: var(--moss-deep); } .tone-growing { background: #D3E3C4; color: var(--moss-deep); } .tone-ready { background: var(--ready); color: #3D2708; } .tone-later { background: #E1E7EC; color: var(--frost-ink); }
.card-rows { margin: 0; display: flex; flex-direction: column; border-top: 1.5px solid rgba(19,32,26,.12); }
.card-rows div { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1.5px solid rgba(19,32,26,.12); }
.card-rows dt { white-space: nowrap; font: 600 15px/1.35 var(--sans); color: #5A5540; }
.card-rows dd { margin: 0; text-align: right; font: 700 15px/1.35 var(--sans); color: var(--ink); }
.card-friends p { margin: 0 0 10px; font: 600 15px/1.2 var(--sans); color: #5A5540; }
.card-friends ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.card-friends li { display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 5px; border-radius: 999px; background: #EEF1E6; font: 700 15px/1 var(--sans); }
.card-friends img { width: 30px; height: 30px; }
.card-hint { display: none; margin: 0; align-items: center; gap: 10px; font: 500 15px/1.4 var(--sans); color: #5A5540; }
.bed-open { margin-top: 26px; }
@media (min-width: 700px) {
  .bed-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 5px; }
  .bed-frame { padding: 20px; }
  .bed-controls { margin-top: 30px; gap: 18px; }
  .bed-play { width: 52px; height: 52px; }
  .bed-pills { position: relative; flex: 1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
  .pill { height: 48px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: #2F2A18; font: 700 17px/1 var(--sans); cursor: pointer; transition: background-color .25s, color .25s; }
  .pill:hover { background: rgba(19,32,26,.08); }
  .pill[aria-pressed="true"] { background: var(--ink); color: #F1F4EE; }
  .pills-track { position: absolute; left: 0; right: 0; bottom: -14px; height: 3px; border-radius: 2px; background: rgba(19,32,26,.14); }
  .pills-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--moss); transition: width .5s; }
  .f0 { width: 12.5%; } .f1 { width: 25%; } .f2 { width: 37.5%; } .f3 { width: 50%; } .f4 { width: 62.5%; } .f5 { width: 75%; } .f6 { width: 87.5%; } .f7 { width: 100%; }
  .bed-stepper, .bed-ticks { display: none; }
  .bed-caption { margin-top: 40px; display: flex; align-items: baseline; gap: 16px; font-size: 20px; }
  .caption-month { display: inline; flex: none; font: 520 34px/1 var(--display); font-stretch: 88%; letter-spacing: -.025em; }
  .bed-card { padding: 30px; border-radius: 28px; gap: 22px; }
  .card-hint { display: flex; }
}
@media (min-width: 1100px) {
  .bed-section { padding: 150px 0 96px; background: linear-gradient(180deg, var(--sage) 0px, var(--wheat) 220px); }
  .bed-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 60px; }
  .bed-head-main { gap: 20px; }
  .bed-lede { margin: 0 0 12px; font-size: 19px; line-height: 1.55; }
  .bed-layout { margin-top: 68px; flex-direction: row; align-items: flex-start; gap: 48px; }
  .bed-main { flex: 0 1 916px; min-width: 0; }
  .bed-frame { padding: 24px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 0 -6px 0 rgba(0,0,0,.16), 0 60px 80px -50px rgba(70,48,20,.8); }
  .sq[aria-pressed="true"] { box-shadow: inset 0 0 0 3px #F6E7B8, inset 0 0 0 7px rgba(62,45,32,.9); }
  .sq-ready { padding: 5px 9px; font-size: 13px; }
  .bed-controls { margin-top: 34px; gap: 22px; }
  .bed-caption { font-size: 22px; line-height: 1.4; }
  .bed-card { flex: 1; min-width: 300px; }
  .card-body { gap: 22px; }
  .card-top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px 18px; }
  .card-name { display: contents; }
  .card-icon { width: 104px; height: 104px; }
  .card-icon img { width: 84px; height: 84px; }
  .card-name h3 { font-size: 46px; }
  .status { grid-column: 1 / -1; justify-self: start; gap: 8px; padding: 9px 14px; font-size: 15px; }
  .status-dot { width: 8px; height: 8px; }
  .card-rows div { gap: 16px; padding: 14px 0; }
  .card-rows dt, .card-rows dd { font-size: 16px; }
  .card-friends p { margin-bottom: 12px; font-size: 16px; line-height: 1; }
  .card-friends ul { gap: 10px; }
  .card-friends li { gap: 8px; padding: 6px 14px 6px 6px; font-size: 16px; }
  .card-friends img { width: 34px; height: 34px; }
}

/* 6 · Fall: reminders and questions. */
.fall { padding: 72px 0; background: linear-gradient(180deg, var(--wheat) 0px, var(--harvest) 200px); }
.reminders { display: flex; flex-direction: column; }
.rem-title { order: 1; margin: 0; font-size: clamp(42px, 12.8vw, 84px); line-height: .95; }
.rem-lede { order: 2; margin: 16px 0 0; max-width: 520px; font: 400 17px/1.5 var(--sans); color: #3D2A14; }
.rem-list { order: 3; margin-top: 28px; }
.rem-actions { order: 4; margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.rem-cards { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.reminder { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 20px; background: var(--card-2); box-shadow: 0 20px 40px -30px rgba(80,50,10,.6); }
.rem-date { flex: none; width: 56px; height: 60px; border-radius: 12px; background: #F4EAD2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.rem-month { font: 700 12px/1 var(--sans); letter-spacing: .12em; color: var(--tomato); }
.rem-day { font: 520 28px/1 var(--display); font-stretch: 88%; letter-spacing: -.025em; }
.rem-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rem-text strong { font: 700 17px/1.2 var(--sans); }
.rem-text span { font: 500 14px/1.2 var(--sans); color: #5E5033; }
.rem-icon { flex: none; width: 46px; height: 46px; }
.rem-note { margin: 14px 0 0; font: 500 14px/1 var(--sans); color: #5E5033; }
.faq { margin-top: 72px; padding-top: 56px; border-top: 1.5px solid rgba(19,32,26,.2); }
.faq-title { margin: 0; font-size: clamp(42px, 12.8vw, 84px); line-height: .95; }
.faq-grid { margin-top: 26px; display: flex; flex-direction: column; gap: 26px; }
.qa h3 { margin: 0 0 8px; font: 700 19px/1.3 var(--sans); }
.qa p { margin: 0; font: 400 17px/1.55 var(--sans); color: #3B2C1C; }
@media (min-width: 700px) {
  .rem-actions { flex-direction: row; flex-wrap: wrap; gap: 14px; }
  .faq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 40px; }
}
@media (min-width: 1100px) {
  .fall { padding: 104px 0 112px; }
  .reminders { display: grid; grid-template-columns: minmax(0, 1fr) 560px; grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: ". cards" "title cards" "lede cards" "actions cards" ". cards"; column-gap: 72px; padding-bottom: 96px; border-bottom: 1.5px solid rgba(19,32,26,.2); }
  .rem-title { grid-area: title; }
  .rem-lede { grid-area: lede; margin-top: 22px; font-size: 19px; line-height: 1.55; }
  .rem-actions { grid-area: actions; margin-top: 32px; }
  .rem-list { grid-area: cards; margin: 0; }
  .rem-cards { gap: 16px; }
  .reminder { gap: 18px; padding: 16px 22px 16px 16px; border-radius: 22px; box-shadow: 0 24px 44px -30px rgba(80,50,10,.6); }
  .reminder.r1 { margin-left: 36px; } .reminder.r2 { margin-left: 72px; }
  .rem-date { width: 64px; height: 68px; border-radius: 14px; gap: 4px; }
  .rem-month { font-size: 13px; }
  .rem-day { font-size: 32px; }
  .rem-text { gap: 5px; }
  .rem-text strong { font-size: 19px; }
  .rem-text span { font-size: 15px; }
  .rem-icon { width: 56px; height: 56px; }
  .rem-note { margin: 16px 0 0 72px; font-size: 15px; }
  .faq { margin-top: 96px; padding-top: 0; border-top: 0; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 72px; }
  .faq-grid { margin-top: 0; gap: 52px 56px; }
  .qa h3 { margin-bottom: 12px; font-size: 22px; }
  .qa p { font-size: 18px; line-height: 1.6; }
}

/* ============ Inner pages ============ */
.page-head { padding: 8px 0 48px; background: var(--dawn-light); }
.page-head-inner { display: flex; flex-direction: column; gap: 24px; }
.page-head-copy { min-width: 0; }
.crumbs ol { margin: 0 0 14px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; align-items: center; font: 600 15px/1.3 var(--sans); color: var(--body); }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: rgba(19,32,26,.4); }
.crumbs a { display: inline-block; padding: 12px 0; color: var(--body); text-decoration: none; }
.crumbs a:hover { color: var(--moss); text-decoration: underline; }
.crumbs [aria-current] { color: var(--ink); }
.page-title { margin: 0; font-size: clamp(42px, 11.5vw, 84px); line-height: .95; }
.answer { margin: 18px 0 0; max-width: 720px; font: 400 18px/1.55 var(--sans); color: var(--ink-2); }
.page-head .zip-form { margin-top: 26px; }
.page-head .form-status { margin-top: 12px; }
.page-head-aside { display: flex; justify-content: center; }
.head-icon { width: 150px; height: 150px; }
.page-body { padding: 44px 0 72px; display: flex; flex-direction: column; gap: 52px; }
.block-title { margin: 0 0 18px; font-size: clamp(30px, 7.4vw, 46px); line-height: 1; }
.block-title .count { font: 600 .5em/1 var(--sans); color: var(--body); letter-spacing: 0; vertical-align: .35em; }
.block-lede { margin: -4px 0 20px; max-width: 720px; font: 400 17px/1.55 var(--sans); color: var(--body); }
.sub-title { margin: 22px 0 12px; font: 700 17px/1.3 var(--sans); }
.more-link { margin: 18px 0 0; font: 700 17px/1.3 var(--sans); }
@media (min-width: 900px) {
  .page-head { padding: 8px 0 64px; }
  .page-head-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
  .answer { font-size: 20px; }
  .head-icon { width: 220px; height: 220px; }
  .page-body { padding: 64px 0 96px; gap: 72px; }
}

/* Facts: a calm list of label and value */
.facts { margin: 0; display: grid; grid-template-columns: 1fr; border-top: 1.5px solid rgba(19,32,26,.12); }
.facts div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 20px; padding: 14px 0; border-bottom: 1.5px solid rgba(19,32,26,.12); }
.facts dt { font: 600 16px/1.4 var(--sans); color: var(--body); }
.facts dd { margin: 0; text-align: right; font: 700 16px/1.4 var(--sans); color: var(--ink); }
.facts dd span { display: block; max-width: 420px; margin-left: auto; font-weight: 500; font-size: 15px; color: var(--body); }
@media (min-width: 900px) {
  .facts { grid-template-columns: 1fr 1fr; column-gap: 48px; }
  .facts.is-wide { grid-template-columns: 1fr; max-width: 900px; }
}
.zone-states { margin: 18px 0 0; max-width: 760px; font: 400 17px/1.55 var(--sans); color: var(--body); }

/* Tables: dates by zone and by station */
.table-wrap { overflow-x: auto; border-radius: 20px; background: var(--card); box-shadow: 0 30px 60px -48px rgba(70,48,20,.5); }
.data-table { width: 100%; border-collapse: collapse; font: 500 16px/1.4 var(--sans); font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: 13px 16px; text-align: left; vertical-align: top; border-bottom: 1.5px solid rgba(19,32,26,.08); }
.data-table thead th { background: var(--card); font: 700 14px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--body); white-space: nowrap; }
.data-table tbody th { font-weight: 700; color: var(--ink); }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table a { color: var(--moss-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cell-note { display: block; margin-top: 2px; font-weight: 500; font-size: 14px; color: var(--body); }
td.cell-note { display: table-cell; margin: 0; font-size: 15px; }
.row-rare th, .row-rare td { background: rgba(126,157,182,.1); }
@media (max-width: 699px) {
  .table-wrap { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .data-table, .data-table tbody, .data-table tr, .data-table th, .data-table td { display: block; }
  .data-table tr { margin-bottom: 12px; padding: 14px 16px; border-radius: 18px; background: var(--card); box-shadow: 0 20px 40px -36px rgba(70,48,20,.55); }
  .data-table th, .data-table td { padding: 4px 0; border: 0; }
  .data-table tbody th { margin-bottom: 4px; font-size: 17px; }
  .data-table td[data-label] { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 16px; text-align: right; }
  .data-table td[data-label]::before { content: attr(data-label); flex: none; text-align: left; font-weight: 600; color: var(--body); }
  .data-table td[data-label] .cell-note { flex-basis: 100%; margin: 2px 0 4px; text-align: left; }
  td.cell-note { display: block; }
  .row-rare { background: #E9EEF2 !important; }
  .row-rare th, .row-rare td { background: none; }
  .station-table tbody { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; column-gap: 12px; }
  .station-table tr { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, auto); grid-template-columns: subgrid; row-gap: 2px; margin-bottom: 8px; padding: 12px 16px; border-radius: 16px; }
  .station-table tbody th { grid-column: 1 / -1; margin: 0 0 2px; font-size: 16px; }
  .station-table td[data-label] { display: flex; flex-direction: column; justify-content: flex-start; gap: 1px; text-align: left; font-size: 15px; }
  .station-table td[data-label]::before { font: 600 13px/1.3 var(--sans); }
}

/* Chips, tips, questions and related crops */
.chip-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.chip-list a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 16px 4px 4px; border-radius: 999px; background: #EEF1E6; color: var(--ink); font: 700 16px/1 var(--sans); text-decoration: none; }
.chip-list a:hover { background: var(--sage-light); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(58,100,53,.35); }
.chip-list.is-muted a { background: #EFEBE2; }
.chip-icon { width: 40px; height: 40px; }
.two-col { display: grid; gap: 32px; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; gap: 56px; } }
.tip-card { display: flex; gap: 18px; align-items: flex-start; padding: 24px; border-radius: 24px; background: var(--card); box-shadow: 0 30px 60px -44px rgba(70,48,20,.5); }
.tip-icon { flex: none; width: 72px; height: 72px; }
.tip-title { margin: 0 0 8px; font-size: 30px; line-height: 1; }
.tip-card p { margin: 0; font: 400 18px/1.55 var(--sans); color: var(--ink-2); }
.qa-list { display: grid; gap: 26px; }
@media (min-width: 900px) { .qa-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 56px; } }
.mini-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
@media (min-width: 700px) { .mini-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.mini-crop { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); text-align: center; text-decoration: none; font: 700 16px/1.2 var(--sans); }
.mini-crop img { width: 64px; height: 64px; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.mini-crop:hover { color: var(--moss); }
.mini-crop:hover img { transform: translateY(-4px); }

/* Hubs */
.hub-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 700px) { .hub-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .hub-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } }
.hub-crop { height: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 12px 18px; border-radius: 22px; background: var(--card); color: var(--ink); text-align: center; text-decoration: none; box-shadow: 0 24px 44px -40px rgba(70,48,20,.55); transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.hub-crop:hover { color: var(--ink); transform: translateY(-4px); box-shadow: 0 30px 50px -36px rgba(70,48,20,.6); }
.hub-crop img { width: 88px; height: 88px; }
.hub-crop strong { font: 480 24px/1 var(--display); font-stretch: 88%; letter-spacing: -.02em; }
.hub-crop span { font: 500 14px/1.3 var(--sans); color: var(--body); }
.state-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) { .state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .state-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.state-card { height: 100%; display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-radius: 18px; background: var(--card); color: var(--ink); text-decoration: none; box-shadow: 0 20px 40px -36px rgba(70,48,20,.55); }
.state-card:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(58,100,53,.35), 0 20px 40px -36px rgba(70,48,20,.55); }
.state-card strong { font: 480 24px/1.05 var(--display); font-stretch: 88%; letter-spacing: -.02em; }
.state-card span { font: 500 15px/1.3 var(--sans); color: var(--body); }
.state-card .state-count { font-size: 14px; }
.zone-pills { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.zone-pills a, .zone-pills span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--card); color: var(--ink); font: 700 16px/1 var(--sans); text-decoration: none; box-shadow: inset 0 0 0 1.5px rgba(19,32,26,.12); }
.zone-pills a:hover { background: var(--sage-light); color: var(--ink); }
.zone-pills span[aria-current] { background: var(--ink); color: #F1F4EE; box-shadow: none; }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 18px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.step { padding: 24px; border-radius: 24px; background: var(--card); box-shadow: 0 30px 60px -48px rgba(70,48,20,.5); }
.step-icon { width: 72px; height: 72px; }
.step h3 { margin: 10px 0 6px; font: 700 20px/1.3 var(--sans); }
.step p { margin: 0; font: 400 17px/1.55 var(--sans); color: var(--body); }
.note-block p { margin: 0; max-width: 760px; font: 400 17px/1.6 var(--sans); color: var(--ink-2); }
.table-note { margin: 14px 0 0; font: 400 15px/1.5 var(--sans); color: var(--body); }

/* Zone pages: every job, month by month */
.months-list { display: grid; gap: 14px; }
@media (min-width: 900px) { .months-list { display: block; columns: 2; column-gap: 18px; } .month-block { break-inside: avoid; margin-bottom: 18px; } }
@media (min-width: 1300px) { .months-list { columns: 3; } }
.month-block { padding: 20px 22px 22px; border-radius: 24px; background: var(--card); box-shadow: 0 30px 60px -50px rgba(70,48,20,.55); }
.month-block.is-quiet { background: rgba(251,248,239,.55); box-shadow: none; }
.month-title { margin: 0 0 12px; font: 480 32px/1 var(--display); font-stretch: 88%; letter-spacing: -.025em; }
.job-group + .job-group { margin-top: 14px; }
.job-kind { margin: 0 0 6px; font: 700 14px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.job-group.k-indoor .job-kind { color: var(--k-indoor); } .job-group.k-sow .job-kind, .job-group.k-sow-fall .job-kind { color: var(--k-sow); } .job-group.k-plant-out .job-kind { color: var(--k-plant); } .job-group.k-harvest .job-kind { color: var(--k-harvest); }
.job-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; font: 500 16px/1.45 var(--sans); }
.job-list a { color: var(--ink); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.job-verb, .job-date { color: var(--body); font-weight: 500; }
.job-date { font-size: 15px; white-space: nowrap; }
.quiet { margin: 0; font: 400 16px/1.5 var(--sans); color: var(--body); }
.season-list { display: grid; gap: 16px; }
@media (min-width: 900px) { .season-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.season-group { padding: 22px; border-radius: 24px; background: var(--card); }
.season-title { margin: 0 0 8px; font: 480 28px/1.05 var(--display); font-stretch: 88%; letter-spacing: -.02em; }
.season-group p { margin: 0 0 12px; font: 400 16px/1.55 var(--sans); color: var(--body); }

/* Prose pages */
.prose { max-width: 740px; }
.prose h2 { margin: 40px 0 12px; font-size: clamp(28px, 6vw, 38px); line-height: 1.05; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin: 0 0 14px; font: 400 18px/1.65 var(--sans); color: var(--ink-2); }
.prose a { color: var(--moss-deep); }
.source-list { margin-bottom: 36px; }
.nf-links { display: flex; flex-wrap: wrap; gap: 12px; }

/* Motion: calm, once, when a section comes into view. Nothing hides unless the page script runs and motion is welcome. */
@keyframes push { from { transform: scale(1.06); } to { transform: none; } }
@keyframes sprout { 0% { transform: translateY(58%); opacity: 0; } 30% { opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: .8; } }
@keyframes pop { 0% { transform: scale(.55); opacity: 0; } 70% { transform: scale(1.06); opacity: 1; } 100% { transform: none; opacity: 1; } }
.star { animation: twinkle 4s ease-in-out infinite; }
.star.d1 { animation-delay: 1s; } .star.d2 { animation-delay: 2s; } .star.d3 { animation-delay: 3s; }
.pop { animation: pop .6s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not(.is-in) .grow { clip-path: inset(100% 0 0 0); }
  .js [data-reveal]:not(.is-in) .hill-free, .js [data-reveal]:not(.is-in) .frost-span { transform: scale(0); }
  .js [data-reveal]:not(.is-in) .sun-disc, .js [data-reveal]:not(.is-in) .sun-halo, .js [data-reveal]:not(.is-in) .fade, .js [data-reveal]:not(.is-in) .reminder { opacity: 0; }
  .is-in .grow { animation: grow 1.1s cubic-bezier(.6,0,.2,1) both; }
  .is-in .m-feb .grow { animation-delay: .2s; } .is-in .m-mar .grow { animation-delay: .31s; } .is-in .m-apr .grow { animation-delay: .42s; } .is-in .m-may .grow { animation-delay: .53s; } .is-in .m-jun .grow { animation-delay: .64s; } .is-in .m-summer .grow { animation-delay: .75s; } .is-in .m-oct .grow { animation-delay: .86s; }
  .is-in .hill-free { animation: draw-x 1.5s .7s cubic-bezier(.6,0,.2,1) both; }
  .is-in .sun-disc { animation: fade 1.2s 1.5s ease both; }
  .is-in .sun-halo { animation: fade 1.2s 1.6s ease both; }
  .is-in .fade { animation: fade 1.2s ease both; }
  .is-in .is-first .fade { animation-delay: .3s; }
  .is-in .frost-span { animation: draw-y 1.5s .5s cubic-bezier(.6,0,.2,1) both; }
  .is-in .reminder { animation: rise 1s cubic-bezier(.2,.7,.2,1) both; }
  .is-in .reminder.r0 { animation-delay: .1s; } .is-in .reminder.r1 { animation-delay: .25s; } .is-in .reminder.r2 { animation-delay: .4s; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
  .is-in .frost-span { animation-name: draw-x; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}