:root { --paper:#fff; --ink:#171717; --muted:#a9a9a9; --ui:"Manrope",Arial,sans-serif; }
* { box-sizing:border-box; }
html, body, #app { min-height:100%; }
body { background:var(--paper); color:var(--ink); font-family:var(--ui); margin:0; overflow-x:hidden; }
button, a { color:inherit; font:inherit; } button { border:0; cursor:pointer; } a { text-decoration:none; }

/* Shared chrome */
.site-header { align-items:center; display:flex; justify-content:space-between; left:0; padding:25px 40px; position:fixed; right:0; top:0; z-index:20; }
.site-header.is-on-image { color:#f6f6f4; text-shadow:0 1px 12px rgba(0,0,0,.22); }
.logo { font-size:15px; font-weight:300; letter-spacing:.43em; line-height:1; padding-left:.43em; text-transform:uppercase; }
.logo:has(img) { align-items:center; display:flex; gap:10px; padding-left:0; }
.logo img { display:block; height:clamp(23px,8vw,80px); max-width:clamp(80px,8vw,150px); object-fit:contain; object-position:left center; width:auto; }
.logo-type { color:#beb182; font-family:"DM Sans",sans-serif; font-size:clamp(14px,4vw,42px); font-weight:700; letter-spacing:-.04em; line-height:1; text-transform:none; }
.brand-stack { display:flex; flex-direction:column; gap:14px; }.page-back { align-items:center; color:rgba(242,242,239,.9); display:flex; height:28px; width:28px; }.page-back .back-icon { height:20px; width:20px; }
.icon-button { align-items:center; background:transparent; display:grid; height:28px; padding:0; place-items:center; width:30px; }
.site-header .icon-button { transform:translateY(-20px); }
.hamburger, .hamburger::before, .hamburger::after { background:currentColor; content:""; display:block; height:3px; position:absolute; width:34px; }
.hamburger::before { transform:translateY(-7px); }.hamburger::after { transform:translateY(7px); }
.close-icon, .close-icon::after { background:currentColor; content:""; display:block; height:1.5px; position:absolute; transform:rotate(45deg); width:24px; }
.close-icon::after { transform:rotate(90deg); }
.back-icon { border-left:1.5px solid currentColor; border-bottom:1.5px solid currentColor; display:block; height:19px; transform:rotate(45deg); width:19px; }
.social-dock { align-items:center; bottom:26px; display:flex; gap:18px; justify-content:center; left:50%; position:fixed; transform:translateX(-50%); z-index:31; }
.social-icon { align-items:center; color:#fff; display:grid; height:30px; opacity:.86; place-items:center; transition:opacity .2s, transform .2s; width:30px; }
.social-icon:hover { opacity:1; transform:translateY(-2px); }.social-icon svg { fill:currentColor; height:26px; width:26px; }

/* Home: fixed background, scrolling title layer */
.home { height:100svh; min-height:560px; overflow:hidden; position:relative; }
.home-background { background:#181818; inset:0; overflow:hidden; position:absolute; z-index:0; }
.home-background video { animation:drift 18s ease-in-out infinite alternate; height:112%; left:-6%; object-fit:cover; position:absolute; top:-6%; width:112%; z-index:0; }
.home-background::before, .home-background::after { content:""; inset:0; position:absolute; }
.home-background::before { background:radial-gradient(ellipse at 74% 66%, rgba(224,188,134,.52) 0 10%, transparent 33%), linear-gradient(90deg, rgba(12,28,35,.42), transparent 28%, transparent 70%, rgba(26,20,18,.18)); }
.home-background::after { background:linear-gradient(180deg, rgba(0,0,0,.10), transparent 23%, transparent 75%, rgba(0,0,0,.24)), radial-gradient(circle, rgba(0,0,0,.28) 0 1px, transparent 1.4px); background-size:auto, 3px 3px; mix-blend-mode:multiply; pointer-events:none; z-index:1; }
@keyframes drift { 0% { transform:scale(1.06) translate3d(-1.5%,-1%,0); } 100% { transform:scale(1.15) translate3d(1.5%,1%,0); } }
.title-stage { align-items:center; display:flex; height:100%; justify-content:center; left:0; pointer-events:none; position:absolute; right:0; top:0; z-index:2; }
.title-scroll { height:min(67vh,650px); max-width:95vw; overflow-y:auto; pointer-events:auto; scrollbar-width:none; width:720px; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 17%, #000 82%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0%, #000 17%, #000 82%, transparent 100%); }
.title-scroll::-webkit-scrollbar { display:none; }
.project-titles { list-style:none; margin:0; padding:33vh 0; text-align:center; }
.project-titles li { margin:0; padding:10px 10px; }
.project-titles a { color:rgba(0,0,0,.60); display:inline-block; font-family:"DM Sans",sans-serif; font-size:clamp(45px,3vw,86px); font-weight:500; letter-spacing:-.02em; line-height:1.04; text-shadow:0 1px 1px rgba(255,255,255,.16); text-transform:none; transition:color .25s, transform .25s; }
.project-titles a:hover, .project-titles a:focus-visible { color:#FFFFFF; outline:0; transform:scale(1.025); }
.home-hint { bottom:28px; color:rgba(255,255,255,.75); font-size:9px; font-weight:400; left:40px; letter-spacing:.16em; position:absolute; text-transform:uppercase; z-index:2; }

/* Project */
.project-page { background:#181818; color:#f2f2ef; min-height:100vh; padding:112px max(6.55vw,40px) 100px; }
.project-header { display:grid; grid-template-columns:1fr 1.2fr; margin:7px 0 60px; max-width:1140px; }
.project-name { font-size:19px; font-weight:300; grid-column:1/-1; letter-spacing:.12em; margin:0 0 14px; text-transform:uppercase; }
.project-facts { color:rgba(242,242,239,.82); font-size:11px; font-weight:300; letter-spacing:.1em; line-height:1.95; text-transform:uppercase; }
.project-facts strong { font-weight:600; }
.copyright { border-bottom:1px solid rgba(242,242,239,.25); font-size:9px; font-weight:300; letter-spacing:.14em; padding-bottom:5px; position:absolute; right:max(6.55vw,40px); text-transform:uppercase; top:157px; }
.project-video { aspect-ratio:16 / 9; height:auto; margin:0 auto 78px; overflow:hidden; position:relative; width:100%; }.project-video video { display:block; height:100%; object-fit:cover; pointer-events:none; width:100%; }.project-video::after { background:radial-gradient(circle,rgba(0,0,0,.28) 0 1px,transparent 1.4px); background-size:3px 3px; content:""; inset:0; mix-blend-mode:multiply; pointer-events:none; position:absolute; }.project-video-intro { color:#fff; left:50%; margin:0; pointer-events:none; position:fixed; text-align:center; top:clamp(110px,8vw,150px); transform:translateX(-50%); width:calc(100% - 160px); z-index:16; }.project-video-intro h1 { font-family:"DM Sans",sans-serif; font-size:clamp(36px,6vw,96px); font-weight:700; letter-spacing:-.07em; line-height:.9; margin:0; text-shadow:0 2px 16px rgba(0,0,0,.24); }.project-video-intro p { font-family:"DM Sans",sans-serif; font-size:clamp(11px,1.1vw,17px); font-weight:700; margin:10px 0 0; text-shadow:0 2px 12px rgba(0,0,0,.28); }.project-gallery { display:grid; gap:78px; margin:0 auto; width:100%; }
.project-image { height:auto; margin:0; overflow:hidden; width:100%; }
.project-image img { display:block; height:auto; width:100%; }
.project-image img { transform:translate(0,0) scale(1); transition:transform 260ms ease-out; }
.project-image.is-pinching img { transition:none; will-change:transform; }
@media (prefers-reduced-motion:reduce) { .project-image img { transition:none; } }
.project-image.placeholder { align-items:flex-end; background:linear-gradient(135deg,#605a50,#bbb09e 53%,#2c2927); color:rgba(255,255,255,.8); display:flex; font-size:9px; justify-content:space-between; letter-spacing:.14em; padding:18px; text-transform:uppercase; }
.project-repeat { display:grid; grid-template-columns:1fr 1.2fr; margin:24px 0 0; max-width:1140px; }
.project-repeat .project-name { grid-column:auto; }
.project-nav { display:flex; font-size:11px; justify-content:space-between; left:40px; letter-spacing:.1em; pointer-events:none; position:fixed; right:40px; top:50%; transform:translateY(-50%); text-transform:uppercase; z-index:15; }.project-nav a { display:grid; gap:7px; pointer-events:auto; }.project-nav a:last-child { text-align:right; }.project-nav a span:last-child { color:rgba(242,242,239,.6); }

/* Information pages */
.info-page { align-items:flex-start; background:#181818; color:#f2f2ef; display:flex; min-height:100svh; padding:var(--page-top,120px) max(var(--page-side,8vw),40px) var(--page-bottom,90px); }
.info-content { max-width:940px; }.info-title { font-family:"DM Sans",sans-serif; font-size:clamp(60px,10vw,150px); font-weight:700; letter-spacing:-.06em; line-height:.92; margin:0 0 32px; }
.info-copy { color:rgba(242,242,239,.82); font-size:clamp(18px,2vw,29px); line-height:1.25; margin:0; max-width:860px; white-space:pre-line; }.info-email { border-bottom:1px solid rgba(242,242,239,.45); display:inline-block; margin-top:32px; padding-bottom:5px; }
.info-links { list-style:none; margin:44px 0 0; padding:0; }.info-links li { border-top:1px solid rgba(242,242,239,.25); max-width:650px; }.info-links a { align-items:center; display:flex; font-family:"DM Sans",sans-serif; font-size:clamp(22px,2.2vw,34px); font-weight:700; justify-content:space-between; letter-spacing:-.04em; padding:14px 0; transition:opacity .2s; }.info-links a:hover { opacity:.58; }.info-links a::after { content:"↗"; font-size:.7em; }
.research-thumb { background:#292929; display:block; flex:0 0 112px; height:70px; margin-left:auto; overflow:hidden; }.research-thumb img { display:block; height:100%; object-fit:cover; width:100%; }.research-thumb + * { margin-left:16px; }
.info-media { margin:48px 0 0; max-width:920px; overflow:hidden; }.info-media img, .info-media video { display:block; height:auto; max-height:68vh; object-fit:cover; width:100%; }.contact-links { display:grid; gap:14px; margin-top:36px; }.contact-links a { align-items:center; border-bottom:1px solid rgba(242,242,239,.42); display:flex; font-family:"DM Sans",sans-serif; font-size:clamp(23px,2.3vw,36px); font-weight:700; gap:11px; letter-spacing:-.04em; padding-bottom:8px; width:max-content; }.contact-links svg { fill:currentColor; height:.9em; width:.9em; }.contact-address { color:rgba(242,242,239,.68); font-size:18px; letter-spacing:.08em; margin:52px 0 0; }

/* Full-screen menu */
.menu-overlay { align-items:center; background:#181818; color:#f5f5f3; display:flex; inset:0; justify-content:center; opacity:0; pointer-events:none; position:fixed; transition:opacity .25s ease; visibility:hidden; z-index:30; }
.menu-overlay.is-open { opacity:1; pointer-events:auto; visibility:visible; }
.menu-overlay .logo { left:40px; position:absolute; top:31px; }
.menu-overlay .icon-button { position:absolute; right:40px; top:27px; }
.menu-links { list-style:none; margin:0; padding:0; text-align:center; }
.menu-links li { overflow:hidden; }
.menu-links a { display:block; font-family:"DM Sans",sans-serif; font-size:clamp(33px,3.2vw,52px); font-weight:700; letter-spacing:-.04em; line-height:1.12; padding:18px 18px; text-transform:none; transform:translateY(12px); transition:color .2s, transform .3s; }
.menu-overlay.is-open .menu-links a { transform:translateY(0); }.menu-links a:hover { color:#a5a5a5; }
.social-links { bottom:25px; display:flex; gap:24px; left:50%; list-style:none; margin:0; padding:0; position:absolute; transform:translateX(-50%); }
.social-links a { color:#999; font-size:11px; letter-spacing:.08em; text-transform:uppercase; }

@media (max-width:700px) {
  .site-header { padding:24px 20px; }.logo { font-size:13px; }.home-hint { bottom:21px; left:20px; }.social-dock { bottom:18px; }
  .title-scroll { height:62vh; width:100%; }.project-titles { padding:27vh 0; }.project-titles a { font-size:28px; }
  .project-page { padding:94px 20px 65px; }.project-header { display:block; margin-bottom:40px; }.project-name { font-size:15px; }.project-facts { font-size:10px; margin-top:18px; }.copyright { display:none; }.project-video { aspect-ratio:16 / 9; height:auto; margin-bottom:48px; }.project-video-intro { top:82px; width:calc(100% - 40px); }.project-video-intro h1 { font-size:clamp(28px,9vw,42px); }.project-video-intro p { font-size:10px; margin-top:6px; }.project-image { height:auto; }.project-gallery { gap:48px; }.project-repeat { display:block; margin-top:48px; }.project-repeat .project-facts { margin-top:18px; }.project-nav { left:20px; right:20px; }
  .info-page { padding:var(--page-top, 110px) 20px var(--page-bottom, 70px); }.info-title { font-size:58px; }.info-copy { font-size:19px; }
  .info-links { margin-top:32px; }
  .info-media { margin-top:32px; }.contact-links { margin-top:28px; }
  .menu-overlay .logo { left:20px; top:29px; }.menu-overlay .icon-button { right:20px; top:25px; }.menu-links a { font-size:31px; }.social-links { bottom:21px; }
}