/* 90s Movie Night page. Builds on site.css (same fonts, colors, hero, buttons, tips). */
.mn-hero .hero-inner{padding-bottom:150px}
.mn-hero h1 .h1b{max-width:12ch}
.back-link{position:absolute;left:28px;top:84px;z-index:4;font-size:14px;font-weight:700;color:#CFE0E8;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)}
@media (hover:hover){.back-link:hover{color:#fff}}
.vhs-art{position:absolute;right:0;top:150px;width:min(36vw,430px);height:auto;z-index:1;filter:drop-shadow(0 22px 30px rgba(0,0,0,.4));transform:rotate(-6deg)}
.vhs-art .reel{transform-box:fill-box;transform-origin:center;animation:reelspin 6s linear infinite}
@keyframes reelspin{to{transform:rotate(360deg)}}
.calm .vhs-art .reel{animation:none}
@media (min-width:981px){.mn-hero .lede{max-width:min(560px,52%)}}
@media (max-width:980px){.vhs-art{display:none}}

/* jump links under the hero */
.jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.jump a{font-size:14.5px;font-weight:700;text-decoration:none;color:#FBF4E6;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.3)}
@media (hover:hover){.jump a:hover{background:rgba(255,255,255,.18)}}

/* recipe cards (snack groups) */
.recipes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.rcard{position:relative;background:#fff;border-radius:6px;padding:0 0 18px;box-shadow:0 12px 26px rgba(74,52,30,.12);border:1px solid #E9E2D6;
  background-image:linear-gradient(#fff 0 58px,transparent 58px),repeating-linear-gradient(#fff 0 29px,#CFE0EC 29px 30px);transform:rotate(var(--r,-.6deg))}
.rcard:nth-child(2n){--r:.7deg}
.rcard h3{height:58px;display:flex;align-items:center;gap:10px;padding:0 22px;border-bottom:3px solid #E7A6A6;font-size:23px;font-weight:900;color:var(--pine)}
.rcard h3 span{font-size:24px}
.rcard ul{list-style:none;margin:0;padding:6px 22px 0}
.rcard li{line-height:30px;font-size:15.5px;padding-left:20px;position:relative}
.rcard li::before{content:"";position:absolute;left:2px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--cran)}
.rcard li b{color:var(--pine)}
.rcard.wide{grid-column:1/-1}
.rcard.wide ul{columns:2;column-gap:34px}
.rcard.wide li{break-inside:avoid}
@media (max-width:860px){.recipes{grid-template-columns:minmax(0,1fr)}.rcard.wide ul{columns:1}}

/* candy counter swaps */
.counter{background:linear-gradient(180deg,#1C3350,#14233A);color:#FBF4E6;border-radius:26px;padding:34px 30px 28px;position:relative;overflow:hidden;box-shadow:0 18px 40px rgba(20,35,58,.3)}
.counter::before{content:"";position:absolute;left:0;right:0;top:0;height:16px;background:repeating-linear-gradient(90deg,var(--cran) 0 26px,#FBF4E6 26px 52px)}
.counter h3{font-size:clamp(24px,2.6vw,32px);font-weight:900;color:var(--gold);margin:6px 0 6px}
.counter>p{margin:0 0 22px;color:#DCE6EE;max-width:70ch}
.swaps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
.swap{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1.35fr);align-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:12px 14px}
.swap .was{font-family:var(--display);font-weight:800;font-size:17px;color:#F6E5B8}
.swap .arrow{color:var(--gold);font-size:20px;text-align:center}
.swap .now{font-size:15px;color:#fff}
.swap .now b{color:#BFE3C6}
.mars{margin-top:22px;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;background:var(--cream);color:var(--ink);border-radius:16px;padding:18px 20px}
.mars .badge{font-family:var(--hand);font-weight:700;font-size:26px;color:#fff;background:var(--cran);border-radius:12px;padding:6px 12px;transform:rotate(-4deg);line-height:1.1;text-align:center}
.mars p{margin:0 0 6px;font-size:15.5px}
.mars ul{margin:4px 0 0;padding-left:18px;font-size:15px}
.dye-note{margin-top:16px;font-size:14.5px;color:#C9D8E4}
@media (max-width:860px){.swaps{grid-template-columns:minmax(0,1fr)}.mars{grid-template-columns:minmax(0,1fr)}.mars .badge{justify-self:start}}

/* from scratch copycats */
.copycats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.cc{background:#FFFCF6;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:0 8px 18px rgba(74,52,30,.07);display:flex;flex-direction:column}
.cc .cc-was{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--cran);margin:0 0 4px}
.cc h4{font-size:19px;font-weight:800;color:var(--pine);margin:0 0 6px}
.cc p{margin:0 0 10px;font-size:15px}
.cc a{margin-top:auto;font-size:14px;font-weight:700;color:var(--frost-deep)}
@media (max-width:980px){.copycats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.copycats{grid-template-columns:minmax(0,1fr)}}

/* 90s tapes from the watchlist */
.tapes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 22px;list-style:none;margin:0;padding:0}
.tape{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:stretch;background:#1E1B1A;border-radius:8px;overflow:hidden;box-shadow:0 6px 14px rgba(0,0,0,.18);min-height:58px}
.tape .yr{display:grid;place-items:center;background:var(--tc,#3E6B4E);color:#fff;font-family:var(--display);font-weight:900;font-size:20px}
.tape .nm{background:#FBF4E6;margin:7px 0;padding:6px 12px;display:flex;flex-direction:column;justify-content:center;border-radius:2px}
.tape .nm b{font-family:var(--display);font-weight:800;font-size:16.5px;line-height:1.2;color:var(--ink)}
.tape .nm span{font-size:13px;color:var(--soft)}
.tape .fit{display:grid;place-items:center;padding:0 12px;font-size:12.5px;font-weight:700;color:#fff;text-align:center;max-width:110px;line-height:1.2}
.tape.gentle{--tc:var(--holly)}.tape.preview{--tc:var(--gold-deep)}.tape.notfit{--tc:var(--cran)}
.tape-key{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0 0 18px;font-size:14.5px}
.tape-key span{display:flex;align-items:center;gap:7px}
.tape-key i{width:14px;height:14px;border-radius:3px;display:inline-block}
@media (max-width:860px){.tapes{grid-template-columns:minmax(0,1fr)}}

/* shop the nostalgia */
.shop{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.store-box{background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px 20px 16px;box-shadow:0 10px 22px rgba(74,52,30,.08)}
.store-box h3{font-size:21px;font-weight:900;color:var(--pine);margin:0 0 2px}
.store-box .where{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin:0 0 10px}
.store-box ul{list-style:none;margin:0;padding:0}
.store-box li{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:15px}
.store-box li:last-child{border-bottom:0}
.price{flex:0 0 auto;font-weight:800;color:var(--cran);white-space:nowrap}
.store-box a.go{display:inline-block;margin-top:10px;font-size:14px;font-weight:700;color:var(--frost-deep)}
.shop-note{font-size:14px;color:var(--soft);margin-top:18px}
@media (max-width:980px){.shop{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.shop{grid-template-columns:minmax(0,1fr)}}

/* link band on the main watchlist page */
.mn-band{padding:20px 0 50px}
.mn-promo{display:grid;grid-template-columns:auto 1fr auto;gap:22px 30px;align-items:center;padding:26px 30px;border-radius:24px;color:#FBF4E6;background:linear-gradient(135deg,#1C3350,#14233A);box-shadow:0 16px 36px rgba(20,35,58,.28);position:relative;overflow:hidden}
.mn-promo::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:repeating-linear-gradient(90deg,var(--cran) 0 22px,#FBF4E6 22px 44px)}
.mn-promo svg{width:120px;height:auto;transform:rotate(-8deg)}
.mn-promo h2{font-size:clamp(26px,3vw,38px);font-weight:900;color:#FBF4E6;margin:0 0 6px}
.mn-promo h2 em{font-family:var(--hand);font-style:normal;font-weight:700;font-variation-settings:normal;color:var(--gold)}
.mn-promo p{margin:0;color:#DCE6EE;max-width:56ch}
@media (max-width:760px){.mn-promo{grid-template-columns:minmax(0,1fr);text-align:center}.mn-promo svg{margin:0 auto;width:96px}.mn-promo p{margin:0 auto}}

@media print{.vhs-art,.jump,.back-link,.calm-toggle,.lights-string,.snow,.village{display:none}.counter{background:#fff;color:#000}.swap{border-color:#ccc}}

/* linked shop items */
.store-box li a{color:inherit;text-decoration:underline;text-decoration-style:dotted;text-decoration-color:#B23A3F;text-underline-offset:4px}
@media (hover:hover){.store-box li a:hover{color:#B23A3F}}
.store-box li a::after{content:" \2197";font-size:.8em;color:#B23A3F}
.gu-box{display:block;margin:22px 0 6px;padding:18px 22px;border-radius:20px;background:#3A2440;color:#FBF4E6;text-decoration:none;box-shadow:0 10px 20px rgba(58,36,64,.25)}
.gu-box b{display:block;font-family:"Fraunces",serif;font-weight:900;font-size:24px;color:#F7D57A}
.gu-box span{display:block;margin:4px 0 8px;font-size:15.5px;color:#E6D9EC}
.gu-box em{font-style:normal;font-weight:800;color:#FF8A8F}

/* promo title: big "Rewind to the 90s", gold "Holiday Movie Night", NEW sticker in the corner */
.mn-promo{position:relative;overflow:visible}
.mn-promo h2{line-height:1.02}
.mn-promo h2 .mn-l1{display:block;font-size:clamp(32px,4.2vw,50px);color:#FBF4E6}
.mn-promo h2 em{display:block;font-size:clamp(30px,3.8vw,46px);color:#F7D57A;margin-top:2px}
.mn-new{position:absolute;top:-18px;right:-14px;z-index:3;width:84px;height:84px;display:grid;place-items:center;
  background:#F0484F;color:#fff;font:900 18px/1 "DM Sans",Arial,sans-serif;letter-spacing:.06em;transform:rotate(12deg);
  clip-path:polygon(50% 0,61% 13%,77% 6%,80% 23%,96% 26%,90% 41%,100% 54%,87% 63%,91% 80%,74% 81%,66% 97%,52% 88%,37% 98%,30% 82%,12% 83%,15% 66%,0 56%,10% 42%,4% 26%,21% 23%,24% 6%,40% 13%);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.3));animation:mnNew 3.5s ease-in-out infinite}
@keyframes mnNew{0%,100%{transform:rotate(12deg) scale(1)}50%{transform:rotate(8deg) scale(1.06)}}
html.calm .mn-new{animation:none}
@media (prefers-reduced-motion:reduce){.mn-new{animation:none}}
@media (max-width:760px){.mn-new{top:-14px;right:-6px;width:70px;height:70px;font-size:15px}}

/* big VHS that rewinds: reels spin backwards, tape winds from right to left */
.mn-promo svg.vhs-rew{width:230px;transform:rotate(-6deg);filter:drop-shadow(0 12px 14px rgba(0,0,0,.4))}
.vhs-rew .rw-reel{transform-box:fill-box;transform-origin:center;animation:rwSpin .9s linear infinite}
@keyframes rwSpin{to{transform:rotate(-360deg)}}
.vhs-rew .rw-pack{transform-box:fill-box;transform-origin:center}
.vhs-rew .rw-pack.l{animation:rwGrow 7s linear infinite}
.vhs-rew .rw-pack.r{animation:rwShrink 7s linear infinite}
@keyframes rwGrow{0%{transform:scale(.55)}100%{transform:scale(1)}}
@keyframes rwShrink{0%{transform:scale(1)}100%{transform:scale(.55)}}
.vhs-rew .rw-txt{animation:rwBlink 1s steps(1) infinite}
@keyframes rwBlink{50%{opacity:.25}}
html.calm .vhs-rew *{animation:none!important}
@media (prefers-reduced-motion:reduce){.vhs-rew *{animation:none!important}}
@media (max-width:760px){.mn-promo svg.vhs-rew{width:200px;margin:0 auto}}
/* menus promo: tighter spacing, cleaner type */
.mn-promo.mn-menus{row-gap:12px}
.mn-menus svg{width:104px}
.mn-tag{display:inline-block;margin:0 0 8px;padding:4px 12px;border-radius:999px;background:#F7D57A;color:#1C2B4A;font:800 12px/1 "DM Sans",Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.mn-menus h2{margin-bottom:8px}
.mn-menus p{line-height:1.5}
@media (max-width:760px){.mn-menus svg{width:88px;margin-bottom:-4px}}
@media (max-width:700px){
  .back-link{display:inline-block;padding:10px 6px}
  .store-box li a{display:inline-block;padding:8px 0}
}