/* ==========================================================================
   Thomas Bittner - academic website
   Hand-written static CSS. No build step, no external dependencies,
   no web fonts (system stacks only, so pages render identically offline
   and on the UB acsu server).

   Contents
     1. Design tokens
     2. Base elements
     3. Layout primitives
     4. Masthead and navigation
     5. Page headers and section headers
     6. Home page
     7. Research page
     8. Publications
     9. CV
    10. Footer
    11. Print
   ========================================================================== */

/* --- 1. Design tokens ---------------------------------------------------- */

:root {
  --ink:          #1a1917;
  --ink-soft:     #4b4943;
  --ink-faint:    #75716a;
  --rule:         #e5e1d9;
  --rule-strong:  #cec8bb;
  --paper:        #fdfcfa;
  --paper-raised: #f7f4ee;
  --paper-sunk:   #f1ede4;
  --accent:       #1f4e79;
  --accent-soft:  #e7eef6;
  --accent-hover: #143753;
  --accent-line:  #b9cee2;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
           Arial, sans-serif;
  --mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
           "Liberation Mono", monospace;

  --measure: 42rem;   /* readable prose column      */
  --wide:    66rem;   /* page rail                  */
  --shadow:  0 1px 2px rgba(26, 25, 23, 0.04),
             0 6px 20px -12px rgba(26, 25, 23, 0.18);
  --radius:  4px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:          #eae7e1;
    --ink-soft:     #b8b4ac;
    --ink-faint:    #918d85;
    --rule:         #322f2b;
    --rule-strong:  #494540;
    --paper:        #161513;
    --paper-raised: #1e1d1a;
    --paper-sunk:   #242220;
    --accent:       #93b7dc;
    --accent-soft:  #1c2936;
    --accent-hover: #b8d2ec;
    --accent-line:  #35506a;
    --shadow:  0 1px 2px rgba(0, 0, 0, 0.35),
               0 6px 20px -12px rgba(0, 0, 0, 0.7);
  }
}

/* --- 2. Base ------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.22;
  color: var(--ink);
  margin: 0 0 0.5em;
  letter-spacing: -0.008em;
  text-wrap: balance;
}

h1 { font-size: 2.2rem;  }
h2 { font-size: 1.55rem; }
h3 { font-size: 1.14rem; }

p { margin: 0 0 1.15em; }

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.12s ease;
}
a:hover { color: var(--accent-hover); }

strong { font-weight: 600; }

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

::selection { background: var(--accent-soft); }

/* Keyboard focus: visible, never on mouse click */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #fff;
  padding: 0.6rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* --- 3. Layout primitives ------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 1.6rem;
}

main { padding-bottom: 4.5rem; }

/* A block that keeps to the reading measure inside a full-rail section. */
.measure { max-width: var(--measure); }

/* A section whose content is a grid and so may exceed the reading measure. */
.section-wide { max-width: none; }

.stack > * + * { margin-top: 1.1em; }

/* Small capitals label used above headings and beside metadata. */
.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.55rem;
}

/* --- 4. Masthead and navigation ------------------------------------------ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.masthead-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 2rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.wordmark {
  display: block;
  font-family: var(--serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.005em;
  line-height: 1.2;
  white-space: nowrap;
}
.wordmark:hover { color: var(--accent); }

.wordmark .wordmark-sub {
  display: block;
  font-family: var(--sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: 0.2rem;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.35rem;
  font-size: 0.93rem;
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
}
.site-nav a:hover {
  color: var(--accent);
  background: var(--accent-soft);
}
.site-nav a[aria-current="page"] {
  color: var(--ink);
  background: var(--paper-raised);
  border-color: var(--rule);
}

/* --- 5. Page headers and section headers --------------------------------- */

.page-head {
  padding: 3.4rem 0 2.2rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.8rem;
}
.page-head h1 {
  margin-bottom: 0.4rem;
  font-size: clamp(2rem, 1.5rem + 1.7vw, 2.6rem);
}

.page-head .standfirst {
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 1.06rem;
  margin: 0;
}

/* Heading block that opens a top-level section on home / research. */
.section-head { margin-bottom: 1.8rem; max-width: var(--measure); }
.section-head h2 { font-size: 1.6rem; margin-bottom: 0.4rem; }
.section-head p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1rem;
}

.block { padding: 3.2rem 0; border-top: 1px solid var(--rule); }

/* --- 6. Home ------------------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.6rem;
  padding: 3.6rem 0 3rem;
}

@media (min-width: 56rem) {
  .hero {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
  }
}

/* Drop an <img class="portrait"> into the hero's second column to run the
   text and a photograph side by side. */
.portrait {
  width: 100%;
  max-width: 14rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--paper-raised);
}

.hero h1 {
  font-size: clamp(2.3rem, 1.5rem + 2.7vw, 3.15rem);
  margin-bottom: 0.55rem;
}

.hero .role {
  font-size: 1.04rem;
  color: var(--ink-soft);
  margin: 0 0 1.7rem;
  line-height: 1.5;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}
.hero .role strong { color: var(--ink); font-weight: 600; }

.lede {
  font-size: 1.14rem;
  line-height: 1.6;
  color: var(--ink);
}

/* Bordered aside panel, used for the contact rail and for callouts. */
.panel {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.panel + .panel { margin-top: 1.2rem; }
.panel h2, .panel h3 {
  font-family: var(--sans);
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.9rem;
}
.panel p:last-child { margin-bottom: 0; }

/* Identity / contact rail */
.idents {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.85rem;
  font-size: 0.95rem;
}
.idents li { color: var(--ink); line-height: 1.4; }
.idents .label {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.15rem;
}
.idents a { color: var(--accent); text-decoration: none; }
.idents a:hover { text-decoration: underline; }

/* A short list of current facts: "in press", "under review", and the like. */
.now {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
  font-size: 0.93rem;
  color: var(--ink-soft);
}
.now li {
  display: grid;
  grid-template-columns: 0.55rem minmax(0, 1fr);
  gap: 0.7rem;
  line-height: 1.45;
}
.now li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--accent-line);
  margin-top: 0.55rem;
}
.now strong { color: var(--ink); font-weight: 600; }

/* Research theme cards */
.themes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.6rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: theme;
}

.theme {
  border-top: 2px solid var(--rule-strong);
  padding-top: 0.95rem;
  counter-increment: theme;
}
.theme h3 {
  margin-bottom: 0.35rem;
  font-size: 1.06rem;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.theme h3::before {
  content: counter(theme, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--ink-faint);
  letter-spacing: 0;
}
.theme p {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* Text link that reads as a next step. */
.more {
  display: inline-block;
  font-size: 0.93rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  padding-bottom: 1px;
}
.more:hover { border-bottom-color: currentColor; }
.more::after { content: " \2192"; }

/* --- 7. Research page ---------------------------------------------------- */

.prose { max-width: var(--measure); }
.prose h2 {
  font-size: 1.5rem;
  margin-top: 2.8rem;
  margin-bottom: 0.6rem;
}
.prose h3 {
  font-size: 1.08rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0;
  margin-top: 1.9rem;
  margin-bottom: 0.35rem;
}
.prose > h2:first-child,
.prose > h3:first-child { margin-top: 0; }
.prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.25rem; }
.prose li { margin-bottom: 0.4em; }

/* Emphasised opening paragraph of a research section. */
.prose .lead {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink);
}

/* Aside set off from the argument: an example, a caveat, a pointer. */
.callout {
  border-left: 2px solid var(--accent-line);
  background: var(--paper-raised);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.3rem;
  margin: 1.8rem 0;
  font-size: 0.96rem;
  color: var(--ink-soft);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }

/* Dated arc of the work: one row per period. */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--rule-strong);
}
.timeline li {
  position: relative;
  padding: 0 0 1.9rem 1.6rem;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -0.4rem;
  top: 0.62rem;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--rule-strong);
}
.timeline .when {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.1rem;
}
.timeline h3 {
  font-family: var(--sans);
  font-size: 1.03rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 0.3rem;
}
.timeline p {
  margin: 0;
  font-size: 0.96rem;
  color: var(--ink-soft);
  line-height: 1.55;
}

/* Strand cards: the working parts of the current programme. */
.strands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.3rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.strand {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-raised);
  padding: 1.25rem 1.35rem;
}
.strand h3 {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 0.4rem;
}
.strand p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.strand .tag {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
}

/* Keyword row under a heading. */
.keywords {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.6rem;
  padding: 0;
}
.keywords li {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.12rem 0.7rem;
}

/* --- 8. Publications ----------------------------------------------------- */

/* In-page section index */
.toc {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.15rem 1.4rem;
  margin: 0 0 3rem;
}
.toc h2 {
  font-family: var(--sans);
  font-size: 0.71rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.75rem;
  font-weight: 600;
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.6rem;
  font-size: 0.95rem;
}
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc .count {
  color: var(--ink-faint);
  font-size: 0.85em;
  font-variant-numeric: tabular-nums;
}

.pubsection { margin-bottom: 3.6rem; }

.pubsection > h2 {
  font-size: 1.35rem;
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--rule-strong);
  margin-bottom: 0.4rem;
}

.section-note {
  font-size: 0.93rem;
  color: var(--ink-faint);
  margin: 0.75rem 0 1.7rem;
  max-width: var(--measure);
}

/* The reference list itself */
.pubs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pub {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 1.05rem 0.6rem 1.05rem 0;
  border-bottom: 1px solid var(--rule);
  max-width: calc(var(--measure) + 4.6rem);
  border-radius: var(--radius);
}
.pub:last-child { border-bottom: 0; }
.pub:target {
  background: var(--accent-soft);
  padding-left: 0.6rem;
}

/* Year gutter */
.pub .year {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  padding-top: 0.28rem;
  letter-spacing: -0.01em;
}

.pub .ref { margin: 0; }

.pub .title {
  font-weight: 600;
  color: var(--ink);
  display: block;
  margin-bottom: 0.15rem;
  line-height: 1.4;
}

.pub .authors,
.pub .venue {
  color: var(--ink-soft);
  font-size: 0.955rem;
}
.pub .venue { font-style: italic; }
.pub .venue .detail { font-style: normal; }

/* "Bittner, T." shown in ink so his position in the author list is scannable */
.pub .self { color: var(--ink); font-weight: 600; font-style: normal; }

.pub .status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  padding: 0.05rem 0.55rem;
  margin-left: 0.4rem;
  vertical-align: 2px;
  white-space: nowrap;
}

.pub .note {
  display: block;
  font-size: 0.89rem;
  color: var(--ink-faint);
  margin-top: 0.3rem;
}

/* Link pills */
.links {
  margin-top: 0.55rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.links a {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 0.14rem 0.6rem;
  white-space: nowrap;
}
.links a:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* --- 9. CV --------------------------------------------------------------- */

.cv-section { margin-bottom: 2.9rem; max-width: var(--measure); }

/* Sub-heading inside a CV section (e.g. "Concurrent research appointments") */
.cv-subhead {
  margin: 1.9rem 0 0.15rem;
  font-size: 1rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0;
}

.cv-section > h2 {
  font-size: 0.78rem;
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.2rem;
}

.entries { list-style: none; margin: 0; padding: 0; }

.entry {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 0.2rem 1.2rem;
  padding: 0.6rem 0;
}

.entry .when {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  padding-top: 0.2rem;
}
.entry .what { margin: 0; }
.entry .what strong { font-weight: 600; }
.entry .what .where {
  display: block;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

@media (max-width: 34rem) {
  .entry { grid-template-columns: minmax(0, 1fr); }
  .pub   { grid-template-columns: minmax(0, 1fr); }
  .pub .year { padding-top: 0; margin-bottom: 0.15rem; }
}

/* --- 10. Footer ---------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--rule);
  background: var(--paper-raised);
  padding: 2.2rem 0 3rem;
  font-size: 0.88rem;
  color: var(--ink-faint);
}
.site-foot p { margin: 0 0 0.35rem; }
.site-foot p:last-child { margin-bottom: 0; }
.site-foot a { color: var(--ink-soft); }

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.3rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.9rem;
}
.foot-nav a { text-decoration: none; color: var(--ink-soft); }
.foot-nav a:hover { color: var(--accent); text-decoration: underline; }

/* --- 11. Print ----------------------------------------------------------- */

@media print {
  :root {
    --ink: #000; --ink-soft: #222; --ink-faint: #444;
    --paper: #fff; --paper-raised: #fff; --paper-sunk: #fff;
    --rule: #bbb; --rule-strong: #888; --accent: #000;
    --accent-soft: #fff; --accent-line: #888;
    --shadow: none;
  }
  body { font-size: 10.5pt; line-height: 1.4; }
  .masthead, .site-nav, .site-foot, .toc, .links, .skip-link { display: none; }
  .page-head { padding-top: 0; }
  main { padding-bottom: 0; }
  .pub, .entry, .theme, .strand, .timeline li {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .pubsection > h2, .prose h2 { break-after: avoid; }
  a { color: #000; text-decoration: none; }
  .wrap { max-width: none; padding: 0; }
  .panel, .strand, .callout { border: 1px solid #bbb; background: #fff; }
}