/* sexpoland.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: #d4213d;
  --flag-white: #f5f5f7;
  --flag-blue: #d4213d;
  --flag-gold: #d4213d;   /* the Polish flag has two colours; blue and gold keep their names for every rule that reads them, and both resolve to the red */
  --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(--ink); border: 1px solid var(--line); 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(180deg, var(--flag-white) 0 50%, var(--flag-red) 50% 100%); border-bottom: 1px solid var(--line); }
.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: 1rem; width: 22rem; height: 20rem; background: url('/img/poland.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); }

/* Polish flourishes, the same design in the same slots (Ben, 2026-10-04: "en gardant le meme
   design a l'identique"): the poppy where the Japanese site had its sakura
   as the marker where the Thai site had its lotus, an Old Town roofline as the hero ornament, and a faint
   wycinanki, the folk papercut rosette, behind the hero. The flag red stays 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 3.2c2.1 0 3.6 1.7 3.6 3.6 1.9-.8 4 .1 4.7 1.9.7 1.8-.3 3.8-2.2 4.5 1.4 1.3 1.5 3.5.2 4.9-1.3 1.4-3.5 1.4-4.9.1-.4 2-2.3 3.2-4.2 2.8-1.9-.4-3.1-2.3-2.7-4.2-2 .4-3.9-.8-4.3-2.7-.4-1.9.8-3.8 2.7-4.3C4 7.9 5.1 6 6.9 5.4c1.8-.6 3.7.3 4.4 2 .2-2.5.4-3.4.7-4.2z'/%3E%3Ccircle cx='12' cy='12' r='3.1' fill='%23c93d71'/%3E%3Ccircle cx='12' cy='12' r='1.5' fill='%23b08a45'/%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='%23e8558a' d='M12 3.6c2 0 3.4 1.6 3.4 3.4 1.8-.8 3.8.1 4.5 1.8.6 1.7-.3 3.6-2.1 4.3 1.3 1.2 1.4 3.3.2 4.6-1.3 1.3-3.3 1.3-4.6.1-.4 1.9-2.2 3-4 2.6-1.8-.4-2.9-2.2-2.5-4-1.9.4-3.7-.7-4.1-2.6-.4-1.8.8-3.6 2.6-4.1C4.2 8 5.3 6.2 7 5.6c1.7-.6 3.5.3 4.2 1.9.2-2.4.4-3.3.8-3.9z'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23b08a45'/%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='%23e8558a' d='M12 3.6c2 0 3.4 1.6 3.4 3.4 1.8-.8 3.8.1 4.5 1.8.6 1.7-.3 3.6-2.1 4.3 1.3 1.2 1.4 3.3.2 4.6-1.3 1.3-3.3 1.3-4.6.1-.4 1.9-2.2 3-4 2.6-1.8-.4-2.9-2.2-2.5-4-1.9.4-3.7-.7-4.1-2.6-.4-1.8.8-3.6 2.6-4.1C4.2 8 5.3 6.2 7 5.6c1.7-.6 3.5.3 4.2 1.9.2-2.4.4-3.3.8-3.9z'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23b08a45'/%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: 0.5rem; width: 10rem; height: 10rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23b08a45' d='M8 60V34l5-5 5 5v26z M20 60V30l6-7 6 7v30z M34 60V36l5-5 5 5v24z M46 60V26l4-4 4 4v34z'/%3E%3Cpath fill='%23c93d71' d='M24 23l2-9 2 9z M48 22l2-8 2 8z'/%3E%3Crect x='4' y='60' width='56' height='3' fill='%23b08a45'/%3E%3C/svg%3E") no-repeat center / contain; opacity: 0.15; pointer-events: none; }
.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 4c3 8 12 17 20 20-8 3-17 12-20 20-3-8-12-17-20-20 8-3 17-12 20-20z'/%3E%3Ccircle cx='24' cy='24' r='6'/%3E%3Ccircle cx='0' cy='24' r='4'/%3E%3Ccircle cx='48' cy='24' r='4'/%3E%3Ccircle cx='24' cy='0' r='4'/%3E%3Ccircle cx='24' cy='48' r='4'/%3E%3C/g%3E%3Ccircle cx='24' cy='24' r='1.8' fill='%23b08a45' fill-opacity='.18'/%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 24 24'%3E%3Cpath fill='%23ffffff' d='M12 3.6c2 0 3.4 1.6 3.4 3.4 1.8-.8 3.8.1 4.5 1.8.6 1.7-.3 3.6-2.1 4.3 1.3 1.2 1.4 3.3.2 4.6-1.3 1.3-3.3 1.3-4.6.1-.4 1.9-2.2 3-4 2.6-1.8-.4-2.9-2.2-2.5-4-1.9.4-3.7-.7-4.1-2.6-.4-1.8.8-3.6 2.6-4.1C4.2 8 5.3 6.2 7 5.6c1.7-.6 3.5.3 4.2 1.9.2-2.4.4-3.3.8-3.9z'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23b08a45'/%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%3Cg fill='%23b08a45'%3E%3Cpath d='M12 12C9 10.5 7.8 6.5 9.6 3.2 10.3 2 11.3 2 12 4.1 12.7 2 13.7 2 14.4 3.2 16.2 6.5 15 10.5 12 12z'/%3E%3Cpath d='M12 12C9 10.5 7.8 6.5 9.6 3.2 10.3 2 11.3 2 12 4.1 12.7 2 13.7 2 14.4 3.2 16.2 6.5 15 10.5 12 12z' transform='rotate(72 12 12)'/%3E%3Cpath d='M12 12C9 10.5 7.8 6.5 9.6 3.2 10.3 2 11.3 2 12 4.1 12.7 2 13.7 2 14.4 3.2 16.2 6.5 15 10.5 12 12z' transform='rotate(144 12 12)'/%3E%3Cpath d='M12 12C9 10.5 7.8 6.5 9.6 3.2 10.3 2 11.3 2 12 4.1 12.7 2 13.7 2 14.4 3.2 16.2 6.5 15 10.5 12 12z' transform='rotate(216 12 12)'/%3E%3Cpath d='M12 12C9 10.5 7.8 6.5 9.6 3.2 10.3 2 11.3 2 12 4.1 12.7 2 13.7 2 14.4 3.2 16.2 6.5 15 10.5 12 12z' transform='rotate(288 12 12)'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='2.6' fill='%23e8558a'/%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: #fff; }
.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-white); color: var(--flag-red); text-decoration: none; font-weight: 700; padding: 0.8rem 1.4rem; border-radius: 999px; white-space: nowrap; }
.submit-band-cta:hover { background: var(--ink); color: #fff; }

/* 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 Poland 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(188, 0, 45, 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 header in one row, ported 2026-10-14 from the Hungary sites, where Ben called
   the stacked version "une cata". Measured here before: 115 px over three rows (the
   brand; the language switcher and Live cams; the category nav), a seventh of the
   screen before any content. Now the brand and Live cams share one line. The
   categories stay reachable from the home cards and the footer.
   ---------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .masthead { flex-wrap: nowrap; gap: .6rem; padding-top: .5rem; padding-bottom: .5rem; }
  .brand { min-width: 0; }
  .brand-name { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .brand-mark { flex: 0 0 auto; width: 28px; height: 28px; }
  .topnav { display: none; }
  .masthead-actions { margin-left: auto; flex: 0 0 auto; flex-wrap: nowrap; gap: .4rem; }
  .masthead-actions .submit { display: none; }
  .masthead-actions .cams { padding: .4rem .7rem; font-size: .82rem; white-space: nowrap; }
  /* a language switcher, where the site has one, keeps only its flag on a phone */
  .langs-toggle { font-size: 0; gap: 0; padding: .35rem .45rem; }
  .langs-toggle .flag { margin: 0; }
  /* 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; }
}

/* Ported 2026-10-14 from eroticmassagehungary.co. */
/* ----------------------------------------------------------------------------
   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; }
}