/* Metric-adjusted local stand-in for Caveat, so the sign keeps its size while the web
   font is slow or blocked. */
@font-face {
  font-family: "Caveat Fallback";
  src: local("Segoe Print"), local("Bradley Hand"), local("Comic Sans MS");
  size-adjust: 75%;
  ascent-override: 90%;
  descent-override: 25%;
  line-gap-override: 0%;
}

/* Lola Sola: "Little Farm Postcard". Animations use transform/opacity only
   (plus one tiny one-shot arrow draw). Everything lives in this file because the
   page is served under a strict CSP (no inline style). */

:root {
  --cream: #fbf1da;
  --paper: #f6e5c0;
  --ink: #3b2314;
  --barn: #b23a2b;
  --barn-deep: #8c2b1f;
  --mustard: #e8b04a;
  --sage: #8da36a;
  --sage-deep: #55703f;
  --ground: #7f9b55;
  --wood: #86532c;
  --wood-dark: #4d2c14;
  --blush: #ebae9a;
  --display: "Fraunces", "Cooper Black", Georgia, serif;
  --hand: "Caveat", "Caveat Fallback", cursive;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* card width follows viewport height so the sign always lands above the fold */
  --w: max(236px, min(calc(100vw - 76px), 380px, calc((100svh - 392px) * 0.86)));
  --hill-h: clamp(150px, 22svh, 300px);
  --sun-y: 36svh;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; background: #fdf0d3; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: linear-gradient(180deg, #fbe7bd, #fdf0d3 30%, #f8e0b0);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ------------------------------------------------------------ world (fixed, behind everything) */
.world {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #f1c27f 0%, #f7d9a0 34%, #fbe7bd 62%, #fdf0d3 100%);
}
.rays {
  position: absolute; left: 50%; top: var(--sun-y);
  width: 130vmax; height: 130vmax; margin: -65vmax 0 0 -65vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255, 244, 205, .6) 0 6deg, rgba(255, 244, 205, 0) 6deg 12deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 10%, transparent 100%);
  animation: spin 160s linear infinite;
  will-change: transform;
}
.sun {
  position: absolute; left: 50%; top: var(--sun-y);
  width: min(92vmin, 700px); aspect-ratio: 1; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff3c6 0 36%, #ffe7a6 36% 54%, #ffdc92 54% 72%, rgba(255, 220, 146, 0) 72%);
}
.cloud {
  position: absolute; left: 0; width: 170px; opacity: .95; animation: drift var(--dur) linear var(--del) infinite; will-change: transform;
  display: block; padding: 0; margin: 0; border: 0; background: none; line-height: 0; cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.cloud svg { width: 100%; height: auto; }
.cloud--a { top: 20svh; --dur: 95s; --del: -30s; }
.cloud--b { top: 47svh; width: 130px; --dur: 70s; --del: -52s; }
.cloud--c { top: 31svh; width: 210px; opacity: .8; --dur: 130s; --del: -80s; }
.cloud--d { top: 9svh; width: 110px; --dur: 80s; --del: -12s; }

.farm { position: absolute; left: 0; right: 0; bottom: 0; height: var(--hill-h); }
.farm > svg.hills { position: absolute; inset: 0; width: 100%; height: 100%; }
.barn { position: absolute; left: 3vw; bottom: max(calc(var(--hill-h) * .34), calc(var(--fh, 0px) * .9)); width: clamp(76px, 22vw, 190px); }
.windmill { position: absolute; right: 3vw; bottom: max(calc(var(--hill-h) * .3), calc(var(--fh, 0px) * .8)); width: clamp(84px, 24vw, 210px); }
.barn, .windmill { display: block; padding: 0; margin: 0; border: 0; background: none; line-height: 0; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.barn svg, .windmill svg { width: 100%; height: auto; overflow: visible; }
.blades { transform-origin: 80px 90px; animation: spin 22s linear infinite; }

.blade > svg { width: 100%; height: 100%; overflow: visible; }

/* ------------------------------------------------------------ air: pollen, seeds, butterflies (taps pass through) */
.air { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.mote {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle, #fffbe6 0 22%, rgba(255, 208, 100, .85) 44%, rgba(255, 190, 80, 0) 72%);
  opacity: 0;
  animation: mote var(--dur) ease-in-out var(--del) infinite alternate, twinkle var(--tw) ease-in-out var(--del) infinite;
}
.seed {
  position: absolute; left: 0; top: 0; width: var(--sz); height: calc(var(--sz) * 1.25);
  color: #fffdf4; opacity: 0;
  filter: drop-shadow(0 0 2px rgba(140, 88, 20, .65));
  animation: float var(--dur) linear var(--del) infinite;
}
.seed > svg { width: 100%; height: 100%; animation: tumble 4s ease-in-out infinite alternate; }

.bfly { position: absolute; left: 0; top: 0; width: 28px; }
.bfly .hopper > svg { animation: bob 1.4s ease-in-out infinite alternate; }
.bfly--a { animation: flit-a 34s linear -8s infinite; }
.bfly--b { animation: flit-b 46s linear -26s infinite; width: 22px; }
.bfly--b .hopper > svg { animation-duration: 1.1s; }
.wing { transform-origin: 12px 12px; animation: flap .2s ease-in-out infinite alternate; }

.hopper { display: block; transform-origin: 50% 90%; }
.hop { animation: tap-hop .64s cubic-bezier(.3, 1.5, .5, 1); }

/* ------------------------------------------------------------ bunting */
.bunting {
  position: absolute; top: 0; left: 0; width: 100%; height: 50px; z-index: 4; pointer-events: none;
  filter: drop-shadow(0 3px 2px rgba(90, 45, 15, .22));
}
.bunting svg { width: 100%; height: 100%; }
.flag { transform-box: fill-box; transform-origin: 50% 0; animation: flutter var(--dur) ease-in-out var(--del) infinite alternate; }

/* ------------------------------------------------------------ layout */
main { position: relative; }
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center;
  padding: 58px 16px 30px;
}

/* ------------------------------------------------------------ postcard */
.postcard {
  position: relative; z-index: 3; width: calc(var(--w) + 30px);
  padding: 15px 15px 16px;
  background:
    radial-gradient(circle at 20% 15%, rgba(255, 255, 255, .55), transparent 55%),
    var(--cream);
  border-radius: 8px;
  transform: rotate(-1.2deg);
  box-shadow: 0 1px 0 #fff8e6 inset, 0 2px 0 rgba(120, 75, 30, .18), 0 22px 34px -14px rgba(77, 40, 12, .55), 0 6px 10px -4px rgba(77, 40, 12, .25);
}
.postcard::before {
  content: ""; position: absolute; inset: 6px; border-radius: 4px; pointer-events: none;
  border: 1.5px solid rgba(166, 112, 52, .32);
}
.arch {
  position: relative; width: var(--w); aspect-ratio: 1 / 1.13;
  padding: 4px; background: var(--cream);
  border: 6px solid var(--barn);
  border-radius: 999px 999px 0 0;
  box-shadow: 0 0 0 2px var(--cream), 0 0 0 3px rgba(140, 43, 31, .45);
}
.arch-in { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 999px 999px 0 0; background: #5b6b3c; }
.arch-in img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 0%; }
.arch-in::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 70% at 85% 10%, rgba(255, 214, 130, .22), transparent 60%),
    linear-gradient(180deg, transparent 70%, rgba(60, 30, 10, .22));
}
/* foreground grass: sits in front of the photo and over its bottom frame edge */
.arch-grass { position: absolute; left: -2px; right: -2px; bottom: -11px; height: 108px; z-index: 3; pointer-events: none; }
.blade { position: absolute; bottom: 0; height: var(--h); width: calc(var(--h) * var(--r, .2)); color: var(--c); transform-origin: 50% 100%; animation: sway var(--dur) ease-in-out var(--del) infinite alternate; }

.ladybug { position: absolute; left: 8px; top: 62px; width: 18px; z-index: 2; transform: rotate(-24deg); }

.stamp { position: absolute; right: -6px; top: -14px; width: 58px; z-index: 3; transform: rotate(7deg); filter: drop-shadow(0 2px 1.5px rgba(60, 30, 10, .35)); }
.postmark { position: absolute; right: 22px; top: -4px; width: 96px; z-index: 4; transform: rotate(-14deg); mix-blend-mode: multiply; opacity: .72; color: var(--barn-deep); pointer-events: none; }

.caption { text-align: center; padding-top: 12px; }
.caption h1 { margin: 0; line-height: 1; font-weight: 900; font-family: var(--display); }
.hello { display: block; font-family: var(--hand); font-weight: 700; font-size: 27px; line-height: 1; color: var(--barn); transform: rotate(-2deg); margin-bottom: 1px; }
.name {
  display: block; white-space: nowrap; font-size: clamp(32px, calc(var(--w) * .155), 62px); letter-spacing: -.012em; color: var(--ink);
  font-variation-settings: "SOFT" 100, "WONK" 1;
  text-shadow: 2px 3px 0 #efcd8c;
}

/* ------------------------------------------------------------ sign (main CTA) */
.cta-burst { position: relative; margin-top: 30px; width: min(310px, calc(100vw - 44px)); }
.sign-wrap {
  position: relative; z-index: 3; transform-origin: 50% -34px;
  animation: sign-in 2s .2s cubic-bezier(.25, .6, .3, 1) both, sign-idle 7s 2.6s ease-in-out infinite;
}
.sign {
  /* a native <button>: drop the UA button styling, keep the former anchor's look */
  appearance: none; -webkit-appearance: none; width: 100%; margin: 0; border: 0; font: inherit; text-align: left; cursor: pointer;
  /* column flex, not block: a button centres block content vertically, flex keeps it at the top like the old link */
  position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; text-decoration: none; color: #fff3d8;
  padding: 17px 66px 16px 24px; min-height: 92px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 235, 200, .16), transparent 34%, rgba(40, 18, 4, .24)),
    repeating-linear-gradient(180deg, rgba(48, 22, 6, .12) 0 1px, transparent 1px 6px, rgba(255, 214, 160, .07) 6px 8px, transparent 8px 13px),
    var(--wood);
  box-shadow: 0 7px 0 var(--wood-dark), 0 18px 22px -6px rgba(60, 28, 8, .55), inset 0 1px 0 rgba(255, 226, 180, .5);
  transform-origin: 50% -34px;
  -webkit-tap-highlight-color: transparent;
  transition: filter .2s;
}
.sign::before {
  content: ""; position: absolute; inset: 7px; border-radius: 7px; pointer-events: none;
  border: 2px solid rgba(255, 236, 200, .5);
}
.sign::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 12px;
  background:
    radial-gradient(circle at 13px 13px, #3b200c 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 13px) 13px, #3b200c 0 2.5px, transparent 3px),
    radial-gradient(circle at 13px calc(100% - 13px), #3b200c 0 2.5px, transparent 3px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), #3b200c 0 2.5px, transparent 3px);
}
.ropes { position: absolute; left: 0; top: -34px; width: 100%; height: 36px; overflow: visible; pointer-events: none; }
.sign-title {
  position: relative; z-index: 1; display: block;
  font-family: var(--display); font-weight: 900; font-size: 29px; line-height: 1.05; letter-spacing: -.005em;
  font-variation-settings: "SOFT" 100, "WONK" 1;
  text-shadow: 0 2px 0 rgba(48, 22, 6, .6);
}
.sign-sub {
  position: relative; z-index: 1; display: block; margin-top: 3px; white-space: nowrap;
  font-family: var(--hand); font-weight: 700; font-size: 23px; line-height: 1; color: #ffe29a;
  text-shadow: 0 1.5px 0 rgba(48, 22, 6, .55);
}
.badge { position: absolute; z-index: 2; top: -30px; right: -14px; width: 76px; height: 76px; pointer-events: none; }
.badge .sunflower { display: block; width: 100%; height: 100%; animation: spin 14s linear infinite; filter: drop-shadow(0 3px 2px rgba(48, 22, 6, .4)); }
.badge .sunflower svg { width: 100%; height: 100%; transition: rotate .7s cubic-bezier(.2, .8, .2, 1), scale .3s; }
.sign:hover, .sign:focus-visible, .sign.swing { animation: swing 1.4s ease-in-out; filter: brightness(1.06); }
.sign:hover .badge svg, .sign:focus-visible .badge svg, .sign.swing .badge svg { rotate: 70deg; scale: 1.12; }
.sign:active { filter: brightness(.96); }
.sign:focus-visible, .packet:focus-visible { outline: 4px solid #fff; outline-offset: 6px; box-shadow: 0 7px 0 var(--wood-dark), 0 0 0 9px #2a4a2c, 0 18px 22px -6px rgba(60, 28, 8, .55); }
.packet:focus-visible { box-shadow: 0 0 0 9px #2a4a2c; }

/* daisy + heart burst on press */
.bit { position: absolute; left: 50%; top: 46%; z-index: 6; pointer-events: none; opacity: 0; }
.bit svg { width: 100%; height: 100%; }

/* "what you are looking for": handwritten note with a self-drawing arrow */
.psst {
  position: absolute; z-index: 1; margin: 0; pointer-events: none;
  display: flex; align-items: flex-start; gap: 2px;
  left: 14%; top: calc(100% + 12px);
  font-family: var(--hand); font-weight: 700; font-size: 28px; line-height: 1; color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 246, 220, .9), 0 0 8px rgba(255, 244, 214, .95), 0 0 14px rgba(255, 244, 214, .8);
  animation: pop .6s cubic-bezier(.34, 1.56, .64, 1) 1s both, nudge 3.6s ease-in-out 3s infinite;
  --rot: -3deg;
}
.psst .arrow { width: 50px; height: 40px; margin-top: -20px; overflow: visible; }
.psst .arrow--d { display: none; }
.psst .psst-text { padding-top: 4px; white-space: nowrap; }
.psst .draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw .8s ease-out 1.3s forwards; }
.psst .head { opacity: 0; animation: fade-in .25s ease-out 2s forwards; }

/* ------------------------------------------------------------ the letter (inside the mailbox dialog) */
.back-card { width: min(380px, 100%); padding: 34px 24px 30px; transform: rotate(1deg); text-align: center; }
.ribbon {
  position: absolute; left: 50%; top: -13px; width: 132px; height: 28px; margin-left: -66px; z-index: 2; transform: rotate(-3deg);
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(201, 71, 58, .5) 50%, transparent 50%) 0 0 / 14px 14px,
    linear-gradient(rgba(201, 71, 58, .5) 50%, transparent 50%) 0 0 / 14px 14px,
    #fff8ea;
  clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 50%, 100% 100%, 0 100%, 7px 50%);
  filter: drop-shadow(0 1px 1px rgba(77, 40, 12, .25));
}
.note {
  margin: 4px 0 24px; text-align: left; padding: 0 2px;
  font-family: var(--hand); font-weight: 600; font-size: 29px; line-height: 38px; color: #4a2c18;
  background: repeating-linear-gradient(180deg, transparent 0 36px, rgba(150, 100, 50, .28) 36px 37.5px);
  background-position: 0 6px;
}
.note b { font-weight: 700; color: var(--barn); }

.packet-wrap { position: relative; width: 240px; margin: 0 auto; }
.packet {
  appearance: none; -webkit-appearance: none; padding: 0; border: 0; background: none; font: inherit; text-align: inherit; cursor: pointer;
  position: relative; display: block; width: 240px; margin: 0 auto; text-decoration: none; color: var(--ink);
  transform: rotate(-2.5deg); transform-origin: 50% 0; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1);
  filter: drop-shadow(0 14px 14px rgba(70, 35, 10, .32));
  -webkit-tap-highlight-color: transparent;
}
.packet-top { display: block; height: 18px; background: linear-gradient(180deg, #b23a2b, #9a2f23); border-radius: 4px 4px 0 0; position: relative; }
.packet-body {
  display: flex; flex-direction: column; align-items: center; padding: 14px 14px 18px;
  background: radial-gradient(circle at 50% 30%, #fffaf0, #f9ebc9 80%);
  border: 3px solid #b23a2b; border-top: 0; border-radius: 0 0 6px 6px;
  box-shadow: inset 0 0 0 4px #f9ebc9, inset 0 0 0 5.5px rgba(178, 58, 43, .45);
}
.packet-kicker { font-family: var(--hand); font-weight: 700; font-size: 22px; line-height: 1; color: var(--barn); }
.packet .sunflower { display: block; width: 96px; height: 96px; margin: 6px 0 4px; animation: spin 24s linear infinite; }
.packet .sunflower svg { width: 100%; height: 100%; }
.packet-title { font-family: var(--display); font-weight: 900; font-size: 28px; white-space: nowrap; line-height: 1; font-variation-settings: "SOFT" 100, "WONK" 1; color: var(--ink); }
.packet-sub { margin-top: 8px; padding: 9px 16px; min-height: 48px; display: inline-flex; align-items: center; border-radius: 99px; background: var(--sage-deep); color: #fff7e2; font-weight: 700; font-size: 16px; }
.packet:hover { transform: rotate(2deg) translateY(-4px); }
.packet:active { transform: rotate(-1deg) translateY(1px) scale(.98); }

.sig { display: block; margin-top: 22px; font-family: var(--hand); font-weight: 700; font-size: 28px; color: var(--barn); transform: rotate(-3deg); }

/* ------------------------------------------------------------ footer: the page ends on the meadow */
.foot {
  position: relative; z-index: 3; background: var(--ground); margin-top: 46px;
  padding: 4px 16px calc(24px + env(safe-area-inset-bottom, 0px)); text-align: center;
}
.foot-edge { position: absolute; left: 0; top: -39px; width: 100%; height: 40px; pointer-events: none; }
.foot-daisy { position: absolute; width: 30px; height: 30px; top: -30px; }
.foot-daisy--a { left: 11%; top: -33px; }
.foot-daisy--b { left: 47%; top: -36px; width: 26px; height: 26px; }
.foot-daisy--c { right: 12%; top: -34px; width: 34px; height: 34px; }
.foot-line {
  position: relative; display: inline-block; margin: 6px 0 0; padding: 11px 20px; min-height: 44px;
  border-radius: 99px; background: var(--cream); color: var(--ink);
  font-weight: 500; font-size: 15px; line-height: 1.3;
  box-shadow: 0 3px 0 rgba(60, 80, 30, .45);
}

/* ------------------------------------------------------------ keyframes */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: translateX(-240px); } to { transform: translateX(calc(100vw + 40px)); } }
@keyframes sway { from { transform: rotate(calc(var(--lean, 0deg) - var(--a))); } to { transform: rotate(calc(var(--lean, 0deg) + var(--a))); } }
@keyframes flutter { from { transform: rotate(-5deg) skewX(-2deg); } to { transform: rotate(5deg) skewX(2deg); } }
@keyframes tap-hop {
  0% { translate: 0 0; scale: 1; rotate: 0deg; }
  30% { translate: 0 -16px; scale: 1.16; rotate: -10deg; }
  58% { translate: 0 0; scale: .92 1.08; rotate: 6deg; }
  78% { translate: 0 -5px; scale: 1.04; rotate: -2deg; }
  100% { translate: 0 0; scale: 1; rotate: 0deg; }
}
@keyframes bob { from { transform: translateY(-7px); } to { transform: translateY(7px); } }
@keyframes flap { from { transform: scaleX(1); } to { transform: scaleX(.38); } }
@keyframes flit-a {
  0% { transform: translate(-10vw, 72svh); }
  16% { transform: translate(14vw, 56svh); }
  32% { transform: translate(38vw, 66svh); }
  50% { transform: translate(60vw, 40svh); }
  68% { transform: translate(82vw, 52svh); }
  84% { transform: translate(98vw, 28svh); }
  100% { transform: translate(112vw, 24svh); }
}
@keyframes flit-b {
  0% { transform: translate(110vw, 18svh); }
  22% { transform: translate(80vw, 36svh); }
  42% { transform: translate(52vw, 22svh); }
  60% { transform: translate(28vw, 46svh); }
  80% { transform: translate(6vw, 34svh); }
  100% { transform: translate(-12vw, 44svh); }
}
@keyframes mote { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(var(--dx), var(--dy), 0); } }
@keyframes twinkle { 0%, 100% { opacity: 0; } 30%, 68% { opacity: var(--o, .9); } }
@keyframes float {
  0% { opacity: 0; transform: translate3d(-10vw, var(--y0), 0) rotate(-14deg); }
  8% { opacity: .92; }
  30% { transform: translate3d(26vw, calc(var(--y0) - 7vh), 0) rotate(6deg); }
  58% { transform: translate3d(56vw, calc(var(--y0) + 4vh), 0) rotate(-8deg); }
  88% { opacity: .85; }
  100% { opacity: 0; transform: translate3d(112vw, calc(var(--y0) - 9vh), 0) rotate(18deg); }
}
@keyframes tumble { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes sign-in {
  0% { transform: rotate(-16deg) translateY(-14px); }
  28% { transform: rotate(8deg); }
  48% { transform: rotate(-4.2deg); }
  66% { transform: rotate(2.2deg); }
  82% { transform: rotate(-1deg); }
  100% { transform: rotate(0); }
}
@keyframes sign-idle {
  0%, 22%, 100% { transform: rotate(0); }
  6% { transform: rotate(2.2deg); }
  11% { transform: rotate(-1.6deg); }
  16% { transform: rotate(.8deg); }
}
@keyframes swing {
  0% { transform: rotate(0); }
  16% { transform: rotate(7deg); }
  36% { transform: rotate(-5.2deg); }
  56% { transform: rotate(3.2deg); }
  76% { transform: rotate(-1.6deg); }
  100% { transform: rotate(0); }
}
@keyframes pop {
  0% { transform: scale(0) rotate(calc(var(--rot, 0deg) - 40deg)); opacity: 0; }
  100% { transform: scale(1) rotate(var(--rot, 0deg)); opacity: 1; }
}
@keyframes nudge {
  0%, 100% { transform: rotate(var(--rot, 0deg)) translate(0, 0); }
  50% { transform: rotate(var(--rot, 0deg)) translate(-3px, 3px); }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-in { to { opacity: 1; } }

/* ------------------------------------------------------------ pause everything while the tab is hidden */
html.is-hidden *, html.is-hidden *::before, html.is-hidden *::after { animation-play-state: paused !important; }

/* ------------------------------------------------------------ short phones: keep the sign above the fold */
@media (max-height: 700px) {
  .barn { width: 60px; bottom: max(26px, calc(var(--fh, 0px) * .9)); }
  .windmill { width: 54px; bottom: max(50px, calc(var(--fh, 0px) * .8)); }   /* the 50px keeps the foot clear of the mailbox */
  .hero { padding-top: 54px; }
  .cta-burst { margin-top: 26px; }
  .sign { min-height: 84px; padding-top: 14px; padding-bottom: 13px; }
  .psst { font-size: 24px; }
  :root { --hill-h: 140px; }
}
/* short phones: the handwritten note shrinks to one line so Farmer Lola has room under it */
@media (max-height: 700px) and (max-width: 719px) {
  .psst { font-size: 20px; }
  .psst .arrow { width: 40px; height: 32px; margin-top: -14px; }
  .psst .psst-text br { display: none; }
}

/* ------------------------------------------------------------ larger screens */
@media (min-width: 720px) {
  :root { --sun-y: 42svh; --w: max(236px, min(380px, calc((100svh - 392px) * 0.86), calc(100svh * .3 + 86px))); }
  .bunting { height: 60px; }
  .hero { padding-top: 76px; }
  .ladybug { width: 22px; top: 76px; left: 10px; }
  .stamp { width: 70px; right: -14px; top: -18px; }
  .postmark { width: 112px; right: 28px; }
  .arch-grass { height: 124px; }
  .cta-burst { width: 380px; margin-top: 30px; }
  .sign { padding: 20px 84px 19px 30px; min-height: 108px; }
  .sign-title { font-size: 36px; }
  .sign-sub { font-size: 27px; margin-top: 4px; }
  .badge { width: 94px; height: 94px; top: -38px; right: -20px; }
  .foot-daisy--a { left: 22%; }
  .foot-daisy--c { right: 24%; }
}

@media (min-width: 1100px) {
  .psst { left: calc(100% + 78px); top: 10px; font-size: 32px; width: 230px; }
  .psst .arrow--m { display: none; }
  .psst .arrow--d { display: block; position: absolute; left: -64px; top: 14px; width: 58px; height: 38px; margin: 0; }
  .psst .psst-text { white-space: normal; }
}

/* Narrow desktops: give the two-line note room before the windmill */
@media (min-width: 1100px) and (max-width: 1359px) {
  .windmill { right: 1vw; width: 168px; bottom: calc(max(calc(var(--hill-h) * .3), calc(var(--fh, 0px) * .8)) + 32px); }   /* stands on the hill, above the bigger mailbox */
}

@media (max-width: 359px) {
  .sign { padding-right: 58px; }
  .sign-title { font-size: 26px; }
}

/* ------------------------------------------------------------ very short viewports (in-app browsers with toolbars):
   shrink the card and trim the space above the sign so the whole sign stays on screen */
@media (max-height: 600px) {
  .windmill { width: 42px; }
  :root { --w: max(150px, min(calc(100vw - 76px), 380px, 236px, calc((100svh - 262px) * 0.86))); }
  .bunting { height: 32px; }
  .hero { padding-top: 38px; }
  .stamp { width: 46px; top: -12px; }
  .postmark { width: 78px; top: -2px; }
  .caption { padding-top: 6px; }
  .hello { font-size: 22px; }
  .name { font-size: clamp(30px, calc(var(--w) * .155), 62px); }
  .cta-burst { margin-top: 22px; }
  .sign { min-height: 78px; padding-top: 12px; padding-bottom: 11px; }
}

/* ============================================================ LIVING FARM (option 3)
   Everything below drives Farmer Lola, her field strip, the weather and the five hidden finds. */

/* The page content no longer swallows taps in its empty areas, so the clouds, barn, windmill and
   Farmer Lola underneath stay tappable. Real content opts back in. */
main, .hero { pointer-events: none; }
.postcard, .sign-wrap, .packet-wrap { pointer-events: auto; }

/* shared look for every hidden-find button */
.egg {
  appearance: none; -webkit-appearance: none; font: inherit; color: inherit;
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  pointer-events: auto; -webkit-tap-highlight-color: transparent;
  min-width: 44px; min-height: 44px;
}
.egg:focus-visible, .lola-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 6px #2a4a2c; border-radius: 14px; }

/* ------------------------------------------------------------ barn, windmill, phones */
.leaf { transform-box: fill-box; transition: transform .5s cubic-bezier(.3, 1.15, .4, 1); }
.leaf-l { transform-origin: 0 50%; }
.leaf-r { transform-origin: 100% 50%; }
.barn.open .leaf { transform: scaleX(.1); }
.cow { transform: translateY(48px); transition: transform .55s .28s cubic-bezier(.34, 1.56, .64, 1); }
.barn.open .cow { transform: translateY(-4px); }
.whirl-ring { opacity: 0; transition: opacity .3s; transform-origin: 80px 90px; }
.windmill.whirl .whirl-ring { opacity: .7; animation: spin .45s linear infinite; }

/* ------------------------------------------------------------ weather corner: sun + cloud on the postcard */
.weather { position: absolute; left: -22px; top: -30px; width: 116px; height: 80px; z-index: 5; pointer-events: none; }
.egg-sun { position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; }
.egg-sun svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 1.5px rgba(80, 45, 15, .3)); }
.sun-rays { transform-origin: 32px 32px; animation: spin 26s linear infinite; }
.sun-glasses { opacity: 0; transform: translateY(-16px); transition: opacity .2s, transform .5s cubic-bezier(.34, 1.7, .5, 1); }
.egg-sun.cool .sun-glasses { opacity: 1; transform: none; }
.egg-sun.cool { animation: wiggle .7s ease-in-out; }
.egg-cloud { position: absolute; left: 36px; top: 28px; width: 80px; height: 50px; animation: float-y 5s ease-in-out infinite alternate; }
.egg-cloud svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 2px 1.5px rgba(80, 45, 15, .3)); }
.cloud-body, .cloud g { transition: fill .6s; }
.egg-cloud.rainy .cloud-body, .cloud.rainy g { fill: #b9c3cb; }
.egg-cloud.rainy { animation: shiver .5s ease-in-out infinite alternate; }
@media (min-width: 720px) {
  .weather { left: -28px; top: -38px; width: 146px; height: 100px; }
  .egg-sun { width: 66px; height: 66px; }
  .egg-cloud { left: 44px; top: 34px; width: 100px; height: 62px; }
}

/* ------------------------------------------------------------ rain */
.rain { position: fixed; z-index: 5; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity .5s, translate .3s linear; }
/* while she holds her umbrella the drops stop at the canopy: a hole in the mask (set from site.js) follows her */
.rain.shelter {
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%, var(--hw, 0px) var(--hh, 0px); mask-size: 100% 100%, var(--hw, 0px) var(--hh, 0px);
  -webkit-mask-position: 0 0, var(--hx, 0px) var(--hy, 0px); mask-position: 0 0, var(--hx, 0px) var(--hy, 0px);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.rain.on { opacity: .72; }
.drop {
  position: absolute; top: 0; left: var(--dx); width: 2px; height: var(--dh); border-radius: 2px;
  background: linear-gradient(180deg, rgba(110, 150, 185, 0), rgba(86, 132, 172, .85));
  opacity: 0; animation: rain-fall var(--dd) linear var(--dw) infinite;
}

/* ------------------------------------------------------------ the little farm */
/* The field itself (path, plots, fences, hedge, coop house) is one inline SVG that site.js sizes to the screen; it sits
   behind the lane. Its height is --fh, which the barn and windmill also use to stand just behind its hedge. */
.field { position: fixed; left: 0; right: 0; bottom: 0; height: var(--fh, 80px); z-index: 1; pointer-events: none; overflow: hidden; }
.field svg { display: block; max-width: none; overflow: hidden; }
.f-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: wsway var(--dur, 4s) ease-in-out var(--del, 0s) infinite alternate; }

.lane {
  position: fixed; left: 0; right: 0; bottom: var(--ground, 6px); height: var(--H, 88px); z-index: 2; pointer-events: none; overflow-x: clip;   /* pups wait just off-screen */
  --W: calc(var(--H, 88px) * 247 / 357);
  --u: calc(var(--H, 88px) / 90);
}
/* everything that stands in the plots sits on the plot floor, a little above the path (--pb is in lane units) */
.prop { position: absolute; bottom: calc(var(--u) * var(--pb, 22)); left: var(--px, 0px); transform: translateX(-50%); }
.prop--sun { width: calc(var(--u) * 73); height: calc(var(--u) * 46); --pb: 21; }
.plant { position: absolute; bottom: 0; transform-origin: 50% 100%; animation: sway var(--dur) ease-in-out var(--del) infinite alternate; --a: 1.8deg; width: calc(var(--u) * 22); height: calc(var(--u) * 40); }
.plant--1 { left: 0; --dur: 3.4s; --del: -1s; --lean: -1deg; }
.plant--2 { left: calc(var(--u) * 17); height: calc(var(--u) * 43); --dur: 4.1s; --del: -2.2s; --lean: .5deg; }
.plant--3 { left: calc(var(--u) * 34); --dur: 3.8s; --del: -.4s; --lean: -.5deg; }
.plant--4 { left: calc(var(--u) * 51); height: calc(var(--u) * 43); --dur: 3.6s; --del: -1.7s; --lean: 1deg; }
.prop--sun.perk .plant { animation: perk .8s cubic-bezier(.3, 1.6, .5, 1), sway var(--dur) ease-in-out var(--del) infinite alternate; }

.prop--nest { width: calc(var(--u) * 46); height: calc(var(--u) * 23); --pb: 20; }
.prop--nest svg { width: 100%; height: 100%; overflow: visible; }
.n-egg { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .3s cubic-bezier(.4, 0, .6, 1), opacity .3s; }
.n-egg.gone { transform: scale(0); opacity: 0; }

.prop--coop { width: calc(var(--u) * 78); height: calc(var(--u) * 34); --pb: 21; }
.hen {
  position: absolute; bottom: 0; left: var(--hl); width: calc(var(--u) * var(--hs));
  transform: translateX(var(--hx, 0px)); transition: transform 1.7s ease-in-out;
}
.hen--a { --hl: 0px; --hs: 32; --hb: #fffaf0; --hw: #ecd9b4; --hc: #d9382b; --pk: 1.9s; --pd: -.4s; }
.hen--b { --hl: calc(var(--u) * 26); --hs: 30; --hb: #c47a3f; --hw: #a46230; --hc: #d9382b; --pk: 2.3s; --pd: -1.3s; }
.hen--c { --hl: calc(var(--u) * 54); --hs: 22; --hb: #ffd84d; --hw: #f4b92f; --hc: #f2b52e; --pk: 1.6s; --pd: -.9s; }
.hen .hopper { display: block; }
.hen-svg { width: 100%; height: auto; overflow: visible; transition: transform .2s; transform-origin: 50% 100%; }
.hen.flip .hen-svg { transform: scaleX(-1); }
.hen.moving { animation: waddle .34s ease-in-out infinite; }
.h-body { fill: var(--hb); }
.h-wing { fill: var(--hw); }
.h-comb { fill: var(--hc); }
.hen-head { transform-origin: 31px 22px; animation: peck var(--pk) ease-in-out var(--pd) infinite; }
.prop--coop.feeding .hen-head { animation-duration: .5s; }

/* the short wheat plot, with something in it: two tidy rows that sway together */
.patch { position: absolute; bottom: calc(var(--u) * 21); left: var(--px, 0px); transform: translateX(-50%); width: calc(var(--u) * 46); height: calc(var(--u) * 34); border-radius: 10px; }
.patch::after { content: ""; position: absolute; inset: -6px -8px; }
.patch-stalks { position: absolute; inset: 0; pointer-events: none; }
.wrow { position: absolute; left: 0; right: 0; transform-origin: 50% 100%; animation: wsway 4.2s ease-in-out infinite alternate; }
.wrow--back { top: 0; bottom: calc(var(--u) * 6); animation-delay: -1.3s; }
.wrow--front { top: calc(var(--u) * 13); bottom: 0; animation-delay: -3s; animation-duration: 3.6s; }
.stk use, .f-sway use { stroke: currentColor; stroke-width: 5; stroke-linejoin: round; }
.stk { position: absolute; bottom: 0; transform-origin: 50% 100%; animation: rustle 4.4s ease-in-out var(--d, 0s) infinite; overflow: visible; }
.wrow--back .stk { height: calc(var(--u) * 26); width: calc(var(--u) * 4.2); color: #c8932f; }
.wrow--front .stk { height: calc(var(--u) * 21); width: calc(var(--u) * 3.4); color: #dcae4e; }
.stk--1 { left: calc(var(--u) * 5.5); --d: -.2s; }
.stk--2 { left: calc(var(--u) * 13); --d: -1.1s; }
.stk--3 { left: calc(var(--u) * 20.5); --d: -2.0s; }
.stk--4 { left: calc(var(--u) * 28); --d: -.6s; }
.stk--5 { left: calc(var(--u) * 35.5); --d: -1.6s; }
.stk--6 { left: calc(var(--u) * 9.25); --d: -.9s; }
.stk--7 { left: calc(var(--u) * 16.75); --d: -2.4s; }
.stk--8 { left: calc(var(--u) * 24.25); --d: -1.4s; }
.stk--9 { left: calc(var(--u) * 31.75); --d: -3s; }
.snake {
  position: absolute; left: 50%; bottom: calc(var(--u) * 4); width: calc(var(--u) * 46); pointer-events: none;
  opacity: 0; transform: translate(-50%, 55%) scale(.55); transform-origin: 50% 100%;
}
.snake svg { width: 100%; height: auto; overflow: visible; transform-origin: 50% 100%; }
.patch.up .snake { opacity: 1; transform: translate(-50%, -4%) scale(1); transition: transform .5s cubic-bezier(.34, 1.6, .5, 1), opacity .12s; }
.patch.up .snake svg { animation: snake-sway 1s ease-in-out infinite alternate; }
.patch.gone .snake { opacity: 0; transform: translate(-50%, 40%) scale(.5); transition: transform .6s ease-in, opacity .45s .15s; }
.patch.up .stk { animation-duration: 1.1s; }

/* sprouts that grow where the rain lands, always on the grass verge between the path and the plots */
.fl { position: absolute; bottom: var(--fb); left: var(--fx); width: calc(var(--u) * var(--fs)); margin-left: calc(var(--u) * var(--fs) / -2); transform-origin: 50% 100%; }
.fl svg { width: 100%; height: auto; overflow: visible; transform-origin: 50% 100%; animation: sway 3.2s ease-in-out var(--fd, 0s) infinite alternate; --a: 3.5deg; }

/* ------------------------------------------------------------ Farmer Lola */
.actor { position: absolute; bottom: 0; left: 0; z-index: 3; width: var(--W); height: var(--H); transform: translateX(var(--x, 0px)); will-change: transform; }
.pose { position: absolute; inset: 0; transform-origin: 50% 100%; }
.lola-btn {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none;
  cursor: pointer; pointer-events: auto; overflow: visible; border-radius: 14px; -webkit-tap-highlight-color: transparent;
}
.lola-btn::after { content: ""; position: absolute; inset: -6px -9px; }

/* She is a sprite: three strips of six equal cells (247 x 357), shown one cell at a time.
   --W is the cell width and --H the cell height, both set on the lane from layout().
   walk.webp   0-5 walk cycle (faces right)       poses.webp  0 idle, 1 blink, 2-3 wave, 4 umbrella, 5 eek
   chores.webp 0-1 watering, 2-3 feeding, 4 egg basket, 5 cheer (all face right) */
.lola-flip, .lola-body, .lola-sprite { position: absolute; inset: 0; display: block; }
.lola-flip::before {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: -1%; height: 5%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59, 35, 20, .3), rgba(59, 35, 20, 0));
}
.actor:not(.ready) .lola-flip { visibility: hidden; }
.lola-body { transform-origin: 50% 100%; animation: l-sway 5.2s ease-in-out infinite alternate; }
.lola-sprite {
  background: url(/farm/sprites/poses.webp) no-repeat 0 0 / calc(var(--W) * 6) var(--H);
}

/* turn: only the side-view strips are mirrored; the front poses never are */
.actor.left.walking .lola-flip, .actor.left.pose-water .lola-flip, .actor.left.pose-feed .lola-flip,
.actor.left.pose-eggs .lola-flip, .actor.left.pose-eggs-done .lola-flip, .actor.left.pose-cheer .lola-flip, .actor.left.pose-pet .lola-flip { transform: scaleX(-1); }

/* standing still: idle, with a blink every few seconds (the class comes from site.js) */
.actor.blink .lola-sprite { background-position-x: calc(var(--W) * -1); }
.actor.talking .lola-body { animation: l-talk .34s ease-in-out infinite alternate; }

/* walking */
.actor.walking .lola-body { animation: none; }
.actor.walking .lola-sprite {
  background-image: url(/farm/sprites/walk.webp);
  animation: l-walk .9s steps(6) infinite;
}
/* hurrying to the rain: the same walk strip, stepped faster (--rd from site.js), with a little forward lean and bounce */
.actor.walking.running .lola-sprite { animation-duration: var(--rd, .36s); }
.actor.walking.running .lola-body { animation: l-run calc(var(--rd, .36s) / 2) ease-in-out infinite alternate; }
/* watering the sunflowers: can tilts further, back, further... */
.actor.pose-water .lola-sprite { background-image: url(/farm/sprites/chores.webp); background-position-x: 0; animation: l-water .9s step-end infinite; }
/* feeding the hens: arm drawn back, then the toss */
.actor.pose-feed .lola-sprite { background-image: url(/farm/sprites/chores.webp); background-position-x: calc(var(--W) * -2); animation: l-feed .95s step-end infinite; }
/* collecting eggs */
.actor.pose-eggs .lola-sprite { background-image: url(/farm/sprites/chores.webp); background-position-x: calc(var(--W) * -4); }
.actor.pose-eggs-done .lola-sprite { background-image: url(/farm/sprites/chores.webp); background-position-x: calc(var(--W) * -5); }
.actor.pose-eggs-done .lola-body { animation: l-proud 1.1s ease-in-out infinite; }
/* hello */
.actor.pose-wave .lola-sprite { background-position-x: calc(var(--W) * -2); animation: l-wave .8s step-end infinite; }
/* rain: umbrella up */
.actor.pose-umb .lola-sprite { background-position-x: calc(var(--W) * -4); }
.actor.pose-umb .lola-body { animation: l-pop .45s cubic-bezier(.34, 1.6, .5, 1), l-sway 5.2s ease-in-out .45s infinite alternate; }
.actor.pose-umb.talking .lola-body { animation: l-talk .34s ease-in-out infinite alternate; }
/* EEK, and the finale cheer */
.actor.pose-eek .lola-sprite { background-position-x: calc(var(--W) * -5); }
.actor.pose-eek .lola-body { animation: l-hop .34s ease-in-out infinite; }
.actor.pose-cheer .lola-sprite { background-image: url(/farm/sprites/chores.webp); background-position-x: calc(var(--W) * -5); }
.actor.pose-cheer .lola-body { animation: l-cheer .5s ease-in-out infinite; }

/* petting the pups (pet.webp, side view facing right): 0 reach, 1 mid-stroke, 2 laughing, 3 calling them over.
   Kneeling alternates 0 and 1 (the stroke); site.js adds .pet-call or .pet-laugh for the other two frames.
   Her idle sway is switched off so her hand never drifts off the pup's head. */
.actor.pose-pet .lola-sprite { background-image: url(/farm/sprites/pet.webp); background-size: calc(var(--W) * 4) var(--H); background-position-x: 0; animation: l-pet .8s step-end infinite; }
.actor.pose-pet .lola-body, .actor.pose-pet.talking .lola-body { animation: none; }
.actor.pose-pet.pet-call .lola-sprite { animation: none; background-position-x: calc(var(--W) * -3); }
.actor.pose-pet.pet-laugh .lola-sprite { animation: none; background-position-x: calc(var(--W) * -2); }

/* the tab is hidden: the sprite's own CSS animations rest with it */
html.tab-hidden .actor .lola-body, html.tab-hidden .actor .lola-sprite, html.tab-hidden .pup *, html.tab-hidden .pup *::before { animation-play-state: paused; }

/* ------------------------------------------------------------ the pups
   dog-white.webp / dog-brown.webp (Lola's own dogs): six cells of 174 x 153, drawn at Lola's own pixel scale, so site.js sets --Wd / --Hd on the lane
   from her height. 0-3 run (facing right), 4 sitting with tongue out, 5 sitting in bliss. The sprite is mirrored with .flip.
   The picture sits under Farmer Lola (her hand rests over a head) and the .pup-hit button above her, so a tap always reaches a pup. */
.pup { position: absolute; bottom: var(--raise, 0px); left: 0; z-index: 2; width: var(--Wd); height: var(--Hd); transform: translateX(var(--x, 0px)); will-change: transform; pointer-events: none; }
.pup.rear { z-index: 1; }
.pup-hop, .pup-flip, .pup-body, .pup-sprite { position: absolute; inset: 0; display: block; }
.pup-hop, .pup-body { transform-origin: 50% 100%; }
.pup.flip .pup-flip { transform: scaleX(-1); }
.pup-flip::before {
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -3%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59, 35, 20, .32), rgba(59, 35, 20, 0));
}
.pup-sprite { background: url(/farm/sprites/dog-white.webp) no-repeat 0 0 / calc(var(--Wd) * 6) var(--Hd); }
.pup--brown .pup-sprite { background-image: url(/farm/sprites/dog-brown.webp); }
.pup.run .pup-sprite { animation: d-run .42s steps(4) infinite; }
.pup.run .pup-body { animation: d-bounce .21s ease-in-out infinite alternate; }
.pup.sit .pup-sprite { background-position-x: calc(var(--Wd) * -4); }
.pup.bliss .pup-sprite { background-position-x: calc(var(--Wd) * -5); }
.pup.sit.excited .pup-sprite, .pup.bliss.excited .pup-sprite { background-position-x: calc(var(--Wd) * -4); }
.pup.run.excited .pup-sprite { animation-duration: .3s; }
.pup.excited .pup-hop { animation: d-hop .5s cubic-bezier(.3, 0, .4, 1); }
.pup-hit {
  appearance: none; -webkit-appearance: none; position: absolute; bottom: var(--raise, 0px); left: 0; z-index: 4; margin: 0; padding: 0; border: 0; background: none;
  width: var(--Wd); height: var(--Hd); transform: translateX(var(--x, 0px)); will-change: transform; cursor: pointer; pointer-events: auto; border-radius: 12px; -webkit-tap-highlight-color: transparent;
}
.pup-hit[hidden] { display: none; }
.pup-hit::after { content: ""; position: absolute; inset: min(0px, calc((var(--Hd) - 44px) / 2)) min(0px, calc((var(--Wd) - 44px) / 2)); }
.pup-hit:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #2a4a2c; }
.fx .woof {
  font-family: var(--hand); font-weight: 700; font-size: 20px; line-height: 1; white-space: nowrap; color: var(--ink);
  padding: 4px 9px 5px; border-radius: 12px; background: #fffaf0; border: 2px solid #b9823f; box-shadow: 0 2px 0 rgba(120, 75, 30, .35);
}
.fx .pheart { color: #e8607a; }
.fx .pheart svg { width: 100%; height: 100%; }

/* ------------------------------------------------------------ bubble, counter, fx */
.bubble {
  position: fixed; left: 0; top: 0; z-index: 8; max-width: min(214px, calc(100vw - 20px)); padding: 8px 13px 9px;
  border-radius: 16px; background: #fffaf0; color: var(--ink); border: 2px solid #b9823f;
  box-shadow: 0 3px 0 rgba(120, 75, 30, .35), 0 12px 18px -8px rgba(60, 30, 8, .5);
  font-family: var(--hand); font-weight: 700; font-size: 21px; line-height: 1.1; text-align: center;
  pointer-events: none; opacity: 0; visibility: hidden; transform: scale(.7); transform-origin: var(--tx, 50%) var(--ty, 100%);
  transition: opacity .18s, transform .3s cubic-bezier(.34, 1.56, .64, 1), visibility 0s .3s;
}
.bubble.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.bubble::after { content: ""; position: absolute; width: 12px; height: 12px; background: #fffaf0; border: 2px solid #b9823f; border-top: 0; border-left: 0; }
.bubble[data-side="down"]::after { bottom: -8px; left: calc(var(--tail, 50%) - 6px); transform: rotate(45deg); }
.bubble[data-side="up"]::after { top: -8px; left: calc(var(--tail, 50%) - 6px); transform: rotate(225deg); }
/* data-side says where the bubble sits relative to the speaker, so the tail goes on the edge facing her */
.bubble[data-side="right"]::after { left: -8px; top: calc(var(--tail, 50%) - 6px); transform: rotate(135deg); }
.bubble[data-side="left"]::after { right: -8px; top: calc(var(--tail, 50%) - 6px); transform: rotate(-45deg); }

/* the egg-hunt pill: a hint at first, then the counter. It sits at the very top, over the bunting, clear of the postcard. */
.eggs {
  appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer; text-align: left;
  position: fixed; left: 50%; top: calc(5px + env(safe-area-inset-top, 0px)); z-index: 6; display: inline-flex; align-items: center; gap: 7px;
  max-width: calc(100vw - 12px); min-height: 28px; white-space: nowrap;
  padding: 5px 13px 5px 10px; border-radius: 99px; background: rgba(255, 250, 240, .96); color: var(--ink);
  font: 700 12px/1.15 var(--sans); letter-spacing: .005em; pointer-events: auto; -webkit-tap-highlight-color: transparent;
  border: 1.5px solid rgba(185, 130, 63, .6); box-shadow: 0 2px 0 rgba(120, 75, 30, .3), 0 8px 12px -6px rgba(60, 30, 8, .45);
  translate: -50% 0;
  animation: pop-in .55s cubic-bezier(.34, 1.56, .64, 1);
}
.eggs[hidden] { display: none; }
.eggs:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #2a4a2c; }
.eggs-icon { flex: none; width: 13px; height: 17px; }
.eggs-text { display: block; }
.eggs b { font-weight: 800; color: var(--barn); }
.eggs.hint { padding-right: 15px; }
.eggs.done { background: #ffe9a8; border-color: #e0a535; }
.eggs.bump { animation: bump .5s cubic-bezier(.34, 1.8, .5, 1); }
@media (min-width: 720px) {
  .eggs { top: 9px; font-size: 14px; padding: 7px 16px 7px 12px; }
}

.fx { position: fixed; inset: 0; z-index: 7; pointer-events: none; overflow: hidden; }
.fx i { position: absolute; left: 0; top: 0; display: block; pointer-events: none; }
.fx .dr { width: 5px; height: 8px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: #7db6e6; }
.fx .gr { width: 4px; height: 4px; border-radius: 50%; background: #e8b04a; }
.fx .pe svg, .fx .cf svg { width: 100%; height: 100%; }

/* the sign glows when it is time to open the gate */
.sign-wrap::before {
  content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 4px rgba(255, 238, 176, .95), 0 0 26px 10px rgba(255, 208, 96, .9), 0 0 60px 22px rgba(255, 224, 140, .55);
}
.sign-wrap.glow::before { animation: aura 1.25s ease-in-out infinite; }
.sign-wrap.glow-soft::before { animation: aura 1.1s ease-in-out 2; }

/* ------------------------------------------------------------ the mailbox at the end of the path */
/* It stands in the far right corner of the lane, under the windmill (its top is held just below the windmill's foot) and beyond
   Farmer Lola's walking range, which site.js shortens by the mailbox width so she never touches it. */
.mailbox {
  appearance: none; -webkit-appearance: none; font: inherit; color: inherit; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  position: absolute; right: 5px; bottom: max(0px, calc(4px - var(--ground, 6px))); z-index: 5; isolation: isolate; pointer-events: auto; -webkit-tap-highlight-color: transparent;
  height: max(44px, calc(var(--fh, 80px) * .8 - var(--ground, 6px) - 4px));
  aspect-ratio: 72 / 84; min-width: 44px; min-height: 44px;
  transform-origin: 50% 100%;
}
.mailbox::after { content: ""; position: absolute; inset: -4px -5px; }
/* wide screens: the mailbox is easier to spot (about 1.5x); site.js reads its width, so Farmer Lola keeps clear of it */
@media (min-width: 1000px) {
  .mailbox { height: calc(max(44px, calc(var(--fh, 80px) * .8 - var(--ground, 6px) - 4px)) * 1.5); }
}
@media (min-width: 1000px) and (max-width: 1099px) {
  .windmill { right: calc(3vw + 40px); }                /* leaves the bigger mailbox its corner */
}
.mb-art { position: relative; display: block; width: 100%; height: 100%; max-width: none; overflow: visible; filter: drop-shadow(0 2px 1.5px rgba(60, 30, 8, .3)); }
.mb-glow {
  position: absolute; z-index: -1; left: 50%; top: 40%; width: 230%; aspect-ratio: 1; margin: 0; translate: -50% -50%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 238, 160, 1), rgba(255, 214, 110, .6) 42%, rgba(255, 214, 110, 0));
  opacity: .55; animation: mb-glow 3.4s ease-in-out infinite alternate;
}
.mb-flag { transform-box: view-box; transform-origin: 16px 38px; animation: mb-flag 5.6s ease-in-out infinite; transition: transform .5s cubic-bezier(.34, 1.45, .5, 1); }
.mb-env { transform-box: view-box; transform-origin: 52px 22px; animation: mb-env 5.6s ease-in-out infinite; transition: transform .55s cubic-bezier(.3, 1.3, .5, 1); }
.mb-heart {
  position: absolute; z-index: 1; left: 58%; top: 4%; width: 16px; height: 16px; color: #e8607a; pointer-events: none; opacity: 0;
  animation: mb-heart 5.6s ease-out infinite;
}
.mb-heart--b { left: 30%; top: 12%; width: 11px; height: 11px; color: #f29bb0; animation-delay: .5s; }
.mailbox:hover .mb-glow, .mailbox:focus-visible .mb-glow { opacity: .95; }
.mailbox:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 12px; box-shadow: 0 0 0 6px #2a4a2c; }
.mailbox.ping .mb-flag, .mailbox.ping .mb-env { animation-duration: 1.8s; animation-iteration-count: 2; }
.mailbox.ping .mb-heart { animation-duration: 1.8s; animation-iteration-count: 2; }
/* opened: the flag drops and the envelope slides out */
.mailbox.open .mb-flag, .mailbox.open .mb-env, .mailbox.open .mb-heart { animation: none; }
.mailbox.open .mb-flag { transform: rotate(90deg); }
.mailbox.open .mb-env { transform: translate(7px, -9px) rotate(10deg); }
.mailbox.open .mb-heart { opacity: 0; }
.mailbox.open .mb-glow { opacity: 1; animation: none; }

/* ------------------------------------------------------------ the letter dialog */
dialog.letter { padding: 0; border: 0; background: transparent; color: inherit; overflow: visible; max-width: none; max-height: none; }
dialog.letter[open] {
  position: fixed; inset: 0; z-index: 20; width: 100%; height: 100%; margin: 0; padding: 26px 16px; overflow: auto; overscroll-behavior: contain;
  display: flex; -webkit-tap-highlight-color: transparent;
}
dialog.letter::backdrop { background: rgba(70, 36, 10, .56); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
dialog.letter .back-card { margin: auto; flex: none; animation: letter-in .5s cubic-bezier(.3, 1.35, .5, 1) both; }
.letter-x {
  appearance: none; -webkit-appearance: none; position: absolute; z-index: 5; top: 10px; right: 10px; width: 44px; height: 44px; margin: 0; padding: 0;
  display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: var(--barn-deep); background: #fff8ea;
  border: 2px solid rgba(178, 58, 43, .55); box-shadow: 0 2px 0 rgba(120, 75, 30, .3); -webkit-tap-highlight-color: transparent;
}
.letter-x svg { width: 20px; height: 20px; }
.letter-x:hover { background: #ffe9a8; }
.letter-x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px #2a4a2c; }
dialog.letter .note { padding-right: 34px; }
@media (max-height: 700px) {
  dialog.letter[open] { padding: 16px 14px; }
  .back-card { padding: 28px 20px 22px; }
  dialog.letter .note { font-size: 25px; line-height: 33px; margin-bottom: 16px; padding-right: 30px; background-image: repeating-linear-gradient(180deg, transparent 0 31px, rgba(150, 100, 50, .28) 31px 32.5px); }
  dialog.letter .packet-sub { padding: 6px 14px; }
  dialog.letter .sig { margin-top: 12px; font-size: 25px; }
  dialog.letter .packet .sunflower { width: 76px; height: 76px; margin: 4px 0 2px; }
}

/* ------------------------------------------------------------ keyframes (farm) */
@keyframes rain-fall { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 88% { opacity: 1; } 100% { transform: translateY(var(--fall)); opacity: 0; } }
@keyframes float-y { from { transform: translateY(-2px); } to { transform: translateY(3px); } }
@keyframes shiver { from { transform: translateX(-1px); } to { transform: translateX(1px); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 60% { transform: rotate(7deg); } }
@keyframes perk { 0% { transform: scale(1); } 40% { transform: scale(1.12, 1.08); } 100% { transform: scale(1); } }
@keyframes peck { 0%, 52% { transform: rotate(0); } 60% { transform: rotate(36deg); } 68% { transform: rotate(4deg); } 76% { transform: rotate(36deg); } 86%, 100% { transform: rotate(0); } }
@keyframes waddle { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -2px; rotate: 3deg; } }
@keyframes rustle { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-7deg); } 79% { transform: rotate(6deg); } 84% { transform: rotate(-5deg); } 89% { transform: rotate(3deg); } }
@keyframes snake-sway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes l-sway { from { transform: rotate(-.5deg) scale(1, 1); } to { transform: rotate(.6deg) scale(1.006, 1.014); } }
@keyframes l-talk { from { transform: translateY(0) scale(1, 1); } to { transform: translateY(-3%) scale(.995, 1.012); } }
@keyframes l-walk { from { background-position-x: 0; } to { background-position-x: calc(var(--W) * -6); } }
@keyframes l-water { 0% { background-position-x: 0; } 50% { background-position-x: calc(var(--W) * -1); } 100% { background-position-x: 0; } }
@keyframes l-feed { 0% { background-position-x: calc(var(--W) * -2); } 65% { background-position-x: calc(var(--W) * -3); } 100% { background-position-x: calc(var(--W) * -2); } }
@keyframes l-wave { 0% { background-position-x: calc(var(--W) * -2); } 50% { background-position-x: calc(var(--W) * -3); } 100% { background-position-x: calc(var(--W) * -2); } }
@keyframes l-pop { 0% { transform: scale(.9, .94); } 60% { transform: scale(1.04, 1.03); } 100% { transform: scale(1, 1); } }
@keyframes l-run { from { transform: translateY(0) rotate(2deg); } to { transform: translateY(-3.5%) rotate(4.5deg); } }
@keyframes l-pet { 0% { background-position-x: 0; } 50% { background-position-x: calc(var(--W) * -1); } 100% { background-position-x: 0; } }
@keyframes d-run { from { background-position-x: 0; } to { background-position-x: calc(var(--Wd) * -4); } }
@keyframes d-bounce { from { transform: translateY(0); } to { transform: translateY(-5%); } }
@keyframes d-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 18% { transform: translateY(0) scale(1.05, .93); } 50% { transform: translateY(calc(var(--Hd) * -.3)) scale(.97, 1.05); } 82% { transform: translateY(0) scale(1.05, .94); } }
@keyframes wsway { from { transform: skewX(-2.4deg); } to { transform: skewX(2.4deg); } }
@keyframes l-hop { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-6%) rotate(1.5deg); } }
@keyframes l-cheer { 0%, 100% { transform: translateY(0) scale(1.02, .98); } 50% { transform: translateY(-5%) scale(.99, 1.02); } }
@keyframes l-proud { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-2.5%) scale(1.01, 1.02); } }
@keyframes pop-in { 0% { scale: 0; opacity: 0; } 100% { scale: 1; opacity: 1; } }
@keyframes bump { 0% { scale: 1; } 40% { scale: 1.2; } 100% { scale: 1; } }
@keyframes mb-glow { from { opacity: .4; scale: .9; } to { opacity: 1; scale: 1.08; } }
@keyframes mb-flag { 0%, 56%, 100% { transform: rotate(0); } 61% { transform: rotate(-11deg); } 67% { transform: rotate(8deg); } 73% { transform: rotate(-6deg); } 79% { transform: rotate(3deg); } 85% { transform: rotate(0); } }
@keyframes mb-env { 0%, 56%, 100% { transform: translate(0, 0) rotate(0); } 62% { transform: translate(1px, -4px) rotate(5deg); } 69% { transform: translate(0, 0) rotate(-2deg); } 75% { transform: translate(1px, -2.5px) rotate(3deg); } 82% { transform: translate(0, 0) rotate(0); } }
@keyframes mb-heart { 0%, 64% { opacity: 0; transform: translate(0, 6px) scale(.3); } 72% { opacity: 1; transform: translate(2px, -4px) scale(1); } 100% { opacity: 0; transform: translate(10px, -30px) scale(.85) rotate(14deg); } }
@keyframes letter-in { 0% { opacity: 0; transform: translateY(26px) scale(.86) rotate(-3deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(1deg); } }
@keyframes aura { 0%, 100% { opacity: .2; transform: scale(1); } 50% { opacity: 1; transform: scale(1.025); } }

/* ------------------------------------------------------------ reduced motion: still, but still pretty */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .air { display: none; }
  .cloud--a { left: 12%; }
  .cloud--b { left: 70%; }
  .cloud--c { left: 42%; }
  .cloud--d { left: 84%; }
  .blades { transform: rotate(24deg); }
  .bit { display: none; }
  .psst .draw { stroke-dashoffset: 0; }
  .psst .head { opacity: 1; }
  .sign:hover .badge svg, .sign:focus-visible .badge svg { rotate: 0deg; scale: 1; }
  .drop { opacity: .7; transform: translateY(var(--sy, 0px)); }
  .rain.on { opacity: .5; }
  .windmill.whirl .whirl-ring { animation: none; }
  .windmill.whirl .blades { transform: rotate(18deg); }
  .sign-wrap.glow::before { opacity: .85; }
}

/* short phones: a smaller speech bubble leaves room under the handwritten note */
@media (max-height: 700px) and (max-width: 719px) {
  .bubble { font-size: 17px; padding: 6px 11px 7px; border-radius: 14px; }
}