/* Thought, v2 (owner's choice, 2026-10-15): "the manuscript of now". Navy ink on a warm near-white, one modern serif
   (Newsreader, with its optical sizes) for everything, lots of air. The universe in three precise marks only: the gold
   compass rose over each title, the ink cloud scroll between sections, and the wax seal with a signature at the end.
   No blog meta line: the date is written in words under the title, the time is an hourglass that stays with the
   reader and counts down as they read, the writer signs at the end. */
:root{
  --ground:#FBF8F2;
  --ink:#14284B;            /* navy ink: ~13:1 on the ground */
  --ink-2:#4A5A78;          /* quiet lines: ~6.6:1 */
  --rule:rgba(20,40,75,.16);
  --gold:#A8772A; --wax:#7A1E2B;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sign:"Herr Von Muellerhoff","Snell Roundhand","Apple Chancery",cursive;
  --col:min(680px,100%);
}
*{box-sizing:border-box}
html{background:var(--ground);color-scheme:light;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 20px/1.62 var(--serif);font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding:0 20px}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--rule);text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-color .2s}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--ground);padding:10px 14px;font-size:16px}
.skip:focus{top:12px}

/* ---- the top: the house, quietly ---- */
.top{max-width:var(--col);margin:0 auto;padding:max(28px,env(safe-area-inset-top)) 0 0;display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.brand{font:500 13px/1 var(--serif);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.brand span{color:var(--ink-2);font-weight:400}
.home{font-size:15px;color:var(--ink-2);text-decoration:none}
.home:hover{color:var(--ink)}
@media (max-width:359px){ .top .brand{font-size:12px;letter-spacing:.14em} }   /* clear of an essay's hourglass (top right) at 320px */

/* ---- the column ---- */
.col{max-width:var(--col);margin:0 auto;padding:clamp(40px,9vh,96px) 0 0}
.head{text-align:left;margin:0 0 clamp(36px,6vh,56px)}
.compass{display:block;width:clamp(116px,30vw,156px);height:auto;margin:0 0 clamp(22px,4vh,34px) -6px;overflow:visible}
h1{margin:0;font:350 clamp(40px,8.4vw,66px)/1.02 var(--serif);font-variation-settings:"opsz" 72;letter-spacing:-.018em;text-wrap:balance}
.when{margin:18px 0 0;font:italic 400 19px/1.35 var(--serif);color:var(--ink-2)}
.prose > *{margin:0 0 1.05em}
.prose .lede{font-size:clamp(22px,4.6vw,25px);line-height:1.5}
.prose h2{margin:1.4em 0 .55em;font:400 clamp(27px,5.2vw,34px)/1.15 var(--serif);font-variation-settings:"opsz" 48;letter-spacing:-.012em;text-wrap:balance}
.prose h3{margin:1.3em 0 .45em;font:500 clamp(22px,4.2vw,25px)/1.25 var(--serif);font-variation-settings:"opsz" 36}
.prose strong{font-weight:600}
.prose em{font-style:italic}
.prose ul,.prose ol{padding-left:1.15em}
.prose li{margin:0 0 .6em;padding-left:.2em}
.prose li::marker{color:var(--gold)}
.prose blockquote,.prose .note{margin:1.4em 0;padding:0 0 0 1em;border-left:1px solid var(--gold);color:var(--ink-2);font-style:italic}
.prose .caption{text-align:center;font-style:italic;font-size:17px;color:var(--ink-2)}

/* the ink cloud scroll between sections (an image on white, multiplied into the ground) */
hr.star{border:0;height:46px;margin:2.2em auto;width:150px;background:url(/thought/cloud.webp) center/contain no-repeat;mix-blend-mode:multiply}

/* ---- the end: the seal, the signature, the colophon ---- */
.sign{margin:3.2em 0 0;display:grid;justify-items:start;gap:4px}
.seal{width:64px;height:64px;margin:0 0 6px -4px}
.by{font:500 12px/1 var(--serif);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.signature{font:400 clamp(40px,9vw,52px)/1.1 var(--sign);color:var(--ink);margin:2px 0 4px;transform:rotate(-2deg);transform-origin:left}
.colophon{margin:6px 0 0;font:italic 400 17px/1.5 var(--serif);color:var(--ink-2);max-width:34em}

/* ---- the index ---- */
.essays{list-style:none;margin:0;padding:0}
.essays li{padding:0 0 30px;margin:0 0 30px;border-bottom:1px solid var(--rule)}
.essays li:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.essays h2{margin:0;font:400 clamp(28px,6vw,38px)/1.12 var(--serif);font-variation-settings:"opsz" 48;letter-spacing:-.012em}
.essays h2 a{text-decoration:none}
.essays h2 a:hover{text-decoration:underline;text-decoration-color:var(--rule)}
.essays .when{margin:8px 0 10px;font-size:17px}
.essays .desc{margin:0;color:var(--ink)}

/* ---- staying in touch ---- */
.touch{margin:3.4em 0 0;padding:28px 0 0;border-top:1px solid var(--rule)}
.touch h2{margin:0 0 14px;font:500 12px/1 var(--serif);letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.touch ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.act{display:inline-flex;align-items:baseline;gap:12px;flex-wrap:wrap;text-decoration:none;min-height:44px;align-content:center}
.act b{font-weight:500;font-size:21px}
.act span{font-size:16px;color:var(--ink-2);word-break:break-all}
.act:hover b{text-decoration:underline;text-decoration-color:var(--rule)}
.foot{max-width:var(--col);margin:0 auto;padding:48px 0 max(48px,env(safe-area-inset-bottom))}
.foot a{font-size:15px;color:var(--ink-2);text-decoration:none}

/* ---- the hourglass: it stays with the reader (top right, above the text already read), its sand runs as they read,
   and it counts the time left. On an essay it takes the header's top-right place, so the header carries no link there. ---- */
.glass{position:fixed;z-index:5;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));   /* top right: out of the way of the lines being read */
  display:flex;align-items:center;gap:8px;padding:8px 13px 8px 10px;border-radius:999px;background:rgba(251,248,242,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 0 0 1px var(--rule),0 6px 18px rgba(20,40,75,.10);
  font:500 15px/1 var(--serif);font-variant-numeric:tabular-nums;color:var(--ink);transition:opacity .4s}
.glass svg{width:16px;height:24px;flex:none}
.glass .sand{fill:var(--gold)}
.glass[hidden]{display:none}
.glass.done{opacity:.6}
/* a phone (the column at the screen's edges): the hourglass stands on a band of the page's ground, and the lines already
   read pass under it, never behind the hourglass itself */
.glass-band{display:none}
@media (max-width:759px){
  .glass-band:has(+ .glass:not([hidden])){display:block;position:fixed;z-index:4;left:0;right:0;top:0;height:calc(max(14px,env(safe-area-inset-top)) + 52px);pointer-events:none;
    background:var(--ground);-webkit-mask-image:linear-gradient(180deg,#000 82%,transparent);mask-image:linear-gradient(180deg,#000 82%,transparent)}
  .top{position:relative;z-index:6}
}

@media (min-width:900px){ body{font-size:21px} }
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }
@media print{ .glass,.top,.foot,.touch{display:none} body{padding:0} }