/* ════════════════════════════════════════════════════════
   felixvalentin.de — DARKROOM
   Konzept: die Dunkelkammer. Fast-Schwarz, Bilder als
   einzige Lichtquellen, Filmrand-Typografie, Kontaktbogen,
   ein Akzent: Safelight-Rot.
   ════════════════════════════════════════════════════════ */

/* ── Fonts (self-hosted) ─────────────────────────────────── */

@font-face {
  font-family: "Anton";
  src: url("../fonts/anton/Anton-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gerstner-Programm";
  src: url("../fonts/gerstner/Gerstner-ProgrammLight.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gerstner-Programm";
  src: url("../fonts/gerstner/Gerstner-ProgrammRegular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gerstner-Programm";
  src: url("../fonts/gerstner/Gerstner-ProgrammItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Gerstner-Programm";
  src: url("../fonts/gerstner/Gerstner-ProgrammMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("../fonts/geist-mono/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ──────────────────────────────────────────────── */

:root {
  --bg: #0d0d0b;       /* Dunkelkammer */
  --ink: #e9e7e0;      /* Knochenweiß */
  --muted: #77756e;
  --line: #26241f;
  --faint: #151411;
  --red: #e63322;      /* Safelight */

  --poster: "Anton", Impact, "Arial Narrow", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", monospace;
  --body-font: "Gerstner-Programm", system-ui, -apple-system, sans-serif;

  --pad-x: 1.25rem;
}

@media (min-width: 768px) {
  :root {
    --pad-x: 2rem;
  }
}

/* ── Base ────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  font-family: var(--body-font);
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Scrollbalken permanent + horizontales Clipping hier (nicht auf body,
     sonst zweiter Scrollbalken während Animationen). */
  overflow-y: scroll;
  overflow-x: hidden;
}

body {
  background: var(--bg);
  color: var(--ink);
  margin: 0;
  min-height: 100dvh;
}

h1, h2, h3, p, figure, figcaption, dl, dd, ul {
  margin: 0;
}
ul {
  padding: 0;
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--red);
  color: var(--bg);
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: #33312b;
}

/* ── Typografie ──────────────────────────────────────────── */

.t-poster {
  font-family: var(--poster);
  font-weight: 400;
  font-size: clamp(2.75rem, 9vw, 9rem);
  line-height: 0.94;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.t-poster > span {
  display: block;
}

.t-head {
  font-family: var(--poster);
  font-weight: 400;
  font-size: clamp(1.75rem, 4.5vw, 4rem);
  line-height: 1;
  text-transform: uppercase;
}

.t-lead {
  font-family: var(--body-font);
  font-weight: 300;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.35;
}

.t-mono {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

.t-mono-dim {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.t-body {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--ink);
}

.t-body-dim {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--muted);
}

.red {
  color: var(--red);
}

/* ── Filmstreifen (Schmuck-Trenner) ──────────────────────── */

.filmstrip {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.45rem var(--pad-x);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}
.filmstrip .red {
  color: var(--red);
}

/* ── Top-Bar ─────────────────────────────────────────────── */

.bar {
  position: sticky;
  top: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem var(--pad-x);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  /* Bleibt bei Seitenwechseln stehen (View Transitions) */
  view-transition-name: bar;
}

.bar__brand {
  font-weight: 500;
}
.bar__brand:hover {
  color: var(--red);
}

.bar__menu {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
@media (min-width: 768px) {
  .bar__menu {
    gap: 1.75rem;
  }
}
.bar__menu a {
  color: var(--muted);
  transition: color 0.2s;
}
.bar__menu a:hover {
  color: var(--ink);
}
.bar__menu a.is-active {
  color: var(--red);
}

/* ── Seitengerüst ────────────────────────────────────────── */

.page {
  min-height: calc(100dvh - 76px); /* minus Bar + Filmstreifen */
  display: flex;
  flex-direction: column;
}

.page__body {
  flex: 1;
  padding: 3.5rem var(--pad-x) 0;
}
@media (min-width: 768px) {
  .page__body {
    padding-top: 5rem;
  }
}

.meta-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.meta-row .is-right {
  text-align: right;
  white-space: nowrap;
}

.page-head {
  margin-bottom: 3.5rem;
}
@media (min-width: 768px) {
  .page-head {
    margin-bottom: 5rem;
  }
}

.hide-mobile {
  display: none;
}
@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
}

/* ── Startseite ──────────────────────────────────────────── */

.intro {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 5rem;
}
@media (min-width: 768px) {
  .intro {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 7rem;
  }
}
.intro p {
  max-width: 44ch;
}

.go-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s;
  white-space: nowrap;
}
.go-link:hover {
  color: var(--red);
}
.go-link .arrow {
  transition: transform 0.2s;
}
.go-link:hover .arrow {
  transform: translateX(4px);
}

/* ── Kontaktbogen (Frames) ───────────────────────────────── */

.sheet {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  padding-bottom: 5rem;
}
@media (min-width: 768px) {
  .sheet {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.frame {
  display: block;
  border: 1px solid var(--line);
  background: var(--faint);
  padding: 0.75rem;
  transition: border-color 0.2s;
}
.frame:hover {
  border-color: var(--red);
}

.frame__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.75rem;
}
.frame:hover .frame__top .frame__no {
  color: var(--red);
}

.frame__media {
  position: relative;
  aspect-ratio: 3 / 2;
  background: #111009;
  overflow: hidden;
}
.frame__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}
.frame__ph {
  position: absolute;
  left: 0.75rem;
  bottom: 0.6rem;
}

.frame__foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.85rem;
}
.frame__title {
  font-family: var(--poster);
  font-weight: 400;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  line-height: 1;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frame__title em {
  font-style: normal;
  color: var(--muted);
}

/* ── Projektseite ────────────────────────────────────────── */

.project-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-bottom: 3.5rem;
}
@media (min-width: 768px) {
  .project-meta {
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    margin-bottom: 5rem;
  }
}
.project-meta dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-content: start;
}
@media (min-width: 768px) {
  .project-meta dl {
    display: block;
  }
  .project-meta dl > div {
    margin-bottom: 1rem;
  }
}
.project-meta dt {
  margin-bottom: 0.3rem;
}
.project-meta .t-lead {
  max-width: 38ch;
}
@media (min-width: 768px) {
  .project-meta .t-lead {
    justify-self: end;
  }
}

/* ── Galerie ─────────────────────────────────────────────── */

.gallery {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding-bottom: 5rem;
}

.gallery__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}
@media (min-width: 768px) {
  .gallery__pair {
    gap: 1.5rem;
  }
}

.ph {
  position: relative;
  width: 100%;
}
.ph__media {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--faint);
  border: 1px solid var(--line);
}
.ph--landscape .ph__media { aspect-ratio: 3 / 2; }
.ph--portrait  .ph__media { aspect-ratio: 3 / 4; }
.ph--square    .ph__media { aspect-ratio: 1 / 1; }

.ph__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph__label {
  position: absolute;
  left: 0.85rem;
  bottom: 0.75rem;
}

.ph figcaption {
  margin-top: 0.5rem;
  text-align: right;
}

/* Einzelbild-Layouts (vom Import-Tool gesetzt) */
.sec--full   { width: 100%; }
.sec--center,
.sec--left,
.sec--right  { width: 100%; }
@media (min-width: 768px) {
  .sec--center { width: 66.666%; margin-inline: auto; }
  .sec--left   { width: 66.666%; }
  .sec--right  { width: 66.666%; margin-left: auto; }
}

/* „Entwickeln" beim Reinscrollen — natives Scroll-Driven Animation,
   Browser ohne Support zeigen die Bilder einfach direkt. */
@supports (animation-timeline: view()) {
  @media not (prefers-reduced-motion: reduce) {
    .gallery .ph {
      animation: develop both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }
  }
}
@keyframes develop {
  from {
    opacity: 0.15;
    filter: contrast(0.6) brightness(0.5);
  }
  to {
    opacity: 1;
    filter: contrast(1) brightness(1);
  }
}

/* ── „Nächstes Projekt" ──────────────────────────────────── */

.next-project {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: 1px solid var(--line);
  padding: 2rem 0 3.5rem;
}
.next-project .t-head {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.next-project .arrow {
  font-family: var(--mono);
  color: var(--muted);
  transition: transform 0.25s, color 0.25s;
}
.next-project:hover .arrow {
  transform: translateX(6px);
  color: var(--red);
}
.next-project:hover .t-head {
  color: var(--red);
}

/* ── About ───────────────────────────────────────────────── */

.about-section {
  border-top: 1px solid var(--line);
  padding: 2rem 0 0;
  margin-bottom: 5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 768px) {
  .about-section {
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    margin-bottom: 7rem;
  }
}
.about-section--single {
  display: block;
}
.about-section .stack {
  max-width: 56ch;
}
.about-section .stack > * + * {
  margin-top: 1.4rem;
}

.pull-quote {
  font-family: var(--poster);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 5rem);
  line-height: 1;
  text-transform: uppercase;
  max-width: 24ch;
}

.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .details-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.details-grid dt {
  margin-bottom: 0.5rem;
}
.details-grid a:hover {
  color: var(--red);
}

.published li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-block: 1rem;
}
.published li:first-child {
  border-top: 1px solid var(--line);
}

/* ── Footer ──────────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--line);
  padding: 2.5rem var(--pad-x) 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (min-width: 768px) {
  .footer {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.footer__cta {
  font-family: var(--poster);
  font-weight: 400;
  font-size: clamp(2.25rem, 6vw, 5.5rem);
  line-height: 0.95;
  text-transform: uppercase;
  max-width: 14ch;
  transition: color 0.2s;
}
a.footer__cta:hover .red {
  color: var(--ink);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
@media (min-width: 768px) {
  .footer__links {
    align-items: flex-end;
  }
}
.footer__links a {
  transition: color 0.2s;
}
.footer__links a:hover {
  color: var(--red);
}
.footer__copy {
  margin-top: 0.35rem;
}

/* ── Animationen ─────────────────────────────────────────── */

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-rise {
  animation: rise 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.d-1 { animation-delay: 0.06s; }
.d-2 { animation-delay: 0.14s; }
.d-3 { animation-delay: 0.22s; }

/* ── View Transitions ────────────────────────────────────── */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-out 0.22s ease both;
}
::view-transition-new(root) {
  animation: vt-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes vt-out {
  to {
    opacity: 0;
  }
}
@keyframes vt-in {
  from {
    opacity: 0;
  }
}

/* ── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .anim-rise {
    animation: none;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}