/* Debye Length: a fictional one-person newsletter on Molecupedia. Plain on purpose; system fonts only. */
:root{
  --bg:#fcfcfa;--text:#222;--muted:#6b6b66;--rule:#e4e2dc;--link:#1a4fd6;--hl:#fff4b8;--hl-2:#fbe98a;
  --serif:ui-serif,"New York","Iowan Old Style",Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 19px/1.62 var(--serif)}
a{color:var(--link)}
img{max-width:100%;height:auto}
.page{max-width:660px;margin:0 auto;padding:40px 22px 30px}
:focus-visible{outline:2px solid var(--link);outline-offset:2px}

/* ---------- Masthead ---------- */
.masthead{border-bottom:1px solid var(--text);padding-bottom:14px;margin-bottom:34px}
.title{display:inline-flex;align-items:baseline;gap:12px;text-decoration:none;color:var(--text)}
.lambda{font:italic 400 30px/1 var(--serif);color:var(--muted)}
.lambda sub{font-size:.5em;font-style:normal}
.name{font:700 30px/1.1 var(--serif);letter-spacing:-.01em}
.tagline{font:italic 400 16px/1.45 var(--serif);color:var(--muted);margin:8px 0 10px}
.nav{display:flex;gap:18px;font:400 14px/1 var(--mono)}
.nav a{color:var(--text);text-decoration:none;border-bottom:1px solid var(--rule)}
.nav a:hover{border-color:var(--text)}

/* ---------- Issue ---------- */
.issue-line{font:400 13px/1.4 var(--mono);color:var(--muted);margin:0 0 10px}
.issue h1{font:700 clamp(28px,4.4vw,36px)/1.15 var(--serif);letter-spacing:-.01em;margin:0 0 12px}
.dek{font:italic 400 20px/1.45 var(--serif);color:#444;margin:0 0 18px}
.from{display:flex;align-items:center;gap:10px;font:400 14px/1 var(--sans);color:var(--muted);margin:0 0 28px}
.av{width:30px;height:30px;border-radius:50%;background:#2b2b2b;color:#fff;display:grid;place-items:center;font:700 11.5px/1 var(--sans);letter-spacing:.04em}
.hero{margin:0 0 26px}
.hero img{display:block;width:100%}
.hero figcaption,.body figcaption{font:400 14px/1.45 var(--sans);color:var(--muted);margin-top:6px}
.credit{font-family:var(--mono);font-size:12px}
.body>*{margin:0 0 1.1em}
.body a{text-underline-offset:2px}
.body h2{font:700 23px/1.3 var(--serif);margin:1.6em 0 .5em}
.body h3{font:700 19px/1.35 var(--serif);margin:1.4em 0 .4em}
.body h4{font:700 13px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.body ul,.body ol{padding-left:1.4em}
.body li{margin:.35em 0}
.body blockquote{margin:1.2em 0;padding:0 0 0 18px;border-left:3px solid var(--rule);color:#3a3a36}
.body blockquote p{margin:0 0 .6em}
.body blockquote cite,.body blockquote footer{display:block;font:400 13px/1.4 var(--mono);font-style:normal;color:var(--muted)}
.body .pull,.body .pullquote,.body .pull-quote,.body blockquote.pull,.body aside.pull{margin:1.4em 0;padding:0 0 0 18px;border-left:3px solid var(--text);font:italic 400 23px/1.4 var(--serif);color:var(--text);background:none}
.body .pull p,.body .pullquote p{margin:0}
.body .pull cite,.body .pullquote cite{display:block;margin-top:6px;font:400 13px/1.3 var(--mono);font-style:normal;color:var(--muted)}
.body figure{margin:1.6em 0}
.body figure img{display:block;margin:0 auto;width:auto;max-width:100%;max-height:520px}
.body aside,.body .sidebar,.body .box{border:1px solid var(--rule);background:#fff;padding:14px 16px;font-size:16.5px;line-height:1.55}
.body aside>:last-child,.body .sidebar>:last-child{margin-bottom:0}
.body aside h3,.body aside h4{margin:0 0 .4em;font:700 13px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.body aside.update{border-left:3px solid var(--text)}
.body table{width:100%;border-collapse:collapse;font:400 15px/1.4 var(--sans)}
.body th{text-align:left;border-bottom:1px solid var(--text);padding:6px 8px 6px 0;font-weight:700}
.body td{border-bottom:1px solid var(--rule);padding:6px 8px 6px 0}
.body caption{caption-side:bottom;text-align:left;font-size:13px;color:var(--muted);padding-top:6px}
.body code,.body kbd{font:.85em var(--mono);background:#f0efea;padding:.1em .3em;border-radius:3px}
.body pre{font:14px/1.5 var(--mono);background:#f0efea;padding:12px 14px;overflow-x:auto}
.body sup{font:400 .62em/0 var(--mono);vertical-align:super}
.body sup a{text-decoration:none;padding:0 .1em}
.body sup a::before{content:"["}
.body sup a::after{content:"]"}
.body .footnotes,.body ol.footnotes,.body ol.notes,.body section.footnotes{font-size:15px;line-height:1.5;color:#3d3d39;border-top:1px solid var(--rule);padding-top:12px;margin-top:2em}
.body ol.footnotes{padding-left:1.6em}
.body .footnotes li{margin:.5em 0}
.body .footnotes li:target,.body li:target{background:var(--hl)}
.body mark{background:var(--hl);padding:0 .1em}
.body hr{border:0;border-top:1px solid var(--rule);margin:2em 0}
.body video,.body audio{width:100%}
.tags{font:400 13.5px/1.5 var(--mono);color:var(--muted);margin:26px 0 0}
.tags a{color:var(--muted)}

/* ---------- Subscribe (goes nowhere) ---------- */
.subscribe{margin:40px 0 0;padding:20px 22px;background:var(--hl);border:1px solid var(--hl-2)}
.subscribe h2{font:700 20px/1.25 var(--serif);margin:0 0 4px}
.subscribe p{margin:0 0 12px;font-size:16.5px}
.sub-form{display:flex;flex-wrap:wrap;gap:8px}
.sub-form input[type=email]{flex:1;min-width:180px;font:400 15px/1 var(--sans);padding:10px 12px;border:1px solid #c9bf86;background:#fff;border-radius:3px}
.sub-go{position:absolute;opacity:0;width:1px;height:1px}
.sub-btn{font:700 14px/1 var(--sans);padding:11px 16px;background:#222;color:#fff;border-radius:3px;cursor:pointer;user-select:none}
.sub-go:focus-visible+.sub-btn{outline:2px solid var(--link);outline-offset:2px}
.sub-form .done{display:none;flex-basis:100%;margin:6px 0 0;font:400 14.5px/1.45 var(--serif);font-style:italic}
.sub-go:checked~.done{display:block}
.sub-go:checked+.sub-btn{background:#6b6b66}
.subscribe .fine{font:400 12.5px/1.4 var(--mono);color:#6d6640;margin:12px 0 0}

/* ---------- Archive and boxes ---------- */
.prev{margin-top:36px}
.prev h2,.about h2{font:700 13px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 8px}
.prev ul{margin:0;padding-left:1.2em}
.prev li{margin:.3em 0}
.prev .d{font:400 13px/1 var(--mono);color:var(--muted)}
.dl-box{display:grid;grid-template-columns:1fr auto;gap:2px 16px;margin:36px 0 0;padding:12px 14px;border:1px dashed var(--muted);font:400 13px/1.4 var(--mono)}
.dl-label{color:var(--muted)}
.dl-value{grid-row:1/3;grid-column:2;align-self:center;font:700 22px/1 var(--mono)}
.dl-note{color:var(--muted)}
.archive{margin-top:40px}
.archive h1{font:700 26px/1.2 var(--serif);margin:0 0 6px}
.issues{list-style:none;margin:0;padding:0}
.issues li{padding:16px 0;border-bottom:1px solid var(--rule)}
.issues h2{font:700 22px/1.3 var(--serif);margin:0 0 4px}
.issues h2 a{color:var(--text);text-decoration:none}
.issues h2 a:hover{color:var(--link);text-decoration:underline}
.issues .dek{font-size:17px;margin:0}
.issues .issue-line{margin:0 0 4px}
.about{margin-top:34px}
.about p{margin:0;font-size:17px}

/* ---------- Footer ---------- */
.foot{margin-top:44px;padding-top:14px;border-top:1px solid var(--text);font:400 13.5px/1.5 var(--sans);color:var(--muted)}
.foot p{margin:0 0 8px}
.foot .honest{color:var(--text)}
@media (max-width:520px){
  .page{padding:26px 16px 24px}
  body{font-size:18px}
  .name{font-size:26px}
  .lambda{font-size:26px}
  .dek{font-size:18.5px}
  .body h2{font-size:21px}
}
@media print{.nav,.subscribe,.dl-box{display:none}}