/* Creators Conclave — inner-page additions to the rich media kit (css/rich.css).
   Loads after rich.css on every inner page. The home page does not use this file.

   Hero        .rxp-hero--slim (utility pages)   .rxp-hero--full (a whole first screen)   .rxp-hero--deep (heavier scrim for busy photos)
               .rxp-hero__star, .rxp-hero__count  the star and the countdown some heroes carry
   Sections    .rxp-strip-sec     full-width section holding a film strip (optional heading above it)
               .rxp-gallery       section holding a photo grid
               .rxp-backdrop      faint film or photo behind the top of a section
   Photos      .rxp-pic           one photo in a rounded tile, zooms on hover (.rxp-pic--shade darkens its foot for a caption)
               .rxp-cap           mono caption over the foot of a photo
               .rxp-sheen         slow light sweep across a photo        .rxp-float   gentle drift
   Cards       .card--pic         glass card that opens with a photo (.card__pic + .card__body)
               .rx-shot__num      outlined number on a photo card        .rxp-shot--copy  photo card carrying more text
   Bands       .cta-band--photo   call-to-action band with a photo behind it (.cta-band__photo) */

/* ───────── Hero ───────── */
.rx-hero__body { width: 100%; max-width: 1208px; }
.rx-hero__body > .chips { margin-top: 32px; justify-content: center; }
.rx-hero__media img { object-position: 50% 35%; }
.rxp-hero--full { min-height: min(100svh, 940px); }
.rxp-hero--slim { min-height: min(60vh, 540px); padding-top: 156px; padding-bottom: 64px; }
.rxp-hero--slim .rx-hero__title { max-width: 20ch; font-size: clamp(30px, 4.8vw, 64px); }
.rxp-hero--slim .rx-hero__lead { margin-top: 18px; }
/* Phones and tablets: the picture stays clear at the top of the hero and deepens where the words sit */
@media (max-width: 1023.98px) {
  .rx-hero::before { background:
    radial-gradient(120% 70% at 50% 110%, rgba(var(--glow), .24), transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .16) 20%, rgba(0, 0, 0, .58) 42%, rgba(0, 0, 0, .84) 70%, #000 100%); }
}
.rx-hero.rxp-hero--deep::before { background:
  radial-gradient(120% 80% at 50% 108%, rgba(var(--glow), .26), transparent 60%),
  linear-gradient(180deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .56) 30%, rgba(0, 0, 0, .74) 62%, #000 100%); }
.rx-hero__kicker { text-shadow: 0 2px 14px rgba(0, 0, 0, .95), 0 0 2px rgba(0, 0, 0, .8); }
.rx-hero__lead { text-shadow: 0 2px 16px rgba(0, 0, 0, .9); }
.rxp-hero__star { width: clamp(40px, 4.4vw, 62px); height: clamp(40px, 4.4vw, 62px); margin-bottom: 20px; filter: drop-shadow(0 0 26px rgba(var(--teal-glow), .85)); animation: rxp-star 5s ease-in-out infinite; }
.rxp-hero__count { margin-top: clamp(30px, 4vw, 44px); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rxp-hero__count p { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .28em; text-transform: uppercase; color: #d6cdb9; text-shadow: 0 2px 14px rgba(0, 0, 0, .9); }
@keyframes rxp-star { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(.86) rotate(45deg); opacity: .8; } }
@media (min-width: 768px) {
  .rx-hero { padding-left: 32px; padding-right: 32px; }
  .rxp-hero--slim { padding-top: 190px; padding-bottom: 84px; }
}
/* Side hero (large screens): the words stand on the left, the film or photo keeps the right two-thirds to itself.
   Narrower screens fall back to the kit's centred hero. --rxp-focus chooses which part of the picture stays in frame
   on large screens, --rxp-focus-sm on phones and tablets. */
.rxp-hero--side .rx-hero__media img, .rxp-hero--side .rx-hero__media video { object-position: var(--rxp-focus-sm, 50% 35%); }
@media (min-width: 1024px) {
  .rxp-hero--side { align-items: flex-start; justify-content: center; text-align: left; padding-top: 170px; padding-bottom: 84px; }
  .rxp-hero--side .rx-hero__body { margin: 0 auto; align-items: flex-start; }
  .rxp-hero--side .rx-hero__body > * { max-width: min(100%, 45vw, 640px); }
  .rxp-hero--side .rx-hero__title { font-size: clamp(38px, 4.9vw, 74px); }
  .rxp-hero--side .rx-hero__actions, .rxp-hero--side .rx-hero__body > .chips { justify-content: flex-start; }
  .rxp-hero--side .rxp-hero__count { align-items: flex-start; }
  .rxp-hero--side .rx-hero__media { left: 36%; }
  .rxp-hero--side .rx-hero__media img, .rxp-hero--side .rx-hero__media video { object-position: var(--rxp-focus, 50% 30%); }
  .rxp-hero--side::before { background:
    linear-gradient(90deg, #000 36%, rgba(0, 0, 0, .84) 44%, rgba(0, 0, 0, .4) 55%, rgba(0, 0, 0, .06) 74%, rgba(0, 0, 0, .4) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0) 68%, #000 100%); }
}

/* ───────── Sections that hold photos ───────── */
.rxp-strip-sec { position: relative; padding: clamp(34px, 5vw, 72px) 0; background: #000; }
.rxp-strip-sec--alt { background: #060606; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.rxp-strip-sec > .shead { padding: 0 16px; margin-bottom: clamp(24px, 3vw, 40px); }
.rxp-strip-sec > .shead .title { font-size: clamp(22px, 2.6vw, 36px); }
.rx-strip__row img { background: #101010; }
.rxp-gallery .shead { margin-bottom: clamp(26px, 3.4vw, 44px); }
.rxp-backdrop { position: absolute; left: 0; right: 0; top: 0; height: min(74%, 680px); z-index: 0; overflow: hidden; opacity: .3; pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent); mask-image: linear-gradient(180deg, #000 20%, transparent); }
.rxp-backdrop img, .rxp-backdrop video { width: 100%; height: 100%; object-fit: cover; }
.rxp-backdrop--grey img, .rxp-backdrop--grey video { filter: grayscale(1); }

/* Bands show the upper three-quarters of a photo, so the corner hallmark is never cut in half by the band's edge */
.rx-band__media { inset: -8% 0 -30% 0; }
.rxp-band--deep::before { background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .66) 24%, rgba(0, 0, 0, .66) 76%, #000 100%); }   /* for bright or busy pictures */
/* The band's statement and the lines around it sit in one column */
.rx-band__body { position: relative; z-index: 1; width: 100%; max-width: 1100px; }
.rx-band__body .cta, .rx-band__body .link-underline { margin-top: 34px; }
.rx-band__star { width: 40px; height: 40px; margin: 0 auto 24px; filter: drop-shadow(0 0 18px rgba(var(--teal-glow), .9)); animation: rxp-star 6s ease-in-out infinite; }

/* ───────── Single photos ───────── */
.rxp-pic { position: relative; overflow: hidden; margin: 0; border-radius: 26px; background: #101010; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .9); }
.rxp-pic img, .rxp-pic video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); }
.rxp-pic:hover img { transform: scale(1.06); }
.rxp-pic--shade::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .84)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.rxp-pic--gold { border: 1px solid rgba(var(--glow), .6); box-shadow: 0 30px 80px -34px rgba(var(--glow), .7); }
.rxp-ar-16x10 { aspect-ratio: 16 / 10; }
.rxp-ar-4x3 { aspect-ratio: 4 / 3; }
.rxp-ar-4x5 { aspect-ratio: 4 / 5; }
.rxp-ar-1x1 { aspect-ratio: 1; }
.rxp-cap { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2; display: flex; align-items: center; gap: 12px; font-family: var(--f-mono); font-size: 12px; line-height: 1.6; letter-spacing: .18em; text-transform: uppercase; color: var(--plat-a); text-shadow: 0 2px 12px rgba(0, 0, 0, .9); }
.rxp-cap svg { flex: none; width: 24px; height: 24px; filter: drop-shadow(0 0 12px rgba(var(--teal-glow), .8)); }
.rxp-cap--pill { left: 16px; right: auto; top: 16px; bottom: auto; max-width: calc(100% - 32px); padding: 9px 16px 9px 12px; border-radius: 99px; background: rgba(8, 8, 8, .62); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 11.5px; line-height: 1.5; letter-spacing: .16em; text-shadow: none; }
.rxp-cap--pill svg { width: 18px; height: 18px; }

/* Layered pair beside text: figures need no browser margin, both photos zoom on hover, the small one drifts */
.rx-duo__art figure, figure.rx-frame { margin: 0; }
.rx-duo__art > * img { transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); }
.rx-duo__art > *:hover img { transform: scale(1.06); }
.rx-duo__art > :first-child::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .7)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.rx-duo__art > :nth-child(2) { z-index: 2; }
@media (max-width: 767.98px) { .rx-duo__art { width: 100%; max-width: 480px; margin-inline: auto; } }
@media (min-width: 768px) and (max-width: 899.98px) {   /* tablets keep the text and the pair side by side */
  .rx-duo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; }
  .rx-duo--flip .rx-duo__art { order: 2; }
}
.rxp-float { animation: rxp-float 7s ease-in-out infinite alternate; }
@keyframes rxp-float { from { transform: translate3d(0, -6px, 0); } to { transform: translate3d(0, 10px, 0); } }
.rxp-sheen::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(253, 231, 165, .2) 50%, transparent 58%) no-repeat; background-size: 260% 100%; background-position: 135% 0; animation: rxp-sheen 8s cubic-bezier(.4, 0, .2, 1) 1.2s infinite; }
@keyframes rxp-sheen { 0%, 58% { background-position: 135% 0; } 100% { background-position: -35% 0; } }

/* ───────── Cards ───────── */
.card--pic { padding: 0; gap: 0; overflow: hidden; }
.card__pic { position: relative; flex: none; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 23px 23px 0 0; -webkit-mask-image: linear-gradient(180deg, #000 56%, transparent 100%); mask-image: linear-gradient(180deg, #000 56%, transparent 100%); }   /* the photo melts into the card, whatever the card's own colour */
.card__pic img, .card__pic video { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); }
.card--pic:hover .card__pic img { transform: scale(1.07); }
.card__body { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; margin-top: -34px; padding: 0 clamp(22px, 2.4vw, 30px) clamp(24px, 2.6vw, 30px); }
.card--pic .card__num { -webkit-text-stroke: 1px rgba(253, 231, 165, .95); filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .9)); }

.rx-shot[data-tilt] { transition: transform .3s cubic-bezier(.22, 1, .36, 1), border-color .4s, box-shadow .4s; }
.rx-shot__num { font-family: var(--f-display); font-weight: 600; font-size: 44px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(253, 231, 165, .95); margin-bottom: 4px; }
.rx-shot__title { overflow-wrap: break-word; }
.rx-shot .chips { margin-top: 4px; }
.rx-shot .chips > * { background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rx-shot .card__link { margin-top: 4px; padding-top: 4px; }
.rxp-shot--copy { min-height: clamp(400px, 38vw, 520px); }
.rxp-shot--copy::before { background: linear-gradient(180deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .93) 78%); }
.rxp-shots--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }

/* ───────── Call-to-action band over a photo ───────── */
.cta-band--photo { isolation: isolate; }
.cta-band--photo > .cta-band__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.cta-band--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(90% 120% at 100% 0%, rgba(var(--glow), .3), transparent 60%),
  linear-gradient(180deg, rgba(11, 11, 11, .82), rgba(11, 11, 11, .62) 45%, rgba(11, 11, 11, .9)); }
@media (min-width: 768px) {
  .cta-band--photo::before { background:
    radial-gradient(90% 120% at 100% 0%, rgba(var(--glow), .3), transparent 60%),
    linear-gradient(90deg, rgba(11, 11, 11, .94) 0%, rgba(11, 11, 11, .7) 42%, rgba(11, 11, 11, .38) 70%, rgba(11, 11, 11, .72) 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .rxp-hero__star, .rx-band__star, .rxp-float, .rxp-sheen::after { animation: none; }
  .rxp-pic:hover img, .rx-duo__art > *:hover img, .card--pic:hover .card__pic img, .rx-shot:hover > img, .rx-mosaic__item:hover img { transform: none; }
}