/* =Variables
----------------------------------------------------------------------------- */
:root {
  --color-bar:       #595864;
  --color-bg:        #faf8f8;
  --color-bar-text:  #eee6aa;
  --color-link:      #3f3e4a;
  --color-border:    #ccc;
  --color-muted:     #666;
  --font-body:       'Alegreya', Georgia, serif;
  --font-display:    'Alegreya Sans SC', sans-serif;
}

/* =Reset
----------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

body, h1, h2, h3, h4, h5, h6,
p, ol, ul, li, dl, dt, dd,
blockquote, figure, figcaption,
pre, form, fieldset, table, caption {
  margin: 0;
  padding: 0;
}

article, aside, details, figcaption, figure,
footer, header, main, nav, section, summary {
  display: block;
}

img, video, embed, object {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

table { border-collapse: collapse; border-spacing: 0; }

/* =Grid
----------------------------------------------------------------------------- */
.units-container {
  padding-top: 1px;
  margin-top: -1px;
}

.units-container::after,
.units-row::after {
  content: "";
  display: table;
  clear: both;
}

.units-row { margin-bottom: 1.65em; }

/* Standalone widths */
.width-100, .unit-100 { width: 100%; }
.width-90,  .unit-90  { width: 90%;  }
.width-80,  .unit-80  { width: 80%;  }
.width-75,  .unit-75  { width: 75%;  }
.width-70,  .unit-70  { width: 70%;  }
.width-66,  .unit-66  { width: 66.6%; }
.width-65,  .unit-65  { width: 65%;  }
.width-60,  .unit-60  { width: 60%;  }
.width-50,  .unit-50  { width: 50%;  }
.width-40,  .unit-40  { width: 40%;  }
.width-35,  .unit-35  { width: 35%;  }
.width-33,  .unit-33  { width: 33.3%; }
.width-30,  .unit-30  { width: 30%;  }
.width-25,  .unit-25  { width: 25%;  }
.width-20,  .unit-20  { width: 20%;  }
.width-10,  .unit-10  { width: 10%;  }

/* Columns inside .units-row */
.units-row > [class*="unit-"] {
  float: left;
  margin-left: 3%;
}
.units-row > [class*="unit-"]:first-child { margin-left: 0; }

.units-row .unit-90 { width: 89.7%;  }
.units-row .unit-80 { width: 79.4%;  }
.units-row .unit-75 { width: 74.25%; }
.units-row .unit-70 { width: 69.1%;  }
.units-row .unit-66 { width: 65.67%; }
.units-row .unit-65 { width: 65.67%; }
.units-row .unit-60 { width: 58.8%;  }
.units-row .unit-50 { width: 48.5%;  }
.units-row .unit-40 { width: 38.2%;  }
.units-row .unit-35 { width: 31.33%; }
.units-row .unit-33 { width: 31.33%; }
.units-row .unit-30 { width: 27.9%;  }
.units-row .unit-25 { width: 22.75%; }
.units-row .unit-20 { width: 17.6%;  }
.units-row .unit-10 { width: 7.3%;   }

.centered, .unit-centered {
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.units-padding > [class*="unit-"] { padding: 1.65em; }
.unit-padding { padding: 1.65em; }

/* Responsive: stack columns on small screens */
@media (max-width: 680px) {
  .units-row > [class*="unit-"] {
    float: none;
    width: 100% !important;
    margin-left: 0;
    margin-bottom: 1em;
  }
}

/* =Typography
----------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.7;
  background-color: var(--color-bg);
  color: #222;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);
  font-style: italic;
  line-height: 1.3;
  margin-bottom: 0.5em;
}

h2, h3, h4, h5, h6 { font-weight: normal; }

h3 {
  text-transform: lowercase;
  font-family: var(--font-display);
  font-style: normal;
  letter-spacing: 0.03em;
}

p { margin-bottom: 1em; }

/* =Links
----------------------------------------------------------------------------- */
a {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px dotted #a1a3a1;
}

a:hover, a:focus {
  color: var(--color-link);
  border-bottom: 1px solid var(--color-link);
}

/* =Navigation
----------------------------------------------------------------------------- */
#topbar {
  background: var(--color-bar);
  padding: 0;
  margin: 0;
}

.wrapper {
  padding: 0 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

#topbar .navbar {
  padding: 0.875rem 0;
  font-family: var(--font-display);
  font-size: 1.1rem;
}

#topbar .navbar ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

#topbar .navbar li a {
  color: var(--color-bar-text);
  border: none;
}

#topbar .navbar li span a {
  font-size: 1.6rem;
  font-family: var(--font-body);
  font-weight: bold;
}

#topbar .navbar a:hover {
  text-decoration: underline;
  border: none;
}

/* =Main content
----------------------------------------------------------------------------- */
#main { padding: 2rem 0; }

/* =Images
----------------------------------------------------------------------------- */
#avatar {
  border-radius: 50%;
  width: 100%;
  max-width: 160px;
  display: block;
  margin: 0 auto 1rem;
}

.image-left {
  float: left;
  display: block;
  margin: 0 1.5em 1em 0;
  padding: 0;
  width: 300px;
  max-width: 45%;
}

.image-left img { width: 100%; display: block; }

.caption {
  display: block;
  font-size: 0.82rem;
  color: var(--color-muted);
  font-style: italic;
  padding: 0.3rem 0.4rem;
  border: 1px solid #e0e3e5;
  border-top: none;
}

/* =Page title
----------------------------------------------------------------------------- */
.page-title {
  font-size: 1.75rem;
  font-style: italic;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 1.25rem;
}

/* =Badges
----------------------------------------------------------------------------- */
.badge {
  background: #ebe9f2;
  font-size: 0.72rem;
  display: inline-block;
  line-height: 1;
  padding: 4px 8px 3px;
  color: var(--color-link);
  text-align: center;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  border-bottom: none;
}

.badge:hover {
  background: var(--color-bar);
  color: var(--color-bar-text);
  border-bottom: none;
}

.badge-small {
  font-size: 0.68rem;
  padding: 3px 6px;
}

.badge-white {
  background: #fff;
  border: 1px solid #ccc;
  color: var(--color-link);
}

.badge-white:hover {
  background: var(--color-bar);
  color: var(--color-bar-text);
  border-color: var(--color-bar);
}

/* =Horizontal rules
----------------------------------------------------------------------------- */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: 1em 0;
}

hr.footer { border-top-width: 3px; }

/* =Utilities
----------------------------------------------------------------------------- */
.small   { font-size: 0.85em; }
.smaller { font-size: 0.78em; }

span.illuminate { font-family: var(--font-display); }

/* =Footer
----------------------------------------------------------------------------- */
#footer {
  margin-top: 1rem;
  padding-bottom: 1.5rem;
}

.contact-div {
  float: right;
  font-size: 0.85rem;
}

.contact-div ul { list-style: none; }

.copyright {
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-muted);
}

.bar-link { color: var(--color-bar-text); }

/* =Content pages (about, posts)
----------------------------------------------------------------------------- */
.units-container.units-padding { padding: 0 1.65em; }

/* =MathJax display override (prevents overflow on mobile)
----------------------------------------------------------------------------- */
mjx-container { overflow-x: auto; }