/* ============================================================
   LEARN SYRIAC — Manuscript & Gold, refined
   Syriac throughout is set in Serto Antioch Bible (Beth Mardutho, 2020) — the
  font used to publish the Antioch Bible Syriac-English New Testament. Its ~70
  private GSUB features and 90 GPOS lookups position vowels and dots; they are
  chained from calt/rlig, so browsers apply them with no font-feature-settings
  (verified: forcing all of them changes rendering by 0px).
   Single committed visual world: wine, gold, cream. No dark-mode
   inversion — the register is liturgical, not a UI chrome.
   ============================================================ */

@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url(/wp-content/uploads/learnsyriac/EBGaramond.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 700;font-display:swap;src:url(/wp-content/uploads/learnsyriac/EBGaramond-Italic.woff2) format('woff2')}
@font-face{font-family:'Serto Antioch Bible';font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0700-074F,U+200C-200F;src:url(/wp-content/uploads/learnsyriac/SertoAntiochBible.woff2) format('woff2')}

.ls-root{
  /* Sampled straight out of the official logo: #5B010B and #B79354.
     Everything else is derived from those two so the page and the mark
     are printed in the same ink. */
  --wine:      #5B010B;
  --wine-dp:   #3D060E;
  --wine-dk:   #26040A;
  /* Neutrals biased toward the accent, never a flat grey */
  --cream:     #FBF6EE;
  --cream-2:   #F3EADB;
  --ink:       #2A0E11;
  --stone:     #6E585A;
  --stone-lt:  rgba(251,246,238,.62);
  /* Metal */
  --gold:      #B79354;
  --gold-lt:   #D9BC85;
  --gold-dk:   #85662F;

  --serif: "EB Garamond", "Palatino Linotype", Georgia, serif;
  --sans:  ui-sans-serif, "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
  --syr:   "Serto Antioch Bible", serif;

  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);

  --fg: var(--ink);
  --fg-dim: var(--stone);
  --hair: rgba(36,16,22,.16);
  --dot: var(--gold-dk);
}

.ls-root *, .ls-root *::before, .ls-root *::after{box-sizing:border-box}
.ls-root{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
.ls-root{
  margin:0; background:var(--cream); color:var(--fg);
  font-family:var(--sans); font-size:16.5px; line-height:1.68;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.ls-root a{color:inherit; text-decoration:none}
.ls-root button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}
.ls-root :where(a, .ls-root button, .ls-root input, .ls-root summary):focus-visible{outline:2px solid var(--gold); outline-offset:3px}

.ls-root .wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut)}

/* ---------- colour contexts ---------- */
.ls-root .on-wine{
  background:var(--wine-dp); color:var(--cream);
  --fg:var(--cream); --fg-dim:var(--stone-lt);
  --hair:rgba(183,147,84,.26); --dot:var(--gold-lt);
}
.ls-root .on-cream{background:var(--cream)}
.ls-root .on-cream-2{background:var(--cream-2); --hair:rgba(36,16,22,.14)}

/* ---------- type primitives ---------- */
.ls-root h1, .ls-root h2, .ls-root h3, .ls-root h4{font-family:var(--serif); font-weight:400; margin:0; text-wrap:balance; letter-spacing:-.005em}
.ls-root h1{font-size:clamp(38px,4.4vw,62px); line-height:1.06}
.ls-root h2{font-size:clamp(31px,4.2vw,54px); line-height:1.1}
.ls-root h3{font-size:clamp(20px,2.2vw,27px); line-height:1.24}
.ls-root p{margin:0}

.ls-root .lead{
  font-family:var(--serif); font-size:clamp(18px,1.7vw,22px); line-height:1.6;
  color:var(--fg-dim);
}

.ls-root .label{
  font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold-dk);
  display:inline-flex; align-items:center; gap:14px; margin:0;
}
.ls-root .on-wine .label{color:var(--gold-lt)}

/* The scribal cluster as it is set on the title page: one point that the rule
   springs from, then two more toward the text. Drawn in CSS so it rides inside
   any label without extra markup — the element is only an anchor, all three
   points are shadows, so the group sits centred on the text's midline. */
.ls-root .label::before{
  content:""; flex:none; width:3px; height:3px; border-radius:50%;
  background:transparent; margin-inline-end:11px;
  box-shadow:-5px 0 0 var(--dot), 0 -3.6px 0 var(--dot), 0 3.6px 0 var(--dot);
}
/* Labels that carry the full ornament don't also carry the bare cluster. */
.ls-root .label-orn::before{display:none}
.ls-root .label-orn{gap:16px}

/* The full ornament, as it sits on the title page: a tapered rule running out
   from a triangle of points. Mirrored with .flip for the other side. */
/* The viewBox lives on the <symbol>, so the outer <svg> has no intrinsic ratio
   of its own — state it here or `height:auto` collapses to the 150px default. */
.ls-root .orn-mark{flex:none; width:54px; height:auto; aspect-ratio:106/26; fill:currentColor; color:var(--dot)}
.ls-root .orn-mark.flip{scale:-1 1}

.ls-root .sec{padding-block:clamp(72px,10vw,132px)}
.ls-root .sec-head{max-width:56rem; display:grid; gap:20px; justify-items:start}
.ls-root .sec-head.center{margin-inline:auto; justify-items:center; text-align:center}
.ls-root .sec-head .lead{max-width:44rem}

/* Standalone divider: the same ornament, mirrored, opening around a gap. */
.ls-root .orn{display:flex; align-items:center; justify-content:center; gap:26px; color:var(--dot)}
.ls-root .orn .orn-mark{width:clamp(72px,11vw,104px)}

/* ---------- buttons ---------- */
.ls-root .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; white-space:nowrap;
  border:1px solid transparent; transition:.4s var(--ease);
}
.ls-root .btn-gold{background:var(--gold); color:var(--wine-dk); border-color:var(--gold)}
.ls-root .btn-gold:hover{background:var(--gold-lt); border-color:var(--gold-lt)}
.ls-root .btn-ghost{border-color:rgba(227,203,142,.4); color:var(--cream)}
.ls-root .btn-ghost:hover{border-color:var(--gold-lt); color:var(--gold-lt)}
.ls-root .btn-ink{border-color:var(--hair); color:var(--ink)}
.ls-root .btn-ink:hover{background:var(--ink); border-color:var(--ink); color:var(--cream)}

/* ---------- announcement ---------- */
.ls-root .topbar{
  background:#1A0206; color:var(--gold-lt); text-align:center;
  font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  padding:11px 20px; position:relative; z-index:60;
}
.ls-root .topbar a{color:#fff; border-bottom:1px solid rgba(227,203,142,.55); padding-bottom:2px; margin-inline-start:12px}
.ls-root .topbar a:hover{color:var(--gold-lt)}

/* ---------- header ---------- */
/* Opaque, not translucent: the header sits above the hero in flow, so a
   see-through ground would show the cream body and swallow the reversed mark.
   Announcement, header and hero step from darkest to lightest into the page. */
.ls-root .hdr{
  position:sticky; top:0; z-index:50; background:var(--wine-dk);
  border-bottom:1px solid transparent; transition:border-color .5s var(--ease);
}
.ls-root .hdr.solid{border-bottom-color:rgba(183,147,84,.22)}
.ls-root .hdr-in{display:flex; align-items:center; justify-content:space-between; gap:28px; height:78px}

/* The official mark carries the wordmark already — nothing is set beside it.
   Reversed to cream and gold because every ground it sits on is wine. */
.ls-root .brand{display:flex; align-items:center; flex:none}
.ls-root .logo{display:block; width:auto; height:46px; transition:opacity .35s var(--ease)}
.ls-root .brand:hover .logo{opacity:.82}
.ls-root .ftr .logo{height:72px}

.ls-root .nav{display:flex; align-items:center; gap:clamp(18px,2.2vw,32px)}
.ls-root .nav a{
  font-family:var(--sans); font-size:11.5px; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(251,246,238,.76); position:relative; padding-block:6px; white-space:nowrap;
  transition:color .3s var(--ease);
}
.ls-root .nav a::after{content:""; position:absolute; inset-inline-start:0; bottom:0; height:1px; width:0; background:var(--gold-lt); transition:width .4s var(--ease)}
.ls-root .nav a:hover{color:#fff}
.ls-root .nav a:hover::after{width:100%}
.ls-root .nav a.current{color:var(--gold-lt)}
.ls-root .nav a.current::after{width:100%}

.ls-root .hdr-cta{display:flex; align-items:center; gap:20px; flex:none}
.ls-root .hdr-cta .btn{padding:12px 24px}
.ls-root .burger{display:none; width:40px; height:40px; place-items:center; color:var(--cream)}
.ls-root .burger span, .ls-root .burger span::before, .ls-root .burger span::after{display:block; width:21px; height:1px; background:currentColor}
.ls-root .burger span{position:relative}
.ls-root .burger span::before, .ls-root .burger span::after{content:""; position:absolute; inset-inline-start:0}
.ls-root .burger span::before{top:-6px}
.ls-root .burger span::after{top:6px}

.ls-root .mob{
  position:fixed; inset:0; z-index:70; background:var(--wine-dk); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;
  opacity:0; pointer-events:none; transition:opacity .45s var(--ease);
}
.ls-root .mob.open{opacity:1; pointer-events:auto}
.ls-root .mob a{font-family:var(--serif); font-size:32px; padding:10px 0}
.ls-root .mob a:hover{color:var(--gold-lt)}
.ls-root .mob .btn{margin-top:22px; font-size:12px}
.ls-root .mob .close{position:absolute; top:22px; inset-inline-end:22px; font-size:34px; line-height:1; color:var(--gold-lt)}

/* ============================================================
   HERO
   ============================================================ */
.ls-root .hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--wine-dp); color:var(--cream);
  --fg:var(--cream); --fg-dim:var(--stone-lt); --hair:rgba(183,147,84,.26); --dot:var(--gold-lt);
  padding-block:clamp(72px,11vw,128px);
}
/* Ground, in three layers behind the content:
   -3 the manuscript page and the wine wash, -2 the rising letters, -1 grain. */
.ls-root .hero::before{
  content:""; position:absolute; inset:0; z-index:-3;
  background:
    radial-gradient(120% 90% at 76% 4%, rgba(183,147,84,.20), transparent 56%),
    radial-gradient(90% 80% at 6% 100%, rgba(91,1,11,.88), transparent 62%),
    linear-gradient(160deg, #4C070F, #2E040A 58%, #230308);
}
.ls-root .hero-ms{
  position:absolute; inset:0; z-index:-3; pointer-events:none;
  background-image:url("/wp-content/uploads/learnsyriac/hero-manuscript-tile.jpg");
  background-size:auto clamp(150px,17vw,230px);
  background-repeat:repeat;
  /* Rotated a couple of degrees so the tile grid never lines up with the
     layout — otherwise the repeat reads as wallpaper rather than a page. */
  rotate:-2.2deg; scale:1.16;
  /* Luminosity keeps the scribe's strokes and lets the wine below supply the
     colour, so the page reads as one ground rather than a pasted photograph. */
  mix-blend-mode:luminosity; opacity:.13;
  -webkit-mask-image:radial-gradient(130% 100% at 50% 40%, #000 25%, transparent 78%);
  mask-image:radial-gradient(130% 100% at 50% 40%, #000 25%, transparent 78%);
}
.ls-root .hero-canvas{
  position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  pointer-events:none; display:block;
}
.ls-root .hero::after{ /* vellum grain */
  content:""; position:absolute; inset:0; z-index:-1; opacity:.28; pointer-events:none;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.ls-root .hero-grid{display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(38px,6vw,84px); align-items:center}
/* A soft halo so the copy always separates from whatever drifts behind it. */
.ls-root .hero h1, .ls-root .hero .lead, .ls-root .hero .label{text-shadow:0 1px 14px rgba(30,3,7,.5)}
.ls-root .hero h1{margin-top:24px}
.ls-root .hero h1 em{font-style:italic; color:var(--gold-lt)}
.ls-root .hero .lead{max-width:50ch; margin-top:24px}
.ls-root .hero-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:38px}

.ls-root .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:22px 18px; margin-top:46px; padding-top:26px; border-top:1px solid var(--hair)}
.ls-root .stats b{
  display:block; font-family:var(--serif); font-size:29px; font-weight:500; line-height:1;
  color:var(--gold-lt); font-variant-numeric:tabular-nums;
}
.ls-root .stats small{display:block; font-family:var(--sans); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--stone-lt); margin-top:8px}

/* ---------- the signature: a word written right to left ---------- */
.ls-root .scribe{
  position:relative; background:linear-gradient(158deg,#FCF8F0,#EFE3CD);
  color:var(--ink); padding:44px 40px 36px; box-shadow:0 42px 92px -34px rgba(0,0,0,.7);
}
.ls-root .scribe::before{content:""; position:absolute; inset:11px; border:1px solid rgba(142,110,42,.32); pointer-events:none}
.ls-root .scribe .rubric{font-family:var(--sans); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--wine)}
.ls-root .scribe-word{
  position:relative; overflow:hidden;
  font-family:var(--syr); direction:rtl; unicode-bidi:isolate;
  font-size:clamp(52px,7vw,84px); line-height:1.5; color:var(--ink);
  margin-block:14px 2px;
  /* the reed pen moves right to left */
  clip-path:inset(0 0 0 100%);
  animation:write 1.9s cubic-bezier(.5,.02,.24,1) .5s forwards;
}
@keyframes write{to{clip-path:inset(0 0 0 0)}}
.ls-root .scribe-nib{
  /* anchored right so it grows leftward with the reveal — the pen's direction */
  position:absolute; bottom:0; right:0; height:1px; width:0; background:var(--gold-dk);
  animation:nib 1.9s cubic-bezier(.5,.02,.24,1) .5s forwards;
}
@keyframes nib{to{width:100%}}
.ls-root .scribe .translit{font-family:var(--serif); font-style:italic; font-size:21px; color:var(--gold-dk)}
.ls-root .scribe .gloss{font-family:var(--sans); font-size:13.5px; line-height:1.65; color:var(--stone); margin-top:14px; padding-top:14px; border-top:1px solid rgba(142,110,42,.24)}
.ls-root .scribe .seal{
  position:absolute; inset-inline-end:-20px; bottom:-20px; width:88px; height:88px; border-radius:50%;
  background:var(--wine-dk); border:1px solid var(--gold); color:var(--gold-lt);
  display:grid; place-items:center; text-align:center;
  font-family:var(--sans); font-size:8px; letter-spacing:.14em; text-transform:uppercase; line-height:1.6;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.8);
}

/* ============================================================
   REASONS
   ============================================================ */
.ls-root .reasons{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:56px; background:var(--hair)}
.ls-root .reason{background:var(--cream); padding:38px 34px 42px; display:grid; gap:14px; align-content:start; transition:background .4s var(--ease)}
.ls-root .reason:hover{background:#fff}
/* The card's own word in Syriac, not a decorative letter: each one is a word
   the reader can actually take away, and it shows the font doing real work. */
.ls-root .reason .mark{display:grid; gap:5px; justify-items:start}
.ls-root .reason .mark b{font-family:var(--syr); font-size:34px; font-weight:400; line-height:1.5; color:var(--gold-dk)}
.ls-root .reason .mark i{font-family:var(--serif); font-style:italic; font-size:14px; color:var(--stone)}
.ls-root .reason p{font-size:15px; color:var(--stone)}

/* ============================================================
   ALPHABET
   ============================================================ */
.ls-root .alpha{display:grid; grid-template-columns:repeat(11,1fr); gap:1px; direction:rtl; margin-top:52px; background:var(--hair); border:1px solid var(--hair)}
.ls-root .on-wine .alpha{background:rgba(192,154,70,.22); border-color:rgba(192,154,70,.22)}
/* The grid itself stays RTL so cells fill right to left; each cell reverts to
   LTR so tooltips and logical offsets inside it behave normally. */
.ls-root .ltr{position:relative; direction:ltr; background:var(--wine-dp); aspect-ratio:1; display:grid; place-items:center; cursor:default; transition:background .35s var(--ease)}
.ls-root .ltr b{font-family:var(--syr); font-size:clamp(26px,3vw,38px); font-weight:400; line-height:1; color:var(--cream); transition:.35s var(--ease)}
.ls-root .ltr:hover{background:var(--gold)}
.ls-root .ltr:hover b{color:var(--wine-dk); scale:1.1}
.ls-root .ltr .tip{
  position:absolute; left:50%; bottom:calc(100% + 10px); translate:-50% 6px;
  background:var(--wine-dk); color:var(--cream); border:1px solid rgba(192,154,70,.45);
  padding:8px 13px; white-space:nowrap; direction:ltr; z-index:5;
  font-family:var(--sans); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  opacity:0; pointer-events:none; transition:.3s var(--ease);
}
/* The sound is a phrase now ("b as in boy"), not a single glyph, so it sits on
   its own line in sentence case rather than trailing the name in caps. */
.ls-root .ltr .tip em{
  display:block; margin-top:5px; font-style:normal; text-transform:none;
  letter-spacing:.02em; font-size:11.5px; color:var(--gold-lt);
}
.ls-root .ltr:hover .tip{opacity:1; translate:-50% 0}
.ls-root .alpha-note{margin-top:22px; font-family:var(--sans); font-size:13px; color:var(--stone-lt); text-align:center}
.ls-root .alpha-note a{color:var(--gold-lt); text-decoration:underline; text-underline-offset:3px}
.ls-root .alpha-note a:hover{color:var(--cream)}
.ls-root .alpha-cta{margin-top:34px; display:flex; justify-content:center}

/* ============================================================
   COURSES
   ============================================================ */
/* Two published levels, so two columns — the grid follows what actually
   exists rather than forcing a third card to fill a row. */
.ls-root .courses{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:56px; background:var(--hair); border:1px solid var(--hair)}

/* Levels still in preparation: named, not sold. No banner, no price, no
   button — nothing that implies you can buy something that isn't there. */
.ls-root .upcoming{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:1px; background:var(--hair); border:1px solid var(--hair); border-top:0}
.ls-root .up{background:var(--cream-2); padding:24px 32px; display:flex; align-items:center; gap:18px}
.ls-root .up .course-num{font-size:34px; opacity:.5}
.ls-root .up-txt{display:grid; gap:3px}
.ls-root .up-txt b{font-family:var(--serif); font-weight:500; font-size:19px; color:var(--ink)}
.ls-root .up-txt small{font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--stone)}

/* Placement invitation — sits after the levels, because the question it answers
   ("which of these is mine?") only occurs once the reader has seen them. */
.ls-root .placement{
  margin-top:clamp(38px,5vw,62px); padding:clamp(28px,3.6vw,44px) clamp(26px,3.4vw,48px);
  background:var(--wine-dp); color:var(--cream); --dot:var(--gold-lt);
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(22px,3vw,48px); flex-wrap:wrap;
}
.ls-root .placement .label{color:var(--gold-lt)}
.ls-root .placement h3{color:var(--cream); margin:14px 0 10px}
.ls-root .placement p{font-family:var(--serif); font-size:17px; line-height:1.6; color:var(--stone-lt); max-width:46ch}
.ls-root .placement .btn{flex:none}
@media(max-width:720px){ .ls-root .placement{flex-direction:column; align-items:flex-start} }
.ls-root .course-meta{font-family:var(--sans); font-size:11px; letter-spacing:.09em; color:var(--stone); text-transform:uppercase}
.ls-root .price s{font-family:var(--serif); font-size:19px; color:var(--stone); margin-inline-start:9px; text-decoration-thickness:1px}
@media (max-width:50rem){.ls-root .upcoming{grid-template-columns:1fr}}
.ls-root .course{
  position:relative; background:var(--cream); padding:0;
  display:flex; flex-direction:column; transition:background .45s var(--ease);
}
.ls-root .course:hover{background:#FDFAF3}
.ls-root .course.featured{background:var(--cream-2)}
.ls-root .course.featured:hover{background:#FBF4E7}
.ls-root .course-body{padding:26px 32px 32px; display:flex; flex-direction:column; gap:15px; flex:1}

/* Course plate: the mark and the level set as real text beside the artwork,
   so every level is one line of copy away rather than a new image to retouch. */
.ls-root .course-banner{
  display:flex; align-items:stretch; margin:0; height:196px; overflow:hidden;
  background:#fff; border-bottom:1px solid var(--hair);
}
.ls-root .cb-text{
  flex:1; min-width:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:13px; padding:18px 14px; text-align:center;
}
.ls-root .cb-logo{width:96px; height:auto; display:block}
.ls-root .cb-level{font-family:var(--serif); font-size:17px; font-weight:600; color:var(--ink); letter-spacing:.02em}
.ls-root .cb-name{font-family:var(--serif); font-size:15px; line-height:1.5; color:var(--ink)}
.ls-root .cb-name span{display:block}
/* Sized so the contained book nearly fills the column — the same width on all
   three cards, so the plates align across the row. */
.ls-root .cb-art{flex:none; width:44%; max-width:142px; height:100%; object-fit:cover; display:block}
/* A book cover is shown whole; a manuscript page is a texture and may crop. */
.ls-root .cb-art.book{object-fit:contain; background:#fff}
.ls-root .course-top{display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.ls-root .course-num{font-family:var(--syr); font-size:46px; line-height:.9; color:var(--wine); opacity:.9}
.ls-root .course-tag{
  font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold-dk); border:1px solid var(--hair); padding:5px 10px; white-space:nowrap;
}
.ls-root .course.featured .course-tag{background:var(--gold); border-color:var(--gold); color:var(--wine-dk)}
.ls-root .course p{font-size:15px; color:var(--stone)}
.ls-root .course ul{list-style:none; margin:4px 0 0; padding:0; display:grid; gap:9px}
.ls-root .course li{position:relative; padding-inline-start:20px; font-size:14px; color:var(--stone)}
.ls-root .course li::before{content:"܀"; position:absolute; inset-inline-start:0; top:-1px; font-family:var(--syr); font-size:13px; color:var(--gold-dk)}
.ls-root .course-foot{margin-top:auto; padding-top:22px; border-top:1px solid var(--hair); display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.ls-root .price b{font-family:var(--serif); font-size:34px; font-weight:500; line-height:1; color:var(--wine); font-variant-numeric:tabular-nums}
.ls-root .price small{display:block; font-family:var(--sans); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); margin-top:7px}

/* ============================================================
   HERITAGE
   ============================================================ */
.ls-root .heritage{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(38px,6vw,80px); align-items:center}
.ls-root .heritage .body{display:grid; gap:20px; justify-items:start}
.ls-root .heritage .body p{color:var(--fg-dim); max-width:46ch}
.ls-root .rota{
  position:relative; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 42%, #FBF6EC, #E6D8BC 70%, #D6C5A2);
  border:2px solid var(--gold); box-shadow:0 40px 90px -40px rgba(58,12,24,.7);
  overflow:hidden;
}
.ls-root .rota::before{content:""; position:absolute; inset:16px; border:1px solid rgba(142,110,42,.4); border-radius:50%}
.ls-root .rota-ring{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--syr); color:var(--wine); direction:rtl;
  animation:turn 90s linear infinite;
}
.ls-root .rota-ring span{position:absolute; transform-origin:50% 50%; white-space:nowrap}
@keyframes turn{to{rotate:360deg}}
.ls-root .rota-core{position:relative; font-family:var(--syr); font-size:clamp(44px,6vw,72px); color:var(--wine-dp); z-index:2}

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.ls-root .testi{max-width:52rem; margin-inline:auto; text-align:center; display:grid; gap:26px; justify-items:center}
.ls-root .testi blockquote{
  margin:0; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(21px,2.6vw,32px); line-height:1.45; color:var(--cream);
}
.ls-root .testi .who{font-family:var(--serif); font-size:19px; color:var(--gold-lt)}
.ls-root .testi .role{font-family:var(--sans); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--stone-lt); margin-top:5px}

/* ============================================================
   INSTRUCTOR
   ============================================================ */
.ls-root .tutor{display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(38px,6vw,80px); align-items:center}
.ls-root .tutor-portrait{position:relative; aspect-ratio:1; border-radius:50%; border:2px solid var(--gold); overflow:hidden;
  background:linear-gradient(150deg,#3A070F,#5B010B 55%,#26040A); display:grid; place-items:center}
/* A soft inner vignette only — enough to seat the photograph in the page
   without tinting a picture of a real person. */
.ls-root .tutor-portrait::after{
  content:""; position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:inset 0 0 46px rgba(38,4,10,.22), inset 0 0 0 1px rgba(251,246,238,.35);
}
.ls-root .portrait-img{width:100%; height:100%; object-fit:cover; display:block}
.ls-root .tutor-badge{
  position:absolute; left:50%; translate:-50% 0; bottom:-1px; background:var(--gold); color:var(--wine-dk);
  font-family:var(--sans); font-size:9.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  padding:7px 20px; white-space:nowrap;
}
.ls-root .tutor .body{display:grid; gap:18px; justify-items:start}
.ls-root .tutor .role{font-family:var(--serif); font-size:19px; color:var(--wine)}
.ls-root .on-wine .tutor .role{color:var(--gold-lt)}
.ls-root .tutor p{color:var(--fg-dim); max-width:56ch}
.ls-root .chips{display:flex; flex-wrap:wrap; gap:1px; background:var(--hair); border:1px solid var(--hair); margin-top:6px}
.ls-root .chips div{background:var(--cream); padding:16px 22px; flex:1 1 auto}
.ls-root .chips b{display:block; font-family:var(--serif); font-size:17px; font-weight:500}
.ls-root .chips small{display:block; font-family:var(--sans); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); margin-top:5px}

/* ============================================================
   FAQ
   ============================================================ */
.ls-root .faq{max-width:54rem; margin:52px auto 0; border-top:1px solid var(--hair)}
.ls-root .faq details{border-bottom:1px solid var(--hair)}
.ls-root .faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:22px; cursor:pointer;
  padding-block:24px; font-family:var(--serif); font-size:clamp(19px,2vw,24px); line-height:1.3;
  list-style:none; transition:color .3s var(--ease);
}
.ls-root .faq summary::-webkit-details-marker{display:none}
.ls-root .faq summary:hover{color:var(--gold-dk)}
.ls-root .faq .pm{position:relative; width:15px; height:15px; flex:none; color:var(--gold-dk)}
.ls-root .faq .pm::before, .ls-root .faq .pm::after{content:""; position:absolute; background:currentColor; transition:.35s var(--ease)}
.ls-root .faq .pm::before{left:0; top:7px; width:15px; height:1px}
.ls-root .faq .pm::after{left:7px; top:0; width:1px; height:15px}
.ls-root .faq details[open] .pm::after{rotate:90deg; opacity:0}
.ls-root .faq .a{padding-bottom:26px; font-size:15.5px; color:var(--stone); max-width:64ch}

/* ============================================================
   FINAL + FOOTER
   ============================================================ */
.ls-root .final{text-align:center}
.ls-root .final .inner{display:grid; gap:24px; justify-items:center}
.ls-root .final .lead{max-width:48ch}
.ls-root .ftr{background:var(--wine-dk); color:rgba(251,246,238,.62); padding-block:74px 30px; font-family:var(--sans); font-size:14px}
.ls-root .ftr-grid{display:grid; grid-template-columns:1.6fr 1fr 1.2fr 1fr; gap:clamp(28px,4vw,56px)}
.ls-root .ftr h4{font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-lt); margin:0 0 18px}
.ls-root .ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.ls-root .ftr a:hover{color:var(--gold-lt)}
.ls-root .ftr .about{max-width:34ch; line-height:1.7; margin-top:18px}
.ls-root .ftr-btm{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px;
  margin-top:56px; padding-top:24px; border-top:1px solid rgba(192,154,70,.2);
  font-size:12px; color:rgba(251,246,238,.42);
}
.ls-root .ftr-btm .syr{font-family:var(--syr); font-size:19px; color:var(--gold-lt); opacity:.8; direction:rtl}

/* ============================================================
   MOTION
   ============================================================ */
.ls-root .rv{opacity:0; translate:0 24px; transition:opacity .85s var(--ease), translate .85s var(--ease)}
.ls-root .rv.in{opacity:1; translate:0 0}

@media (prefers-reduced-motion:reduce){
  .ls-root{scroll-behavior:auto}
  .ls-root .rv{opacity:1; translate:0 0; transition:none}
  .ls-root .scribe-word{animation:none; clip-path:none}
  .ls-root .scribe-nib{animation:none; width:100%}
  .ls-root .rota-ring{animation:none}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .ls-root .alpha{grid-template-columns:repeat(6,1fr)}
  .ls-root .reasons{grid-template-columns:1fr}
  .ls-root .courses{grid-template-columns:1fr}
  .ls-root .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .ls-root .nav{display:none}
  .ls-root .hdr-cta .btn{display:none}
  .ls-root .burger{display:grid; margin-inline-end:-8px}
  .ls-root .hero-grid{grid-template-columns:1fr}
  .ls-root .heritage{grid-template-columns:1fr}
  .ls-root .tutor{grid-template-columns:1fr; justify-items:center; text-align:center}
  .ls-root .tutor .body{justify-items:center}
  .ls-root .tutor-portrait{max-width:340px; width:100%}
}
@media (max-width:560px){
  .ls-root .logo{height:38px}
  .ls-root .ftr .logo{height:58px}
  .ls-root .alpha{grid-template-columns:repeat(4,1fr)}
  .ls-root .ltr .tip{display:none}
  .ls-root .ftr-grid{grid-template-columns:1fr}
  .ls-root .stats{grid-template-columns:repeat(2,1fr)}
  .ls-root .scribe{padding:34px 26px 30px}
  .ls-root .chips div{flex:1 1 100%}
}


/* ============================================================
   FREE LESSONS
   ============================================================ */
.ls-root .free-hero{background:var(--wine-dp); color:var(--cream); --dot:var(--gold-lt); position:relative; overflow:hidden}
.ls-root .free-hero .label{color:var(--gold-lt)}
.ls-root .free-hero .wrap{position:relative; padding-block:clamp(58px,8vw,100px)}
.ls-root .free-hero h1{max-width:17ch; margin-top:20px; font-size:clamp(34px,4.2vw,56px)}
.ls-root .free-hero .lead{margin-top:20px; max-width:44ch; color:rgba(251,246,238,.72)}

.ls-root .lv{border-top:1px solid var(--hair); padding-top:clamp(26px,3.4vw,40px); margin-top:clamp(34px,4.5vw,56px)}
.ls-root .lv:first-of-type{border-top:0; margin-top:clamp(26px,3.4vw,42px); padding-top:0}
.ls-root .lv-head{display:flex; align-items:baseline; gap:16px; flex-wrap:wrap}
.ls-root .lv-head .n{font-family:var(--syr); font-size:30px; line-height:1; color:var(--wine)}
.ls-root .lv-head .num{font-family:var(--sans); font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dk)}
.ls-root .lv-head h2{flex:1 1 100%; font-size:clamp(23px,2.5vw,31px); margin-top:4px}
.ls-root .lv-head p{flex:1 1 100%; font-size:15.5px; color:var(--stone); margin-top:8px; max-width:52ch}

.ls-root .lessons{margin-top:22px; border:1px solid var(--hair)}
.ls-root .lesson{display:flex; align-items:center; gap:18px; padding:17px 20px;
  border-bottom:1px solid var(--hair); background:var(--cream);
  transition:background .3s var(--ease), padding-left .3s var(--ease)}
.ls-root .lesson:last-child{border-bottom:0}
.ls-root .lesson:hover{background:#fff; padding-left:26px}
.ls-root .lesson .play{flex:none; width:34px; height:34px; border-radius:50%;
  border:1px solid var(--gold); display:grid; place-items:center;
  transition:background .3s var(--ease), border-color .3s var(--ease)}
.ls-root .lesson .play svg{width:10px; height:10px; fill:var(--gold-dk); margin-left:2px; transition:fill .3s var(--ease)}
.ls-root .lesson:hover .play{background:var(--gold); border-color:var(--gold)}
.ls-root .lesson:hover .play svg{fill:var(--wine-dk)}
.ls-root .lesson .t{flex:1; min-width:0}
.ls-root .lesson .t b{display:block; font-family:var(--serif); font-size:17.5px; font-weight:500; color:var(--ink)}
.ls-root .lesson .t small{display:block; margin-top:3px; font-family:var(--sans);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-dk)}
.ls-root .lesson .go{flex:none; font-family:var(--sans); font-size:11px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--stone);
  opacity:0; translate:-6px 0; transition:opacity .3s var(--ease), translate .3s var(--ease)}
.ls-root .lesson:hover .go{opacity:1; translate:0 0}
@media (max-width:34rem){ .ls-root .lesson .go{display:none} .ls-root .lesson:hover{padding-left:20px} }

.ls-root .lv-foot{margin-top:16px; display:flex; gap:14px; flex-wrap:wrap; align-items:center}
.ls-root .lv-foot .note{font-family:var(--sans); font-size:13px; color:var(--stone)}

.ls-root .free-end{background:var(--cream-2); text-align:center}
.ls-root .free-end .wrap{padding-block:clamp(52px,7vw,84px)}
.ls-root .free-end h2{max-width:20ch; margin:18px auto 0}
.ls-root .free-end .lead{max-width:46ch; margin:16px auto 0}
.ls-root .free-end .btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:26px}