/* =========================================================================
   /christmas - the Christmas collection, as an add-on page.

   Self-contained like /three-pack: it does not load style.css, and the
   Halloween pages are untouched. For now it is a launch list - the
   Christmas stock is not in yet, so the page sells the date, not a product.
   When the designs arrive, the gift art and the form swap for product
   photos and a buy button.
   ========================================================================= */
:root{
  --pine:#0f2420; --pine-2:#143029; --card:#16302a; --line:#2a4a41;
  --cream:#fff6e6; --muted:#d6e2da; --dim:#a9bdb3;
  --red:#d7263d; --red-2:#b81d33; --gold:#f2b544; --gold-2:#ffd27a;
  --display:Chewy,'Trebuchet MS',sans-serif;
  --cond:'Barlow Condensed','Arial Narrow',sans-serif;
  --body:Nunito,system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--pine);color:var(--cream);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit;text-underline-offset:3px}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--gold-2);outline-offset:4px}
.shell{width:min(1160px,calc(100% - 64px));margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-100px;background:var(--cream);color:var(--pine);padding:10px 14px;z-index:20}
.skip:focus{top:10px}
.ico{width:22px;height:22px;flex:none}

/* --- top bar --------------------------------------------------------------- */
.ship-bar{display:flex;align-items:center;justify-content:center;gap:10px;padding:9px 16px;background:#0a1a17;color:var(--gold);font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:.02em;border-bottom:1px solid #1f3a33;text-align:center}

/* --- hero ------------------------------------------------------------------ */
.hero{position:relative;isolation:isolate;overflow:clip;background:
  radial-gradient(ellipse 70% 60% at 78% 55%,#1f4a3e 0%,transparent 70%),
  linear-gradient(#0b1d1a,var(--pine) 70%)}
.hero>*:not(.snow){position:relative;z-index:2}

/* Snow: tiled dots on two layers moving at different speeds. */
.snow{position:absolute;inset:-200px 0 0;z-index:1;pointer-events:none;
  background-image:radial-gradient(circle,#fff 1.4px,transparent 1.6px),radial-gradient(circle,#fff 1px,transparent 1.2px);
  background-size:160px 160px,110px 110px;background-position:0 0,55px 70px;
  animation:snowfall 22s linear infinite;opacity:.55}
.snow--near{background-size:230px 230px,190px 190px;background-position:30px 10px,120px 90px;
  background-image:radial-gradient(circle,#fff 2.4px,transparent 2.6px),radial-gradient(circle,#fff 1.8px,transparent 2px);
  animation-duration:14s;opacity:.7}
@keyframes snowfall{to{transform:translateY(200px)}}

.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:26px 8px}
.wordmark{font-family:var(--display);font-size:44px;line-height:1;letter-spacing:.5px;color:var(--cream);text-shadow:2px 4px var(--red-2);text-decoration:none}
.wordmark--sm{font-size:30px;text-shadow:1px 3px var(--red-2)}
.nav{display:flex;gap:34px;font-size:16px;font-weight:700}
.nav a{text-decoration:none;color:var(--cream);padding-block:6px}
.nav a:hover,.nav a[aria-current=page]{color:var(--gold)}

.offer{display:grid;grid-template-columns:1.15fr .85fr;column-gap:40px;align-items:center;padding-block:56px 84px}
.eyebrow{margin:0 0 14px;font-family:var(--cond);font-weight:700;font-size:20px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
h1{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(44px,5.4vw,70px);line-height:1.02;text-wrap:balance}
.lede{max-width:34em;margin:20px 0 0;font-size:19px;color:var(--muted)}

/* --- sign-up --------------------------------------------------------------- */
.join{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;max-width:560px}
.join input{flex:1 1 240px;min-height:58px;padding:0 18px;border-radius:14px;border:2px solid var(--line);background:#0b1d1a;color:var(--cream);font:inherit;font-size:18px}
.join input::placeholder{color:var(--dim)}
.join input:focus{border-color:var(--gold);outline:none}
.buy{min-height:58px;padding:0 28px;border:0;border-radius:14px;background:var(--red);color:#fff;font-family:var(--display);font-size:24px;box-shadow:0 5px 0 var(--red-2);transition:transform .12s,box-shadow .12s}
.buy:hover{transform:translateY(-1px)}
.buy:active{transform:translateY(3px);box-shadow:0 2px 0 var(--red-2)}
.buy:disabled{opacity:.7;cursor:progress}
.join-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.join-note{flex-basis:100%;margin:0;min-height:1.5em;font-weight:700;color:var(--gold-2)}
.join-note.is-bad{color:#ff9a8a}
.fine{margin:4px 0 0;font-size:14px;color:var(--dim)}

/* --- video scenes ----------------------------------------------------------
   The farm yard, the living room and the porch. The poster still is the
   section background, so the page looks finished before (or without) the
   video; js/scene-video.js fades the loop in once it is actually playing. */
.scene{position:relative;isolation:isolate;overflow:clip;background:#0b1622 var(--scene) center/cover no-repeat}
.scene>.scene-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity .6s ease;pointer-events:none}
.scene.video-playing>.scene-video{opacity:1}
.scene>.scene-shade{position:absolute;inset:0;z-index:1;pointer-events:none}
.scene>*:not(.scene-video):not(.scene-shade):not(.snow){position:relative;z-index:2}
.scene .scene-video-play{position:absolute;right:16px;bottom:16px;z-index:3;background:#000a;color:var(--cream);border:1px solid #fff4;border-radius:999px;padding:6px 12px;font-size:13px}
/* Text sits on the left of the yard, so the shade is heaviest there. */
.hero.scene>.scene-shade{background:
  linear-gradient(90deg,#08121cf0 0%,#08121cc4 32%,#08121a55 58%,#08121a1a 100%),
  linear-gradient(#08121c99,transparent 24%,transparent 72%,var(--pine))}
.hero.scene .offer{grid-template-columns:minmax(0,640px);padding-block:64px 120px}
.scene--fireplace{padding-block:120px 110px}
.scene--fireplace>.scene-shade{background:linear-gradient(var(--pine),#0a1a1770 20%,#0a1a1759 60%,#0a1a17d9)}
.scene--fireplace .card{background:#10241fd9;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.scene--porch{padding-block:140px 130px;text-align:center}
.scene--porch>.scene-shade{background:
  linear-gradient(90deg,#08121ce6 0%,#08121cb3 40%,#08121a66 70%,#08121a33 100%),
  linear-gradient(var(--pine),transparent 22%)}
.last{max-width:720px}
.last .lede{margin-inline:auto}
.last .join{margin-inline:auto;justify-content:center}
/* Foreground snow over the loops (yard and porch only). */
.scene>.snow{z-index:1;pointer-events:none}
/* Snow moves with transform only (GPU-composited, so it does not stutter on
   phones). Every layer in an element shares one tile height and the element
   travels exactly that far per cycle, so the loop restarts invisibly; odd
   widths and offsets keep the flakes from reading as a grid. */
.scene>.snow{inset:-360px 0 0;opacity:.6;will-change:transform;background-image:
  radial-gradient(circle,#fff 1.6px,transparent 2px),radial-gradient(circle,#fff 1.1px,transparent 1.5px),
  radial-gradient(circle,#fffd 1.3px,transparent 1.7px),radial-gradient(circle,#fff9 .9px,transparent 1.3px);
  background-size:173px 360px,241px 120px,317px 180px,131px 90px;
  background-position:0 0,61px 37px,140px 23px,37px 71px;animation:snow-far 16s linear infinite}
.scene>.snow--near{inset:-480px 0 0;opacity:.85;filter:none;background-image:
  radial-gradient(circle,#fff 2.6px,transparent 3.2px),radial-gradient(circle,#fff 2px,transparent 2.6px),
  radial-gradient(circle,#fffc 2.3px,transparent 2.9px);
  background-size:283px 480px,409px 240px,223px 160px;background-position:90px 40px,13px 131px,170px 77px;
  animation:snow-near 11s linear infinite}
@keyframes snow-far{to{transform:translate3d(0,360px,0)}}
@keyframes snow-near{to{transform:translate3d(0,480px,0)}}
.scene--fireplace>.snow{display:none}
@media (prefers-reduced-motion:reduce){.scene>.scene-video{display:none}}

/* --- sections -------------------------------------------------------------- */
main{padding-block:0 24px}
.section-title{margin:0 0 28px;font-family:var(--display);font-weight:400;font-size:44px;line-height:1.05;text-align:center}
.section-title--sm{font-size:34px;margin-bottom:10px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.card{padding:28px 24px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.card-ico{width:48px;height:48px;color:var(--gold)}
.card h3{margin:12px 0 6px;font-family:var(--display);font-weight:400;font-size:26px}
.card p{margin:0;color:var(--muted)}
.halloween{padding:56px 24px;text-align:center}
.halloween p{margin:0;color:var(--muted)}
.halloween a{color:var(--gold-2);font-weight:700}

/* --- footer ---------------------------------------------------------------- */
.foot{padding-block:40px 48px;border-top:1px solid var(--line);margin-top:40px}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot nav{display:flex;flex-wrap:wrap;gap:22px;font-weight:700}
.foot nav a{text-decoration:none}
.foot nav a:hover{color:var(--gold)}
.socials{display:flex;gap:14px}
.social{display:inline-flex;color:var(--cream)}
.social svg{width:26px;height:26px}
.social:hover{color:var(--gold)}
.foot-note{margin:22px 0 0;font-size:13px;color:var(--dim)}

/* --- phones ---------------------------------------------------------------- */
@media (max-width:860px){
  .shell{width:calc(100% - 32px)}
  .nav{gap:20px;font-size:15px}
  .offer{grid-template-columns:1fr;padding-block:22px 56px;text-align:center}
  .lede{margin-inline:auto}
  .join{margin-inline:auto;justify-content:center}
  .buy{flex:1 1 100%}
  .hero.scene .offer{grid-template-columns:1fr;padding-block:40px 90px}
  .hero.scene>.scene-shade{background:linear-gradient(#08121cc2,#08121c80 42%,#08121c99 74%,var(--pine))}
  .scene>.scene-video{object-position:62% center}
  .scene--fireplace{padding-block:80px 70px}
  .scene--porch{padding-block:90px 90px}
  .scene--porch>.scene-shade{background:linear-gradient(var(--pine),#08121cb3 20%,#08121cb3 80%,#08121ccc)}
  .cards{grid-template-columns:1fr}
  .foot-row{justify-content:center;text-align:center;flex-direction:column}
  .foot nav{justify-content:center}
  .foot-note{text-align:center}
}
@media (max-width:560px){
  .top{flex-direction:column;gap:6px;padding-top:12px}
  .wordmark{font-size:34px}
  .nav{gap:16px;font-size:14px}
  h1{font-size:40px}
  .eyebrow{font-size:16px;margin-bottom:8px}
  .section-title{font-size:34px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .snow{animation:none}
  *{transition:none!important}
}

/* --- /stocking-stuffers gift guide ----------------------------------------- */
.hero--guide{padding-bottom:48px}
.guide-head{padding-block:40px 8px;max-width:820px}
.guide{max-width:820px;padding-block:24px 8px}
.guide section{margin-top:48px}
.guide h2{margin:0 0 16px;font-family:var(--display);font-weight:400;font-size:36px;line-height:1.1}
.guide p,.guide li{color:var(--muted)}
.guide b{color:var(--cream)}
.ticks,.steps{margin:0;padding-left:22px;display:grid;gap:12px}
.ticks li::marker{color:var(--gold)}
.steps li::marker{color:var(--gold);font-weight:800}
.note{margin-top:16px;font-size:15px;color:var(--dim)}
.guide .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
.shop-now{padding:24px 26px;border:1px solid var(--line);border-radius:18px;background:var(--card);display:grid;gap:10px}
.shop-now p{margin:0}
.shop-now a{color:var(--gold-2);font-weight:700}
.guide details{border-top:1px solid var(--line);padding:14px 0}
.guide details:last-child{border-bottom:1px solid var(--line)}
.guide summary{cursor:pointer;font-weight:800;color:var(--cream)}
.guide details p{margin:10px 0 0}
@media (max-width:860px){
  .guide .cards{grid-template-columns:1fr}
  .guide-head{text-align:center}
  .guide-head .lede{margin-inline:auto}
}

/* --- candy village (2026-11-10) ---------------------------------------------
   Bright stills replace the night loops, so the dark veils come off and the
   copy sits on a frosted cream panel with dark lettering instead. */
.scene{background-color:#f6e9e4}
@media (max-width:700px){.scene{background-image:var(--scene-m,var(--scene));background-position:center top}}
.hero.scene>.scene-shade{background:linear-gradient(#0f242066,transparent 22%,transparent 80%,var(--pine))}
.scene--fireplace>.scene-shade{background:linear-gradient(var(--pine),transparent 16%,transparent 84%,var(--pine))}
.scene--porch>.scene-shade{background:linear-gradient(var(--pine),transparent 16%)}
.scene--fireplace .section-title{color:#3a2418;text-shadow:0 2px 12px #fff9}
.frost{--ink:#3a2418;background:#fff8f1e0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid #ffffffb3;border-radius:26px;padding:34px 34px 28px;box-shadow:0 18px 50px #3a241840;color:var(--ink)}
.frost h1,.frost .section-title{color:var(--ink);text-shadow:none}
.frost .eyebrow{color:var(--red-2)}
.frost .lede{color:#5b4237}
.frost .fine{color:#7a6158}
.frost .join input{background:#fff;border-color:#e6d3c8;color:var(--ink)}
.frost .join input::placeholder{color:#a08a80}
.frost .join input:focus{border-color:var(--red)}
.frost .join-note{color:var(--red-2)}
.frost .join-note.is-bad{color:#b3261e}
.hero.scene .offer{padding-block:48px 110px}
.scene>.snow{opacity:.9}
@media (max-width:860px){
  .frost{padding:24px 20px 20px;border-radius:20px}
  .hero.scene .offer{padding-block:150px 70px}
}