:root{
  --ink: #2d3136;
  --muted: rgba(45,49,54,0.65);

  --col-max: 980px;
  --gutter: clamp(18px, 5vw, 64px);

  /* “almost one picture” feel */
  --gap: 14px;
}

*{ box-sizing: border-box; }

/* A subtle wood-like background made from gradients (no image needed) */
body{
  margin: 0;
  color: var(--ink);
  font-family: "Source Serif 4", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  background:
    /* soft vignetting */
    radial-gradient(1200px 800px at 50% 10%, rgba(255,255,255,0.45), rgba(255,255,255,0) 60%),
    /* grain */
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.030) 0px,
      rgba(0,0,0,0.030) 1px,
      rgba(0,0,0,0.000) 10px,
      rgba(0,0,0,0.000) 22px
    ),
    /* plank tone */
    linear-gradient(180deg, #d6b181 0%, #d0aa78 45%, #cda574 100%);
}

.wrap{
  width: min(var(--col-max), calc(100% - (2 * var(--gutter))));
  margin: 0 auto;
  padding: clamp(56px, 9vh, 110px) 0 clamp(60px, 10vh, 120px);
}

.masthead{
  text-align: center;
  margin-bottom: clamp(20px, 4vh, 36px);
}

.imprint{
  margin: 0;
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.06;
  letter-spacing: 0.01em;
}

.sep{
  color: rgba(45,49,54,0.45);
  font-weight: 400;
}

.years{
  margin-top: 10px;
  font-size: 15px;
  color: var(--muted);
}

/* Masonry-like gallery using CSS columns */
.gallery{
  column-count: 3;
  column-gap: var(--gap);
}

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

  /* “one picture” look: no frames, no shadows, no rounding */
  border-radius: 0;

  /* keep the collage tight */
  margin: 0 0 var(--gap) 0;

  /* prevent column breaks inside an item */
  break-inside: avoid;
}

/* Tiny signature */
.sig{
  display: inline-block;
  margin-top: clamp(34px, 6vh, 56px);
  font-size: 12px;
  color: rgba(45,49,54,0.55);
  text-decoration: none;
}

.sig{
  display: block;
  margin-top: clamp(36px, 7vh, 64px);
  font-family: "Source Serif 4", serif;
  font-size: 14px;
  text-align: center;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.02em;
}

.sig:hover{
  color: var(--ink);
}


/* Responsive: fewer columns on smaller screens */
@media (max-width: 980px){
  .gallery{ column-count: 2; }
}

@media (max-width: 560px){
  .gallery{ column-count: 1; }
  :root{ --gap: 12px; }
}