/* Third edition: a personal zine with deliberately different photo spreads. */
:root{--raspberry:#a6294c;--bubblegum:#e8a9bc;--yellow:#eee88d}
.cover-annotation{position:absolute;z-index:4;left:41%;top:14%;font:28px var(--hand);color:var(--pink);transform:rotate(-9deg);border-bottom:2px solid currentColor;padding:4px 11px}
.hero-caption{border:1px solid #fff8;border-radius:50%;padding:28px 34px;right:4%;top:17%;font-size:31px;transform:rotate(9deg)}
.hero-topline p{font-size:14px;letter-spacing:.06em}.hero-type .birthday{font-family:var(--hand);font-size:clamp(40px,5.5vw,90px);margin-top:-.56em}




.chapter-intro>p:last-child{color:var(--raspberry)}.tunnel-title h2 em{position:relative;display:inline-block}.tunnel-title h2 em:after{content:'';position:absolute;left:-8%;right:-8%;top:5%;bottom:-8%;border:2px solid var(--raspberry);border-radius:50%;transform:rotate(-7deg);z-index:-1}
.tunnel-photo{padding-bottom:18px}.tunnel-photo:after{content:'не удалять ♡';position:absolute;bottom:0;right:15px;font:19px var(--hand);color:var(--raspberry)}
.paper-wall .media-cell:nth-child(2){background:var(--yellow)}.school .section-heading{position:relative}.school-heading-note{font-size:29px;max-width:290px;color:var(--yellow)}
.school-postscript{display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid #e7b2c245;padding:55px 2% 35px}
.scribble-label{background:var(--yellow);color:var(--ink);padding:14px 24px;font:30px var(--hand);transform:rotate(-6deg)}
.school-postscript p{font:500 37px/1.1 var(--serif);text-align:right;max-width:640px;margin:0}.school-postscript em{color:var(--pink)}.school-quote{margin-top:70px}.scene-copy .hand{background:var(--pink);color:var(--ink);padding:12px 20px;transform:rotate(-8deg)}
.you>.section-heading{position:relative}.you>.section-heading:after{content:'да, это всё один человек';position:absolute;right:3%;bottom:20px;font:31px var(--hand);color:var(--raspberry);transform:rotate(7deg)}
.you-intro{margin-bottom:65px}.you-intro .media-cell:nth-child(2) .photo-tile{border-radius:0}.you-intro .media-cell:first-child{padding:10px 10px 35px;background:var(--pink)}.you-intro .media-cell:nth-child(3){border:8px solid var(--yellow)}
.big-inline-quote{font-size:clamp(50px,7vw,106px)}.big-inline-quote em{position:relative}.big-inline-quote em:after{content:'';position:absolute;height:3px;background:var(--raspberry);left:0;right:0;bottom:3px;transform:rotate(-3deg)}
.portrait-story{margin-top:95px}
.fashion-spread{display:grid;grid-template-columns:1.08fr 1.2fr .78fr;gap:4%;align-items:center;position:relative;min-height:640px;margin-bottom:95px}
.fashion-photo{position:relative}.fashion-photo .photo-tile{height:100%}.fashion-a{height:600px}.fashion-a img{filter:grayscale(1)}.fashion-a>.hand{position:absolute;left:13%;bottom:-18px;background:var(--yellow);font-size:32px;padding:8px 24px;transform:rotate(-6deg);color:var(--ink);white-space:nowrap}
.fashion-copy{align-self:center;position:relative;z-index:2}.fashion-copy>.eyebrow{display:block;letter-spacing:.1em}.fashion-copy>p{font:600 clamp(38px,5vw,76px)/.94 var(--sans);letter-spacing:-.05em;margin:28px 0}.fashion-copy>p em{font:500 1.13em/.9 var(--serif);letter-spacing:-.04em;white-space:nowrap}
.fashion-b{height:390px;margin-top:180px;transform:rotate(6deg);border:9px solid var(--pink);box-shadow:0 7px 20px #36203113}
.circle-note{display:flex;align-items:center;justify-content:center;position:absolute;left:46%;bottom:-160px;width:140px;height:140px;border:2px solid var(--raspberry);border-radius:50%;font:33px/1 var(--hand);color:var(--raspberry);text-align:center;transform:rotate(14deg)}
.outtakes{margin:110px -4.35% 0;padding:75px 5% 65px;background:var(--bubblegum);color:var(--ink);overflow:hidden;position:relative}
.outtakes-head{position:relative;display:grid;grid-template-columns:1.3fr .7fr;align-items:center;padding:0 2%;margin-bottom:40px}
.outtakes-head>.eyebrow{grid-column:1/-1;margin-bottom:18px;letter-spacing:.06em}.outtakes-head h3{font:600 clamp(55px,7.2vw,110px)/.92 var(--sans);letter-spacing:-.055em;margin:0;position:relative;z-index:2}.outtakes-head h3 s{font-size:.71em;letter-spacing:-.03em;text-decoration-color:var(--raspberry);text-decoration-thickness:5px}.outtakes-head h3 em{font:500 1.15em/.9 var(--serif);letter-spacing:-.03em;white-space:nowrap}
.outtakes-stamp{justify-self:center;transform:rotate(13deg);font-size:18px;letter-spacing:.05em;border:2px solid currentColor;border-radius:50%;width:185px;height:185px;display:flex;justify-content:center;align-items:center;text-align:center;line-height:1.3;padding:20px;color:var(--raspberry)}
.outtakes-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:25px 4%;align-items:center;padding:35px 2% 20px;position:relative}
.outtake{margin:0;min-width:0}.outtake .photo-tile{height:100%}.outtake figcaption{font:30px/1.1 var(--hand);text-align:center;padding:14px 4px 0}.outtake-0{grid-column:1/7;grid-row:1/3;align-self:center;transform:rotate(-5deg)}.outtake-0 .photo-tile{aspect-ratio:.93;border-radius:48% 49% 47% 46%}.outtake-0 figcaption{font-size:37px;margin-top:10px;transform:rotate(-2deg);color:var(--raspberry)}
.outtake-1{grid-column:8/12;grid-row:1;transform:rotate(8deg);padding:9px 9px 20px;background:var(--paper);box-shadow:0 7px 25px #35202b22}.outtake-1 .photo-tile{aspect-ratio:1.1}
.outtake-2{grid-column:9/13;grid-row:2;transform:rotate(-6deg);padding:9px 9px 20px;background:var(--yellow);margin-top:15px}.outtake-2 .photo-tile{aspect-ratio:1.1}
.outtake-3{grid-column:2/6;grid-row:3;transform:rotate(-7deg);margin-top:40px}.outtake-3 .photo-tile{aspect-ratio:1.03}.outtake-4{grid-column:6/10;grid-row:3;transform:rotate(7deg);padding:8px 8px 18px;background:var(--paper)}.outtake-4 .photo-tile{aspect-ratio:.93}.outtake-aside{grid-column:10/13;grid-row:3;font:42px/1.05 var(--hand);color:var(--raspberry);transform:rotate(-7deg);text-align:center}
.photo-desk{padding:85px 0 40px}.desk-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:35px}.desk-heading h3,.rest-heading h3{font:600 clamp(42px,5.5vw,82px)/.98 var(--sans);letter-spacing:-.05em;margin:20px 0 0}.desk-heading h3 em,.rest-heading h3 em{font:500 1.1em/.95 var(--serif);letter-spacing:-.03em}.desk-instructions{min-width:210px;max-width:270px;text-align:right}.desk-instructions .hand{display:block;font-size:28px;color:var(--raspberry);transform:rotate(5deg);margin-bottom:20px}.reset-desk{background:transparent;font-size:14px;border-bottom:1px solid currentColor;padding:8px 0}
.desk-surface{height:970px;position:relative;margin:50px -4.35% 0;background-image:radial-gradient(#34262a1f .8px,transparent .8px);background-size:22px 22px;overflow:hidden}
.desk-photo{position:absolute;width:25%;height:365px;margin:0;padding:0 8px 10px;background:var(--paper);box-shadow:0 10px 34px #35202b29;border:1px solid #2c162611;transform:translate(var(--drag-x,0px),var(--drag-y,0px)) rotate(var(--card-turn));transform-origin:center;will-change:transform;transition:box-shadow .2s;z-index:2}
.desk-photo .photo-tile{height:calc(100% - 44px);width:100%}.drag-handle{display:block;background:transparent;width:100%;height:44px;padding:5px 4px;font:26px/1 var(--hand);text-align:center;touch-action:none;cursor:grab;color:var(--ink);user-select:none}.drag-handle:focus-visible{outline-offset:-2px}.desk-photo.dragging{box-shadow:0 22px 45px #35202b42}.desk-photo.dragging .drag-handle{cursor:grabbing}.desk-photo:nth-of-type(1){left:5%;top:35px}.desk-photo:nth-of-type(2){left:37%;top:130px}.desk-photo:nth-of-type(3){left:68%;top:40px}.desk-photo:nth-of-type(4){left:10%;top:510px}.desk-photo:nth-of-type(5){left:41%;top:540px}.desk-photo:nth-of-type(6){left:72%;top:485px}.desk-photo:nth-of-type(3n+2){background:var(--yellow)}.desk-note{position:absolute;left:10%;top:415px;font:32px/1.15 var(--hand);color:var(--raspberry);transform:rotate(-7deg);margin:0}
.memory-receipt{max-width:470px;margin:45px auto 85px;padding:35px 30px 28px;background:var(--pink);color:var(--ink);box-shadow:0 7px 23px #492a3613;transform:rotate(-3deg);position:relative;border-top:1px dashed #42223366;border-bottom:1px dashed #42223366}
.receipt-title{display:block;font-size:17px;font-weight:600;text-align:center;letter-spacing:.08em;border-bottom:1px dashed #42223366;padding-bottom:22px;margin-bottom:22px}.memory-receipt p{font-size:14px;display:flex;justify-content:space-between;gap:20px;margin:13px 0}.memory-receipt strong{display:block;font-size:20px;border-top:1px dashed #42223366;padding-top:21px;margin-top:22px;letter-spacing:-.025em}.memory-receipt .hand{font-size:30px;display:block;text-align:right;margin:24px 0 0;color:var(--raspberry)}
.rest-heading{text-align:center;padding:20px 0 55px}.rest-heading h3{font-size:clamp(48px,6vw,90px)}.remaining-wall{columns:4;column-gap:23px}.remaining-wall .media-cell{break-inside:avoid;display:inline-block;width:100%;margin:0 0 24px;padding:0;position:relative;transform:none!important}.remaining-wall .photo-tile{aspect-ratio:var(--aspect)}.remaining-wall .video-tile{aspect-ratio:.8}.remaining-wall .media-cell:nth-child(7n+3){padding:8px 8px 23px;background:var(--pink)}.remaining-wall .media-cell:nth-child(9n){border:6px solid var(--yellow)}.remaining-wall video{position:absolute;inset:0}.remaining-wall .media-cell:nth-child(5n+2) .photo-tile{aspect-ratio:.82}
.together-title h2{font-size:clamp(57px,7.4vw,116px)}.together-title .eyebrow{display:inline-block;border:1px solid currentColor;border-radius:50%;padding:17px 24px;transform:rotate(-6deg);letter-spacing:.05em}.together-title .hand{color:var(--raspberry)}.duo-wall .media-cell:nth-child(7n+3):after{content:'да, снова мы ♡';display:block;padding:10px 0 0;font:26px var(--hand);text-align:right;color:var(--raspberry)}
.happy-outro em{color:var(--paper)}.finale h2{font-size:clamp(75px,12vw,190px)}.finale-copy{font:500 clamp(27px,3vw,43px)/1.16 var(--serif);max-width:780px;text-align:center;letter-spacing:-.015em}.finale>.hand{color:var(--raspberry);font-size:32px}.wish-button{font-size:17px;padding:17px 32px;transform:rotate(-3deg);border-radius:5px;box-shadow:6px 6px 0 #fff7f480;transition:transform .2s,box-shadow .2s}.wish-button:hover{transform:rotate(0deg) translateY(-2px);box-shadow:8px 8px 0 #fff7f480}
@media(min-width:1800px){.fashion-spread{min-height:760px}.fashion-a{height:740px}.fashion-b{height:470px}.desk-surface{height:1120px}.desk-photo{height:430px}.desk-photo:nth-of-type(4){top:610px}.desk-photo:nth-of-type(5){top:650px}.desk-photo:nth-of-type(6){top:595px}.desk-note{top:505px}.remaining-wall{columns:5}}
@media(max-width:1050px){.cover-annotation{left:43%;top:13%;font-size:24px}.hero-caption{font-size:27px;padding:20px 25px}.you>.section-heading:after{font-size:27px;right:0;bottom:-18px}.fashion-a{height:470px}.fashion-b{height:310px;margin-top:130px}.fashion-spread{min-height:520px}.fashion-copy>p{font-size:5vw}.circle-note{width:115px;height:115px;font-size:29px;bottom:-145px}.desk-photo{height:305px;width:26%}.desk-surface{height:850px}.desk-photo:nth-of-type(4){top:430px}.desk-photo:nth-of-type(5){top:465px}.desk-photo:nth-of-type(6){top:440px}.desk-note{top:360px;font-size:27px}.desk-heading h3{font-size:48px}.desk-instructions{min-width:170px;max-width:210px}.desk-instructions .hand{font-size:25px}.remaining-wall{columns:3}.fashion-a>.hand{font-size:27px;padding:6px 14px}.outtake figcaption{font-size:25px}.outtake-0 figcaption{font-size:31px}.outtake-aside{font-size:33px}.outtakes-stamp{width:145px;height:145px;font-size:16px}.school-postscript p{font-size:32px}.scribble-label{font-size:27px;padding:12px 18px}}
@media(max-width:700px){.hero-caption{border:none;border-radius:0;padding:0;top:39%;right:6%;font-size:27px;transform:rotate(-8deg);color:var(--yellow)}.cover-annotation{left:6%;top:29%;font-size:23px;padding:2px 5px;transform:rotate(-6deg)}.hero-topline p{font-size:12px}.hero-type .birthday{font-size:36px;margin:2px 4% 0 0}.tunnel-title h2 em:after{left:-4%;right:-4%;border-width:1.5px}.tunnel-photo:after{font-size:17px;bottom:0;right:7px}.school-heading-note{display:none}.school-postscript{flex-direction:column;align-items:flex-start;padding:38px 2% 27px;gap:28px}.scribble-label{font-size:25px;padding:10px 20px}.school-postscript p{font-size:31px;text-align:left;line-height:1.06}.school-quote{font-size:42px;margin-top:45px}.scene-copy .hand{display:table;margin-left:auto;font-size:27px;padding:8px 15px}.you>.section-heading:after{font-size:24px;right:1%;bottom:-44px}.you-intro{margin-top:70px}.you-intro .media-cell:first-child{padding:6px 6px 22px;height:245px}.you-intro .media-cell:nth-child(3){border-width:5px}.you-intro:after{content:'ты, только\a посмотри!';font-size:30px}.big-inline-quote{font-size:46px;margin:45px 0}.big-inline-quote em:after{height:2px;bottom:1px}.portrait-story{margin-top:55px}.fashion-spread{grid-template-columns:1fr 1fr;gap:15px;min-height:0;margin-bottom:65px}.fashion-a{height:320px;grid-column:1;grid-row:1/3}.fashion-copy{grid-column:2;grid-row:1;align-self:start;padding-top:20px}.fashion-copy>.eyebrow{font-size:12px;letter-spacing:.015em}.fashion-copy>p{font-size:33px;line-height:.99;letter-spacing:-.05em;margin:18px 0}.fashion-copy>p em{font-size:1.03em;white-space:normal}.fashion-b{grid-column:2;grid-row:2;height:215px;margin:12px 5px 0;border-width:6px}.fashion-a>.hand{left:-2%;font-size:24px;bottom:-10px;padding:6px 14px}.circle-note{display:none}.outtakes{margin:70px -5.56% 0;padding:47px 5% 40px}.outtakes-head{grid-template-columns:1fr;margin-bottom:22px;padding:0}.outtakes-head h3{font-size:57px;line-height:.92;letter-spacing:-.045em}.outtakes-head h3 em{font-size:1.08em;white-space:normal}.outtakes-head h3 s{font-size:.67em;text-decoration-thickness:3px}.outtakes-head>.eyebrow{font-size:12px;margin-bottom:24px;max-width:210px}.outtakes-stamp{position:absolute;right:0;top:-6px;width:90px;height:90px;font-size:11px;border-width:1px;padding:9px;transform:rotate(13deg)}.outtakes-grid{grid-template-columns:repeat(6,1fr);gap:28px 14px;padding:25px 0 10px}.outtake-0{grid-column:1/6;grid-row:1;transform:rotate(-6deg);margin:0 0 0 12px}.outtake-0 .photo-tile{aspect-ratio:1.03}.outtake-0 figcaption{font-size:29px;margin-top:0}.outtake-1{grid-column:1/4;grid-row:2;margin-top:5px;padding:6px 6px 13px;transform:rotate(5deg)}.outtake-2{grid-column:4/7;grid-row:2;margin-top:45px;padding:6px 6px 13px;transform:rotate(-8deg)}.outtake-3{grid-column:1/4;grid-row:3;margin:0 3px;transform:rotate(-4deg)}.outtake-4{grid-column:4/7;grid-row:3;margin:14px 0 0;padding:6px 6px 13px;transform:rotate(7deg)}.outtake figcaption{font-size:24px;padding-top:11px}.outtake-aside{grid-column:1/7;grid-row:4;font-size:33px;margin:0;text-align:right;padding-right:12px}.outtake-aside br{display:none}.photo-desk{padding:55px 0 15px}.desk-heading{display:block}.desk-heading h3{font-size:44px;margin-top:18px}.desk-heading h3 em{font-size:1.05em}.desk-instructions{min-width:0;max-width:none;display:flex;align-items:center;justify-content:space-between;gap:20px;text-align:left;margin-top:28px}.desk-instructions .hand{font-size:24px;max-width:170px;margin-bottom:0;transform:rotate(-4deg)}.reset-desk{font-size:13px;flex-shrink:0;max-width:135px;line-height:1.3;padding:8px 0}.desk-surface{height:1080px;margin:30px -5.56% 0;background-size:18px 18px}.desk-photo{width:43%;height:244px;padding:0 5px 6px}.desk-photo .photo-tile{height:calc(100% - 44px)}.drag-handle{height:44px;font-size:22px;line-height:.95;padding:3px 4px}.desk-photo:nth-of-type(1){left:7%;top:25px}.desk-photo:nth-of-type(2){left:50%;top:120px}.desk-photo:nth-of-type(3){left:4%;top:375px}.desk-photo:nth-of-type(4){left:51%;top:465px}.desk-photo:nth-of-type(5){left:7%;top:740px}.desk-photo:nth-of-type(6){left:50%;top:800px}.desk-note{left:8%;top:302px;font-size:26px;z-index:1}.memory-receipt{max-width:310px;margin:25px auto 60px;padding:28px 20px 22px}.receipt-title{font-size:15px;padding-bottom:18px;margin-bottom:18px}.memory-receipt p{font-size:13px;gap:10px}.memory-receipt strong{font-size:18px;padding-top:18px}.memory-receipt .hand{font-size:26px}.rest-heading{padding:15px 0 32px}.rest-heading .eyebrow{max-width:250px;display:block;margin:auto}.rest-heading h3{font-size:49px}.remaining-wall{columns:2;column-gap:13px}.remaining-wall .media-cell{margin-bottom:15px}.remaining-wall .media-cell:nth-child(7n+3){padding:5px 5px 16px}.remaining-wall .media-cell:nth-child(9n){border-width:4px}.together-title h2{font-size:76px;line-height:.89}.together-title .eyebrow{padding:15px 20px;font-size:12px}.together-title .hand{margin:25px 0 30px}.duo-wall .media-cell:nth-child(7n+3):after{font-size:24px}.finale h2{font-size:21vw;line-height:.89}.finale-copy{font-size:31px;line-height:1.12;text-align:left;margin-top:45px}.finale>.hand{font-size:29px;margin-top:28px}.wish-button{font-size:16px;padding:15px 28px}.footer>span{max-width:180px}}
@media(max-width:359px){.outtakes-head h3{font-size:49px}.outtakes-stamp{width:78px;height:78px;font-size:10px}.desk-heading h3{font-size:38px}.desk-instructions{gap:8px}.desk-instructions .hand{font-size:22px;max-width:130px}.reset-desk{font-size:12px;max-width:123px}.drag-handle{font-size:20px}.fashion-copy>p{font-size:28px}.fashion-copy>.eyebrow{font-size:11px}.fashion-a{height:290px}.fashion-b{height:200px}.together-title h2{font-size:66px}.remaining-wall{column-gap:10px}.outtake figcaption{font-size:22px}}
@media(prefers-reduced-motion:reduce){.wish-button,.desk-photo{transition:none}.media-cell.reveal{transform:rotate(var(--rotation,0deg))}}

/* A clear, tactile invitation to the birthday wish. */
.wish-action{display:flex;flex-direction:column;align-items:center;width:min(100%,420px);margin:28px auto 5px;padding-bottom:8px}
.wish-hint{align-self:flex-end;margin:0 32px 14px;color:var(--raspberry);font-size:29px;line-height:1;transform:rotate(7deg)}
.wish-action .wish-button{display:inline-flex;align-items:center;justify-content:center;gap:18px;max-width:100%;margin:0;padding:20px 27px;background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:8px;font-size:17px;line-height:1.3;font-weight:500;cursor:pointer;transform:rotate(-2deg);box-shadow:0 6px 0 #773c50,0 8px 0 #fff7f475;transition:transform .18s ease,box-shadow .18s ease,color .18s ease}
.wish-spark{display:inline-block;color:var(--yellow);font-size:28px;line-height:1;transition:transform .3s ease}
@media(hover:hover){.wish-action .wish-button:hover{color:var(--yellow);transform:rotate(0deg) translateY(-3px);box-shadow:0 9px 0 #773c50,0 11px 0 #fff7f475}.wish-button:hover .wish-spark{transform:rotate(90deg)}}
.wish-action .wish-button:active{transform:rotate(0deg) translateY(5px);box-shadow:0 1px 0 #773c50,0 3px 0 #fff7f475}
.wish-action .wish-button:focus-visible{outline:3px solid var(--raspberry);outline-offset:10px}
@media(max-width:700px){.wish-action .wish-button{padding:18px 21px;font-size:16px;gap:13px}.wish-hint{font-size:27px;margin-right:21px}}
@media(max-width:359px){.wish-action .wish-button{padding:17px 17px;font-size:15px;gap:10px}.wish-spark{font-size:24px}}
@media(prefers-reduced-motion:reduce){.wish-action .wish-button,.wish-spark{transition:none}.wish-button:hover .wish-spark{transform:none}}