/* The one TIMPAEMI system on Pattaya Gym (FOUNDATION section 4; release B, 8 Oct 2026).
   Loaded last on every page by scripts/apply-one-system.js, so it wins over the older layers without rewriting them.
   Black and white only: night #0b0b0c, white, bone #f4f1ec, stone #55514d, line #dad5ce, mist #bdb8b3, graphite #2e2c2a.
   Geist for everything; Instrument Serif Italic only for an accent line. */

@font-face {
  font-family: Geist;
  src: url(/fonts/geist-var-latin.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: "Instrument Serif";
  src: url(/fonts/instrument-serif-italic.woff2) format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: optional;
}

:root {
  --tp-night: #0b0b0c;
  --tp-bone: #f4f1ec;
  --tp-white: #ffffff;
  --tp-stone: #55514d;
  --tp-line: #dad5ce;
  --tp-mist: #bdb8b3;
  --tp-graphite: #2e2c2a;
  --font-display: Geist, Arial, sans-serif;
  --font-body: Geist, Arial, sans-serif;
  --font-mono: Geist, Arial, sans-serif;
}

html { background: var(--tp-night); }
html body:is(#os, body) { font-family: Geist, Arial, sans-serif; font-feature-settings: "tnum" 0; }
html body:is(#os, body) h1, html body:is(#os, body) h2, html body:is(#os, body) h3 { font-family: Geist, Arial, sans-serif; letter-spacing: -.02em; }
html body:is(#os, body) :is(code, kbd, samp, .mono, [class*="mono"]) { font-family: Geist, Arial, sans-serif; font-variant-numeric: tabular-nums; }
::selection { background: var(--tp-night); color: #fff; }
html body:is(#os, body) :focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* ---- Header: night, the wordmark in white ---------------------------------------------------------------- */
html body:is(#os, body) header.nav {
  background: var(--tp-night) !important;
  color: #fff !important;
  border-bottom: 1px solid var(--tp-graphite) !important;
  box-shadow: none !important;
}
html body:is(#os, body) header.nav .nav-row { min-height: 64px; }
html body:is(#os, body) header.nav .os-brand {
  display: inline-flex !important;
  align-items: center;
  min-height: 44px;
  color: #fff !important;
  text-decoration: none;
  flex: none;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}
html body:is(#os, body) header.nav .os-wordmark { display: block; height: 20px; width: auto; }
html body:is(#os, body) header.nav .os-stack { display: none; height: 36px; width: auto; }
html body:is(#os, body) header.nav .nav-links a {
  color: #fff !important;
  background: transparent !important;
  font-weight: 600;
  text-decoration: none;
  border: 0 !important;
}
html body:is(#os, body) header.nav .nav-links a:hover { text-decoration: underline !important; text-underline-offset: 6px; }
html body:is(#os, body) header.nav .nav-links a[aria-current="page"] { box-shadow: inset 0 -2px 0 #fff !important; }
html body:is(#os, body) header.nav .nav-burger {
  background: transparent !important;
  border: 1px solid #fff !important;
  color: #fff !important;
  border-radius: 0 !important;
  min-width: 44px; min-height: 44px;
}
html body:is(#os, body) header.nav .nav-burger-bar { background: #fff !important; }
html body:is(#os, body) .nav-mobile { background: var(--tp-night) !important; color: #fff !important; border-color: var(--tp-graphite) !important; }
html body:is(#os, body) .nav-mobile .nav-mobile-link { color: #fff !important; border-color: var(--tp-graphite) !important; background: transparent !important; }
html body:is(#os, body) .nav-mobile .nav-mobile-group { color: var(--tp-mist) !important; }
@media (max-width: 380px) {
  html body:is(#os, body) header.nav .os-wordmark { display: none; }
  html body:is(#os, body) header.nav .os-stack { display: block; }
}

/* ---- Accents: black and white only ------------------------------------------------------------------------ */
html body:is(#os, body) .accent-pink, html body:is(#os, body) [class*="accent"]:not(.os-keep) { color: inherit; }
html body:is(#os, body) :is(.btn, .button, button[type="submit"], .search-submit, .ti-search button, .cta, .nav-cta) {
  border-radius: 0 !important;
}

/* ---- Footer ----------------------------------------------------------------------------------------------- */
html body:is(#os, body) footer.os-footer {
  background: var(--tp-night) !important;
  color: #fff !important;
  border-top: 0 !important;
  margin-top: 64px;
  padding: 56px 0 32px !important;
  font-family: Geist, Arial, sans-serif;
}
html body:is(#os, body) .os-footer-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px !important; }
html body:is(#os, body) .os-footer a:not(.os-btn--line) { color: #fff !important; text-decoration: none; }
html body:is(#os, body) .os-footer a:hover { text-decoration: underline; text-underline-offset: 4px; }
html body:is(#os, body) .os-footer-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; padding-bottom: 40px; border-bottom: 1px solid var(--tp-graphite); }
html body:is(#os, body) .os-footer-brand { display: inline-flex; align-items: center; min-height: 44px; }
html body:is(#os, body) .os-footer-stack { display: block; height: 56px; width: auto; color: #fff; }
html body:is(#os, body) .os-footer-sentence { color: var(--tp-mist) !important; font-size: 16px; line-height: 1.55; margin: 20px 0 24px; max-width: 44ch; }
html body:is(#os, body) .os-contact { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
html body:is(#os, body) .os-btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1px solid #fff; color: #fff !important; font-weight: 600; font-size: 15px; background: transparent;
}
html body:is(#os, body) .os-btn--line { background: #fff; color: var(--tp-night) !important; }
html body:is(#os, body) .os-footer a.os-btn:hover { text-decoration: none !important; background: #fff; color: var(--tp-night) !important; }
html body:is(#os, body) .os-footer a.os-btn--line { color: var(--tp-night) !important; }
html body:is(#os, body) .os-reply { flex-basis: 100%; margin: 4px 0 0; color: var(--tp-mist) !important; font-size: 14px; }
html body:is(#os, body) .os-footer-nav { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
html body:is(#os, body) .os-footer-nav .footer-col-h { color: var(--tp-mist) !important; font-size: 14px !important; font-weight: 600; letter-spacing: 0 !important; text-transform: none !important; margin: 0 0 12px; font-family: Geist, Arial, sans-serif; }
html body:is(#os, body) .os-footer-nav ul { list-style: none; margin: 0; padding: 0; }
html body:is(#os, body) .os-footer-nav li { margin: 0 !important; padding: 0 !important; line-height: 1.3; }
html body:is(#os, body) .os-footer-nav li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 !important; font-size: 16px; line-height: 1.3; }

html body:is(#os, body) .os-runby { display: flex; gap: 20px; align-items: center; padding: 32px 0; border-bottom: 1px solid var(--tp-graphite); }
html body:is(#os, body) .os-runby-photo { width: 88px; height: 110px; object-fit: cover; flex: none; background: #000; }
html body:is(#os, body) .os-runby-publisher { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
html body:is(#os, body) .os-runby-label { color: var(--tp-mist) !important; font-size: 14px; }
html body:is(#os, body) .os-runby-logo { height: 16px; width: auto; display: block; }
html body:is(#os, body) .os-runby-line { flex-basis: 100%; font-size: 16px; color: #fff !important; }
html body:is(#os, body) .os-runby-note { margin: 6px 0 4px; color: var(--tp-mist) !important; font-size: 15px; }
html body:is(#os, body) .os-runby-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: underline !important; text-underline-offset: 4px; }

html body:is(#os, body) .os-footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; color: var(--tp-mist) !important; font-size: 14px; }
html body:is(#os, body) .os-footer-base p { margin: 0; color: var(--tp-mist) !important; }
html body:is(#os, body) .os-footer-base nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
html body:is(#os, body) .os-footer-base nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: #fff !important; }
html body:is(#os, body) .os-footer-updated { margin: 8px 0 0; color: var(--tp-mist) !important; font-size: 14px; }

@media (max-width: 860px) {
  html body:is(#os, body) .os-footer-top { grid-template-columns: 1fr; gap: 32px; }
  html body:is(#os, body) .os-footer-nav { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  html body:is(#os, body) .os-footer-nav { grid-template-columns: 1fr; gap: 8px; }
  html body:is(#os, body) .os-runby { align-items: flex-start; }
}

/* ---- The wordmark is never filtered or tinted; the accent line is Instrument Serif Italic in black ---------- */
html body:is(#os, body) header.nav .os-brand svg { filter: none !important; opacity: 1 !important; color: #fff !important; }
html body:is(#os, body) header.nav .os-brand svg path, html body:is(#os, body) header.nav .os-brand svg rect { fill: #fff !important; }
html body:is(#os, body) .os-footer-brand svg { filter: none !important; }
html body:is(#os, body) .os-footer-brand svg path, html body:is(#os, body) .os-footer-brand svg rect { fill: #fff !important; }
html body:is(#os, body) h1 em {
  font-family: "Instrument Serif", Georgia, serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -.01em !important;
  color: inherit !important;
}

/* Footer text never inherits a page layer's colour: white for content, mist for secondary lines. */
html body:is(#os, body) footer.os-footer :is(p, span, li, h2) { color: inherit; }
html body:is(#os, body) footer.os-footer .os-runby-note, html body:is(#os, body) footer.os-footer .os-reply, html body:is(#os, body) footer.os-footer .os-footer-updated, html body:is(#os, body) footer.os-footer .os-footer-base p { color: var(--tp-mist) !important; }

/* ---- Illustrations (ILLUSTRATION-SYSTEM.md): the picture only, no label, no caption ------------------------- */
html body:is(#os, body) figure.os-illustration { margin: 0 0 24px; padding: 0; background: var(--tp-night); }
html body:is(#os, body) figure.os-illustration img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
html body:is(#os, body) figure.ti-opening-photo.os-illustration figcaption { display: none; }
html body:is(#os, body) .os-hub-figure { max-width: 820px; margin: 32px auto 8px; padding: 0 24px; }
html body:is(#os, body) .os-hub-figure img { aspect-ratio: 5 / 3; }

/* The back-to-top button never covers footer content: room at the foot of the footer, and the button in night tones. */
html body:is(#os, body) .back-to-top { background: var(--tp-night) !important; color: #fff !important; border: 1px solid #fff !important; border-radius: 0 !important; }
/* On a phone the hub picture would push the first places below the first screen: the list comes first. */
@media (max-width: 760px) { html body:is(#os, body) .os-hub-figure { display: none; } }
html body:is(#os, body) .back-to-top.os-over-footer { opacity: 0 !important; pointer-events: none !important; }

/* Release C (8 Oct 2026): the venue first screen. One card beside the title on desktop, directly under it on a phone:
   price or "Visitor price: not published", access, published hours, then Call and Get directions. */
html body:is(#os, body) #main.pd-venue.ti-venue .ti-venue-facts {
  border-top: 2px solid var(--tp-night) !important;
  padding-top: 1rem !important;
}
html body:is(#os, body) #main.pd-venue.ti-venue .ti-venue-facts > h2 { font-size: 1.15rem !important; margin: 0 0 .85rem !important; }
html body:is(#os, body) #main.pd-venue.ti-venue .pd-opening-facts { grid-template-columns: minmax(0, 1fr) !important; gap: .7rem !important; }
html body:is(#os, body) #main.pd-venue.ti-venue .pd-opening-facts dd { font-size: 1rem !important; }
html body:is(#os, body) #main.pd-venue.ti-venue .pd-opening-unknown dd { color: var(--tp-stone) !important; }
html body:is(#os, body) .os-glance-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
html body:is(#os, body) .os-glance-actions .pd-button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .7rem 1.1rem;
  border: 1.5px solid var(--tp-night); border-radius: 0; font: 600 .95rem/1.2 Geist, Arial, sans-serif; letter-spacing: 0;
  text-decoration: none; filter: none; flex: 1 1 12rem;
}
html body:is(#os, body) .os-glance-actions .pd-button.pd-button-primary { background: var(--tp-night); color: var(--tp-white); }
html body:is(#os, body) .os-glance-actions .pd-button.pd-button-secondary { background: transparent; color: var(--tp-night); }
html body:is(#os, body) .os-glance-actions .pd-button:hover { background: var(--tp-graphite); color: var(--tp-white); border-color: var(--tp-graphite); }

/* One frame (release C): every page's text starts where the logo starts. 18px on a phone, 32px on a tablet,
   then a 1220px column centred (73px at 1366). */
:root { --os-gutter: 18px; --os-frame: 1220px; }
@media (min-width: 600px) { :root { --os-gutter: 32px; } }
html body:is(#os, body) header.nav .nav-row { box-sizing: border-box; width: min(var(--os-frame), calc(100% - 2 * var(--os-gutter))) !important; max-width: none !important; margin-inline: auto !important; padding-inline: 0 !important; }
html body:is(#os, body) :is(#main, main) section.hero { padding-inline: var(--os-gutter) !important; }
html body:is(#os, body) :is(#main, main) section.hero > :is(.hero-inner, .u-wrap-max), html body:is(#os, body) :is(#main, main) section.hero .hero-inner.u-wrap-max { max-width: var(--os-frame) !important; margin-inline: auto !important; padding-inline: 0 !important; }
html body:is(#os, body) :is(#main, main):is(.vc-guide, .ti-guide-index-main) > section.hero,
html body:is(#os, body) :is(#main, main) .wrap:not(.wrap .wrap),
html body:is(#os, body) :is(#main, main) .pd-container:not(.wrap .pd-container, .pd-container .pd-container) { box-sizing: border-box; width: min(var(--os-frame), calc(100% - 2 * var(--os-gutter))) !important; max-width: none !important; margin-inline: auto !important; padding-inline: 0 !important; }
html body:is(#os, body) :is(#main, main) .wrap .pd-container { width: auto !important; max-width: none !important; margin-inline: 0 !important; }
html body:is(#os, body) footer.os-footer .os-footer-wrap { box-sizing: border-box; width: min(var(--os-frame), calc(100% - 2 * var(--os-gutter))) !important; max-width: none !important; margin-inline: auto !important; padding-inline: 0 !important; }
html body:is(#os, body) nav.site-breadcrumb[aria-label="Breadcrumb"] { box-sizing: border-box; width: min(var(--os-frame), calc(100% - 2 * var(--os-gutter))) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; }

/* Release D (8 Oct 2026): the home page as a front door (scripts/build-home-browse.js), in the Pattaya Pets pattern. */
html body:is(#os, body) .ti-home .os-home-block { box-sizing: border-box; width: min(var(--os-frame), calc(100% - 2 * var(--os-gutter))); margin: 0 auto; padding: 3.2rem 0 0; }
html body:is(#os, body) .ti-home .os-kicker { margin: 0 0 .6rem; font: 600 .74rem/1.3 Geist, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--tp-stone); }
html body:is(#os, body) .ti-home .os-home-block h2 { margin: 0 0 1.2rem; font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height: 1.08; letter-spacing: -.025em; color: var(--tp-night); max-width: 24ch; }
html body:is(#os, body) .ti-home .os-block-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: .4rem 1.5rem; }
html body:is(#os, body) .ti-home .os-block-head > :is(.os-kicker, h2) { flex-basis: 100%; }
html body:is(#os, body) .ti-home .os-block-head h2 { flex: 1 1 18rem; }
html body:is(#os, body) .ti-home .os-more { margin: 0 0 1.3rem; font-weight: 600; color: var(--tp-night); text-decoration: underline; text-underline-offset: .2em; }
html body:is(#os, body) .ti-home .os-block-note { margin: 1rem 0 0; color: var(--tp-stone); font-size: .9rem; max-width: 60ch; }
html body:is(#os, body) .ti-home :is(.os-tasks, .os-rows, .os-places) { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tp-night); }
html body:is(#os, body) .ti-home :is(.os-tasks, .os-rows) > li > a { position: relative; display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; min-height: 48px; padding: 1rem 2.2rem 1rem 0; border-bottom: 1px solid var(--tp-line); color: var(--tp-night); text-decoration: none; }
html body:is(#os, body) .ti-home :is(.os-tasks, .os-rows) > li > a:hover .os-row-title, html body:is(#os, body) .ti-home .os-tasks > li > a:hover .os-task-title { text-decoration: underline; text-underline-offset: .18em; }
html body:is(#os, body) .ti-home .os-arrow { position: absolute; right: .2rem; top: 50%; transform: translateY(-50%); }
html body:is(#os, body) .ti-home .os-task-title { font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; grid-column: 1; }
html body:is(#os, body) .ti-home .os-task-note { color: var(--tp-stone); font-size: .92rem; grid-column: 1; }
html body:is(#os, body) .ti-home .os-rows > li > a { grid-template-columns: 2.4rem 1fr auto; }
html body:is(#os, body) .ti-home .os-rows--areas > li > a, html body:is(#os, body) .ti-home .os-rows--dark > li > a { grid-template-columns: 1fr auto; }
html body:is(#os, body) .ti-home .os-num { grid-row: span 2; align-self: start; padding-top: .2rem; font-size: .8rem; font-weight: 600; color: var(--tp-stone); font-variant-numeric: tabular-nums; }
html body:is(#os, body) .ti-home .os-row-title { font-size: 1.15rem; font-weight: 650; letter-spacing: -.01em; }
html body:is(#os, body) .ti-home .os-row-note { grid-column: 2; color: var(--tp-stone); font-size: .92rem; }
html body:is(#os, body) .ti-home .os-rows--areas .os-row-note, html body:is(#os, body) .ti-home .os-rows--dark .os-row-note { grid-column: 1; }
html body:is(#os, body) .ti-home .os-row-count { grid-column: 3; grid-row: 1; font-size: .85rem; color: var(--tp-stone); white-space: nowrap; font-variant-numeric: tabular-nums; }
html body:is(#os, body) .ti-home .os-rows--areas .os-row-count { grid-column: 2; }
html body:is(#os, body) .ti-home .os-places { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 0 1.6rem; }
html body:is(#os, body) .ti-home .os-place { padding: 1.1rem 0 1.2rem; border-bottom: 1px solid var(--tp-line); }
html body:is(#os, body) .ti-home .os-place-meta { margin: 0 0 .35rem; font-size: .74rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-stone); }
html body:is(#os, body) .ti-home .os-place-meta span { font-weight: 500; letter-spacing: .04em; text-transform: none; }
html body:is(#os, body) .ti-home .os-place-meta span::before { content: "· "; }
html body:is(#os, body) .ti-home .os-place h3 { margin: 0 0 .7rem; font-size: 1.3rem; line-height: 1.2; letter-spacing: -.015em; }
html body:is(#os, body) .ti-home .os-place h3 a { color: var(--tp-night); text-decoration: none; }
html body:is(#os, body) .ti-home .os-place h3 a:hover { text-decoration: underline; text-underline-offset: .18em; }
html body:is(#os, body) .ti-home .os-place dl { margin: 0; display: grid; gap: .45rem; }
html body:is(#os, body) .ti-home .os-place dt { font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tp-stone); }
html body:is(#os, body) .ti-home .os-place dd { margin: 0; font-size: .98rem; color: var(--tp-night); }
html body:is(#os, body) .ti-home .os-home-band { margin-top: 3.6rem; background: var(--tp-night); color: var(--tp-white); }
html body:is(#os, body) .ti-home .os-band-inner { box-sizing: border-box; width: min(var(--os-frame), calc(100% - 2 * var(--os-gutter))); margin: 0 auto; padding: 3rem 0; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { html body:is(#os, body) .ti-home .os-band-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; } }
html body:is(#os, body) .ti-home .os-home-band .os-kicker { color: var(--tp-mist); }
html body:is(#os, body) #main.ti-home .os-home-band h2 { margin: 0 0 1rem !important; color: var(--tp-white) !important; font-size: clamp(1.7rem, 4.2vw, 2.6rem); line-height: 1.08; letter-spacing: -.025em; color: var(--tp-white); }
html body:is(#os, body) .ti-home .os-home-band p { color: var(--tp-mist); max-width: 52ch; }
html body:is(#os, body) .ti-home .os-band-figure { margin: 0; }
html body:is(#os, body) .ti-home .os-band-figure img { display: block; width: 100%; height: auto; }
html body:is(#os, body) .ti-home .os-band-links { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 1.6rem; }
html body:is(#os, body) .ti-home :is(.os-btn-light, .os-btn-ghost, .os-btn-dark, .os-btn-outline) { display: inline-flex; align-items: center; min-height: 48px; padding: .7rem 1.15rem; font-weight: 600; text-decoration: none; border: 1.5px solid; }
html body:is(#os, body) .ti-home .os-btn-light { background: var(--tp-white); color: var(--tp-night); border-color: var(--tp-white); }
html body:is(#os, body) .ti-home .os-btn-ghost { background: transparent; color: var(--tp-white); border-color: var(--tp-white); }
html body:is(#os, body) .ti-home .os-btn-dark { background: var(--tp-night); color: var(--tp-white); border-color: var(--tp-night); }
html body:is(#os, body) .ti-home .os-btn-outline { background: transparent; color: var(--tp-night); border-color: var(--tp-night); }
html body:is(#os, body) .ti-home .os-rows--dark { border-top-color: var(--tp-white); }
html body:is(#os, body) .ti-home .os-rows--dark > li > a { color: var(--tp-white); border-bottom-color: var(--tp-graphite); }
html body:is(#os, body) .ti-home .os-rows--dark .os-row-note { color: var(--tp-mist); }
html body:is(#os, body) .ti-home .os-whose { padding-bottom: 3.6rem; }
html body:is(#os, body) .ti-home .os-whose p:not(.os-kicker) { color: var(--tp-stone); max-width: 58ch; }
@media (max-width: 599px) {
  html body:is(#os, body) .ti-home .os-rows > li > a { grid-template-columns: 2rem 1fr; }
  html body:is(#os, body) .ti-home .os-row-count { grid-column: 2; grid-row: auto; }
  html body:is(#os, body) .ti-home :is(.os-rows--areas, .os-rows--dark) > li > a { grid-template-columns: 1fr; }
  html body:is(#os, body) .ti-home .os-rows--dark .os-row-note { grid-column: 1; }
  html body:is(#os, body) .ti-home .os-rows--areas .os-row-count { grid-column: 1; }
}
/* Release D: venue pages end with the onward links open (sport hub, area, guides), as a list. */
html body:is(#os, body) #main details.os-keep { margin: 2.4rem 0 0; }
html body:is(#os, body) #main.ti-venue details.os-keep > summary { list-style: none; cursor: default; pointer-events: none; margin: 0 0 .8rem !important; padding: 0 !important; font-size: clamp(1.4rem, 3.4vw, 1.9rem) !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: -.02em; color: var(--tp-night) !important; border: 0 !important; }
html body:is(#os, body) #main details.os-keep > summary::-webkit-details-marker { display: none; }
html body:is(#os, body) #main details.os-keep > summary::after, html body:is(#os, body) #main details.os-keep > summary::before { content: none !important; display: none !important; }
html body:is(#os, body) #main details.os-keep .publication-onward-links { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 0 1.6rem; margin: 0; padding: 0; border-top: 2px solid var(--tp-night); }
html body:is(#os, body) #main details.os-keep .publication-onward-links a { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: .75rem 0; border-bottom: 1px solid var(--tp-line); color: var(--tp-night); font-weight: 600; text-decoration: none; }
html body:is(#os, body) #main details.os-keep .publication-onward-links a::after { content: "→"; margin-left: 1rem; color: var(--tp-stone); }
html body:is(#os, body) #main details.os-keep .publication-onward-links a:hover { text-decoration: underline; text-underline-offset: .18em; }
/* Release D: sport hubs end with the sport by area and the other sports (scripts/build-home-browse.js). */
html body:is(#os, body) #main .os-browse { margin: 3rem 0 0; padding: 0 0 3rem; }
html body:is(#os, body) #main .os-browse-inner { box-sizing: border-box; width: min(var(--os-frame), calc(100% - 2 * var(--os-gutter))); margin: 0 auto; }
html body:is(#os, body) #main .os-browse h2 { margin: 0 0 .8rem; font-size: clamp(1.4rem, 3.4vw, 1.9rem); letter-spacing: -.02em; color: var(--tp-night); }
html body:is(#os, body) #main .os-browse .os-browse-second { margin-top: 2.2rem; }
html body:is(#os, body) #main .os-browse-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tp-night); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 0 1.6rem; }
html body:is(#os, body) #main .os-browse-list li { border-bottom: 1px solid var(--tp-line); }
html body:is(#os, body) #main .os-browse-list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 48px; padding: .75rem 0; color: var(--tp-night); font-weight: 600; text-decoration: none; }
html body:is(#os, body) #main .os-browse-list a::after { content: "→"; color: var(--tp-stone); }
html body:is(#os, body) #main .os-browse-list .os-row-count { margin-left: auto; font-weight: 500; font-size: .85rem; color: var(--tp-stone); }
html body:is(#os, body) #main .os-browse-list a:hover .os-row-title { text-decoration: underline; text-underline-offset: .18em; }
/* Release F: the quick answer at the top of the gym and Muay Thai hubs. */
html body:is(#os, body) #main .os-quick { margin: 2rem 0 0; padding: 0; }
html body:is(#os, body) #main .os-quick-list { grid-template-columns: minmax(0, 1fr) !important; }
html body:is(#os, body) #main .os-quick-list a { display: grid !important; grid-template-columns: 1fr auto; gap: .15rem 1rem; }
html body:is(#os, body) #main .os-quick-list a::after { content: none !important; }
html body:is(#os, body) #main .os-quick-list .os-row-note { grid-column: 1; font-weight: 400; font-size: .88rem; color: var(--tp-stone); }
html body:is(#os, body) #main .os-quick-list .os-row-count { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 1.15rem !important; font-weight: 700 !important; color: var(--tp-night) !important; }
html body:is(#os, body) #main .os-quick-note { margin: .8rem 0 0; color: var(--tp-stone); font-size: .9rem; }

/* ---- Release G: browse cards (one card on every list) ------------------------------------------------------ */
html body:is(#os, body) #main :is(.pd-directory-results, .publication-compact-grid) { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)) !important; gap: 16px; align-items: stretch !important; border: 0 !important; }
html body:is(#os, body) #main article.pd-result { position: relative; display: flex !important; flex-direction: column; min-width: 0; margin: 0 !important; padding: 22px 22px 18px !important; background: var(--tp-white) !important; border: 1px solid var(--tp-line) !important; border-top: 3px solid var(--tp-night) !important; border-radius: 0 !important; box-shadow: none; transition: box-shadow .18s ease, transform .18s ease; }
html body:is(#os, body) #main article.pd-result:hover { box-shadow: 0 14px 32px -18px rgba(11, 11, 12, .45); transform: translateY(-2px); }
html body:is(#os, body) #main article.pd-result:focus-within { box-shadow: 0 0 0 2px var(--tp-night); }
html body:is(#os, body) #main article.pd-result .pd-result-photo, html body:is(#os, body) #main article.pd-result[hidden] { display: none !important; }
html body:is(#os, body) #main article.pd-result .pd-result-copy { display: flex; flex-direction: column; flex: 1; gap: 12px; min-width: 0; }
html body:is(#os, body) #main article.pd-result .pd-result-title { display: flex !important; flex-direction: column-reverse; gap: 8px; margin: 0; }
html body:is(#os, body) #main article.pd-result .pd-result-location { margin: 0 !important; font-size: .6875rem !important; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--tp-stone) !important; line-height: 1.4 !important; }
html body:is(#os, body) #main article.pd-result .pd-result-location span { font-weight: 500; }
html body:is(#os, body) #main article.pd-result h3 { margin: 0 !important; font-size: 1.3125rem !important; line-height: 1.2 !important; font-weight: 700; letter-spacing: -.02em; }
html body:is(#os, body) #main article.pd-result h3 a { color: var(--tp-night) !important; text-decoration: none !important; }
html body:is(#os, body) #main article.pd-result h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
html body:is(#os, body) #main article.pd-result:hover h3 a { text-decoration: underline !important; text-underline-offset: 3px; }
html body:is(#os, body) #main article.pd-result .pd-result-body { display: flex !important; flex-direction: column; flex: 1; gap: 14px !important; align-items: stretch !important; }
html body:is(#os, body) #main article.pd-result .pd-result-distinction { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--tp-graphite); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
html body:is(#os, body) #main article.pd-result .pd-status { align-self: flex-start; margin: 0; padding: 3px 8px; font-size: .6875rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; background: var(--tp-bone); border: 1px solid var(--tp-line); }
html body:is(#os, body) #main article.pd-result .pd-result-price, html body:is(#os, body) #main article.pd-result .pd-price-none { margin: auto 0 0 !important; padding: 14px 0 0 !important; border-top: 1px solid var(--tp-line) !important; display: block !important; flex: none !important; border-left: 0 !important; padding-left: 0 !important; }
html body:is(#os, body) #main article.pd-result .pd-price-primary { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
html body:is(#os, body) #main article.pd-result .pd-price-primary strong { font-size: 1.75rem; line-height: 1.1; font-weight: 750; letter-spacing: -.03em; color: var(--tp-night); }
html body:is(#os, body) #main article.pd-result .pd-price-primary strong small { font-size: .875rem; font-weight: 500; letter-spacing: 0; color: var(--tp-stone); }
html body:is(#os, body) #main article.pd-result .pd-product { font-size: .8125rem; font-weight: 600; color: var(--tp-graphite); }
html body:is(#os, body) #main article.pd-result .pd-price-condition { display: none !important; }
html body:is(#os, body) #main article.pd-result .pd-price-date { display: block; margin-top: 4px; font-size: .75rem; color: var(--tp-stone); }
html body:is(#os, body) #main article.pd-result .pd-price-none { font-size: .875rem; color: var(--tp-stone); }
html body:is(#os, body) #main article.pd-result .pd-result-actions { display: flex !important; justify-content: space-between; align-items: baseline !important; gap: 12px; margin: 4px 0 0 !important; padding-top: 12px; border-top: 1px solid var(--tp-line); font-size: .875rem; }
html body:is(#os, body) #main article.pd-result .pd-place-link { display: inline-flex !important; align-items: center !important; gap: .35em; min-height: 0 !important; font-weight: 650; color: var(--tp-night) !important; background: none !important; text-decoration: none !important; border: 0 !important; padding: 0 !important; }
html body:is(#os, body) #main article.pd-result .pd-place-link::after { content: "\2192" !important; position: static !important; display: inline-block !important; margin-left: 0; transform: none !important; width: auto !important; height: auto !important; background: none !important; border: 0 !important; }
html body:is(#os, body) #main article.pd-result .pd-reviews-link { position: relative; z-index: 2; color: var(--tp-stone) !important; font-weight: 550; text-decoration: none !important; border: 0 !important; }
html body:is(#os, body) #main article.pd-result .pd-reviews-link::after { content: " \2197"; }
html body:is(#os, body) #main article.pd-result .pd-reviews-link:hover { color: var(--tp-night) !important; text-decoration: underline !important; text-underline-offset: 3px; }
html body:is(#os, body) #main article.pd-result :is(.favorite-btn, .pd-save) { position: relative; z-index: 2; }
html body:is(#os, body) #main article.pd-result { height: auto !important; align-self: stretch !important; }
html body:is(#os, body) #main .os-glance-actions { flex-wrap: wrap !important; }
html body:is(#os, body) #main .os-glance-links { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 0; font-size: .875rem; }
html body:is(#os, body) #main .os-glance-links a { font-weight: 650; color: var(--tp-night) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--tp-mist); }
html body:is(#os, body) #main .os-glance-links a::after { content: " \2197"; }
html body:is(#os, body) #main .os-glance-links a:hover { text-decoration-color: currentColor; }
html body:is(#os, body) #main a.intent-card { border-radius: 0 !important; border: 1px solid var(--tp-line) !important; border-top: 3px solid var(--tp-night) !important; background: var(--tp-white) !important; box-shadow: none !important; transition: box-shadow .18s ease, transform .18s ease; }
html body:is(#os, body) #main a.intent-card:hover { box-shadow: 0 14px 32px -18px rgba(11, 11, 12, .45) !important; transform: translateY(-2px); }
html body:is(#os, body) #main details.publication-more.os-keep > summary { list-style: none; cursor: default; pointer-events: none; }
html body:is(#os, body) #main details.publication-more.os-keep > summary::-webkit-details-marker { display: none; }
html body:is(#os, body) #main.ti-venue details.publication-more.os-keep > summary { font-size: 1.25rem !important; line-height: 1.3 !important; margin: 0 0 .4rem !important; }
html body:is(#os, body) #main.ti-venue details.publication-more.os-keep > summary span { font-size: .8125rem; font-weight: 500; color: var(--tp-stone); margin-left: .5rem; letter-spacing: 0; }
html body:is(#os, body) #main :is(.table-scroll, .guide-table-wrap, div):has(> table.guide-price-table), html body:is(#os, body) #main table.guide-price-table, html body:is(#os, body) #main table.guide-price-table :is(thead, tr, th, td) { border-radius: 0 !important; }
/* ---- Release H: credited area photographs ------------------------------------------------------------------ */
html body:is(#os, body) #main .os-place-photo-wrap { box-sizing: border-box; width: min(var(--os-frame), calc(100% - 2 * var(--os-gutter))); margin: 0 auto 2.4rem; }
html body:is(#os, body) #main figure.os-place-photo { margin: 0; }
html body:is(#os, body) #main figure.os-place-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; background: var(--tp-line); }
@media (max-width: 599px) { html body:is(#os, body) #main figure.os-place-photo img { aspect-ratio: 4 / 3; } }
html body:is(#os, body) #main figure.os-place-photo figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding: 10px 0 0; font-size: .75rem; line-height: 1.5; color: var(--tp-stone); border-bottom: 1px solid var(--tp-line); padding-bottom: 10px; }
html body:is(#os, body) #main figure.os-place-photo figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
html body:is(#os, body) #main figure.os-place-photo img { width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 16 / 7 !important; object-fit: cover !important; }
@media (max-width: 599px) { html body:is(#os, body) #main figure.os-place-photo img { aspect-ratio: 4 / 3 !important; } }
/* ---- Release I: an airy "At a glance" card with readable hours and prices ------------------------------------ */
html body:is(#os, body) #main.pd-venue.ti-venue aside.pd-visit-card { background: var(--tp-white) !important; border: 1px solid var(--tp-line) !important; border-top: 3px solid var(--tp-night) !important; padding: 26px 28px 24px !important; box-shadow: none !important; }
@media (max-width: 599px) { html body:is(#os, body) #main.pd-venue.ti-venue aside.pd-visit-card { padding: 20px 18px !important; } }
html body:is(#os, body) #main.pd-venue.ti-venue aside.pd-visit-card > h2 { margin: 0 0 6px !important; padding: 0 0 14px !important; border: 0 !important; border-bottom: 1px solid var(--tp-line) !important; font-size: 1.125rem !important; }
html body:is(#os, body) #main.pd-venue.ti-venue .pd-opening-facts { display: block !important; margin: 0 !important; }
html body:is(#os, body) #main.pd-venue.ti-venue .pd-opening-facts > div { padding: 18px 0 !important; border-bottom: 1px solid var(--tp-line); margin: 0 !important; }
html body:is(#os, body) #main.pd-venue.ti-venue .pd-opening-facts > div:last-child { border-bottom: 0; padding-bottom: 6px !important; }
html body:is(#os, body) #main.pd-venue.ti-venue .pd-opening-facts dt { margin: 0 0 10px !important; font-size: .6875rem !important; font-weight: 650 !important; letter-spacing: .09em !important; text-transform: uppercase; color: var(--tp-stone) !important; }
html body:is(#os, body) #main.pd-venue.ti-venue .pd-opening-facts dd { margin: 0 !important; line-height: 1.55 !important; }
html body:is(#os, body) #main .os-fact-rows { display: grid; gap: 0; }
html body:is(#os, body) #main .os-fact-row { display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: 4px 16px; align-items: baseline; padding: 7px 0; border-top: 1px dashed var(--tp-line); font-size: .9375rem; }
html body:is(#os, body) #main .os-fact-row:first-child { border-top: 0; padding-top: 0; }
html body:is(#os, body) #main .os-fact-row > b { font-weight: 600; color: var(--tp-night); }
html body:is(#os, body) #main .os-fact-row > span { font-variant-numeric: tabular-nums; color: var(--tp-night); }
html body:is(#os, body) #main .os-fact-prices .os-fact-row > span { font-weight: 700; text-align: right; }
html body:is(#os, body) #main .os-fact-row i { display: block; font-style: normal; font-size: .75rem; font-weight: 450; color: var(--tp-stone); text-align: inherit; }
html body:is(#os, body) #main .os-fact-note, html body:is(#os, body) #main.pd-venue.ti-venue .pd-opening-facts dd small { display: block; margin-top: 10px !important; font-size: .8125rem !important; line-height: 1.5 !important; color: var(--tp-stone) !important; }
html body:is(#os, body) #main.pd-venue.ti-venue .pd-opening-facts dd small a { color: var(--tp-night) !important; text-decoration: underline; text-underline-offset: 3px; }
html body:is(#os, body) #main.pd-venue.ti-venue .pd-opening-price .pd-opening-money strong { font-size: 2.25rem !important; letter-spacing: -.03em; }
html body:is(#os, body) #main .os-glance-actions { margin-top: 20px !important; gap: 10px !important; }
html body:is(#os, body) #main.pd-venue.ti-venue aside.pd-visit-card .pd-opening-facts { border: 0 !important; padding-top: 0 !important; }
html body:is(#os, body) #main.pd-venue.ti-venue aside.pd-visit-card > h2 { border-bottom-width: 1px !important; }
html body:is(#os, body) #main .os-fact-rows:not(.os-fact-prices) .os-fact-row { grid-template-columns: 7.5rem minmax(0, 1fr); }
html body:is(#os, body) #main article.pd-result .pd-result-actions a { line-height: 1.4 !important; min-height: 0 !important; }
html body:is(#os, body) #main section.publication-same-sport > div.publication-compact-grid.publication-compact-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)) !important; gap: 16px !important; }
/* ---- Release J: guides — phone tables, place cards, folded later sections ------------------------------------ */
html body:is(#os, body) #main .os-guide-places { margin: 2.6rem 0 2.2rem; }
html body:is(#os, body) #main .os-guide-places > h2 { margin: 0 0 1rem !important; }
html body:is(#os, body) #main .os-guide-places .pd-directory-results { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important; }
html body:is(#os, body) #main details.os-guide-fold { border-top: 1px solid var(--tp-line); margin: 0; }
html body:is(#os, body) #main details.os-guide-fold:last-of-type { border-bottom: 1px solid var(--tp-line); }
html body:is(#os, body) #main details.os-guide-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; }
html body:is(#os, body) #main details.os-guide-fold > summary::-webkit-details-marker { display: none; }
html body:is(#os, body) #main details.os-guide-fold > summary h2 { margin: 0 !important; font-size: clamp(1.2rem, 2.6vw, 1.55rem) !important; line-height: 1.25 !important; }
html body:is(#os, body) #main details.os-guide-fold > summary::after { content: "+"; flex: none; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--tp-night); font-size: 1.25rem; line-height: 1; }
html body:is(#os, body) #main details.os-guide-fold[open] > summary::after { content: "\2212"; background: var(--tp-night); color: var(--tp-white); }
html body:is(#os, body) #main details.os-guide-fold > summary:hover h2 { text-decoration: underline; text-underline-offset: 4px; }
html body:is(#os, body) #main .os-guide-fold-body { padding: 0 0 1.4rem; }
@media (max-width: 700px) {
  html body:is(#os, body) #main :is(table.guide-price-table, table.pg-entry-table, table.pd-comparison) { display: block !important; border: 0 !important; background: none !important; width: 100% !important; }
  html body:is(#os, body) #main :is(table.guide-price-table, table.pg-entry-table, table.pd-comparison) caption { display: block !important; text-align: left !important; margin: 0 0 10px !important; font-size: .8125rem !important; font-weight: 650 !important; color: var(--tp-stone) !important; }
  html body:is(#os, body) #main :is(table.guide-price-table, table.pg-entry-table, table.pd-comparison) thead { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; }
  html body:is(#os, body) #main :is(table.guide-price-table, table.pg-entry-table, table.pd-comparison) tbody { display: grid !important; gap: 12px !important; }
  html body:is(#os, body) #main :is(table.guide-price-table, table.pg-entry-table, table.pd-comparison) tr { display: block !important; margin: 0 !important; padding: 14px 16px 10px !important; background: var(--tp-white) !important; border: 1px solid var(--tp-line) !important; border-top: 3px solid var(--tp-night) !important; }
  html body:is(#os, body) #main :is(table.guide-price-table, table.pg-entry-table, table.pd-comparison) :is(th, td) { display: block !important; width: auto !important; padding: 6px 0 !important; border: 0 !important; background: none !important; text-align: left !important; font-size: .9375rem !important; line-height: 1.5 !important; }
  html body:is(#os, body) #main :is(table.guide-price-table, table.pg-entry-table, table.pd-comparison) tr > :first-child { padding: 0 0 10px !important; margin-bottom: 4px !important; border-bottom: 1px solid var(--tp-line) !important; font-size: 1.0625rem !important; font-weight: 700 !important; color: var(--tp-night) !important; }
  html body:is(#os, body) #main :is(table.guide-price-table, table.pg-entry-table, table.pd-comparison) tr > :first-child::before { content: none !important; display: none !important; }
  html body:is(#os, body) #main :is(table.guide-price-table, table.pg-entry-table, table.pd-comparison) td::before { content: attr(data-label) !important; display: block !important; margin: 0 0 2px !important; font-size: .6875rem !important; font-weight: 650 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--tp-stone) !important; }
  html body:is(#os, body) #main :is(table.guide-price-table, table.pg-entry-table, table.pd-comparison) td:not([data-label])::before { content: none !important; }
  html body:is(#os, body) #main :is(.guide-table-scroll, .pg-entry-region) { overflow: visible !important; border: 0 !important; box-shadow: none !important; }
}
/* ---- Release L: drawn scenes, area map and week chart -------------------------------------------------------- */
html body:is(#os, body) #main article.pd-result .pd-result-art { margin: -22px -22px 16px; height: 132px; overflow: hidden; background: #2f3c63; }
html body:is(#os, body) #main article.pd-result .pd-result-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
html body:is(#os, body) #main.pd-venue.ti-venue figure.os-venue-scene { margin: 26px 0 0; max-width: 600px; }
html body:is(#os, body) #main figure.os-venue-scene img, html body:is(#os, body) #main figure.os-guide-scene img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
html body:is(#os, body) #main figure.os-guide-scene { margin: 0 auto 2rem; max-width: 880px; }
html body:is(#os, body) #main figure.os-guide-scene img { aspect-ratio: 16 / 7; object-position: 50% 70%; }
html body:is(#os, body) #main .os-hub-figure { box-sizing: border-box; width: min(var(--os-frame), calc(100% - 2 * var(--os-gutter))) !important; max-width: none !important; margin: 0 auto 2rem !important; padding: 0 !important; }
html body:is(#os, body) #main .os-hub-figure figure { margin: 0; }
html body:is(#os, body) #main .os-hub-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 6; object-fit: cover; object-position: 50% 70%; }
html body:is(#os, body) #main .os-visit-visuals { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 28px; align-items: start; margin: 18px 0 26px; }
@media (max-width: 640px) { html body:is(#os, body) #main .os-visit-visuals { grid-template-columns: minmax(0, 1fr); } html body:is(#os, body) #main figure.os-area-map { max-width: 260px; } }
html body:is(#os, body) #main figure.os-area-map { margin: 0; background: var(--tp-white); border: 1px solid var(--tp-line); border-top: 3px solid var(--tp-night); padding: 10px; }
html body:is(#os, body) #main figure.os-area-map svg { display: block; width: 100%; height: auto; }
html body:is(#os, body) #main figure.os-area-map .land { fill: #f4f1ec; }
html body:is(#os, body) #main figure.os-area-map .sea { fill: #c9d6df; }
html body:is(#os, body) #main figure.os-area-map .zones path { fill: #e6e0d8; stroke: #ffffff; stroke-width: 2; }
html body:is(#os, body) #main figure.os-area-map .zones path.on { fill: var(--tp-night); }
html body:is(#os, body) #main figure.os-area-map .road { stroke: #9a948d; stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
html body:is(#os, body) #main figure.os-area-map text { font: 600 12px Geist, Arial, sans-serif; fill: #55514d; text-anchor: middle; }
html body:is(#os, body) #main figure.os-area-map text.on { fill: #ffffff; font-weight: 700; }
html body:is(#os, body) #main figure.os-area-map .road-label, html body:is(#os, body) #main figure.os-area-map .north { font-size: 10px; text-anchor: start; }
html body:is(#os, body) #main figure.os-area-map .north { text-anchor: end; }
html body:is(#os, body) #main figure.os-area-map .sea-label { font-size: 11px; fill: #6d7f8c; font-style: italic; transform: rotate(-90deg); transform-origin: 40px 200px; }
html body:is(#os, body) #main figure.os-area-map figcaption { margin-top: 6px; font-size: .6875rem; color: var(--tp-stone); }
html body:is(#os, body) #main figure.os-week { margin: 0; background: var(--tp-white); border: 1px solid var(--tp-line); border-top: 3px solid var(--tp-night); padding: 16px 18px 12px; }
html body:is(#os, body) #main figure.os-week figcaption { margin: 0 0 12px; font-size: .6875rem; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; color: var(--tp-stone); }
html body:is(#os, body) #main figure.os-week ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
html body:is(#os, body) #main figure.os-week li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 7.5rem; gap: 12px; align-items: center; font-size: .875rem; }
html body:is(#os, body) #main figure.os-week li b { font-weight: 650; }
html body:is(#os, body) #main figure.os-week li i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--tp-graphite); text-align: right; font-size: .8125rem; }
html body:is(#os, body) #main figure.os-week li.closed i { color: var(--tp-stone); }
html body:is(#os, body) #main .os-week-track { position: relative; height: 14px; background: repeating-linear-gradient(90deg, #efebe5 0 calc(25% - 1px), #dad5ce calc(25% - 1px) 25%); }
html body:is(#os, body) #main .os-week-track span { position: absolute; top: 0; bottom: 0; background: var(--tp-night); }
html body:is(#os, body) #main .os-week-scale { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 7.5rem; gap: 12px; margin: 6px 0 0; font-size: .625rem; color: var(--tp-stone); }
html body:is(#os, body) #main .os-week-scale span:first-child { grid-column: 2; }
html body:is(#os, body) #main .os-week-scale { position: relative; }
html body:is(#os, body) #main .os-week-scale span { display: none; }
@media (max-width: 420px) { html body:is(#os, body) #main figure.os-week li { grid-template-columns: 2.4rem minmax(0, 1fr) 6.4rem; gap: 8px; } }
html body:is(#os, body) #main figure.os-area-map svg { width: 100% !important; height: auto !important; max-width: none !important; aspect-ratio: 320 / 420; }
html body:is(#os, body) #main .os-hub-figure img { aspect-ratio: 16 / 5 !important; max-height: 340px; }
html body:is(#os, body) #main figure.os-area-map svg { max-height: none !important; }
@media (max-width: 760px) { html body:is(#os, body) #main.pd-venue.ti-venue figure.os-venue-scene { margin-top: 18px; } html body:is(#os, body) #main figure.os-venue-scene img { aspect-ratio: 16 / 8 !important; object-position: 50% 70%; } }
html body:is(#os, body) #main figure.os-area-map .zones path { stroke-width: 3 !important; stroke-linejoin: round; }
html body:is(#os, body) #main figure.os-area-map .sea { fill: #cddae3; }
html body:is(#os, body) #main article.pd-result .pd-result-actions { align-items: center !important; } html body:is(#os, body) #main article.pd-result .pd-result-actions a { display: inline-flex !important; align-items: center !important; min-height: 32px !important; }
html body:is(#os, body) #main #search-load-more-btn { display: block; width: auto !important; min-width: 220px; max-width: calc(100% - 120px); margin-left: auto !important; margin-right: auto !important; }
/* ---- Release M: sport picture tiles, price bars, area overview ---------------------------------------------- */
html body:is(#os, body) .ti-home .os-sport-tiles { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; border-top: 0 !important; padding-top: 6px !important; }
html body:is(#os, body) .ti-home .os-sport-tiles > li { border: 0 !important; }
html body:is(#os, body) .ti-home .os-sport-tiles > li > a { display: grid !important; grid-template-columns: auto 1fr auto !important; grid-template-areas: "art art art" "num title count" "note note note"; gap: 6px 10px !important; align-items: baseline !important; padding: 0 0 16px !important; background: var(--tp-white); border: 1px solid var(--tp-line) !important; border-top: 3px solid var(--tp-night) !important; min-height: 0 !important; transition: box-shadow .18s ease, transform .18s ease; }
html body:is(#os, body) .ti-home .os-sport-tiles > li > a:hover { box-shadow: 0 14px 32px -18px rgba(11, 11, 12, .45); transform: translateY(-2px); }
html body:is(#os, body) .ti-home .os-sport-tiles .os-tile-art { grid-area: art; display: block; height: 150px; overflow: hidden; background: #2f3c63; margin-bottom: 8px; }
html body:is(#os, body) .ti-home .os-sport-tiles .os-tile-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
html body:is(#os, body) .ti-home .os-sport-tiles .os-num { grid-area: num; padding-left: 16px; }
html body:is(#os, body) .ti-home .os-sport-tiles .os-row-title { grid-area: title; font-size: 1.125rem !important; font-weight: 700 !important; }
html body:is(#os, body) .ti-home .os-sport-tiles .os-row-count { grid-area: count; padding-right: 16px; }
html body:is(#os, body) .ti-home .os-sport-tiles .os-row-note { grid-area: note; padding: 0 16px; }
html body:is(#os, body) .ti-home .os-sport-tiles .os-arrow { display: none !important; }
html body:is(#os, body) #main .os-quick-list > li > a { flex-wrap: wrap; }
html body:is(#os, body) #main .os-price-bar { display: block; flex: 1 0 100%; grid-column: 1 / -1; height: 6px; margin-top: 8px; background: #ebe6df; }
html body:is(#os, body) #main .os-price-bar > span { display: block; height: 100%; background: var(--tp-night); }
html body:is(#os, body) #main .os-area-overview { box-sizing: border-box; width: min(var(--os-frame), calc(100% - 2 * var(--os-gutter))); margin: 0 auto 2.4rem; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 640px) { html body:is(#os, body) #main .os-area-overview { grid-template-columns: minmax(0, 1fr); } html body:is(#os, body) #main .os-area-overview figure { max-width: 280px; } }
html body:is(#os, body) #main figure.os-area-map-wrap { margin: 0; background: var(--tp-white); border: 1px solid var(--tp-line); border-top: 3px solid var(--tp-night); padding: 10px; }
html body:is(#os, body) #main :is(figure.os-area-map, figure.os-area-map-wrap) svg { display: block; width: 100% !important; height: auto !important; max-width: none !important; max-height: none !important; aspect-ratio: 320 / 420; }
html body:is(#os, body) #main figure.os-area-map-wrap .land { fill: #f4f1ec; }
html body:is(#os, body) #main figure.os-area-map-wrap .sea { fill: #cddae3; }
html body:is(#os, body) #main figure.os-area-map-wrap .zones path { fill: #e6e0d8; stroke: #fff; stroke-width: 3; }
html body:is(#os, body) #main figure.os-area-map-wrap .zones path.on { fill: var(--tp-night); }
html body:is(#os, body) #main figure.os-area-map-wrap .road { stroke: #9a948d; stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
html body:is(#os, body) #main figure.os-area-map-wrap text { font: 600 12px Geist, Arial, sans-serif; fill: #55514d; text-anchor: middle; pointer-events: none; }
html body:is(#os, body) #main figure.os-area-map-wrap text.on { fill: #fff; font-weight: 700; }
html body:is(#os, body) #main figure.os-area-map-wrap .road-label { font-size: 10px; text-anchor: start; }
html body:is(#os, body) #main figure.os-area-map-wrap .north { font-size: 10px; text-anchor: end; }
html body:is(#os, body) #main figure.os-area-map-wrap .sea-label { font-size: 11px; fill: #6d7f8c; font-style: italic; transform: rotate(-90deg); transform-origin: 40px 200px; }
html body:is(#os, body) #main figure.os-area-map-wrap figcaption { margin-top: 6px; font-size: .6875rem; color: var(--tp-stone); }
html body:is(#os, body) #main :is(figure.os-area-map, figure.os-area-map-wrap) .zones a path { cursor: pointer; transition: fill .15s ease; }
html body:is(#os, body) #main :is(figure.os-area-map, figure.os-area-map-wrap) .zones a:hover path, html body:is(#os, body) #main :is(figure.os-area-map, figure.os-area-map-wrap) .zones a:focus path { fill: #bdb8b3; }
html body:is(#os, body) #main .os-area-others ul { list-style: none; margin: 8px 0 0; padding: 0; border-top: 2px solid var(--tp-night); }
html body:is(#os, body) #main .os-area-others li a { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--tp-line); color: var(--tp-night); font-weight: 650; text-decoration: none; }
html body:is(#os, body) #main .os-area-others li a::after { content: "\2192"; color: var(--tp-stone); }
html body:is(#os, body) #main .os-area-others li a:hover { text-decoration: underline; text-underline-offset: 3px; }
html body:is(#os, body) #main .os-area-note { margin-top: 10px; font-size: .8125rem; color: var(--tp-stone); }
/* ---- Release N: drawn scenes on ranked-guide cards and on the guides index ------------------------------------ */
html body:is(#os, body) #main .guide-records article.cat-venue-card > .pd-result-art { margin: -16px 0 14px; height: 132px; overflow: hidden; background: #2f3c63; flex: none; }
html body:is(#os, body) #main a.cat-venue-card[data-guide-id] > .pd-result-art { margin: -19.2px 0 14px; height: 140px; overflow: hidden; background: #2f3c63; flex: none; }
html body:is(#os, body) #main :is(.guide-records article.cat-venue-card, a.cat-venue-card[data-guide-id]) > .pd-result-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
/* The record's tag slugs stay in the page for the evidence check; the card shows the price and the facts instead. */
html body:is(#os, body) #main .guide-records article.cat-venue-card .cv-pill-tag { display: none !important; }
/* Guides index: "All guides" lines up with the guide grid under it (it sat centred in a 720px reading column). */
html body:is(#os, body) #main.ti-guide-index-main .venue-body > h2.guide-rank-section { max-width: none !important; text-align: left !important; }
/* ---- Release O: price lists read as a menu on a phone — name on the left, price on the right ---------------- */
@media (max-width: 760px) {
  html body:is(#os, body) #main.pd-venue :is(.publication-product, .pg-price-row) { grid-template-columns: minmax(0, 1fr) auto !important; gap: .25rem 1rem !important; padding: .85rem 0 !important; align-items: start !important; }
  html body:is(#os, body) #main.pd-venue :is(.publication-product, .pg-price-row) h3 { font-size: 1rem !important; margin: 0 0 .2rem !important; }
  html body:is(#os, body) #main.pd-venue :is(.publication-product-price, .pg-price-amount) { display: flex !important; flex-direction: column !important; align-items: flex-end !important; text-align: right !important; gap: 0 !important; }
  html body:is(#os, body) #main.pd-venue :is(.publication-product-price, .pg-price-amount) > strong { font-size: 1.25rem !important; line-height: 1.2 !important; white-space: nowrap; }
  html body:is(#os, body) #main.pd-venue :is(.publication-product-price, .pg-price-amount) > :is(span, a, small) { flex-basis: auto !important; font-size: .6875rem !important; line-height: 1.45 !important; white-space: nowrap; }
  html body:is(#os, body) #main.pd-venue :is(.publication-product, .pg-price-row) > div:first-child small { display: block; font-size: .75rem; color: var(--tp-stone); }
}
/* ---- Release P: drawn scenes on the sports index tiles; drawn area views ----------------------------------- */
html body:is(#os, body) #main a.numcard > .pd-result-art { margin: -16px -16px 14px; height: 132px; overflow: hidden; background: #2f3c63; }
html body:is(#os, body) #main a.numcard > .pd-result-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
/* ---- Release Q (10 Oct 2026; the owner: "look how repetitive") ---------------------------------------------
   A list of places in one sport showed the same drawing on every card. Card pictures now appear only where the
   cards differ: mixed lists (home, guide place cards), the guides index and the sports index. Sport pages, area
   sport pages, search results and "more places in this sport" show the scene once (the page's own picture), and
   their cards are text. */
html body:is(#os, body) #main:is(:has(.hub-hero--category), :has(#search-results)) article.pd-result .pd-result-art,
html body:is(#os, body) #main .publication-same-sport article .pd-result-art { display: none !important; }
/* Small sport and area pages: the cards sit in the same three-column grid as the big ones, never one 1,220px card. */
html body:is(#os, body) #main .numlist.guide-hub-grid:has(> article.pd-result) { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)) !important; gap: 16px !important; align-items: stretch !important; }
/* ---- Release R: the map page gets a real map; map and coach results use the site's card --------------------- */
html body:is(#os, body) #main .os-map-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 1000px) { html body:is(#os, body) #main .os-map-layout { grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 32px; } html body:is(#os, body) #main figure.os-map { position: sticky; top: 88px; } }
html body:is(#os, body) #main figure.os-map { margin: 0; background: var(--tp-white); border: 1px solid var(--tp-line); border-top: 3px solid var(--tp-night); padding: 8px; }
html body:is(#os, body) #main .os-map-canvas { position: relative; }
html body:is(#os, body) #main .os-map-canvas > img { display: block; width: 100%; height: auto; max-height: none !important; }
@media (min-width: 1000px) { html body:is(#os, body) #main .os-map-canvas > img { max-height: calc(100vh - 150px) !important; width: auto; max-width: 100%; margin: 0 auto; } html body:is(#os, body) #main .os-map-canvas { width: fit-content; max-width: 100%; margin: 0 auto; } }
html body:is(#os, body) #main .os-map-pins { position: absolute; inset: 0; }
html body:is(#os, body) #main .os-map-area { position: absolute; transform: translateY(-50%); font: 700 .6875rem/1 Geist, Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-night); text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff; white-space: nowrap; pointer-events: none; }
html body:is(#os, body) #main a.os-map-pin { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--tp-night); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.35); text-decoration: none; z-index: 1; }
html body:is(#os, body) #main a.os-map-pin[hidden] { display: none !important; }
html body:is(#os, body) #main a.os-map-pin > span { display: none; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 4px 8px; background: var(--tp-night); color: #fff; font: 600 .75rem/1.3 Geist, Arial, sans-serif; white-space: nowrap; }
html body:is(#os, body) #main a.os-map-pin:hover { z-index: 3; transform: scale(1.25); }
html body:is(#os, body) #main a.os-map-pin:hover > span { display: block; }
html body:is(#os, body) #main figure.os-map figcaption { margin: 8px 2px 2px; font-size: .6875rem; line-height: 1.5; color: var(--tp-stone); }
/* Results: one card language for the map and the coach finder. */
html body:is(#os, body) #main .location-result-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)) !important; gap: 16px !important; }
html body:is(#os, body) #main article.location-result-card { display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 14px !important; min-height: 0 !important; padding: 18px 20px !important; background: var(--tp-white) !important; border: 1px solid var(--tp-line) !important; border-top: 3px solid var(--tp-night) !important; border-radius: 0 !important; box-shadow: none !important; }
html body:is(#os, body) #main article.location-result-card[hidden] { display: none !important; }
html body:is(#os, body) #main article.location-result-card .result-card-tag { display: block; font: 650 .6875rem/1.4 Geist, Arial, sans-serif !important; letter-spacing: .08em; text-transform: uppercase; color: var(--tp-stone) !important; }
html body:is(#os, body) #main article.location-result-card h3 { margin: 6px 0 6px !important; font-size: 1.125rem !important; line-height: 1.3 !important; }
html body:is(#os, body) #main article.location-result-card p { margin: 4px 0 !important; font-size: .875rem !important; line-height: 1.55 !important; color: var(--tp-graphite) !important; }
html body:is(#os, body) #main article.location-result-card .location-card-actions { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: flex-start !important; gap: 6px 18px !important; padding-top: 12px; border-top: 1px solid var(--tp-line); font-size: .8125rem; }
html body:is(#os, body) #main article.location-result-card .location-card-actions > span { flex-basis: 100%; font-size: .75rem; color: var(--tp-stone); }
html body:is(#os, body) #main article.location-result-card .location-card-actions a { display: inline-flex !important; align-items: center; gap: 4px; min-height: 32px; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; color: var(--tp-night) !important; font-weight: 650; text-decoration: none; }
html body:is(#os, body) #main article.location-result-card .location-card-actions a:first-of-type:not(:has(svg))::after { content: "→"; margin-left: 2px; }
html body:is(#os, body) #main article.location-result-card .location-card-actions a:not(:first-of-type) { font-weight: 500; color: var(--tp-graphite) !important; }
html body:is(#os, body) #main article.location-result-card .location-card-actions a:hover { text-decoration: underline; }
html body:is(#os, body) #main article.location-result-card .location-card-actions svg { width: 13px; height: 13px; }
html body:is(#os, body) #main article.location-result-card .match-signals { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
html body:is(#os, body) #main article.location-result-card .match-signals li { padding: 2px 8px; border: 1px solid var(--tp-line); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--tp-graphite); }
html body:is(#os, body) #main .map-results-head { display: flex; align-items: end; justify-content: space-between; margin: 8px 0 16px; }
html body:is(#os, body) #main .location-load-more { display: flex; justify-content: center; margin-top: 20px; }
html body:is(#os, body) #main article.location-result-card > div { padding: 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; text-align: left !important; }
html body:is(#os, body) #main article.location-result-card .location-card-actions { margin-top: auto !important; }
html body:is(#os, body) #main #location-tool-status { margin: 0 0 4px !important; padding: 0 !important; text-align: left !important; }
html body:is(#os, body) #main .location-filter-actions .btn-primary { background: var(--tp-night) !important; color: #fff !important; border-color: var(--tp-night) !important; }
html body:is(#os, body) #main article.location-result-card { align-items: stretch !important; }
html body:is(#os, body) #main .os-map-results { min-width: 0; padding: 0 !important; margin: 0 !important; }
html body:is(#os, body) #main .location-result-list { padding: 0 !important; margin: 0 !important; width: auto !important; max-width: none !important; }
@media (max-width: 599px) { html body:is(#os, body) #main a.os-map-pin { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-width: 1.5px; } html body:is(#os, body) #main .os-map-area { font-size: .5625rem; } }
html body:is(#os, body) #main .os-guide-places.os-one-sport article.pd-result .pd-result-art { display: none !important; }
/* ---- Release T: loose venue links read as links ----------------------------------------------------------- */
html body:is(#os, body) #main :is(.publication-contact-social, nav.pd-venue-resources) { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0; }
html body:is(#os, body) #main :is(.publication-contact-social, nav.pd-venue-resources) a { display: inline-flex; align-items: center; min-height: 32px; color: var(--tp-night) !important; font-size: .875rem; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }
html body:is(#os, body) #main :is(.publication-contact-social, nav.pd-venue-resources) a::after { content: "↗"; margin-left: 4px; text-decoration: none; font-weight: 500; }
/* Primary actions are black everywhere; grey reads as disabled. */
html body:is(#os, body) #main a.publication-button:not(.publication-secondary) { background: var(--tp-night) !important; color: #fff !important; border-color: var(--tp-night) !important; }
/* Plain bullet lists: the drawn bullet (an absolutely placed ::before at left 0) sat on the first letter. */
html body:is(#os, body) #main ul:not([class]) > li { padding-left: 18px !important; }
/* ---- Release V: the area and sport reading starts on the frame's left edge, like the headings around it ------ */
html body:is(#os, body) #main .taxonomy-reading-section article.venue-body > :not(details) { margin-left: 0 !important; margin-right: auto !important; }
/* Guides index, trip planner, compare and the statistics page start on the frame's left edge like every other page. */
html body:is(#os, body) #main.ti-guide-index-main article.venue-body > * { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; max-width: none !important; }
html body:is(#os, body) #main:is(.pg-plan, .pg-compare) { box-sizing: border-box; width: min(var(--os-frame), calc(100% - 2 * var(--os-gutter))) !important; max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: auto !important; margin-right: auto !important; }
html body:is(#os, body) #main .dix-wrap { box-sizing: border-box; width: min(var(--os-frame), calc(100% - 2 * var(--os-gutter))) !important; max-width: none !important; }
/* Home: the sport tiles above already carry the pictures; the popular cards (mostly gyms) would repeat one hall. */
html body:is(#os, body) #main .os-home-cards article.pd-result .pd-result-art { display: none !important; }
/* Area pages list places of many sports in runs (three Muay Thai camps in a row); the area photo or drawing and
   the map carry the picture, the place cards stay text. Pictures on cards remain where each card is a different
   topic: the guides index and the sports index. */
html body:is(#os, body) #main:has(.hub-hero--area) article.pd-result .pd-result-art { display: none !important; }
/* One rule for place cards everywhere: text, no drawing. A list of places in Pattaya is mostly gyms and camps, so
   any card picture repeats; each place's own page carries its scene. */
html body:is(#os, body) #main article.pd-result .pd-result-art,
html body:is(#os, body) #main .guide-records article.cat-venue-card > .pd-result-art { display: none !important; }
/* ---- Release X: price lists grouped by programme, room type or price list ---------------- */
html body:is(#os, body) #main.pd-venue .pg-price-group { margin: 1.6rem 0 0 !important; padding: 0 0 .4rem !important; font-size: .78rem !important; font-weight: 600 !important; letter-spacing: .06em !important; text-transform: uppercase !important; border-bottom: 1px solid currentColor !important; }
html body:is(#os, body) #main.pd-venue .pg-price-table-head + .pg-price-group { margin-top: .6rem !important; }

/* ---- Rebuild (14 Oct 2026): compact lists, one-tap filters, dated price tables, a shorter home ---------------- */
html body:is(#os, body) :is(.rb-hero, .rb-block, .rb-sig) { box-sizing: border-box; width: min(var(--os-frame), calc(100% - 2 * var(--os-gutter))); margin-inline: auto; }
html body:is(#os, body) .rb-hero { display: grid; gap: 1.6rem; padding: 2.2rem 0 1.4rem; }
@media (min-width: 900px) { html body:is(#os, body) .rb-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 3rem; padding: 3.6rem 0 2.6rem; } }
html body:is(#os, body) .rb-hero h1 { margin: 0; font-size: clamp(2.1rem, 6.4vw, 4rem); line-height: 1.02; letter-spacing: -.035em; color: var(--tp-night); max-width: 16ch; }
html body:is(#os, body) .rb-lede { margin: .9rem 0 1.3rem; font-size: 1.05rem; line-height: 1.5; color: var(--tp-stone); max-width: 44ch; }
html body:is(#os, body) .rb-search { display: flex; max-width: 34rem; border: 2px solid var(--tp-night); background: #fff; }
html body:is(#os, body) .rb-search input { flex: 1; min-width: 0; min-height: 52px; padding: 0 1rem; border: 0; font: inherit; font-size: 1rem; background: transparent; color: var(--tp-night); }
html body:is(#os, body) .rb-search button { min-height: 52px; padding: 0 1.3rem; border: 0; background: var(--tp-night); color: #fff; font: 600 1rem/1 Geist, Arial, sans-serif; cursor: pointer; }
html body:is(#os, body) .rb-shortcuts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
html body:is(#os, body) .rb-shortcuts a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .9rem; border: 1px solid var(--tp-night); border-radius: 999px; color: var(--tp-night); text-decoration: none; font-weight: 600; font-size: .92rem; background: transparent; }
html body:is(#os, body) .rb-shortcuts a:hover { background: var(--tp-night); color: #fff; }
html body:is(#os, body) .rb-hero-art { margin: 0; }
html body:is(#os, body) .rb-hero-art img { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover; }
@media (max-width: 899px) { html body:is(#os, body) .rb-hero-art img { aspect-ratio: 16 / 9; } }

html body:is(#os, body) .rb-block { padding: 2.4rem 0 0; }
html body:is(#os, body) .rb-block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
html body:is(#os, body) .rb-block-head h2 { margin: 0; font-size: clamp(1.35rem, 3.4vw, 2rem); line-height: 1.12; letter-spacing: -.025em; color: var(--tp-night); }
html body:is(#os, body) .rb-more { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; font-weight: 600; color: var(--tp-night); text-decoration: none; }
html body:is(#os, body) .rb-arrow { flex: none; }
html body:is(#os, body) .rb-block--night { margin-top: 2.6rem; padding: 2rem var(--os-gutter) 2.2rem; width: 100%; max-width: none; background: var(--tp-night); color: #fff; }
html body:is(#os, body) .rb-block--night > * { width: min(var(--os-frame), 100%); margin-inline: auto; }
html body:is(#os, body) .rb-block--night :is(h2, .rb-more, .rb-row-name, .rb-row-price) { color: #fff; }
html body:is(#os, body) .rb-block--night .rb-list { border-top-color: #fff; }
html body:is(#os, body) .rb-block--night .rb-row a { border-bottom-color: var(--tp-graphite); }
html body:is(#os, body) .rb-block--night :is(.rb-row-meta, .rb-row-date, .rb-row-price small) { color: var(--tp-mist); }

html body:is(#os, body) .rb-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (min-width: 700px) { html body:is(#os, body) .rb-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
html body:is(#os, body) .rb-tiles a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 56px; padding: .7rem .9rem; border: 1px solid var(--tp-line); background: #fff; color: var(--tp-night); text-decoration: none; }
html body:is(#os, body) .rb-tiles a:hover { border-color: var(--tp-night); }
html body:is(#os, body) .rb-tile-name { font-weight: 600; line-height: 1.2; }
html body:is(#os, body) .rb-tile-count { flex: none; font-variant-numeric: tabular-nums; color: var(--tp-stone); font-size: .9rem; }
html body:is(#os, body) .rb-links { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tp-night); columns: 1; }
@media (min-width: 700px) { html body:is(#os, body) .rb-links { columns: 2; column-gap: 2rem; } }
html body:is(#os, body) .rb-links a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 52px; border-bottom: 1px solid var(--tp-line); color: var(--tp-night); font-weight: 600; text-decoration: none; break-inside: avoid; }
html body:is(#os, body) .rb-sig { margin: 2.4rem auto 0; padding: 1.2rem 0 2.4rem; border-top: 1px solid var(--tp-line); color: var(--tp-stone); font-size: .9rem; line-height: 1.5; }
html body:is(#os, body) .rb-sig a { color: var(--tp-night); font-weight: 600; }

/* Compact rows */
html body:is(#os, body) .rb-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--tp-night); }
html body:is(#os, body) .rb-row[hidden] { display: none; }
html body:is(#os, body) .rb-row a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; align-items: start; padding: .85rem 0; border-bottom: 1px solid var(--tp-line); color: var(--tp-night); text-decoration: none; }
html body:is(#os, body) .rb-row a:hover .rb-row-name { text-decoration: underline; text-underline-offset: .18em; }
html body:is(#os, body) .rb-row-main { display: grid; gap: .15rem; min-width: 0; }
html body:is(#os, body) .rb-row-name { font-weight: 650; font-size: 1.02rem; line-height: 1.25; }
html body:is(#os, body) .rb-row-meta { color: var(--tp-stone); font-size: .86rem; line-height: 1.35; }
html body:is(#os, body) .rb-row-hours { color: var(--tp-graphite); font-size: .84rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
html body:is(#os, body) .rb-row-price { display: grid; justify-items: end; text-align: right; font-weight: 700; font-size: 1.08rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
html body:is(#os, body) .rb-row-price small { font-weight: 500; font-size: .78rem; color: var(--tp-stone); }
html body:is(#os, body) .rb-row-price--none { font-weight: 500; font-size: .82rem; color: var(--tp-stone); }
html body:is(#os, body) .rb-row-date { font-weight: 400; font-size: .72rem; color: var(--tp-stone); }

/* Finder */
html body:is(#os, body) .rb-finder { box-sizing: border-box; width: min(var(--os-frame), calc(100% - 2 * var(--os-gutter))); margin: 1.6rem auto 2.4rem; }
html body:is(#os, body) .rb-finder-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
html body:is(#os, body) .rb-finder-head h2 { margin: 0 0 .7rem; font-size: clamp(1.3rem, 3vw, 1.8rem); letter-spacing: -.02em; color: var(--tp-night); }
html body:is(#os, body) .rb-count { margin: 0; color: var(--tp-stone); font-size: .9rem; white-space: nowrap; }
html body:is(#os, body) .rb-filters { display: none; gap: .55rem; margin-bottom: .9rem; }
html body:is(#os, body) .rb-finder.rb-ready .rb-filters { display: grid; }
html body:is(#os, body) .rb-chips { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html body:is(#os, body) .rb-chips::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { html body:is(#os, body) .rb-chips { flex-wrap: wrap; overflow: visible; } }
html body:is(#os, body) .rb-chip { flex: none; min-height: 38px; padding: 0 .85rem; border: 1px solid var(--tp-line); border-radius: 999px; background: #fff; color: var(--tp-night); font: 600 .88rem/1 Geist, Arial, sans-serif; cursor: pointer; }
html body:is(#os, body) .rb-chip[aria-pressed="true"] { background: var(--tp-night); border-color: var(--tp-night); color: #fff; }
html body:is(#os, body) .rb-chips--flags .rb-chip[aria-pressed="true"]::before { content: "✓ "; }
html body:is(#os, body) .rb-tools { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
html body:is(#os, body) .rb-search-name, html body:is(#os, body) .rb-tools .rb-search { flex: 1 1 14rem; border: 0; background: none; max-width: none; }
html body:is(#os, body) .rb-tools .rb-search input { width: 100%; min-height: 42px; padding: 0 .8rem; border: 1px solid var(--tp-line); background: #fff; font: inherit; }
html body:is(#os, body) .rb-sort { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: var(--tp-stone); }
html body:is(#os, body) .rb-sort select { min-height: 42px; padding: 0 .5rem; border: 1px solid var(--tp-line); background: #fff; font: inherit; color: var(--tp-night); }
html body:is(#os, body) .rb-empty { padding: 1rem 0; color: var(--tp-stone); }
html body:is(#os, body) .rb-reset { margin-left: .4rem; min-height: 36px; padding: 0 .8rem; border: 1px solid var(--tp-night); background: none; font-weight: 600; cursor: pointer; }
html body:is(#os, body) .rb-note { margin: .9rem 0 0; color: var(--tp-stone); font-size: .84rem; line-height: 1.5; max-width: 70ch; }

/* Dated price tables */
html body:is(#os, body) .rb-table-wrap { margin: 1rem 0 1.6rem; }
html body:is(#os, body) .rb-table-wrap table { width: 100%; border-collapse: collapse; font-size: .95rem; }
html body:is(#os, body) .rb-table-wrap table caption { text-align: left; font-weight: 700; padding: 0 0 .6rem; color: var(--tp-night); }
html body:is(#os, body) .rb-table-wrap table thead th { text-align: left; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--tp-stone); padding: .5rem .6rem .5rem 0; border-bottom: 2px solid var(--tp-night); }
html body:is(#os, body) .rb-table-wrap table :is(tbody th, td) { text-align: left; vertical-align: top; padding: .75rem .6rem .75rem 0; border-bottom: 1px solid var(--tp-line); font-weight: 400; }
html body:is(#os, body) .rb-table-wrap table tbody th a { font-weight: 650; color: var(--tp-night); }
html body:is(#os, body) .rb-td-sub { display: block; color: var(--tp-stone); font-size: .82rem; line-height: 1.35; margin-top: .15rem; }
html body:is(#os, body) .rb-td-price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
html body:is(#os, body) .rb-td-date { white-space: nowrap; font-size: .85rem; }
html body:is(#os, body) .rb-td-date a { color: var(--tp-night); }
@media (max-width: 699px) {
  html body:is(#os, body) .rb-table-wrap table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  html body:is(#os, body) .rb-table-wrap table, html body:is(#os, body) .rb-table-wrap table tbody, html body:is(#os, body) .rb-table-wrap table tr { display: block; width: 100%; }
  html body:is(#os, body) .rb-table-wrap table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem 1rem; padding: .8rem 0; border-bottom: 1px solid var(--tp-line); }
  html body:is(#os, body) .rb-table-wrap table :is(tbody th, td) { display: block; padding: 0; border: 0; }
  html body:is(#os, body) .rb-table-wrap table tbody th { grid-column: 1; }
  html body:is(#os, body) .rb-table-wrap table .rb-td-price { grid-column: 2; grid-row: 1; text-align: right; }
  html body:is(#os, body) .rb-table-wrap table .rb-td-what { grid-column: 1; font-size: .88rem; }
  html body:is(#os, body) .rb-table-wrap table .rb-td-date { grid-column: 2; grid-row: 2; text-align: right; color: var(--tp-stone); }
}

/* D-047 footer credit */
html body:is(#os, body) footer.os-footer .os-credit { margin: 2rem 0 0; padding: 1.2rem 0; border-top: 1px solid var(--tp-graphite); font-size: .9rem; color: var(--tp-mist); }
html body:is(#os, body) footer.os-footer .os-credit a { color: #fff; text-decoration: underline; text-underline-offset: .2em; }
html body:is(#os, body) section.rb-directory { box-sizing: border-box; width: min(var(--os-frame), calc(100% - 2 * var(--os-gutter))); margin: 1.6rem auto 2.4rem; padding: 0 !important; }
html body:is(#os, body) section.rb-directory .rb-finder { width: auto; margin: 0; }
html body:is(#os, body) .rb-finder-title { margin: 0 0 .2rem; font-size: clamp(1.3rem, 3vw, 1.8rem); letter-spacing: -.02em; color: var(--tp-night); }
html body:is(#os, body) section.rb-directory .rb-count { margin: 0 0 .7rem; }

/* Rebuild price tables inside the guide reader: one calm table on desktop, one line per place on a phone. */
html body:is(#os, body) .rb-table-wrap .guide-table-hint { display: none !important; }
html body:is(#os, body) .rb-table-wrap .guide-table-block { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
html body:is(#os, body) .rb-table-wrap .guide-table-scroll { overflow: visible !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }
html body:is(#os, body) .rb-table-wrap table { display: table !important; width: 100% !important; min-width: 0 !important; table-layout: auto !important; border: 0 !important; background: none !important; box-shadow: none !important; margin: 0 !important; }
html body:is(#os, body) .rb-table-wrap table caption { display: table-caption !important; caption-side: top; text-align: left !important; font: 700 1rem/1.35 Geist, Arial, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--tp-night) !important; padding: 0 0 .6rem !important; position: static !important; width: auto !important; height: auto !important; clip: auto !important; }
html body:is(#os, body) .rb-table-wrap table tr { background: none !important; box-shadow: none !important; border: 0 !important; margin: 0 !important; }
html body:is(#os, body) .rb-table-wrap table :is(th, td)::before { content: none !important; display: none !important; }
html body:is(#os, body) .rb-table-wrap table :is(tbody th, td) { background: none !important; border: 0 !important; border-bottom: 1px solid var(--tp-line) !important; white-space: normal; }
html body:is(#os, body) .rb-table-wrap table tbody th a { text-decoration: none; }
html body:is(#os, body) .rb-table-wrap table .rb-td-price, html body:is(#os, body) .rb-table-wrap table .rb-td-date { white-space: nowrap !important; }
@media (max-width: 699px) {
  html body:is(#os, body) .rb-table-wrap table { display: block !important; }
  html body:is(#os, body) .rb-table-wrap table caption { display: block !important; }
  html body:is(#os, body) .rb-table-wrap table tbody { display: block !important; }
  html body:is(#os, body) .rb-table-wrap table tr { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: .15rem 1rem !important; padding: .75rem 0 !important; border-bottom: 1px solid var(--tp-line) !important; }
  html body:is(#os, body) .rb-table-wrap table :is(tbody th, td) { display: block !important; padding: 0 !important; border: 0 !important; width: auto !important; }
  html body:is(#os, body) .rb-table-wrap table tbody th { grid-column: 1 !important; grid-row: 1 !important; }
  html body:is(#os, body) .rb-table-wrap table .rb-td-price { grid-column: 2 !important; grid-row: 1 !important; text-align: right !important; }
  html body:is(#os, body) .rb-table-wrap table .rb-td-what { grid-column: 1 !important; grid-row: 2 !important; font-size: .86rem !important; }
  html body:is(#os, body) .rb-table-wrap table .rb-td-date { grid-column: 2 !important; grid-row: 2 !important; text-align: right !important; font-size: .78rem !important; }
}

/* Same, stronger than the older #main card layout for .pd-comparison tables. */
html body:is(#os, body) #main .rb-table-wrap .guide-table-hint { display: none !important; }
html body:is(#os, body) #main .rb-table-wrap .guide-table-block { margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; }
html body:is(#os, body) #main .rb-table-wrap .guide-table-scroll { overflow: visible !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: none !important; }
html body:is(#os, body) #main .rb-table-wrap table { display: table !important; width: 100% !important; min-width: 0 !important; table-layout: auto !important; border: 0 !important; background: none !important; box-shadow: none !important; margin: 0 !important; }
html body:is(#os, body) #main .rb-table-wrap table caption { display: table-caption !important; caption-side: top; text-align: left !important; font: 700 1rem/1.35 Geist, Arial, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--tp-night) !important; padding: 0 0 .6rem !important; position: static !important; width: auto !important; height: auto !important; clip: auto !important; }
html body:is(#os, body) #main .rb-table-wrap table.pd-comparison tr, html body:is(#os, body) #main .rb-table-wrap table tr { background: none !important; box-shadow: none !important; border: 0 !important; margin: 0 !important; }
html body:is(#os, body) #main .rb-table-wrap table :is(th, td)::before { content: none !important; display: none !important; }
html body:is(#os, body) #main .rb-table-wrap table :is(tbody th, td) { background: none !important; border: 0 !important; border-bottom: 1px solid var(--tp-line) !important; white-space: normal; }
html body:is(#os, body) #main .rb-table-wrap table tbody th a { text-decoration: none; }
html body:is(#os, body) #main .rb-table-wrap table .rb-td-price, html body:is(#os, body) #main .rb-table-wrap table .rb-td-date { white-space: nowrap !important; }
@media (max-width: 699px) {
  html body:is(#os, body) #main .rb-table-wrap table { display: block !important; }
  html body:is(#os, body) #main .rb-table-wrap table caption { display: block !important; }
  html body:is(#os, body) #main .rb-table-wrap table tbody { display: block !important; }
  html body:is(#os, body) #main .rb-table-wrap table.pd-comparison tr, html body:is(#os, body) #main .rb-table-wrap table tr { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; gap: .15rem 1rem !important; padding: .75rem 0 !important; border-bottom: 1px solid var(--tp-line) !important; }
  html body:is(#os, body) #main .rb-table-wrap table :is(tbody th, td) { display: block !important; padding: 0 !important; border: 0 !important; width: auto !important; }
  html body:is(#os, body) #main .rb-table-wrap table tbody th { grid-column: 1 !important; grid-row: 1 !important; }
  html body:is(#os, body) #main .rb-table-wrap table .rb-td-price { grid-column: 2 !important; grid-row: 1 !important; text-align: right !important; }
  html body:is(#os, body) #main .rb-table-wrap table .rb-td-what { grid-column: 1 !important; grid-row: 2 !important; font-size: .86rem !important; }
  html body:is(#os, body) #main .rb-table-wrap table .rb-td-date { grid-column: 2 !important; grid-row: 2 !important; text-align: right !important; font-size: .78rem !important; }
}
html body:is(#os, body) #main .rb-table-wrap table.pd-comparison tr > :first-child { margin: 0 !important; font-size: inherit !important; }
@media (max-width: 699px) { html body:is(#os, body) #main .rb-table-wrap table.pd-comparison tr > :first-child { padding: 0 !important; border-bottom: 0 !important; } html body:is(#os, body) #main .rb-table-wrap table.pd-comparison tbody { gap: 0 !important; } }
html body:is(#os, body) .rb-row-amount small { display: inline !important; }
html body:is(#os, body) .rb-block--night > :is(.rb-block-head, .rb-list) { width: min(var(--os-frame), 100%) !important; margin-left: auto !important; margin-right: auto !important; }
html body:is(#os, body) main .rb-block--night h2#rb-mt-title { color: #fff !important; -webkit-text-fill-color: #fff; }
html body:is(#os, body) .rb-row-amount { display: block; white-space: nowrap; }