/* ==========================================================================
   Kalios — The Fine Print (G, 2026-10-15). The design of record is design/fine-print.html, built by hand for the
   retatrutide page at phone width: its tokens, type, spacing, components and drawing are the spec, and CLAUDE.md's
   "The Fine Print" section says how the site applies them. One stylesheet for every page (the calculator and COA
   Check add their own layer, in the same tokens). scripts/token_lint.py holds this file, those layers and every
   inline style to the token set below: any font size, spacing, radius, shadow or color outside it fails the deploy.

   The laws: one surface per theme (paper, ink), the theme follows the phone and the Aa control flips the whole page;
   two families (Newsreader for what a person reads, IBM Plex Mono for data); the sizes, the spacings, hairlines not
   boxes, radius 0 (2 px on stamps, chips and buttons, as the file draws them); color is meaning; the number is the
   artwork; the art is the figure.
   ========================================================================== */

/* 0. Fonts: self-hosted, subset latin (scripts/fonts.py), preloaded by the head block ---------------------------- */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/newsreader-roman.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/newsreader-italic.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-500.woff2) format("woff2")}
/* Newsreader has no arrows: every arrow, in serif text too, is Plex Mono's (the file sets its arrows in mono) */
@font-face{font-family:"Kalios Arrows";font-style:normal;font-weight:400 500;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-400.woff2) format("woff2");unicode-range:U+2190-21FF}

/* 1. Tokens: one surface per theme ------------------------------------------------------------------------------ */
:root{
  --paper:#FAFAF7; --ink:#121212; --ink-2:#5E5E58; --rule:rgba(18,18,18,.14); --rule-2:rgba(18,18,18,.32);
  --red:#E63946; --caution:#F5C518; --green:#1F7A45; --amber:#B35C00;
  /* red text on paper (G, the fine print, 2026-10-15): #E63946 is 3.99:1 on #FAFAF7, under AA; the stamp's words,
     a stamp word in a line and the red flag's words take #D3303E there (4.71:1). Everything red that isn't text,
     and all red on ink, is #E63946. */
  --red-text:#D3303E;
  --f-serif:"Kalios Arrows","Newsreader",Georgia,"Times New Roman",serif;
  --f-mono:"Kalios Arrows","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px;
  --gutter:20px; --col:640px; --side:360px; --site:1064px;
  --head-h:57px; --tab-h:62px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0D0D0E;--ink:#ECEAE4;--ink-2:#9A9A94;--rule:rgba(236,234,228,.16);--rule-2:rgba(236,234,228,.36);--green:#6BCB77;--amber:#F28C28;--red-text:#E63946;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#0D0D0E;--ink:#ECEAE4;--ink-2:#9A9A94;--rule:rgba(236,234,228,.16);--rule-2:rgba(236,234,228,.36);--green:#6BCB77;--amber:#F28C28;--red-text:#E63946;color-scheme:dark}

/* 2. Base ------------------------------------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-serif);font-size:17px;line-height:1.5;font-weight:400;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-optical-sizing:auto;font-kerning:normal}
.sl-page--compound :where(*){margin:0;padding:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
b,strong{font-weight:500}
em,i{font-style:italic}
sup,sub{font-family:var(--f-mono);font-size:10px;line-height:0;letter-spacing:0}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sl-vh{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sl-skip{position:absolute;left:var(--s1);top:-64px;z-index:50;padding:var(--s1) var(--s2);background:var(--ink);color:var(--paper);font-family:var(--f-mono);font-size:12px}
.sl-skip:focus{top:var(--s1)}
::selection{background:var(--ink);color:var(--paper)}

/* the mono voice: labels, captions, data */
.sl-mono,.sl-eyebrow,.sl-label,.sl-back,.sl-updated,.sl-tier-h,.sl-index-count{font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);font-weight:400}
.sl-eyebrow,.sl-label{margin:0}
.sl-tnum{font-variant-numeric:tabular-nums}

/* a link inside running text: a hairline underline (rule-2), ink on hover */
.sl-u,.sl-read a,.sl-byline a,.sl-oneline-s a,.sl-legal a,.sl-bottom-t a,.sl-goal-also a,.sl-fix-meta a,.sl-change-why a,
.sl-alert-for a,.sl-receipt a,.sl-board-line a,.sl-timeline a,.sl-footer a,.sl-author a,.sl-gist a,.sl-lead a,.sl-caution a,
.sl-note a,.sl-closure a,.sl-home-first a,.sl-changed a,.sl-index-group h2 a,.sl-tracker-alerts a,.sl-fix-filter a,
.sl-dl a,.sl-guide-doors a,.sl-alerts-more a,.sl-receipt-how a,.sl-also-here a{text-decoration:underline;text-decoration-color:var(--rule-2);text-decoration-thickness:1px;text-underline-offset:3px}
.sl-u:hover,.sl-read a:hover,.sl-byline a:hover,.sl-footer a:hover,.sl-dl a:hover,.sl-closure a:hover,.sl-also-here a:hover{text-decoration-color:var(--ink)}
/* a link that is a block (a row, a door, a pair row, a button, a chip) is never underlined whole */
.sl-page a.sl-row,.sl-page a.sl-sr,.sl-page a.sl-door,.sl-page a.sl-tested-row,.sl-page a.sl-pair-row,.sl-page a.sl-btn,
.sl-page a.sl-primary,.sl-page a.sl-chip,.sl-page a.sl-board-name,.sl-page a.sl-wordmark,.sl-page .sl-tabbar a{text-decoration:none}

/* 3. Layout: one reading column ------------------------------------------------------------------------------- */
.sl-main{width:100%;max-width:calc(var(--col) + 2 * var(--gutter));margin:0 auto;padding:var(--s3) var(--gutter) var(--s5)}
/* a word with nowhere to break (a long address, a sequence) breaks where it must, so no page is wider than the phone */
.sl-main,.tracker-main,.sl-footer{overflow-wrap:break-word}
/* What a finger hits is 44 px or more (G, design, 2026-10-12), where the ink is smaller: a transparent layer over the
   element, from the spacing tokens, so nothing moves */
.sl-chip::before,.sl-back::before,.sl-hit::before,.sl-closure-changes a::before,.sl-group-all::before,.sl-browse::before,
.sl-changed-all::before,.sl-dl-more::before,.sl-home-first a::before,.sl-goal-more a::before,.sl-receipt-line a::before,
.sl-dose-calc a::before,.sl-see-changes a::before,.sl-caution-more a::before,.sl-author > a::before,.sl-tested-none a::before,
.sl-receipt-pagelink a::before,.sl-receipt-index a::before,.sl-coa-door a::before,.sl-alerts-more a::before,
.sl-index-group h2 a::before,.sl-footer a::before,.sl-byline a::before,.sl-tested-r::before,.sl-line-link a::before,
.stack-card-name a::before,.pcac-notice a::before,.back::before,.back-link::before,.compare-card-head a::before
{content:"";position:absolute;left:0;right:0;top:calc(-1 * var(--s2));bottom:calc(-1 * var(--s2))}
.sl-chip::before{top:calc(-1 * var(--s1));bottom:calc(-1 * var(--s1))}
.sl-back,.sl-hit,.sl-closure-changes a,.sl-group-all,.sl-browse,.sl-changed-all,.sl-dl-more,.sl-home-first a,.sl-goal-more a,
.sl-receipt-line a,.sl-dose-calc a,.sl-see-changes a,.sl-caution-more a,.sl-author > a,.sl-tested-none a,
.sl-receipt-pagelink a,.sl-receipt-index a,.sl-coa-door a,.sl-alerts-more a,.sl-index-group h2 a,.sl-footer a,.sl-byline a,
.sl-tested-r,.sl-line-link a,.stack-card-name a,.pcac-notice a,.back,.back-link,.compare-card-head a{position:relative}

/* 4. Header: the wordmark, the search, the Aa flip, the menu; it sticks, and on phones it slides away on a scroll
   down and back on a scroll up, with the tab bar (street-lab.js sets html.sl-bars-away) -------------------------- */
.sl-header{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--rule)}
.sl-header-in{max-width:calc(var(--site) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter);min-height:56px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
.sl-wordmark{display:inline-flex;align-items:baseline;gap:4px;font-family:var(--f-serif);font-size:24px;font-weight:500;line-height:56px;letter-spacing:-.01em;color:var(--ink);white-space:nowrap}
.sl-wordmark .sl-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--red);transform:translateY(-1px)}
.sl-header-tools{display:flex;align-items:center;gap:4px;margin-right:-8px}
.sl-icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;background:none;border:0;border-radius:2px;color:var(--ink);cursor:pointer}
.sl-icon-btn svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sl-icon-btn svg .sl-fill{fill:currentColor;stroke:none}
html:not(.sl-js) .sl-theme-btn{display:none}
.sl-menu-btn{display:none}
.sl-js .sl-menu-btn{display:inline-grid}
.sl-menu-btn[aria-expanded="true"] .sl-i-open,.sl-menu-btn[aria-expanded="false"] .sl-i-close{display:none}
.sl-nav{flex-basis:100%}
.sl-nav ul{list-style:none;margin:0;padding:0 0 var(--s1)}
.sl-nav li{margin:0;padding:0}
.sl-nav a{display:flex;align-items:center;min-height:48px;border-top:1px solid var(--rule);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sl-nav a[aria-current="page"]{color:var(--ink)}
.sl-js .sl-nav{display:none}
.sl-js .sl-nav.is-open{display:block}
@media (min-width:1024px){
  .sl-header-in{flex-wrap:nowrap;column-gap:var(--s3)}
  .sl-js .sl-menu-btn,.sl-menu-btn{display:none}
  .sl-header-tools{order:3}
  .sl-nav,.sl-js .sl-nav{display:block;order:2;margin-left:auto;flex-basis:auto}
  .sl-nav ul{display:flex;gap:var(--s3);padding:0}
  .sl-nav a{min-height:44px;border-top:0}
  .sl-nav a:hover,.sl-nav a[aria-current="page"]{color:var(--ink)}
  .sl-nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--ink);text-underline-offset:3px}
}

/* The tab bar (768 px and under): paper, a hairline on top, the four doors as hairline icons over mono labels, the
   current door in ink. The body keeps its height free at the bottom, so it never covers a page's last line. */
.sl-tabbar{display:none}
@media (max-width:768px){
  .sl-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:6px 0 calc(6px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:1px solid var(--rule-2)}
  .sl-tabbar a{display:grid;justify-items:center;align-content:center;gap:3px;min-height:48px;padding:4px 0;font-family:var(--f-mono);font-size:10px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
  .sl-tabbar a[aria-current]{color:var(--ink)}
  .sl-tabbar svg{display:block;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
  body{padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px))}
  .sl-header,.sl-tabbar{transition:transform .25s ease}
  html.sl-bars-away{--head-h:0px}
  html.sl-bars-away .sl-header{transform:translateY(-100%)}
  html.sl-bars-away .sl-tabbar{transform:translateY(110%)}
}

/* 5. Type ------------------------------------------------------------------------------------------------------- */
.sl-h1,.sl-main h1{margin:0;font-family:var(--f-serif);font-size:46px;font-weight:400;line-height:1;letter-spacing:-.02em;color:var(--ink);text-wrap:balance;overflow-wrap:break-word}
.sl-h1-tail{display:block;margin-top:var(--s1);font-size:22px;line-height:1.2;letter-spacing:-.01em;color:var(--ink-2)}
.sl-gist{margin:0;font-size:22px;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.sl-lead{margin:0;font-size:17px;line-height:1.5;color:var(--ink-2)}
.sl-note{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
@media (max-width:420px){.sl-h1,.sl-main h1{font-size:40px}}

/* 6. Byline: the strip's two lines under every H1, mixed case; quieter since fix 2 (G, 2026-10-15): mono 12 in ink-2
   at line-height 1.35, its two lines one run of text, so it takes three lines at 390 px (scripts/first_screen.py) --- */
.sl-byline{margin-top:var(--s2);font-family:var(--f-mono);font-size:12px;line-height:1.35;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.sl-byline p{margin:0}

/* 7. Stamp: mono 11, letter-spaced, 1.5px border in its color, radius 2, rotated −2°; the hero's lands once on load.
   FDA APPROVED green, COMPOUNDED RX amber, GRAY MARKET red: color is meaning, nothing else carries those three. */
.sl-stamp{display:inline-block;flex-shrink:0;padding:5px 9px;border:1.5px solid currentColor;border-radius:2px;font-family:var(--f-mono);font-size:11px;font-weight:400;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--ink);transform:rotate(-2deg);transform-origin:center}
.sl-stamp--approved{color:var(--green)}
.sl-stamp--crx{color:var(--amber)}
.sl-stamp--red{color:var(--red-text);border-color:var(--red)}
.sl-stamp--established,.sl-stamp--partial,.sl-stamp--ink,.sl-stamp--verdict{color:var(--ink)}
.sl-stamp--notshown{color:var(--ink-2)}
.sl-stamp[title]{cursor:help}
/* a stamp named in a line: its words in its color, mono; a compound with no stamp (G, fix 6, 2026-10-17), its status in
   ink, the same type */
.sl-stampword,.sl-tone--approved,.sl-tone--crx,.sl-tone--red,.sl-tone--none{font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.sl-tone--approved{color:var(--green)}
.sl-tone--crx{color:var(--amber)}
.sl-tone--red{color:var(--red-text)}
.sl-tone--none{color:var(--ink)}
/* a row with no stamp: its status where the stamp would be, the stamp's type in ink, no border */
.sl-row-status{font-family:var(--f-mono);font-size:11px;font-weight:400;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}
.sl-row-status[title]{cursor:help}
.sl-stampcount{white-space:nowrap}
.sl-row-tip{display:block;grid-column:1 / -1;margin-top:var(--s1);padding-left:var(--s2);border-left:1px solid var(--rule-2);font-family:var(--f-mono);font-size:12px;line-height:1.5;color:var(--ink)}
.sl-stamp-defs{list-style:none;margin:var(--s1) 0 0;padding:0}
.sl-stamp-defs li{margin:0;padding:var(--s1) 0 0;border:0}
.sl-stamp-defs li::before{content:none}
.sl-stamp-defs--gray{margin:0 0 var(--s1) var(--s2);list-style:disc}
.sl-stamp-defs--gray li{padding:0;font-family:var(--f-mono);font-size:14px}
.sl-stamp-note{margin:var(--s1) 0 0}

/* 8. The compound hero (one template, 150 pages): eyebrow, H1 with its stamp, byline, the one line and its scope,
   the status line, the band where the status waits on a real event, the bottom line, the two doors --------------- */
.sl-hero{padding-top:0}
.sl-titlerow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin-top:var(--s1)}
.sl-titlerow .sl-h1{flex:0 1 auto;min-width:0}
.sl-hero-stamp{display:inline-flex;flex-direction:column;align-items:flex-end;gap:var(--s1);flex-shrink:0}
.sl-stamp-for{font-family:var(--f-mono);font-size:12px;letter-spacing:0;color:var(--ink-2);white-space:nowrap}
.sl-card-route,.sl-row-route{white-space:nowrap}
/* The one line: the number at 96 (76 at 420 px and under) with its line under it in italic and its scope in mono.
   Every page opens with its number (G, fix 2): the line's first figure, its count of human pilots, or 0 where its
   answer is none (streetlab.oneline_parts); only a line with no figure at all is the italic line alone. The same
   number style (.sl-num-*, fix 3) sets the homepage's counts, the receipt's first line and the tracker's headline. */
.sl-oneline{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rule)}
.sl-oneline-t,.sl-num-t{display:flex;flex-direction:column;margin:0}
.sl-oneline-n,.sl-num-n{font-size:96px;line-height:.92;letter-spacing:-.04em;font-weight:400;font-variant-numeric:tabular-nums;color:var(--ink)}
/* the italic line breaks evenly where it takes two lines (fix 4: no word left alone on the second) */
.sl-oneline-c,.sl-num-c{font-size:24px;line-height:1.2;font-style:italic;color:var(--ink);text-wrap:balance}
.sl-oneline-n + .sl-oneline-c,.sl-num-n + .sl-num-c{margin-top:var(--s1)}
.sl-oneline-s,.sl-num-s{margin:var(--s2) 0 0;font-family:var(--f-mono);font-size:13px;line-height:1.5;letter-spacing:0;color:var(--ink-2)}
.sl-oneline-s b{font-weight:400;color:var(--ink-2)}
.sl-oneline-i,.sl-num-i{white-space:nowrap}
@media (max-width:420px){.sl-oneline-n,.sl-num-n{font-size:76px}}
/* The status line: the stamp's word in its color in mono, then the sentence in serif; the research-chemical
   sentence under it */
.sl-legal{margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--rule)}
.sl-legal-line{margin:0 0 var(--s2);font-size:17px;line-height:1.5;color:var(--ink)}
.sl-legal-line:last-child{margin-bottom:0}
.sl-legal-line:first-child{font-weight:500}
.sl-legal-line b{margin-right:4px}
.sl-legal-line--sold{font-weight:400;color:var(--ink)}
/* a compound with no stamp (G, fix 6): its status line in mono, "IN TRIALS ONLY · nothing is sold · not compoundable" */
.sl-legal-line--none{font-family:var(--f-mono);font-size:14px}
/* The band: a 3px caution rule on the left, serif 15 in ink-2, no fill */
.sl-caution{margin-top:var(--s3);padding:12px 14px;border-left:3px solid var(--caution);color:var(--ink-2)}
/* in the hero, the band and the bottom line are the status block's paragraphs, 16 apart, as the file sets them, and the
   band is its rule alone: the note's vertical padding would put a long hero's doors past a screen and a half (Semax) */
.sl-hero .sl-legal + .sl-caution{margin-top:var(--s2);padding-block:0}
.sl-caution-in{display:grid;gap:var(--s1)}
.sl-caution-title{margin:0;font-size:15px;line-height:1.4;font-weight:500;color:var(--ink)}
.sl-caution-body .sl-caution-more{white-space:nowrap}
.sl-caution-body,.sl-caution-more{margin:0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.sl-caution-more a,.sl-see-changes a{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
/* The bottom line: serif 17 */
/* its label runs into its text, as the status line's stamp word does (the file sets the bottom line in the status block) */
.sl-bottom{margin-top:var(--s2)}
.sl-bottom .sl-label,.sl-bottom .sl-bottom-t{display:inline}
.sl-bottom .sl-label{margin-right:var(--s1)}
.sl-caution + .sl-bottom{margin-top:var(--s2)}
.sl-bottom-t{margin:0;font-size:17px;line-height:1.5;color:var(--ink)}
/* Buttons: primary (ink fill) and secondary (a 1.5px ink hairline), 52 px tall, serif 17, the arrow in mono;
   always a pair */
.sl-pair-doors{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s1);margin-top:var(--s3)}
.sl-btn,.sl-primary{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:52px;padding:12px 14px;border:1.5px solid var(--ink);border-radius:2px;background:transparent;color:var(--ink);font-family:var(--f-serif);font-size:17px;font-weight:400;line-height:1.2;text-align:left;cursor:pointer;text-decoration:none}
.sl-btn--primary,.sl-primary{background:var(--ink);color:var(--paper)}
.sl-btn-arrow{flex-shrink:0;font-family:var(--f-mono);font-size:14px}
.sl-btn svg,.sl-primary svg{flex-shrink:0;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5}
.sl-btn:disabled,.sl-primary:disabled{opacity:.5;cursor:not-allowed}
@media (max-width:420px){.sl-pair-doors{grid-template-columns:minmax(0,1fr)}}

/* 9. The sheet: key/value rows, the mono label left in ink-2, the mono 14 value right; a value over 80 characters is
   a block under its label; "Show all N" in mono --------------------------------------------------------------- */
.sl-dl{margin:var(--s5) 0 0;padding:0;border-top:1px solid var(--rule-2)}
.sl-dl > div{display:grid;grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:var(--s2);padding-block:12px;border-bottom:1px solid var(--rule)}
.sl-dl dt{margin:0;padding-top:3px;font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sl-dl dd{margin:0;font-family:var(--f-mono);font-size:14px;line-height:1.45;letter-spacing:0;text-align:right;color:var(--ink);overflow-wrap:anywhere}
.sl-dl > div.sl-dl-list{grid-template-columns:minmax(0,1fr);gap:0}
.sl-dl-list dd{display:grid;gap:6px;padding-top:2px;text-align:left}
.sl-dl-list ul{display:grid;gap:6px;list-style:none;margin:0;padding:0}
.sl-dl-list li{margin:0;padding:0}
.sl-dl--clip > div:nth-child(n+6){display:none}
.sl-dl-more{display:inline-block;margin-top:var(--s2);padding:0;background:none;border:0;color:var(--ink);font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px;cursor:pointer}
@media print{.sl-dl--clip > div:nth-child(n+6){display:grid}.sl-dl-more{display:none}}
.sl-dl .sl-meter{justify-content:flex-end}

/* 10. Chip row: hairline chips, mono 12, the current one filled ink; sticks under the header. The marker that
   slides from chip to chip is the fill (street-lab.js keeps --mx, --my, --mw and --mh on the row). From 720 px a
   compound page's section chips and /compounds/' group chips wrap instead of scrolling sideways, and the marker follows
   the current chip into its line (G, fix 4, 2026-10-15), and so do the homepage's goal chips (G, fix 6, 2026-10-17: from
   1024 px until then); phones keep the sideways scroll ------------------------------------------------------------ */
.sl-chips{position:relative;display:flex;flex-wrap:wrap;gap:var(--s1);margin:0;padding:0;list-style:none}
.sl-chips li{margin:0;padding:0}
.sl-chip{position:relative;z-index:1;display:inline-flex;align-items:center;min-height:32px;padding:7px 11px;border:1px solid var(--rule-2);border-radius:2px;background:none;font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.04em;color:var(--ink);white-space:nowrap;cursor:pointer;text-decoration:none}
.sl-chip:hover{border-color:var(--ink)}
.sl-chip[aria-current],.sl-chip[aria-pressed="true"],.sl-chip.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.sl-chip-n{margin-left:4px;opacity:.6}
.sl-chips--scroll,.sl-secchips .sl-chips,.sl-index > .sl-chips{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.sl-chips--scroll::-webkit-scrollbar,.sl-secchips .sl-chips::-webkit-scrollbar,.sl-index > .sl-chips::-webkit-scrollbar{display:none}
.sl-chips--scroll li,.sl-secchips li{flex:0 0 auto}
.sl-secchips{position:sticky;top:var(--head-h);z-index:30;margin:var(--s5) calc(-1 * var(--gutter)) 0;padding:0 var(--gutter);background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sl-secchips .sl-chips{padding-block:10px;margin:0 calc(-1 * var(--gutter));padding-inline:var(--gutter);scroll-padding-inline:var(--gutter)}
.sl-index > .sl-chips{position:sticky;top:var(--head-h);z-index:30;margin:var(--s3) calc(-1 * var(--gutter)) 0;padding:10px var(--gutter);background:var(--paper);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.sl-secchips .sl-chips::after,.sl-index > .sl-chips::after{content:"";position:absolute;z-index:0;left:0;top:0;width:var(--mw,0px);height:var(--mh,0px);background:var(--ink);border-radius:2px;transform:translate(var(--mx,0px),var(--my,0px));opacity:0;pointer-events:none;transition:transform .2s ease,width .2s ease,height .2s ease,opacity .15s}
.sl-secchips .sl-chips.sl-has-mark::after,.sl-index > .sl-chips.sl-has-mark::after{opacity:1}
.sl-secchips .sl-chips.sl-has-mark .sl-chip[aria-current],.sl-index > .sl-chips.sl-has-mark .sl-chip[aria-current]{background:transparent}
/* a jump lands its heading under the header and the sticky chip row, however many lines the row takes (street-lab.js
   keeps --chips-h, the row's height, on the root) */
.profile-section,.sl-index-group,[id^="ref-"]{scroll-margin-top:calc(var(--head-h) + var(--chips-h,var(--s5)) + var(--s2))}
@media (min-width:720px){
  .sl-secchips .sl-chips,.sl-index > .sl-chips,.sl-home > .sl-chips{flex-wrap:wrap;overflow-x:visible}
}

/* 11. The figure: a patent-style line drawing of the form the page's compound was studied in, its callouts in mono,
   the caption from the Route (studied) row. Hairline stroke in currentColor; no dose and no quantity on a drawing. */
.sl-fig{margin:var(--s5) 0 0;padding:var(--s3) 0 var(--s2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);color:var(--ink)}
.sl-fig svg{display:block;width:100%;max-width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round}
.sl-fig svg text{font-family:var(--f-mono);font-size:13px;fill:currentColor;stroke:none;letter-spacing:.06em}
.sl-fig svg .sl-fig-dash{stroke-dasharray:3 4}
.sl-fig figcaption{margin-top:var(--s2);font-family:var(--f-mono);font-size:13px;line-height:1.5;letter-spacing:0;color:var(--ink-2)}

/* 12. The read: H2 serif 30, question labels mono 12 in ink-2, body serif 17, citations as hairline-underlined
   links, one gap (48) before every H2 ---------------------------------------------------------------------- */
.sl-read{margin-top:var(--s5);overflow-wrap:break-word}
.sl-read h2,.sl-read .profile-section-title{margin:var(--s5) 0 var(--s2);padding:0;border:0;font-family:var(--f-serif);font-size:30px;font-weight:400;line-height:1.1;letter-spacing:-.015em;color:var(--ink);text-wrap:balance}
.sl-read h3{margin:var(--s3) 0 var(--s1);font-family:var(--f-serif);font-size:22px;font-weight:400;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.sl-read h4{margin:var(--s2) 0 var(--s1);font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sl-read p{margin:0 0 var(--s2);font-size:17px;line-height:1.5;color:var(--ink)}
.sl-read ul,.sl-read ol{margin:0 0 var(--s2);padding-left:var(--s3)}
.sl-read li{margin:0 0 var(--s1)}
.sl-read hr{margin:var(--s5) 0;border:0;border-top:1px solid var(--rule)}
.sl-read blockquote{margin:0 0 var(--s2);padding-left:var(--s2);border-left:1px solid var(--rule-2);color:var(--ink-2)}
.sl-read code{font-family:var(--f-mono);font-size:14px}
.profile-content,.profile-section{margin:0;padding:0}
/* one gap (48) before every H2: a section carries it, its own H2 none; the read's first part starts flush */
.sl-read .profile-section{margin-top:var(--s5)}
.sl-read > :first-child,.sl-read > .profile-content:first-child > .profile-section:first-child{margin-top:0}
.profile-section > h2:first-child,.profile-section > .profile-section-title:first-child{margin-top:0}
/* the Gist box: the other four questions, each a mono label over serif 17 */
.tldr-box{margin:0;padding:0;border:0}
.tldr-label{margin:0 0 var(--s2);font-family:var(--f-serif);font-size:30px;font-weight:400;line-height:1.1;letter-spacing:-.015em;color:var(--ink)}
.tldr-box p{margin:0;font-size:17px;line-height:1.5;color:var(--ink)}
.tldr-box p br{display:none}
.tldr-box p strong{display:block;margin:var(--s3) 0 4px;font-family:var(--f-mono);font-size:12px;font-weight:400;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.tldr-box p strong:first-child{margin-top:0}
.tldr-box p + p{margin-top:var(--s2)}
/* key points: a hairline between them */
.key-points{list-style:none;margin:0 0 var(--s2);padding:0;border-top:1px solid var(--rule)}
.key-points li{position:relative;margin:0;padding:12px 0 12px var(--s3);border-bottom:1px solid var(--rule);font-size:17px;line-height:1.5;color:var(--ink)}
.key-points li::before{content:"—";position:absolute;left:0;top:12px;color:var(--ink-2)}
.key-points li strong{font-weight:500}
/* a warning is the band: a 3px caution rule on the left, serif 15 in ink-2, no fill */
.warning-box{margin:var(--s3) 0;padding:12px 14px;border:0;border-left:3px solid var(--caution);background:none;color:var(--ink-2)}
.warning-box-title{margin:0 0 4px;font-size:15px;font-weight:500;line-height:1.4;color:var(--ink);font-family:var(--f-serif);letter-spacing:0;text-transform:none}
.warning-box p,.warning-box li{font-size:15px;line-height:1.5;color:var(--ink-2)}
.warning-box p:last-child{margin-bottom:0}
/* status, cost and notice boxes: hairlines, not boxes */
.status-box,.cost-access-box,.verdict-box,.pcac-notice,.component-card,.compare-card,.stack-card,.guide-callout,.precondition{margin:var(--s3) 0;padding:var(--s2) 0 0;border:0;border-top:1px solid var(--rule-2);background:none}
.status-box-label,.cost-access-box-label,.verdict-label{margin:0 0 var(--s1);font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.status-box p,.cost-access-box p,.verdict-box p,.pcac-notice,.pcac-notice p{font-size:17px;line-height:1.5;color:var(--ink)}
.cost-access-disclaimer{font-size:15px;color:var(--ink-2)}
.pcac-notice strong{font-weight:500}
.stack-card-name{margin:0 0 4px;font-family:var(--f-serif);font-size:22px;font-weight:400;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.stack-card-name a{text-decoration:none}
.stack-card p{margin:0 0 var(--s1)}
.stack-card p.sl-receipt-pair,.stack-card-pair{font-family:var(--f-mono);font-size:13px;line-height:1.5;color:var(--ink-2)}
.sl-receipt-line,.sl-dose-calc{margin:var(--s2) 0 0;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.sl-dose-open{padding-bottom:var(--s2);border-bottom:1px solid var(--rule)}
.comparison-crosslink{border-top:1px solid var(--rule-2)}
/* references: numbered in mono, a hairline between */
.references{list-style:none;counter-reset:ref;margin:0;padding:0;border-top:1px solid var(--rule)}
.references li{position:relative;counter-increment:ref;margin:0;padding:12px 0 12px var(--s4);border-bottom:1px solid var(--rule);font-size:15px;line-height:1.5;color:var(--ink-2);overflow-wrap:anywhere}
.references li::before{content:counter(ref);position:absolute;left:0;top:14px;font-family:var(--f-mono);font-size:12px;color:var(--ink)}
.references li:target{border-left:3px solid var(--ink);padding-left:var(--s4)}
.related-research-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.related-research-list li{margin:0;padding:12px 0;border-bottom:1px solid var(--rule)}
.related-research-list li a{font-weight:400}
.rr-note{display:block;margin-top:4px;font-size:15px;color:var(--ink-2)}
.pull-quote{margin:var(--s3) 0;font-size:22px;line-height:1.3;color:var(--ink)}
.badge{display:inline-block;margin-left:var(--s1);padding:5px 9px;border:1.5px solid currentColor;border-radius:2px;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;vertical-align:middle;line-height:1.2;color:var(--ink)}
.badge-green{color:var(--green)}
.badge-gold,.badge-red{color:var(--ink)}
/* Dose tables: sheet rows at phone width, each cell under its column's name; tables from 720 px with mono cells */
.sl-tablewrap{max-width:100%;overflow-x:auto;margin:var(--s3) 0}
.dosing-table{width:100%;border-collapse:collapse;margin:0;font-family:var(--f-mono);font-size:14px;line-height:1.45}
.dosing-table th{padding:var(--s1) var(--s2) var(--s1) 0;border-bottom:1px solid var(--rule-2);text-align:left;vertical-align:bottom;font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.dosing-table td{padding:12px var(--s2) 12px 0;border-bottom:1px solid var(--rule);vertical-align:top;color:var(--ink)}
@media (max-width:719px){
  .dosing-table,.dosing-table tbody,.dosing-table tr,.dosing-table td{display:block;width:100%}
  .dosing-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .dosing-table tr{border-top:1px solid var(--rule-2)}
  .dosing-table tr:last-child{border-bottom:1px solid var(--rule-2)}
  /* each cell a sheet row: its column's name left in mono 12, the value beside it; the label sits beside the cell's own
     text, so a citation inside a value stays in its sentence */
  .dosing-table td{position:relative;padding:12px 0 12px calc(38% + var(--s2));border:0;border-bottom:1px solid var(--rule)}
  .dosing-table tr td:last-child{border-bottom:0}
  .dosing-table td[data-label]::before{content:attr(data-label);position:absolute;left:0;top:12px;padding-top:3px;width:38%;font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
  .dosing-table td:not([data-label]){padding-left:0}
}

/* 13. Row: replaces the card everywhere. Name serif 22, hook serif 16 in ink-2, the meter (five 8×8 squares,
   rule / ink) with the evidence word in mono, the stamp at the right, a hairline below; no border, no fill. The
   card's other words stay: its use tag and route word over the name, "for another use" under the stamp, the red
   flag and the Checked date under the meter. */
.sl-rows{display:grid;margin:var(--s2) 0 0;padding:0;list-style:none;border-top:1px solid var(--rule-2)}
.sl-rows > li{margin:0;padding:0}
.sl-row{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s2);align-items:start;padding-block:var(--s2);border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.sl-row > *{grid-column:1}
.sl-row > .sl-row-tag,.sl-row > .sl-row-meter,.sl-row > .sl-row-flag,.sl-row > .sl-row-upd,.sl-row > .sl-row-tip{grid-column:1 / -1}
.sl-row-tag{font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sl-row-name{margin-top:4px;grid-row:2;font-family:var(--f-serif);font-size:22px;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.sl-row-class{grid-row:3;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s1);font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:0;color:var(--ink-2)}
.sl-row-goals{display:inline-flex;flex-wrap:wrap;gap:var(--s1)}
.sl-row-goal{padding:0 var(--s1);border:1px solid var(--rule-2);border-radius:2px;font-size:11px;line-height:1.5;letter-spacing:.04em;white-space:nowrap}
.sl-row-hook{margin:6px 0 10px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.sl-row-legal{grid-column:2;grid-row:2 / span 3;display:flex;flex-direction:column;align-items:flex-end;gap:var(--s1);margin-top:4px}
.sl-row-for{font-family:var(--f-mono);font-size:12px;letter-spacing:0;color:var(--ink-2);white-space:nowrap}
.sl-row-flag{display:flex;align-items:baseline;gap:var(--s1);margin-top:var(--s1);font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--red-text)}
.sl-row-flag::before{content:"";flex-shrink:0;width:7px;height:7px;border-radius:50%;background:var(--red);transform:translateY(-1px)}
.sl-row-upd{margin-top:var(--s1);font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sl-row:hover .sl-row-name{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
/* the meter (G, fix 2, 2026-10-15): five 8 x 8 squares, 3 px apart, one per level, lit in ink up to the compound's
   own, the rest in rule, then its word in mono (five 16 x 5 segments until fix 2) */
.sl-meter{display:inline-flex;align-items:center;flex-wrap:wrap;gap:var(--s1)}
.sl-meter-sq{display:inline-flex;gap:3px}
.sl-meter-sq i{display:block;width:8px;height:8px;background:var(--rule)}
.sl-meter-sq i.on{background:var(--ink)}
.sl-meter-label{font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
/* the three tiers within a group, each under a divider in its stamp's words and color, with its count */
.sl-tier{margin:var(--s3) 0 0}
.sl-tier-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin:0;padding:0 0 var(--s1);border-bottom:1px solid var(--rule-2)}
.sl-tier-h span{font-family:var(--f-mono);font-size:12px;color:var(--ink-2)}
.sl-tier .sl-rows{margin-top:0;border-top:0}

/* Pair row: mono 13 */
.sl-tested-rows,.sl-pair-rows{margin:var(--s2) 0 0;padding:0;list-style:none;border-top:1px solid var(--rule-2)}
.sl-tested-rows li,.sl-pair-rows li{margin:0}
.sl-tested-row,.sl-pair-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px var(--s2);padding-block:var(--s2);border-bottom:1px solid var(--rule);font-family:var(--f-mono);font-size:13px;line-height:1.5;color:var(--ink);text-decoration:none}
.sl-tested-n,.sl-pair-row-name{flex:1 1 auto;color:var(--ink)}
.sl-tested-l,.sl-pair-row-people{color:var(--ink-2)}
.sl-pair-row{display:grid;justify-content:stretch;gap:4px}
.sl-pair-row .sl-meter{order:2}
.sl-pair-row-people{order:3}
.sl-tested-r{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.sl-tested-none{margin:var(--s2) 0 0;padding-block:var(--s2);border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule);font-family:var(--f-mono);font-size:13px;line-height:1.5;color:var(--ink-2)}
.sl-tested-none a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.sl-tested-row:hover .sl-tested-n,.sl-pair-row:hover .sl-pair-row-name{text-decoration:underline;text-underline-offset:3px}

/* 14. The page's end: the two doors again, Share this page, Same group, what was tested together in people, every
   change ------------------------------------------------------------------------------------------------------- */
.sl-closure{display:grid;gap:var(--s2);margin-top:var(--s5)}
.sl-closure .sl-pair-doors{margin-top:0}
/* Share this page (G, fix 2, 2026-10-15): the secondary button, a door's width, after the doors; "Link copied" in mono
   beside it for two seconds. Without JavaScript it doesn't show. */
.sl-share{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s1);align-items:center}
.sl-share-btn{width:100%}
.sl-share-done{font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;color:var(--ink);overflow-wrap:anywhere}
.sl-share-done:empty{position:absolute}  /* empty, it takes no row (and stays a live region: never display:none) */
html:not(.sl-js) .sl-share{display:none}
.sl-page--stack .sl-share,.sl-page--pair .sl-share,.sl-receipt-out .sl-share{margin-top:var(--s5)}
.sl-page--tracker .sl-share{margin-top:var(--s3)}
@media (max-width:420px){.sl-share{grid-template-columns:minmax(0,1fr)}}
.sl-closure-part{margin-top:var(--s3)}
.sl-closure-part .sl-rows{margin-top:var(--s1)}
.sl-closure-changes{margin:var(--s3) 0 0;font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.sl-updated,.sl-page p.sl-updated{margin:var(--s2) 0 0;text-align:left}
.sl-see-changes{margin:var(--s3) 0 0}
/* the author box: the same on every compound page, above a hairline */
.sl-author{margin-top:var(--s5);padding-top:var(--s3);border-top:1px solid var(--rule-2)}
.sl-author > p{margin:0 0 var(--s2);font-size:17px;line-height:1.5;color:var(--ink)}
.sl-author > a{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.sl-author .sl-byline{margin-top:var(--s2)}

/* 15. Search: the field as a hairline, up to six rows; the overlay is paper ---------------------------------------- */
.sl-search{position:relative;display:grid;gap:var(--s1);margin:var(--s3) 0 0}
.sl-search label{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sl-search-field{display:flex;align-items:center;gap:var(--s1);min-height:52px;border-bottom:1px solid var(--rule-2);color:var(--ink)}
.sl-search-field:focus-within{border-bottom-color:var(--ink)}
.sl-search-field svg{flex-shrink:0;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.sl-search-field input{flex:1;min-width:0;height:52px;margin:0;padding:0;background:transparent;border:0;outline:0;color:var(--ink);font-family:var(--f-serif);font-size:22px;line-height:1.2;-webkit-appearance:none;appearance:none}
.sl-search-field input::placeholder{color:var(--ink-2);opacity:1}
.sl-search-field input:focus-visible{outline:0}
.sl-search-field input[type="search"]::-webkit-search-cancel-button,.sl-search-field input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.sl-search-field button{flex-shrink:0;min-height:44px;padding:0 var(--s2);background:var(--ink);color:var(--paper);border:0;border-radius:2px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.sl-ta{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule-2);background:var(--paper)}
.sl-search > .sl-ta{position:absolute;left:0;right:0;top:100%;z-index:30;border-bottom:1px solid var(--rule-2)}
.sl-ta li{margin:0;padding:0}
.sl-ta a{display:block;color:var(--ink);text-decoration:none}
.sl-ta .sl-ta-none{padding:var(--s2) 0;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sl-ta a.sl-sr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s2);align-items:start;padding-block:var(--s2);border-bottom:1px solid var(--rule)}
.sl-sr-n{grid-column:1;font-family:var(--f-serif);font-size:22px;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.sl-sr-st{grid-column:2;grid-row:1 / span 2;margin-top:4px}
.sl-sr-l{grid-column:1;margin-top:6px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.sl-sr-m{grid-column:1 / -1;margin-top:var(--s1)}
.sl-sr-k{grid-column:1 / -1;margin-top:4px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sl-ta [aria-selected="true"] .sl-sr-n,.sl-ta a:hover .sl-sr-n{text-decoration:underline;text-decoration-color:var(--ink);text-underline-offset:3px}
.sl-so{position:fixed;inset:0;z-index:60;display:flex;justify-content:center;align-items:flex-start;padding:var(--s2) var(--gutter) var(--s3);background:var(--paper);overflow-y:auto}
.sl-so-in{width:100%;max-width:var(--col)}
.sl-so-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s2)}
.sl-so-x{min-width:44px;min-height:44px;padding:0 var(--s1);background:transparent;border:1px solid var(--rule-2);border-radius:2px;color:var(--ink);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.sl-so .sl-ta{margin-top:var(--s1);border-top:0;border-bottom:0}
.sl-so .sl-search{margin-top:0}
html.sl-so-open{overflow:hidden}

/* 16. Empty states: serif 30 over mono 12 ------------------------------------------------------------------------ */
.sl-empty{display:grid;gap:var(--s1)}
.sl-empty-t{margin:0;font-family:var(--f-serif);font-size:30px;font-weight:400;line-height:1.1;letter-spacing:-.015em;color:var(--ink)}
.sl-empty-s{margin:0;font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}

/* 17. Footer: three lines (the disclaimer sentence in mono 12, the links, the copyright) above a hairline --------- */
.sl-footer{margin-top:var(--s6);color:var(--ink-2)}
.sl-footer-in{display:grid;gap:var(--s1);max-width:calc(var(--col) + 2 * var(--gutter));margin:0 auto;padding:var(--s3) var(--gutter) var(--s5);border-top:1px solid var(--rule-2);font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase}
.sl-footer p{margin:0}
.sl-footer-doors{display:inline}
.sl-footer-mail{text-transform:none}

/* 18. Small shared parts ----------------------------------------------------------------------------------------- */
.sl-back{display:inline-block;margin-bottom:var(--s2);color:var(--ink-2);text-decoration:none}
.sl-back:hover{color:var(--ink)}
@media (max-width:768px){.sl-page--compound:not(.sl-page--stack) .sl-compound > .sl-back{display:none}}
.sl-line-link,.sl-goal-more,.sl-home-first,.sl-receipt-pagelink,.sl-receipt-index,.sl-alerts-more,.sl-coa-door{margin:var(--s2) 0 0;font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.sl-line-link a,.sl-goal-more a,.sl-home-first a,.sl-receipt-pagelink a,.sl-receipt-index a,.sl-coa-door a,.sl-browse,.sl-group-all{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.sl-btn-ghost{display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
/* The counts (G, fix 3, 2026-10-15): three numbers in the number style, each a link to where it is shown or explained,
   stacked under 720 px and side by side from it (at 76 until 1024 px, where three at 96 fit the site's width) */
.sl-counts{display:grid;gap:var(--s3);margin:var(--s5) 0 0;padding:var(--s3) 0 0;list-style:none;border-top:1px solid var(--rule-2)}
.sl-counts li{margin:0;padding:0}
.sl-count{display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.sl-count:hover .sl-num-c{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
@media (min-width:720px){.sl-counts{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s3)}}
@media (min-width:720px) and (max-width:1023px){.sl-counts .sl-num-n{font-size:76px}}
.sl-changed{margin:var(--s5) 0 0;padding-top:var(--s2);border-top:1px solid var(--rule-2);font-family:var(--f-mono);font-size:13px;line-height:1.5;color:var(--ink)}
.sl-changed-col{display:grid;gap:var(--s2)}
.sl-changed-items{display:grid;gap:var(--s1);list-style:none;margin:0;padding:0}
.sl-changed-items li{margin:0}
.sl-changed-items b{font-weight:400;color:var(--ink-2)}
/* the first line, where a page was added in the last 30 days (G, fix 6, 2026-10-17): "New:" and the pages, linked */
.sl-changed-new{margin:0}
.sl-changed-new b{font-weight:400;color:var(--ink-2)}
.sl-changed-all{font-size:12px;letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.sl-change-why{display:block;margin-top:4px;font-family:var(--f-mono);font-size:13px;color:var(--ink-2)}

/* 19. Page templates -------------------------------------------------------------------------------------------- */
/* Homepage: the headline at 46, the sub-line in italic 24, the guide's link, the search, the four doors as rows,
   what changed in mono, the counts, the goal chips, the Three to start with as rows (one of each status, G, fix 4,
   2026-10-15; the Four to start with until then), the card with the mission box's words above a hairline */
.sl-home-hero{display:grid;gap:var(--s2)}
.sl-home-line{margin:0;font-size:24px;line-height:1.2;font-style:italic;color:var(--ink)}
.sl-home-first{margin:0}
.sl-doors{display:grid;margin:var(--s5) 0 0;border-top:1px solid var(--rule-2)}
.sl-door{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--s2);align-items:baseline;padding-block:var(--s2);border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.sl-door-n{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2)}
.sl-door-t{display:grid;gap:4px}
.sl-door-t b{font-family:var(--f-serif);font-size:22px;font-weight:400;line-height:1.15;letter-spacing:-.01em}
.sl-door-t span{font-size:16px;line-height:1.5;color:var(--ink-2)}
.sl-door:hover b{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.sl-home > .sl-chips{margin-top:var(--s5)}
.sl-home-cards{margin-top:var(--s5)}
.sl-home-cards .sl-rows{margin-top:var(--s1)}
.sl-browse{display:inline-block;margin-top:var(--s2);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.sl-home .sl-author{margin-top:var(--s5)}
/* The homepage at a desktop (G, fix 2, 2026-10-15): from 1024 px the page takes the site's width; the headline at the
   number's size (76), the italic line at 30, the guide's link under it; the search across the column; the four doors as
   a 2 x 2 grid of hairline rows; what changed, the counts, the chips (wrapping from 720 px since fix 6); the
   Three to start with side by side, in the stamps' traffic-light order (fix 4; the Four were two rows of two); the card,
   its words at the reading column's width. Phones and tablets keep the one column. */
@media (min-width:1024px){
  .sl-main.sl-home{max-width:calc(var(--site) + 2 * var(--gutter))}
  .sl-home .sl-h1--home{font-size:76px}
  .sl-home-line{font-size:30px}
  .sl-home .sl-doors{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--s5)}
  .sl-home-cards .sl-rows{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--s5)}
  .sl-home-cards .sl-rows > li{display:grid}
  .sl-home .sl-author > p,.sl-home .sl-author .sl-byline{max-width:var(--col)}
}
/* /compounds/: the groups, three rows each until a group opens in place */
.sl-index-group{margin-top:var(--s5)}
.sl-index-group h2{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);margin:0;font-family:var(--f-serif);font-size:30px;font-weight:400;line-height:1.1;letter-spacing:-.015em}
.sl-index-group h2 > span{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2)}
.sl-index-count{margin:var(--s2) 0 0}
.sl-index-count:empty{display:none}
.sl-index:not(.sl-index--all) .sl-index-group:not(.is-open):not(:target) .sl-tier,
.sl-index:not(.sl-index--all) .sl-index-group:not(.is-open):not(:target) .sl-tier > .sl-rows{display:contents}
.sl-index:not(.sl-index--all) .sl-index-group:not(.is-open):not(:target) .sl-tier-h,
.sl-index:not(.sl-index--all) .sl-index-group:not(.is-open):not(:target) li:not([data-pick]){display:none}
.sl-index:not(.sl-index--all) .sl-index-group:not(.is-open):not(:target){display:flex;flex-direction:column}
.sl-index:not(.sl-index--all) .sl-index-group:not(.is-open):not(:target) h2{margin-bottom:var(--s2);padding-bottom:var(--s1);border-bottom:1px solid var(--rule-2)}
.sl-index-group li[data-pick="1"]{order:1}
.sl-index-group li[data-pick="2"]{order:2}
.sl-index-group li[data-pick="3"]{order:3}
.sl-group-all{order:4;display:inline-block;align-self:flex-start;margin-top:var(--s2);font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.sl-index--all .sl-group-all,.sl-index-group.is-open .sl-group-all,.sl-index-group:target .sl-group-all{display:none}
/* Also here (G, fix 4, 2026-10-15): the rest of a collapsed group, name only, under its three rows and above "All N" */
.sl-also-here{order:4;margin:var(--s2) 0 0;font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:0;color:var(--ink-2)}
.sl-also-here a{color:var(--ink);white-space:nowrap}
.sl-index--all .sl-also-here,.sl-index-group.is-open .sl-also-here,.sl-index-group:target .sl-also-here{display:none}
/* Goal pages */
.sl-goal-note{margin:var(--s2) 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.sl-goal-facts{margin-top:var(--s5)}
.sl-goal-also{margin:var(--s3) 0 0;font-size:17px;line-height:1.5;color:var(--ink)}
.sl-goal-also b{font-weight:500}
.sl-goal .sl-tier{margin-top:var(--s5)}
.sl-hero > .sl-gist{margin-top:var(--s3)}
.sl-hero > .sl-lead{margin-top:var(--s2)}
/* The receipt: the label, the number (what was tested together in people), the sheet, the scope, what each does alone
   as rows, the mechanism overlap, what the studies found */
.sl-receipt{margin-top:var(--s5)}
.sl-receipt-kicker{margin:0}
/* its first line, the number (G, fix 3, 2026-10-15): the studies that gave the two to people together, 0 where none */
.sl-receipt-n{margin-top:var(--s2)}
.sl-receipt-dl{margin-top:var(--s1)}
.sl-receipt-n + .sl-receipt-dl{margin-top:var(--s3)}
.sl-receipt-label{margin:var(--s5) 0 0}
.sl-receipt-mech{margin-top:var(--s1)}
.sl-receipt-mech dd{text-align:right}
.sl-receipt-cites{margin:var(--s2) 0 0;font-family:var(--f-mono);font-size:13px;line-height:1.5;color:var(--ink-2)}
.sl-receipt-scope{display:grid;gap:var(--s1);margin-top:var(--s3)}
.sl-receipt-note{margin:var(--s2) 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
.sl-receipt-study{margin:var(--s3) 0 var(--s1);font-size:17px;line-height:1.5;color:var(--ink)}
.sl-receipt-study strong{font-weight:500}
.sl-receipt-plain{margin:var(--s2) 0 0;font-size:17px;font-weight:500;line-height:1.5;color:var(--ink)}
.sl-receipt-title{margin:0;font-family:var(--f-serif);font-size:30px;font-weight:400;line-height:1.1;letter-spacing:-.015em}
.sl-receipt-out:empty{display:none}
.sl-receipt-out:focus{outline:0}
.sl-receipt-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s2)}
@media (min-width:640px){.sl-receipt-fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.sl-receipt-pick{display:grid;gap:var(--s2);margin:var(--s3) 0 0}
.sl-receipt-hint{margin:0;font-family:var(--f-mono);font-size:12px;line-height:1.5;color:var(--ink-2)}
.sl-receipt-pick .combobox{position:relative;display:grid;gap:var(--s1)}
.sl-receipt-pick .combobox label{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sl-receipt-pick .combobox > input{width:100%;min-height:52px;padding:0;background:transparent;border:0;border-bottom:1px solid var(--rule-2);border-radius:0;color:var(--ink);font-family:var(--f-serif);font-size:22px;outline:0}
.sl-receipt-pick .combobox > input:focus-visible{border-bottom-color:var(--ink)}
.sl-receipt-pick .combobox > input::placeholder{color:var(--ink-2);opacity:1}
.sl-receipt-pick .dropdown{position:absolute;top:100%;left:0;right:0;z-index:20;max-height:288px;overflow-y:auto;margin:0;padding:0;list-style:none;background:var(--paper);border:1px solid var(--rule-2);border-top:0}
.sl-receipt-pick .dropdown li{padding:12px var(--s2);border-bottom:1px solid var(--rule);font-size:17px;color:var(--ink);cursor:pointer}
.sl-receipt-pick .dropdown li.active,.sl-receipt-pick .dropdown li:hover{background:var(--ink);color:var(--paper)}
.sl-receipt-pick .dropdown li.sl-combo-none{color:var(--ink-2);cursor:default;background:none}
.sl-receipt-stacks{margin-top:var(--s2)}
.sl-receipt-stacks-label{margin-top:var(--s5)}
.sl-receipt-change,.sl-receipt-how{display:none}
.sl-receipt-page.is-picked .sl-receipt-change,.sl-receipt-page.is-picked .sl-receipt-how{display:block}
.sl-receipt-page.is-picked .sl-hero .sl-lead{display:none}
.sl-receipt-page.is-picked{display:flex;flex-direction:column}
.sl-receipt-page.is-picked > .sl-hero{order:1}
.sl-receipt-page.is-picked > .sl-receipt-out{order:2}
.sl-receipt-page.is-picked > .sl-receipt-change{order:3;margin-top:var(--s5)}
.sl-receipt-page.is-picked > .sl-receipt-pick{order:4}
.sl-receipt-page.is-picked > .sl-receipt-stacks-label{order:5}
.sl-receipt-page.is-picked > .sl-receipt-stacks{order:6}
.sl-receipt-page.is-picked > .sl-receipt-how{order:7}
.sl-receipt-page.is-picked > .sl-receipt-index,.sl-receipt-page.is-picked > .sl-coa-door--hub{order:8}
.sl-receipt-how{margin:var(--s3) 0 0;font-size:17px;line-height:1.5;color:var(--ink)}
.sl-hub-pairs,.sl-hub-stacks{margin-top:var(--s5)}
.sl-hub-line{margin:var(--s3) 0 0;font-size:22px;line-height:1.3}
.sl-hub-hero{margin-bottom:0}
/* /stacks/ (G, fix 5, 2026-10-15): the hero's one line, then the named stacks first, as rows, no card: the name (the
   whole row opens its page), the compounds in it, each linked, the goal, what has been tested together, the arrow; one
   door row to the receipt; then the pairs tested together in people, under one label */
.sl-stacks-index .sl-oneline + .sl-lead{margin-top:var(--s3)}
.sl-stack-rows{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule-2)}
.sl-stack-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s2);padding-block:var(--s2);border-bottom:1px solid var(--rule)}
.sl-stack-row > :not(.sl-stack-row-go){grid-column:1}
.sl-stack-row-go{grid-column:2;grid-row:1 / span 4;align-self:center;font-family:var(--f-mono);font-size:14px;color:var(--ink)}
.sl-stack-row-name{font-size:22px;line-height:1.15;letter-spacing:-.01em;color:var(--ink)}
.sl-stack-row-name::after{content:"";position:absolute;inset:0}
.sl-stack-row:hover .sl-stack-row-name{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.sl-stack-row-in,.sl-stack-row-goal,.sl-stack-row-said{margin:0}
.sl-stack-row-in{position:relative;z-index:1;margin-top:var(--s1);font-family:var(--f-mono);font-size:13px;line-height:1.5;color:var(--ink)}
.sl-stack-row-in a{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.sl-stack-row-in a:hover{text-decoration-color:var(--ink)}
.sl-stack-row-goal{font-size:16px;line-height:1.5;color:var(--ink-2)}
.sl-built-on{margin:var(--s3) 0 0;font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sl-stack-row-said{font-family:var(--f-mono);font-size:12px;line-height:1.5;color:var(--ink-2)}
.sl-door-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:52px;padding-block:var(--s2);border-bottom:1px solid var(--rule);font-size:17px;line-height:1.3;color:var(--ink)}
.sl-door-row-go{flex-shrink:0;font-family:var(--f-mono);font-size:14px}
.sl-door-row:hover span:first-child{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.sl-hub-tested{margin-top:var(--s6)}
.sl-hub-tested-h{color:var(--ink)}
.sl-hub-tested > .sl-hub-tested-h + .sl-hub-pairs{margin-top:var(--s3)}
/* /alerts.html#<slug>: the compound's status now and its last change, shown when the address names it */
.sl-alert-for{display:none;margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--rule-2)}
.sl-alert-for:target{display:grid;gap:var(--s1)}
.sl-alert-for p{margin:0}
.sl-alert-for-now{font-family:var(--f-mono);font-size:14px;line-height:1.5;color:var(--ink)}
.sl-alert-for-last{font-size:17px;line-height:1.5;color:var(--ink)}
/* Corrections and changes: one entry per line, the date and page in mono */
.sl-fixes{margin:var(--s3) 0 0;padding:0;list-style:none;border-top:1px solid var(--rule-2)}
.sl-fixes li{margin:0;padding:12px 0;border-bottom:1px solid var(--rule);font-size:17px;line-height:1.5;color:var(--ink)}
.sl-fix-meta{display:block;margin-bottom:4px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sl-fix-body b{font-weight:500}
.sl-fix-filter{margin:var(--s3) 0 0;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sl-changes--short{margin-bottom:var(--s2)}
.sl-check-counts{margin:0;padding-block:12px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-family:var(--f-mono);font-size:13px !important;line-height:1.5;color:var(--ink-2) !important}
.sl-check-counts + .sl-check-counts{border-top:0}  /* one rule between two, as the sheet's rows */
.sl-check-counts b{font-weight:500;color:var(--ink)}
.sl-check-quote{padding-left:var(--s2);border-left:1px solid var(--rule-2)}
/* The FDA tracker: the board as rows with stamps, the timeline as a hairline-left list */
.tracker-main{max-width:calc(var(--col) + 2 * var(--gutter));margin:0 auto;padding:var(--s3) var(--gutter) var(--s5)}
.tracker-dek,.tracker-lead{margin:var(--s2) 0 0;font-size:22px;line-height:1.3;color:var(--ink)}
.tracker-updated,.tracker-footer-note{margin:var(--s2) 0 0;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
/* its headline as a number (G, fix 3, 2026-10-15): the H1's sentence, kept for search, is the mono line above it, as
   the calculator sets its H1; the number, its italic line and the panel's vote under it in the number style */
.sl-page--tracker .tracker-h1{font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sl-tracker-n{margin-top:var(--s2)}
.sl-tracker-alerts{margin:var(--s2) 0 0;font-family:var(--f-mono);font-size:13px;line-height:1.5;color:var(--ink-2)}
.sl-board{margin:var(--s3) 0 0;padding:0;list-style:none;border-top:1px solid var(--rule-2)}
.sl-board-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name stamp" "line line" "vote vote";align-items:start;column-gap:var(--s2);margin:0;padding-block:var(--s2);border-bottom:1px solid var(--rule)}
.sl-board-name{grid-area:name;font-family:var(--f-serif);font-size:22px;line-height:1.15;letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.sl-board-name:hover{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px}
.sl-board-stamp{grid-area:stamp;margin-top:4px}
.sl-board-line{grid-area:line;margin-top:6px;font-size:16px;line-height:1.5;color:var(--ink-2)}
.sl-board-vote{grid-area:vote;margin-top:var(--s1);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sl-timeline,.key-dates-dl{margin:var(--s3) 0 0;padding:0 0 0 var(--s2);border-left:1px solid var(--rule-2)}
.sl-timeline dt,.key-dates-dl dt{margin:var(--s3) 0 4px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sl-timeline dt:first-child,.key-dates-dl dt:first-child{margin-top:0}
.sl-timeline dd,.key-dates-dl dd{margin:0;font-size:17px;line-height:1.5;color:var(--ink)}
.sl-tl-when{font-style:normal}
.sl-tl-meta{display:block;margin-top:var(--s1);font-family:var(--f-mono);font-size:13px;line-height:1.5;color:var(--ink-2)}
.sl-tl-k{font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.key-dates-label{margin:var(--s5) 0 0}
.sl-tracker-now{display:block;margin-top:4px;font-family:var(--f-mono);font-size:13px;color:var(--ink-2)}
.tracker-list,.events-list,.tracker-sources{list-style:none;margin:0 0 var(--s2);padding:0;border-top:1px solid var(--rule)}
.tracker-list li,.events-list li,.tracker-sources li{position:relative;margin:0;padding:12px 0;border-bottom:1px solid var(--rule);font-size:17px;line-height:1.5}
.tracker-sources li{font-size:15px;color:var(--ink-2)}
.events-list li.done{padding-left:var(--s2);border-left:1px solid var(--rule-2)}
.history-marker{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
/* About, the guide and the other article pages: the same components, one column */
.page-header,.page-hero{margin:0}
.page-header-label{margin:0 0 var(--s1);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.page-header h1 em{font-style:normal}
.lede{margin:var(--s2) 0 0;font-size:22px;line-height:1.3;color:var(--ink)}
.back-link-wrap{margin:var(--s3) 0 0}
.back-link{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.guide-article{margin-top:var(--s5)}
.guide-callout strong{font-weight:500}
.rules-list{list-style:none;margin:0 0 var(--s2);padding:0;border-top:1px solid var(--rule)}
.rules-list li{margin:0;padding:12px 0;border-bottom:1px solid var(--rule)}
.rules-list li p{margin:0}
.sl-guide-gist{margin:0 0 var(--s4)}
.sl-gist-lines{display:grid;gap:var(--s1);list-style:none;margin:0;padding:0}
.sl-gist-lines li{margin:0;font-size:17px;line-height:1.5}
.sl-gist-lines li::before{content:none}
.sl-guide-doors{margin:var(--s5) 0 0}
.sl-guide-goal{padding-block:var(--s2);border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule)}
.sl-guide-goal .sl-door-t{display:block;margin:0 0 var(--s2)}
.sl-guide-goal .sl-door-t > span:last-child{display:block;margin-top:4px}
.sl-doors--guide{margin-top:0;border-top:0}
.compare-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);margin:var(--s3) 0}
.compare-card-head,.component-card-name{font-family:var(--f-serif);font-size:22px;line-height:1.15;letter-spacing:-.01em}
.compare-card-aka,.component-card-meta{margin-top:4px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.compare-card dl{margin:var(--s2) 0 0}
.compare-card dt{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.compare-card dd{margin:0 0 var(--s1);font-size:17px}
.component-card-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s1);margin-bottom:var(--s1)}
.profile-header{display:grid;gap:var(--s2)}
.profile-category{margin:0;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.profile-name{margin:0;font-family:var(--f-serif);font-size:46px;font-weight:400;line-height:1;letter-spacing:-.02em}
.profile-aka{margin:0;font-family:var(--f-mono);font-size:13px;color:var(--ink-2)}
@media (max-width:420px){.profile-name{font-size:40px}}
/* the article pages' own frames (the tracker, About, the guide): the same column, H1 and H2 as every page */
.sl-page > main:not(.sl-main):not(.tracker-main){max-width:calc(var(--col) + 2 * var(--gutter));margin:0 auto;padding:var(--s3) var(--gutter) var(--s5);overflow-wrap:break-word}
.sl-page > a.back{display:block;max-width:calc(var(--col) + 2 * var(--gutter));margin:var(--s3) auto 0;padding:0 var(--gutter);font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);text-decoration:none}
.sl-page > a.back + main{padding-top:var(--s2)}
.tracker-h1,.page-header h1,.page-hero h1{margin:0;font-family:var(--f-serif);font-size:46px;font-weight:400;line-height:1;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.tracker-main > h2,.guide-article > h2,.page-header + h2{margin:var(--s5) 0 var(--s2);font-family:var(--f-serif);font-size:30px;font-weight:400;line-height:1.1;letter-spacing:-.015em;color:var(--ink)}
.tracker-main > h2 .history-marker{margin-left:var(--s1)}
.key-dates-label{font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
@media (max-width:420px){.tracker-h1,.page-header h1,.page-hero h1{font-size:40px}}
/* the 404 */
.sl-notfound .sl-search{margin-top:var(--s3)}
.sl-notfound .sl-chips{margin-top:var(--s3)}

/* 20. From 1024 px a compound page is two columns: the read on the left at 640, and the sheet, the two doors and
   Same group sticky on the right at 360 -------------------------------------------------------------------------- */
.sl-side-group{display:none}
@media (min-width:1024px){
  .sl-main.sl-compound:not(.sl-pair){max-width:calc(var(--site) + 2 * var(--gutter));display:grid;grid-template-columns:minmax(0,var(--col)) minmax(0,var(--side));column-gap:var(--s6);row-gap:0;align-items:start}
  .sl-main.sl-compound:not(.sl-pair) > *{grid-column:1}
  .sl-main.sl-compound:not(.sl-pair) > .sl-side{grid-column:2;grid-row:1 / span 40;position:sticky;top:calc(var(--head-h) + var(--s3));max-height:calc(100vh - var(--head-h) - var(--s5));overflow-y:auto;scrollbar-width:thin;margin-top:var(--s3)}
  .sl-side .sl-pair-doors{grid-template-columns:minmax(0,1fr);margin-top:0}
  .sl-side .sl-dl{margin-top:var(--s3)}
  .sl-side-group{display:block;margin-top:var(--s5)}
  .sl-side-group .sl-rows{margin-top:var(--s1)}
  .sl-closure .sl-closure-part--group{display:none}
  .sl-main.sl-compound:not(.sl-pair) > .sl-secchips{margin-left:0;margin-right:0;padding-inline:0}
  .sl-main.sl-compound:not(.sl-pair) > .sl-secchips .sl-chips{margin-inline:0;padding-inline:0}
}
@media (min-width:1024px) and (max-height:640px){.sl-main.sl-compound:not(.sl-pair) > .sl-side{position:static;max-height:none}}

/* 21. Motion: exactly the scroll's. A row's name and stamp grow into the page's H1 and stamp; the hero stamp lands
   once; a meter fills as it comes into view; the chip marker slides. 300 ms at most, nothing loops, reduced motion
   turns it all off. */
@view-transition{navigation:auto}
::view-transition-group(*){animation-duration:.25s;animation-timing-function:ease}
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
@keyframes sl-land{from{transform:rotate(-4deg) scale(1.15)}to{transform:rotate(-2deg) scale(1)}}
.sl-titlerow .sl-stamp{animation:sl-land .18s ease-out both}
html.sl-vt .sl-titlerow .sl-stamp{animation:none}
html.sl-js .sl-meter:not(.is-seen) .sl-meter-sq i.on{background:var(--rule)}
.sl-meter.is-seen .sl-meter-sq i{transition:background-color .2s ease}
.sl-meter.is-seen .sl-meter-sq i:nth-child(2){transition-delay:.02s}
.sl-meter.is-seen .sl-meter-sq i:nth-child(3){transition-delay:.04s}
.sl-meter.is-seen .sl-meter-sq i:nth-child(4){transition-delay:.06s}
.sl-meter.is-seen .sl-meter-sq i:nth-child(5){transition-delay:.08s}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .sl-titlerow .sl-stamp{animation:none}
  html.sl-js .sl-meter:not(.is-seen) .sl-meter-sq i.on{background:var(--ink)}
  .sl-meter.is-seen .sl-meter-sq i{transition:none}
  .sl-secchips .sl-chips::after,.sl-index > .sl-chips::after{transition:none}
  .sl-header,.sl-tabbar{transition:none}
}

/* 22. Print: paper and ink, whatever the phone's theme (a printed page is paper), no bars -------------------------- */
@media print{
  :root:not([data-print]){--paper:#FAFAF7;--ink:#121212;--ink-2:#5E5E58;--rule:rgba(18,18,18,.14);--rule-2:rgba(18,18,18,.32);--green:#1F7A45;--amber:#B35C00;--red-text:#D3303E;color-scheme:light}
  .sl-tabbar,.sl-theme-btn,.sl-search-btn,.sl-menu-btn,.sl-secchips{display:none !important}
  .sl-header{position:static}
  .sl-main.sl-compound > .sl-side{position:static;max-height:none}
}