/* ————————————————————————————————————————————————————————————
   c800.css — the 800 course, on its own sheet.

   Loads AFTER course.css and keeps its chrome only (tokens, both rooms, the
   masthead and menu, the crumb, the footer, .btn). The sheet background goes:
   this page is set on plain paper.

   The idea: this course is for a reader who already has a score, so the
   page speaks in numbers the reader already understands. A ruler says who it
   is for (550 → 800, the real scale). Two figures say what it is (15,000 so
   that 0). A row of numerals says what the exams add up to (the real one is
   the 26th). A table says everything else, one number per row.
   ———————————————————————————————————————————————————————————— */

.c8-page{ --col: 1080px; }

/* plain paper */
.c8-page::before, .c8-page::after{ content:none; }
body.c8-page{ background-image:none; }
@media (min-width:1024px){ body.c8-page{ background-image:none; } }
:root[data-room="dark"] body.c8-page{ background-image:none; }

.c8-page .bar > .wrap, .c8-page .foot > .wrap{ max-width: var(--col); padding-inline: var(--pad); }
main.c8{ max-width: var(--col); margin-inline:auto; padding-inline: var(--pad); }
.c8 .crumb{ margin-top: 26px; }

/* ——— section numerals ——— */
.c8-h2{
  display:flex; align-items:baseline; gap:14px; margin:0 0 26px; flex-wrap:wrap;
  font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; color: var(--fg);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.15rem); line-height:1.4;
}
.c8-h2 .latin{ font-weight:500; }
.c8-no{ font-weight:500; font-size:.62em; color: var(--accent); letter-spacing:.5px; position:relative; top:-.08em; }
.c8-h2-s{ font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); }

/* ————————————————————————————————————————————————————————————
   THE TITLE — the numeral is the name
   ———————————————————————————————————————————————————————————— */
.c8-head{
  display:grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 24px clamp(28px, 5vw, 72px); align-items:end;
  padding-block: 22px 44px; border-bottom: 1px solid var(--line);
}
.c8-head h1{ margin:0; min-width:0; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; color: var(--fg); line-height:1; }
.h1-kick{
  display:block; font-size: clamp(1.1rem, 1rem + .7vw, 1.5rem); font-weight:700;
  color: var(--fg-mute); line-height:1.5; margin-bottom:.15em;
}
.h1-num{
  display:block; font-family:'Rubik', system-ui, sans-serif; font-weight:700;
  font-size: clamp(5.4rem, 3rem + 13vw, 13rem); line-height:.92; letter-spacing:-.05em;
  color: var(--accent); margin-inline-end:-.04em; /* optical: the 8's bowl on the column edge */
}
/* the numeral arrives on load — a masked rise, so its rest is simply visible */
.c8-head h1{ overflow:hidden; }
@media (prefers-reduced-motion: no-preference){
  .h1-num{ animation: num-in .8s var(--out) both; }
  .h1-kick{ animation: fade-in .5s .35s ease both; }
  .c8-intro{ animation: fade-in .6s .5s ease both; }
}
@keyframes num-in{ from{ transform: translateY(45%); opacity:0; } }
.c8-intro{ padding-bottom: 12px; }
.c8-lede{ margin:0; font-size: clamp(1.08rem, 1rem + .6vw, 1.32rem); line-height:1.9; font-weight:400; color: var(--fg); max-width: 27em; }
.c8-lede b{ font-weight:600; }
.c8-teach{ margin:14px 0 0; font-size:.9rem; line-height:1.9; color: var(--fg-mute); }
.c8-acts{ display:flex; flex-wrap:wrap; align-items:center; gap: 12px 22px; margin-top: 24px; }
.c8-link{
  color: var(--fg); text-decoration:none; font-weight:500; font-size:.98rem;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat:no-repeat; background-size:100% 1px; background-position: 0 100%;
  padding-bottom:3px; transition: color .18s ease;
}
.c8-link:hover{ color: var(--accent); }
@media (max-width: 760px){
  .c8-head{ grid-template-columns: 1fr; gap: 14px; padding-block: 16px 34px; align-items:start; }
}

/* ————————————————————————————————————————————————————————————
   WHO — the ruler
   ———————————————————————————————————————————————————————————— */
.who{ margin-block: 60px 0; }
.who-grid{ display:grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 72px); align-items:start; margin-top: 30px; }
.who-txt p{ margin:0 0 14px; font-size: clamp(1rem, .96rem + .25vw, 1.08rem); line-height:1.95; color: var(--fg-soft); max-width: 32em; }
.who-txt p:last-child{ margin-bottom:0; }
.who-lead{ font-size: clamp(1.12rem, 1.02rem + .6vw, 1.36rem) !important; line-height:1.8 !important; color: var(--fg) !important; }
.who-txt b{ color: var(--fg); font-weight:600; }
.who-else{ border-inline-start: 2px solid var(--accent); padding-inline-start: 18px; }
.who-else p{ margin:0; font-size:.98rem; line-height:1.9; color: var(--fg-soft); }
.who-else a{ color: var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; font-weight:500; }
.who-else a:hover{ color: var(--pink-hover); }

/* the ruler runs the full column; on a phone it keeps its length and the
   reader slides it, the way a ruler is slid, opening on the course's end */
.who-rl{ min-width:0; }
.rl-scroll{ overflow-x:auto; scrollbar-width:none; }
.rl-scroll::-webkit-scrollbar{ display:none; }
.rl{ display:block; width:100%; height:auto; overflow:visible; }
.rl-rule{ fill:none; stroke: var(--rail-line); stroke-width:1.8; stroke-linecap:round; }
.rl-tick{ fill:none; stroke: var(--rail-line); stroke-width:1.6; stroke-linecap:round; }
.rl-tick-550{ stroke: var(--accent); stroke-width:2.2; }
.rl-seg{ fill:none; stroke: var(--accent); stroke-width:8; stroke-linecap:round; }
.rl-dot{ fill: var(--paper); stroke: var(--accent); stroke-width:3.5; }
.rl-wall{ fill:none; stroke: var(--fg); stroke-width:2.4; stroke-linecap:round; }
.rl-hatch{ fill:none; stroke: var(--fg); stroke-width:1.4; stroke-linecap:round; opacity:.7; }
.rl-n{ font-family:'Rubik', system-ui, sans-serif; font-weight:500; font-size:24px; fill: var(--fg-mute); direction:ltr; }
.rl-n-550{ font-size:46px; font-weight:600; fill: var(--accent); }
.rl-n-800{ font-size:46px; font-weight:600; fill: var(--fg); }
.rl-ar{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:27px; fill: var(--fg-soft); direction:rtl; unicode-bidi:plaintext; }
.rl-ar-here{ fill: var(--accent); }
.rl-ar-below{ fill: var(--fg-mute); font-weight:600; font-size:24px; }
@media (max-width: 640px){
  .rl-wrap{ width: 640px; }
  .rl-out{ text-align:start; }
}
/* the reader's marker — a native range laid over the rule. Its track is the
   rule itself, so the thumb rides the same scale the numbers are printed on. */
.rl-wrap{ position:relative; }
.rl-in{
  position:absolute; left:6%; width:88%; top:calc(37.5% - 16px); height:32px; margin:0;
  -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer; direction:ltr;
}
.rl-in:focus{ outline:none; }
.rl-in::-webkit-slider-runnable-track{ height:32px; background:transparent; }
.rl-in::-moz-range-track{ height:32px; background:transparent; }
.rl-in::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:22px; height:22px; margin-top:5px; border-radius:50%;
  background: var(--paper); border: 3px solid var(--fg); box-shadow: 0 0 0 4px var(--paper), 0 2px 8px rgba(12,10,9,.25);
  transition: transform .18s var(--out), border-color .18s ease;
}
.rl-in::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%;
  background: var(--paper); border: 3px solid var(--fg); box-shadow: 0 0 0 4px var(--paper), 0 2px 8px rgba(12,10,9,.25);
}
.rl-in:hover::-webkit-slider-thumb, .rl-in:active::-webkit-slider-thumb{ transform: scale(1.15); }
.rl-in:focus-visible::-webkit-slider-thumb{ border-color: var(--accent); }
.rl-wrap.touched .rl-in::-webkit-slider-thumb{ border-color: var(--accent); }
.rl-wrap.touched .rl-in::-moz-range-thumb{ border-color: var(--accent); }
/* the fixed 550 dot yields to the thumb once the reader has one */
.rl-wrap.touched .rl-dot{ opacity:.35; }
.rl-out{ margin: 6px 0 0; min-height: 1.9em; font-size: 1rem; line-height:1.9; color: var(--fg-soft); text-align:center; }
.rl-out b{ color: var(--fg); font-weight:600; }
.rl-out .rl-yes{ color: var(--accent); }
.rl-out a{ color: var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; font-weight:500; }
.rl-hint{ color: var(--fg-mute); font-size:.9rem; }

@media (max-width: 860px){
  .who-grid{ grid-template-columns: 1fr; }
}

/* the ruler draws itself: the scale first, then the coloured range from the
   floor to the ceiling, then the words. Rest = drawn. */
.c8-js .who-rl:not(.in) .rl-rule, .c8-js .who-rl:not(.in) .rl-seg, .c8-js .who-rl:not(.in) .rl-wall{ stroke-dasharray:100; stroke-dashoffset:100; }
.c8-js .who-rl:not(.in) .rl-tick, .c8-js .who-rl:not(.in) .rl-n, .c8-js .who-rl:not(.in) .rl-dot,
.c8-js .who-rl:not(.in) .rl-hatch, .c8-js .who-rl:not(.in) .rl-ar{ opacity:0; }
.c8-js .who-rl.in .rl-rule{ stroke-dasharray:100; animation: draw .7s var(--out) both; }
.c8-js .who-rl.in .rl-tick, .c8-js .who-rl.in .rl-n{ animation: fade-in .4s .5s ease both; }
.c8-js .who-rl.in .rl-seg{ stroke-dasharray:100; animation: draw .8s .8s var(--out) both; }
.c8-js .who-rl.in .rl-dot{ animation: fade-in .3s .8s ease both; }
.c8-js .who-rl.in .rl-wall{ stroke-dasharray:100; animation: draw .4s 1.5s var(--out) both; }
.c8-js .who-rl.in .rl-hatch{ animation: fade-in .3s 1.8s ease both; }
.c8-js .who-rl.in .rl-ar{ animation: fade-in .45s 1.7s ease both; }
@keyframes draw{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:0; } }
@keyframes fade-in{ from{ opacity:0; } }

/* ————————————————————————————————————————————————————————————
   THE GOAL — 15,000 so that 0
   ———————————————————————————————————————————————————————————— */
.goal{ margin-block: 84px 0; }
.goal-pair{
  display:grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0 clamp(20px, 3vw, 44px);
  align-items:start; border-block: 1px solid var(--line); padding-block: 34px 36px;
}
.goal-n{ margin:0; }
.goal-n b{
  display:block; font-family:'Rubik', system-ui, sans-serif; font-weight:500; letter-spacing:-.04em;
  font-size: clamp(3.4rem, 2.4rem + 5.2vw, 7.2rem); line-height:.95; color: var(--fg);
}
.goal-zero .goal-n b{ color: var(--accent); font-weight:600; }
.goal-l{
  margin:10px 0 0; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; color: var(--fg);
  font-size: clamp(1.15rem, 1.05rem + .6vw, 1.5rem); line-height:1.45; max-width: 16em;
}
.goal-c{ margin:12px 0 0; font-size:.95rem; line-height:1.9; color: var(--fg-mute); max-width: 26em; }
.goal-so{ align-self:stretch; display:flex; align-items:center; justify-content:center; position:relative; }
.goal-so::before{ content:''; position:absolute; top:0; bottom:0; left:50%; width:1px; background: var(--line); }
.goal-so span{
  position:relative; background: var(--paper); padding: 6px 4px; writing-mode: vertical-rl; transform: rotate(180deg);
  font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:1rem; color: var(--accent); letter-spacing:.02em;
}
@media (max-width: 700px){
  .goal-pair{ grid-template-columns: 1fr; gap: 26px; }
  .goal-so{ height: 40px; }
  .goal-so::before{ left:0; right:0; top:50%; bottom:auto; height:1px; width:auto; }
  .goal-so span{ writing-mode: horizontal-tb; transform:none; padding: 0 10px; }
}
.c8-js .goal-pair:not(.in) .goal-cell{ opacity:0; transform: translateY(10px); }
.c8-js .goal-pair.in .goal-cell{ animation: rise .55s var(--out) both; }
.c8-js .goal-pair.in .goal-zero{ animation-delay:.25s; }
@keyframes rise{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }

/* ————————————————————————————————————————————————————————————
   THE 26TH — the row of exams
   ———————————————————————————————————————————————————————————— */
.ex26{ margin-block: 84px 0; }
.ex-lead{ margin:0 0 30px; font-size: clamp(1rem, .96rem + .3vw, 1.12rem); line-height:1.95; color: var(--fg-soft); max-width: 38em; }
.ex-lead b{ color: var(--fg); font-weight:600; }
.ex-lead b.latin{ font-weight:500; }
.ex-row{ display:flex; flex-wrap:wrap; align-items:flex-end; gap: 10px 14px; padding: 8px 0 22px; border-bottom: 1px solid var(--line); }
.ex{
  font-family:'Rubik', system-ui, sans-serif; font-weight:500; letter-spacing:-.03em;
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.6rem); line-height:1; color: var(--fg); opacity:.72;
  min-width: 1.35em; text-align:center; padding: 6px 2px 8px; border-bottom: 2px solid var(--line);
}
.ex-real{
  opacity:1; color:#fff; background: var(--accent); border-bottom-color: var(--accent); border-radius: 10px;
  font-weight:600; font-size: clamp(2.2rem, 1.6rem + 3vw, 4.4rem); padding: 8px 18px 10px; min-width: 1.7em;
  margin-inline-start: 6px; box-shadow: var(--cta-shadow);
}
.ex-cap{ margin: 14px 0 0; font-size:.9rem; line-height:1.9; color: var(--fg-mute); }
.ex-cap-k{ font-weight:600; color: var(--fg); }
.ex-cap-real{ color: var(--accent); }
.ex-cap-sep{ margin-inline: 8px; }
.c8-js .ex-row:not(.in) .ex{ opacity:0; }
.c8-js .ex-row.in .ex{ animation: ex-in .35s var(--out) both; animation-delay: var(--d); }
.c8-js .ex-row.in .ex-real{ animation: ex-real-in .5s var(--out) both; animation-delay: var(--d); }
@keyframes ex-in{ from{ opacity:0; transform: translateY(6px); } }
@keyframes ex-real-in{ from{ opacity:0; transform: scale(.7); } }

/* ————————————————————————————————————————————————————————————
   THE TABLE
   ———————————————————————————————————————————————————————————— */
.plan{ margin-block: 84px 0; }
.plan-wrap{ overflow-x:auto; }
.plan-t{ width:100%; border-collapse:collapse; min-width: 560px; }
.plan-t th{
  text-align:start; padding: 0 12px 12px; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700;
  font-size:.92rem; color: var(--fg-mute); border-bottom: 1px solid var(--fg); letter-spacing:.01em;
}
.plan-t th:first-child, .plan-t td:first-child{ padding-inline-start: 0; }
.plan-t td{ padding: 18px 12px 20px; border-bottom: 1px solid var(--line); vertical-align:top; font-size:.95rem; line-height:1.85; color: var(--fg-soft); }
.plan-t td:first-child{ width: 54%; }
.plan-t td b{ display:block; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:1.08rem; line-height:1.55; color: var(--fg); }
.plan-t td span{ display:block; margin-top:3px; font-size:.9rem; line-height:1.85; color: var(--fg-mute); max-width: 32em; }
.plan-t .t-n{ white-space:nowrap; }
.plan-t td.t-n b{
  font-family:'Rubik', system-ui, sans-serif; font-weight:500; letter-spacing:-.03em;
  font-size: clamp(1.6rem, 1.4rem + 1vw, 2.3rem); line-height:1; color: var(--fg); padding-top:.1em;
}
.plan-t td.t-n em{ display:block; font-style:normal; font-size:.82rem; color: var(--fg-mute); margin-top:6px; }
.plan-t .t-first td.t-n b, .plan-t .t-last td.t-n b{ color: var(--accent); }
.plan-t .t-first td:first-child b{ color: var(--accent); }
.plan-foot{ margin:22px 0 0; font-size:.95rem; line-height:1.9; color: var(--fg-soft); }
.plan-foot a{ color: var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; font-weight:500; }
.plan-foot a:hover{ color: var(--pink-hover); }
.c8-js .plan-t tbody tr:not(.in){ opacity:0; }
.c8-js .plan-t tbody tr.in{ animation: fade-in .45s ease both; }

/* ————————————————————————————————————————————————————————————
   EXAM DAY — the real room
   ———————————————————————————————————————————————————————————— */
.day{ margin-block: 84px 0; }
.day-grid{ display:grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 30px clamp(32px, 5vw, 72px); align-items:center; }
.day-fig{ margin:0; min-width:0; }
.day-fig a{ display:block; border-radius: 18px; overflow:hidden; background: var(--card); box-shadow: var(--lift); border:1px solid var(--card-line); }
.day-fig img{ display:block; width:100%; height:auto; }
.day-fig figcaption{ margin: 12px 4px 0; font-size:.88rem; line-height:1.8; color: var(--fg-mute); }
.day-txt p{ margin:0 0 14px; font-size: clamp(1rem, .96rem + .25vw, 1.08rem); line-height:1.95; color: var(--fg-soft); max-width: 28em; }
.day-lead{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; color: var(--fg) !important; font-size: clamp(1.2rem, 1.05rem + .8vw, 1.6rem) !important; line-height:1.6 !important; }
.day-more{ margin-top: 18px !important; }
.day-more a{ color: var(--accent); text-decoration:none; font-weight:600; border-bottom: 1px solid var(--accent); padding-bottom:2px; }
.day-more a:hover{ color: var(--pink-hover); }
.c8-js .day-grid:not(.in) .day-fig{ opacity:0; transform: translateY(14px); }
.c8-js .day-grid.in .day-fig{ animation: rise .7s var(--out) both; }
@media (max-width: 860px){ .day-grid{ grid-template-columns: 1fr; } }
@media (max-width: 640px){
  .plan-t{ min-width: 0; }
  .plan-t td:first-child{ width:auto; }
  .plan-t th:last-child, .plan-t td:last-child{ display:none; } /* «وين» folds into the text on a phone */
  .plan-t td span{ font-size:.86rem; }
}

/* ————————————————————————————————————————————————————————————
   THE ASK — pink ground, white type, the number as the largest object
   ———————————————————————————————————————————————————————————— */
.talk{ margin-block: 84px 0; }
.talk-in{
  background: var(--pink); color:#fff; border-radius:24px;
  padding: clamp(34px, 5vw, 60px) var(--pad) clamp(36px, 5vw, 60px);
  text-align:center; box-shadow: var(--cta-shadow);
}
.talk h2{ margin:0; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; color:#fff; font-size: clamp(1.7rem, 1.3rem + 2vw, 2.6rem); line-height:1.35; }
.talk-p{ margin:8px auto 0; max-width: 30em; color: rgba(255,255,255,.86); font-size:1rem; line-height:1.9; }
.talk-tel{
  display:block; margin: 22px auto 0; width:fit-content; color:#fff; text-decoration:none;
  font-family:'Rubik', system-ui, sans-serif; font-weight:600; letter-spacing:-.01em;
  font-size: clamp(2.2rem, 1.6rem + 3.6vw, 4.4rem); line-height:1.1;
  border-bottom: 3px solid rgba(255,255,255,.4); padding-bottom:4px; transition: border-color .18s ease;
}
.talk-tel:hover{ border-color:#fff; }
.talk-acts{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top: 26px; }
.tb-1{ background:#fff; color: var(--pink); box-shadow: 0 6px 18px rgba(0,0,0,.14); }
.tb-1:hover{ background:#fff5f8; }
.tb-2{ background: transparent; color:#fff; border:1px solid rgba(255,255,255,.55); }
.tb-2:hover{ border-color:#fff; background: rgba(255,255,255,.08); }
.talk a:focus-visible{ outline-color:#fff; }

/* ——— the other four ——— */
.sib{ margin-block: 72px 0; }
.sib-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.sib-list a{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding: 16px 4px; border-bottom:1px solid var(--line); text-decoration:none; color: var(--fg); transition: color .18s ease;
}
.sib-list b{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:1.05rem; }
.sib-list em{ font-style:normal; font-size:.88rem; color: var(--fg-mute); }
.sib-list a:hover, .sib-list a:hover b{ color: var(--accent); }