:root{
  --charcoal:#2C2420;--thyme:#6c6d5f;--thyme-soft:#8b8c7e;
  --parchment:#faf8f5;--card:#fffdfa;--line:#e8e1d6;--muted:#8a8478;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --sidebar-w:264px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--parchment);color:var(--charcoal);font-family:var(--sans);font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:inherit;}

/* ---------- app shell ----------
   The page (body) is the scroll container. The sidebar is sticky within the
   viewport, the main column flows normally, so the page scrolls top-to-bottom
   as expected. No overflow is trapped on html/body/shell/main. */
.shell{display:flex;align-items:flex-start;min-height:100vh;}

.sidebar{
  width:var(--sidebar-w);flex:none;
  position:sticky;top:0;align-self:flex-start;
  height:100vh;overflow-y:auto;
  background:var(--card);border-right:1px solid var(--line);
  padding:26px 22px;display:flex;flex-direction:column;gap:6px;
}
.brand{font-family:var(--serif);font-weight:500;font-size:1.5rem;letter-spacing:.01em;text-decoration:none;color:var(--charcoal);}
.brand span{color:var(--thyme);}
.brand-sub{margin:2px 0 22px;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;}

.side-nav{display:flex;flex-direction:column;gap:2px;}
.side-link{
  display:flex;align-items:baseline;gap:11px;text-decoration:none;color:var(--charcoal);
  padding:11px 12px;border-radius:10px;font-size:.92rem;
  transition:background .16s ease,color .16s ease;
}
.side-link:hover{background:var(--parchment);}
.side-link__k{flex:none;font-family:var(--serif);font-weight:600;font-size:.82rem;color:var(--thyme);min-width:20px;}
.side-link__t{line-height:1.3;}
.side-link.is-active{background:var(--charcoal);color:#fff;}
.side-link.is-active .side-link__k{color:#c9ca9a;}

.side-foot{margin-top:auto;padding-top:22px;font-size:.78rem;color:var(--muted);}
.side-foot b{font-family:var(--serif);font-weight:500;color:var(--charcoal);}

.main{flex:1;min-width:0;display:flex;flex-direction:column;}

/* ---------- shared header ---------- */
.site-header{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px clamp(20px,4vw,48px);border-bottom:1px solid var(--line);background:var(--parchment);
}
.crumb{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted);}
.crumb a{text-decoration:none;color:var(--muted);}
.crumb a:hover{color:var(--charcoal);}
.crumb__sep{opacity:.6;}
.crumb__here{color:var(--charcoal);font-weight:600;}
.site-header__tag{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);}

/* ---------- shared footer ---------- */
.site-footer{
  margin-top:auto;border-top:1px solid var(--line);
  padding:26px clamp(20px,4vw,48px);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.8rem;color:var(--muted);
}
.site-footer b{font-family:var(--serif);font-weight:500;color:var(--charcoal);}

/* ---------- overview (home) ---------- */
.overview{padding:clamp(36px,5vw,64px) clamp(20px,4vw,48px);max-width:900px;}
.overview .eyebrow{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--thyme);font-weight:600;margin:0 0 14px;}
.overview__title{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4vw,2.9rem);line-height:1.08;letter-spacing:-.01em;margin:0 0 16px;}
.overview__lead{font-size:clamp(1rem,1.3vw,1.1rem);color:#5a5349;max-width:56ch;margin:0 0 34px;}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.card{
  display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--charcoal);
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px 22px;
  transition:border-color .18s ease,transform .18s ease;
}
.card:hover{border-color:var(--thyme-soft);transform:translateY(-2px);}
.card__k{font-family:var(--serif);font-weight:600;font-size:.85rem;color:var(--thyme);}
.card__title{font-family:var(--serif);font-weight:500;font-size:1.2rem;}
.card__meta{font-size:.8rem;color:var(--muted);}

/* ---------- responsive: collapse sidebar to a top bar ---------- */
@media (max-width:900px){
  .shell{flex-direction:column;}
  .sidebar{
    width:100%;height:auto;position:static;overflow:visible;
    border-right:none;border-bottom:1px solid var(--line);
    padding:18px clamp(20px,5vw,48px);
  }
  .brand-sub{display:none;}
  .side-nav{flex-direction:row;flex-wrap:wrap;gap:6px;}
  .side-link{padding:8px 12px;}
  .side-foot{margin-top:14px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;}}