/* ————————————————————————————————————————————————————————————
   yael.css — the Yael course, on its own sheet.

   Loads AFTER course.css and keeps its chrome only. Plain paper.

   The idea: Arabic and Hebrew read the same way, right to left, so this page
   sets the two on one margin. The course's promise — every solution twice —
   is two words stacked on that edge; the course's contents are split by the
   language they reach you in; and the number a student needs is a board of
   destinations, because there is no single Yael score, only the one each
   institution asks for.
   ———————————————————————————————————————————————————————————— */

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

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

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

/* ——— section numerals ——— */
.ya-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;
}
.ya-no{ font-weight:500; font-size:.62em; color: var(--accent); letter-spacing:.5px; position:relative; top:-.08em; }
.ya-h2-s{ font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); }

/* ————————————————————————————————————————————————————————————
   THE TITLE — one exam, two names, one margin
   ———————————————————————————————————————————————————————————— */
.ya-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);
}
.ya-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:.3em; }
.h1-name{
  display:block; font-size: clamp(3.8rem, 2rem + 8.6vw, 8.6rem); line-height:1.12; letter-spacing:-.02em;
  color: var(--accent); margin-inline-start:-.03em; padding-top:.04em;
}
/* the Hebrew name: the exam's own letters, in the face that carries every
   Hebrew word on this site, flush on the same edge as the Arabic */
.h1-he{
  display:block; font-family:'Rubik', system-ui, sans-serif; font-weight:700; color: var(--fg);
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3.1rem); line-height:1.3; margin-top:.05em; letter-spacing:.01em;
}
.ya-intro{ padding-bottom: 10px; }
.ya-lede{ margin:0; font-size: clamp(1.05rem, 1rem + .5vw, 1.26rem); line-height:1.9; font-weight:400; color: var(--fg); max-width: 26em; }
.ya-lede b{ font-weight:600; color: var(--accent); }
.ya-facts{ list-style:none; margin: 20px 0 0; padding:0; display:grid; grid-template-columns: repeat(2, auto); gap: 10px 26px; width:fit-content; }
.ya-facts li{ display:flex; align-items:baseline; gap:8px; }
.ya-facts b{ font-family:'Rubik', system-ui, sans-serif; font-weight:500; font-size:1.5rem; line-height:1; color: var(--fg); letter-spacing:-.02em; min-width:2ch; text-align:end; }
.ya-facts span{ font-size:.92rem; color: var(--fg-soft); }
.ya-acts{ display:flex; flex-wrap:wrap; align-items:center; gap: 12px 22px; margin-top: 26px; }
.ya-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;
}
.ya-link:hover{ color: var(--accent); }
@media (prefers-reduced-motion: no-preference){
  .h1-name{ animation: rise .7s var(--out) both; }
  .h1-he{ animation: rise .6s .3s var(--out) both; }
  .ya-intro{ animation: fade-in .6s .6s ease both; }
}
@keyframes rise{ from{ opacity:0; transform: translateY(12px); } to{ opacity:1; transform:none; } }
@keyframes fade-in{ from{ opacity:0; } }
@media (max-width: 760px){
  .ya-head{ grid-template-columns: 1fr; gap: 16px; padding-block: 16px 34px; align-items:start; }
}

/* ————————————————————————————————————————————————————————————
   WHO — the rule, quoted
   ———————————————————————————————————————————————————————————— */
.who{ margin-block: 64px 0; }
.who-grid{ display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px clamp(32px, 5vw, 72px); align-items:start; }
.who-lead{ margin:0; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; color: var(--fg); font-size: clamp(1.25rem, 1.05rem + 1vw, 1.8rem); line-height:1.6; max-width: 16em; }
.who-lead b{ color: var(--accent); font-weight:800; }
.who-rule{ border-inline-start: 2px solid var(--accent); padding-inline-start: clamp(16px, 2.5vw, 26px); }
.who-q{ margin:0 0 6px; font-size:.9rem; color: var(--fg-mute); }
.who-a{ margin:0; font-size: clamp(1.05rem, 1rem + .4vw, 1.2rem); line-height:1.9; color: var(--fg); }
.ya-js .who-rule:not(.in){ opacity:0; transform: translateY(8px); }
.ya-js .who-rule.in{ animation: rise .55s var(--out) both; }
@media (max-width: 720px){ .who-grid{ grid-template-columns: 1fr; } }

/* ————————————————————————————————————————————————————————————
   TWICE — two words, one edge
   ———————————————————————————————————————————————————————————— */
.twice{ margin-block: 84px 0; }
.tw-stack{ border-top: 1px solid var(--fg); }
.tw-row{
  display:grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: 0 clamp(24px, 4vw, 56px);
  align-items:baseline; padding-block: 22px 26px; border-bottom: 1px solid var(--line);
}
.tw-word{
  margin:0; line-height:1; letter-spacing:-.02em;
  font-size: clamp(3rem, 2rem + 6vw, 7rem);
}
.tw-ar .tw-word{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; color: var(--accent); }
.tw-he .tw-word{ font-family:'Rubik', system-ui, sans-serif; font-weight:700; color: var(--fg); }
.tw-why{ margin:0; font-size: clamp(1rem, .96rem + .35vw, 1.14rem); line-height:1.9; color: var(--fg-soft); max-width: 26em; }
.tw-foot{ margin: 18px 0 0; font-size:.95rem; line-height:1.9; color: var(--fg-mute); }
.ya-js .tw-stack:not(.in) .tw-row{ opacity:0; transform: translateY(10px); }
.ya-js .tw-stack.in .tw-row{ animation: rise .6s var(--out) both; }
.ya-js .tw-stack.in .tw-he{ animation-delay: .3s; }
@media (max-width: 640px){
  .tw-row{ grid-template-columns: 1fr; gap: 6px; }
}

/* ————————————————————————————————————————————————————————————
   THE SPLIT — two columns, some rows span both
   ———————————————————————————————————————————————————————————— */
.split{ margin-block: 84px 0; }
.sp-grid{ display:grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; gap: 0 clamp(24px, 4vw, 56px); }
/* each item is pinned to its language's column; the grid packs the rows */
.sp-ar{ grid-column: 1; }
.sp-he{ grid-column: 2; }
.sp-h{
  margin:0; padding-bottom: 12px; border-bottom: 2px solid var(--fg);
  font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:800; font-size: clamp(1.15rem, 1.05rem + .6vw, 1.45rem); line-height:1.4; color: var(--fg);
}
.sp-h-ar{ color: var(--accent); border-color: var(--accent); }
.sp-h-he span[lang="he"]{ font-family:'Rubik', system-ui, sans-serif; font-weight:700; }
.sp-h-sub{ display:block; font-family:'Readex Pro', sans-serif; font-weight:300; font-size:.82rem; color: var(--fg-mute); line-height:1.6; }
.sp-item{ padding-block: 18px 20px; border-bottom: 1px solid var(--line); min-width:0; }
.sp-item b{ display:block; font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size: clamp(1.02rem, .98rem + .35vw, 1.2rem); line-height:1.6; color: var(--fg); }
.sp-item span{ display:block; margin-top:4px; font-size:.93rem; line-height:1.85; color: var(--fg-soft); max-width: 30em; }
.sp-item span .latin, .sp-item b .latin{ display:inline; font-weight:500; }
.sp-both{ grid-column: 1 / -1; position:relative; }
.sp-both span{ max-width: 44em; }
/* a spanning row carries a small mark at its start: both languages at once */
.sp-both b::before{ content:''; display:inline-block; width:10px; height:10px; border-radius:50%; margin-inline-end:10px; vertical-align:middle;
  background: linear-gradient(to left, var(--accent) 50%, var(--fg) 50%); }
.ya-js .sp-grid:not(.in) .sp-item{ opacity:0; }
.ya-js .sp-grid.in .sp-item{ animation: fade-in .5s ease both; }
.ya-js .sp-grid.in .sp-item:nth-child(4){ animation-delay:.08s; }
.ya-js .sp-grid.in .sp-item:nth-child(5), .ya-js .sp-grid.in .sp-item:nth-child(6){ animation-delay:.16s; }
.ya-js .sp-grid.in .sp-item:nth-child(7), .ya-js .sp-grid.in .sp-item:nth-child(8){ animation-delay:.24s; }
.ya-js .sp-grid.in .sp-item:nth-child(9), .ya-js .sp-grid.in .sp-item:nth-child(10){ animation-delay:.32s; }
@media (max-width: 640px){
  .sp-grid{ grid-template-columns: 1fr; }
  .sp-h-he{ margin-top: 26px; }
  /* one column: the Arabic rows, then the Hebrew rows, each under its heading */
  .sp-ar, .sp-he{ grid-column: 1; }
  .sp-both{ order: 0; } .sp-h-ar{ order: 1; } .sp-ar{ order: 2; } .sp-h-he{ order: 3; } .sp-he{ order: 4; }
}

/* ————————————————————————————————————————————————————————————
   THE BOARD — destinations and their numbers
   ———————————————————————————————————————————————————————————— */
.board{ margin-block: 84px 0; }
.bd-lead{ margin:0 0 26px; font-size: clamp(1rem, .96rem + .35vw, 1.14rem); line-height:1.9; color: var(--fg-soft); max-width: 38em; }
.bd-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(28px, 5vw, 72px); border-top: 1px solid var(--fg); }
.bd-row{ display:flex; align-items:baseline; gap: 18px; padding-block: 12px 13px; border-bottom: 1px solid var(--line); min-width:0; }
.bd-n{
  flex:none; min-width: 3.2ch; text-align:end;
  font-family:'Rubik', system-ui, sans-serif; font-weight:500; letter-spacing:-.03em;
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.5rem); line-height:1; color: var(--fg);
}
.bd-w{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size: 1.15rem; color: var(--fg-mute); letter-spacing:0; }
.bd-name{ font-family:'Baloo Bhaijaan 2', sans-serif; font-weight:700; font-size:1.02rem; line-height:1.5; color: var(--fg); min-width:0; }
.bd-note{ display:block; font-family:'Readex Pro', sans-serif; font-style:normal; font-weight:300; font-size:.84rem; line-height:1.6; color: var(--fg-mute); }
.bd-note .latin{ font-weight:500; }
.bd-row:nth-child(-n+2) .bd-n{ color: var(--accent); }
.bd-foot{ margin: 22px 0 0; font-size:.9rem; line-height:1.85; color: var(--fg-mute); }
.ya-js .bd-list:not(.in) .bd-row{ opacity:0; transform: translateY(6px); }
.ya-js .bd-list.in .bd-row{ animation: rise .45s var(--out) both; animation-delay: var(--d); }
@media (max-width: 760px){
  .bd-list{ grid-template-columns: 1fr; }
}

/* ————————————————————————————————————————————————————————————
   THE ASK — pink ground, white type
   ———————————————————————————————————————————————————————————— */
.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); }