/* ===========================================================================
   PERSPECTIVES — /perspectives/ (R1) and /perspectives-b/ (R3)  (9/17)
   ---------------------------------------------------------------------------
   Built by scripts/build-perspectives.py from the Claude Design canvas
   claude.ai/artifact/VYMkztZuNGtam98rGkrf3k (round 2: R1 and R3). Scoped to
   .page-perspectives and pv-* classes; the R3 panel is .page-perspectives--b.
   Tokens only; verify.js reads this sheet, comments included.

   The brief (Brees 9/17): the live blog "reads very WordPress ... blocky ...
   information and a picture". So: NO THUMBNAILS on this page at all, one
   highlighted story, a sticky filter bar, and a two-column list of headlines.

   Contrast: ink on white 13.3 · ink-muted on white 5.05 · ink on --sky-soft
   12.3 · ink on --lime 8.95 · oat on ink (button) above 11.
   =========================================================================== */

.page-perspectives { --pv-rule: rgba(47, 47, 53, 0.18); }

/* ------------------------------------------------------------ 1. masthead */
/* 🔁 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 59px
   against the site's 71. Bottom padding is untouched. */
.pv-head {
  padding-block: calc(var(--section-pad) * 0.5 + 43px) var(--s-5);
  background-color: var(--white);
}
.pv-head__grid { display: grid; gap: var(--s-4); }
@media (min-width: 900px) {
  .pv-head__grid { grid-template-columns: minmax(0, 1fr) 24rem; column-gap: clamp(48px, 5.5vw, 80px); align-items: end; }
}
.pv-head__h1 { margin: 0; font-size: clamp(3rem, 6.6vw, 6rem); line-height: 0.95; letter-spacing: -0.03em; }
.pv-head__intro { margin: 0; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.5; color: var(--ink); }

/* ---------------------------------------------------------------- 2. lead */
.pv-lead { padding-block: 0 var(--s-6); background-color: var(--white); }
.pv-lead__grid { display: grid; gap: var(--s-6); }
@media (min-width: 900px) {
  .pv-lead__grid { grid-template-columns: minmax(0, 1fr) 22.5rem; column-gap: clamp(48px, 5.5vw, 80px); align-items: start; }
}
.pv-lead__main { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.pv-lead__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin: 0; }
.pv-pill { background-color: var(--lime); color: var(--ink); font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 18px; border-radius: var(--r-pill); }
.pv-pill--ink { background-color: var(--ink); color: var(--oat); }
.pv-lead__date { font-size: var(--fs-small); color: var(--ink-muted); }
.pv-lead__h { margin: 0; max-width: 15ch; font-family: var(--font-display); font-size: clamp(2.25rem, 4.4vw, 4rem); font-weight: 500; line-height: 1.03; letter-spacing: -0.025em; }
.pv-lead__a { color: var(--ink); text-decoration: none; }
.pv-lead__a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.pv-lead__a:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.pv-lead__dek { max-width: 50ch; margin: 0; font-size: clamp(1.0625rem, 1.5vw, 1.3125rem); line-height: 1.6; color: var(--ink); }
/* Brees 9/17 picked this button off concept P3: "rounded and larger and taller". */
/* 🔴 9/17 responsive pass: inline-flex + centring — as a block with a 68px min-height its label sat in the top
   third of the pill (same defect as the broadsheet's newsletter button). */
.pv-lead__btn { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--s-2); min-height: 68px; padding-inline: clamp(32px, 3.2vw, 44px); font-size: clamp(1rem, 1.2vw, 1.1875rem); }

/* "Also new" — R1 only */
.pv-also__h { margin: 0 0 var(--s-1); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }
.pv-also__list { margin: 0; padding: 0; list-style: none; }
.pv-also__item { border-bottom: 1px solid var(--pv-rule); }
.pv-also__link { display: block; padding: var(--s-3) 0; color: var(--ink); text-decoration: none; }
.pv-also__link:hover .pv-also__title { text-decoration: underline; text-underline-offset: 0.14em; }
.pv-also__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pv-also__title { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.3125rem; line-height: 1.2; }
.pv-also__meta { display: block; margin-top: 8px; font-size: var(--fs-small); color: var(--ink-muted); }

/* the R3 panel: the lead lifted onto light blue with the site's big curve */
.pv-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(32px, 4vw, 60px) clamp(28px, 4.6vw, 72px);
  border-radius: var(--corner-1) var(--corner-3x) var(--corner-1) var(--corner-1);
  background-color: var(--sky-soft);
}
.pv-panel__pattern { z-index: -1; width: clamp(220px, 26vw, 380px); aspect-ratio: 1; right: -70px; bottom: -140px; opacity: 0.55; }
.pv-panel__grid { display: grid; gap: var(--s-4); }
@media (min-width: 900px) {
  .pv-panel__grid { grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(40px, 4.4vw, 64px); align-items: end; }
}

/* ---------------------------------------------------- 3. sticky filter bar */
/* 🔴 --hdr-h-min (114), never --hdr-h: the header shrinks on scroll, and the taller value leaves a cream band
   under the bar. Same rule as every other pinned element on this site. */
.pv-bar {
  position: sticky;
  top: var(--hdr-h-min, 114px);
  z-index: 20;
  background-color: var(--white);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--pv-rule);
}
.pv-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding-block: var(--s-2); }
.pv-tabs { display: flex; flex-wrap: wrap; gap: 10px; }
.pv-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border: 2px solid rgba(47, 47, 53, 0.3);
  border-radius: var(--r-pill);
  background-color: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.18s var(--ease-out), color 0.18s var(--ease-out), border-color 0.18s var(--ease-out);
}
.pv-tab:hover { border-color: var(--ink); }
.pv-tab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pv-tab.is-on { background-color: var(--ink); border-color: var(--ink); color: var(--oat); }
.pv-tab__n { font-size: 0.875rem; opacity: 0.75; }

.pv-search { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-left: auto; padding: 0 18px; border: 2px solid rgba(47, 47, 53, 0.3); border-radius: var(--r-pill); }
.pv-search:focus-within { border-color: var(--ink); }
.pv-search__icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--ink-muted); }
/* 🔁 9/17 responsive pass — `align-self: stretch` is the whole fix. The pill is 48px tall but the INPUT inside
   it measured 210x28, and the 20px of pill above and below the field is not clickable: tapping there does
   nothing, so the real target was 28px on a phone. Stretching the field to the pill's height makes the target
   the thing you can see. Nothing moves — the text still centres on its own line box. */
.pv-search__input { align-self: stretch; min-width: 0; width: clamp(160px, 20vw, 260px); border: 0; background: transparent; font-family: var(--font-body); font-size: 1rem; color: var(--ink); }
.pv-search__input:focus { outline: none; }
.pv-search__input::placeholder { color: var(--ink-muted); }
@media (max-width: 899px) {
  .pv-search { width: 100%; margin-left: 0; }
  .pv-search__input { width: 100%; }
}
/* 🔁 9/17 responsive pass — the pills at phone widths. "Independent Practice Growth" broke onto a second line
   inside its pill at 320-375, which left its count floating beside a two-line label while every other pill sat
   on one. 🔴 The other four pills the sweep reported as wrapping were NOT wrapping — `.pv-tab__n` is a smaller
   font on the same baseline, and the checker bucketed its rect top separately; that lie is fixed in
   `responsive-all.js`. Only this one was real, and the fix is to make the longest label fit, not to let it wrap.
   Height stays 48 — this is a width problem. */
@media (max-width: 599px) {
  .pv-tabs { gap: 8px; }
  .pv-tab { gap: 6px; padding: 0 15px; font-size: 0.9375rem; }
  .pv-tab__n { font-size: 0.8125rem; }
}

/* ---------------------------------------------------------------- 4. list */
.pv-list { padding-block: var(--s-5) var(--section-pad); background-color: var(--white); }
.pv-list__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2); padding-bottom: var(--s-3); }
.pv-list__h { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 500; line-height: 1.15; }
.pv-list__count { margin: 0; font-size: var(--fs-small); color: var(--ink-muted); }

/* two columns from 900 up — Brees 9/17 asked for R3's double column on R1 too */
.pv-cards { display: grid; gap: 0 clamp(48px, 5vw, 72px); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) { .pv-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-card { border-top: 1px solid var(--pv-rule); }
.pv-card[hidden] { display: none; }
.pv-card__link { display: block; padding: var(--s-4) 0; color: var(--ink); text-decoration: none; }
.pv-card__link:hover .pv-card__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.pv-card__link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.pv-card__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.375rem, 2vw, 1.75rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.pv-card__dek { margin: var(--s-1) 0 0; max-width: 46ch; font-size: 1.0625rem; line-height: 1.55; color: var(--ink); }
.pv-card__meta { margin: var(--s-2) 0 0; font-size: var(--fs-small); color: var(--ink-muted); }
.pv-empty { margin: var(--s-4) 0 0; font-size: 1.25rem; color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
  .pv-tab { transition: none; }
}