/* kunarts.com — statischer Nachbau des Squarespace-Designs
   Alle Werte am Original gemessen (Computed Styles) */
:root {
  --bg: #fcfcfc;
  --text: #999999;
  --dark: #222222;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.8;
}

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

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Header — Titel-Oberkante bei 85px wie im Original */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 85px;
  padding-bottom: 44px;
}

.site-title {
  font-size: 33px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--dark);
  line-height: 1.2;
  white-space: nowrap;
}

.site-nav a {
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.1px;
  text-transform: uppercase;
  color: var(--text);
  margin-left: 24px;
}

.site-nav a:hover,
.site-nav a.active { color: var(--dark); }

/* Galerie-Grid (Startseite): 371px-Quadrate, 44px Abstand */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 44px;
}

.grid a { display: block; line-height: 0; }

.grid img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* Statement unter dem Grid: 15.6px / 21.84px, #999 */
.statement { padding: 44px 0 10px; }

.statement p {
  font-size: 15.6px;
  line-height: 21.84px;
  margin-bottom: 37px;
}

/* Werk-Detailseite */
.artwork { padding-bottom: 10px; }

.artwork img {
  width: 100%;
  height: auto;
  display: block;
}

/* Hochformat (Fire Hose Cabinet): im Original 588px von 1200px Inhaltsbreite */
.artwork--tall img { width: 49%; }

.artwork .caption {
  font-size: 12px;
  font-style: normal;
  color: var(--text);
  margin-top: 34px;
}
.artwork .caption em { font-style: normal; }

/* Kontakt: Bild 686 / Text 480 bei 34px Abstand (Original) */
.kontakt {
  display: grid;
  grid-template-columns: 686fr 480fr;
  gap: 34px;
  align-items: start;
}

.kontakt img { width: 100%; height: auto; display: block; }

.kontakt-info { font-size: 15.6px; line-height: 21.84px; }
.kontakt-info p { margin-bottom: 15px; }
.kontakt-info .gap { margin-bottom: 37px; }
.kontakt-info a:hover { color: var(--dark); }

.impressum-link {
  display: inline-block;
  margin-top: 56px;
  font-size: 14.4px;
  text-transform: uppercase;
}
.impressum-link:hover { color: var(--dark); }

/* Impressum / Datenschutz: 12px / 21.6px, Abstand 12px (Original) */
.prose { max-width: 1200px; }
.prose p { margin-bottom: 12px; }
.prose .sp1 { margin-bottom: 50px; }
.prose .sp2 { margin-bottom: 84px; }
.prose strong { font-weight: 700; }

/* Footer */
.site-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 70px;
  padding-bottom: 45px;
  font-size: 12px;
}

.site-footer .social { display: flex; gap: 0; }

.site-footer .social a {
  color: #000;
  display: inline-flex;
  align-items: center;
  transition: opacity .15s ease;
}

.site-footer .social a:hover { opacity: 0.6; }

.site-footer .social svg { width: 36px; height: 36px; fill: currentColor; }

/* Responsive */
@media (max-width: 880px) {
  .container { padding: 0 24px; }
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-top: 40px;
    padding-bottom: 32px;
  }
  .site-title { font-size: 26px; white-space: normal; }
  .site-nav a { margin-left: 0; margin-right: 22px; }
  .grid { grid-template-columns: 1fr; gap: 24px; }
  .kontakt { grid-template-columns: 1fr; gap: 32px; }
  .artwork--tall img { width: 100%; }
  .site-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-top: 45px;
  }
}