/* ── About Page — Founder's Letter (Mobile First) ────────── */

.hero { padding-top: clamp(120px, 16vw, 170px); padding-bottom: clamp(56px, 8vw, 90px); }

.about-grid { display: grid; gap: clamp(36px, 5vw, 60px); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 940px) { .about-grid { grid-template-columns: 1.35fr 0.65fr; } }
.founder-media { display: flex; flex-direction: column; gap: 20px; }
@media (min-width: 940px) { .founder-media { position: sticky; top: 110px; } }
.portrait {
    position: relative; aspect-ratio: 4/5; border-radius: var(--radius-md); overflow: hidden;
    border: 1.5px dashed var(--clr-border-strong); padding: 20px;
    background: radial-gradient(circle at 40% 30%, var(--clr-accent-dim), transparent 60%), var(--clr-card-hover);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 11px; text-align: center;
}
.portrait.has-image { border-style: solid; padding: 0; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait svg { width: 34px; height: 34px; color: var(--clr-accent); opacity: 0.75; }
.portrait__label { font-size: 13px; color: var(--clr-text-light); font-weight: 500; }
.portrait__sub { font-size: 11.5px; color: var(--clr-text-muted); max-width: 26ch; line-height: 1.5; }

.letter { max-width: 680px; }
.about-grid .letter { max-width: none; }
.letter__salutation {
    font-family: var(--font-heading); font-style: italic; font-weight: 500;
    font-size: clamp(22px, 2.8vw, 30px); color: var(--clr-text); margin-bottom: 22px;
}
.letter p {
    font-size: clamp(15.5px, 1.5vw, 18px); color: var(--clr-text-light); line-height: 1.85; margin-bottom: 20px;
}
.letter p:first-of-type::first-letter {
    font-family: var(--font-heading); font-weight: 600; font-size: clamp(36px, 6vw, 52px);
    line-height: 0.65; float: left; padding: 4px 8px 0 0; color: var(--clr-accent);
}
.letter__sign { margin-top: 32px; }
.letter__sign strong {
    display: block; font-family: var(--font-heading); font-style: italic; font-weight: 600; font-size: 19px;
}
.letter__sign span { font-size: 12.5px; color: var(--clr-text-muted); }

.fact-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.founder-media .fact-chips { margin-top: 0; }
.fact-chips span {
    padding: 9px 16px; border: 1px solid var(--clr-border-strong); border-radius: var(--radius-pill);
    font-size: 12.5px; color: var(--clr-text-light); background: var(--clr-card);
}

/* Rules — numbered manifesto */
.rules { max-width: 820px; margin-inline: auto; }
.rule {
    display: grid; grid-template-columns: 48px 1fr; gap: 18px;
    padding: clamp(20px, 3vw, 28px) 0; border-bottom: 1px solid var(--clr-border);
}
@media (min-width: 640px) { .rule { grid-template-columns: 60px 1fr; gap: 20px; } }
.rule:first-child { padding-top: 0; }
.rule:last-child { border-bottom: none; }
.rule__num {
    font-family: var(--font-heading); font-style: italic; font-weight: 600;
    font-size: clamp(20px, 2.4vw, 26px); color: var(--clr-accent); opacity: 0.85;
}
.rule h3 { font-size: clamp(17px, 1.8vw, 19px); font-weight: 600; margin-bottom: 6px; }
.rule p { font-size: 14px; color: var(--clr-text-light); line-height: 1.7; max-width: 52ch; }