/* Homepage: brand and community layout (Night gold). One bold statement, the
   founders as the centerpiece, a few playbooks, generous space. Colors and type
   come from the site tokens in style.css. */

.br-eyebrow { color: var(--gold-ink); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin: 0; }

/* Hero */
/* Full-screen hero: fills the whole first screen (svh = the area Safari actually shows at load,
   so the text never hides under its toolbar), with the copy anchored to the bottom left and
   sharing the header's left gutter so the logo and the headline line up. */
.br-hero { --br-gutter: clamp(1.25rem, 3vw, 2.5rem); position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; justify-content: flex-start; overflow: hidden; background: var(--bg); }
.br-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% center; z-index: -2; }
.br-hero-scrim { position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(180deg, rgba(7, 12, 26, 0.66) 0%, rgba(7, 12, 26, 0.08) 24%, rgba(7, 12, 26, 0.22) 48%, rgba(7, 12, 26, 0.74) 78%, rgba(11, 16, 32, 0.97) 100%),
        linear-gradient(90deg, rgba(7, 12, 26, 0.82) 0%, rgba(7, 12, 26, 0.46) 42%, rgba(7, 12, 26, 0.04) 100%); }
.br-hero-inner { width: 100%; max-width: none; margin: 0; padding: clamp(5.5rem, 13vh, 8rem) var(--br-gutter) clamp(2rem, 7vh, 4.5rem); text-align: left; }
.br-hero h1 { font-size: clamp(2.6rem, min(8.2vw, 11.5vh), 6.4rem); font-weight: 800; line-height: 1; letter-spacing: -0.032em; color: #fff; max-width: 15ch; margin: 1rem 0 1.4rem; text-wrap: balance; text-shadow: 0 2px 28px rgba(0, 0, 0, 0.4); }
.br-hero h1 em, .br-statement h2 em { font-style: normal; color: var(--gold-ink); }
.br-hero-sub { font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.5; color: rgba(255, 255, 255, 0.86); max-width: 34rem; margin: 0 0 2rem; }
.br-hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.br-hero-actions .btn { padding: 0.95rem 1.7rem; font-size: 0.98rem; }

/* Layout */
.br-wrap { max-width: 78rem; margin-inline: auto; padding-inline: 1.25rem; }
.br-section { margin-top: clamp(4.5rem, 10vw, 8rem); }
.br-wrap > .br-section-gap, .br-wrap > .hp-closer { margin-top: clamp(4.5rem, 10vw, 8rem); }
.br-head { max-width: 46rem; margin-bottom: 2.25rem; }
.br-head h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1.07; letter-spacing: -0.022em; margin: 0.7rem 0 0; text-wrap: balance; }
.br-head--row { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.br-lede { color: var(--text-light); font-size: clamp(1.02rem, 1.6vw, 1.2rem); line-height: 1.6; margin: 1rem 0 0; max-width: 40rem; }
.br-link { color: var(--accent); font-weight: 700; text-decoration: none; white-space: nowrap; }
.br-link:hover { text-decoration: underline; }
.br-tag { display: inline-block; align-self: start; background: var(--gold); color: var(--on-accent); font-weight: 800; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 999px; padding: 0.24rem 0.75rem; }
.br-tag--line { background: transparent; color: var(--gold-ink); border: 1px solid var(--gold); }

/* Proof strip */
.br-proof { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--border); }
.br-proof li { display: grid; gap: 0.35rem; align-content: start; padding: 2rem 2rem 2rem 0; }
.br-proof li + li { padding-left: 2rem; border-left: 1px solid var(--border); }
.br-proof strong { color: var(--ink); font-size: 1.05rem; font-weight: 700; }
.br-proof span { color: var(--text-light); font-size: 0.95rem; line-height: 1.55; }

/* Founders */
.br-founders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.br-founder { display: flex; flex-direction: column; min-width: 0; text-decoration: none; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.br-founder:hover { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4); }
.br-founder-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--navy-700); }
.br-founder-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 16%; display: block; transition: transform 0.5s ease; }
.br-founder:hover .br-founder-media img { transform: scale(1.04); }
.br-founder-body { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.5rem 1.6rem 1.7rem; flex: 1; }
.br-founder-name { color: var(--ink); font-size: 1.55rem; font-weight: 800; line-height: 1.14; letter-spacing: -0.014em; margin-top: 0.3rem; }
.br-founder-meta { color: var(--text-muted); font-size: 0.9rem; line-height: 1.45; }
.br-founder-text { color: var(--text); font-size: 0.98rem; line-height: 1.6; }
.br-founder-cta { color: var(--accent); font-weight: 700; font-size: 0.95rem; margin-top: auto; padding-top: 0.6rem; }
.br-founder--invite { background: transparent; border-style: dashed; border-color: var(--gold); justify-content: center; }
.br-founder--invite:hover { background: var(--bg-alt); }

/* Featured list banner */
.br-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; text-decoration: none; background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.25s ease; }
.br-feature:hover { border-color: var(--gold); }
.br-feature-media { display: block; min-height: 20rem; overflow: hidden; }
.br-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.br-feature-body { display: flex; flex-direction: column; justify-content: center; gap: 0.9rem; padding: clamp(1.75rem, 4vw, 3.5rem); }
.br-feature-title { color: var(--ink); font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.br-feature-text { color: var(--text-light); line-height: 1.6; }

/* Guides */
.br-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.mag-card { text-decoration: none; display: grid; gap: 0.7rem; align-content: start; }
.mag-card-img { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; background: var(--bg-alt); }
.mag-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s; }
.mag-card:hover .mag-card-img img { transform: scale(1.04); }
.mag-card h3 { font-size: 1.2rem; line-height: 1.28; color: var(--ink); }
.mag-card:hover h3 { color: var(--accent); }
.mag-meta { color: var(--text-muted); font-size: 0.85rem; font-weight: 600; margin: 0; }

/* Keep reading: quiet text links that keep the curated stories one click from home */
.br-more-list { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
.br-more-list li { border-bottom: 1px solid var(--border); }
.br-more-list li:nth-child(-n+2) { border-top: 1px solid var(--border); }
.br-more-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 1.25rem; padding: 1.05rem 0; color: var(--ink); font-size: 1.02rem; font-weight: 600; line-height: 1.4; text-decoration: none; transition: color 0.2s ease; }
.br-more-list a::after { content: "\2192"; flex: none; color: var(--accent); transition: translate 0.35s var(--ease-spring); }
.br-more-list a:hover { color: var(--accent); }
.br-more-list a:hover::after { translate: 4px 0; }

/* Statement */
.br-statement { text-align: center; max-width: 52rem; margin-inline: auto; }
.br-statement h2 { font-size: clamp(2.2rem, 6vw, 4.4rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.026em; margin: 0.9rem 0 0; text-wrap: balance; }
.br-statement .br-lede { margin-inline: auto; }
.br-statement .br-link { display: inline-block; margin-top: 1.5rem; }

@media (max-width: 1000px) {
    .br-founders { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .br-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .br-guides .mag-card:nth-child(3) { display: none; }
}
@media (max-width: 800px) {
    .br-more-list { grid-template-columns: 1fr; }
    .br-more-list li:nth-child(2) { border-top: 0; }
    .br-feature { grid-template-columns: 1fr; }
    .br-feature-media { min-height: 0; aspect-ratio: 16 / 9; }
    .br-proof { grid-template-columns: 1fr; }
    .br-proof li, .br-proof li + li { padding: 1.25rem 0; border-left: 0; }
    .br-proof li + li { border-top: 1px solid var(--border); }
    .br-hero-img { object-position: 78% center; }
}
@media (max-width: 640px) {
    .br-wrap { padding-inline: 1rem; }
    .br-hero-scrim { background: linear-gradient(180deg, rgba(7, 12, 26, 0.7) 0%, rgba(7, 12, 26, 0.05) 14%, rgba(7, 12, 26, 0.62) 36%, rgba(11, 16, 32, 0.97) 68%); }
    .br-hero-img { object-position: 80% top; }
    .br-founders, .br-guides { grid-template-columns: 1fr; }
    .br-guides .mag-card:nth-child(3) { display: grid; }
    .br-head--row { flex-direction: column; align-items: flex-start; }
    .br-hero-actions .btn { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
    .br-founder, .br-founder-media img, .mag-card-img img { transition: none; }
    .br-founder:hover { transform: none; }
}

.br-founder-media--mono { display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, var(--navy-700), var(--bg-alt) 70%); }
.br-mono { font-size: clamp(3.5rem, 8vw, 5.5rem); font-weight: 800; letter-spacing: -0.03em; color: var(--gold-ink); }