/* Alle Maße sind in Design-Pixeln der Referenz (1278 × 720) angegeben und skalieren über --u mit der Fensterbreite. */

/* Crimson Pro (SIL Open Font License), lokal eingebunden statt über Google Fonts */
@font-face {
  font-family: "Crimson Pro";
  src: url("assets/fonts/CrimsonPro-Variable.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("assets/fonts/CrimsonPro-Italic-Variable.ttf") format("truetype");
  font-weight: 200 900;
  font-style: italic;
  font-display: block;
}

:root {
  --u: calc(100vw / 1278);
  --accent: #0030e8; /* Referenzvideo: #e80002 */
  --paper: #f6f4f7;
  --serif: "Crimson Pro", "Minion Pro", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --serif-size: calc(var(--u) * 66.4);
  --serif-weight: 300;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; overflow: hidden; background: var(--paper); }

.stage { position: fixed; inset: 0; overflow: hidden; }

.page { position: absolute; inset: 0; overflow: hidden; }
.page--accent { background: var(--accent); color: #fff; }
.page--light { background: var(--paper); color: var(--accent); }
.page--accent.is-wiping { clip-path: url(#wipeClip); }
.page[hidden] { display: none; }

/* Rahmen: Header, Footer, Punkte */
.chrome-top, .chrome-bottom {
  position: absolute;
  font: calc(var(--u) * 11) / calc(var(--u) * 12.5) var(--sans);
  white-space: nowrap;
}
.chrome-top span, .chrome-bottom span { display: block; }
.chrome-top { left: calc(var(--u) * 609.5); top: calc(var(--u) * 14.5); }
.chrome-top span:nth-child(2) { padding-left: calc(var(--u) * 11.5); }
.chrome-bottom { right: calc(var(--u) * 625); bottom: calc(var(--u) * 14.5); text-align: right; } /* rechtsbündig bei x 653 */

.dot {
  position: absolute;
  bottom: calc(var(--u) * 21.5);
  width: calc(var(--u) * 9);
  height: calc(var(--u) * 9);
  border-radius: 50%;
  background: currentColor;
}
.dot--l { left: calc(var(--u) * 21.5); }
.dot--r { right: calc(var(--u) * 21.5); }

/* Hauptzeile mit Klammern: jedes Token wird absolut positioniert (engine.js) */
.row, .row-measure, .ltx {
  font-family: var(--serif);
  font-size: var(--serif-size);
  font-weight: var(--serif-weight);
  font-feature-settings: "onum", "kern";
  line-height: 1;
  white-space: pre;
}
.row { position: absolute; inset: 0; }
.tok { position: absolute; top: 0; left: 0; will-change: transform; }
/* Klammern sind im Original höher und feiner als die Schrift */
.tok--br { font-size: 1.1em; font-weight: 200; }
.tok--img {
  overflow: hidden;
  background: #fff;
  transform-origin: 50% 50%;
}
.tok--img img { display: block; width: 100%; height: 100%; object-fit: cover; }

.row-measure {
  position: absolute;
  left: 0;
  top: -9999px;
  display: flex;
  align-items: flex-start;
  visibility: hidden;
}

/* Seite 2 */
.block { position: absolute; background: var(--accent); }
.block[hidden] { display: none; }

.layer { position: absolute; inset: 0; pointer-events: none; }
.layer--inv { color: #fff; clip-path: url(#invClip); }
.ltx { position: absolute; top: 0; left: 0; }
.ltx[hidden] { display: none; }
.ltx.it { font-style: italic; letter-spacing: .05em; } /* Crimson Italic ist schmaler als die Kursive im Original */
.ltx.br { font-size: calc(var(--serif-size) * 1.1); font-weight: 200; }
.ltx.cloud { font-size: calc(var(--u) * 23.2); font-weight: 400; }

/* Szene 3: Collage-Stapel */
.collage { position: absolute; inset: 0; pointer-events: none; }
.collage img { position: absolute; display: block; object-fit: cover; }
.collage img[hidden] { display: none; }

/* Szene 4: Projekt-Header und Bildbox */
.proj-header[hidden], .proj-box[hidden] { display: none; }
.proj-header > * { position: absolute; white-space: pre; }
.proj-title, .proj-num {
  font: var(--serif-weight) calc(var(--u) * 21.4) / 1 var(--serif);
  font-feature-settings: "onum", "kern";
}
.proj-title .ghost, .proj-tags i { visibility: hidden; font-style: normal; }
.proj-num { overflow: hidden; }
.proj-num > span { display: inline-block; }
.proj-tags {
  display: flex;
  flex-wrap: wrap;
  font: calc(var(--u) * 13) var(--sans);
}
.proj-tags b { font-weight: inherit; }
.proj-box { position: absolute; overflow: hidden; }
.proj-box img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Akzent-Quadrat mit kreisrundem Ausschnitt (Maske kommt aus scene-roles.js) */
.circle-sq {
  position: absolute;
  background: var(--accent);
  -webkit-mask-image: var(--hole);
  mask-image: var(--hole);
}
.circle-sq[hidden] { display: none; }

.defs { position: absolute; }

.stage[hidden] { display: none; }

/* „skip“ oben rechts während des Intros, in der Schrift des Rahmens */
.skip {
  all: unset;
  position: fixed;
  z-index: 6;
  top: calc(var(--u) * 14.5);
  right: calc(var(--u) * 21.5);
  font: calc(var(--u) * 11) / calc(var(--u) * 12.5) var(--sans);
  color: var(--accent);
  cursor: pointer;
}
.skip.on-accent { color: #fff; }
.skip:hover { text-decoration: underline; }
.skip:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.skip[hidden] { display: none; }
@media (max-width: 760px) { .skip { top: 14px; right: 16px; font-size: 11px; line-height: 12.5px; } }

/* Raster-Übergang Intro → Startseite */
.grid-cover {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: var(--accent);
  clip-path: url(#coverClip);
  pointer-events: none;
}
.grid-cover[hidden] { display: none; }

/* Startseite – gleiches Raster wie der Projekt-Header im Intro (Titel endet bei x 436, Nummer bei 630, Tags ab 724) */
.start {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  background: var(--paper);
  color: var(--accent);
}
.start[hidden], .view[hidden] { display: none; }
.start .chrome-top, .start .chrome-bottom, .start .dot { position: fixed; }
.start a { color: inherit; text-decoration: none; }

/* Titel in Klammern (Startseite und Unterseiten) */
.start-hero, .page-title {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--u) * 256);
  font: var(--serif-weight) var(--serif-size) / 1 var(--serif);
  font-feature-settings: "onum", "kern";
}
.start-hero { top: calc(50% - var(--u) * 128); }
.page-title { top: calc(var(--u) * 52); }
.bt {
  all: unset;
  cursor: pointer;
  display: flex;
  align-items: center;
  white-space: pre;
}
.bt:focus-visible { outline: 1px solid currentColor; outline-offset: .2em; }
.sh-br { font-size: 1.1em; font-weight: 200; position: relative; top: -.05em; }
.sh-first { margin: 0 .2em 0 .23em; }
.sh-last { margin: 0 .23em 0 0; }
.sh-last[hidden] { display: none; }
.sh-img {
  display: none;
  width: calc(var(--u) * 192);
  height: calc(var(--u) * 256);
  margin: 0 .47em 0 .27em;
  overflow: hidden;
  background: #fff;
}
.sh-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.is-preview .sh-img { display: block; animation: sh-grow .28s cubic-bezier(.16, 1, .3, 1); }
@keyframes sh-grow { from { transform: scale(.9); } }

/* Menü: „1. Blog  2. Projects  3. Contact“ wie „1. designer / 2. art director“ */
.home-nav {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + var(--u) * 170);
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 56);
  font: var(--serif-weight) calc(var(--u) * 30) / 1 var(--serif);
  font-feature-settings: "onum", "kern";
}
.hn-item { display: flex; align-items: baseline; gap: calc(var(--u) * 14); }
.hn-label { padding: calc(var(--u) * 4) calc(var(--u) * 8); margin: 0 calc(var(--u) * -8); }
.hn-item:hover .hn-label, .hn-item:focus-visible .hn-label { background: var(--accent); color: #fff; }
.hn-item:focus-visible { outline: none; }

/* Unterseiten */
.page-body {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--u) * 340);
  padding-bottom: calc(var(--u) * 100);
}
.sp-list { margin: 0; padding: 0; list-style: none; }
.sp-row {
  display: grid;
  grid-template-columns: calc(var(--u) * 436) calc(var(--u) * 194) calc(var(--u) * 94) calc(var(--u) * 480);
  align-items: baseline;
  padding: calc(var(--u) * 6) 0;
}
.sp-title {
  justify-self: end;
  padding: 0 calc(var(--u) * 8);
  margin-right: calc(var(--u) * -8);
  font: var(--serif-weight) calc(var(--u) * 21.4) / 1.3 var(--serif);
}
.sp-no { grid-column: 3; font: var(--serif-weight) calc(var(--u) * 21.4) / 1 var(--serif); font-feature-settings: "onum"; white-space: nowrap; }
.sp-tags { display: flex; flex-wrap: wrap; column-gap: calc(var(--u) * 20); font: calc(var(--u) * 13) / 1.3 var(--sans); }
/* Hover: Titel bekommt das Highlight aus dem Intro */
.sp-row:hover .sp-title, .sp-row:focus-visible .sp-title { background: var(--accent); color: #fff; }
.sp-row:focus-visible { outline: none; }

/* Blog-Beitrag: Text in der Spalte ab x 436 */
.post { margin-left: calc(50% + var(--u) * (436 - 639)); width: calc(var(--u) * 560); }
.post-title { margin: 0 0 calc(var(--u) * 10); font: var(--serif-weight) calc(var(--u) * 44) / 1.1 var(--serif); }
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 20);
  margin: 0 0 calc(var(--u) * 34);
  font: calc(var(--u) * 13) / 1.3 var(--sans);
}
.post-p {
  margin: 0 0 1em;
  font: var(--serif-weight) calc(var(--u) * 21.4) / 1.45 var(--serif);
  font-feature-settings: "onum", "kern";
}

/* About: Text in der Beitragsspalte, darunter die Rollen */
.about { margin-bottom: calc(var(--u) * 50); }
.sp-row--static { cursor: default; }
.sp-row--static:hover .sp-title { background: none; color: inherit; }
.sp-title--it { font-style: italic; letter-spacing: .05em; }

/* Kontakt */
.contact { text-align: center; font: var(--serif-weight) calc(var(--u) * 44) / 1.2 var(--serif); }
.contact-mail:hover, .contact-links a:hover { background: var(--accent); color: #fff; }
.contact-links {
  display: flex;
  justify-content: center;
  gap: calc(var(--u) * 28);
  margin: calc(var(--u) * 30) 0 0;
  padding: 0;
  list-style: none;
  font: calc(var(--u) * 13) / 1.3 var(--sans);
}
.contact-soon { margin: 0; font-size: calc(var(--u) * 21.4); }

/* Schmale Bildschirme: nicht mehr mit der Breite skalieren, Inhalte stapeln */
@media (max-width: 760px) {
  .start { --u: .5px; --serif-size: 44px; }
  .start .chrome-top, .start .chrome-bottom { font-size: 11px; line-height: 12.5px; }
  .start .chrome-top { left: 50%; top: 14px; transform: translateX(-30px); }
  .start .chrome-bottom { right: 50%; bottom: 14px; transform: translateX(14px); }
  .start .dot { width: 9px; height: 9px; bottom: 20px; }
  .start .dot--l { left: 16px; }
  .start .dot--r { right: 16px; }
  .start-hero, .page-title { position: relative; top: auto; height: 200px; }
  .start-hero { margin-top: 20vh; }
  .page-title { margin-top: 48px; }
  .sh-img { width: 120px; height: 160px; }
  .home-nav { position: static; flex-direction: column; align-items: center; gap: 18px; margin-top: 30px; font-size: 26px; }
  .page-body { position: static; padding: 10px 16px 80px; }
  .sp-row { display: block; padding: 12px 0; border-top: 1px solid currentColor; }
  .sp-title { font-size: 22px; padding: 0; margin: 0; }
  .sp-no { display: inline-block; margin-left: 10px; font-size: 22px; }
  .sp-tags { margin-top: 6px; column-gap: 12px; font-size: 13px; }
  .post { margin: 0; width: auto; }
  .post-title { font-size: 32px; }
  .post-meta { font-size: 13px; gap: 12px; margin-bottom: 24px; }
  .post-p { font-size: 19px; }
  .about { margin-bottom: 30px; }
  .contact { font-size: 28px; }
  .contact-links { font-size: 13px; gap: 18px; }
  .contact-soon { font-size: 19px; }
}

/* Referenz-Overlay zum Abgleichen */
.ref {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  display: none;
}
.ref.is-diff { display: block; mix-blend-mode: difference; }
.ref.is-onion { display: block; opacity: .5; }

.hud {
  position: fixed;
  left: 8px;
  top: 8px;
  padding: 4px 6px;
  font: 11px/1.3 ui-monospace, Menlo, monospace;
  color: #fff;
  background: rgba(0, 0, 0, .7);
  white-space: pre;
  z-index: 10;
}