:root{--paper:#F1EFE8;--card:#FAF8F2;--ink:#16202B;--muted:#6A7381;--copper:#2F4A6B;
--copper-deep:#1D3049;--olive:#7C7566;--hair:#DFDACD}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--paper);color:var(--ink);font:17px/1.7 "Inter",system-ui,sans-serif}
a{color:var(--copper-deep)}
.wrap{max-width:1040px;margin:0 auto;padding:0 22px}
header.top{border-bottom:1px solid var(--hair);background:var(--card);position:sticky;top:0;z-index:200}
#read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--copper);z-index:300}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand svg{flex:0 0 auto}
.brand .n{font-family:Georgia,serif;font-weight:700;font-size:21px;line-height:1.1}
.brand .t{display:block;font-family:Inter,sans-serif;font-weight:600;font-size:10px;
letter-spacing:.34em;text-transform:uppercase;color:var(--copper)}
nav.main{display:flex;gap:22px;flex-wrap:wrap}
nav.main a{text-decoration:none;color:var(--muted);font-size:14px;font-weight:600;letter-spacing:.02em}
nav.main a:hover,nav.main a.on{color:var(--copper-deep)}
.hero{padding:64px 0 56px;text-align:center;background:var(--card);border-bottom:1px solid var(--hair)}
.kicker{letter-spacing:.2em;text-transform:uppercase;font-size:12px;color:var(--copper);font-weight:700}
.hero h1{font-family:Georgia,serif;font-size:clamp(30px,5vw,44px);line-height:1.18;max-width:840px;margin:12px auto 14px}
.hero h1 span{display:block}
h1,h2,h3,h4{text-wrap:balance}
.hero p{color:var(--muted);max-width:540px;margin:0 auto 24px;font-size:18px}
.btn{display:inline-block;background:var(--copper);color:#fff;border-radius:999px;
padding:12px 28px;font-weight:600;font-size:15px;text-decoration:none;border:0;cursor:pointer}
.btn:hover{background:var(--copper-deep)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:44px 0}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--hair);border-radius:14px;overflow:hidden;
display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.card img,.card svg.heroimg{width:100%;height:auto;display:block}
.card .pad{padding:20px 22px 24px}
.card .cat{color:var(--copper);letter-spacing:.18em;text-transform:uppercase;font-size:11px;font-weight:700}
.card h3{font-family:Georgia,serif;font-size:21px;line-height:1.3;margin:8px 0 8px}
.card p{color:var(--muted);font-size:15px}
.sectionhead{font-family:Georgia,serif;font-size:26px;margin:36px 0 4px}
article.post{max-width:680px;margin:0 auto;padding:46px 0 30px;min-width:0}
article.post .cat{color:var(--copper);letter-spacing:.2em;text-transform:uppercase;font-size:12px;font-weight:700}
article.post h1{font-family:Georgia,serif;font-size:clamp(28px,4.6vw,40px);line-height:1.2;margin:10px 0 12px}
article.post .meta{color:var(--muted);font-size:14px;margin-bottom:26px}
article.post .heroimg{border-radius:14px;border:1px solid var(--hair);margin-bottom:30px;width:100%;height:auto;display:block}
article.post h2{font-family:Georgia,serif;font-size:26px;margin:38px 0 12px;line-height:1.25}
article.post h3{font-family:Georgia,serif;font-size:20px;margin:28px 0 10px}
article.post p{margin-bottom:16px}
article.post ul,article.post ol{margin:0 0 16px 22px}
article.post li{margin-bottom:8px}
article.post blockquote{border-left:3px solid var(--copper);padding:4px 0 4px 18px;color:var(--olive);
font-family:Georgia,serif;font-size:19px;margin:22px 0}
.newsletter{background:var(--ink);color:#F3EEE5;border-radius:16px;padding:38px 30px;text-align:center;margin:40px 0}
.newsletter h2{font-family:Georgia,serif;font-size:26px;margin-bottom:8px}
.newsletter p{color:#B9BBB0;max-width:440px;margin:0 auto 18px;font-size:15px}
.newsletter form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.newsletter input{border-radius:999px;border:1px solid #3A3B36;background:#24251F;color:#F3EEE5;
padding:12px 20px;font-size:15px;min-width:250px}
.newsletter .ok{color:#C9A227;font-weight:600;display:none}
footer{border-top:1px solid var(--hair);margin-top:30px;background:var(--card)}
.foot{display:flex;justify-content:space-between;gap:20px;padding:30px 0;flex-wrap:wrap;
color:var(--muted);font-size:13px}
.foot a{color:var(--muted);text-decoration:none;margin-right:14px}
.foot a:hover{color:var(--copper-deep)}
.pagehead{padding:46px 0 8px}
.pagehead h1{font-family:Georgia,serif;font-size:34px}
.prose{max-width:680px;padding:18px 0 50px;color:var(--ink)}
.prose p{margin-bottom:14px;color:var(--muted)}
.prose h2{font-family:Georgia,serif;font-size:23px;margin:28px 0 10px;color:var(--ink)}
.prose ul{margin:0 0 14px 22px;color:var(--muted)}
.faq{border-top:1px solid var(--hair);margin-top:34px;padding-top:8px}
.faq h2{font-family:Georgia,serif;font-size:26px;margin:20px 0 6px}
.faq h3{font-family:Georgia,serif;font-size:19px;margin:20px 0 6px}
.faq p{color:var(--muted)}
.srcs{border-top:1px solid var(--hair);margin-top:34px;padding-top:16px;font-size:14px;color:var(--muted)}
.srcs h2{font-family:Georgia,serif;font-size:20px;margin-bottom:10px;color:var(--ink)}
.srcs ol{margin-left:20px}
.srcs a{word-break:break-all}

/* article layout with TOC sidebar */
.article-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:44px;max-width:1000px;margin:0 auto;padding:46px 0 30px}
.article-sidebar{min-width:0}
.toc{position:sticky;top:86px;background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:18px 18px 14px}
.toc-title{font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--copper);margin-bottom:10px}
.toc ul{list-style:none;margin:0}
.toc li{margin:0 0 8px}
.toc a{color:var(--muted);text-decoration:none;font-size:13.5px;line-height:1.4;display:block}
.toc a:hover{color:var(--copper-deep)}
@media(max-width:900px){.article-layout{grid-template-columns:minmax(0,1fr);gap:0;padding:34px 0 20px}
.toc{position:static;margin-bottom:26px}}

/* in-article figures, tables, stats */
article.post table{width:100%;border-collapse:collapse;margin:22px 0;font-size:15px;background:var(--card);border:1px solid var(--hair);border-radius:12px;overflow:hidden}
article.post th{background:var(--ink);color:#F3EEE5;text-align:left;padding:11px 14px;font-weight:600;font-size:13.5px;letter-spacing:.03em}
article.post td{padding:11px 14px;border-top:1px solid var(--hair);color:var(--muted);vertical-align:top}
article.post td:first-child{color:var(--ink);font-weight:600}
article.post tr:nth-child(even) td{background:#FBF9F3}
.tablewrap{overflow-x:auto;margin:22px 0}
.tablewrap table{margin:0}
figure.fig{margin:28px 0;background:var(--card);border:1px solid var(--hair);border-radius:14px;overflow:hidden}
figure.fig svg,figure.fig img{width:100%;height:auto;display:block}
figure.fig figcaption{padding:12px 18px;font-size:13.5px;color:var(--muted);border-top:1px solid var(--hair)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:26px 0}
@media(max-width:640px){.stats{grid-template-columns:1fr}}
.stat{background:var(--card);border:1px solid var(--hair);border-radius:12px;padding:18px 16px 14px;text-align:center}
.stat b{display:block;font-family:Georgia,serif;font-size:30px;color:var(--copper-deep);line-height:1.1;margin-bottom:6px}
.stat span{font-size:13px;color:var(--muted);line-height:1.4;display:block}

/* ============================================================
   WHAT THEY INHERIT — its own visual system.
   Not The Father Standard (bold Georgia, centred hero, card grid,
   copper on cream) and not The Quiet Marriage (Inter Light over
   serif body, broadsheet masthead, numbered text index, claret on
   blush). This one is a document: a ledger, a deed, a will.
   Archival ink blue on aged parchment, a high-contrast serif for
   display, and a monospace layer for every label and rubric.
   It is image-forward on purpose: the index leads with pictures.
   ============================================================ */

body{font:17px/1.72 "Inter",system-ui,sans-serif}
h1,h2,h3,h4,.card h3,.hero h1,article.post h1,article.post h2,.pagehead h1{
  font-family:"Playfair Display",Georgia,serif;font-weight:500;letter-spacing:-.006em}
.kicker,.card .cat,article.post .cat,article.post .meta,nav.main a,.toc-title,
.sectionhead,.btn,.brand .t{font-family:"IBM Plex Mono",ui-monospace,monospace}

/* Masthead: wordmark left, nav right, closed by a ledger double rule. */
header.top{position:static;background:transparent;border-bottom:0}
.wrap{max-width:1120px}
.topbar{padding:26px 0 18px;border-bottom:3px double var(--hair);align-items:flex-end}
.brand .n{font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:27px}
.brand .t{font-size:9px;letter-spacing:.36em;font-weight:400;color:var(--muted)}
nav.main{gap:26px}
nav.main a{font-size:11px;text-transform:uppercase;letter-spacing:.1em;font-weight:400}

/* Hero: left aligned, wide measure, closed by a rule. No centring anywhere. */
.hero{background:transparent;border-bottom:1px solid var(--hair);text-align:left;padding:56px 0 46px}
.hero .kicker{font-size:10px;letter-spacing:.2em;font-weight:400;color:var(--copper)}
.hero h1{font-size:clamp(32px,5vw,50px);line-height:1.1;max-width:17ch;margin:16px 0 18px}
.hero p{margin:0 0 26px;max-width:56ch;font-size:17px;color:var(--muted)}
.btn{background:var(--copper);color:#fff;border-radius:0;padding:14px 30px;font-size:11px;
  text-transform:uppercase;letter-spacing:.13em;font-weight:500}
.btn:hover{background:var(--copper-deep)}

/* The index leads with pictures. First entry runs full width as the lead,
   the rest sit two up. Every entry carries its illustration. */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 34px;padding:38px 0 46px}
.card{background:transparent;border:0;border-radius:0}
.card > div:first-child{border:1px solid var(--hair);background:var(--card);overflow:hidden}
.card:hover > div:first-child{border-color:var(--copper)}
.card .pad{padding:16px 0 0}
.card .cat{color:var(--copper);font-size:10px;letter-spacing:.16em;font-weight:400}
.card h3{font-size:22px;line-height:1.26;margin:9px 0 8px;font-weight:500}
.card p{font-size:15.5px;color:var(--muted)}
.card:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.25fr 1fr;
  gap:34px;align-items:center;padding-bottom:40px;border-bottom:3px double var(--hair)}
.card:first-child .pad{padding:0}
.card:first-child h3{font-size:36px;line-height:1.14}
.card:first-child p{font-size:17px}
.sectionhead{font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:var(--muted);
  font-weight:400;margin:40px 0 0;padding-bottom:10px;border-bottom:1px solid var(--hair)}
@media(max-width:860px){
  .grid{grid-template-columns:1fr;gap:34px}
  .card:first-child{grid-template-columns:1fr;gap:16px}
  .card:first-child h3{font-size:27px}
}

/* Article: the document. Mono meta, ruled hero, plain TOC. */
article.post{max-width:700px;padding-top:46px}
article.post .cat{font-size:10px;letter-spacing:.18em;color:var(--copper)}
article.post .meta{font-size:11px;letter-spacing:.06em;text-transform:uppercase}
article.post h1{font-size:clamp(29px,4.4vw,42px);line-height:1.14}
article.post h2{font-size:27px;font-weight:500;margin-top:42px}
article.post .heroimg{border-radius:0;border:1px solid var(--hair)}
.toc{background:transparent;border:0;border-top:3px double var(--hair);border-radius:0;padding:14px 0 0}
.toc-title{font-size:9px;letter-spacing:.2em;color:var(--muted);font-weight:400}
.toc a{font-size:12.5px}
figure.fig{border-radius:0}