/* ==========================================================================
   Pax Family — Brand story page styles
   Implementation of marketing_mocks/page-brand.html from Claude Design.
   Loads after tokens.css. Everything scoped under .page.br.

   Editorial long-read pattern: small italic gold eyebrow, big display
   heading, centered ~640px reading column. Two showcase moments —
   Ichthys (full-bleed dark) and the color philosophy (split blue|olive).
   ========================================================================== */

/* Page-frame override — warm cream */
.page.br { background: #FBF5EA; min-height: 100vh; }
.br .topnav { padding-top: 28px; }

/* ===== COVER ===== */
.br-cover {
    padding: 80px var(--page-gutter) 96px;
    text-align: center; max-width: 880px; margin: 0 auto;
    position: relative;
}
.br-cover .stamp {
    display: inline-block;
    font-family: var(--font-display); font-style: italic;
    font-size: 13px; color: #8A6A1F;
    letter-spacing: .12em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 999px;
    border: 1px dashed #C9A227; background: #FDF4DC;
    margin-bottom: 32px;
}
.br-cover h1 {
    font-family: var(--font-display); font-size: 96px; font-weight: 800;
    letter-spacing: -0.04em; line-height: .95; color: #1b2a3a;
    margin: 0;
}
.br-cover h1 em { font-style: italic; color: #66A367; }
.br-cover .lede {
    margin: 28px auto 0;
    font-size: 22px; line-height: 1.5; color: #2a3848;
    max-width: 620px;
    font-family: var(--font-display); font-weight: 500;
}
.br-cover .lede em { font-style: italic; color: #095FA1; }
.br-cover .pron {
    margin-top: 36px;
    font-family: var(--font-display); font-size: 14px; color: #8A6A1F;
}
.br-cover .pron strong { color: #1b2a3a; font-weight: 800; font-style: italic; }
.br-cover .scroll {
    margin-top: 48px;
    font-family: var(--font-display); font-style: italic;
    font-size: 13px; color: #8A6A1F;
}

/* ===== GENERIC SECTION FRAME =====
   .br-sec → centered ~980px column, cream page bg shows beside it
   .br-sec.narrow → tighter 720px column for definition pages
   .br-sec.dark → full-bleed navy band with white type
   .br-sec.cream → full-bleed butter band with dark type */
.br-sec {
    padding: 80px var(--page-gutter);
    max-width: 980px; margin: 0 auto;
}
.br-sec.narrow { max-width: 720px; }
.br-sec.dark {
    background: #1b2a3a; color: #fff;
    max-width: none; margin: 0;
    padding: 96px var(--page-gutter);
}
.br-sec.cream {
    background: #FDF4DC;
    max-width: none; margin: 0;
    padding: 96px var(--page-gutter);
}

/* ===== EYEBROW (italic gold with flanking lines) ===== */
.br-eyebrow {
    font-family: var(--font-display); font-style: italic;
    font-size: 14px; color: #C9A227; letter-spacing: .04em;
    margin-bottom: 14px; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 14px;
}
.br-eyebrow::before, .br-eyebrow::after {
    content: ""; width: 32px; height: 1px; background: #C9A227;
}
.br-sec.dark .br-eyebrow { color: #E9B949; }
.br-sec.dark .br-eyebrow::before, .br-sec.dark .br-eyebrow::after { background: #E9B949; }

/* ===== H2 (display, italic green emphasis) ===== */
.br-h2 {
    font-family: var(--font-display); font-size: 56px; font-weight: 800;
    letter-spacing: -0.03em; line-height: 1; color: #1b2a3a;
    margin: 0 0 36px; text-align: center;
}
.br-h2 em { font-style: italic; color: #66A367; }
.br-sec.dark .br-h2 { color: #fff; }
.br-sec.dark .br-h2 em { color: #E9B949; }

/* ===== PROSE COLUMN (centered 640px) ===== */
.br-prose {
    font-size: 18px; line-height: 1.7; color: #2a3848;
    max-width: 640px; margin: 0 auto;
}
.br-prose p { margin: 0 0 18px; }
.br-prose p strong { font-family: var(--font-display); font-weight: 800; color: #1b2a3a; }
.br-prose p em { font-style: italic; color: #095FA1; }
.br-sec.dark .br-prose,
.br-sec.dark .br-prose p { color: #cbd5e1; }
.br-sec.dark .br-prose p strong { color: #fff; }
.br-sec.dark .br-prose p em { color: #E9B949; }

/* ===== "WHY PAX?" DEFINITION CARD ===== */
.br-def {
    margin: 0 auto 36px; max-width: 480px;
    background: #fff; border: 1px solid #f0e7d5; border-radius: 20px;
    padding: 36px 40px; text-align: center;
    box-shadow: 0 12px 36px rgba(15,23,42,.05);
}
.br-def .word {
    font-family: var(--font-display); font-size: 72px; font-weight: 800;
    letter-spacing: -0.035em; color: #1b2a3a; line-height: 1;
}
.br-def .ipa {
    margin-top: 10px;
    font-family: var(--font-display); font-style: italic;
    font-size: 16px; color: #8A6A1F;
}
.br-def .div {
    width: 48px; height: 1px; background: #E9B949; margin: 22px auto;
}
.br-def .pos {
    font-family: var(--font-display); font-style: italic;
    font-size: 13px; color: #94a3b8;
    text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px;
}
.br-def .meaning {
    font-family: var(--font-display); font-size: 32px; font-weight: 800;
    letter-spacing: -0.02em; color: #66A367;
}

/* ===== ICHTHYS SECTION (in dark band) ===== */
.br-fish-stage {
    display: grid; grid-template-columns: 360px 1fr;
    gap: 64px; align-items: center;
    max-width: 980px; margin: 48px auto 0;
}
.br-fish-card {
    background: #fff; border-radius: 24px; padding: 48px;
    box-shadow: 0 24px 60px rgba(0,0,0,.3);
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 1; position: relative;
}
.br-fish-card svg { width: 100%; height: 100%; }
.br-fish-card .corner {
    position: absolute; top: 12px; left: 14px;
    font-family: var(--font-display); font-style: italic;
    font-size: 11px; color: #8A6A1F;
    letter-spacing: .08em; text-transform: uppercase;
}
.br-fish-card .corner.r { left: auto; right: 14px; }

.br-acro {
    margin: 48px auto 0; max-width: 720px;
    background: #FDF4DC; border: 1px solid #E9B949;
    border-radius: 16px; padding: 28px 32px; text-align: center;
}
.br-acro .gk {
    font-family: var(--font-display); font-size: 32px; font-weight: 800;
    letter-spacing: -0.01em; color: #8A6A1F; margin-bottom: 8px;
}
.br-acro .gloss {
    font-family: var(--font-display); font-style: italic;
    font-size: 15px; color: #5a4a1f;
}
.br-acro .gloss strong {
    display: block; font-style: normal; color: #1b2a3a; margin-top: 8px;
    font-weight: 800; font-size: 17px;
}

/* ===== COLORS SECTION (split blue|olive panels) ===== */
.br-colors {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    margin: 48px auto 0; max-width: 980px;
    border-radius: 24px; overflow: hidden;
    box-shadow: 0 24px 60px rgba(15,23,42,.08);
}
.br-color {
    padding: 56px 44px; min-height: 360px;
    display: flex; flex-direction: column; justify-content: space-between;
    position: relative;
}
.br-color.blue { background: #095FA1; color: #fff; }
.br-color.olive { background: #66A367; color: #fff; }
.br-color .label {
    font-family: var(--font-display); font-style: italic;
    font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
    opacity: .7;
}
.br-color .name {
    font-family: var(--font-display); font-size: 48px; font-weight: 800;
    letter-spacing: -0.03em; line-height: 1; margin: 8px 0 0;
}
.br-color .hex {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 18px; opacity: .8; margin-top: 14px; letter-spacing: 0.05em;
}
.br-color .desc {
    font-size: 15px; line-height: 1.6;
    max-width: 320px; opacity: .92;
}
.br-color .desc em { font-style: italic; font-weight: 600; }
.br-color .swatch-row { display: flex; gap: 6px; margin-top: 14px; }
.br-color .swatch-row .sw {
    width: 40px; height: 40px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,.25);
}
.br-color.blue .swatch-row .sw:nth-child(1) { background: #072f50; }
.br-color.blue .swatch-row .sw:nth-child(2) { background: #095FA1; }
.br-color.blue .swatch-row .sw:nth-child(3) { background: #3b82c6; }
.br-color.blue .swatch-row .sw:nth-child(4) { background: #8eb5d6; }
.br-color.olive .swatch-row .sw:nth-child(1) { background: #3a6f3b; }
.br-color.olive .swatch-row .sw:nth-child(2) { background: #66A367; }
.br-color.olive .swatch-row .sw:nth-child(3) { background: #8fc290; }
.br-color.olive .swatch-row .sw:nth-child(4) { background: #c5dec6; }

.br-colors-foot {
    max-width: 640px; margin: 36px auto 0; text-align: center;
    font-family: var(--font-display); font-style: italic;
    font-size: 17px; color: #5a4a1f; line-height: 1.55;
}
.br-colors-foot strong { font-style: normal; color: #1b2a3a; font-weight: 800; }

/* ===== MISSION BELIEFS GRID (in cream band) ===== */
.br-beliefs {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    margin: 36px auto 0; max-width: 880px;
}
.br-belief {
    background: #fff; border: 1px solid #f0e7d5; border-radius: 16px;
    padding: 26px 28px;
}
.br-belief .num {
    font-family: var(--font-display); font-size: 12px; color: #C9A227;
    letter-spacing: .12em; font-weight: 800; margin-bottom: 8px;
}
.br-belief h4 {
    font-family: var(--font-display); font-size: 19px; font-weight: 800;
    letter-spacing: -0.015em; color: #1b2a3a; margin: 0 0 6px;
}
.br-belief p { margin: 0; font-size: 14px; line-height: 1.55; color: #4a5568; }

/* ===== CLOSING CARD ===== */
.br-close {
    background: #fff; border-radius: 24px; max-width: 720px;
    margin: 0 auto; padding: 64px 56px; text-align: center;
    border: 1px solid #f0e7d5;
}
.br-close .ic { font-size: 36px; margin-bottom: 16px; }
.br-close h3 {
    font-family: var(--font-display); font-size: 40px; font-weight: 800;
    letter-spacing: -0.025em; color: #1b2a3a; margin: 0 0 14px;
}
.br-close h3 em { font-style: italic; color: #66A367; }
.br-close p {
    font-size: 16px; line-height: 1.6; color: #4a5568;
    max-width: 480px; margin: 0 auto 24px;
}
.br-close .sig {
    margin-top: 12px;
    font-family: var(--font-display); font-style: italic;
    font-size: 14px; color: #8A6A1F;
}

/* Footer override — warm cream */
.br-footer { background: #FBF5EA; }

/* ===== RESPONSIVE ===== */
@media (max-width: 720px) {
    .br-cover { padding: 56px 24px 64px; }
    .br-cover h1 { font-size: 56px; }
    .br-cover .lede { font-size: 18px; }

    .br-sec, .br-sec.dark, .br-sec.cream { padding: 56px 24px; }
    .br-h2 { font-size: 36px; }

    .br-fish-stage { grid-template-columns: 1fr; gap: 32px; }
    .br-fish-card { max-width: 280px; margin: 0 auto; }

    .br-colors { grid-template-columns: 1fr; }
    .br-color { padding: 40px 32px; min-height: auto; }
    .br-color .name { font-size: 36px; }

    .br-beliefs { grid-template-columns: 1fr; }
    .br-def { padding: 28px 24px; }
    .br-def .word { font-size: 56px; }

    .br-close { padding: 44px 28px; }
    .br-close h3 { font-size: 30px; }
}