:root {
  color-scheme: light;
  --bg: #edf3fb; --surface: #ffffff; --surface-raised: #f7faff;
  /* --dim darkened 2026-10-11 (review round 1): #607794 was 4.40:1 on --surface-raised and
     4.12:1 on --bg, under the 4.5:1 this project enforces, and it carries the 9 px dose
     micro-labels including PODKLAD HLÁSENEJ PRAXE and the Database table headers. #596f8c
     is 4.92:1 on --surface-raised, 5.15:1 on --surface and 4.61:1 on --bg, and stays
     lighter than --muted (5.55:1), so the hierarchy is unchanged. */
  --ink: #142b4b; --muted: #526781; --dim: #596f8c;
  --line: #d4dfef; --line-strong: #b7cbe5;
  --blue: #2366e8; --blue-deep: #164cb6; --blue-soft: #e2edff;
  --shadow: 0 20px 55px #3456890e;
  --on-accent: #ffffff;
  --story-bg: #edf3fb; --story-wash: #edf3fb;
  --scene-primary: #2464b8; --scene-secondary: #839bbb;
  --scene-highlight: #e1f1ff; --scene-halo: #b6cee9; --scene-muted: #617ca4;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 145px; }
body { isolation: isolate; margin: 0; min-width: 320px; color: var(--ink); background: var(--bg); font: 400 15px/1.65 Manrope, 'Avenir Next', sans-serif; -webkit-font-smoothing: antialiased; }
body::before { content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(ellipse at 90% 5%, color-mix(in srgb,var(--blue) 5%,transparent), transparent 45%), radial-gradient(ellipse at 5% 70%, color-mix(in srgb,var(--blue) 4%,transparent), transparent 40%); background-size: auto, auto, 56px 56px, 56px 56px; }
::selection { color: var(--on-accent); background: var(--blue); }
a { color: var(--blue-deep); text-decoration: none; transition: color .2s; }
a:hover { color: var(--blue); }
button, input { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -80px; left: 16px; z-index: 100; padding: 10px 16px; background: var(--blue); color: var(--on-accent); border-radius: 6px; }
.skip-link:focus { top: 8px; }
/* Navigation */
.top { position: sticky; top: 0; z-index: 30; display: grid; grid-template-columns: auto minmax(0,1fr) 210px; gap: 24px; align-items: center; min-height: 78px; padding: 12px max(28px, calc((100vw - 1280px)/2)); background: color-mix(in srgb,var(--surface-raised) 88%,transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(24px); }
.brand { display: inline-flex; align-items: center; color: var(--ink); font: 700 17px/1 'Space Grotesk', sans-serif; letter-spacing: -.04em; white-space: nowrap; }
.brand span { display: grid; place-items: center; width: 36px; height: 36px; margin-right: 10px; border-radius: 10px; color: var(--on-accent); background: var(--blue); box-shadow: 0 5px 14px #2466e823; font: 500 15px 'IBM Plex Mono', monospace; }
.top nav { display: flex; justify-content: center; align-items: center; gap: 3px; min-width: 0; }
.top nav a { padding: 8px 10px; border-radius: 6px; color: var(--muted); font-size: 12px; font-weight: 600; }
.top nav a.on { color: var(--blue); background: var(--blue-soft); }
.top nav a:hover { color: var(--blue); }
.hsearch, .search { position: relative; }
.mag { position: absolute; top: 50%; left: 14px; width: 17px; height: 17px; transform: translateY(-50%); color: var(--blue); pointer-events: none; }
.hsearch input, .search input, .filterq { width: 100%; color: var(--ink); border: 1px solid var(--line-strong); background: color-mix(in srgb,var(--surface) 80%,transparent); outline: none; }
.hsearch input { padding: 10px 45px 10px 39px; border-radius: 8px; font-size: 12px; }
input::placeholder { color: var(--muted); opacity: 1; }
.hsearch input:focus, .search input:focus, .filterq:focus { border-color: var(--blue); box-shadow: 0 0 0 4px #2366e814; }
kbd { padding: 3px 5px; color: var(--dim); border: 1px solid var(--line); border-radius: 4px; font: 10px 'IBM Plex Mono', monospace; }
.hsearch > kbd, .search > kbd { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); pointer-events: none; }
.results { position: absolute; top: calc(100% + 9px); right: 0; left: 0; z-index: 40; min-width: min(350px,88vw); overflow: hidden; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 16px 50px #1b3e7a26; }
.results a { display: block; padding: 12px 16px; color: var(--ink); border-bottom: 1px solid var(--line); }
.results a span { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.results a:hover, .results a.on { background: var(--blue-soft); }
.hsearch .results { left: auto; width: min(360px, calc(100vw - 28px)); }
.search-message { margin: 0; padding: 16px; color: var(--muted); font-size: 13px; }
/* Type and layout */
.home, .wrap, .compound, .foot { width: min(1240px, calc(100% - 72px)); margin-inline: auto; }
.home, .wrap { padding: 48px 0 100px; }
.narrow { width: min(800px, calc(100% - 72px)); }
h1,h2,h3,.stackcard strong { font-family: 'Space Grotesk', sans-serif; }
h1 { margin: 10px 0 22px; font-size: clamp(44px,5.4vw,74px); font-weight: 600; letter-spacing: -.065em; line-height: 1.04; }
h2 { margin: 0 0 16px; font-size: clamp(28px,3vw,42px); font-weight: 500; line-height: 1.15; letter-spacing: -.05em; }
h3 { letter-spacing: -.035em; }
.kicker,.record-id,.structure-label,.door-number,.section-num { font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .12em; }
.kicker { margin: 0 0 12px; color: var(--blue-deep); font-size: 10px; font-weight: 500; }
.lede { max-width: 750px; color: var(--muted); font-size: clamp(17px,1.8vw,21px); line-height: 1.6; letter-spacing: -.025em; }
.muted,.fine,.hint { color: var(--muted); }
.fine { font-size: 11px; line-height: 1.7; }
.hint { margin: 12px 0 0; font-size: 11px; }
.accent { color: var(--blue); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin: 72px 0 24px; }
.section-head h2 { margin: 0; }
.section-head a { font-size: 12px; font-weight: 700; white-space: nowrap; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 19px; color: var(--on-accent); background: var(--blue); border: 1px solid var(--blue); border-radius: 8px; font-size: 12px; font-weight: 600; }
.btn:hover { color: var(--on-accent); background: var(--blue-deep); }
/* Scroll-directed molecular story. No time-driven scene animations. */
.home { width: 100%; padding: 0 0 100px; }
.archive-content { width: min(1240px, calc(100% - 72px)); margin-inline: auto; padding-top: 12px; scroll-margin-top: 100px; }
.scroll-story { position: relative; height: 340svh; background: var(--story-bg); }
.story-stage { position: sticky; top: 78px; height: calc(100svh - 78px); min-height: 540px; overflow: clip; isolation: isolate; background: radial-gradient(ellipse at 76% 47%, color-mix(in srgb,var(--scene-halo) 23%,transparent), transparent 60%), var(--story-bg); }
#helix { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.story-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg,var(--story-wash) 0%,color-mix(in srgb,var(--story-wash) 93%,transparent) 29%,color-mix(in srgb,var(--story-wash) 45%,transparent) 47%,transparent 65%); }
.story-topline { position: absolute; top: 35px; left: 5.5%; right: 5.5%; display: flex; justify-content: space-between; color: var(--dim); font: 9px 'IBM Plex Mono',monospace; letter-spacing: .16em; }
.story-chapters { position: relative; height: 100%; width: min(1380px,89%); margin: auto; }
.story-chapter { position: absolute; inset: 0; display: flex; justify-content: center; flex-direction: column; align-items: flex-start; padding: 76px 0 100px; max-width: 690px; opacity: 0; pointer-events: none; }
.story-chapter.is-active { opacity: 1; pointer-events: auto; }
.story-chapter .kicker { margin-bottom: 25px; color: var(--blue); font-size: 10px; letter-spacing: .15em; }
.story-chapter h1,.story-chapter h2 { margin: 0; font-size: clamp(64px,7.5vw,116px); font-weight: 500; letter-spacing: -.075em; line-height: .98; }
.story-chapter h2 { font-size: clamp(58px,6.4vw,100px); }
.enhanced { color: var(--blue); }
.hero-manifesto { margin: 25px 0 0; font: 500 clamp(17px,1.55vw,24px)/1.4 'Space Grotesk',sans-serif; letter-spacing: -.03em; }
.story-description { margin: 23px 0 0; color: var(--muted); font-size: clamp(14px,1.16vw,17px); line-height: 1.85; text-wrap: pretty; }
.hero-actions { width: min(450px,100%); margin-top: 30px; }
.search input { padding: 18px 60px 18px 48px; border-radius: 9px; background: color-mix(in srgb,var(--surface) 72%,transparent); border-color: var(--line-strong); font-size: 13px; backdrop-filter: blur(16px); }
.search .mag { left: 18px; width: 20px; height: 20px; }
.story-link { display: flex; align-items: center; gap: 32px; margin-top: 34px; padding-bottom: 11px; color: var(--ink); border-bottom: 1px solid var(--blue); font-size: 13px; }
.story-link span { color: var(--blue); font-size: 22px; }
.story-controls { position: absolute; bottom: 26px; left: 5.5%; right: 5.5%; display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.story-skip { color: var(--muted); font: 10px 'IBM Plex Mono',monospace; letter-spacing: .04em; padding: 10px 0; }
.story-progress { display: flex; align-items: center; gap: 17px; color: var(--dim); font: 9px 'IBM Plex Mono',monospace; letter-spacing: .1em; }
.story-progress-track { width: 100px; height: 1px; background: var(--line-strong); }
.story-progress-fill { display: block; width: 100%; height: 1px; transform-origin: left; transform: scaleX(var(--story-progress,0)); background: var(--blue); }
.motion-toggle { background: transparent; border: 1px solid var(--line-strong); border-radius: 5px; padding: 7px 10px; color: var(--muted); font-size: 10px; }
.story-rail { position: absolute; right: 3%; top: 40%; display: grid; gap: 25px; color: var(--dim); font: 9px 'IBM Plex Mono',monospace; }
.story-rail span { position: relative; padding-right: 10px; opacity: .4; }
.story-rail span.is-active { color: var(--blue); opacity: 1; }
.story-rail span::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: currentColor; }
.scene-caption { position: absolute; right: 5.5%; bottom: 86px; margin: 0; color: var(--dim); font: 8px 'IBM Plex Mono',monospace; letter-spacing: .1em; opacity: .65; }
.archive-intro .section-head { margin-top: 65px; }
.archive-intro .doors { margin-top: 0; }
/* Full content stays usable before JS loads or if it is disabled. */
.scroll-story:not(.story-ready) { height: auto; }
.scroll-story:not(.story-ready) .story-stage { position: relative; top: 0; height: auto; min-height: calc(100svh - 78px); }
.scroll-story:not(.story-ready) .story-chapter { position: relative; padding-block: 90px; opacity: 1; pointer-events: auto; }
.scroll-story:not(.story-ready) .story-rail { display: none; }
/* Cards */
.doors { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-top: 40px; }
.door { display: flex; flex-direction: column; gap: 9px; padding: 22px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); transition: transform .25s, box-shadow .25s, border-color .25s; }
.door:hover { transform: translateY(-5px); color: var(--ink); border-color: var(--blue); box-shadow: var(--shadow); }
.door-top { display: flex; justify-content: space-between; align-items: start; margin-bottom: 10px; }
.door .chem-mark { width: 64px; height: 38px; color: var(--blue); }
.door-number { color: var(--dim); font-size: 8px; }
.door b { font: 500 21px/1.2 'Space Grotesk',sans-serif; letter-spacing: -.04em; }
.door span:not(.door-number) { color: var(--muted); font-size: 12px; line-height: 1.6; }
.chem-mark { color: inherit; }
.chips,.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 8px; }
.chip,.filters button { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; font-size: 11px; }
.chip b { color: var(--blue); font: 500 10px 'IBM Plex Mono',monospace; }
.chip:hover,.filters button:hover { border-color: var(--blue); }
.filters button.on { color: var(--on-accent); background: var(--blue); border-color: var(--blue); }
.statpanel { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 32px; padding: 30px 0; border-block: 1px solid var(--line-strong); }
.counts { display: flex; gap: 45px; }
.counts span { display: flex; align-items: baseline; gap: 10px; color: var(--muted); font: 10px 'IBM Plex Mono',monospace; text-transform: uppercase; letter-spacing: .08em; }
.counts b { color: var(--ink); font: 500 38px 'Space Grotesk',sans-serif; letter-spacing: -.055em; }
.shortlist { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0; margin: 0; list-style: none; }
.shortlist a { position: relative; display: flex; gap: 20px; align-items: center; min-height: 150px; padding: 20px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: border-color .2s,transform .2s; }
.shortlist a:hover { border-color: var(--blue); transform: translateY(-3px); }
.entry-molecule { display: grid; place-items: center; flex: 0 0 95px; width: 95px; height: 95px; color: var(--blue); border-radius: 10px; background: #eef5ff; }
.entry-molecule img { width: 100%; height: auto; mix-blend-mode: multiply; }
.entry-molecule svg { width: 75px; height: auto; }
.entry-copy { min-width: 0; }
.entry-copy em { color: var(--blue-deep); font: normal 8px 'IBM Plex Mono',monospace; text-transform: uppercase; letter-spacing: .08em; }
.entry-copy b { display: block; margin: 5px 0; font: 500 25px/1.1 'Space Grotesk',sans-serif; letter-spacing: -.04em; }
.entry-copy span { display: block; color: var(--muted); font-size: 12px; line-height: 1.6; }
.entry-arrow { margin-left: auto; align-self: start; color: var(--blue); }
.stackgrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.stackcard { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 13px; min-height: 245px; padding: 25px; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--ink); background: linear-gradient(140deg,var(--blue-soft),var(--surface)); transition: transform .2s,border-color .2s; }
.stackcard:hover { color: var(--ink); border-color: var(--blue); transform: translateY(-4px); }
.stackcard .chem-mark { position: absolute; width: 180px; height: 108px; right: -15px; top: -16px; opacity: .12; color: var(--blue); }
.stackcard em { position: relative; color: var(--blue-deep); font: normal 9px/1.4 'IBM Plex Mono',monospace; letter-spacing: .08em; text-transform: uppercase; }
.stackcard strong { max-width: 85%; font-size: 28px; line-height: 1.1; letter-spacing: -.045em; }
.stackcard span { position: relative; color: var(--muted); font-size: 13px; line-height: 1.7; }
.partners,.twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.partners { margin-top: 70px; }
.partners > a { padding: 23px 26px; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); }
.partners p:not(.kicker) { font-size: 13px; color: var(--muted); }
.partners b { display: flex; justify-content: space-between; font: 500 25px 'Space Grotesk',sans-serif; color: var(--blue); }
/* Compound dossier */
.compound { padding: 30px 0 90px; }
.crumb { margin: 0 0 22px; color: var(--muted); font: 10px/1.8 'IBM Plex Mono',monospace; letter-spacing: .03em; }
.crumb a { color: var(--muted); }
.sheet { padding: 38px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: var(--shadow); }
.head { display: grid; grid-template-columns: minmax(0,1.8fr) minmax(230px,.9fr); gap: 44px; align-items: start; }
.record-id { margin: 0 0 20px; color: var(--blue-deep); font-size: 9px; }
.head h1 { font-size: clamp(43px,5.6vw,75px); overflow-wrap: anywhere; margin-bottom: 18px; }
.lede.rule { margin: 0 0 12px; font-size: 20px; line-height: 1.5; color: var(--ink); }
.aka { color: var(--dim); margin: 0 0 25px; font-size: 12px; }
.benefit-label { margin: 24px 0 10px; color: var(--blue-deep); font: 10px 'IBM Plex Mono',monospace; text-transform: uppercase; letter-spacing: .09em; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pills li { padding: 9px 12px; color: var(--blue-deep); font-size: 13px; font-weight: 600; line-height: 1.5; background: var(--blue-soft); border-left: 2px solid var(--blue); border-radius: 0 5px 5px 0; }
.struct { color: #142b4b; overflow: hidden; margin: 0; padding: 14px; border: 1px solid #c4d7f1; border-radius: 12px; background: #f4f8ff; }
.struct img,.struct svg { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.struct figcaption,.structure-label { color: #567198; font: 9px/1.6 'IBM Plex Mono',monospace; }
.structure-label { margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #d4e2f4; }
.struct figcaption { margin-top: 12px; }
.identity-note { padding: 6px 0 10px; }
.identity-note h3 { margin: 0 0 10px; font-size: 24px; }
.identity-note p:not(.kicker) { color: var(--muted); font-size: 13px; line-height: 1.6; overflow-wrap: anywhere; }
.evidence-panel { display: grid; grid-template-columns: 138px 1fr; column-gap: 25px; row-gap: 16px; margin: 32px 0 12px; padding: 26px 0 23px; border-top: 1px solid var(--line-strong); }
.study-count { display: flex; align-items: center; gap: 13px; color: var(--blue-deep); }
.study-count strong { font: 600 49px/1 'Space Grotesk',sans-serif; letter-spacing: -.055em; }
.study-count span { font: 9px/1.6 'IBM Plex Mono',monospace; text-transform: uppercase; letter-spacing: .05em; }
.evidence-track { display: grid; grid-template-columns: repeat(4,1fr); gap: 11px; align-self: center; }
.evidence-segments { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.evidence-segments i { height: 12px; border: 1px solid var(--line); background: var(--surface-raised); border-radius: 3px; }
.reached .evidence-segments i { background: color-mix(in srgb,var(--blue) 65%,var(--surface)); border-color: var(--blue); }
.reached .evidence-segments i:nth-child(2) { background: color-mix(in srgb,var(--blue) 78%,var(--surface)); }
.reached .evidence-segments i:nth-child(3) { background: color-mix(in srgb,var(--blue) 90%,var(--surface)); }
.reached .evidence-segments i:nth-child(4) { background: var(--blue); }
.evidence-stage { display: flex; justify-content: space-between; margin-top: 9px; color: var(--muted); font: 10px 'IBM Plex Mono',monospace; letter-spacing: .12em; }
.evidence-stage b { font-weight: 400; color: var(--dim); }
.reached .evidence-stage { color: var(--blue-deep); }
.evidence-caption { grid-column: 1/-1; margin: 0; color: var(--dim); font-size: 10px; line-height: 1.7; }
.evidence-caption a { white-space: nowrap; }
.jump { position: sticky; top: 78px; z-index: 4; display: flex; gap: 3px; overflow-x: auto; margin: 0 0 34px; padding: 10px 0; border-block: 1px solid var(--line); background: var(--surface-raised); backdrop-filter: blur(15px); scrollbar-width: thin; }
.jump a { flex: none; padding: 9px 13px; color: var(--muted); border-radius: 5px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.jump a:hover,.jump a.on { color: var(--blue); background: var(--blue-soft); }
.split { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(270px,.85fr); gap: 45px; align-items: start; }
article section { padding: 0 0 25px; margin: 0 0 28px; border-bottom: 1px solid var(--line); scroll-margin-top: 152px; }
article h2 { display: flex; align-items: baseline; gap: 11px; margin: 6px 0 20px; font-size: 27px; }
.section-num { color: var(--blue); font-size: 10px; }
/* Review round 1 (2026-10-11): at 1440 px the prose column was 733 px on Atlas and 752 px on
   the base site at 15 px type, which measured 82–97 and 87–107 characters per line against
   a comfortable 55–75. Slovak compound words are long, so a 100-character line at 15 px
   makes a 4 000-word essay tiring and causes line-return errors. A 68ch cap brings the
   same column to about 68 characters and leaves the column's own box, its headings, the
   dose cards and the figures where they are — only the paragraph text is capped, and only
   where the column is wider than the cap, so phones are untouched. Shared rule, so both
   designs move together. The cap is in ch and ch is the width of "0", which in these faces is
   wider than the average Slovak lowercase letter: measured with Range line boxes, 68ch held 86
   characters a line and 58ch holds 73, which is inside the comfortable 55–75. */
article p,.prose p,.narrow section p { margin: 0 0 18px; max-width: 58ch; color: var(--muted); font-size: 15px; line-height: 1.95; text-wrap: pretty; }
article p:last-child { margin-bottom: 0; }
#risks { padding: 23px; background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: 10px; }
#risks .section-num { color: var(--dim); }
.field { padding: 18px 0 0; margin-top: 23px; border-top: 1px solid var(--line-strong); }
.field .kicker { font-size: 9px; }
aside { display: grid; gap: 18px; }
.spec-card,.buybox { padding: 22px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-raised); }
.spec { display: grid; grid-template-columns: 85px minmax(0,1fr); gap: 14px 15px; margin: 20px 0 0; font-size: 12px; line-height: 1.65; }
.spec dt { color: var(--dim); }
.spec dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
/* the human-research summary under the Status value (editorial profile.status_human) */
.spec .status-human { color: var(--muted); }
.formula { text-transform: none; letter-spacing: .02em; }
.buys { list-style: none; padding: 0; margin: 0; }
.buys li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.buys a { font-size: 13px; font-weight: 600; }
.buys em { grid-column: 1; color: var(--dim); font-size: 10px; font-style: normal; }
.buys span { color: var(--blue-deep); font-size: 12px; }
.rel { display: flex; flex-wrap: wrap; gap: 8px; }
.rel a { padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 5px; font-size: 12px; }
.references ul { list-style: none; padding: 0; }
.references li { margin: 12px 0; padding-left: 14px; border-left: 2px solid var(--line-strong); font-size: 12px; line-height: 1.7; }
/* Dosing (2026-10-09): registered, clinic and studied doses as entries in the article's own language —
   the pill's accent edge, the profile card's label/value rows and the research map's caption. Scoped
   to #dosing so the article paragraph rules (and their premium overrides) never reach the entries. */
#dosing .dosing-group { margin: 24px 0 0; }
#dosing .dosing-group h3 { margin: 0 0 12px; color: var(--blue-deep); font: 500 10px/1.6 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .12em; }
/* Review round 1 (2026-10-11): what every card of a group shares is printed once on the group —
   the authority eyebrow beside the heading, the source line under the list — so the cards carry
   only what differs. Same tokens as the per-card lines they replace. */
#dosing .dosing-group h3 .dose-group-context { color: var(--dim); letter-spacing: .1em; }
#dosing .dose-group-source { margin: 12px 0 0; padding-top: 0; border-top: 0; }
#dosing .dose-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
#dosing .dose-entry { min-width: 0; padding: 17px 20px 16px; background: var(--surface-raised); border: 1px solid var(--line); border-left: 2px solid var(--blue); border-radius: 0 10px 10px 0; }
#dosing .dose-context { margin: 0 0 7px; color: var(--dim); font: 9px/1.6 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }
#dosing .dose-title { margin: 0; color: var(--ink); font-size: 14px; line-height: 1.55; }
#dosing .dose-title b { font-weight: 700; }
#dosing .dose-amount { margin: 9px 0 11px; color: var(--blue-deep); font: 600 21px/1.3 'Space Grotesk', sans-serif; letter-spacing: -.025em; overflow-wrap: anywhere; }
#dosing .dose-spec { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: 6px 14px; margin: 0; font-size: 12px; line-height: 1.6; }
#dosing .dose-spec dt { color: var(--dim); }
#dosing .dose-spec dd { min-width: 0; margin: 0; color: var(--ink); overflow-wrap: anywhere; }
#dosing .dose-note { margin: 11px 0 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
#dosing .dose-label { display: block; margin: 0 0 3px; color: var(--dim); font: 9px/1.6 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }
#dosing .dose-source { margin: 13px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
#dosing .dose-source span { margin-right: 6px; font: 9px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }
#dosing .dose-source a { font-weight: 600; }
#dosing .dosing-fine { margin: 18px 0 0; color: var(--dim); font-size: 10px; line-height: 1.7; }
/* Tier C — reported practice (owner AMENDMENT 4, 2026-10-11): the same entry card, marked so a
   reader sees at a glance that the figure is self-reported and the registered one is not. The
   accent edge turns dashed and the kicker carries its tag; same tokens, no new colour. */
#dosing .dose-entry.dose-reported { border-left-style: dashed; }
/* Review round 1 (2026-10-11): on a phone the dose cards rendered 44 text nodes at 11 px or
   less, 21 of them 9 px uppercase, and 25 of the 44 carry Slovak diacritics (LOTYŠSKO · ZVA,
   REGISTROVANÝ LIEK, ZDROJE, PODKLAD HLÁSENEJ PRAXE). Uppercased Slovak at 9 px puts the caron
   and the acute on the cap line, where a phone stops resolving them, and Slovak cannot afford
   to lose them. Below 560 px the micro-labels get a 11–12 px floor and the lines that carry
   diacritics drop text-transform; the letter-spacing stays, because it is the uppercase that
   collides with the marks, not the tracking. The closing disclaimer goes to 12 px. */
@media (max-width: 560px) {
  #dosing :is(.dose-context, .dose-label, .dosing-group h3) { font-size: 11px; text-transform: none; }
  #dosing .dose-source { font-size: 12px; }
  #dosing .dose-source span { font-size: 11px; text-transform: none; }
  #dosing .dose-spec { font-size: 13px; }
  #dosing .dosing-fine { font-size: 12px; }
}
#dosing .dose-tier { display: inline-block; margin: 0 8px 0 0; padding: 2px 6px; border: 1px dashed var(--blue); border-radius: 3px; color: var(--blue-deep); }
/* Highlighted figure (owner request 2026-10-11): the callout an entry's `highlight` renders right
   under the dose — the hero pills' accent-soft fill and solid accent edge, so it reads apart from
   the muted notes and from the dashed reported-practice marking, with ink text and a direct link
   to the study. Only accent tokens: --ink and --blue-deep keep >= 6.4:1 on --blue-soft in every
   design, where --dim would not (3.97:1 in Gallery). */
#dosing .dose-highlight { margin: 13px 0 0; padding: 11px 14px 12px; background: var(--blue-soft); border-left: 2px solid var(--blue); border-radius: 0 8px 8px 0; }
#dosing .dose-highlight-label { margin: 0 0 4px; color: var(--blue-deep); font: 600 9px/1.6 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }
#dosing .dose-highlight-text { max-width: none; margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.6; }
#dosing .dose-highlight-source { max-width: none; margin: 7px 0 0; color: var(--blue-deep); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; }
#dosing .dose-highlight-source span { margin-right: 6px; font: 9px 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }
#dosing .dose-highlight-source a { font-weight: 700; }
@media (max-width: 560px) {
  #dosing :is(.dose-highlight-label, .dose-highlight-source span) { font-size: 11px; text-transform: none; }
}
/* Unit legend (owner request 2026-10-11): the units of this section's dose figures, generated by
   the builder, as a quiet key above the first card — the profile card's label/value rows on the
   sheet's own surface, visible without hovering because phones have none. */
#dosing .dose-units { display: grid; grid-template-columns: max-content minmax(0,1fr); align-items: baseline; gap: 0 18px; margin: 22px 0 0; padding: 11px 16px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; line-height: 1.6; }
#dosing .dose-units-label { max-width: none; margin: 0; color: var(--dim); font: 9px/1.6 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .1em; }
#dosing .dose-units dl { display: grid; grid-template-columns: max-content minmax(0,1fr); gap: 4px 12px; margin: 0; }
#dosing .dose-units dl > div { display: contents; }
#dosing .dose-units dt { color: var(--blue-deep); font-weight: 700; }
#dosing .dose-units dd { min-width: 0; margin: 0; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 560px) {
  /* a phone has no room for a unit column: each row reads as one line of text that wraps */
  #dosing .dose-units { display: block; padding: 11px 14px 12px; font-size: 13px; }
  #dosing .dose-units-label { margin: 0 0 5px; font-size: 11px; text-transform: none; }
  #dosing .dose-units dl { display: block; }
  #dosing .dose-units dl > div { display: block; margin: 0 0 4px; }
  #dosing .dose-units dl > div:last-child { margin-bottom: 0; }
  #dosing .dose-units :is(dt, dd) { display: inline; }
  #dosing .dose-units dt { margin-right: 6px; }
}
/* Database and taxonomy */
.filterq { max-width: 510px; margin: 12px 0; padding: 13px 16px; border-radius: 8px; font-size: 13px; }
#filter-count { margin: 0 0 16px; }
.dbwrap { overflow: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; }
table.db { width: 100%; border-collapse: collapse; }
table.db th,table.db td { padding: 15px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: 12px; }
table.db th { color: var(--dim); background: var(--surface-raised); font: 9px 'IBM Plex Mono',monospace; text-transform: uppercase; letter-spacing: .1em; }
table.db td:first-child { min-width: 165px; }
table.db a { font-weight: 700; }
table.db tr:hover td { background: #eef5ff; }
table.db td:last-child { color: var(--muted); }
.tree-shell { overflow: hidden; margin-top: 30px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); }
.tree { display: grid; grid-template-columns: 1fr 1fr 1.15fr; min-height: 480px; }
.col { min-width: 0; max-height: 600px; overflow: auto; border-right: 1px solid var(--line); scroll-padding: 56px 0 8px; }
.col:last-child { border-right: 0; }
.col > .kicker { position: sticky; top: 0; z-index: 1; padding: 17px 20px; margin: 0 0 7px; color: var(--dim); border-bottom: 1px solid var(--line); background: var(--surface-raised); font-size: 9px; }
/* A row holds its select button; the selected compound row also holds its entry link. Compound rows
   reserve the link's width on every row and draw the chevron or the link inside that space, so a
   long name wraps the same way selected or not: the row never changes height under the pointer
   between the two clicks of a double-click (review round 1: at 1024 px the first click grew
   "Diisopropylamine dichloroacetate" from 46 to 64 px and the second click landed on the next row). */
.tree { --tree-open-w: 116px; }
.tree-row { position: relative; display: flex; align-items: center; margin: 4px 8px; border: 1px solid transparent; border-radius: 6px; }
/* hover: a hairline and a light accent tint, clearly weaker than the selection (review round 2: the
   old fill was 1.03–1.06:1 against the column, so rows gave no pointer feedback before the click) */
.tree-row:hover { border-color: var(--line); background: color-mix(in srgb, var(--blue) 7%, var(--surface)); }
.tree-row:hover > button em { color: var(--muted); }
.tree-row.on { border-color: var(--line-strong); background: var(--blue-soft); }
.tree-row > button { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 13px; border: 0; border-radius: 5px; background: none; color: var(--ink); text-align: left; font-size: 13px; line-height: 1.4; -webkit-user-select: none; user-select: none; }
/* Review round 1 (2026-10-11): at 390 px the reserved name width is 193 px and
   "Chlorodehydromethyltestosterone" needs 210 px as one unbreakable word, so its last
   character sat behind the Open pill with nothing to clip or wrap it. It now wraps to two
   lines, which the Diisopropylamine dichloroacetate row already did harmlessly. The only
   name of the archive that needs this; desktop has 87 px of clearance. */
.tree-row > button > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.tree-row > button em { flex: none; color: var(--dim); font: normal 10px 'IBM Plex Mono',monospace; }
.col:last-child .tree-row > button { padding-right: calc(var(--tree-open-w) + 16px); }
.col:last-child .tree-row > button em { position: absolute; top: 50%; right: 21px; transform: translateY(-50%); }
.tree-row.on > button { color: var(--blue-deep); }
.tree-open { position: absolute; top: 50%; right: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: var(--tree-open-w); box-sizing: border-box; padding: 8px 12px; border-radius: 5px; color: var(--on-accent); background: var(--blue); font-size: 12px; font-weight: 600; line-height: 1.2; white-space: nowrap; transform: translateY(-50%); }
.tree-open:hover { color: var(--on-accent); background: var(--blue-deep); }
.tree-open:focus-visible { outline-offset: 2px; }
/* the row's main touch action: a taller pill for fingers (review round 1: 30 px on phones); every
   compound row is tall enough to give it even 8 px insets (review round 2: 4 px above and below in a
   46 px row looked jammed), on every row so selecting never changes a row's height */
@media (pointer: coarse) {
  .tree-open { min-height: 38px; padding-inline: 14px; }
  .col:last-child .tree-row > button { min-height: 54px; }
}
@supports selector(:has(*)) {
  .tree-row:has(> button:focus-visible) { outline: 3px solid var(--blue); outline-offset: 2px; }
  .tree-row > button:focus-visible { outline: 0; }
}
.treebar { padding: 17px 22px; border-top: 1px solid var(--line); background: var(--surface-raised); }
.treebar p { margin: 0; color: var(--muted); font-size: 12px; }
.stack-title .chem-mark { width: 110px; height: 70px; color: var(--blue); }
.callout { padding: 22px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--blue-soft); margin-block: 30px; }
.callout h2 { font-size: 27px; }
.members { padding: 0; list-style: none; }
.members li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.members a { font-size: 18px; font-weight: 600; }
.members span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }
.catalog { padding-left: 20px; }
.catalog li { margin: 10px 0; font-size: 13px; }
.prose h2 { margin-top: 40px; font-size: 28px; }
.prose a { text-decoration: underline; text-underline-offset: 4px; }
.foot { padding: 30px 0 45px; color: var(--muted); border-top: 1px solid var(--line-strong); font-size: 11px; line-height: 1.9; }
.footer-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; gap: 24px; }
.footer-top p { margin: 0; }
.social { display: flex; flex-wrap: wrap; gap: 12px 25px; margin-top: 24px; font-size: 10px; }
.social > span { margin-left: auto; color: var(--dim); }
/* Progressive enhancement: content is visible if JavaScript does not run. */
.reveal-ready { opacity: 0; transform: translateY(26px); transition: opacity .7s ease,transform .7s cubic-bezier(.2,.65,.3,1); }
.reveal-ready.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width:1180px) {
  .top { grid-template-columns: 1fr 220px; gap: 8px 24px; padding: 12px 28px; }
  .top nav { grid-column: 1/-1; grid-row: 2; justify-content: flex-start; overflow-x: auto; }
  .hsearch { grid-column: 2; grid-row: 1; }
  /* The homepage header has no search field (its hero search is the page's search, owner
     2026-10-09): the first row keeps the field's height (2 × 10 px padding, 2 px border and a
     12 px × 1.65 line) so the brand, the nav and the header height match every other page. */
  .top:not(:has(.hsearch)) { grid-template-rows: calc(22px + 12px * 1.65) auto; }
  .jump { top: 117px; }
  .hero-intro { gap: 30px; }
  .hero-copy h1 { font-size: clamp(65px,8vw,98px); }
  .science-stage { height: 520px; }
  .sheet { padding: 28px; }
  .head { gap: 25px; }
  .split { gap: 28px; }
  .spec-card,.buybox { padding: 17px; }
}
@media (max-width:860px) {
  .home,.wrap,.compound,.foot,.narrow { width: min(640px,calc(100% - 40px)); }
  .home,.wrap { padding-top: 25px; }
  .hero-intro,.head,.split,.partners,.twocol { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 6px; }
  .hero-copy h1 { font-size: clamp(67px,12vw,96px); }
  .hero-copy .kicker { margin-bottom: 26px; }
  .science-stage { height: 490px; margin-top: 8px; }
  .label-a { left: 12px; }
  .label-b { right: 12px; }
  .doors { grid-template-columns: 1fr 1fr; }
  .shortlist { grid-template-columns: 1fr; }
  .stackgrid { grid-template-columns: 1fr 1fr; }
  .counts { gap: 22px; }
  .counts span { flex-direction: column; gap: 0; }
  .head { grid-template-columns: minmax(0,1fr); }
  .struct { max-width: 380px; }
  .head h1 { font-size: clamp(44px,9vw,65px); }
  .jump { position: static; }
  .evidence-panel { grid-template-columns: 105px 1fr; gap: 16px; }
  .study-count { gap: 8px; }
  .study-count strong { font-size: 40px; }
  .study-count span { font-size: 8px; }
  .evidence-track { gap: 8px; }
  .evidence-stage { font-size: 9px; }
  .tree { grid-template-columns: 1fr; min-height: 0; }
  .col { max-height: 285px; border-right: 0; border-bottom: 1px solid var(--line); }
  .col:last-child { border-bottom: 0; }
  table.db th:nth-child(4),table.db td:nth-child(4) { display: none; }
  article section { scroll-margin-top: 135px; }
}
@media (max-width:560px) {
  .top { padding: 10px 15px; grid-template-columns: minmax(0,1fr) 135px; gap: 7px 14px; }
  .brand { font-size: 14px; }
  .brand span { width: 30px; height: 30px; font-size: 12px; margin-right: 7px; }
  .top nav { gap: 0; }
  .top nav a { padding: 7px 9px; font-size: 11px; white-space: nowrap; }
  .hsearch input { padding: 8px 12px 8px 32px; font-size: 11px; }
  .top:not(:has(.hsearch)) { grid-template-rows: calc(18px + 11px * 1.65) auto; }
  .hsearch .mag { left: 9px; width: 14px; height: 14px; }
  .hsearch > kbd,.search > kbd { display: none; }
  .home,.wrap,.compound,.foot,.narrow { width: calc(100% - 32px); }
  .hero { padding-top: 8px; }
  .hero-copy h1 { font-size: clamp(57px,14.8vw,82px); }
  .hero-copy .kicker { font-size: 8px; }
  .hero-manifesto { margin-top: 20px; font-size: 19px; }
  .hero-copy .lede { font-size: 13px; }
  .search input { font-size: 12px; padding: 17px 13px 17px 44px; }
  .science-stage { height: 445px; }
  .stage-top { left: 15px; right: 15px; font-size: 7px; }
  .stage-bottom { left: 15px; right: 15px; font-size: 7px; }
  .orbit-label { font-size: 7px; padding: 6px 8px; }
  .label-c { left: 12px; }
  .feature-strip { padding: 10px 14px; gap: 12px; }
  .feature-strip strong { font-size: 21px; }
  .doors { gap: 10px; margin-top: 25px; }
  .door { padding: 16px; }
  .door-top { flex-wrap: wrap; gap: 5px; }
  .door-number { font-size: 7px; }
  .door b { font-size: 18px; }
  .door span:not(.door-number) { font-size: 11px; }
  .statpanel { align-items: flex-start; flex-direction: column; gap: 18px; }
  .counts { gap: 30px; }
  .counts b { font-size: 33px; }
  .section-head { margin-top: 52px; align-items: start; flex-wrap: wrap; gap: 14px; }
  .section-head h2 { font-size: 30px; }
  .shortlist a { padding: 16px; gap: 14px; }
  .entry-molecule { flex-basis: 68px; width: 68px; height: 80px; }
  .entry-molecule svg { width: 58px; }
  .entry-copy b { font-size: 23px; }
  .entry-copy span { font-size: 11px; }
  .entry-copy em { font-size: 7px; }
  .stackgrid { grid-template-columns: 1fr; }
  .stackcard { min-height: 190px; }
  .partners { margin-top: 45px; gap: 14px; }
  .sheet { padding: 20px 16px; border-radius: 12px; }
  .crumb { font-size: 8px; }
  .head h1 { font-size: clamp(34px,10vw,52px); }
  .record-id { font-size: 8px; }
  .lede.rule { font-size: 17px; }
  .pills li { font-size: 12px; }
  .evidence-panel { grid-template-columns: 1fr; row-gap: 21px; }
  .study-count strong { font-size: 45px; }
  .evidence-segments { gap: 3px; }
  .evidence-stage { font-size: 9px; }
  .evidence-stage b { font-size: 8px; }
  .evidence-caption { font-size: 9px; }
  .jump { margin-bottom: 26px; }
  .jump a { padding: 7px 9px; font-size: 10px; }
  article h2 { font-size: 23px; }
  article p,.prose p,.narrow section p { font-size: 14px; line-height: 1.9; }
  #risks { padding: 16px; }
  #dosing .dose-entry { padding: 15px 15px 14px; }
  #dosing .dose-amount { font-size: 19px; }
  #dosing .dose-spec { grid-template-columns: 84px minmax(0,1fr); }
  /* the reported-practice tag takes its own line instead of wrapping the kicker after it */
  #dosing .dose-tier { display: block; width: fit-content; margin: 0 0 5px; }
  .spec { grid-template-columns: 89px minmax(0,1fr); }
  .footer-top { align-items: flex-start; flex-direction: column; gap: 18px; }
  .social > span { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .reveal-ready { opacity: 1; transform: none; }
}
.feature-icon img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
.reference-meta { display: block; margin-top: 4px; color: var(--dim); font: 9px 'IBM Plex Mono',monospace; }
.reference-scope { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; }
.catalog { list-style: none; padding: 0; }
.catalog li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.catalog-map { display: block; margin-top: 5px; color: var(--dim); font-size: 11px; }
.catalog-map a { color: var(--muted); }
.catalog-summary { padding: 18px 22px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--muted); background: var(--surface); font-size: 12px; }
/* Central search palette */
.search-open { overflow: hidden; }
#search-dialog { width: min(720px, calc(100vw - 32px)); max-width: none; max-height: min(720px,calc(100dvh - 64px)); margin: auto; padding: 0; overflow: visible; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 18px; box-shadow: 0 30px 100px #0b285c40; }
#search-dialog[open] { animation: palette-in .22s cubic-bezier(.16,1,.3,1); }
#search-dialog::backdrop { background: #152c4a50; backdrop-filter: blur(9px); animation: backdrop-in .2s ease; }
#search-dialog.is-closing { animation: palette-out .15s ease forwards; }
#search-dialog.is-closing::backdrop { animation: backdrop-out .15s ease forwards; }
@keyframes palette-in { from { opacity: 0; transform: translateY(16px) scale(.975); } to { opacity: 1; transform: none; } }
@keyframes palette-out { to { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes backdrop-out { to { opacity: 0; } }
.palette-shell { display: flex; flex-direction: column; max-height: min(720px,calc(100dvh - 64px)); overflow: hidden; border-radius: inherit; }
.palette-input-row { position: relative; display: flex; gap: 10px; align-items: center; padding: 23px; border-bottom: 1px solid var(--line); }
.palette-input-row .mag { left: 24px; width: 22px; height: 22px; }
#palette-query { width: 100%; min-width: 0; padding: 4px 0 4px 38px; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: 18px; line-height: 1.5; }
#palette-query::-webkit-search-cancel-button { cursor: pointer; }
#close-search { flex: none; padding: 5px 7px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--muted); background: transparent; font: 10px 'IBM Plex Mono',monospace; }
.palette-input-row:focus-within { box-shadow: inset 0 -2px 0 var(--blue); }
.palette-tools { display: flex; justify-content: space-between; align-items: start; gap: 15px; padding: 13px 24px 0; }
#palette-status { margin: 0; color: var(--dim); font-size: 11px; line-height: 1.6; }
#clear-recent { flex: none; padding: 0; border: 0; color: var(--blue-deep); background: transparent; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
#palette-results { overflow: auto; overscroll-behavior: contain; min-height: 90px; padding: 5px 12px 15px; scrollbar-width: thin; }
.palette-group-title { display: flex; align-items: center; gap: 15px; margin: 18px 12px 8px; color: var(--dim); font: 9px 'IBM Plex Mono',monospace; letter-spacing: .13em; text-transform: uppercase; }
.palette-group-title::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.palette-option { display: flex; gap: 15px; align-items: center; min-height: 65px; padding: 13px 15px; border: 1px solid transparent; border-radius: 9px; color: var(--ink); }
.palette-option.on { color: var(--ink); background: var(--blue-soft); border-color: var(--line-strong); }
.palette-symbol { flex: none; color: var(--dim); font-size: 22px; line-height: 1; }
.palette-option.on .palette-symbol { color: var(--blue); }
.palette-copy { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 15px; min-width: 0; }
.palette-copy strong { font: 500 20px/1.3 'Space Grotesk',sans-serif; letter-spacing: -.035em; }
.palette-copy small { color: var(--dim); font: 11px/1.5 'IBM Plex Mono',monospace; letter-spacing: .015em; text-align: right; }
.palette-arrow { color: var(--blue); font-size: 18px; }
.palette-footer { display: flex; flex: none; align-items: center; gap: 20px; padding: 15px 25px; border-top: 1px solid var(--line); background: var(--surface-raised); font-size: 10px; color: var(--dim); }
.palette-footer span { display: inline-flex; gap: 5px; align-items: center; }
.palette-footer a { margin-left: auto; }
@media (max-width:560px) {
  #search-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 40px); border-radius: 14px; }
  .palette-shell { max-height: calc(100dvh - 40px); }
  .palette-input-row { padding: 17px 13px; }
  .palette-input-row .mag { left: 17px; width: 19px; height: 19px; }
  #palette-query { padding-left: 32px; font-size: 16px; }
  .palette-tools { padding: 12px 18px 0; }
  #palette-status { font-size: 10px; }
  #palette-results { padding: 5px 7px 12px; }
  .palette-option { padding: 11px; gap: 13px; min-height: 65px; }
  .palette-copy { flex-direction: column; align-items: start; gap: 5px; }
  .palette-copy strong { font-size: 19px; }
  .palette-copy small { font-size: 11px; text-align: left; }
  .palette-footer { padding: 13px 16px; gap: 13px; font-size: 9px; }
  .palette-footer span:first-child { display: none; }
}
.section-copy { flex: none; margin-left: auto; padding: 4px 8px; color: var(--dim); background: transparent; border: 1px solid transparent; border-radius: 5px; font: 14px 'IBM Plex Mono',monospace; opacity: .65; }
.section-copy:hover,.section-copy:focus-visible { opacity: 1; color: var(--blue); border-color: var(--line-strong); background: var(--surface); }
.article-end-tools { display: flex; justify-content: flex-end; margin-top: 22px; }
.back-to-top { padding: 11px 16px; color: var(--blue-deep); background: color-mix(in srgb,var(--surface) 80%,transparent); border: 1px solid var(--line-strong); border-radius: 7px; font-size: 12px; }
.back-to-top:hover { border-color: var(--blue); }
.top nav { scrollbar-width: none; }
.top nav::-webkit-scrollbar { display: none; }
@media (max-width:560px) { .top nav { justify-content: space-between; } .top nav a { padding: 7px; font-size: 10px; } }

/* Immersive story sizing, accessibility, and mobile composition. */
@media (max-width:1180px) {
  .story-stage { top: 117px; height: calc(100svh - 117px); }
  .story-chapter { max-width: 620px; }
}
@media (max-width:860px) {
  .home { width: 100%; padding-top: 0; }
  .archive-content { width: calc(100% - 40px); }
  .story-chapter h1 { font-size: clamp(65px,11vw,94px); }
  .story-chapter h2 { font-size: clamp(54px,8.4vw,76px); }
  .story-chapter { max-width: 560px; }
  .story-progress > span:last-child { display: none; }
}
@media (max-width:560px) {
  .home { width: 100%; padding-top: 0; }
  .archive-content { width: calc(100% - 32px); }
  .scroll-story { height: 310svh; }
  .story-stage { top: 99px; height: calc(100svh - 99px); min-height: 560px; }
  .story-topline { top: 23px; left: 6%; right: 6%; font-size: 7px; }
  .story-topline span:last-child { display: none; }
  .story-chapters { width: 88%; }
  .story-chapter { justify-content: flex-end; padding: 75px 0 105px; }
  .story-chapter .kicker { margin-bottom: 17px; font-size: 8px; }
  .story-chapter h1 { font-size: clamp(54px,15vw,76px); }
  .story-chapter h2 { font-size: clamp(48px,12vw,64px); }
  .hero-manifesto { font-size: 17px; margin-top: 17px; }
  .story-description { margin-top: 16px; font-size: 12px; line-height: 1.8; }
  .hero-actions { margin-top: 23px; }
  .story-shade { background: linear-gradient(0deg,var(--story-wash) 4%,color-mix(in srgb,var(--story-wash) 96%,transparent) 25%,color-mix(in srgb,var(--story-wash) 55%,transparent) 54%,transparent 83%); }
  .story-controls { left: 6%; right: 6%; bottom: 24px; gap: 12px; flex-wrap: wrap; }
  .story-progress { gap: 8px; font-size: 8px; }
  .story-progress-track { width: 40px; }
  .story-skip,.motion-toggle { font-size: 9px; }
  .story-rail { right: 4%; top: 20%; }
  .scene-caption { top: 21px; right: 6%; bottom: auto; font-size: 6px; }
  .desktop-break { display: none; }
}
@media (max-height:650px) and (min-width:861px) {
  .story-chapter h1 { font-size: 70px; }
  .story-chapter h2 { font-size: 62px; }
  .story-chapter .kicker { margin-bottom: 14px; }
  .hero-manifesto,.story-description { margin-top: 15px; }
  .hero-actions { margin-top: 20px; }
}
.motion-paused .scroll-story { height: auto; }
.motion-paused .story-stage { position: relative; top: 0; height: auto; }
.motion-paused .story-chapters { padding-block: 80px; }
.motion-paused .story-chapter { position: relative; min-height: 450px; padding: 30px 0; opacity: 1 !important; transform: none !important; pointer-events: auto; }
.motion-paused .story-rail,.motion-paused .story-progress { display: none; }
.story-compact .scroll-story { height: auto; }
.story-compact .story-stage { position: relative; top: 0; height: auto; min-height: 0; }
.story-compact .story-chapters { padding-block: 60px 90px; }
.story-compact .story-chapter { position: relative; min-height: 0; padding: 60px 0; opacity: 1 !important; transform: none !important; pointer-events: auto; }
.story-compact .story-rail,.story-compact .story-progress,.story-compact .scene-caption { display: none; }
.story-compact .story-topline > span:last-child { display: none; }
@media (prefers-reduced-motion: reduce) {
  .scroll-story { height: auto; }
  .story-stage { position: relative; top: 0; height: auto; }
  .story-chapters { padding-block: 80px; }
  .story-chapter { position: relative; min-height: 450px; padding: 30px 0; opacity: 1 !important; transform: none !important; pointer-events: auto; }
  .story-rail,.story-progress { display: none; }
}

/* Utility-first opening: the scene never adds scroll distance or receives input. */
body::before { display: none; }
.tool-home { width: 100%; padding: 0 0 72px; }
.tool-home .ambient-scene { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .17; overflow: hidden; background: url('/assets/premium/atlas/hero.jpg') center / cover; }
.tool-home .ambient-scene video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.tool-home .utility-hero { width: min(940px,calc(100% - 40px)); margin: 0 auto; text-align: center; padding: 54px 0 30px; }
.tool-home h1 { margin: 8px 0 12px; font-size: clamp(44px,7vw,88px); line-height: 1.06; letter-spacing: -.065em; }
.tool-home .utility-description { color: var(--muted); font-size: clamp(16px,2vw,20px); line-height: 1.6; margin: 0 0 25px; }
.tool-home .search { width: min(750px,100%); margin: 0 auto; }
.tool-home .search input { min-height: 68px; border-radius: 16px; font-size: 16px; background: var(--surface); box-shadow: 0 10px 36px #142b4b0a; }
.utility-tools { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin: 22px auto 0; width: min(880px,100%); text-align: left; }
.utility-tools a { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--ink); }
.utility-tools a:hover { border-color: var(--blue); }
.utility-tools strong { font-size: 14px; }
.utility-tools span { font-size: 11px; color: var(--muted); }
.tool-home .archive-content { width: min(1080px,calc(100% - 40px)); padding-top: 0; }
.tool-home .section-head { margin: 28px 0 18px; }
.tool-home .section-head h2 { font-size: 24px; letter-spacing: -.04em; }
.tool-home .chips { margin-block: 0; }
.tool-home .shortlist a { min-height: 116px; padding: 16px; }
.tool-home .entry-copy b { font-size: 22px; }
.tool-home .entry-copy span { font-size: 12px; }
.tool-home .stackcard { min-height: 180px; background: var(--surface); }
.tool-home .stackcard strong { font-size: 24px; }
.structure-zoom { display: block; color: #285883; }
.structure-zoom > span { display: block; padding-top: 8px; font: 500 11px/1.5 Manrope,sans-serif; }
.struct .structure-source { display: block; margin-top: 7px; color: #285883; text-decoration: underline; }
.structure-dialog { width: min(1240px,calc(100% - 32px)); max-height: 92svh; padding: 18px; color: #182d4b; border: 1px solid #c4d7f1; border-radius: 16px; background: #fff; }
.structure-dialog::backdrop { background: #071421c9; backdrop-filter: blur(5px); }
.structure-dialog img { display: block; width: 100%; height: auto; max-height: 75svh; object-fit: contain; }
.structure-close { display: block; margin-left: auto; padding: 9px 14px; border: 1px solid #b7cbe5; background: #f4f8ff; color: #182d4b; border-radius: 8px; }
.structure-dialog-caption { margin: 10px 0 0; font-size: 12px; }
.structure-dialog-caption .structure-source { display: block; color: #285883; margin-top: 8px; }
.structure-open { overflow: hidden; }
@media (max-width: 700px) {
  .tool-home .ambient-scene { background-image: url('/assets/premium/atlas/hero-mobile.jpg'); }
  .tool-home .utility-hero { padding: 26px 0 20px; }
  .tool-home h1 { font-size: clamp(39px,10vw,62px); }
  .tool-home .kicker { font-size: 9px; }
  .tool-home .utility-description { font-size: 15px; margin-bottom: 20px; }
  .tool-home .search input { font-size: 13px; min-height: 60px; }
  .utility-tools { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 16px; }
  .utility-tools a { padding: 12px; }
  .tool-home .section-head h2 { font-size: 22px; }
  .tool-home .section-head a { font-size: 11px; }
}

/* Compact controls share the scene, without a second layer of home-page cards. */
.tool-home .utility-hero { padding-block: 40px 20px; }
.tool-home h1 { font-size: clamp(36px,5vw,60px); }
.tool-home .utility-description { font-size: 16px; margin-bottom: 18px; }
.tool-home .search { width: min(680px,100%); }
.tool-home .search input { min-height: 56px; padding-block: 14px; background: color-mix(in srgb,var(--surface) 48%,transparent); border-radius: 9px; box-shadow: none; backdrop-filter: blur(5px); font-size: 14px; }
.utility-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 20px; margin-top: 14px; }
.utility-tools a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 0; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: transparent; }
.utility-tools a:hover { border-bottom-color: var(--blue); }
.utility-tools strong { font-size: 13px; font-weight: 600; }
.utility-tools span { display: none; }
.tool-home .archive-content { width: min(1080px,calc(100% - 40px)); }
.tool-home .section-head { margin-block: 30px 14px; }
.tool-home .section-head h2 { font-size: 20px; }
.tool-home .chips { gap: 8px 16px; }
.tool-home .chip { background: transparent; border: 0; padding: 6px 0; font-size: 12px; }
.tool-home .chip b { font-size: 10px; }
.tool-home .shortlist { gap: 0 30px; }
.tool-home .shortlist a { min-height: 94px; padding: 14px 0; border: 0; border-top: 1px solid var(--line); background: transparent; border-radius: 0; gap: 12px; }
.tool-home .shortlist a:hover { transform: none; }
.tool-home .entry-molecule { width: 56px; height: 50px; min-width: 56px; background: transparent; }
.tool-home .entry-copy b { font-size: 18px; }
.tool-home .entry-copy em { font-size: 9px; }
.tool-home .entry-copy span { font-size: 11px; line-height: 1.5; }
.tool-home .stackgrid { gap: 0 28px; }
.tool-home .stackcard { min-height: 130px; padding: 16px 0; gap: 7px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; }
.tool-home .stackcard .chem-mark { display: none; }
.tool-home .stackcard strong { font-size: 20px; }
.tool-home .stackcard span { font-size: 12px; }
.tool-home .stackcard:hover { transform: none; }
@media(max-width:700px) {
  .tool-home .utility-hero { padding-block: 30px 12px; }
  .tool-home .search input { font-size: 12px; }
  .utility-tools { gap: 0 18px; }
  .tool-home .shortlist a { min-height: 88px; }
}

/* Review round 2: at phone width the Group column — the only place the Database exposes the areas
   of interest — sat entirely off screen (at 390 px the table is 465 px inside a 356 px wrapper, so
   the Group header spanned x 354→482), and scrolling the wrapper across pushed the compound name
   out at x −92. The page itself does not scroll sideways, so nothing said the table could. Below
   the width where the three columns fit, each row becomes a card instead: the name, the family,
   then the areas on their own line, and no horizontal scroll anywhere. */
@media (max-width:520px) {
  .dbwrap { overflow: visible; }
  table.db thead { display: none; }
  table.db,table.db tbody { display: block; }
  table.db tr:not([hidden]) { display: block; padding: 13px 16px; border-bottom: 1px solid var(--line); }
  table.db tr:last-child { border-bottom: 0; }
  table.db td { display: block; min-width: 0; padding: 0; border: 0; }
  table.db td:first-child { font-size: 14px; }
  table.db td:nth-child(2) { margin-top: 5px; color: var(--dim); font: 9px 'IBM Plex Mono',monospace; text-transform: uppercase; letter-spacing: .1em; }
  table.db td:nth-child(3) { margin-top: 3px; color: var(--muted); }
  table.db tr:hover td { background: transparent; }
}