.intro-post{margin:42px -12px -24px;text-align:center;color:#64533c}
.post-scene{height:190px;position:relative;overflow:hidden;border-bottom:1px solid #80683b55;isolation:isolate}
.post-town{position:absolute;bottom:0;left:0;width:100%;height:120px;color:#7a6547;opacity:.23}
.post-moon{position:absolute;right:17%;top:9px;width:35px;height:35px;border:1px solid #8c744a44;border-radius:50%;box-shadow:0 0 25px #fce7ab66;background:#f0dfb7a6}
.post-stars{position:absolute;inset:0;color:#8a744f66;font:12px Georgia;letter-spacing:65px;padding:24px 0 0 40px;white-space:nowrap;pointer-events:none}
.rider-travel{position:absolute;bottom:-12px;left:0;width:100%;height:135px;transform:translateX(5%);text-align:left;pointer-events:none}
.rider-art{width:158px;height:135px;overflow:visible;color:#4e3b28;filter:drop-shadow(0 2px 0 #f4e5c570)}
.post-caption{font:italic 20px/1.5 'Cormorant Garamond',Georgia,serif;margin:18px 0 3px}
.post-subtitle{font:8px/1.8 ui-monospace,monospace;text-transform:uppercase;letter-spacing:2px;margin:0;color:#79664b}
.ride-control{font:9px/1.5 ui-monospace,monospace;text-transform:uppercase;letter-spacing:1.4px;padding:10px 8px;margin-top:10px;color:#725b3c;border-bottom:1px solid #725b3c44;min-height:40px}
.ride-control:hover{color:#713827}
.intro-post.is-riding .rider-travel{animation:intro-midnight-crossing 10s linear both}
.intro-post.is-riding .horse-body{animation:intro-horse-bob .48s ease-in-out infinite}
.intro-post.is-riding .leg-front{animation:intro-gallop-front .48s ease-in-out infinite;transform-origin:139px 87px}
.intro-post.is-riding .leg-front-back{animation:intro-gallop-front .48s -.24s ease-in-out infinite;transform-origin:132px 88px}
.intro-post.is-riding .leg-rear{animation:intro-gallop-rear .48s ease-in-out infinite;transform-origin:70px 88px}
.intro-post.is-riding .leg-rear-back{animation:intro-gallop-rear .48s -.24s ease-in-out infinite;transform-origin:76px 89px}
.intro-post.is-riding .post-lantern{animation:intro-lantern-swing .7s ease-in-out infinite;transform-origin:163px 48px}
.intro-post.is-paused .rider-travel,.intro-post.is-paused .rider-art *{animation-play-state:paused!important}
.intro-post.ride-finished .rider-travel{transform:translateX(calc(100% - 165px))}
@keyframes intro-midnight-crossing{from{transform:translateX(-160px)}to{transform:translateX(calc(100% - 165px))}}
@keyframes intro-horse-bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-3px) rotate(1deg)}}
@keyframes intro-gallop-front{0%,100%{transform:rotate(-24deg)}50%{transform:rotate(27deg)}}
@keyframes intro-gallop-rear{0%,100%{transform:rotate(25deg)}50%{transform:rotate(-28deg)}}
@keyframes intro-lantern-swing{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(12deg)}}
@media(max-width:640px){.intro-post{margin-left:3px;margin-right:3px}.post-scene{height:170px}.post-caption{font-size:19px}.post-stars{letter-spacing:30px}.post-subtitle{font-size:7px;letter-spacing:1.3px}}
@media(prefers-reduced-motion:reduce){.intro-post *, .intro-post.is-riding .rider-travel{animation:none!important}.ride-control{display:none}.rider-travel{transform:translateX(calc(50% - 80px))!important}}
@media print{.intro-post{display:none}}
/* Full-width post road below the opening letter, in normal flow on short screens. */
#atlas-intro[open]{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:60px 24px 0}
#atlas-intro .atlas-fold{flex-shrink:0;margin:0 auto 20px;padding:26px 34px}
#atlas-intro .dogood-preface{text-align:left;max-width:440px;margin:22px auto 26px}
#atlas-intro .dogood-preface p{font:17px/1.75 Georgia,serif;color:#423727;margin:0 0 17px}
#atlas-intro .dogood-preface .dogood-signature{margin:24px 0 0;font:17px/1.75 Georgia,serif}
#atlas-intro .intro-post{flex-shrink:0;align-self:stretch;width:calc(100% + 48px);margin:auto -24px 0;padding-bottom:8px}
#atlas-intro .post-scene{height:145px}#atlas-intro .post-town{height:100px}
#atlas-intro .ride-control{background:none;border:0;border-bottom:1px solid #725b3c44;margin-top:4px;min-height:44px}
#atlas-intro .intro-post .rider-travel{animation-play-state:paused}
#atlas-intro[open] .intro-post.is-riding:not(.is-paused) .rider-travel{animation-play-state:running}
@media(max-width:700px){#atlas-intro .atlas-fold{padding:24px 22px}#atlas-intro .dogood-preface p,#atlas-intro .dogood-preface .dogood-signature{font-size:16px;line-height:1.7}#atlas-intro .post-scene{height:125px}#atlas-intro .post-town{height:85px}}