@font-face{font-family:HounguesMenu;src:url('syncopate-bold.woff') format('woff');font-weight:700;font-style:normal;font-display:swap}
:root{color-scheme:dark;--app-width:480px;--nav-size:56px;--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px);--gold:#987942;--cta-gold:#b49a68;font-family:Arial,Helvetica,sans-serif;background:#171717;color:#fff;font-synthesis:none}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{color:inherit;border:0;background:none}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid #bd9d62;outline-offset:-4px}button:disabled{opacity:.4;cursor:default}[hidden]{display:none!important}h1,h2,p,figure{margin:0}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.mobile-app{position:relative;width:100%;max-width:var(--app-width);height:100vh;height:100dvh;margin:auto;overflow:hidden;background:#000;isolation:isolate;box-shadow:0 0 70px #0008}
.viewport{position:absolute;inset:0 0 calc(var(--nav-size) + var(--safe-bottom));overflow:hidden;background:#000}.view{width:100%;height:100%;position:relative}.project-feed{overflow-y:auto;overflow-x:hidden;scroll-snap-type:y mandatory;overscroll-behavior-y:contain;scrollbar-width:none;outline:none;scroll-behavior:auto}.project-feed::-webkit-scrollbar,.project-gallery::-webkit-scrollbar{display:none}.project-feed.is-peeking{scroll-snap-type:none!important}.screen{height:100%;min-height:100%;position:relative;overflow:hidden;scroll-snap-align:start;scroll-snap-stop:always;background:#000}
.home-wordmark{position:absolute;top:43%;left:50%;transform:translate(-50%,-50%);width:77%;line-height:0;font-weight:400}.home-wordmark svg{display:block;width:100%;height:auto;overflow:hidden}.skyline{position:absolute;left:0;bottom:0;display:block;width:100%;height:auto;overflow:hidden;pointer-events:none}
.menu-trigger{position:absolute;left:9px;top:calc(7px + var(--safe-top));z-index:10;width:44px;height:44px;display:grid;place-items:center;padding:11px;filter:drop-shadow(0 1px 5px #0008)}.menu-trigger svg{width:21px;height:21px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:square}
.bottom-nav{position:absolute;z-index:20;left:0;right:0;bottom:0;height:calc(var(--nav-size) + var(--safe-bottom));padding-bottom:var(--safe-bottom);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff;color:#050505;border-top:1px solid #ececec}.bottom-nav a{position:relative;min-width:0;min-height:var(--nav-size);padding:0 4px;display:flex;align-items:center;justify-content:center;font-family:HounguesMenu,Arial,sans-serif;font-size:clamp(10px,2.72vw,12.5px);font-weight:700;line-height:1;white-space:nowrap;transition:color .18s ease}.bottom-nav a+a:before{content:'';position:absolute;left:0;top:50%;height:18px;width:1px;transform:translateY(-50%);background:#c7c7cd}.bottom-nav a[aria-current=page]{color:var(--gold)}.bottom-nav a:active span{opacity:.6}
.project-gallery{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
/* PRIMARY fills the first portrait view; subsequent pages show three complete landscape images. */
.gallery-page{flex:0 0 100%;width:100%;height:100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;background:#000}
.gallery-page--group{display:flex;flex-direction:column;justify-content:flex-start;gap:0}
.project-media{height:100%;width:100%;min-height:0;min-width:0;overflow:hidden}
.project-media img{height:100%;width:100%;object-fit:contain;object-position:center;display:block;user-select:none;-webkit-user-drag:none}
/* Stack at native landscape height. Extra room stays below the stack, never between photos. */
.gallery-page--group .project-media{flex:0 1 min(56.25vw,270px);height:auto;aspect-ratio:16/9}
.gallery-page--group .project-media+.project-media{border-top:1px solid var(--cta-gold)}
/* Short viewports may shrink the rows; contain keeps every complete scene visible. */
.gallery-page--primary img{object-fit:cover}
.project-media--primary img{object-position:71% center}
.project-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#0003 0%,transparent 25%,transparent 48%,#000a 77%,#000e 100%)}

.compact-brand{position:absolute;top:calc(22px + var(--safe-top));left:50%;transform:translateX(-50%);font:16px/1 'Times New Roman',Times,serif;white-space:nowrap;letter-spacing:1px;text-shadow:0 1px 12px #0009;min-height:32px;display:flex;align-items:flex-start}
.preview-badge{position:absolute;right:18px;top:calc(71px + var(--safe-top));font-size:8px;letter-spacing:1.3px;font-weight:600;border:1px solid #ffffff66;padding:7px 9px;border-radius:2px;background:#0002}
.project-copy{position:absolute;left:20px;right:20px;bottom:12px;pointer-events:none;text-shadow:0 1px 9px #0007}
.project-copy a,.project-copy button{pointer-events:auto}
.eyebrow{font-size:9px;line-height:1.4;letter-spacing:1.7px;font-weight:600;margin-bottom:10px}
.project-copy .eyebrow{margin-bottom:8px}
.project-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}
.project-copy h2{font:400 clamp(27px,8.15vw,39px)/1.08 'Times New Roman',Times,serif;letter-spacing:-.8px;min-width:0}
.developer-logo{display:block;flex:0 0 36%;width:36%;height:auto;overflow:hidden;border:0}
.project-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:20px 0 0;padding:0;color:#fff;background:transparent}
.project-facts>div{min-width:0;padding:0 8px;text-align:center}
.project-facts>div+div{border-left:1px solid #ffffff66}
.project-facts dt{font-size:clamp(9px,2.7vw,12px);line-height:1.3;font-weight:400}
.project-facts dd{margin:6px 0 0;font-size:clamp(14px,3.7vw,18px);line-height:1.2;font-weight:500;white-space:nowrap}
.media-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px auto 2px;width:max-content;pointer-events:auto}
.media-arrow{width:44px;height:44px;font-size:28px;font-weight:400;padding:0}

/* Equal side tracks center the label on the whole button, independently of the arrow. */
.explore-button{--cta-surface:#8d713e;min-height:48px;padding:12px 16px;display:grid;grid-template-columns:24px minmax(0,1fr) 24px;column-gap:6px;align-items:center;background:var(--cta-surface);color:#fff;font-size:clamp(15px,3.55vw,17px);font-weight:600;line-height:1.3;letter-spacing:.3px;text-align:center;text-shadow:none}
.explore-label{grid-column:2;grid-row:1;min-width:0;text-shadow:0 0 3px #ffffffa6,0 0 9px #ffeec673}
.explore-arrow{grid-column:3;grid-row:1;justify-self:end;font-size:24px;font-weight:400;line-height:1;text-shadow:0 0 5px #ffffff66}
.explore-button:focus-visible{outline:2px solid #fff;outline-offset:-4px}

.text-action{display:flex;align-items:center;justify-content:space-between;margin-top:28px;width:100%;border-top:1px solid #ffffff66;min-height:50px;padding:16px 0;font-size:12px}
.project-screen:not(.is-active) .compact-brand,.project-screen:not(.is-active) .preview-badge{opacity:0;pointer-events:none}
/* P003: eight-row menu matching the approved black-and-white mockup. */
.site-menu{position:fixed;inset:0;width:min(100%,480px);height:100vh;height:100dvh;max-height:none;max-width:480px;margin:auto;padding:0;border:0;background:#000;color:#fff;overflow:hidden}
.site-menu::backdrop{background:#000b}
.menu-heading{position:absolute;z-index:2;top:0;left:0;right:0;height:calc(64px + var(--safe-top));background:#000}
.menu-brand{position:absolute;top:calc(22px + var(--safe-top));left:50%;transform:translateX(-50%);font:16px/1 'Times New Roman',Times,serif;white-space:nowrap;letter-spacing:1px;min-height:32px;display:flex;align-items:flex-start}
.close-menu{position:absolute;left:9px;top:calc(7px + var(--safe-top));width:44px;height:44px;padding:9px;display:grid;place-items:center}
.close-menu svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.3}
.menu-scroll{position:absolute;inset:calc(64px + var(--safe-top)) 0 calc(var(--nav-size) + var(--safe-bottom));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:clamp(12px,4vh,42px) 5.8% clamp(24px,7vh,72px);padding-block:clamp(12px,4dvh,42px) clamp(24px,7dvh,72px)}
.menu-links{height:100%;min-height:416px;display:grid;grid-template-rows:repeat(8,minmax(52px,1fr));margin:0}
.menu-links a{display:flex;align-items:center;width:100%;padding:12px 0;text-align:left;border-bottom:1px solid #555;font-family:HounguesMenu,Arial,sans-serif;font-size:clamp(16px,4.6vw,21px);font-weight:700;line-height:1.25;white-space:nowrap}
.menu-links a:active{color:#c7c7c7}
.info-screen{overflow-y:auto;overscroll-behavior:contain;background:#000;padding:calc(100px + var(--safe-top)) 24px 36px}
.info-copy{max-width:100%;margin:clamp(24px,12vh,110px) 0 0}
.info-copy h2{font:400 clamp(34px,9.5vw,46px)/1.1 'Times New Roman',Times,serif;letter-spacing:-.7px}
.info-copy>p:not(.eyebrow){font-size:14px;line-height:1.7;margin-top:20px;color:#ddd}
.info-copy .sample-note{font-size:10px!important;color:#999!important;letter-spacing:.2px}
.skip-link{position:absolute;top:-100px;left:12px;z-index:60;background:#fff;color:#000;padding:12px;font-size:13px}.skip-link:focus{top:12px}.no-script{position:fixed;bottom:75px;left:20px;right:20px;z-index:50;background:#fff;color:#000;padding:20px;font-size:14px}.no-script a{text-decoration:underline}
@media(max-width:350px){.bottom-nav a{font-size:9px}.project-copy{left:18px;right:18px}.compact-brand{font-size:13px}.project-heading{gap:8px}.project-copy h2{font-size:27px}.project-facts>div{padding:0 3px}}
@media(max-height:540px){.project-copy{bottom:10px}.project-copy h2{font-size:27px}.project-facts{margin-top:10px}.media-controls{margin:2px auto}.preview-badge{top:62px}.text-action{margin-top:10px}.skyline{max-height:29%;width:100%}}
@media(max-height:380px){.project-copy .eyebrow{margin-bottom:4px}.project-copy h2{font-size:24px}.developer-logo{max-height:32px}.project-facts{margin-top:6px}.project-facts dd{margin-top:3px}.media-controls{position:absolute;right:0;top:-48px;margin:0}.explore-button{margin-top:10px;min-height:44px;padding-block:10px}.preview-badge{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

@media(max-width:350px){.menu-brand{font-size:13px}.menu-links a{font-size:16px}}