@import "_reset.css";
/* —— Base —— */
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-size:16px; line-height:1.5; color:#fff; background:#000;
}
a,button{ color:inherit; text-decoration:none; font:inherit; }

/* =========================
   The Faces of Helvetica
   ========================= */
/* ===== Inhalt unter dem Hero ===== */
.project-content[data-project="thefacesofhelvetica"] {
  --container: min(1920px, 100vw);
  margin: 50px auto;
  width: var(--container);
  padding: 20px 0;
  color: #fff;
}

/* Info-Grid */
.project-content[data-project="thefacesofhelvetica"] .info-grid {
  --gutter: 24px;
  display: grid;
  grid-template-columns:
    [gutter] var(--gutter)
    [c1] 1fr [c2] 1fr [c3] 1fr [c4] 1fr [c5] 1fr [c6] 1fr [c7-end];
  gap: 24px;
  margin-bottom: 64px;
  font-size: 16px;
  padding-right: calc(2vw + env(safe-area-inset-right, 0px));
}
.project-content[data-project="thefacesofhelvetica"] .info-label {
  color: #ddd;
  font-weight: 600;
  margin-bottom: 8px;
}
.project-content[data-project="thefacesofhelvetica"] .info-value {
  color: #fff;
}
.project-content[data-project="thefacesofhelvetica"] .info--title   { grid-column: c1; }
.project-content[data-project="thefacesofhelvetica"] .info--category{ grid-column: c2; }
.project-content[data-project="thefacesofhelvetica"] .info--date,
.project-content[data-project="thefacesofhelvetica"] .info--dim     { grid-column: c3; }
.project-content[data-project="thefacesofhelvetica"] .info--desc    { grid-column: c5 / c7; }

.project-content[data-project="thefacesofhelvetica"] .info--desc .info-value {
  text-align: left;
  hyphens: auto;
  overflow-wrap: anywhere;
}

/* ===== Galerie: Bilder untereinander, mit Rotation ===== */
.project-content[data-project="thefacesofhelvetica"] .gallery-sticky,
.project-content[data-project="thefacesofhelvetica"] .sticky-canvas {
  position: static !important;
  height: auto !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

.project-content[data-project="thefacesofhelvetica"] .piece {
   position: relative;
  display: block;
  width: min(90vw, 860px);height: auto;
  max-width: 100%;
  margin: -3vh auto;
  transform: rotate(var(--rot));
  opacity: 1;
  --rot: 0deg;
}

/* ===== Rotationen (Helv1–Helv15) ===== */
.project-content[data-project="thefacesofhelvetica"] .helv1  { --rot: -10deg; margin-top: 15vh;}
.project-content[data-project="thefacesofhelvetica"] .helv2  { --rot: 10deg; }
.project-content[data-project="thefacesofhelvetica"] .helv3  { --rot: 0deg; }
.project-content[data-project="thefacesofhelvetica"] .helv4  { --rot: -7deg; }
.project-content[data-project="thefacesofhelvetica"] .helv5  { --rot: 8deg; margin-bottom: 10vh}

.project-content[data-project="thefacesofhelvetica"] .helv6  { --rot: -5deg; margin-top: 15vh;}
.project-content[data-project="thefacesofhelvetica"] .helv7  { --rot: 6deg; }
.project-content[data-project="thefacesofhelvetica"] .helv8  { --rot: -5deg; }
.project-content[data-project="thefacesofhelvetica"] .helv9  { --rot: 5deg; }
.project-content[data-project="thefacesofhelvetica"] .helv10 { --rot: -7deg; margin-bottom: 10vh}

.project-content[data-project="thefacesofhelvetica"] .helv11 { --rot: -6deg; margin-top: 15vh;}
.project-content[data-project="thefacesofhelvetica"] .helv12 { --rot: 5deg; }
.project-content[data-project="thefacesofhelvetica"] .helv13 { --rot: -4deg; }
.project-content[data-project="thefacesofhelvetica"] .helv14 { --rot: 4deg; }
.project-content[data-project="thefacesofhelvetica"] .helv15 { --rot: -5deg; margin-bottom: 10vh}

.project-content[data-project="thefacesofhelvetica"] .piece.helv6,
.project-content[data-project="thefacesofhelvetica"] .piece.helv7,
.project-content[data-project="thefacesofhelvetica"] .piece.helv8,
.project-content[data-project="thefacesofhelvetica"] .piece.helv9,
.project-content[data-project="thefacesofhelvetica"] .piece.helv10,
.project-content[data-project="thefacesofhelvetica"] .piece.helv11,
.project-content[data-project="thefacesofhelvetica"] .piece.helv12,
.project-content[data-project="thefacesofhelvetica"] .piece.helv13,
.project-content[data-project="thefacesofhelvetica"] .piece.helv14,
.project-content[data-project="thefacesofhelvetica"] .piece.helv15{
  width: min(96vw, 1000px);
}


/* ===== Responsive Layouts ===== */
@media (max-width: 980px) {
  .project-content[data-project="thefacesofhelvetica"] .info-grid {
    grid-template-columns:
      [gutter] var(--gutter)
      [c1] 1fr [c2] 1fr [c3] 1fr [c4] 1fr [c5] 1fr [c6] 1fr [c7-end];
    padding-right: calc(6vw + env(safe-area-inset-right, 0px));
  }
  .project-content[data-project="thefacesofhelvetica"] .info--title   { grid-column: c1; }
  .project-content[data-project="thefacesofhelvetica"] .info--category{ grid-column: c2; }
  .project-content[data-project="thefacesofhelvetica"] .info--dim     { grid-column: c3; }
  .project-content[data-project="thefacesofhelvetica"] .info--desc    { grid-column: c5 / c7; }

  .project-content[data-project="thefacesofhelvetica"] .piece {
    width: min(86vw, 720px) !important;
    margin: 10vh auto !important;
  }
}

@media (max-width: 1080px) {
  .project-content[data-project="thefacesofhelvetica"] .info-grid {
    grid-template-columns: [gutter] var(--gutter) [c1] 1fr;
    padding-right: calc(8vw + env(safe-area-inset-right, 0px));
  }
  .project-content[data-project="thefacesofhelvetica"] .info--title,
  .project-content[data-project="thefacesofhelvetica"] .info--category,
  .project-content[data-project="thefacesofhelvetica"] .info--date,
  .project-content[data-project="thefacesofhelvetica"] .info--dim,
  .project-content[data-project="thefacesofhelvetica"] .info--desc {
    grid-column: c1;
  }
}

/* === Sicherheit: Horizontales Scrollen verhindern === */
#projectView { overflow-x: hidden; }