/* Long-form article pages, generated verbatim from the source documents. */
/* main.frame is the page box now — the article only owes it the padding. */
.lf{width:100%;padding:0 var(--pad) 120px}
.lf-head{max-width:44rem;margin:0 auto;padding:96px 0 48px;border-bottom:1px solid var(--border)}
.lf-kicker{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--accent);margin-bottom:22px}
.lf-head h1{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(2.2rem,4.4vw,58px);line-height:.98;margin:0 0 22px}
.lf-meta{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted-2)}

/* Standfirst — the dek, the run of meta and the byline, for a page whose h1 sits
   on a hero image and so has nowhere above the fold to carry a date or an author.
   Same 44rem column as .lf-body, so the dek and the first paragraph share an edge.
   .art-meta and .byline come from post.css unchanged; only the dek needs a rule,
   because post.css scopes its own to .art-head / .wide-head. */
.lf-standfirst{max-width:44rem;margin:0 auto;padding:44px 0 36px;
  border-bottom:1px solid var(--border)}
/* Kept for a page with no hero: there the dek still has to run at the top of the
   column, because there is no photograph above it to carry one. */
.lf-standfirst .dek{color:var(--text);font-size:22px;line-height:1.5;margin:0;max-width:62ch}
.lf-hero + .lf .lf-standfirst + .lf-body,.lf-standfirst + .lf-body{padding-top:44px}

/* Next-part card between the standfirst and the first paragraph. Same 44rem
   column, and the lone forward card sits in the right half of the 1fr 1fr grid —
   in the left half it reads as "previous". */
.lf-topnav{max-width:44rem;margin:0 auto;padding-top:32px}
.lf-topnav + .lf-body{padding-top:32px}
.lf-topnav .pnnav .pn.next:only-child{grid-column:2}
@media (max-width:620px){
  .lf-topnav .pnnav .pn.next:only-child{grid-column:1}
}

.lf-body{max-width:44rem;margin:0 auto;padding-top:48px}
.lf-body p{font-size:18px;line-height:1.66;color:var(--muted);margin:0 0 24px}
.lf-body h2{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(1.6rem,2.6vw,34px);line-height:1.04;color:var(--text);margin:56px 0 20px}
.lf-body h3{font-family:var(--font-body);font-weight:600;font-size:22px;line-height:1.25;
  letter-spacing:-.01em;color:var(--text);margin:44px 0 16px}
.lf-body h4{font-family:var(--font-body);font-weight:600;font-size:17px;line-height:1.3;
  color:var(--text);margin:34px 0 12px}
.lf-body ul{margin:0 0 26px;padding-left:22px;list-style:none}
.lf-body li{position:relative;font-size:18px;line-height:1.66;color:var(--muted);margin-bottom:12px}
.lf-body li::before{content:"";position:absolute;left:-22px;top:.72em;width:8px;height:1px;background:var(--faint)}
.lf-body strong{color:var(--text);font-weight:600}
.lf-body em{font-style:italic}
.lf-body a{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.lf-body blockquote{margin:34px 0;padding-left:22px;border-left:2px solid var(--accent)}
.lf-body blockquote p{color:var(--text);font-size:20px;line-height:1.5;margin:0}

/* A diagram needs width the prose does not, so a figure breaks the 44rem
   measure and re-centres on the same axis — the column still reads as one
   column. Only above 1140px, which is the width at which 56rem clears the
   frame's gutters and padding; under that it sits at the text measure and the
   drawing scrolls inside itself. */
.lf-fig{margin:52px 0 56px}
@media (min-width:1140px){
  .lf-fig{width:56rem;position:relative;left:50%;transform:translateX(-50%)}
}

/* Only the drawing breaks out. Everything in a figure that is *read* — its
   title, its caption, the scroll hint — stays on the 44rem prose measure and
   on the prose left edge, because the figure and the column are centred on the
   same axis. A caption starting 6rem left of the paragraph above it reads as a
   different column, not as part of the article. */
.lf-fig > :not(.jc-plot){max-width:44rem;margin-inline:auto}

/* The caption's own hairline would then stop 6rem short of the drawing it sits
   under, which reads as a stray rule. Hand it to the plot so it closes the
   figure at full width, and let the caption be text alone. */
.lf-fig .jc-plot{padding-bottom:18px;border-bottom:1px solid var(--hairline)}
.lf-fig figcaption{margin-top:14px;padding-top:0;border-top:0}

.lf-foot{max-width:44rem;margin:72px auto 0;padding-top:28px;border-top:1px solid var(--border)}
/* Direct child only — the foot now also carries a share row and an author box,
   whose links must not be forced into uppercase mono. */
.lf-foot > a{display:inline-block;font-family:var(--font-mono);font-size:12px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted)}
.lf-foot > a:hover{color:var(--text)}
/* ---------- Contents rail ----------
   post.css owns .toc-*; it was written for .post-grid, which hands the rail a
   264px column of its own. This template is a centred 44rem column with no
   sidebar, so the rail is fixed in the left margin instead — but only from
   1400px, which is the width at which a 200px rail plus its gap still clears
   the page box's own left rule. Below that it is a disclosure in flow at the
   top of the article, which is what .toc-disc was built to be.
   The rail is fixed rather than sticky on purpose: sticky needs the element to
   occupy a row in the flow, and a full-width row above the article would push
   the standfirst down the page at every width. */
/* The rail's contents are built by script from the article's own h2s, so with
   no script there is nothing in it to show. */
.lf-toc{display:none}
.js .lf-toc{display:block;max-width:44rem;margin:0 auto;padding-top:32px}
.lf-toc .toc-wrap,.lf-toc .toc-disc{padding:0}
.lf-toc .toc-nav{max-height:none;overflow:visible;margin-top:14px}
.lf-toc .toc-t{display:none}
/* post.css takes the summary away from 1101px up, because in .post-grid the rail
   has a column of its own from that width and is always open. Here it is a
   disclosure until 1440, so between those two widths that rule left a heading
   with no heading and a list that could not be opened. */
.js .lf-toc .toc-disc > summary{display:block}
.lf-toc .toc-body{padding-bottom:24px;border-bottom:1px solid var(--border)}

/* 1440 and the geometry below are set by the figures, not by the prose. A .lf-fig
   breaks the 44rem measure out to 56rem from 1140px up, so its left edge sits at
   50% - 28rem — 96px INTO the margin the rail wants. A rail parked 24px off the
   column, which is where a sidebar would sit, is run straight through by the
   first diagram. So the rail clears the widest thing in the column instead of the
   narrowest: 28rem + a 24px gap + its own 168px puts its right edge at
   50% - 29.5rem, and its left edge 16px inside the page box's left rule at 1440.
   Below that width there is no room for it and it is the in-flow disclosure. */
@media (min-width:1440px){
  .js .lf-toc{position:fixed;top:calc(var(--nav-h) + 32px);left:calc(50% - 28rem - 192px);
    width:168px;max-width:none;margin:0;padding-top:0;z-index:5}
  /* Fixed means it is on screen at the top of the page too, where the article is
     not — over a full-bleed hero, across the breadcrumb. So above this width it
     is carried by the article: script adds .on while the body is in view and
     takes it off again at the hero and past the foot. Below 1400 the rail is a
     closed disclosure in flow and has no such problem, which is why this is the
     only place it is hidden. */
  .js .lf-toc{opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s}
  .js .lf-toc.on{opacity:1;visibility:visible}
  @media (prefers-reduced-motion:reduce){.js .lf-toc{transition:none}}
  .js .lf-toc .toc-disc > summary{display:none}
  .lf-toc .toc-t{display:block}
  .lf-toc .toc-nav{max-height:calc(100vh - 280px);overflow-y:auto;margin-top:0}
  .lf-toc .toc-body{padding-bottom:0;border-bottom:none}
}

.lf-foot .share{margin-bottom:32px}
.lf-foot .authorbox{margin-bottom:32px}
.lf-foot .rel-grid{margin-bottom:36px}

/* ---------- Co-authored posts: two author boxes, side by side ----------
   A post with two authors wraps its boxes in .authorboxes and they sit in one
   row. Stacked, two of them ran 32px apart down a 704px column and read as two
   separate endings to the article; side by side they read as one credit.

   Written mobile-first, and that is load-bearing rather than a style choice.
   post.css:341 already takes EVERY .authorbox to a single column below 620 —
   portrait above the name — so anything declared unconditionally here would have
   to be undone at that width, and an earlier draft of this block did exactly the
   wrong thing: it forced the pair back to portrait-beside at 620, the one width
   where every other author box on the site does the opposite. So the two-up is
   the only thing in a query, and below it both boxes inherit post.css whole.

   Inside the pair each box turns single-column, portrait above the name. Not
   decoration — the pair splits the foot's 44rem into 342px halves, and a 72px
   portrait plus its 20px gap and 48px of padding would leave 202px for the bio,
   about 27 characters a line. Portrait on top gives the text the full 292px,
   nearer 40.

   900px is where the foot is first wide enough for that, and it is MEASURED, not
   derived — two attempts at deriving it from --gutter and the 44rem cap both came
   out wrong, because .lf-foot sits inside .frame and does not simply get
   viewport-minus-gutters. Swept at 1440/1100/1000/900/800/752/751/700/621/620/
   500/375, the foot is 704 at 900 and above, 694 at 800, 654 at 752. So 900 is
   the lowest width where a box is the full 342 every time.

   Below it the pair stacks rather than shrinking, which is the point: the 292px
   bio measure above was worked out at 342, and the two-up is never narrower than
   the width it was worked out at.

   .lf-foot .authorboxes .authorbox is (0,3,0), so it beats the margin-bottom on
   .lf-foot .authorbox above regardless of which block comes first in the file.
   The wrapper carries that 32px instead. */
.lf-foot .authorboxes{display:grid;gap:20px;margin-bottom:32px}
.lf-foot .authorboxes .authorbox{margin-bottom:0}
@media (min-width:900px){
  .lf-foot .authorboxes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lf-foot .authorboxes .authorbox{grid-template-columns:minmax(0,1fr)}
}

/* Sources and footnotes, set as small print.
   post.css sizes .fnotes for a numbered list — its h2 at 16px and its notes at
   14px. Inside .lf-body both lose: .lf-body h2 is GC Vank display type and
   .lf-body p is the 18px reading size, and each of those selectors outranks the
   component's own. Restated here at the component's intended size, because a
   source list set as body copy at the foot of a 4,300-word article reads as one
   more section rather than as the small print it is. */
.lf-body .fnotes h2{font-family:var(--font-body);font-weight:600;text-transform:none;letter-spacing:0;
  font-size:15px;line-height:22px;color:var(--muted);margin:0 0 12px}
.lf-body .fnotes p{font-size:13px;line-height:20px;color:var(--muted-2);margin:0}

@media (max-width:768px){
  .lf{padding:0 24px 80px}
  .lf-head{padding:64px 0 36px}
  .lf-standfirst{padding:48px 0 32px}
  .lf-standfirst .dek{font-size:19px;line-height:1.47}
  .lf-body p,.lf-body li{font-size:17px}
}

/* ==========================================================================
   Article hero — full-bleed image with the title overlaid.
   Photography sits at the threshold, edge to edge, never inside the column.
   The scrim is bottom-weighted so the title lands in the dark ground and the
   single warm light source in each frame stays untouched.
   ========================================================================== */
.lf-hero{position:relative;min-height:clamp(420px,72vh,660px);display:flex;align-items:flex-end;
  margin-bottom:0;overflow:hidden;background:var(--card);
  /* "Full-bleed" means edge to edge of the page box, not past it — running the
     photograph out under the header's vertical rules just breaks the frame.
     main.frame is that box now, so the hero only has to fill it. */
  width:100%;
  /* ---------- Veil ----------
     A flat wash under the scrim, to sit the compression down. All four hero
     photographs are 1376x768 at 74-93 KB — around 0.07 bits a pixel — and the
     hero renders them up to 1376 wide, so at 1:1 on a 2x screen the blocking
     and banding show. They show worst in the smooth glow around the light
     source, which is the one part of each frame with no detail to hide behind.

     Deliberately a flat layer rather than a re-graded gradient: the gradient
     below is doing legibility and its stops are tuned to where the type sits,
     so mixing the two jobs into one set of stops means neither can be adjusted
     without disturbing the other.

     One number, and it is here on .lf-hero rather than the pseudo-element so a
     page whose photograph needs more or less than the rest can set its own:
       .lf-hero{--hero-veil:.4}
     in that page's own style block, nothing else.

     .28 is measured against the three brighter frames. Mean luminance of the
     four, sampled 344x192 off a canvas, out of 255:

       hero-seedpod    39.3    (ai-edge-context-moat)
       hero-glider     33.8    (a-tall-order, judgement)
       hero-staircase  33.3    (how-we-analyse-every-deal)
       hero-canyon     17.2    (why-we-paused)

     So the canyon is about half as bright as the other three and is the one to
     watch: at .28 its rock texture mostly goes and the frame reads as murk. If
     it should keep more of itself, that page takes --hero-veil:.14 and nothing
     here changes. Left at the shared value for now because it was asked for. */
  --hero-veil:.28}
.lf-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* background-color is the veil and paints under background-image, so the two
   composite: .28 under .18 puts the brightest band at about 41% covered, where
   it was 18%. Written as the two longhands on purpose — the `background`
   shorthand this used to be would reset the colour every time the gradient was
   touched. The scrim's own stops are unchanged. */
.lf-hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background-color:rgba(17,15,13,var(--hero-veil));
  background-image:linear-gradient(180deg,rgba(17,15,13,.72) 0%,rgba(17,15,13,.18) 34%,
             rgba(17,15,13,.62) 68%,rgba(17,15,13,.96) 100%)}
/* The hero is already the page box, so the inner only owes it the --pad inset —
   applying the box twice would land the title 64px right of every other page. */
.lf-hero .lf-hero-inner{position:relative;z-index:2;width:100%;
  padding:0 var(--pad) clamp(48px,7vh,76px)}
.lf-hero .lf-kicker{color:var(--to-first-light,#fff695)}
.lf-hero h1{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(2.4rem,5.4vw,72px);line-height:.94;color:#fff;margin:0 0 20px;max-width:20ch;
  text-shadow:0 2px 40px rgba(0,0,0,.55)}
/* Synopsis under the title, on the photograph. It reads as the second line of
   the headline rather than the first line of the article, which is what it is —
   so it takes the hero's white and its scrim shadow, not the body's --text.
   Narrower than the 62ch it ran at in the column: the hero has no measure of its
   own and a 62ch line under a 20ch title reads as two unrelated blocks. Sized
   under the h1's own clamp at every width, and it never overtakes the title. */
.lf-hero .dek{margin:0;max-width:46ch;color:rgba(255,255,255,.82);
  font-size:clamp(17px,1.55vw,21px);line-height:1.5;
  text-shadow:0 2px 30px rgba(0,0,0,.6)}
.lf-hero .lf-meta{color:rgba(255,255,255,.66)}
/* The article element is .lf. This pair used to say .art, which matches nothing
   on the site, so every hero article printed its kicker, h1 and meta twice and
   set the body at the no-hero top padding. The head is now deleted from the
   hero pages outright rather than hidden — a second h1 in the DOM is still a
   second h1 — and the display:none only has to cover an article that carries
   both. */
.lf-hero + .lf .lf-head{display:none}
.lf-hero + .lf .lf-body{padding-top:72px}

@media (max-width:768px){
  .lf-hero{min-height:clamp(320px,58vh,440px)}
  .lf-hero .lf-hero-inner{padding:0 24px 40px}
}

/* An h3 inside body copy is body copy, whichever component it arrived in. The
   embedded chart blocks style their own head as display type (GC Vank 700
   uppercase), which is right on a dashboard and wrong mid-article — it read as a
   third heading voice in the same column. Neue Haas, no transform, 600. */
.lf-body .jc-head h3,
.min-body .jc-head h3,
.prose .jc-head h3{
  font-family:var(--font-body);font-weight:600;text-transform:none;
  font-size:20px;line-height:26px;letter-spacing:-.01em;
}

/* ---------- Series, inside the .lf article column ----------
   post.css sizes .series-head as a full-bleed band padded by --pad. In this
   template the article is a 44rem column, so the band is constrained to that
   measure instead — it has to share an edge with the dek and the body copy
   directly beneath it, or it reads as a different page element. */
.lf > .series-head{
  max-width:44rem;margin:56px auto 0;padding:20px 24px;
  border:1px solid var(--border);border-bottom:1px solid var(--border);
}
.lf > .series-head + .lf-standfirst{padding-top:32px}
.lf-foot .series-foot{margin-bottom:36px}
.lf-foot .series-foot .sec-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:16px;margin-bottom:16px}
/* vc.css sizes .sec-head h2 at 32px for a full-width band. In the 44rem foot it
   is a label above a list, not a section opener. */
.lf-foot .series-foot .sec-head h2{font-size:20px;line-height:28px}
.lf-foot .series-foot .aside{font-family:var(--font-mono);font-size:11px;line-height:16px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.lf-foot .series-parts a.part,.lf-foot .series-parts .part{text-transform:none;letter-spacing:0}
.lf-foot .series-parts .part .ti{font-family:var(--font-body);font-size:15px}
/* One article carries two parts, so the number column holds a range ("02–03").
   post.css narrows that column to 32px under 620, which breaks the range across
   two lines. Widen it — a fixed width rather than max-content, so the titles
   still share one left edge down the list. */
.lf-foot .series-parts .part .n{white-space:nowrap}
@media (max-width:620px){
  .lf-foot .series-parts .part{grid-template-columns:48px minmax(0,1fr)}
}

/* Part 1 of 2 has no previous, so the lone next card would sit in the left half
   of the 1fr 1fr grid, reading as "previous". Put it in the second column where
   a forward link belongs. */
.lf-foot .pnnav{margin-bottom:36px}
.lf-foot .pnnav .pn.next:only-child{grid-column:2}
@media (max-width:620px){
  .lf-foot .pnnav .pn.next:only-child{grid-column:1}
}