/* =========================================================
   MOTF Campus — the presentation layer (lesson flow, course path, campus).
   Design system inherited from openspace.co.nz / styles.css: warm earth +
   night sky, Fraunces-grade serif, uppercase terra eyebrows, band sections.
   Grown-up credible: this is read by 12 year olds and by adults.

   NAMING LAW (13 Aug 2026, after the `.done` collision):
     every class this file owns is prefixed `mf-`.
     Unprefixed classes belong to somebody else and are styled, never invented:
       corpus  : container narrow wonder play cap board info record do need row
                 story eyebrow deep hchip foot-note foothint premium-intro seal
                 pt pd nav-badge expedition project
       players : mi-* (shared frame), e3-* (earth3d / volcano chrome)
   A generic name like `.done` or `.grid` in here is a bug waiting to happen.
   ========================================================= */

/* Self-hosted type: Fraunces (variable) + Nunito Sans, latin subset, from the
   Google Fonts originals via @fontsource. No CDN, no external request at runtime. */
@font-face{font-family:'Fraunces';font-style:normal;font-display:swap;font-weight:100 900;
  src:url(/campus/fonts/fraunces-latin-wght.woff2?v=20260814154931) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Fraunces';font-style:italic;font-display:swap;font-weight:100 900;
  src:url(/campus/fonts/fraunces-latin-wght-italic.woff2?v=20260814154931) format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Nunito Sans';font-style:normal;font-display:swap;font-weight:400;
  src:url(/campus/fonts/nunito-sans-latin-400.woff2?v=20260814154931) format('woff2');}
@font-face{font-family:'Nunito Sans';font-style:normal;font-display:swap;font-weight:700;
  src:url(/campus/fonts/nunito-sans-latin-700.woff2?v=20260814154931) format('woff2');}
@font-face{font-family:'Nunito Sans';font-style:normal;font-display:swap;font-weight:800;
  src:url(/campus/fonts/nunito-sans-latin-800.woff2?v=20260814154931) format('woff2');}

:root{
  --night:#161d33; --night-2:#212c4d; --indigo:#33406b;
  --gold:#e2a349; --gold-soft:#f2cf8c; --terra:#c56b45;
  --sage:#7d9b6a; --sage-deep:#5c7a50;
  --cream:#f8f1e3; --cream-2:#efe4cf; --paper:#fffdf7;
  --ink:#2b2721; --ink-2:#4a4335; --muted:#6f6653; --line:#e0d4bb;
  --serif:Fraunces,Georgia,'Iowan Old Style','Times New Roman',serif;
  --sans:'Nunito Sans',system-ui,-apple-system,BlinkMacSystemFont,'SF Pro Text',sans-serif;
  --shadow:0 18px 50px -24px rgba(22,29,51,.45);
  --col:690px; --rail:330px; --gap:34px; --bar:56px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;}
img,svg{max-width:100%;}
a{color:var(--terra);text-decoration:none;}

.mf-eyebrow{font-family:var(--sans);font-weight:800;text-transform:uppercase;
  letter-spacing:.2em;font-size:11.5px;color:var(--terra);margin:0 0 14px;display:block;}
.mf-rule{display:flex;align-items:center;gap:14px;font-family:var(--sans);font-weight:800;
  text-transform:uppercase;letter-spacing:.18em;font-size:11px;color:var(--muted);margin:0 0 18px;}
.mf-rule i{flex:1;height:1px;background:var(--line);}
.mf-btn{display:inline-flex;align-items:center;gap:9px;min-height:48px;padding:0 22px;
  border-radius:999px;background:var(--gold);color:#3a2a12;font-family:var(--sans);
  font-weight:800;font-size:15px;border:0;cursor:pointer;text-decoration:none;
  box-shadow:0 10px 24px -14px rgba(226,163,73,.9);}
.mf-btn:hover{background:#eeb75f;}
.mf-inner{max-width:var(--col);margin:0 auto;padding:0 26px;}
.mf-wide{max-width:1180px;margin:0 auto;padding:0 26px;}
.mf-loading,.mf-err{padding:70px 26px;text-align:center;color:var(--muted);font-size:16px;}
.mf-err{color:#a8452c;}

/* ---------- the frame bar ---------- */
.mf-bar{position:sticky;top:var(--mf-sitebar-h,0px);z-index:40;min-height:var(--bar);display:flex;align-items:center;
  gap:14px;padding:8px 18px;background:rgba(248,241,227,.9);
  -webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid var(--line);}
.mf-bar .mf-back{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;
  border-radius:10px;color:var(--night);font-size:14px;font-weight:800;text-decoration:none;}
.mf-bar .mf-back:hover{color:var(--terra);}
.mf-bar .mf-where{flex:1;min-width:0;font-size:12.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mf-seg{display:inline-flex;background:var(--cream-2);border-radius:999px;padding:3px;gap:2px;}
.mf-seg button{border:0;background:transparent;color:var(--ink-2);font-family:var(--sans);
  font-size:13px;font-weight:800;min-height:36px;padding:0 16px;border-radius:999px;cursor:pointer;}
.mf-seg button[aria-pressed="true"]{background:var(--paper);color:var(--night);
  box-shadow:0 2px 6px -2px rgba(22,29,51,.35);}
.mf-gtog{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 15px;
  border:1.5px solid var(--line);border-radius:999px;background:var(--paper);color:var(--muted);
  font-family:var(--sans);font-size:13px;font-weight:800;cursor:pointer;}
.mf-gtog .mf-dot{width:9px;height:9px;border-radius:50%;background:#cdbfa6;}
.mf-gtog[aria-pressed="true"]{border-color:var(--gold);color:var(--night);background:#fdf6e7;}
.mf-gtog[aria-pressed="true"] .mf-dot{background:var(--gold);}
.mf-gtog[disabled]{opacity:.45;cursor:default;}

/* ---------- scene reveal ---------- */
.mf-flow{position:relative;padding-bottom:90px;}
.mf-scene{width:100%;}
@media (prefers-reduced-motion:no-preference){
  .mf-scene{opacity:0;transition:opacity .6s ease;}
  .mf-scene.mf-in{opacity:1;}
  .mf-rise{opacity:0;margin-top:16px;transition:opacity .65s ease,margin-top .65s ease;}
  .mf-in .mf-rise{opacity:1;margin-top:0;}
}

/* ---------- 1 · Wonder: the night-sky opening ---------- */
.mf-wonder{position:relative;min-height:calc(100dvh - var(--bar));display:flex;flex-direction:column;
  justify-content:center;padding:52px 0 46px;color:var(--cream);overflow:hidden;isolation:isolate;
  background:radial-gradient(74% 54% at 50% 78%, rgba(251,208,130,.34) 0%, rgba(233,170,84,.13) 42%, rgba(233,170,84,0) 68%),
             linear-gradient(180deg,#111730 0%,#1a2344 48%,#262e57 76%,#312f55 100%);}
.mf-stars{position:absolute;inset:0;z-index:0;}
.mf-wonder .mf-inner{position:relative;z-index:2;}
.mf-wonder .mf-eyebrow{color:var(--gold-soft);}
.mf-coursename{margin:0 0 10px;font-family:var(--sans);font-size:14px;font-weight:700;
  letter-spacing:.02em;color:#b9b2a0;}
.mf-wonder h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,5.4vw,60px);line-height:1.06;
  letter-spacing:-.01em;margin:0 0 20px;color:var(--cream);text-shadow:0 2px 24px rgba(0,0,0,.35);}
.mf-hook{font-family:var(--serif);font-size:clamp(19px,2.2vw,25px);line-height:1.5;color:#e9dec8;margin:0;}
.mf-scrollcue{margin-top:38px;display:flex;align-items:center;gap:12px;}
.mf-scrollcue{color:#a49b86;font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;}
.mf-scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(rgba(242,207,140,.6),transparent);}

/* ---------- 2 · Story ---------- */
.mf-story{padding:56px 0 14px;}
.mf-prose{font-family:var(--serif);font-size:20px;line-height:1.68;color:var(--ink-2);}
.mf-prose p{margin:0 0 1.15em;}
.mf-prose b,.mf-prose strong{color:var(--night);font-weight:700;}
.mf-prose h2{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1.15;margin:1.5em 0 .5em;color:var(--night);}
.mf-prose h3{font-family:var(--serif);font-weight:600;font-size:21px;margin:1.7em 0 .4em;color:var(--night);}
.mf-prose .foot-note,.mf-prose .foothint:empty{display:none;}
.mf-prose .record{margin:30px 0;padding:20px 22px;background:var(--paper);border:1px solid var(--line);
  border-left:3px solid var(--sage);border-radius:0 16px 16px 0;font-family:var(--sans);font-size:16px;
  line-height:1.6;color:var(--ink-2);}
.mf-prose .record b{color:var(--sage-deep);font-weight:800;text-transform:uppercase;letter-spacing:.1em;
  font-size:11.5px;display:block;margin-bottom:6px;}
.mf-prose ol{padding-left:22px;} .mf-prose ol li{margin:0 0 8px;}
.mf-prose .eyebrow{display:inline-block;font-family:var(--sans);font-weight:800;text-transform:uppercase;
  letter-spacing:.16em;font-size:11px;color:var(--sage-deep);background:rgba(125,155,106,.14);
  border:1px solid rgba(125,155,106,.34);padding:6px 13px;border-radius:999px;margin:0 0 14px;}
.mf-prose .hchip{display:inline-block;font-family:var(--sans);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--terra);background:rgba(197,107,69,.1);padding:4px 10px;
  border-radius:999px;font-weight:800;vertical-align:middle;margin-left:8px;}
.mf-prose .deep,.mf-prose .do,.mf-prose .expedition,.mf-prose .project{margin:22px 0;padding:20px 22px;
  background:var(--paper);border:1px solid var(--line);border-radius:18px;font-family:var(--sans);
  font-size:16px;line-height:1.65;box-shadow:0 12px 30px -26px rgba(22,29,51,.5);}
.mf-prose .do h4,.mf-prose .expedition h4,.mf-prose .project h4{margin:0 0 10px;font-family:var(--serif);
  font-weight:600;font-size:18px;color:var(--night);}
.mf-prose .need{font-size:14.5px;color:var(--muted);background:var(--cream-2);border-radius:11px;
  padding:10px 13px;margin:0 0 12px;}
@media (max-width:620px){ .mf-prose{font-size:18.5px;} }

/* ---------- 3 · Play ---------- */
.mf-play{padding:22px 0 34px;}
.mf-stagewrap{width:min(94vw,1320px);margin:0 auto;}
.mf-stagewrap.mf-inline{width:100%;margin:26px 0;}
/* an in-prose stage has no room for a side column: caption and readout stack */
.mf-inline .mf-stagegrid{display:block!important;}
.mf-inline .mf-side{min-height:0;}
.mf-side .mf-cue{margin:16px 16px 0;}
.mf-side .mf-cue:last-child{margin-bottom:16px;}
.mf-deadlink{color:var(--ink);border-bottom:1px dotted var(--line);}
.mf-stage{background:var(--night);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);}
.mf-stage.mi-full{border-radius:0;box-shadow:none;}
.mf-stagebar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;
  background:var(--night-2);color:var(--gold-soft);}
.mf-stagebar .mf-t{font-family:var(--serif);font-weight:600;font-size:16px;letter-spacing:.01em;}
.mf-stagebar button{border:0;background:rgba(242,207,140,.14);color:var(--gold-soft);font-size:18px;
  line-height:1;width:42px;height:42px;border-radius:12px;cursor:pointer;}
.mf-stagebar button:active{background:rgba(242,207,140,.3);}
.mf-stagegrid{display:block;}
.mf-stagemain{min-width:0;padding-bottom:8px;}
/* a stage whose interaction never drew: no dead black box, just the caption */
.mf-stage.mf-noplay{background:transparent;box-shadow:none;}
.mf-stage.mf-noplay .mf-stagebar,.mf-stage.mf-noplay .board{display:none;}
.mf-stage.mf-noplay .mf-stagegrid{display:block;}
.mf-stage.mf-noplay .mf-side{background:transparent;padding:0;}
.mf-stage.mf-noplay .play .cap{color:var(--muted);font-style:italic;text-align:left;padding:0;}
.mf-stage.mf-noplay .play .info{display:none;}
.board{width:100%;background:#0d1326;overflow:hidden;}
.board svg{display:block;width:100%;height:auto;}
.board iframe{display:block;width:100%;border:0;background:#0c0a0b;height:var(--mf-ifh,min(74vh,620px));}
.board.mi-frame{border-radius:0;box-shadow:none;background:var(--night);}
.mf-side{padding:0;background:var(--night-2);color:#ded5c0;align-self:stretch;}
.mf-side:empty{display:none;}
.mf-stagegrid:has(.mf-side:empty){grid-template-columns:minmax(0,1fr);}
.play .cap{font-family:var(--sans);font-size:15.5px;line-height:1.55;color:#e8dfc9;
  padding:15px 20px 8px;text-align:center;}
.play .info{font-size:14px;line-height:1.55;color:#b6ac95;padding:10px 20px 16px;
  text-align:center;min-height:1.4em;}
.play .row{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;padding:14px 16px 6px;}
.play .row>span,.play .row>button{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  padding:10px 18px;border-radius:999px;background:rgba(242,207,140,.1);color:var(--gold-soft);
  font-family:var(--sans);font-size:14.5px;font-weight:700;border:1px solid rgba(242,207,140,.28);
  cursor:pointer;user-select:none;}
.play .row>span:active,.play .row>button:active{background:rgba(242,207,140,.22);}
.mi-full{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:9999;display:flex;
  flex-direction:column;padding-top:env(safe-area-inset-top);}
.mi-full .mf-stagegrid{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;}
.mi-full .board{height:100%;}
.mi-full .board iframe{height:100%!important;}
/* An iframe board cannot grow into height:100% unless every ancestor has a definite
   height, and .play and .mf-stagemain are auto. In full screen the frame collapsed to
   its content and left a screen of empty navy under it (the volcano, 14 Aug). Flex
   gives it a real box to fill without touching the corpus DOM. */
.mi-full.mf-frame .mf-stagegrid{overflow:hidden;}
.mi-full.mf-frame .mf-stagemain{display:flex;flex-direction:column;min-height:0;height:100%;}
.mi-full.mf-frame .play{display:flex;flex-direction:column;min-height:0;flex:1;height:auto;}
.mi-full.mf-frame .play .board{flex:1 1 auto;min-height:0;height:auto;}
.mi-full.mf-frame .play .board iframe{height:100%!important;min-height:0;}
.mi-full.mf-frame .play .info{flex:0 0 auto;max-height:34vh;overflow:auto;}
.mi-noscroll,.mi-noscroll body{overflow:hidden;}

/* ---------- 4 · Make ---------- */
.mf-make{padding:44px 0 14px;background:var(--cream-2);}
.mf-makecard{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:26px 28px;
  box-shadow:0 14px 34px -26px rgba(22,29,51,.55);}
.mf-makecard h2{font-family:var(--serif);font-weight:600;font-size:26px;margin:0 0 4px;color:var(--night);}
.mf-makecard h4{font-family:var(--serif);font-weight:600;font-size:18px;margin:4px 0 10px;color:var(--night);}
.mf-makecard .need{font-size:14.5px;color:var(--muted);background:var(--cream-2);border-radius:11px;
  padding:10px 13px;margin:0 0 12px;}
.mf-makecard ol{margin:0;padding-left:22px;font-size:16.5px;line-height:1.68;color:var(--ink-2);}
.mf-makecard ol li{margin:0 0 9px;}
.mf-makecard .do+.do{margin-top:24px;padding-top:22px;border-top:1px dashed var(--line);}
.mf-makecard .record{margin:22px 0 0;padding:16px 18px;background:rgba(125,155,106,.1);
  border-left:3px solid var(--sage);border-radius:0 12px 12px 0;font-size:15.5px;line-height:1.6;
  color:var(--ink-2);}
.mf-makecard .record b{color:var(--sage-deep);font-weight:800;text-transform:uppercase;
  letter-spacing:.1em;font-size:11.5px;display:block;margin-bottom:5px;}

/* ---------- 5 · Words ---------- */
.mf-words{padding:44px 0 14px;}
.mf-wordgrid{display:grid;gap:12px;grid-template-columns:1fr;}
@media (min-width:640px){ .mf-wordgrid{grid-template-columns:1fr 1fr;} }
.mf-word{border:1px solid var(--line);background:var(--paper);border-radius:16px;padding:0;overflow:hidden;
  text-align:left;font:inherit;cursor:pointer;}
.mf-word .mf-wt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:15px 17px;
  font-family:var(--serif);font-weight:600;font-size:17px;color:var(--night);min-height:52px;}
.mf-word .mf-wt::after{content:"+";color:var(--terra);font-family:var(--sans);font-weight:800;font-size:18px;}
.mf-word.mf-open .mf-wt::after{content:"–";}
.mf-word .mf-wd{max-height:0;overflow:hidden;transition:max-height .3s ease;font-size:15.5px;
  line-height:1.6;color:var(--ink-2);padding:0 17px;}
.mf-word.mf-open .mf-wd{max-height:240px;padding:0 17px 16px;}

/* ---------- 6 · Higher up ---------- */
.mf-higher{padding:34px 0 14px;}
.mf-hbtn{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:64px;
  padding:16px 22px;border:1px solid rgba(125,155,106,.42);border-radius:18px;
  background:rgba(125,155,106,.12);color:var(--sage-deep);font-family:var(--sans);font-size:16px;
  font-weight:800;cursor:pointer;text-align:left;}
.mf-hbtn .mf-sub{display:block;font-weight:600;font-size:13px;color:var(--muted);margin-top:3px;}
.mf-hbody{padding-top:24px;}
.mf-hbody[hidden]{display:none;}

/* ---------- 7 · Navigator ---------- */
.mf-navigator{padding:48px 0 20px;background:var(--night);color:#e0d8c6;}
.mf-navigator .mf-prose{color:#ddd4c1;}
.mf-navigator .mf-prose h2,.mf-navigator .mf-prose h3{color:var(--cream);}
.mf-navigator .premium-intro{display:flex;gap:18px;align-items:flex-start;margin:0 0 12px;}
.mf-navigator .seal{flex:0 0 auto;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;background:rgba(242,207,140,.16);border:1px solid rgba(242,207,140,.4);
  color:var(--gold-soft);font-size:24px;}
.mf-navigator .pt{margin:4px 0 6px;font-family:var(--serif);font-weight:600;font-size:21px;color:var(--cream);}
.mf-navigator .nav-badge{display:inline-block;font-family:var(--sans);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;background:var(--gold);color:#3a2a12;padding:5px 11px;border-radius:999px;
  margin-left:10px;vertical-align:middle;font-weight:800;}
.mf-navigator .pd{margin:0;color:#c9c0ad;font-family:var(--sans);font-size:16px;}
.mf-navigator .do,.mf-navigator .expedition,.mf-navigator .project{background:rgba(255,253,247,.05);
  border-color:rgba(242,207,140,.22);box-shadow:none;color:#ddd4c1;}
.mf-navigator .do h4,.mf-navigator .expedition h4,.mf-navigator .project h4{color:var(--cream);}
.mf-navigator .need{background:rgba(255,253,247,.07);color:#b6ac95;}
.mf-navigator .hchip{color:var(--gold-soft);background:rgba(242,207,140,.14);}
.mf-navigator .foot-note{display:block;margin:22px 0 0;padding:18px 20px;background:rgba(242,207,140,.09);
  border-radius:14px;font-size:15px;line-height:1.65;color:#cec5b1;}

/* ---------- the Guide layer ---------- */
.mf-grail{position:absolute;top:0;width:var(--rail);
  left:calc(50% - (var(--col) + var(--gap) + var(--rail))/2 + var(--col) + var(--gap));
  pointer-events:none;}
.mf-cue{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--gold);
  border-radius:0 16px 16px 0;padding:15px 18px;font-family:var(--serif);font-size:16.5px;line-height:1.5;
  color:var(--ink-2);pointer-events:auto;box-shadow:0 12px 30px -26px rgba(22,29,51,.6);}
.mf-grail .mf-cue{position:absolute;width:100%;}
.mf-cue .mf-ck{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-size:10.5px;
  font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--terra);margin:0 0 8px;}
.mf-cue .mf-ck svg{width:15px;height:15px;flex:0 0 auto;}
.mf-cue p{margin:0;}
.mf-cue.mf-k-offscreen{border-left-color:var(--sage);} .mf-cue.mf-k-offscreen .mf-ck{color:var(--sage-deep);}
.mf-cue.mf-k-handover{border-left-color:var(--indigo);} .mf-cue.mf-k-handover .mf-ck{color:var(--indigo);}
.mf-cue.mf-k-listen{border-left-color:var(--terra);}
.mf-inner .mf-cue,.mf-side .mf-cue{margin:22px 0;}
.mf-side .mf-cue{margin:16px 0 0;}
.mf-navigator .mf-cue{background:rgba(242,207,140,.1);border-color:rgba(242,207,140,.3);color:#ddd4c1;}
body.mf-guide-off .mf-cue,body.mf-guide-off .mf-grail{display:none!important;}

/* ---------- completion + next ---------- */
.mf-tail{padding:26px 0 20px;}
.mf-explored{display:flex;align-items:center;gap:14px;margin:0 0 26px;padding:0 0 22px;
  border-bottom:1px solid var(--line);font-family:var(--serif);font-size:18px;color:var(--muted);}
.mf-explored .mf-tick{width:34px;height:34px;border-radius:50%;flex:0 0 auto;display:flex;
  align-items:center;justify-content:center;background:rgba(226,163,73,.16);border:1px solid var(--gold);
  color:var(--gold);font-size:15px;}
.mf-next{display:flex;gap:14px;justify-content:space-between;}
.mf-next a{flex:1;min-height:72px;display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:14px 20px;border:1px solid var(--line);border-radius:18px;background:var(--paper);
  text-decoration:none;color:var(--night);font-family:var(--serif);font-weight:600;font-size:17px;}
.mf-next a:hover{border-color:var(--gold);}
.mf-next a span{font-family:var(--sans);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--terra);font-weight:800;}
.mf-next a.mf-n{text-align:right;align-items:flex-end;}

/* ---------- wide: the reading column shifts, the guide rail appears ---------- */
@media (min-width:1180px){
  .mf-inner{margin-left:calc(50% - (var(--col) + var(--gap) + var(--rail))/2);margin-right:0;}
  .mf-wonder .mf-inner{max-width:calc(var(--col) + var(--gap) + var(--rail));}
  .mf-stagegrid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:0;align-items:stretch;}
}
@media (max-width:1179px){ .mf-grail{display:none;} }

/* =========================================================
   The Course Path (course.html)
   State lives in data-attributes, never in generic class names.
   ========================================================= */
.mf-chead{padding:48px 0 30px;}
.mf-chwide{max-width:920px;margin:0 auto;padding:0 26px;}
@media (min-width:1180px){ .mf-chwide{margin-left:calc(50% - (var(--col) + var(--gap) + var(--rail))/2);
  margin-right:0;max-width:calc(var(--col) + var(--gap) + var(--rail));} }
.mf-chead h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4.6vw,48px);line-height:1.08;
  letter-spacing:-.01em;margin:0 0 14px;color:var(--night);}
.mf-cline{font-family:var(--serif);font-size:clamp(18px,2vw,21px);line-height:1.5;color:var(--ink-2);
  margin:0 0 26px;max-width:640px;}
.mf-prog{display:flex;align-items:center;gap:14px;max-width:420px;}
.mf-prog .mf-track{flex:1;height:3px;background:var(--line);border-radius:2px;overflow:hidden;}
.mf-prog .mf-track i{display:block;height:100%;background:var(--gold);}
.mf-prog .mf-n{font-family:var(--sans);font-size:11px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;}

.mf-path{position:relative;margin:10px auto 60px;max-width:var(--col);padding:0 26px;}
@media (min-width:1180px){ .mf-path{max-width:calc(var(--col) + var(--gap) + var(--rail));} }
.mf-pathart{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;}
.mf-pathart .mf-track-bed{fill:none;stroke:var(--line);stroke-width:10;stroke-linecap:round;opacity:.55;}
.mf-pathart .mf-track-line{fill:none;stroke:#d5c6a6;stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:1 9;}
.mf-pathart .mf-track-walked{fill:none;stroke:var(--gold);stroke-width:3.5;stroke-linecap:round;opacity:.9;}
.mf-pathart circle.mf-stone{fill:var(--paper);stroke:var(--line);stroke-width:2;pointer-events:auto;cursor:pointer;}
.mf-pathart circle.mf-stone[data-done="1"]{fill:var(--gold);stroke:var(--gold);}
.mf-pathart circle.mf-stone[data-here="1"]{stroke:var(--terra);stroke-width:2.5;}
.mf-pathart circle.mf-halo{fill:none;stroke:var(--terra);stroke-width:1.5;opacity:0;}
@media (prefers-reduced-motion:no-preference){
  .mf-pathart circle.mf-halo{animation:mfpulse 3.2s ease-out infinite;}
  @keyframes mfpulse{0%{opacity:.5;r:19px}70%{opacity:0;r:34px}100%{opacity:0;r:34px}}
}
.mf-pathart text.mf-sn{font-family:var(--sans);font-size:12px;font-weight:800;fill:var(--muted);
  text-anchor:middle;pointer-events:none;letter-spacing:.04em;}
.mf-pathart text.mf-stick{font-size:15px;fill:#3a2a12;text-anchor:middle;pointer-events:none;}
.mf-prow{position:relative;}
.mf-prowmain{display:flex;align-items:center;min-height:106px;}
.mf-plabel{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.3;color:var(--night);
  cursor:pointer;background:none;border:0;padding:8px 4px;text-align:left;}
.mf-plabel:hover{color:var(--terra);}
.mf-prow[data-done="1"] .mf-plabel{color:var(--muted);font-weight:400;}
.mf-pcard{margin:0 0 22px;border:1px solid var(--line);background:var(--paper);border-radius:20px;
  padding:22px 24px;box-shadow:0 14px 34px -26px rgba(22,29,51,.55);}
.mf-pcard[hidden]{display:none;}
.mf-pcard .mf-ph{font-family:var(--serif);font-weight:600;font-size:22px;margin:0 0 8px;color:var(--night);}
.mf-pcard .mf-pq{font-family:var(--serif);font-size:17px;line-height:1.55;color:var(--ink-2);margin:0 0 18px;}
.mf-pcard .mf-meta{font-size:13px;color:var(--muted);margin:14px 0 0;}

.mf-clist{max-width:var(--col);margin:0 auto 60px;padding:0 26px;}
@media (min-width:1180px){
  .mf-clist,.mf-jump{margin-left:calc(50% - (var(--col) + var(--gap) + var(--rail))/2);margin-right:0;
    max-width:calc(var(--col) + var(--gap) + var(--rail));}
}
.mf-drow{display:grid;grid-template-columns:42px 1fr 150px 34px;gap:18px;align-items:baseline;
  padding:18px 0;border-bottom:1px dashed var(--line);}
.mf-drow:last-child{border-bottom:0;}
.mf-drow .mf-dn{font-family:var(--sans);font-size:13px;font-weight:800;color:var(--muted);
  font-variant-numeric:tabular-nums;}
.mf-drow .mf-dt{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--night);}
.mf-drow .mf-dt:hover{color:var(--terra);}
.mf-drow .mf-dm{font-size:13.5px;color:var(--muted);white-space:nowrap;}
.mf-drow .mf-dd{font-size:15px;color:var(--gold);text-align:center;}
.mf-drow[data-done="1"] .mf-dt{color:var(--muted);font-weight:400;}
.mf-dhead{display:grid;grid-template-columns:42px 1fr 150px 34px;gap:18px;padding:0 0 10px;
  border-bottom:1px solid var(--line);font-family:var(--sans);font-size:10.5px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted);}
.mf-note{font-size:13.5px;color:var(--muted);margin:22px 0 0;line-height:1.65;}
@media (max-width:620px){
  .mf-drow,.mf-dhead{grid-template-columns:32px 1fr 34px;}
  .mf-drow .mf-dm,.mf-dhead span:nth-child(3){display:none;}
}

/* =========================================================
   The Campus (campus.html) — an editorial library, with the farm
   kept as a quiet horizon, not as the furniture.
   ========================================================= */
.mf-hero{position:relative;color:var(--cream);overflow:hidden;isolation:isolate;padding:74px 0 0;
  background:radial-gradient(74% 54% at 50% 86%, rgba(251,208,130,.3) 0%, rgba(233,170,84,.12) 42%, rgba(233,170,84,0) 68%),
             linear-gradient(180deg,#111730 0%,#1a2344 52%,#262e57 82%,#2f2d52 100%);}
.mf-hero .mf-wide{position:relative;z-index:2;}
.mf-hero .mf-eyebrow{color:var(--gold-soft);}
.mf-hero h1{font-family:var(--serif);font-weight:600;font-size:clamp(34px,5.4vw,58px);line-height:1.05;
  letter-spacing:-.01em;margin:0 0 16px;color:var(--cream);}
.mf-hero .mf-lead{font-family:var(--serif);font-size:clamp(18px,2.1vw,23px);line-height:1.5;color:#e9dec8;
  margin:0 0 26px;max-width:660px;}
.mf-hero .mf-prog{max-width:420px;margin-bottom:34px;}
.mf-hero .mf-prog .mf-track{background:rgba(248,241,227,.2);}
.mf-hero .mf-prog .mf-n{color:#b9b2a0;}

/* the quiet horizon: a jump-nav drawn as the farm's skyline */
.mf-horizon{position:relative;z-index:2;margin-top:8px;}
.mf-horizon svg{display:block;width:100%;height:auto;}
.mf-origin{position:relative;z-index:3;max-width:640px;margin:0 auto;padding:0 26px 30px;
  font-family:var(--serif);font-size:15.5px;line-height:1.6;color:rgba(248,241,227,.78);text-align:center;}
.mf-marks{display:flex;flex-wrap:wrap;gap:8px 10px;padding:0 26px 26px;max-width:1180px;margin:0 auto;
  position:relative;z-index:3;}
.mf-mark{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border-radius:999px;
  background:rgba(248,241,227,.08);border:1px solid rgba(248,241,227,.22);color:#e2d9c5;
  font-family:var(--sans);font-size:12.5px;font-weight:700;cursor:pointer;text-decoration:none;}
.mf-mark:hover{background:rgba(242,207,140,.16);border-color:rgba(242,207,140,.5);color:var(--cream);}
.mf-mark b{font-weight:800;color:var(--gold-soft);font-size:11px;letter-spacing:.06em;}

.mf-band{padding:64px 0;}
.mf-band-2{background:var(--cream-2);}
.mf-band h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3.2vw,34px);line-height:1.12;
  margin:0 0 8px;color:var(--night);}
.mf-band h2{margin-bottom:26px;}
.mf-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:980px){ .mf-cards{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .mf-cards{grid-template-columns:1fr;} }
.mf-card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:24px 24px 20px;
  position:relative;overflow:hidden;text-decoration:none;color:var(--ink);display:block;
  box-shadow:0 12px 30px -24px rgba(22,29,51,.5);}
.mf-card:hover{border-color:var(--gold);}
.mf-card .mf-ct{font-family:var(--serif);font-weight:600;font-size:21px;line-height:1.2;color:var(--night);
  margin:0 0 10px;}
.mf-card .mf-cl{font-family:var(--serif);font-size:15px;line-height:1.5;color:var(--muted);margin:0 0 14px;}
.mf-card .mf-cm{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--terra);}
.mf-card .mf-cf{position:absolute;left:0;bottom:0;height:3px;background:var(--gold);}
.mf-card .mf-cs{display:block;font-family:var(--sans);font-size:10.5px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--terra);margin:0 0 10px;}
.mf-card .mf-chit{display:block;margin-top:10px;font-size:13.5px;color:var(--terra);}

.mf-jump{display:flex;gap:12px;align-items:center;max-width:1180px;margin:0 auto;padding:26px 26px 0;}
.mf-jump input{flex:1;min-height:50px;border:1.5px solid var(--line);border-radius:14px;padding:0 18px;
  font-family:var(--sans);font-size:16px;background:var(--paper);color:var(--ink);}
.mf-jump input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(226,163,73,.2);}
.mf-allgrid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr);max-width:1180px;margin:0 auto;
  padding:26px 26px 70px;}
@media (max-width:980px){ .mf-allgrid{grid-template-columns:1fr 1fr;} }
@media (max-width:620px){ .mf-allgrid{grid-template-columns:1fr;} }
.mf-allgrid[hidden],.mf-cards[hidden],.mf-prog[hidden],.mf-seg[hidden],.mf-jump[hidden],
.mf-path[hidden],.mf-clist[hidden],.mf-drow[hidden],.mf-marks[hidden],.mf-horizon[hidden],
.mf-prowmain[hidden],.mf-next[hidden],.mf-explored[hidden],.mf-stagegrid[hidden]{display:none!important;}

/* an unused decorative board in an otherwise-live stage */
.mf-stage .board:empty{display:none;}

/* ---------- the subscription gate, shown in place of a locked lesson ---------- */
.mf-gate{padding:56px 0 20px;}
.mf-gate p{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--ink-2);margin:0 0 1em;max-width:34em;}
.mf-gate .mf-gatenote{font-family:var(--sans);font-size:15.5px;color:var(--muted);}
.mf-gate .mf-gateact{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:26px;}
.mf-gate .mf-gatelink{font-family:var(--sans);font-size:14.5px;font-weight:700;color:var(--terra);}

/* ---------- session chrome in the frame bar ---------- */
.mf-kid{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:12.5px;
  font-weight:700;color:var(--muted);}
.mf-kid span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra);font-weight:800;}
.mf-kid select{min-height:36px;border:1.5px solid var(--line);border-radius:999px;padding:0 12px;
  background:var(--paper);color:var(--night);font:inherit;font-weight:700;font-size:13px;}
.mf-signin{display:inline-flex;align-items:center;min-height:36px;padding:0 15px;border-radius:999px;
  background:var(--gold);color:#3a2a12;text-decoration:none;font-family:var(--sans);font-size:13px;font-weight:800;}
.mf-noplace{font-family:var(--sans);font-size:12px;color:var(--muted);}
.mf-noplace a{color:var(--terra);font-weight:700;}
.mf-kid select option.mf-noseat{color:var(--muted);}

/* ---------- the site header, so the campus is part of the site ---------- */
.mf-sitebar{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap;padding:14px 26px;background:var(--night);color:var(--cream);}
.mf-sitebar .mf-brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--serif);
  font-weight:600;font-size:19px;color:var(--cream);text-decoration:none;}
.mf-sitebar .mf-brand em{font-style:normal;color:var(--terra);}
.mf-sitebar .mf-brand svg{width:34px;height:34px;flex:0 0 34px;}
.mf-sitenav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.mf-sitenav a{font-family:var(--sans);font-size:14px;font-weight:700;color:#e2d9c5;text-decoration:none;}
.mf-sitenav a:hover{color:var(--gold-soft);}
.mf-sitenav a.mf-here{color:var(--gold-soft);}
.mf-sitenav a.mf-portal{border:1.5px solid rgba(248,241,227,.28);border-radius:999px;padding:7px 15px;color:var(--cream);}
.mf-sitenav a.mf-portal:hover{border-color:var(--gold);background:rgba(226,163,73,.14);}
@media (max-width:760px){
  .mf-sitebar{padding:12px 18px;gap:12px;}
  .mf-sitenav{gap:14px;} .mf-sitenav a{font-size:13px;}
}
.mf-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin:30px 0 6px;}
.mf-ctanote{font-family:var(--sans);font-size:13.5px;line-height:1.5;color:#b9b2a0;max-width:34em;}
.mf-origin{max-width:none;}

/* ---------- the foot of the library: the way on ---------- */
.mf-libfoot{background:linear-gradient(180deg,#161d33,#1b2340);border-top:1px solid rgba(248,241,227,.14);
  padding:56px 0 62px;margin-top:10px;text-align:center;}
.mf-libfoot .mf-wide{max-width:820px;}
.mf-libfoot h2{font-family:var(--serif);font-size:30px;line-height:1.15;color:var(--cream);margin:0 0 12px;}
.mf-libfoot .mf-ctanote{color:#cfc7b5;font-size:15px;max-width:none;margin:0 auto;}
.mf-libcta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:26px 0 0;}
.mf-libfoot .mf-btn-go{background:var(--terra);color:#fff;box-shadow:0 10px 24px -14px rgba(197,107,69,.9);}
.mf-libfoot .mf-btn-go:hover{background:#d17b53;}
.mf-libfoot .mf-btn:not(.mf-btn-go){background:transparent;color:var(--cream);
  border:1.5px solid rgba(248,241,227,.4);box-shadow:none;}
.mf-libfoot .mf-btn:not(.mf-btn-go):hover{background:rgba(248,241,227,.1);}
@media(max-width:560px){.mf-libfoot h2{font-size:25px;}}

/* ---------- the strand bands ---------- */
.mf-band{padding:44px 0 46px;}
.mf-band-2{background:rgba(226,163,73,.06);}
.mf-bandhead{display:flex;align-items:center;gap:16px;margin:0 0 22px;}
.mf-bandicon{flex:0 0 46px;width:46px;height:46px;display:inline-flex;align-items:center;
  justify-content:center;border-radius:14px;background:rgba(226,163,73,.14);}
.mf-bandicon svg{display:block;width:30px;height:30px;}
.mf-bandhead .mf-eyebrow{margin:0 0 3px;}
.mf-bandhead h2{font-family:var(--serif);font-size:27px;line-height:1.1;color:var(--night);margin:0;}
.mf-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
@media(max-width:560px){.mf-band{padding:34px 0 36px;}.mf-bandhead h2{font-size:23px;}}

/* the jump chips were coloured for the night hero; the library head is cream */
.mf-libhead .mf-marks{padding-left:0;padding-right:0;}
.mf-libhead .mf-mark{background:var(--cream);border:1px solid var(--line);color:#4a4335;}
.mf-libhead .mf-mark b{color:var(--terra);}
.mf-libhead .mf-mark:hover{background:#fff;border-color:var(--gold);}