/* The Content Surgeon: journal.css. The index and the 13 generated articles (DESIGN-SPEC 3.31-3.34,
   6.3, 6.4). Tokens only, mobile first, no id selectors. Owner: WP2. */

/* ---------- Page frame ---------- */
/* The journal ends on the section token, as the roster and the 404 do (T24) */
.j-index,.j-article{padding-top:var(--title-top);padding-bottom:var(--sec)}

/* 6.3 Index head: headline 7 / standfirst 4, first baseline */
.j-index__head{margin-bottom:clamp(40px,5.6vw,88px)}
.j-index__head .h1{max-width:12.5em}
.j-index__head .dek{margin-top:var(--sp-5)}
@media (min-width:1024px){
  .j-index__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:first baseline}
  .j-index__head .rh{grid-column:1 / -1}
  .j-index__head .h1{grid-column:1 / span 7}
  .j-index__head .dek{grid-column:9 / span 4;margin-top:0}
}

/* ---------- 3.32 Controls, status, rows ---------- */
/* One rule under the controls: the search underline (ink-3, for 3:1) lies on the list's hairline */
.j-controls{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;padding-top:12px;border-top:var(--rule-ink)}
html:not(.js) .j-controls{display:none}
/* The controls hold their space unseen until journal.js adds .j-ready: no shift, no dead controls */
html.js:not(.j-ready) .j-controls{visibility:hidden}
.j-filter{display:flex;flex-wrap:wrap;gap:4px 22px}
.j-filter__chip{min-height:44px;min-width:44px;padding:0;border:0;background:none;cursor:pointer;font:500 .9375rem/1 var(--sans);color:var(--ink-2);
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.45em;
  transition:color var(--t-fast) var(--ease),text-decoration-color var(--t-fast) var(--ease)}
.j-filter__chip:hover{color:var(--ink);text-decoration-color:var(--rule-2)}
.j-filter__chip[aria-pressed="true"]{color:var(--ink);text-decoration-color:var(--red)}
.j-filter__chip:active{color:var(--ink)}
/* Phones: two rows of three, left-aligned, so no topic is left alone on a line. Each track is a
   third of the row but never under 4.75rem, so enlarged text drops to two columns, not sideways */
@media (max-width:719px){.j-filter{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(4.75rem,calc((100% - 25px) / 3)),1fr));column-gap:12px;justify-items:start;width:100%}}
@media (max-width:359px){.j-filter{column-gap:8px}}
/* inline-block, so the chip's underline stays under the label */
.j-count{display:inline-block;margin-left:.3em;font:400 var(--fs-mono)/1 var(--mono);color:var(--ink-3)}
.j-search-wrap{flex:1 1 100%}
.j-search{position:relative;z-index:1;display:block;margin-bottom:-1px}
/* The clear control as an ink cross in a 44 px target, not the blue disc (R10) */
.j-search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:44px;height:44px;margin:-10px 0 -10px 8px;cursor:pointer;background:var(--ink-2);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 1.5l9 9m0-9-9 9' stroke='black' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") center / 12px 12px no-repeat}
.j-search::-webkit-search-cancel-button:hover{background:var(--ink)}
@media (min-width:720px){.j-search-wrap{flex:0 1 22rem}}
/* 1024 up: topics 1-8, search on the column 9 edge of the standfirst and the row deks */
@media (min-width:1024px){
  .j-controls{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .j-filter{grid-column:1 / span 8}
  .j-search-wrap{grid-column:9 / span 4}
}
.j-list{border-top:var(--hair)}
.j-list > li[hidden]{display:none}
.j-empty{padding:28px 0 8px;font:400 var(--fs-body)/1.55 var(--sans);color:var(--ink-2)}

.j-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:6px;align-items:first baseline;padding:18px 0 20px;border-bottom:var(--hair);color:var(--ink);text-decoration:none}
.j-row__n{grid-column:1;font:500 var(--fs-mono)/1.6 var(--mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.j-row__meta{grid-column:2 / span 3;font:400 var(--fs-mono)/1.6 var(--mono);color:var(--ink-3)}
.j-row__cat{font-weight:500;color:var(--ink)}
.j-row__title{grid-column:5 / span 5;font:400 var(--fs-h3)/1.18 var(--serif);letter-spacing:-.01em;
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.14em;
  transition:text-decoration-color var(--t-fast) var(--ease)}
.j-row__dek{grid-column:10 / span 3;font:400 var(--fs-cap)/1.5 var(--sans);color:var(--ink-2)}
/* A mouse draws the title's rule line by line (core.css, One link language); touch keeps the underline */
@media (hover:none){.j-row:hover .j-row__title{text-decoration-color:var(--red)}}
.j-row:active .j-row__title{text-decoration-color:var(--red-deep)}
.j-row:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
/* The lead story: the first row, set as an opening spread (same markup and heading level) */
.j-row--lead{padding:clamp(24px,2.6vw,40px) 0 clamp(28px,3vw,44px)}
.j-row--lead .j-row__title{font:380 clamp(1.75rem,1.25rem + 2.2vw,3.25rem)/1.04 var(--serif-display);letter-spacing:-.018em}
.j-row--lead .j-row__dek{font:italic 400 var(--fs-dek)/1.36 var(--serif);color:var(--ink-2);max-width:32em}
@media (max-width:1023px){.j-row__meta,.j-row__title,.j-row__dek{grid-column:2 / -1}.j-row__dek{max-width:40em}}
/* From 1024 the meta stacks like a catalogue card (separators stay for screen readers); tracks
   2/2 . 4/5 . 9/4, so the dek shares the standfirst's column 9 edge */
@media (min-width:1024px){
  .j-list .j-row__meta{grid-column:2 / span 2}
  .j-list .j-row__meta > *{display:block}
  .j-list .j-row__meta > .j-row__sep{height:0;overflow:hidden}
  .j-list .j-row__title{grid-column:4 / span 5}
  .j-list .j-row__dek{grid-column:9 / span 4}
  .j-list .j-row--lead .j-row__title{grid-column:4 / span 8}
  .j-list .j-row--lead .j-row__dek{grid-column:4 / span 7;margin-top:var(--sp-3)}
}
@media (max-width:719px){
  .j-row{display:block;padding:14px 0 16px}
  .j-row__n{display:none}
  .j-row__meta{display:block}
  .j-row__title{margin-top:6px;font-size:1.3125rem}
  .j-row__dek{display:block;margin-top:6px}
}

/* ---------- 3.33 Article head ---------- */
.j-head{margin-bottom:clamp(40px,5vw,80px)}
.j-title{max-width:18em;font:360 var(--fs-h1)/.98 var(--serif-display);letter-spacing:-.024em;overflow-wrap:anywhere}
/* Phrases (title_html): kept whole where they fit; a longer one wraps inside itself, balanced */
.j-title__ph{display:inline-block}
.j-dek{margin-top:var(--sp-5);max-width:var(--measure-dek);font:italic 380 var(--fs-dek)/1.38 var(--serif);color:var(--ink-2);text-wrap:pretty}
/* Byline: one row, thumb beside name over role (the role never drops under the photo) */
.j-byline{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:12px;align-items:center;margin-top:clamp(22px,2.6vw,40px)}
.j-byline__img{width:48px;height:48px;grid-row:1 / span 2}
.j-byline__img img{object-fit:cover;object-position:50% 12%}
.j-byline .link{align-self:end;justify-self:start;font:500 1rem/1.35 var(--sans)}
.j-byline__role{align-self:start;font:400 var(--fs-mono)/1.45 var(--mono);color:var(--ink-3)}
@media (max-width:719px),(pointer:coarse){
  .j-byline .link{position:relative}
  .j-byline .link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44px}
}

/* Article grid (1024 up): the first spread is the headline 1-8 with In this article 9-12 beside it,
   both hanging from one ink rule; then prose 1-7 */
@media (min-width:1024px){
  .j-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .j-head{grid-column:1 / span 8;grid-row:1}
  .j-main{display:contents}
  .j-main > *{grid-column:1 / span 7}
  .j-main > .j-series,.j-main > .j-subscribe{grid-column:1 / -1}
}

/* 3.33 Prose. Measure 28em of the reading size (about 66-68 characters; 34em gave 83). Below 1024
   all end matter shares the column, so it has one right edge. */
.j-article{--j-col:calc(var(--fs-read) * 28)}
.j-prose{max-width:var(--j-col);font:400 var(--fs-read)/1.6 var(--serif);color:var(--ink)}
.j-faq,.j-cta,.j-cite,.j-article .j-series,.j-article .j-subscribe{max-width:var(--j-col)}
.j-prose > * + *{margin-top:1em}
.j-prose h2{margin:1.8em 0 .5em;font:400 var(--fs-h3)/1.15 var(--serif);letter-spacing:-.01em}
.j-prose > h2 + *{margin-top:0}
.j-prose h3{margin:1.5em 0 .35em;font:600 1.0625rem/1.35 var(--sans)}
.j-prose strong{font-weight:600}
.j-prose em{font-style:italic}
.j-prose a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:var(--rule-2);
  transition:text-decoration-color var(--t-fast),text-decoration-thickness var(--t-fast)}
.j-prose a:hover{text-decoration-color:var(--red);text-decoration-thickness:2px}
.j-prose a:active{text-decoration-color:var(--red-deep)}
.j-prose ul,.j-prose ol{display:grid;gap:.5em}
.j-prose li{position:relative;padding-left:1.15em}
.j-prose ul > li::before{content:"\2022";position:absolute;left:.1em;color:var(--ink-3)}
.j-prose ol{counter-reset:j-ol}
.j-prose ol > li{counter-increment:j-ol;padding-left:1.9em}
.j-prose ol > li::before{content:counter(j-ol) ".";position:absolute;left:0;top:.3em;font:400 var(--fs-mono)/1.45 var(--mono);color:var(--ink-3)}
/* Drop cap: three lines deep, ink. initial-letter where supported; a measured float elsewhere */
.j-prose > p:first-of-type::first-letter{float:left;margin:.1827em .08em 0 0;font-family:var(--serif-display);font-size:5.776em;font-weight:360;line-height:.631;color:var(--ink)}
@supports (initial-letter:3) or (-webkit-initial-letter:3){
  .j-prose > p:first-of-type::first-letter{float:none;margin:0 .04em 0 0;font-size:inherit;line-height:inherit;-webkit-initial-letter:3;initial-letter:3}
}
/* Pull quote: hanging open quote on an ink rule; never red */
.j-prose > .j-pull{margin:1.4em 0;padding-top:.6em;border-top:var(--rule-ink);font:italic 380 clamp(1.5rem,1.2rem + 1vw,2.125rem)/1.24 var(--serif);letter-spacing:-.01em;text-indent:-.42em;text-wrap:balance}
/* 1024 up: the reading lines keep the 28em measure; pull quotes and stats take the full seven
   columns, the quote at the testimonial size */
@media (min-width:1024px){
  .j-prose{max-width:none}
  .j-prose > *{max-width:var(--j-col)}
  .j-prose > .j-pull,.j-prose > .j-stats{max-width:none}
  .j-prose > .j-pull{font-size:var(--fs-quote)}
}
.j-pull::before{content:"\201C"}
.j-pull::after{content:"\201D"}
/* Stats: set as the findings table (3.14) */
.j-prose > .j-stats{margin:1.5em 0;border-top:var(--rule-ink)}
.j-stat{display:grid;grid-template-columns:minmax(0,36%) minmax(0,1fr);column-gap:16px;align-items:baseline;padding:13px 0 12px;border-bottom:var(--hair)}
.j-stat b{font:360 var(--fs-num)/1 var(--serif-display);letter-spacing:-.025em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.j-stat span{font:400 var(--fs-small)/1.45 var(--sans);color:var(--ink-2)}
@media (max-width:719px){.j-stat{grid-template-columns:6.8rem minmax(0,1fr);column-gap:12px}.j-stat span{font-size:.9375rem}}
/* Enlarged text: once figure and label no longer fit side by side, the label drops under its figure (never at 100%) */
.j-stats{container-type:inline-size}
@container (width < 12.75rem){.j-stat{grid-template-columns:minmax(0,1fr)}}
.j-prose > .j-note,.j-prose > .fig{margin:1.5em 0}

/* 3.33 In this article (1024 up): sticky, the current section marked by the scroll-spy */
.j-toc{display:none}
@media (min-width:1024px){
  /* The inner block is the sticky one, so it never sticks past the FAQ */
  .j-toc{display:block;grid-column:9 / -1;grid-row:1 / span 3}
  .j-toc__in{position:sticky;top:calc(var(--bar-h) + 32px);max-height:calc(100vh - var(--bar-h) - 64px);overflow-y:auto;padding-top:11px;border-top:var(--rule-ink)}
  .j-toc .meta{font-weight:500;color:var(--ink)}
  .j-toc ol{margin-top:12px}
  .j-toc a{position:relative;display:block;padding:7px 0 9px;border-bottom:1px solid var(--rule);font:400 .9375rem/1.4 var(--sans);color:var(--ink-2);text-decoration:none;transition:color var(--t-fast) var(--ease)}
  .j-toc a:hover{color:var(--ink)}
  .j-toc a[aria-current]{color:var(--ink)}
  /* The reading gauge (CORE-5): under each entry, on the column's hairline, a rule as long as its
     section against the longest (--w, written by the generator), so the lengths compare at a
     glance. The section being read fills in red along its rule as it is read (--p, journal.js);
     the ones above it are read, in ink. Pointing at an entry thickens its rule */
  .j-toc a::before,.j-toc a::after{content:"";position:absolute;left:0;bottom:-1px;width:calc(100% * var(--w,1));height:1px;background:var(--ink-3);transform-origin:0 100%;transition:transform var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
  .j-toc a::after{display:none;height:2px;background:var(--red);transform:scaleX(var(--p,0));transition:none}
  .j-toc a[aria-current]::after{display:block}
  .j-toc a.is-read::before{background:var(--ink)}
  .j-toc a:is(:hover,:focus-visible)::before{background:var(--ink);transform:scaleY(2)}
  /* Numbered entries hang the numeral in its own track, so a wrapped line starts under the text
     (in the sans a space is narrower than a figure, so a text-indent hang drifts) */
  .j-toc a.j-toc__hang{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.3em;align-items:baseline;align-content:center}
  .j-toc__n{font-variant-numeric:tabular-nums}
}
@media (min-width:1024px) and (pointer:coarse){.j-toc a{display:flex;align-items:center;min-height:44px;padding-block:8px}}

/* ---------- Article end matter: FAQ, CTA, cite, series ---------- */
.j-faq{margin-top:clamp(56px,6.5vw,104px)}
.j-faq > h2{margin-bottom:clamp(14px,1.4vw,20px)}
.j-cta{margin-top:clamp(48px,5vw,80px);padding:clamp(20px,2.6vw,36px);background:var(--paper-2);border-top:2px solid var(--ink)}
.j-cta p{margin-top:12px;max-width:var(--measure-ui);font:400 var(--fs-body)/1.6 var(--sans);color:var(--ink-2);text-wrap:balance}
.j-cta .btn{margin-top:24px}
.j-cite{margin-top:clamp(28px,3vw,40px);border-top:var(--hair);border-bottom:var(--hair)}
.j-cite summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:44px;padding:4px 0;list-style:none;cursor:pointer;font:500 var(--fs-mono)/1.4 var(--mono);color:var(--ink)}
.j-cite summary::-webkit-details-marker{display:none}
.j-cite summary::after{content:"";flex:none;width:13px;height:13px;background:linear-gradient(currentColor,currentColor) center / 13px 1px no-repeat,linear-gradient(currentColor,currentColor) center / 1px 13px no-repeat}
.j-cite[open] summary::after{background-size:13px 1px,1px 0}
.j-cite summary:hover,.j-cite summary:active{color:var(--red-deep)}
.j-cite p{max-width:46em;padding:2px 0 18px;font:400 var(--fs-mono)/1.6 var(--mono);color:var(--ink-2);overflow-wrap:anywhere}
.j-series{margin-top:clamp(64px,7vw,112px)}
.j-series > .meta{padding-top:11px;border-top:var(--rule-ink);font-weight:500;color:var(--ink)}
.j-series__list{margin-top:8px;border-top:var(--hair)}
.j-row--compact{display:block;padding:14px 0 16px}
.j-row--compact .j-row__meta{display:block}
.j-row--compact .j-row__title{display:block;margin-top:4px;font:400 var(--fs-h4)/1.25 var(--serif);letter-spacing:-.005em;text-wrap:balance}
/* An arrow link as everywhere (core .link > .arw), with a 44 px band (R13) */
.j-series__all{position:relative;display:inline-block;margin-top:24px;font:500 var(--fs-small)/1.3 var(--sans)}
.j-series__all::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
/* 1024 up: the index row grid, meta stacked in 2-3, title from 4 (R11) */
@media (min-width:1024px){
  .j-article .j-series,.j-article .j-subscribe{max-width:none}
  .j-row--compact{display:grid;padding:16px 0 18px}
  .j-row--compact .j-row__meta{grid-column:2 / span 2}
  .j-row--compact .j-row__meta > *{display:block}
  .j-row--compact .j-row__meta > .j-row__sep{height:0;overflow:hidden}
  .j-row--compact .j-row__title{grid-column:4 / span 5;margin-top:0}
}

/* ---------- 3.31 Subscribe ---------- */
.j-subscribe{margin-top:clamp(64px,7vw,112px);padding-top:clamp(16px,1.6vw,22px);border-top:var(--rule-ink)}
.j-subscribe > p{margin-top:10px;max-width:34em;font:400 var(--fs-small)/1.6 var(--sans);color:var(--ink-2)}
.j-subscribe__form{display:grid;gap:20px;margin-top:24px}
.j-subscribe__form .btn{justify-self:start}
.j-subscribe > .j-subscribe__msg{margin-top:16px;max-width:none;font:400 var(--fs-cap)/1.5 var(--sans);color:var(--ink)}
/* The error shows under the field (3.28); the status line keeps the text for the announcement only */
.j-subscribe__msg[data-state="error"]{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.j-subscribe__msg[data-state="warn"]{padding:10px 14px;background:var(--paper-2);border-left:2px solid var(--ink)}
@media (min-width:720px){
  .j-subscribe__form{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--gutter)}
  .j-subscribe__form .btn{grid-column:1 / -1}
}
@media (min-width:1024px){
  /* Text 1-5, form 7-12; the form's extra height goes to the third row */
  .j-subscribe{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto 1fr auto;column-gap:var(--gutter)}
  .j-subscribe > h2{grid-column:1 / span 5;grid-row:1}
  .j-subscribe > p{grid-column:1 / span 5;grid-row:2}
  .j-subscribe__form{grid-column:7 / -1;grid-row:1 / span 3;margin-top:0}
  .j-subscribe > .j-subscribe__msg{grid-column:7 / -1;grid-row:4}
}

/* 3.34 Reading progress (articles only; never under reduced motion) */
.j-progress{display:none}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    /* + 1px: the bar's own hairline sits on its last pixel row and would hide half the line */
    .j-progress{display:block;position:fixed;left:0;right:0;top:calc(var(--bar-h) + 1px);height:2px;z-index:var(--z-progress);background:var(--red);transform-origin:0 50%;transform:scaleX(0);animation:j-grow linear both;animation-timeline:scroll(root)}
    @keyframes j-grow{to{transform:scaleX(1)}}
  }
  /* The line measures the prose, not the page: empty as the first paragraph meets the bar, full as
     the last line meets the bottom of the screen (M6). scroll(root) stays the fallback */
  @supports (timeline-scope:--p){
    html{timeline-scope:--prose}
    .j-prose{view-timeline:--prose block;view-timeline-inset:calc(var(--bar-h) + 3px) 0}
    .j-progress{animation-timeline:--prose;animation-range:contain 0% contain 100%}
  }
}