/* Adile Naşit tribute page (adile-nasit/): portrait and title on a narrow left column, the letter as plain text on the right,
   split by a thin vertical line, so the whole letter fits on one screen. Linked from the header portrait, the mobile menu and the footer. */

.tribute-page { padding-top: var(--page-top); }
.tribute-letter { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 2.2fr; align-items: center; }
.tribute-intro { padding-right: 44px; text-align: center; }
.tribute-portrait { display: block; width: 180px; height: 180px; margin: 0 auto 18px; filter: drop-shadow(0 8px 16px var(--toon-shadow)); }
.tribute-intro .eyebrow { justify-content: center; margin-bottom: 12px; color: var(--color-muted); }
.tribute-intro h1 { margin: 0; font-size: var(--text-h3); line-height: var(--leading-heading); }
.tribute-intro h1 em { display: block; font-style: normal; color: var(--heading-em); }
.tribute-body { padding-left: 44px; border-left: 1px solid var(--color-line); }
.tribute-text p { margin: 0 0 14px; font-size: var(--text-400); line-height: var(--leading-body); color: var(--color-ink); }
.tribute-text .tribute-thanks { margin-top: 20px; font-weight: var(--weight-bold); }
.tribute-sign { margin: 6px 0 18px; font-size: var(--text-250); color: var(--color-muted); }
.tribute-sign span { display: block; margin-top: 2px; font-weight: var(--weight-bold); color: var(--color-ink); }
.tribute-note { display: block; font-size: var(--text-150); line-height: var(--leading-snug); color: var(--color-muted); }

@media (max-width: 1000px) {
  .tribute-page { padding-bottom: var(--section-space); }
  .tribute-letter { grid-template-columns: 1fr; gap: 28px; }
  .tribute-intro { padding-right: 0; }
  .tribute-portrait { width: 140px; height: 140px; }
  .tribute-intro h1 { font-size: var(--text-h2); }
  .tribute-text p { font-size: var(--text-body); }
  .tribute-body { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--color-line); }
}

@media (max-width: 700px) {
  .tribute-portrait { width: 112px; height: 112px; }
}