:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#555555;
  --link:#0a66c2;
  --border:#e5e7eb;
  --accent:#111111;
  --maxw: 860px;
}

/* Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 Garamond,"Times New Roman",serif;}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}
h2{font-size:1.5rem; margin:0 0 .25rem}
.divider{border:none; border-top:2px solid var(--text); width:56px; margin:.5rem 0 1.5rem}
.site-footer{border-top:1px solid var(--border); padding:16px; text-align:center; color:var(--muted)}

/* Headshot */
.sidebar .headshot,
img.headshot{
  width:120px; height:120px;
  object-fit:cover; border-radius:50%;
  border:2px solid #ccc; display:block; margin:0 auto 16px;
}
@media (min-width:960px){
  .sidebar .headshot, img.headshot{ width:150px; height:150px; }
}

/* Two-column layout */
.mobile-header{
  position:sticky; top:0; z-index:30;
  display:flex; justify-content:flex-end; padding:10px 12px;
  border-bottom:1px solid var(--border); background:var(--bg);
}
.layout{
  display:grid; grid-template-columns:1fr; gap:0;
  max-width:1200px; margin:0 auto;
}
.sidebar{
  border-right:1px solid var(--border);
  padding:16px; background:var(--bg);
}
.title-block{ display:flex; flex-direction:column; align-items:flex-start; }
.side-nav{ display:flex; flex-direction:column; gap:4px; margin-top:8px; }
.side-nav a{ padding:.35rem 0; }

/* Content column */
.content{ padding:20px 16px; margin:0 auto 80px; max-width:var(--maxw); }

@media (min-width:960px){
  .mobile-header{display:none;}
  .layout{ grid-template-columns:280px 1fr; }
  .sidebar{ position:sticky; top:0; height:100vh; overflow:auto; padding:24px; }
  .title-block{ max-width:unset; }
}

/* Menu button */
.menu-toggle{
  display:inline-flex; align-items:center; gap:.5rem;
  border:1px solid var(--border); background:#fff; padding:.4rem .6rem;
  border-radius:.5rem; cursor:pointer; font-size:1rem;
}

/* Inline images: ALWAYS fit the column */
.content img:not(.headshot),
.content figure img,
.layout main img:not(.headshot){
  max-width:100% !important;
  width:auto !important;
  height:auto !important;
  display:block !important;
  margin:1rem auto;
}

/* Optional image size helpers */
.img-small{ max-width:320px !important; }
.img-medium{ max-width:560px !important; }
.img-large{ max-width:720px !important; }