/* adultvietnam.com
   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: #ce2939;       /* Hungarian red */
  --flag-gold: #477050;      /* Hungarian green, named gold so every rule below still reads */
  --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 33.3%, #ffffff 33.3% 66.6%, var(--flag-gold) 66.6% 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); }
.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/hungary.svg') no-repeat center / contain; opacity: 0.05; 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); }

/* Vietnam flag flourishes (Ben, 2026-09-04: play more with the flag) */
.copy h2::before, .band-head h2::before, .cat-body h2::before { content: ""; display: inline-block; width: 0.75em; height: 0.75em; margin-right: 0.4em; vertical-align: -0.05em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffcd00' stroke='%23da251d' stroke-width='1.2' d='M12 1.5l3.1 6.6 7.2.8-5.3 5 1.4 7.1L12 17.4 5.6 21l1.4-7.1-5.3-5 7.2-.8z'/%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.35em; top: .35em; width: .85em; height: .85em; 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 22c0-5-3-7-3-11a3 3 0 0 1 6 0c0 4-3 6-3 11z'/%3E%3Cpath fill='%23c93d71' d='M9 11c-2 0-4-2-4-5 2 0 4 1 4 3zM15 11c2 0 4-2 4-5-2 0-4 1-4 3z'/%3E%3C/svg%3E") no-repeat center / contain; }
.crumbs li + li::before { content: ""; display: inline-block; width: .7em; height: .7em; vertical-align: -.05em; 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 22c0-5-3-7-3-11a3 3 0 0 1 6 0c0 4-3 6-3 11z'/%3E%3Cpath fill='%23c93d71' d='M9 11c-2 0-4-2-4-5 2 0 4 1 4 3zM15 11c2 0 4-2 4-5-2 0-4 1-4 3z'/%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: var(--flag-gold); }
.hero-map::after { content: ""; position: absolute; right: 42%; top: 0; width: 9rem; height: 9rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffcd00' d='M12 1.5l3.1 6.6 7.2.8-5.3 5 1.4 7.1L12 17.4 5.6 21l1.4-7.1-5.3-5 7.2-.8z'/%3E%3C/svg%3E") no-repeat center / contain; opacity: 0.18; pointer-events: none; }
.cat { border-top: 4px solid var(--flag-red); }
.cat-photo { position: relative; }
.cat-photo::after { content: ""; position: absolute; right: .6rem; top: .5rem; width: 1.3rem; height: 1.3rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M12 22c0-5-3-7-3-11a3 3 0 0 1 6 0c0 4-3 6-3 11z'/%3E%3Cpath fill='%23f2b9cf' d='M9 11c-2 0-4-2-4-5 2 0 4 1 4 3zM15 11c2 0 4-2 4-5-2 0-4 1-4 3z'/%3E%3C/svg%3E") no-repeat center / contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.city-card-count::before { content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .3em; vertical-align: -.1em; 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 22c0-5-3-7-3-11a3 3 0 0 1 6 0c0 4-3 6-3 11z'/%3E%3Cpath fill='%23c93d71' d='M9 11c-2 0-4-2-4-5 2 0 4 1 4 3zM15 11c2 0 4-2 4-5-2 0-4 1-4 3z'/%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 33.3%, #ffffff 33.3% 66.6%, var(--flag-gold) 66.6% 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 Vietnam 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; }

/* ----------------------------------------------------------------------------
   Phone rules, rewritten 2026-10-12. Measured on the sibling site before: the
   header wrapped to three rows (105 px) and the sticky bar carried a sentence
   plus a button over three lines (110 px), a quarter of the screen on every
   page. Ben called it a cata and he was right. One row, one line, one action.
   ---------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .masthead { flex-wrap: nowrap; gap: .6rem; padding-top: .5rem; padding-bottom: .5rem; }
  .brand { min-width: 0; }
  .brand-name { font-size: .86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
  .brand-mark { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; }
  .brand-mark svg { width: 14px; height: 14px; }
  .topnav { display: none; }
  .masthead-actions { margin-left: auto; flex: 0 0 auto; gap: .4rem; }
  .masthead-actions .submit, .langs { display: none; }
  .masthead-actions .cams { padding: .4rem .7rem; font-size: .82rem; white-space: nowrap; }

  body { padding-bottom: 4.25rem; }
  .sticky { padding: .5rem .75rem; padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); gap: .5rem; }
  .sticky-line, .sticky-faces { display: none; }
  .sticky-contact, .sticky .cams, .sticky-cta { flex: 1 1 auto; justify-content: center; white-space: nowrap; }
  .sticky-contact + .sticky-cta, .sticky-contact + .cams { flex: 0 0 auto; max-width: 48%; overflow: hidden; text-overflow: ellipsis; }

  /* tap targets: a list of links is a list of things a thumb has to hit */
  .colophon a, .tree a, .crumbs a { display: inline-block; padding: .35rem 0; }
}

/* 'Erotic Massage Hungary' is 22 characters: it needs the smaller size from 420 px
   down, or it truncates and the country disappears from the brand. */
@media (max-width: 420px) {
  .brand-name { font-size: .78rem; }
  .masthead-actions .cams { font-size: .78rem; padding: .36rem .6rem; }
}


/* ----------------------------------------------------------------------------
   Hungarian furniture (Ben, 2026-10-12: "toujours utiliser des elements
   graphiques qui rappel le pays"). The palette and the layout are adultvietnam's;
   what is Hungarian is the tricolour hairline, the Kalocsa tulip that replaced
   the Vietnamese star, the folk rosette behind the hero, and the Parliament and
   Chain Bridge silhouette over it.
   ---------------------------------------------------------------------------- */
.hero { position: relative; }
.hero-map { position: relative; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23e8558a' stroke-opacity='.10' stroke-width='1.1'%3E%3Cpath d='M30 12c3 0 5 2 5 5 0 4-5 8-5 12 0-4-5-8-5-12 0-3 2-5 5-5z'/%3E%3Cpath d='M12 30c0-3 2-5 5-5 4 0 8 5 12 5-4 0-8 5-12 5-3 0-5-2-5-5z'/%3E%3Cpath d='M48 30c0 3-2 5-5 5-4 0-8-5-12-5 4 0 8-5 12-5 3 0 5 2 5 5z'/%3E%3Cpath d='M30 48c-3 0-5-2-5-5 0-4 5-8 5-12 0 4 5 8 5 12 0 3-2 5-5 5z'/%3E%3Ccircle cx='30' cy='30' r='3.5'/%3E%3C/g%3E%3Ccircle cx='30' cy='30' r='1.6' fill='%23477050' fill-opacity='.16'/%3E%3C/svg%3E") repeat; background-size: 60px 60px; }
.hero-map::after {
  content: ""; position: absolute; right: 1rem; bottom: -.5rem; width: 13rem; height: 7rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 64'%3E%3Cg fill='%23b08a45'%3E%3Cpath d='M58 4l2 6h-4zM59 10h2v10h-2z'/%3E%3Cpath d='M52 20h16v6H52zM50 26h20v4H50zM46 30h28v26H46z'/%3E%3Cpath d='M38 34l3-6 3 6v22h-6zM76 34l3-6 3 6v22h-6z'/%3E%3Cpath d='M26 40l2-5 2 5v16h-4zM88 40l2-5 2 5v16h-4z'/%3E%3Cpath d='M14 46h92v3H14z'/%3E%3Crect x='8' y='56' width='104' height='4' rx='1'/%3E%3C/g%3E%3Cg fill='%23c93d71'%3E%3Cpath d='M59 0h2v5h-2z'/%3E%3C/g%3E%3C/svg%3E") no-repeat center bottom / contain; opacity: .5; pointer-events: none;
}
.band-head h2::before, .copy h2::before {
  content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .45em;
  vertical-align: -.05em; 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 22c0-5-3-7-3-11a3 3 0 0 1 6 0c0 4-3 6-3 11z'/%3E%3Cpath fill='%23c93d71' d='M9 11c-2 0-4-2-4-5 2 0 4 1 4 3zM15 11c2 0 4-2 4-5-2 0-4 1-4 3z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.copy h2 { padding-left: 0; }
@media (max-width: 760px) {
  .hero-map::after { width: 9rem; height: 5rem; right: .5rem; opacity: .4; }
}


/* ---- blocks this site adds to the adultvietnam set ---- */
.hero-facts { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.hero-facts li { font-size: .9rem; color: var(--ink-mute); max-width: 100%; }
.hero-facts b { display: block; font-family: var(--display); font-size: 1.45rem; font-weight: 700; color: var(--ink); line-height: 1.1; }

.towns { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.towns li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .9rem; font-size: .95rem; }
.town-name { font-family: var(--display); font-weight: 500; margin-right: .4rem; }

.tree { list-style: none; padding: 0; max-width: var(--measure); }
.tree > li { border-top: 1px solid var(--line); padding: .8rem 0; }
.tree ul { list-style: none; padding-left: 1.1rem; margin: .5rem 0 0; display: grid; gap: .3rem; }
.tree a { text-decoration: none; }
.tree a:hover { text-decoration: underline; }

.owners { border: 1px solid var(--line); border-top: 4px solid var(--lotus); background: var(--panel); border-radius: var(--radius); padding: 1.3rem 1.4rem; margin: 2.5rem 0; max-width: var(--measure); }
.owners h2 { margin-top: 0; }

@media (max-width: 760px) {
  .hero-facts { gap: 1.1rem; }
  .towns { grid-template-columns: 1fr; }
}


/* ----------------------------------------------------------------------------
   One card, one size (Ben, 2026-10-12: "pas fan de la partie cards listing qui
   ne sont pas tous a la meme dimention").

   Measured before on /budapest/: cards 246, 342 and 433 px tall side by side,
   because the Gold cards spanned two columns and let their photo take the row
   height while the others were locked to 3/4. Now every card is one column,
   every photo is the same 4/3 crop, every card fills its row, and the name and
   the address are clamped so a long studio name cannot push a card taller than
   its neighbour. Gold stays unmistakable without being a different size: it
   comes first, keeps the brass frame, the warm ground and the badge.
   ---------------------------------------------------------------------------- */
.venues { grid-auto-rows: 1fr; align-items: stretch; }
/* Every card carries the Gold card's frame geometry, transparent when it is not Gold:
   without it the padding and the 2 px border made the Gold photo 13 px shorter than its
   neighbours and the names stopped lining up across the row. */
.venue { height: 100%; padding: .45rem; border: 2px solid transparent; border-radius: calc(var(--radius) + 4px); }

.venue-gold {
  grid-column: span 1;
  flex-direction: column;
  gap: .5rem;
  padding: .45rem;
  border: 2px solid var(--brass);
  background: linear-gradient(170deg, #fff9ec 0%, #fff 60%);
  box-shadow: 0 6px 18px rgba(176, 138, 69, .16);
}
.venue-gold .venue-photo { flex: 0 0 auto; align-self: auto; display: block; }
.venue-gold .venue-photo img,
.venue-gold .venue-photo-empty { aspect-ratio: 3 / 4; height: auto; min-height: 0; object-fit: cover; }
.venue-gold .venue-body { display: block; padding: 0 .35rem .35rem; }
.venue-gold .venue-name { font-size: 1rem; }

.venue-photo img, .venue-photo-empty { aspect-ratio: 3 / 4; }

/* The text block is a fixed shape too: two lines of name, one of address, one of
   facts. Clamping is what stops a long name from making one card taller. */
.venue-body { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 auto; }
.venue-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.5em; }
.venue-meta { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; min-height: 1.4em; }
.venue-facts { margin-top: auto; }

@media (max-width: 760px) {
  .venues { grid-template-columns: repeat(2, 1fr); }
  .venue-name { font-size: .95rem; }
}