/* Blog pages: reading layout on top of guide.css and the planner's hero pieces. */
.opening-copy{display:flex;flex-direction:column;align-items:flex-start}
.opening-copy h1{order:0}.opening-copy .lede{order:1}.hero-cta{order:2;margin-top:34px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.map-cta{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;min-height:56px;min-width:44px;padding:16px 30px;border:0;border-radius:3px;background:var(--chocolate);color:var(--chalk);font:800 16px/1.2 Unbounded,sans-serif;letter-spacing:-.03em;text-decoration:none;cursor:pointer;transform:rotate(-1deg);transition:background .2s}
.map-cta:before{content:"";position:absolute;inset:6px -8px -8px 8px;z-index:-1;background:var(--persimmon);clip-path:polygon(2% 4%,100% 0,98% 96%,0 100%)}
.map-cta:hover{background:var(--olive)}.map-cta:focus-visible{outline:3px solid var(--olive);outline-offset:8px}
.hero-micro{font:500 23px/1.2 Caveat,cursive;color:var(--olive);margin:0}
.hero-note{--paper:var(--lime);--tilt:2.4deg;padding:46px 34px 36px;margin:50px 0 0 -4px;animation:notes-settle .85s cubic-bezier(.22,.7,.3,1) both}
.hero-note h2{font:700 34px/1.12 Caveat,cursive;letter-spacing:-.02em;margin-bottom:14px}
.jump{list-style:none;margin:0;padding:0}.jump a{display:inline-flex;align-items:center;min-height:44px;font:500 26px/1.2 Caveat,cursive;color:var(--chocolate);text-underline-offset:5px}
.prose{--tilt:0deg;max-width:900px;margin:44px 0 0 auto;padding:52px 44px 44px}.prose:after{left:34%}
.prose p{margin-bottom:18px;font-size:17px;line-height:1.8}.prose p:last-child{margin-bottom:0}
.prose a{display:inline;min-height:0}
.steps{margin:6px 0 22px;padding-left:24px}.steps li{margin-bottom:12px;font-size:17px;line-height:1.7}
.ex{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px;line-height:1.5;background:repeating-linear-gradient(to bottom,transparent 0 39px,#45502614 39px 41px)}
.ex caption{text-align:left;font:700 22px/1.3 Caveat,cursive;padding:0 0 10px}
.ex th,.ex td{text-align:left;vertical-align:top;padding:11px 12px;border-bottom:2px solid #4550262e}.ex thead th{font-size:13px;color:var(--olive);font-weight:700}.ex tbody th{font-weight:700}
.posts{max-width:900px;margin:44px 0 0 auto}.post-card{--tilt:-.6deg;padding:52px 40px 38px}.post-card h3{font-size:24px;margin-bottom:10px}.post-card h3 a{color:var(--chocolate);display:inline-flex;align-items:center;min-height:44px;text-underline-offset:6px}.post-card p{margin-bottom:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:44px;padding:10px 20px;border:2px solid var(--chocolate);border-radius:3px;background:var(--chalk);color:var(--chocolate);font:700 15px/1.2 Bitter,serif;text-decoration:none}.btn:hover{background:var(--lime)}
#stickycta .map-cta{min-height:48px;padding:.7rem 1rem;font-size:13px;transform:none}#stickycta .map-cta:before{display:none}#stickycta span{font-size:1.4rem}
.cta-repeat .map-cta{margin-bottom:6px}
@media(max-width:1100px){.hero-note{padding:40px 26px 30px}.hero-note h2{font-size:30px}}
@media(max-width:860px){.ex thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ex,.ex tbody{display:block}.ex tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;padding:12px 0;border-bottom:2px solid #4550262e}.ex th,.ex td{border:0;padding:0}.ex tbody th{grid-column:1/-1;font-size:17px}.ex td:before{content:attr(data-label);display:block;font-weight:700;font-size:12px;color:var(--olive)}.ex td:last-child{grid-column:1/-1}.ex caption{display:block}}
@media(max-width:760px){
 .opening-copy{padding-inline:8px}.hero-cta{order:1;margin-top:22px}.opening-copy .lede{order:2;margin-top:24px}.hero-cta .map-cta{width:100%;max-width:420px}
 .hero-note{--tilt:1.3deg;max-width:470px;margin:34px 10px 0 12px;padding:36px 22px 26px}.hero-note h2{font-size:28px}.jump a{font-size:24px}
 .prose{padding:42px 20px 30px;margin-top:34px}.prose p{font-size:16px}.steps li{font-size:16px}.post-card{padding:44px 20px 30px}.cta-repeat .map-cta{width:100%;max-width:420px}
 html{scroll-padding-bottom:96px}
}
@media(max-width:400px){.map-cta{padding-inline:20px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.map-cta{transition:none}}