/* ========================================================================== Critical North — stylesheet -------------------------------------------------------------------------- This file is organized top-to-bottom in sections. Each section has a heading comment so it's easy to find things. We favor clarity over cleverness. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Basic reset Small, sane defaults so the browser's built-in styling doesn't surprise us. -------------------------------------------------------------------------- */ /* `border-box` makes width/height include padding + border, which makes layout math much more predictable. Applied to everything. */ *, *::before, *::after { box-sizing: border-box; } /* Remove the default margin the browser puts around the whole page. */ body { margin: 0; } /* Never allow sideways scrolling: a safety net so no element can push the page wider than the screen (which breaks centering and lets mobile zoom out). */ html, body { overflow-x: hidden; } /* -------------------------------------------------------------------------- 2. Typography & page basics Two typefaces, both loaded in index.html's : - EB Garamond (serif) — the site-wide default: logo, titles, type labels. - Inter (sans-serif) — used only for the project description paragraphs (see 5d below), for a quiet, readable contrast to the serif headers. -------------------------------------------------------------------------- */ body { /* Height of the top header band. The logo is centered within this band, and the first project starts exactly where the band ends (see .content padding-top), so the logo appears centered in the whitespace above the first image. Change this one value to grow/shrink that whitespace. */ --header-height: 100px; /* Height of the bottom footer band — noticeably thinner than the header, just tall enough to hold the email comfortably. */ --footer-height: 64px; /* Shared "frosted glass" blur amount for both the header and footer bands (see sections 3 and 5f). Currently unused — the blur is switched off below, but the variable is kept so it's a one-line change to bring back. */ --band-blur: 6px; font-family: "EB Garamond", serif; /* Generous line-height keeps text feeling calm and readable. */ line-height: 1.6; /* Soft off-white background and a dark-but-not-black text color for a quiet, editorial feel. */ background-color: #fbfaf8; color: #1a1a1a; /* Smoother font rendering on WebKit/Firefox. */ -webkit-font-smoothing: antialiased; } /* -------------------------------------------------------------------------- 3. Fixed header — a frosted-glass band A full-width, fixed band pinned to the top of the page. The logo itself is both the blur surface AND the inverting element (see the .logo comment below) — they have to be the SAME element: a separate wrapper box with `backdrop-filter` creates its own isolated compositing group, which traps any child's `mix-blend-mode` so it can only blend against that wrapper's own (empty) paint instead of the real page. Putting both effects on one element avoids that trap. -------------------------------------------------------------------------- */ .site-header { /* Generates NO box of its own (`display: contents`) — same reasoning as the original pre-frosted-glass version: any real wrapper box here would trap the logo's blend-mode (see note above). */ display: contents; } .logo { /* The logo is now the fixed, full-bleed band itself. */ position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-height); display: flex; justify-content: center; /* center the text horizontally */ align-items: center; /* and vertically within the band */ pointer-events: none; /* never block clicks on the content beneath */ /* Frosted-glass blur — switched off for now. Uncomment to bring it back (no background tint, just the blur itself). */ /* backdrop-filter: blur(var(--band-blur)); */ /* -webkit-backdrop-filter: blur(var(--band-blur)); Safari needs the prefix */ /* Fluid size: shrinks on small screens so the fixed, full-width logo never grows wider than the viewport (which used to push the whole page sideways and break centering on mobile). Caps at 3.5rem, so desktop is unchanged. */ font-size: clamp(1.6rem, 8vw, 3.5rem); font-weight: 500; letter-spacing: 0.05em; /* a little tracking for an editorial look */ /* "Inverting" logo trick (like blau-international.com): The logo is pure white, but `mix-blend-mode: difference` blends it with whatever is BEHIND it — the actual page content, since this element (not some ancestor wrapper) is the fixed, blended one. Difference against white flips the backdrop's colours, so the text reads as its inverse everywhere, while the surrounding band independently blurs that same backdrop with no added tint. */ color: #ffffff; mix-blend-mode: difference; } /* -------------------------------------------------------------------------- 4. Main content column A centered, max-width column with lots of breathing room. This is where the project blocks will eventually live. -------------------------------------------------------------------------- */ .content { max-width: 1600px; /* wide, editorial column (blau-international feel) */ margin: 0 auto; /* center the column horizontally */ padding-left: 24px; /* side breathing room, also helps on narrow screens */ padding-right: 24px; /* Start the first project exactly where the header band ends, so the logo sits centered in the whitespace above the first image (no extra gap). */ padding-top: var(--header-height); /* Generous space at the bottom of the page. */ padding-bottom: 160px; } /* -------------------------------------------------------------------------- 4b. Mission statement A short intro paragraph sitting above the project list, in the same quiet editorial voice as the rest of the site. -------------------------------------------------------------------------- */ .mission-statement { max-width: 62ch; /* same comfortable reading line as descriptions */ /* Ordinary paragraph-break spacing between the two

tags. */ margin-bottom: 1em; /* Sans-serif (Inter), left-aligned — matches the project description paragraphs (see 5d) rather than reading like a centered serif headline. */ font-family: "Inter", sans-serif; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.6; } /* The last mission-statement paragraph gets the generous gap before the first project, matching the project-separator spacing (see 5e). */ .mission-statement:last-of-type { margin-bottom: clamp(80px, 12vh, 160px); } /* -------------------------------------------------------------------------- 5. Project block One project = one

. It contains the image frame, the prev/next arrows, and a description paragraph. A thin
separator sits between blocks. This is the template the data-driven render will reproduce. -------------------------------------------------------------------------- */ /* Space between one project block and the next. Generous, gallery-like pacing like the reference site. The clamp() keeps the gap proportional to the viewport height (min 80px, ideally 12vh, max 160px). */ .project { /* No bottom margin here — the whitespace now lives on the separator below, so the divider line sits centered in equal air above and below (instead of being glued to the top edge of the next image). */ margin-bottom: 0; } /* ---- 5a. The fixed-aspect image frame ------------------------------------- The frame keeps a constant shape no matter what images go inside it, so the page layout never shifts as the carousel changes images. --------------------------------------------------------------------------- */ .frame { /* The frame shape is set PER PROJECT so images are never cropped: each block gets its own ratio (via an inline `style="--frame-aspect: …"`, coming from the project's `aspect` field in projects.js). This value here is just a fallback if a block doesn't specify one. e.g. 3 / 2, 16 / 9, 4 / 3, 1 / 1. */ --frame-aspect: 3 / 2; position: relative; /* anchor for the absolutely-positioned images + overlays */ width: 100%; aspect-ratio: var(--frame-aspect); overflow: hidden; /* clip anything outside the frame */ /* Off-white to match the page, so any letterbox bars (when an image's shape doesn't match the project's frame) blend in instead of showing as a box. */ background-color: #fbfaf8; } /* Each image fills the whole frame and stacks on top of the others. */ .frame__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* IMAGE FIT TOGGLE: `contain` = show the WHOLE image, never cropped (the default now — each project's frame ratio is chosen to match its images). `cover` = crop to fill the frame edge-to-edge (no letterboxing). Swap the value on the next line to try the other look. */ /* object-fit: contain; */ object-fit: cover; /* Only the active image is visible. The opacity/transition here also gives us the subtle fade for free once the carousel starts toggling `is-active`. */ opacity: 0; transition: opacity 0.6s ease; } .frame__img.is-active { opacity: 1; } /* ---- 5b. Arrows row (directly under the image) ----------------------------- Kept right under the frame, right-aligned — still reads as part of the image (like the controls on a physical slide viewer) rather than being grouped down with the title/description text. --------------------------------------------------------------------------- */ .project__arrows-row { display: flex; justify-content: flex-end; margin-top: 12px; } .carousel-arrows { display: flex; gap: 8px; } .arrow { /* Stripped-down button: no border, no default browser chrome. */ background: none; border: none; color: #4a463d; font-family: inherit; /* use EB Garamond like everything else */ font-size: 1.3rem; line-height: 1; width: 40px; height: 40px; cursor: pointer; opacity: 0.7; transition: opacity 0.2s ease; } .arrow:hover { opacity: 1; /* subtle emphasis on hover, no border/box */ } /* ---- 5c. Title + type (below the arrows) ---------------------------------- A small, quiet caption-style title — like a photo credit line in a print magazine — rather than a large headline competing with the fixed logo above. The type sits directly under it as a smaller italic subhead. --------------------------------------------------------------------------- */ .project__head { margin-top: 20px; /* space between the arrows row and the title */ } .project__title { /* Small and quiet on purpose — this is a caption, not a headline. Still fluid so it scales slightly on very narrow screens. */ font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 500; letter-spacing: 0.01em; line-height: 1.2; white-space: nowrap; /* never wrap to a second line */ } .project__type { margin-top: 4px; /* tight against the title just above it */ font-size: clamp(1rem, 1.6vw, 1.35rem); font-weight: 400; font-style: italic; white-space: nowrap; /* keep the label on one line */ } /* ---- 5d. Description paragraph --------------------------------------------- */ .project__description { margin-top: 28px; /* Sans-serif here (Inter), unlike the rest of the site — a quiet contrast to the EB Garamond headers, and easier to read at length in body-text sizes. */ font-family: "Inter", sans-serif; font-size: clamp(1.05rem, 1.3vw, 1.25rem); /* color: #333; */ max-width: 62ch; /* keep the reading line comfortable even in the wide column */ } /* ---- 5e. Separator between projects --------------------------------------- */ .project-separator { border: none; /* remove the default 3D border */ border-top: 1px solid #e0dcd3; /* a single thin hairline */ /* Equal, generous space above and below the line so it's clearly visible in its own band of whitespace between projects. */ margin: clamp(80px, 12vh, 160px) 0; } /* ---- 5f. Contact footer — a thinner matching frosted band ----------------- Same reasoning as the header (section 3): the email link itself is both the blur surface and the inverting element, since a separate backdrop-filter wrapper would trap the child's mix-blend-mode against an empty paint. --------------------------------------------------------------------------- */ .site-footer { display: contents; /* generates no box — see .site-header note in section 3 */ } .site-footer a { /* The link is now the fixed, full-bleed footer band itself. */ position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; height: var(--footer-height); display: flex; justify-content: center; /* center the email horizontally */ align-items: center; /* and vertically within the band */ /* Frosted-glass blur — switched off for now. Uncomment to bring it back (no background tint, just the blur itself). */ /* backdrop-filter: blur(var(--band-blur)); */ /* -webkit-backdrop-filter: blur(var(--band-blur)); */ font-size: clamp(1.15rem, 1.6vw, 1.5rem); /* between the original and small sizes */ letter-spacing: 0.02em; white-space: nowrap; text-decoration: none; /* Same inverting trick as the logo: white text + difference blend against the real page content directly behind this element. */ color: #ffffff; mix-blend-mode: difference; } .site-footer a:hover { text-decoration: underline; }