/* Shared styles for the Fractions Learning Hub */
:root{--ink:#202a44;--muted:#5d6880;--brand:#3157a4;--brand-dark:#203d7c;--wash:#f3f6fc;--line:#dce3f0;--accent:#f5c451;--white:#fff}
*{box-sizing:border-box}
body{margin:0;background:#fbfcff;color:var(--ink);font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.wrap{width:min(100% - 2rem,980px);margin-inline:auto}
.site-header{background:linear-gradient(135deg,#203d7c,#426bc0);color:white;padding:2.4rem 0 1.5rem}
.eyebrow{font-size:.76rem;font-weight:800;letter-spacing:.15em;margin:0 0 .4rem;color:#f9d77e}
h1{font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.08;margin:.1rem 0 .7rem;letter-spacing:-.04em}
.lede{font-size:1.12rem;max-width:650px;color:#e7edff;margin:.5rem 0 1.4rem}
nav{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:1.4rem}
nav a{color:white;text-decoration:none;padding:.45rem .7rem;border:1px solid #ffffff55;border-radius:999px;font-size:.9rem}
nav a:hover,nav a[aria-current=page]{background:white;color:var(--brand-dark)}
main{padding:2rem 0 3rem}
h2{font-size:1.55rem;line-height:1.25;margin:1.7rem 0 .8rem}
h3{margin:.35rem 0}
p{margin:.55rem 0 1rem}
.panel,.card,.note{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:1.35rem;box-shadow:0 5px 18px #1c32600a}
.intro{padding:1.7rem}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.card{display:block;text-decoration:none;color:inherit;transition:transform .15s,border-color .15s}
.card:hover{transform:translateY(-3px);border-color:#91a8dd}
.card p{color:var(--muted);margin-bottom:.2rem}
.number{font-size:.8rem;font-weight:800;letter-spacing:.12em;color:var(--brand)}
.note{margin:1.4rem 0;background:#fff9e8;border-color:#f1dfa6}
.fraction-demo{display:flex;gap:4px;max-width:350px;margin:1rem 0 .4rem}
.part{height:52px;flex:1;border:2px solid var(--brand);border-radius:5px;background:#eef2fb}
.part.filled{background:var(--accent);border-color:#c58b13}
.fraction-demo.six .part{height:42px}
.small{font-size:.9rem;color:var(--muted)}
.big-fraction{display:flex;flex-direction:column;align-items:center;width:75px;font-size:2rem;font-weight:750;line-height:1.1;margin:1rem 0 1.4rem}
.big-fraction .bar{height:3px;background:var(--ink);width:100%;margin:.18rem 0}
.example,.math{font-size:1.2rem;font-weight:700;color:var(--brand-dark)}
.two-col,.equiv-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.equiv-row>div{background:var(--wash);border-radius:12px;padding:1rem;min-width:0}
.math{background:var(--wash);padding:.7rem 1rem;border-radius:10px;display:inline-block}
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem}
a{color:var(--brand)}
.button-link{display:inline-block;background:var(--brand);color:white;text-decoration:none;padding:.7rem 1rem;border-radius:10px;font-weight:700}
.button-link:hover{background:var(--brand-dark)}
details{margin-top:1.2rem;padding:1rem;background:var(--wash);border-radius:12px}
summary{cursor:pointer;font-weight:750;color:var(--brand-dark)}
footer{border-top:1px solid var(--line);padding:1.4rem 0;color:var(--muted);font-size:.9rem}
@media(max-width:540px){.site-header{padding-top:1.7rem}.panel{padding:1rem}.pager{flex-direction:column}.fraction-demo{max-width:100%}}