:root{
  --ink:#0F1F1D; --pine:#173F39; --teal:#2E7D71; --mist:#8FB3AC;
  --sand:#F4F0E7; --paper:#FFFDF7; --clay:#B0542C; --muted:#5D6C69; --line:#DCD5C4;
}

*{ -webkit-tap-highlight-color: transparent; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
body{ background:var(--sand); color:var(--ink); }

::selection{ background:#2E7D71; color:#FFFDF7; }

/* reading progress */
#progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:var(--clay); z-index:60; transition:width .08s linear;
}

/* ---------- article typography ---------- */
.article{ font-size:17px; line-height:1.72; color:#22322F; }
@media (min-width:1024px){ .article{ font-size:17.5px; } }

.article > p{ margin:0 0 1.25em; }

.article h2{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  font-size:26px;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:2.6em 0 .8em;
  padding-top:.9em;
  border-top:1px solid var(--line);
  scroll-margin-top:96px;
}
@media (min-width:640px){ .article h2{ font-size:30px; } }
.article h2:first-of-type{ margin-top:0; }

.article h3{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600; font-size:20px; line-height:1.3;
  margin:2em 0 .6em; color:var(--ink);
}

.article strong{ font-weight:600; color:var(--ink); }
.article em{ font-style:italic; }

.article ul{ margin:0 0 1.4em; padding:0; list-style:none; }
.article ul li{
  position:relative; padding-left:1.4em; margin-bottom:.7em;
}
.article ul li::before{
  content:""; position:absolute; left:.15em; top:.72em;
  width:7px; height:7px; border-radius:2px; background:var(--mist);
}

.article a{
  color:var(--pine);
  text-decoration:none;
  border-bottom:1.5px solid var(--clay);
  padding-bottom:1px;
  transition:background-color .15s ease, color .15s ease;
}
.article a:hover{ background:rgba(176,84,44,.09); color:var(--clay); }

.article sub{ font-size:.7em; }

/* first paragraph lead */
.article > p:first-of-type{ font-size:19px; line-height:1.62; color:#1B2B28; }

/* ---------- TOC ---------- */
#toc a{
  color:var(--muted); text-decoration:none; padding:5px 0;
  border-left:2px solid transparent; margin-left:-17px; padding-left:15px;
  transition:color .15s ease, border-color .15s ease;
}
#toc a:hover{ color:var(--pine); }
#toc a.active{ color:var(--pine); font-weight:600; border-left-color:var(--clay); }

/* ---------- FAQ accordion ---------- */
.faq{ background:transparent; }
.faq summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:19px 20px;
  font-family:'Inter Tight',system-ui,sans-serif;
  font-size:16px; font-weight:500; line-height:1.45; color:var(--ink);
  transition:background-color .15s ease;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ background:rgba(143,179,172,.13); }
.faq[open] summary{ color:var(--pine); }

.faq-icon{
  width:18px; height:18px; flex:0 0 18px; margin-top:2px;
  color:var(--clay); transition:transform .22s ease;
}
.faq[open] .faq-icon{ transform:rotate(45deg); }

.faq-body{
  padding:0 20px 20px;
  font-size:15.5px; line-height:1.68; color:var(--muted);
  max-width:62ch;
}
.faq-body p{ margin:0; }
.faq[open] .faq-body{ animation:faqIn .22s ease both; }
@keyframes faqIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }

/* ---------- utilities ---------- */
.font-600{ font-weight:600; }

/* ---------- misc ---------- */
figure svg{ display:block; overflow:visible; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

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