/* ------------------------------------------------------------------ NOMADANAID — base stylesheet Bold editorial magazine direction: warm paper ground, near-black ink, a single editorial red used sparingly (index numbers, select words, a masthead rule, hover states — never large fills). Type: Archivo (grotesque, display + body) paired with Fraunces italic (serif accent, contrast only). Loaded from Google Fonts — see each page's for the stylesheet link. ------------------------------------------------------------------- */ :root { --paper: #f7f5f0; --paper-raised: #efebe2; --paper-line: #e7e2d6; --line: rgba(20, 17, 14, 0.14); --line-soft: rgba(20, 17, 14, 0.07); --line-strong: rgba(20, 17, 14, 0.5); --ink: #16140f; --ink-dim: #55503f; --ink-faint: #918c7c; --red: #c2281b; --red-soft: rgba(194, 40, 27, 0.1); /* legacy aliases so any not-yet-rebuilt component keeps working under the new palette */ --bg: var(--paper); --bg-raised: var(--paper-raised); --fg: var(--ink); --fg-dim: var(--ink-dim); --fg-faint: var(--ink-faint); --accent: var(--red); --accent-ink: var(--paper); --font-display: 'Archivo', 'Arial Narrow', sans-serif; --font-body: 'Archivo', 'Helvetica Neue', Arial, sans-serif; --font-serif: 'Fraunces', Georgia, serif; --container: 1280px; --gutter: clamp(20px, 4vw, 64px); --ease-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } .container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); } .narrow { max-width: 720px; } h1, h2, h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: -0.015em; line-height: 0.92; margin: 0; font-weight: 800; } p { color: var(--fg-dim); margin: 0 0 1.2em; } p:last-child { margin-bottom: 0; } .eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--accent); } /* serif-italic accent for select words inside display headlines/quotes */ .accent-word { font-family: var(--font-serif); font-style: italic; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--red); } /* plain red emphasis on a key word within a headline — same face/case as its surroundings, color only. Use sparingly (2-3 words a page, at most). */ .accent-red { color: var(--red); } /* ---------- header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(247, 245, 240, 0.88); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .logo { position: relative; display: flex; align-items: center; } .logo img { display: block; height: 20px; width: auto; } .site-nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 32px); font-size: 0.92rem; } .site-nav a:not(.btn) { color: var(--fg-dim); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: color 0.15s ease, border-color 0.15s ease; } .site-nav a:not(.btn):hover, .site-nav a.is-active { color: var(--fg); border-color: var(--accent); } .nav-toggle { display: none; width: 32px; height: 24px; background: none; border: 0; padding: 0; position: relative; cursor: pointer; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; background: var(--fg); transition: transform 0.2s ease; } .nav-toggle span { top: 11px; } .nav-toggle span::before { top: -8px; } .nav-toggle span::after { top: 8px; } /* ---------- buttons ---------- */ .btn { display: inline-block; padding: 12px 22px; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; color: var(--ink); border: 1px solid var(--ink); transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .btn:hover { border-color: var(--red); color: var(--red); } .btn-accent { background: var(--ink); color: var(--paper); border-color: var(--ink); } .btn-accent:hover { background: var(--paper); color: var(--red); border-color: var(--red); } /* ---------- hero ---------- */ .hero { padding: clamp(64px, 12vh, 140px) 0 clamp(40px, 8vh, 80px); } .hero h1 { font-size: clamp(3.4rem, 9.2vw, 8.6rem); max-width: 15ch; } .hero .dek { margin-top: clamp(24px, 4vw, 40px); max-width: 46ch; font-size: clamp(1rem, 1.4vw, 1.2rem); } .hero-actions { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; } /* ---------- hero headline mask-reveal ---------- */ .hero-headline .line { display: block; overflow: hidden; } .hero-headline .line-inner { display: block; transform: translateY(112%); opacity: 0; animation: line-up 1s var(--ease-expo) forwards; } .hero-headline .line:nth-child(1) .line-inner { animation-delay: 0.05s; } .hero-headline .line:nth-child(2) .line-inner { animation-delay: 0.17s; } .hero-headline .line:nth-child(3) .line-inner { animation-delay: 0.29s; } @keyframes line-up { to { transform: translateY(0); opacity: 1; } } /* ---------- scroll-triggered reveals ---------- */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease-expo), transform 0.9s var(--ease-expo); transition-delay: var(--reveal-delay, 0s); } .reveal.is-visible { opacity: 1; transform: translateY(0); } /* ---------- hero reel motion ---------- */ .hero-reel { will-change: transform; } /* ---------- placeholder media ---------- */ .placeholder-media { aspect-ratio: 16 / 9; background: repeating-linear-gradient(135deg, rgba(20, 17, 14, 0.05) 0 1px, transparent 1px 14px), var(--paper-raised); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; } .placeholder-media span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; color: var(--fg-faint); } .placeholder-media video { width: 100%; height: 100%; object-fit: cover; display: block; } /* ---------- sections ---------- */ section { padding: clamp(56px, 9vh, 120px) 0; } .section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; border-bottom: 1px solid var(--line); padding-bottom: 20px; margin-bottom: 8px; } .section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); } /* ---------- work list (TOC-style rows) ---------- */ .work-list { border-top: 1px solid var(--line); } .work-row { display: grid; grid-template-columns: 3.5rem 1fr auto auto 2rem; align-items: center; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--line); transition: background 0.15s ease, padding-left 0.15s ease; } .work-row:hover { background: var(--line-soft); padding-left: 12px; } .work-index { font-family: var(--font-display); color: var(--fg-faint); font-size: 1.1rem; } .work-title { position: relative; display: inline-block; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.3rem, 2.6vw, 2rem); letter-spacing: -0.01em; transition: transform 0.5s var(--ease-expo); } .work-row:hover .work-title { transform: translateX(14px); } .work-underline { position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease-expo); } .work-row:hover .work-underline { transform: scaleX(1); } .work-tags, .work-year { color: var(--fg-faint); font-size: 0.85rem; white-space: nowrap; } .work-arrow { font-size: 1.2rem; color: var(--fg-faint); transition: transform 0.15s ease, color 0.15s ease; justify-self: end; } .work-row:hover .work-arrow { transform: translateX(4px); color: var(--accent); } /* ---------- capability / services list ---------- */ .cap-list { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(2, 1fr); } .cap-item { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 28px; } .cap-item:nth-child(2n) { border-right: none; } .cap-item h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); margin-bottom: 10px; } /* ---------- CTA band ---------- */ .cta-band { border-top: 1px solid var(--line); text-align: left; } .cta-band h2 { font-size: clamp(2.2rem, 6vw, 4.2rem); max-width: 16ch; } .cta-band .btn { margin-top: 28px; } /* ---------- footer ---------- */ .site-footer { border-top: 1px solid var(--line); padding: 48px 0; } .footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; } .footer-brand { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.02em; } .footer-links { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; color: var(--fg-dim); } .footer-links a:hover { color: var(--accent); } .footer-social { display: flex; gap: 18px; } .footer-meta { width: 100%; color: var(--fg-faint); font-size: 0.82rem; margin-top: 12px; } /* ---------- case study pages ---------- */ .case-hero { padding-bottom: 32px; } .case-meta-top a { color: var(--fg-faint); font-size: 0.85rem; } .case-meta-top a:hover { color: var(--accent); } .case-hero h1 { font-size: clamp(3rem, 8vw, 6.5rem); margin-top: 24px; } .case-dek { max-width: 50ch; margin-top: 20px; font-size: 1.1rem; } .case-meta { margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); padding-top: 20px; } .case-meta dt { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: 6px; } .case-meta dd { margin: 0; color: var(--fg); } .case-body { padding: 48px var(--gutter); } .case-body p { font-size: 1.05rem; } .case-next { border-top: 1px solid var(--line); padding: 40px var(--gutter) 0; } .case-next a { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.4rem, 3vw, 2rem); } .case-next a:hover { color: var(--accent); } /* ---------- about page ---------- */ .process-list { border-top: 1px solid var(--line); } .process-row { display: grid; grid-template-columns: 3.5rem 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); } .process-row .work-index { padding-top: 4px; } .process-row h3 { font-size: 1.2rem; margin-bottom: 6px; text-transform: none; font-family: var(--font-body); font-weight: 500; } /* ---------- contact page ---------- */ .contact-main a.email-link { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2rem, 6vw, 4rem); display: inline-block; border-bottom: 2px solid var(--line); padding-bottom: 8px; } .contact-main a.email-link:hover { border-color: var(--accent); color: var(--accent); } .contact-details { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--line); padding-top: 32px; } .contact-details h3 { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); font-family: var(--font-body); font-weight: 500; margin-bottom: 10px; } .contact-details p, .contact-details a { color: var(--fg); font-size: 0.98rem; } .contact-details a:hover { color: var(--accent); } /* ---------- cursor-follow work preview ---------- */ body.has-cursor-preview .work-row { cursor: none; } .work-preview { position: fixed; top: 0; left: 0; width: 220px; pointer-events: none; z-index: 200; opacity: 0; transition: opacity 0.3s var(--ease-out); will-change: transform; } .work-preview.is-active { opacity: 1; } .work-preview-media { aspect-ratio: 16 / 9; background: var(--paper-raised); border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(20, 17, 14, 0.16); overflow: hidden; position: relative; } .work-preview-media video { width: 100%; height: 100%; object-fit: cover; display: none; } .work-preview-fallback { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; text-align: center; padding: 10px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; color: var(--ink-faint); background: repeating-linear-gradient(135deg, rgba(20, 17, 14, 0.05) 0 1px, transparent 1px 14px); } .work-preview-label { display: block; margin-top: 10px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; color: var(--accent); } /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .hero-headline .line-inner { opacity: 1; transform: none; } } /* ------------------------------------------------------------------ EDITORIAL SYSTEM Magazine-style primitives: kickers, folios, vertical labels, bleed, ghost index numerals, and the "spread" work-list component. Used on the homepage first; other pages adopt these incrementally. ------------------------------------------------------------------- */ .kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem; color: var(--ink-faint); } .kicker::before { content: ''; width: 22px; height: 2px; background: var(--red); display: inline-block; } .folio { font-family: var(--font-body); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; color: var(--fg-faint); } .vlabel { writing-mode: vertical-rl; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem; color: var(--fg-faint); white-space: nowrap; } .edit-rule { display: flex; justify-content: space-between; align-items: center; gap: 20px; border-top: 1px solid var(--line); padding-top: 16px; } .edit-section-title { font-size: clamp(2.6rem, 7vw, 5.5rem); margin: 20px 0 0; } /* ---------- cover hero (magazine-cover type, homepage) ---------- */ .cover-hero { position: relative; overflow: hidden; padding-top: clamp(64px, 10vh, 120px); padding-bottom: clamp(56px, 9vh, 90px); } .edge-label { position: absolute; left: 16px; top: clamp(160px, 22vh, 260px); z-index: 3; } .edge-folio { position: absolute; right: 16px; top: 28px; z-index: 3; } .cover-wrap { width: 100%; padding: 0 clamp(16px, 3vw, 40px); } .cover-headline { margin-top: clamp(20px, 3vw, 32px); } .cover-line { display: block; overflow: hidden; } .cover-line + .cover-line { margin-top: clamp(2px, 0.6vw, 10px); } .cover-fit { display: inline-flex; align-items: center; white-space: nowrap; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; line-height: 0.88; letter-spacing: -0.01em; /* static fallback so there's no tiny-text flash before hero-fit.js runs (and a reasonable degraded size if JS is unavailable) — JS overrides this with a precise per-line fit to the full width */ font-size: clamp(2.6rem, 8.6vw, 6.5rem); } /* small photography/video tucked into the gaps between words, scaled in step with the surrounding type via em sizing */ .cover-media { display: inline-flex; width: 0.82em; height: 0.82em; margin: 0 0.14em; border-radius: 0.08em; overflow: hidden; vertical-align: middle; flex: none; border: 0.05em solid var(--paper); box-shadow: 0 0.1em 0.3em rgba(20, 17, 14, 0.2); } .cover-media img, .cover-media video { width: 100%; height: 100%; object-fit: cover; display: block; } .cover-foot { margin-top: clamp(28px, 5vw, 56px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; border-top: 1px solid var(--line); padding-top: 24px; } .cover-foot .dek { max-width: 46ch; font-size: clamp(1rem, 1.4vw, 1.2rem); margin: 0; } .cover-foot .hero-actions { margin-top: 0; } /* ---------- editorial capabilities ---------- */ .edit-caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 32px); margin-top: 48px; } .edit-cap { border-top: 1px solid var(--line); padding-top: 20px; } .edit-cap:nth-child(2n) { margin-top: 40px; } /* narrow case-study text column: always a single stacked list, regardless of viewport width (the column, not the screen, is what's narrow) */ .case-col-text .edit-caps { grid-template-columns: 1fr; margin-top: 32px; } .case-col-text .edit-cap:nth-child(2n) { margin-top: 0; } .edit-cap-num { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; letter-spacing: -0.01em; color: var(--red); margin-bottom: 14px; } .edit-cap-label { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; color: var(--ink-faint); margin-bottom: 14px; } .edit-cap h3 { font-family: var(--font-body); font-weight: 500; text-transform: none; font-size: 1.2rem; margin-bottom: 10px; } /* ---------- editorial CTA ---------- */ .edit-cta { border-top: 1px solid var(--line); padding: clamp(72px, 11vw, 150px) 0; } .edit-cta-grid { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; } .edit-cta h2 { font-size: clamp(2.8rem, 8vw, 6.5rem); max-width: 14ch; } .accent-outline { color: transparent; -webkit-text-stroke: 1px var(--accent); } @supports not ((-webkit-text-stroke: 1px red) or (text-stroke: 1px red)) { .accent-outline { color: var(--accent); -webkit-text-stroke: 0; } } /* ---------- work spreads (still used by case-study spread-caption) ---------- */ .spread-caption { display: block; margin-top: 14px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); } /* ---------- folder / binder work index (homepage) ---------- */ .folder-section { position: relative; padding-top: clamp(56px, 9vh, 100px); padding-bottom: clamp(64px, 10vh, 120px); overflow: hidden; } .folder-head { margin-bottom: 8px; } .folder-scene { position: relative; height: clamp(340px, 46vw, 520px); margin-top: clamp(40px, 6vw, 72px); } @media (min-width: 720px) { .folder-scene { padding-right: clamp(220px, 22vw, 300px); } } .folder-base { position: absolute; left: 2%; top: 8%; width: min(58%, 520px); height: 78%; background: var(--paper-raised); border: 1px solid var(--line); transform: rotate(-2deg); box-shadow: 0 24px 50px rgba(20, 17, 14, 0.12); } .folder-base::before { content: ''; position: absolute; top: -20px; left: 8%; width: 32%; height: 22px; background: var(--paper-raised); border: 1px solid var(--line); border-bottom: none; clip-path: polygon(6% 100%, 16% 0, 84% 0, 94% 100%); } .folder-photo { position: absolute; margin: 0; border: 6px solid var(--paper); box-shadow: 0 16px 36px rgba(20, 17, 14, 0.22); overflow: hidden; } .folder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .folder-photo--1 { width: clamp(130px, 17vw, 220px); aspect-ratio: 4 / 5; left: 3%; top: 2%; transform: rotate(-7deg); z-index: 3; } .folder-photo--2 { width: clamp(150px, 19vw, 240px); aspect-ratio: 1 / 1; left: 27%; top: 32%; transform: rotate(5deg); z-index: 2; } .folder-photo--3 { width: clamp(120px, 15vw, 200px); aspect-ratio: 4 / 5; left: 10%; top: 58%; transform: rotate(-3deg); z-index: 4; } .folder-tabs { position: absolute; top: clamp(12px, 2vw, 32px); right: 0; display: flex; flex-direction: column; z-index: 6; } .folder-tab { display: flex; align-items: center; gap: 14px; min-width: clamp(190px, 20vw, 250px); padding: 20px clamp(20px, 3vw, 36px) 20px clamp(22px, 3vw, 40px); border: 1px solid var(--line); border-right: none; background: var(--paper-raised); transform: translateX(0); transition: transform 0.25s var(--ease-out), background 0.2s ease; } .folder-tab + .folder-tab { border-top: none; } .folder-tab:hover, .folder-tab:focus-visible { transform: translateX(-14px); background: var(--paper); } .folder-tab-num { font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; color: var(--red); } .folder-tab-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.1rem, 2vw, 1.6rem); letter-spacing: -0.01em; color: var(--ink); } .folder-tab-arrow { margin-left: auto; color: var(--ink-faint); transition: transform 0.2s ease, color 0.2s ease; } .folder-tab:hover .folder-tab-arrow, .folder-tab:focus-visible .folder-tab-arrow { transform: translateX(4px); color: var(--red); } /* ---------- custom cursor (spreads) ---------- */ body.has-spread-cursor .spread { cursor: none; } .cursor-pill { position: fixed; top: 0; left: 0; padding: 11px 20px; border: 1px solid var(--red); color: var(--red); background: rgba(247, 245, 240, 0.92); box-shadow: 0 8px 20px rgba(20, 17, 14, 0.14); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.74rem; white-space: nowrap; pointer-events: none; z-index: 250; opacity: 0; transition: opacity 0.25s var(--ease-out); transform: translate(-9999px, -9999px); will-change: transform; } .cursor-pill.is-active { opacity: 1; } /* ---------- case study: two-column editorial layout ---------- */ .case-editorial { position: relative; padding-top: clamp(56px, 8vh, 100px); padding-bottom: clamp(64px, 10vh, 120px); } .case-layout { display: grid; grid-template-columns: 62% 38%; align-items: start; width: 100%; } .case-col-text { padding: 0 clamp(24px, 3vw, 48px) 0 clamp(20px, 4vw, 64px); max-width: 640px; } .case-block { margin-bottom: clamp(48px, 7vw, 88px); } .case-block:last-child { margin-bottom: 0; } .case-block p { font-size: 1.05rem; max-width: 56ch; } /* oversized wordmark, anchored large at the top of the left column */ .case-wordmark { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; margin-top: 24px; } .case-wordmark-name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.015em; line-height: 0.86; font-size: clamp(3.4rem, 9vw, 7rem); color: var(--ink); } .case-wordmark-slash { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.8rem); color: var(--line-strong); } .case-wordmark-accent { font-family: var(--font-serif); font-style: italic; font-weight: 500; text-transform: none; font-size: clamp(1.7rem, 4.4vw, 3.1rem); color: var(--red); } .case-caption-strip { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fg-faint); } /* metadata block: year / client / type / scope / role — a technical, tabular-numeral feel using the existing type family (no new font) */ .case-meta-block { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; margin: 24px 0 0; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .case-meta-item dt { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.62rem; color: var(--ink-faint); margin-bottom: 5px; } .case-meta-item dd { margin: 0; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; font-size: 0.85rem; color: var(--ink); } /* ---------- case pull-quote hook ---------- */ .case-hook { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(2.2rem, 5.4vw, 3.6rem); line-height: 1; margin: 28px 0 0; } .case-hook-lead { margin-top: 24px; max-width: 62ch; font-size: 1.1rem; } /* ---------- stat blocks ---------- */ .stat-grid { display: grid; grid-template-columns: 1fr; gap: clamp(20px, 3vw, 28px); margin-top: 32px; max-width: 420px; } .stat-grid--pair { grid-template-columns: repeat(2, 1fr); max-width: 420px; } .stat { border-top: 1px solid var(--line); padding-top: 20px; } .stat-value { display: block; font-family: var(--font-display); font-size: clamp(2.4rem, 5.6vw, 4.2rem); line-height: 0.95; color: var(--accent); } .stat-label { display: block; margin-top: 10px; max-width: 24ch; font-size: 0.82rem; color: var(--fg-dim); } /* ---------- case CTA links ---------- */ .case-cta-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 0.95rem; } .case-cta-links a:hover { color: var(--accent); } .case-inline-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; color: var(--accent); } .case-inline-link:hover { text-decoration: underline; } .case-inline-link-arrow { display: inline-block; transition: transform 0.2s ease; } .case-inline-link:hover .case-inline-link-arrow { transform: translateX(4px); } /* ---------- case pull-quote (now inline within the left column) ---------- */ .case-pullquote { scroll-margin-top: 140px; padding-top: 96px; padding-bottom: 56px; border-top: 1px solid var(--line); text-align: left; } .case-pullquote .kicker { margin-bottom: 24px; } .case-pullquote blockquote { margin: 0; font-family: var(--font-serif); font-style: italic; font-weight: 500; text-transform: none; font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.18; color: var(--ink); } /* a plain bold-grotesque red word interrupting the italic quote for contrast */ .case-pullquote .accent-red { font-style: normal; font-weight: 700; } .case-pullquote cite { display: block; margin: 20px 0 0; max-width: 46ch; font-style: normal; font-size: 0.95rem; color: var(--fg-faint); } /* ---------- case divider: one elegant serif-italic section break ---------- */ .case-divider { padding-top: clamp(28px, 5vw, 44px); margin-top: clamp(28px, 5vw, 44px); border-top: 1px solid var(--line); } .case-divider-line { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(1.9rem, 4.2vw, 2.8rem); color: var(--ink); } .case-showpiece-hook { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.08; font-size: clamp(1.5rem, 2.8vw, 2.1rem); color: var(--ink); margin: 16px 0 0; } /* ---------- case image column (right rail) ---------- */ /* Exact geometry: the column itself is a fixed 38% of the page (see .case-layout), but each image is capped at 460px and centered inside it, so white space frames both sides and nothing touches the true right edge of the screen. No height is ever forced on the image and no object-fit is applied: width is 100% of the 460px box, height is auto, so the full natural image always shows, however tall. */ .case-col-images { display: flex; flex-direction: column; align-items: center; gap: 28px; } .case-img { display: block; width: 100%; max-width: 460px; margin: 0 auto; } .case-img-fig { display: block; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.6rem; color: var(--ink-faint); margin-bottom: 8px; } .case-img img, .case-img video { display: block; width: 100%; height: auto; } .case-img figcaption { display: block; margin-top: 8px; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); } /* mobile-inline copies: hidden on desktop, shown under their own breakpoint */ .case-img--mobile { display: none; } .case-next-editorial { padding: clamp(56px, 9vh, 110px) 0; border-top: 1px solid var(--line); } .case-next-link { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: clamp(2.4rem, 7vw, 5rem); margin-top: 12px; transition: color 0.2s ease; } .case-next-link:hover { color: var(--accent); } /* ---------- editorial responsive ---------- */ @media (max-width: 960px) { .edge-label, .edge-folio { display: none; } .cover-foot .hero-actions { justify-content: flex-start; } .edit-caps { grid-template-columns: repeat(2, 1fr); } .edit-cap:nth-child(2n) { margin-top: 0; } .folder-scene { height: clamp(280px, 62vw, 380px); } .folder-tabs { position: static; flex-direction: row; flex-wrap: wrap; margin-top: 32px; } .folder-tab { min-width: 0; flex: 1 1 auto; border-right: 1px solid var(--line); } .folder-tab:hover, .folder-tab:focus-visible { transform: none; } .case-col-text { max-width: 100%; } } @media (max-width: 560px) { .stat-grid--pair { grid-template-columns: 1fr; } } /* two-column case study collapses to a single column: text and its inline images stack in document order; the independent right rail (with its own duplicate, more numerous set of figures) is dropped. */ @media (max-width: 860px) { .case-layout { grid-template-columns: 1fr; } .case-col-text { padding: 0 clamp(20px, 4vw, 40px); max-width: 100%; } .case-col-images { display: none; } .case-img--mobile { display: block; margin: 28px 0; } .case-wordmark-name { font-size: clamp(2.8rem, 13vw, 4.5rem); } } @media (max-width: 640px) { .edit-caps { grid-template-columns: 1fr; } } /* ---------- responsive ---------- */ @media (max-width: 860px) { .nav-toggle { display: block; } .site-nav { position: absolute; top: 72px; left: 0; right: 0; background: var(--bg); border-bottom: 1px solid var(--line-soft); flex-direction: column; align-items: flex-start; padding: 24px var(--gutter) 32px; gap: 20px; display: none; } .site-nav.is-open { display: flex; } .cap-list { grid-template-columns: 1fr; } .cap-item:nth-child(2n) { border-right: 1px solid var(--line); } .case-meta { grid-template-columns: repeat(2, 1fr); row-gap: 20px; } .contact-details { grid-template-columns: 1fr; } .work-row { grid-template-columns: 2.2rem 1fr auto; } .work-tags { display: none; } }