@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Inter:wght@400;500&display=swap'); :root { --brass: #9C7A45; --brass-light: #C9A876; --near-black: #221E1B; --stone: #EDE7DD; --stone-dark: #DDD4C4; --ink: #2A2723; --line: rgba(34,30,27,0.15); --line-light: rgba(237,231,221,0.15); /* Type system (2026-09-15) — 5 roles: Heading . Kicker . Body . Caption . Label */ --fs-body: 15px; --fs-caption: 12px; --fs-kicker: 11px; --ls-kicker: 0.16em; --fw-kicker: 500; --fw-heading: 300; --fs-h-page: clamp(24px, 5vw, 36px); --fs-h-section: clamp(22px, 3vw, 34px); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Light is the default surface. The fade between pages is the background (body goes to opacity 0), so setting it light means the transition no longer flashes dark. Dark mode restores a dark via :has() below, keeping its own fade dark. */ /* Reserve the scrollbar gutter permanently so toggling body overflow (splash overlay open/dismiss) never changes the viewport width — otherwise the fixed, centred overlay lurches sideways as the scrollbar renders back in on dismiss. */ html { background: var(--stone); scrollbar-gutter: stable; } body { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; color: var(--ink); background: var(--stone); font-size: var(--fs-body); line-height: 1.7; opacity: 0; } /* Line-wrapping standard (2026-09-17): balance headings so a single word never drops alone onto the last line; tidy paragraph rag so body copy avoids a lone trailing word. Progressive — older browsers simply ignore it. */ h1, h2, h3, .f-heading, .sc-title, .wb-sub, .fp-head, .next-tagline { text-wrap: balance; } p, .f-body, .sc-context, .proj-intro, .essay-lede, .home-intro p { text-wrap: pretty; } /* Dark theme (opt-in via the logo-mark toggle) — restore the dark surround so footers/margins and the transition fade stay dark. The dark *visuals* (heroes, header, nav) are the unclassed base rules further down; this just re-darkens the page surface that the light default now owns. */ body.theme-dark { background: var(--near-black); color: var(--stone); } html:has(body.theme-dark) { background: var(--near-black); } /* Page transition — fade in on load, fade out before navigating (transitions.js) */ body.page-ready { opacity: 1; transition: opacity 0.5s ease; } body.fade-out { opacity: 0 !important; transition: opacity 0.4s ease; } a { color: inherit; text-decoration: none; } .wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; } .sans { font-family: 'Inter', Helvetica, Arial, sans-serif; } /* Header — dark, backgroundless ghost nav; same proportions/position as before, just recoloured so it reads as part of the dark passage above the fold rather than a separate bar */ header.site { padding: 24px 0; background: var(--near-black); color: var(--stone); border-bottom: none; } header.site .wrap { display: flex; justify-content: space-between; align-items: center; } .logo { display: flex; align-items: center; gap: 10px; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; font-family: 'Inter', sans-serif; font-weight: 500; } .logo svg { width: 24px; height: 24px; } header.site .logo svg path { stroke: var(--brass-light); } .logo-mark { display: flex; align-items: center; background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: inherit; } nav.primary ul { display: flex; gap: 30px; list-style: none; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 400; } nav.primary a { opacity: 0.6; } nav.primary a:hover, nav.primary a.active { opacity: 1; color: var(--brass); } header.site nav.primary a:hover, header.site nav.primary a.active { color: var(--brass-light); } /* Hero — full bleed near-black */ .hero { background: var(--near-black); color: var(--stone); padding: 70px 0 130px; text-align: center; } .hero .kicker { font-family: 'Inter', sans-serif; font-size: var(--fs-kicker); font-weight: var(--fw-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--brass-light); margin-bottom: 26px; } .hero h1 { font-size: clamp(30px, 6vw, 46px); font-weight: 300; line-height: 1.3; max-width: 720px; margin: 0 auto; letter-spacing: 0.005em; } /* Sub-page heroes (Studies / Approach / Studio) — smaller than the home statement, still fluid */ .hero:not(.home-hero):not(.essay-hero) h1 { font-size: var(--fs-h-page); } .hero p.italic { font-style: italic; font-size: 15px; line-height: 1.7; color: #C9C1B4; max-width: 560px; margin: 0 auto; } /* Project grid */ .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; padding: 40px 0 100px; } /* Quiet forward link — legacy style, still used where the tagline/button treatment hasn't been applied yet */ .forward-link { text-align: center; padding: 70px 0 110px; font-style: italic; font-size: 17px; } .forward-link a { color: var(--brass-light); border-bottom: 1px solid var(--brass-light); padding-bottom: 3px; } .forward-link a:hover { color: var(--brass); } /* Next-page link — tagline + pulsing button, matches the Splash entry treatment. Reusable across pages. */ .next-block { display: flex; flex-direction: column-reverse; align-items: center; text-align: center; padding: 20px 0 90px; } .next-tagline { font-style: italic; font-size: 17px; letter-spacing: 0.01em; color: #8a8476; margin: 16px 0 0; transition: color 0.2s ease; } .next-block:hover .next-tagline { color: var(--brass-light); } .next-button { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--brass-light); animation: splash-pulse 2.4s ease-in-out infinite; } .next-button svg { width: 17px; height: 17px; } /* Studio — principals + contact */ .studio-block { padding: 30px 0 110px; text-align: center; } .studio-block .principals-note { font-style: italic; color: #8a8476; font-size: 14px; max-width: 480px; margin: 0 auto 50px; } .studio-block .email { font-family: 'Inter', sans-serif; font-size: 15px; letter-spacing: 0.04em; color: var(--brass); } footer.site { border-top: 1px solid var(--line-light); padding: 44px 0; font-family: 'Inter', sans-serif; font-size: 12px; color: #8a8476; text-align: center; } .mockup-flag { background: var(--near-black); border-bottom: 1px solid var(--brass); color: var(--brass-light); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; padding: 9px 16px; text-align: center; font-family: 'Inter', sans-serif; font-weight: 500; } /* Splash type styles — shared by the home splash overlay (.splash-overlay) */ .splash-mark svg { width: 54px; height: 54px; margin-bottom: 30px; } .splash-word { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-size: clamp(16px, 4vw, 34px); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; white-space: nowrap; } .splash-tagline { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-style: italic; font-size: clamp(13px, 2vw, 17px); letter-spacing: 0.01em; color: #8a8476; max-width: 380px; margin-bottom: 54px; } .splash-button { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--brass); animation: splash-pulse 2.4s ease-in-out infinite; } .splash-button svg { width: 17px; height: 17px; } @keyframes splash-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 118, 0.35); } 50% { box-shadow: 0 0 0 11px rgba(201, 168, 118, 0); } } /* Splash overlay — the opening state on the canonical home page (index.html). Fixed, opaque, over the full home content (which stays in the DOM for crawlers). Reuses the .splash-* type styles. Dismissed by inline JS with the site's 400ms fade. */ .splash-overlay { position: fixed; inset: 0; z-index: 1000; background: var(--stone); color: var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 24px 100px; cursor: pointer; transition: opacity 1.9s ease; } .splash-overlay.dismissed { opacity: 0; pointer-events: none; } body.splash-open { overflow: hidden; } /* Home intro — the §8 answer paragraphs beneath the hero, on the light stone band. */ .home-intro { text-align: center; padding: 64px 0 24px; } .home-intro p { max-width: 620px; margin: 0 auto 20px; font-size: var(--fs-body); line-height: 1.75; color: var(--ink); } .home-intro p:last-child { margin-bottom: 0; } body.theme-dark .home-intro p { color: var(--stone); } /* Study essay template */ .essay-hero { padding: 80px 0 60px; } .essay-hero h1 { font-size: var(--fs-h-page); margin: 14px auto 24px; } .essay-lede { max-width: 560px; margin: 0 auto; } .essay-frame { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--stone-dark), #C9BBA0 55%, var(--brass-light)); position: relative; margin-top: 50px; } /* When the study hero holds a real image, don't force 16/9 — show it contained at a capped height so portrait shots (e.g. the stair) aren't cropped or huge. */ .essay-frame:has(> img) { aspect-ratio: auto; background: transparent; text-align: center; } .essay-frame > img { display: inline-block; width: auto; max-width: 100%; max-height: 78vh; vertical-align: top; } .essay-frame .label { position: absolute; bottom: 16px; left: 16px; font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(34,30,27,0.75); color: var(--stone); padding: 5px 10px; } .essay-body { max-width: 640px; margin: 50px auto 0; } .essay-body p { color: #C9C1B4; margin-bottom: 26px; } .essay-body p:last-child { margin-bottom: 0; } .essay-facts { display: grid; grid-template-columns: max-content 1fr; column-gap: 34px; row-gap: 15px; max-width: 560px; padding: 44px 4px; margin: 50px auto 0; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); text-align: left; align-items: baseline; } .essay-facts > div { display: contents; } .essay-facts .label { margin-bottom: 0; } .essay-facts .label { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brass); margin-bottom: 6px; } .essay-credits { font-size: var(--fs-caption); font-family: 'Cormorant Garamond', Georgia, serif; color: #8a8476; font-style: italic; text-align: center; padding-top: 34px; } /* Theme transition — smooth fade between dark and light when the logo-mark toggle fires. Scoped to .theme-anim so it only animates on an actual toggle, not on initial page load. */ body.theme-anim, body.theme-anim header.site, body.theme-anim .hero, body.theme-anim nav.primary a, body.theme-anim .hero .kicker, body.theme-anim .hero p.italic, body.theme-anim .essay-body p, body.theme-anim .essay-facts, body.theme-anim .next-tagline, body.theme-anim .next-button, body.theme-anim footer.site, body.theme-anim .logo svg path { transition: background-color 0.5s ease, color 0.5s ease, border-color 0.5s ease, stroke 0.5s ease; } /* Light theme — toggled via the logo-mark icon on any non-Splash page (transitions.js), light background all the way through, no dark hero band */ body.theme-light { background: var(--stone); color: var(--ink); } body.theme-light header.site { background: var(--stone); color: var(--ink); border-bottom: 1px solid var(--line); } body.theme-light header.site .logo svg path { stroke: var(--brass); } body.theme-light header.site nav.primary a:hover, body.theme-light header.site nav.primary a.active { color: var(--brass); } body.theme-light .hero { background: var(--stone); color: var(--ink); } body.theme-light .hero .kicker { color: var(--brass); } body.theme-light .hero p.italic { color: #6b6557; } body.theme-light .forward-link a { color: var(--brass); } body.theme-light .next-tagline { color: #8a8476; } body.theme-light .next-block:hover .next-tagline { color: var(--brass); } body.theme-light .next-button { color: var(--brass); } body.theme-light .essay-body p { color: #4a453d; } body.theme-light .essay-facts { border-top-color: var(--line); border-bottom-color: var(--line); } body.theme-light footer.site { color: #6b6557; border-top: 1px solid var(--line); } /* ============================================================ Responsive / mobile optimisation (added 2026-08-20, CF) Burger injected by transitions.js; toggles body.nav-open. Bars use currentColor so they follow the dark/light theme. Breakpoints: 900px (tablet), 560px (phone). ============================================================ */ /* Finer, smaller toggle — 3 hairline rules in a compact 22px square */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 22px; height: 22px; padding: 4px 0; background: none; border: none; cursor: pointer; flex-shrink: 0; color: var(--brass-light); } .nav-toggle span { display: block; width: 100%; height: 1px; background: currentColor; transition: transform 0.25s ease, opacity 0.25s ease; } body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); } body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; } body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } body.theme-light .nav-toggle { color: var(--brass); } @media (max-width: 900px) { /* Nav → burger + animated stacked panel (max-height slides open, pushing the page down) */ .nav-toggle { display: flex; } header.site .wrap { flex-wrap: wrap; } nav.primary { order: 3; width: 100%; max-height: 0; overflow: hidden; transition: max-height 0.7s ease; } body.nav-open nav.primary { max-height: 60vh; } nav.primary ul { flex-direction: column; align-items: center; gap: 0; width: 100%; padding-top: 16px; } nav.primary li { width: 100%; text-align: center; } nav.primary a { display: block; padding: 14px 0; opacity: 0.85; } /* Studies grid → single column on tablet already reads well at this width */ .grid { gap: 32px; } } @media (max-width: 560px) { .wrap { padding: 0 28px; } /* Headlines carry a touch more weight on small screens (desktop stays 300) */ .hero h1, .essay-hero h1 { font-weight: 400; } /* Single-column layouts */ .grid { grid-template-columns: 1fr; gap: 28px; } .essay-facts { column-gap: 20px; row-gap: 11px; padding: 30px 4px; } /* Ease the tall dark hero padding on phones */ .hero { padding: 50px 0 80px; } } /* ===== Layout pass (2026-08-20, CF) — desktop structure + Studio content ===== */ /* Wordmark → Cormorant Garamond (matches Splash), the canonical headline face. Weight 400 (not Splash's 300) for legibility at nav size; only 300/400 imported. */ .logo { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; font-size: 15px; letter-spacing: 0.14em; } @media (max-width: 900px) { .logo { font-size: 14px; letter-spacing: 0.11em; } } @media (max-width: 560px) { .logo { font-size: 13px; letter-spacing: 0.09em; } } /* Justify the study lede + essay body to match the home blurb test */ .essay-lede { text-align: justify; text-align-last: center; } .essay-body p { text-align: justify; } /* Inset pages (Studies / Study / Approach) — narrower column so text + imagery share one margin */ body.page-inset .wrap { max-width: 900px; } /* ...but keep the header, hero and footer full-width (as per Home) — only the content column is inset, so the nav bar sets out the same on every page. */ body.page-inset header.site .wrap, body.page-inset .hero .wrap, body.page-inset footer.site .wrap { max-width: 1180px; } /* mobile gutter is unified at 28px via the base .wrap rule above */ /* Studio — simplified contact + minimal lead-capture */ /* Hero tagline used as the contact email link on the Studio page */ .hero p.italic a { color: var(--brass-light); } .hero p.italic a:hover { color: var(--brass); } body.theme-light .hero p.italic a { color: var(--brass); } /* Enquire — form under the heading; "or leave us a message" + email/number below it (CF 2026-09-16) */ .enquire-contact { padding-top: 6px; } .enquire-contact .contact-lead { margin-top: 6px; } .contact-form textarea { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; padding: 8px 4px; background: transparent; border: none; border-bottom: 1px solid var(--line-light); color: inherit; text-align: center; resize: vertical; min-height: 84px; } .contact-form textarea::placeholder { color: #8a8476; font-style: italic; } body.theme-light .contact-form textarea { border-color: var(--line); } .contact-intro { font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-body); margin-top: 56px; margin-bottom: 12px; } .contact-direct { margin-top: 0; display: flex; flex-direction: column; gap: 2px; } .contact-direct a { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 19px; color: var(--brass); } .contact-direct a:hover { color: var(--brass-light); } .contact-direct .ph-num { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 19px; color: #8a8476; } .contact-lead { max-width: 420px; margin: 28px auto 0; text-align: center; } .contact-lead .lead-line { font-size: 20px; margin-bottom: 28px; } .contact-form { display: grid; gap: 24px; } .contact-form input { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; padding: 8px 4px; background: transparent; border: none; border-bottom: 1px solid var(--line-light); color: inherit; text-align: center; } .contact-form input::placeholder { color: #8a8476; font-style: italic; } .contact-form button { font-family: 'Inter', sans-serif; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 13px 20px; background: var(--brass); color: var(--near-black); border: none; cursor: pointer; margin-top: 4px; } .contact-form button:hover { background: var(--brass-light); } .contact-lead .form-note { font-family: 'Inter', sans-serif; font-size: 11px; font-style: italic; color: #8a8476; margin-top: 14px; } body.theme-light .contact-form input { border-color: var(--line); } /* Studio — principals / bios (portrait placeholder + text, two-up stacked) */ .principals { padding: 30px 0 76px; max-width: 720px; margin: 0 auto; } .principal-bio { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; padding: 44px 0; border-bottom: 1px solid var(--line-light); } .principal-bio:last-child { border-bottom: none; } .principal-portrait { aspect-ratio: 4/5; background: linear-gradient(135deg, var(--stone-dark), #C9BBA0 55%, var(--brass-light)); position: relative; } .principal-portrait .label { position: absolute; bottom: 14px; left: 14px; font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(34,30,27,0.75); color: var(--stone); padding: 5px 10px; } .principal-text .role { font-family: 'Inter', sans-serif; font-size: var(--fs-kicker); font-weight: var(--fw-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--brass); margin-bottom: 14px; } .principal-text .name { font-weight: var(--fw-heading); font-size: var(--fs-h-section); line-height: 1.1; margin: 0 0 6px; } .principal-text .bio p { color: #C9C1B4; } body.theme-light .principal-text .bio p { color: #4a453d; } @media (max-width: 560px) { .principal-bio { grid-template-columns: 1fr; gap: 22px; padding: 34px 0; } .principal-portrait { max-width: 220px; } } /* ===== Index showcase — single-column alternating "floating" heroes (2026-08-24, CF) Shared by Projects and Studies indexes. Each project/study stands alone with space; hero images alternate left/right and float, irregular sizes. Projects = image + title; Studies add a short line of context. ===== */ .showcase { padding: 26px 0 80px; } /* Top-aligned so the caption sits level with the top of the image; caption is a limited width and packed toward the image so text hugs it on both sides. */ .showcase-item { display: flex; align-items: flex-start; gap: 44px; margin: 13vh 0; } .showcase-item:first-child { margin-top: 4vh; } .showcase-item:nth-child(odd) { flex-direction: row; justify-content: flex-start; } .showcase-item:nth-child(even) { flex-direction: row-reverse; justify-content: flex-start; } .showcase-media { flex: 0 0 auto; position: relative; } .showcase-media .frame { background: linear-gradient(135deg, var(--stone-dark), #C9BBA0 55%, var(--brass-light)); position: relative; transition: filter 0.35s ease; } .showcase-item:hover .showcase-media .frame { filter: brightness(1.05); } /* Irregular sizing for variety */ /* Uniform index cards (CF 2026-09-15): same width + ratio both sides so left/right match */ .showcase-media.size-lg, .showcase-media.size-md, .showcase-media.size-sm { width: 54%; } .showcase-media.size-lg .frame, .showcase-media.size-md .frame, .showcase-media.size-sm .frame { aspect-ratio: 3/2; } /* Small italic caption beneath an image — ONLY for AI-enhanced / AI-generated imagery. Real photography and in-house drawings carry no label. */ .img-note { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-caption); color: #8a8476; margin-top: 10px; display: block; } .showcase-item:nth-child(even) .img-note { text-align: right; } .showcase-caption { flex: 0 1 360px; padding-top: 2px; } .showcase-item:nth-child(odd) .showcase-caption { text-align: left; } .showcase-item:nth-child(even) .showcase-caption { text-align: right; } .sc-kicker { font-family: 'Inter', sans-serif; font-size: var(--fs-kicker); font-weight: var(--fw-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--brass); margin-bottom: 12px; } .sc-title { font-weight: 300; font-size: var(--fs-h-section); line-height: 1.15; letter-spacing: 0.005em; } .sc-context { margin-top: 16px; color: #C9C1B4; } body.theme-light .sc-context { color: #4a453d; } /* Studies 'how we work' kicker styling (the layout itself is the grid ~line 592; the old centred-values .approach-intro rule was removed — it zeroed the gutter). */ .approach-intro .ai-kicker { font-family: 'Inter', sans-serif; font-size: var(--fs-kicker); font-weight: var(--fw-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--brass); margin-bottom: 22px; } .ai-lines { max-width: 640px; margin: 0 auto; } .ai-lines p { font-size: var(--fs-body); line-height: 1.7; color: #C9C1B4; margin: 0 0 12px; } .ai-lines p:last-child { margin-bottom: 0; } .ai-lines .n { color: var(--stone); font-style: italic; } body.theme-light .ai-lines p { color: #4a453d; } body.theme-light .ai-lines .n { color: var(--ink); } @media (max-width: 760px) { .showcase-item, .showcase-item:nth-child(odd), .showcase-item:nth-child(even) { flex-direction: column-reverse; gap: 14px; margin: 7vh 0; align-items: stretch; justify-content: flex-start; } .showcase-media, .showcase-media.size-lg, .showcase-media.size-md, .showcase-media.size-sm { width: 100%; } .showcase-caption, .showcase-item:nth-child(odd) .showcase-caption, .showcase-item:nth-child(even) .showcase-caption { flex: 1 1 auto; text-align: left; } .showcase-item:nth-child(even) .img-note { text-align: left; } .ai-lines p { font-size: 16px; } } /* ===== Real images inside placeholder frames (indexes + galleries) ===== */ .frame { overflow: hidden; } .frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* ===== Project page (2026-08-24, CF) ===== */ .project-lead { margin: 6px 0 38px; } .project-lead .frame { position: relative; aspect-ratio: 16/9; background: var(--stone-dark); } .project-overview { max-width: 640px; margin: 0 auto 10px; } .project-overview p { color: #C9C1B4; margin-bottom: 18px; text-align: justify; text-align-last: left; } body.theme-light .project-overview p { color: #4a453d; } .project-gallery { padding: 16px 0 24px; } .pg-group { margin: 40px 0; } .pg-label { font-family: 'Inter', sans-serif; font-size: var(--fs-kicker); font-weight: var(--fw-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--brass); margin-bottom: 16px; } .pg-label span { color: #8a8476; text-transform: none; letter-spacing: 0.02em; font-style: italic; } .pg-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .g-item { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--stone-dark); display: block; } .g-item.wide { grid-column: 1 / -1; aspect-ratio: 3/2; } .g-item > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Click-to-cross-fade lighting reveal (walnut joinery — lights off/on) */ .g-toggle { padding: 0; border: none; cursor: pointer; margin: 0; } .g-toggle > img.b { opacity: 0; transition: opacity 0.6s ease; z-index: 1; } .g-toggle.lit > img.b { opacity: 1; } .g-toggle .g-hint { position: absolute; bottom: 12px; right: 12px; z-index: 2; font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(34,30,27,0.72); color: var(--stone); padding: 5px 9px; transition: opacity 0.35s ease; } .g-toggle.lit .g-hint { opacity: 0; } /* Studies from this project */ .from-project { padding: 44px 0 10px; border-top: 1px solid var(--line-light); margin-top: 20px; } body.theme-light .from-project { border-top-color: var(--line); } .from-project .fp-head { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); margin-bottom: 20px; text-align: center; } .fp-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; max-width: 720px; margin: 0 auto; } .fp-card { display: block; padding: 20px 22px; border: 1px solid var(--line-light); } body.theme-light .fp-card { border-color: var(--line); } .fp-card .fp-kicker { font-family: 'Inter', sans-serif; font-size: var(--fs-kicker); font-weight: var(--fw-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--brass); } .fp-card h4 { font-weight: var(--fw-heading); font-size: 19px; margin: 8px 0 0; } .fp-card:hover h4 { color: var(--brass); } @media (max-width: 640px) { .pg-row { grid-template-columns: 1fr; } .g-item, .g-item.wide { aspect-ratio: 4/3; grid-column: auto; } } /* ===== Portfolio + Design Studies pass (2026-08-21, CF — RevA direction) ===== Studies reframed as an image-led portfolio; the process/values narrative re-homed to Approach as Design Studies. */ /* Approach Design Studies — alternating image/text, one per demonstrated value */ .design-studies { padding: 20px 0 70px; } .design-study { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; padding: 40px 0; border-bottom: 1px solid var(--line-light); } .design-study:last-of-type { border-bottom: none; } .design-study.reverse .ds-frame { order: 2; } .ds-frame { display: block; position: relative; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--stone-dark), #C9BBA0 55%, var(--brass-light)); transition: filter 0.3s ease; } .ds-frame:hover { filter: brightness(1.05); } .ds-frame .label { position: absolute; bottom: 14px; left: 14px; font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(34,30,27,0.75); color: var(--stone); padding: 5px 10px; } .ds-tie { font-family: 'Inter', sans-serif; font-size: var(--fs-kicker); font-weight: var(--fw-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--brass); } .ds-text h3 { font-size: 24px; font-weight: var(--fw-heading); margin: 10px 0 14px; } .ds-text p { color: #C9C1B4; margin-bottom: 18px; } .ds-link { font-style: italic; font-size: 16px; color: var(--brass-light); border-bottom: 1px solid var(--brass-light); padding-bottom: 2px; } .ds-link:hover { color: var(--brass); } /* Light theme — Design Studies + portfolio */ body.theme-light .design-study { border-bottom-color: var(--line); } body.theme-light .ds-text p { color: #4a453d; } body.theme-light .ds-link { color: var(--brass); border-bottom-color: var(--brass); } @media (max-width: 720px) { .design-study, .design-study.reverse { grid-template-columns: 1fr; gap: 24px; padding: 32px 0; } .design-study.reverse .ds-frame { order: 0; } } /* ===== Project page — editorial, image-led rebuild (2026-08-24 rev, CF) Images given room and mostly on their own; brief text woven between; AOD-style rhythm (less exaggerated). No labels on real photography. ===== */ .proj-intro { max-width: 620px; margin: 3vh auto 1vh; } .proj-intro p { color: #C9C1B4; font-size: var(--fs-body); line-height: 1.75; text-align: center; } body.theme-light .proj-intro p { color: #4a453d; } .proj-flow { padding: 1vh 0; } .proj-section { margin: 10vh 0; } /* Consistent buffer above each section heading — matches the .feature rhythm (12vh), while the 4vh below keeps the heading close to its own images. */ .proj-note { max-width: 600px; margin: 12vh auto 4vh; text-align: center; } .proj-note .pn-kicker { font-family: 'Inter', sans-serif; font-size: var(--fs-kicker); font-weight: var(--fw-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--brass); margin-bottom: 14px; } .proj-note h3 { font-weight: 300; font-size: var(--fs-h-section); line-height: 1.2; margin-bottom: 16px; } .proj-note p { color: #C9C1B4; line-height: 1.75; } body.theme-light .proj-note p { color: #4a453d; } /* Figures — images stand alone; portrait shots capped by height, landscapes full */ .proj-figure { text-align: center; margin: 4vh 0; } .proj-figure img { display: inline-block; max-width: 100%; max-height: 86vh; width: auto; } .proj-figure.full img { width: 100%; height: auto; max-height: none; } .proj-cap { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-caption); color: #8a8476; margin-top: 10px; } /* Two-up cluster (natural heights, sit together) */ .proj-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 4vh 0; align-items: start; } .proj-pair img { width: 100%; height: auto; display: block; } .proj-pair.crop img { aspect-ratio: 3/2; object-fit: cover; } /* Lighting reveal — three joinery tiles given room */ .joinery-reveal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 4vh 0; } .joinery-reveal .g-toggle { aspect-ratio: 4/5; } @media (max-width: 860px) { .joinery-reveal { grid-template-columns: 1fr 1fr; } .joinery-reveal .g-toggle { aspect-ratio: 4/3; } } @media (max-width: 560px) { .joinery-reveal { grid-template-columns: 1fr; } .proj-pair { grid-template-columns: 1fr; } .joinery-reveal .g-toggle { aspect-ratio: 4/3; } } /* ===== Rev 2026-08-24b: heading-above-kicker; Studies approach 2-col; project section styles ===== */ /* Heading above kicker (generally) — reorder without touching markup */ .showcase-caption { display: flex; flex-direction: column; } .showcase-caption .sc-title { order: 1; } .showcase-caption .sc-kicker { order: 2; margin: 12px 0 0; } .showcase-caption .sc-context { order: 3; } .proj-note { display: flex; flex-direction: column; } .proj-note h3 { order: 1; margin-bottom: 12px; } .proj-note .pn-kicker { order: 2; margin: 0 0 14px; } .proj-note p { order: 3; } .fp-card { display: flex; flex-direction: column; } .fp-card h4 { order: 1; margin: 0; } .fp-card .fp-kicker { order: 2; margin-top: 6px; } /* Studies 'how we think' — the lines at the left margin + a demonstrative design sketch on the right (same spirit as the Home hero sketch) */ .approach-intro { display: grid; grid-template-columns: 0.85fr 1fr; gap: 56px; align-items: center; text-align: left; margin-bottom: 9vh; padding-top: 2vh; padding-bottom: 2vh; } .ai-left .ai-kicker { text-align: left; margin-bottom: 18px; } .ai-left .ai-lines { max-width: none; margin: 0; } .ai-left .ai-lines p { text-align: left; } .ai-sketch { text-align: center; } .ai-sketch svg { width: 100%; max-width: 320px; height: auto; opacity: 0.65; } .ai-sketch .note { display: block; font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8476; margin-top: 14px; } @media (max-width: 760px) { .approach-intro { grid-template-columns: 1fr; gap: 22px; } } /* Project section styles — alternate asymmetric-left (1) and centred (2) */ .proj-section.style-1 .proj-note { text-align: left; margin: 0 0 3.5vh; max-width: 480px; } .proj-section.style-1 .proj-figure { text-align: left; } .proj-section.style-1 .proj-figure img { max-width: 66%; } .proj-section.style-1 .proj-pair { max-width: 66%; margin-left: 0; margin-right: auto; } .proj-section.style-2 .proj-note { text-align: center; margin: 0 auto 4vh; } @media (max-width: 760px) { .proj-section.style-1 .proj-figure img, .proj-section.style-1 .proj-pair { max-width: 100%; } } /* ===== Feature block system (2026-08-24c, CF) — the workhorse module: big image one side, text the other, top-aligned; alternates L/R down the page. ===== */ .feature { display: flex; gap: 60px; align-items: flex-start; margin: 12vh 0; } .feature.right { flex-direction: row-reverse; } .feature .f-media { flex: 0 0 56%; position: relative; } .feature .f-media .ph { position: relative; overflow: hidden; background: var(--stone-dark); display: block; aspect-ratio: 4/5; } .feature .f-media .ph.land { aspect-ratio: 3/2; } .feature .f-media .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .f-text { flex: 0 1 360px; padding-top: 6px; display: flex; flex-direction: column; } .feature.right .f-text { text-align: right; } .f-heading { order: 1; font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 300; font-size: var(--fs-h-section); line-height: 1.16; letter-spacing: 0.005em; } .f-kicker { order: 2; font-family: 'Inter', sans-serif; font-size: var(--fs-kicker); font-weight: var(--fw-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--brass); margin-top: 12px; } .f-body { order: 3; font-family: 'Cormorant Garamond', Georgia, serif; font-size: var(--fs-body); line-height: 1.72; color: #C9C1B4; margin-top: 18px; } body.theme-light .f-body { color: #4a453d; } body.theme-light .f-heading { color: var(--ink); } .f-note { order: 4; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: var(--fs-caption); color: #8a8476; margin-top: 14px; } /* Heading above kicker on sub-page heroes too (home hero already leads with H1) */ .hero:not(.home-hero) .wrap { display: flex; flex-direction: column; } .hero:not(.home-hero) .wrap > h1 { order: 1; margin-bottom: 16px; } .hero:not(.home-hero) .wrap > .kicker { order: 2; line-height: 1; margin-top: 0; margin-bottom: 16px; } .hero:not(.home-hero) .wrap > .italic, .hero:not(.home-hero) .wrap > .essay-lede { order: 3; margin-top: 0; } /* Image series — a walk-in sequence (e.g. the green bathroom: hallway → doorway → interior) */ .proj-series { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 4vh 0; } .proj-series .ph { position: relative; aspect-ratio: 2/3; overflow: hidden; background: var(--stone-dark); } .proj-series .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 640px) { .proj-series { grid-template-columns: 1fr; } } /* Studies 'how we work' — real photograph beside the prose (replaces the sketch) */ .ai-photo .ph { position: relative; aspect-ratio: 3/2; overflow: hidden; background: var(--stone-dark); } .ai-photo .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .ai-lines p + p { margin-top: 16px; } @media (max-width: 820px) { /* Mobile: text before image, consistently, reading section by section */ .feature, .feature.right { flex-direction: column-reverse; gap: 22px; margin: 8vh 0; } .feature .f-media { width: 100%; flex-basis: auto; } .feature .f-text, .feature.right .f-text { flex-basis: auto; text-align: left; } } /* Mobile: project hero (lead) image runs full-bleed and zooms to a 4:3 crop */ @media (max-width: 640px) { .proj-figure.full { width: 100vw; margin-left: 50%; transform: translateX(-50%); } .proj-figure.full img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; max-height: none; display: block; } } /* Duo block — a portrait + a landscape image: tall portrait on the left, text at the top-right level with the portrait's top, landscape dropped beneath the text. */ .duo { display: grid; grid-template-columns: 46% 1fr; column-gap: 44px; row-gap: 24px; align-items: start; margin: 12vh 0; } .duo .ph { position: relative; overflow: hidden; background: var(--stone-dark); } .duo .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .duo-port { grid-column: 1; grid-row: 1 / 3; } .duo-port .ph { aspect-ratio: 3/4; } .duo-text { grid-column: 2; grid-row: 1; } .duo-land { grid-column: 2; grid-row: 2; align-self: end; } .duo-land .ph { aspect-ratio: 3/2; } @media (max-width: 820px) { /* Mobile: single column, text first (DOM order), then portrait, then landscape */ .duo { grid-template-columns: 1fr; row-gap: 18px; margin: 8vh 0; } .duo-text, .duo-port, .duo-land { grid-column: 1; grid-row: auto; align-self: auto; } } /* Mobile: all project-page images run full-bleed (edge to edge); text stays inset. Multi-image blocks drop to block flow so the breakout centres reliably (the 50%/translateX trick doesn't centre grid items — it did on flex/block items). */ @media (max-width: 640px) { html, body { overflow-x: hidden; } .proj-series, .proj-pair, .joinery-reveal, .duo { display: block; } .feature .f-media, .duo-port, .duo-land, .proj-series > .ph, .proj-pair > img, .joinery-reveal > .g-toggle { width: 100vw; max-width: none; margin-left: 50%; transform: translateX(-50%); } /* breathing space between stacked full-bleed images; text stays inset */ .duo-port, .duo-land, .proj-series > .ph + .ph, .proj-pair > img + img, .joinery-reveal > .g-toggle + .g-toggle { margin-top: 12px; } .duo-text { margin-bottom: 14px; } /* Centre all text blocks on mobile only — desktop keeps its left/right alignment */ .f-text, .feature.right .f-text, .duo-text { text-align: center; } } /* ===== Rev 2026-08-25 (CF) — Albert Court: hero landscape crop + two new reveals ===== */ /* Hero: crop a portrait source to a landscape band on desktop; mobile keeps its 3:4 */ @media (min-width: 641px) { .proj-figure.full.crop-land img { aspect-ratio: 16 / 9; object-fit: cover; height: auto; } } /* Single-toggle reveals — reuse the .g-toggle cross-fade (a=off, b=on). Grid (not block) so the button stretches to a definite size; a bare block