/* PropertyFacts — site styles for design #2 "The Signal".
   Reads every colour/face/measure from tokens.css; no literal values here.
   Chassis: compact navy topbar → lead-story grid → Latest rail →
   section strips → navy footer. Zero JavaScript; CSS motion only. */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1.35rem; }

.skip-link { position: absolute; left: -999px; }
.skip-link:focus {
  left: 1rem; top: 1rem; background: var(--ink); color: var(--paper);
  padding: .5rem .75rem; z-index: 10; border-radius: 3px;
}

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--ink); }

h1, h2, h3, h4 { color: var(--ink); }

/* ---- topbar ------------------------------------------------------------ */
.masthead { background: var(--ink); }
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; padding-top: .8rem; padding-bottom: .8rem;
}
.wordmark {
  font-weight: 900; font-size: 1.45rem; letter-spacing: -.015em;
  line-height: 1; text-decoration: none; color: var(--paper);
}
.wordmark:hover { color: var(--paper); }
.wordmark-facts { color: var(--cyan); }
.mainnav { display: flex; flex-wrap: wrap; gap: 1.3rem; }
.mainnav a {
  text-decoration: none; font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; color: var(--bar-text); padding-bottom: .2rem;
}
.mainnav a:hover { color: var(--paper); }
.mainnav a.active { color: var(--paper); border-bottom: 2px solid var(--cyan); }

/* ---- main / typography ------------------------------------------------- */
/* main.wrap, not bare main: .wrap's `padding: 0 1.35rem` is a class
   selector and outranks an element selector, silently zeroing the
   vertical padding (caught on the Signal rebuild when the home grid's
   negative margin climbed into the masthead). */
main.wrap { padding: 2.2rem 1.35rem 3.5rem; }
main > * { max-width: var(--measure); }
main > .full, main > .home-grid, main > .home-sections, main > .listing,
main > .pf-ad, main > .calc-grid { max-width: 100%; }

/* ---- the article grid -------------------------------------------------
   Ported from Gentry 2 Sep 2026. Michael: "on Gentry Finance we agreed to
   have some variability in the width to improve readability." He was
   right, and it was an omission rather than a decision. Gentry settled
   this on 25-26 Aug 2026 after he described a narrow column sitting
   inside a wide wrap as reading "like an outdated 1990s website".

   Three named regions:
     content  the reading measure (--measure) — everything defaults here
     popout   --popout, for figures and tables that earn the width
     full     the whole article region, capped by the wrap

   Scoped to .article-grid, which only the article template sets: the home
   page's lead grid uses a negative-margin bleed that a grid parent would
   fight, and this is not the pass to rebuild that.

   ONE breakout system — widen something by putting it on a track, never
   with a width or margin-inline override. That rule is worth more than
   the grid itself; it is what stopped Gentry growing two mechanisms. */
main.article-grid {
  --article-cols:
    [full-start] minmax(0, 1fr)
    [popout-start] minmax(0, calc((var(--popout) - var(--measure)) / 2))
    [content-start] min(var(--measure), 100%)
    [content-end] minmax(0, calc((var(--popout) - var(--measure)) / 2))
    [popout-end] minmax(0, 1fr)
    [full-end];
  display: grid;
  grid-template-columns: var(--article-cols);
}
main.article-grid > * { grid-column: content; max-width: none; }

/* The standing breakouts. A figure is why this exists: an 860-wide chart
   squeezed into a 592px column was the complaint that started it. */
main.article-grid > figure.pf-figure,
main.article-grid > .pf-table-wrap,
main.article-grid > blockquote { grid-column: popout; }
main.article-grid > .full { grid-column: full; }
/* An ad earns the popout, not the whole page: it sits beside the
   figures in width, never wider than the argument it follows. */
main.article-grid > .pf-ad { grid-column: popout; }

h1 { font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.5rem);
     line-height: 1.1; letter-spacing: -.02em; margin: 0 0 .6rem; text-wrap: balance; }
h2 { font-weight: 700; font-size: 1.35rem; letter-spacing: -.01em; margin: 2.1rem 0 .5rem; }
h3 { font-weight: 700; font-size: 1.05rem; margin: 1.5rem 0 .4rem; }
p { margin: 0 0 1.1rem; }

.kicker {
  text-transform: uppercase; letter-spacing: .12em;
  font-size: .7rem; font-weight: 700; color: var(--link); margin: 0 0 .55rem;
}
.byline { font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em;
  color: var(--soft); font-size: .72rem; margin: 0 0 1.7rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.lede { font-size: 1.16rem; line-height: 1.55; color: var(--ink); font-weight: 500; }

blockquote { margin: 1.4rem 0; padding: .2rem 0 .2rem 1.2rem;
  border-left: 3px solid var(--cyan); color: var(--body); font-style: italic; }

/* ---- scenario boxes ---------------------------------------------------
   Added 2 Sep 2026. Michael: "the three investor scenarios could be in
   call out boxes - ringed boxes, scenario outcome in bold at top, then
   scenario then details in bullet points."

   The wider point behind that note is the useful one. The design standard
   has said "one non-prose element per section" since it was written, but
   the theme had no components to express it - no scenario box, no callout,
   no key-numbers strip - so every section defaulted to paragraphs and the
   rule quietly became decoration. A rule without a component to satisfy it
   is a wish. This is the first of the components; the prose-density check
   in lib/validate.php is the enforcement half. */
.scenario {
  border: 1px solid var(--note-br);
  border-left: 4px solid var(--link);
  border-radius: 3px;
  background: var(--panel);
  padding: 1.1rem 1.3rem 1.2rem;
  margin: 1.6rem 0;
}
.scenario__outcome {
  font-size: 1.08rem; font-weight: 800; color: var(--ink);
  line-height: 1.3; margin: 0 0 .5rem; text-wrap: balance;
}
.scenario__who { font-size: .98rem; color: var(--body); margin: 0 0 .7rem;
  padding-bottom: .7rem; border-bottom: 1px solid var(--line); }
.scenario ul { margin: 0; padding-left: 1.15rem; }
.scenario li { margin: .4rem 0; font-size: .96rem; line-height: 1.55; }
.scenario strong { color: var(--ink); }

/* Colour-coded tiles. Michael, 2 Sep 2026: "I would have thought these
   examples would look better not just being one long column of white
   background and text ... should we use more tiles (e.g. Anita is over
   one colour, Ben over another)?"

   Yes, and the colour is doing work rather than decorating: each tile
   takes the series colour its OUTCOME belongs to, so a reader who has
   seen the charts already knows what the tile will say before reading
   it. Teal is the unchanged case, brick the one that costs money,
   indigo the one that is neutral but complicated. Using the palette
   arbitrarily here would have taught the reader nothing and unlearned
   what the figures taught. */
.scenario--a { border-left-color: var(--viz-1); background: var(--viz-1-bg); }
.scenario--b { border-left-color: var(--viz-2); background: var(--viz-2-bg); }
.scenario--c { border-left-color: var(--viz-3); background: var(--viz-3-bg); }
.scenario--a .scenario__outcome { color: var(--viz-1); }
.scenario--b .scenario__outcome { color: var(--viz-2); }
.scenario--c .scenario__outcome { color: var(--viz-3); }

/* ---- the worked-example box -------------------------------------------
   Replaces "Meet Dev, invented for this example" and its relatives. His
   note: "we don't need to say invented ... just put it in an Example box
   and then do the scenario." The label does the work the sentence was
   doing, in three words instead of eleven, and it does it every time
   rather than whenever the writer remembers. */
.example {
  border: 1px solid var(--note-br);
  border-top: 3px solid var(--ink);
  border-radius: 3px;
  background: var(--panel);
  padding: 1.1rem 1.3rem 1.2rem;
  margin: 1.6rem 0;
}
.example__label {
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--soft);
  margin: 0 0 .7rem;
}
.example > p { font-size: .98rem; margin: 0 0 .8rem; }
.example ul { margin: 0; padding-left: 1.15rem; }
.example li { margin: .45rem 0; font-size: .96rem; line-height: 1.55; }
.example strong { color: var(--ink); }

/* Assumptions ride WITH the example, always. A worked example whose
   numbers cannot be reproduced is a number the reader must take on
   trust, which is the opposite of this site's claim. */
.example__assume {
  margin: .9rem 0 0; padding-top: .7rem;
  border-top: 1px solid var(--line);
  font-size: .84rem; line-height: 1.5; color: var(--soft);
}

/* A standing label for illustrative material, so the prose does not have
   to keep explaining that invented people are invented. */
.illus-label {
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--soft);
  margin: 0 0 .5rem;
}

/* ---- tables that earn the popout track --------------------------------- */
.pf-table-wrap { overflow-x: auto; margin: 1.6rem 0; }
.pf-table-wrap table { border-collapse: collapse; width: 100%;
  font-size: .92rem; font-variant-numeric: tabular-nums; }
.pf-table-wrap th { text-align: left; color: var(--soft);
  font-family: var(--mono); font-size: .66rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  padding: .5rem .8rem .5rem 0; border-bottom: 2px solid var(--ink); }
.pf-table-wrap td { padding: .6rem .8rem .6rem 0;
  border-bottom: 1px solid var(--line); vertical-align: top; }
.pf-table-wrap td:first-child { color: var(--ink); font-weight: 600; }
/* a long row label wraps rather than forcing the other columns narrow
   (the Budget table's first column had swallowed half the width) */
.pf-table-wrap th:first-child { width: 28%; }
.pf-table-wrap td:first-child { white-space: normal; }

/* ---- figures (inline SVG diagrams) ------------------------------------- */
figure.pf-figure { margin: 1.8rem 0; }
figure.pf-figure svg { max-width: 100%; height: auto; }
figure.pf-figure figcaption { font-size: .8rem; color: var(--soft);
  font-family: var(--mono); margin-top: .5rem;
  border-top: 1px solid var(--line); padding-top: .45rem; }

/* ---- home: lead grid --------------------------------------------------- */
.home-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0;
  border-bottom: 1px solid var(--line); margin: -2.2rem -1.35rem 0;
  width: calc(100% + 2.7rem); max-width: none; }
.home-lead { padding: 2.1rem 1.6rem 2.2rem; border-right: 1px solid var(--line); }
.home-lead h1, .home-lead h2 { font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.4rem);
  line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .7rem; text-wrap: balance; }
.home-lead h2 a, .home-lead h1 a { color: var(--ink); text-decoration: none; }
.home-lead h2 a:hover, .home-lead h1 a:hover { color: var(--link); }
.standfirst { font-size: 1.05rem; line-height: 1.55; color: var(--body);
  margin: 0 0 1rem; max-width: 36rem; }
.home-rail { padding: 2.1rem 1.6rem 2.2rem; background: var(--panel); }
.rail-title { font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--soft); margin: 0 0 .6rem; }
.rail-item { padding: .85rem 0; border-top: 1px solid var(--line); }
.rail-item h3 { margin: 0 0 .3rem; font-size: .95rem; line-height: 1.35; }
.rail-item h3 a { color: var(--ink); text-decoration: none; }
.rail-item h3 a:hover { color: var(--link); }
.rail-item .datastamp { font-size: .68rem; }

/* ---- home: section strips ---------------------------------------------- */
.home-sections { display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem; padding: 1.8rem 0 .4rem; }
.home-sections .sec h2 { font-size: .7rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--link); margin: 0 0 .5rem; }
.home-sections .sec h3 { margin: 0 0 .35rem; font-size: 1.02rem; line-height: 1.35; }
.home-sections .sec h3 a { color: var(--ink); text-decoration: none; }
.home-sections .sec h3 a:hover { color: var(--link); }
.home-sections .sec p { margin: 0; font-size: .88rem; color: var(--body); }

/* ---- listings ---------------------------------------------------------- */
.listing { margin: 1.4rem 0 2rem; padding: 0; list-style: none; }
.listing li { border-top: 1px solid var(--line); padding: 1.15rem 0; }
.listing li:last-child { border-bottom: 1px solid var(--line); }
.listing h3 { margin: 0 0 .3rem; font-size: 1.12rem; line-height: 1.35; }
.listing h3 a { color: var(--ink); text-decoration: none; }
.listing h3 a:hover { color: var(--link); }
.listing p { margin: 0 0 .35rem; font-size: .92rem; color: var(--body); }

.datastamp { font-family: var(--mono); text-transform: uppercase;
  letter-spacing: .04em; font-size: .72rem; color: var(--soft); }

/* ---- sponsored disclosure ------------------------------------------------ */
.pf-sponsored { border: 2px solid var(--ink); border-radius: 4px;
  padding: .85rem 1.05rem; margin: 0 0 1.6rem; background: var(--panel); }
.pf-sponsored-flag { margin: 0 0 .35rem; font-family: var(--mono); font-size: .68rem;
  font-weight: 500; letter-spacing: .2em; color: var(--ink); }
.pf-sponsored-body { margin: 0; font-size: .88rem; color: var(--body); }

/* ---- draft preview banner ----------------------------------------------- */
.pf-draft-banner { background: var(--warn-bg); border: 1px solid var(--warn-br);
  border-left: 4px solid var(--warn-br); border-radius: 4px;
  padding: .9rem 1.1rem; margin: 0 0 1.8rem; font-size: .88rem; }
.pf-draft-banner p { margin: 0 0 .4rem; }
.pf-draft-banner p:last-child { margin-bottom: 0; }
.pf-draft-banner strong { color: var(--ink); }

/* ---- engagement components ---------------------------------------------- */
.pf-takeaways { background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--ink); border-radius: 4px;
  padding: 1rem 1.2rem; margin: 0 0 1.8rem; }
.pf-takeaways-title { margin: 0 0 .4rem; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.pf-takeaways ul { margin: 0; padding-left: 1.1rem; }
.pf-takeaways li { margin: .35rem 0; font-size: .95rem; }
.pf-takeaways strong { color: var(--ink); }

.pf-pullquote { margin: 2rem 0; padding: 0; border: 0; font-style: normal; }
.pf-pullquote p { margin: 0; font-size: 1.35rem; line-height: 1.35; font-weight: 700;
  color: var(--ink); letter-spacing: -.01em; border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--line); padding: 1rem 0; text-wrap: balance; }

.pf-related { margin: 2.4rem 0 0; }
.pf-related-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem; }
.pf-related-card { display: block; text-decoration: none; background: var(--panel);
  border: 1px solid var(--line); border-radius: 4px; padding: .9rem 1rem; }
.pf-related-card:hover { border-color: var(--link); }
.pf-related-kicker { display: block; font-family: var(--mono); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .06em; color: var(--soft); margin-bottom: .3rem; }
.pf-related-title { display: block; font-weight: 700; color: var(--ink);
  font-size: .95rem; line-height: 1.35; }
.pf-related-card:hover .pf-related-title { color: var(--link); }
.pf-related-blurb { display: block; font-size: .8rem; color: var(--body); margin-top: .3rem; }

/* ---- article tables ----------------------------------------------------- */
main table { border-collapse: collapse; width: 100%; margin: 1rem 0 1.4rem;
  font-size: .88rem; font-variant-numeric: tabular-nums; }
main th { text-align: left; color: var(--soft); font-family: var(--mono);
  font-weight: 500; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; padding: .45rem .8rem .45rem 0;
  border-bottom: 2px solid var(--ink); }
main td { padding: .55rem .8rem .55rem 0; border-bottom: 1px solid var(--line);
  vertical-align: top; }
main td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }

/* ---- contributor quotes (roundup features) ----------------------------- */
.pf-contrib { margin: 1.6rem 0; padding: 1.05rem 1.2rem; background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--cyan); border-radius: 4px; }
.pf-contrib blockquote { margin: 0 0 .6rem; padding: 0; border: 0; font-style: normal;
  color: var(--ink); }
.pf-contrib cite { display: block; font-style: normal; font-family: var(--mono);
  font-size: .74rem; color: var(--soft); }
.pf-contrib cite strong { color: var(--ink); font-weight: 500; }

/* ---- calculator / tool slots ------------------------------------------- */
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.1rem; margin: 1.4rem 0; }
.pf-calc-slot { border: 1px solid var(--line); background: var(--panel);
  border-radius: 5px; padding: 1.15rem; min-height: 8rem; position: relative;
  display: flex; flex-direction: column; justify-content: center; }
.pf-calc-slot .slot-flag { position: absolute; top: .65rem; right: .75rem;
  font-family: var(--mono); font-size: .62rem; color: var(--link);
  text-transform: uppercase; letter-spacing: .06em; }
.pf-calc-slot h3 { margin: 0 0 .3rem; }
.pf-calc-slot .slot-note { font-size: .84rem; color: var(--soft); margin: 0; }
.pf-calc-slot[data-ready="true"] { background: var(--paper); border-color: var(--link); }
.pf-calc-form { display: grid; gap: .55rem; margin-top: .5rem; }
.pf-calc-form label { display: grid; gap: .2rem; font-size: .78rem; color: var(--soft); }
.pf-calc-form input, .pf-calc-form select { padding: .45rem .55rem;
  border: 1px solid var(--line); border-radius: 3px; background: var(--paper);
  color: var(--ink); font: inherit; font-variant-numeric: tabular-nums; }
.pf-calc-form button { justify-self: start; padding: .5rem 1.1rem; cursor: pointer;
  border: 0; border-radius: 3px; background: var(--ink); color: var(--paper);
  font: 600 .82rem var(--sans); }
.pf-calc-form button:hover { background: var(--link); }
.pf-calc-result { margin-top: .9rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.pf-calc-result p { margin: 0 0 .45rem; }
.pf-calc-note { font-size: .78rem; color: var(--soft); }
.pf-calc-inline { display: flex !important; grid-auto-flow: column; align-items: center;
  gap: .45rem !important; }
.pf-calc-inline input { width: auto; }

/* ---- compliance components --------------------------------------------- */
.pf-disclaimer, .pf-site-disclosure {
  background: var(--panel); border: 1px solid var(--note-br); border-radius: 4px;
  padding: .95rem 1.1rem; font-size: .86rem; color: var(--body);
}
.pf-disclaimer { margin: 2rem 0 0; }
.pf-disclaimer p { margin: 0; }
.pf-referral-line, .pf-pastperf { font-size: .9rem; color: var(--body);
  border-left: 3px solid var(--line); padding-left: .9rem; margin: 1.2rem 0; }

.pf-sources { margin: 2.4rem 0 0; padding-top: 1.2rem; border-top: 2px solid var(--ink); }
.pf-sources h2 { margin-top: 0; font-size: 1.05rem; }
.pf-asat { font-size: .82rem; color: var(--soft); }
.pf-asat strong { font-family: var(--mono); color: var(--body); }
.pf-sources-list { margin: .6rem 0 0; padding-left: 1.1rem; }
.pf-sources-list li { margin: .3rem 0; font-size: .9rem; }

/* advertisement — the one labelled component every placement uses
   (lib/ads.php). Each creative carries an art panel from assets/ads/
   (Mike, 8 Sep 2026) plus HTML text, and takes its advertiser's own
   colour through --adv, set per ad from the registry.

   THE ONE PLACE OFF-TOKEN COLOUR IS CORRECT. Everywhere else on this
   site a literal hex is a defect (brand/BRAND.md §2). An ad is another
   party's brand, and a slot whose creative is painted in the
   publication's navy and cyan is exactly the confusion the
   ADVERTISEMENT label exists to prevent. The Gentry values below are
   its canon (C:\gentry-site\brand\BRAND.md §2) — that brand forbids
   blues outright, so rendering it in --ink/--cyan was a defect against
   Gentry as well as against the reader. Category grounds arrive as
   --adv from the registry; the art that matches them is built by
   tools/build-ad-art.py, which measures every pair for contrast.
   check-brand.ps1 reads data/articles/figures/ and does not see these;
   if it is ever widened, assets/ads/ must be excluded. */
.pf-ad { border: 1px solid var(--line); border-radius: 4px; margin: 2rem 0;
  background: var(--paper); overflow: hidden; max-width: var(--popout); }
.pf-ad-label { margin: 0; padding: .35rem .85rem; background: var(--panel);
  border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: .62rem;
  letter-spacing: .18em; color: var(--soft); font-weight: 500; }
.pf-ad-creative { display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: .35rem 1.4rem; padding: 1.25rem 1.35rem; text-decoration: none; }
.pf-ad-kicker { grid-column: 1; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .1em; text-transform: uppercase; }
/* Headlines are four to ten words now (Mike's register, 8 Sep 2026), so
   they can carry real size. At 1.22rem a six-word hook looked like a
   caption; the copy got shorter and the type had to get bigger to match. */
.pf-ad-head { grid-column: 1; font-weight: 800; font-size: 1.42rem; line-height: 1.18;
  letter-spacing: -.018em; text-wrap: balance; }
.pf-ad-body { grid-column: 1; font-size: .9rem; line-height: 1.45; padding: 0;
  text-align: left; }
.pf-ad-cta { grid-column: 2; grid-row: 1 / span 3; align-self: center; white-space: nowrap;
  font: 600 .84rem var(--sans); padding: .6rem 1.05rem; border-radius: 3px; }

/* The advertiser's sign-off: the APPROVED lockup, at the FOOT of the card
   and small (Mike, 8 Sep 2026 — the reader's problem leads, our name does
   not). Never re-typeset: assets/img/gentry-lockup.png is the Drive export,
   resized only. Sits in the text column under the body line. */
.pf-ad-mark { grid-column: 1; display: block; margin-top: .9rem; }
/* Sized as a proportion, capped in rem — never a fixed width. A flat
   8.4rem here was 134px inside a 128px rail card, so the approved lockup
   shipped with its last letters clipped: "GENTR / FINANC". */
.pf-ad-mark img { display: block; width: 100%; max-width: 11.5rem; height: auto; }
.pf-ad-creative--art .pf-ad-mark { grid-column: 2; }

/* ---- the art panel ------------------------------------------------
   Wide placements run it full-bleed down the left, so the creative loses
   its own padding and each text cell carries its own. The panel takes the
   advertiser's ground as a CSS background and the 320×200 artwork scales
   to the panel's WIDTH and centres, never cropping: an earlier cut let it
   cover the panel and a tall card sliced the Gentry wordmark in half.
   Because the SVG's own ground is the same colour, the seam is invisible
   and the panel simply reads as a taller plate. */
.pf-ad-art { display: flex; grid-column: 1; grid-row: 1 / span 3;
  align-self: stretch; overflow: hidden; background: var(--adv, var(--panel)); }
.pf-ad-art svg { display: block; width: 100%; height: auto; margin: auto; }
/* A photographic tile fills the panel and crops, rather than scaling to
   width the way the drawn SVGs do: a photo has no lockup to protect and
   flat letterbox bands beside one look like a mistake. Generated at 16:9
   and cropped to whatever the placement gives it, so the subject must sit
   in the middle of the frame. */
.pf-ad-art--photo { align-self: stretch; }
/* A photo needs more of the card than a drawn tile does. The SVGs scale to
   the column width and lose nothing; a 16:9 photograph cropped into a 168px
   portrait slot keeps under half its width and the composition goes with it.
   :has() is CSS, so this stays inside the zero-JS rule, and a browser
   without it simply keeps the narrower column - a crop, not a break. */
.pf-ad-creative--art:not(.pf-ad-creative--stack):has(.pf-ad-art--photo) {
  grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr); }
/* With a photo taking 15rem, a third column for the button left the
   headline about 320px and Michael's longer lines broke to six lines. The
   button drops under the copy instead: image | stacked text, which is the
   ordinary shape of a display ad anyway. */
.pf-ad-creative--art:not(.pf-ad-creative--stack):has(.pf-ad-art--photo) .pf-ad-cta {
  grid-column: 2; grid-row: auto; justify-self: start;
  margin: .75rem 1.35rem 1.3rem 0; }
.pf-ad-creative--art:not(.pf-ad-creative--stack):has(.pf-ad-art--photo) .pf-ad-body { padding-bottom: 0; }
/* The button added a fourth row, and the art was still spanning three, so
   it stopped short of the card floor and left a white shelf under it. */
.pf-ad-creative--art:not(.pf-ad-creative--stack):has(.pf-ad-art--photo) .pf-ad-art { grid-row: 1 / span 4; }
.pf-ad-art--photo img { display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center; }
.pf-rail .pf-ad-art--photo img,
.pf-ad-creative--stack .pf-ad-art--photo img { aspect-ratio: 8 / 5; height: auto; }
.pf-ad-creative--art { grid-template-columns: minmax(7rem, 10.5rem) minmax(0, 1fr) auto;
  padding: 0; column-gap: 1.35rem; }
.pf-ad-creative--art .pf-ad-kicker { grid-column: 2; padding-top: 1.25rem; }
.pf-ad-creative--art .pf-ad-head { grid-column: 2; }
.pf-ad-creative--art .pf-ad-body { grid-column: 2; padding-bottom: 1.25rem; }
.pf-ad-creative--art .pf-ad-cta { grid-column: 3; margin-right: 1.35rem; }

/* Gentry Finance — its own canon, never this site's palette. The Gentry
   card carries no art panel: it is headline-led, with the mark signing off
   underneath, so it has a fourth row the category cards do not. */
.pf-ad--gentry { border-color: #123B2F; }
.pf-ad--gentry .pf-ad-cta { grid-row: 1 / span 4; }
.pf-ad--gentry .pf-ad-creative { background: #123B2F; }
.pf-ad--gentry .pf-ad-kicker { color: #C9A227; }
.pf-ad--gentry .pf-ad-head { color: #FAFBF9; }
.pf-ad--gentry .pf-ad-body { color: #B9C6C0; }
.pf-ad--gentry .pf-ad-cta { background: #C9A227; color: #14201B; }
.pf-ad--gentry .pf-ad-creative:hover .pf-ad-cta { background: #FAFBF9; color: #123B2F; }

/* Category ads — light card, advertiser's colour on the edge, the
   kicker and the button. The text ground stays --panel deliberately:
   six shouting cards would cost the page more than the variety buys. */
.pf-ad--category { border-left: 3px solid var(--adv, var(--line)); }
.pf-ad--category .pf-ad-creative { background: var(--panel); }
.pf-ad--category .pf-ad-kicker { color: var(--adv, var(--link)); }
.pf-ad--category .pf-ad-head { color: var(--ink); }
.pf-ad--category .pf-ad-body { color: var(--body); }
.pf-ad--category .pf-ad-cta { background: var(--adv, var(--ink)); color: #ffffff; }
.pf-ad--category .pf-ad-creative:hover .pf-ad-cta { filter: brightness(1.25); }
.pf-ad--home { margin: 1.4rem 0 .4rem; max-width: 100%; }
.pf-ad--listing { max-width: var(--popout); }

/* The margin rail (article pages). Takes the right-hand outer track of
   the article grid, spans every row, sticks while the article scrolls.
   Only exists where the margin exists: below ~70rem the outer tracks
   collapse toward zero and the rail is hidden rather than squeezed. */
main.article-grid > .pf-rail { grid-column: popout-end / full-end; grid-row: 1 / span 400;
  align-self: start; position: sticky; top: 1.2rem; padding-left: 1.2rem;
  display: flex; flex-direction: column; gap: 1rem; max-width: none; }
.pf-rail .pf-ad { margin: 0; max-width: none; }
.pf-rail .pf-ad-creative { grid-template-columns: 1fr; padding: .95rem .9rem; gap: .3rem; }
.pf-rail .pf-ad-kicker { font-size: .6rem; }
.pf-rail .pf-ad-head { font-size: .98rem; line-height: 1.25; }
.pf-rail .pf-ad-body { font-size: .78rem; line-height: 1.4; }
.pf-rail .pf-ad-cta { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .45rem;
  font-size: .76rem; padding: .45rem .8rem; white-space: normal; }
.pf-rail .pf-ad-mark { margin-top: .75rem; }
.pf-rail .pf-ad-mark img { max-width: 9.5rem; }
/* The body line is carried in the rail's markup but hidden while the rail
   is narrow, where it reads as noise. It comes back with the width below. */
.pf-rail .pf-ad-body { display: none; }
@media (max-width: 70rem) { main.article-grid > .pf-rail { display: none; } }

/* THE RAIL TAKES THE GUTTER. The article grid is 74rem wide, so the rail's
   track is only 176px and the card inside it 157px - while on a 1440px
   screen 128px sits empty either side of the grid, and on a 1600px screen
   208px does. Michael, 8 Sep 2026: "there is ample space they could be
   taking up." So above 90rem the rail grows past its track into that
   gutter, and the growth is always less than the gutter it grows into, so
   it can never push the page into a horizontal scroll:

     viewport 90rem/1440px  gutter 128px  rail 272px  overflow  96px
     viewport 100rem/1600px gutter 208px  rail 304px  overflow 128px

   Below 90rem nothing changes and the rail stays inside its track. */
@media (min-width: 90rem) {
  main.article-grid > .pf-rail { width: 17rem; }
  .pf-rail .pf-ad-body { display: block; font-size: .82rem; }
  .pf-rail .pf-ad-head { font-size: 1.08rem; }
  .pf-rail .pf-ad-cta { font-size: .8rem; padding: .5rem .9rem; }
}
@media (min-width: 100rem) {
  main.article-grid > .pf-rail { width: 19rem; }
}

/* Stacked form — the rail, and the contact sheet's phone column. One
   column: art (where there is any) as a banner at its authored 8:5 so
   nothing is cropped, then the text with its own padding, then the mark.

   Every child is reset BY NAME. The wide layout pins the text cells to
   column 2 and the button to column 3 with two-class selectors, and a
   `> *` rule loses to those on specificity — which is exactly the bug
   that left a zero-width first track and the art invisible on phones. */
.pf-rail .pf-ad-creative,
.pf-ad-creative--stack { grid-template-columns: 1fr; row-gap: .3rem; padding: 0; }
.pf-rail .pf-ad-art,
.pf-ad-creative--stack .pf-ad-art { grid-column: 1; grid-row: auto; width: 100%; }
.pf-rail .pf-ad-kicker,
.pf-ad-creative--stack .pf-ad-kicker { grid-column: 1; padding: .85rem .9rem 0; }
.pf-rail .pf-ad-head,
.pf-rail .pf-ad-body,
.pf-ad-creative--stack .pf-ad-head,
.pf-ad-creative--stack .pf-ad-body {
  grid-column: 1; padding-left: .9rem; padding-right: .9rem; }
.pf-rail .pf-ad-body,
.pf-ad-creative--stack .pf-ad-body { padding-bottom: 0; }
.pf-rail .pf-ad-cta,
.pf-ad-creative--stack .pf-ad-cta {
  grid-column: 1; grid-row: auto; justify-self: start; margin: .55rem .9rem 1rem; }
.pf-rail .pf-ad-mark,
.pf-ad-creative--stack .pf-ad-mark { grid-column: 1; margin: 0 .9rem 1.1rem; }
/* Where the card has no art, the stacked form keeps a top padding the
   art would otherwise have provided. */
.pf-rail .pf-ad-creative:not(.pf-ad-creative--art) .pf-ad-kicker,
.pf-ad-creative--stack:not(.pf-ad-creative--art) .pf-ad-kicker { padding-top: 1.1rem; }
@media (max-width: 40rem) {
  .pf-ad-creative { grid-template-columns: 1fr; }
  .pf-ad-cta { grid-column: 1; grid-row: auto; justify-self: start; margin-top: .5rem; }
  /* Each child is reset by name, not with `> *`: the wide layout pins the
     kicker/head/body to column 2 and the button to column 3 with two-class
     selectors, and a `> *` rule loses to those on specificity — which it
     did, leaving a zero-width first track and the art invisible. */
  .pf-ad-creative--art { grid-template-columns: 1fr; row-gap: .3rem; }
  .pf-ad-creative--art .pf-ad-art { grid-column: 1; grid-row: auto; width: 100%; }
  .pf-ad-creative--art .pf-ad-art--photo img { aspect-ratio: 8 / 5; height: auto; }
  /* Same trap as the rail: the wide photo rules are :has() and outweigh a
     plain class here, so they are restated at matching weight. */
  .pf-ad-creative--art:has(.pf-ad-art--photo) { grid-template-columns: 1fr; }
  .pf-ad-creative--art:has(.pf-ad-art--photo) .pf-ad-art {
    grid-column: 1; grid-row: auto; }
  .pf-ad-creative--art:has(.pf-ad-art--photo) .pf-ad-cta {
    grid-column: 1; grid-row: auto; margin: .7rem 1.15rem 1.2rem; }
  .pf-ad-creative--art .pf-ad-kicker { grid-column: 1; padding: 1.1rem 1.15rem 0; }
  .pf-ad-creative--art .pf-ad-head,
  .pf-ad-creative--art .pf-ad-body { grid-column: 1;
    padding-left: 1.15rem; padding-right: 1.15rem; }
  .pf-ad-creative--art .pf-ad-body { padding-bottom: 0; }
  .pf-ad-creative--art .pf-ad-cta { grid-column: 1; grid-row: auto;
    justify-self: start; margin: .7rem 1.15rem 1.2rem; }
  /* A Gentry card has no art and a fourth row for the mark, and its
     `.pf-ad--gentry .pf-ad-cta` row span outranks the one-class reset
     above — so both are restated here at matching specificity. */
  .pf-ad--gentry .pf-ad-cta { grid-row: auto; }
  .pf-ad-creative .pf-ad-mark { grid-column: 1; margin-bottom: .3rem; }
}

/* enquiry pages (page-enquire.php) */
.pf-enquire-what { background: var(--panel); border: 1px solid var(--note-br);
  border-radius: 4px; padding: .95rem 1.1rem; font-size: .9rem; margin: 1.4rem 0; }
.pf-enquire-what p { margin: 0 0 .5rem; }
.pf-enquire-what p:last-child { margin: 0; }
.pf-enquire-what-title { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--link); }
.pf-enquire { display: grid; gap: .9rem; margin: 1.2rem 0 0; max-width: 32rem; }
.pf-enquire label { display: grid; gap: .3rem; font-size: .84rem; color: var(--ink);
  font-weight: 600; }
.pf-enquire label small { font-weight: 400; color: var(--soft); }
.pf-enquire input, .pf-enquire textarea { padding: .6rem .7rem; border: 1px solid var(--line);
  border-radius: 3px; background: var(--paper); color: var(--ink); font: inherit;
  font-weight: 400; }
.pf-enquire input:focus, .pf-enquire textarea:focus { outline: 2px solid var(--link);
  outline-offset: 1px; }
.pf-enquire label.has-error input { border-color: var(--viz-2); }
.pf-enquire label em { font-style: normal; font-weight: 400; font-size: .8rem;
  color: var(--viz-2); }
.pf-enquire button { justify-self: start; padding: .65rem 1.3rem; cursor: pointer;
  border: 0; border-radius: 3px; background: var(--ink); color: var(--paper);
  font: 600 .9rem var(--sans); }
.pf-enquire button:hover { background: var(--link); }
.pf-enquire-fine { font-size: .78rem; color: var(--soft); margin: 0; }
.pf-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px;
  overflow: hidden; }

/* notices */
.note-inline { background: var(--panel); border: 1px solid var(--line);
  padding: .9rem 1rem; border-radius: 4px; font-size: .9rem; }
.notice--error { background: var(--warn-bg); border: 1px solid var(--warn-br);
  border-radius: 4px; padding: .9rem 1rem; }

/* ---- footer ------------------------------------------------------------ */
.site-footer { background: var(--ink); color: var(--bar-text); margin-top: 3.5rem;
  padding: 2rem 0 2.4rem; font-size: .84rem; }
.site-footer a { color: var(--bar-text); }
.site-footer a:hover { color: var(--paper); }
.site-footer .pf-site-disclosure { background: transparent; border: 0; padding: 0;
  color: var(--bar-text); margin-bottom: 1.1rem; max-width: 46rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0 0 .8rem; }
.footer-links a { text-decoration: none; font-weight: 600; font-size: .8rem; }
.copyline { margin: 0; font-size: .74rem; line-height: 1.6; }

/* ---- responsive -------------------------------------------------------- */
@media (max-width: 46rem) {
  body { font-size: 16px; }
  main { padding-top: 1.6rem; }
  .home-grid { grid-template-columns: 1fr; }
  .home-lead { border-right: 0; border-bottom: 1px solid var(--line);
    padding: 1.6rem 1.35rem 1.7rem; }
  .home-rail { padding: 1.6rem 1.35rem 1.7rem; }
  .home-sections { grid-template-columns: 1fr; gap: 1.2rem; }
  .masthead-inner { padding-top: .7rem; padding-bottom: .7rem; }
}

@media (prefers-reduced-motion: no-preference) {
  a, .mainnav a, .listing h3 a { transition: color .12s ease; }
}

/* ---- feature-grade components (8 Sep 2026) ----------------------------
   Michael, on the debt-recycling review copy: "one long white page ...
   looks and feels like a blog post from an amateur rather than a high
   production article." The standard had asked for pacing (one non-prose
   element per section, section 2.3) and declared a `showcase` display
   (section 2.2) since 1 Sep, but the theme had neither the components nor
   the display code, so every section fell back to paragraphs. These are
   the components. Graphic-led stays the rule (section 4); a photograph is
   occasional and relevant, never the argument. Tokens only. */

/* showcase display: the lead figure takes the popout track between the
   byline and the lede, so the picture that carries the argument is the
   first thing a reader meets (lib/article.php renders the wrapper). */
main.article-grid > .pf-lead { grid-column: popout; margin: .3rem 0 1.5rem; }
.pf-lead figure.pf-figure { margin: 0; padding: 1.2rem 1.4rem .9rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
.pf-lead figure.pf-figure figcaption { border-top-color: var(--note-br); }

/* key numbers: the figures that ARE the point of a section, as tiles.
   Series colour carries meaning as everywhere else: teal = income/gain,
   brick = cost, ink = neutral. */
.pf-keynums { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: .8rem; margin: 1.3rem 0 1.6rem; }
main.article-grid > .pf-keynums { grid-column: popout; }
.pf-keynum { background: var(--panel); border: 1px solid var(--line);
  border-top: 3px solid var(--ink); border-radius: 4px; padding: .9rem 1rem .85rem; }
.pf-keynum--cost { border-top-color: var(--viz-2); }
.pf-keynum--gain { border-top-color: var(--viz-1); }
.pf-keynum-value { display: block; font-weight: 800; font-size: 1.65rem; line-height: 1.1;
  letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.pf-keynum--cost .pf-keynum-value { color: var(--viz-2); }
.pf-keynum--gain .pf-keynum-value { color: var(--viz-1); }
.pf-keynum-label { display: block; margin-top: .35rem; font-family: var(--mono);
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.pf-keynum-note { display: block; margin-top: .3rem; font-size: .8rem; line-height: 1.4; color: var(--body); }

/* side-by-side comparison: two scenario boxes on one row where the
   contrast between them IS the point (Rob against Bec; fits against
   wrong tool). Falls to one column where the popout track is narrow. */
.pf-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem; margin: 1.3rem 0 1.6rem; }
main.article-grid > .pf-compare { grid-column: popout; }
.pf-compare .scenario { margin: 0; display: flex; flex-direction: column; }
.pf-compare .scenario ul { flex: 0 0 auto; }
/* the verdict lines of a pair sit on one baseline whatever the lists above
   them run to (Michael's alignment review, 8 Sep 2026) */
.pf-compare .scenario__verdict { margin-top: auto; padding-top: .7rem; }
.pf-compare .scenario__who { border-bottom-color: var(--note-br); }
.scenario__verdict { margin: .8rem 0 0; padding-top: .7rem; border-top: 1px solid var(--note-br);
  font-weight: 700; color: var(--ink); font-size: .95rem; }
.scenario--a .scenario__verdict { color: var(--viz-1); }
.scenario--b .scenario__verdict { color: var(--viz-2); }

/* the rules panel: the few things that must stay true, on the navy
   ground so they read as the one thing to remember. Numbered because
   the record's prose refers to them by count. */
.pf-rules { background: var(--ink); color: var(--paper); border-radius: 4px;
  padding: 1.4rem 1.6rem 1.5rem; margin: 1.5rem 0 1.7rem; }
main.article-grid > .pf-rules { grid-column: popout; }
.pf-rules-title { margin: 0 0 1rem; font-family: var(--mono); font-size: .66rem;
  letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); }
.pf-rules ol { margin: 0; padding: 0; list-style: none; counter-reset: rule;
  display: grid; gap: 1rem; }
.pf-rules li { counter-increment: rule; position: relative; padding-left: 2.3rem;
  font-size: .93rem; line-height: 1.5; color: var(--bar-text); }
.pf-rules li::before { content: counter(rule); position: absolute; left: 0; top: -.05rem;
  font-weight: 800; font-size: 1.55rem; line-height: 1; color: var(--cyan);
  font-variant-numeric: tabular-nums; }
.pf-rules li strong { display: block; color: var(--paper); margin-bottom: .2rem; }
@media (min-width: 46rem) { .pf-rules ol { grid-template-columns: repeat(3, 1fr); gap: 1.3rem; } }

/* a photograph, on the popout track, captioned like any figure: the
   caption states a fact the reader learned, never describes the picture
   (section 3). One or two per piece at most, and only where relevant. */
figure.pf-photo { margin: .3rem 0 1.6rem; }
main.article-grid > figure.pf-photo { grid-column: popout; }
figure.pf-photo img { display: block; width: 100%; height: auto; border-radius: 4px; }
figure.pf-photo figcaption { font-size: .8rem; color: var(--soft); font-family: var(--mono);
  margin-top: .5rem; border-top: 1px solid var(--line); padding-top: .45rem; }

/* a contributor quote that is invited but not yet in: visibly a slot,
   never mistakable for copy. Filled or removed before approval. */
.pf-quote-slot { border: 1px dashed var(--note-br); border-radius: 4px; background: var(--panel);
  padding: .8rem 1rem; margin: 0 0 .9rem; font-size: .88rem; color: var(--body); }
.pf-quote-slot strong { display: block; margin-bottom: .25rem; font-family: var(--mono);
  font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; color: var(--link); }