@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&display=swap');

:root { --ink:#171915; --paper:#f2f1ed; --paper-deep:#e9e7e0; --line:#d9d7d0; --sage:#98a688; --sage-dark:#55614e; --clay:#a8684e; --muted:#72736e; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:"DM Sans",sans-serif; } a { color:inherit; text-decoration:none; } img { width:100%; display:block; }
.site-header { display:flex; align-items:center; justify-content:space-between; padding:1.65rem 2.7vw; position:relative; z-index:10; border-bottom:1px solid transparent; }
.brand { font:500 clamp(1.35rem,1.7vw,1.75rem) "Playfair Display",serif; letter-spacing:-.045em; }.nav { display:flex; align-items:center; gap:0; }.nav a { border-left:1px solid var(--line); color:var(--muted); padding:.1rem 1rem; font-size:.9rem; }.nav a:last-child { padding-right:0; }.nav a:hover,.nav a[aria-current="page"] { color:var(--ink); }.menu-button { display:none; color:var(--ink); background:none; border:0; font-size:1.4rem; }
.eyebrow { color:var(--sage-dark); font:500 .67rem "DM Mono",monospace; letter-spacing:.11em; text-transform:uppercase; }.hero { min-height:calc(100vh - 85px); overflow:hidden; position:relative; display:flex; align-items:center; padding:0 9vw 6vh; }.hero-intro { position:relative; z-index:2; max-width:590px; }.hero h1 { margin:1.2rem 0 1.6rem; font:500 clamp(3.1rem,5.9vw,6.6rem)/.96 "Playfair Display",serif; letter-spacing:-.065em; }.hero h1 em { color:var(--sage-dark); }.hero-copy { max-width:300px; color:#575b54; line-height:1.6; }.hero-footer { position:absolute; bottom:3.4rem; left:9vw; right:9vw; z-index:3; display:flex; justify-content:space-between; align-items:end; }.scroll-note { color:var(--muted); font:.67rem "DM Mono",monospace; letter-spacing:.1em; text-transform:uppercase; }.feature-number { color:var(--sage-dark); font:500 clamp(3rem,5vw,5rem)/1 "Playfair Display",serif; }
.hero-room { pointer-events:none; position:absolute; z-index:0; width:min(82vw,1300px); height:min(86vh,820px); top:-1vh; right:-14vw; margin:0; overflow:hidden; opacity:.8; mix-blend-mode:multiply; -webkit-mask-image:radial-gradient(ellipse 65% 67% at 52% 56%,#000 22%,rgba(0,0,0,.92) 56%,transparent 82%); mask-image:radial-gradient(ellipse 65% 67% at 52% 56%,#000 22%,rgba(0,0,0,.92) 56%,transparent 82%); }.hero-room::before { content:""; position:absolute; z-index:2; inset:0; background:linear-gradient(90deg,var(--paper) 0%,rgba(242,241,237,.34) 25%,transparent 58%),linear-gradient(180deg,rgba(242,241,237,.2),transparent 60%); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px); -webkit-mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.82) 43%,rgba(0,0,0,.26) 68%,transparent 88%); mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.82) 43%,rgba(0,0,0,.26) 68%,transparent 88%); }.hero-room img { position:absolute; width:100%; height:108%; top:-3%; object-fit:cover; object-position:center 52%; filter:brightness(1.18) contrast(.9) saturate(.8) sepia(.04); }.hero-room::after { content:""; position:absolute; z-index:3; inset:0; background:radial-gradient(ellipse at 56% 14%,rgba(242,241,237,.13),transparent 54%); }
.cursor-lens { pointer-events:none; position:absolute; z-index:1; width:150px; height:150px; left:0; top:0; opacity:0; border:1px solid rgba(85,97,78,.38); border-radius:50%; transform:translate(-50%,-50%) scale(.65); background:rgba(211,224,190,.12); -webkit-backdrop-filter:blur(11px) saturate(1.45) contrast(1.12); backdrop-filter:blur(11px) saturate(1.45) contrast(1.12); box-shadow:inset 0 0 24px rgba(247,245,237,.52),0 0 18px rgba(126,150,108,.13); transition:opacity .22s ease,transform .28s cubic-bezier(.2,.8,.2,1); }.cursor-lens.active { opacity:1; transform:translate(-50%,-50%) scale(1); }
.section { padding:8rem 8vw; }.section-light { background:var(--paper-deep); color:var(--ink); }.section-heading { max-width:700px; font:500 clamp(2.6rem,5vw,5rem)/1 "Playfair Display",serif; letter-spacing:-.06em; margin:1.2rem 0 4rem; }.about-grid { display:grid; grid-template-columns:.72fr 1.2fr; gap:9vw; align-items:start; }.portrait-placeholder,.project-image { background:linear-gradient(145deg,#d6c4a8,#829070); position:relative; overflow:hidden; }.portrait-placeholder { min-height:500px; }.portrait-placeholder::after { content:"YOUR\A PORTRAIT"; white-space:pre; position:absolute; inset:auto 1.2rem 1.2rem; color:white; font:500 .68rem "DM Mono",monospace; letter-spacing:.1em; }.about-text { max-width:720px; font:500 clamp(1.35rem,2.25vw,2.1rem)/1.43 "Playfair Display",serif; }.about-text p:first-child { margin-top:0; }.text-link { display:inline-flex; gap:.65rem; align-items:center; border-bottom:1px solid currentColor; padding-bottom:.3rem; font:500 .68rem "DM Mono",monospace; letter-spacing:.08em; text-transform:uppercase; }.projects-head { display:flex; justify-content:space-between; gap:2rem; align-items:baseline; }.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }.project-card { display:block; }.project-image { aspect-ratio:4/5; transition:transform .35s ease,filter .35s ease; }.project-card:hover .project-image { transform:translateY(-6px); filter:saturate(.8); }.image-a { background:linear-gradient(145deg,#b78062 0 33%,#dbc083 34% 59%,#536a62 60%); }.image-b { background:linear-gradient(145deg,#d6d4b2,#819e86 53%,#d1b694); }.image-c { background:linear-gradient(145deg,#c9c0b3,#827b70 51%,#e1dbcf); }.project-meta { display:flex; justify-content:space-between; margin-top:1rem; color:var(--muted); font:.67rem "DM Mono",monospace; text-transform:uppercase; }.project-title { margin:.65rem 0 0; font:500 clamp(1.35rem,2vw,2rem)/1.06 "Playfair Display",serif; }.footer { padding:3.3rem 8vw; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:2rem; }.footer p { margin:0; color:var(--muted); font-size:.8rem; }
.page-intro { padding:9vh 8vw 6vh; max-width:1100px; }.page-intro h1 { margin:1.1rem 0 1.8rem; font:500 clamp(3.4rem,7vw,7rem)/.95 "Playfair Display",serif; letter-spacing:-.065em; }.page-intro p { max-width:560px; color:#5e625b; font-size:1.04rem; line-height:1.65; }.project-list { padding:0 8vw 9rem; }.project-list .project-card { display:grid; grid-template-columns:1.3fr 1fr; gap:3rem; padding:2rem 0; border-top:1px solid var(--line); align-items:center; }.project-list .project-image { aspect-ratio:16/9; }.project-card-summary { color:#5e625b; line-height:1.6; }.detail-hero { padding:7vh 8vw 7rem; }.back-link { color:var(--sage-dark); font:.68rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.1em; }.detail-title { max-width:1050px; margin:1.6rem 0 3rem; font:500 clamp(3.1rem,7vw,7.5rem)/.94 "Playfair Display",serif; letter-spacing:-.065em; }.detail-media { aspect-ratio:16/8; background:linear-gradient(135deg,#c6d2b4,#839a80 48%,#cda982); position:relative; }.detail-media::after { content:"PROJECT VIDEO / FEATURE IMAGE"; position:absolute; inset:auto 1.25rem 1.25rem; color:white; font:.68rem "DM Mono",monospace; letter-spacing:.1em; }.detail-content { display:grid; grid-template-columns:.7fr 1.3fr; gap:8vw; padding:7rem 8vw 10rem; background:#e3e2db; }.detail-content h2 { margin:0; color:var(--sage-dark); font:500 1rem "DM Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }.detail-content p { max-width:760px; margin:0; font:500 clamp(1.5rem,2.6vw,2.65rem)/1.35 "Playfair Display",serif; }.tags { display:flex; gap:.5rem; flex-wrap:wrap; margin-top:2rem; }.tag { background:#cddbbd; padding:.4rem .55rem; font:.67rem "DM Mono",monospace; text-transform:uppercase; }.thesis-list { padding:0 8vw 11rem; } details { border-top:1px solid var(--line); padding:1.4rem 0; } details:last-child { border-bottom:1px solid var(--line); } summary { cursor:pointer; display:flex; justify-content:space-between; gap:2rem; font:500 clamp(1.3rem,2.3vw,2rem)/1.25 "Playfair Display",serif; list-style:none; } summary::-webkit-details-marker { display:none; } summary::after { content:"+"; color:var(--sage-dark); font-family:"DM Sans",sans-serif; } details[open] summary::after { content:"–"; }.thesis-copy { max-width:750px; padding:1.5rem 3rem 1rem 0; color:#5e625b; line-height:1.7; }.contact { min-height:75vh; display:flex; flex-direction:column; justify-content:center; padding:10vh 8vw; }.contact h1 { max-width:900px; margin:1rem 0 2rem; font:500 clamp(3.5rem,8vw,8rem)/.9 "Playfair Display",serif; letter-spacing:-.07em; }.contact a { color:var(--sage-dark); border-bottom:2px solid var(--sage-dark); width:max-content; font-size:clamp(1.2rem,2vw,2rem); }
@media (max-width:700px) { .site-header { padding:1.25rem 6vw; }.menu-button { display:block; }.nav { display:none; position:absolute; right:5vw; top:64px; padding:1rem; background:var(--ink); color:var(--paper); flex-direction:column; align-items:flex-start; gap:.7rem; }.nav a { border:0; padding:.2rem; color:inherit; }.nav.open { display:flex; }.hero,.about-grid,.detail-content { grid-template-columns:1fr; }.hero { display:block; min-height:620px; padding:10vh 6vw 6vh; }.hero-room { width:145vw; height:570px; top:180px; right:-65vw; opacity:.63; }.hero-footer { position:absolute; left:6vw; right:6vw; bottom:2rem; margin:0; }.section,.page-intro,.project-list,.thesis-list,.detail-content { padding-left:6vw; padding-right:6vw; }.section { padding-top:6rem; padding-bottom:6rem; }.projects-grid { grid-template-columns:1fr; gap:3rem; }.project-list .project-card { grid-template-columns:1fr; gap:1rem; }.detail-content { gap:2rem; padding-top:4rem; padding-bottom:6rem; }.footer { padding:3rem 6vw; flex-direction:column; } }