/* Dispatches: warm paper, EB Garamond at reading size, hairlines. The wordmark is the only Italiana. */
:root {
  --paper: #F4EFE7; --mat: #FBF8F2; --ink: #1F1A17; --ink-2: #4A413B; --muted: #6E655D; --hair: rgba(31, 26, 23, .14);
  --serif: "EB Garamond", Georgia, serif; --ui: "Geist", "Helvetica Neue", Arial, sans-serif; --display: "Italiana", Didot, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper: #161210; --mat: #1E1916; --ink: #F1EBE2; --ink-2: #D8CFC4; --muted: #A9A097; --hair: rgba(241, 235, 226, .14); color-scheme: dark; } }
:root[data-theme="dark"] {
  --paper: #161210; --mat: #1E1916; --ink: #F1EBE2; --ink-2: #D8CFC4; --muted: #A9A097; --hair: rgba(241, 235, 226, .14); color-scheme: dark; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 19px/1.65 var(--serif); -webkit-text-size-adjust: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
img { display: block; max-width: 100%; height: auto; }
.cap { font: 500 11px/1.4 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.wm { font: 400 15px/1 var(--display); letter-spacing: .26em; text-decoration: none; white-space: nowrap; }
.wm.big { font-size: clamp(30px, 8vw, 46px); letter-spacing: .2em; margin: 0 -.2em 0 0; }

/* Link-in-bio index: the Instagram grid, then a plain list. */
.mast { display: grid; justify-items: center; gap: 10px; text-align: center; padding: max(40px, env(safe-area-inset-top)) 16px 28px; }
.mast .cap { margin: 0; }
.lede { margin: 4px 0 0; max-width: 30ch; font-style: italic; color: var(--ink-2); }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; max-width: 935px; margin: 0 auto; }
.tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mat); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.tile span { position: absolute; inset: auto 0 0 0; padding: 28px 10px 9px; font: 500 12px/1.3 var(--ui); color: #F1EBE2;
  background: linear-gradient(0deg, rgba(20, 16, 15, .8), rgba(20, 16, 15, 0)); opacity: 0; transition: opacity .3s ease; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.025); }
.tile:hover span, .tile:focus-visible span { opacity: 1; }
@media (hover: none) { .tile span { display: none; } }
.list { list-style: none; margin: 36px auto 0; padding: 0 16px; max-width: 640px; }
.list li { border-top: 1px solid var(--hair); }
.list li:last-child { border-bottom: 1px solid var(--hair); }
.list a { display: grid; gap: 2px; padding: 14px 0; text-decoration: none; }
.list strong { font-weight: 400; font-size: 21px; line-height: 1.3; }

/* One dispatch. */
.bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left));
  font: 500 13px/1 var(--ui); border-bottom: 1px solid var(--hair); }
.bar a:first-child { text-decoration: none; }
.hero { margin: 0 auto; max-width: 760px; }
@media (min-width: 800px) {
  .hero { margin-top: 40px; padding: 28px; width: fit-content; background: var(--mat); box-shadow: 0 0 0 1px var(--hair); }
  .hero img { max-height: calc(100vh - 200px); width: auto; }
}
.post { max-width: 640px; margin: 0 auto; padding: 28px max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.post > .cap { margin: 0 0 10px; }
.post h1 { margin: 0; font: 400 clamp(34px, 6vw, 48px)/1.08 var(--serif); letter-spacing: -.005em; text-wrap: balance; }
.dek { margin: 14px 0 0; font-size: 21px; line-height: 1.5; font-style: italic; color: var(--ink-2); }
.facts { margin: 28px 0 8px; display: grid; border-top: 1px solid var(--hair); }
.facts div { display: grid; grid-template-columns: 7.5em 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.facts dt { font: 500 11px/1.9 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; font-size: 17px; line-height: 1.5; }
.facts small { display: block; margin-top: 3px; font-size: 15px; color: var(--muted); }
@media (max-width: 420px) { .facts div { grid-template-columns: 1fr; gap: 2px; } }
.pending { margin: 22px 0 0; font: 400 14px/1.5 var(--ui); color: var(--muted); }
.post section { margin-top: 30px; }
.post section > p { margin: 0 0 1.05em; }
.post h2 { margin: 44px 0 12px; font: 400 27px/1.2 var(--serif); }
.post .back p { font-style: italic; color: var(--ink-2); }
.post .sources { margin-top: 48px; font: 400 14px/1.55 var(--ui); color: var(--ink-2); }
.post .sources h2 { font: 500 11px/1.4 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.post .sources ul { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; }
.post .sources a { overflow-wrap: anywhere; }
.pager { max-width: 640px; margin: 56px auto 0; padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pager a { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--hair); text-decoration: none; font-size: 18px; line-height: 1.3; }
.pager .older { grid-column: 2; text-align: right; }
.foot { margin-top: 64px; padding: 32px 16px max(40px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 10px; border-top: 1px solid var(--hair);
  font: 400 13px/1.4 var(--ui); color: var(--muted); }
.foot p { margin: 0; }

@media (prefers-reduced-motion: reduce) { .tile img, .tile span { transition: none; } }