/* Watercolor chapters, 20 September 2026. Original photographs remain untouched.
   Scenery sits behind content; no fixed bitmap layer or scroll-driven effects. */
:root{--paper:#faf4e9;--ivory:#fffaf1;--ink:#443e32;--muted:#716957;--sage:#657052;--line:#dacfba;--frame-gutter:0px}
html,body{background-color:var(--paper)}
.site-shell{margin-inline:0}
.site-shell .hero,.site-shell .section,.site-shell .finale{position:relative;isolation:isolate;overflow:clip;max-width:none;margin:0;border-radius:0;border:0;background:var(--paper)}
.site-shell .hero,.site-shell .section{padding-inline:max(6vw,calc((100vw - 1160px)/2));gap:48px 7%}
.site-shell .section{padding-block:116px 148px}
.site-shell .hero{min-height:860px;padding-block:70px 105px;grid-template-columns:.88fr 1.12fr}
.site-shell .hero-copy{padding:25px 0}
.site-shell .hero-frame{height:680px;max-height:80svh;border-radius:160px 24px 24px 24px;box-shadow:0 24px 64px #4d3a2522,0 0 0 7px #fffbf0b8}
.hero-photo{animation:none}
.watercolor-scene{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:paint}
.watercolor-landscape{position:absolute;inset:0;opacity:.6;mask-image:linear-gradient(transparent,#000 10%,#000 88%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 88%,transparent)}
.watercolor-landscape img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
.watercolor-scene:after{content:'';position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 42%,#faf4e9ef 8%,#faf4e9b8 40%,#faf4e928 83%)}
.watercolor-branch{position:absolute;top:-35px;right:-48px;width:clamp(160px,19vw,310px);height:auto;opacity:.55;transform-origin:90% 8%;animation:watercolor-sway 18s ease-in-out infinite alternate;animation-play-state:paused}
.watercolor-cloud{position:absolute;top:8%;left:-12%;width:72%;height:auto;opacity:.34;animation:watercolor-drift 65s ease-in-out infinite alternate;animation-play-state:paused}
.motion-visible .watercolor-branch,.motion-visible .watercolor-cloud{animation-play-state:running}
.motion-paused .watercolor-branch,.motion-paused .watercolor-cloud{animation-play-state:paused}
.story .watercolor-branch,.autumn .watercolor-branch,.details .watercolor-branch,.reply .watercolor-branch{left:-55px;right:auto;transform-origin:10% 8%;rotate:-9deg}
.origins .watercolor-cloud,.flowers .watercolor-cloud{animation-delay:-23s;top:26%}
.story .watercolor-cloud,.details .watercolor-cloud{animation-delay:-41s}
.story .watercolor-landscape{opacity:.48}.origins .watercolor-landscape{opacity:.57}.details .watercolor-landscape{opacity:.56}.reply .watercolor-landscape{opacity:.42}
.site-shell .story-heading{margin-bottom:58px;max-width:730px}
.site-shell .story-line{background:#fffaf080;border-radius:16px;padding:24px;border:1px solid #dacfba90}
.site-shell .origins{grid-template-columns:.88fr 1.12fr}
.origins-art{max-width:290px;opacity:.82}
.site-shell .autumn{grid-template-columns:1fr .8fr}
.site-shell .place{grid-template-columns:1.15fr .85fr}
.photo-slot>img{box-shadow:0 16px 46px #59452c20,0 0 0 6px #fffaf0d6}
.hero-photo,.photo-slot>img,.venue-image picture img{filter:sepia(.10) saturate(.88) contrast(.96) brightness(1.025)}
.photo-slot-story>img{filter:none;aspect-ratio:3/4}
.photo-slot figcaption{color:#6b6251;font-size:17px;text-shadow:0 1px 9px var(--paper)}
.story-prose,.origins-copy,.autumn-copy,.place-copy,.details-heading,.details-body,.flower-copy,.reply-intro{text-shadow:0 1px 12px #faf4e9cc}
.hero-copy,.story-quote{position:relative;isolation:isolate}
.hero-copy:before,.story-quote:before{content:'';position:absolute;inset:-24px -32px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#faf4e9e6 25%,#faf4e99c 55%,transparent 74%)}
.venue-image{box-shadow:0 18px 50px #59452c24,0 0 0 6px #fffaf0cf}
.plant-art img{animation:none;filter:sepia(.05) saturate(.88);mix-blend-mode:normal}
/* A limestone terrace plinth grounds the three pots in one perspective plane.
   Contact shadows match the three different base heights in the source image. */
.plant-art{position:relative;isolation:isolate;margin-block-end:clamp(70px,8vw,120px)}
.plant-art>img:not(.plant-plinth){position:relative;z-index:2;width:100%;border-radius:0}
.plant-art .plant-plinth{position:absolute;z-index:0;top:86%;left:-7%;width:114%;max-width:none;height:auto;filter:none;border-radius:0;pointer-events:none}
.plant-contact{position:absolute;z-index:1;pointer-events:none;background:radial-gradient(ellipse,#63513b55 0%,#6a573838 28%,#79654a14 52%,transparent 72%);height:6%;width:25%;transform:translate(-50%,-50%)}
.plant-contact-left{left:28%;top:91.5%}.plant-contact-center{left:50%;top:98.4%;width:28%}.plant-contact-right{left:79%;top:94%}
.site-shell .flowers{grid-template-columns:.85fr 1fr}
.form-area{background:#fffbf3f5;border-color:#d7cbb4;box-shadow:0 20px 65px #66533412}
.reply-intro{position:relative;top:auto}
.site-shell .finale{min-height:800px;padding:115px 24px 135px;color:var(--ink)}
.finale .watercolor-landscape{opacity:.86}
.finale .watercolor-scene img{filter:none;margin:0;max-width:none}
.finale .watercolor-landscape img{opacity:1;width:100%;height:100%}
.finale .watercolor-branch{width:clamp(160px,19vw,310px);height:auto;opacity:.55}
.finale .watercolor-cloud{width:72%;height:auto;opacity:.34}
.finale .watercolor-scene:after{background:radial-gradient(ellipse at 50% 40%,#fff5e3f5 8%,#fff5e3da 32%,#faf4e942 76%)}
.finale-landscape{display:none}
.finale-copy{text-shadow:none;max-width:790px}
.finale .section-note{color:var(--sage)}
.finale h2{margin:0 auto 22px}
.finale-copy>p:not(.section-note,.final-names,.final-date){color:#625b49}
.finale-copy>img{filter:none;mix-blend-mode:multiply;opacity:.82}
.finale .final-names,.finale .final-date{color:#554b39}
.couple-contacts a{background:#fffbf1db;color:#4c4637;border-color:#a7977970;box-shadow:0 6px 20px #55452a0c;backdrop-filter:none;-webkit-backdrop-filter:none}
.couple-contacts a:hover{background:#fffaf0;border-color:#8a7857}
.couple-contacts small{color:#766c55}.telegram-icon{color:#7c805c}
.finale .to-top{background:#f7eddcd9;border-color:#b5a789;color:#554b39}
@keyframes watercolor-sway{0%{transform:rotate(-1.8deg) translate3d(0,0,0)}50%{transform:rotate(.6deg) translate3d(2px,3px,0)}100%{transform:rotate(2.2deg) translate3d(-1px,5px,0)}}
@keyframes watercolor-drift{from{transform:translate3d(-9%,0,0)}to{transform:translate3d(32%,9px,0)}}
@media(min-width:1800px){.watercolor-branch{width:360px}}
@media(max-width:1000px) and (min-width:701px){.site-shell .hero,.site-shell .section{padding-inline:42px;gap:35px}.site-shell .hero{min-height:740px}.site-shell .hero-frame{height:570px}.hero h2{font-size:66px}.site-shell .section{padding-block:90px 120px}.form-area{padding:25px}}
@media(max-width:700px){
  .site-shell .hero,.site-shell .section{display:flex;flex-direction:column;padding:76px 26px 104px;gap:38px;max-width:none}
  .site-shell .hero{padding:46px 24px 90px;min-height:0;gap:36px}
  .site-shell .hero-copy{padding:0 10px;text-align:center;width:100%}
  .hero-monogram,.hero-story-link{margin-inline:auto}
  .hero h2{font-size:clamp(56px,15vw,78px)}
  .hero-copy>.section-note{margin-bottom:18px}.hero-description{margin-block:18px 24px}
  .site-shell .hero-frame{width:100%;height:auto;max-height:none;aspect-ratio:4/5;border-radius:110px 20px 20px 20px}
  .hero-frame figcaption{left:20px;right:20px;bottom:22px;font-size:8px}
  .site-shell .story-heading{margin:0;max-width:100%}
  .story-grid{display:flex;flex-direction:column;gap:32px;width:100%}
  .story-prose,.story-quote{max-width:none}.story-quote{font-size:30px}
  .site-shell .story-line{width:100%;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:0;padding:22px}
  .photo-slot,.photo-slot-story,.photo-slot-portrait{width:100%;max-width:430px;align-self:center}
  .photo-slot-story>img{aspect-ratio:3/4}
  .origins-art{max-width:240px;align-self:flex-start}
  .origins-copy,.autumn-copy,.place-copy,.details-heading,.details-body,.flower-copy,.reply-intro{width:100%;max-width:none}
  .site-shell .autumn-caption{margin-top:0}
  .site-shell .venue-image{width:100%;aspect-ratio:3/4;order:2}
  .site-shell .place-copy{order:1}
  .site-shell .details{gap:30px}.swatches{gap:10px}
  .plant-art{width:82%;max-width:330px;order:2}.flower-copy{order:1}
  .form-area{width:100%;padding:26px 20px;position:relative}.reply-logo{display:none}
  .watercolor-landscape{opacity:.55;inset:auto 0 0;height:100%;mask-image:linear-gradient(transparent,#000 22%,#000 88%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 22%,#000 88%,transparent)}
  .watercolor-landscape img{object-fit:contain;object-position:center bottom}
  .watercolor-scene:after{background:linear-gradient(#faf4e92e,#faf4e977 60%,#faf4e910)}
  .watercolor-branch{top:-23px;right:-50px;width:170px;opacity:.32}
  .story .watercolor-branch,.autumn .watercolor-branch,.details .watercolor-branch,.reply .watercolor-branch{left:-55px}
  .watercolor-cloud{width:110%;top:18%;opacity:.23}
  .site-shell .finale{margin:0;min-height:780px;padding:90px 25px 145px}
  .finale .watercolor-landscape img{object-fit:cover;object-position:60% center}
  .finale .watercolor-branch{width:170px;opacity:.32}
  .finale .watercolor-cloud{width:110%;opacity:.23}
  .finale .watercolor-scene:after{background:linear-gradient(#faf4e9a8,#fff4e0d9 30%,#fff4e0c4 65%,#faf4e929)}
  .site-shell .finale h2{font-size:clamp(40px,11vw,53px)}
  .couple-contacts{flex-direction:column;align-items:center}
}
/* Cutouts above the paper veil, below content. Only open water is refracted. */
.watercolor-scene .watercolor-branch{z-index:3;opacity:.66;animation-duration:11s}
.watercolor-scene .watercolor-cloud{z-index:2;opacity:.44;animation-duration:46s}
.story .watercolor-branch,.place .watercolor-branch,.reply .watercolor-branch{animation-delay:-6s;animation-duration:14s}
.watercolor-water{position:absolute;pointer-events:none;opacity:.86}
@media(max-width:700px){.watercolor-scene .watercolor-branch{opacity:.49;width:185px}.watercolor-scene .watercolor-cloud{opacity:.32}}
/* One shared canvas behind all chapters. Adjacent paintings overlap and dissolve
   into the same paper; botanical layers can cross the chapter boundary intact.
   Horizontal clipping belongs to the outer shell, never to an individual scene. */
.site-shell{isolation:isolate;overflow-x:clip;overflow-y:visible;background:var(--paper)}
.site-shell .hero,.site-shell .section,.site-shell .finale{isolation:auto;overflow:visible;background:transparent}
.watercolor-scene{--blend:100px;overflow:visible;contain:none}
.watercolor-scene .watercolor-landscape{
  inset:calc(-1 * var(--blend)) 0;height:auto;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 calc(var(--blend) * 1.5),#000 calc(100% - var(--blend) * 1.5),transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 calc(var(--blend) * 1.5),#000 calc(100% - var(--blend) * 1.5),transparent);
}
.watercolor-scene:after{
  inset:calc(-1 * var(--blend)) 0;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 calc(var(--blend) * 1.5),#000 calc(100% - var(--blend) * 1.5),transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 calc(var(--blend) * 1.5),#000 calc(100% - var(--blend) * 1.5),transparent);
}
.watercolor-scene .watercolor-branch{
  top:-70px;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 20px),transparent);
}
.watercolor-scene .watercolor-cloud{
  -webkit-mask-image:radial-gradient(ellipse at center,#000 36%,transparent 71%);
  mask-image:radial-gradient(ellipse at center,#000 36%,transparent 71%);
}
.hero .watercolor-scene .watercolor-landscape,.hero .watercolor-scene:after{top:0}
.finale .watercolor-scene .watercolor-landscape,.finale .watercolor-scene:after{bottom:0}
@media(max-width:700px){
  .watercolor-scene{--blend:76px}
  .watercolor-scene .watercolor-branch{top:-58px}
}
@media(prefers-reduced-motion:reduce){.watercolor-branch,.watercolor-cloud{animation:none!important}.watercolor-water{display:none}.hero-photo,.plant-art img{animation:none!important}}
/* Mask the painted box itself rather than the empty object-fit letterbox. */
@media(max-width:700px){
 .watercolor-scene{--blend:140px}
 .watercolor-scene .watercolor-landscape{top:auto;bottom:-140px;height:clamp(420px,120vw,650px);inset-inline:0;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#0002 14%,#0009 30%,#000 45%,#000b 64%,#0004 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#0002 14%,#0009 30%,#000 45%,#000b 64%,#0004 82%,transparent 100%)}
 .watercolor-scene .watercolor-landscape img{object-fit:cover;object-position:center bottom}
 .hero .watercolor-scene .watercolor-landscape{top:auto}
 .finale .watercolor-scene .watercolor-landscape{height:100%;bottom:0;-webkit-mask-image:linear-gradient(transparent,#000 28%,#000);mask-image:linear-gradient(transparent,#000 28%,#000)}
 .finale .watercolor-scene .watercolor-landscape img{object-position:60% center}
 .watercolor-scene:after{background:radial-gradient(ellipse at center,#faf4e99c,transparent 75%)}
}