/* ═══════════════════════════════════════════════════════════════
   Morehead's Better Brains — Daniel Morehead MD, PC
   Two sides, one brain: spruce = the practice, oxblood = the writing.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --ribbon-h: 28px;
    --paper: #f6f5f1;
    --card: #ffffff;
    --ink: #20242c;
    --ink-soft: #4d5461;
    --line: #ddd9d0;
    --spruce: #29544a;
    --spruce-deep: #1d3f37;
    --spruce-text: #2c5c50;
    --spruce-pale: #e7efea;
    --oxblood: #6e3130;
    --oxblood-deep: #522322;
    --oxblood-text: #7d3a36;
    --oxblood-pale: #f2e9e7;
    --brass: #a8823f;
    --focus: #1a6fb5;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
    font-family: 'Source Serif 4', Georgia, serif;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    padding-top: var(--ribbon-h);
}

::selection { background: var(--spruce-pale); color: var(--spruce-deep); }

a { color: var(--spruce-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--spruce-deep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

/* ─── Draft ribbon (remove on approval) ─── */
.draft-ribbon {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--ribbon-h);
    z-index: 400;
    background: #e9dfc4;
    color: #4a3a15;
    font-family: 'Archivo', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── Header ─── */
.site-header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: var(--ribbon-h);
    z-index: 200;
}
.site-header .bar {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0.8rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.wordmark {
    font-family: 'Besley', serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.wordmark:hover { color: var(--ink); }
.wordmark .apostrophe { color: var(--brass); }
.site-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.site-nav a {
    font-family: 'Archivo', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-soft);
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a.active-practice { color: var(--spruce-text); border-bottom-color: var(--spruce); }
.site-nav a.active-writing { color: var(--oxblood-text); border-bottom-color: var(--oxblood); }
.site-nav a.active-neutral { color: var(--ink); border-bottom-color: var(--brass); }

/* ─── Index masthead ─── */
.masthead {
    text-align: center;
    padding: 3.4rem 1.5rem 2.4rem;
}
.masthead h1 {
    font-family: 'Besley', serif;
    font-weight: 800;
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    line-height: 1.08;
    letter-spacing: 0.005em;
}
.masthead h1 .apostrophe { color: var(--brass); }
.masthead .byline {
    margin-top: 0.9rem;
    font-family: 'Archivo', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.masthead .byline .dot { color: var(--brass); padding: 0 0.35rem; }

/* ─── The diptych: two doors, one brain ─── */
.diptych {
    position: relative;
    display: flex;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 1.5rem;
    gap: 8px;
    min-height: 470px;
}
.door {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2.6rem 2.4rem;
    border-radius: 6px;
    text-decoration: none;
    color: #f4f1e8;
    transition: flex-grow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}
.door:hover, .door:focus-visible { flex-grow: 1.3; color: #ffffff; }
.door-practice { background: linear-gradient(160deg, var(--spruce) 0%, var(--spruce-deep) 100%); }
.door-writing  { background: linear-gradient(200deg, var(--oxblood) 0%, var(--oxblood-deep) 100%); }
.door .eyebrow {
    font-family: 'Archivo', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0.7rem;
}
.door h2 {
    font-family: 'Besley', serif;
    font-weight: 700;
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    line-height: 1.12;
    margin-bottom: 0.8rem;
}
.door p {
    font-size: 0.98rem;
    line-height: 1.65;
    max-width: 34em;
    opacity: 0.88;
    margin-bottom: 1.3rem;
}
.door .enter {
    font-family: 'Archivo', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(244, 241, 232, 0.5);
    align-self: flex-start;
    padding-bottom: 0.2rem;
}
.door:hover .enter { border-bottom-color: #ffffff; }

/* The engraved brain straddling the seam */
.brain-seam {
    position: absolute;
    top: 26px;
    left: 50%;
    transform: translateX(-50%);
    width: min(250px, 24vw);
    pointer-events: none;
    z-index: 5;
}
.brain-seam .hemi { transition: opacity 0.4s ease; opacity: 0.5; }
.diptych:has(.door-practice:hover) .hemi-left { opacity: 1; }
.diptych:has(.door-writing:hover) .hemi-right { opacity: 1; }

@media (max-width: 760px) {
    .diptych { flex-direction: column; min-height: 0; }
    .door { flex: none; min-height: 0; justify-content: flex-start; padding: 2.2rem 1.8rem; }
    .door:hover, .door:focus-visible { flex-grow: 1; }
    .brain-seam { display: none; }
    .site-nav { gap: 0.9rem 1.1rem; }
}

/* ─── Index intro strip ─── */
.intro-strip {
    max-width: 780px;
    margin: 0 auto;
    padding: 3.4rem 1.5rem 3rem;
    text-align: center;
}
.intro-strip p.lede { font-size: 1.14rem; }
.credentials {
    margin-top: 1.6rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.6rem;
}
.credentials span {
    font-family: 'Archivo', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.35rem 0.85rem;
}

/* ─── Page hero (subpages) ─── */
.page-hero {
    padding: 3rem 1.5rem 2.2rem;
    border-bottom: 1px solid var(--line);
}
.page-hero .inner { max-width: 1140px; margin: 0 auto; }
.page-hero .eyebrow {
    font-family: 'Archivo', sans-serif;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}
.page-hero h1 {
    font-family: 'Besley', serif;
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 3.1rem);
    line-height: 1.1;
    max-width: 18em;
}
.page-hero p.standfirst {
    margin-top: 1rem;
    font-size: 1.12rem;
    max-width: 42em;
    color: var(--ink-soft);
}
.hero-practice { background: var(--spruce-pale); }
.hero-practice .eyebrow { color: var(--spruce-text); }
.hero-writing { background: var(--oxblood-pale); }
.hero-writing .eyebrow { color: var(--oxblood-text); }
.hero-neutral { background: var(--card); }
.hero-neutral .eyebrow { color: var(--brass); }

/* ─── Content layout with chapter nav ─── */
.chaptered {
    max-width: 1140px;
    margin: 0 auto;
    padding: 2.6rem 1.5rem 3.5rem;
    display: grid;
    grid-template-columns: 215px minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}
.contents {
    position: sticky;
    top: calc(var(--ribbon-h) + 74px);
}
.contents .label {
    font-family: 'Archivo', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 0.7rem;
}
.contents ol { list-style: none; border-left: 1px solid var(--line); }
.contents li a {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--ink-soft);
    text-decoration: none;
    padding: 0.32rem 0 0.32rem 0.9rem;
    border-left: 2px solid transparent;
    margin-left: -1.5px;
    line-height: 1.35;
}
.contents li a:hover { color: var(--ink); border-left-color: var(--brass); }
@media (max-width: 960px) {
    .chaptered { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .contents { display: none; }
}

.prose { max-width: 46rem; }
.prose section { padding: 1.4rem 0 1.8rem; }
.prose section + section { border-top: 1px solid var(--line); }
.prose h2 {
    font-family: 'Besley', serif;
    font-weight: 700;
    font-size: 1.65rem;
    line-height: 1.2;
    margin-bottom: 1rem;
}
.prose h3 {
    font-family: 'Archivo', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin: 1.6rem 0 0.5rem;
}
.prose p + p { margin-top: 0.9rem; }
.prose ul { padding-left: 1.2rem; margin: 0.7rem 0; }
.prose li + li { margin-top: 0.35rem; }

/* ─── Values grid ─── */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    gap: 0.9rem;
    margin-top: 1.2rem;
}
.value-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 3px solid var(--spruce);
    border-radius: 4px;
    padding: 1.25rem 1.35rem;
}
.value-card h3 {
    font-family: 'Archivo', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--spruce-text);
    margin: 0 0 0.5rem;
}
.value-card p { font-size: 0.96rem; line-height: 1.65; }

/* ─── Course-of-treatment timeline (a real sequence) ─── */
.stages { list-style: none; counter-reset: stage; margin-top: 1.3rem; }
.stages li {
    counter-increment: stage;
    position: relative;
    padding: 0 0 1.5rem 3.2rem;
    border-left: 1px solid var(--line);
    margin-left: 1.1rem;
}
.stages li:last-child { border-left-color: transparent; padding-bottom: 0.2rem; }
.stages li::before {
    content: counter(stage);
    position: absolute;
    left: -1.15rem;
    top: -0.15rem;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--spruce);
    color: #f4f1e8;
    font-family: 'Besley', serif;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.stages h3 {
    font-family: 'Besley', serif;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    margin: 0 0 0.35rem;
}
.stages p { font-size: 0.98rem; }

/* ─── Conditions panels ─── */
.conditions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.9rem;
    margin-top: 1.2rem;
}
.condition-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1.4rem 1.5rem;
}
.condition-panel h3 { margin-top: 0; }
.condition-panel.treat h3 { color: var(--spruce-text); }
.condition-panel.limits h3 { color: var(--ink-soft); }
.condition-panel ul { list-style: none; padding: 0; }
.condition-panel li { padding-left: 1.15rem; position: relative; font-size: 0.97rem; }
.condition-panel.treat li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.62em;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--spruce);
}
.condition-panel.limits li::before {
    content: '';
    position: absolute;
    left: 0; top: 0.72em;
    width: 8px; height: 2px;
    background: var(--ink-soft);
}
.condition-panel .note { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 0.8rem; }

/* ─── Callout boxes ─── */
.callout {
    background: var(--spruce-pale);
    border-left: 3px solid var(--spruce);
    border-radius: 4px;
    padding: 1.1rem 1.3rem;
    margin: 1.2rem 0;
    font-size: 0.97rem;
}
.callout.crisis { background: var(--oxblood-pale); border-left-color: var(--oxblood); }
.callout strong { font-family: 'Archivo', sans-serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-bottom: 0.3rem; }

/* ─── Writing page: the book ─── */
.book-feature {
    display: grid;
    grid-template-columns: 205px minmax(0, 1fr);
    gap: 2.4rem;
    align-items: center;
    margin-top: 0.6rem;
}
.book-cover {
    aspect-ratio: 2 / 3;
    background: linear-gradient(155deg, #7d3937 0%, var(--oxblood-deep) 100%);
    border-radius: 3px 8px 8px 3px;
    box-shadow: 12px 14px 28px rgba(32, 36, 44, 0.22), inset 6px 0 8px -6px rgba(0,0,0,0.5);
    padding: 1.5rem 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #f4ecdd;
    transform: rotate(-2deg);
}
.book-cover .b-rule { border-top: 1px solid rgba(244, 236, 221, 0.45); padding-top: 0.7rem; }
.book-cover .b-title {
    font-family: 'Besley', serif;
    font-weight: 800;
    font-size: 1.28rem;
    line-height: 1.18;
}
.book-cover .b-sub {
    font-family: 'Archivo', sans-serif;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-top: 0.55rem;
    line-height: 1.5;
}
.book-cover .b-author {
    font-family: 'Archivo', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
@media (max-width: 640px) {
    .book-feature { grid-template-columns: minmax(0, 1fr); }
    .book-cover { max-width: 190px; }
}

/* ─── Writing page: essay list ─── */
.essay-list { list-style: none; margin-top: 0.6rem; }
.essay-list li {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 1.2rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line);
    align-items: baseline;
}
.essay-list .when {
    font-family: 'Archivo', sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.essay-list a {
    font-family: 'Besley', serif;
    font-weight: 600;
    font-size: 1.08rem;
    line-height: 1.35;
    color: var(--ink);
    text-decoration: none;
}
.essay-list a:hover { color: var(--oxblood-text); text-decoration: underline; text-decoration-thickness: 1px; }
.essay-list .venue {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 0.15rem;
}
@media (max-width: 560px) {
    .essay-list li { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
}

/* Writing-side accents */
.side-writing a { color: var(--oxblood-text); }
.side-writing a:hover { color: var(--oxblood-deep); }
.side-writing .value-card { border-left-color: var(--oxblood); }
.side-writing .value-card h3 { color: var(--oxblood-text); }
.side-writing ::selection { background: var(--oxblood-pale); color: var(--oxblood-deep); }

/* ─── Two-column simple lists (speaking) ─── */
.twin-lists {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.9rem;
    margin-top: 1.2rem;
}

/* ─── Fee table ─── */
.fee-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 0.4rem; background: var(--card); border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.fee-table th, .fee-table td { text-align: left; padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--line); font-size: 0.98rem; }
.fee-table th {
    font-family: 'Archivo', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    background: var(--paper);
}
.fee-table td.amount { font-family: 'Besley', serif; font-weight: 700; white-space: nowrap; }
.fee-table tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; }

/* ─── Footer ─── */
.site-footer {
    background: #23282f;
    color: #cfd3d9;
    margin-top: 2rem;
}
.site-footer .inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 3rem 1.5rem 2.2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 2rem;
}
.site-footer h3 {
    font-family: 'Archivo', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9aa1ab;
    margin-bottom: 0.7rem;
}
.site-footer p { font-size: 0.95rem; line-height: 1.7; }
.site-footer a { color: #e8eaee; }
.site-footer a:hover { color: #ffffff; }
.site-footer .baseline {
    border-top: 1px solid #3a4049;
    text-align: center;
    padding: 1.2rem 1.5rem;
    font-family: 'Archivo', sans-serif;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    color: #9aa1ab;
}

/* ─── Powered by / version switch (shared v1+v2) ─── */
.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; }
.powered-by { display: inline-flex; align-items: center; gap: 0.4rem; }
.powered-cape { width: 20px; height: 20px; display: block; object-fit: contain; }