@import url('/leporelo-preview.css');
@import url('/leporelo-three-preview.css');

/* The public landing uses the paper treatment without a study toolbar. The
   original document stays in normal flow until the controller is ready. */
html:has(body.leporelo-site){--leporelo-bar:0px}
body.leporelo-site .leporelo-toolbar{display:none!important}
body.leporelo-site .skip-link{z-index:90}
/* Use the sheet's full width for page layouts, with a consistent reading
   gutter. Paragraph limits and poster proportions stay local to their cards. */
body.leporelo-site .leporelo-book{max-width:none}
body.leporelo-site :is(.hero,.section-wrap,.benefits,.artist-room,.hero-image){max-width:none;width:100%}
body.leporelo-site .section-wrap{padding-inline:5%}
body.leporelo-site .leporelo-cover .hero{max-width:none}
/* Keep the entire room photograph, including the tops of its framed maps. */
body.leporelo-site .leporelo-unit .hero-image{width:90%;height:auto;min-height:0;max-height:none;aspect-ratio:auto}
body.leporelo-site .leporelo-unit .hero-image>img{height:auto;object-fit:contain;object-position:center}
/* The last questions and plain footer share one growing sheet. */
body.leporelo-site .leporelo-panel .leporelo-footer-unit{display:flex;flex-direction:column;flex:1 0 auto}
body.leporelo-site .leporelo-footer-unit>:is(.faq,.footer){flex:0 0 auto}
body.leporelo-site .leporelo-footer-unit>.footer{margin-top:auto;padding-top:28px;padding-bottom:0}
body.leporelo-site .leporelo-footer-unit .footer-main{flex-wrap:wrap;column-gap:32px;row-gap:20px;padding-bottom:24px}
body.leporelo-site .leporelo-footer-unit .footer-main nav{min-width:0;flex-wrap:wrap;justify-content:flex-end;gap:12px 24px}
@media(max-width:800px){body.leporelo-site .leporelo-footer-unit .footer-main nav{justify-content:flex-start}}
/* The cover invites a downward scroll with the same red map pointer. */
body.leporelo-site .leporelo-scroll-invite{flex:none;height:72px;margin:12px 0 0;padding:0;line-height:0}
body.leporelo-site .leporelo-scroll-next{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:center;column-gap:16px;width:340px;max-width:90vw;height:72px;padding:0 0 12px;border:0;border-radius:4px;background:transparent;color:var(--map-accent);cursor:pointer;animation:leporelo-arrow-down 1.8s ease-in-out infinite}
body.leporelo-site .leporelo-scroll-next:focus-visible{outline:2px solid currentColor;outline-offset:6px}
body.leporelo-site .leporelo-scroll-pointer{grid-column:2;display:block;width:44px;height:60px}
body.leporelo-site .leporelo-scroll-pointer::before{content:'';display:block;width:100%;height:100%;background:url('/brand/map-arrow.svg') center/contain no-repeat;transform:rotate(180deg)}
body.leporelo-site .leporelo-scroll-label{grid-column:1;justify-self:end;white-space:nowrap;text-align:right;font:700 17px/1.25 var(--sans,Arial,sans-serif);letter-spacing:0}
@keyframes leporelo-arrow-down{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
@media(prefers-reduced-motion:reduce){body.leporelo-site .leporelo-scroll-next{animation:none}}
@media(max-width:760px){
  body.leporelo-site .leporelo-scroll-label{font-size:15px}
}
@media(max-width:600px){body.leporelo-site .section-wrap{padding-inline:6%}}

/* Sit in the sheet's existing crease clearance without moving its content. */
body.leporelo-site .leporelo-back-top{position:absolute;right:5%;bottom:26px;z-index:1;display:inline-flex;align-items:center;gap:7px;min-height:28px;color:var(--muted,#626a64);font:12px/1.4 var(--sans,Arial,sans-serif);white-space:nowrap;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
body.leporelo-site .leporelo-back-top svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
body.leporelo-site .leporelo-back-top:hover{color:var(--map-accent,#b53612);text-decoration-color:currentColor}
body.leporelo-site .leporelo-back-top:focus-visible{outline:2px solid var(--map-accent,#b53612);outline-offset:3px;border-radius:2px}
@media(max-width:760px){body.leporelo-site .leporelo-back-top{bottom:24px;min-height:24px}}
@media(max-width:600px){body.leporelo-site .leporelo-back-top{right:6%}}
@media print{body.leporelo-site .leporelo-back-top{display:none}}