/* Template: intro — PLACEHOLDER (Stage 1 only).
   A centered title/subtitle/text block proving multi-page, multi-template
   routing. Replaced by real templates in Stage 2 (see js/templates/intro.js). */

.intro {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: clamp(96px, 18vh, 180px) 0;
  text-align: center;
}

.intro__content {
  max-width: 760px;
}

.intro__title {
  font-size: clamp(32px, 6vw, 56px);
  letter-spacing: 0.04em;
}

.intro__subtitle {
  margin-top: clamp(14px, 2.5vh, 20px);
  font-size: clamp(12px, 1.8vw, 15px);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  color: var(--color-text-secondary);
}

.intro__text {
  margin-top: clamp(24px, 4vh, 36px);
  font-size: clamp(15px, 2.2vw, 17px);
  line-height: 1.75;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  color: var(--color-text-secondary);
}

.intro__note {
  margin-top: clamp(40px, 7vh, 64px);
  display: inline-block;
  padding: 10px 18px;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  opacity: 0.75;
  border: 1px dashed color-mix(in srgb, var(--color-text-secondary) 40%, transparent);
  border-radius: var(--radius-md);
}