/* Research notes: paper, regulatory DNA, and a person behind the work. */
/* One heading scale and one section rhythm for every notebook page. */
.notebook{--ink:#202722;--accent:#1B675A;--rust:#B54B35;--muted:#536057;--line:#d9ddd1;--soft:#e9eee5;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--h2:2.25rem;--h2-minor:1.75rem;--h3:1.5rem;--section-gap:80px;background:var(--paper);color:var(--ink)}
.notebook a{color:var(--accent)}
.notebook :is(a,button,input,summary,[role=button]):focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.notebook .site-header{background:var(--paper);border-bottom:1px solid var(--line)}
.notebook .header-inner{min-height:76px}
.notebook .brand{color:var(--ink);font-family:var(--serif);font-size:1.25rem;font-weight:600;letter-spacing:-.025em;display:flex;align-items:baseline;gap:16px}
.brand-note{font:400 .75rem var(--mono);letter-spacing:0;color:var(--muted)}
.notebook .site-header nav{gap:28px}
.notebook .site-header nav a{font-size:.875rem;color:var(--ink)}
.notebook .site-header nav a[aria-current=page]{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.notebook .hero{background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
.notebook .hero-inner{grid-template-columns:minmax(0,1fr) minmax(0,1.07fr);gap:72px;padding:64px 0 58px;align-items:center}
.notebook .hero h1{font:500 3.4rem/1.15 var(--serif);letter-spacing:-.04em;margin:0 0 8px;display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 16px}
.name-pronunciation{font-size:.8125rem;line-height:1.7;color:var(--muted);margin:0 0 24px}
.name-pronunciation span{color:var(--ink)}
.latin-name{white-space:nowrap}
.chinese-name{font-family:var(--sans);font-size:1.1rem;font-weight:400;letter-spacing:.05em;white-space:nowrap;color:var(--accent)}
.notebook .hero-question{font:500 2.15rem/1.35 var(--serif);letter-spacing:-.025em;max-width:510px;margin:0 0 23px}
.notebook .hero-intro{font-size:1.0625rem;color:var(--ink);max-width:445px;line-height:1.8}
.notebook .hero-affiliation{font-size:.8125rem;line-height:1.8;color:var(--muted);margin-top:22px;max-width:440px;text-wrap:balance}
.notebook .hero-links{margin-top:28px;gap:25px;font-size:.875rem;flex-wrap:wrap}
.notebook .hero-links a{color:var(--accent)}
.notebook .hero-links .primary-link{border-color:var(--accent)}
.research-locus{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0 18px;min-width:0;container-type:inline-size}
.locus-topline{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font:400 .75rem/1.6 var(--mono);color:var(--muted);margin-bottom:14px}
.locus-topline>span:first-child{color:var(--ink)}
.lens-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);padding-bottom:9px}
.lens-tabs button{background:transparent;border:0;border-bottom:2px solid transparent;color:var(--muted);font:500 .8125rem/1.5 var(--sans);min-height:40px;padding:8px 12px;border-radius:0}
.lens-tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent);background:var(--soft)}
.lens-tabs button:hover{color:var(--accent)}
.lens-panel[hidden]{display:none}
.locus-figure{display:block;width:100%;height:auto;margin:12px 0 14px;overflow:visible}
.genome-track{stroke:#788679;stroke-width:1.3}
.locus-arc{stroke:#788679;stroke-width:1.6;fill:none;pointer-events:stroke}
.locus-arc.is-emphasized{stroke:var(--rust);stroke-width:2.7}
.locus-contact-hit{fill:none;stroke:transparent;stroke-width:20;pointer-events:stroke}
.locus-contact.is-active .locus-arc{stroke:var(--rust);stroke-width:5}
.locus-contact.is-active .locus-diagram-label{fill:var(--rust);font-weight:600}
.locus-element{fill:#e1e8dd;stroke:var(--accent);stroke-width:1.5}
.locus-element.is-emphasized{fill:var(--accent);stroke:var(--accent)}
.locus-element path[fill=none]{stroke:var(--ink);stroke-width:1.8}
.locus-element.is-emphasized path[fill=none]{stroke:var(--accent)}
.locus-boundary{fill:#e9eee5;stroke:#788679;stroke-dasharray:4 5;stroke-width:1.5}
.locus-boundary.is-emphasized{stroke:var(--accent);stroke-width:2}
/* Compensate for SVG scaling in narrow columns, keeping labels near 12–14 CSS pixels. */
.locus-diagram-label{font:400 16px var(--mono);font-size:clamp(16px,calc(36px - 4.3cqw),26px);fill:var(--ink);stroke:none}
.locus-element.is-emphasized .locus-diagram-label{fill:var(--paper)}
.locus-axis-label{font:400 12px var(--mono);font-size:clamp(14px,calc(36px - 4.3cqw),26px);fill:var(--muted)}
[data-locus-focus][role=button]{cursor:pointer}
[data-locus-focus][role=button]:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.locus-note{font:400 italic 1.15rem/1.5 var(--serif);color:var(--accent);margin:0 0 15px}
.locus-controls{display:flex;flex-wrap:wrap;gap:7px}
.locus-controls button{border:1px solid #788679;border-radius:0;background:transparent;color:var(--ink);font:400 .75rem/1.5 var(--mono);padding:7px 9px;min-height:34px}
.locus-controls button[aria-pressed=true]{border-color:var(--accent);background:var(--soft);color:var(--accent);box-shadow:inset 0 -2px 0 var(--accent)}
.locus-caption{font-size:.8125rem;line-height:1.8;color:var(--muted);margin:14px 0 0;min-height:3.6em}
.locus-source{display:inline-block;border-bottom:1px solid var(--accent);font:400 .75rem/1.7 var(--mono);padding-bottom:2px;margin-top:14px}
.notebook-about{display:grid;grid-template-columns:270px minmax(0,1fr);gap:74px;align-items:start;padding:var(--section-gap) 0 0}
/* The top offset lines the photo up with the cap height of the "About" heading. */
.portrait{width:270px;max-width:100%;margin-top:10px}
.portrait img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--line)}
.portrait figcaption{font:400 .75rem/1.7 var(--mono);color:var(--muted);margin-top:13px}
.about-copy{max-width:690px}
.about-copy h2{font:500 var(--h2)/1.25 var(--serif);letter-spacing:-.03em;margin-bottom:18px}
.about-copy p{font-size:.9375rem;line-height:1.75;color:var(--muted)}
.about-copy strong{color:var(--ink);font-weight:600}
.notebook-link{display:inline-block;font-size:.8125rem;font-weight:500;border-bottom:1px solid var(--accent);padding-bottom:3px}
.about-copy>.notebook-link{margin-top:22px}
.notebook-section{padding-top:var(--section-gap)}
.notebook-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:26px}
.notebook-section-heading h2{font:500 var(--h2)/1.25 var(--serif);letter-spacing:-.03em}
.notebook-section-heading>p{font-size:.8125rem;color:var(--muted)}
.selected-study{border-top:1px solid var(--line);padding:30px 0 34px}
.work-meta{display:flex;align-items:baseline;justify-content:space-between;gap:16px;font:400 .75rem/1.8 var(--mono);color:var(--muted);margin-bottom:20px}
.work-meta>span:last-child{color:var(--accent)}
.study-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:70px}
.study-question h3{font:500 var(--h3)/1.35 var(--serif);letter-spacing:-.02em;max-width:390px}
.study-question>p{font-size:.875rem;line-height:1.8;color:var(--muted);margin-top:15px;max-width:380px}
.study-result .finding{font-size:1rem;line-height:1.85;color:var(--ink)}
.study-result .my-part{font-size:.875rem;line-height:1.85;color:var(--muted);margin-top:17px}
.my-part strong{font-weight:600;color:var(--ink)}
.work-actions{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px}
.publication-details{font-size:.8125rem;margin-top:22px;color:var(--muted)}
.publication-details summary{font:400 .75rem/1.6 var(--mono)}
.publication-details h4{font:500 1rem/1.6 var(--serif);margin-top:14px}
.publication-details h4 a{color:var(--ink)}
.publication-details p{font-size:.8125rem;line-height:1.8}
/* Sized so the cover study is about as tall as its result column, like the figure studies. */
.work-cover{width:100%;max-width:160px;margin-top:24px}
.work-cover img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.work-cover figcaption{font:400 .75rem/1.8 var(--mono);color:var(--muted);margin-top:10px;white-space:nowrap}
.bibliography-link{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:22px 0 0}
.bibliography-link>span{font:400 .75rem/1.8 var(--mono);color:var(--muted)}
.current-exploration{display:grid;grid-template-columns:165px minmax(0,1fr);gap:24px;border-left:2px solid var(--accent);padding:17px 0 17px 22px;margin-top:var(--section-gap)}
.current-exploration h3{font:500 .75rem/1.9 var(--mono);color:var(--accent)}
.current-exploration p{font-size:.875rem;line-height:1.9;color:var(--muted);max-width:820px}
/* Contact mirrors the two study columns, with every link left-aligned in one group. */
.notebook-contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:70px;align-items:start;margin-top:var(--section-gap);border-top:1px solid var(--line);padding:48px 0 56px}
.notebook-contact h2{font:500 var(--h2-minor)/1.35 var(--serif);letter-spacing:-.025em}
.notebook-contact p{font-size:.875rem;color:var(--muted);margin-top:8px}
.contact-links .social-links{gap:4px 23px}
.contact-links>.notebook-link{margin-top:18px}
.notebook .social-links a{border-bottom-color:var(--accent);font-size:.8125rem}
.notebook .news-section{padding:var(--section-gap) 0 0}
.notebook .news-section h2{font:500 var(--h2-minor)/1.3 var(--serif);margin-bottom:22px}
.notebook .news-date{font-family:var(--mono);font-size:.75rem}
.notebook .news-list li{font-size:.875rem}
.notebook .news-list a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
.notebook .news-list a:hover{text-decoration-color:var(--accent)}
.link-arrow{color:var(--accent)}
.notebook .site-footer{color:var(--muted);font:400 .75rem/1.8 var(--mono);padding:20px 0 30px}
/* Archive and CV pages share the header's 1120px container so all left edges align. */
.archive-main{max-width:1120px;margin:54px auto 64px}
.notebook .eyebrow{font:400 .75rem/1.8 var(--mono);text-transform:none;letter-spacing:0}
.archive-main>h1{font:500 3.25rem/1.25 var(--serif);letter-spacing:-.04em;margin:15px 0 20px}
.archive-intro{color:var(--muted);font-size:1rem;margin-bottom:28px}
.notebook .publication h3{font-size:var(--h3)}
.notebook .paper-year{font-family:var(--mono);font-size:.75rem}
.notebook .publication-list{margin-bottom:25px}
.notebook .paper-actions{gap:22px;flex-wrap:wrap}
.notebook .paper-link{border:0;border-bottom:1px solid var(--accent);border-radius:0;font-size:.8125rem;font-weight:500;line-height:1.5;padding:0 0 3px}
.notebook .paper-link:hover{background:transparent;text-decoration:none}
.notebook .publication summary{font-family:var(--mono);font-size:.75rem}
.notebook .keywords-label{font:400 .75rem/1.8 var(--mono);letter-spacing:0;text-transform:none;margin-bottom:2px}
.notebook .print-button{border-color:#788679;border-radius:0;color:var(--ink);font:400 .75rem/1.5 var(--mono);padding:10px 14px}
@media(max-width:1190px){
 .notebook .hero-inner{gap:40px;padding:50px 0 44px}
 .notebook .hero h1{font-size:3rem}
 .notebook .hero-question{font-size:2rem}
 .notebook-about{gap:48px;grid-template-columns:245px minmax(0,1fr)}
 .portrait{width:245px}
 .study-grid,.notebook-contact{gap:42px}
 .archive-main{margin-left:32px;margin-right:32px}
}
@media(max-width:900px){
 .notebook{--h2:2rem;--h2-minor:1.6rem;--h3:1.35rem;--section-gap:64px}
 .notebook .brand{display:block}
 .brand-note{display:block;margin-top:3px;font-size:.75rem}
 .notebook .site-header nav{gap:20px}
 .notebook .hero-inner{gap:32px;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
 .notebook .hero h1{font-size:2.7rem;gap:7px 12px}
 .notebook .hero-question{font-size:1.75rem}
 .notebook .hero-intro{font-size:1rem}
 .notebook .hero-affiliation{font-size:.75rem}
 .notebook .hero-links{font-size:.8125rem;gap:18px}
 .locus-topline{flex-wrap:wrap;gap:4px}
 .lens-tabs button{font-size:.75rem;padding:8px 9px}
 .locus-note{font-size:1.05rem}
 .locus-controls button{padding:6px 8px}
 .locus-caption{font-size:.75rem}
 .notebook-about{grid-template-columns:210px minmax(0,1fr);gap:35px}
 .portrait{width:210px}
 .about-copy p{font-size:.875rem}
 .notebook-section-heading{display:block}
 .notebook-section-heading>p{margin-top:8px}
 .study-grid,.notebook-contact{gap:30px}
 .study-result .finding{font-size:.9375rem}
 .contact-links .social-links{gap:4px 15px}
}
@media(max-width:680px){
 .notebook{--h2:1.9rem;--h2-minor:1.5rem;--h3:1.35rem;--section-gap:48px}
 .notebook .header-inner{min-height:0;gap:18px}
 .notebook .brand{display:flex;align-items:baseline}
 .brand-note{font-size:.75rem;margin:0}
 .notebook .site-header nav{gap:20px}
 .notebook .site-header nav a{font-size:.8125rem}
 .notebook .hero-inner{display:flex;flex-direction:column;align-items:stretch;gap:26px;padding:28px 0}
 .notebook .hero h1{font-size:2.9rem;gap:9px 12px;margin:0 0 6px}
 .name-pronunciation{margin-bottom:18px}
 .chinese-name{font-size:1rem}
 .notebook .hero-question{font-size:1.9rem;line-height:1.35;margin-bottom:14px}
 .notebook .hero-intro{font-size:1rem;line-height:1.65}
 .notebook .hero-affiliation{font-size:.8125rem;margin-top:12px}
 .notebook .hero-links{font-size:.8125rem;margin-top:18px;gap:20px}
 .research-locus{padding-top:12px;padding-bottom:12px}
 .locus-topline{gap:8px;margin-bottom:8px}
 .lens-tabs{padding-bottom:6px}
 .lens-tabs button{font-size:.8125rem;padding:8px 10px;min-height:44px}
 .locus-figure{margin-top:8px}
 .locus-note{font-size:1.1rem;margin-bottom:10px}
 .locus-controls button{font-size:.75rem;min-height:44px}
 .locus-caption{font-size:.8125rem;min-height:0;margin-top:10px}
 .locus-source{font-size:.75rem;margin-top:10px}
 .notebook-about{display:flex;flex-direction:column;align-items:stretch;gap:28px}
 .portrait{width:220px;margin:0}
 .about-copy p{font-size:.9375rem}
 .notebook-section-heading{margin-bottom:23px}
 .notebook-section-heading>p{font-size:.8125rem}
 .selected-study{padding:24px 0 28px}
 .work-meta{display:block;margin-bottom:18px}
 .work-meta>span{display:block}
 .work-meta>span+span{margin-top:4px}
 .study-grid{display:block}
 .study-question h3{max-width:none}
 .study-question>p{font-size:.875rem;margin-top:12px}
 .study-result{margin-top:22px}
 .study-result .finding{font-size:.9375rem}
 .study-result .my-part{font-size:.875rem}
 .work-actions{margin-top:19px;gap:21px}
 .work-cover{max-width:200px;margin-top:22px}
 .bibliography-link{display:block;padding-top:20px}
 .bibliography-link>span{display:block;margin-top:9px}
 .current-exploration{display:block;padding:15px 0 15px 18px}
 .current-exploration h3{margin-bottom:9px}
 .notebook-contact{display:block;padding:36px 0 40px}
 .contact-links{margin-top:21px}
 .contact-links>.notebook-link{margin-top:16px}
 .notebook .news-list li{grid-template-columns:78px minmax(0,1fr);gap:16px}
 .notebook .site-footer{display:block}
 .notebook .site-footer>span{display:block}
 .notebook .site-footer>span+span{margin-top:7px}
 .archive-main{margin:34px 22px 45px}
 .archive-main>h1{font-size:2.75rem}
 .notebook .publication{display:block;padding:24px 0}
 .notebook .paper-year{margin-bottom:9px}
}
@media(max-width:360px){
 .notebook .hero h1{font-size:2.5rem}
 .notebook .hero-question{font-size:1.75rem}
 .notebook .site-header nav{gap:16px}
 .lens-tabs button{font-size:.75rem;padding:8px 9px}
 .locus-controls button{padding:7px 8px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .notebook *, .notebook *::before, .notebook *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}