:root { --black:#101010; --paper:#f5f4ef; --warm:#e4e3de; --quiet:#74736d; }
.research-page { background:var(--paper); color:var(--black); }
.research-topbar { height:76px; padding:0 3.6vw; display:grid; grid-template-columns:1fr 1fr auto; align-items:center; background:var(--black); color:#fff; }
.research-topbar > p, .mono { margin:0; font:10px 'DM Mono','Noto Sans SC',monospace; letter-spacing:.45px; }
.research-topbar > p span { color:#aaa9a5; }
.detail-actions { display:flex; align-items:center; gap:22px; }
.detail-actions .language-switcher { border-color:rgba(255,255,255,.42); }
.index-link { color:inherit; text-decoration:none; font:10px 'DM Mono','Noto Sans SC',monospace; border-bottom:1px solid #aaa9a5; padding-bottom:4px; }

.research-hero { min-height:calc(100svh - 76px); position:relative; display:grid; grid-template-columns:1fr minmax(410px,1.16fr); grid-template-rows:auto 1fr; gap:2vw; padding:51px 7.8vw 65px; overflow:hidden; background:#e6e5df; }
.research-hero:after { content:'DATA'; position:absolute; right:-.04em; bottom:-.2em; font:600 clamp(170px,27vw,480px)/.72 Manrope,sans-serif; letter-spacing:-.13em; color:#d5d4cf; z-index:0; pointer-events:none; }
.research-hero > .mono { grid-column:1 / -1; align-self:start; z-index:1; }
.hero-copy { align-self:center; z-index:1; padding:6vh 2vw 4vh 0; }
.hero-copy h1, .research-intro h2, .tools-head h2, .output-copy h2, .research-contact h2 { margin:0; font-size:clamp(52px,6.4vw,107px); font-weight:500; letter-spacing:-.085em; line-height:1.04; }
.hero-copy h1 em, .research-contact h2 em { font-family:Georgia,'Noto Serif SC',serif; font-weight:400; }
.hero-copy p { margin:37px 0 0; font-size:14px; line-height:1.9; color:#484742; }
.hero-stream { height:min(72vh,730px); width:min(100%,980px); display:grid; grid-template-columns:1fr 1fr; gap:14px; align-self:center; justify-self:end; z-index:1; overflow:hidden; transform:rotate(1.2deg); padding:4px; }
.stream-track { display:flex; flex-direction:column; gap:14px; animation:stream-up 27s linear infinite; }
.stream-track.reverse { animation-direction:reverse; animation-duration:34s; }
.stream-track figure { flex:0 0 268px; margin:0; overflow:hidden; background:#fff; box-shadow:0 11px 25px rgba(16,16,16,.11); }
.stream-track figure:nth-child(2n) { flex-basis:205px; }
.stream-track img { display:block; width:100%; height:100%; object-fit:contain; background:#fff; }
.stream-track:nth-child(1) figure:nth-child(1) img { object-position:35% 8%; }
.stream-track:nth-child(2) figure:nth-child(1) img { object-position:50% 47%; }
@keyframes stream-up { from { transform:translateY(0); } to { transform:translateY(calc(-50% - 6px)); } }
.hero-scroll { position:absolute; left:7.8vw; bottom:32px; color:var(--black); font:9px 'DM Mono',monospace; text-decoration:none; z-index:2; }

.study-nav { display:flex; justify-content:space-between; padding:0 7.8vw; overflow-x:auto; background:var(--black); color:#fff; border-top:1px solid #474747; border-bottom:1px solid #474747; }
.study-nav a { padding:20px 0; margin-right:36px; color:inherit; text-decoration:none; white-space:nowrap; font:10px 'DM Mono','Noto Sans SC',monospace; }
.study-nav span { margin-right:12px; color:#a5a39d; }
.research-intro { display:grid; grid-template-columns:1fr 1.45fr; gap:8vw; padding:145px 7.8vw 130px; border-bottom:1px solid var(--black); }
.research-intro h2, .tools-head h2, .output-copy h2 { max-width:850px; font-size:clamp(37px,4.6vw,75px); }
.research-intro h2 span, .tools-head h2 span, .output-copy h2 span { font-family:Georgia,'Noto Serif SC',serif; font-weight:400; font-style:italic; }
.research-intro div > p, .tools-head > p { max-width:440px; margin:54px 0 0; font-size:14px; line-height:2; color:#45443f; }

.research-tools { padding:120px 7.8vw 130px; background:#dcdad4; }
.tools-head { display:grid; grid-template-columns:1fr 1fr; gap:8vw; margin:72px 0 105px; }
.tools-head > p { margin:0; align-self:end; }
.tool-list { border-top:1px solid var(--black); }
.tool-list article { display:grid; grid-template-columns:8% 1.05fr .85fr 1.3fr; gap:24px; padding:23px 0 27px; border-bottom:1px solid var(--black); }
.tool-list article > p, .tool-list h3, .tool-list span, .tool-list div p, .tool-list b { margin:0; }
.tool-list article > p, .tool-list b { font:10px 'DM Mono','Noto Sans SC',monospace; letter-spacing:.25px; }
.tool-list h3 { font-size:clamp(19px,2vw,29px); line-height:1.1; font-weight:500; letter-spacing:-.055em; }
.tool-list span { font:12px/1.5 Georgia,'Noto Serif SC',serif; color:#55534e; }
.tool-list div p { max-width:340px; font-size:12px; line-height:1.75; }
.tool-list b { display:block; margin-top:16px; color:#66645e; font-weight:400; }

.study { display:grid; grid-template-columns:minmax(250px,.61fr) minmax(550px,1.39fr); gap:8vw; padding:128px 7.8vw; border-bottom:1px solid var(--black); }
.study-dark { background:var(--black); color:var(--paper); border-color:#7b7a75; }
.study-meta { position:sticky; top:32px; align-self:start; }
.study-no { margin:0 0 34px; color:#d5d4cf; font:500 clamp(84px,10vw,158px)/.75 Manrope,sans-serif; letter-spacing:-.12em; }
.study-dark .study-no { color:#30302f; }
.study-type { margin:0 0 22px; font:10px 'DM Mono','Noto Sans SC',monospace; letter-spacing:.35px; }
.study-meta h2 { margin:0; font-size:clamp(34px,4vw,63px); font-weight:500; letter-spacing:-.075em; line-height:1.04; }
.study-meta h3 { margin:24px 0; color:#74736d; font:400 17px/1.3 Georgia,serif; letter-spacing:-.02em; }
.study-dark .study-meta h3 { color:#c5c4be; }
.study-summary { max-width:275px; margin:30px 0; color:#484742; font-size:13px; line-height:1.9; }
.study-dark .study-summary { color:#c0bfba; }
.study-meta ul { max-width:275px; margin:0; padding:17px 0 0; border-top:1px solid currentColor; list-style:none; font:10px/2 'DM Mono','Noto Sans SC',monospace; }
.study-media { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; align-self:start; }
.media { position:relative; display:block; min-height:205px; overflow:hidden; background:#dfded8; border:1px solid rgba(16,16,16,.18); color:var(--black); text-decoration:none; }
.media.feature, .media-wide { grid-column:1 / -1; }
.media.feature { min-height:430px; }
.media-wide { min-height:270px; }
.media.feature-compact { min-height:310px; }
.media img { display:block; width:100%; height:100%; min-height:inherit; object-fit:cover; transition:transform .5s ease, filter .5s ease; }
.media.feature img { object-position:center; }
.airflow-media .feature:first-child img { object-position:50% 42%; }
.media span { position:absolute; left:12px; bottom:10px; padding:7px 8px; background:rgba(245,244,239,.91); font:9px 'DM Mono','Noto Sans SC',monospace; letter-spacing:.25px; opacity:0; transform:translateY(6px); transition:.25s; }
.media:hover img { transform:scale(1.025); filter:contrast(1.03); }
.media:hover span { opacity:1; transform:translateY(0); }

.research-output { display:grid; grid-template-columns:1fr 1.45fr; gap:8vw; padding:130px 7.8vw; background:#dcdad4; }
.output-copy p { max-width:410px; margin:43px 0 0; font-size:14px; line-height:1.9; }
.output-list { border-top:1px solid var(--black); }
.output-list p { display:flex; gap:35px; margin:0; padding:21px 0; border-bottom:1px solid var(--black); font-size:clamp(17px,2vw,30px); line-height:1.25; letter-spacing:-.055em; }
.output-list span { padding-top:5px; font:10px 'DM Mono',monospace; }
.research-contact { position:relative; display:grid; grid-template-columns:1fr 1.45fr; gap:8vw; min-height:560px; padding:110px 7.8vw; overflow:hidden; background:var(--black); color:var(--paper); }
.research-contact:after { content:'KINDO'; position:absolute; right:-.05em; bottom:-.18em; z-index:0; color:#181818; font:600 clamp(130px,21vw,340px)/.75 Manrope,sans-serif; letter-spacing:-.13em; }
.research-contact h2 { align-self:start; z-index:1; font-size:clamp(44px,5.5vw,90px); }
.research-contact > div { align-self:end; z-index:1; }
.research-contact a { display:inline-block; padding-bottom:9px; border-bottom:1px solid; color:inherit; font-size:clamp(18px,2vw,31px); letter-spacing:-.04em; text-decoration:none; }
.research-contact div p { margin:31px 0 0; color:#bbb9b3; font:10px/2 'DM Mono','Noto Sans SC',monospace; }

@media(max-width:700px) {
  .research-topbar { height:63px; padding:0 6vw; grid-template-columns:1fr auto; } .research-topbar > p { display:none; } .detail-actions { gap:10px; } .detail-actions .language-button { min-width:25px; padding:0 3px; } .index-link { font-size:8px; }
  .research-hero { display:block; min-height:700px; padding:40px 8vw 60px; } .hero-copy { margin-top:82px; padding:0; } .hero-copy h1 { font-size:50px; } .hero-copy p { margin-top:25px; font-size:12px; } .hero-stream { height:254px; width:96%; margin:46px 0 0 auto; gap:7px; } .stream-track { gap:7px; animation-duration:25s; } .stream-track.reverse { animation-duration:31s; } .stream-track figure, .stream-track figure:nth-child(2n) { flex-basis:128px; } .hero-scroll { left:8vw; bottom:26px; }
  .study-nav { padding:0 8vw; } .study-nav a { margin-right:27px; padding:17px 0; font-size:9px; }
  .research-intro, .research-output { display:block; padding:86px 8vw; } .research-intro > div { margin-top:60px; } .research-intro h2, .tools-head h2, .output-copy h2 { font-size:40px; } .research-intro div > p { margin-top:34px; font-size:13px; }
  .research-tools { padding:82px 8vw; } .tools-head { display:block; margin:58px 0 70px; } .tools-head > p { margin-top:32px; font-size:13px; } .tool-list article { display:grid; grid-template-columns:16% 1fr; gap:13px 18px; padding:20px 0 25px; } .tool-list span { grid-column:2; } .tool-list div { grid-column:1 / -1; padding-left:calc(16% + 18px); } .tool-list div p { font-size:12px; }
  .study { display:block; padding:87px 8vw; } .study-meta { position:static; } .study-no { margin-bottom:24px; font-size:100px; } .study-meta h2 { font-size:43px; } .study-summary, .study-meta ul { max-width:none; } .study-summary { font-size:13px; } .study-meta ul { margin-bottom:52px; }
  .study-media { gap:9px; } .media { min-height:132px; } .media.feature { min-height:235px; } .media-wide { min-height:170px; } .media.feature-compact { min-height:190px; } .media span { padding:5px 6px; opacity:1; transform:none; font-size:8px; }
  .output-copy p { margin-top:32px; font-size:13px; } .output-list { margin-top:55px; } .output-list p { gap:18px; padding:18px 0; font-size:18px; }
  .research-contact { display:block; min-height:440px; padding:75px 8vw; } .research-contact h2 { margin-top:60px; font-size:45px; } .research-contact > div { margin-top:60px; } .research-contact div p { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { .stream-track { animation:none; } }
