/* Shared by /writing and every post under it. */
:root{--paper:#fff;--ink:#14140f;--muted:#6f6d67;--hair:#e6e5e1;--g-brand:linear-gradient(100deg,#7dd629,#16c79f 45%,#2b5cff);--sans:"Figtree",ui-sans-serif,system-ui,sans-serif;--serif:"Newsreader",Georgia,"Times New Roman",serif;--mono:"JetBrains Mono",ui-monospace,monospace;--col:700px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:var(--paper);color:var(--ink);font-family:var(--serif);font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
main{flex:1}
a{color:inherit}

/* Header and footer share one frame so their edges line up. */
.top,footer{padding-inline:24px}
.top .in,footer .in{max-width:1112px;margin:0 auto}
.top .in{height:64px;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:var(--sans);font-weight:500;font-size:17px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-decoration:none}
.links a{display:inline-block;padding-block:13px;font-family:var(--sans);font-size:15.5px;font-weight:400;color:var(--ink);text-decoration:none;margin-left:30px}
.links a:hover,.links a[aria-current]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

.col{max-width:var(--col);margin:0 auto;padding-inline:24px}
header.post{text-align:center;padding-top:72px}
h1{font-family:var(--sans);font-weight:600;font-size:clamp(32px,4.6vw,48px);line-height:1.1;letter-spacing:-.025em;margin:0 auto;max-width:20ch;text-wrap:balance}
.byline{font-family:var(--sans);font-size:16px;margin-top:28px}
.date{font-family:var(--sans);font-size:15px;color:var(--muted);margin-top:6px}
.hero{margin-top:52px}
.hero img{display:block;width:100%;height:auto;border-radius:6px}

article{padding-top:52px;padding-bottom:24px;font-size:21px;line-height:1.6;font-weight:430}
article p{margin:0 0 1.1em}
article h2{font-family:var(--sans);font-weight:600;font-size:28px;line-height:1.22;letter-spacing:-.015em;margin:2.1em 0 .65em}
figure{margin:2em 0 2.2em}
figure img{display:block;width:100%;height:auto}
figcaption{font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--muted);text-align:center;max-width:56ch;margin:14px auto 0}
figcaption b{color:var(--ink);font-weight:600}

.refs{margin-top:3em;padding-top:1.4em;border-top:1px solid var(--hair)}
.refs h2{margin-top:0}
.refs ul{list-style:none;margin:0;padding:0}
.refs li{font-size:16.5px;line-height:1.5;font-weight:400;padding-left:1.6em;text-indent:-1.6em;margin-bottom:.7em}
.refs a{text-decoration-color:var(--hair);text-underline-offset:3px}

.index{padding-top:72px;padding-bottom:40px}
.index h1{text-align:left;margin:0 0 40px}
.entry{display:block;text-decoration:none;padding:28px 0;border-top:1px solid var(--hair)}
.entry .date{margin:0 0 8px}
.entry h2{font-family:var(--sans);font-weight:600;font-size:26px;line-height:1.2;letter-spacing:-.015em;margin:0}
.entry p{font-size:19px;line-height:1.5;color:var(--muted);margin:10px 0 0}
.tag{display:inline-block;font-weight:600;color:var(--ink);margin-right:10px}
.entry:hover h2{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

footer{margin-top:72px;padding-bottom:40px}
footer .in{border-top:1px solid var(--hair);padding-top:12px;display:flex;justify-content:space-between;align-items:center;gap:4px 16px;flex-wrap:wrap}
footer a{display:inline-block;padding-block:13px;font-family:var(--sans);font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;margin-right:24px}
footer a:hover{color:var(--ink)}
footer .fine{font-family:var(--sans);font-size:13px;color:var(--muted)}

.refs li{overflow-wrap:anywhere}

/* Phones: 19px body, a full-bleed figure so the sprites stay legible, smaller references and index titles. */
@media (max-width:600px){
  article{font-size:19px;padding-top:40px}
  header.post,.index{padding-top:44px}
  .hero{margin-top:32px}
  .links a{margin-left:22px}
  figure{margin-inline:-24px}
  figure img{border-radius:0}
  figcaption{font-size:14px;padding-inline:24px}
  article h2{font-size:24px}
  .refs li{font-size:15.5px;padding-left:1.3em;text-indent:-1.3em}
  .entry h2{font-size:22px}
  .entry p{font-size:17px}
  footer{margin-top:56px}
  footer .fine{font-size:12px}
}