:root {
  --cardinal: #8C1515;
  --ink: #2E2D29;
  --muted: #5F574F;
  --rule: #D5D0C8;
  --paper: #FFFFFF;
  --sand: #F4F4F0;
}
* { box-sizing: border-box; }
html { font-size: 17px; }
body {
  margin: 0;
  font-family: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
}
a { color: var(--cardinal); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  background: var(--cardinal);
  color: #fff;
  padding: 0 16px;
}
.topbar .inner {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 56px;
  font-family: "Source Serif 4", Georgia, serif;
}
.topbar .brand { color: #fff; font-size: 1.25rem; letter-spacing: .01em; }
.topbar nav a { color: #fff; margin-left: 22px; font-family: "Source Sans 3", Arial, sans-serif; font-size: .95rem; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 40px 16px 64px; }

.hero { display: grid; grid-template-columns: 220px 1fr; gap: 36px; align-items: start; }
.hero img { width: 220px; height: auto; display: block; border: 1px solid var(--rule); }
h1 {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  font-size: 2.3rem;
  margin: 0 0 6px;
  line-height: 1.15;
}
.title { font-size: 1.1rem; color: var(--muted); margin: 0 0 18px; }
.title span { display: block; }
.links { font-size: .95rem; color: var(--muted); }
.links a { margin-right: 18px; white-space: nowrap; }
.namenote { font-size: .85rem; color: var(--muted); margin: 8px 0 0; }

section { margin-top: 44px; border-top: 1px solid var(--rule); padding-top: 22px; }
h2 {
  font-family: "Source Serif 4", Georgia, serif;
  font-weight: 600;
  font-size: 1.45rem;
  margin: 0 0 14px;
  color: var(--cardinal);
}
h3 { font-size: 1.05rem; margin: 22px 0 6px; font-weight: 600; }
p { margin: 0 0 14px; max-width: 72ch; }
ul { padding-left: 20px; max-width: 72ch; }
li { margin-bottom: 8px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.note { background: var(--sand); padding: 14px 18px; border-left: 4px solid var(--cardinal); max-width: 72ch; }
dl { max-width: 72ch; }
dt { font-weight: 600; margin-top: 12px; }
dd { margin: 2px 0 0; color: var(--muted); }

footer {
  border-top: 1px solid var(--rule);
  margin-top: 56px;
  padding-top: 18px;
  font-size: .9rem;
  color: var(--muted);
}
footer a { margin-right: 16px; }

.legal h1 { font-size: 1.9rem; }
.legal p, .legal li { max-width: 72ch; }
.legal .meta { color: var(--muted); font-size: .95rem; margin-bottom: 24px; }

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .hero img { width: 160px; }
  .cols { grid-template-columns: 1fr; }
  .topbar nav a { margin-left: 14px; font-size: .9rem; }
  h1 { font-size: 1.9rem; }
}

/* language row inside the top bar */
.topbar .inner { flex-wrap: wrap; height: auto; min-height: 56px; padding: 8px 0; row-gap: 6px; }
.topbar nav { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.topbar nav a { margin: 0; }
.langs { width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 0; font-size: .78rem; letter-spacing: .02em; border-top: 1px solid rgba(255,255,255,.22); padding-top: 7px; margin-top: 2px; }
.langs a { color: rgba(255,255,255,.78); text-decoration: none; padding: 0 10px; border-left: 1px solid rgba(255,255,255,.28); white-space: nowrap; }
.langs a:first-child { border-left: 0; padding-left: 0; }
.langs a:hover { color: #fff; text-decoration: underline; }
.langs a.cur { color: #fff; font-weight: 600; }

/* RTL */
[dir="rtl"] body, [dir="rtl"] { font-family: "Noto Naskh Arabic", "Source Sans 3", Arial, sans-serif; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] .topbar .brand { font-family: "Noto Naskh Arabic", "Source Serif 4", serif; }
[dir="rtl"] .links a, [dir="rtl"] footer a { margin-right: 0; margin-left: 18px; }
[dir="rtl"] ul { padding-left: 0; padding-right: 20px; }
[dir="rtl"] .note { border-left: 0; border-right: 4px solid var(--cardinal); }
[dir="rtl"] .langs a { border-left: 0; border-right: 1px solid rgba(255,255,255,.28); }
[dir="rtl"] .langs a:first-child { border-right: 0; padding-right: 0; }
[dir="rtl"] html { font-size: 18px; }

@media (max-width: 720px) {
  .topbar .inner { justify-content: flex-start; }
  .topbar nav { gap: 4px 14px; font-size: .9rem; }
  .langs { justify-content: flex-start; }
  .langs a { padding: 0 8px; }
}

/* academic polish */
li.pub { list-style: none; padding-left: 1.6em; text-indent: -1.6em; }
[dir="rtl"] li.pub { padding-left: 0; padding-right: 1.6em; text-indent: -1.6em; }
section#publications ul { padding-left: 0; }
[dir="rtl"] section#publications ul { padding-right: 0; }
.footlinks { margin: 10px 0 0; }
.updated { margin: 6px 0 0; font-size: .85rem; }