/* Easy Zaban IELTS — the course's own crimson, matching the video palette
   (--brand is the exact red of the lesson titles and scene bars).
   Overrides the platform tokens only; all layout comes from base.css. */
:root{
  --brand:#A31226; --brandDeep:#6E0B18; --accent:#C8922E; --accentInk:#8A6410; --onAccent:#fff;
  --cream:#FCFAF8; --sand:#F4E9EA; --ink:#1F1417; --line:#E6D8DA; --muted:#6B5A5D;
  --ov1:rgba(38,6,12,.62); --ov2:rgba(38,6,12,.86);
  --masc:#A31226; --fem:#8A6410;
  --tint:#FAF3F4;
}

/* lesson rows on the curriculum page (same component the English course uses) */
.lrows{ display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.lrow{ display:flex; align-items:center; gap:16px; background:#fff; border:1.5px solid var(--line);
  border-radius:14px; padding:14px 20px; text-decoration:none; color:var(--ink); }
.lrow.live{ border-color:var(--brand); box-shadow:0 2px 10px rgba(163,18,38,.10); }
.lrow.live:hover{ background:var(--tint); }
.lrow.soon{ opacity:.62; }
.lrow .ln{ font-weight:900; font-size:22px; color:var(--brand); min-width:34px; text-align:center; }
.lrow .lt{ flex:1; display:flex; flex-direction:column; gap:2px; }
.lrow .lt .es{ font-weight:800; font-size:17px; }
.lrow .lt small{ color:var(--muted); font-size:13px; }
.lrow .st{ flex-shrink:0; font-size:13px; font-weight:800; color:var(--brand);
  background:var(--sand); border-radius:999px; padding:5px 13px; }
.lrow.soon .st{ color:var(--muted); background:#F1EEEE; }

/* The hero and lesson headers carry the same London-dusk illustration as the
   homepage card, so the visitor lands on the picture they clicked. That art is
   PORTRAIT and these bands are wide, so `cover` + the platform's default
   `center` would crop to the river and lose the clock tower. Hold the crop
   near the skyline instead; on a narrow phone the band is taller relative to
   the image, so it eases back toward centre. */
.hero, .lhead{ background-position:50% 26%; }
@media (max-width:700px){ .hero, .lhead{ background-position:50% 34%; } }

/* Same lesson the homepage hero learned (v103, "the art was there, nobody
   could see it"): a flat dark wash over real artwork buries it. Tint only as
   heavy as the headline needs — a soft radial scrim behind the text block,
   a light linear wash elsewhere — and let text-shadow do the legibility work
   so the tower and the bus survive. */
.hero{ background-image:
    radial-gradient(ellipse 64% 76% at 50% 48%, rgba(38,6,12,.56), transparent 72%),
    linear-gradient(180deg, rgba(38,6,12,.26) 0%, rgba(38,6,12,.38) 54%, rgba(38,6,12,.78) 100%),
    var(--ubg,none); }
.hero h1{ text-shadow:0 2px 18px rgba(0,0,0,.75), 0 1px 3px rgba(0,0,0,.55); }
.hero p{ text-shadow:0 1px 12px rgba(0,0,0,.7); }
/* the lesson band is short and its type sits right — keep it a touch deeper
   there so the eyebrow and title never fight the skyline behind them */
.lhead{ background-image:
    linear-gradient(270deg, rgba(38,6,12,.80) 8%, rgba(38,6,12,.52) 58%, rgba(38,6,12,.30) 100%),
    var(--ubg,none); }
.lhead h1, .lhead p, .lhead .eb{ text-shadow:0 1px 12px rgba(0,0,0,.6); }

/* the trademark line — required on every page of this course, never shouty */
.tmline{ margin-top:34px; padding-top:16px; border-top:1px solid var(--line);
  color:var(--muted); font-size:12.5px; line-height:2; }