* { box-sizing: border-box; }
:root {
  color-scheme: dark;
  --page-bg: #08090d;
  --page-gradient: radial-gradient(ellipse at top, #15202b 0%, #090b11 55%, #050609 100%);
  --profile-background: #08090d;
  --accent-secondary: #1b4542;
  --card: #101319;
  --hero-shade: linear-gradient(180deg, rgba(0,0,0,.02) 20%, rgba(0,0,0,.12) 42%, rgba(0,0,0,.78) 76%, #08090d 100%);
  --accent-gradient: linear-gradient(135deg, #81d8d0, #20a9e8);
  --body-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --name-font: inherit;
  --name-font-weight: 700;
  --name-font-size: inherit;
  --text: #fff;
  --muted: rgba(255,255,255,.72);
  --accent: #20a9e8;
}
html { min-height: 100%; background: #10131a; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--page-gradient);
  color: var(--text);
  font-family: var(--body-font);
}
a { color: inherit; }
.page-shell { width: 100%; max-width: 780px; margin: 0 auto; padding: 0; }
.profile {
  position: relative; overflow: hidden; min-height: 100vh;
  background: transparent; border-radius: 0; box-shadow: none; padding-bottom: 20px;
}
.hero {
  min-height: 500px; height: min(76svh, 720px); max-height: 720px;
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  background: transparent;
  isolation: isolate;
}
.hero-image {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%;
  image-rendering: auto;
}
.hero-of-badge {
  position: absolute; top: 18px; left: 18px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px 8px 9px; border-radius: 999px;
  background: rgba(0, 175, 240, .96); color: #fff;
  font-size: .85rem; font-weight: 800; letter-spacing: -.02em;
  box-shadow: 0 4px 18px rgba(0,0,0,.3);
}
.hero-of-mark {
  display: grid; place-items: center; width: 25px; height: 25px;
  border: 2px solid #fff; border-radius: 50%;
  font-size: .66rem; font-weight: 900; letter-spacing: -.08em;
}
.hero-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,.02) 0%,
    rgba(0,0,0,.04) 48%,
    color-mix(in srgb, var(--profile-background) 32%, transparent) 72%,
    var(--profile-background) 100%);
}
.identity {
  position: relative; z-index: 1; width: 100%; padding: 0 18px 28px;
  text-align: center;
}
h1 { margin: 0; font-family: var(--name-font); font-size: var(--name-font-size, clamp(2.2rem, 8vw, 3.35rem)); line-height: 1.08; font-weight: var(--name-font-weight, 850); letter-spacing: -.025em; }
/* Instagram-style scalloped verification badge */
.verified {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  margin-left: 7px;
  background: #1877F2;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  clip-path: polygon(
    50% 0%, 62% 7%, 76% 4%, 83% 17%,
    96% 24%, 93% 38%, 100% 50%,
    93% 62%, 96% 76%, 83% 83%,
    76% 96%, 62% 93%, 50% 100%,
    38% 93%, 24% 96%, 17% 83%,
    4% 76%, 7% 62%, 0% 50%,
    7% 38%, 4% 24%, 17% 17%,
    24% 4%, 38% 7%
  );
  vertical-align: middle;
}
#verified[hidden] { display: none; }
#username { margin: 9px 0 24px; color: var(--muted); font-size: 1.15rem; }
.social-links { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 5vw, 34px); margin: 0 auto 25px; }
.social-link {
  display: inline-grid; place-items: center; width: 42px; height: 42px;
  color: white; text-decoration: none; opacity: .96; transition: transform .18s ease, opacity .18s ease;
}
.social-link:hover { transform: translateY(-4px) scale(1.08); opacity: .78; }
.social-link svg { width: 100%; height: 100%; fill: currentColor; }
.social-link .stroke { fill: none; stroke: currentColor; stroke-width: 2.2; }
.status-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.status-pill {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  padding: 0 17px; background: color-mix(in srgb, var(--card) 82%, transparent); backdrop-filter: blur(12px);
  font-size: .96rem; font-weight: 650; color: rgba(255,255,255,.88);
}
.status-pill.online { border-color: color-mix(in srgb, var(--accent) 65%, transparent); }
.status-pill.online i { width: 9px; height: 9px; background: #25d37d; border-radius: 50%; box-shadow: 0 0 10px #25d37d88; }
.status-pill.offline i { background: #9299a3; box-shadow: none; }
.clock { font-size: 1.2rem; }
.tagline { margin: 0; padding: 13px 16px 17px; text-align: center; font-size: clamp(1rem, 3.6vw, 1.4rem); font-weight: 550; }
.featured-card {
  display: block; position: relative; overflow: hidden; margin: 0 0 22px;
  border-radius: 0; background: transparent;
  text-decoration: none; isolation: isolate;
}
.featured-card::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.62)); z-index: 0; }
.featured-card img#featured-image {
  width: 100%; height: auto; max-height: none;
  object-fit: contain; object-position: center; display: block;
  background: transparent;
}
.featured-card:hover img { transform: none; }
.featured-title { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 23px; text-align: center; font-size: clamp(1.25rem, 4vw, 1.8rem); font-weight: 800; text-shadow: 0 2px 10px #0009; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 0 0 12px; }
.gallery-item {
  display: grid; place-items: center; overflow: hidden; aspect-ratio: 3 / 4;
  border-radius: 12px; background: transparent;
}
.gallery-item img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  object-position: center;
}
.gallery-item:hover img { transform: none; }
.footer { padding: 25px 12px 0; text-align: center; color: rgba(255,255,255,.4); font-size: .78rem; }
@media (max-width: 520px) {
  .page-shell { padding: 0; }
  .profile { border-radius: 0; }
  .hero { min-height: 390px; height: 52svh; max-height: 490px; }
  .hero-image { object-position: center 32%; }
  .identity { padding: 0 14px 18px; }
  h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
  #username { margin: 6px 0 15px; font-size: 1rem; }
  .social-links { gap: 20px; margin-bottom: 15px; }
  .social-link { width: 35px; height: 35px; }
  .status-row { gap: 7px; }
  .status-pill { min-height: 36px; padding: 0 11px; font-size: .78rem; }
  .hero-of-badge { top: 12px; left: 12px; }
  .featured-card { margin: 0 0 18px; border-radius: 0; }
  .featured-title { bottom: 16px; font-size: 1.2rem; }
  .gallery { gap: 6px; padding-left: 0; padding-right: 0; }
  .gallery-item { border-radius: 6px; }
  .promo-card { margin: 0 12px 18px; border-radius: 16px; }
  .promo-inner { padding: 13px 12px; border-radius: 15px; }
  .promo-description { margin: 5px 0 10px; font-size: .8rem; }
  .promo-countdown { gap: 5px; }
  .promo-time { padding: 8px 2px 7px; border-radius: 9px; }
  .promo-time strong { font-size: 1.25rem; }
  .promo-time span { font-size: .54rem; }
  .promo-ends { margin-top: 8px; font-size: .68rem; }
  .promo-link { min-height: 37px; margin-top: 10px; padding: 0 16px; font-size: .8rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

.featured-card {
  position: relative;
}



/* OnlyFans icon badge: independent of the featured photo dimensions */
#featured-platform.platform-bubble {
  position: absolute !important;
  top: 15px !important;
  left: 15px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5 !important;

  display: block !important;
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  max-height: 42px !important;

  box-sizing: border-box !important;
  padding: 7px !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32) !important;
  pointer-events: none;
}


/* Use the real OnlyFans logo asset in the social icon row */
.social-link .social-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/* Per-model typography and theme are configured in model.json. */
#model-name { font-family: var(--name-font); font-weight: var(--name-font-weight, 700); font-size: var(--name-font-size, inherit); }
.status-pill { border-color: color-mix(in srgb, var(--accent) 24%, transparent); }
.tagline { color: var(--text); }
.featured-card, .gallery-item { background: var(--card); }


/* Subtle photo motion: polished on desktop, gentle on touch screens. */
.hero-image {
  animation: hero-photo-arrive 1.15s ease-out both;
}
.featured-card img#featured-image,
.gallery-item img {
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .55s ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .featured-card:hover img#featured-image { transform: scale(1.025); }
  .gallery-item:hover img { transform: scale(1.055); }
  .gallery-item:hover { box-shadow: 0 10px 28px rgba(0,0,0,.22); }
}
@keyframes hero-photo-arrive {
  from { opacity: 0; transform: scale(1.025); }
  to { opacity: 1; transform: scale(1); }
}

/* Theme-aware 18+ confirmation dialog. */
.age-gate {
  width: min( calc(100% - 32px), 420px );
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 36%, rgba(255,255,255,.18));
  border-radius: 24px;
  color: var(--text);
  background: var(--card);
  box-shadow: 0 24px 90px rgba(0,0,0,.55);
}
.age-gate::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(7px); }
.age-gate-content { padding: 30px 26px 24px; text-align: center; }
.age-gate-mark {
  display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 50%; background: var(--accent-gradient); color: #081012;
  font-size: 1.05rem; font-weight: 900; letter-spacing: -.04em;
}
.age-gate-eyebrow { margin: 0 0 9px; color: var(--accent); font-size: .7rem; font-weight: 800; letter-spacing: .15em; }
.age-gate h2 { margin: 0; font-size: clamp(1.35rem, 5vw, 1.7rem); line-height: 1.2; }
.age-gate-content > p:not(.age-gate-eyebrow):not(.age-gate-note) { margin: 12px 0 22px; color: var(--muted); line-height: 1.55; }
.age-gate-actions { display: grid; gap: 10px; }
.age-gate-actions button {
  min-height: 48px; border: 0; border-radius: 999px; padding: 0 18px;
  font: inherit; font-weight: 750; cursor: pointer;
}
.age-gate-yes { color: #081012; background: var(--accent-gradient); }
.age-gate-no { color: var(--text); background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14) !important; }
.age-gate-note { margin: 16px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) {
  .hero-image { animation: none; }
  .featured-card img#featured-image, .gallery-item img { transition: none; }
}


/* Optional model-specific promotion countdown. Hidden unless promo.enabled is true. */
.promo-card {
  margin: 0 5% 28px; padding: 1px; border-radius: 23px;
  background: var(--accent-gradient); box-shadow: 0 12px 34px rgba(0,0,0,.22);
  animation: promo-arrive .7s ease-out both;
}
.promo-card[hidden] { display: none !important; }
.promo-inner {
  padding: clamp(20px, 5vw, 28px); border-radius: 22px; text-align: center;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 16%, var(--card)) 0%, var(--card) 72%);
}
.promo-label { margin: 0 0 9px; color: var(--accent); font-size: .68rem; font-weight: 850; letter-spacing: .16em; }
.promo-title { margin: 0; color: var(--text); font-size: clamp(1.35rem, 5vw, 1.85rem); line-height: 1.2; }
.promo-description { margin: 9px 0 19px; color: var(--muted); font-size: .92rem; line-height: 1.5; }
.promo-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; max-width: 440px; margin: 0 auto; }
.promo-countdown[hidden] { display: none !important; }
.promo-time { display: grid; gap: 5px; padding: 12px 5px 10px; border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent); border-radius: 13px; background: color-mix(in srgb, var(--accent) 9%, var(--profile-background)); }
.promo-time strong { color: var(--text); font-size: clamp(1.35rem, 5vw, 1.9rem); line-height: 1; font-variant-numeric: tabular-nums; }
.promo-time span { color: var(--muted); font-size: .62rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.promo-ends { margin: 14px 0 0; color: var(--muted); font-size: .75rem; }
.promo-link { display: inline-flex; justify-content: center; align-items: center; min-height: 43px; margin-top: 18px; padding: 0 22px; border-radius: 999px; color: #071110; background: var(--accent-gradient); font-weight: 800; text-decoration: none; transition: transform .2s ease, filter .2s ease; }
.promo-link[hidden] { display: none !important; }
.promo-link:hover { transform: translateY(-2px); filter: brightness(1.06); }
@keyframes promo-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 520px) { .promo-card { margin-left: 5%; margin-right: 5%; border-radius: 20px; } .promo-inner { border-radius: 19px; } .promo-countdown { gap: 6px; } .promo-time { padding: 11px 3px 9px; } }
@media (prefers-reduced-motion: reduce) { .promo-card { animation: none; } .promo-link { transition: none; } }


/* V10: edge-to-edge responsive photos with the model's theme behind every section. */
html, body { background: var(--page-gradient); }
.profile { background: transparent; }
.hero { background: transparent; }
.featured-card, .gallery-item { background: transparent; }
.featured-card::after {
  background: linear-gradient(transparent 58%, rgba(0,0,0,.42));
}
@media (min-width: 521px) {
  .featured-card { margin-left: 0; margin-right: 0; }
  .gallery { padding-left: 0; padding-right: 0; }
}


/* V11: centered single-column presentation on every screen size.
   Photography stays at its natural aspect ratio; theme accents are reserved for promo and age gate. */
html, body {
  background: #000 !important;
}
body {
  background-image: none !important;
}
.page-shell {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0;
}
.profile {
  width: 100%;
  min-height: 100vh;
  background: #000 !important;
  box-shadow: none;
}
.hero {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  position: relative;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}
.hero-image {
  position: relative;
  inset: auto;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  max-height: min(78svh, 760px);
  object-fit: contain;
  object-position: center top;
  background: transparent;
}
/* A soft fade at the bottom makes the hero flow into the next black section. */
.hero-shade {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  height: 44%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.12) 35%,
    rgba(0,0,0,.62) 76%,
    #000 100%
  ) !important;
}
.identity {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 16px 20px;
  text-align: center;
  background: transparent;
}
.tagline {
  padding: 12px 14px 16px;
  color: var(--text);
}
.featured-card {
  width: 100%;
  margin: 0 0 18px;
  border-radius: 0;
  background: #000 !important;
}
.featured-card img#featured-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
  background: transparent !important;
}
.gallery {
  padding-left: 0;
  padding-right: 0;
}
.gallery-item {
  border-radius: 0;
  background: #000 !important;
}
.status-pill {
  border-color: rgba(255,255,255,.18) !important;
  background: rgba(20,20,20,.72) !important;
}
.status-pill.online { border-color: rgba(37,211,125,.45) !important; }
.promo-card {
  margin-left: 12px;
  margin-right: 12px;
}
@media (max-width: 520px) {
  .page-shell { max-width: 480px; }
  .hero-image { max-height: 78svh; }
  .identity { padding: 0 13px 16px; }
  .featured-card { margin-bottom: 16px; }
}

/* Featured image: landscape frame with rounded corners */
/* Featured image: full landscape frame */
.featured-card {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  position: relative;
  border-radius: 16px;
  background: #000;
}

.featured-card img#featured-image {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  transform: scale(1.05);
  border-radius: 16px;
}

/* Gallery images: rounded corners */
.gallery-item {
  overflow: hidden;
  border-radius: 14px !important;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 14px;
}


/* Compact promo card */
.promo-card {
  margin: 0 12px 16px !important;
  border-radius: 14px !important;
}

.promo-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label label"
    "title title"
    "description description"
    "countdown cta"
    "ends ends";
  align-items: center;
  gap: 5px 12px;
  padding: 13px 14px !important;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 14px !important;
  text-align: left;
  background: linear-gradient(
    115deg,
    color-mix(in srgb, var(--accent) 13%, #101010),
    #101010 72%
  ) !important;
}

.promo-label {
  grid-area: label;
  margin: 0 !important;
  font-size: .59rem !important;
}

.promo-title {
  grid-area: title;
  font-size: 1.05rem !important;
}

.promo-description {
  grid-area: description;
  margin: 0 0 3px !important;
  font-size: .76rem !important;
}

.promo-countdown {
  grid-area: countdown;
  max-width: 230px !important;
  margin: 0 !important;
  gap: 4px !important;
}

.promo-time {
  padding: 7px 2px 6px !important;
  border-radius: 8px !important;
}

.promo-time strong {
  font-size: 1.05rem !important;
}

.promo-time span {
  font-size: .49rem !important;
}

.promo-link {
  grid-area: cta;
  justify-self: end;
  min-height: 35px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  font-size: .68rem !important;
}

.promo-ends {
  grid-area: ends;
  margin: 1px 0 0 !important;
  font-size: .62rem !important;
}

@media (max-width: 380px) {
  .promo-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "title"
      "description"
      "countdown"
      "cta"
      "ends";
  }

  .promo-countdown {
    max-width: none !important;
  }

  .promo-link {
    width: 100%;
    justify-self: stretch;
  }
}


/* V12: Refined hero image sizing and seamless blending */

/* Keep the hero image edge-to-edge with no visible border */
.hero {
  width: 100%;
  overflow: hidden;
  background: #000 !important;
}

/* Blend the sides and bottom naturally into the page */
.hero-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  height: auto !important;
  pointer-events: none;

  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 45%,
      rgba(0,0,0,.18) 65%,
      rgba(0,0,0,.65) 85%,
      #000 100%
    ),
    linear-gradient(
      to right,
      #000 0%,
      transparent 9%,
      transparent 91%,
      #000 100%
    ) !important;
}

/* Slightly tighter spacing below the hero */
.tagline {
  padding: 8px 12px 11px;
}

/* MOBILE ADJUSTMENTS */
@media (max-width: 520px) {

  /* Shorter hero so more of the page is visible */
  .hero {
    height: min(68svh, 560px) !important;
    min-height: 0 !important;
    max-height: 560px !important;
    position: relative;
    margin: 0;
    padding: 0;
  }

  /* Fill the mobile hero without stretching the photo */
  .hero-image {
    position: absolute !important;
    inset: 0 !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center 25% !important;
    background: transparent !important;
  }

  /* Keep the model details over the bottom of the photo */
  .identity {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0 12px 13px !important;
    z-index: 2;
  }

  /* Bring featured content closer */
  .tagline {
    padding: 7px 12px 9px !important;
    margin: 0 !important;
  }

  .featured-card {
    margin-top: 0 !important;
    margin-bottom: 12px !important;
  }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .hero-image {
    animation: none !important;
  }
}