/* Unit 02: source text measures inside the approved outer container. */
.apak-intro {
  padding-block-start: 25px;
  color: var(--apak-ink);
  background: var(--apak-white);
}

.apak-intro__heading-column {
  padding-inline-end: 36px;
}

.apak-intro__title {
  max-inline-size: 470px;
  margin: 0 auto;
  font-family: var(--apak-font-ui);
  font-size: 25px;
  font-weight: 800;
  line-height: 36px;
  text-align: center;
  overflow-wrap: anywhere;
}

.apak-intro__body-column {
  margin-block-start: 27px;
}

.apak-intro__body {
  max-inline-size: 500px;
  margin-inline: auto;
  font-family: var(--apak-font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 21px;
  overflow-wrap: anywhere;
}

.apak-intro__body p {
  margin: 0;
}

.apak-intro__body p + p {
  margin-block-start: 20px;
}

/* Preserve the source's optical centers. The mark stays in flow and owns its
   24px transition overlap; additional copy pushes it and the boundary down. */
.apak-intro__mark-column {
  position: relative;
  z-index: 1;
  margin-block-start: 70px;
  margin-block-end: -24px;
  padding-inline-end: 19px;
}

.apak-intro__mark {
  width: 101px;
  height: 47px;
  margin-inline: auto;
}

@media (max-width: 640px) {
  .apak-intro__heading-column, .apak-intro__mark-column {
    padding-inline-end: 0;
  }

  .apak-intro__mark-column {
    margin-block-start: 56px;
  }
  
  .apak-intro__title {
    font-size: 22px;
    line-height: 32px;
}

.apak-craft__title {
    font-size: 20px;
    line-height: 30px;
    letter-spacing: 2px;
}
}


/* Intro first-paint reveal (2026-09-12). Reuse the existing reveal timing
   without hiding already-painted content or changing layout/manual CSS. */
@media screen and (prefers-reduced-motion: no-preference) {
  #apak-intro [data-apak-reveal]:not([data-apak-motion="none"] *) {
    transition: opacity 650ms cubic-bezier(.22, 1, .36, 1) var(--apak-reveal-delay),
      transform 900ms cubic-bezier(.16, 1, .3, 1) var(--apak-reveal-delay),
      filter 850ms cubic-bezier(.16, 1, .3, 1) var(--apak-reveal-delay);
  }

  #apak-intro [data-apak-reveal-delay="120"] {
    --apak-reveal-delay: 120ms;
  }

  @starting-style {
    #apak-intro [data-apak-reveal]:not([data-apak-motion="none"] *) {
      opacity: 0;
      transform: translate(var(--apak-reveal-x), var(--apak-reveal-y)) scale(var(--apak-reveal-scale));
      filter: blur(var(--apak-reveal-blur));
    }
  }

  /* Keep direct links and keyboard access immediate. */
  #apak-intro:target [data-apak-reveal],
  #apak-intro [data-apak-reveal]:target,
  #apak-intro:focus-within [data-apak-reveal] {
    transition: none;
  }
}