/* Venus in Furs: stili esclusivi della scheda Romeo Gigli. */
.romeo-page { background: #080808; color: #fff; padding: 124px 24px 56px; }
.romeo-page [hidden] { display: none !important; }
.romeo-page a:focus-visible, .romeo-page button:focus-visible { outline: 2px solid #6C63FF; outline-offset: 6px; }
.romeo-breadcrumb, .romeo-label { font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.romeo-breadcrumb { color: #aaaab2; }
.romeo-heading h1 { margin: 28px 0 26px; font-size: clamp(46px, 7.5vw, 130px); font-weight: 500; letter-spacing: -.045em; line-height: .97; }
.romeo-heading h1 span { display: block; color: #8c85ff; }
.romeo-meta { display: flex; justify-content: space-between; gap: 20px; color: #bbb; font-size: 16px; padding-bottom: 28px; border-bottom: 1px solid #ffffff26; }
.romeo-film { padding-top: 32px; }
.romeo-player { position: relative; width: min(100%, 1024px); margin: 0 auto; aspect-ratio: 512 / 389; background: #111; }
.romeo-player video { display: block; width: 100%; height: 100%; object-fit: contain; }
.romeo-play { position: absolute; inset: 0; display: flex; width: 100%; justify-content: center; align-items: center; gap: 18px; background: #0002; border: 0; color: #fff; cursor: pointer; font: inherit; font-size: 14px; letter-spacing: .04em; }
.romeo-play > span:first-child { width: 80px; height: 80px; display: grid; place-items: center; padding-left: 4px; border-radius: 50%; background: #6C63FF; font-size: 24px; transition: transform .3s, background .3s; }
.romeo-play small { display: block; text-align: left; font-size: 12px; margin-top: 4px; letter-spacing: 0; }
.romeo-play:hover > span:first-child { transform: scale(1.08); background: #817aff; }
.romeo-error { margin-top: 16px; }
.romeo-error a { text-decoration: underline; }
.romeo-story { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding: 80px 0; }
.romeo-label { color: #a5a5ac; }
.romeo-story h2 { font-size: clamp(36px, 4.6vw, 74px); font-weight: 400; letter-spacing: -.03em; line-height: 1.02; margin-top: 24px; }
.romeo-description { color: #bbbcc3; font-size: 19px; line-height: 1.6; max-width: 34em; }
.romeo-details { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid #ffffff26; padding-top: 28px; margin-top: 32px; }
.romeo-details dt { font-size: 10px; letter-spacing: .1em; color: #a5a5ac; margin-bottom: 7px; }
.romeo-details dd { font-size: 17px; }
.romeo-brand { display: inline-flex; gap: 30px; align-items: center; margin-top: 32px; padding: 14px 22px; border: 1px solid #ffffff60; border-radius: 100px; transition: background .25s; }
.romeo-brand:hover { background: #6C63FF; }
.romeo-back { border-top: 1px solid #ffffff26; padding-top: 28px; font-size: 16px; }
.romeo-back a { display: inline-flex; align-items: center; gap: 18px; }
.romeo-back span { color: #8c85ff; }
@media (max-width: 700px) {
 .romeo-page { padding: 108px 16px 40px; }
 .romeo-heading h1 { font-size: clamp(39px, 9.3vw, 65px); margin-top: 24px; }
 .romeo-meta { flex-direction: column; gap: 8px; font-size: 14px; padding-bottom: 22px; }
 .romeo-film { padding-top: 24px; }
 .romeo-play { font-size: 11px; gap: 12px; }
 .romeo-play > span:first-child { width: 56px; height: 56px; font-size: 18px; }
 .romeo-play small { font-size: 11px; }
 .romeo-story { grid-template-columns: 1fr; gap: 28px; padding: 48px 0; }
 .romeo-story h2 { font-size: 40px; margin-top: 16px; }
 .romeo-description { font-size: 17px; }
 .romeo-details { gap: 24px 16px; }
 .romeo-details dd { font-size: 15px; }
 .romeo-back { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .romeo-play > span:first-child, .romeo-brand { transition: none; } }