/* Shared by the essay pages. Extracted from index.html; keep the two in step. */
:root{
  color-scheme:light;
  --paper:#F6F2EA; --shade:#E8E1D4; --pen:#2F4FA2; --danger:#9E3A2B; --ink:#1F1C1A; --ink-soft:#6E6155; --line:rgba(31,28,26,.22);
  --chip:#FBF9F4; --sun:#FCFAF6;
  --display:"Cormorant Garamond","Cormorant Fallback",Garamond,serif; --read:"Newsreader","Newsreader Fallback",Georgia,serif;
  --hand:"Caveat","Bradley Hand",cursive; --small:"Karla","Karla Fallback",system-ui,sans-serif;
  --eo:cubic-bezier(.23,1,.32,1); --penc:cubic-bezier(.45,.05,.35,1);
  --pencil:#5F5A55; --stroke:rgba(47,79,162,.78); --lead:"Reenie Beanie","Bradley Hand",cursive;
}
*{box-sizing:border-box}
body.page{margin:0;background:var(--paper);color:var(--ink);font:14px/1.5 var(--small)}
button:focus-visible,a:focus-visible{outline:2px solid var(--pen);outline-offset:3px;border-radius:6px}
[tabindex="-1"]:focus{outline:none}
::selection{background:rgba(47,79,162,.18)}
.rl{color:inherit;text-decoration:underline;text-decoration-color:rgba(31,28,26,.35);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color 150ms ease}
@media (hover:hover) and (pointer:fine){.rl:hover{text-decoration-color:var(--ink)}}
/* ---------- article ---------- */
.ainner{max-width:640px;margin:0 auto;padding:clamp(40px,9vh,96px) 22px 12vh;display:grid;gap:30px}
.backlink{text-decoration:none;position:relative;justify-self:start;font:700 20px var(--hand);background:none;border:0;padding:2px 4px;color:var(--pen);cursor:pointer}
.akicker{font:500 12px var(--small);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.ahead{display:grid;gap:12px}
.ahead h1{font:600 clamp(32px,4.6vw,50px)/1.02 var(--display);margin:0;text-wrap:balance;letter-spacing:-.005em}
.abody{display:grid;gap:1.05em;font:clamp(17px,.45vw + 13px,19.5px)/1.65 var(--read);color:var(--ink)}
.abody p{margin:0;text-wrap:pretty}
.abody .asolo{font-style:italic}
.abody .apull{font:500 1.35em/1.35 var(--read);margin-block:.5em;text-wrap:balance}
.abody .aend{font-weight:500;margin-top:.6em}
.aqs{margin:-.2em 0 0;padding-inline-start:1.1em;display:grid;gap:.3em;line-height:1.5}
.aqs li{padding-inline-start:.2em;text-wrap:pretty}
.aqs li::marker{color:var(--ink-soft)}
.afig{margin:.8em 0;display:grid;justify-items:center}
.afig img{width:min(100%,440px);height:auto;mix-blend-mode:multiply;-webkit-mask:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.afig.wide img{width:100%}
.afoot{font:500 13px var(--small);color:var(--ink-soft);margin-top:.5em}

/* ---------- email signup: author block ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.author{margin-top:3em;background:#EEE8DC;border-radius:18px;padding:clamp(32px,6vw,52px) clamp(20px,6vw,56px);text-align:center;display:grid;justify-items:center;gap:36px}
.author>div{display:grid;justify-items:center;width:100%}
.au-id{gap:8px}
.au-sub{gap:14px;max-width:460px}
.au-more{gap:6px}
.author .av{width:72px;height:72px;border-radius:50%;margin-bottom:6px}
.author h2{margin:0;font:500 clamp(24px,3vw,30px)/1.15 var(--read);color:var(--ink)}
.author .bio{margin:0;max-width:40ch;font:17px/1.55 var(--read);color:var(--ink);text-wrap:balance}
.author .ps{margin:0;font:700 clamp(22px,1vw + 16px,25px)/1.25 var(--hand);color:var(--pen);text-wrap:balance;max-width:34ch}
.su-form{display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px 24px;width:100%}
.su-form input[type=email]{width:100%;min-width:0;text-align:left;font:17px/1.4 var(--read);color:var(--ink);background:transparent;border:0;border-bottom:1.5px solid var(--ink);padding:10px 2px;border-radius:0;outline:none;transition:border-color 160ms ease}
.su-form input[type=email]::placeholder{color:var(--ink-soft)}
.su-form input[type=email]:focus{border-bottom-color:var(--pen);box-shadow:0 1.5px 0 var(--pen)}
.su-form input[aria-invalid="true"]{border-bottom-color:var(--danger)}
.su-pen{position:relative;justify-self:start;font:700 22px/1 var(--hand);color:var(--pen);background:none;border:0;padding:8px 12px;min-height:44px;cursor:pointer;transition:transform 160ms var(--eo)}
.su-pen:active{transform:scale(.97)}
.su-pen:focus-visible{outline:2px solid var(--pen);outline-offset:4px;border-radius:999px}
.su-pen[disabled]{cursor:default}
.su-msg{margin:0;font:14px/1.4 var(--small);color:var(--ink-soft)}
.su-msg:empty{display:none}
.su-msg.err{color:var(--danger)}
.su-msg.done{font:700 22px/1.2 var(--hand);color:var(--pen)}
.author.sent .su-form{display:none}
.author .fine{margin:0;max-width:52ch;font:13px/1.5 var(--small);color:var(--ink-soft);text-wrap:balance}
.author .connect{margin:0;font:700 clamp(22px,1vw + 16px,25px)/1.2 var(--hand);color:var(--pen)}
.su-socials{list-style:none;margin:0;padding:0;display:flex;gap:4px;justify-content:center}
.su-socials a{display:grid;place-items:center;width:44px;height:44px;color:var(--ink-soft);transition:color 160ms ease,transform 180ms var(--eo)}
.su-socials svg{width:17px;height:17px}
@media (hover:hover) and (pointer:fine){.su-socials a:hover{color:var(--ink);transform:translateY(-2px)}}
.su-socials a:active{transform:scale(.94)}
@media (max-width:480px){.su-form{grid-template-columns:1fr;justify-items:center}.su-pen{justify-self:center}}


/* ---------- essays list: "Thinking out loud" ---------- */
.more{margin:0;font:16px/1.5 var(--read)}
.elist{max-width:720px;margin:0 auto;padding:clamp(40px,9vh,96px) 22px 12vh;display:grid;gap:40px}
/* the back link belongs to the header; a clear break before this week's essay */
.elist>.backlink{margin-bottom:-18px}
.ehead{margin-bottom:8px}
.ehead{display:grid;gap:6px}
.ehead h1{margin:0;font:700 clamp(30px,3.4vw,36px)/1 var(--hand);color:var(--pen)}
.eintro{margin:0;font:17px/1.55 var(--read);max-width:48ch}
.efeat{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:center}
/* one grid for the whole list: drawings and years on the left, words on the right */
.efeat.noimg>div{grid-column:2}
.efeat img{width:100%;height:auto;mix-blend-mode:multiply;-webkit-mask:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent),linear-gradient(to bottom,transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}
.elabel{display:block;margin-top:14px;font:700 20px/1 var(--hand);color:var(--pen)}
.efeat h2{margin:0 0 8px;font:600 clamp(32px,4.8vw,46px)/1.02 var(--display);text-wrap:balance}
.efeat h2 a,.erow .et{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;text-decoration-thickness:1px;transition:text-decoration-color 150ms ease}
@media (hover:hover) and (pointer:fine){.efeat h2 a:hover,.erow .et:hover{text-decoration-color:rgba(31,28,26,.35)}}
.edek{margin:0 0 10px;font:17px/1.5 var(--read)}
.emeta{font:500 13px var(--small);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.eo-h{margin:0 0 10px 226px;font:600 12px var(--small);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.eyear{display:grid;grid-template-columns:200px 1fr;gap:0 26px}
.eyr{font:700 24px/1 var(--hand);color:var(--pen);padding-top:14px}
.erows{list-style:none;margin:0;padding:0}
.erow{display:grid;grid-template-columns:1fr 150px;gap:18px;padding:14px 0;border-top:1px solid var(--line);align-items:baseline}
.erow.nonote{grid-template-columns:1fr}
.et{font:500 19px/1.35 var(--read)}
.etp{display:block;font:14px var(--read);color:var(--ink-soft);margin-top:2px;font-variant-numeric:tabular-nums}
.etp b{font:700 17px var(--hand);color:var(--pen)}
.enote{font:700 18px/1.15 var(--hand);color:var(--pen);text-align:right;transform:rotate(-2deg)}
@media (max-width:560px){.efeat.noimg>div{grid-column:auto}.eo-h{margin-inline-start:0}.efeat{grid-template-columns:1fr;gap:14px}.efeat img{width:150px}.eyear{grid-template-columns:1fr}.eyr{padding-top:0;margin-bottom:4px}.erow{grid-template-columns:1fr;gap:6px}.enote{text-align:left;transform:none}}
@media (prefers-reduced-motion:reduce){*{transition-duration:0ms!important}}

/* ---------- 404 ---------- */
.nf{min-height:100vh;min-height:100svh;display:grid;align-content:center;justify-items:center;gap:36px;padding-block:32px 48px;padding-inline:22px}
.nf-art{display:block;width:min(480px,82vw,64svh);height:auto;mix-blend-mode:multiply;-webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%)}
/* two equal columns so the gap sits on the drawing's centre line; arrows point outward */
.nf-links{display:grid;grid-template-columns:1fr 1fr;gap:4px 44px;width:min(480px,100%)}
.nf-links a:first-child{justify-self:end}
.nf-links a:last-child{justify-self:start}
@media (max-width:340px){.nf-links{grid-template-columns:1fr;justify-items:center}.nf-links a:first-child,.nf-links a:last-child{justify-self:center}}
.nf-links a{display:inline-flex;align-items:center;min-height:44px;font:700 22px/1 var(--hand);color:var(--pen);text-decoration:none}
.eempty{margin:0;font:700 22px/1.3 var(--hand);color:var(--ink-soft)}

/* ---------- the inherited copy: pen marks, margin notes, reader handover (assets/copy.js) ---------- */
[hidden]{display:none!important}
.abody{position:relative}
.abody .pw{position:relative}
.abody .mk{position:relative}
.abody .num::before{content:attr(data-n);position:absolute;left:50%;top:-1.05em;font:700 23px/1 var(--hand);color:var(--pen);transform:translateX(-50%) rotate(-6deg);transition:opacity 220ms var(--eo),transform 220ms var(--eo);pointer-events:none}
.abody .mn{font:700 21px/1.1 var(--hand);color:var(--pen);display:grid;gap:10px;justify-items:start}
.abody .mn span{display:block;transform:rotate(-2deg);transform-origin:left}
.abody .dd{display:block;width:110px;height:auto;overflow:visible}
.abody .dd path{fill:none;stroke:var(--stroke);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.abody .dd .gh{stroke-dasharray:3 5}
@media (min-width:1180px){.abody .mn{position:absolute;left:calc(100% + 10px);top:.15em;width:190px}}
@media (max-width:1179px){.abody .mn{margin:.35em 0 0 1.4em}}
.abody svg.ink{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.abody svg.ink path{fill:none;stroke:var(--stroke);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.will-ink .abody svg.ink path:not(.on){opacity:0}
.will-ink .abody .mn:not(.on){opacity:0}
.will-ink .abody .num:not(.on)::before{opacity:0;transform:translate(-50%,3px) rotate(-6deg)}
.will-ink .ho-last:not(.on) .ho-note,.will-ink .ho-last:not(.on) .ho-sig{opacity:0}
.handover{margin-top:1.4em;padding-top:28px;border-top:1px solid var(--shade);display:grid;gap:16px}
.ho-last{display:grid;gap:6px}
.ho-lbl{margin:0;font:500 12px var(--small);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.ho-note{margin:0;font:30px/1.15 var(--lead);color:var(--pencil);transform:rotate(-1deg);transform-origin:left;overflow-wrap:anywhere}
.ho-sig{margin:0 0 0 1.2em;font:24px/1 var(--lead);color:var(--pencil)}
.ho-turn{margin:6px 0 0;font:700 24px/1.15 var(--hand);color:var(--pen)}
.ho-form{display:grid;gap:12px}
.ho-form textarea,.ho-form input:not([name=hp_field]){font:28px/1.25 var(--lead);color:var(--pencil);background:var(--chip);border:0;border-bottom:1.5px solid var(--shade);border-radius:3px 3px 0 0;padding:8px 10px;width:100%;box-sizing:border-box}
.ho-form textarea{resize:none;min-height:92px;background-image:repeating-linear-gradient(to bottom,transparent 0 34px,var(--shade) 34px 35px);background-position:0 8px}
.ho-form input:not([name=hp_field]){max-width:260px;font-size:24px}
.ho-form textarea:focus-visible,.ho-form input:focus-visible{outline:2px solid var(--pen);outline-offset:2px}
.ho-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.ho-count{margin-left:auto;font:12px var(--small);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.ho-hint{margin:-4px 0 0;font:13px/1.4 var(--small);color:var(--danger)}
.ho-go{justify-self:start;position:relative;font:700 24px/1 var(--hand);color:var(--pen);background:none;border:0;padding:10px 14px;min-height:44px;cursor:pointer;transition:transform 160ms var(--eo)}
.ho-go svg{position:absolute;inset:-4px -10px;width:calc(100% + 20px);height:calc(100% + 8px);overflow:visible;pointer-events:none}
.ho-go svg path{fill:none;stroke:var(--stroke);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset 180ms var(--eo),opacity 0s linear 180ms}
@media (hover:hover) and (pointer:fine){.ho-go:hover svg path{stroke-dashoffset:0;opacity:1;transition-duration:420ms,0s;transition-delay:0s,0s;transition-timing-function:var(--penc)}}
.ho-go:focus-visible{outline:2px solid var(--pen);outline-offset:3px;border-radius:6px}
.ho-go:focus-visible svg path,.ho-go[aria-busy=true] svg path{stroke-dashoffset:0;opacity:1;transition-duration:420ms,0s;transition-delay:0s,0s;transition-timing-function:var(--penc)}
.ho-go:active{transform:scale(.97)}
.ho-go[disabled]{cursor:default}
.ho-form{position:relative}
.ho-fine{margin:2px 0 0 4px;font:700 21px/1.15 var(--hand);color:var(--pen);display:grid;justify-items:start;gap:2px}
.ho-fine span{display:block;transform:rotate(-2deg);transform-origin:left}
.ho-arr{display:none;width:58px;height:auto;overflow:visible;margin-bottom:2px}
.ho-arr path{fill:none;stroke:var(--pen);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
@media (min-width:1180px){.ho-fine{position:absolute;left:calc(100% + 18px);top:-6px;width:190px;margin:0}.ho-arr{display:block}}
.ho-done{margin:0;font:700 22px/1.2 var(--hand);color:var(--pen);outline:none}
@media (prefers-reduced-motion:reduce){.ho-go,.ho-go svg path,.abody .num::before{transition:none}.ho-go:active{transform:none}}