/* ============================================================
   All Who Rested Here  ·  listen.css
   The book page only. It loads after site.css and keeps the site's
   footer, but the page is set like the book: a dark sanctuary, then
   paper. Book type is Cormorant Garamond, from The Still Small Voice.
   Motion lives in assets/js/book.js and switches off for reduced motion.
   ============================================================ */
/* Concept: the page behaves like the book. A dark sanctuary opening, then paper.
   One accent (the site's burnt amber), the photograph's own warm light, ink, paper. */
body.book-page{
  --ink:#121317; --night:#0E0F12; --paper:#F3F1EC; --ground:#E9E7E2; --dim:#62656C; --rule:#CFCAC1;
  --amber:#A83E17; --light:#E7C99A; --onDark:#ECE9E3; --onDim:#9C9890;
  --book:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --ui:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --gut:max(18px,env(safe-area-inset-left,0px));
}
body.book-page{margin:0;background:var(--ground);color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(18px,env(safe-area-inset-right,0px))}
.lab{font-family:var(--ui);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

/* the site's masthead, kept so the page still belongs to samueljonmedia.com */
.mast{position:absolute;inset:0 0 auto;z-index:5}
.mast .wrap{display:flex;justify-content:space-between;align-items:center;padding-block:20px;gap:14px;flex-wrap:wrap}
.mast .logo img{height:40px;width:auto;display:block}
.mast nav{display:flex;gap:clamp(12px,2vw,26px);flex-wrap:wrap}
.mast nav a{text-decoration:none;color:var(--onDim);font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.mast nav a[aria-current]{color:var(--onDark)}

/* 1. the sanctuary */
.open{position:relative;min-height:clamp(460px,64svh,640px);background:var(--night) center/cover no-repeat;color:var(--onDark);
  display:flex;align-items:flex-end;overflow:hidden}
.open::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,15,18,.55) 0%,rgba(14,15,18,0) 28%,rgba(14,15,18,0) 52%,rgba(14,15,18,.86) 100%);pointer-events:none}
.open .wrap{position:relative;z-index:2;width:100%;padding-block:clamp(90px,10vw,120px) clamp(26px,4vw,48px)}
.open .kick{color:var(--light);margin:0 0 18px;text-shadow:0 1px 12px rgba(0,0,0,.85)}
.open h1{white-space:normal;font-family:var(--book);font-weight:300;font-size:clamp(48px,7.4vw,108px);line-height:.9;letter-spacing:-.022em;margin:0;max-width:12ch;text-wrap:balance}
.open h1 i{font-weight:300;color:var(--light)}
.open .lines{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end;margin-top:clamp(22px,3.4vw,40px);
  padding-top:18px;border-top:1px solid rgba(236,233,227,.22)}
@media(max-width:760px){.open .lines{grid-template-columns:1fr}}
.open .lines p{margin:0;font-family:var(--book);font-size:clamp(19px,2vw,24px);line-height:1.38;color:var(--onDark);max-width:42ch}
.open .lines p span{display:block}
.open .lines p span:last-child{color:var(--light);font-style:italic}
.cta{display:inline-flex;align-items:center;gap:14px;text-decoration:none;background:var(--amber);color:#FFF4EC;
  padding:16px 24px;font-family:var(--ui);font-weight:600;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;border:0;cursor:pointer;white-space:nowrap}
.cta small{font-weight:400;opacity:.8;letter-spacing:.16em}
.cta.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.cta[aria-disabled="true"]{pointer-events:none}

/* the groove: the book's only ornament. a gouge, never a letter */
.groove{display:block;width:84px;height:14px;margin:0 auto}

/* 2. the first page, set as a page */
.leaf{padding-block:clamp(56px,9vw,120px)}
.leaf .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px) minmax(0,1fr);gap:clamp(18px,4vw,56px);align-items:start}
@media(max-width:900px){.leaf .grid{grid-template-columns:1fr}}
.page{background:var(--paper);padding:clamp(34px,5.4vw,72px) clamp(26px,5vw,68px) clamp(30px,4vw,48px);
  box-shadow:0 1px 0 var(--rule),0 40px 70px -48px rgba(18,19,23,.55);position:relative}
.page .head{display:flex;justify-content:space-between;color:var(--dim);margin:0 0 clamp(26px,4vw,44px)}
.page p{font-family:var(--book);font-size:clamp(20px,1.9vw,23px);line-height:1.5;margin:0 0 .62em;color:#1E1F23;text-wrap:pretty}
.page p.first::first-letter{float:left;font-size:4.3em;line-height:.8;padding:.06em .1em 0 0;color:var(--amber);font-weight:400}
.page p.gap{margin-top:1.2em}
.page .folio{display:block;text-align:center;margin-top:clamp(26px,3vw,40px);font-family:var(--book);font-style:italic;color:var(--dim);font-size:17px}
.margin{padding-top:clamp(40px,7vw,96px);color:var(--dim)}
.margin p{font-size:14.5px;line-height:1.75;margin:0 0 14px;max-width:30ch}
.margin .lab{color:var(--amber);margin-bottom:14px}
.margin.r{text-align:left}
@media(max-width:900px){.margin{padding-top:0}.margin.l{display:none}}

/* 3. the line */
.quote{background:var(--night);color:var(--onDark);text-align:center;padding:clamp(70px,12vw,150px) var(--gut)}
.quote p{font-family:var(--book);font-style:italic;font-weight:300;font-size:clamp(40px,7.4vw,104px);line-height:1;margin:0 0 24px;letter-spacing:-.02em}
.quote .lab{color:var(--onDim)}

/* 4. contents */
.contents{padding-block:clamp(60px,9vw,120px) clamp(40px,6vw,80px)}
.sec{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:start}
@media(max-width:860px){.sec{grid-template-columns:1fr}}
.sec h2{font-family:var(--book);font-weight:300;font-size:clamp(44px,5.6vw,76px);line-height:.95;margin:0 0 18px;letter-spacing:-.02em}
.sec .intro p{color:var(--dim);font-size:15px;line-height:1.75;margin:0 0 14px;max-width:34ch}
.toc{list-style:none;margin:0;padding:0}
.toc li{padding-block:clamp(16px,2.2vw,24px);border-bottom:1px solid var(--rule)}
.toc li:first-child{border-top:1px solid var(--ink)}
.toc .row{display:flex;align-items:baseline;gap:12px}
.toc .num{font-family:var(--book);font-style:italic;color:var(--amber);font-size:20px;min-width:72px}
.toc .t{font-family:var(--book);font-size:clamp(26px,3vw,38px);line-height:1.05;white-space:nowrap}
.toc .t i{color:var(--dim)}
.toc .dots{flex:1;border-bottom:1px dotted #9C978E;transform:translateY(-7px);min-width:24px}
.toc .when{white-space:nowrap;color:var(--dim)}
.toc .sub{margin:6px 0 0 84px;color:var(--dim);font-size:14px;line-height:1.6}
.toc li.bonus .t{font-style:italic;color:#4A4C52}
@media(max-width:640px){.toc .row{flex-wrap:wrap}.toc .t{white-space:normal}.toc .dots{display:none}.toc .when{flex-basis:100%;margin-left:84px}.toc .num{min-width:60px}.toc .sub{margin-left:72px}}

/* 5. editions */
.eds{background:var(--paper);padding-block:clamp(60px,9vw,120px)}
.edlist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
@media(max-width:860px){.edlist{grid-template-columns:1fr}}
.ed{padding:clamp(22px,3vw,36px) clamp(0px,2.4vw,32px) clamp(26px,3vw,36px) 0;display:flex;flex-direction:column;gap:16px}
.ed + .ed{border-left:1px solid var(--rule);padding-left:clamp(18px,2.4vw,32px)}
@media(max-width:860px){.ed + .ed{border-left:0;border-top:1px solid var(--rule);padding-left:0}}
.ed .price{font-family:var(--book);font-weight:300;font-size:clamp(64px,7vw,96px);line-height:.85;letter-spacing:-.03em}
.ed .price sup{font-size:.4em;vertical-align:.95em;margin-right:2px}
.ed .name{color:var(--amber)}
.ed p{margin:0;color:var(--dim);font-size:15px;line-height:1.72;max-width:32ch;flex:1}
.ed p b{color:var(--ink);font-weight:600}
.ed.lead .price{color:var(--ink)}
.wait{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;max-width:620px;margin-top:clamp(34px,4vw,50px)}
@media(max-width:560px){.wait{grid-template-columns:1fr}}
.wait input{font:inherit;font-size:15px;padding:14px;border:1px solid var(--rule);background:#fff;color:var(--ink);border-radius:0}
.fine{color:var(--dim);font-size:13.5px;line-height:1.7;margin:18px 0 0;max-width:62ch}

/* 6. questions */
.qs{padding-block:clamp(60px,9vw,120px)}
.qgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,64px);border-top:1px solid var(--ink)}
@media(max-width:860px){.qgrid{grid-template-columns:1fr}}
.qs details{border-bottom:1px solid var(--rule)}
.qs summary{list-style:none;cursor:pointer;padding-block:20px;display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  font-family:var(--book);font-size:clamp(22px,2.2vw,27px);line-height:1.15}
.qs summary::-webkit-details-marker{display:none}
.qs summary span{font-family:var(--ui);color:var(--dim);font-size:18px;transition:transform .2s}
details[open] .qs summary span{transform:rotate(45deg);color:var(--amber)}
.qs details p{margin:0 0 22px;color:var(--dim);font-size:15px;line-height:1.75;max-width:52ch}

/* 7. the author: the photograph does the introducing */
.author{background:var(--night);color:var(--onDark)}
.author .in{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;padding-block:clamp(56px,8vw,104px)}
@media(max-width:760px){.author .in{grid-template-columns:1fr}.author .ph{max-width:240px}}
.author .ph{background:#111 center 30%/cover no-repeat;filter:grayscale(1) contrast(1.06);aspect-ratio:2/3;width:100%;box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.author .note{max-width:640px}
.author .lab{color:var(--light);margin:0 0 26px}
.author p.lab{font-family:var(--ui);font-size:10.5px;line-height:1.4;font-weight:400}
.author p{font-family:var(--book);font-size:clamp(22px,2.3vw,30px);line-height:1.38;margin:0 0 .8em;font-weight:300}
.author p.last{font-style:italic;color:var(--light)}
.author .sign{font-family:var(--book);font-style:italic;font-size:30px;color:var(--onDark);margin-top:28px}

.closing{text-align:center;padding:clamp(60px,9vw,110px) var(--gut)}
.closing p{font-family:var(--book);font-size:clamp(28px,3.4vw,44px);font-weight:300;margin:18px auto 30px;max-width:22ch;line-height:1.15}


/* ---- the page turn ---- */
.book{display:grid;perspective:2400px;perspective-origin:30% 50%}
.book > .page{grid-area:1/1}
.page.front{transform-origin:left center;transform-style:preserve-3d;transition:transform 1.25s cubic-bezier(.45,.05,.2,1),box-shadow 1.25s;z-index:2;backface-visibility:hidden}
.page.under{z-index:1}
.book.turned .page.front{transform:rotateY(-178deg);pointer-events:none;box-shadow:none}
.book.turned .page.under{z-index:3}
/* the shadow the turning leaf throws on the page beneath */
.page.under::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,19,23,.28),rgba(18,19,23,0) 60%);opacity:0;pointer-events:none;transition:opacity .9s}
.book.turning .page.under::after{opacity:1}
.page .pfoot{display:flex;justify-content:space-between;align-items:center;margin-top:clamp(26px,3vw,40px)}
.page .pfoot .folio{margin:0}
.turn{font-family:var(--ui);font-size:10px;letter-spacing:.22em;text-transform:uppercase;background:none;border:0;color:var(--amber);cursor:pointer;padding:8px 0;display:inline-flex;gap:10px;align-items:center}
.turn.fwd::after{content:"";width:28px;height:1px;background:currentColor;transition:width .3s}
.turn.fwd:hover::after{width:46px}
.turn.back{color:var(--dim)}
.turn.back::before{content:"";width:20px;height:1px;background:currentColor}
.page p.hear{font-family:var(--ui);font-size:10px;line-height:1.6;color:var(--amber);margin:22px 0 0;text-align:right}
/* a lifted corner that invites the turn */
.curl{position:absolute;right:0;bottom:0;width:46px;height:46px;background:linear-gradient(225deg,var(--ground) 0 48%,#E2DED6 50%,#FBFAF7 72%);
  box-shadow:-3px -3px 6px -2px rgba(18,19,23,.18);transition:width .35s,height .35s;cursor:pointer}
.page.front:hover .curl{width:66px;height:66px}
@media (prefers-reduced-motion:reduce){.page.front{transition:opacity .3s!important}.book.turned .page.front{transform:none;opacity:0}}

/* ---- depth and movement, all of it from the book itself ---- */
.open{background:var(--night)}
.open .sanct{position:absolute;inset:-8% 0 -8% 0;background:center 40%/cover no-repeat;will-change:transform;transform:translate3d(0,0,0) scale(1.06)}
.open .dust{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;mix-blend-mode:screen}
.open::after{z-index:1}
.open .wrap{will-change:transform}
/* the groove carves itself when it comes into view */
.groove path{stroke-dasharray:120;stroke-dashoffset:0}
.js .groove:not(.in) path{stroke-dashoffset:120}
.js .groove.in path{transition:stroke-dashoffset 1.8s cubic-bezier(.6,.05,.25,1)}
.js .groove.in path + path{transition-delay:.5s}
/* the contents leaders draw out to their week */
.toc .dots{transform-origin:left center}
.js .toc li:not(.in) .dots{transform:translateY(-7px) scaleX(0)}
.js .toc li .dots{transition:transform 1.1s cubic-bezier(.3,.7,.2,1)}
.js .toc li .when{transition:opacity .5s .7s}
.js .toc li:not(.in) .when{opacity:.25}
/* the page lifts off the paper as it reaches you */
.page{will-change:transform;transition:box-shadow .6s}
.margin{will-change:transform}
@media (prefers-reduced-motion:reduce){
  .open .sanct,.open .wrap,.book,.margin{transform:none!important}
  .open .dust{display:none}
  .js .groove path{stroke-dashoffset:0!important}
  .js .toc li .dots{transform:translateY(-7px)!important}
  .js .toc li .when{opacity:1!important}
}
/* the sample player, beside the first page */
.sample{margin-top:18px}
.sample audio{width:100%;max-width:300px}
/* messages from the wait list */
.msg{margin:12px 0 0;color:var(--amber);font-size:14px;line-height:1.6;max-width:60ch}
.msg.ok{color:var(--dim)}
.page p.hear{font-family:var(--ui);font-size:10px;line-height:1.6;color:var(--amber);margin:22px 0 0;text-align:right}
.book-page .foot{margin-top:0}
.toc .when.out{color:var(--amber)}