/* Media Secrets. The book is the object in frame; everything else is quiet. */

/* hero */
.ms-hero{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(40px,5vw,72px) clamp(48px,6vw,80px)}
.ms-light{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(42% 60% at 74% 46%,rgba(200,169,81,.22),transparent 70%),linear-gradient(180deg,var(--blackout) 0,var(--navy-dark) 50%,var(--blackout) 100%)}
.ms-light::after{content:"";position:absolute;width:min(920px,110vw);aspect-ratio:1;right:-14%;top:-22%;border-radius:50%;border:1px solid rgba(200,169,81,.22);box-shadow:0 0 0 100px rgba(200,169,81,.02)}
.ms-hero-grid{display:grid;gap:56px;align-items:center}
.ms-hero h1{font-size:var(--fs-hero);max-width:14em;margin-top:14px}
.ms-hero .lead{margin-top:22px;max-width:33em}
.ms-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.ms-credits{flex-direction:column;gap:9px;margin-top:30px}
.ms-credits li{align-items:flex-start}
.ms-credits li::before{margin-top:.5em}
.ms-book{position:relative;margin:0 auto 56px;width:min(72vw,340px)}
.ms-cover{background:var(--blackout);line-height:0}
.ms-cover img{display:block;width:100%;height:auto}
/* a spine highlight and a gold edge give the cover some body without a drop shadow */
.ms-cover::before{content:"";position:absolute;inset:0 auto 0 0;width:7%;z-index:1;background:linear-gradient(90deg,rgba(10,20,36,.5),rgba(255,255,255,.1) 60%,transparent);pointer-events:none}
.ms-cover::after{content:"";position:absolute;inset:0;z-index:1;box-shadow:inset 0 0 0 1px rgba(227,203,133,.28);pointer-events:none}
.ms-cover .vf{--vf-inset:-14px;--s:26px}
.ms-book .l3{position:absolute;left:-14px;bottom:-46px;z-index:3}
html.js:not(.motion-off) .ms-light{animation:ms-lights var(--t-scene) var(--e-out) backwards}
html.js:not(.motion-off) .ms-cover .vf{animation:ms-lock 720ms var(--e-focus) 320ms backwards}
html.js:not(.motion-off) .ms-book .l3{animation:ms-wipe 620ms var(--e-inout) 760ms backwards}
@keyframes ms-lights{from{opacity:.25}}
@keyframes ms-lock{from{opacity:0;transform:scale(1.13)}}
@keyframes ms-wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
@media (min-width:900px){
  .ms-hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .ms-book{width:min(100%,330px);margin-right:clamp(0px,4vw,56px)}
}

/* running order */
.ms-inside-grid{display:grid;gap:40px 72px;align-items:start}
.ms-inside-intro>*+*{margin-top:1.1em}
.ms-inside-intro h2{margin-bottom:.1em}
.ms-best{padding-top:1.1em;border-top:1px solid var(--line,#d6dce8);font-size:var(--fs-small)}
.ms-best .label{display:block;color:var(--gold-ink);margin-bottom:6px}
.ms-rundown{margin:0;padding:0;list-style:none;border-top:2px solid var(--navy-dark)}
.ms-rundown li{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:8px 18px;align-items:baseline;padding:22px 0;border-bottom:1px solid #d6dce8;font:400 clamp(1.2rem,1.9vw,1.5rem)/1.25 var(--serif);color:var(--navy-dark);text-wrap:pretty}
.ms-tc{color:var(--gold-ink);font-size:var(--fs-label)}
@media (min-width:900px){
  .ms-inside-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .ms-inside-intro{position:sticky;top:120px}
}

/* endorsements */
.ms-quotes{display:grid;gap:clamp(36px,5vw,64px) clamp(32px,5vw,72px)}
.ms-q{margin:0;padding-top:28px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:22px}
.ms-q blockquote{margin:0}
.ms-q blockquote p{font:italic 400 clamp(1.3rem,2vw,1.65rem)/1.38 var(--serif);color:var(--white);text-wrap:pretty}
.ms-q .l3{margin-top:auto;align-self:flex-start}
.ms-on{font:600 var(--fs-label)/1.3 var(--sans);color:var(--gold)}
@media (min-width:900px){.ms-quotes{grid-template-columns:1fr 1fr}}

/* two ways to read */
.ms-ways{display:grid;gap:32px}
.ms-buy{padding:clamp(24px,3.4vw,44px);border:1px solid #d6dce8;background:var(--white)}
.ms-buy{display:flex;flex-direction:column}
.ms-buy>*+*{margin-top:1em}
.ms-thumb{margin-top:auto!important;padding-top:1em;width:150px;height:auto;align-self:flex-start;box-sizing:content-box;background:none}
.ms-buy h3,.ms-form h3{font-size:var(--fs-m)}
.ms-form{padding:clamp(24px,3.4vw,44px);background:var(--navy-dark)}
.ms-form>p{margin-top:.6em}
.ms-form form{display:grid;gap:16px;margin-top:22px}
.ms-pair{display:grid;gap:16px}
.ms-form .form-note{color:#a9b7cd}
@media (min-width:700px){.ms-pair{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.ms-ways{grid-template-columns:5fr 7fr;align-items:stretch}}

.ms-faq{margin-top:clamp(56px,7vw,96px)}
.ms-faq-h{font-size:var(--fs-m);margin-bottom:24px}

/* author, tied to training */
.ms-hero .label .link{color:inherit}

/* ask about working together (the live book-inquiry form) */
.ms-ask{display:grid;gap:32px;margin-top:clamp(40px,5vw,64px);padding:clamp(24px,3.4vw,44px);border:1px solid #d6dce8;border-top:3px solid var(--gold);background:var(--white);scroll-margin-top:96px}
.ms-ask-copy h3{font-size:var(--fs-m);margin:6px 0 12px;max-width:16em}
.ms-ask-copy>p{max-width:32em}
.ms-ask-copy .small{margin-top:14px}
.ms-ask-copy .link{display:inline-flex;align-items:center;min-height:44px}
.ms-ask-form{display:grid;gap:16px;min-width:0}
.ms-ask-form .input{background:#fff;color:var(--ink);border-color:#7d889c}
.ms-ask-form .form-note{color:var(--slate)}
@media (min-width:900px){.ms-ask{grid-template-columns:5fr 7fr;gap:56px}}