/* ==========================================================================
   RCF English - site stylesheet
   Learn clearly. Practise confidently. Progress steadily.

   Sections
     1.  Design tokens
     2.  Reset and base elements
     3.  Layout helpers
     4.  Typography and prose
     5.  Buttons and links
     6.  Header, main navigation, mega menu, mobile drawer
     7.  Breadcrumbs
     8.  Hero
     9.  Cards and grids
     10. Content blocks (steps, callouts, checklists, tables, model answers)
     11. Filters, search and result lists
     12. Interactive activities (quizzes)
     13. Classes and timetable
     14. Footer
     15. Utilities, motion, print
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------- */

:root {
  /* Brand - deep navy */
  --navy-900: #0b1c34;
  --navy-800: #0f2647;
  --navy-700: #16345f;
  --navy-600: #1e4276;
  --navy-100: #e6ecf5;
  --navy-050: #f2f5fa;

  /* Brand - teal / emerald */
  --teal-800: #08503f;
  --teal-700: #0b6b58;
  --teal-600: #0e7c66;
  --teal-100: #d9efe9;
  --teal-050: #eef8f5;

  /* Accent - warm gold, used sparingly */
  --gold-800: #7d5205;
  --gold-600: #b07c12;
  --gold-400: #e0a83c;
  --gold-100: #fbf0d8;

  /* Neutrals */
  --ink-900: #14202e;
  --ink-700: #33404f;
  --ink-500: #56616f;
  --ink-300: #8e98a4;
  --line: #dde3ea;
  --line-strong: #c4cdd8;
  --surface: #ffffff;
  --surface-alt: #f7f9fb;
  --surface-tint: #f2f5fa;

  /* Status */
  --ok-700: #0b6b58;
  --ok-100: #ddf1eb;
  --warn-700: #8a5a05;
  --warn-100: #fbf0d8;
  --err-700: #9c2020;
  --err-100: #fbe4e4;

  /* Type */
  --font-head: Georgia, "Iowan Old Style", "Palatino Linotype", Cambria, "Times New Roman", serif;
  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;

  --step--1: clamp(0.875rem, 0.86rem + 0.08vw, 0.925rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.075rem);
  --step-1: clamp(1.15rem, 1.09rem + 0.28vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.24rem + 0.5vw, 1.65rem);
  --step-3: clamp(1.6rem, 1.4rem + 0.9vw, 2.1rem);
  --step-4: clamp(1.9rem, 1.55rem + 1.5vw, 2.85rem);

  /* Space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5.5rem;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 16px;

  --shadow-1: 0 1px 2px rgba(15, 38, 71, 0.06), 0 1px 3px rgba(15, 38, 71, 0.08);
  --shadow-2: 0 2px 6px rgba(15, 38, 71, 0.07), 0 8px 20px rgba(15, 38, 71, 0.09);
  --shadow-3: 0 10px 34px rgba(11, 28, 52, 0.18);

  --container: 1220px;
  --measure: 68ch;
  --header-h: 64px;
}

/* 2. Reset and base ------------------------------------------------------ */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink-900);
  background: var(--surface);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  line-height: 1.22;
  color: var(--navy-800);
  margin: 0 0 var(--sp-3);
  font-weight: 700;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); letter-spacing: -0.015em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
h5, h6 { font-size: var(--step-0); }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 var(--sp-4); padding-left: 1.35em; }
li { margin-bottom: var(--sp-2); }
li:last-child { margin-bottom: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--sp-6) 0;
}

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--surface-tint);
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

abbr[title] { text-decoration-thickness: 1px; text-underline-offset: 2px; }

:target { scroll-margin-top: calc(var(--header-h) + 1.5rem); }

/* Focus - always visible, never removed */
:focus-visible {
  outline: 3px solid var(--gold-400);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection { background: var(--teal-100); color: var(--navy-900); }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 200;
  background: var(--navy-800);
  color: #fff;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.15s ease-out;
}
.skip-link:focus { top: 0; }

/* 3. Layout helpers ------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}
@media (min-width: 768px) { .container { padding-inline: var(--sp-5); } }

.section { padding-block: var(--sp-7); }
@media (min-width: 768px) { .section { padding-block: var(--sp-8); } }

.section--tint { background: var(--surface-alt); }
.section--navy {
  background: var(--navy-800);
  color: #e9eef6;
}
.section--navy h2,
.section--navy h3 { color: #fff; }
.section--navy a { color: var(--gold-400); }

.section__head { max-width: var(--measure); margin-bottom: var(--sp-6); }
.section__head p { color: var(--ink-500); font-size: var(--step-1); margin-bottom: 0; }
.section--navy .section__head p { color: #c3cfe0; }

.section__eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: var(--sp-2);
}
.section--navy .section__eyebrow { color: var(--gold-400); }

.stack > * + * { margin-top: var(--sp-4); }
.flow > * + * { margin-top: var(--sp-5); }

/* 4. Typography and prose ------------------------------------------------ */

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }
.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose li::marker { color: var(--teal-700); }
.prose ol li::marker { font-weight: 700; }
.prose strong { color: var(--navy-800); }

.lead {
  font-size: var(--step-1);
  color: var(--ink-700);
  max-width: var(--measure);
}

.text-muted { color: var(--ink-500); }
.text-small { font-size: var(--step--1); }

blockquote.quote {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--teal-600);
  background: var(--teal-050);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--font-head);
  font-size: var(--step-1);
  color: var(--navy-800);
}
blockquote.quote cite {
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-style: normal;
  color: var(--ink-500);
}

/* 5. Buttons and links --------------------------------------------------- */

a {
  color: var(--navy-600);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
a:hover { color: var(--teal-700); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0.7rem 1.35rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-weight: 650;
  font-size: var(--step-0);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--navy-700); color: #fff; border-color: var(--navy-700); }
.btn--primary:hover { background: var(--navy-600); border-color: var(--navy-600); color: #fff; }

.btn--accent { background: var(--teal-700); color: #fff; border-color: var(--teal-700); }
.btn--accent:hover { background: var(--teal-800); border-color: var(--teal-800); color: #fff; }

.btn--outline { background: transparent; color: var(--navy-700); border-color: var(--line-strong); }
.btn--outline:hover { border-color: var(--navy-700); background: var(--navy-050); color: var(--navy-800); }

.btn--ghost-light { background: rgba(255,255,255,0.08); color: #fff; border-color: rgba(255,255,255,0.5); }
.btn--ghost-light:hover { background: rgba(255,255,255,0.16); color: #fff; border-color: #fff; }

.btn--whatsapp { background: var(--teal-700); color: #fff; border-color: var(--teal-700); }
.btn--whatsapp:hover { background: var(--teal-800); border-color: var(--teal-800); color: #fff; }

.btn--sm { min-height: 40px; padding: 0.4rem 0.9rem; font-size: var(--step--1); }
.btn--block { width: 100%; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* Equal columns rather than a flex row, so three buttons never fall into a
   lopsided two-plus-one arrangement. Stacked full width on a phone, then all
   the same width and height side by side. */
.btn-row--even {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}
/* Two across on a tablet, then all of them across on a wide screen. This
   keeps the row even for three or four buttons, instead of leaving a lone
   button stranded on a second line. */
@media (min-width: 560px) {
  .btn-row--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .btn-row--even { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
}
.btn-row--even .btn {
  width: 100%;
  text-align: center;
  padding-inline: 0.9rem;
}

/* External link marker - never colour alone */
.ext::after {
  content: "";
  display: inline-block;
  width: 0.72em;
  height: 0.72em;
  margin-left: 0.35em;
  background-color: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3zM5 5h5v2H7v10h10v-3h2v5H5V5z'/%3E%3C/svg%3E");
  vertical-align: baseline;
}

/* 6. Header and navigation ----------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy-800);
  color: #fff;
  box-shadow: var(--shadow-1);
}

.header-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
  padding-block: var(--sp-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: #fff;
  text-decoration: none;
  flex: 0 0 auto;
  margin-right: auto;
}
.brand:hover { color: #fff; }
.brand__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 9px;
  background: linear-gradient(155deg, var(--teal-600), var(--teal-800));
  border: 1px solid rgba(255, 255, 255, 0.22);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  color: #fff;
}
.brand__name {
  display: block;
  font-family: var(--font-head);
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
}
.brand__sub {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a9bcd6;
  line-height: 1.4;
}
@media (max-width: 420px) { .brand__sub { display: none; } }

/* Very narrow phones (from 320px). Keep the header on one line without
   letting anything spill off the edge. The Menu label is hidden visually but
   is still read out by screen readers. */
@media (max-width: 420px) {
  .brand__mark { width: 36px; height: 36px; flex-basis: 36px; font-size: 0.95rem; }
  .brand__name { font-size: 1.05rem; }
  .brand { gap: 0.45rem; }
  .header-bar { gap: var(--sp-2); }
  .nav-toggle { padding-inline: 0.5rem; }
  .nav-toggle__text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-width: 360px) {
  .brand__name { font-size: 0.98rem; }
  .search-toggle { display: none; }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.header-link {
  display: none;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 600;
  color: #dbe5f2;
  text-decoration: none;
  white-space: nowrap;
}
.header-link:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
@media (min-width: 900px) { .header-link { display: inline-flex; } }

.header-link--accent {
  background: var(--gold-400);
  color: var(--navy-900);
}
.header-link--accent:hover { background: #eebc5d; color: var(--navy-900); }

/* Global English. It sits in the header bar rather than the section row
   below, because that row is already full at laptop widths and an eleventh
   item wrapped it onto two lines. Below 900px every header-link is hidden and
   the item appears in the slide-out menu instead, with all of its pages. */
.header-link--global {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  line-height: 1.15;
  padding: 0.35rem 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.header-link--global::before {
  content: "\1F30D";
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.header-link--global .header-link__label { font-weight: 700; letter-spacing: 0.01em; }
.header-link--global .header-link__note {
  font-size: 0.68rem;
  font-weight: 500;
  color: #a9c2e2;
  letter-spacing: 0.02em;
}
.header-link--global:hover,
.header-link--global:focus-visible {
  background: var(--teal-700);
  border-color: var(--teal-600);
  color: #fff;
}
.header-link--global:hover .header-link__note,
.header-link--global:focus-visible .header-link__note { color: #cdeee4; }
.header-link--global.is-current {
  background: var(--teal-700);
  border-color: var(--teal-600);
  color: #fff;
}
.header-link--global.is-current .header-link__note { color: #cdeee4; }

/* The two header buttons plus the search box need real room. Between 900px
   and 1100px the note under "Global English" is what has to go, not the
   button itself. */
@media (max-width: 1100px) {
  .header-link--global .header-link__note { display: none; }
  .header-link--global { flex-direction: row; align-items: center; padding-block: 0.5rem; }
}

.search-toggle,
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  padding: 0.4rem 0.7rem;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}
.search-toggle:hover,
.nav-toggle:hover { background: rgba(255, 255, 255, 0.2); }

.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 12px;
  display: block;
}
.nav-toggle__bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.nav-toggle__bars span:nth-child(1) { top: 0; }
.nav-toggle__bars span:nth-child(2) { top: 5px; }
.nav-toggle__bars span:nth-child(3) { top: 10px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (min-width: 1240px) { .nav-toggle { display: none; } }

/* Header search field */
.header-search { display: none; }
@media (min-width: 1240px) {
  .header-search {
    display: block;
    position: relative;
    flex: 0 1 240px;
  }
}
.header-search input {
  width: 100%;
  min-height: 40px;
  padding: 0.4rem 0.75rem 0.4rem 2.1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1) no-repeat 0.6rem center / 1rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c9d6e8'%3E%3Cpath d='M10 2a8 8 0 105.29 14.03l4.34 4.34 1.42-1.42-4.34-4.34A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E");
  color: #fff;
  font-size: var(--step--1);
}
.header-search input::placeholder { color: #a9bcd6; }
.header-search input:focus {
  background-color: rgba(255, 255, 255, 0.18);
  border-color: var(--gold-400);
}

/* --- Desktop main navigation bar --- */

.main-nav { display: none; }

@media (min-width: 1240px) {
  .main-nav {
    display: block;
    background: var(--navy-900);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }
  /* The bar gets a wider container than the body text. Twelve sections do
     not fit inside the 1220px reading measure, and from about 1363px up
     that space was sitting unused on either side of the row. Widening the
     container is the fix; squeezing the font or the padding is not. */
  .main-nav > .container {
    max-width: 1600px;
    padding-inline: var(--sp-4);
  }
  /* Twelve top-level sections on one row, and they must stay on one row.
     Wrapping is switched off deliberately: below the breakpoint above the
     bar is hidden altogether and the drawer takes over, so a second row
     can never appear. Measure before adding a thirteenth section. */
  .main-nav__list {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
  }
  .main-nav__item { position: relative; margin: 0; }

  .main-nav__link,
  .main-nav__button {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    height: 100%;
    min-height: 46px;
    /* Comfortable spacing, affordable because the bar is no longer confined
       to the body container. Check the row still fits at 1240px, the width
       at which this bar replaces the drawer, before loosening it further. */
    padding: 0.5rem 0.4rem;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    color: #dce5f1;
    font-size: 0.83rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
  }
  /* The bar keeps growing with the window up to 1600px, so a wider screen
     genuinely gives the row more room rather than none. */
  .main-nav__link:hover,
  .main-nav__button:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
  }
  .main-nav__item--current > .main-nav__link,
  .main-nav__item--current > .main-nav__button {
    color: #fff;
    border-bottom-color: var(--gold-400);
    background: rgba(255, 255, 255, 0.05);
  }
  .main-nav__button[aria-expanded="true"] {
    color: var(--navy-900);
    background: #fff;
    border-bottom-color: #fff;
  }
  .main-nav__caret {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    background: currentColor;
    -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.5l-6-6L7.4 8l4.6 4.6L16.6 8 18 9.5z'/%3E%3C/svg%3E");
    mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.5l-6-6L7.4 8l4.6 4.6L16.6 8 18 9.5z'/%3E%3C/svg%3E");
    transition: transform 0.15s ease;
  }
  .main-nav__button[aria-expanded="true"] .main-nav__caret { transform: rotate(180deg); }

  /* A section that has a dropdown is two separate controls: the words are a
     link to the section's own page, and only the caret beside them opens the
     panel. Clicking the label must never be a dead end. */
  .main-nav__item--has-menu { display: flex; align-items: stretch; }
  .main-nav__item--has-menu > .main-nav__link { padding-right: 0.1rem; }
  .main-nav__button--caret {
    min-width: 17px;
    padding-left: 0;
    padding-right: 0.32rem;
    gap: 0;
  }
  .main-nav__item--has-menu:hover > .main-nav__link,
  .main-nav__item--has-menu:hover > .main-nav__button {
    color: #fff;
    background: rgba(255, 255, 255, 0.07);
  }
  .main-nav__item--has-menu:has(> .main-nav__button[aria-expanded="true"]) > .main-nav__link,
  .main-nav__item--has-menu:has(> .main-nav__button[aria-expanded="true"]) > .main-nav__button {
    color: var(--navy-900);
    background: #fff;
    border-bottom-color: #fff;
  }

  /* Mega panel */
  .mega {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 90;
    width: min(880px, calc(100vw - 3rem));
    padding: var(--sp-5);
    background: #fff;
    color: var(--ink-900);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    box-shadow: var(--shadow-3);
  }
  .mega[hidden] { display: none; }
  .main-nav__item:nth-last-child(-n + 4) .mega { left: auto; right: 0; }

  .mega__summary {
    margin: 0 0 var(--sp-4);
    padding-bottom: var(--sp-4);
    border-bottom: 1px solid var(--line);
    max-width: 62ch;
    color: var(--ink-500);
    font-size: var(--step--1);
  }
  .mega__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-5);
  }
  .mega__group h3,
  .mega__group .mega__group-title {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--teal-700);
    margin-bottom: var(--sp-3);
  }
  .mega__group ul { list-style: none; margin: 0; padding: 0; }
  .mega__group li { margin-bottom: 1px; }
  .mega__group a {
    display: block;
    padding: 0.32rem 0.5rem;
    margin-left: -0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--ink-700);
    text-decoration: none;
    line-height: 1.35;
  }
  .mega__group a:hover {
    background: var(--teal-050);
    color: var(--teal-800);
    text-decoration: underline;
  }
  .mega__group a[aria-current="page"] {
    background: var(--navy-050);
    color: var(--navy-800);
    font-weight: 650;
  }
  .mega__footer {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
    justify-content: space-between;
  }
}

/* --- Mobile navigation drawer --- */

.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
}
.nav-drawer[data-open="true"] { display: block; }
@media (min-width: 1240px) { .nav-drawer { display: none !important; } }

.nav-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 28, 52, 0.55);
  border: 0;
  width: 100%;
  cursor: pointer;
}

.nav-drawer__panel {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(430px, 100%);
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-3);
  animation: drawer-in 0.2s ease-out;
}
@keyframes drawer-in {
  from { transform: translateX(18px); opacity: 0.4; }
  to { transform: translateX(0); opacity: 1; }
}

.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--navy-800);
  color: #fff;
}
.nav-drawer__head .brand__name { font-size: 1.05rem; }
.nav-drawer__close {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}
.nav-drawer__close:hover { background: rgba(255, 255, 255, 0.22); }

.nav-drawer__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--sp-6);
}

.nav-drawer__search { padding: var(--sp-4) var(--sp-4) var(--sp-2); }

.drawer-nav { list-style: none; margin: 0; padding: 0; }
.drawer-nav > li {
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.drawer-nav__row { display: flex; align-items: stretch; }
.drawer-nav__link {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 54px;
  padding: 0.75rem var(--sp-4);
  font-size: 1.02rem;
  font-weight: 650;
  color: var(--navy-800);
  text-decoration: none;
}
.drawer-nav__link:hover { background: var(--surface-alt); }
.drawer-nav__link[aria-current="page"],
.drawer-nav__link[aria-current="true"] {
  color: var(--teal-800);
  box-shadow: inset 4px 0 0 var(--gold-400);
}
.drawer-nav__toggle {
  flex: 0 0 60px;
  display: grid;
  place-items: center;
  min-height: 54px;
  background: none;
  border: 0;
  border-left: 1px solid var(--line);
  color: var(--navy-700);
  cursor: pointer;
}
.drawer-nav__toggle:hover { background: var(--surface-alt); }
.drawer-nav__toggle .icon-chevron {
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.5l-6-6L7.4 8l4.6 4.6L16.6 8 18 9.5z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.5l-6-6L7.4 8l4.6 4.6L16.6 8 18 9.5z'/%3E%3C/svg%3E");
  transition: transform 0.18s ease;
}
.drawer-nav__toggle[aria-expanded="true"] .icon-chevron { transform: rotate(180deg); }

.drawer-nav__panel {
  padding: var(--sp-2) var(--sp-4) var(--sp-4);
  background: var(--surface-alt);
}
.drawer-nav__panel[hidden] { display: none; }
.drawer-nav__group + .drawer-nav__group { margin-top: var(--sp-4); }
.drawer-nav__group h3,
.drawer-nav__group .drawer-nav__group-title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin: 0 0 var(--sp-2);
}
.drawer-nav__group ul { list-style: none; margin: 0; padding: 0; }
.drawer-nav__group li { margin: 0; }
.drawer-nav__group a {
  display: block;
  min-height: 44px;
  padding: 0.6rem 0.5rem;
  color: var(--ink-700);
  font-size: 0.95rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.drawer-nav__group a:hover { color: var(--teal-800); }
.drawer-nav__group a[aria-current="page"] { color: var(--navy-800); font-weight: 650; }

.nav-drawer__extras {
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
}

/* 7. Breadcrumbs --------------------------------------------------------- */

.breadcrumbs {
  background: var(--surface-alt);
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  list-style: none;
  margin: 0;
  padding: 0.7rem 0;
}
.breadcrumbs li { margin: 0; display: flex; align-items: center; gap: 0.3rem; }
.breadcrumbs li + li::before {
  content: "/";
  color: var(--ink-300);
  margin-right: 0.15rem;
}
.breadcrumbs a { color: var(--ink-500); text-decoration: none; }
.breadcrumbs a:hover { color: var(--teal-700); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink-900); font-weight: 600; }

/* 8. Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  background: linear-gradient(160deg, var(--navy-800) 0%, var(--navy-900) 62%, #0a2c3f 100%);
  color: #eaf0f8;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  right: -14%;
  top: -32%;
  width: 62%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(14, 124, 102, 0.36) 0%, rgba(14, 124, 102, 0) 68%);
  pointer-events: none;
}
/* Two columns from 980px up, so the right-hand side carries something useful
   instead of sitting empty. One column below that. */
.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--sp-7) var(--sp-8);
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}
.hero__main { max-width: 62ch; }

@media (min-width: 980px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(19rem, 0.85fr);
    gap: var(--sp-7);
    padding-block: var(--sp-8) var(--sp-9);
  }
}

.hero__aside {
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(2px);
}
.hero__aside-title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: var(--sp-3);
}
.hero__aside ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}
.hero__aside li {
  position: relative;
  margin: 0;
  padding-left: 1.4rem;
  font-size: var(--step--1);
  line-height: 1.55;
  color: #c9d6e8;
}
.hero__aside li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--teal-600);
}
.hero__aside li strong { color: #fff; font-weight: 650; }
.hero__aside-foot {
  margin: var(--sp-4) 0 0;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.8rem;
  color: #a9bcd6;
}

.hero h1 { color: #fff; margin-bottom: var(--sp-3); }
.hero__tagline {
  font-family: var(--font-head);
  font-size: var(--step-1);
  font-style: italic;
  color: var(--gold-400);
  margin-bottom: var(--sp-4);
}
.hero__text {
  font-size: var(--step-1);
  color: #c9d6e8;
  margin-bottom: var(--sp-6);
}
.hero__note {
  margin-top: var(--sp-5);
  font-size: var(--step--1);
  color: #a9bcd6;
}
.hero__note a { color: var(--gold-400); }

/* Compact page hero for interior pages */
.page-hero {
  background: linear-gradient(160deg, var(--navy-800), var(--navy-900));
  color: #eaf0f8;
  padding-block: var(--sp-6) var(--sp-6);
}
.page-hero h1 { color: #fff; }
.page-hero__kicker {
  display: block;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: var(--sp-2);
}
.page-hero p {
  max-width: var(--measure);
  color: #c9d6e8;
  font-size: var(--step-1);
  margin-bottom: 0;
}
.page-hero .btn-row { margin-top: var(--sp-5); }

/* 9. Cards and grids ----------------------------------------------------- */

.grid { display: grid; gap: var(--sp-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
@media (min-width: 768px) { .grid { gap: var(--sp-5); } }

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.card h3 { font-size: var(--step-1); margin-bottom: var(--sp-2); }
.card p { color: var(--ink-500); font-size: var(--step--1); margin-bottom: var(--sp-4); }
.card > :last-child { margin-top: auto; margin-bottom: 0; }

.card--link { position: relative; }
.card--link:hover {
  border-color: var(--teal-600);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}
.card--link a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}
.card--link:focus-within {
  border-color: var(--teal-600);
  outline: 3px solid var(--gold-400);
  outline-offset: 2px;
}
.card--link a:focus-visible { outline: none; }

.card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-3);
  border-radius: 10px;
  background: var(--teal-050);
  border: 1px solid var(--teal-100);
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--teal-800);
}
.card__more {
  font-weight: 650;
  font-size: var(--step--1);
  color: var(--navy-600);
  text-decoration: none;
}
.card--link:hover .card__more { color: var(--teal-700); text-decoration: underline; }
.card__more::after { content: " \2192"; }

.card--flat { box-shadow: none; background: var(--surface-alt); }
.card--accent { border-left: 4px solid var(--teal-600); }

.tag-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--surface-alt);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-700);
  white-space: nowrap;
}
.tag--type { background: var(--navy-050); border-color: var(--navy-100); color: var(--navy-700); }
.tag--level { background: var(--teal-050); border-color: var(--teal-100); color: var(--teal-800); }
.tag--year { background: var(--gold-100); border-color: #efdcae; color: var(--gold-800); }
/* A paper that comes with its marking scheme or answer key. */
.tag--answers { background: var(--ok-100); border-color: #b6ded2; color: var(--ok-700); }
/* Only on papers whose first page a person has actually looked at. */
.tag--clear { background: var(--navy-100); border-color: #c3d2e6; color: var(--navy-700); }

/* Numbered feature list, e.g. the five-stage learning approach */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: var(--sp-4); }
.steps--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.steps > li {
  counter-increment: step;
  position: relative;
  margin: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-5) 3.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.steps--row > li { padding: var(--sp-5); }
.steps > li::before {
  content: counter(step);
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-5);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy-700);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
}
.steps--row > li::before { position: static; margin-bottom: var(--sp-3); }
.steps h3 { font-size: var(--step-0); font-family: var(--font-body); font-weight: 700; margin-bottom: var(--sp-1); }
.steps p { font-size: var(--step--1); color: var(--ink-500); margin: 0; }

.section--navy .steps > li {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.section--navy .steps > li::before { background: var(--gold-400); color: var(--navy-900); }
.section--navy .steps h3 { color: #fff; }
.section--navy .steps p { color: #c3cfe0; }

/* What's New -------------------------------------------------------------
   Update cards for the home page. One column on a telephone, two on a
   tablet, three on a desktop. The whole card is clickable: the title holds
   the only real link, and ::after stretches it over the card, so screen
   readers and keyboards still meet exactly one link per card. */

.updates {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px)  { .updates { grid-template-columns: repeat(2, 1fr); gap: 1.15rem; } }
@media (min-width: 1000px) { .updates { grid-template-columns: repeat(3, 1fr); } }

.update-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.15rem 1.15rem 1.05rem;
  background: #fff;
  border: 1px solid var(--navy-100);
  border-top: 3px solid var(--teal-600);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(11, 28, 52, 0.05);
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.update-card:hover {
  border-color: var(--teal-100);
  box-shadow: 0 8px 20px rgba(11, 28, 52, 0.10);
  transform: translateY(-2px);
}
.update-card:focus-within {
  border-color: var(--teal-600);
  box-shadow: 0 0 0 3px var(--teal-100);
}

.update-card__flag { margin: 0; }
.update-flag {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  background: var(--gold-100);
  color: var(--gold-800);
  border: 1px solid var(--gold-400);
  border-radius: 999px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.update-card__title { margin: 0; font-size: 1.02rem; line-height: 1.3; }
.update-card__title a {
  color: var(--navy-800);
  text-decoration: none;
}
.update-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.update-card__title a:hover { color: var(--teal-700); text-decoration: underline; }

.update-card__text {
  margin: 0;
  color: #4a5b71;
  font-size: 0.9rem;
  line-height: 1.55;
}
.update-card__more { margin: auto 0 0; padding-top: 0.15rem; }
.update-card__more .more-link {
  color: var(--teal-700);
  font-size: 0.85rem;
  font-weight: 600;
}
.update-card__more .more-link::after { content: " \2192"; }
.update-card:hover .update-card__more .more-link { color: var(--teal-800); }

.updates__all { margin: 1.5rem 0 0; }

.section--navy .update-card { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); }
.section--navy .update-card__title a { color: #fff; }
.section--navy .update-card__text { color: #c3cfe0; }

@media (prefers-reduced-motion: reduce) {
  .update-card { transition: none; }
  .update-card:hover { transform: none; }
}

/* 10. Content blocks ----------------------------------------------------- */

.callout {
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ink-300);
  background: var(--surface-alt);
}
.callout__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 700;
  margin-bottom: var(--sp-2);
  color: var(--navy-800);
}
.callout p:last-child, .callout ul:last-child, .callout ol:last-child { margin-bottom: 0; }
.callout--tip { border-left-color: var(--teal-600); background: var(--teal-050); }
.callout--tip .callout__title { color: var(--teal-800); }
.callout--note { border-left-color: var(--navy-600); background: var(--navy-050); }
.callout--warn { border-left-color: var(--gold-600); background: var(--gold-100); }
.callout--warn .callout__title { color: var(--gold-800); }
.callout--legal { border-left-color: var(--err-700); background: var(--err-100); }
.callout--legal .callout__title { color: var(--err-700); }

/* Correction checklist */
.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: var(--sp-3);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid var(--teal-600);
  border-radius: 4px;
  background: #fff;
}

.do-dont { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.do-dont__col { padding: var(--sp-5); border-radius: var(--radius); border: 1px solid var(--line); }
.do-dont__col h3 { display: flex; align-items: center; gap: 0.4rem; font-size: var(--step-0); font-family: var(--font-body); }
.do-dont__col--do { background: var(--ok-100); border-color: #b9e2d6; }
.do-dont__col--do h3 { color: var(--ok-700); }
.do-dont__col--do h3::before { content: "\2713"; font-size: 1.1em; }
.do-dont__col--dont { background: var(--err-100); border-color: #f0c6c6; }
.do-dont__col--dont h3 { color: var(--err-700); }
.do-dont__col--dont h3::before { content: "\2715"; font-size: 1.1em; }

/* Model answer / worked example */
.model {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}
.model__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--navy-050);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--navy-800);
}
.model__body { padding: var(--sp-4) var(--sp-5); }
.model__body p:first-child { margin-top: 0; }
.model__sample {
  font-family: var(--font-head);
  background: var(--surface-alt);
  border-left: 3px solid var(--teal-600);
  padding: var(--sp-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.model__sample p + p { margin-top: var(--sp-3); }
.model__notes {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--line-strong);
  font-size: var(--step--1);
  color: var(--ink-500);
}

/* Definition-style term lists */
.term-list { margin: 0; }
.term-list > div {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}
.term-list > div:first-child { padding-top: 0; }
.term-list > div:last-child { border-bottom: 0; }
.term-list dt { font-weight: 700; color: var(--navy-800); margin-bottom: var(--sp-1); }
.term-list dd { margin: 0; color: var(--ink-700); }
.term-list dd + dd { margin-top: var(--sp-2); font-size: var(--step--1); color: var(--ink-500); }

/* Accordion (FAQ and long reference lists) */
.accordion { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.accordion + .accordion { margin-top: var(--sp-3); }
.accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4);
  min-height: 56px;
  font-weight: 650;
  color: var(--navy-800);
  cursor: pointer;
  list-style: none;
  background: var(--surface);
}
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary:hover { background: var(--surface-alt); }
.accordion > summary::after {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.5l-6-6L7.4 8l4.6 4.6L16.6 8 18 9.5z'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.5l-6-6L7.4 8l4.6 4.6L16.6 8 18 9.5z'/%3E%3C/svg%3E");
  transition: transform 0.18s ease;
}
.accordion[open] > summary { background: var(--navy-050); border-bottom: 1px solid var(--line); }
.accordion[open] > summary::after { transform: rotate(180deg); }
.accordion__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); }
.accordion__body > :first-child { margin-top: 0; }

/* Tables that turn into cards on small screens */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  background: #fff;
}
table.data caption {
  text-align: left;
  padding-bottom: var(--sp-3);
  color: var(--ink-500);
  font-size: var(--step--1);
}
table.data th,
table.data td {
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
table.data thead th {
  background: var(--navy-050);
  color: var(--navy-800);
  font-weight: 700;
  white-space: nowrap;
}
table.data tbody tr:nth-child(even) { background: var(--surface-alt); }

@media (max-width: 719px) {
  table.stacked,
  table.stacked thead,
  table.stacked tbody,
  table.stacked tr,
  table.stacked th,
  table.stacked td { display: block; width: 100%; }
  table.stacked thead { position: absolute; left: -9999px; }
  /* A caption keeps display:table-caption even when the table itself becomes
     a block, and then collapses to the width of the widest word - about 50px
     on a phone. It must be made a block so it can use the full width. */
  table.stacked caption {
    display: block;
    width: 100%;
    text-align: left;
  }
  table.stacked tr {
    margin-bottom: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
  }
  table.stacked tbody tr:nth-child(even) { background: #fff; }
  table.stacked td {
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 0.6rem 0.9rem;
    display: flex;
    gap: var(--sp-3);
    justify-content: space-between;
  }
  table.stacked td:last-child { border-bottom: 0; }
  table.stacked td::before {
    content: attr(data-label);
    flex: 0 0 42%;
    font-weight: 700;
    color: var(--navy-800);
  }
  /* The value must be a single flex item; without this wrapper each inline
     <strong> or <em> became its own column and could not wrap. */
  table.stacked td > .td__v { flex: 1 1 auto; min-width: 0; }
}

/* 11. Filters, search and result lists ----------------------------------- */

.toolbar {
  padding: var(--sp-5);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-bottom: var(--sp-5);
}
.toolbar__row { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) {
  .filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--sp-3); }
}

.field { display: block; }
.field > .label,
.field > label {
  display: block;
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--navy-800);
  margin-bottom: var(--sp-1);
}
.field .hint { display: block; font-size: 0.8rem; color: var(--ink-500); margin-top: var(--sp-1); }
.field input[type="text"],
.field input[type="search"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink-900);
}
.field textarea { min-height: 130px; resize: vertical; }
.field select {
  appearance: none;
  padding-right: 2.2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2356616f'%3E%3Cpath d='M12 15.5l-6-6L7.4 8l4.6 4.6L16.6 8 18 9.5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.6rem center;
  background-size: 1.1rem;
}
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--navy-600); }
.field--error input,
.field--error select,
.field--error textarea { border-color: var(--err-700); border-width: 2px; }
.field__error {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: var(--sp-1);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--err-700);
}
.field__error::before { content: "\26A0"; }

.results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
}
.results-count { font-weight: 650; color: var(--navy-800); }

.result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.result {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
@media (min-width: 640px) { .result { grid-template-columns: 84px 1fr; align-items: start; } }
.result__thumb {
  width: 84px;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface-alt) center / cover no-repeat;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-300);
  text-align: center;
  overflow: hidden;
}
.result h3 { font-size: var(--step-1); margin-bottom: var(--sp-1); }
.result h3 a { text-decoration: none; color: var(--navy-800); }
.result h3 a:hover { color: var(--teal-700); text-decoration: underline; }
.result p { font-size: var(--step--1); color: var(--ink-500); margin-bottom: var(--sp-3); }
.result__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: 0.8rem;
  color: var(--ink-500);
}
.result__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }

.empty-state {
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface-alt);
}
.empty-state h3 { margin-bottom: var(--sp-2); }
.empty-state p { color: var(--ink-500); max-width: 46ch; margin-inline: auto; }

.pending-note {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--navy-100);
  border-radius: var(--radius);
  background: var(--navy-050);
  font-size: var(--step--1);
  color: var(--ink-700);
}

/* 11b. Past paper library -------------------------------------------------
   Choose a grade or literature section, then optionally a year. The section
   chooser is the main interface; there is no title search to guess at. */

.paperlib { display: grid; gap: var(--sp-5); }

/* --- the section chooser */
.paperlib__tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
  /* Two columns on the narrowest phone, growing to a wide row on a desktop. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
}
.paperlib__tab {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-height: 4.25rem;
  padding: var(--sp-3) var(--sp-3);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--navy-800);
  text-decoration: none;
  text-align: left;
  box-shadow: var(--shadow-1);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.paperlib__tab:hover,
.paperlib__tab:focus-visible {
  border-color: var(--teal-600);
  background: var(--teal-050);
  transform: translateY(-1px);
}
.paperlib__tab-name { font-weight: 700; font-size: var(--step-0); line-height: 1.25; }
.paperlib__tab-count { font-size: 0.75rem; color: var(--ink-500); font-weight: 600; }
.paperlib__tab.is-current {
  border-color: var(--navy-700);
  background: var(--navy-800);
  color: #fff;
  box-shadow: var(--shadow-2);
}
.paperlib__tab.is-current .paperlib__tab-count { color: #cfe0f5; }
/* An empty section still shows. It says so, rather than disappearing. */
.paperlib__tab--empty { border-style: dashed; color: var(--ink-500); box-shadow: none; }
.paperlib__tab--empty .paperlib__tab-name { font-weight: 600; }

/* --- the year filter */
.paperlib__filter {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--navy-100);
  border-radius: var(--radius-lg);
  background: var(--navy-050);
}
.paperlib__filter-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-3); }
.paperlib__filter-head h3 { margin: 0; font-size: var(--step-2); color: var(--navy-800); }
.paperlib__filter-count { margin: 0; font-weight: 650; color: var(--teal-700); }
.paperlib__filter-controls { display: grid; gap: var(--sp-3); align-items: end; }
.paperlib__filter-controls .field { max-width: 16rem; }
.paperlib__years { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.paperlib__year-chip {
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--navy-700);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
}
.paperlib__year-chip:hover { border-color: var(--teal-600); background: var(--teal-050); }
.paperlib__year-chip.is-current {
  background: var(--teal-700);
  border-color: var(--teal-700);
  color: #fff;
}

/* --- a section of papers */
.paperlib__panel { scroll-margin-top: calc(var(--header-h) + 1rem); }
.paperlib__panel:focus { outline: none; }
.paperlib__panel + .paperlib__panel { margin-top: var(--sp-7); }
.paperlib__panel-title { font-size: var(--step-3); margin-bottom: var(--sp-2); }
/* Once the script is driving the page the filter panel names the section, so
   this heading would say it a second time. It is kept in the document for
   screen readers and for the plain no-script stack of sections. */
.paperlib.is-live .paperlib__panel-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.paperlib.is-live .paperlib__panel-note { margin-top: 0; }
.paperlib__panel-note { color: var(--ink-500); font-size: var(--step--1); max-width: var(--measure); }
.paperlib__year { margin-top: var(--sp-5); }
.paperlib__year-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--navy-100);
  font-size: var(--step-1);
  color: var(--navy-800);
}
.paperlib__year-count { font-size: 0.8rem; font-weight: 600; color: var(--ink-500); font-family: var(--font-body); }

/* --- the cards */
.paper-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}
.paper-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.paper-card__title {
  font-size: var(--step-1);
  line-height: 1.3;
  margin: 0 0 var(--sp-3);
  color: var(--navy-800);
}
.paper-card__facts { margin: 0 0 var(--sp-4); display: grid; gap: var(--sp-2); font-size: var(--step--1); }
.paper-card__facts > div { display: grid; grid-template-columns: 10.5rem 1fr; gap: var(--sp-2); }
.paper-card__facts dt { color: var(--ink-500); font-weight: 600; }
.paper-card__facts dd { margin: 0; color: var(--ink-900); }
.paper-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-2);
}
.paper-card__foot { margin: var(--sp-3) 0 0; font-size: 0.78rem; color: var(--ink-300); }
.tag--undated { background: var(--surface-alt); border-color: var(--line-strong); color: var(--ink-500); }

@media (max-width: 40rem) {
  .paperlib__tabs { grid-template-columns: repeat(2, 1fr); }
  .paperlib__tab { min-height: 3.75rem; padding: var(--sp-3) var(--sp-2); }
  .paperlib__filter { padding: var(--sp-4) var(--sp-4); }
  .paperlib__filter-controls .field { max-width: none; }
  .paper-card { padding: var(--sp-4); }
  /* Two narrow columns would break "Province, zone or school" onto four
     lines, so the label sits above its value on a phone. */
  .paper-card__facts > div { grid-template-columns: 1fr; gap: 0; }
  .paper-card__facts dt { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
  .paper-card__actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (min-width: 48rem) {
  .paperlib__filter-controls { grid-template-columns: auto 1fr auto; }
}

/* 12. Interactive activities --------------------------------------------- */

.activity {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.activity + .activity { margin-top: var(--sp-6); }
.activity__head {
  padding: var(--sp-5);
  background: var(--navy-050);
  border-bottom: 1px solid var(--line);
}
.activity__head h3 { margin-bottom: var(--sp-2); }
.activity__head p { margin: 0; font-size: var(--step--1); color: var(--ink-700); }
.activity__instructions {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
}
.activity__instructions strong { color: var(--navy-800); }
.activity__body { padding: var(--sp-5); }
.activity__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--surface-alt);
}

.q { margin: 0 0 var(--sp-5); padding: 0; border: 0; }
.q + .q { padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.q > legend {
  padding: 0;
  font-weight: 650;
  color: var(--navy-800);
  margin-bottom: var(--sp-3);
}
.q__num {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--navy-700);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  vertical-align: middle;
}

.options { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.options li { margin: 0; }
.option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.option:hover { border-color: var(--navy-600); background: var(--navy-050); }
.option input { margin-top: 0.28em; flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--navy-700); }
.option__text { flex: 1; }

.option[data-state="correct"] { border-color: var(--ok-700); background: var(--ok-100); border-width: 2px; }
.option[data-state="wrong"] { border-color: var(--err-700); background: var(--err-100); border-width: 2px; }
.option[data-state="answer"] { border-color: var(--ok-700); background: var(--ok-100); border-style: dashed; border-width: 2px; }
.option__flag { font-weight: 700; font-size: var(--step--1); white-space: nowrap; }
.option[data-state="correct"] .option__flag { color: var(--ok-700); }
.option[data-state="wrong"] .option__flag { color: var(--err-700); }
.option[data-state="answer"] .option__flag { color: var(--ok-700); }

.gap-input {
  display: inline-block;
  width: min(12rem, 60vw);
  min-height: 42px;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  font-family: inherit;
}
.gap-input[data-state="correct"] { border-color: var(--ok-700); background: var(--ok-100); }
.gap-input[data-state="wrong"] { border-color: var(--err-700); background: var(--err-100); }

.feedback {
  margin-top: var(--sp-3);
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  border: 1px solid var(--line);
  background: var(--surface-alt);
}
.feedback[hidden] { display: none; }
.feedback[data-state="correct"] { border-color: #b9e2d6; background: var(--ok-100); color: var(--ok-700); }
.feedback[data-state="wrong"] { border-color: #f0c6c6; background: var(--err-100); color: var(--err-700); }
.feedback__label { font-weight: 700; }
.feedback__label::before { margin-right: 0.35rem; }
.feedback[data-state="correct"] .feedback__label::before { content: "\2713"; }
.feedback[data-state="wrong"] .feedback__label::before { content: "\2715"; }
.feedback__explain { display: block; margin-top: 0.25rem; color: var(--ink-700); font-weight: 400; }

.score {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-right: auto;
  font-weight: 700;
  color: var(--navy-800);
}
.score[hidden] { display: none; }
.score__value {
  display: inline-grid;
  place-items: center;
  min-width: 62px;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: var(--navy-700);
  color: #fff;
  font-size: var(--step-0);
}
.score__value[data-band="high"] { background: var(--ok-700); }
.score__value[data-band="mid"] { background: var(--gold-600); }
.score__value[data-band="low"] { background: var(--err-700); }
.score__note { font-weight: 400; font-size: var(--step--1); color: var(--ink-500); }

/* Order / match activities */
.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); counter-reset: ord; }
.order-list li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
}
.order-list li[data-state="correct"] { border-color: var(--ok-700); background: var(--ok-100); }
.order-list li[data-state="wrong"] { border-color: var(--err-700); background: var(--err-100); }
.order-list__text { flex: 1; }
.order-list__controls { display: flex; gap: 0.3rem; }
.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--navy-700);
  font-size: 1rem;
  cursor: pointer;
}
.icon-btn:hover:not(:disabled) { background: var(--navy-050); border-color: var(--navy-600); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.match-grid { display: grid; gap: var(--sp-3); }
.match-row {
  display: grid;
  gap: var(--sp-2);
  align-items: center;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
}
@media (min-width: 600px) { .match-row { grid-template-columns: 1fr 220px auto; } }
.match-row[data-state="correct"] { border-color: var(--ok-700); background: var(--ok-100); }
.match-row[data-state="wrong"] { border-color: var(--err-700); background: var(--err-100); }
.match-row__term { font-weight: 650; color: var(--navy-800); }
.match-row select { min-height: 46px; width: 100%; }
.match-row__flag { font-size: var(--step--1); font-weight: 700; }

.error-correct__sentence {
  font-family: var(--font-head);
  font-size: var(--step-1);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-alt);
  border-left: 3px solid var(--gold-400);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--sp-3);
}

.reading-passage {
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-head);
  max-width: var(--measure);
}
.reading-passage h4 { font-size: var(--step-0); font-family: var(--font-body); margin-bottom: var(--sp-3); }

.noscript-note {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--gold-400);
  background: var(--gold-100);
  border-radius: var(--radius);
  color: var(--gold-800);
}

/* 13. Classes and timetable ---------------------------------------------- */

.class-card { position: relative; }
.class-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  border: 1px solid;
}
.class-card__status[data-status="open"] { color: var(--ok-700); background: var(--ok-100); border-color: #b9e2d6; }
.class-card__status[data-status="soon"] { color: var(--gold-800); background: var(--gold-100); border-color: #efdcae; }
.class-card__status[data-status="closed"] { color: var(--ink-500); background: var(--surface-alt); border-color: var(--line-strong); }
.class-card__status[data-status="waitlist"] { color: var(--navy-700); background: var(--navy-050); border-color: var(--navy-100); }
.class-card__status::before { content: "\25CF"; font-size: 0.7em; }

.class-facts { margin: 0 0 var(--sp-4); display: grid; gap: 0.4rem; }
.class-facts > div { display: flex; gap: var(--sp-2); font-size: var(--step--1); }
.class-facts dt { flex: 0 0 40%; font-weight: 650; color: var(--ink-500); }
.class-facts dd { margin: 0; color: var(--ink-900); }

.timetable-cards { display: grid; gap: var(--sp-4); }
@media (min-width: 720px) { .timetable-cards { display: none; } }
.timetable-table { display: none; }
@media (min-width: 720px) { .timetable-table { display: block; } }

.whatsapp-panel {
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--teal-050);
  border: 1px solid var(--teal-100);
}
.whatsapp-panel h3 { color: var(--teal-800); }
.whatsapp-number {
  font-family: var(--font-head);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--teal-800);
  letter-spacing: 0.02em;
}

/* Publications promotion */
.promo {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  background: linear-gradient(150deg, var(--navy-800), var(--navy-900));
  color: #e9eef6;
}
@media (min-width: 860px) { .promo { grid-template-columns: 1.35fr 1fr; } }
.promo h2,
.promo h3 { color: #fff; }
.promo p { color: #c3cfe0; }
/* The promo sits on a dark panel, so the eyebrow needs the light accent
   rather than the default teal, which would not meet the contrast ratio. */
.promo .section__eyebrow { color: var(--gold-400); }
.promo__aside {
  padding: var(--sp-5);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.promo__aside ul { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.promo__aside li { padding-left: 1.5rem; position: relative; font-size: var(--step--1); }
.promo__aside li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--gold-400);
  font-weight: 700;
}

.related-books {
  padding: var(--sp-5);
  border: 1px solid var(--gold-400);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--gold-100);
}
.related-books h3 { color: var(--gold-800); font-size: var(--step-1); }
.related-books p { color: var(--ink-700); font-size: var(--step--1); }

/* 14. Footer ------------------------------------------------------------- */

.site-footer {
  background: var(--navy-900);
  color: #b7c5d8;
  padding-block: var(--sp-7) var(--sp-5);
  font-size: var(--step--1);
}
.site-footer h2,
.site-footer h3 { color: #fff; }
.footer-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  margin-bottom: var(--sp-6);
}
.footer-brand { max-width: 34ch; }
.footer-brand .brand { margin-bottom: var(--sp-3); }
.footer-col h3 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: var(--sp-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.15rem; }
.footer-col a,
.footer-brand a {
  display: inline-block;
  padding: 0.3rem 0;
  color: #b7c5d8;
  text-decoration: none;
}
.footer-col a:hover,
.footer-brand a:hover { color: #fff; text-decoration: underline; }

.footer-bottom {
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  color: #8fa2ba;
}
.footer-bottom p { margin: 0; }

/* 15. Utilities, motion, print ------------------------------------------- */

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mb-0 { margin-bottom: 0; }
[hidden] { display: none !important; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  font-size: var(--step--1);
  text-decoration: none;
}
.back-link::before { content: "\2190"; }
.back-link:hover { text-decoration: underline; }

.badge-ext {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--gold-100);
  border: 1px solid #efdcae;
  color: var(--gold-800);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

/* "Coming soon" — used wherever RCF Publications would be linked, until the
   bookshop has a real published address. Deliberately quieter than the gold
   "external bookshop" badge, because it marks something not yet available. */
.badge-soon {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--surface-alt);
  border: 1px dashed var(--line-strong);
  color: var(--ink-500);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
  vertical-align: baseline;
}
.badge-soon--footer {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.3);
  color: #b7c5d8;
}

/* A button-shaped marker that is deliberately not a link, because there is
   nowhere for it to go yet. */
.btn--soon {
  background: transparent;
  color: var(--ink-500);
  border: 2px dashed var(--line-strong);
  cursor: default;
}
/* On any dark ground the marker needs light text to stay readable. */
.section--navy .btn--soon,
.promo .btn--soon,
.hero .btn--soon,
.page-hero .btn--soon {
  color: #c3cfe0;
  border-color: rgba(255, 255, 255, 0.4);
}
/* Inside a coloured button or on a dark ground the badge is small text, so it
   takes plain white to clear the AA ratio. */
.hero .badge-soon,
.page-hero .badge-soon,
.promo .badge-soon,
.btn .badge-soon {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
}
.btn--soon:active { transform: none; }

/* The bookshop entry in the header, while it is still to come. */
.header-link--soon {
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.35);
  color: #c3cfe0;
}
.header-link--soon:hover { background: rgba(255, 255, 255, 0.15); color: #fff; }
.header-link__soon {
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* In the desktop bar the eleven sections only just fit on one row, so the
   marker is read out but not drawn. Sighted visitors see "Coming soon" on the
   bookshop button in the header just above it, and in the About menu. */
.main-nav__soon {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card--link:hover { transform: none; }
}


/* ==========================================================================
   Portrait: a small square photograph with the introduction wrapping round it
   Centred above the text on a phone; floated to the upper right from 720px.
   The source is square, so the square frame crops nothing.
   ========================================================================== */

.portrait { display: block; }
.portrait::after { content: ""; display: table; clear: both; }

@media (min-width: 720px) {
  /* Small square portrait at the upper right, with the biography
     wrapping down its left and continuing underneath. */
  .portrait__figure {
    float: right;
    width: 144px;
    margin: 0 0 var(--sp-4) var(--sp-5);
  }
}

.portrait__figure { margin: 0 auto var(--sp-4); width: 144px; max-width: 100%; }
.portrait__img {
  display: block;
  width: 144px;
  height: 144px;
  /* The source photograph is 800x800, already square, so a square
     frame crops nothing: the full face, head and shoulders remain. */
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 1px 4px rgba(11, 28, 52, 0.10);
}
.portrait__caption {
  margin: var(--sp-2) 0 0;
  font-size: var(--step--1);
  color: var(--ink-500);
  text-align: center;
}
.portrait__body { min-width: 0; }
.portrait__name { margin: 0; font-size: var(--step-2); font-weight: 700; color: var(--navy-800); line-height: 1.2; }
.portrait__role { margin: 0 0 var(--sp-3); font-size: var(--step--1); color: var(--gold-800); font-weight: 600; }
.portrait__body p { margin: 0 0 var(--sp-3); }
.portrait__body p:last-child { margin-bottom: 0; }
.portrait__go { margin-top: var(--sp-3); clear: both; }
.portrait__go .btn { min-height: 44px; }

@media (max-width: 719px) {
  /* No wrapping on a narrow screen: the portrait sits centred above
     the biography so the text keeps a full-width measure. */
  .portrait__figure { float: none; width: 132px; margin: 0 auto var(--sp-4); }
  .portrait__img { width: 132px; height: 132px; }
}

/* ==========================================================================
   Payment instructions panel
   Bank details come from data/payments.json and are written in one place
   only. The panel stays closed until the visitor opens it, so account
   details are never sitting on the page uninvited, and never on the
   homepage at all.
   ========================================================================== */

.paypanel {
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--navy-700);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.paypanel__summary {
  cursor: pointer;
  padding: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2) var(--sp-3);
  min-height: 48px;
}
.paypanel__summary::-webkit-details-marker { display: none; }
.paypanel__summary::marker { content: ""; }
.paypanel__label { font-weight: 700; color: var(--navy-800); }
.paypanel__label::before { content: "\25B8"; margin-right: 0.5rem; color: var(--navy-600); }
.paypanel[open] .paypanel__label::before { content: "\25BE"; }
.paypanel__hint { font-size: var(--step--1); color: var(--ink-500); }
.paypanel__summary:focus-visible { outline: 3px solid var(--navy-600); outline-offset: -3px; }
.paypanel__body { padding: 0 var(--sp-4) var(--sp-4); }

.paybank {
  margin: 0 0 var(--sp-4);
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.paybank__row { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; padding: 0.6rem var(--sp-3); }
.paybank__row:nth-child(odd) { background: var(--surface-alt); }
.paybank__row dt { flex: 0 0 9rem; margin: 0; color: var(--ink-500); font-size: var(--step--1); }
.paybank__row dd { margin: 0; font-size: var(--step--1); }
/* The account number is the value people copy, so it is set in a monospaced
   face at a comfortable size to reduce mis-reading. */
.paybank__row:nth-child(4) dd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--step-0); letter-spacing: 0.04em; }

.paypanel__notice { margin: 0 0 var(--sp-4); }
.paypanel__h { margin: 0 0 var(--sp-2); font-size: var(--step-0); color: var(--navy-800); }
.paylist { margin: 0 0 var(--sp-3); padding-left: 1.2rem; font-size: var(--step--1); }
.paylist li { margin-bottom: 0.2rem; }
.paypanel__note { margin: 0 0 var(--sp-3); font-size: var(--step--1); color: var(--ink-700); }
.paypanel__go { margin: 0 0 var(--sp-2); }
.paypanel__go .btn { min-height: 48px; }
.paypanel__small { margin: 0 0 var(--sp-2); font-size: var(--step--1); color: var(--ink-500); }
.paypanel__small:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .paybank__row { display: grid; grid-template-columns: 1fr; gap: 0.15rem; }
  .paybank__row dt { flex: none; }
  .paypanel__go .btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   Homepage destination cards
   Two large cards below the main hero buttons. One navy, one gold: the two
   accents already used across the site, so they are easy to tell apart
   without introducing a new colour. The whole card is clickable, but only
   the title holds a real link, so there is one tab stop per card.
   ========================================================================== */

.dcards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .dcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.dcard {
  position: relative;
  margin: 0;
  padding: var(--sp-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  /* Equal height whatever the text length. */
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* The global heading rule paints every h1-h6 navy. On a navy or teal card
   that made the title invisible, so the heading must take its colour from
   the card instead. The link then inherits from the heading. */
.dcard__title { margin: 0; font-size: var(--step-1); color: inherit; }
.dcard__title a { color: inherit; text-decoration: none; }
/* Hover, focus and visited must not repaint it either: the generic a:hover
   rule carries the same specificity, so these state rules are explicit. */
.dcard__title a:link,
.dcard__title a:visited,
.dcard__title a:hover,
.dcard__title a:focus,
.dcard__title a:active { color: inherit; }
/* The whole card becomes the click target. */
.dcard__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.dcard__text { margin: 0; font-size: var(--step--1); }
.dcard__more { margin: 0; font-weight: 650; font-size: var(--step--1); }

/* Three commercial destinations sit side by side, so each needs a distinct
   accent while staying inside the brand palette. */
@media (min-width: 900px) {
  .dcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.dcard__icon {
  display: inline-grid;
  place-items: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Books: solid navy. */
.dcard--publications { background: var(--navy-800); color: #fff; }
.dcard--publications .dcard__text { color: #d7e0ee; }
.dcard--publications .dcard__more { color: var(--gold-400); }
.dcard--publications .dcard__icon { background: rgba(255,255,255,0.16); color: #fff; }

/* Resource collections: deep teal, clearly not the book card. */
.dcard--premium { background: var(--ok-700); color: #fff; }
.dcard--premium .dcard__text { color: #d5ece6; }
.dcard--premium .dcard__more { color: #ffffff; }
.dcard--premium .dcard__icon { background: rgba(255,255,255,0.18); color: #fff; }

/* Advertising: light gold, deliberately the lightest of the three. */
.dcard--promo { background: var(--gold-100); color: var(--navy-900); border-color: var(--gold-400); }
.dcard--promo .dcard__text { color: var(--gold-800); }
.dcard--promo .dcard__more { color: var(--gold-800); }
.dcard--promo .dcard__icon { background: var(--gold-400); color: var(--navy-900); }

/* The two Premium Resources categories: same family, still distinguishable. */
.dcard--student { background: var(--navy-700); color: #fff; }
.dcard--student .dcard__text { color: #d7e0ee; }
.dcard--student .dcard__more { color: var(--gold-400); }
.dcard--student .dcard__icon { background: rgba(255,255,255,0.16); color: #fff; }

.dcard--teacher { background: var(--ok-700); color: #fff; }
.dcard--teacher .dcard__text { color: #d5ece6; }
.dcard--teacher .dcard__more { color: #ffffff; }
.dcard--teacher .dcard__icon { background: rgba(255,255,255,0.18); color: #fff; }
/* Only two cards on the Premium landing page, so keep them at two across. */
.dcards--pair { grid-template-columns: 1fr; }
@media (min-width: 720px) { .dcards--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Product card extras: tags, code and author. */
.pcard__tags { margin: 0 0 var(--sp-2); display: flex; flex-wrap: wrap; gap: 0.3rem; }
.pcard__tag {
  display: inline-block; padding: 0.1rem 0.45rem; border-radius: 999px;
  background: var(--navy-050); color: var(--navy-700);
  border: 1px solid var(--navy-100);
  font-size: var(--step--1); font-weight: 600;
}
.pcard__author { margin: 0 0 var(--sp-2); font-size: var(--step--1); color: var(--ink-700); font-style: italic; }
.pcard__code { margin: var(--sp-2) 0 0; font-size: var(--step--1); color: var(--ink-500); }
.pcard__code strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink-900); }

/* Hover lift on pointer devices only, so a phone tap does not leave a card
   stuck in a hover state. */
@media (hover: hover) {
  .dcard:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(11, 28, 52, 0.18); }
}
/* Pressed state, and a focus ring that is visible on both backgrounds. */
.dcard:active { transform: translateY(0); }
.dcard:has(a:focus-visible) { outline: 3px solid var(--gold-400); outline-offset: 3px; }
.dcard--promo:has(a:focus-visible) { outline-color: var(--navy-700); }
/* Fallback for browsers without :has() - the link itself still shows a ring. */
.dcard__title a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }

/* ==========================================================================
   Premium product cards
   ========================================================================== */

.pcards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 640px) { .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.pcard {
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
/* Covers keep their proportions; nothing is cropped away. */
.pcard__cover { background: var(--surface-alt); }
.pcard__cover img { display: block; width: 100%; height: auto; }
.pcard__body { padding: var(--sp-4); flex: 1 1 auto; }
.pcard__badge {
  display: inline-block; margin: 0 0 var(--sp-2);
  padding: 0.15rem 0.5rem; border-radius: 999px;
  background: var(--gold-100); color: var(--gold-800);
  font-size: var(--step--1); font-weight: 700;
}
.pcard__title { margin: 0 0 var(--sp-1); font-size: var(--step-0); color: var(--navy-800); }
.pcard__meta { margin: 0 0 var(--sp-2); font-size: var(--step--1); color: var(--ink-700); }
.pcard__text { margin: 0 0 var(--sp-2); font-size: var(--step--1); }
.pcard__source, .pcard__note { margin: 0; font-size: var(--step--1); color: var(--ink-500); }
.pcard__price { margin: var(--sp-2) 0 0; font-weight: 700; color: var(--navy-800); }
.pcard__go { margin: 0; padding: var(--sp-4); border-top: 1px solid var(--line); background: var(--surface-alt); }
.pcard__go .btn { width: 100%; text-align: center; min-height: 44px; }

/* ==========================================================================
   Advertising packages
   ========================================================================== */

.ppacks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .ppacks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ppack {
  margin: 0; padding: var(--sp-4);
  border: 1px solid var(--line); border-left: 3px solid var(--gold-400);
  border-radius: var(--radius-sm); background: var(--surface);
}
.ppack__name { margin: 0 0 var(--sp-1); font-size: var(--step-0); color: var(--navy-800); }
.ppack__duration { margin: 0; font-size: var(--step--1); color: var(--ink-500); }
.ppack__price { margin: var(--sp-2) 0; font-weight: 700; color: var(--gold-800); }
.ppack__summary { margin: 0; font-size: var(--step--1); }

/* ==========================================================================
   Advertisement listings
   ========================================================================== */

.ads { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 860px) { .ads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ad {
  margin: 0; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); overflow: hidden;
}
.ad[hidden] { display: none; }
.ad--featured { border-color: var(--gold-400); border-width: 2px; }
/* Posters are shown whole, so wording printed on them is never cut off. */
.ad__poster { background: var(--surface-alt); }
.ad__poster img { display: block; width: 100%; height: auto; }
.ad__body { padding: var(--sp-4); flex: 1 1 auto; }
.ad__labels { margin: 0 0 var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.ad__sponsored, .ad__featured {
  display: inline-block; padding: 0.12rem 0.5rem; border-radius: 999px;
  font-size: var(--step--1); font-weight: 700;
}
.ad__sponsored { background: var(--surface-tint); color: var(--ink-700); border: 1px solid var(--line-strong); }
.ad__featured { background: var(--gold-100); color: var(--gold-800); border: 1px solid var(--gold-400); }
.ad__title { margin: 0 0 var(--sp-1); font-size: var(--step-0); color: var(--navy-800); }
.ad__by { margin: 0 0 var(--sp-3); font-size: var(--step--1); color: var(--ink-700); font-weight: 600; }
.ad__facts { margin: 0 0 var(--sp-3); display: grid; gap: 0.25rem; }
.ad__row { display: flex; gap: 0.6rem; font-size: var(--step--1); }
.ad__row dt { flex: 0 0 4.5rem; color: var(--ink-500); margin: 0; }
.ad__row dd { margin: 0; }
.ad__text { margin: 0; font-size: var(--step--1); }
.ad__go {
  margin: 0; padding: var(--sp-4); border-top: 1px solid var(--line);
  background: var(--surface-alt); display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.ad__go .btn { min-height: 44px; }
@media (max-width: 560px) { .ad__go, .ad__go .btn { width: 100%; text-align: center; } }

.ads-empty {
  padding: var(--sp-4); border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm); background: var(--surface-alt);
  font-size: var(--step--1);
}
.ads-empty[hidden] { display: none; }

.ads-filters {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--sp-3);
  margin-bottom: var(--sp-4); padding: var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.ads-filters__field { display: flex; flex-direction: column; gap: 0.25rem; font-size: var(--step--1); }
.ads-filters__field select {
  min-height: 44px; min-width: 0; max-width: 100%;
  padding: 0.35rem 0.55rem; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: #fff; font-family: inherit;
}
.ads-filters .btn { min-height: 44px; }
.ads-filters__count { margin: 0; font-size: var(--step--1); color: var(--ink-700); flex-basis: 100%; }
@media (max-width: 560px) {
  .ads-filters { display: grid; grid-template-columns: 1fr; }
  .ads-filters .btn { width: 100%; }
}

/* ==========================================================================
   Grade resources list
   Built from data/resources.json. One row per approved resource, filtered by
   grade, publication status and the signed-out access check.
   ========================================================================== */

.gres { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.gres__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.gres__main { flex: 1 1 18rem; min-width: 0; }
.gres__title { margin: 0 0 var(--sp-1); font-size: var(--step-0); color: var(--navy-800); }
.gres__meta { margin: 0; font-size: var(--step--1); color: var(--ink-700); }
.gres__source { margin: var(--sp-1) 0 0; font-size: var(--step--1); color: var(--ink-500); }
.gres__go { margin: 0; flex: 0 0 auto; }
.gres__go .btn { min-height: 44px; }

/* On a phone the row stacks and the button spans the full width. */
@media (max-width: 560px) {
  .gres__item { display: grid; grid-template-columns: 1fr; }
  .gres__go, .gres__go .btn { width: 100%; text-align: center; }
}

/* ==========================================================================
   Listening tests
   The passage is spoken by the browser's own speech engine, so there is no
   audio element to style. The controls below are ordinary buttons.
   ========================================================================== */

.listening {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.listening__title { margin: 0 0 var(--sp-2); color: var(--navy-800); }
.listening__meta { font-size: var(--step--1); color: var(--ink-700); margin: 0 0 var(--sp-4); }

.listening__instructions {
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--navy-600);
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  margin-bottom: var(--sp-4);
}
.listening__instructions h4 { margin: 0 0 var(--sp-1); font-size: var(--step--1); color: var(--navy-800); }
.listening__instructions p { margin: 0; font-size: var(--step--1); }

.listening__player {
  padding: var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--navy-050);
  margin-bottom: var(--sp-5);
}
.listening__modes { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.listening__modes .btn { min-height: 44px; }
.listening__modes .btn.is-on {
  background: var(--navy-700);
  border-color: var(--navy-700);
  color: #fff;
}
.listening__limit { margin: 0 0 var(--sp-3); font-size: var(--step--1); }
.listening__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
/* Controls stack on a narrow phone so nothing is cut off. */
@media (max-width: 480px) {
  .listening__controls { display: grid; grid-template-columns: 1fr; }
  .listening__controls .btn { width: 100%; }
}
.listening__controls .btn { min-height: 48px; }
.listening__speed { display: flex; align-items: center; gap: 0.5rem; font-size: var(--step--1); }
.listening__speed select {
  min-height: 44px;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: inherit;
}
.listening__status { margin: var(--sp-3) 0 0; font-size: var(--step--1); color: var(--ink-700); }

.qlist { list-style: none; margin: 0; padding: 0; }
.q__prompt { font-weight: 650; color: var(--navy-800); margin: 0 0 var(--sp-3); }
.q__feedback { margin-top: var(--sp-2); font-size: var(--step--1); }
.q__feedback:empty { display: none; }
.q.is-right { border-left: 3px solid var(--ok-700); padding-left: var(--sp-3); }
.q.is-wrong { border-left: 3px solid var(--err-700); padding-left: var(--sp-3); }
.q.is-right .q__feedback { color: var(--ok-700); }
.q.is-wrong .q__feedback { color: var(--err-700); }

.note, .match, .sequence { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.note__row, .match__row, .sequence__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
}
.note__row label, .match__term { min-width: 9rem; font-weight: 600; }
.note__row input, .match__row select, .sequence__row select {
  min-height: 44px;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font-family: inherit;
  /* min-width:0 lets a long option shrink instead of pushing the row wider
     than the screen; max-width keeps it inside its parent on any width. */
  min-width: 0;
  max-width: 100%;
}
.note__row input { flex: 1 1 12rem; }
.match__row select { flex: 1 1 14rem; }
.sequence__row select { flex: 0 0 5rem; }
.sequence__text { flex: 1 1 12rem; }

/* On a phone the term and its dropdown stack, so a long meaning never forces
   the page to scroll sideways. */
@media (max-width: 560px) {
  .note__row, .match__row { display: grid; grid-template-columns: 1fr; gap: 0.35rem; }
  .note__row label, .match__term { min-width: 0; }
  .note__row input, .match__row select { width: 100%; }
}

.listening__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.listening__actions .btn { min-height: 48px; }

.listening__score { margin-top: var(--sp-4); font-size: var(--step--1); }
.listening__score:empty { display: none; }
.listening__score.is-high { color: var(--ok-700); }
.listening__score.is-mid { color: var(--ink-700); }
.listening__score.is-low { color: var(--err-700); }

.listening__transcript {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
}
.listening__transcript:focus { outline: 2px solid var(--navy-600); outline-offset: 2px; }
.listening__transcript h4 { margin: 0 0 var(--sp-2); color: var(--navy-800); }
.listening__transcript p { margin: 0 0 var(--sp-2); }

@media print {
  .site-header,
  .site-footer,
  .breadcrumbs,
  .nav-drawer,
  .toolbar,
  .btn-row,
  .skip-link { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  a { color: #000; text-decoration: underline; }
  .card, .callout, .model, .activity { break-inside: avoid; border-color: #999; box-shadow: none; }
  .hero, .page-hero { background: #fff !important; color: #000 !important; }
  .hero h1, .page-hero h1 { color: #000 !important; }
  .page-hero p, .hero__text { color: #333 !important; }

  /* Printing a practice paper. The aim is a sheet a student can write on and
     a teacher can mark, so anything that only works on screen is dropped and
     nothing that belongs to one exercise is split across two pages. */
  .paperlib__nav,
  .paperlib__filter,
  .browse__all,
  .adslot,
  .whatsapp-panel { display: none !important; }
  /* A closed <details> prints as a bare heading, which loses the answer
     underneath it. On paper every question and answer should be readable. */
  details.accordion > .accordion__body { display: block !important; }
  details.accordion > summary { list-style: none; font-weight: 700; }
  .section { padding-block: 0.6rem !important; }
  .section h2 { break-after: avoid; break-inside: avoid; }
  .section h3, .section h4 { break-after: avoid; }
  .prose p, .prose li { orphans: 3; widows: 3; }
  table.data { break-inside: auto; }
  table.data tr { break-inside: avoid; }
  table.data thead { display: table-header-group; }
  /* The exercise texts run long; keep each numbered question whole. */
  .prose ol > li, .prose ul > li { break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; word-break: break-all; }
  /* Inside a table that would be ruinous, and the caption already names the
     source, so links in tables print as plain text. */
  table.data a[href^="http"]::after { content: none; }
}

/* The homepage shows a short list of resources with this button below it.
   It hides itself as soon as a filter or a search narrows the list. */
.browse__all {
  margin-top: var(--sp-5);
  text-align: center;
}
.browse__all[hidden] { display: none; }

/* Marks a link to an official site that offers no HTTPS. Amber, not red:
   the link works, and the caution is about the other site, not ours. */
.tag--http {
  background: var(--gold-100);
  color: var(--warn-700);
  border-color: var(--gold-400);
}

/* An RCF offer is our own promotion, not a paid advertisement, so it
   gets its own label and must never be mistaken for a Sponsored one. */
.ad__offer {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--navy-100);
  color: var(--navy-800);
  border: 1px solid var(--navy-600);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ad--offer { border-left: 3px solid var(--navy-600); }

/* --- Destination cards carrying a photograph ------------------------------
   Illustrations stay small and purposeful: a 96x72 thumbnail above the
   title, never a banner across the card or across the page. 96x72 is 4:3,
   the proportion of the supplied photographs, so nothing is cropped. */
.dcard__media {
  display: block;
  width: 96px;
  height: 72px;
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--navy-900);
}
.dcard__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The whole card is already clickable through the title's ::after overlay,
   so the picture must not swallow the click. */
.dcard--photo .dcard__media { pointer-events: none; }


/* ==========================================================================
   Advertisement placeholder
   A reserved space, not an advertisement. There is no advertising code in
   this project. It is styled to be unmistakably NOT a learning card: dashed
   rather than solid, hatched rather than coloured, no shadow, no hover lift,
   no arrow, and not clickable. It sits between major sections only.
   ========================================================================== */

.adslot {
  display: grid;
  place-items: center;
  margin: var(--sp-6) 0;
  border: 1px dashed #b9c2d0;
  border-radius: var(--radius-sm);
  background: repeating-linear-gradient(45deg,
    #f7f9fc, #f7f9fc 10px, #f2f5fa 10px, #f2f5fa 20px);
  min-height: 100px;
}
@media (min-width: 720px) {
  .adslot--between { min-height: 90px; }
}
.adslot__label {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  /* Must clear 4.5:1 against the hatched ground. #8a97a8 measured 2.82:1. */
  color: var(--ink-500);
}
/* Never wider than the screen, and never breaking out of its container. */
.adslot { max-width: 100%; }
/* A card for something genuinely not ready yet. It stays visible so the
   section reads as complete, but it is not a link and offers no affordance
   suggesting it can be opened. Muted rather than hidden. */
.card--soon {
  background: var(--surface-alt);
  border-style: dashed;
  cursor: default;
}
.card--soon h3 { color: var(--ink-700); }
.card--soon .card__icon { background: var(--navy-100); color: var(--ink-700); }
.card--soon .card__note {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--step--1);
  font-weight: 650;
  color: var(--ink-700);
}

.gres__warn { margin: 0.35rem 0 0; }

/* Text for screen readers only. Not display:none, which would hide it from
   assistive technology too. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Stacked tables on narrow phones ---------------------------------------- */

/* Between 600px and 719px the 42% label column still leaves a readable value.
   Below 600px it does not - on a 390px phone the value is squeezed into a
   ribbon three or four words wide. Put the label above the value instead and
   give the value the whole width of the card. The desktop table is untouched;
   this lives inside the stacked breakpoint only. */
@media (max-width: 599px) {
  table.stacked td {
    display: block;
    padding: 0.7rem 0.9rem;
  }
  table.stacked td::before {
    display: block;
    flex: none;
    margin-bottom: 0.2rem;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ink-500);
  }
  table.stacked td > .td__v { display: block; }
}

/* Book cover placeholders and purchase notes ----------------------------- */

/* Shown until a real cover is supplied. Deliberately a labelled box and not
   a stand-in picture: an unrelated image would misrepresent the book. */
.pcard__cover--placeholder {
  display: grid;
  place-items: center;
  /* A real cover keeps its own 2:3 shape. An empty placeholder at that
     height would leave roughly 500px of hatching per card and make the
     catalogue unreadable, so the stand-in is capped and centred. */
  aspect-ratio: 2 / 3;
  max-height: 200px;
  max-width: 134px;
  margin-inline: auto;
  background: repeating-linear-gradient(45deg, #f7f9fc, #f7f9fc 10px, #f2f5fa 10px, #f2f5fa 20px);
  border: 1px dashed #b9c2d0;
  border-radius: var(--radius-sm);
}
.pcard__coverlabel {
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-500);
  text-align: center;
  padding: 0 var(--sp-2);
}
.pcard__note {
  font-size: 0.85rem;
  color: var(--ink-700);
  margin: 0.35rem 0 0;
}
.pcard__note--soon {
  font-weight: 600;
  color: var(--ink-500);
}
/* Named book recommendations inside a topic page ------------------------- */

.minibooks {
  list-style: none;
  margin: var(--sp-4) 0 var(--sp-4);
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}
.minibook {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.minibook__cover {
  flex: 0 0 auto;
  width: 56px;
  height: 84px;
  object-fit: cover;
  border-radius: 2px;
  border: 1px solid var(--line);
}
.minibook__cover--placeholder {
  background: repeating-linear-gradient(45deg, #f7f9fc, #f7f9fc 8px, #f2f5fa 8px, #f2f5fa 16px);
  border-style: dashed;
}
.minibook__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.minibook__title { font-weight: 700; color: var(--navy-800); }
.minibook__meta { font-size: 0.82rem; color: var(--ink-500); }
.minibook__soon {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.minibook__link { font-size: 0.85rem; font-weight: 600; }
/* Real book covers -------------------------------------------------------- */

/* Supplied covers vary from 0.63 to 0.84 in aspect ratio. A fixed frame with
   object-fit: contain shows every one of them whole: nothing is cropped,
   stretched or recoloured, which is a condition of using the owner's art. */
.pcard__cover img,
img.pcard__cover {
  width: 100%;
  height: 260px;
  object-fit: contain;
  object-position: center;
  display: block;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
}
.minibook__cover {
  object-fit: contain;
  background: var(--surface-alt);
}
.pcard__covernote {
  font-size: 0.78rem;
  color: var(--ink-500);
  font-style: italic;
  margin: 0.3rem 0 0;
}
/* Gold hero button, matching the header's RCF Publications accent ---------- */

/* Used for the homepage "Explore RCF Publications" button so the commercial
   area is visually distinct from the free sections, and consistent with the
   gold header button that leads to the same place. */
.btn--gold {
  background: var(--gold-400);
  color: var(--navy-900);
  border-color: var(--gold-400);
}
.btn--gold:hover,
.btn--gold:focus-visible {
  background: #eebc5d;
  border-color: #eebc5d;
  color: var(--navy-900);
}
/* Book price, gold accent ------------------------------------------------- */

/* Sits directly above the purchase button. Gold marks it as the commercial
   action without shouting; the border keeps it legible on the card ground. */
.pcard__price {
  display: inline-block;
  margin: 0.5rem 0 0;
  padding: 0.28rem 0.7rem;
  background: var(--gold-100);
  border: 1px solid #efdcae;
  border-radius: var(--radius-sm);
  color: var(--gold-800);
  font-weight: 700;
  font-size: 0.95rem;
}