/* stories.html: three-frame collage hero, story index strip, eleven book-spread bands */
.stack{display:grid;grid-template-columns:repeat(6,1fr);align-items:center;padding:20px 0 30px}
.stack .frame{grid-row:1}
.stack .f1{grid-column:1/4;z-index:1}
.stack .f2{grid-column:3/6;z-index:2;translate:0 34px}
.stack .f3{grid-column:4/7;z-index:1;translate:0 -40px}
.stack .frame:hover{z-index:3;scale:1.04;transition:scale .4s var(--spring)}

.lib{--bg:var(--paper);padding-bottom:clamp(48px,6vw,80px)}
.lib h2{color:var(--plum)}
.strip{margin-top:28px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 20px 24px;scrollbar-width:thin}
.strip ul{list-style:none;margin:0 auto;padding:0;display:flex;gap:16px;width:max-content}
.strip li{scroll-snap-align:start}
.strip a{display:grid;gap:8px;width:150px;padding:8px 8px 12px;background:#fff;border-radius:14px;text-decoration:none;color:var(--plum);
  font:400 1rem/1.1 "Lilita One",sans-serif;text-align:center;box-shadow:0 5px 0 rgba(16,30,56,.12),0 14px 22px -14px rgba(16,30,56,.5);transition:transform .35s var(--spring)}
.strip li:nth-child(odd) a{rotate:-2deg}.strip li:nth-child(even) a{rotate:2deg}
.strip a:hover{transform:translateY(-6px) rotate(-2deg)}
.strip img{border-radius:9px;aspect-ratio:1;object-fit:cover}

.spread{overflow-x:clip}
.sp-top{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.spread.flip .sp-art{order:2}
.sp-art{position:relative;margin:0;max-width:460px;width:100%;justify-self:center}
.bignum{position:absolute;z-index:0;top:-.42em;left:-.18em;font:400 clamp(7rem,15vw,13rem)/1 "Lilita One",sans-serif;color:var(--sun-l);
  text-shadow:0 .03em 0 var(--terra-d),0 .06em 0 var(--plum-d),0 .1em .08em rgba(0,0,0,.3);pointer-events:none}
.flip .bignum{left:auto;right:-.18em}
.sp-art .frame{z-index:1}
.sp-copy h2{color:var(--cream);text-shadow:0 .04em 0 rgba(0,0,0,.25),0 .08em 0 var(--plum-d)}
.on-light .sp-copy h2{color:var(--plum);text-shadow:0 .04em 0 var(--cream),0 .08em 0 rgba(12,27,51,.25)}
.virtues{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.virtues .chip{background:var(--sun-l);box-shadow:var(--cut)}
.sp-copy .lead{font-weight:500}
.sp-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,26px);margin-top:clamp(40px,5vw,64px)}
.sp-cards .card{color:var(--ink)}
.sp-cards h3{font-size:1.6rem;color:var(--plum)}
.sp-cards .card:nth-child(1){rotate:-1deg}.sp-cards .card:nth-child(3){rotate:1deg}
.kv ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.kv li{font:400 1.35rem/1.1 "Lilita One",sans-serif;color:var(--terra-d);padding:10px 14px;border-radius:12px;background:var(--sun-l)}
.pt{background:var(--tex),var(--sun-l)}
.on-dark .pt p{color:#24344F}

@media (max-width:899px){
  .sp-top{grid-template-columns:1fr}
  .spread.flip .sp-art{order:0}
  .sp-art{max-width:360px}
  .sp-copy{text-align:center}.sp-copy .lead{margin-inline:auto}.virtues{justify-content:center}
}
@media (max-width:759px){ .sp-cards{grid-template-columns:1fr} .sp-cards .card{rotate:0deg!important} }
@media (max-height:520px) and (orientation:landscape){
  .sp-top{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr)}
  .spread.flip .sp-art{order:2}
  .sp-art{max-width:260px}
  .sp-copy{text-align:left}.virtues{justify-content:flex-start}
  .sp-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.strip{scroll-snap-type:x proximity}
.strip img{width:100%;height:auto}
.bignum{z-index:2;top:auto;bottom:-.32em;left:auto;right:-.12em;font-size:clamp(6rem,12vw,10.5rem)}
.flip .bignum{right:auto;left:-.12em}
/* strip scroll cues: fades and arrow buttons, hidden at each end */
.stripwrap{position:relative}
.stripwrap::before,.stripwrap::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:1;pointer-events:none;transition:opacity .3s}
.stripwrap::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.stripwrap::after{right:0;background:linear-gradient(-90deg,var(--paper),transparent)}
.strip-btn{position:absolute;top:50%;z-index:2;translate:0 -60%;width:48px;height:48px;border:3px solid #fff;border-radius:50%;background:var(--plum);color:var(--cream);font:400 2rem/1 "Lilita One",sans-serif;cursor:pointer;box-shadow:var(--cut);transition:opacity .3s,scale .3s var(--spring)}
.strip-btn:hover{scale:1.1}
.strip-btn.prev{left:12px}.strip-btn.next{right:12px}
.stripwrap.at-start::before,.stripwrap.at-start .prev,.stripwrap.at-end::after,.stripwrap.at-end .next{opacity:0;pointer-events:none;visibility:hidden}
.strip span{text-wrap:balance}