/* ==========================================================================
   Clay Schoolhouse theme for the hand-written pages of yourhomeschool.net (2026-10-03).
   The same look as the homepage and the curriculum pages (agents/gen-curriculum-pages.mjs CSS).

   How a page uses it:
     <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Nunito:wght@600;700;800&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="/assets/clay-site.css">      (after the page's own <style>)
     <body class="clay">                                        (add band-48 or band-912 for those looks)
   Everything here is scoped under body.clay, so it wins over a page's older rules without !important,
   and the old token names (--brand, --ink, --card, --card2, --accent…) are redefined to clay values.

   The standard header and footer (copy as is; "Games" goes to games.yourhomeschool.net):
     <header class="ys-head"><div class="ys-wrap ys-nav">
       <a href="/"><img src="/assets/clay/logo-clay.webp" width="38" height="38" alt="YourHomeschool"></a>
       <a class="ys-brand" href="/">YourHomeschool</a><span class="ys-sp"></span>
       <a class="ys-link" href="/curriculum">Curriculum</a><a class="ys-link" href="/homeschool">By state</a>
       <a class="ys-link" href="/workbooks">Workbooks</a><a class="ys-link" href="https://games.yourhomeschool.net">Games</a>
       <a class="ys-btn ys-sm" href="/homeskool-tutor.html">Open the Tutor</a>
     </div></header>
     <footer class="ys-foot"><div class="ys-wrap">© YourHomeschool · <a href="/curriculum">Curriculum</a> ·
       <a href="/homeschool">Homeschool requirements by state</a> · <a href="/workbooks">Workbooks</a> ·
       <a href="https://games.yourhomeschool.net">Learning games</a> · <a href="/privacy.html">Privacy</a> · <a href="/terms.html">Terms</a></div></footer>
   ========================================================================== */
body.clay,body.clay.band-k3{
  --bg:#FDF4E1;--bg2:#F4E4C8;--card:#FFF9EE;--card2:#FFF9EE;--ink:#3A2A1E;--muted:#6B5645;--line:#EAD8B8;
  --brand:#FF6B4A;--brand-btn:#FF6B4A;--on-brand:#3A2A1E;--brand-shelf:#B84A2E;--link:#C8401F;--accent:#C8401F;
  --chip:#FFF9EE;--gold-bg:#FFF1C9;--gold:#7A5300;--ok:#3F8A3A;--warn:#B84A2E;   /* --gold is a text colour (on --gold-bg); a page wanting a gold fill sets its own */
  --disp:'Baloo 2';--body:'Nunito';--radius:24px;
  --slab:inset 0 3px 0 rgba(255,255,255,.9),inset 0 -6px 0 rgba(90,60,30,.05),0 7px 0 var(--line),0 18px 30px rgba(40,30,20,.08)}
body.clay.band-48{--bg:#F1F5FF;--bg2:#E9F0FF;--card:#FFFFFF;--card2:#F7FAFF;--ink:#16203A;--muted:#5B6788;--line:#DBE6FB;
  --brand:#3A86FF;--brand-btn:#2F6DD8;--on-brand:#FFFFFF;--brand-shelf:#1F4FA8;--link:#2F6DD8;--accent:#2F6DD8;--chip:#FFFFFF;
  --disp:'Space Grotesk';--body:'Poppins';--radius:18px}
body.clay.band-912{--bg:#F8F3E6;--bg2:#F2ECDA;--card:#FFFFFF;--card2:#FBF8F0;--ink:#12203F;--muted:#5A6580;--line:#E5DCC4;
  --brand:#1F50D0;--brand-btn:#1F50D0;--on-brand:#FFFFFF;--brand-shelf:#16307D;--link:#1F50D0;--accent:#1F50D0;--chip:#FFFFFF;
  --disp:'Newsreader';--body:'Work Sans';--radius:12px;--slab:0 1px 3px rgba(20,20,40,.06)}

body.clay{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body),'Nunito',system-ui,'Segoe UI',sans-serif;line-height:1.6}
/* Element defaults sit in :where(), so a page's own classes (.hero h1, .grid a) still win, but its plain h1/a/p rules lose. */
:where(body.clay) :is(h1,h2,h3,h4){font-family:var(--disp),'Nunito',sans-serif;font-weight:800;color:var(--ink);letter-spacing:-.005em}
:where(body.clay) h1{line-height:1.08}
:where(body.clay) :is(h2,h3){line-height:1.2}
:where(body.clay) a{color:var(--link)}
body.clay :focus-visible{outline:4px solid #2F6DB0;outline-offset:3px}

/* layout */
body.clay .ys-wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* header */
body.clay .ys-head{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
body.clay .ys-nav{display:flex;align-items:center;gap:14px;min-height:66px}
body.clay .ys-nav img{height:38px;width:38px;display:block}
body.clay .ys-brand{font:800 20px var(--disp),'Nunito',sans-serif;color:var(--ink);text-decoration:none}
body.clay .ys-sp{flex:1}
body.clay .ys-link{font:700 14.5px var(--body),'Nunito',sans-serif;color:var(--muted);text-decoration:none}
body.clay .ys-link:hover,body.clay .ys-link[aria-current]{color:var(--ink)}

/* buttons: .ys-btn, and the old pages' own .btn / .btn-primary / .cta classes pick up the clay button */
body.clay .ys-btn,body.clay .btn-primary,body.clay :is(a,button).btn:where(:not(.btn-ghost):not(.ys-ghost)){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 16px var(--disp),'Nunito',sans-serif;text-decoration:none;
  border:0;border-radius:999px;padding:12px 24px;background:var(--brand-btn);color:var(--on-brand);cursor:pointer;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(0,0,0,.16),0 5px 0 var(--brand-shelf),0 12px 20px rgba(40,30,20,.14);
  transition:transform .15s ease,box-shadow .15s ease}
body.clay .ys-btn:hover,body.clay .btn-primary:hover,body.clay :is(a,button).btn:where(:not(.btn-ghost):not(.ys-ghost)):hover{transform:translateY(-2px)}
body.clay .ys-btn:active,body.clay .btn-primary:active,body.clay :is(a,button).btn:where(:not(.btn-ghost):not(.ys-ghost)):active{
  transform:translateY(4px);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 1px 0 var(--brand-shelf)}
body.clay .ys-ghost,body.clay .btn-ghost{display:inline-flex;align-items:center;gap:8px;font:800 15px var(--disp),'Nunito',sans-serif;text-decoration:none;
  border:0;border-radius:999px;padding:11px 20px;background:var(--card);color:var(--ink);cursor:pointer;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.9),0 4px 0 var(--line)}
body.clay :is(a,button,.ys-btn).ys-sm{padding:9px 18px;font-size:14.5px;white-space:nowrap}

/* clay slabs: .ys-card, plus the common card names the older pages use */
body.clay .ys-card,body.clay .card,body.clay .panel{background:var(--card);border:0;border-radius:var(--radius);box-shadow:var(--slab)}
body.clay.band-912 .ys-card,body.clay.band-912 .card,body.clay.band-912 .panel{border:1px solid var(--line)}
body.clay .ys-chip{display:inline-block;font:800 12.5px var(--body),'Nunito',sans-serif;border-radius:999px;padding:6px 13px;background:var(--chip);color:var(--ink);box-shadow:0 3px 0 var(--line)}
body.clay .ys-kick{font:800 13px var(--body),'Nunito',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--link)}

/* forms */
body.clay input:not([type=checkbox]):not([type=radio]):not([type=range]),body.clay select,body.clay textarea{
  font:600 16px var(--body),'Nunito',sans-serif;color:var(--ink);background:#fff;border:2px solid var(--line);border-radius:14px;padding:10px 14px}
body.clay input:focus,body.clay select:focus,body.clay textarea:focus{outline:none;border-color:var(--brand)}

/* FAQ-style disclosure */
body.clay details{background:var(--card);border-radius:calc(var(--radius) - 6px);box-shadow:var(--slab);padding:0;margin:0 0 14px;overflow:hidden}
body.clay details > summary{font:800 17px var(--disp),'Nunito',sans-serif;padding:15px 20px;cursor:pointer;color:var(--ink)}
body.clay details > :not(summary){padding-left:20px;padding-right:20px}

/* tables */
:where(body.clay) table{border-collapse:collapse}
:where(body.clay) th{font-family:var(--body),'Nunito',sans-serif;color:var(--muted)}
:where(body.clay) :is(th,td){border-color:var(--line)}

/* footer */
body.clay .ys-foot{border-top:1px solid var(--line);padding:26px 0 30px;text-align:center;font:600 13.5px var(--body),'Nunito',sans-serif;color:var(--muted);margin-top:48px}
body.clay .ys-foot a{color:var(--link);text-decoration:none;font-weight:700}

@media(max-width:700px){
  body.clay .ys-link{display:none}
  body.clay .ys-nav{gap:10px}
  body.clay .ys-brand{font-size:18px}
  body.clay .ys-wrap{padding:0 16px}
}
@media(max-width:480px){body.clay .ys-brand{display:none}}
@media (prefers-reduced-motion: reduce){body.clay .ys-btn,body.clay .btn-primary,body.clay a.btn,body.clay button.btn{transition:none}}