/* Coffee Break Languages: shared site styles (October 2026 rebuild, "D3" direction)
 *
 * One stylesheet for the homepage, language hubs, level pages, landing pages and
 * post templates. The style guide at styleguide.html shows every piece in use.
 *
 * House rules (Mark, 12 Oct 2026), enforced here:
 *  - Structure is square. Panels, bands, buttons, inputs, tags and tabs have no
 *    rounded corners. Pictures get 4px. Circles are for portraits and the round
 *    language logos only.
 *  - No borders or accent stripes on boxes. Separate things with space, a fill,
 *    or a plain rule between rows.
 *  - Montserrat ExtraBold for headings and interface text, Source Serif 4 for
 *    reading text. Never Inter.
 *  - One action colour per page, used for buttons only. CBL pages use lime;
 *    a language page uses that language's own accent (set with data-lang).
 *  - No pulsing dots, glows, gradient washes, chip rows, or stacked caps-and-
 *    letterspaced labels. Labels are sentence case.
 */

/* ------------------------------------------------------------------ tokens */
:root{
  /* type */
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --serif:'Source Serif 4',Georgia,'Times New Roman',serif;

  /* ink and paper */
  --ink:#14262e;        /* body text, headings */
  --ink-2:#2b3f46;      /* lede and secondary reading text */
  --muted:#4a5f66;      /* meta lines, captions (passes 4.5:1 on all papers) */
  --rule:#cdd8dc;       /* rules between rows */
  --paper:#ffffff;
  --paper-2:#f5f7f6;    /* default page ground */
  --paper-3:#eef3f2;    /* filled buttons, inputs, quiet panels */

  /* the brand band (dark sections, header, footer) */
  --band:#1c343e;
  --band-deep:#14262e;
  --on-band:#ffffff;
  --on-band-2:#c3d2d8;
  --band-rule:#2b4a57;

  /* the one action colour */
  --action:#91b21a;
  --action-hover:#a3c61e;
  --action-ink:#10201a;

  /* secondary colour for labels and kickers on light grounds */
  --accent:#37687c;

  /* shape and rhythm */
  --pic:4px;            /* picture corners. Everything else is 0. */
  --wrap:1280px;
  --gutter:40px;
  --section:80px;       /* vertical padding of a section */
}

/* Language palettes, from the handout configs in .claude/skills/<lang>-video-handout.
 * Put data-lang on <body> (or any wrapper). band = primary, accent = secondary,
 * action = the language's accent colour, deepened where needed for 4.5:1 with white. */
[data-lang="fr"]{--band:#1b2057;--band-deep:#12163d;--band-rule:#2d3470;--on-band-2:#d5d7e9;--accent:#2d6391;--action:#d41920;--action-hover:#eb2129;--action-ink:#fff;--paper-3:#eceef6}
[data-lang="es"]{--band:#761115;--band-deep:#560c0f;--band-rule:#8f2227;--on-band-2:#fbd9da;--accent:#a3161c;--action:#c8161d;--action-hover:#eb2229;--action-ink:#fff;--paper-3:#fbefef}
[data-lang="it"]{--band:#026430;--band-deep:#014a23;--band-rule:#187a45;--on-band-2:#cdeedb;--accent:#037a3b;--action:#be1e2e;--action-hover:#d22b3c;--action-ink:#fff;--paper-3:#ecf6f0}
[data-lang="de"]{--band:#292929;--band-deep:#1c1c1c;--band-rule:#3d3d3d;--on-band-2:#fde7cb;--accent:#8a5a12;--action:#c23941;--action-hover:#d4454d;--action-ink:#fff;--paper-3:#fdf4e8}
[data-lang="en"]{--band:#123268;--band-deep:#0c2249;--band-rule:#24467f;--on-band-2:#d1daea;--accent:#1a4794;--action:#c9141a;--action-hover:#e1171a;--action-ink:#fff;--paper-3:#edf1f8}

/* The five smaller languages, sampled from their own course cards (header colour, number box). */
[data-lang="sv"]{--band:#0a568f;--band-deep:#073e68;--band-rule:#1f6aa3;--on-band-2:#d3e6f4;--accent:#0864a7;--action:#fdcf00;--action-hover:#ffdb3d;--action-ink:#10223a;--paper-3:#edf4fa}
[data-lang="pt"]{--band:#212c64;--band-deep:#161e47;--band-rule:#343f7a;--on-band-2:#d6dcf0;--accent:#087a38;--action:#087a38;--action-hover:#0b9947;--action-ink:#fff;--paper-3:#eef0f6}
[data-lang="zh"]{--band:#a31114;--band-deep:#7a0c0f;--band-rule:#b8272a;--on-band-2:#fde3cf;--accent:#c4161a;--action:#f8b236;--action-hover:#ffc45a;--action-ink:#3a1500;--paper-3:#fcf0ee}
[data-lang="ja"]{--band:#8f0311;--band-deep:#68020c;--band-rule:#a61a27;--on-band-2:#f6dcdc;--accent:#b20314;--action:#febcbd;--action-hover:#ffd2d3;--action-ink:#5a0109;--paper-3:#fdf1f1}
[data-lang="gd"]{--band:#0b3a66;--band-deep:#072a4b;--band-rule:#1d5288;--on-band-2:#d4e3f2;--accent:#146cb4;--action:#2b86d6;--action-hover:#4a9be2;--action-ink:#ffffff;--paper-3:#edf3f9}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--serif);font-size:18px;line-height:1.55;color:var(--ink);background:var(--paper-2)}
img,video{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4,.h{font-family:var(--sans);font-weight:800;letter-spacing:-0.025em;line-height:1.1;margin:0}
h1{font-size:60px;line-height:1.04}
h2{font-size:34px}
h3{font-size:22px;line-height:1.2}
p{margin:0}
:focus-visible{outline:3px solid var(--action);outline-offset:3px}
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;background:var(--action);color:var(--action-ink);padding:12px 16px;font-family:var(--sans);font-weight:700;z-index:100}
.skip:focus{left:16px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* sections: white, pale (default ground) or the dark band */
.section{padding:var(--section) 0}
.section--white{background:var(--paper)}
.section--band{background:var(--band);color:var(--on-band)}
.section--tight{padding:56px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:16px 32px;flex-wrap:wrap;margin-bottom:28px}
.section-head h2{flex:1 1 auto}
.section-head .lede{margin-top:10px;max-width:60ch}

/* reading text */
.lede{font-size:21px;line-height:1.5;color:var(--ink-2)}
.section--band .lede{color:var(--on-band-2)}
.kicker{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--accent);margin:0 0 10px}
.section--band .kicker{color:var(--on-band-2)}
.meta{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--muted)}
.section--band .meta{color:var(--on-band-2)}

/* ------------------------------------------------------------------ actions */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:700;font-size:16px;line-height:1;padding:16px 22px;background:var(--action);color:var(--action-ink);text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:var(--action-hover)}
.btn--band{background:var(--band);color:var(--on-band)}
.btn--band:hover{background:var(--band-deep)}
.btn--quiet{background:var(--paper-3);color:var(--ink)}
.btn--quiet:hover{background:var(--rule)}
.btn--small{font-size:15px;padding:12px 16px}
/* secondary action: a plain link, never a second button style */
.link{font-family:var(--sans);font-weight:600;font-size:15px;color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.link:hover{text-decoration-thickness:2px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}

/* square tags: one word or two, on a picture or before a title */
.tag{display:inline-block;font-family:var(--sans);font-size:12px;font-weight:700;line-height:1;padding:6px 9px;background:var(--action);color:var(--action-ink)}
.tag--band{background:var(--band);color:var(--on-band)}
.tag--paper{background:var(--paper);color:var(--ink)}

/* ------------------------------------------------------------------ promo bar */
/* One line above the header, site-wide, for a time-limited offer. Remove the
 * element to switch it off. Colour comes from the offer, not the page. */
.promo-bar{background:var(--promo-bg,#91b21a);color:var(--promo-ink,#10201a);font-family:var(--sans);font-size:15px;font-weight:600;text-align:center;padding:11px 16px}
.promo-bar a{font-weight:800;text-underline-offset:3px}

/* ------------------------------------------------------------------ header */
.site-header{background:var(--band);color:var(--on-band);position:sticky;top:0;z-index:40;transition:background-color .2s}
/* Over a hero: a dark-to-clear fade behind the nav, pulled over the hero by its own height.
 * js/site.js adds .is-solid once the page scrolls, and the band colour takes over. */
.site-header--over{background-color:transparent;background-image:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.28) 55%,rgba(0,0,0,0) 100%);margin-bottom:-84px}
.site-header--over.is-solid,.site-header--over:has(.site-nav.open){background-color:var(--band);background-image:none}
/* over a hero with no picture there's nothing to protect the nav from: no fade */
.site-header--over.is-clear{background-image:none}
.site-header .wrap{display:flex;align-items:center;gap:24px;height:84px}
.site-header .logo img{height:40px;width:auto}
.site-nav{display:flex;align-items:center;gap:6px;margin-left:auto;font-family:var(--sans);font-size:15px;font-weight:600}
.site-nav > a,.site-nav > .navdrop > button{color:var(--on-band);text-decoration:none;padding:10px 12px;background:none;border:0;font:inherit;cursor:pointer;display:flex;align-items:center;gap:8px}
.site-nav > a:hover,.site-nav > .navdrop > button:hover{text-decoration:underline;text-underline-offset:5px}
.site-nav .btn{margin-left:10px}
/* the nav's own link reset (background:none, no padding change) must not flatten the button */
.site-nav > a.btn{background:var(--action);color:var(--action-ink);padding:12px 16px}
.site-nav > a.btn:hover{background:var(--action-hover);text-decoration:none}
.site-nav .login{color:var(--on-band-2)}
.site-header--over:not(.is-solid) .site-nav .login{color:#fff;opacity:.85}
.navdrop{position:relative}
.navdrop svg{transition:transform .15s}
.navdrop.open svg{transform:rotate(180deg)}
.navmenu{display:none;position:absolute;top:calc(100% + 8px);left:0;background:var(--paper);color:var(--ink);padding:10px;min-width:440px;grid-template-columns:1fr 1fr;gap:2px;box-shadow:0 18px 40px rgba(10,20,26,.25)}
.navdrop.open .navmenu{display:grid}
.navmenu a{display:flex;align-items:center;gap:12px;padding:10px 12px;text-decoration:none;font-weight:600}
.navmenu a:hover{background:var(--paper-3)}
.navmenu img{width:30px;height:30px;border-radius:50%}
.menu-toggle{display:none;margin-left:auto;background:none;border:0;color:var(--on-band);padding:10px;cursor:pointer}
.search-btn{display:flex}

/* ------------------------------------------------------------------ hero (cover slot) */
/* The hero is a slot. Its palette belongs to whatever it features (a series,
 * a promo, an anniversary); the rest of the page keeps the site palette.
 * Three fills: photo, moving (muted loop + pause), or type only. */
.hero{position:relative;color:#fff;background:var(--hero-bg,var(--band-deep));display:flex;flex-direction:column;justify-content:flex-end;min-height:var(--hero-h,700px)}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--hero-focus,50% 45%)}
/* when the face line drops the picture down (a few px at most), its top edge melts into the ground */
.hero__media.dropped{-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.35) 0,#000 72px);mask-image:linear-gradient(180deg,rgba(0,0,0,.35) 0,#000 72px)}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,24,30,0) 0%,rgba(14,24,30,0) 18%,rgba(14,24,30,0) 45%,rgba(14,24,30,.85) 100%)}
/* Face line: data-face-top="0.07" on .hero__media = where the tops of the heads are (share of
 * the frame's height). js/site.js crops, or drops the picture down, so heads sit just below
 * the nav on any screen shape. The strip it opens up is the hero's dark ground, under the fade. */
.hero .wrap{position:relative;width:100%;padding-top:120px;padding-bottom:56px}
.hero__kicker{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--hero-accent,#fff);margin:0 0 14px}
.hero__title{font-family:var(--sans);font-weight:800;letter-spacing:-0.025em;font-size:60px;line-height:1.04;max-width:17ch;margin:0 0 16px}
.hero__text{font-size:21px;line-height:1.5;max-width:46ch;color:#eef1f3;margin:0 0 26px}
.hero .btn{background:var(--hero-accent,var(--action));color:var(--hero-accent-ink,var(--action-ink))}
.hero .link{color:#fff}
.hero__pause{position:absolute;right:28px;bottom:28px;width:48px;height:48px;border:0;background:rgba(14,24,30,.7);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
/* photo fill: keep the words in the left part, clear of a face in the middle or right */
.hero--photo .hero__shade{background:linear-gradient(90deg,rgba(14,24,30,.62) 0%,rgba(14,24,30,.38) 34%,rgba(14,24,30,0) 58%),linear-gradient(180deg,rgba(14,24,30,0) 50%,rgba(14,24,30,.7) 100%)}
.hero--photo .hero__title{max-width:12ch}
.hero--photo .hero__text{max-width:34ch}
/* type fill: no main picture. A gradient in the band colours (darker left, lighter right, as
 * on the teacher discs) under a fine grain, so it never reads as a flat block. data-lang on the
 * section switches it to that language's colours. data-texture="rings" swaps the grain for
 * faint interlocking rings (promos). An optional thumbnail sits on the right (.hero__thumb). */
.hero--type{--hero-h:560px;justify-content:center;background:linear-gradient(100deg,var(--hero-bg-a,var(--band-deep)) 0%,var(--hero-bg-b,var(--band)) 55%,var(--hero-bg-c,color-mix(in srgb,var(--band) 74%,#fff)) 100%)}
.hero--type::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");opacity:.13;mix-blend-mode:overlay}
.hero--type[data-texture="none"]::before{display:none}
.hero--type[data-texture="rings"]::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320' fill='none' stroke='%2314262e' stroke-width='1.6'><circle cx='0' cy='0' r='18'/><circle cx='0' cy='0' r='40'/><circle cx='0' cy='0' r='62'/><circle cx='0' cy='0' r='84'/><circle cx='0' cy='0' r='106'/><circle cx='0' cy='0' r='128'/><circle cx='0' cy='0' r='150'/><circle cx='320' cy='0' r='18'/><circle cx='320' cy='0' r='40'/><circle cx='320' cy='0' r='62'/><circle cx='320' cy='0' r='84'/><circle cx='320' cy='0' r='106'/><circle cx='320' cy='0' r='128'/><circle cx='320' cy='0' r='150'/><circle cx='0' cy='320' r='18'/><circle cx='0' cy='320' r='40'/><circle cx='0' cy='320' r='62'/><circle cx='0' cy='320' r='84'/><circle cx='0' cy='320' r='106'/><circle cx='0' cy='320' r='128'/><circle cx='0' cy='320' r='150'/><circle cx='320' cy='320' r='18'/><circle cx='320' cy='320' r='40'/><circle cx='320' cy='320' r='62'/><circle cx='320' cy='320' r='84'/><circle cx='320' cy='320' r='106'/><circle cx='320' cy='320' r='128'/><circle cx='320' cy='320' r='150'/><circle cx='160' cy='160' r='18'/><circle cx='160' cy='160' r='40'/><circle cx='160' cy='160' r='62'/><circle cx='160' cy='160' r='84'/><circle cx='160' cy='160' r='106'/><circle cx='160' cy='160' r='128'/><circle cx='160' cy='160' r='150'/></svg>");background-size:320px;opacity:.1;mix-blend-mode:normal}
.hero--type .wrap{padding-top:132px;padding-bottom:72px}
.hero--type .hero__title{font-size:68px;max-width:15ch}
.hero__cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:center}
.hero__thumb{margin:0}
.hero__thumb img,.hero__thumb .ph{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--pic);box-shadow:0 24px 48px rgba(0,0,0,.32)}
/* split fill: colour panel left, picture right (language hubs) */
.hero--split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:600px;background:linear-gradient(100deg,var(--band-deep) 0%,var(--band) 60%,color-mix(in srgb,var(--band) 80%,#fff) 100%)}
/* the same grain as the type hero, over the colour side */
.hero--split::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");opacity:.13;mix-blend-mode:overlay}
.hero--split .hero__panel{position:relative;background:linear-gradient(110deg,var(--band-deep) 0%,var(--band) 45%,color-mix(in srgb,var(--band) 70%,#fff) 100%)}
/* the menu sits on the gradient; a soft fade across the top of the picture keeps its right-hand links readable */
.hero--split .hero__pic::after{content:"";position:absolute;left:0;right:0;top:0;height:150px;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,0));pointer-events:none}
.hero__panel > img,.hero__cols img.logo{align-self:flex-start}
.hero--split .hero__panel{padding:132px 56px 64px max(var(--gutter),calc((100vw - var(--wrap))/2 + var(--gutter)));display:flex;flex-direction:column;justify-content:center}
.hero--split .actions .link{color:var(--on-band-2);font-size:17px}
.hero--split .hero__pic{position:relative;min-height:360px}
.hero--split .hero__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero--split .hero__title{font-size:52px}

/* preview only: hero switcher (never published) */
.hero-switch{position:fixed;left:16px;bottom:16px;z-index:90;display:flex;align-items:center;gap:2px;background:#14262e;color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;padding:6px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.hero-switch span{padding:0 10px 0 6px;color:#c3d2d8}
.hero-switch button{font:inherit;background:none;color:#fff;border:0;padding:8px 10px;cursor:pointer}
.hero-switch button[aria-pressed="true"]{background:#91b21a;color:#10201a}

/* ------------------------------------------------------------------ language hub parts */
/* CBTV on a hub: a textured gradient from the deep band into the language's brighter blue, so
 * it stands apart from thumbnails that use the band colour itself (French navy). */
.section--tv{position:relative;overflow:hidden;background:linear-gradient(100deg,var(--band-deep) 0%,var(--accent) 100%)}
.section--tv::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");opacity:.12;mix-blend-mode:overlay}
.section--tv > .wrap{position:relative}
/* hub hero: the language's photo backgrounds under a fade in the language's own band colour */
.hero--hub{--hero-h:620px}
.hero--hub .hero__shade{background:linear-gradient(90deg,color-mix(in srgb,var(--band-deep) 92%,transparent) 0%,color-mix(in srgb,var(--band) 70%,transparent) 38%,transparent 72%),linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.45) 100%)}
.hero--hub .hero__title{max-width:14ch}
.hero__badge{width:72px;height:72px;margin-bottom:18px}
.hero--hub .btn{background:var(--action);color:var(--action-ink)}
/* on-page menu under a hub hero */
.subnav{background:var(--paper);border-bottom:1px solid var(--rule);font-family:var(--sans);font-size:15px;font-weight:600}
.subnav .wrap{display:flex;gap:4px 28px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
.subnav a{text-decoration:none;color:var(--ink)}
.subnav a:hover{text-decoration:underline;text-underline-offset:5px}
/* level rows: number, the free route, the course */
.levels{border-bottom:1px solid var(--rule)}
.level{display:grid;grid-template-columns:90px minmax(0,1fr) 420px;gap:36px;align-items:center;padding:28px 0;border-top:1px solid var(--rule)}
.level__n{font-family:var(--sans);font-weight:800;font-size:64px;line-height:1;color:var(--band)}
.level__n--soon{font-size:14px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.level h3{font-size:24px;margin:0 0 6px}
.level h3 .meta{font-size:14px;margin-left:8px;color:var(--accent)}
.level p{margin:0 0 10px;font-size:18px}
.level__course{display:grid;grid-template-columns:170px minmax(0,1fr);gap:16px;align-items:center;text-decoration:none;color:inherit;background:var(--paper-3);padding:12px}
.level__course img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--pic)}
.level__course .h{display:block;font-size:17px;margin-bottom:4px}
.level__course:hover .h{text-decoration:underline}
/* the team, small circles in a wrapping row (hubs) */
.newhere__mark.newhere__team{grid-template-columns:minmax(0,1fr);align-content:center}
.team--small{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:20px 12px;margin-top:22px}
.team--small .teacher img{width:80px;height:80px}
.team--small .teacher .h{font-size:14px}
.team--small .teacher .meta{display:none}
/* practise pair */
.practise__item{display:grid;grid-template-columns:200px minmax(0,1fr);gap:28px;align-items:center;background:var(--paper-3);padding:28px}
.practise__item img{width:100%;border-radius:var(--pic)}
.practise__item h3{font-size:26px;margin:0 0 10px}
.practise__item p{font-size:17px;margin:0 0 16px}

/* ------------------------------------------------------------------ chatbot pages */
/* the example: a plain text-message thread. Rounded bubbles here only, because that is what a
 * text message looks like; solid fills, no borders, no badges or icons. */
.example{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.thread{display:flex;flex-direction:column;gap:16px;max-width:520px;width:100%;justify-self:center;font-size:17px;line-height:1.4}
.thread__group{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.thread__group--you{align-items:flex-end}
.thread__who{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);margin:0 12px 2px}
.thread__msg{margin:0;max-width:82%;padding:9px 14px;border-radius:18px;background:#e6e9eb;color:var(--ink)}
.thread__group--you .thread__msg{background:var(--band);color:var(--on-band)}
.thread__group--them .thread__msg:not(:last-child){border-bottom-left-radius:6px}
.thread__group--you .thread__msg:not(:last-child){border-bottom-right-radius:6px}
.points h3{font-size:20px;margin:0 0 8px}
.points p{font-size:17px;margin:0;color:var(--ink-2)}
/* where do you start: white panels on a tinted ground, square, a solid language-colour head */
.section--doors{background:var(--paper-3)}
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.door{background:var(--paper);display:flex;flex-direction:column;padding:0 28px 26px;box-shadow:0 1px 2px rgba(10,20,26,.06),0 8px 24px rgba(10,20,26,.06)}
.door > .door__k{margin:0 -28px 22px;padding:12px 28px;background:var(--band);color:var(--on-band);font-family:var(--sans);font-weight:700;font-size:14px}
.door h3{font-size:22px;margin:0 0 10px}
.door > p{font-size:17px;margin:0 0 16px;color:var(--ink-2)}
.door .ticks{color:var(--ink-2);font-size:17px;margin-bottom:24px}
.door__btn{margin-top:auto;justify-content:center}
.door__more{margin-top:14px;text-align:center;min-height:22px}
/* how it works: words left, three steps right */
.how{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:start}
.how__steps{display:flex;flex-direction:column}
.step{padding:20px 0;border-top:1px solid var(--rule)}
.step:last-child{border-bottom:1px solid var(--rule)}
.step__k{font-family:var(--sans);font-weight:700;font-size:14px;color:var(--accent);margin:0 0 4px}
.step h3{font-size:21px;margin:0 0 6px}
.step p{margin:0;font-size:17px;color:var(--ink-2)}
/* the other tutors: portrait, language, link; each card in its own language's colours */
.tutor{display:grid;grid-template-columns:96px minmax(0,1fr);gap:18px;align-items:center;background:var(--paper-3);padding:14px;text-decoration:none;color:var(--ink)}
.tutor img{width:96px;aspect-ratio:404/620;object-fit:cover;border-radius:var(--pic)}
.tutor .meta{display:block;color:var(--accent);font-weight:700;margin-bottom:4px}
.tutor .h{font-size:19px;line-height:1.2}
.tutor:hover .h{text-decoration:underline;text-underline-offset:4px}
/* questions: plain pairs in two columns, nothing to click */
.qas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 56px}
.qa h3{font-size:20px;margin:0 0 8px}
.qa p{margin:0;font-size:17px;color:var(--ink-2)}

/* ------------------------------------------------------------------ campaign landing pages */
/* One ask per page: a focused header (brand, language switch, one button), no site menu. */
.site-header--lp .wrap{gap:28px}
.lp-brand{display:flex;align-items:center;gap:12px;color:var(--on-band);text-decoration:none;font-family:var(--sans);font-weight:800;font-size:18px;letter-spacing:-0.01em}
.lp-langs{display:flex;gap:4px 18px;flex-wrap:wrap;margin-left:auto;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--on-band-2)}
.lp-langs a{color:var(--on-band-2);text-decoration:none}
.lp-langs a:hover{color:var(--on-band);text-decoration:underline}
.lp-langs [aria-current]{color:var(--on-band)}
/* heading left, reading column right */
.lp-two{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}
.lp-two h2{font-size:34px}
.lp-copy p{margin:0 0 16px;max-width:62ch}
.lp-fig{margin:28px 0 0}
.lp-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--pic)}
.lp-fig figcaption{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:8px}
.lp-copy .lede{margin-bottom:18px}
.lp-pull{font-family:var(--sans);font-weight:800;font-size:28px;line-height:1.2;letter-spacing:-0.02em;color:var(--band);margin:30px 0 !important;max-width:24ch !important}
.lp-expect{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.lp-card{background:var(--paper);padding:0 26px 26px;box-shadow:0 1px 2px rgba(10,20,26,.06),0 8px 24px rgba(10,20,26,.06)}
.lp-card > .door__k{margin:0 -26px 20px;padding:11px 26px;background:var(--band);color:var(--on-band);font-family:var(--sans);font-weight:700;font-size:14px}
.lp-card h3{font-size:21px;margin:0 0 10px}
.lp-card p{font-size:17px;margin:0;color:var(--ink-2)}
.lp-signup__cols{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:center}
.lp-signup .lede{margin:0 0 14px}
.lp-form{background:var(--paper);color:var(--ink);padding:30px}
.lp-form form{display:grid;gap:10px;font-family:var(--sans)}
.lp-form__label{font-family:var(--sans);font-weight:700;font-size:15px}
.lp-form .field{width:100%}
.lp-form .btn{justify-content:center}
.lp-form__after{font-size:15px;color:var(--muted);margin:14px 0 0}
.site-footer--lp{padding:32px 0}
.site-footer--lp a{display:inline;color:var(--on-band-2)}

/* ------------------------------------------------------------------ book shelf row (homepage) */
.shelf-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:24px;align-items:end}
.shelf-row__book img{width:100%;aspect-ratio:404/620;object-fit:cover;border-radius:var(--pic);box-shadow:0 2px 4px rgba(10,20,26,.08),0 12px 24px rgba(10,20,26,.14);transition:transform .15s}
.shelf-row__book:hover img{transform:translateY(-4px)}

/* ------------------------------------------------------------------ level / season pages */
.hero--level{--hero-h:600px}
.level-facts{display:flex;flex-wrap:wrap;gap:6px 20px;font-family:var(--sans);font-weight:700;font-size:14px;color:var(--on-band-2);margin:0 0 24px}
.level-facts span+span::before{content:"·";margin-right:20px;opacity:.6}
.subnav--parts .wrap{gap:4px 26px}
.subnav--parts span{font-weight:500;color:var(--muted)}
.subnav--parts{position:sticky;top:0;z-index:30}
.subnav--parts a[aria-current="true"]{color:var(--band);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.levelpage{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start}
.part{scroll-margin-top:70px}
.part + .part{margin-top:64px}
.part__k{font-family:var(--sans);font-weight:700;font-size:14px;color:var(--accent);margin:0 0 6px}
.part__head h2{font-size:30px;margin:0 0 8px}
.part__line{font-size:18px;color:var(--ink-2);margin:0;max-width:60ch}
.lessons{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;border-top:1px solid var(--rule)} /* reads across: 1 2, 3 4 (Mark, 14 Oct) */
.lessons li{border-bottom:1px solid var(--rule)}
.lessons a{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:13px 0;text-decoration:none;color:var(--ink)}
.lesson__n{font-family:var(--sans);font-weight:800;font-size:20px;color:var(--band);letter-spacing:-0.02em}
.lesson__t{font-size:17px;line-height:1.35}
.lessons a:hover .lesson__t{text-decoration:underline;text-underline-offset:3px}
.lesson__tag{outline:1px solid var(--rule);font-size:11px;align-self:center}
.level__side{position:sticky;top:76px;display:flex;flex-direction:column;gap:18px}
.course-panel{background:var(--band);color:var(--on-band);padding:24px;display:flex;flex-direction:column;gap:10px}
.course-panel img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--pic);margin-bottom:6px}
.course-panel .part__k{color:var(--on-band-2)}
.course-panel h3{font-size:22px;margin:0}
.course-panel .ticks{color:var(--on-band-2);font-size:16px;margin:4px 0 8px}
.course-panel .ticks li::before{border-color:var(--action)}
.course-panel .btn{justify-content:center}
.course-panel .link{color:var(--on-band);text-align:center}
.next-panel{display:flex;flex-direction:column;gap:4px;background:var(--paper-3);padding:20px 24px;text-decoration:none;color:var(--ink);font-size:16px}
.next-panel .h{font-size:20px}
.next-panel:hover .h{text-decoration:underline}

/* ------------------------------------------------------------------ posts (single post template) */
/* head band: the language colours as a gradient under grain, like the type hero */
.posthead{position:relative;color:var(--on-band);padding:30px 0 44px;background:linear-gradient(100deg,var(--band-deep) 0%,var(--band) 55%,color-mix(in srgb,var(--band) 78%,#fff) 100%);overflow:hidden}
.posthead::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");opacity:.13;mix-blend-mode:overlay}
.posthead .wrap{position:relative}
.posthead h1{font-size:46px;line-height:1.08;max-width:22ch;margin:6px 0 14px}
.posthead__stand{font-size:21px;line-height:1.5;color:var(--on-band-2);max-width:56ch;margin:0 0 14px}
.posthead__by{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--on-band-2);margin:0}
.crumbs--band,.crumbs--band a{color:var(--on-band-2) !important;padding:0 0 10px}
.crumbs--band a:hover{color:var(--on-band) !important}
.crumbs--band span[aria-hidden]{margin:0 8px}
.post-wrap{padding-top:48px}
.postgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:64px;align-items:start}
.postmain{min-width:0}
.postside{position:sticky;top:20px;display:flex;flex-direction:column;gap:18px}
/* media slots */
.player{background:var(--paper-3);padding:18px 18px 14px;margin-bottom:36px}
.player__frame iframe{width:100%;height:190px;border:0;display:block}
.player__also{font-family:var(--sans);font-size:14px;color:var(--muted);margin:12px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline}
.embed{position:relative;aspect-ratio:16/9;margin:28px 0;background:var(--band-deep);border-radius:var(--pic);overflow:hidden}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed--main{margin:0 0 36px}
.postimg{margin:0 0 36px}
.postimg img{width:100%;border-radius:var(--pic)}
/* reading text: whatever WordPress sends, made calm */
.prose{font-size:19px;line-height:1.65;max-width:68ch}
.prose > *{margin:0 0 20px}
.prose h2{font-size:28px;margin:44px 0 14px}
.prose h3{font-size:21px;margin:30px 0 10px}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin:0 0 8px}
.prose li::marker{color:var(--accent)}
.prose img{height:auto;border-radius:var(--pic);margin:8px 0}
.prose blockquote{margin:28px 0;padding:0 0 0 22px;font-style:italic;color:var(--ink-2);border-left:2px solid var(--rule)}
.prose table{width:100%;border-collapse:collapse;font-size:17px}
.prose th,.prose td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--rule)}
.prose .lede{font-size:21px}
/* side panels */
.stepper,.sidebox{background:var(--paper-3);padding:22px 24px;display:flex;flex-direction:column;gap:10px}
.stepper__pos{font-family:var(--sans);font-weight:800;font-size:19px;margin:0}
.stepper__bar{height:6px;background:var(--rule)}
.stepper__bar span{display:block;height:100%;background:var(--band)}
.stepper__link{display:block;text-decoration:none;color:var(--ink);font-size:16px;line-height:1.35;padding:10px 0;border-top:1px solid var(--rule)}
.stepper__link span{display:block;font-family:var(--sans);font-weight:700;font-size:13px;color:var(--accent);margin-bottom:2px}
.stepper__link:hover{text-decoration:underline}
.sidelink{display:block;padding:10px 0;border-top:1px solid var(--rule);text-decoration:none;color:var(--ink);font-size:17px}
.sidelink:hover{text-decoration:underline}
.sidebox__list{display:grid;gap:16px}
.sidebox__list .media__title{font-size:16px}
/* previous / next under the post */
.postnav__row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.postnav__row a{display:flex;flex-direction:column;gap:4px;background:var(--paper);padding:20px 24px;text-decoration:none;color:var(--ink)}
.postnav__row .h{font-size:19px}
.postnav__next{text-align:right}
.postnav__row a:hover .h{text-decoration:underline}

/* ------------------------------------------------------------------ breadcrumbs */
.crumbs{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--muted);padding:18px 0}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{margin:0 8px}

/* ------------------------------------------------------------------ welcome (who we are) */
.welcome{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.welcome h1,.welcome h2{font-size:38px;margin:0 0 14px}
.welcome .lede{margin-bottom:28px}
.hello{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;align-items:start;background:var(--paper-2);padding:24px}
.hello img{width:96px;height:96px;object-fit:cover;object-position:45% 30%;border-radius:50%}
.hello .h{font-size:20px;margin:0 0 8px}
.hello p{font-size:17px;line-height:1.55;margin:0 0 10px}

/* the free signup beside the welcome (homepage v2) */
.start-free{background:var(--paper-3);padding:28px}
.start-free .h{font-size:22px;margin:0 0 8px}
.start-free p{font-size:17px;line-height:1.5;margin:0 0 18px}
.start-free form{display:grid;gap:10px;font-family:var(--sans)}
.start-free .field{width:100%;background:var(--paper)}
.start-free .btn{justify-content:center}
/* "New here?" row: Mark's note left, free signup right */
.newhere{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;align-items:stretch}
.newhere__mark{display:grid;grid-template-columns:200px minmax(0,1fr);gap:36px;align-items:center;background:var(--paper);padding:44px}
.newhere__mark img{width:200px;height:200px;border-radius:50%}
.newhere__mark .h{font-size:34px;margin:0 0 12px}
.newhere__mark p{font-size:20px;line-height:1.55;margin:0 0 16px;color:var(--ink-2)}
.start-free--band{background:var(--band);color:var(--on-band);padding:40px;display:flex;flex-direction:column;justify-content:center}
.start-free--band .h{font-size:28px}
.start-free--band p{color:var(--on-band-2)}
.start-free--band .field{background:var(--paper)}
/* teachers: heading and Mark's note side by side, then the drift row */
.teachers-intro{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;margin-bottom:40px}

/* language buttons: pale square fill, round logo */
.langs{display:flex;flex-wrap:wrap;gap:10px;font-family:var(--sans);font-size:16px;font-weight:600}
.langs a{display:flex;gap:10px;align-items:center;background:var(--paper-3);padding:10px 16px 10px 10px;text-decoration:none}
.langs a:hover{background:var(--rule)}
.langs a.plain{background:none;padding:10px 6px;text-decoration:underline;text-underline-offset:4px}
.langs img{width:32px;height:32px}
/* welcome buttons: five to a row across the full width, a little larger */
.langs--grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;font-size:18px}
.langs--grid a{padding:14px 18px 14px 14px;gap:14px}
.langs--grid img{width:40px;height:40px}

/* ------------------------------------------------------------------ media cards */
.grid{display:grid;gap:36px 24px}
.grid--6{grid-template-columns:repeat(6,minmax(0,1fr));gap:24px 18px}
.grid--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:28px 22px}
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 18px}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 64px}

.media{display:flex;flex-direction:column;gap:9px;text-decoration:none;color:inherit}
.media__pic{position:relative;display:block}
.media__pic img,.media__pic .ph{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--pic);background:var(--paper-3)}
.media__pic .tag{position:absolute;left:0;top:0;border-top-left-radius:var(--pic)}
.media__title{font-family:var(--serif);font-size:18px;font-weight:600;line-height:1.3}
.media__text{font-size:16px;line-height:1.45;color:var(--ink-2)}
.section--band .media__text{color:var(--on-band-2)}
.media:hover .media__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.grid--6 .media__title{font-size:16px}
.media--course .media__title{font-family:var(--sans);font-weight:800;letter-spacing:-0.02em;font-size:18px;line-height:1.25}
.media--course .meta{color:var(--accent);font-weight:700}

/* ------------------------------------------------------------------ row list (series, levels) */
.rows{border-bottom:1px solid var(--rule)}
.row{display:grid;grid-template-columns:280px minmax(0,1fr) 220px;gap:36px;align-items:center;padding:28px 0;border-top:1px solid var(--rule);text-decoration:none;color:inherit}
.row img,.row .ph{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--pic)}
.row .h{display:block;font-size:28px;margin-bottom:8px}
.row__text{font-size:19px;line-height:1.5}
.row__when{font-family:var(--sans);font-size:15px;font-weight:600;color:var(--accent)}
.row:hover .h{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}

/* ------------------------------------------------------------------ tabs */
.tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-bottom:1px solid var(--rule);margin-bottom:32px;font-family:var(--sans)}
.tabs button{font:inherit;font-size:15px;font-weight:600;color:var(--muted);background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;padding:12px 14px 12px 2px;display:flex;gap:8px;align-items:center;cursor:pointer}
.tabs button[aria-selected="true"]{color:var(--ink);font-weight:700;border-bottom-color:var(--ink)}
.tabs img{width:24px;height:24px}

/* ------------------------------------------------------------------ price block (on the band) */
.price{display:flex;flex-direction:column;gap:12px;align-items:flex-start;border-left:1px solid var(--band-rule);padding-left:28px;font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--on-band-2)}
.price strong{color:var(--on-band)}
.price .big{font-size:24px}

/* ------------------------------------------------------------------ quotes */
/* <figure class="quote"><blockquote><p>…</p></blockquote><figcaption>…</figcaption></figure>
 * (figcaption, not <footer>: tools/apply-footer.mjs owns every <footer> on a page) */
.quote{margin:0;border-top:2px solid var(--ink);padding-top:24px}
.quote blockquote{margin:0}
.quote p{font-size:27px;line-height:1.4;font-style:italic;margin:0 0 14px}
.quote figcaption{font-family:var(--sans);font-size:14px;color:var(--muted)}

/* ------------------------------------------------------------------ people */
.person img,.person .ph{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--pic);margin-bottom:10px;background:var(--paper-3)}
.person .h{font-size:22px}
.person .meta{display:block;margin-top:2px;font-weight:500;font-size:14px}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:28px 20px}
.teacher{text-align:center;font-family:var(--sans)}
.teacher img{width:112px;height:112px;border-radius:50%;margin:0 auto 10px}
.teacher__ph{display:flex;align-items:center;justify-content:center;width:112px;height:112px;border-radius:50%;margin:0 auto 10px;background:var(--paper-3);color:var(--muted);font-size:34px;font-weight:800}
.teacher .h{display:block;font-size:16px;letter-spacing:-0.01em}
.teacher .meta{display:block;margin-top:2px;font-weight:500}
.ph{display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-size:13px;color:var(--muted);background:var(--paper-3)}

/* ------------------------------------------------------------------ drift (slow sideways row) */
/* <div class="drift" data-drift><div class="drift__track">…items…</div><button class="drift__pause" data-drift-pause>…</button></div>
 * Full width, no fades. js/site.js duplicates the items so the loop is seamless and sets
 * the speed from the item count. Stops on hover and focus; the button stops it for good.
 * Reduced motion: no drift, a plain row you can scroll. */
.drift{position:relative;overflow:hidden;padding:4px 0 60px}
.drift__track{display:flex;gap:24px;width:max-content;padding-left:var(--gutter);animation:drift var(--drift-s,80s) linear infinite}
.drift__track > *{flex:0 0 132px}
.drift:hover .drift__track,.drift:focus-within .drift__track,.drift.paused .drift__track{animation-play-state:paused}
@keyframes drift{to{transform:translateX(-50%)}}
.drift__pause{position:absolute;right:var(--gutter);bottom:0;width:40px;height:40px;border:0;background:var(--paper-3);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.drift + *{margin-top:0}
@media (prefers-reduced-motion:reduce){
  .drift{overflow-x:auto}
  .drift__track{animation:none}
  .drift__pause{display:none}
}

/* ------------------------------------------------------------------ anniversary / statement band */
.statement{display:flex;flex-wrap:wrap;align-items:center;gap:48px}
.statement .big{font-family:var(--sans);font-weight:800;font-size:260px;line-height:.8;letter-spacing:-0.04em;color:var(--action)}
.statement > div{flex:1 1 480px}
.statement h2{font-size:32px;line-height:1.15;margin:0 0 14px}
.statement .lede{margin:0 0 22px}

/* ------------------------------------------------------------------ feature band (second editable area) */
/* Like a type hero, smaller: band-colour gradient under grain, a big number or pictures on the
 * left, words and one button on the right. data-lang switches the colours. */
.feature{position:relative;color:var(--on-band);padding:64px 0;overflow:hidden;background:linear-gradient(100deg,var(--band-deep) 0%,var(--band) 55%,color-mix(in srgb,var(--band) 74%,#fff) 100%)}
.feature::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");opacity:.13;mix-blend-mode:overlay}
.feature .wrap{position:relative}
.feature__cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.feature__big{font-family:var(--sans);font-weight:800;font-size:260px;line-height:.8;letter-spacing:-0.04em;color:var(--action);margin:0}
.feature__pics{display:flex;gap:18px;justify-content:center}
.feature__pics img{width:44%;border-radius:var(--pic);box-shadow:0 20px 40px rgba(0,0,0,.35)}
.feature h2{font-size:32px;line-height:1.15;margin:0 0 14px}
.feature .kicker{color:var(--on-band-2)}
.feature .lede{font-size:19px;color:var(--on-band-2);margin:0 0 22px}

/* ------------------------------------------------------------------ signup, end of page */
.signup-end__cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.signup-end h2{font-size:36px;margin:18px 0 10px}
.signup-end .lede{font-size:19px;margin-bottom:18px}
.faces{display:flex}
.faces img{width:56px;height:56px;border-radius:50%;margin-right:-10px;box-shadow:0 0 0 3px var(--paper)}
.ticks{list-style:none;margin:0;padding:0;font-size:18px;color:var(--ink-2)}
.ticks li{padding-left:28px;position:relative;margin-bottom:8px}
.ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:7px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.signup-end form{display:grid;gap:10px;font-family:var(--sans)}
.signup-end .field{width:100%;background:var(--paper-3)}
.signup-end form .meta{color:var(--muted)}
.signup-end .btn{justify-content:center}

/* ------------------------------------------------------------------ signup */
.signup{display:flex;flex-wrap:wrap;gap:32px;align-items:end;justify-content:space-between}
.signup > div{flex:1 1 400px}
.signup h2{font-size:30px;margin:0 0 8px}
.signup form{flex:1 1 460px;display:flex;flex-wrap:wrap;font-family:var(--sans)}
.field{height:54px;font:inherit;font-size:16px;padding:0 14px;border:0;background:var(--paper-3);color:var(--ink);border-radius:0}
select.field{flex:1 1 140px;padding:0 12px;background:#e4ebec}
input.field{flex:2 1 220px}
/* what people type reads in Source Serif light; labels and buttons stay Montserrat */
input.field,textarea.field{font-family:var(--serif);font-weight:300;font-size:17px}
input.field::placeholder{color:var(--muted);opacity:1}
.signup .btn{height:54px;padding:0 22px;background:var(--band);color:var(--on-band)}
.signup .btn:hover{background:var(--band-deep)}
.signup .done{font-family:var(--sans);font-weight:600}

/* ------------------------------------------------------------------ footer */
.site-footer{background:var(--band-deep);color:var(--on-band-2);padding:56px 0 36px;font-family:var(--sans);font-size:14px}
.site-footer .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin-bottom:40px;line-height:2}
.site-footer strong{color:var(--on-band);display:block}
.site-footer a{color:var(--on-band-2);text-decoration:none;display:block}
.site-footer a:hover{color:var(--on-band);text-decoration:underline}
.site-footer .legal{border-top:1px solid var(--band-rule);padding-top:20px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.site-footer .legal nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.site-footer .legal a{display:inline}

/* ------------------------------------------------------------------ motion */
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ------------------------------------------------------------------ phone */
@media (max-width:1060px){
  .site-nav{display:none}
  .site-nav.open{display:flex;position:absolute;top:84px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--band);padding:8px 16px 20px;gap:0;z-index:50}
  .site-nav.open > a,.site-nav.open > .navdrop > button{padding:14px 4px;border-bottom:1px solid var(--band-rule);width:100%}
  .site-nav.open .btn{margin:16px 0 0;justify-content:center}
  .site-nav.open .navmenu{position:static;min-width:0;box-shadow:none;grid-template-columns:1fr 1fr}
  .menu-toggle{display:block}
}
@media (max-width:900px){
  :root{--gutter:16px;--section:56px}
  body{font-size:17px}
  h1,.hero__title{font-size:40px}
  h2{font-size:28px}
  .hero--type .hero__title{font-size:44px}
  .hero__cols{grid-template-columns:minmax(0,1fr);gap:32px}
  .hero--type .wrap{padding-top:112px;padding-bottom:48px}
  .hero{--hero-h:620px}
  .hero--split{grid-template-columns:minmax(0,1fr)}
  .hero--split .hero__panel{padding:40px var(--gutter)}
  .hero--split .hero__pic{min-height:240px;order:-1}
  .welcome,.teachers-intro,.newhere{grid-template-columns:minmax(0,1fr);gap:28px}
  .newhere__mark{grid-template-columns:minmax(0,1fr);gap:20px;padding:28px}
  .newhere__mark img{width:132px;height:132px}
  .newhere__mark .h{font-size:28px}
  .newhere__mark p{font-size:18px}
  .start-free--band{padding:28px}
  .welcome h1,.welcome h2{font-size:30px}
  .row{grid-template-columns:minmax(0,1fr);gap:12px}
  .row .h{font-size:24px}
  .grid--6,.grid--5,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .langs--grid{grid-template-columns:repeat(2,minmax(0,1fr));font-size:16px}
  .tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3,.grid--2{grid-template-columns:minmax(0,1fr);gap:36px}
  .price{border-left:0;padding-left:0}
  .quote p{font-size:22px}
  .team{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px}
  .teacher img,.teacher__ph{width:88px;height:88px}
  .feature__cols,.signup-end__cols{grid-template-columns:minmax(0,1fr);gap:28px}
  .feature__big{font-size:150px}
  .level{grid-template-columns:minmax(0,1fr);gap:14px}
  .level__n{font-size:44px}
  .level__course{grid-template-columns:120px minmax(0,1fr)}
  .practise__item{grid-template-columns:110px minmax(0,1fr);gap:18px;padding:20px}
  .example,.how,.doors,.qas{grid-template-columns:minmax(0,1fr);gap:28px}
  .lp-two,.lp-signup__cols{grid-template-columns:minmax(0,1fr);gap:20px}
  .lp-expect{grid-template-columns:minmax(0,1fr)}
  .lp-langs{display:none}
  .lp-pull{font-size:23px}
  .shelf-row{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .levelpage{grid-template-columns:minmax(0,1fr);gap:40px}
  .level__side{position:static}
  .lessons{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  .subnav--parts span{display:none}
  .part__head h2{font-size:24px}
  .postgrid{grid-template-columns:minmax(0,1fr);gap:36px}
  .postside{position:static}
  .posthead h1{font-size:32px}
  .posthead__stand{font-size:18px}
  .prose{font-size:18px}
  .postnav__row{grid-template-columns:minmax(0,1fr)}
  .postnav__next{text-align:left}
  .statement{gap:24px}
  .statement .big{font-size:150px}
  .site-footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Signups (js/site.js): honeypot, errors, thank-you, level question, notice, overlay */
.signup-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.signup-error{margin:4px 0 0;font-size:15px;font-family:var(--sans);font-weight:600;background:var(--paper);color:#a3161c;padding:10px 12px}
.signup-done{font-family:var(--serif)}
.signup-done__h,.start-free .signup-done__h{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.25;margin:0 0 6px}
.start-free .signup-done__line,.signup-done__line{font-family:var(--serif);font-size:18px;line-height:1.5;margin:0 0 14px}
/* Level question: a quiet list in the body serif, thin rules, no boxes */
.signup-levels{margin-top:6px}
.signup-levels__q,.start-free .signup-levels__q{font-family:var(--serif);font-size:19px;line-height:1.4;margin:0 0 6px}
.signup-level{display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;border:0;border-top:1px solid var(--rule);margin:0;padding:11px 4px;cursor:pointer;background:transparent;color:inherit;font-family:var(--serif)}
.signup-level:last-child{border-bottom:1px solid var(--rule)}
.start-free--band .signup-level{border-color:rgba(255,255,255,.22)}
.signup-level__name{font-size:18px;font-weight:600;white-space:nowrap}
.signup-level__hint{font-size:16px;font-style:italic;opacity:.8}
.signup-level::after{content:'\2192';margin-left:auto;opacity:0;transition:opacity .15s}
.signup-level:hover,.signup-level:focus-visible{background:var(--paper-3);outline:none}
.start-free--band .signup-level:hover,.start-free--band .signup-level:focus-visible{background:rgba(255,255,255,.08)}
.signup-level:hover::after,.signup-level:focus-visible::after{opacity:1}
.signup-level:disabled{opacity:.5;cursor:default}
.signup-notice{background:var(--action);color:var(--action-ink);font-family:var(--sans);font-weight:600;margin:0;padding:14px 20px;text-align:center}
.signup-notice--soft{background:var(--paper-3);color:var(--ink)}
/* Overlay: a postcard. Photo left, note and form right; stacks on phones. */
.signup-overlay{position:fixed;inset:0;z-index:1000;background:rgba(10,20,26,.62);display:flex;align-items:center;justify-content:center;padding:16px}
.signup-overlay__card{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);background:var(--paper);color:var(--ink);max-width:880px;width:100%;max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 24px 60px rgba(0,0,0,.35);border:10px solid var(--paper)}
.signup-overlay__pic{position:relative;min-height:100%;background:var(--paper-3)}
.signup-overlay__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48% 30%}
.signup-overlay__note{padding:34px 34px 26px;border-left:1px solid var(--rule);margin-left:24px;padding-left:28px;overflow:auto;min-height:0}
.signup-overlay__close{position:absolute;top:2px;right:4px;z-index:1;width:40px;height:40px;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;color:var(--ink)}
.signup-overlay__h{font-family:var(--serif);font-weight:600;font-size:28px;line-height:1.2;margin:0 0 12px}
.signup-overlay__p{font-family:var(--serif);font-size:18px;line-height:1.55;margin:0 0 20px}
.signup-overlay form{display:grid;gap:10px;font-family:var(--sans)}
.signup-overlay .field{width:100%;background:var(--paper-3)}
.signup-overlay .btn{justify-content:center}
.signup-overlay .meta{font-size:14px;margin:4px 0 0;opacity:.75}
.signup-overlay__note.is-done{display:flex;flex-direction:column;justify-content:center}
.signup-overlay .signup-level__hint{display:none}
.signup-overlay .signup-level{padding:8px 4px}
.signup-overlay .signup-done__h{font-size:22px;margin-bottom:4px}
.signup-overlay .signup-done__line{font-size:16px;margin-bottom:10px}
.signup-overlay .signup-levels__q{font-size:17px;margin-bottom:4px}
@media (max-width:720px){
  .signup-overlay{align-items:flex-end;padding:0}
  .signup-overlay__card{grid-template-columns:1fr;max-height:92vh;border-width:0}
  .signup-overlay__pic{height:170px;min-height:0}
  .signup-overlay__note{border-left:0;margin-left:0;padding:22px 20px 20px}
  .signup-overlay__close{background:var(--paper);top:8px;right:8px}
  .signup-overlay__h{font-size:24px}
}

/* Course pages ----------------------------------------------------------------
 * Course sales pages (course-*.html, tools/build-course-page.py). Everything else on those pages
 * reuses existing classes: hero--type + hero__cols/hero__thumb, subnav, points, team/teacher, how +
 * step, levelpage + part + lessons + course-panel, practise__item, quote, qas, media--course, feature. */
.hero--course{--hero-h:auto}
.hero--course .hero__title{font-size:56px;max-width:16ch}
.hero--course .hero__thumb img{box-shadow:0 24px 48px rgba(0,0,0,.32)}
/* the price: dollars as text, pounds in data-gbp (js/site.js swaps for UK visitors) */
.course-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-family:var(--sans);font-size:14px;font-weight:600;color:var(--on-band-2);margin:0 0 22px}
.course-price strong{font-size:30px;font-weight:800;letter-spacing:-0.02em;color:var(--on-band)}
.course-price--panel{margin:2px 0 4px}
.course-price--panel strong{font-size:26px}
/* who teaches you: words left, portraits right */
.course-teachers{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.course-team{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:28px 16px}
.course-team .teacher img{width:132px;height:132px}
.course-team .teacher .meta{font-size:13px}
/* what's included, under "inside every lesson" */
.course-inc__h{font-size:22px;margin:36px 0 6px}
.course-inc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 32px;font-size:16px}
.course-inc b{display:block;font-family:var(--sans);font-weight:700;font-size:15px;color:var(--ink)}
/* lesson lists that aren't links */
.part__h3{font-size:30px;margin:0 0 8px}
.lessons--plain li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:baseline;padding:13px 0}
/* three testimonials side by side */
.course-quotes{gap:40px 40px;align-items:start}
.course-quote p{font-size:19px;line-height:1.5}
@media (max-width:900px){
  .hero--course .hero__title{font-size:40px}
  .course-teachers{grid-template-columns:minmax(0,1fr);gap:28px}
  .course-team{grid-template-columns:repeat(3,minmax(0,1fr))}
  .course-team .teacher img{width:96px;height:96px}
  .course-inc{grid-template-columns:minmax(0,1fr)}
  .part__h3{font-size:24px}
  .course-quote p{font-size:18px}
}

/* CBTV, LA and About */
/* founder cards on About (#team): a smaller portrait on phones so the words get the width */
@media (max-width:600px){
  .hello{grid-template-columns:64px minmax(0,1fr);gap:16px;padding:20px}
  .hello img,.hello .teacher__ph{width:64px !important;height:64px !important}
  .hello .teacher__ph{font-size:10px !important;padding:4px !important}
}

/* Flagship course pages --------------------------------------------------------
 * The advanced story courses (LVET, LPV): <body data-flagship="lvet|lpv">, set by tools/build-course-page.py from a course's "flagship" entry. A calm dark ground carried
 * through the page, the original sales pages' textures behind the hero, the buy panel and the
 * closing band, finer and larger hero type, more air, fewer boxes. Same header, menu, signup and
 * footer as every other page; still square. Contrast: body text on these grounds is over 10:1,
 * muted text over 6:1, buttons over 6:1. */
[data-flagship="lvet"]{
  --ink:#ece9e3;--ink-2:#cfccd4;--muted:#a6a2ad;--rule:#2c2c37;
  --paper:#0c0c10;--paper-2:#111117;--paper-3:#16161d;
  --band:#0c0c10;--band-deep:#08080b;--band-rule:#2c2c37;--on-band:#ece9e3;--on-band-2:#bdb9c4;
  --accent:#a9c6ff;--fs-accent-2:#cfe0ff;--action:#4f8cf0;--action-hover:#6d9ff4;--action-ink:#08080b;
  --fs-shade:8,8,11;--fs-o1:.6;--fs-o2:.82;--fs-o3:.5;--fs-bg:url("../img/lvet-bg.jpg");
}
[data-flagship="lpv"]{
  --ink:#f3ebe4;--ink-2:#ddd0c8;--muted:#bba79f;--rule:#3d1d19;
  --paper:#1c0706;--paper-2:#230a08;--paper-3:#2e100d;
  --band:#1c0706;--band-deep:#120403;--band-rule:#3d1d19;--on-band:#f3ebe4;--on-band-2:#dac8be;
  --accent:#e6c49a;--fs-accent-2:#f2dcc0;--action:#e3b98a;--action-hover:#eccaa2;--action-ink:#1c0806;
  --fs-shade:14,4,3;--fs-o1:.15;--fs-o2:.5;--fs-o3:.45;--fs-bg:url("../img/lpv-bg.jpg");
}
[data-flagship]{--section:112px;background:var(--paper)}
[data-flagship] .fs-tex,
[data-flagship] .hero--flagship,
[data-flagship] .feature--flagship,
[data-flagship] .course-panel{
  background:linear-gradient(180deg,rgba(var(--fs-shade),var(--fs-o1)),rgba(var(--fs-shade),var(--fs-o2))),linear-gradient(100deg,rgba(var(--fs-shade),var(--fs-o3)),rgba(var(--fs-shade),.1)),var(--fs-bg) center/cover no-repeat,var(--band-deep);
}
[data-flagship] .hero--flagship::before,[data-flagship] .feature--flagship::before{display:none}
/* hero: finer, larger title; the book cover given room */
.hero--flagship .wrap{padding-top:176px;padding-bottom:120px}
.hero--flagship .hero__cols{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:96px}
.hero--flagship .hero__kicker,.hero--flagship .hero__kicker a{color:var(--accent) !important;font-weight:600;font-size:15px;margin-bottom:26px}
/* Flagship hero titles match the other course pages (Mark, 15 Oct): same weight and size from .hero--course */
.hero--flagship .hero__text{font-size:22px;line-height:1.6;max-width:42ch;color:var(--ink-2);margin-bottom:34px}
.hero--flagship .level-facts{color:var(--fs-accent-2);font-weight:600;margin-bottom:38px}
.hero--flagship .course-price strong{color:var(--accent);font-weight:700}
.hero__cover{margin:0;justify-self:end;width:100%;max-width:340px}
.hero__cover img{width:100%;height:auto;border-radius:var(--pic);box-shadow:0 40px 80px rgba(0,0,0,.6),0 8px 20px rgba(0,0,0,.4)}
/* the page: dark ground, accent kickers, links and ticks, a hairline over each section title */
[data-flagship] .subnav{background:var(--paper);border-bottom-color:var(--rule)}
[data-flagship] .subnav a{color:var(--ink-2)}
[data-flagship] .subnav a:hover{color:var(--accent)}
[data-flagship] main h2{font-weight:700;font-size:44px;letter-spacing:-0.025em}
[data-flagship] main .section-head h2::before,[data-flagship] .course-teachers h2::before,[data-flagship] .how h2::before{content:"";display:block;width:56px;height:1px;background:var(--accent);margin-bottom:26px}
[data-flagship] main .section-head{margin-bottom:48px}
[data-flagship] main .link{color:var(--accent)}
[data-flagship] .points{gap:48px}
[data-flagship] .points h3,[data-flagship] .qa h3,[data-flagship] .step h3{font-weight:700}
[data-flagship] .step__k,[data-flagship] .part__k{color:var(--accent);font-weight:600}
[data-flagship] .lesson__n{color:var(--accent);font-weight:600}
[data-flagship] .course-inc b{color:var(--ink)}
[data-flagship] .course-team .teacher img{box-shadow:0 0 0 1px var(--rule)}
[data-flagship] .quote{border-top:1px solid var(--accent)}
[data-flagship] .quote p{color:var(--ink)}
[data-flagship] .qas{gap:44px 72px}
[data-flagship] select.field{background:var(--paper-3);color:var(--ink)}
/* the buy panel, on the texture */
[data-flagship] .course-panel{padding:32px}
[data-flagship] .course-panel .course-price strong{color:var(--accent)}
[data-flagship] .course-panel .link{color:var(--on-band)}
/* the book: no box, the cover larger */
[data-flagship] .practise__item{background:none;padding:0;grid-template-columns:240px minmax(0,1fr);gap:56px}
[data-flagship] .practise__item img{box-shadow:0 30px 60px rgba(0,0,0,.55)}
[data-flagship] .practise__item h3{font-weight:700;font-size:32px}
/* closing band, on the texture, with the cover */
.feature--flagship{padding:120px 0}
.feature--flagship .feature__cols{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:96px}
.feature--flagship .feature__pics{justify-content:flex-start}
.feature--flagship .feature__cover{width:100%;max-width:280px;height:auto;box-shadow:0 40px 80px rgba(0,0,0,.6)}
.feature--flagship h2{font-weight:600;font-size:52px;letter-spacing:-0.03em;margin-bottom:20px}
.feature--flagship .kicker{color:var(--accent)}
.feature--flagship .lede{font-size:21px;line-height:1.6;max-width:44ch}
.feature--flagship .course-price strong{color:var(--accent)}
[data-flagship] .start-free--band{background:var(--paper-3)}
@media (max-width:900px){
  [data-flagship]{--section:72px}
  .hero--flagship .wrap{padding-top:120px;padding-bottom:64px}
  .hero--flagship .hero__cols{grid-template-columns:minmax(0,1fr);gap:44px}

  .hero--flagship .hero__text{font-size:19px}
  .hero__cover{justify-self:start;max-width:200px}
  [data-flagship] main h2{font-size:32px}
  [data-flagship] .points{gap:32px 20px}
  [data-flagship] .practise__item{grid-template-columns:120px minmax(0,1fr);gap:24px}
  [data-flagship] .practise__item h3{font-size:24px}
  .feature--flagship{padding:72px 0}
  .feature--flagship .feature__cols{grid-template-columns:minmax(0,1fr);gap:36px}
  .feature--flagship .feature__cover{max-width:180px}
  .feature--flagship h2{font-size:36px}
  .feature--flagship .lede{font-size:19px}
}
@media (max-width:600px){
  [data-flagship] .points{grid-template-columns:minmax(0,1fr);gap:28px}
}
/* Flagship course pages: the course artwork (16:9) in the hero and closing band */
.hero__art img,.feature--flagship .feature__art{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--pic);box-shadow:0 40px 80px rgba(0,0,0,.6),0 8px 20px rgba(0,0,0,.4)}
.hero--flagship .hero__cols:has(.hero__art){grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px}
@media (max-width:900px){.hero--flagship .hero__cols:has(.hero__art){grid-template-columns:minmax(0,1fr);gap:40px}}
/* No Montserrat italic anywhere (house rule): titles marked <i> in headings stay upright */
h1 i,h2 i,h3 i,h4 i,h1 em,h2 em,h3 em,h4 em{font-style:normal}
/* Floating rivers fade out at both edges, so a wide screen doesn't show the whole row at once (Mark, 15 Oct) */
.drift{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
@media (min-width:1600px){.drift{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 74%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 74%,transparent 100%)}}
@media (max-width:640px){.drift{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 10%,#000 90%,transparent 100%)}}
/* Text-only dropdowns in the main menu (Learn with us, Log in) */
.navmenu--text{min-width:250px;grid-template-columns:1fr}
.site-nav .navdrop:last-of-type .navmenu--text{left:auto;right:0}
.navdrop[data-nav="login"] .navmenu--text{left:auto;right:0}
@media (max-width:900px){.site-nav.open .navmenu--text{grid-template-columns:1fr}}

/* VIP coaching band: foot of the five FIGSE hubs (Mark, 15 Oct 2026). Silver, quiet, square. Register interest only. */
.vip{position:relative;overflow:hidden;padding:104px 0 96px;color:#23282d;
  background:linear-gradient(115deg,#a7adb3 0%,#d9dde1 16%,#f8f9fa 30%,#c4c9ce 47%,#eceef0 61%,#b0b6bc 80%,#dde0e3 100%);
  border-top:1px solid #b6bcc2;border-bottom:1px solid #b6bcc2}
.vip::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,.7) 38%,transparent 52%),linear-gradient(100deg,transparent 60%,rgba(255,255,255,.35) 72%,transparent 84%)}
.vip > .wrap{position:relative}
.vip__inner{max-width:720px;text-align:center}
.vip__k{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#5d646b;margin:0 0 22px}
.vip__k::after{content:"";display:block;width:56px;height:1px;background:#9aa1a8;margin:22px auto 0}
.vip h2{font-family:var(--sans);font-weight:800;letter-spacing:-0.015em;font-size:34px;line-height:1.2;color:#1f2428;margin:0 0 20px;text-wrap:balance}
.vip__text{font-family:var(--serif);font-size:19px;line-height:1.6;color:#3b4248;margin:0 auto 14px;max-width:60ch}
.vip__form{display:flex;gap:10px;max-width:520px;margin:30px auto 0;font-family:var(--sans)}
.vip__form .field{flex:1 1 auto;min-width:0;background:#fff;color:#1f2428;box-shadow:inset 0 -1px 0 #9aa1a8}
.vip__form .btn{flex:0 0 auto;background:#2a2f34;color:#f4f5f6}
.vip__form .btn:hover,.vip__form .btn:focus-visible{background:#41474d;color:#fff}
.vip__small{font-family:var(--serif);font-size:15px;line-height:1.5;color:#5d646b;margin:16px auto 0;max-width:52ch}
@media (max-width:600px){
  .vip{padding:72px 0 68px}
  .vip h2{font-size:27px}
  .vip__text{font-size:17px}
  .vip__form{flex-direction:column}
  .vip__form .btn{justify-content:center}
}
/* Five ways to learn (homepage third, hubs second): words only, on the language's light tint */
.ways{background:var(--paper-3)}
.ways__lede{font-size:19px;max-width:62ch}
.ways__row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--band);margin-top:28px}
.ways__item{display:flex;flex-direction:column;gap:8px;padding:22px 22px 24px 0;border-right:1px solid var(--rule);text-decoration:none;color:inherit}
.ways__item + .ways__item{padding-left:22px}
.ways__item:last-child{border-right:0}
.ways__k{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.ways__h{font-family:var(--sans);font-weight:800;font-size:20px;line-height:1.15;color:var(--ink)}
.ways__p{font-size:16px;line-height:1.5;color:var(--ink-2)}
.ways__f{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);margin-top:auto;padding-top:6px}
.ways__item:hover .ways__h{text-decoration:underline;text-underline-offset:4px}
.ways__note{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--muted);margin:22px 0 0}
@media (max-width:1000px){.ways__row{grid-template-columns:repeat(2,minmax(0,1fr))}.ways__item,.ways__item + .ways__item{padding:18px 18px 18px 0;border-right:0;border-bottom:1px solid var(--rule)}}
@media (max-width:600px){.ways__row{grid-template-columns:minmax(0,1fr)}.ways__item,.ways__item + .ways__item{padding:16px 0}}
/* Level pages: English description under a lesson title that's only in the language being learned */
.lesson__d{display:block;font-size:14px;line-height:1.35;color:var(--muted);margin-top:3px}

/* ------------------------------------------------------------------ memory wall (20 years hero) */
/* A wide strip of photos and logos (tools/memory-wall.py -> img/20years/wall.webp) drifting right
 * to left behind a hero. Two copies of the strip side by side, translateX(-50%) loops seamlessly.
 * <div class="memwall" data-wall aria-hidden="true"><div class="memwall__track"><img><img></div></div>
 * Pace set by js/site.js from the strip's width. Reduced motion: a still wall. */
.memwall{position:absolute;inset:0;overflow:hidden;background:var(--band-deep)}
.memwall__track{display:flex;height:100%;width:max-content;animation:drift var(--wall-s,200s) linear infinite;opacity:0;transition:opacity .8s ease}
.memwall.ready .memwall__track{opacity:1}
.memwall__copy{position:relative;display:block;height:100%}
.memwall__track picture{display:block;height:100%}
.memwall__track img{height:100%;width:auto;max-width:none;display:block}
.memwall::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,24,30,.92) 0%,rgba(14,24,30,.82) 38%,rgba(14,24,30,.45) 72%,rgba(14,24,30,.3) 100%)}
.memwall.paused .memwall__track{animation-play-state:paused}
.hero--wall::before{display:none}
.hero--wall .hero__pause{z-index:2}
.memwall__more{position:absolute;right:84px;bottom:28px;z-index:2;height:48px;padding:0 18px;border:0;background:rgba(14,24,30,.7);color:#fff;font-family:var(--sans);font-weight:700;font-size:14px;cursor:pointer;display:flex;align-items:center;gap:8px}
.memwall__more:hover,.hero__pause:hover{background:rgba(14,24,30,.9)}
.memwall__track{transition:opacity .25s ease}
@media (max-width:640px){.hero--wall .wrap{padding-bottom:92px}.memwall__more{right:72px;bottom:16px;height:44px;padding:0 14px;font-size:13px}.hero--wall .hero__pause{right:16px;bottom:16px;width:44px;height:44px}}
@media (max-width:900px){.memwall::after{background:rgba(14,24,30,.8)}}
@media (prefers-reduced-motion:reduce){.memwall__track{animation:none}.hero--wall .hero__pause{display:none}.memwall__more{right:28px}}
/* Homepage books row: ten covers (Portuguese and Japanese added, Mark 17 Oct) */
.shelf-row{grid-template-columns:repeat(10,minmax(0,1fr));gap:18px}
@media (max-width:1100px){.shelf-row{grid-template-columns:repeat(5,minmax(0,1fr))}}
/* Signup forms: "I'm learning" language picker after name and email (Mark, 17 Oct) */
.signup-learning{display:flex;align-items:center;gap:12px;margin:0;font-family:var(--sans);font-size:14px;font-weight:600}
.signup-learning span{flex:0 0 auto}
.signup-learning select{flex:1 1 auto;min-width:0;margin:0}
/* Footer column headings in capitals (Mark, 17 Oct) */
.site-footer .cols strong{text-transform:uppercase;letter-spacing:.08em;font-size:13px}
/* YouTube page: channel logos beside the two panel titles */
.yt-channel__h{display:flex;align-items:center;gap:12px}
.yt-channel__h img{width:48px;height:48px;border-radius:50%;flex:0 0 auto}
/* YouTube page hero: a still wall of video thumbnails at a slight angle, behind the words */
.hero--ytwall{position:relative;overflow:hidden;isolation:isolate}
.hero--ytwall .wrap{position:relative;z-index:2}
.ytwall{position:absolute;inset:-35% -10%;z-index:0;pointer-events:none}
.ytwall__grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:10px;transform:rotate(-7deg)}
.ytwall__grid img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:var(--pic)}
.hero--ytwall::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--band) 0%,color-mix(in srgb,var(--band) 88%,transparent) 42%,color-mix(in srgb,var(--band) 45%,transparent) 100%)}
@media (max-width:760px){.ytwall__grid{grid-template-columns:repeat(5,minmax(0,1fr))}.hero--ytwall::after{background:color-mix(in srgb,var(--band) 82%,transparent)}}
/* Footer links in regular weight; the capitalised headings stay bold (Mark, 17 Oct) */
.site-footer .cols a{font-weight:400}
/* VIP band: the language's round logo in a shiny silver ring (Mark, 17 Oct) */
.vip__logo{display:inline-block;width:84px;height:84px;padding:5px;border-radius:50%;margin:0 auto 18px;
  background:conic-gradient(from 210deg,#f4f5f7,#9aa1a8,#ffffff,#8b9299,#e6e8eb,#a6adb4,#f4f5f7);
  box-shadow:0 6px 18px rgba(35,40,45,.18),inset 0 0 0 1px rgba(255,255,255,.6)}
.vip__logo img{width:100%;height:100%;border-radius:50%;display:block;background:#fff}
/* Team-row portraits link to the person on the Meet the team page */
a.teacher{color:inherit;text-decoration:none}
a.teacher:hover .h{text-decoration:underline;text-underline-offset:3px}
a.teacher:focus-visible{outline:2px solid var(--action);outline-offset:4px}
/* Header logo: the C7 lock-up (Source Serif italic "Coffee Break", Montserrat 800 LANGUAGES), Mark 17 Oct */
.site-header .logo img{height:48px;width:auto}
@media (max-width:640px){.site-header .logo img{height:40px}}

/* menu "All languages" jumps here: keep the whole grid below the sticky header (Mark, 17 Oct 2026) */
#languages{scroll-margin-top:110px}

/* faces link to the person on Meet the team (Mark, 17 Oct 2026) */
.face-link{display:inline-block;flex:0 0 auto;line-height:0;border-radius:50%}
.faces .face-link img{max-width:none;flex:none}
.faces .face-link:hover img,.faces .face-link:focus-visible img{transform:translateY(-2px)}
.faces img{transition:transform .15s}

/* four ways (Japanese, 17 Oct 2026) */
@media (min-width:1001px){.ways__row--4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* a busy hero picture (the Coffee Break TV wall): a stronger fade under the menu */
.hero--split .hero__pic--busy::after{height:200px;background:linear-gradient(180deg,rgba(14,24,30,.88),rgba(14,24,30,0))}

/* Rivers on the Coffee Break TV page (17 Oct 2026): two rows of lesson thumbnails and two of member quotes,
   moving in opposite directions; hover (or a tap) pauses. Square corners, the site's type. */
.river-wrap{display:grid;gap:14px}
.river{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.river__track{display:flex;gap:14px;width:max-content;animation:river 90s linear infinite}
.river--rev .river__track{animation-direction:reverse}
.river:hover .river__track,.river.is-paused .river__track{animation-play-state:paused}
.river__track a{display:block;flex:0 0 auto;line-height:0}
.river__track img{height:160px;width:auto;aspect-ratio:16/9;object-fit:cover;background:var(--paper-3);transition:transform .18s}
.river__track a:hover img,.river__track a:focus-visible img{transform:scale(1.04)}
.river--quotes .river__track{gap:18px;animation-duration:140s}
.river-quote{flex:0 0 auto;width:340px;margin:0;padding:22px 24px 20px;background:var(--paper);border-top:3px solid var(--band,#95b31d);display:flex;flex-direction:column;gap:12px}
.section--white .river-quote{background:var(--paper-2,#f2f5f4)}
.river-quote p{margin:0;font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--ink)}
.river-quote cite{margin-top:auto;font-family:var(--sans);font-style:normal;font-weight:700;font-size:14px;color:var(--muted)}
@keyframes river{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.river__track{animation:none}.river{overflow-x:auto}}
@media (max-width:600px){.river__track img{height:120px}.river-quote{width:280px}}


/* ── 20yearsoffer page parts (from the design preview) ── */
[hidden]{display:none !important}
.years{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.years__big{font-family:var(--sans);font-weight:800;font-size:220px;line-height:.8;letter-spacing:-0.05em;color:var(--band);margin:0}
.years__big small{display:block;font-size:22px;letter-spacing:0;margin-top:18px;color:var(--accent)}
.more3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.more3 .media__pic img,.more3 .media__pic .ph{aspect-ratio:16/9}
.more3 .media__title{font-family:var(--sans);font-weight:800;font-size:21px;letter-spacing:-0.02em}
.feature__big{font-size:190px}
.ends{font-family:var(--sans);font-weight:700;font-size:15px;color:var(--on-band-2);margin-top:14px}
@media (max-width:900px){
  .more3,.years{grid-template-columns:minmax(0,1fr)}
  .years__big{font-size:140px}
}
.offerline{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px;align-items:center}
.codebox{background:var(--band);color:var(--on-band);padding:24px 28px;display:flex;flex-direction:column;gap:6px}
.codebox__k{font-family:var(--sans);font-weight:700;font-size:14px;color:var(--on-band-2)}
.codebox__code{font-family:var(--sans);font-weight:800;font-size:44px;letter-spacing:.04em;color:var(--action);line-height:1}
.codebox .meta{color:var(--on-band-2)}
.codenote{display:flex;gap:14px;align-items:center;margin-top:32px;background:var(--paper-3);padding:14px 18px;font-size:17px}
.code{font-family:var(--sans);font-weight:800;letter-spacing:.04em;background:var(--band);color:var(--action);padding:6px 10px;white-space:nowrap}
.tvoffer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center}
.plans{width:100%;border-collapse:collapse;font-family:var(--sans)}
.plans th,.plans td{padding:12px 10px;border-bottom:1px solid var(--band-rule);text-align:left}
.plans thead th{font-size:13px;color:var(--on-band-2);font-weight:700}
.plans tbody th{font-weight:700}
@media (max-width:900px){.offerline,.tvoffer{grid-template-columns:minmax(0,1fr);gap:24px}.plans th,.plans td{padding:10px 6px}}
/* ── 18 Oct 2026: hero memory wall and the numbered celebrations, as on the 20th anniversary page ── */
.y20-herocols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:48px;align-items:center;position:relative;z-index:1}
.y20-big{font-family:var(--sans);font-weight:800;font-size:240px;line-height:.8;letter-spacing:-0.05em;color:var(--action);margin:0;text-align:center;text-shadow:0 10px 40px rgba(0,0,0,.35)}
.y20-big small{font-size:.5em;letter-spacing:-0.02em}
.y20-item{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:64px;align-items:center}
.y20-item--flip .y20-item__pic{order:-1}
.y20-item__n{font-family:var(--sans);font-weight:800;font-size:88px;line-height:.85;letter-spacing:-0.04em;color:var(--accent);margin:0 0 18px}
.y20-item__h{font-family:var(--sans);font-weight:800;font-size:34px;line-height:1.15;letter-spacing:-0.02em;margin:0 0 16px}
.y20-item .lede{font-size:19px;margin:0 0 14px;max-width:52ch}
.y20-item .actions{margin-top:26px}
.y20-item__pic{margin:0}
.y20-item__pic img{width:100%;height:auto;border-radius:var(--pic);box-shadow:0 2px 4px rgba(10,20,26,.08),0 18px 36px rgba(10,20,26,.16)}
.y20-ot{background:#3a10a3;color:#fff}
.y20-ot .y20-item__n{color:#8eff4c}
.y20-ot .kicker,.y20-ot .lede{color:#ddd2ff}
.y20-ot .btn{background:#8eff4c;color:#1a0a4a}
.y20-ot .btn:hover{background:#a9ff78}
.y20-ot__logo{width:96px;height:auto;margin:0 0 18px;filter:drop-shadow(0 8px 20px rgba(0,0,0,.35))}
.y20-ot .y20-item__pic img{box-shadow:0 20px 40px rgba(0,0,0,.35)}
.y20-site .y20-item__n{color:var(--action)}
.y20-site__logo{margin:0;text-align:center}
.y20-site__logo img{width:80%;max-width:420px;height:auto;display:inline-block}
@media (max-width:900px){
  .y20-herocols{grid-template-columns:minmax(0,1fr);gap:24px}
  .y20-big{font-size:140px;text-align:left}
  .y20-item{grid-template-columns:minmax(0,1fr);gap:32px}
  .y20-item--flip .y20-item__pic{order:0}
  .y20-item__n{font-size:64px}
  .y20-item__h{font-size:28px}
}