:root{
    --kraft:#F3E7CE; --kraft-deep:#E8D7B4;
    --ink:#20283F; --ink-soft:#43506e;
    --paper:#FFFBF1;
    --belt:#F2BA3C;
    --red:#E0473E; --teal:#2C9A8C; --teal-deep:#1f7065;
    --line:#cdbb94; --shadow:rgba(32,40,63,.16);
    --accent:#E0473E; --accent-deep:#b5362f;   /* overridden per chapter */
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:"Inter",system-ui,sans-serif;color:var(--ink);
    background:
      radial-gradient(circle at 10% 4%, rgba(242,186,60,.16), transparent 40%),
      radial-gradient(circle at 92% 2%, rgba(44,154,140,.13), transparent 42%),
      var(--kraft);
    background-attachment:fixed;line-height:1.55;-webkit-font-smoothing:antialiased}
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
    background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
    background-size:46px 46px;opacity:.09}
  a{color:inherit;text-decoration:none}

  /* ---------- TOP BAR ---------- */
  .bar{position:sticky;top:0;z-index:20;background:rgba(243,231,206,.93);backdrop-filter:blur(9px);
    border-bottom:2px solid var(--ink);display:flex;align-items:center;justify-content:space-between;
    padding:11px clamp(16px,5vw,40px)}
  .brand{display:flex;align-items:center;gap:10px;cursor:pointer}
  .brand .mk{width:34px;height:34px;border-radius:9px;background:var(--ink);display:grid;place-items:center;
    box-shadow:2px 3px 0 var(--shadow);transform:rotate(-3deg)}
  .brand .nm{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.22rem;letter-spacing:-.5px}
  .brand .nm b{color:var(--accent)}
  .brand .nm i{font-style:normal;color:var(--ink-soft);font-size:.72em;margin-left:.5px;letter-spacing:0}
  .bar-links{display:flex;gap:7px;align-items:center}
  .bar-links a{font-family:"Space Mono",monospace;font-size:.78rem;font-weight:700;border:2px solid var(--ink);
    background:var(--paper);padding:6px 12px;border-radius:999px;transition:.15s transform;cursor:pointer}
  .bar-links a:hover{transform:translateY(-2px)}
  .bar-links a.cta{background:var(--belt)}

  .wrap{position:relative;z-index:1;max-width:980px;margin:0 auto;padding:0 clamp(16px,5vw,20px) 70px}

  /* ---------- HERO ---------- */
  .hero{position:relative;text-align:center;padding:54px 0 8px}
  .burst{position:absolute;top:14px;right:1%;width:96px;height:96px;display:grid;place-items:center;
    background:var(--belt);color:var(--ink);font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
    font-size:1.15rem;line-height:1;transform:rotate(-13deg);text-align:center;
    filter:drop-shadow(2px 3px 0 rgba(32,40,63,.28));
    clip-path:polygon(50% 0%,58% 14%,71% 7%,70% 22%,86% 22%,78% 35%,95% 40%,82% 50%,95% 60%,78% 65%,86% 78%,70% 78%,71% 93%,58% 86%,50% 100%,42% 86%,29% 93%,30% 78%,14% 78%,22% 65%,5% 60%,18% 50%,5% 40%,22% 35%,14% 22%,30% 22%,29% 7%,42% 14%);
    animation:pop 3.4s ease-in-out infinite}
  @keyframes pop{0%,100%{transform:rotate(-13deg) scale(1)}50%{transform:rotate(-9deg) scale(1.07)}}
  .burst small{display:block;font-size:.52rem;letter-spacing:.5px;margin-top:1px;font-family:"Space Mono",monospace;font-weight:700}
  @media (max-width:760px){.burst{display:none}}
  .nowshow{display:inline-block;font-family:"Space Mono",monospace;font-weight:700;font-size:.74rem;letter-spacing:1.5px;
    text-transform:uppercase;background:var(--ink);color:var(--belt);padding:6px 14px;border-radius:7px;transform:rotate(-1deg);box-shadow:4px 5px 0 var(--shadow)}
  .hero h1{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(2.7rem,9vw,5rem);line-height:.92;
    letter-spacing:-2px;margin:.3em 0 .14em}
  .hero h1 .c1{color:var(--red)} .hero h1 .c2{color:var(--teal)}
  .hero p{font-family:"Space Mono",monospace;color:var(--ink-soft);font-size:1rem;max-width:600px;margin:8px auto 0}
  .hero p b{color:var(--ink)}

  /* cast lineup = the hero signature */
  .lineup{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:30px 0 6px}
  .chip{display:flex;align-items:center;gap:8px;background:var(--paper);border:2px solid var(--ink);border-radius:999px;
    padding:6px 14px 6px 8px;box-shadow:3px 4px 0 var(--shadow)}
  .chip .e{font-size:1.3rem;line-height:1}
  .chip .t{text-align:left;line-height:1.1}
  .chip .t b{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:.86rem;display:block}
  .chip .t span{font-size:.68rem;color:var(--ink-soft)}

  /* ---------- SECTION HEADERS ---------- */
  .shead{display:flex;align-items:baseline;justify-content:space-between;margin:54px 0 4px;gap:12px;flex-wrap:wrap}
  .shead h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(1.5rem,4vw,2rem);letter-spacing:-.6px;margin:0}
  .shead .cnt{font-family:"Space Mono",monospace;font-size:.8rem;color:var(--ink-soft)}

  /* ---------- CHAPTER GRID ---------- */
  .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-top:18px}
  .ch{position:relative;background:var(--paper);border:2.5px solid var(--ink);border-radius:18px;overflow:hidden;
    box-shadow:5px 6px 0 var(--shadow);transition:.16s transform;cursor:pointer;display:flex;flex-direction:column}
  .ch.ready:hover{transform:translate(-2px,-3px)}
  .ch .top{padding:16px 16px 12px;background:var(--ch);position:relative}
  .ch .num{font-family:"Space Mono",monospace;font-weight:700;font-size:.74rem;color:var(--chd)}
  .ch h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:1.35rem;letter-spacing:-.5px;margin:3px 0 0;line-height:1.05}
  .ch .stamp{position:absolute;top:13px;right:13px;font-family:"Space Mono",monospace;font-weight:700;font-size:.62rem;
    text-transform:uppercase;letter-spacing:.5px;padding:4px 8px;border-radius:6px;border:2px solid var(--ink);transform:rotate(4deg)}
  .ch .stamp.open{background:var(--ink);color:var(--belt)}
  .ch .stamp.soon{background:repeating-linear-gradient(45deg,#e9dcbf,#e9dcbf 6px,#dccca6 6px,#dccca6 12px);color:var(--ink-soft)}
  .ch .mini{height:54px;display:flex;align-items:center;gap:5px;padding:0 16px;margin:2px 0 0}
  .ch .b{width:26px;height:26px;border-radius:6px;border:2px solid var(--ink);display:grid;place-items:center;
    font-family:"Space Mono",monospace;font-weight:700;font-size:.66rem;background:var(--kraft-deep)}
  .ch .b.hot{background:var(--chd);color:#fff}
  .ch .b.x{background:#eee;color:#bbb;border-style:dashed}
  .ch .body{padding:6px 16px 0}
  .ch .body p{font-size:.9rem;color:var(--ink-soft);margin:0}
  .ch .foot{margin-top:auto;padding:13px 16px 15px;display:flex;align-items:center;justify-content:space-between}
  .ch .meta{font-family:"Space Mono",monospace;font-size:.72rem;color:var(--ink-soft)}
  .ch .go{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:.84rem;color:var(--chd)}
  .ch.soon{opacity:.82;cursor:default}
  .ch.soon:hover{transform:none}

  /* roadmap chips */
  .road{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
  .road .r{font-family:"Space Mono",monospace;font-size:.8rem;background:var(--paper);border:2px dashed var(--line);
    border-radius:999px;padding:7px 13px;color:var(--ink-soft)}
  .road .r::before{content:"🚧 ";font-size:.8rem}

  /* universe blurb */
  .uni{background:var(--ink);color:#efe6d4;border-radius:18px;padding:26px clamp(18px,4vw,32px);margin-top:24px;box-shadow:6px 7px 0 var(--shadow)}
  .uni h2{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;color:var(--belt);margin:0 0 8px;font-size:1.4rem}
  .uni p{margin:0 0 10px;font-size:.98rem;color:#e7ddc9}
  .uni p:last-child{margin:0}
  .uni .sig{margin-top:15px;padding-top:13px;border-top:1px dashed rgba(255,255,255,.22);font-family:"Space Mono",monospace;font-size:.82rem;color:var(--belt)}
  .uni b{color:#fff}

  footer.site{text-align:center;margin-top:54px;font-family:"Space Mono",monospace;font-size:.8rem;color:var(--ink-soft)}
  footer.site a{color:var(--teal-deep)}

  /* ====================  CHAPTER (COMIC) VIEW  ==================== */
  .ch-head{margin:30px 0 6px}
  .back{font-family:"Space Mono",monospace;font-weight:700;font-size:.8rem;color:var(--ink-soft);display:inline-block;margin-bottom:14px;cursor:pointer}
  .back:hover{color:var(--accent)}
  .ch-no{font-family:"Space Mono",monospace;font-weight:700;color:var(--accent);letter-spacing:1px;font-size:.85rem}
  .ch-title{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(2.1rem,7vw,3.4rem);line-height:.98;letter-spacing:-1px;margin:.06em 0 .12em}
  .ch-blurb{font-family:"Space Mono",monospace;color:var(--ink-soft);font-size:.92rem;max-width:640px}

  nav.eps{position:sticky;top:53px;z-index:9;margin:22px -20px 0;padding:11px clamp(16px,5vw,20px);
    background:rgba(243,231,206,.93);backdrop-filter:blur(8px);border-bottom:2px dashed var(--line);
    display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin}
  nav.eps button{flex:0 0 auto;font-family:"Space Mono",monospace;font-weight:700;font-size:.82rem;border:2px solid var(--ink);
    background:var(--paper);color:var(--ink);padding:7px 13px;border-radius:999px;cursor:pointer;transition:.15s transform;white-space:nowrap}
  nav.eps button:hover{transform:translateY(-2px)}
  nav.eps button.on{background:var(--accent);color:#fff;border-color:var(--accent)}

  .episode{display:none;animation:fade .35s ease both}
  .episode.show{display:block}
  @keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  .ep-head{margin:32px 0 6px}
  .ep-no{font-family:"Space Mono",monospace;font-weight:700;color:var(--accent);letter-spacing:1px;font-size:.85rem}
  .ep-title{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:clamp(1.8rem,6vw,2.7rem);line-height:1.02;letter-spacing:-.5px;margin:.08em 0 .12em}
  .ep-sub{font-family:"Space Mono",monospace;color:var(--ink-soft);font-size:.85rem}

  .panel{position:relative;background:var(--paper);border:2.5px solid var(--ink);border-radius:16px;padding:18px;margin:16px 0;box-shadow:4px 6px 0 var(--shadow)}
  .panel .scene{display:flex;gap:13px;align-items:flex-start}
  .panel .who{font-size:2rem;line-height:1;flex:0 0 auto;filter:drop-shadow(1px 2px 0 var(--shadow))}
  .bubble{position:relative;background:var(--kraft);border:2px solid var(--ink);border-radius:13px;padding:9px 13px;font-size:1rem}
  .bubble.a1{background:#fdf0cf} .bubble.a2{background:#dff1ee} .bubble.a3{background:#fbe1df}
  .speaker{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:.78rem;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft);display:block;margin-bottom:1px}
  code{font-family:"Space Mono",monospace;background:var(--kraft-deep);padding:1px 6px;border-radius:5px;font-size:.84em}
  .note{font-family:"Space Mono",monospace;font-size:.8rem;color:var(--ink-soft);
    background:repeating-linear-gradient(135deg,transparent,transparent 8px,rgba(32,40,63,.04) 8px,rgba(32,40,63,.04) 16px);
    border-left:3px solid var(--accent);padding:7px 11px;margin-top:12px;border-radius:0 8px 8px 0}
  .note::before{content:"📋 narrator: ";color:var(--accent);font-weight:700}
  .diff{margin-top:12px;background:#fbe7e5;border:2px dashed var(--red);border-radius:11px;padding:10px 13px;font-size:.9rem}
  .diff b{color:var(--red)}
  .diff .h{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.4px;color:var(--red);display:block;margin-bottom:3px}

  .rail{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:7px 0 2px}
  .rlbl{font-family:"Space Mono",monospace;font-weight:700;font-size:.74rem;color:var(--ink-soft);flex:0 0 auto}
  .log{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
  .cell{font-family:"Space Mono",monospace;font-weight:700;font-size:.76rem;min-width:30px;height:30px;padding:0 6px;display:grid;place-items:center;border-radius:7px;border:2px solid var(--ink);background:var(--kraft-deep)}
  .cell.k{background:var(--belt)} .cell.n{background:var(--teal);color:#fff;animation:drop .5s ease both}
  .cell.gone{background:#eee;color:#bbb;border-style:dashed;text-decoration:line-through}
  .cell.dlq{background:#3a3a44;color:#ff8a80;border-color:#3a3a44}
  .arrow{font-family:"Space Mono",monospace;color:var(--ink-soft);font-weight:700}
  @keyframes drop{from{opacity:0;transform:translateY(-14px) scale(.7)}to{opacity:1;transform:none}}

  .real{background:var(--ink);color:#f6efe0;border-radius:16px;padding:20px 20px 18px;margin:22px 0;box-shadow:5px 7px 0 var(--shadow)}
  .real h4{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;margin:0 0 9px;font-size:1.12rem;color:var(--accent2)}
  .real p{margin:0 0 9px;font-size:.96rem;color:#ece3d2} .real p:last-child{margin:0}
  .real b{color:#fff}
  .real code{background:rgba(255,255,255,.12);color:var(--accent2)}
  .real .keep{border-top:1px dashed rgba(255,255,255,.25);margin-top:12px;padding-top:11px;font-family:"Space Mono",monospace;font-size:.84rem;color:#c9bfac}
  .real .keep b{color:var(--accent2)}

  .tape{margin:14px 0}
  .trow{display:grid;grid-template-columns:1fr 1.3fr 1.3fr;border:2.5px solid var(--ink);margin-top:-2px}
  .trow:first-of-type{border-radius:14px 14px 0 0}
  .trow:last-of-type{border-radius:0 0 14px 14px}
  .trow>div{padding:11px 13px;border-right:2px solid var(--ink);font-size:.9rem}
  .trow>div:last-child{border-right:none}
  .trow .feat{background:var(--ink);color:#f3e7ce;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;font-size:.82rem;display:flex;align-items:center}
  .trow .kf{background:#fbe7e5} .trow .mq{background:#dff1ee}
  .thead .kf,.thead .mq{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.4px;font-size:.84rem;text-align:center}
  .trow .kf b{color:var(--red)} .trow .mq b{color:var(--teal-deep)}

  .cliff{font-family:"Space Mono",monospace;font-style:italic;text-align:center;color:var(--ink-soft);margin:22px 0 6px;font-size:.92rem}
  .nextbtn{display:block;width:max-content;margin:4px auto 0;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;
    background:var(--belt);color:var(--ink);border:2.5px solid var(--ink);border-radius:999px;padding:11px 22px;cursor:pointer;box-shadow:3px 4px 0 var(--shadow);transition:.15s transform}
  .nextbtn:hover{transform:translate(-1px,-2px)}
  .ch-end{text-align:center;margin-top:40px;padding-top:24px;border-top:2px dashed var(--line)}
  .ch-end .lab{font-family:"Space Mono",monospace;font-size:.8rem;color:var(--ink-soft);margin-bottom:10px}
  .ch-end .nextch{display:inline-block;font-family:"Bricolage Grotesque",sans-serif;font-weight:800;background:var(--ink);color:var(--belt);
    border-radius:999px;padding:12px 24px;cursor:pointer;box-shadow:4px 5px 0 var(--shadow);transition:.15s transform}
  .ch-end .nextch:hover{transform:translate(-1px,-2px)}

  @media (max-width:560px){
    .trow{grid-template-columns:1fr}.trow>div{border-right:none;border-bottom:2px solid var(--ink)}
    .thead{display:none}
    .trow .kf::before{content:"KAFKA → ";font-family:"Space Mono",monospace;font-weight:700;color:var(--red);font-size:.72rem}
    .trow .mq::before{content:"QUEUE → ";font-family:"Space Mono",monospace;font-weight:700;color:var(--teal-deep);font-size:.72rem}
    nav.eps{top:52px}
  }
  @media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}}