/* Tappaloo Studios website. Colours and type follow the Tappaloo brand tokens. */
:root{
  --sun:#FFC83D; --lagoon:#1E8FA8; --lagoon-dk:#0B6E8A; --tomato:#FF6B4A; --tomato-dk:#D9442A;
  --leaf:#2BB673; --sky:#DCEFF8; --ink:#1D2B4F; --paper:#FFFFFF; --muted:#4A5878;
  --radius:1.4rem; --shadow:0 4px 0 rgba(29,43,79,.10);
  --wrap:68rem;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--sky);color:var(--ink);font:500 17px/1.65 Nunito,system-ui,-apple-system,"Segoe UI",sans-serif}
h1,h2,h3{font-family:'Baloo 2',Nunito,sans-serif;font-weight:800;line-height:1.15;margin:0 0 .5rem}
h1{font-size:clamp(2.2rem,5vw,3.6rem)}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
h3{font-size:1.3rem}
p{margin:0 0 1rem}
a{color:var(--lagoon-dk);font-weight:700}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--tomato);outline-offset:3px;border-radius:.6rem}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1rem}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--paper);padding:.5rem 1rem;z-index:10}

/* header */
.top{background:var(--paper);border-bottom:3px solid var(--ink)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.5rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand img{width:2.6rem;height:2.6rem;border-radius:.8rem;border:2px solid var(--ink)}
.brand span{font:800 1.5rem/1 'Baloo 2',sans-serif}
.brand small{display:block;font:700 .75rem/1 Nunito,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem 1.1rem;margin:0;padding:0}
nav a{text-decoration:none;color:var(--ink)}
nav a:hover{color:var(--lagoon-dk)}

/* buttons */
.btn{display:inline-block;padding:.8rem 1.4rem;border-radius:1rem;border:3px solid var(--ink);background:var(--sun);color:var(--ink);
  text-decoration:none;font:800 1.1rem/1.2 'Baloo 2',sans-serif;box-shadow:0 5px 0 var(--ink);transition:transform .1s,box-shadow .1s}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 var(--ink)}
.btn.alt{background:var(--paper)}
.btn.soon{background:#EEF3F7;color:var(--muted);box-shadow:0 5px 0 #9AA6BD;border-color:#9AA6BD;cursor:default}
.btn.soon:hover{transform:none;box-shadow:0 5px 0 #9AA6BD}
.actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.5rem}

/* hero */
.hero{padding:3.5rem 0 3rem}
.hero .wrap{display:grid;grid-template-columns:1.3fr 1fr;gap:2.5rem;align-items:center}
.eyebrow{display:inline-block;background:var(--paper);border:2px solid var(--ink);border-radius:2rem;padding:.2rem .9rem;font-weight:800;font-size:.9rem;margin-bottom:1rem}
.lead{font-size:1.2rem;color:var(--muted);max-width:36rem}
.mascot{justify-self:center;width:min(20rem,80%);aspect-ratio:1;border-radius:2.4rem;border:4px solid var(--ink);box-shadow:0 10px 0 var(--ink);overflow:hidden;animation:bob 3.2s ease-in-out infinite}
.mascot img{width:100%;height:100%}
@keyframes bob{50%{transform:translateY(-10px)}}

/* sections */
section{padding:3.5rem 0}
.band{background:var(--paper);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink)}
.intro{max-width:44rem;margin-bottom:2rem}
.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.card{background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow)}
.band .card{background:var(--sky)}
.card p:last-child{margin:0}
.dot{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;border:3px solid var(--ink);font:800 1.2rem/1 'Baloo 2',sans-serif;margin-bottom:.7rem}
.c-sun{background:var(--sun)} .c-lagoon{background:var(--lagoon);color:#fff} .c-tomato{background:var(--tomato-dk);color:#fff} .c-leaf{background:var(--leaf)}

/* two zones */
.zones{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.zone{border:3px solid var(--ink);border-radius:var(--radius);padding:1.6rem;box-shadow:0 6px 0 var(--ink)}
.zone.little{background:var(--sun)}
.zone.big{background:var(--lagoon);color:#fff}
.zone .age{font:800 .95rem/1 Nunito,sans-serif;background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:2rem;padding:.25rem .8rem;display:inline-block;margin-bottom:.7rem}
.zone ul{margin:.5rem 0 0;padding-left:1.2rem}

/* languages */
.langs{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem}
.lang{flex:1 1 12rem;background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);padding:1.1rem 1.3rem;box-shadow:var(--shadow)}
.lang b{display:block;font:800 1.8rem/1.2 'Baloo 2',sans-serif}

/* roadmap */
.road{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.road li{background:var(--sky);border:3px solid var(--ink);border-radius:var(--radius);padding:1.2rem}
.road .when{font:800 .85rem/1 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.06em;color:var(--lagoon-dk)}
.road b{display:block;font:800 1.5rem/1.2 'Baloo 2',sans-serif;margin:.3rem 0}

/* contact */
.contact{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:1.25rem}
.contact a{word-break:break-word}

/* footer */
footer{background:var(--ink);color:#E8EEF8;padding:2.2rem 0;font-size:.95rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;justify-content:space-between;align-items:center}
footer a{color:#fff}
footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:0;padding:0}

/* long text pages (privacy) */
.doc{max-width:46rem;margin:0 auto;padding:2.5rem 1rem 4rem}
.doc h2{font-size:1.45rem;margin-top:2.2rem}
.doc h3{font-size:1.1rem;margin-top:1.4rem}
.doc ul{padding-left:1.3rem}
.doc li{margin-bottom:.4rem}
.doc table{width:100%;border-collapse:collapse;margin:1rem 0;background:var(--paper);border:2px solid var(--ink);border-radius:1rem;overflow:hidden;font-size:.95rem}
.doc th,.doc td{text-align:left;vertical-align:top;padding:.6rem .8rem;border-bottom:1px solid #C9D6E3}
.doc th{background:#EEF6FB}
.doc .summary{background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);padding:1.2rem 1.4rem;box-shadow:var(--shadow)}
.doc .fine{font-size:.9rem;color:var(--muted)}
.tablewrap{overflow-x:auto}

@media (max-width:760px){
  .hero{padding-top:2rem}
  .hero .wrap{grid-template-columns:1fr}
  .mascot{width:min(13rem,60%);grid-row:1}
  .zones{grid-template-columns:1fr}
  nav ul{gap:.2rem .9rem;font-size:.95rem}
}
.after{margin-top:1.5rem}
.flat{margin:0}