ID: knm-art-gallery-hero Category: Arts & Culture / Gallery / Exhibition Hero Type: hero Create a single-file HTML+CSS+vanilla-JS hero section with the following exact specifications: ## Tech Stack * Deliverable filename: `knm-gallery-hero.html`. * Plain HTML + CSS + vanilla JavaScript. No frameworks, no build step. * Fonts: Google Fonts — `Inter` weight 500 only, and `Playfair Display` italic only. Load via: ```html ``` `Inter` 500 is used for all UI/nav/label text; `Playfair Display` italic 500 is used ONLY for the justified body paragraph (`.desc`). Do NOT use either font outside these two roles. * Global resets: `*{margin:0;padding:0;box-sizing:border-box;}`. `html,body{height:100%;background:#000;font-family:'Inter',sans-serif;overflow:hidden;}`. `img,video{display:block;}`. ## Canvas & Scaling This page uses a hybrid two-layer fullscreen structure — a true-fullscreen background video BEHIND a letterboxed, fixed-canvas foreground stage: * Background video layer: `.bg-video{position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;z-index:0;}` — fills the entire browser viewport edge-to-edge, independent of the stage below. * Foreground stage: `.stage-wrap{position:fixed;inset:0;width:100vw;height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:center;background:transparent;z-index:1;}` centers `.stage{position:relative;width:1420px;height:800px;flex:none;overflow:hidden;background:transparent;transform-origin:center center;z-index:1;}`. * Both `.stage-wrap` and `.stage` MUST have `background:transparent` — this is what allows the true-fullscreen background video to show through in the letterbox margins around the fixed 1420×800 content, instead of being hidden behind an opaque stage background. * Downscale/fit formula for the foreground stage only (the background video is never scaled by this — it always covers 100vw/100vh on its own), applied via JS on load and on resize: ```js var scale = Math.min(window.innerWidth / 1420, window.innerHeight / 800) * 1.02; stage.style.transform = 'scale(' + scale + ')'; ``` * Page backdrop: `#000` (only visible for an instant before the video paints). Stage background: transparent (see above). ## Design Tokens ```css --cream:#faf5f1; --ink:#090101; ``` ## Elements (all positions in px from stage top-left origin) 1. **Background video** — described under Canvas & Scaling. `

Art-gallery