/* Jugami Art Studio (grades 6–8) by Frida. Mexican folk-art palette on warm cream. */
:root{
  --cream:#fbf3e3; --paper:#fffaf0; --cream-deep:#f3e4c7;
  --ink:#2b1630; --ink-soft:#56404f;
  --cobalt:#1d47b8; --cobalt-deep:#14327f;
  --magenta:#c0136f; --magenta-deep:#8f0d52;
  --marigold:#f2a413; --marigold-soft:#ffe2a3;
  --emerald:#0d8657; --emerald-deep:#08603e;
  --chili:#cf2f22; --chili-deep:#9d2117;
  --turquoise:#139aa6;
  --line:#e1cfae;
  --radius:14px;
  --shadow:0 3px 0 rgba(43,22,48,.14);
  --display:"Rockwell","Roboto Slab","Zilla Slab","Georgia",serif;
  --body:"Avenir Next","Segoe UI","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--cream);color:var(--ink);font:18px/1.62 var(--body);-webkit-text-size-adjust:100%}
img,svg{max-width:100%;height:auto}
a{color:var(--cobalt);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--magenta)}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.18;color:var(--ink);margin:1.4em 0 .5em}
h2{font-size:clamp(1.6rem,3.6vw,2.15rem)}
h3{font-size:1.3rem}
h4{font-size:1.1rem}
p,li{max-width:68ch}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.6em 1em;z-index:10;border-radius:0 0 8px 0}
.skip:focus{left:0}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Header with papel picado strip */
.site-head{background:var(--ink);color:#fff}
.site-head .bar{max-width:1120px;margin:0 auto;padding:.6rem 1.1rem;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.55rem;color:#fff;text-decoration:none;font:700 1.2rem/1 var(--display)}
.brand:hover{color:var(--marigold-soft)}
.head-nav{display:flex;flex-wrap:wrap;gap:.25rem .9rem}
.head-nav a{color:#fff;text-decoration:none;font-weight:600;font-size:.95rem;padding:.25rem 0;border-bottom:3px solid transparent}
.head-nav a:hover{color:var(--marigold-soft);border-color:var(--marigold)}
.head-nav a[aria-current="page"]{border-color:var(--magenta)}
.picado{display:block;width:100%;height:34px;background:var(--ink)}

.wrap{max-width:1120px;margin:0 auto;padding:0 1.1rem}
main{display:block}
.crumbs{font-size:.95rem;color:var(--ink-soft);margin:1rem 0 0}
.crumbs a{color:var(--ink-soft)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:1.5rem;align-items:center;padding:1rem 0 1.2rem}
.hero .kicker{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;color:var(--magenta-deep);margin:0}
.hero h1{font-size:clamp(2.4rem,6vw,3.9rem);margin:.15em 0 .1em;color:var(--ink)}
.hero h1 .swash{color:var(--chili)}
.hero .tagline{font:italic 600 1.35rem/1.35 var(--display);color:var(--cobalt-deep);margin:.1em 0 .6em}
.hero-art{background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);box-shadow:6px 6px 0 var(--marigold);padding:.4rem}
.hero-art svg{display:block;width:100%}
@media (max-width:760px){.hero{grid-template-columns:1fr}.hero-art{max-width:440px}}

/* Cards, callouts */
.card{background:var(--paper);border:2px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem;box-shadow:var(--shadow)}
.callout{border-left:8px solid var(--cobalt);background:var(--paper);padding:.9rem 1.2rem;border-radius:0 var(--radius) var(--radius) 0;margin:1.2rem 0;max-width:72ch}
.callout h3,.callout h4{margin:.1em 0 .35em;font-size:1.12rem}
.callout p{margin:.35em 0}
.callout.dyk{border-color:var(--magenta)}
.callout.how{border-color:var(--emerald)}
.callout.dyk .tag{color:var(--magenta-deep)}
.callout.how .tag{color:var(--emerald-deep)}
.tag{display:block;font:700 .8rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--cobalt-deep)}
.term{font-weight:700;color:var(--magenta-deep)}
dfn{font-style:normal;font-weight:700;color:var(--magenta-deep)}

/* Sections */
.unit-section{padding:.6rem 0 1.4rem;border-top:3px dotted var(--line)}
.unit-section:first-of-type{border-top:0}
.sec-num{display:inline-grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;background:var(--chili);color:#fff;font:700 1rem/1 var(--body);margin-right:.5rem;vertical-align:.18em}
.unit-section:nth-of-type(5n+2) .sec-num{background:var(--cobalt)}
.unit-section:nth-of-type(5n+3) .sec-num{background:var(--emerald)}
.unit-section:nth-of-type(5n+4) .sec-num{background:var(--magenta)}
.unit-section:nth-of-type(5n+5) .sec-num{background:var(--ink)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.4rem;align-items:start}
@media (max-width:760px){.two{grid-template-columns:1fr}}
figure{margin:1rem 0}
figcaption{font-size:.95rem;color:var(--ink-soft);margin-top:.4rem;max-width:68ch}
.fig-frame{background:var(--paper);border:2px solid var(--line);border-radius:var(--radius);padding:.6rem}

.toc{background:var(--paper);border:2px dashed var(--cobalt);border-radius:var(--radius);padding:.8rem 1.2rem;margin:.6rem 0 1.4rem}
.toc h2{font-size:1.15rem;margin:.2em 0 .4em}
.toc ol{columns:2;column-gap:2rem;margin:0;padding-left:1.4rem}
.toc li{margin:.15rem 0;break-inside:avoid}
@media (max-width:560px){.toc ol{columns:1}}

/* Swatch rows */
.swatches{display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:.6rem 0;list-style:none}
.swatches li{display:flex;flex-direction:column;align-items:center;font-size:.8rem;line-height:1.2;text-align:center;width:4.6rem;max-width:none}
.swatches .chip{display:block;width:4.2rem;height:3rem;border-radius:9px;border:2px solid rgba(43,22,48,.35);margin-bottom:.25rem}
.scale-row{display:grid;grid-template-columns:5.5rem repeat(7,minmax(0,1fr));gap:4px;align-items:center;margin:.3rem 0;max-width:720px}
.scale-row span{height:2.4rem;border-radius:6px;border:1px solid rgba(43,22,48,.25)}
.scale-row b{font-size:.92rem}

/* Buttons and form controls */
button,.btn{font:700 1rem/1.2 var(--body);border:3px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:999px;padding:.55rem 1.05rem;cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .06s}
button:hover{background:var(--marigold-soft)}
button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
button.primary{background:var(--cobalt);color:#fff}
button.primary:hover{background:var(--cobalt-deep)}
button[aria-pressed="true"]{background:var(--ink);color:#fff}
button:disabled{opacity:.55;cursor:default}
input[type=range]{width:100%;accent-color:var(--magenta);min-height:28px}
.lab{background:var(--paper);border:3px solid var(--ink);border-radius:18px;padding:1.1rem 1.2rem 1.3rem;margin:1.2rem 0;box-shadow:8px 8px 0 var(--cobalt)}
.lab.alt{box-shadow:8px 8px 0 var(--magenta)}
.lab.alt2{box-shadow:8px 8px 0 var(--emerald)}
.lab h3{margin-top:.2em}
.lab .help{font-size:.95rem;color:var(--ink-soft)}
.needs-js{display:none}
.js .needs-js{display:block}
.js .no-js-only{display:none}
.note{background:var(--marigold-soft);border:2px solid var(--marigold);border-radius:10px;padding:.7rem 1rem;max-width:72ch}

/* Mixing lab */
.tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin:.4rem 0 1rem}
.mix-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.2rem;align-items:start}
@media (max-width:760px){.mix-grid{grid-template-columns:1fr}}
.drops{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0}
.drop-btn{display:inline-flex;align-items:center;gap:.45rem}
.drop-btn .dot{width:1.15rem;height:1.15rem;border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:2px solid var(--ink)}
.result{display:flex;gap:1rem;align-items:center}
.result-swatch{width:9rem;height:9rem;border-radius:50%;border:4px solid var(--ink);flex:none;background:#fff;box-shadow:inset 0 -10px 0 rgba(0,0,0,.08)}
.recipe{font-size:.95rem;margin:.3rem 0}
.readout{font-weight:700}
.slider-row{display:grid;grid-template-columns:4.6rem 1fr 3rem;gap:.6rem;align-items:center;margin:.35rem 0}
.slider-row label{font-weight:700}
.slider-row output{font-variant-numeric:tabular-nums;text-align:right}
.light-stage{background:#0d0b14;border-radius:14px;padding:.4rem;border:3px solid var(--ink)}
.light-stage svg{display:block;width:100%}
.presets{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 0}
.presets button{font-size:.9rem;padding:.35rem .8rem}

/* Harmony explorer */
.hx{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:1.2rem;align-items:start}
@media (max-width:760px){.hx{grid-template-columns:1fr}}
.wheel-box{max-width:380px;margin:0 auto}
.wheel-box svg{display:block;width:100%}
.wheel-wedge{cursor:pointer}
.scheme-pick{border:0;padding:0;margin:.3rem 0 .8rem}
.scheme-pick legend{font-weight:700;margin-bottom:.3rem}
.scheme-pick label{display:inline-flex;align-items:center;gap:.3rem;margin:.15rem .7rem .15rem 0;cursor:pointer}
.scheme-pick input{accent-color:var(--magenta);width:1.1rem;height:1.1rem}
.hue-controls{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:.3rem 0}
.palette-out{display:flex;gap:.4rem;margin:.6rem 0;min-height:5.2rem}
.palette-out div{flex:1;border-radius:10px;border:2px solid rgba(43,22,48,.35);display:flex;align-items:flex-end;justify-content:center;font-size:.78rem;font-weight:700;padding:.25rem;min-height:5rem}
.mini-paint{border:2px solid var(--line);border-radius:12px;overflow:hidden;max-width:420px;background:#fff}

/* Game */
.game-top{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;font-weight:700;margin:.2rem 0 .6rem}
.game-swatches{display:flex;gap:.5rem;min-height:6rem;margin:.4rem 0 .8rem}
.game-swatches span{flex:1;max-width:8rem;border-radius:12px;border:3px solid var(--ink);min-height:6rem}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.5rem;margin:.4rem 0}
.choices button{border-radius:12px;text-align:left}
.choices button.right{background:#c9efd9;border-color:var(--emerald-deep)}
.choices button.wrong{background:#f9d3cf;border-color:var(--chili-deep)}
.feedback{min-height:1.6em;font-weight:700;margin:.5rem 0}
.feedback.good{color:var(--emerald-deep)}
.feedback.bad{color:var(--chili-deep)}
kbd{font:600 .85rem/1 ui-monospace,Menlo,monospace;background:#fff;border:1px solid var(--ink-soft);border-bottom-width:3px;border-radius:5px;padding:.1rem .35rem}

/* Simultaneous contrast demo */
.sc-demo{display:grid;grid-template-columns:1fr 1fr;max-width:560px;border:3px solid var(--ink);border-radius:12px;overflow:hidden;position:relative}
.sc-demo div{height:180px;display:grid;place-items:center}
.sc-demo i{display:block;width:70px;height:70px;background:#9a8f86}
.sc-bridge{position:absolute;left:calc(25% + 0px);right:calc(25% + 0px);top:calc(50% - 35px);height:70px;background:#9a8f86;display:none}
.sc-demo.joined .sc-bridge{display:block}

/* Timeline */
.timeline{list-style:none;padding:0;margin:1rem 0;border-left:4px solid var(--marigold);max-width:none}
.timeline li{position:relative;padding:.1rem 0 1.1rem 1.4rem;max-width:72ch}
.timeline li::before{content:"";position:absolute;left:-.8rem;top:.35rem;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--magenta);border:3px solid var(--cream)}
.timeline li:nth-child(3n+2)::before{background:var(--cobalt)}
.timeline li:nth-child(3n)::before{background:var(--emerald)}
.timeline .yr{font:700 1.15rem/1.2 var(--display);color:var(--chili-deep);display:block}
blockquote{margin:.6rem 0;padding:.5rem 1rem;border-left:5px solid var(--marigold);background:#fff6e2;font-style:italic;max-width:68ch}

/* Studio activity */
.studio{background:var(--paper);border:3px solid var(--emerald);border-radius:18px;padding:1rem 1.3rem}
.studio ol>li{margin:.5rem 0}
.materials{columns:2;column-gap:2rem}
@media (max-width:560px){.materials{columns:1}}

/* Quiz */
.quiz fieldset{border:2px solid var(--line);background:var(--paper);border-radius:var(--radius);margin:0 0 .9rem;padding:.9rem 1.1rem .8rem}
.quiz legend{font-weight:700;padding:0;float:left;width:100%;max-width:none;margin:0 0 .45rem}
.quiz legend+*{clear:both}
.quiz label{display:flex;gap:.55rem;align-items:flex-start;padding:.28rem .2rem;cursor:pointer;border-radius:8px}
.quiz input{margin-top:0;accent-color:var(--magenta);width:1.05rem;height:1.05rem;flex:none}
.quiz .q-fb{font-weight:700;margin:.3rem 0 0;min-height:0}
.quiz .q-fb.good{color:var(--emerald-deep)}
.quiz .q-fb.bad{color:var(--chili-deep)}
.quiz label.is-right{background:#d7f2e2}
.talk{background:var(--paper);border:3px dashed var(--magenta);border-radius:18px;padding:.8rem 1.3rem}

/* Hub */
.unit-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:1.1rem;margin:1rem 0}
.unit-card{display:grid;grid-template-columns:120px 1fr;gap:1rem;align-items:center;background:var(--paper);border:3px solid var(--ink);border-radius:18px;padding:1rem;box-shadow:6px 6px 0 var(--chili);text-decoration:none;color:var(--ink)}
.unit-card:hover{box-shadow:6px 6px 0 var(--cobalt);color:var(--ink)}
.unit-card h3{margin:.1em 0 .25em}
.unit-card p{margin:.2em 0;font-size:.98rem}
.unit-card .go{font-weight:700;color:var(--cobalt)}
.soon-card{border:3px dashed var(--line);border-radius:18px;padding:1rem 1.2rem;color:var(--ink-soft);background:transparent}
.soon-card h3{color:var(--ink-soft);margin-top:.1em}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:1rem;list-style:none;padding:0;max-width:none}
.steps li{background:var(--paper);border:2px solid var(--line);border-radius:var(--radius);padding:.8rem 1rem;max-width:none}
.steps b{display:block;font-family:var(--display);font-size:1.1rem}

/* Sources and credits */
.sources li{margin:.35rem 0}
.sources{font-size:.97rem}
.colophon{font-size:.95rem;color:var(--ink-soft)}

/* Pager and footer */
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;margin:2rem 0 1.4rem;padding:1rem 0;border-top:3px solid var(--ink)}
.pager a,.pager span{font-weight:700}
.pager .soon-next{color:var(--ink-soft)}
.site-foot{background:var(--ink);color:#f6ead6;padding:1.4rem 0 1.8rem;margin-top:2rem;font-size:.97rem}
.site-foot a{color:var(--marigold-soft)}
.site-foot a:hover{color:#fff}
.jugami-more{margin-top:.8rem}
.jugami-more>span:first-child{font-weight:700;margin-right:.3rem}

/* Round 2 (Mandy's review): tap targets of at least 44px */
button,.btn{min-height:44px}
.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.hx-prev,.hx-next{min-width:44px}
.head-nav a,.brand,.crumbs a,.toc a,.skip,.site-foot a,.pager a,.pager span{min-height:44px;display:inline-flex;align-items:center}
.head-nav{gap:0 .9rem}
.toc li{margin:0}
.quiz label{min-height:44px;align-items:center}
.scheme-pick label{min-height:44px;padding:.2rem .75rem .2rem .55rem;margin:.15rem .4rem .15rem 0;border:2px solid var(--line);border-radius:999px;background:#fff}
.scheme-pick label:hover{border-color:var(--magenta)}
.scheme-pick label:has(input:checked){border-color:var(--magenta-deep);background:#fbe3ef}

/* Answers are marked with text, not colour alone (text is real DOM, added by art-studio.js) */
.mark{display:block;font-weight:700;margin-top:.1rem}
.mark-right{color:var(--emerald-deep)}
.mark-wrong{color:var(--chili-deep)}
.quiz label.is-wrong{background:#f9d3cf}
.choices button.right .mark-right,.choices button.wrong .mark-wrong{color:var(--ink)}
.choices button.right:disabled,.choices button.wrong:disabled{opacity:1}

/* Shared Jugami account widget (/school/account.js): white text, 44px, accent with 5.89:1 contrast */
.site-head{--ja-accent:var(--magenta);--ja-accent-hover:var(--magenta-deep);--ja-accent-ink:#fff}
.site-head .ja-widget .ja-login{color:#fff!important;min-height:44px;display:inline-flex;align-items:center;box-shadow:0 0 0 2px var(--marigold-soft)}
.site-head .ja-widget .ja-login:hover{color:#fff!important}