/* landing5 — screen 2: two rhombs (#rules), frameless on mosaic */

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.55; }

.h2 {
  font-family: var(--font-display);
  font-weight: 480;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;
}

.lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--ink-2); max-width: var(--maxw-text); }

/* ---------- Section stack: eyebrow → title → lead → content ---------- */
.block-stack { display: flex; flex-direction: column; gap: clamp(2rem, 4.5vh, 3rem); width: 100%; }
.block-stack__head { max-width: var(--maxw-text); }
.block-stack__head--wide { max-width: 820px; }
.block-stack__head--center { max-width: 760px; margin-inline: auto; text-align: center; }
.block-stack__head--center .eyebrow { justify-content: center; }
.block-stack__head--center .eyebrow::before { display: none; }
.block-stack__head--center .lead { margin-inline: auto; }
.block-stack__head .lead { margin-top: 1.1rem; }
.block-stack__body { width: 100%; min-width: 0; }
.block-stack__body--bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ---------- Chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.6rem; }
.chips--center { justify-content: center; margin-top: 1.8rem; }
.chip {
  font: 500 0.82rem/1 var(--font-body);
  color: var(--ink-2);
  padding: 0.55rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.chip--dot { display: inline-flex; align-items: center; gap: 0.5rem; }
.chip--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* ---------- Two rhombs illustration (horizontal, width-aligned) ---------- */
.rhombs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.75rem, 5vw, 3.5rem);
  padding: clamp(0.5rem, 2vw, 1.5rem) 0;
  max-width: 820px;
  margin-inline: auto;
}
.rhomb {
  display: block;
  text-align: center;
  position: relative;
  width: clamp(190px, 22vw, 260px);
}
.rhomb--drift { cursor: default; touch-action: none; }
.rhomb__body {
  display: grid;
  place-items: center;
  gap: 0.9rem;
  will-change: transform;
}
.rhomb__face-thick {
  fill: rgba(221, 166, 180, 0.22);
  stroke: var(--accent);
  transition: fill 0.3s var(--ease), fill-opacity 0.3s var(--ease);
}
.rhomb__face-thin {
  fill: rgba(168, 199, 226, 0.2);
  stroke: var(--pale);
  transition: fill 0.3s var(--ease), fill-opacity 0.3s var(--ease);
}
.rhomb:hover .rhomb__face-thick,
.rhomb--drift:focus-within .rhomb__face-thick { fill: var(--accent); fill-opacity: 0.62; }
.rhomb:hover .rhomb__face-thin,
.rhomb--drift:focus-within .rhomb__face-thin { fill: var(--pale); fill-opacity: 0.56; }
.rhomb svg { width: clamp(150px, 20vw, 220px); height: auto; overflow: visible; }
.rhomb svg path { stroke-width: 1.6; }
.rhomb__name { font: 600 1rem/1 var(--font-display); color: var(--ink); }
.rhomb__angle { font: 500 0.74rem/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
@media (prefers-reduced-motion: reduce) {
  .rhomb__body { will-change: auto; }
}

@media (max-width: 560px) {
  .rhombs { flex-direction: column; gap: 2rem; }
}