/* Origami in Paper Land: shared styles. Most layout lives inline in the pages (from the design). */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#FFF8F0}
.page{font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;color:#4A3428;background:#FFF8F0;min-height:100vh;overflow-x:hidden}
a{color:#B8561F}a:hover{color:#8E3F12}
h1,h2,h3{font-family:'Fredoka',system-ui,sans-serif;font-weight:600;margin:0}
p{margin:0}
button{font-family:inherit}
button:disabled{opacity:.4;cursor:default}
a:focus-visible,button:focus-visible{outline:3px solid #B8561F;outline-offset:3px}
[hidden]{display:none!important}

/* pictures cannot be dragged, selected or long-pressed to save */
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;pointer-events:none}

/* seasonal stickers: shown by the date script in <head> */
.s-h,.s-x{display:none}
html[data-season="halloween"] .s-h,html[data-season="christmas"] .s-x{display:contents}

/* click-to-play YouTube */
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;margin:0;border-radius:24px;overflow:hidden;cursor:pointer}
.yt img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .2s}
.yt:hover .yt-play{transform:translate(-50%,-50%) scale(1.08)}
.yt iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* step viewer chips */
.st-chip{width:44px;height:44px;border-radius:12px;font-weight:700;font-size:15px;cursor:pointer;background:#FFF8F0;color:#4A3428;border:2px solid #F1DFCB}
.st-chip[aria-current="step"]{background:#B8561F;color:#FFFFFF;border-color:#B8561F}

/* Halloween slideshow dots */
.hw-dot{height:12px;width:12px;border-radius:999px;border:none;padding:0;cursor:pointer;background:#C27A7F;transition:width .2s}
.hw-dot[aria-current="true"]{width:32px;background:#F6B27A}

/* ad slots stay hidden until AdSense is switched on */
.ad-bar{position:sticky;bottom:0;z-index:5;background:#FFF8F0;border-top:1px solid #F1DFCB}

/* text pages */
.prose h2{font-size:24px;margin-top:10px}
.prose p{font-size:17px;line-height:1.65;color:#5B4335}

/* animations */
@keyframes pl-fly{0%{transform:translate(-140px,0)}35%{transform:translate(calc(100vw + 40px),-40px)}100%{transform:translate(calc(100vw + 40px),-40px)}}
@keyframes pl-flap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.4)}}
@keyframes pl-drift{0%,100%{transform:translate(0,0)}50%{transform:translate(36px,-14px)}}
@keyframes pl-drip{0%{height:0;opacity:1}28%{height:78px;opacity:1}38%{height:90px;opacity:0}100%{height:0;opacity:0}}
@keyframes pl-glow{0%,100%{opacity:.95}50%{opacity:.55}}
.pl-witch{animation:pl-fly 26s linear 4s infinite}
.pl-bat{animation:pl-drift 9s ease-in-out infinite}
.pl-wing{animation:pl-flap .5s ease-in-out infinite;transform-origin:50% 45%}
.pl-drip{animation:pl-drip 30s ease-in infinite}
.pl-glow{animation:pl-glow 3s ease-in-out infinite}
@keyframes pl-bflap{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.3)}}
@keyframes pl-f1{0%{transform:translate(0,0)}25%{transform:translate(120px,-40px)}50%{transform:translate(220px,10px)}75%{transform:translate(90px,50px)}100%{transform:translate(0,0)}}
@keyframes pl-f2{0%{transform:translate(0,0)}30%{transform:translate(-140px,30px)}60%{transform:translate(-60px,-50px)}100%{transform:translate(0,0)}}
@keyframes pl-f3{0%{transform:translate(0,0)}40%{transform:translate(90px,60px)}70%{transform:translate(-40px,30px)}100%{transform:translate(0,0)}}
@keyframes pl-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes pl-wave{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.pl-bf{animation:pl-bflap 1.4s ease-in-out infinite;transform-origin:50% 50%}
.pl-f1{animation:pl-f1 26s ease-in-out infinite}.pl-f2{animation:pl-f2 22s ease-in-out infinite}.pl-f3{animation:pl-f3 30s ease-in-out infinite}
.pl-sway{animation:pl-sway 7s ease-in-out infinite}
.pl-wave{animation:pl-wave 28s linear infinite}
@keyframes pl-kb1{0%{transform:scale(1.02) translate(0,0)}100%{transform:scale(1.12) translate(-2%,-1%)}}
@keyframes pl-kb2{0%{transform:scale(1.12) translate(1%,0)}100%{transform:scale(1.02) translate(-1%,1%)}}
@keyframes pl-xfade{0%,40%{opacity:0}50%,90%{opacity:.45}100%{opacity:0}}
.pl-kb1{animation:pl-kb1 40s ease-in-out infinite alternate;transform-origin:50% 50%}
.pl-kb2{animation:pl-kb2 40s ease-in-out infinite alternate,pl-xfade 40s ease-in-out infinite;transform-origin:50% 50%}
@media (prefers-reduced-motion: reduce){
  .pl-kb1,.pl-kb2,.pl-bf,.pl-f1,.pl-f2,.pl-f3,.pl-sway,.pl-wave,.pl-witch,.pl-bat,.pl-wing,.pl-drip,.pl-glow{animation:none}
  .pl-witch{display:none}
}

/* phones */
@media (max-width: 600px){
  #top h1{font-size:40px!important}
  #halloween h1{font-size:36px!important}
  #top,#halloween>div:last-child{gap:28px!important}
  #top>div,#halloween>div>div{flex-basis:100%!important}
  #top{padding-top:32px!important}
  section h2{font-size:28px!important}
  #app>div{padding:28px!important}
  header nav a{padding:10px 10px!important}
}