:root{
  --cream:#fff6e3; --paper:#fffaf0; --ink:#3b2a2a; --red:#d6453d; --green:#2f7d5b;
  --pink:#f9c6d0; --mint:#bfe8d6; --butter:#ffe59a; --sky:#bfddf2; --lilac:#e3d4f2;
  --shadow:8px 8px 0 var(--ink);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; color:var(--ink); background:var(--cream);
  background-image:radial-gradient(rgba(214,69,61,.09) 1.3px,transparent 1.5px);
  background-size:14px 14px;
  font-family:'Nunito',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  font-size:1.2rem; line-height:1.6;
}
h1,h2,h3{font-family:'Alfa Slab One','Rockwell',Georgia,serif; font-weight:400; line-height:1.15; margin:0 0 .5em}
a{color:var(--red)}
a:focus-visible,button:focus-visible{outline:4px solid var(--green); outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.8rem 1.2rem;z-index:99}
.skip:focus{left:0}
.wrap{max-width:1100px; margin:0 auto; padding:0 1.2rem}

/* masthead */
.masthead{text-align:center; padding:1.6rem 0 1rem}
.masthead .rule{border-top:6px double var(--ink); border-bottom:2px solid var(--ink); padding:.35rem 0; font-weight:800; letter-spacing:.14em; text-transform:uppercase; font-size:.85rem}
.masthead h1{font-size:clamp(2.6rem,9vw,5.6rem); color:var(--red); margin:.25em 0 .1em; text-shadow:3px 3px 0 var(--butter); letter-spacing:.01em}
.masthead .tag{font-size:1.3rem; margin:0 0 .8rem; font-weight:700}
.nav{display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin:.4rem 0 1.4rem}
.nav a{display:inline-block; text-decoration:none; color:var(--ink); font-weight:800; background:var(--paper); border:3px solid var(--ink); border-radius:999px; padding:.55rem 1.3rem; box-shadow:3px 3px 0 var(--ink)}
.nav a:hover,.nav a[aria-current="page"]{background:var(--butter)}

/* buttons */
.btn{display:inline-block; font-family:'Alfa Slab One',Georgia,serif; font-size:1.25rem; text-decoration:none; color:#fff; background:var(--red); border:4px solid var(--ink); border-radius:14px; padding:.8rem 1.6rem; box-shadow:5px 5px 0 var(--ink); cursor:pointer; transition:transform .12s, box-shadow .12s}
.btn:hover{transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink)}
.btn.green{background:var(--green)}
.btn.small{font-size:1rem; padding:.55rem 1.1rem; box-shadow:4px 4px 0 var(--ink)}

/* comic panels */
.panels{display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin:1rem 0 2.4rem}
.panel{position:relative; background:var(--paper); border:5px solid var(--ink); border-radius:20px; box-shadow:var(--shadow); padding:1.6rem 1.4rem 1.8rem; text-align:center; overflow:hidden}
.panel.santa{background:var(--pink)}
.panel.store{background:var(--mint)}
.panel h2{font-size:clamp(1.7rem,4vw,2.3rem)}
.panel p{margin:.2rem 0 1.1rem}
.panel .num{position:absolute; top:.6rem; left:.8rem; background:var(--butter); border:3px solid var(--ink); border-radius:50%; width:2.4rem; height:2.4rem; display:grid; place-items:center; font-family:'Alfa Slab One',serif; font-size:1.1rem}

/* magic door */
.door-link{display:block; text-decoration:none; margin:.4rem auto 1rem; width:min(250px,70%)}
.door-frame{position:relative; height:270px; border:6px solid var(--ink); border-bottom-width:8px; border-radius:125px 125px 0 0; background:radial-gradient(circle at 50% 60%, #fff7c2 0%, var(--butter) 45%, #ffcf5c 100%); perspective:900px; overflow:hidden}
.door-glow{position:absolute; inset:0; display:grid; place-items:center; font-size:4.2rem}
.door{position:absolute; inset:0; background:linear-gradient(90deg,#9d2f2a,var(--red) 40%,#b83a33); border-radius:119px 119px 0 0; transform-origin:left center; transition:transform .9s cubic-bezier(.5,.1,.3,1); border-right:4px solid var(--ink)}
.door::before{content:""; position:absolute; left:50%; top:16%; width:96px; height:96px; transform:translateX(-50%); border-radius:50%; border:12px solid var(--green); box-shadow:inset 0 0 0 4px #1d5a40; background:radial-gradient(circle,transparent 52%,rgba(0,0,0,.08) 53%)}
.door::after{content:""; position:absolute; right:14%; top:58%; width:20px; height:20px; border-radius:50%; background:var(--butter); border:3px solid var(--ink)}
.door .bow{position:absolute; left:50%; top:calc(16% + 76px); transform:translateX(-50%); font-size:2rem}
.panel.open .door{transform:rotateY(-108deg)}
.panel.open .door-glow{animation:pop .9s ease}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:scale(1)}}

/* storefront */
.shopfront{margin:.4rem auto 1rem; width:min(280px,80%)}
.awning{height:56px; border:5px solid var(--ink); border-radius:14px 14px 0 0; background:repeating-linear-gradient(90deg,var(--red) 0 36px,#fff 36px 72px)}
.shopbody{border:5px solid var(--ink); border-top:0; background:var(--paper); padding:.7rem .5rem .9rem}
.sign{font-family:'Alfa Slab One',serif; font-size:1rem; color:var(--green); border:3px dashed var(--green); border-radius:8px; padding:.2rem .4rem; margin:0 0 .5rem}
.shelf{display:flex; justify-content:space-around; font-size:2.2rem; border-bottom:6px solid #a8743c; padding-bottom:.2rem}

/* strips */
.strip{background:var(--sky); border:5px solid var(--ink); border-radius:20px; box-shadow:var(--shadow); padding:1.4rem; margin:0 0 2.4rem}
.strip.two{display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; background:var(--butter)}
.strip h2{font-size:1.7rem}
.note{background:var(--paper); border:3px dashed var(--ink); border-radius:12px; padding:.7rem 1rem; font-size:1.05rem}

/* santa page */
.hero{border:5px solid var(--ink); border-radius:20px; box-shadow:var(--shadow); background:var(--paper); overflow:hidden; margin-bottom:2rem}
.hero img{display:block; width:100%; height:auto}
.hero .cap{padding:1rem 1.4rem; text-align:center; background:var(--butter); border-top:5px solid var(--ink); font-weight:800}
h1.pagehead{font-size:clamp(2rem,6vw,3.4rem); color:var(--red); text-align:center; text-shadow:2px 2px 0 var(--butter)}
.lead{text-align:center; font-size:1.3rem; max-width:44rem; margin:0 auto 1.6rem}
.cards{display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin:0 0 2.4rem}
.card{background:var(--paper); border:5px solid var(--ink); border-radius:20px; box-shadow:var(--shadow); padding:1.4rem; display:flex; flex-direction:column}
.card .price{font-family:'Alfa Slab One',serif; font-size:2.4rem; color:var(--red)}
.card ul{padding-left:1.3rem; margin:.4rem 0 1.2rem}
.card .btn{align-self:flex-start; margin-top:auto}
.art{border:4px solid var(--ink); border-radius:14px; margin:0 0 1rem; height:150px; display:grid; place-items:center; font-size:3.4rem; background:linear-gradient(135deg,var(--lilac),var(--pink))}
.card img.cover{display:block; width:100%; height:auto; border:4px solid var(--ink); border-radius:14px; margin:0 0 1rem}
.steps{counter-reset:s; list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.steps li{counter-increment:s; background:var(--paper); border:4px solid var(--ink); border-radius:16px; padding:1rem; position:relative; padding-top:2.2rem}
.steps li::before{content:counter(s); position:absolute; top:-1rem; left:1rem; background:var(--red); color:#fff; border:3px solid var(--ink); border-radius:50%; width:2.2rem; height:2.2rem; display:grid; place-items:center; font-family:'Alfa Slab One',serif}

/* shop */
.disclosure{background:var(--butter); border:4px solid var(--ink); border-radius:14px; padding:.9rem 1.2rem; font-weight:800; text-align:center; margin:0 0 2rem}
.collection{margin:0 0 2.6rem}
.collection > h2{font-size:clamp(1.7rem,4vw,2.4rem); display:inline-block; background:var(--paper); border:4px solid var(--ink); border-radius:12px; padding:.2rem 1rem; box-shadow:4px 4px 0 var(--ink); margin-bottom:1.2rem}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.4rem}
.item{display:flex; flex-direction:column; background:var(--paper); border:4px solid var(--ink); border-radius:16px; box-shadow:5px 5px 0 var(--ink); overflow:hidden}
.item .tile{height:90px; display:grid; place-items:center; font-size:2.6rem; border-bottom:4px solid var(--ink)}
.item .body{padding:1rem 1rem 1.2rem; display:flex; flex-direction:column; flex:1}
.item h3{font-size:1.1rem; line-height:1.25}
.item p{margin:0 0 1rem; font-size:1.05rem}
.item .btn{margin-top:auto; align-self:flex-start}
.t-toys{background:var(--butter)} .t-ready{background:var(--pink)} .t-snack{background:var(--mint)}

footer{border-top:6px double var(--ink); margin-top:2rem; padding:1.6rem 0 2.4rem; text-align:center; font-size:1.05rem}
footer p{margin:.4rem auto; max-width:44rem}

@media (max-width:760px){
  body{font-size:1.15rem}
  .panels,.strip.two,.cards,.steps{grid-template-columns:1fr}
  .panel .num{position:static; margin:0 auto .5rem}
}
@media (prefers-reduced-motion:reduce){
  .door,.btn{transition:none} .panel.open .door-glow{animation:none}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}