/* ═══════════════════════════════════════════════════════════
   Dylan Rasmus — Foto & Video
   Weiße Galerie: die Seite ist grauwertig, die Farbe kommt
   ausschließlich aus seinen Bildern.
   ═══════════════════════════════════════════════════════════ */

@font-face{
  font-family:'Archivo'; font-style:normal;
  font-weight:100 900; font-stretch:62% 125%;
  font-display:swap;
  src:url('../fonts/archivo-100-900-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}

:root{
  --paper:#FFFFFF;
  --ink:#0B0B0C;
  --ash:#5A5A60;
  --mute:#757579;
  --rule:#E4E4E6;
  --well:#F4F4F5;

  --sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'Plex Mono','SFMono-Regular',Menlo,monospace;

  --gut:clamp(20px,5vw,64px);       /* Seitenrand */
  --gap:clamp(16px,2.2vw,32px);     /* Rasterabstand */
  --sect:clamp(80px,11vw,168px);    /* Sektionsabstand */
  --bar:56px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-variation-settings:'wdth' 100;
  font-size:clamp(15px,1.02vw,17px); line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,video{display:block; max-width:100%; height:auto}
a{color:inherit}
h1,h2,p,dl,dd,figure,ul{margin:0}
ul{list-style:none; padding:0}

:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:2px}

.wrap{max-width:1360px; margin-inline:auto; padding-inline:var(--gut)}

.skip{
  position:absolute; left:-9999px; top:0; z-index:99;
  background:var(--ink); color:#fff; padding:12px 18px;
  font:500 13px/1 var(--mono); letter-spacing:.08em;
}
.skip:focus{left:8px; top:8px}

/* ── Mono-Label: die Vokabel für alles Beschriftende ────── */
.eyebrow,.head__label,.head__meta,.credit__role,.player__label,
.player__time,.player__sound,.book dt,.contact__list span,.foot__c,.foot__nav a{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ash);
}

/* ── Kopfleiste ─────────────────────────────────────────── */
.bar{
  position:sticky; top:0; z-index:40; height:var(--bar);
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-inline:var(--gut);
  background:rgba(255,255,255,.88); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule);
}
.bar__name{
  font-weight:700; font-size:13px; letter-spacing:.02em;
  font-variation-settings:'wdth' 112; text-decoration:none; white-space:nowrap;
}
.bar__nav{display:flex; gap:clamp(14px,2.4vw,30px)}
.bar__nav a{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ash); text-decoration:none; padding-block:6px;
  transition:color .18s ease;
}
.bar__nav a:hover{color:var(--ink)}

/* Auf schmalen Geräten passen Name und drei Anker sonst nicht nebeneinander. */
@media (max-width:420px){
  .bar__name{font-size:12px}
  .bar__nav{gap:11px}
  .bar__nav a{font-size:10px; letter-spacing:.06em}
}

/* ── Hero ───────────────────────────────────────────────── */
.hero{padding-top:clamp(56px,9vw,120px)}
.hero__claim{
  margin-top:18px;
  font-weight:800;
  font-size:clamp(34px,6.35vw,92px); line-height:.96;
  letter-spacing:-.025em;
}
/* Die Schlagzeile zieht sich beim Laden auf ihre Breite auf: die Schrift
   hat eine Breitenachse, und die zu bewegen ist das eine Kunststück, das
   nur sie kann. Zeile zwei folgt einen Wimpernschlag später. */
.hero__claim span{display:block; font-variation-settings:'wdth' 118,'wght' 800}
/* Ohne Skript steht die Zeile einfach da. Läuft eines, wartet sie auf die
   geladene Schrift — mit der Ersatzschrift gäbe es keine Breitenachse zu
   bewegen und der Auftritt liefe ins Leere. */
html:not(.no-js) .hero__claim span{opacity:0}
.schrift-da .hero__claim span{
  animation:aufziehen 1.05s cubic-bezier(.19,.86,.28,1) both;
}
.schrift-da .hero__claim span:nth-child(2){animation-delay:.13s}
/* Beide Achsen zugleich: die Zeile kommt schmal und leicht herein und
   wächst in ihre endgültige Breite und Schwere. */
@keyframes aufziehen{
  from{font-variation-settings:'wdth' 62,'wght' 220; opacity:0}
  35% {opacity:1}
  to  {font-variation-settings:'wdth' 118,'wght' 800; opacity:1}
}
/* Auf sehr schmalen Geräten passt „direkt umgesetzt." sonst nicht in eine
   Zeile und die Schlagzeile zerfällt in drei ungleiche Stücke. */
@media (max-width:360px){
  .hero__claim{font-size:27px}
}
.hero__sub{
  margin-top:clamp(20px,2.4vw,30px); max-width:46ch;
  font-size:clamp(16px,1.25vw,20px); color:var(--ash); line-height:1.55;
}

/* ── Der eine Film: als Monitor gerahmt, nicht als Tapete ── */
.player{width:100%; max-width:400px; margin:0}
.player__frame{
  position:relative; aspect-ratio:9/16; overflow:hidden;
  background:var(--well); border:1px solid var(--rule);
}
/* Der Film im Kopfbereich läuft quer über die volle Satzbreite — das
   Material ist hochkant und wird dafür auf 16:9 beschnitten. */
.player--hero{max-width:none; margin-top:clamp(44px,6vw,88px)}
.player--hero .player__frame{aspect-ratio:16/9}
.player__video{width:100%; height:100%; object-fit:cover}
.player__hit{
  position:absolute; inset:0; width:100%; height:100%;
  display:grid; place-items:center;
  border:0; padding:0; background:transparent; cursor:pointer;
}
.player__bar{display:block}
.player__zeile{
  display:flex; align-items:center; gap:clamp(10px,1.4vw,18px);
  padding-top:12px;
}
.player__label{color:var(--ink)}
.player__time{font-variant-numeric:tabular-nums; margin-right:auto}
.player__track{display:block; height:2px; background:var(--rule); position:relative}
.player__fill{
  position:absolute; inset:0 auto 0 0; width:0;
  background:var(--ink); transition:width .2s linear;
}
.player__sound{
  border:1px solid var(--rule); background:transparent; cursor:pointer;
  padding:7px 13px; color:var(--ash); white-space:nowrap;
  transition:border-color .18s ease,color .18s ease;
}
.player__sound:hover{border-color:var(--ink); color:var(--ink)}

/* ── Wortmarke: er hat kein Logo, also ist der Name eins ── */
.mark{
  max-width:1360px; margin-inline:auto;
  padding-inline:var(--gut); overflow:hidden;
  container-type:inline-size;
}
/* Steht der Name innerhalb eines Satzspiegels, bringt der schon Rand und
   Breite mit — eigenes Padding würde sich verdoppeln und den Namen
   schmaler setzen als alles andere im Abschnitt. */
.wrap .mark{
  max-width:none; margin-inline:0; padding-inline:0;
  margin-bottom:clamp(46px,6vw,88px);
}
/* Der Name wischt auf, sobald er ins Bild kommt — an dieser Stelle der Seite
   wäre eine Animation beim Laden längst vorbei, bevor jemand hinsieht.
   Die beiden Regeln überschreiben das übliche Einblenden per Deckkraft. */
.mark.reveal{opacity:1; transform:none; clip-path:inset(0 100% 0 0)}
.mark.reveal.is-in{
  clip-path:inset(0 0 0 0);
  transition:clip-path .95s cubic-bezier(.22,.8,.28,1);
}
/* Ohne Skript bleibt nichts verdeckt. */
.no-js .mark.reveal{clip-path:none}
/* Die Größe ergibt sich aus der Containerbreite geteilt durch die
   gemessenen Laufweite von "Dylan Rasmus" (10,27 em bei wdth 125 /
   wght 800 / -0,022em). So sitzt der Name in jeder Breite bündig in
   den Seitenrändern — ohne Skript, ohne Sprung beim Laden. */
.mark__last{
  display:block; font-weight:800; font-variation-settings:'wdth' 125;
  font-size:8.6vw; line-height:.8;
  letter-spacing:-.022em; text-transform:uppercase; white-space:nowrap;
}
@supports (font-size:1cqi){
  .mark__last{font-size:calc(100cqi / 10.29)}
}

/* ── Sektionen ──────────────────────────────────────────── */
.section{padding-block:var(--sect)}
.section--contact{padding-bottom:clamp(64px,8vw,120px)}
/* Über den Bildern der Arbeiten steht schon ein voller Abschnittsabstand.
   Käme hier ein zweiter dazu, klafft vor der Linie ein Loch — deshalb rückt
   dieser Abschnitt näher heran. Die Luft, die er braucht, bekommt statt des
   Randes der Name darunter. */
.section--person{padding-top:clamp(26px,3.4vw,58px)}
.section--person .head{margin-bottom:clamp(34px,4.6vw,68px)}

.head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; padding-bottom:14px; border-bottom:1px solid var(--ink);
  margin-bottom:clamp(26px,3.4vw,46px);
}
.head--gap{margin-top:clamp(64px,8vw,130px)}
/* Nebeneinander brechen Label und Zusatz auf dem Handy beide um und
   sehen gedrängt aus — gestapelt bleibt die Zeile ruhig. */
@media (max-width:560px){
  .head{display:block; padding-bottom:11px}
  .head__meta{margin-top:5px}
}
.head__label{color:var(--ink)}
.head__meta{color:var(--mute)}

/* ── Bewegtbild: drei hochkante Filme nebeneinander ──────── */
.filme{display:grid; gap:clamp(12px,1.6vw,22px); grid-template-columns:repeat(2,1fr)}
@media (min-width:760px){.filme{grid-template-columns:repeat(3,1fr)}}
.filme .player{max-width:none; justify-self:stretch}
/* Im Raster ist kein Platz für Laufzeit und Beschriftung nebeneinander —
   dort bleiben Fortschritt und Tonschalter. */
.player--raster .player__time{display:none}
.player--raster .player__zeile{gap:10px}
.player--raster .player__sound{padding:6px 10px; font-size:10.5px; letter-spacing:.08em}
.player--raster .player__label{font-size:10.5px; letter-spacing:.08em}

/* ── Galerie: Quer- und Hochformate in getrennten Reihen, damit
      kein Bild für ein gemeinsames Raster beschnitten werden muss ── */
.galerie{display:grid; gap:clamp(12px,1.6vw,22px)}
.galerie__quer,.galerie__hoch{display:grid; gap:clamp(12px,1.6vw,22px)}
.galerie__quer{grid-template-columns:1fr}
.galerie__hoch{grid-template-columns:repeat(2,1fr)}
@media (min-width:700px){
  .galerie__quer{grid-template-columns:repeat(2,1fr)}
  .galerie__hoch{grid-template-columns:repeat(4,1fr)}
}
.galerie figure{overflow:hidden; background:var(--well); border:1px solid var(--rule)}
.galerie__quer figure{aspect-ratio:3/2}
.galerie__hoch figure{aspect-ratio:2/3}
.galerie img{width:100%; height:100%; object-fit:cover; display:block}

/* ── Arbeiten: eine Serie wird als Serie gezeigt, nicht als lose Kacheln ── */
.serie__gross{overflow:hidden; background:var(--well); border:1px solid var(--rule)}
.serie__gross img{width:100%; height:auto; display:block}

.serie__reihe{
  display:grid; gap:clamp(10px,1.4vw,20px);
  grid-template-columns:repeat(3,1fr);
  margin-top:clamp(10px,1.4vw,20px);
}
.serie__hoch{overflow:hidden; background:var(--well); border:1px solid var(--rule); aspect-ratio:9/16}
/* Die Aufnahmen aus dem zweiten Block sind 2:3 gedreht, nicht 9:16 —
   ein gemeinsames Format wuerde sie zu stark beschneiden. */
.serie__reihe--zweidrittel .serie__hoch{aspect-ratio:2/3}
.serie__hoch img{width:100%; height:100%; object-fit:cover; display:block}

/* Credit-Block: die Vokabel aus seiner Welt — wer, was, wann, welche Rolle */
.credit{display:block; padding-top:16px}
.credit__artist{
  display:block; font-weight:700; font-variation-settings:'wdth' 110;
  font-size:clamp(17px,1.5vw,23px); letter-spacing:-.012em; line-height:1.2;
}
.credit__track{display:block; color:var(--ash); font-size:.95em; margin-top:1px}
.credit__role{display:block; margin-top:9px; color:var(--mute)}

/* ── Über mich ──────────────────────────────────────────── */
.about{display:grid; gap:clamp(28px,4vw,64px); grid-template-columns:1fr}
@media (min-width:860px){.about{grid-template-columns:minmax(260px,34%) 1fr; align-items:start}}
.about__portrait{background:var(--well); border:1px solid var(--rule); aspect-ratio:2/3; overflow:hidden}
.about__portrait img{width:100%; height:100%; object-fit:cover}
.about__text{max-width:62ch}
.about__text p + p{margin-top:1.1em}
.lead{
  font-size:clamp(19px,1.75vw,27px); line-height:1.38;
  font-weight:500; font-variation-settings:'wdth' 106; letter-spacing:-.012em;
}

.book{margin-top:clamp(30px,3.4vw,50px); border-top:1px solid var(--rule)}
.book__row{
  display:grid; gap:4px 26px; grid-template-columns:1fr;
  padding-block:16px; border-bottom:1px solid var(--rule);
}
@media (min-width:600px){.book__row{grid-template-columns:130px 1fr; gap:0 26px}}
.book dt{padding-top:3px; color:var(--ink)}
.book dd{margin:0; color:var(--ash)}

/* ── Kontakt ────────────────────────────────────────────── */
.contact__intro{max-width:50ch; font-size:clamp(17px,1.4vw,21px); color:var(--ash)}
.contact__mail{
  display:block; margin-top:clamp(26px,3.4vw,46px);
  font-weight:800; font-variation-settings:'wdth' 116;
  font-size:clamp(22px,5.6vw,74px); line-height:1.04;
  letter-spacing:-.028em; text-decoration:none;
  word-break:break-word;
}
.contact__mail:hover{text-decoration:underline; text-underline-offset:.1em; text-decoration-thickness:.045em}

.contact__list{margin-top:clamp(36px,4.6vw,70px); border-top:1px solid var(--rule)}
.contact__list li{
  display:flex; flex-wrap:wrap; gap:6px 24px; align-items:baseline;
  padding-block:15px; border-bottom:1px solid var(--rule); color:var(--ash);
}
.contact__list span{min-width:110px; color:var(--ink)}
.contact__list a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--rule)}
.contact__list a:hover{border-color:var(--ink)}

/* ── Fuß ────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--rule); padding-block:26px}
.foot__in{display:flex; flex-wrap:wrap; gap:10px 28px; justify-content:space-between}
.foot__nav{display:flex; gap:24px}
.foot__nav a{text-decoration:none; transition:color .18s ease}
.foot__nav a:hover{color:var(--ink)}

/* ── Einblendung beim Scrollen ──────────────────────────── */
.reveal{opacity:0; transform:translateY(10px)}
.is-in{opacity:1; transform:none; transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.28,1)}
.no-js .reveal{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mark,
  .mark.reveal,
  .mark.reveal.is-in{clip-path:none; animation:none; transition:none}
  .hero__claim span,
  html:not(.no-js) .hero__claim span{animation:none; opacity:1}
  .reveal{opacity:1; transform:none}
  .is-in{transition:none}
}

/* ── Rechtliches: schlichte Fließtextseiten ─────────────── */
.legal{padding-block:clamp(48px,7vw,104px) var(--sect); max-width:74ch}
.legal__title{
  font-weight:800; font-variation-settings:'wdth' 116;
  font-size:clamp(30px,4.6vw,60px); line-height:1.02; letter-spacing:-.025em;
  margin-bottom:clamp(26px,3vw,44px);
}
.legal h2{
  font-weight:700; font-variation-settings:'wdth' 108;
  font-size:clamp(17px,1.5vw,22px); letter-spacing:-.01em;
  margin-top:2.4em; margin-bottom:.5em;
}
.legal p,.legal li{color:var(--ash)}
.legal p + p{margin-top:.9em}
.legal ul{margin-top:.6em; padding-left:1.1em; list-style:disc}
.legal li{margin-bottom:.3em}
.legal address{font-style:normal; color:var(--ink); line-height:1.75}
.legal a{color:var(--ink)}
.legal .todo{
  display:inline-block; background:var(--well); border:1px solid var(--rule);
  padding:1px 7px; font:500 12px/1.7 var(--mono); letter-spacing:.06em; color:var(--ink);
}
.back{
  display:inline-block; margin-top:clamp(36px,4vw,60px);
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ash); text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:3px;
}
.back:hover{color:var(--ink); border-color:var(--ink)}