/* ============================================
   WHAT I ACTUALLY DO — Act 1.5: Japan 🇯🇵
   Full-width editorial · Single column · Three acts
   Header label + extending rule · Typographic hierarchy
   ============================================ */

/* ── Section shell ── */
.whatido {
  background: var(--japan-bg);
  color: var(--japan-text);
  padding: var(--space-xl) 0;          /* 8rem top & bottom */
  position: relative;
  overflow: hidden;
}

/* ── Shoji separators ── */
.whatido__shoji {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  pointer-events: none;
  z-index: 0;
}

.whatido__shoji--top {
  top: 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(212, 160, 181, 0.05) 20%,
    rgba(212, 160, 181, 0.14) 50%,
    rgba(212, 160, 181, 0.05) 80%,
    transparent 100%
  );
}

.whatido__shoji--bot {
  bottom: 0;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(212, 160, 181, 0.03) 20%,
    rgba(212, 160, 181, 0.07) 50%,
    rgba(212, 160, 181, 0.03) 80%,
    transparent 100%
  );
}

/* ── Kanji watermark — 道 (the way) ── */
.whatido__watermark {
  position: absolute;
  top: 50%;
  right: -2vw;
  transform: translateY(-50%);
  font-family: var(--font-japan);
  font-size: clamp(14rem, 30vw, 34rem);
  color: rgba(232, 228, 220, 0.02);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* ── Inner content — vertical stack ── */
.whatido__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* ── Header: label + extending rule ── */
.whatido__header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: var(--space-lg);      /* 4rem before lead */
}

.whatido__header-text {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--japan-accent);
  opacity: 0.9;
  white-space: nowrap;
  flex-shrink: 0;
}

.whatido__header-rule {
  display: block;
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    rgba(212, 160, 181, 0.35),
    transparent 80%
  );
}

/* ── Act I: The offer — large, Zen Antique ── */
.whatido__lead {
  font-family: var(--font-japan);
  font-size: clamp(2rem, 3.8vw, 3.4rem);
  line-height: 1.5;
  color: var(--japan-text);
  font-weight: 400;
  max-width: 860px;
  margin-bottom: var(--space-lg);      /* 4rem before body */
}

/* ── Act II: The differentiator — Inter, muted ── */
.whatido__body {
  font-family: var(--font-sans);
  font-size: clamp(0.875rem, 1.15vw, 1rem);
  line-height: 2.1;
  color: var(--japan-text-mid);
  font-weight: 300;
  max-width: 480px;
  margin-left: clamp(2rem, 6vw, 6rem); /* indent: pulled from the left edge */
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  border-top: 1px solid rgba(212, 160, 181, 0.1);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

/* ── Act III: The promise — Saira italic ── */
.whatido__close {
  font-family: var(--font-ethiopia);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.9;
  color: var(--japan-text);
  opacity: 0.78;
  max-width: 460px;
  margin-left: clamp(2rem, 6vw, 6rem); /* same indent as body */
}

/* ── Responsive ── */
@media (max-width: 760px) {
  .whatido__body,
  .whatido__close {
    margin-left: 0;
    max-width: 100%;
  }

  .whatido__index {
    display: none; /* too much noise on small screens */
  }
}