/* ============================================================
   LAUSK — Street Photography
   ============================================================ */

:root{
  --bg:#0a0a0a;
  --bg-soft:#111111;
  --fg:#f4f2ee;
  --fg-dim:#8a8782;
  --line:rgba(244,242,238,.14);
  --accent:#f4f2ee;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad: clamp(20px, 5vw, 70px);
  --font-sans:'Space Grotesk', sans-serif;
  --font-serif:'Cormorant', Georgia, 'Times New Roman', serif;
}

*{margin:0;padding:0;box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto; /* lenis handles smooth scroll */
}

body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  font-weight:300;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;            /* avoid overflow-x:hidden on html (iOS scroll bug) */
}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--fg);color:var(--bg)}

/* ---------- Loader ---------- */
.loader{display:none}
.js .loader{
  position:fixed;inset:0;z-index:200;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader.is-done{opacity:0;visibility:hidden}
.loader__inner{display:flex;flex-direction:column;align-items:center;gap:28px}
.loader__mark{width:46px;opacity:.95;animation:pulse 1.6s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
.loader__count{font-size:13px;letter-spacing:.25em;color:var(--fg-dim);font-variant-numeric:tabular-nums}
.loader__count i{font-style:normal;margin-left:2px}

/* ---------- Custom cursor ---------- */
.cursor{
  position:fixed;top:0;left:0;z-index:150;
  width:78px;height:78px;margin:-39px 0 0 -39px;
  border-radius:50%;
  background:var(--fg);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;letter-spacing:.18em;
  pointer-events:none;
  transform:scale(0);
  transition:transform .35s var(--ease), opacity .3s;
  will-change:transform;
  mix-blend-mode:difference;
}
.cursor.is-active{transform:scale(1)}
.cursor.is-hidden{opacity:0}
@media (hover:none){.cursor{display:none}}

/* ---------- Header ---------- */
.header{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px var(--pad);
  mix-blend-mode:difference;
  transition:transform .5s var(--ease);
}
.header.is-hidden{transform:translateY(-110%)}
.header__logo{display:block;line-height:0}
.header__logo img{height:36px;width:auto;display:block}
.header__nav{display:flex;gap:34px}
.header__nav a{
  font-size:13px;letter-spacing:.08em;color:var(--fg);position:relative;padding:4px 0;
}
.header__nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--fg);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.header__nav a:hover::after{transform:scaleX(1);transform-origin:left}
.header__menu{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:6px}
.header__menu span{display:block;width:26px;height:1.5px;background:var(--fg);transition:transform .4s var(--ease),opacity .3s}

/* ---------- Mobile overlay menu ---------- */
.navmenu{
  position:fixed;inset:0;z-index:90;background:var(--bg);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--pad);
  transform:translateY(-100%);opacity:0;
  transition:transform .7s var(--ease),opacity .4s var(--ease);
  pointer-events:none;
}
.navmenu.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
.navmenu__links{display:flex;flex-direction:column;gap:10px}
.navmenu__links a{
  font-family:var(--font-serif);font-size:14vw;line-height:1.05;font-weight:300;
  display:flex;align-items:baseline;gap:16px;
}
.navmenu__links a span{font-family:var(--font-sans);font-size:13px;color:var(--fg-dim)}
.navmenu__foot{margin-top:48px;display:flex;gap:28px;flex-wrap:wrap;color:var(--fg-dim);font-size:14px}

/* ---------- Hero ---------- */
.hero{
  position:relative;height:100svh;min-height:560px;width:100%;
  overflow:hidden;display:flex;align-items:flex-end;
  padding:var(--pad);
  padding-bottom:clamp(112px,15vh,150px); /* clear the centered scroll cue */
}
.hero__media{position:absolute;inset:-10% 0;z-index:0;will-change:transform;background:linear-gradient(135deg,#161616,#0b0b0b)}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:70% center;filter:contrast(1.05) brightness(.78)}
.hero__scrim{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,10,10,.45) 0%,rgba(10,10,10,.1) 35%,rgba(10,10,10,.75) 100%)}
.hero__content{position:relative;z-index:2;max-width:1100px}
.hero__eyebrow{font-size:13px;letter-spacing:.22em;color:var(--fg);margin-bottom:22px;text-transform:uppercase}
.hero__title{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(40px,8vw,124px);line-height:.96;letter-spacing:-.01em;
}
.hero__title .line{display:block;overflow:hidden;padding-bottom:.28em;margin-bottom:-.28em}
.hero__title .line>span{display:block;will-change:transform}
.hero__title .italic{font-style:italic;color:var(--fg)}
.hero__scroll{
  position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.2em;color:var(--fg);text-transform:uppercase;
}
.hero__scroll i{width:1px;height:46px;background:var(--fg);transform-origin:top;animation:scrollLine 2.2s var(--ease) infinite}
@keyframes scrollLine{0%{transform:scaleY(0);transform-origin:top}40%{transform:scaleY(1);transform-origin:top}60%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.hero__meta{position:absolute;right:var(--pad);bottom:28px;z-index:2;display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:12px;letter-spacing:.1em;color:var(--fg)}

/* ---------- Statement ---------- */
.statement{padding:clamp(90px,16vh,200px) var(--pad)}
.statement__text{
  font-family:var(--font-serif);font-weight:300;
  font-size:clamp(26px,4.4vw,62px);line-height:1.22;max-width:18ch;letter-spacing:-.01em;
}
.statement__text [data-anim="word"]{display:inline-block;transition:opacity .5s var(--ease);padding-bottom:.16em;margin-bottom:-.16em}
.js .statement__text [data-anim="word"]{opacity:.16}
.statement__text [data-anim="word"].is-lit{opacity:1}

/* ---------- Section head ---------- */
.section-head{
  display:flex;align-items:baseline;gap:18px;
  padding:0 var(--pad);margin-bottom:48px;
  border-top:1px solid var(--line);padding-top:26px;
}
.section-head__num{font-size:12px;letter-spacing:.2em;color:var(--fg-dim)}
.section-head__title{font-weight:400;font-size:14px;letter-spacing:.18em;text-transform:uppercase}

/* ---------- Gallery ---------- */
.work{padding-bottom:clamp(60px,12vh,160px)}
.gallery{
  column-count:2;column-gap:clamp(20px,3.4vw,56px);
  padding:0 var(--pad);
}
.gallery__item{position:relative;break-inside:avoid;-webkit-column-break-inside:avoid;width:100%;margin:0 0 clamp(28px,4vw,64px)}

/* series groups */
.series-group{margin-bottom:clamp(46px,8vh,96px)}
.series-group__head{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding:0 var(--pad);margin-bottom:clamp(24px,3vw,40px);
  padding-top:26px;border-top:1px solid var(--line);
}
.series-group__num{font-size:12px;letter-spacing:.2em;color:var(--fg-dim)}
.series-group__name{font-family:var(--font-serif);font-weight:300;font-size:clamp(28px,4.4vw,58px);line-height:1;letter-spacing:-.01em}
.series-group__note{margin-left:auto;font-size:12px;letter-spacing:.06em;color:var(--fg-dim)}

.frame{position:relative;overflow:hidden;background:linear-gradient(135deg,#161616,#0e0e0e)}
.frame img{width:100%;height:auto;will-change:transform;transition:transform 1.2s var(--ease);transform:scale(1.04)}
.gallery__item:hover .frame img{transform:scale(1.0)}
figcaption{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-top:14px;font-size:12px;letter-spacing:.05em;
}
figcaption span{color:var(--fg)}
figcaption i{font-style:normal;color:var(--fg-dim)}

/* image reveal (enhancement — visible by default without JS; iOS-safe, no clip-path) */
.reveal-img{transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.js .reveal-img{opacity:0}
.js .reveal-img.is-in{opacity:1}

/* ---------- Series list (hover reveal) ---------- */
.series{position:relative;padding-bottom:clamp(80px,14vh,180px)}
.serieslist{list-style:none}
.serieslist__row{border-top:1px solid var(--line)}
.serieslist__row:last-child{border-bottom:1px solid var(--line)}
.serieslist__row a{
  display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:24px;
  padding:clamp(22px,3.4vw,40px) var(--pad);
  position:relative;z-index:2;transition:color .4s var(--ease);
}
.serieslist__index{font-size:12px;letter-spacing:.15em;color:var(--fg-dim)}
.serieslist__name{
  font-family:var(--font-serif);font-weight:300;font-size:clamp(30px,6vw,86px);line-height:1;
  transition:transform .55s var(--ease),opacity .4s;
}
.serieslist__count{font-size:12px;letter-spacing:.1em;color:var(--fg-dim)}
.serieslist__row:hover .serieslist__name{transform:translateX(24px)}
@media (hover:hover){
  .serieslist:hover .serieslist__row a{opacity:.32}
  .serieslist__row a:hover{opacity:1 !important}
}
.serieslist__row .serieslist__name{font-style:normal}
.serieslist__row:hover .serieslist__name{font-style:italic}

.serieslist__float{
  position:fixed;top:0;left:0;width:260px;height:330px;z-index:60;
  pointer-events:none;overflow:hidden;
  transform:translate(-50%,-50%) scale(.85);opacity:0;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
  will-change:transform;
}
.serieslist__float.is-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}
.serieslist__float img{width:100%;height:100%;object-fit:cover}
@media (hover:none){.serieslist__float{display:none}}

/* ---------- About ---------- */
.about{padding-bottom:clamp(80px,14vh,180px)}
.about__grid{
  display:grid;grid-template-columns:5fr 6fr;gap:clamp(30px,6vw,100px);
  padding:0 var(--pad);align-items:center;
}
.about__media{overflow:hidden}
.about__media img{width:100%;height:auto;will-change:transform}
.about__lead{font-family:var(--font-serif);font-size:clamp(22px,2.6vw,38px);line-height:1.25;margin-bottom:28px}
.about__body p{color:var(--fg-dim);max-width:46ch;margin-bottom:18px;font-size:15.5px;line-height:1.7}
.about__list{list-style:none;margin-top:34px;border-top:1px solid var(--line)}
.about__list li{display:flex;gap:18px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14px}
.about__list li span{width:80px;color:var(--fg-dim);letter-spacing:.08em}

/* ---------- Contact ---------- */
.contact{padding:clamp(90px,16vh,200px) var(--pad) clamp(60px,8vh,110px);border-top:1px solid var(--line)}
.contact__eyebrow{font-size:13px;letter-spacing:.22em;color:var(--fg-dim);text-transform:uppercase;margin-bottom:30px}
.contact__mail{display:inline-block;font-family:var(--font-serif);font-weight:300;font-size:clamp(46px,11vw,150px);line-height:.98;letter-spacing:-.01em}
.contact__mail-line{display:block;overflow:hidden}
.contact__mail-line>span{display:block;transition:transform .6s var(--ease)}
.contact__mail .italic{font-style:italic}
.contact__mail:hover .contact__mail-line>span{transform:translateX(20px)}
.contact__cols{
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px;
  margin-top:clamp(60px,10vh,120px);max-width:760px;
}
.contact__cols h4{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-dim);margin-bottom:14px;font-weight:400}
.contact__cols a,.contact__cols p{display:block;font-size:15px;color:var(--fg);line-height:1.7}
.contact__cols a{position:relative;width:fit-content}
.contact__cols a::after{content:"";position:absolute;left:0;bottom:1px;width:100%;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.contact__cols a:hover::after{transform:scaleX(1);transform-origin:left}

/* ---------- Footer ---------- */
.foot{padding:40px var(--pad);display:flex;flex-direction:column;gap:30px;border-top:1px solid var(--line)}
.foot__mark{width:34px;opacity:.8}
.foot__row{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.06em;color:var(--fg-dim)}
.foot__row a{position:relative}
.foot__row a:hover{color:var(--fg)}

/* ---------- Scroll-fade primitives (enhancement — visible by default) ---------- */
[data-anim="fade"]{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js [data-anim="fade"]{opacity:0;transform:translateY(24px)}
.js [data-anim="fade"].is-in{opacity:1;transform:none}
[data-anim="line"]>span{transition:transform 1s var(--ease)}
.js [data-anim="line"]>span{transform:translateY(140%)}
.js [data-anim="line"].is-in>span{transform:translateY(0)}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .header__nav{display:none}
  .header__menu{display:flex}
  .menu-open .header__menu span:first-child{transform:translateY(3.75px) rotate(45deg)}
  .menu-open .header__menu span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .gallery{column-count:1}
  .gallery__item{margin-bottom:clamp(26px,7vw,52px)}
  .about__grid{grid-template-columns:1fr;gap:40px}
  .contact__cols{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .hero__meta{display:none}
  .navmenu__links a{font-size:17vw}
  .contact__cols{grid-template-columns:1fr;gap:24px}
  .statement__text{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important}
  .reveal-img{clip-path:none}
  [data-anim]{opacity:1 !important;transform:none !important}
  [data-anim="line"]>span{transform:none !important}
}