:root{
    --ink:#101820;
    --paper:#f5f4f0;
    --white:#fff;
    --line:#d7d8d4;
    --orange:#ef8f32;
    --green:#28773e;
    --muted:#5f686b
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'DM Sans',Arial,sans-serif
}
a{
    color:inherit;
    text-decoration:none
}
button{
    font:inherit
}
img{
    max-width:100%
}
h1,h2,h3,p{
    margin-top:0
}
.skip{
    position:absolute;
    left:-9999px;
    top:0;
    background:#fff;
    padding:12px;
    z-index:10
}
.skip:focus{
    left:10px
}
.topline{
    height:32px;
    background:#101820;
    color:#bfc6c7;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 4.5%;
    font-size:10px;
    font-weight:700;
    letter-spacing:.18em
}
.site-header{
    height:92px;
    display:flex;
    align-items:center;
    gap:34px;
    padding:0 4.5%;
    background:#fff;
    border-bottom:1px solid #e5e5e2;
    position:relative;
    z-index:5
}
.brand{
    display:flex;
    align-items:center;
    gap:13px;
    min-width:265px
}
.brand-mark{
    display:block;
    width:54px;
    height:54px;
    flex:none;
    background:#fff url('brand-board.jpg') no-repeat;
    background-size:310px 207px;
    background-position:-26px -10px;
    border-radius:50%
}
.brand-words{
    font-size:18px;
    line-height:.88;
    font-weight:700;
    letter-spacing:-.045em
}
.brand-words small{
    display:block;
    font-size:7px;
    letter-spacing:.25em;
    line-height:2.8;
    color:var(--muted)
}
nav{
    display:flex;
    gap:27px;
    margin-left:auto
}
nav a{
    font-size:13px;
    font-weight:700;
    white-space:nowrap
}
nav a:hover,.text-link:hover{
    color:#ac5414
}
.header-listen{
    margin-left:15px;
    padding:14px 18px;
    background:var(--ink);
    color:#fff;
    font-size:12px;
    font-weight:700;
    white-space:nowrap
}
.header-listen span{
    margin-left:12px;
    color:var(--orange)
}
.menu-button{
    display:none
}
.hero{
    min-height:660px;
    display:grid;
    grid-template-columns:1.04fr .96fr;
    background:var(--ink);
    color:#fff
}
.hero-left{
    padding:80px 7% 45px 8.7%;
    display:flex;
    flex-direction:column;
    align-items:flex-start
}
.eyebrow,.section-kicker{
    font-size:11px;
    letter-spacing:.18em;
    font-weight:700
}
.eyebrow{
    color:#d5dad9;
    display:flex;
    align-items:center;
    gap:12px
}
.orange-line{
    width:22px;
    height:2px;
    background:var(--orange)
}
.hero h1{
    font-size:clamp(3.5rem,5.45vw,6.1rem);
    letter-spacing:-.065em;
    line-height:1.055;
    max-width:800px;
    margin:31px 0 28px;
    font-weight:700
}
.hero em,.section-heading em,.story-copy em,.book-copy em{
    font-family:'Libre Baskerville',Georgia,serif;
    font-weight:400;
    letter-spacing:-.07em
}
.hero em{
    color:var(--orange)
}
.hero p{
    font-size:17px;
    line-height:1.65;
    color:#bec8ca;
    max-width:545px
}
.hero-actions{
    display:flex;
    align-items:center;
    gap:30px;
    margin-top:20px
}
.button{
    padding:17px 22px;
    font-size:13px;
    font-weight:700
}
.button span{
    margin-left:22px
}
.button.light{
    background:#fff;
    color:var(--ink)
}
.text-link{
    font-size:13px;
    font-weight:700;
    border-bottom:1px solid #859093;
    padding-bottom:5px
}
.hero-byline{
    margin-top:auto;
    padding-top:45px;
    font-size:10px;
    letter-spacing:.15em;
    color:#a9b5b8
}
.hero-byline strong{
    color:#fff;
    margin-left:10px
}
.hero-right{
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    padding:28px 6% 30px 0
}
.hero-art{
    position:relative;
    flex:1;
    min-height:540px;
    background:#e9e8e2;
    overflow:hidden;
    color:#222
}
.hero-art:before{
    content:'';
    position:absolute;
    width:80%;
    aspect-ratio:1;
    border:1px solid #b8bcb7;
    border-radius:50%;
    top:7%;
    left:10%
}
.hero-art:after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(128deg,transparent 44%,rgba(40,119,62,.15) 44.2%,transparent 45%),linear-gradient(45deg,transparent 72%,rgba(239,143,50,.22) 72.2%,transparent 73%);
    pointer-events:none
}
.art-grid{
    position:absolute;
    inset:0;
    background-image:linear-gradient(#bfc1bd55 1px,transparent 1px),linear-gradient(90deg,#bfc1bd55 1px,transparent 1px);
    background-size:46px 46px;
    mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)
}
.hero-logo{
    position:absolute;
    width:250px;
    height:250px;
    left:50%;
    top:47%;
    transform:translate(-50%,-50%);
    background:#fff url('brand-board.jpg') no-repeat;
    background-size:1280px 853px;
    background-position:-95px -37px;
    filter:contrast(1.15);
    border-radius:50%;
    mix-blend-mode:multiply
}
.art-caption{
    position:absolute;
    bottom:25px;
    left:30px;
    right:30px;
    display:flex;
    justify-content:space-between;
    border-top:1px solid #9fa4a0;
    padding-top:15px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.13em
}
.hero-index{
    display:flex;
    justify-content:space-between;
    margin:17px 0 0 28px;
    font-size:10px;
    letter-spacing:.12em;
    color:#aeb8ba
}
.ticker{
    overflow:hidden;
    background:#eeebe4;
    border-bottom:1px solid #d7d7d2;
    padding:14px 0;
    white-space:nowrap;
    text-align:center;
    font-size:11px;
    font-weight:700;
    letter-spacing:.17em
}
.ticker div{
    min-width:1000px
}
.ticker i{
    font-size:7px;
    color:var(--orange);
    font-style:normal;
    margin:0 18px
}
.section-wrap{
    max-width:1440px;
    margin:auto;
    padding-left:6%;
    padding-right:6%
}
.intro{
    display:grid;
    grid-template-columns:1fr 2.5fr 1fr;
    gap:50px;
    padding-top:105px;
    padding-bottom:105px;
    align-items:start
}
.section-kicker{
    color:#ba5e18;
    white-space:nowrap
}
.intro h2,.section-heading h2,.story-copy h2,.book-copy h2,.connect-inner h2{
    font-size:clamp(2.5rem,4.4vw,4.8rem);
    line-height:1.13;
    letter-spacing:-.06em
}
.intro h2{
    max-width:780px;
    margin-bottom:24px
}
.intro p{
    font-size:17px;
    line-height:1.7;
    color:#4d585d;
    max-width:680px;
    margin:0
}
.intro-side{
    border-left:2px solid var(--orange);
    padding-left:20px;
    font-size:11px;
    line-height:1.9;
    letter-spacing:.13em;
    color:#6c7372
}
.intro-side strong{
    color:var(--ink)
}
.podcast-section{
    padding-top:90px;
    padding-bottom:110px;
    background:#fff
}
.section-heading{
    display:flex;
    justify-content:space-between;
    gap:50px;
    align-items:end;
    margin-bottom:48px
}
.section-heading h2{
    margin:22px 0 0
}
.section-heading p{
    font-size:16px;
    line-height:1.65;
    color:#5e696b;
    max-width:370px;
    margin:0 0 8px
}
.feature-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px
}
.feature-card{
    background:linear-gradient(145deg,#1e3c44,#101820 66%);
    color:#fff;
    min-height:510px;
    padding:30px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    overflow:hidden
}
.feature-card:before{
    content:'';
    position:absolute;
    width:450px;
    height:450px;
    right:-140px;
    top:-140px;
    border:1px solid #82969866;
    border-radius:50%;
    box-shadow:0 0 0 50px #ffffff08,0 0 0 100px #ffffff08,0 0 0 150px #ffffff08
}
.feature-card:after{
    content:'DR';
    position:absolute;
    right:15px;
    top:95px;
    font-size:200px;
    font-weight:700;
    letter-spacing:-.12em;
    color:#ffffff0a
}
.feature-top,.feature-bottom{
    position:relative;
    z-index:1
}
.feature-top{
    display:flex;
    justify-content:space-between;
    align-items:start;
    font-size:11px;
    letter-spacing:.16em;
    font-weight:700
}
.play-circle{
    width:50px;
    height:50px;
    border:1px solid #fff9;
    border-radius:50%;
    display:grid;
    place-items:center;
    font-size:13px;
    padding-left:3px
}
.feature-bottom>span:first-child{
    font-size:11px;
    letter-spacing:.16em;
    color:var(--orange);
    font-weight:700
}
.feature-card h3{
    font-family:'Libre Baskerville',Georgia,serif;
    font-weight:400;
    font-size:clamp(2rem,3vw,3.4rem);
    line-height:1.22;
    max-width:530px;
    margin:18px 0
}
.feature-card p{
    color:#bfc9c9;
    line-height:1.6;
    max-width:450px
}
.card-action{
    display:inline-block;
    border-top:1px solid #7e9295;
    padding-top:16px;
    margin-top:20px;
    font-size:13px;
    font-weight:700
}
.card-action b{
    margin-left:20px;
    color:var(--orange)
}
.episode-list{
    border-top:1px solid #b9c0bd
}
.list-head{
    display:flex;
    justify-content:space-between;
    padding:18px 0 27px;
    font-size:10px;
    font-weight:700;
    letter-spacing:.14em;
    color:#777e7b
}
.episode-list>a{
    display:grid;
    grid-template-columns:45px 1fr 20px;
    gap:14px;
    align-items:start;
    padding:27px 0;
    border-top:1px solid #dce0dc
}
.episode-list>a:hover strong{
    color:#b75e1f
}
.episode-list strong{
    display:block;
    font-family:'Libre Baskerville',Georgia,serif;
    font-size:20px;
    font-weight:400;
    line-height:1.3
}
.episode-list small{
    display:block;
    margin-top:13px;
    color:#7d8581;
    font-size:10px;
    font-weight:700;
    letter-spacing:.14em
}
.episode-num,.episode-list b{
    color:#bd6425;
    font-size:12px
}
.listen-row{
    display:flex;
    align-items:center;
    gap:20px;
    border-top:1px solid #b9c0bd;
    padding-top:23px;
    font-size:12px;
    font-weight:700
}
.listen-row span{
    font-size:10px;
    letter-spacing:.12em;
    color:#7a817e;
    margin-right:auto
}
.listen-row a{
    text-decoration:underline;
    text-underline-offset:4px
}
.analysis-section{
    background:#ebeae5;
    padding:105px 0 115px
}
.analysis-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border-top:1px solid #bfc3be;
    border-left:1px solid #bfc3be
}
.analysis-card{
    padding:27px 25px;
    min-height:380px;
    border-right:1px solid #bfc3be;
    border-bottom:1px solid #bfc3be;
    display:flex;
    flex-direction:column
}
.tag,.card-no,.card-foot{
    font-size:10px;
    font-weight:700;
    letter-spacing:.12em
}
.tag{
    color:#b25a1d
}
.card-no{
    color:#909995;
    margin-top:44px
}
.analysis-card h3{
    font-family:'Libre Baskerville',Georgia,serif;
    font-size:26px;
    line-height:1.28;
    font-weight:400;
    margin:15px 0
}
.analysis-card p{
    font-size:14px;
    line-height:1.65;
    color:#53605d
}
.analysis-card .rule{
    height:2px;
    width:25px;
    background:var(--orange);
    margin-top:auto;
    margin-bottom:17px
}
.card-foot{
    color:#6b7773
}
.story-section{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:9%;
    padding-top:115px;
    padding-bottom:120px
}
.story-graphic{
    margin-top:32px;
    min-height:520px;
    background:#173039;
    color:#fff;
    padding:36px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    position:relative;
    overflow:hidden
}
.story-graphic:after{
    content:'';
    position:absolute;
    width:410px;
    height:410px;
    border:1px solid #69958988;
    border-radius:50%;
    right:-220px;
    bottom:-200px;
    box-shadow:0 0 0 55px #ffffff09,0 0 0 110px #ffffff08
}
.story-graphic>span{
    font-size:clamp(3rem,5vw,5.8rem);
    font-weight:700;
    line-height:.95;
    letter-spacing:-.08em
}
.story-graphic small{
    font-size:11px;
    letter-spacing:.15em;
    color:#b3c5bf;
    z-index:1
}
.story-copy h2{
    margin:0 0 38px
}
.story-copy p{
    font-size:17px;
    line-height:1.8;
    color:#4e5b5e;
    margin-bottom:22px
}
.story-copy blockquote{
    font-family:'Libre Baskerville',Georgia,serif;
    font-size:23px;
    line-height:1.5;
    border-left:2px solid var(--orange);
    padding-left:24px;
    margin:38px 0
}
.story-sign{
    border-top:1px solid var(--line);
    padding-top:18px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    font-size:12px
}
.story-sign strong{
    letter-spacing:.12em
}
.story-sign span{
    color:#65706d
}
.formats{
    background:#183239;
    color:#fff;
    padding:55px 0 65px
}
.formats .section-kicker{
    color:var(--orange)
}
.format-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    margin-top:35px
}
.format-grid>div{
    border-left:1px solid #718483;
    padding:8px 36px 5px
}
.format-grid>div:first-child{
    padding-left:0;
    border:0
}
.format-grid span{
    font-size:12px;
    color:var(--orange)
}
.format-grid h3{
    font-family:'Libre Baskerville',Georgia,serif;
    font-weight:400;
    font-size:25px;
    margin:30px 0 12px
}
.format-grid p{
    color:#c1cccc;
    line-height:1.6;
    max-width:300px;
    margin:0
}
.book-section{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:12%;
    align-items:center;
    padding-top:130px;
    padding-bottom:130px
}
.book-cover{
    background:#fdfdfb;
    border:1px solid #d1d2ce;
    box-shadow:20px 25px 0 #dddcd5,25px 30px 30px #0002;
    aspect-ratio:.72;
    max-width:410px;
    width:100%;
    padding:32px 28px;
    display:flex;
    flex-direction:column;
    color:#111
}
.book-cover-top{
    font-size:11px;
    font-weight:700;
    letter-spacing:.18em
}
.book-symbol{
    margin:auto;
    text-align:center;
    font-size:100px;
    color:#a5a9a6;
    line-height:1
}
.book-cover-title{
    font-size:clamp(2.2rem,3.5vw,3.8rem);
    font-weight:700;
    line-height:.96;
    letter-spacing:-.075em;
    border-top:2px solid #111;
    padding-top:18px
}
.book-cover-sub{
    font-size:10px;
    letter-spacing:.13em;
    line-height:1.5;
    margin-top:20px
}
.book-copy h2{
    margin:22px 0 32px
}
.book-copy p{
    font-size:17px;
    line-height:1.7;
    color:#4d5a5d;
    max-width:590px
}
.book-copy p strong{
    color:var(--ink)
}
.book-meta{
    display:block;
    border-top:1px solid var(--line);
    margin-top:44px;
    padding-top:20px;
    font-size:11px;
    letter-spacing:.15em;
    font-weight:700
}
.connect-section{
    background:#101820;
    color:#fff;
    padding:90px 0
}
.connect-inner{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10%
}
.connect-inner .section-kicker{
    color:var(--orange)
}
.connect-inner h2{
    margin:24px 0
}
.connect-inner p{
    font-size:17px;
    line-height:1.7;
    color:#bdc7c9;
    max-width:540px
}
.connect-links{
    border-top:1px solid #546267
}
.connect-links a{
    display:flex;
    justify-content:space-between;
    padding:22px 2px;
    border-bottom:1px solid #546267;
    font-size:13px;
    font-weight:700;
    letter-spacing:.12em
}
.connect-links a:hover{
    color:var(--orange)
}
.connect-links b{
    color:var(--orange)
}
footer{
    background:#0b1217;
    color:#fff;
    padding:46px 6% 20px
}
.footer-main,.footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:end
}
.footer-brand{
    font-size:29px;
    line-height:.9;
    letter-spacing:-.07em;
    font-weight:700
}
.footer-main>span,.footer-main>a:last-child,.footer-bottom{
    font-size:10px;
    font-weight:700;
    letter-spacing:.15em;
    color:#9ea9ad
}
.footer-bottom{
    border-top:1px solid #394549;
    margin-top:55px;
    padding-top:18px
}
a:focus-visible,button:focus-visible{
    outline:3px solid var(--orange);
    outline-offset:4px
}
@media(max-width:1100px){
    .site-header{
        gap:15px
    }
    nav{
        gap:15px
    }
    .header-listen{
        display:none
    }
    .intro{
        grid-template-columns:1fr 3fr
    }
    .intro-side{
        display:none
    }
    .analysis-grid{
        grid-template-columns:repeat(2,1fr)
    }
    .hero h1{
        font-size:5vw
    }
}
@media(max-width:760px){
    .topline{
        justify-content:center;
        font-size:9px
    }
    .topline span:last-child{
        display:none
    }
    .site-header{
        height:74px;
        padding:0 5%
    }
    .brand{
        min-width:0
    }
    .brand-mark{
        width:46px;
        height:46px;
        background-size:267px 178px;
        background-position:-22px -8px
    }
    .brand-words{
        font-size:16px
    }
    .menu-button{
        display:flex;
        flex-direction:column;
        gap:6px;
        margin-left:auto;
        padding:10px;
        border:0;
        background:none
    }
    .menu-button span{
        width:24px;
        height:2px;
        background:#111
    }
    nav{
        display:none;
        position:absolute;
        top:74px;
        left:0;
        right:0;
        background:#fff;
        padding:22px 5% 30px;
        box-shadow:0 16px 20px #0002;
        flex-direction:column;
        gap:0
    }
    nav.open{
        display:flex
    }
    nav a{
        padding:14px 0;
        border-bottom:1px solid #ddd
    }
    .hero{
        display:block
    }
    .hero-left{
        padding:65px 6% 40px;
        min-height:620px
    }
    .hero h1{
        font-size:clamp(3.5rem,12vw,5.6rem)
    }
    .hero-right{
        padding:0 6% 25px
    }
    .hero-art{
        min-height:380px
    }
    .hero-logo{
        transform:translate(-50%,-50%) scale(.78)
    }
    .ticker{
        text-align:left
    }
    .section-wrap{
        padding-left:6%;
        padding-right:6%
    }
    .intro{
        display:block;
        padding-top:75px;
        padding-bottom:80px
    }
    .intro h2{
        margin-top:25px
    }
    .section-heading{
        display:block
    }
    .section-heading p{
        margin-top:20px
    }
    .podcast-section,.analysis-section{
        padding-top:75px;
        padding-bottom:80px
    }
    .feature-grid{
        grid-template-columns:1fr
    }
    .feature-card{
        min-height:430px
    }
    .episode-list{
        margin-top:14px
    }
    .story-section{
        display:flex;
        flex-direction:column;
        padding-top:80px;
        padding-bottom:85px
    }
    .story-graphic{
        min-height:370px;
        margin-bottom:40px
    }
    .story-graphic>span{
        font-size:4.5rem
    }
    .format-grid{
        grid-template-columns:1fr;
        gap:25px
    }
    .format-grid>div,.format-grid>div:first-child{
        border-left:1px solid #718483;
        padding:0 0 0 22px
    }
    .format-grid h3{
        margin:12px 0
    }
    .book-section{
        grid-template-columns:1fr;
        padding-top:90px;
        padding-bottom:95px;
        gap:70px
    }
    .book-cover{
        max-width:330px;
        margin:auto
    }
    .connect-inner{
        grid-template-columns:1fr;
        gap:30px
    }
    .footer-main{
        align-items:start;
        gap:30px;
        flex-wrap:wrap
    }
    .footer-main>span{
        display:none
    }
}
@media(max-width:520px){
    .hero-left{
        min-height:0;
        padding-bottom:65px
    }
    .hero h1{
        font-size:3.48rem
    }
    .hero-actions{
        align-items:flex-start;
        flex-direction:column;
        gap:23px
    }
    .hero-byline{
        padding-top:60px
    }
    .hero-art{
        min-height:330px
    }
    .hero-logo{
        transform:translate(-50%,-50%) scale(.65)
    }
    .art-caption span:last-child{
        display:none
    }
    .intro h2,.section-heading h2,.story-copy h2,.book-copy h2,.connect-inner h2{
        font-size:2.7rem
    }
    .analysis-grid{
        grid-template-columns:1fr
    }
    .analysis-card{
        min-height:320px
    }
    .story-graphic>span{
        font-size:3.8rem
    }
    .story-sign{
        flex-direction:column
    }
    .footer-bottom{
        align-items:start;
        gap:12px;
        flex-direction:column
    }
    .episode-list strong{
        font-size:18px
    }
}
@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto
    }
}


.hero-logo {
  background: none !important;        /* removes the old screenshot background */
  display: block;
  width: min(380px, 60%);
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  mix-blend-mode: multiply;           /* hides the JPG's white box on the grey panel */
}