/* Article v2: the long-form Learn piece (learn_longform.html, aimosti/content/longform.py).

   One reading column on the page's own type, a contents rail beside it on a wide screen and above
   it on a narrow one, and the reference matter at the foot. Every rule is scoped under .lf so the
   v1 article and every other content page are untouched. Tokens only, no new colours: the
   diagrams are inline SVG drawn in the same hexes the tokens resolve to.

   Rhythm: the column is 44rem (about 70 characters of Archivo at 1.0625rem); figures marked
   "wide" step out to the right into the space the rail leaves, never to the left over it. */

.lf{--lf-toc:13.5rem;--lf-gap:clamp(2rem,4vw,3.5rem);--lf-main:44rem;--lf-bleed:0px;--lf-top:88px}
@media(min-width:1240px){.lf{--lf-bleed:7rem}}

/* ── hero ─────────────────────────────────────────────────────────────────────────────────── */
.lf-hero h1{max-width:24ch;font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.03}
.lf-hero .crumbs{margin-bottom:1.1rem}
.lf-standfirst{max-width:58ch;font-size:clamp(1.08rem,1.25vw,1.24rem);line-height:1.5;color:var(--ink-soft)}
.lf-hero .byline-line{margin-top:1.2rem}
@media(min-width:1100px){
  /* The hero's text starts where the reading column starts, so the title, the standfirst and the
     first paragraph share one left edge. */
  .lf-hero__wrap{padding-inline-start:calc(clamp(1.2rem,4vw,2.5rem) + var(--lf-toc) + var(--lf-gap))}
}

/* ── the grid: rail + column ──────────────────────────────────────────────────────────────── */
.lf-body{padding-top:clamp(2rem,4vw,3rem)}
.lf-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.6rem}
.lf-main{max-width:var(--lf-main);min-width:0}
@media(min-width:1100px){
  .lf-grid{grid-template-columns:var(--lf-toc) minmax(0,var(--lf-main));column-gap:var(--lf-gap);row-gap:0;align-items:start}
  .lf-toc{grid-column:1;grid-row:1 / span 2;position:sticky;top:var(--lf-top);max-height:calc(100vh - var(--lf-top) - 1.5rem);overflow:auto}
  .lf-takeaways{grid-column:2;grid-row:1}
  .lf-main{grid-column:2;grid-row:2}
}
.lf-main,.lf-takeaways{scroll-margin-top:var(--lf-top)}
.lf [id]{scroll-margin-top:var(--lf-top)}

/* ── key takeaways ────────────────────────────────────────────────────────────────────────── */
.lf-takeaways{max-width:var(--lf-main);background:var(--paper-2);border-radius:var(--radius-card);padding:clamp(1.2rem,2.6vw,1.7rem) clamp(1.2rem,3vw,1.9rem);margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.lf-takeaways h2{font:600 .78rem/1.3 var(--font-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--primary);margin:0 0 .9rem}
.lf-takeaways ul{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.lf-takeaways li{position:relative;padding-left:1.35rem;color:var(--ink);line-height:1.55;font-size:1.01rem}
.lf-takeaways li::before{content:"";position:absolute;left:0;top:.62em;width:.5rem;height:.5rem;border-radius:2px;background:var(--primary)}

/* ── contents rail ────────────────────────────────────────────────────────────────────────── */
/* A plain list on a hairline track: the sections are not a sequence a reader needs numbered. */
.lf-toc{font-size:.9rem;line-height:1.35}
.lf-toc__title{font:600 .74rem/1.3 var(--font-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .7rem}
.lf-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:0;border-left:1px solid var(--line)}
.lf-toc a{display:block;margin-left:-1px;padding:.42rem .5rem .42rem .9rem;border-left:1px solid transparent;color:var(--ink-soft);text-decoration:none;transition:color .15s,border-color .15s}
.lf-toc a:hover{color:var(--ink);border-left-color:var(--ink-soft)}
.lf-toc a:focus-visible{outline-offset:0}
@media(max-width:1099.98px){
  /* Above the column on a narrow screen: a compact card, two columns when there is room. */
  .lf-toc{border:1px solid var(--line);border-radius:var(--radius-card);padding:1rem 1.1rem;margin-bottom:.4rem}
  .lf-toc ol{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));column-gap:1rem}
}

/* ── the column ───────────────────────────────────────────────────────────────────────────── */
.lf .prose.lf-main{max-width:var(--lf-main)}
.lf-main>p,.lf-section>p{font-size:1.0625rem;line-height:1.72;margin:1.05rem 0}
.lf-main a{text-underline-offset:3px}
.lf-main .lf-lede{font-size:clamp(1.14rem,1.45vw,1.3rem);line-height:1.58;color:var(--ink);letter-spacing:-.008em;margin-top:0}
.lf-section{margin-top:clamp(2.6rem,5vw,3.6rem)}
.lf-section>h2{font-size:clamp(1.55rem,2.6vw,2.05rem);line-height:1.1;margin:0 0 1rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.lf-main h3{font-size:1.14rem;font-weight:600;letter-spacing:-.012em;line-height:1.3;margin:1.8rem 0 .4rem}
.lf-main code{font-family:var(--font-mono);font-feature-settings:"calt" 0,"liga" 0;font-size:.88em;background:var(--paper-2);color:var(--ink);padding:.08em .34em;border-radius:5px;white-space:nowrap}
.lf-main strong{color:var(--ink)}

/* citations: small, bracketed, never a jump the eye trips over */
.cite{font-size:.68em;line-height:0;vertical-align:super;margin-left:.08em;color:var(--ink-faint);white-space:nowrap;font-variant-numeric:tabular-nums}
.cite a{color:var(--primary);text-decoration:none;padding:0 .05em}
.cite a:hover,.cite a:focus-visible{text-decoration:underline}
.lf-refs li:target{background:var(--primary-wash);border-radius:var(--radius-row)}

/* ── figures ──────────────────────────────────────────────────────────────────────────────── */
.lf-fig{margin:2.1rem 0}
.lf-fig--wide{margin-right:calc(-1 * var(--lf-bleed))}
.lf-fig__media{border-radius:var(--radius-panel);overflow:hidden;background:var(--bg)}
.lf-fig__media img{display:block;width:100%;height:auto}
.lf-fig__media--svg{padding:clamp(1rem,2.4vw,1.6rem);background:var(--bg);border:1px solid var(--line)}
.lf-fig__media--svg svg{display:block;width:100%;height:auto}
.lf-fig__narrow{display:none}
@media(max-width:620px){
  .lf-fig__media.has-narrow .lf-fig__wide{display:none}
  .lf-fig__media.has-narrow .lf-fig__narrow{display:block}
  .lf-fig__media--svg{padding:1rem .9rem}
}
.lf-fig:not(.lf-fig--svg) .lf-fig__media{border:1px solid var(--line);padding:clamp(.6rem,2vw,1.2rem);background:#fff}
.lf-fig figcaption,.lf-table__caption,.lf-code figcaption{font-size:.9rem;line-height:1.55;color:var(--ink-soft);margin-top:.75rem;max-width:var(--lf-main)}
.lf-fig__n{font-weight:600;color:var(--ink)}
/* The source's requested acknowledgement: its own line, a step quieter than the caption. */
.lf-fig__credit{display:block;margin-top:.3rem;font-size:.78rem;line-height:1.45;color:var(--ink-faint)}
.lf-fig__credit a{color:inherit;text-decoration-color:var(--line-2);text-underline-offset:2px}
.lf-fig__credit a:hover{color:var(--ink-soft)}
.lf-lead__fig .lf-fig__credit{margin-top:.2rem}

/* ── callouts: four kinds, told apart by their label and a quiet shape, never by colour alone ─ */
/* Four kinds, told apart by the label that opens the title line and by a quiet shape, never by
   colour alone and never by a coloured side tab. The page's one navy slab is the closing Band. */
.lf-callout{margin:2rem 0;padding:1.15rem 1.3rem 1.2rem;border-radius:var(--radius-panel);background:var(--paper-2);position:relative}
.lf-callout p{font-size:1rem;line-height:1.62;margin:.55rem 0 0}
.lf-callout p:first-child{margin-top:0}
.lf .lf-callout__label{font-weight:700;color:var(--primary);letter-spacing:-.005em;margin-right:.3ch;text-decoration:none}
.lf .lf-callout__title{font-weight:600;color:var(--ink);font-size:1.08rem;line-height:1.42;letter-spacing:-.01em}
.lf-callout--key-fact{background:var(--primary-wash);box-shadow:inset 0 0 0 1px oklch(0.319 0.117 257.7 / .16)}
.lf-callout--key-fact .lf-callout__title{font-size:1.16rem}
.lf-callout--misconception{background:transparent;border:1.5px dashed var(--line-2)}
.lf-callout--misconception .lf-callout__myth{text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:var(--ink-faint);color:var(--ink-soft)}
.lf-callout--note{background:transparent;border-radius:0;padding:1rem 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.lf-callout--example{background:var(--bg);border:1px solid var(--line-2)}

/* ── stats ────────────────────────────────────────────────────────────────────────────────── */
.lf-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr));gap:1px;margin:2.2rem 0;background:var(--line);border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--line)}
.lf-stat{background:var(--bg);padding:1.15rem 1.2rem 1.2rem}
.lf .lf-stat__value{font-size:clamp(1.7rem,3vw,2.25rem);line-height:1.05;font-weight:600;letter-spacing:-.03em;color:var(--primary);margin:0;font-variant-numeric:normal}
.lf .lf-stat__context{font-size:.92rem;line-height:1.45;color:var(--ink-soft);margin:.5rem 0 0}

/* ── tables ───────────────────────────────────────────────────────────────────────────────── */
.lf-table{margin:2.2rem 0}
.lf-table__caption{margin:0 0 .7rem}
.lf-table__scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;position:relative;border:1px solid var(--line);border-radius:var(--radius-panel)}
.lf-table__scroll:focus-visible{outline:2px solid var(--seal-ink);outline-offset:2px}
.lf-table table{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.45}
.lf-table th,.lf-table td{text-align:left;vertical-align:top;padding:.65rem .85rem;border-bottom:1px solid var(--line)}
.lf-table tbody tr:last-child>*{border-bottom:0}
.lf-table thead th{font:600 .8rem/1.35 var(--font-sans);letter-spacing:.005em;color:var(--ink-soft);background:var(--paper-2)}
.lf-table tbody th{font-weight:600;color:var(--ink);min-width:9rem}
.lf-table td{color:var(--ink-soft)}
.lf-table .is-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.lf .lf-table__source{font-size:.85rem;line-height:1.5;color:var(--ink-faint);margin:.6rem 0 0}
.lf-table__source span{font-weight:600;color:var(--ink-soft)}
@media(max-width:620px){
  /* Rows become cards: the row header is the card's title and each cell carries its column name,
     so nothing scrolls sideways and nothing is read without its heading. */
  .lf-table__scroll{border:0;border-radius:0;overflow:visible}
  .lf-table table,.lf-table tbody,.lf-table tr,.lf-table th,.lf-table td{display:block;width:auto}
  .lf-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .lf-table tbody{display:grid;gap:.7rem}
  .lf-table tr{border:1px solid var(--line);border-radius:var(--radius-panel);padding:.85rem 1rem .5rem}
  .lf-table tbody th{padding:0 0 .5rem;border:0;min-width:0;font-size:.98rem}
  .lf-table td{display:grid;grid-template-columns:minmax(6.5rem,40%) 1fr;gap:.8rem;padding:.45rem 0;border:0;border-top:1px solid var(--line)}
  .lf-table td::before{content:attr(data-label);font:600 .78rem/1.5 var(--font-sans);color:var(--ink-faint);padding-top:.12em}
  .lf-table .is-num{text-align:left;white-space:normal}
  .lf-table tbody tr:last-child>*{border-bottom:0}
}

/* ── pull quote ───────────────────────────────────────────────────────────────────────────── */
.lf-pullquote{margin:2.6rem 0;padding:1.3rem 0 0;border-top:1px solid var(--line-2)}
.lf-pullquote blockquote{margin:0}
.lf .lf-pullquote blockquote p{font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.38;letter-spacing:-.015em;color:var(--ink);margin:0;font-weight:500;text-wrap:pretty}
/* hanging punctuation: the opening mark sits in the margin so the text keeps the column edge */
.lf-pullquote blockquote p::before{content:"\201C";margin-left:-.45em;color:var(--primary)}
.lf-pullquote blockquote p::after{content:"\201D";color:var(--primary)}
.lf-pullquote figcaption{margin-top:.7rem;font-size:.88rem;color:var(--ink-soft)}

/* ── steps ────────────────────────────────────────────────────────────────────────────────── */
.lf-steps{margin:2rem 0}
.lf .lf-steps__title{font-weight:600;color:var(--ink);margin-bottom:.4rem}
.lf .lf-steps ol{list-style:none;margin:0;padding:0;counter-reset:lf-step;display:grid;gap:0}
.lf .lf-steps ol>li{counter-increment:lf-step;position:relative;padding:0 0 1.1rem 2.9rem;color:var(--ink-soft);line-height:1.65}
.lf .lf-steps ol>li::before{content:counter(lf-step);position:absolute;left:0;top:0;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--primary);color:var(--on-primary);
  font:700 .85rem/1.9rem var(--font-sans);text-align:center}
.lf .lf-steps ol>li:not(:last-child)::after{content:"";position:absolute;left:.92rem;top:2.15rem;bottom:.25rem;width:1.5px;background:var(--line-2)}
.lf-steps__step{display:block;color:var(--ink);margin-bottom:.1rem}

/* ── lists, code, definitions ─────────────────────────────────────────────────────────────── */
.lf-list{margin:1.2rem 0}
.lf-code{margin:1.8rem 0}
.lf .lf-code__label{font:600 .7rem/1 var(--font-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--on-primary);background:var(--primary);
  display:inline-block;padding:.42em .7em;border-radius:var(--radius-row) var(--radius-row) 0 0;margin:0}
.lf-code pre{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;margin:0;padding:1rem 1.1rem;background:#f6f8fc;border:1px solid var(--line);border-radius:0 var(--radius-panel) var(--radius-panel) var(--radius-panel);
  overflow-x:auto;font:400 .84rem/1.6 var(--font-mono);font-feature-settings:"calt" 0,"liga" 0;color:var(--ink);tab-size:4}
.lf-code pre:focus-visible{outline:2px solid var(--seal-ink);outline-offset:2px}
.lf-code pre code{background:none;padding:0;font-size:inherit;white-space:pre}
.lf-defs{margin:2rem 0;padding:1.1rem 1.3rem;border:1px solid var(--line);border-radius:var(--radius-panel)}
.lf .lf-defs__title{font:600 .72rem/1.3 var(--font-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .5rem}
.lf-defs dl{margin:0;display:grid;gap:.1rem}
.lf-defs dl>div{display:grid;grid-template-columns:9.5rem 1fr;gap:1rem;padding:.6rem 0;border-top:1px solid var(--line)}
.lf-defs dl>div:first-child{border-top:0}
.lf-defs dt{font-weight:600;color:var(--ink)}
.lf-defs dd{margin:0;color:var(--ink-soft);line-height:1.6;font-size:.98rem}
@media(max-width:560px){.lf-defs dl>div{grid-template-columns:1fr;gap:.2rem}}

/* ── honesty, questions, references ───────────────────────────────────────────────────────── */
.lf-honesty .skeptic-wontclaim{margin:1.4rem 0}
.lf-faq h3{font-size:1.1rem;margin-top:1.6rem}
.lf-faq h3+p{margin-top:.35rem}
.lf .lf-refs ol{list-style:none;margin:1rem 0 0;padding:0;counter-reset:lf-ref;display:grid;gap:.15rem}
.lf .lf-refs ol>li{counter-increment:lf-ref;position:relative;padding:.45rem .5rem .45rem 2.5rem;font-size:.9rem;line-height:1.55;color:var(--ink-soft);overflow-wrap:anywhere}
/* marketing.css styles every .prose ol>li::before as a filled numbered disc; a reference list
   wants plain right-aligned numerals, so this resets it at a higher specificity. */
.lf .lf-refs ol>li::before{content:counter(lf-ref);position:absolute;left:.2rem;top:.45rem;width:1.7rem;height:auto;display:block;
  background:none;border-radius:0;color:var(--ink-faint);font:600 .9rem/1.55 var(--font-sans);text-align:right;font-variant-numeric:tabular-nums}
.lf-refs li a{color:var(--ink)}
.lf-refs__container{font-style:italic}
.lf-refs__doi,.lf-refs__note{color:var(--ink-faint)}
.lf .lf-refs__back{display:inline-flex;vertical-align:-.15em;margin-left:.35rem;padding:.1rem;color:var(--primary);border-radius:4px}
.lf .lf-refs__back svg{width:.95em;height:.95em}
.lf .lf-refs__reviewed{font-size:.88rem;color:var(--ink-faint);margin-top:1.4rem}

/* ── lead image (optional per piece) ──────────────────────────────────────────────────────── */
.lf-lead{margin-top:calc(-1 * clamp(1.4rem,3vw,2.2rem))}
.lf-lead__fig{margin:0;border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);background:var(--bg)}
.lf-lead__fig img{display:block;width:100%;height:auto}
.lf-lead__fig figcaption{padding:.7rem 1rem;font-size:.88rem;color:var(--ink-soft)}

/* ── motion: none needed; transitions above are colour only ───────────────────────────────── */
@media (prefers-reduced-motion:reduce){.lf-toc a{transition:none}}

/* ── print: one column, no rail, no band, URLs for references ─────────────────────────────── */
@media print{
  .lf-toc,.lf .band,.lf .content-tail,.lf-refs__back,.lf-table__scroll::after{display:none!important}
  .lf-grid{display:block}
  .lf-main,.lf-takeaways{max-width:none}
  .lf-fig--wide{margin-right:0}
  .lf-fig,.lf-table,.lf-callout,.lf-stats,.lf-code,.lf-pullquote,.lf-defs{break-inside:avoid}
  .lf-section>h2{break-after:avoid}
  .lf-table__scroll{overflow:visible;border:0}
  .lf-code pre{white-space:pre-wrap;overflow:visible}
  .lf-callout--key-fact{background:none;box-shadow:none;border:1.5px solid var(--ink)}
  .lf-refs li a[href^="http"]::after{content:" <" attr(href) ">";color:var(--ink-faint);font-size:.85em}
  .lf-fig__media.has-narrow .lf-fig__wide{display:block!important}
  .lf-fig__media.has-narrow .lf-fig__narrow{display:none!important}
  .lf a{color:var(--ink)}
}