/* Romantic photo atmosphere and horizontal touch-first memory rail */
body:not(.juice-page){position:relative;isolation:isolate}
body:not(.juice-page):before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(248,241,232,.94),rgba(248,241,232,.88)),url("assets/photo-1.jpg") center 24%/cover no-repeat;opacity:.22}
.hero{isolation:isolate}
.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(248,241,232,.96) 0%,rgba(248,241,232,.83) 48%,rgba(248,241,232,.5) 100%),url("assets/photo-3.jpg") center 35%/cover no-repeat;opacity:.48}
.photo-conveyor-section{max-width:1360px;margin:0 auto;padding:90px 6% 85px;border-block:1px solid var(--line);background:rgba(255,252,247,.54);overflow:hidden}
.conveyor-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:28px}
.conveyor-heading h2{font-size:clamp(38px,4.5vw,62px);line-height:.98;margin:8px 0 0}.conveyor-heading h2 em{color:var(--wine)}
.conveyor-heading p{max-width:220px;color:#826a69;font-size:12px;line-height:1.8}
.conveyor-hint{font-size:9px;letter-spacing:1.8px;color:#9b7b79;white-space:nowrap}.conveyor-hint b{font-size:16px;margin-left:9px}
.photo-conveyor{width:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;cursor:grab;touch-action:pan-y;user-select:none;-webkit-overflow-scrolling:touch;padding:10px 2px 22px;mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent)}
.photo-conveyor::-webkit-scrollbar{display:none}.photo-conveyor.is-dragging{cursor:grabbing;scroll-snap-type:none}
.conveyor-track{display:flex;flex-direction:row;gap:18px;width:max-content;align-items:stretch}
.conveyor-photo{position:relative;display:block;flex:0 0 clamp(190px,23vw,285px);padding:9px 9px 14px;border:0;background:#fffdf7;color:#69494b;text-align:left;box-shadow:0 12px 35px #53312c18;scroll-snap-align:center;cursor:zoom-in;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.conveyor-photo:nth-child(3n+1){transform:rotate(-1.5deg)}.conveyor-photo:nth-child(3n+2){transform:rotate(1.2deg) translateY(8px)}.conveyor-photo:nth-child(3n){transform:rotate(-.5deg) translateY(-3px)}
.conveyor-photo:hover,.conveyor-photo:focus-visible{z-index:2;transform:translateY(-8px) rotate(0) scale(1.025);box-shadow:0 22px 55px #53312c30;outline:none}
.conveyor-photo img{display:block;width:100%;height:clamp(230px,31vw,345px);object-fit:cover;object-position:center 25%;pointer-events:none}
.conveyor-photo span{display:block;padding:13px 3px 2px;font:italic 14px Georgia,serif}.conveyor-photo i{position:absolute;right:15px;bottom:17px;font-style:normal;color:#a27a7a;opacity:0;transition:opacity .2s}.conveyor-photo:hover i,.conveyor-photo:focus-visible i{opacity:1}
.conveyor-lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:45px 70px;border:0;background:#171216f5;color:#fff;align-items:center;justify-content:center;gap:25px}
.conveyor-lightbox[open]{display:flex}.conveyor-lightbox::backdrop{background:#100b10ed}
.conveyor-lightbox figure{margin:0;max-width:min(70vw,760px);max-height:80vh;text-align:center}.conveyor-lightbox img{display:block;max-width:100%;max-height:72vh;object-fit:contain;box-shadow:0 25px 90px #0009}.conveyor-lightbox figcaption{padding:15px;color:#f5dfe6;font:italic 17px Georgia,serif}
.conveyor-lightbox button{border:1px solid #ffffff55;background:#ffffff12;color:white;width:45px;height:45px;border-radius:50%;font-size:20px;cursor:pointer;flex:0 0 auto}.conveyor-lightbox .conveyor-lightbox-close{position:absolute;top:20px;right:22px}.lightbox-counter{position:absolute;bottom:20px;font:10px Arial,sans-serif;letter-spacing:2px;color:#d4b9c2}
@media(max-width:720px){.photo-conveyor-section{padding:65px 5%}.conveyor-heading{display:block}.conveyor-heading p{margin:12px 0 0}.conveyor-hint{display:block;margin-top:14px}.conveyor-track{gap:13px}.conveyor-photo{flex-basis:72vw}.conveyor-photo img{height:78vw;max-height:390px}.conveyor-lightbox{padding:55px 12px 65px;gap:8px}.conveyor-lightbox figure{max-width:calc(100vw - 90px)}.conveyor-lightbox button{width:34px;height:34px;font-size:16px}}
@media(prefers-reduced-motion:reduce){.conveyor-photo{transition:none}}


/* PREMIUM ROMANTIC EDITION — a complete visual direction, not small patches. */
:root{--paper:#f4eee9;--ink:#2d2024;--wine:#713347;--rose:#ead8d5;--line:#d8c6bd;--serif:"Bodoni 72",Didot,"Times New Roman",serif}
body:not(.juice-page){background:#f4eee9;color:#2d2024;font-family:Inter,"Helvetica Neue",Arial,sans-serif;letter-spacing:.005em}
body:not(.juice-page):before{background:linear-gradient(115deg,rgba(247,239,234,.89),rgba(247,239,234,.74)),url("assets/photo-5.jpg") center 30%/cover no-repeat;opacity:.3}
.topbar{position:sticky;top:0;z-index:35;max-width:none;padding:15px clamp(20px,5vw,76px);background:rgba(248,243,239,.84);border-bottom:1px solid #bfa69b66;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.topbar .wordmark{font-size:24px;letter-spacing:-.04em;color:#4b2935}
.topbar nav{gap:clamp(10px,1.8vw,26px)}
.topbar .nav-note{font-size:10px;text-transform:uppercase;letter-spacing:1.1px;color:#604c4b}
.topbar .nav-note:after{height:2px}
.hero{max-width:none;min-height:min(850px,calc(100svh - 70px));padding:clamp(50px,8vw,120px) clamp(28px,9vw,145px) 100px;grid-template-columns:minmax(0,1fr) minmax(360px,.95fr);gap:clamp(35px,7vw,110px);background:linear-gradient(90deg,#f4eee9 0%,#f4eee9ed 43%,#f4eee980 100%)}
.hero:before{inset:0;background:linear-gradient(90deg,#f4eee9f5 0%,#f4eee9c9 54%,#f4eee955 100%),url("assets/photo-3.jpg") center 30%/cover no-repeat;opacity:.9}
.hero-copy{max-width:620px}
.hero .eyebrow,.photo-conveyor-section .eyebrow,.section .eyebrow{color:#9a6d70;letter-spacing:3px;font-size:9px}
.hero h1.personal-title{font-size:clamp(64px,8.5vw,124px);line-height:.88;letter-spacing:-.075em;margin-bottom:26px;color:#342329}
.hero h1 em{color:#8a4559}
.hero-copy>p{font-family:var(--serif);font-size:clamp(16px,1.6vw,21px);line-height:1.8;color:#765c5c;letter-spacing:.02em}
.hero .button{margin-top:34px;border-radius:2px;background:#6d3045;border-color:#6d3045;padding:17px 25px;text-transform:uppercase;letter-spacing:1.3px;font-size:9px;box-shadow:0 12px 30px #65304424}
.hero .button:hover{background:#43232f}
.hero-aside{font-size:21px;margin:30px 0 0 8px;color:#9b6b73}
.hero-art{height:clamp(440px,48vw,650px);max-width:570px;width:100%;justify-self:end}
.hero-art:before{inset:4% 6%;border:1px solid #8c626555;border-radius:48% 52% 45% 55%;transform:rotate(12deg)}
.polaroid{width:clamp(210px,22vw,300px);padding:10px 10px 0;background:#fbf8f3;box-shadow:0 28px 70px #422a2c30}
.polaroid img{height:clamp(280px,34vw,420px);filter:saturate(.88)}
.hero-front{width:clamp(230px,24vw,325px);right:0}
.hero-front img{height:clamp(310px,37vw,455px)}
.hero-back{left:2%;top:7%}
.hero-front{bottom:5%}
.polaroid figcaption{font-size:14px;color:#76545b;padding:17px 0}
.orbit-heart{color:#9b6371;font-size:75px}
.photo-stamp{background:#f4eee9c9;color:#8b5666}
.hero-bottom{left:clamp(28px,9vw,145px);right:clamp(28px,9vw,145px);bottom:28px;color:#8f7773;border-top:1px solid #9e81734d;padding-top:14px}
.photo-conveyor-section{max-width:none;padding:clamp(65px,8vw,115px) 0 clamp(55px,7vw,90px);background:#e9dcd6;border-block:1px solid #d4c2b9}
.conveyor-heading{padding:0 clamp(25px,9vw,145px);align-items:end;margin-bottom:30px}
.conveyor-heading h2{font-size:clamp(42px,6vw,76px);line-height:.92;letter-spacing:-.07em;color:#38262b}
.conveyor-heading p{font-family:var(--serif);font-style:italic;font-size:16px;color:#81686a}
.conveyor-hint{color:#9a7376}
.photo-conveyor{padding:20px clamp(22px,6vw,95px) 35px;cursor:grab;scroll-snap-type:none;mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent)}
.conveyor-track{gap:clamp(12px,2vw,26px)}
.conveyor-photo{flex-basis:clamp(190px,22vw,290px);background:#f8f4ef;padding:8px 8px 15px;box-shadow:0 18px 45px #3e29251b;border:1px solid #fff9}
.conveyor-photo:nth-child(3n+1){transform:rotate(-2deg) translateY(5px)}
.conveyor-photo:nth-child(3n+2){transform:rotate(1.5deg) translateY(-7px)}
.conveyor-photo:nth-child(3n){transform:rotate(-.6deg) translateY(3px)}
.conveyor-photo img{height:clamp(250px,30vw,390px);filter:saturate(.9);object-position:center 28%}
.conveyor-photo span{font-size:15px;color:#69444e;padding:14px 5px 3px}
.reasons.section{padding-top:clamp(85px,11vw,145px);padding-bottom:clamp(85px,11vw,145px);background:radial-gradient(ellipse at 50% 45%,#f8efea 0%,#ead8d5 70%,#e5d0ce 100%)}
.reasons h2,.letter-intro h2{font-size:clamp(50px,7vw,88px);letter-spacing:-.07em;color:#39252c}
.reason-card{border:1px solid #c9aeb0;background:#f8f1eb;box-shadow:14px 14px 0 #d9c0bc;border-radius:2px;max-width:690px;min-height:260px;padding:42px}
.reason-heart{font-size:42px;color:#995d70}
.reason-card p{font-size:clamp(27px,3.6vw,42px);color:#633847}
.reasons .button{border-radius:2px;letter-spacing:1px;text-transform:uppercase;font-size:10px;padding:16px 25px}
.letter-section.section{max-width:1320px;margin:auto;padding-top:clamp(80px,10vw,130px);padding-bottom:clamp(80px,10vw,130px);gap:clamp(40px,8vw,110px)}
.letter-intro h2{line-height:.94}
.letter-intro>p{font-family:var(--serif);font-style:italic;font-size:17px;color:#876a69}
.envelope{height:320px;background:linear-gradient(145deg,#e8d4c7,#d9bcb4);border:1px solid #c4a39c;box-shadow:0 28px 60px #56353a20}
.envelope-fold{background:#f0dfd2;height:175px}
.seal{background:#6d3045;border-color:#e5c4c6;box-shadow:0 5px 15px #4b273533}
.envelope-label{color:#69434c;font-size:25px}
.letter{background:#fbf7f0;border:1px solid #d8c6bb;padding:clamp(28px,4vw,55px);box-shadow:0 25px 60px #56353a18}
.letter h3{font-size:46px;color:#713347}
.letter>p{font-size:18px;color:#654c4c}
footer{background:#2f2027;color:#f4e8e1;border:0;padding:35px clamp(25px,7vw,100px)}
footer .wordmark,footer>span:nth-child(2),footer>a{color:#e8d4d1}
.music-dock{background:rgba(250,245,239,.94);border:1px solid #c9aaa6;box-shadow:0 18px 55px #3e22252c;padding:11px 17px 11px 11px;backdrop-filter:blur(22px)}
.music-toggle{background:#6d3045;width:46px;height:46px;box-shadow:0 5px 14px #6d304533}
.music-kicker{letter-spacing:1.5px;color:#98777a}
#music-status{color:#4b3038;font-size:16px}
.track-controls button{color:#713347}
.music-settings summary{color:#713347}
@media(max-width:800px){
 .topbar{position:relative;padding:13px 5%}
 .topbar nav{gap:9px}
 .topbar .nav-note{font-size:9px;letter-spacing:.4px}
 .hero{display:flex;flex-direction:column;align-items:stretch;min-height:auto;padding:58px 7% 80px;gap:25px}
 .hero-copy{max-width:100%}
 .hero h1.personal-title{font-size:clamp(58px,14vw,88px)}
 .hero-art{align-self:center;max-width:440px;height:470px;margin-top:8px}
 .polaroid{width:clamp(185px,48vw,235px)}
 .polaroid img{height:290px}
 .hero-front{width:clamp(205px,53vw,255px)}
 .hero-front img{height:330px}
 .conveyor-heading{display:block;padding:0 7%}
 .conveyor-heading p{margin-top:14px}
 .conveyor-hint{display:block;margin-top:12px}
 .photo-conveyor{padding-inline:7%}
 .conveyor-photo{flex-basis:72vw}
 .conveyor-photo img{height:78vw;max-height:400px}
 .letter-section.section{grid-template-columns:1fr;gap:35px;padding-inline:7%}
 .envelope{height:260px}
}
@media(max-width:430px){
 .topbar .wordmark{font-size:18px}
 .topbar nav{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding:4px 0 8px}
 .topbar .nav-note{white-space:nowrap;font-size:9px}
 .hero{padding-top:44px}
 .hero h1.personal-title{font-size:clamp(52px,13.8vw,70px)}
 .hero-art{height:410px}
 .polaroid{width:185px}.polaroid img{height:250px}
 .hero-front{width:205px}.hero-front img{height:285px}
 .reason-card{padding:30px 20px}
 .music-dock{width:calc(100% - 20px);bottom:9px}
}
@media(prefers-reduced-motion:reduce){.photo-conveyor{scroll-behavior:auto}}

.home-page .photo-conveyor.is-dragging{cursor:grabbing;user-select:none;-webkit-user-select:none}


/* Vertical, continuously moving memory ribbon */
.photo-conveyor{
  width:min(100%,560px);
  height:clamp(430px,62vh,680px);
  margin:0 auto;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-width:none;
  overscroll-behavior-y:contain;
  scroll-snap-type:none!important;
  touch-action:pan-y;
  cursor:grab;
  padding:18px 22px 28px!important;
  mask-image:linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent)!important;
}
.photo-conveyor::-webkit-scrollbar{display:none}
.conveyor-track{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:18px!important;
  width:100%!important;
}
.conveyor-photo{
  flex:0 0 auto!important;
  width:100%!important;
  transform:none!important;
  scroll-snap-align:none!important;
}
.conveyor-photo:nth-child(3n+1),
.conveyor-photo:nth-child(3n+2),
.conveyor-photo:nth-child(3n){transform:none!important}
.conveyor-photo img{
  width:100%;
  height:clamp(210px,32vw,310px)!important;
  object-fit:cover;
}
.photo-conveyor.is-dragging{cursor:grabbing}
@media(max-width:720px){
  .photo-conveyor{width:100%;height:480px;padding:14px 10px 22px!important}
  .conveyor-track{gap:14px!important}
  .conveyor-photo img{height:300px!important}
}

/* Phones: preserve native vertical swipe/scroll instead of custom pointer dragging. */
@media (hover: none) and (pointer: coarse) {
  .photo-conveyor { touch-action: pan-y !important; -webkit-overflow-scrolling: touch; }
  .photo-conveyor.is-dragging { cursor: auto; }
}



/* AFTR-STYLE: fixed full-height vertical image conveyor on the far left */
body.home-page{
  padding-left:clamp(150px,17vw,205px);
}
.photo-conveyor-section{
  position:fixed;
  z-index:30;
  top:0;
  bottom:0;
  left:0;
  width:clamp(150px,17vw,205px);
  height:100vh;
  height:100dvh;
  max-width:none;
  margin:0;
  padding:14px 10px;
  display:block;
  overflow:hidden;
  background:#e9dcd6;
  border:0;
  border-right:1px solid #d4c2b9;
  box-shadow:8px 0 30px #3e292510;
}
.photo-conveyor-section .conveyor-heading{display:none!important}
.photo-conveyor{
  width:100%;
  height:100%;
  max-width:none;
  margin:0;
  padding:8px 4px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scrollbar-width:none;
  overscroll-behavior-y:contain;
  scroll-snap-type:none!important;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(180deg,transparent,#000 2%,#000 98%,transparent)!important;
}
.photo-conveyor::-webkit-scrollbar{display:none}
.photo-conveyor .conveyor-track{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  gap:13px!important;
  width:100%!important;
}
.photo-conveyor .conveyor-photo{
  display:block;
  flex:0 0 auto!important;
  width:100%!important;
  min-width:0;
  padding:5px 5px 8px;
  background:#f8f4ef;
  border:1px solid #fff9;
  box-shadow:0 8px 22px #3e29251b;
  transform:none!important;
}
.photo-conveyor .conveyor-photo:nth-child(3n+1),
.photo-conveyor .conveyor-photo:nth-child(3n+2),
.photo-conveyor .conveyor-photo:nth-child(3n){transform:none!important}
.photo-conveyor .conveyor-photo img{
  display:block;
  width:100%;
  height:clamp(175px,25vh,250px)!important;
  object-fit:cover;
  object-position:center 25%;
}
.photo-conveyor .conveyor-photo span{
  display:block;
  padding:8px 2px 0;
  font-size:11px;
  line-height:1.25;
}
.photo-conveyor.is-dragging{cursor:grabbing}
@media(max-width:800px){
  body.home-page{padding-left:104px}
  .photo-conveyor-section{
    width:104px;
    padding:8px 5px;
  }
  .photo-conveyor{padding:5px 2px!important}
  .photo-conveyor .conveyor-track{gap:9px!important}
  .photo-conveyor .conveyor-photo{padding:4px 4px 6px}
  .photo-conveyor .conveyor-photo img{height:clamp(118px,19vh,165px)!important}
  .photo-conveyor .conveyor-photo span{font-size:9px;padding-top:5px}
}
@media(max-width:430px){
  body.home-page{padding-left:88px}
  .photo-conveyor-section{width:88px;padding:7px 4px}
  .photo-conveyor .conveyor-photo img{height:128px!important}
  .photo-conveyor .conveyor-photo span{font-size:8px;line-height:1.2}
}
@media(prefers-reduced-motion:reduce){
  .photo-conveyor{scroll-behavior:auto}
}
