/* A Mind For Life, LLC — an independent publisher.

   Deliberately NOT another dark technical site. Every other property in this
   portfolio is dark, neon or phosphor; a publishing house that carries both a
   book on awareness and a catalogue of software needs to read as a press, not a
   product. So: paper ground, ink text, one brass accent, generous measure.

   ZERO JavaScript and no forms, same as the rest of the estate. The edge serves
   this with script-src 'none', so an injected <script> cannot execute even in
   the window before a defacement is noticed. Everything here is CSS. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Inter:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --paper:#faf7f2;
  --paper-2:#f3eee5;
  --ink:#1c1a17;
  --ink-2:#413c35;
  --muted:#6b6459;
  --faint:#9a9183;
  --rule:#ddd5c7;
  --brass:#9a6b2f;
  --brass-soft:#c9a36a;
  --max:1080px;
  --measure:70ch;
  --display:'Fraunces', Georgia, 'Times New Roman', serif;
  --body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, Consolas, monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font:400 17px/1.72 var(--body);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
a{color:var(--brass);text-decoration:none;border-bottom:1px solid rgba(154,107,47,.3)}
a:hover{border-bottom-color:var(--brass)}

/* ---- masthead ---- */
header.top{border-bottom:1px solid var(--rule);background:var(--paper)}
header.top .wrap{display:flex;align-items:baseline;justify-content:space-between;
  min-height:92px;gap:20px;flex-wrap:wrap;padding-top:16px;padding-bottom:16px}
.wordmark{font-family:var(--display);font-weight:600;font-size:25px;letter-spacing:-.2px;
  color:var(--ink);border:0;line-height:1.25}
.wordmark span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--faint);margin-top:7px;font-weight:400}
nav.main a{color:var(--ink-2);margin-left:26px;font-size:14.5px;font-weight:500;border:0}
nav.main a:hover{color:var(--brass)}

/* ---- hero ---- */
.hero{padding:74px 0 56px;border-bottom:1px solid var(--rule)}
.hero .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:2.6px;
  text-transform:uppercase;color:var(--brass);margin:0 0 20px}
.hero h1{font-family:var(--display);font-weight:600;
  font-size:clamp(34px,5.4vw,56px);line-height:1.13;letter-spacing:-.9px;
  margin:0 0 22px;max-width:19ch}
.hero p.lead{font-size:clamp(18px,2.2vw,21px);line-height:1.62;color:var(--ink-2);
  max-width:60ch;margin:0}

/* ---- sections ---- */
section{padding:62px 0;border-bottom:1px solid var(--rule)}
section:last-of-type{border-bottom:0}
h2{font-family:var(--display);font-weight:600;font-size:clamp(24px,3vw,31px);
  letter-spacing:-.4px;margin:0 0 10px}
p.sub{color:var(--muted);max-width:var(--measure);margin:0 0 34px;font-size:16.5px}
.label{font-family:var(--mono);font-size:11px;letter-spacing:2.4px;text-transform:uppercase;
  color:var(--faint);margin:0 0 14px}

/* ---- the catalogue ---- */
.catalogue{display:grid;gap:34px}
/* Fixed width, NATURAL height. A real catalogue mixes portrait book covers with
   landscape mastheads, and forcing everything into one aspect either decapitates a
   wordmark (the recorded arcadecommander lesson) or letterboxes it into a weak
   strip. Both were tried; this is what actually reads as a catalogue. */
.title-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:30px;align-items:start;
  padding-bottom:30px;border-bottom:1px solid var(--rule)}
.title-row:last-child{border-bottom:0;padding-bottom:0}
.title-row .cover{width:180px;height:auto;border:1px solid var(--rule);display:block}
.title-row h3{font-family:var(--display);font-weight:600;font-size:22px;margin:0 0 6px;letter-spacing:-.3px}
.title-row h3 a{color:var(--ink);border:0}
.title-row h3 a:hover{color:var(--brass)}
.title-row .kind{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--brass);margin:0 0 10px}
.title-row p{margin:0 0 10px;color:var(--ink-2);max-width:62ch}
.title-row .meta{font-size:14px;color:var(--faint);margin:0}

/* ---- the thread ---- */
.thread{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.thread div{border-top:2px solid var(--brass-soft);padding-top:16px}
.thread h3{font-family:var(--body);font-weight:600;font-size:16.5px;margin:0 0 8px}
.thread p{margin:0;color:var(--muted);font-size:15.5px}

/* ---- article body ---- */
article.page{padding:56px 0 70px;max-width:var(--measure)}
article.page h1{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.4vw,44px);
  line-height:1.16;letter-spacing:-.7px;margin:0 0 20px}
article.page h2{margin:42px 0 12px;font-size:23px}
article.page p{margin:0 0 18px;color:var(--ink-2)}
article.page .standfirst{font-size:20px;line-height:1.6;color:var(--ink-2);margin:0 0 30px}
article.page img.inline{max-width:100%;height:auto;border:1px solid var(--rule);margin:10px 0 6px}
article.page figure{margin:26px 0}
article.page figure img{display:block;max-width:100%;height:auto;border:1px solid var(--rule)}
article.page figcaption{font-size:14px;color:var(--faint);margin-top:9px}
blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:2px solid var(--brass-soft);
  font-family:var(--display);font-size:19px;line-height:1.6;color:var(--ink-2)}
ul.facts{list-style:none;padding:0;margin:0}
ul.facts li{padding:11px 0;border-bottom:1px solid var(--rule);display:flex;gap:18px;
  justify-content:space-between;align-items:baseline;flex-wrap:wrap}
ul.facts li:last-child{border-bottom:0}
ul.facts b{font-weight:600;color:var(--ink)}
ul.facts span{font-family:var(--mono);font-size:13px;color:var(--muted);text-align:right}

.portrait{float:right;width:180px;margin:4px 0 20px 26px;border:1px solid var(--rule)}

footer.site{border-top:1px solid var(--rule);background:var(--paper-2);padding:38px 0 56px;
  color:var(--muted);font-size:14.5px}
footer.site .legal{font-family:var(--mono);font-size:12px;color:var(--faint);margin-top:12px}
footer.site a{color:var(--muted)}

@media (max-width:640px){
  .title-row{grid-template-columns:1fr;gap:14px}
  .title-row .cover{width:100%;max-width:300px}
  .portrait{float:none;width:150px;margin:0 0 18px}
  nav.main a{margin:0 20px 0 0;display:inline-block}
  header.top .wrap{min-height:0}
}

/* Utility, not an inline style: style-src is 'self' on the edge, so inline
   style="" attributes are stripped silently and the spacing quietly vanishes.
   Caught twice already in this estate by reading a deployed page's console. */
.after-facts{margin-top:18px}