/* Cuckold Dating global.css (build 2026-10-19, design system reused from 3Threesomes). Served root-absolute as /global.css.
   Rules: no overlay, scrim, gradient or brightness filter on any photo; text-shadow only.
   Face-safe crops: object-position center top on every cover image.
   CSS-only checkbox hamburger (no JS) below 1240px. Header is position:relative below 1240px, sticky only at 1240px and up. .site-cta hidden under 1024px. */
:root {
  --color-bg: #faf7f8;
  --color-surface: #ffffff;
  --color-surface-soft: #f5ecef;
  --color-text: #1c1418;
  --color-text-soft: #5a4d53;
  --color-primary: #a8123d;
  --color-primary-dark: #6e0b28;
  --color-primary-light: #f7d6df;
  --color-accent: #d99a2b;
  --color-navy: #1a0f14;
  --color-header: #120a0e;
  --color-header-fg: #f4ecef;
  --font-heading: "Poppins", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --radius-sm: .5rem; --radius-md: .875rem; --radius-lg: 1.25rem; --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(17,24,39,.12);
  --shadow-md: 0 4px 14px rgba(17,24,39,.08);
  --container-max: 72rem;
  --header-h: 4.5rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-primary-dark); text-underline-offset: 2px; }
a:hover, a:focus-visible { color: var(--color-primary); }
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-heading); line-height: 1.2; color: var(--color-text); }
h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); margin: 0 0 .75rem; }
h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); margin: 2.4rem 0 .8rem; }
h3 { font-size: 1.2rem; margin: 1.6rem 0 .5rem; }
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 1.25rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons. Primary: solid brand, white text. Ghost on light surfaces: dark text, dark border. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.9rem; padding: .7rem 1.5rem; border-radius: var(--radius-pill); font-family: var(--font-heading); font-weight: 700; font-size: 1rem; text-decoration: none; border: 2px solid transparent; line-height: 1.1; cursor: pointer; }
.btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.btn-ghost { background: transparent; color: var(--color-text); border-color: var(--color-navy); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--color-navy); color: #fff; }
.btn-light { background: #fff; color: var(--color-primary-dark); border-color: #fff; }
.btn-light:hover, .btn-light:focus-visible { background: var(--color-primary-light); color: var(--color-navy); }
.btn-sm { min-height: 2.4rem; padding: .45rem 1.1rem; font-size: .92rem; }
.btn-lg { min-height: 3.3rem; padding: .85rem 2.1rem; font-size: 1.12rem; }

/* Header (gate 13): relative + solid + overflow visible on mobile; no transform, no backdrop-filter. */
.site-header { position: relative; z-index: 100; background: var(--color-header); color: var(--color-header-fg); border-bottom: 1px solid #2a1b22; overflow: visible; }
.site-header .btn-ghost { color: var(--color-header-fg); border-color: var(--color-header-fg); }
.site-header .btn-ghost:hover, .site-header .btn-ghost:focus-visible { background: var(--color-header-fg); color: var(--color-header); }
.site-header-row { display: flex; align-items: center; gap: 1rem; min-height: var(--header-h); }
.site-logo { display: inline-flex; align-items: center; min-width: 0; flex: 0 1 auto; }
.site-logo img { height: 2.6rem; width: auto; max-width: min(11rem, 52vw); object-fit: contain; object-position: left center; }
@media (min-width: 1240px) { .site-logo { flex: 0 0 auto; } }
.nav-toggle-input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 2.9rem; height: 2.9rem; margin-left: auto; padding: .5rem; cursor: pointer; z-index: 1002; position: relative; flex-shrink: 0; border-radius: var(--radius-sm); }
.nav-toggle-bar { display: block; width: 1.45rem; height: 2px; background: var(--color-header-fg); transition: transform .18s ease, opacity .18s ease; }
.nav-toggle-input:checked ~ .nav-toggle .nav-toggle-bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.nav-toggle-input:checked ~ .nav-toggle .nav-toggle-bar:nth-child(3) { opacity: 0; }
.nav-toggle-input:checked ~ .nav-toggle .nav-toggle-bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle-input:focus-visible ~ .nav-toggle { outline: 3px solid var(--color-primary); }
.site-cta { display: none; }
/* Mobile drawer: fixed, full viewport height, solid background, above everything. */
.site-nav { position: fixed; top: 0; right: 0; bottom: 0; height: 100vh; height: 100dvh; width: min(22rem, 86vw); background: var(--color-header); box-shadow: -8px 0 24px rgba(17,24,39,.18); padding: 5rem 1.5rem 2rem; overflow-y: auto; z-index: 1001; visibility: hidden; right: -100vw; }
.nav-toggle-input:checked ~ .site-nav { visibility: visible; right: 0; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.nav-list a { display: block; padding: .7rem .25rem; color: var(--color-header-fg); font-weight: 600; text-decoration: none; border-bottom: 1px solid #33232b; }
.nav-list a:hover, .nav-list a:focus-visible { color: #fff; }
.nav-list a[aria-current="page"] { color: #ff8fb0; }
.nav-drawer-cta { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.25rem; }
@media (min-width: 1024px) {
  .site-cta { display: inline-flex; gap: .5rem; flex-shrink: 0; }
  .nav-toggle { margin-left: 0; order: 3; }
  .site-cta { margin-left: auto; }
}
@media (min-width: 1240px) {
  .site-header { position: sticky; top: 0; }
  .header-wide { max-width: 80rem; }
  .site-cta { margin-left: 0; }
  .nav-toggle { display: none; }
  .site-nav { position: static; height: auto; width: auto; padding: 0; box-shadow: none; overflow: visible; visibility: visible; background: transparent; margin-left: auto; }
  .nav-list { flex-direction: row; align-items: center; gap: .8rem; }
  .site-nav { margin-right: .4rem; }
  .nav-list a { padding: .35rem 0; border-bottom: 2px solid transparent; font-size: .88rem; white-space: nowrap; }
  .nav-list a:hover, .nav-list a[aria-current="page"] { border-bottom-color: #ff8fb0; }
  .nav-drawer-cta { display: none; }
  .site-cta { display: inline-flex; gap: .5rem; flex-shrink: 0; }
}

/* Homepage hero: split layout, photo at full brightness, nothing laid over it. */
.hero { background: #0d0709; color: #fff; }
.hero-grid { display: grid; grid-template-columns: 1fr; }
.hero-photo { margin: 0; min-height: 22rem; }
.hero-photo img { width: 100%; height: 100%; min-height: 22rem; max-height: 34rem; object-fit: cover; object-position: center top; }
.hero-panel { padding: 2rem 1.25rem 2.4rem; display: flex; flex-direction: column; justify-content: center; }
.hero-panel h1 { color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.hero-soft { font-size: 1.2rem; margin: 0 0 1.5rem; color: #f6e9ee; text-shadow: 0 1px 6px rgba(0,0,0,.3); }
.hero-actions { display: flex; }
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 38fr 62fr; min-height: 32rem; }
  .hero-panel { order: 0; padding: 3rem 1.75rem 3rem max(1.25rem, calc((100vw - var(--container-max)) / 2 + 1.25rem)); }
  .hero-photo { order: 1; }
  .hero-photo img { max-height: 40rem; min-height: 32rem; }
}

/* Interior page head: solid band + photo figure. */
.page-head { background: var(--color-surface-soft); padding: 2.2rem 0 1.6rem; }
.page-head .lead { font-size: 1.15rem; color: var(--color-text-soft); margin: 0; max-width: 46rem; }
.page-figure { margin: .5rem 0 0; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); background: #e9dde2; }
.page-figure img { width: 100%; aspect-ratio: 1 / 1; max-height: 34rem; height: auto; object-fit: cover; object-position: center top; }
.page-head-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) {
  .page-head-grid { grid-template-columns: minmax(0, 1fr) 22rem; gap: 2.5rem; }
  .page-figure { margin: 0; }
  .page-figure img { aspect-ratio: 4 / 5; }
  .page-head-grid.has-wide { grid-template-columns: minmax(0, 1fr) 32rem; }
}
.page-figure.is-square { max-width: 17.25rem; }
.page-figure.is-square img { aspect-ratio: 1 / 1; max-height: none; }
@media (min-width: 900px) { .page-head-grid.has-square { grid-template-columns: minmax(0, 1fr) 17.25rem; } .page-figure.is-square img { aspect-ratio: 1 / 1; } }
.breadcrumbs { font-size: .9rem; margin: 0 0 .8rem; color: var(--color-text-soft); }
.breadcrumbs a { color: var(--color-text-soft); }

/* Body copy */
.content { padding: 1.5rem 0 1rem; }
.prose { max-width: 46rem; }
.prose p, .prose li { color: var(--color-text); }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li { margin: .35rem 0; }
.prose blockquote { margin: 1.4rem 0; padding: .9rem 1.2rem; border-left: 4px solid var(--color-primary); background: var(--color-surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.table-wrap { overflow-x: auto; margin: 1.4rem 0; -webkit-overflow-scrolling: touch; }
.table-wrap table { border-collapse: collapse; width: 100%; min-width: 34rem; background: var(--color-surface); font-size: .97rem; }
.table-wrap th, .table-wrap td { border: 1px solid #e6d9de; padding: .6rem .75rem; text-align: left; vertical-align: top; }
.table-wrap th { background: var(--color-surface-soft); font-family: var(--font-heading); }
.faq h3 { margin-top: 1.4rem; }

/* Reviews band: exactly the four reviews Sebastian approved. */
.reviews-band { background: var(--color-surface); padding: 1.6rem 0; border-bottom: 1px solid #eadde2; }
.reviews-band h2 { margin: 0 0 1rem; font-size: 1.3rem; }
.reviews-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .reviews-grid { grid-template-columns: repeat(4, 1fr); } }
.review-card { margin: 0; padding: 1.1rem 1.25rem; background: var(--color-bg); border-radius: var(--radius-md); border: 1px solid #eadde2; }
.review-stars { color: var(--color-accent); font-size: 1.15rem; letter-spacing: .1em; margin: 0 0 .3rem; }
.review-card blockquote { margin: 0 0 .4rem; font-size: 1.1rem; font-weight: 600; }
.review-card figcaption { color: var(--color-text-soft); font-size: .95rem; }

/* Members gallery: 2 columns under 700px, 4 from 700px. */
.members-gallery { padding: 2rem 0; background: var(--color-bg); }
.members-gallery h2 { margin: 0 0 .4rem; }
.members-gallery .gallery-intro { margin: 0 0 1.2rem; color: var(--color-text-soft); }
.members-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .members-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; } }
.member-card a { display: block; text-decoration: none; color: var(--color-text); background: var(--color-surface); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.member-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; }
/* Member photo blur (HARD, Sebastian 2026-10-19): gallery member photos are ALWAYS blurred so faces are not recognisable.
   Scoped to .members-gallery only; the hero and every other photo stay unfiltered. .member-photo clips the blur edge. */
.members-gallery .member-card .member-photo { display: block; overflow: hidden; line-height: 0; }
.members-gallery .member-card img { display: block; filter: blur(12px); }
.members-gallery .member-card .member-photo img { transform: scale(1.12); }
.member-meta { padding: .55rem .7rem .7rem; font-size: .95rem; line-height: 1.35; }
.member-name { display: block; font-weight: 700; }
.member-city { display: block; color: var(--color-text-soft); font-size: .88rem; }
.gallery-cta { margin-top: 1.3rem; }

/* Post-content Signup Here band (gate 25) */
.cta-band { background: var(--color-primary-dark); color: #fff; padding: 2.4rem 0; margin-top: 2.5rem; text-align: center; }
.cta-band h2 { color: #fff; margin: 0 0 .5rem; }
.cta-band p { margin: 0 auto 1.3rem; max-width: 38rem; color: #f7e3ea; }

/* Footer + bottom disclaimer (gate 30) */
.site-footer { background: var(--color-navy); color: #e6d6dc; padding: 2.4rem 0 1.4rem; font-size: .95rem; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: repeat(3, 1fr); } }
.footer-grid h2 { color: #fff; font-size: 1rem; margin: 0 0 .6rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin: .3rem 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.18); margin-top: 1.8rem; padding-top: 1rem; }
.disclaimer { font-size: .88rem; color: #d9c4cc; margin: .5rem 0 0; }

/* Video (if ever used): responsive. */
.video-wrap video { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }