/* ═══════════════════════════════════════════════════════════════
   Morehead's Better Brains — Version 2 "Illustrated"
   Loads AFTER /assets/site.css. Adds the badge, portraits,
   engraved ornaments, drop caps, and ghost ampersands.
   ═══════════════════════════════════════════════════════════════ */

/* Laid-paper texture over the base paper color */
body {
    background-image: repeating-linear-gradient(
        0deg,
        rgba(32, 36, 44, 0.016) 0px,
        rgba(32, 36, 44, 0.016) 1px,
        transparent 1px,
        transparent 4px
    );
}

/* ─── Badge logo ─── */
.badge-large {
    width: clamp(120px, 15vw, 168px);
    height: auto;
    display: block;
    margin: 0 auto 1.3rem;
}
.mark-compact {
    width: 40px;
    height: 40px;
    flex: none;
}
.wordmark-lockup {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
}
.wordmark-lockup .wordmark { white-space: normal; line-height: 1.1; }

/* ─── Portrait frames ─── */
.portrait-arch {
    display: block;
    width: 100%;
    border-radius: 999px 999px 8px 8px;
    border: 1px solid var(--line);
    padding: 10px;
    background: var(--card);
    box-shadow: 0 14px 30px rgba(32, 36, 44, 0.12);
}
.portrait-arch img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 992px 992px 4px 4px;
}
.portrait-plain {
    display: block;
    width: 100%;
    border: 1px solid var(--line);
    padding: 10px;
    background: var(--card);
    border-radius: 6px;
    box-shadow: 0 14px 30px rgba(32, 36, 44, 0.12);
}
.portrait-plain img { display: block; width: 100%; height: auto; border-radius: 3px; }
.placeholder-note {
    display: block;
    margin-top: 0.55rem;
    text-align: center;
    font-family: 'Archivo', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* Index intro: photo + text side by side */
.intro-duo {
    max-width: 940px;
    margin: 0 auto;
    padding: 3.6rem 1.5rem 3rem;
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 2.8rem;
    align-items: center;
}
.intro-duo .intro-strip { padding: 0; margin: 0; max-width: none; text-align: left; }
.intro-duo .credentials { justify-content: flex-start; }
@media (max-width: 760px) {
    .intro-duo { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
    .intro-duo .portrait-arch { max-width: 240px; margin: 0 auto; }
    .intro-duo .intro-strip { text-align: center; }
    .intro-duo .credentials { justify-content: center; }
}

/* Practice about / writing invite portraits */
.about-duo {
    display: grid;
    grid-template-columns: 215px minmax(0, 1fr);
    gap: 2.2rem;
    align-items: start;
}
@media (max-width: 640px) {
    .about-duo { grid-template-columns: minmax(0, 1fr); }
    .about-duo .portrait-arch, .about-duo .portrait-plain { max-width: 230px; margin: 0 auto; }
}

/* ─── Engraved flourish divider ─── */
.flourish {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin: 0.4rem 0 1.2rem;
}
.flourish::before, .flourish::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--line);
}
.flourish svg { width: 26px; height: 26px; flex: none; }

/* ─── Drop caps for the essayistic openings ─── */
.dropcap > p:first-of-type::first-letter {
    font-family: 'Besley', serif;
    font-weight: 700;
    font-size: 3.3em;
    line-height: 0.82;
    float: left;
    padding: 0.06em 0.14em 0 0;
    color: var(--spruce);
}
.side-writing .dropcap > p:first-of-type::first-letter { color: var(--oxblood); }

/* ─── Doors: ghost ampersand + engraved corner ─── */
.door::after {
    content: '&';
    position: absolute;
    top: -0.28em;
    right: -0.04em;
    font-family: 'Besley', serif;
    font-style: italic;
    font-weight: 800;
    font-size: 12.5rem;
    line-height: 1;
    color: rgba(244, 241, 232, 0.07);
    pointer-events: none;
}
.door-practice::after {
    right: auto;
    left: -0.04em;
}

/* ─── Page-hero neuron etching ─── */
.page-hero { position: relative; overflow: hidden; }
.hero-neuron {
    position: absolute;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
    width: 330px;
    opacity: 0.14;
    pointer-events: none;
}
.hero-practice .hero-neuron { color: var(--spruce-deep); }
.hero-writing .hero-neuron { color: var(--oxblood-deep); }
.hero-neutral .hero-neuron { color: var(--brass); }
.page-hero .inner { position: relative; z-index: 1; }
@media (max-width: 900px) { .hero-neuron { display: none; } }

/* ─── Pull quote (writing page) ─── */
.pull-quote {
    font-family: 'Besley', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 1.35rem;
    line-height: 1.45;
    color: var(--oxblood-deep);
    border-left: none;
    text-align: center;
    max-width: 30em;
    margin: 1.8rem auto 0.4rem;
    padding: 0 1rem;
}
.pull-quote-attr {
    text-align: center;
    font-family: 'Archivo', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.6rem;
}

/* ─── Masthead tweaks ─── */
.masthead { padding-top: 2.6rem; }
.masthead .byline .rule-dot { color: var(--brass); }

/* ─── Footer badge ─── */
.footer-badge { width: 74px; height: 74px; margin-bottom: 0.9rem; opacity: 0.9; }

/* ═══ Shared with v1 (also defined here for v2-only loads) ═══ */
.powered-by {
    font-family: 'Archivo', sans-serif;
    text-decoration: none;
    color: #9aa1ab;
}
.powered-by strong { color: #e8eaee; font-weight: 700; }
.powered-by:hover { color: #ffffff; }
.baseline-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.4rem;
    flex-wrap: wrap;
}

.version-switch {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 350;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #23282f;
    color: #f4f1e8;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(32, 36, 44, 0.35);
    transition: transform 0.4s ease;
}
.version-switch:hover { transform: rotate(45deg); color: #ffffff; }
.version-switch svg { width: 22px; height: 22px; }