:root{
  --paper:#FFFFFF; --ink:#2A2723; --ink-2:#6E675E; --rule:#E7E3DC;
  --pen:#2B4FA8; --box:#2A2723; --hl:#FFF06A; --hl-ink:#2A2723; --stamp:#2A2723; --stamp-ink:#FFFFFF;
  --serif:"Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --hand:"Kalam", "Segoe Print", "Bradley Hand", "Comic Sans MS", cursive;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#172029; --ink:#ECE7DD; --ink-2:#9AA6B2; --rule:#2A3642; --box:#5E6E7E;
    --pen:#9CC3FF; --hl:rgba(255,222,92,.20); --hl-ink:#FFE27A; --stamp:#ECE7DD; --stamp-ink:#172029;
  }
}
:root[data-theme="dark"]{
  --paper:#172029; --ink:#ECE7DD; --ink-2:#9AA6B2; --rule:#2A3642; --box:#5E6E7E;
  --pen:#9CC3FF; --hl:rgba(255,222,92,.20); --hl-ink:#FFE27A; --stamp:#ECE7DD; --stamp-ink:#172029;
}
:root{ box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }
html{ scroll-padding-top:calc(env(safe-area-inset-top,0px) + 16px); }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--serif); font-size:19px; line-height:1.62; -webkit-font-smoothing:antialiased; }
a{ color:var(--pen); text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover{ text-decoration-thickness:2px; }
:focus-visible{ outline:2px dashed var(--pen); outline-offset:3px; }
.page{ max-width:980px; margin:0 auto; padding:0 24px; }
.col{ max-width:640px; }
.hand{ font-family:var(--hand); color:var(--pen); }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* header */
.top{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:28px 0 0; flex-wrap:wrap; }
.name{ font-size:22px; font-weight:600; color:var(--ink); text-decoration:none; letter-spacing:-.01em; }
.top nav{ display:flex; gap:20px; font-size:17px; }
.top nav a{ color:var(--ink-2); text-decoration:none; }
.top nav a[aria-current="page"]{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--pen); text-decoration-thickness:2px; }
.top nav a:hover{ color:var(--ink); }

main{ min-height:60vh; } main:focus, main:focus-visible{ outline:none; }

/* intro */
.intro{ position:relative; padding:72px 0 24px; }
.intro h1{ font-size:clamp(38px,6vw,64px); line-height:1.04; font-weight:500; letter-spacing:-.025em; margin:0 0 24px; max-width:15ch; }
.intro p{ font-size:21px; color:var(--ink); max-width:34em; margin:0 0 14px; }
.sig{ font-family:var(--hand); font-size:26px; color:var(--pen); margin-top:6px; }
.margin-note{ position:absolute; right:0; top:110px; width:200px; font-family:var(--hand); color:var(--pen); font-size:19px; line-height:1.3; transform:rotate(3deg); }
.margin-note svg{ display:block; margin:6px 0 0 -30px; }
@media (max-width:900px){ .margin-note{ position:static; transform:rotate(-1.5deg); width:auto; margin:18px 0 0; } .margin-note svg{ display:none; } }

/* section headings */
h2.sec{ font-size:28px; font-weight:500; letter-spacing:-.015em; margin:64px 0 8px; }
.sec-note{ color:var(--ink-2); margin:0 0 18px; font-size:18px; }

/* index list */
.index{ list-style:none; padding:0; margin:0; border-top:1px solid var(--rule); }
.index li{ display:grid; grid-template-columns:110px 1fr 150px; gap:20px; padding:20px 0; border-bottom:1px solid var(--rule); align-items:baseline; }
.index time{ font-size:15px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.index a.t{ font-size:23px; line-height:1.25; color:var(--ink); text-decoration:none; font-weight:500; }
.index a.t:hover{ color:var(--pen); text-decoration:underline; text-decoration-thickness:1px; }
.index p{ margin:6px 0 0; color:var(--ink-2); font-size:17px; line-height:1.5; }
.index .topic{ font-family:var(--hand); color:var(--pen); font-size:17px; text-align:right; }
@media (max-width:700px){ .index li{ grid-template-columns:1fr; gap:4px; } .index .topic{ text-align:left; } }

.topics{ font-size:17px; color:var(--ink-2); margin:0 0 10px; line-height:2; }
.topics button{ font:inherit; background:none; border:0; padding:0 2px; color:var(--pen); cursor:pointer; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.topics button[aria-pressed="true"]{ color:var(--ink); text-decoration:none; background:linear-gradient(104deg,transparent 2%,var(--hl) 6%,var(--hl) 94%,transparent 98%); }
.find{ font:inherit; font-size:18px; color:var(--ink); background:transparent; border:0; border-bottom:1.5px solid var(--ink-2); padding:6px 0; width:100%; max-width:360px; margin:0 0 24px; }
.find:focus{ outline:none; border-bottom-color:var(--pen); }
.empty{ padding:24px 0; color:var(--ink-2); }

/* prompt box — hand-drawn feel */
.prompt{ margin:30px 0; padding:22px 24px 20px; border:1.8px solid var(--box); border-radius:255px 14px 225px 14px/14px 225px 14px 255px; position:relative; }
.prompt:nth-of-type(even){ border-radius:14px 225px 14px 255px/255px 14px 225px 14px; }
.p-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px; }
.p-title{ font-style:italic; color:var(--ink-2); font-size:17px; }
.copy{ font-family:var(--hand); font-size:18px; color:var(--pen); background:none; border:0; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:3px; flex:none; }
.prompt pre{ margin:0; white-space:pre-wrap; word-wrap:break-word; font:17px/1.6 var(--serif); color:var(--ink); }
mark{ color:var(--hl-ink); background:linear-gradient(100deg,transparent 1%,var(--hl) 3%,var(--hl) 96%,transparent 99%); padding:0 .15em; border-radius:2px; }

/* article */
.post{ padding:56px 0 8px; }
.crumbs{ font-size:16px; color:var(--ink-2); margin-bottom:22px; }
.crumbs a{ color:var(--ink-2); }
.post h1{ font-size:clamp(34px,5vw,52px); line-height:1.08; font-weight:500; letter-spacing:-.025em; margin:0 0 16px; max-width:18ch; }
.post .dek{ font-size:22px; font-style:italic; color:var(--ink-2); margin:0 0 18px; max-width:30em; }
.post .by{ font-size:16px; color:var(--ink-2); margin:0 0 36px; }
.post .by .hand{ font-size:20px; }
.body{ max-width:640px; }
.body p, .body li{ font-size:19.5px; }
.body h2{ font-size:26px; font-weight:600; letter-spacing:-.01em; line-height:1.25; margin:44px 0 8px; }
.body ul{ padding-left:1.1em; }
.body li{ margin:8px 0; }
.body li::marker{ color:var(--pen); }
.note{ font-family:var(--hand); color:var(--pen); font-size:18px; line-height:1.35; margin:20px 0; padding-left:14px; border-left:2px solid var(--pen); }
.note b{ display:block; font-weight:700; }
@media (min-width:1000px){
  .note{ float:right; clear:right; width:230px; margin:4px -290px 16px 0; border-left:0; padding-left:0; transform:rotate(1.5deg); }
  .note::before{ content:""; display:block; width:40px; height:2px; background:var(--pen); margin-bottom:8px; transform:rotate(-4deg); }
}
.end{ clear:both; margin-top:48px; padding-top:20px; border-top:1px solid var(--rule); }
.end h3{ font-size:20px; font-weight:500; margin:0 0 6px; color:var(--ink-2); }
.end ul{ list-style:none; padding:0; margin:0; }
.end li{ margin:8px 0; font-size:20px; }

/* fill in the blanks */
.blanks{ font-size:clamp(22px,3vw,28px); line-height:2.1; max-width:30em; }
.blanks input, .blanks select{ font-family:var(--hand); font-size:inherit; color:var(--pen); background:transparent; border:0; border-bottom:2px dotted var(--ink-2); padding:0 4px; border-radius:0; appearance:none; -webkit-appearance:none; max-width:100%; cursor:text; }
.blanks select{ cursor:pointer; }
.blanks input{ width:9ch; }
.blanks input:focus, .blanks select:focus{ outline:none; border-bottom:2px solid var(--pen); }
.blanks select option{ font-family:var(--serif); color:var(--ink); background:var(--paper); }
.extra label{ display:block; color:var(--ink-2); font-size:17px; margin:22px 0 6px; }
.extra textarea{ width:100%; max-width:640px; min-height:80px; font:18px/1.5 var(--serif); color:var(--ink); background:transparent; border:1.5px solid var(--rule); border-radius:3px; padding:10px 12px; resize:vertical; }
.extra textarea:focus{ outline:none; border-color:var(--pen); }
.btn{ font:500 18px var(--serif); background:var(--stamp); color:var(--stamp-ink); border:0; border-radius:3px; padding:10px 18px; cursor:pointer; }
.btn.plain{ background:none; color:var(--pen); padding:10px 4px; text-decoration:underline; text-underline-offset:3px; }
.btn[disabled]{ opacity:.6; cursor:progress; }
.actions{ display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:18px; }

/* letter-style newsletter */
.letter{ margin:72px 0 0; padding:32px 0 0; border-top:1px solid var(--rule); max-width:640px; }
.letter h2{ font-size:26px; font-weight:500; margin:0 0 8px; letter-spacing:-.01em; }
.letter p{ margin:0 0 16px; }
.letter form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.letter input{ flex:1 1 240px; font:inherit; font-size:18px; color:var(--ink); background:transparent; border:0; border-bottom:1.5px solid var(--ink-2); padding:8px 0; }
.letter input:focus{ outline:none; border-bottom-color:var(--pen); }
.letter .small{ font-size:15px; color:var(--ink-2); margin-top:10px; flex-basis:100%; }

/* about */
.about{ padding:64px 0 0; }
.about h1{ font-size:clamp(34px,5vw,48px); font-weight:500; letter-spacing:-.02em; margin:0 0 20px; }
.about p{ font-size:20px; }

footer{ margin-top:80px; padding:24px 0 40px; border-top:1px solid var(--rule); font-size:16px; color:var(--ink-2); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer button{ font:inherit; background:none; border:0; color:var(--ink-2); text-decoration:underline; cursor:pointer; padding:0; }

.toast{ position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%) rotate(-1deg); background:var(--paper); color:var(--pen); border:1.5px solid var(--pen); font-family:var(--hand); font-size:19px; padding:8px 16px; border-radius:4px; opacity:0; transition:opacity .2s; pointer-events:none; z-index:20; }
.toast.show{ opacity:1; }
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }
/* page transitions (between separate pages) */
@view-transition{ navigation:auto; }
.top{ view-transition-name:site-header; }
footer{ view-transition-name:site-footer; }
main{ view-transition-name:page; }
::view-transition-old(page){ animation:pp-out .16s ease-in both; }
::view-transition-new(page){ animation:pp-in .32s cubic-bezier(.2,.7,.2,1) .06s both; }
::view-transition-old(root), ::view-transition-new(root){ animation:none; }
@keyframes pp-out{ to{ opacity:0; transform:translateY(-6px); } }
@keyframes pp-in{ from{ opacity:0; transform:translateY(10px); } }
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(page), ::view-transition-new(page){ animation:none; }
  @view-transition{ navigation:none; }
}


/* static-site additions */
.top nav a[aria-current="page"]{ color:var(--ink); }
.index li[hidden]{ display:none; }
.skip{ position:absolute; left:-999px; top:8px; background:var(--paper); color:var(--pen); padding:8px 12px; border:1.5px solid var(--pen); z-index:30; }
.skip:focus{ left:16px; }
a.btn{ display:inline-block; text-decoration:none; }
a.btn:hover{ opacity:.9; }