/*
Theme Name: Ryan Private Site
Theme URI: https://ryanmagraw.com/
Author: Ryan Magraw
Description: Private landing page and project gallery theme for ryanmagraw.com.
Version: 1.1.2
Text Domain: ryan-private-site
*/

:root {
  --rps-bg: #07090d;
  --rps-bg-2: #0a0d12;
  --rps-panel: rgba(13, 15, 18, 0.97);
  --rps-text: rgba(255,255,255,0.92);
  --rps-muted: rgba(255,255,255,0.55);
  --rps-soft: rgba(255,255,255,0.10);
  --rps-blue: #2f8eea;
  --rps-blue-soft: rgba(47,142,234,0.16);
  --rps-orange: #ff7a1a;
  --rps-orange-soft: rgba(255,122,26,0.12);
  --rps-orange-text: #ffd1ad;
  --rps-max: 1500px;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--rps-bg);
}

body {
  min-height: 100%;
  margin: 0;
  background:
    radial-gradient(circle at 14% 10%, rgba(47, 142, 234, 0.10), transparent 28rem),
    radial-gradient(circle at 90% 18%, rgba(255, 255, 255, 0.035), transparent 26rem),
    linear-gradient(135deg, #07090d 0%, #0a0d12 48%, #07090d 100%);
  color: var(--rps-text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

a {
  color: inherit;
}

button,
input,
select {
  font: inherit;
}

.rps-site {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  background: #080b10;
  color: var(--rps-text);
}

.rps-shell {
  width: 100%;
  max-width: var(--rps-max);
  margin: 0 auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.rps-nav {
  position: relative;
  z-index: 30;
  border-bottom: 1px solid var(--rps-soft);
  background: rgba(8,11,16,0.92);
}

.rps-nav::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--rps-blue);
}

.rps-nav-inner {
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.rps-brand {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-size: clamp(1rem, 1vw, 1.125rem);
  font-weight: 300;
  letter-spacing: 0.44em;
  line-height: 1;
  text-transform: uppercase;
  color: rgba(255,255,255,0.90);
}

.rps-nav-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.rps-nav-link,
.rps-nav-button {
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .55rem 1rem;
  background: transparent;
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.rps-nav-link:hover,
.rps-nav-button:hover {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.07);
  color: #fff;
}

.rps-nav-button {
  border-color: rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.03);
}

.rps-hero {
  position: relative;
  min-height: calc(100vh - 8rem);
  min-height: calc(100dvh - 8rem);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--rps-soft);
}

.rps-hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rps-hero::before,
.rps-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rps-hero::before {
  background:
    linear-gradient(90deg, rgba(7,9,13,.90) 0%, rgba(7,9,13,.78) 24%, rgba(7,9,13,.48) 48%, rgba(7,9,13,.16) 76%, rgba(7,9,13,.04) 100%),
    linear-gradient(120deg, rgba(47,142,234,.075) 0%, transparent 38%, rgba(255,255,255,.025) 100%);
}

.rps-hero::after {
  background: linear-gradient(180deg, rgba(7,9,13,.12) 0%, rgba(7,9,13,.02) 42%, rgba(7,9,13,.38) 100%);
}

.rps-hero-content {
  position: relative;
  z-index: 2;
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.rps-hero-copy {
  max-width: 42rem;
}

.rps-eyebrow {
  display: block;
  margin: 0 0 1rem;
  color: rgba(255,255,255,0.48);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.rps-eyebrow::after {
  content: "";
  display: block;
  width: 3.75rem;
  height: 1px;
  margin-top: 1.35rem;
  background: var(--rps-blue);
}

.rps-hero-title {
  margin: 0;
  max-width: 44rem;
  color: #fff;
  font-size: clamp(4.2rem, 9vw, 7rem);
  font-weight: 300;
  line-height: .92;
  letter-spacing: -.07em;
}

.rps-hero-note {
  margin: 1.35rem 0 0;
  max-width: 36rem;
  color: rgba(255,255,255,0.72);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.6;
}

.rps-footer {
  border-top: 1px solid var(--rps-soft);
  background: rgba(15,16,18,0.52);
}

.rps-footer-inner {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
  font-size: .75rem;
  text-align: center;
}

.rps-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}

.rps-modal.is-open {
  pointer-events: auto;
  opacity: 1;
}

.rps-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(5,6,7,.82);
  cursor: default;
}

.rps-login-panel {
  position: relative;
  width: min(100%, 440px);
  transform: translateY(1rem) scale(.98);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.5rem;
  background: var(--rps-panel);
  box-shadow: 0 28px 80px rgba(0,0,0,.55);
  opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}

.rps-modal.is-open .rps-login-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.rps-close {
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(255,255,255,.45);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.rps-close:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}

.rps-login-body {
  padding: 2rem;
}

.rps-login-title {
  margin: 0;
  padding-right: 3rem;
  color: #fff;
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -.045em;
}

.rps-login-copy {
  margin: .8rem 0 0;
  color: var(--rps-muted);
  font-size: .9rem;
  line-height: 1.6;
}

.rps-form {
  margin-top: 2rem;
  display: grid;
  gap: 1.2rem;
}

.rps-label {
  display: block;
}

.rps-label span {
  display: block;
  margin: 0 0 .5rem;
  color: rgba(255,255,255,.42);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.rps-input {
  width: 100%;
  height: 3rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: .85rem;
  background: rgba(255,255,255,.055);
  color: #fff;
  padding: 0 1rem;
  outline: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.rps-input::placeholder {
  color: rgba(255,255,255,.28);
}

.rps-input:focus {
  border-color: rgba(47,142,234,.55);
  background: rgba(255,255,255,.08);
  box-shadow: 0 0 0 4px rgba(47,142,234,.12);
}

.rps-checkbox {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--rps-muted);
  font-size: .9rem;
}

.rps-checkbox input {
  width: 1rem;
  height: 1rem;
  accent-color: var(--rps-blue);
}

.rps-primary {
  width: 100%;
  height: 3rem;
  border: 1px solid rgba(47,142,234,.45);
  border-radius: .85rem;
  background: rgba(47,142,234,.16);
  color: #e0f0ff;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.rps-primary:hover {
  background: rgba(47,142,234,.22);
  color: #fff;
}

/* Viewer */
.rps-viewer-main {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--rps-bg);
}

.rps-viewer-hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(90deg, #07090d 0%, rgba(7,9,13,.90) 48%, rgba(7,9,13,.72) 100%),
    radial-gradient(circle at 15% 15%, rgba(47,142,234,.10), transparent 26rem);
}

.rps-viewer-hero-inner {
  padding-top: 3rem;
  padding-bottom: 2.5rem;
}

.rps-viewer-title {
  margin: .75rem 0 0;
  max-width: 58rem;
  color: #fff;
  font-size: clamp(3rem, 6vw, 5.25rem);
  line-height: .92;
  letter-spacing: -.07em;
  font-weight: 300;
}

.rps-viewer-intro {
  margin: 1.25rem 0 0;
  max-width: 46rem;
  color: rgba(255,255,255,.58);
  line-height: 1.7;
  font-size: 1rem;
}

.rps-gallery-section {
  position: relative;
  padding-top: 1.75rem;
  padding-bottom: 2.5rem;
}

.rps-gallery-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.rps-media-label {
  margin: 0;
  color: rgba(255,255,255,.48);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.rps-media-count {
  margin-top: .35rem;
  color: rgba(255,255,255,.42);
  font-size: .78rem;
}

.rps-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem;
}

.rps-project-select-wrap {
  min-height: 2.35rem;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  padding: .5rem .8rem;
}

.rps-project-select-wrap span {
  color: rgba(255,255,255,.42);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.rps-project-select {
  min-width: 150px;
  border: 0;
  background: transparent;
  color: #d4ebff;
  outline: none;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.rps-project-select option {
  background: #0d0f12;
  color: #fff;
}

.rps-filter-button {
  min-height: 2.35rem;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.54);
  padding: .55rem .9rem;
  cursor: pointer;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}

.rps-filter-button:hover {
  border-color: rgba(255,255,255,.20);
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.78);
}

.rps-filter-button.is-active {
  border-color: rgba(47,142,234,.55);
  background: rgba(47,142,234,.22);
  color: #e0f0ff;
}

.rps-gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.rps-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1.25rem;
  background: rgba(17,20,24,.88);
  color: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 20px 40px rgba(0,0,0,.20);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.rps-card:hover {
  transform: translateY(-2px);
  border-color: rgba(47,142,234,.42);
  background: rgba(23,27,33,.94);
}

.rps-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(255,255,255,.035), rgba(255,255,255,.01)),
    radial-gradient(circle at 30% 20%, rgba(47,142,234,.16), transparent 18rem);
}

.rps-card-media::after {
  content: "";
  position: absolute;
  inset: auto 1rem 1rem auto;
  width: 2.65rem;
  height: 2.65rem;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  background: rgba(5,6,7,.38);
}

.rps-card-body {
  padding: 1rem;
}

.rps-badges {
  position: absolute;
  top: .85rem;
  left: .85rem;
  right: .85rem;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  z-index: 2;
}

.rps-badge {
  border-radius: 999px;
  padding: .35rem .55rem;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .20em;
  text-transform: uppercase;
}

.rps-badge-project {
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(8,11,16,.74);
  color: rgba(255,255,255,.68);
}

.rps-badge-type {
  border: 1px solid rgba(255,122,26,.40);
  background: rgba(255,122,26,.12);
  color: var(--rps-orange-text);
}

.rps-card-title {
  margin: 0;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: -.025em;
}

.rps-card-description {
  margin: .5rem 0 0;
  color: rgba(255,255,255,.50);
  font-size: .88rem;
  line-height: 1.6;
}

.rps-pagination {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.rps-page-count {
  color: rgba(255,255,255,.36);
  font-size: .8rem;
}

.rps-page-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

.rps-page-button {
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.54);
  padding: .55rem .85rem;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.rps-page-button.is-active {
  border-color: rgba(47,142,234,.55);
  background: rgba(47,142,234,.22);
  color: #e0f0ff;
}

.rps-page-button:disabled {
  pointer-events: none;
  opacity: .35;
}

.rps-viewer-modal .rps-viewer-panel {
  position: relative;
  width: min(96vw, 1500px);
  transform: translateY(1rem) scale(.98);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.5rem;
  background: rgba(13,15,18,.97);
  opacity: 0;
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
  transition: transform .2s ease, opacity .2s ease;
}

.rps-viewer-modal.is-open .rps-viewer-panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.rps-viewer-canvas {
  height: min(82vh, 860px);
  min-height: 420px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1rem;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(47,142,234,.16), transparent 24rem),
    #000;
  display: grid;
  place-items: center;
}

.rps-viewer-placeholder {
  padding: 2rem;
  text-align: center;
  color: rgba(255,255,255,.56);
}

.rps-viewer-placeholder strong {
  display: block;
  margin-bottom: .75rem;
  color: #fff;
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 300;
  letter-spacing: -.06em;
}

.rps-viewer-panel-inner {
  padding: 1rem;
}

.rps-empty {
  grid-column: 1 / -1;
  padding: 3rem 1rem;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1.25rem;
  color: rgba(255,255,255,.55);
  text-align: center;
}

@media (min-width: 640px) {
  .rps-shell {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .rps-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .rps-shell {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
  }

  .rps-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1280px) {
  .rps-gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1536px) {
  .rps-gallery-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .rps-brand {
    letter-spacing: .28em;
    font-size: .85rem;
  }

  .rps-nav-inner {
    height: 3.75rem;
  }

  .rps-hero {
    min-height: calc(100vh - 7.25rem);
    min-height: calc(100dvh - 7.25rem);
  }

  .rps-hero-title {
    font-size: clamp(3.25rem, 16vw, 4.8rem);
  }

  .rps-filter-row,
  .rps-gallery-toolbar {
    align-items: stretch;
  }

  .rps-project-select-wrap,
  .rps-filter-button {
    width: 100%;
    justify-content: center;
  }

  .rps-project-select {
    min-width: 0;
    flex: 1;
  }

  .rps-viewer-canvas {
    min-height: 320px;
  }
}


/* v1.0.1 viewer layout fixes */
body.rps-viewer-main {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body.rps-viewer-main main {
  flex: 1 0 auto;
}

body.rps-viewer-main .rps-footer {
  margin-top: auto;
}

/* Carry the darker prototype-style viewer banner over more closely */
.rps-viewer-hero {
  position: relative;
  min-height: 235px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 18% 8%, rgba(47,142,234,.13), transparent 28rem),
    radial-gradient(circle at 82% 20%, rgba(255,255,255,.035), transparent 30rem),
    linear-gradient(90deg, #07090d 0%, rgba(7,9,13,.94) 48%, rgba(7,9,13,.82) 100%);
}

.rps-viewer-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgba(47,142,234,.10) 0%, transparent 46%, rgba(255,255,255,.025) 100%),
    linear-gradient(180deg, rgba(7,9,13,.18) 0%, rgba(7,9,13,.02) 42%, rgba(7,9,13,.38) 100%);
}

.rps-viewer-hero-inner {
  position: relative;
  z-index: 1;
  padding-top: 3.6rem;
  padding-bottom: 3rem;
}

.rps-viewer-title {
  margin-top: 1rem;
  max-width: 64rem;
  font-size: clamp(4rem, 6.8vw, 6.5rem);
  line-height: .9;
  letter-spacing: -.078em;
}

.rps-viewer-intro {
  margin-top: 1.15rem;
  max-width: 52rem;
  color: rgba(255,255,255,.60);
  font-size: 1.05rem;
}

/* Keep the gallery section from collapsing too short on large screens */
.rps-gallery-section {
  padding-top: 2rem;
  padding-bottom: 3.25rem;
}

/* Slightly closer to the prototype card scale/spacing */
.rps-card-body {
  padding: 1.1rem 1.15rem 1.2rem;
}

.rps-card-title {
  font-size: 1.15rem;
}

.rps-footer {
  flex-shrink: 0;
}


/* v1.0.2 - match uploaded Vite prototype more closely */

/* Sticky footer for viewer page */
html,
body {
  min-height: 100%;
}

body.rps-viewer-main {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden;
}

body.rps-viewer-main .rps-viewer-page-main {
  flex: 1 0 auto !important;
}

body.rps-viewer-main .rps-footer {
  margin-top: auto !important;
}

/* Viewer banner from prototype: image + compact title row */
.rps-viewer-hero {
  position: relative !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  background: #080b10 !important;
}

.rps-viewer-hero-image,
.rps-viewer-hero-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rps-viewer-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .26;
}

.rps-viewer-hero-overlay-side {
  background: linear-gradient(90deg, #07090d 0%, rgba(7,9,13,.90) 48%, rgba(7,9,13,.72) 100%);
}

.rps-viewer-hero-overlay-bottom {
  background: linear-gradient(180deg, rgba(7,9,13,.48) 0%, #07090d 100%);
}

.rps-viewer-hero-overlay-blue {
  background: linear-gradient(115deg, rgba(47,142,234,.10) 0%, transparent 46%, rgba(255,255,255,.025) 100%);
}

.rps-viewer-hero::before {
  display: none !important;
}

.rps-viewer-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  padding-top: 1.75rem !important;
  padding-bottom: 1.75rem !important;
}

.rps-viewer-eyebrow {
  margin: 0 0 .75rem;
  color: rgba(255,255,255,.52);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .38em;
  text-transform: uppercase;
}

.rps-viewer-title {
  margin: 0 !important;
  max-width: 42rem !important;
  color: #f5f5f4 !important;
  font-size: clamp(1.875rem, 4vw, 3rem) !important;
  line-height: 1 !important;
  letter-spacing: -.055em !important;
  font-weight: 300 !important;
}

.rps-viewer-intro {
  margin: 0 !important;
  max-width: 32rem !important;
  color: rgba(255,255,255,.60) !important;
  font-size: .875rem !important;
  line-height: 1.7 !important;
}

/* Gallery area from prototype */
.rps-gallery-section {
  position: relative;
  width: 100%;
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

.rps-gallery-glow {
  pointer-events: none;
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  top: 0;
  z-index: 0;
  height: 16rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(47,142,234,.08), transparent, rgba(255,255,255,.025));
  filter: blur(48px);
}

.rps-gallery-toolbar,
.rps-gallery-grid,
.rps-pagination {
  position: relative;
  z-index: 1;
}

.rps-gallery-toolbar {
  margin-bottom: 1.25rem !important;
  align-items: center;
}

.rps-filter-row {
  justify-content: flex-end;
  gap: .5rem !important;
}

.rps-project-select-wrap {
  min-height: 2.35rem;
  gap: .5rem;
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.03) !important;
  padding: .5rem .875rem !important;
}

.rps-project-select-wrap span {
  color: rgba(255,255,255,.42) !important;
  font-size: .68rem !important;
  letter-spacing: .18em !important;
}

.rps-project-select {
  min-width: 150px;
  color: #e0f0ff !important;
  font-size: .68rem !important;
  letter-spacing: .14em !important;
}

.rps-filter-button {
  min-height: 2.35rem;
  border-radius: 999px !important;
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.52) !important;
  padding: .5rem .875rem !important;
  font-size: .68rem !important;
  letter-spacing: .18em !important;
}

.rps-filter-button:hover {
  border-color: rgba(47,142,234,.50) !important;
  background: rgba(47,142,234,.16) !important;
  color: rgba(255,255,255,.75) !important;
}

.rps-filter-button.is-active {
  border-color: rgba(47,142,234,.55) !important;
  background: rgba(47,142,234,.22) !important;
  color: #e0f0ff !important;
  box-shadow: 0 0 18px rgba(47,142,234,.22);
}

.rps-filter-count {
  margin-left: .375rem;
  opacity: .60;
}

.rps-gallery-grid {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 1rem !important;
}

.rps-card {
  overflow: hidden !important;
  border-radius: 1rem !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(17,20,24,.88) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,.20) !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease !important;
}

.rps-card:hover {
  transform: translateY(-2px);
  border-color: rgba(47,142,234,.42) !important;
  background: rgba(23,27,33,.94) !important;
}

.rps-card-button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.rps-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #000 !important;
}

.rps-card-media::after {
  display: none !important;
}

.rps-card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .68;
  transition: transform .5s ease, opacity .5s ease;
}

.rps-card:hover .rps-card-image {
  transform: scale(1.05);
  opacity: .82;
}

.rps-card-gradient,
.rps-card-neutral {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rps-card-gradient {
  background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.18), transparent);
}

.rps-card-neutral {
  background: rgba(255,255,255,.015);
}

.rps-badges {
  position: absolute;
  left: .75rem;
  right: .75rem;
  top: .75rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  z-index: 2;
}

.rps-badge {
  border-radius: 999px;
  padding: .35rem .625rem;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .20em;
  text-transform: uppercase;
}

.rps-badge-project {
  border: 1px solid rgba(255,255,255,.15) !important;
  background: rgba(8,11,16,.74) !important;
  color: rgba(255,255,255,.68) !important;
}

.rps-badge-type {
  border: 1px solid rgba(255,122,26,.40) !important;
  background: rgba(255,122,26,.12) !important;
  color: #ffd1ad !important;
}

.rps-card-overlay-copy {
  position: absolute;
  left: .75rem;
  right: .75rem;
  bottom: .75rem;
  z-index: 2;
}

.rps-card-overlay-copy p {
  margin: 0;
  color: rgba(255,255,255,.56);
  font-size: .75rem;
}

.rps-card-overlay-copy h2 {
  margin: .25rem 0 0;
  overflow: hidden;
  color: #fff;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.25;
  letter-spacing: -.03em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rps-card-body {
  padding: 1rem !important;
}

.rps-card-title {
  display: none;
}

.rps-card-description {
  margin: 0 !important;
  display: -webkit-box;
  overflow: hidden;
  color: rgba(255,255,255,.62) !important;
  font-size: .875rem !important;
  line-height: 1.65 !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.rps-pagination {
  margin-top: 1.75rem !important;
  padding-top: 1.25rem !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

.rps-page-count {
  margin: 0;
  color: rgba(255,255,255,.36) !important;
  font-size: .75rem !important;
}

.rps-page-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.rps-page-button {
  border-radius: 999px !important;
  border-color: rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.03) !important;
  color: rgba(255,255,255,.52) !important;
  padding: .5rem .875rem !important;
  font-size: .75rem !important;
  letter-spacing: .18em !important;
}

.rps-page-button:hover:not(:disabled) {
  border-color: rgba(47,142,234,.50) !important;
  background: rgba(47,142,234,.16) !important;
  color: rgba(255,255,255,.75) !important;
}

.rps-page-button.is-active {
  border-color: rgba(47,142,234,.55) !important;
  background: rgba(47,142,234,.22) !important;
  color: #e0f0ff !important;
  box-shadow: 0 0 18px rgba(47,142,234,.22);
}

/* Modal viewer from prototype */
.rps-viewer-modal {
  padding: .75rem;
}

.rps-viewer-modal .rps-viewer-panel {
  position: relative;
  width: min(96vw, 1500px);
  max-width: none;
  padding: .75rem;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 1.5rem;
  background: rgba(13,15,18,.97);
  box-shadow: 0 28px 90px rgba(0,0,0,.50);
}

.rps-viewer-close {
  position: absolute;
  right: 1.25rem;
  top: 1.25rem;
  z-index: 3;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  color: rgba(255,255,255,.65);
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}

.rps-viewer-close:hover {
  background: rgba(255,255,255,.10);
  color: #fff;
}

.rps-viewer-canvas {
  position: relative;
  height: min(82vh, 860px);
  min-height: 420px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 1rem;
  background: #000 !important;
  display: block !important;
}

.rps-viewer-modal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .45;
}

.rps-viewer-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2rem;
  text-align: center;
}

.rps-viewer-placeholder > * {
  max-width: 38rem;
}

.rps-viewer-type {
  margin: 0 0 1rem;
  color: rgba(255,179,111,.82);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .38em;
  text-transform: uppercase;
}

.rps-viewer-placeholder strong {
  display: block;
  color: #fff;
  font-size: clamp(1.875rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -.04em;
}

.rps-viewer-placeholder span {
  display: block;
  margin: 1rem auto 0;
  color: rgba(255,255,255,.52);
  font-size: .875rem;
  line-height: 1.75;
}

.rps-viewer-plugin-note {
  margin: 1.75rem auto 0;
  max-width: 28rem;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.48);
  padding: .5rem 1rem;
  font-size: .75rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Reduce older v101 hero rules that made the title too large */
.rps-viewer-hero .rps-eyebrow::after {
  display: none;
}

@media (min-width: 640px) {
  .rps-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1024px) {
  .rps-viewer-hero-inner {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .rps-gallery-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1280px) {
  .rps-gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1536px) {
  .rps-gallery-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 680px) {
  .rps-viewer-hero-inner {
    align-items: flex-start;
  }

  .rps-viewer-intro {
    max-width: none !important;
  }

  .rps-filter-row {
    width: 100%;
  }

  .rps-project-select-wrap,
  .rps-filter-button {
    width: 100%;
    justify-content: center;
  }

  .rps-viewer-canvas {
    min-height: 320px;
  }
}


/* v1.0.3 - YouTube 360 video embed test */
.rps-viewer-canvas.is-youtube {
  display: block !important;
  background: #000 !important;
}

.rps-youtube-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.rps-viewer-canvas [hidden] {
  display: none !important;
}


/* v1.0.4 - known interactive 360 YouTube test video */


/* v1.0.5 - restored provided YouTube test URL */


/* v1.0.6 - WP VR shortcode test in the large viewer modal */
.rps-viewer-canvas.is-wpvr {
  display: block !important;
  background: #000 !important;
}

.rps-wpvr-embed {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #000;
}

.rps-viewer-canvas.is-wpvr .rps-wpvr-embed {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.rps-wpvr-embed,
.rps-wpvr-embed > *,
.rps-wpvr-embed iframe,
.rps-wpvr-embed canvas,
.rps-wpvr-embed .pnlm-container,
.rps-wpvr-embed .pnlm-render-container,
.rps-wpvr-embed .wpvr-panorama,
.rps-wpvr-embed .wpvr_item,
.rps-wpvr-embed .wpvr-tour-wrapper {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}

.rps-viewer-canvas [hidden] {
  display: none !important;
}


/* v1.0.7 - WP VR YouTube/video sizing fix
   The WP VR YouTube video output is 16:9. Keeping it inside the tall panorama canvas
   creates a large black area. For WP VR video cards, use a responsive 16:9 viewer. */
.rps-viewer-canvas.is-wpvr {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  max-height: 82vh !important;
  display: block !important;
  background: #000 !important;
}

.rps-viewer-canvas.is-wpvr .rps-wpvr-embed {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #000 !important;
}

.rps-viewer-canvas.is-wpvr .rps-wpvr-embed > *,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed iframe,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed video,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed object,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed embed,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .wpvr-video,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .wpvr-video-wrapper,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .wpvr-tour-wrapper,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .wpvr_item,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .wpvr-panorama,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .pnlm-container {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
}

.rps-viewer-canvas.is-wpvr .rps-wpvr-embed iframe {
  border: 0 !important;
}

@media (max-width: 680px) {
  .rps-viewer-canvas.is-wpvr {
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
  }
}


/* v1.0.8 - WP VR modal close/control fixes */
.rps-viewer-close {
  z-index: 50 !important;
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(0,0,0,.62) !important;
  color: rgba(255,255,255,.82) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
}

.rps-viewer-close:hover {
  background: rgba(255,255,255,.12) !important;
  color: #fff !important;
}

.rps-viewer-canvas.is-wpvr .rps-wpvr-embed {
  z-index: 4 !important;
}

/* Keep embedded YouTube/WP VR controls usable while keeping our close button above them. */
.rps-viewer-canvas.is-wpvr iframe {
  pointer-events: auto !important;
}


/* v1.0.9 - keep YouTube controls/settings usable inside WP VR */

/* Move our close button outside the video surface so it does not sit over YouTube controls. */
.rps-viewer-modal.has-wpvr {
  padding-top: 4.75rem !important;
}

.rps-viewer-modal.has-wpvr .rps-viewer-panel {
  overflow: visible !important;
}

.rps-viewer-modal.has-wpvr .rps-viewer-close {
  position: absolute !important;
  top: -3.45rem !important;
  right: 0 !important;
  z-index: 100 !important;
  width: 2.65rem !important;
  height: 2.65rem !important;
  border-color: rgba(255,255,255,.16) !important;
  background: rgba(0,0,0,.78) !important;
  color: rgba(255,255,255,.86) !important;
}

/* Make the YouTube iframe the top interactive layer inside WP VR.
   This helps the YouTube settings/quality menu receive clicks instead of the
   WP VR/panorama layer treating the click as a drag/pan action. */
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed iframe {
  position: absolute !important;
  inset: 0 !important;
  z-index: 30 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: auto !important;
  border: 0 !important;
}

/* Push common WP VR / Pannellum overlay layers behind the YouTube iframe for video mode. */
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed canvas,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .pnlm-container,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .pnlm-render-container,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .pnlm-ui,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .pnlm-controls-container,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .wpvr-hotspot,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .wpvr-controls {
  z-index: 1 !important;
}

/* Keep enough space for the external close button on small screens. */
@media (max-width: 680px) {
  .rps-viewer-modal.has-wpvr {
    padding-top: 4.25rem !important;
  }

  .rps-viewer-modal.has-wpvr .rps-viewer-close {
    top: -3.15rem !important;
    right: .25rem !important;
  }
}


/* v1.1.0 - WP VR pan restored, close-by-backdrop only, Sandy Beach id 24 */

/* Do not show the custom close button for WP VR videos.
   Users can click the dimmed area outside the viewer or press Escape.
   This prevents overlap with YouTube/WP VR controls. */
.rps-viewer-modal.has-wpvr .rps-viewer-close {
  display: none !important;
}

/* Restore WP VR/Pannellum interactivity for panning.
   The previous v1.0.9 iframe-on-top approach made settings easier to click,
   but it blocked WP VR's pan/drag layer. */
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed iframe {
  z-index: auto !important;
}

.rps-viewer-canvas.is-wpvr .rps-wpvr-embed canvas,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .pnlm-container,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .pnlm-render-container,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .pnlm-ui,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .pnlm-controls-container,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .wpvr-hotspot,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed .wpvr-controls {
  z-index: auto !important;
}

/* Multiple WP VR shortcodes are pre-rendered; only the active one is shown. */
.rps-wpvr-embeds {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #000;
}

.rps-wpvr-embeds,
.rps-wpvr-embed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.rps-viewer-canvas.is-wpvr .rps-wpvr-embeds,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.rps-wpvr-embed {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #000 !important;
}

/* Keep the active WP VR output full size. */
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed.is-active > *,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed.is-active iframe,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed.is-active video,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed.is-active object,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed.is-active embed,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed.is-active .wpvr-video,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed.is-active .wpvr-video-wrapper,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed.is-active .wpvr-tour-wrapper,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed.is-active .wpvr_item,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed.is-active .wpvr-panorama,
.rps-viewer-canvas.is-wpvr .rps-wpvr-embed.is-active .pnlm-container {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}


/* v1.1.1 - best-effort YouTube high-quality playback hints */


/* v1.1.2 - native YouTube fallback for YouTube-hosted 360 videos
   This avoids the WP VR overlay conflict and restores YouTube's settings menu. */
.rps-viewer-canvas.is-youtube-native {
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9 !important;
  max-height: 82vh !important;
  display: block !important;
  background: #000 !important;
}

.rps-youtube-native {
  position: absolute;
  inset: 0;
  z-index: 6;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #000;
}

.rps-viewer-canvas.is-youtube-native .rps-youtube-native {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.rps-youtube-native-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* No custom close button in native YouTube mode.
   Close by clicking outside the video or pressing Escape. */
.rps-viewer-modal.has-youtube-native .rps-viewer-close {
  display: none !important;
}

@media (max-width: 680px) {
  .rps-viewer-canvas.is-youtube-native {
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
  }
}