/* LOUIS REINECKE — minimal portfolio */

:root {
  --bg: #ffffff;
  --fg: #000000;
  --muted: #8a8a8a;
  --accent: #ff3b00;
  --rule: #000000;
  --pad: 16px;
  --nav-h: 56px;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  /* SF Pro: auf Apple-Geraeten liefert -apple-system genau diese Schrift aus.
     Apple lizenziert SF Pro nicht als Webfont, deshalb wird sie nicht geladen,
     sondern vom System bezogen; ausserhalb greift der Fallback. */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

img, video, iframe { display: block; max-width: 100%; }

/* ---------- Navigation ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  padding: 0 var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.nav a {
  font-weight: 500;
  font-size: 17px;
}

.nav__left { display: flex; gap: 20px; }

.nav a { transition: color 120ms linear; }
.nav a:hover { color: var(--accent); }

.nav__mark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.03em;
}

@media (max-width: 640px) {
  .nav a { transition: color 120ms linear; }
.nav a:hover { color: var(--accent); }

.nav__mark { position: static; transform: none; }
  .nav__left { gap: 14px; }
  .nav a, .nav a { transition: color 120ms linear; }
.nav a:hover { color: var(--accent); }

.nav__mark { font-size: 14px; }
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 40px var(--pad) 28px;
}

.hero__ring {
  width: clamp(150px, 22vw, 330px);
  aspect-ratio: 1;
  color: var(--accent);
}

.hero__ring svg { width: 100%; height: auto; }

/* Gleichmaessig und linear, damit die Drehung im Gegensatz zum stufigen
   Titel butterweich in der vollen Bildrate des Bildschirms laeuft. */
.ring__spin {
  transform-origin: 50% 50%;
  animation: ring-spin var(--umlauf, 4s) linear infinite;
  will-change: transform;
}

@keyframes ring-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .ring__spin { animation: none; }
}

@media (max-width: 760px) {
  /* Bleibt neben dem Titel stehen, nur deutlich kleiner. */
  .hero { gap: 14px; align-items: start; padding-top: 28px; }
  .hero__ring { width: clamp(64px, 21vw, 120px); margin-top: 6px; }
}

.hero h1 {
  margin: 0;
  font-weight: 300;
  font-size: clamp(44px, 11vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.hero p {
  max-width: 46ch;
  margin: 24px 0 0;
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.25;
}

/* ---------- Index / Projektliste ---------- */

.index { border-top: 1px solid var(--rule); }

.row {
  display: grid;
  grid-template-columns: 1fr 14ch 11ch 6ch;
  gap: 16px;
  align-items: baseline;
  padding: 14px var(--pad);
  border-bottom: 1px solid var(--rule);
  transition: background 120ms linear;
}

.row:hover { background: var(--accent); color: var(--bg); }

.row__title {
  font-weight: 800;
  font-size: clamp(22px, 4.2vw, 44px);
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.row__meta {
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

@media (max-width: 700px) {
  .row { grid-template-columns: 1fr auto; }
  .row__meta--client { display: none; }
  .row__meta--type { grid-column: 1; }
}

/* ---------- Thumbnail-Raster ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2px;
  padding: 2px;
}

.card { position: relative; display: block; background: #ededed; }

/* Fehlt ein Bild noch, bleibt die graue Flaeche der Karte stehen. */
.card__img:not([src]), .card__img[data-broken] { visibility: hidden; }

.card__img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: #ededed;
}

.card__label {
  padding: 8px 2px 16px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.card__label span { color: var(--muted); font-weight: 400; }

/* ---------- Projektseite ---------- */

.project { padding: 40px var(--pad) 0; }

.project h1 {
  margin: 0;
  font-weight: 300;
  font-size: clamp(40px, 9vw, 132px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-transform: uppercase;
}

.project__lede {
  max-width: 60ch;
  margin: 24px 0 0;
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 19px);
}

.specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin: 36px 0 40px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.specs dt {
  font-weight: 400;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.specs dd { margin: 5px 0 0; font-weight: 500; font-size: 15px; }

.media > * { margin-bottom: 2px; }

.media img { width: 100%; height: auto; }

.embed { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--pad);
  border-top: 1px solid var(--rule);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
}

.pager a { transition: color 120ms linear; }
.pager a:hover { color: var(--accent); }

/* ---------- Info ---------- */

.info { padding: 40px var(--pad) 0; max-width: 62ch; }
.info h1 { font-weight: 300; font-size: clamp(36px, 7vw, 92px); line-height: 0.95; letter-spacing: -0.04em; text-transform: uppercase; margin: 0 0 24px; }
.info p { font-weight: 400; font-size: clamp(15px, 1.6vw, 20px); margin: 0 0 18px; }
.info a { transition: color 120ms linear; }
.info a:hover { color: var(--accent); }

/* ---------- Footer ---------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 64px;
  padding: 18px var(--pad);
  border-top: 1px solid var(--rule);
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.foot a { transition: color 120ms linear; }
.foot a:hover { color: var(--accent); }
.foot .foot__spacer { margin-left: auto; }

.empty { padding: 40px var(--pad); font-weight: 700; }

/* ---------- Spielerei 1: Bildvorschau am Cursor ---------- */

.peek {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 220px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  opacity: 0;
  transition: opacity 140ms linear;
  pointer-events: none;
}

.peek.is-on { opacity: 1; }

/* Nur wo es einen echten Zeiger gibt — auf Touch waere es sinnlos. */
@media (hover: none), (pointer: coarse) {
  .peek { display: none; }
}

/* ---------- Titel: Buchstaben atmen in Gewicht und Groesse ---------- */

.ltr {
  display: inline-block;
  transform-origin: 50% 88%;
  /* Dauer, Verzoegerung und Stufung setzt das Skript je Buchstabe. */
  animation: breathe 4s steps(5, end) infinite;
  will-change: transform, font-weight;

  --w-min: 200;
  --w-max: 800;
  --s-min: 0.94;
  --s-max: 1.06;
}

@keyframes breathe {
  0%, 100% { font-weight: var(--w-min); transform: scale(var(--s-min)); }
  50%      { font-weight: var(--w-max); transform: scale(var(--s-max)); }
}

@media (prefers-reduced-motion: reduce) {
  .ltr { animation: none; font-weight: 700; transform: none; }
}

/* ---------- Feste Signatur auf Projektseiten ---------- */

.mark {
  position: fixed;
  right: var(--pad);
  bottom: 18px;
  z-index: 5;
  color: #ffffff;
  font-size: clamp(17px, 2.1vw, 30px);
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  text-align: right;
  white-space: nowrap;
  font-weight: 300;
  /* Liegt ueber den Bildern, darf aber keine Klicks abfangen. */
  pointer-events: none;
}

@media (max-width: 700px) {
  .mark { bottom: 12px; font-size: 15px; }
}