/* Research article pages (research/*.html). Tokens from tokens.css, shared chrome from
   site.css; the base header rules mirror tools.css so every secondary page matches.
   Each article sets --art-light on <body>, the same colour its research card uses in
   contours.css; the card's contour strokes (assets/contours/research-*-flow.svg) are drawn
   over the art in that colour by assets/article.js, as they are on the card. */
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
header{position:sticky;top:0;z-index:100}
.wrap,.wrap-nav{max-width:var(--container-wide);margin:0 auto;padding:0 var(--gutter-wide)}
.header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:var(--space-6)}
.logo{display:inline-flex;align-items:center;justify-self:start;text-decoration:none}
.logo img{height:1.125rem;width:auto;filter:invert(1)}
nav.primary,.nav-links{display:flex;align-items:center}
.nav-links a{color:var(--body);text-decoration:none;font-size:var(--text-sm)}
.header-inner>.btn-pill{justify-self:end}
.btn-pill{background:var(--lavender);color:var(--on-accent);font:600 var(--text-sm) var(--sans);border:0;text-decoration:none;white-space:nowrap;gap:var(--space-2)}
.btn-pill .icon{background:rgb(var(--c-carbon) / .08);display:grid;place-items:center;border-radius:50%}
.btn-pill svg{width:.8125rem;height:.8125rem}

/* The card image grows into the hero when the browser supports cross-page transitions. */
@view-transition{navigation:auto}
::view-transition-old(article-hero),::view-transition-new(article-hero){height:100%;object-fit:cover;overflow:hidden}
::view-transition-group(article-hero){animation-duration:.6s;animation-timing-function:cubic-bezier(.22,1,.36,1)}

.article{--measure:40rem;padding:var(--space-16) var(--gutter) 0}
.a-back{max-width:72rem;margin:0 auto var(--space-6)}
.a-head{max-width:48rem;margin:0 auto;text-align:center}
.a-crumb{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--hit-min);color:var(--body);font-size:var(--text-sm);text-decoration:none;transition:color var(--dur) ease}
.a-crumb svg{width:.875rem;height:.875rem;transition:transform var(--dur) ease}
.a-crumb:hover{color:var(--ink)}
.a-crumb:hover svg{transform:translateX(-2px)}
/* The article's kind, lowercase in the display face, lit in the article's two colours. */
.a-kicker{display:inline-block;margin-bottom:var(--space-4);font:500 var(--text-base)/1.2 var(--display);letter-spacing:.06em;text-transform:lowercase;
  background:linear-gradient(90deg,rgb(var(--art-light)),rgb(var(--art-light-2)));-webkit-background-clip:text;background-clip:text;color:transparent}
/* Tags read like database tags: small, flat, softly squared, one muted fill per category. */
.a-tags{display:flex;flex-wrap:wrap;gap:var(--space-1);list-style:none}
.tag{display:inline-flex;align-items:center;height:1.375rem;padding:0 .4375rem;border-radius:.1875rem;background:var(--tag,#373737);
  color:rgb(var(--c-white) / .82);font:400 .8125rem/1 var(--sans);white-space:nowrap}
.tag[data-cat="Training"]{--tag:#28456C}
.tag[data-cat="Nutrition"]{--tag:#854C1D}
.tag[data-cat="Recovery"]{--tag:#2B593F}
.tag[data-cat="Methodology"]{--tag:#492F64}
.a-head h1{font:500 clamp(2rem,4.4vw,3.25rem)/1.12 var(--display);letter-spacing:-.015em;text-wrap:balance}
.a-dek{max-width:var(--measure);margin:var(--space-6) auto 0;color:var(--body);font-size:clamp(1.0625rem,1.6vw,1.25rem);line-height:1.6;text-wrap:pretty}
.a-meta{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:var(--space-2) var(--space-3);margin-top:var(--space-6);color:var(--body);font-size:var(--text-sm)}
.a-meta>span+span::before,.a-meta .a-tags+span::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:currentColor;vertical-align:middle;margin-right:var(--space-3);opacity:.6}

/* Hero: the card art; on arrival its colour runs along the contour lines. */
.a-hero{position:relative;max-width:72rem;margin:var(--space-12) auto 0;isolation:isolate}
.a-hero::before{content:"";position:absolute;inset:8% 4% -14%;z-index:-1;pointer-events:none;filter:blur(3.5rem);opacity:.55;
  background:radial-gradient(ellipse at 50% 60%,rgb(var(--art-light) / .55),rgb(var(--art-light) / .12) 55%,transparent 75%)}
.a-art{position:relative;aspect-ratio:16/9;border-radius:var(--radius-xl);overflow:hidden;background:var(--surface);view-transition-name:article-hero}
.a-art picture{position:absolute;inset:0}
.a-color,.m-color{position:absolute;inset:0;pointer-events:none;overflow:hidden;color:rgb(var(--art-light));opacity:.24}
.a-color .contour-flow,.m-color .contour-flow{display:block;width:100%;height:100%;filter:drop-shadow(0 0 3px rgb(var(--art-light) / .7))}
.a-color .contour-flow path,.m-color .contour-flow path{stroke:var(--flow-stroke,currentColor);stroke-width:var(--line-weight);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .45s ease,opacity .45s ease}
.is-drawn .contour-flow path{stroke-dashoffset:0;opacity:1;transition:stroke-dashoffset 1.5s cubic-bezier(.3,.05,.15,1) var(--stroke-delay),opacity .2s ease var(--stroke-delay)}
.a-art img{width:100%;height:100%;object-fit:cover;display:block}
/* One continuous wash of the article's colours over the art, so the hero reads as a
   single gradient with its coloured lines. */
.a-wash{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(ellipse 80% 70% at 50% 100%,rgb(var(--art-light) / .26),transparent 70%),linear-gradient(120deg,rgb(var(--art-light) / .16),rgb(var(--art-light-2) / .12) 55%,rgb(var(--art-light-2) / .03))}
.a-art::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgb(var(--c-white) / .08)}
.a-credit{margin-top:var(--space-3);font:400 .6875rem/1.65 var(--sans);color:#89919a}
.a-credit a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.a-more .a-credit{margin-top:var(--space-6)}
.a-hero::before{animation:aGlow 1.8s ease .25s both}
@keyframes aGlow{from{opacity:0}to{opacity:.55}}

/* Long-form body. Every piece uses these rules, so pieces added later read the same. */
.prose{max-width:var(--measure);margin:var(--space-16) auto 0;color:color-mix(in srgb,var(--ink) 45%,var(--body));font-size:1.0625rem;line-height:1.75}
.prose>*+*{margin-top:1.25em}
.prose h2{font:500 clamp(1.25rem,2.2vw,1.5rem)/1.3 var(--display);letter-spacing:-.01em;color:var(--ink);margin-top:2.4em}
.prose h3{font:600 1.1875rem/1.35 var(--sans);color:var(--ink);margin-top:2em}
.prose h2+*,.prose h3+*{margin-top:.75em}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:rgb(var(--art-light) / .6);text-underline-offset:.2em;text-decoration-thickness:1px}
.prose a:hover{text-decoration-color:rgb(var(--art-light))}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:.5em}
.prose li::marker{color:rgb(var(--art-light))}
.prose blockquote{padding:var(--space-1) 0 var(--space-1) var(--space-6);border-left:2px solid rgb(var(--art-light) / .7);color:var(--ink);font-size:1.1875rem;line-height:1.6}
.prose figure img{width:100%;height:auto;border-radius:var(--radius-lg);display:block}
.prose figcaption{margin-top:var(--space-3);font-size:var(--text-sm);color:var(--body)}
.prose hr{border:0;height:1px;background:var(--hairline);margin:3em 0}
.prose .a-summary{padding:var(--space-6);border-radius:var(--radius-lg);background:var(--surface);color:var(--body)}
.prose .a-summary h2{margin:0 0 var(--space-2);font-family:var(--sans);font-size:var(--text-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}

/* Until the full piece is out, this notice closes the page. */
.a-notice{max-width:var(--measure);margin:var(--space-16) auto 0;padding:var(--space-8);border-radius:var(--radius-xl);background:var(--surface);text-align:center;position:relative;overflow:hidden;isolation:isolate}
.a-notice::before{content:"";position:absolute;inset:auto -20% -60% -20%;height:120%;z-index:-1;background:radial-gradient(ellipse at 50% 100%,rgb(var(--art-light) / .18),transparent 60%)}
.a-notice h2{font:500 var(--text-xl)/1.3 var(--display);color:var(--ink)}
.a-notice p{margin:var(--space-2) auto var(--space-6);max-width:34ch;color:var(--body);line-height:1.6}
.a-notice .btn-pill{min-height:var(--hit-min);padding:0 var(--space-6)}

.a-more{max-width:72rem;margin:var(--space-24) auto 0;padding-top:var(--space-10);border-top:1px solid var(--hairline)}
.a-more h2{font:500 var(--text-xl) var(--display);margin-bottom:var(--space-6)}
.a-more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.m-card{display:block;color:inherit;text-decoration:none;border-radius:var(--radius-lg);outline-offset:4px}
.m-art{position:relative;aspect-ratio:16/10;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.m-art img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) brightness(.8);transition:filter 1.1s ease}
/* Thumbnails rest in monochrome and take their colour with the strokes, as the cards do. */
.m-card.is-drawn .m-art img{filter:none}
.m-card .a-tags{margin:var(--space-4) 0 var(--space-2)}
.m-card .tag{height:1.25rem;font-size:.75rem}
.m-card h3{font:600 var(--text-lg)/1.35 var(--sans);color:var(--ink)}

.article-footer{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);flex-wrap:wrap;margin-top:var(--space-20);border-top:1px solid var(--hairline);padding-top:var(--space-6);padding-bottom:var(--space-8);font-size:var(--text-sm);color:var(--body)}
.article-footer div{display:flex;gap:var(--space-5)}
.article-footer a{color:var(--body);text-decoration:none;min-height:var(--hit-min);display:inline-flex;align-items:center}
.article-footer a:hover{color:var(--ink)}

@media(max-width:820px){
  .article{padding-top:var(--space-10)}
  .a-hero{margin-top:var(--space-8)}
  .a-art{aspect-ratio:704/484;border-radius:var(--radius-lg)}
  .prose,.a-notice{margin-top:var(--space-10)}
  .a-notice{padding:var(--space-6)}
  .a-more{margin-top:var(--space-16)}
  .a-more-grid{grid-template-columns:1fr;gap:var(--space-8)}
}

/* look 25: the card's image carries over as is, with the card's refraction lens under the
   pointer; the contour strokes and the colour wash are gone. Category chips a step darker. */
.a-art .refract-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s ease}
.a-art.is-refracting .refract-canvas{opacity:1}
.a-art picture img{width:100%;height:100%;object-fit:cover;display:block}
.tag{background:var(--tag,#262626)}
.tag[data-cat="Training"]{--tag:#1c3150}
.tag[data-cat="Nutrition"]{--tag:#5a3313}
.tag[data-cat="Recovery"]{--tag:#1d3f2c}
.tag[data-cat="Methodology"]{--tag:#33204a}
/* round 12: grey to colour as the card arrives, and on hover; the art eases in a touch larger */
.m-art img{transform:scale(1.06);transition:filter 1.1s cubic-bezier(.22,1,.36,1),transform 1.4s cubic-bezier(.22,1,.36,1)}
.m-card.is-drawn .m-art img,.m-card:hover .m-art img{filter:none;transform:none}
.m-card h3{margin-top:var(--space-4)}

/* round 10 (captain 2026-10-19): the head reads like the start of an article, left-aligned on the reading column
   and a size smaller, with only the back link above it (no kind tag) and the date under the dek */
.a-back{max-width:var(--measure)}
.a-head{max-width:var(--measure);text-align:left}
.a-head h1{font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.15;text-wrap:pretty}
.a-dek{margin-left:0;margin-right:0;font-size:clamp(1.0625rem,1.4vw,1.1875rem)}
.a-meta{justify-content:flex-start}
/* More research rests in grey; under the pointer its colour fills in gradually (captain 2026-10-19: "the colour
   should start filling in gradually on hover"), and drains back out when the pointer leaves */
.m-art img,.m-card.is-drawn .m-art img{filter:grayscale(1) brightness(.8)!important}
.m-art img{transition:filter 1.6s cubic-bezier(.4,0,.2,1),transform 1.6s cubic-bezier(.22,1,.36,1)!important}
@media(hover:hover){.m-card:hover .m-art img{filter:grayscale(0) brightness(1)!important;transform:scale(1.03)}}
/* a shorter piece's hero runs full width; a long read's (.is-compact) is smaller, so the words lead (captain
   2026-10-19: the algorithm article's hero "is too big") */
.a-hero.is-compact{max-width:min(48rem,100%);margin-top:var(--space-10)}
/* sources under a section, and a comparison table that scrolls sideways on a narrow screen */
.prose .a-sources{font-size:var(--text-sm);line-height:1.6;color:var(--body)}
.prose .a-sources>span{display:block;margin-bottom:var(--space-2);font-weight:600;color:var(--ink)}
.prose p.a-sources>span{display:inline;margin:0 .375rem 0 0}
.prose .a-sources ol{padding-left:1.25em}
.prose .a-sources li+li{margin-top:.25em}
/* figures and tables keep to the reading column (captain 2026-10-30: "never wider than the actual text"); a wide table scrolls */
.prose .a-table{overflow-x:auto}
.prose :is(figure,img,video){max-width:100%}
.prose table{width:100%;min-width:52rem;border-collapse:collapse;font-size:var(--text-sm);line-height:1.45}
.prose th,.prose td{padding:.625rem .75rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--hairline)}
.prose thead th{color:var(--ink);font-weight:600}
.prose tbody th{color:var(--ink);font-weight:600;white-space:nowrap}

/* The piece opens like YouTube Music's player (captain 2026-10-30: "it puts the title ... still visible ... It feels
   full-screenified ... the actual article ... very readable still with no like glows behind ... slightly shaded, the
   color that is that image"), then round 2: "I would like the image to end a little bit before the text ... I don't want
   to see the text be kind of obstructed by the image behind it". The hero runs edge to edge from the top of the screen,
   under the nav, and falls fully into the page by its foot; the title, dek and date start just below it, so no picture
   can ever sit behind the words. The page's colour is the picture's own (--page-h/--page-s from article.js, the
   article's colour until then), dark or light by the reader's choice (the toggle, data-reading on <html>).
   A grid lays it out, so the pieces keep their markup. */
.article-page{--page-h:212;--page-s:34%;--page:hsl(var(--page-h) calc(var(--page-s) * .2) 8%);--hero-h:clamp(22rem,58svh,40rem);
  background:var(--page)}
.article{display:grid;padding:0;grid-template-columns:[full-start] minmax(var(--gutter),1fr) [wide-start] minmax(0,16rem) [col-start] min(var(--measure),100% - 2 * var(--gutter)) [col-end] minmax(0,16rem) [wide-end] minmax(var(--gutter),1fr) [full-end]}
.article>*{grid-column:col;min-width:0}
.article>.a-more{grid-column:wide}
.article>:is(.a-back,.a-hero){grid-row:1}
.article>.a-head{grid-row:2}
.a-hero,.a-hero.is-compact{grid-column:full;position:relative;max-width:none;margin:calc(-1 * var(--header-h)) 0 0;height:var(--hero-h);display:flex}
.a-hero.is-compact{--hero-h:clamp(20rem,48svh,34rem)}
.a-hero::before,.a-notice::before{display:none}
.a-art{flex:1;aspect-ratio:auto;background:var(--page)}
.a-art picture{inset:0}
/* the picture falls into the page: a little darker under the nav, clear through its middle, the page's colour by its foot */
.a-art::after{z-index:2;box-shadow:none;background:linear-gradient(rgb(0 0 0 / .38),transparent 22%,transparent 46%,color-mix(in oklab,var(--page) 70%,transparent) 76%,var(--page) 97%)}
/* the back link and the reading toggle ride over the picture on a small frosted chip, legible on any picture (captain
   2026-10-30: "the back button ... needs to have some sort of like anti-color ... so that you can always see it") */
.a-back{align-self:start;z-index:3;margin:var(--space-6) 0 0;max-width:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-3)}
.a-crumb,.a-reading{color:#f4f7fa;background:rgb(10 12 16 / .46);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 .25rem 1rem -.5rem rgb(0 0 0 / .5)}
.a-crumb{min-height:2.5rem;padding:0 1rem 0 .75rem}
.a-crumb:hover{color:#fff}
/* Dark | Light on the site's one segmented knob (assets/elastic-knob.js, as Monthly | Yearly and Meet Tora's tabs:
   captain 2026-10-30, "a smooth toggle ... the toggles are super fun") */
.a-reading{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:.25rem}
.a-reading button{position:relative;z-index:1;display:grid;place-items:center;min-width:2.75rem;height:2rem;padding:0 .875rem;border:0;background:none;
  color:rgb(244 247 250 / .78);font:500 var(--text-sm)/1 var(--sans);cursor:pointer;transition:color .2s ease}
.a-reading button[aria-checked="true"]{color:#0b0d10}
.a-reading button:focus-visible{outline:2px solid #f4f7fa;outline-offset:1px}
.a-reading-knob{position:absolute;left:.25rem;top:.25rem;bottom:.25rem;width:calc(50% - .25rem);background:linear-gradient(180deg,#f7fafc,#e0e8ee);
  box-shadow:inset 0 1px 0 #fff,0 .375rem 1rem -.375rem rgb(0 0 0 / .6)}
.a-reading.has-knob .a-reading-knob{top:0;left:0;bottom:auto;will-change:transform,width}
.a-reading.has-ink .a-reading-knob{z-index:2;overflow:hidden}
.a-reading.has-ink button[aria-checked="true"]{color:rgb(244 247 250 / .78)}
.a-reading-knob .knob-ink{position:absolute;left:0;top:0;will-change:transform}
.a-reading-knob .knob-ink span{position:absolute;display:grid;place-items:center;white-space:nowrap;font:500 var(--text-sm)/1 var(--sans);color:#0b0d10}
.a-reading svg{width:1rem;height:1rem}
.a-head{position:relative;z-index:3;max-width:none;margin-top:var(--space-2)}
.a-head h1{font-size:clamp(2rem,3.8vw,3rem);line-height:1.08;text-wrap:balance}
.a-dek{color:color-mix(in srgb,var(--ink) 86%,var(--page))}
.a-meta{color:color-mix(in srgb,var(--ink) 66%,var(--page))}
/* the author on a line of their own above the date (captain 2026-10-30: "I'm okay to share my name and show people that
   I've ... written it"), the name in the text's own ink; no dot between the two */
.a-meta .a-by{flex-basis:100%}
.a-meta .a-by b{font-weight:500;color:var(--ink)}
.a-meta .a-by+span::before{display:none}
/* the words a little lighter than before, never pure white (captain 2026-10-30: "the text is a little bit too dull") */
.prose{margin-top:var(--space-12);color:color-mix(in srgb,var(--ink) 74%,var(--body))}
.a-notice,.prose .a-summary,.prose .a-related{background:color-mix(in oklab,var(--page) 82%,#fff 6%)}
/* a related piece where the text names it (captain 2026-10-30: "where we say auto-load ... a little thing that says
   related articles and it goes to autoload"): one card in the text column, the picture, what it is, an arrow */
.prose .a-related{display:flex;align-items:center;gap:1rem;margin:var(--space-6) 0;padding:.75rem 1.25rem .75rem .75rem;text-decoration:none;color:var(--body);
  font-size:var(--text-sm);line-height:1.45;transition:background .2s ease}
.prose .a-related img{flex:none;width:4.5rem;height:4.5rem;object-fit:cover;object-position:50% 61%}
.prose .a-related span{flex:1;min-width:0;display:grid;gap:.125rem}
.prose .a-related small{font:500 var(--text-xs)/1.4 var(--sans);color:color-mix(in srgb,var(--ink) 55%,var(--page))}
.prose .a-related b{font:500 var(--text-base)/1.3 var(--sans);color:var(--ink)}
.prose .a-related>svg{flex:none;width:1rem;height:1rem;color:color-mix(in srgb,var(--ink) 66%,var(--page));transition:translate .3s cubic-bezier(.3,.9,.3,1.2)}
.prose .a-related:hover>svg,.prose .a-related:focus-visible>svg{translate:.1875rem 0}

@media(max-width:820px){
  .article-page{--hero-h:max(18rem,46svh)}
  .a-hero.is-compact{--hero-h:max(16rem,40svh)}
  .a-back{margin-top:var(--space-4)}
  .a-head h1{font-size:clamp(1.75rem,8vw,2.25rem)}
  .a-head{margin-top:var(--space-6)}
  .prose{margin-top:var(--space-8)}
}
/* Light reading (captain 2026-10-30: "having a little light and dark mode ... toggle, is important for research"): the
   same picture and layout on a pale page in the picture's hue, dark words. */
/* dark reading is a dark grey with a trace of the picture's hue (round 12, captain 2026-10-31: "for the dark mode, it's a
   little bit too blue ... a little bit more gray-esque, like darker gray. So it's like easier to read") */
html:has(body.article-page){background:hsl(var(--page-h,212) calc(var(--page-s,34%) * .2) 8%)}
html[data-reading="light"]:has(body.article-page){background:hsl(var(--page-h,212) calc(var(--page-s,34%) * .5) 96%)}
html[data-reading="light"] .article-page{--page:hsl(var(--page-h) calc(var(--page-s) * .5) 96%)}
/* only the piece itself turns light; the site's header stays exactly as it is in dark (captain 2026-10-30) */
html[data-reading="light"] :is(.article,.article-footer){--ink:#11161c;--body:#4b545e;--surface:#fff;--hairline:rgb(17 22 28 / .1);color:var(--ink)}
html[data-reading="light"] .a-notice,html[data-reading="light"] .prose .a-summary,html[data-reading="light"] .prose .a-related{background:color-mix(in oklab,var(--page) 70%,#fff)}
html[data-reading="light"] .a-notice .btn-pill{background:#11161c;color:#f4f7fa}
html[data-reading="light"] .article-footer a:hover{color:var(--ink)}
html[data-reading="light"] .bottom-blur::after{background:linear-gradient(transparent,rgb(255 255 255 / .4))}
@media(prefers-reduced-motion:reduce){.article-page{transition:none}}

/* Arriving from a research card (captain 2026-10-30: "the image scales ... the title ... it's like it's going through the
   glass coming forward to us ... warps a little bit that image, and then it comes in"). The picture grows from the card
   straight into its place in one motion (captain 2026-10-30: "It shouldn't do two motions"; round 3 had it fill the
   screen first and then settle back, which read as two). The picture ripples once as it lands (the #a-glass
   displacement started by the head script); the old card's picture is not drawn over the new one, so the ripple shows
   on one clean image. The title then comes in a word at a time, each out of a blur, in place (article.js; round 9:
   "one word at a time as a blur ... super smooth, really clean"); until it is split into words it waits, and if the
   script never runs it shows anyway. */
html.a-js .a-head h1:not(.words){opacity:0;animation:a-show 0s 1.6s forwards}
@keyframes a-show{to{opacity:1}}
.a-head h1 .w{display:inline-block}
html.vt-arrive::view-transition-old(article-hero){animation:none;opacity:0}
html.vt-arrive::view-transition-group(article-hero){animation-duration:.75s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
/* the article's words wait until the picture is most of the way in, then come up under it as it settles */
html.vt-arrive::view-transition-new(root){animation:tora-page-in .45s cubic-bezier(.16,1,.3,1) .4s both}
html.vt-arrive::view-transition-new(article-hero){animation:none;filter:url(#a-glass)}
/* switching Dark and Light: one even crossfade of the page (a third of a second), the header and the switch's light pill
   held live and still; the browser holds clicks for that moment, so a fast run of flips never leaves the page half
   switched. Only the pill takes a name, not the whole switch: a named element is captured on its own, where its frost
   has nothing behind it, and the switch showed as a square dark box for a moment (captain 2026-10-30: "a black outline
   around the toggle"). The rest of the switch is the same in both modes, so the crossfade leaves it as it is. */
html.reading-switch .a-reading-knob{view-transition-name:a-reading-knob}
html.reading-switch::view-transition-group(a-reading-knob),html.reading-switch::view-transition-new(a-reading-knob){animation:none}
html.reading-switch::view-transition-old(a-reading-knob){display:none}
/* the hero keeps its own transition name for the card-to-article opening; for the switch it is part of the page's one
   picture, or its separate snapshot shows its cropped edge as a hard line for a moment (captain 2026-10-30, round 5) */
html.reading-switch .a-art{view-transition-name:none}
/* the two pages add up (the browser's own crossfade blend, which a custom animation drops): blended normally, the light
   page's ground showed through halfway and washed the dark picture grey */
html.reading-switch::view-transition-image-pair(root){isolation:isolate}
html.reading-switch::view-transition-old(root){animation:a-fade-out .32s ease both;mix-blend-mode:plus-lighter}
html.reading-switch::view-transition-new(root){animation:a-fade-in .32s ease both;mix-blend-mode:plus-lighter}
@keyframes a-fade-out{to{opacity:0}}
@keyframes a-fade-in{from{opacity:0}}
@media(prefers-reduced-motion:reduce){::view-transition-new(article-hero){filter:none}}
/* Into a piece from Up next (round 9; article.js picks A or B for the tab, the head script reads it on arrival). The
   leaving page lets go of its picture's name, so the two pages move as wholes. A: the title carries from the queue into
   the new piece's title while the pages crossfade. B: a track change, the piece leaving upward into a blur as the next
   rises out of one. */
html:is(.vt-leave-a,.vt-leave-b,.vt-next-a,.vt-next-b) .a-art{view-transition-name:none}
html.vt-next-a .a-head h1{view-transition-name:up-next-title}
html.vt-next-a::view-transition-group(up-next-title){animation-duration:.75s;animation-timing-function:cubic-bezier(.22,1,.36,1)}
html.vt-next-a::view-transition-old(up-next-title){animation:a-fade-out .3s ease both}
html.vt-next-a::view-transition-new(up-next-title){animation:a-fade-in .45s ease .15s both}
html.vt-next-a::view-transition-old(root){animation:a-next-out .4s cubic-bezier(.4,0,.6,1) both}
html.vt-next-a::view-transition-new(root){animation:tora-page-in .55s cubic-bezier(.16,1,.3,1) .12s both}
html.vt-next-b::view-transition-old(root){animation:a-track-out .45s cubic-bezier(.5,0,.75,0) both}
html.vt-next-b::view-transition-new(root){animation:a-track-in .75s cubic-bezier(.2,.9,.25,1) .18s both}
@keyframes a-next-out{to{opacity:0;filter:blur(8px)}}
@keyframes a-track-out{to{opacity:0;transform:translateY(-4vh) scale(.985);filter:blur(10px)}}
@keyframes a-track-in{from{opacity:0;transform:translateY(6vh);filter:blur(12px)}}
@media(prefers-reduced-motion:reduce){html:is(.vt-next-a,.vt-next-b)::view-transition-old(root),html:is(.vt-next-a,.vt-next-b)::view-transition-new(root){animation:none}}

/* ---- Round 4: the piece's tools, contents, chapter bar, citations, references and related articles (article.js) ---- */
.a-tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:var(--space-5)}
.a-tool{display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;padding:0 .875rem;border:0;cursor:pointer;
  background:color-mix(in srgb,var(--ink) 8%,transparent);color:color-mix(in srgb,var(--ink) 86%,transparent);font:500 var(--text-sm)/1 var(--sans);transition:background .2s ease,color .2s ease}
.a-tool:hover,.a-tool[aria-expanded="true"]{background:color-mix(in srgb,var(--ink) 14%,transparent);color:var(--ink)}
.a-tool svg{width:1rem;height:1rem;flex:none}
/* Share (round 5): the networks' own round icons in a row, then Copy link and More options, as in iOS's share sheet.
   The panel's padding and its rows' corners are the menu role in shape.css. */
.a-share{position:relative}
.a-menu{position:absolute;left:0;top:calc(100% + .5rem);z-index:20;width:max-content;max-width:calc(100vw - 2 * var(--gutter));transform-origin:1.5rem 0;
  background:color-mix(in srgb,var(--ink) 9%,var(--page));box-shadow:0 1.25rem 3rem -1.25rem rgb(0 0 0 / .6)}
.a-apps{display:flex;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}
.a-apps::-webkit-scrollbar{display:none}
.a-app{flex:none;display:grid;justify-items:center;gap:.5rem;width:4.25rem;padding:.625rem 0 .625rem;text-decoration:none;font:500 .75rem/1 var(--sans);color:color-mix(in srgb,var(--ink) 74%,var(--page))}
/* the icons a little smaller than iOS's (captain 2026-10-30: "make the icons ... just a little bit smaller") */
.a-app i{display:grid;place-items:center;width:2.625rem;height:2.625rem;border-radius:50%;background:var(--app);color:#fff;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .14)}
.a-app i svg{width:1.1875rem;height:1.1875rem}
.a-app:hover span,.a-app:focus-visible span{color:var(--ink)}
.a-app:focus-visible{outline:0}
.a-app:focus-visible i{outline:2px solid var(--ink);outline-offset:2px}
.a-rows{margin-top:.25rem}
.a-menu-row{display:flex;align-items:center;gap:.75rem;width:100%;min-height:2.75rem;padding:0 .875rem;border:0;background:none;cursor:pointer;text-align:left;
  color:var(--ink);font:500 var(--text-sm)/1.2 var(--sans);transition:background .2s ease}
.a-menu-row svg{width:1.125rem;height:1.125rem;flex:none;color:color-mix(in srgb,var(--ink) 66%,var(--page))}
.a-menu-row:hover,.a-menu-row:focus-visible{background:color-mix(in srgb,var(--ink) 9%,transparent);outline:0}
/* the contents, under the head */
.a-toc{margin-top:var(--space-10)}
.a-toc-label{margin:0 0 var(--space-3);font:500 var(--text-sm)/1 var(--sans);color:color-mix(in srgb,var(--ink) 62%,var(--page))}
.a-toc ol,.a-chapter-list{list-style:none;margin:0}
.a-toc ol{padding:0}
.a-toc a{display:flex;gap:.875rem;align-items:baseline;padding:.4rem 0;color:color-mix(in srgb,var(--ink) 84%,var(--page));text-decoration:none;font-size:var(--text-base);line-height:1.4}
.a-toc a:hover{color:var(--ink)}
.a-toc a span{flex:none;width:1.75rem;font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--ink) 55%,var(--page))}
/* the chapter pill (round 5): under the nav, in line with the text's left edge (--col-x, article.js). article.js grows
   it out of a glass dot, folds it back, and blur-flips its number and title; at rest it is just this. */
.a-chapter{position:fixed;left:var(--col-x,var(--gutter));top:calc(var(--header-h) + .5rem);z-index:90;visibility:hidden;pointer-events:none}
.a-chapter.on{visibility:visible}
.a-chapter.on .a-chapter-btn,.a-chapter.on .a-chapter-list{pointer-events:auto}
.a-chapter-btn{display:flex;align-items:center;gap:.625rem;height:2.5rem;max-width:min(32rem,calc(100vw - var(--col-x,var(--gutter)) - var(--gutter)));padding:0 .875rem 0 .8125rem;
  overflow:hidden;white-space:nowrap;border:0;cursor:pointer;transform-origin:1.25rem 50%;
  color:#f4f7fa;background:rgb(12 14 18 / .66);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08),0 .5rem 1.5rem -.75rem rgb(0 0 0 / .6);font:500 var(--text-sm)/1 var(--sans)}
.a-chapter-n{flex:none;position:relative;font-variant-numeric:tabular-nums;color:rgb(244 247 250 / .6)}
.a-chapter-t{position:relative;min-width:0;overflow:hidden;text-overflow:ellipsis;padding-block:.375em;margin-block:-.375em}
.a-chapter-btn>svg{width:1rem;height:1rem;flex:none;color:rgb(244 247 250 / .7);transition:rotate .35s cubic-bezier(.3,.9,.3,1.1)}
.a-chapter.open .a-chapter-btn>svg{rotate:180deg}
.a-chapter .ch{display:inline-block;white-space:pre}
.a-chapter .flip-out{position:absolute;left:0;top:0;white-space:pre}
.a-chapter-t>.flip-out{top:.375em}
.a-chapter-t.flipping{text-overflow:clip}
.a-chapter-list{position:absolute;left:0;top:calc(100% + .5rem);width:max-content;min-width:17rem;max-width:min(30rem,calc(100vw - var(--col-x,var(--gutter)) - var(--gutter)));max-height:60vh;overflow:auto;transform-origin:1.25rem 0;
  background:rgb(30 34 41 / .94);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 1rem 2.5rem -1rem rgb(0 0 0 / .7)}
.a-chapter-list li{position:relative;z-index:1}
.a-chapter-list a{display:flex;gap:.875rem;align-items:center;min-height:2.5rem;padding:.5rem .75rem;color:rgb(244 247 250 / .78);text-decoration:none;font-size:var(--text-sm);line-height:1.35;transition:color .2s ease}
/* the list's one highlight (article.js moves it): under the row in hand, or resting on the chapter you are in */
.a-chapter-list::before{content:"";position:absolute;left:var(--menu-inset);right:var(--menu-inset);top:0;height:var(--hi-h,2.5rem);transform:translateY(var(--hi-y,0));
  background:rgb(255 255 255 / .09);pointer-events:none;transition:transform .3s cubic-bezier(.3,.9,.3,1.04),height .3s cubic-bezier(.3,.9,.3,1.04)}
.a-chapter-list.still::before{transition:none}
.a-chapter-list a span{flex:none;width:1.5rem;font-variant-numeric:tabular-nums;color:rgb(244 247 250 / .45)}
.a-chapter-list a:hover,.a-chapter-list a:focus-visible,.a-chapter-list a[aria-current]{color:#fff;outline:0}
/* light reading: the pill and its list are light frosted glass with dark text (they sit outside .article's tokens) */
html[data-reading="light"] .a-chapter-btn{color:#11161c;background:rgb(255 255 255 / .74);box-shadow:inset 0 1px 0 rgb(255 255 255 / .7),0 .5rem 1.5rem -.75rem rgb(17 22 28 / .3)}
html[data-reading="light"] .a-chapter-n{color:rgb(17 22 28 / .55)}
html[data-reading="light"] .a-chapter-btn>svg{color:rgb(17 22 28 / .6)}
html[data-reading="light"] .a-chapter-list{background:rgb(255 255 255 / .92);box-shadow:0 1rem 2.5rem -1rem rgb(17 22 28 / .35)}
html[data-reading="light"] .a-chapter-list a{color:rgb(17 22 28 / .78)}
html[data-reading="light"] .a-chapter-list a span{color:rgb(17 22 28 / .45)}
html[data-reading="light"] .a-chapter-list::before{background:rgb(17 22 28 / .07)}
html[data-reading="light"] .a-chapter-list a:is(:hover,:focus-visible,[aria-current]){color:#11161c}
.prose h2{scroll-margin-top:calc(var(--header-h) + 4rem)}
/* citations in the text, and every source at the very bottom, numbered once */
/* a citation is one small chip holding its numbers (round 8: "the circles ... need to be a little bit better"): it sits
   on the line rather than above it, and its sources open in place (article.js 8) */
.a-cite{display:inline-block;height:1.6em;padding:0 .6em;margin-left:.3em;vertical-align:.16em;font:600 .6875rem/1.6em var(--sans);
  font-variant-numeric:tabular-nums;white-space:nowrap;cursor:pointer;color:color-mix(in srgb,var(--ink) 70%,var(--page));
  background:color-mix(in srgb,var(--ink) 9%,transparent);transition:background .2s ease,color .2s ease}
.prose .a-cite a{color:inherit;text-decoration:none}
.a-cite:hover,.a-cite.on{color:var(--ink);background:color-mix(in srgb,var(--ink) 17%,transparent)}
.a-refs{grid-column:col;margin-top:var(--space-16)}
.a-refs a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink) 28%,transparent);text-underline-offset:2px;overflow-wrap:anywhere}
.a-refs .a-credit{margin-top:var(--space-10)}
.a-refs h2{font:500 var(--text-xl)/1.2 var(--display);margin:0 0 var(--space-5)}
.a-refs ol{margin:0;padding-left:1.5em;font-size:var(--text-sm);line-height:1.6;color:color-mix(in srgb,var(--ink) 72%,var(--page))}
.a-refs li{scroll-margin-top:calc(var(--header-h) + 4rem);padding-left:.25rem;transition:color .6s ease}
.a-refs li+li{margin-top:.5rem}
.a-refs li:target{color:var(--ink)}
/* each related piece says where it stands, like Anthropic's date line; View all research is a capsule with an arrow */
.m-meta{margin:var(--space-4) 0 0;font:500 var(--text-xs)/1.3 var(--sans);color:color-mix(in srgb,var(--ink) 62%,var(--page))}
.m-meta+h3{margin-top:var(--space-2)}
.a-more-all{display:inline-flex;align-items:center;gap:.5rem;height:2.25rem;margin-top:var(--space-8);padding:0 1rem;color:var(--ink);text-decoration:none;font:500 var(--text-sm)/1 var(--sans);
  background:color-mix(in srgb,var(--ink) 8%,transparent);transition:background .2s ease}
.a-more-all:hover{background:color-mix(in srgb,var(--ink) 14%,transparent)}
.a-more-all svg{width:1rem;height:1rem;transition:translate .25s ease}
.a-more-all:hover svg{translate:.2rem 0}

/* 8. Reading (round 8, captain 2026-10-31, direction C; article.js 8) */
.prose{position:relative}
/* the highlighter (<mark>, its own mark; bold stays bold): a yellow band laid under a key line once, as it comes up the
   page ("I would like yellow highlight ... it looks like proper highlighting"), evenly around the letters (round 9).
   In dark reading it is a dark yellow and the words keep their colour, so nothing changes under the sweep (round 12:
   "the motion blur of the highlighter in dark mode ... looks wrong because the text changes ... maybe we use a dark
   yellow highlight for the dark mode"); the light words on it read at 5:1. In light reading it is the bright marker
   with a soft leading edge ("a little bit more motion blurry", round 9). */
.prose mark{--hl:rgb(128 101 22);color:var(--ink);padding:0 .14em;margin:0 -.14em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  background:linear-gradient(var(--hl),var(--hl)) no-repeat 0 0 / 0 100%;transition:background-size .6s cubic-bezier(.3,.75,.25,1)}
.prose mark.hl{background-size:100% 100%}
html[data-reading="light"] .prose mark{--hl:rgb(255 214 52 / .7);background-image:linear-gradient(90deg,var(--hl) calc(100% - 1.75em),transparent);transition:background-size .7s cubic-bezier(.3,.75,.25,1)}
html[data-reading="light"] .prose mark.hl{background-size:calc(100% + 1.75em) 100%}
.prose .a-q{color:var(--ink)}
/* the quotations drawn out: a line of their own under a quiet opening mark in the piece's own colour (round 9: "the quotes
   can definitely be blue or match the theme"), easing in once as they come up (article.js 8) */
.prose .a-pull{margin:var(--space-12) 0;text-align:center}
.prose .a-pull::before{content:"\201C";display:block;height:1.75rem;margin-bottom:.25rem;font:500 3rem/1 var(--sans);color:rgb(var(--art-light))}
.prose :is(.a-pull,.a-fig){transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1),filter .9s cubic-bezier(.2,.7,.2,1)}
.prose :is(.a-pull,.a-fig):not(.in){opacity:0;transform:translateY(1rem);filter:blur(6px)}
.prose .a-pull blockquote{margin:0;padding:0;border:0;font:500 clamp(1.375rem,2.1vw,1.875rem)/1.24 var(--sans);letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.prose .a-pull figcaption{margin-top:.75rem;font-size:var(--text-sm);color:color-mix(in srgb,var(--ink) 58%,var(--page))}
/* the card by a citation or a term on a computer */
.a-pop{position:fixed;z-index:120;width:min(22rem,calc(100vw - 2rem));padding:1rem 1.125rem;color:var(--ink);background:color-mix(in oklab,var(--page) 88%,#fff 12%);
  box-shadow:0 1.25rem 2.75rem -1rem rgb(0 0 0 / .6);opacity:0;transform:translateY(.25rem);transition:opacity .18s ease,transform .26s cubic-bezier(.2,.9,.25,1)}
.a-pop.below{transform:translateY(-.25rem)}
.a-pop.on{opacity:1;transform:none}
html[data-reading="light"] .a-pop{background:#fff;box-shadow:0 1.25rem 2.75rem -1rem rgb(17 22 28 / .3)}
.a-pop-h{margin:0 0 .75rem;font:500 var(--text-xs)/1.3 var(--sans);color:color-mix(in srgb,var(--ink) 55%,var(--page))}
.a-pop-refs{list-style:none;margin:0;padding:0}
.a-pop-refs li{display:flex;gap:.625rem;font-size:var(--text-sm);line-height:1.5;color:color-mix(in srgb,var(--ink) 80%,var(--page))}
.a-pop-refs li+li{margin-top:.625rem}
.a-pop-refs a{color:var(--ink);text-decoration:underline;text-decoration-color:rgb(var(--art-light) / .6);text-underline-offset:.18em;overflow-wrap:anywhere}
.a-pop-n{flex:none;min-width:1.125rem;font-variant-numeric:tabular-nums;color:rgb(var(--art-light))}
.a-pop-term{margin:0;font:500 var(--text-base)/1.3 var(--sans);color:var(--ink)}
.a-pop-def{margin:.375rem 0 0;font-size:var(--text-sm);line-height:1.5;color:color-mix(in srgb,var(--ink) 78%,var(--page))}
.a-pop-all,.a-pop-go{display:inline-block;margin-top:.875rem;font-size:var(--text-xs);color:color-mix(in srgb,var(--ink) 72%,var(--page));text-decoration:underline;text-underline-offset:.2em}
/* the sheet from the bottom on a phone, with its grabber */
.a-drawer{position:fixed;inset:0;z-index:200;background:rgb(0 0 0 / 0);transition:background .28s ease}
.a-drawer.on{background:rgb(0 0 0 / .4)}
.a-drawer-in{position:absolute;left:0;right:0;bottom:0;max-height:72vh;overflow:auto;padding:.625rem 1.5rem calc(2rem + env(safe-area-inset-bottom));color:var(--ink);
  background:color-mix(in oklab,var(--page) 88%,#fff 12%);transform:translateY(100%);transition:transform .34s cubic-bezier(.2,.9,.25,1)}
.a-drawer.on .a-drawer-in{transform:none}
html[data-reading="light"] .a-drawer-in{background:#fff}
.a-grab{display:block;width:2.5rem;height:.3125rem;margin:0 auto 1.125rem;border-radius:999px;background:color-mix(in srgb,var(--ink) 24%,transparent)}
.a-drawer .a-pop-term{font-size:var(--text-lg)}
.a-drawer .a-pop-def{font-size:var(--text-base)}
.a-drawer .a-pop-go{font-size:var(--text-sm)}
/* Now reading and Up next beside the text, on a screen wide enough for a column */
.a-queue{display:none}
@media(min-width:1240px){
  .a-queue{display:block;position:absolute;top:0;bottom:0;left:calc(100% + 3.5rem);width:15.5rem}
  .a-queue-in{position:sticky;top:calc(var(--header-h) + 1.5rem)}
  .prose .a-related{display:none}
}
.a-queue-h{margin:0 0 .625rem;font:500 var(--text-xs)/1.3 var(--sans);color:color-mix(in srgb,var(--ink) 55%,var(--page))}
.a-now{position:relative;display:grid;gap:.125rem;padding-bottom:1rem;margin-bottom:1.75rem}
.a-now b{font:500 var(--text-sm)/1.35 var(--sans);color:var(--ink)}
.a-now small{font-size:var(--text-xs);color:color-mix(in srgb,var(--ink) 58%,var(--page))}
.a-bar{position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;overflow:hidden;background:color-mix(in srgb,var(--ink) 12%,transparent)}
.a-bar i{position:absolute;inset:0;background:rgb(var(--art-light));transform-origin:left;transform:scaleX(0)}
.prose .a-next{list-style:none;margin:0 -.75rem;padding:0}
.prose .a-next a{display:grid;gap:.125rem;padding:.625rem .75rem;color:inherit;text-decoration:none;transition:background .2s ease}
.prose .a-next a:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.a-next b{font:500 var(--text-sm)/1.35 var(--sans);color:var(--ink)}
.a-next small{font-size:var(--text-xs);color:color-mix(in srgb,var(--ink) 58%,var(--page))}
@media(prefers-reduced-motion:reduce){.prose :is(mark,.a-pull,.a-fig){transition:none}}
/* figures and tables in the text (round 9, after MacroFactor), in the approved figure look (tora-chart-language's
   Figure 09, round 12: "our table, the approved one, does look really, really clean ... let's just keep ours"): each
   right on the page, never in a panel (round 13: "for any of the diagrams or the tables, I don't like this container
   look ... They should just be in the existent"), space alone setting it apart; titled with what it shows, a numbered
   caption and its source under it. A table: 16px rows with
   13px of air, faint rules, headers semibold and darker than the cells ("more bold than the numbers, and not
   necessarily more gray"), words on the left and numbers on the right under their header (article.js marks them;
   proportional figures, no monospaced digits). */
.prose .a-fig{margin:var(--space-12) 0}
.a-fig-t{margin:.25rem 0 1.25rem;font:600 1.125rem/1.35 var(--sans);color:var(--ink)}
.prose .a-fig table{min-width:0;font-size:1rem;line-height:1.45}
.prose .a-fig :is(th,td){padding:.8125rem .5rem;font-weight:400;border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent);color:color-mix(in srgb,var(--ink) 84%,var(--page))}
.prose .a-fig thead th{font-size:.875rem;font-weight:600;color:var(--ink)}
.prose .a-fig tbody th{white-space:normal;width:34%;color:var(--ink)}
.prose .a-fig .num{text-align:right}
.prose .a-fig figcaption{margin-top:1.125rem;font-size:.875rem;line-height:1.55;color:color-mix(in srgb,var(--ink) 70%,var(--page))}
.prose .a-fig figcaption strong{color:var(--ink);font-weight:600}
.prose .a-fig figcaption small{display:block;margin-top:.75rem;font-size:.75rem}
.a-chart svg{display:block;width:100%;height:auto;overflow:visible}
.a-chart .f-many path{fill:none;stroke:color-mix(in srgb,var(--ink) 22%,transparent);stroke-width:1}
.a-chart .f-avg{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:5 5}
.a-chart .f-one{fill:none;stroke:rgb(var(--art-light));stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.a-chart .f-axis{fill:none;stroke:color-mix(in srgb,var(--ink) 30%,transparent);stroke-width:1}
.a-chart text{font:500 12px var(--sans);fill:color-mix(in srgb,var(--ink) 60%,var(--page))}
.a-chart .f-key{font-size:13px}
.a-chart .f-key-avg{fill:var(--ink)}
.a-chart .f-key-one{fill:rgb(var(--art-light))}
/* the drawing scales down to a phone's column, its words with it: they are drawn larger there so they stay readable */
@media(max-width:820px){.a-chart text{font-size:19px}.a-chart .f-key{font-size:21px}}
/* 9. a line chart you can read with the pointer (computer only; article.js 9) */
.a-chart{position:relative}
.a-fig-hint{display:none;margin:-.5rem 0 .75rem;font-size:var(--text-xs);color:color-mix(in srgb,var(--ink) 55%,var(--page))}
@media(hover:hover) and (pointer:fine) and (min-width:821px){.a-fig-hint{display:block}.a-chart svg{cursor:crosshair}}
.a-chart svg :is(.f-many path,.f-avg,.f-one){transition:opacity .2s ease,stroke-width .2s ease}
.a-chart svg.on :is(.f-many path,.f-avg,.f-one):not(.lit){opacity:.28}
.a-chart svg.on .f-many path.lit{stroke:var(--ink);stroke-width:2.5}
.a-chart svg.on .f-avg.lit{stroke-width:2.75}
.a-chart svg.on .f-one.lit{stroke-width:3.5}
.a-chart svg.on .f-key{opacity:0}
.a-chart .f-guide{fill:none;stroke:color-mix(in srgb,var(--ink) 30%,transparent);stroke-width:1;stroke-dasharray:2 4}
.a-chart .f-dot{fill:var(--page);stroke:var(--ink);stroke-width:2}
.a-chart .f-dot.is-one{stroke:rgb(var(--art-light))}
.a-chart svg:not(.on) .f-dot{display:none}
.a-chart svg:focus{outline:0}
.a-chart svg:focus-visible{outline:2px solid rgb(var(--art-light));outline-offset:6px;border-radius:8px}
.a-tip{position:absolute;z-index:2;display:grid;gap:.125rem;padding:.5rem .75rem;pointer-events:none;white-space:nowrap;font-size:var(--text-xs);line-height:1.35;
  color:var(--ink);background:color-mix(in oklab,var(--page) 88%,#fff 12%);box-shadow:0 .75rem 1.75rem -.75rem rgb(0 0 0 / .55);
  transform:translate(-50%,calc(-100% - .75rem));opacity:0;transition:opacity .15s ease}
.a-tip.on{opacity:1}
.a-tip b{font-weight:500;font-size:var(--text-sm)}
.a-tip span{color:color-mix(in srgb,var(--ink) 65%,var(--page))}
html[data-reading="light"] .a-tip{background:#fff;box-shadow:0 .75rem 1.75rem -.75rem rgb(17 22 28 / .3)}
/* 10. thanks for reading, at the end of the piece: quiet, centred, one way to pass it on */
.a-thanks{max-width:var(--measure);margin:var(--space-16) auto 0}
.a-thanks::before{content:"";display:block;width:2.5rem;height:2px;margin:0 0 var(--space-6);border-radius:1px;background:rgb(var(--art-light))}
.a-thanks p{margin:0 0 var(--space-6);max-width:34rem;font-size:1.125rem;line-height:1.6;color:color-mix(in srgb,var(--ink) 86%,var(--page));text-wrap:pretty}
/* signed as a letter is (round 14): on the right, his signature, his name printed beneath it, the date beneath that,
   all from the signature's left edge; the way to pass it on, on the left */
.a-thanks-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-5) var(--space-6);flex-wrap:wrap}
.a-signed{display:flex;flex-direction:column;align-items:flex-start;margin:0 0 0 auto}
.a-signed figcaption{display:grid;gap:.1875rem;margin-top:.375rem;line-height:1.3;white-space:nowrap}
.a-signed figcaption b{font:500 var(--text-sm)/1.3 var(--sans);color:var(--ink)}
.a-signed figcaption span{font-size:var(--text-xs);color:color-mix(in srgb,var(--ink) 55%,var(--page))}
@media(max-width:520px){.a-thanks-foot{flex-direction:column;align-items:flex-start}.a-signed{order:-1;align-self:flex-end}}
/* his signature, written in once as it comes into view (article.js 10): a canvas draws his ink in the pen's order, then
   the signature itself takes over */
.a-sign-box{position:relative;width:12.5rem;color:var(--ink)}
@media(max-width:520px){.a-sign-box{width:10.5rem}}
.a-sign{display:block;width:100%;height:auto;overflow:visible}
.a-sign-box.writing .a-sign{visibility:hidden}
.a-sign-write{position:absolute;inset:0;width:100%;height:100%}
/* 12. Listen: a quiet player under the byline, in the tools' material; shown only once his recording has loaded */
.a-listen{display:flex;align-items:center;gap:.875rem;width:min(100%,30rem);margin-top:var(--space-5);padding:.5rem 1rem .5rem .5rem;
  background:color-mix(in srgb,var(--ink) 7%,transparent)}
.a-listen[hidden]{display:none}
.a-listen-play{flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border:0;border-radius:50%;cursor:pointer;color:var(--page);background:var(--ink);transition:transform .2s cubic-bezier(.3,.9,.3,1.3)}
.a-listen-play:active{transform:scale(.94)}
.a-listen-play svg{width:1rem;height:1rem}
.a-listen-play .i-pause,.a-listen.playing .a-listen-play .i-play{display:none}
.a-listen.playing .a-listen-play .i-pause{display:block}
.a-listen-mid{flex:1;min-width:0;display:grid;gap:.25rem}
.a-listen-t{margin:0;font:500 var(--text-sm)/1.2 var(--sans);color:var(--ink)}
.a-listen-clock{display:flex;justify-content:space-between;margin:0;font:500 .6875rem/1 var(--sans);font-variant-numeric:tabular-nums;color:color-mix(in srgb,var(--ink) 60%,var(--page))}
.a-listen-bar{--p:0%;-webkit-appearance:none;appearance:none;width:100%;height:1rem;margin:0;background:none;cursor:pointer}
.a-listen-bar::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,rgb(var(--art-light)) var(--p),color-mix(in srgb,var(--ink) 16%,transparent) var(--p))}
.a-listen-bar::-moz-range-track{height:3px;border-radius:2px;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.a-listen-bar::-moz-range-progress{height:3px;border-radius:2px;background:rgb(var(--art-light))}
.a-listen-bar::-webkit-slider-thumb{-webkit-appearance:none;width:.75rem;height:.75rem;margin-top:calc(-.375rem + 1.5px);border:0;border-radius:50%;background:var(--ink)}
.a-listen-bar::-moz-range-thumb{width:.75rem;height:.75rem;border:0;border-radius:50%;background:var(--ink)}
.a-listen-bar:focus-visible{outline:2px solid rgb(var(--art-light));outline-offset:2px}
.a-listen-rate{flex:none;min-width:3rem;height:2rem;padding:0 .625rem;border:0;cursor:pointer;font:600 var(--text-xs)/1 var(--sans);font-variant-numeric:tabular-nums;
  color:var(--ink);background:color-mix(in srgb,var(--ink) 10%,transparent);transition:background .2s ease}
.a-listen-rate:hover{background:color-mix(in srgb,var(--ink) 16%,transparent)}