:root{--page-gutter:clamp(20px,4vw,64px);--content-width:1120px;--type-body:18px;--type-meta:13px;--type-hero:clamp(40px,min(6.5cqw,10cqh),96px);--type-section:clamp(32px,4vw,56px);--type-menu:clamp(18px,1.5vw,24px);--paper:#f8f6ef;--ink:#292924}
* {box-sizing:border-box}
body {margin:0;color:var(--ink);background:var(--paper);font:var(--type-body)/1.5 Georgia,serif}
a {color:inherit;text-underline-offset:.25em}
header {position:fixed;z-index:3;top:0;left:0;padding:18px var(--page-gutter);color:#fff8ec}
header h1 {margin:0;font:500 16px system-ui}
header a {display:block;padding:6px 12px;border-radius:3px;text-decoration:none;background:#1b2327dc}
header.on-paper a {color:#272822;background:#f8f6efed}
.skip {position:fixed;top:-5em;left:1em;z-index:6;background:white;padding:.5em}
.skip:focus {top:.5em}
#top {position:relative;height:auto;isolation:isolate;color:#fff8eb;background:#131715}
.motion #top {height:280vh;height:280svh;height:280dvh}
.stage {--inset:4%;--show:1;position:sticky;top:0;height:100vh;height:100svh;height:100dvh;overflow:hidden;isolation:isolate;--art-height:max(60cqw,100cqh);--horizon-y:calc(50cqh + .03 * var(--art-height))}
.motion #top.opened {height:auto}
.opened .stage {position:relative}
.cover-title {position:absolute;inset:0;width:100%;height:100%;overflow:visible;text-align:center;pointer-events:none;color:#f9f6ee;fill:currentColor;font:400 var(--type-hero)/.94 Georgia,serif;letter-spacing:-.05em}
nav {position:absolute;top:min(calc(var(--horizon-y) + clamp(54px,17cqh,170px)),calc(100% - 160px));left:50%;transform:translateX(-50%);width:min(340px,calc(100% - 48px));opacity:var(--show)}
nav a {display:flex;align-items:center;gap:13px;text-decoration:none;min-height:44px;font-size:var(--type-menu)}
nav i {flex:1;border-bottom:1px dotted #ffefd280}
nav a:hover {text-decoration:underline}
nav:focus-within {opacity:1}
.scroll {position:absolute;bottom:4%;left:50%;transform:translateX(-50%);font:var(--type-meta) system-ui;text-decoration:none;padding:7px 12px;border-radius:3px;background:#141a20d9;color:#fff8ec}
#research {max-width:var(--content-width);margin:auto;padding:clamp(64px,9vw,128px) var(--page-gutter)}
.index-label,article small,footer {font:var(--type-meta) system-ui}
.index-label {margin:0 0 26px}
article {border-top:1px solid #c9c5b9;display:grid;grid-template-columns:1fr 1.5fr;gap:7%;align-items:center;padding:46px 0;scroll-margin-top:58px}
article img {width:100%;display:block}
h2 {font:400 var(--type-section)/1.03 Georgia,serif;letter-spacing:-.04em;margin:.4em 0}
article p {max-width:46ch}
footer {border-top:1px solid #c9c5b9;display:flex;justify-content:space-between;flex-wrap:wrap;gap:18px 28px;padding:32px var(--page-gutter)}
@media(max-width:620px){article{grid-template-columns:1fr;gap:24px}article img{max-height:220px;object-fit:cover}header{padding:12px var(--page-gutter)}}
@media(max-height:560px) and (min-width:621px){
 header{padding:10px var(--page-gutter)}
 .cover-title{font-size:clamp(28px,9cqh,48px)}
 .stage nav{top:auto;bottom:78px;display:flex;gap:32px;width:min(580px,calc(100% - 64px))}
 .stage nav a{flex:1;min-width:0;min-height:36px;font-size:clamp(18px,4cqh,22px)}
 .scroll{bottom:16px}
}
@media(prefers-reduced-motion:reduce){.motion #top{height:auto}.stage{position:relative}}

@media(max-height:340px) and (min-width:621px){header{padding-block:6px}}

/* Fine, stationary grain unifies the photographic fields and printed lettering. */
.stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.055;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E")}