@import url('/personal-site/styles.css');

:root {
    --ink: #121f2b;
    --paper: #fff;
    --muted: #51616d;
    --gold: #ad8446;
    --line: #dce1e5;
    --dark: #121f2b;
    --soft: #f1f4f6
}

body {
    font-size: 16px
}

html {
    scroll-padding-top: 120px
}

a {
    text-underline-offset: 5px
}

a:hover {
    color: #8a632d
}

header {
    height: auto;
    min-height: 100px;
    padding: 22px 5%;
    border-bottom: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
    position: sticky;
    top: 0;
    z-index: 100
}

.identity {
    gap: 18px
}

.monogram {
    font: 38px Georgia;
    letter-spacing: 0;
    color: #8d6730;
    border-right: 1px solid var(--line);
    padding-right: 18px;
    width: auto
}

.identity strong {
    font-size: 13px;
    letter-spacing: 1.2px;
    font-weight: 600
}

.identity small {
    font-size: 12px;
    letter-spacing: 1.6px;
    color: var(--muted)
}

nav {
    gap: 22px
}

nav a {
    font-size: 14px;
    color: var(--ink)
}

nav a.nav-cta {
    border: 0;
    border-bottom: 1px solid var(--gold);
    padding: 0 0 4px;
    color: var(--ink)
}

.hero {
    grid-template-columns: 1.08fr 1fr;
    min-height: 690px
}

.copy {
    padding: 74px 8% 64px 9.3%
}

.eyebrow {
    font-size: 13px;
    letter-spacing: 1.9px;
    color: #8a632d
}

.hero .eyebrow {
    color: #d4b981
}

.hero h1 {
    font-size: clamp(46px, 4.5vw, 78px);
    letter-spacing: -1.5px;
    margin: 28px 0 26px;
    line-height: 1.1
}

.hero p {
    max-width: 570px
}

.hero .hero-statement {
    font: clamp(29px, 2.6vw, 40px)/1.25 Georgia;
    margin-bottom: 26px;
    color: #f6f4ef
}

.hero-statement em {
    color: #d4b981
}

.hero .hero-bio {
    font-size: 18px;
    line-height: 1.75;
    color: #d3dbe1
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 30px
}

.btn {
    justify-content: center;
    padding: 13px 20px;
    background: #d4b981;
    color: #14212d;
    border-color: #d4b981;
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 0;
    margin-top: 18px
}

.btn:hover {
    background: #e2c995
}

.btn.alt {
    border-color: #8d9aa3
}

.hero-actions .btn {
    margin: 0
}

.small-note {
    font-size: 14px !important;
    line-height: 1.7;
    color: #b8c5ce !important;
    letter-spacing: 0
}

.hero figure {
    min-height: 690px
}

.hero figure img {
    object-position: center top
}

.hero figure:after {
    display: none
}

.portrait-note {
    bottom: 20px;
    left: 26px;
    background: #121f2be6;
    padding: 7px 12px;
    font-size: 12px;
    letter-spacing: 1.5px
}

.metrics {
    padding: 34px 5%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: white
}

.metrics div {
    border-color: var(--line);
    padding-left: 24px
}

.metrics small {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 9px
}

section {
    padding: 92px 7%
}

.sectionhead {
    grid-template-columns: 1fr 1fr;
    gap: 8%;
    margin: 22px 0 42px
}

.sectionhead h2 {
    font-size: clamp(32px, 3.1vw, 49px);
    letter-spacing: -.8px
}

.sectionhead p {
    font-size: 17px
}

.grid {
    gap: 32px
}

.g3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

article {
    padding: 25px 0 15px;
    min-width: 0
}

article h3 {
    font-size: 28px;
    margin: 16px 0
}

.number {
    font-size: 13px;
    letter-spacing: 1.2px;
    color: #806235;
    line-height: 1.7
}

article p {
    font-size: 16px;
    line-height: 1.8;
    margin-top: 12px;
    max-width: none
}

.dark .eyebrow {
    color: #d4b981
}

.dark p,
.dark .sectionhead p {
    color: #c6d0d8
}

.dark article {
    border-color: #465360
}

.text-link {
    display: inline-block;
    font-size: 15px;
    margin-top: 21px;
    padding-bottom: 4px
}

.career-list article {
    display: grid;
    grid-template-columns: .55fr 1fr 1.3fr;
    gap: 28px;
    align-items: start;
    padding: 28px 0
}

.career-list h3 {
    font-size: 27px;
    margin: 0
}

.career-list p {
    margin: 0
}

.career-list span {
    font-size: 14px;
    color: #d4b981
}

.education-line {
    margin-top: 30px;
    font-size: 15px
}

#building .company-card {
    background: #fff;
    border-color: var(--line);
    padding: 28px
}

.company-card .company-link {
    font-size: 15px;
    margin-top: auto;
    padding-top: 22px
}

.company-access-note {
    font-size: 14px
}

#books article p em {
    font-family: Georgia;
    font-size: 20px;
    color: #6c512a
}

#ideas {
    background: #f1f4f6
}

#ideas h3 a {
    text-decoration: none
}

#ideas h3 a:hover {
    text-decoration: underline
}

.legacy-impact {
    background: #193e38
}

.legacy-impact .eyebrow,
.legacy-impact .number {
    color: #dcc491
}

.legacy-pillars h3 {
    font-size: 24px
}

.legacy-purpose h3 {
    font-size: 31px
}

.contact-layout {
    grid-template-columns: 1fr 1fr;
    gap: 10%;
    margin-top: 30px
}

.contact-layout h2 {
    font-size: clamp(38px, 4.2vw, 65px)
}

.gold {
    color: #d4b981
}

.contact-routes a {
    padding: 18px 0;
    font-size: 16px
}

.footer {
    padding: 30px 5%;
    background: #0e1923;
    color: #c5cdd3;
    font-size: 12px;
    letter-spacing: .7px
}

.footer a {
    color: white
}

.book-wordmark {
    font-size: 20px;
    letter-spacing: 1px
}

.book-wordmark span {
    color: #8a632d
}

.book-hero {
    grid-template-columns: 1.1fr .9fr;
    gap: 9%;
    min-height: 680px
}

.book-hero .eyebrow {
    color: #d4b981
}

.book-hero p {
    color: #d4dce2;
    font-size: 18px
}

.book-hero .author {
    font-size: 14px
}

.quote {
    font-size: 30px
}

.excerpt {
    max-width: 820px
}

.excerpt p {
    font-size: 21px
}

.chapter-list article {
    grid-template-columns: 1fr 1.3fr;
    gap: 30px
}

.chapter-list article:before {
    display: none
}

.chapter-list h3 {
    margin: 0;
    font-size: 27px
}

.chapter-list article p {
    grid-column: auto;
    margin: 0
}

.essay {
    max-width: 940px;
    margin: auto;
    padding: 60px 6% 85px
}

.essay>.eyebrow {
    margin-top: 42px
}

.essay h1,
.insights-index h1 {
    font-size: clamp(37px, 4.2vw, 63px);
    letter-spacing: -1px;
    margin: 24px 0
}

.byline {
    font-size: 14px;
    color: var(--muted);
    margin: 24px 0
}

.essay-intro {
    font: 24px/1.55 Georgia;
    color: #344b5b;
    margin: 30px 0
}

.essay h2 {
    font-size: 29px;
    margin: 36px 0 17px
}

.essay>p:not(.byline):not(.essay-intro) {
    font-size: 18px;
    line-height: 1.85;
    color: #344550
}

.essay-cta {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 6px 0 32px;
    margin-top: 46px
}

.related {
    margin-top: 36px
}

.related p {
    margin: 12px 0
}

.insights-index {
    max-width: 1150px;
    margin: auto
}

.insights-index .essay-intro {
    max-width: 770px
}

.insights-rows article {
    padding: 35px 0
}

.insights-rows h2 {
    font-size: 33px;
    margin: 14px 0
}

.insights-rows h2 a {
    text-decoration: none
}

.insights-rows h2 a:hover {
    text-decoration: underline
}

.insights-rows p {
    max-width: 850px
}

@media(min-width:1700px) {

    header,
    section,
    .metrics,
    .footer {
        padding-left: max(7%, calc((100% - 1460px)/2));
        padding-right: max(7%, calc((100% - 1460px)/2))
    }

    .hero {
        padding: 0
    }

    .essay {
        padding-left: 45px;
        padding-right: 45px
    }

    .insights-index {
        padding-left: 50px;
        padding-right: 50px
    }
}

@media(max-width:1180px) {
    .desktop-nav {
        display: none
    }

    .mobile-menu {
        display: block
    }

    .mobile-menu summary {
        padding: 8px 16px;
        border-color: var(--line);
        font-size: 15px
    }

    .mobile-menu nav {
        top: 100%;
        background: white;
        border-bottom: 1px solid var(--line);
        padding: 24px 5%;
        z-index: 20
    }

    .legacy-pillars {
        grid-template-columns: repeat(3, minmax(0, 1fr))
    }

    .hero h1 {
        font-size: 51px
    }

    .hero figure {
        min-height: 670px
    }

    .career-list article {
        grid-template-columns: .6fr 1.2fr 1.5fr;
        gap: 22px
    }
}

@media(max-width:1180px) {
    .mobile-menu:not([open]) nav {
        display: none
    }
}

@media(max-width:800px) {
    header {
        min-height: 90px;
        padding: 18px 5%
    }

    .identity {
        gap: 12px
    }

    .identity strong {
        font-size: 12px;
        letter-spacing: .6px
    }

    .identity small {
        font-size: 12px;
        letter-spacing: 1px
    }

    .monogram {
        font-size: 32px;
        padding-right: 12px
    }

    .hero {
        grid-template-columns: 1fr
    }

    .copy {
        padding: 58px 6%
    }

    .hero h1 {
        font-size: clamp(46px, 9.5vw, 68px)
    }

    .hero figure {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        min-height: 540px;
        aspect-ratio: 1.15;
        max-height: 700px
    }

    .hero figure img {
        object-position: center top
    }

    .metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .metrics div:nth-child(3) {
        border: 0;
        padding-left: 0
    }

    .metrics b {
        font-size: 23px
    }

    section {
        padding: 65px 6%
    }

    .sectionhead {
        grid-template-columns: 1fr;
        gap: 25px
    }

    .sectionhead h2 {
        font-size: 37px
    }

    .g3,
    .g4,
    .company-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .career-list article {
        grid-template-columns: 1fr
    }

    .career-list h3 {
        font-size: 29px
    }

    .company-card {
        padding: 24px
    }

    .legacy-pillars {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .contact-layout {
        grid-template-columns: 1fr;
        gap: 38px
    }

    .footer {
        flex-wrap: wrap
    }

    .book-hero {
        grid-template-columns: 1fr;
        gap: 44px
    }

    .book-hero h1 {
        font-size: 54px
    }

    .book-object {
        max-width: 290px
    }

    .chapter-list article {
        grid-template-columns: 1fr;
        gap: 15px
    }

    .essay {
        padding: 45px 6% 65px
    }

    .essay>p:not(.byline):not(.essay-intro) {
        font-size: 17px
    }
}

@media(max-width:520px) {

    .g2,
    .g3,
    .g4,
    .legacy-pillars,
    .company-grid {
        grid-template-columns: 1fr
    }

    .hero figure {
        min-height: 470px
    }

    .identity strong {
        max-width: 190px
    }

    .identity small {
        font-size: 12px;
        letter-spacing: .2px
    }

    .monogram {
        display: none
    }

    .metrics {
        gap: 25px 18px
    }

    .metrics div {
        padding-left: 15px
    }

    .hero-actions {
        flex-direction: column;
        align-items: flex-start
    }

    .hero h1 {
        letter-spacing: -1px
    }

    .sectionhead h2 {
        font-size: 34px
    }

    .book-hero h1 {
        font-size: 45px
    }

    .footer span {
        display: block;
        width: 100%
    }

    .essay h1 {
        font-size: 38px
    }

    .essay-intro {
        font-size: 23px
    }
}

@media(min-width:801px) {
    section {
        padding-top: 64px;
        padding-bottom: 64px
    }
}@media(min-width:801px){#leadership{padding-top:40px;padding-bottom:40px;scroll-margin-top:0}#leadership .sectionhead{margin:12px 0 26px;align-items:end}#leadership .sectionhead h2{font-size:clamp(30px,2.4vw,40px);line-height:1.12}#leadership .sectionhead p{max-width:520px;justify-self:end;border-left:2px solid #d4b981;padding-left:22px;font-size:16px;line-height:1.65;color:#dfe5ea}#leadership .career-list{border-top:1px solid rgba(212,185,129,.45)}#leadership .career-list article{grid-template-columns:.32fr 1fr 1.25fr;gap:40px;align-items:baseline;padding:18px 0;border-top:0;border-bottom:1px solid #2c3a47;transition:background .2s}#leadership .career-list article:hover{background:rgba(255,255,255,.025)}#leadership .career-list article:hover h3{color:#d4b981}#leadership .career-list span{font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase}#leadership .career-list h3{font-size:22px;line-height:1.25;text-wrap:balance;transition:color .2s}#leadership .career-list p{max-width:58ch;font-size:15px;line-height:1.6}#leadership .education-line{display:flex;gap:40px;align-items:baseline;margin-top:20px;font-size:14px;color:#dfe5ea}#leadership .education-line:before{content:"Education";flex:0 0 calc((100% - 80px)*.32/2.57);font-size:12px;font-weight:600;letter-spacing:1.6px;text-transform:uppercase;color:#d4b981}}