/* =====================================================================
   Languify — site design system v3  (2026-10-09)
   Off-white page · ink voice · logo blue as the single accent.
   Light and dark, switched by data-theme on <html>.

   Replaces site.css on every page. The variable names site.css used are
   kept, so the page-level component CSS keeps working unchanged — and
   because components are written as "surface = --cream, text = --ink",
   the dark theme is mostly a matter of swapping those two tokens.
   ===================================================================== */

:root{
  /* ---- light (default) ------------------------------------------- */
  --page:#FAF7F0;           /* the page itself — warm off-white, never pure white */
  --cream:#FFFDF7;          /* raised surfaces: cards, panels, the nav bar */
  --ink:#101623;            /* all reading text */
  --sec:#3C4351;            /* secondary text */
  --quiet:#8D9BAA;          /* rules, dividers, decoration */
  --quiet-ink:#5A6878;      /* small text in the quiet role — 5.3:1 on the page */

  --blue:#3E7CA6;           /* the logo bubble blue — the one accent */
  --on-blue:#FFFDF7;        /* text on a filled blue */
  --ink-blue:#1D3A55;       /* the accent, one step deeper (hover, text on tint) */

  --hair:#E6E1D6;           /* hairlines, warmed to match the page */
  --line:var(--hair);
  --edge:#D5CFC2;           /* a visible edge: outlined buttons, inputs */
  --tint:#EAF3FA;           /* the blue tinted panel */
  --tint-soft:#F4F0E6;      /* the alternating section ground */
  --glass:rgba(255,253,247,.78);
  --ink-hover:#1C2436;      /* the solid ink button, hovered */

  --mint:#9BE3C0;
  --mint-pale:#EBF8F1;
  --mint-text:#1D5B42;
  --sky-light:#B6DCF2;
  --sky:#7FBBE4;
  --sky-deep:#62A7D9;
  --amber:var(--blue);      /* retired: amber resolves to the logo blue */
  --link:var(--blue);
  --bubble:#3E7CA6;         /* the logo's own bubble — never themed */

  /* the dark ground used by the footer and the test's result panel */
  --ground:#101623;
  --ground-2:#1C2436;
  --on-ground:#C9DAE6;
  --sec-navy:var(--on-ground);

  --shadow:none;
  --shadow-sm:none;
  --lift:0 10px 24px -18px rgba(16,22,35,.5);
  --lift-strong:0 18px 34px -24px rgba(16,22,35,.55);

  --bw:1px;
  --r:18px;
  --r-sm:12px;
  --r-lg:26px;

  --ar:'Alexandria','Segoe UI',Tahoma,sans-serif;
  --en:'Bricolage Grotesque','Alexandria',sans-serif;
  --nav-h:68px;
  --maxw:1120px;

  color-scheme:light;
}

/* ---- dark ---------------------------------------------------------
   The same roles with different values. No markup changes.          */
:root[data-theme="dark"]{
  --page:#0F1520;
  --cream:#161E2B;
  --ink:#E9EFF6;
  --sec:#B3C0CE;
  --quiet:#7C8A9A;
  --quiet-ink:#9AA8B8;

  --blue:#7FB3D8;
  --on-blue:#0F1520;
  --ink-blue:#A9CCE6;

  --hair:#273143;
  --edge:#3A4659;
  --tint:#17293B;
  --tint-soft:#121A26;
  --glass:rgba(22,30,43,.78);
  --ink-hover:#D6E2EE;

  --mint:#3F8A68;
  --mint-pale:#15302A;
  --mint-text:#8FE0BC;
  --sky-light:#1F4059;
  --sky:#2E6085;
  --sky-deep:#4A8CBC;

  --ground:#0A0F18;
  --ground-2:#17202E;
  --on-ground:#AEBECD;

  --lift:0 10px 26px -18px rgba(0,0,0,.8);
  --lift-strong:0 18px 38px -24px rgba(0,0,0,.85);

  color-scheme:dark;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--page)}
body{
  background:var(--page);color:var(--ink);
  font-family:var(--ar);font-weight:500;font-size:17px;line-height:1.8;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
  transition:background-color .3s ease,color .3s ease;
}
main{flex:1;position:relative}
img,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--ink-blue)}
b,strong{font-weight:700}
.en{font-family:var(--en);direction:ltr;unicode-bidi:isolate}
.ltr{direction:ltr;unicode-bidi:isolate}
.tabular{font-variant-numeric:tabular-nums}
.hide{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:8px}
.skip{position:absolute;top:-70px;inset-inline-start:16px;z-index:100;background:var(--ink);color:var(--page);padding:12px 18px;border-radius:12px;font-weight:700}
.skip:focus{top:12px;color:var(--page)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ---- layout ------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:clamp(20px,4vw,40px)}
.wrap.narrow{max-width:860px}
.section{padding-block:clamp(60px,8vw,108px);position:relative}
.section.tight{padding-block:clamp(44px,5vw,72px)}
.section.alt{background:var(--tint-soft)}
section[id],header[id],div[id].anchor{scroll-margin-top:calc(var(--nav-h) + 14px)}
.hairline{border-top:1px solid var(--hair)}

/* ---- type --------------------------------------------------------- */
h1,h2,h3,h4{font-weight:800;line-height:1.28;text-wrap:balance;letter-spacing:-.01em}
h3,h4{font-weight:700}
h1{font-size:clamp(33px,5vw,58px);line-height:1.18}
h2{font-size:clamp(26px,3.5vw,41px)}
h3{font-size:clamp(18px,2vw,22px)}
.lead{font-size:clamp(16.5px,1.8vw,20px);color:var(--sec);font-weight:500;text-wrap:pretty;max-width:58ch}
.note{font-size:14.5px;color:var(--sec);line-height:1.75}
.src{font-size:13px;color:var(--quiet-ink);line-height:1.8;max-width:88ch}
.src a{color:var(--quiet-ink);text-decoration:underline;text-underline-offset:3px}
.src a:hover{color:var(--blue)}
.eyebrow{font-size:13.5px;font-weight:700;color:var(--blue);letter-spacing:.02em}
.label{font-family:var(--en);direction:ltr;unicode-bidi:isolate;font-weight:700;font-size:12.5px;
       letter-spacing:.06em;text-transform:uppercase;color:var(--quiet-ink)}
.s-head{display:flex;flex-direction:column;gap:12px;margin-bottom:clamp(30px,4.5vw,52px);max-width:62ch}

/* the marker stroke — the same hand-drawn path used on the posts */
.hi{position:relative;display:inline;background-repeat:no-repeat;background-position:center 88%;
    background-size:100% .42em;padding:0 .06em;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 15' preserveAspectRatio='none'%3E%3Cpath d='M4 10C40 4 68 13 104 8s62-5 92 1' fill='none' stroke='%233E7CA6' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E")}
:root[data-theme="dark"] .hi{
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 15' preserveAspectRatio='none'%3E%3Cpath d='M4 10C40 4 68 13 104 8s62-5 92 1' fill='none' stroke='%237FB3D8' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E")}

/* ---- logo (inline SVG of the official mark — never redrawn) ------- */
.logo{display:inline-block;height:auto;color:var(--ink);direction:ltr;unicode-bidi:isolate}
.logo text{font-family:'Languify Mark','Bricolage Grotesque',sans-serif;font-weight:700;direction:ltr}
.logo.cream{color:#FFFDF7}

/* ---- buttons ------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--ar);font-weight:700;font-size:16px;line-height:1.2;
  min-height:52px;padding:13px 26px;border-radius:999px;cursor:pointer;
  border:1.5px solid transparent;background:var(--cream);color:var(--ink);
  transition:background .16s ease,color .16s ease,border-color .16s ease,
             transform .16s ease,box-shadow .16s ease;
  text-wrap:nowrap;
}
.btn svg{flex:0 0 auto}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-ink{background:var(--ink);color:var(--page)}
.btn-ink:hover{background:var(--ink-hover);color:var(--page);box-shadow:var(--lift)}
.btn-line{background:transparent;color:var(--ink);border-color:var(--edge)}
.btn-line:hover{background:var(--tint);border-color:var(--blue);color:var(--ink)}
.btn-blue,.btn-sky{background:var(--blue);color:var(--on-blue)}
.btn-blue:hover,.btn-sky:hover{background:var(--ink-blue);color:var(--on-blue)}
.btn-cream{background:var(--cream);color:var(--ink);border-color:var(--edge)}
.btn-mint{background:var(--mint-pale);color:var(--mint-text)}
.btn-lg{min-height:58px;padding:15px 32px;font-size:17.5px}
.btn-sm{min-height:44px;padding:10px 20px;font-size:15px}
.btn-quiet{background:transparent;border-color:var(--hair);color:var(--sec)}
.btn-quiet:hover{border-color:var(--quiet);color:var(--ink);background:transparent}
.btn[aria-disabled="true"],.btn:disabled{opacity:.45;pointer-events:none}
.btn-block{width:100%}
.alink{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:var(--blue);min-height:44px}
.alink svg{transition:transform .18s ease}
.alink:hover svg{transform:translateX(-4px)}

/* ---- small marks -------------------------------------------------- */
.pill{display:inline-flex;align-items:center;gap:8px;width:fit-content;
  background:var(--tint);color:var(--ink-blue);border:0;
  font-size:13.5px;font-weight:700;padding:6px 14px;border-radius:999px;line-height:1.3}
.pill.mint{background:var(--mint-pale);color:var(--mint-text)}
.pill.quiet{background:transparent;color:var(--quiet-ink);border:1px solid var(--hair)}
.pill.ink{background:var(--ink);color:var(--page)}
.pill.sky,.pill.amber{background:var(--tint);color:var(--ink-blue)}
.num{display:inline-grid;place-items:center;flex:0 0 auto;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--hair);background:var(--cream);color:var(--ink);
  font-family:var(--en);font-weight:800;font-size:15px;direction:ltr}
.num.sky,.num.amber{background:var(--tint);border-color:transparent;color:var(--ink-blue)}
.num.mint{background:var(--mint-pale);border-color:transparent;color:var(--mint-text)}
.num.ink{background:var(--ink);color:var(--page);border-color:var(--ink)}
.sq{display:inline-block;width:11px;height:11px;border-radius:3px;flex:0 0 auto;background:var(--blue)}
.sq.sky,.sq.amber{background:var(--blue)}
.sq.mint{background:var(--mint)}
.sq.ink{background:var(--ink)}
.chk{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--tint);color:var(--ink-blue);
  display:inline-grid;place-items:center}
.chk svg{width:11px;height:11px}

/* ---- surfaces ----------------------------------------------------- */
.card,.panel{background:var(--cream);color:var(--ink);border:1px solid var(--hair);border-radius:var(--r);
  transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.card.lift{box-shadow:none}
.panel.tinted{background:var(--tint);border-color:transparent}
.panel.soft{background:var(--tint-soft);border-color:transparent}

/* ---- the grounds the test and games pages use --------------------- */
.g-navy{background:var(--ground);color:#FFFDF7}
.g-navy .lead,.g-navy .note{color:var(--on-ground)}
.g-cream{background:var(--page);color:var(--ink)}
.g-blue{background:var(--tint);color:var(--ink)}
.band-top{border-top:1px solid var(--hair)}
.band-bottom{border-bottom:1px solid var(--hair)}

/* =====================================================================
   NAV — logo · links · theme switch · one CTA (visible on phones too)
   ===================================================================== */
.nav{position:sticky;top:0;z-index:50;background:var(--glass);backdrop-filter:blur(10px);
     border-bottom:1px solid var(--hair)}
.nav .row{display:flex;align-items:center;gap:clamp(8px,1.4vw,20px);min-height:var(--nav-h)}
.nav .brand{display:inline-flex;align-items:center;flex:0 0 auto;padding:6px 0}
.nav .brand .logo{width:clamp(112px,11vw,134px)}
.nav-links{display:flex;align-items:center;gap:2px;margin-inline-start:auto}
.nav-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;
  border-radius:10px;font-size:16px;font-weight:600;color:var(--sec);white-space:nowrap;
  transition:color .16s ease,background .16s ease}
.nav-links a:hover{color:var(--ink);background:var(--tint)}
.nav-links a::after{content:"";position:absolute;inset-inline:14px;bottom:4px;height:2px;border-radius:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:center;transition:transform .22s ease}
.nav-links a.active{color:var(--ink)}
.nav-links a.active::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-cta{flex:0 0 auto}
.nav-toggle{display:none;align-items:center;justify-content:center;width:46px;height:46px;flex:0 0 auto;
  border:1px solid var(--hair);border-radius:12px;background:var(--cream);color:var(--ink);cursor:pointer}
.nav-toggle .x{display:none}
.nav-toggle[aria-expanded="true"] .x{display:block}
.nav-toggle[aria-expanded="true"] .bars{display:none}
.nav-panel{display:none}
.nav .prog{position:absolute;inset-inline-start:0;bottom:-1px;height:2px;width:100%;background:var(--blue);
  transform:scaleX(var(--p,0));transform-origin:right center}

/* the theme switch */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:46px;height:46px;border-radius:999px;border:1px solid var(--hair);background:transparent;
  color:var(--sec);cursor:pointer;
  transition:background .18s ease,color .18s ease,border-color .18s ease}
.theme-btn:hover{background:var(--tint);color:var(--ink);border-color:transparent}
.theme-btn svg{width:20px;height:20px;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
:root[data-theme="dark"] .theme-btn .sun{display:none}
.theme-btn:active svg{transform:rotate(-30deg)}

@media (max-width:1000px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .theme-btn{margin-inline-start:auto;width:44px;height:44px}
  .nav-panel{
    display:block;position:absolute;inset-inline:0;top:100%;background:var(--cream);
    border-bottom:1px solid var(--hair);padding:6px clamp(20px,4vw,40px) 20px;
    transform:translateY(-10px);opacity:0;pointer-events:none;visibility:hidden;
    transition:opacity .18s ease,transform .18s ease,visibility 0s .18s;
    max-height:calc(100dvh - var(--nav-h));overflow:auto;
  }
  .nav-panel.open{transform:none;opacity:1;pointer-events:auto;visibility:visible;
    box-shadow:var(--lift-strong);
    transition:opacity .18s ease,transform .18s ease}
  .nav-panel a:not(.btn){display:flex;align-items:center;justify-content:space-between;gap:10px;
    min-height:56px;padding:12px 4px;font-size:18px;font-weight:600;color:var(--ink);
    border-bottom:1px solid var(--hair)}
  .nav-panel a:not(.btn) .meta{font-size:13.5px;font-weight:600;color:var(--quiet-ink)}
  .nav-panel a:not(.btn):last-of-type{border-bottom:0}
  .nav-panel .btn{margin-top:14px;width:100%}
}
/* a labelled switch for the phone menu */
.theme-row{display:none}
@media (max-width:540px){
  /* the bar keeps the logo, the booking button and the menu —
     the switch moves into the menu so nothing is squeezed */
  .nav .row .theme-btn{display:none}
  .nav-cta{font-size:14px;min-height:44px;padding:9px 14px}
  .nav .brand .logo{width:98px}
  .nav .row{gap:8px}
  .nav-toggle{margin-inline-start:auto}
  .nav-panel .theme-row{display:inline-flex;width:100%;height:auto;min-height:54px;
    justify-content:flex-start;gap:12px;border-radius:14px;padding:12px 16px;margin-top:12px;
    font-size:17px;font-weight:600;color:var(--ink);border:1px solid var(--hair)}
  .nav-panel .theme-row svg{width:22px;height:22px;color:var(--blue)}
}

/* =====================================================================
   FOOTER — the one dark anchor on the page, in both themes
   ===================================================================== */
.foot-bar{background:var(--ground);color:var(--on-ground);margin-top:auto}
.foot-top{display:flex;flex-wrap:wrap;gap:30px 48px;justify-content:space-between;padding-block:48px 32px}
.foot-brand{display:flex;flex-direction:column;gap:14px;max-width:36ch}
.foot-brand .logo{width:142px}
.foot-tag{font-size:14.5px;color:var(--on-ground);line-height:1.8}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 6px;align-content:flex-start;max-width:420px}
.foot-links a{display:inline-flex;align-items:center;min-height:44px;padding:6px 12px;border-radius:10px;
  font-size:15px;font-weight:600;color:#FFFDF7}
.foot-links a:hover{background:var(--ground-2);color:#FFFDF7}
.socials{display:flex;flex-wrap:wrap;gap:10px}
.social{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:transparent;color:#FFFDF7;border:1px solid var(--ground-2);
  transition:background .16s ease,transform .16s ease}
.social:hover{background:var(--ground-2);color:#FFFDF7;transform:translateY(-2px)}
.social svg{width:19px;height:19px}
.foot-bottom{border-top:1px solid var(--ground-2);padding-block:20px;font-size:13px;color:var(--quiet);
  display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
.foot-bottom a{color:var(--on-ground)}