/* ============================================================================
   theme.css — the ONLY file you need to edit to restyle every page.

   All three templates (index.html, project.html, reading.html) read from this
   file. Change a value here, and all of them change together. That is the whole
   idea: keep design decisions in one place, not scattered across pages.

   The bits you actually change are in blocks 1–3. Block 4 onward is plumbing —
   you can ignore it until you want to.

   Not sure what a value does? Change it, save, reload the page. Nothing here
   can break anything permanently.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. FONTS
   ---------------------------------------------------------------------------
   The default below uses fonts already on the reader's computer. They load
   instantly, work offline, cost nothing, and cannot break. For most academic
   sites this is genuinely the right answer.

   Want something more distinctive? Four pairings that suit academic work are
   listed in README.md §Fonts, with instructions for loading them.
   ------------------------------------------------------------------------ */

:root{
  /* Body text. A serif is the traditional choice for long-form reading. */
  --font-body: "Iowan Old Style", "Charter", "Bitstream Charter", Georgia,
               Cambria, "Times New Roman", serif;

  /* Headings. Same as body = quiet and classical.
     For contrast, try: var(--font-ui) */
  --font-head: var(--font-body);

  /* Small UI text: nav, labels, captions, tables. */
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Helvetica, Arial, sans-serif;

  /* Code and data. */
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


/* ---------------------------------------------------------------------------
   2. COLOR
   ---------------------------------------------------------------------------
   One accent colour. Not two. Academic pages look considered when they are
   restrained and busy when they are not — the accent should mark links and
   almost nothing else.

   Swap --accent for one of these presets (all tested for contrast on --paper):

     #7a2e2e   burgundy      classic, humanities, book-like     ← default
     #1f4e79   ink blue      sober, quantitative, institutional
     #2f5d46   forest        calm, natural sciences
     #8a4b1f   sienna        warm, archival
     #4a3d6b   aubergine     distinctive without shouting
   ------------------------------------------------------------------------ */

:root{
  --paper:  #fdfcfa;   /* page background */
  --ink:    #1f1d1b;   /* body text */
  --muted:  #6b6560;   /* captions, dates, secondary text */
  --accent: #7a2e2e;   /* links and marks — the only colour that stands out */
  --rule:   #e4e0d8;   /* hairlines and borders */
  --panel:  #f5f2ed;   /* boxes, code blocks, quiet call-outs */
}

/* Dark mode. Follows the reader's system setting automatically.
   Note the accent gets LIGHTER here — a dark colour on a dark background
   fails to meet contrast requirements. */
@media (prefers-color-scheme: dark){
  :root{
    --paper:  #16151a;
    --ink:    #e8e4dd;
    --muted:  #9a938c;
    --accent: #e0a0a0;
    --rule:   #302c33;
    --panel:  #1e1c22;
  }
}


/* ---------------------------------------------------------------------------
   3. SIZE AND SPACING
   ------------------------------------------------------------------------ */

:root{
  /* Line length. THE most important typographic setting on a text site.
     Aim for 60–75 characters per line. Longer and the eye loses its place
     returning to the next line. 34rem ≈ 68 characters at the default size. */
  --measure: 34rem;

  --text-size: 19px;   /* body size. 18–20px is comfortable for long reading. */
  --line-height: 1.62; /* 1.5–1.7 for serif body text. */
  --radius: 6px;       /* corner rounding. 0 for a harder, more formal look. */
}


/* ===========================================================================
   4. PLUMBING — you can ignore everything below until you want to tweak
   details. It applies the values above; it does not define new ones.
   ========================================================================= */

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

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-size);
  line-height: var(--line-height);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

.wrap{
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.25rem 5rem;
}
.wrap--wide{ max-width: calc(var(--measure) + 12rem); }

/* --- Typography ---------------------------------------------------------- */

h1, h2, h3, h4{
  font-family: var(--font-head);
  line-height: 1.2;
  font-weight: 600;
  margin: 2.2rem 0 .5rem;
  letter-spacing: -.01em;
}
h1{ font-size: 2.1rem; margin-top: 0; }
h2{ font-size: 1.42rem; margin-top: 2.6rem; }
h3{ font-size: 1.12rem; }
h4{
  font-size: .8rem; font-family: var(--font-ui); font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}

p{ margin: .85rem 0; }

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

strong{ font-weight: 600; }

small, .small{ font-size: .84rem; color: var(--muted); }

/* --- Page furniture ------------------------------------------------------ */

.site-header{
  padding: 2.5rem 0 1.4rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.2rem;
}
.site-title{
  font-family: var(--font-head);
  font-size: 1.15rem; font-weight: 600; margin: 0 0 .5rem;
  letter-spacing: -.01em;
}
.site-title a{ color: var(--ink); text-decoration: none; }

nav.main{ font-family: var(--font-ui); font-size: .88rem; }
nav.main a{ margin-right: 1.1rem; text-decoration: none; }
nav.main a:hover{ text-decoration: underline; }
nav.main a[aria-current="page"]{ color: var(--ink); font-weight: 600; }

.lede{ font-size: 1.12rem; color: var(--muted); margin: .4rem 0 1.6rem; }

.site-footer{
  margin-top: 4rem; padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui); font-size: .84rem; color: var(--muted);
}

/* --- Components ---------------------------------------------------------- */

.panel{
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin: 1.4rem 0;
}

blockquote{
  margin: 1.3rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  font-style: italic;
}

/* A publication / project entry. */
.entry{ margin: 1.5rem 0; padding-bottom: 1.4rem; border-bottom: 1px solid var(--rule); }
.entry:last-child{ border-bottom: 0; }
.entry .title{ font-weight: 600; }
.entry .meta{
  font-family: var(--font-ui); font-size: .84rem; color: var(--muted);
  margin-top: .2rem;
}
.entry .links{ font-family: var(--font-ui); font-size: .84rem; margin-top: .35rem; }
.entry .links a{ margin-right: .9rem; }

/* Small label, e.g. "Working paper", "Under review". */
.tag{
  display: inline-block;
  font-family: var(--font-ui); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--accent); border: 1px solid var(--accent);
  border-radius: 99px; padding: .1rem .55rem;
  vertical-align: 2px;
}

/* Author photo. Delete if you would rather not have one. */
.portrait{
  width: 132px; height: 132px; border-radius: 50%;
  object-fit: cover; float: right;
  margin: 0 0 1rem 1.5rem;
  border: 1px solid var(--rule);
}

/* --- Tables, code, figures ----------------------------------------------- */

.tablewrap{ overflow-x: auto; margin: 1.3rem 0; }
table{
  border-collapse: collapse; width: 100%;
  font-family: var(--font-ui); font-size: .89rem;
}
th, td{
  text-align: left; padding: .55rem .7rem;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
th{
  font-size: .74rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 600;
}

code{
  font-family: var(--font-mono); font-size: .86em;
  background: var(--panel); padding: .12em .35em; border-radius: 4px;
}
pre{
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1rem;
  overflow-x: auto; margin: 1.2rem 0;
}
pre code{ background: none; padding: 0; font-size: .82rem; }

figure{ margin: 1.6rem 0; }
figure img{ max-width: 100%; height: auto; border-radius: var(--radius); }
figcaption{
  font-family: var(--font-ui); font-size: .82rem;
  color: var(--muted); margin-top: .5rem;
}

hr{ border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* --- Footnotes ----------------------------------------------------------- */

.footnotes{
  margin-top: 3rem; padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-size: .88rem; color: var(--muted);
}
.footnotes li{ margin: .5rem 0; }
a.fn{ text-decoration: none; font-size: .78em; vertical-align: super; }

/* --- Small screens ------------------------------------------------------- */

@media (max-width: 34rem){
  :root{ --text-size: 17px; }
  .wrap{ padding: 0 1rem 3rem; }
  h1{ font-size: 1.7rem; }
  .portrait{
    float: none; display: block;
    margin: 0 0 1.2rem; width: 108px; height: 108px;
  }
}

/* --- Printing (for the CV page, mostly) ---------------------------------- */

@media print{
  :root{ --paper:#fff; --ink:#000; --accent:#000; }
  nav.main, .site-footer{ display: none; }
  .wrap{ max-width: none; }
  a{ text-decoration: none; }
}