/* ---------------------------------------------------------------------------
   The whole look of the site lives in this one file.
   Change a value here and every page changes with it. Nothing else styles
   anything, so there is exactly one place to look when something is off.
   --------------------------------------------------------------------------- */

:root{
  --paper:#faf7f2; --ink:#23211e; --muted:#6b6459;
  --rule:#e2dbd0; --accent:#9c4a2f; --accent-soft:#f0e6df;
  --measure:34rem;                 /* line length. the single most important number here */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans:ui-sans-serif,-apple-system,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#17161a; --ink:#e8e3da; --muted:#9a9287;
    --rule:#2e2b2f; --accent:#e08a5f; --accent-soft:#251f1e;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--serif);
  font-size:19px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  padding:clamp(2.5rem,9vw,7rem) 1.5rem 4rem;
  display:flex; justify-content:center;
}
main{width:100%; max-width:var(--measure)}

/* --- headings ------------------------------------------------------------ */
h1{
  font-size:clamp(2rem,6vw,2.6rem); line-height:1.1; margin:0 0 .2em;
  font-weight:600; letter-spacing:-.015em;
}
h2{font-size:1.32em; line-height:1.25; margin:2.4rem 0 .6rem; font-weight:600; letter-spacing:-.01em}
h3{font-size:1.08em; line-height:1.3; margin:2rem 0 .5rem; font-weight:600}

/* small-caps line under the title, used for the tagline and post dates */
.sub{
  margin:0 0 2.2rem; color:var(--muted);
  font-size:.82em; letter-spacing:.11em; text-transform:uppercase;
  font-family:var(--sans);
}

/* --- body ---------------------------------------------------------------- */
p{margin:0 0 1.15em}
em{color:var(--accent); font-style:italic}
strong{font-weight:600}
a{color:var(--accent); text-decoration:underline; text-underline-offset:.15em;
  text-decoration-thickness:.5px; text-decoration-color:var(--rule)}
a:hover, a:focus-visible{text-decoration-color:var(--accent)}
hr{border:0; border-top:1px solid var(--rule); margin:2.6rem 0 1.6rem}

ul,ol{margin:0 0 1.15em; padding-left:1.3em}
li{margin:0 0 .35em}

blockquote{
  margin:1.6rem 0; padding:0 0 0 1.1rem;
  border-left:2px solid var(--rule); color:var(--muted); font-style:italic;
}
blockquote p:last-child{margin-bottom:0}

code{font-family:var(--mono); font-size:.82em; background:var(--accent-soft);
  padding:.12em .35em; border-radius:3px}
pre{
  font-family:var(--mono); font-size:.78em; line-height:1.55;
  background:var(--accent-soft); border:1px solid var(--rule); border-radius:6px;
  padding:.9rem 1rem; overflow-x:auto; margin:1.6rem 0;
}
pre code{background:none; padding:0; font-size:1em}

img{max-width:100%; height:auto; display:block; border-radius:4px}
figure{margin:1.8rem 0}
figcaption{margin-top:.5rem; color:var(--muted); font-size:.82em;
  font-family:var(--sans); line-height:1.5}

table{width:100%; border-collapse:collapse; margin:1.6rem 0; font-size:.9em}
th,td{text-align:left; padding:.45em .6em; border-bottom:1px solid var(--rule)}
th{font-family:var(--sans); font-size:.82em; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); font-weight:500}

/* --- pill links (the row at the bottom of the homepage) ------------------ */
.links{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.55rem .5rem;
  font-family:var(--sans); font-size:.82rem; letter-spacing:.02em;
}
.links a{
  display:inline-block; padding:.42rem .8rem; border-radius:999px;
  background:var(--accent-soft); color:var(--ink);
  text-decoration:none; border:1px solid transparent;
  transition:border-color .15s ease, color .15s ease;
}
.links a:hover, .links a:focus-visible{border-color:var(--accent); color:var(--accent)}

/* --- the list of write-ups ----------------------------------------------- */
.entries{list-style:none; margin:0; padding:0}
.entries li{margin:0 0 1.6rem; padding:0}
.entries a{
  display:block; font-size:1.12em; font-weight:600;
  text-decoration:none; color:var(--ink); line-height:1.3;
}
.entries a:hover, .entries a:focus-visible{color:var(--accent)}
.entries time{
  display:block; margin-top:.25rem; color:var(--muted);
  font-family:var(--sans); font-size:.72rem;
  letter-spacing:.09em; text-transform:uppercase;
}
.entries .blurb{margin:.4rem 0 0; color:var(--muted); font-size:.92em}

/* --- back link at the top of a write-up ---------------------------------- */
.back{
  display:inline-block; margin:0 0 1.8rem;
  font-family:var(--sans); font-size:.75rem; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); text-decoration:none;
}
.back:hover, .back:focus-visible{color:var(--accent)}

footer{
  margin-top:3rem; color:var(--muted); font-size:.78rem;
  font-family:var(--sans); letter-spacing:.04em;
}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--accent)}

/* --- callouts: `> [!quote]` and `> [!note]` in a write-up ----------------- */
.pullquote{
  margin:2.8rem 0; padding:0; border:0;
  color:var(--accent); font-style:normal;
  font-size:1.28em; line-height:1.35; letter-spacing:-.012em;
  text-wrap:balance;
}
.pullquote p{margin:0 0 .4em}
.pullquote p:last-child{margin-bottom:0}

.note{
  margin:1.8rem 0; padding:.1rem 0 .1rem 1.1rem;
  border-left:2px solid var(--rule);
  color:var(--muted); font-size:.92em; font-style:italic;
}
.note p:last-child{margin-bottom:0}

/* --- footnotes ----------------------------------------------------------- */
/* the browser shrinks <sup> on its own, so size the sup, not the link inside it,
   or the two multiply and the number ends up too small to tap */
.footnote-ref{font-size:.68em; font-weight:500}
.footnote-ref a{
  font-family:var(--sans); font-size:1em;
  text-decoration:none; color:var(--accent); padding:0 .15em;
}
.footnotes-sep{margin:3.2rem 0 1.4rem}
.footnotes{
  font-family:var(--sans); font-size:.8rem; line-height:1.65; color:var(--muted);
}
.footnotes-list{margin:0; padding-left:1.4em}
.footnote-item{margin:0 0 .7em}
.footnote-item p{margin:0}
.footnote-backref{text-decoration:none; margin-left:.35em; color:var(--muted)}
.footnote-backref:hover{color:var(--accent)}