/* Lavender hero — scroll-driven frame sequence.
   Geometry reference: the design frame is 1672 x 941 (16:9).
   Every size is expressed in reference pixels and scaled by the single
   unit --u, so the proportions hold at any viewport width. */

body.lav-home{
  /* One unit for the whole composition. It must follow BOTH axes: scaling by
     width alone grows the type while a short viewport takes away the room for
     it, which is what made the blocks collide above 16:9. */
  --u: min(calc(100vw / 1672), calc(100svh / 941));
  --ink: #4a3a6b;                   /* nav / body ink */
  --ink-soft: #6a5a94;
  --ink-script: #5e4c8c;            /* measured from the source frame */
  --plum: #5a2d91;                  /* primary button */
  --line: rgba(106, 79, 158, .42);
  background: #efeafb;
}

/* Two inherited rules silently kill position:sticky, so both are relaxed on
   this page: styles.css sets main{overflow:hidden} and mobile.css sets
   html,body{overflow-x:hidden}. Each turns its element into a scroll
   container. overflow-x:clip keeps the horizontal clipping without one. */
html:has(body.lav-home), body.lav-home{ overflow-x: clip !important; overflow-y: visible !important; }
body.lav-home main{ overflow-x: clip; overflow-y: visible; }

/* the legacy dark hero stays in the DOM (app.js reads its nodes) but is hidden */
body.lav-home .hero{ display: none !important; }


/* the reveal edge leans with the rising baseline, so the stroke reads as
   laid down by a pen rather than wiped in — and it waits until the band is
   actually on screen */
@keyframes pe-write{
  from{ clip-path: polygon(-45% 0%, -5% 0%, 7% 100%, -45% 100%); }
  to  { clip-path: polygon(-45% 0%, 118% 0%, 130% 100%, -45% 100%); }
}
/* The heart is drawn, not dropped in. Everything else on this line is laid
   down by a pen, so a heart that scaled up out of nothing read as a sticker
   stuck on the end — the author's words: it just pops out. The artwork is
   the same traced outline as before; what moves is a mask, a fat stroke
   running along the heart's centreline (skeletonised from that very
   artwork, so it cannot drift off it). pathLength="1" lets the dash work in
   fractions instead of a magic number. The stroke starts at the valley
   between the lobes, goes up and over the left lobe, down to the point, then
   up the right flank and over the right lobe — the way it is written by
   hand. */
@keyframes pe-heart-draw{ to{ stroke-dashoffset: 0; } }
.pe-sign .pe-ink{ opacity: 0; }
.pe-sign.is-in .pe-ink{ opacity: 1; }
/* Tempo taken off the reference clip rather than guessed: counting ink per
   frame, it starts writing at 0.6s, finishes "than judging" at 4.1s and
   lands the heart at 4.9s. The old timings ran the whole signature in 3.0s,
   which the author read as rushed. These keep the clip's proportions —
   short first line, long second, quick heart — and finish at 4.3s. */
.pe-sign.is-in .pe-ink--1{ animation: pe-write 1.15s cubic-bezier(.42,0,.35,1) .15s both; }
.pe-sign.is-in .pe-ink--2{ animation: pe-write 2.20s cubic-bezier(.38,0,.4,1) 1.20s both; }
.pe-heart{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pe-heart-draw{ stroke-dasharray: 1; stroke-dashoffset: 1; }
.pe-sign.is-in .pe-heart-draw{ animation: pe-heart-draw .95s cubic-bezier(.33,0,.3,1) 3.35s both; }
@media (prefers-reduced-motion: reduce){
  .pe-sign .pe-ink{ opacity: 1; }
  .pe-sign.is-in .pe-ink{ animation: none; clip-path: none; transform: none; }
  .pe-heart-draw{ animation: none !important; stroke-dashoffset: 0; }
}

/* ───────────────────────── header ───────────────────────── */
body.lav-home .topbar{
  position: fixed; inset: 0 0 auto 0; z-index: 9000;
  display: flex; align-items: center; gap: calc(28 * var(--u));
  height: calc(110 * var(--u));
  padding: 0 calc(72 * var(--u));
  background: transparent !important; border: 0 !important;
  box-shadow: none !important; backdrop-filter: none !important;
}
body.lav-home .topbar::after{ content: none; }

/* transparent over the hero, solid once the page scrolls past it */
body.lav-home .topbar.is-solid{
  background: rgba(250,248,255,.93) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 calc(8 * var(--u)) calc(28 * var(--u)) rgba(86,65,145,.06) !important;
  border-bottom: 1px solid rgba(111,75,195,.13) !important;
}

/* the hero sits under the fixed header by design; everything after it must not */
/* scroll-padding must sit on the scroll container (html), not on body */
html:has(body.lav-home){ scroll-padding-top: calc(100vw / 1672 * 128); }
/* The page below the hero rises over its tail as one sheet. The criteria
   band held that job for a day; it triplicated the module grid and the
   Judge Desk, so the lecture section has it back. */
/* every section below the hero, not just the first: the plate is pinned
   and painted at z-index 1, so a section left at z-index auto shows it
   through. The band used to cover that gap by being tall enough; without
   it #modules was see-through for its first 137px. */
body.lav-home main > section:not(.lav-scene){ position: relative; z-index: 4; }
body.lav-home #lectures{
  margin-top: -70svh;                        /* rise over the pinned scene */
  padding-top: calc(78 * var(--u));
  border-radius: calc(44 * var(--u)) calc(44 * var(--u)) 0 0;
  box-shadow: 0 calc(-24 * var(--u)) calc(70 * var(--u)) rgba(76, 58, 132, .14);
}

body.lav-home .brand{
  display: flex; flex-direction: column; align-items: center;
  gap: calc(3 * var(--u)); text-decoration: none; color: var(--ink);
  margin-right: calc(46 * var(--u));
}
body.lav-home .brand .brand-mark{ display: none; }
body.lav-home .brand > span{ display: flex; flex-direction: column; align-items: center; }
body.lav-home .brand strong{
  font: 500 calc(21 * var(--u))/1 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .13em; text-transform: uppercase; color: #3d2f5c;
}
body.lav-home .brand small{
  font: 500 calc(12.5 * var(--u))/1 'Manrope', system-ui, sans-serif;
  letter-spacing: .42em; text-transform: uppercase; color: #6a5a94;
  margin-top: calc(7 * var(--u)); padding-left: .42em;
}
/* This asked for 'Ms Madi' and 'Allura', neither of which this site loads,
   so it fell through to the browser's generic cursive — and a system
   cursive at 12px is the squiggle it looked like. Cormorant Garamond is
   already loaded and is the brand serif; italic at a readable size says
   the same thing and can actually be read. The hero already carries the
   author's real handwriting, so a second script face here only competed
   with it. */
body.lav-home .brand::after{
  content: 'by K. Kostrikova & S. Sova';
  font: italic 500 calc(17 * var(--u))/1.2 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .01em;
  color: #5f5187; margin-top: calc(7 * var(--u));
}

body.lav-home .topbar > *{ flex: 0 0 auto; }
body.lav-home .topnav{
  display: flex; align-items: center; gap: calc(34 * var(--u));
  margin-right: auto;
}
body.lav-home .topnav a{
  font: 500 calc(15 * var(--u))/1 'Manrope', system-ui, sans-serif;
  /* dark enough to clear WCAG AA over the veiled bouquet; mobile.css sets
     this colour with !important, so this rule has to match its weight */
  color: #382a55 !important; text-decoration: none; white-space: nowrap;
  transition: color .18s ease;
}
body.lav-home .topnav a:hover{ color: var(--plum); }

body.lav-home .topbar .ghost-btn{
  order: 1;
  font: 500 calc(14 * var(--u))/1 'Manrope', system-ui, sans-serif;
  color: #382a55 !important; background: none !important; border: 0 !important;
  padding: 0 !important; box-shadow: none !important; border-radius: 0;
  text-decoration: none !important; white-space: nowrap; cursor: pointer;
  transition: color .18s ease;
}
body.lav-home .topbar .ghost-btn:hover{ color: var(--plum); }
body.lav-home .topbar #accountLink{
  order: 2; margin-left: calc(10 * var(--u));
  display: inline-flex; align-items: center; gap: calc(12 * var(--u));
  padding: calc(13 * var(--u)) calc(26 * var(--u));
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--ink); font-weight: 600; font-size: calc(15 * var(--u));
  background: rgba(255,255,255,.28) !important;
  border: 1px solid var(--line) !important;
  padding: calc(13 * var(--u)) calc(26 * var(--u)) !important;
  backdrop-filter: blur(6px) !important;
}
body.lav-home .topbar #accountLink::after{
  content: ''; width: calc(15 * var(--u)); height: calc(15 * var(--u));
  background: currentColor; opacity: .85;
  -webkit-mask: var(--user-icon) center/contain no-repeat;
          mask: var(--user-icon) center/contain no-repeat;
}
body.lav-home .topbar #accountLink:hover{
  border-color: var(--plum); color: var(--plum); background: rgba(255,255,255,.55);
}
body.lav-home{
  --user-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");
}

/* ───────────────────────── scene ───────────────────────── */
/* Two designs met here. The lavender field with the signature centred on
   it is the one the school is recognised by, so it is the hero again —
   the studio plates only ever read as an advert for a hall to rent. What
   the typographic pass earned is the criteria panel, which says what a
   judge actually scores; it keeps its place directly under the hero,
   where the manifesto band used to be. The calligraphy has moved into the
   hero, so the band has the panel instead of repeating itself. */
.lav-scene{ position: relative; height: calc(100svh + 70svh); background: #efeafb; }

.lav-bg{
  position: sticky; top: 0; height: 100svh; overflow: hidden; z-index: 1;
  pointer-events: none; background: #efeafb;
}
.lav-bg{ --focus: 50; }          /* horizontal focus of the cover crop, in % */
.lav-bg img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--focus, 50%) center;
  transform: scale(var(--lav-zoom, 1)); transform-origin: 58% 62%;
}
/* the header sits on the plate, so the top of it is lifted toward white */
.lav-bg::after{
  content: ''; position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  height: 22svh; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(247,244,255,.82) 0%, rgba(247,244,255,.46) 46%, rgba(247,244,255,0) 100%);
}

.lav-first{
  position: relative; z-index: 2;
  height: 100svh; margin-top: -100svh;
}
/* depth: the copy leaves faster than the field behind it, which drifts in
   slowly. Both values are written by the scroll handler. */
.lav-copy{ will-change: transform, opacity; }

/* ───────────────────────── petals ───────────────────────── */
/* The petals used to live inside the hero. They drift over the whole page
   now — the author wanted them to keep falling as she scrolls — so the
   layer is fixed to the viewport, above the section backgrounds and below
   anything you can click. */
.lav-petals{
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  overflow: hidden;
}
.lav-petal{
  position: absolute; top: 0; left: 0;
  /* A real petal, not a blob: the shape comes from a mask so the colour
     stays in CSS. Round at the base, drawn to a point at the tip, with the
     slight asymmetry a lavender floret actually has. */
  -webkit-mask-image: var(--petal);
          mask-image: var(--petal);
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  background: linear-gradient(150deg,
              rgba(171,139,234,.98) 0%,
              rgba(126,88,196,.92) 52%,
              rgba(96,64,162,.80) 100%);
  --petal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 34'%3E%3Cpath d='M10 0.6c5.6 6.4 9.4 14.2 9.4 21.3 0 6.6-4.2 11.5-9.4 11.5S0.6 28.5 0.6 21.9C0.6 14.8 4.4 7 10 0.6z' fill='%23000'/%3E%3C/svg%3E");
  will-change: transform;
}
/* a second cut so they are not eight copies of one shape */
.lav-petal.two{
  --petal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 34'%3E%3Cpath d='M12.4 0.8c3.4 7.4 5.2 15 3.9 21.6-1.2 6.3-5.6 10.6-10.3 9.8C1.3 31.4-1 26 0.6 19.8 2.3 13.2 7 6 12.4 0.8z' fill='%23000'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){ .lav-petals{ display: none; } }

/* ─────────────────────── hero copy ─────────────────────── */
/* Measured on the plate rather than guessed: busyness climbs steadily
   left to right — 0.031 across x 18-50%, 0.16 at the bouquet on the right
   edge. Centred in the viewport the copy put its own right edge at ~72%,
   so the heart of the signature sat on the flowers while the left quarter
   stayed empty. The block centres on ~35% instead: the quiet band holds
   the type and the bouquet becomes the frame on its right. */
.lav-copy{
  height: 100svh; box-sizing: border-box;
  padding: clamp(92px, 12vh, 150px) clamp(20px, 5vw, 64px) clamp(78px, 11vh, 120px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  transform: translateY(var(--lav-shift, 0px));
}

/* the signature is the headline: the author's own hand, vectorised into
   three layers that share one viewBox */
.pe-sign{
  position: relative; display: block; margin: 0;
  width: min(640px, 76vw); aspect-ratio: 648 / 219;
}
.pe-ink{
  position: absolute; inset: 0; display: block;
  background: center/100% 100% no-repeat;
}
.pe-ink--1{ background-image: url('assets/hero/headline-line1.svg?v=20260915-sign1'); }
.pe-ink--2{ background-image: url('assets/hero/headline-line2.svg?v=20260915-sign1'); }

.lav-stack{ display: flex; flex-direction: column; align-items: center; }
.lav-eyebrow{
  margin: clamp(10px, 1.6vh, 20px) 0 0;
  font: 600 clamp(11px, .8vw, 13px)/1.5 'Manrope', system-ui, sans-serif;
  letter-spacing: .26em; text-transform: uppercase;
  color: #4f3aa8 !important;
}
.lav-rule{
  width: clamp(44px, 4vw, 62px); height: 1px; border: 0;
  margin: clamp(18px, 2.4vh, 28px) 0 0;
  background: rgba(70,52,110,.34);
}
.lav-lead{
  margin: clamp(20px, 2.6vh, 30px) 0 0;
  max-width: 34ch;
  font: 400 clamp(15px, 1.15vw, 19px)/1.6 'Manrope', system-ui, sans-serif;
  color: #2b2451 !important;
}
.lav-actions{
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(12px, 1.4vw, 18px);
  margin-top: clamp(26px, 3.4vh, 40px);
}
.lav-btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 clamp(22px, 2vw, 32px); border-radius: 999px;
  font: 600 clamp(14px, 1vw, 16px)/1 'Manrope', system-ui, sans-serif;
  text-decoration: none; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease,
              background .18s ease, border-color .18s ease;
}
.lav-btn::after{ content: '→'; font-weight: 400; }
.lav-btn--primary{
  background: #5a43b4; color: #fff !important; border: 1px solid #5a43b4;
  box-shadow: 0 10px 26px rgba(74,32,124,.22);
}
.lav-btn--primary:hover{
  background: #4f3aa8; border-color: #4f3aa8; transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(74,32,124,.28);
}
.lav-btn--ghost{
  background: rgba(255,255,255,.72); color: #3a2a63 !important;
  border: 1px solid rgba(88,66,140,.34); backdrop-filter: blur(6px);
}
.lav-btn--ghost:hover{
  background: #fff; border-color: #5a2d91; transform: translateY(-1px);
}

/* ───────────────────── scroll indicator ───────────────────── */
.lav-scroll{
  position: absolute; left: 50%; bottom: calc(44 * var(--u)); transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(14 * var(--u)); color: var(--ink-soft); text-decoration: none;
}
.lav-scroll i{
  width: calc(26 * var(--u)); height: calc(42 * var(--u));
  border: 1px solid var(--line); border-radius: 999px; position: relative;
}
.lav-scroll i::after{
  content: ''; position: absolute; left: 50%; top: calc(9 * var(--u));
  width: calc(2 * var(--u)); height: calc(8 * var(--u));
  margin-left: calc(-1 * var(--u));
  background: currentColor; border-radius: 999px;
  animation: lav-wheel 1.9s ease-in-out infinite;
}
.lav-scroll b{
  font: 500 calc(11 * var(--u))/1 'Manrope', system-ui, sans-serif;
  letter-spacing: .28em; text-transform: uppercase; padding-left: .28em;
}
.lav-scroll s{ text-decoration: none; font-size: calc(13 * var(--u)); line-height: 1; }
@keyframes lav-wheel{
  0%,100%{ transform: translateY(0); opacity: 1 }
  50%{ transform: translateY(calc(11 * var(--u))); opacity: .35 }
}
@media (prefers-reduced-motion: reduce){
  .lav-scroll i::after{ animation: none }
}

/* ───────────────────────── narrow ───────────────────────── */
@media (max-width: 900px){
  /* The phone reference is the phone, not the desktop frame: with a 900px
     reference --u came out at 0.43 on a 390px screen, so every calc() below
     rendered at less than half its intended size — the wordmark's second
     line measured 5.4px. Reference 390 makes these numbers real pixels. */
  /* follow both axes and cap, or a 768px tablet lands on this branch with
     --u near 2 and the scroll hint drives straight through the buttons */
  body.lav-home{ --u: min(calc(100vw / 390), calc(100svh / 780), 1.3px); }
  .lav-scroll{ bottom: 3.4%; }

  /* mobile.css sets flex-wrap:wrap on .topbar, which pushed the language
     switch onto a second line under a bar of fixed height */
  body.lav-home .topbar{
    height: calc(64 * var(--u)); padding: 0 calc(16 * var(--u));
    gap: calc(8 * var(--u)); flex-wrap: nowrap !important;
  }
  body.lav-home .topnav{ display: none; }
  body.lav-home .topbar .ghost-btn:not(#accountLink){ display: none !important; }
  body.lav-home .brand{ margin-right: auto; gap: calc(2 * var(--u)); }
  body.lav-home .brand strong{ font-size: calc(14 * var(--u)); letter-spacing: .10em; }
  body.lav-home .brand small{ display: block !important; font-size: calc(8 * var(--u));
                              letter-spacing: .3em; margin-top: calc(3 * var(--u)); }
  body.lav-home .brand::after{ font-size: calc(13 * var(--u)); margin-top: calc(3 * var(--u)); }
  /* the three-line lockup plus the pill plus the switch do not fit across a
     phone, so the byline drops and the wordmark tightens */
  @media (max-width: 560px){
    body.lav-home .brand::after{ display: none; }
    body.lav-home .brand strong{ font-size: calc(12.5 * var(--u)); letter-spacing: .07em; }
    body.lav-home .brand small{ font-size: calc(7 * var(--u)); letter-spacing: .22em; }
    body.lav-home .topbar #accountLink{
      font-size: calc(12 * var(--u)) !important;
      padding: calc(12 * var(--u)) calc(13 * var(--u)) !important;
    }
  }
  body.lav-home .topbar #accountLink{
    font-size: calc(13 * var(--u)) !important;
    padding: calc(13 * var(--u)) calc(16 * var(--u)) !important;
    min-height: calc(44 * var(--u));
    gap: calc(8 * var(--u));
  }
  body.lav-home .topbar #accountLink::after{ width: calc(13 * var(--u)); height: calc(13 * var(--u)); }
  /* 44px is the smallest comfortable touch target */
  body.lav-home .topbar .pe-lang{ margin-left: calc(8 * var(--u)); gap: calc(4 * var(--u)); }
  body.lav-home .topbar .pe-lang button{
    padding: calc(14 * var(--u)) calc(10 * var(--u)) !important;
    font-size: calc(14 * var(--u)) !important;
    min-height: calc(44 * var(--u));
  }

  html:has(body.lav-home){ scroll-padding-top: calc(100vw / 390 * 72); }
  body.lav-home #lectures{
    margin-top: -70svh;
    padding-top: calc(52 * var(--u));
    border-radius: calc(26 * var(--u)) calc(26 * var(--u)) 0 0;
  }
  .lav-scene{ height: calc(100svh + 60svh); }
  .lav-bg{ --focus: 38; }   /* the bouquet holds the right edge of a 16:9
                               frame; a portrait crop keeps the clear side */
  .lav-bg::after{ height: 18svh; }
  /* the band rises over the bottom tenth of the pinned hero, so the copy
     is centred in what is actually visible, not in the full 100svh */
  .lav-copy{
    padding: calc(76 * var(--u)) calc(18 * var(--u)) calc(122 * var(--u));
  }
  /* the hint would sit behind the band */
  .lav-scroll{ display: none; }
  .pe-sign{ width: 84vw; }
  .lav-eyebrow{ font-size: 10.5px; letter-spacing: .18em; }
  .lav-rule{ margin-top: 16px; }
  .lav-lead{ font-size: 15.5px; margin-top: 18px; max-width: 30ch; }
  .lav-actions{ gap: 9px; margin-top: 24px; flex-wrap: nowrap; width: 100%; }
  .lav-btn{
    flex: 1 1 0; min-width: 0; justify-content: center;
    min-height: 48px; padding: 0 12px; font-size: 14px; gap: 8px;
  }
  .lav-scroll{ gap: calc(8 * var(--u)); }
  .lav-scroll b{ font-size: calc(10 * var(--u)); letter-spacing: .22em; }
  .lav-scroll i{ width: calc(22 * var(--u)); height: calc(34 * var(--u)); }
  .lav-scroll i::after{ top: calc(7 * var(--u)); width: calc(2 * var(--u)); height: calc(6 * var(--u));
                        margin-left: calc(-1 * var(--u)); }
  .lav-scroll s{ font-size: calc(11 * var(--u)); }
}
@media (prefers-reduced-motion: reduce){
  .lav-scene{ height: 100svh; }
}

/* ── header overrides over pe-buttons.css ──────────────────
   pe-buttons.css turns .ghost-btn into a pill everywhere, which is right on
   every other page but wrong here: the design calls for flat text links over
   the photograph. Its selector carries an id inside :not(), so these rules
   have to out-specify that, not merely come later. */
@media (min-width: 901px){
/* the shift into the quiet band; a phone crop has no room for it */
body.lav-home .lav-copy{ padding-right: clamp(180px, 30vw, 560px); }
body.lav-home .topbar .ghost-btn:not(#accountLink){
  display: inline !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  transform: none !important;
}
body.lav-home .topbar .ghost-btn:not(#accountLink):hover{
  background: none !important;
  color: var(--plum) !important;
  transform: none !important;
  box-shadow: none !important;
}
}
/* the switch sits last in the bar, as in the design */
body.lav-home .topbar .pe-lang{ order: 3; margin-left: calc(22 * var(--u)); }

/* ── lecture card ─────────────────────────────────────────
   styles.css stretches this card to the height of the copy column and pins
   its text to the bottom. That read fine while the column was short; the
   counters made it tall and left the card two-thirds empty. It now hugs its
   own content and sits centred against the copy. */
/* the card floated in the middle of its column while the copy beside it
   filled the section; aligning it to the top gives the two columns one
   shared shoulder */
body.lav-home .lecture-hub{ align-items: start; }
/* the lecture card is one of three equal cards in the row now, so it takes
   their box: align-self:start and a padding of its own were what made it
   the section's right column, and both now make it the odd one out */
body.lav-home .lecture-launch{ min-height: 0 !important; }
@media (max-width: 900px){
  body.lav-home .lecture-hub{ align-items: stretch; }
}

/* course progress at the head of the module grid: the old ring lives in the
   legacy hero, which this redesign hides */
body .course-bar{
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 0 22px;
  padding: 18px 22px;
  border: 1px solid #ded5f6;
  border-radius: 20px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 30px rgba(76,58,132,.07);
}
body .course-bar[hidden]{ display: none !important; }
body .course-bar-copy{ flex: 1 1 300px; min-width: 0; }
body .course-bar-copy strong{
  display: block; margin-bottom: 10px;
  font: 700 15px/1.2 'Manrope', system-ui, sans-serif;
  color: #3b2d5e;
}
body .course-bar-track{
  height: 8px; border-radius: 99px; background: #e9e2f7; overflow: hidden;
}
body .course-bar-track i{
  display: block; height: 100%; width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #8b5cf6, #5a2d91);
  transition: width .5s cubic-bezier(.2,.8,.3,1);
}
body .progress-continue{ flex: 0 0 auto; }
body .progress-continue.hidden{ display: none !important; }
@media (max-width: 620px){
  body .course-bar{ gap: 14px; }
  body .progress-continue{ width: 100%; justify-content: center; }
}

/* ── where the course actually lives ──
   Three doors in one row: the lecture course, the live lesson and the
   handbook. They were three different sizes before — the WeStudy card
   was the section's right column while these two sat below it — which
   read as a mistake rather than a hierarchy. Equal cards, and the
   section's copy takes the full width above them.

   The lesson and the handbook are behind the NDA and each hides itself
   when its address is blank in config.js; the lecture card is always
   there, changing its own text through the three states. */
body.lav-home .lecture-hub{ grid-template-columns: 1fr !important; }
body.lav-home .lecture-hub-copy{ max-width: 860px; }
body.lav-home .lecture-extras{
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  margin-top: clamp(22px, 3vh, 36px);
}
body.lav-home .lecture-extra{
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(120px, 13vw, 152px);
  padding: clamp(18px, 1.8vw, 24px);
  border: 1px solid #ded5f5; border-radius: 20px;
  background: rgba(255,255,255,.78); backdrop-filter: blur(10px);
  box-shadow: none;
  text-decoration: none; color: inherit;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
body.lav-home .lecture-extra:hover{
  transform: translateY(-3px); background: #fff;
  border-color: #b19cf0; box-shadow: 0 16px 38px rgba(76,58,132,.13);
}
body.lav-home .lecture-extra:focus-visible{ outline: 2px solid #7b5ce1; outline-offset: 3px; }
body.lav-home .lecture-extra-kicker{
  display: block; margin: 0;
  font: 600 clamp(10px, .78vw, 11.5px)/1.3 'Manrope', system-ui, sans-serif;
  letter-spacing: .18em; text-transform: uppercase; color: #6a48c4 !important;
}
body.lav-home .lecture-extra strong{
  display: block; margin: clamp(10px, 1.2vh, 14px) 0 0;
  font: 500 clamp(20px, 1.7vw, 26px)/1.2 'Cormorant Garamond', Georgia, serif;
  color: #2b2451 !important;
}
body.lav-home .lecture-extra strong::after{ content: ' ↗'; font-size: .62em; color: #8d69eb; }
@media (max-width: 850px){
  body.lav-home .lecture-extras{ grid-template-columns: 1fr; margin-top: 20px; }
  body.lav-home .lecture-extra{ min-height: 0; }
}
/* the handbook is a file, not a destination: it says "download" and it
   downloads, so the arrow that means "opens elsewhere" would be a lie */
body.lav-home .lecture-extra--file strong::after{ content: ' ↓'; }

/* ───────────── закриття сторінки: ритм секцій і два іспити ───────────── */
/* Measured down the page, the bands ran lilac, lilac, near-white, lilac, then
   three near-identical white-to-lilac blocks in a row — the author's "фони
   секцій трохи стрибають". These set one deliberate alternation instead:
   the photo plate opens lilac, then white and lilac take turns, and the two
   exams share a single lilac band so they read as one stage of the course.
   Loaded after premium-global.css, which is where the !important came from. */
body.lav-home .lecture-hub{ background: #ffffff !important; }
body.lav-home #modules{      background: linear-gradient(180deg,#f6f2fd,#f2edfb) !important; }
body.lav-home .desk{         background: #ffffff !important; }
/* one flat colour, not a gradient per block: two 180deg gradients stacked
   put a dark end against a light start and banded at the seam — the same
   jump this section is meant to remove */
body.lav-home #final,
body.lav-home #practical{    background: #f5f1fc !important; }
body.lav-home .course-complete{ background: #ffffff !important; }

/* the seam between the two exams is a hairline inside one band, not a wall */
body.lav-home #final{ border-bottom: 0 !important; }
body.lav-home #practical{ border-top: 1px solid rgba(111,75,195,.13) !important; }

/* Theory and practical were the same block twice: same round mark, same
   surface, same button label. They are two steps of one sequence — the
   completion block below them already calls itself 03 — so they are numbered
   and given marks of different shape and weight. Nothing here changes the
   palette or the type. */
body.lav-home #final .final-icon{
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #c9bbee !important;
}
body.lav-home #practical .final-icon{
  border-radius: 24px !important;
  background: #efe9fb !important;
  border: 1px solid #b3a0e4 !important;
}
/* A quiet step rule so the pair reads top-to-bottom as a progression. One
   hairline sitting close to the text, not a bar held away from it — at 2px
   and 20px it read as a border around the block rather than an accent on the
   words. The two exams differ by the rule's colour, so thinning it costs
   nothing: light lavender for step one, deeper for step two. */
body.lav-home #final .final-copy,
body.lav-home #practical .final-copy{ border-left: 1px solid #b9a4ea; padding-left: 14px; }
body.lav-home #practical .final-copy{ border-left-color: #7c5ad6; }