:host{--paper:#fbf6e9;--page:#fffdf7;--ink:#282721;--orange:#d66732;--butter:#f2d48d;--powder:#b9d5da;--blue:#315b6a;--line:rgba(40,39,33,.18);--serif:'DM Serif Display',Georgia,serif;--sans:'Manrope',Arial,sans-serif;--hand:'Caveat',cursive}
*{box-sizing:border-box}html{background:#d7cec0}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--sans);-webkit-font-smoothing:antialiased}img{display:block;width:100%;height:100%;object-fit:cover}button{font:inherit}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.review-bar{position:fixed;z-index:100;inset:0 0 auto;height:62px;padding:0 28px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:rgba(251,246,233,.94);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.review-bar img{width:58px;height:auto}.review-bar p,.review-bar span{margin:0;font-size:9px;font-weight:600;letter-spacing:.17em;text-transform:uppercase}.review-bar span{justify-self:end;color:rgba(40,39,33,.55)}
.guest-moments{position:relative;min-height:100svh;padding:calc(62px + 4.5vh) 4.7vw 4vh;display:grid;grid-template-columns:minmax(260px,.38fr) minmax(670px,1fr);gap:4.7vw;align-items:center;overflow:hidden;background-color:var(--paper);background-image:radial-gradient(rgba(49,91,106,.12) .7px,transparent .7px);background-size:17px 17px}.guest-moments::before{content:"";position:absolute;inset:auto 0 0;height:19%;background:linear-gradient(90deg,rgba(214,103,50,.94),rgba(228,132,72,.9));clip-path:polygon(0 31%,100% 0,100% 100%,0 100%)}.section-copy{position:relative;z-index:3;align-self:center}.eyebrow{margin:0;color:var(--orange);font-size:10px;font-weight:700;letter-spacing:.19em;text-transform:uppercase}.section-copy h1{margin:18px 0 24px;font:400 clamp(70px,7.2vw,126px)/.76 var(--serif);letter-spacing:-.065em}.section-copy h1 em{color:var(--orange);font-weight:400}.intro{max-width:330px;margin:0;color:rgba(40,39,33,.7);font:400 17px/1.55 var(--serif)}.hand-note{width:200px;margin:34px 0 0;padding:21px 22px 18px;background:#fff0b9;border:1px solid rgba(40,39,33,.18);box-shadow:7px 8px 0 rgba(49,91,106,.12);transform:rotate(-2deg)}.hand-note b{display:block;color:var(--blue);font:600 30px/1 var(--hand)}.hand-note span{display:block;margin-top:9px;font-size:8px;line-height:1.7;letter-spacing:.12em;text-transform:uppercase}.review-note{max-width:300px;margin:28px 0 0;color:rgba(40,39,33,.48);font-size:8px;line-height:1.6;letter-spacing:.08em;text-transform:uppercase}
.notebook-stage{position:relative;z-index:3;width:100%;max-width:1120px;justify-self:end}.book{position:relative;width:100%;height:min(68vh,670px);min-height:550px;overflow:hidden;border:1px solid rgba(40,39,33,.2);border-radius:5px 12px 12px 5px;background:var(--page);box-shadow:0 22px 70px rgba(61,47,32,.22),16px 18px 0 rgba(49,91,106,.09);perspective:1800px}.book::before{content:"";position:absolute;z-index:10;left:50%;top:0;bottom:0;width:28px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(57,45,33,.10) 45%,rgba(255,255,255,.72) 51%,rgba(57,45,33,.07),transparent);pointer-events:none}.book::after{content:"";position:absolute;z-index:20;left:50%;top:0;width:50%;height:100%;background:linear-gradient(90deg,#f6eddb,#fffdf7 14%,#fffdf7);transform-origin:left center;transform:rotateY(90deg);opacity:0;pointer-events:none}.book.turn-forward::after{animation:turnForward .7s cubic-bezier(.35,.02,.2,1)}.book.turn-back::after{left:0;transform-origin:right center;background:linear-gradient(90deg,#fffdf7 86%,#f3e7d1);animation:turnBack .7s cubic-bezier(.35,.02,.2,1)}@keyframes turnForward{0%{transform:rotateY(0);opacity:1}49%{transform:rotateY(-86deg);opacity:1}50%{transform:rotateY(86deg);opacity:1}100%{transform:rotateY(0);opacity:0}}@keyframes turnBack{0%{transform:rotateY(0);opacity:1}49%{transform:rotateY(86deg);opacity:1}50%{transform:rotateY(-86deg);opacity:1}100%{transform:rotateY(0);opacity:0}}
.spread{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;opacity:0;pointer-events:none;transition:opacity .22s ease}.spread.is-active{opacity:1;pointer-events:auto}.page{position:relative;overflow:hidden;padding:34px 36px;background-color:var(--page);background-image:linear-gradient(rgba(49,91,106,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(49,91,106,.035) 1px,transparent 1px);background-size:24px 24px}.page>small{position:relative;z-index:3;font-size:7px;font-weight:700;letter-spacing:.18em}.page-left{border-right:1px solid rgba(40,39,33,.08)}.photo{position:absolute;margin:0;padding:8px 8px 27px;background:#fff;border:1px solid rgba(40,39,33,.14);box-shadow:6px 8px 0 rgba(49,91,106,.09)}.photo img{filter:saturate(.92) contrast(1.02)}.photo figcaption{padding:8px 3px 0;font:italic 12px/1 var(--serif)}.lead-photo{inset:67px 34px 36px 36px;transform:rotate(-.7deg)}.lead-photo img{object-position:center 50%}.pencil{position:absolute;z-index:4;margin:0;color:var(--orange);font:600 27px/1 var(--hand);transform:rotate(-4deg)}.spread-one .pencil{right:22px;top:44px}.page-title{position:absolute;z-index:4;left:34px;top:35px}.page-title span{font-size:7px;font-weight:700;letter-spacing:.17em}.page-title h2{margin:12px 0 0;color:var(--blue);font:400 clamp(31px,3vw,51px)/.86 var(--serif);letter-spacing:-.045em}.window-photo{left:35px;right:36%;top:180px;bottom:37px;transform:rotate(1.3deg)}.window-photo img{object-position:center 44%}.stamp-photo{position:absolute;right:18px;bottom:70px;width:38%;height:235px;margin:0;padding:7px;background:#fff;border:1px solid var(--line);box-shadow:5px 6px 0 rgba(214,103,50,.14);transform:rotate(-4deg)}.stamp-photo img{object-position:center 35%}
.door-photo{left:42px;top:70px;bottom:38px;width:56%;transform:rotate(-1.4deg)}.door-photo img{object-position:center 45%}.caption-card{position:absolute;z-index:3;right:30px;top:132px;width:39%;padding:27px 23px;background:var(--butter);border:1px solid var(--line);box-shadow:6px 7px 0 rgba(214,103,50,.18);transform:rotate(2.5deg)}.caption-card b{display:block;color:var(--blue);font:400 27px/.95 var(--serif)}.caption-card span{display:block;margin-top:18px;font-size:7px;letter-spacing:.14em;text-transform:uppercase}.portrait-photo{left:38px;top:33px;bottom:33px;width:54%;transform:rotate(.7deg)}.portrait-photo img{object-position:center 38%}.small-photo{right:28px;top:130px;width:36%;height:310px;transform:rotate(3deg)}.paper-check{position:absolute;right:20px;bottom:32px;width:150px;height:95px;background:linear-gradient(45deg,rgba(214,103,50,.35) 25%,transparent 25% 75%,rgba(214,103,50,.35) 75%),linear-gradient(45deg,rgba(214,103,50,.35) 25%,#fff4df 25% 75%,rgba(214,103,50,.35) 75%);background-position:0 0,12px 12px;background-size:24px 24px;border:7px solid #fff;transform:rotate(-3deg)}
.page-title.compact{left:36px;top:74px;right:36px}.page-title.compact h2{font-size:45px}.page-title.compact p{max-width:290px;margin:15px 0 0;color:rgba(40,39,33,.58);font:400 12px/1.55 var(--sans)}.kitchen-photo{left:38px;right:38px;top:265px;bottom:38px;transform:rotate(-1deg)}.kitchen-photo img{object-position:center 42%}.collage-page{background-color:#f9f1df}.chair-photo{left:32px;top:39px;width:54%;height:78%;transform:rotate(-2deg)}.stairs-photo{right:26px;bottom:35px;width:44%;height:60%;transform:rotate(2.8deg)}.orange-ticket{position:absolute;z-index:5;right:31px;top:42px;padding:16px 14px;color:#fff;background:var(--orange);font-size:8px;font-weight:700;line-height:1.5;letter-spacing:.17em;transform:rotate(3deg)}
.reading-photo{left:38px;right:38px;top:58px;bottom:38px;transform:rotate(-1.2deg)}.reading-photo img{object-position:center 40%}.round-stamp{position:absolute;z-index:4;right:19px;bottom:22px;width:74px;height:74px;display:grid;place-items:center;text-align:center;color:var(--orange);border:2px solid var(--orange);border-radius:50%;font-size:8px;font-weight:700;line-height:1.5;letter-spacing:.12em;transform:rotate(8deg)}.ending-page .pencil.big{left:38px;top:42px;color:var(--blue);font-size:38px;transform:rotate(-3deg)}.bed-book-photo{left:36px;top:145px;width:50%;height:390px;transform:rotate(1deg)}.table-photo{right:27px;top:74px;width:42%;height:315px;transform:rotate(3deg)}.end-note{position:absolute;right:34px;bottom:37px;width:42%;padding:20px;background:#fff0b9;border:1px solid var(--line);transform:rotate(-1deg)}.end-note b{display:block;color:var(--orange);font:600 27px/1 var(--hand)}.end-note span{display:block;margin-top:9px;font-size:8px;line-height:1.5;letter-spacing:.08em}.book-fold{position:absolute;z-index:25;right:0;bottom:0;width:38px;height:38px;background:linear-gradient(135deg,rgba(40,39,33,.12) 0 49%,#f5ead5 51%)}
.gingham-tab{position:absolute;z-index:4;right:-18px;top:55px;width:92px;height:68px;background-color:#fff2dd;background-image:linear-gradient(90deg,rgba(214,103,50,.4) 50%,transparent 50%),linear-gradient(rgba(214,103,50,.4) 50%,transparent 50%);background-size:18px 18px;border:6px solid #fff;box-shadow:5px 6px 0 rgba(40,39,33,.1);transform:rotate(4deg)}.blue-thread{position:absolute;z-index:4;left:-14px;bottom:72px;width:70px;height:70px;border:6px solid var(--powder);border-radius:50%;transform:rotate(-12deg)}.notebook-controls{margin:20px 3px 0;display:grid;grid-template-columns:42px auto 1fr 42px;gap:15px;align-items:center}.notebook-controls button{width:42px;height:42px;color:var(--ink);border:1px solid rgba(40,39,33,.35);border-radius:50%;background:rgba(255,253,247,.86);cursor:pointer;transition:color .2s,background .2s,transform .25s}.notebook-controls button:hover,.notebook-controls button:focus-visible{color:#fff;background:var(--orange);transform:translateY(-2px)}.notebook-controls button:disabled{opacity:.3;cursor:default;transform:none}.notebook-controls output{display:flex;gap:5px;align-items:baseline;font:400 22px/1 var(--serif)}.notebook-controls output span{font:600 8px/1 var(--sans);letter-spacing:.11em}.progress{height:1px;background:rgba(40,39,33,.2)}.progress i{display:block;width:25%;height:3px;margin-top:-1px;background:var(--orange);transition:width .55s cubic-bezier(.2,.72,.2,1)}.interaction-hint{margin:10px 0 0;color:rgba(40,39,33,.54);font-size:7px;letter-spacing:.14em;text-align:right;text-transform:uppercase}
@media(max-width:1050px){.guest-moments{grid-template-columns:250px minmax(600px,1fr);gap:3vw}.book{min-height:520px}.page{padding:27px}.page-title.compact h2{font-size:37px}}
@media(max-width:800px){.review-bar{height:58px;padding:0 17px;grid-template-columns:1fr auto}.review-bar p{display:none}.review-bar img{width:51px}.guest-moments{min-height:auto;padding:95px 18px 55px;display:block}.guest-moments::before{height:9%}.section-copy h1{font-size:22vw}.intro{max-width:82%}.hand-note{position:absolute;right:19px;top:235px;width:150px;padding:14px}.hand-note b{font-size:24px}.review-note{margin-bottom:45px}.notebook-stage{width:100%;max-width:none;justify-self:auto}.book{height:720px;min-height:0;overflow:hidden}.spread{display:block;overflow-y:auto;scroll-snap-type:y proximity}.page{min-height:640px;scroll-snap-align:start}.page-left{border-right:0;border-bottom:1px solid var(--line)}.book::before{display:none}.book::after{left:0;top:50%;width:100%;height:50%;transform-origin:center top}.book.turn-back::after{left:0;top:0;transform-origin:center bottom}.lead-photo{inset:64px 24px 30px}.window-photo{left:26px;right:38%;top:180px;bottom:32px}.spread-one .page-right{min-height:680px}.door-photo{left:29px;width:58%}.portrait-photo{left:26px;width:56%}.collage-page{min-height:700px}.chair-photo{left:27px}.reading-photo{left:28px;right:28px}.ending-page{min-height:690px}.notebook-controls{grid-template-columns:44px auto 1fr 44px}.gingham-tab{right:-7px}.blue-thread{left:-7px}.interaction-hint{text-align:left}}
@media(prefers-reduced-motion:reduce){.book::after{display:none}.spread,.progress i,.notebook-controls button{transition:none!important}}

:host{display:block} .guest-moments{padding-top:clamp(3.5rem,7vh,6rem)} .review-note{display:none!important}

/* A real paper leaf carries the current page across the notebook spine. */
.book,.page-left,.page-right{cursor:pointer}
.page-turn-stationary{position:absolute!important;z-index:17;top:0;width:50%;height:100%;overflow:hidden;pointer-events:none}
.page-turn-stationary--left{left:0}.page-turn-stationary--right{right:0}
.page-turn-sheet{position:absolute;z-index:18;top:0;width:50%;height:100%;transform-style:preserve-3d;pointer-events:none;will-change:transform;filter:drop-shadow(0 7px 7px rgba(45,31,20,.18))}
.page-turn-sheet--forward{left:50%;transform-origin:left center;transform:rotateY(0)}
.page-turn-sheet--back{left:0;transform-origin:right center;transform:rotateY(0)}
.page-turn-sheet--forward.is-turning{animation:sheetForward .9s cubic-bezier(.64,.03,.22,1) forwards}
.page-turn-sheet--back.is-turning{animation:sheetBack .9s cubic-bezier(.64,.03,.22,1) forwards}
.page-turn-face,.page-turn-reverse{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(63,45,28,.08)}
.page-turn-face::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.02),transparent 56%,rgba(66,43,25,.16));pointer-events:none}.page-turn-sheet--back .page-turn-face::after{background:linear-gradient(270deg,rgba(255,255,255,.02),transparent 56%,rgba(66,43,25,.16))}
.page-turn-reverse{transform:rotateY(180deg);background-color:var(--page);background-image:linear-gradient(rgba(49,91,106,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(49,91,106,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(45,31,20,.13),transparent 18%);background-size:24px 24px,24px 24px,100% 100%}
.page-turn-sheet--back .page-turn-reverse{background-image:linear-gradient(rgba(49,91,106,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(49,91,106,.035) 1px,transparent 1px),linear-gradient(270deg,rgba(45,31,20,.13),transparent 18%)}
.book.turn-forward::after,.book.turn-back::after{inset:0;width:100%;height:100%;transform:none;background:radial-gradient(ellipse at 50% 50%,rgba(40,31,22,.3),transparent 43%);animation:pageTurnShadow .92s cubic-bezier(.64,.03,.22,1)}
@keyframes sheetForward{0%{transform:rotateY(0) scaleX(1)}46%{transform:rotateY(-82deg) scaleX(.96);filter:drop-shadow(-18px 13px 13px rgba(45,31,20,.27))}58%{transform:rotateY(-105deg) scaleX(.965)}100%{transform:rotateY(-180deg) scaleX(1);filter:drop-shadow(-2px 5px 4px rgba(45,31,20,.08))}}
@keyframes sheetBack{0%{transform:rotateY(0) scaleX(1)}46%{transform:rotateY(82deg) scaleX(.96);filter:drop-shadow(18px 13px 13px rgba(45,31,20,.27))}58%{transform:rotateY(105deg) scaleX(.965)}100%{transform:rotateY(180deg) scaleX(1);filter:drop-shadow(2px 5px 4px rgba(45,31,20,.08))}}
@keyframes pageTurnShadow{0%,100%{opacity:0}42%,58%{opacity:.62}}
@media(max-width:800px){.page-turn-sheet,.page-turn-stationary{display:none}}
@media(prefers-reduced-motion:reduce){.page-turn-sheet,.page-turn-stationary{display:none}}
