:root{
  --paper:#f1efe9;
  --navy:#051236;
  --ease-smooth:cubic-bezier(0.165,0.84,0.44,1);
  --font-main:"Inter Tight","Archivo",Helvetica,Arial,sans-serif;
  --card-width:min(37.5rem,88%);
  --card-gap:.8rem;
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:max(2.6666666667vw,1px);-webkit-text-size-adjust:100%}
@media(min-width:768px){html{font-size:max(1.3020833333vw,1px)}}
@media(min-width:1200px){html{font-size:max(.5208333333vw,1px)}}
html,body{background:var(--navy)}
body{
  --padding-x:1.6rem;
  font-family:var(--font-main),sans-serif;
  background-color:var(--navy);
  color:var(--paper);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
@media(min-width:768px){body{--padding-x:3.2rem}}
@media(min-width:1200px){body{--padding-x:4.8rem}}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}

.showcase{position:relative;background-color:var(--paper);background:#f1efe9;color:#f1efe9;width:100vw;overflow:clip;isolation:isolate}

.arrow-btn{
  width:4.8rem;height:4.8rem;border:.1rem solid rgba(241,239,233,.5);display:grid;place-items:center;color:#f1efe9;
  transition:background .3s var(--ease-smooth),color .3s var(--ease-smooth),opacity .3s;pointer-events:auto;background:rgba(0,0,0,0);
}
.arrow-btn:hover{background:#f1efe9;color:#000}
.arrow-btn:disabled{opacity:.3;pointer-events:none}

.desktop-view{display:none}
@media(min-width:1200px){
  .showcase{height:calc(var(--total) * 100svh)}
  .desktop-view{display:block;height:100%}
  .mobile-view{display:none}
  .pinned-stage{position:sticky;top:0;height:100svh;height:100dvh;overflow:hidden;isolation:isolate;background:#f1efe9}
  .photo-zone{position:absolute;inset:0;display:grid;place-items:center;z-index:1}
  .photo-stage{
    position:relative;width:calc(100vw / 2.5);max-width:76rem;min-width:44rem;aspect-ratio:1.28 / 1;
  }
  #water-canvas{position:absolute;inset:0;width:100%;height:100%;display:none;cursor:pointer}
  .photo-stage.water-on #water-canvas{display:block}
  .photo-stage.water-on .photo-slide{visibility:hidden !important;opacity:0 !important}
  .photo-stage.water-on .photo-grain{display:none}
  .photo-slide{position:absolute;inset:0;visibility:hidden;opacity:0;--mx:50%;--my:50%;--r:150%}
  .photo-slide.is-active{visibility:visible;opacity:1;--r:150%}
  .photo-mask{
    position:absolute;inset:0;overflow:hidden;background:transparent;
    clip-path:circle(var(--r) at var(--mx) var(--my));
    will-change:clip-path;
  }
  .photo-mask img{width:100%;height:100%;object-fit:cover;transform:scale(1.14);will-change:transform,filter}
  .photo-slide.is-active .photo-mask img{transform:scale(1)}

  .photo-shine{
    position:absolute;inset:-1px;pointer-events:none;opacity:0;
    background:radial-gradient(circle at var(--mx) var(--my), transparent 0%, transparent calc(var(--r) - 12%), rgba(241,239,233,.22) calc(var(--r) - 2%), transparent var(--r));
    mix-blend-mode:screen;
  }
  .photo-grain{
    position:absolute;inset:-20%;pointer-events:none;opacity:.09;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  .overlay-text{position:absolute;inset:0;z-index:5;mix-blend-mode:difference;color:#f1efe9;pointer-events:none}
  .overlay-text .arrow-btn{pointer-events:auto}
  .top-bar{
    position:absolute;top:0;left:0;right:0;display:flex;justify-content:flex-end;align-items:center;
    padding:2.4rem var(--padding-x);font-size:1.3rem;
  }
  .slide-count{font-size:1.3rem;letter-spacing:.14em;display:flex;gap:.8rem;align-items:baseline;color:#f1efe9}
  .slide-count i{font-style:normal;opacity:.6}
  .title-stack{
    position:absolute;left:12%;left:clamp(12rem,15vw,28.8rem);top:50%;transform:translateY(-50%);
    max-width:64rem;display:grid;overflow:visible;z-index:6;
  }
  .slide-title{
    grid-area:1/1;font-weight:600;font-size:3.2rem;line-height:1.02;letter-spacing:-.096rem;font-family:var(--font-main);
    color:#f1efe9;overflow:visible;white-space:normal;overflow-wrap:break-word;
    opacity:0;visibility:hidden;filter:blur(10px);
  }
  @media(min-width:768px){.slide-title{font-size:4.8rem}}
  @media(min-width:1200px){.slide-title{font-size:8.8rem}}
  .slide-title.is-active{opacity:1 !important;visibility:visible !important;filter:blur(0) !important}
  .slide-title .word{display:inline-block;will-change:transform,opacity,filter}
  .project-tags{
    position:absolute;right:clamp(9rem,10vw,16rem);top:50%;transform:translateY(-50%);width:23.9rem;display:grid;z-index:6;
  }
  .tag-list{grid-area:1/1;list-style:none;display:flex;flex-direction:column;gap:.4rem;font-size:1.4rem;line-height:1.4em;font-weight:400;font-family:var(--font-main);color:#f1efe9;opacity:0;visibility:hidden}
  @media(min-width:768px){.tag-list{font-size:1.6rem}}
  @media(min-width:1200px){.tag-list{font-size:1.8rem}}
  .tag-list.is-active{opacity:1 !important;visibility:visible !important}
  .tag-list li{overflow:hidden}
  .tag-list li span{display:block;will-change:transform}
  .thumb-rail{position:absolute;right:var(--padding-x);top:50%;transform:translateY(-50%);pointer-events:auto;z-index:6;mix-blend-mode:normal}
  .rail-track{position:relative;display:flex;flex-direction:column;gap:.8rem;align-items:center;padding-left:3.2rem}
  .rail-marker{position:absolute;left:0;top:50%;width:2rem;height:.2rem;background-color:#111;opacity:1}
  .rail-thumb{
    width:4.2rem;height:2.4rem;border-radius:.2rem;overflow:hidden;opacity:.28;transition:opacity .4s var(--ease-smooth),transform .4s var(--ease-smooth);
    background:transparent;flex:none;
  }
  .rail-thumb img{width:100%;height:100%;object-fit:cover}
  .rail-thumb.is-active{opacity:1}
  .rail-thumb:hover{opacity:.9}
  

}

.mobile-view{background:transparent;background-color:#f1efe9;color:#f1efe9;padding:11.9rem 0 11.3rem;display:flex;flex-direction:column;position:relative;isolation:isolate}
.mobile-top{display:flex;align-items:center;justify-content:flex-end;padding:0 var(--padding-x);min-height:2.8rem;mix-blend-mode:difference;color:#f1efe9;position:relative;z-index:3}
.step-lines{display:flex;gap:.6rem;align-items:center}
.step-line{width:.1rem;width:1px;height:1.6rem;background:rgba(241,239,233,.4);transition:background .2s}
.step-line.is-active{background:#f1efe9}
.picker-bar{margin-top:2.4rem;display:flex;align-items:center;justify-content:space-between;padding:0 var(--padding-x);position:relative;z-index:2}
.mini-count{font-size:1.2rem;letter-spacing:.16em;color:#111}
.mini-thumbs{display:flex;gap:.6rem}
.mini-thumb{width:3.5rem;height:2rem;border-radius:.2rem;overflow:hidden;opacity:.35;transition:opacity .3s;background:transparent}
.mini-thumb img{width:100%;height:100%;object-fit:cover}
.mini-thumb.is-active{opacity:1}
.card-view{margin-top:1.6rem;overflow:hidden;touch-action:pan-y pinch-zoom;position:relative;z-index:2}
.card-track{display:flex;gap:var(--card-gap);padding-inline:calc((100% - var(--card-width)) / 2);will-change:transform;cursor:grab}
.card-track.is-dragging{cursor:grabbing}
.city-card{flex:0 0 var(--card-width);aspect-ratio:319 / 250;overflow:hidden;background:transparent;border-radius:0}
.city-card img{width:100%;height:100%;object-fit:cover;pointer-events:none;transform:scale(1.02)}
.mobile-caption{mix-blend-mode:difference;color:#f1efe9;position:relative;z-index:3}
.caption-box{margin-top:2.6rem;display:flex;flex-direction:column;align-items:center;text-align:center}
.caption-titles{display:grid;width:100%;padding:0 var(--padding-x)}
.caption-title{grid-area:1/1;font-size:3.2rem;line-height:1.05;font-weight:600;letter-spacing:-.096rem;font-family:var(--font-main);color:#f1efe9;overflow:visible;opacity:0;visibility:hidden;transform:translateY(.8rem);transition:opacity .35s var(--ease-smooth),transform .35s var(--ease-smooth)}
.caption-title.is-active{opacity:1 !important;visibility:visible !important;transform:none}
.caption-tags{display:grid;width:100%;margin-top:1.2rem;padding:0 var(--padding-x)}
.caption-tag-list{grid-area:1/1;list-style:none;display:flex;flex-direction:column;gap:.1rem;font-size:1.4rem;line-height:140%;font-weight:400;font-family:var(--font-main);color:#f1efe9;opacity:0;visibility:hidden;transform:translateY(.8rem);transition:opacity .35s var(--ease-smooth),transform .35s var(--ease-smooth)}
.caption-tag-list.is-active{opacity:1 !important;visibility:visible !important;transform:none}
.card-arrows{margin-top:2.8rem;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 var(--padding-x)}
.card-arrows .arrow-btn{border:.1rem solid rgba(241,239,233,.6);color:#f1efe9}

.number-roll{display:inline-flex;overflow:hidden;line-height:1;font-variant-numeric:tabular-nums}
.roll-digit{display:inline-block;height:1em;overflow:hidden;line-height:1}
.roll-strip{display:flex;flex-direction:column;will-change:transform}
.roll-num{display:block;height:1em;line-height:1}

@media(min-width:768px) and (max-width:1199px){
  :root{--card-width:min(52rem,85%);--card-gap:1.6rem}
  .mobile-view{padding:15.5rem 0 3.2rem}
  .mobile-top{min-height:4rem}
  .caption-title{font-size:4.8rem}
  .caption-tag-list{font-size:1.6rem}
  .card-arrows{margin-top:4rem}
  .city-card{aspect-ratio:520 / 406}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}