/* Fonts are loaded via the in each page's (Newsreader, Hanken Grotesk, Martian Mono) */ /* ─── Tokens ─────────────────────────────────────────────────────────────── */ :root { --bg: #18191a; --surface: #202123; --border: #2f3032; --text: #f2ede8; --text-2: #b5afa8; --text-3: #857f78; --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --mono: 'Martian Mono', 'Courier New', monospace; --max-w: 860px; --pad-x: clamp(1.25rem, 5vw, 3rem); } /* ─── Reset ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Top-edge vignette */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 280px; background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.25) 45%, transparent 100%); pointer-events: none; z-index: 1; } html { font-size: 16px; scroll-behavior: smooth; } html { background: var(--bg); } body { background: transparent; color: var(--text); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── Parallax grid layer ────────────────────────────────────────────────── */ .bg-grid { position: fixed; inset: -20%; background-image: radial-gradient(circle, rgba(235, 238, 245, 0.035) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; will-change: transform; z-index: 0; } /* Push all direct page content above the grid */ nav, .hero, .section, footer, .case-header, .case-body, .case-footer { position: relative; z-index: 1; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; height: auto; } /* ─── Layout ─────────────────────────────────────────────────────────────── */ .wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x); } /* ─── Nav ────────────────────────────────────────────────────────────────── */ nav { max-width: var(--max-w); margin: 0 auto; padding: 2rem var(--pad-x); display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--border); } .nav-name { font-family: var(--mono); font-size: 0.75rem; color: var(--text); } .nav-clarifier { color: var(--text-3); } .nav-links { display: flex; align-items: baseline; gap: 1.75rem; } .nav-social { font-family: var(--mono); font-size: 0.72rem; color: var(--text-3); transition: color 0.15s; } .nav-social:hover { color: var(--text); } .nav-contact { font-family: var(--mono); font-size: 0.72rem; color: var(--text-3); transition: color 0.15s; } .nav-contact:hover { color: var(--text); } /* ─── Hero ───────────────────────────────────────────────────────────────── */ .hero { max-width: var(--max-w); margin: 0 auto; padding: clamp(3.5rem, 10vw, 7rem) var(--pad-x) clamp(3rem, 7vw, 5.5rem); } .hero-text { font-family: var(--serif); font-size: clamp(1.75rem, 3.8vw, 2.65rem); font-weight: 400; line-height: 1.22; letter-spacing: -0.025em; color: var(--text); max-width: 700px; } /* ─── Section wrapper ────────────────────────────────────────────────────── */ .section { max-width: var(--max-w); margin: 0 auto; padding: clamp(2.5rem, 6vw, 4.5rem) var(--pad-x); border-top: 1px solid var(--border); } .section-label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2.5rem; } /* ─── Work list ──────────────────────────────────────────────────────────── */ .work-list { list-style: none; } .work-item { padding: 2rem 0; border-bottom: 1px solid var(--border); } .work-item:first-child { padding-top: 0; } .work-item:last-child { border-bottom: none; } .work-item-meta { font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); margin-bottom: 0.6rem; } .work-item-title { font-family: var(--serif); font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1.15; margin-bottom: 0.7rem; } .work-item-title a { transition: color 0.15s; } .work-item-title a:hover { color: var(--text-2); } .work-item-excerpt { font-size: 0.875rem; color: var(--text-2); line-height: 1.65; max-width: 580px; margin-bottom: 1rem; } .work-item-link { font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); transition: color 0.15s; } .work-item-link:hover { color: var(--text); } /* ─── Responsive video embed ─────────────────────────────────────────────── */ .case-video { position: relative; padding-bottom: 56.25%; height: 0; margin: 2.5rem 0; } .case-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; } /* ─── Body copy links ────────────────────────────────────────────────────── */ .body-link { color: var(--text); border-bottom: 1px solid var(--text-3); transition: color 0.15s, border-color 0.15s; } .body-link:hover { color: var(--text); border-color: var(--text); } /* ─── Work item image ────────────────────────────────────────────────────── */ .work-item-img { width: 100%; height: 380px; object-fit: cover; object-position: center; display: block; margin: 0.9rem 0 1rem; background: var(--surface); } /* ─── Click-to-play video player ────────────────────────────────────────── */ .work-item-player { position: relative; margin: 0.9rem 0 1rem; cursor: pointer; } .work-item-player .work-item-thumb { margin: 0; } .work-item-player .play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: none; border: none; padding: 0; cursor: pointer; opacity: 0.85; transition: opacity 0.15s ease, transform 0.15s ease; } .work-item-player .play-btn:hover { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } .work-item-player iframe { width: 100%; height: 380px; display: block; border: none; } /* ─── Bio grid ───────────────────────────────────────────────────────────── */ .bio-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .bio-photo { width: 100%; height: auto; display: block; } .bio-text p { font-size: 0.975rem; color: var(--text-2); line-height: 1.8; margin-bottom: 1.1rem; } .bio-text p:last-child { margin-bottom: 0; } .bio-text em { color: var(--text); font-style: italic; } @media (max-width: 640px) { .bio-grid { grid-template-columns: 1fr; } } .bio-photo-wrap { margin: 0; } .bio-photo-credit { margin-top: 0.4rem; font-size: 0.72rem; font-family: var(--mono); color: var(--text-3); } .bio-photo-credit a { color: var(--text-3); text-decoration: none; border-bottom: 1px solid var(--border); } .bio-photo-credit a:hover { color: var(--text-2); border-color: var(--text-3); } /* ─── Clients ────────────────────────────────────────────────────────────── */ .clients-line { font-family: var(--serif); font-size: clamp(1.1rem, 2.4vw, 1.45rem); color: var(--text-2); line-height: 1.85; letter-spacing: -0.01em; } /* ─── Archive ────────────────────────────────────────────────────────────── */ .archive-list { list-style: none; } .archive-item { padding: 1.25rem 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 72px 1fr auto auto; gap: 1.25rem; align-items: center; } .archive-date { font-family: var(--mono); font-size: 0.72rem; color: var(--text-3); white-space: nowrap; text-align: right; } .archive-thumb { width: 72px; height: 72px; aspect-ratio: 1; object-fit: cover; object-position: center; background: var(--surface); display: block; flex-shrink: 0; } .archive-item:first-child { padding-top: 0; } .archive-item:last-child { border-bottom: none; } .archive-title { font-size: 0.9rem; font-weight: 500; color: var(--text); margin-bottom: 0.2rem; } .archive-context { font-size: 0.8rem; color: var(--text-3); line-height: 1.5; } .archive-link { font-family: var(--mono); font-size: 0.72rem; color: var(--text-3); white-space: nowrap; padding-top: 0.1rem; transition: color 0.15s, border-color 0.15s; border-bottom: 1px solid var(--border); justify-self: start; width: 4.5rem; } .archive-link:hover { color: var(--text); border-color: var(--text-3); } /* ─── Talks ──────────────────────────────────────────────────────────────── */ .talks-group { margin-bottom: 2.5rem; } .talks-group:last-child { margin-bottom: 0; } .talks-group-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1.1rem; } .talks-table { width: 100%; border-collapse: collapse; } .talks-table tr { border-bottom: 1px solid var(--border); } .talks-table tr:last-child { border-bottom: none; } .talks-table td { padding: 0.85rem 0; vertical-align: top; line-height: 1.45; font-size: 0.875rem; } .talks-table td:first-child { color: var(--text); padding-right: 0.75rem; width: 45%; } .talks-table td:nth-child(2) { color: var(--text-2); } .talks-table .talks-date { font-family: var(--mono); font-size: 0.72rem; color: var(--text-3); white-space: nowrap; text-align: right; padding-left: 1.5rem; width: 1%; } /* ─── Publications ───────────────────────────────────────────────────────── */ .pub-group-label { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin: 2.25rem 0 1rem; } .pub-group-label:first-child { margin-top: 0; } .pub-list { list-style: none; } .pub-list li { font-size: 0.875rem; color: var(--text-2); line-height: 1.6; padding: 0.65rem 0; border-bottom: 1px solid var(--border); } .pub-list li:last-child { border-bottom: none; } .pub-list li em { color: var(--text); font-style: italic; } .pub-list li a { color: var(--text-3); border-bottom: 1px solid var(--border); transition: color 0.15s, border-color 0.15s; } .pub-list li a:hover { color: var(--text); border-color: var(--text-3); } .press-line { font-size: 0.875rem; color: var(--text-2); line-height: 1.6; padding-bottom: 0.65rem; border-bottom: 1px solid var(--border); margin-bottom: 0; } /* ─── Contact ────────────────────────────────────────────────────────────── */ .contact-intro { font-family: var(--serif); font-size: clamp(1.2rem, 2.5vw, 1.75rem); color: var(--text-2); line-height: 1.45; letter-spacing: -0.015em; margin-bottom: 1.75rem; max-width: 560px; } .contact-links { list-style: none; display: flex; gap: 2.5rem; } .contact-links a { font-size: 0.875rem; color: var(--text-3); transition: color 0.15s; } .contact-links a:hover { color: var(--text); } /* ─── Footer ─────────────────────────────────────────────────────────────── */ footer { max-width: var(--max-w); margin: 0 auto; padding: 2.5rem var(--pad-x) 4rem; border-top: 1px solid var(--border); font-family: var(--mono); font-size: 0.72rem; color: var(--text-3); display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; } .footer-colophon { margin-top: 0.35rem; opacity: 0.6; } /* ═══════════════════════════════════════════════════════════════════════════ Case study pages ═══════════════════════════════════════════════════════════════════════════ */ .case-back { display: inline-block; font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); transition: color 0.15s; margin-bottom: 2rem; } .case-back:hover { color: var(--text); } .case-header { max-width: var(--max-w); margin: 0 auto; padding: clamp(2rem, 5vw, 3rem) var(--pad-x) clamp(2rem, 5vw, 3.5rem); border-top: 1px solid var(--border); } .case-meta { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1rem; } .case-title { font-family: var(--serif); font-size: clamp(2rem, 5.5vw, 3.75rem); font-weight: 400; letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 1.5rem; } .case-lead { font-size: 1rem; color: var(--text-2); line-height: 1.75; max-width: 600px; } .case-body { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--pad-x) clamp(3rem, 7vw, 5rem); } .case-body p { font-size: 0.975rem; line-height: 1.8; color: var(--text-2); max-width: 600px; margin-bottom: 1.4rem; } .case-images { margin: 2.5rem 0; display: grid; gap: 0.75rem; } .case-images.two-col { grid-template-columns: 1fr 1fr; } .case-images img { width: 100%; background: var(--surface); } .case-images figcaption { font-size: 0.75rem; color: var(--text-3); margin-top: 0.5rem; grid-column: 1 / -1; } /* ─── Credits block ─────────────────────────────────────────────────────── */ .case-credits { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); } .credits-label { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 1rem; } .credits-list { margin: 0; padding: 0; } .credits-row { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--border); font-size: 0.875rem; } .credits-row:last-child { border-bottom: none; } .credits-row dt { color: var(--text-3); font-family: var(--mono); font-size: 0.72rem; padding-top: 0.1em; } .credits-row dd { margin: 0; color: var(--text-2); } /* ─── Case footer ────────────────────────────────────────────────────────── */ .case-footer { max-width: var(--max-w); margin: 0 auto; padding: 2.5rem var(--pad-x); border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; } .case-footer-back { font-size: 0.75rem; color: var(--text-3); transition: color 0.15s; } .case-footer-back:hover { color: var(--text); } .footer-links { display: flex; gap: 1.5rem; } .footer-links a { color: var(--text-3); transition: color 0.15s; white-space: nowrap; } .footer-links a:hover { color: var(--text); } /* ─── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 640px) { /* Nav: hide social links to prevent overflow */ .nav-social { display: none; } } @media (max-width: 580px) { /* Archive: collapse to 2-col, hide date and link */ .archive-item { grid-template-columns: 56px 1fr; } .archive-link { display: none; } .archive-date { display: none; } /* Talks: stack columns vertically on narrow screens */ .talks-table tr { display: flex; flex-direction: column; gap: 0.2rem; } .talks-table td { display: block; padding: 0.2rem 0 !important; width: auto !important; } .talks-table td:first-child { padding-top: 0.85rem !important; padding-right: 0; } .talks-table td:nth-child(2) { color: var(--text-2); } .talks-table .talks-date { text-align: left; padding-left: 0; padding-bottom: 0.85rem !important; } .contact-links { flex-direction: column; gap: 0.75rem; } .case-images.two-col { grid-template-columns: 1fr; } .work-item-img { height: auto; aspect-ratio: 3/2; } .archive-thumb { width: 56px; height: 56px; } } /* Scroll fade-in */ .fade-up { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } .fade-up.no-transition { transition: none; }