/* Shared by the homepage and every article page. */
:root {
  --bg: #fbfaf7;
  --bg-2: #f3f1ec;
  --ink: #1b1a18;
  --ink-2: #5f5c56;
  --ink-3: #706c65;
  --line: #e6e2da;
  --accent: #c8372d;
  --pen: #c8372d;
  --hand: "Caveat", "Bradley Hand", cursive;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--bg); color: var(--ink); font: 400 16.5px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--pen); outline-offset: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; top: 8px; left: 16px; padding: 8px 12px; background: var(--bg); z-index: 10; transform: translateY(-160%); }
.skip:focus { transform: none; }
::selection { background: #dbe7e2; }

.col { max-width: 680px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--ink-2); }
.small { font: 400 13px/1.4 var(--mono); color: var(--ink-3); letter-spacing: .01em; }
.link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; transition: text-decoration-color .2s; }
.link:hover { text-decoration-color: var(--ink); }

/* header */
.top { display: flex; justify-content: space-between; align-items: center; padding: 28px 0; }
.top .name { font-weight: 500; }
.top nav { display: flex; gap: 22px; }
.top nav a { color: var(--ink-2); transition: color .2s; }
.top nav a:hover { color: var(--ink); }
@media (max-width: 560px) {
  .top { align-items: flex-start; gap: 20px; }
  .top .name { white-space: nowrap; }
  .top nav { justify-content: flex-end; flex-wrap: wrap; gap: 4px 16px; }
  .top nav a { padding: 6px 0; }
}

/* footer */
.foot { margin-top: 120px; padding: 28px 0 48px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot nav { display: flex; gap: 20px; }
.foot a { color: var(--ink-2); } .foot a:hover { color: var(--ink); }

/* the red pen: handwritten margin notes that write themselves in */
.col { position: relative; }
.note { font: 500 21px/1.15 var(--hand); color: var(--pen); margin: 6px 0 4px; clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.45,.05,.3,1); }
.note.on { clip-path: inset(-10px -10px -10px -10px); }
.note a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (min-width: 1180px) {
  .note { position: absolute; left: calc(100% + 28px); width: 220px; margin: 0; transform: rotate(-2deg); transform-origin: 0 0; }
  .note::before { content: "←"; margin-right: 6px; }
}

/* gentle entrance */
@media (prefers-reduced-motion: no-preference) {
  .fade { opacity: 0; transform: translateY(8px); animation: fade .7s ease forwards; animation-delay: calc(var(--i, 0) * 70ms); }
  @keyframes fade { to { opacity: 1; transform: none; } }
}