:root {
  --ink:#191919; --paper:#fff; --header:42px; --strip-height:58svh;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:12px; color:var(--ink); background:var(--paper); font-synthesis:none;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scrollbar-gutter:stable; scroll-padding-top:72px; }
html.modal-open { overflow:hidden; }
body { margin:0; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
a,button { -webkit-tap-highlight-color:transparent; }
img,video { display:block; max-width:100%; -webkit-user-drag:none; user-select:none; }
figure,h1,h2,p { margin:0; }
h1,h2 { font-size:inherit; font-weight:400; }
[hidden] { display:none!important; }
a:focus-visible,button:focus-visible,[tabindex]:focus-visible { outline:0; }
a:focus-visible,button:focus-visible,[tabindex="0"]:focus-visible { opacity:.55; }
::selection { background:#e7e9ee; }
.micro { font:400 8px/1.4 Arial,sans-serif; letter-spacing:.018em; text-transform:uppercase; }
.skip-link { position:fixed; top:-80px; left:12px; padding:8px; z-index:200; background:#fff; }
.skip-link:focus { top:8px; }
.site-header { position:fixed; top:0; left:0; right:0; height:var(--header); padding:13px 16px 0; z-index:30; background:white; }
.wordmark { font-size:11px; font-weight:400; line-height:1.1; text-transform:uppercase; }
.wordmark:hover { color:#969696; }
#main { min-height:60svh; padding-top:var(--header); outline:0; }
.project-section { padding:72px 0 112px; scroll-margin-top:50px; }
.project-tag { margin:0 0 25px; display:flex; align-items:baseline; justify-content:center; gap:12px; font:400 8px/1.4 Arial,sans-serif; }
.project-code { text-transform:none; }
.project-strip {
  --gallery-height:clamp(285px,var(--strip-height),680px);
  height:var(--gallery-height); padding:0 6vw; display:flex; gap:8px;
  overflow-x:auto; overflow-y:hidden; scrollbar-width:none; overscroll-behavior-x:contain;
  touch-action:pan-x pan-y; user-select:none;
}
.project-strip::-webkit-scrollbar { display:none; }
.media-tile {
  flex:0 0 auto; position:relative; display:block;
  height:100%; width:min(calc(var(--gallery-height) * var(--ratio)),88vw);
  overflow:hidden; cursor:pointer; background:#fff;
}
.tile-image,.tile-poster,.tile-video { width:100%; height:100%; object-fit:contain; }
.tile-image,.tile-poster { opacity:0; transition:opacity .65s ease; }
.tile-image.is-loaded,.tile-poster.is-loaded { opacity:1; }
.tile-video { position:absolute; inset:0; opacity:0; transition:opacity .45s ease; }
.tile-video.is-playing { opacity:1; }
.tile-caption {
  position:absolute; z-index:2; left:12px; right:12px; bottom:12px;
  color:#fff; mix-blend-mode:difference; opacity:0; pointer-events:none;
  font:400 7px/1.45 Arial,sans-serif; letter-spacing:.025em; text-transform:uppercase;
  transition:opacity .2s ease;
}
.tile-caption .role { display:block; font-size:6px; margin-top:3px; }
.media-tile:hover .tile-caption,.media-tile:focus-visible .tile-caption { opacity:1; }
.project-strip.is-dragging,.project-strip.is-dragging * { cursor:grabbing; }
.reserved-project { padding-bottom:80px; }
.reserved-frame { height:clamp(285px,var(--strip-height),680px); display:grid; place-items:center; margin:0 6vw; color:#c9c9c9; }
.reserved-frame span { font-size:7px; }
.site-footer {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:end;
  min-height:47svh; padding:180px 16px 23px; gap:20px; font-size:10px;
}
.footer-name { grid-column:2; align-self:end; text-align:center; }
.footer-instagram { grid-column:3; align-self:end; justify-self:end; }
dialog { border:0; box-shadow:none; color:var(--ink); }
dialog::backdrop { background:rgba(238,238,238,.92); }
.archive-dialog { --archive-gap:15px; width:430px; max-width:calc(100vw - 56px); max-height:calc(100svh - 110px); margin:auto; padding:24px; overflow:visible; background:white; }
.archive-dialog[open] { animation:panel-in .3s ease; }
.archive-intro { display:grid; justify-items:start; gap:7px; font-size:12px; line-height:1.4; margin-bottom:63px; }
.archive-intro h2 { font-size:12px; font-weight:400; }
.archive-intro>a { display:inline-block; font-size:11px; }
.archive-list { display:grid; gap:var(--archive-gap); }
.archive-row { display:grid; grid-template-columns:35px 1fr auto; align-items:baseline; gap:12px; font:400 8px/1.4 Arial,sans-serif; letter-spacing:.012em; text-transform:uppercase; }
.archive-role { display:block; font-size:6px; color:#999; margin-top:2px; }
.archive-code { font-size:7px; color:#999; text-transform:none; }
.archive-row:hover .archive-title { text-decoration:underline; text-underline-offset:3px; }
.archive-close { position:fixed; top:13px; right:16px; font-size:8px; }
.viewer { position:fixed; inset:0; margin:0; padding:0; width:100vw; max-width:none; height:100svh; max-height:none; overflow:hidden; overscroll-behavior:contain; background:white; }
.viewer::backdrop { background:white; }
.viewer[open] { animation:panel-in .18s ease; }
.viewer-back { position:absolute; z-index:4; left:8px; top:11px; font-size:12px; line-height:1.2; }
.viewer-stage { position:absolute; inset:8px; display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:pointer; touch-action:none; }
.viewer-media { width:auto; height:auto; max-width:100%; max-height:calc(100svh - 16px); object-fit:contain; opacity:0; transition:opacity .22s ease; }
.viewer-media.is-loaded { opacity:1; }
.viewer-stage video { width:100%; height:100%; background:#fff; }
.viewer-neighbor { position:absolute; bottom:16px; width:95px; height:126px; display:flex; align-items:flex-end; z-index:3; }
.viewer-previous { left:16px; }
.viewer-next { right:16px; }
.viewer-neighbor img { width:100%; height:100%; object-fit:contain; object-position:center bottom; transition:opacity .2s; }
.viewer-neighbor:hover img { opacity:.5; }
.viewer-caption { position:absolute; bottom:9px; left:50%; transform:translateX(-50%); max-width:55vw; padding:3px 6px; background:rgba(255,255,255,.87); font-size:6px; text-align:center; color:#777; opacity:0; transition:opacity .2s; pointer-events:none; }
.viewer:has(.viewer-stage:hover) .viewer-caption,.viewer:focus-within .viewer-caption { opacity:1; }
.viewer-caption:empty { display:none; }
.status-message { position:fixed; z-index:100; left:50%; bottom:22px; transform:translateX(-50%); background:white; padding:10px 16px; opacity:0; pointer-events:none; transition:opacity .2s; }
.status-message.is-visible { opacity:1; }
.noscript { padding:100px 20px; }
.error-page,#main.error-page { min-height:100svh; padding:100px 24px; display:grid; place-items:center; text-align:center; }
.error-marker { margin-bottom:25px; color:#777; }
.error-card h1 { font-size:clamp(30px,3.6vw,52px); line-height:1.05; letter-spacing:-.045em; }
.error-return { display:inline-flex; align-items:center; justify-content:center; min-height:40px; margin-top:34px; padding:13px 20px; border:0; transition:opacity .2s; }
.error-return:hover { opacity:.55; }
.is-error .site-footer { position:absolute; inset:auto 0 0; min-height:0; padding:20px 16px 23px; }
@keyframes panel-in { from {opacity:0} to {opacity:1} }
@media(min-width:1900px) {
  :root { --strip-height:61svh; }
  .project-strip { --gallery-height:clamp(350px,var(--strip-height),900px); gap:10px; }
  .project-section { padding-top:90px; padding-bottom:140px; }
}
@media(max-width:700px) {
  :root { --header:44px; --strip-height:57svh; }
  .site-header { padding:14px 12px 0; }
  .wordmark { font-size:10px; }
  .project-section { padding-top:62px; padding-bottom:85px; }
  .project-tag { font-size:7px; gap:9px; margin-bottom:20px; }
  .project-strip { --gallery-height:clamp(260px,var(--strip-height),590px); padding:0 16px; gap:7px; }
  .media-tile { width:min(calc(var(--gallery-height) * var(--ratio)),calc(100vw - 32px)); }
  .tile-caption { font-size:6px; left:9px; right:9px; bottom:9px; }
  .reserved-frame { margin:0 16px; }
  .site-footer { min-height:42svh; padding:160px 12px 22px; font-size:9px; gap:8px; }
  .is-error .site-footer { padding:20px 12px 22px; }
  .archive-dialog { max-width:calc(100vw - 48px); }
  .archive-intro { margin-bottom:48px; font-size:11px; }
  .archive-intro h2 { font-size:11px; }
  .archive-row { grid-template-columns:27px 1fr auto; gap:9px; }
  .archive-close { top:14px; right:12px; }
  .viewer-back { top:12px; left:10px; font-size:11px; }
  .viewer-stage { inset:44px 8px 89px; }
  .viewer-media { max-height:calc(100svh - 133px); }
  .viewer-neighbor { width:48px; height:64px; bottom:12px; }
  .viewer-previous { left:10px; }
  .viewer-next { right:10px; }
  .viewer-caption { bottom:32px; max-width:62vw; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}