/* science.html — long-form explainer for parents (2026-08-13).
   Built entirely on the existing tokens in css/style.css; this file adds
   layout only, no new colours. Reading measure is held near 65ch
   throughout because, unlike the portal, this page is genuinely read
   top-to-bottom rather than scanned. */

.sci-main { background: var(--bg-card); }

/* ---- Hero ---- */
.sci-hero {
  background:
    radial-gradient(1200px 400px at 15% -30%, rgba(15, 123, 138, 0.10), transparent 60%),
    var(--bg-light);
  border-bottom: 1px solid var(--border);
  padding: 56px 0 44px;
}
.sci-hero-title {
  font-family: 'Poppins', sans-serif;
  font-size: 38px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--navy-dark);
  max-width: 20ch;
  margin: 0 0 16px;
  text-wrap: balance;
}
.sci-hero-sub {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 68ch;
  margin: 0 0 26px;
}
.sci-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.sci-nav-link {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy-dark);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.sci-nav-link:hover { transform: translateY(-2px); border-color: var(--teal); color: var(--teal); }
.sci-nav-cog:hover { border-color: var(--navy); color: var(--navy); }
.sci-nav-math:hover { border-color: var(--amber-dark); color: var(--amber-dark); }
.sci-nav-gk:hover { border-color: var(--violet); color: var(--violet); }
.sci-back { padding: 9px 18px; font-size: 14px; }

/* ---- Section shell ---- */
.sci-section { padding: 60px 0; scroll-margin-top: 20px; }
.sci-alt { background: var(--bg-light); }
.sci-section-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.sci-section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 10px;
}
.sci-section-icon svg { width: 100%; height: 100%; }
.sci-icon-cog { color: var(--navy); }
.sci-icon-spell { color: var(--teal); }
.sci-icon-math { color: var(--amber-dark); }
.sci-icon-gk { color: var(--violet); }
.sci-section-title {
  font-family: 'Poppins', sans-serif;
  font-size: 27px;
  line-height: 1.28;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0;
  max-width: 26ch;
  text-wrap: balance;
}
.sci-center { max-width: none; text-align: center; margin: 0 auto 10px; }
.sci-lede {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 62ch;
  margin: 0 auto 34px;
  text-align: center;
}
.sci-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }

/* ---- Two-column prose cards ---- */
.sci-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.sci-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 28px;
}
.sci-alt .sci-card { background: var(--bg-card); }
.sci-card h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0 0 12px;
}
.sci-card p {
  font-size: 15px;
  line-height: 1.68;
  color: var(--text-muted);
  margin: 0 0 12px;
  max-width: 62ch;
}
.sci-card p:last-child { margin-bottom: 0; }
.sci-card strong { color: var(--navy-dark); font-weight: 600; }
.sci-card-accent { border-left: 3px solid var(--teal); }

/* ---- Sub-headings inside a section ---- */
.sci-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 44px 0 6px;
}
.sci-sub + .sci-grid, .sci-sub + .sci-domains { margin-top: 18px; }
.sci-sub-note { font-size: 14px; color: var(--text-muted); margin: 0 0 20px; max-width: 62ch; }

/* ---- The six CHC domains ---- */
.sci-domains {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}
.sci-domain {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--navy);
  border-radius: 12px;
  padding: 20px 22px;
}
.sci-domain-name {
  font-family: 'Poppins', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0 0 8px;
}
.sci-domain-name span {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--teal);
  letter-spacing: 0.02em;
  margin-top: 3px;
}
.sci-domain p { font-size: 14px; line-height: 1.62; color: var(--text-muted); margin: 0; }

/* ---- "How practice is linked" closer ---- */
.sci-linked {
  margin-top: 34px;
  background: rgba(15, 123, 138, 0.06);
  border: 1px solid rgba(15, 123, 138, 0.2);
  border-radius: var(--radius);
  padding: 24px 28px;
}
.sci-linked h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--teal);
  margin: 0 0 8px;
}
.sci-linked p { font-size: 15px; line-height: 1.68; color: var(--navy-dark); margin: 0; max-width: 78ch; }

/* ---- Numbered mechanism steps (maths engine) ---- */
.sci-steps { display: flex; flex-direction: column; gap: 14px; }
.sci-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
}
.sci-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--amber);
  color: var(--navy-dark);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.sci-step-title {
  font-family: 'Poppins', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0 0 5px;
}
.sci-step p { font-size: 14.5px; line-height: 1.65; color: var(--text-muted); margin: 0; max-width: 76ch; }
.sci-step strong { color: var(--navy-dark); font-weight: 600; }

/* ---- Why regular practice works ---- */
.sci-why { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.sci-why-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.sci-why-head {
  font-family: 'Poppins', sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0 0 9px;
}
.sci-why-card p:last-child { font-size: 14.5px; line-height: 1.68; color: var(--text-muted); margin: 0; }

/* ---- Limits: the honest bit, given real weight rather than fine print ---- */
.sci-limits {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 32px 34px;
}
.sci-limits h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0 0 12px;
}
.sci-limits > p { font-size: 15.5px; line-height: 1.68; color: var(--text-muted); margin: 0 0 18px; max-width: 76ch; }
.sci-limits ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.sci-limits li { font-size: 15px; line-height: 1.68; color: var(--text-muted); max-width: 76ch; }
.sci-limits strong { color: var(--navy-dark); font-weight: 600; }

.sci-cta { text-align: center; margin-top: 44px; }
.sci-cta h3 {
  font-family: 'Poppins', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--navy-dark);
  margin: 0 0 8px;
}
.sci-cta p { font-size: 15.5px; color: var(--text-muted); margin: 0 auto 20px; max-width: 56ch; }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .sci-domains { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 780px) {
  .sci-hero { padding: 40px 0 34px; }
  .sci-hero-title { font-size: 30px; max-width: none; }
  .sci-section { padding: 44px 0; }
  .sci-section-title { font-size: 23px; max-width: none; }
  .sci-grid, .sci-why, .sci-domains { grid-template-columns: 1fr; }
  .sci-card, .sci-why-card { padding: 22px 20px; }
  .sci-limits { padding: 24px 22px; }
  .sci-back { display: none; }
}