:root{
  --bg:#181220;--fg:#f6ece4;--accent:#f2b8c6;
  --serif:"Young Serif",Georgia,serif;
  --sans:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --gut:22px;--num:clamp(6.5rem,36vw,10rem);
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --ease:cubic-bezier(.22,.8,.3,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;background:var(--bg);scroll-behavior:smooth;transition:background-color .9s ease}
body{margin:0;min-height:100vh;min-height:100dvh;overflow-x:hidden;font-family:var(--sans);font-size:1rem;line-height:1.5;
  color:var(--fg);background:var(--bg);transition:background-color .9s ease,color .9s ease}
a{color:inherit;touch-action:manipulation}
a:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
img{display:block;max-width:100%}

/* opening */
.top{overflow-x:clip;padding:calc(44px + var(--sat)) var(--gut) 56px;max-width:720px;margin:0 auto}
.fan{position:relative;height:190px;margin-bottom:34px}
.fan img{position:absolute;bottom:0;width:104px;aspect-ratio:4/5;object-fit:cover;border-radius:999px 999px 8px 8px;
  border:3px solid var(--fg);background:var(--fg);left:calc(var(--i)*58px);transform:rotate(calc((var(--i) - 1.5)*7deg));transform-origin:50% 100%;
  animation:deal .9s var(--ease) both;animation-delay:calc(.15s + var(--i)*.11s);transition:border-color .9s ease,background-color .9s ease}
@keyframes deal{from{left:0;transform:rotate(0) translateY(14px);opacity:0}}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.35rem,10.5vw,3.9rem);line-height:1.04;letter-spacing:-.015em;margin:0;max-width:11em}
.lede{margin:18px 0 0;max-width:30ch;font-size:1.05rem;opacity:.82}

/* chapters */
main{max-width:720px;margin:0 auto;padding:0 var(--gut) calc(170px + var(--sab))}
.timeline{list-style:none;margin:0;padding:0}
.chapter{opacity:.55;transition:opacity .6s ease}
.chapter.active{opacity:1}
.figure{position:relative;width:82%;margin:0 0 calc(var(--num)*.34)}
.chapter:nth-of-type(even) .figure{margin-left:auto}
.frame{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:999px 999px 14px 14px;background:rgba(127,127,127,.25);position:relative}
.frame img{width:100%;height:100%;object-fit:cover}
.frame-full{aspect-ratio:var(--image-ratio);border-radius:26px}
.frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(transparent,rgba(10,6,16,.45));pointer-events:none}
.num{position:absolute;bottom:calc(var(--num)*-.3);font-family:var(--serif);font-size:var(--num);line-height:.8;letter-spacing:-.04em;
  color:var(--accent);right:-9%;pointer-events:none;transition:color .9s ease}
.chapter:nth-of-type(even) .num{right:auto;left:-9%}
.text{max-width:34rem}
.text time{display:block;font-weight:600;font-size:.98rem;color:var(--accent);transition:color .9s ease}
.text h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,9vw,2.9rem);line-height:1.04;letter-spacing:-.012em;margin:6px 0 12px}
.text p{margin:0;max-width:32ch;opacity:.88}
.place{display:block;margin-top:10px;font-size:.92rem;opacity:.68}
.go{display:inline-flex;align-items:center;min-height:48px;margin-top:20px;padding:0 24px;border-radius:99px;font-weight:700;text-decoration:none;
  background:var(--accent);color:var(--bg);transition:background-color .9s ease,color .9s ease;-webkit-touch-callout:none}
.go:active{opacity:.85}

/* time between dates */
.gap{position:relative;height:190px;display:flex;align-items:center;justify-content:center}
.gap::before{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:2px dashed currentColor;opacity:.3}
.gap span{position:relative;padding:6px 14px;border-radius:99px;background:var(--bg);font-size:.9rem;font-weight:500;opacity:.8;transition:background-color .9s ease}

.end{margin:90px 0 0;text-align:center;font-family:var(--serif);font-size:1.25rem;opacity:.7}

/* floating preview */
.peek{position:fixed;z-index:50;left:50%;bottom:calc(14px + var(--sab));width:min(calc(100% - 28px),400px);display:flex;align-items:center;gap:12px;
  padding:8px 18px 8px 8px;border-radius:99px;color:var(--bg);background:var(--fg);box-shadow:0 14px 40px rgba(0,0,0,.35);
  transform:translate(-50%,170%);transition:transform .55s var(--ease),background-color .9s ease,color .9s ease;pointer-events:none}
.peek.show{transform:translate(-50%,0)}
.peek-pic{position:relative;flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;background:rgba(127,127,127,.3)}
.peek-layer{position:absolute;top:0;right:0;bottom:0;left:0;background:center/cover no-repeat;opacity:0;transition:opacity .4s}
.peek-layer.on{opacity:1}
.peek-text{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.2}
.peek-text span{font-size:.82rem;font-weight:600;opacity:.75}
.peek-text strong{font-family:var(--serif);font-weight:400;font-size:1.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peek-ticks{display:flex;gap:5px}
.peek-ticks i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.28;transition:opacity .3s,transform .3s}
.peek-ticks i.on{opacity:1;transform:scale(1.5)}


/* coming back to a saved spot: place the page silently, then fade it in */
html.restoring body{opacity:0}
html.restoring,html.restoring *{transition:none!important}
@keyframes settle{from{opacity:0}}
html.restored body{animation:settle .5s ease}
@media(min-width:760px){
  :root{--gut:40px;--num:11rem}
  .top{padding-top:calc(84px + var(--sat))}
  .chapter{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .chapter .figure{width:100%;margin-bottom:0}
  .chapter:nth-of-type(even) .figure{order:2;margin-left:0}
  .num{bottom:-1.2rem;right:1.2rem}
  .chapter:nth-of-type(even) .num{left:1.2rem}
  .peek{bottom:24px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fan img{animation:none}
  *{transition-duration:.01ms!important}
}