/* 2. THE BINDER: a Lisa Frank style trapper keeper. Holographic cover,
   puffy stickers with thick outlines, ruled pages on binder rings. */
:root{--ink:#1b1030;--paper:#fffaf3;--rule:#bfe3ff;--margin:#ff8fb8;--pink:#ff4fb4;--violet:#8d50df;--aqua:#2fd4ff;--lime:#ccfd21;--alien:#69d215;--sun:#ffd83d;--outline:3px solid var(--ink);--pop:6px 6px 0 var(--ink)}
body{color:var(--ink);font-family:"Fredoka",system-ui,sans-serif;font-size:17px;background:
  radial-gradient(40% 30% at 15% 20%,rgba(255,255,255,.35),transparent 70%),
  linear-gradient(135deg,#ff5fc1 0%,#b36bff 30%,#5f8bff 50%,#3fe0ff 68%,#9cff3d 86%,#ffe14d 100%) fixed}

.head{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;padding:12px clamp(14px,4vw,40px);background:var(--paper);border-bottom:var(--outline)}
.brand{font:400 1.2rem/1 "Bungee",system-ui;text-decoration:none;color:var(--ink);margin-right:auto}
.brand__text span{color:var(--pink)}
.nav-links{display:flex;gap:6px}
.nav-links a{text-decoration:none;font-weight:600;padding:8px 12px;border-radius:12px}
.nav-links a:hover{background:#ffe3f3}
.menu-btn{background:var(--sun);color:var(--ink);border:var(--outline);box-shadow:3px 3px 0 var(--ink)}
@media (max-width:820px){
  .head{flex-wrap:wrap}
  .nav-links.open{order:5;flex-basis:100%;flex-direction:column;padding:6px 0}
  .nav-links.open a{font-size:1.1rem}
}


.btn{display:inline-block;text-decoration:none;font:700 1rem/1 "Fredoka",system-ui;padding:13px 20px;border-radius:16px;border:var(--outline);cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn--main{background:var(--lime);color:var(--ink)}
.btn--ghost{background:#fff;color:var(--ink)}
.todo{display:inline-block;font:700 .72rem/1 "Fredoka",sans-serif;background:var(--sun);border:2px solid var(--ink);padding:3px 6px;border-radius:6px;vertical-align:middle}

/* ---------- the cover ---------- */
.cover{position:relative;min-height:min(86vh,760px);display:grid;place-items:center;padding:60px clamp(14px,5vw,60px);overflow:hidden;background:
  conic-gradient(from 210deg at 70% 40%,rgba(255,255,255,.0),rgba(255,255,255,.35),rgba(255,255,255,0) 30%,rgba(255,255,255,.25) 55%,rgba(255,255,255,0) 75%),
  radial-gradient(circle at 20% 80%,rgba(255,225,77,.5),transparent 40%)}
.cover__label{position:relative;z-index:2;max-width:760px;background:var(--paper);border:4px solid var(--ink);border-radius:34px;padding:clamp(24px,4vw,48px);box-shadow:10px 10px 0 var(--ink);transform:rotate(-1.2deg)}
.kicker{font-weight:700;color:var(--violet);text-transform:uppercase;letter-spacing:.06em;font-size:.88rem;margin-bottom:10px}
.title{font:400 clamp(2.4rem,7vw,5.4rem)/.95 "Bungee",system-ui;color:var(--pink);-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--aqua),8px 8px 0 var(--ink);margin-bottom:22px}
.title span{display:block;color:var(--sun)}
.lede{font-size:clamp(1.05rem,1.5vw,1.2rem);max-width:36em}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:24px 0 18px}
.status{display:inline-flex;align-items:center;gap:10px;font-weight:700;background:#eaffd6;border:2.5px solid var(--ink);border-radius:999px;padding:7px 14px}
.status__dot{width:12px;height:12px;border-radius:50%;background:#22c55e;border:2px solid var(--ink)}

/* stickers, all drawn with CSS */
.stk{position:absolute;z-index:1;display:block;filter:drop-shadow(4px 4px 0 var(--ink))}
.stk--star{width:110px;aspect-ratio:1;background:var(--sun);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.stk--bolt{width:80px;height:130px;background:var(--aqua);clip-path:polygon(40% 0,100% 0,62% 42%,95% 42%,20% 100%,42% 55%,8% 55%)}
.stk--moon{width:110px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 70% 35%,transparent 38%,var(--violet) 39%)}
.stk--alien{width:150px;height:180px;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;background:
  radial-gradient(ellipse 15% 22% at 34% 52%,var(--ink) 95%,transparent 100%),
  radial-gradient(ellipse 15% 22% at 66% 52%,var(--ink) 95%,transparent 100%),
  radial-gradient(circle at 50% 40%,#c4ff7a,var(--lime) 60%,#5fd61f)}
.s1{top:8%;left:6%;transform:rotate(-12deg)}
.s2{bottom:10%;right:8%;width:150px;transform:rotate(14deg);background:var(--pink)}
.s3{top:12%;right:12%;transform:rotate(18deg)}
.s4{bottom:6%;left:7%;transform:rotate(-10deg)}
.s5{top:46%;right:3%;width:64px;background:#fff}
.s6{top:52%;left:2%;transform:rotate(-20deg)}
@media (max-width:820px){.s3,.s5,.s6{display:none}.s1{width:70px}.s2{width:80px}.s4{width:86px;height:104px}}

/* ---------- the binder ---------- */
.binder{position:relative;max-width:1280px;margin:0 auto;padding:40px clamp(12px,3vw,40px) 70px clamp(64px,7vw,110px);display:grid;gap:56px}
.rings{position:absolute;left:clamp(14px,2.5vw,36px);top:40px;bottom:70px;display:flex;flex-direction:column;justify-content:space-around}
.rings span{width:clamp(34px,4vw,54px);height:clamp(34px,4vw,54px);border-radius:50%;border:7px solid #d9dce8;box-shadow:inset 0 0 0 3px var(--ink),0 0 0 3px var(--ink),4px 4px 0 3px var(--ink);background:transparent}
.sheet{position:relative;background:
  linear-gradient(90deg,transparent 52px,var(--margin) 52px 54px,transparent 54px),
  repeating-linear-gradient(180deg,transparent 0 31px,var(--rule) 31px 32px),
  var(--paper);border:var(--outline);border-radius:8px 26px 26px 8px;box-shadow:var(--pop);padding:clamp(40px,4vw,56px) clamp(18px,4vw,52px) clamp(28px,4vw,48px) clamp(70px,7vw,96px)}
.sheet::before{content:"";position:absolute;left:18px;top:50%;width:18px;height:18px;border-radius:50%;background:#e9e2ff;border:2.5px solid var(--ink);box-shadow:0 -90px 0 -2.5px #e9e2ff,0 -90px 0 0 var(--ink),0 90px 0 -2.5px #e9e2ff,0 90px 0 0 var(--ink)}
.tab{position:absolute;top:-22px;right:clamp(16px,6vw,80px);font:400 1rem/1 "Bungee",system-ui;padding:12px 22px 14px;border:var(--outline);border-radius:16px 16px 0 0;border-bottom:0;background:var(--pink)}
.tab--aqua{background:var(--aqua);right:clamp(120px,22vw,300px)}
.tab--lime{background:var(--lime);right:clamp(16px,14vw,200px)}
.tab--violet{background:#c9a8ff;right:clamp(60px,30vw,420px)}
.tab--sun{background:var(--sun)}
.sheet h2{font:400 clamp(1.8rem,4vw,3rem)/1.05 "Bungee",system-ui;margin-bottom:22px;color:var(--violet);-webkit-text-stroke:1.5px var(--ink)}
.sheet__intro{max-width:40em;margin-bottom:24px;font-size:1.08rem}
@media (max-width:640px){
  .binder{padding-left:12px}
  .rings{display:none}
  .sheet{padding-left:clamp(24px,8vw,40px);background:repeating-linear-gradient(180deg,transparent 0 31px,var(--rule) 31px 32px),var(--paper)}
  .sheet::before{display:none}
  .tab{font-size:.85rem;padding:10px 16px 12px}
  .tab--aqua,.tab--violet,.tab--lime{right:16px}
}

.svc-stickers{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.svc{background:#fff;border:var(--outline);border-radius:22px;padding:20px;box-shadow:5px 5px 0 var(--ink);display:grid;grid-template-rows:auto 1fr auto;gap:8px}
.svc:nth-child(6n+1){background:#ffe3f3}.svc:nth-child(6n+2){background:#e3f8ff}.svc:nth-child(6n+3){background:#efffd9}
.svc:nth-child(6n+4){background:#fff6cc}.svc:nth-child(6n+5){background:#efe6ff}.svc:nth-child(6n){background:#ffe7d6}
.svc:nth-child(odd){transform:rotate(-.8deg)}.svc:nth-child(even){transform:rotate(.8deg)}
.svc h3{font:700 1.25rem/1.15 "Fredoka",sans-serif}
.svc__price{font-weight:700;color:#b0156f}
.note{margin-top:20px}
@media (max-width:980px){.svc-stickers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.svc-stickers{grid-template-columns:1fr}}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filters button{background:#fff;border:2.5px solid var(--ink);border-radius:12px;padding:8px 14px;font-weight:600;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.filters button[aria-pressed="true"]{background:var(--violet);color:#fff}
.grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.tile{background:#fff;border:var(--outline);border-radius:26px;padding:10px;box-shadow:5px 5px 0 var(--ink)}
.tile:nth-child(4n+1){transform:rotate(-1.5deg)}.tile:nth-child(4n+2){transform:rotate(1deg)}.tile:nth-child(4n+3){transform:rotate(-.6deg)}.tile:nth-child(4n){transform:rotate(1.6deg)}
.tile .ph{aspect-ratio:4/5;border-radius:18px}
.tile__beam{top:6px;height:calc(100% - 12px)}
.grid-empty{padding:30px 0}
.beam-hint{margin-top:20px;color:var(--violet)}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.sheet--two{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,48px);align-items:start}
@media (max-width:900px){.sheet--two{grid-template-columns:1fr}}
.rules{counter-reset:r;list-style:none;padding:0;margin:0;display:grid;gap:22px}
.rules li{counter-increment:r;display:grid;grid-template-columns:52px 1fr;gap:4px 14px}
.rules li::before{content:counter(r);grid-row:span 2;width:52px;height:52px;display:grid;place-items:center;font:400 1.4rem/1 "Bungee",system-ui;background:var(--sun);border:var(--outline);border-radius:50%;box-shadow:3px 3px 0 var(--ink)}
.rules li:nth-child(2)::before{background:var(--aqua)}.rules li:nth-child(3)::before{background:var(--pink)}.rules li:nth-child(4)::before{background:var(--lime)}
.rules h3{font:700 1.2rem/1.2 "Fredoka",sans-serif;align-self:end}
.sheet__aside{display:grid;gap:22px}
.reviews{background:#fff6cc;border:var(--outline);border-radius:22px;box-shadow:5px 5px 0 var(--ink);padding:20px;transform:rotate(1deg)}
.reviews__stars{font-size:1.8rem;color:#e6a400;-webkit-text-stroke:1px var(--ink);letter-spacing:.08em}
.reviews__line{font-size:1.15rem}
.reviews__more{margin-top:6px}
.reviews__more a{font-weight:700}
.wait-card{background:#e3f8ff;border:var(--outline);border-radius:22px;box-shadow:5px 5px 0 var(--ink);padding:20px;transform:rotate(-.8deg)}
.wait-card h3{font:700 1.15rem/1.2 "Fredoka",sans-serif;margin-bottom:6px}
.wait-card p{margin-bottom:12px}

#about .lede{margin-bottom:14px}
#about p{margin-bottom:12px}
.credit a{font-weight:700}
.suite-ph{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.suite-ph .ph{aspect-ratio:3/4;border-radius:20px;border:var(--outline);box-shadow:5px 5px 0 var(--ink)}
.suite-ph .ph:first-child{transform:rotate(-2deg)}.suite-ph .ph:last-child{transform:rotate(2deg);margin-top:24px}

.cform{--field-bg:#fff;--field-line:var(--ink);max-width:880px}
.cform input,.cform select,.cform textarea{border-width:2.5px;box-shadow:3px 3px 0 var(--ink)}
.cform input[type=file]{padding:9px}
.cform .check{display:flex;gap:10px;align-items:flex-start;font-weight:500}
.cform .check input{width:22px;height:22px;flex:none;margin-top:2px;box-shadow:none;accent-color:var(--violet)}
.cform [aria-invalid="true"]{border-color:#e0177e;background:#fff0f7}
.cform__steer{background:#fff6cc;border:2.5px solid var(--ink)}
.cform__err{color:#b0156f}
.cform .btn--main{justify-self:start;font-size:1.1rem;padding:15px 24px}
.cform__done{background:#fff;border:var(--outline);box-shadow:var(--pop)}
.cform__done h3{font:400 clamp(1.4rem,3.6vw,2.2rem)/1.1 "Bungee",system-ui;color:var(--pink);-webkit-text-stroke:1.5px var(--ink)}
.wform{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wform label{display:grid;gap:4px;font-weight:600}
.wform input{width:100%;padding:10px 12px;border-radius:12px;border:2.5px solid var(--ink);background:#fff}
.wform .btn{grid-column:1/-1;justify-self:start}
.wform__msg{grid-column:1/-1;font-weight:700}
@media (max-width:420px){.wform{grid-template-columns:1fr}}

.foot{background:var(--ink);color:#fff;text-align:center;padding:40px 16px 50px;display:grid;gap:8px}
.foot__brand{font:400 1.6rem/1 "Bungee",system-ui;color:var(--sun)}
.foot a{color:#9fe9ff}
.foot__credit{font-size:.9rem}
.code{--code-bg:#fffaf3;--code-ink:#1b1030;--code-line:3px solid #1b1030;--code-font:"Bungee",system-ui;box-shadow:8px 8px 0 #1b1030}
.code h2{color:var(--violet)}
.title .title__pre{text-shadow:2px 2px 0 var(--aqua),3px 3px 0 var(--ink);-webkit-text-stroke:1px var(--ink)}

/* the "Choose files" button, in this direction's style */
.cform input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:2.5px solid var(--ink);border-radius:12px;background:var(--sun);color:var(--ink);font:700 .95rem/1 "Fredoka",system-ui;cursor:pointer;box-shadow:3px 3px 0 var(--ink)}
.cform input[type=file]::file-selector-button:hover{background:var(--lime)}

.cover{grid-template-columns:minmax(0,760px) auto;justify-content:center;column-gap:clamp(28px,4vw,64px)}
.cover__logo{position:relative;z-index:2;transform:rotate(5deg)}
.cover__logo .hero-logo{width:clamp(220px,23vw,360px);border:9px solid #fff;outline:3.5px solid var(--ink);border-radius:26px;box-shadow:10px 10px 0 var(--ink)}
@media (max-width:980px){
  .cover{grid-template-columns:1fr;justify-items:center;row-gap:34px}
  .cover__logo{order:-1;transform:rotate(4deg)}
  .cover__logo .hero-logo{width:min(52vw,250px)}
}

.cover__stickers{position:absolute;inset:0;pointer-events:none}

/* the alien sticker is a drawing now, not a blob */
.stk--alien{width:150px;height:auto;border-radius:0;background:none}
.stk--alien svg{display:block;overflow:visible}
@media (max-width:820px){.stk--alien.s4{width:86px;height:auto}}
@media (min-width:821px){.stk--alien.s4{left:1.5%;bottom:5%;width:124px}}

/* screen-size tuning: nothing wider than a small phone, buttons above the
   fold on short laptops, and the logo card smaller when it stacks on top */
.binder{grid-template-columns:minmax(0,1fr)}
@media (min-width:981px){
  .cover{padding-top:clamp(28px,5vh,60px);padding-bottom:clamp(28px,5vh,60px)}
  .title{font-size:clamp(2.4rem,min(7vw,9vh),5.4rem)}
  .cover__label{padding:clamp(22px,min(4vw,4.5vh),48px)}
  .cover__logo .hero-logo{width:clamp(200px,min(23vw,46vh),360px)}
}
@media (max-width:980px){.cover__logo .hero-logo{width:min(52vw,250px,24vh)}}
@media (min-width:861px) and (max-width:980px){
  .cover{grid-template-columns:minmax(0,1fr) auto;justify-items:stretch;row-gap:0;padding-top:clamp(28px,5vh,60px);padding-bottom:clamp(28px,5vh,60px)}
  .cover__logo{order:0;transform:rotate(5deg)}
  .cover__logo .hero-logo{width:min(22vw,40vh)}
  .title{font-size:clamp(2.2rem,min(6.4vw,9vh),5.4rem)}
}

/* dropdowns */
.cform{--dd-arrow:var(--ink);--dd-bg:#fff;--dd-hover-bg:var(--sun);--dd-hover-ink:var(--ink)}
.cform .dd__btn{border-width:2.5px;box-shadow:3px 3px 0 var(--ink)}
.dd__list{border:2.5px solid var(--ink);border-radius:16px;box-shadow:5px 5px 0 var(--ink)}
.dd__opt{font-family:"Fredoka",system-ui,sans-serif;font-weight:600}
.dd__opt[aria-selected="true"]{background:#eaffd6}
.dd__opt.is-active{background:var(--sun)}
.cform .dd__btn[aria-invalid="true"]{border-color:#e0177e;background:#fff0f7}