/* Each pause is a page from the same imaginary paper travel bureau. */
:root{--paper-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%2306102e' opacity='.035' filter='url(%23grain)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}
.paper-symbols{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.paper-mark{position:absolute;display:block;pointer-events:none;z-index:0}
.story-pause,.ticket-arrival,.brochure-page,.wardrobe-page,.postcard-page,.contact-roll,.finale-page{position:relative;isolation:isolate;background-image:var(--paper-grain)}

/* A letter: ruled cream stationery and a shell stamp. */
.story-pause{padding:clamp(120px,12vw,190px) 11% clamp(100px,10vw,155px);overflow:hidden}
.story-pause:before{content:"";position:absolute;inset:28px;border:1px solid #0955d742;pointer-events:none}
.story-layout{position:relative;z-index:1;grid-template-columns:1.15fr 1fr;gap:clamp(55px,9vw,135px);align-items:start}
.story-heading{padding-top:8px}
.story-heading .kicker{color:var(--paper-blue);margin-bottom:34px}
.story-heading h2{color:var(--paper-blue)}
.story-heading h2 em{color:var(--paper-ink)}
.story-copy{border-left:1px solid #0955d730;padding-left:clamp(28px,3vw,48px);max-width:430px}
.story-pause .letter-signature{color:var(--paper-blue)}
.letter-stamp{position:absolute;right:7%;top:43px;width:65px;height:80px;border:1px dashed var(--paper-blue);outline:1px solid #0955d74d;outline-offset:5px;transform:rotate(7deg);color:var(--paper-blue);display:grid;justify-items:center;align-content:center;gap:5px;pointer-events:none}
.letter-stamp svg{width:35px;height:30px}
.letter-stamp span{font:24px/1 Georgia,serif}

/* A mounted print: a cream mat and an offset yellow paper sheet. */
.ticket-arrival{padding:clamp(95px,10vw,155px) 11%;overflow:hidden}
.ticket-art-link{position:relative;z-index:1;max-width:1170px;outline:clamp(7px,1vw,14px) solid var(--paper-cream);box-shadow:clamp(18px,2.5vw,36px) clamp(20px,2.8vw,40px) 0 #ffcf29,0 18px 28px #760f4226}
.ticket-art-link:focus-visible{outline:4px solid var(--paper-ink);outline-offset:16px}
.ticket-arrival:before{content:"";position:absolute;left:4.5%;top:35%;height:36%;border-left:1px solid #06102e2b}

/* The brochure lies on a cobalt desk, with a quiet route in its margin. */
.brochure-page{padding:clamp(85px,9vw,145px) 9% clamp(110px,11vw,170px);overflow:hidden;background-color:var(--paper-blue)}
.brochure-page:before{content:"";position:absolute;left:4%;top:9%;bottom:9%;width:9px;background:var(--paper-highlight);box-shadow:5px 0 0 #07367f44}
.brochure-page .brochure-set{width:100%;max-width:1220px;margin:0 auto;box-shadow:12px 16px 0 #03296655}
.brochure-route{width:clamp(140px,20vw,250px);height:auto;bottom:24px;right:10%;color:var(--paper-cream);opacity:.7}

/* A pink packing counter: arch-shaped paper tabs echo the wardrobe. */
.wardrobe-page{padding:clamp(100px,10vw,150px) 8% 0;overflow:hidden}
.wardrobe-page:before{content:"";position:absolute;width:16%;height:110px;left:12%;top:65px;background:var(--paper-blue);border-radius:50% 50% 0 0;transform:rotate(-8deg);box-shadow:5px 4px 0 #06102e13;z-index:0}
.wardrobe-page .wardrobe-set{position:relative;z-index:1;width:100%;max-width:1260px;margin:0 auto;box-shadow:0 14px 0 #a5195940}
.wardrobe-shell{width:clamp(50px,6vw,85px);height:auto;right:11%;top:24px;color:var(--paper-highlight);transform:rotate(12deg)}
.packing-inventory{padding-top:clamp(75px,8vw,120px);background-image:var(--paper-grain)}
.packing-inventory .section-top{position:relative;padding:0 0 35px;border-bottom:1px solid #06102e44;margin-bottom:46px}
.packing-inventory .section-top h2{max-width:640px}
.packing-inventory .rail-arrows button{border-radius:50%;background:#ffd029;border-color:var(--paper-ink)}
.packing-inventory .rail-arrows button:hover:not(:disabled){background:var(--paper-cream)}
.packing-inventory .product .picture{border-width:7px;box-shadow:5px 7px 0 #7f194d25}
.packing-inventory .shop-controls{padding-top:28px}
.packing-inventory .shop-add{border-radius:0}

/* Postcards sit on an airmail sheet, with colour only at its edges. */
.postcard-chapter{background:var(--paper-cream)}
.postcard-page{background-color:var(--paper-cream);padding:clamp(100px,11vw,170px) 10%;overflow:hidden}
.postcard-page:before,.postcard-page:after{content:"";position:absolute;left:5%;right:5%;height:7px;background:repeating-linear-gradient(135deg,var(--paper-blue) 0 24px,transparent 24px 38px,var(--paper-pink) 38px 62px,transparent 62px 76px)}
.postcard-page:before{top:32px}
.postcard-page:after{bottom:32px}
.postcard-page .postcard-set{width:100%;max-width:1190px;margin:0 auto;box-shadow:12px 14px 0 #e8ddc9,0 18px 34px #06102e16;transform:rotate(-1deg)}
.postcard-seal{right:3.5%;bottom:52px;width:clamp(50px,7vw,95px);height:auto;color:var(--paper-pink);opacity:.85}

/* A blue scrapbook spread: cream photo mounts with room between them. */
.contact-roll{padding:clamp(70px,8vw,120px) 8% clamp(90px,9vw,140px);background-color:var(--paper-blue)}
.roll-heading{padding-bottom:24px;margin-bottom:30px;border-bottom:1px solid #fffaf04d}
.contact-photos{align-items:flex-start;gap:clamp(28px,4vw,62px);padding-top:25px;padding-bottom:32px}
.contact-photos figure{position:relative;flex-basis:28%;padding:10px 10px 0;background:var(--paper-cream);color:var(--paper-ink);box-shadow:6px 8px 0 #0329646b}
.contact-photos figure:nth-child(even){margin-top:38px}
.contact-photos figure:before{content:"";position:absolute;z-index:1;left:38%;top:-11px;width:25%;height:25px;background:#ffd029d9;transform:rotate(-4deg);clip-path:polygon(2% 0,98% 5%,95% 96%,0 100%);pointer-events:none}
.contact-photos figcaption{padding:20px 8px 23px;line-height:1.4}
.contact-photos .picture{background:var(--paper-cream)}

/* The last still is a centred keepsake on a cream folio. */
.finale-page{background-color:var(--paper-cream);padding:clamp(100px,11vw,170px) 10% clamp(135px,13vw,190px);overflow:hidden}
.finale-page:before{content:"";position:absolute;inset:33px;border:1px solid #0955d73b;pointer-events:none}
.finale-page .finale-set{width:100%;max-width:1190px;margin:0 auto;box-shadow:0 0 0 9px var(--paper-cream),0 0 0 10px #0955d755,12px 17px 0 #f027913b}
.finale-shell{left:calc(50% - 27px);bottom:43px;width:54px;height:45px;color:var(--paper-blue)}

@media(max-width:850px){
 .story-pause{padding:115px 10% 95px}
 .story-layout{grid-template-columns:1fr;gap:38px}
 .story-heading .kicker{margin-bottom:24px}
 .story-copy{border-left:0;border-top:1px solid #0955d730;padding:30px 0 0;max-width:480px}
 .letter-stamp{right:10%;top:35px;width:46px;height:57px;outline-offset:3px}
 .letter-stamp svg{width:24px;height:21px}
 .letter-stamp span{font-size:17px}
 .story-pause:before{inset:19px}
 .ticket-arrival{padding:85px 9% 98px}
 .ticket-art-link{outline-width:7px;box-shadow:15px 19px 0 #ffcf29,0 12px 20px #760f4226}
 .brochure-page{padding:70px 8% 105px}
 .brochure-page:before{left:3%;width:5px}
 .brochure-route{width:140px;right:10%;bottom:14px}
 .brochure-page .brochure-set{box-shadow:7px 10px 0 #03296655}
 .wardrobe-page{padding:85px 7% 0}
 .wardrobe-page:before{top:58px;height:60px;width:23%;left:12%}
 .wardrobe-shell{width:45px;top:20px;right:12%}
 .packing-inventory{padding:66px 7% 90px}
 .packing-inventory .section-top{padding-bottom:28px;margin-bottom:36px}
 .packing-inventory .product .picture{border-width:5px}
 .postcard-page{padding:85px 8% 95px}
 .postcard-page:before{top:24px}
 .postcard-page:after{bottom:24px}
 .postcard-page:before,.postcard-page:after{height:5px}
 .postcard-page .postcard-set{box-shadow:7px 10px 0 #e8ddc9,0 10px 24px #06102e16}
 .postcard-seal{width:42px;right:3%;bottom:39px}
 .contact-roll{padding:64px 7% 88px}
 .contact-photos{gap:28px}
 .contact-photos figure{flex-basis:60%;padding:8px 8px 0}
 .contact-photos figure:nth-child(even){margin-top:26px}
 .contact-photos figcaption{padding:17px 5px 20px;font-size:8px}
 .finale-page{padding:75px 9% 125px}
 .finale-page:before{inset:20px}
 .finale-page .finale-set{box-shadow:0 0 0 6px var(--paper-cream),0 0 0 7px #0955d755,8px 12px 0 #f027913b}
 .finale-shell{bottom:39px;width:42px;height:35px;left:calc(50% - 21px)}
}
@media(max-width:540px){
 .story-heading h2{font-size:clamp(45px,11vw,60px)}
 .packing-inventory .section-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
 .packing-inventory .section-top h2{font-size:clamp(28px,8vw,35px);max-width:230px}
 .packing-inventory .rail-arrows button{width:40px;height:44px}
 .contact-photos figure{flex-basis:73%}
 .roll-heading{font-size:8px;letter-spacing:.08em;line-height:1.6}
}

/* Navigation and brochure alignment. Keep the set and inserts in one coordinate space. */
.header{background:var(--paper-blue);color:#fff}
.header a,.header button{color:#fff}
.brochure-page .brochure-set{position:relative;aspect-ratio:16/9;height:auto;margin-inline:auto}
.brochure-set>.set-art{width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.brochure-set .mount{display:block;padding:0;margin:0;min-height:0;background:transparent}
.brochure-set .mount img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:contain;object-position:center;background:transparent}

.packing-inventory .product .picture{background:var(--paper-blue)}

/* A few rounded paper cutouts carry Maha's original monochrome artwork. */
.artwork-accent{position:absolute;display:block;z-index:0;pointer-events:none;width:clamp(130px,16vw,230px);aspect-ratio:1;background:#fff url("assets/maha-monochrome-accent-art.png") center/145% auto no-repeat;border-radius:47% 53% 62% 38% / 56% 42% 58% 44%;box-shadow:5px 7px 0 #06102e26;transform:rotate(-14deg)}
.artwork-accent::after{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--paper-grain);pointer-events:none}
.artwork-accent--letter{width:clamp(115px,13vw,185px);left:-55px;top:-55px;transform:rotate(22deg)}
.artwork-accent--ticket{width:clamp(98px,12vw,173px);right:-49px;bottom:-41px;border-radius:56% 44% 42% 58% / 39% 57% 43% 61%;transform:rotate(18deg)}
.artwork-accent--brochure{left:-65px;bottom:-55px;aspect-ratio:1.12;border-radius:42% 58% 54% 46% / 60% 46% 54% 40%;transform:rotate(-22deg)}
.brochure-page>.brochure-set{position:relative;z-index:1}
@media(max-width:850px){.artwork-accent{width:115px;box-shadow:3px 4px 0 #06102e26}.artwork-accent--letter{width:95px;left:-35px;top:-36px}.artwork-accent--ticket{width:86px;right:-26px;bottom:-21px}.artwork-accent--brochure{left:-32px;bottom:-28px}}

/* A final postcard, laid on the pink paper desk between the films. */
footer.farewell-postcard{position:relative;isolation:isolate;background:#f21d91;background-image:var(--paper-grain);color:#fff;padding:clamp(60px,6.5vw,110px) 7%;overflow:hidden}
.farewell-postcard__layout{max-width:1450px;margin:auto;display:grid;grid-template-columns:1.45fr 1fr;align-items:center;gap:clamp(45px,6vw,100px)}
.farewell-postcard__photo{margin:0;min-width:0;border:clamp(7px,.85vw,13px) solid #fff;background:#0955e8;transform:rotate(-2deg);box-shadow:12px 15px 0 #ffcf29,16px 22px 20px #8b06422b}
.farewell-postcard__photo img{display:block;width:100%;height:auto;aspect-ratio:1834/1017;object-fit:contain}
.farewell-postcard__photo figcaption{display:flex;justify-content:space-between;gap:15px;padding:16px 14px;font:10px/1.5 Arial,sans-serif;letter-spacing:.12em;color:#fff}
.farewell-postcard__message{position:relative;padding-top:86px;min-width:0}
.farewell-postcard__postage{position:absolute;right:0;top:-25px;display:flex;align-items:center;flex-direction:row-reverse;gap:10px;transform:rotate(8deg)}
.farewell-postcard__stamp{display:block;width:78px;height:96px;background:#fff url("assets/postcard-swirl-original.png") center/cover;border:7px solid #fff;outline:2px dashed #fff;outline-offset:3px;box-shadow:3px 4px 0 #a50a4e30}
.farewell-postcard__postmark{display:grid;place-content:center;width:89px;height:89px;border:1px solid #ffffffb3;border-radius:50%;text-align:center;font:10px/1.8 Arial,sans-serif;letter-spacing:.12em;transform:rotate(-18deg)}
.farewell-postcard__eyebrow{font:10px/1.5 Arial,sans-serif;letter-spacing:.2em;margin:0 0 20px;color:#fff}
.farewell-postcard__message h2{font:400 clamp(48px,5.7vw,84px)/.98 Georgia,serif;letter-spacing:-.045em;margin:0 0 26px;color:#fff}
.farewell-postcard__message h2 em{font-weight:400}
.farewell-postcard__note{font:16px/1.8 Arial,sans-serif;margin:0;color:#fff}
.farewell-postcard__signature{font:italic 21px/1.4 Georgia,serif;border-top:1px solid #ffffff80;padding-top:18px;margin:24px 0 0;color:#fff}
@media(max-width:700px){footer.farewell-postcard{padding:58px 8% 50px}.farewell-postcard__layout{grid-template-columns:1fr;gap:42px}.farewell-postcard__photo{box-shadow:8px 10px 0 #ffcf29}.farewell-postcard__photo figcaption{font-size:8px;padding:12px 9px}.farewell-postcard__photo figcaption span{max-width:95px;text-align:right}.farewell-postcard__message{padding-top:62px}.farewell-postcard__postage{top:0;right:4px}.farewell-postcard__stamp{width:56px;height:69px;border-width:5px}.farewell-postcard__postmark{width:66px;height:66px;font-size:8px}.farewell-postcard__eyebrow{font-size:8px;max-width:52%;margin-bottom:18px}.farewell-postcard__message h2{font-size:clamp(52px,12vw,75px)}.farewell-postcard__note{font-size:14px}.farewell-postcard__signature{font-size:19px}}

/* A small companion cutout in the letter's lower-right margin. */
.artwork-accent--letter-bottom{width:clamp(90px,10vw,140px);right:-28px;bottom:-30px;aspect-ratio:1.12;border-radius:57% 43% 62% 38% / 45% 58% 42% 55%;background-position:65% 70%;transform:rotate(-24deg)}
@media(max-width:850px){.artwork-accent--letter-bottom{width:82px;right:-20px;bottom:-23px}}