.work-page{background:#080808;color:#f1eddf;scroll-behavior:auto}
.work-page body{background:#080808;color:#f1eddf}
.work-header{position:fixed;top:0;left:0;right:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 3vw 24px;background:linear-gradient(#080808 35%,#080808e8 75%,#08080800);isolation:isolate}
.work-header .brand{min-height:44px}
.work-header nav{display:flex;align-items:center;gap:24px;font-size:18px;font-weight:650;letter-spacing:.025em;text-transform:uppercase}
.work-header nav a,.work-header nav button{min-height:44px;display:flex;align-items:center;position:relative;gap:8px;white-space:nowrap}
.work-header nav a:after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.work-header nav a:hover:after,.work-header nav a[aria-current]:after{background:currentColor;transform:scaleX(1)}
.work-header #motion-toggle{position:static;font-size:14px;margin-right:16px}
#work-motion-glyph{display:inline-flex}
#work-motion-glyph .ui-icon{width:16px;height:16px}
#work-main{padding:0 3vw}
.work-intro{position:relative;padding-top:25vh;padding-bottom:8vw}
#work-heading{font-family:Melodrama,serif;font-weight:500;font-size:clamp(84px,11vw,190px);line-height:.94;letter-spacing:-.035em;text-align:left;max-width:12ch}
#work-heading>span{display:block}
#work-heading>span:nth-child(2){margin-left:15vw}
.work-total{position:absolute;bottom:8.4vw;right:0;font-size:15px;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.work-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:.9vw;row-gap:8vw}
.work-entry{display:block;min-width:0;scroll-margin-top:110px}
.work-entry figure{margin:0}
.work-image{position:relative;aspect-ratio:1;overflow:hidden;isolation:isolate;background:#171712}
.work-entry--landscape .work-image{aspect-ratio:3/2}
.work-image img{position:absolute;inset:-8% 0 auto;display:block;width:100%;height:116%;object-fit:cover;scale:1;transition:scale .8s cubic-bezier(.2,.65,.2,1)}
.work-entry figcaption{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 2px 0;color:inherit}
.work-entry h2{font-family:Melodrama,serif;font-size:clamp(28px,2.8vw,46px);line-height:1.1;letter-spacing:-.025em;font-weight:500;text-wrap:balance}
.work-entry-arrow{flex:none;width:44px;height:44px;display:grid;place-items:center;border:1px solid #f1eddf60;border-radius:50%;transition:background-color .25s,color .25s,rotate .35s}
.work-entry-arrow .ui-icon{width:20px;height:20px}
@media(hover:hover){.work-entry:hover img{scale:1.035}.work-entry:hover .work-entry-arrow{background:#f1eddf;color:#080808;rotate:45deg}}
.work-footer{margin-top:12vw;padding:5vw 0 44px;border-top:1px solid #f1eddf40}
.work-contact{font-family:Melodrama,serif;font-size:clamp(68px,12vw,180px);line-height:1.05;letter-spacing:-.035em;display:inline-flex;align-items:center;gap:4vw;min-height:44px}
.work-contact>.ui-icon,.work-contact>span>.ui-icon{width:7vw;height:7vw;max-width:110px;max-height:110px}
.work-footer>div{display:flex;gap:24px;flex-wrap:wrap;justify-content:space-between;margin-top:42px;font-size:18px}
.work-footer>div>a{min-height:44px;display:inline-flex;align-items:center;gap:8px}
.work-page #route-status{color:inherit}
@media(max-width:720px){
 .work-header{padding:14px 12px 20px;align-items:flex-start;gap:10px;min-height:110px}
 .work-header .brand-logo{width:98px}
 .work-header nav{gap:10px;font-size:13px;padding-top:1px}
 .work-header nav a{min-height:44px}
 .work-header #motion-toggle{position:absolute;right:12px;top:58px;margin:0;font-size:12px;min-height:44px}
 #work-main{padding:0 12px}
 .work-intro{padding-top:180px;padding-bottom:54px}
 #work-heading{font-size:clamp(64px,17vw,110px);line-height:.95;letter-spacing:-.035em}
 #work-heading>span:nth-child(2){margin-left:16vw}
 .work-total{right:0;bottom:58px;font-size:12px}
 .work-grid{grid-template-columns:minmax(0,1fr);row-gap:48px}
 .work-entry--landscape .work-image{aspect-ratio:1}
 .work-entry figcaption{padding-top:12px;gap:16px}
 .work-entry h2{font-size:30px;line-height:1.12}
 .work-entry-arrow{width:44px;height:44px}
 .work-footer{margin-top:90px;padding-top:34px;padding-bottom:24px}
 .work-contact{font-size:22vw;gap:5vw}
 .work-contact>span>.ui-icon{width:12vw;height:12vw}
 .work-footer>div{margin-top:28px;gap:4px 20px;font-size:16px;flex-direction:column}
}
@media(max-width:350px){.work-header .brand-logo{width:84px}.work-header nav{gap:8px;font-size:12px}.work-entry h2{font-size:27px}.work-intro{padding-top:164px}}
@media(prefers-reduced-motion:reduce){.work-image img,.work-entry-arrow{transition:none}}

.work-page .work-intro { padding-top: clamp(128px, 20svh, 220px); padding-bottom: clamp(64px, 6vw, 110px); }
.work-jump {
  position: absolute; right: 0; bottom: 4vw;
  display: inline-flex; align-items: center; gap: .6em; min-height: 44px;
  color: #f1eddf; font-size: 16px; text-transform: uppercase;
}
.work-jump .ui-icon { width: 16px; height: 16px; }
.work-jump:hover { text-decoration: underline; text-underline-offset: .3em; }
.work-grid { scroll-margin-top: 110px; column-gap: 1.5vw; }
.work-entry:focus-visible { outline: 2px solid #f1eddf; outline-offset: 6px; opacity: 1 !important; transform: none !important; }
.work-entry-label { min-width: 0; }
.work-category { margin: .45rem 0 0; color: #c9c1b1; font: 500 15px/1.35 system-ui, sans-serif; }
.work-entry figcaption { align-items: flex-start; }
.work-entry-arrow { margin-top: .15rem; }
html.reduced .work-image img, html.reduced .work-entry-arrow { transition: none; }
html.reduced .work-entry:hover img { scale: 1; }
html.reduced .work-entry:hover .work-entry-arrow { rotate: 0deg; }
@media (max-width: 720px) {
  .work-page .work-intro { padding-top: 143px; padding-bottom: 52px; }
  .work-jump { position: static; margin-top: 20px; font-size: 14px; }
  .work-category { font-size: 13px; }
  .work-entry:focus-visible { outline-offset: 3px; }
}