/* belschak.dev v4 — Sektion 06: Writing · Welle 2.5 Port
   Quelle des Ziel-Looks: claude-design-run/bundle-2026-07-14 (id="s06").
   Feature-Row zwischen zwei Hairlines (als Draw-Spans, statisch voll sichtbar),
   Titel-Link groß in Fraunces, "All writing" rechtsbündig.
   Initial-States für Entrances setzt NUR section.js. */

.wr {
  position: relative;
  z-index: 1; /* liegt über dem sticky Footer-Cover (Sektion 08) */
  /* --px kommt aus shared/tokens.css (Welle 2.5, Owner C); Fallback = Bundle-Wert */
  padding: clamp(110px, 15vh, 200px) var(--px, clamp(20px, 6vw, 110px));
  overflow: hidden;
  background: var(--paper);
  /* Sektion ist IMMER paper — nie --act-ink vom body erben (Akt-Übergangsphase:
     body noch night, 06 schon im Viewport -> Titel wäre bone-auf-paper) */
  color: var(--ink);
}

/* ---------- Rail + Kicker (Bundle-Chrome) ---------- */
.wr-rail {
  position: absolute;
  top: 50%;
  right: clamp(5px, 1vw, 20px);
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.wr-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.wr-kicker-num {
  /* Bundle: coral (3.14:1 bei 12px zu wenig) -> coral-deep, 4.67:1 auf paper */
  color: var(--coral-deep);
}

.wr-title {
  margin-top: clamp(20px, 3vh, 36px);
  font-family: var(--font-display);
  font-weight: 440;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(40px, 6vw, 100px);
  line-height: 1;
  letter-spacing: -0.03em;
}

.wr-em {
  font-style: italic;
  font-weight: 480;
  color: var(--coral); /* Display-Größe = Large Text, 3.14:1 >= 3:1 */
}

/* ---------- Feature-Row zwischen zwei Hairlines ---------- */
.wr-feature {
  position: relative;
  margin-top: clamp(44px, 7vh, 90px);
  padding: clamp(30px, 4.5vw, 60px) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px clamp(30px, 5vw, 90px);
  align-items: flex-start;
}

/* Die Hairlines als Draw-Spans (statisch voll da; section.js zeichnet sie
   bei aktiver Motion von der Mitte nach außen) */
.wr-rule {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ink);
  pointer-events: none;
}

.wr-rule-t { top: 0; }
.wr-rule-b { bottom: 0; }

.wr-date {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.wr-main {
  flex: 1 1 340px;
}

.wr-post-link {
  display: block;
  max-width: 22ch; /* ch rechnet mit der eigenen font-size — muss auf DEM Element mit der Display-Size sitzen, nicht auf dem h3 */
  text-decoration: none; /* Komponenten-Link: base.css unterstreicht a global (Welle 2.5) */
  font-family: var(--font-display);
  font-weight: 480;
  font-variation-settings: 'opsz' 60;
  font-size: clamp(26px, 3.4vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  transition: color 0.25s ease;
}

.wr-post-link:hover {
  color: var(--coral-deep); /* Large Text, 4.67:1 auf paper */
}

.wr-teaser {
  margin-top: clamp(16px, 2vh, 24px);
  max-width: 58ch;
  font-size: clamp(15.5px, 1.3vw, 18px);
  line-height: 1.6;
  color: var(--ink-soft);
}

.wr-readrow {
  margin-top: 20px;
}

/* ---------- Mono-Links (Read the post / All writing), Bundle-Underline ---------- */
.wr-mlink {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.wr-mlink:hover {
  color: var(--coral-deep);
  text-decoration-color: var(--coral-deep);
}

/* ---------- All writing: rechtsbündig ---------- */
.wr-all {
  margin-top: 20px;
  text-align: right;
}