/* ============================================================
   POV 03 · a How We Think piece (Julian, 29 Oct 2026). One page per
   piece, /how-we-think/<slug>. The markup is BUILT, not hand-written:
   tools/povs.py writes it from the piece's Markdown (content/povs/),
   and tools/assemble.py puts it on the page before the shared close.
   There is no standalone harness — look at the built page.

   From the brand book (Agency_Brand Guidelines.pdf, 10 Sep 2026):
   · THE OPENER — one screen on the piece's agency ground with its
     collage: "let a slide take one strong color and one collage, and
     let it set the tone for the section it opens" (p25). The label, the
     title in header/XL 72/68, the standfirst in body/XL 28 ("the one
     standfirst under a big headline", p10), the byline in label/small.
   · THE ESSAY — on cream, the text in columns 4–9 of twelve (~70
     characters), body/M 18/26; the first paragraph body/L 24/30. Section
     headings header/M 32/38, numbered in mono in the left rail. In the
     right rail, beside the line that cites it, each source's short form
     in body/S 16/22 ("captions, sources and notes", p10) — and any note
     a piece adds (a figure, the five agency marks). Phones: one column,
     the notes under their paragraph.
   · THE PULL LINE — the agency ground returns once, full bleed, as its
     own chapter (§4.9 — it pushes the cream off and the band paints its
     colour), header/L 48/52 ("pull quotes", p9), the agency's cutting
     beside it (p26: "use its collage, its cuttings and its color").
   · No display-face (Aqva) line: one per page (p11 rule 01), and the
     shared close at the foot already has it.
   · Nothing moves on scroll (§4.7). The one move is THE PUSH, below.
   Tokens only.
   ============================================================ */

.pov-open,.pov-pull{--chapter-bg:var(--a-ground);color:var(--a-type)}
[data-agency="wonder"]{--a-ground:var(--cobalt);--a-type:var(--cream)}
[data-agency="movement"]{--a-ground:var(--coral);--a-type:var(--cream)}
[data-agency="inquiry"]{--a-ground:var(--moss);--a-type:var(--cream)}
[data-agency="judgment"]{--a-ground:var(--gum);--a-type:var(--ink)}
[data-agency="attention"]{--a-ground:var(--acid);--a-type:var(--ink)}

.pov-open .label,.pov-body .label{margin:0;font-family:var(--mono);font-size:12px;line-height:14px;letter-spacing:.08em;text-transform:uppercase}

/* THE OPENER — one screen, exactly (Julian, 29 Oct 2026: on the desktop
   the title section fills the viewport, the rule for every piece — it is
   a .chapter, min-height 100lvh). THE TITLE IN AQVA (Julian, 29 Oct 2026,
   option B of the review): the title is the page's statement, set in RL
   Aqva at the brand book's Display/RL (84/80, -1.5%) on one line across
   all twelve columns — "write to the measure" (rule 02) — with the
   collage moved up into columns 9–12, smaller, and the label, standfirst
   and byline under the title, bottom-left. A KNOWING EXCEPTION to the
   book's ration (rule 01, one Aqva line per page; "eight screens of the
   site"): the shared close's stamp is Aqva too. Phones take the book's
   smallest Aqva, Display/M 56/56, on as many lines as it takes (Julian,
   29 Oct 2026: always Aqva). Titles should stay within ~26 characters to
   hold the one line at 1440; longer ones wrap. */
.pov-open{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(0,1fr) auto;column-gap:20px;row-gap:clamp(20px,2.8svh,32px);align-items:start;
  height:100lvh;padding:clamp(96px,10.42vw,150px) var(--m) clamp(48px,7svh,72px)}   /* exactly one screen: the collage takes the height the words leave */
.pov-open .vt-ground{position:absolute;inset:0;background:var(--a-ground)}
.pov-open .txt,.pov-open .art{position:relative;z-index:1}   /* above the ground — on phones the collage takes order:-1, which would also paint it under the ground */
.pov-open .txt{grid-row:2;grid-column:1/13}
.pov-open h1{margin:clamp(18px,1.95vw,28px) 0 0;font-family:var(--display);font-weight:900;
  font-size:84px;line-height:80px;letter-spacing:-.015em}   /* display/RL — never shrunk (rule 03) */
.pov-open .stand{margin:clamp(18px,1.95vw,28px) 0 0;max-width:640px;font-family:var(--deck);font-size:clamp(21px,1.94vw,28px);line-height:1.214}   /* body/XL */
.pov-open .by{margin-top:clamp(32px,3.33vw,48px)}
.pov-open .when{margin-top:8px}   /* the date and reading time under the byline (Julian, 29 Oct 2026) */
.pov-open .art{grid-row:1;grid-column:9/13;align-self:stretch;min-height:0;display:flex;justify-content:flex-end}
.pov-open .art img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;object-position:right top;aspect-ratio:1744/1580}

/* THE ESSAY */
.pov-body{--chapter-bg:var(--cream);color:var(--ink);min-height:0;
  padding:clamp(72px,8.33vw,120px) var(--m) clamp(24px,2.78vw,40px)}
.pov-pull + .pov-body{padding-top:clamp(56px,5vw,72px)}
.pov-body .row,.pov-body .sec,.pov-body .sources,.pov-body .next{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px}
/* EVEN SPACING (Julian, 29 Oct 2026): a paragraph's margin notes no longer
   set its row's height — the margin sits beside the paragraph, out of the
   flow, so every paragraph is followed by the same 26px whatever its notes
   run to (a long note simply runs on beside the next lines) */
.pov-body .row{position:relative;align-items:start}
.pov-body .t{grid-column:4/10;margin:0 0 26px;font-family:var(--deck-text);font-size:18px;line-height:26px}   /* body/M */
.pov-body .t.lede{font-family:var(--deck);font-size:24px;line-height:30px;margin-bottom:32px}   /* body/L */
.pov-body strong{font-weight:600}
.pov-body sup.ref{font-family:var(--mono);font-size:11px;line-height:0;letter-spacing:.04em;padding-left:1px}
.pov-body .rail{position:absolute;top:0;right:0;width:calc((100% + 20px) * 3 / 12 - 20px);padding-left:20px}   /* columns 10–12 */
.pov-body .note{margin:0 0 12px;font-family:var(--deck-micro);font-size:13px;line-height:18px;color:color-mix(in srgb,var(--ink) 72%,var(--cream))}   /* smaller than body/S so the margin stays quiet (Julian, 29 Oct 2026: 16/22 read as too large and distracting); Forma's Micro cut is drawn for this size; 5.7:1 on cream */
.pov-body .note .n{font-family:var(--mono);font-size:10px;margin-right:2px}
.pov-body .note a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 30%,transparent);text-underline-offset:.15em}
.pov-body .note a:hover{text-decoration-color:currentColor}
/* SOURCES (Julian, 29 Oct 2026): on the desktop the notes beside the
   lines are the sources — each one a link — so the list at the foot
   would only repeat them; it shows on phones, where the notes go */
.pov-body .sources{display:none}
.pov-body .note .n{display:inline-block;min-width:1.2em}
/* CALL-OUTS — a figure or the agency marks, set in the text column under
   their paragraph, between two rules (Julian, 29 Oct 2026: in the piece,
   never in the margin) */
.pov-body .callout{grid-column:4/10;margin:2px 0 30px;padding:22px 0 20px;
  border-top:1px solid color-mix(in srgb,currentColor 28%,transparent);border-bottom:1px solid color-mix(in srgb,currentColor 28%,transparent)}
.pov-body .fig{margin:0 0 10px;font-family:var(--deck-display);font-weight:500;font-size:48px;line-height:52px;letter-spacing:-.02em}   /* header/L — "big numbers", p9 */
.pov-body .cap{margin:0;max-width:440px;font-family:var(--deck-text);font-size:16px;line-height:22px;color:color-mix(in srgb,var(--ink) 78%,var(--cream))}   /* body/S */
.pov-body .cap a{color:inherit;text-underline-offset:.15em}
.pov-body .marks{display:flex;gap:10px;align-items:flex-end;margin:0 0 10px}
.pov-body .marks img{height:28px;width:auto}
.pov-body .sec{margin:64px 0 28px;align-items:baseline}
.pov-body h2{grid-column:4/10;margin:0;font-family:var(--deck);font-weight:500;font-size:32px;line-height:38px;letter-spacing:-.02em}   /* header/M */
/* the closing line is body text like the rest (Julian, 29 Oct 2026: not
   larger); only its link, "let's talk", is marked */
.pov-body .ask a{color:inherit;text-decoration:underline;text-underline-offset:.15em}   /* "let's talk" → the contact form in the close (Julian, 29 Oct 2026) */

.pov-body .sources{margin-top:clamp(72px,6.67vw,96px)}
.pov-body .sources h2.label{grid-column:1/4;font-family:var(--mono);font-weight:400;font-size:12px;line-height:14px;letter-spacing:.08em;padding-top:14px}
.pov-body .sources ol{grid-column:4/13;list-style:none;margin:0;padding:0}
.pov-body .sources li{display:grid;grid-template-columns:40px minmax(0,1fr);padding:12px 0;font-family:var(--deck-text);font-size:16px;line-height:22px;
  border-top:1px solid color-mix(in srgb,currentColor 18%,transparent)}
.pov-body .sources li .n{font-family:var(--mono);font-size:12px;line-height:22px}
.pov-body .sources a{color:inherit;text-underline-offset:.15em;overflow-wrap:anywhere}

.pov-body .next{margin-top:clamp(64px,6.67vw,96px);align-items:center;min-height:44px;padding:22px 0;
  border-top:1px solid color-mix(in srgb,currentColor 28%,transparent);border-bottom:1px solid color-mix(in srgb,currentColor 28%,transparent)}
.pov-body .next .mark{grid-column:1/2;display:block;width:40px;height:40px}
.pov-body .next .mark img{display:block;height:100%;width:auto}
.pov-body .next .mark.shape{background:var(--beige);-webkit-mask:var(--g) left center/contain no-repeat;mask:var(--g) left center/contain no-repeat}
.pov-body .next .t{grid-column:2/9;margin:0;font-family:var(--deck);font-weight:500;font-size:32px;line-height:38px;letter-spacing:-.02em}
.pov-body .next .t .label{margin-right:.6em;vertical-align:.45em}
.pov-body .next.is-coming .t{color:color-mix(in srgb,var(--ink) 62%,var(--cream))}
.pov-body .next .t a{color:inherit}
.pov-body .next .all{grid-column:9/13;justify-self:end;color:inherit;display:inline-flex;align-items:center;min-height:44px}

/* MARGIN CUTTINGS (Julian, 29 Oct 2026) — up to three of the piece's
   agency's cuttings in the left margin (columns 1–3), each beside the
   paragraph or heading its `::: margin <name>` line precedes in the
   Markdown. The brand book's system: the opener carries the scene, the
   pull line the sign, the margin the cuttings — "three to a page" for
   medium images. The first, second and third take different sizes and
   offsets so they read as placed by hand; none ever reaches the text
   column. Out of the flow: they never move the text. Desktop only. */
.pov-body .sec{position:relative}
.pov-body .cutting{position:absolute;left:0;top:var(--ct);margin-left:var(--cx);display:block;height:auto;pointer-events:none;
  width:min(var(--cw), calc((100% + 20px) * 3 / 12 - 20px - var(--cx)))}
.pov-body .cutting.c1{--cw:250px;--ct:-6px;--cx:0px}
.pov-body .cutting.c2{--cw:230px;--ct:-40px;--cx:40px}
.pov-body .cutting.c3{--cw:150px;--ct:-10px;--cx:70px}

/* THE PULL LINE — its own chapter on the agency ground, exactly as tall as
   the cutting beside it (Julian, 29 Oct 2026: thinner — "the height of the
   glyph"), the line centred on it */
.pov-pull{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;align-items:center;
  min-height:0;padding:0 var(--m)}
.pov-pull blockquote{grid-row:1;grid-column:4/11;margin:0}
.pov-pull blockquote p{margin:0;font-family:var(--deck-display);font-weight:500;font-size:clamp(36px,3.33vw,48px);line-height:1.083;letter-spacing:-.02em}   /* header/L */
.pov-pull .cut{grid-row:1;grid-column:11/13;justify-self:end;display:block;height:clamp(120px,11.1vw,160px);width:auto}

/* focus: every link in the piece shows an ink ring */
.pov-body a:focus-visible,.pov-open a:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* PHONES (§3 stacked flow): six columns; the opener's collage on top;
   one text column; each note under its paragraph, ruled in the
   agency's colour */
@media(max-width:760px),(pointer:fine) and (max-height:560px){
  .pov-open{display:flex;flex-direction:column;align-items:stretch;height:auto;padding:max(84px,10svh) var(--m) 40px}
  .pov-open .art{order:-1;margin:0 -8px 12px;display:block}
  .pov-open .art img{width:100%;height:auto}
  .pov-open h1{font-size:56px;line-height:56px;margin-top:14px}   /* Aqva on phones too (Julian, 29 Oct 2026): the book's smallest Aqva, Display/M 56/56 — "section openers that have to feel like Aqva" — on as many lines as it takes, never smaller (rule 03) */
  .pov-open .stand{font-family:var(--deck-text);font-size:clamp(18px,5vw,21px);line-height:1.3;margin-top:14px}
  .pov-open .by{margin-top:24px}
  .pov-open .when{margin-top:6px}
  .pov-body{padding:48px var(--m) 24px}
  .pov-body .row,.pov-body .sec,.pov-body .sources,.pov-body .next{display:block}
  .pov-body .t{font-size:17px;line-height:26px;margin-bottom:22px}
  .pov-body .t.lede{font-family:var(--deck-text);font-size:20px;line-height:28px}
  .pov-body .cutting{display:none}   /* no margin on phones */
  .pov-body .rail{display:none}   /* no notes in the text on phones — the sources are at the foot (Julian, 29 Oct 2026) */
  .pov-body .sources{display:block}
  .pov-body .fig{font-family:var(--deck);font-size:34px;line-height:38px}
  .pov-body .callout{margin:0 0 24px;padding:18px 0 16px}
  .pov-body .cap{font-size:15px;line-height:21px}
  .pov-body .sec{margin:44px 0 18px}
  .pov-body h2{font-size:26px;line-height:30px}
  .pov-body .sources h2.label{padding:0 0 10px}
  .pov-body .sources li{grid-template-columns:28px minmax(0,1fr);font-size:15px;line-height:21px}
  .pov-body .next{display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;row-gap:6px}
  .pov-body .next .mark{grid-column:1;width:30px;height:30px}
  .pov-body .next .t{grid-column:2;font-size:21px;line-height:26px}
  .pov-body .next .all{grid-column:2;justify-self:start}
  .pov-pull{display:flex;gap:16px;padding:0 var(--m)}
  .pov-pull blockquote p{font-family:var(--deck);font-size:clamp(28px,8vw,34px);line-height:1.1}
  .pov-pull .cut{height:112px;width:auto;flex:none}
}

/* ZOOMED (WCAG 1.4.4): stacked, type at its desktop size in rem */
@media(pointer:fine) and (max-width:760px),(pointer:fine) and (max-height:560px){
  .pov-open h1{font-size:3.5rem!important;line-height:1!important}   /* Display/M in rem: zoom enlarges it */
  .pov-open .stand{font-size:1.75rem!important;line-height:1.25!important}
  .pov-body .t{font-size:1.125rem!important;line-height:1.45!important}
  .pov-body .t.lede{font-size:1.5rem!important;line-height:1.3!important}
  .pov-body h2,.pov-body .next .t{font-size:2rem!important;line-height:1.2!important}
  .pov-body .cap,.pov-body .sources li{font-size:1rem!important;line-height:1.4!important}
  .pov-body .fig{font-size:3rem!important;line-height:1.1!important}
  .pov-pull blockquote p{font-size:3rem!important;line-height:1.1!important}
  .pov-open .label,.pov-body .label{font-size:.75rem!important;line-height:1.2!important}
}

/* THE PUSH (Julian, 29 Oct 2026) — arriving from the How We Think index
   (or going back to it), the page moves in the chapters' own move (§4.9):
   this piece rises from the foot and pushes the index off the top, a
   whole screen in .8s, eased in and out, while the nav band holds still
   and the opener's ground sweeps across it, as on the landing page
   (pov-push.js). Back runs it in
   reverse (pov-02-index.css). No fades (§4.2). A click-triggered move,
   not scroll-driven — logged in CLAUDE.md §4.8. It replaced the grow of
   the same day, which travelled too little to see. Off under reduced
   motion; Firefox gets the plain page change. */
/* the opt-in — @view-transition{navigation:auto}, off under reduced motion
   only — is INLINE in the page's <head> (tools/assemble.py VT_OPTIN): here
   it could arrive too late and Chrome cancels the move. */
#site-nav{view-transition-name:pov-nav}
@keyframes pov-from-foot{from{transform:translateY(100%)}}
@keyframes pov-to-top{to{transform:translateY(-100%)}}
::view-transition-group(*){animation-duration:.8s;animation-timing-function:cubic-bezier(.65,0,.35,1)}
::view-transition-old(*),::view-transition-new(*){animation:none;mix-blend-mode:normal}
::view-transition-old(root){animation:pov-to-top .8s cubic-bezier(.65,0,.35,1) both}
::view-transition-new(root){animation:pov-from-foot .8s cubic-bezier(.65,0,.35,1) both}
/* the nav band holds still and is painted, frame by frame, from the edge
   between the two pages as it passes under it — as on the landing page
   when a chapter scrolls under (pov-push.js). So once that starts, only the
   arriving page's live band shows */
::view-transition-group(pov-nav){animation:none}
html:not(.pov-painting)::view-transition-new(pov-nav){opacity:0}   /* until the painting starts, the leaving band shows */
html.pov-painting::view-transition-old(pov-nav){opacity:0}

/* HIGH CONTRAST (§3): light type on coral or cobalt turns ink */
html[data-contrast="high"] [data-agency="wonder"],
html[data-contrast="high"] [data-agency="movement"]{--a-type:var(--ink)}