/* sexthailand.net
   White ground with lotus pink (Ben, 2026-09-03: "le blanc et rose c'est le
   mieux"), deep aubergine ink, brass kept only for the Gold badge.
   Unbounded for display, Be Vietnam Pro for reading.
   Semantic selectors, no framework, no prefix scheme (network Rule 15). */

:root {
  --night: #ffffff;          /* page ground (name kept so every rule still reads) */
  --panel: #fdf3f7;
  --panel-2: #f7e6ee;
  --line: #f0d9e3;
  --brass: #b08a45;
  --brass-soft: #d9c39a;
  --lotus: #e8558a;
  --lotus-deep: #c93d71;
  --flag-red: #a51931;
  --flag-white: #f2f3f7;
  --flag-blue: #2d2a4a;
  --flag-gold: #2d2a4a;   /* the second flag colour, blue in Thailand; the name is kept for every rule that reads it */
  --ink: #23161f;
  --ink-soft: #4f3f49;
  --ink-mute: #8a7a83;
  --display: "Unbounded", "Arial Black", sans-serif;
  --body: "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --measure: 70ch;
  --gutter: clamp(1rem, 4vw, 4rem);
  --wide: 1360px;
  --radius: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  padding-bottom: 4.25rem; /* room for the cams bar */
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lotus-deep); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--lotus); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.5em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem); }
h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 500; }
p { margin: 0 0 1em; }
strong { color: var(--ink); font-weight: 700; }
em { font-style: italic; }
ul, ol { padding-left: 1.25em; }
.skip { position: absolute; left: -999px; top: 0; background: var(--lotus); color: #fff; padding: 0.5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; }

/* masthead */
.masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
  padding: 1rem var(--gutter);
  border-bottom: 1px solid var(--line);
  max-width: var(--wide); margin: 0 auto;
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--ink); }
.brand-mark { width: 34px; height: 34px; background: var(--flag-red); border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.01em; }
.brand-name em, .colophon-brand em { font-style: normal; color: var(--lotus); }
.topnav { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.topnav a { text-decoration: none; color: var(--ink-soft); font-weight: 500; }
.topnav a:hover { color: var(--ink); }
.masthead-actions { display: flex; gap: 0.5rem; align-items: center; }
.masthead-actions a { text-decoration: none; font-weight: 500; padding: 0.45rem 0.9rem; border-radius: 999px; display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.masthead-actions .submit { color: var(--ink); border: 1px solid var(--line); background: var(--panel); }
.masthead-actions .submit:hover { border-color: var(--lotus); color: var(--lotus-deep); }
.masthead-actions .cams { color: #fff; background: var(--lotus); }
.masthead-actions .cams:hover { background: var(--lotus-deep); }
.flagline { height: 4px; background: linear-gradient(90deg, var(--flag-red) 0 17%, var(--flag-white) 17% 33%, var(--flag-blue) 33% 67%, var(--flag-white) 67% 83%, var(--flag-red) 83% 100%); }
.live-dot { width: 0.55rem; height: 0.55rem; border-radius: 999px; background: #22c55e; display: inline-block; margin-right: 0.35rem; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: live 1.6s infinite; vertical-align: middle; }
@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); } 100% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* page frame */
main { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.crumbs { padding: 1rem 0 0; font-size: 0.9rem; color: var(--ink-mute); }
.crumbs ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.crumbs li + li::before { content: "/"; margin-right: 0.35rem; color: var(--line); }
.crumbs a { color: var(--ink-mute); text-decoration: none; }
.crumbs a:hover { color: var(--lotus-deep); }

/* hero: the H1 is the picture */
.hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3rem; align-items: center; padding: 3.5rem 0 3rem; }
.hero h1 { border-left: 6px solid var(--lotus); padding-left: 1rem; }
.intro { padding: 2rem 0 1.5rem; max-width: 60rem; }
.intro h1 { border-left: 6px solid var(--lotus); padding-left: 1rem; }
.lead { font-size: 1.2rem; color: var(--ink-soft); max-width: var(--measure); }
.hero-kicker { margin: 0 0 0.6rem; color: var(--flag-red); font-weight: 500; display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; }
.hero-map { position: relative; }
.hero-visual { position: relative; min-height: 26rem; }
.hero-visual .map { position: absolute; inset: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.hero-outline { position: absolute; right: -1rem; bottom: -1rem; height: 60%; width: auto; color: var(--lotus); opacity: 0.08; pointer-events: none; }
.hero-visual:has(.map) .hero-outline { display: none; }
.hero-text { position: relative; z-index: 1; min-width: 0; }
.hero-visual, .intro-text, .reading-main, .cat-body, .city-card-body { min-width: 0; }
.hero-map::before { content: ""; position: absolute; left: -6rem; top: -2rem; width: 14rem; height: 30rem; background: url('/img/thailand.svg') no-repeat center / contain; opacity: 0.035; filter: grayscale(0); pointer-events: none; }
.map { width: 100%; min-height: 20rem; background: var(--panel); border-radius: var(--radius); }
.map-wrap { margin-top: 1.5rem; }
.map-wrap .map { height: 22rem; border: 1px solid var(--line); }
.map-mini .map { height: 14rem; min-height: 0; margin-bottom: 1.5rem; }
.map-pin { width: 22px; height: 22px; border-radius: 999px 999px 999px 0; transform: rotate(-45deg); background: var(--lotus); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(35, 22, 31, 0.3); cursor: pointer; }
.mapboxgl-popup-content { font-family: var(--body); color: var(--ink); border-radius: 8px; padding: 0.6rem 0.8rem; }
.mapboxgl-popup-content a { color: var(--lotus-deep); font-weight: 500; }
.cities { list-style: none; padding: 0; margin: 1.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cities a {
  /* one line since the venue count was dropped (Ben, 2026-09-09) */
  display: inline-flex; align-items: center; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); background: var(--panel); border-radius: var(--radius); padding: 0.5rem 0.95rem;
  font-weight: 500;
}
.cities a:hover { border-color: var(--lotus); background: var(--panel-2); }

/* venue bands: rows, not a card kit */
.band { padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--line); }
.band-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.band-head h2 a { color: var(--ink); text-decoration: none; }
.band-head h2 a:hover { color: var(--lotus-deep); }
.band-head p { color: var(--ink-mute); margin: 0; }
.venues { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); gap: 1.25rem 1rem; margin-top: 1rem; }
.venue { display: flex; flex-direction: column; gap: 0.5rem; }
.venue-photo { position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: var(--panel-2); }
.venue-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; display: block; transition: transform 0.25s ease; }
.venue-photo:hover img { transform: scale(1.03); }
.venue-photo-empty { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 3 / 4; }
.venue-photo-empty img { width: auto; height: 40%; aspect-ratio: auto; object-fit: contain; opacity: 0.35; }
.venue-count { position: absolute; left: 0.5rem; bottom: 0.5rem; background: rgba(35, 22, 31, 0.7); color: #fff; font-size: 0.75rem; padding: 0.15rem 0.5rem; border-radius: 999px; }
.venue-photo .badge-gold { position: absolute; right: 0.5rem; top: 0.5rem; margin: 0; }
/* Gold venues (network Rule 0: is_gold from the hub) lead every list and read as the
   premium card: two columns wide, photo beside the details, brass frame, a Gold ribbon
   (Ben, 2026-09-13: "les listings gold doivent être mieux mis en avant, sur toutes les
   sous-catégories"). */
.venue-gold { grid-column: span 2; flex-direction: row; align-items: stretch; gap: 0.9rem; padding: 0.55rem; border: 2px solid var(--brass); border-radius: calc(var(--radius) + 4px); background: linear-gradient(160deg, #fff9ec 0%, #fff 55%); box-shadow: 0 8px 26px rgba(176, 138, 69, 0.18); }
.venue-gold .venue-photo { flex: 0 0 46%; min-width: 0; align-self: stretch; display: flex; }
.venue-gold .venue-photo img, .venue-gold .venue-photo-empty { aspect-ratio: auto; height: 100%; min-height: 14rem; object-fit: cover; }
.venue-gold .venue-body { display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; min-width: 0; padding: 0.25rem 0.25rem 0.25rem 0; }
.venue-gold .venue-name { font-size: 1.15rem; font-weight: 700; }
.venue-gold .venue-name a { color: var(--ink); }
.venue-gold .venue-meta::before { content: ""; display: inline-block; width: 0.9em; height: 0.9em; margin-right: 0.35em; vertical-align: -0.12em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b08a45' d='M3 18h18l1.5-10-5.5 4L12 4 7 12 1.5 8z'/%3E%3Crect x='3' y='19.5' width='18' height='2' rx='1' fill='%23b08a45'/%3E%3C/svg%3E") no-repeat center / contain; }
.venue-gold .badge-gold { background: var(--brass); color: #fff; left: 0.5rem; right: auto; top: 0.5rem; font-size: 0.78rem; padding: 0.2rem 0.6rem; letter-spacing: 0.02em; box-shadow: 0 1px 3px rgba(35, 22, 31, 0.3); }
@media (max-width: 640px) { .venue-gold { gap: 0.6rem; padding: 0.45rem; } .venue-gold .venue-photo { flex-basis: 42%; } .venue-gold .venue-name { font-size: 1rem; } }
.venue-gold .venue-photo { box-shadow: 0 0 0 2px var(--brass); }
.venue-name { margin: 0; font-weight: 700; font-size: 1rem; line-height: 1.25; }
.venue-name a { color: var(--ink); text-decoration: none; }
.venue-name a:hover { color: var(--lotus-deep); }
.badge-gold { display: inline-block; margin-left: 0.4rem; font-size: 0.7rem; font-weight: 500; color: #fff; background: var(--brass); border-radius: 4px; padding: 0.1rem 0.4rem; vertical-align: middle; }
.venue-meta { margin: 0; color: var(--ink-soft); font-size: 0.88rem; }
.venue-facts { margin: 0; font-size: 0.82rem; color: var(--ink-mute); display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.venue-wa { color: #1ebe5b; font-weight: 500; }
.band-more { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.95rem; }

/* home: one card per top-level category (Ben: categories, never venues, on the home) */
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 1.5rem; padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--line); }
.cat { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.cat-photo img, .cat-photo-empty { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; display: block; background: var(--panel-2); }
.cat-photo-empty { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--panel), var(--panel-2)); }
.cat-photo-empty img { width: auto; height: 70%; aspect-ratio: auto; object-fit: contain; color: var(--lotus); opacity: 0.35; background: none; }
.cat-body { padding: 1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.4rem; flex: 1 1 auto; }
.cat-body h2 { margin: 0; font-size: 1.35rem; font-weight: 700; line-height: 1.15; min-height: 2.3em; }   /* two title lines reserved: metas start on one baseline */
.cat-body h2 a { color: var(--ink); text-decoration: none; }
.cat-body h2 a:hover { color: var(--lotus-deep); }
.cat-cams .cat-body h2 { min-height: 2.3em; }
.cat-blurb { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.cat-cta { margin: 0.4rem 0 0; padding-top: 0.2rem; margin-top: auto; }   /* all four CTAs line up on the card floor */
.cat-cta a { color: var(--lotus-deep); text-decoration: none; font-weight: 500; }
.cat-cta a:hover { color: var(--ink); }

/* city page hero photo */
.intro-city { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2.5rem; align-items: center; max-width: none; }
.intro-photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); }

/* sub-style cards on a parent category page */
.band-subs { border-top: 0; padding-top: 0.5rem; }
.sub-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.9rem; margin-top: 1rem; }
.sub-card { position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--flag-red); border-radius: var(--radius); overflow: hidden; }
.sub-card img, .sub-card-empty { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center; display: block; background: var(--panel-2); }
.sub-card-empty { display: flex; align-items: center; justify-content: center; }
.sub-card-empty img { width: auto; height: 60%; aspect-ratio: auto; object-fit: contain; opacity: 0.35; }
.sub-card-body { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.75rem 0.75rem; }
.sub-card-name { font-family: var(--display); font-weight: 700; font-size: 0.98rem; }
.sub-card:hover { border-color: var(--lotus); }
.sub-card:hover .sub-card-name { color: var(--lotus-deep); }
.parent-note { margin: 0 0 0.75rem; color: var(--ink-mute); font-size: 0.9rem; }
.style-chip { display: inline-block; margin: 0 0.35rem 0.35rem 0; padding: 0.15rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); text-decoration: none; font-size: 0.85rem; font-weight: 500; }
.style-chip:hover { border-color: var(--lotus); color: var(--lotus-deep); }
.sitemap-cities > li { margin-bottom: 0.4rem; }
.sitemap h3 { margin: 1rem 0 0.25rem; font-size: 1.05rem; }

/* city pages, presented before the venue list on a category page */
.band-cities { border-top: 0; padding-top: 0.5rem; }
.city-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.city-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.city-card-media { position: relative; display: block; }
.city-card-photo, .city-card-empty { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: var(--panel-2); }
.city-card-thumbs { position: absolute; left: 0.75rem; bottom: -1.25rem; display: flex; gap: 0.4rem; }
.city-card-thumbs img { width: 3.75rem; height: 3.75rem; object-fit: cover; object-position: top center; border-radius: 8px; border: 3px solid var(--panel); background: var(--panel-2); box-shadow: 0 2px 8px rgba(35, 22, 31, 0.15); }
.city-card:has(.city-card-thumbs) .city-card-body { padding-top: 2rem; }
.city-card-body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.1rem 1.2rem; }
.city-card-name { font-family: var(--display); font-weight: 700; font-size: 1.25rem; line-height: 1.2; }
.city-card-count { color: var(--lotus-deep); font-weight: 500; font-size: 0.92rem; }
.city-card-lead { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; }
.city-card-cta { margin-top: 0.4rem; color: var(--lotus-deep); font-weight: 500; }
.city-card:hover { border-color: var(--lotus); }
.city-card:hover .city-card-name { color: var(--lotus-deep); }

/* Thai flourishes (Ben, 2026-09-13: "plus en référence au pays", same palette): the lotus as
   the marker where Vietnam had its star, the kanok flame as the hero ornament, and a faint
   prajam-yam lattice, the four-petal Thai trellis, behind the hero. Flag colours stay on the
   line under the header and on the card tops. */
.copy h2::before, .band-head h2::before, .cat-body h2::before { content: ""; display: inline-block; width: 0.85em; height: 0.85em; margin-right: 0.4em; vertical-align: -0.08em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e8558a' d='M12 1.5C9.8 5.2 8.4 8 8.4 11.6c0 3 1.5 5.2 3.6 6.4 2.1-1.2 3.6-3.4 3.6-6.4 0-3.6-1.4-6.4-3.6-10.1z'/%3E%3Cpath fill='%23c93d71' d='M11.6 18C8.2 17.4 5 15.2 3 11.4c2.9 1.5 5.9 3.6 8.6 6.6zM12.4 18c3.4-.6 6.6-2.8 8.6-6.6-2.9 1.5-5.9 3.6-8.6 6.6z'/%3E%3Cpath fill='%23b08a45' d='M5.5 19.2h13c-.6 2.2-3.3 3.3-6.5 3.3s-5.9-1.1-6.5-3.3z'/%3E%3C/svg%3E") no-repeat center / contain; }
.copy ul { list-style: none; padding-left: 1.3em; }
.copy ul li { position: relative; }
.copy ul li::before { content: ""; position: absolute; left: -1.3em; top: 0.35em; width: 0.8em; height: 0.8em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b08a45' d='M12 2C9.8 5.5 8.5 8.3 8.5 11.8c0 3 1.5 5.4 3.5 6.7 2-1.3 3.5-3.7 3.5-6.7C15.5 8.3 14.2 5.5 12 2z'/%3E%3Cpath fill='%23e8558a' d='M11.6 18.5C8.3 17.9 5.2 15.8 3.2 12c2.9 1.5 5.8 3.6 8.4 6.5zm.8 0c3.3-.6 6.4-2.7 8.4-6.5-2.9 1.5-5.8 3.6-8.4 6.5z'/%3E%3C/svg%3E") no-repeat center / contain; }
.crumbs li + li::before { content: ""; display: inline-block; width: 0.75em; height: 0.75em; margin-right: 0.35rem; vertical-align: -0.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b08a45' d='M12 2C9.8 5.5 8.5 8.3 8.5 11.8c0 3 1.5 5.4 3.5 6.7 2-1.3 3.5-3.7 3.5-6.7C15.5 8.3 14.2 5.5 12 2z'/%3E%3Cpath fill='%23e8558a' d='M11.6 18.5C8.3 17.9 5.2 15.8 3.2 12c2.9 1.5 5.8 3.6 8.4 6.5zm.8 0c3.3-.6 6.4-2.7 8.4-6.5-2.9 1.5-5.8 3.6-8.4 6.5z'/%3E%3C/svg%3E") no-repeat center / contain; }
.hero-kicker { background: var(--flag-red); color: #fff; padding: 0.25rem 0.7rem 0.25rem 0.5rem; border-radius: 999px; font-size: 0.85rem; }
.hero-kicker svg path { fill: #fff; }
.hero-map::after { content: ""; position: absolute; right: 44%; bottom: -1.5rem; width: 13rem; height: 13rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23b08a45' d='M6 60C6 40 16 28 34 22c-8 4-13 11-13 20 8-10 20-16 33-38-3 16-9 26-21 34 8-3 14-8 25-14-6 14-17 24-34 27-8 1-14 5-18 9z'/%3E%3Cpath fill='%23e8558a' d='M20 58c2-10 8-17 18-20-5 4-8 9-9 15 5-6 12-9 20-12-5 8-12 14-22 16-3 0-5 0-7 1z' opacity='.75'/%3E%3C/svg%3E") no-repeat center / contain; opacity: 0.28; pointer-events: none; transform: scaleX(-1); }
.hero-map { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23e8558a' stroke-opacity='.075' stroke-width='1'%3E%3Cpath d='M24 3l21 21-21 21L3 24z'/%3E%3Cpath d='M24 11c5 4 5 22 0 26-5-4-5-22 0-26zM11 24c4-5 22-5 26 0-4 5-22 5-26 0z'/%3E%3Ccircle cx='24' cy='24' r='2.2' fill='%23b08a45' fill-opacity='.18' stroke='none'/%3E%3C/g%3E%3C/svg%3E") repeat; background-size: 48px 48px; }
@media (max-width: 960px) { .hero-map { background: none; } .hero-map::after { right: 2%; bottom: auto; top: 0; width: 6rem; height: 6rem; opacity: 0.2; } }   /* the lattice reads busy behind a phone-width lead */
.cat { border-top: 4px solid var(--flag-red); }
.cat-photo { position: relative; }
.cat-photo::after { content: ""; position: absolute; right: 0.6rem; top: 0.5rem; width: 2rem; height: 1.5rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath fill='%23ffffff' d='M11 4h9c5 0 9 3.5 9 8.5V20h-3v-5h-2v5h-3v-5h-4v5h-3v-5H9v5H6v-8c-1.5.5-2.5 2-2.5 4.5V22H1c0-5 2-8 5-9V9c0-3 2-5 5-5z'/%3E%3Ccircle cx='24' cy='9.5' r='1.1' fill='%23c93d71'/%3E%3C/svg%3E") no-repeat center / contain; filter: drop-shadow(0 1px 2px rgba(35, 22, 31, 0.45)); }
.city-card-count::before { content: ""; display: inline-block; width: 0.8em; height: 0.8em; margin-right: 0.3em; vertical-align: -0.1em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23b08a45' d='M12 2C9.8 5.5 8.5 8.3 8.5 11.8c0 3 1.5 5.4 3.5 6.7 2-1.3 3.5-3.7 3.5-6.7C15.5 8.3 14.2 5.5 12 2z'/%3E%3Cpath fill='%23e8558a' d='M11.6 18.5C8.3 17.9 5.2 15.8 3.2 12c2.9 1.5 5.8 3.6 8.4 6.5zm.8 0c3.3-.6 6.4-2.7 8.4-6.5-2.9 1.5-5.8 3.6-8.4 6.5z'/%3E%3C/svg%3E") no-repeat center / contain; }
.colophon { border-top: 0; position: relative; }
.colophon::before { content: ""; display: block; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--flag-red) 0 70%, var(--flag-gold) 70% 100%); }
.badge-gold { background: var(--flag-red); color: var(--flag-gold); }
.venue-gold .venue-photo { box-shadow: 0 0 0 2px var(--flag-red); }
.gallery-note { grid-column: 1 / -1; margin: 0; font-size: 0.8rem; color: var(--ink-mute); }
.intro-city .intro-photo { align-self: start; }

/* photo rail under an H1: horizontal scroll, photos before any paragraph */
/* The photo rail is gone from every page (Ben, 2026-09-07). */
/* Leads are never clamped: a sentence cut with an ellipsis on a phone is a defect (Ben, 2026-09-07). */

/* reading column with sticky aside */
.reading { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 3rem; padding: 2rem 0 3rem; border-top: 1px solid var(--line); }
.reading-aside { position: sticky; top: 1rem; align-self: start; font-size: 0.92rem; }
.reading-main { max-width: var(--measure); }
.toc ol, .related ul { list-style: none; padding: 0; margin: 0; }
.toc li, .related li { padding: 0.3rem 0; border-bottom: 1px solid var(--line); }
.toc a, .related a { color: var(--ink-soft); text-decoration: none; }
.toc a:hover, .related a:hover { color: var(--lotus-deep); }
.toc-title { font-family: var(--display); font-weight: 500; font-size: 0.85rem; color: var(--lotus-deep); margin: 0 0 0.5rem; }
.related { margin-top: 1.75rem; }
.copy section { margin-bottom: 2.25rem; }
.copy h2 { border-bottom: 2px solid var(--line); padding-bottom: 0.35rem; }
.copy ul { margin: 0 0 1em; }
.copy a, .faq a { color: var(--lotus-deep); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 0.18em; }
.copy a:hover, .faq a:hover { color: var(--ink); text-decoration-color: var(--lotus); }
.faq details { border-bottom: 1px solid var(--line); padding: 0.6rem 0; }
.faq summary { cursor: pointer; font-weight: 500; list-style: none; position: relative; padding-right: 1.5rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 0; color: var(--lotus); font-family: var(--display); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0.6rem 0 0; color: var(--ink-soft); }
.pending, .source { color: var(--ink-mute); font-size: 0.9rem; }

/* cams strip inside the copy, network Rule 7 */
.strip {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem;
  background: linear-gradient(135deg, #fff, var(--panel)); border: 1px solid var(--line); border-left: 6px solid var(--lotus);
  border-radius: var(--radius); padding: 1rem 1.25rem; margin: 0 0 2.25rem;
}
.strip-faces { display: flex; }
.strip-faces img { width: 3.6rem; height: 3.6rem; border-radius: 999px; border: 3px solid #fff; object-fit: cover; margin-left: -0.9rem; box-shadow: 0 2px 8px rgba(35, 22, 31, 0.15); }
.strip-faces img:first-child { margin-left: 0; }
.strip-text p { margin: 0; }
.strip-title { font-family: var(--display); font-weight: 700; font-size: 1.05rem; }
.strip-cta, .camsbar a { color: #fff; background: var(--lotus); text-decoration: none; padding: 0.6rem 1.2rem; border-radius: 999px; font-weight: 500; white-space: nowrap; }
.strip-cta:hover, .camsbar a:hover { background: var(--lotus-deep); color: #fff; }
/* On the pink strip the button is ink, not pink on pink (Ben, 2026-09-07), with the live dot. */
.strip-cta { background: var(--ink); display: inline-flex; align-items: center; gap: 0.45rem; }
.strip-cta:hover { background: var(--flag-red); }
.strip-cta .live-dot { margin-right: 0; }

/* list-your-venue band, above the footer */
.submit-band { background: var(--flag-red); color: #fff; padding: 2rem var(--gutter); }
.submit-band-inner { max-width: var(--wide); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.submit-band p { margin: 0; max-width: 60ch; }
.submit-band-title { font-family: var(--display); font-weight: 700; font-size: 1.35rem; margin-bottom: 0.3rem !important; }
.submit-band-cta { background: var(--flag-gold); color: #23161f; text-decoration: none; font-weight: 700; padding: 0.8rem 1.4rem; border-radius: 999px; white-space: nowrap; }
.submit-band-cta:hover { background: #fff; color: var(--flag-red); }

/* venue page */
.venue-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; padding: 1.5rem 0 2.5rem; }
.venue-title { font-family: var(--display); font-size: clamp(1.5rem, 1rem + 2vw, 2.75rem); font-weight: 700; margin: 0 0 0.25rem; line-height: 1.15; }
.venue-hero h1 { font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem); font-weight: 500; color: var(--lotus-deep); border: 0; padding: 0; margin-bottom: 1rem; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 1.5rem; margin: 1rem 0; }
.facts div { border-top: 1px solid var(--line); padding-top: 0.4rem; }
.facts dt { color: var(--ink-mute); font-size: 0.85rem; }
.facts dd { margin: 0; font-weight: 500; }
.contact { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0 1.25rem; }
.contact a { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--ink); border: 1px solid var(--lotus); border-radius: 999px; padding: 0.55rem 1.1rem; font-weight: 500; }
.contact a.contact-wa { background: #25d366; border-color: #25d366; color: #fff; font-size: 1.05rem; padding: 0.7rem 1.3rem; flex-basis: 100%; justify-content: center; }
.contact a.contact-wa:hover { background: #1ebe5b; color: #fff; }
.contact a.contact-phone { background: var(--lotus); color: #fff; }
.contact a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.contact-none { color: var(--ink-soft); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; align-content: start; }
.gallery-item { display: block; background: var(--panel-2); border-radius: var(--radius); overflow: hidden; }
.gallery-lead { grid-column: span 3; }
.gallery img { width: 100%; height: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; display: block; }
.gallery-lead img { aspect-ratio: auto; max-height: 34rem; object-fit: contain; object-position: center; background: var(--panel-2); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 96vh; }
.lightbox::backdrop { background: rgba(35, 22, 31, 0.92); }
.lightbox img { max-width: 92vw; max-height: 88vh; display: block; margin: 0 auto; border-radius: var(--radius); }
.lightbox button { position: fixed; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.9); color: var(--ink); border: 0; width: 2.75rem; height: 2.75rem; border-radius: 999px; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.lightbox-prev { left: 1rem; } .lightbox-next { right: 1rem; }
.lightbox-close { top: 1rem !important; right: 1rem; transform: none !important; }
.lightbox-count { position: fixed; bottom: 1rem; left: 0; right: 0; text-align: center; color: #fff; margin: 0; font-size: 0.9rem; }
.hours table { border-collapse: collapse; width: 100%; }
.hours th { text-align: left; font-weight: 500; color: var(--ink-mute); padding: 0.2rem 0.5rem 0.2rem 0; width: 3rem; }
.hours td { padding: 0.2rem 0; border-bottom: 1px solid var(--line); }

/* colophon */
.colophon { border-top: 1px solid var(--line); background: var(--panel); margin-top: 2rem; padding: 2.5rem var(--gutter) 3rem; color: var(--ink-soft); font-size: 0.92rem; }
.colophon-grid { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 3rem; }
.colophon-brand { font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--ink); margin: 0 0 0.5rem; }
.colophon-title { font-family: var(--display); font-weight: 500; font-size: 0.85rem; color: var(--lotus-deep); margin: 0 0 0.5rem; }
.colophon ul { list-style: none; padding: 0; margin: 0; }
.colophon li { padding: 0.15rem 0; }
.colophon li.sub { padding-left: 1rem; }
.colophon a { color: var(--ink-soft); text-decoration: none; }
.colophon a:hover { color: var(--lotus-deep); }
.colophon-note { margin-top: 1.25rem; color: var(--ink-mute); }

/* sticky cams bar, network Rule 7 */
.camsbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; gap: 0.9rem; flex-wrap: nowrap;
  /* Nearly opaque and lifted off the page: at 0.94 the copy underneath ghosted through and the
     bar had no edge of its own (Ben, 2026-09-10: "manque une jolie délimitation"). */
  background: rgba(255, 255, 255, 0.985); backdrop-filter: blur(8px);
  box-shadow: 0 -8px 24px rgba(35, 22, 31, 0.12);
  padding: 0.5rem var(--gutter); font-size: 0.92rem; color: var(--ink-soft);
}
/* The delimiter is the flag line, the same one under the masthead, so the bar reads as part
   of the site's frame rather than as a floating panel. */
.camsbar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--flag-red) 0 70%, var(--flag-gold) 70% 100%);
}
.camsbar-faces { display: flex; }
.camsbar-faces img { width: 2.25rem; height: 2.25rem; border-radius: 999px; border: 2px solid #fff; object-fit: cover; margin-left: -0.6rem; }
.camsbar-faces img:first-child { margin-left: 0; }
.camsbar-text { display: inline-flex; align-items: center; }
/* listing pages: the venue's own channel sits beside the cams (Ben, 2026-09-04) */
.camsbar-venue { justify-content: center; gap: 0.6rem; }
.sticky-contact { display: inline-flex; align-items: center; gap: 0.45rem; }
.sticky-contact.sticky-wa { background: #25d366; }
.sticky-contact.sticky-wa:hover { background: #1ebe5b; }
.sticky-contact.sticky-phone, .sticky-contact.sticky-telegram, .sticky-contact.sticky-email, .sticky-contact.sticky-website { background: var(--ink); }
.sticky-contact.sticky-phone:hover, .sticky-contact.sticky-telegram:hover, .sticky-contact.sticky-email:hover, .sticky-contact.sticky-website:hover { background: var(--flag-red); }
.sticky-detail { font-variant-numeric: tabular-nums; opacity: 0.92; }
/* The cams button keeps the green pulsing dot (Ben, 2026-09-07: no star, no white dot). */
.camsbar-cams .live-dot { border: 2px solid rgba(255, 255, 255, 0.9); width: 0.7rem; height: 0.7rem; }

@media (max-width: 960px) {
  :root { --gutter: 0.75rem; }
  /* On a phone the photo comes first: it is the only thing above the fold, and burying it
     under the whole intro left the page looking text-only (Ben, 2026-09-09). */
  .intro-city { grid-template-columns: 1fr; gap: 0.85rem; }
  .intro-city .intro-photo { order: -1; aspect-ratio: 16 / 10; }
  .hero, .venue-hero, .reading { grid-template-columns: 1fr; gap: 0.75rem; }
  .hero { padding: 0.75rem 0 0.5rem; }
  .hero-visual { min-height: 0; }
  .hero-visual .map { position: static; height: 12rem; min-height: 0; }
  .hero-outline { display: none; }
  .hero-map::before, .hero-map::after { display: none; }
  .reading { padding: 1rem 0 1.5rem; }
  .reading-aside { position: static; }
  .toc { display: none; }
  .colophon { padding: 1.25rem var(--gutter) 1.5rem; font-size: 0.85rem; margin-top: 0; }
  .colophon-grid { grid-template-columns: 1fr; gap: 1rem; }
  .cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; padding: 0.5rem 0 1rem; border-top: 0; }
  .cat { flex-direction: column; }
  .cat-photo img, .cat-photo-empty { width: 100%; aspect-ratio: 4 / 3; min-height: 0; }
  .cat-body { padding: 0.55rem 0.65rem 0.7rem; gap: 0.15rem; }
  .cat-body h2, .cat-cams .cat-body h2 { font-size: 0.88rem; line-height: 1.15; min-height: 3.45em; }   /* three lines reserved: every meta starts on the same line */
  /* Every card has the same three parts on a phone: photo, title, meta. The cams link lives
     in the sticky bar there, and the cams photo strip takes the photo's 4/3 box. */
  .cat-blurb, .cat-cta, .cat-cams .cat-cta { display: none; }
  .band { padding: 0.75rem 0 1rem; }
  .band-head { gap: 0.25rem; }
  .band-head p { font-size: 0.85rem; }
  .map-wrap { margin-top: 0.75rem; }
  .map-wrap .map { height: 12rem; }
  .strip { grid-template-columns: auto 1fr; gap: 0.6rem; padding: 0.7rem 0.8rem; margin-bottom: 1.25rem; }
  .strip-faces img { width: 2.6rem; height: 2.6rem; margin-left: -0.7rem; }
  .strip-text p { font-size: 0.88rem; }
  .strip-title { font-size: 0.95rem; }
  .strip-cta { grid-column: 1 / -1; text-align: center; padding: 0.5rem 1rem; }
  .submit-band { padding: 1rem var(--gutter); }
  .submit-band-inner { gap: 0.75rem; }
  .submit-band-title { font-size: 1.05rem; }
  .submit-band p { font-size: 0.88rem; }
  .submit-band-cta { padding: 0.55rem 1rem; font-size: 0.92rem; }
  .city-cards { gap: 0.6rem; grid-template-columns: repeat(2, 1fr); }
  .sub-cards { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .sub-card-body { padding: 0.45rem 0.55rem 0.55rem; }
  .sub-card-name { font-size: 0.88rem; }
  .city-card-photo, .city-card-empty { aspect-ratio: 4 / 3; }
  .city-card-thumbs { bottom: -0.9rem; left: 0.5rem; gap: 0.25rem; }
  .city-card-thumbs img { width: 2.4rem; height: 2.4rem; border-width: 2px; }
  .city-card:has(.city-card-thumbs) .city-card-body { padding-top: 1.3rem; }
  .city-card-body { padding: 0.6rem 0.65rem 0.7rem; gap: 0.2rem; }
  .city-card-name { font-size: 0.95rem; }
  .city-card-count { font-size: 0.8rem; }
  .city-card-lead { display: none; }
  .city-card-cta { font-size: 0.82rem; margin-top: 0.2rem; }
  .intro-photo { aspect-ratio: 16 / 7; }
  .gallery { grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
  .gallery-lead img { max-height: 20rem; }
  .facts { grid-template-columns: 1fr 1fr; gap: 0.5rem 0.75rem; margin: 0.6rem 0; }
  .venue-title { font-size: 1.3rem; }
  .venue-hero { padding: 0.5rem 0 1rem; }
  .contact { margin: 0.6rem 0 0.75rem; gap: 0.4rem; }
  .contact a { padding: 0.45rem 0.85rem; font-size: 0.92rem; }
  .contact a.contact-wa { padding: 0.6rem 1rem; font-size: 1rem; }
}
@media (max-width: 600px) {
  body { font-size: 0.95rem; line-height: 1.5; padding-bottom: 3.2rem; }
  h1 { font-size: 1.3rem; margin-bottom: 0.3rem; letter-spacing: 0; }
  h2 { font-size: 1.1rem; }
  .masthead { padding: 0.45rem var(--gutter); gap: 0.35rem 0.6rem; }
  .brand-mark { width: 26px; height: 26px; border-radius: 7px; }
  .brand-mark svg { width: 14px; height: 14px; }
  .brand-name { font-size: 1rem; }
  .masthead-actions .submit { display: none; }
  .masthead-actions .cams { padding: 0.35rem 0.7rem; font-size: 0.88rem; }
  .topnav { order: 3; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 0.25rem var(--gutter) 0.35rem; gap: 0.9rem; flex-wrap: nowrap; overflow-x: auto; font-size: 0.85rem; scrollbar-width: none; }
  .topnav a { white-space: nowrap; }
  .flagline { height: 3px; }
  .crumbs { padding-top: 0.5rem; font-size: 0.78rem; }
  .intro { padding: 0.5rem 0 0.25rem; }
  .intro h1, .hero h1 { border-left-width: 4px; padding-left: 0.6rem; }
  .hero-kicker { font-size: 0.78rem; margin-bottom: 0.2rem; }
  .lead { font-size: 0.92rem; line-height: 1.45; margin-bottom: 0.6rem; }
  .cities { gap: 0.35rem; margin-top: 0.4rem; }
  .cities a { min-width: 0; padding: 0.3rem 0.55rem; font-size: 0.82rem; border-radius: 7px; }
  .cities a small { font-size: 0.68rem; }
  .venues { grid-template-columns: repeat(2, 1fr); gap: 0.6rem 0.5rem; margin-top: 0.5rem; }
  .venue { gap: 0.3rem; }
  .venue-name { font-size: 0.88rem; }
  .venue-meta { font-size: 0.75rem; }
  .venue-facts { font-size: 0.72rem; }
  .venue-count { font-size: 0.66rem; padding: 0.1rem 0.4rem; }
  .copy section { margin-bottom: 1.1rem; }
  .copy h2 { font-size: 1.05rem; }
  .copy p, .copy li, .faq details p { font-size: 0.93rem; }
  .faq details { padding: 0.45rem 0; }
  .faq summary { font-size: 0.93rem; }
  .camsbar { padding: 0.35rem var(--gutter); gap: 0.6rem; justify-content: space-between; }
  .camsbar-faces img { width: 1.8rem; height: 1.8rem; margin-left: -0.5rem; }
  .camsbar-text { display: none; }
  .camsbar a { flex: 1; justify-content: center; text-align: center; padding: 0.5rem 0.6rem; font-size: 0.9rem; }
  .camsbar-venue { gap: 0.5rem; }
  .sticky-detail { display: none; }
  .pending, .source { font-size: 0.8rem; }
}

/* Fallback internal link appended to a section that named no page (Linker::seeAlso). */
.copy .see-also{font-size:.92em;color:var(--ink-2,#555);margin-top:.4rem}
.copy .see-also a{font-weight:600}

/* FAQ questions are H3s inside the summary (Ben, 2026-09-05); they keep the summary's look. */
.faq summary h3 { display: inline; font: inherit; margin: 0; letter-spacing: 0; }

/* CTA button under a section that presents a child page (Linker::sectionTarget). */
.copy .cta-row { margin: 0.5rem 0 1.4rem; }
.copy .cta-btn { display: inline-block; background: var(--lotus); color: #fff; font-weight: 600; padding: 0.55rem 1.1rem; border-radius: 999px; text-decoration: none; }
.copy .cta-btn:hover, .copy .cta-btn:focus-visible { background: var(--lotus-deep); color: #fff; }

/* Fourth home card: the cams partner. Three portraits fill the cover slot, and the flag red
   sits on the frame so the card reads as Thailand rather than as a generic banner. */
.cat-cams { border-color: var(--flag-red); }
.cat-cams .cat-photo { position: relative; display: block; }
.cat-cams-faces { display: grid; grid-template-columns: repeat(3, 1fr); aspect-ratio: 16 / 10; background: var(--panel-2); }
.cat-cams-faces img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.cat-cams-live {
  position: absolute; left: 0.6rem; top: 0.6rem; display: inline-flex; align-items: center; gap: 0.35rem;
  background: rgba(35, 22, 31, 0.78); color: #fff; font-size: 0.72rem; font-weight: 600;
  padding: 0.2rem 0.55rem; border-radius: 999px;
}
.cat-cams .cat-body h2 a { color: var(--flag-red); }
.cat-cams .cat-body h2 a:hover { color: var(--lotus-deep); }
.cat-cams .cat-cta { display: block; }   /* the money link stays on mobile too */
.cat-cams .cat-cta a { color: var(--flag-red); }
.cat-cams .cat-cta a:hover { color: var(--ink); }

.camsbar-cams { display: inline-flex; align-items: center; gap: 0.45rem; }

/* Declared last on purpose: the desktop rule that keeps the cams CTA visible sits above and
   would otherwise win on a phone. On a phone the four cards are photo, title, meta, nothing else. */
@media (max-width: 960px) {
  .cat-cams .cat-cta { display: none; }
  .cat-cams .cat-body h2 { min-height: 3.45em; }
  .cat-cams-faces { aspect-ratio: 4 / 3; }   /* same box as the three photos, so the four bodies start on one line */
}

/* Cover slider: venue photos uncropped on a soft panel, crossfade, dots. */
.cover-slider { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--panel-2); border: 1px solid var(--line); margin: 0; align-self: start; }
.cover-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 0.6s ease; }
.cover-slide.is-on, .cover-single { opacity: 1; }
.cover-slider img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
.cover-slider figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem 0.8rem 0.5rem; font-size: 0.8rem; font-weight: 500; color: #fff; background: linear-gradient(transparent, rgba(35, 22, 31, 0.7)); }
.cover-dots { position: absolute; right: 0.6rem; top: 0.6rem; display: flex; gap: 0.35rem; }
.cover-dots button { width: 0.55rem; height: 0.55rem; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.55); cursor: pointer; }
.cover-dots button[aria-selected="true"] { background: var(--flag-gold); }
@media (max-width: 960px) { .cover-slot { display: none; } }   /* no cover at all on a phone, slider or fallback (Ben, 2026-09-08) */

/* Empty page: reassure, send the visitor to a city that has venues, then to the cams. */
.empty-state { display: grid; gap: 1.25rem; }
.empty-lead { margin: 0; color: var(--ink-soft); max-width: 60ch; }
.empty-badge { display: inline-block; background: var(--flag-red); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.15rem 0.55rem; border-radius: 999px; margin-right: 0.45rem; vertical-align: 0.05em; }
.empty-block h3 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.empty-note { margin: 0.6rem 0 0; color: var(--ink-mute); font-size: 0.92rem; }
.empty-cams { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.1rem; background: linear-gradient(135deg, #fff, var(--panel)); border: 1px solid var(--line); border-left: 6px solid var(--flag-red); border-radius: var(--radius); padding: 1rem 1.25rem; }
.empty-cams-faces { display: flex; }
.empty-cams-faces img { width: 3.2rem; height: 3.2rem; border-radius: 999px; border: 3px solid #fff; object-fit: cover; margin-left: -0.8rem; box-shadow: 0 2px 8px rgba(35, 22, 31, 0.15); }
.empty-cams-faces img:first-child { margin-left: 0; }
.empty-cams-text p { margin: 0; }
.empty-cams-title { font-family: var(--display); font-weight: 700; font-size: 1.02rem; }
@media (max-width: 960px) {
  .empty-cams { grid-template-columns: auto 1fr; gap: 0.7rem; padding: 0.8rem 0.9rem; }
  .empty-cams-faces img { width: 2.4rem; height: 2.4rem; margin-left: -0.6rem; }
  .empty-cams .strip-cta { grid-column: 1 / -1; justify-content: center; }
  .empty-lead { font-size: 0.93rem; }
}

/* The cams card on a style grid: portraits instead of a venue photo, flag red, live badge. */
.sub-card-cams { border-color: var(--flag-red); box-shadow: 0 2px 12px rgba(218, 37, 29, 0.16); }
.sub-card-faces { display: grid; grid-template-columns: repeat(3, 1fr); aspect-ratio: 16 / 10; background: var(--panel-2); }
.sub-card-faces img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: top center; display: block; }
.sub-card-live {
  position: absolute; left: 0.5rem; top: 0.5rem; display: inline-flex; align-items: center; gap: 0.3rem;
  background: rgba(35, 22, 31, 0.8); color: #fff; font-size: 0.68rem; font-weight: 700;
  padding: 0.15rem 0.5rem; border-radius: 999px;
}
.sub-card-cams .sub-card-name { color: var(--flag-red); }
.sub-card-cams:hover { border-color: var(--lotus-deep); }

/* The Erotiklive funnel on the cam girl page: the widest, loudest block on the site. */
.cams-panel { display: grid; grid-template-columns: minmax(0, 20rem) 1fr; gap: 1.5rem; align-items: center;
  background: linear-gradient(135deg, #fff, var(--panel)); border: 1px solid var(--line);
  border-left: 6px solid var(--flag-red); border-radius: var(--radius); padding: 1.25rem 1.4rem; margin: 1.5rem 0 2rem; }
.cams-panel-media { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; }
.cams-panel-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top center; border-radius: 0.5rem; display: block; }
.cams-panel-live { position: absolute; left: 0.4rem; top: 0.4rem; display: inline-flex; align-items: center; gap: 0.3rem;
  background: rgba(35, 22, 31, 0.82); color: #fff; font-size: 0.7rem; font-weight: 700; padding: 0.18rem 0.55rem; border-radius: 999px; }
.cams-panel-kicker { margin: 0 0 0.2rem; color: var(--flag-red); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.cams-panel h2 { margin: 0 0 0.5rem; font-size: 1.45rem; line-height: 1.2; }
.cams-panel h2::before { content: none; }
.cams-panel-text > p { margin: 0 0 0.6rem; color: var(--ink-soft); }
.cams-panel-points { margin: 0 0 0.9rem; padding-left: 1.1rem; color: var(--ink-soft); }
.cams-panel-points li { margin: 0.15rem 0; }
.cams-panel-cta { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin: 0; }
.cams-panel .strip-cta { font-size: 1.02rem; padding: 0.7rem 1.5rem; }
.cams-panel-note { color: var(--ink-mute); font-size: 0.82rem; }
@media (max-width: 960px) {
  .cams-panel { grid-template-columns: 1fr; gap: 0.9rem; padding: 0.9rem 1rem; margin: 1rem 0 1.4rem; }
  .cams-panel-media img { aspect-ratio: 1 / 1; }
  .cams-panel h2 { font-size: 1.15rem; }
  .cams-panel .strip-cta { width: 100%; justify-content: center; }
}

/* Portrait blocks are links now (Ben, 2026-09-09), but they keep their own look: the pill
   styling of .camsbar a and .strip-cta must not leak onto them. */
.camsbar a.camsbar-faces, a.strip-faces, a.empty-cams-faces, a.cams-panel-media {
  background: none; padding: 0; border-radius: 0; color: inherit; text-decoration: none;
}
/* ...and they must not grow either: the mobile rule ".camsbar a { flex: 1 }" caught the
   portraits once they became a link and pushed the bar off centre (Ben, 2026-09-10). */
.camsbar a.camsbar-faces { flex: 0 0 auto; }
.camsbar a.camsbar-faces:hover, a.strip-faces:hover, a.empty-cams-faces:hover, a.cams-panel-media:hover { background: none; }
a.cams-panel-media:hover img, a.strip-faces:hover img, a.empty-cams-faces:hover img { filter: brightness(1.06); }

/* Language switcher in the masthead. Closed by default, opens on click, no dependency. */
.langs { position: relative; }
.langs-toggle { display: inline-flex; align-items: center; gap: 0.3rem; background: none; border: 1px solid var(--line);
  border-radius: 999px; padding: 0.35rem 0.7rem; font: inherit; font-size: 0.86rem; color: var(--ink-soft); cursor: pointer; }
.langs-toggle:hover { border-color: var(--lotus); color: var(--ink); }
.langs-menu { position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 60; margin: 0; padding: 0.3rem; list-style: none;
  background: #fff; border: 1px solid var(--line); border-radius: 0.7rem; box-shadow: 0 8px 24px rgba(35, 22, 31, 0.14); min-width: 9rem; }
.langs-menu a { display: block; padding: 0.4rem 0.7rem; border-radius: 0.45rem; color: var(--ink); text-decoration: none; font-size: 0.9rem; }
.langs-menu a:hover { background: var(--panel); }
.langs-menu a[aria-current="true"] { color: var(--lotus-deep); font-weight: 600; }
@media (max-width: 960px) { .langs-toggle { padding: 0.3rem 0.55rem; font-size: 0.8rem; } .langs-menu { left: 0; right: auto; } /* the switcher sits at the left on a phone: a right-anchored menu hung off the screen (2026-09-13) */ }

/* Flags in the language switcher: a fixed 20x15 box so the menu never jumps while they load. */
.flag { width: 20px; height: 15px; border-radius: 2px; object-fit: cover; vertical-align: -2px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(35, 22, 31, 0.12); }
.langs-toggle { gap: 0.45rem; }
.langs-menu a { display: flex; align-items: center; gap: 0.5rem; }