/* =========================================================================
   VIPERLINE — "Doppelbelichtung. Zwei Welten. Eine Caroline."
   Design system + layout. Native scroll only (no smooth-scroll lib, no pin).
   ========================================================================= */

/* ---------- Tokens ---------- */
:root{
  /* NOIR / MODELING */
  --noir-bg:#0B0B0D; --noir-surface:#141417; --noir-elev:#1c1c20;
  --crimson:#C8102E; --crimson-hot:#FF2D4B; --noir-text:#F5F3EF; --noir-muted:#A7A2A0;
  /* PATISSERIE / CARAMEL */
  --cream-bg:#F3E9DC; --cream-surface:#FBF5EC; --caramel:#B97A3D; --caramel-soft:#E6B587;
  --caramel-text:#8A5A2C; /* AA-compliant caramel for SMALL text on cream */
  --ink:#2A211A; --cream-muted:#7A6A58;
  /* SEAM / NEUTRAL */
  --seam-gold:#E7C9A0; --seam-hi:rgba(255,255,255,.85); --greige:#D8CDBF;
  /* Active world (updated per-section via JS); defaults to noir */
  --bg:var(--noir-bg); --text:var(--noir-text); --muted:var(--noir-muted); --accent:var(--crimson);
  /* fonts */
  --f-display:"Archivo",system-ui,sans-serif;
  --f-serif:"Fraunces",Georgia,serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-script:"Qwigley",cursive;
  --vh:1vh; /* iOS fallback */
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
/* native scroll only — NO smooth-scroll (hard project constraint) */
html{-webkit-text-size-adjust:100%; scroll-padding-top:80px}
body{
  margin:0; font-family:var(--f-body); background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; line-height:1.6;
  transition:background-color .7s var(--ease), color .7s var(--ease);
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
::selection{background:var(--crimson); color:#fff}
:focus-visible{outline:2px solid var(--seam-gold); outline-offset:3px; border-radius:2px}
.section--cream :focus-visible,.contact__pane--p :focus-visible{outline-color:var(--ink)}

.skip-link{position:fixed; left:-999px; top:0; z-index:2000; background:var(--crimson);
  color:#fff; padding:.7rem 1.1rem; border-radius:0 0 6px 0}
.skip-link:focus{left:0}

/* ---------- Preloader ---------- */
.preloader{position:fixed; inset:0; z-index:1000; background:#08080a;
  display:grid; place-items:center; color:var(--seam-gold);
  clip-path:inset(0 0 0 0);}
.preloader__brand{font-family:var(--f-script); font-size:clamp(4rem,16vw,11rem); line-height:.8;
  color:var(--seam-gold); opacity:.96; transform:translateY(.1em)}
.preloader__bar{position:absolute; left:0; bottom:0; height:2px; width:0%;
  background:linear-gradient(90deg,var(--crimson),var(--seam-gold))}
.preloader.is-done{pointer-events:none}

/* ---------- WebGL canvas (fixed stage behind everything) ---------- */
#gl{position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block}
body.no-webgl #gl{display:none}

/* ---------- Custom cursor (desktop pointer:fine only) ---------- */
.cursor{position:fixed; top:0; left:0; z-index:1500; pointer-events:none;
  mix-blend-mode:difference; opacity:0; transition:opacity .3s}
.cursor__ring{width:38px; height:38px; margin:-19px 0 0 -19px; border:1.5px solid #fff;
  border-radius:50%; display:grid; place-items:center;
  transition:width .3s var(--ease), height .3s var(--ease), background-color .3s}
.cursor__label{font-family:var(--f-body); font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; opacity:0; transition:opacity .25s; white-space:nowrap}
.cursor.is-hot .cursor__ring{width:74px; height:74px; margin:-37px 0 0 -37px; background:rgba(255,255,255,.06)}
.cursor.is-hot .cursor__label{opacity:1}
body.cursor-on{cursor:none}
@media (hover:none),(pointer:coarse){.cursor{display:none!important} body.cursor-on{cursor:auto}}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{position:relative; height:100svh; min-height:560px; width:100%;
  display:grid; place-items:center; overflow:hidden; z-index:1}
@supports not (height:100svh){.hero{height:calc(var(--vh)*100)}}

/* CSS fallback split (shown only when .no-webgl) */
.hero__fallback{position:absolute; inset:0; display:none; z-index:0}
body.no-webgl .hero__fallback{display:block}
.hero__half{position:absolute; top:0; height:100%; width:50%; overflow:hidden}
.hero__half img{width:100%; height:100%; object-fit:cover}
.hero__half--m{left:0; filter:grayscale(1) contrast(1.12) brightness(.82)}
.hero__half--m::after{content:""; position:absolute; inset:0; background:var(--crimson); mix-blend-mode:multiply; opacity:.34}
.hero__half--p{right:0}
.hero__half--p::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(243,233,220,.12),rgba(185,122,61,.28))}
.hero__seam-fallback{position:absolute; top:0; left:50%; transform:translateX(-50%); width:2px; height:100%;
  background:linear-gradient(180deg,var(--crimson),var(--seam-gold)); z-index:2; opacity:.9}

/* Overlay (text always DOM, never in shader) */
.hero__overlay{position:relative; z-index:3; width:100%; height:100%;
  display:grid; grid-template-rows:1fr auto auto 1fr; justify-items:center; align-content:center;
  padding:max(4vh,2rem) 1.2rem; text-align:center; pointer-events:none}
.hero__overlay a,.hero__overlay button{pointer-events:auto}

.wordmark{display:flex; align-items:center; justify-content:center; gap:.02em;
  font-family:var(--f-display); font-weight:900; letter-spacing:-.04em; line-height:.82;
  font-size:clamp(3.4rem,13vw,11rem); margin:0; align-self:end}
.wordmark__part{display:inline-block; will-change:transform; padding:0 .01em}
.wordmark__viper{color:#F5F3EF; text-shadow:0 2px 40px rgba(0,0,0,.55)}
.wordmark__line{color:#2A211A; text-shadow:0 2px 30px rgba(255,255,255,.35)}
@media (max-width:768px){
  .wordmark{flex-direction:column; gap:0; line-height:.84; font-size:clamp(4rem,19vw,8rem)}
}

.hero__sub{font-family:var(--f-serif); font-style:italic; font-weight:500;
  font-size:clamp(1.05rem,2.6vw,2rem); color:var(--seam-gold); margin:.9rem 0 0;
  letter-spacing:.01em; text-shadow:0 1px 3px rgba(0,0,0,.8), 0 2px 28px rgba(0,0,0,.6)}

.hero__ctas{display:flex; gap:clamp(.6rem,3vw,2.4rem); margin-top:clamp(1.4rem,4vh,2.6rem);
  flex-wrap:wrap; justify-content:center; align-self:start}
.hero__ctas .btn{min-width:190px}
@media (max-width:520px){.hero__ctas{width:100%; flex-direction:column} .hero__ctas .btn{width:100%}
  .btn{min-height:44px} /* thumb-friendly tap target */}

.scroll-cue{position:absolute; left:50%; bottom:max(2.2vh,1.1rem); transform:translateX(-50%);
  z-index:4; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-family:var(--f-body); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--seam-gold); opacity:.85}
.scroll-cue__arrow{width:1px; height:34px; background:linear-gradient(180deg,var(--seam-gold),transparent);
  position:relative; overflow:hidden}
.scroll-cue__arrow::after{content:""; position:absolute; left:-2.5px; top:0; width:6px; height:6px;
  border-right:1px solid var(--seam-gold); border-bottom:1px solid var(--seam-gold);
  transform:rotate(45deg); animation:cueDrop 1.8s var(--ease) infinite}
@keyframes cueDrop{0%{top:-8px;opacity:0}30%{opacity:1}100%{top:28px;opacity:0}}

/* Mobile seam handle (touch drag) */
.seam-handle{position:absolute; z-index:5; left:50%; top:50%; transform:translate(-50%,-50%);
  display:none; align-items:center; justify-content:center; gap:.4rem; min-height:44px; padding:.7rem 1.2rem; border-radius:999px;
  background:linear-gradient(90deg,var(--crimson),var(--caramel)); color:#fff;
  font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; box-shadow:0 6px 22px rgba(0,0,0,.4);
  pointer-events:auto; touch-action:none}
body.is-touch .hero:not(.no-handle) .seam-handle{display:flex}
body.no-webgl .seam-handle{display:none!important}

/* =========================================================================
   GENERIC: sections, numbers, reveals, buttons, tags
   ========================================================================= */
.section{position:relative; z-index:1; padding:clamp(4rem,11vh,9rem) clamp(1.2rem,6vw,6rem)}
.section--noir{background:var(--noir-bg); color:var(--noir-text)}
.section--cream{background:var(--cream-bg); color:var(--ink)}
.section--glass{background:transparent} /* reveals the canvas behind */
.wrap{max-width:1320px; margin:0 auto; width:100%}

.sec-num{position:absolute; font-family:var(--f-display); font-weight:900; line-height:1;
  font-size:clamp(5rem,20vw,16rem); letter-spacing:-.05em; opacity:.05; z-index:0;
  top:.1em; right:.06em; pointer-events:none; user-select:none}
.section--cream .sec-num{color:var(--caramel); opacity:.09}

.eyebrow{font-family:var(--f-body); font-size:.74rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent); display:inline-flex; align-items:center; gap:.7rem; margin:0 0 1.4rem}
.eyebrow::before{content:""; width:34px; height:1px; background:currentColor; opacity:.7}

h2,h3{font-family:var(--f-display); font-weight:800; letter-spacing:-.03em; line-height:.98; margin:0}
.h-display{font-size:clamp(2.2rem,6vw,5rem)}
.serif-statement{font-family:var(--f-serif); font-style:italic; font-weight:400; line-height:1.12;
  font-size:clamp(1.4rem,4vw,3.2rem); letter-spacing:.005em}
.lead{font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.65; max-width:60ch}
.body-copy{font-size:1.02rem; line-height:1.72; color:var(--muted); max-width:62ch}
.section--cream .body-copy{color:var(--cream-muted)}

/* Reveals — visible by default; JS adds .has-anim to enable hidden->reveal */
.reveal{opacity:1; transform:none}
.has-anim .reveal{opacity:0; transform:translateY(26px)}
.has-anim .reveal.is-in{opacity:1; transform:none; transition:opacity .9s var(--ease), transform .9s var(--ease)}
/* split-word reveals (spans created by JS on [data-split]) */
[data-split] .w{display:inline-block}
.has-anim [data-split] .w{opacity:0; transform:translateY(.6em); will-change:transform,opacity}
.has-anim [data-split].is-in .w{opacity:1; transform:none;
  transition:opacity .8s var(--ease), transform .8s var(--ease)}

/* Buttons */
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--f-body); font-weight:600; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  padding:1.05em 1.8em; border-radius:999px; overflow:hidden; isolation:isolate;
  border:1px solid transparent; will-change:transform; transition:color .4s var(--ease), border-color .4s}
.btn::before{content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  transform:scaleY(0); transform-origin:bottom; transition:transform .5s var(--ease)}
.btn:hover::before{transform:scaleY(1)}
/* crimson (noir world) */
.btn--crimson{background:var(--crimson); color:#fff}
.btn--crimson::before{background:var(--crimson-hot)}
/* ink (cream world) */
.btn--ink{background:var(--ink); color:var(--cream-surface)}
.btn--ink::before{background:var(--caramel)}
/* ghost variants for hero halves — translucent backdrop guarantees contrast over imagery */
.btn--ghost-light{border-color:rgba(245,243,239,.6); color:#F5F3EF;
  background:rgba(11,11,13,.32); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px)}
.btn--ghost-light::before{background:#F5F3EF}
.btn--ghost-light:hover{color:#0B0B0D}
.btn--ghost-dark{border-color:rgba(42,33,26,.6); color:#2A211A;
  background:rgba(251,245,236,.4); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px)}
.btn--ghost-dark::before{background:#2A211A}
.btn--ghost-dark:hover{color:var(--cream-surface)}

/* Tags */
.tags{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.6rem 0 0; list-style:none; padding:0}
.tag{font-family:var(--f-body); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.5em 1em; border-radius:999px; border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);
  color:var(--text)}

/* Counters / stats */
.stats{display:flex; flex-wrap:wrap; gap:clamp(1.4rem,5vw,4rem); margin:2.6rem 0 0}
.stat__num{font-family:var(--f-display); font-weight:900; letter-spacing:-.03em; line-height:1;
  font-size:clamp(2.4rem,7vw,5.4rem); color:var(--accent)}
.stat__label{font-family:var(--f-body); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin-top:.5rem}

/* =========================================================================
   MINI NAV (appears after hero)
   ========================================================================= */
/* NB: no backdrop-filter here — it would become the containing block for the
   position:fixed mobile menu and collapse it to the bar height. */
.nav{position:fixed; top:0; left:0; right:0; z-index:900; display:flex; align-items:center;
  justify-content:space-between; padding:1rem clamp(1.2rem,5vw,3rem);
  transform:translateY(-110%); transition:transform .5s var(--ease), background-color .5s, color .5s}
.nav.is-visible{transform:none}
.nav.is-open{transform:none} /* open menu must anchor to viewport, not the hidden nav */
.nav--noir{background:rgba(11,11,13,.9); color:var(--noir-text); border-bottom:1px solid rgba(245,243,239,.08)}
.nav--cream{background:rgba(243,233,220,.93); color:var(--ink); border-bottom:1px solid rgba(42,33,26,.1)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  /* re-enable blur only on wide screens where the menu isn't a fullscreen fixed child */
  @media (min-width:769px){
    .nav{backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
    .nav--noir{background:rgba(11,11,13,.62)}
    .nav--cream{background:rgba(243,233,220,.7)}
  }
}
.nav__brand{font-family:var(--f-display); font-weight:900; letter-spacing:-.02em; font-size:1.1rem}
.nav__links{display:flex; align-items:center; gap:1.6rem; font-family:var(--f-body);
  font-size:.78rem; letter-spacing:.12em; text-transform:uppercase}
.nav__links a{position:relative; padding:.2rem 0}
.nav__links a::after{content:""; position:absolute; left:0; bottom:-2px; height:1px; width:0;
  background:currentColor; transition:width .4s var(--ease)}
.nav__links a:hover::after{width:100%}
.nav__burger{display:none; flex-direction:column; gap:5px; padding:.4rem}
.nav__burger span{width:24px; height:2px; background:currentColor; transition:transform .3s, opacity .3s}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav__burger span:nth-child(2){opacity:0}
.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:768px){
  /* explicit viewport size: nav's backdrop-filter is a containing block, so inset:0 would shrink to the bar */
  .nav__links{position:fixed; top:0; left:0; width:100vw; height:100vh; height:100dvh;
    flex-direction:column; justify-content:center; gap:2rem;
    font-size:1.5rem; background:var(--noir-bg); color:var(--noir-text);
    transform:translateX(100%); transition:transform .5s var(--ease); padding:2rem}
  .nav.is-open .nav__links{transform:none}
  .nav__burger{display:flex; z-index:2}
}

/* =========================================================================
   MARQUEE (§01)
   ========================================================================= */
.marquee-sec{position:relative; z-index:1; background:var(--noir-bg); color:var(--noir-text); padding:clamp(3rem,8vh,6rem) 0;
  border-top:1px solid rgba(231,201,160,.14); border-bottom:1px solid rgba(231,201,160,.14)}
.marquee{display:flex; white-space:nowrap; overflow:hidden; width:100%; user-select:none}
.marquee__track{display:flex; flex:0 0 auto; will-change:transform}
.marquee__track span{font-family:var(--f-display); font-weight:900; text-transform:uppercase;
  letter-spacing:-.02em; font-size:clamp(2rem,7vw,5.6rem); padding:0 .35em; line-height:1.1}
.marquee--m span{color:transparent; -webkit-text-stroke:1px var(--crimson)}
.marquee--m span:nth-child(even){color:var(--crimson); -webkit-text-stroke:0}
.marquee--p{margin-top:.4rem}
.marquee--p span{color:transparent; -webkit-text-stroke:1px var(--caramel-soft)}
.marquee--p span:nth-child(even){color:var(--caramel-soft); -webkit-text-stroke:0}
.bridge{max-width:1100px; margin:clamp(2.6rem,7vh,5rem) auto 0; padding:0 clamp(1.2rem,6vw,4rem);
  text-align:center; color:var(--seam-gold)}
/* infinite marquee loops (CSS-driven, content duplicated 2x in JS) */
@keyframes mqL{to{transform:translateX(-50%)}}
@keyframes mqR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.marquee--m{animation:mqL 34s linear infinite}
.marquee--p{animation:mqR 40s linear infinite}
@media (max-width:768px){.marquee--m{animation-duration:22s}.marquee--p{animation-duration:26s}}
@media (prefers-reduced-motion:reduce){.marquee--m,.marquee--p{animation:none}}

/* =========================================================================
   EDITORIAL COPY GRID (§02 / §05)
   ========================================================================= */
.editorial{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1.5rem,4vw,3rem); align-items:start}
.editorial__lead{grid-column:1/8}
.editorial__aside{grid-column:9/13; align-self:end}
.editorial--mirror .editorial__lead{grid-column:6/13; order:2}
.editorial--mirror .editorial__aside{grid-column:1/5; order:1}
.editorial__sig{font-family:var(--f-script); font-size:clamp(2.6rem,7vw,5rem); color:var(--caramel);
  line-height:.7; margin:0 0 .4rem}
@media (max-width:900px){
  .editorial{grid-template-columns:1fr}
  .editorial__lead,.editorial__aside,
  .editorial--mirror .editorial__lead,.editorial--mirror .editorial__aside{grid-column:1/-1; order:initial}
}

/* =========================================================================
   GALLERY (§03 / §06)
   ========================================================================= */
.gallery{display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(.8rem,1.8vw,1.6rem);
  margin-top:clamp(2.4rem,6vh,4rem)}
.tile{position:relative; overflow:hidden; border-radius:4px; background:#222;
  aspect-ratio:var(--ar,.7); cursor:pointer}
.tile__img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  background-size:cover; background-position:center}
/* "develop" reveal state */
.has-anim .tile__img{filter:grayscale(.6) blur(8px); transform:scale(1.06); opacity:.5;
  transition:filter 1s var(--ease), transform 1.1s var(--ease), opacity .8s}
.has-anim .tile.is-in .tile__img{filter:none; transform:none; opacity:1}
.tile__cap{position:absolute; left:0; bottom:0; z-index:2; padding:.8rem 1rem;
  font-family:var(--f-body); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:#fff; opacity:0; transform:translateY(8px); transition:opacity .4s, transform .4s;
  text-shadow:0 1px 10px rgba(0,0,0,.6)}
.tile::after{content:""; position:absolute; inset:0; z-index:1; opacity:0; transition:opacity .4s;
  background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.55))}
.tile:hover::after{opacity:1}
.tile:hover .tile__cap{opacity:1; transform:none}
/* duotone-ish world tint, lifted on hover */
.gallery--m .tile__img{filter:grayscale(.25) contrast(1.05)}
.gallery--m .tile:hover .tile__img{filter:none}
.gallery--p .tile__img{filter:saturate(1.02)}

/* asymmetric spans (desktop) */
.gallery .tile:nth-child(1){grid-column:span 5}
.gallery .tile:nth-child(2){grid-column:span 4}
.gallery .tile:nth-child(3){grid-column:span 3}
.gallery .tile:nth-child(4){grid-column:span 4}
.gallery .tile:nth-child(5){grid-column:span 4; margin-top:-8%}
.gallery .tile:nth-child(6){grid-column:span 4}
.gallery .tile:nth-child(7){grid-column:span 5}
.gallery .tile:nth-child(8){grid-column:span 4}
.gallery .tile:nth-child(9){grid-column:span 3; margin-top:-12%}
.gallery .tile:nth-child(10){grid-column:span 5; margin-top:-6%}
@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2,1fr)}
  .gallery .tile{grid-column:span 1 !important; margin-top:0 !important}
  .tile__cap{opacity:1; transform:none}
}
/* 1-column only on very small phones; most phones keep the 2-col grid to avoid endless scroll */
@media (max-width:360px){
  .gallery{grid-template-columns:1fr}
}

/* =========================================================================
   HINGE (§04) + EINE CAROLINE (§07) — glass over canvas
   ========================================================================= */
.hinge{position:relative; z-index:1; min-height:92dvh; display:grid; place-items:center;
  text-align:center; padding:clamp(4rem,12vh,9rem) 1.2rem; overflow:hidden}
.hinge::before{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at 50% 50%,transparent,rgba(8,8,10,.55))}
.hinge__crossfade{position:absolute; inset:0; z-index:-2}
.hinge__crossfade img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.34}
.hinge__crossfade .is-p{opacity:0}
.hinge__line{font-family:var(--f-serif); font-style:italic; font-weight:300;
  font-size:clamp(2rem,7vw,6rem); line-height:1.04; color:#fff; max-width:18ch;
  text-shadow:0 4px 40px rgba(0,0,0,.6)}
.hinge__gold{position:absolute; left:0; top:50%; height:1px; width:100%;
  background:linear-gradient(90deg,transparent,var(--seam-gold),transparent); transform:scaleX(0); transform-origin:center}
.hinge__eyebrow{font-family:var(--f-body); letter-spacing:.3em; text-transform:uppercase; font-size:.74rem;
  color:var(--seam-gold); margin-bottom:1.4rem}

.unify{position:relative; z-index:1; padding:clamp(5rem,14vh,11rem) 1.2rem; text-align:center; overflow:hidden}
.unify::before{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 90% at 50% 50%,transparent,rgba(8,8,10,.4))}
.unify__title{font-family:var(--f-display); font-weight:900; letter-spacing:-.04em; line-height:.92;
  font-size:clamp(2.6rem,11vw,9rem); color:#fff}
.unify__title .c-m{color:var(--crimson-hot)}
.unify__title .c-p{color:var(--caramel-soft)}
.unify__sub{font-family:var(--f-serif); font-style:italic; font-size:clamp(1.2rem,3vw,2.2rem);
  color:var(--seam-gold); margin-top:1.4rem; max-width:30ch; margin-inline:auto}

/* =========================================================================
   CONTACT (§08)
   ========================================================================= */
.contact{position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; min-height:78dvh}
.contact__pane{padding:clamp(3rem,8vw,6rem) clamp(1.4rem,5vw,4.5rem); display:flex; flex-direction:column; justify-content:center}
.contact__pane--m{background:var(--noir-bg); color:var(--noir-text)}
.contact__pane--p{background:var(--cream-bg); color:var(--ink)}
.contact__mail{font-family:var(--f-display); font-weight:900; letter-spacing:-.03em;
  font-size:clamp(1.5rem,3.4vw,3rem); line-height:1.02; margin:1.2rem 0 1.8rem; display:inline-block; word-break:break-word}
.contact__pane--m .contact__mail{color:#fff}
.contact__meta{font-family:var(--f-body); font-size:.95rem; letter-spacing:.04em; line-height:2}
.contact__ig{display:inline-flex; align-items:center; gap:.5rem; margin-top:.4rem; font-weight:600}
@media (max-width:768px){.contact{grid-template-columns:1fr}}

/* =========================================================================
   FOOTER (§09)
   ========================================================================= */
.footer{position:relative; z-index:1; background:#08080a; color:var(--noir-text);
  padding:clamp(3rem,8vh,6rem) clamp(1.2rem,6vw,4rem) 2.4rem; overflow:hidden}
.footer__wave{position:absolute; inset:0; z-index:0; opacity:.5;
  background:linear-gradient(90deg,var(--crimson),var(--caramel)); transform:scaleX(0); transform-origin:left}
.footer__wm{position:relative; z-index:1; font-family:var(--f-display); font-weight:900; letter-spacing:-.04em;
  font-size:clamp(3rem,17vw,13rem); line-height:.85; text-align:center; color:var(--noir-text)}
.footer__row{position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:1.2rem 2.4rem;
  justify-content:center; align-items:center; margin-top:2.4rem;
  font-family:var(--f-body); font-size:.82rem; letter-spacing:.08em; color:var(--noir-muted)}
.footer__row a:hover{color:var(--seam-gold)}
.footer__soon{opacity:.55; cursor:default}
.footer__legal{margin-top:1.6rem; text-align:center; font-size:.72rem; color:#5a5650; letter-spacing:.1em}

/* =========================================================================
   LIGHTBOX
   ========================================================================= */
.lightbox{position:fixed; inset:0; z-index:1600; display:none; place-items:center;
  background:rgba(6,6,8,.94); padding:clamp(1rem,4vw,3rem)}
.lightbox.is-open{display:grid}
.lightbox__img{max-width:min(92vw,1100px); max-height:88svh; width:auto; height:auto;
  border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,.6); object-fit:contain}
.lightbox__btn{position:absolute; z-index:2; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2);
  color:#fff; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:1.4rem;
  transition:background-color .3s}
.lightbox__btn:hover{background:rgba(255,255,255,.16)}
.lightbox__close{top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem)}
.lightbox__prev{left:clamp(.6rem,2vw,2rem); top:50%; transform:translateY(-50%)}
.lightbox__next{right:clamp(.6rem,2vw,2rem); top:50%; transform:translateY(-50%)}
.lightbox__cap{position:absolute; bottom:clamp(1rem,3vw,2rem); left:50%; transform:translateX(-50%);
  color:#fff; font-family:var(--f-body); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; opacity:.8}

/* =========================================================================
   LEGAL PAGES (Impressum / Datenschutz)
   ========================================================================= */
.legal-page{background:var(--noir-bg); color:var(--noir-text); min-height:100svh; display:flex; flex-direction:column}
.legal-nav{position:sticky; top:0; z-index:10; display:flex; justify-content:space-between; align-items:center;
  gap:1rem; padding:1.1rem clamp(1.2rem,6vw,4rem); border-bottom:1px solid rgba(245,243,239,.1);
  background:rgba(11,11,13,.92)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .legal-nav{background:rgba(11,11,13,.7); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}}
.legal-brand{font-family:var(--f-display); font-weight:900; letter-spacing:-.03em; font-size:1.15rem; color:var(--noir-text)}
.legal-back{font-family:var(--f-body); font-size:.82rem; letter-spacing:.08em; color:var(--noir-muted)}
.legal-back:hover{color:var(--seam-gold)}
.legal{flex:1; width:100%; max-width:780px; margin:0 auto; padding:clamp(2.5rem,7vh,5rem) clamp(1.2rem,6vw,2rem) 4rem}
.legal h1{font-family:var(--f-display); font-weight:900; letter-spacing:-.03em; line-height:1; margin:0 0 .5rem;
  font-size:clamp(2.4rem,8vw,4.2rem)}
.legal__sub{font-family:var(--f-serif); font-style:italic; color:var(--seam-gold);
  font-size:clamp(1rem,2.5vw,1.3rem); margin:0 0 2.6rem}
.legal h2{font-family:var(--f-display); font-weight:800; letter-spacing:-.01em; color:#fff;
  font-size:clamp(1.1rem,2.6vw,1.45rem); margin:2.4rem 0 .7rem}
.legal p,.legal li{font-family:var(--f-body); font-size:1rem; line-height:1.75; color:var(--noir-muted); max-width:65ch}
.legal address{font-style:normal; line-height:1.7; margin:.3rem 0 0; color:var(--noir-text)}
.legal a[href]{color:var(--seam-gold); text-decoration:underline; text-underline-offset:3px}
.legal a[href]:hover{color:var(--crimson-hot)}
.legal strong{color:var(--noir-text); font-weight:600}
.legal ul{padding-left:1.2rem; margin:.5rem 0}
.legal li{margin:.25rem 0}
.legal hr{border:0; border-top:1px solid rgba(245,243,239,.1); margin:2.6rem 0}
.legal__note{font-size:.82rem; color:#6a655f; margin-top:2.6rem}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
  .scroll-cue__arrow::after{display:none}
  .has-anim .reveal,.has-anim .tile__img{opacity:1!important; transform:none!important; filter:none!important}
}