:root{
    --paper:#f7f2ea;
    --paper-2:#fffdf8;
    --ink:#241f1c;
    --ink-soft:#534a43;
    --muted:#b1a596;
    --flame:#e6602b;
    --flame-pink:#ef5c4b;
    --pause:#c4856c;
    --rule:rgba(36,31,28,.10);
    --reading:1.07rem;
    --maxw:680px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0;background:var(--paper);color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  }
  .serif{font-family:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,Charter,"Times New Roman",serif;}

  /* scroll progress */
  #progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--flame),var(--flame-pink));z-index:60;transition:width .08s linear;}

  /* top bar */
  .topbar{
    position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:.7rem clamp(1rem,4vw,2rem);
    background:rgba(247,242,234,.82);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
    border-bottom:1px solid var(--rule);flex-wrap:wrap;
  }
  .brand{display:flex;align-items:center;gap:.55rem;min-width:0;}
  .brand svg{flex:0 0 auto}
  .brand span{font-size:.84rem;font-weight:600;letter-spacing:.01em;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw;}
  .controls{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
  button{
    font:inherit;font-size:.74rem;letter-spacing:.02em;color:var(--ink-soft);
    background:var(--paper-2);border:1px solid var(--rule);border-radius:999px;
    padding:.42rem .7rem;cursor:pointer;transition:all .15s ease;white-space:nowrap;
  }
  button:hover{border-color:var(--flame);color:var(--flame);}
  button:active{transform:translateY(1px);}
  #btnNotes[aria-pressed="false"]{color:var(--muted);}
  .sizer{display:inline-flex;border:1px solid var(--rule);border-radius:999px;overflow:hidden;background:var(--paper-2);}
  .sizer button{border:0;border-radius:0;background:transparent;padding:.42rem .6rem;}
  .sizer button:first-child{border-right:1px solid var(--rule);}

  /* contents panel */
  #backdrop{position:fixed;inset:0;background:rgba(36,31,28,.35);opacity:0;pointer-events:none;transition:opacity .2s;z-index:55;}
  #backdrop.open{opacity:1;pointer-events:auto;}
  #toc{
    position:fixed;top:0;right:0;height:100%;width:min(340px,86vw);z-index:56;
    background:var(--paper-2);border-left:1px solid var(--rule);box-shadow:-20px 0 50px rgba(36,31,28,.12);
    transform:translateX(102%);transition:transform .26s cubic-bezier(.4,0,.2,1);
    padding:1.6rem 1.4rem;overflow-y:auto;
  }
  #toc.open{transform:translateX(0);}
  #toc h3{margin:.2rem 0 1.1rem;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--flame);}
  #tocList{list-style:none;margin:0;padding:0;counter-reset:t;}
  #tocList li{margin:0;}
  #tocList a{display:flex;gap:.7rem;align-items:baseline;padding:.6rem .2rem;color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--rule);font-size:.95rem;}
  #tocList a:hover{color:var(--flame);}
  #tocList a .n{font-size:.7rem;color:var(--muted);min-width:1.4rem;font-variant-numeric:tabular-nums;}

  /* layout */
  main{max-width:var(--maxw);margin:0 auto;padding:0 clamp(1.1rem,5vw,1.6rem) 5rem;}

  .hero{text-align:center;padding:clamp(2.4rem,8vw,4.2rem) 0 1.4rem;}
  .hero .flame{margin:0 auto .9rem;width:54px;height:54px;}
  .hero h1{margin:.2rem 0 .5rem;font-size:clamp(1.7rem,5.5vw,2.4rem);line-height:1.12;font-weight:600;letter-spacing:-.01em;}
  .hero .kicker{margin:.2rem 0 1rem;font-style:italic;color:var(--flame);font-size:1.02rem;}
  .hero .meta{margin:0;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}
  .hero .rule{width:42px;height:2px;background:linear-gradient(90deg,var(--flame),var(--flame-pink));margin:1.7rem auto 0;border-radius:2px;}

  section.bit{margin-top:3.1rem;}
  .sechead{display:flex;align-items:baseline;gap:.7rem;margin-bottom:1.4rem;}
  .sechead .n{font-size:.74rem;font-weight:700;color:var(--flame);font-variant-numeric:tabular-nums;letter-spacing:.05em;}
  .sechead h2{margin:0;font-size:1.02rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
  .sechead::after{content:"";flex:1;height:1px;background:var(--rule);transform:translateY(-2px);}

  p.line{margin:.92em 0;font-size:var(--reading);line-height:1.66;color:var(--ink);}
  p.punch{margin:1.3em 0;text-align:center;color:var(--flame);font-size:calc(var(--reading) * 1.34);line-height:1.42;font-weight:600;letter-spacing:.005em;}

  .stage{
    margin:.7em 0;padding:.12rem 0 .12rem .9rem;border-left:2px solid rgba(230,96,43,.35);
    font-size:.84rem;font-style:italic;letter-spacing:.005em;color:#8f8174;line-height:1.55;
  }
  body.hide-notes .stage{display:none;}

  .pause{margin:2.5rem 0;text-align:center;}
  .pause .ic{display:inline-block;color:var(--flame);font-size:1rem;line-height:1;}
  .pause .txt{display:block;margin-top:.5rem;font-size:.69rem;letter-spacing:.2em;text-transform:uppercase;color:var(--pause);}

  footer.end{margin-top:4.5rem;padding-top:2rem;border-top:1px solid var(--rule);text-align:center;}
  footer.end .sig{font-family:Georgia,serif;color:var(--flame);font-size:1.04rem;line-height:1.5;}
  footer.end .sig b{color:var(--flame-pink);font-weight:600;}

  /* comments */
  .comments{margin-top:4rem;padding-top:2.2rem;border-top:1px solid var(--rule);}
  .comments .chead{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.7rem;}
  .comments .chead .ic{color:var(--flame);font-size:1.05rem;line-height:1;}
  .comments .chead h2{margin:0;font-size:1.18rem;font-weight:600;letter-spacing:.01em;color:var(--ink);}
  .comments .prompt{margin:0 0 1.4rem;font-size:.95rem;line-height:1.55;color:var(--ink-soft);}
  .comments .prompt b{color:var(--flame);font-weight:600;}

  @media print{
    #progress,.topbar,#toc,#backdrop,.comments{display:none !important;}
    body{background:#fff;}
    .stage{display:block !important;}
    main{max-width:none;}
    p.line{font-size:13pt;}
  }