/* =========================================================================
     CLOUD QUEST — THE GREAT MIGRATION
     An explorer's altitude atlas. Identity organized by elevation:
     ground (Fort Rusty / on-prem) rises to sky (Cloudville / cloud).
     Single bold accent = compass amber. Light = daylight map paper.
     Dark = night-sky blueprint.
     ========================================================================= */

  :root{
    color-scheme: light dark;

    /* ---- Daylight Expedition Map (light) ---- */
    --bg:        #E9E2D2;   /* aged map paper */
    --bg-2:      #E2D8C4;   /* deeper paper band */
    --surface:   #F5F0E4;   /* card */
    --surface-2: #FBF7EC;   /* raised card */
    --ink:       #221E17;   /* warm near-black */
    --ink-soft:  #5B5240;   /* muted brown-grey */
    --ink-faint: #8B7F67;
    --line:      #CDBE9C;   /* contour hairline */
    --line-2:    #B7A47B;

    --amber:      #C0761B;  /* PRIMARY accent — compass / quest */
    --amber-br:   #E29A38;
    --amber-glow: rgba(224,154,56,.20);
    --sky:        #2C7DA0;  /* journey / cloud */
    --sky-deep:   #1B5B78;
    --rust:       #9E4A2E;  /* Fort Rusty / old world */
    --plum:       #74538F;  /* Penny Repurchase */
    --moss:       #5C8A55;  /* good / Rollo */
    --clay:       #B23B2E;  /* critical / Rita */
    --slate:      #5C6E7A;  /* Stan Retain */

    --good: var(--moss);
    --warn: #C0761B;
    --crit: var(--clay);

    --shadow: 0 1px 0 rgba(120,100,60,.10), 0 10px 28px -14px rgba(80,60,20,.40);
    --shadow-lg: 0 2px 0 rgba(120,100,60,.12), 0 30px 60px -24px rgba(60,44,14,.50);
    --ring: 0 0 0 3px var(--amber-glow);

    --font-display: "Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,"Times New Roman",serif;
    --font-label:   Copperplate,"Copperplate Gothic Light","Trajan Pro",Optima,"Gill Sans","Gill Sans MT","Futura",sans-serif;
    --font-body:    "Avenir Next",Avenir,"Segoe UI",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
    --font-mono:    "American Typewriter","Courier New",ui-monospace,SFMono-Regular,monospace;

    --wrap: 1180px;
    --measure: 68ch;
    --radius: 4px;      /* map insets are crisp, not pill-round */
    --radius-lg: 10px;
    --station-w: 264px;
  }

  @media (prefers-color-scheme: dark){
    :root{
      --bg:        #12151C;   /* midnight */
      --bg-2:      #0D1016;
      --surface:   #1A1F29;
      --surface-2: #232936;
      --ink:       #ECE5D5;   /* warm paper text on night */
      --ink-soft:  #AAB1BF;
      --ink-faint: #6E7686;
      --line:      #2B323F;
      --line-2:    #3B4553;

      --amber:      #E9A63E;
      --amber-br:   #F6BD57;
      --amber-glow: rgba(246,189,87,.16);
      --sky:        #5FB2D0;
      --sky-deep:   #2C7DA0;
      --rust:       #CF6B49;
      --plum:       #A487C4;
      --moss:       #82B471;
      --clay:       #DB6350;
      --slate:      #8A9BA8;

      --shadow: 0 1px 0 rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.7);
      --shadow-lg: 0 2px 0 rgba(0,0,0,.5), 0 34px 64px -26px rgba(0,0,0,.85);
    }
  }
  /* explicit toggle wins in both directions */
  :root[data-theme="light"]{
    --bg:#E9E2D2; --bg-2:#E2D8C4; --surface:#F5F0E4; --surface-2:#FBF7EC;
    --ink:#221E17; --ink-soft:#5B5240; --ink-faint:#8B7F67; --line:#CDBE9C; --line-2:#B7A47B;
    --amber:#C0761B; --amber-br:#E29A38; --amber-glow:rgba(224,154,56,.20);
    --sky:#2C7DA0; --sky-deep:#1B5B78; --rust:#9E4A2E; --plum:#74538F; --moss:#5C8A55; --clay:#B23B2E; --slate:#5C6E7A;
    --shadow:0 1px 0 rgba(120,100,60,.10),0 10px 28px -14px rgba(80,60,20,.40);
    --shadow-lg:0 2px 0 rgba(120,100,60,.12),0 30px 60px -24px rgba(60,44,14,.50);
  }
  :root[data-theme="dark"]{
    --bg:#12151C; --bg-2:#0D1016; --surface:#1A1F29; --surface-2:#232936;
    --ink:#ECE5D5; --ink-soft:#AAB1BF; --ink-faint:#6E7686; --line:#2B323F; --line-2:#3B4553;
    --amber:#E9A63E; --amber-br:#F6BD57; --amber-glow:rgba(246,189,87,.16);
    --sky:#5FB2D0; --sky-deep:#2C7DA0; --rust:#CF6B49; --plum:#A487C4; --moss:#82B471; --clay:#DB6350; --slate:#8A9BA8;
    --shadow:0 1px 0 rgba(0,0,0,.4),0 12px 30px -16px rgba(0,0,0,.7);
    --shadow-lg:0 2px 0 rgba(0,0,0,.5),0 34px 64px -26px rgba(0,0,0,.85);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body,.cq{ margin:0; }
  .cq{
    background:
      radial-gradient(1200px 600px at 80% -8%, var(--amber-glow), transparent 60%),
      var(--bg);
    color:var(--ink);
    font-family:var(--font-body);
    font-size:17px; line-height:1.65;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    overflow-x:clip;
  }
  .cq :focus-visible{ outline:2px solid var(--amber); outline-offset:3px; border-radius:3px; }
  .cq a{ color:var(--sky-deep); text-underline-offset:2px; text-decoration-thickness:1px; }
  :root[data-theme="dark"] .cq a, @media (prefers-color-scheme:dark){ }
  .cq ::selection{ background:var(--amber-glow); }

  .wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; }

  h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.12; text-wrap:balance; margin:0; letter-spacing:-.01em; }
  p{ margin:0; }

  .eyebrow{
    font-family:var(--font-label); text-transform:uppercase;
    letter-spacing:.22em; font-size:.68rem; color:var(--amber);
    display:inline-flex; align-items:center; gap:.5em;
  }
  .eyebrow::before{ content:""; width:26px; height:1px; background:currentColor; opacity:.7; }

  .kicker-num{ font-family:var(--font-label); letter-spacing:.14em; }

  /* skip link */
  .skip{ position:absolute; left:-999px; top:0; z-index:100; background:var(--ink); color:var(--bg); padding:.6em 1em; border-radius:6px; }
  .skip:focus{ left:12px; top:12px; }

  /* ---------------------------------------------------------------- header */
  .topbar{
    position:sticky; top:0; z-index:40;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:11px 0; backdrop-filter:blur(8px);
    background:color-mix(in srgb, var(--bg) 80%, transparent);
    border-bottom:1px solid var(--line);
  }
  .brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-label); text-transform:uppercase; letter-spacing:.16em; font-size:.78rem; color:var(--ink); }
  .brand .seal{ width:30px; height:30px; flex:0 0 auto; }
  .brand b{ font-weight:600; }
  .brand span{ color:var(--ink-faint); }
  .topnav{ display:flex; gap:4px; align-items:center; }
  .topnav a{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.12em; font-size:.66rem; color:var(--ink-soft); text-decoration:none; padding:7px 10px; border-radius:6px; }
  .topnav a:hover{ color:var(--ink); background:color-mix(in srgb, var(--amber-glow) 60%, transparent); }
  .tbtn{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.12em; font-size:.64rem; color:var(--ink-soft); background:transparent; border:1px solid var(--line-2); border-radius:20px; padding:7px 12px; cursor:pointer; display:inline-flex; gap:7px; align-items:center; }
  .tbtn:hover{ color:var(--ink); border-color:var(--amber); }
  @media (max-width:820px){ .topnav{ display:none; } }

  /* ---------------------------------------------------------------- hero */
  .hero{ position:relative; padding:46px 0 30px; }
  .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:34px; align-items:center; }
  .hero h1{ font-size:clamp(2.5rem,6.4vw,4.6rem); line-height:1.02; margin:.32em 0 .28em; }
  .hero h1 .em{ color:var(--rust); font-style:italic; }
  .hero h1 .sky{ color:var(--sky-deep); }
  .hero-lead{ font-size:1.18rem; color:var(--ink-soft); max-width:40ch; }
  .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
  .btn{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.13em; font-size:.72rem; cursor:pointer; border-radius:30px; padding:13px 22px; text-decoration:none; display:inline-flex; align-items:center; gap:9px; border:1px solid transparent; transition:transform .12s ease, box-shadow .2s ease; }
  .btn-primary{ background:linear-gradient(180deg,var(--amber-br),var(--amber)); color:#2a1c06; box-shadow:0 8px 20px -8px var(--amber); border-color:color-mix(in srgb,var(--amber) 70%, #000 6%); }
  .btn-primary:hover{ transform:translateY(-2px); }
  .btn-ghost{ border-color:var(--line-2); color:var(--ink); }
  .btn-ghost:hover{ border-color:var(--sky); color:var(--sky-deep); transform:translateY(-2px); }
  .hero-figure{ position:relative; }
  .hero-svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 30px 40px rgba(30,20,8,.28)); border-radius:var(--radius-lg); }
  .hero-meta{ display:flex; gap:22px; margin-top:20px; flex-wrap:wrap; }
  .hero-meta .m{ font-family:var(--font-mono); font-size:.82rem; color:var(--ink-soft); }
  .hero-meta .m b{ color:var(--ink); font-family:var(--font-display); font-size:1.35rem; display:block; line-height:1; }
  @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } .hero-figure{ order:-1; } }

  /* ---------------------------------------------------------------- big idea */
  .bigidea{ border-block:1px solid var(--line); background:var(--bg-2); padding:28px 0; margin-top:14px; }
  .bigidea .row{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .fact{ display:flex; gap:13px; align-items:flex-start; }
  .fact .n{ font-family:var(--font-display); font-size:2rem; color:var(--amber); line-height:1; }
  .fact h4{ font-size:1.02rem; margin-bottom:2px; }
  .fact p{ font-size:.92rem; color:var(--ink-soft); }
  @media (max-width:760px){ .bigidea .row{ grid-template-columns:1fr; } }

  /* ---------------------------------------------------------------- layout w/ trail */
  .journey{ display:grid; grid-template-columns:var(--station-w) 1fr; gap:44px; align-items:start; padding-top:40px; }
  @media (max-width:960px){ .journey{ grid-template-columns:1fr; } }

  /* sticky altitude trail */
  .trail{ position:sticky; top:64px; align-self:start; }
  @media (max-width:960px){ .trail{ display:none; } }
  .trail-inner{ position:relative; padding-left:26px; }
  .trail-line{ position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--line-2); border-radius:2px; overflow:hidden; }
  .trail-fill{ position:absolute; left:0; top:0; width:100%; height:0; background:linear-gradient(180deg,var(--sky),var(--amber),var(--rust)); transition:height .2s ease; }
  .trail h5{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.2em; font-size:.62rem; color:var(--ink-faint); margin:0 0 14px 2px; }
  .trail ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
  .trail li a{ position:relative; display:flex; gap:10px; align-items:baseline; text-decoration:none; color:var(--ink-soft); font-size:.86rem; padding:7px 8px 7px 0; border-radius:6px; line-height:1.25; }
  .trail li a::before{ content:""; position:absolute; left:-24px; top:11px; width:11px; height:11px; border-radius:50%; background:var(--bg); border:2px solid var(--line-2); transition:all .2s; }
  .trail li a:hover{ color:var(--ink); }
  .trail li a .st-n{ font-family:var(--font-mono); font-size:.72rem; color:var(--amber); flex:0 0 auto; }
  .trail li a.active{ color:var(--ink); font-weight:600; }
  .trail li a.active::before{ background:var(--amber); border-color:var(--amber); box-shadow:0 0 0 4px var(--amber-glow); }
  .trail li a.done::before{ background:var(--sky); border-color:var(--sky); }
  .trail-ends{ display:flex; justify-content:space-between; font-family:var(--font-label); text-transform:uppercase; letter-spacing:.14em; font-size:.58rem; color:var(--ink-faint); margin-top:12px; padding-left:2px; }

  /* ---------------------------------------------------------------- station */
  .stations{ display:flex; flex-direction:column; gap:22px; min-width:0; }
  .station{ scroll-margin-top:78px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 32px 34px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
  .station::before{ /* faint contour texture at corner */
    content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px;
    background:radial-gradient(circle at center, transparent 40%, var(--line) 41%, transparent 42%) ,
              radial-gradient(circle at center, transparent 52%, var(--line) 53%, transparent 54%),
              radial-gradient(circle at center, transparent 64%, var(--line) 65%, transparent 66%);
    opacity:.5; pointer-events:none;
  }
  .station-head{ display:flex; align-items:flex-start; gap:16px; margin-bottom:6px; }
  .station-badge{ flex:0 0 auto; width:52px; height:52px; border-radius:12px; display:grid; place-items:center; background:var(--surface-2); border:1px solid var(--line-2); font-family:var(--font-label); color:var(--amber); font-size:.9rem; box-shadow:var(--shadow); }
  .station-badge .alt{ font-family:var(--font-mono); font-size:.56rem; color:var(--ink-faint); display:block; text-align:center; margin-top:1px; }
  .station h2{ font-size:clamp(1.5rem,3.2vw,2.15rem); margin-top:3px; }
  .station .altnote{ font-family:var(--font-mono); font-size:.74rem; color:var(--ink-faint); }
  .prose{ max-width:var(--measure); }
  .prose p{ margin:.85em 0; color:var(--ink); }
  .prose p:first-child{ margin-top:.4em; }
  .prose strong{ color:var(--ink); font-weight:700; }
  .prose code{ font-family:var(--font-mono); font-size:.86em; background:var(--bg-2); padding:.08em .4em; border-radius:4px; border:1px solid var(--line); }
  .prose ul{ margin:.7em 0; padding-left:1.15em; }
  .prose li{ margin:.3em 0; }
  .prose a{ font-weight:600; }

  .keypoints{ list-style:none; margin:20px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 22px; }
  @media (max-width:620px){ .keypoints{ grid-template-columns:1fr; } }
  .keypoints li{ position:relative; padding-left:26px; font-size:.95rem; color:var(--ink); line-height:1.45; }
  .keypoints li::before{ content:""; position:absolute; left:0; top:.42em; width:12px; height:12px; background:
      linear-gradient(45deg, transparent 44%, var(--amber) 45% 55%, transparent 56%),
      linear-gradient(-45deg, transparent 44%, var(--amber) 45% 55%, transparent 56%);
    /* compass tick */ }

  .subhead{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.18em; font-size:.7rem; color:var(--sky-deep); margin:26px 0 12px; display:flex; align-items:center; gap:10px; }
  .subhead::after{ content:""; flex:1; height:1px; background:var(--line); }

  /* concept cards */
  .concepts{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
  .concept{ background:var(--surface-2); border:1px solid var(--line); border-left:3px solid var(--sky); border-radius:var(--radius); padding:15px 16px; }
  .concept h4{ font-size:1.04rem; margin-bottom:5px; }
  .concept .def{ font-size:.9rem; color:var(--ink-soft); }
  .concept .ex{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft); margin-top:9px; padding-top:9px; border-top:1px dashed var(--line-2); }
  .concept .ex b{ color:var(--sky-deep); font-family:var(--font-label); letter-spacing:.08em; text-transform:uppercase; font-size:.66rem; }
  .procon{ display:flex; gap:14px; margin-top:9px; flex-wrap:wrap; }
  .procon ul{ list-style:none; margin:0; padding:0; font-size:.82rem; }
  .procon .pro li::before{ content:"+ "; color:var(--good); font-weight:700; }
  .procon .con li::before{ content:"– "; color:var(--clay); font-weight:700; }

  /* ---------- callouts: Kid's Corner / Gizmo / Maya ---------- */
  .aside{ border-radius:var(--radius); padding:16px 18px 16px 52px; position:relative; margin:18px 0; font-size:.96rem; }
  .aside .tag{ position:absolute; left:14px; top:16px; width:26px; height:26px; }
  .aside h5{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.14em; font-size:.66rem; margin:0 0 4px; }
  .aside p{ color:var(--ink); }
  .kid{ background:
      repeating-linear-gradient(-1deg, transparent 0 27px, color-mix(in srgb,var(--amber-glow) 40%, transparent) 27px 28px),
      var(--surface-2);
    border:1px solid var(--line-2); box-shadow:var(--shadow); }
  .kid h5{ color:var(--amber); }
  .kid::after{ content:""; position:absolute; right:12px; top:-8px; width:60px; height:16px; background:color-mix(in srgb,var(--amber) 30%, var(--surface)); opacity:.5; transform:rotate(-3deg); border-radius:2px; } /* tape */
  .gizmo{ background:color-mix(in srgb,var(--clay) 10%, var(--surface)); border:1px solid color-mix(in srgb,var(--clay) 34%, var(--line)); }
  .gizmo h5{ color:var(--clay); }
  .maya{ background:color-mix(in srgb,var(--sky) 11%, var(--surface)); border:1px solid color-mix(in srgb,var(--sky) 32%, var(--line)); }
  .maya h5{ color:var(--sky-deep); }

  /* figures */
  figure.inset{ margin:22px 0; background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:18px; box-shadow:var(--shadow); overflow:hidden; }
  figure.inset svg{ width:100%; height:auto; display:block; }
  figure.inset figcaption{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-soft); margin-top:12px; padding-top:10px; border-top:1px dashed var(--line-2); }
  figure.inset figcaption b{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.1em; font-size:.66rem; color:var(--amber); }

  /* ---------------------------------------------------------------- 7R matrix */
  .matrix-wrap{ display:grid; grid-template-columns:1.15fr .85fr; gap:20px; margin-top:8px; }
  @media (max-width:820px){ .matrix-wrap{ grid-template-columns:1fr; } }
  .matrix{ position:relative; background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--radius-lg); aspect-ratio:1/.86; overflow:hidden; }
  .matrix .axis{ position:absolute; font-family:var(--font-label); text-transform:uppercase; letter-spacing:.14em; font-size:.6rem; color:var(--ink-faint); }
  .matrix .axis.x{ bottom:8px; left:50%; transform:translateX(-50%); }
  .matrix .axis.y{ top:50%; left:8px; transform:translateY(-50%) rotate(-90deg); transform-origin:left center; }
  .matrix .grid-svg{ position:absolute; inset:0; width:100%; height:100%; }
  .ranger{ position:absolute; transform:translate(-50%,50%); width:46px; height:46px; border-radius:50%; display:grid; place-items:center; font-family:var(--font-label); font-size:.92rem; color:#fff; cursor:pointer; border:2px solid rgba(255,255,255,.7); box-shadow:0 6px 16px -6px rgba(0,0,0,.5); transition:transform .14s ease, box-shadow .2s; }
  .ranger:hover,.ranger.sel{ transform:translate(-50%,50%) scale(1.18); box-shadow:0 10px 22px -6px rgba(0,0,0,.6), var(--ring); z-index:3; }
  .ranger .lab{ position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-size:.6rem; color:var(--ink-soft); white-space:nowrap; letter-spacing:0; }
  .r-detail{ background:var(--surface-2); border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:18px 20px; box-shadow:var(--shadow); align-self:start; }
  .r-detail .seal{ width:44px; height:44px; border-radius:50%; display:inline-grid; place-items:center; color:#fff; font-family:var(--font-label); font-size:.95rem; vertical-align:middle; margin-right:10px; }
  .r-detail h4{ display:flex; align-items:center; font-size:1.15rem; }
  .r-detail .strat{ font-family:var(--font-mono); font-size:.8rem; color:var(--amber); margin:2px 0 10px; }
  .r-detail .meters{ display:flex; gap:16px; margin:12px 0; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-soft); }
  .meter{ flex:1; }
  .meter .bar{ height:6px; background:var(--bg-2); border-radius:4px; overflow:hidden; margin-top:4px; }
  .meter .bar i{ display:block; height:100%; background:var(--amber); border-radius:4px; }
  .r-detail dl{ margin:10px 0 0; font-size:.9rem; }
  .r-detail dt{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.1em; font-size:.62rem; color:var(--sky-deep); margin-top:9px; }
  .r-detail dd{ margin:2px 0 0; color:var(--ink); }
  .r-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
  .r-chip{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.08em; font-size:.6rem; color:#fff; padding:5px 10px; border-radius:20px; cursor:pointer; border:2px solid transparent; opacity:.62; }
  .r-chip.sel{ opacity:1; border-color:rgba(255,255,255,.6); }

  /* ---------------------------------------------------------------- flashcards */
  .deck-bar{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:16px; }
  .chips{ display:flex; flex-wrap:wrap; gap:7px; }
  .chip{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.09em; font-size:.62rem; color:var(--ink-soft); background:transparent; border:1px solid var(--line-2); border-radius:20px; padding:6px 12px; cursor:pointer; }
  .chip.sel{ background:var(--amber); color:#2a1c06; border-color:var(--amber); }
  .chip:hover:not(.sel){ border-color:var(--amber); color:var(--ink); }
  .deck{ display:grid; place-items:center; }
  .card3d{ width:min(560px,100%); height:288px; perspective:1600px; cursor:pointer; }
  .card3d .inner{ position:relative; width:100%; height:100%; transition:transform .55s cubic-bezier(.4,.15,.2,1); transform-style:preserve-3d; }
  .card3d.flipped .inner{ transform:rotateY(180deg); }
  .face{ position:absolute; inset:0; backface-visibility:hidden; border-radius:var(--radius-lg); padding:30px 34px; display:flex; flex-direction:column; justify-content:center; border:1px solid var(--line-2); box-shadow:var(--shadow-lg); }
  .face .corner{ position:absolute; top:14px; right:16px; font-family:var(--font-label); text-transform:uppercase; letter-spacing:.14em; font-size:.58rem; }
  .face .qlab{ position:absolute; top:14px; left:18px; font-family:var(--font-label); text-transform:uppercase; letter-spacing:.16em; font-size:.6rem; }
  .front{ background:var(--surface-2); }
  .front .qlab{ color:var(--amber); }
  .front .q{ font-family:var(--font-display); font-size:1.42rem; line-height:1.2; text-wrap:balance; }
  .front .hint{ margin-top:16px; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); }
  .back{ background:linear-gradient(160deg, color-mix(in srgb,var(--sky) 14%, var(--surface-2)), var(--surface-2)); transform:rotateY(180deg); }
  .back .qlab{ color:var(--sky-deep); }
  .back .a{ font-size:1.06rem; color:var(--ink); overflow:auto; }
  .deck-nav{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:18px; }
  .rbtn{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); cursor:pointer; font-size:1.1rem; display:grid; place-items:center; }
  .rbtn:hover{ border-color:var(--amber); color:var(--amber); }
  .deck-count{ font-family:var(--font-mono); font-size:.82rem; color:var(--ink-soft); min-width:74px; text-align:center; }

  /* ---------------------------------------------------------------- glossary */
  .gloss-tools{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:16px; }
  .search{ flex:1; min-width:220px; display:flex; align-items:center; gap:9px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:26px; padding:10px 16px; }
  .search input{ border:0; background:transparent; color:var(--ink); font-family:var(--font-body); font-size:.98rem; width:100%; outline:none; }
  .search svg{ flex:0 0 auto; opacity:.6; }
  .gloss-count{ font-family:var(--font-mono); font-size:.8rem; color:var(--ink-faint); }
  .gloss{ column-width:340px; column-gap:26px; }
  .term{ break-inside:avoid; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); padding:12px 15px; margin-bottom:12px; }
  .term dt{ font-family:var(--font-display); font-weight:600; font-size:1.04rem; }
  .term dd{ margin:3px 0 0; font-size:.9rem; color:var(--ink-soft); }
  .term mark{ background:var(--amber-glow); color:inherit; padding:0 .1em; border-radius:2px; }
  .gloss-empty{ font-family:var(--font-mono); color:var(--ink-faint); padding:20px; text-align:center; }

  /* ---------------------------------------------------------------- use cases */
  .cases{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; }
  .case{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
  .case .stamp{ padding:8px 16px; font-family:var(--font-label); text-transform:uppercase; letter-spacing:.14em; font-size:.62rem; color:#fff; background:linear-gradient(90deg,var(--sky-deep),var(--sky)); display:flex; justify-content:space-between; }
  .case .body{ padding:16px 18px; display:flex; flex-direction:column; gap:10px; }
  .case h4{ font-size:1.16rem; }
  .case .fld b{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.1em; font-size:.6rem; color:var(--amber); display:block; margin-bottom:1px; }
  .case .fld{ font-size:.9rem; color:var(--ink-soft); }
  .case .lesson{ margin-top:auto; padding-top:11px; border-top:1px dashed var(--line-2); font-size:.9rem; color:var(--ink); }
  .case .lesson b{ color:var(--moss); font-family:var(--font-label); text-transform:uppercase; letter-spacing:.1em; font-size:.6rem; }

  /* ---------------------------------------------------------------- quiz */
  .quiz{ display:flex; flex-direction:column; gap:16px; }
  .qcard{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px 20px; }
  .qcard .qn{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.12em; font-size:.62rem; color:var(--amber); }
  .qcard h4{ font-size:1.12rem; margin:4px 0 12px; }
  .opts{ display:flex; flex-direction:column; gap:8px; }
  .opt{ display:flex; gap:11px; align-items:flex-start; padding:11px 14px; border:1px solid var(--line-2); border-radius:var(--radius); cursor:pointer; font-size:.96rem; background:var(--surface); transition:border-color .15s, background .15s; }
  .opt:hover{ border-color:var(--amber); }
  .opt .mk{ font-family:var(--font-mono); font-size:.82rem; color:var(--ink-faint); flex:0 0 auto; width:1.4em; }
  .opt.correct{ border-color:var(--good); background:color-mix(in srgb,var(--moss) 14%, var(--surface)); }
  .opt.wrong{ border-color:var(--clay); background:color-mix(in srgb,var(--clay) 12%, var(--surface)); }
  .opt.correct .mk{ color:var(--good); }
  .opt.wrong .mk{ color:var(--clay); }
  .explain{ margin-top:11px; font-size:.9rem; color:var(--ink-soft); padding:11px 13px; border-left:3px solid var(--sky); background:color-mix(in srgb,var(--sky) 8%, transparent); border-radius:0 6px 6px 0; display:none; }
  .explain.show{ display:block; }
  .quiz-score{ position:sticky; bottom:14px; align-self:center; background:var(--ink); color:var(--bg); font-family:var(--font-label); text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; padding:11px 20px; border-radius:30px; box-shadow:var(--shadow-lg); }

  /* ---------------------------------------------------------------- checklist */
  .checklist{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; }
  @media (max-width:640px){ .checklist{ grid-template-columns:1fr; } }
  .checklist li{ display:flex; gap:11px; align-items:flex-start; padding:9px 0; }
  .checklist input{ appearance:none; width:20px; height:20px; flex:0 0 auto; border:2px solid var(--line-2); border-radius:5px; cursor:pointer; margin-top:1px; position:relative; }
  .checklist input:checked{ background:var(--amber); border-color:var(--amber); }
  .checklist input:checked::after{ content:"✓"; position:absolute; inset:0; display:grid; place-items:center; color:#2a1c06; font-size:.8rem; font-weight:700; }
  .checklist label{ font-size:.95rem; cursor:pointer; }
  .checklist input:checked + label{ color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--amber); }

  /* section shells */
  .section{ padding-top:40px; }
  .section-head{ margin-bottom:20px; }
  .section-head h2{ font-size:clamp(1.7rem,4vw,2.5rem); margin-top:6px; }
  .section-head p{ color:var(--ink-soft); max-width:var(--measure); margin-top:8px; }

  /* footer */
  .foot{ margin-top:56px; border-top:1px solid var(--line); background:var(--bg-2); padding:40px 0 54px; }
  .foot .row{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:flex-start; }
  .foot .brand{ font-size:.86rem; }
  .foot p{ font-size:.86rem; color:var(--ink-soft); max-width:44ch; margin-top:10px; }
  .foot .legend{ display:flex; gap:18px; flex-wrap:wrap; font-family:var(--font-mono); font-size:.76rem; color:var(--ink-soft); }
  .foot .legend b{ color:var(--ink); }

  /* reveal — content is ALWAYS visible; entrance is a pure-CSS enhancement
     that self-completes on load and can never leave content hidden. */
  .reveal{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: no-preference){
    .reveal{ animation:cqrise .7s both ease; }
    @keyframes cqrise{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
    /* the flight path "marches" upward toward Cloudville (compositor-only, no JS) */
    #flightPath{ animation:cqmarch 1.1s linear infinite; }
    @keyframes cqmarch{ to{ stroke-dashoffset:-14; } }
  }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation:none !important; transition:none !important; }
    .reveal{ opacity:1; transform:none; }
  }

/* ===================================================================
   MULTI-PAGE ADDITIONS — shared nav chrome, journey index, station pager.
   Appended when the single scrolling page was split into separate pages.
   =================================================================== */

.topbar-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.topbar .brand{ text-decoration:none; }
.topnav a.active{ color:var(--ink); background:color-mix(in srgb, var(--amber-glow) 60%, transparent); }

/* keep the nav reachable on small screens (the single page hid it; a multi-page
   site needs it to move between pages) — let it scroll horizontally instead */
@media (max-width:820px){
  .topnav{ display:flex; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; gap:2px; scrollbar-width:none; }
  .topnav::-webkit-scrollbar{ display:none; }
  .topnav a{ white-space:nowrap; padding:6px 8px; }
}

/* ---- Journey index (home page) ---- */
.journey-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.jcard{ display:flex; gap:14px; align-items:flex-start; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:18px; box-shadow:var(--shadow); position:relative;
  transition:transform .14s ease, border-color .18s ease, box-shadow .2s ease; }
.jcard:hover{ transform:translateY(-3px); border-color:var(--amber); box-shadow:var(--shadow-lg); }
.jcard-badge{ flex:0 0 auto; width:50px; height:50px; border-radius:12px; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line-2); font-family:var(--font-label); color:var(--amber); font-size:1rem; line-height:1; }
.jcard-badge span{ display:block; font-family:var(--font-mono); font-size:.5rem; color:var(--ink-faint); text-align:center; margin-top:2px; }
.jcard-body{ min-width:0; }
.jcard-n{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.12em; font-size:.6rem; color:var(--ink-faint); }
.jcard-body h3{ font-family:var(--font-display); font-size:1.16rem; margin:2px 0 5px; line-height:1.15; }
.jcard-body p{ font-size:.88rem; color:var(--ink-soft); line-height:1.45; }
.jcard-go{ position:absolute; right:16px; top:16px; color:var(--amber); font-size:1.1rem; opacity:.6; transition:transform .14s ease, opacity .14s ease; }
.jcard:hover .jcard-go{ transform:translateX(4px); opacity:1; }

/* ---- Toolkit grid (home page) ---- */
.tool-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.tool-card{ text-decoration:none; color:inherit; background:var(--surface-2); border:1px solid var(--line);
  border-left:3px solid var(--sky); border-radius:var(--radius); padding:16px 18px; display:block;
  transition:transform .14s ease, border-color .18s ease; }
.tool-card:hover{ transform:translateY(-2px); border-left-color:var(--amber); }
.tool-card b{ font-family:var(--font-display); font-weight:600; font-size:1.08rem; display:block; }
.tool-card span{ font-size:.86rem; color:var(--ink-soft); }

/* ---- Single station page ---- */
.station-page{ padding-top:26px; }
.crumbs{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.12em; font-size:.62rem; color:var(--ink-faint); margin-bottom:16px; }
.crumbs a{ color:var(--ink-soft); text-decoration:none; }
.crumbs a:hover{ color:var(--amber); }
.crumbs span{ color:var(--ink); }

/* prev / next station pager */
.station-pager{ display:grid; grid-template-columns:1fr auto 1fr; gap:12px; margin-top:26px; align-items:stretch; }
.pager-btn{ display:flex; flex-direction:column; gap:3px; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:13px 16px;
  transition:transform .14s ease, border-color .18s ease; }
.pager-btn:hover{ border-color:var(--amber); transform:translateY(-2px); }
.pager-btn.next{ text-align:right; align-items:flex-end; }
.pager-btn.home{ text-align:center; justify-content:center; align-items:center; background:var(--surface-2); }
.pager-btn.disabled{ visibility:hidden; }
.pager-dir{ font-family:var(--font-label); text-transform:uppercase; letter-spacing:.1em; font-size:.6rem; color:var(--amber); }
.pager-title{ font-family:var(--font-display); font-size:.98rem; line-height:1.2; }
@media (max-width:640px){
  .station-pager{ grid-template-columns:1fr; }
  .pager-btn.next{ text-align:left; align-items:flex-start; }
  .pager-btn.home{ order:3; }
}