/* ============================================================ page.css — reading surfaces for Standard Longevity. Separate from styles.css on purpose. That file dresses a full-bleed, centred, single-screen funnel with a fixed video behind it; this one dresses a document somebody scrolls and reads. Sharing a stylesheet between the two would mean every funnel tweak risks the library and every library tweak risks the funnel. Same world though: the palette and the two faces are lifted from styles.css verbatim so the two halves of the site are recognisably one site. The difference is that here the aqua is rationed even harder — on a page of running text a glowing accent everywhere is noise. ============================================================ */ :root { --ink: #05080a; --ink-2: #0a1013; --ink-3: #0e1619; --pearl: #f4f7f6; --pearl-dim: rgba(244,247,246,0.72); --pearl-faint:rgba(244,247,246,0.46); --aqua: #58f2e6; --aqua-deep: #17b8ad; --aqua-glow: rgba(88,242,230,0.45); --hairline: rgba(244,247,246,0.14); --hairline-2: rgba(244,247,246,0.26); --radius: 14px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --measure: 66ch; --pad: clamp(20px, 5vw, 40px); --font-display: "Bricolage Grotesque", "Times New Roman", serif; --font-body: "Sora", system-ui, -apple-system, sans-serif; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* INSTANT ON THE CLINICIANS PAGE. Landing on /clinicians#press with smooth scrolling, Chrome starts the animation toward the fragment and abandons it when the page's layout shifts while sixty posters and a display font load — so the jump chips changed the hash and nothing moved. Under `auto` the jump is applied once, instantly, and holds. Found 2026-08-28. */ html:has(.clin) { scroll-behavior: auto; } body.doc { margin: 0; background: var(--ink); /* A static field instead of the homepage video. Same atmosphere, none of the twelve megabytes — nobody came to a written page for a loop. */ background-image: radial-gradient(120% 70% at 50% -10%, rgba(23,184,173,0.10) 0%, rgba(5,8,10,0) 60%), radial-gradient(90% 60% at 100% 0%, rgba(88,242,230,0.05) 0%, rgba(5,8,10,0) 55%); background-attachment: fixed; color: var(--pearl-dim); font-family: var(--font-body); font-size: 17px; line-height: 1.72; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* CLIP, NOT HIDDEN. `overflow-x: hidden` forces overflow-y to `auto`, which makes a scroll container of its own — and with `scroll-behavior: smooth` on , Chrome then hands every fragment jump (#press, #regulators) to that body scroller, which has nothing to scroll, so the page never moves. Found 2026-08-28 when the clinicians' jump chips changed the hash and nothing happened. `clip` clips without creating a scroller. Same family as the homepage's 08-19 bug. */ overflow-x: clip; } a { color: inherit; } ::selection { background: var(--aqua-deep); color: var(--ink); } .skip { position: absolute; left: -9999px; top: 0; z-index: 20; background: var(--aqua); color: var(--ink); padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 600; text-decoration: none; } .skip:focus { left: 0; } :focus-visible { outline: 2px solid var(--aqua); outline-offset: 3px; border-radius: 4px; } /* ---------- top bar ---------- */ .topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px var(--pad); background: rgba(5,8,10,0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--hairline); } .topbar .wordmark { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.14em; font-size: 12.5px; text-transform: uppercase; color: var(--pearl); text-decoration: none; } .topbar .wordmark::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 12px var(--aqua-glow); } .topnav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .topnav a { font-size: 13px; color: var(--pearl-dim); text-decoration: none; padding: 8px 12px; border-radius: 999px; transition: color .3s var(--ease), background .3s var(--ease); } .topnav a:hover { color: var(--pearl); background: rgba(244,247,246,0.06); } .topnav .nav-cta { border: 1px solid var(--hairline-2); color: var(--pearl); } .topnav .nav-cta:hover { border-color: var(--aqua); background: rgba(88,242,230,0.08); color: var(--pearl); } @media (max-width: 520px) { .topnav .nav-quiet { display: none; } } /* ---------- layout ---------- */ main { max-width: 1080px; margin: 0 auto; padding: 0 var(--pad) 40px; } .lede { max-width: var(--measure); padding: clamp(44px, 8vh, 84px) 0 8px; } .eyebrow { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--aqua-deep); margin: 0 0 14px; font-weight: 500; } h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 5.2vw, 3.1rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--pearl); margin: 0 0 16px; text-wrap: balance; } .sub { font-size: clamp(1rem, 2vw, 1.16rem); line-height: 1.6; color: var(--pearl-dim); margin: 0; } .crumb { padding-top: 26px; font-size: 12.5px; color: var(--pearl-faint); display: flex; gap: 8px; flex-wrap: wrap; } .crumb a { color: var(--pearl-dim); text-decoration: none; } .crumb a:hover { color: var(--aqua); } /* ---------- topic chips ---------- The chips are real links to real pages, not a client-side filter. That is the whole point of them: a visitor self-identifies in a word, and a crawler gets a hub it can actually reach. */ .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 6px; } .chip { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--hairline); color: var(--pearl-dim); font-size: 13px; text-decoration: none; white-space: nowrap; transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease); } .chip:hover { border-color: var(--aqua); color: var(--pearl); background: rgba(88,242,230,0.06); } .chip.on { border-color: var(--aqua); color: var(--ink); background: var(--aqua); font-weight: 600; } /* ---------- card grid ---------- */ .grid { display: grid; gap: 14px; margin: 26px 0 0; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); } .card { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px 24px; text-decoration: none; background: rgba(10,16,19,0.62); border: 1px solid var(--hairline); border-radius: var(--radius); transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease); } .card:hover { border-color: var(--hairline-2); transform: translateY(-2px); background: rgba(14,22,25,0.78); } .card-meta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua-deep); } .card-title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.24; color: var(--pearl); letter-spacing: -0.01em; text-wrap: balance; } .card-dek { font-size: 14px; line-height: 1.55; color: var(--pearl-dim); } .empty { color: var(--pearl-faint); padding: 30px 0; } /* ---------- the article ---------- */ .post { max-width: var(--measure); } .post-head { padding: clamp(30px, 6vh, 56px) 0 0; } .post-head h1 { margin-bottom: 14px; } .byline { font-size: 12.5px; color: var(--pearl-faint); margin: 18px 0 0; } .prose { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--hairline); } .prose p { margin: 0 0 22px; } .prose h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.3rem, 2.6vw, 1.62rem); line-height: 1.2; letter-spacing: -0.012em; color: var(--pearl); margin: 40px 0 14px; text-wrap: balance; } .prose strong { color: var(--pearl); font-weight: 600; } .prose em { color: var(--pearl); font-style: italic; } .prose a { color: var(--aqua); text-decoration: none; border-bottom: 1px solid rgba(88,242,230,0.35); } .prose a:hover { border-bottom-color: var(--aqua); } .prose ul.pts { list-style: none; padding: 0; margin: 0 0 22px; } .prose ul.pts li { position: relative; padding-left: 22px; margin-bottom: 12px; } .prose ul.pts li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--aqua-deep); } /* A caveat, never a claim — see the note in articles.js. */ .note { margin: 28px 0; padding: 18px 22px; background: rgba(23,184,173,0.06); border: 1px solid rgba(88,242,230,0.22); border-radius: var(--radius); } .note p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--pearl-dim); } .pull { margin: 34px 0; padding: 0; } .pull p { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.18rem, 2.6vw, 1.5rem); line-height: 1.36; letter-spacing: -0.012em; color: var(--pearl); text-wrap: balance; } .post-foot { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--hairline); } .post-foot .eyebrow { margin-bottom: 10px; } .post-foot .chips { margin-top: 0; } .related { margin-top: 56px; padding-top: 30px; border-top: 1px solid var(--hairline); } /* ---------- closing invitation ---------- */ .cta { margin: 68px 0 20px; padding: clamp(30px, 5vw, 46px); background: rgba(10,16,19,0.66); border: 1px solid var(--hairline); border-radius: 20px; text-align: center; } .cta h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.4rem, 3.2vw, 2rem); line-height: 1.14; letter-spacing: -0.018em; color: var(--pearl); margin: 0 0 12px; text-wrap: balance; } .cta p { max-width: 54ch; margin: 0 auto 24px; font-size: 15.5px; color: var(--pearl-dim); } .btn { display: inline-block; padding: 14px 30px; border-radius: 999px; background: var(--aqua); color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; letter-spacing: 0.01em; transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .btn:hover { transform: translateY(-1px); box-shadow: 0 0 34px -6px var(--aqua-glow); } /* ---------- footer ---------- */ .site-footer { margin-top: 64px; padding: 30px var(--pad) max(30px, env(safe-area-inset-bottom)); border-top: 1px solid var(--hairline); text-align: center; color: var(--pearl-faint); } .site-footer .disc { font-size: 11.5px; line-height: 1.65; max-width: 720px; margin: 0 auto 14px; } .site-footer .flinks { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin: 0; } .site-footer .flinks a { font-size: 12px; color: var(--pearl-dim); text-decoration: none; } .site-footer .flinks a:hover { color: var(--aqua); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } .card:hover, .btn:hover { transform: none; } } /* ---- attributed contributor ---- A named practitioner's view, published as theirs. The standing note is not decoration: it is the thing that makes publishing a clinical opinion on a supplier's domain honest rather than a claim in disguise. */ .byline-who { color: var(--pearl); } .byline-card { margin-top: 44px; padding: 22px 24px; background: rgba(10,16,19,0.7); border: 1px solid var(--hairline); border-radius: var(--radius); } .byline-name { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--pearl); } .byline-role { margin: 2px 0 0; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aqua-deep); } .byline-bio { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--pearl-dim); } .byline-link { margin: 10px 0 0; font-size: 14px; } .byline-link a { color: var(--aqua); text-decoration: none; border-bottom: 1px solid rgba(88,242,230,0.35); } .byline-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: 12.5px; line-height: 1.6; color: var(--pearl-faint); } /* ---- the publishing queue ---- */ .queue { margin-top: 26px; border-top: 1px solid var(--hairline); } .qrow { display: grid; gap: 4px 18px; padding: 16px 0; border-bottom: 1px solid var(--hairline); grid-template-columns: 190px 1fr; } .qdate { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--aqua-deep); } .qtitle { font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--pearl); line-height: 1.3; } .qmeta { grid-column: 2; font-size: 13px; color: var(--pearl-faint); } @media (max-width: 600px) { .qrow { grid-template-columns: 1fr; } .qmeta { grid-column: 1; } } /* ============================================================ The watchlist — /watch and /watch/. Same palette, same two faces, one new idea: a video on this site is a FACADE until somebody asks for it. A poster we host, a button, and no request to a third party until the click. That is a privacy decision first and a weight decision second, and it is the same reasoning that kept the homepage's twelve-megabyte loop off the reading pages. ============================================================ */ /* ---------- watch cards ---------- */ .grid-watch { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .card-watch { padding: 0 0 22px; overflow: hidden; } .card-thumb { display: block; position: relative; aspect-ratio: 16/9; background: var(--ink-2); border-bottom: 1px solid var(--hairline); } .card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .88; transition: opacity .35s var(--ease); } .card-watch:hover .card-thumb img { opacity: 1; } .card-run { position: absolute; right: 10px; bottom: 10px; padding: 3px 8px; border-radius: 6px; background: rgba(5,8,10,0.82); backdrop-filter: blur(6px); font-size: 11px; letter-spacing: .06em; color: var(--pearl); } .card-watch .card-meta, .card-watch .card-title, .card-watch .card-dek { padding: 0 24px; } .card-watch .card-meta { padding-top: 18px; } /* The source's own headline, quiet and secondary — our angle is the title. */ .card-watch .card-dek { color: var(--pearl-faint); font-size: 13px; font-style: italic; } /* ---------- the facade ---------- */ .embed { margin: 30px 0 8px; padding: 0; } .facade { display: block; position: relative; width: 100%; padding: 0; border: 1px solid var(--hairline-2); border-radius: var(--radius); background: var(--ink-2); overflow: hidden; cursor: pointer; font: inherit; color: inherit; text-align: left; transition: border-color .3s var(--ease), transform .3s var(--ease); } .facade:hover { border-color: var(--aqua-deep); transform: translateY(-2px); } .facade img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; opacity: .82; transition: opacity .35s var(--ease); } .facade:hover img { opacity: 1; } .facade-play { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(5,8,10,0.72); border: 1px solid var(--aqua-deep); color: var(--aqua); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 0 0 0 var(--aqua-glow); transition: box-shadow .4s var(--ease), background .3s var(--ease); } .facade:hover .facade-play { background: rgba(5,8,10,0.9); box-shadow: 0 0 0 10px rgba(88,242,230,0.08); } .facade-cap { display: block; padding: 14px 18px 16px; border-top: 1px solid var(--hairline); background: rgba(5,8,10,0.5); } .facade-title { display: block; font-family: var(--font-display); font-weight: 500; font-size: 15px; line-height: 1.35; color: var(--pearl); } .facade-run { display: block; margin-top: 5px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--aqua-deep); } .ytframe { width: 100%; aspect-ratio: 16/9; border: 1px solid var(--hairline-2); border-radius: var(--radius); display: block; } .embed figcaption { margin-top: 9px; font-size: 12.5px; color: var(--pearl-faint); } /* ---------- disclosure ---------- Deliberately the loudest non-heading element on the page. Who somebody is attached to is not a footnote on a page that exists to say so. */ .disclose { margin: 26px 0; padding: 18px 20px; border: 1px solid var(--hairline-2); border-left: 3px solid var(--aqua-deep); border-radius: 0 var(--radius) var(--radius) 0; background: rgba(23,184,173,0.055); } .disclose-h { margin: 0 0 7px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--aqua-deep); } .disclose p:last-child { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--pearl); } /* A note the SOURCE published about itself, quoted verbatim. */ .srcnote { margin: 26px 0; padding: 18px 20px; border: 1px dashed var(--hairline-2); border-radius: var(--radius); } .srcnote blockquote { margin: 0; padding: 0; } .srcnote blockquote p { margin: 0; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.5; font-style: italic; color: var(--pearl); } .watchfor { margin-top: 38px; padding-top: 26px; border-top: 1px solid var(--hairline); } .watchfor h2 { font-family: var(--font-display); font-size: 1.25rem; color: var(--pearl); margin: 0 0 12px; letter-spacing: -0.01em; } .watchfor .pts li { margin-bottom: 10px; } /* The standing notices. Quieter than the disclosure on purpose: they are on every page, and a warning that shouts on every page stops being read. */ .note.standing { margin-top: 22px; background: rgba(10,16,19,0.5); } .note.standing p { font-size: 14px; color: var(--pearl-faint); } .lic { margin-top: 16px; font-size: 12.5px; color: var(--pearl-faint); } .post-watch .post-head { margin-bottom: 4px; } /* A held talk on the queue page reads differently from a queued one — one is waiting, the other was refused, and they should not look alike. */ .qheld .qdate { color: #f2a58a; } .qheld .qmeta em { color: #f2a58a; font-style: normal; } @media (max-width: 600px) { .facade-play { width: 52px; height: 52px; } .card-watch .card-meta, .card-watch .card-title, .card-watch .card-dek { padding: 0 18px; } .card-watch .card-meta { padding-top: 14px; } } @media (prefers-reduced-motion: reduce) { .facade:hover { transform: none; } } /* ---------- the suggestion ---------- Ours, and it has to LOOK ours. The disclosure box above it is aqua-ruled because it is about them; this one is warm-ruled and sits after the standing notice, so the order a reader meets things in is: their video, their affiliation, our framing, our ask, the caveat that covers all of it. */ .suggest { margin: 30px 0 4px; padding: 18px 20px; border: 1px solid var(--hairline-2); border-left: 3px solid var(--pearl-faint); border-radius: 0 var(--radius) var(--radius) 0; background: rgba(244,247,246,0.035); } .suggest p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.62; color: var(--pearl-dim); } .suggest .disclose-h { color: var(--pearl-faint); } .suggest-go { margin: 0; } .suggest-go a { font-weight: 600; color: var(--aqua); text-decoration: none; border-bottom: 1px solid rgba(88,242,230,0.4); padding-bottom: 1px; } .suggest-go a::after { content: " →"; } .suggest-go a:hover { border-bottom-color: var(--aqua); } /* ---------- the Schuster hub callout ---------- */ .hub { margin-top: 56px; padding: 30px var(--pad); border: 1px solid var(--hairline); border-radius: var(--radius); background: radial-gradient(90% 140% at 0% 0%, rgba(23,184,173,0.10) 0%, rgba(5,8,10,0) 60%), rgba(10,16,19,0.5); } .hub-body { max-width: var(--measure); } .hub h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.35rem, 3vw, 1.7rem); line-height: 1.16; letter-spacing: -0.015em; color: var(--pearl); margin: 6px 0 10px; } .hub p { color: var(--pearl-dim); font-size: 15.5px; line-height: 1.65; margin: 0 0 16px; } .hub-go { margin: 0; } .btn-quiet { display: inline-block; padding: 11px 22px; border-radius: 999px; border: 1px solid var(--aqua-deep); color: var(--aqua); background: transparent; text-decoration: none; font-weight: 600; font-size: 14px; transition: background .3s var(--ease), color .3s var(--ease); } .btn-quiet:hover { background: var(--aqua); color: var(--ink); } /* ============================================================ The compound library — /compounds and /compounds/. Same world as the rest of the library; the one new idea is the sister-site cross-link (.xlink), which points at the Schuster science page — a Standard-owned property, so it is the one off-domain link this side of the site makes on purpose. ============================================================ */ .cmp-group{margin-top:38px;} .cmp-cat{font-family:var(--font-display);font-size:1.15rem;color:var(--aqua-deep); letter-spacing:.01em;margin:0 0 4px;padding-bottom:8px;border-bottom:1px solid var(--hairline);} .card-cmp .card-alias{font-size:12px;color:var(--pearl-faint);font-family:var(--font-body);} .card-cmp .card-title{font-size:1.35rem;} .post-cmp .cmp-aka{font-family:var(--font-body);font-size:13px;color:var(--pearl-faint);margin:2px 0 0;} .ruo{color:#f2c14e;} /* sister-site science cross-link */ .xlink{margin:24px 0;padding:18px 20px;border:1px solid rgba(88,242,230,.24); border-radius:var(--radius);background:linear-gradient(180deg,rgba(23,184,173,.06),rgba(5,8,10,0));} .xlink .disclose-h{color:var(--aqua);} .xlink p{margin:0 0 8px;font-size:14.5px;color:var(--pearl-dim);} .xlink-go{margin:0;} .xlink-go a{font-weight:600;color:var(--aqua);text-decoration:none; border-bottom:1px solid rgba(88,242,230,.4);padding-bottom:1px;} .xlink-go a::after{content:" \2197";} .xlink-go a:hover{border-bottom-color:var(--aqua);} /* FAQ — also the FAQPage schema source */ .faq{margin-top:40px;padding-top:26px;border-top:1px solid var(--hairline);} .faq h2{font-family:var(--font-display);font-size:1.3rem;color:var(--pearl);margin:0 0 16px;letter-spacing:-.01em;} .faq dl{margin:0;display:grid;gap:2px;} .faq .qa{padding:16px 0;border-top:1px solid var(--hairline);} .faq .qa:first-child{border-top:0;} .faq dt{font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--pearl);margin:0 0 6px;} .faq dd{margin:0;font-size:15px;line-height:1.6;color:var(--pearl-dim);} /* ============================================================ The unified library hub — /library. Standard Longevity's own brand, with the qualities that make the Schuster hub good: a fixed hero the content scrolls over, a cover on every card, a cascading reveal. A new hero video drops in at /media/library-hero.{webm,mp4}; until then the poster + veil carry it. ============================================================ */ .lhero{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink);} .lhero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5;} .lhero-veil{position:absolute;inset:0; background: radial-gradient(120% 80% at 50% -10%,rgba(23,184,173,.14),rgba(5,8,10,0)55%), linear-gradient(180deg,rgba(5,8,10,.55) 0%,rgba(5,8,10,.82) 60%,var(--ink) 100%);} body.doc:has(.lhero){background:var(--ink);} .lhead,.lfilter,.lgrid{position:relative;z-index:1;} .lhead{max-width:var(--measure);padding-top:clamp(48px,12vh,120px);} .lhead h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2.4rem,7vw,4rem); line-height:1.04;letter-spacing:-.02em;color:var(--pearl);margin:8px 0 14px;} .lhead .sub{font-size:clamp(1rem,2.4vw,1.18rem);} /* filter bar */ .lfilter{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 4px;padding-bottom:6px;} .lchip{font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--pearl-dim); background:rgba(10,16,19,.6);border:1px solid var(--hairline-2);border-radius:999px; padding:8px 15px;cursor:pointer;display:inline-flex;align-items:center;gap:7px; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); transition:color .25s var(--ease),border-color .25s var(--ease),background .25s var(--ease);} .lchip:hover{color:var(--pearl);border-color:var(--hairline);} .lchip .cn{font-family:var(--font-body);font-size:11px;color:var(--pearl-faint); font-variant-numeric:tabular-nums;} .lchip.on{color:var(--ink);background:var(--aqua);border-color:var(--aqua);font-weight:600;} .lchip.on .cn{color:rgba(5,8,10,.6);} .lchip-topic{opacity:.9;} /* grid + cards */ .lgrid{display:grid;gap:16px;margin-top:22px; grid-template-columns:repeat(auto-fill,minmax(280px,1fr));} .lcard{display:flex;flex-direction:column;text-decoration:none;overflow:hidden; background:rgba(10,16,19,.66);border:1px solid var(--hairline);border-radius:var(--radius); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); transition:border-color .3s var(--ease),transform .3s var(--ease),background .3s var(--ease);} .lcard:hover{border-color:var(--aqua-deep);transform:translateY(-3px);background:rgba(13,20,23,.78);} .lcard-cover{position:relative;aspect-ratio:16/9;display:block;overflow:hidden; border-bottom:1px solid var(--hairline);background:var(--ink-2);} .lcard-cover .cover-svg,.lcard-cover .cover-img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block;transition:transform .5s var(--ease),opacity .35s var(--ease);} .lcard-cover .cover-img{opacity:.9;} .lcard:hover .cover-svg,.lcard:hover .cover-img{transform:scale(1.04);} .lcard:hover .cover-img{opacity:1;} .lcard-kind{position:absolute;left:11px;top:11px;z-index:2; font-family:var(--font-body);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; padding:4px 9px;border-radius:6px;color:var(--pearl);background:rgba(5,8,10,.72); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:1px solid var(--hairline-2);} .lcard-kind.k-read{color:var(--aqua);} .lcard-kind.k-compound{color:#9d8bff;} .lcard-kind.k-watch{color:#f2c14e;} .lcard-body{display:flex;flex-direction:column;gap:7px;padding:16px 18px 18px;} .lcard-title{font-family:var(--font-display);font-weight:600;font-size:1.16rem;line-height:1.22; color:var(--pearl);letter-spacing:-.01em;text-wrap:balance;} .lcard-dek{font-size:13.5px;line-height:1.5;color:var(--pearl-dim); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .lcard-meta{margin-top:2px;font-family:var(--font-body);font-size:11px;letter-spacing:.12em; text-transform:uppercase;color:var(--pearl-faint);} /* cascading reveal */ .lcard.rise{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease),transform .6s var(--ease);} .lcard.rise.in{opacity:1;transform:none;} @media(max-width:560px){ .lgrid{grid-template-columns:1fr 1fr;gap:11px;} .lcard-body{padding:12px 13px 14px;} .lcard-title{font-size:1rem;} .lcard-dek{-webkit-line-clamp:2;font-size:12.5px;} } @media(prefers-reduced-motion:reduce){ .lcard.rise{opacity:1;transform:none;transition:none;} .lhero-vid{display:none;} } /* The per-embed claim disclaimer — shown only when a source's own title makes a claim. Deliberately the loudest note on the page: amber-ruled, above the fold of the article, because "make disclaimers" (owner) means visible, not buried. */ .claimwarn{margin:22px 0;padding:18px 20px;border:1px solid rgba(242,193,78,.4); border-radius:var(--radius);background:rgba(242,193,78,.07);} .claimwarn-h{font-family:var(--font-body);font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:#f2c14e;margin:0 0 8px;display:flex;align-items:center;gap:9px;} .claimwarn-h::before{content:"!";display:grid;place-items:center;width:16px;height:16px;border-radius:50%; background:#f2c14e;color:var(--ink);font-weight:700;font-size:11px;} .claimwarn p:last-child{margin:0;font-size:14.5px;line-height:1.6;color:var(--pearl-dim);} .sub-sep{font-size:14px;color:var(--pearl-faint);border-top:1px solid var(--hairline);padding-top:14px;margin-top:16px;} /* ============================================================ The Lab Notes share deck — /rep/share (rep-gated, noindex). Internal tool: a caption to copy and a 1200×630 card to screenshot for each library item. Charter-first — the copy teaches, never sells. ============================================================ */ .sdeck{display:grid;gap:20px;margin-top:26px;} .srow{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:20px;align-items:start; padding:18px;border:1px solid var(--hairline);border-radius:var(--radius);background:rgba(10,16,19,.5);} .srow-cap{min-width:0;} .srow-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;} .srow-kind{font-family:var(--font-body);font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; padding:4px 9px;border-radius:6px;background:rgba(5,8,10,.6);border:1px solid var(--hairline-2);color:var(--pearl-dim);} .srow-kind.k-read{color:var(--aqua);} .srow-kind.k-compound{color:#9d8bff;} .srow-kind.k-watch{color:#f2c14e;} .copybtn{font-family:var(--font-body);font-size:12.5px;font-weight:600;cursor:pointer; color:var(--ink);background:var(--aqua);border:0;border-radius:7px;padding:7px 13px; transition:background .2s var(--ease);} .copybtn:hover{background:var(--pearl);} .copybtn.ok{background:#57d9a3;} .capbox{font-family:var(--font-body);font-size:13.5px;line-height:1.6;color:var(--pearl); white-space:pre-wrap;word-break:break-word;margin:0;padding:14px 16px; background:var(--ink-2);border:1px solid var(--hairline);border-radius:9px;} .srow-link{margin:8px 0 0;font-size:12.5px;} .srow-link a{color:var(--aqua);text-decoration:none;} /* the 1200×630 card, shown scaled to fit the column; screenshot at full size */ .srow-card{overflow:hidden;border-radius:10px;} .scard{width:1200px;height:630px;transform-origin:top left;transform:scale(.35); display:flex;flex-direction:column;background:linear-gradient(160deg,#0d1619,#070c0e); border:1px solid var(--hairline);position:relative;} .srow-card{height:calc(630px * .35);width:calc(1200px * .35);} .scard-cover{height:300px;overflow:hidden;position:relative;border-bottom:1px solid rgba(88,242,230,.2);} .scard-cover .cover-svg,.scard-cover .cover-img{width:100%;height:100%;object-fit:cover;} .scard-body{flex:1;display:flex;flex-direction:column;gap:18px;padding:44px 52px;} .scard-kind{font-family:var(--font-body);font-size:22px;font-weight:600;letter-spacing:.18em;color:var(--aqua);} .scard-title{font-family:var(--font-display);font-weight:700;font-size:56px;line-height:1.05; color:var(--pearl);letter-spacing:-.02em;} .scard-dek{font-family:var(--font-body);font-size:26px;line-height:1.4;color:var(--pearl-dim); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .scard-brand{margin-top:auto;font-family:var(--font-body);font-size:22px;font-weight:600; letter-spacing:.16em;color:var(--pearl);display:flex;align-items:center;gap:12px;} .scard-dot{width:14px;height:14px;border-radius:50%;background:var(--aqua);box-shadow:0 0 16px var(--aqua);} @media(max-width:720px){ .srow{grid-template-columns:1fr;} .srow-card{width:100%;height:auto;aspect-ratio:1200/630;} .scard{transform:scale(.28);} } /* compound → library internal mesh */ .cmp-reading{margin-top:34px;padding-top:24px;border-top:1px solid var(--hairline);} .readlist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px;} .readlist a{display:block;padding:14px 16px;border:1px solid var(--hairline);border-radius:10px; background:rgba(10,16,19,.5);text-decoration:none;transition:border-color .25s var(--ease),background .25s var(--ease);} .readlist a:hover{border-color:var(--aqua-deep);background:rgba(13,20,23,.7);} .rl-title{display:block;font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--pearl);} .rl-dek{display:block;font-size:13px;color:var(--pearl-dim);margin-top:3px; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;} /* ============================================================ Dropdown navigation — host binding for this site. nav.css ships a LIGHT palette by default and deliberately does not read this page's tokens by name. It cannot: `--ink` here is the near-black BACKGROUND and `--pearl` is the text, whereas on Standard Associates `--ink` is heading text on white, and `--hairline` is inverted between the two in the same way. Binding by name would have produced a white panel with an invisible border on this dark site — wrong, but rendering, which is the kind of wrong nobody reports. So the roles are stated here, where they are known. Every pair below was measured against the panel ground rather than assumed: pearl on panel 17.50:1 aqua on panel 13.71:1 pearl-dim .66 7.96:1 CTA ink on aqua 14.59:1 CTA hover 8.13:1 The CTA is the one that would have failed silently: nav.css defaults its foreground to white, and white on --aqua is 1.38:1. On this site the accent is a LIGHT colour, so the button takes dark text. ============================================================ */ .ddn { --ddn-surface: #0c1215; --ddn-fg: var(--pearl-dim); --ddn-fg-on: var(--pearl); --ddn-accent: var(--aqua); --ddn-line: var(--hairline); --ddn-line-2: var(--hairline-2); --ddn-tint: rgba(88,242,230,0.12); --ddn-pill-bg: rgba(88,242,230,0.12); --ddn-cta-fg: var(--ink); --ddn-accent-2: var(--aqua-deep); --ddn-cta-glow: rgba(88,242,230,0.55); --ddn-chrome: rgba(9,14,17,0.97); --ddn-shadow: 0 24px 60px -28px rgba(0,0,0,0.85), 0 2px 10px -6px rgba(0,0,0,0.6); --ddn-shadow-lg: 0 30px 70px -30px rgba(0,0,0,0.9); } /* The bar sits inside this site's own .topbar, which already handles the sticky ground and the wordmark; the component only owns the right side. */ .topbar .ddn { margin-left: auto; } /* ============================================================ The clinicians' scroll — /clinicians. Added 2026-08-28. One section per person. A STAGE (the chosen video, full width) and a RAIL (the rest, in a horizontal snap-scrolling strip). The rail is a row of