/* ==========================================================================
   Epithrive — "Learning Paths" home + "Reader" article
   One file, no build step, no CDN, no webfonts. Indic scripts render from the
   OS stack, which is what the target audience actually has installed.
   ========================================================================== */

:root{
  --bg:#FFFFFF; --soft:#F4F7F7; --ink:#0F1A1C; --muted:#5A6E72; --line:#E2EAEA;
  --teal:#0E8079; --teal-2:#12A79D; --deep:#083F3C;
  --lilac:#6C63C4; --coral:#D2694B; --gold:#C9973B;
  --tint-teal:#E3F4F2; --tint-lilac:#F0EDFB; --tint-coral:#FBEDE8; --tint-gold:#FAF3E2;

  /* Surfaces and one-off colours, named so the dark block can swap them. */
  --surface:#FFFFFF;                 /* cards, pills, raised things */
  --btn-bg:#0F1A1C; --btn-ink:#FFFFFF;   /* the language button */
  --chip-ink:#0C716B;                    /* --teal on --tint-teal is only 4.22:1 */
  --art-opacity:.28;                     /* the header contour lines */
  --header-bg:rgba(255,255,255,.9);
  --shadow:rgba(8,63,60,.35);
  --band-a:#083F3C; --band-b:#0E8079; --band-ink:#083F3C;   /* language band */
  --quote-bg:#FAF3E2; --quote-ink:#6B5626;
  --note-bg:#FFF7EC; --note-line:#F0E2C8; --note-ink:#6B5626; --note-strong:#54421B;

  --wrap:1140px; --measure:680px; --r:16px;
}

/* Dark mode follows the reader's system setting. Only the tokens change —
   every rule below is written against them, so there is one place to edit. */
/* Dark mode. Two entry points, one palette:
     - the media query is the default, following the reader's system setting;
     - [data-theme] is an explicit choice from the header toggle and wins in
       BOTH directions (a reader on a dark OS can force light, and vice versa).
   The palette is duplicated because a media query and an attribute selector
   cannot be combined in one rule. Keep the two copies in sync — they are the
   only place colours are defined. (light-dark() would avoid the duplication,
   but it excludes older Android WebViews, which this audience still uses.) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0C1413; --soft:#141F1E; --ink:#E7EFED; --muted:#93A7A3; --line:#22322F;
    --teal:#4FCDBE; --teal-2:#6FE0D2; --deep:#0A2E2C;
    --lilac:#9C93E8; --coral:#E8927A; --gold:#E0B963;
    --tint-teal:#12302D; --tint-lilac:#21203A; --tint-coral:#38221C; --tint-gold:#31281A;

    --surface:#111C1A;
    --btn-bg:#4FCDBE; --btn-ink:#04100F;   /* inverting --ink would make it invisible */
    --chip-ink:#6FE0D2;
    --art-opacity:.22;                   /* brighter strokes on dark need less */
    --header-bg:rgba(12,20,19,.88);
    --shadow:rgba(0,0,0,.55);
    --band-a:#07211F; --band-b:#12655E; --band-ink:#04100F;
    --quote-bg:#2A2214; --quote-ink:#E6D3A4;
    --note-bg:#231C11; --note-line:#3C301B; --note-ink:#E2C78C; --note-strong:#F1DFB4;
  }
}
:root[data-theme="dark"]{
    --bg:#0C1413; --soft:#141F1E; --ink:#E7EFED; --muted:#93A7A3; --line:#22322F;
    --teal:#4FCDBE; --teal-2:#6FE0D2; --deep:#0A2E2C;
    --lilac:#9C93E8; --coral:#E8927A; --gold:#E0B963;
    --tint-teal:#12302D; --tint-lilac:#21203A; --tint-coral:#38221C; --tint-gold:#31281A;

    --surface:#111C1A;
    --btn-bg:#4FCDBE; --btn-ink:#04100F;   /* inverting --ink would make it invisible */
    --chip-ink:#6FE0D2;
    --art-opacity:.22;                   /* brighter strokes on dark need less */
    --header-bg:rgba(12,20,19,.88);
    --shadow:rgba(0,0,0,.55);
    --band-a:#07211F; --band-b:#12655E; --band-ink:#04100F;
    --quote-bg:#2A2214; --quote-ink:#E6D3A4;
    --note-bg:#231C11; --note-line:#3C301B; --note-ink:#E2C78C; --note-strong:#F1DFB4;
}
:root[data-theme="dark"]{color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light dark}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",
    "Noto Sans Devanagari","Noto Sans Bengali","Noto Sans Telugu","Noto Sans Tamil",
    "Noto Sans Gujarati","Noto Sans Kannada","Noto Sans Malayalam","Noto Sans Oriya",
    "Noto Sans Gurmukhi",sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
/* Indic scripts need more room than Latin to stay comfortable. */
body:not(.lang-en){font-size:17.5px;line-height:1.85}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 1.75rem}
.measure{max-width:var(--measure);margin:0 auto}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--teal);color:#fff;padding:.5rem 1rem;z-index:60}
.skip-link:focus{left:0}

/* --- header --------------------------------------------------------------- */
.site-header{position:sticky;top:0;background:var(--header-bg);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);z-index:30}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:.95rem 0}
.site-header__brand{font-weight:800;font-size:1.12rem;letter-spacing:-.03em;display:flex;align-items:center;gap:.55rem}
.site-header__mark{width:25px;height:25px;border-radius:8px;flex:none;
  background:linear-gradient(140deg,var(--teal-2),var(--deep));display:grid;place-items:center;
  color:#fff;font-size:.8rem;font-weight:700}   /* on the teal gradient: stays white */
.site-nav{display:flex;gap:1.4rem;font-size:.88rem;color:var(--muted);align-items:center}
.site-nav a:hover{color:var(--teal)}
.site-nav .lang-btn{background:var(--btn-bg);color:var(--btn-ink);border-radius:10px;padding:.5rem 1rem;font-size:.84rem;font-weight:600}
.site-nav .lang-btn:hover{background:var(--teal);color:var(--btn-ink)}

/* --- decorative header graphic -------------------------------------------- */
.header-art{position:absolute;inset:0;pointer-events:none;opacity:var(--art-opacity);
  color:var(--teal)}
.header-art svg{display:block;width:100%;height:100%}
.header-art--teal{color:var(--teal)}
.header-art--lilac{color:var(--lilac)}
.header-art--coral{color:var(--coral)}
.header-art--gold{color:var(--gold)}
/* The art clips itself, so its container must NOT — a parent overflow:hidden
   here would crop the search results dropdown out of the hero. */
.header-art{overflow:hidden}
.titleband,.hero{position:relative}
.titleband > .wrap,.hero > .wrap{position:relative;z-index:1}
@media (prefers-reduced-motion:no-preference){
  .header-art svg{transition:opacity .3s}
}

/* --- reading progress + back to top --------------------------------------- */
/* Sits on the header's bottom edge, covering its 1px border, so it reads as a
   line under the menu rather than a separate strip. */
.reading-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:transparent}
.reading-progress__fill{display:block;height:100%;width:0;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--teal-2),var(--teal))}
@media (prefers-reduced-motion:no-preference){
  .reading-progress__fill{transition:width .12s linear}
}

.to-top{position:fixed;right:1.25rem;bottom:1.25rem;width:44px;height:44px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);cursor:pointer;
  display:grid;place-items:center;font-size:1.05rem;font-family:inherit;line-height:1;padding:0;
  z-index:50;box-shadow:0 12px 30px -16px var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(8px)}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover{color:var(--teal);border-color:var(--teal)}
.to-top:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .to-top{transition:opacity .2s,transform .2s,color .15s,border-color .15s}
}
@media (max-width:560px){
  .to-top{right:.9rem;bottom:.9rem;width:40px;height:40px}
}

/* --- search ---------------------------------------------------------------- */
.search{position:relative;max-width:520px;margin:2rem auto 0;text-align:left}
.search__field{display:flex;align-items:center;gap:.7rem;background:var(--soft);border:1px solid var(--line);
  border-radius:14px;padding:.8rem 1.05rem;transition:border-color .15s}
.search__field:focus-within{border-color:var(--teal-2)}
.search__icon{color:var(--muted);font-size:1.15rem;line-height:1;flex:none}
.search__input{flex:1;border:0;background:none;color:var(--ink);font:inherit;font-size:.97rem;outline:none;
  min-width:0}
.search__input::placeholder{color:var(--muted)}
.search__input::-webkit-search-cancel-button{display:none}
.search__clear{border:0;background:none;color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer;
  padding:0 .2rem;font-family:inherit}
.search__clear:hover{color:var(--teal)}

.search__results{display:none;position:absolute;left:0;right:0;top:calc(100% + .5rem);z-index:40;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:0 24px 48px -28px var(--shadow)}
.search.is-open .search__results{display:block}
.search__hit{display:block;padding:.8rem 1.05rem;border-bottom:1px solid var(--line);text-decoration:none}
.search__hit:last-child{border-bottom:0}
.search__hit:hover,.search__hit.is-active{background:var(--soft)}
.search__hit small{display:block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--chip-ink);font-weight:800;margin-bottom:.2rem}
.search__hit-title{display:block;font-size:.97rem;font-weight:600;letter-spacing:-.012em;line-height:1.35}
.search__hit-sum{display:block;font-size:.83rem;color:var(--muted);margin-top:.15rem}
.search__empty{margin:0;padding:1rem 1.05rem;color:var(--muted);font-size:.9rem}

/* header overlay variant */
.search-open{background:none;border:1px solid var(--line);border-radius:9px;cursor:pointer;
  width:34px;height:34px;display:grid;place-items:center;color:var(--muted);font-size:1.15rem;
  font-family:inherit;line-height:1;padding:0}
.search-open:hover{border-color:var(--teal);color:var(--teal)}
.search--panel{display:none;position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + .6rem);
  width:min(520px,calc(100vw - 2rem));margin:0}
.search--panel.is-visible{display:block}
.search--panel .search__field{background:var(--surface);box-shadow:0 20px 44px -26px var(--shadow)}

/* --- theme toggle --------------------------------------------------------- */
.theme-toggle{background:none;border:1px solid var(--line);border-radius:9px;cursor:pointer;
  width:34px;height:34px;display:grid;place-items:center;color:var(--muted);font-size:.95rem;
  font-family:inherit;line-height:1;padding:0}
.theme-toggle:hover{border-color:var(--teal);color:var(--teal)}
.theme-toggle__sun{display:none}
.theme-toggle__moon{display:inline}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle__sun{display:inline}
  :root:not([data-theme="light"]) .theme-toggle__moon{display:none}
}
:root[data-theme="dark"] .theme-toggle__sun{display:inline}
:root[data-theme="dark"] .theme-toggle__moon{display:none}
:root[data-theme="light"] .theme-toggle__sun{display:none}
:root[data-theme="light"] .theme-toggle__moon{display:inline}

/* --- home: hero ----------------------------------------------------------- */
.hero{padding:4rem 0 2.5rem;text-align:center}
.hero__badge{display:inline-flex;align-items:center;gap:.5rem;background:var(--soft);border:1px solid var(--line);
  border-radius:999px;padding:.4rem 1rem;font-size:.8rem;color:var(--muted);margin-bottom:1.5rem}
.hero__dot{width:7px;height:7px;border-radius:50%;background:var(--teal-2);flex:none}
.hero__title{font-size:clamp(2.2rem,5.2vw,3.4rem);line-height:1.11;letter-spacing:-.035em;
  margin:0 auto 1.1rem;max-width:18ch;font-weight:800}
.hero__lead{color:var(--muted);font-size:1.08rem;max-width:58ch;margin:0 auto}

/* --- home: tracks --------------------------------------------------------- */
.section{padding:2.75rem 0 .5rem}
.section__title{font-size:1.5rem;letter-spacing:-.025em;margin:0 0 .3rem}
.section__lead{color:var(--muted);font-size:.95rem;margin:0 0 1.9rem}
.section__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.4rem}
.section__head .section__title{margin:0}
.section__more{font-size:.88rem;color:var(--teal);font-weight:600;white-space:nowrap}

.tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.1rem}
.track{border:1px solid var(--line);border-radius:18px;padding:1.5rem 1.4rem;background:var(--surface);
  display:flex;flex-direction:column;transition:transform .18s,box-shadow .18s}
.track:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px var(--shadow)}
.track__ico{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-size:1.1rem;margin-bottom:1rem}
.track--teal  .track__ico{background:var(--tint-teal);color:var(--chip-ink)}
.track--lilac .track__ico{background:var(--tint-lilac);color:var(--lilac)}
.track--coral .track__ico{background:var(--tint-coral);color:var(--coral)}
.track--gold  .track__ico{background:var(--tint-gold);color:var(--gold)}
.track__name{margin:0 0 .4rem;font-size:1.08rem;letter-spacing:-.015em}
.track__desc{margin:0 0 1.1rem;color:var(--muted);font-size:.88rem;flex:1}
.track__count{font-size:.78rem;color:var(--muted)}
.track__bar{height:4px;background:var(--line);border-radius:99px;margin-top:.7rem;overflow:hidden}
.track__bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal-2),var(--teal))}

/* --- home: ordered lessons ------------------------------------------------ */
.lesson{display:grid;grid-template-columns:auto 1fr auto;gap:1.3rem;align-items:center;
  border:1px solid var(--line);border-radius:var(--r);padding:1.15rem 1.35rem;margin-bottom:.75rem;
  background:var(--surface);transition:border-color .15s,background .15s}
.lesson:hover{border-color:var(--teal-2);background:var(--soft)}
.lesson__step{width:38px;height:38px;border-radius:50%;background:var(--soft);display:grid;place-items:center;
  font-weight:700;font-size:.92rem;color:var(--teal);flex:none}
.lesson:hover .lesson__step{background:var(--surface)}
.lesson__title{margin:0 0 .2rem;font-size:1.03rem;letter-spacing:-.012em;line-height:1.35}
.lesson__sum{margin:0;color:var(--muted);font-size:.86rem}
.lesson__time{font-size:.8rem;color:var(--muted);white-space:nowrap}
.empty{color:var(--muted)}

/* --- language band -------------------------------------------------------- */
.langband{margin:3.5rem 0 0;border-radius:24px;padding:3rem 2.5rem;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--band-a),var(--band-b))}
.langband::after{content:"";position:absolute;right:-60px;top:-60px;width:280px;height:280px;
  border-radius:50%;background:rgba(255,255,255,.07)}
.langband h2{margin:0 0 .6rem;font-size:1.85rem;letter-spacing:-.028em;position:relative}
.langband p{margin:0 0 1.7rem;opacity:.85;max-width:52ch;font-size:.97rem;position:relative}
.langband__chips{display:flex;flex-wrap:wrap;gap:.5rem;position:relative}
.langband__chips a,.langband__chips span{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  border-radius:999px;padding:.45rem 1rem;font-size:.92rem;color:#fff}
.langband__chips a:hover{background:rgba(255,255,255,.28)}
.langband__chips .is-current{background:#fff;color:var(--band-ink);font-weight:700;border-color:#fff}

/* --- article: title band -------------------------------------------------- */
.titleband{background:linear-gradient(180deg,var(--soft),var(--bg));border-bottom:1px solid var(--line);
  padding:3rem 0 2.4rem;margin-bottom:2.4rem}
.article-hero{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;
  border-radius:var(--r);margin-bottom:1.5rem;box-shadow:0 8px 24px var(--shadow)}
.chip{display:inline-block;background:var(--tint-teal);color:var(--chip-ink);border-radius:999px;
  padding:.3rem .85rem;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.article__title{font-size:clamp(2rem,4.4vw,2.95rem);line-height:1.11;letter-spacing:-.036em;
  margin:1rem 0 1rem;font-weight:800}
.article__stand{font-size:1.16rem;color:var(--muted);margin:0 0 1.5rem}
.article__meta{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;font-size:.86rem;color:var(--muted)}
.article__meta .sep{width:3px;height:3px;border-radius:50%;background:var(--muted);display:inline-block}

/* --- article: language pills --------------------------------------------- */
.lang-switcher{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:1.5rem 0 0}
.lang-switcher__label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-right:.3rem}
.lang-switcher__item{border:1px solid var(--line);background:var(--surface);border-radius:999px;
  padding:.28rem .8rem;font-size:.85rem;color:var(--teal)}
.lang-switcher__item:hover{border-color:var(--teal)}
.lang-switcher__item.is-current{background:var(--teal);border-color:var(--teal);color:#fff}

/* --- article: body -------------------------------------------------------- */
.prose{font-size:1.06rem;line-height:1.78}
body:not(.lang-en) .prose{line-height:1.9}
.tldr{border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:0 var(--r) var(--r) 0;
  background:var(--soft);padding:1.3rem 1.5rem;margin:0 0 2.3rem}
.tldr b{display:block;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--teal);margin-bottom:.5rem}
.tldr p{margin:0;font-size:.97rem;color:var(--muted)}

.prose h2{font-size:1.55rem;letter-spacing:-.028em;margin:2.8rem 0 1rem;line-height:1.26;
  padding-top:1.6rem;border-top:1px solid var(--line)}
.prose h3{font-size:1.18rem;letter-spacing:-.02em;margin:2rem 0 .7rem;line-height:1.35}
.prose p{margin:0 0 1.35rem}
.prose ul,.prose ol{margin:0 0 1.4rem;padding-left:1.35rem}
.prose li{margin-bottom:.55rem}
.prose a:not(.lang-switcher__item){color:var(--teal);text-decoration:underline;text-underline-offset:2px;
  text-decoration-thickness:1px}
.prose table{width:100%;border-collapse:collapse;margin:0 0 1.7rem;font-size:.95rem;line-height:1.5;
  display:block;overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:.8rem .65rem;text-align:left}
.prose th{background:var(--soft);font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);font-weight:800}
.prose blockquote{margin:2.2rem 0;padding:1.4rem 1.6rem;background:var(--quote-bg);border-radius:var(--r);
  color:var(--quote-ink);font-size:1rem;line-height:1.68}
.prose blockquote p:last-child{margin:0}
.prose code{background:var(--soft);padding:.12em .35em;border-radius:5px;font-size:.9em}
.prose pre{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);padding:1rem;overflow-x:auto}
.prose pre code{background:none;padding:0}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0}

/* --- table of contents ----------------------------------------------------- */
.toc{margin:0 0 2.2rem;border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.4rem;
  background:var(--surface)}
.toc__title{margin:0 0 .6rem;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:800}
.toc__list{margin:0;padding-left:1.3rem;font-size:.94rem;line-height:1.5}
.toc__list li{margin-bottom:.45rem}
.toc__list li:last-child{margin-bottom:0}
.toc__list a{color:var(--teal);text-decoration:none}
.toc__list a:hover{text-decoration:underline;text-underline-offset:2px}

/* --- heading anchors ------------------------------------------------------- */
.heading-anchor{margin-left:.45rem;color:var(--line);text-decoration:none;font-weight:400;
  font-size:.75em;vertical-align:middle}
.prose h2:hover .heading-anchor,.prose h3:hover .heading-anchor,
.heading-anchor:focus-visible{color:var(--teal)}
/* Touch devices have no hover, so keep it permanently visible but quiet. */
@media (hover:hover){
  .heading-anchor{opacity:0;transition:opacity .15s}
  .prose h2:hover .heading-anchor,.prose h3:hover .heading-anchor,
  .heading-anchor:focus-visible{opacity:1}
}

/* --- share ----------------------------------------------------------------- */
.share{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:2.4rem 0 0;
  padding-top:1.4rem;border-top:1px solid var(--line)}
.share__label{font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  font-weight:800;margin-right:.3rem}
.share__btn{display:inline-block;border:1px solid var(--line);background:var(--surface);
  border-radius:999px;padding:.42rem 1rem;font:inherit;font-size:.87rem;color:var(--teal);
  cursor:pointer;text-decoration:none;line-height:1.4}
.share__btn:hover{border-color:var(--teal)}
.share__btn.is-done{background:var(--tint-teal);border-color:var(--teal);color:var(--chip-ink)}
.share__btn:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* --- author note ----------------------------------------------------------- */
.author-note{margin:3rem 0 0;padding:1.4rem 1.5rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--surface);display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start}
.author-note__avatar{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--teal-2),var(--deep));color:#fff;font-weight:700;
  font-size:.92rem;letter-spacing:.02em}
.author-note__name{margin:0;font-size:1.02rem;font-weight:700;letter-spacing:-.015em}
.author-note__role{margin:.1rem 0 .6rem;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--chip-ink);font-weight:800}
.author-note__bio{margin:0;font-size:.93rem;color:var(--muted);line-height:1.7}
@media(max-width:560px){
  .author-note{grid-template-columns:1fr;gap:.9rem}
}

/* --- product note ---------------------------------------------------------- */
.product-note{margin:2.2rem 0 0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.product-note__head{padding:1.1rem 1.5rem;border-bottom:1px solid var(--line);background:var(--soft)}
.product-note__head strong{display:block;font-size:1.02rem;letter-spacing:-.015em}
.product-note__head a{color:inherit;text-decoration:none;border-bottom:1px solid var(--line)}
.product-note__head a:hover{color:var(--teal);border-bottom-color:var(--teal)}
.product-note__head a:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.product-note__head span{font-size:.85rem;color:var(--muted)}
.product-note__spec{margin:0;padding:.4rem 1.5rem 1.1rem;display:grid;grid-template-columns:9.5rem 1fr;
  gap:.1rem 1rem;font-size:.9rem;line-height:1.6}
.product-note__spec dt{color:var(--muted);padding:.55rem 0;border-bottom:1px solid var(--line)}
.product-note__spec dd{margin:0;padding:.55rem 0;border-bottom:1px solid var(--line)}
.product-note__spec > :nth-last-child(-n+2){border-bottom:0}
.product-note__foot{margin:0;padding:.9rem 1.5rem;background:var(--note-bg);
  border-top:1px solid var(--note-line);font-size:.84rem;color:var(--note-ink)}
@media(max-width:620px){
  .product-note__spec{grid-template-columns:1fr;gap:0}
  .product-note__spec dt{border-bottom:0;padding-bottom:0;font-size:.78rem;letter-spacing:.06em;
    text-transform:uppercase;font-weight:700}
}

/* --- article: end matter -------------------------------------------------- */
.translation-note{background:var(--soft);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem 1.2rem;font-size:.9rem;color:var(--muted);margin:0 0 2.2rem}
.translation-note a{color:var(--teal);font-weight:600}
.endnote{margin:3rem 0 0;background:var(--note-bg);border:1px solid var(--note-line);border-radius:var(--r);
  padding:1.3rem 1.5rem;font-size:.92rem;color:var(--note-ink)}
.endnote strong{color:var(--note-strong)}
.related{margin:3.2rem 0 0;border-top:1px solid var(--line);padding-top:2rem}
.related h2{margin:0 0 1.2rem;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);font-weight:800}
.related__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.rel{border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.35rem;transition:.15s}
.rel:hover{border-color:var(--teal-2);background:var(--soft)}
.rel small{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal);font-weight:800}
.rel h3{margin:.4rem 0 .3rem;font-size:1.02rem;letter-spacing:-.015em;line-height:1.35}
.rel p{margin:0;font-size:.85rem;color:var(--muted)}

/* --- static page ---------------------------------------------------------- */
.page-title{font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:-.032em;line-height:1.15;margin:2.5rem 0 1.5rem;font-weight:800}

/* --- footer --------------------------------------------------------------- */
.site-footer{margin-top:3.5rem;border-top:1px solid var(--line);padding:2rem 0 3rem;
  color:var(--muted);font-size:.86rem}
.site-langs{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:1.2rem}
.site-langs__label{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;font-weight:700;margin-right:.3rem}
.site-langs__item{border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;font-size:.86rem;color:var(--teal)}
.site-langs__item:hover{border-color:var(--teal)}
.site-langs__item.is-current{background:var(--soft);color:var(--muted);font-weight:600}
.site-footer__note{display:block;margin-top:.2rem}

/* Touch targets. Keyed on (hover:none) rather than a width, because the thing
   that matters is a finger, not a narrow window: a small tablet needs this and
   a narrow desktop window does not. WCAG 2.5.8 asks for 24px; these aim at the
   ~44px that phone guidelines use. */
@media (hover:none){
  .site-nav a{padding:.62rem 0}
  .site-header__brand{padding:.4rem 0}
  .toc__list{line-height:1.5}
  .toc__list li{margin-bottom:.2rem}
  .toc__list a{display:inline-block;padding:.45rem 0}
  .heading-anchor{padding:.5rem .35rem;margin-left:.2rem}
  .lang-switcher__item,.site-langs__item{padding-top:.5rem;padding-bottom:.5rem}
  .share__btn{padding-top:.6rem;padding-bottom:.6rem}
  .search__hit{padding-top:1rem;padding-bottom:1rem}
}

@media(max-width:560px){
  /* Brand + two text links + three buttons does not fit 375px: the row ran
     edge to edge and the language button lost its padding entirely. The text
     links go, and the footer carries them instead so nothing is unreachable. */
  .lang-btn__en{display:none}
  .site-header__brand{font-size:1rem}
  .site-nav .lang-btn{padding:.45rem .8rem}
  .site-nav > a:not(.lang-btn){display:none}
  .site-nav{gap:.55rem}
  .wrap{padding:0 1.1rem}
}

/* The band is ~300px on a desktop but ~700px on a phone, so the same contour
   art stretches into a set of sweeping curves right across the standfirst.
   Pin it to a strip at the foot of the band and drop it back. */
@media(max-width:640px){
  .header-art{top:auto;height:150px;opacity:.14}
}

@media(max-width:760px){
  .lesson{grid-template-columns:auto 1fr;gap:1rem}
  .lesson__time{display:none}
  .related__grid{grid-template-columns:1fr}
  .langband{padding:2.2rem 1.5rem;border-radius:18px}
  .site-header__inner{gap:.8rem}
  .site-nav{gap:.9rem;font-size:.84rem}
}

/* ==========================================================================
   Richer reading look — Sep 2026
   Screen only: the print rules below are untouched. Everything here restyles
   markup the article layout already emits, so it applies to every article in
   every language, existing and future, with no source edits and no
   retranslation. Colours come from the theme tokens at the top of this file,
   so light, dark and the theme toggle all keep working.
   To roll back: delete this whole block.
   ========================================================================== */
@media screen{

  /* --- title band: tinted by the article's cluster ----------------------- */
  /* header_art.html carries the cluster class; :has() reads it. Browsers
     without :has() simply keep the teal tint. */
  .titleband{background:linear-gradient(165deg,var(--tint-teal) 0%,var(--bg) 78%);
    padding:3.2rem 0 2.6rem}
  .titleband:has(.header-art--lilac){background:linear-gradient(165deg,var(--tint-lilac) 0%,var(--bg) 78%)}
  .titleband:has(.header-art--coral){background:linear-gradient(165deg,var(--tint-coral) 0%,var(--bg) 78%)}
  .titleband:has(.header-art--gold){background:linear-gradient(165deg,var(--tint-gold) 0%,var(--bg) 78%)}

  .titleband .chip{background:var(--teal);color:var(--btn-ink);font-size:.78rem;padding:.4rem 1rem}
  .article__title{font-size:clamp(2.2rem,5vw,3.15rem)}
  .article__stand{font-size:clamp(1.18rem,2.4vw,1.34rem);line-height:1.5;max-width:40ch}
  .article__meta{font-size:.92rem}
  .article__meta .sep{width:4px;height:4px;background:var(--teal-2)}

  /* --- "In short" --------------------------------------------------------- */
  .tldr{background:var(--tint-teal);border:1px solid var(--line);border-left:5px solid var(--teal-2);
    border-radius:var(--r);padding:1.4rem 1.6rem}
  .tldr b{color:var(--chip-ink);font-size:.78rem}
  .tldr p{font-size:1.12rem;line-height:1.65;color:var(--ink)}

  /* --- body: larger type -------------------------------------------------- */
  .prose{font-size:1.19rem;line-height:1.75}
  body:not(.lang-en) .prose{line-height:1.9}

  /* --- section headings: accent bar instead of a rule above --------------- */
  .prose h2{font-size:clamp(1.55rem,3.2vw,1.85rem);border-top:0;padding-top:0;
    padding-left:1rem;border-left:5px solid var(--teal-2);margin:3rem 0 1.1rem}
  .prose h3{font-size:1.32rem}

  /* --- bullet lists: check cards (top level only; nested lists stay plain) */
  .prose > ul{list-style:none;padding-left:0;display:grid;gap:.7rem;margin:.2rem 0 1.8rem}
  .prose > ul > li{position:relative;margin:0;background:var(--soft);border:1px solid var(--line);
    border-radius:14px;padding:.9rem 1.1rem .9rem 3.1rem;line-height:1.55}
  .prose > ul > li::before{content:"";position:absolute;left:1rem;top:calc(.9rem + .1em);
    width:1.35em;height:1.35em;border-radius:50%;background:var(--teal)}
  .prose > ul > li::after{content:"";position:absolute;left:calc(1rem + .43em);top:calc(.9rem + .52em);
    width:.5em;height:.27em;border-left:.13em solid var(--btn-ink);border-bottom:.13em solid var(--btn-ink);
    transform:rotate(-45deg)}
  body:not(.lang-en) .prose > ul > li{line-height:1.8}
  body:not(.lang-en) .prose > ul > li::before{top:calc(.9rem + .225em)}
  body:not(.lang-en) .prose > ul > li::after{top:calc(.9rem + .645em)}
  .prose > ul > li > ul{margin:.5rem 0 0}

  /* --- numbered lists: step circles -------------------------------------- */
  .prose > ol{list-style:none;padding-left:0;counter-reset:rl;margin:.2rem 0 1.8rem}
  .prose > ol > li{counter-increment:rl;position:relative;padding-left:3rem;margin-bottom:1rem;min-height:2rem}
  .prose > ol > li::before{content:counter(rl);position:absolute;left:0;top:0;width:2rem;height:2rem;
    border-radius:50%;background:var(--tint-teal);color:var(--chip-ink);font-weight:800;font-size:.95rem;
    display:flex;align-items:center;justify-content:center;line-height:1}

  /* --- disclaimer --------------------------------------------------------- */
  .endnote{font-size:1rem;line-height:1.65;padding:1.35rem 1.6rem}

  /* --- small phones: still large, not oversized --------------------------- */
  @media (max-width:480px){
    .prose{font-size:1.125rem}
    .tldr{padding:1.2rem 1.25rem}
    .prose > ul > li{padding-left:2.9rem}
  }
}

/* ==========================================================================
   Print. The likely use here is a clinic wall or a page kept by a patient
   whose data has run out, so: drop every interactive affordance, keep the
   content, the byline, the disclaimer and the product note.
   ========================================================================== */
@media print{
  :root{
    --bg:#fff; --soft:#fff; --surface:#fff; --ink:#000; --muted:#333; --line:#bbb;
    --teal:#000; --teal-2:#000; --chip-ink:#000; --tint-teal:#fff;
    --note-bg:#fff; --note-line:#bbb; --note-ink:#000; --note-strong:#000;
    --shadow:transparent; --art-opacity:0;
  }
  @page{margin:16mm 14mm}
  body{background:#fff;color:#000;font-size:11.5pt;line-height:1.5}

  /* Interactive chrome has no meaning on paper. */
  .site-header,.search,.search--panel,.to-top,.reading-progress,.theme-toggle,
  .search-open,.header-art,.lang-switcher,.site-langs,.share,.related,
  .toc,.skip-link,.article-hero{display:none !important}

  .titleband{background:none;border-bottom:1px solid #bbb;padding:0 0 10pt;margin-bottom:14pt}
  .wrap,.measure{max-width:none;padding:0;margin:0}
  .article__title{font-size:20pt;line-height:1.15}
  .article__stand{font-size:12pt;color:#333}
  .chip{border:1px solid #bbb;background:none}

  .prose{font-size:11.5pt}
  .prose h2{font-size:14pt;margin:14pt 0 6pt;padding-top:8pt;border-top:1px solid #ddd;
    break-after:avoid;page-break-after:avoid}
  .prose h3{font-size:12pt;break-after:avoid;page-break-after:avoid}
  .prose p,.prose li{orphans:3;widows:3}
  .prose table{display:table;width:100%;break-inside:avoid;page-break-inside:avoid;font-size:10.5pt}
  .prose th{background:#f2f2f2 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .prose blockquote{background:none;border-left:3px solid #999;border-radius:0;padding-left:10pt}
  .heading-anchor{display:none}

  /* Print the destination of any link the reader can no longer click. */
  .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:9.5pt;color:#555;word-break:break-all}

  .author-note,.endnote,.product-note{break-inside:avoid;page-break-inside:avoid;
    border:1px solid #bbb;background:none;margin-top:12pt}
  .author-note__avatar{background:#eee !important;color:#000;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .product-note__head,.product-note__foot{background:none}
  .site-footer{border-top:1px solid #bbb;padding:8pt 0 0;font-size:9.5pt}
  .site-footer__note{display:none}
}