/* Mobile-only composition. Desktop and Waiting Well remain locked. */
@media(max-width:900px){
 .penned-page .home-hero .tabs{gap:0;padding:0}
 .penned-page .home-hero .tabs a{display:flex;align-items:center;justify-content:center}
 .penned-page .home-hero .tabs a::before{background:#1c1e60}
 .penned-page main{--journal-size:calc(clamp(16px,4.05cqw,26px) + 3px)}
 .penned-page .home-hero .hero-copy>p.scribble{transform:translateX(5cqw)}
 /* Keep the existing headline geometry. */
 .penned-page .home-hero{height:96cqw;min-height:0}
 .penned-page .home-hero .hero-art{top:36cqw;right:-2%;width:54%;height:auto;aspect-ratio:1811 / 1358}
 .penned-page .hero-art b{font-size:18.04cqw;left:3%;bottom:0}
 /* Cover the chest with the marker while retaining the approved lettering. */
 .penned-page .hero-art .sticker{left:34.5%;top:35%;width:32%;font-size:2.15cqw;padding:1.55cqw .1cqw;background:transparent url('assets/marker-lime.svg') center/100% 100% no-repeat}
 .penned-page .home-hero .hero-copy .chapter{top:48.5cqw;left:5.5cqw;width:33cqw;font-size:clamp(9px,2.35cqw,16px);line-height:1.2;transform:rotate(3deg)}
 .penned-page .home-hero .hero-copy>a{left:0;top:calc(81cqw - 85px);font-size:clamp(14px,3.65cqw,23px)}
 /* Paper in the envelope, with heading beside its upper edge. */
 .penned-page .letter-section{position:relative;display:flex;flex-direction:column;padding:0 3cqw 0;gap:0;isolation:isolate;overflow:visible}
 .penned-page .letter-section aside{order:0;position:relative;width:100%;padding:0 3cqw 5cqw;min-height:0;text-align:left}
 .penned-page .letter-section aside>p:first-child{font-size:3cqw;max-width:none;margin:0 0 2cqw}
 .penned-page .letter-section aside>p+p{font-size:3.2cqw;margin:0}
 .penned-page .letter-section aside h2{font-size:7.8cqw;margin:1cqw 0 0;line-height:1.08}
 .penned-page .letter-section .pen{position:absolute;right:-3cqw;left:auto;top:37cqw;width:22cqw;transform:rotate(9deg);z-index:5;pointer-events:none}
 .penned-page .letter-section .envelope-wrap{order:1;position:relative;isolation:isolate;width:100%;padding:0 0 34cqw;margin:0;height:auto;min-height:0}
 .penned-page .letter-section .letter{position:relative;z-index:auto;width:80%;margin:0 auto;padding:5cqw 4cqw 6cqw;font-size:var(--journal-size);line-height:1.3;background:#f1f1f1;min-height:0;height:auto}
 .penned-page .letter-section .letter p{font-size:inherit;line-height:inherit;margin:0}
 .penned-page .letter-section .letter p+p{margin-top:3.5cqw}
 .penned-page .letter-section .letter .note{position:relative;z-index:3;font-size:3cqw;margin:3cqw -2cqw 0 auto;width:30%;line-height:1.25;text-align:center;transform:rotate(-8deg)}
 .penned-page .letter-section .letter .button{position:relative;z-index:4;font-size:3.3cqw;line-height:1.3;margin-top:5cqw;padding:3.5cqw 3cqw;border-radius:2cqw;max-width:100%}
 .penned-page .letter-section .envelope-art,.penned-page .letter-section .envelope-front{position:absolute;display:block;left:0;top:auto;bottom:0;width:100%;height:82cqw;object-fit:fill;clip-path:none;pointer-events:none}
 .penned-page .letter-section .envelope-art{z-index:0}
 .penned-page .letter-section .envelope-front{z-index:2}
 .penned-page .letter mark{background:transparent url('assets/marker-letter.svg') center/100% 85% no-repeat}
 .penned-page .letter mark.rose{background-image:url('assets/marker-pink.svg')}
 .penned-page .letter-circle,.penned-page .letter-underline,.penned-page .letter-journey{position:relative;display:inline-block;white-space:nowrap}
 .penned-page .letter-circle::after{content:"";position:absolute;left:-9%;top:8%;width:118%;height:106%;background:url('assets/mobile-letter-circle.svg') center/100% 100% no-repeat;pointer-events:none}
 .penned-page .letter-underline::after,.penned-page .letter-journey::after{content:"";position:absolute;left:50%;bottom:-.16em;width:118%;height:.30em;transform:translateX(-50%);background:url('assets/mobile-letter-underline.svg') center/100% 100% no-repeat;pointer-events:none}
 .penned-page .letter-journey::after{background-image:url('assets/journey-underline.svg?v=full-width')}
 /* Approved upper Polaroids and heading retain their own rules. */
 .penned-page .about{position:relative;margin-top:-25cqw;padding-bottom:9cqw;isolation:isolate;overflow:hidden;z-index:3}
 .penned-page .about .story-copy{position:relative;z-index:4}
 .penned-page .about .handwritten{font-size:var(--journal-size);line-height:1.35;width:72%;margin:0 auto;padding:0;text-align:center}
 .penned-page .about .handwritten p+p{margin-top:3cqw}
 .penned-page .about .filmstrip{display:none;position:absolute;left:-10cqw;top:84cqw;width:32cqw;height:86cqw;inset:auto auto auto -10cqw;top:84cqw;margin:0;padding:0;border:0;background:none;transform:none;z-index:2;pointer-events:none}
 .penned-page .about .filmstrip::before{content:"";position:absolute;inset:0;background:url('assets/filmstrip-reference.svg') left top/380% 100% no-repeat}
 .penned-page .about .filmstrip>img,.penned-page .about .filmstrip>p{display:none}
 .penned-page .mobile-lower-photos{display:none!important;position:relative;width:100%;height:71cqw;margin:-24cqw 0 0;z-index:3}
 .penned-page .mobile-lower-photos img{position:absolute;height:auto;max-width:none;object-fit:contain}
 .penned-page .mobile-lower-photos img:first-child{left:32%;top:12cqw;width:29%;transform:rotate(-12deg)}
 .penned-page .mobile-lower-photos img:last-child{left:64%;top:24cqw;width:30%;transform:rotate(9deg)}
 /* Keep the microphone clear of the larger mobile body text. */
 .penned-page .about .mic-clip{position:absolute;right:-20cqw;bottom:-17cqw;top:auto;left:auto;width:37cqw;height:57cqw;margin:0;overflow:visible;transform:rotate(-25deg);z-index:10;pointer-events:none}
 .penned-page .about .mic-clip img{position:absolute;left:-14cqw;bottom:0;top:auto;width:66cqw;height:auto;max-width:none;clip-path:inset(42% 0 0 0)}
 /* Closing: consistent handwriting, right signature, left portrait touching footer. */
 .penned-page .closing .handwritten{font-size:var(--journal-size);line-height:1.35}
 .penned-page .closing .signature{justify-content:flex-end;margin:0;padding:0;font-size:8cqw;position:absolute;right:-2cqw;top:calc(100% + 3cqw);z-index:3}
 .penned-page .closing .signature img.signature-heart{width:8cqw;max-width:none}
 .penned-page .closing .closing-portrait{position:relative;inset:auto;width:60cqw;height:66.518cqw;min-height:0;margin:3cqw 0 0 -24px;overflow:hidden;flex:none;align-self:flex-start;aspect-ratio:auto}
 .penned-page .closing .closing-portrait>img{max-height:none;object-fit:fill;aspect-ratio:2876 / 1565;position:absolute;width:246.022%;left:-134.645%;top:-12.886%;bottom:auto;height:auto;max-width:none;margin:0;transform:none}
 .penned-page .closing .journal-caption{position:absolute;left:31.05%;top:67.75%;bottom:auto;width:35%;margin:0;padding:0;font-size:2.96cqw;line-height:1.15;text-align:center;transform:translate(-50%,-50%) rotate(-8deg);z-index:2}
 .penned-page .letter-section .letter>.button{display:none}
 .penned-page .letter-section .mobile-envelope-button{display:block!important;position:absolute;z-index:4;left:24%;bottom:20cqw;width:52%;margin:0;padding:2.6cqw 1.5cqw;font-size:3cqw;line-height:1.3;border-radius:2cqw;text-align:center}
 .penned-page .about .story-copy h2{line-height:1.12}
 .penned-page .closing>article{position:relative}

 .penned-page .home-hero .mark{width:52px}
 .penned-page .closing{display:block;gap:0;padding-bottom:0;min-height:0;height:auto}
 .penned-page .closing>article{margin:0;padding:0;height:auto;min-height:0}
 .penned-page .closing .handwritten>p:last-child{margin-bottom:0}
 .penned-page .home-hero .hero-art{z-index:3}

 /* Mobile reading flow retains the desktop paper, flap and emphasis artwork. */
 .penned-page .home-hero h1{transform:translateX(5cqw)}
 .penned-page .letter-section{height:auto;min-height:0;margin:0;z-index:1}
 .penned-page .letter-section aside h2 br{display:none}
 .penned-page .letter-section aside>p:first-child,.penned-page .letter-section .pen{display:block}
 .penned-page .letter-section .pen{margin:0;top:39cqw}
 .penned-page .letter-section .desktop-line{display:inline;white-space:normal}
 .penned-page .letter-section .letter{border:0;transform:none;padding-bottom:27cqw}
 .penned-page .letter-section .envelope-wrap{padding-bottom:18cqw}
 .penned-page .letter-section .envelope-art,.penned-page .letter-section .envelope-front{height:101cqw}
 .penned-page .letter-section .letter .note{width:32%;margin:4cqw 6cqw 0 auto}
 .penned-page .about{margin-top:-18cqw}
 .penned-page .about .story-copy{margin-top:-6cqw}
 .penned-page .about .filmstrip{left:-6cqw;top:52cqw;width:27cqw;height:62.13cqw;overflow:visible}
 .penned-page .about .filmstrip::before{background:url('assets/mobile-filmstrip-full.svg') center/100% 100% no-repeat}
 .penned-page .about .filmstrip>.story-question-marks{display:none}
 .penned-page .about .filmstrip>p{display:block;position:absolute;left:6cqw;top:40cqw;width:16cqw;margin:0;padding:.25cqw .4cqw;background:#f4f0ea;font-size:2.8cqw;line-height:1.1;text-align:right;transform:rotate(-7deg);z-index:3}
 .penned-page .about .polaroids>.story-expression-marks{position:absolute;left:34.3%;top:12.5cqw;width:33.4%;height:9cqw;z-index:7;pointer-events:none;transform:none}
 .penned-page .home-hero .hero-art{z-index:6;transform:scale(1.08);transform-origin:0 0}

 .penned-page .letter-section aside>p:first-child,.penned-page .letter-section .pen{display:none}
 .penned-page .letter-section .letter-circle::after{background-image:url('assets/mobile-letter-circle.svg')}
 .penned-page .letter-section .letter-underline::after{background-image:url('assets/mobile-letter-underline.svg')}

}
@media(min-width:600px) and (max-width:900px){
 .penned-page .home-hero .hero-copy>a{top:calc(81cqw - 100px)}
}