/* Direction A — "Editorial": warm paper, a large serif name, one terracotta accent. Reads like a magazine profile. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');

body { background: #f5f0e8; color: #1b1815; font-family: 'Inter', 'Segoe UI', sans-serif; font-size: 17px; }
h1, h2, h3, .stats b, .mark { font-family: 'Fraunces', Georgia, serif; font-weight: 500; }

.nav { border-bottom: 1px solid #1b1815; font-size: 15px; }
.mark { font-size: 26px; letter-spacing: -0.02em; }
.nav nav a { opacity: .75; }
.btn { border-radius: 999px; }
.btn-solid { background: #1b1815; color: #f5f0e8; }
.btn-line, .btn-ghost { border: 1px solid #1b1815; }
.nav-cta { background: #b8451f; color: #fff; border-color: #b8451f; }

.hero { padding-top: 72px; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: #b8451f; margin-bottom: 20px; }
h1 { font-size: clamp(64px, 11vw, 148px); line-height: .92; letter-spacing: -0.035em; }
.lede { font-family: 'Fraunces', Georgia, serif; font-size: clamp(20px, 2.1vw, 27px); line-height: 1.35; margin-top: 32px; max-width: 30em; }
.place { margin-top: 24px; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: #6b6259; }
.place span + span::before { content: '·'; margin-right: 22px; margin-left: -14px; }
.actions { margin-top: 32px; }
.portrait img { border-radius: 200px 200px 16px 16px; filter: saturate(.85) contrast(1.03); }
.portrait { position: relative; }
.portrait::after { content: ''; position: absolute; inset: 14px -14px -14px 14px; border: 1px solid #b8451f; border-radius: 200px 200px 16px 16px; z-index: -1; }

.stats { border-top: 1px solid #1b1815; border-bottom: 1px solid #1b1815; }
.stats div { padding: 28px 24px 28px 0; }
.stats div + div { padding-left: 24px; border-left: 1px solid #d9cfc0; }
.stats b { font-size: 64px; line-height: 1; letter-spacing: -0.03em; }
.stats span { font-size: 14px; color: #6b6259; margin-top: 8px; }

.block { border-bottom: 1px solid #d9cfc0; }
h2 { font-size: 30px; line-height: 1.1; letter-spacing: -0.01em; }
.prose { max-width: 40em; }
.prose .first { font-family: 'Fraunces', Georgia, serif; font-size: 25px; line-height: 1.35; }
.prose .tag { display: inline-block; margin-top: 1.4em; padding: 6px 14px; border: 1px solid #1b1815; border-radius: 999px; font-size: 14px; font-weight: 600; }

.card { padding-top: 20px; border-top: 2px solid #1b1815; }
.card h3 { font-size: 23px; margin-bottom: 10px; }
.card p, .card li { font-size: 16px; color: #3a342e; }
.card li::before { content: ''; position: absolute; left: 0; top: .62em; width: 10px; height: 1px; background: #b8451f; }

.chips li { padding: 10px 16px; background: #ebe3d6; border-radius: 999px; font-size: 15px; }

.timeline li { border-top: 1px solid #d9cfc0; }
.timeline li:first-child { border-top: 0; padding-top: 0; }
.timeline .when { font-size: 14px; color: #6b6259; letter-spacing: .03em; padding-top: 5px; }
.timeline .role { font-family: 'Fraunces', Georgia, serif; font-size: 22px; line-height: 1.25; }
.timeline .where { color: #6b6259; font-size: 15px; }

.trio h2 { font-size: 15px; font-family: 'Inter', sans-serif; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #b8451f; margin-bottom: 10px; }
.trio p { font-family: 'Fraunces', Georgia, serif; font-size: 20px; line-height: 1.35; }

.forms { border-bottom: 0; }
.form { background: #ebe3d6; padding: 32px; border-radius: 16px; }
.form h2 { font-size: 26px; margin-bottom: 4px; }
.form label { color: #6b6259; }
.form input, .form textarea { border: 1px solid #cfc4b3; border-radius: 8px; background: #f5f0e8; }

/* The popup that shows a form's answer (forms.js). */
.popup { background: #ebe3d6; color: #1b1815; border-radius: 16px; }
.popup::backdrop { background: rgba(27, 24, 21, .6); }
.popup-say { font-family: 'Fraunces', Georgia, serif; font-size: 21px; line-height: 1.35; }
.popup .btn { font-family: inherit; cursor: pointer; }
.popup .btn:focus-visible { outline: 2px solid #b8451f; outline-offset: 3px; }

.foot { border-top: 1px solid #1b1815; color: #6b6259; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  .stats div, .stats div + div { padding: 18px 0; border-left: 0; }
  .stats div:nth-child(n+3) { border-top: 1px solid #d9cfc0; }
  .stats b { font-size: 46px; }
  .place span + span::before { content: none; }
  .prose .first { font-size: 21px; }
  .form { padding: 22px; }
}

.band { width: min(1180px, 100% - 48px); margin: 0 auto 56px; display: grid; grid-template-columns: 1.3fr 1fr; background: #1b1815; color: #f5f0e8; border-radius: 20px; overflow: hidden; }
.band-art { padding: 40px 8px 40px 44px; display: flex; align-items: center; }
.band-art svg { display: block; width: 100%; height: auto; }
.band-words { padding: 44px 48px; display: flex; flex-direction: column; justify-content: center; gap: 26px; border-left: 1px solid rgba(245, 240, 232, .18); }
.band-words p { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(26px, 2.75vw, 38px); line-height: 1.1; letter-spacing: -0.015em; }
.band-words p + p { color: #eba283; }
@media (max-width: 760px) {
  .band { width: calc(100% - 40px); grid-template-columns: 1fr; margin-bottom: 40px; }
  .band-art { padding: 28px 20px 20px 24px; }
  .band-words { padding: 24px 24px 32px; border-left: 0; border-top: 1px solid rgba(245, 240, 232, .18); gap: 18px; }
}