/* ════════════════════════════════════════════════════════════════════
   INTRO — Chairman's letter section with stacked paper effect
   BEM block: .intro
   Structure: .section.intro > .container > content
   ════════════════════════════════════════════════════════════════════ */

@layer components {

  .intro {
    position: relative;
    background-color: var(--surface-page);
  }


  /* ── Guard rails — crossing lines that frame the content ─────── */

  .intro::before,
  .intro::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
  }

  /* Vertical rails — full section height, 55% of viewport centered */
  .intro::before {
    inset-block: 0;
    inset-inline-start: 50%;
    inline-size: 55%;
    transform: translateX(-50%);
    border-inline: var(--line-thin) solid var(--border-default);
  }

  /* Horizontal rails — full section width, crossing through the verticals */
  .intro::after {
    inset-inline: 0;
    inset-block-start: var(--space-s);
    block-size: calc(100% - var(--space-s) * 2);
    border-block: var(--line-thin) solid var(--border-default);
  }


  /* ── Eyebrow ──────────────────────────────────────────────────── */

  .intro__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
  }

  .intro__eyebrow-dash {
    inline-size: var(--space-s);
    block-size: var(--line-medium);
    background-color: var(--secondary);
    border-radius: var(--radius-full);
  }

  .intro__eyebrow-text {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide-caps);
    text-transform: uppercase;
    color: var(--text-muted);
  }


  /* ── Section heading ──────────────────────────────────────────── */

  .intro__heading {
    font-family: var(--font-heading);
    font-size: var(--heading-2xl);
    font-weight: var(--weight-extrabold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    color: var(--text-heading);
    text-transform: uppercase;
    text-align: center;
    text-wrap: balance;
    max-inline-size: 50%;
    margin-inline: auto;
  }


  /* ── Layout stack ─────────────────────────────────────────────── */

  .intro__content {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--container-gap);
  }


  /* ── Letter card — stacked paper effect via ::before / ::after ─ */

  .intro__letter {
    position: relative;
    max-inline-size: var(--content-width-letter);
    inline-size: 100%;
    margin-inline: auto;
    container-type: inline-size;
  }

  .intro__letter::before,
  .intro__letter::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-xs);
  }

  .intro__letter::before {
    background-color: color-mix(in oklch, var(--white) 20%, transparent);
    transform: rotate(0.7deg);
    inset-block-start: var(--space-3xs);
    inset-inline-start: var(--space-3xs);
  }

  .intro__letter::after {
    background-color: color-mix(in oklch, var(--white) 33%, transparent);
    transform: rotate(-0.5deg);
    inset-block-start: var(--space-3xs);
    inset-inline-end: calc(var(--space-3xs) * -1);
  }

  .intro__letter-body {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
    padding: var(--space-m);
    padding-block-end: var(--space-l);
    background-color: var(--white);
    border-radius: var(--radius-xs);
    box-shadow: var(--shadow-m);
    transform: rotate(-0.4deg);
  }


  /* ── Letter text ──────────────────────────────────────────────── */

  .intro__paragraph {
    font-size: var(--text-xs);
    line-height: var(--leading-loose);
    color: var(--text-body);
  }


  /* ── Letter CTA ───────────────────────────────────────────────── */

  .intro__cta-text {
    font-size: var(--text-xs);
    line-height: var(--leading-loose);
    color: var(--text-body);
  }

  .intro__cta-link {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--secondary);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset-m);
    transition: color var(--duration-fast) var(--ease-default);
  }

  .intro__cta-link:hover {
    color: var(--secondary-hover);
  }


  /* ── Signature ────────────────────────────────────────────────── */

  .intro__sig-divider {
    inline-size: var(--space-xl);
    border: none;
    border-block-start: var(--line-thin) solid var(--neutral-semi-light);
  }

  .intro__signature {
    block-size: auto;
    max-block-size: var(--space-xl);
    inline-size: auto;
  }

  .intro__signature-text {
    font-family: var(--font-heading);
    font-size: calc(var(--heading-m) * 0.875);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--text-heading);
  }


  /* ── Author block ─────────────────────────────────────────────── */

  .intro__author {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }

  .intro__avatar {
    inline-size: var(--avatar-m);
    block-size: var(--avatar-m);
    border-radius: var(--avatar-radius);
    object-fit: cover;
  }

  .intro__author-info {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .intro__author-name {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    color: var(--text-heading);
  }

  .intro__author-title {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }


  /* ── Section closer ───────────────────────────────────────────── */

  .intro__closer {
    border: none;
    border-block-start: var(--line-thin) solid var(--neutral-light);
  }


  /* ── Tablet ───────────────────────────────────────────────────── */

  @media (min-width: 48em) {
    .intro__letter-body {
      padding: var(--space-l);
      padding-block-end: var(--space-xl);
    }

    .intro__avatar {
      inline-size: var(--avatar-l);
      block-size: var(--avatar-l);
    }
  }


  /* ── Desktop ──────────────────────────────────────────────────── */

  @media (min-width: 64em) {
    .intro__letter-body {
      padding-inline: var(--space-xl);
    }
  }

}