/* Leaf Peeper: peak foliage on Finger Lakes hillsides. Classic layout, with an autumn-hillside header,
   leaves drifting down through it, and a handwritten note here and there. */

:root[data-skin="leafpeeper"] {
  --bg: #fbf6ee;
  --surface: #ffffff;
  --ink: #2d2118;
  --muted: #6e5c4c;
  --line: #ecdfcc;
  --brand: #8f3214;
  --brand-ink: #fff8ee;
  --accent: #e8a33c;
  --accent-ink: #2d2118;
  --chip: #f4eadb;
  --chip-on: #a2401c;
  --chip-on-ink: #fff8ee;
  --shadow: 0 1px 2px rgba(90, 40, 10, .06), 0 8px 22px -14px rgba(90, 40, 10, .3);
  --cat-music: #b3372a; --cat-arts: #2f6f73; --cat-family: #d9701f; --cat-learning: #546a99;
  --cat-sports: #567a35; --cat-food: #b07c12; --cat-community: #7d6a5b;
  --leaf-red: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C7 5 4 10 5 16c1 4 5 6 8 5 5-2 7-8 4-13-1-2-3-4-5-6z' fill='%23c0392b'/><path d='M12.5 4C11.5 10 10.5 15 7.5 21' stroke='%23862417' stroke-width='1.2' fill='none'/></svg>");
  --leaf-orange: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C7 5 4 10 5 16c1 4 5 6 8 5 5-2 7-8 4-13-1-2-3-4-5-6z' fill='%23e67e22'/><path d='M12.5 4C11.5 10 10.5 15 7.5 21' stroke='%23a5560f' stroke-width='1.2' fill='none'/></svg>");
  --leaf-gold: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2C7 5 4 10 5 16c1 4 5 6 8 5 5-2 7-8 4-13-1-2-3-4-5-6z' fill='%23f1b434'/><path d='M12.5 4C11.5 10 10.5 15 7.5 21' stroke='%23b3801a' stroke-width='1.2' fill='none'/></svg>");
  color-scheme: light;
}

[data-skin="leafpeeper"] body { font-family: "Work Sans", system-ui, sans-serif; }

/* ---- Masthead: an autumn hillside with leaves on the breeze ---- */
[data-skin="leafpeeper"] .masthead {
  background:
    radial-gradient(500px 220px at 90% 110%, rgba(241, 180, 52, .45), transparent 70%),
    linear-gradient(160deg, #521b0b 0%, #8f3214 45%, #c2581f 82%, #df8b33 100%);
  padding: 42px 0 74px;
}
[data-skin="leafpeeper"] .masthead-art {   /* rolling autumn hills along the bottom */
  display: block; position: absolute; inset: 0; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'><path d='M0 46 C 180 18 360 30 520 44 S 860 14 1040 34 S 1320 22 1440 36 V90 H0Z' fill='%23702510' opacity='.6'/><path d='M0 62 C 220 38 420 70 640 54 S 1060 36 1240 56 S 1400 50 1440 54 V90 H0Z' fill='%23b4521c'/><path d='M0 62 C 220 38 420 70 640 54 S 1060 36 1240 56 S 1400 50 1440 54' fill='none' stroke='%23e8a33c' stroke-width='3' stroke-dasharray='1 9' stroke-linecap='round'/><path d='M0 78 C 300 64 760 90 1440 72 V90 H0Z' fill='%23fbf6ee'/></svg>") center bottom / 100% 78px no-repeat;
}
[data-skin="leafpeeper"] .masthead-art::before,
[data-skin="leafpeeper"] .masthead-art::after {
  content: ""; position: absolute; left: 0; right: 0; top: -40px; height: calc(100% + 80px);
  background:
    var(--leaf-red) 9% 12% / 30px 30px no-repeat,
    var(--leaf-gold) 36% 58% / 22px 22px no-repeat,
    var(--leaf-orange) 61% 18% / 34px 34px no-repeat,
    var(--leaf-gold) 86% 64% / 26px 26px no-repeat,
    var(--leaf-orange) 2% 66% / 24px 24px no-repeat,
    var(--leaf-red) 22% 36% / 20px 20px no-repeat,
    var(--leaf-gold) 47% 88% / 28px 28px no-repeat,
    var(--leaf-red) 73% 44% / 22px 22px no-repeat;
  opacity: .92;
}
[data-skin="leafpeeper"] .masthead-art::after {
  background:
    var(--leaf-orange) 24% 74% / 24px 24px no-repeat,
    var(--leaf-red) 50% 6% / 28px 28px no-repeat,
    var(--leaf-gold) 74% 38% / 32px 32px no-repeat,
    var(--leaf-red) 96% 14% / 20px 20px no-repeat,
    var(--leaf-gold) 14% 48% / 26px 26px no-repeat,
    var(--leaf-orange) 38% 24% / 22px 22px no-repeat,
    var(--leaf-red) 62% 80% / 24px 24px no-repeat,
    var(--leaf-orange) 90% 92% / 30px 30px no-repeat;
  opacity: .8;
}
@media (prefers-reduced-motion: no-preference) {
  [data-skin="leafpeeper"] .masthead-art::before { animation: leaf-drift 16s linear infinite; }
  [data-skin="leafpeeper"] .masthead-art::after { animation: leaf-drift 23s linear infinite -9s; }
}
@keyframes leaf-drift {
  0%   { transform: translate(0, -30%) rotate(0deg); }
  50%  { transform: translate(24px, 0) rotate(8deg); }
  100% { transform: translate(-10px, 30%) rotate(-4deg); }
}

[data-skin="leafpeeper"] .dateline {
  display: block; margin: 0 0 4px; color: #ffd27a;
  font: 700 22px/1.1 Caveat, cursive;
}
[data-skin="leafpeeper"] .masthead h1 {
  font: 400 clamp(34px, 6vw, 54px)/1.05 "Young Serif", Georgia, serif; letter-spacing: -.01em;
  text-shadow: 0 2px 14px rgba(60, 15, 0, .35);
}
[data-skin="leafpeeper"] .tagline { color: #ffe6c4; }

/* ---- Controls ---- */
[data-skin="leafpeeper"] .btn { font-family: "Work Sans", sans-serif; }
[data-skin="leafpeeper"] .btn-accent { box-shadow: 0 6px 16px -6px rgba(60, 20, 0, .6); }
[data-skin="leafpeeper"] .chips button { font: 500 14px "Work Sans", sans-serif; }
[data-skin="leafpeeper"] .search input:focus, [data-skin="leafpeeper"] select:focus {
  outline: none; border-color: #e8a33c; box-shadow: 0 0 0 3px rgba(232, 163, 60, .22);
}

/* ---- Day headings with a handwritten "today" ---- */
[data-skin="leafpeeper"] .day h2 { font: 400 24px/1.2 "Young Serif", Georgia, serif; }
[data-skin="leafpeeper"] .day h2 .rel {
  font: 700 21px/1 Caveat, cursive; letter-spacing: 0; text-transform: none; color: #c2581f;
  transform: rotate(-4deg); display: inline-block;
}

/* ---- Cards: a leaf lands in the corner on hover ---- */
[data-skin="leafpeeper"] .card { border-radius: 14px; position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
[data-skin="leafpeeper"] .card::after {
  content: ""; position: absolute; right: 10px; bottom: 8px; width: 18px; height: 18px;
  background: var(--leaf-orange) center / contain no-repeat;
  opacity: 0; transform: translate(10px, -20px) rotate(-60deg); transition: opacity .35s ease, transform .5s ease;
}
[data-skin="leafpeeper"] .card:nth-child(3n)::after { background-image: var(--leaf-red); }
[data-skin="leafpeeper"] .card:nth-child(3n+1)::after { background-image: var(--leaf-gold); }
[data-skin="leafpeeper"] .card:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -16px rgba(90, 40, 10, .4); }
[data-skin="leafpeeper"] .card:hover::after { opacity: 1; transform: translate(0, 0) rotate(12deg); }
[data-skin="leafpeeper"] .time { color: var(--brand); font-weight: 600; }
[data-skin="leafpeeper"] .card h3 { font-weight: 600; }
[data-skin="leafpeeper"] .thumb { border-radius: 12px; }
[data-skin="leafpeeper"] .tag.cat { background: color-mix(in srgb, var(--c) 13%, #fff); color: var(--c); }
[data-skin="leafpeeper"] .tag.free { background: #eef3e2; color: #4b6a2c; }

/* ---- Dialog, footer, sub-pages ---- */
[data-skin="leafpeeper"] dialog { border-radius: 18px; }
[data-skin="leafpeeper"] .d-content h2 { font: 400 28px/1.15 "Young Serif", Georgia, serif; }
[data-skin="leafpeeper"] .footer::before {
  content: "See you on the trail."; display: block; font: 700 22px/1 Caveat, cursive; color: #c2581f; margin-bottom: 10px;
}
[data-skin="leafpeeper"] .page h1 { font: 400 38px/1.1 "Young Serif", Georgia, serif; }