/* Shared styles for the inner pages (/learn/, /worksheets/, /practice/, /waitlist/). The home page keeps its own inline CSS. */
/* Self-hosted latin subsets of the Google fonts (SIL OFL), so these pages wait on no third-party stylesheet. */
@font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 700 800; font-display: swap; src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/instrument-sans-latin.woff2) format("woff2"); }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: #fbf7f1; color: #22324a;
  font-family: "Instrument Sans", "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, "Noto Sans Devanagari", sans-serif;
  font-size: 1.08rem; line-height: 1.7; -webkit-font-smoothing: antialiased;
}
a { color: #b93d0b; text-underline-offset: 0.18em; }
a:hover { color: #0e1b2e; }
:focus-visible { outline: 3px solid #0a63c4; outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 1rem; top: 1rem; background: #fff; padding: 0.5rem 1rem; z-index: 10; display: inline-flex; align-items: center; min-height: 2.75rem; }
.wrap { width: 100%; max-width: 72rem; margin-inline: auto; padding-inline: clamp(1.1rem, 0.5rem + 3vw, 3.5rem); }
/* tap targets: every header, breadcrumb and skip link is at least 44 px tall (2.75rem; launch-readiness pass, 21 Oct
   2026: the header links were 21 px and the breadcrumbs 18 px on a 360 px phone) */
.site-head { padding-block: 0.6rem; border-bottom: 1px solid #ece4d6; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.brand {
  font-family: "Bricolage Grotesque", "Avenir Next", Arial, sans-serif; font-weight: 800; font-size: 1.35rem;
  letter-spacing: -0.03em; color: #0e1b2e; text-decoration: none; display: inline-flex; align-items: center; min-height: 2.75rem;
}
.site-head nav a { color: #22324a; text-decoration: none; font-weight: 600; margin-left: 1.2rem; display: inline-flex; align-items: center; min-height: 2.75rem; }
.site-head nav a:hover, .site-head nav a[aria-current="page"] { color: #b93d0b; }
main { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem); }
.prose { max-width: 42rem; margin-inline: auto; }
.prose a { overflow-wrap: anywhere; } /* long source URLs wrap on a phone (20 Oct: they scrolled the page 329 px sideways) */
.kicker {
  font-family: "Bricolage Grotesque", "Avenir Next", Arial, sans-serif; font-weight: 800; font-size: 0.8rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: #b93d0b;
}
h1, h2, h3 { font-family: "Bricolage Grotesque", "Avenir Next", Arial, sans-serif; color: #0e1b2e; letter-spacing: -0.02em; line-height: 1.15; }
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem); font-weight: 800; margin-block: 0.6rem 1.2rem; text-wrap: balance; }
h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem); margin-block: 2.4rem 0.8rem; }
h3 { font-size: 1.2rem; margin-block: 1.8rem 0.5rem; }
.prose p, .prose ul, .prose ol, .prose blockquote { margin-block: 0 1.1rem; }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose li { margin-block: 0.3rem; }
.prose blockquote { border-left: 4px solid #e64a19; padding: 0.4rem 0 0.4rem 1rem; color: #4a5b70; background: #fff6ee; }
.prose hr { border: 0; border-top: 1px solid #ece4d6; margin-block: 2rem; }
.meta { color: #56657a; font-size: 0.95rem; }
.note { background: #fff; border: 1px solid #ece4d6; border-radius: 14px; padding: 1rem 1.2rem; }
.cards { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 1.5rem; }
.card { background: #fff; border: 1px solid #ece4d6; border-radius: 18px; padding: 1.4rem; text-decoration: none; color: inherit; display: block; }
.card:hover { border-color: #e64a19; }
.card h2 { margin: 0.4rem 0 0.5rem; font-size: 1.3rem; }
/* /learn/ hub groups and the related-guides block at the end of each guide */
.hub-group { margin-top: 2.5rem; }
.hub-group > h2 { font-size: 1.5rem; }
.related { margin-top: 2.5rem; padding: 1.2rem 1.4rem; background: #fff; border: 1px solid #ece4d6; border-radius: 18px; }
.related h2 { margin: 0 0 0.6rem; font-size: 1.2rem; }
.related ul { margin: 0; padding-left: 1.2rem; }
.related li + li { margin-top: 0.45rem; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.2rem; padding: 0.8rem 1.5rem;
  border-radius: 999px; border: 0; cursor: pointer; background: #c43c12; color: #fff; text-decoration: none;
  font: 700 1rem "Bricolage Grotesque", "Avenir Next", Arial, sans-serif;
}
.btn:hover { background: #b93d0b; color: #fff; }
form.waitlist { display: grid; gap: 0.9rem; max-width: 30rem; margin-top: 1.5rem; }
form.waitlist label { font-weight: 600; }
form.waitlist input, form.waitlist select {
  width: 100%; font: inherit; padding: 0.75rem 0.9rem; border: 2px solid #ddd3c2; border-radius: 12px; background: #fff;
}
form.waitlist .check { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 400; font-size: 0.95rem; }
form.waitlist .check input { width: auto; margin-top: 0.35rem; }
.status { font-weight: 600; }
.site-foot { border-top: 1px solid #ece4d6; padding-block: 1.6rem; color: #56657a; font-size: 0.92rem; }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.site-foot a { color: inherit; display: inline-flex; align-items: center; min-height: 2.75rem; } /* 44 px tap target (qa 22 Oct: 18 px at 390 px) */
/* Devanagari breaks apart with wide letter-spacing (seen 2026-10-12 on the Hindi guide). */
:lang(hi) .kicker, .kicker:lang(hi), :lang(mr) .kicker, .kicker:lang(mr) { letter-spacing: 0; text-transform: none; }
/* tables in guides (2026-10-12) */
.table-wrap { overflow-x: auto; margin-block: 0 1.1rem; }
.prose table { border-collapse: collapse; width: 100%; font-size: 0.95rem; background: #fff; }
.prose th, .prose td { text-align: left; padding: 0.5rem 0.7rem; border-bottom: 1px solid #ece4d6; vertical-align: top; }
.prose th { color: #4a5b70; font-weight: 700; }
/* worksheets (2026-10-12): one printable sheet per language, answer key on its own page */
.worksheet h1 .muted { color: #56657a; font-weight: 700; }
.sheet { max-width: 42rem; margin: 2.5rem auto 0; background: #fff; border: 1px solid #ece4d6; border-radius: 18px; padding: 1.6rem clamp(1rem, 0.5rem + 2vw, 2rem); }
.sheet-head h2 { margin-top: 0; }
.sheet .fill { display: flex; gap: 1.5rem; flex-wrap: wrap; color: #4a5b70; font-size: 0.95rem; margin-block: 0.4rem 0; }
.sheet .questions { padding-left: 1.4rem; }
.sheet .questions > li { margin-block: 0.9rem; }
.sheet .q { font-weight: 600; font-size: 1.12rem; margin: 0; }
.sheet .options { padding-left: 1.6rem; margin-block: 0.3rem; }
.sheet .blank { height: 1.9rem; border-bottom: 1px dashed #c9bfae; margin: 0.4rem 0 0; }
.sheet .key { border-top: 1px dashed #c9bfae; margin-top: 1.6rem; padding-top: 0.4rem; }
.sheet .answers { padding-left: 1.4rem; font-size: 0.98rem; }
.sheet .answers li { margin-block: 0.4rem; }
.sheet .cards h3, .worksheet .cards h3 { margin: 0.4rem 0 0.5rem; font-size: 1.25rem; }
.cards h3 { margin: 0.4rem 0 0.5rem; font-size: 1.25rem; }
@media print {
  .no-print, .skip { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  main { padding: 0; }
  .sheet { border: 0; border-radius: 0; padding: 0; margin: 0; max-width: none; page-break-before: always; break-before: page; }
  .sheet:first-of-type { page-break-before: auto; break-before: auto; }
  .sheet .key { page-break-before: always; break-before: page; border: 0; }
  .sheet .blank { height: 2.4rem; }
  a { color: inherit; text-decoration: none; }
}
/* practice page (2026-10-12) */
.practice .setup { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; max-width: 42rem; margin: 1.5rem auto 0; }
.practice .setup select { font: inherit; padding: 0.55rem 0.8rem; border: 2px solid #ddd3c2; border-radius: 12px; background: #fff; }
.practice section { max-width: 42rem; margin-inline: auto; }
.topic-buttons, .option-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-block: 0.8rem; }
.topic-buttons .topic-subject { flex-basis: 100%; margin: 0.6rem 0 0; font-size: 1.05rem; }
.btn-topic, .btn-option { min-height: 2.8rem; padding: 0.55rem 1.1rem; font-size: 0.98rem; }
.practice-card { background: #fff; border: 1px solid #ece4d6; border-radius: 18px; padding: 1.2rem 1.4rem; margin-top: 1.2rem; }
.practice-question { font-size: 1.45rem; font-weight: 700; margin: 0.4rem 0 0.8rem; }
.answer-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.answer-row input { flex: 1 1 10rem; font: inherit; font-size: 1.15rem; padding: 0.7rem 0.9rem; border: 2px solid #ddd3c2; border-radius: 12px; }
.practice-feedback { max-width: 42rem; margin: 1rem auto 0; font-size: 1.08rem; }
.practice-feedback.ok { color: #1b6e3a; }
.practice-feedback.not-yet { color: #8a2d0b; }
.practice > p.note { max-width: 42rem; margin-inline: auto; }

/* breadcrumbs and class hubs (worksheets) */
.crumbs { font-size: 0.92rem; color: #56657a; margin-bottom: 0.6rem; }
/* inline, not a wrapping flex row (22 Oct): as flex items a long last crumb (a guide's title) moved to its own line
   as a whole, "›" first, under "Home › Learn"; inline, the title follows "Learn ›" and wraps word by word, and each
   "›" stays glued to the item it introduces */
.crumbs ol { list-style: none; padding: 0; }
.crumbs li { display: inline; }
.crumbs a { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; }
/* a link that is a paragraph on its own (not a link inside a sentence) */
p.note > a:only-child { display: inline-flex; align-items: center; min-height: 2.75rem; }
.crumbs li + li::before { content: "›"; margin: 0 0.3rem; }
.chapters { padding-left: 1.2rem; }
.chapters li { margin: 0.45rem 0; }
.chapters .muted { color: #56657a; }
.classes, .prose .classes { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; list-style: none; margin: 0.8rem 0 1.2rem; }
.classes a { display: inline-block; padding: 0.4rem 0.85rem; border: 1px solid #ece4d6; border-radius: 999px; background: #fff; text-decoration: none; }
.classes a[aria-current="page"] { border-color: #e64a19; background: #fff3ec; font-weight: 700; } /* the hub you are on: marked, not linked */

/* ---------- board revision papers (/board/) ---------- */
.paper-list { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); max-width: 52rem; margin-inline: auto; }
.paper-card h3 { margin: 0 0 0.3rem; font-size: 1.15rem; }
.paper-card .btn { margin-top: 0.6rem; }
.board section { max-width: 46rem; }
.test-bar { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; background: #fbf7f1; border-bottom: 1px solid #ece4d6; padding: 0.7rem 0.2rem; }
.test-title { font-weight: 700; flex: 1 1 14rem; }
.clock { font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 800; background: #fff; border: 2px solid #ddd3c2; border-radius: 12px; padding: 0.15rem 0.7rem; }
.clock.low { color: #b3261e; border-color: #e7a59f; }
.paper-section { border: 0; padding: 0; margin: 1.4rem 0 0; }
.paper-section legend { font-family: var(--font-display, inherit); font-size: 1.2rem; font-weight: 800; padding: 0; }
.paper-q .practice-question { font-size: 1.12rem; }
.paper-q input[type="text"] { width: 100%; max-width: 20rem; font: inherit; font-size: 1.1rem; padding: 0.6rem 0.8rem; border: 2px solid #ddd3c2; border-radius: 12px; }
.q-head { display: flex; gap: 0.6rem; align-items: center; margin: 0; font-weight: 700; }
.marks-badge { background: #fff1c8; color: #6b4a00; border-radius: 999px; padding: 0.05rem 0.6rem; font-size: 0.85rem; font-weight: 700; }
.mc-options { display: grid; gap: 0.4rem; }
.mc-option { display: flex; gap: 0.5rem; align-items: flex-start; padding: 0.45rem 0.6rem; border: 1px solid #ece4d6; border-radius: 10px; cursor: pointer; }
.result-card .score { font-size: 2rem; font-weight: 800; margin: 0.2rem 0; }
.sections-table { border-collapse: collapse; margin: 0.6rem 0 1rem; }
.sections-table th, .sections-table td { border: 1px solid #ece4d6; padding: 0.3rem 0.9rem; text-align: left; }
.review-list li { margin: 0 0 0.9rem; padding: 0.6rem 0.8rem; border-left: 4px solid #ddd3c2; background: #fff; border-radius: 6px; }
.review-list li.ok { border-left-color: #1b6e3a; }
.review-list li.no { border-left-color: #b3261e; }
.review-list p { margin: 0.15rem 0; }
.review-list ul.scheme { margin: 0.2rem 0 0.2rem 1.2rem; padding: 0; }
.review-list ul.scheme li { margin: 0.15rem 0; padding: 0; border: 0; background: none; border-radius: 0; font-size: 0.95em; }