:root{
  --bg:#0b0b0d;
  --bg-soft:#121215;
  --ink:#f4f1ea;
  --ink-dim:#9b978e;
  --gold:#c9a96a;
  --line:rgba(244,241,234,.12);
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Inter',-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem 4vw;transition:background .4s,padding .4s;border-bottom:1px solid transparent}
.nav.scrolled{background:rgba(11,11,13,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:.9rem 4vw;border-bottom-color:var(--line)}
.brand{font-family:var(--serif);font-size:1.5rem;letter-spacing:.28em;text-transform:uppercase;font-weight:400}
.brand span{color:var(--gold)}
.nav ul{display:flex;gap:2.4rem;list-style:none}
.nav ul a{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-dim);transition:color .3s;position:relative}
.nav ul a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:1px;background:var(--gold);transition:width .35s}
.nav ul a:hover{color:var(--ink)}
.nav ul a:hover::after{width:100%}
.nav ul a[aria-current="page"]{color:var(--gold)}
.nav ul a[aria-current="page"]::after{width:100%}
.burger{display:none;background:none;border:0;color:var(--ink);font-size:1.4rem;cursor:pointer}

/* ---------- Hero (home) ---------- */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.hero-img{position:absolute;inset:0;z-index:-2}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 30%;animation:kenburns 18s ease-out both}
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,11,13,.55) 0%,rgba(11,11,13,.25) 45%,rgba(11,11,13,.92) 100%)}
.hero-inner{text-align:center;padding:0 6vw;max-width:60rem}
.kicker{font-size:.72rem;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);margin-bottom:1.6rem}
h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.8rem,7.5vw,6.2rem);line-height:1.08;letter-spacing:.01em}
h1 em{font-style:italic;color:var(--gold)}
.hero p{margin:1.8rem auto 2.8rem;max-width:34rem;color:var(--ink-dim);font-size:.98rem}
.btn{display:inline-block;border:1px solid var(--gold);color:var(--ink);padding:.95rem 2.6rem;background:none;cursor:pointer;
  font-family:var(--sans);font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;transition:background .35s,color .35s}
.btn:hover{background:var(--gold);color:#141210}
.scroll-hint{position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);width:1px;height:56px;overflow:hidden}
.scroll-hint::before{content:"";position:absolute;inset:0;background:linear-gradient(var(--gold),transparent);
  animation:drop 2.2s ease-in-out infinite}
@keyframes drop{from{transform:translateY(-100%)}to{transform:translateY(100%)}}

/* ---------- Page hero (subpages) ---------- */
.page-hero{position:relative;min-height:58svh;display:grid;place-items:end center;overflow:hidden;isolation:isolate;
  padding:9rem 6vw 4.5rem;text-align:center}
.page-hero .hero-img{position:absolute;inset:0;z-index:-2}
.page-hero .hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(11,11,13,.6) 0%,rgba(11,11,13,.35) 50%,var(--bg) 100%)}
.page-hero h1{font-size:clamp(2.4rem,5.5vw,4.4rem)}
.page-hero p{margin:1.2rem auto 0;max-width:36rem;color:var(--ink-dim);font-size:.95rem}

/* ---------- Sections ---------- */
section{padding:8rem 4vw}
.narrow{max-width:46rem;margin:0 auto;text-align:center}
h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.2;margin:1rem 0 1.4rem}
.lead{color:var(--ink-dim)}
.rule{width:56px;height:1px;background:var(--gold);margin:2.2rem auto 0}

/* ---------- Collections grid (home) ---------- */
.collections{max-width:90rem;margin:0 auto;padding:0 4vw 8rem}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.card{position:relative;overflow:hidden;aspect-ratio:3/4;background:var(--bg-soft);display:block}
.card img{width:100%;height:100%;object-fit:cover;filter:grayscale(28%) brightness(.85);
  transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s}
.card:hover img{transform:scale(1.07);filter:grayscale(0) brightness(.95)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(11,11,13,.88))}
.card-label{position:absolute;z-index:1;left:1.6rem;bottom:1.5rem;right:1.6rem}
.card-label .no{font-size:.68rem;letter-spacing:.34em;color:var(--gold)}
.card-label h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;margin-top:.35rem}
.card-label .cta{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-dim);
  display:inline-block;margin-top:.5rem;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
.card:hover .cta{opacity:1;transform:none}

/* ---------- Gallery (collection pages) ---------- */
.gallery{max-width:82rem;margin:0 auto;padding:4rem 4vw 8rem;columns:3;column-gap:1.2rem}
.gallery figure{break-inside:avoid;margin:0 0 1.2rem;position:relative;overflow:hidden;background:var(--bg-soft);cursor:zoom-in}
.gallery img{width:100%;filter:brightness(.92);transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s}
.gallery figure:hover img{transform:scale(1.05);filter:brightness(1.02)}
.gallery figure::after{content:"+";position:absolute;right:1rem;bottom:.8rem;font-family:var(--serif);font-size:1.6rem;
  color:var(--ink);opacity:0;transition:opacity .4s;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.gallery figure:hover::after{opacity:.9}

/* Wide banner figure below the masonry — spans two of the three column widths */
.gallery.has-banner{padding-bottom:1.2rem}
.gallery-banner{max-width:82rem;margin:0 auto;padding:0 4vw 8rem}
.gallery-banner figure{width:calc((100% - 2.4rem)*2/3 + 1.2rem);position:relative;overflow:hidden;
  background:var(--bg-soft);cursor:zoom-in}
.gallery-banner img{width:100%;filter:brightness(.92);transition:transform 1.1s cubic-bezier(.16,1,.3,1),filter .6s}
.gallery-banner figure:hover img{transform:scale(1.05);filter:brightness(1.02)}
.gallery-banner figure::after{content:"+";position:absolute;right:1rem;bottom:.8rem;font-family:var(--serif);
  font-size:1.6rem;color:var(--ink);opacity:0;transition:opacity .4s;text-shadow:0 1px 8px rgba(0,0,0,.6)}
.gallery-banner figure:hover::after{opacity:.9}
@media(max-width:1100px){
  .gallery-banner figure{width:100%}
}

/* Curated flush grid (Damenkollektion): explicit placement, equal column bottoms,
   wide banner spans two columns in the last row. Images crop via object-fit. */
.damen-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;
  grid-template-rows:repeat(5,clamp(180px,24vw,345px));
  grid-template-areas:"a b c" "a b d" "e f d" "e f g" "h h g"}
.damen-grid figure{margin:0;height:100%}
.damen-grid img{width:100%;height:100%;object-fit:cover}
.damen-grid figure:nth-child(1){grid-area:a}
.damen-grid figure:nth-child(2){grid-area:b}
.damen-grid figure:nth-child(3){grid-area:c}
.damen-grid figure:nth-child(4){grid-area:d}
.damen-grid figure:nth-child(5){grid-area:e}
.damen-grid figure:nth-child(6){grid-area:f}
.damen-grid figure:nth-child(7){grid-area:g}
.damen-grid figure:nth-child(8){grid-area:h}
.damen-grid figure:nth-child(3) img,
.damen-grid figure:nth-child(4) img{object-position:center 18%}
@media(max-width:768px){
  .gallery{columns:1}
  .damen-grid{display:block}
  .damen-grid figure{margin:0 0 1.2rem;height:auto}
  .damen-grid img{height:auto}
}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:90;background:rgba(11,11,13,.94);backdrop-filter:blur(10px);
  display:none;place-items:center;padding:4vh 4vw;cursor:zoom-out}
.lightbox.open{display:grid}
.lightbox img{max-width:92vw;max-height:88vh;width:auto;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox .close{position:absolute;top:1.4rem;right:2rem;font-size:2rem;color:var(--ink-dim);background:none;border:0;cursor:pointer}
.lightbox .close:hover{color:var(--ink)}

/* ---------- Statement band ---------- */
.statement{position:relative;padding:11rem 4vw;overflow:hidden;isolation:isolate;text-align:center}
.statement .bg{position:absolute;inset:0;z-index:-2}
.statement .bg img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.statement::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(11,11,13,.78)}
blockquote{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.6rem,3.4vw,2.7rem);
  line-height:1.35;max-width:52rem;margin:0 auto}
blockquote footer{font-family:var(--sans);font-style:normal;font-size:.72rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);margin-top:2rem}

/* ---------- Contact form ---------- */
.contact-wrap{max-width:74rem;margin:0 auto;padding:5rem 4vw 8rem;display:grid;grid-template-columns:1.4fr 1fr;gap:5rem}
.form-grid{display:grid;gap:1.8rem}
.field label{display:block;font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:.5rem}
.field input,.field textarea{width:100%;background:none;border:0;border-bottom:1px solid var(--line);color:var(--ink);
  font-family:var(--sans);font-weight:300;font-size:1rem;padding:.7rem 0;transition:border-color .3s;border-radius:0}
.field input:focus,.field textarea:focus{outline:none;border-bottom-color:var(--gold)}
.field textarea{min-height:9rem;resize:vertical}
.form-note{font-size:.8rem;color:var(--ink-dim);min-height:1.4em}
.form-note.ok{color:var(--gold)}
.form-note.err{color:#c96a6a}
.side-info h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;margin-bottom:1rem}
.side-info p{color:var(--ink-dim);font-size:.92rem}
.side-info .block{padding:2rem 0;border-top:1px solid var(--line)}
.side-info .block:first-child{border-top:0;padding-top:0}
.side-info a:hover{color:var(--gold)}

/* ---------- Prose (impressum) ---------- */
.prose{max-width:46rem;margin:0 auto;padding:4rem 4vw 8rem}
.prose h2{font-size:1.7rem;margin:3.2rem 0 .9rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin:2.2rem 0 .6rem}
.prose p{color:var(--ink-dim);font-size:.93rem;margin-bottom:1rem}
.prose a{color:var(--ink);border-bottom:1px solid var(--gold)}
.prose a:hover{color:var(--gold)}
.prose .vcard{color:var(--ink);font-size:1rem;line-height:2}

/* ---------- Footer ---------- */
footer.site{border-top:1px solid var(--line);padding:3rem 4vw;display:flex;flex-wrap:wrap;gap:1rem;
  align-items:center;justify-content:space-between;font-size:.74rem;color:var(--ink-dim)}
footer.site a{color:var(--ink-dim);transition:color .3s}
footer.site a:hover{color:var(--gold)}
footer.site nav{display:flex;gap:1.6rem}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero-img img{animation:none}
}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .gallery{columns:2}
}
@media(max-width:960px){
  .grid{grid-template-columns:repeat(2,1fr)}
  .contact-wrap{grid-template-columns:1fr;gap:3rem}
}
@media(max-width:720px){
  /* top/height instead of inset:0 — the scrolled nav's backdrop-filter makes the
     header the containing block for fixed children, which would shrink the menu */
  .nav ul{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;
    background:rgba(11,11,13,.97);flex-direction:column;align-items:center;
    justify-content:center;gap:2rem;transform:translateY(-105%);visibility:hidden;
    transition:transform .45s,visibility .45s;font-size:1rem}
  .nav ul.open{transform:none;visibility:visible}
  .nav ul a{font-size:.9rem}
  .burger{display:block;z-index:60}
  section{padding:5rem 6vw}
  /* Hero photo: the model is on the left of the image — keep her in the narrow crop */
  .hero-img img{object-position:12% 30%}
}
@media(max-width:520px){
  .grid{grid-template-columns:1fr}
  .card{aspect-ratio:4/3}
  .gallery{columns:1}
}