/* ============================================================
   JANDK92 Official Links — design tokens & hero controls
   Tweak visual atmosphere here first (CSS only).
   ============================================================ */
:root {
  /* Hero image path — do not edit the image file itself */
  --hero-image: url("assets/images/hero.webp");

  /*
    Background-position: X% Y%
    Desktop: keep silhouette centered against the horizon.
    Mobile: bias upward so hair/shoulders stay in frame.
  */
  --hero-position-desktop: 50% 42%;
  --hero-position-mobile: 52% 32%;

  /*
    --hero-overlay-darkness (0–1)
    Overall cinematic darkening of the photo.
    Raise toward 0.55–0.65 to make the background even darker later.
    Current ~0.52 ≈ mid 35–45% brightness reduction with layered gradients.
  */
  --hero-overlay-darkness: 0.52;

  /*
    --hero-vignette-strength (0–1)
    Edge / corner darkening so the photo reads as atmosphere, not the focus.
  */
  --hero-vignette-strength: 0.72;

  /*
    --panel-opacity (0–1)
    Solid charcoal content card opacity. Higher = less glass, more UI focus.
    Target range ~0.72–0.80.
  */
  --panel-opacity: 0.78;

  /*
    --panel-blur
    Subtle frosted separation only — keep modest (≈8–12px).
  */
  --panel-blur: 10px;

  /*
    --accent-color
    Warm champagne / muted gold used sparingly (eyebrow, links, accents).
  */
  --accent-color: #c9ae86;

  --bg-fallback: #07080a;
  --text: #f2efe9;
  --text-heading: #faf7f2;
  --text-muted: rgba(232, 226, 216, 0.68);
  --text-soft: rgba(200, 194, 184, 0.52);
  --accent: var(--accent-color);
  --accent-strong: #dfc49a;
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.16);
  --panel: rgba(15, 15, 18, var(--panel-opacity));
  --cta-bg-top: #e8d5b8;
  --cta-bg-bottom: #c9ae86;
  --cta-text: #1a140f;
  --cta-bg-hover-top: #f0e2c8;
  --cta-bg-hover-bottom: #d4ba92;
  --link-row-bg: rgba(255, 255, 255, 0.05);
  --link-row-bg-hover: rgba(255, 255, 255, 0.09);
  --focus-ring: #dfc49a;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-pill: 999px;
  --shadow-soft: 0 22px 60px rgba(0, 0, 0, 0.55);
  --shadow-cta: 0 12px 28px rgba(0, 0, 0, 0.42), 0 2px 0 rgba(255, 255, 255, 0.18) inset;
  --content-width: 26.5rem; /* ~424px */
  --space-xs: 0.4rem;
  --space-sm: 0.8rem;
  --space-md: 1.25rem;
  --space-lg: 1.85rem;
  --space-xl: 2.35rem;
  --transition: 180ms ease;
  --font: "Segoe UI", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg-fallback);
  -webkit-font-smoothing: antialiased;
}

body.page-home {
  display: block;
}

/* Full-viewport hero — atmospheric layers over the photo (image file untouched) */
.hero-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: var(--bg-fallback);
  background-image:
    /* Strong vignette: darker corners / edges */
    radial-gradient(
      ellipse 95% 85% at 50% 42%,
      transparent 12%,
      rgba(0, 0, 0, calc(var(--hero-vignette-strength) * 0.55)) 62%,
      rgba(0, 0, 0, calc(var(--hero-vignette-strength) * 0.92)) 100%
    ),
    /* Darker top corners */
    radial-gradient(
      ellipse 80% 55% at 0% 0%,
      rgba(0, 0, 0, calc(var(--hero-overlay-darkness) * 0.95)) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 80% 55% at 100% 0%,
      rgba(0, 0, 0, calc(var(--hero-overlay-darkness) * 0.95)) 0%,
      transparent 70%
    ),
    /* Darker bottom for UI separation */
    linear-gradient(
      180deg,
      transparent 35%,
      rgba(0, 0, 0, calc(var(--hero-overlay-darkness) * 0.55)) 72%,
      rgba(0, 0, 0, calc(var(--hero-overlay-darkness) * 0.88)) 100%
    ),
    /* Overall wash — tames sunset brightness while keeping silhouette readable */
    linear-gradient(
      180deg,
      rgba(6, 7, 10, calc(var(--hero-overlay-darkness) * 0.92)) 0%,
      rgba(6, 7, 10, calc(var(--hero-overlay-darkness) * 0.62)) 40%,
      rgba(6, 7, 10, calc(var(--hero-overlay-darkness) * 0.78)) 100%
    ),
    var(--hero-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: var(--hero-position-mobile);
}

@media (min-width: 768px) {
  .hero-bg {
    background-position: var(--hero-position-desktop);
  }
}

.shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:
    calc(1.25rem + var(--safe-top))
    calc(1.15rem + var(--safe-right))
    calc(1.25rem + var(--safe-bottom))
    calc(1.15rem + var(--safe-left));
}

.main {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: calc(var(--space-lg) + 0.15rem) calc(var(--space-md) + 0.15rem)
    calc(var(--space-lg) + 0.25rem);
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  -webkit-backdrop-filter: blur(var(--panel-blur));
  backdrop-filter: blur(var(--panel-blur));
}

.intro {
  text-align: center;
  margin-bottom: calc(var(--space-lg) + 0.15rem);
}

.eyebrow {
  margin: 0 0 var(--space-sm);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.brand-heading {
  margin: 0 0 var(--space-sm);
  font-size: clamp(2.15rem, 8vw, 2.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.05;
  color: var(--text-heading);
}

.hero-intro {
  margin: 0 auto;
  max-width: 22rem;
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.55;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: calc(1rem + var(--safe-left));
  z-index: 1000;
  padding: 0.75rem 1rem;
  background: var(--bg-fallback);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: calc(0.75rem + var(--safe-top));
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--accent-strong);
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* Platform links */
.platform-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.platform-list > li {
  margin: 0;
}

.platform-link {
  display: block;
  text-decoration: none;
  color: var(--text);
  min-height: 44px;
  padding: 0.85rem 1rem;
  background: var(--link-row-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition:
    background var(--transition),
    border-color var(--transition),
    transform var(--transition),
    color var(--transition);
}

.platform-link:hover {
  background: var(--link-row-bg-hover);
  border-color: var(--border-strong);
  color: var(--text);
}

.platform-link:active {
  transform: translateY(1px);
}

.platform-link__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.platform-link__icon {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent);
  opacity: 0.85;
}

.platform-link__text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  text-align: left;
}

.platform-link__name {
  font-size: 0.98rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.platform-link__desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 400;
}

.platform-link__chevron {
  flex-shrink: 0;
  width: 0.95rem;
  height: 0.95rem;
  color: var(--text-soft);
}

/* Primary OnlyFans CTA — rich champagne gold, restrained */
.platform-link--featured {
  min-height: 56px;
  padding: 1.1rem 1.2rem;
  background: linear-gradient(180deg, var(--cta-bg-top) 0%, var(--cta-bg-bottom) 100%);
  color: var(--cta-text);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: var(--shadow-cta);
}

.platform-link--featured:hover {
  background: linear-gradient(180deg, var(--cta-bg-hover-top) 0%, var(--cta-bg-hover-bottom) 100%);
  color: var(--cta-text);
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-1px);
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.48),
    0 2px 0 rgba(255, 255, 255, 0.22) inset;
}

.platform-link--featured:active {
  transform: translateY(0);
}

.platform-link--featured .platform-link__name {
  font-size: 1.08rem;
  font-weight: 700;
}

.platform-link--featured .platform-link__desc {
  color: rgba(26, 20, 15, 0.72);
}

.platform-link--featured .platform-link__icon,
.platform-link--featured .platform-link__chevron {
  color: rgba(26, 20, 15, 0.75);
}

.platform-link__badge {
  display: none; /* reserved; not used in this layout */
}

.age-note {
  margin: var(--space-md) 0 0;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-soft);
}

.site-footer {
  width: 100%;
  max-width: var(--content-width);
  margin: var(--space-md) auto 0;
  text-align: center;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: 0.35rem;
}

.footer-nav a,
.footer-btn {
  font-size: 0.88rem;
  color: var(--text-muted);
  background: none;
  border: none;
  padding: 0.5rem 0.25rem;
  min-height: 44px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer-nav a:hover,
.footer-btn:hover {
  color: var(--accent);
}

.copyright {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-soft);
}

/* Consent banner */
.consent-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: calc(1rem + var(--safe-bottom)) 1rem 1rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.55) 35%);
  pointer-events: none;
}

.consent-banner__inner {
  pointer-events: auto;
  max-width: 26.5rem;
  margin: 0 auto;
  padding: var(--space-md);
  background: #141820;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.consent-banner__title {
  margin: 0 0 var(--space-xs);
  font-size: 1.05rem;
  font-weight: 650;
}

.consent-banner__text {
  margin: 0 0 var(--space-md);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.consent-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.btn {
  flex: 1 1 auto;
  min-height: 44px;
  min-width: 8rem;
  padding: 0.65rem 1rem;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.btn--primary {
  background: var(--accent);
  color: #1a140c;
  border-color: var(--accent);
}

.btn--primary:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.btn--secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.btn--secondary:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Inner pages (privacy, 404) — solid dark, no hero photo required */
body:not(.page-home) {
  background:
    radial-gradient(ellipse 100% 60% at 50% -10%, rgba(212, 184, 150, 0.08), transparent 50%),
    var(--bg-fallback);
}

body:not(.page-home) .site-header,
body:not(.page-home) .main,
body:not(.page-home) .site-footer {
  position: relative;
  z-index: 1;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.15rem;
  padding-right: 1.15rem;
}

body:not(.page-home) .site-header {
  padding-top: calc(1.25rem + var(--safe-top));
}

body:not(.page-home) .brand-mark {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-soft);
}

body:not(.page-home) .main {
  padding-top: var(--space-lg);
  padding-bottom: var(--space-xl);
  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

body:not(.page-home) .site-footer {
  padding-bottom: calc(2rem + var(--safe-bottom));
  text-align: center;
}

.page-content h1 {
  margin: 0 0 var(--space-md);
  font-size: clamp(1.75rem, 6vw, 2.25rem);
  letter-spacing: 0.04em;
}

.page-content h2 {
  margin: var(--space-lg) 0 var(--space-sm);
  font-size: 1.15rem;
  color: var(--accent);
  font-weight: 650;
}

.page-content p,
.page-content li {
  color: var(--text-muted);
}

.page-content ul {
  padding-left: 1.25rem;
  margin: 0 0 var(--space-md);
}

.page-content li {
  margin-bottom: 0.4rem;
}

.page-meta {
  font-size: 0.85rem;
  color: var(--text-soft);
  margin-bottom: var(--space-lg);
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-lg);
  font-weight: 600;
  text-decoration: none;
  color: var(--accent);
}

.back-link:hover {
  color: var(--accent-strong);
}

.error-code {
  display: block;
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: var(--space-sm);
}

@media (max-width: 360px) {
  .main {
    padding: var(--space-md) 0.9rem;
  }

  .brand-heading {
    letter-spacing: 0.03em;
  }

  .consent-banner__actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .shell {
    padding-top: calc(2rem + var(--safe-top));
    padding-bottom: calc(2rem + var(--safe-bottom));
  }

  .main {
    padding: calc(var(--space-xl) + 0.1rem) calc(var(--space-lg) + 0.1rem);
  }
}