/* ===========================================================================
   Texas Math Models — site stylesheet
   The kitchen-table look (design F, chosen 2026-09-17): cream paper, terracotta,
   Fraunces headings, Nunito Sans text, Kalam for short handwritten asides, and
   Lamplight colors in dark mode. Edited here, copied to site/assets/ by
   src/mk_site.py — never edit site/assets/site.css directly.

   The fonts are served from assets/fonts rather than Google: a font request to
   another host hands that host the reader's IP address (METHODOLOGY_SPEC §20).
   All four are SIL Open Font License; the licenses sit beside the files.
   =========================================================================== */
@font-face{font-family:"Fraunces";font-weight:400 700;font-display:swap;src:url(fonts/fraunces.woff2) format("woff2")}
@font-face{font-family:"Nunito Sans";font-weight:400 800;font-display:swap;src:url(fonts/nunito-sans.woff2) format("woff2")}
@font-face{font-family:"Work Sans";font-weight:700;font-display:swap;src:url(fonts/work-sans-700.woff2) format("woff2")}
@font-face{font-family:"Kalam";font-weight:400;font-display:swap;src:url(fonts/kalam-400.woff2) format("woff2")}
@font-face{font-family:"Kalam";font-weight:700;font-display:swap;src:url(fonts/kalam-700.woff2) format("woff2")}

:root{
  --ground:#FBF3E6;
  --surface:#FFFDF8;
  --surface-2:#F3E9D8;
  --ink:#2E2420;
  --ink-2:#5E4F47;
  --muted:#7A6A60;
  --line:#EADCC6;
  --hair:#F0E4D1;
  /* --accent is the text-safe terracotta (5.4:1 on the cream); --accent-fill
     is the brighter one F uses behind white text and on borders, where 4.1:1
     would be too faint for small type. */
  --accent:#A8432C;
  --accent-deep:#963A25;
  --accent-fill:#C2553B;
  --on-accent:#FFFFFF;
  --accent-soft:#F6E3D6;
  --studentwork:#C0392B;
  --focus:#C2553B;
  --soft:#F3E1C4;
  --wood-1:#E7C9A0;
  --wood-2:#D9B386;
  --on-wood:#7A3A22;
  --sticky:#F6D98B;
  --sage:#5F8468;
  --mark:#FFE27A;

  /* the diagrams are print artwork and keep their own colors; they sit on
     paper in both themes — see the color note in src/mk_site.py */
  --paper:#FFFFFF;
  --paper-edge:#EADCC6;
  --paper-shadow:0 10px 28px rgba(60,30,10,.12);

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Nunito Sans","Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
  --hand:"Kalam","Comic Sans MS",cursive;
  --mono:"SF Mono",ui-monospace,Menlo,Consolas,monospace;
  --measure:66ch;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#1C1A26;
    --surface:#262333;
    --surface-2:#2F2B3E;
    --ink:#F4EAD8;
    --ink-2:#C9BBA3;
    --muted:#A89C88;
    --line:#3A3548;
    --hair:#312D40;
    --accent:#F2B45A;
    --accent-deep:#F5C57C;
    --accent-fill:#F2B45A;
    --on-accent:#2A1C08;
    --accent-soft:#3A3024;
    --studentwork:#F0796A;
    --focus:#F2B45A;
    --soft:#2F2B3E;
    --wood-1:#3A3144;
    --wood-2:#2C2636;
    --on-wood:#F2B45A;
    --mark:#8A6A1E;
    --paper-edge:#3A3548;
    --paper-shadow:0 10px 28px rgba(0,0,0,.35);
  }
}
:root[data-theme="dark"]{
  --ground:#1C1A26;
  --surface:#262333;
  --surface-2:#2F2B3E;
  --ink:#F4EAD8;
  --ink-2:#C9BBA3;
  --muted:#A89C88;
  --line:#3A3548;
  --hair:#312D40;
  --accent:#F2B45A;
  --accent-deep:#F5C57C;
  --accent-fill:#F2B45A;
  --on-accent:#2A1C08;
  --accent-soft:#3A3024;
  --studentwork:#F0796A;
  --focus:#F2B45A;
  --soft:#2F2B3E;
  --wood-1:#3A3144;
  --wood-2:#2C2636;
  --on-wood:#F2B45A;
  --mark:#8A6A1E;
  --paper-edge:#3A3548;
  --paper-shadow:0 10px 28px rgba(0,0,0,.35);
}

html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%;   /* stop iOS inflating type in landscape */
}
h1,h2,h3{font-family:var(--serif);font-weight:700;text-wrap:balance;margin:0}
h1{font-size:clamp(1.85rem,3.6vw,2.85rem);line-height:1.06;letter-spacing:-0.02em}
h2{font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:1.14;letter-spacing:-0.014em}
h3{font-size:1.1rem;line-height:1.25;letter-spacing:-0.008em}
p{margin:0}
a{color:var(--accent-deep);text-underline-offset:2px;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}

.wrap{max-width:960px;margin:0 auto;padding:0 clamp(1rem,3.5vw,2.25rem)}
.eyebrow{font-family:var(--hand);font-size:1.2rem;font-weight:400;line-height:1.25;
  color:var(--accent);margin:0}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--line);background:var(--surface)}
.masthead .wrap{display:flex;align-items:baseline;gap:0.5rem 1.2rem;
  padding-top:0.4rem;padding-bottom:0.4rem;flex-wrap:wrap;max-width:1180px}
.wordmark{font-family:var(--serif);font-weight:700;font-size:1.2rem;letter-spacing:-0.01em;
  color:var(--ink);text-decoration:none;white-space:nowrap;
  display:inline-block;line-height:44px}
.wordmark b{color:var(--accent);font-weight:700}
.masthead nav{display:flex;gap:1.05rem;margin-left:auto;flex-wrap:wrap}
.masthead nav a{font-size:0.9rem;color:var(--ink-2);text-decoration:none;
  display:inline-block;line-height:44px;   /* 44px tap target, baseline shared with the wordmark */
  border-bottom:2px solid transparent}
.masthead nav a:hover{color:var(--accent-deep);border-bottom-color:var(--accent)}
/* The other language, set apart from the page links (2026-10-26). */
.masthead nav a.lang-switch{font-weight:700;color:var(--accent-deep);
  border-left:1px solid var(--line);padding-left:1.05rem}

/* Every Spanish page says it's a draft and where to report a problem. */
.es-draft{background:var(--accent-soft);border-bottom:1px solid var(--line);
  font-size:0.88rem;color:var(--ink)}
.es-draft p{padding:0.7rem 0;max-width:var(--measure)}
.es-draft a{color:var(--accent-deep);font-weight:700}

/* ---------- hero & bands ---------- */
.hero{padding:clamp(2.4rem,5.5vw,4rem) 0 clamp(1.6rem,3.5vw,2.4rem);
  border-bottom:1px solid var(--line)}
.hero .lede{font-size:1.05rem;color:var(--ink-2);max-width:56ch;margin-top:1rem}
.hero .adult-note{margin-top:1.4rem;font-size:0.82rem;color:var(--muted);
  border-left:2px solid var(--line);padding-left:0.9rem}
.band{padding:clamp(2.4rem,5vw,3.8rem) 0}
.page-head{max-width:var(--measure);margin-bottom:1.5rem}
.page-head .lede{color:var(--ink-2);margin-top:0.7rem}
.page-head .eyebrow{margin-bottom:0.5rem}

.crumbs{font-size:0.8rem;color:var(--muted);margin-bottom:1.2rem;
  display:flex;gap:0.5rem;flex-wrap:wrap}
.crumbs a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--hair);
  display:inline-flex;align-items:center;min-height:34px}
.crumbs a:hover{color:var(--accent-deep)}

.problem{font-family:var(--mono);font-size:0.95rem;color:var(--accent-deep);
  margin-top:0.7rem;font-variant-numeric:tabular-nums;display:flex;
  align-items:center;gap:0.7rem;flex-wrap:wrap}
.problem .tag{font-family:var(--sans);font-size:0.65rem;font-weight:700;
  letter-spacing:0.09em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:0.1rem 0.5rem}

/* ---------- the figure ----------
   The drawing never shrinks below legibility; the container scrolls instead.
   Each .fig-inner carries a min-width computed from its own smallest type
   (see figure_min_width in src/mk_site.py). */
.fig{position:relative;background:var(--paper);border:1px solid var(--paper-edge);
  border-radius:10px;box-shadow:var(--paper-shadow);padding:clamp(0.8rem,2.5vw,1.4rem);margin-bottom:1rem;
  overflow-x:auto;overflow-y:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;}
.fig-inner{margin:0 auto;max-width:620px}
.fig svg{display:block;width:100%;height:auto}

/* the hint appears only on figures that actually overflow (set in JS) */
.fig.is-scrollable::after,.table-scroll.is-scrollable::after{
  content:"swipe to see the whole diagram \2192";
  position:sticky;left:0;display:block;width:max-content;
  margin-top:0.55rem;font-size:0.68rem;letter-spacing:0.06em;
  text-transform:uppercase;font-weight:700;color:var(--muted);
}

/* ---------- notes ---------- */
.notes{border:1px solid var(--line);border-radius:16px;background:var(--surface);
  padding:1rem 1.15rem;margin-bottom:1rem;display:grid;gap:0.65rem}
.notes.student{background:var(--accent-soft)}
.notes .row{display:grid;grid-template-columns:auto 1fr;gap:0.65rem;align-items:baseline}
.notes .lab{font-size:0.68rem;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap}
.notes p{font-size:0.92rem;color:var(--ink-2)}

/* ---------- sibling links ---------- */
.siblings{border-top:1px solid var(--hair);padding-top:1.1rem;margin-bottom:1.6rem}
.siblings ul{list-style:none;margin:0.7rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:0.5rem}
.siblings li a{display:inline-flex;align-items:center;min-height:44px;
  font-size:0.88rem;text-decoration:none;
  color:var(--ink-2);background:var(--surface);border:1px solid var(--line);
  border-radius:999px;padding:0.35rem 0.95rem}
.siblings li a:hover{border-color:var(--accent);color:var(--accent-deep)}

/* ---------- grids ---------- */
.topic-grid,.strategy-grid{display:grid;gap:0.85rem;background:none;
  border:0;border-radius:0}
@media(min-width:640px){.topic-grid{grid-template-columns:1fr 1fr}}
/* Two columns at most. Three made each preview ~300px wide, which shrank a
   440-unit diagram to the point where you could not tell the strategies apart
   — and telling them apart is the entire job of this page. */
@media(min-width:600px){.strategy-grid{grid-template-columns:1fr 1fr}}

.topic,.strategy{background:var(--surface);text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:0.5rem;padding:1.15rem 1.25rem 1.25rem;
  border:1px solid var(--line);border-radius:16px;box-shadow:0 4px 12px rgba(120,80,40,.06);
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease}
.topic:hover,.strategy:hover{background:var(--surface);border-color:var(--accent);
  box-shadow:0 10px 24px rgba(120,80,40,.14);transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.topic,.strategy{transition:none}
  .topic:hover,.strategy:hover{transform:none}}
.topic-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:0.7rem;flex-wrap:wrap}
.topic p{font-size:0.87rem;color:var(--ink-2)}
.prob{font-family:var(--mono);font-size:0.78rem;color:var(--accent-deep);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.go{font-size:0.78rem;color:var(--accent);font-weight:600;margin-top:auto;padding-top:0.4rem}

/* The preview is a recognition cue, so it has to be big enough to recognize.
   At two columns inside a 960px page each tile is ~450px wide, which renders a
   440-unit diagram at roughly its drawn size. */
.strategy .mini{background:var(--paper);border:1px solid var(--paper-edge);
  border-radius:8px;padding:0.6rem;overflow:hidden;min-height:190px;
  display:flex;align-items:center;justify-content:center}
.strategy .mini svg{width:100%;height:100%;max-height:230px;object-fit:contain}
@media(min-width:600px){.strategy .mini{min-height:215px}}
.strategy .meta{display:flex;flex-direction:column;gap:0.2rem;flex:1}

/* ---------- table ---------- */
.table-scroll{position:relative;overflow-x:auto;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);margin-bottom:1.6rem;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.table-scroll.is-scrollable::after{content:"swipe to see every column \2192";
  padding:0 0.9rem 0.6rem}
table.vocab{border-collapse:collapse;width:100%;min-width:34rem;font-size:0.88rem}
table.vocab th,table.vocab td{padding:0.62rem 0.9rem;text-align:left;
  border-bottom:1px solid var(--hair);vertical-align:top}
table.vocab thead th{font-size:0.66rem;font-weight:700;letter-spacing:0.13em;
  text-transform:uppercase;color:var(--muted);background:var(--surface-2)}
table.vocab tbody tr:last-child th,table.vocab tbody tr:last-child td{border-bottom:0}
table.vocab tbody th{font-weight:600;color:var(--ink);width:12rem}
.say{color:var(--accent-deep);font-weight:700}
.not-say{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}

/* ---------- call to action ---------- */
.cta{background:var(--sticky);color:#2E2420;border:0;border-radius:4px;
  box-shadow:0 10px 20px rgba(60,40,0,.16);
  padding:1.1rem 1.25rem;display:grid;gap:0.6rem}
.cta p{font-size:0.95rem;color:#4A3B33;max-width:60ch}
.cta .eyebrow{color:#8E3521}
.btn-out{display:inline-flex;align-items:center;justify-content:center;
  min-height:46px;font-size:0.95rem;font-weight:800;text-decoration:none;
  color:var(--on-accent);border:0;border-radius:12px;
  padding:0.55rem 1.2rem;background:var(--accent-fill)}
.btn-out::after{content:" \2197"}
.btn-out:hover{filter:brightness(0.94)}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);margin-top:1rem;
  padding:2rem 0 3rem;font-size:0.82rem;color:var(--muted)}
footer .cred{color:var(--ink-2)}   /* one line on a desktop screen (2026-10-27) */
footer .lines{display:grid;gap:0.6rem;margin-top:1.1rem;
  border-top:1px solid var(--hair);padding-top:1rem}


/* ---------- phone ----------
   Visitors arrive here from a search on a phone; this is the primary case,
   not a fallback. Type stays at 17px (below 16 invites iOS zoom-on-focus, and
   the base went 16 -> 17 on 2026-09-06 to soften the page),
   headings tighten, and the notes stack rather than squeezing two columns. */
@media(max-width:520px){
  .wrap{padding-left:1rem;padding-right:1rem}
  h1{font-size:1.7rem}
  .hero{padding-top:1.8rem}
  .hero .lede{font-size:1rem}
  .band{padding:1.7rem 0}
  .notes .row{grid-template-columns:1fr;gap:0.15rem}
  .notes .lab{font-size:0.66rem}
  .page-head{margin-bottom:1.1rem}
  .topic-head{gap:0.2rem}
  .fig{padding:0.7rem}
  .cta{padding:1rem}
  .siblings ul{gap:0.45rem}
}


/* ---------- prose blocks on a single-figure chart ----------
   The fraction wall carries the author's own explanatory blocks rather than
   a note bar; .r rows come straight out of the chart markup. */
.prose{border:1px solid var(--line);border-radius:16px;background:var(--surface);
  padding:1rem 1.15rem;margin-bottom:1rem;display:grid;gap:0.7rem}
.prose .r{font-size:0.92rem;color:var(--ink-2)}
.prose .r b{color:var(--ink);font-weight:700}
/* NOT nowrap: these are long equation strings (1/2 = 2/4 = 3/6 = ...) and
   holding them on one line makes the whole block wider than a phone, which
   clips the surrounding paragraph. They wrap at the spaces around '='. */
.prose code{font-family:var(--mono);font-size:0.86em;color:var(--accent-deep);
  background:var(--accent-soft);border-radius:2px;padding:0.05em 0.3em;
  font-variant-numeric:tabular-nums}
.prose .r{overflow-wrap:break-word}


/* ---------- early-learning activity books ----------
   The books are B&W line art drawn for print, so each page sits on the same
   paper card the math diagrams use. Pages are portrait and tall, so they get
   more vertical room than a strategy diagram. */
.ec-age{margin-bottom:1.8rem}
.ec-age-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:1rem;border-bottom:1px solid var(--line);padding-bottom:0.4rem;
  margin-bottom:0.9rem;flex-wrap:wrap}
.ec-age-head h2{font-size:1.3rem}
.ec-age-head .count{font-size:0.72rem;font-weight:700;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--muted)}
.ec-page{margin:0 0 1.3rem}
.ec-page .fig{margin-bottom:0.5rem}
.ec-page .fig-inner{max-width:520px}
.ec-page figcaption{font-size:0.88rem;color:var(--ink-2);display:grid;gap:0.15rem}
.ec-page figcaption b{color:var(--ink);font-size:0.95rem}
.ec-page .std{font-family:var(--mono);font-size:0.76rem;color:var(--muted)}
.ec-get{margin:0.2rem 0 0}
.ec-get a{display:inline-flex;align-items:center;min-height:44px;
  font-size:0.92rem;font-weight:700;text-decoration:none;color:var(--accent-deep);
  background:var(--accent-soft);border:1px solid var(--accent);
  border-radius:999px;padding:0.4rem 1.05rem}
.ec-get a::after{content:" \2197";margin-left:0.35rem;font-weight:400}
.ec-get a:hover{background:var(--surface)}

/* the early-learning promo on the home page links internally, so no ↗ */
.ec-promo .btn-out::after{content:none}

/* ---------- the parent question on an early-learning skill page ---------- */
.ec-framing{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:1.15rem 1.25rem;margin-bottom:1.8rem}
.ec-framing h2{font-size:1.25rem;margin-bottom:0.6rem}
.ec-framing .answer{font-size:0.97rem;color:var(--ink-2);max-width:62ch}
.ec-ages{margin-top:1.2rem;border-top:1px solid var(--hair);padding-top:0.9rem;
  display:grid;gap:0.7rem}
.ec-ages .row{display:grid;grid-template-columns:7.5rem 1fr;gap:0.9rem;align-items:baseline}
.ec-ages .age{font-size:0.72rem;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;color:var(--accent)}
.ec-ages p{font-size:0.92rem;color:var(--ink-2)}
.ec-ages .std{display:block;font-family:var(--mono);font-size:0.74rem;
  color:var(--muted);margin-top:0.15rem}
@media(max-width:560px){.ec-ages .row{grid-template-columns:1fr;gap:0.15rem}}


/* ---------- site search ----------
   Index is a static JSON file filtered in the browser; nothing is sent or
   stored. On a phone the field drops to its own full-width row. */
.search{position:relative;flex:0 1 15rem;min-width:11rem}
.search input{width:100%;font-family:var(--sans);font-size:0.9rem;
  padding:0.45rem 0.7rem;border:1px solid var(--line);border-radius:999px;
  background:var(--ground);color:var(--ink);min-height:40px}
.search input::placeholder{color:var(--muted)}
/* The example lives under the box, not in it: text sitting IN the field has to
   be cleared before typing, which is a nuisance on a phone. It hides as soon
   as anything is typed (Chwi, 2026-09-29). */
.search-hint{font-size:0.72rem;color:var(--muted);margin-top:0.25rem;padding-left:0.75rem;
  font-family:var(--hand);font-size:0.95rem;line-height:1.1}
.search-hint[hidden]{display:none}

/* Words a page used without defining them. Printed only where they appear. */
.gloss{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:0.9rem 1.15rem;margin-bottom:1.4rem;display:grid;gap:0.45rem;max-width:var(--measure)}
.gloss p{font-size:0.9rem;color:var(--ink-2)}
.gloss b{color:var(--ink)}
.search input:focus{border-color:var(--accent);outline:none;
  box-shadow:0 0 0 2px var(--accent-soft)}
.search .results{position:absolute;top:calc(100% + 0.4rem);right:0;left:0;
  z-index:40;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.13);
  max-height:62vh;overflow-y:auto;min-width:17rem}
.search .results a{display:flex;flex-direction:column;gap:0.1rem;
  padding:0.55rem 0.8rem;text-decoration:none;color:inherit;
  border-bottom:1px solid var(--hair)}
.search .results a:last-child{border-bottom:0}
.search .results a:hover,.search .results a.on{background:var(--accent-soft)}
.search .results .rt{font-size:0.92rem;color:var(--ink)}
.search .results .rs{font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;
  color:var(--accent);font-weight:700}
.search .results .none{padding:0.7rem 0.8rem;font-size:0.88rem;color:var(--muted)}
@media(max-width:620px){
  .search{flex:1 0 100%;order:3}
  .masthead nav{order:2}
}

/* A worked example on a skill page: the figure from the printable, then the
   steps in a parent's words. Added 2026-09-03. */
figure.worked{margin:18px 0;padding:14px;border:1px solid var(--paper-edge);
  border-radius:10px;background:var(--paper);box-shadow:var(--paper-shadow);overflow-x:auto}
figure.worked img{display:block;max-width:100%;height:auto;margin:0 auto}
/* A whole Student Exemplar page: full width of the column, but no wider than a page reads. */
figure.worked.exemplar img{width:100%;max-width:720px}
ol.worked-steps{margin:14px 0 0 0;padding-left:1.3em}
ol.worked-steps li{margin:.45em 0}
dl.mistakes{margin:12px 0}
dl.mistakes dt{font-weight:600;margin-top:14px}
dl.mistakes dd{margin:.3em 0 0 0;padding-left:1.1em;border-left:3px solid var(--hair);
  color:var(--ink-2)}
/* A skill page runs section, example, mistakes, home idea. Without this the
   next heading sits hard against the paragraph above it. */
.band h2{margin-top:1.6em}
.band h2:first-of-type{margin-top:1em}

/* ---------- the note from Chwi on the home page ----------
   A page a parent lands on when they are already anxious should have a person
   on it (Chwi, 2026-09-06). Warmer ground than the bands around it, and the
   credential line under it in small type: METHODOLOGY_SPEC 13, verbatim. */
.from-me{background:var(--accent-soft);border:1px solid var(--hair);
  border-radius:14px;padding:clamp(1.3rem,3vw,1.9rem) clamp(1.3rem,3vw,2rem)}
.from-me p{max-width:60ch}
.from-me p + p{margin-top:0.75rem}
.from-me .sig{margin-top:1.1rem;padding-top:0.9rem;border-top:1px solid var(--hair);
  font-size:0.84rem;color:var(--ink-2);max-width:68ch}

/* ---------- STAAR frequency ----------
   A count of released tests, shown as a bar so the shape of it lands before
   the numbers do. The sourcing block is deliberately plain and unmissable:
   these are past counts, not predictions (see staar_note in mk_site.py). */
.freq{font-size:0.82rem;color:var(--ink-2);margin-top:0.1rem}
.freq b{color:var(--accent-deep)}
table.freqtable{border-collapse:collapse;width:100%;font-size:0.9rem}
table.freqtable th,table.freqtable td{padding:0.5rem 0.7rem;text-align:left;
  border-bottom:1px solid var(--hair);vertical-align:middle}
table.freqtable thead th{font-size:0.72rem;text-transform:uppercase;
  letter-spacing:0.06em;color:var(--muted);font-weight:600;white-space:nowrap}
table.freqtable tbody th{font-weight:400;color:var(--ink);min-width:16rem}
table.freqtable tbody th b{color:var(--accent-deep);font-family:var(--mono);
  font-size:0.82rem;margin-right:0.35rem}
.barcell{width:34%;min-width:7rem}
.bar{display:block;height:9px;border-radius:999px;background:var(--accent);
  opacity:0.75;min-width:3px}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.num.soft{color:var(--muted)}
/* Under a standard the site covers: links to its sample questions and charts. */
.here-links{display:flex;flex-wrap:wrap;gap:0.3rem 0.4rem;margin-top:0.35rem}
.here-links a{display:inline-block;font-size:0.74rem;font-weight:600;
  color:var(--accent-deep);background:var(--accent-soft);text-decoration:none;
  border-radius:999px;padding:0.15rem 0.6rem;white-space:nowrap}
.here-links a:hover,.here-links a:focus-visible{text-decoration:underline}

/* STAAR page: one grade at a time, and the rarely tested skills folded away. */
.grade-tabs{display:flex;flex-wrap:wrap;gap:0.5rem;margin:0 0 1.4rem}
.grade-tabs[hidden]{display:none}
.grade-tabs button{font:inherit;font-size:0.95rem;font-weight:800;min-height:44px;
  padding:0.5rem 1.2rem;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--accent-deep)}
.grade-tabs button[aria-pressed="true"]{background:var(--accent-fill);
  border-color:var(--accent-fill);color:var(--on-accent)}
.staar-grade[hidden]{display:none}
.rare-skills{margin-top:1rem}
.rare-skills summary{cursor:pointer;font-weight:700;color:var(--accent-deep);
  padding:0.6rem 0}
.rare-skills[open] summary{margin-bottom:0.4rem}
.sourcing{margin-top:2.4rem;background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:12px;
  padding:clamp(1.1rem,3vw,1.7rem) clamp(1.1rem,3vw,1.8rem)}
.sourcing h2{font-size:1.12rem;margin-bottom:0.6rem}
.sourcing p,.sourcing li{font-size:0.9rem;color:var(--ink-2);max-width:70ch}
.sourcing p + p,.sourcing ul{margin-top:0.7rem}
.sourcing ul{padding-left:1.15rem;display:flex;flex-direction:column;gap:0.45rem}
.sourcing .fineprint{margin-top:1rem;padding-top:0.8rem;
  border-top:1px solid var(--hair);font-size:0.82rem;color:var(--muted)}

/* ---------- the link between a guide and its sample question ----------
   The two halves of the site had no connection but the menu bar, so the worked
   questions were only found by accident (2026-09-28). */
.crosslink{margin:1.4rem 0;background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--accent-fill);border-radius:14px;
  padding:0.9rem 1.1rem;font-size:0.95rem;max-width:var(--measure)}
.crosslink .eyebrow{display:block;margin-bottom:0.15rem}
.crosslink b{font-weight:800}

/* "Like what you saw? Drop me a note", in place of an email signup (2026-10-26). */
.note-box{margin:2rem 0 0.5rem;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:1rem 1.2rem;max-width:var(--measure);font-size:0.95rem}
.note-box p{margin:0}
.note-box p + p{margin-top:0.5rem}
.note-box b{font-weight:800}
.note-box .note-follow{font-size:0.88rem;color:var(--ink-2)}

/* The families page: where the one-pager's QR code lands (2026-10-27). */
.family-steps{padding-left:1.3rem;margin:0.6rem 0 0.4rem;max-width:var(--measure)}
.family-steps li{margin:0.35rem 0}
.family-grades{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:1.8rem 0 1rem}
@media (max-width:720px){.family-grades{grid-template-columns:1fr}}
.family-grade{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:1.1rem 1.3rem}
.family-grade h2{margin-top:0}
.family-grade h3{font-size:0.95rem;margin:1rem 0 0.3rem;color:var(--ink-2)}
.family-grade ul{padding-left:1.1rem;margin:0}
.family-grade li{margin:0.25rem 0}

/* The "page not found" page (2026-10-29). */
.notfound-links{list-style:none;padding:0;margin:0.4rem 0 0;display:grid;gap:0.6rem;max-width:var(--measure)}
.notfound-links a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:0.8rem 1.1rem;font-weight:700;text-decoration:none;color:var(--accent-deep)}
.notfound-links a:hover{border-color:var(--accent)}

/* ---------- More practice ----------
   Every listing, grouped by kind. Links go out to TpT, so they carry the ↗. */
.mp-sec{margin-top:clamp(2rem,4vw,3rem)}
.mp-sec h2{margin-top:0.2rem}
.mp-what{color:var(--ink-2);max-width:62ch;margin-top:0.5rem}
.mp-grid{display:grid;gap:0.85rem;margin-top:1rem}
@media(min-width:640px){.mp-grid{grid-template-columns:1fr 1fr}}
.mp-item{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:1rem 1.2rem 1.1rem;display:flex;flex-direction:column;gap:0.45rem;
  box-shadow:0 4px 12px rgba(120,80,40,.06)}
.mp-item h3{font-size:1.08rem}
.mp-item h3 .mp-free{font-family:var(--hand);font-weight:400;margin-left:0.5rem;vertical-align:middle}
.mp-code{font-family:var(--mono);font-size:0.78rem;color:var(--accent);font-variant-numeric:tabular-nums}
.mp-desc{font-size:0.88rem;color:var(--ink-2)}
.mp-links{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.6rem;margin-top:auto;padding-top:0.3rem}
.mp-link{display:inline-flex;align-items:center;min-height:40px;font-size:0.88rem;font-weight:800;
  text-decoration:none;color:var(--on-accent);background:var(--accent-fill);border-radius:999px;
  padding:0.3rem 0.95rem}
.mp-link::after{content:" \2197";margin-left:0.3rem;font-weight:400}
.mp-link:hover{filter:brightness(0.94)}
.mp-free{font-family:var(--hand);font-size:0.95rem;background:var(--sticky);color:#2E2420;
  padding:0.05rem 0.5rem;border-radius:3px;transform:rotate(-2deg);display:inline-block}
.mp-guide{font-size:0.85rem;font-weight:700;color:var(--accent)}

/* ===========================================================================
   Home page, design F (2026-09-17). Problem tabs across the top, "Same math.
   New drawings." Its colors are the site's own tokens, so the home page and
   every other page change together.
   =========================================================================== */
.home-f{
  --f-bg:var(--ground);--f-card:var(--surface);--f-ink:var(--ink);--f-ink-2:var(--ink-2);
  --f-accent:var(--accent-fill);--f-accent-ink:var(--accent);--f-on-accent:var(--on-accent);
  --f-line:var(--line);--f-soft:var(--soft);--f-wood-1:var(--wood-1);--f-wood-2:var(--wood-2);
  --f-sticky:var(--sticky);--f-sage:var(--sage);--f-mark:var(--mark);--f-hand-on-wood:var(--on-wood);
  --f-display:var(--serif);--f-body:var(--sans);--f-hand:var(--hand);
  background:var(--f-bg);color:var(--f-ink);font-family:var(--f-body);font-size:18px;
  padding-block:clamp(0.8rem,2vw,1.4rem) clamp(2rem,5vw,3.5rem)}
.home-f .wrap{max-width:1180px}
.home-f [hidden]{display:none!important}
/* "Math charts" in the masthead points at #charts on the home page, so the jump
   lands on the grid rather than the hero (Chwi, 2026-09-29). */
.f-guides{scroll-margin-top:1rem}
.home-f h2,.home-f h3{font-family:var(--f-display);font-weight:700;color:var(--f-ink)}
.home-f h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.1}
.home-f a{color:var(--f-accent-ink)}
.f-muted{color:var(--f-ink-2);max-width:48ch;margin-top:0.6rem}
.f-hand{font-family:var(--f-hand);color:var(--f-accent-ink);font-size:1.3rem;line-height:1.25}

/* tabs across the top */
.f-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.f-tabs{display:flex;flex-wrap:wrap;gap:10px}
.f-tabs button,.f-tabs a{font:inherit;background:var(--f-card);border:1px solid var(--f-line);border-radius:14px;
  padding:8px 16px;cursor:pointer;text-align:left;color:var(--f-ink);line-height:1.2;text-decoration:none;
  box-shadow:0 4px 12px rgba(120,80,40,.06)}
.f-tabs b{font-family:var(--f-display);font-weight:700;font-size:1.05rem;display:block}
.f-tabs small{display:block;color:var(--f-ink-2);font-size:0.75rem;font-variant-numeric:tabular-nums}
.f-tabs [aria-pressed="true"]{background:var(--f-ink);border-color:var(--f-ink);color:var(--f-bg)}
.f-tabs [aria-pressed="true"] small{color:var(--f-bg);opacity:.8}
.frac{display:inline-flex;flex-direction:column;align-items:center;line-height:1;font-size:.85em;vertical-align:middle}
.frac i{font-style:normal;border-top:1.5px solid currentColor;padding-top:1px}
.f-lang{display:flex;background:var(--f-card);border:1px solid var(--f-line);border-radius:999px;padding:3px}
.f-lang a{border-radius:999px;padding:5px 14px;font-weight:700;text-decoration:none;
  font-size:0.8rem;color:var(--f-ink-2)}
.f-lang a[aria-current="page"]{background:var(--f-ink);color:var(--f-bg)}

/* hero */
.f-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;
  padding-block:clamp(1.4rem,3vw,2.2rem)}
.home-f .f-h1{font-family:"Work Sans",system-ui,sans-serif;font-weight:700;font-size:clamp(2.6rem,4.6vw,4rem);
  line-height:1;letter-spacing:-.03em;color:var(--f-ink);margin:0 0 1rem}
.f-mark{background:linear-gradient(transparent 55%,var(--f-mark) 55%)}
.f-sub{color:var(--f-ink-2);font-size:1.1rem;line-height:1.5;max-width:40ch;margin-bottom:1.2rem}
.f-sentence{font-family:var(--f-display);font-weight:700;font-size:clamp(1.3rem,2vw,1.6rem);line-height:1.9;color:var(--f-ink)}
.f-sentence select{appearance:none;-webkit-appearance:none;font:inherit;line-height:1.35;color:var(--f-accent-ink);
  background:var(--f-card) linear-gradient(45deg,transparent 50%,var(--f-accent) 50%) no-repeat right 14px center/8px 8px;
  border:2px solid var(--f-accent);border-radius:12px;padding:0 34px 0 12px;cursor:pointer;max-width:100%}
.f-btn{font-family:var(--f-body);font-size:1rem;font-weight:800;background:var(--f-accent);color:var(--f-on-accent);
  border:0;border-radius:12px;padding:12px 22px;cursor:pointer;vertical-align:middle}
.f-table{position:relative;height:480px;border-radius:28px;overflow:hidden;
  background:linear-gradient(160deg,var(--f-wood-1),var(--f-wood-2))}
.f-paper{position:absolute;left:40px;top:44px;width:min(410px,80%);background:#fff;border-radius:6px;padding:20px 22px;
  transform:rotate(-3deg);box-shadow:0 18px 40px rgba(60,30,10,.25);color:#2E2420}
.f-paper small{font-weight:800;color:#8A7E74;letter-spacing:.08em;font-size:0.7rem;text-transform:uppercase}
.f-paper b{display:block;font-size:1.3rem;margin:4px 0 8px;font-variant-numeric:tabular-nums}
.f-paper img{width:100%;aspect-ratio:16/9;object-fit:contain;display:block}
.f-note{position:absolute;right:28px;bottom:40px;width:230px;background:var(--f-sticky);padding:16px 18px;
  transform:rotate(4deg);font-family:var(--f-hand);font-size:1.1rem;line-height:1.3;color:#2E2420;
  box-shadow:0 10px 20px rgba(60,40,0,.2)}
.f-mug{position:absolute;left:-26px;bottom:-26px;width:104px;height:104px;border-radius:50%;background:var(--f-sage);
  box-shadow:inset 0 0 0 14px #7FA487,0 12px 26px rgba(40,30,10,.3)}

/* your way, their way */
.f-band{margin-block:1.6rem;border-radius:32px;padding:30px clamp(16px,3vw,44px) 36px;
  background:linear-gradient(160deg,var(--f-wood-1),var(--f-wood-2))}
.f-band .f-hand{color:var(--f-hand-on-wood)}
.f-papers{display:grid;grid-template-columns:1fr 120px 1fr;gap:18px;align-items:center;margin-top:18px}
.f-sheet{background:#fff;border-radius:6px;padding:18px 20px;box-shadow:0 18px 40px rgba(60,30,10,.22);color:#2E2420}
.f-then{transform:rotate(-1.2deg)}.f-now{transform:rotate(1.2deg)}
.f-lab{font-weight:800;font-size:0.7rem;letter-spacing:.1em;text-transform:uppercase;color:#8A7E74}
.f-fig{margin:6px 0 0}
.f-fig img{width:100%;aspect-ratio:16/9;object-fit:contain;display:block}
.f-fig figcaption{font-family:var(--f-display);font-weight:700;font-size:1.15rem;margin-top:6px}
.home-f .f-fig figcaption a{color:#2E2420;text-decoration-color:#C2553B}
.f-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.f-chips button{font:inherit;font-size:0.8rem;font-weight:600;border:1px solid #E3D5C0;background:#FBF3E6;color:#2E2420;
  border-radius:999px;padding:4px 11px;cursor:pointer}
.f-chips [aria-pressed="true"]{background:#5F8468;border-color:#5F8468;color:#fff}
.f-same{background:#F6D98B;padding:14px 8px;text-align:center;font-family:var(--f-hand);font-size:1rem;line-height:1.1;
  transform:rotate(-4deg);box-shadow:0 8px 16px rgba(60,40,0,.2);color:#2E2420}
.f-same b{display:block;font-size:1.8rem;font-variant-numeric:tabular-nums}
.f-all{margin-top:18px;font-weight:700}
.home-f .f-all a{color:var(--f-hand-on-wood)}

/* what's a TEKS */
.f-teks{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:start;padding-block:1.4rem}
.f-codes{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.f-codes button{font:inherit;font-weight:800;font-size:1.05rem;border:2px solid var(--f-line);background:var(--f-card);
  color:var(--f-ink);border-radius:12px;padding:6px 14px;cursor:pointer;font-variant-numeric:tabular-nums}
.f-codes [aria-pressed="true"]{border-color:var(--f-accent);color:var(--f-accent-ink)}
.f-card{background:var(--f-card);border:1px solid var(--f-line);border-top:6px solid var(--f-accent);border-radius:20px;padding:22px}
.f-decode{display:flex;flex-direction:column;gap:12px}
.f-parts{display:flex;gap:10px;flex-wrap:wrap}
.f-parts div{flex:1;min-width:110px;border-radius:12px;background:var(--f-soft);padding:10px 12px}
.f-parts b{display:block;font-family:var(--f-display);font-size:1.8rem;color:var(--f-accent-ink);line-height:1.1}
.f-parts span{font-size:0.8rem;color:var(--f-ink-2)}
.f-plain{font-family:var(--f-display);font-weight:700;font-size:1.35rem}
.f-tea{font-size:0.85rem;color:var(--f-ink-2);border-top:1px solid var(--f-line);padding-top:10px}

/* every guide, and the two doors below it */
.f-guides{padding-block:1.4rem}
.home-f .topic-grid{margin-top:1rem}
.home-f .topic{background:var(--f-card);border-color:var(--f-line);border-radius:16px}
.home-f .topic h3{font-size:1.15rem}
.home-f .topic p{color:var(--f-ink-2)}
.home-f .topic .prob,.home-f .topic .go{color:var(--f-accent-ink)}
.f-more{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-block:1rem}
.f-more-card{display:flex;flex-direction:column;gap:8px;background:var(--f-card);border:1px solid var(--f-line);
  border-radius:20px;padding:22px 24px;text-decoration:none;color:var(--f-ink)}
.f-more-card p{color:var(--f-ink-2);font-size:0.95rem}
.f-more-card span{font-weight:800;color:var(--f-accent-ink)}
.f-more-card:hover,.home-f .topic:hover{border-color:var(--f-accent)}

@media (max-width:820px){
  .f-hero,.f-teks,.f-more{grid-template-columns:1fr}
  .f-table{height:320px}
  .f-paper{left:14px;top:22px;width:250px;padding:14px}
  .f-paper b{font-size:1.05rem}
  .f-note{width:150px;font-size:0.9rem;right:10px;bottom:14px;padding:12px}
  .f-mug{display:none}
  .f-papers{grid-template-columns:1fr}
  .f-same{justify-self:center;width:140px}
  .f-tabs button,.f-tabs a{padding:6px 12px}
}
@media (prefers-reduced-motion: reduce){.home-f *{scroll-behavior:auto!important}}

/* ---------- phones: a shorter top of the page (Chwi, 2026-10-29) ----------
   The menu wrapped to two tall rows, the search hint added a third, the six
   problem tabs wrapped to two rows of cards, and the home page repeated the
   language switch the menu already has. Now the menu and the tabs are each one
   row you swipe sideways, the language link sits beside the wordmark, and the
   hint and the second switch are hidden. Desktop is unchanged. */
@media(max-width:620px){
  .masthead .wrap{position:relative;row-gap:0;padding-top:0.2rem;padding-bottom:0.55rem}
  .masthead nav{order:2;flex:1 0 100%;margin-left:0;flex-wrap:nowrap;gap:1.1rem;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-right:1rem}
  /* no fade on this row: a mask would also hide the language link, which sits
     outside the row; the word cut off at the edge already says "swipe" */
  .masthead nav::-webkit-scrollbar{display:none}
  .masthead nav a{flex:none;white-space:nowrap;font-size:0.86rem;line-height:40px}
  .masthead nav a.lang-switch{position:absolute;top:0.2rem;right:1rem;line-height:44px;
    border-left:0;padding-left:0}
  .search-hint{display:none}
  .f-top{flex-direction:column;align-items:stretch;gap:0}
  .f-lang{display:none}
  .f-tabs{flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:2px 2rem 6px 0;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 85%,transparent);
            mask-image:linear-gradient(to right,#000 85%,transparent)}
  .f-tabs::-webkit-scrollbar{display:none}
  .f-tabs button,.f-tabs a{flex:none;padding:6px 12px;box-shadow:none}
  .f-tabs b{font-size:0.95rem}
  .f-tabs small{font-size:0.7rem}
}