/* Marquee (fame.red): black velvet and champagne, magazine serif, a red carpet line. */
:root {
  --bg: #f6f1e7;
  --paper: #fffcf6;
  --ink: #0b0b0c;
  --ink-2: #2a2724;
  --muted: #6a6158;
  --line: #e7dcc8;
  --accent: #c41e3a;
  --accent-ink: #fff;
  --head-bg: #0b0b0c;
  --head-ink: #f3e7c9;
  --radius: 4px;
  --shadow: 0 18px 40px -28px rgb(11 11 12 / .55);
  --font-body: "Anuphan", system-ui, sans-serif;
  --font-display: "Noto Serif Thai", Georgia, serif;
}

.site-header { border-bottom: 2px solid var(--accent); }
.logo-mark { color: #e9d8a6; }
.logo-word { letter-spacing: .14em; }

/* Hero: a marquee sign. Black panel, bulb dots along the edges. */
.hero {
  background: #0b0b0c;
  color: #f3e7c9;
  position: relative;
  padding: 64px 0 52px;
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background: radial-gradient(circle, #f3d27a 0 2px, transparent 3px) 0 50% / 22px 10px repeat-x;
  opacity: .8;
}
.hero::before { top: 10px; }
.hero::after { bottom: 10px; }
.hero-title { font-weight: 800; letter-spacing: -.01em; color: #fff7e2; }
.hero-lead, .hero-kicker { color: #d8c9a3; }

.page-title, .entry-title { font-weight: 800; letter-spacing: -.01em; }
.section-title { text-transform: none; font-weight: 800; }
.section-title::after { background: linear-gradient(90deg, var(--accent), transparent); height: 2px; }
.chip { background: var(--ink); color: #f3e7c9; border-radius: 2px; letter-spacing: .04em; }

/* Portrait cards with a thin champagne frame. */
.card { border-color: #e7dcc8; }
.person-card .card-media img { aspect-ratio: 4 / 5; filter: saturate(.92) contrast(1.03); }
.person-card .monogram { display: grid; place-items: center; aspect-ratio: 4 / 5; background: radial-gradient(circle at 50% 38%, #2a2418, #0d0c0a 70%); color: var(--head-ink); font-family: var(--font-display); font-size: clamp(64px, 9vw, 112px); font-weight: 800; letter-spacing: -.02em; }
.person-card .card-title { font-family: var(--font-display); font-weight: 800; }

/* Profile fact sheet. */
.factsheet { display: grid; grid-template-columns: 220px 1fr; gap: 28px; align-items: start; margin: 0 0 28px; }
.factsheet-photo { margin: 0; }
.factsheet-photo img { width: 100%; border: 6px solid #fffcf6; outline: 1px solid #d9c9a2; box-shadow: var(--shadow); }
.factsheet-photo figcaption { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; font-size: 15px; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }
@media (max-width: 640px) { .factsheet { grid-template-columns: 1fr; } .factsheet-photo { max-width: 260px; } }