/* bezawit.dev — single column, no decoration, no animation. */

:root {
  --bg:      #fcfcfa;
  --text:    #1c1c1c;
  --muted:   #5a5a58;
  --faint:   #8a8a86;
  --rule:    #e4e1d9;
  --accent:  #2c5282;
  --accent-hover: #1a365d;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 680px;
}

/* Dark palette. Applied by operating-system preference unless the reader has
   explicitly asked for light, and applied outright when they have asked for
   dark. The two blocks below hold the same values and must stay in sync. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:     #15151a;
    --text:   #e4e2de;
    --muted:  #a2a09b;
    --faint:  #76746f;
    --rule:   #2b2b31;
    --accent: #8cb4f0;
    --accent-hover: #adc9f5;
  }
}

:root[data-theme="dark"] {
  --bg:     #15151a;
  --text:   #e4e2de;
  --muted:  #a2a09b;
  --faint:  #76746f;
  --rule:   #2b2b31;
  --accent: #8cb4f0;
  --accent-hover: #adc9f5;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  padding: clamp(3rem, 2rem + 6vw, 7rem) clamp(1.25rem, 0.5rem + 3vw, 2rem);
}

.page { max-width: var(--measure); margin-inline: auto; }

/* Typography */
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }

h1 { font-size: 2.1rem; letter-spacing: -0.02em; margin-bottom: 0.4rem; }

h2 {
  font-size: 1.05rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 1.5rem;
}

h3 { font-size: 1.15rem; margin-bottom: 0.3rem; }

p { margin-bottom: 1.1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2.5px; }
a:hover { color: var(--accent-hover); }

:where(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

strong { font-weight: 600; }
em { font-style: italic; }

/* No chip background: a shaded box mid-sentence interrupts the line. */
code { font-family: var(--mono); font-size: 0.88em; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--text); color: var(--bg);
  padding: 0.6rem 1rem; text-decoration: none;
}
.skip-link:focus { left: 1rem; top: 1rem; }

/* Theme toggle: the only interactive control on the page, so it stays quiet
   until you look for it. No transition, in keeping with the rest. */
.theme-toggle {
  display: block;
  margin: 0 0 1.75rem auto;
  padding: 0.35rem;
  background: none;
  border: 0;
  color: var(--faint);
  line-height: 0;
  cursor: pointer;
}
.theme-toggle:hover { color: var(--accent); }
.theme-toggle svg { display: block; }

/* Header */
.masthead { margin-bottom: 3rem; }
.tagline { color: var(--muted); font-size: 1.05rem; margin-bottom: 1rem; }

.contact-line { font-size: 0.95rem; color: var(--faint); }
.contact-line a { color: var(--accent); }
.contact-line .sep { margin-inline: 0.5rem; color: var(--rule); }

/* Sections */
section { margin-top: 3.5rem; }

.intro p { color: var(--text); }
.intro { margin-top: 2.5rem; }

/* Work list */
.entry { margin-bottom: 2.25rem; }
.entry:last-child { margin-bottom: 0; }

.entry-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 0.4rem 0.75rem; margin-bottom: 0.35rem;
}
.entry-head h3 { margin-bottom: 0; }
.entry-head h3 a { color: var(--text); text-decoration: none; }
.entry-head h3 a:hover { color: var(--accent); text-decoration: underline; }

.when { font-size: 0.85rem; color: var(--faint); font-variant-numeric: tabular-nums; }

.entry p { color: var(--muted); font-size: 0.97rem; margin-bottom: 0.5rem; }

.entry-links { font-size: 0.9rem; }
.entry-links .sep { margin-inline: 0.45rem; color: var(--rule); }

/* Compact two-column rows: role/school on the left, dates on the right */
.row {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 0.2rem 1rem;
  padding-block: 0.7rem;
  border-bottom: 1px solid var(--rule);
}
.row:last-child { border-bottom: 0; }
.row:first-child { padding-top: 0; }
.row-main { font-size: 0.98rem; }
.row-main b { font-weight: 600; }
.row-main span { color: var(--muted); }
.row .when { flex: none; }

/* Short list of other projects */
.brief { margin-bottom: 1.1rem; }
.brief:last-child { margin-bottom: 0; }
.brief-title { font-size: 0.98rem; font-weight: 600; }
.brief-title a { color: var(--text); text-decoration: none; }
.brief-title a:hover { color: var(--accent); text-decoration: underline; }
.brief p { color: var(--muted); font-size: 0.93rem; margin: 0.1rem 0 0; }

/* Footer */
footer {
  margin-top: 4.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.88rem; color: var(--faint);
}

/* ---------- Article pages ---------- */
.back { font-size: 0.9rem; margin-bottom: 2.5rem; display: inline-block; }

.article-title { font-size: 1.85rem; margin-bottom: 0.6rem; }
.article-standfirst { color: var(--muted); font-size: 1.05rem; margin-bottom: 1rem; }
.article-meta { font-size: 0.88rem; color: var(--faint); padding-bottom: 2rem; border-bottom: 1px solid var(--rule); }
.article-meta .sep { margin-inline: 0.5rem; color: var(--rule); }

.prose { margin-top: 2.5rem; }
.prose h2 {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  text-transform: none; letter-spacing: -0.01em; color: var(--text);
  margin-top: 2.75rem; margin-bottom: 0.8rem;
}
.prose h3 { font-size: 1.1rem; margin-top: 2rem; margin-bottom: 0.5rem; }
.prose p { color: var(--muted); }
.prose ul, .prose ol { color: var(--muted); margin: 0 0 1.1rem; padding-left: 1.3rem; }
.prose li { margin-bottom: 0.45rem; }
.prose li::marker { color: var(--faint); }

.prose figure { margin: 2rem 0; }
.prose figure img {
  width: 100%; background: #fff; padding: 10px;
  border: 1px solid var(--rule); border-radius: 2px;
}
.prose figcaption { font-size: 0.86rem; color: var(--faint); margin-top: 0.6rem; }

/* Wide figures step outside the measure; three-panel plots are unreadable at 680px */
.prose figure.wide {
  width: min(calc(100vw - 2.5rem), 900px);
  margin-inline: calc((min(100%, var(--measure)) - min(calc(100vw - 2.5rem), 900px)) / 2);
}

.eq {
  display: block; font-family: var(--mono); font-size: 0.9rem;
  color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent);
  border-left: 2px solid var(--rule);
  padding: 0.9rem 1.1rem; margin: 1.3rem 0; overflow-x: auto;
  white-space: pre-wrap;
}

.note {
  border-left: 2px solid var(--accent);
  padding: 0.2rem 0 0.2rem 1.1rem;
  margin: 1.8rem 0;
}
.note p { font-size: 0.95rem; margin-bottom: 0.6rem; }
.note p:last-child { margin-bottom: 0; }

.article-foot { margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: 0.92rem; }

/* 404 */
.notfound { text-align: left; }

@media print {
  body { background: #fff; color: #000; padding: 0; }
  a { color: #000; }
}