's max-width using 100vw and centered absolute positioning. Sits behind hero content via z-index. Image extends upward 120px to also cover behind the site header. */ content: ''; position: absolute; top: -120px; /* extends up behind the header */ left: calc(50% - 50vw); width: 100vw; height: calc(100% + 120px); background-image: url('assets/hero.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1; pointer-events: none; } .hero > * { position: relative; z-index: 1; /* text sits above the image */ } .thesis { /* Category (a) declarative thesis line — set in Mrs Eaves Roman All Small Caps at 0.02em tracking. Locked in voice rules (rule 6). The All Small Caps cut is used deliberately, not the mixed Small Caps cut: a leading full-height "T" would create a visual spike that fights the line's meaning. Size flexes by breakpoint below; the cut and tracking are fixed. Colour: deeper champagne (--accent-deep). Deliberate inversion — the biggest element on the page is the quieter of the two gold registers, so the smaller italic emphasis (--accent, brighter) in the hero body below still earns the eye. The thesis presides; the body italic flickers. */ font-family: 'Mrs Eaves All Small Caps', var(--font-serif-sc); font-size: var(--t-2xl); font-weight: 400; font-style: normal; line-height: 1.15; letter-spacing: 0.02em; color: var(--accent-deep); margin-bottom: var(--s-2xl); /* No max-width — line structure is controlled by .thesis-line spans, not by wrap. */ /* Subtle entrance — fades in on load, no fanfare. */ opacity: 0; transform: translateY(0.4rem); transition: opacity 1200ms ease, transform 1200ms cubic-bezier(0.2, 0, 0.2, 1); } .thesis-line { /* Each line of the strapline is its own block. Editorial control over the break point lives in the HTML span structure, not CSS rules. If a span wraps further on a narrow screen, the visual hierarchy still holds because each remains one conceptual line within the larger sentence. */ display: block; } .thesis.is-revealed { opacity: 1; transform: translateY(0); } @media (max-width: 56rem) { .thesis { font-size: var(--t-xl); } } @media (max-width: 36rem) { .thesis { font-size: var(--t-l); } } .hero-body { /* The body paragraphs sit in a single column at a comfortable measure. Sized down to the body baseline (var(--t-s)) — at editorial register, hero body shouldn't be visually larger than regular body; the meaning carries the weight, not the size. */ max-width: 36rem; font-size: var(--t-s); line-height: 1.55; margin-bottom: var(--s-2xl); /* Same delayed-fade-in pattern, slightly behind the thesis. */ opacity: 0; transform: translateY(0.4rem); transition: opacity 1200ms ease 200ms, transform 1200ms cubic-bezier(0.2, 0, 0.2, 1) 200ms; } .hero-body.is-revealed { opacity: 1; transform: translateY(0); } .hero-body p + p { margin-top: var(--s-m); } .hero-body em { /* Emphasis in Mrs Eaves All Small Caps + warm champagne accent. Sized at 1.3em (metric) because small caps render at ~70% the height of full caps. Tracking pulled in to 0.02em — tighter than the section- label / nav small caps because in-line within body, the letters need to behave more like a word than a label. */ font-family: var(--font-serif-sc); font-style: normal; font-weight: 400; font-size: 1.3em; letter-spacing: 0.02em; color: var(--accent); } /* Hero body sizes consistently across breakpoints — no jump on mobile needed since the desktop size is now already at the body baseline. */ .hero-provenance { /* Full-bleed manifesto block — bkgd.jpg extends edge-to-edge across the viewport. Breaks out of

's max-width and padding using the classic 100vw + negative-margin trick. The text inside is re-constrained by .hero-provenance__inner to a comfortable reading width. */ width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; background-image: url('assets/bkgd.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; /* Asymmetric padding centres the text block OPTICALLY: the small-caps lines have no descenders, so equal padding reads as top-heavy — the block sat ~10px high. The 0.25em shift compensates. (Was var(--s-2xl) both sides, halved from var(--s-4xl) — image reads as editorial moment, not feature panel.) */ padding-block: calc(var(--s-2xl) + 0.25em) calc(var(--s-2xl) - 0.25em); /* Reveal pattern continues. */ opacity: 0; transform: translateY(0.4rem); transition: opacity 1200ms ease 400ms, transform 1200ms cubic-bezier(0.2, 0, 0.2, 1) 400ms; } .hero-provenance__inner { /* Text constrained to readable measure even though the bg extends full-bleed. line-height tightened to 1.2 (was 1.5) — small caps lines don't need wide leading, and a tighter line-height removes the empty space above the first line's cap-top and below the last line's baseline that was making the padding feel visually uneven. */ font-family: var(--font-serif-sc); font-size: var(--t-m); /* 21px */ line-height: 1.2; letter-spacing: 0.1em; color: #2C2C2A; /* warm dark grey — sits over bkgd image */ text-align: center; text-transform: uppercase; max-width: 44rem; margin-inline: auto; padding-inline: var(--s-xl); } /* World-map approach replaced by bkgd.jpg background-image set directly on .hero-provenance above. The ::before pseudo-element and the world-map SVG are no longer used here — left in the assets folder in case we revisit. */ .hero-provenance.is-revealed { opacity: 1; transform: translateY(0); } .hero-provenance__inner p + p { margin-top: var(--s-m); /* breathing room between the two lines */ } /* -------------------------------------------------------------------------- SELECTED WORK Four featured tiles in a 2×2 grid on desktop, single column on mobile. Generous gap. Subtle hover. Image placeholders sit where client imagery will eventually live (in client's native colour, per the brand/work split). -------------------------------------------------------------------------- */ .selected-work { /* Top padding gives the inter-section breath; bottom padding handles the gap to whatever section follows. Both reduced from the original to suit the editorial register. */ padding-block: var(--s-2xl) var(--s-3xl); /* 80px top, 120px bottom */ /* Same staggered fade-in pattern as the hero — settles after the hero. */ opacity: 0; transform: translateY(0.4rem); transition: opacity 1200ms ease 600ms, transform 1200ms cubic-bezier(0.2, 0, 0.2, 1) 600ms; } .selected-work.is-revealed { opacity: 1; transform: translateY(0); } .section-label { /* Editorial section label — Mrs Eaves All Small Caps (loaded). The font itself renders every glyph at small-cap height; we keep text-transform: uppercase as a graceful fallback if the font fails to load (DM Sans uppercase then). 2026-07: raised from var(--t-s)/muted to var(--t-l)/ink — the quiet register read as timid to clients; titling now has presence. */ font-family: var(--font-serif-sc); font-size: var(--t-l); font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); /* 2026-07: titling in the brand accent */ margin-bottom: var(--s-xl); } .work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2xl) var(--s-xl); /* generous vertical, slightly tighter horizontal */ margin-bottom: var(--s-xl); } @media (max-width: 56rem) { .work-grid { grid-template-columns: 1fr; gap: var(--s-xl); } } .work-tile { display: block; color: inherit; text-decoration: none; } .work-image { /* Container for the case study image. 3:2 ratio holds the proportion even before the image loads. The inside is object-fit: cover so any native image proportion crops cleanly into the tile. */ width: 100%; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: var(--s-m); transition: transform 600ms cubic-bezier(0.2, 0, 0.2, 1); transform-origin: center; } .work-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .work-tile:hover .work-image { /* Subtle considered hover — image scales 1.02x, no shadow, no glow. */ transform: scale(1.02); } .work-title { font-family: var(--font-sans); font-size: var(--t-m); font-weight: 400; letter-spacing: 0.12em; /* folio sample titles tracked wider 2026-07-20 per Oscar (chose 0.12em from a preview ladder) */ margin-bottom: var(--s-xs); transition: color 400ms ease; } .work-caption { font-size: var(--t-s); line-height: 1.5; color: var(--ink-muted); font-weight: 400; transition: color 400ms ease; } .work-tile:hover .work-caption { /* Caption lifts to full ink on hover — a quiet reveal. */ color: var(--ink); } .work-view-all { /* The "View all work →" link at the end of the section. Editorial register; not a button. */ display: inline-block; font-size: var(--t-s); font-weight: 400; letter-spacing: 0.04em; padding-bottom: 0.15em; border-bottom: 1px solid var(--rule); margin-top: var(--s-l); transition: border-color 400ms ease; } .work-view-all:hover { border-color: var(--ink); } .work-view-all span { /* The arrow gets a hair more space and a subtle slide on hover. */ display: inline-block; margin-left: 0.25em; transition: transform 400ms cubic-bezier(0.2, 0, 0.2, 1); } .work-view-all:hover span { transform: translateX(0.2em); } /* -------------------------------------------------------------------------- SERVICES — homepage section (2026-07, Oscar's decision to surface services) Eight disciplines as an editorial accordion: numbered small-caps rows between hairline rules. One open at a time. The open state unfolds with the same fade grammar as everything else — no bounce, no slide-drama. -------------------------------------------------------------------------- */ .services { padding-block: 0 var(--s-3xl); } .services__intro { max-width: 36rem; font-size: var(--t-s); line-height: 1.55; color: var(--ink-muted); margin-bottom: var(--s-xl); } .services-columns { /* Two independent columns on desktop — 01–04 left, 05–08 right. align-items: start keeps one column's accordion from moving the other. */ display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-2xl); align-items: start; } @media (max-width: 56rem) { .services-columns { grid-template-columns: 1fr; gap: 0; } /* Stacked: the second list drops its top rule so the eight read as one run. */ .services-columns .services-list + .services-list { border-top: 0; } } .services-list { list-style: none; border-top: 1px solid var(--rule); } .service { border-bottom: 1px solid var(--rule); } .service__name { /* The whole row is the control. Baseline-aligned number + name. */ display: flex; align-items: baseline; gap: var(--s-m); width: 100%; padding-block: var(--s-m); background: none; border: 0; color: var(--ink); font-family: var(--font-serif-sc); font-size: var(--t-m); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; cursor: pointer; transition: color 400ms ease; } .service__index { font-family: var(--font-serif-sc); font-size: var(--t-xs); letter-spacing: 0.12em; color: var(--ink-muted); transition: color 400ms ease; } .service__name:hover, .service__name:hover .service__index, .service.is-open .service__name, .service.is-open .service__index { color: var(--accent); } .service__detail { /* Collapsed by default; unfolds via grid-rows — animates cleanly at any content height, no fixed max-height hacks. */ display: grid; grid-template-rows: 0fr; transition: grid-template-rows 700ms cubic-bezier(0.2, 0, 0.2, 1); } .service__detail-inner { overflow: hidden; opacity: 0; transition: opacity 400ms ease; } .service.is-open .service__detail { grid-template-rows: 1fr; } .service.is-open .service__detail-inner { opacity: 1; transition: opacity 700ms ease 200ms; } .service__gloss { max-width: 36rem; font-size: var(--t-s); line-height: 1.55; margin-bottom: var(--s-s); } .service__outputs { /* Plain inventory of outputs, middot-separated — named, not sold. */ max-width: 44rem; font-size: var(--t-xs); letter-spacing: 0.04em; line-height: 1.8; color: var(--ink-muted); padding-bottom: var(--s-m); } /* Staggered arrival — rows fade in as left/right pairs down the columns. */ .services-list .service:nth-child(2) { transition-delay: 80ms; } .services-list .service:nth-child(3) { transition-delay: 160ms; } .services-list .service:nth-child(4) { transition-delay: 240ms; } @media (prefers-reduced-motion: reduce) { .service__detail, .service__detail-inner { transition: none; } } /* -------------------------------------------------------------------------- WHAT WE BELIEVE — three principles (verbatim, positioning.md, locked 05/2026) -------------------------------------------------------------------------- */ .believe { /* Full-bleed band on the footer's dark texture, pulled a little darker with an overlay so the principles sit in their own quiet room. */ width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-bottom: var(--s-3xl); background-image: linear-gradient(rgba(15, 15, 14, 0.4), rgba(15, 15, 14, 0.4)), url('assets/footer.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; padding-block: var(--s-2xl); } .believe__inner { /* Re-constrain content to the page rail inside the full-bleed band. */ max-width: 78rem; margin-inline: auto; padding-inline: var(--s-xl); } @media (max-width: 56rem) { .believe__inner { padding-inline: var(--s-m); } } .believe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-l); align-items: stretch; } @media (max-width: 56rem) { .believe-grid { grid-template-columns: 1fr; gap: var(--s-m); } } .believe-item { /* Each principle sits on its own quiet plate against the texture. */ background: rgba(15, 15, 14, 0.5); border: 1px solid var(--rule); padding: var(--s-l); } .believe-item__title { font-family: var(--font-serif-sc); font-size: var(--t-m); font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-bottom: var(--s-s); } .believe-item__gloss { font-size: var(--t-s); line-height: 1.55; color: var(--ink); max-width: 24rem; } /* Left-to-right arrival, same grammar as the services rows. */ .believe-grid .believe-item:nth-child(2) { transition-delay: 120ms; } .believe-grid .believe-item:nth-child(3) { transition-delay: 240ms; } /* -------------------------------------------------------------------------- WHO WE WORK WITH — homepage section (approved copy, 2026-07) -------------------------------------------------------------------------- */ .who { /* Full-bleed band on the letter-wall image (home-inter.jpg), darkened enough for the text to preside over the texture. */ width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; /* No bottom margin — the .close section's symmetric padding owns the space below, so its text centres in the band between here and the footer. */ margin-bottom: 0; background-image: linear-gradient(rgba(15, 15, 14, 0.62), rgba(15, 15, 14, 0.62)), url('assets/home-inter.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; padding-block: var(--s-2xl); } .who__inner { max-width: 78rem; margin-inline: auto; padding-inline: var(--s-xl); } @media (max-width: 56rem) { .who__inner { padding-inline: var(--s-m); } } .who__list { max-width: 44rem; font-size: var(--t-s); line-height: 1.55; color: var(--ink-muted); margin-bottom: var(--s-m); } .who__axiom { /* Section-level thesis line — Mrs Eaves small caps, ink (not champagne; it must not compete with the hero thesis). */ font-family: var(--font-serif-sc); font-size: var(--t-l); line-height: 1.3; letter-spacing: 0.04em; text-transform: uppercase; max-width: 44rem; margin-bottom: var(--s-xl); } .who__axiom em { font-style: normal; color: var(--accent); } .who__body { max-width: 36rem; } .who__body p + p { margin-top: var(--s-m); } .who__body p { font-size: var(--t-s); line-height: 1.55; } .who__body em { font-family: var(--font-serif-sc); font-style: normal; font-size: 1.15em; letter-spacing: 0.02em; color: var(--accent); } /* -------------------------------------------------------------------------- CLOSE — homepage invitation (approved copy, 2026-07) -------------------------------------------------------------------------- */ .close { /* Symmetric padding — the text block sits centred in the dark band between the Who We Work With image and the footer (was s-2xl top / s-3xl bottom, which read bottom-heavy with the .who margin stacked on top). */ padding-block: var(--s-3xl); text-align: center; } .close__thesis { font-family: var(--font-serif-sc); font-size: var(--t-l); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: var(--s-l); } .close__line { font-size: var(--t-s); line-height: 1.55; margin-bottom: var(--s-m); } .close__line em { font-family: var(--font-serif-sc); font-style: normal; font-size: 1.15em; letter-spacing: 0.02em; color: var(--accent); } .close__email { display: inline-block; font-size: var(--t-m); letter-spacing: 0.02em; padding-bottom: 0.1em; border-bottom: 1px solid var(--rule); transition: border-color 400ms ease; } .close__email:hover { border-color: var(--ink); } /* -------------------------------------------------------------------------- CASE STUDY — stat strip + invitation line (approved 2026-07) -------------------------------------------------------------------------- */ .case-study__stats { /* The numbers, presented as quiet fact — large numerals, small-caps labels. Sits between the story and the colophon. */ display: flex; flex-wrap: wrap; gap: var(--s-l) var(--s-2xl); margin-block: var(--s-2xl); } .case-stat__value { display: block; font-family: var(--font-sans); font-size: var(--t-2xl); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; } .case-stat__label { display: block; margin-top: var(--s-xs); font-family: var(--font-serif-sc); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); } .case-study__covers { /* A miniature label catalogue — square covers in a tight 2×2 grid. */ display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-s); } .case-study__covers img { width: 100%; height: auto; display: block; } .case-study__cta { margin-top: var(--s-xl); font-size: var(--t-s); } .case-study__cta a { padding-bottom: 0.1em; border-bottom: 1px solid transparent; transition: border-color 400ms ease; } .case-study__cta a:hover { border-color: var(--accent); } /* -------------------------------------------------------------------------- ABOUT PAGE Five-section structure: intro, thread, how-the-work-happens, portrait, close. Editorial column, considered spacing, founder photo as quiet anchor. -------------------------------------------------------------------------- */ .about-page { max-width: 44rem; margin-inline: auto; padding-block: var(--s-2xl) var(--s-3xl); } .about-intro { font-size: var(--t-l); line-height: 1.3; letter-spacing: -0.005em; margin-bottom: calc(var(--s-2xl) / 2); /* paragraph spacing reduced 50% (80px → 40px) 2026-07 */ } .about-thread, .about-how, .about-body { font-size: var(--t-s); line-height: 1.6; margin-bottom: calc(var(--s-2xl) / 2); /* paragraph spacing reduced 50% (80px → 40px) 2026-07 */ } .about-portrait { margin-block: var(--s-2xl); } .about-portrait img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 3; object-fit: cover; /* No filter — the portrait is delivered pre-toned in the warm-monochrome register, matching the interspersed About imagery. */ } /* Interspersed About imagery — already delivered in the warm-monochrome register, so no filter is imposed. Full-bleed: breaks out of the 44rem column to span the full viewport width (assets exported at 2560px for sharpness). The founder portrait deliberately stays at column width — understated. */ .about-inter { margin-block: var(--s-2xl); width: 100vw; margin-left: calc(50% - 50vw); } .about-inter img { width: 100%; height: auto; display: block; } .about-close { font-size: var(--t-s); line-height: 1.6; margin-top: calc(var(--s-xl) / 2); /* paragraph spacing reduced 50% 2026-07 */ } .about-close a, .about-page a { border-bottom: 1px solid var(--rule); padding-bottom: 0.05em; transition: border-color 400ms ease; } .about-close a:hover, .about-page a:hover { border-color: var(--ink); } .about-intro em, .about-thread em, .about-how em, .about-body em { font-family: var(--font-serif-sc); font-style: normal; font-weight: 400; font-size: 1.15em; letter-spacing: 0.02em; color: var(--accent); } /* -------------------------------------------------------------------------- CONTACT PAGE Minimal — opening line, email, phones, LinkedIn. The shortest page on the site. -------------------------------------------------------------------------- */ /* Pages carrying the same painted texture as the homepage manifesto band (bkgd.jpg) — currently About and Contact. The image is painted on a fixed pseudo-element sized to the viewport, so on long pages (About) the texture stays crisp and the content scrolls over it, instead of the image being stretched to the full document height. Works on iOS where background-attachment: fixed does not. */ body.textured::before { content: ""; position: fixed; inset: 0; z-index: -1; background: url('assets/bkgd.jpg') center / cover no-repeat; } .contact-page { max-width: 44rem; margin-inline: auto; padding-block: var(--s-3xl) var(--s-4xl); text-align: left; } .contact-lead { font-size: var(--t-l); line-height: 1.3; letter-spacing: -0.005em; margin-bottom: var(--s-2xl); } .contact-lead em { font-family: var(--font-serif-sc); font-style: normal; font-weight: 400; font-size: 1.15em; letter-spacing: 0.02em; color: var(--accent); } .contact-email { display: inline-block; font-size: var(--t-m); letter-spacing: 0.02em; padding-bottom: 0.1em; border-bottom: 1px solid var(--rule); margin-bottom: var(--s-xl); transition: border-color 400ms ease; } .contact-email:hover { border-color: var(--ink); } .contact-phones { list-style: none; font-size: var(--t-s); line-height: 1.8; color: var(--ink-muted); margin-bottom: var(--s-xl); } .whatsapp-link { /* Small WhatsApp mark beside the UK number — opens a chat directly. Muted by default; brand accent on hover. */ display: inline-block; margin-left: 0.35em; vertical-align: -0.15em; color: var(--ink-muted); transition: color 400ms ease; } .whatsapp-link svg { width: 1.05em; height: 1.05em; display: inline-block; } .whatsapp-link:hover { color: var(--accent); } .contact-linkedin { display: inline-block; font-family: var(--font-serif-sc); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; padding-bottom: 0.1em; border-bottom: 1px solid transparent; transition: border-color 400ms ease; color: var(--ink-muted); } .contact-linkedin:hover { border-color: var(--ink-muted); } /* -------------------------------------------------------------------------- WORK INDEX PAGE The full set of ten case study tiles. Reuses .work-grid and .work-tile from the homepage Selected Work styles above. -------------------------------------------------------------------------- */ .work-index { padding-block: var(--s-2xl) var(--s-3xl); } .work-index__heading { /* Page-level title — louder than a section label (2026-07: raised from var(--t-s); it read too quiet as the heading of a 16-project index). */ font-size: var(--t-xl); color: var(--accent); /* 2026-07: titling in the brand accent */ letter-spacing: 0.06em; margin-bottom: var(--s-m); } .work-index__lead { /* One plain framing line (locked IA) — the client filter, stated once. */ font-size: var(--t-s); line-height: 1.55; color: var(--ink-muted); max-width: 36rem; margin-bottom: var(--s-2xl); } .case-study__nav { /* Foot of every case study: back to the index, or straight on to the next engagement — momentum without a hard sell. */ display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-m); } .case-study__next { display: inline-block; font-family: var(--font-serif-sc); font-size: var(--t-s); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-top: var(--s-2xl); padding-bottom: 0.1em; border-bottom: 1px solid transparent; transition: border-color 400ms ease, color 400ms ease; } .case-study__next:hover { color: var(--ink); border-color: var(--ink-muted); } /* -------------------------------------------------------------------------- CASE STUDY PAGE Per locked skeleton: client one-liner, work + defining decision, benefit, testimonial (if any), selected images. -------------------------------------------------------------------------- */ .case-study { max-width: 56rem; margin-inline: auto; padding-block: var(--s-2xl) var(--s-3xl); } .case-study__client { font-size: var(--t-xl); line-height: 1.2; letter-spacing: -0.015em; color: var(--accent); /* 2026-07: titling in the brand accent */ margin-bottom: var(--s-xs); } .case-study__location { font-family: var(--font-serif-sc); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); margin-bottom: var(--s-2xl); } .case-study p { font-size: var(--t-s); line-height: 1.6; margin-bottom: var(--s-l); max-width: 44rem; } .case-study em { font-family: var(--font-serif-sc); font-style: normal; font-weight: 400; font-size: 1.15em; letter-spacing: 0.02em; color: var(--accent); } .case-study__quote { font-size: var(--t-m); line-height: 1.4; letter-spacing: -0.005em; margin-block: var(--s-2xl); padding-left: var(--s-l); border-left: 2px solid var(--rule); max-width: 44rem; } .case-study__quote em { font-family: var(--font-serif-sc); font-style: normal; font-size: 1em; color: inherit; } .case-study__attribution { display: block; margin-top: var(--s-s); font-size: var(--t-xs); font-family: var(--font-serif-sc); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-muted); } /* Case study imagery — editorial interleave (2026-07). Structure per page: one header shot under the title block, then detail shots paired side-by-side with the text they illustrate. Client's native colour (locked skeleton, item 4). Images fade in on scroll via .reveal. */ .case-study__hero { margin-block: var(--s-l) var(--s-2xl); } .case-study__hero img { width: 100%; height: auto; display: block; } .case-study__pair { /* A paragraph and its work shot, side by side. Text keeps the reading measure; the image balances it. Alternate sides with --reverse. */ display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--s-xl); align-items: center; margin-block: var(--s-2xl); } .case-study__pair--portrait { /* Tall image — give the text the wider column so the shot stays modest. */ grid-template-columns: 1.4fr 1fr; } .case-study__pair--reverse .case-study__pair-text { order: 2; } .case-study__pair--reverse .case-study__pair-media { order: 1; } .case-study__pair-text p { margin-bottom: 0; } .case-study__pair-text p + p { margin-top: var(--s-m); } .case-study__pair-media img { width: 100%; height: auto; display: block; } @media (max-width: 56rem) { .case-study__pair, .case-study__pair--portrait { grid-template-columns: 1fr; gap: var(--s-m); } /* Text first, image after — reading order wins on small screens. */ .case-study__pair--reverse .case-study__pair-text { order: 1; } .case-study__pair--reverse .case-study__pair-media { order: 2; } } /* Generic scroll-reveal utility — same fade grammar as the homepage. Apply to case heroes and pairs; script.js observes .reveal and adds .is-revealed when the element enters the viewport. Fade-ins only. */ .reveal { opacity: 0; transform: translateY(0.4rem); transition: opacity 1200ms ease, transform 1200ms cubic-bezier(0.2, 0, 0.2, 1); } .reveal.is-revealed { opacity: 1; transform: translateY(0); } .case-study__images-note { font-size: var(--t-xs); color: var(--ink-muted); font-style: italic; margin-top: var(--s-2xl); } .case-study__skills { /* Colophon — the plain inventory of what was made, from the creds document. Sits at the foot of the case story above a hairline rule, like credits. */ border-top: 1px solid var(--rule); margin-top: var(--s-2xl); padding-top: var(--s-m); max-width: 44rem; font-family: var(--font-serif-sc); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em; line-height: 2; color: var(--ink-muted); } .case-study__back { display: inline-block; font-family: var(--font-serif-sc); font-size: var(--t-s); /* raised from var(--t-xs) — too quiet (2026-07) */ text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-top: var(--s-2xl); padding-bottom: 0.1em; border-bottom: 1px solid transparent; transition: border-color 400ms ease, color 400ms ease; } .case-study__back:hover { color: var(--ink); } .case-study__back:hover { border-color: var(--ink-muted); } /* -------------------------------------------------------------------------- LEGAL PAGES (Privacy, Terms, Cookies) Placeholder layout — boilerplate copy to be added later. -------------------------------------------------------------------------- */ .legal-page { max-width: 44rem; margin-inline: auto; padding-block: var(--s-2xl) var(--s-3xl); } .legal-page h1 { font-size: var(--t-xl); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: var(--s-xl); } .legal-page p { font-size: var(--t-s); line-height: 1.6; margin-bottom: var(--s-m); } /* -------------------------------------------------------------------------- FOOTER Full-bleed dark-textured background image (footer.jpg). Warm off-white text sits over it. Sign-off + contact + legal links. Appears on every page. -------------------------------------------------------------------------- */ .site-footer { background-image: url('assets/footer.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; color: #FAFAF7; /* warm off-white — dark image takes light text */ padding-block: var(--s-2xl); /* Footer is outside

already so naturally full-width. */ } .site-footer__inner { max-width: 78rem; margin-inline: auto; padding-inline: var(--s-xl); display: flex; flex-direction: column; align-items: center; gap: var(--s-m); text-align: center; } .site-footer__signoff { /* Wordmark-style sign-off — matches the brand register without using the actual logo. */ font-family: var(--font-sans); font-size: calc(var(--t-s) * 1.3); font-weight: 400; letter-spacing: 0.32em; text-transform: uppercase; } /* The hollow ampersand — echoes the outlined & of the wordmark. Stroke colour matches the footer's warm off-white text (the footer always sits on the dark footer.jpg, so --ink would render dark-on-dark). Falls back to a solid & in browsers without text-stroke support. */ .signoff-amp { color: transparent; -webkit-text-stroke: 0.75px #FAFAF7; } @supports not (-webkit-text-stroke: 1px black) { .signoff-amp { color: inherit; } } .site-footer__email { /* Email as a subtle link — same register as the body text. */ font-size: var(--t-s); letter-spacing: 0.04em; padding-bottom: 0.15em; border-bottom: 1px solid rgba(250, 250, 247, 0.3); transition: border-color 400ms ease; } .site-footer__email:hover { border-color: #FAFAF7; } .site-footer__legal { /* Privacy / Terms / Cookies — small caps row, restrained editorial register. */ list-style: none; display: flex; gap: var(--s-l); font-family: var(--font-serif-sc); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.12em; margin-top: var(--s-m); opacity: 0.75; } .site-footer__legal a { border-bottom: 1px solid transparent; padding-bottom: 0.1em; transition: border-color 400ms ease; } .site-footer__legal a:hover { border-color: rgba(250, 250, 247, 0.6); } @media (max-width: 36rem) { .site-footer__legal { gap: var(--s-m); flex-wrap: wrap; justify-content: center; } } /* -------------------------------------------------------------------------- NOTES - Type sizes, spacing, colour, and the ampersand draw-itself moment all derive from a single proportion and a single base unit. Don't add ad-hoc values; if a new size is needed, extend the system, don't break it. - The chamfered-edge discipline lives in this CSS as much as anywhere: every fade timing, every letter-spacing decision, every line-height was chosen — not defaulted. - When real Gotham + Mrs Eaves XL load in production, the visual lift will be material; even DM Sans + EB Garamond as substitutes already read as considered. -------------------------------------------------------------------------- */