/* Audio Stories (audiostories.app). Publisher's shelf: cream paper, cloth spines, oak shelf. See PRODUCT.md / contract in index.html. */
:root{
  --paper:#F8F0DC; --ink:#1C1A16; --ink-2:#4B463D; --ink-3:#6E675A; --rule:#DDD0B5;
  --gilt:#DDBD6A; --gilt-dark:#6B5520;
  --mystery:#151615; --biography:#254487; --snooze:#101A35; --tales:#91A789; --tales-ink:#1F2E1B;
  --serif:"Source Serif 4",Georgia,serif; --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper) url(/img/paper.png) 0 0/200px;color:var(--ink);font:400 18px/1.6 var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--gilt);color:var(--ink)}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
img{display:block;max-width:100%;height:auto}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
@media(max-width:640px){.wrap{padding:0 16px}}
h1,h2,h3{font-weight:700;letter-spacing:-.015em;line-height:1.06;margin:0;text-wrap:balance}

/* header */
.top .wrap{display:flex;justify-content:space-between;align-items:center;height:88px;border-bottom:1px solid var(--rule)}
.brand{font:700 36px/1 var(--serif);text-decoration:none;letter-spacing:-.01em}
.top nav{display:flex;gap:28px}
.top nav a{text-decoration:none;font-size:20px;color:var(--ink-2)}
.top nav a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
@media(max-width:640px){.top .wrap{height:64px}.brand{font-size:24px}.top nav{gap:16px}.top nav a{font-size:15px}.top nav a:first-child{display:none}}

/* dark pill (comp: bare white triangle, regular-weight label) */
.pill{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 26px 0 22px;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font:500 19px var(--ui);cursor:pointer;transition:transform .25s var(--ease),background .2s}
.pill:hover{background:#000}
.pill:active{transform:scale(.97)}
.pill .ic{width:14px;height:16px;flex:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M1 1v14l12-7z' fill='%23F8F0DC'/%3E%3C/svg%3E") center/contain no-repeat}
.pill.on .ic{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M1 1h4v14H1zM9 1h4v14H9z' fill='%23F8F0DC'/%3E%3C/svg%3E")}
.pill .t{opacity:.65;font-variant-numeric:tabular-nums}

/* hero */
.hero .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;padding-top:64px;padding-bottom:56px}
h1{font-size:clamp(46px,6.4vw,82px)}
.lede{font-size:21px;color:var(--ink-2);margin:22px 0 0;max-width:24em}
.reel{display:flex;align-items:center;gap:16px;margin-top:32px}
.time{font-size:18px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.bar{height:2px;background:var(--rule);margin-top:18px;max-width:300px;border-radius:2px;overflow:hidden;opacity:0;transition:opacity .4s}
.bar.on{opacity:1}
.bar i{display:block;height:100%;width:0;background:var(--ink)}
@media(max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr);gap:36px;padding-top:40px;padding-bottom:40px}}

/* the shelf: raster cloth spines pressed together, live gilt titles, Snooze leaning, honey-oak plank */
.shelf{position:relative;height:500px}
.books{position:absolute;left:5%;right:5%;bottom:30px;height:470px;display:flex;align-items:flex-end;perspective:700px;perspective-origin:50% 100%}
.spine{position:relative;flex:0 0 var(--w);height:var(--h);text-decoration:none;display:flex;justify-content:center;
  border-radius:16px 16px 3px 3px / 12px 12px 3px 3px;background:var(--c) var(--img) center top/100% auto no-repeat;
  box-shadow:inset 7px 0 12px -7px rgba(255,255,255,.22),inset -9px 0 14px -6px rgba(0,0,0,.55),2px 0 0 rgba(0,0,0,.25);
  transform-origin:50% 100%;transition:transform .7s var(--ease),filter .4s;filter:brightness(1.12) saturate(1.05)}
.spine b{writing-mode:vertical-rl;margin-top:var(--t,118px);font:700 clamp(30px,3.4vw,46px)/1.02 var(--serif);letter-spacing:.005em;white-space:nowrap;
  color:#C8A55A;background:url(/img/foil.png) 0 0/120px;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.s-mystery{--c:var(--mystery);--img:url(/img/spine-mystery.jpg)}
.s-biography{--c:var(--biography);--img:url(/img/spine-biography.jpg)}
.s-snooze{--c:var(--snooze);--img:url(/img/spine-snooze.jpg);transform:rotate(-5deg);transform-origin:0 100%;margin-right:5%}
.s-snooze b{background:none;-webkit-text-fill-color:#EFE3C8;color:#EFE3C8}
.s-tales{--c:var(--tales);--img:url(/img/spine-tales.jpg)}
.s-tales b{background:none;-webkit-text-fill-color:var(--tales-ink);color:var(--tales-ink)}
.spine:hover,.spine.out{transform:rotateX(-12deg);filter:brightness(1.18) saturate(1.08) drop-shadow(-8px 6px 8px rgba(28,26,22,.5)) drop-shadow(8px 6px 8px rgba(28,26,22,.35));z-index:2}
.s-snooze:hover,.s-snooze.out{transform:rotate(-5deg) rotateX(-12deg)}
.plank{position:absolute;left:1%;right:1%;bottom:0;height:56px;background:url(/img/plank.jpg) center/100% 100%;border-radius:3px;filter:brightness(1.12) drop-shadow(0 12px 12px rgba(28,26,22,.28))}
@media(max-width:640px){.shelf{height:380px}.books{height:350px;left:4%;right:4%;bottom:32px}.plank{height:40px}.spine b{font-size:28px;margin-top:var(--tm,84px)}}

/* newsletter: on the paper ground, input joined to its button */
.news{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.news .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center;padding-top:40px;padding-bottom:40px}
.news h2{font-size:32px}
.news p{margin:8px 0 0;color:var(--ink-2);font-size:17px}
.notify{display:flex;height:52px;border:1px solid #BFAE88;border-radius:999px;background:#FBF6EA;padding:4px;max-width:100%}
.notify input[type=email]{flex:1 1 0;min-width:0;border:0;background:none;padding:0 16px;font:400 17px var(--serif);color:var(--ink)}
.notify input[type=email]:focus{outline:none}
.notify:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.notify input::placeholder{color:var(--ink-3)}
.notify button{flex:none;border:0;border-radius:999px;background:var(--ink);color:var(--paper);font:500 16px var(--ui);padding:0 22px;cursor:pointer}
.notify button:hover{background:#000}
.hp{position:absolute;left:-9999px}
.fine{font-size:15px;min-height:22px}
.fine.ok{color:#3c6a3a}.fine.err{color:#9a3b2b}
@media(max-width:800px){.news .wrap{grid-template-columns:minmax(0,1fr);gap:18px}}

/* stories: each picture is a front board in its world's cloth */
.stories .wrap{padding-top:88px;padding-bottom:40px}
.sec{font-size:clamp(34px,4vw,48px);margin-bottom:40px}
.world{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;padding:48px 0;border-top:1px solid var(--rule)}
.world:nth-of-type(even) .board{order:2}
.board{position:relative;margin:0;padding:16px 16px 16px 26px;border-radius:4px 10px 10px 4px;background:var(--c);isolation:isolate;
  box-shadow:inset 9px 0 12px -8px rgba(0,0,0,.6),0 20px 38px -22px rgba(28,26,22,.65)}
.board::before{content:"";position:absolute;inset:0;border-radius:inherit;background:url(/img/cloth.png) 0 0/96px;mix-blend-mode:soft-light;opacity:.35;z-index:-1}
.board img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px rgba(221,189,106,.55)}
.board figcaption{font-size:13px;color:rgba(248,240,220,.82);margin-top:10px}
.w-mystery{--c:var(--mystery);--img:url(/img/spine-mystery.jpg)}.w-biography{--c:var(--biography);--img:url(/img/spine-biography.jpg)}
.w-snooze{--c:var(--snooze);--img:url(/img/spine-snooze.jpg)}.w-tales{--c:var(--tales);--img:url(/img/spine-tales.jpg)}
.w-mystery .board img{object-position:50% 12%}
.w-biography .board img{object-position:40% 20%}
.world h3{font-size:clamp(34px,3.6vw,46px)}
.tag{font:italic 400 22px/1.35 var(--serif);color:var(--ink-2);margin:8px 0 0}
.world p{color:var(--ink-2);max-width:32em}
.status{font-size:16px;color:var(--ink-3)!important;margin-top:4px}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:20px}
.go{display:inline-flex;align-items:center;gap:4px;font-size:17px;font-weight:600;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.go svg{width:16px;height:16px}
@media(max-width:860px){.world{grid-template-columns:minmax(0,1fr);gap:26px;padding:34px 0}.world:nth-of-type(even) .board{order:0}}

/* about: a colophon */
.about{background:var(--ink);color:var(--paper)}
.about .wrap{padding-top:88px;padding-bottom:88px;text-align:center}
.about .mark{width:72px;height:50px;margin:0 auto 22px;display:block;filter:drop-shadow(0 0 0 rgba(0,0,0,0))}
.about h2{font-size:clamp(34px,4vw,50px);max-width:15em;margin:0 auto}
.credit{font:italic 400 21px var(--serif);color:var(--gilt);margin:14px 0 0}
.orn{width:120px;height:12px;color:var(--gilt);margin:26px auto 0;display:block;opacity:.8}
.cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:34px;text-align:left}
.cols p{margin:0;color:#D9CFBA;font-size:17px}
@media(max-width:860px){.cols{grid-template-columns:minmax(0,1fr);gap:18px}}

footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:28px;padding-bottom:40px;font-size:15px;color:var(--ink-3)}
footer nav{display:flex;gap:20px}
.prose{max-width:40em;padding:56px 0 88px}
.prose h1{font-size:44px;margin-bottom:20px}.prose h2{font-size:24px;margin:32px 0 6px}.prose p{color:var(--ink-2)}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.spine:hover,.spine.out{transform:none;outline:3px solid var(--gilt)}.s-snooze:hover,.s-snooze.out{transform:rotate(-5deg)}}