/* Shared research exhibit foundation. Project diagrams, data and workflow styles stay in their page. */
:root { --paper:#f6f5ef;--ink:#1d2630;--muted:#69716f;--line:#d7dad2;--blue:#2861ce;--mint:#91ded0;--orange:#d8753e;--night:#17212c;--evidence:#e8ece2;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif }
* { box-sizing:border-box }
html { scroll-behavior:smooth;scroll-padding-top:85px }
body { margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.7 }
button,a,input { -webkit-tap-highlight-color:transparent }
button { font:inherit;cursor:pointer }
button:disabled { cursor:wait }
a { color:inherit;text-decoration:none }
a:hover { text-decoration:underline;text-underline-offset:5px }
button:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--blue);outline-offset:5px }
button { border:0 }
svg { display:block;max-width:100% }
::selection { background:#bfe8dd;color:var(--ink) }
.wrap { width:min(1280px,calc(100% - 96px));margin:auto }
.mono { font-family:var(--mono) }
.eyebrow { font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase }
.muted { color:var(--muted) }
.section-label { display:flex;align-items:center;gap:16px;color:var(--blue);font:11px var(--mono);letter-spacing:.1em;margin-bottom:25px }
.section-label:before { content:"";width:26px;height:1px;background:currentColor }
h1,h2,h3,p { margin:0 }
h2 { font-size:clamp(30px,3.2vw,44px);line-height:1.35;letter-spacing:-.055em }
h3 { line-height:1.45 }
.section-intro { display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:38px }
.section-intro>p { max-width:440px;color:var(--muted);line-height:1.9 }
.arrow { font-family:var(--mono);margin-left:13px }
.btn { display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:48px;padding:11px 22px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);font-size:13px;font-weight:600;transition:background .2s,transform .2s }
.btn:hover { background:#33404d;text-decoration:none;transform:translateY(-2px) }
.btn.light { background:transparent;color:var(--ink);border-color:#b7c0b9 }
.btn.light:hover { background:#eaece4 }
.btn.mint { background:var(--mint);border-color:var(--mint);color:var(--night) }
.btn.mint:hover { background:#b2eee3 }
.btn:disabled { opacity:.55;transform:none }
.text-link { font-size:13px;font-weight:500 }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
.topbar { height:82px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px }
.brand { display:flex;align-items:center;gap:13px }
.brand-icon { display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--ink);border-radius:50%;font:bold 14px var(--mono) }
.brand-name { font-size:12px;font-weight:650;letter-spacing:.04em }
.brand-name span { font-weight:400;color:var(--muted);margin-left:9px }
.topnav { display:flex;align-items:center;gap:28px;font-size:12px }
.language-switch { color:var(--muted);padding:8px 0;font-size:11px;font-weight:500;white-space:nowrap;flex-shrink:0 }
.menu-line { height:15px;width:1px;background:var(--line) }
.hero { display:grid;grid-template-columns:1fr 1.04fr;align-items:center;gap:25px;padding:56px 0 52px;min-height:640px }
.hero .eyebrow { color:var(--muted);margin-bottom:20px;display:flex;align-items:center;gap:10px }
.live-dot { display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--blue) }
.wordmark { font-size:clamp(72px,7.8vw,112px);line-height:1;letter-spacing:-.065em;font-weight:700;margin-left:-5px }
.wordmark span { color:var(--blue) }
.hero-title { font-size:clamp(27px,2.5vw,36px);line-height:1.5;letter-spacing:-.04em;margin:24px 0 18px;font-weight:550 }
.hero-copy { max-width:435px;color:var(--muted);font-size:14px;line-height:1.95 }
.hero-actions { display:flex;align-items:center;flex-wrap:wrap;gap:16px 25px;margin-top:30px }
.hero-actions>a { display:inline-flex;align-items:center;gap:16px;min-height:48px;font-size:13px;line-height:1.4;white-space:nowrap }
.hero-actions .text-link { text-decoration:none }
.hero-actions .text-link:hover .hero-action-label { text-decoration:underline;text-underline-offset:5px }
.hero-action-icon { display:block;width:16px;height:16px;flex:0 0 16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round }
.hero-note { margin-top:26px;font:10px var(--mono);color:#7c8580;letter-spacing:.025em }
.hero-art { position:relative;isolation:isolate;min-width:0 }
.hero-art:before { content:"";position:absolute;inset:10% 0 7%;z-index:-1;background:radial-gradient(ellipse at center,#dbe9dd 0%,transparent 67%) }
.hero-art svg { width:100%;overflow:visible }
.diagram-caption { display:flex;justify-content:space-between;margin:0 28px;font:10px var(--mono);letter-spacing:.06em;color:#7a8480 }
.flowline { stroke-dasharray:5 8;animation:flow 2s linear infinite }
.float-a { animation:float 6s ease-in-out infinite }
.float-b { animation:float 6s ease-in-out -2s infinite }
.float-c { animation:float 6s ease-in-out -4s infinite }
.pulse-dot { animation:pulse 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center }
.signal { animation:signal 4s ease-in-out infinite }
.signal:nth-of-type(2) { animation-delay:1s }
@keyframes flow{to{stroke-dashoffset:-52}}
@keyframes float{50%{transform:translateY(-9px)}}
@keyframes pulse{50%{opacity:.5;transform:scale(.85)}}
@keyframes signal{0%,100%{opacity:.3}50%{opacity:1}}
.research-strip { display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:25px 0;margin-bottom:94px }
.research-strip>div { padding:0 26px;border-left:1px solid var(--line) }
.research-strip>div:first-child { border:0;padding-left:0 }
.award { display:flex;align-items:center;gap:12px }
.award-icon { color:var(--orange);font-size:28px;line-height:1 }
.award strong { font-size:12px;display:block;font-weight:650 }
.award span { color:var(--muted);font-size:11px }
.strip-number { font:500 30px var(--mono);letter-spacing:-.06em;line-height:1.2 }
.strip-number small { font-size:14px;color:var(--muted);margin-left:4px }
.strip-label { font-size:11px;color:var(--muted);margin-top:6px }
.method { padding:0 0 95px }
.method-grid { display:grid;grid-template-columns:1fr 1fr;gap:65px }
.method-block { border-top:1px solid var(--line);padding-top:26px }
.method-block .eyebrow { color:var(--blue);font-size:10px }
.method-block h3 { font-size:23px;letter-spacing:-.035em;margin:14px 0 }
.method-block>p { color:var(--muted);font-size:13px;line-height:1.9;max-width:530px }
.config-sets { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:25px }
.set { background:var(--paper);padding:13px 12px }
.set b { display:block;font:12px var(--mono);color:var(--blue) }
.set span { font-size:10px;color:var(--muted) }
.set.hidden b { color:var(--orange) }
.method-time { display:flex;align-items:center;gap:26px;margin-top:24px;border-top:1px solid var(--line);padding-top:16px }
.method-time strong { font:24px var(--mono);letter-spacing:-.06em }
.method-time span { font-size:10px;color:var(--muted);line-height:1.8 }
.method-disclaimer { font-size:10px!important;margin-top:13px;line-height:1.7!important }
.resources { padding:85px 0 56px }
.resource-grid { display:grid;grid-template-columns:1.5fr 1fr;gap:90px }
.resource-title { font-size:32px;line-height:1.4;letter-spacing:-.045em;max-width:570px }
.paper-title { font-size:13px;color:var(--muted);line-height:1.9;max-width:490px;margin:18px 0 }
.authors { font-size:11px;color:#727b72 }
.authors strong { color:var(--ink);font-weight:500 }
.resource-links { border-top:1px solid var(--line) }
.resource-link { display:flex;align-items:center;justify-content:space-between;padding:17px 0;border-bottom:1px solid var(--line);font-size:13px }
.resource-link:hover { color:var(--blue);text-decoration:none }
.resource-link span { font:10px var(--mono);color:var(--muted) }
.citation-row { margin-top:20px }
.citation-btn { font-size:11px;background:none;color:var(--muted);padding:7px 0 }
.citation-btn:hover { color:var(--blue) }
.citation-text { font:10px/1.8 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;padding:17px;background:#e9ece4;border:1px solid var(--line);margin:10px 0 0;color:#62705f }
.footer { display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid var(--line);padding:25px 0 32px;font-size:10px;color:#7c847a }
.footer .mono { font-size:9px;letter-spacing:.04em }
.footer a:hover { color:var(--blue) }

/* Shared typography and frame invariants. */
.skip-link { position:absolute; z-index:10; top:12px; left:16px; transform:translateY(-150%); padding:10px 16px; background:var(--ink); color:var(--paper); }
.skip-link:focus { transform:translateY(0); }
p,h1,h2,h3,.eyebrow,.section-label,.hero-note,.diagram-caption span,.footer span { text-wrap:balance; }
.text-unit { white-space:nowrap; }
.hero>div:first-child { align-self:start; }
.hero .eyebrow { line-height:18px; margin-bottom:20px; }
.footer { display:grid; grid-template-columns:minmax(150px,.7fr) minmax(0,1.5fr) auto; gap:28px; align-items:start; }
.footer-brand,.footer-note { min-width:0; }
.footer-back { white-space:nowrap; }
@media(max-width:1100px) {
  .wrap { width:calc(100% - 64px) }
  .resource-grid { gap:45px }
  .method-grid { gap:40px }
  .brand-name span { font-size:10px }
  .topnav { gap:22px }
}
@media(max-width:820px) {
  .wrap { width:calc(100% - 44px) }
  .brand-name span { display:none }
  .topnav { gap:18px }
  .hero-note { font-size:9px }
  .hero-actions { gap:14px 17px }
  .hero-actions>a { font-size:11px;min-height:44px;gap:14px }
  .hero-actions .btn { padding:10px 16px }
  .diagram-caption { font-size:8px;margin:0 12px }
  .section-intro { gap:30px }
  .section-intro>p { font-size:13px;max-width:350px }
  .resource-title { font-size:27px }
  .resource-grid { gap:35px }
  .resource-link span { font-size:9px }
  .hero { padding-top:44px; }
  .resources { padding-top:65px; }
  .footer { grid-template-columns:minmax(0,1fr) auto; gap:10px 24px; }
  .footer-note { grid-column:1; grid-row:2; }
  .footer-back { grid-column:2; grid-row:1/3; }
}
@media(max-width:620px) {
  html { scroll-padding-top:25px }
  .wrap { width:calc(100% - 40px) }
  .topbar { height:68px }
  .brand { gap:9px }
  .brand-icon { width:27px;height:27px;font-size:12px }
  .brand-name { font-size:10px;letter-spacing:0 }
  .topnav { gap:14px }
  .topnav>a:first-child,.menu-line { display:none }
  .topnav>a { font-size:10px }
  .hero-actions { margin-top:24px;gap:12px 22px }
  .hero-actions>a { font-size:12px;min-height:45px;gap:14px }
  .hero-note { font-size:9px;margin-top:20px }
  .diagram-caption { font-size:8px }
  .section-label { font-size:9px;margin-bottom:20px }
  .section-intro { display:block;margin-bottom:28px }
  .section-intro>p { max-width:none;margin-top:16px;font-size:12px }
  h2 { font-size:30px }
  .method-grid { grid-template-columns:1fr;gap:35px }
  .method-block h3 { font-size:22px }
  .method-block>p { font-size:12px }
  .resource-grid { grid-template-columns:1fr;gap:28px }
  .resources { padding:60px 0 40px }
  .resource-title { font-size:27px }
  .paper-title { font-size:12px }
  .authors { font-size:11px;line-height:1.9 }
  .resource-link span { font-size:9px }
  .hero { grid-template-columns:1fr; min-height:0; gap:8px; padding-top:32px; padding-bottom:28px; }
  .hero .eyebrow { font-size:9px; line-height:16px; letter-spacing:.08em; margin-bottom:17px; }
  .language-switch { padding:10px 0; }
  .resources { padding-top:60px; }
  .footer { display:flex; flex-direction:column; gap:10px; font-size:10px; padding-bottom:25px; }
  .footer .mono { font-size:9px; }
}
@media(max-width:350px) {
  .wrap { width:calc(100% - 32px) }
  .topnav { gap:10px }
  .brand-name { font-size:9px }
  .resource-link { font-size:12px }
  .resource-link span { font-size:8px }
  .hero .eyebrow { font-size:8px; }
}

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
}
