/* ==========================================================================
   SITE THEME — homepage, subject pages, progress dashboard.
   Soft blue / white / pink+green accents, premium dashboard feel,
   per Pranav's UI/UX brief (section 19) and the reference mockup.
   Deliberately distinct from quiz-theme.css, which stays untouched.
   ========================================================================== */
:root{
  --sky: #eef4fb;
  --sky-deep: #dce9f7;
  --white: #ffffff;
  --ink: #1c2a3a;
  --ink-soft: #5b6b7c;
  --line: #dbe4ef;
  --blue: #3e7cb1;
  --blue-deep: #2c5d8a;
  --pink: #d1618a;
  --pink-soft: #fbe7ee;
  --green: #3f9142;
  --green-soft: #e7f5e8;
  --gold: #c8a24a;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans: 'Inter', 'Helvetica Neue', sans-serif;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
}
*{box-sizing:border-box; margin:0; padding:0;}
body.site-body{
  background: linear-gradient(180deg, var(--sky) 0%, var(--white) 340px);
  color: var(--ink); font-family: var(--sans); min-height:100vh;
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 32px; background: var(--white); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10; flex-wrap:wrap;
}
.nav .brand{ font-family: var(--serif); font-weight:700; font-size:19px; color: var(--blue-deep); text-decoration:none; display:flex; align-items:center; gap:8px;}
.nav .brand small{ display:block; font-family:var(--sans); font-weight:400; font-size:10px; color:var(--ink-soft); letter-spacing:.02em;}
.nav .links{ display:flex; gap:22px; flex-wrap:wrap;}
.nav .links a{ color:var(--ink-soft); text-decoration:none; font-size:13.5px; font-weight:500; padding:6px 2px; border-bottom:2px solid transparent;}
.nav .links a:hover, .nav .links a.active{ color: var(--pink); border-bottom-color: var(--pink);}
.nav .streak{ background: var(--pink-soft); color:var(--pink); font-size:12.5px; padding:7px 14px; border-radius:20px; font-weight:600;}

.hero{ max-width:1180px; margin:0 auto; padding:40px 32px 10px; display:grid; grid-template-columns: 1.1fr 0.9fr; gap:36px; align-items:center;}
.hero-copy .kicker{ font-family:var(--serif); font-style:italic; font-size:34px; color:var(--blue-deep); line-height:1.15;}
.hero-copy .quote{ margin-top:14px; font-size:14.5px; color:var(--ink-soft); max-width:44ch; line-height:1.6;}
.hero-copy .quote::before{ content:"“"; }
.hero-copy .quote::after{ content:"”"; }
.hero-actions{ margin-top:26px; display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
.cta{ background: linear-gradient(135deg, var(--pink), #c14670); color:#fff; border:none; padding:14px 28px; border-radius:8px; font-weight:600; font-size:14.5px; text-decoration:none; box-shadow:0 10px 24px -10px rgba(209,97,138,0.55);}
.hero-pills{ display:flex; gap:10px; flex-wrap:wrap; margin-top:22px;}
.pill-stat{ background:var(--white); border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:11.5px; color:var(--ink-soft); display:flex; align-items:center; gap:6px;}
.pill-stat b{ color:var(--ink); font-family:var(--serif); font-size:14px;}
.hero-photo{ position:relative; }
.hero-photo img{ width:100%; border-radius:16px; box-shadow: 0 24px 60px -20px rgba(44,93,138,0.35); display:block;}
.sticky-note{ position:absolute; bottom:-16px; left:-16px; background:#fff7d6; padding:12px 16px; border-radius:4px; box-shadow:0 8px 20px -8px rgba(0,0,0,.25); font-family:var(--serif); font-style:italic; font-size:13px; color:#5b4a1e; transform:rotate(-3deg); max-width:200px;}

.section{ max-width:1180px; margin:0 auto; padding:36px 32px;}
.section h2{ font-family:var(--serif); font-size:22px; color:var(--ink);}
.section .lede{ color:var(--ink-soft); font-size:13.5px; margin-top:4px;}

.subject-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:18px; margin-top:20px;}
.subject-card{ background:var(--white); border:1px solid var(--line); border-radius:14px; padding:22px; text-decoration:none; color:var(--ink); display:block; transition: transform .15s ease, box-shadow .15s ease;}
.subject-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 32px -18px rgba(28,42,58,0.25);}
.subject-card h3{ font-family:var(--serif); font-size:19px; margin-bottom:4px;}
.subject-card .sub-tagline{ font-size:12px; color:var(--ink-soft); margin-bottom:14px;}
.subject-card .sub-meta{ font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); margin-top:14px; padding-top:12px; border-top:1px dashed var(--line);}
.subject-card.physics{ border-top:4px solid var(--blue); }
.subject-card.chemistry{ border-top:4px solid var(--pink); }
.subject-card.biology{ border-top:4px solid var(--green); }

.feature-strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:14px; margin-top:8px;}
.feature-card{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:16px 18px;}
.feature-card .k{ font-family:var(--serif); font-size:14.5px; margin-bottom:2px;}
.feature-card .v{ font-size:11.5px; color:var(--ink-soft);}

.quote-band{ background: linear-gradient(120deg, var(--pink-soft), #fdf2f6); border-radius:16px; padding:30px 34px; text-align:center; font-family:var(--serif); font-style:italic; font-size:16px; color:#5c2740; line-height:1.6; max-width:1180px; margin:8px auto 0;}
.quote-band .who{ display:block; margin-top:10px; font-size:12px; not-italic; font-family:var(--sans); color:var(--pink);}

footer.site-footer{ text-align:center; padding:30px; font-size:11.5px; color:var(--ink-soft);}

/* --- Subject page: topic cards --- */
.topic-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px; margin-top:20px;}
.topic-card{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:18px 20px; text-decoration:none; color:var(--ink); display:block; transition: transform .12s ease;}
.topic-card:hover{ transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgba(28,42,58,0.28);}
.topic-card h4{ font-family:var(--serif); font-size:16px;}
.topic-card .tc-count{ font-family:var(--mono); font-size:11px; color:var(--ink-soft); margin-top:4px;}
.topic-card .tc-stats{ display:flex; gap:10px; margin-top:12px; font-size:11px; flex-wrap:wrap;}
.tc-badge{ padding:3px 9px; border-radius:20px; background:var(--sky-deep); color:var(--blue-deep);}
.tc-badge.mastered{ background:var(--green-soft); color:var(--green);}
.tc-badge.needs-revision, .tc-badge.not-mastered{ background:var(--pink-soft); color:var(--pink);}

/* --- Progress dashboard --- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:14px; margin-top:18px;}
.stat-card{ background:var(--white); border:1px solid var(--line); border-radius:12px; padding:18px; text-align:center;}
.stat-card .v{ font-family:var(--serif); font-size:26px; color:var(--blue-deep);}
.stat-card .k{ font-size:11px; color:var(--ink-soft); margin-top:4px;}
.attempt-row{ display:flex; justify-content:space-between; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; flex-wrap:wrap; gap:6px;}
.attempt-row .tag{ font-family:var(--mono); font-size:11px; color:var(--ink-soft);}

@media (max-width:820px){
  .hero{ grid-template-columns:1fr; }
  .hero-photo{ order:-1; max-width:320px; margin:0 auto;}
}