@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400&family=Inter:wght@300;400;500;600&family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg: #dddddd;
  --bg-soft: #e2e2e2;
  --ink: #17160F;
  --ink-soft: rgba(23,22,15,0.62);
  --line: rgba(23,22,15,0.14);
  --accent: #8A8370;
  --accent-strong:#5f5a4b;
  --card: #f2f2f2;
}
html[data-theme="dark"]{
  --bg: #000000;
  --bg-soft: #111111;
  --ink: #F0EEE6;
  --ink-soft: rgba(240,238,230,0.6);
  --line: rgba(240,238,230,0.14);
  --accent: #B8AE90;
  --accent-strong:#d8cead;
  --card: #0d0d0d;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .5s ease, color .5s ease;
  overflow-x:hidden;
}
a{ color:inherit; }
::selection{ background:var(--accent); color:var(--bg); }

.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
}

/* ---------- NAV ---------- */
header.site-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px clamp(20px,5vw,56px);
  background:var(--bg);
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.site-nav .logo{
  font-family:'Space Mono', monospace;
  font-size:14px;
  letter-spacing:0.08em;
  text-decoration:none;
  color:var(--ink);
}
.site-nav nav{
  display:flex;
  gap:clamp(16px,3vw,40px);
  align-items:center;
}
.site-nav nav a{
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  text-decoration:none;
  font-family:'Space Mono', monospace;
  color:var(--ink-soft);
  opacity:1;
  position:relative;
  padding-bottom:3px;
  transition:color .25s ease;
}
.site-nav nav a:hover{ color:var(--ink); }
.site-nav nav a.is-active{ color:var(--ink); }
.site-nav nav a::after{
  content:'';
  position:absolute; left:0; right:100%; bottom:0;
  height:1px; background:var(--ink);
  transition:right .35s ease;
}
.site-nav nav a:hover::after,
.site-nav nav a:focus-visible::after,
.site-nav nav a.is-active::after{ right:0; }
.site-nav nav a:focus-visible{ outline:1px dashed var(--accent); outline-offset:4px; }

.theme-switch{
  position:relative;
  width:52px; height:28px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--bg-soft);
  cursor:pointer;
  padding:0;
  flex:0 0 auto;
  transition:background .3s ease;
}
.theme-switch .track-icon{
  position:absolute;
  top:50%; transform:translateY(-50%);
  font-size:11px;
  line-height:1;
  color:var(--ink-soft);
  pointer-events:none;
}
.theme-switch .track-icon.sun{ left:7px; }
.theme-switch .track-icon.moon{ right:7px; }
.theme-switch .thumb{
  position:absolute;
  top:2px; left:2px;
  width:22px; height:22px;
  border-radius:50%;
  background:var(--ink);
  transition:transform .35s cubic-bezier(.6,0,.3,1);
}
html[data-theme="dark"] .theme-switch .thumb{ transform:translateX(24px); }
.theme-switch:focus-visible{ outline:1px dashed var(--accent); outline-offset:4px; }

@media (max-width:480px){
  header.site-nav{ padding:14px 16px; }
  .site-nav .logo{ font-size:11px; letter-spacing:0.06em; }
  .site-nav nav{ gap:10px; }
  .site-nav nav a{ font-size:10px; }
  .theme-switch{ width:44px; height:24px; }
  .theme-switch .thumb{ width:18px; height:18px; }
  html[data-theme="dark"] .theme-switch .thumb{ transform:translateX(20px); }
}

/* ---------- HERO (home) ---------- */
.hero{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:140px clamp(20px,5vw,56px) 60px;
  position:relative;
}
.hero-eyebrow{ overflow:hidden; margin-bottom:20px; }
.hero-eyebrow span{
  display:inline-block;
  transform:translateY(120%);
  animation:riseIn .9s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:.15s;
}
.hero-name{
  font-family:'Bodoni Moda', serif;
  font-weight:500;
  font-size:clamp(30px, 8.6vw, 118px);
  line-height:1;
  letter-spacing:0.01em;
  text-transform:uppercase;
  margin:0;
  white-space:nowrap;
}
.hero-name .line{ overflow:hidden; display:block; }
html[data-theme="dark"] .hero-name{ color:#ffffff; }
.hero-name .line span{
  display:inline-block;
  transform:translateY(115%);
  animation:riseIn 1.05s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:.32s;
}

@keyframes riseIn{ to{ transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){
  .hero-eyebrow span, .hero-name .line span{ animation:none; transform:none; }
}

.hero-sub{
  margin-top:26px;
  font-family:'Space Mono', monospace;
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ink-soft);
  opacity:0;
  animation:fadeUp .8s ease forwards;
  animation-delay:.9s;
}
@keyframes fadeUp{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }
@media (prefers-reduced-motion: reduce){ .hero-sub{ animation:none; opacity:1; } }

.scroll-cue{
  position:absolute;
  bottom:36px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:'Space Mono', monospace;
  font-size:11px;
  letter-spacing:0.1em;
  color:var(--ink-soft);
}
.scroll-cue .stick{
  width:1px; height:34px; background:var(--line);
  position:relative; overflow:hidden;
}
.scroll-cue .stick::after{
  content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--accent);
  animation:stickMove 1.8s ease-in-out infinite;
}
@keyframes stickMove{ 50%{ top:100%; } 100%{ top:100%; } }
@media (prefers-reduced-motion: reduce){ .scroll-cue .stick::after{ animation:none; top:0; } }

/* ---------- SINGLE CAROUSEL (home only) — JS-controlled, forward only ---------- */
.filmstrip-wrap{
  position:relative;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:22px 0;
  overflow:hidden;
}
.filmstrip{
  display:flex;
  gap:14px;
  width:max-content;
  will-change:transform;
}
.filmstrip-next{
  position:absolute;
  right:clamp(16px,4vw,40px);
  bottom:34px;
  width:46px; height:46px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--ink);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .25s ease, border-color .25s ease;
  z-index:2;
}
.filmstrip-next:hover{ background:var(--bg-soft); border-color:var(--ink); }
.filmstrip-next:focus-visible{ outline:1px dashed var(--accent); outline-offset:4px; }
.filmstrip-next svg{ width:16px; height:16px; }

.frame{
  position:relative;
  flex:0 0 auto;
  width:min(46vw, 300px);
  height:min(60vw, 380px);
  border-radius:2px;
  overflow:hidden;
  background:var(--bg-soft);
}
.frame img{
  width:100%; height:100%; object-fit:cover;
  filter:none;
  transform:scale(1.01);
  transition:transform .6s ease;
}
.frame:hover img{ transform:scale(1.04); }
.frame .meta{
  position:absolute; left:10px; bottom:10px;
  font-family:'Space Mono', monospace;
  font-size:10px;
  letter-spacing:0.06em;
  color:#fff;
  background:rgba(0,0,0,0.6);
  padding:3px 7px;
}

.home-links{
  display:flex;
  justify-content:center;
  gap:clamp(20px,5vw,56px);
  padding:56px clamp(20px,5vw,56px);
  flex-wrap:wrap;
}
.home-links a{
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:clamp(20px,2.6vw,32px);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:6px;
  transition:border-color .3s ease, color .3s ease;
}
.home-links a:hover, .home-links a:focus-visible{ border-color:var(--ink); color:var(--accent-strong); }

/* ---------- PAGE HEADER (interior pages) ---------- */
.page-head{
  padding:130px clamp(20px,5vw,56px) 0;
}

/* ---------- FILTER TABS ---------- */
.filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  padding:28px clamp(20px,5vw,56px) 0;
}
.filters button{
  font-family:'Space Mono', monospace;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink-soft);
  padding:10px 18px;
  cursor:pointer;
  border-radius:999px;
  transition:all .25s ease;
}
.filters button:hover{ border-color:var(--ink); color:var(--ink); }
.filters button.is-active{
  background:var(--ink);
  color:var(--bg);
  border-color:var(--ink);
}
.filters button:focus-visible{ outline:1px dashed var(--accent); outline-offset:3px; }

/* ---------- PORTFOLIO GRID ---------- */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  padding:36px clamp(20px,5vw,56px) 100px;
  max-width:1500px;
  margin:0 auto;
}
.grid .item{ transition:opacity .4s ease, transform .4s ease; }
.grid .item.is-hidden{ display:none; }
@media (max-width:900px){
  .grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .grid{ grid-template-columns:1fr; }
}
.item figure{
  margin:0;
  position:relative;
  overflow:hidden;
  background:var(--bg-soft);
  aspect-ratio:4/5;
}
.item img{
  width:100%; height:100%; object-fit:cover;
  
  transform:scale(1.01);
  transition:filter .6s ease, transform .8s cubic-bezier(.16,1,.3,1);
}
.item:hover img{ transform:scale(1.05); }
.item figcaption{
  display:flex;
  justify-content:space-between;
  padding-top:12px;
  font-family:'Space Mono', monospace;
  font-size:11px;
  letter-spacing:0.04em;
  color:var(--ink-soft);
}
.item figcaption b{
  font-family:'Inter', sans-serif;
  font-weight:500;
  font-size:14px;
  color:var(--ink);
  letter-spacing:0;
}

/* ---------- CONTACT PAGE ---------- */
.contact-layout{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:clamp(30px,6vw,90px);
  padding:20px clamp(20px,5vw,56px) 140px;
  max-width:1400px;
  margin:0 auto;
  align-items:start;
}
@media (max-width:820px){ .contact-layout{ grid-template-columns:1fr; } }
.about-photo{
  aspect-ratio:4/5;
  overflow:hidden;
  background:var(--bg-soft);
}
.about-photo img{ width:100%; height:100%; object-fit:cover;  }
.contact-bio p{
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.75;
  color:var(--ink-soft);
  max-width:56ch;
}
.contact-bio .styles{
  margin-top:26px;
  font-family:'Space Mono', monospace;
  font-size:13px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--ink);
}
.contact-links{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.contact-links a{
  font-family:'Fraunces', serif;
  font-size:clamp(24px,3vw,36px);
  text-decoration:none;
  border-bottom:1px solid var(--line);
  padding-bottom:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:border-color .3s ease, color .3s ease, padding-left .3s ease;
}
.contact-links a span{
  font-family:'Space Mono', monospace;
  font-size:12px;
  color:var(--ink-soft);
  letter-spacing:0.06em;
}
.contact-links a:hover, .contact-links a:focus-visible{
  border-color:var(--ink);
  color:var(--accent-strong);
  padding-left:8px;
}

/* ---------- FOOTER ---------- */
footer{
  padding:34px clamp(20px,5vw,56px) 40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:'Space Mono', monospace;
  font-size:11px;
  letter-spacing:0.05em;
  color:var(--ink-soft);
  flex-wrap:wrap;
  gap:14px;
  border-top:1px solid var(--line);
}
footer .social{ display:flex; gap:20px; }
footer a{ text-decoration:none; color:var(--ink-soft); }
footer a:hover{ color:var(--ink); }

/* reveal-on-scroll */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
}
.reveal.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
}