#pauline-preview .mobile-menu-toggle{display:none}
@media(max-width:900px){
/* Shared responsive layout, loaded after each page's existing styles. */
html{-webkit-text-size-adjust:100%}
#pauline-preview img,#pauline-preview video{max-width:100%;height:auto}
#pauline-preview .hero>*,#pauline-preview .workgrid>*,#pauline-preview .about .frame>*{min-width:0}
#pauline-preview .action{max-width:100%;white-space:normal;line-height:1.5;text-align:center;overflow-wrap:anywhere;min-height:44px}

#pauline-preview footer{box-sizing:border-box;display:grid}
}
@media(max-width:900px){
 #pauline-preview .masthead{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;padding:22px 0}
 #pauline-preview .identity{align-self:center}
 #pauline-preview .mobile-menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:10px 14px;border:1px solid #a998a5;border-radius:4px;background:transparent;color:#452a43;font:15px Arial,sans-serif;cursor:pointer}
 #pauline-preview .mobile-menu-toggle:focus-visible{outline:3px solid #6c7257;outline-offset:4px}
 #pauline-preview .masthead nav{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 12px;font-size:15px;width:100%}
 #pauline-preview .masthead nav a{min-height:48px;white-space:normal;padding:12px 8px;text-align:center;border-radius:4px}
 #pauline-preview .masthead nav a:hover{background:#e8e5d9}
 #pauline-preview .masthead nav .action{font-size:14px}
 #pauline-preview .masthead nav[data-mobile-menu][hidden]{display:none!important}
 #pauline-preview .hero{grid-template-columns:1fr 1fr;gap:28px}
 #pauline-preview .workgrid{grid-template-columns:1fr;gap:28px}
}
@media(max-width:650px){
 #pauline-preview .frame{padding-left:22px;padding-right:22px}
 #pauline-preview .identity{font-size:23px}
 #pauline-preview .identity small{font-size:11px;letter-spacing:1.5px}
 #pauline-preview .hero{grid-template-columns:1fr;gap:32px;padding:36px 0 44px}
 #pauline-preview h1{font-size:clamp(36px,9vw,48px);line-height:1.12;letter-spacing:-1px;overflow-wrap:anywhere}
 #pauline-preview h2{font-size:clamp(29px,7.4vw,36px);line-height:1.2;overflow-wrap:anywhere}
 #pauline-preview h3{font-size:25px;line-height:1.3}
 #pauline-preview p,#pauline-preview .work p,#pauline-preview li{font-size:17px;line-height:1.75;overflow-wrap:anywhere}
 #pauline-preview .label{font-size:12px;line-height:1.7;letter-spacing:1.5px}
 #pauline-preview .actions{display:flex;flex-direction:column;align-items:stretch;width:100%;gap:12px}
 #pauline-preview .action{display:flex;align-items:center;justify-content:center;padding:14px 16px;min-height:50px;font-size:15px;letter-spacing:.4px}
 #pauline-preview .photo{width:100%;max-width:360px;margin:0 auto}
 #pauline-preview .photo figcaption{left:0;font-size:20px}
 #pauline-preview .section{padding-top:40px;padding-bottom:40px}
 #pauline-preview .about .frame{grid-template-columns:1fr!important;gap:16px;padding-top:40px;padding-bottom:40px}
 #pauline-preview .work a{display:inline-flex;align-items:center;min-height:48px;font-size:15px;line-height:1.5}
 #pauline-preview .values{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:22px;font-size:12px;line-height:1.6;text-align:center;letter-spacing:1px}
 #pauline-preview .interests span{font-size:14px;line-height:1.5}
 #pauline-preview .contact{padding:40px 22px}
 #pauline-preview .contact-cartoon button{min-height:44px;font-size:14px}
 #pauline-preview footer{grid-template-columns:1fr;justify-items:center;gap:18px;padding:28px 22px;font-size:14px}
 #pauline-preview footer .footer-brand,#pauline-preview footer .footer-values{text-align:center}
 #pauline-preview footer .footer-links{display:grid;grid-template-columns:1fr;gap:4px;width:100%;font-size:14px}
 #pauline-preview footer .footer-links a{justify-content:center;min-height:48px;text-align:center}
 #pauline-preview .post{padding-top:36px;padding-bottom:40px}
 #pauline-preview .post-nav{display:flex;flex-wrap:wrap;gap:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* On phones, place the homepage portrait immediately after the headline. */
@media(max-width:650px){
 #pauline-preview .home-hero>div{display:contents}
 #pauline-preview .home-hero .label{order:1;margin-bottom:0}
 #pauline-preview .home-hero h1{order:2}
 #pauline-preview .home-hero .photo{order:3}
 #pauline-preview .home-hero p{order:4;margin:0}
 #pauline-preview .home-hero .actions{order:5}
}