/* ============================================================
   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%}
}


/* ============================================================
   ABOUT — page-specific
   ============================================================ */

/* The thread: a hairline on the page's edge that fills as you read, standing
   for the unbroken chain the language reaches us through. Fixed to the
   viewport edge rather than run down the middle — the sections are opaque
   full-bleed bands, so a centre line would either sit behind them invisibly
   or cut across the text. On the edge it is always visible and never collides.
   Decorative, so it is hidden from assistive technology and from print. */
.ls-root .thread{position:fixed; inset-block:0; inset-inline-start:0; width:2px;
  background:rgba(183,147,84,.14); pointer-events:none; z-index:40}
.ls-root .thread i{position:absolute; inset-block-start:0; inset-inline-start:0; width:100%;
  height:var(--thread,0%); background:linear-gradient(var(--gold-lt),var(--gold));
  box-shadow:0 0 12px rgba(217,188,133,.5); transition:height .12s linear}
.ls-root .threaded{position:relative}
@media (max-width:900px){ .ls-root .thread{display:none} }
@media print{ .ls-root .thread{display:none} }
@media (prefers-reduced-motion:reduce){ .ls-root .thread i{transition:none} }

/* Opening statement */
.ls-root .about-hero{position:relative; overflow:hidden; background:var(--wine-dp); color:var(--cream)}
.ls-root .about-hero::before{content:""; position:absolute; inset:0;
  background:radial-gradient(120% 90% at 76% 4%, rgba(183,147,84,.20), transparent 58%),
             radial-gradient(90% 70% at 8% 96%, rgba(38,4,10,.55), transparent 62%)}
/* It is a wine section without the .on-wine class, so it must restate what
   that class would have given it: the light gold for labels and ornaments.
   Left at the default dark gold, the eyebrow read 3.2:1 against the ground. */
.ls-root .about-hero{--dot:var(--gold-lt)}
.ls-root .about-hero .label{color:var(--gold-lt)}
.ls-root .about-hero .wrap{position:relative; padding-block:clamp(70px,10vw,130px)}
.ls-root .about-hero h1{max-width:19ch; margin-top:22px}
.ls-root .about-hero h1 em{font-style:italic; color:var(--gold-lt)}
.ls-root .about-hero .lead{max-width:52ch; margin-top:26px; color:rgba(251,246,238,.72)}

/* Two-column statement with a pulled quote */
.ls-root .statement{display:grid; gap:clamp(30px,5vw,64px); align-items:start}
@media (min-width:56rem){ .ls-root .statement{grid-template-columns:1.15fr .85fr} }
.ls-root .statement p + p{margin-top:18px}
.ls-root .pull{border-inline-start:2px solid var(--gold); padding-inline-start:26px;
  font-family:var(--serif); font-size:clamp(20px,2.2vw,27px); line-height:1.45; color:var(--fg)}
.ls-root .pull cite{display:block; margin-top:14px; font-family:var(--sans); font-style:normal;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-dk)}
.ls-root .on-wine .pull cite{color:var(--gold-lt)}

/* What we teach — four numbered principles */
.ls-root .tenets{display:grid; gap:1px; margin-top:54px; background:var(--hair)}
@media (min-width:44rem){ .ls-root .tenets{grid-template-columns:1fr 1fr} }
.ls-root .tenet{background:var(--cream); padding:36px 34px 40px; display:grid; gap:12px;
  align-content:start; transition:background .4s var(--ease)}
.ls-root .tenet:hover{background:#fff}
.ls-root .tenet .n{font-family:var(--serif); font-size:15px; letter-spacing:.2em; color:var(--gold-dk)}
.ls-root .tenet p{font-size:15px; color:var(--stone)}

/* The books */
.ls-root .books{display:grid; gap:clamp(28px,4vw,56px); align-items:center; margin-top:52px}
@media (min-width:52rem){ .ls-root .books{grid-template-columns:.8fr 1.2fr} }
.ls-root .book-stack{position:relative; display:flex; justify-content:center; gap:18px}
.ls-root .book-stack img{width:min(46%,190px); height:auto; display:block;
  box-shadow:0 26px 60px -26px rgba(38,4,10,.7); transition:transform .6s var(--ease)}
.ls-root .book-stack img:first-child{transform:rotate(-3deg)}
.ls-root .book-stack img:last-child{transform:rotate(3deg)}
.ls-root .book-stack:hover img:first-child{transform:rotate(-1deg) translateY(-6px)}
.ls-root .book-stack:hover img:last-child{transform:rotate(1deg) translateY(-6px)}

/* Scripts — three hands */
.ls-root .hands{display:grid; gap:1px; margin-top:52px; background:var(--hair)}
@media (min-width:50rem){ .ls-root .hands{grid-template-columns:repeat(3,1fr)} }
/* The card carries its own cream ground inside a wine section, so it must also
   restate the text colour — otherwise headings inherit the section's --fg
   (cream) and disappear against the card. */
.ls-root .hand{background:var(--cream); color:var(--ink); padding:34px 30px 38px;
  display:grid; gap:12px; align-content:start}
.ls-root .hand h3{color:var(--ink)}
.ls-root .hand .glyph{font-family:var(--syr); font-size:44px; line-height:1.5; color:var(--gold-dk)}
.ls-root .hand h3{font-size:21px}
.ls-root .hand p{font-size:14.5px; color:var(--stone)}
.ls-root .hand .when{font-family:var(--sans); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold-dk)}

/* Institutions */
.ls-root .posts{display:grid; gap:1px; margin-top:40px; background:var(--hair)}
@media (min-width:40rem){ .ls-root .posts{grid-template-columns:1fr 1fr} }
.ls-root .post{background:var(--cream); padding:24px 28px}
.ls-root .post b{display:block; font-family:var(--serif); font-size:18px; font-weight:500}
.ls-root .post small{display:block; margin-top:5px; font-family:var(--sans); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--stone)}

/* Closing */
.ls-root .close-cta{text-align:center}
.ls-root .close-cta h2{max-width:17ch; margin-inline:auto}
.ls-root .close-cta .lead{max-width:50ch; margin:20px auto 0}
.ls-root .close-cta .row{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px}