:root{--ink:#111;--paper:#eee9df;--muted:#747474;--content-inset:clamp(22px,2.8vw,42px);--pad-x:var(--content-inset);--frame:clamp(9px,1.4vw,21px);--carousel-edge:calc(var(--frame) + var(--pad-x));--head-h:184px;--bottom-gap:24px;--control-h:19px;--caption-h:34px;--image-left:0px}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;min-height:0;color:var(--ink)}
html{background:#fff}
body{height:100vh;height:100dvh;min-height:0;overflow:hidden;background:#fff;font-family:"Helvetica Neue","Neue Haas Grotesk Text Pro","Nimbus Sans L",Helvetica,Arial,sans-serif;font-size:13px;letter-spacing:.065em;text-transform:uppercase;-webkit-tap-highlight-color:transparent}
body:before{content:"";position:fixed;inset:var(--frame);background:var(--paper);z-index:0}
a{color:inherit;text-decoration:none;outline:none}
.masthead{position:fixed;left:var(--frame);right:var(--frame);top:var(--frame);height:var(--head-h);padding:var(--content-inset) var(--pad-x) 14px;display:flex;align-items:flex-start;justify-content:space-between;z-index:3}
.brand{display:grid;gap:36px}
.identity{display:grid;font-size:clamp(21px,1.8vw,28px);font-weight:400;line-height:.92;letter-spacing:-.025em}
.filters{display:grid;gap:5px}
.filter-row{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--muted)}
.filter{font-weight:500;white-space:nowrap}.filter.active{color:var(--ink);font-weight:700}.filter.future{cursor:default}
.site-meta{display:grid;grid-template-rows:auto 1fr;justify-items:end;height:clamp(39px,3.31vw,52px);text-align:right;font-size:10px;line-height:1}
.info-link{font-size:10px;font-weight:700}.info-link:hover{opacity:.45}
.instagram{display:grid;place-items:center;align-self:end;width:18px;height:18px;margin-top:0}
.instagram svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.25}.instagram .dot{fill:currentColor;stroke:none}.instagram:hover{opacity:.45}
.stage{position:fixed;left:var(--carousel-edge);right:var(--carousel-edge);top:calc(var(--frame) + var(--head-h));bottom:calc(var(--frame) + var(--bottom-gap));display:grid;grid-template-rows:var(--control-h) minmax(0,1fr) var(--caption-h);min-width:0;min-height:0;overflow:hidden;z-index:2}
.controls{padding-left:var(--image-left);display:flex;align-items:flex-start;gap:5px;transition:padding-left .2s ease}
button{appearance:none;border:0;background:none;color:inherit;margin:0;padding:0;cursor:pointer;display:grid;place-items:center;line-height:1}
button:hover{opacity:.45}button:focus,a:focus{outline:none}
.controls svg{width:8.25px;height:9.75px;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:square;stroke-linejoin:miter}
.controls .play-icon{display:none;fill:currentColor;stroke:none}.paused .pause-icon{display:none}.paused .play-icon{display:block}
.slides{position:relative;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
.slide{position:absolute;inset:0;margin:0;display:grid;place-items:center;opacity:0;transition:opacity .8125s ease;pointer-events:none;overflow:hidden}
.slide.active{opacity:1;pointer-events:auto}
.slide img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;object-position:center}
.caption-track{position:relative;min-width:0;padding-top:9px}
.caption{position:absolute;inset:9px 0 auto var(--image-left);margin:0;font-size:10px;font-weight:300;line-height:1.25;letter-spacing:.04em;text-transform:none;opacity:0;transition:opacity .8125s ease,left .2s ease}
.caption.active{opacity:1}.caption strong{font-weight:600}
@media (max-width:640px){
  :root{--content-inset:20px;--pad-x:var(--content-inset);--frame:9px;--head-h:112px;--bottom-gap:14px;--control-h:0px;--caption-h:38px}
  .masthead{height:var(--head-h);padding:20px var(--pad-x) 0}
  .brand{gap:27px}.identity{font-size:17px}
  .filters{gap:4px}.filter-row{gap:5px;flex-wrap:nowrap;row-gap:0;font-size:8px;letter-spacing:.065em}
  .site-meta{height:32px;font-size:9px}.info-link{font-size:8px}.instagram{width:17px;height:17px;margin-top:0}.instagram svg{width:17px;height:17px}
  .controls{display:none!important}
  /* Mobile carousel: deliberately independent from the desktop grid sizing. */
  .stage{position:fixed;left:var(--carousel-edge);right:var(--carousel-edge);top:calc(var(--frame) + var(--head-h));bottom:calc(var(--frame) + var(--bottom-gap) + var(--caption-h));display:block!important;min-width:0;min-height:0;overflow:visible;visibility:visible!important}
  .slides,.research-slides{position:absolute;inset:0;display:block;width:auto;height:auto;min-height:0;overflow:hidden;visibility:visible!important}
  .slide,.research-slide{display:grid!important;place-items:center;visibility:visible!important}
  .slide.active,.research-slide.active{opacity:1!important}
  .caption-track{position:absolute;top:100%;right:0;bottom:auto;left:0;height:var(--caption-h);padding:0}
  .caption{top:8px;right:0;left:var(--image-left);font-size:8.5px;line-height:1.35}
}
@media (max-width:420px){.filter-row{font-size:7.5px;gap:4px}}
@media (hover:hover) and (pointer:fine){.slides,.research-slides{cursor:pointer}}
@media (max-height:680px) and (min-width:641px){
  :root{--head-h:138px;--bottom-gap:14px;--caption-h:29px;--control-h:18px}
  .brand{gap:25px}.filters{gap:4px}.caption-track{padding-top:7px}.caption{top:7px}
}
@media (max-height:560px) and (min-width:641px){
  :root{--content-inset:14px;--head-h:116px;--bottom-gap:10px;--caption-h:25px;--control-h:16px}
  .brand{gap:20px}.identity{font-size:18px}.filters{gap:3px}
  .instagram{margin-top:10px}.caption-track{padding-top:5px}.caption{top:5px}
}
@media (prefers-reduced-motion:reduce){.slide,.caption{transition:none}}
@media (max-width:640px){body:not(.research-page) .stage{left:var(--pad-x);right:var(--pad-x)}}