/* The poster collection uses the storefront's established purple / red identity. */
.showcase-hero { min-height: 740px; padding-top: 62px; padding-bottom: 62px; gap: 60px; }
.showcase-hero h1 { font-size: clamp(52px, 6.4vw, 84px); letter-spacing: -.065em; }
.showcase-hero h1 span { color: #f36cc7; }
.showcase-hero .eyebrow, .poster-section .eyebrow { color: #cf9aff; }
.showcase-hero .eyebrow-line, .poster-section .eyebrow-line { background: #b66cff; }
.showcase-hero .hero-lede { max-width: 465px; }
.showcase-hero .hero-meta { color: #b4a9bd; }
.showcase-hero .button-primary, .poster-section .button-primary, .poster-dialog .button-primary { color: white; background: linear-gradient(110deg,#9144f1,#d732b7 60%,#ee3c67); }
.hero-poster-stage { position: relative; width: min(100%, 428px); justify-self: center; }
.hero-poster-stage::before { content: ''; position: absolute; inset: 5% -8%; z-index: -1; border-radius: 50%; background: linear-gradient(110deg,#6936ad66,#f52b592e); filter: blur(50px); }
.hero-poster-top { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 13px; color: #bcaacb; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.showcase-dot { display: inline-block; width: 6px; height: 6px; background: #e766b9; border-radius: 50%; margin-right: 7px; }
.hero-poster-open { display: block; width: 100%; border: 1px solid #9c56db66; background: #040407; border-radius: 12px; padding: 0; overflow: hidden; box-shadow: 0 25px 90px #0008; }
.poster-frame { position: relative; display: block; aspect-ratio: 3/4; container-type: inline-size; background: #050509; overflow: hidden; line-height: 0; }
.poster-frame img { display: block; width: 100%; height: 100%; object-fit: contain; }
.poster-contact-band { position: absolute; inset: auto 0 0; height: 6.7%; padding: 0 5.7%; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #050509; color: #f1ecf4; border-top: 1px solid #786e7b; font: 500 2.35cqw/1.2 Inter,system-ui,sans-serif; letter-spacing: 0; white-space: nowrap; }
.poster-contact-band b { font-weight: 500; }
.hero-poster-controls { display: flex; align-items: center; gap: 9px; margin-top: 15px; }
.hero-poster-caption { min-width: 0; flex: 1; }
.hero-poster-caption strong { font-size: 13px; display: block; }
.hero-poster-caption small { font-size: 10px; color: #a99bb4; display: block; margin-top: 3px; }
.showcase-control { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border: 1px solid #ffffff25; border-radius: 8px; background: #ffffff07; color: #f5effc; font-size: 16px; }
.showcase-control:hover { background: #ae5cf12e; border-color: #ae5cf1; }
.showcase-control:focus-visible, .poster-card:focus-visible, .hero-poster-open:focus-visible, .poster-chip:focus-visible, .poster-tab:focus-visible, .poster-thumb:focus-visible { outline: 2px solid #e896ed; outline-offset: 4px; }
.poster-section { padding: 75px 0 85px; border-top: 1px solid #ffffff15; }
.poster-section .section-heading { margin-bottom: 25px; }
.poster-section .section-heading h2 { font-size: clamp(35px,4.4vw,55px); }
.poster-heading-actions { display: flex; align-items: center; gap: 20px; }
.poster-heading-actions p { font-size: 12px; color: #aa9ab5; margin: 0; }
.poster-status-tabs { display: flex; gap: 24px; border-bottom: 1px solid #ffffff20; margin-bottom: 22px; }
.poster-tab { background: transparent; border: 0; border-bottom: 2px solid transparent; color: #a99bb4; padding: 13px 0 15px; font-size: 13px; font-weight: 650; }
.poster-tab[aria-pressed=true] { color: #fff; border-bottom-color: #d461e2; }
.poster-tools { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 27px; }
.poster-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.poster-chip { padding: 8px 13px; background: transparent; color: #b8a9c3; border: 1px solid #ffffff20; border-radius: 99px; font-size: 11px; }
.poster-chip[aria-pressed=true] { background: #b356e42a; border-color: #bc70ee77; color: #efd4ff; }
.poster-search { min-width: 200px; max-width: 300px; flex: 1; display: flex; align-items: center; gap: 9px; border: 1px solid #ffffff20; border-radius: 9px; padding: 10px 13px; color: #ae9fbb; }
.poster-search input { color: white; background: transparent; border: 0; outline: 0; min-width: 0; width: 100%; font-size: 12px; }
.poster-search input::placeholder { color: #9789a3; }
.poster-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 26px 20px; }
.poster-card { display: block; text-align: left; padding: 0; color: white; background: transparent; border: 0; border-radius: 9px; min-width: 0; }
.poster-card .poster-frame { border-radius: 9px; border: 1px solid #ffffff24; transition: border-color .2s, transform .2s; }
.poster-card:hover .poster-frame { border-color: #b763dd; transform: translateY(-4px); }
.poster-card-type { display: flex; justify-content: space-between; gap: 8px; color: #b89dca; text-transform: uppercase; letter-spacing: .09em; font-size: 8px; font-weight: 700; margin: 16px 0 7px; }
.poster-card h3 { font-size: 17px; line-height: 1.2; letter-spacing: -.025em; margin: 0 0 7px; }
.poster-card p { font-size: 11px; line-height: 1.65; color: #ad9fb9; margin: 0 0 10px; }
.poster-card-price { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.poster-card-price strong { font-size: 18px; letter-spacing: -.03em; }
.poster-card-price small { font-size: 9px; color: #b09dbd; }
.poster-card-archived { position: absolute; top: 10px; left: 10px; padding: 7px 9px; border-radius: 5px; color: white; background: #19101de8; font-size: 9px; line-height: 1; font-weight: 700; border: 1px solid #ffffff55; }
.poster-notice { color: #ad9db7; font-size: 11px; line-height: 1.8; margin: 27px 0 0; }
.poster-notice a { color: #e6b6f7; white-space: nowrap; }
.poster-empty { text-align: center; padding: 55px 10px; color: #bcaaca; border: 1px solid #ffffff15; border-radius: 10px; }
.poster-dialog { padding: 0; width: min(1120px,calc(100% - 40px)); max-height: calc(100dvh - 40px); background: #100b17; color: #f4eefa; border: 1px solid #ffffff35; border-radius: 16px; box-shadow: 0 30px 120px #000a; overflow: auto; }
.poster-dialog::backdrop { background: #050308dc; backdrop-filter: blur(8px); }
.poster-dialog-layout { display: grid; grid-template-columns: 1.1fr 1fr; }
.poster-dialog-art { min-width: 0; padding: 22px; background: #050407; display: flex; flex-direction: column; align-items: center; gap: 15px; }
.poster-dialog-art .poster-frame { width: min(100%, calc((100dvh - 200px)*.75)); flex-shrink: 0; }
#modalPosterArt { width: 100%; display: flex; justify-content: center; }
.poster-dialog-info { padding: 45px 32px 30px; position: relative; }
.poster-dialog-close { position: absolute; right: 16px; top: 14px; z-index: 2; }
.poster-dialog h2 { font-size: clamp(28px,3.4vw,43px); letter-spacing: -.05em; line-height: 1; margin: 13px 0; }
.poster-dialog-summary { font-size: 13px; line-height: 1.7; color: #bdadc8; }
.poster-dialog-price { font-size: 36px; font-weight: 780; letter-spacing: -.05em; margin: 18px 0 2px; }
.poster-dialog-price-note { font-size: 11px; color: #bf9bc9; margin-bottom: 20px; }
.poster-specs { margin: 15px 0 24px; }
.poster-specs div { display: grid; grid-template-columns: 95px 1fr; gap: 15px; padding: 10px 0; border-bottom: 1px solid #ffffff15; font-size: 11px; line-height: 1.6; }
.poster-specs dt { color: #a58eaf; }
.poster-specs dd { margin: 0; }
.poster-dialog-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.poster-dialog-status { margin: 13px 0 0; font-size: 11px; color: #e3b5f5; min-height: 1.6em; }
.poster-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 15px; font-size: 11px; color: #b8a6c5; }
.poster-thumbs { display: flex; gap: 7px; justify-content: center; }
.poster-thumb { width: 38px; height: 48px; border: 1px solid #ffffff35; border-radius: 4px; padding: 0; overflow: hidden; background: #0a0710; }
.poster-thumb img { width: 100%; height: 100%; object-fit: cover; }
.poster-thumb[aria-current=true] { border: 2px solid #e488f3; }
.poster-archive-note { color: #eed2a9; background: #b2792316; border: 1px solid #d6a65340; padding: 11px 13px; border-radius: 8px; font-size: 11px; line-height: 1.7; }
.poster-original-note { font-size: 10px; color: #aa96b6; margin: 17px 0 0; line-height: 1.7; }
.poster-feed-state { font-size: 10px; color: #9c8aa7; }
.poster-grid [hidden], .poster-section [hidden] { display: none; }
@media(min-width:1150px) { .main-nav { gap: 22px; margin-right: 25px; } }
@media(max-width:1100px) { .showcase-hero { gap: 32px; grid-template-columns: 1fr 1fr; } .poster-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .poster-heading-actions p { display: none; } .poster-tools { align-items: flex-start; } }
@media(max-width:760px) { .showcase-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 50px; gap: 42px; } .showcase-hero h1 { font-size: 63px; max-width: 490px; } .hero-poster-stage { width: min(85%,370px); } .poster-section { padding: 50px 0; } .poster-heading-actions .button { min-height: 40px; padding: 0 10px; font-size: 10px; white-space: nowrap; } .poster-tools { flex-direction: column; } .poster-search { max-width: none; width: 100%; } .poster-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 25px 14px; } .poster-card h3 { font-size: 15px; } .poster-card-price strong { font-size: 17px; } .poster-dialog-layout { grid-template-columns: 1fr; } .poster-dialog-art { padding: 18px; } .poster-dialog-art .poster-frame { width: min(100%,300px); } .poster-dialog-info { padding: 30px 22px 20px; } .poster-dialog-close { position: fixed; top: 28px; right: 28px; background: #100b17; } .poster-dialog { width: calc(100% - 24px); max-height: calc(100dvh - 24px); } }
@media(max-width:420px) { .showcase-hero h1 { font-size: 54px; } .poster-section .section-heading { flex-direction: column; align-items: flex-start; gap: 18px; } .poster-card-type { font-size: 7px; } .poster-card p { font-size: 10px; } .poster-chip { padding: 7px 10px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition: none !important; animation: none !important; } }