/* Practice guides, the free Part One page, the author page and the 404: the
   landing page's shell (style.css) around a reading column. */
.page-body{background:var(--ground)}
/* These pages carry a fourth menu item (Practice Guides); the landing page keeps
   its three and never links here. Between the phone layout and ~900px the fourth
   item no longer fits beside the brand, so it hides and the footer link remains. */
@media(min-width:761px){.page-body .nav nav{grid-template-columns:1fr auto auto 1fr}}
@media(min-width:761px) and (max-width:899px){.page-body .nav nav{grid-template-columns:1fr auto 1fr}.page-body .nav nav a[href="/blog"]{display:none}}
.page-main{padding:10px 0 90px}
.page-wrap{max-width:1120px}
.page-head{max-width:760px;margin:20px 0 60px}
.page-head h1,.post-head h1{font:400 clamp(44px,6vw,80px)/1.02 var(--serif);letter-spacing:-2px;margin:0 0 22px}
.page-head h1 em,.post-body h2 em{font-style:italic;color:var(--gold)}
.lede{font-size:21px;line-height:1.5;color:#c5c4ba;max-width:640px}
.page-head .eyebrow{margin-bottom:22px}

/* Cards */
.cards-section{margin:0 0 70px}
.cards-section h2,.related h2{font:400 34px/1.1 var(--serif);letter-spacing:-1px;margin:0 0 24px;color:var(--paper)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card{display:flex;flex-direction:column;gap:10px;padding:26px 26px 22px;border:1px solid var(--line);border-radius:14px;background:rgba(240,238,230,.025);transition:border-color .2s,transform .2s}
.card:hover{border-color:rgba(220,200,141,.6);transform:translateY(-2px)}
.card-kind{font-size:10px;font-weight:600;letter-spacing:2.3px;text-transform:uppercase;color:var(--gold)}
.card strong{font:400 26px/1.15 var(--serif);letter-spacing:-.5px}
.card-desc{font-size:15px;line-height:1.55;color:#c5c4ba}
.card-meta{margin-top:auto;padding-top:12px;font-size:12px;color:var(--muted)}

/* Articles */
.post{max-width:720px;margin:0 auto}
.crumbs{display:flex;gap:10px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:14px 0 34px}
.crumbs a:hover{color:var(--gold)}
.post-head{margin-bottom:38px}
.post-meta{font-size:14px;color:var(--muted)}
.post-meta a{border-bottom:1px solid var(--line)}
.post-body{font-size:19px;line-height:1.7;color:#e6e4dc}
.post-body>p,.post-body>ul,.post-body>ol,.post-body>blockquote{margin:0 0 26px}
.post-body h2{font:400 clamp(32px,4vw,42px)/1.12 var(--serif);letter-spacing:-1px;color:var(--paper);margin:54px 0 18px}
.post-body h3{font:600 15px/1.4 var(--sans);letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin:40px 0 12px}
.post-body a:not(.button){color:var(--gold);border-bottom:1px solid rgba(220,200,141,.45)}
.post-body a:not(.button):hover{border-bottom-color:var(--gold)}
.post-body ul,.post-body ol{padding-left:24px}
.post-body li{margin-bottom:8px}
.post-body blockquote{margin:34px 0;padding:6px 0 6px 26px;border-left:2px solid var(--gold);font:italic 400 26px/1.35 var(--serif);color:var(--paper)}
.post-body blockquote p{margin:0}
.post-body hr{border:0;border-top:1px solid var(--line);margin:44px 0}
.post-body strong{color:var(--paper)}
.post-body img{border-radius:12px;margin:10px 0 26px}
.post-body code{font:inherit;color:var(--gold)}

/* The free chapters, the author, related guides */
.post-cta{margin:64px 0 40px;padding:38px 36px;border:1px solid rgba(220,200,141,.4);border-radius:16px;background:linear-gradient(180deg,rgba(220,200,141,.09),rgba(220,200,141,.03))}
.post-cta .eyebrow{margin-bottom:14px}
.post-cta h2{font:400 clamp(30px,3.6vw,40px)/1.1 var(--serif);letter-spacing:-1px;margin:0 0 12px}
.post-cta p{font-size:17px;line-height:1.55;color:#c5c4ba;margin:0 0 24px;max-width:520px}
.post-cta .button,.link-row .button{margin:0}
.author-box{display:flex;gap:20px;align-items:flex-start;padding:28px 0 0;border-top:1px solid var(--line)}
.author-box img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.author-box .eyebrow{margin-bottom:8px}
.author-box p:last-child{font-size:15px;line-height:1.6;color:#c5c4ba;margin:0}
.author-box a{color:var(--paper);border-bottom:1px solid var(--line)}
.related{margin-top:64px;padding-top:44px;border-top:1px solid var(--line)}
.related .cards{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.link-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}
.link-row .button{min-height:50px;padding:0 18px}
.page .post-body h1{font:400 clamp(44px,6vw,80px)/1.02 var(--serif);letter-spacing:-2px;margin:14px 0 26px}
.page .post-body h1 em{color:var(--gold)}
.page .post-body .lede{font-size:21px;line-height:1.5;color:#c5c4ba;margin-bottom:34px}
.page .post-body .author-figure{float:right;width:min(42%,300px);margin:6px 0 20px 30px;border-radius:14px}

@media(max-width:760px){
  .page-main{padding:0 0 60px}
  .page-head{margin:10px 0 40px}
  .lede{font-size:18px}
  .cards-section{margin-bottom:48px}
  .card{padding:22px 20px 18px}
  .post-body{font-size:17px}
  .post-body blockquote{font-size:22px;padding-left:18px}
  .post-cta{padding:28px 22px;margin:48px 0 32px}
  .post-cta .button{width:100%;margin:0}
  .author-box{gap:14px}
  .link-row .button{width:100%}
  .page .post-body .author-figure{float:none;width:min(100%,300px);margin:0 auto 24px}
}