:root {
  color-scheme: light;
  font-family: "Trebuchet MS", Arial, sans-serif;
  color: #283f32;
  background: #f6f2df;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; isolation: isolate; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.map, .wash, .weather { position: fixed; inset: 0; pointer-events: none; }
.map { z-index: -3; background: url("images.jpeg") left top / cover no-repeat; }
.wash {
  z-index: -2;
  background: linear-gradient(0deg, rgba(247, 245, 226, .94), rgba(251, 249, 235, .14) 18%);
}
/* The opaque patch follows the title's size in the cover-scaled map. */
.wash::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: max(35vw, 62.8vh);
  height: max(16vw, 29vh, 290px);
  background: #fbf9eb;
  box-shadow: 0 0 38px 35px #fbf9eb;
  border-bottom-right-radius: 32%;
}
.weather { z-index: 1; overflow: hidden; }
main { position: relative; z-index: 2; flex: 1; padding: 35px 4vw 70px; pointer-events: none; }
.welcome { text-align: center; width: min(480px, 37vw); animation: arrive 1.6s ease-out both; }
.ornament { display: flex; align-items: center; justify-content: center; gap: 19px; margin-bottom: 17px; }
.ornament span { width: 47px; height: 1px; background: #9e8c56; opacity: .55; }
.ornament svg { width: 39px; height: 39px; }
h1 { margin: 0; font-weight: 400; }
.eyebrow { display: block; margin-bottom: 16px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .33em; }
.name { display: block; font-family: Georgia, "Times New Roman", serif; font-size: clamp(42px, 4.6vw, 68px); line-height: 1.06; letter-spacing: -.048em; text-shadow: 0 2px 24px #faf7e5; }
.subtitle { margin: 19px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(29px, 2.6vw, 36px); font-style: italic; color: #96703c; letter-spacing: -.04em; }
.flourish { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 20px; }
.flourish span { width: 29px; height: 1px; background: #a89c6b; opacity: .6; }
.flourish i { width: 5px; height: 5px; background: #a89c6b; transform: rotate(45deg); }
footer { position: relative; z-index: 2; padding: 24px 20px 28px; text-align: center; font-size: 13px; line-height: 1.9; letter-spacing: .015em; }
footer p { margin: 0; }
footer a { color: inherit; text-decoration-color: #8c9b7b; text-underline-offset: 4px; transition: color .2s; }
footer a:hover { color: #855d29; }
footer a:focus-visible { outline: 2px solid #47624b; outline-offset: 5px; border-radius: 2px; }
.weather-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 100px);
  height: var(--size, 100px);
  filter: drop-shadow(0 1px 1px #ffffffb3) drop-shadow(0 5px 7px #263e3a45);
  animation: wander var(--duration, 65s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
  transform: translate3d(calc(var(--x1) * (100vw - var(--size))), calc(var(--y1) * (100svh - var(--size) - 70px)), 0);
}
.weather-icon svg { width: 100%; height: 100%; overflow: visible; }
.rainbow { --size: 146px; --duration: 76s; --delay: -8s; --x1: .40; --y1: .12; --x2: .82; --y2: .28; --x3: .53; --y3: .82; --x4: .12; --y4: .63; }
/* Keep the rainbow vector sharp instead of filtering a cached bitmap. */
.rainbow { filter: none; will-change: auto; --tilt-start: 0deg; --tilt-quarter: 0deg; --tilt-half: 0deg; --tilt-end: 0deg; }
.rainbow svg { shape-rendering: geometricPrecision; }
.sunshine { --size: 114px; --duration: 89s; --delay: -19s; --x1: .84; --y1: .08; --x2: .63; --y2: .46; --x3: .17; --y3: .75; --x4: .49; --y4: .18; }
.little-cloud { --size: 82px; --duration: 97s; --delay: -42s; --x1: .31; --y1: .37; --x2: .89; --y2: .18; --x3: .74; --y3: .64; --x4: .08; --y4: .83; }
.rain { --size: 103px; --duration: 83s; --delay: -11s; --x1: .03; --y1: .50; --x2: .38; --y2: .83; --x3: .84; --y3: .53; --x4: .52; --y4: .32; }
.snow { --size: 75px; --duration: 91s; --delay: -27s; --x1: .93; --y1: .37; --x2: .70; --y2: .81; --x3: .22; --y3: .52; --x4: .62; --y4: .06; }
.wind { --size: 102px; --duration: 103s; --delay: -16s; --x1: .13; --y1: .91; --x2: .59; --y2: .64; --x3: .87; --y3: .14; --x4: .39; --y4: .44; }
.low-cloud { --size: 111px; --duration: 87s; --delay: -35s; --x1: .73; --y1: .92; --x2: .11; --y2: .66; --x3: .49; --y3: .24; --x4: .94; --y4: .60; }
@keyframes wander {
  0%, 100% { transform: translate3d(calc(var(--x1) * (100vw - var(--size))), calc(var(--y1) * (100svh - var(--size) - 70px)), 0) rotate(var(--tilt-start, -5deg)); }
  25% { transform: translate3d(calc(var(--x2) * (100vw - var(--size))), calc(var(--y2) * (100svh - var(--size) - 70px)), 0) rotate(var(--tilt-quarter, 6deg)); }
  50% { transform: translate3d(calc(var(--x3) * (100vw - var(--size))), calc(var(--y3) * (100svh - var(--size) - 70px)), 0) rotate(var(--tilt-half, -3deg)); }
  75% { transform: translate3d(calc(var(--x4) * (100vw - var(--size))), calc(var(--y4) * (100svh - var(--size) - 70px)), 0) rotate(var(--tilt-end, 4deg)); }
}
@keyframes arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .wash::before { width: max(85vw, 62.8vh); height: 285px; border-bottom-right-radius: 25%; }
  main { padding: 28px 20px 60px; }
  .welcome { width: 100%; max-width: 400px; }
  .eyebrow { font-size: 10px; margin-bottom: 15px; }
  .name { font-size: clamp(40px, 10.6vw, 62px); }
  .ornament { margin-bottom: 16px; }
  .ornament svg { width: 32px; height: 32px; }
  .subtitle { margin-top: 17px; }
  .rainbow { --size: 94px; }
  .sunshine { --size: 75px; }
  .little-cloud { --size: 58px; }
  .rain { --size: 69px; }
  .snow { --size: 48px; }
  .wind { --size: 70px; }
  .low-cloud { --size: 77px; }
  footer { font-size: 11px; padding: 20px 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .weather-icon { will-change: auto; } }