/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 */
/* Revised from observed MBARI, WHOI, Stanford Woods and Westlake pages: clear sans, navy/blue, accessible labels and evidence-led content. */
@import url('fonts/misans.css');
:root{
 --color-paper:oklch(99% .003 245);--color-paper-2:oklch(97% .009 245);--color-ink:oklch(22% .025 249);--color-muted:oklch(47% .022 249);--color-rule:oklch(88% .014 245);
 --color-accent:oklch(49% .16 248);--color-accent-light:oklch(79% .1 223);--color-focus:oklch(56% .16 248);--color-deep:oklch(20% .045 251);--color-deep-2:oklch(26% .05 251);
 --color-light:oklch(99% .003 245);--color-light-muted:oklch(85% .018 235);--color-deep-rule:oklch(43% .035 248);--color-shade-deep:oklch(17% .046 253 / .85);--color-shade:oklch(17% .046 253 / .52);--color-shade-soft:oklch(17% .046 253 / .2);--color-clear:oklch(17% .046 253 / 0);
 --font-body:'MiSans','PingFang SC','Microsoft YaHei',sans-serif;--font-display:var(--font-body);--text-display:clamp(40px,5.2vw,78px);--text-title:clamp(28px,3.2vw,44px);--radius-pill:8px;--radius-lg:12px;--space-section:clamp(64px,7vw,100px);
 --color-map-land:oklch(30% .04 247);--color-map-line:oklch(52% .035 247);--color-map-water:oklch(71% .105 226);
}
[data-theme='dark']{--color-paper:oklch(20% .025 249);--color-paper-2:oklch(24% .028 249);--color-ink:oklch(96% .009 245);--color-muted:oklch(78% .015 245);--color-rule:oklch(38% .025 249);--color-accent:oklch(77% .1 226)}
body{font-size:16px;line-height:1.8}h1,h2{font-weight:600;letter-spacing:-.025em}h3{font-weight:600}p{font-weight:400}.english{font-family:var(--font-body)}.brand-name{font-size:14px;font-weight:600;letter-spacing:0}.brand-name span{font-family:var(--font-body);font-weight:400;font-size:11px;letter-spacing:.01em;margin-top:3px}.brand-mark{border:0;border-radius:0;background:none;width:38px;height:42px}.brand-mark svg{width:34px;height:34px}.header-inner{height:70px;margin-top:13px;gap:24px}.desktop-nav{gap:27px}.desktop-nav a{font-size:14px;font-weight:500}.header-inner:before{border-radius:0;inset:-14px calc(-1 * var(--space-gutter));border:0;box-shadow:0 1px 0 var(--color-deep-rule)}.header.is-floating .header-inner{transform:none}.header.is-floating .header-inner:before{opacity:1}.header.is-floating{color:var(--color-light)}body:not([data-page='home']) .header{color:var(--color-ink)}body:not([data-page='home']) .header-inner:before{background:var(--color-paper);box-shadow:0 1px 0 var(--color-rule)}body:not([data-page='home']) .brand-name span{color:var(--color-muted)}body:not([data-page='home']) .desktop-nav a:after{background:var(--color-accent)}body:not([data-page='home']) .header .icon-button:hover{background:var(--color-paper-2);color:var(--color-ink)}
.hero{height:92svh;min-height:700px;max-height:950px}.hero h1{font-size:var(--text-display);max-width:1100px;line-height:1.2;letter-spacing:.015em;font-weight:600}.hero-location{font-size:14px;letter-spacing:.02em;margin-bottom:30px;font-weight:400}.hero-location:before{display:none}.hero-content{padding-top:110px;padding-bottom:130px}.hero-sub{font-size:17px;line-height:1.9;max-width:670px;margin-top:28px}.hero-picture img{object-position:center;filter:saturate(.65)}.hero:before{background:linear-gradient(90deg,var(--color-shade-deep),var(--color-shade-soft)),linear-gradient(0deg,var(--color-shade-deep),var(--color-clear) 75%)}.hero-bottom{font-size:12px;inset-inline:var(--space-gutter);bottom:25px}.hero-bottom .english{font-size:12px;line-height:1.8}.hero-number{font-family:var(--font-body);font-size:22px}.hero-scroll{letter-spacing:.02em}.scene-toggle{bottom:25px}.flow-canvas{opacity:.25}.hero .button.primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-light)}.hero-actions{gap:30px}.button{font-size:14px;padding:11px 24px;gap:20px;min-height:48px}.text-link{font-size:14px;gap:18px;font-weight:500}.hero-bottom .english{max-width:none}.section-head p{font-size:15px}.intro{gap:10%}.intro h2{font-size:38px;line-height:1.4}.intro p{font-size:16px;line-height:1.95}.intro-meta{margin-top:24px}.intro-meta b{font-size:14px}.research-stage{background:var(--color-paper-2);min-height:480px;border-radius:var(--radius-lg);overflow:clip}.research-body{padding:40px}.research-copy h3{font-family:var(--font-body);font-size:28px;font-weight:600;line-height:1.45}.research-copy p{font-size:15px;line-height:1.85}.research-tabs button{font-size:13px}.research-caption .english{font-family:var(--font-body);font-size:21px;font-weight:600;max-width:24ch}.featured-meta{font-family:var(--font-body);font-size:26px;font-weight:600}.featured-paper h3{font-family:var(--font-body);font-size:23px;font-weight:600;line-height:1.5}.featured-paper p{font-size:14px;line-height:1.8}.featured-meta span{font-weight:400}.featured-paper{gap:6%;padding:32px 0}.atlas-info h3{font-family:var(--font-body);font-size:32px;font-weight:600}.news-feature h3{font-family:var(--font-body);font-size:29px;font-weight:600;max-width:20ch}.news-item h3{font-size:20px}.news-item p{font-size:14px}.join-band h2{font-size:36px}.footer-title{font-family:var(--font-body);font-size:26px;font-weight:600;line-height:1.5}.footer-sub{font-size:13px}.footer-bottom{font-size:11px}.footer-links{font-size:13px}.page-hero{padding-block:155px 55px;background:var(--color-paper-2);color:var(--color-ink)}.page-hero:before{display:none}.page-hero .english{color:var(--color-accent);font-family:var(--font-body);font-size:11px;letter-spacing:.04em;margin-bottom:12px;font-weight:500}.page-hero h1{font-size:48px;font-weight:600;line-height:1.25}.page-hero p{font-size:16px;color:var(--color-muted);margin-top:18px}.breadcrumb{color:var(--color-muted);margin-bottom:22px}.page-main{padding-top:48px}.person-feature{grid-template-columns:280px minmax(0,1fr);gap:64px;max-width:1120px}.portrait{padding:0;background:none;border:0}.portrait img{width:100%;height:auto;object-fit:cover;border-radius:var(--radius-lg);max-height:420px}.portrait figcaption{font-size:11px;text-align:left}.person-info h2{font-size:40px;font-weight:600}.person-info .person-role{font-size:15px;font-weight:500}.person-info p{font-size:15px;line-height:1.9;margin-top:22px}.timeline{font-size:14px}.timeline time{font-size:12px}.students{grid-template-columns:repeat(3,minmax(0,1fr));gap:0 40px}.student-initial{color:var(--color-accent);font-family:var(--font-body);font-size:19px;font-weight:500;border-radius:var(--radius-lg)}.student h3{font-size:18px}.student p{font-size:12px}.source-note{font-size:12px;max-width:90ch}.publication h3{font-family:var(--font-body);font-size:22px;font-weight:500;line-height:1.55}.publication-year{font-family:var(--font-body);font-size:22px;font-weight:500}.publication .authors{font-size:13px}.publication .pub-zh{font-size:14px}.project-date{font-family:var(--font-body);font-size:22px}.resource h3{font-size:21px}.resource p{font-size:15px}.dialog-body h3{font-family:var(--font-body);font-size:25px;font-weight:600}.dialog-body p{font-size:15px}.empty h3{font-family:var(--font-body);font-size:24px}.contact-row>a,.contact-row>span{font-size:17px}.admin-banner{border-left:0;border:1px solid var(--color-rule);border-radius:var(--radius-lg)}
@media(min-width:1600px){.header-inner:before{inset:-14px calc((var(--page-max) - 100vw)/2 - var(--space-gutter));}}
@media(max-width:1180px){.desktop-nav{gap:18px}.desktop-nav a{font-size:13px}.brand-name{font-size:12px}.brand-name span{font-size:10px}.header-inner{gap:16px}.research-tabs button{font-size:12px}.research-body{padding:28px}.person-feature{gap:44px;grid-template-columns:240px minmax(0,1fr)}}
@media(max-width:980px){.header-inner{height:64px}.hero{min-height:660px}.hero h1{font-size:clamp(42px,6.5vw,66px)}.hero-sub{font-size:16px}.person-feature{grid-template-columns:220px minmax(0,1fr);gap:36px}.students{grid-template-columns:repeat(2,minmax(0,1fr))}.intro h2{font-size:33px}.research-copy h3{font-size:24px}.research-copy p{font-size:14px}.section-head h2{font-size:34px}}
@media(max-width:700px){.hero{height:88svh;min-height:650px}.hero h1{font-size:clamp(31px,7.6vw,48px);line-height:1.3;letter-spacing:.01em}.hero-location{font-size:12px;max-width:32ch;line-height:1.8}.hero-sub{font-size:14px;max-width:40ch;white-space:normal;line-height:1.85}.hero-content{padding-top:100px;padding-bottom:140px}.hero-actions .button{font-size:13px}.hero-actions{gap:24px}.hero-bottom .english{font-size:11px}.brand-name{font-size:12px;max-width:190px}.brand-name span{font-size:10px}.brand-mark{width:28px;height:36px}.brand-mark svg{width:28px;height:28px}.header-inner{margin-top:12px}.header-inner:before{inset:-14px calc(-1 * var(--space-gutter))}.intro h2{font-size:30px;white-space:normal;max-width:none}.intro p{font-size:15px}.section-head h2{font-size:30px}.research-body{padding:26px 24px}.research-stage{border-radius:10px}.research-copy h3{font-size:25px}.research-tabs button{font-size:12px}.research-caption .english{font-size:22px}.featured-meta{font-size:21px}.featured-paper h3{font-size:20px}.page-hero{padding-block:125px 38px}.page-hero h1{font-size:36px}.page-hero p{font-size:14px;line-height:1.8}.page-main{padding-top:32px}.person-feature{grid-template-columns:minmax(0,1fr);gap:28px}.portrait{max-width:240px}.portrait img{max-height:none}.person-info h2{font-size:34px}.person-info p{font-size:15px}.portrait figcaption{font-size:10px}.student p{font-size:11px}.student-initial{font-size:17px}.publication h3{font-size:20px}.publication-year{font-size:18px}.publication .authors{font-size:12px}.join-band h2{font-size:30px}.footer-title{font-size:22px}.footer-sub{font-size:12px}.footer-links{gap:20px}.contact-row>a,.contact-row>span{font-size:16px}.footer-bottom{font-size:10px}.dialog-body h3{font-size:22px}.news-feature h3{font-size:25px}}
@media(max-width:374px){.hero h1{font-size:30px}.hero-location{font-size:11px}.brand-name{font-size:11px;max-width:166px}.brand-name span{font-size:9px}.hero-actions{gap:16px}.hero-actions .button{font-size:12px}.hero-actions .text-link{font-size:12px}.intro-meta{gap:16px}.intro-meta b{font-size:13px}.research-tabs button{font-size:11px}.student p{font-size:10px}}
/* Hallmark · component: brand mark · genre: academic editorial · theme: Garden · P5 H4 E4 S5 R5 V4 */
.brand-mark{width:44px;height:44px;flex:none;display:block;overflow:hidden;border:0;border-radius:16px;background:none;transition:transform var(--dur-short) var(--ease-out)}
.brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
.brand-mark svg{display:block;width:100%;height:100%}
.brand:hover .brand-mark{transform:translateY(-2px)}
.brand-name{max-width:250px;line-height:1.3;white-space:normal;overflow-wrap:normal}
.brand-name span{line-height:1.3;margin-top:4px;letter-spacing:0}
.footer-main{justify-content:flex-start}
@media(max-width:1180px){.brand-name{max-width:215px}}
@media(max-width:700px){.brand-mark{width:36px;height:36px;border-radius:10px}.brand-name{max-width:clamp(135px,42vw,190px);font-size:12px;line-height:1.35}.brand-name span{display:none}.header-inner{gap:8px}}
@media(max-width:374px){.brand-mark{width:33px;height:33px}.brand-name{max-width:140px;font-size:11px}}
@media(prefers-reduced-motion:reduce){.brand-mark{transition:none}.brand:hover .brand-mark{transform:none}}
/* Compact navigation, quiet footer and a single introduction hierarchy. */
:root{--color-brand-water:oklch(55% .105 223);--color-brand-land:oklch(76% .105 165)}
.header{height:64px;transition:color var(--dur-short) var(--ease-out)}
.header:before{content:'';position:absolute;inset:0;background:var(--color-paper);opacity:0;transition:opacity var(--dur-short) var(--ease-out)}
.header.is-floating{color:var(--color-ink)}
.header.is-floating:before{opacity:1}
.header .header-inner{height:64px;width:100%;max-width:var(--page-max);margin:0 auto;padding:0 var(--space-gutter);gap:22px}
.header .header-inner:before{content:none}
.header .brand-mark{width:40px;height:40px;border-radius:0;overflow:visible}
.header .brand-name{max-width:230px;line-height:1.3}
.header.is-floating .brand-name span{color:var(--color-muted)}
.header.is-floating .icon-button:hover{background:var(--color-paper-2);color:var(--color-ink)}
.header .desktop-nav{gap:clamp(16px,1.5vw,24px)}
.header .header-tools{gap:2px}
html[lang='en'] .header .brand-name{font-size:12px}
.footer{padding-block:22px;background:var(--color-paper-2);color:var(--color-muted)}
.footer>.container{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.footer-main{min-width:0}
.footer-links{padding:0;gap:24px;color:var(--color-ink)}
.footer-links a{min-height:36px;font-size:13px}
.footer-links a:hover{color:var(--color-accent)}
.footer-bottom{border:0;padding:0;margin:0;font-size:11px;color:var(--color-muted)}
.news-link{display:inline-flex;align-items:center;gap:8px;margin-top:10px;color:var(--color-accent);font-size:12px;font-weight:500}.news-link svg{width:15px;height:15px}
#about{padding-block:64px}
#about .intro{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:64px;align-items:start}
#about h2{max-width:none;font-size:34px;line-height:1.3}
#about .intro-copy p{max-width:65ch;font-size:16px;line-height:1.9}
#about .text-link{margin-top:18px}
@media(max-width:1180px){.header .desktop-nav{display:none}.header .menu-button{display:grid}.header .header-inner{gap:14px}}
@media(max-width:1000px){#about .intro{grid-template-columns:minmax(0,1fr);gap:22px}#about{padding-block:48px}}
@media(max-width:700px){.header,.header .header-inner{height:56px}.header .header-inner{gap:8px}.header .brand-mark{width:36px;height:36px}.header .brand-name{max-width:clamp(135px,42vw,174px);font-size:12px}.header .header-tools{gap:0}.footer{padding-block:18px}.footer>.container{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.footer-main{width:100%}.footer-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 24px}.footer-bottom{font-size:10px}#about{padding-block:40px}#about h2{font-size:28px}#about .intro-copy p{font-size:15px}}
@media(max-width:374px){.header .brand-mark{width:34px;height:34px}.header .brand-name{max-width:140px;font-size:11px}html[lang='en'] .header .brand-name{font-size:11px}}