/* ============================================================================
   PATTAYA.GYM — DESIGN SYSTEM 2026 (light + volt)
   ============================================================================
   Replaces the 2025 black/neon/marquee stylesheet.

   WHAT CHANGED AND WHY
   - Light canvas, dark footer panel.
   - ONE accent (volt #cbff3c) instead of five. Volt is a FILL, never text:
     every volt surface carries near-black ink. `--accent-ink` is the AA-safe
     variant for anything volt-flavoured that has to be readable as text.
   - No glow, no neon text-shadow, no marquee, no scroll-progress bar.
   - Scales: 1.200 type ratio, 0.85rem card radius, one shadow + motion ramp.

   LEGACY VARIABLE NAMES ARE LOAD-BEARING — DO NOT RENAME
   The generated HTML carries ~8,300 inline `style=` attributes that reference
   --s-*, --surface, --line, --r-lg, --r-pill, --muted, --text, --text-2,
   --hint, --cyan, --pink, --mint, --yellow, --font-mono, --font-display,
   --max, --pad, --t-fast and --text-muted. No stylesheet rule can reach an
   inline style, so those names are kept and simply repointed at the new
   palette. Renaming one silently breaks hundreds of pages.

   FONT URLS: keep the `/fonts/<name>.woff2?v=<digits>` shape — build-v2.js
   syncCssFontVersion() rewrites that query string on every build.
   ============================================================================ */

/* ============ FONTS (self-hosted; no third-party requests) ============ */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal; font-weight: 300 700; font-display: optional;
  src: url("/fonts/space-grotesk.woff2?v=501") format("woff2-variations");
}
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: optional; src: url("/fonts/inter-400.woff2?v=501") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: optional; src: url("/fonts/inter-500.woff2?v=501") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: optional; src: url("/fonts/inter-600.woff2?v=501") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: optional; src: url("/fonts/inter-700.woff2?v=501") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: optional; src: url("/fonts/jetbrains-mono-500.woff2?v=501") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: optional; src: url("/fonts/jetbrains-mono-600.woff2?v=501") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: optional; src: url("/fonts/jetbrains-mono-700.woff2?v=501") format("woff2"); }

/* ============ TOKENS ============ */
:root {
  /* ---- Palette: semantic (use these in new code) ---- */
  --brand:         #4d7c0f;  /* fill: chips, table headers, large areas       */
  --brand-ink:     #3f6212;  /* AA-safe: link text, primary button background */
  --brand-bright:  #cbff3c;  /* on dark surfaces only                          */
  --accent:        #cbff3c;  /* THE volt. A fill. Never a text colour.        */
  --accent-ink:    #4c5f00;  /* AA-safe volt-flavoured text                   */

  --canvas:        #f7f8f3;
  --sunken:        #edf0e5;
  --ink:           #14180f;
  --ink-muted:     #5b6151;
  --ink-subtle:    #6b7262;
  --line-strong:   #c6ccb6;

  /* S2-H1, 2026-07-29 - control boundary.
     --line (#dfe3d4) is 1.22:1 against the canvas and --line-strong is 1.55:1.
     Both are fine for a decorative divider and both fail WCAG 2.2 AA 1.4.11,
     which requires 3:1 for the visual information needed to identify a control.
     Inputs, selects and outlined buttons had no other boundary, so on this
     canvas they were effectively borderless. #7f8775 clears 3:1 against every
     surface the site uses - canvas 3.50, sunken 3.36, white 3.73, surface-3
     3.23 - and is the lightest value that does. Dividers keep --line. */
  --line-control:  #7f8775;

  /* Dark panel — footer, dark bands */
  --panel:         #171c11;
  --panel-sunken:  #10140b;
  --panel-line:    #2b3223;
  --panel-ink:     #f2f4ec;
  --panel-muted:   #9aa38d;
  --panel-subtle:  #7e876f;

  /* Status roles — not brand colours */
  --ok:      #4ade80; --ok-ink:     #2f6b1f;
  --warn:    #ffb020; --warn-ink:   #795000;
  --info:    #38bdf8; --info-ink:   #0678aa;
  --danger:  #f87171; --danger-ink: #b42318;

  /* ---- Legacy names — repointed, NOT renamed (see header note) ---- */
  --bg:          #f7f8f3;
  --surface:     #ffffff;
  --surface-2:   #ffffff;
  --surface-3:   #edf0e5;
  --card:        #ffffff;
  --line:        #dfe3d4;
  --line-soft:   #eaeee1;
  --border:      #dfe3d4;

  --text:        #14180f;
  --text-2:      #5b6151;
  --muted:       #5b6151;
  --text-muted:  #5b6151;  /* was referenced on 15 pages but never declared */
  --hint:        #6b7262;
  --pure-white:  #ffffff;

  /* The old five accents now all resolve into the single volt/brand family,
     which is what flattens the multi-colour look inside inline styles too. */
  --cyan:   #3f6212;
  --mint:   #3f6212;
  --pink:   #4c5f00;
  --yellow: #4c5f00;
  --red:    #b42318;
  --orange: #9e6600;

  /* Glow tokens neutralised rather than deleted: any stylesheet or inline rule
     still referencing them now gets a flat, tasteful shadow instead of neon. */
  --glow-pink:   0 1px 2px rgba(20, 24, 15, 0.06);
  --glow-cyan:   0 1px 2px rgba(20, 24, 15, 0.06);
  --glow-yellow: 0 1px 2px rgba(20, 24, 15, 0.06);
  --glow-mint:   0 1px 2px rgba(20, 24, 15, 0.06);
  --glow-red:    0 1px 2px rgba(20, 24, 15, 0.06);

  /* ---- Faces ---- */
  --font-display: "Space Grotesk", "Inter", system-ui, -apple-system, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  /* ---- Type scale: 1.200 minor third (network token) ---- */
  --text-2xs:  0.694rem;
  --text-xs:   0.833rem;
  --text-sm:   0.9rem;
  --text-base: 1rem;
  --text-lg:   1.2rem;
  --text-xl:   1.44rem;
  --text-2xl:  1.728rem;
  --text-3xl:  2.074rem;
  --text-4xl:  2.488rem;

  /* ---- Space ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 28px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 56px; --s-20: 64px;

  /* ---- Radius ---- */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-flat:   0 1px 2px rgba(20, 24, 15, 0.05);
  --shadow-soft:   0 1px 2px rgba(20, 24, 15, 0.05), 0 8px 24px rgba(20, 24, 15, 0.06);
  --shadow-raised: 0 2px 4px rgba(20, 24, 15, 0.07), 0 16px 40px rgba(20, 24, 15, 0.10);
  --shadow-card:   var(--shadow-soft);
  --panel-soft:    #202719;

  /* ---- Layout ---- */
  --max: 1120px;
  --pad: 20px;
  --nav-h: 60px;

  /* ---- Motion ---- */
  --t-fast: 120ms;
  --t-base: 220ms;
  --easing: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: light;
  accent-color: var(--brand-ink);
}
@media (min-width: 768px) { :root { --pad: 32px; } }

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: clip; }
html {
  background: var(--canvas);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  scroll-behavior: smooth;
}
body {
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--accent); color: var(--ink); }
[hidden] { display: none !important; }

/* ============ SKIP LINK ============ */
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--ink); color: #fff;
  padding: 0.7rem 1.1rem; border-radius: var(--r-md);
  font-weight: 600; font-size: var(--text-sm);
  transition: top var(--t-fast) var(--easing);
}
.skip-link:focus { top: var(--s-4); }

/* ============ LAYOUT ============ */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}
.section { padding-block: var(--s-12); }
@media (min-width: 900px) { .section { padding-block: var(--s-16); } }
.section + .section { padding-top: 0; }

/* ============ TYPOGRAPHY ============ */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

/* Section eyebrow — small caps label, optionally numbered.
   `.num` is the leading counter; it is the one place volt appears as text-like
   colour, and it uses the AA-safe accent-ink, never raw volt. */
.eyebrow {
  display: flex; align-items: center; gap: 0.55rem;
  margin-bottom: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
}
.eyebrow .num, .num {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--accent-ink);
  font-variant-numeric: tabular-nums;
}
.eyebrow::after {
  content: ""; flex: 1 1 auto; height: 1px;
  background: var(--line); min-width: 12px;
}

.h-section {
  font-size: clamp(1.5rem, 3.2vw, var(--text-2xl));
  margin-bottom: var(--s-3);
}

/* Heading highlight spans. The old palette gave every heading a different neon
   word; they now all resolve to one calm family. */
.accent-cyan, .accent-mint { color: var(--brand-ink); }
.accent-pink, .accent-yellow { color: var(--accent-ink); }

.lede {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 68ch;
  text-wrap: pretty;
}

/* ============ HEADER ============
   Slim, sticky, one row, hairline bottom. The old header was a 2-row dark bar
   with a starred neon CTA; this is 60px of white with a volt pill. */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-row {
  width: 100%; max-width: var(--max);
  margin-inline: auto;
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
  height: var(--nav-h);
  display: flex; align-items: center; gap: var(--s-5);
}
.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.75rem;
  font-family: var(--font-display);
  font-size: 1.06rem; font-weight: 700; letter-spacing: -0.03em;
  color: var(--ink); white-space: nowrap; flex-shrink: 0;
}
/* Brand mark: volt tile with a dark ring glyph. Drawn in CSS so no extra
   request, and it survives at any size. */
.brand::before {
  content: "";
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 8px;
  background: var(--accent);
  box-shadow: inset 0 0 0 4px var(--ink), inset 0 0 0 6px var(--accent);
}
.brand .dot { color: var(--brand-ink); }

.nav-links {
  display: none;
  align-items: center; gap: var(--s-5);
  margin-left: auto;
  font-size: var(--text-sm); font-weight: 500;
}
@media (min-width: 1040px) { .nav-links { display: flex; } }
.nav-links a {
  color: var(--ink-muted);
  padding-block: 4px;
  border-bottom: 2px solid transparent;
  transition: color var(--t-fast) var(--easing), border-color var(--t-fast) var(--easing);
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.nav-links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand-ink); }
.nav-tools-link { color: var(--ink-subtle) !important; }
.nav-tools-link:hover { color: var(--ink) !important; }

.nav-cta {
  display: none;
  align-items: center; gap: 0.4rem;
  min-height: 2.75rem;
  background: var(--accent); color: var(--ink);
  font-size: var(--text-sm); font-weight: 700;
  padding: 0.5rem 1rem; border-radius: var(--r-pill);
  border: 1px solid rgba(20, 24, 15, 0.1);
  white-space: nowrap; flex-shrink: 0;
  transition: background-color var(--t-fast) var(--easing), transform var(--t-fast) var(--easing);
}
@media (min-width: 720px) { .nav-cta { display: inline-flex; margin-left: auto; } }
@media (min-width: 1040px) { .nav-cta { margin-left: 0; } }
.nav-cta:hover { background: var(--ink); color: var(--accent); }
.nav-cta:active { transform: translateY(1px); }

.nav-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 44px; height: 44px; margin-left: auto;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  align-items: center; flex-shrink: 0;
  transition: border-color var(--t-fast) var(--easing);
}
.nav-burger:hover { border-color: var(--line-strong); }
@media (min-width: 1040px) { .nav-burger { display: none; } }
@media (min-width: 720px) { .nav-burger { margin-left: var(--s-2); } }
.nav-burger-bar {
  display: block; width: 17px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--t-fast) var(--easing), opacity var(--t-fast) var(--easing);
}
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(2) { opacity: 0; }
.nav-burger[aria-expanded="true"] .nav-burger-bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile drawer */
.nav-mobile {
  position: sticky; top: var(--nav-h); z-index: 99;
  display: grid; gap: 2px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  padding-top: var(--s-3);
  padding-right: max(var(--pad), env(safe-area-inset-right));
  padding-bottom: max(var(--s-4), env(safe-area-inset-bottom));
  padding-left: max(var(--pad), env(safe-area-inset-left));
  max-height: calc(100vh - var(--nav-h));
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
}
@media (min-width: 1040px) { .nav-mobile { display: none !important; } }
.nav-mobile-link {
  padding: 0.7rem 0.25rem;
  font-size: var(--text-base); font-weight: 500;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
}
.nav-mobile-link[aria-current="page"] {
  padding-inline: var(--s-3);
  border-radius: var(--r-md);
  background: var(--sunken);
  color: var(--brand-ink);
  font-weight: 750;
}
.nav-mobile-link:hover { color: var(--brand-ink); }
.nav-mobile-group {
  margin-top: var(--s-3);
  padding: var(--s-2) 0.25rem 0;
  color: var(--ink-subtle);
  font: 700 var(--text-2xs)/1.2 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav-mobile-group:first-child { margin-top: 0; }
.nav-mobile-cta {
  margin-top: var(--s-3);
  display: block; text-align: center;
  background: var(--accent); color: var(--ink);
  font-weight: 700; padding: 0.8rem 1rem;
  border-radius: var(--r-pill);
}
body.nav-open { overflow: hidden; }

body.nav-open .privacy-consent { display: none; }

/* ============ BREADCRUMB ============ */
.site-breadcrumb {
  max-width: var(--max);
  margin-inline: auto;
  padding: var(--s-5) var(--pad) 0;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center;
}
.site-breadcrumb a:hover { color: var(--brand-ink); text-decoration: underline; }
.u-crumb-sep { color: var(--line-strong); }

/* ============ HERO ============
   No marquee, no gradient wash, no oversized fluid type. */
.hero {
  padding-block: var(--s-12) var(--s-10);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 92% -20%, rgba(203, 255, 60, 0.16) 0%, rgba(203, 255, 60, 0) 60%),
    var(--canvas);
}
@media (min-width: 900px) { .hero { padding-block: var(--s-16) var(--s-12); } }
.hero-inner {
  width: 100%; max-width: var(--max);
  margin-inline: auto; padding-inline: var(--pad);
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--text-2xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.3rem 0.7rem;
  margin-bottom: var(--s-4);
}
.hero-h1 {
  font-size: clamp(1.95rem, 5.4vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
  max-width: 22ch;
}
.hero-lede {
  margin-top: var(--s-4);
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 58ch;
  text-wrap: pretty;
}
.hero-meta {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-subtle);
}
.hub-hero { padding-block: var(--s-10) var(--s-8); }
.hub-hero .hero-h1 { max-width: 26ch; }
.hub-hero-sub { display: block; color: var(--ink-muted); font-size: 0.62em; letter-spacing: -0.02em; }
.hub-hero--area { background: var(--canvas); }

/* Homepage search block, sits directly under the h1 */

/* Inline editorial links must remain identifiable without relying on color. */
.lede a.u-cyan {
  text-decoration: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 2.875rem;
  padding: 0.68rem 1rem;
  border-radius: var(--r-md);
  font-size: var(--text-sm); font-weight: 600; line-height: 1.1;
  text-align: center; white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--t-fast) var(--easing),
              border-color var(--t-fast) var(--easing),
              color var(--t-fast) var(--easing),
              transform var(--t-fast) var(--easing);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent); color: var(--ink);
  border-color: rgba(20, 24, 15, 0.18);
  box-shadow: 0 1px 0 rgba(20, 24, 15, 0.14), 0 8px 18px rgba(76, 95, 0, 0.10);
}
.btn-primary:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-secondary { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-secondary:hover { background: var(--brand-ink); border-color: var(--brand-ink); }
.btn-tertiary { background: var(--sunken); color: var(--ink); border-color: var(--line-control); }
.btn-tertiary:hover { background: var(--surface); border-color: var(--line-strong); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-control); }
.btn-ghost:hover { border-color: var(--line-strong); background: var(--sunken); }
.btn:disabled {
  transform: none;
  border-color: var(--line);
  background: var(--sunken);
  color: var(--ink-subtle);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 0.72;
}
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
 .home-more-toggle { font-size: var(--text-xs); }

/* Progressive disclosure of the secondary venue CTAs */

/* ============ CARD BASE ============ */
.card, .cat-venue-card, .numcard, .intent-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-flat);
}

/* ============ GRIDS ============ */
.numlist, .guide-hub-grid, .intent-grid, .favorites-list {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .numlist, .guide-hub-grid, .intent-grid, .favorites-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 980px) {
  .numlist, .guide-hub-grid, .favorites-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .intent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.intent-grid-compact { gap: var(--s-3); }

/* ============ VENUE LISTING CARD ============ */
.cat-venue-card {
  display: flex; flex-direction: column;
  padding: var(--s-5);
  transition: transform var(--t-base) var(--easing),
              box-shadow var(--t-base) var(--easing),
              border-color var(--t-base) var(--easing);
}
.cat-venue-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: var(--line-strong);
}
.cv-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-2);
}
.cv-head h3 {
  font-size: var(--text-base); font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.3;
}
.cv-head h3 a { color: var(--ink); }
.cat-venue-card:hover .cv-head h3 a { color: var(--brand-ink); }
.cv-meta {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-subtle);
  margin-bottom: 2px;
}
.cv-meta + .cv-meta { color: var(--accent-ink); letter-spacing: 0.04em; text-transform: none; }
.record-status {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
  margin-top: var(--s-2);
  padding: 0.35rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--warn-ink) 38%, #fff);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--warn) 14%, #fff);
  color: var(--warn-ink);
  font: 700 var(--text-2xs)/1.2 var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.record-status.is-closed {
  border-color: color-mix(in srgb, var(--danger-ink) 35%, #fff);
  background: color-mix(in srgb, var(--danger) 12%, #fff);
  color: var(--danger-ink);
}
.cat-venue-card.is-unresolved { border-color: color-mix(in srgb, var(--warn-ink) 34%, var(--line)); }
.cat-venue-card.is-unresolved .cv-cta { color: var(--warn-ink); }
.cat-venue-card > p {
  font-size: var(--text-sm); line-height: 1.55;
  color: var(--ink-muted);
  margin-top: var(--s-2);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cv-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--s-3); }
.cv-pill {
  font-size: var(--text-2xs); font-weight: 600;
  padding: 0.18rem 0.5rem; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 22%, #fff);
  color: var(--accent-ink);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, #fff);
}
.cv-pill-tag {
  background: var(--sunken); color: var(--ink-muted);
  border-color: var(--line);
}
.cv-price-unavailable {
  display: inline-flex;
  align-items: center;
  color: var(--ink-subtle);
  font: 600 var(--text-2xs)/1.2 var(--font-mono);
}
.cv-cta {
  margin-top: auto; padding-top: var(--s-4);
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-xs); font-weight: 700;
  color: var(--brand-ink);
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.cat-venue-card:hover .cv-cta { gap: 0.55rem; }
.cv-cta::after { content: "\2192"; transition: transform var(--t-fast) var(--easing); }

/* ============ NUMBERED CARD ============ */
.numcard {
  display: block; padding: var(--s-5);
  transition: transform var(--t-base) var(--easing),
              box-shadow var(--t-base) var(--easing),
              border-color var(--t-base) var(--easing);
}
a.numcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: var(--line-strong);
}
.numcard-head {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin-bottom: var(--s-2);
}
.numcard-num {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700;
  color: var(--accent-ink); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.numcard-title {
  font-size: var(--text-base); font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.3;
}
a.numcard:hover .numcard-title { color: var(--brand-ink); }
.numcard-body {
  font-size: var(--text-sm); line-height: 1.55; color: var(--ink-muted);
}

/* ============ INTENT ROUTER ("start here") ============ */
.intent-card {
  display: block; padding: var(--s-5);
  transition: transform var(--t-base) var(--easing),
              box-shadow var(--t-base) var(--easing),
              border-color var(--t-base) var(--easing);
}
.intent-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
  border-color: var(--line-strong);
}
.intent-card-tag {
  font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-subtle); margin-bottom: var(--s-2);
}
.intent-card-title {
  font-family: var(--font-display);
  font-size: var(--text-base); font-weight: 700;
  letter-spacing: -0.015em; margin-bottom: 0.35rem;
}
.intent-card:hover .intent-card-title { color: var(--brand-ink); }
.intent-card-desc { font-size: var(--text-sm); line-height: 1.5; color: var(--ink-muted); }
.intent-card-compact { padding: var(--s-4); }
.intent-card-compact .intent-card-desc { font-size: var(--text-xs); }

/* ============ CHANNEL CARDS (social / contact) ============ */
/* Platform tint: a 3px left edge, the one place brand colours differ per card */

/* ============ TRUST BAR / PILLS ============ */

/* ============ FAVOURITES ============ */
.favorite-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  flex-shrink: 0;
  min-height: 2.75rem;
  padding: 0.58rem 0.8rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-control);
  background: var(--surface);
  font-size: var(--text-xs); font-weight: 600;
  color: var(--ink-muted);
  transition: border-color var(--t-fast) var(--easing), color var(--t-fast) var(--easing);
}
.favorite-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.favorite-btn.is-saved {
  border-color: color-mix(in srgb, var(--accent) 55%, #fff);
  background: color-mix(in srgb, var(--accent) 22%, #fff);
  color: var(--accent-ink);
}
.fav-heart { line-height: 1; font-size: 0.9em; }
.fav-btn-label { white-space: nowrap; }
.favorite-list-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
#pg-favorites-widget {
  position: fixed;
  z-index: 85;
  right: max(var(--s-5), env(safe-area-inset-right));
  bottom: calc(max(var(--s-5), env(safe-area-inset-bottom)) + 56px);
}
.pg-fw-inner {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--panel-line);
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--panel-ink);
  box-shadow: var(--shadow-raised);
  font-size: var(--text-xs);
}
.pg-fw-inner:hover { border-color: var(--brand-bright); color: var(--brand-bright); }
.pg-fw-heart { color: var(--brand-bright); }

/* ============ PROSE / EDITORIAL BODY ============ */
.venue-body, .u-prose {
  font-size: var(--text-base);
  line-height: 1.72;
  color: var(--ink);
  max-width: 68ch;
  text-wrap: pretty;
}
.venue-body > * + *, .u-prose > * + * { margin-top: var(--s-4); }
.venue-body h2, .u-prose h2 {
  font-size: var(--text-xl);
  margin-top: var(--s-10);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  letter-spacing: -0.025em;
}
.venue-body h2:first-child, .u-prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.venue-body h3, .u-prose h3 {
  font-size: var(--text-lg); margin-top: var(--s-6);
}
.venue-body p, .u-prose p { color: var(--ink); }
.venue-body ul, .venue-body ol, .u-prose ul, .u-prose ol {
  padding-left: 1.15rem; display: grid; gap: 0.5rem;
}
.venue-body ul, .u-prose ul { list-style: none; }
.venue-body ul > li, .u-prose ul > li { position: relative; padding-left: 0.85rem; }
.venue-body ul > li::before, .u-prose ul > li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 2px; background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(20, 24, 15, 0.18);
}
.venue-body ol, .u-prose ol { list-style: decimal; }
.venue-body ol > li::marker, .u-prose ol > li::marker {
  font-family: var(--font-mono); font-weight: 700; color: var(--accent-ink);
}
.venue-body a, .u-prose a {
  color: var(--brand-ink); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, var(--brand-ink) 35%, transparent);
}
.venue-body a:hover, .u-prose a:hover { text-decoration-color: var(--brand-ink); }
.venue-body strong, .u-prose strong { font-weight: 700; color: var(--ink); }
.venue-body code, .u-prose code {
  font-family: var(--font-mono); font-size: 0.88em;
  background: var(--sunken); padding: 0.1em 0.35em; border-radius: var(--r-sm);
}
.venue-body table, .u-prose table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-sm);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

/* Server-rendered guide navigation and keyboard-scrollable data tables. */
.guide-toc {
  margin: var(--s-6) 0 var(--s-8);
  padding: var(--s-5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, #fff), var(--surface) 52%);
  box-shadow: var(--shadow-flat);
}
.guide-toc-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
  color: var(--ink-subtle);
  font: 700 var(--text-2xs)/1.2 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.guide-toc-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.venue-body .guide-toc-list,
.u-prose .guide-toc-list { margin: 0; padding: 0; list-style: none; }
.venue-body .guide-toc-list > li,
.u-prose .guide-toc-list > li { padding-left: 0; }
.venue-body .guide-toc-list > li::before,
.u-prose .guide-toc-list > li::before { content: none; }
.venue-body .guide-toc-list > li::marker,
.u-prose .guide-toc-list > li::marker { content: ""; }
.guide-toc-list a {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.75rem;
  padding: .55rem .7rem;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 650;
  line-height: 1.3;
  text-decoration: none;
}
.guide-toc-list a:hover,
.guide-toc-list a:focus-visible { border-color: var(--line-control); background: var(--surface); }
.guide-toc-list a[aria-current="location"] {
  border-color: color-mix(in srgb, var(--brand-ink) 42%, var(--line));
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--brand-ink);
}
.guide-toc-number {
  flex: 0 0 auto;
  color: var(--brand-ink);
  font: 700 var(--text-2xs)/1 var(--font-mono);
  letter-spacing: .05em;
}
.guide-toc-label { min-width: 0; }
.u-prose h2[id], .venue-body h2[id] { scroll-margin-top: calc(var(--nav-h) + var(--s-5)); }

/* ============ VENUE PAGE ============ */
.taxonomy-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.taxonomy-link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding: 0.58rem 0.85rem;
  border: 1px solid var(--line-control);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
}
.taxonomy-link:hover { border-color: var(--ink); background: var(--sunken); }
.taxonomy-count {
  color: var(--brand-ink);
  font: 700 var(--text-xs)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Jump nav — injected by the inline script on venue pages with 3+ sections */
.jump-nav-pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.jump-nav-pills a {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 2.75rem;
  background: var(--surface); border: 1px solid var(--line-control);
  border-radius: var(--r-md);
  padding: 0.5rem 0.75rem;
  font-size: var(--text-xs); font-weight: 500; color: var(--ink);
  transition: border-color var(--t-fast) var(--easing);
}
.jump-nav-pills a:hover { border-color: var(--brand-ink); color: var(--brand-ink); }
.jump-nav-pills a.is-active {
  border-color: var(--ink);
  background: var(--ink);
  color: #fff;
}

/* Collapsible venue sections (mobile) */
@media (max-width: 899px) {
  .jump-nav-pills {
    flex-wrap: nowrap;
    margin-inline: calc(var(--s-4) * -1);
    padding: 2px var(--s-4) var(--s-2);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .jump-nav-pills::-webkit-scrollbar { display: none; }
  .jump-nav-pills a { flex: 0 0 auto; }
}

/* Recently viewed */

/* ============ GUIDES ============ */

/* Guide discovery: compact intent routing first, complete SSR library second. */

.guide-filter-status {
  color: var(--ink-muted);
  font: 700 var(--text-2xs)/1.35 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.guide-filter-empty { padding: var(--s-4); border-radius: var(--r-md); background: var(--sunken); color: var(--ink-muted); }
.guide-filter-empty a { color: var(--brand-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
 .taxonomy-guide-strip, .area-cat-local-intro {
  margin-top: var(--s-6);
}

/* ============ FAQ ============ */

/* ============ TOOLS: SEARCH ============ */

/* ============ TOOLS: COMPARE ============ */

/* ============ TOOLS: PLAN ============ */

/* ============ SPORT STATS / HOMEPAGE STRIP ============ */
/* legacy stat cards (sport-stats dashboard) */

/* ============ CHANGELOG ============ */

/* ============ BACK TO TOP ============ */
.back-to-top {
  position: fixed;
  right: max(var(--s-5), env(safe-area-inset-right));
  bottom: max(var(--s-5), env(safe-area-inset-bottom));
  z-index: 90;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 50%;
  box-shadow: var(--shadow-soft);
  opacity: 0; pointer-events: none;
  transform: translateY(6px);
  transition: opacity var(--t-base) var(--easing), transform var(--t-base) var(--easing);
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.back-to-top:hover { background: var(--accent); border-color: rgba(20, 24, 15, 0.14); }
/* The scroll-progress bar was pure decoration on a directory. Neutralised. */
.progress-bar { display: none !important; }
/* The marquee tickers are gone; this kills any stragglers the sweep missed. */

/* ============================================================================
   FOOTER — FOOTER-SPEC-2026-V3
   ============================================================================
   Deliberately simple publication structure:
   brand block + one-line description + publisher credit + social row on the
   left, four link columns on the right, one legal bar, one small-print line.

   The publisher portrait, contact routes and socials stay together. Four
   task-based columns carry useful internal links; legal metadata gets one bar.

   Dark panel on a light site. The volt only ever appears as a fill (the mark)
   or via --brand-bright on dark, never as small text.
   ============================================================================ */
.footer {
  margin-top: var(--s-20);
  background: var(--panel);
  color: var(--panel-muted);
  border-top: 1px solid var(--panel-line);
}
.footer-wrap {
  width: 100%; max-width: var(--max);
  margin-inline: auto;
  padding: var(--s-16) var(--pad) var(--s-12);
}
.footer-top {
  display: grid;
  gap: var(--s-10);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .footer-top { grid-template-columns: minmax(0, 1fr) 2fr; gap: var(--s-16); }
}

/* --- Brand block --- */
.footer-brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display);
  font-size: 1.16rem; font-weight: 700; letter-spacing: -0.03em;
  color: var(--panel-ink);
}
.footer-mark {
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--accent);
  box-shadow: inset 0 0 0 5px var(--panel), inset 0 0 0 7px var(--accent);
}
.footer-brand .accent { color: var(--brand-bright); }
.footer-desc {
  margin-top: var(--s-4);
  max-width: 34ch;
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--panel-muted);
}
.footer-desc strong { color: var(--panel-ink); font-weight: 600; }
.footer-people { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); }
.footer-people-photo { width: 48px; height: 48px; flex: 0 0 48px; overflow: hidden; border: 1px solid var(--panel-line); border-radius: 50%; background: var(--panel-soft); }
.footer-people-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.footer-publisher-copy { display: grid; gap: 0.12rem; color: var(--panel-muted); font-size: var(--text-sm); line-height: 1.45; }
.footer-publisher-copy strong { color: var(--panel-ink); font-weight: 700; }
.footer-publisher-copy a { justify-self: start; color: var(--brand-bright); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.footer-contact {
  display: flex; flex-wrap: wrap; gap: 0.45rem 1rem;
  margin-top: var(--s-4);
  font-size: var(--text-sm);
}
.footer-contact a { display: inline-flex; align-items: center; min-height: 44px; color: var(--panel-ink); text-decoration: underline; text-underline-offset: 3px; }
.footer-contact a:hover { color: var(--brand-bright); }
.footer-social {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-4);
}
.footer-social-btn {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid var(--panel-line);
  color: var(--panel-muted);
  transition: border-color var(--t-fast) var(--easing), color var(--t-fast) var(--easing);
}
.footer-social-btn:hover { border-color: var(--brand-bright); color: var(--brand-bright); }
.footer-social-btn svg { width: 16px; height: 16px; }

/* --- Link columns --- */
.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-8);
  font-size: var(--text-sm);
}
@media (min-width: 640px) { .footer-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer-col-h {
  margin-bottom: var(--s-3);
  font-family: var(--font-body);
  font-size: var(--text-2xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--panel-ink);
}
.footer-col ul { display: grid; gap: 0.72rem; }
.footer-col a {
  color: var(--panel-muted);
  transition: color var(--t-fast) var(--easing);
}
.footer-col a:hover { color: var(--brand-bright); }
@media (max-width: 639px) {
  .footer-col a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* --- Legal bar --- */
.footer-base {
  margin-top: var(--s-12);
  padding-top: var(--s-6);
  border-top: 1px solid var(--panel-line);
  display: flex; flex-direction: column; gap: var(--s-3);
  font-size: var(--text-xs);
  color: var(--panel-muted);
}
@media (min-width: 640px) {
  .footer-base { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.1rem; }
.footer-legal :where(a, button) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--panel-muted);
}
.footer-legal button {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.footer-legal :where(a, button):hover { color: var(--brand-bright); }
.footer-note {
  margin-top: var(--s-4);
  max-width: 92ch;
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--panel-subtle);
}
.footer-updated-line {
  margin-top: var(--s-4);
  font-size: var(--text-xs);
  color: var(--panel-muted);
}
/* legacy wrappers kept harmless in case a page still carries them */

/* Publication accountability and public data surfaces. */

/* ============ UTILITIES (generated markup depends on every one of these) ============ */
.u-pt-0 { padding-top: 0 !important; }
.u-pt-4 { padding-top: var(--s-4) !important; }
.u-pt-10-pb-8 { padding-top: var(--s-12) !important; padding-bottom: var(--s-10) !important; }
.u-mt-5 { margin-top: var(--s-5) !important; }
.u-mb-3 { margin-bottom: var(--s-3) !important; }
.u-max-760 { max-width: 760px; }
.u-wrap-max { max-width: var(--max); }
.u-text-bold { font-weight: 700; color: var(--ink); }
.u-muted { color: var(--ink-muted); }
.u-cyan { color: var(--brand-ink); }
.u-text-left { text-align: left !important; }
.u-text-left-ml0 { text-align: left !important; margin-left: 0 !important; }
.u-prose { }

/* ============ STATE + A11Y HELPERS ============ */
.is-expanded { }
.active, .is-active { }
/* The old neon star separator. Kept as a quiet dot so any leftover markup
   does not render a bright glyph. */
.star { color: var(--line-strong); }
.dot { color: var(--brand-ink); }

/* ============ LIVE CARD (homepage status) ============ */

/* ============ MOTION + PRINT ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .cat-venue-card:hover, .numcard:hover, .intent-card:hover { transform: none; }
}

/* Source-bounded location tools — /map/ and /find-my-coach/. */
@media print {
  .nav, .nav-mobile, .footer, .back-to-top, .btn-row, .favorite-btn { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .hero { border: 0; background: none; padding-block: 0 var(--s-4); }
  .section { padding-block: var(--s-4); }
  a { text-decoration: underline; }
  .venue-body, .u-prose { max-width: none; }
}

/* ============ REMAINING VOCABULARY ============
   Explicit rules for the classes the generated markup carries that would
   otherwise be unstyled. Keeping them here rather than leaving them undefined
   means the next person greps this file and finds the whole vocabulary. */
.hub-hero--category { background: var(--canvas); }
.home-hero-ctas-wrap { margin-top: var(--s-6); }

/* ============================================================================
   FIXES FROM THE FIRST VISUAL PASS
   ============================================================================
   Everything below was caught by rendering the built pages rather than by
   reading the markup. Kept in one block so it is obvious what was reactive.
   ============================================================================ */

/* .brand is a flex row so the mark can sit beside the wordmark, but the
   wordmark arrives as three text nodes ("pattaya", ".", "gym") which each
   became flex items — so `gap` was spacing out the letters: "pattaya . gym".
   Space the mark with a margin instead and let the wordmark close up. */
.brand { gap: 0; }
.brand::before { margin-right: 0.55rem; }
.footer-brand { gap: 0; }
.footer-mark { margin-right: 0.6rem; }

/* Card sub-elements are emitted as <span> in several templates, so the
   margin-bottom in their rules did nothing and every card ran together on one
   line. Blocking them is what turns them back into stacked cards. */
.intent-card-tag, .intent-card-title, .intent-card-desc,
.numcard-title, .numcard-body, .numcard-num,
.cv-meta, .cv-cta,
.footer-col-h {
  display: block;
}
.numcard-num { display: inline-block; }
.intent-card-tag { margin-bottom: var(--s-2); }
.intent-card-title { margin-bottom: 0.3rem; }

/* `.wrap.u-max-760` used to shrink the wrap itself to 760px. Because .wrap is
   centred, that pushed the column inward and knocked it out of alignment with
   the section headings above it. Keep the wrap full width and constrain its
   children instead, so the text still starts on the page's left margin. */
.wrap.u-max-760 { max-width: var(--max); }
.wrap.u-max-760 > * { max-width: 760px; }

/* 22ch broke two-word venue names onto an awkward second line. */
.hero-h1 { max-width: 30ch; }
.hub-hero .hero-h1 { max-width: 32ch; }

/* Guide bylines are spans in a flex row; keep them on the baseline. */

/* ---- Second visual pass ---- */

/* Section h2s carry a top rule as a divider, suppressed on the first one.
   `:first-child` missed cases where the article starts with a comment or
   whitespace node, which drew a second rule right under the eyebrow's rule. */
.venue-body > h2:first-of-type,
.u-prose > h2:first-of-type {
  margin-top: 0; padding-top: 0; border-top: 0;
}

/* The TL;DR block is an <ol>, so it already has decimal markers — the shared
   li::before was adding a volt dot next to every number. */

/* Brand mark: a volt tile with a dark inner rule — a ring, viewed from above.
   Previously the header and footer marks used different ring colours, so the
   header read as an outlined tile and the footer as a solid one. */
.brand::before, .footer-mark {
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--ink);
}

/* ============================================================================
   THIRD VISUAL PASS — tool pages, 404, mobile header
   ============================================================================
   Found by rendering /search/, /compare/, /plan-my-trip/, /favorites/, /map/,
   /find-my-coach/, /sports/ and /404.html rather than trusting the sweep.
   ============================================================================ */

/* --- SEARCH: the page's sections are direct children of <main> with no .wrap,
   so they had no horizontal padding at all and ran edge to edge. --- */

/* Bare `.accent` is a heading highlight everywhere except the footer wordmark. */
.accent { color: var(--brand-ink); }
.footer-brand .accent { color: var(--brand-bright); }

/* The markup uses `.active`, not `.is-active`. Support both rather than
   rewriting a class name that three scripts toggle. */

/* Native select/checkbox controls were completely unstyled. */

/* The search field's icon was a 🔍 emoji. Same glyph, drawn in CSS: monochrome,
   brand-colourable, and sized against the type scale. */

/* Result cards: `.result-card-tag` is a <div>, so the pill background stretched
   the full width of the card. `.result-card-main` is the <a> wrapper. */

/* --- COMPARE: four pickers in a three-column grid orphaned the fourth. --- */

/* --- UTILITY / 404 PAGES: their body is `.venue-body`, so the prose link rule
   was underlining buttons and whole cards. Component links opt out. --- */
.venue-body a:where(.btn, .numcard, .intent-card, .cat-venue-card, .cv-cta,
                    .footer-social-btn, .jump-nav-pills a),
.u-prose a:where(.btn, .numcard, .intent-card, .cat-venue-card, .cv-cta) {
  text-decoration: none;
  font-weight: inherit;
}
.venue-body a.btn, .u-prose a.btn { color: inherit; }
.venue-body a.btn-primary, .u-prose a.btn-primary { color: var(--ink); }
.venue-body a.btn-primary:hover, .u-prose a.btn-primary:hover,
.venue-body a.btn-secondary, .u-prose a.btn-secondary { color: #fff; }
.venue-body a.numcard, .venue-body a.numcard *,
.u-prose a.numcard, .u-prose a.numcard * { color: inherit; }
.venue-body a.numcard .numcard-num { color: var(--accent-ink); }

/* --- HEADER: the CTA was hidden below 720px, so on a phone every interior page
   had no visible way to search — only the burger. It fits at 360px. --- */
.nav-cta { display: inline-flex; margin-left: auto; }
.nav-burger { margin-left: var(--s-2); }
@media (max-width: 519px) {
  .nav-cta { padding: 0.45rem 0.7rem; font-size: var(--text-xs); }
  .brand { font-size: 0.98rem; }
  .brand::before { width: 22px; height: 22px; margin-right: 0.4rem; }
}
@media (max-width: 380px) {
  .nav-row {
    gap: var(--s-2);
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .nav-cta { padding-inline: 0.6rem; }
  .nav-burger { margin-left: 0; }
}
@media (max-width: 339px) {
  .nav-cta { display: none; }
  .nav-burger { margin-left: auto; }
}
@media (min-width: 1040px) { .nav-cta { margin-left: 0; } }
@media (min-width: 1040px) { .nav-burger { display: none; } }

/* ============================================================================
   FAQ CONTAINER FIX
   ============================================================================
   `.venue-faq` and `.guide-faq` are on the <section> element in the generated
   markup — NOT on the list of questions:

       <section class="section u-pt-0 venue-faq guide-faq"><div class="wrap ...">

   So grouping them with `.faq-list` and giving all three `display:grid` plus
   `max-width:68ch` shrank the entire section to 686px and pinned it flush to the
   left edge with no gutter, while every other section stayed centred. Only
   `.faq-list` is an actual list of items.
   ============================================================================ */
/* The guide shell emits a bare <section class="guide-faq"> with no .wrap, so it
   inherits the gutter from the 880px article it sits inside. Only give it the
   page gutter when it is a top-level section instead. */

/* ============================================================================
   PERMANENTLY CLOSED
   ============================================================================
   Four records in data.js carry `status: closed`. build-v2.js had no rendering
   for that field, so a closed venue page showed a green "Verified by Tim" pill
   and a live "Checking hours…" indicator, with the closure mentioned only in
   body prose — a reader scanning the top of the page would have concluded it was
   open. This is the one pill that must out-shout the rest of the trust bar.
   ============================================================================ */
/* A closed venue keeps its verified date — we did check that it is shut — but it
   should not read as an endorsement sitting beside the closure notice. */

/* A qualified record - unverified, not in Pattaya, informational, timetable
   unconfirmed - must carry that qualification in the same bar that carries the
   verification date, or the page reads as a plainly operating venue (S1-3).
   Softer than the closure notice: these are open questions, not settled facts. */

/* ============================================================================
   PRESS KIT
   ============================================================================
   Components used only by /press/. Kept in the main stylesheet rather than a
   separate file because the site ships one CSS request by design, and this is
   ~1 KB. Generated by scripts/build-press-kit.js.
   ============================================================================ */

/* The press tables live inside `.venue-body`, whose prose `th` rule paints every
   header cell dark with white text. That is right for a column header and very
   wrong for a row header — the fast-facts labels rendered as solid dark blocks
   with invisible text. Row headers opt out; column headers keep the treatment. */

/* ============================================================================
   FLAGSHIP 2027 — evidence, consent, stable interaction and accessibility
   ============================================================================ */

.u-prose a:not(.btn),
.venue-body a:not(.btn),
.u-prose a.u-cyan,
.venue-body a.u-cyan {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.venue-body a.cat-venue-card,
.u-prose a.cat-venue-card {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.privacy-consent {
  position: fixed;
  z-index: 1000;
  inset: auto max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  width: min(860px, calc(100% - 24px));
  margin-inline: auto;
  padding: var(--s-4);
  color: var(--panel-ink);
  background: rgba(23, 28, 17, .97);
  border: 1px solid var(--panel-line);
  border-radius: var(--r-xl);
  box-shadow: 0 24px 70px rgba(20, 24, 15, .32);
}
.privacy-consent-copy { display: grid; gap: 2px; min-width: 0; }
.privacy-consent-copy strong { font-family: var(--font-display); font-size: var(--text-lg); }
.privacy-consent-copy span { color: var(--panel-muted); font-size: var(--text-sm); }
.privacy-consent-copy a { color: var(--brand-bright); font-size: var(--text-xs); text-decoration: underline; text-underline-offset: 2px; }
.privacy-consent-actions { display: flex; flex-wrap: wrap; flex: 0 0 auto; gap: var(--s-2); }
.privacy-consent .btn-ghost { color: var(--panel-ink); background: transparent; border-color: #8b967e; }
.privacy-consent .btn-primary { background: var(--brand-bright); color: var(--ink); }
.taxonomy-guide-strip { min-block-size: 150px; }
.taxonomy-strip-hint { display: none; }

@media (max-width: 680px) {
  .taxonomy-strip-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    margin: 0 0 var(--s-2);
    color: var(--ink-subtle);
    font: 700 var(--text-2xs)/1.3 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .taxonomy-guide-rail {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    gap: var(--s-3);
    padding: 2px 0 var(--s-2);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scroll-padding-inline: 2px;
    scrollbar-width: thin;
  }
  .taxonomy-guide-rail > .intent-card {
    flex: 0 0 min(84%, 20rem);
    min-width: 0;
    scroll-snap-align: start;
  }
  .privacy-consent {
    inset: auto max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    align-items: stretch;
    flex-direction: column;
    gap: .65rem;
    width: min(860px, calc(100% - 16px));
    padding: .75rem;
    border-radius: 1rem;
  }
  .privacy-consent-copy { gap: 1px; }
  .privacy-consent-copy strong { font-size: 1rem; line-height: 1.15; }
  .privacy-consent-copy span { font-size: .78rem; line-height: 1.35; }
  .privacy-consent-copy a { font-size: .72rem; }
  .privacy-consent-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .privacy-consent .btn { min-height: 2.75rem; padding: .5rem .65rem; font-size: .83rem; }
  .guide-toc { margin-block: var(--s-5) var(--s-7); padding: var(--s-4); }
  .venue-body .guide-toc-list,
  .u-prose .guide-toc-list {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100%;
    gap: var(--s-2);
    margin-inline: 0;
    padding: 2px 0 var(--s-2);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scroll-padding-inline: 2px;
    scrollbar-width: thin;
  }
  .venue-body .guide-toc-list > li,
  .u-prose .guide-toc-list > li { flex: 0 0 min(82%, 19rem); scroll-snap-align: start; }
  .guide-toc-list a { height: 100%; border-color: var(--line); background: color-mix(in srgb, var(--surface) 88%, transparent); }
  .venue-body > table,
  .u-prose > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}