@font-face{font-family:Fraunces;src:url('../fonts/fraunces.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Instrument;src:url('../fonts/instrument-sans.woff2') format('woff2');font-weight:400 700;font-stretch:75% 100%;font-display:swap}
:root{--paper:#f3eedf;--paper-deep:#e8dfc9;--ink:#26362a;--green:#446443;--dark:#15291d;--yellow:#e1b938;--sky:#dbe7e4;--white:#fffdf7;--serif:Fraunces,Georgia,serif;--sans:Instrument,"Trebuchet MS",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper);overflow-x:hidden}
body{margin:0;color:var(--ink);font-family:var(--sans);background-color:var(--paper);background-image:radial-gradient(rgba(38,54,42,.065) .65px,transparent .7px);background-size:6px 6px;overflow-x:hidden}
button,a{font:inherit}
button{color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
.reading-line{position:fixed;z-index:100;top:0;left:0;width:100%;height:3px;background:rgba(38,54,42,.12)}
.reading-line span{display:block;width:100%;height:100%;background:var(--yellow);transform:scaleX(0);transform-origin:left}
.topbar{position:absolute;z-index:10;top:0;left:0;width:100%;height:82px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 3.5vw;color:var(--white)}
.monogram{justify-self:start;color:inherit;text-decoration:none;font-family:var(--serif);font-size:1.25rem;font-weight:600;letter-spacing:.04em}
.monogram span,.closing-mark span{color:var(--yellow)}
.topbar>p{margin:0;text-transform:uppercase;font-size:.68rem;letter-spacing:.24em}
.sound{justify-self:end;display:flex;align-items:center;gap:10px;border:0;background:none;padding:10px 0;color:inherit;cursor:pointer;text-transform:uppercase;font-size:.62rem;letter-spacing:.16em}
.sound-bars{display:flex;height:15px;align-items:flex-end;gap:2px}
.sound-bars i{display:block;width:2px;height:5px;background:currentColor;opacity:.85}
.sound-bars i:nth-child(2){height:11px}.sound-bars i:nth-child(3){height:7px}
.music-playing .sound-bars i{animation:sound .7s ease-in-out infinite alternate}.music-playing .sound-bars i:nth-child(2){animation-delay:.15s}.music-playing .sound-bars i:nth-child(3){animation-delay:.3s}
@keyframes sound{to{height:14px}}
.cover{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.32fr) minmax(350px,.68fr);background:var(--dark);color:var(--white);overflow:hidden}
.cover-photo{min-height:100svh;clip-path:polygon(0 0,100% 0,89% 100%,0 100%)}
.cover-photo img{object-position:50% 43%;filter:saturate(.82) contrast(.98)}
.cover-copy{align-self:end;padding:150px 8vw 11vh 3vw;position:relative;z-index:2}
.eyebrow,.kicker,.section-number{margin:0 0 22px;text-transform:uppercase;font-size:.68rem;letter-spacing:.25em;font-weight:650}
.cover h1,.afternoon h2,.sentence h2,.small-things h2,.letter h2,.ending h2{font-family:var(--serif);font-weight:390;margin:0;line-height:.9;letter-spacing:-.04em}
.cover h1{font-size:clamp(4.8rem,8.5vw,9.5rem);margin-left:-11vw;white-space:nowrap;text-shadow:0 2px 18px rgba(0,0,0,.15)}
em{font-weight:300;color:var(--yellow)}
.lede{max-width:390px;margin:38px 0 0;font-size:clamp(.96rem,1.15vw,1.15rem);line-height:1.65;color:rgba(255,253,247,.78)}
.begin{display:inline-flex;gap:45px;margin-top:40px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.45);color:var(--white);text-decoration:none;text-transform:uppercase;font-size:.68rem;letter-spacing:.18em}
.date-stamp{position:absolute;left:3.5vw;bottom:4vh;margin:0;font-size:.62rem;letter-spacing:.22em;line-height:1.1}
.date-stamp strong{font-family:var(--serif);font-size:2rem;font-weight:400;letter-spacing:0}
.photo-open{display:block;width:100%;height:100%;border:0;padding:0;background:none;cursor:zoom-in;overflow:hidden}
.photo-open img{transition:transform .8s cubic-bezier(.2,.65,.25,1),filter .4s ease}
.photo-open:hover img{transform:scale(1.025)}
.stem{position:absolute;width:130px;height:180px;right:-25px;top:18%;transform:rotate(-21deg);opacity:.65}
.stem:before{content:"";position:absolute;left:60px;top:0;height:175px;width:1px;background:var(--yellow);transform:rotate(12deg)}
.stem i{position:absolute;width:35px;height:16px;background:var(--yellow);border-radius:100% 0 100% 0;transform:rotate(25deg)}
.stem i:nth-child(1){top:42px;left:67px}.stem i:nth-child(2){top:86px;left:30px;transform:scaleX(-1) rotate(25deg)}.stem i:nth-child(3){top:127px;left:76px}
.afternoon{min-height:1250px;position:relative;padding:150px 7vw;background:var(--paper)}
.section-mark{position:absolute;top:160px;left:7vw;display:flex;align-items:center;gap:18px;transform:rotate(-90deg) translateX(-100%);transform-origin:left top}
.section-mark span{font-family:var(--serif);font-size:2rem}.section-mark p{margin:0;text-transform:uppercase;letter-spacing:.2em;font-size:.65rem}
.afternoon-heading{margin-left:14vw;max-width:850px}
.afternoon h2{font-size:clamp(3.6rem,7vw,7.6rem)}
.afternoon-copy{width:min(350px,28vw);margin:45px 0 0 52vw;line-height:1.7}
figure{margin:0}figcaption{margin-top:12px;text-transform:uppercase;font-size:.59rem;letter-spacing:.16em;color:rgba(38,54,42,.68)}
.portrait-tall{position:absolute;left:17vw;top:520px;width:27vw;height:610px;transform:rotate(-2deg)}
.portrait-close{position:absolute;right:5vw;top:660px;width:42vw;height:390px;transform:rotate(1.2deg)}
.portrait-close:before{content:"";position:absolute;z-index:-1;width:60px;height:150px;right:-22px;top:-35px;background:rgba(225,185,56,.58);transform:rotate(4deg)}
.sentence{position:relative;min-height:980px;background:var(--green);color:var(--white);display:grid;grid-template-columns:48% 52%;align-items:center;overflow:hidden}
.sentence-image{height:730px;margin-left:6vw;transform:rotate(-1.5deg);box-shadow:0 20px 50px rgba(15,31,20,.2)}
.sentence-copy{padding:0 9vw 0 7vw;position:relative}.sentence .section-number{color:rgba(255,255,255,.58)}
.open-quote{position:absolute;top:30px;left:5vw;font-family:var(--serif);font-size:10rem;line-height:1;color:rgba(225,185,56,.45)}
.sentence h2{position:relative;font-size:clamp(3rem,5.3vw,6rem);line-height:1.03}
.sentence-copy>p:last-child{margin:44px 0 0;line-height:1.8;color:rgba(255,255,255,.72)}
.sentence-copy strong{color:var(--yellow);font-weight:600}
.pressed-flower{position:absolute;right:5vw;bottom:6vh;width:85px;height:120px;opacity:.8;transform:rotate(15deg)}
.pressed-flower b{position:absolute;width:1px;height:90px;background:var(--yellow);left:41px;bottom:0}
.pressed-flower i{position:absolute;width:30px;height:17px;background:var(--yellow);border-radius:80% 10% 80% 10%;left:39px;top:17px;transform-origin:2px 15px}
.pressed-flower i:nth-of-type(2){transform:rotate(72deg)}.pressed-flower i:nth-of-type(3){transform:rotate(144deg)}.pressed-flower i:nth-of-type(4){transform:rotate(216deg)}.pressed-flower i:nth-of-type(5){transform:rotate(288deg)}
.small-things{position:relative;padding:170px 7vw 190px;min-height:1130px;background:var(--sky);overflow:hidden}
.small-things:before{content:"";position:absolute;width:480px;height:480px;border:1px solid rgba(38,54,42,.13);border-radius:50%;right:-220px;top:110px}
.small-intro{margin-left:7vw}.small-things h2{font-size:clamp(3.5rem,6.8vw,7rem)}
.memory-list{list-style:none;margin:80px 0 0 8vw;padding:0;width:39vw;border-top:1px solid rgba(38,54,42,.25)}
.memory-list li{display:flex;gap:25px;padding:21px 5px;border-bottom:1px solid rgba(38,54,42,.25);font-family:var(--serif);font-size:clamp(1.1rem,1.5vw,1.5rem)}
.memory-list span{font-family:var(--sans);font-size:.58rem;letter-spacing:.14em;padding-top:6px;color:var(--green)}
.sky-photo{position:absolute;right:5vw;bottom:120px;width:47vw;height:510px;transform:rotate(1.5deg)}
.letter{display:grid;grid-template-columns:42% 58%;padding:150px 7vw;background:var(--paper-deep);align-items:start}
.letter-side{position:sticky;top:90px;padding-right:6vw}.letter h2{font-size:clamp(4rem,7vw,7.2rem)}
.couple-photo{width:75%;height:370px;margin:70px 0 0 5%;padding:12px 12px 42px;background:var(--white);box-shadow:0 12px 30px rgba(38,54,42,.14);transform:rotate(-3deg)}
.letter-paper{position:relative;padding:80px clamp(35px,7vw,110px);background:var(--white);box-shadow:0 20px 70px rgba(38,54,42,.1);font-family:var(--serif);font-size:clamp(1.15rem,1.55vw,1.42rem);line-height:1.72}
.letter-paper:before{content:"18";position:absolute;right:30px;top:18px;font-family:var(--serif);font-size:5rem;color:rgba(225,185,56,.22)}
.letter-paper p{margin:0 0 1.35em}.letter-paper .signature{margin-top:2.5em;font-style:italic;color:var(--green)}
.ending{position:relative;min-height:100svh;background:var(--dark);color:var(--white);display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
.ending-photo{height:100svh;opacity:.72;clip-path:polygon(0 0,90% 0,100% 100%,0 100%)}
.ending-photo img{filter:saturate(.72)}
.ending-copy{align-self:center;padding:100px 6vw 100px 4vw;z-index:1}.ending h2{font-size:clamp(3.8rem,6.4vw,7rem);line-height:.95}
.replay{margin-top:55px;padding:14px 0;border:0;border-bottom:1px solid rgba(255,255,255,.5);background:none;color:var(--white);text-transform:uppercase;font-size:.68rem;letter-spacing:.18em;cursor:pointer}.replay span{margin-left:30px;color:var(--yellow)}
.closing-mark{position:absolute;right:4vw;bottom:4vh;margin:0;font-size:.68rem;letter-spacing:.22em}
.lightbox{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:60px;border:0;background:rgba(12,24,16,.94);overflow:hidden}
.lightbox::backdrop{background:transparent}.lightbox img{width:100%;height:100%;object-fit:contain}
.lightbox-close{position:absolute;z-index:2;right:25px;top:18px;border:0;background:none;color:white;text-transform:uppercase;font-size:.65rem;letter-spacing:.15em;cursor:pointer}.lightbox-close span{font-size:1.4rem;margin-left:7px;vertical-align:-2px}
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.65,.25,1)}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}
.portrait-tall[data-reveal].is-visible{transform:rotate(-2deg)}.portrait-close[data-reveal].is-visible{transform:rotate(1.2deg)}.sentence-image[data-reveal].is-visible{transform:rotate(-1.5deg)}.sky-photo[data-reveal].is-visible{transform:rotate(1.5deg)}

@media (max-width:800px){
  .topbar{height:66px;padding:0 20px;grid-template-columns:1fr auto}.topbar>p{display:none}.sound-label{display:none}.sound{padding:12px}
  .cover{min-height:auto;display:block;padding-bottom:70px}.cover-photo{height:64svh;min-height:460px;clip-path:polygon(0 0,100% 0,100% 90%,0 100%)}.cover-photo img{object-position:54% center}
  .cover-copy{padding:28px 22px 30px;display:flex;flex-direction:column}.cover h1{order:1;font-size:clamp(4.2rem,22vw,6.2rem);margin:-82px 0 0;position:relative;line-height:.86}.cover .eyebrow{order:2;margin:22px 0 0}.lede{order:3;font-size:.98rem;margin-top:28px;max-width:330px}.begin{order:4;margin-top:28px}.date-stamp{left:auto;right:22px;bottom:35px}.stem{display:none}
  .afternoon{min-height:1320px;padding:100px 22px}.section-mark{display:none}.afternoon-heading{margin:0}.afternoon h2{font-size:clamp(3.5rem,16vw,5rem);line-height:.94}.afternoon-copy{width:auto;margin:30px 9vw 0 22vw}.portrait-tall{left:22px;top:500px;width:61vw;height:540px}.portrait-close{right:0;top:860px;width:73vw;height:300px}.portrait-close:before{display:none}
  .sentence{min-height:auto;display:flex;flex-direction:column;padding:80px 0 100px}.sentence-image{order:2;width:86vw;height:500px;margin:65px 0 0;align-self:flex-end}.sentence-copy{order:1;padding:0 24px}.open-quote{top:35px;left:8px}.sentence h2{font-size:clamp(3rem,13vw,4.6rem)}.pressed-flower{right:20px;bottom:25px}
  .small-things{min-height:1180px;padding:100px 22px 120px}.small-intro{margin:0}.small-things h2{font-size:clamp(3.5rem,15vw,5rem)}.memory-list{width:auto;margin:55px 0 0}.memory-list li{font-size:1.18rem;gap:15px}.sky-photo{right:0;bottom:115px;width:86vw;height:430px}
  .letter{display:block;padding:100px 20px}.letter-side{position:relative;top:auto;padding:0}.letter h2{font-size:clamp(4rem,18vw,5.5rem)}.couple-photo{width:72vw;height:330px;margin:55px auto -40px;position:relative;z-index:2}.letter-paper{padding:75px 28px 55px;font-size:1.12rem;line-height:1.72}
  .ending{min-height:100svh;display:block;padding-bottom:70px}.ending-photo{height:52svh;min-height:420px;clip-path:polygon(0 0,100% 0,100% 86%,0 100%)}.ending-copy{padding:0 22px;margin-top:-25px}.ending h2{font-size:clamp(3.45rem,15vw,5rem)}.closing-mark{bottom:28px;right:22px}
  .lightbox{padding:55px 12px 18px}
}
@media (max-width:380px){.cover h1{font-size:4.05rem}.afternoon-copy{margin-left:15vw}.portrait-tall{width:65vw}.sentence h2{font-size:2.9rem}.memory-list li{font-size:1.03rem}.letter-paper{padding-left:24px;padding-right:24px}.ending h2{font-size:3.25rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}[data-reveal]{opacity:1;transform:none!important}}