:root{
  --bg:#f0f0ec;--orange-brown:#725d52;--ink:var(--orange-brown);--muted:#776d68;--line:rgba(114,93,82,.20);
  --orange:#f24a20;--red:#d80012;--page:min(76vw,1180px);--ease:cubic-bezier(.22,1,.36,1)
}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--bg)}body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}
.site-header{position:fixed;inset:0;width:100%;height:100vh;z-index:30;pointer-events:none}
.nav-link{position:absolute;top:35px;color:var(--orange);font-size:clamp(30px,2vw,40px);font-weight:400;line-height:.55;letter-spacing:0;text-transform:lowercase;writing-mode:horizontal-tb;text-orientation:mixed;width:.82em;white-space:normal;overflow-wrap:anywhere;word-break:break-all;text-align:left;padding:0;opacity:0;transform:translateY(-9px);animation:navIn .9s var(--ease) .08s forwards;transition:color .3s ease,transform .4s var(--ease);pointer-events:auto}
.nav-link:first-child{left:clamp(18px,2.7vw,42px)}
.nav-link:last-child{right:clamp(18px,2.7vw,42px);animation-delay:.16s}
.nav-link:hover{color:var(--red);transform:translateY(3px)}
@keyframes navIn{to{opacity:1;transform:translateY(0)}}
.project-page{width:var(--page);margin:0 auto;padding:clamp(38px,5vw,72px) 0 clamp(90px,10vw,150px)}.project-detail{width:100%}.project-video-wrap{width:min(100%,1080px);margin:0 auto;aspect-ratio:16/9;background:#111;overflow:hidden;box-shadow:0 20px 65px rgba(36,28,23,.08)}.project-video-wrap iframe{width:100%;height:100%;border:0;display:block}
.project-intro{width:min(860px,100%);margin:clamp(30px,3.8vw,52px) auto 0;text-align:center}.project-intro h1{margin:0;font-size:clamp(18px,1.75vw,27px);line-height:1.12;letter-spacing:-.025em;font-weight:400}.project-role{margin:8px 0 0;color:var(--orange);font-size:clamp(8px,.7vw,10px);letter-spacing:.18em;text-transform:uppercase}.project-description{width:min(760px,100%);margin:clamp(18px,2vw,28px) auto 0;color:var(--orange-brown);font-size:clamp(11px,1vw,14px);line-height:1.7;letter-spacing:-.005em}
.credits{width:min(920px,100%);margin:clamp(58px,6.5vw,95px) auto 0;padding-top:24px;border-top:0}.credits-heading{display:flex;align-items:baseline;justify-content:center;gap:10px;margin-bottom:26px}.credits-heading span{color:var(--orange);font-size:8px;letter-spacing:.15em;white-space:nowrap}.credits-heading h2{margin:0;font-size:clamp(18px,1.7vw,25px);font-weight:400;letter-spacing:-.025em}.credits-list{margin:0}.credit-row{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(0,1.3fr);gap:28px;padding:14px 0;border-bottom:1px solid var(--line);text-align:left}.credit-row dt{color:var(--orange-brown);font-size:8px;font-weight:500;letter-spacing:.16em;text-transform:uppercase}.credit-row dd{margin:0;color:var(--orange-brown);font-size:11px;line-height:1.55}.back-work{display:block;width:max-content;margin:clamp(70px,8vw,110px) auto 0;padding:0;border:0;color:var(--orange);font-size:11px;line-height:1.4;letter-spacing:.04em;text-transform:lowercase;transition:color .28s ease}.back-work:hover{color:var(--red)}
.project-footer{width:var(--page);margin:0 auto;padding:28px 0 22px;border-top:0;display:flex;justify-content:space-between;gap:25px;color:#6d625c;font-size:8px;letter-spacing:.18em;text-transform:uppercase}.reveal-item{opacity:0;transform:translateY(18px);transition:opacity .85s ease,transform .95s var(--ease)}.reveal-item.is-visible{opacity:1;transform:none}
@media(max-width:820px){:root{--page:min(90vw,1180px)}.site-header{height:100vh}.nav-link{top:56px;font-size:15px}.nav-link:first-child{left:14px}.nav-link:last-child{right:14px}.project-page{padding-top:28px}.credit-row{grid-template-columns:1fr;gap:7px;padding:14px 0;text-align:center}.credits-heading{margin-bottom:22px}.project-footer{flex-direction:column;align-items:center;text-align:center;gap:8px}}
@media(max-width:560px){.site-header{height:100vh}.nav-link{top:40px;font-size:10px;letter-spacing:.06em}.nav-link:first-child{left:8px}.nav-link:last-child{right:8px}.project-video-wrap{width:100vw;margin-left:calc((100vw - var(--page))*-.5)}.project-intro{margin-top:30px}.project-intro h1{font-size:clamp(18px,5vw,24px)}.project-description{font-size:11px;line-height:1.65}.project-role{line-height:1.55}.project-footer{font-size:7px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.reveal-item{opacity:1;transform:none;transition:none}}