/* Extra styles for generated content pages. Everything else comes from site.css (extracted from the home page). */
body.page-content{background:var(--offwhite);color:var(--graphite)}
.page-content .site-header{background:rgba(14,15,15,.94);box-shadow:0 1px 0 var(--line-dark)}
.content{padding:132px 0 96px}
.content .wrap{max-width:860px}
.crumbs{font-size:13px;color:var(--grey-text);margin-bottom:28px}
.crumbs ol{display:flex;flex-wrap:wrap;gap:6px 10px;list-style:none;margin:0;padding:0}
.crumbs li+li::before{content:"/";margin-right:10px;color:#9a9c97}
.crumbs a{color:var(--grey-text);text-decoration:underline;text-underline-offset:3px}
.page-head h1{font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.1;font-weight:600;letter-spacing:-.025em;margin:0 0 20px}
.page-head .lede{font-size:clamp(1.05rem,1.6vw,1.25rem);line-height:1.65;color:var(--grey-text);margin:0 0 12px}
.page-head .updated{font-size:13px;color:var(--grey-text)}
.draft-banner{display:inline-block;margin-bottom:18px;padding:6px 12px;border:1px solid #9A2A1F;color:#9A2A1F;font-size:12px;letter-spacing:.14em;font-weight:600}
.prose{margin-top:44px}
.prose h2{font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.2;font-weight:600;letter-spacing:-.015em;margin:44px 0 14px}
.prose p,.prose li{font-size:17px;line-height:1.75;color:#33362f}
.prose p{margin:0 0 16px}
.prose ul{margin:0 0 18px;padding-left:22px}.prose li{margin-bottom:8px}
.prose a,.related a,.hub-list a{color:var(--graphite);text-underline-offset:3px}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:15px}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line-light);vertical-align:top}
.prose th{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-text)}
.table-wrap{overflow-x:auto}
.faq{margin-top:56px}.faq h2,.sources h2,.related h2,.hub-list h2{font-size:1.35rem;font-weight:600;margin:0 0 16px}
.faq details{border-top:1px solid var(--line-light);padding:16px 0}.faq details:last-child{border-bottom:1px solid var(--line-light)}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;line-height:1.5}.faq details p{margin:12px 0 0;font-size:16px;line-height:1.7;color:#33362f}
.sources{margin-top:48px}.sources ol{padding-left:22px;margin:0}.sources li{font-size:14px;line-height:1.6;color:var(--grey-text);margin-bottom:8px;overflow-wrap:anywhere}
.sources a{color:var(--grey-text)}
.related,.hub-list{margin-top:52px}
.related ul,.hub-list ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.related li a,.hub-list li a{display:block;padding:16px 18px;border:1px solid var(--line-light);border-radius:10px;font-weight:600;text-decoration:none;transition:border-color .2s,background .2s}
.related li a:hover,.hub-list li a:hover{border-color:var(--graphite);background:#fff}
.hub-list p{margin:6px 0 0;font-weight:400;font-size:15px;color:var(--grey-text);line-height:1.55}
.cta-box{margin-top:64px;padding:34px 32px;background:var(--graphite-2);color:#fff;border-radius:14px}
.cta-box h2{font-size:1.5rem;margin:0 0 10px;font-weight:600}
.cta-box p{margin:0 0 22px;color:var(--grey-soft);line-height:1.65;max-width:560px}
.cta-box .btn{display:inline-flex}
@media (max-width:680px){.content{padding-top:112px}.cta-box{padding:26px 22px}}
/* interactive tools */
.tool{margin-top:36px;padding:26px 24px;background:#fff;border:1px solid var(--line-light);border-radius:14px}
.tool form{display:grid;gap:18px}
.tgroup{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}.tgroup[hidden]{display:none}
.tf label{display:block;font-size:13px;line-height:1.4;color:var(--grey-text);margin-bottom:6px}
.tf input,.tf select,.tool select{width:100%;min-height:44px;padding:10px 12px;font:inherit;font-size:16px;border:1px solid #BDBEB8;border-radius:8px;background:#fff;color:var(--graphite)}
.tool .btn{justify-self:start;border:0;cursor:pointer}
.tool-out{display:grid;gap:8px;margin:0}.tool-out[hidden]{display:none}
.tool-out div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line-light)}
.tool-out dt{color:var(--grey-text);font-size:15px}.tool-out dd{margin:0;font-weight:600;font-size:17px}
.tool-note,.tool-msg{font-size:13px;color:var(--grey-text);margin:0}.tool-msg{color:#9A2A1F;font-weight:600}
.tool .q{font-size:1.15rem;font-weight:600;margin:0 0 14px}.tool .opts{display:grid;gap:10px}.tool .back{background:none;border:0;cursor:pointer;font-size:18px}

/* blog */
.meta{margin:0 0 14px}
.tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--graphite);background:#EDECE7;border-radius:999px;padding:5px 12px;text-decoration:none}
a.tag:hover{background:#E1E0DA}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 8px}
.chips a{font-size:14px;color:var(--graphite);border:1px solid #CFCEC8;border-radius:999px;padding:8px 14px;text-decoration:none;background:#fff}
.chips a span{color:var(--grey-text);margin-left:4px}
.chips a[aria-current="page"]{background:var(--graphite);color:#fff;border-color:var(--graphite)}.chips a[aria-current="page"] span{color:#cfcfca}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:20px;margin-top:26px}
.card{background:#fff;border:1px solid var(--line-light);border-radius:14px;padding:22px 22px 20px;display:flex;flex-direction:column}
.card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;font-size:13px;color:var(--grey-text)}
.card h2{font-size:1.2rem;line-height:1.3;font-weight:600;letter-spacing:-.01em;margin:0 0 10px}
.card h2 a{color:var(--graphite);text-decoration:none}.card h2 a:hover{text-decoration:underline;text-underline-offset:3px}
.card p:last-child{margin:0;font-size:15px;line-height:1.6;color:var(--grey-text)}
.pager{display:flex;flex-wrap:wrap;gap:8px;margin:38px 0 0;align-items:center}
.pager a,.pager span{min-width:42px;min-height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border:1px solid #CFCEC8;border-radius:10px;font-size:15px;color:var(--graphite);text-decoration:none;background:#fff}
.pager span[aria-current="page"]{background:var(--graphite);color:#fff;border-color:var(--graphite)}
