:root {
  --paper: #ffffff;
  --ink: #111111;
  --ink-2: #333333;
  --ink-3: #5c5c5c;
  --link: #2266aa;
  --accent: #a3156b;

  --u: 8px;
  --text: 560px;
  --gutter: calc(var(--u) * 3);
  --doodle-w: calc(var(--u) * 15);

  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Alegreya Sans', 'Gill Sans', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    url(../stata.jpg) center top / 101% auto no-repeat,
    url(../stata-2.png) center bottom / 101% auto no-repeat,
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: calc(var(--u) * 3);
  padding-inline: clamp(calc(var(--u) * 3), 6vw, calc(var(--u) * 6));
  padding-block: calc(var(--u) * 12) calc(var(--u) * 16);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.essay { font-style: italic; }
p, h1, h2, h3 { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
code { font-size: 0.9em; }

.page { display: flex; flex-direction: column; gap: calc(var(--u) * 12); max-width: var(--text); margin-inline: auto; }

header { display: flex; flex-direction: column; margin-bottom: calc(var(--u) * -6); }
h1 { font-family: var(--serif); font-weight: 700; font-size: 48px; line-height: calc(var(--u) * 7); color: var(--accent); margin-bottom: var(--u); }
.intro { color: #6b6058; font-size: 22px; line-height: calc(var(--u) * 3.5); text-wrap: balance; }
.contact { display: flex; flex-wrap: wrap; column-gap: calc(var(--u) * 2); padding-top: calc(var(--u) * 2); }

section { display: flex; flex-direction: column; gap: calc(var(--u) * 2); }
h2 { font-weight: 500; font-size: 13px; line-height: calc(var(--u) * 3); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

.list { display: flex; flex-direction: column; gap: calc(var(--u) * 4); }

.entry { display: grid; grid-template-columns: minmax(0, var(--text)); }
.entry > * { min-width: 0; }
.head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: calc(var(--u) * 2); font-weight: 400; font-size: inherit; }
.title { font-family: var(--serif); font-size: 20px; line-height: calc(var(--u) * 4); }
.title img { vertical-align: baseline; }
.year { font-size: 14px; color: var(--ink-3); font-variant-numeric: oldstyle-nums tabular-nums; }
.new { font-size: 14px; font-weight: 500; color: var(--accent); }
.desc { color: var(--ink-2); text-wrap: pretty; }
.desc + .desc { padding-top: var(--u); }
.links { display: flex; flex-wrap: wrap; column-gap: var(--u); padding-top: var(--u); }
.sep { color: var(--ink-3); }
.diamonds { letter-spacing: 0.15em; font-size: 0.9em; }

.children { display: flex; flex-direction: column; gap: var(--u); padding-left: calc(var(--u) * 4); padding-top: var(--u); }
.child-title { font-family: var(--serif); font-size: 16px; line-height: calc(var(--u) * 3); }
.children .year { padding-left: var(--u); }
.children .desc { font-size: 15px; }

.list.compact { gap: calc(var(--u) * 3); }
.list.compact .title { font-size: 17px; line-height: calc(var(--u) * 3); }
.list.compact .desc, .list.compact .links { font-size: 15px; }
.list.compact .links { padding-top: 0; }

.doodle { grid-row: 2; padding-block: var(--u); }
.doodle img { display: block; max-width: var(--doodle-w); height: auto; }
@media (min-width: 900px) {
  .entry.has-doodle { grid-template-columns: var(--text) var(--doodle-w); column-gap: var(--gutter); width: calc(var(--text) + var(--gutter) + var(--doodle-w)); }
  .entry.has-doodle > :not(.doodle) { grid-column: 1; }
  .entry.has-doodle .doodle { grid-column: 2; grid-row: 1 / span 4; padding-block: var(--u) 0; }
}

.earlier { font-family: var(--serif); font-size: 17px; line-height: calc(var(--u) * 4); }
.earlier .sep { padding-inline: var(--u); }

.entry:nth-child(5n+1) ::selection { background: #fa9; }
.entry:nth-child(5n+2) ::selection { background: #ffa; }
.entry:nth-child(5n+3) ::selection { background: #cfc; }
.entry:nth-child(5n+4) ::selection { background: #bef; }
.entry:nth-child(5n+5) ::selection { background: #ecf; }

footer { font-size: 15px; color: var(--ink-2); text-align: center; }
footer img { display: block; border: 0; margin: 0 auto var(--u); }
.gloss { color: var(--ink-3); font-style: italic; }