/* ============================================================
   UNA SOL — V1.1  "Under One Sun"
   Richtung: Dune / Boho — Wüstenlicht, Staub, monumentale Ruhe
   Palette:
   --dusk  #191410  tiefes Schattenbraun (Grundfläche)
   --sand  #E0D0B4  Wüstensand (helle Sektionen)
   --bone  #F1E6D4  Text auf dunkel
   --ink   #241A12  Text auf Sand
   --sun   #D98E32  staubiges Amber (Akzent)
   ============================================================ */

@font-face { font-family:'Cabinet Grotesk'; src:url('../fonts/CabinetGrotesk-Extrabold.woff2') format('woff2'); font-weight:800; font-display:swap; }
@font-face { font-family:'Cabinet Grotesk'; src:url('../fonts/CabinetGrotesk-Extralight.woff2') format('woff2'); font-weight:200; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Satoshi'; src:url('../fonts/Satoshi-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }

:root {
  --dusk:#191410; --sand:#E0D0B4; --bone:#F1E6D4; --ink:#241A12; --sun:#D98E32;
  --display:'Cabinet Grotesk','Helvetica Neue',Arial,sans-serif;
  --body:'Satoshi','Helvetica Neue',Arial,sans-serif;
  --gutter:clamp(1.25rem,5vw,4rem);
  --measure:32rem;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--dusk); color:var(--bone);
  font-family:var(--body);
  font-size:clamp(1rem,.95rem + .3vw,1.125rem);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration-color:var(--sun);text-underline-offset:.2em}
a:hover,a:focus-visible{color:var(--sun)}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px}

/* Feiner Filmkorn-Schleier über allem — Dune-Staub */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:50;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--sun);color:var(--ink);padding:.6rem 1rem;z-index:100;font-weight:500}
.skip-link:focus{left:0}

/* ------------------------------------------------------------
   Hero — Clip-Playlist + Wortmarke
   ------------------------------------------------------------ */
.hero{position:sticky;top:0;z-index:0;height:100svh;min-height:34rem;overflow:hidden;display:flex;align-items:flex-end}
.hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s ease}
.hero__media.is-active{opacity:1}
/* Inhalt schiebt sich über den fixierten Hero */
main,.footer{position:relative;z-index:1}
main{background:var(--dusk)}
.hero::after{content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(25,20,16,.92) 0%,rgba(25,20,16,.22) 45%,rgba(25,20,16,.12) 100%)}
.hero__inner{position:relative;z-index:1;width:100%;padding:0 var(--gutter) clamp(2rem,6vh,4.5rem)}
.hero__wordmark{font-family:var(--display);font-weight:800;
  font-size:clamp(4.5rem,17vw,15rem);line-height:.82;letter-spacing:-.02em;text-transform:uppercase}
.hero__wordmark span{display:block;overflow:hidden}
.hero__wordmark span i{display:block;font-style:normal;transform:translateY(110%);
  animation:rise .9s cubic-bezier(.22,1,.36,1) forwards}
.hero__wordmark span:nth-child(2) i{animation-delay:.15s;color:var(--sun)}
.hero__claim{margin-top:1.25rem;color:var(--sand);
  font-family:var(--display);font-weight:200;
  font-size:clamp(1.3rem,1.1rem + 1vw,2rem);letter-spacing:.04em;
  opacity:0;animation:appear .8s ease .7s forwards}
@keyframes rise{to{transform:translateY(0)}}
@keyframes appear{to{opacity:1}}

/* ------------------------------------------------------------
   Statement — helle Sand-Sektion, monumentale dünne Type
   ------------------------------------------------------------ */
.statement{background:var(--sand);color:var(--ink);
  padding:clamp(5rem,16vh,10rem) var(--gutter)}
.statement h1{font-family:var(--display);font-weight:200;
  font-size:clamp(2rem,1.4rem + 3.2vw,4.2rem);line-height:1.12;max-width:20ch}
.statement p{margin-top:2.2rem;max-width:var(--measure);color:rgba(36,26,18,.72)}

/* ------------------------------------------------------------
   Interludes — Parallax-Panels mit Clips
   ------------------------------------------------------------ */
.interlude{position:relative;height:72svh;min-height:26rem;
  clip-path:inset(0);              /* clippt das fixe Video auf die Sektion -> Parallax-Fenster */
  display:flex;align-items:center;justify-content:center}
.interlude__media{position:fixed;inset:0;width:100%;height:100%;object-fit:cover}
.interlude::after{content:'';position:absolute;inset:0;background:rgba(25,20,16,.25)}
.interlude__line{position:relative;z-index:1;
  font-family:var(--display);font-weight:200;color:var(--bone);
  font-size:clamp(1.5rem,1.2rem + 1.6vw,2.6rem);letter-spacing:.06em;
  text-align:center;padding:0 var(--gutter)}

/* ------------------------------------------------------------
   Artists — Boho-Bogen-Portraits
   ------------------------------------------------------------ */
.artists{padding:clamp(5rem,14vh,9rem) var(--gutter);display:grid;gap:clamp(4.5rem,12vh,8rem)}
.artist{display:grid;gap:1.4rem;justify-items:start}
.artist__portrait{width:100%;aspect-ratio:4/5;object-fit:cover;
  border-radius:50% 50% 3px 3px / 30% 30% 3px 3px}   /* der Bogen */
.artist__name{font-family:var(--display);font-weight:800;
  font-size:clamp(2.4rem,1.8rem + 4vw,5rem);line-height:.95;
  text-transform:uppercase;letter-spacing:-.015em}
.artist__bio{color:var(--sand);max-width:var(--measure);
  font-family:var(--display);font-weight:200;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.5rem);line-height:1.4}
.artist__links{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font-weight:500}

@media (min-width:52rem){
  .artist{grid-template-columns:minmax(0,6fr) minmax(0,6fr);align-items:center;
    gap:0 clamp(2.5rem,6vw,5rem)}
  .artist__portrait{grid-row:1/span 3;max-width:30rem}
  .artist--alt .artist__portrait{grid-column:2;justify-self:end}
  .artist--alt .artist__name,.artist--alt .artist__bio,.artist--alt .artist__links{grid-column:1}
  .artist__bio{margin:1rem 0 1.4rem}
}
@media (max-width:51.99rem){ .artist__bio{margin:.3rem 0 .5rem} }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.footer{background:var(--sand);color:var(--ink);
  padding:clamp(4rem,10vh,6rem) var(--gutter) 2.5rem;display:grid;gap:2.2rem}
.footer h2{font-family:var(--display);font-weight:200;
  font-size:clamp(1.7rem,1.3rem + 1.8vw,2.8rem);line-height:1.12;max-width:22ch}
.footer a.footer__mail{font-weight:500}
.footer__legal{color:rgba(36,26,18,.65);font-size:.9rem;display:flex;flex-wrap:wrap;gap:.4rem 1.5rem}
.footer__legal a{color:inherit}

/* ------------------------------------------------------------
   Rechtsseiten
   ------------------------------------------------------------ */
.legal{padding:clamp(4rem,10vh,7rem) var(--gutter);max-width:46rem}
.legal h1{font-family:var(--display);font-weight:800;font-size:clamp(2.2rem,1.8rem + 2vw,3.4rem);text-transform:uppercase;line-height:1}
.legal h2{font-family:var(--display);font-weight:800;font-size:1.3rem;margin-top:2.5rem}
.legal p,.legal address{margin-top:1rem;color:var(--sand);font-style:normal}
.legal .backlink{display:inline-block;margin-bottom:2.5rem;color:var(--sand)}

/* ------------------------------------------------------------
   Reduzierte Bewegung
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__wordmark span i{animation:none;transform:none}
  .hero__claim{animation:none;opacity:1}
  .interlude__media{position:absolute}
  .hero{position:relative}
  .hero__media{transition:none}
  .hero__media.is-active{opacity:1}
}