/* ===========================================================================
   PERSPECTIVES — THE BROADSHEET  /perspectives-c/  (9/17)
   ---------------------------------------------------------------------------
   Built by scripts/build-perspectives.py (variant r4) to Brees' reference, the
   Tubik "OffCrypto" front page. Loads AFTER perspectives.css and is scoped to
   .page-pv-broadsheet, so the shared list, tabs, search and card rules come
   from that sheet and only the front page is new here. Tokens only; verify.js
   reads this sheet, comments included.

   Reference -> DE:
     paper ground          -> --oat, with the site's pattern circle in the masthead
     heavy condensed caps  -> All Round Gothic 700, tight tracking. 🔁 9/17: the ALL-CAPS came off (Brees: the
                              capitalisation "only is on this page and I want to make sure the whole site feels
                              like one"). Headlines are set as written; only the small eyebrow labels — kickers,
                              dates, section names — stay uppercase, which is the site's convention everywhere
                              else (footer eyebrows, the pill on Perspectives R1).
     green accent (text)   -> 🔴 --lime-ink. --lime is 1.49:1 on oat and can NEVER be text
     coin ticker           -> the four sections on the brand connector (neutral line, coloured dots)
     duotone photos        -> greyscale art multiplied onto --lime / --sky fields
     square rail pictures  -> ARCHES: the DE mark is two arch figures, so the rail tiles get arch tops
   Contrast: ink on oat 11.5 · --lime-ink on oat 5.59 · ink on --lime 8.95 ·
   ink on white 13.3 · oat on ink (button) above 11.
   =========================================================================== */

/* 🔁 9/17 — GROUNDS FLIPPED (Brees): the front page is WHITE, "Everything else" is the oat block. It was oat
   throughout with a white list; the paper ground read heavy behind the masthead and the duotones. */
.page-pv-broadsheet { background-color: var(--white); }
/* 🔴 .section carries an --oat background site-wide, so every section here must say white explicitly — leaving
   .pv-front to inherit put the oat block behind the front page, two sections too early. */
.page-pv-broadsheet .pv-head,
.page-pv-broadsheet .pv-lead,
.page-pv-broadsheet .pv-front { background-color: var(--white); }

/* ----------------------------------------------------- 1. masthead + ticker */
/* 🔁 9/17 RESPONSIVE PASS — THE HERO'S TOP MATCHES THE REST OF THE SITE.
   Every page built before these used `--section-pad * 0.5 + 43px` on the hero's top (direction-d-v3.css `.hero`,
   and `.pr-hero` / `.ss-hero` / `.lp-hero` were moved onto it by the 9/16 pass for exactly this reason: the
   header is STICKY, the 43px is its clearance, and without it the gap under the header changes from page to page).
   These pages were built with their own multiples and were the tight ones — at 390 the measured air was 48px
   against the site's 71. Bottom padding is untouched. */
.pv-b-head {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-block: calc(var(--section-pad) * 0.5 + 43px) var(--s-4);
  background-color: var(--white);
}
/* 🔁 the pattern circle is GONE from this masthead (Brees 9/17: "remove the blue circle"). The rule stays, unused
   by the markup, so nothing else that reaches for .pattern-circle changes. */
.pv-b-head__pattern { display: none; }
.pv-b-head__inner { position: relative; z-index: 1; }
.pv-b-head__row { display: grid; gap: var(--s-3); align-items: end; }
@media (min-width: 900px) { .pv-b-head__row { grid-template-columns: minmax(0, 1fr) 20rem; column-gap: var(--s-5); } }
/* 🔁 9/18, Brees: "H1 should all be consistent." The masthead H1 carries the shared `t-display hero__headline`
   classes now, so it takes the same face, size, weight, line height and tracking as every other page's H1
   (46px / 500 at 1440). The bespoke 700 weight and 0.95 line height that made it read heavier are gone. */
.pv-b-head__h1 { margin: 0; color: var(--ink); }
/* 🔁 9/18, Brees: "Make sure fonts match the rest of the site - there is not andora being used." Andora is OFF
   this page again (it was the standfirst and the "Start" of the rail heading); the standfirst is the site's body
   face at the lead size, like every other page's intro line. Andora is now unused site-wide, as it was from 9/15. */
.pv-b-head__standfirst { margin: 0; font-family: var(--font-body); font-size: var(--fs-lead); line-height: 1.4; color: var(--ink-muted); }
@media (min-width: 900px) { .pv-b-head__standfirst { text-align: right; } }

.pv-tick { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 3px solid var(--ink); }
.pv-tick__list { display: flex; flex-wrap: wrap; gap: var(--s-2) clamp(18px, 2.4vw, 38px); margin: 0; padding: 0; list-style: none; }
.pv-tick__item { position: relative; }
.pv-tick__link { display: grid; gap: 3px; padding: 6px 0; color: var(--ink); text-decoration: none; }
.pv-tick__link:hover .pv-tick__label { text-decoration: underline; text-underline-offset: 0.16em; }
.pv-tick__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pv-tick__dot { width: 10px; height: 10px; border-radius: 50%; }
/* the brand's own device: a quiet line with ALL the colour in the dots (brand-devices.md) */
.pv-dot--ink { background-color: var(--ink); }
.pv-dot--petal { background-color: var(--petal); }
.pv-dot--lime { background-color: var(--lime); }
.pv-dot--sky { background-color: var(--sky); }
.pv-dot--marigold { background-color: var(--marigold); }
/* 13px, not --fs-small (15): at 15 the five section names no longer fit one row and the ticker wrapped.
   This is the footer-eyebrow scale, which is what the site uses for micro labels. */
.pv-tick__label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cat-ink, var(--ink-muted)); }
.pv-tick__n { font-family: var(--font-body); font-weight: 700; font-size: var(--fs-lead); line-height: 1.1; }

/* --------------------------------------------------------- 2. the front page */
.pv-front { padding-block: var(--s-5) var(--s-6); }
.pv-front__grid { display: grid; gap: var(--s-6); }
@media (min-width: 1100px) {
  .pv-front__grid { grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr) minmax(0, 0.78fr); column-gap: 0; }
  .pv-latest, .pv-rail { padding-left: clamp(24px, 2.4vw, 32px); margin-left: clamp(24px, 2.4vw, 32px); border-left: 1px solid rgba(47, 47, 53, 0.35); }
}

.pv-b-lead { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.pv-b-lead__kicker { margin: 0; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cat-ink, var(--ink-muted)); }
.pv-b-lead__date { color: var(--ink); }
/* the one other thing in the display face (Brees 9/17): the lead headline, at the shared --fs-h2. */
.pv-b-lead__h { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -0.02em; }
.pv-b-lead__a { color: var(--ink); text-decoration: none; }
.pv-b-lead__a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.1em; }
.pv-b-lead__a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
/* the homepage "different" device: ink type on a lime band, an inset shadow (verify.js bans gradients) */
.pv-band { box-decoration-break: clone; -webkit-box-decoration-break: clone; box-shadow: inset 0 -0.26em 0 var(--lime); }
.pv-b-lead__art { width: 100%; aspect-ratio: 3 / 2; }
.pv-b-lead__dek { margin: 0; max-width: 46ch; font-size: var(--fs-body); line-height: 1.6; }
/* 🔁 9/17 responsive pass — 44px TALL, AND NOTHING MOVES. This is the lead story's only call to action and it
   measured 137x32 at every phone width: it is a grid item, so it is blockified, not an inline link in running
   text, and the WCAG 2.5.8 inline exception does not cover it. The rule has to stay tight under the words, so
   the box grows UPWARD into the gap above — `padding-top` pushed back out by an equal negative `margin-top`.
   The text, the rule and the row spacing all paint exactly where they did; only the hit area is bigger. */
.pv-b-lead__more { margin-top: -12px; color: var(--ink); font-weight: 700; font-size: var(--fs-body); text-decoration: none; border-bottom: 2px solid var(--ink); padding-top: 12px; padding-bottom: 2px; }
.pv-b-lead__more:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* the duotone: greyscale art multiplied onto a brand field. Decorative treatment only — the picture is never the
   only carrier of meaning, every tile has its headline in text. */
.pv-duo { position: relative; display: block; overflow: hidden; isolation: isolate; }
/* brightness is doing real work: greyscale multiplied straight onto lime went olive and muddy, nothing like
   the reference's light halftone. Lifting the art before the multiply keeps the field reading as lime. */
.pv-duo__img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(1.32) contrast(0.92); mix-blend-mode: multiply; }
.pv-duo { background-color: var(--cat, var(--lime)); }

.pv-latest__h { margin: 0 0 var(--s-1); font-family: var(--font-body); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
.pv-latest__list { margin: 0; padding: 0; list-style: none; }
.pv-latest__item { border-bottom: 1px solid rgba(47, 47, 53, 0.28); }
.pv-latest__link { display: block; padding: var(--s-3) 0; color: var(--ink); text-decoration: none; }
.pv-latest__link:hover .pv-latest__title { text-decoration: underline; text-underline-offset: 0.14em; }
.pv-latest__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* 🔁 9/18, Brees: "No color on the dates." Neutral ink-muted for every date; the category colour stays on the
   category labels only. */
.pv-latest__date { display: block; font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
/* body face, body size: only the masthead and the lead headline are in the display face on this page. */
.pv-latest__title { display: block; margin-top: 6px; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-body); line-height: 1.4; }
/* Same fix, same reasoning: 99x29 measured, and the rail's "Every piece" is a real target. The 17px of
   padding-top comes straight back off the s-3 margin, so the link sits where it sat. 17, not 15: at 15 the box
   measured 43.5 and the sweep was right to keep flagging it — a rounded 44 in the report is not a 44. */
.pv-latest__all { display: inline-block; margin-top: calc(var(--s-3) - 17px); color: var(--ink); font-weight: 700; font-size: var(--fs-small); text-decoration: none; border-bottom: 2px solid var(--ink); padding-top: 17px; padding-bottom: 2px; }
.pv-latest__all:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* 9/18: "Start here" is the same small label as "Latest" (no Andora); only the bottom spacing is its own. */
.pv-rail__h { margin: 0 0 var(--s-3); }
.pv-rail__list { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.pv-rail__link { display: block; color: var(--ink); text-decoration: none; }
.pv-rail__link:hover .pv-rail__title { text-decoration: underline; text-underline-offset: 0.14em; }
.pv-rail__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
/* ARCH tops, not the reference's squares: the DE icon is a dot head over an arch body, and this is where that
   language belongs on an editorial page. */
.pv-rail__link .pv-duo { aspect-ratio: 4 / 3; border-radius: var(--r-pill) var(--r-pill) var(--corner-1) var(--corner-1); }
.pv-rail__cat { display: block; margin-top: var(--s-2); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cat-ink, var(--ink-muted)); }
.pv-rail__title { display: block; margin-top: 6px; font-family: var(--font-body); font-weight: 500; font-size: var(--fs-body); line-height: 1.4; }

/* ------------------------------------------------- 3. every piece (in flow) */
/* 🔴 NOT STICKY — Brees 9/17 ("No sticky filter"). The shared .pv-bar rule in perspectives.css is sticky, so this
   page uses its own bar class and the filter simply sits above the list. */
/* the oat block: everything above it is white, so the list reads as a separate shelf */
.pv-b-list { padding-block: var(--s-6) var(--section-pad); border-top: 3px solid var(--ink); background-color: var(--oat); }
.pv-b-bar .pv-search { border-color: rgba(47, 47, 53, 0.35); }
.pv-b-bar { display: grid; gap: var(--s-3) var(--s-3); align-items: center; padding-bottom: var(--s-4); }
@media (min-width: 900px) {
  .pv-b-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .pv-b-bar .pv-list__h { grid-column: 1; grid-row: 1; }
  .pv-b-bar .pv-list__count { grid-column: 2; grid-row: 1; justify-self: end; }
  .pv-b-bar .pv-tabs { grid-column: 1; grid-row: 2; }
  .pv-b-bar .pv-search { grid-column: 2; grid-row: 2; }
}
.pv-b-bar .pv-list__count { margin: 0; }
.pv-b-bar .pv-search { background-color: var(--white); }
.page-pv-broadsheet .pv-card__link { padding-block: var(--s-4); }

/* ------------------------------------------------------ 4. the close: C2 (9/18) */
/* Brees picked C2 on the canvas "Perspectives Toolbar and CTA": the site's OWN closing panel - the shared
   `.final-cta` (sky, its two circles, the site's corner) - with the newsletter form EMBEDDED instead of a link out.
   It replaces the 9/17 lime band + indigo fine-print strip (concept B4), which are gone from the markup and here.
   Markup: newsletter_close() in scripts/perspectives_data.py, shared by the landing page, posts and category pages.
   - .pv-close is the GROUND the corner reveals: oat on the landing page (it follows the oat list), white on posts and
     category pages (Brees 9/18: no oat there). The panel is the real .final-cta, so its colour, circles and headline
     size are the same as on every other page. Only the corner and the form are added here.
   Contrast: ink on sky 11.1 · labels ink on sky · input edge = ink-muted on white 5.3 (3:1 needed for a boundary) ·
   Subscribe = the site's primary button. */
.pv-close { background-color: var(--white); }
.pv-close--oat { background-color: var(--oat); }
.pv-close__panel { border-top-left-radius: var(--corner-3x); }
.pv-close .final-cta__sub { max-width: 38rem; margin-inline: auto; }

/* 9/21: the hand-built form is gone - this is JotForm 262634500920046 embedded (Brees: "I'd like it to be
   embedded on there as it currently is"). The field/label/button rules that used to live here went with it.
   🔴 NOTHING HERE STYLES THE FORM. The iframe is cross-origin; its look comes from the form's OWN custom CSS
      inside JotForm (jotform-custom-css/newsletter.css is the copy of what was pasted).
   ⚠️ 46rem keeps the panel's measure - the old form's three fields spanned about the same. The embed handler
      sets the height inline once it loads; min-height only covers the moment before that. */
.pv-nl__embed { width: min(100%, 46rem); margin: var(--s-4) auto 0; }
.pv-nl__frame {
  display: block;
  width: 100%;
  min-height: 120px;   /* option B is ONE ROW here (9/21); the handler sets the real height */
  border: 0;
  color-scheme: light;
}
.pv-nl__fallback { margin: var(--s-4) 0 0; color: var(--ink); }

/* ------------------------------------------------- the categories have colours */
/* 🔁 9/17, Brees: "use different colors for different things" — AI and Vet Med green, Independent Practice Growth
   blue, Websites and Marketing pink, each carrying through its dot, its label and the cover of its picture.
   ⏳ Client Experience was not named; marigold is mine to confirm.
   Each class sets TWO values: --cat, the pastel, for fields (dots, duotone covers), and --cat-ink, the darkened
   tier, for the label text. 🔴 Never print a label in --cat: on white the pastels measure 1.35–2.33. */
.pv-cat--ai      { --cat: var(--lime);     --cat-ink: var(--lime-ink); }
.pv-cat--cx      { --cat: var(--marigold); --cat-ink: var(--marigold-ink); }
.pv-cat--growth  { --cat: var(--sky);      --cat-ink: var(--sky-ink); }
.pv-cat--web     { --cat: var(--petal);    --cat-ink: var(--petal-ink); }
.pv-tick__dot { background-color: var(--cat, var(--ink)); }


/* =============================================== T1 — THE SECTION TABS (9/18)
   Brees picked T1 on the design canvas "Perspectives Toolbar and CTA" (claude.ai/artifact/TbvosJFdoHZtMo1fmppbQi):
   the section bar as a plain row of links, each section's colour dot BESIDE its label ("instead of the dots being
   on top, let's have them on the side"), the current page underlined in ink. It replaces the connector ticker
   (.pv-tick, above - no longer in any markup). No counts. Shared by the landing page and every category page
   (markup: section_tabs() in scripts/perspectives_data.py).
   Contrast: labels are ink (13.3 on white); the dots are decoration and carry no meaning a label doesn't. */
.pv-sec { margin-top: var(--s-4); border-bottom: 1px solid rgba(47, 47, 53, 0.18); }
.pv-sec__list { display: flex; flex-wrap: wrap; gap: 0 clamp(24px, 3vw, 44px); margin: 0; padding: 0; list-style: none; }
.pv-sec__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 14px 0 12px;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  color: var(--ink);
  font-weight: 700;
  font-size: var(--fs-body);
  text-decoration: none;
}
.pv-sec__link:hover { border-bottom-color: rgba(47, 47, 53, 0.35); }
.pv-sec__link[aria-current="page"] { border-bottom-color: var(--ink); }
.pv-sec__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.pv-sec__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background-color: var(--cat, var(--ink)); }
/* "Everything" is always ink - on a category page it would otherwise inherit that section's --cat from the header */
.pv-sec__item--all { --cat: var(--ink); }
@media (max-width: 599px) { .pv-sec__link { font-size: var(--fs-small); } }