@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root { --ink: #1d1d1b; --paper: #e8e4dc; --muted: #77736c; --red: #a43b2f; --night: #20211f; --line: rgba(29,29,27,.2); --sans: 'DM Sans', sans-serif; --serif: 'Playfair Display', Georgia, serif; --mono: 'DM Mono', monospace; }
* { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; } body:has(.lightbox[open]) { overflow: hidden; } a { color: inherit; text-decoration: none; } img, video { display: block; width: 100%; } button { font: inherit; }
.site-header { align-items: center; display: flex; height: 84px; justify-content: space-between; left: 0; padding: 0 4vw; position: absolute; right: 0; top: 0; z-index: 5; } .wordmark { font-family: var(--serif); font-size: 25px; letter-spacing: -.05em; } .wordmark span { color: var(--red); } .desktop-nav { display: flex; gap: 30px; margin-left: 18vw; } .desktop-nav a, .header-resume, .eyebrow, .section-label, .hero-note, .text-link, .contact-link { font-family: var(--mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; } .desktop-nav a:hover, .header-resume:hover, .text-link:hover, .contact-link:hover { color: var(--red); } .header-resume span, .text-link span, .contact-link span { color: var(--red); font-size: 14px; } .menu-toggle, .mobile-nav { display: none; }
.hero { min-height: 100vh; overflow: hidden; padding: 11vh 4vw 5vh; position: relative; } .hero-image { overflow: hidden; position: absolute; } .hero-image img { height: 100%; object-fit: cover; } .hero-image-main { height: 80vh; right: 8vw; top: 10vh; width: 49vw; } .hero-image-main img { object-position: 48% center; } .hero-image-detail { bottom: 4vh; height: 32vh; left: 9vw; width: 16vw; } .hero-image-detail img { object-position: center top; } .hero-copy { position: relative; z-index: 1; } .eyebrow { align-items: center; display: flex; gap: 12px; } .eyebrow span { color: var(--red); } .hero h1 { font-size: clamp(72px, 11vw, 166px); font-weight: 500; letter-spacing: -.07em; line-height: .8; margin: 16vh 0 0 -7px; } .hero h1 em, h2 em { font-family: var(--serif); font-weight: 500; } .circle-link { align-items: center; border: 1px solid var(--ink); border-radius: 50%; display: flex; flex-direction: column; font-family: var(--mono); font-size: 10px; height: 115px; justify-content: center; line-height: 1.35; margin: 7vh 0 0 28vw; text-align: center; text-transform: uppercase; transition: background .25s, color .25s; width: 115px; } .circle-link b { color: var(--red); font-size: 17px; font-weight: 400; margin-top: 7px; } .circle-link:hover { background: var(--ink); color: var(--paper); } .hero-note { bottom: 5vh; position: absolute; right: 4vw; text-align: right; }
.section-pad { padding: 11vw 8vw; } .section-label { border-top: 1px solid var(--line); color: var(--red); padding-top: 11px; } .section-label span { color: var(--muted); margin-left: 14px; } .intro { display: grid; gap: 8vw; grid-template-columns: 1fr 3fr; } .intro-content { max-width: 900px; } .kicker { color: var(--red); font-family: var(--mono); font-size: 11px; text-transform: uppercase; } .intro h2, .reel h2, .gallery-heading h2, .contact-copy h2 { font-size: clamp(42px, 6vw, 88px); font-weight: 500; letter-spacing: -.06em; line-height: .93; margin: 4vh 0 7vh; } .intro-meta { display: flex; gap: 7vw; max-width: 660px; } .intro-meta p { color: #54514b; max-width: 390px; } .text-link { border-bottom: 1px solid var(--ink); height: fit-content; padding-bottom: 7px; white-space: nowrap; }
.dark-section { background: var(--night); color: var(--paper); } .dark-section .section-label { border-color: rgba(232,228,220,.25); } .dark-section .section-label span, .reel-heading p { color: #aba9a2; } .reel-heading { align-items: end; display: flex; justify-content: space-between; } .reel h2 { margin-bottom: 6vh; } .video-wrap { background: #10110f; margin: 0 auto; max-width: 1100px; padding: 1px; } .video-wrap video { aspect-ratio: 16 / 9; object-fit: cover; }
.gallery-heading { align-items: end; display: flex; justify-content: space-between; } .gallery-heading h2 { margin-bottom: 6vh; } .gallery-heading p { color: var(--muted); font-family: var(--mono); font-size: 10px; text-transform: uppercase; } .gallery-grid { display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); } .gallery-item { background: #d4d0c8; cursor: zoom-in; overflow: hidden; position: relative; } .gallery-item:nth-child(4n+1), .gallery-item:nth-child(4n+4) { grid-column: span 4; } .gallery-item:nth-child(4n+2), .gallery-item:nth-child(4n+3) { grid-column: span 8; } .gallery-item:nth-child(4n+1), .gallery-item:nth-child(4n+4) { aspect-ratio: .8; } .gallery-item:nth-child(4n+2), .gallery-item:nth-child(4n+3) { aspect-ratio: 1.3; } .gallery-item img { height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); } .gallery-item:hover img { transform: scale(1.04); } .gallery-item figcaption { background: var(--paper); bottom: 10px; font-family: var(--mono); font-size: 9px; left: 10px; padding: 4px 7px; position: absolute; text-transform: uppercase; }
.contact-section { background: var(--red); color: var(--paper); display: grid; grid-template-columns: 1fr 1fr; min-height: 75vh; } .contact-image { overflow: hidden; } .contact-image img { height: 100%; object-fit: cover; object-position: center top; } .contact-copy { align-self: center; padding: 8vw; } .contact-copy .eyebrow span, .contact-link { color: var(--paper); } .contact-copy h2 { margin: 5vh 0; } .contact-copy > p:not(.eyebrow) { max-width: 240px; } .contact-link { border-bottom: 1px solid rgba(232,228,220,.65); display: inline-block; margin-top: 4vh; padding-bottom: 9px; }
.site-footer { display: flex; font-family: var(--mono); font-size: 9px; justify-content: space-between; padding: 25px 4vw; text-transform: uppercase; } .site-footer a:hover { color: var(--red); } .lightbox { align-items: center; background: rgba(20,20,18,.96); border: 0; color: var(--paper); display: flex; height: 100vh; justify-content: center; max-height: none; max-width: none; padding: 5vw 10vw; width: 100vw; } .lightbox::backdrop { background: rgba(20,20,18,.96); } .lightbox img { height: 90vh; object-fit: contain; width: auto; } .lightbox button { background: transparent; border: 0; color: var(--paper); cursor: pointer; font-size: 32px; padding: 20px; position: absolute; } .lightbox-close { right: 25px; top: 16px; } .lightbox-prev { left: 25px; top: 45%; } .lightbox-next { right: 25px; top: 45%; } .lightbox p { bottom: 20px; font-family: var(--mono); font-size: 10px; left: 0; position: absolute; right: 0; text-align: center; text-transform: uppercase; }
@media (max-width: 700px) { .site-header { height: 70px; padding: 0 6vw; } .desktop-nav, .header-resume { display: none; } .menu-toggle { background: none; border: 0; display: block; padding: 10px 0 10px 10px; position: relative; z-index: 2; } .menu-toggle span { background: var(--ink); display: block; height: 1px; margin: 5px 0; width: 24px; } .mobile-nav { background: var(--paper); display: flex; flex-direction: column; inset: 0; justify-content: center; opacity: 0; padding: 25vw 12vw; pointer-events: none; position: fixed; transform: translateY(-10px); transition: opacity .2s, transform .2s; } .mobile-nav a { font-family: var(--serif); font-size: 52px; line-height: 1.15; } .mobile-nav a:hover { color: var(--red); } .site-header.menu-open .mobile-nav { opacity: 1; pointer-events: auto; transform: translateY(0); } .hero { min-height: 780px; padding: 15vh 6vw 6vh; } .hero-image-main { height: 60vh; right: 0; top: 18vh; width: 78vw; } .hero-image-detail { bottom: 7vh; height: 26vh; left: 6vw; width: 25vw; } .hero h1 { font-size: clamp(67px, 20vw, 110px); margin-top: 25vh; } .circle-link { height: 90px; margin: 7vh 0 0 53vw; width: 90px; } .hero-note { bottom: 7vh; right: 6vw; } .section-pad { padding: 22vw 6vw; } .intro { display: block; } .intro .section-label { margin-bottom: 17vw; } .intro h2, .reel h2, .gallery-heading h2, .contact-copy h2 { font-size: clamp(45px, 14vw, 70px); } .intro-meta { display: block; } .text-link { display: inline-block; margin-top: 22px; } .reel-heading, .gallery-heading { display: block; } .reel-heading p, .gallery-heading p { margin-top: -4vh; } .video-wrap { margin-top: 10vw; } .gallery-grid { gap: 8px; } .gallery-item:nth-child(n) { grid-column: span 6; aspect-ratio: .75; } .gallery-item:nth-child(3n) { aspect-ratio: 1.05; } .gallery-item figcaption { font-size: 7px; } .contact-section { display: flex; flex-direction: column; } .contact-image { height: 62vh; } .contact-copy { padding: 22vw 6vw 25vw; } .site-footer { gap: 12px; padding: 24px 6vw; } .site-footer span:nth-child(2) { display: none; } .lightbox { padding: 15vw 5vw; } .lightbox img { max-height: 78vh; max-width: 92vw; } .lightbox-prev { left: -5px; } .lightbox-next { right: -5px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; } }
.lightbox:not([open]) { display: none; }
.site-credit { color: var(--muted); text-transform: none; }

/* ─── Profile section ─── */
.profile-grid { display: grid; grid-template-columns: 2fr 3fr; gap: 6vw; margin-top: 6vh; align-items: start; }
.profile-image { overflow: hidden; }
.profile-image img { aspect-ratio: 3/4; object-fit: cover; object-position: center top; width: 100%; }
.profile-content h2 { font-size: clamp(42px, 6vw, 88px); font-weight: 500; letter-spacing: -.06em; line-height: .93; margin: 4vh 0 5vh; }
.profile-bio { color: #54514b; max-width: 390px; margin-bottom: 1.5vh; }
.measurements { border-top: 1px solid var(--line); margin: 4vh 0; padding-top: 16px; }
.measurements-label { color: var(--red); font-family: var(--mono); font-size: 10px; letter-spacing: .04em; margin: 0 0 14px; text-transform: uppercase; }
.measurements-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; }
.measurements-grid > div { border-top: 1px solid var(--line); padding-top: 8px; }
.meas-key { color: var(--muted); display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .04em; text-transform: uppercase; }
.meas-val { display: block; font-size: 12px; margin-top: 3px; }

/* ─── Reels list ─── */
.reels-list { border-top: 1px solid rgba(232,228,220,.15); margin-top: 6vh; }
.reel-row { align-items: center; border-bottom: 1px solid rgba(232,228,220,.15); color: var(--paper); display: flex; justify-content: space-between; padding: 3.5vh 0; text-decoration: none; transition: padding-left .3s cubic-bezier(.2,.7,.2,1); }
.reel-row:hover { padding-left: 1.5vw; }
.reel-row-name { font-family: var(--serif); font-size: clamp(30px, 4.5vw, 62px); font-style: italic; font-weight: 500; letter-spacing: -.03em; line-height: 1; }
.reel-row-cta { color: #aba9a2; flex-shrink: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; margin-left: 4vw; text-transform: uppercase; transition: color .2s; }
.reel-row:hover .reel-row-cta { color: var(--red); }

/* ─── Contact links ─── */
.contact-links { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 4vh; }
.contact-links .contact-link { margin-top: 0; }

@media (max-width: 700px) { .profile-grid { display: block; } .profile-image { margin-bottom: 8vw; } .profile-content h2 { font-size: clamp(45px, 14vw, 70px); } .measurements-grid { grid-template-columns: repeat(2, 1fr); } .reel-row { padding: 3vh 0; } .reel-row-cta { display: none; } }