@font-face{font-family:"Shoulders";src:url(fonts/shoulders.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Hanken";src:url(fonts/hanken.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--display:"Shoulders","Arial Narrow",Impact,sans-serif;--ramp:linear-gradient(180deg,#5fb4cf,#8fc7b4,#f2c14e,#f4792c,#e8323f);--text:"Hanken",system-ui,"Segoe UI",Roboto,Arial,sans-serif}
[data-theme="night"]{--bg:#0f1c2e;--raise:#1a2b42;--ink:#eaf2f5;--muted:#a9bcc8;--line:#2f4558;--signal:#ffa94d;--on-signal:#0f1c2e;--sky-top:#0b1626;--sky-low:#1f2c42;--ground:#0a121e;color-scheme:dark}
[data-theme="day"]{--bg:#d5e3ea;--raise:#e8f0f3;--ink:#12303f;--muted:#3c5866;--line:#9db3bf;--signal:#b23c0c;--on-signal:#fff;--sky-top:#a9cde0;--sky-low:#e9e6da;--ground:#c6ced2;color-scheme:light}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 18px/1.6 var(--text);overflow-x:hidden}
#field{position:fixed;left:0;top:0;width:100%;height:100lvh;z-index:-1;display:block}
.noGL #field{display:none}
.noGL .descent{height:auto}
.noGL .stage{position:relative;background:linear-gradient(var(--sky-top),var(--sky-low))}
.noGL .rail,.noGL .controls,.noGL .hint,.noGL .note,.noGL .caption{display:none}
.inner #field{opacity:.3;-webkit-mask-image:linear-gradient(#000 25%,transparent 80%);mask-image:linear-gradient(#000 25%,transparent 80%)}
a{color:inherit;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{color:var(--signal)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
main:focus,h1:focus{outline:none}
.skip{position:absolute;left:-999px;top:8px;background:var(--signal);color:var(--on-signal);padding:8px 14px;z-index:30}
.skip:focus{left:8px}
.wrap{width:min(1240px,100% - 48px);margin-inline:auto}
#progress{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,#5fb4cf,#f2c14e,#f4792c,#e8323f);transform:scaleX(0);transform-origin:left;z-index:20}

/* Top bar */
#top{position:sticky;top:0;z-index:10;background:var(--bg);transition:background .2s}
#top.clear{background:linear-gradient(color-mix(in srgb,var(--bg) 82%,transparent),transparent)}
.bar{display:flex;align-items:center;gap:22px;min-height:68px}
.mark{font:800 24px/1 var(--display);text-decoration:none;margin-right:auto;white-space:nowrap}
.links{display:flex;gap:20px}
.links a{text-decoration:none;font-size:16px;color:var(--muted);padding-block:4px}
.links a:hover{color:var(--ink)}
.links a[aria-current="page"]{color:var(--ink);box-shadow:0 2px 0 var(--signal)}
.tool{font-size:15px;border:1px solid var(--line);padding:5px 11px;white-space:nowrap}
.tool:hover{border-color:var(--signal);color:var(--signal)}
.tool kbd{font:inherit;color:var(--muted);margin-left:6px}
#menuBtn{display:none}

/* Home */
.descent{height:460vh;margin-top:-68px}
.stage{position:sticky;top:0;height:100svh;overflow:hidden}
.heroTop{padding-top:86px}
.name{font:800 clamp(64px,14vw,230px)/.88 var(--display);margin:0 0 14px}
.name .line{display:block;white-space:nowrap;width:max-content}
.tagline{font-size:clamp(20px,2vw,26px);line-height:1.32;margin:0;max-width:30em}
.hint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--ctl,100px) + 12px);margin:0;font-size:15px;text-align:center;width:max-content;max-width:90%;background:var(--bg);padding:5px 12px}
.rail{position:absolute;right:max(24px,calc((100vw - 1240px)/2));top:42%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-end;gap:16px;padding-right:18px;--p:0}
.rail::before,.rail::after{content:"";position:absolute;right:0;top:4px;bottom:4px;width:2px;background:var(--line)}
.rail::after{background:linear-gradient(180deg,#5fb4cf,#f2c14e,#f4792c,#e8323f);transform:scaleY(var(--p));transform-origin:top}
.rail button{font-size:14px;color:var(--ink);opacity:.72;background:color-mix(in srgb,var(--bg) 62%,transparent);padding:2px 8px}
.rail button:hover{opacity:1}
.rail button.on{opacity:1;font-weight:700;background:var(--bg);color:var(--signal)}
.caption{position:absolute;left:max(24px,calc((100vw - 1240px)/2));bottom:calc(var(--ctl,100px) + 12px);width:min(560px,calc(100% - 48px));background:var(--bg);padding:18px 22px;opacity:0;transform:translateY(14px);transition:opacity .35s,transform .35s;pointer-events:none}
.caption.show{opacity:1;transform:none}
.caption h2{font:700 clamp(36px,5vw,60px)/1 var(--display);margin:0 0 8px}
.caption p{margin:0;font-size:18px;line-height:1.4}
.controls{position:absolute;left:0;right:0;bottom:0;padding:12px max(24px,calc((100vw - 1240px)/2)) 30px;background:color-mix(in srgb,var(--bg) 86%,transparent);font-size:15px}
.ctlBody{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
#ctlBtn{display:none}
.note{position:absolute;right:max(24px,calc((100vw - 1240px)/2));bottom:7px;margin:0;font-size:13px;color:var(--muted)}
.knob{display:flex;align-items:center;gap:9px;white-space:nowrap}
.knob input{width:100px;accent-color:var(--signal)}
.knob output{min-width:44px;font-variant-numeric:tabular-nums}
.tool[aria-pressed="true"]{background:var(--signal);color:var(--on-signal);border-color:var(--signal)}
.soon{font-size:clamp(21px,2.3vw,28px);color:var(--muted);margin:0}
.inner .page{min-height:calc(100svh - 150px)}
.block{padding-block:64px;border-top:1px solid var(--line);background:var(--bg)}
.block h2,.page h2{font:700 clamp(30px,4vw,48px)/1.05 var(--display);margin:0 0 26px}
.nowList{list-style:none;margin:0;padding:0;font-size:clamp(20px,2.2vw,26px);line-height:1.35;max-width:36em}
.nowList li{padding:14px 0;border-bottom:1px solid var(--line)}
.nowList li:last-child{border-bottom:0}
.index{display:block}
.index a{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 28px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.index a:first-child{border-top:1px solid var(--line)}
.index{position:relative;padding-left:22px}
.index::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--ramp)}
.index b{font:500 clamp(52px,9vw,128px)/1 var(--display);transition:font-weight .3s}
.index a:hover b,.index a:focus-visible b{font-weight:900;color:var(--signal)}
.index span{color:var(--muted);font-size:17px}

/* Inner pages */
.page{padding-block:52px 90px}
.page>h1,.title{font:800 clamp(56px,11vw,160px)/.95 var(--display);margin:0 0 22px}
.page h2{margin-top:72px}
.intro{font-size:clamp(21px,2.3vw,28px);line-height:1.32;margin:0 0 44px;max-width:30em}
.split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:60px;align-items:start}
.prose p{margin:0 0 18px;max-width:64ch}
.split img{width:100%;display:block}
.btn{display:inline-block;background:var(--signal);color:var(--on-signal);padding:11px 20px;text-decoration:none;font-weight:600}
.btn:hover{color:var(--on-signal);filter:brightness(1.08)}
.plain{list-style:none;margin:0;padding:0}
.plain li{padding:10px 0;border-bottom:1px solid var(--line)}
.side h2{font-size:26px;margin:0 0 12px}

/* Journey */
.journey{position:relative;padding-left:34px;--p:0}
.journey::before,.journey::after{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;background:var(--line)}
.journey::after{background:var(--signal);transform:scaleY(var(--p));transform-origin:top}
.stop{position:relative;padding-bottom:38px}
.stop::before{content:"";position:absolute;left:-34px;top:9px;width:12px;height:12px;background:var(--signal)}
.stop time{color:var(--muted);display:block}
.stop h3,.row h3{font:700 clamp(24px,2.6vw,32px)/1.15 var(--display);margin:2px 0 6px}
.stop p,.row p{margin:0;color:var(--muted);max-width:62ch}

/* Rows */
.row{padding:22px 0;border-bottom:1px solid var(--line)}
.row:first-child{border-top:1px solid var(--line)}
.row a.whole{text-decoration:none;display:block}
.meta{color:var(--muted);font-size:16px}
.acts{display:flex;flex-wrap:wrap;gap:18px;margin-top:10px;font-size:16px}
.acts button{text-decoration:underline;text-decoration-color:var(--signal);text-decoration-thickness:2px;text-underline-offset:4px}
.acts button:hover{color:var(--signal)}
.highlight{background:color-mix(in srgb,var(--signal) 20%,transparent)}

/* Publication grid */
.gridWrap{overflow-x:auto;margin-bottom:28px}
.grid{border-collapse:collapse;min-width:520px;width:100%}
.grid tbody th{width:30%}
.grid th{font-weight:500;font-size:15px;color:var(--muted);text-align:left;padding:6px 10px 6px 0}
.grid td{padding:3px}
.cell{display:block;width:100%;height:42px;border:1px solid var(--line);font-weight:600}
.cell:not(:disabled):hover,.cell[aria-pressed="true"]{background:var(--signal);border-color:var(--signal);color:var(--on-signal)}
.cell:disabled{cursor:default;color:transparent;border-color:color-mix(in srgb,var(--line) 45%,transparent)}
.cell.on{border-color:var(--signal);color:var(--signal)}
.cell[aria-pressed="true"].on,.cell.on:hover{background:var(--signal);color:var(--on-signal)}
.finder{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:12px}
.finder input{flex:1 1 260px;font:inherit;color:var(--ink);background:var(--raise);border:1px solid var(--line);padding:10px 13px;border-radius:0}
.finder input::placeholder{color:var(--muted)}
.count{color:var(--muted);font-size:16px}
.talk{display:grid;grid-template-columns:84px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.talk time{color:var(--muted)}
.talk strong{display:block;font-weight:600}
.talk.skill{grid-template-columns:240px 1fr}
@media(max-width:720px){.talk.skill{grid-template-columns:1fr;gap:2px}}

/* Article */
.article{max-width:40em}
.article p{margin:0 0 20px;font-size:20px;line-height:1.65}
.article h1{font:800 clamp(38px,6vw,76px)/1 var(--display);margin:0 0 14px}

/* Interests */
.pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px}
.pairs .row:nth-child(2){border-top:1px solid var(--line)}

/* Photos */
.photos{columns:3 260px;column-gap:14px}
.photos button{display:block;width:100%;margin-bottom:14px;break-inside:avoid}
.photos img{width:100%;display:block}
#lightbox{border:0;padding:0;background:none;max-width:94vw;color:#fff}
#lightbox::backdrop{background:rgba(6,12,22,.92)}
#lightbox img{max-width:94vw;max-height:84vh;display:block}
#lightbox p{margin:10px 0 0}
#lightbox button{margin-top:10px;border:1px solid #fff;padding:4px 12px}

/* Contact */
.reach{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.reach a,.reach button{font:600 clamp(38px,7vw,86px)/1.1 var(--display);text-decoration:none;transition:font-weight .3s}
.reach a:hover,.reach button:hover{font-weight:900;color:var(--signal)}

/* Command bar */
#palette{width:min(640px,calc(100% - 24px));margin-top:12vh;padding:0;background:var(--raise);color:var(--ink);border:2px solid var(--signal)}
#palette::backdrop{background:rgba(6,12,22,.6)}
#palette input{width:100%;font:inherit;font-size:21px;padding:16px 18px;color:inherit;background:none;border:0;border-bottom:1px solid var(--line);outline:none}
#palette input::placeholder{color:var(--muted)}
#results{list-style:none;margin:0;padding:6px;max-height:50vh;overflow:auto}
#results li{display:flex;justify-content:space-between;gap:16px;padding:9px 12px;cursor:pointer}
#results li span:last-child{color:var(--muted);font-size:15px;white-space:nowrap}
#results li[aria-selected="true"]{background:var(--signal);color:var(--on-signal)}
#results li[aria-selected="true"] span:last-child{color:inherit}
#results .empty{cursor:default;color:var(--muted)}

#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,80px);background:var(--signal);color:var(--on-signal);padding:9px 16px;font-weight:600;transition:transform .25s;z-index:40;visibility:hidden}
#toast.show{transform:translate(-50%,0);visibility:visible}
#foot{background:var(--bg);border-top:1px solid var(--line);padding-block:26px;color:var(--muted);font-size:15px}
#foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px}

/* Page change */
::view-transition-old(root){animation:.18s ease-out both vtOut}
::view-transition-new(root){animation:.3s ease-out both vtIn}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(12px)}}

@media(max-width:980px){
  #menuBtn{display:block}
  .tool kbd{display:none}
  .links{display:none;position:fixed;inset:68px 0 0;flex-direction:column;gap:0;background:var(--bg);padding:12px 24px;overflow:auto;z-index:15}
  .links.open{display:flex}
  .links a{font:700 42px/1.25 var(--display);color:var(--ink)}
  .links a[aria-current="page"]{box-shadow:none;color:var(--signal)}
  .bar{gap:10px}
}
@media(max-width:720px){
  .wrap{width:calc(100% - 32px)}
  .bar{gap:6px}
  .bar .tool{padding:5px 8px}
  .mark{font-size:20px}
  .name{font-size:24vw}
  #ctlBtn{display:block}
  .ctlBody{display:none;margin-top:10px}
  .ctlBody.open{display:flex}
  .knob input{flex:1;width:auto}
  .knob{width:100%}
  .rail{display:none}
  .controls{padding:10px 16px 26px}
  .note{right:16px}
    .split,.pairs{grid-template-columns:1fr;gap:18px}
  .split{gap:36px}
  .pairs .row:nth-child(2){border-top:0}
  .index span{flex-basis:100%}
}
@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  .index b,.reach a,.reach button,#toast{transition:none}
}
@media print{
  #field,#top,#foot,#progress,.finder,.gridWrap,.acts{display:none}
  body{background:#fff;color:#000}
}

/* Research */
.cite{color:var(--signal);font-weight:600;font-size:.86em;padding:0 2px}
.cite:hover{text-decoration:underline}
.topics{border-top:1px solid var(--line);margin-top:8px}
.topics details{border-bottom:1px solid var(--line)}
.topics summary{cursor:pointer;font:600 clamp(26px,3vw,38px)/1.15 var(--display);padding:16px 0;list-style-position:outside}
.topics summary:hover{color:var(--signal)}
.topics .prose{padding-bottom:12px}
.topics .prose p{color:var(--ink)}
.lz{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:40px;align-items:start;margin-top:18px}
.lzGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:6px}
.lzBtn{border:1px solid var(--line);padding:6px 4px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;background:color-mix(in srgb,var(--bg) 70%,transparent)}
.lzBtn svg{width:100%;height:auto;display:block}
.lzBtn span{font-size:14px;font-weight:600}
.lzBtn:hover{border-color:var(--signal)}
.lzBtn[aria-pressed="true"]{border-color:var(--signal);box-shadow:inset 0 0 0 1px var(--signal);color:var(--signal)}
.lzStage svg{width:100%;max-width:520px;height:auto;display:block}
.lzInfo h3{font:700 clamp(26px,3vw,36px)/1.1 var(--display);margin:6px 0}
.lzInfo p{margin:0 0 14px;color:var(--muted);max-width:50ch}
button.btn{cursor:pointer}
.lz-paved{fill:#7c8791}.lz-green{fill:#6f9a5f}.lz-soil{fill:#bfa377}.lz-water{fill:#3f88b5}
.lz-b.t{fill:#d9dfe4}.lz-b.l{fill:#a4afb9}.lz-b.d{fill:#6d7985}
.lz-tree.t{fill:#4f9a4d}.lz-tree.l{fill:#3b7b3c}.lz-tree.d{fill:#2b5c2d}
.refs{margin:0;padding-left:24px;max-width:78ch}
.refs li{padding:8px 6px;font-size:16px;line-height:1.5}
.refs a{white-space:normal;word-break:break-word}
.refs li{transition:background .6s}
/* Contact */
.mail{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;padding:18px 0;border-bottom:1px solid var(--line)}
.mail:first-of-type{border-top:1px solid var(--line)}
.mail .meta{flex-basis:100%}
.addr{font:600 clamp(26px,4.4vw,56px)/1.1 var(--display);text-decoration:none;word-break:break-word}
/* 3D controls */
.knob select{font:inherit;color:var(--ink);background:var(--raise);border:1px solid var(--line);padding:4px 6px;max-width:190px}
.profile{position:absolute;right:max(24px,calc((100vw - 1240px)/2));bottom:calc(var(--ctl,100px) + 12px);width:300px;margin:0;background:var(--bg);padding:12px 14px;display:none}
.profile.show{display:block}
.profile svg{width:100%;height:auto;display:block}
.profile figcaption{font-size:12px;line-height:1.35;color:var(--muted);margin-top:6px}
.pa{stroke:var(--muted);stroke-width:1}.ph{stroke:var(--signal);stroke-width:1;stroke-dasharray:3 4}
.pc{fill:none;stroke:var(--signal);stroke-width:2.4}
.pt{fill:var(--ink);font:11px var(--text)}
.intro a,.tagline a{text-decoration-thickness:2px}
@media(max-height:760px){.profile{width:250px}.profile figcaption{display:none}.rail{top:42%}}
@media(max-width:900px){.lz{grid-template-columns:1fr}}
@media(max-width:720px){.profile{left:16px;right:16px;width:auto;max-height:60vh;overflow:auto}.knob select{flex:1;max-width:none}}
@media print{.lz,.topics summary::marker{display:none}}

/* Research infographics */
.topic{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:36px;align-items:start;padding-bottom:22px}
.topic h3{font:600 22px/1.2 var(--display);margin:18px 0 8px}
.ways{margin:0;padding-left:20px}
.ways li{padding:3px 0}
.ig{max-width:100%;overflow-x:auto;background:color-mix(in srgb,var(--bg) 78%,transparent);border:1px solid var(--line);padding:10px}
.fig{display:block;width:100%;min-width:560px;height:auto}
.fig text{font-family:var(--text)}
.ft{fill:var(--ink);font-size:15px}.fs{fill:var(--ink);font-size:16px;font-weight:600}.fsm{fill:var(--ink);font-size:14.5px;font-weight:500}.fm{fill:var(--muted);font-size:13.5px}
.fl{stroke:var(--muted);stroke-width:1.5;fill:none}.fx{stroke:var(--line);stroke-width:1;stroke-dasharray:4 5}.ft2{stroke:var(--ink);stroke-width:3}
.fa{stroke:var(--signal);stroke-width:2;fill:none}.fbeam{stroke:var(--signal);stroke-width:2;fill:none}.hot{stroke:#e8323f}
.fh{fill:var(--signal)}.fd{fill:var(--signal)}.fdk{fill:var(--ink)}.fb{fill:var(--raise);stroke:var(--line)}.fbh{fill:var(--raise);stroke:var(--signal);stroke-width:2}
.fc{fill:#6d7f8e}.fg{fill:color-mix(in srgb,var(--muted) 34%,transparent)}.fsun{fill:#f2c14e}.fcloud{fill:color-mix(in srgb,var(--muted) 55%,transparent)}
.fsky{fill:color-mix(in srgb,var(--signal) 26%,transparent);stroke:var(--signal)}
.fswath{fill:color-mix(in srgb,var(--signal) 14%,transparent);stroke:none}
.fcurve{fill:none;stroke:#f4792c;stroke-width:3.5}
.bandA{fill:rgba(95,180,207,.08)}.bandB{fill:rgba(143,199,180,.09)}.bandC{fill:rgba(242,193,78,.1)}.bandD{fill:rgba(244,121,44,.12)}.bandE{fill:rgba(232,50,63,.14)}
.fn1{fill:rgba(95,180,207,.1);stroke:var(--line)}.fn2{fill:rgba(242,193,78,.13);stroke:var(--muted)}.fn3{fill:rgba(244,121,44,.2);stroke:var(--signal)}
.z1{fill:#d62f3a}.z2{fill:#f4792c}.z3{fill:#f2c14e}.z4{fill:#3d8b4f}.z5{fill:#7fb56b}
.flow{stroke-dasharray:7 8;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-30}}
.rise{animation:rise 6s ease-in-out infinite alternate}
@keyframes rise{from{transform:translateY(90px)}to{transform:translateY(-60px)}}
.drive{animation:drive 9s linear infinite alternate}
@keyframes drive{to{transform:translateX(606px)}}
/* Lab */
.labGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.tool2{background:color-mix(in srgb,var(--bg) 78%,transparent);border:1px solid var(--line);padding:20px 22px}
.tool2 h2{margin:0 0 4px;font-size:clamp(28px,3vw,38px)}
.tool2 svg{display:block;width:100%;max-height:300px;margin-top:10px}
.formula{margin:0 0 14px;color:var(--signal);font-size:17px}
.knob.wide{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.3fr) 74px;gap:12px;padding:5px 0;white-space:normal;font-size:15px}
.knob.wide input{width:100%}
.knob.wide output{text-align:right;font-variant-numeric:tabular-nums}
.readout{margin:12px 0 0;color:var(--muted);font-size:16px;line-height:1.45}
.bars{margin-top:12px}.meter{padding:6px 0;font-size:15px}
.barTrack{display:block;height:13px;background:color-mix(in srgb,var(--muted) 22%,transparent);margin-top:5px}
.barFill{display:block;height:100%}.b1{background:#f4792c}.b2{background:#5fb4cf}.b3{background:#f2c14e}
@media(max-width:1000px){.topic,.labGrid{grid-template-columns:1fr}}
@media(max-width:720px){.tool2{padding:16px}.knob.wide{grid-template-columns:1fr 62px}.knob.wide span{grid-column:1/-1}.knob.wide input{grid-column:1}}
@media(prefers-reduced-motion:reduce){.flow,.rise,.drive{animation:none}.rise{transform:none}}
@media print{.ig{break-inside:avoid}}