:root{--yellow:#ffc20e;--bg:#000;--surface:#111;--line:#292929;--muted:#a1a1a1;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:var(--bg);color:#f4f4f1;font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--yellow);outline-offset:5px}header{height:100px;margin:0 4.2%;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:45px}.brand{display:block;position:relative;width:112px;height:54px;overflow:hidden;flex-shrink:0}.brand img{width:168px;height:auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}nav{display:flex;gap:30px;margin-left:auto;font-size:13px}nav a{padding:12px 0;color:#d5d5d5}nav a:hover{color:var(--yellow)}.header-note{font-size:10px;color:var(--muted);letter-spacing:2px;margin-left:32px}.skip{position:absolute;top:-100px;left:20px;padding:15px;background:var(--yellow);color:#000;z-index:10}.skip:focus{top:15px}.hero{display:grid;grid-template-columns:1fr 1fr;gap:5%;margin:66px 4.2% 90px;min-height:570px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;margin:0 0 28px;color:var(--muted);display:flex;align-items:center;gap:10px}.dot{height:6px;width:6px;background:var(--yellow);border-radius:50%}h1{font-size:clamp(60px,7.6vw,122px);letter-spacing:-.075em;line-height:.99;font-weight:500;margin:0}h1 span{color:var(--yellow)}.hero-copy{display:flex;flex-direction:column}.hero-bottom{margin-top:auto;padding-top:42px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}.hero-bottom p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}.jump{font-size:11px;border-bottom:1px solid #555;padding-bottom:9px;white-space:nowrap}.jump span{font-size:23px;color:var(--yellow);margin-left:18px}.hero-visual{position:relative;min-height:570px;background:#101010;overflow:hidden}.hero-visual>img{width:100%;height:100%;position:absolute;object-fit:cover;object-position:53% center}.hero-visual:after{content:'';position:absolute;inset:50% 0 0;background:linear-gradient(transparent,#000b);pointer-events:none}.hero-caption{position:absolute;bottom:22px;left:24px;right:24px;display:flex;justify-content:space-between;gap:12px;font-size:9px;letter-spacing:1.4px;z-index:1}.corner-mark{position:absolute;right:20px;top:13px;color:var(--yellow);font-size:28px}.work-section{margin:0 4.2%;padding:47px 0 86px;border-top:1px solid var(--line)}.section-title{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:43px}.section-title .eyebrow{margin-bottom:16px}.section-title h2{font-size:clamp(32px,3.6vw,55px);font-weight:500;letter-spacing:-.055em;margin:0}.section-title h2 span{color:var(--yellow)}.section-title>p{color:var(--muted);font-size:12px;line-height:1.7;max-width:260px;margin:0 0 4px}.projects{display:grid;grid-template-columns:1fr 1fr;gap:32px}.project-top{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 18px;gap:12px}.project h3{font-weight:500;letter-spacing:-1px;font-size:28px;margin:0}.project .number{color:var(--yellow);font-size:11px;letter-spacing:1px}.video-wrap{height:360px;background:#0e0e0e;position:relative;overflow:hidden;border:1px solid #1b1b1b}.video-wrap video{width:100%;height:100%;object-fit:contain;display:block;background:#080808}.video-wrap .play{position:absolute;inset:0;border:0;padding:0;background:linear-gradient(transparent 50%,#0009);display:flex;align-items:flex-end;justify-content:space-between;text-align:left;color:white}.play-icon{width:48px;height:48px;border:1px solid var(--yellow);border-radius:50%;display:grid;place-items:center;margin:20px;color:var(--yellow);font-size:15px;background:#0008;padding-left:3px}.play-label{font-size:10px;letter-spacing:1.4px;margin:0 22px 34px}.video-wrap.playing .play{display:none}.video-wrap.playing video{outline:0}.project-info{display:flex;justify-content:space-between;gap:15px;font-size:10px;letter-spacing:1.2px;color:var(--muted);margin:15px 0 26px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.photo{border:0;padding:0;position:relative;aspect-ratio:1.23;background:#131313;overflow:hidden}.photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s,opacity .35s}.photo:hover img{transform:scale(1.035);opacity:.8}.photo span{position:absolute;right:8px;bottom:8px;font-size:15px;color:var(--yellow);opacity:0}.photo:hover span,.photo:focus-visible span{opacity:1}.gallery-note{color:#858585;font-size:10px;margin:14px 0 0;letter-spacing:.3px}.motion{padding-top:47px}footer{border-top:1px solid var(--line);margin:0 4.2%;padding:26px 0 35px;display:flex;align-items:center;gap:30px}footer p{font-size:9px;letter-spacing:1.5px;color:var(--muted);margin-left:10px}.back-top{font-size:11px;margin-left:auto;color:var(--yellow)}dialog{max-width:none;max-height:none;width:100%;height:100dvh;border:0;background:#080808f7;color:#eee;padding:24px 32px}dialog::backdrop{background:#000d}.lightbox-bar,.lightbox-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;height:50px;font-size:12px}.lightbox-bar button{background:none;border:0;color:#eee;padding:12px}.lightbox-stage{height:calc(100% - 100px);display:flex;align-items:center;gap:20px}.lightbox-stage img{display:block;width:calc(100% - 120px);height:100%;object-fit:contain}.arrow{background:none;color:var(--yellow);border:1px solid #424242;border-radius:50%;height:40px;width:40px;flex-shrink:0}.lightbox-bottom p{color:var(--muted);text-align:center}.lightbox-bottom a{color:var(--yellow);white-space:nowrap}body.modal-open{overflow:hidden}@media(min-width:1600px){header,.hero,.work-section,footer{max-width:1500px;margin-left:auto;margin-right:auto}.video-wrap{height:430px}}@media(max-width:950px){.hero{min-height:460px}.hero-visual{min-height:460px}.hero-bottom{flex-direction:column;align-items:flex-start}.header-note{display:none}.video-wrap{height:290px}.project h3{font-size:24px}.project-info{font-size:9px;letter-spacing:.6px}.section-title>p{max-width:220px}.projects{gap:22px}.hero-caption{flex-direction:column;gap:8px}}@media(max-width:640px){header{height:80px;gap:15px;margin:0 6%}.brand{width:82px;height:44px}.brand img{width:123px}nav{gap:18px;font-size:11px}.hero{margin:40px 6% 52px;grid-template-columns:1fr;gap:32px}.hero h1{font-size:73px}.hero-bottom{flex-direction:row;align-items:flex-end;padding-top:30px}.hero-bottom p{font-size:12px}.jump{font-size:10px}.jump span{margin-left:8px}.hero-visual{min-height:370px}.hero-caption{flex-direction:row;font-size:8px}.work-section{margin:0 6%;padding:32px 0 45px}.section-title{display:block;margin-bottom:28px}.section-title>p{margin-top:18px;max-width:none}.section-title h2{font-size:35px}.projects{grid-template-columns:1fr;gap:44px}.video-wrap{height:310px}.project h3{font-size:26px}.project-info{font-size:10px}.gallery{gap:7px}.gallery-note{font-size:10px}footer{margin:0 6%;gap:15px;flex-wrap:wrap}footer p{font-size:8px;max-width:130px;line-height:1.7;margin-left:0}.back-top{font-size:10px}dialog{padding:12px}.lightbox-stage{gap:5px}.lightbox-stage img{width:calc(100% - 74px)}.arrow{width:32px;height:32px}.lightbox-bottom{font-size:10px;flex-wrap:wrap;height:auto}.lightbox-bottom p{display:none}.lightbox-bar{font-size:11px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.photo img{transition:none}}
/* ── Intro: the reel plays through the TNP wordmark, scroll zooms into it ── */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.intro{height:260vh;position:relative;background:var(--bg)}
.intro-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.intro-window{position:absolute;inset:0;background:var(--yellow);-webkit-mask:url("media/tnp.svg") center/var(--mw,80vw) auto no-repeat;mask:url("media/tnp.svg") center/var(--mw,80vw) auto no-repeat}
.intro-reel{width:100%;height:100%;object-fit:cover;display:block;opacity:var(--reel-o,.8)}
.intro-scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#000a,#0000 30%,#0000 70%,#000c);opacity:var(--scrim,0)}

/* ── Fixed bar: the yellow logo docks here once the zoom is through ── */
.bar{position:fixed;top:0;left:0;right:0;z-index:20;height:100px;max-width:none;margin:0;padding:0 max(4.2vw,calc((100vw - 1500px)/2));border-bottom:0;pointer-events:none}
.bar:before{content:'';position:absolute;inset:0 0 -30px;background:linear-gradient(#000e,#0000);opacity:var(--bar-bg,0);pointer-events:none}
.bar-logo{position:relative;display:block;width:112px;flex-shrink:0;transform-origin:0 0;opacity:var(--logo-o,0);pointer-events:auto;will-change:transform}
.bar-logo svg{display:block;width:100%;height:auto;fill:var(--yellow)}
.bar nav{position:relative;opacity:var(--nav-o,0);pointer-events:auto}
.bar[data-docked="false"] nav,.bar[data-docked="false"] .bar-logo{pointer-events:none}
.work-section#film{border-top:0;padding-top:clamp(120px,12vw,160px)}
@media(max-width:640px){.bar{height:80px;padding:0 6vw}.bar-logo{width:82px}}
@media(prefers-reduced-motion:reduce){.intro{height:100vh;height:100svh}.bar-logo{will-change:auto}}

/* ── Icons: drawn as SVG so no device renders them as emoji ── */
button{-webkit-appearance:none;appearance:none}
.ico{display:inline-block;width:.95em;height:.95em;vertical-align:-.1em;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter;overflow:visible}
.play-icon{padding:0;font-size:0;line-height:0;border-width:1.5px;color:var(--yellow)}
.ico-play{display:block;width:14px;height:16px;margin-left:4px;fill:var(--yellow)}
.play-label{display:inline-flex;align-items:center;gap:.7em;color:#fff}
.play-label .ico{width:11px;height:11px;vertical-align:0}
.video-wrap .play:hover .play-icon,.video-wrap .play:focus-visible .play-icon{background:var(--yellow)}
.video-wrap .play:hover .ico-play,.video-wrap .play:focus-visible .ico-play{fill:#000}
.photo span{line-height:0}
.photo span .ico{width:15px;height:15px}
.back-top .ico{width:10px;height:10px;margin-left:4px;vertical-align:0}
.arrow{display:grid;place-items:center;padding:0}
.arrow .ico{width:16px;height:14px}
#download .ico{width:10px;height:12px;margin-left:4px;vertical-align:-.05em}
/* iOS shows its own start button on a muted video that could not autoplay; the reel never needs it */
.intro-reel::-webkit-media-controls,.intro-reel::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.intro-window.is-open{-webkit-mask:none;mask:none}