/* =========================================================================
   /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}
/* Life on top of the loops, at no extra cost: a slow camera drift (the
   video scales and slides over 26s, back and forth, so it never jumps) and
   two layers of foreground snow falling faster than the snow in the clip. */
.scene>.scene-video{animation:drift 26s ease-in-out infinite alternate;transform-origin:62% 55%}
.scene--fireplace>.scene-video{animation-duration:30s;transform-origin:50% 60%}
.scene--porch>.scene-video{animation-duration:28s;transform-origin:70% 50%}
@keyframes drift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}}
.scene>.snow{z-index:1;pointer-events:none}
/* Odd, unrelated tile sizes so the flakes never line up into a visible grid.
   Each layer moves down by exactly its own tile height per cycle, so the loop
   restarts without a jump, and different heights give a free parallax; the
   midpoint pushes sideways for a sway. */
.scene>.snow{inset:0;transform:none;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 211px,241px 157px,317px 263px,131px 389px;animation:snow-far 14s linear infinite;opacity:.6}
.scene>.snow--near{opacity:.9;filter:blur(.7px);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 347px,409px 271px,223px 433px;animation:snow-near 9s linear infinite}
@keyframes snow-far{
  0%{background-position:0 0,61px 97px,140px 23px,37px 180px}
  50%{background-position:18px 105px,79px 175px,158px 154px,55px 374px}
  100%{background-position:0 211px,61px 254px,140px 286px,37px 569px}}
@keyframes snow-near{
  0%{background-position:90px 40px,13px 211px,170px 120px}
  50%{background-position:116px 213px,39px 346px,196px 336px}
  100%{background-position:90px 387px,13px 482px,170px 553px}}
.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,.scene>.scene-video{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}
}