/* ============================================================
   INVESTAVISA NOTES (theme 1.1.0, the "Docket" direction)
   The single note, the notes index (posts page, archives, search),
   the homepage notes band, and the plain page / 404 fallback.
   Layered on finality.css, which loads first.

   Rules: class prefix nt-; Finality tokens only (no new hues);
   square corners; no shadows; no decorative gradients. Mint fill
   only on primary CTAs (header CTA, CTA band buttons). Small text
   uses --text-2, never --text-3. Hex means a section index.
   ============================================================ */

/* A width-matched stand-in for Unbounded while the web font loads: Arial
   scaled to Unbounded's advance, so the big headings wrap the same before and
   after the swap and the page does not shift (CLS). The scale factors were
   tuned by scanning 320-1600px viewports: 135% for the 500 titles (the seven
   fixture titles wrap identically at 96% of widths) and 142% for the 600
   index h1 ("Practice notes." wraps identically at every width). Used only by
   the blog's display headings; the swap itself stays font-display: swap.
   Android ships none of those faces (its sans is Roboto), so a second
   stand-in scales Roboto the same way: 136% / 140%, tuned by the same scan
   (titles wrap identically at about 97% of widths; the index h1 differs only
   between 399px and 407px, clear of the common 360 / 384 / 393 / 412px
   phones). A face whose local() sources all fail is skipped, so each
   platform lands on the first stand-in it has. */
@font-face {
  font-family: "IV Unbounded Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Arimo"), local("Liberation Sans");
  font-weight: 100 549; size-adjust: 135%;
}
@font-face {
  font-family: "IV Unbounded Fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Arimo"), local("Liberation Sans");
  font-weight: 550 900; size-adjust: 142%;
}
@font-face {
  font-family: "IV Unbounded Fallback R";
  src: local("Roboto"), local("Roboto-Regular"), local("Roboto Regular");
  font-weight: 100 549; size-adjust: 136%;
}
@font-face {
  font-family: "IV Unbounded Fallback R";
  src: local("Roboto Medium"), local("Roboto-Medium"), local("Roboto");
  font-weight: 550 900; size-adjust: 140%;
}

:root {
  --nt-display: "Unbounded", "IV Unbounded Fallback", "IV Unbounded Fallback R", sans-serif;
  --nt-rail: 17rem;                                 /* contents rail */
  --nt-measure: 37rem;                              /* prose column, about 70 characters */
  --nt-gap: clamp(3rem, 6vw, 6rem);                 /* rail to prose */
  --nt-gutter: calc(clamp(2.5rem, 7vw, 6rem) / 2);  /* one side of the .wrap gutter */
}

/* anchors land below the sticky header (and the compact contents bar) */
html.nt-view { scroll-padding-top: calc(var(--nt-head, 76px) + var(--nt-bar, 0px) + 1rem); }

/* ---------- shared bits ---------- */
.nobr { white-space: nowrap; }
.nt-vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.nt-no { text-transform: none; letter-spacing: 0.06em; }
.nt-k { color: var(--mint); }
.nt-nowrap { white-space: nowrap; }
.nt-mono {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-2);
}
.chip.nt-chip { margin-top: 0; }
a.chip { text-decoration: none; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); }
a.chip:hover { border-color: var(--mint-deep); color: var(--mint); }

/* ---------- site header: the Notes item ---------- */
.head-nav a[aria-current] {
  color: var(--text);
  text-decoration: underline; text-decoration-color: var(--mint);
  text-decoration-thickness: 1px; text-underline-offset: 0.55em;
}

/* ============================================================
   SINGLE NOTE
   ============================================================ */

/* ---------- docket header ---------- */
.nt-docket { padding: clamp(3rem, 8vh, 5.5rem) 0 0; }
.nt-docket .sec-mark { margin-bottom: clamp(1.6rem, 4vh, 2.4rem); flex-wrap: wrap; row-gap: 0.4rem; }
.nt-docket .sec-mark::after { min-width: 2rem; }
.nt-crumbs ol { display: flex; flex-wrap: wrap; gap: 0 0.55rem; list-style: none; }
.nt-crumbs li + li::before {
  /* decoration only: the "/ ''" alt text keeps screen readers from saying "slash" */
  content: "/"; content: "/" / "";
  margin-right: 0.55rem; color: var(--line);
}
.nt-crumbs a { color: var(--text-2); text-decoration: none; transition: color 0.25s var(--ease); }
.nt-crumbs a:hover { color: var(--mint); }

.nt-title {
  font-family: var(--nt-display); font-weight: 500;
  /* 2.1rem floor from 360px up; below that it scales (9.3vw) so a long word
     such as "Requirements," still fits a 320px phone without breaking */
  font-size: clamp(min(2.1rem, 9.3vw), 1rem + 3.2vw, 3.4rem);
  line-height: 1.12; letter-spacing: -0.012em;
  /* an em measure (about 24ch of Unbounded): a ch measure changes with the
     font, so the web-font swap re-wrapped the title and shifted the page */
  max-width: 21.8em; text-wrap: balance; overflow-wrap: anywhere;
}
.nt-title .dot { color: var(--mint); }
.nt-dek {
  color: var(--text-2); font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6;
  max-width: 60ch; margin-top: 1.5rem;
}

/* the record: filed / reading time / pathway / counsel of record */
.nt-record {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 0.8fr) minmax(0, 1.6fr);
  margin-top: clamp(2rem, 5vh, 3rem);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.nt-record.is-3 { grid-template-columns: minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1.7fr); }
.nt-record > div { padding: 1.1rem 1.4rem 1.25rem; border-left: 1px solid var(--line-dim); min-width: 0; }
.nt-record > div:first-child { border-left: 0; padding-left: 0; }
.nt-record dt {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-2); margin-bottom: 0.5rem;
}
.nt-record dd { color: var(--text); font-size: 1rem; line-height: 1.45; }
.nt-record dd .nt-muted { color: var(--text-2); }
.nt-record time { font-family: var(--mono); font-size: 0.92rem; letter-spacing: 0.02em; }
.nt-record .nt-revised {
  display: block; margin-top: 0.3rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--amber);
}
.nt-record .nt-revised time { font-size: inherit; }
/* a date or "· 2,160 words" never splits across lines */
.nt-record time, .nt-record .nt-revised, .nt-record dd .nt-muted { white-space: nowrap; }
.nt-record .verified { width: 1em; height: 1em; vertical-align: -0.12em; margin-left: 0.35rem; }
/* phones and tablets: two by two (four narrow cells broke the dates and the
   word count between 761px and about 940px) */
@media (max-width: 940px) {
  .nt-record, .nt-record.is-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .nt-record > div { padding: 1rem 0 1.1rem 1.1rem; }
  .nt-record > div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .nt-record > div:nth-child(n + 3) { border-top: 1px solid var(--line-dim); }
  /* three cells: counsel of record takes the second row on its own */
  .nt-record.is-3 > div:last-child { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
}
/* the smallest phones (320px): one cell per row, so "· 2,160 words", the
   "Counsel of record" label and counsel's name keep their lines */
@media (max-width: 359px) {
  .nt-record, .nt-record.is-3 { grid-template-columns: minmax(0, 1fr); }
  .nt-record > div, .nt-record > div:nth-child(odd), .nt-record.is-3 > div:last-child {
    grid-column: auto; border-left: 0; padding: 0.8rem 0 0.9rem;
  }
  .nt-record > div + div { border-top: 1px solid var(--line-dim); }
}

/* ---------- Exhibit A (featured image) ---------- */
.nt-exhibit { position: relative; margin-top: clamp(2.2rem, 5vh, 3.2rem); }
/* the note's own image shows in its natural colour (owner decision 2026-10-04);
   index thumbnails and the lead plate keep the mint duotone */
.nt-exhibit-img { position: relative; display: block; background: var(--abyss); overflow: clip; }
.nt-exhibit img {
  display: block; width: 100%; height: clamp(13rem, 34vw, 27rem);
  object-fit: cover; object-position: 50% 30%;
}
.nt-exhibit-img::after {
  content: ""; position: absolute; inset: 0; border: 1px solid var(--line); pointer-events: none;
}
.nt-exhibit figcaption,
.nt-plate-tag {
  position: absolute; left: clamp(0.75rem, 2vw, 1.25rem); bottom: clamp(0.75rem, 2vw, 1.25rem); z-index: 1;
  max-width: calc(100% - 2 * clamp(0.75rem, 2vw, 1.25rem));
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text); background: var(--void); padding: 0.45rem 0.8rem;
  text-wrap: balance; /* a caption that wraps never leaves one word alone */
}
/* a long caption (over 48 characters, set in single.php) sits under the image,
   so it never covers the picture or runs past its top on a phone */
.nt-exhibit.is-cap-below figcaption {
  position: static; max-width: none; margin-top: 0.8rem; padding: 0;
  background: none; color: var(--text-2); letter-spacing: 0.1em; line-height: 1.6;
}
/* the index plate's tag ("Exhibit A · caption", as on the single) keeps to
   one line: there is no room under the plate, so a long caption ends in an
   ellipsis instead of covering the picture */
.nt-plate-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 320px: "Exhibit A · Illustrative image" fits on one line */
@media (max-width: 359px) {
  .nt-exhibit figcaption, .nt-plate-tag { letter-spacing: 0.06em; padding-inline: 0.6rem; }
}

/* ---------- body: contents rail + prose ---------- */
.nt-body {
  display: grid;
  grid-template-columns: var(--nt-rail) minmax(0, var(--nt-measure));
  column-gap: var(--nt-gap);
  align-items: start;
  padding-top: clamp(3rem, 7vh, 4.5rem);
}
.nt-main { grid-column: 2; min-width: 0; max-width: var(--nt-measure); }
/* fewer than three sections: no rail, the prose aligns with the title */
.nt-body.no-toc { grid-template-columns: minmax(0, var(--nt-measure)); }
.nt-body.no-toc .nt-main { grid-column: 1; }

/* the end of the record follows the prose column, outside the sticky area */
.nt-end { padding-bottom: clamp(4rem, 10vh, 6.5rem); }
.nt-end-in { max-width: var(--nt-measure); margin-left: calc(var(--nt-rail) + var(--nt-gap)); }
.nt-end.no-toc .nt-end-in { margin-left: 0; }

/* contents: a sticky ledger rail */
.nt-toc {
  position: sticky; top: calc(var(--nt-head, 76px) + 1.75rem);
  max-height: calc(100vh - var(--nt-head, 76px) - 3.5rem);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  /* keyboard focus scrolled into the rail lands between its sticky head
     (Contents / sections / minutes left / progress, about 59px) and its
     sticky contact foot (about 57px) */
  scroll-padding-top: 4.5rem; scroll-padding-bottom: 4.75rem;
  /* the box starts 0.4rem left of the column, so the entries can reach into
     it (see .nt-toc li a) without being clipped; its content stays put */
  margin-left: -0.4rem; padding-left: 0.4rem;
}
.nt-toc-top { position: sticky; top: 0; z-index: 1; background: var(--void); }
.nt-toc-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-2);
}
.nt-toc-left {
  padding: 0.35rem 0 0.9rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2);
}
.nt-progress { display: none; height: 1px; background: var(--line); overflow: hidden; }
.nt-js .nt-progress { display: block; }
.nt-progress i {
  display: block; height: 100%; background: var(--mint);
  transform: scaleX(0); transform-origin: left;
}
.nt-toc summary { display: none; }
.nt-toc ol { list-style: none; border-top: 1px solid var(--line); }
.nt-js .nt-toc ol { border-top: 0; }
.nt-toc li { border-bottom: 1px solid var(--line-dim); }
/* Each link reaches 0.4rem left of the column and pads it back, so the hex
   number and the title stay on the column edge while the focus ring, drawn
   inside the link (the rail and the open list scroll, and would clip a ring
   drawn outside it), clears the hex number. The rules sit on the li and the
   mint line starts at the column edge, so every rule still aligns. */
.nt-toc li a {
  position: relative; display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); gap: 0.4rem;
  margin-left: -0.4rem; padding: 0.72rem 0.4rem;
  font-size: 0.9rem; line-height: 1.4; color: var(--text-2); text-decoration: none;
  transition: color 0.25s var(--ease);
}
.nt-toc li a::after {
  content: ""; position: absolute; left: 0.4rem; right: 0; bottom: -1px; height: 1px;
  background: var(--mint); transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.nt-toc li a:focus-visible { outline-offset: -2px; }
/* the contact foot's rule closes the list */
.nt-toc li:last-child { border-bottom: 0; }
.nt-ix {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em;
  color: var(--text-2); padding-top: 0.14rem;
  transition: color 0.25s var(--ease);
}
.nt-toc li a:hover { color: var(--text); }
.nt-toc li a:hover::after { transform: scaleX(1); }
.nt-toc li a[aria-current] { color: var(--text); }
.nt-toc li a[aria-current] .nt-ix { color: var(--mint); }
.nt-toc li a[aria-current]::after { transform: scaleX(1); }
/* quiet contact foot: text links, never a second mint button. It sticks to
   the bottom of the rail, so the eligibility link, the phone and "Back to
   top" stay in view while the list scrolls (laptop heights cannot show all
   eleven sections and the foot at once). */
.nt-toc-foot {
  position: sticky; bottom: 0; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem;
  padding: 0.85rem 0 0.4rem; background: var(--void); border-top: 1px solid var(--line);
}
.nt-toc-foot .nt-toc-go { flex-basis: 100%; }
.nt-toc-foot a {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2); text-decoration: none; transition: color 0.25s var(--ease);
}
.nt-toc-foot a:hover { color: var(--mint); }
.nt-toc-foot .nt-toc-go { color: var(--mint); }

/* compact contents (phones and tablets) */
@media (max-width: 1079px) {
  .nt-body { grid-template-columns: minmax(0, 1fr); padding-top: clamp(2rem, 5vh, 3rem); }
  .nt-body .nt-main { grid-column: 1; }
  .nt-end-in { margin-left: 0; }
  .nt-toc {
    position: relative; top: auto; max-height: none; overflow: visible;
    margin: 0 calc(-1 * var(--nt-gutter)) clamp(2rem, 5vh, 2.75rem);
    padding-left: 0; background: var(--void); z-index: 90;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .nt-toc-top { position: static; background: none; }
  .nt-toc-head, .nt-toc-left, .nt-toc-foot { display: none; }
  .nt-toc .nt-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; z-index: 2; }
  /* the bar is a control: a tap on its label must not leave a text caret
     there (Chromium then drops the ellipsis on a long section title) */
  .nt-toc summary {
    display: flex; align-items: center; gap: 0.8rem;
    min-height: 3.25rem; padding: 0.5rem var(--nt-gutter);
    cursor: pointer; list-style: none;
    -webkit-user-select: none; user-select: none;
  }
  .nt-toc summary::-webkit-details-marker { display: none; }
  .nt-toc summary:focus-visible { outline-offset: -3px; }
  .nt-sum-k {
    flex: none; color: var(--mint);
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  }
  .nt-sum-now {
    flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.6rem;
    white-space: nowrap; overflow: hidden;
  }
  .nt-sum-ix { flex: none; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--mint); }
  .nt-sum-ix:empty { display: none; }
  .nt-sum-tt {
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
    font-size: 0.92rem; line-height: 1.3; color: var(--text);
  }
  .nt-sum-left {
    flex: none; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-2);
  }
  .nt-sum-ic {
    flex: none; width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
    border: 1px solid var(--line); color: var(--text);
  }
  .nt-sum-ic::before { content: "+"; font-size: 0.95rem; line-height: 1; }
  .nt-toc-d[open] .nt-sum-ic::before { content: "\2212"; }
  .nt-toc ol { padding: 0 var(--nt-gutter) 0.6rem; border-top: 1px solid var(--line-dim); }

  /* blog.js present (html.nt-js): the bar sticks under the site header and
     the list drops over the text. Without blog.js the list stays in flow. */
  .nt-js .nt-toc { position: sticky; top: var(--nt-head, 76px); }
  /* the stuck bar sits inside html's scroll-padding; without this, focusing it
     (Shift+Tab) makes the browser scroll the page to "reveal" it */
  .nt-js .nt-toc summary { scroll-margin-top: calc(-1 * (var(--nt-bar, 0px) + 1rem)); }
  .nt-js .nt-toc ol {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--void); border-bottom: 1px solid var(--line);
    max-height: calc(100vh - var(--nt-head, 76px) - 8rem); overflow-y: auto; overscroll-behavior: contain;
  }
  @supports (height: 100dvh) {
    .nt-js .nt-toc ol { max-height: calc(100dvh - var(--nt-head, 76px) - 8rem); }
  }
  /* open list: a flat void scrim over the text (a tap on it closes the list) */
  .nt-js .nt-toc-d[open]::after {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: var(--void);
    background: color-mix(in oklch, var(--void) 78%, transparent);
  }
}
@media (max-width: 600px) {
  /* the current section replaces the visible label; "Contents" stays in the accessible name */
  .nt-toc.is-now .nt-sum-k {
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .nt-sum-left { display: none; }
}

/* ---------- prose (the_content) ---------- */
.nt-prose {
  font-size: 1.125rem; line-height: 1.75; color: var(--text-2);
  overflow-wrap: break-word;
}
@media (max-width: 700px) { .nt-prose { font-size: 1.0625rem; line-height: 1.72; } }
.nt-prose > * + * { margin-top: 1.3em; }
.nt-prose > :first-child { margin-top: 0; }

/* a content h1 (a pasted title, a Heading block set to H1) reads as a
   section heading, like h2, never as unstyled grey text */
.nt-prose h1,
.nt-prose h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.62rem);
  line-height: 1.28; letter-spacing: -0.005em; color: var(--text);
  max-width: none; margin-top: 4.2rem; padding-top: 1.35rem;
  border-top: 1px solid var(--line);
}
/* the section index comes from data-ix; the "/ ''" alt text keeps screen
   readers from announcing "zero x zero one" (older Safari keeps line one) */
.nt-prose h2[data-ix]::before {
  content: attr(data-ix);
  content: attr(data-ix) / "";
  display: block; margin-bottom: 0.95rem;
  font-family: var(--mono); font-size: 0.74rem; font-weight: 500;
  letter-spacing: 0.1em; line-height: 1; color: var(--mint);
}
.nt-prose > h1:first-child, .nt-prose > h2:first-child { margin-top: 0; }
.nt-prose h3 {
  font-family: var(--display); font-weight: 500; font-size: 1.2rem; line-height: 1.35;
  color: var(--text); margin-top: 2.6rem;
}
.nt-prose h4 {
  font-family: var(--mono); font-weight: 500; font-size: 0.8rem; line-height: 1.5;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); margin-top: 2.2rem;
}
.nt-prose h5, .nt-prose h6 { font-size: 1rem; font-weight: 600; color: var(--text); margin-top: 2rem; }
.nt-prose h1 + *, .nt-prose h2 + *, .nt-prose h3 + *, .nt-prose h4 + * { margin-top: 0.9rem; }

.nt-prose strong, .nt-prose b { color: var(--text); font-weight: 600; }
.nt-prose em, .nt-prose i { font-style: italic; }
.nt-prose a {
  color: var(--mint);
  text-decoration: underline; text-decoration-color: var(--mint-deep);
  text-decoration-thickness: 1px; text-underline-offset: 0.22em;
  transition: text-decoration-color 0.25s var(--ease);
}
.nt-prose a:hover { text-decoration-color: var(--mint); text-decoration-thickness: 2px; }
.nt-prose code {
  font-family: var(--mono); font-size: 0.86em;
  background: var(--panel); border: 1px solid var(--line-dim);
  color: var(--text); padding: 0.08em 0.38em;
}
.nt-prose pre {
  font-family: var(--mono); font-size: 0.86rem; line-height: 1.6;
  background: var(--panel); border: 1px solid var(--line); color: var(--text);
  padding: 1.1rem 1.25rem; overflow-x: auto;
}
.nt-prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }

/* lists keep list-style (and so their semantics in Safari/VoiceOver) */
.nt-prose ul, .nt-prose ol { padding-left: 1.5rem; }
.nt-prose ol { padding-left: 2.3rem; list-style: decimal-leading-zero; }
.nt-prose ul { list-style: square; }
.nt-prose li { padding-left: 0.45rem; }
.nt-prose li + li { margin-top: 0.55em; }
.nt-prose ul > li::marker { color: var(--mint); font-size: 0.8em; }
.nt-prose ol > li::marker {
  color: var(--mint); font-family: var(--mono); font-size: 0.8em; letter-spacing: 0.04em;
}
.nt-prose li > ul, .nt-prose li > ol { margin-top: 0.55em; }

.nt-prose blockquote {
  margin-block: 2.2rem; padding: 1.5rem 1.6rem 1.35rem;
  background: var(--abyss); border: 1px solid var(--line); border-left: 2px solid var(--mint);
}
.nt-prose blockquote p { color: var(--text); font-size: 1.12rem; line-height: 1.6; }
.nt-prose blockquote p + p { margin-top: 0.8em; }
.nt-prose blockquote cite {
  display: block; margin-top: 1rem; font-style: normal;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-2);
}
.nt-prose blockquote cite::before { content: "\2014\00A0"; color: var(--mint); }

/* tables: the theme wraps each bare <table> in a focusable .nt-table region;
   the fallbacks keep an unwrapped or block-editor table from widening the page */
.nt-table, .nt-prose .wp-block-table { margin-block: 2.2rem; overflow-x: auto; }
.nt-prose .wp-block-table .nt-table { margin-block: 0; }
.nt-table:focus-visible { outline-offset: 4px; }
@media (max-width: 640px) {
  .nt-table::before {
    content: "Scroll sideways \2192"; content: "Scroll sideways \2192" / "";
    position: sticky; left: 0; display: block; padding-bottom: 0.6rem;
    font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text-2);
  }
}
.nt-prose > table { display: block; overflow-x: auto; }
.nt-prose table { width: 100%; border-collapse: collapse; font-size: 0.97rem; line-height: 1.5; }
.nt-table table, .nt-prose .wp-block-table table { min-width: 34rem; }
.nt-prose th {
  text-align: left; vertical-align: bottom; white-space: nowrap;
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text);
  padding: 0.9rem 1.2rem 0.8rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.nt-prose td {
  vertical-align: top; color: var(--text-2);
  padding: 0.85rem 1.2rem 0.85rem 0; border-bottom: 1px solid var(--line-dim);
}
.nt-prose td:first-child { color: var(--text); font-family: var(--mono); font-size: 0.86rem; letter-spacing: 0.04em; }

/* in-content figures keep their natural colour */
.nt-prose figure { margin-block: 2.4rem; }
.nt-prose img { max-width: 100%; height: auto; }
.nt-prose figure img { display: block; width: 100%; border: 1px solid var(--line); }
.nt-prose figcaption {
  margin-top: 0.8rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-2);
}
.nt-prose hr { border: 0; border-top: 1px solid var(--line-dim); margin-block: 3rem; }
/* a separator right before a section heading: the heading's own rule stands
   in for it, so the section opens on one rule, not two (the dots style is an
   ornament, not a rule, and stays) */
.nt-prose hr:not(.is-style-dots):has(+ h1, + h2) { display: none; }
.nt-prose iframe, .nt-prose video { max-width: 100%; }

/* ---------- block editor and classic editor markup in the_content ----------
   WordPress prints its own block styles (wp-block-library, classic-theme-styles,
   global-styles, and per-block CSS loaded on demand, sometimes after this sheet).
   Several assume a light page: grey pill buttons, 1px currentColor table grids,
   #f0f0f0 table stripes. Selectors here outrank core's so a pipeline note built
   from blocks still reads as Finality. */
.nt-prose figure img { width: auto; max-width: 100%; height: auto; }
.nt-prose .wp-block-image.alignfull img,
.nt-prose .wp-block-image.alignwide img { width: 100%; }
.nt-prose .aligncenter, .nt-prose .aligncenter img { margin-inline: auto; }
.nt-prose .wp-block-image.aligncenter, .nt-prose figure.aligncenter { text-align: center; }
.nt-prose .wp-caption { max-width: 100%; }
.nt-prose .alignwide, .nt-prose .alignfull { max-width: 100%; margin-inline: 0; }
@media (min-width: 601px) {
  .nt-prose .alignleft { float: left; max-width: 50%; margin: 0.35rem 1.6rem 1rem 0; }
  .nt-prose .alignright { float: right; max-width: 50%; margin: 0.35rem 0 1rem 1.6rem; }
}
.nt-prose h1, .nt-prose h2, .nt-prose h3, .nt-prose hr, .nt-prose .nt-table,
.nt-prose .wp-block-table, .nt-prose blockquote { clear: both; }

.nt-prose .wp-block-table th,
.nt-prose .wp-block-table td { border: 0; border-bottom: 1px solid var(--line-dim); padding: 0.85rem 1.2rem 0.85rem 0; }
.nt-prose .wp-block-table th { border-top: 1px solid var(--line); border-bottom-color: var(--line); padding-top: 0.9rem; padding-bottom: 0.8rem; }
.nt-prose .wp-block-table thead { border-bottom: 0; }
.nt-prose .wp-block-table tfoot { border-top: 1px solid var(--line); }
.nt-prose .wp-block-table.is-style-stripes { border-bottom: 0; }
.nt-prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
.nt-prose .wp-block-table [class*="has-subtle-"] { background-color: var(--abyss); }
/* with a ground behind the rows (stripes, or a table background colour) the
   outer cells step in from its edges, so the text never touches them; a
   plain table stays flush with the prose */
.nt-prose .wp-block-table.is-style-stripes th:first-child,
.nt-prose .wp-block-table.is-style-stripes td:first-child,
.nt-prose .wp-block-table .has-background th:first-child,
.nt-prose .wp-block-table .has-background td:first-child { padding-left: 0.9rem; }
.nt-prose .wp-block-table.is-style-stripes th:last-child,
.nt-prose .wp-block-table.is-style-stripes td:last-child,
.nt-prose .wp-block-table .has-background th:last-child,
.nt-prose .wp-block-table .has-background td:last-child { padding-right: 0.9rem; }

.nt-prose .wp-block-pullquote { margin-block: 2.4rem; padding: 0; text-align: left; border: 0; }
.nt-prose .wp-block-pullquote blockquote { margin: 0; }
.nt-prose .wp-block-quote.is-style-large p,
.nt-prose .wp-block-quote.is-large p { font-size: 1.25rem; font-style: normal; }

.nt-prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.nt-prose .wp-block-button .wp-block-button__link,
.nt-prose .wp-block-button.is-style-outline > .wp-block-button__link,
.nt-prose .wp-element-button {
  display: inline-flex; align-items: center; gap: 0.6rem;
  width: auto; height: auto; padding: 0.95rem 1.4rem;
  border: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none;
  color: var(--text); text-decoration: none;
  font-family: var(--mono); font-size: 0.8rem; font-weight: 400; line-height: 1.3;
  letter-spacing: 0.06em; text-transform: uppercase;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nt-prose .wp-block-button .wp-block-button__link:hover,
.nt-prose .wp-element-button:hover { border-color: var(--mint); color: var(--mint); }

.nt-prose .wp-block-separator.is-style-dots::before { color: var(--text-2); }
.nt-prose details { border: 1px solid var(--line); padding: 0.9rem 1.1rem; }
.nt-prose summary {
  cursor: pointer; color: var(--text);
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.nt-prose details[open] > summary { margin-bottom: 0.8rem; }

/* a password-protected note: core's form in the search field's style
   (ghost submit, never a mint fill) */
.nt-prose .post-password-form label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.8rem; }
.nt-prose .post-password-form input[type="password"],
.nt-prose .post-password-form input[type="submit"] {
  min-height: 2.6rem; border: 1px solid var(--text-3); border-radius: 0;
  background: var(--void); color: var(--text); -webkit-appearance: none; appearance: none;
}
.nt-prose .post-password-form input[type="password"] { padding: 0.5rem 0.9rem; font-family: var(--body); font-size: 1rem; }
.nt-prose .post-password-form input[type="submit"] {
  padding: 0.5rem 1rem; cursor: pointer; background: transparent;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nt-prose .post-password-form input[type="password"]:focus { border-color: var(--mint); }
.nt-prose .post-password-form input[type="submit"]:hover { border-color: var(--mint); color: var(--mint); }

/* ---------- end of the record ---------- */
.nt-filed {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem;
  margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line);
}
.nt-filed .nt-mono { margin-right: 0.35rem; }
.nt-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
.nt-chips .chip { margin-top: 0; }
.nt-end-stamp {
  margin-left: auto; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-2); white-space: nowrap;
}

.note.nt-legal { margin-top: 1.75rem; max-width: none; color: var(--text-2); font-size: 0.92rem; line-height: 1.6; }

/* counsel of record card */
.nt-counsel {
  display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 0.85rem 1.6rem;
  margin-top: 2.5rem; padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--abyss); border: 1px solid var(--line);
}
.nt-counsel .portrait { grid-row: 1 / span 3; align-self: start; max-width: none; }
.nt-counsel .portrait img { height: auto; object-position: 50% 20%; }
.nt-counsel-id, .nt-counsel-bio, .nt-counsel-links { grid-column: 2; min-width: 0; }
.nt-counsel h2 {
  font-family: var(--mono); font-weight: 500; font-size: 0.72rem; line-height: 1.4;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mint); max-width: none;
}
.nt-counsel-name {
  font-family: var(--display); font-weight: 500; font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  line-height: 1.3; color: var(--text); margin-top: 0.55rem;
}
.nt-counsel-name .verified { width: 1em; height: 1em; vertical-align: -0.14em; margin-left: 0.3rem; }
.nt-counsel-role {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2); margin-top: 0.4rem;
}
.nt-counsel-bio { color: var(--text-2); font-size: 0.98rem; line-height: 1.6; }
.nt-counsel-links {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.6rem;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.nt-counsel-links a { color: var(--mint); text-decoration: none; }
.nt-counsel-links a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
.nt-counsel-links .arr { display: inline-block; transition: transform 0.35s var(--ease); }
.nt-counsel-links a:hover .arr { transform: translateX(0.3rem); }
@media (max-width: 560px) {
  .nt-counsel { grid-template-columns: 4.75rem minmax(0, 1fr); gap: 0.85rem 1.1rem; }
  .nt-counsel .portrait { grid-row: auto; }
  .nt-counsel-bio, .nt-counsel-links { grid-column: 1 / -1; }
}
/* 320px: a smaller portrait and name, so the name breaks once
   ("Christian M. / Frank Fas, Esq. ✓") instead of leaving "Frank" alone */
@media (max-width: 359px) {
  .nt-counsel { grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0.85rem 0.9rem; }
  .nt-counsel-name { font-size: 1rem; }
}

/* older / newer: each side only when that neighbour exists */
.nt-adj {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: 3rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.nt-adj a {
  position: relative; display: grid; align-content: start; gap: 0.5rem;
  padding: 1.4rem 1.4rem 1.5rem 0; text-decoration: none;
}
.nt-adj .nt-adj-next {
  grid-column: 2; border-left: 1px solid var(--line-dim);
  padding: 1.4rem 0 1.5rem 1.4rem; text-align: right;
}
.nt-adj a::after {
  content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px;
  background: var(--mint); transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.nt-adj a:hover::after { transform: scaleX(1); }
.nt-adj-k {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2); transition: color 0.25s var(--ease);
}
.nt-adj-t { font-family: var(--display); font-weight: 500; font-size: 0.98rem; line-height: 1.38; color: var(--text); overflow-wrap: break-word; }
.nt-adj a:hover .nt-adj-k { color: var(--mint); }
@media (max-width: 640px) {
  .nt-adj { grid-template-columns: minmax(0, 1fr); }
  .nt-adj a, .nt-adj .nt-adj-next { grid-column: 1; padding: 1.25rem 0 1.35rem; text-align: left; border-left: 0; }
  .nt-adj a + a { border-top: 1px solid var(--line-dim); }
}

/* the mint band: focus rings in ink (a mint ring on mint is invisible).
   finality.css's 1.1.0 base-fix block carries the same rule for the three
   pathway pages, which do not load blog.css; this copy keeps the note's
   band right even if that block is removed */
.cta-band :focus-visible { outline-color: var(--mint-ink); }

/* read next: the pathway card, then related notes, as route-cards */
.nt-routes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem;
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
.nt-routes .route-card { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.5vw, 2rem); }
.nt-routes .route-card h3 { font-size: 1.08rem; line-height: 1.38; overflow-wrap: break-word; }
.nt-routes .route-card .go { margin-top: auto; padding-top: 1.3rem; color: var(--text-2); }
.nt-routes .route-card:hover .go { color: var(--mint); }
.nt-routes .route-card.is-pathway { border-color: var(--mint-deep); }
.route-card .nt-card-meta {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2);
}
@media (max-width: 960px) { .nt-routes { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   NOTES INDEX (posts page, category, tag, date, author, search)
   ============================================================ */
.nt-index-head { padding: clamp(3rem, 8vh, 5.5rem) 0 0; }
/* no ledger follows (empty states, 404): the head closes the page */
.nt-index-head.is-empty { padding-bottom: clamp(4rem, 10vh, 6.5rem); }
.nt-index-head .sec-mark a { color: inherit; text-decoration: none; }
.nt-index-head .sec-mark a:hover { color: var(--mint); }
.nt-ititle {
  font-family: var(--nt-display); font-weight: 600;
  font-size: clamp(2.3rem, 1.2rem + 5vw, 5rem); line-height: 1.04; letter-spacing: -0.01em;
  max-width: 18.3em; overflow-wrap: anywhere; /* about 20ch of Unbounded 600, font-independent */
}
.nt-ititle .dot { color: var(--mint); }
/* search and empty-state headings carry user text or a sentence: a smaller size */
.nt-ititle--q { font-weight: 500; font-size: clamp(1.7rem, 1rem + 2.8vw, 3rem); line-height: 1.15; max-width: 25.4em; } /* about 28ch */
.nt-index-head .sec-intro { max-width: 58ch; }
.nt-index-head .sec-intro p + p { margin-top: 0.6em; }
.nt-found {
  margin-top: 1.1rem; font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-2);
}

.nt-filter {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.1rem 2rem; margin-top: clamp(2.5rem, 6vh, 3.75rem);
}
.nt-cats { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
.nt-cats a {
  display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0.5rem 0.9rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-2); border: 1px solid var(--line); text-decoration: none;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nt-cats a:hover { border-color: var(--mint-deep); color: var(--mint); }
.nt-cats a[aria-current] { border-color: var(--mint); color: var(--mint); }
.nt-cats a[aria-current]:focus-visible { outline-color: var(--text); }

/* search form: a ghost submit, never a mint fill */
.nt-search { display: flex; width: min(100%, 22rem); }
.nt-search input {
  flex: 1; min-width: 0; min-height: 2.6rem;
  /* --text-3 edge: 4.6:1 on --void (a field boundary needs 3:1; --line was 1.55:1) */
  background: var(--void); color: var(--text); border: 1px solid var(--text-3); border-right: 0;
  border-radius: 0; font-family: var(--body); font-size: 1rem; padding: 0.5rem 0.9rem;
  transition: border-color 0.3s var(--ease);
  -webkit-appearance: none; appearance: none;
}
.nt-search input::placeholder { color: var(--text-2); opacity: 1; }
.nt-search input:focus { outline: none; border-color: var(--mint); }
.nt-search input:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.nt-search button {
  flex: none; min-height: 2.6rem; padding: 0.5rem 1rem; cursor: pointer;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent; color: var(--text); border: 1px solid var(--text-3); border-radius: 0;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nt-search button:hover { border-color: var(--mint); color: var(--mint); }

/* ---------- the ledger of notes ---------- */
.nt-list { padding: clamp(2rem, 5vh, 3rem) 0 clamp(4rem, 10vh, 6.5rem); }
.nt-ledger { border-top: 1px solid var(--line); }
.nt-ledger-label {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-2); padding-bottom: 0.8rem;
}

.nt-row {
  position: relative; display: grid;
  grid-template-columns: 7.5rem minmax(0, 1.5fr) minmax(0, 1fr) 5rem;
  grid-template-areas: "ix main ex go";
  gap: 0.9rem 2.5rem; align-items: start;
  padding: 2rem 0; border-bottom: 1px solid var(--line);
  transition: background 0.35s var(--ease);
}
.nt-row::after {
  content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--mint); transform: scaleX(0); transform-origin: left;
  transition: transform 0.6s var(--ease);
}
.nt-row:hover { background: var(--abyss); }
.nt-row:hover::after { transform: scaleX(1); }

.nt-row-ix {
  grid-area: ix; padding-top: 0.15rem;
  font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.03em; color: var(--text-2);
}
.nt-row-main { grid-area: main; min-width: 0; }
.nt-eyebrow {
  margin-bottom: 0.55rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2);
}
.nt-row h2, .nt-row h3 {
  font-family: var(--nt-display); font-weight: 500; font-size: clamp(1.08rem, 1.35vw, 1.24rem);
  line-height: 1.34; max-width: none; overflow-wrap: anywhere;
}
.nt-row h2 a, .nt-row h3 a { color: var(--text); text-decoration: none; transition: color 0.3s var(--ease); }
/* the whole row is the link; its accessible name stays the title */
.nt-row h2 a::after, .nt-row h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.nt-row-ex {
  grid-area: ex; color: var(--text-2); font-size: 0.98rem; line-height: 1.6;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.nt-row-go {
  grid-area: go; justify-self: end; padding-top: 0.15rem;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-2); white-space: nowrap; transition: color 0.3s var(--ease);
}
.nt-go .arr { display: inline-block; transition: transform 0.35s var(--ease); }
.nt-row:hover .nt-go { color: var(--mint); }
.nt-row:hover .nt-go .arr { transform: translateX(0.4rem); }
.nt-row:hover h2 a, .nt-row:hover h3 a { color: var(--mint); }

/* keyboard focus outlines the whole row, not just the title text */
@supports selector(:has(*)) {
  .nt-row h2 a:focus-visible, .nt-row h3 a:focus-visible { outline: none; }
  .nt-row:has(a:focus-visible) { outline: 2px solid var(--mint); outline-offset: 3px; }
  /* Shift+Tab scrolls a row's title link in far enough that the date and
     eyebrow above it (and so the row's ring) clear the sticky header too */
  .nt-row h2 a, .nt-row h3 a { scroll-margin-top: 5.5rem; }
}

/* the newest note carries more weight (page 1 of the index and categories) */
.nt-row.nt-lead {
  grid-template-columns: 7.5rem minmax(0, 1.15fr) minmax(0, 1fr);
  grid-template-areas: "ix main plate";
  gap: 1.2rem 2.5rem; padding: 2.5rem 0 2.75rem;
}
.nt-lead-k {
  display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mint);
}
.nt-lead-k::before { content: ""; width: 1.8rem; height: 1px; background: var(--mint); }
.nt-row.nt-lead h2 { font-size: clamp(1.4rem, 1rem + 1.35vw, 2.05rem); line-height: 1.2; }
.nt-lead .nt-row-ex {
  display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible;
  margin-top: 1.1rem; font-size: 1.04rem; max-width: 56ch;
}
.nt-lead-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.4rem; margin-top: 1.5rem;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2);
}
.nt-plate {
  grid-area: plate; position: relative; margin: 0;
  background: var(--mint-dark); overflow: clip; aspect-ratio: 16 / 10;
}
.nt-plate img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: grayscale(1) contrast(1.14) brightness(0.78); mix-blend-mode: luminosity; opacity: 0.84;
  transition: opacity 0.6s var(--ease);
}
.nt-plate::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); pointer-events: none; }
.nt-row.nt-lead:hover .nt-plate img { opacity: 0.95; }
/* lead without a featured image: the text takes the full width */
.nt-row.nt-lead.no-plate { grid-template-areas: "ix main main"; }
.nt-row.nt-lead.no-plate h2 { max-width: 27.3em; } /* about 30ch of Unbounded */

@media (max-width: 900px) {
  .nt-row, .nt-row.nt-lead, .nt-row.nt-lead.no-plate {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ix" "main" "ex" "go";
    gap: 0.6rem; padding: 1.6rem 0 1.7rem;
  }
  .nt-row.nt-lead { grid-template-areas: "plate" "ix" "main"; gap: 1rem; padding-top: 1.75rem; }
  .nt-row.nt-lead.no-plate { grid-template-areas: "ix" "main"; }
  .nt-row-ix { padding-top: 0; }
  .nt-row-go { justify-self: start; padding-top: 0.1rem; }
  .nt-lead-k { margin-bottom: 0.7rem; }
}

/* featured-image thumbnails on the regular rows (index, archives, search):
   the lead plate's mint duotone at thumbnail size, on the right like the lead's
   plate. "Read" moves under the excerpt. A row without an image keeps the empty
   column, so a mixed list keeps one excerpt edge (phones drop it). The thumb
   comes first in the markup (for the phone float); grid areas place it here. */
.nt-row.has-thumbcol {
  grid-template-columns: 7.5rem minmax(0, 1.5fr) minmax(0, 1fr) 11rem;
  grid-template-areas: "ix main ex thumb" "ix main go thumb";
  grid-template-rows: auto 1fr;
}
.nt-row.has-thumbcol .nt-row-go { justify-self: start; padding-top: 0.2rem; }
.nt-thumb {
  grid-area: thumb; position: relative; align-self: start;
  aspect-ratio: 16 / 10; background: var(--mint-dark); overflow: clip;
}
.nt-thumb img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: grayscale(1) contrast(1.14) brightness(0.78); mix-blend-mode: luminosity; opacity: 0.84;
  transition: opacity 0.6s var(--ease);
}
.nt-thumb::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--line); pointer-events: none; }
.nt-row:hover .nt-thumb img { opacity: 0.95; }
/* 901-1079px: the lead is still three columns with a 2.5rem gap, so the rows
   keep that gap and every title starts on the lead's edge */
@media (max-width: 1079px) {
  .nt-row.has-thumbcol {
    grid-template-columns: 7.5rem minmax(0, 1fr) 10rem;
    grid-template-areas: "ix main thumb" "ix ex thumb" "ix go thumb";
    grid-template-rows: auto auto 1fr;
    gap: 0.7rem 2.5rem;
  }
}
/* the lead stacks at 900px and below, so no edge is shared: rows tighten */
@media (max-width: 900px) {
  .nt-row.has-thumbcol { column-gap: 2rem; }
}
/* phones: the square floats at the top right, beside the date and title; a
   long title runs on under it at full width instead of in a narrow column.
   The excerpt and "Read" start below the square. */
@media (max-width: 760px) {
  .nt-row.has-thumbcol { display: flow-root; }
  .nt-row.has-thumbcol .nt-thumb {
    float: right; width: clamp(5.5rem, 24vw, 8rem); height: clamp(5.5rem, 24vw, 8rem);
    margin: 0 0 0.6rem 1rem;
  }
  .nt-row.has-thumbcol .nt-row-main, .nt-row.has-thumbcol .nt-row-ex, .nt-row.has-thumbcol .nt-row-go { margin-top: 0.6rem; }
  .nt-row.has-thumbcol .nt-row-ex, .nt-row.has-thumbcol .nt-row-go { clear: right; }
}

/* ---------- pagination ---------- */
.nt-pages {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
.nt-pages b { color: var(--text); font-weight: 500; }
.nt-pages ul { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; }
.nt-pages .page-numbers, .nt-pages .post-page-numbers {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-width: 2.75rem; min-height: 2.75rem; padding: 0 0.9rem;
  border: 1px solid var(--line); color: var(--text-2); text-decoration: none;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}
.nt-pages a.page-numbers:hover, .nt-pages a.post-page-numbers:hover { border-color: var(--mint-deep); color: var(--mint); }
.nt-pages a.page-numbers:focus-visible, .nt-pages a.post-page-numbers:focus-visible { outline-color: var(--text); }
.nt-pages .page-numbers.current, .nt-pages .post-page-numbers.current { border-color: var(--mint); color: var(--mint); }
/* a note split with a Page Break block: its page links close the prose column */
.nt-note-pages { margin-top: 3rem; border-top: 1px solid var(--line); }
.nt-note-pn { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nt-pages .page-numbers.dots { border-color: transparent; min-width: 1.5rem; padding: 0; }
.nt-pages .arr { display: inline-block; transition: transform 0.35s var(--ease); }
.nt-pages .next:hover .arr { transform: translateX(0.3rem); }
.nt-pages .prev:hover .arr { transform: translateX(-0.3rem); }
/* phones: "Newer notes" and "Older notes" take rows of their own, so the page
   numbers stay together on one row between them (reading order unchanged) */
@media (max-width: 600px) {
  .nt-pages ul { flex: 1 1 100%; }
  .nt-pages .nt-pg-prev, .nt-pages .nt-pg-next { flex-basis: 100%; }
  .nt-pages .nt-pg-next { display: flex; justify-content: flex-end; }
}

/* ---------- empty states ---------- */
.nt-empty { margin-top: clamp(2rem, 5vh, 3rem); padding: 1.6rem 0 2rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nt-empty > p { color: var(--text-2); max-width: 54ch; }
.nt-empty .nt-search { margin-top: 1.4rem; }
.nt-links {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.3rem;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.nt-links a { color: var(--mint); text-decoration: none; }
.nt-links a:hover { text-decoration: underline; text-underline-offset: 0.3em; }

/* ============================================================
   HOMEPAGE BAND (0x04 Notes, between Counsel and Assessment)
   ============================================================ */
.nt-band { border-bottom: 1px solid var(--line-dim); }
.nt-band .nt-ledger { margin-top: clamp(2.5rem, 6vh, 4rem); }
.nt-band .nt-row { padding: 1.75rem 0; }
.nt-band-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem;
  margin-top: 2rem;
}
.nt-band-foot .btn .arr { display: inline-block; transition: transform 0.35s var(--ease); }
.nt-band-foot .btn:hover .arr { transform: translateX(0.3rem); }
@media (max-width: 900px) { .nt-band .nt-row { padding: 1.4rem 0 1.5rem; } }
/* phones: titles only (the whole row is the link), so Assessment stays close */
@media (max-width: 760px) {
  .nt-band .nt-row { grid-template-areas: "ix" "main"; }
  .nt-band .nt-row-ex, .nt-band .nt-row-go { display: none; }
}

/* ============================================================
   PLAIN PAGES AND 404 (index.php fallback)
   ============================================================ */
.nt-page { padding: clamp(3rem, 8vh, 5.5rem) 0 clamp(4rem, 10vh, 6.5rem); }
.nt-page .nt-title { margin-bottom: clamp(2rem, 5vh, 3rem); }
.nt-page .nt-prose { max-width: var(--nt-measure); }

/* ---------- forced colors (Windows contrast themes) ----------
   Colour and the background-painted underline are the only "current" cues;
   forced colours flatten both, so the current topic chip and the current
   contents entry get an underline and a thicker border instead. */
@media (forced-colors: active) {
  .nt-cats a[aria-current] {
    border-width: 2px; padding: calc(0.5rem - 1px) calc(0.9rem - 1px);
    text-decoration: underline; text-underline-offset: 0.3em;
  }
  .nt-toc li a[aria-current] .nt-tt { text-decoration: underline; text-underline-offset: 0.25em; }
  .nt-toc li a::after, .nt-progress i { forced-color-adjust: none; background: Highlight; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .nt-row, .nt-row::after, .nt-toc li a::after, .nt-adj a::after, .nt-go .arr,
  .nt-pages .arr, .nt-counsel-links .arr, .nt-band-foot .btn .arr, .nt-plate img, .nt-thumb img {
    transition: none;
  }
}