/* Artur Ekert — site stylesheet.
   One file, no build step. Colours and type live in :root; change them there. */

/* ── Fonts (self-hosted, variable weight) ─────────────────────────────── */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("fonts/cormorant-garamond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("fonts/cormorant-garamond-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/lora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/lora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("fonts/lora-math.woff2") format("woff2");
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-208E, U+2090-209C, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF; }

/* ── Tokens ───────────────────────────────────────────────────────────── */
:root {
  --bg: #f3f2f2;
  --surface: #eae9e9;
  --text: #201f1d;
  --accent: #b68235;
  --accent-200: #ffe3bf;
  --accent-300: #facb8d;
  --accent-700: #7d5411;
  --accent-800: #5a3b0a;
  --muted: #605d5d;      /* neutral-700 */
  --soft: #444141;       /* neutral-800 */
  --strong: #2d2b2b;     /* neutral-900 */
  --divider: rgba(32, 31, 29, .16);

  --font-heading: "Cormorant Garamond", "EB Garamond", Garamond, Georgia, serif;
  --font-body: "Lora", Georgia, "Times New Roman", serif;

  --s1: 4.6px; --s2: 9.2px; --s3: 13.8px; --s4: 18.4px; --s6: 27.6px; --s8: 36.8px; --s12: 55px;
  --radius: 4px;
  --measure: 940px;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 17px; line-height: 1.72;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 400; line-height: 1.1; letter-spacing: -0.01em; margin: 0; }
p { margin: 0 0 var(--s4); }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-700); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-800); text-decoration-thickness: 2px; }
::selection { background: var(--accent-200); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--s4); top: var(--s4); background: var(--bg); padding: var(--s2) var(--s3); z-index: 20; }
.justify { text-align: justify; hyphens: auto; }
[id] { scroll-margin-top: 110px; }

/* ── Header / nav ─────────────────────────────────────────────────────── */
.site-header { border-bottom: 1px solid var(--divider); background: var(--bg); position: sticky; top: 0; z-index: 10; }
.site-header .inner {
  max-width: var(--measure); margin: 0 auto; padding: var(--s4) var(--s6);
  display: flex; flex-wrap: wrap; gap: var(--s4); align-items: baseline; justify-content: space-between;
}
.brand { font-family: var(--font-heading); font-size: 26px; font-weight: 500; letter-spacing: .01em; color: var(--text); text-decoration: none; }
.brand:hover { color: var(--text); }
.site-nav { display: flex; gap: var(--s6); align-items: baseline; }
.site-nav a {
  font-size: 14px; letter-spacing: .09em; text-transform: uppercase; color: var(--soft);
  text-decoration: none; padding-bottom: var(--s1); border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--accent-700); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); }

/* ── Layout ───────────────────────────────────────────────────────────── */
main { max-width: var(--measure); margin: 0 auto; padding: var(--s12) var(--s6) var(--s8); }
.kicker { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-700); margin: 0 0 var(--s2); }
.page-title { font-size: 58px; line-height: 1.08; margin: 0 0 var(--s4); }
.display { font-size: 68px; line-height: 1.06; margin: 0 0 var(--s6); }
.lede { font-family: var(--font-heading); font-size: 25px; line-height: 1.45; color: var(--strong); margin: 0 0 var(--s4); max-width: 30em; }
.rule { height: 1px; background: var(--divider); border: 0; margin: 0 0 var(--s8); }
.label {
  font-family: var(--font-heading); font-weight: 600; font-size: 15px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--soft); margin: 0 0 var(--s4);
}
.section-title { font-size: 38px; line-height: 1.15; margin: 0 0 var(--s6); }
.split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--s12); align-items: start; margin-bottom: var(--s12); }
.split.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); }
.split.narrow-first { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.aside { border-left: 1px solid var(--divider); padding-left: var(--s6); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── Home ─────────────────────────────────────────────────────────────── */
/* Photo sits inside the page measure, aligned with the header's content edges. */
.hero { max-width: var(--measure); margin: var(--s12) auto 0; padding: 0 var(--s6); }
.hero img {
  width: 100%; height: auto; background: #0d0f1c; border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(32, 31, 29, .08), 0 12px 32px -12px rgba(32, 31, 29, .35);
}
.home { max-width: 700px; padding-top: var(--s12); }
.about { font-size: 20px; line-height: 1.75; margin-bottom: var(--s8); }
.book { font-size: 16px; color: var(--soft); border-top: 1px solid var(--divider); padding-top: var(--s4); }

/* ── Buttons & cards ──────────────────────────────────────────────────── */
.buttons { display: flex; flex-wrap: wrap; gap: var(--s3); }
.btn {
  display: inline-flex; align-items: center; font-family: var(--font-heading); font-weight: 600;
  font-size: 16px; line-height: 1.2; text-decoration: none; padding: var(--s2) var(--s4);
  border: 1px solid transparent; border-radius: var(--radius); color: var(--accent-700);
}
.btn-primary { border-color: var(--accent); }
.btn:hover { background: rgba(182, 130, 53, .12); text-decoration: none; }
.card { border: 1px solid var(--divider); border-radius: var(--radius); padding: var(--s4); }
.card-kicker { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-700); }
.card ul { margin: var(--s3) 0 0; padding: 0 0 0 var(--s4); display: grid; gap: var(--s2); font-size: 15px; line-height: 1.6; }

/* ── Ruled lists (syllabus, weeks, talks, writings) ───────────────────── */
.ruled { list-style: none; margin: 0 0 var(--s12); padding: 0; border-top: 1px solid var(--divider); }
.ruled > li { border-bottom: 1px solid var(--divider); padding: var(--s4) 0; }
.row3 { display: grid; grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s6); align-items: baseline; }
.row3.wide { grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1.2fr); }
.num { font-family: var(--font-heading); font-size: 22px; color: var(--accent); font-variant-numeric: tabular-nums; }
.t22 { font-family: var(--font-heading); font-size: 22px; line-height: 1.25; }
.small { font-size: 15px; line-height: 1.6; color: var(--soft); }
.when { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-700); }
.where { display: block; font-size: 14px; color: var(--muted); margin-top: var(--s1); }

.talk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--s6); }
.ruled > li.talk { padding: var(--s6) 0; }
.talk h3 { font-size: 24px; line-height: 1.25; }
.talk .who { display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-700); margin-top: var(--s2); }
.talk .abstract { font-size: 16px; line-height: 1.7; color: var(--soft); margin: 0; }

blockquote.pull {
  margin: 0; border-left: 1px solid var(--accent); padding: var(--s1) 0 var(--s1) var(--s6);
  font-family: var(--font-heading); font-size: 26px; line-height: 1.4; color: var(--strong);
}
table.marks { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.marks td { padding: var(--s2) 0; font-size: 16px; border-bottom: 1px solid var(--divider); }
table.marks td + td { text-align: right; color: var(--muted); }

/* Past papers: a row of year links */
.papers { list-style: none; margin: 0 0 var(--s3); padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
.papers a {
  display: block; text-align: center; padding: var(--s2) 0; font-family: var(--font-heading); font-size: 22px;
  font-variant-numeric: tabular-nums; text-decoration: none; border: 1px solid var(--divider); border-radius: var(--radius);
}
.papers a:hover { border-color: var(--accent); background: rgba(182, 130, 53, .08); }

/* ── Archive (native <details>, no JavaScript) ────────────────────────── */
.archive { border-top: 1px solid var(--divider); }
.archive details { border-bottom: 1px solid var(--divider); }
.archive summary {
  list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); padding: var(--s4) 0; font-family: var(--font-heading);
}
.archive summary::-webkit-details-marker { display: none; }
.archive summary:hover { color: var(--accent-700); }
.archive .year { font-size: 30px; font-variant-numeric: tabular-nums; }
.archive .count { font-family: var(--font-body); font-size: 14px; color: var(--muted); margin-right: var(--s4); }
.archive .sign { font-size: 24px; color: var(--accent); }
.archive .sign::before { content: "+"; }
.archive details[open] .sign::before { content: "−"; }
.archive ol { list-style: none; margin: 0 0 var(--s6); padding: var(--s6) 0 0; border-top: 1px solid var(--divider); display: grid; gap: var(--s6); }
.archive .talk h3 { font-size: 22px; }
.archive .talk .abstract { font-size: 15px; }

/* ── Writings ─────────────────────────────────────────────────────────── */
.ruled > li.work { padding: var(--s6) 0; }
.work .title {
  font-family: var(--font-heading); font-size: 26px; line-height: 1.28; color: var(--text);
  text-decoration: none; border-bottom: 1px solid var(--accent-300);
}
.work .title:hover { color: var(--accent-800); border-bottom-color: var(--accent); }
.work .authors { display: block; font-size: 15px; line-height: 1.55; color: var(--muted); margin-top: var(--s2); }
.work .meta { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; margin-top: var(--s1); }
.work .venue { font-size: 15px; font-style: italic; color: var(--soft); }
.work .note { font-size: 16px; line-height: 1.65; color: var(--soft); margin: var(--s2) 0 0; max-width: 46em; text-wrap: pretty; }
.tag {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--divider); border-radius: 2px; padding: 2px 7px;
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer { border-top: 1px solid var(--divider); margin-top: var(--s12); }
.site-footer .inner {
  max-width: var(--measure); margin: 0 auto; padding: var(--s6);
  display: flex; flex-wrap: wrap; gap: var(--s4); justify-content: space-between; font-size: 14px; color: var(--muted);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s4); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .split, .split.even, .split.narrow-first, .feature { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .aside { border-left: 0; border-top: 1px solid var(--divider); padding-left: 0; padding-top: var(--s6); }
}
@media (max-width: 700px) {
  main { padding-top: var(--s8); }
  .justify { text-align: left; }
  .display { font-size: 48px; }
  .page-title { font-size: 40px; }
  .section-title, .feature h2 { font-size: 30px; }
  .lede { font-size: 21px; }
  blockquote.pull { font-size: 21px; padding-left: var(--s4); }
  .row3, .row3.wide, .talk { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .feature { padding: var(--s6); }
}
@media (max-width: 700px) {
  .hero { margin-top: var(--s6); padding: 0 var(--s4); }
}
@media (max-width: 520px) {
  .site-header .inner, main, .site-footer .inner { padding-left: var(--s4); padding-right: var(--s4); }
  .hero { margin-top: 0; padding: 0; }
  .hero img { border-radius: 0; box-shadow: none; }
  .site-nav { gap: var(--s3); flex-wrap: wrap; }
  .site-nav a { font-size: 13px; letter-spacing: .06em; }
}
@media print {
  .site-header { position: static; }
  .archive details { display: block; }
}