/* Halloween: Cartoon ("Pumpkin Patch Storybook"). Preview skin over v4. Remove data-season to restore v4. */
html[data-season="halloween-cartoon"] {
  --plum: #24173A; --plum-2: #2F1F4A; --card: #3A2A5C; --cream: #FFF6E5; --lilac: #D9CCEB;
  --pumpkin: #FF9A2E; --lime: #B7F36B; --inkc: #1A1029;
  --sand: var(--plum); --seafoam: var(--plum-2); --ink: var(--cream); --muted: var(--lilac);
  --kelp: var(--pumpkin); --sea: var(--pumpkin); --border: var(--inkc);
  --sea-deep: var(--cream); --driftwood: var(--lilac); --kelp-bright: var(--pumpkin); --sea-mid: var(--pumpkin);
  --seafoam-mid: var(--plum-2); --kelp-tint: rgb(255 154 46 / .12); --foam: var(--plum-2);
  --display: "Luckiest Guy", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font: "Nunito", "Segoe UI", system-ui, sans-serif;
}
html[data-season="halloween-cartoon"] body { background: var(--plum); color: var(--cream); }
html[data-season="halloween-cartoon"] a { color: var(--pumpkin); }
html[data-season="halloween-cartoon"] a:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; }
html[data-season="halloween-cartoon"] .hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: .02em; line-height: 1.15; color: var(--cream); text-shadow: 0 3px 0 var(--inkc); }
html[data-season="halloween-cartoon"] .section h2 { font-family: var(--display); font-weight: 400; font-size: clamp(1.8rem, 3.2vw, 2.4rem); letter-spacing: .02em; line-height: 1.15; color: var(--cream); }
html[data-season="halloween-cartoon"] .section-alt { background: var(--plum-2); }

/* 1. Style bar */
html[data-season="halloween-cartoon"] .style-bar { background: var(--inkc); border-bottom: 3px solid #000; color: var(--cream); }
html[data-season="halloween-cartoon"] .style-bar-label { color: var(--lilac); }
html[data-season="halloween-cartoon"] .style-bar-links a { color: var(--cream); background: transparent; border: 2px solid var(--cream); font-weight: 700; }
html[data-season="halloween-cartoon"] .style-bar-links a:hover, html[data-season="halloween-cartoon"] .style-bar-links a:focus-visible { color: var(--pumpkin); border-color: var(--pumpkin); background: transparent; }
html[data-season="halloween-cartoon"] .season-nav-links a[aria-current="page"] { background: var(--pumpkin); color: var(--inkc); border-color: var(--pumpkin); }

/* 2. Hero: purple river fog, moon + stars, bats, fir band, pumpkin patch */
html[data-season="halloween-cartoon"] .hero { min-height: min(86vh, 44rem); padding-bottom: 5.5rem; color: var(--cream); }
html[data-season="halloween-cartoon"] .hero-bg { background: url("../images/season/hero-halloween.jpg") center / cover no-repeat; filter: brightness(.5) hue-rotate(230deg) saturate(1.4); }
html[data-season="halloween-cartoon"] .hero-overlay { background:
  url("../images/season/firs.svg") left bottom / auto 120px repeat-x,
  radial-gradient(28rem 24rem at 50% 50%, rgb(36 23 58 / .84), rgb(36 23 58 / .5) 70%, transparent),
  linear-gradient(180deg, rgb(36 23 58 / .45), rgb(36 23 58 / .86) 60%); }
html[data-season="halloween-cartoon"] .hero::before { content: ""; position: absolute; z-index: 0; top: 2rem; right: 5%; width: 26rem; height: 16rem; pointer-events: none;
  background: url("../images/season/moon.svg") right 1rem top 0 / 160px 160px no-repeat, url("../images/season/stars.svg") left top / contain no-repeat; }
html[data-season="halloween-cartoon"] .hero::after { content: ""; position: absolute; z-index: 0; top: 8.5rem; right: calc(5% + 12rem); width: 110px; height: 60px; pointer-events: none;
  background: url("../images/season/bats-pair.svg") center / contain no-repeat; }
html[data-season="halloween-cartoon"] .hero-overlay::before, html[data-season="halloween-cartoon"] .hero-overlay::after { content: ""; position: absolute; bottom: .4rem; pointer-events: none; background: center bottom / contain no-repeat; }
html[data-season="halloween-cartoon"] .hero-overlay::before { left: 2%; width: 360px; height: 150px; background-image: url("../images/season/patch-left.svg"); }
html[data-season="halloween-cartoon"] .hero-overlay::after { right: 3%; width: 220px; height: 120px; background-image: url("../images/season/patch-right.svg"); }
html[data-season="halloween-cartoon"] .hero-inner { z-index: 1; }
html[data-season="halloween-cartoon"] .hero .hero-hello { color: var(--pumpkin); opacity: 1; font-weight: 700; }
html[data-season="halloween-cartoon"] .hero .lede { color: var(--cream); }
html[data-season="halloween-cartoon"] .hero-logo-mark { border: 3px solid var(--inkc); box-shadow: 0 5px 0 var(--inkc); }
html[data-season="halloween-cartoon"] .btn { border-radius: 999px; font-weight: 800; }
html[data-season="halloween-cartoon"] .btn-primary { background: var(--pumpkin); color: var(--inkc); border: 3px solid var(--inkc); box-shadow: 0 4px 0 var(--inkc); transition: transform .15s ease, box-shadow .15s ease; }
html[data-season="halloween-cartoon"] .btn-primary:hover, html[data-season="halloween-cartoon"] .btn-primary:focus-visible { background: #FFAD52; color: var(--inkc); transform: translateY(2px); box-shadow: 0 2px 0 var(--inkc); }
html[data-season="halloween-cartoon"] .hero .btn-ghost { background: var(--plum-2); color: var(--cream); border: 3px solid var(--cream); box-shadow: 0 4px 0 var(--inkc); }
html[data-season="halloween-cartoon"] .hero .btn-ghost:hover, html[data-season="halloween-cartoon"] .hero .btn-ghost:focus-visible { color: var(--pumpkin); border-color: var(--pumpkin); background: var(--plum-2); }
@media (max-width: 639px) {
  html[data-season="halloween-cartoon"] .hero { padding-bottom: 9rem; }
  html[data-season="halloween-cartoon"] .hero::before { width: 12rem; height: 9rem; right: 3%; top: 1.2rem; background-size: 96px 96px, contain; background-position: right .5rem top 0, left top; }
  html[data-season="halloween-cartoon"] .hero::after { top: 6.2rem; right: 7.5rem; width: 70px; height: 38px; }
  html[data-season="halloween-cartoon"] .hero-overlay { background-size: auto 80px, auto, auto; }
  html[data-season="halloween-cartoon"] .hero-overlay::before { left: 1%; width: 216px; height: 90px; }
  html[data-season="halloween-cartoon"] .hero-overlay::after { right: 2%; width: 128px; height: 70px; }
}

/* 3. Photo band: real boathouse in a playful frame */
html[data-season="halloween-cartoon"] .photo-band { background: var(--plum); }
html[data-season="halloween-cartoon"] .photo-band-figure { position: relative; transform: rotate(-1deg); border: 6px solid var(--cream); outline: 3px solid var(--inkc); box-shadow: 8px 8px 0 var(--inkc); margin: 1.2rem; overflow: visible; }
html[data-season="halloween-cartoon"] .photo-band-figure::after { content: ""; position: absolute; top: -18px; right: -14px; width: 44px; height: 30px; background: url("../images/season/bat.svg") center / contain no-repeat; transform: rotate(12deg); pointer-events: none; }
html[data-season="halloween-cartoon"] .photo-band-copy { background: linear-gradient(rgb(47 31 74 / .8), rgb(47 31 74 / .8)), url("../images/season/stars-tile.svg") 0 0 / 120px 120px repeat, var(--plum-2); }
html[data-season="halloween-cartoon"] .photo-band-copy .photo-band-line { font-family: var(--font); font-style: italic; font-weight: 700; color: var(--cream); font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.35; }

/* 4. Help: vine across the top */
html[data-season="halloween-cartoon"] #help { position: relative; background: var(--plum); padding-top: calc(3.2rem + 56px); }
html[data-season="halloween-cartoon"] #help::before { content: ""; position: absolute; left: 0; right: 0; top: .4rem; height: 56px; background: url("../images/season/vine.svg") left top / auto 56px repeat-x; pointer-events: none; }
html[data-season="halloween-cartoon"] .section .wrap.narrow > p, html[data-season="halloween-cartoon"] .section-intro, html[data-season="halloween-cartoon"] .price-group-blurb, html[data-season="halloween-cartoon"] .platform-note { color: var(--lilac); }

/* 5. Pricing */
html[data-season="halloween-cartoon"] .price-card, html[data-season="halloween-cartoon"] .section-alt .price-card { position: relative; background: var(--card); color: var(--cream); border: 3px solid var(--inkc); border-radius: 18px; box-shadow: 6px 6px 0 var(--pumpkin); }
html[data-season="halloween-cartoon"] .price-card:hover { box-shadow: 6px 6px 0 var(--pumpkin); }
html[data-season="halloween-cartoon"] .price-card h4, html[data-season="halloween-cartoon"] .price { color: var(--cream); }
html[data-season="halloween-cartoon"] .price-card.featured { border-color: var(--inkc); box-shadow: 6px 6px 0 var(--lime); }
html[data-season="halloween-cartoon"] .price-card.featured::after { content: ""; position: absolute; top: -20px; right: -14px; width: 44px; height: 44px; background: url("../images/season/pumpkin.svg") center / contain no-repeat; transform: rotate(10deg); pointer-events: none; }
html[data-season="halloween-cartoon"] .price-card ul { list-style-image: url("../images/season/candy.svg"); }
html[data-season="halloween-cartoon"] .price-group, html[data-season="halloween-cartoon"] .pay-line { color: var(--lime); }
html[data-season="halloween-cartoon"] .soft-disclaimer { background: var(--plum); border: 2px dashed var(--lilac); color: var(--lilac); border-radius: 14px; }

/* 6. How: pumpkin badges */
html[data-season="halloween-cartoon"] .steps li { background: var(--card); color: var(--cream); border: 3px solid var(--inkc); border-radius: 16px; padding-left: 3.9rem; }
html[data-season="halloween-cartoon"] .steps li::before { width: 36px; height: 36px; left: .8rem; top: .7rem; border-radius: 0; background: url("../images/season/pumpkin-plain.svg") center / contain no-repeat; color: var(--inkc); font-weight: 800; padding-top: 4px; }

/* 7. About: 1926 postcard sticker */
html[data-season="halloween-cartoon"] #about { position: relative; }
@media (min-width: 900px) {
  html[data-season="halloween-cartoon"] #about .wrap.narrow { margin-left: max(1.5rem, calc(50% - 20rem - 150px)); max-width: calc(100% - 340px); }
  html[data-season="halloween-cartoon"] #about::after { content: ""; position: absolute; top: 50%; right: 4%; width: 240px; aspect-ratio: 1000 / 652; margin-top: -78px; background: url("../images/season/hc-postcard-1926-1000.jpg") center / cover no-repeat; border: 10px solid var(--cream); outline: 3px solid var(--inkc); box-shadow: 8px 8px 0 var(--inkc); transform: rotate(-3deg); pointer-events: none; }
}

/* 8. Style samples: sticker links */
html[data-season="halloween-cartoon"] .style-sample-list a { background: var(--card); color: var(--cream); border: 3px solid var(--inkc); border-radius: 14px; box-shadow: 4px 4px 0 var(--inkc); font-weight: 700; }
html[data-season="halloween-cartoon"] .style-sample-list a:hover, html[data-season="halloween-cartoon"] .style-sample-list a:focus-visible { color: var(--pumpkin); border-color: var(--inkc); box-shadow: 4px 4px 0 var(--pumpkin); }

/* 9. Contact: moon glow + 3 bats */
html[data-season="halloween-cartoon"] .contact { position: relative; background: radial-gradient(22rem 16rem at 50% 30%, rgb(255 241 193 / .3), transparent 70%), linear-gradient(180deg, var(--plum), var(--inkc)); color: var(--cream); border-top: 0; overflow: hidden; }
html[data-season="halloween-cartoon"] .contact::before { content: ""; position: absolute; top: 1.2rem; left: 4%; width: 150px; height: 90px; background: url("../images/season/bats-trio.svg") center / contain no-repeat; pointer-events: none; }
html[data-season="halloween-cartoon"] .contact .wrap { position: relative; z-index: 1; }
html[data-season="halloween-cartoon"] .contact h2 { color: var(--cream); }
html[data-season="halloween-cartoon"] .contact p, html[data-season="halloween-cartoon"] .section.contact .wrap.narrow > p, html[data-season="halloween-cartoon"] .contact .contact-hint { color: var(--lilac); }

/* 10. Footer */
html[data-season="halloween-cartoon"] .site-footer { position: relative; background: var(--inkc); color: var(--lilac); padding-top: calc(2.5rem + 70px); }
html[data-season="halloween-cartoon"] .site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 70px; background: url("../images/season/firs.svg") left bottom / auto 70px repeat-x; transform: scaleY(-1); pointer-events: none; }
html[data-season="halloween-cartoon"] .footer-inner a { color: var(--pumpkin); }
html[data-season="halloween-cartoon"] .footer-brand, html[data-season="halloween-cartoon"] .site-credit, html[data-season="halloween-cartoon"] .photo-credit { color: var(--lilac); }
html[data-season="halloween-cartoon"] .season-credit { font-size: .8rem; margin-top: .4rem !important; }

/* Motion: once only */
@media (prefers-reduced-motion: no-preference) {
  html[data-season="halloween-cartoon"] .hero-overlay::before { animation: hcLight .8s ease-out .3s both; }
  html[data-season="halloween-cartoon"] .hero-overlay::after { animation: hcLight .8s ease-out .45s both; }
  html[data-season="halloween-cartoon"] .price-card.featured::after { animation: hcLight .8s ease-out .6s both; }
  html[data-season="halloween-cartoon"] .hero::after { offset-path: path("M -40 30 Q 0 -10 40 0"); offset-rotate: 0deg; animation: hcSwoop 1.2s cubic-bezier(.3,.7,.4,1) .4s both; }
  html[data-season="halloween-cartoon"].js-reveal :is(.section h2, .price-card, .steps li, .style-sample-list a) { opacity: 0; transform: translateY(12px); transition: opacity .5s ease-out, transform .5s cubic-bezier(.34,1.56,.64,1); }
  html[data-season="halloween-cartoon"].js-reveal :is(.section h2, .price-card, .steps li, .style-sample-list a).is-in { opacity: 1; transform: none; }
}
@keyframes hcLight { from { filter: brightness(.45) saturate(.7); } to { filter: none; } }
@keyframes hcSwoop { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* Moonlight rim so ink bats read on the night sky */
html[data-season="halloween-cartoon"] .hero::after, html[data-season="halloween-cartoon"] .contact::before { filter: drop-shadow(0 0 1px #D9CCEB) drop-shadow(0 0 6px rgb(255 241 193 / .45)); }
html[data-season="halloween-cartoon"] .hero::after { width: 130px; height: 72px; }