:root{
  --paper:#fbf6ec;--ink:#221e1a;--soft:#5f574d;--line:#e8dfcd;--card:#fffdf8;
  --builder:#e8553d;--explorer:#2e9e6b;--competitor:#2f7fe0;--storyteller:#a172ea;--collector:#f2b632;--performer:#e4508f;--puzzler:#1fa3a3;
  --display:"Bricolage Grotesque",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--paper);color:var(--ink);font:17px/1.55 var(--body);padding-inline:18px;padding-block:14px 70px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto}
h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;line-height:1;margin:0}
.hdr{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:6px 0 10px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em}
.logo svg{width:44px;height:26px}
.hdr nav{display:flex;gap:8px;flex-wrap:wrap}
.hdr nav a{text-decoration:none;font-weight:600;font-size:15px;padding:8px 12px;border-radius:999px}
.hdr nav a:hover{background:var(--card)}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 18px/1 var(--body);text-decoration:none;cursor:pointer;color:var(--ink);background:var(--collector);border:2.5px solid var(--ink);border-radius:16px;padding:16px 22px;box-shadow:4px 4px 0 var(--ink);transition:transform .08s,box-shadow .08s}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.white{background:var(--card)}
.btn.small{font-size:15px;padding:11px 16px;border-radius:12px;box-shadow:3px 3px 0 var(--ink)}

/* hero */
.hero{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:24px;align-items:center;padding:34px 0 46px}
.hero h1{font-size:clamp(52px,8.6vw,104px);font-weight:800}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--collector) 62%,var(--collector) 92%,transparent 92%)}
.hero p{font-size:20px;color:var(--soft);max-width:34ch;margin:22px 0 28px}
.meta{margin-top:16px;font-size:14px;color:var(--soft);font-weight:600}
.collage{position:relative;aspect-ratio:1/1;max-width:480px;justify-self:center;width:100%}
.collage .s{position:absolute;filter:drop-shadow(5px 6px 0 var(--ink))}
.collage .s svg{width:100%;height:100%;display:block}
.collage .tag{position:absolute;font:800 14px var(--body);background:var(--card);border:2px solid var(--ink);border-radius:999px;padding:5px 11px;white-space:nowrap}

/* seven */
.seven{margin-top:6px}
.eyebrow{font:800 13px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin:0 0 12px}
.row7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.tcard{display:block;text-decoration:none;background:var(--c);border:2.5px solid var(--ink);border-radius:20px;padding:14px 14px 16px;box-shadow:4px 4px 0 var(--ink);transition:transform .1s}
.tcard:hover{transform:translate(-2px,-3px) rotate(-1deg)}
.tcard svg{width:56px;height:56px;display:block;margin-bottom:10px}
.tcard b{display:block;font:800 19px var(--display);letter-spacing:-.01em}
.tcard span{display:block;font-size:13.5px;line-height:1.3;margin-top:4px}
.get{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:54px}
.get div{background:var(--card);border:2px solid var(--ink);border-radius:22px;padding:22px}
.get h3{font-size:26px;margin-bottom:8px}
.get p{margin:0;color:var(--soft)}
.facts{display:flex;gap:22px;flex-wrap:wrap;margin-top:40px;padding:18px 22px;border-radius:18px;background:var(--ink);color:var(--paper)}
.facts p{margin:0;flex:1 1 260px;font-size:16px}
.facts b{font-family:var(--display);font-size:30px;display:block;letter-spacing:-.02em}
.facts small{flex-basis:100%;opacity:.7;font-size:12.5px}

/* quiz */
.quiz{position:fixed;inset:0;background:var(--paper);z-index:20;overflow:auto;padding:18px}
.quiz .inner{max-width:760px;margin:0 auto}
.qtop{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}
.dots{display:flex;gap:6px}
.dots i{width:28px;height:8px;border-radius:8px;background:var(--line);border:1.5px solid var(--ink)}
.dots i.on{background:var(--ink)}
.x{font:700 15px var(--body);background:none;border:0;cursor:pointer;color:var(--soft)}
.q{font-family:var(--display);font-weight:800;font-size:clamp(34px,5.4vw,56px);line-height:1.02;margin:0 0 24px}
.opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.opt{font:600 17px/1.35 var(--body);text-align:left;cursor:pointer;color:var(--ink);background:var(--card);border:2.5px solid var(--ink);border-radius:18px;padding:16px 18px;box-shadow:3px 3px 0 var(--ink);transition:transform .08s,background .12s}
.opt:hover{background:var(--hover,#fff1c8);transform:translate(-1px,-1px)}
.opt:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.back{margin-top:22px}

/* type page */
.poster{position:relative;background:var(--c);border:3px solid var(--ink);border-radius:30px;padding:40px 40px 36px;box-shadow:8px 8px 0 var(--ink);overflow:hidden;min-height:340px;margin-top:10px}
.poster .big{position:absolute;right:-30px;bottom:-40px;width:min(380px,55%);opacity:.95;transform:rotate(-8deg);filter:drop-shadow(8px 8px 0 rgba(34,30,26,.9))}
.poster .kick{font:800 14px var(--body);letter-spacing:.16em;text-transform:uppercase}
.poster h1{font-size:clamp(64px,11vw,140px);font-weight:800;margin:6px 0 10px;max-width:9ch}
.poster .hookline{font-size:22px;font-weight:600;max-width:26ch;margin:0}
.poster .second{margin-top:16px;font-weight:700}
.poster .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;position:relative;z-index:2}
.poster > *:not(.big){position:relative;z-index:1}
.dark-ink{color:var(--ink)}
.about{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:44px}
.about h2{font-size:40px}
.about p{margin:0 0 12px}
.board{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:40px}
.tile{background:var(--card);border:2.5px solid var(--ink);border-radius:24px;padding:20px 22px;box-shadow:4px 4px 0 var(--ink)}
.tile h3{font-size:26px;margin-bottom:10px;padding-bottom:10px;border-bottom:3px solid var(--tint)}
.tile h3 .ic{width:34px;height:34px;border-radius:10px;border:2px solid var(--ink);display:grid;place-items:center;font-size:18px;background:var(--tint)}
.tile ul{margin:0;padding-left:0;list-style:none}
.tile li{padding:8px 0;border-top:1.5px dashed var(--line)}
.tile li:first-child{border-top:0}
.span2{grid-column:span 2}.span4{grid-column:span 4}.span3{grid-column:span 3}.span6{grid-column:span 6}
.screen .pick{padding:12px 0;border-top:1.5px dashed var(--line)}
.screen .pick:first-of-type{border-top:0}
.screen .pick b{font-size:17px}
.screen .r{display:inline-block;font:800 12px var(--body);border:2px solid var(--ink);border-radius:8px;padding:1px 7px;margin-left:8px;vertical-align:2px;background:var(--paper)}
.screen .m{display:block;font-size:14px;color:var(--soft)}
.screen .stretch{display:block;font-size:14px;font-weight:700;color:#9a5b00;margin-top:2px}
.watch{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.watch h3{color:var(--paper)}
.others{margin-top:54px}
.foot{margin-top:56px;padding-top:18px;border-top:2px solid var(--ink);font-size:14px;color:var(--soft);max-width:72ch}
.said{font-weight:700;font-size:15px}
.hidden{display:none!important}
@media (max-width:900px){.hero{grid-template-columns:1fr}.collage{max-width:340px}.row7{grid-template-columns:repeat(2,minmax(0,1fr))}.get{grid-template-columns:1fr}.about{grid-template-columns:1fr}.board{grid-template-columns:1fr}.span2,.span3,.span4,.span6{grid-column:auto}.opts{grid-template-columns:1fr}.poster{padding:28px 22px 30px;min-height:0}.poster .big{width:170px;right:0;bottom:-20px;opacity:.55}}
.gift{margin-top:14px;font:700 14px var(--body);background:var(--ink);color:var(--card);border:0;border-radius:999px;padding:9px 16px;cursor:pointer}
.gift:active{transform:translateY(1px)}
.tile .said{display:block;margin-top:8px;font-size:14px}

.get div{position:relative;padding-top:20px}
.get .gi{display:block;width:64px;height:64px;margin:0 0 10px;transform:rotate(-4deg)}
.get div:nth-child(2) .gi{transform:rotate(5deg)}
.get .gi svg,.tile h3 .ti svg{width:100%;height:100%;display:block}
.tile h3{display:flex;align-items:center;gap:10px}
.tile h3 .ti{width:42px;height:42px;flex:none;background:var(--tint);border-radius:12px;padding:4px;border:2px solid var(--ink)}
.tile{background-image:linear-gradient(var(--tint),var(--tint));background-size:100% 6px;background-repeat:no-repeat}
@media (max-width:900px){.poster{overflow:hidden}}
.row7.six{grid-template-columns:repeat(6,minmax(0,1fr))}@media (max-width:900px){.row7.six{grid-template-columns:repeat(2,minmax(0,1fr))}}

.toys li{display:flex;justify-content:space-between;gap:10px;align-items:center}.toys .find{flex:none;font-size:13px;font-weight:800;text-decoration:none;background:var(--collector);border:2px solid var(--ink);border-radius:999px;padding:2px 10px;box-shadow:2px 2px 0 var(--ink)}.tile .disc{font-size:12.5px;color:var(--soft);margin:8px 0 10px}
.pick .find{display:inline-block;margin-top:6px;font-size:13px;font-weight:800;text-decoration:none;background:var(--collector);border:2px solid var(--ink);border-radius:999px;padding:2px 10px;box-shadow:2px 2px 0 var(--ink)}

/* friction pass, Sept 16 */
.poster .said{margin:12px 0 0}
.poster .minor{margin:14px 0 0;font-size:15px;font-weight:600}
.poster .minor a{color:var(--ink)}
.poster .minor a,.poster .minor .linkish,#moregifts{display:inline-block;padding:12px 0}
.linkish{font:inherit;color:var(--ink);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.last{margin:12px 0 0;font-size:15px;font-weight:600}
.toys .find,.pick .find{min-height:44px;display:inline-flex;align-items:center;padding:0 14px}
@media (hover:none){.opt:hover{background:var(--card);transform:none}}
.hdr .narrow{display:none}
@media (max-width:520px){.hdr .wide{display:none}.hdr .narrow{display:inline}.hdr nav{gap:2px;margin-left:-12px}.hdr nav a{padding:12px}}
@media print{
  body{background:#fff;padding:0}
  .hdr .logo::after{content:"howkidsplay.com";font:600 15px var(--body);color:var(--soft);margin-left:6px}
  .hdr nav,.poster .actions,.poster .minor,.poster .said,.others,.gift,.tile .said,.find,.foot{display:none!important}
  .poster,.tile{box-shadow:none;break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .board{grid-template-columns:1fr 1fr}.span2,.span4,.span6{grid-column:auto}.watch{grid-column:1/-1}
}

/* calendar reminders, Sept 16 */
.remind{margin:0 0 14px}
.rrow{display:flex;flex-wrap:wrap;align-items:center;column-gap:4px;font-size:14px;font-weight:600;line-height:1.2}
.rlead,.rchoices{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.rlead{min-height:28px}
.rrow svg{width:18px;height:18px;flex:none;margin-right:2px}
.rlink{min-height:44px;padding:0 1px;font:700 14px/1.2 var(--body);color:var(--ink);background:none;border:0;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer}
.rlink[aria-expanded="true"]{text-decoration-style:dotted}
.rlink.done{position:relative;z-index:0;text-decoration:none;padding:0 11px;color:var(--card);font-size:14px}.rlink.done::before{content:"";position:absolute;inset:7px 0;z-index:-1;border-radius:999px;background:var(--ink)}
.rbday{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:4px 0 2px}
.rbday select{min-height:44px;font:600 16px var(--body);color:var(--ink);background:var(--card);border:2px solid var(--ink);border-radius:12px;padding:0 10px;cursor:pointer}
.rbday .rmonth{min-width:132px}.rbday .rday{min-width:76px}
.rbday .radd{min-height:44px}
.radd.done,.radd.done:hover{background:var(--ink);color:var(--card)}
.rgcal{display:inline-block;padding:12px 0;font-size:15px;font-weight:600;color:var(--ink)}
.rnote{margin:2px 0 4px;font-size:14px;font-weight:600;max-width:60ch;color:var(--ink)}.rnote:empty{display:none}
.rnote .rgcal{padding:4px 0;font-size:14px}
.poster .remind{margin:0;position:relative;z-index:2}
.poster .minor:has(+ .remind) .linkish,.poster .minor:has(+ .remind) a{padding-bottom:4px}
@media print{.remind{display:none!important}}
.poster .rrow,.poster .rlink{font-size:15px}
@media (max-width:900px){.poster .remind:has(.rnote:not(:empty)),.poster .remind:has(.rbday:not(.hidden)){padding-bottom:120px}}
@media (max-width:520px){body{padding-top:8px}.hdr{row-gap:0;padding-top:4px;padding-bottom:4px}}
.poster .lastres{display:block}
@media (max-width:520px){.poster h1{font-size:min(64px,calc((100vw - 86px) * var(--fit,1)))}}
.x{min-height:44px;padding:0 4px}
.gift{min-height:44px}
.poster .minor a,.poster .minor .linkish{line-height:28px}

.glist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0}
.glist a{display:block;text-decoration:none;background:var(--card);border:2.5px solid var(--ink);border-left:12px solid var(--c);border-radius:18px;padding:14px 16px;box-shadow:3px 3px 0 var(--ink)}
.glist a b{display:block;font-family:var(--display);font-size:22px;line-height:1.1;margin-bottom:4px}.glist a span{color:var(--soft);font-size:15px}
@media (max-width:700px){.glist{grid-template-columns:1fr}}
.now{margin:10px 0 34px}.now .eyebrow{margin-bottom:0}
.foot .more{display:block;margin-top:6px}