* { margin:0; padding:0; box-sizing:border-box; } html, body { background:var(--bg); color:var(--text); overflow-x:hidden; font-family:"Input Mono", monospace; --text-sm:9px; /* match Information page body */ --img-gap:7px; --triptych-h:clamp(280px, 50vh, 4400px); --mobile-slideshow-h:clamp(520px, 42vh, 400px); --slide-duration:0.9s; --triptych-push:0px; --hero-offset:75px; --hero-width:min(58%, 520px); --below-width:min(88%, 960px); --copy-para-gap:12px; } a { color:inherit; text-decoration:none; } /* Scroll reveal, opted into per page via [data-scroll-reveal] on . The resting state is declared here so it is in effect on first paint and nothing is visible before it settles. */ body[data-scroll-reveal] .reveal { opacity:0; transform:translate3d(0, 34px, 0); transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms), transform 2s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms); } body[data-scroll-reveal] .reveal.is-revealed { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce) { body[data-scroll-reveal] .reveal { opacity:1; transform:none; transition:none; } } .landing { position:relative; display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; padding:calc(var(--topbar-h) + var(--pad)) var(--pad-x) var(--pad); background:var(--bg); } .landing:has(.project-masthead) { /* Align first masthead rule with Information / Index (topbar-h + 8px) */ padding-top:calc(var(--topbar-h) + 8px); } .copy { font-size:var(--text-sm); letter-spacing:0; line-height:1.45; font-variant-ligatures:none; font-feature-settings:"liga" 0, "calt" 0; } .copy p + p { margin-top:var(--copy-para-gap); } /* Detail-page masthead: rule → title → rule → (equal pad) meta|copy (equal pad) → rule → images (8px). Meta | copy share the same 2-col grid as the topbar (name | nav). */ .project-masthead { display:flex; flex-direction:column; width:100%; } .project-masthead__rule { flex:0 0 auto; height:0.5px; background:var(--text); pointer-events:none; } .project-masthead__title { margin:6px 0; font-size:var(--text-sm); font-weight:400; line-height:1.45; letter-spacing:1; } .project-masthead__body { /* Same air above and below the text, matching the reference frame */ padding:8px 0; } .project-masthead__grid { display:grid; grid-template-columns:1fr 1fr; column-gap:var(--col-gap); row-gap:24px; align-items:start; } .project-masthead__meta { font-size:var(--text-sm); line-height:1.45; letter-spacing:0; } .project-masthead__meta-block p { margin:0; } .project-masthead__meta-block + .project-masthead__meta-block { /* ~two lines of body leading, as in the reference */ margin-top:calc(var(--text-sm) * 1.45 * 2); } .project-masthead__copy.copy p + p { margin-top:var(--copy-para-gap); } .project-masthead__copy.copy > p:last-child { /* Extra blank line below the final paragraph */ margin-bottom:calc(var(--text-sm) * 1.45); } .landing-hero { flex:0 0 auto; width:100%; margin:2; } .landing-hero-stack { display:flex; flex-direction:column; gap:var(--hero-offset); width:100%; margin-top:56px; } .landing-hero-stack.landing-hero-stack--after-masthead, .project-masthead + .landing-hero-stack, .project-masthead + .triptych, .project-masthead + .nsnb-media-stack { margin-top:10px; } /* NSNB: photo then slideshow on mobile; slideshow then photo on desktop */ .nsnb-media-stack { display:flex; flex-direction:column; width:100%; } .nsnb-media-stack__lead { width:var(--hero-width); align-self:center; margin:0; } .nsnb-media-stack__lead img { display:block; width:100%; height:auto; cursor:zoom-in; } @media (min-width: 769px) { .nsnb-media-stack__lead { order:2; margin-top:var(--hero-offset); } .nsnb-media-stack .triptych { order:1; margin-top:0; } } .landing-hero-stack > .landing-hero:first-child { margin-top:0; } .landing-hero img { display:block; width:100%; height:auto; object-fit:contain; background:transparent; cursor:zoom-in; } .landing-hero--narrow { width:var(--below-width); align-self:center; } .landing-hero--sequence { position:relative; width:min(42%, 780px); align-self:center; } .landing-hero--sequence.landing-hero--narrow { width:min(52%, 780px); } .landing-hero--sequence img { cursor:default; } .landing-hero--sequence canvas { display:none; width:100%; height:auto; vertical-align:top; cursor:default; } .landing-hero--sequence.is-canvas-ready img { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; } .landing-hero--sequence.is-canvas-ready canvas { display:block; } .landing-hero-pair, .landing-hero-quad { display:grid; grid-template-columns:1fr 1fr; gap:var(--img-gap); width:100%; align-self:stretch; } /* Stacked group: desktop keeps hero spacing; mobile can tighten */ .landing-hero-group { display:flex; flex-direction:column; gap:var(--hero-offset); width:100%; align-self:stretch; } .landing-hero-group > .landing-hero { width:100%; margin:0; } /* Stacked quads share the skinny image gap, not the large hero offset */ .landing-hero-quads { display:flex; flex-direction:column; gap:var(--img-gap); width:100%; align-self:stretch; } .landing-hero-pair .landing-hero, .landing-hero-quad .landing-hero { width:100%; margin:0; } .landing-hero-pair img { width:100%; height:auto; } /* Shared frame so all four edges align in the 2×2 */ .landing-hero-quad .landing-hero { aspect-ratio:3 / 2; overflow:hidden; } .landing-hero-quad img { width:100%; height:100%; object-fit:cover; object-position:center center; } .triptych-rows { display:flex; flex-direction:column; gap:var(--img-gap); width:100%; } .triptych-rows .triptych { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--img-gap); height:auto; margin-top:0; overflow:visible; } .triptych-rows .triptych__track { display:contents; } .triptych-rows .triptych figure { height:auto; align-items:stretch; } .triptych-rows .triptych img { width:100%; height:auto; max-width:100%; max-height:none; object-position:center center; } .triptych { flex:0 0 auto; margin-top:var(--triptych-push); height:var(--triptych-h); flex-shrink:0; width:100%; } .triptych__track { display:contents; } .triptych figure { margin:0; height:100%; display:flex; align-items:flex-end; justify-content:center; min-height:0; } .triptych img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; object-position:center bottom; background:transparent; cursor:zoom-in; } @media (min-width: 769px) { .triptych { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--img-gap); } /* Full-bleed (minus page pad) side-by-side — height follows the images, no crop */ .landing > .triptych, .nsnb-media-stack > .triptych { height:auto; align-self:stretch; width:100%; } .landing > .triptych figure, .nsnb-media-stack > .triptych figure { height:auto; align-items:stretch; overflow:visible; } .landing > .triptych img, .nsnb-media-stack > .triptych img { width:100%; height:auto; max-width:100%; max-height:none; object-fit:contain; object-position:center center; } } @media (max-width: 768px) { :root { --hero-width:min(78%, 400px); --below-width:min(94%, 680px); } .landing-hero--sequence, .landing-hero--sequence.landing-hero--narrow { width:min(82%, 560px); } /* Mobile full-bleed heroes (COP gif, CLUTTER lead, etc.) */ .landing-hero--mobile-bleed, .landing-hero--mobile-bleed.landing-hero--narrow, .landing-hero--mobile-bleed.landing-hero--sequence { width:100%; align-self:stretch; } .nsnb-media-stack { display:flex; flex-direction:column; width:100%; margin-top:10px; } .nsnb-media-stack__lead { order:1; width:100%; align-self:stretch; margin:0; } .nsnb-media-stack .triptych { order:2; margin-top:var(--hero-offset); } .landing-hero-pair { width:100%; grid-template-columns:1fr; } /* FORCE / CLUTTER grouped shots stay 2-up with equal gaps on mobile */ .landing-hero-quad { width:100%; grid-template-columns:1fr 1fr; gap:var(--img-gap); } .landing-hero-group--mobile-tight { gap:var(--img-gap); } .project-masthead__grid { grid-template-columns:1fr; /* Two blank lines between meta and description when stacked */ row-gap:calc(var(--text-sm) * 1.45 * 3); } .triptych { display:block; position:relative; height:var(--mobile-slideshow-h); overflow:hidden; width:100%; } .triptych__track { display:flex; height:100%; width:100%; transition:transform var(--slide-duration) cubic-bezier(0.45, 0, 0.15, 1); will-change:transform; } .triptych figure { flex:0 0 100%; width:100%; height:100%; align-items:center; justify-content:center; } .triptych img { width:100%; height:100%; max-width:none; max-height:none; object-fit:contain; object-position:center center; } .triptych-rows .triptych { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--img-gap); height:auto; overflow:visible; position:static; } .triptych-rows .triptych__track { display:contents; transition:none; transform:none; will-change:auto; } .triptych-rows .triptych figure { flex:none; width:auto; height:auto; align-items:stretch; } .triptych-rows .triptych img { width:100%; height:auto; max-width:100%; max-height:none; } /* Artwork already sits on black — matching the stage kills the white letterbox that flashed between slides. */ .triptych--dark, .triptych--dark figure { background:#000; } } .below { position:relative; display:flex; justify-content:center; /* solid border = gap that cannot collapse or paint under the landing */ border-top:var(--hero-offset) solid var(--bg); padding:0 var(--pad-x) 14vh; background:var(--bg); } .below__stack { display:flex; flex-direction:column; align-items:center; gap:var(--hero-offset); width:100%; } .hero-shot { width:var(--hero-width); margin:0; } .hero-shot.hero-shot--full { width:100%; align-self:stretch; } .hero-shot.hero-shot--full img { background:transparent; } .hero-shot img { display:block; width:100%; height:auto; object-fit:contain; background:var(--bg); cursor:zoom-in; } .project-adjacent { position:fixed; inset:0; z-index:90; pointer-events:none; /* Inverts against whatever scrolls under it, same as the topbar */ mix-blend-mode:difference; } .project-adjacent a { position:fixed; top:50%; transform:translateY(-50%); display:flex; align-items:center; color:var(--blend-ink); text-decoration:none; pointer-events:auto; padding:16px var(--pad-x); -webkit-tap-highlight-color:transparent; user-select:none; } .project-adjacent a::before { content:""; display:block; width:13px; height:13px; background:currentColor; border-radius:50%; } .project-adjacent__prev { left:0; } .project-adjacent__next { right:0; } .project-adjacent__spacer { display:none; } .lightbox { position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:var(--pad-x); background:rgba(255, 255, 255, 0.72); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .lightbox.is-open { opacity:1; visibility:visible; pointer-events:auto; } .lightbox__img { display:block; max-width:100%; max-height:100%; width:auto; height:auto; margin:auto; object-fit:contain; object-position:center center; cursor:ew-resize; user-select:none; -webkit-user-select:none; }