/* the reading pages (/about, /work, /writing, /reading): the library's words as plain text.
   Same palette and serif as the hall; one column, left-aligned, hairlines only. */

:root {
  --bg:     #0d0b09;
  --ink:    #ece4d4;
  --dim:    #b9af9c;
  --stone:  #8f8778;
  --gilt:   #cfae72;
  --rule:   rgba(236, 228, 212, 0.14);
  --serif:  'EB Garamond', 'Iowan Old Style', Georgia, serif;
  --sans:   'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pad:    clamp(22px, 6vw, 96px);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body.text { font: 19px/1.6 var(--serif); letter-spacing: -0.004em; color: var(--ink); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100dvh;
  display: flex; flex-direction: column; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
::selection { background: rgba(207, 174, 114, .32); color: inherit; }
:focus-visible { outline: 1px solid var(--gilt); outline-offset: 3px; }

.t-head, .t-main, .t-foot { width: 100%; max-width: 860px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.t-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 14px 28px;
  padding-top: 34px; padding-bottom: 34px; }
.t-name { font: 400 20px/1 var(--serif); letter-spacing: .04em; }
.t-head nav { display: flex; gap: 22px; font: 400 13px/1 var(--sans); color: var(--dim); }
.t-head nav a { transition: color .3s ease; }
.t-head nav a:hover, .t-head nav a[aria-current] { color: var(--ink); }
.t-head nav a[aria-current] { box-shadow: 0 1px 0 var(--gilt); }

.t-main { flex: 1; padding-top: 4vh; padding-bottom: 12vh; }
h1 { font: 400 clamp(34px, 5vw, 48px)/1.1 var(--serif); letter-spacing: -.01em; margin-bottom: 28px; }
h2 { font: 400 26px/1.2 var(--serif); margin: 56px 0 14px; }
h2 span { display: block; margin-top: 6px; font: italic 400 18px/1.3 var(--serif); color: var(--gilt); }
h3 { font: 500 20px/1.3 var(--serif); }
p + p { margin-top: 6px; }
.t-dim, .t-note { color: var(--stone); }
.t-note { font-style: italic; margin-top: -12px; }
.t-list li { padding: 10px 0; border-top: 1px solid var(--rule); color: var(--dim); }
.t-list li:last-child { border-bottom: 1px solid var(--rule); }
.t-list b { font-weight: 500; color: var(--ink); }
.t-list i { color: var(--stone); }
.t-list a, .t-link, .t-ask, .t-more a, .t-foot a { box-shadow: 0 1px 0 rgba(207, 174, 114, .45); transition: box-shadow .3s ease, color .3s ease; }
.t-list a:hover, .t-link:hover, .t-ask:hover, .t-more a:hover, .t-foot a:hover { box-shadow: 0 1px 0 var(--gilt); color: #fff; }
.t-link { display: inline-block; margin-top: 12px; font: italic 400 17px/1.3 var(--serif); color: var(--dim); }

.t-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 22px; margin: 8px 0 8px;
  padding: 22px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.t-nums b { display: block; font: 400 30px/1 var(--serif); color: var(--gilt); }
.t-nums span { display: block; margin-top: 8px; font: 400 13px/1.4 var(--sans); color: var(--stone); }

.t-about { display: grid; grid-template-columns: 220px 1fr; gap: 44px; align-items: start; }
.t-photo { width: 220px; aspect-ratio: 470 / 630; object-fit: cover; filter: saturate(.9); }
.t-roles li { font: 400 21px/1.45 var(--serif); }
.t-proof { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 18px 0 22px; font: italic 400 17px/1.4 var(--serif); color: var(--gilt); }
.t-about p { color: var(--dim); }
.t-more { margin-top: 22px !important; }

.t-essays li { padding: 18px 0; border-top: 1px solid var(--rule); }
.t-essays li:last-child { border-bottom: 1px solid var(--rule); }
.t-essays p { color: var(--dim); }
.t-essays .t-dim { color: var(--stone); font-size: 17px; }
.t-ask { display: inline-block; margin-top: 10px; font: 400 13px/1.4 var(--sans); color: var(--dim); }

.t-books li { display: grid; grid-template-columns: 64px 1fr; gap: 22px; padding: 22px 0; border-top: 1px solid var(--rule); }
.t-books li:last-child { border-bottom: 1px solid var(--rule); }
.t-books img { width: 64px; aspect-ratio: 2 / 3; object-fit: cover; }
.t-books h2 { margin: 0 0 4px; font-size: 22px; }
.t-books .t-dim { font-size: 16px; margin-bottom: 6px; }
.t-books p:not(.t-dim) { color: var(--dim); }

.t-foot { display: flex; flex-wrap: wrap; gap: 12px 26px; padding-top: 28px; padding-bottom: 40px;
  background: linear-gradient(var(--rule), var(--rule)) no-repeat var(--pad) 0 / calc(100% - 2 * var(--pad)) 1px;
  font: 400 13px/1.4 var(--sans); color: var(--dim); }
.t-foot a:first-child { font: italic 400 16px/1.3 var(--serif); }

@media (max-width: 640px) {
  body.text { font-size: 18px; }
  .t-about { grid-template-columns: 1fr; gap: 26px; }
  .t-photo { width: 160px; }
  .t-books li { grid-template-columns: 52px 1fr; gap: 16px; }
  .t-books img { width: 52px; }
  .t-head nav { gap: 18px; }
}