@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper: #f2f3ef;
  --paper-2: #ebece6;
  --ink: #1c1e1b;
  --ink-soft: #4a4d47;
  --muted: #82867d;
  --hairline: #d9dbd2;
  --accent: #2f5d8a;
  --accent-soft: #6e7bb8;
  --accent-warm: #b8748a;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  padding: 56px 24px 64px;
  background:var(--paper);
  color:var(--ink-soft);
  font-family:'IBM Plex Sans', sans-serif;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

a{
  color:var(--accent);
  text-decoration:none;
  border-bottom:1px solid rgba(47,93,138,0.3);
  transition:border-color .15s ease;
}
a:hover{ border-color:var(--accent); }

/* ---------- content blocks ---------- */

.content{
  max-width:1040px;
  margin:0 auto 8px;
  padding: 28px 24px;
}

.content-title{
  text-align:center;
  padding-top:8px;
  padding-bottom:8px;
}

.content-title h1{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(28px, 4.4vw, 38px);
  line-height:1.2;
  color:var(--ink);
  margin:0 0 14px;
  letter-spacing:-0.01em;
}

.content-title h3{
  font-family:'IBM Plex Mono', monospace;
  font-weight:400;
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 22px;
}

#authors table{
  margin:0 auto;
}
.content-title table{
  margin:0 auto;
  width:auto !important;
  table-layout:auto !important;
}
#authors th{
  font-weight:400;
  padding:0 10px;
}
#authors th a{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:14.5px;
  font-weight:500;
  color:var(--ink);
  border-bottom:1px solid transparent;
}
#authors th a:hover{ color:var(--accent); border-color:var(--accent); }
#authors sup{ color:var(--muted); font-size:10px; }

.content-title p#authors{
  font-family:'IBM Plex Sans', sans-serif;
  font-size:14px;
  color:var(--muted);
  margin:14px 0 6px;
}

/* ---------- headings within content ---------- */

.content h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:22px;
  color:var(--ink);
  border-bottom:1px solid var(--hairline);
  padding-bottom:10px;
  margin:0 0 18px;
}

.content h4{
  font-family:'IBM Plex Mono', monospace;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.02em;
  color:var(--muted);
  margin-top:14px;
}

/* ---------- figures ---------- */

figure{
  margin:0 auto 8px;
  display:block;
  text-align:center;
}

.content video,
.content img{
  display:block;
  margin-left:auto;
  margin-right:auto;
}

.content table{
  margin-left:auto;
  margin-right:auto;
}

figcaption{
  font-family:'IBM Plex Sans', sans-serif;
  font-style:normal;
  font-size:13.5px;
  color:var(--ink-soft);
  line-height:1.6;
  margin-top:14px;
}
figcaption b{ color:var(--ink); font-weight:500; }

.content img{ border-radius:6px; }

/* ---------- teaser / pdf+bibtex box ---------- */

#teaser{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--muted);
}
#teaser img{ border:1px solid var(--hairline); }
#teaser strong{ color:var(--accent); font-weight:500; }

/* ---------- tables used as figure captions (ff4d videos) ---------- */

.content table td{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.03em;
}

/* ---------- misc text ---------- */

.content p{ font-size:15px; }

.content em{ color:var(--ink-soft); }

/* footer credit line */

body > div[style*="text-align: center"]{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--muted);
  margin-top:24px;
}