/* Crisp HTML presentation: raster assets are scenery/products only. */
body[data-page] {font-weight:500}
[data-page] .hero__lede,[data-page] .whatis__card p,[data-page] .wrappers .sec__lede {font-size:18px;line-height:1.45}
[data-page] .hero__sub {font-size:25px;line-height:1.3}
[data-page] .mainnav a {font-size:19px}
[data-page] .callout p {font-size:17px}
[data-page] .foot__note {font-size:15px;line-height:1.6}
[data-season][data-page="index"] .hero {background-position:center 45%}
[data-season][data-page="index"] .hero__art {filter:drop-shadow(0 0 26px #ed721527)}
[data-season][data-page="index"] .home-help {background-image:linear-gradient(90deg,#04120c55,#04120c88),url('/img/seasons/halloween/forest.webp')}
[data-season][data-page="index"] .home-help__cta {position:relative;isolation:isolate;padding:25px 20px}
[data-season][data-page="index"] .home-help__cta::before {content:"";position:absolute;inset:0;z-index:-1;background:#eec490 url('/img/seasons/halloween/paper.svg') center/cover;clip-path:polygon(1% 5%,12% 2%,21% 5%,32% 1%,45% 4%,55% 0,69% 4%,80% 1%,98% 5%,96% 23%,100% 40%,97% 65%,99% 94%,87% 98%,72% 96%,54% 100%,35% 96%,19% 99%,2% 94%,4% 76%,0 54%,3% 31%)}
[data-season][data-page="index"] .home-help__cta h2 {color:#07110c;text-shadow:none}
[data-page="contact"] .card[data-contact-topic] {cursor:pointer;color:var(--cream);font-family:inherit;min-width:0}
[data-page="contact"] .card[data-contact-topic]:focus-visible {outline:3px solid var(--o)}
@media(max-width:600px){
[data-page] .hero__lede,[data-page] .whatis__card p,[data-page] .wrappers .sec__lede {font-size:17px}
[data-page] .hero__sub {font-size:22px}
[data-page] .callout p {font-size:16px}
[data-season][data-page="index"] .hero__art {margin-top:10px}
}
/* Halloween collection cabinet: warm shelves and violet shadows. */
.collection-picker {background:radial-gradient(ellipse at 50% 0,#53303b55,transparent 65%),#151017;border:1px solid #b37e4e;padding:28px;color:#fff1db;box-shadow:0 24px 90px #000b}
.collection-picker h2 {color:#ffe5bc;text-shadow:0 2px #000}
.collection-picker .picker-close {background:#271b25;border-color:#be854c}
.collection-grid,[data-page="about"] .coll {gap:24px 18px;padding:24px 20px 30px;background:radial-gradient(ellipse at 15% 10%,#713e273b,transparent 48%),radial-gradient(ellipse at 90% 65%,#653c7544,transparent 60%),repeating-linear-gradient(93deg,#ffffff02 0 1px,transparent 1px 8px),#171219;border:1px solid #6c4941}
.collection-grid figure,[data-page="about"] .coll li {position:relative;isolation:isolate;margin:0;padding:18px 10px 14px;text-align:center;background:radial-gradient(ellipse at 50% 70%,#ed8a3138,transparent 68%),linear-gradient(90deg,#1c131c,#30202a 50%,#1c131c);border:1px solid #674a44;box-shadow:inset 0 1px #b88c5833,0 8px 14px #0006;transition:transform .2s,border-color .2s}
.collection-grid figure:nth-child(3n+2),[data-page="about"] .coll li:nth-child(3n+2) {background:radial-gradient(ellipse at 50% 70%,#9863c34d,transparent 68%),linear-gradient(90deg,#1c131c,#322237 50%,#1c131c)}
.collection-grid figure::before,[data-page="about"] .coll li::before {content:"";position:absolute;inset:12px 12px 55px;z-index:-1;border:1px solid #bd87522e;border-radius:45% 45% 0 0;background:radial-gradient(ellipse at center,#ffa24312,transparent 70%)}
.collection-grid figure::after,[data-page="about"] .coll li::after {content:"";position:absolute;left:-4px;right:-4px;bottom:48px;height:9px;background:linear-gradient(#ac7750,#55392e 35%,#291b21 80%);border-top:1px solid #d3985a77;box-shadow:0 8px 9px #0009;z-index:-1}
.collection-grid img,[data-page="about"] .coll img {height:220px;width:100%;object-fit:contain;filter:drop-shadow(5px 8px 5px #000a);margin-bottom:18px}
.collection-grid figcaption,[data-page="about"] .coll b {font:600 18px/1.3 var(--body);color:#ffe6be;min-height:24px;position:relative}
.collection-grid figure:hover,[data-page="about"] .coll li:hover {transform:translateY(-3px);border-color:#cf955a}
[data-page="about"] .sec:has(.coll) {background:linear-gradient(#171219cc,#21151ef2);border-top:1px solid #75533d;border-bottom:1px solid #75533d}
[data-page="about"] .sec:has(.coll) .sec__head h2 {color:#ffe6be}
@media(max-width:900px){.collection-grid,[data-page="about"] .coll {grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 12px}}
@media(max-width:540px){.collection-picker{padding:16px}.collection-grid,[data-page="about"] .coll {grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px;padding:18px 12px}.collection-grid img,[data-page="about"] .coll img{height:185px}.collection-grid figure,[data-page="about"] .coll li{padding:14px 7px}.collection-grid figcaption,[data-page="about"] .coll b{font-size:17px}}
@media(prefers-reduced-motion:reduce){.collection-grid figure,[data-page="about"] .coll li{transition:none}.collection-grid figure:hover,[data-page="about"] .coll li:hover{transform:none}}
/* Carry the collection's candlelit palette through the storefront. */
[data-season][data-page="index"] .introduction {background:radial-gradient(ellipse at 90% 10%,#6f3c613b,transparent 60%),linear-gradient(125deg,#201720,#171319 65%,#2d1c22);border-top:1px solid #92623c}
[data-season][data-page="index"] .whatis__card {background:radial-gradient(ellipse at 50% 0,#bc753c22,transparent 65%),linear-gradient(#30212b,#1a141c);box-shadow:0 10px 20px #0004}
[data-season][data-page="index"] .whatis__ico {filter:drop-shadow(0 3px 8px #f6a34c33)}
[data-season][data-page="index"] .callout {background:radial-gradient(ellipse at 50% 30%,#55303c,#241820 80%);border-color:#eea451;box-shadow:0 10px 28px #0005}
[data-season][data-page="index"] .wrapper-story {background:radial-gradient(ellipse at 10% 80%,#633c5433,transparent 65%),#1a141d;border-top:1px solid #75513c;border-bottom:1px solid #75513c}
[data-season][data-page="index"] .wrapper-story .flow {background:linear-gradient(135deg,#35242e,#211820);border-color:#976541;box-shadow:inset 0 1px #f8c77722,0 8px 18px #0003}
[data-season][data-page="index"] #packs {background:radial-gradient(ellipse at 50% 0,#6a3e492e,transparent 65%),repeating-linear-gradient(95deg,#ffffff02 0 1px,transparent 1px 9px),#181219;border-top:1px solid #9c6842}
[data-season][data-page="index"] .pack {background:radial-gradient(ellipse at 50% 15%,#ba70432e,transparent 55%),linear-gradient(135deg,#302029,#211820);box-shadow:0 10px 25px #0005}
[data-season][data-page="index"] .pack:nth-child(even) {background:radial-gradient(ellipse at 50% 15%,#9863c32e,transparent 55%),linear-gradient(135deg,#30202f,#211820)}
[data-season][data-page="index"] .pack__ship {color:#e9bc87}
[data-season][data-page="index"] .service-strip {background:#211720;border-color:#7e5940}
[data-page] .site-foot {background:radial-gradient(ellipse at 90% 0,#56364e44,transparent 55%),linear-gradient(145deg,#21171f,#120f15);border-top:1px solid #93613e}
[data-page] .foot__links a {color:#ffe7c1}
[data-page] .foot__links a:hover {color:#ff963e}
[data-page] .foot__note {color:#d2beb8}
[data-page] .foot__bottom {border-color:#715044}
@media(max-width:600px){[data-season][data-page="index"] .whatis__cards{gap:10px}[data-season][data-page="index"] .whatis__card{padding:20px 8px}[data-season][data-page="index"] .wrapper-story .flow{padding:16px 9px}}
/* Contain rotated showcase art inside its scene at tablet widths. */
[data-page] .fanstage {overflow:clip}
/* Section scenery stays inside its section; the page canvas is plain. */
body[data-page] {background:#120f15;background-attachment:scroll}
[data-season][data-page="index"] .service-strip {width:100%;margin:0;padding:18px max(32px,calc((100% - 1120px)/2));box-sizing:border-box}
@media(max-width:600px){[data-season][data-page="index"] .service-strip{padding-inline:16px}}
/* FAQ artwork scrolls naturally with the page, fading into a plain canvas. */
body[data-page="faq"] {background-color:#120f15;background-image:linear-gradient(#08121b44,#120f1544 550px,#120f15 1150px),url('/img/seasons/halloween/lost-cemetery.webp');background-position:center top;background-size:100% 1150px,auto 1150px;background-repeat:no-repeat}
[data-page="faq"].subpage main {background:none}
[data-page="faq"].subpage main>.hero {background:linear-gradient(#07101b22,#07101b88);text-shadow:0 3px 12px #000}
[data-page="faq"] .qagroup {background:#071018ed}
body[data-page="contact"] {background-color:#120f15;background-image:linear-gradient(#07121c33,#120f1555 650px,#120f15 1350px),url('/img/seasons/halloween/contact-stream.webp');background-position:center top;background-size:100% 1350px,auto 1350px;background-repeat:no-repeat;background-attachment:scroll}
[data-page="contact"].subpage main {background:linear-gradient(90deg,#07121a22,#07121a88 50%,#07121a22)}
[data-page="contact"].subpage main>.hero {background:linear-gradient(#07101b22,#07101b99);text-shadow:0 3px 12px #000}
[data-page="contact"] .form {padding:24px;background:#08121bdd;border:1px solid #967042}
@media(max-width:600px){[data-page="contact"] .form{padding:18px}}
/* Shared plum navigation matches the seasonal panels. */
[data-season] .site-head{background:#241923;border-bottom-color:#765334}
[data-season] .mainnav{background-color:#241923}
[data-season] .site-head::before{background:#241923;border-bottom-color:#765334}
/* --- next-batch list -------------------------------------------------
The Halloween run is small enough to sell out, and everyone who arrives
after that is lost unless we can email them. js/waitlist.js turns this
louder once /api/availability reports nothing left. */
.waitlist {text-align:center}
.waitlist h2 {margin-bottom:.4rem}
.waitlist .sec__lede {max-width:46ch;margin-inline:auto}
.waitlist__form {display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;
align-items:center;margin-top:1.4rem}
.waitlist__form input[type=email] {flex:1 1 17rem;max-width:22rem;min-height:48px;
padding:.7rem .9rem;border-radius:10px;border:2px solid #2d3a31;background:#0b100d;
color:var(--cream);font:inherit}
.waitlist__form input[type=email]:focus-visible {outline:3px solid var(--o);outline-offset:1px}
.waitlist__form .btn {min-height:48px}
.waitlist__hp {position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.waitlist__note {flex-basis:100%;margin:.5rem 0 0;color:var(--cream-3);font-size:var(--t--1)}
.waitlist__note.is-bad {color:#ff8c7a}
.waitlist__form.is-done .waitlist__note {color:var(--green);font-weight:700}
.waitlist.is-soldout h2 {color:var(--o)}
/* --- "Meet the squishies" -------------------------------------------
The heading and the blurb were plain text: only the little arrow was
clickable, so anyone aiming at the words hit nothing. Stretching the
existing anchor over the card makes the whole thing the target without
adding a second link for a screen reader to read out. */
.callout {position:relative}
.callout__go::after {content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.callout:hover .callout__go {transform:translateX(3px)}
.callout__go {transition:transform .2s ease}
.callout:focus-within {outline:3px solid var(--o);outline-offset:4px;border-radius:14px}
/* the arrow already carries the accessible name, so nothing else needs to
be focusable inside the card */
.callout h3, .callout p {position:relative;z-index:2;pointer-events:none}
@media(prefers-reduced-motion:reduce){.callout__go{transition:none}}
/* How It Works and About: one scene instead of three bands.
Both pages stacked a strip of art at the top and another at the bottom
with flat colour between them, so each read as three unrelated sections.
The art now sits behind the whole page and the hero and finale keep only
their scrims, letting the content float over one continuous backdrop.
data-page and .subpage are both on BODY, not html, so `[data-page] body`
matches nothing. The hero rules below only APPEAR to work with the wrong
scope because main is a descendant of body - which once hid exactly that
mistake here.
>>> SLICED, NOT STRETCHED <<<
The art is 1024 wide. Covering a 1920 viewport upscaled it 1.9x and every
pixel was invented: fine on a phone, visibly soft fullscreen. But measuring
the source, its middle (x 350-730) is near-flat fog - we were enlarging
380px of nothing. So the detail, the moon and lanterns and foliage, is cut
into two 420px slices and the empty middle is replaced by the gradient it
already was.
Sized `auto 100%` the slices scale to viewport HEIGHT: 1080/1536 = 0.70,
a DOWNSCALE, which is sharp. They are never enlarged on a display shorter
than 1536px, which is nearly all of them; and a gradient is sharp at any
width by definition. So the backdrop stays crisp fullscreen at any size.
Each slice carries an 80px alpha ramp on its inner edge, baked into the
webp, so it dissolves into the gradient instead of ending on a seam. Both
ramps sit inside the flat run, so nothing with detail is faded away. */
body[data-page="how-it-works"],body[data-page="about"] {background:#100810}
body[data-page="how-it-works"]::before,body[data-page="about"]::before {content:"";position:fixed;inset:0;z-index:-1;background:url('/img/seasons/halloween/hollow-path-l.webp') left center/auto 100% no-repeat,url('/img/seasons/halloween/hollow-path-r.webp') right center/auto 100% no-repeat,linear-gradient(#1b1117,#1a0f15 40%,#180d12 72%,#100810)}
/* Hero and finale keep a scrim for legibility and nothing else. The gold
border under the steps divided two different images; over one continuous
scene it just draws a line across it. */
[data-page="how-it-works"].subpage main>.hero,[data-page="about"].subpage main>.hero {background:linear-gradient(#0b0710cc,#0b071055);text-shadow:0 3px 12px #000}
[data-page="how-it-works"] .story-finale,[data-page="about"] .story-finale {background:linear-gradient(#0b071000,#0b0710cc);border-top:0}
/* .subpage is required to out-specify [data-page].subpage main in board.css,
where the 20px comes from - (0,2,1) beats (0,1,1) whatever the file order.
Without it a strip below the finale shows the backdrop unshaded: a pale
band exactly where the page should be settling into the footer. */
[data-page="how-it-works"].subpage main,[data-page="about"].subpage main {padding-bottom:0}
/* FAQ gets the same treatment, with its own scene.
FAQ was built differently from the other two: its top image was a BODY
background - lost-cemetery anchored to the top, sized 1150px, with a
gradient washing it dark as it faded out. So the "top image" and the
"dark overlay" were the same declaration, and both go together here.
The hero carries the same light wash as the other themed pages - it went
away with the cemetery photo and came back by request, so all six heroes
now read the same. It is lighter than the old ...88, which existed to lift
cream text off a busy photograph rather than off a dark scene. */
body[data-page="faq"] {background:#0a070f}
body[data-page="faq"]::before {content:"";position:fixed;inset:0;z-index:-1;background:url('/img/seasons/halloween/iron-gate-l.webp') left center/auto 100% no-repeat,url('/img/seasons/halloween/iron-gate-r.webp') right center/auto 100% no-repeat,linear-gradient(#0e0d17,#0d0b15 40%,#0c0a13 72%,#0a070f)}
[data-page="faq"].subpage main>.hero {background:linear-gradient(#0b071099,#0b071044);text-shadow:0 3px 12px #000}
[data-page="faq"] .story-finale {background:linear-gradient(#0a070f00,#0a070fcc);border-top:0}
[data-page="faq"].subpage main {padding-bottom:0}
/* Shipping. No .story-finale on this page, so there is no bottom image to
remove - what sits at the bottom instead is .sec--tint, an opaque panel.
Left solid it would be a flat slab over the scene, so it becomes a
translucent wash: still a distinct band, but the backdrop reads through it
and the page stays one place rather than two. */
body[data-page="shipping"] {background:#09060b}
body[data-page="shipping"]::before {content:"";position:fixed;inset:0;z-index:-1;background:url('/img/seasons/halloween/lamplit-path-l.webp') left center/auto 100% no-repeat,url('/img/seasons/halloween/lamplit-path-r.webp') right center/auto 100% no-repeat,linear-gradient(#0d0810,#0c080f 40%,#0c080d 72%,#09060b)}
[data-page="shipping"].subpage main>.hero {background:linear-gradient(#0b071099,#0b071044);text-shadow:0 3px 12px #000}
[data-page="shipping"] .sec--tint {background:#0c080fd9}
[data-page="shipping"].subpage main {padding-bottom:0}
/* Returns. Its bottom image is not a .story-finale but the last .sec, which
board.css dresses with collection.webp - so that is the rule to override,
and it becomes a translucent wash like Shipping's tint panel. */
body[data-page="returns"] {background:#070308}
body[data-page="returns"]::before {content:"";position:fixed;inset:0;z-index:-1;background:url('/img/seasons/halloween/cottage-path-l.webp') left center/auto 100% no-repeat,url('/img/seasons/halloween/cottage-path-r.webp') right center/auto 100% no-repeat,linear-gradient(#0a050b,#0b070c 40%,#0a050a 72%,#070308)}
[data-page="returns"].subpage main>.hero {background:linear-gradient(#0b071099,#0b071044);text-shadow:0 3px 12px #000}
[data-page="returns"] main>.sec:last-child {background:#0a050bd9}
[data-page="returns"].subpage main {padding-bottom:0}
/* Policies. Only a hero and one content section, so there is no bottom image
to remove - just the hero's.
.prose stays nearly opaque. It holds the privacy and terms text, which is
long and has to be comfortable to read; dropping it to a wash would make
the busiest page on the site the hardest one to read. It is only retinted
from #02140d, a green that belonged to the old forest art, to match this
scene. Same opacity, same legibility. */
body[data-page="policies"] {background:#090409}
body[data-page="policies"]::before {content:"";position:fixed;inset:0;z-index:-1;background:url('/img/seasons/halloween/gatepost-path-l.webp') left center/auto 100% no-repeat,url('/img/seasons/halloween/gatepost-path-r.webp') right center/auto 100% no-repeat,linear-gradient(#0b060b,#0d070c 40%,#0c060b 72%,#090409)}
[data-page="policies"].subpage main>.hero {background:linear-gradient(#0b071099,#0b071044);text-shadow:0 3px 12px #000}
[data-page="policies"] .prose {background:#0c070ceb}
[data-page="policies"].subpage main {padding-bottom:0}
/* FAQ group decorations.
No webs here. Each group carried one, anchored to its pumpkin or its ghost,
and it went through four shapes - inward, outward, downward, upward -
before Frank called it: he does not want them on this page at all. Removed
rather than tuned again.
board.css still paints a web as the BACKGROUND of every even group. A
background cannot be positioned or flipped independently of the panel,
which is why it was replaced in the first place, so it stays switched off.
What remains is the ::after on each group - a jack-o'-lantern on the odd
ones, a ghost on the even ones - which board.css owns. */
[data-page="faq"] .qagroup {position:relative}
[data-page="faq"] .qagroup:nth-child(even) {background-image:none}
[data-page="faq"] .qagroup>* {position:relative;z-index:1}
/* Header web: reach the actual screen edge, and fill its own box.
Two faults, both visible in measurements rather than by eye.
The header sits inside a centred container, so left:0 landed 16px in from
the viewport and left a gutter-shaped gap down the side. The escape offset
is the same expression .site-head::before already uses to make the header
bar full-bleed - reused verbatim so the two stay in step if --gut or
--maxw ever change.
And the mobile override set width without height, so a square drawing at
`contain` fitted to 120x120 inside a 120x190 box and left 70px of dead
space underneath: the "not filling" part. aspect-ratio makes that class of
bug impossible, and a clamp replaces the media query so there is only one
declaration to keep correct.
fine-web.svg rather than web.svg: its spiral runs are quadratic curves
that SAG between the radials, the way silk does under its own weight,
where web.svg draws perfect concentric arcs. It is drawn anchored to its
top-RIGHT, so it is mirrored to land top-left - the same scaleX(-1) idiom
used by .sec--web-r, .whatis__web and the FAQ group webs. */
[data-season] .site-head::after {left:calc((min(100vw - 2 * var(--gut),var(--maxw)) - 100vw)/2);width:clamp(165px,20vw,260px);height:auto;aspect-ratio:1;background:url('/img/seasons/halloween/fine-web.svg') right top/contain no-repeat;transform:scaleX(-1);opacity:.75}
/* The "Explore all 12 designs" button.
.callout__go was built as a 3rem x 3rem circle holding a 1.4rem arrow
glyph. js/storefront.js then replaces its contents with a sentence once
the catalog loads, so a 24-character label was being poured into a 48px
circle and spilling out of it.
It now carries .btn as well, so it inherits the torn-edge orange button
the rest of the site already uses - no third button language invented for
one control - and the fixed square is released so it sizes to its label.
It keeps working without JavaScript: the arrow glyph is still in the
markup, and an icon-only button simply renders as a short pill.
The reset has to carry [data-season]: halloween.css pins this to
44x44 at (0,2,0), which beats a bare .callout__go at (0,1,0) however the
files are ordered. Its margin-bottom:-30px lifted a small circle to
overlap the card edge and has to go with it. */
[data-season] .callout__go {width:auto;height:auto;display:inline-flex;white-space:nowrap;margin-bottom:0;font-size:19px;padding:12px 24px;min-height:48px}
.callout__go svg {width:1.25rem;height:1.25rem}
@media(max-width:540px){[data-season] .callout__go {font-size:17px;padding:11px 18px}}