/* AdultPrime SFW — site styles
   Palette: adult-prime brand red on near-black, Netflix-style row layout. */

:root {
  --bg: #0b0b0b;
  --bg-2: #141414;
  --surface: #1a1a1a;
  --surface-2: #222;
  --border: #2a2a2a;
  --text: #fff;
  --text-dim: #b3b3b3;
  --text-mute: #777;
  --accent: #ed1c24;
  --accent-2: #ff3a44;
  /* CTA gradient: hot pink to warm orange. Used on primary action buttons. */
  --cta-from: #ff3b7e;
  --cta-to:   #ff8a3d;
  --cta-grad: linear-gradient(95deg, var(--cta-from) 0%, var(--cta-to) 100%);
  --cta-grad-hover: linear-gradient(95deg, #ff4f8c 0%, #ff9a52 100%);
  --cta-shadow: 0 8px 20px rgba(255, 90, 110, .35);
  --radius: 6px;
  /* Container width: 90% of viewport, capped at 1900px on very large screens. */
  --maxw: min(1900px, 90%);
  --topbar-h: 70px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); }
/* clip (not hidden) so html does not become a scroll container, which would
   break position:sticky on .topbar. */
html, body { overflow-x: clip; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.01em; }

/* ── Top bar ────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  /* Darker translucent wash with a stronger blur so the menu pops against
     the hero image without losing the see-through feel. */
  background: linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 100%);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 0;
}
.topbar::after {
  content: ""; display: block; height: 2px;
  background: var(--cta-grad);
  opacity: .9;
}
.bar {
  max-width: var(--maxw); margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 24px;
}
/* Logo + nav stay grouped on the left; search + join are pushed to the right. */
.bar .searchwrap { margin-left: auto; }
.logo {
  font-weight: 650; letter-spacing: 0;
  color: #fff; white-space: nowrap;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 12px;
  line-height: 1;
}

/* Hamburger — desktop hidden, shown when nav collapses on mobile */
.hamburger {
  display: none;
  place-items: center;
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s;
}
.hamburger:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--cta-from);
}
.hamburger:active { transform: scale(.96); }
.logo .word { font-size: 36px; }
.logo .word em {
  font-style: normal;
  background: var(--cta-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* 18+ circular badge with gradient ring and gradient text */
.badge18 {
  --ring: 2px;
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: 999px;
  background:
    linear-gradient(#0b0b0b, #0b0b0b) padding-box,
    var(--cta-grad) border-box;
  border: var(--ring) solid transparent;
  font-size: 13px; font-weight: 800; letter-spacing: 0;
  line-height: 1;
}
.badge18 b {
  font-weight: 800;
  background: var(--cta-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.badge18 sup { font-size: .75em; font-weight: 800; margin-left: 1px; }
.nav { display: flex; gap: 22px; }
.nav a {
  color: #fff; font-weight: 600; font-size: 16px;
  transition: color .15s ease;
}
.nav a:hover { color: var(--cta-from); }
.nav a.is-active {
  color: var(--cta-from);
  /* Subtle pink underline anchors the active section without competing
     with the topbar's bottom gradient strip. */
  position: relative;
}
.nav a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  background: var(--cta-grad);
  border-radius: 2px;
}
/* Login link lives inside the nav (drawer) on mobile; on desktop the
   round login icon button covers it, so hide here. */
.nav .nav-login { display: none; }

/* ── Search ─────────────────────────────────────────────────────────────── */
.searchwrap { position: relative; min-width: 280px; }
.searchwrap input {
  width: 100%; height: 40px;
  padding: 0 44px 0 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 999px;
  color: #111; font-size: 14px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.searchwrap input:focus {
  outline: none;
  border-color: var(--cta-from);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(255, 59, 126, .18);
}
.searchwrap input::placeholder { color: #888; }
.searchwrap button {
  position: absolute; right: 4px; top: 4px;
  width: 32px; height: 32px;
  border: 0; border-radius: 999px;
  background: transparent; color: #666;
  cursor: pointer; display: grid; place-items: center;
}
.searchwrap button:hover { color: #111; }

.suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #161616;
  border: 1px solid var(--border);
  border-radius: 10px;
  max-height: 70vh; overflow: auto;
  box-shadow: 0 20px 50px rgba(0,0,0,.6);
  z-index: 60;
}
.suggest .group {
  padding: 12px 14px 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-mute);
}
.suggest .item {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 14px; cursor: pointer;
  color: #ddd;
}
.suggest .item:hover, .suggest .item.active { background: #222; color: #fff; }
.suggest .item img {
  width: 48px; height: 32px; object-fit: cover;
  border-radius: 4px; background: #000; flex: 0 0 48px;
}
.suggest .item.performer img { width: 32px; height: 32px; border-radius: 999px; flex-basis: 32px; }
.suggest .item .t { font-size: 13px; font-weight: 600; line-height: 1.2; }
.suggest .item .s { font-size: 11px; color: var(--text-mute); }
.suggest .empty-row { padding: 16px; color: var(--text-mute); font-size: 13px; text-align: center; }

.join {
  display: inline-block;
  background: var(--cta-grad); color: #fff;
  padding: 9px 18px; border-radius: 999px;
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: var(--cta-shadow);
  transition: background .15s ease, transform .1s ease, box-shadow .2s ease, filter .15s ease;
}
.join:hover { background: var(--cta-grad-hover); filter: brightness(1.05); }
.join:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(255, 90, 110, .3); }

.login-icon {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 999px;
  color: var(--text-dim);
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.04);
  transition: color .15s, border-color .15s, background .15s, transform .1s;
}
.login-icon:hover {
  color: #fff;
  border-color: var(--cta-from);
  background: rgba(255,255,255,.08);
}
.login-icon:active { transform: translateY(1px); }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  /* Pull the hero up under the sticky topbar so the image spans the full viewport top. */
  margin-top: calc(-1 * var(--topbar-h));
  background-image:
    linear-gradient(180deg,
      rgba(11,11,11,0)   0%,
      rgba(11,11,11,0)   55%,
      rgba(11,11,11,.7)  88%,
      #0b0b0b           100%),
    var(--hero-desktop);
  background-size: cover; background-position: right center;
  /* Sized so the next section ("Latest Updates" heading + a slice of the rail)
     peeks above the fold, hinting at more content below. */
  min-height: 76vh;
  display: flex; align-items: flex-end;
  padding: calc(var(--topbar-h) + 50px) 24px 50px;
}
.hero-inner {
  max-width: var(--maxw); width: 100%; margin: 0 auto;
}
/* Studio logo strip overlaid across the top of the hero. Sits directly
   under the sticky topbar; semi-transparent dark band so the white logos
   pop against the hero photo without blocking it out completely. */
.hero-studio-strip {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: var(--topbar-h);
  z-index: 5;
  padding: 14px 24px;
  background: linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.15) 80%, rgba(0,0,0,0) 100%);
}
@media (min-width: 961px) {
  .hero-studio-strip { display: flex; }
}
.hero-studio-strip > * {
  flex: 1 1 0;
  min-width: 0;
}
.hero-studio-strip-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 10px;
  border-radius: 8px;
  transition: background .15s ease, transform .15s ease;
}
.hero-studio-strip-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
  transition: filter .15s ease;
}
.hero-studio-strip-item:hover {
  background: rgba(255, 255, 255, .06);
  transform: translateY(-1px);
}
.hero-studio-strip-item:hover img {
  filter: drop-shadow(0 4px 10px rgba(255, 59, 126, .35));
}
.hero h1 {
  font-size: clamp(38px, 6.5vw, 84px);
  line-height: 1.02;
  margin: 0 0 18px;
}
.hero h1 .accent {
  background: var(--cta-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.hero .lede {
  font-size: clamp(15px, 1.4vw, 19px);
  color: #f0f0f0;
  max-width: 620px;
  margin: 0 0 28px;
}
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 800; font-size: 15px; letter-spacing: .02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s, transform .1s, box-shadow .2s, filter .15s;
}
.btn-primary {
  background: var(--cta-grad); color: #fff;
  box-shadow: var(--cta-shadow);
}
.btn-primary:hover { background: var(--cta-grad-hover); filter: brightness(1.05); }
.btn-primary:active { box-shadow: 0 4px 12px rgba(255, 90, 110, .3); }
.btn-ghost {
  background: rgba(255,255,255,.12); color: #fff;
  backdrop-filter: blur(6px);
}
.btn-ghost:hover { background: rgba(255,255,255,.2); }
.btn:active { transform: translateY(1px); }

/* ── Listing pages (/videos/) ───────────────────────────────────────────── */
.page-toolbar {
  max-width: var(--maxw); margin: 0 auto;
  padding: 48px 24px 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.page-toolbar .page-head { padding: 0; margin: 0; flex: 0 1 auto; }
.page-toolbar .filters   { padding: 0; margin: 0; flex: 0 1 auto; max-width: 100%; }

.page-head {
  max-width: var(--maxw); margin: 0 auto;
  padding: 48px 24px 8px;
  text-align: left;
}
.page-head .eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--cta-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 10px;
}
.page-head h1 {
  /* Matches the main-page section titles (.row-head h2). */
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0;
}
.page-head p {
  color: var(--text-dim);
  font-size: 15px;
  margin: 0;
}

/* Filter row above the videos grid */
.filters {
  max-width: var(--maxw); margin: 0 auto;
  padding: 12px 24px 8px;
  display: flex; flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  justify-content: flex-end;
}
.filter {
  display: flex; flex-direction: column;
  gap: 4px;
  min-width: 200px;
}
.filter-label {
  font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-mute);
  padding-left: 4px;
}
.filter select {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
  color: #fff;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 36px 10px 16px;
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: border-color .15s ease, background-color .15s ease;
}
.filter select:hover,
.filter select:focus { border-color: var(--cta-from); outline: none; background-color: #1f1f1f; }
.filter select option { background: #161616; color: #fff; }
.filter-reset {
  display: inline-flex; align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: transparent;
  color: var(--cta-from);
  font-size: 13px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid var(--cta-from);
  align-self: flex-end;
  text-decoration: none;
  transition: color .15s, background .15s;
}
.filter-reset:hover { background: rgba(255,59,126,.1); color: #fff; }
.filter-submit {
  height: 40px; padding: 0 16px;
  border-radius: 999px;
  background: var(--cta-grad); color: #fff;
  border: 0; font-weight: 800; cursor: pointer;
}

@media (max-width: 720px) {
  .filters { padding: 10px 12px 8px; gap: 8px; }
  .filter { min-width: 0; flex: 1 1 calc(50% - 4px); }
  /* Stack on mobile so the headline sits above the dropdowns again */
  .page-toolbar { padding: 16px 12px 8px; align-items: stretch; }
  .page-toolbar .filters { width: 100%; }
  /* Smaller H1 + eyebrow so filtered titles like "Latest 4K CFNM
     Bareback Videos" fit a phone viewport without wrapping ugly. */
  .page-head .eyebrow { font-size: 10px; margin-bottom: 4px; }
  .page-head h1 { font-size: clamp(20px, 6vw, 28px); line-height: 1.1; }
}

.row.videos-page { padding-bottom: 32px; }
.videos-grid {
  display: grid;
  /* Match the homepage rail: 5 cards across with a 14px gap, so each card
     lands at roughly the same width as the carousel cards on the main page. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
/* Inside a fixed-track grid the card needs to participate in min/max sizing
   so its content doesn't push the column wider (which caused horizontal
   scroll when a long studio name or model line stretched the cell). */
.videos-grid .card { min-width: 0; }
.videos-grid .card .thumb { width: 100%; }
@media (max-width: 1280px) { .videos-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 960px)  { .videos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .videos-grid { grid-template-columns: 1fr; gap: 16px; } }

/* Pagination */
.pagination {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center; gap: 6px;
  padding: 32px 0 48px;
}
@media (max-width: 720px) {
  .pagination {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 24px 0 32px;
    gap: 4px;
  }
  .pagination::-webkit-scrollbar { display: none; }
  /* Mobile: icon-only Prev/Next so all controls fit on one line */
  .page-btn { font-size: 0; padding: 0 10px; min-width: 36px; }
  .page-btn svg { width: 14px; height: 14px; }
  .page-num { min-width: 34px; height: 34px; padding: 0 8px; font-size: 12px; }
  .page-gap { padding: 0 2px; }
}
.page-btn, .page-num {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 38px; height: 38px;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 13px; font-weight: 700;
  text-decoration: none;
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .1s ease;
  justify-content: center;
}
.page-btn:hover, .page-num:hover {
  color: #fff;
  border-color: var(--cta-from);
  background: #1f1f1f;
}
.page-btn:active, .page-num:active { transform: translateY(1px); }
.page-num.is-current {
  background: var(--cta-grad);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 6px 14px rgba(255, 90, 110, .35);
}
.page-num.is-current:hover { color: #fff; }
.page-btn.is-disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}
.page-gap {
  color: var(--text-mute);
  padding: 0 4px;
  user-select: none;
}

/* ── Content rows ───────────────────────────────────────────────────────── */
.row { max-width: var(--maxw); margin: 0 auto; padding: 28px 24px 10px; }
/* The first row after the hero hugs closer so its heading peeks above the fold. */
.hero + .row { padding-top: 22px; }
.row-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 0 0 18px;
}
.row-head h2 {
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .02em;
  position: relative;
  padding-bottom: 10px;
}
.row-head h2::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 64px; height: 3px; border-radius: 999px;
  background: var(--cta-grad);
}
.see-all {
  font-size: 13px; font-weight: 600; color: var(--text-dim);
}
.see-all:hover { color: var(--accent); }
.empty { color: var(--text-mute); font-size: 14px; padding: 12px 0; }

/* Horizontal scroll rail */
.rail-wrap { position: relative; }
.rail {
  /* 5 cards per visible row: (container width − 4 × gap) ÷ 5 */
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * 14px) / 5);
  gap: 14px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 28px; margin: 0 -4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Soft fade-out at the left and right edges so the cards under the arrow
     buttons hint at "more content". Each edge's fade is killed when the
     rail can't scroll further that way (the matching arrow is hidden). */
  --rail-fade-l: 80px;
  --rail-fade-r: 80px;
  mask-image: linear-gradient(90deg,
              transparent 0,
              #000 var(--rail-fade-l),
              #000 calc(100% - var(--rail-fade-r)),
              transparent 100%);
  -webkit-mask-image: linear-gradient(90deg,
              transparent 0,
              #000 var(--rail-fade-l),
              #000 calc(100% - var(--rail-fade-r)),
              transparent 100%);
}
.rail-wrap.at-start .rail { --rail-fade-l: 0px; }
.rail-wrap.at-end   .rail { --rail-fade-r: 0px; }
.rail::-webkit-scrollbar { display: none; }

/* Carousel arrows (gradient ring on a dark center, matches the 18+ badge) */
.rail-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5;
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 999px;
  border: 2px solid transparent;
  background:
    linear-gradient(rgba(11,11,11,.92), rgba(11,11,11,.92)) padding-box,
    var(--cta-grad) border-box;
  color: var(--cta-from);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  transition: color .15s ease, background .15s ease, opacity .15s ease, transform .1s ease, box-shadow .2s ease;
}
.rail-nav:hover {
  color: #fff;
  background:
    var(--cta-grad) padding-box,
    var(--cta-grad) border-box;
  box-shadow: var(--cta-shadow);
}
.rail-nav:active { transform: translateY(-50%) scale(.96); }
.rail-nav.prev { left: 4px; }
.rail-nav.next { right: 4px; }
.rail-nav[disabled] {
  opacity: 0; pointer-events: none;
}
/* Move card vertical centre up to match the thumb (not the card incl. caption) */
.rail-wrap .rail-nav { top: calc((280px * 9 / 16) / 2 + 4px); }
@media (max-width: 560px) {
  .rail-wrap .rail-nav { top: calc((75vw * 9 / 16) / 2 + 4px); }
  .rail-nav { width: 36px; height: 36px; }
}

.card { scroll-snap-align: start; transition: transform .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-4px); }
}
.card .thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
}
.card .thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease, filter .2s ease, opacity .2s ease;
}
/* When the soft (image_midi_50) thumbnail 404s, the JS swaps the src to
   /img/no-preview.svg. Render it as a full-bleed background so it reads as
   a clean "no preview" placeholder, not a broken image. */
.card .thumb img.thumb-fallback,
.video-player .video-player-media.thumb-fallback {
  object-fit: cover;
  background: #1a1a1a;
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .thumb img { transform: scale(1.04); }
}
.card .card-trailer {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 1;
  pointer-events: none;
}
.card.is-trailer .card-trailer { opacity: 1; }
.card.is-trailer .thumb img    { opacity: 0; }

/* Centered "Watch Video" pill that appears on hover/focus. Hidden by default
   so it doesn't compete with the still thumbnail when the user is scanning. */
.card-cta {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, calc(-50% + 6px));
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  background: var(--cta-grad);
  color: #fff;
  border-radius: 999px;
  font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: var(--cta-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.card.is-trailer .card-cta {
  opacity: 1;
  transform: translate(-50%, -50%);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover .card-cta,
  .card:focus-within .card-cta {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
.studio-badge {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.7); color: #fff;
  padding: 4px 8px; font-size: 11px; font-weight: 600;
  border-radius: 3px; letter-spacing: .02em;
  backdrop-filter: blur(4px);
}
.upcoming-badge {
  position: absolute; top: 8px; right: 8px;
  background: var(--cta-grad); color: #fff;
  padding: 4px 8px; font-size: 11px; font-weight: 800;
  border-radius: 3px; letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(255, 90, 110, .35);
}
.duration-badge {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,.78); color: #fff;
  padding: 3px 7px; font-size: 11px; font-weight: 700;
  letter-spacing: .02em;
  border-radius: 3px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1;
  pointer-events: none;
}
.card .meta { padding: 10px 4px 0; }
.card .title {
  font-size: 14px; font-weight: 600; color: #fff;
  line-height: 1.3;
  display: flex; align-items: center; gap: 8px;
}
.card .title > span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.card .studio-favicon {
  width: 18px; height: 18px;
  flex: 0 0 18px;
  border-radius: 3px;
  object-fit: contain;
  background: rgba(255,255,255,.06);
  margin-top: 1px;
}
.card .date { font-size: 12px; color: var(--text-mute); }
.card .meta-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  min-width: 0;
}
.card .meta-row .studio-name {
  color: var(--text-dim);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.card .meta-row .date { flex: 0 0 auto; text-align: right; }

/* Shorts (vertical preview clips, hover to play) */
.shorts-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  padding-bottom: 28px;
}
.short-card {
  position: relative;
  aspect-ratio: 9 / 16;
  background: #000;
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  isolation: isolate;
}
.short-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0,0,0,.5);
}
.short-card video {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.short-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center;
  padding: 0 10px 14px;
  pointer-events: none;
  background: linear-gradient(180deg,
              rgba(0,0,0,0)   0%,
              rgba(0,0,0,0)   45%,
              rgba(0,0,0,.45) 70%,
              rgba(0,0,0,.85) 100%);
}
.short-logo {
  max-width: 80%;
  max-height: 36%;
  width: auto; height: auto;
  object-fit: contain;
  margin-bottom: 18px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
@media (max-width: 1100px) {
  .shorts-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .shorts-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Live cams (affiliate widget mirror). 6 cards in one row on desktop.
   Placeholder gradient backgrounds until real cam thumbnails are wired. */
.livecams-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  padding-bottom: 28px;
}
.cam-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  overflow: hidden;
  display: block;
  background: #1a1a1a;
  isolation: isolate;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cam-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px rgba(0,0,0,.5); }
.cam-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cam-card::before {
  /* Soft bottom fade so the label stays readable on bright frames.
     No full-card wash so the cam image / video shows in full. */
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 45%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.75) 100%);
  z-index: 1;
  pointer-events: none;
}

.cam-pill {
  position: absolute; top: 8px; left: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  z-index: 2;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 8px; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.cam-dot {
  width: 8px; height: 8px; border-radius: 999px;
  background: #00d27a;
  box-shadow: 0 0 8px rgba(0, 210, 122, .8);
  animation: cam-pulse 1.6s ease-in-out infinite;
}
@keyframes cam-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.85); }
}
.cam-label {
  position: absolute; left: 0; right: 0; bottom: 10px;
  z-index: 2;
  text-align: center;
  color: #fff;
  font-size: 14px; font-weight: 900;
  letter-spacing: .04em; text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
  padding: 0 8px;
}

@media (max-width: 1100px) { .livecams-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px)  { .livecams-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } }

/* /models/ overview — grid of performer thumbs + name + video count */
.row.models-page { padding-bottom: 32px; }
.models-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}
.model-tile {
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #181818 0%, #121212 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.model-tile:hover {
  border-color: rgba(255, 90, 110, .4);
  box-shadow: 0 16px 32px rgba(0,0,0,.45);
}
@media (hover: hover) and (pointer: fine) {
  .model-tile:hover { transform: translateY(-3px); }
}
.model-tile-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #000;
  overflow: hidden;
  /* Own stacking context + GPU layer so the backdrop-filter overlay below
     doesn't visibly lag/bleed while the parent transforms on hover. */
  isolation: isolate;
  transform: translateZ(0);
}
.model-tile-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Censor the bottom portion of model thumbnails to hide any nudity that
   leaks below the face. Heavy backdrop-blur plus a grid overlay so the
   result reads as a typical "mosaic" tile censor rather than soft blur. */
.model-tile-thumb::after,
.model-hero-thumb::after {
  content: "";
  position: absolute; left: -1px; right: -1px; bottom: -1px;
  height: calc(36% + 2px);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background:
    repeating-linear-gradient(0deg, transparent 0, transparent 11px, rgba(0,0,0,.28) 11px, rgba(0,0,0,.28) 12px),
    repeating-linear-gradient(90deg, transparent 0, transparent 11px, rgba(0,0,0,.28) 11px, rgba(0,0,0,.28) 12px),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.7) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 30%);
  pointer-events: none;
  will-change: backdrop-filter;
}
.model-hero-thumb { position: relative; isolation: isolate; transform: translateZ(0); }
.model-tile-meta {
  padding: 10px 12px 12px;
}
.model-tile-name {
  font-size: 14px; font-weight: 800;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.model-tile-count {
  font-size: 12px; font-weight: 600;
  color: var(--text-mute);
  margin-top: 2px;
}
@media (max-width: 1280px) { .models-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .models-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .models-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 480px)  { .models-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* /model/{slug} — performer detail hero */
.model-hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: 56px 24px 8px;
}
.model-hero-inner {
  display: flex; align-items: center; gap: 28px;
  flex-wrap: wrap;
}
.model-hero-left {
  display: flex; align-items: center; gap: 28px;
  flex-wrap: wrap;
  min-width: 0;
}
/* Desktop only: split into two columns — avatar+stats on the left, bio on
   the right. Below 900px the bio falls back to the original stacked layout
   directly under the hero so the meta block keeps full width on tablets. */
@media (min-width: 900px) {
  .model-hero-inner {
    flex-wrap: nowrap;
    gap: 40px;
    align-items: center;
  }
  .model-hero-left {
    flex: 0 1 auto;
    flex-wrap: nowrap;
  }
  .model-hero .model-hero-bio {
    flex: 1 1 0;
    min-width: 0;
    padding: 0;
    margin: 0;
    max-width: none;
  }
  .model-hero .model-hero-bio .studio-intro-inner { max-width: none; }
  .model-hero .model-hero-bio p { font-size: 13px; line-height: 1.7; }
}
.model-hero-thumb {
  flex: 0 0 auto;
  width: 180px; height: 180px;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.08);
  background: #1a1a1a;
}
.model-hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.model-hero-meta { flex: 1 1 280px; min-width: 0; }
.model-hero-meta .eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--cta-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 8px;
}
.model-hero-meta h1 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 900;
  letter-spacing: -.01em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 14px;
}
.model-hero-stats {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  color: var(--text-dim);
  font-size: 15px;
}
.model-hero-stats strong {
  background: var(--cta-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  margin-right: 6px;
  vertical-align: -3px;
}
@media (max-width: 720px) {
  .model-hero { padding: 20px 12px 8px; }
  /* On mobile keep avatar + name on the same row inside .model-hero-left,
     and let the bio wrap to its own row below (full width). */
  .model-hero-inner { flex-wrap: wrap; gap: 14px; align-items: center; }
  .model-hero-left { flex-wrap: nowrap; gap: 14px; flex: 1 1 100%; }
  .model-hero-bio { flex: 1 1 100%; padding: 0; }
  .model-hero-thumb { width: 92px; height: 92px; flex: 0 0 92px; }
  .model-hero-meta { flex: 1 1 auto; min-width: 0; }
  .model-hero-meta .eyebrow { font-size: 10px; margin-bottom: 4px; }
  .model-hero-meta h1 { font-size: clamp(20px, 6vw, 28px); margin-bottom: 8px; }
  .model-hero-stats { font-size: 12px; gap: 4px 12px; }
}

/* /video/{slug} — single-video detail page */
.video-stage {
  background:
    radial-gradient(80% 80% at 50% 0%, rgba(255, 90, 110, .08) 0%, rgba(0,0,0,0) 60%),
    #0b0b0b;
  padding: 24px 0;
}
.video-stage-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 24px;
}
/* Two-column layout on desktop (player + side panel), stacks on tablet/mobile.
   On desktop both columns stretch to the same height: the player's height
   comes from its aspect-ratio, and the side panel matches it via the grid. */
.video-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 961px) {
  .video-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: stretch;
  }
}
.video-player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
}
.video-player-media,
.video-player-trailer {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Explicit display rules on the trailer and overlay above would otherwise
   override the [hidden] attribute. Make sure they stay hidden until the JS
   un-sets it on play. */
.video-player-trailer[hidden],
.video-playing-overlay[hidden] { display: none; }
/* Static poster sits on top of trailer until play is clicked */
.video-poster { z-index: 1; transition: opacity .25s ease; }
.video-player.is-playing .video-poster { opacity: 0; pointer-events: none; }
.video-player-trailer { z-index: 0; }

/* Big play button overlay shown on the poster */
.video-play-btn {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.85);
  background: rgba(0,0,0,.55);
  color: #fff;
  cursor: pointer;
  display: grid; place-items: center;
  z-index: 3;
  box-shadow: 0 12px 32px rgba(0,0,0,.55);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.video-play-btn svg { margin-left: 4px; }   /* visually centre the triangle */
.video-play-btn:hover {
  background: rgba(0,0,0,.75);
  border-color: var(--cta-from);
  transform: translate(-50%, -50%) scale(1.04);
}
.video-player.is-playing .video-play-btn { display: none; }

/* Overlay shown once the trailer is playing: full studio logo centered,
   CTA button centered directly below it. Subtle dark vignette so both stay
   legible on any frame. */
.video-playing-overlay {
  position: absolute; inset: 0;
  z-index: 2;
  pointer-events: none;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 22px;
  padding: 32px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.55) 100%);
}
.video-overlay-logo {
  max-width: 360px;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.85));
}
.video-overlay-logo img {
  max-width: 100%;
  max-height: 110px;
  object-fit: contain;
  display: block;
}
.video-overlay-logo span {
  font-size: 22px; font-weight: 900;
  text-transform: uppercase; letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 4px 14px rgba(0,0,0,.85);
}
.video-cta {
  pointer-events: auto;
  font-size: 16px;
  padding: 14px 28px;
}
.video-cta svg { vertical-align: -2px; margin-right: 8px; }

/* Clip player tweaks: this is the free teaser playing with native controls,
   so the overlay is suppressed during normal playback and shown only on
   pause OR in the final 10s. */
.video-player[data-mode="clip"] .video-playing-overlay {
  background: radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.20) 70%, rgba(0,0,0,.35) 100%);
}
/* End-of-clip CTA: solid dark wash covers the full video. Native controls
   are hidden by JS while this overlay is on, so we don't have to leave a
   transparent strip at the bottom. */
.video-player[data-mode="clip"] .video-playing-overlay.is-end-cta {
  background: rgba(0, 0, 0, .92);
  justify-content: center;
  align-items: center;
  padding-top: 32px;
}
@media (max-width: 720px) {
  .video-play-btn { width: 64px; height: 64px; }
  .video-play-btn svg { width: 24px; height: 24px; }
  .video-playing-overlay { gap: 12px; padding: 16px; }
  .video-overlay-logo { max-width: 200px; }
  .video-overlay-logo img { max-height: 60px; }
  .video-overlay-logo span { font-size: 15px; }
  /* Higher specificity than .btn-xl so the button actually shrinks. */
  .video-playing-overlay .video-cta { padding: 9px 16px; font-size: 12px; letter-spacing: .02em; }
  .video-playing-overlay .video-cta svg { width: 12px; height: 12px; margin-right: 5px; }
  /* Trim the side-panel description to 3 lines on mobile (Read more still
     unlocks the full text). Higher specificity than the default line-clamp 8
     rule below so it wins regardless of source order in the file. */
  .video-info .video-info-desc-wrap .video-desc { -webkit-line-clamp: 3; }
  /* Smaller section sub-titles ("More …" rows) on mobile */
  .row-head h2 { font-size: 17px; letter-spacing: .03em; }
}

/* Side-panel info (desktop right column). Stacks under player on mobile. */
.video-info {
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 4px 0;
  min-height: 0;          /* allow children to constrain heights inside flex */
}
.video-info .video-title {
  font-size: clamp(20px, 1.6vw, 24px);
  margin: 0;
}
.video-info .video-meta { margin: 0; }
.video-info .video-desc { margin: 0; }
.video-info-cta {
  align-self: stretch;
  text-align: center;
  margin-top: auto;       /* anchor button to the bottom of the panel */
}
/* Mobile only: tighten the gaps in the side panel, surface the Join CTA
   above the long description, hide the redundant FEATURING label.
   Applies to both /clip/{slug} and /video/{slug} (same layout markup). */
@media (max-width: 960px) {
  .video-layout {
    gap: 10px;
  }
  .video-layout .video-info {
    gap: 8px;
    padding: 0;
  }
  .video-layout .video-fullvid {
    margin: 0;
  }
  .video-layout .video-info-cta {
    order: 1;
    margin-top: 0;
  }
  .video-layout .video-info-desc-wrap {
    order: 2;
  }
}
/* "Featuring" label hidden on every breakpoint for video/clip detail pages
   (the chips below it are self-explanatory). */
.video-layout .video-models-label { display: none; }
/* On desktop the side panel is absolutely positioned inside an empty grid
   cell. The wrapper takes its size from the row (which is driven by the
   player's 16:9 aspect-ratio), and the panel fills the wrapper. This way
   the panel's content (expanded description, long performer list, etc.)
   never stretches the row and therefore never stretches the player. */
@media (min-width: 961px) {
  .video-side-wrap {
    position: relative;
    min-width: 0;
  }
  .video-info {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #181818 0%, #121212 100%);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px;
    padding: 22px 22px 24px;
    gap: 16px;
    overflow: hidden;     /* description handles its own scroll/clamp */
  }
}
/* Smaller laptop screens: the side panel is too short to safely fit the
   description without overlapping the button. Drop the description block
   (title + meta + models + CTA still show), and shrink the CTA button so
   it takes less vertical space too. Above 1400px there's room. */
@media (min-width: 961px) and (max-width: 1400px) {
  .video-info .video-info-desc-wrap { display: none; }
  .video-info .video-info-cta {
    font-size: 14px;
    padding: 12px 20px;
    letter-spacing: .02em;
  }
}

/* Description with read more/less toggle, scoped to the side panel.
   Default: clamped to fit the available space. Expanded: scrolls if it
   overflows the panel so the CTA button stays anchored at the bottom. */
.video-info-desc-wrap {
  display: flex; flex-direction: column;
  gap: 6px;
  min-height: 0;
  flex: 1 1 auto;          /* takes the remaining vertical space */
}
.video-info-desc-wrap .video-desc {
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.55;
  flex: 0 1 auto;
}
.video-info.is-expanded .video-info-desc-wrap {
  overflow: auto;
  scrollbar-width: thin;
}
.video-info.is-expanded .video-info-desc-wrap .video-desc {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.video-info-toggle {
  align-self: flex-start;
  background: none; border: 0;
  color: var(--cta-from);
  font-weight: 800; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.video-info-toggle:hover {
  color: #fff;
  border-bottom-color: var(--cta-from);
}

.video-detail {
  max-width: var(--maxw); margin: 0 auto;
  padding: 24px 24px 32px;
}
.video-detail-inner { max-width: 1000px; }
.video-title {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 900; letter-spacing: -.01em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.video-meta {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-bottom: 20px;
}
.video-meta-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-dim);
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
}
/* Side panel: compact chips so studio + duration + date all sit on one row */
.video-info .video-meta { gap: 6px; }
.video-info .video-meta-chip {
  padding: 5px 10px;
  font-size: 12px;
  gap: 5px;
}
.video-info .video-meta-chip .studio-favicon { width: 14px; height: 14px; }
a.video-meta-chip:hover { color: #fff; border-color: var(--cta-from); }
.video-meta-chip .studio-favicon { width: 16px; height: 16px; border-radius: 3px; background: rgba(255,255,255,.06); }

.video-models {
  margin-bottom: 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.video-models-label {
  font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute);
}
/* "Full video XX Minutes!" runtime callout. Sits directly under the H1 on
   the clip detail page. Pink-gradient text, single emphatic line. */
.video-fullvid {
  margin: -4px 0 4px;
  font-size: 16px; font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #fff;
  background: var(--cta-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.video-models-list { display: flex; flex-wrap: wrap; gap: 8px; }
.video-model-chip {
  display: inline-flex; align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: linear-gradient(180deg, #181818 0%, #121212 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: #fff;
  font-size: 14px; font-weight: 700;
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
a.video-model-chip:hover { color: #fff; border-color: var(--cta-from); }
.video-model-chip.has-avatar { padding-left: 4px; }
.video-model-chip-avatar {
  width: 26px; height: 26px;
  border-radius: 999px;
  object-fit: cover;
  background: #1a1a1a;
  flex: 0 0 26px;
}
.video-desc {
  margin: 18px 0 28px;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.7;
}
.video-detail-cta { display: inline-block; }

@media (max-width: 720px) {
  .video-stage { padding: 12px 0; }
  .video-stage-inner { padding: 0 12px; }
  .video-player { border-radius: 10px; }
  .video-cta { font-size: 14px; padding: 14px 22px; }
  .video-cta-sub { font-size: 11px; }
  .video-detail { padding: 18px 12px 32px; }
  .video-title { font-size: clamp(20px, 5.5vw, 26px); }
}

/* /studio/{slug} — single-studio hero + intro */
.studio-hero {
  max-width: var(--maxw); margin: 0 auto;
  padding: 56px 24px 8px;
}
.studio-hero-inner {
  display: flex; align-items: center; gap: 32px;
  flex-wrap: wrap;
}
.studio-hero-logo {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 220px; height: 120px;
  padding: 14px 20px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 90, 110, .08) 0%, rgba(0,0,0,0) 65%),
    linear-gradient(180deg, #181818 0%, #121212 100%);
}
.studio-hero-logo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.55));
}
.studio-hero-meta { flex: 1 1 300px; min-width: 0; }
.studio-hero-meta .eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--cta-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 8px;
}
.studio-hero-meta h1 {
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 900;
  letter-spacing: -.01em;
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 14px;
}
.studio-hero-stats {
  display: flex; flex-wrap: wrap; gap: 16px 22px;
  color: var(--text-dim);
  font-size: 14px;
}
.studio-hero-stats strong {
  color: #fff;
  font-weight: 800;
  background: var(--cta-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-right: 4px;
}

.studio-intro {
  max-width: var(--maxw); margin: 0 auto;
  padding: 16px 24px 8px;
}
.studio-intro-inner { max-width: 1100px; }
.studio-intro p {
  margin: 0;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.7;
}
.studio-intro a {
  color: #fff;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 90, 110, .55);
  transition: color .15s ease, border-color .15s ease;
}
.studio-intro a:hover { color: var(--cta-from); border-bottom-color: var(--cta-from); }
/* "Read more / less" toggle, only shown on mobile where the copy is clamped */
.studio-intro-toggle {
  display: none;
  margin-top: 4px;
  padding: 4px 0;
  background: none;
  border: 0;
  color: var(--cta-from);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.studio-intro-toggle:hover {
  color: #fff;
  border-bottom-color: var(--cta-from);
}

@media (max-width: 720px) {
  .studio-hero { padding: 24px 12px 8px; }
  .studio-hero-inner { gap: 18px; }
  .studio-hero-logo { width: 100%; height: 110px; }
  .studio-hero-meta h1 { font-size: clamp(22px, 6vw, 32px); }
  .studio-hero-stats { font-size: 13px; gap: 10px 16px; }
  .studio-intro { padding: 12px 12px 4px; }
  .studio-intro p {
    font-size: 14px; line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .studio-intro.is-expanded p {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .studio-intro-toggle { display: inline-block; }
}

/* /studios/ overview — grid of logo + name + video count */
.row.studios-page { padding-bottom: 32px; }
.studios-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.studio-tile {
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(255, 90, 110, .06) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #181818 0%, #121212 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.studio-tile:hover {
  border-color: rgba(255, 90, 110, .4);
  box-shadow: 0 16px 32px rgba(0,0,0,.45);
}
@media (hover: hover) and (pointer: fine) {
  .studio-tile:hover { transform: translateY(-3px); }
}
.studio-tile-logo {
  display: grid; place-items: center;
  height: 100px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0));
  padding: 16px 20px;
}
.studio-tile-logo img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
}
.studio-tile-meta {
  padding: 12px 14px 16px;
  text-align: center;
}
.studio-tile-count {
  font-size: 18px; font-weight: 900;
  color: #fff;
  letter-spacing: -.01em;
  line-height: 1.1;
}
.studio-tile-name {
  font-size: 11px; font-weight: 700;
  color: var(--text-mute);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1280px) { .studios-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 960px)  { .studios-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Text view: 5 columns of compact studio links */
.studios-text {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px 14px;
}
.studios-text a {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  text-decoration: none;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  transition: background .12s, color .12s;
}
.studios-text a:hover {
  background: var(--surface);
  color: var(--cta-from);
}
.studios-text-name {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.studios-text-count {
  color: var(--text-mute);
  font-size: 12px; font-weight: 700;
  flex: 0 0 auto;
}
.studios-text a:hover .studios-text-count { color: var(--text-dim); }
@media (max-width: 1100px) { .studios-text { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 800px)  { .studios-text { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .studios-text { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  /* Pull the count tighter under the logo on phones */
  .studio-tile-logo { height: 84px; padding: 12px 14px 2px; }
  .studio-tile-meta { padding: 4px 10px 12px; }
}
@media (max-width: 560px)  { .studios-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }

/* Studio grid */
.studio-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px;
  padding-bottom: 28px;
}
@media (max-width: 1100px) { .studio-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px)  { .studio-grid { grid-template-columns: repeat(2, 1fr); } }
.studio-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 12px;
  align-items: center; text-align: center;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
  min-height: 130px; justify-content: center;
}
.studio-card:hover {
  border-color: var(--accent);
  background: #1f1f1f;
  transform: translateY(-2px);
}
.studio-card img {
  max-height: 72px; max-width: 80%; object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.studio-card span {
  font-size: 12px; font-weight: 700; color: var(--text-mute);
  letter-spacing: .04em; text-transform: uppercase;
}

/* ── About + Perks (sits under the shorts) ─────────────────────────────── */
.about {
  max-width: var(--maxw); margin: 0 auto;
  padding: 56px 24px 40px;
}
.about-head {
  max-width: 760px; margin: 0 auto 40px;
  text-align: center;
}
.about-head .eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  background: var(--cta-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 14px;
}
.about-head h2 {
  font-size: clamp(22px, 3.4vw, 46px);
  font-weight: 900; letter-spacing: -.01em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0 0 18px;
}
.about-head p {
  color: var(--text-dim);
  font-size: 16px; line-height: 1.65;
  margin: 0 auto 28px;
  max-width: 920px;
  text-wrap: balance;
}

.about-cta {
  text-align: center;
  margin: 8px 0 40px;
}

/* Long-form article body inside the About section. Left-aligned for
   readability, with a read-more toggle that hides paragraphs 2 and 3 by
   default. Centered with a generous max-width on desktop. */
.about-body {
  max-width: none;
  margin: 24px auto 24px;
  text-align: left;
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.7;
}
.about-body p { margin: 0 0 12px; max-width: none; text-wrap: auto; }
.about-body p:last-child { margin-bottom: 0; }
.about-body > p:first-of-type { margin-bottom: 6px; }
.about-body h3 {
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 32px 0 12px;
  text-align: center;
}

/* Collapsible second + third paragraphs */
.about-more {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .35s ease, opacity .25s ease, margin-top .25s ease;
  margin-top: 0;
}
.about-body.is-expanded .about-more {
  max-height: 2200px;        /* large enough for the full text on any width */
  opacity: 1;
  margin-top: 0;
}

.about-toggle {
  display: inline-block;
  margin-top: 2px;
  padding: 4px 0;
  background: none;
  border: 0;
  color: var(--cta-from);
  font-weight: 800; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.about-toggle:hover {
  color: #fff;
  border-bottom-color: var(--cta-from);
}

.perks-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
.perk-tile {
  position: relative;
  background:
    radial-gradient(120% 100% at 0% 0%, rgba(255, 90, 110, .08) 0%, rgba(255, 90, 110, 0) 50%),
    linear-gradient(180deg, #181818 0%, #121212 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 22px 18px;
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.perk-tile::before {
  /* Thin gradient accent at the top edge — picks up on hover. */
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--cta-grad);
  opacity: 0; transition: opacity .2s ease;
}
.perk-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 90, 110, .35);
  box-shadow: 0 16px 32px rgba(0,0,0,.45);
}
.perk-tile:hover::before { opacity: 1; }

.perk-icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255, 90, 110, .12);
  color: var(--cta-from);
  margin-bottom: 16px;
}
.perk-stat {
  font-size: clamp(28px, 2.4vw, 44px);
  font-weight: 900; line-height: 1;
  letter-spacing: -.02em;
  background: var(--cta-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  margin-bottom: 10px;
}
.perk-name {
  font-size: 13px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .05em;
  color: #fff;
  margin-bottom: 8px;
}
.perk-note {
  font-size: 12px; color: var(--text-mute);
  line-height: 1.45;
}

/* ── Trust icons (recreates icons.gif as a real CSS row) ────────────────── */
.trust-icons {
  max-width: 1100px; margin: 0 auto;
  padding: 48px 24px 56px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
}
.trust-icon {
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  text-align: center; gap: 16px;
}
.trust-icon svg { width: auto; height: 80px; }
.trust-icon span { font-size: 15px; }
.trust-icon svg { display: block; }
.trust-icon span {
  font-size: 13px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--cta-from); /* default; per-tile override below */
  line-height: 1.15;
}
/* Color progression across the row: pink to orange, matching the brand grad. */
.trust-icon:nth-child(1) { color: hsl(340, 90%, 56%); }
.trust-icon:nth-child(1) span { color: hsl(340, 90%, 56%); }
.trust-icon:nth-child(2) { color: hsl(350, 85%, 56%); }
.trust-icon:nth-child(2) span { color: hsl(350, 85%, 56%); }
.trust-icon:nth-child(3) { color: hsl(  0, 85%, 54%); }
.trust-icon:nth-child(3) span { color: hsl(  0, 85%, 54%); }
.trust-icon:nth-child(4) { color: hsl( 20, 95%, 58%); }
.trust-icon:nth-child(4) span { color: hsl( 20, 95%, 58%); }
.trust-icon:nth-child(5) { color: hsl( 28, 95%, 58%); }
.trust-icon:nth-child(5) span { color: hsl( 28, 95%, 58%); }

@media (max-width: 720px) {
  .trust-icons { grid-template-columns: repeat(3, 1fr); gap: 24px 12px; }
}
@media (max-width: 420px) {
  .trust-icons { grid-template-columns: repeat(2, 1fr); }
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.foot {
  margin-top: 40px;
  background: #000;
  border-top: 1px solid var(--border);
}
.foot-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 28px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap;
  color: var(--text-mute); font-size: 13px;
}
.foot-inner a { color: var(--text-dim); margin-left: 18px; }
.foot-inner a:hover { color: #fff; }

/* Persistent footer CTA: brand wordmark + Join Today button.
   Hero image sits behind the brand + button, with a dark gradient overlay
   so the white wordmark and pink CTA stay legible against busy photography.
   The bottom of the gradient fades fully to #000 so the hero blends into
   the .foot-legal block below without a visible seam. */
.foot-cta {
  position: relative;
  background:
    linear-gradient(180deg, rgba(11,11,11,.78) 0%, rgba(11,11,11,.55) 45%, rgba(0,0,0,.95) 88%, #000 100%),
    radial-gradient(60% 80% at 50% 0%, rgba(255, 90, 110, .12) 0%, rgba(0,0,0,0) 65%),
    url('https://cdnstatic.imctransfer.com/static_01/adult-prime/midpage2.jpg') center/cover no-repeat,
    #0b0b0b;
  border-top: 1px solid var(--border);
}
.foot-cta-inner {
  position: relative; z-index: 1;
  max-width: var(--maxw); margin: 0 auto;
  padding: 64px 24px 56px;
  text-align: center;
}
/* Desktop: make the hero feel like an actual hero, not a thin band.
   The whole stack (logo + tagline + CTA) sits flush to the left so the
   background photo on the right stays visible, while the tagline and
   button center themselves under the logo. Grid track shrinks to the
   widest child (the wordmark); justify-items: center centers the smaller
   tagline + button inside that track. */
@media (min-width: 900px) {
  .foot-cta { min-height: 560px; display: flex; align-items: center; }
  .foot-cta-inner {
    width: 100%;
    padding: 96px 24px 96px;
    text-align: left;
    display: grid;
    grid-template-columns: max-content;
    justify-content: flex-start;
    justify-items: center;
    row-gap: 0;
  }
  .foot-cta-tagline { margin-left: 0; margin-right: 0; }
}
.foot-cta-brand {
  font-weight: 650;
  font-size: clamp(40px, 6vw, 72px);
  letter-spacing: -.01em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0 0 28px;
  color: #fff;
}
.foot-cta-brand em {
  font-style: normal;
  background: var(--cta-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.foot-cta-tagline {
  margin: -10px 0 24px;
  font-size: 15px; font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.btn-xl {
  font-size: 18px;
  padding: 18px 44px;
  letter-spacing: .04em;
}

/* Shared corporate legal block (Epoch/Segpay, 2257, complaints, RTA/ASACP).
   No top border because the .foot-cta gradient above fades into solid #000
   at its bottom edge, giving a seamless transition into this block. */
.foot-legal {
  background: #000;
  color: var(--text-mute);
  font-size: 12px;
  line-height: 1.65;
}
.foot-legal-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 28px 24px 36px;
  text-align: center;
}
.foot-legal p { margin: 0 0 10px; }
.foot-legal a {
  color: var(--text-dim);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,.18);
  text-underline-offset: 2px;
}
.foot-legal a:hover { color: #fff; text-decoration-color: var(--cta-from); }
.foot-legal b { color: #ddd; }

/* Sticky bottom promo bar. Homepage only; JS toggles visibility based on
   localStorage countdown. Dark glassy base matches the .topbar; a thin
   pink gradient hairline up top + a subtle pink wash from below keep it
   on-brand while still drawing the eye to the offer. */
.promo-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  /* No transform on the bar itself: mobile Chrome treats the combination of
     position:fixed + transform as if the bar were a transformed descendant
     of the viewport, which detaches it from the viewport during scroll.
     JS handles the address-bar offset by adjusting `bottom` instead. */
  padding-bottom: env(safe-area-inset-bottom);
  /* Same translucent black wash + blur the .topbar uses, mirrored vertically
     so the darker stop sits at the top edge (where the bar meets content). */
  background:
    radial-gradient(120% 200% at 50% 100%, rgba(255, 59, 126, .14) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.55) 100%);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  color: #fff;
  font-family: inherit;
  box-shadow: 0 -10px 30px rgba(0,0,0,.55);
}
.promo-bar::before {
  /* Pink hairline accent on top, mirroring the topbar's bottom hairline. */
  content: "";
  position: absolute; left: 0; right: 0; top: 0;
  height: 2px;
  background: var(--cta-grad);
  opacity: .9;
}
.promo-bar[hidden] { display: none; }
.promo-bar-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 9px 24px;
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.promo-bar-msg {
  font-size: 18px; font-weight: 800;
  letter-spacing: .01em;
  text-transform: uppercase;
  line-height: 1.1;
  color: #fff;
}
.promo-bar-msg strong {
  font-weight: 900;
  background: var(--cta-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.promo-bar-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(95deg, #2ecc71 0%, #1f9d52 100%);
  color: #fff;
  padding: 7px 22px;
  font-size: 12px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(46, 204, 113, .3);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.promo-bar-cta:hover {
  transform: translateY(-1px);
  background: linear-gradient(95deg, #3edf83 0%, #25b35e 100%);
  box-shadow: 0 12px 28px rgba(46, 204, 113, .5);
  color: #fff;
}
.promo-bar-timer {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 2px;
  font-weight: 600;
  line-height: 1;
}
.promo-bar-timer-label {
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .85);
  text-transform: uppercase;
}
.promo-bar-timer-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 900;
  letter-spacing: .06em;
  font-size: 14px;
  color: #fff;
  background: rgba(255, 59, 126, .12);
  border: 1px solid rgba(255, 59, 126, .35);
  padding: 2px 10px;
  border-radius: 5px;
}
@media (max-width: 600px) {
  .promo-bar-inner {
    gap: 6px 10px; padding: 7px 12px;
    /* Row 1: promo text + Get Offer button side by side.
       Row 2: countdown wraps below, spanning the full width. */
    justify-content: space-between;
  }
  .promo-bar-msg {
    font-size: 15px; line-height: 1.15;
    flex: 1 1 auto; min-width: 0;
    text-align: center;
  }
  .promo-bar-cta {
    flex: 0 0 auto;
    padding: 6px 14px; font-size: 11px;
    letter-spacing: .08em;
  }
  .promo-bar-timer {
    flex: 1 1 100%;
    flex-direction: row; align-items: center; justify-content: center;
    gap: 8px;
  }
  .promo-bar-timer-clock { font-size: 12px; padding: 2px 8px; }
  .promo-bar-timer-label { font-size: 10px; }
}
.foot-legal .text-center { text-align: center; margin-top: 18px; }
.foot-legal .text-center img {
  display: inline-block; vertical-align: middle;
  margin: 0 4px;
  max-height: 32px; width: auto;
  background: rgba(255,255,255,.06); padding: 4px; border-radius: 4px;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .bar { gap: 12px; }
  .hamburger { display: grid; }
  /* Login moves into the drawer; the topbar icon hides */
  .nav .nav-login { display: block; }
  .login-icon { display: none; }
  /* Style the Login link as a primary CTA inside the drawer */
  .nav .nav-login {
    margin-top: 6px;
    color: var(--cta-from);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
  }
  /* Nav slides down from under the topbar as a drawer when the hamburger
     is open. Items become a stacked list. */
  .nav {
    position: fixed; top: var(--topbar-h);
    left: 0; right: 0;
    flex-direction: column; gap: 0;
    padding: 6px 16px 14px;
    background: rgba(16,16,16,.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-top: 1px solid var(--border);
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform .22s ease, visibility .22s;
    z-index: 48;
  }
  .nav a {
    padding: 14px 4px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: 15px;
  }
  .nav a:last-child { border-bottom: 0; }
  .bar.menu-open .nav {
    transform: translateY(0);
    visibility: visible;
  }
  .searchwrap { min-width: 0; }
  .hero { min-height: 60vh; padding: 60px 18px 40px; }
  .row { padding: 36px 18px 6px; }
  .about { padding: 40px 18px 30px; }
  .perks-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .rail { grid-auto-columns: calc((100% - 2 * 14px) / 3); }
}
@media (max-width: 720px) {
  /* Mobile: containers go full-bleed (no 90% inset) and inner padding
     drops to the minimum so content uses every available pixel. */
  :root { --maxw: 100%; }
  .bar           { padding: 12px 12px; }
  .row           { padding: 24px 12px 6px; }
  .about         { padding: 32px 12px 24px; }
  .trust-icons   { padding: 36px 12px 40px; }
  .foot-legal-inner { padding: 24px 12px 32px; }
  .hero          { padding-left: 12px; padding-right: 12px; }

  /* Use the portrait-cropped hero on phones, and let it start UNDER the
     topbar (not behind it) so the full image is visible. */
  .hero {
    margin-top: 0;
    /* Taller hero on mobile so more of the image shows above the copy,
       but capped so the next section's heading + a slice of card peek
       above the fold. */
    min-height: 60vh;
    padding-top: 40px;
    padding-bottom: 14px;
    /* Solid stop pulled up to 92% so the bottom edge of the image can't
       leak through as a faint horizontal banding artifact. Background-color
       backstop ensures any sub-pixel rounding gap is page-bg, not white. */
    background-color: #0b0b0b;
    background-image:
      linear-gradient(180deg,
        rgba(11,11,11,0)   0%,
        rgba(11,11,11,0)   55%,
        rgba(11,11,11,.85) 80%,
        #0b0b0b            92%,
        #0b0b0b           100%),
      var(--hero-mobile);
    background-position: center top;
  }

  /* Hide the 18+ badge to declutter the topbar */
  .logo .badge18 { display: none; }
  /* Smaller logo so the Join button fits next to it */
  .logo .word { font-size: 26px; }
  /* Tighten the Join button so it doesn't push the topbar wider than 100vw */
  .join { padding: 8px 14px; font-size: 12px; }

  /* Collapse the search to an icon-only button; the input slides down as a
     full-width panel under the topbar when .is-open is set by JS. */
  .searchwrap { width: 40px; height: 40px; flex: 0 0 auto; }
  .searchwrap input {
    position: fixed;
    top: var(--topbar-h);
    left: 0; right: 0;
    width: 100%; height: 52px;
    background: #161616;
    color: #fff;
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    padding: 0 16px;
    z-index: 49;
    transform: translateY(-110%);
    opacity: 0; visibility: hidden;
    transition: transform .22s ease, opacity .15s ease, visibility .22s;
  }
  .searchwrap input::placeholder { color: var(--text-mute); }
  .searchwrap input:focus {
    background: #161616;
    border-color: var(--border);
    box-shadow: none;
  }
  .searchwrap.is-open input {
    transform: translateY(0);
    opacity: 1; visibility: visible;
  }
  .searchwrap button {
    position: static;
    width: 40px; height: 40px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    color: #fff;
  }
  .searchwrap button:hover { color: #fff; border-color: var(--cta-from); }
  /* Suggest panel slides under the search input bar */
  .suggest {
    position: fixed;
    top: calc(var(--topbar-h) + 52px);
    left: 0; right: 0;
    border-radius: 0;
    max-height: calc(100vh - var(--topbar-h) - 52px);
  }

  /* Hero H1 scales down on mobile, tighter vertical rhythm with the lede */
  .hero h1 { font-size: 32px; line-height: 1.05; margin: 0 0 8px; }
  .hero .lede { margin: 0 0 18px; font-size: 14px; line-height: 1.45; }

  /* Hero CTAs side-by-side, no wrap, equal share, smaller padding */
  .cta-row { flex-wrap: nowrap; }
  .cta-row .btn {
    flex: 1 1 0;
    padding: 12px 14px;
    font-size: 14px;
    text-align: center;
  }

  /* Shorts: 3 per row, hide rows 2+ */
  .shorts-grid { grid-template-columns: repeat(3, 1fr); }
  .shorts-grid .short-card:nth-child(n+4) { display: none; }

  /* No carousel arrows on touch — users swipe. Also kill the edge fade
     since there is no arrow sitting over it. */
  .rail-nav { display: none; }
  .rail { --rail-fade-l: 0px; --rail-fade-r: 0px; }

  /* About headline: kept on one line via white-space: nowrap; the shorter
     "Never be bored again!" copy lets us push the size up on mobile. */
  .about-head h2 { font-size: clamp(22px, 6.5vw, 32px); letter-spacing: 0; }

  /* Six perk tiles in 3 columns x 2 rows on mobile; hide the small note. */
  .perks-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .perk-tile { padding: 16px 12px; }
  .perk-note { display: none; }
  .perk-stat { font-size: 24px; margin-bottom: 6px; }

  /* Footer CTA scales down on mobile */
  .foot-cta-inner { padding: 44px 12px 40px; }
  .foot-cta-brand { font-size: 36px; margin-bottom: 22px; }
  .foot-cta-tagline { font-size: 13px; margin: -14px 0 20px; }
  .btn-xl { font-size: 16px; padding: 14px 32px; }

  /* About body: tighten article copy on phones and clamp the lead paragraph
     to 4 lines until the user taps "Read more". */
  .about { padding: 18px 12px 14px; }
  .about-head { margin-bottom: 0; }
  .about-head .eyebrow { margin-bottom: 6px; }
  .about-head h2 { margin-bottom: 0; }
  .about-body { font-size: 14px; line-height: 1.6; margin: 10px auto 8px; }
  .about-body p { margin-bottom: 12px; }
  .about-body > p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .about-body.is-expanded > p {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
}
@media (max-width: 560px) {
  /* Keep 3 columns at this size too — user wants 3 per row on mobile. */
  .perks-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .rail { grid-auto-columns: 75vw; }
  .join { padding: 8px 14px; font-size: 12px; }
}

/* ── Photo detail page ─────────────────────────────────────────────────── */
.photo-stage {
  background:
    radial-gradient(80% 80% at 50% 0%, rgba(255, 90, 110, .08) 0%, rgba(0,0,0,0) 60%),
    #0b0b0b;
  padding: 24px 0;
}
.photo-stage-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 0 24px;
}
.photo-layout {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 961px) {
  .photo-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: stretch;
  }
}
/* Cover image — same treatment as video player */
.photo-cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.6);
}
.photo-cover-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.photo-cover-overlay {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%, rgba(0,0,0,.6) 100%);
  opacity: 0;
  transition: opacity .25s ease;
}
.photo-cover:hover .photo-cover-overlay { opacity: 1; }
.photo-cover-cta { pointer-events: auto; }
.photo-count-badge {
  position: absolute; bottom: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(6px);
  font-size: 13px; font-weight: 600;
  color: #fff;
}

/* Sidebar — inherits video-info styles, with photo-specific overrides */
.photo-title {
  font-size: 22px; font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.25;
  margin-bottom: 12px;
}
.photo-info { padding: 4px 0; }

/* Niche tags */
.photo-niches {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 16px 0 8px;
}
.photo-niche-tag {
  padding: 5px 14px;
  border-radius: 100px;
  font-size: 12px; font-weight: 600;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  transition: border-color .15s ease, color .15s ease;
}
.photo-niche-tag:hover {
  border-color: var(--cta-from);
  color: var(--text);
}

/* Photo thumbnail grid */
.photo-thumbs-section {
  max-width: var(--maxw); margin: 0 auto;
  padding: 32px 24px 0;
}
.photo-thumbs-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 16px;
}
.photo-thumb-card {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  transition: transform .2s ease;
}
.photo-thumb-card:hover { transform: scale(1.03); z-index: 1; }
.photo-thumb-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: filter .2s ease;
}
.photo-thumb-card img { filter: blur(14px) brightness(.8); transform: scale(1.08); }
.photo-thumb-card:hover img { filter: blur(10px) brightness(.95); }
.photo-thumb-num {
  position: absolute; top: 6px; left: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(0,0,0,.65);
  font-size: 11px; font-weight: 700;
  color: #fff;
}
.photo-thumb-lock {
  position: absolute; bottom: 6px; right: 6px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,.55);
  display: grid; place-items: center;
  color: #fff;
  opacity: 0;
  transition: opacity .2s ease;
}
.photo-thumb-card:hover .photo-thumb-lock { opacity: 1; }

@media (max-width: 720px) {
  .photo-thumbs-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  .photo-cover { border-radius: 10px; }
  .photo-stage { padding: 12px 0; }
  .photo-stage-inner { padding: 0 12px; }
}
@media (max-width: 960px) {
  .photo-layout .photo-info { padding: 0 4px; }
  .photo-layout .video-info-cta { margin-top: 12px; }
}

/* Hide niche/category tag list on /photo/ pages: the side panel collides with the gallery viewer. */
.photo-niches { display: none; }

/* 18+ entry gate (homepage). Shown on first visit; JS hides it after the
   visitor confirms and stores consent in localStorage. */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(ellipse at center, rgba(255, 59, 126, .14) 0%, rgba(6, 2, 5, .97) 60%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow-y: auto;
}
.age-gate.is-hidden { display: none !important; }
.age-gate-card {
  width: 100%;
  max-width: 520px;
  background: linear-gradient(180deg, #181818 0%, #121212 100%);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 36px 30px 26px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.age-gate-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 6px 14px;
  background: var(--cta-grad);
  color: #fff;
  border-radius: 999px;
  margin-bottom: 18px;
}
.age-gate-logo {
  display: flex;
  justify-content: center;
  margin: 10px 0 14px;
}
.age-gate-title {
  font-size: clamp(15px, 1.8vw, 18px);
  font-weight: 800;
  letter-spacing: -.005em;
  line-height: 1.3;
  margin: 0 0 14px;
  color: #fff;
}
.age-gate-desc {
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 0 0 22px;
  text-align: left;
  max-height: 22vh;
  overflow-y: auto;
  padding: 10px 14px 10px 12px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 8px;
  background: rgba(0, 0, 0, .25);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .25) transparent;
}
.age-gate-desc p { margin: 0 0 12px; }
.age-gate-desc p:last-child { margin-bottom: 0; }
.age-gate-desc::-webkit-scrollbar { width: 8px; }
.age-gate-desc::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22);
  border-radius: 4px;
}
/* Confirm button: green hover on desktop pointers, mirroring the promo
   bar CTA so the "yes I'm 18+" path reads as the safe / go action. */
.age-gate-confirm { transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
@media (hover: hover) and (pointer: fine) {
  .age-gate-confirm:hover {
    background: linear-gradient(95deg, #2ecc71 0%, #1f9d52 100%);
    box-shadow: 0 12px 28px rgba(46, 204, 113, .45);
    transform: translateY(-1px);
  }
}
.age-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.age-gate-confirm {
  width: 100%;
  justify-content: center;
}
.age-gate-leave {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 6px;
  text-decoration: none;
  transition: color .15s ease;
}
.age-gate-leave:hover { color: #fff; }
.age-gate-fine {
  margin: 18px 0 0;
  font-size: 11px;
  color: var(--text-mute);
  letter-spacing: .04em;
}