/* ============================================================
   Travis Zhang — Architectural & Interior Photography
   ============================================================ */

:root{
  --bg:        #0a0a0b;
  --bg-2:      #0f0f11;
  --panel:     #111114;
  --ink:       #f3efe7;
  --ink-soft:  #cfcabf;
  --muted:     #8d897f;
  --line:      rgba(243,239,231,.12);
  --line-2:    rgba(243,239,231,.06);
  --accent:    #c0a06a;        /* restrained warm brass */
  --accent-2:  #e9d4ab;
  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-io:   cubic-bezier(.65,.05,.36,1);
  --shadow:    0 40px 90px -40px rgba(0,0,0,.8);
  --pad:       clamp(20px, 5vw, 90px);
}

/* --- reset --- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  background:var(--bg); color:var(--ink);
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-weight:400; line-height:1.55; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
section[id], main[id]{ scroll-margin-top:92px; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
em{ font-style:italic; }
::selection{ background:var(--accent); color:#0a0a0b; }

/* --- typography helpers --- */
.kicker, .intro__kicker{
  font-size:.72rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
.section-title{
  font-family:"Fraunces",serif; font-weight:400;
  font-size:clamp(2.1rem, 5.2vw, 4.4rem); line-height:1.02;
  letter-spacing:-.01em; margin-top:.5rem;
}
.section-title em, .hero__title em, .contact__title em, .intro__text em{
  color:var(--accent-2); font-style:italic;
}

/* ============================================================
   Preloader
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.preloader__mark{
  font-family:"Fraunces",serif; font-size:2.4rem; letter-spacing:.1em;
  color:var(--ink);
}
.preloader__bar{ width:min(46vw,260px); height:1px; background:var(--line); overflow:hidden; }
.preloader__bar span{ display:block; height:100%; width:0%; background:var(--accent-2); transition:width .2s linear; }
.preloader__count{ font-size:.72rem; letter-spacing:.25em; color:var(--muted); }

/* ============================================================
   Custom cursor
   ============================================================ */
.cursor{
  position:fixed; top:0; left:0; z-index:9000; pointer-events:none;
  width:9px; height:9px; border-radius:50%; background:var(--accent-2);
  transform:translate(-50%,-50%);
  transition:width .35s var(--ease), height .35s var(--ease),
             background .35s var(--ease), opacity .3s;
  mix-blend-mode:difference;
}
.cursor.is-hover{ width:74px; height:74px; background:rgba(233,212,171,.18); backdrop-filter:invert(0); }
.cursor.is-hidden{ opacity:0; }
.cursor__label{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink); opacity:0; transition:opacity .3s; white-space:nowrap;
}
.cursor.is-hover .cursor__label{ opacity:1; }
@media (hover:none){ .cursor{ display:none; } }

/* ============================================================
   Nav
   ============================================================ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad);
  transition:padding .5s var(--ease), background .5s var(--ease), border-color .5s;
  border-bottom:1px solid transparent;
  mix-blend-mode:difference;
}
.nav.is-scrolled{
  padding:14px var(--pad); background:rgba(10,10,11,.7);
  backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid var(--line-2); mix-blend-mode:normal;
}
.nav__brand{ display:flex; flex-direction:column; line-height:1.1; }
.nav__mark{ font-family:"Fraunces",serif; font-size:1.05rem; letter-spacing:.22em; }
.nav__sub{ font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
.nav.is-scrolled .nav__sub{ color:var(--muted); }
.nav__links{ display:flex; align-items:center; gap:clamp(18px,2.4vw,40px); }
.nav__links a{ font-size:.82rem; letter-spacing:.04em; position:relative; padding:4px 0; color:var(--ink); }
.nav__links a:not(.nav__cta)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--accent-2); transition:width .4s var(--ease);
}
.nav__links a:not(.nav__cta):hover::after{ width:100%; }
.nav__cta{
  border:1px solid var(--line); border-radius:100px; padding:9px 18px !important;
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s;
}
.nav__cta:hover{ background:var(--accent-2); color:#0a0a0b; border-color:var(--accent-2); }
.nav__toggle{ display:none; flex-direction:column; gap:6px; width:30px; }
.nav__toggle span{ height:1.5px; width:100%; background:var(--ink); transition:.4s var(--ease); }

@media (max-width:860px){
  .nav{ mix-blend-mode:normal; }
  .nav__toggle{ display:flex; }
  .nav__links{
    position:fixed; inset:0; background:var(--bg);
    flex-direction:column; justify-content:center; gap:28px;
    transform:translateY(-100%); transition:transform .6s var(--ease);
    z-index:790;
  }
  .nav__links a{ font-size:1.6rem; font-family:"Fraunces",serif; }
  body.menu-open .nav__links{ transform:translateY(0); }
  body.menu-open .nav__toggle span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  body.menu-open .nav__toggle span:nth-child(2){ transform:translateY(-0px) rotate(-45deg); }
  .nav__toggle{ z-index:810; position:relative; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero{ position:relative; height:100svh; min-height:640px; overflow:hidden; display:flex; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__slide{
  position:absolute; inset:0; opacity:0;
  transition:opacity 1.6s var(--ease);
}
.hero__slide img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.08); transition:transform 8s linear;
}
.hero__slide.is-active{ opacity:1; }
.hero__slide.is-active img{ transform:scale(1); }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(to top, rgba(10,10,11,.92) 0%, rgba(10,10,11,.25) 42%, rgba(10,10,11,.45) 100%),
    radial-gradient(120% 90% at 20% 90%, rgba(10,10,11,.7), transparent 60%);
}
.hero__content{
  position:relative; z-index:2; align-self:flex-end;
  padding:0 var(--pad) clamp(80px,12vh,140px); max-width:1100px;
}
.hero__eyebrow{ font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:26px; }
.hero__title{
  font-family:"Fraunces",serif; font-weight:300;
  font-size:clamp(2.7rem, 8.5vw, 7.4rem); line-height:.98; letter-spacing:-.02em;
}
.hero__title .line{ display:block; overflow:hidden; padding-bottom:.08em; }
.hero__lede{ margin-top:30px; max-width:30em; font-size:clamp(1rem,1.25vw,1.18rem); color:var(--ink-soft); }
.hero__actions{ margin-top:38px; display:flex; gap:16px; flex-wrap:wrap; }
.hero__meta{
  position:absolute; z-index:2; right:var(--pad); bottom:clamp(80px,12vh,140px);
  display:flex; align-items:center; gap:10px; font-size:.74rem; letter-spacing:.04em;
  color:var(--ink-soft); writing-mode:vertical-rl; text-orientation:mixed;
}
.hero__dot{ width:7px; height:7px; border-radius:50%; background:#7CFC9A; box-shadow:0 0 0 0 rgba(124,252,154,.6); animation:pulse 2.4s infinite; }
@keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(124,252,154,.5);} 70%{ box-shadow:0 0 0 9px rgba(124,252,154,0);} 100%{ box-shadow:0 0 0 0 rgba(124,252,154,0);} }
.hero__scroll{
  position:absolute; left:var(--pad); bottom:30px; z-index:2;
  display:flex; align-items:center; gap:12px; font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
}
.hero__scroll i{ width:46px; height:1px; background:var(--line); position:relative; overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; left:0; top:0; height:100%; width:40%; background:var(--accent-2); animation:slide 2.2s infinite var(--ease); }
@keyframes slide{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(330%);} }
@media (max-width:860px){ .hero__meta{ display:none; } }

/* --- buttons --- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:14px 26px; border-radius:100px; font-size:.82rem; letter-spacing:.04em;
  border:1px solid var(--line); transition:transform .5s var(--ease), background .5s var(--ease), color .5s var(--ease), border-color .5s;
  will-change:transform;
}
.btn--solid{ background:var(--ink); color:#0a0a0b; border-color:var(--ink); }
.btn--solid:hover{ background:var(--accent-2); border-color:var(--accent-2); }
.btn--ghost:hover{ background:var(--ink); color:#0a0a0b; border-color:var(--ink); }

/* ============================================================
   Intro
   ============================================================ */
.intro{ padding:clamp(90px,16vh,200px) var(--pad); max-width:1400px; margin:0 auto; }
.intro__kicker{ margin-bottom:36px; }
.intro__text{
  font-family:"Fraunces",serif; font-weight:300;
  font-size:clamp(1.6rem,4vw,3.3rem); line-height:1.18; letter-spacing:-.01em; max-width:18ch;
}
.intro__text .word-wrap span{ display:inline-block; }
.intro__row{ margin-top:clamp(60px,9vh,110px); display:flex; flex-wrap:wrap; gap:clamp(36px,7vw,110px); border-top:1px solid var(--line-2); padding-top:48px; }
.intro__row .num{ font-family:"Fraunces",serif; font-size:clamp(2.4rem,5vw,4rem); display:block; line-height:1; }
.intro__row label{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:10px; display:block; }

/* ============================================================
   Work grid (masonry via columns)
   ============================================================ */
.work{ padding:clamp(40px,7vh,90px) var(--pad) clamp(60px,10vh,130px); }
.work__head{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; margin-bottom:clamp(36px,5vh,64px); }
.work__filters{ display:flex; gap:8px; flex-wrap:wrap; }
.filter{
  padding:9px 18px; border:1px solid var(--line); border-radius:100px;
  font-size:.78rem; letter-spacing:.04em; color:var(--ink-soft);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s;
}
.filter:hover{ border-color:var(--ink-soft); }
.filter.is-active{ background:var(--ink); color:#0a0a0b; border-color:var(--ink); }

.work__grid{ columns:3; column-gap:clamp(14px,1.6vw,26px); }
@media (max-width:980px){ .work__grid{ columns:2; } }
@media (max-width:560px){ .work__grid{ columns:1; } }

.card{
  position:relative; break-inside:avoid; margin-bottom:clamp(14px,1.6vw,26px);
  overflow:hidden; background:var(--panel); cursor:pointer;
  opacity:0; transform:translateY(40px) scale(.985);
  clip-path:inset(0 0 100% 0);
  transition:opacity 1.1s var(--ease), transform 1.2s var(--ease), clip-path 1.2s var(--ease);
}
.card.in{ opacity:1; transform:none; clip-path:inset(0 0 0% 0); }
.card.hide{ display:none; }
.card__media{ position:relative; overflow:hidden; }
.card__media img{
  width:100%; height:auto; display:block;
  filter:blur(14px); transform:scale(1.06);
  transition:filter 1s var(--ease), transform 1.4s var(--ease);
}
.card__media img.loaded{ filter:blur(0); transform:scale(1); }
.card:hover .card__media img.loaded{ transform:scale(1.05); }
.card__bar{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; justify-content:space-between; align-items:flex-end;
  padding:20px; opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
  background:linear-gradient(to top, rgba(10,10,11,.8), transparent);
}
.card:hover .card__bar{ opacity:1; transform:none; }
.card__title{ font-family:"Fraunces",serif; font-size:1.15rem; }
.card__cat{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-2); }
.card__plus{ font-size:1.3rem; line-height:1; color:var(--ink); }

/* people / fashion variant */
.people{ border-top:1px solid var(--line-2); }
.people__note{ max-width:34ch; color:var(--muted); font-size:.92rem; align-self:flex-end; }
.work__grid--people{ columns:4; }
@media (max-width:1100px){ .work__grid--people{ columns:3; } }
@media (max-width:760px){ .work__grid--people{ columns:2; } }
@media (max-width:460px){ .work__grid--people{ columns:1; } }

/* ============================================================
   Projects (album tiles)
   ============================================================ */
.projects{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(16px,2.4vw,40px); }
@media (max-width:760px){ .projects{ grid-template-columns:1fr; } }
.project{
  cursor:pointer; opacity:0; transform:translateY(40px) scale(.99);
  clip-path:inset(0 0 100% 0);
  transition:opacity 1.1s var(--ease), transform 1.2s var(--ease), clip-path 1.2s var(--ease);
}
.project.in{ opacity:1; transform:none; clip-path:inset(0 0 0% 0); }
.project.hide{ display:none; }
.project__media{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--panel); }
.project__media img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:blur(14px); transform:scale(1.06);
  transition:filter 1s var(--ease), transform 1.5s var(--ease);
}
.project__media img.loaded{ filter:blur(0); transform:scale(1); }
.project:hover .project__media img.loaded{ transform:scale(1.05); }
.project__view{
  position:absolute; left:20px; bottom:18px; z-index:2;
  padding:10px 17px; border:1px solid rgba(243,239,231,.5); border-radius:100px;
  font-size:.74rem; letter-spacing:.04em; color:var(--ink);
  background:rgba(10,10,11,.32); backdrop-filter:blur(6px);
  opacity:0; transform:translateY(8px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.project:hover .project__view{ opacity:1; transform:none; }
.project__info{ padding:18px 2px 0; display:flex; flex-direction:column; gap:7px; }
.project__cat{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--accent); }
.project__title{ font-family:"Fraunces",serif; font-weight:400; font-size:clamp(1.3rem,2.1vw,1.85rem); line-height:1.05; }
.project__sub{ color:var(--muted); font-size:.86rem; }

/* ============================================================
   Horizontal strip
   ============================================================ */
.strip{ position:relative; background:var(--bg); }
.strip__sticky{ position:sticky; top:0; height:100svh; overflow:hidden; display:flex; align-items:center; }
.strip__track{ display:flex; align-items:center; gap:clamp(18px,2.4vw,40px); padding:0 var(--pad); will-change:transform; }
.strip__intro{ flex:0 0 auto; width:min(60vw,420px); padding-right:30px; }
.strip__intro h2{ font-family:"Fraunces",serif; font-weight:300; font-size:clamp(2.6rem,6vw,5rem); line-height:.95; margin:12px 0 18px; }
.strip__hint{ font-size:.72rem; letter-spacing:.24em; text-transform:uppercase; color:var(--accent-2); }
.strip__slide{ flex:0 0 auto; height:62vh; position:relative; overflow:hidden; background:var(--panel); }
.strip__slide img{ height:100%; width:auto; object-fit:cover; }
.strip__slide figcaption{
  position:absolute; left:18px; bottom:16px; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink); text-shadow:0 1px 12px rgba(0,0,0,.7);
}
@media (max-width:860px){
  .strip__sticky{ height:auto; position:static; padding:60px 0; }
  .strip__track{ flex-direction:column; transform:none !important; }
  .strip__intro{ width:auto; padding:0 var(--pad) 10px; }
  .strip__slide{ height:auto; width:calc(100% - 2*var(--pad)); margin:0 var(--pad); }
  .strip__slide img{ width:100%; height:auto; }
}

/* ============================================================
   Approach
   ============================================================ */
.approach{ padding:clamp(90px,15vh,180px) var(--pad); display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,120px); max-width:1500px; margin:0 auto; align-items:start; }
.approach__left .section-title{ margin-bottom:26px; }
.approach__copy{ color:var(--ink-soft); max-width:38ch; margin-bottom:32px; }
.approach__steps{ list-style:none; display:flex; flex-direction:column; }
.approach__steps li{ display:flex; gap:24px; padding:30px 0; border-top:1px solid var(--line-2); }
.approach__steps li:last-child{ border-bottom:1px solid var(--line-2); }
.approach__steps span{ font-family:"Fraunces",serif; color:var(--accent); font-size:1rem; padding-top:4px; min-width:34px; }
.approach__steps h3{ font-family:"Fraunces",serif; font-weight:400; font-size:1.5rem; margin-bottom:8px; }
.approach__steps p{ color:var(--muted); max-width:40ch; }
@media (max-width:860px){ .approach{ grid-template-columns:1fr; } }

/* ============================================================
   About
   ============================================================ */
.about{ padding:clamp(90px,15vh,180px) var(--pad); max-width:1500px; margin:0 auto; border-top:1px solid var(--line-2); }
.about__head{ margin-bottom:clamp(40px,6vh,72px); }
.about__head .kicker{ margin-bottom:.7rem; }
.about__body{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(40px,6vw,90px); align-items:start; }
.about__bio p{ color:var(--ink-soft); font-size:clamp(1rem,1.18vw,1.16rem); margin-bottom:1.3em; max-width:46ch; }
.about__bio em{ color:var(--accent-2); font-style:normal; }
.about__portrait{ position:relative; overflow:hidden; background:var(--panel); }
.about__portrait img{ width:100%; height:auto; display:block; }
.about__portrait figcaption{ position:absolute; left:0; bottom:0; right:0; padding:18px 20px;
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink);
  background:linear-gradient(to top, rgba(10,10,11,.85), transparent); }
.about__facts{ list-style:none; margin-top:40px; }
.about__facts li{ padding:18px 0; border-top:1px solid var(--line-2); display:flex; flex-direction:column; gap:5px; }
.about__facts li:last-child{ border-bottom:1px solid var(--line-2); }
.about__facts span{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.about__facts b{ font-weight:400; font-size:.96rem; color:var(--ink); }
@media (max-width:860px){ .about__body{ grid-template-columns:1fr; } }

/* Film feature */
.film{ margin-top:clamp(50px,8vh,90px); }
.film__media{ position:relative; overflow:hidden; background:var(--panel); aspect-ratio:16/9; cursor:pointer; }
.film__media img{ width:100%; height:100%; object-fit:cover; opacity:.78; transition:opacity .6s var(--ease), transform 1.4s var(--ease); }
.film:hover .film__media img{ opacity:.92; transform:scale(1.04); }
.film__media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.film__play{
  position:absolute; inset:0; margin:auto; width:92px; height:92px; border-radius:50%;
  background:rgba(10,10,11,.45); backdrop-filter:blur(6px); border:1px solid rgba(243,239,231,.5);
  display:grid; place-items:center; transition:transform .5s var(--ease), background .5s var(--ease);
}
.film__media:hover .film__play{ transform:scale(1.12); background:var(--accent-2); border-color:var(--accent-2); }
.film__play span{ width:0; height:0; border-style:solid; border-width:11px 0 11px 19px; border-color:transparent transparent transparent var(--ink); margin-left:5px; transition:border-color .5s; }
.film__media:hover .film__play span{ border-left-color:#0a0a0b; }
.film figcaption{ display:flex; flex-direction:column; gap:6px; padding-top:20px; }
.film__tag{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); }
.film__title{ font-family:"Fraunces",serif; font-size:clamp(1.4rem,3vw,2.1rem); }
.film__sub{ color:var(--muted); font-size:.9rem; }

/* ============================================================
   Recognition
   ============================================================ */
.recognition{ padding:clamp(60px,9vh,120px) var(--pad) clamp(80px,13vh,150px); max-width:1500px; margin:0 auto; border-top:1px solid var(--line-2); }
.recognition__head{ margin-bottom:clamp(40px,6vh,70px); }
.recognition__head .kicker{ margin-bottom:.7rem; }
.recognition__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); }
.recog{ padding:34px 26px 30px; border-bottom:1px solid var(--line); border-right:1px solid var(--line-2); }
.recog h3{ font-family:"Fraunces",serif; font-weight:400; font-size:1.2rem; margin-bottom:18px; color:var(--accent-2); }
.recog ul{ list-style:none; display:flex; flex-direction:column; gap:11px; }
.recog li{ color:var(--ink-soft); font-size:.92rem; line-height:1.35; }
@media (max-width:980px){ .recognition__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .recognition__grid{ grid-template-columns:1fr; } }

/* ============================================================
   Services
   ============================================================ */
.services{ padding:clamp(60px,9vh,120px) var(--pad) clamp(90px,14vh,160px); max-width:1500px; margin:0 auto; }
.services__head{ margin-bottom:clamp(40px,6vh,70px); }
.services__head .kicker{ margin-bottom:.6rem; }
.services__grid{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.service{
  padding:40px 30px 36px; border-bottom:1px solid var(--line);
  border-right:1px solid var(--line-2); position:relative; overflow:hidden;
  transition:background .5s var(--ease);
}
.service:hover{ background:var(--panel); }
.service h3{ font-family:"Fraunces",serif; font-weight:400; font-size:1.45rem; margin-bottom:14px; }
.service p{ color:var(--muted); font-size:.92rem; min-height:6.5em; }
.service__tag{ font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.service::after{ content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--accent-2); transition:width .6s var(--ease); }
.service:hover::after{ width:100%; }
@media (max-width:980px){ .services__grid{ grid-template-columns:repeat(2,1fr); } .service p{ min-height:0; } }
@media (max-width:520px){ .services__grid{ grid-template-columns:1fr; } }

/* ============================================================
   Marquee
   ============================================================ */
.marquee{ overflow:hidden; border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2); padding:26px 0; }
.marquee__track{ display:inline-flex; align-items:center; gap:34px; white-space:nowrap; animation:marquee 28s linear infinite; }
.marquee__track span{ font-family:"Fraunces",serif; font-weight:300; font-size:clamp(2rem,5vw,3.6rem); color:var(--ink); }
.marquee__track i{ color:var(--accent); font-size:1.2rem; font-style:normal; }
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ============================================================
   Contact
   ============================================================ */
.contact{ padding:clamp(100px,18vh,220px) var(--pad) clamp(70px,10vh,120px); text-align:center; }
.contact .kicker{ margin-bottom:24px; }
.contact__title{ font-family:"Fraunces",serif; font-weight:300; font-size:clamp(2.6rem,9vw,7rem); line-height:.98; letter-spacing:-.02em; }
.contact__title .reveal-line{ display:block; }
.contact__copy{ max-width:46ch; margin:34px auto 0; color:var(--ink-soft); }
.contact__mail{
  display:inline-block; margin-top:40px; font-family:"Fraunces",serif;
  font-size:clamp(1.4rem,3.6vw,2.6rem); border-bottom:1px solid var(--line);
  padding-bottom:8px; transition:border-color .5s var(--ease), color .5s var(--ease);
}
.contact__mail:hover{ color:var(--accent-2); border-color:var(--accent-2); }
.contact__grid{ margin-top:clamp(60px,9vh,110px); display:flex; justify-content:center; flex-wrap:wrap; gap:clamp(36px,7vw,90px); border-top:1px solid var(--line-2); padding-top:48px; }
.contact__grid label{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:8px; }
.contact__grid a{ border-bottom:1px solid var(--line); transition:border-color .4s; }
.contact__grid a:hover{ border-color:var(--accent-2); }

/* ============================================================
   Footer
   ============================================================ */
.footer{ padding:clamp(40px,7vh,80px) var(--pad) 40px; border-top:1px solid var(--line-2); }
.footer__big{
  font-family:"Fraunces",serif; font-weight:300;
  font-size:clamp(3rem,16vw,13rem); line-height:.9; letter-spacing:-.02em;
  color:var(--ink); white-space:nowrap; overflow:hidden;
}
.footer__row{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; margin-top:30px; font-size:.78rem; color:var(--muted); }

/* ============================================================
   Lightbox
   ============================================================ */
.lightbox{
  position:fixed; inset:0; z-index:9500; background:rgba(8,8,9,.97);
  display:grid; place-items:center; opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s; backdrop-filter:blur(4px);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__fig{ max-width:92vw; max-height:88vh; text-align:center; transform:scale(.97); transition:transform .5s var(--ease); }
.lightbox.is-open .lightbox__fig{ transform:scale(1); }
.lightbox__fig img{ max-width:92vw; max-height:80vh; width:auto; height:auto; box-shadow:var(--shadow); }
.lightbox__fig figcaption{ margin-top:16px; font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.lightbox__close{ position:fixed; top:24px; right:30px; font-size:1.3rem; color:var(--ink); z-index:2; }
.lightbox__nav{ position:fixed; top:50%; transform:translateY(-50%); font-size:2.6rem; color:var(--ink-soft); padding:10px 18px; transition:color .3s; }
.lightbox__nav:hover{ color:var(--accent-2); }
.lightbox__prev{ left:18px; } .lightbox__next{ right:18px; }
@media (max-width:560px){ .lightbox__nav{ font-size:1.8rem; } }

/* ============================================================
   Reveal animations
   ============================================================ */
.reveal-fade{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal-fade.in{ opacity:1; transform:none; }
.reveal-line{ overflow:hidden; }
.reveal-line > span{ display:inline-block; transform:translateY(110%); transition:transform 1.1s var(--ease); }
.reveal-line.in > span{ transform:translateY(0); }

@media (prefers-reduced-motion:reduce){
  .reveal-fade,.reveal-line>span,.card{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .card__media img{ filter:none !important; }
  .hero__slide img{ transition:none; }
  .cursor{ display:none; }
}

/* ============================================================
   Bold motion layer
   ============================================================ */
:root{ --vskew:0deg; }

/* velocity skew applied to the big galleries + marquee */
#workGrid, #peopleGrid{ transform:skewY(var(--vskew)); transform-origin:50% 0; }
.marquee__track{ transform:skewY(var(--vskew)); }

/* scroll progress bar */
.scroll-progress{
  position:fixed; top:0; left:0; height:2px; width:0%;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index:8500; pointer-events:none; box-shadow:0 0 14px rgba(233,212,171,.5);
}

/* film grain overlay */
.grain{
  position:fixed; inset:-150%; z-index:8000; pointer-events:none;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 0.6s steps(2) infinite;
}
@keyframes grain{
  0%{ transform:translate(0,0); }   25%{ transform:translate(-3%,2%); }
  50%{ transform:translate(2%,-3%); } 75%{ transform:translate(-2%,-2%); }
  100%{ transform:translate(3%,3%); }
}

/* hero title char reveal */
.hero__title .char{ display:inline-block; transform:translateY(115%) rotateX(-70deg); opacity:0;
  transition:transform 1s var(--ease), opacity .8s var(--ease); transform-origin:bottom; }
.hero__title.chars-in .char{ transform:none; opacity:1; }

/* magnetic buttons */
.btn, .nav__cta{ will-change:transform; }

@media (prefers-reduced-motion:reduce){
  #workGrid, #peopleGrid, .marquee__track{ transform:none !important; }
  .grain{ animation:none; }
  .hero__title .char{ transform:none !important; opacity:1 !important; }
}
@media (hover:none){ .grain{ opacity:.04; } }