/* ===========================================================================
   codex-public.css — THE PUBLIC BODY, IN OLD MONEY. (RUN 105 UNITS 1-2.)

   RUN 104 brought the public SHELL to spec — trust strip, sticky header, deep
   footer — and stopped there. The founder's remaining complaint was that the
   body underneath it was still the older dark "Atelier Heritage" styling, so a
   cream shell wrapped dark bands. This sheet is the body half of the same
   system.

   THE DEFECT IT REPAIRS, MEASURED (docs/PUBLIC-BODY-INVENTORY.md):
     6 body sections sat on a ground of the opposite kind to the shell — ground
     luminance 0.09 against a 0.96 shell. Worse, ALL SIX were still wrong in
     dark, with the sign flipped: 0.92 on a 0.92 page. They were painted from
     `--command`, which is `var(--btn)`, which INVERTS between themes. The band
     did not fail to go dark; it went light. A section that is wrong in both
     themes cannot be fixed by adding a dark rule — the ground itself is the
     wrong token.

   IT PAINTS FROM --mk-*, THE NAMESPACED APP-SPEC PALETTE.
   codex-marketing.css declares it in all three states. Reusing that set rather
   than declaring a second one means the shell and the body cannot disagree
   about what "cream" is, which is the whole of the founder's complaint.

   EVERYTHING IS SCOPED TO body.mk, AND THAT IS NOT TIDINESS.
   RUN 104 shipped a marketing sheet that declared `--bg` and `--ink` on bare
   `:root` and reset `a{color:inherit}` from the body class. Both reached
   ui/home.html's own rules, and `/` went from 0 strings below WCAG AA to 21 —
   on elements that run never touched. The lesson is written into this repo's
   memory as "a shell must not restyle its host". `body.mk` is on the public
   pages and on nothing else, so the student app cannot be reached from here
   even by accident. No rule in this file may start at `:root`, `html`, or a
   bare element selector.

   TYPE follows APP-SPEC: Cinzel for the wordmark only (the shell owns it),
   Fraunces for display and figures, Libre Franklin for everything else. All
   three are vendored under static/vendor/fonts/ — none is fetched at runtime.
   =========================================================================== */

/* ── the ground ──────────────────────────────────────────────────────────
   The body paints an EXPLICIT token background. A transparent body borrows
   whatever the host renderer puts behind the page, which reads as correct on
   a developer's screen and wrong in a viewer's dark browser. */
body.mk{
  background:var(--mk-bg);
  color:var(--mk-ink);
  font-family:"Libre Franklin", ui-sans-serif, system-ui, -apple-system,
              "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight:400;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ── sections ────────────────────────────────────────────────────────────
   THREE GROUNDS, AND ONLY THREE. Old Money alternates by a shade, not by
   inverting to near-black: `--mk-bg` is the page, `--mk-surface` lifts a band
   a step, `--mk-inset` recesses one. Each of the three is defined in all three
   theme states, so a band moves WITH the page instead of against it.

   The old system used `--command` — a BUTTON colour — as a section
   background. That is what made the hero fight the shell in both themes. */
body.mk .mk-band{background:var(--mk-bg);}
body.mk .mk-band--lift{background:var(--mk-surface);}
body.mk .mk-band--inset{background:var(--mk-inset);}
body.mk .mk-band + .mk-band{border-top:1px solid var(--mk-line);}

body.mk .mk-section{
  padding:var(--mk-sp-12) 0;
}
body.mk .mk-wrap{max-width:var(--mk-edge);margin:0 auto;padding:0 var(--mk-sp-6);}

/* ── type ────────────────────────────────────────────────────────────────
   Display sizes use clamp() so the same rule serves 1280 and 390 without a
   second breakpoint to keep in step. */
body.mk h1, body.mk h2, body.mk h3, body.mk h4{
  font-family:"Fraunces", Georgia, "Times New Roman", serif;
  font-weight:500;
  letter-spacing:-.015em;
  line-height:1.12;
  color:var(--mk-ink);
  margin:0;
}
/* ── THE DISPLAY LINE (RUN 113) ──────────────────────────────────────────
   The CAP rises 60px -> 96px, which is the reference site's measured hero h1,
   and the vw term rises 6 -> 6.6 so a 1440px screen actually reaches it
   (6.6vw = 95px there; at 6vw it would have stopped at 86px).

   THE FLOOR IS DELIBERATELY UNCHANGED AT 34px. Raising it would have been the
   easy way to make the page feel larger on a phone and the way to introduce a
   390px overflow, which is the one thing the founder did NOT report and the
   gate explicitly forbids. 6.6vw at 390px is 25.7px, so the floor still wins
   and mobile renders exactly as it did before this run. */
body.mk h1{font-size:clamp(34px, 6.6vw, 96px);}
body.mk h2{font-size:clamp(26px, 4vw, 40px);}
body.mk h3{font-size:clamp(19px, 2.4vw, 24px);line-height:1.25;}
body.mk h4{font-size:17px;line-height:1.3;}
body.mk p{margin:0 0 var(--mk-sp-4);color:var(--mk-ink-soft);}
body.mk .mk-lead{font-size:clamp(17px, 2vw, 20px);color:var(--mk-ink-soft);
  line-height:1.55;}
body.mk em, body.mk .mk-em{
  font-family:"Fraunces", Georgia, serif;font-style:italic;color:var(--mk-ink);}
body.mk .mk-eyebrow{
  font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mk-muted);margin:0 0 var(--mk-sp-4);display:block;
}
body.mk .mk-fig{
  font-family:"Fraunces", Georgia, serif;
  font-variant-numeric:tabular-nums;
  font-size:clamp(30px, 4vw, 44px);
  color:var(--mk-ink);line-height:1;
}

/* ── surfaces ────────────────────────────────────────────────────────────
   A card is a lifted surface with a hairline, never a shadow doing the work of
   a border. */
body.mk .mk-card{
  background:var(--mk-surface);
  border:1px solid var(--mk-line);
  border-radius:var(--mk-r-lg);
  padding:var(--mk-sp-7);
}
body.mk .mk-card--inset{background:var(--mk-inset);}
body.mk .mk-rule{border:0;border-top:1px solid var(--mk-line);margin:var(--mk-sp-8) 0;}

/* ── the one accent ──────────────────────────────────────────────────────
   Bottle green is structural: it fills a primary action and nothing else.
   `--mk-watch` (refined gold) and `--mk-gap` (red) are for state, in text and
   hairlines, never as a fill behind a paragraph. */
body.mk .mk-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;                     /* a thumb; RUN 104 shipped one at 41 */
  padding:11px var(--mk-sp-6);
  border-radius:var(--mk-r-pill);
  background:var(--mk-accent);
  color:var(--mk-accent-ink);
  border:1px solid transparent;
  font-family:inherit;font-size:15px;font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:background .15s var(--mk-ease, ease);
}
body.mk .mk-btn:hover{background:var(--mk-accent-hover);}
body.mk .mk-btn--quiet{
  background:transparent;color:var(--mk-ink);border-color:var(--mk-line-strong);
}
body.mk .mk-btn--quiet:hover{background:var(--mk-surface-2);}

/* ── wide things scroll in their own box ─────────────────────────────────
   A three-column syllabus table and a displayed cosine rule cannot be made
   narrow without misrepresenting them. Four /content/ guides overflowed to
   418px at a 390px viewport before this. The container is the fix; the page
   behind it stays still. */
body.mk table{
  display:block;width:100%;overflow-x:auto;
  border-collapse:collapse;margin:var(--mk-sp-5) 0;
}
body.mk th, body.mk td{
  border-bottom:1px solid var(--mk-line);
  padding:var(--mk-sp-3) var(--mk-sp-4);
  text-align:left;vertical-align:top;
}
body.mk th{color:var(--mk-ink);font-weight:600;font-size:13px;
  letter-spacing:.04em;text-transform:uppercase;}
body.mk td{color:var(--mk-ink-soft);}
body.mk .katex-display{overflow-x:auto;overflow-y:hidden;padding-bottom:6px;}
body.mk pre, body.mk .mk-scroll{overflow-x:auto;}
body.mk img{max-width:100%;height:auto;}

/* ── links and focus ─────────────────────────────────────────────────────
   Scoped to the body's own prose containers, NOT to `body.mk a`. A rule at
   (0,1,1) from the body class outranks a page's own `.some-button` at (0,1,0)
   and repaints it — which is precisely how RUN 104 turned the hero's ghost
   link ink-on-ink. */
body.mk .mk-prose a{color:var(--mk-accent);text-underline-offset:2px;}
body.mk .mk-prose a:hover{color:var(--mk-accent-hover);}
body.mk :focus-visible{outline:none;box-shadow:var(--mk-ring);
  border-radius:var(--mk-r-xs);}

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

@media (max-width:640px){
  body.mk .mk-section{padding:var(--mk-sp-9) 0;}
  body.mk .mk-wrap{padding:0 var(--mk-sp-4);}
  body.mk .mk-card{padding:var(--mk-sp-5);}
}