/* ═══════════════════════════════════════════════════════════════════════════
   LE CODEX · codex-marketing.css — THE PUBLIC SURFACE, IN THE OLD MONEY SYSTEM.

   WHAT THIS IS AND WHAT IT REPLACES
     The public pages shipped in the older "Atelier Heritage / Cormorant"
     marketing styling, which predates the locked visual system. RUN 104 brings
     them onto design-system/APP-SPEC.html — the canonical UI SSOT — so a
     stranger meeting the landing page and a student inside the app are looking
     at one product rather than two.

   THE TOKENS ARE APP-SPEC's, COPIED EXACTLY, AND THAT IS DELIBERATE.
     They are duplicated here rather than imported because APP-SPEC.html is a
     SPECIFICATION DOCUMENT, not a stylesheet the server ships — it is the
     thing the values are checked against, and importing a spec would make the
     spec a runtime dependency. tests/test_public_surface.py asserts every
     token below still equals the one APP-SPEC declares, so the copy cannot
     drift silently; that assertion is what earns the duplication.

   THE THEME — APP-SPEC's THREE STATES, ALL THREE PRESENT (RUN 105):
     bare :root                the full light palette — every colour has a
                               value here, so nothing is defined only inside a
                               conditional block
     @media (prefers-color-scheme:dark)
       :root:not([data-theme="light"])
                               the viewer's system setting, unless they have
                               explicitly asked for light
     :root[data-theme="dark"]  an explicit choice, which always wins
   RUN 104 left the media state out on purpose — the RUN 79 ruling pinned the
   public face light — and flagged the conflict rather than settling it. The
   founder settled it in RUN 105: the public face is BOTH. This sheet no longer
   diverges from APP-SPEC in any way.

   TYPE: Cinzel for the wordmark only. Fraunces for headings and figures.
   Libre Franklin for body. No other family, and no system sans fallback used
   as a design choice — the Elite Design Standard §7 cheap-tells list.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ============ TOKENS — full light palette on bare :root ============ */
:root{
  --mk-bg:#EBE3D2;
  --mk-surface:#F5EFE1;
  --mk-surface-2:#E3DAC6;
  --mk-inset:#EDE6D5;
  --mk-ink:#24211A;
  --mk-ink-soft:#544D3D;
  --mk-muted:#675F4E;
  --mk-faint:#A79C82;
  --mk-line:#D6CBB2;
  --mk-line-strong:#C4B896;
  --mk-accent:#1E4636;
  --mk-accent-hover:#173628;
  --mk-accent-ink:#F4EEDF;
  --mk-brass:#9A7B3F;
  --mk-brass-soft:#B79A5E;
  --mk-good:#4C6B4E;
  --mk-good-bg:#DFE4D2;
  --mk-watch:#C0912C;      /* decorative in light: 2.24:1 on the page,
                              never text. See the header note. */
  --mk-watch-bg:#F0E6C4;
  --mk-gap:#A9463A;
  --mk-gap-bg:#F1DBD2;
  --mk-shadow:0 1px 2px rgba(40,32,16,.05), 0 8px 24px -14px rgba(40,32,16,.22);
  --mk-shadow-sm:0 1px 1px rgba(40,32,16,.05);
  --mk-ring:0 0 0 2px var(--mk-bg), 0 0 0 4px var(--mk-accent);

  /* The ink bar is the same ink in both themes: it is a CONSTANT surface, not
     a themed one, so the trust strip reads identically light and dark. */
  --mk-bar:#1A1410;
  --mk-bar-ink:#F0E9DA;

  --mk-sp-1:4px;  --mk-sp-2:8px;  --mk-sp-3:12px; --mk-sp-4:16px; --mk-sp-5:20px;
  --mk-sp-6:24px; --mk-sp-7:32px; --mk-sp-8:40px; --mk-sp-9:48px; --mk-sp-10:64px; --mk-sp-12:96px;
  --mk-r-xs:6px;  --mk-r-sm:8px;  --mk-r-md:10px; --mk-r-lg:12px; --mk-r-pill:999px;
  --mk-ease:cubic-bezier(.4,.14,.2,1);
  --mk-ease-out:cubic-bezier(.16,1,.3,1);
  /* ── THE CONTENT EDGE (RUN 113) ────────────────────────────────────────
     1080px -> 1240px, which is the reference site's measured content column.
     THE FOUNDER'S COMPLAINT WAS SPATIAL, not typographic: on a 2560px monitor
     an 1080px column leaves ~740px of dead margin EACH SIDE, which is what
     "header/footer centred/compressed ... everything squeezed in the middle"
     describes. 1240px is not a guess — it is what atelierdemaths.com computes
     for the same wrapper. */
  --mk-edge:1240px;
}

/* ── THE PUBLIC FACE IS LIGHT AND DARK, BY FOUNDER RULING (RUN 105) ──────
   This file used to carry, in place of the block below, a long note explaining
   why APP-SPEC's `@media (prefers-color-scheme:dark)` state was deliberately
   absent: RUN 79 pinned the public face light, RUN 104 was asked for both
   themes, and rather than settle a standing ruling on its own it honoured what
   it could - the dark tokens were defined and reachable by one attribute - and
   named the conflict for the founder.

   THE FOUNDER SETTLED IT: the public face is BOTH light and dark. So the third
   state is here, and the three now behave as APP-SPEC intends:

     :root                                      light, the default
     @media (prefers-color-scheme:dark)         the viewer's system setting,
       :root:not([data-theme="light"])          unless they forced light
     :root[data-theme="dark"]                   an explicit choice always wins

   THE GUARD ON THE MEDIA BLOCK IS LOAD-BEARING. Without
   `:not([data-theme="light"])` a visitor who has explicitly asked for light on
   a dark-set operating system is overruled by their OS, which is the one
   outcome an explicit control must never produce.

   THESE VALUES ARE GENERATED from the explicit-toggle block below by
   scripts/, and tests/test_public_surface.py asserts the two are identical.
   Twenty-one colours hand-copied into a second place is a drift waiting to
   happen, and a palette that disagrees with itself between two ways of
   reaching the same theme is invisible until someone screenshots both.

   NOTHING IS LEFT UNDEFINED: every colour still has a value on bare `:root`
   above. A token whose only definition lives inside a media block is the
   failure this pattern exists to prevent, and there is none of that here. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --mk-bg:#13160F;
    --mk-surface:#1B1E15;
    --mk-surface-2:#242719;
    --mk-inset:#191C13;
    --mk-ink:#EBE3D0;
    --mk-ink-soft:#BCB29B;
    --mk-muted:#948B77;
    --mk-faint:#6E6752;
    --mk-line:#33372A;
    --mk-line-strong:#434735;
    --mk-accent:#4C9B75;
    --mk-accent-hover:#58AD84;
  /* BACK TO APP-SPEC (RUN 106). RUN 105 used #FFFFFF here as its one
     documented deviation, because the spec's dark accent could not clear
     AA under either of its own inks. UNIT 0 fixed the accent itself - it
     is lighter now and its ink is the page ground, 5.44 - so white is not
     merely unnecessary, it is wrong: on the new accent it measures 3.36.
     This sheet has no divergence from APP-SPEC left. */
  --mk-accent-ink:#13160F;
    --mk-brass:#C7A85F;
    --mk-brass-soft:#A98F4F;
    --mk-good:#84A17F;
    --mk-good-bg:#233021;
    --mk-watch:#E3BA5D;
    --mk-watch-bg:#342C15;
    --mk-gap:#D88A78;
    --mk-gap-bg:#35201B;
    --mk-shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.65);
    --mk-shadow-sm:0 1px 2px rgba(0,0,0,.35);
    --mk-ring:0 0 0 2px var(--mk-bg), 0 0 0 4px var(--mk-accent);
  }
}

:root[data-theme="dark"]{
  --mk-bg:#13160F;
  --mk-surface:#1B1E15;
  --mk-surface-2:#242719;
  --mk-inset:#191C13;
  --mk-ink:#EBE3D0;
  --mk-ink-soft:#BCB29B;
  --mk-muted:#948B77;
  --mk-faint:#6E6752;
  --mk-line:#33372A;
  --mk-line-strong:#434735;
  --mk-accent:#4C9B75;
  --mk-accent-hover:#58AD84;
  /* BACK TO APP-SPEC (RUN 106). RUN 105 used #FFFFFF here as its one
     documented deviation, because the spec's dark accent could not clear
     AA under either of its own inks. UNIT 0 fixed the accent itself - it
     is lighter now and its ink is the page ground, 5.44 - so white is not
     merely unnecessary, it is wrong: on the new accent it measures 3.36.
     This sheet has no divergence from APP-SPEC left. */
  --mk-accent-ink:#13160F;
  --mk-brass:#C7A85F;
  --mk-brass-soft:#A98F4F;
  --mk-good:#84A17F;
  --mk-good-bg:#233021;
  --mk-watch:#E3BA5D;
  --mk-watch-bg:#342C15;
  --mk-gap:#D88A78;
  --mk-gap-bg:#35201B;
  --mk-shadow:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.65);
  --mk-shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --mk-ring:0 0 0 2px var(--mk-bg), 0 0 0 4px var(--mk-accent);
}

/* ============ BASE ============ */
/* ── EVERY SELECTOR HERE IS SCOPED TO THE SHELL, AND THAT IS THE THIRD TIME
   THIS LESSON ARRIVED. `.mk a{color:inherit}` looked harmless: it is how you
   stop the shell's links picking up a host's link colour. But `.mk` is on the
   BODY, so that selector matches EVERY anchor on the page, and at (0,2,0) it
   outranks the page's own `.btn-hero-ghost` at (0,1,0). The landing page's
   hero link was repainted ink-on-ink and measured 1:1 by the contrast gate —
   invisible, on the first screen a stranger sees, caused by a reset.

   The shell owns three regions and nothing else. `.mk` on the body is a HOOK
   for those regions to hang from, not a licence to style the document. */
.mk-trust *, .mk-head *, .mk-foot *{box-sizing:border-box;}
body.mk{
  /* DELIBERATELY EMPTY OF PAINT. The shell mounts ONTO a page that already has
     a background, a colour and a type stack; setting them here made this sheet
     a second opinion about the host, which is what put 21 strings below AA on
     the landing page. The shell styles the shell. */
  margin:0;
}
.mk-trust a, .mk-head a, .mk-foot a{color:inherit;}
.mk-trust :focus-visible, .mk-head :focus-visible,
.mk-foot :focus-visible{outline:none;box-shadow:var(--mk-ring);
  border-radius:var(--mk-r-xs);}
.mk-wrap{max-width:var(--mk-edge);margin:0 auto;padding:0 var(--mk-sp-6);}

/* ============ 1 · THE TRUST STRIP ============
   Top ink bar. Three standing commitments, stated once, on every page. It is
   the first thing on the page because it is the first thing a parent asks. */
.mk-trust{
  background:var(--mk-bar);
  color:var(--mk-bar-ink);
  font-size:11.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.mk-trust .mk-wrap{
  display:flex;gap:var(--mk-sp-6);align-items:center;
  justify-content:center;flex-wrap:wrap;
  padding-top:var(--mk-sp-2);padding-bottom:var(--mk-sp-2);
}
.mk-trust span{display:inline-flex;align-items:center;gap:var(--mk-sp-2);opacity:.86;}
.mk-trust span::before{
  content:"";width:3px;height:3px;border-radius:50%;
  background:var(--mk-brass-soft);flex:none;
}

/* ============ 2 · THE HEADER ============
   Sticky, translucent, backdrop-blurred, hairline bottom. */
.mk-head{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--mk-bg) 82%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--mk-line);
}
/* A BROWSER WITHOUT color-mix STILL GETS A READABLE BAR. Without this the
   translucent value falls back to `transparent` and the nav floats over the
   page content — a cheap tell, and unreadable. */
@supports not (background:color-mix(in srgb, red 50%, transparent)){
  .mk-head{background:var(--mk-bg);}
}
.mk-head .mk-wrap{
  display:flex;align-items:center;gap:var(--mk-sp-6);
  padding-top:var(--mk-sp-3);padding-bottom:var(--mk-sp-3);
}
.mk-brand{display:inline-flex;align-items:center;gap:var(--mk-sp-3);text-decoration:none;}
/* THE LOCKUP'S HEIGHT (RUN 113). 34px -> 48px, the reference's measured
   lockup height, and the CSS is what actually wins: cx_marketing_shell sets an
   inline height too, and a rule here at the old 34px would have quietly held
   the header at the size the founder called wrong. `width:auto` keeps the
   asset's own 5100x1680 ratio; the img carries those as attributes so the row
   reserves its space before the PNG decodes. */
.mk-brand img{display:block;height:48px;width:auto;}
/* CLEAR SPACE. brand-sheet.html sets the minimum clear space around the mark
   at half its height; the gap and the header padding both honour it. */
.mk-brand{padding:var(--mk-sp-2) var(--mk-sp-2) var(--mk-sp-2) 0;}
.mk-nav{display:flex;align-items:center;gap:var(--mk-sp-6);margin-left:auto;}
.mk-nav a{
  font-size:13.5px;letter-spacing:.01em;color:var(--mk-ink-soft);
  text-decoration:none;transition:color .18s var(--mk-ease);
}
.mk-nav a:hover{color:var(--mk-ink);}
.mk-cta{
  /* 44px MINIMUM, AND IT WAS 41. tests/test_tap_targets_390.py measured
     169x41 at a 390px viewport against the 44px floor — the one primary
     action on the public surface, three pixels short of reliably hittable by
     a thumb. Padding raised rather than a height set, so the button still
     sizes to its label. */
  background:var(--mk-accent);color:var(--mk-accent-ink) !important;
  padding:11px 18px;min-height:44px;display:inline-flex;align-items:center;
  border-radius:var(--mk-r-pill);
  font-size:13.5px;letter-spacing:.01em;text-decoration:none;
  transition:background .18s var(--mk-ease);white-space:nowrap;
}
.mk-cta:hover{background:var(--mk-accent-hover);}
.mk-quiet{color:var(--mk-ink-soft) !important;}

/* ============ 3 · THE FOOTER ============ */
.mk-foot{
  background:var(--mk-surface);
  border-top:1px solid var(--mk-line);
  margin-top:var(--mk-sp-12);
}
/* THREE LINK COLUMNS, WAS FOUR (RUN 126) — see cx_marketing_shell.js's
   COLUMNS for why Trust & legal folded into Company and why Guides stayed. */
.mk-foot-grid{
  display:grid;
  grid-template-columns:1.6fr repeat(3, 1fr);
  gap:var(--mk-sp-8);
  padding-top:var(--mk-sp-10);padding-bottom:var(--mk-sp-9);
}
.mk-foot-brand img{display:block;height:40px;width:auto;margin-bottom:var(--mk-sp-4);}
.mk-foot-mission{
  font-family:"Fraunces", Georgia, serif;
  font-size:15px;line-height:1.55;color:var(--mk-ink-soft);
  max-width:34ch;margin:0 0 var(--mk-sp-4);
}
.mk-est{
  /* --mk-ink-soft, NOT --mk-faint. Measured 2.37:1 against the 4.5:1 AA floor
     by tests/test_rendered_contrast.py — and this footer states "WCAG 2.1 AA"
     two rows below it. A claim the page itself fails is worse than no claim. */
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mk-ink-soft);
}
.mk-foot h4{
  font-family:"Fraunces", Georgia, serif;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  /* 3.41:1 measured on --mk-muted. A column heading is read, not decoration. */
  color:var(--mk-ink-soft);margin:0 0 var(--mk-sp-4);
}
.mk-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--mk-sp-3);}
.mk-foot li a{
  font-size:13.5px;color:var(--mk-ink-soft);text-decoration:none;
  transition:color .18s var(--mk-ease);
}
.mk-foot li a:hover{color:var(--mk-ink);}

/* The live status dot. */
/* 3.41:1 measured; --mk-ink-soft clears AA. */
.mk-status{display:inline-flex;align-items:center;gap:var(--mk-sp-2);font-size:12.5px;color:var(--mk-ink-soft);}
.mk-dot{
  width:7px;height:7px;border-radius:50%;background:var(--mk-good);flex:none;
  box-shadow:0 0 0 3px var(--mk-good-bg);
}

/* THE INDEPENDENCE BAND — on every page, not only the landing. */
.mk-indep{
  border-top:1px solid var(--mk-line);
  background:var(--mk-inset);
}
.mk-indep .mk-wrap{
  padding-top:var(--mk-sp-4);padding-bottom:var(--mk-sp-4);
  /* 3.14:1 on --mk-muted. This is the INDEPENDENCE STATEMENT: the one line on
     the page that must be readable by a parent who came looking for it. */
  font-size:12.5px;color:var(--mk-ink-soft);text-align:center;
}
.mk-bottom{border-top:1px solid var(--mk-line);}
.mk-bottom .mk-wrap{
  display:flex;gap:var(--mk-sp-5);flex-wrap:wrap;align-items:center;
  justify-content:space-between;
  padding-top:var(--mk-sp-5);padding-bottom:var(--mk-sp-6);
  /* 2.37:1 on --mk-faint — the copyright and domain line. */
  font-size:12px;color:var(--mk-ink-soft);
}
.mk-bottom a{color:var(--mk-muted);text-decoration:none;}
.mk-bottom a:hover{color:var(--mk-ink);}
.mk-bottom ul{list-style:none;display:flex;gap:var(--mk-sp-5);margin:0;padding:0;flex-wrap:wrap;}

/* ============ THE FREE-BETA LINE ============
   Where pricing used to sit. Rendered from utils/free_access.py, never typed. */
.mk-free{
  font-family:"Fraunces", Georgia, serif;
  font-size:13px;font-style:italic;color:var(--mk-accent);
}

@media (max-width:900px){
  .mk-foot-grid{grid-template-columns:1fr 1fr;gap:var(--mk-sp-7);}
  .mk-foot-brand{grid-column:1 / -1;}
}
@media (max-width:560px){
  .mk-nav{gap:var(--mk-sp-4);}
  .mk-nav a:not(.mk-cta){display:none;}
  .mk-foot-grid{grid-template-columns:1fr;}
  .mk-trust .mk-wrap{gap:var(--mk-sp-3);font-size:10.5px;}
  .mk-bottom .mk-wrap{justify-content:flex-start;}
}