/* Self-hosted, so first paint waits on nothing but this site.
   Generated by shots/fetch_fonts.py — do not hand-edit.
   font-display:swap means text shows immediately in the fallback
   and reflows once, rather than being invisible while a font loads. */
@font-face{
  font-family:'Dancing Script';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/dancing-script-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Dancing Script';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/dancing-script-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/playfair-display-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/playfair-display-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/playfair-display-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/playfair-display-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/assets/fonts/playfair-display-800-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Playfair Display';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url('/assets/fonts/playfair-display-800-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('/assets/fonts/poppins-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('/assets/fonts/poppins-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('/assets/fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('/assets/fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Poppins';
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url('/assets/fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Bonjour & Beyond — study site
   Palette and typefaces come from the social creatives (brand.css) so the two
   read as one brand; sizing is retuned for long-form reading rather than for a
   banner. Class mode multiplies --scale, which every size inside <main> is
   expressed against.
   ========================================================================== */

/* --- tokens: light is the base, dark is defined for both signals ---------- */
:root{
  /* Sampled directly off the brand mockup (head.jpg) rather than eyeballed:
     the pink is redder than it looks, the heading colour is near-black rather
     than navy, and the bands are warmer. */
  --ground:#FFF9F9;      --surface:#FFFFFF;     --surface-2:#FFF3F3;
  --ink:#1A2432;         --muted:#697386;       --line:#F1ECE8;
  --navy:#1A2432;        --navy-2:#2C3A52;      --navy-soft:#FFF3F3;
  --gold:#D8465F;        --gold-2:#C33A51;      --gold-soft:#FCE9EC;
  --red:#D6362B;         --sky:#E4577F;
  --mark:#FBE4EA;
  --shadow-1:0 1px 2px rgba(30,45,77,.04);
  --shadow-2:0 2px 6px rgba(30,45,77,.05), 0 18px 40px rgba(232,84,124,.10);
  --rail-w:286px;
  --measure:68ch;
  --scale:1;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#17121A;    --surface:#211A24;     --surface-2:#2A2029;
    --ink:#F4EAEE;       --muted:#B9A8B1;       --line:#3A2C35;
    --navy:#F6ECF0;      --navy-2:#F4A0B8;      --navy-soft:#2C2029;
    --gold:#F0879F;      --gold-2:#F4A0B8;      --gold-soft:#33212A;
    --red:#F0897C;       --sky:#F0879F;
    --mark:#4A2B37;
    --shadow-1:0 1px 2px rgba(0,0,0,.34);
    --shadow-2:0 2px 4px rgba(0,0,0,.34), 0 16px 38px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ground:#17121A;      --surface:#211A24;     --surface-2:#2A2029;
  --ink:#F4EAEE;         --muted:#B9A8B1;       --line:#3A2C35;
  --navy:#F6ECF0;        --navy-2:#F4A0B8;      --navy-soft:#2C2029;
  --gold:#F0879F;        --gold-2:#F4A0B8;      --gold-soft:#33212A;
  --red:#F0897C;         --sky:#F0879F;
  --mark:#4A2B37;
  --shadow-1:0 1px 2px rgba(0,0,0,.34);
  --shadow-2:0 2px 4px rgba(0,0,0,.34), 0 16px 38px rgba(0,0,0,.4);
  color-scheme:dark;
}
:root[data-class-mode="1"]{ --scale:1.34; }

/* --- base ---------------------------------------------------------------- */
*{box-sizing:border-box}
html{font-size:17px}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:'Poppins',ui-sans-serif,system-ui,'Segoe UI',sans-serif;
  font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{
  font-family:'Playfair Display','Poppins',ui-sans-serif,system-ui,sans-serif;
  font-weight:700;line-height:1.16;text-wrap:balance;color:var(--navy);
}
a{color:var(--navy-2);text-underline-offset:.18em}
a:hover{color:var(--gold)}
img{max-width:100%;height:auto}
kbd{
  font:inherit;font-size:.78em;font-weight:800;padding:.1em .45em;border-radius:.35em;
  background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
  box-shadow:0 1px 0 var(--line);white-space:nowrap;
}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:60;background:var(--navy-2);color:var(--on-navy);
  padding:10px 16px;border-radius:8px;font-weight:800}
.skip:focus{left:12px}

/* theme-conditional images (two logo files, light ink vs cream ink) */
.dark-only{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .light-only{display:none}
  :root:not([data-theme="light"]) .dark-only{display:block}
}
:root[data-theme="dark"] .light-only{display:none}
:root[data-theme="dark"] .dark-only{display:block}
:root[data-theme="light"] .light-only{display:block}
:root[data-theme="light"] .dark-only{display:none}

/* --- top bar ------------------------------------------------------------- */
.topbar{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;
  height:62px;padding:0 18px;background:var(--surface);
  border-bottom:1px solid var(--line);box-shadow:var(--shadow-1);
}
.brand{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.brand-logo{height:30px;width:auto;display:block}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px}

.icon-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:2px;
  width:40px;height:40px;border-radius:11px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);color:var(--navy);
  font-size:16px;line-height:1;
}
.icon-btn:hover{border-color:var(--gold);color:var(--gold)}
.icon-btn .mode-a{font-family:'Playfair Display',sans-serif;font-weight:800;font-size:12px}
.icon-btn .mode-b{font-family:'Playfair Display',sans-serif;font-weight:800;font-size:19px}
.icon-btn[aria-pressed="true"]{background:var(--navy-2);border-color:var(--navy-2);color:var(--on-navy)}
.bars,.bars::before,.bars::after{
  display:block;width:17px;height:2.5px;border-radius:2px;background:currentColor;content:''}
.bars{position:relative}
.bars::before{position:absolute;top:-6px}
.bars::after{position:absolute;top:6px}
.sun{display:inline}.moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sun{display:none}
  :root:not([data-theme="light"]) .moon{display:inline}
}
:root[data-theme="dark"] .sun{display:none}
:root[data-theme="dark"] .moon{display:inline}
:root[data-theme="light"] .sun{display:inline}
:root[data-theme="light"] .moon{display:none}

.search-open{
  display:flex;align-items:center;gap:9px;height:40px;padding:0 14px;cursor:pointer;
  background:var(--surface-2);border:1px solid var(--line);border-radius:11px;
  color:var(--muted);font:inherit;font-size:.85rem;font-weight:700;
}
.search-open:hover{border-color:var(--gold);color:var(--gold)}
.search-open kbd{margin-left:4px}

/* --- shell + rail -------------------------------------------------------- */
.shell{display:flex;align-items:flex-start}
.rail{
  flex:0 0 var(--rail-w);width:var(--rail-w);position:sticky;top:62px;
  height:calc(100vh - 62px);overflow-y:auto;overscroll-behavior:contain;
  border-right:1px solid var(--line);background:var(--surface);
}
:root[data-rail="off"] .rail{display:none}
.rail-inner{padding:22px 16px 44px;font-size:14.5px}
.nav-level{margin-bottom:22px}
.nav-level-name{
  margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);
  font-family:'Poppins',sans-serif;
}
.nav-unit{margin-bottom:12px}
.nav-unit-name{
  margin:0 0 5px;font-size:13px;font-weight:800;color:var(--muted);
  font-family:'Poppins',sans-serif;text-transform:none;letter-spacing:0;
}
.rail ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.rail li a{
  display:block;padding:7px 11px;border-radius:9px;text-decoration:none;
  color:var(--ink);font-weight:600;line-height:1.35;
}
.rail li a:hover{background:var(--navy-soft);color:var(--navy-2)}
.rail li a[aria-current="page"]{
  background:var(--navy-2);color:var(--on-navy);font-weight:800;box-shadow:var(--shadow-1)}
.keys{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.keys dl{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0;
  font-size:13px;color:var(--muted)}
.keys dt{display:flex;gap:3px}
.keys dd{margin:0}

/* --- main ---------------------------------------------------------------- */
main{flex:1 1 auto;min-width:0;font-size:calc(1rem * var(--scale))}

/* Two layouts share this element. `.reading` is the phase-1 docs column: one
   measure, centred in whatever space the rail leaves. `.wide` is the marketing
   layout — full-bleed sections that set their own width with .wrap inside. */
main.reading{padding:clamp(26px,3.4vw,50px) clamp(20px,4vw,56px) 90px}
main.reading > *{max-width:var(--measure);margin-inline:auto}
.prose{max-width:var(--measure)}
:root[data-rail="off"] main.reading{margin-inline:auto;max-width:1000px}
main.wide{padding:0}

.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-bottom:.7em}
.crumb-level{
  font-size:.7em;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-navy);background:var(--navy-2);padding:.32em .8em;border-radius:999px}
.crumb-unit{font-size:.78em;font-weight:800;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase}
.page-title{margin:0 0 .25em;font-size:2.15em}
.page-summary{
  margin:0 0 1.3em;font-size:1.06em;color:var(--muted);font-weight:600;
  border-left:3px solid var(--gold);padding-left:.85em}
/* Who wrote it, and when it last changed. Quiet on purpose — it is a
   credential, not a headline, so it sits below the summary at small size. */
.byline{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.15em .5em;
  margin:-.5em 0 1.6em;font-size:.84em;font-weight:700;color:var(--muted)}
.byline-dot{opacity:.55}
.byline time{font-variant-numeric:tabular-nums}

/* --- prose --------------------------------------------------------------- */
.prose h1{font-size:2em;margin:1.5em 0 .4em}
.prose h2{
  font-size:1.42em;margin:1.9em 0 .5em;padding-bottom:.28em;
  border-bottom:2px solid var(--gold-soft)}
.prose h3{font-size:1.14em;margin:1.5em 0 .4em;color:var(--ink)}
.prose h4{font-size:1em;margin:1.3em 0 .3em;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 1.05em}
.prose strong{font-weight:800;color:var(--navy)}
.prose em{font-style:italic}
.prose ul,.prose ol{margin:0 0 1.05em;padding-left:1.35em}
.prose li{margin:.3em 0}
.prose li::marker{color:var(--gold)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.prose mark{background:var(--mark);color:inherit;padding:.05em .25em;border-radius:.25em;
  font-weight:800}
.prose del{color:var(--muted)}
.prose code{
  font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:.88em;
  background:var(--gold-soft);color:var(--ink);padding:.13em .4em;border-radius:.35em}
.prose pre{
  margin:0 0 1.2em;padding:14px 16px;border-radius:12px;overflow-x:auto;
  background:var(--surface-2);border:1px solid var(--line)}
.prose pre code{background:none;padding:0;font-size:.85em}

/* definition lists — handy for "term: meaning" grammar notes */
.prose dl{margin:0 0 1.2em}
.prose dt{font-weight:800;color:var(--navy);margin-top:.7em}
.prose dd{margin:.15em 0 0 1.1em;color:var(--muted)}

/* note callout */
.prose blockquote{
  margin:1.3em 0;padding:.95em 1.15em;border-radius:12px;
  background:var(--navy-soft);border-left:4px solid var(--navy-2);color:var(--ink)}
.prose blockquote p:last-child{margin-bottom:0}

/* --- tables -------------------------------------------------------------- */
.prose table{
  width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:.97em;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
  overflow:hidden}
.prose thead th{
  text-align:left;padding:.6em .85em;background:var(--surface-2);
  border-bottom:2px solid var(--line);color:var(--muted);
  font-size:.78em;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.prose td{padding:.58em .85em;border-bottom:1px solid var(--line);vertical-align:top}
.prose tbody tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto;margin-bottom:1.4em}
.table-scroll table{margin-bottom:0}

/* vocabulary: French first, translation muted */
table.vocab td:first-child{
  font-family:'Playfair Display','Poppins',sans-serif;font-weight:700;
  color:var(--navy);white-space:nowrap}
table.vocab td:nth-child(2){color:var(--ink)}
table.vocab td:nth-child(3){color:var(--muted);font-size:.92em;font-style:italic}
table.vocab tbody tr:nth-child(odd){background:var(--surface-2)}

/* conjugation: pronoun column quiet, form emphasised */
table.conj{max-width:32em}
table.conj td:first-child{
  color:var(--muted);font-weight:700;white-space:nowrap;width:7.5em}
table.conj td:not(:first-child){
  font-family:'Playfair Display','Poppins',sans-serif;font-weight:700;
  color:var(--navy);font-variant-numeric:tabular-nums}
table.conj tbody tr:nth-child(odd){background:var(--surface-2)}

/* --- answers (??? answer "Show answer") ---------------------------------- */
.prose details{
  margin:0 0 1.1em;border:1px solid var(--line);border-left:4px solid var(--gold);
  border-radius:12px;background:var(--surface);overflow:hidden}
.prose details > summary{
  cursor:pointer;list-style:none;padding:.7em 1em;font-weight:800;color:var(--navy);
  background:var(--gold-soft);display:flex;align-items:center;gap:.5em}
.prose details > summary::-webkit-details-marker{display:none}
.prose details > summary::before{
  content:'';width:0;height:0;flex:0 0 auto;
  border-left:7px solid currentColor;border-top:5px solid transparent;
  border-bottom:5px solid transparent;transition:transform .18s ease}
.prose details[open] > summary::before{transform:rotate(90deg)}
.prose details > summary:hover{color:var(--gold)}
.prose details > *:not(summary){padding:0 1em}
.prose details > *:not(summary):first-of-type{padding-top:.9em}
.prose details > *:last-child{padding-bottom:.9em;margin-bottom:0}
.reveal-all{
  display:inline-flex;align-items:center;gap:.5em;margin:0 0 1.4em;cursor:pointer;
  padding:.5em 1.1em;border-radius:999px;font:inherit;font-size:.85em;font-weight:800;
  background:var(--surface);border:2px solid var(--gold);color:var(--gold);
  letter-spacing:.03em}
.reveal-all:hover{background:var(--gold);color:#fff}

/* --- audio + pdf cards --------------------------------------------------- */
.audio-card{
  margin:0 0 1.3em;padding:.85em 1em;border-radius:14px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-1)}
.audio-card figcaption{
  display:flex;align-items:center;gap:.55em;margin-bottom:.6em;
  font-weight:800;color:var(--navy);font-size:.95em}
.audio-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.9em;height:1.9em;border-radius:50%;flex:0 0 auto;
  background:var(--navy-2);color:#fff;font-size:.85em}
.audio-card audio{width:100%;display:block}

.pdf-card{
  display:flex;align-items:center;gap:.9em;margin:0 0 1.3em;padding:.8em 1em;
  border-radius:14px;text-decoration:none;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-1);color:var(--ink)}
.pdf-card:hover{border-color:var(--red);color:var(--ink)}
.pdf-icon{
  flex:0 0 auto;padding:.35em .55em;border-radius:7px;background:var(--red);color:#fff;
  font-size:.66em;font-weight:900;letter-spacing:.06em}
.pdf-label{font-weight:800;color:var(--navy)}
.pdf-action{
  margin-left:auto;font-size:.78em;font-weight:800;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase}
.pdf-card:hover .pdf-action{color:var(--red)}

/* --- level cards (home + library) ---------------------------------------- */
.level-grid{
  display:grid;gap:.9em;margin-bottom:2.4em;
  grid-template-columns:repeat(auto-fill,minmax(11.5em,1fr))}
.level-card{
  display:flex;flex-direction:column;gap:.15em;padding:1em 1.1em;border-radius:16px;
  text-decoration:none;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-1);transition:transform .16s ease,border-color .16s ease}
.level-card:hover{transform:translateY(-2px);border-color:var(--gold)}
.level-name{
  font-family:'Playfair Display',sans-serif;font-weight:800;font-size:1.6em;
  color:var(--navy);line-height:1}
.level-count{font-size:.82em;color:var(--muted);font-weight:700}
.level-go{margin-top:.5em;font-size:.8em;font-weight:800;color:var(--gold);
  letter-spacing:.06em;text-transform:uppercase}

/* --- pager + footer ------------------------------------------------------ */
.pager{
  display:flex;gap:1em;justify-content:space-between;margin:3em auto 0;
  padding-top:1.6em;border-top:1px solid var(--line);max-width:var(--measure)}
.pager-link{
  display:flex;flex-direction:column;gap:.15em;padding:.75em 1em;border-radius:12px;
  text-decoration:none;background:var(--surface);border:1px solid var(--line);
  max-width:46%}
.pager-link:hover{border-color:var(--gold)}
.pager-link.next{text-align:right;margin-left:auto}
.pager-dir{font-size:.72em;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold)}
.pager-title{font-weight:800;color:var(--navy);line-height:1.3}

/* the lesson-page nudge towards a demo, below the pager */
.lesson-cta{
  display:flex;align-items:center;gap:1.2em;flex-wrap:wrap;
  margin:2.4em auto 0;max-width:var(--measure);padding:1.1em 1.3em;border-radius:16px;
  background:var(--gold-soft);border:1px solid var(--line)}
.lesson-cta p{margin:0;flex:1 1 18em;color:var(--ink);font-weight:600}
.lesson-cta strong{color:var(--navy)}

/* --- search overlay ------------------------------------------------------ */
.search-layer{
  position:fixed;inset:0;z-index:50;background:rgba(15,26,45,.5);
  backdrop-filter:blur(3px);display:flex;justify-content:center;align-items:flex-start;
  padding:11vh 18px 18px}
.search-layer[hidden]{display:none}
.search-box{
  width:min(660px,100%);max-height:74vh;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-2);overflow:hidden}
.search-input{
  font:inherit;font-size:1.05rem;font-weight:700;padding:17px 20px;border:0;
  border-bottom:1px solid var(--line);background:transparent;color:var(--ink);
  outline:none}
.search-input::placeholder{color:var(--muted);font-weight:600}
.search-results{overflow-y:auto;padding:8px}
.sr-item{
  display:block;width:100%;text-align:left;padding:11px 14px;border-radius:11px;
  text-decoration:none;color:var(--ink);border:0;background:none;font:inherit;
  cursor:pointer}
.sr-item:hover,.sr-item.is-active{background:var(--navy-soft)}
.sr-title{display:block;font-weight:800;color:var(--navy)}
.sr-meta{display:block;font-size:.76rem;font-weight:800;color:var(--gold);
  letter-spacing:.08em;text-transform:uppercase;margin-top:1px}
.sr-snip{display:block;font-size:.86rem;color:var(--muted);margin-top:3px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sr-empty{padding:22px;text-align:center;color:var(--muted);font-weight:700}
.search-hint{
  margin:0;padding:10px 16px;border-top:1px solid var(--line);background:var(--surface-2);
  font-size:.75rem;color:var(--muted);font-weight:700;display:flex;gap:5px;
  align-items:center;flex-wrap:wrap}

/* ==========================================================================
   MARKETING LAYOUT
   Everything below styles the pages outside the lesson library. It reuses the
   same tokens, so light and dark keep working with no extra thought.
   ========================================================================== */

/* --- container + buttons -------------------------------------------------- */
.wrap{width:100%;max-width:1140px;margin-inline:auto;padding-inline:clamp(20px,4vw,32px)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:.62em 1.25em;border-radius:999px;cursor:pointer;text-decoration:none;
  font:inherit;font-weight:800;line-height:1.2;letter-spacing:.01em;
  border:2px solid transparent;transition:transform .16s ease,filter .16s ease}
.btn:hover{transform:translateY(-1px)}
.btn-lg{padding:.8em 1.6em;font-size:1.02em}
.btn-gold{
  background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#3E2C05;
  box-shadow:0 4px 0 rgba(120,86,16,.32)}
.btn-gold:hover{color:#3E2C05;filter:brightness(1.05)}
.btn-ghost{background:var(--surface);border-color:var(--line);color:var(--navy)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
/* Used inside .cta-band, which is blush now rather than navy — white on white
   was invisible. */
.btn-clear{background:var(--surface);border-color:var(--line);color:var(--ink)}
.btn-clear:hover{border-color:var(--gold);color:var(--gold)}

.chip-row{display:flex;flex-wrap:wrap;gap:.5em;margin:0}
.chip{
  display:inline-flex;align-items:center;padding:.42em 1em;border-radius:999px;
  text-decoration:none;font-weight:900;font-size:.9em;
  background:var(--surface);border:2px solid var(--line);color:var(--navy)}
.chip:hover{border-color:var(--gold);color:var(--gold)}

/* --- top bar additions ---------------------------------------------------- */
.site-nav{display:flex;align-items:center;gap:2px;margin-left:6px}
.site-nav a{
  padding:.42em .8em;border-radius:9px;text-decoration:none;color:var(--ink);
  font-weight:700;font-size:.94rem;white-space:nowrap}
.site-nav a:hover{background:var(--navy-soft);color:var(--navy-2)}
.site-nav a[aria-current="page"]{color:var(--navy-2);background:var(--navy-soft);font-weight:800}
.topbar-cta{padding:.5em 1.05em;font-size:.9rem}
/* the rail button is a lesson control on wide screens; on marketing pages it
   is only the mobile menu, so it disappears above the breakpoint */
.narrow-only{display:none}
/* site links live in the topbar on a wide screen, in the drawer below it */
.rail-site{display:none}
/* the sidebar is rendered on every page, but outside a lesson it exists only
   to be the mobile drawer — on a wide screen it takes no space at all */
.shell:not(.has-rail) > .rail{display:none}

/* --- section scaffolding -------------------------------------------------- */
.band-plain{padding:clamp(42px,6vw,74px) 0}
.band-tint{background:var(--surface-2);border-block:1px solid var(--line)}
.section-title{margin:0 0 .35em;font-size:clamp(1.5rem,3vw,2rem)}
.section-lede{margin:0 0 1.7em;max-width:56ch;color:var(--muted);font-weight:600;font-size:1.03em}
.chip-lede{margin-top:2.2em;margin-bottom:.9em}
.prose-narrow{max-width:60ch;margin-inline:0}

.page-head{padding:clamp(34px,5vw,58px) 0 0}
.page-head .page-title{font-size:clamp(2rem,4.4vw,2.7rem);margin-bottom:.2em}
.page-head .page-summary{max-width:60ch}

/* --- headline with the double outline from the Instagram creatives --------
   Three identical layers stacked in one grid cell: a thick navy stroke, a thin
   white stroke, then the gradient fill. Only the top layer is read aloud.
   The stroke colours flip in dark mode — a navy outline on a navy ground is
   invisible. */
:root{
  --hl-out:#22304F; --hl-mid:#FFFFFF; --hl-shadow:rgba(228,87,127,.28);
  --hl-f1:#FFF1F5; --hl-f2:#FBD3DF; --hl-f3:#F08BAB; --hl-f4:#E4577F;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --hl-out:#17121A; --hl-mid:#F6ECF0; --hl-shadow:rgba(0,0,0,.5);
    --hl-f1:#FFFFFF; --hl-f2:#FBDDE6; --hl-f3:#F0879F; --hl-f4:#D95F7E;
  }
}
:root[data-theme="dark"]{
  --hl-out:#17121A; --hl-mid:#F6ECF0; --hl-shadow:rgba(0,0,0,.5);
  --hl-f1:#FFFFFF; --hl-f2:#FBDDE6; --hl-f3:#F0879F; --hl-f4:#D95F7E;
}
.hl{
  font-family:'Playfair Display','Poppins',sans-serif;font-weight:800;
  line-height:1.02;letter-spacing:.2px;text-transform:uppercase;margin:0}
.stk{display:grid}
.stk .ly{grid-area:1/1;position:relative;text-wrap:balance}
.stk .ly.o{
  z-index:1;color:var(--hl-out);-webkit-text-stroke:.15em var(--hl-out);
  paint-order:stroke fill;filter:drop-shadow(0 .085em 0 var(--hl-shadow))}
.stk .ly.m{
  z-index:2;color:var(--hl-mid);-webkit-text-stroke:.066em var(--hl-mid);
  paint-order:stroke fill}
.stk .ly.f{
  z-index:3;color:transparent;
  background:linear-gradient(180deg,var(--hl-f1) 6%,var(--hl-f2) 34%,
                             var(--hl-f3) 78%,var(--hl-f4) 100%);
  -webkit-background-clip:text;background-clip:text}

/* --- hero ----------------------------------------------------------------- */
.hero{
  padding:clamp(34px,5.5vw,68px) 0 clamp(34px,5vw,60px);
  background:radial-gradient(115% 90% at 18% 0%,var(--surface) 0%,var(--ground) 62%)}
.hero-grid{display:grid;gap:clamp(24px,4vw,52px);grid-template-columns:1fr auto;
  align-items:center}
.hero-text{min-width:0}
.eyebrow{
  display:flex;align-items:center;gap:.55em;margin:0 0 .8em;
  font-size:.82rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold)}
.eyebrow img{width:auto;height:1.5em;filter:drop-shadow(0 3px 5px rgba(16,42,84,.24))}
.hero-hl{font-size:clamp(2.3rem,6.2vw,4rem)}
.hero-lede{
  margin:.85em 0 0;max-width:46ch;font-size:clamp(1rem,1.5vw,1.16rem);
  color:var(--muted);font-weight:600}
.hero-lede em{color:var(--navy);font-style:italic;font-weight:700}
.cta-row{display:flex;flex-wrap:wrap;gap:.7em;margin:1.5em 0 0}
.hero-note{
  margin:.95em 0 0;font-size:.82rem;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}

.hero-art{position:relative;flex:0 0 auto;width:340px;max-width:100%}
/* the tilted navy slab behind the photo, straight from the creatives */
.hero-art::before{
  content:'';position:absolute;inset:14px -14px -14px 14px;border-radius:30px;
  background:linear-gradient(150deg,var(--navy-2),var(--navy));opacity:.9}
.hero-photo{
  position:relative;display:block;width:100%;height:auto;border-radius:26px;
  border:8px solid var(--surface);box-shadow:var(--shadow-2);object-fit:cover;
  object-position:50% 12%}
.hero-photo-inset{
  position:absolute;right:-18px;bottom:-22px;width:118px;height:118px;
  border-radius:50%;object-fit:cover;object-position:52% 34%;
  border:7px solid var(--surface);box-shadow:var(--shadow-2)}

/* --- inverted bands ------------------------------------------------------
   The stats strip and the closing CTA are dark navy in BOTH themes, because
   the text on them is always white and gold. They cannot use --navy: that
   token flips to a pale blue in dark mode, which would leave white text on a
   light background. */
:root{ --band-1:#1E3050; --band-2:#18294A; --band-edge:#132340; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --band-1:#2E2029; --band-2:#211721; --band-edge:#160F16; }
}
:root[data-theme="dark"]{
  --band-1:#193C74; --band-2:#0E2245; --band-edge:#0A1830; }

/* Text sitting on a solid --navy-2 chip: the A1 badge, the current lesson in
   the sidebar, the class-mode button when it is on. White in light mode — but
   in dark mode --navy-2 IS the light colour, so white on it is unreadable and
   the text has to go dark instead. */
:root{ --on-navy:#FFFFFF; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --on-navy:#0F1A2C; }
}
:root[data-theme="dark"]{ --on-navy:#0F1A2C; }

/* The mockup puts these on cards, not on a coloured slab — a navy band in a
   rose brand read like a leftover from the old palette. */
.stats-band{background:var(--surface-2);padding:clamp(24px,3.4vw,38px) 0;
  border-block:1px solid var(--line)}
.stats-grid{display:grid;gap:1em;grid-template-columns:repeat(auto-fit,minmax(12em,1fr))}
.stat{
  display:flex;flex-direction:column;align-items:center;gap:.15em;
  text-align:center;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:1.15em 1em;box-shadow:var(--shadow-1)}
.stat-ico{
  width:2.3em;height:2.3em;display:grid;place-items:center;border-radius:50%;
  background:var(--gold-soft);font-size:.95em;margin-bottom:.25em}
.stat-value{
  font-family:'Playfair Display',serif;font-weight:800;color:var(--gold);
  font-size:clamp(1.7rem,3.4vw,2.25rem);line-height:1.1}
.stat-label{
  font-size:.8rem;font-weight:700;letter-spacing:.05em;color:var(--muted);
  text-transform:none;line-height:1.4}

/* --- feature cards -------------------------------------------------------- */
.feature-grid{display:grid;gap:1.1em;grid-template-columns:repeat(auto-fit,minmax(16em,1fr))}
.feature{
  padding:1.4em 1.5em;border-radius:18px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-1)}
.feature-icon{display:block;font-size:1.9rem;line-height:1;margin-bottom:.45em}
.feature h3{margin:0 0 .4em;font-size:1.16em}
.feature p{margin:0;color:var(--muted);font-weight:600}

/* --- time slots ----------------------------------------------------------- */
.slot-row{display:grid;gap:.8em;grid-template-columns:repeat(auto-fit,minmax(15em,1fr))}
.slot{
  display:flex;align-items:center;gap:.7em;padding:.85em 1.1em;border-radius:15px;
  background:var(--surface);border:2px solid var(--gold-soft)}
.slot-icon{font-size:1.25rem;line-height:1}
.slot-name{font-family:'Playfair Display',sans-serif;font-weight:700;color:var(--navy);
  font-size:1.06em}
.slot-time{margin-left:auto;font-weight:900;color:var(--gold);font-size:.86em;
  letter-spacing:.03em;white-space:nowrap}

/* --- testimonial ---------------------------------------------------------- */
.quote-card{
  position:relative;margin:0;max-width:44em;padding:1.7em 1.9em;border-radius:22px;
  background:var(--surface);border:2px solid var(--gold-soft);box-shadow:var(--shadow-2)}
.quote-mark{
  position:absolute;right:.5em;top:-.12em;font-family:'Playfair Display',sans-serif;
  font-size:5rem;line-height:1;color:var(--gold-soft)}
.quote-stars{display:block;color:var(--gold);letter-spacing:.16em;margin-bottom:.4em}
.quote-card blockquote{
  margin:0;font-family:'Playfair Display',sans-serif;font-weight:700;color:var(--navy);
  font-size:clamp(1.15rem,2.3vw,1.5rem);line-height:1.34}
.quote-card figcaption{
  margin-top:.9em;font-size:.83rem;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold)}

/* --- closing CTA band ----------------------------------------------------- */
/* The mockup's pre-footer band is the blush one, not a second navy slab —
   stacking two dark blocks above the footer was the giveaway. */
.cta-band{
  background:linear-gradient(120deg,var(--gold-soft),var(--surface-2));
  border-top:1px solid var(--line);padding:clamp(34px,5vw,56px) 0}
.cta-band-inner{
  display:flex;flex-wrap:wrap;gap:1.6em;align-items:center;justify-content:space-between}
.cta-band h2{margin:0 0 .5em;color:var(--navy);font-size:clamp(1.5rem,3vw,2rem)}
.cta-points{margin:0;padding:0;list-style:none;display:grid;gap:.3em}
.cta-points li{
  position:relative;padding-left:1.5em;color:var(--muted);font-weight:700}
.cta-points li::before{
  content:'✓';position:absolute;left:0;color:var(--gold-2);font-weight:900}
.cta-band-actions{display:flex;flex-wrap:wrap;gap:.7em;align-items:center}

/* --- courses -------------------------------------------------------------- */
.course-grid{display:grid;gap:1.2em;grid-template-columns:repeat(auto-fill,minmax(17.5em,1fr))}
.course-card{
  display:flex;flex-direction:column;padding:1.5em 1.6em;border-radius:20px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);
  scroll-margin-top:80px}
/* wrap so a long badge ("DELF & TEF") drops the name to its own line
   instead of squeezing it into two awkward ones */
.course-head{display:flex;flex-wrap:wrap;align-items:center;gap:.5em .7em;
  margin-bottom:.7em}
.course-level{
  flex:0 0 auto;padding:.3em .85em;border-radius:999px;background:var(--navy-2);color:var(--on-navy);
  font-size:.78em;font-weight:900;letter-spacing:.12em}
.course-name{margin:0;font-size:1.2em}
.course-blurb{margin:0 0 1.1em;color:var(--muted);font-weight:600}
.course-sub{
  margin:0 0 .5em;font-size:.75em;font-weight:900;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold);font-family:'Poppins',sans-serif}
.course-covers{margin:0 0 1.2em;padding:0;list-style:none;display:grid;gap:.25em}
.course-covers li{position:relative;padding-left:1.2em;font-weight:600}
.course-covers li::before{
  content:'';position:absolute;left:.1em;top:.55em;width:5px;height:5px;
  border-radius:50%;background:var(--gold)}
.course-meta{margin:0 0 1.3em;display:grid;gap:.45em}
.course-meta > div{display:flex;gap:.6em;align-items:baseline;
  border-top:1px solid var(--line);padding-top:.45em}
.course-meta dt{
  flex:0 0 8.5em;font-size:.75em;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.course-meta dd{margin:0;font-weight:800;color:var(--navy)}
.course-cta{margin-top:auto;align-self:flex-start}

/* --- FAQ ------------------------------------------------------------------ */
.faq{display:grid;gap:.6em;max-width:52em}
.faq details{
  border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:14px;
  background:var(--surface);overflow:hidden}
.faq summary{
  cursor:pointer;list-style:none;padding:.85em 1.1em;font-weight:800;color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold)}
.faq details p{margin:0;padding:0 1.1em 1em;color:var(--muted);font-weight:600}

/* --- contact -------------------------------------------------------------- */
.contact-grid{display:grid;gap:clamp(28px,4vw,52px);grid-template-columns:1fr 1fr;
  align-items:start}
.channel-list{display:grid;gap:.7em;margin-bottom:2em}
.channel{
  display:flex;align-items:center;gap:.9em;padding:.95em 1.15em;border-radius:16px;
  text-decoration:none;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-1);color:var(--ink)}
.channel:hover{border-color:var(--gold);color:var(--ink);transform:translateY(-1px)}
.channel-icon{font-size:1.4rem;line-height:1}
.channel-text{display:flex;flex-direction:column;gap:.1em;min-width:0}
.channel-text strong{color:var(--navy);font-weight:800}
.channel-text span{font-size:.87em;color:var(--muted);font-weight:600;
  overflow-wrap:anywhere}
.channel.is-unset{opacity:.55;box-shadow:none;border-style:dashed;cursor:default}
.channel.is-unset:hover{transform:none;border-color:var(--line)}

.demo-recap{padding:1.2em 1.4em;border-radius:16px;background:var(--gold-soft);
  border:1px solid var(--line)}
.demo-recap h3{margin:0 0 .5em;font-size:1.02em}
.demo-recap ul{margin:0;padding-left:1.2em;display:grid;gap:.25em}
.demo-recap li{font-weight:600}
.demo-recap li::marker{color:var(--gold)}

.enquiry{display:grid;gap:.9em}
.field{display:grid;gap:.32em}
.field label{font-weight:800;color:var(--navy);font-size:.92em}
.field input,.field select,.field textarea{
  font:inherit;padding:.68em .85em;border-radius:12px;background:var(--surface);
  border:1px solid var(--line);color:var(--ink);width:100%}
.field textarea{resize:vertical;min-height:5.5em}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:3px solid var(--sky);outline-offset:1px;border-color:var(--sky)}
.enquiry .btn{justify-self:start}
.form-fineprint{margin:.2em 0 0;font-size:.83em;color:var(--muted);font-weight:600}
.form-status{margin:0;font-weight:800;color:var(--navy)}
.form-status.is-error{color:var(--red)}
.form-sent{
  margin:0 0 1.2em;padding:.9em 1.1em;border-radius:14px;font-weight:800;
  background:var(--navy-soft);border-left:4px solid var(--navy-2);color:var(--navy)}
.form-sent[hidden]{display:none}
.form-notice{
  padding:1.3em 1.5em;border-radius:16px;background:var(--surface);
  border:2px dashed var(--gold);color:var(--muted)}
.form-notice h3{margin:0 0 .5em;font-size:1.05em;color:var(--gold)}
.form-notice p{margin:0 0 .7em;font-weight:600}
.form-notice p:last-child{margin-bottom:0}

/* --- lesson library index ------------------------------------------------- */
.library-level{margin-bottom:2.6em;scroll-margin-top:80px}
.library-level:last-child{margin-bottom:0}
.library-head{display:flex;align-items:baseline;gap:.8em;margin-bottom:1em;
  padding-bottom:.4em;border-bottom:2px solid var(--gold-soft)}
.library-level-name{margin:0;font-size:1.7em}
.library-count{font-size:.8em;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.library-unit{margin-bottom:1.4em}
.library-unit-name{
  margin:0 0 .6em;font-size:.78em;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);font-family:'Poppins',sans-serif}
.lesson-cards{display:grid;gap:.8em;grid-template-columns:repeat(auto-fill,minmax(17em,1fr))}
.lesson-card{
  display:flex;flex-direction:column;gap:.3em;padding:1.05em 1.2em;border-radius:16px;
  text-decoration:none;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow-1);transition:transform .16s ease,border-color .16s ease}
.lesson-card:hover{transform:translateY(-2px);border-color:var(--gold)}
.lesson-card-title{
  font-family:'Playfair Display',sans-serif;font-weight:700;color:var(--navy);
  font-size:1.1em;line-height:1.24}
.lesson-card-summary{font-size:.89em;color:var(--muted);font-weight:600;line-height:1.45}
.lesson-card-go{
  margin-top:.35em;font-size:.75em;font-weight:900;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold)}
.crumb-home{
  font-size:.72em;font-weight:900;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);text-decoration:none}
.crumb-home:hover{color:var(--gold)}

/* --- site footer ---------------------------------------------------------- */
.foot{
  margin-top:0;padding:clamp(32px,4.5vw,52px) 0 22px;
  background:var(--surface);border-top:1px solid var(--line)}
.foot-grid{display:grid;gap:1.8em;grid-template-columns:2fr 1fr 1fr;align-items:start}
.foot-logo{width:min(15em,80%);height:auto;display:block}
.foot-brand p{margin:.7em 0 0;color:var(--muted);font-weight:700;max-width:26ch}
.foot-col h2{
  margin:0 0 .6em;font-size:.76rem;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);font-family:'Poppins',sans-serif}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.35em}
.foot-col a{color:var(--ink);text-decoration:none;font-weight:700}
.foot-col a:hover{color:var(--gold)}
.foot-base{
  display:flex;flex-wrap:wrap;gap:.6em 1.4em;justify-content:space-between;
  margin-top:2em;padding-top:1.1em;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--muted);font-weight:700;letter-spacing:.04em}

/* --- responsive ---------------------------------------------------------- */
/* Photo columns give up before the text does — the hero art is a fixed 340px
   and the lede needs room, so they stack well above the nav breakpoint. */
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  /* Was order:-1, putting the picture above the headline. The picture now
     carries the taster card, and meeting something to tap before you have
     read what the site is reads as an advert. Headline first. */
  .hero-art{width:250px;margin-inline:auto}
  .hero-photo-inset{width:92px;height:92px;right:-10px;bottom:-14px}
  .hero-text{text-align:center}
  .eyebrow,.cta-row{justify-content:center}
  .hero-lede{margin-inline:auto}
  .contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1 / -1}
}

@media (max-width:900px){
  .rail{
    position:fixed;top:62px;left:0;z-index:25;transform:translateX(-100%);
    transition:transform .2s ease;box-shadow:var(--shadow-2)}
  :root[data-rail="open"] .rail{transform:none}
  :root[data-rail="off"] .rail{display:block}
  /* the drawer is the only navigation below this width, so it exists on
     marketing pages too — see .shell:not(.has-rail) above */
  .shell:not(.has-rail) > .rail{display:block}
  .rail-site{display:block}
  .site-nav{display:none}
  .narrow-only{display:inline-flex}
  main.reading{padding-left:20px;padding-right:20px}
  .search-open-label,.search-open kbd{display:none}
  .search-open{width:40px;padding:0;justify-content:center}
  .pager{flex-direction:column}
  .pager-link{max-width:none}
  .pager-link.next{text-align:left;margin-left:0}
  .cta-band-inner{flex-direction:column;align-items:flex-start}
}

@media (max-width:560px){
  .topbar{gap:10px;padding:0 12px}
  .topbar-cta{display:none}         /* the CTA band and drawer both still carry it */
  .foot-grid{grid-template-columns:1fr}
  .foot-base{flex-direction:column}
  .cta-row .btn{width:100%}
  .course-meta > div{flex-direction:column;gap:.1em}
  .course-meta dt{flex:none}
  .quote-mark{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* --- the gate ------------------------------------------------------------ */
/* Shown in place of a lesson until the passcode opens it. Deliberately calm:
   a student who mistypes should feel prompted, not locked out. */
.gate{
  max-width:34em;margin:clamp(24px,7vh,72px) auto 0;
  padding:clamp(24px,3.4vw,40px);border-radius:18px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2);
}
.gate h1{margin:0 0 .4em;font-size:1.6em}
.gate p{margin:0 0 1.2em;color:var(--muted);font-weight:600}
.gate-row{display:flex;flex-wrap:wrap;gap:10px}
.gate-row input{
  flex:1 1 12em;min-width:0;font:inherit;font-size:1.05em;font-weight:700;
  padding:.6em .9em;border-radius:12px;
  border:1px solid var(--line);background:var(--ground);color:var(--ink);
}
.gate-row input:focus{outline:0;border-color:var(--gold)}
.gate.is-working .gate-row{opacity:.6;pointer-events:none}
.gate-bad{margin:1em 0 0;color:var(--red);font-weight:700}
.gate-bad[hidden]{display:none}
.gate-cta{margin:1.4em 0 0;font-size:.92em}

/* While sealed there is no lesson list to show and nothing for the reading
   tools to act on, so the page is just the gate. gate.js drops the attribute
   the moment the passcode opens it and everything returns. */
:root[data-sealed] .rail,
:root[data-sealed] .rail-toggle,
:root[data-sealed] .search-open,
:root[data-sealed] [data-action="deck"],
:root[data-sealed] [data-action="pad"],
:root[data-sealed] [data-action="class-mode"]{display:none}

/* ==========================================================================
   The front door — the interactive parts a stranger meets first.
   ========================================================================== */

/* --- scroll reveal -------------------------------------------------------- */
/* Sections arrive rather than appearing. Nothing depends on it: without
   JavaScript, or with reduced motion asked for, everything is simply there. */
/* Hidden only once site.js has confirmed it will animate them. Written the
   other way round — hide by default, reveal with JS — the page would stay
   blank for anyone without JavaScript. */
:root[data-motion="on"] .reveal{opacity:0;transform:translateY(14px)}
:root[data-motion="on"] .reveal.shown{
  opacity:1;transform:none;
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);
  /* Dealt, not dropped. Four cards entering together read as one slab moving;
     one beat between them and the same four read as a hand being laid out.
     --i is each element's position among its reveal siblings, set by site.js
     rather than by hand in the templates, so a new grid gets this for free. */
  transition-delay:calc(var(--i, 0) * 90ms);
}

/* --- the hero taster card ------------------------------------------------- */
.taster{
  position:absolute;right:-18px;bottom:16px;z-index:2;width:min(260px,72%);
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow-2);padding:8px;
}
.taster[hidden]{display:none}
.taster-face{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:100%;text-align:left;cursor:pointer;border:0;background:none;
  font:inherit;padding:14px 14px 10px;border-radius:12px;
}
.taster-face:hover{background:var(--surface-2)}
.taster-face.is-turning{animation:taster-turn .26s ease-out}
@keyframes taster-turn{
  from{opacity:0;transform:rotateX(-24deg) translateY(6px)}
  to{opacity:1;transform:none}
}
.taster-tag{
  font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);
}
.taster-word{
  font-family:'Playfair Display',sans-serif;font-weight:700;line-height:1.15;
  font-size:1.5rem;color:var(--navy);text-wrap:balance;
}
.taster-note{font-size:.8rem;color:var(--muted);font-style:italic;margin-top:2px}
.taster-hint{font-size:.74rem;font-weight:800;color:var(--muted);opacity:.85;margin-top:4px}
.taster-dots{display:flex;gap:4px;justify-content:center;padding:0 0 6px}
.taster-dots i{width:5px;height:5px;border-radius:50%;background:var(--line)}
.taster-dots i.on{background:var(--gold);transform:scale(1.25)}

@media (max-width:860px){
  /* relative, not static: z-index does nothing on a static element, and the
     hero's decorative panel then paints straight over the card. */
  .taster{position:relative;right:auto;bottom:auto;width:auto;margin-top:14px}
}

/* --- founder -------------------------------------------------------------- */
.founder{
  display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,38px);align-items:center;
  max-width:60em;margin-inline:auto;
}
.founder-photo{flex:none}
.founder-photo img{
  width:clamp(120px,20vw,180px);height:auto;border-radius:50%;
  border:3px solid var(--gold-soft);box-shadow:var(--shadow-1);
}
.founder-text{flex:1 1 22em;min-width:0}
.founder-text h2{margin:0 0 .5em;font-size:1.6em}
.founder-text p{margin:0 0 .8em;color:var(--muted);font-weight:600}
.founder-more a{font-weight:800}

/* --- sample lesson cards -------------------------------------------------- */
.sample-grid{
  display:grid;gap:14px;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
}
.sample-card{
  display:flex;flex-direction:column;gap:5px;
  padding:20px;border-radius:16px;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.sample-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:var(--shadow-2)}
.sample-level{
  font-size:.66em;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);
}
.sample-title{
  font-family:'Playfair Display',sans-serif;font-weight:700;font-size:1.16em;
  color:var(--navy);line-height:1.2;
}
.sample-summary{font-size:.9em;color:var(--muted);font-weight:600;flex:1 1 auto}
.sample-go{margin-top:.5em;font-size:.8em;font-weight:800;color:var(--gold)}

/* --- the "start playing" band and the playground -------------------------- */
.play-band{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  margin-top:28px;padding:clamp(20px,3vw,30px);border-radius:18px;
  background:var(--navy-soft);border:1px solid var(--line);
}
.play-band h3{margin:0 0 .3em;font-size:1.3em}
.play-band p{margin:0;color:var(--muted);font-weight:600;max-width:44ch}

.play-grid{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.play-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:24px;border-radius:18px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-1);
}
.play-card h3{margin:0;font-size:1.35em}
.play-card p{margin:0 0 .6em;color:var(--muted);font-weight:600;flex:1 1 auto}
.play-kind{
  font-size:.66em;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .taster-face.is-turning{animation:none}
  .sample-card:hover{transform:none}
}

/* --- the placement quiz --------------------------------------------------- */
.quiz{
  max-width:38em;margin-inline:auto;
  padding:clamp(22px,3.4vw,36px);border-radius:20px;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2);
}
.quiz-bar{height:4px;border-radius:999px;background:var(--line);overflow:hidden}
.quiz-bar i{display:block;height:100%;background:var(--gold);transition:width .3s ease}
.quiz-count{
  margin:14px 0 0;font-size:.72rem;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.quiz-ask{
  margin:.35em 0 1.1em;font-family:'Playfair Display',sans-serif;font-weight:700;
  font-size:clamp(1.35rem,3vw,1.75rem);color:var(--navy);line-height:1.25;
}
.quiz-options{display:grid;gap:9px}
.quiz-option{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  font:inherit;font-size:1.02rem;font-weight:700;cursor:pointer;
  padding:.7em .9em;border-radius:12px;
  border:1px solid var(--line);background:var(--ground);color:var(--ink);
  transition:border-color .14s,background .14s,transform .14s;
}
.quiz-option:hover{border-color:var(--gold);background:var(--gold-soft);transform:translateX(2px)}
.quiz-option kbd{
  flex:none;width:1.7em;height:1.7em;display:grid;place-items:center;
  font:inherit;font-size:.74em;font-weight:900;border-radius:6px;
  background:var(--navy-soft);color:var(--navy);
}
.quiz-back{
  margin-top:14px;font:inherit;font-size:.82rem;font-weight:800;cursor:pointer;
  border:0;background:none;color:var(--muted);padding:0;
}
.quiz-back:hover{color:var(--navy)}

.quiz-level{
  margin:.3em 0 .2em;font-family:'Playfair Display',sans-serif;font-weight:700;
  font-size:clamp(1.6rem,4vw,2.2rem);color:var(--navy);
}
.quiz-says,.quiz-next{margin:0 0 1em;color:var(--muted);font-weight:600}
.quiz-next{padding-top:1em;border-top:1px solid var(--line)}
.quiz-bands{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:1.2em 0}
.quiz-band{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:.6em .2em;border-radius:10px;
  background:var(--ground);border:1px solid var(--line);
}
.quiz-band span{font-size:.7rem;font-weight:900;letter-spacing:.1em;color:var(--muted)}
.quiz-band b{font-size:1.05rem;color:var(--muted)}
.quiz-band.is-pass{background:var(--gold-soft);border-color:var(--gold)}
.quiz-band.is-pass span,.quiz-band.is-pass b{color:var(--gold)}
.quiz-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

@media (prefers-reduced-motion:reduce){
  .quiz-option:hover{transform:none}
  .quiz-bar i{transition:none}
}

/* --- free resources + blog (from the brand mockup) ----------------------- */
.res-grid,.post-grid{
  display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.res-card,.post-card{
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:1.5rem 1.6rem;box-shadow:var(--shadow-1);display:flex;
  flex-direction:column;gap:.5rem}
.post-card{text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.post-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);
  border-color:var(--gold)}
a.post-card,a.post-card *{text-decoration:none}
.res-ico,.post-emoji{font-size:1.7rem;line-height:1}
.res-card h2,.post-card h2{font-size:1.16em;margin:.2em 0 0}
.res-level{margin:0;font-size:.78em;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold)}
.res-card p,.post-card p{margin:0;color:var(--muted);font-size:.95em;
  line-height:1.6}
.res-status{
  margin-top:auto;padding-top:.7rem;font-size:.78em;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.post-more{margin-top:auto;padding-top:.7rem;font-weight:800;font-size:.9em;
  color:var(--gold)}
.res-note{margin:1.6rem 0 0;color:var(--muted);font-size:.95em;
  max-width:60ch;font-weight:600}
.post-back{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid var(--line);
  font-weight:800}

/* six things this course gives you — the mockup's icon strip */
.perks{display:grid;gap:1.4rem;grid-template-columns:repeat(6,minmax(0,1fr))}
@media (max-width:1080px){.perks{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.perks{grid-template-columns:repeat(2,minmax(0,1fr))}}
.perk{text-align:center}
.perk .perk-ico{
  width:3rem;height:3rem;margin:0 auto .7rem;display:grid;place-items:center;
  border-radius:50%;background:var(--gold-soft);font-size:1.25rem}
.perk b{display:block;font-size:.98em;margin-bottom:.25em}
.perk p{margin:0;font-size:.86em;color:var(--muted);line-height:1.55}

/* --- learning path cards (the mockup's illustrated level cards) ---------- */
.path-grid{
  display:grid;gap:1.1rem;margin-top:26px;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.path-card{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;box-shadow:var(--shadow-1);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.path-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);
  border-color:var(--gold)}
a.path-card,a.path-card *{text-decoration:none}
.path-art{
  position:relative;display:block;aspect-ratio:16/10;
  background:linear-gradient(160deg,var(--surface-2),var(--gold-soft));
  color:var(--gold)}
.path-art-svg{position:absolute;inset:0;width:100%;height:100%}
.path-badge{
  position:absolute;top:.75rem;left:.75rem;z-index:2;min-width:2.3em;height:2.3em;
  padding:0 .6em;border-radius:999px;background:var(--gold);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:.82em;
  letter-spacing:.02em;box-shadow:var(--shadow-1)}
.path-body{display:flex;flex-direction:column;gap:.45em;padding:1.1rem 1.2rem 1.3rem;
  flex:1}
.path-name{font-family:'Playfair Display',serif;font-weight:700;font-size:1.12em;
  color:var(--navy)}
.path-blurb{color:var(--muted);font-size:.9em;line-height:1.55;font-weight:600}
.path-go{margin-top:auto;padding-top:.7em;font-weight:800;font-size:.86em;
  color:var(--gold)}

/* blog cards get an illustrated header, like the mockup's image cards */
.post-card{padding:0;overflow:hidden}
.post-art{
  display:grid;place-items:center;aspect-ratio:16/9;font-size:2.2rem;
  background:linear-gradient(150deg,var(--gold-soft),var(--surface-2));
  border-bottom:1px solid var(--line)}
.post-card > :not(.post-art){margin-inline:1.4rem}
.post-card > h2{margin-top:1.1rem}
.post-card > .post-more{margin-bottom:1.3rem}

/* --- home, laid out from the mockup -------------------------------------- */
.section-title.center{text-align:center}
/* the little rose rule with a heart sitting on it, under each section title */
.rule-heart{
  width:64px;height:2px;background:var(--gold);border-radius:2px;
  margin:.7em auto 1.8em;position:relative}
.rule-heart::after{
  content:"\2665";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--ground);color:var(--gold);font-size:.7rem;padding:0 .4em}
.band-tint .rule-heart::after{background:var(--surface-2)}

/* hero art: the picture sits in a soft rounded frame with the script over it */
.hero-art{position:relative}
.hero-script{
  position:absolute;left:4%;top:6%;z-index:2;margin:0;
  font-family:'Dancing Script',cursive;font-weight:600;
  font-size:clamp(1rem,2.1vw,1.5rem);line-height:1.5;color:var(--navy);
  text-shadow:0 1px 3px rgba(255,255,255,.7)}

/* two-column: resources on the left, blog on the right */
.two-col{display:grid;gap:clamp(1.8rem,4vw,3.4rem);
  grid-template-columns:minmax(0,.8fr) minmax(0,1.35fr);align-items:start}
@media (max-width:900px){.two-col{grid-template-columns:1fr}}
.mini-grid{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr))}
.mini{
  display:flex;flex-direction:column;align-items:center;gap:.5em;text-align:center;
  padding:1.1em .7em;border-radius:14px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-1);text-decoration:none;
  color:inherit;transition:transform .18s ease,box-shadow .18s ease}
.mini:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);
  border-color:var(--gold)}
a.mini,a.mini *{text-decoration:none}
.mini span{font-size:1.5rem;line-height:1}
.mini b{font-size:.8rem;font-weight:700;line-height:1.4;color:var(--navy)}
.mini-more{text-align:center;margin-top:1.2rem}

/* Prachi, her words, and the four figures */
.founder-band{
  display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:center;
  grid-template-columns:auto minmax(0,1.1fr) minmax(0,1.15fr)}
@media (max-width:1000px){
  .founder-band{grid-template-columns:1fr;text-align:center;justify-items:center}
}
.founder-photo{flex:none}
.founder-photo img,.founder-blank{
  width:clamp(140px,15vw,190px);aspect-ratio:1;border-radius:50%;
  object-fit:cover;display:grid;place-items:center;
  border:5px solid var(--surface);box-shadow:var(--shadow-2);
  background:linear-gradient(150deg,var(--gold-soft),var(--surface-2));
  font-size:3rem}
.founder-text h2{margin:0 0 .3em;font-size:clamp(1.5rem,3vw,2rem)}
.founder-role{margin:0 0 .8em;color:var(--gold);font-size:.86em;font-weight:700}
.founder-text p{margin:0 0 .8em;color:var(--muted);font-weight:600}
.founder-sign{
  font-family:'Dancing Script',cursive;font-size:1.5rem;font-weight:700;
  color:var(--gold) !important}
.heart{color:var(--gold)}
.founder-stats{display:grid;gap:.8rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:520px){.founder-stats{grid-template-columns:1fr}}

/* student quotes */
.say-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}
.say{
  margin:0;padding:1.3em 1.5em;border-radius:18px;background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--shadow-1);position:relative}
.say-mark{
  position:absolute;top:.1em;left:.6rem;font-family:'Playfair Display',serif;
  font-size:2.6rem;line-height:1;color:var(--gold);opacity:.32}
.say blockquote{margin:0 0 1em;padding-left:1.3rem;font-weight:600;
  font-size:.95em;line-height:1.6}
.say figcaption{display:flex;align-items:center;gap:.6em;font-size:.84em;
  color:var(--muted);font-weight:700}
.say-av{
  width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;
  background:var(--gold-soft);color:var(--gold);font-weight:800;flex:0 0 auto}

/* --- home hero, set the way the mockup sets it ---------------------------- */
.hero-hl{
  font-family:'Playfair Display',serif;font-weight:700;color:var(--navy);
  font-size:clamp(2.1rem,4.6vw,3.3rem);line-height:1.18;letter-spacing:-.015em;
  margin:0 0 .55em;text-shadow:none}
.hero-hl .accent{color:var(--gold)}
/* four across, like the mockup, and never fewer than two */
.path-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1100px){.path-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.path-grid{grid-template-columns:1fr}}
.two-col .mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.two-col .post-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1100px){.two-col .post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.two-col .post-grid{grid-template-columns:1fr}}
/* keep the script clear of the face in the photo */
.hero-script{left:auto;right:6%;top:3%;text-align:right}

/* --- announcement bar ----------------------------------------------------- */
.hello-bar{background:var(--surface-2);border-bottom:1px solid var(--line);
  font-size:.8rem;color:var(--muted)}
.hello-in{
  max-width:1180px;margin-inline:auto;padding:.45em clamp(14px,3vw,22px);
  display:flex;flex-wrap:wrap;gap:.9em;align-items:center;font-weight:600}
.hello-soc{margin-left:auto;display:flex;gap:1em}
.hello-soc a{color:var(--gold);text-decoration:none;font-weight:700}
.hello-soc a:hover{text-decoration:underline}
@media (max-width:600px){.hello-bar{display:none}}

/* the script line, now above the picture instead of on top of it */
.hero-script{
  position:static;margin:0 0 .7em;text-align:center;
  font-family:'Dancing Script',cursive;font-weight:600;color:var(--gold);
  font-size:clamp(1.15rem,2.3vw,1.5rem);line-height:1.3;text-shadow:none}
.hero-script em{font-style:normal;color:var(--navy)}
/* the script sign-off under the hero buttons */
.hero-text .hero-script{text-align:left;margin:1.1em 0 0}

/* --- the drawn Paris scene in the hero ----------------------------------- */
.hero-art{width:min(430px,100%)}
.hero-scene{
  position:relative;border-radius:26px;overflow:hidden;
  border:8px solid var(--surface);box-shadow:var(--shadow-2);line-height:0}
.paris{display:block;width:100%;height:auto}
.hero-script.on-scene{
  position:absolute;left:6%;top:8%;z-index:2;margin:0;text-align:left;
  font-family:'Dancing Script',cursive;font-weight:700;color:#43303A;
  font-size:clamp(1.05rem,1.9vw,1.45rem);line-height:1.35;
  text-shadow:0 1px 4px rgba(255,255,255,.6)}
/* the flip-card sits on the scene, as the photo inset used to */
.hero-art .taster{right:-14px;bottom:-10px}
@media (max-width:860px){.hero-art .taster{right:0}}
/* give the scene room, and keep the flip-card off the tower */
.hero-art{width:min(500px,100%)}
.hero-art .taster{
  right:auto;left:-16px;bottom:-14px;width:min(215px,64%)}
@media (max-width:860px){.hero-art .taster{left:0}}
.hero-script.on-scene{left:auto;right:5%;top:7%;text-align:right}
/* the art column was `auto`, which shrank to the old 340px photo; give the
   drawn scene a real share of the row */
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,.95fr)}
@media (max-width:860px){.hero-grid{grid-template-columns:1fr}}
.hero-art{width:100%;max-width:520px;justify-self:end}
/* keep the script clear of the blossom branch */
.hero-script.on-scene{right:auto;left:6%;top:9%;text-align:left;max-width:60%}

/* --- hero, as the mockup stages it --------------------------------------- */
/* a pale band with a curved bottom edge, and the picture running off the
   right-hand side of the page rather than sitting in a frame */
.hero{
  position:relative;background:linear-gradient(180deg,var(--surface-2),var(--gold-soft));
  padding-block:clamp(2.4rem,5vw,4rem) clamp(4.5rem,9vw,7rem);overflow:hidden}
.hero::after{
  content:"";position:absolute;left:-6%;right:-6%;bottom:-7vw;height:14vw;
  min-height:78px;background:var(--ground);
  border-radius:50% 50% 0 0 / 100% 100% 0 0}
.hero-grid{position:relative;z-index:2;align-items:center}
.hero-art{max-width:none;justify-self:stretch}
/* full bleed: let the scene run past the container to the viewport edge */
.hero-scene{
  border:0;border-radius:22px 0 0 22px;box-shadow:none;
  margin-right:calc(50% - 50vw)}
@media (max-width:860px){
  .hero-scene{margin-right:0;border-radius:22px}
}
.hero-art::before{display:none}          /* the old navy slab */
.hero-hl{margin-bottom:.45em}
.doodle-heart{width:58px;height:38px;color:var(--gold);display:block;
  margin:-.2em 0 .6em}
.hero-lede{margin-top:0}

/* the four channels in the announcement bar */
.hello-label{color:var(--muted);font-weight:600}
.hello-soc a{
  display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;
  border-radius:50%;background:var(--surface);color:var(--gold);
  font-size:.62rem;font-weight:800;text-decoration:none;
  border:1px solid var(--line)}
.hello-soc a:hover{background:var(--gold);color:#fff;border-color:var(--gold)}

/* --- the brand lockup ----------------------------------------------------- */
.brand{display:flex;align-items:center;gap:.55rem;text-decoration:none;
  color:var(--navy);line-height:1.1}
.brand-mark{width:1.5rem;height:2.1rem;flex:0 0 auto;color:var(--gold)}
.brand-words b{
  display:block;font-family:'Playfair Display',serif;font-weight:700;
  font-size:1.22rem;letter-spacing:-.01em}
.brand-words b i{font-style:normal;color:var(--gold)}
.brand-words small{
  display:block;font-family:'Dancing Script',cursive;font-weight:600;
  font-size:.82rem;color:var(--muted);white-space:nowrap}
@media (max-width:760px){.brand-words small{display:none}}
/* Bound the bleed. Without a height the scene scaled with the viewport and the
   blossom branch — the whole point of the picture — ran off the right edge. */
.hero-scene{height:clamp(360px,40vw,540px)}
.paris{width:100%;height:100%;display:block}
@media (max-width:860px){.hero-scene{height:clamp(260px,58vw,360px)}}
/* The negative-margin bleed pushed the scene's right edge past the viewport,
   and the blossom branch lives on that edge. Keep the picture inside the
   container: large, whole, and with the branch actually in frame. */
.hero-scene{margin-right:0;border-radius:22px;height:clamp(340px,34vw,470px)}
@media (max-width:860px){.hero-scene{height:clamp(250px,54vw,340px)}}
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}

/* --- real pictures, lifted from the brand mockup -------------------------- */
.hero-paris{width:100%;height:100%;object-fit:cover;object-position:50% 45%;
  display:block}
/* the mockup's level card: words on the left, picture on the right */
.path-card{flex-direction:row;align-items:stretch}
.path-body{position:relative;flex:1 1 55%;min-width:0;padding:1.1rem 0 1.2rem 1.1rem}
.path-art{flex:0 0 44%;aspect-ratio:auto;background:none;position:relative}
.path-art-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 45%}
.path-badge{position:static;display:inline-grid;margin-bottom:.6em;box-shadow:none}
.post-art img{width:100%;height:100%;object-fit:cover;display:block}
/* the picture takes a little less, so the words are not squeezed into columns */
.path-art{flex:0 0 40%}
.path-body{padding:1rem .5rem 1.1rem 1rem}
.path-name{font-size:1.02em;line-height:1.25}
.path-blurb{font-size:.82em;line-height:1.5}
.path-go{font-size:.8em;padding-top:.6em}
.path-badge{font-size:.74em;padding:.15em .7em;min-width:0;height:auto}
@media (max-width:1100px){.path-art{flex:0 0 42%}}

/* --- hero picture: panoramic, and running to the page edge ---------------- */
/* The photo is 2.45:1. Forcing it into a tall box and cropping the sides is
   what made it read as a cut-out instead of the mockup's wide band, so the
   box now takes the picture's own shape.
   The bleed is computed from the real container width (1140px + its padding)
   rather than the 50%/50vw trick, which over-shot and pushed the blossom
   branch off the right of the screen. */
.hero-scene{
  height:auto;aspect-ratio:auto;border-radius:22px 0 0 22px;overflow:hidden;
  margin-right:calc(-1 * (max(0px, (100vw - 1140px) / 2) + clamp(20px,4vw,32px)))}
.hero-paris{width:100%;height:auto;object-fit:fill}
.hero-grid{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
@media (max-width:860px){
  .hero-scene{margin-right:0;border-radius:22px}
  .hero-grid{grid-template-columns:1fr}
}
/* the flip-card overlapped the tower; tuck it to the lower left of the band */
.hero-art .taster{left:-20px;bottom:-26px;width:min(210px,58%)}

/* Feather the photo into the band so it stops reading as a rectangle laid on
   top of the page. The crop already fades on its left; this carries that into
   the top and bottom edges too, which is what the mockup does. */
.hero-scene{
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 12%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 12%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%);
  mask-composite:intersect;
  border-radius:0}

/* --- measured off the mockup --------------------------------------------- */
/* Bands, in the order they appear. Each was sampled at x=8 down the page:
   announce #FDE0E2 · hero #FFF3F3 · mid #FFF9F9 · Prachi #F5E9EB
   · testimonials #FFF7F8 · newsletter #F7E1E3 · footer #18294A */
.hello-bar{background:#FDE0E2;border-bottom:0}
.hero{background:#FFF3F3}
.hero::after{background:var(--ground)}
.band-plain{background:var(--ground)}
.band-tint{background:#FFF9F9}
.founder-band{--band-bg:#F5E9EB}
.band-plain:has(.founder-band){background:#F5E9EB}
.cta-band{background:#F7E1E3;border-top:0}
footer.foot{background:#18294A}

/* Proportions, taken from the mockup at 853px wide and scaled to a 1280 design
   (÷0.666). Section padding is what sets the page's visual density and mine
   was consistently too generous. */
.hero{padding-block:clamp(2rem,4.2vw,3.2rem) clamp(3.6rem,7vw,5.4rem)}
section.band-plain{padding-block:clamp(1.9rem,4vw,3rem)}
.perks{padding-block:clamp(1.6rem,3.4vw,2.6rem)}
.sec-title{margin-bottom:1.4rem}
.rule-heart{margin:.55em auto 1.5em}

/* --- density: the mockup is markedly tighter than what I had -------------- */
/* At 1280 wide the mockup's whole page is ~1920px tall; mine was ~3200. Type
   and padding were both too generous. */
html{font-size:15.5px}
section.band-plain{padding-block:clamp(1.5rem,3.1vw,2.3rem)}
.hero{padding-block:clamp(1.6rem,3.2vw,2.5rem) clamp(3rem,6vw,4.6rem)}
.perks{padding-block:clamp(1.2rem,2.6vw,2rem);gap:1rem}
.perk p{font-size:.8em;line-height:1.5}
.perk b{font-size:.92em}
.sec-title{margin-bottom:1.1rem}
.section-title{font-size:clamp(1.35rem,2.6vw,1.85rem)}
.rule-heart{margin:.5em auto 1.2rem}
.hero-lede{font-size:1em}
.path-blurb{font-size:.78em}
.post-body h2,.post-card h3{font-size:.96em}
.post-card p{font-size:.82em}

/* Prachi's figures are one row of four in the mockup, not a 2x2 block */
.founder-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
@media (max-width:900px){.founder-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.founder-band{grid-template-columns:auto minmax(0,1fr);row-gap:1.4rem}
.founder-stats{grid-column:1 / -1}
.stat{padding:.85em .6em;border-radius:14px}
.stat-value{font-size:clamp(1.3rem,2.4vw,1.7rem)}
.stat-label{font-size:.7rem}
.stat-ico{width:1.9em;height:1.9em;font-size:.85em;margin-bottom:.15em}

/* testimonials with an arrow either side */
.say-row{display:flex;align-items:center;gap:.8rem}
.say-grid{flex:1;min-width:0}
.say-arrow{
  flex:0 0 auto;width:2rem;height:2rem;border-radius:50%;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--gold);
  font-size:1.1rem;line-height:1;box-shadow:var(--shadow-1)}
.say-arrow:hover{background:var(--gold);color:#fff;border-color:var(--gold)}
.say{padding:1em 1.2em}
.say blockquote{font-size:.85em}

/* the newsletter band, replacing the demo CTA */
.news-band{background:#F7E1E3;padding-block:clamp(1.3rem,2.6vw,2rem)}
.news{display:flex;flex-wrap:wrap;gap:1rem 1.4rem;align-items:center;
  justify-content:center}
.news-ico{width:2.6rem;height:2.6rem;border-radius:12px;background:var(--gold);
  color:#fff;display:grid;place-items:center;font-size:1.1rem;flex:0 0 auto}
.news-words h2{font-size:1.15rem;margin:0}
.news-words p{margin:.15em 0 0;font-size:.85rem;color:var(--muted);max-width:34ch}
.news-form{display:flex;gap:.5rem;flex-wrap:wrap;margin-left:auto}
.news-form input{
  font:inherit;font-size:.9rem;padding:.7em 1.1em;border-radius:999px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink);
  min-width:15rem}
@media (max-width:760px){.news-form{margin-left:0;width:100%}
  .news-form input{flex:1 1 12rem;min-width:0}}

/* ==========================================================================
   Measured against the mockup (head.jpg) at 1280px and corrected in the order
   the spec asks for: section heights first, then hero, then cards.
   Mockup targets at 1280: hero ~370, Prachi 182, testimonials 158,
   newsletter 87. Everything below closes a measured gap.
   ========================================================================== */

/* hero: headline was 51px against the mockup's ~39px, and the bottom padding
   was doing most of the damage */
.hero-hl{font-size:clamp(1.75rem,3.1vw,2.45rem);line-height:1.16;margin-bottom:.35em}
.hero{padding-block:clamp(1rem,2.1vw,1.6rem) clamp(1.8rem,3.6vw,2.7rem)}
.hero::after{height:9vw;min-height:52px;bottom:-4.5vw}
.doodle-heart{width:44px;height:28px;margin:-.1em 0 .45em}
.hero-lede{font-size:.95em;margin-bottom:1.1em;max-width:34ch}
.cta-row{gap:.6rem}
.btn-lg{padding:.72em 1.4em;font-size:.92em}
.hero-art .taster{width:min(180px,52%);left:-10px;bottom:-16px}

/* Prachi: the mockup runs portrait, words and figures as ONE row */
.founder-band{
  grid-template-columns:auto minmax(0,1.05fr) minmax(0,1.15fr);
  align-items:center;row-gap:0;gap:clamp(1rem,2.4vw,2rem)}
.founder-stats{grid-column:auto;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.5rem}
@media (min-width:1100px){.founder-stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:900px){
  .founder-band{grid-template-columns:1fr}
  .founder-stats{grid-column:1 / -1}
}
.founder-photo img,.founder-blank{width:clamp(96px,10vw,132px);border-width:4px}
.founder-text h2{font-size:clamp(1.15rem,2.2vw,1.5rem);margin-bottom:.2em}
.founder-role{font-size:.78em;margin-bottom:.5em}
.founder-text p{font-size:.86em;margin-bottom:.5em;line-height:1.55}
.founder-sign{font-size:1.15rem}
.founder-more{font-size:.85em}
.stat{padding:.6em .5em}
.stat-value{font-size:clamp(1.05rem,1.9vw,1.35rem)}
.stat-label{font-size:.64rem;line-height:1.3}
.stat-ico{width:1.6em;height:1.6em;font-size:.75em;margin-bottom:.1em}

/* testimonials + newsletter: trim to the measured heights */
.say{padding:.85em 1em}
.say blockquote{font-size:.8em;margin-bottom:.7em;line-height:1.5}
.say figcaption{font-size:.76em}
.say-mark{font-size:2rem}
.news-band{padding-block:clamp(.9rem,1.8vw,1.35rem)}
.news-words h2{font-size:1.02rem}
.news-words p{font-size:.78rem}
.news-form input{padding:.6em 1em;font-size:.85rem;min-width:13rem}

/* --- footer, rebuilt to the mockup --------------------------------------- */
footer.foot{position:relative;overflow:hidden;background:#18294A;color:#EEF1F7;
  padding-block:clamp(1.6rem,3.2vw,2.4rem) 0;margin-top:0}
.foot-eiffel{position:absolute;right:3%;bottom:2.4rem;width:min(120px,12vw);
  color:#fff;opacity:.14;pointer-events:none}
.foot-grid{
  display:grid;gap:1.4rem 1.6rem;position:relative;z-index:2;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.85fr)) minmax(0,1.25fr)}
@media (max-width:1000px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-word{
  display:block;font-family:'Playfair Display',serif;font-weight:700;
  font-size:1.2rem;margin-bottom:.5em}
.foot-word i{font-style:normal;color:var(--gold)}
.foot-brand p{margin:0 0 .45em;font-size:.8rem;opacity:.78;line-height:1.55}
.foot-soc{display:flex;gap:.45rem;margin-top:.8rem}
.foot-soc a{
  width:1.7rem;height:1.7rem;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#fff;text-decoration:none;
  font-size:.58rem;font-weight:800}
.foot-soc a:hover{background:var(--gold)}
.foot-col h2{
  font-family:'Poppins',sans-serif;font-size:.86rem;font-weight:700;
  color:#fff;margin:0 0 .7em}
.foot-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.42em}
.foot-col li,.foot-col a{font-size:.78rem;line-height:1.5}
.foot-col a{color:#EEF1F7;opacity:.76;text-decoration:none}
.foot-col a:hover{opacity:1;color:var(--gold)}
.foot-contact li{display:flex;gap:.5em;align-items:flex-start;opacity:.76}
.foot-talk{
  display:inline-block;margin-top:.9rem;border:1.5px solid var(--gold);
  color:var(--gold);border-radius:999px;padding:.45em 1.2em;font-size:.8rem;
  font-weight:700;text-decoration:none}
.foot-talk:hover{background:var(--gold);color:#fff}
.foot-base{
  position:relative;z-index:2;margin-top:1.4rem;padding-block:.85rem;
  border-top:1px solid rgba(255,255,255,.14);display:flex;flex-wrap:wrap;
  gap:.8rem;justify-content:space-between;font-size:.72rem;opacity:.7}

/* free resources: one row of four, as the mockup has */
.two-col .mini-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.mini{padding:.85em .55em;gap:.35em}
.mini span{font-size:1.2rem}
.mini b{font-size:.72rem}

/* Free Resources is a single row of four in the mockup, not a 2x2 block */
.two-col .mini-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem}
.mini{padding:.7em .35em;gap:.3em}
.mini span{font-size:1.05rem}
.mini b{font-size:.64rem;line-height:1.35}
.mini-more{margin-top:.9rem}
@media (max-width:900px){.two-col .mini-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* last of the vertical trim: still ~30% over the measured target */
section.band-plain{padding-block:clamp(1.2rem,2.5vw,1.85rem)}
.news-band{padding-block:clamp(.75rem,1.5vw,1.1rem)}
.perks{padding-block:clamp(1rem,2.1vw,1.6rem)}
.section-title{font-size:clamp(1.2rem,2.3vw,1.6rem)}
.rule-heart{margin:.45em auto 1rem}
.path-body{padding:.85em .45em .95em .85em}
.post-body,.post-card{font-size:.97em}
.founder-band{gap:clamp(.8rem,2vw,1.6rem)}
footer.foot{padding-block:clamp(1.3rem,2.6vw,1.9rem) 0}

/* ------------------------------------------------- the student-library door */
/* Not a menu item. The library is private, so it reads as a door for the
   people it belongs to rather than an invitation to everyone else. */
.topbar-door{
  display:inline-flex;align-items:center;gap:.35em;white-space:nowrap;
  font-weight:700;font-size:.86rem;text-decoration:none;
  color:var(--muted);border:1px solid var(--line);border-radius:999px;
  padding:.5rem .85rem;transition:color .18s ease,border-color .18s ease}
.topbar-door:hover,.topbar-door[aria-current="page"]{
  color:var(--brand);border-color:var(--brand)}
@media (max-width:1100px){.topbar-door{display:none}}

/* The free lessons shown above the passcode box. */
.open-samples{padding-top:.5rem}
.open-samples-head{font-size:1.5rem;margin:0 0 .25rem}
.open-samples-lede{color:var(--muted);max-width:62ch;margin:0 0 1.4rem}
.open-samples-cta{margin-top:1.4rem}
.lesson-card-sum{display:block;color:var(--muted);font-size:.9em;margin-top:.3em;
  line-height:1.5}
.lesson-card-meta{display:block;color:var(--muted);font-size:.78em;margin-top:.55em;
  letter-spacing:.05em;text-transform:uppercase;font-weight:700}

/* ------------------------------------------------- emphasis in config copy */
/* Written as **key**, @@français@@ and ++20++ in config.yaml and turned into
   these by the `emph` filter in build.py. ==promise== becomes a <mark>, which
   .prose mark already styles.

   All three use tokens that already flip for dark mode, so there is no second
   block to keep in step. Used sparingly by design: one key term per sentence,
   one promise per section. A paragraph with three pink words in it has a
   writing problem, not a styling one. */
.key{font-weight:800;color:var(--gold)}
.fr{
  font-family:'Playfair Display',Georgia,serif;font-style:italic;
  font-weight:600;color:var(--navy);font-size:1.02em}
.num{
  font-family:'Playfair Display',Georgia,serif;font-weight:600;
  font-size:1.24em;line-height:1;color:var(--gold);letter-spacing:.01em}

/* Outside .prose there is no mark styling, and config copy renders outside it. */
mark{
  background:var(--mark);color:inherit;padding:.05em .25em;
  border-radius:.25em;font-weight:700}

/* Bold in prose: navy in lessons, brand pink everywhere else.
   Lessons run about one bold every 25 words — mostly French words and
   grammar terms — and colouring all of those would be a pink mess. On the
   marketing pages bold is rare and deliberate, so there it should carry the
   eye. Scoped on data-layout rather than a body class so it follows the
   layout, not the URL. */
main:not([data-layout="lesson"]) .prose strong{color:var(--gold)}

/* ---------------------------------------------------------- the guided tour */
/* Six short pages with the same pager lesson pages use. The dots are a
   progress bar you can also navigate with — a visitor should always know how
   much is left and be able to jump back. */
.tour-step{
  margin:0 0 .5rem;font-size:.74rem;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--gold)}
.tour-dots{
  display:flex;gap:.4rem;list-style:none;margin:0 0 1.1rem;padding:0}
.tour-dots li{width:2.1rem;height:.32rem;border-radius:999px;background:var(--line)}
.tour-dots li a{display:block;width:100%;height:100%;border-radius:inherit}
.tour-dots li.is-done{background:var(--gold-soft)}
.tour-dots li.is-here{background:var(--gold)}
@media (max-width:560px){.tour-dots li{width:1.5rem}}

/* The pager is shared with lessons; inside the tour it needs the page gutter. */
.pager.wrap{margin-top:2.4rem;margin-bottom:3rem}

/* The strip on the home page that opens the thread. */
.start-strip{
  display:flex;gap:1.2rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap;border:1px solid var(--line);border-radius:16px;
  padding:1.5rem 1.8rem;background:var(--surface)}
.start-strip h2{margin:0 0 .25rem;font-size:1.35rem}
.start-strip p{margin:0;color:var(--muted);max-width:56ch}

/* --------------------------------------------------- say it, and show it */
/* Added by theme/speak.js, and only once a French voice has actually been
   found — .can-speak on <html> is the switch. Nothing below shows on a
   machine that would mispronounce the words, which is the whole point. */
.speakable{
  cursor:pointer;position:relative;border-radius:4px;
  transition:color .15s ease,background-color .15s ease}
.can-speak .speakable::after{
  content:"\266A";font-size:.62em;vertical-align:.35em;margin-left:.18em;
  opacity:.38;font-style:normal;font-weight:700;color:var(--gold);
  transition:opacity .15s ease}
.can-speak .speakable:hover,
.can-speak .speakable:focus-visible{color:var(--gold);outline:none}
.can-speak .speakable:hover::after,
.can-speak .speakable:focus-visible::after{opacity:1}
.can-speak .speakable.is-speaking{color:var(--gold);background:var(--gold-soft)}
.can-speak .speakable:focus-visible{box-shadow:0 0 0 2px var(--gold)}

/* The meaning, for French sitting inside English copy. Vocabulary tables do
   not need it — the English is already in the next column. */
.peek-bub{
  position:absolute;left:50%;bottom:calc(100% + 9px);
  transform:translateX(-50%) translateY(4px);
  background:var(--navy);color:var(--surface);border-radius:10px;
  padding:9px 12px;width:max-content;max-width:min(260px,70vw);
  font:500 12.5px/1.5 var(--body,Poppins),system-ui,sans-serif;font-style:normal;
  opacity:0;pointer-events:none;z-index:20;text-align:left;white-space:normal;
  transition:opacity .16s ease,transform .16s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.22)}
.peek-bub b{display:block;font-weight:800;font-size:13.5px}
.peek-bub i{display:block;opacity:.72;font-style:normal;font-size:11.5px;margin-top:3px}
.peek-bub::after{
  content:"";position:absolute;top:100%;left:50%;margin-left:-6px;
  border:6px solid transparent;border-top-color:var(--navy)}
.can-speak .has-peek:hover .peek-bub,
.can-speak .has-peek:focus-within .peek-bub{opacity:1;transform:translateX(-50%) translateY(0)}

/* ------------------------------------------------- click-to-load video */
/* A still and a play button. The real YouTube player is built by video.js on
   the click and not one moment sooner — so a page with a video on it costs
   nothing until somebody wants it, and Google is not watching visitors who
   never pressed play. */
.ytlite{margin:1.6rem 0;position:relative}
.ytlite-btn{
  display:block;width:100%;padding:0;border:1px solid var(--line);cursor:pointer;
  background:var(--surface);border-radius:14px;overflow:hidden;position:relative;
  aspect-ratio:16/9;line-height:0}
.ytlite-btn img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease,filter .25s ease}
.ytlite-btn:hover img,.ytlite-btn:focus-visible img{transform:scale(1.02);filter:brightness(.92)}
.ytlite-btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--gold)}
.ytlite-play{
  position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.ytlite-play svg{filter:drop-shadow(0 4px 14px rgba(0,0,0,.35));
  transition:transform .2s ease}
.ytlite-shape{fill:#212121;fill-opacity:.82;transition:fill .2s ease,fill-opacity .2s ease}
.ytlite-btn:hover .ytlite-shape,
.ytlite-btn:focus-visible .ytlite-shape{fill:#D8465F;fill-opacity:1}
.ytlite-btn:hover .ytlite-play svg{transform:scale(1.06)}
.ytlite iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:14px;display:block}
.ytlite figcaption{
  margin-top:.6rem;font-size:.9rem;color:var(--muted);text-align:center}

/* ---------------------------------------------------------- section voices */
/* Four ways for a section to speak, so a page is not one texture from top to
   bottom. Used sparingly by design — see theme/_voice.html. */
.v-statement{
  background:var(--navy);color:var(--surface);padding:clamp(2.4rem,6vw,4rem) 0;
  text-align:center}
.v-statement p{
  font-family:'Playfair Display',Georgia,serif;font-weight:600;margin:0;
  font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1.22;text-wrap:balance}
.v-statement .fr{color:var(--gold-2)}
.can-speak .v-statement .speakable:hover{color:var(--gold-2)}

.v-split{padding:0}
.v-split-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--line);border-radius:14px;overflow:hidden}
@media (max-width:720px){.v-split-inner{grid-template-columns:1fr}}
.v-split-inner > p{margin:0;padding:clamp(1.2rem,3vw,1.8rem)}
.v-split .v-fr{
  background:var(--band);font-size:clamp(1.05rem,2.2vw,1.35rem);line-height:1.5}
.v-split .v-en{color:var(--muted);line-height:1.7}

.v-steps ol{list-style:none;margin:0;padding:0;counter-reset:v}
.v-steps li{
  counter-increment:v;display:grid;grid-template-columns:auto 1fr;gap:1.1rem;
  padding:1.1rem 0;border-top:1px solid var(--line);align-items:baseline}
.v-steps li:first-child{border-top:0}
.v-steps li::before{
  content:counter(v);font-family:'Playfair Display',Georgia,serif;font-weight:700;
  font-size:clamp(1.8rem,4vw,2.4rem);color:var(--gold);line-height:.9;min-width:2rem}
.v-steps b{display:block;font-size:1.05rem}
.v-steps p{margin:.2em 0 0;color:var(--muted);line-height:1.65}

.v-aside blockquote{
  margin:0;border-left:4px solid var(--gold);padding:.2rem 0 .2rem 1.4rem}
.v-aside p{
  font-family:'Dancing Script',cursive;font-weight:600;margin:0;
  font-size:clamp(1.35rem,3vw,2rem);line-height:1.35;color:var(--ink)}
.v-aside cite{
  display:block;margin-top:.6rem;font-style:normal;font-size:.72rem;
  font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}

/* the moving line of French */
.v-ticker{
  overflow:hidden;white-space:nowrap;background:var(--band);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:.7rem 0}
.v-ticker-row{display:inline-block;animation:bb-tick 46s linear infinite}
.v-ticker-row span{margin:0 1.5rem}
.v-ticker-row i{
  font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:600;
  color:var(--navy);font-size:1.05rem}
.v-ticker-row em{
  font-style:normal;color:var(--muted);font-size:.8rem;margin-left:.45rem}
@keyframes bb-tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.v-ticker:hover .v-ticker-row{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.v-ticker-row{animation:none}}

/* --- moving between pages ------------------------------------------------
   Cross-document view transitions: the header and the footer stay put while
   the content changes underneath them, instead of the browser blanking the
   window and painting a fresh page. Two declarations and no JavaScript; a
   browser without support navigates exactly the way it always did, so there
   is no fallback to write and nothing to feature-detect. */
@view-transition{navigation:auto}
.topbar{view-transition-name:bb-topbar}
.foot{view-transition-name:bb-foot}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){animation:none !important}
}

/* --- the opening ---------------------------------------------------------
   Plays once a session, on a first arrival at the home page. The whole
   sequence hangs off one unit; every moment below is a multiple of it, so the
   pace is changed in exactly one place. intro.js reads this value back rather
   than keeping a second copy of it.

     0.0   the greeting rises, letter by letter
     1.2   the hour, written the French way
     1.7   why the greeting is that one and not the other
     2.6   the greeting lifts away
     3.0   the name takes its place
     3.4   the line writes itself
     5.6   Prachi signs it
     6.6   the small print drops
     6.9   the handoff - the name flies to the logo, the line to the hero
     7.0   the rose ground blooms away
     7.4   the page arrives behind it

   Nothing here animates a property that costs layout. */
:root{--intro-u:210ms}

.intro{display:none}
:root[data-intro="1"] .intro{
  display:block;position:fixed;inset:0;z-index:120;pointer-events:none;
  overflow:hidden;
  /* A cue, not an effect: it changes nothing and exists only to be timed.
     The handoff used to be scheduled with setTimeout, which is driven by a
     different clock from the animations around it - a backgrounded tab
     throttles timers to a second or more, and the copies would then take
     flight after the curtain they belong to had already gone. Hanging it on
     an animation instead keeps it on the same clock as everything it has to
     stay in step with. */
  animation:intro-cue calc(var(--intro-u) * 6.9) linear forwards}
@keyframes intro-cue{from{z-index:120}to{z-index:120}}

/* the two lines the curtain hands over are hidden until it hands them over */
:root[data-intro="1"] .brand-words b,
:root[data-intro="1"] .brand-words small,
:root[data-intro="1"] .hero-script{opacity:0}

/* Everything else waits behind the curtain and then arrives in the usual
   order - the same .reveal system the rest of the site uses, only held back
   until the screen belongs to the page again. */
:root[data-intro="1"][data-motion="on"] .reveal.shown{
  transition-delay:calc(var(--intro-u) * 7.4 + var(--i, 0) * 90ms)}

.intro-wash{
  position:absolute;inset:0;
  background:linear-gradient(158deg,#FFF6F7 0%,#FCE4EA 52%,#F7D0DA 100%)}
:root[data-theme="dark"] .intro-wash{
  background:linear-gradient(158deg,#241C27 0%,#33212A 52%,#3D2731 100%)}

/* The ground does not slide away, it blooms away: six patches that spread
   until they meet, the way paint lifts off wet paper. The level cards are
   watercolours, so the curtain leaves the way the artwork was made. Where a
   browser cannot composite masks the @supports block never applies and the
   plain fade below stands in on its own. */
:root[data-intro="1"] .intro-wash{
  animation:intro-fade calc(var(--intro-u) * 2.2) ease
            calc(var(--intro-u) * 7) forwards}
@keyframes intro-fade{to{opacity:0}}

@supports ((mask-composite:exclude) or (-webkit-mask-composite:xor)){
  .intro-wash{
    -webkit-mask-image:
      radial-gradient(circle closest-side,#000 60%,transparent 100%),
      radial-gradient(circle closest-side,#000 60%,transparent 100%),
      radial-gradient(circle closest-side,#000 60%,transparent 100%),
      radial-gradient(circle closest-side,#000 60%,transparent 100%),
      radial-gradient(circle closest-side,#000 60%,transparent 100%),
      radial-gradient(circle closest-side,#000 60%,transparent 100%);
    mask-image:
      radial-gradient(circle closest-side,#000 60%,transparent 100%),
      radial-gradient(circle closest-side,#000 60%,transparent 100%),
      radial-gradient(circle closest-side,#000 60%,transparent 100%),
      radial-gradient(circle closest-side,#000 60%,transparent 100%),
      radial-gradient(circle closest-side,#000 60%,transparent 100%),
      radial-gradient(circle closest-side,#000 60%,transparent 100%);
    -webkit-mask-position:18% 30%, 68% 20%, 44% 74%, 90% 58%, 6% 80%, 78% 88%;
    mask-position:18% 30%, 68% 20%, 44% 74%, 90% 58%, 6% 80%, 78% 88%;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-size:0% 0%; mask-size:0% 0%;
    -webkit-mask-composite:xor; mask-composite:exclude}
  :root[data-intro="1"] .intro-wash{
    animation:intro-bloom calc(var(--intro-u) * 3) cubic-bezier(.4,0,.3,1)
              calc(var(--intro-u) * 7) forwards}
  @keyframes intro-bloom{
    0%  {-webkit-mask-size:0% 0%;     mask-size:0% 0%;     opacity:1}
    88% {opacity:1}
    100%{-webkit-mask-size:250% 250%; mask-size:250% 250%; opacity:0}
  }
}

/* Above the wash, so that when the ground blooms away these two lines are
   left standing in mid-air. That is the moment the handoff needs. */
.intro-fly{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  padding:24px;text-align:center}
.intro-mid{display:flex;flex-direction:column;align-items:center}
/* Margins are set per line rather than reset in bulk and added back: a
   blanket ".intro-mid p" rule out-ranks every single-class rule below it and
   the whole block ends up fighting itself with !important. Every line keeps
   its space, including the greeting once it has faded, so nothing under it
   shifts while the sequence plays. */

.intro-greet{
  margin:0;
  font-family:'Playfair Display',Georgia,serif;font-weight:700;color:var(--navy);
  font-size:clamp(2.7rem,10.5vw,6.6rem);line-height:1.04;white-space:nowrap}
.intro-greet b{
  display:inline-block;font-weight:inherit;opacity:0;
  transform:translateY(.36em) rotateX(-64deg);transform-origin:50% 100%}
:root[data-intro="1"] .intro-greet b{
  animation:intro-rise calc(var(--intro-u) * 1.5) cubic-bezier(.2,.72,.28,1)
            forwards;
  animation-delay:calc(var(--n, 0) * var(--intro-u) * .11)}
@keyframes intro-rise{to{opacity:1;transform:none}}
:root[data-intro="1"] .intro-greet{
  animation:intro-liftoff calc(var(--intro-u) * 1) cubic-bezier(.5,0,.4,1)
            calc(var(--intro-u) * 2.6) forwards}
@keyframes intro-liftoff{to{opacity:0;transform:translateY(-.22em)}}

.intro-brand{
  margin:0;
  font-family:'Playfair Display',Georgia,serif;font-weight:700;
  color:var(--navy);font-size:clamp(1.7rem,5.6vw,3.4rem);line-height:1.1;
  white-space:nowrap;opacity:0}
.intro-brand i{font-style:normal;color:var(--gold)}
:root[data-intro="1"] .intro-brand{
  animation:intro-soft calc(var(--intro-u) * 1.2) cubic-bezier(.2,.7,.3,1)
            calc(var(--intro-u) * 3) forwards}
@keyframes intro-soft{from{opacity:0;transform:translateY(9px)}
                      to{opacity:1;transform:none}}

/* Written, not shown: the ink is uncovered behind a nib travelling ahead of
   it. Honest limit - this is a clip moving left to right, not a pen
   following stroke order. At this speed the eye reads it as writing. */
.intro-hand{
  margin:.35em 0 0;
  position:relative;display:inline-block;font-family:'Dancing Script',cursive;
  font-weight:600;color:var(--gold);font-size:clamp(1.25rem,4.4vw,3rem);
  line-height:1.35;white-space:nowrap;opacity:0}
:root[data-intro="1"] .intro-hand{
  animation:intro-show 0s calc(var(--intro-u) * 3.4) forwards}
@keyframes intro-show{to{opacity:1}}
.intro-ink{display:block;clip-path:inset(0 100% 0 0)}
:root[data-intro="1"] .intro-ink{
  animation:intro-write calc(var(--intro-u) * 2.6) cubic-bezier(.4,.05,.5,.98)
            calc(var(--intro-u) * 3.4) forwards}
@keyframes intro-write{to{clip-path:inset(0 -2% 0 0)}}
.intro-nib{
  position:absolute;top:52%;left:0;width:10px;height:10px;margin-top:-5px;
  border-radius:50%;background:var(--gold);opacity:0;
  box-shadow:0 0 14px 4px rgba(216,70,95,.32)}
:root[data-intro="1"] .intro-nib{
  animation:intro-pen calc(var(--intro-u) * 2.6) cubic-bezier(.4,.05,.5,.98)
            calc(var(--intro-u) * 3.4) forwards}
@keyframes intro-pen{0%{left:0;opacity:1}90%{opacity:1}100%{left:100%;opacity:0}}

.intro-clock{
  margin:.9em 0 0;
  font:800 clamp(.66rem,1.5vw,.86rem)/1 'Poppins',sans-serif;letter-spacing:.24em;
  text-transform:uppercase;color:var(--gold);opacity:0}
.intro-gloss{
  margin:.5em 0 0;
  font-family:'Playfair Display',Georgia,serif;font-style:italic;color:var(--muted);
  font-size:clamp(.85rem,1.9vw,1.12rem);opacity:0;max-width:34ch;line-height:1.5}
.intro-sign{
  margin:1em 0 0;
  font:800 clamp(.6rem,1.4vw,.78rem)/1 'Poppins',sans-serif;letter-spacing:.28em;
  text-transform:uppercase;color:var(--navy);opacity:0}
:root[data-intro="1"] .intro-clock{
  animation:intro-soft calc(var(--intro-u) * 1.1) ease
            calc(var(--intro-u) * 1.2) forwards,
            intro-fade calc(var(--intro-u) * .9) ease
            calc(var(--intro-u) * 6.6) forwards}
:root[data-intro="1"] .intro-gloss{
  animation:intro-soft calc(var(--intro-u) * 1.1) ease
            calc(var(--intro-u) * 1.7) forwards,
            intro-fade calc(var(--intro-u) * .9) ease
            calc(var(--intro-u) * 6.6) forwards}
:root[data-intro="1"] .intro-sign{
  animation:intro-soft calc(var(--intro-u) * 1) ease
            calc(var(--intro-u) * 5.6) forwards,
            intro-fade calc(var(--intro-u) * .9) ease
            calc(var(--intro-u) * 6.6) forwards}

/* Belt and braces. data-intro is never set for a reader who has asked for
   less motion - this is here so that a future change upstream cannot quietly
   start showing a curtain to somebody who said no to one. */
@media (prefers-reduced-motion:reduce){
  .intro{display:none !important}
  :root[data-intro="1"] .brand-words b,
  :root[data-intro="1"] .brand-words small,
  :root[data-intro="1"] .hero-script{opacity:1}
  :root[data-intro="1"][data-motion="on"] .reveal.shown{transition-delay:0s}
}

/* The script line leads the hero rather than signing off under it, so it
   loses the sign-off's top margin. Same element either way — the opening
   hands its written line to whichever one the page is using. */
.hero-text .hero-script-lead{margin:0 0 .55em}