/* Heard in the Fog. Look B ("Kitchen table"), finish 2 ("Green band").
   Light and dark follow the reader's device setting. No scripts, no motion. */

@font-face{font-family:"Literata";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(/fonts/literata-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata";font-style:normal;font-weight:200 900;font-display:swap;
  src:url(/fonts/literata-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Literata";font-style:italic;font-weight:200 900;font-display:swap;
  src:url(/fonts/literata-latin-wght-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Literata";font-style:italic;font-weight:200 900;font-display:swap;
  src:url(/fonts/literata-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/instrument-sans-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/fonts/instrument-sans-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  color-scheme:light dark;
  --bg:#FAF8F4; --card:#FFFFFF; --text:#26211D; --muted:#4F453D; --link:#1B5546;
  --band:#17493C; --onband:#F8F5EF; --onband2:#DCE7E0; --rule:#DDD6C8; --tagline:#8A7F70;
  --read:"Literata",Georgia,"Times New Roman",serif;
  --ui:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --gutter:clamp(1.25rem,4vw,3rem);
  --tap:max(44px,2.75rem);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#131816; --card:#1D2421; --text:#EAE5DB; --muted:#BFB8AA; --link:#93D2B8;
    --band:#123A30; --onband:#EAE5DB; --onband2:#CFDCD4; --rule:#333D38; --tagline:#8F968F;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--read);font-size:1.25rem;line-height:1.7;overflow-wrap:break-word}
.wrap{max-width:70rem;margin:0 auto;padding:0 var(--gutter)}
a,.fakelink{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{text-decoration-thickness:2px}
a:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--ui);font-weight:700;line-height:1.15;letter-spacing:-.025em;text-wrap:balance;margin:0}
p{margin:0 0 1.1em}
.ui{font-family:var(--ui);font-size:1rem;line-height:1.5}
.muted{color:var(--muted)}
.tap{display:inline-flex;align-items:center;min-height:var(--tap)}

.skip{position:absolute;left:-999px;top:0;background:var(--card);color:var(--link);padding:.75rem 1rem;font-family:var(--ui);z-index:10}
.skip:focus{left:0}

/* green band: header and footer */
.band{background:var(--band);color:var(--onband)}
.band a{color:var(--onband)}
.band a:focus-visible{outline-color:var(--onband)}
.bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.2rem 1.5rem;padding-top:1.5rem;padding-bottom:1.5rem}
.wordmark{font-family:var(--ui);font-weight:700;font-size:clamp(1.5rem,3vw,2.5rem);line-height:1.1;letter-spacing:-.02em;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:.45em;min-height:var(--tap)}
.wordmark .mark{width:.95em;height:.95em;flex:none}
.menu{display:flex;gap:clamp(1rem,3vw,1.75rem);font-weight:500;font-size:1.0625rem}
.menu a{display:inline-flex;align-items:center;min-height:var(--tap)}
.menu a[aria-current="page"]{font-weight:700;text-decoration-thickness:3px}

/* home: opening, inside the band */
.hero{padding-top:clamp(1.5rem,4vw,3rem);padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.3rem);line-height:1.02}
.hero h1 span{display:block}
.hero .tag2{font-size:1.3rem;line-height:1.5;margin:1.6rem 0 .9rem}
.hero .intro{color:var(--onband2);margin:0;max-width:30rem}
@media (min-width:52rem){.hero h1 span{white-space:nowrap}}

/* home: one block per heading */
.topic{padding:3rem 0 1rem}
.topic h2{font-size:1.9rem}
.topic .covers{color:var(--muted);margin:.45rem 0 1.4rem}
.entries{display:grid;gap:1.8rem}
.entry{background:var(--card);border:1px solid var(--rule);border-radius:12px;padding:1.4rem 1.5rem 1.5rem}
.entry h3,.entry h2{font-size:1.35rem;line-height:1.25;margin-bottom:.4rem}
.entry h3 a,.entry h2 a{display:block;padding:.4rem 0;min-height:var(--tap);color:var(--text);text-decoration-color:var(--link)}
.entry p{margin:0 0 .8rem;font-size:1.125rem;line-height:1.6}
.entry .headname{margin:0 0 .2rem;font-size:1rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:0;font-family:var(--ui);font-size:.9375rem;line-height:1.4}
.tags a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 .9em;border:1px solid var(--tagline);border-radius:999px;color:var(--text);text-decoration-color:var(--link);text-underline-offset:.2em}
.later{padding:3rem 0 3.5rem}
.later h2{font-size:1.3rem;margin-bottom:.9rem}
.later ul{list-style:none;margin:0;padding:0;color:var(--muted);display:grid;gap:.35rem 2.5rem}

/* article and plain pages */
.arthead{padding:clamp(2rem,5vw,4rem) 0 1.6rem;max-width:46rem}
.crumb{margin:0 0 .6rem}
.arthead h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.05}
.artgrid{display:grid;gap:1.6rem;padding-top:1.8rem}
.meta p{margin:0 0 .15rem}
.meta .tags{margin-top:.8rem}
.prose{max-width:34rem}
.prose h2{font-size:1.65rem;margin:2.4rem 0 .9rem}
.prose ul{padding-left:1.15em;margin:0 0 1.1em}
.prose li{margin-bottom:.7em}
.prose blockquote{margin:1.6rem 0;padding:1.3rem 1.5rem;background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--band);border-radius:12px}
.prose blockquote p{margin:0}
.rob{margin:2.6rem 0 0;padding:1.5rem 1.6rem;background:var(--card);border:1px solid var(--rule);border-left:4px solid var(--band);border-radius:12px}
.rob p{margin:0}
.rob .who{display:block;font-family:var(--ui);font-weight:600;font-size:1rem;margin-bottom:.5rem}
.srcline{margin:2.2rem 0 0;font-size:1.125rem;line-height:1.6}
.book{margin:1.4rem 0 0;padding-top:1.4rem;border-top:1px solid var(--rule);font-size:1.125rem;line-height:1.6}
.book p{margin:0}

/* tag page */
.filterhead{padding:clamp(2rem,5vw,3.5rem) 0 1.2rem}
.filterhead h1{font-size:clamp(1.9rem,4.5vw,2.8rem)}
.chips,.jump{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;padding:0;margin:1.4rem 0 0;font-family:var(--ui);font-size:1.0625rem}
.chips a,.chips span,.jump a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 1.1rem;border:1px solid var(--tagline);border-radius:999px;color:var(--text);text-decoration:none}
.chips .on{background:var(--band);border-color:var(--band);color:var(--onband);font-weight:600}
.chips .all{border-width:2px;border-color:var(--link);color:var(--link);font-weight:600}
.count{color:var(--muted);margin:1.4rem 0 0}
.filterhead + .entries{margin-top:.4rem}

/* sources */
.jump{gap:.5rem;font-size:1rem}
.hd{font-size:1.75rem;line-height:1.2;margin:3rem 0 .4rem;max-width:44rem}
.srcsec{padding:1rem 0 .5rem;max-width:44rem}
.srcsec h3{font-size:1.45rem;line-height:1.25;margin-bottom:1.2rem}
.srcsec h3 a{color:var(--text);text-decoration-color:var(--link)}
ul.src{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:1.3rem}
ul.src li{margin:0;padding:0;font-size:1.0625rem;line-height:1.55}
ul.src .kind{display:inline-block;font-family:var(--ui);font-size:.9375rem;line-height:1.4;border:1px solid var(--rule);border-radius:5px;padding:.1em .6em;margin-bottom:.2rem}
ul.src .ttl{display:block;font-weight:600}
ul.src .ttl a{display:inline-block;padding:.35rem 0}
ul.src .by,ul.src .read{display:block;color:var(--muted);font-size:1rem}
ul.src .read{margin-top:.15rem}
.pubmed{border-top:1px solid var(--rule);padding:2rem 0 3rem;max-width:44rem;margin-top:2rem}
.pubmed h2{font-size:1.45rem;margin-bottom:.6rem}

/* footer */
.foot{margin-top:4rem}
.foot .wrap{display:grid;gap:1.4rem;padding-top:2.2rem;padding-bottom:3rem}
.foot p{margin:0 0 .4rem}
.foot .talk{font-family:var(--ui);font-weight:700;font-size:1.25rem;line-height:1.3;margin-bottom:.5rem}
.footlinks{list-style:none;margin:0;padding:0}
.foot .tap{text-decoration:underline}

/* wider screens */
@media (min-width:52rem){
  .hero{display:grid;grid-template-columns:7fr 5fr;gap:3rem;align-items:end}
  .hero .tag2{margin-top:0}
  .topic{display:grid;grid-template-columns:4fr 8fr;gap:3rem}
  .topic .covers{margin-bottom:0}
  .entries{grid-template-columns:1fr 1fr;gap:2.5rem}
  .later{display:grid;grid-template-columns:4fr 8fr;gap:3rem}
  .later ul{grid-template-columns:1fr 1fr}
  .artgrid{grid-template-columns:13rem minmax(0,34rem);gap:3rem;padding-top:2.2rem}
  .foot .wrap{grid-template-columns:5fr 3fr 4fr;gap:3rem}
}

/* motion off, whatever the device says */
*{animation:none !important;transition:none !important;scroll-behavior:auto !important}