:root{
  --paper:#1B1915; --paper-deep:#141210; --line:#38352C;
  --ink:#EDE7D8; --ink-soft:#A69C87;
  --blue:#8CA3D6; --blue-soft:#6C82AD;
  --red:#E2766A; --green:#7BB496;
  --surface:rgba(255,255,255,.045); --tint:rgba(140,163,214,.08);
  --max:700px;
  color-scheme:dark;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(var(--line) 1px, transparent 1.4px) 0 0/22px 22px,
    var(--paper);
  color:var(--ink);
  font-family:'Work Sans', -apple-system, sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }
a{color:var(--blue); text-decoration-thickness:1px; text-underline-offset:2px;}
a:hover{color:var(--red);}

/* site header / breadcrumb nav on every page */
.sitebar{
  max-width:var(--max); margin:0 auto; padding:26px 24px 0;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 14px;
  font-size:14px; color:var(--ink-soft);
}
@media (max-width:480px){
  .auth-control{width:100%; justify-content:flex-end;}
}
.sitebar a.home{
  display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:600;
  text-decoration:none;
}
.sitebar a.home svg{width:18px; height:18px;}
.sitebar .pos{color:var(--ink-soft);}

.wrap{max-width:var(--max); margin:0 auto; padding:20px 24px 90px;}

header.masthead{max-width:var(--max); margin:0 auto; padding:40px 24px 8px;}
.kicker{
  font-size:14px; color:var(--ink-soft); display:flex; align-items:center; gap:10px;
  margin-bottom:18px;
}
.kicker svg{width:20px; height:20px; flex:none;}
h1{
  font-family:'Fraunces', serif; font-weight:600;
  font-size:clamp(34px, 7vw, 50px); line-height:1.06; letter-spacing:-0.01em;
  margin:0 0 6px;
}
h1 em{font-style:italic; font-weight:500; color:var(--blue);}
.subhead{font-size:19px; color:var(--ink-soft); max-width:520px; margin:18px 0 28px;}
.underline{width:180px; height:14px; margin-bottom:8px;}
.underline path{
  fill:none; stroke:var(--red); stroke-width:3; stroke-linecap:round;
}
.meta-row{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:26px; font-size:14px;
  color:var(--ink-soft); border-top:1px solid var(--line); padding-top:18px;
}
.meta-row div{display:flex; flex-direction:column; gap:2px;}
.meta-row b{color:var(--ink); font-weight:600; font-size:15px;}

section{max-width:var(--max); margin:0 auto; padding:0 24px;}

.page-head{display:flex; align-items:center; gap:14px; margin:18px 0 4px;}
.page-head svg.icon{width:36px; height:36px; flex:0 0 36px; color:var(--blue);}
h2{
  font-family:'Fraunces', serif; font-weight:600; font-size:30px;
  letter-spacing:-.005em; margin:0; display:flex; align-items:baseline; gap:12px;
}
h2 .no{font-family:'Fraunces', serif; font-style:italic; font-weight:500; color:var(--blue-soft); font-size:22px;}
.duration{
  display:inline-block; font-size:13.5px; color:var(--ink-soft);
  border-left:2px solid var(--line); padding-left:10px; margin:14px 0 26px;
}
h3{font-family:'Fraunces', serif; font-weight:600; font-size:19px; margin:30px 0 10px;}
p{margin:0 0 16px;}
ul,ol{margin:0 0 16px; padding-left:22px;}
li{margin-bottom:7px;}
strong{font-weight:600;}

.callout{
  border-left:3px solid var(--line); padding:12px 16px; margin:16px 0;
  border-radius:2px; background:var(--surface); font-size:15.5px;
}
.callout.do{border-color:var(--green);}
.callout.skip{border-color:var(--red);}
.callout .tag{font-weight:700; font-size:11.5px; margin-bottom:5px; display:block;}
.callout.do .tag{color:var(--green);}
.callout.skip .tag{color:var(--red);}

.tldr{
  background:var(--tint); border:1px solid var(--line); border-radius:6px;
  padding:24px 26px; margin:30px 0;
}
.tldr h3{margin-top:0;}

.findings{list-style:none; margin:24px 0; padding:0;}
.findings li{display:flex; gap:16px; padding:18px 0; border-top:1px solid var(--line);}
.findings li:last-child{border-bottom:1px solid var(--line);}
.findings .fn{
  font-family:'Fraunces', serif; font-style:italic; font-weight:500;
  color:var(--blue-soft); font-size:26px; flex:none; width:34px;
}

blockquote{
  margin:18px 0; padding:2px 0 2px 18px; border-left:2px solid var(--blue-soft);
  font-family:'Fraunces', serif; font-style:italic; font-size:17.5px; color:var(--blue);
}

.supply-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; margin:18px 0; font-size:15px;}
@media (max-width:520px){.supply-grid{grid-template-columns:1fr;}}

.caveat-box{background:var(--paper-deep); border-radius:6px; padding:22px 26px; font-size:15px; color:var(--ink-soft);}
.caveat-box li{margin-bottom:10px;}
.caveat-box strong{color:var(--ink);}

/* table of contents on index */
.toc{list-style:none; margin:30px 0; padding:0;}
.toc li{border-top:1px solid var(--line);}
.toc li:last-child{border-bottom:1px solid var(--line);}
.toc a{
  display:flex; align-items:center; gap:16px; padding:18px 4px; text-decoration:none;
  color:var(--ink);
}
.toc a:hover{color:var(--blue);}
.toc a:hover .toc-title{color:var(--blue);}
.toc svg.icon{width:30px; height:30px; flex:0 0 30px; color:var(--blue-soft);}
.toc .no{
  font-family:'Fraunces', serif; font-style:italic; color:var(--blue-soft); font-size:20px; width:26px; flex:none;
}
.toc-body{flex:1; min-width:0;}
.toc-title{font-family:'Fraunces', serif; font-weight:600; font-size:19px; display:block;}
.toc-sub{font-size:13.5px; color:var(--ink-soft); margin-top:2px;}
.toc-arrow{color:var(--ink-soft); flex:none;}

/* prev / next footer nav */
nav.pn{
  max-width:var(--max); margin:50px auto 0; padding:22px 24px 0;
  border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:16px; font-size:14.5px;
}
nav.pn a{text-decoration:none; max-width:46%;}
nav.pn .lbl{display:block; font-size:12px; color:var(--ink-soft); margin-bottom:3px;}
nav.pn .to-next{margin-left:auto; text-align:right;}

footer.site{
  max-width:var(--max); margin:40px auto 0; padding:24px 24px 40px;
  font-size:13px; color:var(--ink-soft);
}

/* auth control in sitebar */
.auth-control{display:flex; align-items:center; gap:10px; font-size:13px;}
.auth-btn{
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  padding:6px 13px; border-radius:16px; font-size:12.5px; cursor:pointer;
  font-family:inherit; white-space:nowrap;
}
.auth-btn:hover{border-color:var(--blue); color:var(--blue);}
.auth-btn.primary{background:var(--blue); color:var(--paper); border-color:var(--blue);}
.auth-btn.primary:hover{opacity:.88; color:var(--paper);}
.auth-user{font-weight:600; color:var(--ink);}
.progress-pill{
  font-size:12px; color:var(--ink-soft); border:1px solid var(--line);
  padding:4px 10px; border-radius:12px; white-space:nowrap;
}

/* overall progress bar (index page) */
.overall-bar{max-width:var(--max); margin:22px auto 0; padding:0 24px;}
.bar-track{height:8px; background:var(--paper-deep); border-radius:4px; overflow:hidden; border:1px solid var(--line);}
.bar-fill{height:100%; width:0%; background:var(--green); transition:width .5s ease;}
.bar-label{font-size:12.5px; color:var(--ink-soft); margin-top:7px;}

/* "continue where you left off" card (index page) */
.continue-card{max-width:var(--max); margin:18px auto 0; padding:0 24px;}
.continue-card .continue-label{
  font-size:12px; color:var(--ink-soft); margin-bottom:6px;
  text-transform:uppercase; letter-spacing:.04em;
}
.continue-link{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  background:rgba(63,107,79,.08); border:1px solid var(--green); border-radius:6px;
  padding:16px 20px; text-decoration:none; color:var(--ink);
}
.continue-link:hover{background:rgba(63,107,79,.14);}
.continue-link:hover .continue-title{color:var(--ink);}
.continue-title{font-family:'Fraunces', serif; font-weight:600; font-size:18px;}
.continue-arrow{color:var(--green); flex:none; font-size:20px;}

/* per-section progress pill in the table of contents */
.toc-progress{
  font-size:12px; color:var(--ink-soft); border:1px solid var(--line);
  padding:3px 9px; border-radius:10px; flex:none; margin-left:2px;
}
.toc-progress.complete{color:var(--green); border-color:var(--green);}

/* progress tracker checklist box on each phase page */
.tracker-box{
  margin:34px 0 6px; border:1px solid var(--line); border-radius:6px;
  padding:22px 24px; background:var(--surface);
}
.tracker-box h3{margin-top:0;}
.track-section{
  font-weight:600; font-size:13px; text-transform:uppercase; letter-spacing:.03em;
  color:var(--ink-soft); margin:18px 0 2px; padding-top:12px; border-top:1px solid var(--line);
}
.track-section:first-child{margin-top:0; padding-top:0; border-top:none;}
.track-section a{font-weight:500; text-transform:none; letter-spacing:0; margin-left:4px;}
.track-item{
  display:grid; grid-template-columns:22px 1fr; column-gap:12px; row-gap:6px;
  align-items:start; padding:12px 0; font-size:15px;
  border-top:1px solid var(--line);
}
.track-item:first-of-type{border-top:none; padding-top:3px;}
/* Native checkboxes render at different sizes/positions across mobile
   browsers, which is what made them look misaligned with the label text.
   Drawing the box ourselves keeps it pixel-identical everywhere. */
.track-item input[type=checkbox]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  margin:0; width:20px; height:20px; grid-column:1; grid-row:1;
  border:1.5px solid var(--ink-soft); border-radius:5px; background:var(--paper-deep);
  position:relative; top:2px; cursor:pointer;
}
.track-item input[type=checkbox]:checked{background:var(--green); border-color:var(--green);}
.track-item input[type=checkbox]:checked::after{
  content:""; position:absolute; left:6px; top:2px; width:5px; height:10px;
  border:solid var(--paper-deep); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.track-item input[type=checkbox]:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
.track-item input[type=checkbox]:disabled{cursor:not-allowed; opacity:.45;}
.track-item label{grid-column:2; grid-row:1; cursor:pointer; overflow-wrap:break-word;}
.item-links{
  grid-column:2; grid-row:2; display:flex; flex-direction:column; gap:2px;
  font-size:12px; color:var(--ink-soft);
}
.item-links a{color:var(--ink-soft);}
.item-links a:hover{color:var(--green);}
.item-links b{font-weight:600; color:var(--ink);}
.tracker-note{font-size:13px; color:var(--ink-soft); margin:12px 0 0;}

@media print{
  .sitebar, nav.pn, .tracker-box, .overall-bar, .continue-card{display:none;}
  a{color:var(--ink); text-decoration:none;}
}