/* ==========================================================================
   The Advocate Path: /blog (src/content/Blog.tsx, .pg-blog), the article pages and the admin previews
   (src/components/ArticleView.tsx, .pg-article) and the 404 page (src/app/not-found.tsx, .pg-404). The article cards
   themselves (PostCard) are in inner.css. Hooks kept: .filter-pills .btn[data-cat] (.active), #postSearch,
   #postCount, #postGrid > [data-cat], #noPosts, #postPager, .progress-read, .article, .art-toc, [data-copy-link], the
   DB body classes figure.art-fig and .callout.
   ========================================================================== */

/* ==== /blog ===================================================================================================== */
.pg-blog .blog-head { padding-bottom: clamp(40px, 4vw, 60px); }
.blog-head-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
.blog-head-text { grid-column: 1 / span 7; }
.pg-blog .blog-head h1 { max-width: 12em; font-size: clamp(40px, 2.6vw + 30px, 64px); line-height: 1.02; letter-spacing: -0.022em; }
.blog-search { grid-column: 9 / span 4; padding-bottom: 4px; }
.blog-search .form-label { margin-bottom: 10px; color: var(--brass-ink); font: 400 var(--text-meta) / 1.3 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; }
.pg-blog #postSearch {
  min-height: 54px;
  padding: 12px 16px 12px 46px;
  border: 1px solid var(--line-ui);
  background: var(--white) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3ccircle cx='8.5' cy='8.5' r='5.75' fill='none' stroke='%235E1A2A' stroke-width='1.3'/%3e%3cpath d='M12.8 12.8l4.7 4.7' stroke='%235E1A2A' stroke-width='1.3'/%3e%3c/svg%3e") 16px center / 20px 20px no-repeat;
  font-size: 18px;
}
.pg-blog #postSearch:focus { border-color: var(--ox); background-color: var(--white); }
.pg-blog #postCount { margin: 12px 0 0; color: var(--muted-text); font: 400 var(--text-meta) / 1.3 var(--font-label); letter-spacing: 0.06em; }

/* the newest article: the photo in a tall frame with a bookmark over its top edge, the text beside it on parchment */
.pg-blog .blog-newest { padding: 0 0 clamp(64px, 6vw, 104px); }
.post-feature { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.pf-photo { position: relative; grid-column: 1 / span 5; margin: 14px; aspect-ratio: 4 / 5; }
.pf-photo::before { content: ""; position: absolute; inset: -14px; border: 1px solid var(--brass); pointer-events: none; }
.pf-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.pf-ribbon {
  position: absolute;
  z-index: 1;
  top: -21px;
  left: 28px;
  width: 30px;
  height: 84px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%);
}
.pf-ribbon::before { content: ""; position: absolute; left: 5px; right: 5px; top: 0; bottom: 13px; border-left: 1px dashed var(--brass); border-right: 1px dashed var(--brass); }
.pf-body { grid-column: 7 / span 6; }
.pf-cat { margin: 0 0 12px; color: var(--brass-ink); font: italic 400 clamp(18px, 0.3vw + 16.6px, 21px) / 1.3 var(--font-body); }
.post-feature h2 { margin: 0 0 20px; font-size: clamp(32px, 1.4vw + 22px, 44px); line-height: 1.08; letter-spacing: -0.016em; }
.post-feature h2 a { color: var(--ink-text); text-decoration: none; }
.post-feature h2 a:hover { color: var(--ox); text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.pf-sum { margin: 0 0 22px; font-size: var(--text-lede); line-height: 1.6; max-width: 30em; }
.pf-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 30px; padding-top: 16px; border-top: 1px solid var(--brass); max-width: 30em; color: var(--muted-text); font: 400 var(--text-meta) / 1.4 var(--font-label); letter-spacing: 0.05em; }
.pf-dot { color: var(--brass); }

/* the subjects: Courier labels on a brass rule, the open one oxblood with a short ribbon under it. "Read by subject" sits
   above the row, so all seven subjects fit on one rule from 1280 px; narrower, the row wraps with room for the ribbon
   (15 px) between the lines, so it never hangs over the subject below */
.pg-blog .blog-all { padding: 0 0 clamp(72px, 7vw, 112px); }
.blog-filter { display: block; margin-bottom: clamp(40px, 4vw, 56px); border-bottom: 1px solid var(--brass); }
.blog-label { margin: 0; padding: 0 0 8px; color: var(--muted-text); font: italic 400 17px / 1.3 var(--font-body); }
.pg-blog .filter-pills { display: flex; flex-wrap: wrap; gap: 26px clamp(18px, 2.2vw, 32px); }
@media (min-width: 1280px) {
  .pg-blog .filter-pills { flex-wrap: nowrap; justify-content: space-between; gap: 0 18px; }
  .pg-blog .filter-pills .btn { letter-spacing: 0.06em; }
}
.pg-blog .filter-pills .btn {
  --btn-fill: transparent;
  --btn-edge: transparent;
  position: relative;
  min-height: 52px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--ink-text);
  font: 400 var(--text-meta) / 1.3 var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pg-blog .filter-pills .btn::before { content: none; }
.pg-blog .filter-pills .btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -15px;
  width: 12px;
  height: 0;
  margin-left: -6px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 5px), 0 100%);
  transition: height 0.2s ease;
}
.pg-blog .filter-pills .btn:hover { color: var(--ox); text-decoration: none; }
.pg-blog .filter-pills .btn.active { color: var(--ox); font-weight: 700; }
.pg-blog .filter-pills .btn.active::after { height: 15px; }
.fp-n { margin-left: 4px; color: var(--brass-ink); font-weight: 400; }

/* the cards: three columns (main.js shows nine per page) */
.blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px var(--gutter); padding-top: 7px; }
.grid-cell { display: flex; min-width: 0; }
.grid-cell > .post-card { width: 100%; }
.pg-blog #noPosts { margin-top: 0; }

/* the page numbers: Courier, the current one oxblood with a short ribbon under it */
.blog-pager { margin-top: clamp(40px, 4vw, 56px); }
.pg-blog .pagination { justify-content: center; gap: 6px; margin: 0; }
.pg-blog .pagination .page-link { min-width: 44px; min-height: 44px; margin: 0; border: 0; border-radius: 0; background: none; color: var(--ink-text); font: 400 15px / 1 var(--font-label); position: relative; box-shadow: none; }
.pg-blog .page-link:hover { color: var(--ox); background: none; }
.pg-blog .pagination .page-item.active .page-link { color: var(--ox); font-weight: 700; box-shadow: inset 0 -2px 0 var(--ox); background: none; }
.pg-blog .page-item.disabled .page-link { color: var(--line-ui); }
.pg-blog .blog-note { max-width: 860px; margin-inline: auto; margin-top: clamp(48px, 5vw, 72px); }

/* ==== the article page ========================================================================================== */
/* the reading line: an oxblood hairline under the compact header */
.pg-article .progress-read { position: fixed; z-index: 1029; top: var(--header-h-scrolled); left: 0; width: 0; height: 2px; background: var(--ox); pointer-events: none; }

.pg-article .article-head { padding: clamp(24px, 2.6vw, 40px) 0 clamp(48px, 4.6vw, 72px); }
.ah-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.ah-text { grid-column: 1 / span 7; }
.pg-article .article-head h1 { max-width: 15em; margin: 0 0 20px; font-size: var(--text-h1); line-height: 1.07; letter-spacing: -0.018em; text-wrap: balance; }
.pg-article .article-head .lede { max-width: 32em; margin: 0 0 28px; font: italic 400 clamp(19px, 0.4vw + 17px, 22px) / 1.55 var(--font-body); }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding-top: 18px; border-top: 1px solid var(--brass); max-width: 40em; }
.art-meta-line { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; max-width: none; color: var(--muted-text); font: 400 var(--text-meta) / 1.5 var(--font-label); letter-spacing: 0.05em; }
.art-meta-line > span + span::before { content: "\00b7"; margin: 0 10px; color: var(--brass); }
/* Share: not a second (outlined) button but a Courier text link with a brass underline and a small line drawing of the
   share sign (1.25 px, oxblood). The hook [data-copy-link] and its tooltip ("Copy link", then "Copied!") stay. */
.pg-article .art-meta [data-copy-link] {
  --btn-fill: transparent;
  --btn-edge: transparent;
  min-height: 44px;
  padding: 0 2px;
  gap: 8px;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--ox);
  font: 400 var(--text-meta) / 1 var(--font-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
.pg-article .art-meta [data-copy-link]::before {
  content: "";
  position: static;
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.25'%3e%3ccircle cx='12.5' cy='3.5' r='2'/%3e%3ccircle cx='3.5' cy='8' r='2'/%3e%3ccircle cx='12.5' cy='12.5' r='2'/%3e%3cpath d='M5.3 7.1l5.4-2.7M5.3 8.9l5.4 2.7'/%3e%3c/svg%3e") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.25'%3e%3ccircle cx='12.5' cy='3.5' r='2'/%3e%3ccircle cx='3.5' cy='8' r='2'/%3e%3ccircle cx='12.5' cy='12.5' r='2'/%3e%3cpath d='M5.3 7.1l5.4-2.7M5.3 8.9l5.4 2.7'/%3e%3c/svg%3e") center / contain no-repeat;
}
.pg-article .art-meta [data-copy-link]:hover { color: var(--ink-text); text-decoration-color: var(--ox); }
/* the photo: a tall frame in a brass mat; the subject as a flat oxblood ribbon label across its lower edge, piped in
   parchment where it overhangs the frame */
.ah-photo { position: relative; grid-column: 9 / span 4; margin: 14px; aspect-ratio: 4 / 5; }
.ah-photo::before { content: ""; position: absolute; inset: -14px; border: 1px solid var(--brass); pointer-events: none; }
.ah-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.pg-article .ah-cat {
  position: absolute;
  left: -26px;
  bottom: 30px;
  z-index: 2;
  padding: 12px 34px;
  font: 700 16px / 1.25 var(--font-heading);
  color: var(--parchment);
  text-decoration: none;
  filter: drop-shadow(1.5px 0 0 var(--parchment)) drop-shadow(-1.5px 0 0 var(--parchment)) drop-shadow(0 1.5px 0 var(--parchment)) drop-shadow(0 -1.5px 0 var(--parchment));
}
.pg-article .ah-cat:hover { color: var(--white); background: var(--ox-deep); }
.pg-article .ah-cat:focus-visible { outline: 3px solid var(--ink-text); outline-offset: 3px; }

/* three columns on wide screens: the record and contents | the text | the request card, subjects, recent */
.pg-article .art-body { padding: clamp(24px, 2vw, 32px) 0 clamp(72px, 7vw, 112px); }
.art-grid { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 680px) minmax(260px, 300px); justify-content: space-between; column-gap: clamp(32px, 3.4vw, 56px); align-items: start; }
.art-record { align-self: stretch; }
.art-record-inner { position: sticky; top: calc(var(--header-h-scrolled) + 40px); }
.art-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 0 0 30px; border-top: 1px solid var(--brass); }
.art-facts > div { padding: 12px 0; border-bottom: 1px solid var(--line-hair); }
.art-facts dt { margin: 0 0 4px; color: var(--brass-ink); font: 400 12px / 1.2 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; }
.art-facts dd { margin: 0; color: var(--ink-text); font-size: 15px; line-height: 1.35; }
.pg-article .art-toc h4 { margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--brass); color: var(--brass-ink); font: 400 var(--text-meta) / 1.3 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; }
.pg-article .art-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.pg-article .art-toc li { position: relative; max-width: none; counter-increment: toc; border-bottom: 1px solid var(--line-hair); }
.pg-article .art-toc a { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); padding: 10px 0 10px 0; color: var(--ink-text); font-size: 15px; line-height: 1.4; text-decoration: none; transition: color 0.18s ease; }
.pg-article .art-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--brass-ink); font: 400 12px / 1.8 var(--font-label); letter-spacing: 0.06em; }
.pg-article .art-toc a:hover { color: var(--ox); }
/* the ribbon marker: the section being read gets a short oxblood ribbon in the margin and oxblood type */
.pg-article .art-toc a.is-current { color: var(--ox); }
.pg-article .art-toc a.is-current::after {
  content: "";
  position: absolute;
  left: -22px;
  top: -1px;
  width: 12px;
  height: 30px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 5px), 0 100%);
}

/* the text: Caslon 19 / 1.7 at about 64 characters; the first paragraph is the italic lead (no drop cap) */
.pg-article .article { min-width: 0; font-size: 19px; line-height: 1.7; }
.pg-article .article > p, .pg-article .article > ul > li, .pg-article .article > ol > li { max-width: 34em; }
.pg-article .article > p { margin: 0 0 1.15em; }
.pg-article .article > p:first-child { margin-bottom: 1.4em; font: italic 400 clamp(20px, 0.4vw + 18px, 22px) / 1.6 var(--font-body); color: var(--ink-text); }
.pg-article .article h2 { margin: 1.9em 0 0.6em; max-width: 20em; font-size: clamp(26px, 0.8vw + 20.6px, 32px); line-height: 1.15; scroll-margin-top: calc(var(--header-h-scrolled) + 28px); }
.pg-article .article h3 { margin: 1.6em 0 0.5em; font-size: clamp(20px, 0.3vw + 18.6px, 22px); line-height: 1.25; }
.pg-article .article ul { margin: 0 0 1.3em; padding: 0; list-style: none; }
.pg-article .article ul > li { position: relative; padding: 0 0 0.5em 28px; }
.pg-article .article ul > li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.5em;
  width: 9px;
  height: 13px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}
.pg-article .article ol { margin: 0 0 1.3em; padding-left: 1.6em; }
.pg-article .article ol > li { padding: 0 0 0.5em 6px; }
.pg-article .article ol > li::marker { color: var(--ox); font: 400 15px var(--font-label); }
.pg-article .article a { color: var(--ox); text-decoration-color: var(--brass); }
.pg-article .article a:hover { color: var(--ink-text); text-decoration-color: var(--ox); }
.pg-article .article strong { color: var(--ink-text); }
/* figures from the admin: the photo across the column, the caption under a brass rule */
.pg-article .article .art-fig { margin: 2em 0; }
.pg-article .article .art-fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.pg-article .article .art-fig figcaption { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--brass); color: var(--muted-text); font: italic 400 15px / 1.5 var(--font-body); max-width: none; }
/* a note from the admin: white, bound by a ribbon down its left edge */
.pg-article .article .callout {
  position: relative;
  margin: 1.8em 0;
  padding: 18px 22px 18px 52px;
  background: var(--white);
  border: 1px solid var(--line-hair);
  font-size: 17px;
  line-height: 1.6;
}
.pg-article .article .callout::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 18px;
  width: 14px;
  height: calc(100% + 8px);
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 7px), 0 100%);
}
.pg-article .article .callout p { margin: 0; font: italic 400 18px / 1.55 var(--font-body); }
.pg-article .article .callout p + p { margin-top: 0.8em; }
.pg-article .article .art-note { margin-top: 2.6em; }
/* where to go from here: an oxblood panel with a bookmark piped in parchment hanging over its top edge at the right, so
   the heading, the rules and the link rows share one left edge */
.pg-article .art-next {
  position: relative;
  margin: 3em 0 0;
  padding: 44px clamp(24px, 3vw, 40px) 28px;
  background: var(--ox);
  color: var(--parchment);
  box-shadow: inset 0 0 0 6px var(--ox), inset 0 0 0 7px var(--brass);
}
.art-next-mark {
  position: absolute;
  top: -12px;
  right: clamp(24px, 3vw, 40px);
  width: 24px;
  height: 58px;
  background: var(--ox);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%);
  filter: drop-shadow(1.5px 0 0 var(--parchment)) drop-shadow(-1.5px 0 0 var(--parchment)) drop-shadow(0 1.5px 0 var(--parchment));
}
.art-next-mark::before { content: ""; position: absolute; left: 4px; right: 4px; top: 0; bottom: 11px; border-left: 1px dashed var(--brass); border-right: 1px dashed var(--brass); }
.pg-article .art-next h3 { margin: 0 0 14px; padding-right: 44px; color: var(--parchment); font-size: 24px; }
.pg-article .art-next ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(217, 184, 113, 0.5); }
/* stronger than the article's list rule (.pg-article .article ul > li: 28 px for the ribbon bullet) */
.pg-article .article .art-next ul > li { max-width: none; padding: 0; border-bottom: 1px solid rgba(217, 184, 113, 0.5); }
.pg-article .article .art-next ul > li::before { content: none; }
.pg-article .art-next a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; color: var(--parchment); font-size: 18px; line-height: 1.4; text-decoration: none; }
.pg-article .art-next a svg { flex: none; width: 20px; height: 12px; color: var(--brass-light); transition: transform 0.18s ease; }
.pg-article .art-next a:hover { color: var(--white); }
.pg-article .art-next a:hover svg { transform: translateX(3px); }
.pg-article .art-next a:focus-visible { outline-color: var(--parchment); }
/* older and newer */
.pg-article .prevnext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gutter); margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--brass); }
.pg-article .prevnext a { display: block; color: var(--ink-text); text-decoration: none; }
.pg-article .prevnext .next { text-align: right; }
.pg-article .prevnext small { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--brass-ink); font: 400 var(--text-meta) / 1.3 var(--font-label); letter-spacing: 0.12em; text-transform: uppercase; }
.pg-article .prevnext .next small { justify-content: flex-end; }
.pg-article .prevnext small svg { width: 18px; height: 11px; color: var(--ox); }
.pg-article .prevnext .pn-title { display: block; font-size: 18px; line-height: 1.4; }
.pg-article .prevnext a:hover .pn-title { color: var(--ox); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 4px; }

/* the margin on the right: the request card, the subjects, recent articles */
.art-aside { min-width: 0; }
.pg-article .art-aside .side-card.cta { margin-bottom: 40px; }
.art-side { margin: 0 0 36px; }
.art-side h4 { margin: 0 0 4px; padding-bottom: 12px; border-bottom: 1px solid var(--brass); color: var(--brass-ink); font: 400 var(--text-meta) / 1.3 var(--font-label); letter-spacing: 0.14em; text-transform: uppercase; }
.subj-index, .art-recent { margin: 0; padding: 0; list-style: none; }
.subj-index li, .art-recent li { max-width: none; border-bottom: 1px solid var(--line-hair); }
.subj-index a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 0; color: var(--ink-text); font-size: 16px; line-height: 1.35; text-decoration: none; }
.subj-index a:hover, .subj-index a.is-current { color: var(--ox); }
.subj-index a.is-current .si-name { font-weight: 700; }
.si-n { color: var(--brass-ink); font: 400 var(--text-meta) / 1 var(--font-label); }
.art-recent li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: start; padding: 14px 0; }
.art-recent img { display: block; width: 64px; height: 64px; object-fit: cover; }
.art-recent a { display: block; color: var(--ink-text); font-size: 15px; line-height: 1.4; text-decoration: none; }
.art-recent a:hover { color: var(--ox); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 3px; }
.art-recent small { display: block; margin-top: 6px; color: var(--muted-text); font: 400 12px / 1.3 var(--font-label); letter-spacing: 0.05em; }

/* keep reading */
.pg-article .art-more { padding-top: 0; }
.art-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px var(--gutter); padding-top: 7px; }

/* ==== the 404 page: a notice bound by a ribbon ================================================================== */
.pg-404 .nf-screen { padding: clamp(28px, 3vw, 44px) 0 clamp(96px, 9vw, 144px); }
.nf-page {
  position: relative;
  max-width: 860px;
  margin: clamp(20px, 3vw, 40px) auto 0;
  padding: clamp(48px, 5vw, 68px) clamp(24px, 5vw, 76px) clamp(44px, 4.6vw, 64px) clamp(64px, 7vw, 104px);
  background: var(--white);
  border: 1px solid var(--line-hair);
}
.nf-page::before, .nf-page::after { content: ""; position: absolute; pointer-events: none; }
.nf-page::before { left: clamp(18px, 2.4vw, 34px); top: -1px; bottom: -40px; width: 22px; background: var(--ox); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 11px), 0 100%); }
.nf-page::after { left: calc(clamp(18px, 2.4vw, 34px) + 5px); top: 0; bottom: -28px; width: 12px; border-left: 1px dashed var(--brass); border-right: 1px dashed var(--brass); }
.nf-page .in-kicker { max-width: 26em; margin-bottom: 26px; }
.pg-404 .nf-page h1 { margin: 0 0 18px; max-width: 13em; font-size: var(--text-h1); line-height: 1.06; letter-spacing: -0.018em; }
.pg-404 .nf-page .lede { margin: 0 0 34px; max-width: 30em; font-size: var(--text-lede); line-height: 1.6; }
.nf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 44px; padding-top: 28px; border-top: 1px solid var(--line-hair); }
.nf-links { display: flex; flex-wrap: wrap; gap: 6px 30px; }
.nf-links a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 0; color: var(--ink-text); font: italic 400 18px / 1.3 var(--font-body); text-decoration: underline; text-decoration-color: var(--brass); text-underline-offset: 5px; }
.nf-links a svg { width: 18px; height: 11px; color: var(--ox); transition: transform 0.18s ease; }
.nf-links a:hover { color: var(--ox); }
.nf-links a:hover svg { transform: translateX(3px); }
.nf-links > li::before { top: 1.05em; }

/* ==== narrower screens =========================================================================================== */
@media (max-width: 1279.98px) {
  /* articles: two columns (text | margin); the record and contents sit above the text */
  .art-grid { grid-template-columns: minmax(0, 1fr) minmax(250px, 290px); }
  .art-record { grid-column: 1; }
  .art-record-inner { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0 var(--gutter); margin-bottom: 40px; }
  .art-grid > .article { grid-column: 1; grid-row: 2; }
  .art-aside { grid-column: 2; grid-row: 1 / span 2; }
  .pg-article .art-toc a.is-current::after { content: none; }
}
@media (max-width: 1199.98px) {
  /* the head: the photo moves under the text, wide */
  .ah-text { grid-column: 1 / span 12; }
  .ah-photo { grid-column: 1 / span 12; margin-top: 44px; aspect-ratio: 21 / 9; }
  .blog-grid, .art-more-grid { gap: 28px 20px; }
}
@media (max-width: 991.98px) {
  .blog-head-grid { display: block; }
  .blog-search { max-width: 480px; margin-top: 32px; }
  .post-feature { display: block; }
  .pf-photo { aspect-ratio: 16 / 10; margin-bottom: 44px; }
  .blog-label { padding: 0 0 4px; }
  .blog-grid, .art-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .art-grid { display: block; }
  .art-record-inner { grid-template-columns: minmax(0, 1fr); }
  .art-aside { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--gutter); }
  .pg-article .art-aside .side-card.cta { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
  /* phones: the subjects two by two, the open one marked by a short ribbon at its left */
  .blog-filter { border-bottom: 0; }
  .pg-blog .filter-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; border-top: 1px solid var(--brass); }
  .pg-blog .filter-pills .btn { justify-content: space-between; gap: 10px; min-height: 48px; padding-left: 20px; border-bottom: 1px solid var(--line-hair); white-space: normal; text-align: left; }
  .pg-blog .filter-pills .btn::after { left: 2px; top: -1px; bottom: auto; margin: 0; width: 10px; }
  .pg-blog .filter-pills .btn.active::after { height: 20px; }
  .blog-grid, .art-more-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ah-photo { aspect-ratio: 4 / 3; margin-top: 36px; }
  .pg-article .ah-cat { left: -16px; bottom: 18px; padding: 10px 28px; font-size: 15px; }
  .art-meta { gap: 12px; }
  .art-meta-line { flex-direction: column; gap: 2px; }
  .art-meta-line > span + span::before { content: none; }
  .pg-article .article { font-size: 18px; }
  .pg-article .article > p:first-child { font-size: 20px; }
  .art-aside { display: block; }
  .pg-article .prevnext { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .pg-article .prevnext .next { text-align: left; }
  .pg-article .prevnext .next small { justify-content: flex-start; }
  .nf-page { padding: 56px 20px 40px 52px; }
  .nf-page::before { left: 14px; width: 18px; }
  .nf-page::after { left: 18px; width: 10px; }
  .nf-actions { flex-direction: column; align-items: stretch; }
  /* full width, its words centred: narrower side padding keeps "Start at the home page" on one line */
  .nf-actions .btn { width: 100%; --bs-btn-padding-x: 12px; }
  .nf-links { flex-direction: column; gap: 0; }
}
@media (max-width: 374.98px) {
  .nf-actions .btn { --bs-btn-font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-blog .filter-pills .btn::after, .pg-article .art-next a svg, .nf-links a svg, .pg-article .art-toc a { transition: none; }
}

/* ==== photos on every device: every head whole, at every size (photos + devices pass, 2026-10-15) ==================
   Head boxes for every photo are in the review notes; each rule below keeps every marked head whole at all 19 measured
   screen sizes. */
/* figures in the article text show the whole photo (the 3:2 crop cut heads in the wider, taller and portrait photos); a
   tall photo is held to 80% of the window height and centred */
.pg-article .article .art-fig img { width: auto; max-width: 100%; height: auto; max-height: 80vh; margin-inline: auto; aspect-ratio: auto; }
/* the article head photo: faces sit in the upper part of most photos (also for articles added later in the admin); the
   photos below get their own framing, and a wider frame where a tall one cannot hold every head */
.ah-img { object-position: 50% 25%; }
@media (min-width: 1200px) {
  .ah-img[src*="pexels-10383588-w1600."] { object-position: 50% 0%; }
  .ah-img[src*="pexels-3772616-w1600."] { object-position: 58% 25%; }
  .ah-img[src*="pexels-3867823-w1600."] { object-position: 67% 25%; }
  .ah-photo:has(> img[src*="pexels-39192333-w1600."]) { aspect-ratio: 1.5; }
  .ah-img[src*="pexels-39192333-w1600."] { object-position: 0% 25%; }
  .ah-img[src*="pexels-39204882-w1600."] { object-position: 82% 25%; }
  .ah-photo:has(> img[src*="pexels-3958383-c1440."]) { aspect-ratio: 1; }
  .ah-img[src*="pexels-3958383-c1440."] { object-position: 92% 0%; }
  .ah-photo:has(> img[src*="pexels-4343205-w1600."]) { aspect-ratio: 1; }
  .ah-img[src*="pexels-4343205-w1600."] { object-position: 54% 25%; }
  .ah-photo:has(> img[src*="pexels-5593720-w1600."]) { aspect-ratio: 1.25; }
  .ah-img[src*="pexels-5593720-w1600."] { object-position: 55% 25%; }
  .ah-img[src*="pexels-5622030-w1600."] { object-position: 39% 25%; }
  .ah-photo:has(> img[src*="pexels-5989935-w1600."]) { aspect-ratio: 1.5; }
  .ah-img[src*="pexels-5989935-w1600."] { object-position: 50% 25%; }
  .ah-photo:has(> img[src*="pexels-6809664-w1600."]) { aspect-ratio: 1; }
  .ah-img[src*="pexels-6809664-w1600."] { object-position: 32% 25%; }
  .ah-photo:has(> img[src*="pexels-7108395-w1600."]) { aspect-ratio: 1.25; }
  .ah-img[src*="pexels-7108395-w1600."] { object-position: 22% 25%; }
  .ah-img[src*="pexels-7504805-w1600."] { object-position: 22% 25%; }
  .ah-photo:has(> img[src*="pexels-7579319-w1600."]) { aspect-ratio: 1.25; }
  .ah-img[src*="pexels-7579319-w1600."] { object-position: 41% 25%; }
  .ah-photo:has(> img[src*="pexels-7731323-w1600."]) { aspect-ratio: 1.25; }
  .ah-img[src*="pexels-7731323-w1600."] { object-position: 100% 25%; }
  .ah-photo:has(> img[src*="pexels-8068836-w1600."]) { aspect-ratio: 1.25; }
  .ah-img[src*="pexels-8068836-w1600."] { object-position: 50% 25%; }
  .ah-photo:has(> img[src*="pexels-8069406-w1600."]) { aspect-ratio: 1.25; }
  .ah-img[src*="pexels-8069406-w1600."] { object-position: 0% 25%; }
  .ah-photo:has(> img[src*="pexels-8101981-w1600."]) { aspect-ratio: 1.25; }
  .ah-img[src*="pexels-8101981-w1600."] { object-position: 50% 25%; }
  .ah-photo:has(> img[src*="pexels-8123813-w1600."]) { aspect-ratio: 1; }
  .ah-img[src*="pexels-8123813-w1600."] { object-position: 12% 25%; }
  .ah-photo:has(> img[src*="pexels-8205410-w1600."]) { aspect-ratio: 1.5; }
  .ah-img[src*="pexels-8205410-w1600."] { object-position: 50% 25%; }
  .ah-img[src*="pexels-8292852-w1600."] { object-position: 81% 25%; }
  .ah-img[src*="pexels-8413157-c1440."] { object-position: 70% 25%; }
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .ah-img[src*="pexels-10383588-w1600."] { object-position: 50% 0%; }
  .ah-img[src*="pexels-19440815-w1600."] { object-position: 50% 4%; }
  .ah-img[src*="pexels-19963130-w1600."] { object-position: 50% 3%; }
  .ah-photo:has(> img[src*="pexels-29768245-w1600."]) { aspect-ratio: 2; }
  .ah-img[src*="pexels-29768245-w1600."] { object-position: 50% 10%; }
  .ah-img[src*="pexels-30571017-w1600."] { object-position: 50% 31%; }
  .ah-photo:has(> img[src*="pexels-3772616-w1600."]) { aspect-ratio: 2; }
  .ah-img[src*="pexels-3772616-w1600."] { object-position: 50% 13%; }
  .ah-img[src*="pexels-3855761-w1600."] { object-position: 50% 15%; }
  .ah-img[src*="pexels-39192333-w1600."] { object-position: 50% 0%; }
  .ah-img[src*="pexels-39204882-w1600."] { object-position: 50% 13%; }
  .ah-img[src*="pexels-3958383-c1440."] { object-position: 50% 0%; }
  .ah-img[src*="pexels-4343205-w1600."] { object-position: 50% 6%; }
  .ah-img[src*="pexels-5593720-w1600."] { object-position: 50% 20%; }
  .ah-img[src*="pexels-5622030-w1600."] { object-position: 50% 3%; }
  .ah-img[src*="pexels-5717573-w1600."] { object-position: 50% 4%; }
  .ah-img[src*="pexels-6169652-w1600."] { object-position: 50% 3%; }
  .ah-img[src*="pexels-7654428-w1600."] { object-position: 50% 6%; }
  .ah-img[src*="pexels-7731323-w1600."] { object-position: 50% 8%; }
  .ah-img[src*="pexels-7904456-w1600."] { object-position: 50% 0%; }
  .ah-img[src*="pexels-8068836-w1600."] { object-position: 50% 35%; }
  .ah-img[src*="pexels-8069406-w1600."] { object-position: 50% 8%; }
  /* a little less wide than 21:9, so the frame holds the main face (top 0.125) and the blurred head in the lower middle
     (to 0.77) together */
  .ah-photo:has(> img[src*="pexels-8101981-w1600."]) { aspect-ratio: 2.2; }
  .ah-img[src*="pexels-8101981-w1600."] { object-position: 50% 34%; }
  .ah-img[src*="pexels-8123813-w1600."] { object-position: 50% 0%; }
  .ah-img[src*="pexels-8292852-w1600."] { object-position: 50% 11%; }
  .ah-img[src*="pexels-8985457-w1600."] { object-position: 50% 0%; }
}
@media (max-width: 767.98px) {
  .ah-img[src*="pexels-10383588-w1600."] { object-position: 50% 0%; }
  .ah-img[src*="pexels-29768245-w1600."] { object-position: 50% 12%; }
  .ah-img[src*="pexels-39192333-w1600."] { object-position: 0% 25%; }
  .ah-img[src*="pexels-39204882-w1600."] { object-position: 52% 25%; }
  .ah-img[src*="pexels-7108395-w1600."] { object-position: 37% 25%; }
  .ah-img[src*="pexels-7731323-w1600."] { object-position: 100% 25%; }
  .ah-img[src*="pexels-8069406-w1600."] { object-position: 0% 25%; }
  .ah-img[src*="pexels-8123813-w1600."] { object-position: 49% 25%; }
  .ah-photo:has(> img[src*="pexels-8205410-w1600."]) { aspect-ratio: 1.5; }
  .ah-img[src*="pexels-8205410-w1600."] { object-position: 50% 25%; }
}
/* the page numbers under the article list wrap instead of running past the screen edge (on 320 px phones the seven
   44 px buttons needed 344 px); on the narrowest phones they close up to 40 px buttons with 2 px gaps */
.pg-blog .pagination { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 374.98px) {
  .pg-blog .pagination { column-gap: 2px; }
  .pg-blog .pagination .page-link { min-width: 40px; }
}

/* ==== every device looks finished (photos + devices pass, step 5, 2026-10-15) ======================================= */
/* the newest article's photo keeps the top of the frame (faces sit in the upper part of most photos, also of articles
   published later in the admin) */
.pf-photo img { object-position: 50% 25%; }
@media (max-width: 767.98px) {
  /* /blog on phones: the subject cells keep room above and below a three-line label ("Debt, benefits & estate" touched
     the rules) */
  .pg-blog .filter-pills .btn { padding-top: 10px; padding-bottom: 10px; }
  /* articles on phones: "Share" stands under the record lines (beside them it read as part of the "Published" line,
     and at 320 px it dropped below) */
  .art-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
}
/* /blog on phones: the page ends closer to the footer (about 120 px of empty parchment before; the note's ribbon tail
   keeps its 18 px) */
@media (max-width: 575.98px) {
  .pg-blog .blog-all { padding-bottom: 32px; }
}
/* the 404 page: the title breaks in balanced lines ("find" stood alone on a line at 320 px); under 375 px the bound page
   keeps a wider column, so "Start at the home page" stays on one line */
.pg-404 .nf-page h1 { text-wrap: balance; }
@media (max-width: 374.98px) {
  .nf-page { padding-left: 44px; padding-right: 14px; }
  .nf-page::before { left: 12px; width: 16px; }
  .nf-page::after { left: 15px; width: 10px; }
  .nf-actions .btn { --bs-btn-padding-x: 8px; --bs-btn-font-size: 16px; }
}
/* phones: the page numbers stay on one line (wrapped, the "next" arrow stood alone on a second line at 320 and 375 px);
   the buttons close up and, only when a list has many pages, narrow a little (never under 32 px; 41-44 px today) */
@media (max-width: 575.98px) {
  .pg-blog .pagination { flex-wrap: nowrap; column-gap: 0; }
  .pg-blog .pagination .page-item { flex: 0 1 44px; min-width: 32px; }
  .pg-blog .pagination .page-link { width: 100%; min-width: 0; }
}
/* /blog on tablets and small laptops (768-1279 px): the seven subjects as ruled cells, four to a row, the open one
   marked by a short ribbon at its left, as on phones (as a wrapped row the open subject's ribbon floated in the gap
   between the two lines and the brass rule ran only under the second line) */
@media (min-width: 768px) and (max-width: 1279.98px) {
  .blog-filter { border-bottom: 0; }
  .pg-blog .filter-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 20px; border-top: 1px solid var(--brass); }
  .pg-blog .filter-pills .btn { justify-content: space-between; gap: 10px; min-height: 48px; padding: 10px 0 10px 20px; border-bottom: 1px solid var(--line-hair); white-space: normal; text-align: left; }
  .pg-blog .filter-pills .btn::after { left: 2px; top: -1px; bottom: auto; margin: 0; width: 10px; }
  .pg-blog .filter-pills .btn.active::after { height: 20px; }
  .blog-label { padding: 0 0 4px; }
}
/* articles at 992-1279 px: the four facts keep their rows together beside the contents list (stretched to the list's
   height, the two rows drifted apart with a large gap between them) */
.art-facts { align-content: start; }
/* the 404 page under 360 px: "Start at the home page" on one line (at 16 px it needed about 190 px of the 186 px) */
@media (max-width: 359.98px) {
  .nf-actions .btn { --bs-btn-font-size: 15px; }
}

/* ==== every device looks finished (photos + devices pass, step 5 continued, 2026-10-16) ============================= */
/* articles from 992 px: the right column follows the reader. Categories and Recent articles stand at its top, the
   request card after them, held in view under the header down to the end of the article (the column ended after about
   1,100 px and left the rest of a 6,000-9,000 px article beside an empty column). The order in the page is unchanged */
@media (min-width: 992px) {
  .art-aside { align-self: stretch; display: flex; flex-direction: column; }
  .pg-article .art-aside .side-card.cta { order: 1; position: sticky; top: calc(var(--header-h-scrolled) + 40px); margin: 4px 0 0; }
}

/* ==== fresh-eyes device check (final fix, 2026-10-16) ==================================================================
   Findings of three fresh lookers who saw every page at 7 sizes; no wording changed anywhere. */
/* articles on tablets and phones: the related posts follow the side column after a normal section gap (about 108 px of
   empty parchment read as a missing block) */
@media (max-width: 991.98px) {
  .art-aside > :last-child { margin-bottom: 0; }
  .pg-article .art-body { padding-bottom: 56px; }
}
/* wide screens shown at 125 % (2200 px and up, 1300 px tall or more; frame.css): a figure keeps its 80 %-of-the-window
   limit (vh grows with the zoom) */
@media (min-width: 2200px) and (min-height: 1300px) {
  .pg-article .article .art-fig img { max-height: calc(80vh / 1.25); }
}

/* ==== in-between widths (2026-10-16) ==================================================================================
   The subject ribbon of the article head lay across people in the photo: 30 px above the frame's lower edge it covered
   the head of the man seen from behind at the lower left of the wrongful-termination photo (pexels-8068836: a quarter
   to half of his head from 768 to 1199 px), the blurred head in the lower middle of pexels-8101981 (a quarter at
   1200 x 900 and at 320 px), and the chins at the left of pexels-7108395 and pexels-8069406 on tablets. The ribbon now
   lies across the lower edge itself, half on the photo and half on the brass mat, so it covers only the photo's
   bottom 19-22 px (no marked head at any measured size; also safer for photos added later in the admin). Where a head
   reaches that strip at the left (pexels-8068836 at 768-1199 px), the ribbon crosses the right corner instead. */
.pg-article .ah-cat { bottom: 0; transform: translateY(50%); }
@media (min-width: 768px) and (max-width: 1199.98px) {
  .pg-article .ah-photo:has(> img[src*="pexels-8068836-w1600."]) > .ah-cat { left: auto; right: -26px; }
}