/* 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; }