/* Home page */
main:not([class]){padding-inline:var(--gutter)}

.intro{max-width:40rem;margin:0 0 4.5rem}
.intro p{margin:0;font:400 1.5rem/1.5 var(--serif)}
.breaker{display:none}

/* Stories: photo and text side by side, flipping each time */
.stories{max-width:62rem;margin:0}
.story{display:flex;align-items:flex-start;gap:3.5rem;margin-bottom:5.5rem}
.story:nth-of-type(even){flex-direction:row-reverse}
.story img{flex:0 0 min(24rem,42%);width:min(24rem,42%);height:auto;padding:6px;background:var(--ink);border-radius:2px;transform:rotate(-.9deg)}
.story:nth-of-type(even) img{transform:rotate(.7deg)}
.story__text{flex:1;max-width:34rem}
.story__text h2{margin:0 0 .7rem;font:500 2rem/1.15 var(--serif)}
.story__text p{margin:0 0 1rem;color:var(--soft)}

/* Favourites */
.fav{max-width:62rem;margin:0 0 4rem}
.fav>h2{margin:0;font:500 2rem/1.15 var(--serif)}
.fav-tabs{display:flex;gap:1.6rem;margin:.9rem 0 1.4rem;border-bottom:1px solid var(--line)}
.fav-tabs button{margin:0 0 -1px;padding:.35rem 0;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);cursor:pointer;text-transform:capitalize;font:inherit}
.fav-tabs button:hover{color:var(--ink)}
.fav-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}

.fav-stage{width:fit-content;max-width:100%;margin:0}
.fav-row{list-style:none;margin:0 -.5rem;padding:.5rem;display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:.5rem;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.fav-card{flex:0 0 180px;width:180px;scroll-snap-align:start;display:block;padding:0;border:0;background:none;color:inherit;text-align:left;font:inherit;cursor:default;text-decoration:none}
.fav-card:focus-visible{outline:0}
.fav-cover{position:relative;display:block;width:180px;height:270px;border-radius:2px;overflow:hidden;background:var(--card)}
.fav-cover img{display:block;width:100%;height:100%;object-fit:cover}
.fav-card.active .fav-cover{outline:2px solid var(--accent);outline-offset:3px}
.fav-note{position:absolute;inset:auto 0 0 0;padding:.5rem .65rem;font-size:1rem;line-height:1.3;color:var(--ink);background:rgba(16,25,32,.9);opacity:0;transition:opacity .2s}
.fav-card:hover .fav-note,.fav-card:focus-visible .fav-note{opacity:1}
@media (hover:none){.fav-note{opacity:1}}
.fav-title{display:block;margin-top:.55rem;font:500 1.15rem/1.25 var(--serif)}
.fav-by{display:block;color:var(--muted);font-size:1rem;line-height:1.3}

/* Detail panel under the cards. The banner photo sits here until a card is
   hovered, then blurs into a solid colour and the card's paragraph fades in.
   The panel is always the same height, so the page never jumps. */
.fav-detail{position:relative;height:clamp(250px,28vw,310px);margin-top:1.2rem;border-radius:3px;overflow:hidden;background:var(--card);border:1px solid var(--line)}
.fav-detail__img{position:absolute;inset:-24px;background:linear-gradient(rgba(10,16,20,.15),rgba(10,16,20,.45)),var(--fav-banner,url(/images/favorite.jpg)) center/cover;transition:filter .6s ease}
.fav-detail__veil{position:absolute;inset:0;background:var(--card);opacity:0;transition:opacity .6s ease}
.fav-detail__hint{position:absolute;left:1.4rem;bottom:1.1rem;margin:0;color:#fff;font:italic 400 1.1rem var(--serif);transition:opacity .3s ease}
.fav-detail__hint .tap{display:none}
.fav-detail__text{position:absolute;inset:0;padding:1.4rem 1.75rem;overflow-y:auto;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .2s ease}
.fav-detail__title{margin:0;font:500 1.65rem/1.2 var(--serif)}
.fav-detail__by{margin:.1rem 0 .9rem;color:var(--muted)}
.fav-detail__desc{margin:0 0 .9rem;line-height:1.6}
.fav-detail__link{color:var(--ink)}
.fav-detail.open .fav-detail__img{filter:blur(22px)}
.fav-detail.open .fav-detail__veil{opacity:1}
.fav-detail.open .fav-detail__hint{opacity:0}
.fav-detail.open .fav-detail__text{opacity:1;pointer-events:auto;transition:opacity .5s ease .35s}
.fav-detail.open .fav-detail__text.swapping{opacity:0;transition-delay:0s;transition-duration:.18s}
@media (hover:none){.fav-detail__hint .hov{display:none}.fav-detail__hint .tap{display:inline}}
@media (prefers-reduced-motion:reduce){.fav-note,.fav-detail__img,.fav-detail__veil,.fav-detail__text{transition:none!important}}

@media (max-width:760px){
  .intro{margin-bottom:3rem}
  .intro p{font-size:1.3rem}
  .story,.story:nth-of-type(even){flex-direction:column;align-items:stretch;gap:1.4rem;margin-bottom:3.5rem}
  .story img,.story:nth-of-type(even) img{flex:none;width:100%}
  .story__text h2{font-size:1.75rem}
  .fav-tabs{overflow-x:auto;scrollbar-width:none;gap:1.4rem}
  .fav-tabs button{flex:none}
  .fav-card{flex-basis:140px;width:140px}
  .fav-cover{width:140px;height:210px}
  .fav-detail{height:350px}
  .fav-detail__text{padding:1.1rem 1.25rem}
}