@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&family=Italiana&display=swap');
@import "tailwindcss";

:root { --ink:#181713; --paper:#f4f0e8; --cream:#e8dfd1; --gold:#9b7850; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
#about,#work,#experience,#contact { scroll-margin-top:96px; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; font-weight:300; }
a { color:inherit; text-decoration:none; }
img { width:100%; height:100%; object-fit:cover; display:block; }
.topbar { position:sticky; top:0; left:0; z-index:20; width:100%; min-height:96px; padding:20px 5vw; display:flex; align-items:center; justify-content:space-between; color:white; border-bottom:1px solid #ffffff33; background:#151411; }
.brand { display:flex; flex-direction:column; letter-spacing:.13em; line-height:.9; }
.brand span { font-family:'Italiana',serif; font-size:30px; }
.brand small { font-size:8px; letter-spacing:.38em; margin-top:8px; }
nav { display:flex; gap:8px; align-items:center; font-size:11px; letter-spacing:.12em; text-transform:uppercase; }
nav a { padding:12px 16px; border:1px solid #ffffff38; background:#ffffff0c; transition:background .2s ease,color .2s ease,border-color .2s ease; }
nav a:hover,nav a:focus-visible { background:white; color:var(--ink); border-color:white; }
.nav-cta { border-color:#c9a77e; background:#9b7850; color:white; }
.hero { min-height:calc(100svh - 96px); position:relative; color:white; overflow:hidden; background:#11100e; }
.hero>img { position:absolute; inset:0; object-fit:contain; filter:saturate(.92) contrast(1.03); image-rendering:auto; animation:reveal 1.4s ease-out both; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(12,11,9,.68),rgba(12,11,9,.05) 70%),linear-gradient(0deg,rgba(0,0,0,.3),transparent 45%); }
.hero-copy { position:absolute; left:38vw; bottom:12vh; width:min(720px,58vw); text-shadow:0 2px 24px #0008; }
.eyebrow,.section-kicker { margin:0 0 24px; font-size:11px; letter-spacing:.28em; text-transform:uppercase; font-weight:500; }
h1,h2,h3,blockquote { font-family:'Italiana',serif; font-weight:400; }
h1 { font-size:clamp(50px,6.2vw,92px); line-height:.92; letter-spacing:-.025em; margin:0; }
h1 em { font-weight:400; }
.hero-intro { max-width:510px; font-size:16px; line-height:1.7; margin:30px 0; }
.button { display:inline-flex; gap:56px; align-items:center; padding:16px 22px; border:1px solid; text-transform:uppercase; font-size:10px; letter-spacing:.18em; }
.scroll { position:absolute; right:5vw; bottom:42px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; display:flex; gap:18px; }
.intro { padding:150px 8vw 130px; text-align:center; }
.intro h2,.section-head h2,.experience h2,.contact h2 { font-size:clamp(42px,5.1vw,78px); line-height:1.05; margin:0; }
.intro-grid { max-width:900px; margin:65px auto 0; padding-top:35px; border-top:1px solid #b8ad9e; display:grid; grid-template-columns:1fr 1fr; gap:70px; text-align:left; font-size:15px; line-height:1.85; }
.portfolio { background:#1d1c18; color:white; padding:120px 5vw; }
.section-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:70px; }
.section-head>a { text-transform:uppercase; letter-spacing:.15em; font-size:10px; padding-bottom:8px; border-bottom:1px solid; }
.mosaic { columns:3; column-gap:16px; }
.photo { break-inside:avoid; margin:0 0 16px; overflow:hidden; }
.photo img { height:auto; transition:transform .7s ease; }
.photo:hover img { transform:scale(1.035); }
.photo-1 { grid-column:1/6; grid-row:1; }.photo-2 { grid-column:6/10; grid-row:1; }.photo-3 { grid-column:10/13; grid-row:1; }
.photo-4 { grid-column:1/4; grid-row:2; }.photo-5 { grid-column:4/9; grid-row:2; }.photo-6 { grid-column:9/13; grid-row:2; }
.photo-7 { grid-column:1/7; grid-row:3; }.photo-8 { grid-column:7/13; grid-row:3; }
.archive-head { margin:110px 0 32px; padding-top:30px; border-top:1px solid #ffffff33; display:flex; justify-content:space-between; align-items:center; }
.archive-head p { margin:0; }.archive-head>p:last-child { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#aaa398; }
.flickr-grid { columns:4; column-gap:16px; }
.flickr-photo { display:block; break-inside:avoid; margin:0 0 16px; overflow:hidden; background:#282722; }
.flickr-photo img { width:100%; height:auto; transition:transform .7s ease,opacity .3s ease; }
.flickr-photo:hover img { transform:scale(1.025); opacity:.92; }
.flickr-cta { display:flex; justify-content:center; padding-top:48px; }
.flickr-cta a { display:inline-flex; align-items:center; gap:48px; border:1px solid #ffffff99; padding:17px 22px; text-transform:uppercase; letter-spacing:.18em; font-size:10px; transition:background .25s ease,color .25s ease; }
.flickr-cta a:hover { background:white; color:var(--ink); }
.categories { margin-top:100px; border-top:1px solid #ffffff33; }
.categories { display:grid; grid-template-columns:80px 1fr 1fr; align-items:center; }
.categories>* { padding:36px 0; border-bottom:1px solid #ffffff33; }
.categories span { font-size:10px; color:#af9d84; }.categories h3 { font-size:38px; margin:0; }.categories p { margin:0; line-height:1.7; color:#d0cac0; }
.experience { display:grid; grid-template-columns:1.05fr .95fr; min-height:780px; }
.experience-image { position:relative; min-height:650px; }
.experience-image span { position:absolute; right:25px; bottom:25px; background:var(--paper); padding:12px 16px; text-transform:uppercase; letter-spacing:.18em; font-size:9px; }
.experience-copy { padding:110px 7vw; display:flex; flex-direction:column; justify-content:center; }
.experience-copy>p:not(.section-kicker) { margin:36px 0 40px; line-height:1.9; max-width:520px; }
.experience ul { list-style:none; padding:0; margin:0; border-top:1px solid #c8beb0; }
.experience li { border-bottom:1px solid #c8beb0; padding:22px 0; display:grid; grid-template-columns:150px 1fr; align-items:center; }
.experience li strong { font-family:'Italiana',serif; font-size:27px; font-weight:400; }.experience li span { font-size:12px; text-transform:uppercase; letter-spacing:.1em; }
.quote { background:var(--cream); text-align:center; padding:130px 12vw; }
blockquote { max-width:1050px; margin:0 auto 35px; font-size:clamp(38px,5vw,72px); line-height:1.15; }
cite { font-size:10px; text-transform:uppercase; letter-spacing:.2em; font-style:normal; }
.contact { display:grid; grid-template-columns:1fr 1fr; gap:10vw; padding:130px 8vw; background:#cbb69c; }
.contact-copy>p:not(.section-kicker) { max-width:520px; line-height:1.8; margin:32px 0; }
.contact-links { display:flex; flex-wrap:wrap; align-items:center; gap:14px 24px; text-transform:uppercase; letter-spacing:.14em; font-size:10px; }
.contact-links .email-direct { width:100%; display:inline-flex; justify-content:center; padding:16px 18px; background:var(--ink); color:white; border:1px solid var(--ink); font-size:11px; letter-spacing:.1em; text-transform:none; transition:background .2s ease,color .2s ease; }
.contact-links .email-direct:hover,.contact-links .email-direct:focus-visible { background:white; color:var(--ink); }
.contact-links button.email-direct { cursor:pointer; font-family:inherit; }
form { display:flex; flex-direction:column; gap:22px; }
label { font-size:9px; text-transform:uppercase; letter-spacing:.18em; font-weight:500; }
input,textarea { display:block; width:100%; border:0; border-bottom:1px solid #55483b; background:transparent; padding:12px 0; font:16px 'DM Sans',sans-serif; outline:none; border-radius:0; }
textarea { resize:vertical; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:26px; }
button { align-self:flex-start; border:0; background:var(--ink); color:white; padding:17px 22px; text-transform:uppercase; letter-spacing:.18em; font-size:10px; display:flex; gap:60px; cursor:pointer; }
footer { background:#151411; color:white; padding:70px 5vw 35px; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:end; }
footer p { margin:0; color:#aaa59b; font-size:12px; line-height:1.7; }.copyright { text-align:right; }.footer-brand { width:max-content; }
@keyframes reveal { from { transform:scale(1.04); opacity:.7 } to { transform:scale(1); opacity:1 } }
@media(max-width:800px){
  #about,#work,#experience,#contact{scroll-margin-top:116px}.topbar{min-height:0;height:auto;padding:12px 4vw;flex-wrap:wrap;gap:10px}.topbar .brand{width:100%;align-items:center}.topbar nav{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.topbar nav a{display:block!important;text-align:center;padding:9px 4px;font-size:9px;letter-spacing:.08em}.brand span{font-size:22px}.brand small{margin-top:6px}.hero>img{object-position:42% center}.hero-copy{left:6vw;bottom:8vh;width:88vw}.hero-copy h1{font-size:clamp(34px,10.5vw,46px);line-height:.98}.hero-intro{font-size:14px}.scroll{display:none}
  .intro{padding:100px 6vw}.intro-grid{grid-template-columns:1fr;gap:12px;margin-top:45px}.portfolio{padding:90px 4vw}.section-head{align-items:start;gap:24px;flex-direction:column}
  .mosaic{columns:2}
  .flickr-grid{columns:2}.archive-head{margin-top:80px}
  .categories{grid-template-columns:45px 1fr}.categories p{grid-column:2;padding-top:0}.categories h3{font-size:30px}.experience{grid-template-columns:1fr}.experience-copy{padding:90px 7vw}.quote{padding:100px 7vw}.contact{grid-template-columns:1fr;padding:100px 7vw}.form-row{grid-template-columns:1fr}footer{grid-template-columns:1fr;gap:35px}.copyright{text-align:left}
}
@media(max-width:480px){.mosaic{display:block;columns:1}.photo{min-width:0;height:auto}.flickr-grid{columns:1}.archive-head{align-items:flex-start;gap:8px;flex-direction:column}.categories{margin-top:70px}.experience li{grid-template-columns:110px 1fr}.experience li strong{font-size:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero>img{animation:none}.photo img{transition:none}}

.featured-wedding { margin-top:100px; padding:14px 14px 72px; text-align:center; border:1px solid #ffffff44; background:linear-gradient(135deg,#292720,#171612); }
.featured-wedding-preview { display:grid!important; grid-template-columns:1.5fr 1fr 1fr; gap:10px; margin-bottom:62px; padding:0!important; border:0!important; }
.featured-wedding-preview img { width:100%; height:clamp(220px,32vw,470px); object-fit:cover; }
.featured-wedding-preview img:nth-child(2),.featured-wedding-preview img:nth-child(3) { height:clamp(220px,32vw,470px); }
.featured-wedding h2 { margin:0; font-family:'Italiana',serif; font-size:clamp(42px,6vw,78px); font-weight:400; }
.featured-wedding>p:not(.section-kicker) { margin:18px 0 36px; color:#cfc7ba; letter-spacing:.08em; }
.featured-wedding .curation-note { max-width:680px; margin:0 auto 36px!important; line-height:1.7; letter-spacing:0!important; font-size:14px; }
.featured-wedding a { display:inline-flex; gap:48px; align-items:center; padding:17px 22px; border:1px solid #ffffff99; text-transform:uppercase; font-size:10px; letter-spacing:.18em; }
.featured-wedding a:hover { background:white; color:#181713; }
.bilingual-seo { padding:110px 8vw; text-align:center; background:#e8dfd1; color:#181713; }
.bilingual-seo h2 { max-width:900px; margin:0 auto 30px; font-family:'Italiana',serif; font-size:clamp(40px,5vw,72px); font-weight:400; }
.bilingual-seo>p:not(.section-kicker) { max-width:760px; margin:14px auto; line-height:1.8; }
.website-field { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
@media(max-width:650px) { .featured-wedding-preview { grid-template-columns:1fr 1fr; } .featured-wedding-preview img:first-child { grid-column:1/3; } }
