/* css/about.css — "The Colophon" · MyWave About · the letter page
 * Body class: .aboutpage. Light paper ground, one reading column,
 * a framed gouache plate, the four beliefs. Calm reveals only.
 * Hallmark · page: About (Colophon) · scope: about.html · parent: style.css tokens
 */

body.aboutpage {
  background: linear-gradient(180deg, #eef6f8 0%, #eef6f8 55%, #f6f1e7 100%);
  color: #0a2030;
}

/* --- paper fiber (same grain family as the chart room, lighter) ------ */
body.aboutpage::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url(../assets/paper-grain.png) repeat;
  opacity: 0.22;
  mix-blend-mode: multiply;
}

/* --- topbar on light ---------------------------------------------- */
body.aboutpage .topbar { background: transparent; }
body.aboutpage .brand-name,
body.aboutpage .menu-btn { color: #0a2030; }
body.aboutpage .brand-tag { color: #1d4653; }
body.aboutpage .menu-btn-dot { background: #8f3f1c; }

/* --- type on light ------------------------------------------------- */
body.aboutpage .eyebrow { color: #8f3f1c; }
body.aboutpage .line--accent { color: #8f3f1c; }
body.aboutpage .display,
body.aboutpage .chapter-title { color: #0a2030; }
body.aboutpage .lede { color: #1d4653; }
body.aboutpage .signature { color: #0a2030; }

/* --- the letter ----------------------------------------------------- */
body.aboutpage main { position: relative; z-index: 1; }
.letter {
  max-width: 36rem; margin-inline: auto;
  padding-block: clamp(3.5rem, 9vh, 6.5rem);
  padding-inline: clamp(1.25rem, 5vw, 2rem);
  min-width: 0;
}
.letter:first-child { padding-top: 18vh; }
.letter--hello { text-align: center; padding-bottom: 7rem; }
/* max-width on .chapter-title left-hugs on narrow screens — center the box */
.letter--hello .chapter-title, .letter--hello .display { margin-inline: auto; }
.letter--hello .hero-ctas { justify-content: center; }
.chapter-title, .hero-title { overflow-wrap: anywhere; }

/* --- the framed plate ------------------------------------------------ */
.plate {
  margin: 2.8rem 0 2.8rem; padding: 0.55rem;
  background: rgba(255, 253, 248, 0.92);
  border: 1px solid rgba(10, 32, 48, 0.16);
  border-radius: 4px;
  box-shadow: 0 1px 0 rgba(10, 32, 48, 0.04), 0 24px 48px -34px rgba(10, 32, 48, 0.4);
}
.plate img { display: block; width: 100%; height: auto; border-radius: 2px; }
.plate figcaption {
  margin: 0.7rem 0.2rem 0.1rem; color: #5f7d89;
  font-size: 0.7rem; text-align: center;
}

/* --- letter body ------------------------------------------------------ */
.letter-body p {
  color: #1d4653; font-size: 1.06rem; line-height: 1.75;
  margin: 0 0 1.4rem;
}
.letter-body strong { color: #0a2030; }
.letter-h {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.45rem; color: #0a2030; margin: 2.4rem 0 0.9rem;
}
.letter-link { color: #8f3f1c; }

.beliefs { list-style: none; margin: 1.2rem 0 0; padding: 0; }
.beliefs li {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 0.4rem 0.6rem; align-items: baseline;
  padding-block: 0.75rem; border-top: 1px solid rgba(10, 32, 48, 0.1);
}
.beliefs li:first-child { border-top: 0; }
.beliefs .list-num { margin: 0; color: #8f3f1c; }
.beliefs p:last-child { margin: 0; color: #0a2030; font-weight: 600; }

/* --- footer ------------------------------------------------------------ */
body.aboutpage .colophon { background: linear-gradient(180deg, rgba(238, 246, 248, 0), rgba(238, 246, 248, 0.95) 45%); }