/* Inspired by classic personal-blog layout (bphogan.com style),
   recolored with Indigo Dusk (light) / Midnight Violet (dark). */
:root {
  --bg: #f4f5fb;
  --surface: #ffffff;
  --fg: #334155;
  --heading: #4f46e5;
  --heading-deep: #1e1b4b;
  --link: #4f46e5;
  --link-hover: #4338ca;
  --accent: #7c3aed;
  --accent-soft: #ede9fe;
  --pubdate: #64748b;
  --border: #e2e8f0;
  --hr: #ddd;
  --nav-bg: #1e1b4b;
  --nav-fg: #fff;
  --button-bg: #4f46e5;
  --button-fg: #fff;
}
[data-theme="dark"] {
  --bg: #0f172a;
  --surface: #1e293b;
  --fg: #cbd5e1;
  --heading: #a78bfa;
  --heading-deep: #e2e8f0;
  --link: #60a5fa;
  --link-hover: #93c5fd;
  --accent: #a78bfa;
  --accent-soft: #2e1065;
  --pubdate: #94a3b8;
  --border: #334155;
  --hr: #334155;
  --nav-bg: #020617;
  --nav-fg: #e2e8f0;
  --button-bg: #7c3aed;
  --button-fg: #fff;
}
*,*:before,*:after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--fg); background: var(--bg);
  font-family: geneva, verdana, "lucida sans", "lucida grande", sans-serif;
  line-height: 1.6; transition: background .2s ease, color .2s ease;
}
h1,h2,h3,h4,.logo { color: var(--heading-deep); }
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] .logo { color: var(--heading); }
h1 { font-size: 1.5rem; margin: 0 0 .5rem; line-height: 1.25; overflow-wrap: break-word; }
h2 { font-size: 1.3rem; margin: 0 0 .5rem; }
h3 { font-size: 1.1rem; margin: 0 0 .5rem; line-height: 1.35; }
p,li { font-size: 1rem; line-height: 1.6; }
p { margin: 0 0 1rem; }
a { color: var(--link); }
a:hover { color: var(--link-hover); }
h1 a,h2 a,h3 a { text-decoration: none; }
h1 a:hover,h2 a:hover,h3 a:hover { text-decoration: underline; }
hr { border-top: 1px solid var(--hr); border-bottom: none; margin: 1.5rem 0; }
img { max-width: 100%; height: auto; }

/* Layout grid: stacked on phones, main+sidebar on desktop */
.container { display: grid; grid-template-areas: "header" "layout" "footer"; margin: .5em; }
.layout { display: grid; grid-template-areas: "main" "sidebar"; gap: 2rem; }
main.content { grid-area: main; min-width: 0; }
.sidebar { grid-area: sidebar; min-width: 0; }
.header { grid-area: header; display: grid; grid-template-areas: "banner" "iconbar" "navbar"; gap: .5rem; }
.footer { grid-area: footer; text-align: center; color: var(--pubdate); }

/* Banner + iconbar */
.banner { grid-area: banner; }
.logo { font-size: 32px; font-weight: 700; margin: 0; line-height: 1.1; }
.logo a { text-decoration: none; color: inherit; }
.subheading { margin: 0; color: var(--pubdate); font-size: .95rem; }
.iconbar { grid-area: iconbar; display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.iconbar .btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding: 0 .6rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--link);
  font-weight: 700; font-size: .85rem; text-decoration: none; cursor: pointer;
}
.iconbar .btn:hover { border-color: var(--accent); color: var(--link-hover); }
.iconbar .btn svg { display: block; }
.lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--surface); }
.lang-switch .btn { border: none; border-radius: 0; min-width: 44px; opacity: .5; }
.lang-switch .btn + .btn { border-left: 1px solid var(--border); }
.lang-switch .btn.active { opacity: 1; background: var(--accent-soft); }
.theme-toggle { font-size: 1.1rem; }

/* Navbar: solid bar on phones, plain row on desktop */
.navbar { grid-area: navbar; background: var(--nav-bg); border-radius: 8px; margin-bottom: 1em; width: 100%; }
.navbar .menu { display: block; width: 100%; color: #fff; padding: .7rem .8rem; cursor: pointer; min-height: 48px; }
.navbar #menu-toggle { display: none; }
.navbar .full-navbar { display: none; flex-direction: column; margin: 0; padding: 0 0 .8em; width: 100%; }
.navbar #menu-toggle:checked + .full-navbar { display: flex; }
.navbar a { color: #fff; text-decoration: none; padding: .7rem .8rem; min-height: 48px; display: flex; align-items: center; }
.navbar a:hover { text-decoration: underline; }

/* Overview hero */
.overview { overflow: hidden; }
.headshot {
  float: left; width: 130px; height: 130px; margin: 0 1em 1em 0;
  border-radius: 12px; object-fit: cover;
  border: 1px solid var(--border);
}
.intro p:last-child { margin-bottom: 0; }

/* Articles like bphogan: title + small pubdate block */
article h3 span.pubdate, article h2 span.pubdate {
  color: var(--pubdate); display: block; font-size: .55em; font-weight: 400;
}
article .meta { color: var(--pubdate); margin-bottom: 1em; }
article .meta p { font-size: .8em; margin: 0; }
.summary { margin-bottom: 1rem; }
.button {
  display: inline-block; background: var(--button-bg); color: var(--button-fg) !important;
  padding: .8rem 1.3rem; min-height: 48px; border-radius: 8px;
  text-decoration: none; font-weight: 700;
}
.button:hover { filter: brightness(1.1); }

/* Sidebar boxes */
.sidebar section { margin-bottom: 2rem; }
.sidebar h2 { font-size: 1.2rem; border-bottom: 1px solid var(--hr); padding-bottom: .3rem; }
.books,.counts { text-align: left; }
.book-covers { display: flex; gap: .8rem; flex-wrap: wrap; }
.book-covers img { border: 1px solid var(--border); border-radius: 4px; height: auto; }
.book-covers a:hover img { border-color: var(--accent); }
.pubdate { color: var(--pubdate); font-size: .8em; }
/* Books page */
main.content img[alt^="Cover:"] { max-width: 200px; height: auto; border: 1px solid var(--border); border-radius: 4px; }
/* Talks page: video thumbnails */
main.content a img { max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; }
main.content a:hover img { border-color: var(--accent); }
.sidebar ul { padding-left: 1.2rem; }
.sidebar li { margin-bottom: .4rem; }

/* Larger text on tablets/desktops */
@media (min-width: 768px) {
  body { font-size: 1.05rem; }
  h1 { font-size: 1.8rem; }
  h2 { font-size: 1.5rem; }
  h3 { font-size: 1.25rem; }
}

/* Desktop grid: main + sidebar, inline nav */
@media only screen and (min-width: 1024px) {
  .container { width: 96%; margin: 0 auto; }
  .layout { grid-template-areas: "main sidebar"; grid-template-columns: 4fr 2fr; column-gap: 4rem; }
  .header { grid-template-areas: "banner iconbar" "navbar navbar"; grid-template-columns: 4fr 2fr; align-items: center; }
  .iconbar { justify-content: flex-end; }
  .navbar { background: transparent; }
  .navbar .menu { display: none; }
  .navbar .full-navbar { display: flex; padding: 0; justify-content: flex-start; gap: 1.5rem; flex-direction: row; }
  .navbar a { color: var(--link); padding: .4rem 0; min-height: 0; }
}
@media only screen and (min-width: 1280px) {
  .container { width: 1100px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }