:root{--butter:#f6dfae;--paper:#fff3d6;--plum:#3a1f26;--teal:#1f6f73;--tomato:#d6452f;--rose:#eaa9a0;--r:14px}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font-family:'Libre Caslon Text',Georgia,serif;background:var(--butter);color:var(--plum);line-height:1.75;font-size:1.05rem}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.13;mix-blend-mode:multiply;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3{font-family:'Shrikhand',Georgia,serif;font-weight:400;line-height:1.1}
h2{font-size:clamp(2rem,5vw,3.2rem);color:var(--tomato);margin-bottom:1rem}
a{color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 5vw;background:var(--plum);color:var(--butter);position:sticky;top:0;z-index:40}
nav .logo{font-family:'Shrikhand',serif;font-size:1.4rem;text-decoration:none}
nav ul{display:flex;gap:1.6rem;list-style:none;padding:0}
nav a{text-decoration:none}nav ul a:hover{color:var(--rose)}
.btn{display:inline-block;background:var(--tomato);color:var(--paper);padding:.8rem 1.8rem;border-radius:99px;border:3px solid var(--plum);box-shadow:4px 4px 0 var(--plum);text-decoration:none;font:inherit;font-weight:700;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--plum)}
.btn.teal{background:var(--teal)}
section{padding:5rem 5vw}
.wrap{max-width:1000px;margin:auto}
/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center;min-height:85vh;padding-top:3rem;background:radial-gradient(circle at 85% 20%,var(--rose) 0,transparent 45%)}
.hero h1{font-size:clamp(3rem,9vw,6.4rem);color:var(--plum);text-shadow:4px 4px 0 var(--rose)}
.hero h1 span{display:block;color:var(--teal);font-size:.55em;text-shadow:none;animation:drop .8s .1s both}
.hero h1 b{font-weight:400;display:block;animation:drop .8s .35s both}
.hero p{margin:1.2rem 0 2rem;max-width:30rem;animation:drop .8s .6s both}
.hero .btn{animation:drop .8s .8s both}
.photo{background:var(--paper);padding:14px 14px 56px;border-radius:4px;box-shadow:10px 10px 0 var(--teal);transform:rotate(3deg);animation:settle 1.2s .3s both cubic-bezier(.2,1.4,.4,1);position:relative}
.photo img,.ph{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:linear-gradient(160deg,var(--rose),var(--butter) 55%,var(--teal));border-radius:2px}
.photo:after{content:"shot on love, 35mm";position:absolute;bottom:14px;left:0;right:0;text-align:center;font-family:'Shrikhand',serif;color:var(--tomato)}
@keyframes drop{from{opacity:0;transform:translateY(-24px)}}
@keyframes settle{from{opacity:0;transform:translateY(-120px) rotate(-14deg)}}
/* film strip */
.strip{background:var(--plum);color:var(--butter);overflow:hidden;white-space:nowrap;padding:.9rem 0;border-block:6px dashed var(--butter);font-family:'Shrikhand',serif;font-size:1.3rem}
.strip div{display:inline-block;animation:roll 28s linear infinite}
@keyframes roll{to{transform:translateX(-50%)}}
/* about */
.about{background:var(--paper)}
.about .wrap{display:grid;grid-template-columns:320px 1fr;gap:3rem;align-items:center}
.about .ph{border-radius:50% 50% var(--r) var(--r);border:5px solid var(--plum)}
.about p+p{margin-top:1rem}
/* contact */
.contact{background:var(--teal);color:var(--paper)}
.contact h2{color:var(--butter)}
.contact .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:3rem}
.social{display:flex;gap:1rem;margin-top:1.5rem;flex-wrap:wrap}
.social .btn{background:var(--butter);color:var(--plum)}
form{display:grid;gap:1rem;background:var(--paper);color:var(--plum);padding:2rem;border-radius:var(--r);border:3px solid var(--plum);box-shadow:8px 8px 0 var(--plum)}
label{display:grid;gap:.3rem;font-weight:700}
input,textarea,select{font:inherit;padding:.7rem;border:2px solid var(--plum);border-radius:8px;background:#fff}
.hp{position:absolute;left:-9999px}
footer{background:var(--plum);color:var(--butter);text-align:center;padding:1.5rem}
/* portfolio */
.page-head{text-align:center;padding:4rem 5vw 1rem}
.page-head h1{font-size:clamp(2.6rem,7vw,5rem);color:var(--tomato);text-shadow:3px 3px 0 var(--plum)}
.chips{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-top:1.5rem}
.chips a{padding:.4rem 1.2rem;border:2px solid var(--plum);border-radius:99px;text-decoration:none;background:var(--paper)}
.chips a:hover{background:var(--rose)}
.gallery:nth-of-type(even){background:var(--paper)}
.gallery h2{text-align:center}
.carousel{max-width:860px;margin:auto;position:relative}
.frame{overflow:hidden;border:4px solid var(--plum);border-radius:var(--r);box-shadow:8px 8px 0 var(--teal);background:var(--plum)}
.track{display:flex;transition:transform .7s cubic-bezier(.6,0,.2,1)}
.slide{min-width:100%;aspect-ratio:3/2;display:grid;place-items:center}
.slide img{width:100%;height:100%;object-fit:cover}
.slide .ph{height:100%;aspect-ratio:auto;border-radius:0;display:grid;place-items:center;font-family:'Shrikhand',serif;color:var(--plum);font-size:1.4rem;text-align:center;padding:1rem}
.ctrl{display:flex;justify-content:center;align-items:center;gap:1.2rem;margin-top:1.4rem}
.ctrl button{width:46px;height:46px;border-radius:50%;border:3px solid var(--plum);background:var(--tomato);color:var(--paper);font-size:1.3rem;cursor:pointer;box-shadow:3px 3px 0 var(--plum)}
.ctrl button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--plum)}
.count{font-family:'Shrikhand',serif;min-width:4.5rem;text-align:center}
.cta{text-align:center;background:var(--rose)}
.reveal{opacity:0;transform:translateY(20px);transition:.8s}
.reveal.in{opacity:1;transform:none}
@media(max-width:800px){.hero,.about .wrap,.contact .wrap{grid-template-columns:1fr}.hero{min-height:auto}.about .ph{max-width:260px;margin:auto}nav ul{gap:1rem}section{padding:3.5rem 6vw}}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}