/* A compact transition into Mike's personal story. */
#the-story{padding-bottom:16px}
.story-transition{display:flex;align-items:center;gap:22px;margin:36px 0 0}
.story-transition::before,.story-transition::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#e7b5d1)}
.story-transition::after{transform:rotate(180deg)}
.story-transition a{display:inline-flex;align-items:center;gap:12px;color:var(--plum);text-decoration:none;font:600 22px/1.4 var(--display);white-space:nowrap}
.story-transition .ms{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#fff;background:var(--grad);font-size:21px;transition:transform .2s}
.story-transition a:hover .ms{transform:translateY(3px)}
.story-transition a:focus-visible{outline:3px solid var(--magenta);outline-offset:6px;border-radius:6px}
#mike{padding-top:20px}
#mike .narrator{position:relative;isolation:isolate;overflow:hidden;grid-template-columns:190px minmax(0,1fr);gap:28px;padding:32px;margin-bottom:32px;border:1px solid #ecd4e3;border-radius:24px;background:radial-gradient(ellipse at 0 100%,#ffdce9 0,transparent 65%),linear-gradient(120deg,#fff8fb,#f7f1fc);box-shadow:0 16px 40px #4110440a}
#mike .narrator::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--grad)}
#mike .narrator-photo{width:190px;box-shadow:0 0 0 7px #ffffffa6,0 12px 30px #8a316522}
#mike .narrator h2{font-size:clamp(28px,3vw,38px);line-height:1.18;letter-spacing:-1px;margin-bottom:14px!important}
#mike .narrator .narrator-kicker{display:block;margin-bottom:13px;font:700 10px/1.5 var(--ui);letter-spacing:1.7px;text-transform:uppercase;color:#a42770}
#mike .narrator p{font-size:13px;line-height:1.65;color:#715a77;max-width:340px}
@media(max-width:600px){
.story-transition{gap:12px;margin-top:28px}
.story-transition a{font-size:19px;gap:10px}
.story-transition .ms{width:32px;height:32px;font-size:19px}
#mike{padding-top:12px}
#mike .narrator{grid-template-columns:1fr;justify-items:center;gap:22px;padding:30px 22px 26px;border-radius:20px;text-align:center}
#mike .narrator-photo{width:150px}
#mike .narrator h2{text-align:center!important;font-size:29px;letter-spacing:-.7px}
#mike .narrator .narrator-kicker{font-size:9px;letter-spacing:1.5px;margin-bottom:10px}
#mike .narrator p{margin-inline:auto}
}
@media(prefers-reduced-motion:reduce){.story-transition .ms{transition:none}}

/* Compact chapter introductions. */
.reading.chapter-close{padding-bottom:18px}
.reading.chapter-close>:last-child{margin-bottom:0}
#glp1{padding-top:20px;padding-bottom:24px}
#glp1>p:last-child{margin-bottom:0}
#butter-test{padding-top:20px}
.section-heading{position:relative;display:flex;align-items:center;gap:22px;overflow:hidden;padding:30px;border:1px solid #ead5e5;border-radius:22px;margin:0 0 30px;background:radial-gradient(ellipse at 0 100%,#f9deee,transparent 75%),linear-gradient(110deg,#fff8fb,#f6f0fc);text-align:left;box-shadow:0 12px 32px #41104408}
.section-heading::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--grad)}
.section-heading .section-symbol{display:grid;place-items:center;flex:0 0 64px;height:64px;border-radius:18px;background:var(--grad);color:#fff;box-shadow:0 8px 20px #d4237f26;font-size:34px}
.section-heading>div{min-width:0}
.section-heading .eyebrow{display:block!important;margin:0 0 10px!important;font:700 11px/1.4 var(--ui)!important;letter-spacing:1.8px;color:#a42770}
.section-heading h2{margin:0!important;text-align:left!important;font-size:36px;line-height:1.2;letter-spacing:-.8px}
#butter-test .section-heading{background:radial-gradient(ellipse at 0 100%,#ffe7d5,transparent 75%),linear-gradient(110deg,#fff9f4,#fcf2fa)}
@media(max-width:600px){
.reading.chapter-close{padding-bottom:14px}
#glp1{padding-top:16px;padding-bottom:18px}
#butter-test{padding-top:16px}
.section-heading{padding:24px 20px;gap:15px;border-radius:18px;align-items:flex-start;margin-bottom:24px}
.section-heading .section-symbol{flex-basis:44px;height:44px;border-radius:13px;font-size:26px}
.section-heading .eyebrow{font-size:9px!important;letter-spacing:1.3px;margin-bottom:8px!important}
.section-heading h2{font-size:27px;letter-spacing:-.6px}
}

#barbara{padding-top:20px}
@media(max-width:600px){#barbara{padding-top:16px}}