:root{
  --bg:#0a0a0b;
  --bg-alt:#111113;
  --text:#f2f0ec;
  --muted:#9a9a9f;
  --accent:#6f8cff;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;scroll-padding-top:90px;}
html,body{background:var(--bg);color:var(--text);height:100%;}
body{
  font-family:"Helvetica Neue",Arial,sans-serif;
  overflow-x:hidden;
}
h1,h2,h3{font-weight:300;letter-spacing:0.02em;}
a{color:inherit;text-decoration:none;}

/* NAV */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:calc(env(safe-area-inset-top,0px) + 22px) 6vw 18px;
  display:flex;justify-content:flex-end;align-items:center;
  background:linear-gradient(to bottom, rgba(10,10,11,0.85), transparent);
}
.nav-links{
  display:flex;gap:1.8rem;font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text);
  background:rgba(120,120,128,0.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(242,240,236,0.12);
  padding:0.65rem 1.4rem;border-radius:999px;
}
.nav-links a:hover{color:var(--accent);}
@media(max-width:600px){
  .nav-links{gap:0.9rem;font-size:0.62rem;padding:0.5rem 1rem;}
}

/* HERO */
.hero{
  position:relative;height:100svh;min-height:560px;
  display:flex;align-items:flex-end;
  overflow:hidden;
}
.hero img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 35%;
}
.hero-content{
  position:relative;z-index:2;padding:0 6vw 9vh;
  margin-left:clamp(0px, 42vw, 16cm);
}
@media(max-width:900px){
  .hero-content{margin-left:0;}
}
.hero-content .kicker{
  display:inline-block;font-size:0.75rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--text);
  margin-bottom:1rem;
  background:rgba(120,120,128,0.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(242,240,236,0.12);
  padding:0.5rem 1rem;border-radius:999px;
}
.hero-content h1{
  display:inline-block;font-size:clamp(2.4rem,7vw,5rem);line-height:1.15;font-weight:200;
  background:rgba(111,140,255,0.10);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(111,140,255,0.22);
  padding:0.5em 0.7em;border-radius:18px;
}
.hero-content p{
  display:inline-block;box-sizing:border-box;margin-top:1.1rem;color:var(--text);font-size:1rem;line-height:1.5;
  background:rgba(120,120,128,0.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(242,240,236,0.12);
  padding:0.7em 1em;border-radius:14px;
}

/* SECTIONS */
section{padding:9vh 6vw;}
.section-head{margin-bottom:3.5rem;}
.section-head .kicker{font-size:0.75rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--accent);margin-bottom:0.6rem;}
.section-head h2{font-size:clamp(1.8rem,4vw,2.8rem);}

/* CATEGORY TILES */
.cat-tiles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:4.5rem;
}
@media(max-width:760px){
  .cat-tiles{grid-template-columns:1fr;}
}
.cat-tile{
  position:relative;aspect-ratio:4/5;overflow:hidden;border:none;padding:0;
  background:var(--bg-alt);cursor:pointer;font-family:inherit;text-align:left;
  border-radius:2px;
}
@media(max-width:760px){.cat-tile{aspect-ratio:16/9;}}
.cat-tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:brightness(0.62) saturate(0.9);transition:transform 0.6s ease, filter 0.4s ease;
}
.cat-tile-img{
  transition:opacity 1.1s ease, filter 0.4s ease;
  opacity:0;z-index:1;
}
.cat-tile-img.cat-tile-img--show{opacity:1;z-index:2;}
.cat-tile-placeholder{
  position:absolute;inset:0;
  background:repeating-linear-gradient(135deg, rgba(242,240,236,0.03) 0 2px, transparent 2px 14px);
}
.cat-tile-overlay{
  position:absolute;inset:0;z-index:3;
  background:linear-gradient(to top, rgba(10,10,11,0.92) 0%, rgba(10,10,11,0.15) 55%, rgba(10,10,11,0.05) 100%);
}
.cat-tile-info{
  position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.5rem;z-index:4;
  display:flex;flex-direction:column;gap:0.3rem;
}
.cat-tile-name{font-size:1.15rem;font-weight:300;letter-spacing:0.02em;}
.cat-tile-count{font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);}
.cat-tile:not(:disabled):hover img{transform:scale(1.05);filter:brightness(0.72) saturate(1);}
.cat-tile:not(:disabled):hover .cat-tile-name{color:var(--accent);}
.cat-tile.cat-tile--active{box-shadow:inset 0 0 0 2px var(--text);}
.cat-tile--empty{cursor:default;}
.cat-tile--empty .cat-tile-name{color:var(--muted);}
.cat-tile:disabled{opacity:0.55;}

/* GALLERY PAGE */
.gallery-page{padding-top:calc(9vh + 40px);}
.back-link{
  display:inline-block;font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.6rem;
}
.back-link:hover{color:var(--text);}
.gallery-empty{color:var(--muted);font-size:0.95rem;}

/* GALLERY — an editorial scroll: each photo keeps its own natural aspect
   ratio (no cropping, no filter). The first photo (a landscape shot)
   stands alone at the top; the rest alternate left / right / center as
   you scroll, occasionally overlapping the photo before them. */
.gallery-grid{
  display:flex;flex-direction:column;gap:9vh;
}
.g-item{
  position:relative;max-height:88vh;overflow:hidden;cursor:zoom-in;line-height:0;
}
.g-item img{
  display:block;width:100%;height:auto;max-height:88vh;object-fit:contain;
}

/* Opening photo: full width, alone, no positional offset, always visible */
.g-item.pos-hero{width:100%;max-width:1100px;align-self:center;opacity:1;}

/* Subsequent photos: strictly alternating left/right, narrower so they
   read as distinct "cards" in the scroll rather than a uniform column */
.g-item.pos-left{align-self:flex-start;width:min(76%,880px);}
.g-item.pos-right{align-self:flex-end;width:min(76%,880px);}

/* Systematic overlap: every photo (after the first) pulls up into the
   one before it. */
.g-item.ov{margin-top:-24vh;z-index:2;}

/* Scroll-scrubbed motion: transform and opacity are set directly by JS
   on every scroll event (js/gallery.js), proportional to how far each
   photo has travelled up through the viewport — not a fixed-duration
   CSS transition. This moves the photo card as a whole; the image
   itself is never cropped, stretched or filtered. */
.g-item[data-dir]{opacity:0;will-change:transform,opacity;}

@media(max-width:760px){
  .g-item.pos-left, .g-item.pos-right{width:100%;align-self:center;}
  .g-item.ov{margin-top:-10vh;}
}

/* ABOUT */
.about{
  display:grid;grid-template-columns:1fr;gap:3rem;
}
@media(min-width:900px){
  .about{grid-template-columns:0.85fr 1.15fr;align-items:center;gap:5rem;}
}
.about-img{overflow:hidden;}
.about-img img{width:100%;display:block;filter:saturate(0.9) contrast(1.02);}
.about-text p{color:var(--muted);line-height:1.75;font-size:1.02rem;margin-bottom:1.2rem;max-width:52ch;}
.about-text .lead{color:var(--text);font-size:1.2rem;font-weight:300;margin-bottom:1.4rem;max-width:38ch;}

/* CONTACT */
.contact{
  background:var(--bg-alt);
  text-align:center;
}
.contact .section-head{margin-bottom:2.2rem;}
.contact h2{max-width:16ch;margin:0 auto;}
.contact-form{
  margin:1.6rem auto 0;max-width:520px;text-align:left;
  display:flex;flex-direction:column;gap:1.2rem;
}
.cf-row{display:flex;flex-direction:column;gap:0.5rem;}
.cf-row label{
  font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  font-family:inherit;font-size:1rem;color:var(--text);
  background:rgba(242,240,236,0.05);border:1px solid rgba(242,240,236,0.16);
  border-radius:8px;padding:0.75em 0.9em;resize:vertical;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder{color:var(--muted);}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(111,140,255,0.06);
}
.contact-form select{appearance:none;cursor:pointer;}
.cf-submit{
  align-self:flex-start;margin-top:0.4rem;
  font-family:inherit;font-size:0.85rem;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--bg);background:var(--text);border:none;border-radius:999px;
  padding:0.85em 2em;cursor:pointer;transition:background 0.25s ease,color 0.25s ease;
}
.cf-submit:hover{background:var(--accent);color:var(--text);}
.cf-submit:disabled{opacity:0.6;cursor:default;}
.cf-status{
  font-size:0.85rem;margin-top:0.2rem;min-height:1.2em;
}
.cf-status.cf-status--ok{color:#7bd88f;}
.cf-status.cf-status--error{color:#e88;}
.socials{margin-top:2.4rem;display:flex;gap:1.6rem;justify-content:center;font-size:0.78rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted);}
.socials a:hover{color:var(--text);}

footer{
  padding:3.5rem 6vw 4rem;display:flex;justify-content:space-between;
  font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted);
  flex-wrap:wrap;gap:1rem;
}

/* LIGHTBOX */
.lightbox{
  position:fixed;inset:0;background:rgba(6,6,7,0.96);z-index:1000;
  display:none;align-items:center;justify-content:center;padding:4vh 4vw;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%;max-height:92svh;display:block;}
.lightbox-close{
  position:absolute;top:calc(2vh + env(safe-area-inset-top,0px));right:5vw;
  font-size:0.8rem;letter-spacing:0.15em;text-transform:uppercase;color:var(--muted);cursor:pointer;
}
.lightbox-close:hover{color:var(--text);}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:1.6rem;color:var(--muted);cursor:pointer;padding:1rem;user-select:none;
}
.lightbox-nav:hover{color:var(--text);}
.lb-prev{left:1vw;}
.lb-next{right:1vw;}