@font-face{
  font-family:'Archivo';
  src:url('fonts/archivo-var.ttf') format('truetype');
  font-weight:100 900;
  font-display:swap;
}
:root{
  --bg:#0a0a0b;
  --fg:#f2f1ed;
  --muted:#a8a59e;
  --dim:#6e6b65;
  --rule:rgba(242,241,237,.13);
  --pad:clamp(20px,3.5vw,64px);
  --header-height:4.5rem;
  --font:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --text-caption:.75rem;
  --text-body:1rem;
  --text-title:1.6875rem;
  --text-display:4.5rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;scroll-padding-block-start:var(--header-height)}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:var(--font);min-height:100%}
body{font-size:var(--text-body);line-height:1.55}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%;height:auto}
.site-header{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;justify-content:space-between;align-items:baseline;padding:22px var(--pad);pointer-events:none;background:linear-gradient(to bottom,rgba(10,10,11,.94),rgba(10,10,11,.55) 55%,rgba(10,10,11,0))}
.site-header a{pointer-events:auto;transition:opacity .25s ease}
.site-header a:hover{opacity:.5;text-decoration:none}
.brand,.nav-toggle{font-size:var(--text-caption);line-height:1.2;letter-spacing:.22em;text-transform:uppercase;font-weight:500}
.menu-main{min-height:100vh;min-height:100dvh;display:flex;align-items:center;padding:calc(var(--pad) + 84px) var(--pad) var(--pad)}
.menu-wrap{width:100%;max-width:1120px;margin:0 auto}
.menu-kicker{font-size:var(--text-caption);line-height:1.2;letter-spacing:.32em;text-transform:uppercase;color:var(--dim);margin-bottom:clamp(26px,4vw,52px)}
.menu-list{display:grid}
.menu-list a{display:flex;align-items:baseline;justify-content:space-between;gap:1.5rem;padding:clamp(14px,2vw,26px) 0;border-top:1px solid var(--rule);font-size:clamp(2rem,6.4vw,var(--text-display));line-height:1.1;letter-spacing:-.05em;text-wrap:balance;transition:opacity .3s ease,padding-inline-start .35s ease}
.menu-list a:last-child{border-bottom:1px solid var(--rule)}
.menu-list a:hover{opacity:.5;padding-inline-start:.4em;text-decoration:none}
.menu-list .idx{font-size:var(--text-caption);line-height:1.2;letter-spacing:.26em;color:var(--dim)}
.portfolio-main{min-height:100vh;min-height:100dvh;padding:0;margin:0}
.image-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px;background:var(--bg)}
.image-gallery .image-link{display:flex;flex-direction:column;background:var(--bg);text-decoration:none}
.image-gallery .tile-media{display:block;overflow:hidden;aspect-ratio:16/9;background:#101012}
.image-gallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .5s ease}
.image-gallery .image-link:hover img{transform:scale(1.04)}
.tile-caption{display:block;padding:12px 2px 0;font-size:clamp(.8125rem,1vw,.9375rem);line-height:1.3;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:color .25s ease}
.image-gallery .image-link:hover .tile-caption{color:var(--fg)}
.tile-caption:empty{display:none}
.project-main{min-height:100vh;min-height:100dvh;display:flex;justify-content:center;padding:calc(var(--pad) + 98px) var(--pad) var(--pad)}
.project-content{width:min(100%,1080px);margin:0 auto;text-align:center}
.project-back{width:min(100%,640px);margin:0 auto clamp(22px,3.5vw,42px);text-align:start}
.project-back--bottom{margin:clamp(38px,6vw,72px) auto 0}
.project-back a{font-size:var(--text-caption);line-height:1.2;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--rule);padding-bottom:3px;transition:color .25s ease,border-color .25s ease}
.project-back a:hover{color:var(--fg);border-bottom-color:var(--fg);text-decoration:none}
.project-head h1{margin:0;font-size:clamp(1.75rem,4.2vw,3.5rem);line-height:1.08;letter-spacing:-.035em;font-weight:400;text-wrap:balance}
.project-head h2{margin:clamp(12px,1.6vw,18px) 0 0;font-size:clamp(.875rem,1.3vw,1.125rem);line-height:1.3;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:400;text-wrap:balance}
.project-player{margin:clamp(38px,6vw,80px) 0 0}
.project-player iframe{width:100%!important;height:auto!important;aspect-ratio:16/9;border:0;display:block;background:#000;box-shadow:0 40px 100px rgba(0,0,0,.55)}
.project-credits{margin:clamp(36px,5vw,64px) auto 0;display:grid;gap:clamp(16px,2.2vw,26px);width:min(100%,640px);text-align:start}
.credit{display:grid;gap:5px;padding-top:15px;border-top:1px solid var(--rule)}
.credit-label{font-size:var(--text-caption);line-height:1.2;letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.credit-value{font-size:clamp(.875rem,1.3vw,1.125rem);letter-spacing:-.015em;line-height:1.45;overflow-wrap:break-word}
.project-next{margin:clamp(40px,6vw,72px) auto 0;width:min(100%,640px);border-top:1px solid var(--rule);padding-top:clamp(18px,2.4vw,26px)}
.project-next a{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;text-decoration:none}
.project-next-label{font-size:var(--text-caption);letter-spacing:.26em;text-transform:uppercase;color:var(--dim)}
.project-next-title{font-size:clamp(1.0625rem,1.6vw,1.375rem);letter-spacing:-.02em;color:var(--fg);transition:opacity .25s ease}
.project-next a:hover .project-next-title{opacity:.65}
.info-main{padding:calc(var(--pad) + 108px) var(--pad) var(--pad)}
.info-content{width:min(100%,1120px);margin:0 auto}
.info-content .rule{border:0;border-top:1px solid var(--rule);margin:clamp(26px,3.5vw,44px) 0}
.info-content [grid-row]{display:grid;grid-template-columns:minmax(160px,.62fr) minmax(0,1.6fr);gap:clamp(18px,3vw,56px);align-items:start}
.info-content [grid-col]{min-width:0}
.info-content [grid-col] h1,.info-content [grid-col] h2{margin:0}
.info-content [grid-col]:nth-child(1) h1{font-size:clamp(var(--text-caption),1vw,.8125rem);letter-spacing:.26em;text-transform:uppercase;color:var(--dim);line-height:1.6}
.info-content [grid-col]:nth-child(2) h2{margin-block-start:clamp(34px,4.6vw,58px);margin-block-end:12px;font-size:var(--text-caption);line-height:1.2;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.info-content [grid-col]:nth-child(2) h2:first-child{margin-block-start:0}
.info-content [grid-col]:nth-child(2) h1{margin-block-start:10px;font-size:clamp(1.0625rem,1.5vw,1.3125rem);letter-spacing:-.02em;line-height:1.35;text-wrap:balance}
.info-content [grid-col]:nth-child(2) h2 + h1{margin-block-start:0}
.info-content a{border-bottom:1px solid var(--rule);padding-bottom:2px;overflow-wrap:anywhere;transition:border-color .25s ease,opacity .25s ease}
.info-content a:hover{border-bottom-color:var(--fg);opacity:.85;text-decoration:none}
.redirect-main{min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--pad)}
.reel-page{margin:0;background:#000;overflow:hidden}
.reel{position:fixed;inset:0;display:block;text-decoration:none;color:#fff;background:#000 url('cargo/reel-poster.jpg') center/cover no-repeat}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,0) 45%)}
.reel-enter{position:absolute;right:var(--pad);bottom:var(--pad);z-index:2;font-size:var(--text-caption);letter-spacing:.28em;text-transform:uppercase;color:var(--muted);transition:color .25s ease}
.reel:hover .reel-enter{color:var(--fg)}
@media (prefers-reduced-motion:reduce){.reel-video{display:none}}
@media (max-width:760px){
  .site-header{padding:16px}
  .image-gallery{grid-template-columns:repeat(1,minmax(0,1fr))}
  .tile-caption{font-size:var(--text-caption);letter-spacing:.14em;padding:10px 2px 0}
  .project-main,.info-main,.menu-main{padding-inline:16px}
  .info-content [grid-row]{grid-template-columns:minmax(0,1fr);gap:8px}
  .info-content [grid-col]:nth-child(2) h1{font-size:1.125rem}
  .menu-list a{font-size:clamp(1.875rem,11vw,3.25rem)}
}