/* UX36 P222: user-selected header art + exact original Loriginary navigation wordmark.
   UX36 P211: every standalone page and SPA route deserves an actual illustrated header.
   Public artwork ships locally. Never rely on remote images or an icon-only wordmark. */
.lori-page-graphic{box-sizing:border-box;isolation:isolate;position:relative;width:min(100% - 32px,1480px);height:clamp(124px,15vw,214px);margin:14px auto 20px;overflow:hidden;border-radius:16px;border:1px solid rgba(107,195,242,.40);background:#102536;box-shadow:0 16px 36px rgba(0,0,0,.29)}
.lori-page-graphic__art{width:100%;height:100%;display:block;object-fit:cover;object-position:center center;filter:saturate(1.07) contrast(1.03)}
.lori-page-graphic:after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 40% 125% at 6% 88%,rgba(4,12,25,.40) 0%,rgba(4,12,25,.18) 47%,rgba(4,12,25,0) 100%)}
.lori-page-graphic__caption{position:absolute;z-index:2;left:clamp(16px,3.5vw,48px);bottom:clamp(16px,3vw,40px);max-width:72%;display:flex;flex-direction:column;gap:5px;margin:0;color:#fff!important;text-shadow:0 2px 10px rgba(0,0,0,.72);line-height:1.13}
.lori-page-graphic__caption::before{content:"";width:clamp(160px,18vw,235px);height:clamp(34px,4.1vw,53px);display:block;background:url("assets/branding/loriginary-wordmark-header-tight.png") left center/contain no-repeat;filter:drop-shadow(0 2px 8px #000b)}
.lori-page-graphic__kicker{font:800 clamp(15px,1.7vw,25px)/1.2 system-ui,'Segoe UI',sans-serif;letter-spacing:.045em;color:#e2f5ff!important}
.lori-page-graphic__tagline{font:600 clamp(10px,1.1vw,16px)/1.25 system-ui,'Segoe UI',sans-serif;letter-spacing:-.02em;color:#fff!important}
main>.view[data-lori-route-visual="1"]{position:relative}
main>.view[data-lori-route-visual="1"]::before{content:attr(data-lori-route-title);box-sizing:border-box;display:flex;align-items:flex-end;min-height:clamp(104px,13vw,164px);padding:16px clamp(16px,3vw,36px) 40px;margin:0 0 16px;border:1px solid rgba(107,195,242,.42);border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.24);color:#fff;font:800 clamp(15px,2vw,26px)/1.2 system-ui,'Segoe UI',sans-serif;letter-spacing:.045em;text-shadow:0 2px 12px #000;background-image:url("assets/branding/loriginary-wordmark-header-tight.png"),radial-gradient(ellipse 42% 135% at 4% 90%,rgba(3,12,25,.44) 0%,rgba(3,12,25,.13) 45%,transparent 100%),var(--lori-route-art);background-size:clamp(160px,21vw,265px) auto,cover,cover;background-position:left clamp(16px,3vw,36px) top 11px,center,center;background-repeat:no-repeat;overflow:hidden}
main>.view[data-lori-route-visual="1"]::after{content:attr(data-lori-route-subtitle);position:absolute;top:calc(clamp(104px,13vw,164px) - 32px);left:clamp(16px,3vw,36px);z-index:1;max-width:90%;font:600 clamp(10px,1vw,14px)/1.2 system-ui,'Segoe UI',sans-serif;letter-spacing:.045em;color:#d8edf9;text-shadow:0 2px 8px #000;pointer-events:none}
#view-dashboard{--lori-route-art:url("assets/page-headers/dashboard-creator-nexus.webp")}
#view-create{--lori-route-art:url("assets/page-headers/character-identity-atelier.webp")}
#view-prompt{--lori-route-art:url("assets/page-headers/prompt-production-studio.webp")}
#view-cards{--lori-route-art:url("assets/page-headers/card-forge-collectibles.webp")}
#view-collections{--lori-route-art:url("assets/theme-banners/rpg-superhero.webp")}
#view-library{--lori-route-art:url("assets/page-headers/library-world-archive.webp")}
#view-projects{--lori-route-art:url("assets/theme-banners/rpg-space.webp")}
#view-story{--lori-route-art:url("assets/page-headers/story-narrative-frames.webp")}
#view-gallery{--lori-route-art:url("assets/theme-banners/rpg-fantasy.webp")}
#view-templates{--lori-route-art:url("assets/theme-banners/rpg-story.webp")}
#view-uhu{--lori-route-art:url("assets/theme-banners/uhu-master.webp")}
#view-account{--lori-route-art:url("assets/theme-banners/rpg-space.webp")}
#view-help{--lori-route-art:url("assets/theme-banners/rpg-custom.webp")}
@media(max-width:640px){.lori-page-graphic{width:calc(100% - 18px);height:120px;margin:8px auto 14px;border-radius:11px}.lori-page-graphic__caption{max-width:89%;left:14px;bottom:14px}.lori-page-graphic__caption::before{width:160px;height:36px}.lori-page-graphic__kicker{font-size:15px;letter-spacing:.025em}.lori-page-graphic__tagline{font-size:11px}main>.view[data-lori-route-visual="1"]{position:relative}
main>.view[data-lori-route-visual="1"]::before{min-height:105px;margin-bottom:11px;padding:12px 12px 33px;font-size:16px;letter-spacing:.015em;background-size:155px auto,cover,cover;background-position:left 12px top 8px,center,center}main>.view[data-lori-route-visual="1"]::after{top:calc(105px - 25px);left:12px;font-size:10px}}
@media print{.lori-page-graphic,main>.view[data-lori-route-visual="1"]::before,main>.view[data-lori-route-visual="1"]::after{display:none!important}}

/* P220: RPG Converter is a specialized mode embedded within #view-create; keep its own unique image. */
html[data-lori-active-route="convert"] #view-create::before{content:"RPG CONVERTER"}
html[data-lori-active-route="convert"] #view-create::after{content:"FROM CHARACTERS TO CAMPAIGNS"}
html[data-lori-active-route="convert"] #view-create{--lori-route-art:url("assets/page-headers/rpg-system-converter.webp")}

/* UX36 P226: preserve user-approved 4:1 baked graphic banners, including all image text.
   Do not darken left artwork or cover illustrated wordmark with a second label. */
.lori-page-graphic--baked{height:auto!important;min-height:0!important;aspect-ratio:4/1!important;overflow:hidden!important;background:#0b1728!important}
.lori-page-graphic--baked .lori-page-graphic__art{display:block!important;width:100%!important;height:100%!important;aspect-ratio:4/1!important;object-fit:contain!important;object-position:center!important;filter:none!important}
.lori-page-graphic--baked::after,.lori-page-graphic--baked .lori-page-graphic__caption{display:none!important}
@media(max-width:640px){.lori-page-graphic--baked{height:auto!important;min-height:0!important;aspect-ratio:4/1!important}}
/* Print Card Studio retains its action links in the existing hero, now compact beneath the illustrated banner. */
body.ux351-print-refined .visual-hero{min-height:0;padding:15px 22px;margin-top:8px;background:#071929;border-radius:12px}
body.ux351-print-refined .visual-hero .hero-copy{max-width:100%}

/* P227: provider pages use "Featured Tool", not partnership/endorsement claims.
   The provider name overlays the outdated baked-in second line on these 4:1 banners;
   original Loriginary wordmark and rich art remain visible. No image stretching. */
.lori-featured-baked .lori-featured-baked-label{position:absolute;left:0;top:41%;width:44%;height:38%;display:flex;flex-direction:column;justify-content:center;z-index:2;gap:.35vw;box-sizing:border-box;padding:0 2.5%;margin:0;color:#f4fbff;background:linear-gradient(90deg,rgba(7,27,47,.97) 0%,rgba(7,27,47,.94) 77%,rgba(7,27,47,0) 100%);text-shadow:0 2px 6px #000}
.lori-featured-baked .lori-featured-baked-label strong{font:800 clamp(9px,2.35vw,34px)/1.12 system-ui,'Segoe UI',sans-serif;letter-spacing:.025em;white-space:normal}
.lori-featured-baked .lori-featured-baked-label span{font:600 clamp(7px,1.1vw,15px)/1.2 system-ui,'Segoe UI',sans-serif;letter-spacing:.08em;color:#c6edfc}
@media(max-width:640px){.lori-featured-baked .lori-featured-baked-label{top:41%;height:41%;width:49%;padding-left:2%}.lori-featured-baked .lori-featured-baked-label strong{font-size:clamp(8px,2.7vw,14px)}.lori-featured-baked .lori-featured-baked-label span{font-size:clamp(6px,1.6vw,9px);letter-spacing:0}}

/* UX36 P230: DO NOT use a full-width opaque left gradient on fresh illustrations.
 * These are intentionally localized text-contrast effects, NOT generated blank spaces.
 * P224 baked-in dark-left images must be REPLACED, not disguised with CSS. */

/* P231: approved prelettered 4:1 original page art. Keep original scene visible.
   Old P227 overlay was necessary only for outdated baked-in partner titles;
   the new artwork itself says FEATURED TOOLS. Retain captions for assistive tech. */
.lori-featured-baked .lori-featured-baked-label{
 position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;
 padding:0!important;margin:-1px!important;border:0!important;
 clip-path:inset(50%)!important;white-space:nowrap!important;
}

/* UX36 P235: the 2400x600 branded artwork is the page hero. Keep earlier navigation as a compact utility bar, not a competing unrelated second banner. */
header.ux235-compact-utility-nav{background:#09192b!important;background-image:none!important;box-shadow:none!important;min-height:0!important;max-width:1480px!important;margin:9px auto 0!important;padding:9px 14px!important;border:1px solid #34516b!important;border-radius:10px!important;display:flex!important;flex-direction:column!important;gap:5px!important;}
header.ux235-compact-utility-nav::after{display:none!important;}
header.ux235-compact-utility-nav>h1{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;}
header.ux235-compact-utility-nav>p.quiet,header.ux235-compact-utility-nav>p.muted,header.ux235-compact-utility-nav>p.intro{font-size:12px!important;line-height:1.45!important;max-width:none!important;margin:0!important;color:#b8cfe5!important;text-shadow:none!important;}
header.ux235-compact-utility-nav>p.pill{font-size:11px!important;letter-spacing:.04em!important;margin:0!important;}
header.ux235-compact-utility-nav nav{gap:5px 8px!important;}
header.ux235-compact-utility-nav>a,header.ux235-compact-utility-nav nav a{min-height:32px!important;}
@media(max-width:640px){header.ux235-compact-utility-nav{margin:6px 8px 0!important;padding:9px!important;border-radius:9px!important;}header.ux235-compact-utility-nav>p{font-size:12px!important;}}

/* UX36 P237: compact semantic production utility navigation, no stray separator text.
   Each direct menu link is in a single responsive flex row, above the real 4:1 banner. */
header.ux235-compact-utility-nav nav.ux237-utility-links{display:flex!important;flex-direction:row!important;align-items:center!important;flex-wrap:wrap!important;gap:7px 9px!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important}
header.ux235-compact-utility-nav nav.ux237-utility-links>a{display:inline-flex!important;width:auto!important;min-height:32px!important;margin:0!important;white-space:normal!important}
@media(max-width:640px){header.ux235-compact-utility-nav nav.ux237-utility-links{gap:6px!important}}