/* ===========================================================
   HotMama4U — Design System
   Burgundy / Charcoal / Rose Gold · Cormorant Garamond serif
   Mobile-first. 70%+ traffic is mobile — design for the thumb.
   =========================================================== */

:root {
  /* Brand palette */
  --burgundy:    #6B1A2B;
  --burgundy-lt: #8E2438;
  --charcoal:    #1A1A1A;
  --charcoal-2:  #221c1e;   /* slightly warm raised surface */
  --rose-gold:   #E8A898;
  --ivory:       #F5EDE3;
  --ivory-dim:   #cdbfb2;
  --magenta:     #D4206B;   /* primary CTA */
  --magenta-lt:  #e84d8c;
  --line:        rgba(232,168,152,.16);
  --shadow:      0 18px 50px -20px rgba(0,0,0,.7);

  /* Type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Raleway", "Inter", system-ui, -apple-system, sans-serif;
  --body:  "Inter", system-ui, -apple-system, sans-serif;

  --wrap: 1140px;
  --radius: 14px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;          /* never below 16px on mobile */
  line-height: 1.6;
  color: var(--ivory);
  background: var(--charcoal);
  background-image:
    radial-gradient(1200px 600px at 80% -10%, rgba(107,26,43,.45), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(212,32,107,.10), transparent 55%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--rose-gold); text-decoration: none; }
a:hover { color: var(--magenta-lt); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: .2px;
  color: var(--ivory);
  margin: 0 0 .4em;
}
h1 { font-size: clamp(2.4rem, 7vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h3 { font-size: clamp(1.3rem, 3vw, 1.7rem); }

.eyebrow {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--rose-gold);
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.muted { color: var(--ivory-dim); }
.center { text-align: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5em;
  font-family: var(--sans); font-weight: 700;
  min-height: 52px; padding: 0 28px;
  border-radius: 999px; border: 0; cursor: pointer;
  font-size: 1.02rem; letter-spacing: .02em;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary {
  background: linear-gradient(135deg, var(--magenta), var(--magenta-lt));
  color: #fff;
  box-shadow: 0 10px 30px -8px rgba(212,32,107,.6);
}
.btn-primary:hover { transform: translateY(-2px); color:#fff; box-shadow: 0 16px 38px -8px rgba(212,32,107,.75); }
.btn-ghost {
  background: transparent; color: var(--ivory);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--rose-gold); color: var(--ivory); }
.btn-block { width: 100%; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(12px);
  background: rgba(20,16,17,.72);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.brand { font-family: var(--serif); font-size: 1.55rem; font-weight: 700; color: var(--ivory); letter-spacing: .5px; }
.brand b { color: var(--rose-gold); font-weight: 700; }
.brand .flame { color: var(--magenta); }
.nav { display: flex; gap: 26px; align-items: center; }
.nav a { font-family: var(--sans); font-weight: 600; font-size: .95rem; color: var(--ivory); }
.nav a:hover { color: var(--rose-gold); }
.nav .btn { min-height: 44px; padding: 0 20px; }
.nav-links { display: flex; gap: 26px; align-items: center; }
@media (max-width: 820px) { .nav-links { display: none; } }

/* ---------- Hero ---------- */
.hero { padding: clamp(48px, 9vw, 104px) 0 clamp(40px, 6vw, 72px); }
.hero .eyebrow { margin-bottom: 18px; }
.hero h1 { max-width: 14ch; }
.hero h1 em { color: var(--rose-gold); font-style: italic; }
.hero .sub { font-size: clamp(1.05rem, 2.4vw, 1.3rem); max-width: 46ch; margin: 18px 0 30px; color: var(--ivory-dim); }
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.trust-row {
  display: flex; gap: 20px; flex-wrap: wrap; margin-top: 26px;
  font-family: var(--sans); font-size: .86rem; color: var(--ivory-dim);
}
.trust-row span { display: inline-flex; align-items: center; gap: 7px; }
.trust-row svg { width: 16px; height: 16px; color: var(--rose-gold); }

/* ---------- Teaser grid ---------- */
.section { padding: clamp(50px, 8vw, 92px) 0; }
.section-head { max-width: 56ch; margin-bottom: 38px; }
.teaser-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .teaser-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .teaser-grid { grid-template-columns: 1fr 1fr; gap: 12px; } }

.teaser {
  position: relative; aspect-ratio: 3/4; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(160deg, var(--charcoal-2), #2a2023);
  display: grid; place-items: center;
}
.teaser .blur-fill {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(107,26,43,.55), rgba(212,32,107,.2)), var(--charcoal-2);
  filter: blur(2px);
}
.teaser .lock {
  position: relative; z-index: 2; text-align: center; color: var(--ivory);
  font-family: var(--sans); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
}
.teaser .lock svg { width: 26px; height: 26px; margin: 0 auto 8px; color: var(--rose-gold); }
.teaser .tag {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  background: rgba(20,16,17,.7); color: var(--rose-gold);
  font-family: var(--sans); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line);
}

/* ---------- Social proof ---------- */
.proof-strip {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  border-block: 1px solid var(--line); padding: 26px 0; text-align: center;
}
.proof-strip .stat { padding: 0 26px; }
.proof-strip .num { font-family: var(--serif); font-size: 2rem; color: var(--rose-gold); line-height: 1; }
.proof-strip .lbl { font-family: var(--sans); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ivory-dim); margin-top: 6px; }

/* ---------- Pricing ---------- */
.pricing { display: grid; gap: 20px; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
@media (max-width: 880px) { .pricing { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }

.plan {
  position: relative; background: linear-gradient(180deg, var(--charcoal-2), #1d1517);
  border: 1px solid var(--line); border-radius: 18px; padding: 30px 26px;
  display: flex; flex-direction: column;
}
.plan.featured { border-color: rgba(212,32,107,.55); box-shadow: var(--shadow); transform: scale(1.02); }
.plan .badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--magenta), var(--magenta-lt)); color: #fff;
  font-family: var(--sans); font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 999px; white-space: nowrap;
}
.plan .pname { font-family: var(--serif); font-size: 1.6rem; color: var(--ivory); }
.plan .price { font-family: var(--serif); font-size: 2.8rem; color: var(--rose-gold); margin: 8px 0 2px; }
.plan .price small { font-family: var(--sans); font-size: .95rem; color: var(--ivory-dim); }
.plan .pnote { font-family: var(--sans); font-size: .85rem; color: var(--ivory-dim); margin-bottom: 18px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 11px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; color: var(--ivory); }
.plan li svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 3px; color: var(--rose-gold); }
.plan .btn { margin-top: auto; }

/* ---------- Reviews / top sites ---------- */
.reviews { display: grid; gap: 14px; max-width: 860px; margin: 0 auto; }
.review {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center;
  background: linear-gradient(180deg, var(--charcoal-2), #1d1517);
  border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px;
}
.review:first-child { border-color: rgba(212,32,107,.5); box-shadow: var(--shadow); }
.review-rank { font-family: var(--serif); font-size: 2rem; color: var(--rose-gold); width: 2.4rem; text-align: center; }
.review-name { font-family: var(--serif); font-size: 1.4rem; color: var(--ivory); }
.review-stars { display: flex; align-items: center; gap: 3px; margin: 4px 0 6px; }
.review-stars svg { width: 15px; height: 15px; color: var(--rose-gold); }
.review-score { font-family: var(--sans); font-weight: 700; font-size: .85rem; color: var(--ivory-dim); margin-left: 8px; }
.review-blurb { font-size: .92rem; margin: 0; }
.review .btn { white-space: nowrap; }
@media (max-width: 640px) {
  .review { grid-template-columns: auto 1fr; gap: 10px 16px; }
  .review .btn { grid-column: 1 / -1; width: 100%; }
}

/* ---------- FAQ ---------- */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--line); padding: 18px 0;
}
.faq summary {
  cursor: pointer; list-style: none; font-family: var(--serif); font-size: 1.25rem; color: var(--ivory);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--rose-gold); font-size: 1.6rem; line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { color: var(--ivory-dim); margin: 12px 0 2px; }

/* ---------- CTA band ---------- */
.cta-band {
  text-align: center; padding: clamp(54px, 8vw, 96px) 0;
  background: linear-gradient(135deg, rgba(107,26,43,.55), rgba(212,32,107,.22));
  border-block: 1px solid var(--line);
}
.cta-band h2 { margin-bottom: 10px; }
.cta-band .sub { color: var(--ivory-dim); max-width: 44ch; margin: 0 auto 26px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 56px 0 40px; background: rgba(15,12,13,.6); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.15fr; gap: 36px; }
@media (max-width: 1040px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: 26px; } }
.site-footer .brand { display: block; margin-bottom: 12px; }
.footer-col h4 { font-family: var(--sans); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--rose-gold); margin-bottom: 14px; }
.footer-col a { display: block; color: var(--ivory-dim); font-size: .92rem; padding: 5px 0; }
.footer-col a:hover { color: var(--rose-gold); }
.compliance {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line);
  font-size: .8rem; color: var(--ivory-dim); line-height: 1.7;
}
.compliance .pay-icons { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0; opacity: .85; }
.compliance .pay-icons span {
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; color: var(--ivory-dim);
}

/* ---------- Age gate modal ---------- */
.age-gate {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(10,8,9,.86); backdrop-filter: blur(14px);
  display: grid; place-items: center; padding: 22px;
}
.age-gate[hidden] { display: none; }
.age-card {
  max-width: 440px; width: 100%; text-align: center;
  background: linear-gradient(180deg, var(--charcoal-2), #1c1416);
  border: 1px solid var(--line); border-radius: 20px; padding: 40px 30px;
  box-shadow: var(--shadow);
}
.age-card .brand { font-size: 1.9rem; display: block; margin-bottom: 18px; }
.age-card h2 { font-size: 1.7rem; }
.age-card p { color: var(--ivory-dim); font-size: .92rem; margin: 10px 0 26px; }
.age-card .btn { margin-bottom: 12px; }
.age-card .leave { display: block; margin-top: 6px; color: var(--ivory-dim); font-size: .86rem; }
.age-card .legal { font-size: .72rem; color: var(--ivory-dim); margin-top: 20px; line-height: 1.6; }

/* ---------- Cookie banner ---------- */
.cookie-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9000;
  background: rgba(28,20,22,.96); border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  box-shadow: var(--shadow); max-width: 720px; margin: 0 auto;
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { margin: 0; font-size: .85rem; color: var(--ivory-dim); flex: 1 1 280px; }
.cookie-bar .btn { min-height: 42px; padding: 0 18px; }

/* ---------- Generic page (privacy / terms / 2257) ---------- */
.page-body { max-width: 760px; margin: 0 auto; padding: clamp(40px,7vw,80px) 22px; }
.page-body h1 { font-size: clamp(2rem,5vw,3rem); margin-bottom: 6px; }
.page-body h2 { font-size: 1.5rem; margin-top: 2em; }
.page-body p, .page-body li { color: var(--ivory-dim); }
.page-body a { color: var(--rose-gold); text-decoration: underline; }

/* ---------- Utilities ---------- */
.lead { font-size: 1.15rem; color: var(--ivory-dim); }
.no-scroll { overflow: hidden; }

/* ---------- Logo images ---------- */
.site-header .wrap { height: 112px; }
.brand img { height: 82px; width: auto; display: block; }
.site-footer .brand img { height: 72px; margin-bottom: 14px; }
.age-card .brand-mark { width: 100%; max-width: 360px; height: auto; margin: 0 auto 20px; display: block; }
@media (max-width: 820px) {
  .site-header .wrap { height: 88px; }
  .brand img { height: 60px; }
}

/* ---------- Live cam tiles (partner API) ---------- */
/* Cam grids break out of the 1140px text column. A wall of rooms is the product
   here — three big cards in a narrow column left the dead space around them and
   showed a fraction of the inventory we actually have. */
.cam-grid, .cat-grid {
  width: min(1520px, 100vw - 44px);
  margin-left: 50%;
  transform: translateX(-50%);
  /* Fixed column counts, not auto-fill: every grid holds a multiple of 12
     tiles, so 6 / 4 / 3 / 2 columns all divide evenly and no row is ever left
     with a single stranded card. */
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
@media (max-width: 1239px) { .cam-grid, .cat-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 939px)  { .cam-grid, .cat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 679px)  { .cam-grid, .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

/* The thumbnail IS the tile. Source frames are 4:3, so the tile is 4:3 too —
   forcing them into the portrait teaser box cropped away half the picture and
   left the dead band that made the grid look cheap. */
.cam-tile {
  aspect-ratio: 4 / 3;
  display: block;
  background: #171213;
  transition: transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.cat-tile { display: block; }

.teaser .cam-thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.03);
  transition: transform .6s cubic-bezier(.2,.7,.3,1), filter .4s ease;
}
/* A scrim only where the caption sits, so the picture itself stays bright. */
.cam-tile::after, .cat-tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(10,7,8,.94) 0%, rgba(10,7,8,.55) 22%, rgba(10,7,8,0) 48%);
}
.cam-tile:hover, .cat-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(232,168,152,.55);
  box-shadow: 0 14px 34px rgba(0,0,0,.5), 0 0 0 1px rgba(232,168,152,.18);
}
.cam-tile:hover .cam-thumb, .cat-tile:hover .cam-thumb {
  transform: scale(1.09); filter: saturate(1.06) contrast(1.02);
}

.cam-meta {
  position: absolute; left: 13px; right: 13px; bottom: 11px; z-index: 3;
  display: flex; flex-direction: column; gap: 1px;
  font-family: var(--sans); color: var(--ivory);
}
.cam-meta strong {
  font-size: .85rem; font-weight: 600; letter-spacing: .015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,.75);
}
.cam-meta span {
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(245,237,227,.62);
}

/* Live badge with a slow breathing dot — motion says "now" better than a word. */
.tag.cam-live {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(212,32,107,.92); color: #fff; border: 0;
  padding: 4px 9px; font-size: .62rem; letter-spacing: .14em;
  box-shadow: 0 2px 12px rgba(212,32,107,.4);
}
.tag.cam-live::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: #fff; animation: hm4u-pulse 2.4s ease-in-out infinite;
}
@keyframes hm4u-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.tag.cam-hd {
  left: auto; right: 10px;
  background: rgba(14,10,11,.72); color: var(--rose-gold);
  border: 1px solid rgba(232,168,152,.28);
  font-size: .6rem; letter-spacing: .12em; padding: 4px 8px;
  backdrop-filter: blur(6px);
}
.tag.cat-count { left: auto; right: 10px; }

/* Category tiles keep the poster shape; the label is the hero, not the frame. */
.cat-tile .cam-thumb { filter: saturate(.92) brightness(.82); }
.cat-tile:hover .cam-thumb { filter: saturate(1.02) brightness(.95); }
.cat-meta strong {
  font-family: var(--serif); font-size: 1.15rem; font-weight: 600; letter-spacing: .01em;
}
.cat-meta span { color: var(--rose-gold); }

@media (max-width: 560px) {
  .cam-meta strong { font-size: .78rem; }
  .cam-meta span { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .teaser .cam-thumb, .cam-tile, .cat-tile { transition: none; }
  .cam-tile:hover, .cat-tile:hover { transform: none; }
  .cam-tile:hover .cam-thumb, .cat-tile:hover .cam-thumb { transform: scale(1.03); }
  .tag.cam-live::before { animation: none; }
}

/* Badge stack, so LIVE + NEW never collide in the corner. */
.cam-badges { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; gap: 6px; }
.cam-badges .tag { position: static; }
.tag.cam-new {
  background: rgba(232,168,152,.94); color: #2a1418; border: 0;
  font-size: .6rem; letter-spacing: .12em; padding: 4px 8px;
}
/* Viewer count reads as a stat, not a label — it is our strongest social proof. */
.cam-viewers {
  position: absolute; right: 10px; bottom: 44px; z-index: 3;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--sans); font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  color: var(--ivory); background: rgba(10,7,8,.6); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.1); border-radius: 999px; padding: 3px 9px 3px 7px;
}
.cam-viewers svg { width: 12px; height: 12px; opacity: .85; }

.cam-sub { display: flex; align-items: center; gap: 7px; }
.cam-sub em { font-style: normal; }
.cam-age {
  font-size: .62rem; font-weight: 700; letter-spacing: .06em;
  color: var(--charcoal); background: var(--rose-gold);
  border-radius: 4px; padding: 1px 5px;
}
.cam-flag { font-size: .8rem; line-height: 1; }
.cam-cta {
  margin-left: auto; color: var(--rose-gold);
  font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .3s ease, transform .3s ease;
}
.cam-tile:hover .cam-cta, .cat-tile:hover .cam-cta { opacity: 1; transform: none; }
@media (hover: none) { .cam-cta { opacity: .9; transform: none; } }

/* ---------- On-site live player ---------- */
.hm4u-noscroll { overflow: hidden; }

.hm4u-player {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center; padding: 20px;
}
.hm4u-player[hidden] { display: none; }
.hm4u-player__backdrop {
  position: absolute; inset: 0;
  background: rgba(8,5,6,.82);
  backdrop-filter: blur(10px) saturate(.9);
  animation: hm4u-fade .25s ease;
}
.hm4u-player__box {
  position: relative; z-index: 1;
  width: min(1040px, 100%);
  background: linear-gradient(180deg, #1c1618, #141011);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 30px 90px rgba(0,0,0,.7), 0 0 0 1px rgba(232,168,152,.08);
  overflow: hidden;
  animation: hm4u-rise .28s cubic-bezier(.2,.7,.3,1);
}
@keyframes hm4u-fade { from { opacity: 0; } }
@keyframes hm4u-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }

.hm4u-player__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 16px; border-bottom: 1px solid var(--line);
}
.hm4u-player__id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hm4u-player__id .tag.cam-live { position: static; }
.hm4u-player__id strong {
  font-family: var(--sans); font-weight: 600; font-size: .95rem; color: var(--ivory);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hm4u-player__viewers {
  font-family: var(--sans); font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ivory-dim);
}
.hm4u-player__close {
  flex: none; width: 34px; height: 34px; line-height: 1;
  font-size: 1.5rem; color: var(--ivory-dim);
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  border-radius: 50%; cursor: pointer;
  transition: color .2s ease, background .2s ease, transform .2s ease;
}
.hm4u-player__close:hover { color: var(--ivory); background: rgba(255,255,255,.12); transform: rotate(90deg); }

/* The partner player is 850x528; hold that ratio so nothing letterboxes. */
.hm4u-player__stage { position: relative; aspect-ratio: 850 / 528; background: #000; }
.hm4u-player__stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.hm4u-player__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 14px 16px; border-top: 1px solid var(--line);
}
.hm4u-player__foot p { margin: 0; font-size: .78rem; }
.hm4u-player__foot .btn { flex: none; }

@media (max-width: 620px) {
  .hm4u-player { padding: 0; align-items: stretch; }
  .hm4u-player__box { width: 100%; border-radius: 0; border: 0; }
  .hm4u-player__foot { justify-content: center; text-align: center; }
  .hm4u-player__foot .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hm4u-player__backdrop, .hm4u-player__box { animation: none; }
  .hm4u-player__close:hover { transform: none; }
}

/* ---------- Framed cam panel ---------- */
/* The breakout moves from the grid to the panel, so the frame is what widens
   and the tiles simply sit inside it. Gives the wall of rooms an edge to sit
   against instead of floating in the page. */
.cam-panel {
  width: min(1520px, 100vw - 44px);
  margin-left: 50%;
  transform: translateX(-50%);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(107,26,43,.24), transparent 62%),
    linear-gradient(180deg, rgba(34,28,30,.6), rgba(20,16,17,.5));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
/* The grid no longer breaks out — its panel does. */
.cam-panel .cam-grid, .cam-panel .cat-grid {
  width: auto; margin-left: 0; transform: none;
}
@media (max-width: 700px) {
  .cam-panel { padding: 11px; border-radius: var(--radius); }
}

/* Each tile is outlined clearly so the wall reads as a set of framed objects
   rather than one continuous sheet of images. */
.cam-tile, .cat-tile {
  border: 1px solid rgba(232,168,152,.34);
  box-shadow: 0 2px 10px rgba(0,0,0,.4), inset 0 0 0 1px rgba(0,0,0,.35);
}
.cam-tile:hover, .cat-tile:hover { border-color: var(--rose-gold); }

.cam-more-wrap { display: flex; justify-content: center; margin-top: 18px; }
.cam-more[hidden] { display: none; }
.cam-more.is-loading { opacity: .6; pointer-events: none; }
.cam-grid.is-loading { opacity: .45; transition: opacity .2s ease; }
.cam-empty { text-align: center; padding: 40px 10px; grid-column: 1 / -1; }

/* ---------- Filter bar ---------- */
.cam-filter {
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  padding: 0 4px 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.cam-filter__group { display: flex; flex-wrap: wrap; gap: 6px; }
.cam-filter__chip {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ivory-dim); text-decoration: none;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03);
  transition: color .2s ease, background .2s ease, border-color .2s ease;
  cursor: pointer;
}
.cam-filter__chip:hover { color: var(--ivory); border-color: rgba(232,168,152,.4); }
.cam-filter__chip.is-on {
  color: #fff; background: var(--magenta); border-color: transparent;
  box-shadow: 0 2px 12px rgba(212,32,107,.35);
}
@media (max-width: 700px) {
  .cam-filter { gap: 8px 12px; padding-bottom: 12px; }
  .cam-filter__chip { font-size: .66rem; padding: 6px 10px; }
}

/* ---------- Related rooms under the player ---------- */
.hm4u-player__related { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.hm4u-player__related[hidden] { display: none; }
.hm4u-player__related-title {
  margin: 12px 0 10px; font-family: var(--sans);
  font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--rose-gold);
}
.hm4u-related-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: 132px;
  gap: 9px; overflow-x: auto; overscroll-behavior-x: contain;
  padding-bottom: 6px; scrollbar-width: thin;
}
.hm4u-related {
  position: relative; padding: 0; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: #171213; cursor: pointer;
  aspect-ratio: 4 / 3;
  transition: border-color .2s ease, transform .2s ease;
}
.hm4u-related:hover { border-color: var(--rose-gold); transform: translateY(-2px); }
.hm4u-related img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm4u-related span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 7px 5px;
  font-family: var(--sans); font-size: .66rem; font-weight: 600; color: var(--ivory);
  text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: linear-gradient(to top, rgba(8,5,6,.95), transparent);
}

/* ---------- Sticky mobile CTA ---------- */
/* Desktop never sees this; there is room for the real CTAs in the page. */
.hm4u-sticky { display: none; }

@media (max-width: 760px) {
  .hm4u-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(16,12,13,.93);
    backdrop-filter: blur(14px) saturate(1.1);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 26px rgba(0,0,0,.45);
  }
  /* Keep the footer clear of the bar. */
  body { padding-bottom: 74px; }

  .hm4u-sticky__meta {
    display: flex; align-items: center; gap: 7px; min-width: 0;
    font-family: var(--sans); font-size: .74rem; font-weight: 600;
    letter-spacing: .02em; color: var(--ivory);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hm4u-sticky__dot {
    flex: none; width: 7px; height: 7px; border-radius: 50%;
    background: var(--magenta); box-shadow: 0 0 0 3px rgba(212,32,107,.22);
    animation: hm4u-pulse 2.4s ease-in-out infinite;
  }
  .hm4u-sticky__btn { flex: none; padding: 10px 16px; font-size: .78rem; }

  /* The player owns the screen while it is open. */
  .hm4u-noscroll .hm4u-sticky { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hm4u-sticky__dot { animation: none; }
  .hm4u-related:hover { transform: none; }
}

/* ---------- Wide sections ---------- */
/* Headings must sit on the same left edge as the grid panel below them, or the
   whole block reads as accidentally misaligned. */
.section.wide > .wrap { max-width: min(1520px, 100vw - 44px); }
.section.wide .cam-panel { width: 100%; margin-left: 0; transform: none; }

/* ---------- Hero with live collage ---------- */
.hero-grid { display: block; }
.hero-live { display: none; }

@media (min-width: 1040px) {
  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
    gap: 54px; align-items: center;
  }
  .hero-live {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    height: 396px;
  }
  /* Six equal tiles: a uniform block reads as deliberate, where one large tile
     plus leftovers reads as a grid with cells missing. */
  .hero-live > .cam-tile {
    aspect-ratio: auto; height: 100%; min-height: 0;
    border-radius: var(--radius);
  }
  /* The collage is scenery for the headline — keep its labels quiet. */
  .hero-live .cam-viewers, .hero-live .cam-sub { display: none; }
  .hero-live .cam-meta strong { font-size: .74rem; }
  .hero-live .cam-meta { left: 9px; right: 9px; bottom: 7px; }
  .hero-live .tag { font-size: .55rem; padding: 3px 7px; }
  .hero-live .cam-hd { display: none; }

  /* Sat centred over the bottom row and covered a face. Top-right corner of
     the collage is empty by construction, so it goes there. */
  .hero-live__badge {
    position: absolute; right: 0; top: -17px; transform: none;
    z-index: 5; display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 15px; border-radius: 999px;
    background: rgba(16,12,13,.92); backdrop-filter: blur(10px);
    border: 1px solid rgba(232,168,152,.28);
    font-family: var(--sans); font-size: .68rem; font-weight: 700;
    letter-spacing: .12em; text-transform: uppercase; color: var(--ivory);
    white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.45);
  }
  .hero-live__badge .hm4u-sticky__dot {
    display: block; width: 7px; height: 7px; border-radius: 50%;
    background: var(--magenta); box-shadow: 0 0 0 3px rgba(212,32,107,.22);
    animation: hm4u-pulse 2.4s ease-in-out infinite;
  }
}
@media (min-width: 1240px) {
  .hero-live { height: 440px; }
}

/* ---------- Editorial (article) cards ---------- */
/* No artwork exists for the guides, so the headline is the artwork. */
.article-tile {
  aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; justify-content: center;
  padding: 20px 18px 52px;
  text-align: left;
  background:
    radial-gradient(110% 80% at 12% 0%, rgba(107,26,43,.55), transparent 60%),
    linear-gradient(155deg, #241b1e 0%, #191315 100%);
}
.article-tile .tag { top: 12px; left: 12px; }
.article-title {
  font-family: var(--serif);
  font-size: clamp(1.02rem, 1.5vw, 1.34rem);
  line-height: 1.24; font-weight: 600; color: var(--ivory);
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-cta {
  position: absolute; left: 18px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--rose-gold);
  transition: gap .25s ease;
}
.article-cta svg { width: 15px; height: 15px; }
.article-tile:hover .article-cta { gap: 11px; }
.article-tile:hover { border-color: var(--rose-gold); transform: translateY(-3px); }
.article-tile { transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease; }
/* A featured image, if one is ever set, still wins. */
.article-tile .cam-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; }
@media (prefers-reduced-motion: reduce) { .article-tile:hover { transform: none; } }

/* ---------- "Live now" pulse ---------- */
/* A static dot next to the words "Live now" says nothing. A breathing one with
   an expanding ring reads as a signal — which is what the section is about. */
.eyebrow .live-dot {
  position: relative; display: inline-block; vertical-align: middle;
  width: 9px; height: 9px; margin-right: 4px; border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 10px rgba(212,32,107,.85);
  animation: hm4u-live-dot 1.6s ease-in-out infinite;
}
.eyebrow .live-dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--magenta);
  animation: hm4u-live-ring 1.6s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes hm4u-live-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(.86); }
}
@keyframes hm4u-live-ring {
  0%   { transform: scale(1);   opacity: .8; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .eyebrow .live-dot, .eyebrow .live-dot::after { animation: none; }
  .eyebrow .live-dot::after { opacity: 0; }
}

/* ---------- FAQ ---------- */
/* A single 60ch column of five questions left two thirds of the row empty and
   made the section read as an afterthought. Two columns fill the width and cut
   the block's height roughly in half. */
@media (min-width: 900px) {
  .faq { column-count: 2; column-gap: 46px; }
  .faq details { break-inside: avoid; }
  #faq .section-head { text-align: center; margin-inline: auto; }
}
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 2px 0;
}
.faq summary {
  cursor: pointer; list-style: none;
  padding: 16px 30px 16px 0; position: relative;
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  color: var(--ivory);
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--rose-gold); }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); font-size: 1.2rem; line-height: 1;
  color: var(--rose-gold); transition: transform .25s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { margin: 0 0 18px; color: var(--ivory-dim); font-size: .92rem; line-height: 1.65; }

/* ---------- Section rhythm ---------- */
/* 92px top and bottom on adjacent sections stacked into ~184px of dead space. */
.section + .section { padding-top: 64px; }
#featured + .section { padding-top: 46px; }
@media (max-width: 760px) {
  .section { padding-block: 58px; }
  .section + .section { padding-top: 42px; }
}