/* Shared navigation and type for the homepage, guide and articles. */
:root{
  --paper:#fffdf8;
  --bone:#f7f3e9;
  --green:#276343;
  --green-deep:#174b37;
  --magenta:#c52a70;
  --magenta-deep:#a81f5d;
  --mustard:#e7eddf;
  --ink:#26332a;
  --ink-soft:#526259;
  --border-light:rgba(23,75,55,.15);
}
body::before{display:none}
nav.site{
  position:sticky;top:0;left:auto;right:auto;z-index:100;
  width:100%;height:72px;margin:0;
  padding:0 max(50px,calc((100vw - 1050px)/2));
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:#f5c7da;border:0;backdrop-filter:none;
}
nav.site .wordmark{display:flex;align-items:center;flex:0 0 auto;line-height:0}
nav.site .wordmark img{width:190px;height:auto;max-height:48px;object-fit:contain}
nav.site .nav-links{display:flex;align-items:center;gap:20px;margin:0;padding:0;list-style:none}
nav.site .nav-links a{
  color:#174b37;font:700 12px/1.2 'DM Sans',Arial,sans-serif;
  letter-spacing:0;text-transform:none;text-decoration:none;
}
nav.site .nav-links a:hover,nav.site .nav-links a.is-current{color:#a81f5d}
nav.site .nav-cta{
  flex:0 0 auto;padding:7px 8px 7px 15px;min-height:38px;
  display:inline-flex;align-items:center;justify-content:space-between;
  background:#174b37;color:#fffdf8!important;border-radius:24px;
  font:700 12px/1.2 'DM Sans',Arial,sans-serif;
  text-decoration:none;gap:10px;
}
nav.site .nav-cta:hover{background:#276343}
nav.site .nav-cta .arrow{width:25px;height:25px;flex:0 0 25px;background:#fffdf8;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
nav.site .nav-cta .arrow svg{width:12px;height:12px;flex:none;stroke:#174b37}
nav.site .site-mobile{display:none}
nav.site :focus-visible{outline:3px solid #174b37;outline-offset:3px}

/* Guide pages retain their article structure and use the homepage's type scale. */
body:has(.blog-hero),body:has(.article-header){color:var(--ink);line-height:1.6}
body:has(.blog-hero) .wrap,body:has(.article-header) .wrap{
  width:min(100% - 100px,1050px);max-width:1050px;padding:0;margin-inline:auto;
}
body:has(.article-header) .article-header .wrap{max-width:880px}
body:has(.article-header) .article-body .wrap{max-width:820px}
body:has(.blog-hero) h1,body:has(.article-header) h1,
body:has(.blog-hero) h2,body:has(.article-header) h2{
  text-transform:none;letter-spacing:-.045em;line-height:1.08;
}
body:has(.blog-hero) h1,body:has(.article-header) h1{color:#174b37;font-weight:800}
body:has(.blog-hero) h2,body:has(.article-header) h2{font-weight:700}
.blog-hero{padding:80px 0 58px;background:#fffdf8}
.blog-hero h1{font-size:clamp(43px,5.3vw,64px)}
.blog-hero .lede{font:400 clamp(15px,1.15vw,17px)/1.52 'DM Sans',Arial,sans-serif;color:#26332a}
.blog-hero .eyebrow,.article-header .eyebrow,.article-body .eyebrow{
  font:700 11px/1.3 'DM Sans',Arial,sans-serif;
  color:#174b37;letter-spacing:.18em;text-transform:uppercase;
  display:inline-block;margin-bottom:20px;
}
.blog-hero .eyebrow::before,.article-header .eyebrow::before,.article-body .eyebrow::before{display:none}
.posts-section{background:#fffdf8;padding:40px 0 100px}
.post-card{background:#f7f3e9;border:1.5px solid #174b37;border-radius:14px;box-shadow:6px 6px 0 #276343;padding:30px}
.post-card:hover,.post-card:focus-visible{transform:translate(-3px,-3px);box-shadow:9px 9px 0 #c52a70}
.post-card h2{color:#174b37;font-size:clamp(22px,2.15vw,29px)}
.post-card .excerpt{font-size:15px;line-height:1.55;color:#26332a}
.post-meta,.post-card .read-more,.article-header .post-meta-top,.article-header .crumbs,
.author-strip .author-role,.author-strip .author-linkedin,.post-hero-figure figcaption{
  font-family:'DM Sans',Arial,sans-serif;letter-spacing:.04em;
}
.pill,.footer-col h3,.footer-bottom{font-family:'DM Sans',Arial,sans-serif}
.post-card .read-more{border-top:0;padding-top:0;font-weight:700;color:#174b37}
.article-header{padding:70px 0 40px;background:#fffdf8}
.article-header h1{font-size:clamp(38px,4.2vw,56px)}
.article-header .deck{color:#26332a;font:400 clamp(16px,1.5vw,20px)/1.52 'DM Sans',Arial,sans-serif}
.article-body{background:#fffdf8}
.article-body h2{color:#174b37}
.article-body h3{color:#c52a70}
.article-body .post-cta h3{color:#fffdf8}
.article-body p,.article-body ul li,.article-body ol li{font-size:17px;line-height:1.62}
.post-hero-figure figcaption{font-style:normal}
footer.site{background:#174b37}

/* The same framed, offset cards appear throughout the homepage. */
.founder-layout .tools-card{
  background:#fffdf8;color:#174b37;border-radius:12px;padding:18px;
  min-height:210px;
}
.founder-layout .founder-photo img{border:2px solid #174b37;box-shadow:none}
.founder-layout .career-card{min-height:210px}
.work .work-card,.services .service,.founder-layout .career-card,.founder-layout .tools-card,
.channel-panel,.guide-body a,.builder-card{
  border:1.5px solid #174b37;
  box-shadow:6px 6px 0 #276343;
  transition:transform .25s ease,box-shadow .25s ease;
}
.work .work-card:hover,.services .service:hover,.services .service:focus-within,
.founder-layout .career-card:hover,.founder-layout .career-card:focus-within,
.founder-layout .tools-card:hover,.channel-panel:hover,
.guide-body a:hover,.guide-body a:focus-visible,.builder-card:hover,.builder-card:focus-within{
  transform:translate(-3px,-3px);
  box-shadow:9px 9px 0 #c52a70;
}
.work-card:hover .number,.service:hover summary,.service:focus-within summary{color:#c52a70}
.guide-body a span{display:inline-block;transition:transform .25s ease}
.guide-body a:hover span,.guide-body a:focus-visible span{transform:translateX(4px)}
.builder-callout{background:#f5c7da;padding:clamp(68px,8vw,105px) 0}
.builder-callout .wrap{width:min(100% - 100px,1050px);margin-inline:auto}
.builder-card{
  background:#fffdf8;border-radius:16px;padding:clamp(30px,5vw,55px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:36px;
}
.builder-card .eyebrow{color:#174b37;margin-bottom:16px}
.builder-card h2{color:#174b37;font-size:clamp(35px,4.2vw,55px);margin:0 0 16px}
.builder-card p:not(.eyebrow){font-size:16px;line-height:1.55;max-width:650px;margin:0}
.builder-card .button{white-space:nowrap;background:#c52a70;align-self:center}
@media(prefers-reduced-motion:reduce){
  .post-card,.work .work-card,.services .service,.founder-layout .career-card,.founder-layout .tools-card,.channel-panel,.guide-body a,.builder-card,.guide-body a span{transition:none}
  .post-card:hover,.post-card:focus-visible,.work .work-card:hover,.services .service:hover,.services .service:focus-within,
  .founder-layout .career-card:hover,.founder-layout .career-card:focus-within,
  .founder-layout .tools-card:hover,.channel-panel:hover,
  .guide-body a:hover,.guide-body a:focus-visible,.builder-card:hover,.builder-card:focus-within{transform:none}
}

@media(max-width:920px){
  nav.site .nav-links{display:none}
  nav.site .site-mobile{display:block;position:relative;margin-left:auto}
  nav.site .site-mobile summary{
    cursor:pointer;list-style:none;color:#174b37;
    font:700 13px/1.2 'DM Sans',Arial,sans-serif;
    padding:10px 4px;
  }
  nav.site .site-mobile summary::-webkit-details-marker{display:none}
  nav.site .site-mobile[open] div{
    position:absolute;right:0;top:calc(100% + 12px);min-width:230px;
    display:grid;padding:10px 14px;background:#fffdf8;border-radius:10px;
    box-shadow:0 12px 30px rgba(23,75,55,.16);
  }
  nav.site .site-mobile div a{
    padding:10px 5px;color:#174b37;text-decoration:none;
    font:700 13px/1.3 'DM Sans',Arial,sans-serif;
  }
  nav.site .site-mobile div a:hover{color:#c52a70}
}
@media(max-width:800px){
  nav.site{padding-inline:24px}
  body:has(.blog-hero) .wrap,body:has(.article-header) .wrap{width:min(100% - 48px,680px)}
  .builder-callout .wrap{width:min(100% - 48px,680px)}
  .builder-card{grid-template-columns:1fr;gap:28px}
  .builder-card .button{justify-self:start}
}
@media(max-width:620px){
  nav.site{height:68px;padding-inline:18px}
  nav.site .wordmark img{width:148px}
  nav.site .nav-cta{display:none}
  body:has(.blog-hero) .wrap,body:has(.article-header) .wrap{width:min(100% - 36px,520px)}
  .builder-callout .wrap{width:min(100% - 36px,520px)}
  .blog-hero{padding:58px 0 38px}
  .article-header{padding:54px 0 30px}
}