/* EMO Lab: clarity, large system typography, restrained surfaces, adaptive reflow. */
:root {
  --bg:#fff; --surface:#f5f5f7; --ink:#1d1d1f; --muted:#616168;
  --accent:#0066cc; --action:#0071e3; --dark:#1d1d1f; --line:#d9d9df;
  --pale:#eef4fb; --lime:#fff; --radius:24px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",sans-serif;
  font-size:100%; font-synthesis:none; font-optical-sizing:auto;
}
*,*::before,*::after { min-width:0; }
html { -webkit-text-size-adjust:100%; }
body { font-size:1.25rem; line-height:1.7; }
p,a,small,li,dd,dt { overflow-wrap:anywhere; }
h1,h2,h3 { font-weight:650; line-height:1.25; letter-spacing:-.035em; text-wrap:pretty; }
h1 { font-size:clamp(2.5rem,5.6vw,4.5rem); }
h2 { font-size:clamp(2rem,4vw,3.25rem); }
h3 { font-size:clamp(1.5rem,2.4vw,1.875rem); }
small,figcaption { font-size:1rem; }
.wrap { width:min(1200px,calc(100% - 96px)); }
.reading-width { max-width:860px; }
.section { padding-block:96px; }
.section.compact { padding-top:24px; }
.muted,.credit { font-size:1.0625rem; }
.eyebrow { color:var(--muted); font-size:1rem; letter-spacing:.04em; font-weight:600; line-height:1.6; margin-bottom:20px; }
.lead { font-size:clamp(1.25rem,2.4vw,1.5rem); line-height:1.7; }
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid var(--action); outline-offset:5px; }
.skip-link { border-radius:12px; font-size:1rem; }

/* The navigation is a quiet, translucent control layer. */
.site-header { position:sticky; top:0; z-index:30; background:rgba(255,255,255,.94); border-bottom:1px solid #00000014; -webkit-backdrop-filter:saturate(160%) blur(20px); backdrop-filter:saturate(160%) blur(20px); }
.header-inner { min-height:76px; gap:32px; }
.brand { gap:8px; font-size:1.5rem; font-weight:650; line-height:1.2; }
.brand-mark,.brand small { display:none; }
#main-nav { font-size:1rem; gap:28px; font-weight:500; }
#main-nav a { padding-block:10px; }
#main-nav a[aria-current=page] { border:0; }
#main-nav .contact-link { display:inline-block; background:var(--action); color:#fff; padding:8px 16px; border:0; border-radius:999px; }
.menu-toggle { border:0; background:var(--surface); border-radius:12px; min-height:44px; padding:8px 14px; font-size:1rem; }
.button { min-height:48px; padding:13px 24px; justify-content:center; gap:16px; font-size:1.125rem; font-weight:500; line-height:1.4; border:1px solid transparent; border-radius:999px; background:var(--action); text-align:center; }
.button:hover,#main-nav .contact-link:hover { background:#0062c6; color:#fff; }
.button.light { background:#fff; color:var(--accent); border:0; }
.button.light:hover { background:#e8eef6; }
.text-link { font-size:1.125rem; padding-block:10px; border:0; }
.text-link:hover { border:0; text-decoration:underline; text-underline-offset:5px; }

/* A centered introduction gives the headline and the real project image room. */
.hero { display:block; text-align:center; min-height:0; padding:80px 0 48px; }
.hero-copy { max-width:1000px; margin-inline:auto; }
.hero .eyebrow { color:var(--ink); font-size:1.125rem; margin-bottom:24px; letter-spacing:.06em; }
.status-dot { display:none; }
.hero h1 { font-size:clamp(2.5rem,6.4vw,5rem); font-weight:650; line-height:1.22; letter-spacing:-.045em; margin-bottom:28px; text-wrap:balance; }
.hero .lead { max-width:760px; margin:0 auto 32px; font-size:clamp(1.25rem,2.2vw,1.5rem); line-height:1.65; }
.hero-actions { justify-content:center; gap:16px 28px; }
.hero-footnote { margin:32px 0 0; padding:0; border:0; color:var(--muted); font-size:1rem; letter-spacing:.04em; }
.hero-visual { padding:0; margin-top:48px; text-align:left; }
.hero-visual>img { width:100%; height:auto; aspect-ratio:2/1; object-fit:cover; object-position:center 52%; border-radius:28px; background:var(--surface); }
.hero-visual figcaption { font-size:1rem; flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:8px 24px; padding-inline:8px; }
.visual-note { top:20px; right:20px; max-width:calc(100% - 40px); padding:8px 16px; background:rgba(255,255,255,.94); color:var(--ink); border-radius:999px; font-size:1rem; letter-spacing:0; }
.section-head { gap:24px; margin-bottom:48px; }
.section-head>div { max-width:880px; }
.section-head .text-link { flex-shrink:0; }
.research-row { grid-template-columns:64px minmax(0,1fr) minmax(0,200px) 24px; gap:24px; padding-block:36px; }
.research-number { font-family:inherit; font-weight:600; font-size:2rem; line-height:1.4; color:#72727a; font-variant-numeric:tabular-nums; }
.research-row h3 { font-size:1.75rem; margin-bottom:12px; }
.research-row p { font-size:1.125rem; }
.research-row small { font-size:1rem; }
.arrow { color:var(--accent); font-size:1.5rem; }
.featured-section { background:var(--surface); border:0; }
.projects-grid { gap:40px; }
.project-card { background:#fff; border-radius:var(--radius); box-shadow:0 2px 8px #00000006; }
.project-image { aspect-ratio:1.7; border-radius:var(--radius) var(--radius) 0 0; background:var(--surface); }
.project-copy { padding:32px; }
.project-copy h3 { font-size:1.75rem; margin-bottom:16px; }
.project-copy h3 a { align-items:start; }
.project-copy h3 a span { color:var(--accent); flex-shrink:0; }
.project-copy p:not(.eyebrow) { font-size:1.1875rem; }
.tags { margin-block:20px; }
.tags span,.tag { max-width:100%; overflow-wrap:anywhere; border:0; border-radius:8px; padding:6px 12px; background:#eef1f5; color:#42464d; font-size:1rem; }
.project-graphic { background:#eaf1f8; color:var(--ink); gap:16px; }
.project-graphic>span { font:650 4rem/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.project-graphic>b { font-size:1rem; font-weight:500; letter-spacing:0; }
.graphic-grid { right:32px; top:32px; width:180px; height:180px; border:1px solid #b5c9df; border-radius:50%; background:none; transform:none; }
.graphic-grid::after { content:''; position:absolute; inset:24px; border:1px solid #b5c9df; border-radius:50%; }
.lab-statement { grid-template-columns:repeat(2,minmax(0,1fr)); gap:80px; align-items:start; }
.lab-statement>div>p:not(.eyebrow) { font-size:1.375rem; line-height:1.8; }
.paper-row { grid-template-columns:88px minmax(0,1fr) 32px; padding-block:36px; }
.paper-row h2,.paper-row h3 { font-size:1.75rem; line-height:1.4; margin-bottom:16px; }
.paper-row p:not(.eyebrow) { font-size:1.1875rem; }
.paper-year { font:500 1.5rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--muted); font-variant-numeric:tabular-nums; }
.contact-band { padding-block:96px; text-align:center; background:var(--ink); color:#fff; }
.contact-band .eyebrow { color:#c3c3cb; }
.contact-band h2 { max-width:920px; margin:0 auto 32px; font-size:clamp(2rem,4.5vw,3.75rem); line-height:1.35; }

/* Readable articles, without fixed-height text boxes or line clamping. */
.page-heading { padding-block:80px 40px; border:0; }
.page-heading h1 { max-width:1040px; }
.page-heading .lead { max-width:860px; }
.focus-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.focus-card { background:var(--surface); border:0; border-radius:var(--radius); padding:32px; }
.focus-card h2 { font-size:1.875rem; }
.focus-card p { font-size:1.1875rem; }
.focus-card small { font-size:1rem; letter-spacing:0; margin-bottom:24px; }
.prose { font-size:1.25rem; line-height:1.85; }
.prose h2 { font-size:2rem; }
.prose h3 { font-size:1.5rem; }
.prose .lead { font-size:1.5rem; }
.prose code,.prose pre,.prose table { font-size:1.0625rem; }
.prose pre { border-radius:16px; max-width:100%; }
.prose table { max-width:100%; }
.source-note { font-size:1rem; gap:12px 24px; }
.callout { border:0; border-radius:20px; padding:32px; background:var(--surface); }
.callout h2,.callout h3 { font-size:1.5rem; }
.callout p { font-size:1.125rem; margin-bottom:12px; }
.about-intro { grid-template-columns:repeat(2,minmax(0,1fr)); }
.about-intro img { border-radius:var(--radius); }
.about-intro .large-text { font-size:2rem; font-weight:600; color:var(--ink); }
.people-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.person-monogram { width:80px; height:80px; background:var(--surface); color:var(--ink); font:500 1.75rem/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.person p,.about-links a { font-size:1.125rem; }
.person small { font-size:1rem; letter-spacing:0; }
.about-links a { border:0; }
.partner-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 40px; }
.partner-list li { font-size:1.1875rem; }
.timeline li { grid-template-columns:100px minmax(0,1fr); }
.timeline li>span { font:500 1.5rem/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--muted); }
.timeline h2 { font-size:1.625rem; line-height:1.5; }
.services-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
.service-card { padding:40px; border:0; border-radius:var(--radius); }
.service-mark { font:650 2.75rem/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; margin-bottom:32px; overflow-wrap:anywhere; }
.service-card h2 { font-size:2rem; }
.filter-bar { grid-template-columns:minmax(0,1fr) 220px 170px; gap:20px; }
.filter-bar label,.search-label,.review-card label { font-size:1.0625rem; font-weight:500; }
input,select,textarea { min-height:48px; border-color:#8b8b94; border-radius:12px; font-size:1.125rem; }
.result-count { font-size:1.0625rem; }
.achievement-row { grid-template-columns:80px minmax(0,1fr) 72px; }
.achievement-year { font:550 1.5rem/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--muted); }
.achievement-row h2 { font-size:1.625rem; line-height:1.45; }
.achievement-row p { font-size:1.1875rem; }
.achievement-row p.eyebrow { font-size:1rem; }
.detail-link { font-size:1.0625rem; padding-block:8px; }
.tags .award-badge { background:#edf4fb; color:#23598c; }
.fact-list { grid-template-columns:112px minmax(0,1fr); }
.fact-list dt { font-size:1.125rem; }
.fact-list dt,.fact-list dd { padding-block:20px; }
.evidence-grid { gap:20px; }
.evidence-grid img { max-height:480px; border-radius:12px; }
.archive-item h2 { font-size:1.625rem; }
.archive-item span { font-size:1.0625rem; white-space:normal; flex-shrink:0; }
.contact-grid { grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); }
.contact-email { font-size:clamp(1.25rem,2.7vw,2rem); }
.contact-aside h2 { font-size:1.5rem; }
.contact-aside a { font-size:1.1875rem; }
.site-search-input { font-size:1.5rem; }
.search-result h2 { font-size:1.625rem; line-height:1.4; }
.search-result p { font-size:1.1875rem; }
.search-result .eyebrow { font-size:1rem; }
.empty-state { padding:32px; border-radius:20px; background:var(--surface); }
.review-card h2 { font-size:1.75rem; }
.review-card li p { font-size:1.125rem; }
.review-actions p { font-size:1.0625rem; }
.site-footer { background:var(--surface); border:0; padding-top:64px; margin-top:48px; }
.footer-grid { grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,.8fr) minmax(0,1.2fr); gap:32px; }
.footer-grid>div:first-child p { font-size:1.0625rem; }
.footer-grid h2 { font-size:1.0625rem; font-weight:650; letter-spacing:0; }
.footer-grid>div>a:not(.brand) { font-size:1rem; margin-bottom:0; padding-block:6px; }
.footer-bottom { font-size:1rem; }

@media(max-width:1023px) {
  .wrap { width:calc(100% - 64px); }
  .header-inner { flex-wrap:wrap; min-height:72px; gap:0 24px; padding-block:12px; }
  .menu-toggle { display:block; }
  #main-nav { width:100%; flex-wrap:wrap; gap:8px 24px; padding-block:20px 12px; }
  html.js #main-nav { display:none; }
  html.js #main-nav.open { display:flex; }
  .section { padding-block:72px; }
  .hero { padding-top:64px; }
  .section-head { flex-direction:column; align-items:start; gap:12px; }
  .research-row { grid-template-columns:48px minmax(0,1fr) 24px; }
  .research-row small { display:none; }
  .focus-grid { grid-template-columns:1fr; }
  .lab-statement,.about-intro { gap:40px; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
  .partner-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .filter-bar { grid-template-columns:minmax(0,1fr) 180px 140px; gap:12px; }
}
@media(max-width:700px) {
  body { font-size:1.1875rem; }
  .wrap { width:calc(100% - 40px); }
  .header-inner { min-height:64px; }
  .hero { padding-block:48px 24px; }
  .hero h1 { font-size:clamp(2rem,7.5vw,3.25rem); line-height:1.3; }
  .hero .lead { font-size:1.25rem; line-height:1.7; }
  .hero .lead br { display:none; }
  .hero-actions { gap:8px 20px; }
  .hero-footnote { font-size:1rem; letter-spacing:0; }
  .hero-visual { margin-top:32px; }
  .hero-visual>img { height:auto; aspect-ratio:1.2; border-radius:20px; }
  .hero-visual figcaption { flex-direction:column; font-size:1rem; }
  .visual-note { top:12px; right:12px; max-width:calc(100% - 24px); font-size:1rem; padding:6px 12px; }
  .section { padding-block:56px; }
  .section-head { display:flex; margin-bottom:32px; }
  .section-head h2 { font-size:2rem; line-height:1.3; }
  .research-row { grid-template-columns:32px minmax(0,1fr) 20px; gap:12px; padding-block:28px; }
  .research-number { font-size:1.5rem; }
  .research-row h3 { font-size:1.5rem; }
  .projects-grid,.services-grid,.lab-statement,.about-intro,.people-grid,.contact-grid { grid-template-columns:1fr; gap:28px; }
  .project-copy { padding:24px; }
  .project-copy h3 { font-size:1.5rem; line-height:1.35; }
  .lab-statement h2 { font-size:2rem; }
  .lab-statement>div>p:not(.eyebrow) { font-size:1.25rem; }
  .paper-row { grid-template-columns:1fr; gap:12px; padding-block:28px; }
  .paper-row h2,.paper-row h3 { font-size:1.5rem; }
  .paper-row>.arrow { display:none; }
  .paper-year { font-size:1.125rem; }
  .contact-band { padding-block:64px; }
  .page-heading { padding-block:48px 16px; margin-bottom:24px; }
  .page-heading h1 { font-size:clamp(2rem,7.5vw,2.75rem); line-height:1.35; }
  .page-heading .lead { font-size:1.25rem; }
  .prose { font-size:1.1875rem; }
  .prose h2 { font-size:1.75rem; }
  .prose h3 { font-size:1.375rem; }
  .callout,.focus-card,.service-card { padding:24px; }
  .people-grid { gap:0; }
  .person { display:grid; grid-template-columns:64px minmax(0,1fr); gap:0 20px; }
  .person-monogram { width:64px; height:64px; grid-row:1/4; margin:0; }
  .person small { grid-column:2; }
  .partner-list { grid-template-columns:1fr; }
  .timeline li { grid-template-columns:1fr; gap:12px; }
  .timeline h2 { font-size:1.5rem; }
  .filter-bar { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .filter-bar label:first-child { grid-column:1/-1; }
  .achievement-row { grid-template-columns:1fr; gap:12px; padding-block:28px; }
  .achievement-row h2 { font-size:1.5rem; }
  .achievement-year { font-size:1.125rem; }
  .achievement-row .detail-link { grid-column:auto; justify-self:start; }
  .achievement-row .tags { margin-bottom:0; }
  .fact-list { grid-template-columns:1fr; }
  .fact-list dt { padding:16px 0 0; border:0; }
  .fact-list dd { padding-top:8px; }
  .evidence-grid { grid-template-columns:1fr; }
  .archive-item { display:flex; flex-direction:column; align-items:start; gap:12px; }
  .contact-aside { border-left:0; border-top:1px solid var(--line); padding:32px 0 0; }
  .contact-email { font-size:1.375rem; }
  .site-search-input { padding:16px; font-size:1.25rem; }
  .search-result h2,.review-card h2 { font-size:1.5rem; }
  .site-footer { padding-top:48px; }
  .footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 20px; }
  .footer-grid>div:first-child,.footer-grid>div:last-child { grid-column:1/-1; }
  .footer-bottom { display:flex; flex-direction:column; gap:8px; font-size:1rem; }
}
@media(max-width:360px) {
  .wrap { width:calc(100% - 32px); }
  .hero h1 { font-size:2rem; }
  .hero .eyebrow { font-size:1rem; letter-spacing:.02em; }
  .hero-actions { flex-direction:column; }
  .filter-bar { grid-template-columns:1fr; }
  .project-copy,.service-card,.focus-card,.callout { padding:20px; }
}
/* Native video keeps playback on demand and adapts without cropping the scene. */
.video-shell { width:100%; border-radius:24px; overflow:hidden; background:#101014; }
.video-shell video { display:block; width:100%; max-width:100%; height:auto; aspect-ratio:16/9; object-fit:contain; }
.video-controls { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-top:24px; }
.video-options { display:flex; padding:4px; border-radius:999px; background:var(--surface); gap:4px; }
.video-options button { min-height:44px; padding:8px 24px; border:0; border-radius:999px; font-size:1.125rem; background:transparent; }
.video-options button[aria-pressed=true] { background:#fff; box-shadow:0 1px 5px #00000020; font-weight:600; }
.video-status { margin-top:20px; font-size:1.0625rem; }
.video-links { display:flex; flex-wrap:wrap; gap:12px 32px; }
@media(max-width:700px) { .video-shell { border-radius:16px; } .video-controls { gap:16px; } .video-section+.section { padding-top:32px; } }