/* ---------------------------------------------------------------------------- Font fallback metric overrides Goal: reduce layout shift (CLS) when `display=swap` webfonts arrive on desktop. These fallbacks are used only until the real fonts load. ---------------------------------------------------------------------------- */ @font-face { font-family: "Inter Fallback"; src: local("Arial"); ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; size-adjust: 107%; } @font-face { font-family: "EB Garamond Fallback"; src: local("Georgia"); ascent-override: 92%; descent-override: 24%; line-gap-override: 0%; size-adjust: 102%; } @font-face { font-family: "DM Mono Fallback"; src: local("Courier New"); ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; size-adjust: 100%; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } :root { --bg: #faf8f4; --text: #111111; --muted: #555555; --faint: #e8e8e8; --blue: #1f2e7a; --blue-bg: #eef2fb; --code-bg: #12131f; --code-header: #1e1f2e; --code-text: #e2e8f0; } body { background: var(--bg); color: var(--text); font-family: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; display: flex; flex-direction: column; transition: opacity 180ms ease; } html.fonts-loading body { opacity: 0; pointer-events: none; } /* ── MOBILE/DESKTOP TOGGLE ── INTENTIONAL DESIGN — NOT TECHNICAL DEBT: This site has two entirely separate layout systems that cannot be unified into a single responsive flow: • Mobile/SPA view — burger nav, single-column, content stacked vertically • Desktop landing — full hero animation, horizontal nav bar, multi-column layout The `.desktop-landing-active` class is toggled on by JS on page load. The `!important` declarations in this block are load-bearing: they enforce which layout system is visible at any given time. Removing them would cause both layouts to fight each other and render broken. Do NOT consolidate or remove these overrides. The multiple `@media (min-width: 769px)` blocks further down are also intentional — each one belongs to a different page/component and is kept separate for clarity. Merging them into one block would make the file harder to maintain, not easier. */ .desktop-only { display: none; } @media (min-width: 769px) { .mobile-only { transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1); } body.desktop-landing-active .mobile-only { display: none !important; } body.desktop-landing-active .desktop-only { display: block; } /* If not on landing route, show original SPA and hide proposal root */ body:not(.desktop-landing-active) .desktop-only { display: none !important; } body:not(.desktop-landing-active) .mobile-only { display: block !important; } /* Adjust nav for SPA views on desktop when desktop landing is NOT active */ body:not(.desktop-landing-active) #mainNav { display: block !important; background: transparent !important; border: none !important; height: auto; position: relative; z-index: 1000; } body:not(.desktop-landing-active) #mainNav .nav-inner { display: none !important; } /* Shared Page Headers & Content - Desktop Unification */ body:not(.desktop-landing-active) .page-header { padding-top: 80px !important; /* Matches .work-hero padding */ } /* SPA Desktop Header: match Work page flow/spacing exactly */ #mainNav .work-header-bar.desktop-only { display: block !important; position: relative; background: rgba(250, 248, 244, 0.9); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 50; border-bottom: 1px solid #d0d0d0; } #mainNav .work-header-inner nav a.active { background: transparent; color: #111; font-weight: 600; } /* ===== NEW DESKTOP DESIGN (FROM PROPOSALS) ===== */ /* ── HERO PAGE ENTRANCE ── Starts invisible and slightly scaled down. JS adds .loaded after 100ms (see showHero in main.js) which triggers this transition. Duration: 0.8s — long enough to feel cinematic, not slow. Easing: cubic-bezier(0.65, 0, 0.35, 1) — slow start, slow end (ease-in-out S-curve). The scale goes from 0.96 → 1 simultaneously with the fade, giving a subtle "zoom into focus" feel on entrance. */ .hero-page { position: fixed; inset: 0; z-index: 10; overflow-y: auto; opacity: 0; transform: scale(0.96); transition: opacity 0.8s cubic-bezier(0.65, 0, 0.35, 1), transform 0.8s cubic-bezier(0.65, 0, 0.35, 1); background: #0a1628; } /* Fully visible state — added by showHero() after 100ms delay */ .hero-page.loaded { opacity: 1; transform: scale(1); } /* Exit state — when navigating to Work page. Same scale/opacity as default so the reverse transition mirrors the entrance exactly. */ .hero-page.hidden { opacity: 0; transform: scale(0.96); pointer-events: none; } /* ── FLASH FIX BACKGROUND ── #desktop-landing-root wraps all desktop content. The hero inside starts at opacity: 0 and takes 100ms before it fades in. Without this background, the body's cream colour (#faf8f4) would show through during that 100ms gap. Setting the same dark navy as the hero makes the gap invisible. */ #desktop-landing-root { background: #0a1628; } /* Header */ #desktop-landing-root header { display: flex; justify-content: space-between; align-items: center; padding: 24px 48px; max-width: 1200px; width: 100%; margin: 0 auto; } #desktop-landing-root header .logo { font-family: "Outfit", sans-serif; font-size: 36px; font-weight: 900; letter-spacing: -1.5px; text-transform: uppercase; font-stretch: condensed; color: #fff; background: transparent; padding: 0; display: block; } /* Logo Block - Clean / Editorial (Other Pages) */ #desktop-landing-root .work-header-inner .logo, #mainNav .work-header-inner .logo, .desktop-name { font-family: "Outfit", sans-serif !important; font-size: 25px !important; font-weight: 900 !important; letter-spacing: -0.5px !important; text-transform: uppercase !important; background: transparent !important; color: #111 !important; padding: 0 !important; display: inline-block !important; font-stretch: normal !important; border-radius: 0; } .header-divider { display: none; } .btn-contact { background: transparent !important; color: rgba(0, 0, 0, 0.75) !important; padding: 8px 12px !important; border-radius: 6px !important; font-weight: 500 !important; transition: color 0.2s, background 0.2s !important; } .btn-contact:hover { background: rgba(0, 0, 0, 0.06) !important; color: #111 !important; transform: none !important; } #desktop-landing-root nav, #mainNav .work-header-inner nav { display: flex; align-items: center; gap: 20px; position: static; background: transparent; border: none; height: auto; } #desktop-landing-root nav a, #mainNav .work-header-inner nav a { font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; color: inherit; text-decoration: none; font-size: 16px; font-weight: 500; letter-spacing: 0.2px; padding: 8px 12px; border-radius: 6px; transition: background 0.2s ease, color 0.2s ease; } #desktop-landing-root header nav a { color: rgba(255, 255, 255, 0.9); } #desktop-landing-root header nav a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } #desktop-landing-root .work-header-inner nav a, #mainNav .work-header-inner nav a { color: rgba(0, 0, 0, 0.75); } #desktop-landing-root .work-header-inner nav a:hover, #mainNav .work-header-inner nav a:hover { background: rgba(0, 0, 0, 0.06); color: #111; } /* Keep desktop SPA transitions consistent with Home -> Work motion language */ /* Hero Section */ .hero-section { min-height: 100vh; display: flex; flex-direction: column; background: transparent; } .hero-inner { flex: 1; display: flex; flex-direction: column; justify-content: space-between; max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 48px 48px; } .hero-content { max-width: 1200px; margin-top: 20vh; } .hero-headline { font-family: "EB Garamond", "EB Garamond Fallback", Georgia, "Times New Roman", Times, serif; font-size: 96px; font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; color: #fff; min-height: 220px; } #typedText { white-space: pre-wrap; } .hero-headline .cursor { display: none; width: 3px; height: 0.9em; background: #fff; margin-left: 4px; vertical-align: baseline; animation: blink 1s step-end infinite; } @keyframes blink { 50% { opacity: 0; } } .hero-footer { padding-bottom: 8px; } .cta-button { display: inline-flex; align-items: center; gap: 0; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; padding: 14px 28px; border-radius: 4px; font-size: 18px; font-weight: 500; text-decoration: none; cursor: pointer; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .cta-button:hover { background: rgba(255, 255, 255, 0.2); padding-right: 24px; } .cta-text { transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .cta-button:hover .cta-text { transform: translateX(-4px); } .cta-arrow { display: inline-flex; align-items: center; justify-content: center; opacity: 0; transform: translateX(-8px); transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); margin-left: 6px; width: 0; overflow: visible; } .cta-button:hover .cta-arrow { opacity: 1; transform: translateX(0); width: 16px; } .cta-arrow svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* ===== WORK PAGE ===== */ .work-page { position: fixed; inset: 0; z-index: 5; background: var(--bg); overflow-y: auto; } .work-header-bar { position: relative; background: rgba(250, 248, 244, 0.9); /* Matches --bg (#faf8f4) with 0.9 opacity */ backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 50; border-bottom: 1px solid #d0d0d0; } .work-header-inner { display: flex; justify-content: space-between; align-items: center; padding: 16px 48px; max-width: 1200px; margin: 0 auto; } .work-header-inner nav { display: flex; align-items: center; gap: 4px; position: static; background: transparent; border: none; height: auto; } .work-header-inner nav a { color: rgba(0,0,0,0.75); text-decoration: none; font-size: 15px; font-weight: 500; letter-spacing: 0.2px; padding: 8px 12px; border-radius: 6px; transition: background 0.2s ease, color 0.2s ease; } .work-header-inner nav a:hover { background: rgba(0,0,0,0.06); color: #111; } #desktop-landing-root .work-header-inner nav a { color: rgba(0, 0, 0, 0.75); } #desktop-landing-root .work-header-inner nav a:hover { background: rgba(0, 0, 0, 0.06); color: #111; } .work-hero { padding: 80px 48px 40px; max-width: 1200px; margin: 0 auto; border-bottom: 1px solid var(--faint); } .work-hero h1 { font-family: "EB Garamond", "EB Garamond Fallback", Georgia, "Times New Roman", Times, serif; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.02em; color: #111; margin-bottom: 1.5rem; max-width: 18ch; } .work-hero .subtitle { font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.8; color: #666; max-width: 52ch; } @keyframes slideUp { to { opacity: 1; transform: translateY(0); } } /* Filters */ .filters { display: flex; justify-content: space-between; align-items: center; padding: 40px 48px 24px; max-width: 1200px; margin: 0 auto; border-bottom: 1px solid rgba(0,0,0,0.08); opacity: 0; transform: translateY(20px); } /* Filters slide up: 0.7s duration, 0.25s delay after .visible is added. Easing: cubic-bezier(0.16, 1, 0.3, 1) — fast out, spring-like deceleration. */ .filters.visible { animation: slideUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s forwards; } .filter-tabs { display: flex; gap: 24px; align-items: center; } .filter-tabs button { background: none; border: none; font-family: inherit; font-size: 15px; color: #bbb; cursor: pointer; padding: 0; transition: color 0.3s; font-weight: 500; } .filter-tabs button.active { color: #111; font-weight: 600; } .filter-tabs button:hover { color: #666; } .filter-separator { color: #ddd; font-weight: 300; } .view-toggle { display: flex; gap: 12px; } .view-toggle button { background: none; border: none; cursor: pointer; padding: 4px; color: #bbb; transition: color 0.3s; } .view-toggle button:hover { color: #111; } /* Projects Grid */ .projects { padding: 40px 48px 120px; max-width: 1200px; margin: 0 auto; } .projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .project-card { position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; background: #e8e8e8; aspect-ratio: 4/3; opacity: 0; transform: translateY(40px) scale(0.96); } /* Work page cards reveal: 0.9s duration, staggered by card position. Each card starts opacity:0 + translateY(40px) + scale(0.96). Delays cascade at 0.15s intervals: card 1 → 0.35s, card 2 → 0.5s, etc. This creates the ripple/waterfall effect as cards enter one after another. */ .project-card.visible { animation: cardReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .project-card:nth-child(1).visible { animation-delay: 0.35s; } .project-card:nth-child(2).visible { animation-delay: 0.5s; } .project-card:nth-child(3).visible { animation-delay: 0.65s; } .project-card:nth-child(4).visible { animation-delay: 0.8s; } @keyframes cardReveal { to { opacity: 1; transform: translateY(0) scale(1); } } .project-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .project-card:hover img { transform: scale(1.05); } .project-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 50%); display: flex; flex-direction: column; justify-content: flex-end; padding: 28px; opacity: 0; transition: opacity 0.4s ease; } .project-card:hover .project-overlay { opacity: 1; } .project-title { font-size: 22px; font-weight: 600; color: #fff; line-height: 1.2; } } /* ── SPA ROUTER CLASSES ── */ .view-section { width: 100%; animation: fadeIn 0.3s ease-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } body.article-open { background: #f4f1e6 !important; } body.article-open #mainNav, body.article-open #mainNav .work-header-bar, body.article-open nav, body.article-open footer { background: transparent !important; border-bottom: none !important; backdrop-filter: none !important; } /* NAV */ nav { position: relative; z-index: 1000; background: #faf8f4; border-bottom: 1.5px solid #d0d0d0; height: 76px; transition: padding-right 0s, border-bottom-color 0.3s; } nav.menu-active { border-bottom-color: transparent; } .nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 3.5rem; height: 100%; display: flex; align-items: center; justify-content: space-between; position: relative; } .nav-name { font-family: "DM Mono", "DM Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 16px; font-weight: 400; color: var(--text); text-decoration: none; letter-spacing: 0.02em; } /* Desktop name style is now handled by the unified logo block rule above */ .desktop-name { /* Inherits from the rule at line 192 */ } .mobile-name { display: none; } .nav-left-group { display: flex; align-items: center; gap: 1.5rem; } @media (min-width: 769px) { .nav-links { gap: 20px; } } .nav-links { display: flex; gap: 4px; list-style: none; align-items: center; } .nav-links a { font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; font-weight: 500; color: rgba(0, 0, 0, 0.75); text-decoration: none; padding: 8px 12px; border-radius: 6px; transition: color 0.2s, background 0.2s; } .nav-links a:hover { color: #111; background: rgba(0, 0, 0, 0.06); } .nav-links a.active { color: #111; background: transparent; } .nav-left-group .nav-name { transform: translateY(2px); } .nav-left-group .nav-links { transform: translateY(5px); } .nav-actions { display: flex; align-items: center; gap: 0.75rem; } .nav-email { font-size: 14px; font-weight: 500; background: transparent; color: var(--text) !important; text-decoration: none; border: 1.5px solid #d6d2c4; padding: 7px 16px; border-radius: 4px; transition: background 0.15s, border-color 0.15s; } .nav-email:hover { background: #f4f1e6; border-color: #b8b4a6; } /* ── MOBILE HAMBURGER ── */ .nav-burger { display: none; background: none; border: none; cursor: pointer; width: 30px; height: 30px; align-items: center; justify-content: flex-end; padding: 0; position: relative; z-index: 1100; } .nav-burger span { display: block; width: 24px; height: 2px; background: var(--text); position: relative; transition: background 0.3s; } .nav-burger span::before { content: ""; position: absolute; top: -7px; right: 0; width: 16px; height: 2px; background: var(--text); transition: transform 0.3s, width 0.3s, top 0.3s; } .nav-burger.active span { background: transparent; } .nav-burger.active span::before { width: 24px; transform: rotate(45deg); top: 0; } .nav-burger.active span::after { content: ""; position: absolute; top: 0; right: 0; width: 24px; height: 2px; background: var(--text); transform: rotate(-45deg); } /* ── FULL-SCREEN EDITORIAL MENU ── */ .mobile-menu { position: fixed; inset: 0; background: var(--bg); z-index: 950; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; display: flex; flex-direction: column; justify-content: center; padding: 2rem; } .mobile-menu.active { opacity: 1; pointer-events: auto; } .mobile-menu a { font-family: "EB Garamond", "EB Garamond Fallback", Georgia, "Times New Roman", Times, serif; font-size: 3.5rem; font-weight: 500; line-height: 1.1; color: var(--text); text-decoration: none; display: block; margin-bottom: 1rem; transform: translateY(30px); opacity: 0; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease; } .mobile-menu.active a { transform: translateY(0); opacity: 1; } .mobile-menu a:nth-child(1) { transition-delay: 0.1s; } .mobile-menu a:nth-child(2) { transition-delay: 0.15s; } .mobile-menu a:nth-child(3) { transition-delay: 0.2s; } .mobile-menu a:nth-child(4) { transition-delay: 0.25s; color: var(--blue); font-style: italic; } /* ── SHARED PAGE HEADERS & CONTENT ── */ .page-header { width: 100%; max-width: 1200px; margin: 0 auto; padding: 5rem 3.5rem 4rem; border-bottom: 1px solid var(--faint); } .page-label { font-family: "DM Mono", "DM Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); margin-bottom: 1.5rem; display: block; } .page-title { font-family: "EB Garamond", "EB Garamond Fallback", Georgia, "Times New Roman", Times, serif; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 400; line-height: 1.08; color: var(--text); margin-bottom: 1.5rem; max-width: 18ch; letter-spacing: -0.02em; } .page-title em { font-style: normal; color: inherit; } .page-desc { font-family: "Inter", sans-serif; font-size: 16px; line-height: 1.8; color: var(--muted); max-width: 52ch; } .page-content { width: 100%; max-width: 1200px; margin: 0 auto; padding: 4rem 3.5rem 6rem; } .mobile-title { display: none; } .desktop-title { display: block; } .mobile-xs-title { display: none; } .show-on-xxs { display: none; } .btn-primary { font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: 0.06em; padding: 13px 26px; background: var(--text); color: #fff; text-decoration: none; border-radius: 4px; display: inline-flex; align-items: center; gap: 8px; transition: background 0.2s; white-space: nowrap; } .btn-primary:hover { background: var(--blue); } .btn-secondary { font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: 0.06em; padding: 13px 26px; background: transparent; color: var(--muted); text-decoration: none; border: 1.5px solid var(--faint); border-radius: 4px; display: inline-flex; align-items: center; gap: 10px; transition: all 0.2s ease; white-space: nowrap; } .btn-secondary:hover { border-color: var(--blue); background: var(--blue); color: #fff; } .btn-secondary svg { transition: transform 0.2s ease; } .btn-secondary:hover svg { transform: translateX(-4px); } .scroll-icon { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: inline-block; } .circle-arrow { width: 34px; height: 34px; border: 1.5px solid var(--faint); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s, background 0.2s; } .circle-arrow svg { width: 12px; height: 12px; stroke: var(--muted); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s; } .btn-ghost { font-family: "DM Mono", "DM Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--faint); padding-bottom: 2px; transition: color 0.15s, border-color 0.15s; white-space: nowrap; } .btn-ghost:hover { color: var(--text); border-color: var(--text); } /* ── HOMEPAGE: HERO ── */ .hero { max-width: 1200px; margin: 0 auto; min-height: calc(100vh - 66px); display: flex; flex-direction: column; justify-content: flex-start; padding: 18vh 3.5rem 4rem; border-bottom: 1px solid var(--faint); } .hero-title { font-family: "EB Garamond", "EB Garamond Fallback", Georgia, "Times New Roman", Times, serif; font-size: clamp(3rem, 6.5vw, 6.5rem); font-weight: 500; line-height: 1.05; color: var(--text); letter-spacing: -0.02em; margin-bottom: 5rem; max-width: 20ch; position: relative; } .hero-title em { font-style: italic; color: var(--blue); } .hero-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; padding-top: 2rem; border-top: 1px solid var(--faint); } .hero-foot-left { font-family: "DM Mono", "DM Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); line-height: 1.8; } .hero-actions { display: flex; gap: 1.5rem; align-items: center; } .hero-actions .btn-primary { font-size: 13px; padding: 14px 28px; } .hero-actions .btn-ghost { font-size: 13px; } .btn-hire-mobile { display: none; } /* HOMEPAGE: SHARED PROJECTS LIST */ .shared-work { padding: 4rem 3.5rem 8rem; width: 100%; max-width: 1200px; margin: 0 auto; } .shared-project-item { display: grid; grid-template-columns: 200px 1fr auto; gap: 3rem; padding: 3.5rem 0; border-bottom: 1px solid var(--faint); text-decoration: none; color: var(--text); align-items: start; } .shared-project-item:first-of-type { padding-top: 0; } .shared-project-item:last-child { border-bottom: none; padding-bottom: 0; } .shared-p-meta { font-family: "DM Mono", "DM Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); padding-top: 8px; } .shared-p-title { font-family: "EB Garamond", "EB Garamond Fallback", Georgia, "Times New Roman", Times, serif; font-size: 1.8rem; font-weight: 500; color: #222; line-height: 1.25; margin-bottom: 0.75rem; max-width: 35ch; letter-spacing: -0.02em; transition: color 0.15s; } .shared-p-desc { font-family: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; color: var(--muted); line-height: 1.7; max-width: 55ch; } .shared-project-item:hover .circle-arrow { border-color: var(--blue); background: var(--blue); } .shared-project-item:hover .circle-arrow svg { stroke: #fff; } /* ── DESKTOP PROJECT REVEAL LOGIC ── */ @media (min-width: 769px) { #work { display: none; } #work.revealed { display: block; animation: revealProjects 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards; } } @keyframes revealProjects { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ── RESPONSIVE INLINE TEXT ── */ .desktop-inline { display: inline; } .mobile-inline { display: none; } /* ========================================= HIRE ME PAGE - MINIMAL UNDERLINES FORM ========================================= */ .hire-form-wrap { max-width: 800px; width: 100%; } .hire-grid-2 { display: grid; grid-template-columns: 1fr; gap: 3rem; } .hire-field { margin-bottom: 2.5rem; } .hire-field label { font-family: "DM Mono", monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 0.6rem; display: block; } .hire-field input, .hire-field textarea { width: 100%; font-family: "Inter", sans-serif; padding: 10px 0; border: none; border-bottom: 2px solid #ccc; background: transparent; color: var(--text); border-radius: 0; font-size: 18px; transition: border-color 0.3s; outline: none; } .hire-field input:focus, .hire-field textarea:focus { border-bottom-color: var(--blue); } .hire-field input:focus-visible, .hire-field textarea:focus-visible { border-bottom-color: var(--blue); outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 2px; } .hire-field textarea { min-height: 80px; resize: vertical; } .hire-field input::placeholder, .hire-field textarea::placeholder { color: #b0b0b0; opacity: 0.8; } .hire-submit-row { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; } .btn-submit { font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: 0.06em; background: var(--text); color: #fff; padding: 14px 32px; border-radius: 4px; border: none; cursor: pointer; transition: background 0.2s; display: inline-block; text-transform: uppercase; } .btn-submit:hover { background: var(--blue); } .form-note { font-family: "DM Mono", monospace; font-size: 11px; color: var(--muted); letter-spacing: 0.02em; margin-left: 1rem; } .success-msg { display: none; font-family: "EB Garamond", serif; font-size: 1.4rem; font-weight: 500; color: var(--text); line-height: 1.5; padding: 2rem 0; } .success-msg em { font-style: italic; color: var(--blue); } /* RESEARCH PAGE CAROUSELS */ .category { max-width: 1200px; margin: 0 auto; padding: 4rem 3.5rem; border-bottom: 1px solid var(--faint); } .category:last-of-type { border-bottom: none; } .cat-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 2.5rem; } .cat-title { font-family: "EB Garamond", serif; font-size: 1.6rem; font-weight: 600; color: var(--text); } .cat-nav { display: flex; gap: 8px; } .cat-btn { width: 34px; height: 34px; border: 1.5px solid var(--faint); border-radius: 50%; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.15s, background 0.15s; flex-shrink: 0; } .cat-btn:hover { border-color: var(--blue); background: var(--blue-bg); } .cat-btn:disabled { opacity: 0.3; cursor: default; } .cat-btn:disabled:hover { border-color: var(--faint); background: none; } .cat-btn svg { width: 12px; height: 12px; stroke: var(--text); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .carousel-wrap { overflow-x: auto; overflow-y: hidden; position: relative; padding-top: 10px; padding-bottom: 30px; margin-top: -10px; margin-bottom: -30px; scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .carousel-wrap::-webkit-scrollbar { display: none; } .carousel-track { display: flex; gap: 20px; } .research-card { flex-shrink: 0; width: 480px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 1rem; scroll-snap-align: start; } .card-img { background: var(--faint); border-radius: 6px; overflow: hidden; width: 100%; aspect-ratio: 4 / 5; height: auto; position: relative; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .card-title { font-family: "EB Garamond", serif; font-size: 1.1rem; font-weight: 600; line-height: 1.4; color: var(--text); } /* LAB PAGE TOOLS */ .tools { max-width: 1200px; margin: 0 auto; padding: 1.5rem 3.5rem 6rem; } .tools-list { display: flex; flex-direction: column; } .tool-row { display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 3rem; padding: 2.5rem 1rem; border-bottom: 1px solid var(--faint); cursor: pointer; border-radius: 6px; margin: 0 -1rem; transition: background 0.15s; } .tool-row:first-child { border-top: 1px solid var(--faint); } .tool-row:hover { background: #f7f6f3; } .tool-row:hover .tool-title { color: var(--blue); } .tool-row:hover .tool-arrow { border-color: var(--blue); background: var(--blue); } .tool-row:hover .tool-arrow svg { stroke: #fff; } .tool-type { font-family: "DM Mono", monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); opacity: 0.55; margin-bottom: 0.6rem; } .tool-title { font-family: "EB Garamond", serif; font-size: 1.8rem; font-weight: 500; line-height: 1.25; color: var(--text); transition: color 0.15s; } .tool-desc { font-size: 15px; line-height: 1.8; color: var(--muted); } .tool-arrow { width: 34px; height: 34px; border: 1.5px solid var(--faint); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color 0.2s, background 0.2s; } .tool-arrow svg { width: 12px; height: 12px; stroke: var(--muted); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.2s; } @media (min-width: 769px) { .tools-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .tool-row { display: flex; flex-direction: column; align-items: flex-start; padding: 2rem; margin: 0; border: 1px solid var(--faint) !important; border-radius: 10px; gap: 0; } .tool-row:first-child { border-top: 1px solid var(--faint) !important; } .tool-row:last-child { border-bottom: 1px solid var(--faint) !important; } .tool-row::before { display: none; } .tool-left { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 0.6rem; } .tool-type { display: none; margin-bottom: 0.2rem; } .tool-title { font-size: 1.5rem; } .tool-desc { flex: 1; padding-top: 0.6rem; font-size: 14px; } .tool-arrow { margin-top: 1.5rem; /* Design 3: reset circle, apply underlined text */ width: auto; height: auto; border: none; border-radius: 0; background: transparent; flex-shrink: unset; font-family: "DM Mono", monospace; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid #bbb; padding-bottom: 2px; transition: color 0.15s, border-color 0.15s; } #view-services .tool-arrow, #view-lab .tool-arrow, .work-page .tool-arrow { font-family: "Inter", sans-serif; font-size: 14px; text-transform: none; } #view-services .tool-arrow::before { content: "Hire me"; } #view-lab .tool-arrow::before { content: "Visit"; } .work-page .tool-arrow::before { content: "View projects"; } .tool-arrow svg { display: none; } .tool-row:hover .tool-arrow { color: var(--text); border-color: var(--text); background: transparent; } } /* ── LAB PAGE: TABLET (769px – 1024px) ── INTENTIONAL DESIGN — NOT TECHNICAL DEBT: The lab/tools grid has three distinct layouts by design: • Desktop (>1024px) — 3-column grid, full card sizing • Tablet (769–1024px) — 2-column grid; 3 columns is ~203px per card at 769px, too cramped • Mobile (<769px) — 1-column stacked This mid-range breakpoint exists specifically because the desktop 3-column layout does not scale down gracefully to tablet widths. It is a deliberate layout decision, not an oversight or redundancy. */ @media (min-width: 769px) and (max-width: 1024px) { /* Tighten the outer padding */ .tools { padding: 1.5rem 2.5rem 5rem; } /* 3 columns is ~203px per card at 769px — too cramped. 2 columns is clean. */ .tools-list { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } /* Slightly smaller title so it fits the narrower card without wrapping badly */ .tool-title { font-size: 1.35rem; } /* Slightly smaller desc text */ .tool-desc { font-size: 13px; } } /* HERO — tablet overrides */ @media (min-width: 769px) and (max-width: 1024px) { .hero-inner { padding: 0 36px 36px; } .hero-content { margin-top: 14vh; } .hero-headline { font-size: 64px; min-height: 150px; } } /* 404 PAGE */ .fourofour { flex: 1; max-width: 1200px; margin: 0 auto; padding: 8rem 3.5rem 6rem; width: 100%; } .fourofour-num { font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin-bottom: 1.75rem; display: block; } .fourofour-title { font-family: "EB Garamond", serif; font-size: clamp(2.4rem, 5vw, 4.5rem); font-weight: 500; line-height: 1.08; color: var(--text); letter-spacing: -0.02em; margin-bottom: 1.5rem; max-width: 18ch; } .fourofour-title em { font-style: italic; color: var(--blue); } .fourofour-desc { font-family: "DM Mono", monospace; font-size: 13px; color: var(--muted); line-height: 1.8; max-width: 44ch; margin-bottom: 2.5rem; letter-spacing: 0.01em; } .fourofour-actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } .btn-home { font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: 0.06em; background: var(--text); color: #fff; padding: 13px 26px; border-radius: 4px; text-decoration: none; transition: background 0.2s; } .btn-home:hover { background: var(--blue); } .btn-back { font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--faint); padding-bottom: 2px; transition: color 0.15s, border-color 0.15s; white-space: nowrap; } .btn-back:hover { color: var(--text); border-color: var(--text); } /* ORIGINAL FOOTER */ footer { border-top: 1px solid var(--faint); background: var(--bg); margin-top: auto; } .work-page-footer { border-top: 1px solid var(--faint); background: transparent; margin-top: 2rem; } .footer-inner { max-width: 1200px; margin: 0 auto; padding: 2.5rem 3.5rem 3rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-copy { font-family: "DM Mono", monospace; font-size: 14px; color: var(--muted); letter-spacing: 0.02em; } .footer-links { display: flex; gap: 2rem; } .footer-links a { font-family: "DM Mono", monospace; font-size: 14px; letter-spacing: 0.02em; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s; } .footer-links a:hover { color: var(--text); } /* ======================================================================== MOBILE RESPONSIVENESS OVERRIDES (<= 768px) INTENTIONAL DESIGN — NOT TECHNICAL DEBT: Everything below this point overrides desktop styles for mobile screens. Rules here are deliberately more specific than their desktop counterparts because they must win the cascade. Do not flatten these into generic rules — mobile and desktop layouts differ structurally (nav system, grid columns, font sizing, chart wrapper behaviour), not just cosmetically. ======================================================================== */ @media (max-width: 768px) { .nav-inner { padding: 0 1.5rem; } .nav-burger { display: flex; } .nav-links { display: none !important; } .nav-left-group .nav-links { display: none !important; } .nav-actions { display: none !important; } .desktop-name { display: none; } .mobile-name { display: inline; font-family: "EB Garamond", serif; font-size: 22px; font-weight: 600; color: var(--text); } .hero { padding: 4.5rem 1.5rem 4rem; min-height: auto; justify-content: flex-start; } .hero-title, .page-title { font-size: 2.5rem !important; line-height: 1.1; letter-spacing: -0.015em; } .hero-title { margin-bottom: 3.5rem; } .hero-actions .scroll-icon { display: none; } .btn-hire-mobile { display: inline-flex; align-items: center; justify-content: center; font-family: "DM Mono", "DM Mono Fallback", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; letter-spacing: 0.06em; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--faint); padding-bottom: 2px; transition: color 0.15s, border-color 0.15s; white-space: nowrap; } .btn-hire-mobile:hover { color: var(--text); border-color: var(--text); } #work { display: block !important; } .shared-work { padding: 3rem 1.5rem 6rem; } .shared-project-item { grid-template-columns: 1fr auto; gap: 1.5rem; padding: 2rem 0; align-items: center; } .shared-p-meta, .shared-p-desc { display: none; } .shared-p-title { font-size: 1.35rem; margin-bottom: 0; } .desktop-title { display: none; } .mobile-title { display: block; } .hide-on-mobile { display: none !important; } .hide-on-xs { display: block; } .mobile-xs-title { display: none; } .footer-inner { padding: 2.5rem 1.5rem; flex-direction: column-reverse; align-items: flex-start; gap: 1.5rem; } .footer-copy { display: block; color: var(--muted); opacity: 0.7; } .footer-links { gap: 1.5rem; flex-wrap: wrap; } .article { padding: 1.75rem 1.25rem 4.5rem; font-size: 16px; } .article-title { font-size: 1.85rem; } .article h2 { font-size: 1.45rem; } .article h3 { font-size: 1.2rem; } .article p, .article li { font-size: 15.5px; line-height: 1.75; } .article blockquote { font-size: 1.5rem; } .result-item p { font-size: 15px; } .article table { font-size: 13px; } .article th { font-size: 10px; padding: 10px 8px; } .article td { padding: 12px 8px; } .placebo-results-mobile { display: flex; } /* ── MOBILE: charts sit flush with article content, no bleed ── */ .chart-scene { margin-left: 0; margin-right: 0; width: 100%; } .chart-ratio { padding-bottom: 108%; } .ratio-chow { padding-bottom: 88%; } .ratio-chow-synth { padding-bottom: 84%; } .ratio-delivery { padding-bottom: 98%; } .ratio-chow-placebo { padding-bottom: 84%; } .collapsible-toggle h2 { font-size: 1.1rem; } .ratio-campaign-dist { padding-bottom: 88%; } .ratio-campaign-trend { padding-bottom: 84%; } .chart-title-block { display: none; } .chart-title-block.show-on-mobile { display: block; margin-bottom: 0.85rem; } .chart-title-block.show-on-mobile .ct-title { font-size: 0.88rem; font-weight: 500; line-height: 1.35; } .chart-title-block.show-on-mobile .ct-sub { font-size: 0.88rem; line-height: 1.5; } /* Delivery project: chart-title-block has no show-on-mobile, keep it visible with slightly larger text */ #data-delivery .chart-title-block { display: block; margin-bottom: 0.35rem !important; } #data-delivery .chart-title-block .ct-title { font-size: 0.88rem; font-weight: 500; line-height: 1.35; } #data-delivery .chart-title-block .ct-sub { font-size: 0.9rem; } .mobile-br { display: inline; } .desktop-sub { display: none; } .mobile-sub { display: block; } .desktop-inline { display: none !important; } .mobile-inline { display: inline !important; } .fourofour { padding: 5rem 1.5rem 4rem; } .fourofour-title { font-size: 2.2rem; } .page-header { padding: 3.5rem 1.5rem 3rem; } #view-lab .page-header, #view-services .page-header { border-bottom: none; } .page-content { padding: 3rem 1.5rem 5rem; } .category { padding: 3rem 1.5rem; } .research-card { width: 280px; } .card-img { width: 100%; height: auto; aspect-ratio: 4 / 5; } .tools { padding: 3rem 1.5rem 5rem; } .tool-row { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: start; gap: 0.5rem 1rem; } .tool-row:last-child { border-bottom: none; } .tool-left { grid-column: 1; grid-row: 1; } .tool-desc { display: block; grid-column: 1 / -1; grid-row: 2; font-size: 14px; line-height: 1.75; color: var(--muted); padding-top: 0.15rem; } .tool-arrow { grid-column: 2; grid-row: 1; align-self: center; } #view-services .tool-row { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } #view-services .tool-arrow { grid-column: 1; grid-row: 3; align-self: start; justify-self: start; margin-top: 1rem; width: auto; height: auto; border: none; border-radius: 0; background: transparent; border-bottom: 1px solid #bbb; padding-bottom: 3px; font-family: "Inter", sans-serif; font-size: 16px; color: var(--muted); transition: color 0.15s, border-color 0.15s; } #view-services .tool-arrow::before { content: "Hire me"; } #view-services .tool-arrow svg { display: none; } #view-services .tool-row:hover .tool-arrow { color: var(--text); border-color: var(--text); } #view-lab .tool-row { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } #view-lab .tool-arrow { grid-column: 1; grid-row: 3; align-self: start; justify-self: start; margin-top: 1rem; width: auto; height: auto; border: none; border-radius: 0; background: transparent; border-bottom: 1px solid #bbb; padding-bottom: 3px; font-family: "Inter", sans-serif; font-size: 16px; color: var(--muted); transition: color 0.15s, border-color 0.15s; } #view-lab .tool-arrow::before { content: "Visit"; } #view-lab .tool-arrow svg { display: none; } #view-lab .tool-row:hover .tool-arrow { color: var(--text); border-color: var(--text); } .tool-type { display: none; } .tool-title { font-size: 1.4rem; } .modal-overlay { padding: 0; align-items: flex-end; } .modal-box { height: 92vh; border-radius: 18px 18px 0 0; transform: translateY(100%) scale(1); box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15); } .modal-overlay.active .modal-box { transform: translateY(0) scale(1); } .modal-bar { padding: 0.85rem 1rem 0.85rem 1.25rem; } .modal-handle-wrap { display: flex; position: absolute; top: 0; left: 0; right: 0; justify-content: center; padding-top: 10px; pointer-events: none; } .modal-handle { width: 36px; height: 4px; background: var(--faint); border-radius: 2px; } .modal-label { padding-top: 6px; } .modal-close { margin-top: 4px; } } @media (min-width: 769px) { .hire-grid-2 { grid-template-columns: 1fr 1fr; } .chart-divider { margin-bottom: 4rem; } } /* ── SMALL MOBILE (<=420px) — INTENTIONAL: Phones like iPhone SE and small Androids need tighter font sizing and spacing. This is a third genuine layout tier, not redundancy with the 768px breakpoint. */ @media (max-width: 420px) { .hero-title, .page-title { font-size: 2.2rem !important; } .fourofour-title { font-size: 1.85rem; } .hide-on-xs { display: none !important; } .mobile-xs-title { display: block !important; } } @media (max-width: 359px) { .hero-title, .page-title { font-size: 1.8rem !important; } .hide-on-xxs { display: none !important; } .show-on-xxs { display: block !important; } } /* Collapsible section styles */ .collapsible-section { margin: 2rem 0; } .collapsible-toggle { width: 100%; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 6px; padding: 1rem 1.25rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; text-align: left; transition: background-color 0.2s ease; } .collapsible-toggle:hover { background: #ebebeb; } .collapsible-toggle h2 { margin: 0; font-size: 1.25rem; font-family: "EB Garamond", serif; font-weight: 600; color: var(--text); } .toggle-icon { font-size: 1.5rem; font-weight: 300; color: var(--muted); transition: transform 0.2s ease; } .collapsible-toggle.active .toggle-icon { transform: rotate(45deg); } .collapsible-content { padding: 1.5rem 0 0; animation: fadeIn 0.3s ease-out; } .collapsible-content[style*="block"] { display: block !important; }