/* Site motion layer. Loaded after styles.css on every page; adds motion on top of it.
   html.mx is set before paint unless the visitor prefers reduced motion, and html.intro starts the hero
   intro on first paint. Guiding idea: "Better is a direction." The hand-drawn red stroke marks progress,
   the red circle marks focus. */
:root{
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);--ease-back:cubic-bezier(.34,1.56,.64,1);
}
main section{overflow-x:clip}

/* Hero intro: CSS only, so it starts on first paint. */
@keyframes ab-rise{from{opacity:0;translate:0 34px}}
@keyframes ab-drop{from{opacity:0;translate:0 -18px}}
@keyframes ab-word{from{translate:0 calc(100% + .25em)}}
@keyframes ab-shade{from{opacity:0}}
@keyframes ab-draw{from{stroke-dashoffset:1.1}}
.intro [data-in]{animation:ab-rise 1.1s var(--ease-expo) calc(var(--d,0)*1s) both}
.intro [data-in=drop]{animation-name:ab-drop}
.wd{display:inline-block;overflow:hidden;overflow:clip;vertical-align:top;padding:0 .04em .14em;margin:0 -.04em -.14em}
.wd>span{display:inline-block}
.intro .wd>span{animation:ab-word 1.15s var(--ease-expo) calc(var(--w0,.35s) + var(--i,0)*.075s) both}
/* Full-bleed hero photos come up out of the dark (out of the cream on the book and free chapter pages)
   and settle, drifting a touch left to right, the way the page reads. Backwards fill only, so once each
   lands the scroll fade from script.js takes over again. */
@keyframes ab-photo{from{opacity:0;scale:1.07;translate:-1.6% 0}}
.mx .hero-media{background:var(--hero-under,var(--ink))}
.book-hero,.fc-hero-photo{--hero-under:var(--cream)}
.intro .hero-photo-img{animation:ab-photo 1.9s var(--ease-out) backwards}
/* Tour: the stage photo comes up out of the charcoal behind the card */
@keyframes ab-dim{from{background-color:rgba(41,40,39,1)}}
.intro .tour-hero-overlay{animation:ab-dim 2s var(--ease-out) .1s backwards}
/* Square hero art (podcast, assessment, thank-you pages): the red circle grows in behind it, as in About.
   The image itself fades up and settles. */
@keyframes ab-grow{from{scale:0}}
@keyframes ab-settle{from{opacity:0;scale:1.05;translate:0 14px}}
.podcast-hero-art::before,.assess-hero-art::before,.confirm-hero-art::before{transform-origin:50% 50%}
.intro .podcast-hero-art::before,.intro .assess-hero-art::before,.intro .confirm-hero-art::before{animation:ab-grow 1.4s var(--ease-back) .25s backwards}
.intro .podcast-hero-art img,.intro .assess-hero-art img,.intro .confirm-hero-art img{animation:ab-settle 1.5s var(--ease-expo) .45s backwards}
/* "direction." gets a red stroke that draws left to right and ends in an arrowhead */
.dir{position:relative;overflow:visible}
.dir-line{position:absolute;left:0;bottom:-.02em;height:.32em;width:104%;overflow:visible;pointer-events:none;transform:scaleX(var(--stretch,1));transform-origin:left center}
.dir-line path{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.2;stroke-dashoffset:0}
.intro .hero .dir-line path{animation:ab-draw 1.1s var(--ease-in-out) var(--dl,1.25s) both}
/* Thank-you pages: a red circle draws around a check mark once the headline lands */
.h1-ok{display:inline-block;width:.78em;height:.78em;margin-left:.18em;vertical-align:-.04em;overflow:visible}
.h1-ok path{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1.2;stroke-dashoffset:0}
.h1-ok .ok-c{stroke:var(--red)}
.h1-ok .ok-k{stroke:var(--ink)}
.intro .h1-ok .ok-c{animation:ab-draw .9s var(--ease-in-out) .7s both}
.intro .h1-ok .ok-k{animation:ab-draw .45s var(--ease-out) 1.5s both}
/* Claim: the step numbers stamp in, one after another */
@keyframes ab-stamp{from{scale:0}}
.intro .claim-steps.numbered li::before{animation:ab-stamp .7s var(--ease-back) calc(var(--d,0)*1s + .2s) backwards}

/* Buttons: a fill opens as a circle from wherever the pointer comes in, like the red circle on the book
   cover, and the label turns over as one line. The arrow nudges forward; a brand icon lifts a touch.
   --fill/--fill-ink match the live site's hover colors, except the solid red button deepens to a darker red. */
.button{--fill:#B3110F;--fill-ink:#fff}
.button--outline{--fill:#16181e;--fill-ink:#fff}
.hero-photo .button--outline{--fill:#fff;--fill-ink:var(--forest)}
.book-hero.hero-photo .button--outline,.fc-hero-photo .button--outline{--fill:#16181e;--fill-ink:#fff}
.button-light{--fill:#fff;--fill-ink:var(--ink)}
.button-solid-light{--fill:var(--cream);--fill-ink:var(--red-dark)}
.button .lbl{position:relative}
.button .lbl,.button .lbl span,.button .fx span{font-size:inherit}
.button .fx{display:none}
.mx .button{position:relative;isolation:isolate;overflow:hidden;transform:none!important;transition:translate .5s var(--ease-expo),scale .2s var(--ease-out),box-shadow .5s var(--ease-expo),color .4s var(--ease-out),border-color .45s var(--ease-out)}
/* The border takes the fill's color, so no red outline shows around the darker red */
.mx .button:not(.button--outline):not(.button-light):not(.button-solid-light):hover,.mx .button:not(.button--outline):not(.button-light):not(.button-solid-light).demo{background-color:var(--red);border-color:var(--fill)}
.mx .button--outline:hover,.mx .button--outline.demo{background-color:transparent;border-color:#16181e}
.mx .hero-photo:not(.book-hero):not(.fc-hero-photo) .button--outline:hover,.mx .hero-photo:not(.book-hero):not(.fc-hero-photo) .button--outline.demo,.mx .button-light:hover,.mx .button-light.demo{background-color:transparent;border-color:#fff}
.mx .button-solid-light:hover,.mx .button-solid-light.demo{background-color:#fff;border-color:#fff}
.mx .button:hover,.mx .button.demo{color:var(--fill-ink);translate:0 -2px;box-shadow:0 10px 22px -8px rgba(0,0,0,.3)}
.mx .button:active{scale:.98;transition-duration:.1s}
.mx .button .fx{display:block;position:absolute;inset:-2px;z-index:-1;overflow:hidden;border-radius:inherit;pointer-events:none;background:var(--fill);clip-path:circle(0% at var(--px,50%) var(--py,50%));transition:clip-path .5s var(--ease-in-out)}
.mx .button:hover .fx,.mx .button.demo .fx{clip-path:circle(150% at var(--px,50%) var(--py,50%));transition:clip-path .8s var(--ease-expo)}
.button .w{display:inline-block;overflow:hidden;overflow:clip;height:1.3em;line-height:1.3;vertical-align:top}
.button .w i{display:inline-block;font-style:normal;text-shadow:0 1.3em currentColor}
.mx .button .w i{transition:translate .6s var(--ease-expo)}
.mx .button:hover .w i,.mx .button.demo .w i{translate:0 -1.3em;transition-delay:.06s}
.mx .button .arw,.mx .button .ico{display:inline-block;transition:translate .6s var(--ease-expo),scale .6s var(--ease-back)}
.mx .button:hover .arw,.mx .button.demo .arw{translate:4px 0;transition-delay:.05s}
.mx .button:hover .ico,.mx .button.demo .ico{translate:0 -2px;scale:1.12;transition-delay:.05s}

/* Nav: a hand-drawn red stroke draws under the link you point at */
.main-nav-links .nav-link{position:relative;border-bottom:0!important}
.ns{display:none}
.ns path{fill:none;stroke:var(--red);stroke-width:2;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1}
.main-nav-links .nav-link .ns{display:block;position:absolute;left:-3px;width:calc(100% + 6px);bottom:-8px;height:6px;overflow:visible;pointer-events:none}
.main-nav-links .nav-link .ns path{transition:stroke-dashoffset .3s var(--ease-in-out)}
.main-nav-links .nav-link:hover .ns path,.main-nav-links .nav-link:focus-visible .ns path{stroke-dashoffset:0;transition-duration:.55s}
.field label{transition:color .3s var(--ease-out)}
.field:focus-within label{color:var(--red-dark)}

/* Book and podcast cards: the photo is an <img> in a frame so it can open as a circle and zoom */
.way-card{opacity:1;transform:none;transition:translate .8s var(--ease-expo),box-shadow .8s var(--ease-expo)}
.way-card.is-target{cursor:pointer}
.way-image{position:relative;overflow:hidden;background:none!important}
.way-image img{width:100%;height:100%;object-fit:cover;transition:scale 1.4s var(--ease-expo)}
.mx .way-card:hover{translate:0 -6px;box-shadow:0 30px 60px rgba(41,40,39,.14)}
.mx .way-card:hover .way-image img{scale:1.05}
/* About: the portrait sits in its own frame so it can open as a circle while the red circle grows behind it */
.author-ph{position:relative;z-index:1;width:100%;overflow:hidden}
.author-ph img{width:100%}

/* Tour dates row: past cities struck through, the next stop gets a live dot */
.tour-row-dates li span{position:relative;justify-self:start}
.tour-row-dates li.is-past span::after{content:"";position:absolute;left:-2px;right:-2px;top:56%;height:1.5px;background:currentColor;transform:scaleX(var(--strike,1));transform-origin:left}
.tour-row-dates li.is-next time{display:inline-flex;align-items:center;gap:8px}
.tour-row-dates li.is-next time::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 0 rgba(231,34,33,.5)}
.mx .tour-row-dates li.is-next time::before{animation:ab-ping 1.8s var(--ease-out) infinite}
@keyframes ab-ping{70%{box-shadow:0 0 0 9px rgba(231,34,33,0)}100%{box-shadow:0 0 0 0 rgba(231,34,33,0)}}
.next-tag{margin-left:10px;font:800 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--red);padding:5px 7px 4px;border-radius:3px;vertical-align:3px}

/* Mobile menu: grows out of the menu button as a circle, then the links rise in order.
   On close the contents go first so nothing hangs in mid-air. */
.mx .nav-mobile-menu:not(.is-open) .nav-mobile-links,.mx .nav-mobile-menu:not(.is-open) .nav-mobile-logo,.mx .nav-mobile-menu:not(.is-open) .nav-mobile-close{opacity:0;transition:opacity .15s}
.mx .nav-mobile-menu.is-open .nav-mobile-close{animation:ab-spin .7s var(--ease-expo) .25s both}
@keyframes ab-spin{from{opacity:0;rotate:-90deg}}
.mx .nav-mobile-menu{opacity:1;transform:none;clip-path:circle(0px at var(--hx,calc(100% - 36px)) var(--hy,36px));transition:clip-path .6s var(--ease-in-out),visibility 0s linear .6s}
.mx .nav-mobile-menu.is-open{clip-path:circle(150% at var(--hx,calc(100% - 36px)) var(--hy,36px));transition:clip-path .85s var(--ease-in-out),visibility 0s}
.mx .nav-mobile-menu.is-open .nav-mobile-links>*{animation:ab-rise .9s var(--ease-expo) calc(.3s + var(--k,0)*.07s) both}
.mx .nav-mobile-menu.is-open .nav-mobile-logo{animation:ab-shade .9s var(--ease-out) .65s both}

/* Testimonials: drag or swipe the strip; on computers a red arrow cursor follows the pointer over it */
.quote-carousel.is-draggable{touch-action:pan-y;-webkit-user-select:none;user-select:none}
.quote-carousel.is-dragging{cursor:grabbing}
.ab-drag{position:fixed;left:0;top:0;z-index:55;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none;scale:0;transition:scale .45s var(--ease-expo)}
.ab-drag svg{width:28px;height:16px;overflow:visible;transition:translate .45s var(--ease-expo)}
.ab-drag path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ab-drag.is-down svg{translate:4px 0}
.ab-drag.is-on{scale:1}
.ab-drag.is-on.is-down{scale:.82}
@media (hover:hover) and (pointer:fine){.mx .quote-carousel,.mx .quote-carousel *{cursor:none}}

/* Thank-you after a form: a red circle draws around a check mark */
.form-status.has-ok{display:flex;align-items:center;gap:14px}
.ok{width:40px;height:40px;flex:none;overflow:visible}
.ok path{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.ok-c{stroke:var(--red)}
.ok-k{stroke:currentColor}
.ok-on .ok-c{stroke-dashoffset:0;transition:stroke-dashoffset .9s var(--ease-in-out)}
.ok-on .ok-k{stroke-dashoffset:0;transition:stroke-dashoffset .45s var(--ease-out) .8s}

/* Footer: the closing line gets the hero's stroke under "direction." */
.footer-tagline .dir-line path{stroke-width:6}
.mx .footer-tagline .dir-line path{stroke-dasharray:1 1.2;stroke-dashoffset:1.1}
.mx .footer-tagline.drawn .dir-line path{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s var(--ease-in-out)}


@media (prefers-reduced-motion:reduce){
  .tour-row-dates li.is-past span::after{transform:none}
}

/* Header logo: a slight lift on hover, the whole wordmark as one piece */
.mx .site-header-brand img{transition:translate .5s var(--ease-expo)}
@media (hover:hover) and (pointer:fine){.mx .site-header-brand:hover img{translate:0 -3px}}