/* LOA_B writing stylesheet: shared tokens, header, capture, and footer lifted verbatim from the locked About page, plus the essay template. */

:root{
  --navy:#112540; --navy-hi:#1B3763; --ink:#182333; --ivory:#FAF9F5; --parch:#EFEBE2;
  --oxblood:#AF3545; --oxblood-hover:#8F2A37; --oxblood-lite:#C85B68; --slate:#69727A; --body:#2B333E;
  --line:rgba(24,35,51,0.13); --pale:#E8EBEC;
  --serif:'Source Serif 4', Georgia, serif; --sans:'Source Sans 3', system-ui, -apple-system, sans-serif;
}
*{margin:0; padding:0; box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--ivory); color:var(--ink); font-family:var(--serif); -webkit-font-smoothing:antialiased;}
img,svg{display:block;}
.wrap{max-width:1200px; margin:0 auto; padding:0 48px;}
.col{max-width:720px;}
.eyebrow{font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--oxblood); display:inline-flex; align-items:center; gap:12px;}
.eyebrow .tick{width:26px; height:1px; background:var(--oxblood); display:inline-block; flex:0 0 auto;}
.cta{font-family:var(--sans); font-size:17px; font-weight:600; color:var(--oxblood); text-decoration:none;
  display:inline-flex; align-items:center; gap:9px;}
.cta svg{width:19px; height:19px;}
.btn{font-family:var(--sans); font-size:16px; font-weight:600; background:var(--navy); color:var(--ivory);
  border:none; border-radius:2px; height:52px; padding:0 28px; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;}
.field{font-family:var(--sans); font-size:16px; color:var(--ink); background:#fff;
  border:1px solid rgba(24,35,51,0.24); border-radius:2px; height:52px; padding:0 16px; width:340px; max-width:100%;}
.field::placeholder{color:var(--slate);}

/* ---------- INTERIOR HEADER (sticky, ivory, hairline)—the interior template ---------- */
.site{position:sticky; top:0; z-index:50; background:rgba(250,249,245,0.92); backdrop-filter:saturate(1.1) blur(6px); border-bottom:1px solid var(--line);}
.site .wrap{height:72px; display:flex; align-items:center; justify-content:space-between;}
.site .wm{font-family:var(--sans); font-weight:700; font-size:16px; letter-spacing:.20em; color:var(--navy); text-decoration:none;}
.site .lk{display:flex; gap:28px; margin-left:auto; margin-right:28px;}
.site .lk a{font-family:var(--sans); font-weight:500; font-size:15px; color:var(--ink); text-decoration:none; opacity:.9;}
.site .lk a.active{color:var(--oxblood); opacity:1;}
.site .sub{background:var(--navy); color:var(--ivory); font-family:var(--sans); font-weight:600; font-size:14px; letter-spacing:.02em; height:40px; padding:0 18px; border-radius:2px; display:inline-flex; align-items:center; text-decoration:none;}
.site .burger{display:none; background:none; border:0; padding:0; cursor:pointer; line-height:0;}

/* ---------- CAPTURE (ivory)—lifted from the locked homepage ---------- */
.cap{background:var(--ivory); padding:100px 0; border-top:1px solid var(--line);}
.cap .eyebrow{margin:0 0 22px;}
.cap h2{font-family:var(--serif); font-weight:600; font-size:42px; line-height:1.1; letter-spacing:-.012em; color:var(--ink); margin:0;}
.cap p.body{font-family:var(--serif); font-size:20px; line-height:1.6; color:var(--body); margin:22px 0 0; max-width:62ch;}
.cap .row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin:30px 0 0;}
.cap .rownote{font-family:var(--sans); font-size:13px; color:var(--slate); margin:14px 0 0;}
.cap .rule{height:1px; background:var(--line); margin:50px 0 0; max-width:760px;}
.cap .tool{margin:26px 0 0; max-width:760px;}
.cap .tool p{font-family:var(--serif); font-size:17px; line-height:1.55; color:var(--slate); margin:0;}
.cap .tool a{font-family:var(--sans); font-size:15px; font-weight:600; color:var(--oxblood); text-decoration:none; display:inline-flex; align-items:center; gap:7px; margin:10px 0 0;}
.cap .tool a svg{width:16px; height:16px;}

/* ---------- FOOTER (navy)—lifted from the locked homepage ---------- */
footer{background:var(--navy); color:var(--ivory); padding:60px 0 44px;}
footer .foot-top{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; padding-bottom:30px; border-bottom:1px solid rgba(250,249,245,0.14);}
footer .wm{font-family:var(--sans); font-weight:700; font-size:17px; letter-spacing:.20em; color:var(--ivory);}
footer .signoff{font-family:var(--serif); font-style:italic; font-size:19px; color:var(--ivory); display:inline-flex; align-items:center; gap:11px; margin:0;}
footer .signoff .tick{width:22px; height:1px; background:var(--oxblood-lite); display:inline-block;}
footer .foot-cols{display:flex; gap:72px; flex-wrap:wrap; padding:36px 0;}
footer .footcol{display:flex; flex-direction:column; gap:12px;}
footer .footcol h4{font-family:var(--sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--oxblood-lite); margin:0 0 6px; font-weight:600;}
footer .footcol a{font-family:var(--sans); font-size:15px; color:rgba(250,249,245,0.82); text-decoration:none;}
footer .foot-base{padding-top:24px; border-top:1px solid rgba(250,249,245,0.14); font-family:var(--sans); font-size:13px; color:rgba(250,249,245,0.55); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;}
footer .foot-base a{color:rgba(250,249,245,0.7); text-decoration:none;}

/* hover / focus micro-interactions */
.cta svg{transition:transform .25s ease;}
.cta:hover svg{transform:translateX(4px);}
.cap .tool a svg{transition:transform .25s ease;}
.cap .tool a:hover svg{transform:translateX(3px);}
.site .lk a{transition:color .2s ease, opacity .2s ease;}
.site .lk a:hover{color:var(--oxblood); opacity:1;}
.site .sub{transition:background .2s ease;}
.site .sub:hover{background:var(--navy-hi);}
.btn{transition:background .2s ease;}
.btn:hover{background:var(--navy-hi);}
.field{transition:border-color .2s ease, box-shadow .2s ease;}
.field:focus{outline:none; border-color:var(--oxblood); box-shadow:0 0 0 3px rgba(175,53,69,0.18);}
footer .footcol a{transition:color .2s ease;}
footer .footcol a:hover{color:var(--ivory);}
a:focus-visible,button:focus-visible{outline:2px solid var(--oxblood-lite); outline-offset:3px; border-radius:2px;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.001ms !important; animation-duration:.001ms !important;}
  .cta:hover svg,.cap .tool a:hover svg{transform:none !important;}
}


/* ==========================================================================
   ESSAY PAGE (LOA_B). Derived from repo Markdown by writing-intake/md_to_article.py.
   Locked order: back link, NN / TERRITORY, headline, dek, hero, 760px column,
   footnotes, publication details, Continue in the territory, subscribe, footer.
   No sidebar. No metadata above the fold. Typography: serif = the essay itself;
   sans = apparatus (eyebrow, back link, footnotes, publication details, labels).
   ========================================================================== */
.col-read{max-width:760px; margin:0 auto;}
.site .lk a.active{color:var(--oxblood); opacity:1;}
.article-open{background:var(--ivory); padding:72px 0 40px;}
.article-open .back{font-family:var(--sans); font-size:14px; font-weight:500; color:var(--slate); text-decoration:none; display:inline-flex; align-items:center; gap:7px; margin:0 0 30px;}
.article-open .back svg{width:15px; height:15px;}
.article-open .back:hover{color:var(--oxblood);}
.teyebrow{display:block; font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin:0 0 22px;}
.teyebrow .tnum{color:var(--oxblood); font-variant-numeric:tabular-nums;}
.teyebrow .tslash{color:var(--slate); margin:0 10px;}
.teyebrow a{color:var(--oxblood); text-decoration:none;}
.teyebrow a:hover{text-decoration:underline; text-underline-offset:4px;}
.article-open h1{font-family:var(--serif); font-weight:600; font-size:50px; line-height:1.1; letter-spacing:-.014em; color:var(--ink); margin:0; text-wrap:balance;}
.article-open .dek{font-family:var(--serif); font-size:23px; line-height:1.5; color:var(--body); margin:22px 0 0; text-wrap:pretty;}
.article-hero{margin:8px auto 0; max-width:1040px; padding:0 48px;}
.article-hero img{width:100%; height:auto; display:block; border-radius:2px;}
.article-hero figcaption{font-family:var(--sans); font-size:13px; color:var(--slate); margin:10px 0 0;}
.article-body{background:var(--ivory); padding:56px 0 24px;}
.article-body p,.article-body li{font-family:var(--serif); font-size:20px; line-height:1.72; color:var(--ink);}
.article-body p{margin:0 0 1.15em;}
.article-body h2{font-family:var(--serif); font-weight:600; font-size:30px; line-height:1.2; letter-spacing:-.008em; color:var(--ink); margin:1.9em 0 .6em;}
.article-body h3{font-family:var(--serif); font-weight:600; font-size:23px; line-height:1.3; color:var(--ink); margin:1.6em 0 .5em;}
.article-body a{color:var(--oxblood); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;}
.article-body a:hover{color:var(--oxblood-hover);}
.article-body strong{font-weight:600;}
.article-body blockquote{margin:1.6em 0; padding:2px 0 2px 26px; border-left:2px solid var(--oxblood);}
.article-body blockquote p{font-style:italic; font-size:22px; line-height:1.6; color:var(--ink); margin:0;}
.article-body hr{border:0; height:1px; width:120px; background:var(--line); margin:2.6em auto;}
.article-body figure{margin:2em 0;}
.article-body figure img{width:100%; height:auto; display:block; border-radius:2px;}
.fnref a{font-family:var(--sans); font-size:.62em; font-weight:600; color:var(--oxblood); text-decoration:none; padding:0 1px; vertical-align:super; line-height:0;}
.article-foot{padding:28px 0 0;}
.article-foot .fn-head{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); padding:28px 0 0; border-top:1px solid var(--line); margin:0 0 16px;}
.article-foot .fn-head a{color:var(--oxblood); text-decoration:underline; text-underline-offset:3px;}
.footnotes{list-style:none; margin:0; padding:0;}
.footnotes li{font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--body); margin:0 0 12px; display:grid; grid-template-columns:28px 1fr; scroll-margin-top:96px;}
.footnotes .fn-n{color:var(--oxblood); font-weight:600;}
.footnotes a{color:var(--oxblood); text-decoration:underline; text-underline-offset:2px; word-break:break-word;}
.footnotes .fn-back{text-decoration:none; margin-left:6px;}
.article-meta{padding:34px 0 0;}
.article-meta .inner{border-top:1px solid var(--line); padding:22px 0 0;}
.article-meta p{font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--slate); margin:0 0 6px;}
.article-meta a{color:var(--body); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line);}
.article-meta a:hover{color:var(--oxblood);}
.article-meta .sep{margin:0 6px;}
.terr-continue{background:var(--parch); margin:84px 0 0; padding:72px 0 80px;}
.terr-continue .lbl{font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--oxblood); margin:0 0 12px;}
.terr-continue h2{font-family:var(--serif); font-weight:600; font-size:32px; line-height:1.15; color:var(--ink); margin:0 0 34px;}
.rel-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin:0 0 34px;}
.rel-card{display:block; text-decoration:none; border-top:2px solid var(--ink); padding:20px 0 0;}
.rel-card h3{font-family:var(--serif); font-weight:600; font-size:21px; line-height:1.28; color:var(--ink); margin:0 0 10px; transition:color .2s ease;}
.rel-card p{font-family:var(--sans); font-size:15px; line-height:1.55; color:var(--body); margin:0;}
.rel-card:hover h3{color:var(--oxblood);}
.terr-continue .explore{font-family:var(--sans); font-size:16px; font-weight:600; color:var(--oxblood); text-decoration:none; display:inline-flex; align-items:center; gap:8px;}
.terr-continue .explore svg{width:18px; height:18px; transition:transform .25s ease;}
.terr-continue .explore:hover svg{transform:translateX(4px);}
.cap{border-top:0;}
a:focus-visible,button:focus-visible{outline:2px solid var(--oxblood-lite); outline-offset:3px; border-radius:2px;}
footer .footcol a[aria-current]{color:var(--ivory);}
@media (max-width:1024px){
  .wrap{padding:0 40px;}
  .article-open h1{font-size:42px;}
  .article-hero{padding:0 40px;}
  .rel-cards{grid-template-columns:1fr; gap:22px;}
  .cap h2{font-size:36px;}
}
@media (max-width:640px){
  .wrap{padding:0 24px;}
  .site .wrap{height:60px;}
  .site .lk,.site .sub{display:none;}
  .site .burger{display:block;}
  .article-open{padding:44px 0 28px;}
  .article-open .back{margin-bottom:22px;}
  .teyebrow{font-size:12px; letter-spacing:.12em; line-height:1.6;}
  .article-open h1{font-size:34px; line-height:1.14;}
  .article-open .dek{font-size:19px;}
  .article-hero{padding:0;}
  .article-hero img{border-radius:0;}
  .article-body{padding:36px 0 16px;}
  .article-body p,.article-body li{font-size:18px; line-height:1.7;}
  .article-body h2{font-size:25px;}
  .article-body h3{font-size:20px;}
  .article-body blockquote{padding-left:18px;}
  .article-body blockquote p{font-size:19px;}
  .terr-continue{margin-top:60px; padding:52px 0 58px;}
  .terr-continue h2{font-size:26px;}
  .cap{padding:64px 0;}
  .cap h2{font-size:29px;}
  .cap p.body{font-size:17px; max-width:none;}
  .cap .row{flex-direction:column; align-items:stretch; gap:12px;}
  .cap .field{width:100%;}
  .cap .btn{width:100%;}
  footer{padding:48px 0 36px;}
  footer .foot-cols{gap:32px; padding:32px 0;}
}
@media (prefers-reduced-motion: reduce){ *{transition-duration:.001ms !important;} }

/* ==========================================================================
   WRITING HUB (/writing/ + /writing/archive/). A publication front, not a feed:
   opening, lead article, territory rows (the homepage device), latest articles,
   archive. Rows never cards; numerals belong to territories; dates are quiet metadata.
   ========================================================================== */
.hub-open{background:var(--ivory); padding:96px 0 56px;}
.hub-open .eyebrow{margin:0 0 22px;}
.hub-open h1{font-family:var(--serif); font-weight:600; font-size:52px; line-height:1.08; letter-spacing:-.014em; color:var(--ink); margin:0; max-width:18ch;}
.hub-open .lede{font-family:var(--serif); font-size:21px; line-height:1.6; color:var(--body); margin:24px 0 0; max-width:62ch;}
.hub-open .lede a{color:var(--oxblood); text-underline-offset:3px;}
.hub-open .back{font-family:var(--sans); font-size:14px; font-weight:500; color:var(--slate); text-decoration:none; display:inline-flex; align-items:center; gap:7px; margin:0 0 28px;}
.hub-open .back svg{width:15px; height:15px;}
.hub-open.arch h1{font-size:44px; max-width:none;}
.lbl{font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--slate); margin:0 0 14px;}
.hub-lead{background:var(--ivory); padding:0 0 88px;}
.lead{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:56px; align-items:center; border-top:1px solid var(--line); padding-top:48px;}
.lead.noimg{grid-template-columns:1fr;}
.lead-img img{width:100%; height:auto; display:block; border-radius:2px;}
.lead-copy .lbl{color:var(--oxblood);}
.lead-copy .teyebrow{margin:0 0 16px; font-size:12px;}
.lead-copy h2{font-family:var(--serif); font-weight:600; font-size:36px; line-height:1.14; letter-spacing:-.01em; margin:0; text-wrap:balance;}
.lead-copy h2 a{color:var(--ink); text-decoration:none; transition:color .2s ease;}
.lead-copy h2 a:hover{color:var(--oxblood);}
.lead-copy .dek{font-family:var(--serif); font-size:19px; line-height:1.55; color:var(--body); margin:16px 0 0;}
.lead-copy .date{font-family:var(--sans); font-size:14px; color:var(--slate); margin:16px 0 0;}
.lead-copy .read{font-family:var(--sans); font-size:16px; font-weight:600; color:var(--oxblood); text-decoration:none; display:inline-flex; align-items:center; gap:8px; margin:22px 0 0;}
.lead-copy .read svg,.hub-latest .more svg{width:18px; height:18px; transition:transform .25s ease;}
.lead-copy .read:hover svg,.hub-latest .more:hover svg{transform:translateX(4px);}
.hub-terr{background:var(--parch); padding:80px 0 88px; scroll-margin-top:72px;}
.hub-terr .terr .t{display:grid; grid-template-columns:56px 1fr auto 28px; gap:26px; align-items:baseline; padding:30px 0; border-top:1px solid rgba(24,35,51,0.16); text-decoration:none;}
.hub-terr .terr .t:last-child{border-bottom:1px solid rgba(24,35,51,0.16);}
.hub-terr .t .n{font-family:var(--sans); font-weight:600; font-size:15px; letter-spacing:.06em; color:var(--oxblood); font-variant-numeric:tabular-nums;}
.hub-terr .t .b h3{font-family:var(--serif); font-weight:600; font-size:27px; line-height:1.15; color:var(--ink); margin:0 0 6px; transition:color .2s ease;}
.hub-terr .t .b p{font-family:var(--sans); font-size:15px; line-height:1.55; color:var(--slate); margin:0; max-width:70ch;}
.hub-terr .t .c{font-family:var(--sans); font-size:14px; color:var(--slate); white-space:nowrap; font-variant-numeric:tabular-nums;}
.hub-terr .t .go{align-self:center; color:var(--oxblood); opacity:.4; transition:opacity .2s ease, transform .25s ease;}
.hub-terr .t .go svg{width:18px; height:18px; display:block;}
.hub-terr .t:hover .b h3{color:var(--oxblood);}
.hub-terr .t:hover .go{opacity:1; transform:translateX(4px);}
.hub-latest{background:var(--ivory); padding:80px 0 96px;}
.alist{border-top:1px solid var(--line);}
.arow{display:block; text-decoration:none; padding:24px 0 26px; border-bottom:1px solid var(--line);}
.arow .meta{font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin:0 0 8px; display:flex; justify-content:space-between; gap:20px;}
.arow .meta .tn{color:var(--oxblood);}
.arow .meta .tslash,.lead-copy .tslash{color:var(--slate); margin:0 8px;}
.arow .meta .tnum{color:var(--oxblood);}
.arow .meta .d{color:var(--slate); font-weight:400; letter-spacing:.02em; text-transform:none; font-size:13px; white-space:nowrap;}
.arow h3{font-family:var(--serif); font-weight:600; font-size:25px; line-height:1.22; color:var(--ink); margin:0; max-width:40ch; transition:color .2s ease;}
.arow .dek{font-family:var(--sans); font-size:16px; line-height:1.55; color:var(--body); margin:8px 0 0; max-width:70ch;}
.arow:hover h3{color:var(--oxblood);}
.hub-latest .more{font-family:var(--sans); font-size:16px; font-weight:600; color:var(--oxblood); text-decoration:none; display:inline-flex; align-items:center; gap:8px; margin:34px 0 0;}
.ayear{margin:0 0 56px;}
.ayear .lbl{font-variant-numeric:tabular-nums;}
@media (max-width:1024px){
  .hub-open h1{font-size:44px;}
  .lead{grid-template-columns:1fr; gap:30px;}
  .hub-terr .terr .t{grid-template-columns:44px 1fr auto; gap:18px;}
  .hub-terr .t .go{display:none;}
}
@media (max-width:640px){
  .hub-open{padding:56px 0 36px;}
  .hub-open h1{font-size:36px;}
  .hub-open.arch h1{font-size:32px;}
  .hub-open .lede{font-size:18px;}
  .hub-lead{padding:0 0 60px;}
  .lead{padding-top:32px;}
  .lead-copy h2{font-size:28px;}
  .lead-copy .dek{font-size:17px;}
  .hub-terr{padding:56px 0 60px;}
  .hub-terr .terr .t{grid-template-columns:34px 1fr; gap:12px; padding:22px 0;}
  .hub-terr .t .c{grid-column:2; margin-top:4px;}
  .hub-terr .t .b h3{font-size:21px;}
  .hub-terr .t .b p{font-size:14px;}
  .hub-latest{padding:56px 0 64px;}
  .arow .meta{flex-direction:column; gap:4px;}
  .arow h3{font-size:21px;}
  .arow .dek{font-size:15px;}
}

/* hub pages are left-anchored like the rest of LOA_B; only essay pages center the capture on the reading column */
.hub .cap .col-read{max-width:none; margin:0;}
.teyebrow .tname,.arow .meta .tname{color:var(--oxblood);}
.hub .cap{border-top:1px solid var(--line);}
.hub .hub-latest{padding-bottom:88px;}

/* ---------- TERRITORY PAGE (/writing/<territory>/) ---------- */
.terr-open{padding-bottom:48px;}
.tcoord{font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; margin:0 0 18px;}
.tcoord .tnum{color:var(--oxblood); font-variant-numeric:tabular-nums;}
.tcoord .tslash{color:var(--slate); margin:0 10px;}
.tcoord .tcount{color:var(--slate); font-weight:500; letter-spacing:.08em;}
.terr-open h1{max-width:20ch;}
.terr-open .lede{font-size:22px; max-width:52ch;}
.hub-latest.tl{padding-top:0;}
.hub-latest.also{padding-top:8px;}
.hub-latest .note{font-family:var(--sans); font-size:15px; color:var(--slate); margin:-6px 0 18px;}
.hub-latest .empty{font-family:var(--serif); font-size:19px; color:var(--slate); border-top:1px solid var(--line); padding-top:28px; margin:0;}
.arow .meta .tn:empty{display:none;}
@media (max-width:640px){ .terr-open .lede{font-size:18px;} }

button.btn{cursor:pointer; font-family:var(--sans);}
button.btn:disabled{opacity:.6; cursor:default;}

/* QA 2026-09-28: long bare URLs must wrap on phones */
.footnotes .fn-t{min-width:0; overflow-wrap:anywhere;}
.article-body p,.article-body li{overflow-wrap:break-word;}