:root{
  color-scheme:dark;
  --bg:#03040a;
  --ink:#e4e7f6;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.75,.15,1);
  --accent:125 140 255;
  background:var(--bg);
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--ink)}
button{font:inherit;color:inherit}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ───────────── the waterfall ───────────── */
#stream{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none;cursor:grab}
#stream:active{cursor:grabbing}
@media (hover:hover) and (pointer:fine){#stream,#stream:active{cursor:none}}

#loader{position:fixed;left:50%;top:50%;width:1px;height:140px;margin:-70px 0 0;overflow:hidden;
  background:rgb(125 140 255 / .1);transition:opacity 1s ease;pointer-events:none}
#loader i{position:absolute;inset:0;background:linear-gradient(#7d8cff00,#9fb0ff 70%,#fff);
  transform-origin:top;transform:scaleY(var(--p,0));transition:transform .3s ease}
body.ready #loader{opacity:0}

#meter{position:fixed;right:28px;top:50%;width:1px;height:110px;margin-top:-55px;background:rgb(200 210 255 / .14);
  opacity:0;transition:opacity .6s ease;pointer-events:none}
#meter i{position:absolute;left:-4px;width:9px;height:1px;background:#eef1ff;top:calc((1 - var(--z,0)) * 100%);box-shadow:0 0 8px #aab6ff}
body.zooming #meter{opacity:1;transition-duration:.15s}

#cursor{position:fixed;left:0;top:0;width:28px;height:28px;margin:-14px 0 0 -14px;pointer-events:none;opacity:0;
  transform:translate3d(-100px,-100px,0);transition:opacity .3s ease;z-index:30}
#cursor::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgb(235 240 255 / .9);
  background:rgb(235 240 255 / .9);transform:scale(.14);
  transition:transform .4s var(--ease),background .3s ease,border-radius .3s ease}
@media (hover:hover) and (pointer:fine){body.pointer #cursor{opacity:1}}
body.over-line #cursor::before{transform:scale(.06,1.1);border-radius:2px}
body.dragging #cursor::before{transform:scale(.3);background:rgb(235 240 255 / .9);border-radius:50%}
body.story-open #cursor{opacity:0!important}

/* ───────────── inside a thread ───────────── */
#story{position:fixed;inset:0;z-index:20;overflow:hidden}
#story[hidden]{display:none}
.story-backdrop{position:absolute;inset:0;opacity:0;transition:opacity .9s ease .1s;
  background:
    radial-gradient(50% 70% at 50% 50%,rgb(var(--accent) / .09),transparent 70%),
    var(--bg)}
#story.on .story-backdrop{opacity:1}
#story.closing .story-backdrop{transition:opacity .7s ease}

/* The thread itself: pours down where it was touched, then glides to the centre. */
.story-thread{position:absolute;top:0;bottom:0;left:var(--tx,50%);width:1px;margin-left:-.5px;pointer-events:none;
  background:linear-gradient(rgb(var(--accent) / .95),rgb(var(--accent) / .7) 50%,rgb(var(--accent) / .95));
  box-shadow:0 0 10px 1px rgb(var(--accent) / .55);
  -webkit-mask:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask:linear-gradient(transparent,#000 14%,#000 86%,transparent);
  transform-origin:top;transform:scaleY(0);
  transition:transform .75s cubic-bezier(.65,0,.25,1),left .8s cubic-bezier(.6,0,.2,1),background .6s ease}
#story.poured .story-thread{transform:scaleY(1)}
/* Once the photographs are out, each carries its own piece of thread and the long line bows out. */
#story.unfolded .story-thread{opacity:0;transition:opacity .8s ease 1.6s}
#story.centered .story-thread{left:50%}
#story.closing .story-thread{transition:transform .6s cubic-bezier(.6,0,.4,1)}

/* Neighbouring lives, a faint line either side. */
.story-side{position:absolute;top:0;bottom:0;width:48px;margin-left:-24px;padding:0;border:0;background:none;cursor:pointer;
  opacity:0;transition:opacity .8s ease;-webkit-mask:linear-gradient(transparent,#000 20%,#000 80%,transparent);mask:linear-gradient(transparent,#000 20%,#000 80%,transparent)}
.story-side.prev{left:calc(50% - var(--side,320px))}
.story-side.next{left:calc(50% + var(--side,320px))}
.story-side::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgb(var(--c,125 140 255));
  opacity:.22;transition:opacity .35s ease,box-shadow .35s ease}
.story-side:hover::before,.story-side:focus-visible::before{opacity:.85;box-shadow:0 0 12px 1px rgb(var(--c,125 140 255) / .8)}
.story-side:focus-visible{outline:none}
#story.unfolded .story-side{opacity:1;transition-delay:.6s}

.story-flow{position:absolute;inset:0;touch-action:none;cursor:grab;
  -webkit-mask:linear-gradient(transparent,#000 13%,#000 87%,transparent);mask:linear-gradient(transparent,#000 13%,#000 87%,transparent)}
#story.dragging .story-flow{cursor:grabbing}
.strip{position:absolute;inset:0}
.item{position:absolute;left:50%;top:0;will-change:transform,opacity}
.item::before,.item::after{content:"";position:absolute;left:50%;width:1px;margin-left:-.5px;height:calc(var(--gap,60px) / 2 + 1px);
  background:rgb(var(--accent) / .85);box-shadow:0 0 8px rgb(var(--accent) / .5);opacity:0;transition:opacity .6s ease 1.1s}
.item::before{bottom:100%}
.item::after{top:100%}
#story.unfolded .item::before,#story.unfolded .item::after{opacity:1}
#story.folding .item::before,#story.folding .item::after{opacity:0;transition-delay:0s}

.shot{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
#story.dragging .shot{cursor:grabbing}
.shot .frame{position:absolute;inset:0;overflow:hidden;background:#0a0c18;
  clip-path:inset(0 50% 0 50%);filter:brightness(2.4) saturate(.2);
  transition:clip-path 1s cubic-bezier(.2,.75,.15,1),filter 1.4s ease}
.shot .frame::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgb(255 255 255 / .07);pointer-events:none}
.shot img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.75,.15,1)}
.shot:hover img{transform:scale(1.03)}
.shot:focus-visible{outline:1px solid rgb(var(--accent));outline-offset:6px}
#story.unfolded .shot .frame{clip-path:inset(0);filter:none}
#story.folding .shot .frame{transition:clip-path .45s cubic-bezier(.6,0,.4,1),filter .45s ease}

/* The journal: a date and a few lines beside each photograph, as if written in its margin. */
.entry{position:absolute;top:50%;width:var(--textw,260px);transform:translateY(-50%);cursor:default;
  opacity:0;translate:0 12px;filter:blur(5px);
  transition:opacity 1s ease,translate 1.2s cubic-bezier(.2,.75,.15,1),filter 1s ease}
.entry.left{right:calc(100% + var(--gutter,48px));text-align:right}
.entry.right{left:calc(100% + var(--gutter,48px))}
.entry .date{display:block;font:500 10px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:rgb(var(--accent) / .9)}
.entry p{margin:14px 0 0;font:400 16px/1.72 var(--serif);color:rgb(214 220 245 / .7);text-wrap:pretty;transition:color .5s ease}
.item:hover .entry p{color:rgb(232 236 252 / .92)}
#story.unfolded .entry{opacity:1;translate:0 0;filter:none}
#story.folding .entry{transition:opacity .3s ease,translate .3s ease,filter .3s ease;transition-delay:0s!important}
#story.stacked .entry{position:relative;top:auto;left:auto;right:auto;width:auto;max-width:34ch;margin:22px auto 0;transform:none;text-align:center}
#story.stacked .entry p{font-size:15px;margin-top:12px}

.story-back{position:absolute;z-index:6;top:max(22px,env(safe-area-inset-top));left:max(22px,env(safe-area-inset-left));
  width:44px;height:44px;padding:0;border-radius:50%;border:1px solid rgb(200 210 255 / .14);
  background:rgb(6 8 18 / .6);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .6s ease,border-color .3s ease}
.story-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.story-back:hover{border-color:rgb(var(--accent) / .7)}
.story-back:hover svg{transform:translateY(-2px)}
.story-back:focus-visible{outline:1px solid rgb(var(--accent));outline-offset:4px}
.story-title{text-shadow:0 1px 12px #000;position:absolute;z-index:6;top:max(22px,env(safe-area-inset-top));left:calc(max(22px,env(safe-area-inset-left)) + 60px);
  height:44px;margin:0;display:flex;align-items:center;font:italic 400 15px/1 var(--serif);color:rgb(215 222 255 / .62);
  letter-spacing:.01em;opacity:0;transition:opacity .8s ease;pointer-events:none}
#story.unfolded .story-back,#story.unfolded .story-title{opacity:1;transition-delay:.5s}
#story.closing .story-back,#story.closing .story-title{opacity:0;transition-delay:0s}

.lightbox{position:absolute;inset:0;z-index:8;display:grid;place-items:center;padding:6vh 5vw 9vh;cursor:zoom-out;
  background:rgb(3 4 10 / .95);opacity:0;transition:opacity .4s ease}
.lightbox[hidden]{display:none}
.lightbox.on{opacity:1}
.lightbox img{max-width:100%;max-height:84vh;object-fit:contain;box-shadow:0 40px 140px #000;
  transform:scale(.965);transition:transform .7s var(--ease)}
.lightbox.on img{transform:none}
.lb-cap{position:absolute;left:0;right:0;bottom:max(3.5vh,env(safe-area-inset-bottom));margin:0;text-align:center;
  font:500 10px/1.6 var(--mono);letter-spacing:.24em;text-transform:uppercase;color:rgb(160 168 200 / .6)}

@media (max-width:640px){.story-side{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;transition-delay:0s!important}
}

#error{position:fixed;inset:40% 10% auto;margin:0;text-align:center;font:16px/1.6 var(--serif);z-index:40}