/* Minimal Academic Theme
   - Light/Dark via [data-theme="dark"]
   - Clean typographic layout similar to classic academic pages
*/

/* ---------- Theme Variables ---------- */
:root{
  --bg: #ffffff;
  --text: #1f2328;
  --muted: #5b636a;
  --link: #2f6feb;
  --border: #e6e8eb;
  --accent: #6e7781;
  --codebg: #f6f8fa;
}
:root[data-theme="dark"]{
  --bg: #0d1117;
  --text: #e6edf3;
  --muted: #9da7b0;
  --link: #79c0ff;
  --border: #2d333b;
  --accent: #8b949e;
  --codebg: #161b22;
}

/* ---------- Reset-ish ---------- */
*{ box-sizing:border-box }
html, body{ margin:0; padding:0 }
img{ max-width:100%; height:auto; display:block } /* global image safety */

/* ---------- Base Typography ---------- */
body{
  background:var(--bg);
  color:var(--text);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
a{ color:var(--link); text-decoration:none }
a:hover{ text-decoration:underline }
.container{ max-width: 900px; margin: 0 auto; padding: 0 16px; }

main{ padding: 28px 0 48px; }
h1{ font-size:28px; margin:.2rem 0 .6rem }
h2{ font-size:22px; margin:1.2rem 0 .4rem }
h3{ font-size:18px; margin:1rem 0 .3rem }
p{ margin: .5rem 0 1rem }
ul{ padding-left: 1.2rem; margin: .25rem 0 1rem }
hr{ border:0; border-top:1px solid var(--border); margin: 1.25rem 0 }
.small{ color:var(--muted); }

/* ---------- Header / Nav ---------- */
.site-header{
  border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--bg); z-index:10;
}
.nav{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 14px 12px;
}
.brand{ display:flex; align-items:center; gap:10px; color:var(--text); font-weight:700; font-size:18px; }
.brand img{ width:36px; height:36px; border-radius:6px }
.navlinks{ display:flex; gap:16px; align-items:center; }
.navlinks a{ color:var(--muted); padding:4px 6px; border-radius:6px }
.navlinks a.active, .navlinks a:hover{ color:var(--text); background:rgba(127,127,127,.08) }
.toggle{
  border:1px solid var(--border); background:transparent; color:var(--text);
  border-radius:8px; padding:6px 10px; cursor:pointer;
}

/* ---------- Layout Grid ---------- */
.grid{
  display:grid;
  gap:18px;
  grid-template-columns: 260px 1fr; /* sidebar + main */
  align-items:start; /* keeps cards/images from stretching */
}

/* Stack on smaller screens */
@media (max-width: 880px){
  .grid{ grid-template-columns: 1fr; }
}

/* ---------- Cards / Blocks ---------- */
.card{
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px;
}
blockquote{
  border-left:3px solid var(--border);
  padding-left:12px;
  color:var(--muted)
}

/* ---------- Center-align Contact Card Only ---------- */
.grid .card {
  text-align: center;
}



/* ---------- Tables / Code ---------- */
table{ border-collapse:collapse; width:100% }
th, td{ border:1px solid var(--border); padding:8px; text-align:left }
code, pre{ background:var(--codebg); padding:.2rem .35rem; border-radius:6px }

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--border);
  padding:22px 0;
  color:var(--muted)
}

/* ---------- Profile Image ---------- */
/* Remove inline styles from the <img> in HTML; sizing is controlled here */
img[alt="Profile photo"]{
  width:100%;
  max-width:240px;        /* ideal desktop size for the sidebar */
  margin:auto;            /* centers inside the left column */
  margin-top:16px;
  border-radius:10px;
  border:1px solid var(--border);
}

/* Slightly smaller on phones */
@media (max-width: 768px){
  img[alt="Profile photo"]{
    max-width:200px;
  }
}