/* ── LEISTUNGEN ──────────────────────────────────────────
   Also the source of the shared .page-head / .page-lead / .items
   primitives used by wir.html, referenzen.html and kontakt.html.
   Shell (navbar, footer, heading gradient, pixel mark) and all
   tokens come from style.css.
   ─────────────────────────────────────────────────────── */

/* the pixel blocks frame the title: they sit at the left and right edges of
   their canvas, so the heading belongs in the gap between them. Sized by
   width only (not `cover`) so the section's variable height never crops
   the edge-anchored blocks - same 3.878:1-canvas logic as .pixel-blocks. */
.page-head {
  padding: clamp(34px, 5vw, 96px) var(--gutter) clamp(40px, 5vw, 92px);
  background-image: url('imgs/pixel-blocks-for-header.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
}

.page-head-inner {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  position: relative;
  text-align: center;
}

/* the heading lines and the mark are fit-content blocks: centre them too */
.page-head .intro-mark,
.page-head .intro-title span {
  margin-inline: auto;
}


.page-lead {
  margin-top: clamp(16px, 1.8vw, 30px);
  max-width: 44ch;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.55;
  color: var(--c-soft);
}

/* jump links to the four chapters: gives the #design/#druck/#social/
   #fotografie anchors a visible entry point and a shot at anchor sitelinks */
.chapter-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 10px;
  max-width: var(--maxw);
  margin: clamp(22px, 2.6vw, 38px) auto 0;
}

.chapter-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 10px 20px;
  border: 1.5px solid var(--c-rule);
  border-radius: 999px;
  font-family: 'DIN Condensed', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-body);
  text-decoration: none;
  background: rgba(255, 255, 255, 0.85);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.25s var(--ease-out-quint), box-shadow 0.25s var(--ease-out-quint);
}

.chapter-nav a:hover {
  border-color: var(--c-red);
  color: var(--c-red);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(226, 35, 79, 0.16);
}

.chapter-nav a:active { transform: translateY(0); }

/* ── CHAPTER ─────────────────────────────────────────── */
.chapter {
  padding: var(--section-y) var(--gutter);
}

.chapter-head,
.chapter > .chapter-band,
.chapter > .items {
  max-width: var(--maxw);
  margin-inline: auto;
}

.chapter-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(16px, 2.4vw, 44px);
  align-items: baseline;
}

.chapter-num {
  grid-row: 1 / 3;
  font-family: 'DIN Condensed', sans-serif;
  font-size: var(--fs-2xl);
  font-weight: 300;
  line-height: 1;
  color: var(--c-red);
  font-variant-numeric: tabular-nums;
}

.chapter-title {
  font-family: 'DIN Condensed', sans-serif;
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.chapter-claim {
  grid-column: 2;
  margin-top: clamp(10px, 1.2vw, 20px);
  font-family: 'Caveat', cursive;
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-berry);
}

.chapter-lead {
  grid-column: 2;
  margin-top: clamp(14px, 1.6vw, 26px);
  max-width: 74ch;
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--c-body);
  hyphens: auto;
  text-wrap: pretty;
}

.chapter-band {
  display: block;
  width: 100%;
  height: auto;
  margin-block: clamp(28px, 3.5vw, 64px) clamp(32px, 4vw, 72px);
  /* the band is a 3.88:1 strip; on a phone that is a 96px sliver, so
     crop it to a usable height instead of letting the ratio decide */
  object-fit: cover;
}

/* ── ITEMS ───────────────────────────────────────────────
   Not cards: each entry is a text block under a hairline, so the
   group reads as a spec sheet rather than a grid of boxes.

   Explicit column counts rather than auto-fit: auto-fit with a 310px
   floor produced five 340px columns on a 1920px screen, which is far
   too narrow a measure for these paragraphs. */
.items {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(28px, 4vw, 80px);
  row-gap: clamp(28px, 3.2vw, 56px);
}

@media (min-width: 700px) {
  .items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* the Fotografie chapter has only two entries: never split them three ways */
.items--pair {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .items--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .items--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.item {
  padding-top: clamp(14px, 1.4vw, 22px);
  border-top: 1px solid rgba(20, 9, 15, 0.18);
  min-width: 0;
}

/* icon + heading sit on one line: the icon reads as a spec-sheet glyph,
   not a badge, so it stays small and inline rather than stacked above */
.item-head {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9vw, 12px);
}

.item-icon {
  flex: 0 0 auto;
  width: clamp(20px, 1.6vw, 24px);
  height: clamp(20px, 1.6vw, 24px);
  color: var(--c-red);
}

.item h3 {
  font-family: 'DIN Condensed', sans-serif;
  font-size: var(--fs-md);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--c-ink);
}

.item p {
  margin-top: clamp(8px, 0.9vw, 14px);
  max-width: 62ch;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.7;
  color: var(--c-muted);
  /* long German compound words otherwise leave ragged gaps at this
     measure; hyphenation keeps the rag even without breaking flow */
  hyphens: auto;
  text-wrap: pretty;
}

.chapter--dark .item-icon { color: var(--c-orange); }

.chapter-cta {
  max-width: var(--maxw);
  margin: clamp(26px, 3vw, 48px) auto 0;
}

.chapter-cta a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: 'DIN Condensed', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-red);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  transition: color 0.2s ease;
}

.chapter-cta a::after {
  content: '\00a0\2192';
  display: inline-block;
  transition: transform 0.25s var(--ease-out-quint);
}

.chapter-cta a:hover { color: var(--c-plum); }
.chapter-cta a:hover::after { transform: translateX(4px); }

/* ── DARK CHAPTER (Social Media) ─────────────────────── */
.chapter--dark {
  background: var(--c-ink);
}

.chapter--dark .chapter-title { color: var(--c-paper-dim); }
.chapter--dark .chapter-num { color: var(--c-orange); }
.chapter--dark .chapter-claim { color: var(--c-orange); }
.chapter--dark .chapter-lead { color: rgba(253, 251, 252, 0.82); line-height: 1.75; }
.chapter--dark .item { border-top-color: rgba(253, 251, 252, 0.22); }
.chapter--dark .item h3 { color: var(--c-paper-dim); }
.chapter--dark .item p { color: rgba(253, 251, 252, 0.75); line-height: 1.75; }
.chapter--dark .chapter-cta a { color: var(--c-orange); }
.chapter--dark .chapter-cta a:hover { color: #fff; }

/* ── EVERYTHING IS POSSIBLE ──────────────────────────── */
.everything {
  padding: var(--section-y) var(--gutter);
  background: var(--grad-panel);
  color: #fff;
}

.everything > * {
  max-width: var(--maxw);
  margin-inline: auto;
}

.everything-title {
  font-family: 'DIN Condensed', sans-serif;
  font-size: var(--fs-4xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.everything-list {
  margin-top: clamp(24px, 3vw, 52px);
  list-style: none;
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.94);
}

.everything-list li {
  display: inline;
}

/* nbsp keeps the dot on the word, the trailing normal space is the only
   break opportunity in this list: without it the 92 entries render as one
   unbreakable line several thousand pixels wide. The space is a separate
   string because a hex escape swallows a following space as its terminator. */
.everything-list li::after {
  content: '\00a0\00b7' ' ';
  color: rgba(255, 255, 255, 0.55);
}

.everything-list .everything-more::after { content: none; }

.everything-cta {
  margin-top: clamp(24px, 3vw, 48px);
  max-width: 60ch;
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.6;
}

.everything-cta a {
  color: #fff;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: opacity 0.2s ease;
}

.everything-cta a:hover { opacity: 0.75; }

/* closing row: CTA text on the left, client-supplied bubble beside it */
.everything-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  margin-top: clamp(24px, 3vw, 48px);
}

.everything-foot .everything-cta {
  margin-top: 0;
  flex: 1 1 auto;
}

.everything-bubble {
  display: block;
  width: clamp(240px, 32vw, 460px);
  height: auto;
  flex: 0 0 auto;
}

@media (max-width: 820px) {
  .everything-foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .everything-bubble {
    width: min(460px, 100%);
    align-self: center;
  }
}

/* ── ≤ 700px ─────────────────────────────────────────── */
@media (max-width: 700px) {
  /* cover would scale the 3.88:1 band so far up that every block sits
     outside the viewport: show it as a strip above the title instead */
  .page-head {
    background-size: contain;
    background-position: center top;
    padding-top: calc(26vw + 22px);
  }

  .chapter-head {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }

  .chapter-num {
    grid-row: auto;
  }

  .chapter-claim,
  .chapter-lead {
    grid-column: 1;
  }

  /* the raw 3.88:1 strip is only ~90px tall on a phone and reads as a
     smear; a fixed height with object-fit keeps the subject legible */
  .chapter-band {
    height: clamp(150px, 42vw, 220px);
  }
}