/* Penned Pages desktop composition.
   Coordinate source: Canva PDF, page 1, 1024.5pt wide.
   One cqw = 10.245 source points. All coordinates use main's container.
   Featured-story panel stays omitted. Mobile and approved pages are excluded. */
@media(min-width:901px){
 .penned-page main#main{width:100%;max-width:1366px;margin:0 auto;container-type:inline-size}
 .penned-page .desktop-line{display:block;white-space:nowrap}
 .penned-page .home-hero,.penned-page .letter-section,.penned-page .about,.penned-page .closing{position:relative;display:block;width:100%;max-width:none;min-height:0;margin:0;padding:0;box-sizing:border-box}

 /* HERO — source y 0–609.75. */
 .penned-page .home-hero{height:59.517cqw;overflow:hidden;isolation:isolate}
 .penned-page .home-hero .hero-copy{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;text-align:center;z-index:1}
 .penned-page .home-hero .hero-copy>p.scribble{position:absolute;left:31.9%;top:6.61cqw;width:auto;margin:0;padding:0;font-size:2.634cqw;line-height:1.606;white-space:nowrap}
 .penned-page .home-hero .hero-copy h1{position:absolute;left:22.9%;top:12.394cqw;width:47.75%;margin:0;padding:0;font-family:Doing,Impact,sans-serif;font-size:7.147cqw;line-height:6.657cqw;font-weight:400;letter-spacing:0;text-align:center}
 .penned-page .home-hero h1 span{padding:0 1.7cqw;background:transparent url('assets/hero-highlight.png') center/100% 100% no-repeat}
 .penned-page .home-hero .hero-copy .chapter{position:absolute;left:16.7%;top:39.35cqw;width:25.3%;margin:0;padding:0;font-family:Montserrat,Arial,sans-serif;font-size:1.98cqw;line-height:1.22;text-align:center;transform:rotate(5deg)}
 .penned-page .home-hero .hero-copy>a{position:absolute;left:16.68%;top:52.25cqw;width:auto;margin:0;padding:0;font-size:2.342cqw;line-height:1.606;text-align:left}
 .penned-page .home-hero .hero-art{position:absolute;left:50.729%;right:auto;top:17.69cqw;width:48.682%;height:36.457cqw;aspect-ratio:auto;z-index:2}
 .penned-page .home-hero .hero-art>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-height:none;object-fit:contain;z-index:2}
 .penned-page .home-hero .hero-art b{position:absolute;left:3.68%;top:20.7cqw;right:auto;bottom:auto;margin:0;font-family:Doing,Impact,sans-serif;font-weight:400;font-size:16.202cqw;line-height:1;letter-spacing:0;-webkit-text-stroke:.3cqw #08072e;color:#1c1e60;z-index:1}
 .penned-page .home-hero .hero-art .sticker{left:40%;top:43%;width:25.5%;padding:.35cqw .15cqw;font-size:1.706cqw;line-height:1.25;white-space:nowrap;transform:rotate(-5deg);z-index:3}
 .penned-page .home-hero .mark{position:absolute;left:auto;right:7%;top:4.5cqw;width:8%;height:auto;z-index:4}
 .penned-page .home-hero .tabs{position:absolute;left:0;top:0;width:7.4%;height:59.2cqw;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;margin:0;padding:0;z-index:5}
 .penned-page .home-hero .tabs a{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:5.45cqw;height:19.73cqw;min-height:0;margin:0;padding:1.3cqw .6cqw;writing-mode:vertical-rl;transform:none;font-family:Montserrat,Arial,sans-serif;font-size:1.65cqw;line-height:1.15;font-weight:700;letter-spacing:0;text-align:center;transition:width 180ms ease}
 .penned-page .home-hero .tabs a:first-child{width:5.45cqw}
 .penned-page .home-hero .tabs a:hover,.penned-page .home-hero .tabs a:focus-visible,.penned-page .home-hero .tabs a[aria-current="location"]{width:7.35cqw}
 @media(prefers-reduced-motion:reduce){.penned-page .home-hero .tabs a{transition:none}}
 .penned-page .home-hero .tabs a::before{background:#1c1e60;border-radius:0 .75cqw .75cqw 0;clip-path:polygon(0 0,75% 0,100% 8%,100% 92%,75% 100%,0 100%)}

 /* LETTER — global source coordinates, avoiding nested percentage scaling. */
 .penned-page .letter-section{height:86.879cqw;overflow:visible;isolation:isolate;z-index:1}
 .penned-page .letter-section .envelope-wrap{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;padding:0;overflow:visible;isolation:isolate}
 .penned-page .letter-section .envelope-art,.penned-page .letter-section .envelope-front{position:absolute;left:5.368%;top:15.642cqw;width:77.111%;height:91.752cqw;max-width:none;margin:0;object-fit:fill;pointer-events:none;clip-path:none}
 .penned-page .letter-section .envelope-art{z-index:0}
 .penned-page .letter-section .envelope-front{display:block;z-index:2}
 .penned-page .letter-section .letter{position:absolute;left:14.6%;top:0;width:57.9%;height:101cqw;min-height:0;margin:0;padding:0;background:#f1f1f1;box-shadow:0 .2cqw 1cqw #0003;color:#252525;font-size:2.57cqw;line-height:2.855cqw;text-align:center;z-index:auto}
 .penned-page .letter-section .letter>p{position:absolute;left:2.3%;width:95.4%;margin:0;padding:0;font-size:2.57cqw;font-weight:400;line-height:2.855cqw;text-align:center}
 .penned-page .letter-section .letter>p:nth-child(1){left:7.8%;top:1.48cqw;width:90%;text-align:left;transform:rotate(-1deg)}
 .penned-page .letter-section .letter>p:nth-child(2){top:6.6cqw}
 .penned-page .letter-section .letter>p:nth-child(3){top:12.31cqw}
 .penned-page .letter-section .letter>p:nth-child(4){top:23.73cqw}
 .penned-page .letter-section .letter>p:nth-child(5){top:35.15cqw}
 .penned-page .letter-section .letter>p:nth-child(6){top:43.72cqw}
 .penned-page .letter-section .letter>p:nth-child(7){top:55.14cqw}
 .penned-page .letter-section .letter>p.note{left:63.5%;top:66.5cqw;width:22%;font-size:1.855cqw;line-height:1.6;text-align:center;transform:rotate(-8deg)}
 .penned-page .letter-section .letter>.button{position:absolute;left:17.25%;top:74.08cqw;bottom:auto;width:66%;max-width:none;margin:0;padding:2.1cqw 1cqw;font-family:Montserrat,Arial,sans-serif;font-size:2.05cqw;line-height:1.3;white-space:nowrap;border-radius:1.8cqw;transform:none;z-index:4}
 .penned-page .letter .letter-circle,.penned-page .letter .letter-underline{position:relative;display:inline-block}
 .penned-page .letter .letter-circle::after{content:"";position:absolute;left:-8%;top:28%;width:116%;height:82%;background:url('assets/letter-circle.svg') center/100% 100% no-repeat;pointer-events:none}
 .penned-page .letter .letter-underline::after{content:"";position:absolute;left:-6%;bottom:-.20em;width:112%;height:.40em;background:url('assets/letter-underline.svg') center/100% 100% no-repeat;pointer-events:none}
 .penned-page .letter-section aside{position:absolute;left:74.925%;top:0;width:24%;height:85cqw;margin:0;padding:0;z-index:3}
 .penned-page .letter-section aside>p:first-child{position:absolute;left:.83cqw;top:.33cqw;max-width:none;margin:0;padding:0;font-size:1.648cqw;line-height:1.606;white-space:nowrap;transform:none}
 .penned-page .letter-section aside>p+p{position:absolute;left:0;top:8.05cqw;margin:0;padding:0;font-family:Montserrat,Arial,sans-serif;font-size:1.8cqw;line-height:1.2;white-space:nowrap}
 .penned-page .letter-section aside h2{position:absolute;left:0;top:11.01cqw;margin:0;padding:0;font-family:Doing,Impact,sans-serif;font-size:5.368cqw;line-height:6.14cqw;letter-spacing:0}
 .penned-page .letter-section .pen{position:absolute;left:-24.922cqw;top:70.338cqw;width:44.071cqw;max-width:none;height:auto;margin:0;transform-origin:0 0;transform:rotate(-51.323deg);pointer-events:none}

 /* STORYTELLER — source y 1499.8–2388.75. Keep all four portraits visible. */
 .penned-page .about{height:86.77cqw;min-height:0;margin:0;padding:0;overflow:hidden;isolation:isolate;z-index:5}
 .penned-page .about .polaroids{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0}
 .penned-page .about .polaroids>img{position:absolute;display:block;max-width:none;height:auto;object-fit:contain;transform-origin:center;}
 .penned-page .about .polaroids .photo-left{left:12.6%;top:3.6cqw;width:25.5%;transform:rotate(-23.064deg);z-index:2}
 .penned-page .about .polaroids .photo-center{left:35.58%;top:1.65cqw;width:35.2%;transform:none;z-index:4}
 .penned-page .about .polaroids .photo-right{left:66%;top:8.3cqw;width:25.5%;transform:rotate(-33.094deg);z-index:3}
 .penned-page .about .polaroids .photo-back{display:block!important;left:67%;top:3.3cqw;width:24.5%;transform:rotate(29deg);z-index:1}
 .penned-page .about .polaroids .photo-edge{left:81%;top:19cqw;width:18%;transform:none;z-index:5}
 .penned-page .about .polaroids .photo-caption{position:absolute;left:38%;top:27.1cqw;width:30.4%;max-width:none;margin:0;padding:.1cqw .4cqw;background:#f6f3ef;font-size:1.95cqw;line-height:1.606;text-align:center;white-space:nowrap;transform:none;z-index:6}
 .penned-page .about .filmstrip{position:absolute;inset:0;width:100%;height:100%;display:block;margin:0;padding:0;border:0;background:none;transform:none;z-index:3;pointer-events:none}
 .penned-page .about .filmstrip::before{content:"";position:absolute;left:-12%;top:0;width:30%;height:86cqw;background:#fff;border-left:1.2cqw dashed #e7e4dd;border-right:1.2cqw dashed #e7e4dd;transform-origin:0 0;transform:rotate(-6.757deg)}
 .penned-page .about .filmstrip img{position:absolute;max-width:none;height:auto;transform-origin:0 0;transform:rotate(-6.757deg)}
 .penned-page .about .filmstrip img:nth-of-type(1){left:-11.423%;top:3.482cqw;width:29.224%}
 .penned-page .about .filmstrip img:nth-of-type(2){left:-8.872%;top:30.934cqw;width:28.886%}
 .penned-page .about .filmstrip img:nth-of-type(3){left:-4.336%;top:59.069cqw;width:28.568%}
 .penned-page .about .filmstrip p{position:absolute;left:11.7%;top:55.25cqw;width:11%;padding:0;margin:0;background:none;font-size:2.1cqw;line-height:1.39;transform:none;z-index:2}
 .penned-page .about .story-copy{position:absolute;left:27.1%;top:35.65cqw;width:46.4%;height:47cqw;margin:0;padding:0;text-align:center;z-index:4}
 .penned-page .about .story-copy .eyebrow{position:absolute;left:13.3%;top:0;margin:0;padding:0;font-family:Montserrat,Arial,sans-serif;font-size:2.15cqw;line-height:1.2;letter-spacing:0;text-align:left}
 .penned-page .about .story-copy h2{position:absolute;left:0;top:2.9cqw;width:100%;margin:0;padding:0;font-family:Doing,Impact,sans-serif;font-size:6.052cqw;line-height:1;letter-spacing:0}
 .penned-page .about .story-copy .handwritten{position:absolute;left:0;top:9.85cqw;width:100%;margin:0;padding:0;font-size:2.563cqw;line-height:3.57cqw;text-align:center}
 .penned-page .about .story-copy .handwritten p{margin:0;padding:0}
 .penned-page .about .mic-clip{position:absolute;left:auto;right:-15cqw;top:auto;bottom:-2cqw;width:30cqw;height:46cqw;margin:0;padding:0;overflow:hidden;transform:rotate(-30.077deg);z-index:2}
 .penned-page .about .mic-clip img{position:absolute;left:-12cqw;top:auto;bottom:0;width:52.635cqw;height:auto;max-width:none;margin:0}

 /* The approved desktop Waiting Well band retains its existing rules. */

 /* CLOSING — source y 3463.5–4011; the image's alpha edge meets the footer. */
 .penned-page .closing{height:53.441cqw;min-height:0;overflow:hidden;isolation:isolate}
 .penned-page .closing>article{position:absolute;left:5.9%;top:7.18cqw;width:42.2%;height:38cqw;margin:0;padding:0;text-align:center;z-index:2}
 .penned-page .closing h2{margin:0;padding:0;font-family:Doing,Impact,sans-serif;font-size:5.368cqw;line-height:5.417cqw;letter-spacing:0}
 .penned-page .closing .handwritten{margin:2cqw 0 0;padding:0;font-size:2.567cqw;line-height:2.709cqw}
 .penned-page .closing .handwritten p{margin:0;padding:0}
 .penned-page .closing .handwritten p+p{margin-top:2.709cqw}
 .penned-page .closing .signature{position:absolute;left:64%;top:31.0cqw;width:38%;display:flex;align-items:center;justify-content:flex-start;gap:.5cqw;margin:0;padding:0;font-size:5.133cqw;line-height:1.2;transform:rotate(-8deg);z-index:3}
 .penned-page .closing .signature img.signature-heart{position:static;width:5cqw;max-width:none;height:auto;margin:0;transform:rotate(8deg)}
 .penned-page .closing .closing-portrait{position:absolute;inset:0;width:100%;height:100%;min-height:0;align-self:stretch;justify-self:stretch;margin:0;overflow:visible;z-index:1;pointer-events:none}
 .penned-page .closing .closing-portrait>img{position:absolute;left:-9.272%;right:auto;top:auto;bottom:-5cqw;display:block;width:113.982%;height:auto;aspect-ratio:2876 / 1565;max-width:none;max-height:none;margin:0;opacity:1;visibility:visible}
 .penned-page .closing .journal-caption{position:absolute;left:60.9%;top:auto;bottom:12.4cqw;width:11%;margin:0;padding:0;font-size:2.342cqw;line-height:1.38;text-align:center;transform:rotate(-8deg)}
 .penned-page>footer{margin-top:0}

 /* Reference affine coordinates and requested closing alignment. */
 .penned-page .about .polaroids .photo-left{left:9.09237%;top:9.98903cqw;width:25.49272%;height:28.75119cqw;transform-origin:0 0;transform:matrix(0.9200670956390202,-0.39176081927928685,0.39176081265348045,0.9200670984602615,0,0)}
 .penned-page .about .polaroids .photo-center{left:35.57827%;top:1.64864cqw;width:35.20311%;height:30.99829cqw;transform-origin:0 0;transform:matrix(1.0,0.0,-0.0,1.0,0,0)}
 .penned-page .about .polaroids .photo-right{left:61.52770%;top:18.56496cqw;width:26.60963%;height:31.82547cqw;transform-origin:0 0;transform:matrix(0.8377779773874469,-0.5460110443980035,0.5460110437915351,0.8377779777827049,0,0)}
 .penned-page .about .polaroids .photo-edge{left:85.52989%;top:14.80492cqw;width:23.24508%;height:35.91514cqw;transform-origin:0 0;transform:matrix(1.0,0.0,-0.0,1.0,0,0)}
 .penned-page .about .polaroids .photo-back{left:63.84600%;top:25.09636cqw;width:26.60963%;height:31.82547cqw;transform-origin:0 0;transform:matrix(0.3965152616215967,-0.918028129907334,0.9180281240716601,0.396515275132584,0,0)}
 .penned-page .about .mic-clip{inset:0;width:100%;height:100%;transform:none;overflow:visible;pointer-events:none}
 .penned-page .about .mic-clip img{left:47.81055%;top:26.78322cqw;bottom:auto;width:52.63543%;height:78.98975cqw;clip-path:inset(42% 0 0 0);transform-origin:0 0;transform:matrix(0.8653546482077386,-0.5011599872548298,0.501159949248801,0.8653546702184829,0,0)}
 .penned-page .about .photo-caption{top:27.7cqw}
 .penned-page .closing .closing-portrait>img{bottom:-4.06cqw;transform:none}
 .penned-page main#main{padding-bottom:0}
 .penned-page .home-hero .tabs a{flex-shrink:0;overflow:visible;background:transparent}
 .penned-page .home-hero .tabs a:hover,.penned-page .home-hero .tabs a:focus-visible,.penned-page .home-hero .tabs a[aria-current="location"]{filter:drop-shadow(3px 2px 2px #0003)}
 .penned-page .letter .letter-journey{position:relative;display:inline-block;white-space:nowrap}
 .penned-page .letter .letter-journey::after{content:"";position:absolute;left:0;right:-7%;bottom:0;height:.12em;background:#ee84a8;transform:rotate(1deg);border-radius:50%}
 /* Final requested desktop details; all other composition stays fixed. */
 .penned-page .home-hero .hero-art .sticker{background:transparent url('assets/marker-lime.svg') center/100% 100% no-repeat}
 .penned-page .letter mark{background:transparent url('assets/marker-letter.svg') center/100% 85% no-repeat;box-decoration-break:clone}
 .penned-page .letter mark.rose{background-image:url('assets/marker-pink.svg')}
 .penned-page .letter .letter-journey::after{bottom:-.10em;right:-2%;height:.09em}
 .penned-page .about .filmstrip::before{inset:0;width:100%;height:100%;border:0;transform:none;background:transparent url('assets/filmstrip-reference.svg?v=reference-marks') 0 0/100% 100% no-repeat}
 .penned-page .about .filmstrip>img{display:none}
 .penned-page .about .mic-clip{z-index:10}
 .penned-page .letter .letter-journey::after{left:50%;right:auto;width:114%;bottom:-.18em;height:.34em;background:transparent url('assets/journey-underline.svg?v=full-width') center/100% 100% no-repeat;transform:translateX(-50%);border-radius:0}
 /* Increase marker height without moving the approved hero text. */
 .penned-page .home-hero .hero-art .sticker{background:none;isolation:isolate}
 .penned-page .home-hero .hero-art .sticker::before{content:"";position:absolute;inset:-.45cqw -.08cqw;background:url('assets/marker-lime.svg') center/100% 100% no-repeat;z-index:-1;pointer-events:none}

 /* Doodle shares the strip SVG coordinate system from the Canva reference. */
 .penned-page .about .filmstrip>img.story-question-marks{display:none}
 .penned-page .about .polaroids>img.story-expression-marks{position:absolute;left:43.79%;top:7.56cqw;width:20.64%;height:5.57cqw;transform:none;z-index:7}
}
