/* Jugami Art (Elementary, grades K-3): "happy little studio" theme. Version 1.
   Theme lives in custom properties so it can be swapped. */
:root{
  --ink:#2b2118;        /* Van Dyke brown ink */
  --ink-soft:#5a4636;
  --canvas:#fdf8ee;     /* canvas cream */
  --card:#fff;
  --easel:#8a5a32;      /* wooden easel */
  --easel-dark:#5e3a1c;
  --sky:#dcefff;
  --red:#d6312b; --yellow:#f8c81c; --blue:#1f6fd1;
  --orange:#f2780c; --green:#2f9e44; --purple:#8236b0;
  --radius:22px;
  --round:"Trebuchet MS","Segoe UI","Nunito",system-ui,-apple-system,sans-serif;
  --display:"Comic Neue","Chalkboard SE","Trebuchet MS",system-ui,sans-serif;
  /* read-aloud.js v2 theme */
  --ra-accent:#1f6fd1; --ra-accent-ink:#fff; --ra-highlight:#f8c81c; --ra-highlight-bg:#fff8db;
  --ra-radius:999px; --ra-font-size:1.25rem; --ra-sub-ink:#2b2118;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--canvas);color:var(--ink);font:20px/1.6 var(--round)}
img,svg{max-width:100%;height:auto}
a{color:#1a5cab;text-underline-offset:3px}
a:hover{color:var(--red)}
:focus-visible{outline:4px solid var(--purple);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:var(--ink);padding:10px 16px;border-radius:12px;font-weight:800;z-index:10}
.skip:focus{left:8px}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:1040px;margin:0 auto;padding:0 18px}

/* header */
.site-head{background:var(--easel);color:#fff;border-bottom:8px solid transparent;border-image:linear-gradient(90deg,var(--red),var(--orange),var(--yellow),var(--green),var(--blue),var(--purple)) 1}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;padding:10px 18px;max-width:1040px;margin:0 auto}
.brand{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;font-size:1.3rem;min-height:44px}
.brand img{width:42px;height:42px}
.head-nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px}
.head-nav a{min-height:44px;display:inline-flex;align-items:center;color:#fff;text-decoration:none;font-weight:700;font-size:1rem;padding:6px 14px;border-radius:999px;background:rgba(255,255,255,.16)}
.head-nav a:hover,.head-nav a:focus-visible{background:rgba(255,255,255,.32);color:#fff}
.crumbs{font-size:.95rem;margin:12px 0 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px}
.crumbs li+li::before{content:"›";margin-right:4px;color:var(--ink-soft)}
.crumbs a{min-height:44px;display:inline-flex;align-items:center;padding:0 2px}
.pager{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:14px 0;font-size:1rem}
.pager a,.pager span{background:#fff;border:3px solid var(--easel);color:var(--easel-dark);padding:8px 16px;border-radius:999px;text-decoration:none;font-weight:800;min-height:44px;display:inline-flex;align-items:center}
.pager span{border-style:dashed;color:var(--ink-soft);font-weight:700}

/* hero */
.hero{display:grid;gap:18px;align-items:center;background:linear-gradient(180deg,var(--sky),#fff);border-radius:var(--radius);padding:22px;margin-top:12px;box-shadow:0 5px 0 #e6d9c2}
@media (min-width:780px){.hero{grid-template-columns:1.05fr 1fr}}
.kicker{font-size:.95rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--easel);margin:0}
h1{font-family:var(--display);font-size:clamp(2.2rem,7vw,3.5rem);line-height:1.1;margin:.15em 0 .2em;color:var(--blue)}
.tag{font-size:1.3rem;font-weight:700;margin:0 0 10px}
h2{font-family:var(--display);font-size:clamp(1.6rem,5vw,2.1rem);line-height:1.2;color:var(--easel-dark);margin:0 0 10px;scroll-margin-top:12px}
h3{font-size:1.35rem;margin:.3em 0}
.block{background:var(--card);border-radius:var(--radius);padding:22px;margin:24px 0;box-shadow:0 5px 0 #e6d9c2;scroll-margin-top:12px}
.block p,.block li{max-width:62ch}
.word{font-weight:800;color:var(--purple)}
.say{font-size:1.3rem}
.bob{display:flex;gap:14px;align-items:flex-start}
.bob .bubble{background:#fff;border:3px solid var(--easel);border-radius:20px;padding:10px 16px}
.bob .bubble p{margin:.3em 0}
.grownups{background:#fff8db;border-left:6px solid var(--yellow);padding:10px 14px;border-radius:12px;font-size:1rem}
.nojs{background:#fff3b0;padding:10px 14px;border-radius:12px;font-weight:700}

/* color cards */
.swatches{list-style:none;padding:0;margin:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr))}
.swatch{border-radius:18px;padding:14px;border:4px solid var(--c);background:#fff;text-align:center}
.swatch .blob{display:block;margin:0 auto 6px;width:96px;height:72px}
.swatch h3{color:var(--ink);margin:0}
.swatch p{margin:.3em auto}
.eq{font-size:1.25rem;font-weight:800}
.hear{min-height:44px;font:inherit;font-size:1rem;font-weight:800;border:0;background:#fff3bf;color:#6b4a00;border-radius:999px;padding:6px 14px;cursor:pointer}
.hear:hover{background:#ffe58f}

/* buttons */
.btn{font:inherit;font-weight:800;border:0;border-radius:999px;padding:12px 24px;min-height:52px;cursor:pointer;background:var(--blue);color:#fff;box-shadow:0 4px 0 #154f96}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #154f96}
.btn.alt{background:#fff;color:var(--easel-dark);border:3px solid var(--easel);box-shadow:0 4px 0 #e6d9c2}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}

/* paint pot pickers (radio buttons) */
.pots{border:0;margin:0 0 12px;padding:0}
.pots legend{font-weight:800;font-size:1.25rem;margin-bottom:6px;padding:0}
.pot-row{display:flex;flex-wrap:wrap;gap:10px}
.pot{position:relative;display:inline-flex}
.pot input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pot span{display:inline-flex;align-items:center;gap:8px;min-height:56px;padding:8px 16px 8px 8px;border-radius:999px;border:4px solid #e6d9c2;background:#fff;font-weight:800;cursor:pointer}
.pot span::before{content:"";width:38px;height:38px;border-radius:50%;background:var(--c);border:2px solid rgba(43,33,24,.35);box-shadow:inset 0 -5px 0 rgba(0,0,0,.18)}
.pot input:checked+span{border-color:var(--ink);background:#fff8db}
.pot input:checked+span::after{content:"✓";font-size:1.2rem}
.pot input:focus-visible+span{outline:4px solid var(--purple);outline-offset:3px}

/* mixer */
.mixer{display:grid;gap:18px}
@media (min-width:780px){.mixer{grid-template-columns:1fr 1fr;align-items:center}}
.palette-art{width:100%;max-width:440px;margin:0 auto;display:block}
.mix-result{font-size:1.5rem;font-weight:800;text-align:center;min-height:2.6em;margin:6px 0}
.mix-result .name{padding:2px 12px;border-radius:999px;color:#fff}
#blob-mix{transition:fill .6s ease}
.swirl{transform-origin:220px 205px}
.spin{animation:spin .7s ease-out}
@keyframes spin{from{transform:rotate(-200deg) scale(.6)}to{transform:none}}

/* coloring page */
.coloring{display:grid;gap:16px}
@media (min-width:860px){.coloring{grid-template-columns:1.4fr 1fr;align-items:start}}
.color-pic{width:100%;border-radius:18px;border:6px solid var(--easel);background:#fff;touch-action:manipulation}
.color-pic .region{cursor:pointer;stroke:var(--ink);stroke-width:4;stroke-linejoin:round;transition:fill .25s}
.color-pic .region:hover{filter:brightness(1.06)}
.color-pic .region:focus{outline:none}
.color-pic .region:focus-visible{stroke:var(--purple);stroke-width:9}
.status{font-weight:800;min-height:1.6em}

/* wheel */
.wheel-fig{margin:0;text-align:center}
.wheel-fig svg{width:min(100%,430px)}
figcaption{font-size:1rem;margin-top:6px}

/* quiz */
.quiz fieldset{border:3px solid #e6d9c2;border-radius:16px;margin:0 0 14px;padding:12px 16px}
.quiz legend{font-weight:800;padding:0 6px;font-size:1.2rem}
.quiz label{display:flex;align-items:center;min-height:48px;padding:6px 10px;border-radius:12px;cursor:pointer}
.quiz label:hover{background:#fff8db}
.quiz input{transform:scale(1.4);margin-right:12px}
.dot{display:inline-block;width:22px;height:22px;border-radius:50%;background:var(--c);margin-right:4px;vertical-align:-4px;box-shadow:inset 0 -3px 0 rgba(0,0,0,.2)}
.fb{font-weight:800;min-height:1.6em;margin:4px 0}
.ok{color:#237a35}.no{color:#b3261e}
.score{font-size:1.35rem;font-weight:800}

/* hub cards */
.cards{list-style:none;padding:0;margin:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}
.card{background:#fff;border-radius:var(--radius);padding:18px;border-top:12px solid var(--c,var(--blue));box-shadow:0 5px 0 #e6d9c2}
.card h3 a{color:var(--ink)}
.card.soon{border-top-style:dashed;color:var(--ink-soft)}
.dots-game{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:10px 0}
.dots-game button{width:88px;height:88px;border-radius:50%;border:5px solid #fff;background:var(--c);box-shadow:0 0 0 3px var(--ink),0 5px 0 3px rgba(0,0,0,.15);cursor:pointer;font:inherit;font-weight:800;font-size:.95rem;color:var(--t,#fff)}
.dots-game button:active{transform:translateY(3px)}

.sources li,.credits{font-size:1rem}

/* footer */
.site-foot{background:var(--ink);color:#f3e9d8;margin-top:30px;padding:16px 0;font-size:1rem}
.site-foot a{color:#fff}
.jugami-more{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:8px}
.jugami-more a{min-height:44px;display:inline-flex;align-items:center;padding:0 4px;font-weight:700}
.ra-reading{border-radius:var(--radius)}
@media (max-width:520px){body{font-size:19px}.block,.hero{padding:16px}}
/* round-1 review fixes */
.color-pic .hit{fill:transparent;stroke:none}
.crumbs li{display:inline-flex;align-items:center;min-height:44px}
.crumbs a{min-width:44px;justify-content:center}
.card h3 a,.card p a,.site-foot p a,.sources li a{min-height:44px;display:inline-flex;align-items:center}
.pager span{background:none;border:0;padding:8px 4px;color:var(--ink-soft);font-weight:600;font-style:italic}