/* styles/sections/context-decay.css
 * Context Decay (XoMUJ, vJyUu, kIeaJ): a quote, then one sentence passed through five handoffs.
 * Each row is where it was (mono), the sentence with the part that survived in ink and the part
 * that was lost faded, and a status. The frames draw the lost words at ink 20% (1.5:1); they are
 * set at the lowest ink alpha that passes AA for their size: 48% (3.1:1) for the large 32 and 46px
 * lines on D and W, 60% (4.5:1) for the 23px lines on M. GONE uses --orange-aa (4.5:1 at 11px). */
@layer sections {
  .decay-section {
    padding-block: var(--space-56) 72px;
    box-shadow: inset 0 1px 0 var(--line);
  }

  .decay-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
  }

  .decay-section__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
  }

  .decay-section__quote {
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
    margin: 0;
  }

  .decay-section__quote blockquote {
    max-width: 760px;
    margin: 0;
  }

  .decay-section__quote blockquote p {
    margin: 0;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 500;
    line-height: 27px;
    color: var(--ink-2);
  }

  .decay-section__quote .attribution__role {
    font-size: 14px;
    line-height: 17px;
    color: var(--ink-muted);
  }

  .decay {
    margin: 0;
  }

  .decay__rows {
    margin: 0;
    padding: 0;
  }

  /* M (DgUmv): where and status on one line, the sentence 24px under them */
  .decay__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "where status" "sentence sentence";
    gap: var(--space-24) var(--space-16);
    padding-block: 18px;
    box-shadow: inset 0 -1px 0 var(--line);
  }

  .decay__row--agent {
    padding-block: 22px;
    box-shadow: none;
  }

  .decay__where {
    grid-area: where;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 13px;
    color: var(--ink-muted);
  }

  .decay__tool {
    font-weight: 500;
    letter-spacing: 1px;
  }

  .decay__row--agent .decay__tool {
    color: var(--ink);
  }

  .decay__detail {
    letter-spacing: 0.6px;
  }

  .decay__sentence,
  .decay__prompt {
    grid-area: sentence;
    margin: 0;
  }

  .decay__sentence {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    font-family: var(--font-display);
    font-size: 23px;
    font-weight: 500;
    line-height: 33px;
    letter-spacing: -0.29px;
  }

  .decay__lost {
    color: var(--ink-60);
  }

  .decay__prompt {
    font-family: var(--font-mono);
    font-size: 21px;
    font-weight: 500;
    line-height: 25px;
  }

  .decay__status {
    grid-area: status;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 13px;
    letter-spacing: 1px;
    text-align: right;
  }

  .decay__status--whole { color: var(--fern); }
  .decay__status--partial { color: var(--ink-muted); }
  .decay__status--gone { color: var(--orange-aa); }
  .decay__status--received { color: var(--ink); }

  @media (width >= 900px) {
    .decay-section {
      padding-block: var(--space-96) 120px;
    }

    .decay-section__inner {
      gap: var(--space-40);
    }

    .decay-section__quote blockquote p {
      font-size: 22px;
      line-height: 31px;
    }

    /* D (TThSf): where 170, the sentence, the status in 96, 24 apart. The where label's last
       line and the status sit on the sentence's last baseline (BRI-7805 J22; the frame centres
       them on the line). */
    .decay__row {
      grid-template-columns: 170px minmax(0, 1fr) 96px;
      grid-template-areas: "where sentence status";
      align-items: last baseline;
      column-gap: var(--space-24);
    }

    .decay__sentence {
      flex-flow: row wrap;
      align-items: center;
      column-gap: var(--space-10);
      row-gap: 0;
      font-size: 32px;
      line-height: 45px;
      letter-spacing: -0.4px;
    }

    .decay__lost {
      color: var(--ink-48);
    }

    .decay__prompt {
      font-size: 27px;
      line-height: 32px;
    }
  }

  @media (width >= 1680px) {
    .decay-section {
      padding-block: 115px 144px;
    }

    .decay__sentence {
      font-size: 46px;
      line-height: 65px;
    }

    .decay__prompt {
      font-size: 39px;
      line-height: 47px;
    }
  }
}