@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --paper:#fcfbf8; --paper2:#f5f2ea; --ink:#211f1b; --soft:#5f5a51; --faint:#8a8478;
  --rule:#e7e2d6; --accent:#9a5b2c; --accent-ink:#7a4720; --link:#1f5fa8;
  --good:#3f7d4e; --tint:#f3eee2; --warn:#fff7e6;
  --serif:'Lora',Georgia,'Times New Roman',serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:1.13rem;line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-underline-offset:3px}
a:hover{text-decoration:underline}

/* ---- top bar ---- */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:.7rem clamp(1rem,5vw,2.5rem);background:rgba(252,251,248,.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.brand{font-weight:700;font-size:1.15rem;color:var(--ink);text-decoration:none;letter-spacing:.01em}
.brand span{color:var(--accent);font-style:italic;font-weight:500}
.toc-link{font-family:var(--mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--soft);text-decoration:none}
.toc-link:hover{color:var(--accent)}

/* ---- page ---- */
main{max-width:720px;margin:0 auto;padding:clamp(1.6rem,5vw,3.5rem) clamp(1.1rem,5vw,1.6rem) 1rem}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:.5rem}
h1{font-size:clamp(1.7rem,5vw,2.5rem);font-weight:700;line-height:1.15;letter-spacing:-.01em;margin-bottom:1rem}
h2{font-size:1.3rem;font-weight:600;margin:0 0 .7rem;color:var(--ink)}
h3{font-size:1.08rem;font-weight:600;margin:0 0 .4rem}
p{margin:0 0 1rem}
.lead{font-size:1.2rem;color:var(--soft)}
b,strong{font-weight:600;color:var(--ink)}

/* today's goal banner */
.goal{font-size:1.18rem;background:var(--tint);border-left:4px solid var(--accent);border-radius:0 8px 8px 0;
  padding:.9rem 1.1rem;margin:0 0 1.6rem;font-style:italic;color:var(--ink)}
.goal b{font-style:normal}

/* chapter sections */
.sec{margin:2.2rem 0;padding-top:1.6rem;border-top:1px solid var(--rule)}
.sec:first-of-type{border-top:0;padding-top:0}
.sec > h2{display:flex;align-items:baseline;gap:.55rem}
.sec > h2 .num{font-family:var(--mono);font-size:.82rem;color:var(--accent);font-weight:600}

/* analogy + diagram */
.analogy{background:var(--warn);border:1px solid #f0e2c4;border-radius:10px;padding:.8rem 1.1rem;margin:0 0 1rem}
.analogy b{color:var(--accent-ink)}
.diagram{font-family:var(--mono);font-size:.86rem;line-height:1.5;color:var(--soft);background:var(--paper2);
  border:1px solid var(--rule);border-radius:10px;padding:.8rem 1.1rem;margin:.2rem 0 1rem;white-space:pre-wrap;overflow-x:auto}

/* code */
pre{background:#1c1f2b;border-radius:12px;padding:1.05rem 1.15rem;overflow-x:auto;margin:.4rem 0 1.1rem;
  font-size:.86rem;line-height:1.6;border:1px solid #2a2e3d}
pre code{font-family:var(--mono);background:none;padding:0;color:#e6e6e6}
:not(pre) > code{font-family:var(--mono);font-size:.86em;background:var(--paper2);border:1px solid var(--rule);border-radius:5px;padding:.05em .35em}
.cost{font-family:var(--mono);font-size:.8rem;color:var(--faint);margin:.1rem 0 0}

/* practice problem block */
.prob{background:var(--paper2);border:1px solid var(--rule);border-radius:12px;padding:1.05rem 1.2rem;margin:0 0 1.2rem}
.prob h3{margin-bottom:.55rem}
.prob p{margin-bottom:.55rem}
.prob pre{margin-bottom:.4rem}

/* remember (Q & A) */
.qa{margin:.2rem 0 0}
.qa div{padding:.7rem 0;border-top:1px dashed var(--rule)}
.qa div:first-child{border-top:0}
.qa .q{font-weight:600;margin:0 0 .15rem}
.qa .q::before{content:'Q  ';font-family:var(--mono);color:var(--accent);font-weight:600}
.qa .a{color:var(--soft);margin:0}
.qa .a::before{content:'A  ';font-family:var(--mono);color:var(--good);font-weight:600}

/* resource list */
.res{list-style:none;margin:.2rem 0 0}
.res li{padding:.35rem 0 .35rem 1.4rem;position:relative}
.res li::before{content:'→';position:absolute;left:0;color:var(--accent);font-family:var(--mono)}

/* generic lists in prose */
.prose ul,.prose ol{margin:0 0 1rem 1.3rem}
.prose li{margin:.3rem 0}

/* method steps on the intro */
.steps{list-style:none;counter-reset:s;margin:.4rem 0 1.2rem}
.steps li{counter-increment:s;position:relative;padding:.55rem 0 .55rem 2.4rem;border-top:1px solid var(--rule)}
.steps li:first-child{border-top:0}
.steps li::before{content:counter(s);position:absolute;left:0;top:.5rem;width:1.6rem;height:1.6rem;
  display:grid;place-items:center;background:var(--accent);color:#fff;border-radius:50%;font-family:var(--mono);font-size:.8rem}
.steps b{display:inline}

/* contents */
.toc h2{margin-top:2rem;font-size:1.15rem;color:var(--accent-ink)}
.toc ol{list-style:none;margin:.3rem 0 0}
.toc li{border-top:1px solid var(--rule)}
.toc li a{display:flex;gap:.8rem;padding:.55rem .2rem;color:var(--ink);text-decoration:none}
.toc li a:hover{background:var(--tint)}
.toc .dn{font-family:var(--mono);font-size:.8rem;color:var(--faint);min-width:3.6rem}

/* buttons + page nav */
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:10px;
  padding:.8em 1.4em;font-family:var(--serif);font-weight:600;font-size:1.02rem;text-decoration:none;cursor:pointer}
.btn:hover{background:var(--accent-ink);text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent-ink);border:1px solid var(--accent)}
.btn.ghost:hover{background:var(--tint)}
.btn-row{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.4rem 0}

.pagenav{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin:2.5rem 0 1rem;padding-top:1.4rem;border-top:2px solid var(--rule)}
.pagenav a{flex:1;max-width:48%;padding:.85rem 1rem;border:1px solid var(--rule);border-radius:12px;background:var(--paper2);
  text-decoration:none;color:var(--ink);font-weight:600;transition:border-color .15s,background .15s}
.pagenav a:hover{border-color:var(--accent);background:var(--tint)}
.pagenav .next{text-align:right}
.pagenav .lbl{display:block;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--faint);font-weight:600;margin-bottom:.1rem}
.pagenav .none{visibility:hidden}

/* footer */
.foot{max-width:720px;margin:0 auto;padding:1.5rem clamp(1.1rem,5vw,1.6rem) 3rem;color:var(--faint);font-size:.92rem;font-style:italic;text-align:center}

@media(max-width:560px){
  body{font-size:1.06rem}
  .pagenav a{max-width:48%;font-size:.92rem}
  .brand span{display:none}
}