/* MathSheet Hub — royal blue + warm yellow, classroom-friendly */
:root {
  --blue-50:#eff6ff; --blue-100:#dbeafe; --blue-200:#bfdbfe;
  --blue-500:#3b82f6; --blue-600:#2563eb; --blue-700:#1d4ed8;
  --blue-800:#1e40af; --blue-900:#1e3a8a;
  --yellow-100:#fef3c7; --yellow-300:#fcd34d; --yellow-400:#facc15;
  --yellow-500:#eab308; --yellow-600:#ca8a04;
  --ink-900:#0f172a; --ink-700:#334155; --ink-500:#64748b; --ink-300:#cbd5e1;
  --bg:#ffffff; --surface:#f8fafc; --surface-2:#f1f5f9;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 4px 12px rgba(15,23,42,.06);
  --radius:14px; --radius-sm:8px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink-900);
  font:16px/1.6 'Inter','Helvetica Neue',Arial,sans-serif;
  font-feature-settings:"cv11","ss01";
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-700);text-decoration:none;transition:color .15s}
a:hover{color:var(--blue-900);text-decoration:underline}
h1,h2,h3,h4{font-family:'Roboto Slab','Georgia',serif;color:var(--ink-900);line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.2vw,3rem);font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700}
h3{font-size:1.25rem;font-weight:700}
p{margin:0 0 1rem}

/* layout */
.container{max-width:1200px;margin:0 auto;padding:0 1.25rem}
.shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:2.5rem;margin:2rem auto}
@media (max-width:980px){.shell{grid-template-columns:1fr}}

/* header */
.site-header{
  background:var(--blue-800);color:#fff;
  border-bottom:4px solid var(--yellow-400);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;max-width:1200px;margin:0 auto;gap:1rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.75rem;color:#fff;text-decoration:none}
.brand-mark{
  width:42px;height:42px;border-radius:10px;
  background:var(--yellow-400);color:var(--blue-900);
  display:grid;place-items:center;font-family:'Roboto Slab',serif;font-weight:800;font-size:1.4rem;
  box-shadow:0 2px 0 rgba(0,0,0,.15);
}
.brand-name{font-family:'Roboto Slab',serif;font-weight:800;font-size:1.35rem;letter-spacing:-.01em}
.brand-tag{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--yellow-300);font-weight:600;font-family:'Inter',sans-serif}
.nav{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center}
.nav a{color:#fff;font-weight:500;font-size:.95rem;padding:.4rem 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--yellow-400);text-decoration:none}
.nav .nav-cta{background:var(--yellow-400);color:var(--blue-900);padding:.5rem 1rem;border-radius:8px;font-weight:700}
.nav .nav-cta:hover{background:var(--yellow-300);border-bottom-color:transparent}

/* hero */
.hero{
  background:linear-gradient(180deg, var(--blue-800) 0%, var(--blue-700) 100%);
  color:#fff;padding:3.5rem 0 4rem;position:relative;overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(circle at 20% 30%, rgba(250,204,21,.18), transparent 35%),
                   radial-gradient(circle at 80% 70%, rgba(59,130,246,.45), transparent 40%);
  pointer-events:none;
}
.hero-inner{position:relative;z-index:1}
.hero-eyebrow{display:inline-block;background:rgba(250,204,21,.18);color:var(--yellow-300);
  padding:.35rem .8rem;border-radius:999px;font-weight:600;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.hero h1{color:#fff;margin:1rem 0 .75rem;max-width:780px}
.hero h1 .accent{color:var(--yellow-400)}
.hero-sub{color:#dbeafe;font-size:1.15rem;max-width:680px;margin-bottom:2rem}
.hero-stats{display:flex;gap:2rem;color:#bfdbfe;font-size:.95rem;margin-top:1rem;flex-wrap:wrap}
.hero-stats b{color:#fff;font-family:'Roboto Slab',serif;font-size:1.5rem;display:block}

/* grade grid hero */
.grade-grid{
  display:grid;grid-template-columns:repeat(9,1fr);gap:.85rem;margin-top:2.5rem;
}
@media (max-width:1100px){.grade-grid{grid-template-columns:repeat(5,1fr)}}
@media (max-width:640px){.grade-grid{grid-template-columns:repeat(3,1fr)}}
.grade-card{
  background:#fff;color:var(--ink-900);border-radius:14px;padding:1.25rem .75rem;
  text-align:center;box-shadow:var(--shadow);
  transition:transform .15s ease, box-shadow .15s ease;
  border:2px solid transparent;
}
.grade-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(15,23,42,.18);
  border-color:var(--yellow-400);text-decoration:none}
.grade-card .badge{
  display:block;width:46px;height:46px;border-radius:50%;
  background:var(--blue-700);color:#fff;line-height:46px;margin:0 auto .5rem;
  font-family:'Roboto Slab',serif;font-weight:800;font-size:1.4rem;
}
.grade-card .glabel{display:block;font-weight:700;color:var(--ink-900);font-size:.95rem;margin-bottom:.15rem}
.grade-card .gcount{display:block;font-size:.78rem;color:var(--ink-500)}

/* sections */
section.block{padding:3rem 0}
section.block.alt{background:var(--surface)}
.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:.5rem}
.section-head .more{font-weight:600;color:var(--blue-700)}

/* cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem}
.ws-card{
  background:#fff;border-radius:var(--radius);padding:1.1rem 1.1rem 1.2rem;
  box-shadow:var(--shadow);border-top:4px solid var(--blue-700);
  display:flex;flex-direction:column;gap:.55rem;
  transition:transform .15s, box-shadow .15s;
}
.ws-card:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(15,23,42,.12);text-decoration:none}
.ws-card .meta{font-size:.78rem;color:var(--blue-700);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.ws-card h3{font-size:1.05rem;color:var(--ink-900);font-family:'Roboto Slab',serif}
.ws-card p{color:var(--ink-700);font-size:.9rem;margin:0}
.ws-card .tags{margin-top:auto;display:flex;flex-wrap:wrap;gap:.4rem;padding-top:.6rem}
.tag{background:var(--blue-100);color:var(--blue-800);padding:.2rem .55rem;border-radius:999px;font-size:.72rem;font-weight:600}
.tag.warm{background:var(--yellow-100);color:var(--yellow-600)}

/* pill grid for topics */
.topic-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem}
.topic-pill{
  background:#fff;border-radius:12px;padding:1rem 1.1rem;box-shadow:var(--shadow);
  display:flex;align-items:center;gap:.85rem;color:var(--ink-900);
  border-left:4px solid var(--yellow-400);
}
.topic-pill:hover{text-decoration:none;transform:translateY(-2px);transition:transform .15s}
.topic-pill .icon{
  width:38px;height:38px;border-radius:8px;background:var(--blue-100);
  display:grid;place-items:center;color:var(--blue-700);font-weight:800;font-family:'Roboto Slab',serif;
}
.topic-pill .t{font-weight:700}
.topic-pill .c{display:block;font-size:.78rem;color:var(--ink-500)}

/* sidebar */
.sidebar{display:flex;flex-direction:column;gap:1.5rem}
.side-card{
  background:#fff;border:1px solid var(--ink-300);border-radius:var(--radius);
  padding:1.1rem 1.2rem;
}
.side-card h3{font-size:1rem;text-transform:uppercase;letter-spacing:.06em;color:var(--blue-800);font-family:'Inter',sans-serif;font-weight:800}
.side-card ul{list-style:none;padding:0;margin:0}
.side-card li{padding:.5rem 0;border-bottom:1px dashed var(--ink-300);font-size:.93rem}
.side-card li:last-child{border-bottom:0}
.side-card .pbn-link{display:block;color:var(--ink-900);font-weight:600}
.side-card .pbn-link small{display:block;color:var(--ink-500);font-weight:400;font-size:.8rem;margin-top:.1rem}

/* worksheet detail */
.ws-hero{background:var(--blue-50);padding:2rem 0;border-bottom:1px solid var(--blue-100)}
.ws-hero .crumb{font-size:.85rem;color:var(--ink-500);margin-bottom:.6rem}
.ws-hero .crumb a{color:var(--blue-700)}
.ws-hero h1{margin:.2rem 0 .6rem}
.ws-hero .stand-pill{
  display:inline-block;background:var(--yellow-400);color:var(--blue-900);
  font-family:'Roboto Slab',serif;font-weight:800;padding:.2rem .7rem;border-radius:8px;font-size:.95rem;
}
.ws-meta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1rem;color:var(--ink-700)}
.ws-meta span{background:#fff;padding:.35rem .7rem;border-radius:999px;font-size:.85rem;border:1px solid var(--ink-300)}

article.ws-body h2{margin-top:2rem}
article.ws-body p{font-size:1.02rem;color:var(--ink-700)}

.worked{
  background:var(--yellow-100);border-left:5px solid var(--yellow-400);
  padding:1.25rem 1.4rem;border-radius:10px;margin:1rem 0 2rem;
}
.worked h3{color:var(--blue-900);margin-top:0}
.worked .label{font-weight:700;color:var(--yellow-600);text-transform:uppercase;font-size:.78rem;letter-spacing:.08em}

.worksheet-paper{
  background:#fff;border:1px solid var(--ink-300);border-radius:10px;padding:1.5rem 1.75rem;
  box-shadow:var(--shadow);
}
.worksheet-paper h3{margin-top:0;border-bottom:2px solid var(--yellow-400);padding-bottom:.5rem;display:inline-block}
.q-list{list-style:none;padding:0;margin:0;counter-reset:q}
.q-list li{
  counter-increment:q;padding:.85rem 0;border-bottom:1px dashed var(--ink-300);
  display:grid;grid-template-columns:36px 1fr;gap:.75rem;font-size:1.02rem;
}
.q-list li:last-child{border-bottom:none}
.q-list li::before{
  content:counter(q);
  background:var(--blue-700);color:#fff;border-radius:6px;
  font-weight:700;width:28px;height:28px;display:grid;place-items:center;font-size:.85rem;
}
.q-list .answer-blank{color:var(--ink-500);font-style:italic}

.answer-key{
  background:var(--surface-2);border:1px dashed var(--blue-700);border-radius:10px;
  padding:1.25rem 1.4rem;margin-top:1.5rem;
}
.answer-key h3{margin-top:0;color:var(--blue-800)}
.answer-key ol{columns:2;column-gap:2rem;padding-left:1.25rem;margin:0}
.answer-key li{padding:.25rem 0;font-size:.95rem}

.note-block{
  background:var(--blue-50);border-radius:10px;padding:1rem 1.2rem;margin-top:1.5rem;
  border-left:4px solid var(--blue-700);
}
.note-block h4{margin:0 0 .4rem;color:var(--blue-800);font-family:'Inter',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}
.note-block p{margin:0;color:var(--ink-700)}

/* buttons */
.btn{display:inline-block;padding:.7rem 1.3rem;border-radius:8px;font-weight:700;
  background:var(--yellow-400);color:var(--blue-900);border:0;cursor:pointer;font-family:'Inter',sans-serif}
.btn:hover{background:var(--yellow-300);text-decoration:none}
.btn.secondary{background:var(--blue-700);color:#fff}
.btn.secondary:hover{background:var(--blue-800)}
.btn.ghost{background:transparent;color:var(--blue-700);border:2px solid var(--blue-700)}

/* pagination */
.pagination{display:flex;gap:.4rem;justify-content:center;margin:2rem 0;flex-wrap:wrap}
.pagination a, .pagination span{
  padding:.5rem .85rem;border-radius:8px;border:1px solid var(--ink-300);
  background:#fff;color:var(--ink-700);font-weight:600;
}
.pagination a:hover{background:var(--blue-50);text-decoration:none;color:var(--blue-700)}
.pagination .current{background:var(--blue-700);color:#fff;border-color:var(--blue-700)}

/* footer */
.site-footer{background:var(--ink-900);color:#cbd5e1;margin-top:3rem;padding:2.5rem 0 1.5rem}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:2rem}
.foot-grid h4{color:#fff;font-family:'Inter',sans-serif;font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.08em}
.foot-grid a{color:#cbd5e1;font-size:.93rem;display:block;padding:.25rem 0}
.foot-grid a:hover{color:var(--yellow-400)}
.foot-bottom{border-top:1px solid #1e293b;margin-top:2rem;padding-top:1rem;font-size:.85rem;text-align:center;color:#64748b}

/* search */
.search-form{display:flex;gap:.5rem;margin:1rem 0 2rem;max-width:560px}
.search-form input[type=text]{
  flex:1;padding:.7rem 1rem;border:1px solid var(--ink-300);border-radius:8px;font-size:1rem;font-family:inherit;
}
.search-form input[type=text]:focus{outline:2px solid var(--blue-500);border-color:var(--blue-500)}

/* prose for static pages */
.prose{max-width:760px}
.prose h2{margin-top:2rem;color:var(--blue-800)}
.prose h3{margin-top:1.5rem}
.prose p{font-size:1.02rem;color:var(--ink-700)}
.prose .kbd, .kbd{
  font-family:'SFMono-Regular',Menlo,monospace;font-size:.88em;
  background:var(--surface-2);padding:.1em .4em;border-radius:4px;border:1px solid var(--ink-300);
}
.notice{background:var(--yellow-100);border-left:4px solid var(--yellow-400);padding:1rem 1.25rem;border-radius:8px;margin:1.5rem 0}

/* misc */
.lead{font-size:1.1rem;color:var(--ink-700)}
.kicker{color:var(--blue-700);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
hr.rule{border:0;border-top:1px solid var(--ink-300);margin:2rem 0}

/* print */
@media print {
  .site-header, .site-footer, .sidebar, .nav, .ws-meta, .answer-key, .hero { display:none !important; }
  body{background:#fff;color:#000}
  .worksheet-paper{box-shadow:none;border:0}
  .shell{display:block}
}