:root{
  --sun:#ffd23f; --sky:#e9f6ff; --lawn:#1f7a3a; --lawn2:#0f4d24; --ink:#13213a; --soft:rgba(19,33,58,.72);
  --c0:#ff5d8f; --c1:#2fbf71; --c2:#ff9f1c; --c3:#3a86ff;
  --poster:"Bowlby One",Impact,sans-serif; --body:"Karla",system-ui,sans-serif; --marker:"Permanent Marker",cursive;
  --gut:clamp(18px,5vw,80px); --max:1260px; --ease:cubic-bezier(.2,.8,.2,1); --pop:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:500 1.1rem/1.6 var(--body);overflow-x:hidden}
main{overflow-x:clip}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,figure{margin:0}
:focus-visible{outline:3px solid var(--c3);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--ink);color:#fff;padding:10px;z-index:99}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.narrow{max-width:800px}
h1,h2{font-family:var(--poster);font-weight:400;line-height:.95;letter-spacing:-.01em;text-transform:uppercase}
h1{font-size:clamp(2.8rem,7.4vw,6.4rem)}
h2{font-size:clamp(2rem,4.8vw,3.8rem)}
.lede{font-size:clamp(1.15rem,1.6vw,1.35rem);color:var(--soft);max-width:36em}
.btn{display:inline-block;background:var(--ink);color:#fff;font:400 1.1rem/1 var(--poster);text-transform:uppercase;padding:18px 26px 16px;border-radius:14px;border:0;cursor:pointer;text-decoration:none;box-shadow:0 6px 0 #000;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(2px);box-shadow:0 4px 0 #000}
.btn:active{transform:translateY(6px);box-shadow:0 0 0 #000}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:0 6px 0 var(--ink);outline:3px solid var(--ink);outline-offset:-3px}

/* header */
.top{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;gap:20px;padding:14px var(--gut);transition:background .3s,transform .4s var(--ease)}
.top.is-solid{background:rgba(255,255,255,.94);backdrop-filter:blur(8px);box-shadow:0 2px 0 rgba(19,33,58,.08)}
.top.is-away{transform:translateY(-110%)}
.mark{display:flex;align-items:center;gap:10px;font:400 1.3rem/1 var(--poster);text-transform:uppercase;text-decoration:none;margin-right:auto;white-space:nowrap}
.mark .dot{width:26px;height:26px;border-radius:50%;background:var(--c0);box-shadow:inset -4px -4px 0 rgba(0,0,0,.12)}
.top nav{display:flex;gap:6px}
.top nav a{text-decoration:none;font-weight:700;padding:9px 14px;border-radius:999px;background:#fff;box-shadow:0 2px 0 rgba(19,33,58,.15);white-space:nowrap}
.top nav a:hover,.top nav a[aria-current]{background:var(--sun)}
@media (max-width:640px){.mark{font-size:1rem}.mark .dot{width:18px;height:18px}.top nav a{padding:7px 10px;font-size:.88rem}.top nav a:nth-child(3){display:none}}

/* motion */
@media (prefers-reduced-motion:no-preference){
  .js [data-rise]{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
  .js [data-rise].in{opacity:1;transform:none}
  .js [data-pop]{opacity:0;transform:scale(.6) rotate(-8deg)}
  .js [data-pop].in{opacity:1;transform:none;transition:opacity .4s,transform .7s var(--pop);transition-delay:calc(var(--i,0)*70ms)}
  .js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.06em .02em .02em;margin:-.06em -.02em -.02em}
  .js [data-split] .w>span{display:inline-block;transform:translateY(110%);transition:transform .9s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
  .js [data-split].in .w>span{transform:none}
}

/* hero */
.hero{position:relative;min-height:min(100svh,960px);display:grid;align-items:center;padding:110px 0 90px;overflow:hidden;isolation:isolate}
.hero-film{position:absolute;inset:-6% 0 -2%;z-index:-2;will-change:transform}
.hero-film video,.hero-film img{width:100%;height:100%;object-fit:cover;object-position:70% 60%}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(255,255,255,.18),transparent 60%)}
.hero-grid{display:grid}
.poster{position:relative;justify-self:start;width:min(640px,100%);background:var(--sun);padding:clamp(28px,4vw,48px);border-radius:10px;transform:rotate(-2.2deg);box-shadow:0 2px 0 rgba(0,0,0,.08),0 40px 60px -30px rgba(15,40,20,.6),inset 0 0 0 1px rgba(0,0,0,.05);background-image:linear-gradient(115deg,rgba(255,255,255,.35),transparent 40%)}
.staple{position:absolute;top:14px;width:30px;height:5px;background:linear-gradient(#cfd3d8,#8a9097);border-radius:2px}
.staple.s1{left:22px;transform:rotate(-8deg)}.staple.s2{right:22px;transform:rotate(6deg)}
.poster h1{color:var(--ink)}
.poster h1 .hl{display:block;color:var(--c0);font-family:var(--marker);text-transform:none;font-size:1.05em;transform:rotate(-3deg);margin-top:6px}
.poster-sub{font-size:1.15rem;margin:18px 0 20px;max-width:28em}
.lookup{display:flex;gap:8px;background:#fff;border-radius:14px;padding:8px;box-shadow:inset 0 0 0 3px var(--ink)}
.lookup input{flex:1;min-width:0;border:0;font:500 1.2rem var(--body);padding:10px 12px;outline:0;background:transparent;color:var(--ink)}
.lookup button{background:var(--ink);color:#fff;border:0;border-radius:10px;font:400 1rem var(--poster);text-transform:uppercase;padding:0 18px;cursor:pointer}
.stickers{display:flex;flex-wrap:wrap;gap:14px;margin-top:18px;min-height:0}
.stickers:empty{display:none}
.stk{display:grid;justify-items:center;gap:6px;width:112px;text-align:center;text-decoration:none;font-size:.86rem;line-height:1.2;font-weight:700}
@media (prefers-reduced-motion:no-preference){.stk{animation:slap .55s var(--pop) both;animation-delay:calc(var(--i,0)*60ms)}@keyframes slap{0%{opacity:0;transform:scale(1.8) rotate(25deg)}100%{opacity:1;transform:none}}}
.stk.none{width:auto;font-weight:500}
.pause{position:absolute;right:var(--gut);bottom:22px;background:rgba(255,255,255,.85);border:0;border-radius:999px;font:700 .82rem var(--body);padding:8px 14px;cursor:pointer}
@media (max-width:760px){.poster{transform:rotate(-1.2deg)}.hero{padding-top:96px}}

/* price stickers */
.sticker{display:grid;place-items:center;align-content:center;width:96px;height:96px;border-radius:50%;background:var(--c,var(--c0));color:#fff;font:400 1.6rem/1 var(--marker);box-shadow:inset -6px -8px 0 rgba(0,0,0,.12),0 6px 14px -6px rgba(0,0,0,.4);transform:rotate(-8deg);text-shadow:0 1px 0 rgba(0,0,0,.15)}
.sticker small{font:700 .72rem/1 var(--body);text-shadow:none;margin-top:4px;opacity:.95}
.sticker.sm{width:104px;height:104px;font-size:1.7rem}
.sticker.xs{width:auto;height:auto;border-radius:999px;padding:7px 14px 6px;font-size:1.05rem;transform:rotate(-3deg)}

.sec{padding:clamp(70px,10vw,140px) 0}

/* tools */
.tools{background:var(--sky)}
.tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px)}
.tool{position:relative;display:grid;gap:8px;align-content:start;background:#fff;border-radius:22px;padding:34px 28px 30px;text-decoration:none;box-shadow:0 8px 0 var(--ink),inset 0 0 0 3px var(--ink);transition:transform .25s var(--ease),box-shadow .25s}
.tool:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 14px 0 var(--ink),inset 0 0 0 3px var(--ink)}
.tool.t2{transform:rotate(1deg)}.tool.t2:hover{transform:translateY(-6px) rotate(0)}
.tool-dot{position:absolute;top:-26px;right:22px;display:grid;place-items:center;width:62px;height:62px;border-radius:50%;color:#fff;font:400 1.5rem var(--marker);box-shadow:inset -5px -6px 0 rgba(0,0,0,.12)}
.t1 .tool-dot{background:var(--c0)}.t2 .tool-dot{background:var(--c2)}.t3 .tool-dot{background:var(--c1)}
.tool b{font:400 1.7rem/1 var(--poster);text-transform:uppercase}
.tool span:not(.tool-dot){color:var(--soft)}
@media (max-width:820px){.tools-grid{grid-template-columns:1fr;gap:44px}}

/* table section (fixed photo) */
.table-sec{position:relative;isolation:isolate;clip-path:inset(0)}
.table-pic{position:fixed;inset:0;z-index:-1;background:var(--lawn2) center/cover no-repeat}
.table-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(15,77,36,.86),rgba(15,77,36,.72))}
.on-dark{color:#fff;margin-bottom:clamp(30px,5vw,60px);max-width:16ch}
.dots-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px) clamp(14px,2vw,26px)}
.cat{display:grid;justify-items:start;gap:8px;color:#fff;text-decoration:none}
.cat .sticker{transition:transform .4s var(--pop)}
.cat:hover .sticker{transform:rotate(6deg) scale(1.08)}
.cat b{font:400 1.25rem/1.05 var(--poster);text-transform:uppercase}
.cat-ex{opacity:.8;font-size:.95rem}
@media (max-width:900px){.dots-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* sign section */
.sign-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.sign-grid .lede{margin:20px 0 28px}
.sign-photo{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.sign-photo img{width:100%;aspect-ratio:16/11;object-fit:cover}
.sign-photo figcaption{position:absolute;left:12%;top:12%;width:43%;height:56%;display:grid;align-content:center;justify-items:center;text-align:center;font:400 clamp(1.4rem,3vw,2.6rem)/.95 var(--poster);color:var(--ink);transform:rotate(-1deg)}
.sign-photo figcaption small{font:400 .5em/1.2 var(--marker);margin-top:6px}
.sign-photo figcaption span{font-size:1.3em;color:var(--c0)}
@media (max-width:820px){.sign-grid{grid-template-columns:1fr}}

/* tips */
.tips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:40px}
.tip-card{display:grid;gap:6px;padding:26px 28px;border-radius:18px;background:var(--sky);text-decoration:none;border-left:8px solid var(--c2);transition:transform .25s var(--ease),background .25s}
.tip-card:nth-child(2n){border-left-color:var(--c3)}.tip-card:nth-child(3n){border-left-color:var(--c1)}
.tip-card:hover{transform:translateX(6px);background:#fff8d6}
.tip-card b{font:400 1.35rem/1.05 var(--poster);text-transform:uppercase}
.tip-card span{color:var(--soft)}
@media (max-width:760px){.tips{grid-template-columns:1fr}}

/* inner pages */
.page-top{padding:clamp(120px,14vw,180px) 0 clamp(40px,6vw,70px);background:linear-gradient(180deg,var(--sky),#fff)}
.page-top h1{margin-bottom:18px}
.filter-bar{margin:26px 0 18px;max-width:520px}
.filter-bar input{width:100%;font:500 1.15rem var(--body);padding:16px 18px;border-radius:14px;border:3px solid var(--ink);outline:0}
.filter-bar input:focus{box-shadow:0 0 0 4px var(--sun)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips a{text-decoration:none;font-weight:700;font-size:.95rem;padding:8px 14px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 2px var(--ink)}
.chips a:hover{background:var(--sun)}
.guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,46px);padding-bottom:clamp(60px,8vw,110px)}
.guide-cat{scroll-margin-top:90px}
.guide-cat h2{font-size:clamp(1.5rem,2.6vw,2.1rem);padding-bottom:10px;border-bottom:6px solid var(--c,var(--c0));margin-bottom:6px}
.guide-cat ul{list-style:none;padding:0;margin:0}
.guide-cat li{display:flex;align-items:center;gap:10px;padding:11px 0;border-bottom:1px dashed rgba(19,33,58,.2)}
.guide-cat .it{font-weight:700}
.guide-cat .lead{flex:1;border-bottom:2px dotted rgba(19,33,58,.25);transform:translateY(5px)}
.none{grid-column:1/-1;font-size:1.2rem}
@media (max-width:820px){.guide{grid-template-columns:1fr}}
.cta-band{background:var(--sun);padding:clamp(50px,7vw,90px) 0}
.cta-band a{color:var(--c0)}

/* sign maker */
.maker{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,60px);align-items:start;padding-bottom:clamp(60px,8vw,110px)}
.maker-form{display:grid;gap:16px}
.f{display:grid;gap:6px;border:0;padding:0;margin:0}
.f label,.f legend{font-weight:700}
.f input[type=text],.f input:not([type]){font:500 1.1rem var(--body);padding:14px 16px;border-radius:12px;border:3px solid var(--ink);outline:0}
.f input:focus{box-shadow:0 0 0 4px var(--sun)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{cursor:pointer}
.seg input{position:absolute;opacity:0}
.seg span{display:inline-block;padding:10px 16px;border-radius:12px;box-shadow:inset 0 0 0 3px var(--ink);font-weight:700;min-width:52px;text-align:center}
.seg input:checked+span{background:var(--ink);color:#fff}
.seg input:focus-visible+span{outline:3px solid var(--c3);outline-offset:2px}
.colors span{background:var(--sw)}
.colors input:checked+span{background:var(--sw);color:var(--ink);box-shadow:inset 0 0 0 5px var(--ink)}
.maker-go{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.board-wrap{position:sticky;top:90px}
.board{--bg:#ffd23f;aspect-ratio:11/8.5;background:var(--bg);border-radius:8px;display:grid;align-content:center;justify-items:center;text-align:center;gap:2%;padding:5%;box-shadow:0 30px 60px -30px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.06);transform:rotate(-1deg);container-type:inline-size}
.b-head{font:400 15cqw/.9 var(--poster);text-transform:uppercase;color:#111;overflow-wrap:anywhere}
.b-day{font:400 7cqw/1 var(--marker);color:#111}
.b-where{font:700 4.6cqw/1.1 var(--body);color:#111}
.b-arrow{font:400 18cqw/.8 var(--poster);color:#111}
.hint{color:var(--soft);font-size:.95rem;margin-top:22px}
@media (max-width:860px){.maker{grid-template-columns:1fr}.board-wrap{position:static;order:-1}}

/* checklist */
.check{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,3vw,40px);padding-bottom:clamp(60px,8vw,110px)}
.check-group h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:10px}
.check-row{display:flex;gap:12px;align-items:flex-start;padding:10px 0;cursor:pointer;border-bottom:1px dashed rgba(19,33,58,.2)}
.check-row input{position:absolute;opacity:0}
.check-row .box{flex:0 0 28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 3px var(--ink);display:grid;place-items:center;transition:background .2s}
.check-row input:checked+.box{background:var(--c1);box-shadow:inset 0 0 0 3px var(--c1)}
.check-row input:checked+.box::after{content:"✓";color:#fff;font-weight:700}
.check-row input:checked~span:last-child{text-decoration:line-through;color:var(--soft)}
.check-row input:focus-visible+.box{outline:3px solid var(--c3);outline-offset:2px}
.link-btn{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;text-decoration-color:var(--c0);text-decoration-thickness:3px;text-underline-offset:4px;cursor:pointer;font-weight:700}
@media (max-width:760px){.check{grid-template-columns:1fr}}

/* tips pages */
.crumb{font-weight:700;color:var(--soft);margin-bottom:14px}.crumb a{text-decoration:none}
.prose{margin-top:30px;font-size:1.15rem;line-height:1.75}
.prose>*+*{margin-top:1em}
.prose h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-top:1.6em}
.prose a{text-decoration:underline;text-decoration-color:var(--c0);text-decoration-thickness:3px;text-underline-offset:4px;font-weight:700}
.prose ul{padding-left:1.2em}.prose li+li{margin-top:.4em}
.more{padding:30px var(--gut) 90px;display:grid;gap:14px}
.more h2{font-size:1.6rem}

/* footer */
.foot{background:var(--lawn2);color:#e6f4ea;padding:clamp(50px,7vw,90px) 0 30px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:30px}
.foot-name{font:400 2rem/1 var(--poster);text-transform:uppercase;color:var(--sun);margin-bottom:10px}
.foot-h{font:400 1rem var(--poster);text-transform:uppercase;color:var(--sun);margin-bottom:8px}
.foot a{display:block;padding:3px 0;text-decoration:none}.foot a:hover{color:var(--sun)}
.foot-note{margin-top:40px;font-size:.92rem;opacity:.8}
.foot-note a{display:inline;text-decoration:underline}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr}}

@media print{
  body *{visibility:hidden}
  .signpage .board,.signpage .board *{visibility:visible}
  .signpage .board{position:fixed;inset:0;transform:none;border-radius:0;box-shadow:none;aspect-ratio:auto;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body:not(.signpage) .check,body:not(.signpage) .check *,body:not(.signpage) .page-top h1{visibility:visible}
  @page{size:landscape;margin:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.hero-grid{grid-template-columns:minmax(0,1fr)}
.poster{max-width:100%}
@media (max-width:440px){.top{gap:8px;padding:12px 14px}.mark{font-size:.92rem;gap:6px}.top nav{gap:4px}.top nav a{padding:6px 9px;font-size:.8rem}.lookup button{padding:0 12px;font-size:.85rem}.poster{transform:rotate(-1deg)}}