/* ————————————————————————————————————————————————————————————
   master.css — the Master course, on its own sheet.

   Loads AFTER course.css and keeps only its chrome: the tokens, both rooms,
   the masthead and its menu, the crumb, the footer, .btn. Everything the
   reader came for is set here, and it is set on plain paper: the answer-sheet
   lattice and the desk falloff are switched off, because the drawings on this
   page ARE the texture and two textures cancel.

   The idea, in one line: a course is a quantity of things, and this page shows
   the things. 200 hours are 200 cells, 22 books are 22 spines, 12 exams are 12
   sheets. The numbers are the largest type on the page after the name, and the
   drawings beside them contain exactly what the numbers say. After that the
   page answers two questions in order — for whom, and how it runs — in a
   ledger, not in prose.
   ———————————————————————————————————————————————————————————— */

.ms-page{ --col: 1080px; --ink-draw: var(--fg); }

/* plain paper. course.css paints the sheet on body::before/::after and a
   falloff on body; all three go. */
.ms-page::before, .ms-page::after{ content:none; }
body.ms-page{ background-image:none; }
@media (min-width:1024px){ body.ms-page{ background-image:none; } }
:root[data-room="dark"] body.ms-page{ background-image:none; }

/* the chrome squares up with the wider column this page uses */
.ms-page .bar > .wrap, .ms-page .foot > .wrap{ max-width: var(--col); padding-inline: var(--pad); }

main.ms{ max-width: var(--col); margin-inline:auto; padding-inline: var(--pad); }

/* ——— section numerals — the page's own running order ——— */
.ms-h2{
  display:flex; align-items:baseline; gap:14px; margin:0 0 26px;
  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;
}
.ms-no{ font-weight:500; font-size:.62em; color: var(--accent); letter-spacing:.5px; position:relative; top:-.08em; }
.ms-h2-s{ font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); }

/* ————————————————————————————————————————————————————————————
   THE TITLE — a lockup at two scales. «دورة بسيخومتري» is the line people
   search; «الماستر» is the thing they look at.
   ———————————————————————————————————————————————————————————— */
/* the name column is sized by the word, never by a fraction: «الماستر» at
   its largest is ~2.6em wide, and an `auto` track keeps it from running under
   the lede the way a fractional one let it */
.ms-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);
}
.ms-head h1{ min-width:0; }
.ms-head h1{ margin: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: .1em;
}
.h1-name{
  display:block; font-size: clamp(4.6rem, 2.6rem + 11vw, 11.5rem); line-height:1.02;
  letter-spacing:-.02em; color: var(--accent);
  margin-inline-start:-.03em; /* optical: the alef's stem sits on the column edge */
}
.ms-intro{ padding-bottom: 10px; }
.ms-lede{
  margin:0; font-size: clamp(1.08rem, 1rem + .6vw, 1.32rem); line-height:1.9;
  font-weight:400; color: var(--fg); max-width: 26em;
}
.ms-teach{ margin:14px 0 0; font-size:.9rem; line-height:1.9; color: var(--fg-mute); }
.ms-acts{ display:flex; flex-wrap:wrap; align-items:center; gap: 12px 22px; margin-top: 24px; }
.ms-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;
}
.ms-link:hover{ color: var(--accent); }

@media (max-width: 760px){
  .ms-head{ grid-template-columns: 1fr; gap: 18px; padding-block: 16px 34px; align-items:start; }
}

/* ————————————————————————————————————————————————————————————
   THE INVENTORY — a measured drawing.

   The objects sit straight on the paper, no card, no cells: the shelf of 22
   runs the full column, the block of 200 hours and the exam sheets share the
   row beneath. Under each object a DIMENSION LINE — the draughtsman's line
   with a tick at each end and the figure cut into its middle — spans exactly
   the thing it counts. The figure is the label; the line is the proof.
   ———————————————————————————————————————————————————————————— */
.inv{ margin-block: 56px 0; }
.inv-lede{ margin:-6px 0 34px; font-size: clamp(1rem, .96rem + .3vw, 1.12rem); line-height:1.9; color: var(--fg-soft); max-width: 34em; }
.inv-table{ display:grid; gap: 58px; }
.inv-row{ display:grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 44px clamp(36px, 6vw, 96px); align-items:start; }
.inv-col{ display:grid; gap: 44px; align-content:start; }
.inv-item{ min-width:0; }
.inv-hours{ max-width: 560px; }
.inv-home, .inv-class{ max-width: 330px; }

/* the drawings — one colour, the page's ink; the shelf line and the screen's
   dot take the accent */
.dr{ display:block; width:100%; height:auto; color: var(--ink-draw); }
.dr-shelf{ height: clamp(96px, 14vw, 156px); }
.dr-shelf .sp{ fill: currentColor; }
.dr-shelf .band{ fill: var(--paper); opacity:.34; }
.dr-shelf .shelf{ stroke: var(--accent); stroke-width:2.4; }
.dr-hours rect{ fill: currentColor; opacity:.82; }
.dr-home rect, .dr-class rect{ fill: currentColor; fill-opacity:.07; stroke: currentColor; stroke-width:1.1; stroke-opacity:.8; }
.dr-home path, .dr-class path{ stroke: currentColor; stroke-width:1; stroke-opacity:.45; stroke-linecap:round; }
.dr-screen{ max-width: 128px; }
.dr-screen rect{ fill: currentColor; fill-opacity:.05; stroke: currentColor; stroke-width:1.4; stroke-opacity:.8; }
.dr-screen path{ stroke: currentColor; stroke-width:1.4; stroke-opacity:.5; stroke-linecap:round; }
.dr-screen .dot{ fill: var(--accent); }

/* the dimension line */
.dim{ position:relative; height:18px; margin-top: 18px; }
.dim::before{ content:''; position:absolute; inset-inline:0; top:8.5px; height:1px; background: var(--rail-line); transform-origin: 100% 50%; }
.dim::after{ content:''; position:absolute; inset-inline:0; top:0; bottom:0; border-inline: 1px solid var(--rail-line); pointer-events:none; }
.dim-l{
  position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:1;
  display:flex; align-items:baseline; gap: 10px; white-space:nowrap;
  padding: 0 14px; background: var(--paper);
  font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:1.04rem; line-height:1; color: var(--fg);
}
.dim-l b{
  font-family:'Rubik', system-ui, sans-serif; font-weight:500; letter-spacing:-.03em;
  font-size: clamp(2rem, 1.7rem + 1.4vw, 2.7rem); line-height:1; color: var(--fg);
}
.inv-c{ margin: 28px 0 0; font-size:.9rem; line-height:1.85; color: var(--fg-mute); max-width: 32em; }
.inv-books .inv-c{ max-width: 40em; }
.inv-w{
  margin: 16px 0 0; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700;
  font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); line-height:1.4; color: var(--fg);
}
.inv-plat .inv-c{ margin-top: 6px; }

/* the drawing draws itself, once, when first seen; the dimension line is
   drawn last, across the finished object. Rest = complete: every keyframe
   below names only a from-state, so each element ends at its own opacity. */
.ms-js .inv-item:not(.in) .dr rect, .ms-js .inv-item:not(.in) .dr g,
.ms-js .inv-item:not(.in) .dr path, .ms-js .inv-item:not(.in) .dr line{ opacity:0; }
.ms-js .inv-item:not(.in) .dim::before{ transform: scaleX(0); }
.ms-js .inv-item:not(.in) .dim::after, .ms-js .inv-item:not(.in) .dim-l{ opacity:0; }
.ms-js .inv-item.in .dr-hours rect{ animation: fade-in .3s var(--out) both; animation-delay: var(--d); }
.ms-js .inv-item.in .dr-shelf g{ animation: spine-up .55s var(--out) both; animation-delay: var(--d); }
.ms-js .inv-item.in .dr-shelf .shelf{ animation: fade-in .3s ease both; }
.ms-js .inv-item.in .dr-home g, .ms-js .inv-item.in .dr-class g{ animation: sheet-in .45s var(--out) both; animation-delay: var(--d); }
.ms-js .inv-item.in .dr-screen rect, .ms-js .inv-item.in .dr-screen path{ animation: fade-in .4s ease both; }
.ms-js .inv-item.in .dr-screen .dot{ animation: dot-in .4s .35s var(--out) both; }
.ms-js .inv-item.in .dim::before{ animation: dim-draw .7s .75s var(--out) both; }
.ms-js .inv-item.in .dim::after, .ms-js .inv-item.in .dim-l{ animation: fade-in .4s 1.2s ease both; }
.dr-shelf g{ transform-box: fill-box; transform-origin: 50% 100%; }
.dr-screen .dot{ transform-box: fill-box; transform-origin: center; }
@keyframes fade-in{ from{ opacity:0; } }
@keyframes spine-up{ from{ opacity:0; transform: scaleY(.15); } to{ transform: scaleY(1); } }
@keyframes sheet-in{ from{ opacity:0; transform: translateY(4px); } to{ transform:none; } }
@keyframes dot-in{ from{ opacity:0; transform: scale(.4); } to{ transform:none; } }
@keyframes dim-draw{ from{ transform: scaleX(0); } to{ transform: scaleX(1); } }

@media (max-width: 820px){
  .inv-row{ grid-template-columns: 1fr; gap: 48px; }
  .inv-hours{ max-width: 520px; }
  .inv-table{ gap: 48px; }
}

/* ————————————————————————————————————————————————————————————
   WHO — two doors
   ———————————————————————————————————————————————————————————— */
.who{ margin-block: 84px 0; }
.who-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 64px); border-top:1px solid var(--line); }
.who-card{ padding-block: 28px 30px; }
.who-card + .who-card{ border-inline-start: 1px solid var(--line); padding-inline-start: clamp(28px, 5vw, 64px); margin-inline-start: calc(-1 * clamp(28px, 5vw, 64px)); }
.who-card h3{
  margin:0 0 10px; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; color: var(--fg);
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.7rem); line-height:1.45;
}
.who-card p{ margin:0; font-size: clamp(1rem, .96rem + .25vw, 1.08rem); line-height:1.95; max-width: 30em; color: var(--fg-soft); }
.who-else{
  margin:0; padding-block: 22px 0; border-top:1px solid var(--line);
  font-size:.98rem; line-height:1.9; color: var(--fg-soft);
}
.who-else b{ color: var(--fg); }
.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); }
@media (max-width: 700px){
  .who-grid{ grid-template-columns: 1fr; }
  .who-card + .who-card{ border-inline-start:0; padding-inline-start:0; margin-inline-start:0; border-top:1px solid var(--line); }
}

/* ————————————————————————————————————————————————————————————
   HOW IT RUNS — a ledger: two columns of continuous things, then the
   stations, numbered, in the order they are met.
   ———————————————————————————————————————————————————————————— */
.run{ margin-block: 84px 0; }
.run-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 64px); border-top:1px solid var(--line); }
.run-col{ padding-block: 26px 8px; }
.run-col + .run-col{ border-inline-start:1px solid var(--line); padding-inline-start: clamp(28px, 5vw, 64px); margin-inline-start: calc(-1 * clamp(28px, 5vw, 64px)); }
.run-h{
  margin:0 0 6px; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800;
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); line-height:1.5; color: var(--accent);
}
.run-list{ margin:0; }
.run-list > div{ padding-block: 16px 18px; border-top:1px solid var(--line); }
.run-list > div:first-child{ border-top:0; }
.run-list dt{
  font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; color: var(--fg);
  font-size:1.08rem; line-height:1.6;
}
.run-list dd{ margin:3px 0 0; font-size:.95rem; line-height:1.9; color: var(--fg-soft); max-width: 30em; }

.run-h-st{ margin-top: 54px; padding-top: 26px; border-top:1px solid var(--line); }
.st{ list-style:none; margin: 6px 0 0; padding:0; }
.st li{
  display:grid; grid-template-columns: 72px 1fr; gap: 0 18px; align-items:start;
  padding-block: 22px 24px; border-top:1px solid var(--line);
}
.st li:first-child{ border-top:0; }
.st-no{
  font-family:'Rubik', system-ui, sans-serif; font-weight:500; letter-spacing:-.03em;
  font-size: clamp(2.4rem, 2rem + 2vw, 3.6rem); line-height:.95; color: var(--accent);
  padding-top: .12em;
}
.st-b h4{
  margin:0 0 6px; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; color: var(--fg);
  font-size: clamp(1.15rem, 1.05rem + .7vw, 1.5rem); line-height:1.5;
}
.st-b p{ margin:0; font-size:.98rem; line-height:1.9; max-width: 34em; color: var(--fg-soft); }
.st-b a{ color: var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; font-weight:500; }
.st-b a:hover{ color: var(--pink-hover); }
/* the last stop is not a numbered station — it is the reason for the four */
.st-end{ background: linear-gradient(to left, rgba(var(--accent-rgb),.06), rgba(var(--accent-rgb),0) 70%); border-radius: 14px; margin-inline: -14px; padding-inline: 14px; }
.st-mark{ position:relative; height:1em; }
.st-mark::before{
  content:''; position:absolute; inset-inline-start: .55em; top:.34em;
  width:16px; height:16px; border-radius:50%; background: var(--accent);
  box-shadow: 0 0 0 5px rgba(var(--accent-rgb),.16);
}
@media (max-width: 700px){
  .run-grid{ grid-template-columns: 1fr; }
  .run-col + .run-col{ border-inline-start:0; padding-inline-start:0; margin-inline-start:0; border-top:1px solid var(--line); }
  .st li{ grid-template-columns: 52px 1fr; gap: 0 12px; }
  .st-end{ margin-inline:0; padding-inline:0; background:none; }
}

/* quiet arrivals for the ledger; rest = visible */
.ms-js .who-card:not(.in), .ms-js .run-col:not(.in), .ms-js .st li:not(.in){ opacity:0; transform: translateY(10px); }
.ms-js .who-card.in, .ms-js .run-col.in, .ms-js .st li.in{ animation: rise .55s var(--out) both; }
@keyframes rise{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform:none; } }
.ms-js .who-card:nth-child(2).in, .ms-js .run-col:nth-child(2).in{ animation-delay:.08s; }

/* ————————————————————————————————————————————————————————————
   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{ color: var(--accent); }
.sib-list a:hover b{ color: var(--accent); }

/* course.css scopes some rules to main.track; these siblings are plain here */
.ms .crumb{ margin-top: 26px; }