@charset "UTF-8";
/* ==========================================================================
   eComBuilderInsider — post, page and archive templates
   Child theme: freetrialchild (Kadence) · loaded after design-system.css on
   every template except the front page, which uses home.css.

   The look is a school notebook: warm ruled paper, a red margin rule, a serif
   body with Trebuchet headings, highlighter-yellow section titles, handwriting
   for the asides, and no rounded corners anywhere. It is a deliberately
   different language from the front page's editorial green, which is why none
   of the --ebi-* tokens are reused here: this file carries its own --nb-* set
   and leaves design-system.css and home.css untouched.

   Everything here styles markup Kadence already renders, plus the two elements
   freetrialchild/functions.php injects: `.ebi-kicker` (the note above the
   title) and `.ebi-article-rail` + `.ebi-entry-body` (the contents rail and the
   body it wraps). No PHP changes were needed for the redesign.

   Sections
     1.  Notebook tokens + header clearance
     2.  Paper sheet: ruled lines, grain, page edges
     3.  Article layout: margin rule, reading column, contents rail
     4.  Article header (note, title, chips, meta, facts, actions)
     5.  Lead image
     6.  Article typography (prose, headings, tips, tables, checklists)
     6b. The ruled sheet under the disclosure (posts)
     7.  Closing chrome: author note, related, post navigation, comments
     8.  Archive: hero, card grid, pagination, empty sidebar
     9.  Static pages
    10.  Responsive
    11.  Reduced motion + print
   ========================================================================== */

/* 1. Notebook tokens + header clearance -----------------------------------
   Every value is taken from the reference page. The two hand fonts keep their
   reference order: the note line leads with Comic Sans, the checklist and the
   author note lead with Segoe Print, which is what the original does. ----- */
:root {
  --nb-paper: #f8faf7;
  --nb-edge: #e9ece8;
  --nb-line: #d8e3df;
  --nb-margin: #e7a0a0;
  --nb-margin-soft: rgba(231, 160, 160, 0.58);
  --nb-ink: #202a32;
  --nb-muted: #65717a;
  --nb-accent: #4f46a5;
  --nb-highlight: #fff3a8;
  --nb-swoosh: #c9d8ff;
  --nb-card: rgba(255, 255, 255, 0.68);
  --nb-card-solid: rgba(255, 255, 255, 0.93);
  --nb-table-line: #cbd8d4;
  --nb-dash: #aebdb8;
  --nb-note: #5c666e;
  --nb-note-soft: #4f5a63;
  --nb-th-bg: rgba(215, 225, 222, 0.5);
  --nb-shadow: 0 5px 18px rgba(50, 60, 70, 0.06);
  --nb-serif: Georgia, "Times New Roman", serif;
  --nb-display: "Trebuchet MS", Arial, sans-serif;
  --nb-ui: Arial, Helvetica, sans-serif;
  --nb-hand: "Comic Sans MS", "Segoe Print", cursive;
  --nb-hand-alt: "Segoe Print", "Comic Sans MS", cursive;
  /* Distance between the margin rule and the first character of text. */
  --nb-gutter: clamp(1.25rem, 2.4vw, 2rem);
  /* The ruled sheet under the affiliate disclosure (posts). A 42px row with the
     rule at its foot — 39px on phones, as in the reference — a 2px red margin
     rule 44px in, and a 16px punched hole every 120px in the margin outside
     it. The heading blue and the mark are the reference's own values. ----- */
  --nb-row: 42px;
  --nb-sheet: #fffef8;
  --nb-sheet-rule: #bcd8e4;
  --nb-sheet-margin: #e59b9b;
  --nb-sheet-ink: #172c3a;
  --nb-head: #174b9b;
  --nb-mark: rgba(255, 230, 83, 0.58);
  --nb-hole: #dfe2de;
  --nb-hole-edge: #c5cac6;
  /* Where the red rule sits inside the sheet, and how far the text sits in from
     the sheet's own left edge. The closing chrome below the article has to line
     up with that text edge, so both are declared here rather than on the sheet. */
  --nb-rule-x: 44px;
  --nb-sheet-pad: calc(var(--nb-rule-x) + 2px + var(--nb-gutter));
}
/* Kadence positions the header absolutely over the content on any template
   with the transparent-header setting, and only the homepage was given
   clearance for it. Measured on the live site, the post H1 sat 51px underneath
   the header. Archives set `non-transparent-header`, so they are unaffected. */
body.transparent-header:not(.home) main#inner-wrap { padding-top: 128px; }

/* 1. Header clearance ------------------------------------------------------
   Kadence positions the header absolutely over the content on any template
   with the transparent-header setting, and only the homepage was given
   clearance for it. Measured on the live site, the post H1 sat 51px underneath
   the header. The inner wrap carries the padding so it covers both a page
   title and a hero band. Values match the homepage's dateline clearance.
   Archives set `non-transparent-header`, so they are unaffected. -------- */
body.transparent-header:not(.home) main#inner-wrap { padding-top: 128px; }

/* 2. Paper sheet ----------------------------------------------------------
   Ruled paper with the reference page's 90px rhythm (73px on phones), painted
   on <body> so the sheet runs edge to edge behind everything, exactly as the
   reference does. The site header and the footer are opaque and sit on top of
   it. All the wrappers between the body and the text are made transparent in
   the same pass, otherwise Kadence's own white content card hides the paper.
   `background-attachment: local` keeps the rules scrolling with the page
   instead of sliding under a fixed layer. ------------------------------- */
body:not(.home) {
  background-color: var(--nb-paper);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 89px,
    var(--nb-line) 89px,
    var(--nb-line) 90px
  );
  background-attachment: local;
}
body:not(.home) .site,
body:not(.home) #inner-wrap,
body:not(.home) .content-area,
body:not(.home) .site-container,
body:not(.home) .site-main,
body:not(.home) .content-wrap,
body:not(.home) .entry-content-wrap { background-color: transparent; }

/* Paper grain. Two off-set dotted lattices multiplied over the sheet, which is
   how the reference gets a texture without shipping an image. It is drawn on
   the content sheet rather than the body so it stops at the footer, and the
   content is lifted above it below. ------------------------------------- */
body:not(.home) main#inner-wrap { position: relative; }
body:not(.home) main#inner-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(80, 80, 80, 0.07) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 70%, rgba(80, 80, 80, 0.05) 0 1px, transparent 1.5px);
  background-size: 17px 17px, 23px 23px;
  mix-blend-mode: multiply;
}
body:not(.home) main#inner-wrap .site-container { position: relative; z-index: 1; }

/* Kadence's "Content Width: Full Width" setting, which the site currently
   applies to single posts, comes in two halves: `global.min.css` drops the
   container's max-width *and* its edge padding —
   `.content-width-fullwidth .content-container.site-container { max-width:
   none; padding: 0 }`. The max-width is the one we want gone (the article
   block below caps itself), but the padding is the page's only side inset
   once the container is the whole window: measured on the live post at 768px
   every block, the title, the stat strip, the ruled sheet and the closing
   note, sat at x0 w751, flush against both window edges. Kadence's own edge
   token is reused so the inset stays whatever the Customizer is set to, and
   the rule is a no-op on the templates that are still `content-width-normal`,
   where the same padding is already applied by `.site-container`. ---------- */
body.content-width-fullwidth:not(.home) .content-container.site-container {
  padding-left: var(--global-content-edge-padding);
  padding-right: var(--global-content-edge-padding);
}

/* The entry wrapper is a full-page card by default; on a single article the
   "card" is the whole page, so the surface is dropped and only the loop cards
   keep theirs. */
body:not(.home) .entry.content-bg.single-entry {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
/* Kadence clips the boxed entry card with `overflow: hidden`. That also makes
   the article the scroll container for `position: sticky`, and because it never
   scrolls the contents rail quietly stops sticking — the rail measures as
   sticky in devtools while behaving as static. The card styling is removed
   above, so there is nothing left for it to clip, and wide tables scroll inside
   their own `.wp-block-table` wrapper. */
body.single-post .entry.content-bg.single-entry,
body.single-post article.entry { overflow: visible; }
/* Anchored headings have to clear the sticky header when the contents rail
   jumps to them, which is the reference page's `scroll-margin-top` job. */
body:not(.home) .entry-content :is(h2, h3, section, div)[id] { scroll-margin-top: 120px; }

/* 3. Article header ------------------------------------------------------- */
/* The header is the top of the page of notes: kicker, breadcrumbs, title,
   byline, stat strip and the button pair, left-aligned, closed by a hairline
   in the ruled-paper colour. It runs the full width of the page on both posts
   and pages — the same box as `article.entry` — and the rail/reading-column
   split starts below it, at the affiliate notice. ---------------------- */
body.single-post .entry-header,
body.page .entry-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--nb-line);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
/* A page starts its prose on the margin rule, so the page header carries the
   top of that rule and the gutter with it, and the line runs unbroken from the
   title to the last paragraph. On a post the rule belongs to the reading
   column inside the rail layout, which only begins under the header, so the
   post header has no rule of its own. ---------------------------------- */
body.page .entry-header {
  padding-left: var(--nb-gutter);
  border-left: 1px solid var(--nb-margin-soft);
}
/* Breadcrumb first, then the dateline, then the title. The dateline is emitted
   before the breadcrumbs by the theme's header hook, so only these two small
   contextual elements are reordered — the title still follows both. */
body.single-post .entry-header .kadence-breadcrumbs,
body.single-post .entry-header .rank-math-breadcrumb { order: 1; }
body.single-post .entry-header .ebi-kicker { order: 2; }
body.single-post .entry-header .entry-title { order: 3; }
body.single-post .entry-header .entry-taxonomies { order: 4; }
body.single-post .entry-header .entry-meta { order: 5; }
body.single-post .entry-header .ebi-facts { order: 6; }
/* `ebi_post_facts()` prints the CTA pair after the stat strip. An element with
   no order sits at 0, i.e. ahead of everything above, so it must be given one
   explicitly or both of these blocks jump to the top of the header. */
body.single-post .entry-header .ebi-cta-pair { order: 7; }
body.page .entry-header { gap: 0; }

/* The stat strip is a grid, so it has to be told to take the header's width; as
   a flex item it would otherwise shrink to fit and collapse to one column. The
   button pair deliberately does *not* stretch with the full-width header: split
   into two equal halves it measured 686px a side at 1440px, which is a lot of
   empty button, so it keeps the width of its own labels and sits under the
   byline. `.ebi-cta-pair .ebi-cta { flex: 1 1 12rem }` already gives each button
   its label plus the 12rem basis, so only the stretching had to go. ------- */
body.single-post .entry-header .ebi-facts { align-self: stretch; }
/* With the pair no longer stretched, its own width is decided by content — and a
   wrapped flex container sized to its content is only as wide as one row of the
   12rem bases, which was 373px against the 397px two buttons actually need, so
   the pair wrapped *itself* and the two buttons stacked. Pinning each button to
   its own label (no grow, no 12rem basis) is what keeps them on one row; when
   the viewport really is too narrow for both, they stack as they always did. */
body.single-post .entry-header .ebi-cta-pair .ebi-cta { flex: 0 0 auto; }

/* Byline row: the reference page's `.meta` — Arial, 14px, muted, sharing a row
   with 12px of row gap. Kadence separates the entries with a CSS dot, but
   leaves no space between the "By" label and the author name: the row is a
   flex container, where whitespace text nodes do not render. ------------ */
body.single-post .entry-header .entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5em 1.5em;
  font-family: var(--nb-ui);
  font-size: 14px;
  line-height: 1.5;
  color: var(--nb-muted);
  margin: 0 0 1.35rem;
}
body.single-post .entry-header .entry-meta .posted-by { display: inline-flex; align-items: baseline; gap: 0.35em; }
body.single-post .entry-header .entry-meta .meta-label { color: var(--nb-muted); }
body.single-post .entry-header .entry-meta .author a { color: var(--nb-ink); font-weight: 700; text-decoration: none; }
body.single-post .entry-header .entry-meta .author a:hover,
body.single-post .entry-header .entry-meta .author a:focus { color: var(--nb-accent); text-decoration: underline; }
body.single-post .entry-header .entry-meta .posted-on time { color: var(--nb-muted); }
/* Kadence prints a second <time class="updated"> whenever the modification
   timestamp differs by even a second, so a post edited the same day shows the
   same date twice ("16 August 2026 · 16 August 2026"). The modification date is
   reported truthfully in the dateline pill above and in the stat strip below,
   so the byline keeps only the publication date. */
body.single-post .entry-header .entry-meta .posted-on time.updated { display: none; }

/* The note above the title. The reference sets this line in handwriting —
   Comic Sans with a Segoe Print fallback — tilted a degree off level in a
   muted grey. It replaces the old green dateline pill entirely: no border, no
   background, no letter-spacing. ------------------------------------- */
body.single-post .ebi-kicker {
  display: block;
  font-family: var(--nb-hand);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nb-note);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  margin: 0 0 1.35rem;
  max-width: 100%;
  transform: rotate(-1deg);
  transform-origin: left center;
}
body.single-post .ebi-kicker a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(79, 70, 165, 0.45); }
body.single-post .ebi-kicker a:hover,
body.single-post .ebi-kicker a:focus { color: var(--nb-accent); border-bottom-color: var(--nb-accent); }

body.single-post .entry-header .kadence-breadcrumbs { margin: 0 0 0.9rem; }
body.single-post .entry-header .kadence-breadcrumbs,
body.single-post .entry-header .rank-math-breadcrumb,
body.archive .entry-header .kadence-breadcrumbs,
body.search .entry-header .kadence-breadcrumbs,
body.blog .entry-header .kadence-breadcrumbs {
  font-family: var(--nb-hand);
  font-size: 15px;
  color: var(--nb-note);
  transform: rotate(-1deg);
  transform-origin: left center;
}

/* Title: Trebuchet, the reference page's clamp and tracking. Kadence's own
   `.wp-site-blocks .post-title h1` rule sets 32px, so this needs the extra
   specificity.

   The title runs the full width of the header rather than the reading measure,
   and is sized to land in two lines. It used to be capped at 850px, which put
   the site's own long review titles into three — "Xero Review 2026: / Features,
   Pricing, Pros / & Cons (Is It Worth It?)" — with a third of the header empty
   beside them. There is no width cap now; what keeps the count at two is the
   ceiling on the size, and that ceiling came down from 72px to 68px when the
   header was capped to the article block and the box narrowed from 1242px to
   1100px. Two lines of "Xero Review 2026: Features, Pricing, Pros & Cons (Is It
   Worth It?)" in Trebuchet MS 700 at this tracking measure 904/1100 at 70px,
   i.e. nothing left over, and 877/1066 at 68px; at 72px the title breaks into
   three (609/724/712). The live "Xero Promo Code 2026: Discount, Trial and
   Pricing Guide" is shorter and lands in two lines at any of these sizes
   (721/983 at 68px). A longer title than either wraps on to a third line,
   which is what a headline is for. ---------------------------------- */
body.single-post .entry-header.post-title h1.entry-title,
body.page .entry-header h1.entry-title {
  font-family: var(--nb-display);
  font-weight: 700;
  font-size: clamp(2.125rem, 1.1rem + 3.6vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -1.8px;
  color: var(--nb-ink);
  text-transform: none;
  margin: 0 0 1.15rem;
  max-width: none;
  text-wrap: balance;
}
/* The swoosh under the title. A squashed ellipse, rotated a degree and a half
   off true, nudged right of the text so it reads as a swipe of chalk rather
   than a border. ------------------------------------------------------ */
body.single-post .entry-header.post-title h1.entry-title::after,
body.page .entry-header h1.entry-title::after {
  content: "";
  display: block;
  width: min(260px, 46%);
  height: 9px;
  margin: 0.55rem 0 0 8px;
  border-radius: 50%;
  background-color: var(--nb-swoosh);
  transform: rotate(-1.5deg);
}

/* Categories. The reference has no pill component at all, so these become
   small Arial labels carrying a hand-ruled underline instead — the same
   swoosh blue as the title, which keeps them out of the title's way. ---- */
body.single-post .entry-header .entry-taxonomies,
body.single-post .entry-taxonomies { margin: 0 0 1.1rem; }
body.single-post .entry-taxonomies .term-links a {
  display: inline-block;
  font-family: var(--nb-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0 0 2px;
  margin: 0 1.1rem 0.35rem 0;
  border: 0;
  border-bottom: 2px solid var(--nb-swoosh);
  border-radius: 0;
  background-color: transparent;
  color: var(--nb-accent);
  text-decoration: none;
}
body.single-post .entry-taxonomies .term-links a:hover,
body.single-post .entry-taxonomies .term-links a:focus {
  background-color: transparent;
  border-bottom-color: var(--nb-accent);
  color: var(--nb-accent);
}

/* 4. Article layout: contents rail (left) + reading column (right) --------
   `ebi_inject_toc()` emits exactly two children: the contents in
   `.ebi-article-rail` and everything else in `.ebi-entry-body`. The rail is
   pinned to the first column and the body to the second, so both share a
   single grid row as tall as the article — which is what lets `position:
   sticky` hold the rail in view the whole way down. Without a contents list
   there is no wrapper and the article stays a single column.

   Because the rail is emitted first and now also sits first, auto-placement
   puts the two in the same row on its own — no `dense` packing needed.

   The split is 30/70. `fr` units share out what is left *after* the gap, so
   the two tracks hold that ratio at every width instead of only when the gap
   happens to vanish; percentage tracks plus a gap would overflow the row by
   exactly the gap.

   The block is capped at 1100px so that the 70% column lands on the reading
   measure: 0.7 x (1100 - 48) = 736px = 46rem. Left uncapped, the article
   column measures 836px at a 1440px viewport — roughly 92 characters to the
   line, which undoes the measure fix this stylesheet exists to make. The cap
   also stops the rail widening without limit on very large screens. ---- */
:root {
  --ebi-rail-gap: 3rem;
  --ebi-rail-block: 1100px;
}
.single-post .entry-content:has(> .ebi-article-rail) {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
  column-gap: var(--ebi-rail-gap);
  align-items: start;
  width: 100%;
  max-width: var(--ebi-rail-block);
  margin-left: auto;
  margin-right: auto;
}
.single-post .entry-content:has(> .ebi-article-rail) > .ebi-article-rail {
  grid-column: 1;
  align-self: start;
  position: sticky;
  top: 120px;
  max-width: none;
  margin: 0;
}
.single-post .entry-content:has(> .ebi-article-rail) > .ebi-entry-body {
  grid-column: 2;
  min-width: 0;
  max-width: none;
  margin: 0;
}

/* The header is the hero above the split, and it spans the *article block* —
   the same 1100px box the rail and the reading column are laid out in —
   centred in whatever container the template hands us. It used to run the full
   container width, which was nearly invisible while single posts were on
   Kadence's `content-width-normal`: a 1290px container left the hero 1242px
   against a 1100px article, 71px of overhang a side at 1440px. The site's
   posts are now `content-width-fullwidth`, which removes the container's
   max-width altogether, and measured on the live post at 1920px the hero was
   x0 w1903 against an article at x402 w1100 — the title, the stat strip and
   the button pair ran the width of the window while everything below them sat
   in a centred column. The cap is what makes the two agree at every width, and
   it also stops the hero growing without limit on large screens; the block is
   `min(1100px, 100%)` so nothing changes below 1148px, where the article block
   is already the whole viewport. Scoped with `:has()` for the rail case because
   the grid itself does not apply without a contents list; a post that skipped
   the contents list caps each child at the measure instead. ------------- */
body.single-post .entry-content-wrap:has(.ebi-article-rail) > .entry-header {
  width: 100%;
  max-width: min(var(--ebi-rail-block), 100%);
  margin-left: auto;
  margin-right: auto;
}
/* The grid's own track maths, defined once and used by everything that has to
   line up with the reading column. `100%` resolves per element against that
   element's containing block, and the reading column's and the closing
   sections' containing blocks all measure the same width — which is what lets
   one set of values be correct for both. Disabled below 1025px, where the grid
   stops and the rail returns to the top of the article. ------------------ */
@media (min-width: 1025px) {
  body.single-post:has(.ebi-article-rail) {
    --nb-block: min(var(--ebi-rail-block), 100%);
    --nb-col-w: calc(0.7 * (var(--nb-block) - var(--ebi-rail-gap)));
    --nb-col-x: calc(
      (100% - var(--nb-block)) / 2
      + 0.3 * (var(--nb-block) - var(--ebi-rail-gap))
      + var(--ebi-rail-gap)
    );
  }
  /* The closing three — author note, related cards and the closing call to
     action — are printed by `kadence_single_after_content`, which fires
     *outside* the article element. They are not inside the reading column, so
     without this they ran the full container width: measured at 1440px they
     were 1242px wide starting 435px to the left of the prose. They line up with
     the prose rather than the rule, which is where the reference puts its own
     closing note, so they take the column inset by the gutter and the rule. */
  body.single-post:has(.ebi-article-rail) :is(.ebi-authorbox, .ebi-related, .ebi-cta-block, .post-navigation, .comments-area) {
    width: calc(var(--nb-col-w) - var(--nb-sheet-pad));
    max-width: none;
    margin-left: calc(var(--nb-col-x) + var(--nb-sheet-pad));
    margin-right: 0;
  }
}
/* The margin rule. Drawn on the reading column itself, so on a page the
   header's segment and the body's meet exactly and the line runs unbroken from
   the title to the last paragraph, the way it does on the reference page; on a
   post the rule simply starts where the reading column does. ------------- */
body.single-post .ebi-entry-body,
body.page .entry-content {
  border-left: 1px solid var(--nb-margin-soft);
  padding-left: var(--nb-gutter);
}
/* Pages line up on that rule instead of floating centred, so the title, the
   rule and the prose share one left edge. Posts whose contents list was
   skipped (fewer than three H2s) keep the centred column they had: with no
   wrapper there is nothing to hang a continuous rule on. ---------------- */
body.page .entry-content > * { margin-left: 0; margin-right: 0; }

/* The rail is the taped-in note in the margin: a strip of paper a fraction off
   level, held down with a piece of tape, sitting left of the red rule. It is
   an index rather than prose, so the entries stay in a text face while the
   label above them is handwriting. ------------------------------------- */
.single-post .ebi-article-rail .ebi-toc {
  position: relative;
  margin: 1.7rem 0 0;
  padding: 1.45rem 1.35rem 1.5rem;
  border: 0;
  border-radius: 0;
  background-color: var(--nb-card-solid);
  box-shadow: 0 6px 16px rgba(50, 60, 70, 0.09);
  font-size: 15px;
  transform: rotate(-0.7deg);
  /* A long article can carry thirty sections. Capping the card to the viewport
     keeps it fully readable while stuck instead of clipping the tail. */
  max-height: calc(100vh - 168px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* The strip of tape. One is enough — the reference never stacks two — and it
   is allowed to hang above the card, which is the whole point of it. */
.single-post .ebi-article-rail .ebi-toc::before {
  content: "";
  position: absolute;
  top: -0.8rem;
  left: 50%;
  width: 92px;
  height: 22px;
  margin-left: -46px;
  background-color: rgba(201, 216, 255, 0.62);
  transform: rotate(-1.6deg);
}
.single-post .ebi-article-rail .ebi-toc__title {
  display: block;
  font-family: var(--nb-hand-alt);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--nb-note-soft);
  margin: 0 0 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--nb-line);
}
.single-post .ebi-article-rail .ebi-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: ebi-toc-item;
}
.single-post .ebi-article-rail .ebi-toc li {
  counter-increment: ebi-toc-item;
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr);
  gap: 0.5rem;
  align-items: baseline;
  margin: 0;
  padding: 0.4rem 0;
}
.single-post .ebi-article-rail .ebi-toc li + li {
  border-top: 1px dashed rgba(174, 189, 184, 0.75);
}
.single-post .ebi-article-rail .ebi-toc li::before {
  content: counter(ebi-toc-item, decimal-leading-zero);
  font-family: var(--nb-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--nb-accent);
}
.single-post .ebi-article-rail .ebi-toc a {
  display: block;
  font-family: var(--nb-serif);
  font-size: 15px;
  color: var(--nb-ink);
  line-height: 1.45;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.single-post .ebi-article-rail .ebi-toc a:hover,
.single-post .ebi-article-rail .ebi-toc a:focus-visible {
  color: var(--nb-accent);
  border-bottom-color: rgba(79, 70, 165, 0.4);
}

/* The design system centres the reading column; inside the grid the body is
   already exactly one measure wide, so the auto margins are removed and
   everything in it lines up on the same left edge. */
.single-post .ebi-entry-body > * {
  max-width: var(--ebi-measure);
  margin-left: 0;
  margin-right: 0;
}
/* The disclosure and the lead image open the article. The lead image runs the
   full width of the column; the notice is a quiet aside. */
.single-post .ebi-entry-body > .ebi-lead-image { max-width: 100%; }
.single-post .ebi-entry-body > .alignwide,
.single-post .ebi-entry-body > .alignfull,
.single-post .ebi-entry-body > .wp-block-table,
.single-post .ebi-entry-body > .ebi-table-wrap,
.single-post .ebi-entry-body > figure,
.single-post .ebi-entry-body > .wp-block-image,
.single-post .ebi-entry-body > .wp-block-embed,
.single-post .ebi-entry-body > .wp-block-gallery,
.single-post .ebi-entry-body > .ebi-compare,
.single-post .ebi-entry-body > table { max-width: 100%; }

/* 5. Lead image ----------------------------------------------------------- */
/* 5. Lead image: pasted onto the page rather than floated on it — a white mat,
   a hairline edge and a handwritten caption, the way a print would be stuck
   into a notebook. ------------------------------------------------- */
body.single-post .ebi-lead-image {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  max-width: 100%;
  padding: 10px 10px 0;
  background-color: #fff;
  border: 1px solid var(--nb-line);
}
body.single-post .ebi-lead-image__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  border: 0;
  background-color: var(--nb-edge);
}
body.single-post .ebi-lead-image figcaption {
  margin: 0.7rem 0 0;
  padding: 0 0 0.85rem;
  font-family: var(--nb-hand-alt);
  font-size: 14px;
  line-height: 1.5;
  color: var(--nb-note);
}

/* 6. Article typography --------------------------------------------------- */
/* Sections. The reference sets each H2 in Trebuchet over a highlighter mark
   that hugs the words instead of running the full column, so the heading is a
   block at `width: fit-content` — which keeps normal flow (an inline heading
   would let the next inline sibling share its line) while the background
   stops at the last word. `box-decoration-break: clone` keeps the mark
   correct when a long heading wraps. ---------------------------------- */
body.single-post .entry-content h2,
body.page .entry-content h2 {
  font-family: var(--nb-display);
  font-size: clamp(25px, 1rem + 1.7vw, 36px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--nb-ink);
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 50px 0 20px;
  padding: 0;
  background-image: linear-gradient(
    transparent 58%,
    var(--nb-highlight) 58%,
    var(--nb-highlight) 91%,
    transparent 91%
  );
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
body.single-post .entry-content h3,
body.page .entry-content h3 {
  font-family: var(--nb-ui);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  color: var(--nb-ink);
  margin: 28px 0 10px;
}
/* The opening paragraph is set larger, exactly as the reference's `.intro`.
   `:first-of-type` counts paragraph siblings only, so this lands on the first
   paragraph even though the notice and the lead image precede it. ------ */
body.single-post .entry-content > p:first-of-type,
body.single-post .ebi-entry-body > p:first-of-type {
  font-size: 21px;
  line-height: 1.75;
  color: var(--nb-ink);
}
/* Prose rhythm, straight from the reference: 18px/1.82 in a serif, 18px
   paragraph margins, 28px list indents. -------------------------------- */
body.single-post .ebi-entry-body,
body.page .entry-content {
  font-family: var(--nb-serif);
  font-size: 18px;
  line-height: 1.82;
  color: var(--nb-ink);
}
body.single-post .ebi-entry-body > p,
body.page .entry-content > p { margin: 18px 0; }
body.single-post .ebi-entry-body ul,
body.page .entry-content ul { padding-left: 28px; margin: 20px 0; }
body.single-post .ebi-entry-body li,
body.page .entry-content li { margin: 10px 0; }
body.single-post .entry-content blockquote,
body.single-post .ebi-entry-body blockquote {
  margin: 30px 0;
  padding: 18px 24px;
  border-left: 4px solid var(--nb-accent);
  background-color: var(--nb-card);
  font-family: var(--nb-serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1.7;
  color: var(--nb-ink);
}
body.single-post .ebi-entry-body blockquote cite,
body.single-post .ebi-entry-body blockquote footer { font-family: var(--nb-ui); font-size: 14px; font-style: normal; color: var(--nb-muted); }
/* Scoped to the body wrapper, not to `.entry-content`. The contents rail is the
   body's *sibling*, but it is also a `li` inside `.entry-content`, so an
   `.entry-content :is(p, li, td) a` selector reaches straight into the index and
   underlines every entry at rest. It outranks the rail's own link rule too —
   five classes against three — so excluding the rail here is the only
   structural fix, rather than adding weight to the override. */
body.single-post .ebi-entry-body :is(p, li, td) a:not(.ebi-cta):not(.button) {
  color: var(--nb-accent);
  text-decoration: underline;
  text-decoration-color: rgba(79, 70, 165, 0.4);
  text-underline-offset: 3px;
}
body.single-post .ebi-entry-body :is(p, li, td) a:not(.ebi-cta):not(.button):hover {
  color: var(--nb-accent);
  text-decoration-color: var(--nb-accent);
}
/* Tips, notices and inline notes all share the reference's `.tip`: an indigo
   rule down the left, a translucent card behind it, a soft shadow and the
   faintest tilt. The strong lead-in is Arial in the accent. ---------- */
body.single-post .ebi-evidence-note,
body.single-post .ebi-callout {
  margin: 34px 0;
  padding: 25px 28px;
  border: 0;
  border-left: 4px solid var(--nb-accent);
  border-radius: 0;
  background-color: var(--nb-card);
  box-shadow: var(--nb-shadow);
  font-family: var(--nb-serif);
  font-size: 17px;
  line-height: 1.75;
  color: var(--nb-ink);
  transform: rotate(0.2deg);
}
body.single-post .ebi-callout--disclosure { background-color: var(--nb-card); }
body.single-post .ebi-callout__title,
body.single-post .ebi-callout strong,
body.single-post .ebi-evidence-note strong {
  font-family: var(--nb-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--nb-accent);
}
body.single-post .ebi-callout > :first-child { margin-top: 0; }
body.single-post .ebi-callout > :last-child { margin-bottom: 0; }

/* Tables: the reference's `.comparison` — Arial at 15px, one hairline per row,
   a tinted header and no outer border. ---------------------------------- */
body.single-post .ebi-entry-body table,
body.page .entry-content table {
  width: 100%;
  margin: 30px 0;
  border: 0;
  border-collapse: collapse;
  background-color: rgba(255, 255, 255, 0.52);
  font-family: var(--nb-ui);
  font-size: 15px;
  line-height: 1.5;
}
body.single-post .ebi-entry-body :is(th, td),
body.page .entry-content :is(th, td) {
  border: 0;
  border-bottom: 1px solid var(--nb-table-line);
  padding: 14px 12px;
  text-align: left;
  vertical-align: top;
}
body.single-post .ebi-entry-body th,
body.page .entry-content th {
  font-weight: 700;
  background-color: var(--nb-th-bg);
}

/* Checklists. The reference draws them as a dashed box of handwritten lines,
   so any list carrying checkboxes is dressed that way. `is-style-checklist`
   and `.ebi-checklist` cover the block-editor styles for the same look. */
body.single-post .ebi-entry-body ul:has(> li > input[type="checkbox"]),
body.single-post .ebi-entry-body ul.is-style-checklist,
body.single-post .ebi-entry-body .ebi-checklist {
  list-style: none;
  margin: 32px 0;
  padding: 24px 28px;
  border: 1px dashed var(--nb-dash);
  background-color: rgba(255, 255, 255, 0.42);
}
body.single-post .ebi-entry-body ul:has(> li > input[type="checkbox"]) li,
body.single-post .ebi-entry-body ul.is-style-checklist li,
body.single-post .ebi-entry-body .ebi-checklist li {
  font-family: var(--nb-hand-alt);
  font-size: 17px;
  line-height: 1.6;
  margin: 11px 0;
}

/* Figures inside the prose are matted like the lead image, and a dashed rule
   separates long stretches of sections. -------------------------------- */
body.single-post .ebi-entry-body figure { margin: 30px 0; }
body.single-post .ebi-entry-body figure img {
  padding: 8px;
  border: 1px solid var(--nb-line);
  background-color: #fff;
}
body.single-post .ebi-entry-body figcaption {
  margin-top: 0.6rem;
  font-family: var(--nb-hand-alt);
  font-size: 14px;
  color: var(--nb-note);
}
body.single-post .ebi-entry-body hr,
body.page .entry-content hr {
  border: 0;
  border-top: 1px dashed var(--nb-dash);
  margin: 40px 0;
}

/* Code and preformatted text: the one place a monospace face is worth breaking
   the paper illusion for. --------------------------------------------- */
body.single-post .ebi-entry-body :is(code, kbd, pre, samp) {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
}
body.single-post .ebi-entry-body pre {
  margin: 26px 0;
  padding: 18px 20px;
  border-left: 4px solid var(--nb-accent);
  background-color: rgba(255, 255, 255, 0.6);
  overflow-x: auto;
}
body.single-post .ebi-entry-body :not(pre) > code {
  padding: 0.15em 0.35em;
  background-color: rgba(255, 243, 168, 0.7);
}

/* 6b. The ruled sheet (posts, below the affiliate disclosure) --------------
   Under the disclosure the article is written on the reference's school-copy
   sheet: a cream page ruled in pale blue every 42px with the rule at the foot
   of the row, a 2px red margin rule 44px in from the sheet's left edge, and a
   column of punched holes in the margin outside it. Prose lines are exactly one
   row tall, so the text sits on the rules the way handwriting does.

   The rules are drawn per block rather than once on the column, and every text
   block is a whole number of rows tall — n rows of text plus one blank row of
   padding — so each block's grid continues the previous one's and consecutive
   paragraphs read as one continuous ruled page. Rules drawn once on the column
   would drift out of step at the first lead image or tip card, whose height is
   not a whole number of rows; per-block rules cannot drift. Blocks that are not
   text (images, tables, cards) keep to the text inset and leave an unruled row
   above and below themselves, the way something pasted into a notebook does.

   The text blocks carry the rules out into the margin — a negative
   `margin-left` of the sheet padding with exactly the same amount back as
   `padding-left` — so a rule runs the full width of the sheet and crosses the
   red line, and the text still starts on the same edge as everything else. - */
body.single-post .ebi-entry-body {
  position: relative;
  /* The section headings draw their rules on a `::before` that is deliberately
     wider than the sheet; this clips it to the sheet's right edge. Nothing
     inside the column is sticky, so the new scroll container costs nothing. */
  overflow: hidden;
  border-left: 0;
  padding-left: var(--nb-sheet-pad);
  background-color: var(--nb-sheet);
  box-shadow: 0 4px 18px rgba(50, 60, 70, 0.1);
  font-family: var(--nb-ui);
  font-size: 17px;
  line-height: var(--nb-row);
  color: var(--nb-sheet-ink);
}
/* Every child keeps the blank row that follows it, whether or not it is ruled. */
body.single-post .ebi-entry-body > * { margin-bottom: var(--nb-row); }

/* One school-copy row per line: the rule sits at the foot of each 42px row, so
   a line of text always rests on a line of the page. The blank row between
   blocks is padding, not margin, so the rule of that row is drawn too. ----- */
body.single-post .ebi-entry-body > :is(p, h2, h3, h4, h5, h6),
body.single-post .ebi-entry-body > ul:not(.is-style-checklist):not(.ebi-checklist):not(:has(> li > input[type="checkbox"])),
body.single-post .ebi-entry-body > ol:not(.is-style-checklist):not(.ebi-checklist):not(:has(> li > input[type="checkbox"])) {
  margin: 0 0 0 calc(-1 * var(--nb-sheet-pad));
  padding: 0 0 var(--nb-row) var(--nb-sheet-pad);
  line-height: var(--nb-row);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--nb-row) - 1px),
    var(--nb-sheet-rule) calc(var(--nb-row) - 1px) var(--nb-row)
  );
  background-repeat: repeat-y;
}
/* The opening paragraph is the same row size as the rest of the sheet. The
   older lead-paragraph rule is a `:first-of-type`, so it needs the extra
   specificity to be replaced rather than merely followed. -------------- */
body.single-post .ebi-entry-body > p:first-of-type {
  font-family: var(--nb-ui);
  font-size: 17px;
  line-height: var(--nb-row);
  color: var(--nb-sheet-ink);
}
body.single-post .ebi-entry-body > :is(ul, ol) {
  padding-left: calc(var(--nb-sheet-pad) + 24px);
  list-style-position: outside;
}
body.single-post .ebi-entry-body > :is(ul, ol) > li {
  margin: 0;
  line-height: var(--nb-row);
}

/* Headings: the reference's blue ink over a mark that hugs the words, one row
   plus a blank row. `width: fit-content` is what keeps the mark snug, so the
   heading is narrower than the sheet and its rules have to be a separate layer;
   that layer is `100vw` wide from the heading's own left edge and clipped by
   the column's `overflow: hidden`. -------------------------------------- */
body.single-post .ebi-entry-body > :is(h2, h3, h4, h5, h6) {
  position: relative;
  width: fit-content;
  max-width: 100%;
  font-family: var(--nb-ui);
  letter-spacing: 0;
  color: var(--nb-head);
}
body.single-post .ebi-entry-body > :is(h2, h3, h4, h5, h6)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--nb-row) - 1px),
    var(--nb-sheet-rule) calc(var(--nb-row) - 1px) var(--nb-row)
  );
  background-repeat: repeat-y;
}
body.single-post .ebi-entry-body > h2 {
  font-size: 21px;
  font-weight: 700;
  line-height: var(--nb-row);
  /* The mark is placed on the *text* box, not the element box. A heading carries
     the sheet's own 78px of padding on its left and its blank row underneath, so
     a plain percentage gradient resolved over the whole element lands 48%-88%
     down an 84px box — under the words instead of behind them — and runs a
     stripe of yellow out into the margin. `background-position` puts its left
     edge on the text's own left edge (the heading is `fit-content`, so the text
     ends at the element's right edge) and the stops below are measured in rows
     rather than in percentages. Three rows are marked, so a heading wrapping to
     two or three lines is marked line by line and the blank row after it is
     not; a fourth line would not be marked. -------------------------- */
  background-image: linear-gradient(
    to bottom,
    transparent 0 calc(0.48 * var(--nb-row)),
    var(--nb-mark) calc(0.48 * var(--nb-row)) calc(0.88 * var(--nb-row)),
    transparent calc(0.88 * var(--nb-row)) calc(1.48 * var(--nb-row)),
    var(--nb-mark) calc(1.48 * var(--nb-row)) calc(1.88 * var(--nb-row)),
    transparent calc(1.88 * var(--nb-row)) calc(2.48 * var(--nb-row)),
    var(--nb-mark) calc(2.48 * var(--nb-row)) calc(2.88 * var(--nb-row)),
    transparent calc(2.88 * var(--nb-row))
  );
  background-position: var(--nb-sheet-pad) 0;
  /* The mark's own area is the text rows and nothing else: the element is its
     text rows plus the one blank row of padding, so the height here is the
     element less that blank row. Sized to the whole element instead, the second
     band of a one-line heading falls in the blank row and paints a stripe of
     yellow across the empty line, which is exactly what it did. --------- */
  background-size: calc(100% - var(--nb-sheet-pad)) calc(100% - var(--nb-row));
  background-repeat: no-repeat;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
body.single-post .ebi-entry-body > :is(h3, h4, h5, h6) {
  font-size: 19px;
  font-weight: 700;
  line-height: var(--nb-row);
}

/* The margin rule and the punched holes, on the one layer that is painted above
   the rules — so the red line crosses them and the holes are punched through
   them, which is how the reference draws both. -------------------------- */
body.single-post .ebi-entry-body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(
      circle at 20px 34px,
      var(--nb-hole) 0 7px,
      var(--nb-hole-edge) 7px 8px,
      transparent 8px
    ),
    linear-gradient(
      to right,
      transparent 0 var(--nb-rule-x),
      var(--nb-sheet-margin) var(--nb-rule-x) calc(var(--nb-rule-x) + 2px),
      transparent calc(var(--nb-rule-x) + 2px) 100%
    );
  background-size: 44px 120px, 100% 100%;
  background-repeat: repeat-y, no-repeat;
}

/* Cards and media sit on the sheet rather than being ruled with it: they keep
   the text inset and are given an opaque back so the cream shows through the
   paper's own translucency and not the page behind it. ------------------ */
body.single-post .ebi-entry-body > :is(figure, .ebi-lead-image, blockquote, .ebi-callout, .ebi-evidence-note, table, .ebi-table-wrap, .wp-block-image, .wp-block-embed, .wp-block-gallery, .wp-block-table, .ebi-screenshot-pair, .ebi-compare, .ebi-cta-block, .ebi-checklist, .wp-block-group, .wp-block-columns, .wp-block-buttons) {
  margin: var(--nb-row) 0;
  background-color: var(--nb-card-solid);
}
/* Nothing is inset from the top of the sheet; the first block starts on it. */
body.single-post .ebi-entry-body > *:first-child { margin-top: 0; }
/* Two of the tip cards in the content carry their own inline background and bar
   colour — `background:#f4fbfd; border-left:4px solid #13B5EA` — a live colour
   from the site's older palette. An inline declaration outranks every selector,
   so those two properties are the one place the sheet needs `!important` to
   bring the card back onto its palette; the geometry stays the author's. -- */
body.single-post .ebi-entry-body > .ebi-evidence-note {
  background-color: var(--nb-card-solid) !important;
  border-left-color: var(--nb-accent) !important;
}

/* 7. Closing chrome ------------------------------------------------------- */
body.single-post .ebi-authorbox,
body.single-post .ebi-related { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
/* The author note is the reference's taped polaroid. It is not a card and not an
   inset: it is another stretch of the same ruled sheet, so the writing runs on to
   the foot of the page instead of stopping where the article does. That is why
   the top margin is cancelled — the two sheets are meant to meet — and why the
   rules, the red margin rule and the punched holes are drawn here as well.

   The rules are one band across the whole box rather than one per block, because
   the polaroid has to sit on ruled paper; every row of writing is one `--nb-row`
   tall, with blank rows between the paragraphs, so the words rest on the lines
   the same way the body copy above them does. -------------------------- */
body.single-post .ebi-authorbox {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
  gap: 0 clamp(22px, 3vw, 40px);
  align-items: start;
  padding: var(--nb-row) var(--nb-gutter) 0 var(--nb-sheet-pad);
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--nb-sheet);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(var(--nb-row) - 1px),
    var(--nb-sheet-rule) calc(var(--nb-row) - 1px) var(--nb-row)
  );
  box-shadow: var(--nb-shadow);
  transform: none;
}
/* The rule and the holes on the layer above the rules, exactly as the body sheet
   draws them: the red line crosses the rules and the holes are punched through
   them. Each sheet counts its own rows from its own top, so the two phases do not
   meet — invisible at the row scale, and the holes are 120px apart. ----- */
body.single-post .ebi-authorbox::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(
      circle at 20px 34px,
      var(--nb-hole) 0 7px,
      var(--nb-hole-edge) 7px 8px,
      transparent 8px
    ),
    linear-gradient(
      to right,
      transparent 0 var(--nb-rule-x),
      var(--nb-sheet-margin) var(--nb-rule-x) calc(var(--nb-rule-x) + 2px),
      transparent calc(var(--nb-rule-x) + 2px) 100%
    );
  background-size: 44px 120px, 100% 100%;
  background-repeat: repeat-y, no-repeat;
}
/* The polaroid: a white mat, a shadow that lifts it off the paper, and a tilt.
   The bottom margin reserves the two rows the "Hello!" note hangs in. ----- */
body.single-post .ebi-authorbox__photo {
  position: relative;
  margin: 0 0 calc(2 * var(--nb-row) + 6px);
  padding: 12px 12px 16px;
  background-color: #fff;
  box-shadow: 0 9px 20px rgba(40, 50, 60, 0.17);
  transform: rotate(-3.2deg);
}
body.single-post .ebi-authorbox__photo img {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  object-fit: cover;
}
/* The strip of tape, over the top-left corner and a little further off level than
   the photograph under it, the way a real one is. ------------------------ */
body.single-post .ebi-authorbox__photo::before {
  content: "";
  position: absolute;
  top: -24px;
  left: 8%;
  width: 128px;
  height: 32px;
  background-color: rgba(233, 220, 163, 0.78);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(120, 100, 60, 0.07));
  transform: rotate(-4.5deg);
}
/* "Hello!", pencilled in beside the foot of the photograph, with the arrow that
   points up at it. The arrow is a drawn curve rather than a glyph: the hand faces
   have no arrow and Segoe UI Symbol's is a printer's arrow. Its stroke is
   `--nb-head`, which a data URI cannot read, so the value is repeated here and in
   the two rules below — keep all four in step. -------------------------- */
body.single-post .ebi-authorbox__hello {
  position: absolute;
  left: 4px;
  bottom: calc(-2 * var(--nb-row));
  font-family: var(--nb-hand);
  font-size: 17px;
  line-height: 1;
  color: var(--nb-head);
  white-space: nowrap;
  transform: rotate(-3deg);
}
body.single-post .ebi-authorbox__hello::before {
  content: "";
  position: absolute;
  left: 12px;
  bottom: calc(100% + 6px);
  width: 24px;
  height: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cpath d='M4 30 C 6 20, 11 10, 19 5' fill='none' stroke='%23174b9b' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M11 6 L19.6 4 L20.4 13' fill='none' stroke='%23174b9b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/* The writing: one hand face, one blue ink, one row of the page per line, so the
   name, the role, the biography and the sign-off all sit on the lines. --- */
body.single-post .ebi-authorbox__body {
  font-family: var(--nb-hand);
  font-size: 17px;
  line-height: var(--nb-row);
  color: var(--nb-head);
}
/* `:not([class])` on purpose. The name, the role, the sign-off and the link are
   paragraphs too, and a plain `p` selector here outranks each of their own rules
   on element count — measured on the previous version of this block, the name and
   the role came back in the wrong face. ------------------------------- */
body.single-post .ebi-authorbox__body > p:not([class]) {
  font-family: var(--nb-hand);
  font-size: 17px;
  line-height: var(--nb-row);
  color: var(--nb-head);
  margin: 0 0 var(--nb-row);
}/* The mark travels with an inline box: a block paints its background the width of
   the column instead of behind the words, so the swipe is a shared rule and the
   two things that carry one — the name and the sign-off — differ only in size and
   in what sits around them. The padding is the overhang at each end, pulled back
   off the column by the negative margin so the letters themselves start on the
   same edge as everything else, and `box-decoration-break: clone` gives the
   overhang to every line. The stops are measured against the inline box, which is
   the face's own ascent and descent rather than the row: 20% down is just above
   the caps and 90% is just under the baseline. -------------------------- */
body.single-post :is(.ebi-authorbox__name, .ebi-authorbox__mark) {
  display: inline;
  margin: 0 0 0 -8px;
  padding: 0 8px;
  background-image: linear-gradient(
    to bottom,
    transparent 0 20%,
    var(--nb-mark) 20% 90%,
    transparent 90%
  );
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
body.single-post .ebi-authorbox__name {
  font-family: var(--nb-hand);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--nb-head);
}
/* The role, and the drawn rule under it. A block, so that it starts a row of its
   own — the name above it is an inline box, and at this column width the two fit
   on one line together, which is not the reference — but `width: fit-content` so
   the drawn rule can stop where the words do instead of crossing the column. */
body.single-post .ebi-authorbox__role {
  position: relative;
  display: block;
  width: fit-content;
  font-family: var(--nb-hand);
  font-size: 18px;
  /* Both of these are inherited from the uppercase small-caps role in
     design-system.css, which is how the reference's "Author & Founder" came
     back as "AUTHOR & FOUNDER" the first time it was measured. ------- */
  text-transform: none;
  letter-spacing: 0;
  color: var(--nb-head);
  margin: 0 0 var(--nb-row);
}
body.single-post .ebi-authorbox__role::after {
  content: "";
  position: absolute;
  left: 0;
  right: -12px;
  bottom: 2px;
  height: 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5.4 C 28 1.6, 54 7, 80 4.6 S 134 1.4, 160 4.4 S 190 6, 198 3.6' fill='none' stroke='%23174b9b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/* The sign-off, marked line by line like the name, with the reference's smile
   after the mark rather than inside it — which is why the mark is a span here and
   the paragraph is left as a block: at this column width the sentence is 342px of
   a 355px column, so the smile landed on a line of its own. The max-width is what
   puts the break where the reference has it — "Let's build something great" /
   "together! ☺". Measured in the face this is set in (Comic Sans MS 700 19px):
   the sentence is 342px, its first three quarters 250px, and "together! ☺"
   112px, so any ceiling between 250 and 339 breaks after "great"; 16.5rem is in
   the middle of that window and leaves room for the fallback faces on a device
   with no Comic Sans. `text-wrap: balance` was tried in place of this and split
   the sentence mid-phrase instead. The 8px of overhang comes with the mark rule
   above. -------------------------------------------------------------- */
body.single-post .ebi-authorbox__signoff {
  font-family: var(--nb-hand);
  font-size: 19px;
  font-weight: 700;
  line-height: var(--nb-row);
  color: var(--nb-head);
  max-width: 16.5rem;
  margin: 0;
}
body.single-post .ebi-authorbox__more {
  font-size: 16px;
  line-height: calc(var(--nb-row) + 12px);
  margin: var(--nb-row) 0 0;
}
/* The profile link keeps the ink of the handwriting it sits in, and carries the
   drawn double rule instead of an underline — which is both the reference's
   gesture and what marks it as the thing to click. -------------------- */
body.single-post .ebi-authorbox__more a {
  text-decoration: none;
  padding-bottom: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 9' preserveAspectRatio='none'%3E%3Cpath d='M1 3 C 30 1.2, 60 4.6, 96 2.8 S 160 1.4, 219 2.4' fill='none' stroke='%23174b9b' stroke-width='1.4' stroke-linecap='round'/%3E%3Cpath d='M1 6.6 C 34 5, 68 8, 104 6.2 S 166 5, 219 6' fill='none' stroke='%23174b9b' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 8px;
}
/* The note is a sheet of its own, so it takes the full width of the body sheet
   rather than of the closing column: at 1440px that is 738px from x=525 instead
   of 660px from x=603, which is what puts the polaroid and the writing side by
   side on the paper the prose above is written on. -------------------- */
@media (min-width: 1025px) {
  body.single-post:has(.ebi-article-rail) .ebi-authorbox {
    width: var(--nb-col-w);
    max-width: none;
    margin-left: var(--nb-col-x);
    margin-right: 0;
  }
}
body.single-post .ebi-related__title {
  font-family: var(--nb-display);
  font-size: 22px;
  letter-spacing: -0.4px;
  color: var(--nb-ink);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--nb-line);
  margin: 0 0 1.35rem;
}
body.single-post .ebi-authorbox a { color: var(--nb-head); }
body.single-post .ebi-authorbox a:hover,
body.single-post .ebi-authorbox a:focus { color: var(--nb-accent); }
/* Related posts and the post navigation are paper notes: square, hairline,
   no shadow at rest. ------------------------------------------------- */
/* Three related posts are always rendered (the query asks for three), so the
   grid is three tracks. Left to `auto-fit` it gave four tracks on the old
   full-width block and two on the reading column — an orphan card under a row
   of two in the second case. ------------------------------------------------- */
body.single-post .ebi-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
body.single-post .ebi-related__card img { border-bottom: 1px solid var(--nb-line); }
body.single-post .ebi-related__card {
  border: 1px solid var(--nb-line);
  border-radius: 0;
  background-color: var(--nb-card-solid);
  box-shadow: none;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
body.single-post .ebi-related__card:hover {
  border-color: rgba(79, 70, 165, 0.35);
  box-shadow: var(--nb-shadow);
  transform: translateY(-2px);
}
body.single-post .ebi-related__cat {
  font-family: var(--nb-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--nb-accent);
}
body.single-post .ebi-related__card h3 {
  font-family: var(--nb-display);
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: -0.3px;
}
body.single-post .post-navigation { margin: clamp(2.5rem, 4vw, 3.5rem) 0 0; }
body.single-post .post-navigation .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
body.single-post .post-navigation a {
  display: block;
  height: 100%;
  border: 1px solid var(--nb-line);
  border-radius: 0;
  background-color: var(--nb-card-solid);
  padding: 18px 20px;
  text-decoration: none;
}
body.single-post .post-navigation a:hover,
body.single-post .post-navigation a:focus { border-color: rgba(79, 70, 165, 0.4); box-shadow: var(--nb-shadow); }
body.single-post .post-navigation .post-navigation-sub {
  font-family: var(--nb-hand-alt);
  font-size: 14px;
  color: var(--nb-note);
}
body.single-post .comments-area { margin-top: clamp(2.5rem, 4vw, 3.5rem); }
body.single-post .comments-area .comment-list { list-style: none; padding: 0; }
body.single-post .comments-area .comment { border-top: 1px dashed var(--nb-dash); padding: 1.15rem 0; }

/* 7b. Header extras and closing CTA ---------------------------------------
   The stat strip, the buttons and the closing call-to-action are shared
   components owned by design-system.css, which the front page also loads.
   They are re-dressed here, scoped to the templates, so nothing on the front
   page moves. --------------------------------------------------------- */
/* Equal quarters were fine while the strip was 1242px wide, but the header is
   now the 736px reading column, and four equal cells of 175px cannot hold
   "October 2, 2026" (163px plus 40px of padding). The two counted facts are
   short — "13", "9" — so the tracks are sized by their content instead:
   half-weight for the two numbers, full weight for the two text values. At the
   703px strip that is 117 / 117 / 234 / 234 against 77 / 77 / 194 / 194 of
   need, and both text values fit with room to spare. ---------------- */
body.single-post .entry-header .ebi-facts {
  grid-template-columns: minmax(0, 0.5fr) minmax(0, 0.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  padding: 0;
  border: 1px solid var(--nb-line);
  border-radius: 0;
  background-color: var(--nb-card);
  margin: 0 0 1.6rem;
}
body.single-post .entry-header .ebi-facts__item { padding: 18px 20px; }
body.single-post .entry-header .ebi-facts__item + .ebi-facts__item { border-left: 1px solid var(--nb-line); }
body.single-post .entry-header .ebi-facts__num {
  font-family: var(--nb-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.4px;
  color: var(--nb-ink);
  margin: 0;
}
body.single-post .entry-header .ebi-facts__cap {
  font-family: var(--nb-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--nb-muted);
  margin: 0.35rem 0 0;
}
/* Buttons: square, Arial, and stamped against the paper with a hard offset
   shadow rather than a blur. ------------------------------------------ */
body.single-post .entry-header .ebi-cta-pair { margin: 0; gap: 0.85rem; }
body.single-post .ebi-cta,
body.page .ebi-cta {
  font-family: var(--nb-ui);
  font-size: 15px;
  font-weight: 700;
  padding: 13px 20px;
  border: 2px solid var(--nb-accent);
  border-radius: 0;
  background: var(--nb-accent);
  color: #fff !important;
  box-shadow: 2px 2px 0 rgba(32, 42, 50, 0.18);
}
body.single-post .ebi-cta:hover,
body.single-post .ebi-cta:focus,
body.page .ebi-cta:hover,
body.page .ebi-cta:focus {
  background: var(--nb-ink);
  border-color: var(--nb-ink);
  color: #fff !important;
  box-shadow: 2px 2px 0 rgba(32, 42, 50, 0.28);
}
body.single-post .ebi-cta.ebi-cta--outline,
body.page .ebi-cta.ebi-cta--outline {
  background: transparent;
  border: 2px dashed var(--nb-dash);
  color: var(--nb-ink) !important;
  box-shadow: none;
}
body.single-post .ebi-cta.ebi-cta--outline:hover,
body.single-post .ebi-cta.ebi-cta--outline:focus,
body.page .ebi-cta.ebi-cta--outline:hover,
body.page .ebi-cta.ebi-cta--outline:focus {
  background: rgba(79, 70, 165, 0.08);
  border-color: var(--nb-accent);
  color: var(--nb-accent) !important;
}
/* The closing call-to-action on a post is a dashed box of notes with one
   button in it, matching the checklist treatment above. ---------------- */
body.single-post .ebi-cta-block {
  border: 1px dashed var(--nb-dash);
  border-radius: 0;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 28px 30px;
}
body.single-post .ebi-cta-block .ebi-cta-block__title {
  font-family: var(--nb-display);
  font-size: 22px;
  letter-spacing: -0.4px;
  color: var(--nb-ink);
}
body.single-post .ebi-cta-block p {
  font-family: var(--nb-serif);
  font-size: 17px;
  line-height: 1.75;
  color: var(--nb-note-soft);
}

/* 8. Archive -------------------------------------------------------------- */
/* The hero is a 264px band with 200px of reserved empty space and its own grey
   fill. On paper it only needs to hold a breadcrumb, the title and the
   description. */
body.archive .entry-hero,
body.search .entry-hero,
body.blog .entry-hero {
  background-color: transparent;
  background-image: none;
  padding: clamp(2rem, 4vw, 3rem) 0 clamp(1.35rem, 2.6vw, 1.85rem);
  border-bottom: 1px solid var(--nb-line);
}
body.archive .entry-hero .entry-header,
body.search .entry-hero .entry-header { min-height: 0; }
body.archive .entry-hero .hero-section-overlay,
body.search .entry-hero .hero-section-overlay { display: none; }
body.archive .entry-hero-container-inner { background-color: transparent; }
/* The archive title is set like an article title — Trebuchet, the same swoosh
   under it — so an index reads as the first page of the same notebook. The
   breadcrumb above it is the page's note, in the handwriting. --------- */
body.archive .archive-title {
  font-family: var(--nb-display);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -1.4px;
  color: var(--nb-ink);
  margin: 0 0 1.4rem;
  max-width: min(850px, 100%);
}
body.archive .archive-title::after {
  content: "";
  display: block;
  width: min(240px, 46%);
  height: 9px;
  margin: 0.55rem 0 0 6px;
  border-radius: 50%;
  background-color: var(--nb-swoosh);
  transform: rotate(-1.5deg);
}
body.archive .entry-hero .kadence-breadcrumbs {
  font-family: var(--nb-hand);
  font-size: 15px;
  color: var(--nb-note);
  margin: 0 0 0.9rem;
  transform: rotate(-1deg);
  transform-origin: left center;
}
body.archive .archive-description,
body.archive .term-description {
  max-width: 52ch;
  font-family: var(--nb-serif);
  font-size: 17px;
  line-height: 1.7;
  color: var(--nb-muted);
  margin: 0 0 0.4rem;
}

/* The loop is a list of full-width horizontal cards. Two up on desktop gives
   each card a sane text measure and shows more of the archive at a glance. */
body.archive .site-main .kadence-posts-list.grid-cols {
  grid-template-columns: repeat(auto-fill, minmax(21.5rem, 1fr));
  gap: clamp(1.25rem, 2.4vw, 1.85rem);
  align-items: stretch;
  margin: 0;
}
body.archive .kadence-posts-list > li { display: flex; }
/* The loop is configured as Kadence's "image beside" card, which lays each one
   out as two grid columns (`item-image-style-beside .loop-entry`), leaving a
   125px thumbnail next to the text. Overriding the tracks to one column stacks
   the image above the text at the full card width instead. */
body.archive .loop-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
  width: 100%;
  border: 1px solid var(--nb-line);
  border-radius: 0;
  background-color: var(--nb-card-solid);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
/* Kadence's rule for this is
   `.grid-lg-col-1.item-image-style-beside article.loop-entry.has-post-thumbnail:not(.kb-post-no-image)`
   — five classes — so the override has to match it class for class. */
body.archive .grid-lg-col-1.item-image-style-beside article.loop-entry.has-post-thumbnail:not(.kb-post-no-image) {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
}
body.archive .loop-entry > .post-thumbnail { border-radius: 0; }
body.archive .loop-entry:hover {
  border-color: rgba(79, 70, 165, 0.35);
  box-shadow: var(--nb-shadow);
  transform: translateY(-2px);
}
/* Thumbnail on top, 16:9. Kadence puts the ratio on the thumbnail itself as a
   padding box — `.wp-site-blocks .post-thumbnail.kadence-thumbnail-ratio-2-3`
   is `padding-bottom: 66.67%` — and absolutely positions the image inside it,
   so the ratio has to be replaced on that same element. */
body.archive .loop-entry .post-thumbnail.kadence-thumbnail-ratio-2-3 { padding-bottom: 56.25%; }
body.archive .loop-entry .post-thumbnail {
  display: block;
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background-color: var(--nb-edge);
}
body.archive .loop-entry .post-thumbnail-inner { padding-bottom: 0; position: static; }
body.archive .loop-entry .post-thumbnail img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
body.archive .loop-entry .entry-content-wrap { padding: clamp(1.1rem, 2vw, 1.5rem); }
body.archive .loop-entry .entry-title {
  font-family: var(--nb-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.24;
  letter-spacing: -0.3px;
  color: var(--nb-ink);
  margin: 0 0 0.6rem;
}
body.archive .loop-entry .entry-summary p {
  font-family: var(--nb-serif);
  font-size: 15px;
  line-height: 1.65;
  color: var(--nb-muted);
  margin: 0;
}
body.archive .loop-entry .entry-taxonomies { margin: 0 0 0.7rem; }
body.archive .loop-entry .entry-taxonomies .term-links a {
  display: inline-block;
  font-family: var(--nb-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0 0 2px;
  margin: 0 0.9rem 0.3rem 0;
  border: 0;
  border-bottom: 2px solid var(--nb-swoosh);
  border-radius: 0;
  background-color: transparent;
  color: var(--nb-accent);
  text-decoration: none;
}
body.archive .loop-entry .entry-actions { margin-top: auto; }
body.archive .loop-entry .post-more-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--nb-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--nb-accent);
  text-decoration: none;
}
/* Kadence already renders an arrow SVG inside the link at higher specificity,
   so the nudge is applied to that icon rather than to a second generated one. */
body.archive .loop-entry .post-more-link .kadence-svg-iconset { margin-left: 0.3em; transition: transform 0.16s ease; }
body.archive .loop-entry:hover .post-more-link .kadence-svg-iconset { transform: translateX(4px); }
body.archive .pagination { margin: clamp(2rem, 4vw, 3rem) 0 0; }
body.archive .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.6rem;
  border: 1px solid var(--nb-table-line);
  border-radius: 0;
  background-color: var(--nb-card-solid);
  color: var(--nb-ink);
  text-decoration: none;
}
body.archive .pagination .page-numbers.current,
body.archive .pagination .page-numbers:hover { background-color: var(--nb-accent); border-color: var(--nb-accent); color: #fff; }

/* The sidebar holds a single text block whose only content is an empty
   paragraph on every archive, leaving a 338px column of nothing beside the
   loop. Collapse the column — and the grid track — only while it holds no
   title, link or image, so a real widget restores it automatically.

   Each `:has()` is at the top level with `:not()` around it. Nesting `:has()`
   inside another `:has()` is invalid, which is what an earlier phrasing here
   did: the rule parsed as nothing at all and silently never applied. */
body.has-sidebar .content-container:has(> .primary-sidebar):not(:has(.primary-sidebar .widget-title)):not(:has(.primary-sidebar a)):not(:has(.primary-sidebar img)) {
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
}
body.has-sidebar .content-container:has(> .primary-sidebar):not(:has(.primary-sidebar .widget-title)):not(:has(.primary-sidebar a)):not(:has(.primary-sidebar img)) > .primary-sidebar { display: none; }
body.has-sidebar .primary-sidebar .widget-title {
  font-family: var(--nb-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--nb-ink);
}
body.has-sidebar .primary-sidebar .widget {
  border: 1px solid var(--nb-line);
  border-radius: 0;
  background-color: var(--nb-card-solid);
  padding: 1.25rem;
}

/* 9. Static pages --------------------------------------------------------- */
/* Pages built with a page builder store their own layout; pages without a
   title element simply start with the content. Both get the paper surface and
   a readable measure where the content is plain text. */
body.page .entry-content > p,
body.page .entry-content > ul,
body.page .entry-content > ol { max-width: var(--ebi-measure); }
/* The serif face, size and colour for pages come from the prose block in
   section 6; all that is left here is the measure. -------------------- */

/* 10. Responsive --------------------------------------------------------- */
@media (max-width: 1200px) {
  body.archive .site-main .kadence-posts-list.grid-cols { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }
}
@media (max-width: 1024px) {
  body.transparent-header:not(.home) main#inner-wrap { padding-top: 104px; }
  /* One column: the contents rail returns to the top of the article, above
     the notice and lead image it used to sit beside. */
  .single-post .entry-content:has(> .ebi-article-rail) {
    display: block;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
  }
  /* With the rail no longer beside it, the note sits at the top of the page —
     still a note, so it keeps a hand-sized width instead of stretching the
     full column — and the prose stays left-aligned against the margin rule. */
  .single-post .entry-content:has(> .ebi-article-rail) > .ebi-article-rail {
    position: static;
    max-width: 26rem;
    margin: 0 0 2rem;
  }
  .single-post .ebi-article-rail .ebi-toc { max-height: none; }
  .single-post .entry-content:has(> .ebi-article-rail) > .ebi-entry-body { margin: 0; }
  .single-post .ebi-entry-body > * { margin-left: 0; margin-right: 0; }
  /* The closing chrome is full width like the article here, so it needs only
     the same inset as the prose — measured at 768px it started 20px left of
     it before this rule. -------------------------------------------- */
  body.single-post:has(.ebi-article-rail) :is(.ebi-authorbox, .ebi-related, .ebi-cta-block, .post-navigation, .comments-area) {
    width: auto;
    max-width: none;
    margin-left: calc(var(--nb-gutter) + 1px);
    margin-right: 0;
  }
  /* The author note is a sheet, not a closing card: it spans the paper rather
     than the prose inset, so its own rules, margin rule and holes line up with
     the sheet above it. ---------------------------------------------- */
  body.single-post:has(.ebi-article-rail) .ebi-authorbox {
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
}
/* The ruled sheet's own breakpoint. The reference takes the row from 42px to
   39px on phones and drops the section heading to 17px with it. --------- */
@media (max-width: 700px) {
  body.single-post .ebi-entry-body { --nb-row: 39px; font-size: 16px; }
  body.single-post .ebi-entry-body > h2 { font-size: 17px; }
  body.single-post .ebi-entry-body > :is(h3, h4, h5, h6) { font-size: 16px; }
  /* The author note has no width for two columns here, so the photograph goes
     above the writing and is capped as a photograph rather than stretched to the
     width of the sheet. The top padding doubles to keep the tape inside. -- */
  body.single-post .ebi-authorbox {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-top: calc(2 * var(--nb-row));
  }
  body.single-post .ebi-authorbox__photo { max-width: 15rem; }
}
@media (max-width: 767px) {
  body.transparent-header:not(.home) main#inner-wrap { padding-top: 100px; }
  body.single-post .post-navigation .nav-links { grid-template-columns: minmax(0, 1fr); }
  body.archive .kadence-posts-list > li { display: block; }
  body.single-post .ebi-related__grid { grid-template-columns: minmax(0, 1fr); }
  /* The reference drops the prose a size on phones and tightens the leading
     with it. The ruled sheet is the exception: a line of its prose is one row
     of the page, so its leading is the row and only the type size steps down.
     The row itself tightens to 39px at 700px, below. ------------------ */
  body.page .entry-content,
  body.single-post .entry-content > p:first-of-type { font-size: 17px; line-height: 1.72; }
  body.single-post .ebi-entry-body { font-size: 16px; line-height: var(--nb-row); }
  body.single-post .ebi-entry-body > p:first-of-type { font-size: 16px; line-height: var(--nb-row); }
}
/* The stat strip. Four columns need the widest value to fit unaided:
   "October 2, 2026" measures 163px at 22px Trebuchet, plus 20px of padding a
   side, so 812px of strip — and the strip is the viewport less 87px of
   scrollbar, container edge and margin rule. That works out at a 915px
   viewport; at 768px two of the four values wrapped to a second line, and at
   exactly 900px the widest one still wrapped on 1px of slack. Two rows of two
   below 940px, which leaves 16px in hand. ---------------------------- */
@media (max-width: 940px) {
  body.single-post .entry-header .ebi-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.single-post .entry-header .ebi-facts__item:nth-child(odd) { border-left: 0; }
  body.single-post .entry-header .ebi-facts__item:nth-child(n + 3) { border-top: 1px solid var(--nb-line); }
  body.single-post .entry-header .ebi-facts__item { padding: 15px 16px; }
}
@media (max-width: 480px) {
  body.single-post .entry-header.post-title h1.entry-title,
  body.page .entry-header h1.entry-title { letter-spacing: -1.2px; }
  body.single-post .entry-content blockquote { padding: 16px 18px; font-size: 17px; }
  body.archive .site-main .kadence-posts-list.grid-cols { grid-template-columns: minmax(0, 1fr); }
  /* The gutter narrows with the paper, or the rule would eat the measure. */
  :root { --nb-gutter: 0.9rem; }
  body.single-post .ebi-callout,
  body.single-post .ebi-evidence-note,
  body.single-post .ebi-cta-block { padding: 20px 18px; }
}

/* 11. Reduced motion + print --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.archive .loop-entry,
  body.single-post .ebi-related__card,
  body.archive .loop-entry .post-more-link .kadence-svg-iconset { transition: none; }
  body.archive .loop-entry:hover,
  body.single-post .ebi-related__card:hover { transform: none; }
}
@media print {
  body:not(.home) { background-image: none; background-color: #fff; }
  body.transparent-header:not(.home) main#inner-wrap { padding-top: 0; }
  body:not(.home) main#inner-wrap::before { display: none; }
  .single-post .entry-content:has(> .ebi-article-rail) { display: block; max-width: none; }
  /* The rail is gone in print, so the header lines up with the prose that
     sits inside the rule rather than with the page edge. */
  body.single-post .entry-content-wrap:has(.ebi-article-rail) > .entry-header { max-width: none; padding-left: calc(var(--nb-gutter) + 1px); }
  .ebi-article-rail { display: none !important; }
}