/* Mall Santa Mayhem site: a kid's Christmas wish list on wrapping paper */
:root{
  --paper:#fffdf6; --line:#cfe0f5; --margin:#f2a0a0; --ink:#26314f; --pencil:#5b6377;
  --red:#e23b3b; --green:#22a35a; --gold:#f4b400; --blue:#2f6fdf;
  --wrap-a:#c8202f; --tape:rgba(255,236,170,.75);
  --shadow:0 14px 30px -12px rgba(40,20,10,.45);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
html,body{margin:0}
body{color:var(--ink);font-family:"Patrick Hand",cursive;font-size:21px;line-height:1.45;overflow-x:hidden;
  background-color:var(--wrap-a);
  background-image:
    radial-gradient(circle at 25% 25%,rgba(255,255,255,.95) 0 3px,transparent 4px),
    radial-gradient(circle at 75% 75%,rgba(255,215,90,.95) 0 3px,transparent 4px),
    repeating-linear-gradient(45deg,transparent 0 26px,rgba(0,0,0,.06) 26px 52px);
  background-size:64px 64px,64px 64px,auto}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0}
h1,h2,h3{font-family:"Permanent Marker",cursive;font-weight:400;margin:0;line-height:1.1;text-wrap:balance}
.wrap{max-width:1120px;margin:0 auto;padding-inline:24px}
.center{text-align:center}
.pencil{color:var(--pencil)}
:focus-visible{outline:3px dashed var(--gold);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:#fff;padding:8px 14px;border-radius:6px}
.skip:focus{left:8px}

/* top ribbon */
.ribbon{position:sticky;top:0;z-index:40;background:var(--green);border-bottom:4px solid #167a42;box-shadow:0 6px 16px -6px rgba(0,0,0,.45)}
.ribbon-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:8px}
.ribbon img{height:42px;width:auto}
.ribbon nav{display:flex;gap:18px;color:#fff;font-size:20px}
.ribbon nav a:hover{text-decoration:underline wavy}

/* buttons */
.stamp-btn{font-family:"Permanent Marker";font-size:19px;color:#fff;background:var(--red);padding:12px 22px;border-radius:6px;display:inline-flex;gap:10px;align-items:center;
  box-shadow:0 0 0 3px #fff,0 0 0 6px var(--red),0 10px 20px -6px rgba(0,0,0,.5);transform:rotate(-2deg);transition:transform .15s}
.stamp-btn:hover{transform:rotate(1deg) scale(1.05)}
.stamp-btn.sm{font-size:15px;padding:7px 14px;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--red);white-space:nowrap}
.scribble-btn{font-family:"Permanent Marker";font-size:18px;color:var(--ink);padding:10px 18px;border:3px solid var(--ink);border-radius:255px 15px 225px 15px/15px 225px 15px 255px;display:inline-flex;gap:8px;align-items:center;background:#fff}
.scribble-btn:hover{background:#fff4c2}

/* lined paper */
.sheet{background:var(--paper);position:relative;box-shadow:var(--shadow);border-radius:3px;
  background-image:linear-gradient(90deg,transparent 64px,var(--margin) 64px 66px,transparent 66px),repeating-linear-gradient(180deg,transparent 0 33px,var(--line) 33px 35px);
  background-position:0 0,0 18px;padding:46px 40px 46px 92px}
.tape{position:absolute;width:120px;height:32px;background:var(--tape);box-shadow:0 2px 4px rgba(0,0,0,.12);z-index:3}
.tape.tl{top:-14px;left:30px;transform:rotate(-8deg)} .tape.tr{top:-14px;right:30px;transform:rotate(7deg)}
.tape.c{top:-16px;left:50%;transform:translateX(-50%) rotate(-3deg)}

/* hero */
.hero{padding:44px 0 70px}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:center}
.letter{transform:rotate(-1.5deg)}
.letter .dear{font-size:clamp(30px,4vw,42px);color:var(--red)}
.letter .intro{margin:8px 0 6px;color:var(--pencil)}
.checks{list-style:none;padding:0;margin:0}
.checks li{display:flex;gap:12px;align-items:flex-start;min-height:35px}
.box{flex:none;width:26px;height:26px;border:2.5px solid var(--ink);border-radius:4px 7px 5px 6px;margin-top:4px;position:relative}
.box svg{position:absolute;left:-4px;top:-10px;width:38px;height:38px;overflow:visible}
.box path{fill:none;stroke:var(--green);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .45s ease}
.checks li.on .box path{stroke-dashoffset:0}
.checks li.gold .box path{stroke:var(--gold)}
.sign{margin-top:16px;font-family:"Permanent Marker";color:var(--blue);font-size:24px;transform:rotate(-3deg);display:inline-block}
.hero-right{display:flex;flex-direction:column;gap:22px;align-items:center}
.logo-sticker{width:min(520px,90%);filter:drop-shadow(0 6px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 12px 18px rgba(0,0,0,.45));transform:rotate(3deg)}
.polaroid{margin:0;width:100%;background:#fff;padding:12px 12px 46px;box-shadow:var(--shadow);position:relative;transform:rotate(2deg)}
.polaroid video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.polaroid figcaption{position:absolute;left:16px;bottom:10px;font-size:22px;color:var(--pencil)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center}
.note-date{background:#fff59d;padding:10px 16px;font-size:22px;box-shadow:var(--shadow);transform:rotate(-3deg)}

/* sections */
section{padding-block:56px}
.title-card{display:inline-block;background:#fff;padding:10px 24px;box-shadow:var(--shadow);transform:rotate(-1.5deg);margin-bottom:26px;position:relative}
.title-card h1,.title-card h2{font-size:clamp(28px,4vw,42px)}
.title-card.g{background:#d9f7e3} .title-card.y{background:#fff59d} .title-card.b{background:#d7e8ff}
.lead-white{color:#fff;max-width:60ch;margin:-6px 0 28px;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.lead-white.center{margin-inline:auto}

/* trailer TV */
.tv{max-width:960px;margin:0 auto;background:#fff;padding:16px 16px 56px;box-shadow:var(--shadow);position:relative;transform:rotate(-.6deg)}
.tv .screen{position:relative;aspect-ratio:16/9;background:#000}
.tv video{width:100%;height:100%}
.tv button{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center}
.tv button:focus-visible{outline:3px dashed var(--gold)}
.tv button img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.star{position:relative;width:130px;height:130px;display:grid;place-items:center;font-family:"Permanent Marker";color:#fff;font-size:22px;background:var(--gold);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);transition:transform .2s}
.tv button:hover .star{transform:scale(1.1) rotate(10deg)}
.tv .cap{position:absolute;left:22px;bottom:14px;font-size:24px;color:var(--pencil)}

/* sticky notes */
.notes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.note{padding:22px 20px 24px;box-shadow:var(--shadow);position:relative;font-size:19px;background:#fff59d}
.notes .note:nth-child(6n+1){background:#fff59d;transform:rotate(-2deg)} .notes .note:nth-child(6n+2){background:#ffd1e3;transform:rotate(1.5deg)}
.notes .note:nth-child(6n+3){background:#c9f0ff;transform:rotate(-1deg)} .notes .note:nth-child(6n+4){background:#d9f7e3;transform:rotate(2deg)}
.notes .note:nth-child(6n+5){background:#ffe0b8;transform:rotate(-1.5deg)} .notes .note:nth-child(6n){background:#e6dcff;transform:rotate(1deg)}
.note h3{font-size:24px;margin-bottom:6px;padding-right:40px}
.note .doodle{font-size:36px;position:absolute;right:14px;top:10px}
.also{list-style:none;padding:18px 24px;margin:34px auto 0;max-width:820px;background:#fff;box-shadow:var(--shadow);transform:rotate(.6deg);display:flex;flex-direction:column;gap:4px}

/* photos */
.pile{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.pile button{all:unset;cursor:zoom-in;background:#fff;padding:9px 9px 38px;box-shadow:var(--shadow);position:relative;transition:transform .2s}
.pile button:focus-visible{outline:3px dashed var(--gold)}
.pile button:nth-child(4n+1){transform:rotate(-3deg)} .pile button:nth-child(4n+2){transform:rotate(2deg) translateY(10px)}
.pile button:nth-child(4n+3){transform:rotate(-1deg)} .pile button:nth-child(4n){transform:rotate(3deg) translateY(-6px)}
.pile button:hover{transform:rotate(0) scale(1.06);z-index:2}
.pile img{aspect-ratio:4/3;object-fit:cover;width:100%}
.pile span:not(.tape){position:absolute;left:12px;bottom:6px;font-size:19px;color:var(--pencil)}
.pile .tape{width:70px;height:22px;top:-10px;left:50%;transform:translateX(-50%) rotate(-4deg)}

/* route map */
.map{position:relative;padding:20px 0}
.map::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:5px dashed rgba(255,255,255,.75);transform:translateX(-50%)}
.stop{display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;margin-bottom:26px}
.stop .dot{width:64px;height:64px;border-radius:50%;background:#fff;display:grid;place-items:center;font-family:"Permanent Marker";font-size:30px;color:var(--red);box-shadow:var(--shadow);margin:auto;position:relative;z-index:2;border:4px solid var(--red)}
.stop.race .dot{color:var(--blue);border-color:var(--blue)} .stop.final .dot{color:var(--gold);border-color:var(--gold)}
.stop .card{background:var(--paper);padding:12px 12px 16px;box-shadow:var(--shadow);display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:center}
.stop:nth-child(odd) .card{grid-column:1;grid-row:1;transform:rotate(-1.5deg)} .stop:nth-child(even) .card{grid-column:3;grid-row:1;transform:rotate(1.5deg)}
.stop .dot{grid-column:2;grid-row:1}
.stop .card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.stop h3{font-size:22px}
.stop p{font-size:18px;color:var(--pencil)}
.stop .tag{font-family:"Nunito";font-weight:800;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--red)}
.stop.race .tag{color:var(--blue)} .stop.final .tag{color:#b88400}

/* hat stickers */
.stickers{display:grid;grid-template-columns:1.2fr 1fr;gap:34px;align-items:start}
.sheet-hats{background:#fff;padding:22px;box-shadow:var(--shadow);border-radius:14px;display:grid;grid-template-columns:repeat(6,1fr);gap:12px;transform:rotate(-1deg);
  background-image:radial-gradient(#e7e7e7 1px,transparent 1px);background-size:14px 14px}
.sheet-hats img{border-radius:50%;border:5px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.25);transition:transform .2s;width:100%}
.sheet-hats img:nth-child(3n){transform:rotate(8deg)} .sheet-hats img:nth-child(3n+1){transform:rotate(-6deg)}
.sheet-hats img:hover{transform:scale(1.15) rotate(0)}
.sheet-hats .more{grid-column:1/-1;text-align:center;color:var(--pencil);font-size:19px}
.famlist{padding-top:40px}
.famlist h3{font-size:28px;color:var(--red)}
.famlist ul{padding:0;margin:8px 0 0;list-style:none}
.famlist li{margin-bottom:2px}
.famlist .u{color:var(--green)} .famlist .d{color:var(--red)}

/* faq */
.faq{max-width:860px;margin:0 auto;transform:rotate(-.5deg)}
.faq details{border-bottom:2px dashed var(--line);padding:6px 0}
.faq summary{cursor:pointer;font-family:"Permanent Marker";font-size:22px;list-style:none;display:flex;gap:10px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"?";color:var(--red);font-size:24px;width:18px}
.faq details[open] summary::before{content:"!";color:var(--green)}
.faq details p{padding:2px 0 6px 28px;color:var(--pencil)}

/* P.S. notes */
.ps{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.ps .note{font-size:20px}
.ps .note:first-child{background:#ffd1e3;transform:rotate(-1.5deg)} .ps .note:last-child{background:#fff59d;transform:rotate(1.2deg)}
.ps .note h3{font-size:28px}
.ps .note p{margin:8px 0 16px}

/* envelope */
.envelope{max-width:720px;margin:0 auto;background:#f3e2c0;position:relative;box-shadow:var(--shadow);padding:120px 40px 44px;text-align:center;overflow:hidden}
.envelope::before{content:"";position:absolute;top:0;left:0;right:0;height:120px;background:#e8d2a6;clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 4px 2px rgba(0,0,0,.15))}
.envelope .addr{font-size:26px;line-height:1.3}
.envelope .addr b{font-family:"Permanent Marker";font-weight:400;font-size:34px;color:var(--red)}
.postmark{position:absolute;top:22px;right:26px;width:100px;height:100px;border:3px dashed var(--blue);border-radius:50%;display:grid;place-items:center;color:var(--blue);font-family:"Nunito";font-weight:800;font-size:12px;transform:rotate(12deg);text-align:center;line-height:1.2;z-index:2}
.envelope .stamp-btn{margin-top:24px;font-size:24px;padding:14px 28px}

/* footer */
.site-foot{padding:24px 0 44px;color:#fff;font-size:19px;text-align:center}
.site-foot a{text-decoration:underline}
.socials{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px;margin-bottom:10px;font-family:"Permanent Marker"}
.socials a{text-decoration:none;background:rgba(0,0,0,.18);padding:4px 14px;border-radius:999px}
.socials a:hover{background:rgba(0,0,0,.32)}

/* lightbox */
.lightbox{border:0;padding:12px 12px 44px;background:#fff;max-width:min(1100px,94vw);overflow:visible}
.lightbox::backdrop{background:rgba(60,8,12,.88)}
.lightbox img{width:100%}
.lb-cap{position:absolute;left:16px;bottom:10px;font-size:20px;color:var(--pencil)}
.lb-x{position:absolute;top:-18px;right:-18px;width:42px;height:42px;border-radius:50%;border:0;background:var(--red);color:#fff;font-size:28px;line-height:1;cursor:pointer;box-shadow:0 0 0 3px #fff}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:0;background:#fff;color:var(--ink);font-size:34px;line-height:1;cursor:pointer;box-shadow:var(--shadow)}
.lb-nav.prev{left:-20px} .lb-nav.next{right:-20px}

/* press page */
.press-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:start}
.press-grid > *{min-width:0}
.facts{width:100%;border-collapse:collapse;font-size:20px}
.facts th{text-align:left;font-family:"Permanent Marker";font-weight:400;padding:2px 14px 2px 0;vertical-align:top;white-space:nowrap;color:var(--red)}
.facts td{padding:2px 0}
.downloads{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.downloads a{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#fff;padding:14px 18px;box-shadow:var(--shadow);border-left:8px solid var(--green)}
.downloads a:hover{background:#f3fff7}
.downloads small{color:var(--pencil);font-size:16px;white-space:nowrap}
.downloads b{font-family:"Permanent Marker";font-weight:400;font-size:20px}
.press-shots{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.press-shots a{background:#fff;padding:6px;box-shadow:var(--shadow);display:block}
.press-shots img{aspect-ratio:16/9;object-fit:cover;width:100%}
.copy-box{white-space:pre-wrap;font-size:19px}

@media (max-width:900px){
  .ribbon nav{display:none}
  .hero-grid,.stickers,.ps,.press-grid{grid-template-columns:1fr}
  .hero-right{order:-1}
  .notes{grid-template-columns:1fr 1fr}
  .pile,.press-shots{grid-template-columns:1fr 1fr}
  .map::before{left:32px}
  .stop{grid-template-columns:64px 1fr;gap:14px}
  .stop:nth-child(n) .card{grid-column:2;grid-row:1}
  .stop .dot{grid-column:1}
  .lb-nav.prev{left:4px} .lb-nav.next{right:4px}
  .lb-x{right:-6px}
}
@media (max-width:560px){
  body{font-size:19px}
  .wrap{padding-inline:16px}
  .sheet{padding:40px 18px 34px 52px;background-image:linear-gradient(90deg,transparent 36px,var(--margin) 36px 38px,transparent 38px),repeating-linear-gradient(180deg,transparent 0 33px,var(--line) 33px 35px)}
  .notes{grid-template-columns:1fr}
  .stop .card{grid-template-columns:1fr}
  .ribbon img{height:34px}
  .sheet-hats{grid-template-columns:repeat(4,1fr);gap:8px;padding:16px}
  .envelope{padding:110px 18px 34px}
  .postmark{width:80px;height:80px;font-size:10px;right:14px;top:14px}
  .facts{font-size:18px}
  .facts th{white-space:normal}
  .downloads a{flex-direction:column;align-items:flex-start;gap:2px}
  .downloads small{white-space:normal}
  .facts td{overflow-wrap:anywhere}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .box path,.stamp-btn,.pile button,.sheet-hats img,.star{transition:none}
}