@font-face{font-family:"Fredoka";src:url(/assets/fonts/Fredoka-Medium.woff) format("woff");font-weight:400 500;font-display:swap}
@font-face{font-family:"Fredoka";src:url(/assets/fonts/Fredoka-SemiBold.woff) format("woff");font-weight:600;font-display:swap}
@font-face{font-family:"Fredoka";src:url(/assets/fonts/Fredoka-Bold.woff) format("woff");font-weight:700;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/assets/fonts/Atkinson-Regular.woff) format("woff");font-weight:400 500;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/assets/fonts/Atkinson-Bold.woff) format("woff");font-weight:600 700;font-display:swap}

/* Single light look by choice. Layout: a soft color field carries the header and each page title; cream pages below.
   Built for a 60-70 book series: Books, Printables and Parent Guides are the three doors. */
:root{
  --field:#F5C6A5; --field-ink:#5A3B2A;
  --bg:#FFF8F0; --card:#FFFFFF; --ink:#5A3B2A; --muted:#735B4D; --line:#EEDDCB;
  --coral:#C0473A; --coral-dk:#A63A2E; --teal:#24635F; --teal-lt:#E3F1EE; --sun:#F2B544; --sun-lt:#FDF0D5;
  --f-head:"Fredoka",ui-rounded,"Segoe UI",system-ui,sans-serif; --f-body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --r:24px; color-scheme:light;
}
:root[data-field="teal"]{--field:#9BD3C9;--field-ink:#21524E}
:root[data-field="night"]{--field:#46507F;--field-ink:#FFF4E6}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--f-head);font-weight:500;line-height:1.1;letter-spacing:-.01em;text-wrap:balance;margin:0}
p{margin:0}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid #4A2E1E;outline-offset:3px;border-radius:8px;box-shadow:0 0 0 6px #FFF8F0}
.wrap{max-width:1140px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 17px var(--f-head);text-decoration:none;border:0;cursor:pointer;border-radius:999px;padding:13px 24px;background:var(--coral);color:#fff;transition:background .2s,transform .2s}
.btn:hover{background:var(--coral-dk);transform:translateY(-1px)}
.btn.soft{background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.sm{padding:9px 16px;font-size:15px}
.label{font:500 13px var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--teal)}
.more{font:500 16px var(--f-head);text-decoration:none;color:var(--coral);white-space:nowrap}
.more:hover{text-decoration:underline}
.mock{font:500 12px var(--f-body);text-align:center;padding:7px 12px;background:var(--ink);color:#FFF4E6}
.mock button{font:inherit;border:0;border-radius:999px;padding:2px 10px;margin:0 3px;cursor:pointer}
.mock button[aria-pressed="true"]{outline:2px solid #fff}

/* HEADER: logo row + menu that is always visible, also on phones */
.field{background:var(--field);color:var(--field-ink);transition:background .5s}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.word{display:flex;align-items:center;gap:8px;font:600 22px var(--f-head);text-decoration:none;color:var(--field-ink)}
.blocks{display:inline-flex;align-items:flex-end;gap:2px}
.blocks i{display:block;width:8px;border-radius:2px;animation:stepup .6s cubic-bezier(.3,1.6,.5,1) both}
.blocks i:nth-child(1){height:8px;background:var(--coral)}.blocks i:nth-child(2){height:13px;background:var(--teal);animation-delay:.12s}.blocks i:nth-child(3){height:18px;background:var(--sun);animation-delay:.24s}
@keyframes stepup{from{transform:scaleY(0);transform-origin:bottom}}
.search{display:none;align-items:center;gap:8px;background:color-mix(in srgb,var(--card) 70%,transparent);border-radius:999px;padding:7px 14px;font-size:15px;color:var(--muted);min-width:220px}
@media(min-width:760px){.search{display:flex}}
.menu{display:flex;gap:6px;overflow-x:auto;padding-bottom:12px;scrollbar-width:none}
.menu::-webkit-scrollbar{display:none}
.menu a{flex:0 0 auto;text-decoration:none;font:500 16px var(--f-head);padding:8px 14px;border-radius:999px;color:var(--field-ink)}
.menu a:hover{background:color-mix(in srgb,var(--card) 35%,transparent)}
.menu a.on{background:var(--card);color:var(--ink)}
.crumb{font-size:14px;padding-bottom:4px;opacity:.9}
.crumb a{text-decoration:none}.crumb a:hover{text-decoration:underline}
.ptitle{padding-block:18px 40px;display:grid;gap:10px}
.ptitle h1{font-size:clamp(34px,5.4vw,58px);font-weight:600}
.ptitle p{max-width:46ch;font-size:19px;opacity:.92}


/* LOGO: the real Big Kid Steps mark, animated like a real step.
   1 crouch (gets ready) -> 2 push off and lift -> 3 land on the block (block squashes a little) -> 4 settle, arm follows through
   -> 5 the star pops when she lands, with three small sparkles. Plays once on load and again on hover. Calm afterwards. */
.word{gap:10px}
.mark{position:relative;display:inline-block;width:44px;height:57px;flex:0 0 auto}
.mark img{position:absolute;inset:0;width:100%;height:100%}
.rigwrap svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.l-girl{transform-origin:57% 74%}
.l-block{transform-origin:70% 100%}
.l-star{transform-origin:80% 16%}
.mark .sp{position:absolute;width:4px;height:4px;border-radius:50%;background:#E3B23C;opacity:0;left:80%;top:16%}
.mark.play .l-girl{animation:walk 2.3s linear both}
.mark.play .l-block{animation:squash 2.3s ease-out both}
.mark.play .l-star{animation:starpop 2.3s ease-out both}
.mark.play .sp{animation:spark 2.3s ease-out both}
.mark.play .sp:nth-of-type(1){--dx:9px;--dy:-7px}.mark.play .sp:nth-of-type(2){--dx:-8px;--dy:-6px}.mark.play .sp:nth-of-type(3){--dx:2px;--dy:-11px}
/* run in (4 strides) -> crouch -> step up -> land -> settle -> jump up to the star -> land */
@keyframes walk{
  0%{transform:translate(-36px,10px) rotate(-3deg);opacity:0}
  6%{opacity:1}
  10%{transform:translate(-30px,7px) rotate(-1deg)}
  17%{transform:translate(-24px,11px) rotate(-5deg)}
  24%{transform:translate(-18px,7px) rotate(-1deg)}
  31%{transform:translate(-12px,11px) rotate(-5deg)}
  39%{transform:translate(-7px,11px) rotate(-8deg) scale(1.02,.96);animation-timing-function:cubic-bezier(.3,0,.3,1)}
  51%{transform:translate(-2px,-5px) rotate(3deg) scale(.98,1.03)}
  60%{transform:translate(0,1px) rotate(0) scale(1.03,.96)}
  68%{transform:translate(0,0) rotate(-1deg)}
  73%{transform:translate(0,1px) scale(1.02,.97)}
  81%{transform:translate(1px,-7px) rotate(5deg) scale(.98,1.03)}
  89%{transform:translate(0,1px) scale(1.02,.97)}
  100%{transform:none;opacity:1}}
@keyframes squash{0%,58%{transform:none}62%{transform:scale(1.02,.95)}70%{transform:none}87%{transform:none}90%{transform:scale(1.01,.97)}100%{transform:none}}
@keyframes starpop{0%{transform:scale(.55);opacity:.45}78%{transform:scale(.6);opacity:.55}84%{transform:scale(1.32) rotate(16deg);opacity:1}91%{transform:scale(.93) rotate(-5deg)}100%{transform:none;opacity:1}}
@keyframes spark{0%,82%{opacity:0;transform:none}87%{opacity:1}100%{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) scale(.4)}}
.wm{font:600 23px var(--f-head);letter-spacing:-.01em;-webkit-text-stroke:5px #4A2E1E;paint-order:stroke fill}
.wm b{font-weight:600;display:inline-block}.wm .c1{color:#E8836B}.wm .c2{color:#4FA3A5}.wm .c3{color:#E3B23C}
.mark.play ~ .wm b{animation:wordup .5s cubic-bezier(.3,1.6,.5,1) both}
.mark.play ~ .wm .c1{animation-delay:1.9s}.mark.play ~ .wm .c2{animation-delay:2s}.mark.play ~ .wm .c3{animation-delay:2.1s}
@keyframes wordup{0%{transform:none}40%{transform:translateY(-3px)}100%{transform:none}}
footer .mark{width:36px;height:47px}
/* Gentle reveal while scrolling: content is visible at rest, it only rises a few pixels the first time it comes into view. */
.rv{transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .7s}
.rv.pre{transform:translateY(14px);opacity:.001}


/* OUR STORY */
.story{display:grid;gap:40px}
.story-lead{display:grid;gap:26px;align-items:center}
@media(min-width:860px){.story-lead{grid-template-columns:1fr 1.2fr;gap:50px}}
.story-art{background:var(--teal-lt);border-radius:var(--r);padding:20px}
.story-text{display:grid;gap:14px;max-width:60ch}
.story-text h2{font-size:clamp(30px,4.4vw,46px)}
.story-text p{font-size:19px;line-height:1.6}
.story-grid{display:grid;gap:16px}
@media(min-width:820px){.story-grid{grid-template-columns:repeat(3,1fr)}}
.story-how{background:var(--sun-lt);border-radius:var(--r);padding:clamp(20px,4vw,36px);display:grid;gap:8px}
.story-how h2{font-size:28px}
.story-sign{text-align:center;display:grid;justify-items:center;gap:6px}
.story-sign p{font:500 clamp(20px,2.4vw,26px)/1.4 var(--f-head)}

/* MAKE + IDEAS */
.nextband{background:var(--teal-lt);border-radius:var(--r);padding:clamp(22px,4vw,40px);display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;justify-content:space-between}
.nextband h2{font-size:clamp(26px,3.6vw,38px)}.nextband p{color:var(--muted);margin-top:8px;max-width:50ch}
.ideas{display:grid;gap:18px}
@media(min-width:860px){.ideas{grid-template-columns:1fr 1fr;align-items:start}}
.votes{display:grid;gap:8px;margin-top:6px}
.vote{display:flex;justify-content:space-between;align-items:center;gap:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);border-radius:14px;padding:11px 14px;font:500 16px var(--f-head);cursor:pointer;text-align:left}
.vote b{font-weight:500;color:var(--coral)}
.vote[aria-pressed="true"]{border-color:var(--coral);background:var(--card)}
form.idea{display:grid;gap:10px}
textarea{font:inherit;border:1.5px solid var(--line);border-radius:16px;padding:12px 16px;background:var(--card);color:var(--ink);resize:vertical;min-width:0}

/* NIGHT MODE: parents browse after bedtime. From 19:00 to 06:00 the site dims to a soft night room. A button switches it by hand. */
:root[data-time="night"]{--field:#3E4672;--field-ink:#FFF1DE;--bg:#232640;--card:#2D3150;--ink:#F4E9DA;--muted:#CFC6D8;--line:#40466B;
 --teal:#8FD3C9;--teal-lt:#2E4A5A;--sun-lt:#3A3552;color-scheme:dark}
:root[data-time="night"] .field{background-image:radial-gradient(1.5px 1.5px at 12% 30%,#fff9 50%,transparent 51%),radial-gradient(1.5px 1.5px at 38% 18%,#fff8 50%,transparent 51%),radial-gradient(2px 2px at 72% 26%,#fffa 50%,transparent 51%),radial-gradient(1.5px 1.5px at 88% 12%,#fff8 50%,transparent 51%),radial-gradient(1.5px 1.5px at 55% 40%,#fff7 50%,transparent 51%)}
:root[data-time="night"] .fam img{filter:drop-shadow(0 18px 18px rgba(0,0,0,.35)) brightness(.92)}
.moon{border:0;background:color-mix(in srgb,var(--card) 45%,transparent);color:var(--field-ink);width:40px;height:40px;border-radius:50%;font-size:18px;cursor:pointer;flex:0 0 auto}
.top-right{display:flex;align-items:center;gap:10px}

.pq{font:500 clamp(18px,2.2vw,22px)/1.35 var(--f-head);color:var(--coral);margin:2px 0 -2px}
.dadnote{position:relative;display:inline-block;max-width:280px;font:600 22px/1.2 "Caveat","Segoe Print","Comic Sans MS",cursive;color:#3E5BA9;background:#FFFDF2;padding:12px 16px 14px;border-radius:4px;box-shadow:0 8px 18px rgba(60,30,10,.16);transform:rotate(-2.5deg)}
.dadnote::before{content:"";position:absolute;top:-10px;left:50%;width:62px;height:20px;transform:translateX(-50%) rotate(3deg);background:rgba(242,181,68,.55)}
.dadnote small{display:block;font:500 13px var(--f-body);color:#8C7364;margin-top:6px;transform:rotate(1deg)}
:root[data-time="night"] .dadnote{color:#3E5BA9}
/* HOME HERO */
.hero{display:grid;gap:8px;align-items:end;padding-top:10px}
@media(min-width:900px){.hero{grid-template-columns:1fr 1fr;gap:40px;padding-top:30px}}
.hero h1{font-size:clamp(40px,6.2vw,72px);font-weight:600}
.hero p{font-size:20px;max-width:30ch;margin-top:14px;opacity:.92}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;padding-bottom:30px}
.fam{justify-self:center;width:min(100%,500px)}
.fam img{width:100%;filter:drop-shadow(0 18px 18px rgba(60,30,10,.18))}
.ground{height:48px;background:var(--bg);border-radius:60% 60% 0 0/100% 100% 0 0;margin-top:-30px;position:relative}

section{padding-block:56px}
.head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;margin-bottom:26px}
.head > div{display:grid;gap:8px;max-width:44ch}
.head h2{font-size:clamp(28px,4vw,44px)}
.head p{color:var(--muted)}

/* three doors */
.doors{display:grid;gap:16px;margin-top:-6px}
@media(min-width:820px){.doors{grid-template-columns:repeat(3,1fr)}}
.door{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;text-decoration:none;transition:transform .2s,border-color .2s}
.door:hover{transform:translateY(-3px);border-color:var(--coral)}
.door img{width:96px;height:96px;object-fit:cover;border-radius:18px}
.door b{font:500 22px var(--f-head);display:block}
.door span{color:var(--muted);font-size:15px;line-height:1.4;display:block;margin-top:2px}
.trust{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;font-size:14px;color:var(--muted);padding-block:22px 0}
.trust span::before{content:"✓ ";color:var(--teal);font-weight:600}

/* steps */
.steps-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:8px}
.step{flex:0 0 auto;display:grid;gap:8px;justify-items:start;width:160px;padding:16px;border-radius:20px;background:var(--card);border:1.5px solid var(--line);cursor:pointer;font:inherit;color:inherit;text-align:left;transition:transform .2s,border-color .2s}
.step:hover{transform:translateY(-3px);border-color:var(--coral)}
.ico{display:flex;align-items:flex-end;gap:3px;height:26px}
.ico i{width:10px;border-radius:3px}
.step b{font:500 18px/1.2 var(--f-head)}
.step small{color:var(--muted);font-size:13px}

/* shelves (book types) */
.shelves{display:grid;gap:18px}
@media(min-width:820px){.shelves{grid-template-columns:1.4fr 1fr}}
.shelf{border-radius:var(--r);padding:22px;display:grid;gap:16px;align-content:start}
.shelf.story{background:var(--teal-lt)}.shelf.act{background:var(--sun-lt)}
.shelf h3{font-size:26px}
.shelf p{color:var(--muted);font-size:16px}
.shelf{min-width:0}.shelf .row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end}
.shelf .row img{width:100%;border-radius:10px;box-shadow:0 10px 20px rgba(60,30,10,.16)}
.shelf .slot{width:100%;aspect-ratio:1;border-radius:10px;border:1.5px dashed #CDB79E;display:grid;place-items:center;text-align:center;font:500 14px var(--f-head);color:var(--muted);padding:8px}

/* product cards */
.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.pc{display:grid;gap:8px;text-decoration:none;color:inherit;align-content:start}
.pc .im{border-radius:16px;overflow:hidden;aspect-ratio:1;background:var(--card);border:1px solid var(--line);transition:transform .25s}
.pc:hover .im{transform:translateY(-4px)}
.pc .im img{width:100%;height:100%;object-fit:cover}
.pc h3{font-size:18px;line-height:1.25}
.pc small{color:var(--muted);font-size:14px}
.pc .pr{font:500 17px var(--f-head)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 14px;font:500 15px var(--f-head);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.cats{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(min(100%,160px),1fr))}
.cat{display:grid;gap:8px;text-decoration:none;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:12px;cursor:pointer;font:inherit;color:inherit;text-align:left;transition:transform .2s,border-color .2s}
.cat:hover{transform:translateY(-3px);border-color:var(--coral)}
.cat img{border-radius:12px;aspect-ratio:1;object-fit:cover;width:100%}
.cat b{font:500 17px var(--f-head)}.cat small{color:var(--muted)}

/* guides */
.guides{display:grid;gap:18px}
@media(min-width:820px){.guides{grid-template-columns:repeat(3,1fr)}}
.gc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;display:grid;transition:transform .25s}
.gc:hover{transform:translateY(-4px)}
.gc img{aspect-ratio:16/10;object-fit:cover;width:100%}
.gc .in{padding:16px 18px 20px;display:grid;gap:6px}
.gc h3{font-size:21px;line-height:1.2}
.gc small{color:var(--muted)}
.article{max-width:720px;margin:0 auto;display:grid;gap:18px;font-size:18px}
.article h2{font-size:28px;margin-top:14px}
.article ol{display:grid;gap:12px;padding-inline-start:22px;margin:0}
.article .box{background:var(--teal-lt);border-radius:20px;padding:20px;display:grid;gap:10px}
.article .note{font-size:14px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px}

/* free + lists */
.band{background:var(--field);color:var(--field-ink);border-radius:var(--r);padding:clamp(22px,4vw,44px);display:grid;gap:22px;align-items:center;transition:background .5s}
@media(min-width:860px){.band{grid-template-columns:1.3fr 1fr}}
.band h2{font-size:clamp(28px,4vw,42px)}
.band p{opacity:.92;margin-top:8px}
.band ul{margin:14px 0 0;padding-inline-start:20px}
form{display:flex;flex-wrap:wrap;gap:10px}
input{flex:1 1 220px;min-width:0;font:inherit;border:1.5px solid var(--line);border-radius:999px;padding:13px 20px;background:var(--card);color:var(--ink)}
.ok{font:500 16px var(--f-head)}
.consent{flex:1 1 100%;display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;opacity:.95}
.consent input{flex:0 0 auto;width:18px;height:18px;padding:0;margin-top:2px;accent-color:var(--coral)}
.consent a,.fine a{text-decoration:underline}
.fine{flex:1 1 100%;font-size:13px;opacity:.85;margin:0}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--card);color:var(--ink);padding:10px 16px;border-radius:0 0 12px 0}
.skip:focus{left:0}
.legal{max-width:760px;margin:0 auto;display:grid;gap:14px;font-size:17px}
.legal h2{font-size:24px;margin-top:16px}
.legal ul{margin:0;padding-inline-start:22px;display:grid;gap:6px}
.draft{background:var(--sun-lt);border-radius:14px;padding:12px 16px;font-size:15px}
.two{display:grid;gap:22px}
@media(min-width:860px){.two{grid-template-columns:1fr 1fr;gap:44px;align-items:center}}
.two img{border-radius:var(--r)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:grid;gap:10px;align-content:start}
.card h3{font-size:22px}
.card p{color:var(--muted)}
.cards3{display:grid;gap:16px}
@media(min-width:820px){.cards3{grid-template-columns:repeat(3,1fr)}}
details{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:16px 20px}
details+details{margin-top:10px}
summary{font:500 18px var(--f-head);cursor:pointer}
details p{color:var(--muted);margin-top:8px}
blockquote{margin:0;font:400 clamp(20px,2.5vw,26px)/1.45 var(--f-head)}
cite{display:block;margin-top:12px;font-style:normal;color:var(--muted);font-size:15px}

/* book page */
.bp{display:grid;gap:30px;padding-block:8px 50px}
@media(min-width:900px){.bp{grid-template-columns:1.05fr 1fr;gap:56px}}
.gal{display:grid;gap:10px;align-content:start}
.gal .main{border-radius:20px;overflow:hidden;aspect-ratio:1;background:var(--card)}
.gal .main img{width:100%;height:100%;object-fit:contain;background:var(--card)}
.thumbs{display:flex;gap:8px}
.thumbs button{flex:1;border:2px solid transparent;border-radius:12px;padding:0;overflow:hidden;cursor:pointer;background:none;aspect-ratio:1}
.thumbs button[aria-pressed="true"]{border-color:var(--coral)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.bp h1{font-size:clamp(32px,4.4vw,50px);font-weight:600}
.buy{display:grid;gap:12px;margin-top:20px;padding:20px;border-radius:20px;background:var(--card);border:1px solid var(--line)}
.buy .pr{font:600 28px var(--f-head)}.buy .pr s{font-size:18px;color:var(--muted);font-weight:400;margin-left:6px}
.tag{display:inline-block;font:500 13px var(--f-head);background:var(--coral);color:#fff;border-radius:999px;padding:3px 12px}
dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:20px 0 0;font-size:15px}
dt{color:var(--muted)}dd{margin:0}
.ticks{display:grid;gap:10px;margin:20px 0 0;padding:0;list-style:none}
.ticks li{display:flex;gap:12px;align-items:baseline}
.ticks li::before{content:"";flex:0 0 10px;height:10px;border-radius:3px;background:var(--teal);transform:translateY(-1px)}

footer{background:var(--field);color:var(--field-ink);padding-block:44px 28px;transition:background .5s;margin-top:20px}
footer .cols{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
footer b{font:500 17px var(--f-head);display:block;margin-bottom:8px}
footer a{display:block;text-decoration:none;opacity:.88;padding:3px 0}
footer a:hover{opacity:1;text-decoration:underline}
footer small{display:block;margin-top:28px;opacity:.8}

/* Pip peeks from the bottom corner now and then */
.pip{position:fixed;right:calc(14px + env(safe-area-inset-right,0px));bottom:0;width:110px;z-index:30;border:0;background:transparent;padding:0;cursor:pointer;transform:translateY(100%);transition:transform .7s cubic-bezier(.3,1.4,.5,1)}
.pip.up{transform:translateY(42%)}
.pip img{width:100%;transform-origin:50% 90%}
.pip.up img{animation:tilt 1.6s ease-in-out .5s 1}
@keyframes tilt{30%{transform:rotate(-7deg)}60%{transform:rotate(5deg)}}
@media(max-width:820px){.pip,.woof{display:none}}
.woof{position:fixed;right:calc(110px + env(safe-area-inset-right,0px));bottom:70px;z-index:31;font:600 16px var(--f-head);background:var(--card);color:var(--ink);padding:6px 12px;border-radius:14px 14px 4px 14px;box-shadow:0 6px 16px rgba(0,0,0,.12);opacity:0;transition:opacity .2s;pointer-events:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.menu a[aria-current="page"]{background:var(--card);color:var(--ink)}
.soon-btn{opacity:.75;cursor:default}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.filter-hidden{display:none!important}
img{height:auto}
.vote input{accent-color:var(--coral);width:20px;height:20px;flex:0 0 auto}
.vote:has(input:checked){border-color:var(--coral);background:var(--card)}
.gc[aria-disabled]{opacity:.7}
@media(max-width:600px){.fam{width:min(62%,250px)}.hero .ctas{padding-bottom:18px}.menu{gap:0;justify-content:space-between}.menu a{padding:7px 8px;font-size:14.5px}}