/* Design tokens. Per-site accent is injected inline by inc/assets.php. */
:root {
  /* Brand — default is OnTulsa plum; overridden per site */
  --om-accent: #553555;
  --om-accent-dark: #3d253e;
  --om-accent-tint: #f6f1f5;
  --om-accent-ink: #ffffff;

  /* Secondary accent: warm gold, the classic partner to plum. Used sparingly —
     featured badges, highlights, the "today" marker. */
  --om-gold: oklch(0.72 0.14 72);
  --om-gold-deep: oklch(0.56 0.13 68);
  --om-gold-tint: oklch(0.96 0.035 80);

  /* Category hues — one per top-level directory section, all at the same
     lightness/chroma so they read as one family rather than a rainbow. */
  --om-cat-eat: oklch(0.56 0.14 40);
  --om-cat-stay: oklch(0.55 0.12 248);
  --om-cat-do: oklch(0.55 0.12 168);
  --om-cat-events: oklch(0.55 0.15 330);
  --om-cat-shop: oklch(0.56 0.14 18);
  --om-cat-life: oklch(0.55 0.12 142);
  --om-cat-services: oklch(0.54 0.11 268);
  --om-cat-estate: oklch(0.55 0.12 95);

  /* Neutrals, warmed very slightly toward the accent */
  --om-ink: #1f1a20;
  --om-ink-2: #4a3f4b;
  --om-ink-3: #6d616e;
  --om-line: #e9e4e8;
  --om-line-strong: #d9d0d7;
  --om-surface: #ffffff;
  --om-surface-2: #f7f5f7;
  --om-bg: #ffffff;

  /* Semantic */
  --om-open: #1f7a4d;
  --om-open-bg: #e4f4ec;
  --om-closed: #b3261e;
  --om-warn: #a35d00;

  /* Type */
  --om-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --om-font-display: Poppins, var(--om-font);
  --om-fs-xs: 0.75rem;    /* 12 */
  --om-fs-sm: 0.8125rem;  /* 13 */
  --om-fs-base: 0.9375rem;/* 15 */
  --om-fs-md: 1rem;       /* 16 */
  --om-fs-lg: 1.25rem;    /* 20 */
  --om-fs-xl: 1.5rem;     /* 24 */
  --om-fs-2xl: 1.875rem;  /* 30 */
  --om-fs-3xl: clamp(1.75rem, 1.2rem + 2.4vw, 2.375rem);
  --om-lh-tight: 1.15;
  --om-lh: 1.5;

  /* Space (4/8 scale) */
  --om-1: 4px;  --om-2: 8px;  --om-3: 12px; --om-4: 16px;
  --om-5: 20px; --om-6: 24px; --om-8: 32px; --om-10: 40px;
  --om-12: 48px; --om-16: 64px;

  /* Shape */
  --om-r-sm: 6px;
  --om-r: 10px;
  --om-r-lg: 14px;
  --om-r-pill: 999px;

  /* Elevation */
  --om-shadow-sm: 0 1px 2px rgba(31, 26, 32, .06);
  --om-shadow: 0 6px 20px -12px rgba(31, 26, 32, .28);
  --om-shadow-hero: 0 12px 30px -18px rgba(85, 53, 85, .5);

  /* Layout */
  --om-wrap: 1240px;
  --om-wrap-narrow: 760px;
  --om-header-h: 78px;
}
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--om-bg);
  color: var(--om-ink);
  font-family: var(--om-font);
  font-size: var(--om-fs-md);
  line-height: var(--om-lh);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--om-font-display); line-height: var(--om-lh-tight); margin: 0 0 var(--om-3); text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: var(--om-fs-3xl); font-weight: 700; }
h2 { font-size: var(--om-fs-2xl); font-weight: 700; }
h3 { font-size: var(--om-fs-lg); font-weight: 600; }
p { margin: 0 0 var(--om-4); }
p, li { text-wrap: pretty; }

a { color: var(--om-accent); text-decoration-color: color-mix(in oklab, var(--om-accent) 35%, transparent); text-underline-offset: 2px; }
a:hover { color: var(--om-accent-dark); text-decoration-color: currentColor; }

img, svg, video { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--om-accent); outline-offset: 2px; border-radius: 2px; }

.om-icon { flex: 0 0 auto; }
.om-wrap { width: 100%; max-width: var(--om-wrap); margin-inline: auto; padding-inline: var(--om-5); }
.om-narrow { max-width: var(--om-wrap-narrow); }
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.om-skip {
  position: absolute; left: var(--om-4); top: -100px; z-index: 100;
  background: var(--om-accent); color: var(--om-accent-ink);
  padding: var(--om-3) var(--om-4); border-radius: var(--om-r); font-weight: 600;
  transition: top .15s;
}
.om-skip:focus { top: var(--om-4); }
/* ---------- Header ---------- */
.om-header { background: var(--om-surface); border-bottom: 1px solid var(--om-line); position: relative; z-index: 40; }
.om-header__bar { display: flex; align-items: center; gap: var(--om-5); min-height: var(--om-header-h); }
.om-logo { display: inline-flex; align-items: center; background: var(--om-accent); border-radius: var(--om-r); padding: 7px 11px; flex: 0 0 auto; }
.om-logo__img { height: 48px; width: auto; }
.om-logo--text { color: var(--om-accent-ink); font-family: var(--om-font-display); font-weight: 700; text-decoration: none; padding: 9px 12px; }

.om-nav { display: flex; align-items: center; gap: var(--om-5); }
.om-nav ul { display: flex; align-items: center; gap: var(--om-5); list-style: none; margin: 0; padding: 0; }
.om-nav li { position: relative; }
.om-nav a { color: var(--om-ink-2); text-decoration: none; font-weight: 600; font-size: var(--om-fs-base); white-space: nowrap; padding-block: 6px; display: inline-block; }
.om-nav a:hover, .om-nav .current-menu-item > a { color: var(--om-accent); }
.om-nav .sub-menu { display: none; position: absolute; top: 100%; left: 0; background: var(--om-surface); border: 1px solid var(--om-line); border-radius: var(--om-r); box-shadow: var(--om-shadow); padding: var(--om-2); min-width: 220px; flex-direction: column; align-items: stretch; gap: 0; z-index: 50; }
.om-nav li:hover > .sub-menu, .om-nav li:focus-within > .sub-menu { display: flex; }
.om-nav .sub-menu a { padding: 8px var(--om-3); border-radius: var(--om-r-sm); display: block; }
.om-nav .sub-menu a:hover { background: var(--om-accent-tint); }

/* ---------- Mega menu ---------- */
/* Triggers are buttons that must sit in the row exactly like the plain links
   beside them (Events), so they borrow .om-nav a's metrics. */
.om-nav__trigger {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0; padding-block: 6px; cursor: pointer;
  font: inherit; font-weight: 600; font-size: var(--om-fs-base);
  color: var(--om-ink-2); white-space: nowrap;
}
.om-nav__trigger:hover, .om-nav__group.is-open > .om-nav__trigger { color: var(--om-accent); }
.om-nav__chev { transition: transform .15s ease; }
.om-nav__group.is-open .om-nav__chev { transform: rotate(180deg); }

/* The panel spans the full header width, so it anchors to .om-header
   (position: relative above), not to its own li. */
.om-nav li.om-nav__group { position: static; } /* outranks .om-nav li { position: relative } */
.om-mega {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: var(--om-surface); border-bottom: 1px solid var(--om-line);
  box-shadow: var(--om-shadow); z-index: 60;
}
.om-nav__group.is-open > .om-mega { display: block; }
.om-mega__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 230px));
  gap: var(--om-6) var(--om-8); padding-block: var(--om-6);
}
.om-mega__col--wide { grid-column: span 2; }
.om-mega__col--wide > ul { columns: 2; column-gap: var(--om-8); }
.om-mega__title { margin: 0 0 var(--om-2); font-size: var(--om-fs-md); }
.om-mega__title a { color: var(--om-ink); text-decoration: none; padding: 0; }
.om-mega__title a:hover { color: var(--om-accent); }
.om-mega__col ul { display: block; list-style: none; margin: 0; padding: 0; }
.om-mega__col li { break-inside: avoid; }
.om-mega__col ul a {
  display: block; padding: 5px 0; font-weight: 500; font-size: var(--om-fs-base);
  color: var(--om-ink-2); white-space: normal;
}
.om-mega .om-mega__all { /* two classes: .om-nav a would otherwise win the display */
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--om-2);
  font-weight: 700; font-size: var(--om-fs-sm); color: var(--om-accent); padding-block: 4px;
}

.om-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--om-3); }
.om-header__biz { font-weight: 600; font-size: var(--om-fs-base); color: var(--om-accent); text-decoration: none; white-space: nowrap; }
.om-burger { display: none; background: none; border: 1px solid var(--om-line-strong); border-radius: var(--om-r); padding: 8px; color: var(--om-ink); min-height: 44px; min-width: 44px; align-items: center; justify-content: center; }

/* ---------- Today strip ---------- */
.om-today {
  background: linear-gradient(100deg, var(--om-accent-dark) 0%, var(--om-accent) 45%, color-mix(in oklab, var(--om-accent) 78%, var(--om-cat-events)) 100%);
  color: var(--om-accent-ink); font-size: var(--om-fs-base);
}
.om-today__bar { display: flex; align-items: stretch; gap: 0; min-height: 48px; }
.om-today__date, .om-today__weather { display: flex; align-items: center; gap: var(--om-2); padding: 10px var(--om-4) 10px 0; white-space: nowrap; }
.om-today__date { font-weight: 700; font-family: var(--om-font-display); gap: var(--om-2); }
.om-today__date::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--om-gold); box-shadow: 0 0 0 3px color-mix(in oklab, var(--om-gold) 30%, transparent); }
.om-today__weather { border-left: 1px solid rgba(255,255,255,.22); padding-left: var(--om-4); }
.om-today__temp { font-family: var(--om-font-display); font-weight: 700; font-size: var(--om-fs-lg); }
.om-today__sum { opacity: .85; font-size: var(--om-fs-sm); }
.om-today__events { display: flex; align-items: center; gap: var(--om-5); padding: 10px var(--om-4); border-left: 1px solid rgba(255,255,255,.22); overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; }
.om-today__events::-webkit-scrollbar { display: none; }
.om-today__event { white-space: nowrap; color: inherit; text-decoration: none; }
.om-today__event b { font-weight: 700; }
.om-today__event:hover { color: inherit; text-decoration: underline; }
.om-today__all { display: flex; align-items: center; gap: 6px; padding: 10px 0 10px var(--om-4); border-left: 1px solid rgba(255,255,255,.22); color: inherit; text-decoration: none; font-weight: 700; white-space: nowrap; }

/* ---------- Search hero ---------- */
.om-hero {
  background:
    radial-gradient(1200px 380px at 15% -8%, color-mix(in oklab, var(--om-gold) 16%, transparent) 0%, transparent 70%),
    radial-gradient(1000px 420px at 88% -12%, color-mix(in oklab, var(--om-cat-do) 14%, transparent) 0%, transparent 72%),
    linear-gradient(180deg, var(--om-accent-tint) 0%, var(--om-surface) 100%);
  padding-block: var(--om-12) var(--om-8);
}
.om-hero__inner { display: flex; flex-direction: column; align-items: center; gap: var(--om-5); }
.om-hero h1 { font-size: var(--om-fs-3xl); text-align: center; margin: 0; }
.om-hero__sub { color: var(--om-ink-2); text-align: center; margin: 0; max-width: 52ch; }
.om-search {
  display: flex; width: min(820px, 100%); background: var(--om-surface);
  border: 2px solid var(--om-accent); border-radius: var(--om-r-lg);
  box-shadow: var(--om-shadow-hero); overflow: hidden;
}
.om-search__field { flex: 1 1 auto; display: flex; align-items: center; gap: var(--om-2); padding: 0 var(--om-4); }
.om-search__field .om-icon { color: var(--om-accent); }
.om-search__field input { flex: 1 1 auto; border: 0; padding: 15px 0; background: transparent; min-width: 0; }
.om-search__field input:focus { outline: none; }
.om-search__where { display: flex; align-items: center; gap: 6px; padding: 0 var(--om-4); border-left: 1px solid var(--om-line); color: var(--om-ink-2); font-size: var(--om-fs-base); white-space: nowrap; }
.om-search__where .om-icon { color: var(--om-accent); }
.om-search__btn { border: 0; background: var(--om-accent); color: var(--om-accent-ink); font-weight: 700; padding: 0 var(--om-6); cursor: pointer; }
.om-search__btn:hover { background: var(--om-accent-dark); }

/* ---------- Main sections ---------- */
.om-main { padding-block: var(--om-8) var(--om-12); }
.om-stack { display: flex; flex-direction: column; gap: var(--om-12); }
.om-claim {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--om-2);
  border: 1px dashed var(--om-line-strong); border-radius: var(--om-r-lg); padding: var(--om-5); text-align: center;
}
.om-claim h3 { margin: 0; font-size: var(--om-fs-md); }
.om-claim p { margin: 0; color: var(--om-ink-3); font-size: var(--om-fs-sm); }

/* ---------- Footer ---------- */
.om-footer { background: var(--om-ink); color: #cfc6d0; margin-top: var(--om-16); }
.om-footer a { color: #fff; text-decoration: none; }
.om-footer a:hover { text-decoration: underline; }
.om-footer__top { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--om-8); padding-block: var(--om-10); }
.om-footer__brand { display: flex; flex-direction: column; gap: var(--om-3); max-width: 40ch; }
.om-footer__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--om-2); }
.om-footer__title { font-family: var(--om-font-display); font-weight: 700; color: #fff; font-size: var(--om-fs-base); letter-spacing: .04em; text-transform: uppercase; margin: 0 0 var(--om-2); }
.om-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: var(--om-5); display: flex; gap: var(--om-4); flex-wrap: wrap; align-items: center; font-size: var(--om-fs-sm); }
.om-footer__bottom ul { display: flex; gap: var(--om-4); list-style: none; margin: 0; padding: 0; margin-left: auto; }

/* ---------- Responsive ---------- */




/* ---------- Listing / content detail ---------- */
.om-detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--om-8); align-items: start; padding-bottom: var(--om-8); }
.om-detail__main { display: flex; flex-direction: column; gap: var(--om-8); min-width: 0; }
.om-detail__head { display: flex; flex-direction: column; gap: var(--om-3); }
.om-detail__head h1 { margin: 0; font-size: var(--om-fs-2xl); }
.om-detail__addr { display: flex; align-items: flex-start; gap: 8px; color: var(--om-ink-2); margin: 0; }
.om-detail__addr .om-icon { color: var(--om-accent); margin-top: 3px; }
.om-detail__actions { display: flex; flex-wrap: wrap; gap: var(--om-2); margin-top: var(--om-2); }
.om-detail__h2 { font-size: var(--om-fs-lg); margin: 0; }
.om-detail__thin { background: var(--om-surface-2); border: 1px solid var(--om-line); border-radius: var(--om-r-lg); padding: var(--om-5); color: var(--om-ink-2); }
.om-detail__thin p { margin: 0 0 var(--om-2); }
.om-detail__thin p:last-child { margin: 0; }
.om-detail__thin-cta { font-weight: 600; color: var(--om-ink); }
.om-chip--sm { padding: 6px 12px; font-size: var(--om-fs-sm); }

.om-map { border: 1px solid var(--om-line); border-radius: var(--om-r-lg); overflow: hidden; background: var(--om-surface-2); min-height: 300px; display: flex; }
.om-map__load {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: none; border: 0; cursor: pointer; color: var(--om-ink-2); min-height: 300px; font-weight: 600;
}
.om-map__load .om-icon { color: var(--om-accent); }
.om-map__load small { color: var(--om-ink-3); font-weight: 400; }
.om-map__load:hover { background: var(--om-accent-tint); }
.om-map iframe { width: 100%; height: 340px; border: 0; display: block; }

.om-detail__aside { display: flex; flex-direction: column; gap: var(--om-5); position: sticky; top: var(--om-4); }
.om-panel { border: 1px solid var(--om-line); border-radius: var(--om-r-lg); padding: var(--om-5); background: var(--om-surface); display: flex; flex-direction: column; gap: var(--om-3); }
.om-panel__title { font-size: var(--om-fs-md); margin: 0; font-family: var(--om-font-display); }
.om-panel__note { font-size: var(--om-fs-sm); color: var(--om-ink-3); margin: 0; }
.om-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--om-2) var(--om-4); font-size: var(--om-fs-base); }
.om-facts dt { color: var(--om-ink-3); font-weight: 600; }
.om-facts dd { margin: 0; }

/* Article & page content */
.om-content { font-size: 1.0625rem; line-height: 1.65; }
.om-content > * + * { margin-top: var(--om-4); }
.om-article__hero img { border-radius: var(--om-r-lg); }
.om-page__children { margin-block: var(--om-4) var(--om-6); }



/* Header crowding: the CTA never wraps; social hides before the nav does. */
.om-header__actions .om-btn { white-space: nowrap; }
.om-header__actions { flex-wrap: nowrap; }



/* ---------- Advertise / claim funnel ---------- */
.om-adv__hero { max-width: 62ch; padding-block: var(--om-6) var(--om-8); display: flex; flex-direction: column; gap: var(--om-3); }
.om-adv__eyebrow { margin: 0; font-size: var(--om-fs-sm); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--om-gold-deep); }
.om-adv__hero h1 { margin: 0; }
.om-adv__lede { margin: 0; font-size: 1.0625rem; color: var(--om-ink-2); }
.om-adv__cta { display: flex; gap: var(--om-2); flex-wrap: wrap; margin: var(--om-2) 0 0; }
.om-adv__target {
  display: flex; align-items: center; gap: var(--om-3); flex-wrap: wrap;
  background: var(--om-accent-tint); border: 1px solid var(--om-line); border-radius: var(--om-r-lg);
  padding: var(--om-4); margin-bottom: var(--om-8);
}
.om-adv__target div { display: flex; flex-direction: column; }
.om-adv__target span { color: var(--om-ink-3); font-size: var(--om-fs-sm); }
.om-adv__target a { margin-left: auto; font-weight: 600; }
.om-adv__split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--om-8); align-items: start; margin-top: var(--om-12); }
.om-adv__aside { display: flex; flex-direction: column; gap: var(--om-5); position: sticky; top: var(--om-4); }
.om-adv__extra { margin-top: var(--om-12); }

.om-steps { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: var(--om-3); }
.om-steps li { padding-left: 4px; }
.om-steps strong { display: block; }
.om-steps span { color: var(--om-ink-3); font-size: var(--om-fs-base); }

/* Plans */
.om-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--om-4); align-items: stretch; }
.om-plan {
  display: flex; flex-direction: column; gap: var(--om-3); position: relative;
  border: 1px solid var(--om-line); border-radius: var(--om-r-lg); padding: var(--om-5); background: var(--om-surface);
}
.om-plan--pick { border-color: var(--om-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--om-accent) 12%, transparent); }
.om-plan__flag {
  position: absolute; top: -11px; left: var(--om-5); background: var(--om-gold); color: var(--om-ink);
  font-size: var(--om-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--om-r-pill);
}
.om-plan__name { margin: 0; font-size: var(--om-fs-lg); }
.om-plan__price { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.om-plan__price strong { font-family: var(--om-font-display); font-size: var(--om-fs-2xl); line-height: 1; }
.om-plan__price span { color: var(--om-ink-3); font-size: var(--om-fs-sm); }
.om-plan__blurb { margin: 0; color: var(--om-ink-2); font-size: var(--om-fs-base); }
.om-plan__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--om-fs-base); }
.om-plan__features li { display: flex; gap: 8px; align-items: flex-start; }
.om-plan__features svg { color: var(--om-open); flex: 0 0 auto; margin-top: 3px; }
.om-plan__go { margin: auto 0 0; padding-top: var(--om-3); }
.om-plan__go .om-btn { width: 100%; justify-content: center; }

/* Claim form + owner dashboard (plugin markup, themed here) */
.dtb2-claim__notice { padding: var(--om-3) var(--om-4); border-radius: var(--om-r); font-weight: 600; margin: 0 0 var(--om-4); }
.dtb2-claim__notice.is-ok { background: var(--om-open-bg); color: var(--om-open); }
.dtb2-claim__notice.is-error { background: #fbdedb; color: var(--om-closed); }
.dtb2-claim__intro { color: var(--om-ink-2); }
.dtb2-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.dtb2-claim__form, .dtb2-dash__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--om-4); }
.dtb2-claim__field, .dtb2-dash__field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.dtb2-claim__field label, .dtb2-dash__field label { font-weight: 600; font-size: var(--om-fs-base); }
.dtb2-claim__field input, .dtb2-claim__field textarea,
.dtb2-dash__field input, .dtb2-dash__field textarea {
  border: 1px solid var(--om-line-strong); border-radius: var(--om-r); padding: 11px var(--om-3);
  background: var(--om-surface); min-height: 44px; width: 100%;
}
.dtb2-claim__field textarea, .dtb2-dash__field textarea { min-height: 96px; }

/* Selects were never styled, so every one of them — the ad-placement picker,
   the directory's state/range/sort filters — fell back to the browser's native
   control: grey fill, system font metrics, a different height from the text
   input sitting next to it. `appearance: none` plus our own chevron makes them
   part of the same form. The chevron is a data URI rather than a pseudo-element
   because a select cannot carry one. */
.dtb2-claim__field select, .dtb2-dash__field select,
.om-intake__field select,
.dtb_search_form select, form.dtb-form select {
  appearance: none; -webkit-appearance: none;
  width: 100%; min-height: 44px; cursor: pointer;
  border: 1px solid var(--om-line-strong); border-radius: var(--om-r);
  padding: 11px calc(var(--om-6) + var(--om-2)) 11px var(--om-3);
  background-color: var(--om-surface);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a3f4b' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--om-3) center;
  background-size: 16px 16px;
}
.dtb2-claim__field select:focus-visible, .om-intake__field select:focus-visible,
.dtb_search_form select:focus-visible, form.dtb-form select:focus-visible {
  outline: 2px solid var(--om-accent); outline-offset: 1px;
}
/* Firefox keeps a text cursor on the closed control without this. */
.dtb2-claim__field select option, .om-intake__field select option { color: var(--om-ink); }
.dtb2-claim__hint { color: var(--om-ink-3); font-size: var(--om-fs-sm); }
.dtb2-claim__field:has(textarea), .dtb2-dash__field:has(textarea), .dtb2-claim__submit, .dtb2-dash__submit { grid-column: 1 / -1; }
.dtb2-claim__submit, .dtb2-dash__submit { margin: 0; }
/* Placement grid on /advertise/. The proxy box is drawn at the real aspect
   ratio of the slot so an advertiser can see the shape they are buying. */
.om-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--om-5); }
.om-slot {
  display: flex; flex-direction: column; gap: var(--om-3);
  padding: var(--om-4); border: 1px solid var(--om-line); border-radius: var(--om-r-lg);
  background: var(--om-surface);
}
.om-slot__proxy { display: grid; place-items: center; height: 132px; }
.om-slot__box {
  display: grid; place-items: center; max-width: 100%;
  background: repeating-linear-gradient(-45deg, var(--om-accent-tint) 0 8px, transparent 8px 16px);
  border: 1px dashed color-mix(in oklab, var(--om-accent) 40%, transparent);
  border-radius: var(--om-r);
  color: var(--om-ink-3); font-size: var(--om-fs-sm); font-weight: 600;
}
.om-slot__body { margin-top: auto; }
.om-slot__body h3 { margin: 0 0 4px; font-size: var(--om-fs-lg); }
.om-slot__body p { margin: 0; color: var(--om-ink-2); font-size: var(--om-fs-base); }

/* The add form is a separate ask from claiming, so it gets a rule and real air
   above it rather than running straight on from the claim button. */
.om-adv__add { margin-top: var(--om-10); padding-top: var(--om-8); border-top: 1px solid var(--om-line); }
/* On its own page the form is the point, not an afterthought to another form,
   so it drops the dividing rule it needs when it sits under the claim form. */
.om-addpage .om-adv__add { margin-top: 0; padding-top: 0; border-top: 0; }
.om-adv__add .om-sec__head { align-items: baseline; }

/* Add-a-business form. Same field vocabulary as the claim form, grouped into
   two fieldsets so "the business" and "you" read as separate asks. */
.dtb2-add__form { display: block; }
/* Scoped to the form, not an ancestor wrapper: the event submission form uses
   the same fieldset markup inside .ptb-eventform, and inherited the browser's
   default bordered fieldset because the reset never reached it. */
.dtb2-add__form fieldset { border: 0; margin: 0 0 var(--om-6); padding: 0; }
.dtb2-add__form legend {
  font-family: var(--om-font-display); font-weight: 700; font-size: var(--om-fs-lg);
  padding: 0; margin: 0 0 var(--om-3); color: var(--om-ink);
}
.dtb2-add__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--om-4); }
.dtb2-add__grid .dtb2-claim__field:has(textarea),
.dtb2-add__grid .dtb2-claim__field.is-wide { grid-column: 1 / -1; }
.dtb2-claim__opt { font-weight: 400; color: var(--om-ink-3); }
.om-adv__addlink { align-self: center; font-weight: 600; color: var(--om-accent); text-underline-offset: 3px; }
.om-adv__addlede { color: var(--om-ink-2); max-width: 68ch; margin: 0 0 var(--om-5); }

.dtb2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--om-2);
  background: var(--om-accent); color: var(--om-accent-ink); border: 0; border-radius: var(--om-r);
  min-height: 46px; padding: 0 var(--om-6); font-weight: 700; font-size: var(--om-fs-base); cursor: pointer; text-decoration: none;
}
.dtb2-btn:hover { background: var(--om-accent-dark); color: var(--om-accent-ink); }

.dtb2-dash__listing { border: 1px solid var(--om-line); border-radius: var(--om-r-lg); padding: var(--om-5); margin-bottom: var(--om-6); }
.dtb2-dash__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--om-4); flex-wrap: wrap; margin-bottom: var(--om-4); }
.dtb2-dash__head h2 { margin: 0; font-size: var(--om-fs-lg); }
.dtb2-dash__tier { margin: 0; color: var(--om-ink-3); font-size: var(--om-fs-base); display: flex; gap: var(--om-3); }
.dtb2-dash__field.is-locked label { color: var(--om-ink-3); }
.dtb2-dash__lock {
  display: flex; gap: var(--om-2); align-items: center; font-size: var(--om-fs-sm); color: var(--om-ink-3);
  background: var(--om-surface-2); border: 1px dashed var(--om-line-strong); border-radius: var(--om-r); padding: 11px var(--om-3); min-height: 44px;
}





.om-plan__terms, .om-plan__founding { margin: -4px 0 0; font-size: var(--om-fs-sm); color: var(--om-ink-2); }
.om-plan__founding { color: var(--om-gold-deep); font-weight: 600; }

/* ---------- Business autocomplete (plugin markup, themed here) ---------- */
.dtb2-lookup { position: relative; }
.dtb2-lookup__list {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--om-surface); border: 1px solid var(--om-line-strong);
  border-radius: var(--om-r); box-shadow: var(--om-shadow);
  max-height: 320px; overflow-y: auto;
}
.dtb2-lookup__item {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px var(--om-3); border-radius: var(--om-r-sm); cursor: pointer;
}
.dtb2-lookup__item:hover,
.dtb2-lookup__item[aria-selected="true"] { background: var(--om-accent-tint); }
.dtb2-lookup__name { font-weight: 600; font-size: var(--om-fs-base); line-height: 1.25; }
.dtb2-lookup__meta { font-size: var(--om-fs-sm); color: var(--om-ink-3); }
.dtb2-lookup__flag {
  align-self: flex-start; margin-top: 2px;
  font-size: var(--om-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--om-warn); background: #fdebd0; padding: 2px 6px; border-radius: var(--om-r-sm);
}
.dtb2-lookup__status {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px;
}
.dtb2-lookup__chosen {
  margin-top: 6px; padding: 8px var(--om-3);
  background: var(--om-open-bg); border-radius: var(--om-r);
  font-size: var(--om-fs-base); color: var(--om-ink);
}
.dtb2-lookup__warn { color: var(--om-warn); font-weight: 600; }

/* ---------- Publish on / write for us ---------- */
.om-intake__notice { padding: var(--om-3) var(--om-4); border-radius: var(--om-r); font-weight: 600; margin-bottom: var(--om-6); }
.om-intake__notice.is-ok { background: var(--om-open-bg); color: var(--om-open); }
.om-intake__notice.is-err { background: #fbdedb; color: var(--om-closed); }

.om-intake { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--om-4); }
.om-intake__field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.om-intake__field--wide, .om-intake__submit, .om-intake__small { grid-column: 1 / -1; }
.om-intake__field label { font-weight: 600; font-size: var(--om-fs-base); }
.om-intake__field input, .om-intake__field select, .om-intake__field textarea {
  border: 1px solid var(--om-line-strong); border-radius: var(--om-r);
  padding: 11px var(--om-3); background: var(--om-surface); min-height: 44px; width: 100%;
}
.om-intake__field textarea { min-height: 120px; }
.om-intake__field label input[type="checkbox"] { width: auto; min-height: 0; margin-right: 6px; }
.om-intake__submit { margin: 0; }
.om-intake__small { margin: 0; font-size: var(--om-fs-sm); color: var(--om-ink-3); }
.om-intake--compact { background: var(--om-surface-2); border: 1px solid var(--om-line); border-radius: var(--om-r-lg); padding: var(--om-5); }

.om-standards { background: var(--om-accent-tint); border-radius: var(--om-r-lg); padding: var(--om-6); }
.om-standards h2 { margin: 0 0 var(--om-4); font-size: var(--om-fs-xl); }
.om-standards__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--om-5) var(--om-8); }
.om-standards h3 { font-size: var(--om-fs-md); margin: 0 0 4px; }
.om-standards p { margin: 0; color: var(--om-ink-2); font-size: var(--om-fs-base); }

.om-write__split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--om-8); align-items: start; }
.om-write__pitch p { font-size: 1.0625rem; color: var(--om-ink-2); }



/* ---------- Sections nav (the editorial row) ---------- */
.om-sections { background: var(--om-surface); border-bottom: 1px solid var(--om-line); }
.om-sections__bar { display: flex; align-items: center; gap: var(--om-4); min-height: 44px; overflow-x: auto; scrollbar-width: none; }
.om-sections__bar::-webkit-scrollbar { display: none; }
.om-sections__label {
  font-family: var(--om-font-display); font-weight: 700; font-size: var(--om-fs-xs);
  letter-spacing: .12em; text-transform: uppercase; color: var(--om-ink-3); flex: 0 0 auto;
}
.om-sections ul { display: flex; align-items: center; gap: var(--om-5); list-style: none; margin: 0; padding: 0; }
.om-sections li { flex: 0 0 auto; }
.om-sections a {
  display: inline-block; padding: 11px 0; font-weight: 600; font-size: var(--om-fs-base);
  color: var(--om-ink-2); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap;
}
.om-sections a:hover { color: var(--om-cat, var(--om-accent)); }
.om-sections a[aria-current="page"] {
  color: var(--om-cat, var(--om-accent));
  border-bottom-color: var(--om-cat, var(--om-accent));
}
.om-sections li[data-cat="eat"]      { --om-cat: var(--om-cat-eat); }
.om-sections li[data-cat="do"]       { --om-cat: var(--om-cat-do); }
.om-sections li[data-cat="events"]   { --om-cat: var(--om-cat-events); }
.om-sections li[data-cat="life"]     { --om-cat: var(--om-cat-life); }
.om-sections li[data-cat="shop"]     { --om-cat: var(--om-cat-shop); }
.om-sections li[data-cat="stay"]     { --om-cat: var(--om-cat-stay); }
.om-sections li[data-cat="services"] { --om-cat: var(--om-cat-services); }
.om-sections li[data-cat="estate"]   { --om-cat: var(--om-cat-estate); }
/* The contributor doors, pinned to the end the way the masthead pins its
   business links. Two classes throughout: the generic .om-sections a rule
   above would otherwise outrank .om-btn and a lone class. */
.om-sections__cta { margin-left: auto; display: flex; align-items: center; gap: var(--om-4); flex: 0 0 auto; padding-left: var(--om-4); }
.om-sections__cta .om-sections__contribute { font-weight: 600; color: var(--om-accent); border-bottom: 0; white-space: nowrap; }
.om-sections__cta .om-sections__contribute:hover { color: var(--om-accent-dark); text-decoration: underline; }
.om-sections__cta .om-btn { color: var(--om-accent-ink); padding: 8px var(--om-3); border-bottom: 0; white-space: nowrap; }
.om-sections__cta .om-btn:hover { color: var(--om-accent-ink); }

/* ---------- Section / topic archive ---------- */
.om-archive__head { padding-block: var(--om-6) var(--om-8); display: flex; flex-direction: column; gap: var(--om-3); max-width: 70ch; }
.om-archive__head h1 { margin: 0; }
.om-archive__parent { margin: 0; font-size: var(--om-fs-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.om-archive__parent a { color: var(--om-cat, var(--om-accent)); text-decoration: none; }
.om-archive__byline { margin: 0; color: var(--om-ink-2); font-size: 1.0625rem; }
.om-archive__intro { color: var(--om-ink-2); font-size: 1.0625rem; }
.om-archive__intro p { margin: 0; }
.om-archive__topics { margin-top: var(--om-2); }
.om-chip__count { color: var(--om-ink-3); font-weight: 400; margin-left: 6px; font-size: var(--om-fs-sm); }
.om-archive[data-cat] .om-archive__head h1 { color: var(--om-ink); }
.om-archive[data-cat="eat"]      { --om-cat: var(--om-cat-eat); }
.om-archive[data-cat="do"]       { --om-cat: var(--om-cat-do); }
.om-archive[data-cat="events"]   { --om-cat: var(--om-cat-events); }
.om-archive[data-cat="life"]     { --om-cat: var(--om-cat-life); }
.om-archive[data-cat="shop"]     { --om-cat: var(--om-cat-shop); }
.om-archive[data-cat="stay"]     { --om-cat: var(--om-cat-stay); }
.om-archive[data-cat="services"] { --om-cat: var(--om-cat-services); }
.om-archive[data-cat="estate"]   { --om-cat: var(--om-cat-estate); }



/* ---------- Contributor profile ---------- */
.om-contributor { padding-bottom: var(--om-8); }
.om-contributor__head {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--om-6);
  align-items: center; padding-block: var(--om-6) var(--om-5);
}
.om-contributor__photo {
  width: 132px; height: 132px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--om-surface); box-shadow: 0 0 0 1px var(--om-line), var(--om-shadow);
}
.om-contributor__id { display: flex; flex-direction: column; gap: var(--om-2); min-width: 0; }
.om-contributor__name { margin: 0; font-size: var(--om-fs-2xl); }
.om-contributor__role { margin: 0; color: var(--om-ink-2); font-size: 1.0625rem; }
.om-contributor__facts { display: flex; flex-wrap: wrap; gap: var(--om-2) var(--om-4); margin: 0; font-size: var(--om-fs-base); color: var(--om-ink-3); }
.om-contributor__facts span { display: inline-flex; align-items: center; gap: var(--om-2); }
.om-contributor__facts span + span::before { content: "·"; color: var(--om-line-strong); margin-right: var(--om-2); }
.om-contributor__facts a { color: var(--om-accent); text-decoration: none; font-weight: 600; }
.om-contributor__facts a:hover { text-decoration: underline; }
.om-contributor__edit { align-self: start; }
.om-social--contributor { gap: var(--om-1); margin-top: 2px; }
.om-social--contributor a { width: 34px; height: 34px; color: var(--om-ink-3); }
.om-social--contributor a:hover { color: var(--om-accent); background: var(--om-accent-tint); }

.om-contributor__bio {
  max-width: 68ch; padding-block: var(--om-2) var(--om-8);
  border-bottom: 1px solid var(--om-line); margin-bottom: var(--om-8);
}
.om-contributor__work { margin-bottom: var(--om-10); }

/* ---------- Contribute CTA ---------- */
.om-contribute {
  display: flex; align-items: center; justify-content: space-between; gap: var(--om-6); flex-wrap: wrap;
  background:
    radial-gradient(700px 200px at 12% -20%, color-mix(in oklab, var(--om-gold) 18%, transparent) 0%, transparent 70%),
    var(--om-accent-tint);
  border: 1px solid var(--om-line); border-radius: var(--om-r-lg); padding: var(--om-6);
}
.om-contribute__text { flex: 1 1 380px; }
.om-contribute__text h2 { margin: 0 0 var(--om-2); font-size: var(--om-fs-xl); }
.om-contribute__text p { margin: 0; color: var(--om-ink-2); max-width: 60ch; }
.om-contribute__actions { display: flex; gap: var(--om-2); flex-wrap: wrap; }

/* The plugin's own profile chrome, retired in favour of the above. */
.om-contributor .page-posts-heading,
.om-contributor .ptb-filter-by-category,
.om-contributor .ptb-layout-switcher { display: none; }
/* ---------- Buttons ---------- */
.om-btn {
  display: inline-flex; align-items: center; gap: var(--om-2);
  padding: 10px var(--om-4); border-radius: var(--om-r); border: 1px solid transparent;
  font-weight: 700; font-size: var(--om-fs-base); line-height: 1.2;
  text-decoration: none; cursor: pointer; min-height: 44px;
  transition: background-color .15s, color .15s, border-color .15s;
}
.om-btn--primary { background: var(--om-accent); color: var(--om-accent-ink); }
.om-btn--primary:hover { background: var(--om-accent-dark); color: var(--om-accent-ink); }
.om-btn--ghost { background: transparent; color: var(--om-accent); border-color: var(--om-line-strong); }
.om-btn--ghost:hover { background: var(--om-accent-tint); color: var(--om-accent-dark); }
.om-btn--sm { min-height: 38px; padding: 8px var(--om-3); font-size: var(--om-fs-sm); }

/* ---------- Chips ---------- */
.om-chips { display: flex; flex-wrap: wrap; gap: var(--om-2); list-style: none; margin: 0; padding: 0; }
.om-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--om-line-strong); border-radius: var(--om-r-pill);
  padding: 9px var(--om-4); font-size: var(--om-fs-base); font-weight: 600;
  color: var(--om-ink-2); text-decoration: none; background: var(--om-surface);
}
.om-chip:hover { border-color: var(--om-accent); color: var(--om-accent-dark); background: var(--om-accent-tint); }

/* ---------- Section headings ---------- */
.om-sec { display: flex; flex-direction: column; gap: var(--om-4); }
.om-sec__head { display: flex; align-items: baseline; gap: var(--om-4); flex-wrap: wrap; }
.om-sec__head h2 { margin: 0; font-size: var(--om-fs-xl); }
.om-sec__note { color: var(--om-ink-3); font-size: var(--om-fs-sm); }
.om-sec__more { margin-left: auto; font-weight: 700; font-size: var(--om-fs-base); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- Cards ---------- */
.om-grid { display: grid; gap: var(--om-5); }
.om-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.om-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.om-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.om-card {
  display: flex; flex-direction: column; background: var(--om-surface);
  border: 1px solid var(--om-line); border-radius: var(--om-r-lg); overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.om-card:hover { border-color: var(--om-line-strong); box-shadow: var(--om-shadow); }
.om-card__media { aspect-ratio: 16 / 10; background: var(--om-surface-2); position: relative; overflow: hidden; }
.om-card__media img { width: 100%; height: 100%; object-fit: cover; }
.om-card__media--empty { display: grid; place-items: center; color: var(--om-line-strong); }
.om-card__body { padding: var(--om-4); display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.om-card__title { font-family: var(--om-font-display); font-size: var(--om-fs-md); font-weight: 700; line-height: 1.25; margin: 0; }
.om-card__title a { color: inherit; text-decoration: none; }
.om-card__title a:hover { color: var(--om-accent); }
.om-card__meta { color: var(--om-ink-3); font-size: var(--om-fs-sm); }
.om-card__foot { margin-top: auto; padding-top: var(--om-2); display: flex; align-items: center; gap: var(--om-3); font-size: var(--om-fs-sm); }

.om-badge { font-size: var(--om-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 4px 8px; border-radius: var(--om-r-sm); }
.om-badge--open { background: var(--om-open-bg); color: var(--om-open); }
/* A featured listing sits in the main grid rather than in a block of its own,
   so it carries its own emphasis: a warm border and a soft lift. The border
   stays a uniform weight all the way round — a heavier top edge read as a
   rendering fault rather than as emphasis. */
.om-listing--featured {
  border-color: color-mix(in oklab, var(--om-gold) 55%, var(--om-line));
  box-shadow: 0 1px 2px rgba(16, 12, 24, .04), 0 6px 18px color-mix(in oklab, var(--om-gold) 14%, transparent);
}
.om-badge--featured { background: var(--om-gold-tint); color: var(--om-gold-deep); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--om-gold) 35%, transparent); }

/* ---------- Category tiles ---------- */
.om-tiles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--om-3); }
.om-tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--om-2);
  padding: var(--om-4) var(--om-2);
  border: 1px solid color-mix(in oklab, var(--om-cat, var(--om-accent)) 18%, transparent);
  border-radius: var(--om-r-lg);
  background: color-mix(in oklab, var(--om-cat, var(--om-accent)) 7%, white);
  font-size: var(--om-fs-sm); font-weight: 600; color: var(--om-ink); text-decoration: none;
  text-align: center; min-height: 92px; justify-content: center;
  transition: border-color .15s, background-color .15s, transform .15s;
}
.om-tile .om-icon { color: var(--om-cat, var(--om-accent)); transition: transform .15s; }
.om-tile:hover {
  border-color: color-mix(in oklab, var(--om-cat, var(--om-accent)) 55%, transparent);
  background: color-mix(in oklab, var(--om-cat, var(--om-accent)) 14%, white);
  color: var(--om-ink);
}
.om-tile:hover .om-icon { transform: translateY(-1px) scale(1.06); }
.om-tile--eat      { --om-cat: var(--om-cat-eat); }
.om-tile--stay     { --om-cat: var(--om-cat-stay); }
.om-tile--do       { --om-cat: var(--om-cat-do); }
.om-tile--events   { --om-cat: var(--om-cat-events); }
.om-tile--shop     { --om-cat: var(--om-cat-shop); }
.om-tile--life     { --om-cat: var(--om-cat-life); }
.om-tile--services { --om-cat: var(--om-cat-services); }
.om-tile--estate   { --om-cat: var(--om-cat-estate); }

/* ---------- Listing card ---------- */
.om-listing__name { font-family: var(--om-font-display); font-weight: 700; font-size: var(--om-fs-md); margin: 0; }
.om-listing__name a { color: inherit; text-decoration: none; }
.om-listing__name a:hover { color: var(--om-accent); }
.om-listing__row { display: flex; align-items: center; justify-content: space-between; gap: var(--om-3); }
.om-listing__actions { display: flex; gap: var(--om-2); flex-wrap: wrap; }

/* ---------- Ads ---------- */
.om-ad { display: flex; justify-content: center; margin-block: var(--om-4); }
.om-ad__inner { width: var(--om-ad-w); height: var(--om-ad-h); max-width: 100%; }
.om-ad--placeholder {
  border: 1px dashed var(--om-line-strong); border-radius: var(--om-r);
  min-height: var(--om-ad-h); width: var(--om-ad-w); max-width: 100%;
  align-items: center; color: var(--om-ink-3); font-size: var(--om-fs-xs); letter-spacing: .06em; text-transform: uppercase;
  margin-inline: auto;
}

/* ---------- Breadcrumbs ---------- */
.om-crumbs { padding-block: var(--om-3); font-size: var(--om-fs-sm); color: var(--om-ink-3); }
.om-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--om-2); list-style: none; margin: 0; padding: 0; }
.om-crumbs li + li::before { content: "›"; margin-right: var(--om-2); color: var(--om-line-strong); }
.om-crumbs a { color: var(--om-ink-3); text-decoration: none; }
.om-crumbs a:hover { color: var(--om-accent); }

/* ---------- Newsletter ---------- */
.om-news {
  display: flex; align-items: center; gap: var(--om-4); flex-wrap: wrap;
  background: var(--om-accent-tint); border: 1px solid var(--om-line); border-radius: var(--om-r-lg);
  padding: var(--om-5);
}
.om-news__text { flex: 1 1 320px; }
.om-news__text h2 { font-size: var(--om-fs-lg); margin-bottom: 4px; }
.om-news__text p { margin: 0; color: var(--om-ink-2); font-size: var(--om-fs-base); }
.om-news__form { display: flex; gap: var(--om-2); flex: 1 1 340px; }
.om-news__form input[type="email"] {
  flex: 1 1 auto; min-height: 44px; padding: 0 var(--om-4);
  border: 1px solid var(--om-line-strong); border-radius: var(--om-r); background: var(--om-surface);
}

/* ---------- Listing card (text-first) ---------- */
.om-listing__tags { display: flex; align-items: center; gap: var(--om-2); min-height: 22px; }
.om-listing__cat {
  font-size: var(--om-fs-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--om-cat, var(--om-accent));
  background: color-mix(in oklab, var(--om-cat, var(--om-accent)) 10%, white);
  padding: 4px 8px; border-radius: var(--om-r-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%;
}
/* A card carrying a section hue tints its own chip and hover edge. */
.om-card[data-cat] { --om-cat-edge: color-mix(in oklab, var(--om-cat, var(--om-accent)) 45%, transparent); }
.om-card[data-cat]:hover { border-color: var(--om-cat-edge); }
.om-card[data-cat="eat"]      { --om-cat: var(--om-cat-eat); }
.om-card[data-cat="stay"]     { --om-cat: var(--om-cat-stay); }
.om-card[data-cat="do"]       { --om-cat: var(--om-cat-do); }
.om-card[data-cat="events"]   { --om-cat: var(--om-cat-events); }
.om-card[data-cat="shop"]     { --om-cat: var(--om-cat-shop); }
.om-card[data-cat="life"]     { --om-cat: var(--om-cat-life); }
.om-card[data-cat="services"] { --om-cat: var(--om-cat-services); }
.om-card[data-cat="estate"]   { --om-cat: var(--om-cat-estate); }
.om-listing__tags .om-badge { margin-left: auto; flex: 0 0 auto; }
.om-listing__name { font-size: var(--om-fs-md); line-height: 1.25; }
.om-listing--text .om-card__body { gap: var(--om-2); }
.om-listing__addr { display: flex; align-items: flex-start; gap: 6px; margin: 0; line-height: 1.35; }
.om-listing__addr .om-icon { color: var(--om-line-strong); margin-top: 2px; }
.om-listing__actions .om-btn { flex: 0 1 auto; }

/* Cards in a grid share a baseline so the row does not stagger. */
.om-grid > .om-card { height: 100%; }
.om-grid { align-items: stretch; }

.om-listing__distance { margin: 0; font-size: var(--om-fs-sm); color: var(--om-ink-3); font-weight: 600; }

/* ---------- DirectoryToolbox page furniture, restyled to the design system ----------
   These wrap plugin markup we do not own yet (search form, sub-page buttons,
   pagination). Phase 2 replaces them; until then they should not look alien. */
.dtb-listings-container, .dtb_search_form-container { margin-block: var(--om-6); }

.dtb2-basic-listings, .dtb-listings-list, .dtb-listings-wrapper {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--om-4);
  align-items: stretch;
}
.dtb-listing-item, .dtb2-basic-listings > .om-card { display: flex; height: 100%; }
.dtb-listing-item > .om-card, .dtb-listing-item .om-card { width: 100%; }
.dtb-listings-section .dtb2_found_listings { color: var(--om-ink-3); font-size: var(--om-fs-base); }

/* Search / filter form */
.dtb_search_form, .dtb-directory-filters, form.dtb-form {
  background: var(--om-surface-2); border: 1px solid var(--om-line); border-radius: var(--om-r-lg); padding: var(--om-5);
}
.dtb_search_form input[type="text"], .dtb_search_form input[type="search"], .dtb_search_form select,
form.dtb-form input[type="text"], form.dtb-form input[type="search"], form.dtb-form select {
  min-height: 44px; border: 1px solid var(--om-line-strong); border-radius: var(--om-r);
  /* background-color, not the shorthand: this file is concatenated after
     layout.css, and `background:` here would wipe the select chevron it sets. */
  padding: 0 var(--om-3); background-color: var(--om-surface); width: 100%;
}
.dtb_search_form input[type="submit"], .dtb_search_form button[type="submit"],
form.dtb-form input[type="submit"], form.dtb-form button[type="submit"],
.dtb-btn, .dtb-button, a.dtb-button {
  background: var(--om-accent); color: var(--om-accent-ink); border: 0; border-radius: var(--om-r);
  min-height: 44px; padding: 0 var(--om-5); font-weight: 700; cursor: pointer;
}
.dtb_search_form input[type="submit"]:hover, form.dtb-form input[type="submit"]:hover, .dtb-btn:hover { background: var(--om-accent-dark); }

/* Sub-page / category buttons above the results */
.dtb-subpages, .dtb-pages-list, .dtb-tags-list { display: flex; flex-wrap: wrap; gap: var(--om-2); list-style: none; padding: 0; margin: 0 0 var(--om-5); }
.dtb-subpages a, .dtb-pages-list a, .dtb-tags-list a {
  display: inline-flex; align-items: center; border: 1px solid var(--om-line-strong); border-radius: var(--om-r-pill);
  padding: 9px var(--om-4); font-size: var(--om-fs-base); font-weight: 600; color: var(--om-ink-2);
  text-decoration: none; background: var(--om-surface);
}
.dtb-subpages a:hover, .dtb-pages-list a:hover, .dtb-tags-list a:hover { border-color: var(--om-accent); color: var(--om-accent-dark); background: var(--om-accent-tint); }

/* Pagination */
.dtb-pagination, .om-pagination .nav-links { display: flex; gap: var(--om-2); flex-wrap: wrap; align-items: center; margin-block: var(--om-6); }
.dtb-pagination a, .dtb-pagination span, .om-pagination .page-numbers {
  min-width: 42px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--om-line); border-radius: var(--om-r); text-decoration: none; font-weight: 600; padding: 0 10px;
}
.dtb-pagination .current, .om-pagination .page-numbers.current { background: var(--om-accent); color: var(--om-accent-ink); border-color: var(--om-accent); }

/* DTP puts the count and pagination inside the results container: let them span. */
.dtb2-basic-listings > *:not(.om-card):not(.dtb-listing-item) { grid-column: 1 / -1; }
.dtb2-basic-listings > .dtb2_found_listings { display: flex; align-items: center; justify-content: space-between; gap: var(--om-4); flex-wrap: wrap; margin-bottom: var(--om-2); }

/* ---------- Business mark ---------- */
/* The mark occupies the left column of the card head, alongside the name and
   the address together — see template-parts/listing-card.php. */
.om-listing__head { display: flex; gap: var(--om-3); align-items: flex-start; }
.om-listing__lines { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--om-2); }
.om-listing__ident { display: flex; align-items: center; gap: var(--om-3); }
.om-listing__logo {
  flex: 0 0 auto; width: 76px; height: 76px; display: grid; place-items: center;
  border: 1px solid var(--om-line); border-radius: var(--om-r); background: #fff; overflow: hidden;
}
.om-listing__logo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
/* Narrow cards cannot spare 76px beside the text. */
@media (max-width: 480px) {
  .om-listing__logo { width: 56px; height: 56px; }
}
/* The listing's photograph: shown once, near the top of the page. */
.om-detail__media {
  margin: 0 0 var(--om-5); border-radius: var(--om-r-lg); overflow: hidden;
  background: var(--om-surface-2); border: 1px solid var(--om-line);
}
.om-detail__media img { display: block; width: 100%; height: auto; }
.om-detail__logo {
  width: 96px; height: 96px; display: grid; place-items: center; flex: 0 0 auto;
  border: 1px solid var(--om-line); border-radius: var(--om-r-lg); background: #fff; overflow: hidden;
}
.om-detail__logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
/* The mark and the text it belongs to are centred against each other: the name
   and address form one block, and a 96px mark beside two short lines reads as
   lopsided when either is pinned to the top. */
.om-detail__ident { display: flex; align-items: center; gap: var(--om-4); }
.om-detail__ident--mark { align-items: center; }
.om-detail__lines { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--om-2); }
.om-detail__lines h1 { margin: 0; }
@media (max-width: 600px) {
  .om-detail__logo { width: 64px; height: 64px; }
}

/* ---------- Social ---------- */
.om-social { display: flex; align-items: center; gap: var(--om-1); list-style: none; margin: 0; padding: 0; }
.om-social a {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--om-r-sm);
  color: inherit; text-decoration: none; transition: background-color .15s, color .15s;
}
.om-social--header a { color: var(--om-ink-3); }
.om-social--header a:hover { color: var(--om-accent); background: var(--om-accent-tint); }
.om-social--footer { margin-top: var(--om-2); gap: var(--om-2); }
.om-social--footer a { color: #fff; background: rgba(255,255,255,.10); width: 40px; height: 40px; }
.om-social--footer a:hover { background: var(--om-gold); color: var(--om-ink); }

/* ---------- Newsletter ---------- */
.om-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.om-news__notice { margin: var(--om-2) 0 0; font-weight: 600; font-size: var(--om-fs-base); }
.om-news__notice.is-ok { color: var(--om-open); }
.om-news__notice.is-err { color: var(--om-closed); }
.om-news__form.is-busy { opacity: .65; pointer-events: none; }

/* One claim prompt per results page, rather than one per card. */
.om-addband {
  display: flex; align-items: center; justify-content: space-between; gap: var(--om-4); flex-wrap: wrap;
  margin-block: var(--om-8) var(--om-4); padding: var(--om-4) var(--om-5);
  background: var(--om-accent-tint); border: 1px solid var(--om-line); border-radius: var(--om-r-lg);
}
.om-addband__text { display: flex; align-items: flex-start; gap: var(--om-3); }
.om-addband__text .om-icon { color: var(--om-accent); margin-top: 2px; }
.om-addband__text div { display: flex; flex-direction: column; }
.om-addband__text span { color: var(--om-ink-2); font-size: var(--om-fs-base); max-width: 62ch; }

/* ---------- Events ----------
   Date first: an event card is read for "when", then "what", then "where". */
.om-card__eyebrow--date {
  display: flex; align-items: baseline; gap: var(--om-2); margin: 0;
  font-size: var(--om-fs-sm); font-weight: 700; color: var(--om-accent-dark);
}
.om-card__eyebrow--date span { color: var(--om-ink-3); font-weight: 600; }
.om-event__head { display: flex; flex-direction: column; gap: var(--om-3); }
.om-event__when time { font-weight: 700; color: var(--om-accent-dark); }
.om-event__when time span { color: var(--om-ink-2); font-weight: 600; margin-left: var(--om-2); }
.om-event__venue { display: flex; align-items: flex-start; gap: var(--om-2); margin: 0; }
.om-event__venue .om-icon { color: var(--om-accent); margin-top: 3px; }
.om-event__venue span { display: flex; flex-direction: column; }
.om-event__venue span span { color: var(--om-ink-2); font-size: var(--om-fs-base); }
.om-event__price { margin: 0; font-weight: 700; }
.om-event__cta { margin: var(--om-2) 0 0; }
.om-event__image { margin: 0; }
.om-event__image img { width: 100%; height: auto; border-radius: var(--om-r-lg); }
.om-event__source { color: var(--om-ink-3); font-size: var(--om-fs-sm); }
.om-events__day .om-sec__head h2 { font-size: var(--om-fs-lg); }
.om-events__empty { text-align: center; padding: var(--om-10) var(--om-5); }

/* Event page: two columns, the practical one sticky on desktop. */
.om-event__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--om-8); align-items: start; }
.om-event__main { display: flex; flex-direction: column; gap: var(--om-6); min-width: 0; }
.om-event__aside { display: flex; flex-direction: column; gap: var(--om-5); position: sticky; top: var(--om-4); }
.om-event__genre {
  margin: 0 0 var(--om-2); font-size: var(--om-fs-sm); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--om-accent-dark);
}
.om-event__head h1 { margin: 0; }
/* The artwork is promotional, not evidence: cap it so it cannot push the
   practical detail below the fold. */
.om-event__image { margin: 0; }
.om-event__image img { width: 100%; max-height: 380px; object-fit: cover; border-radius: var(--om-r-lg); }
.om-event__alert {
  margin: 0; padding: var(--om-3) var(--om-4); border-radius: var(--om-r);
  background: #fbdedb; color: var(--om-closed); font-weight: 700;
}
/* An event that is simply over is information, not an alarm — the cancelled
   treatment's red would overstate it. */
.om-event__alert--past {
  background: var(--om-surface-2); color: var(--om-ink-2);
  border: 1px solid var(--om-line); font-weight: 600;
  display: flex; flex-wrap: wrap; gap: var(--om-2) var(--om-3); align-items: baseline;
}
.om-event__alert--past a { color: var(--om-accent-dark); font-weight: 700; }
.om-event__when { display: flex; flex-direction: column; gap: var(--om-3); }
.om-event__date { margin: 0; display: flex; flex-direction: column; }
.om-event__dow { font-weight: 700; font-size: var(--om-fs-lg); }
.om-event__dmy { font-weight: 700; font-size: var(--om-fs-lg); color: var(--om-accent-dark); }
.om-event__time { color: var(--om-ink-2); }
.om-event__venue { display: flex; align-items: flex-start; gap: var(--om-2); margin: 0; }
.om-event__venue .om-icon { color: var(--om-accent); margin-top: 3px; }
.om-event__venue span { display: flex; flex-direction: column; }
.om-event__venue span span { color: var(--om-ink-2); font-size: var(--om-fs-base); }
.om-event__directions { margin: 0; }
.om-event__directions a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.om-event__price { margin: 0; font-weight: 700; font-size: var(--om-fs-lg); }
.om-event__cta { margin: 0; }
.om-event__cta .om-btn { width: 100%; justify-content: center; }
.om-event__source { margin: 0; color: var(--om-ink-3); font-size: var(--om-fs-sm); }
.om-perf { display: flex; flex-wrap: wrap; gap: var(--om-4); list-style: none; margin: 0; padding: 0; }
.om-perf__item { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 110px; text-align: center; }
.om-perf__item img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }
.om-perf__item span { font-weight: 600; font-size: var(--om-fs-sm); }
.om-event__notes p { margin: 0 0 var(--om-2); color: var(--om-ink-2); }
.om-event__seatmap img { width: 100%; height: auto; border-radius: var(--om-r); }
.om-event__list { list-style: none; margin: 0 0 var(--om-3); padding: 0; display: flex; flex-direction: column; gap: var(--om-3); }
.om-event__list a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; }
.om-event__list-when { font-size: var(--om-fs-sm); font-weight: 700; color: var(--om-accent-dark); }

/* An affiliate link must say so. Quiet, but never absent. */
.ptb-affiliate-note { margin: var(--om-2) 0 0; color: var(--om-ink-3); font-size: var(--om-fs-sm); max-width: 60ch; }

/* ---------- Sponsored content ----------
   The label must be impossible to miss without shouting over the article. */
.om-badge--sponsored {
  background: var(--om-gold-tint); color: var(--om-gold-deep);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--om-gold) 45%, transparent);
}
.om-card__sponsored { display: flex; align-items: center; gap: var(--om-2); margin: 0; flex-wrap: wrap; }
.om-card__sponsor { font-size: var(--om-fs-xs); color: var(--om-ink-3); }

.ptb-sponsored {
  display: flex; align-items: baseline; gap: var(--om-3); flex-wrap: wrap;
  margin: 0 0 var(--om-5); padding: var(--om-3) var(--om-4);
  background: var(--om-gold-tint);
  border-left: 4px solid var(--om-gold);
  border-radius: 0 var(--om-r) var(--om-r) 0;
}
.ptb-sponsored__tag {
  font-family: var(--om-font-display); font-weight: 700; font-size: var(--om-fs-xs);
  letter-spacing: .08em; text-transform: uppercase; color: var(--om-gold-deep);
}
.ptb-sponsored__text { font-size: var(--om-fs-base); color: var(--om-ink-2); }
.ptb-sponsored__text a { color: var(--om-accent-dark); font-weight: 600; }

/* ---------- Contributors index (Write for us) ---------- */
.om-writers { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--om-4); }
.om-writer {
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
  padding: var(--om-4) var(--om-2); border: 1px solid var(--om-line); border-radius: var(--om-r-lg);
  text-decoration: none; color: var(--om-ink); background: var(--om-surface);
}
.om-writer:hover { border-color: var(--om-accent); background: var(--om-accent-tint); }
.om-writer__photo { border-radius: 50%; width: 64px; height: 64px; object-fit: cover; }
.om-writer__name { font-weight: 700; font-size: var(--om-fs-base); line-height: 1.2; }
.om-writer__count { font-size: var(--om-fs-xs); color: var(--om-ink-3); }
.om-writealso { background: var(--om-surface-2); border: 1px solid var(--om-line); border-radius: var(--om-r-lg); padding: var(--om-6); }
.om-writealso h2 { margin: 0 0 var(--om-2); font-size: var(--om-fs-lg); }
.om-writealso p { margin: 0 0 var(--om-3); color: var(--om-ink-2); }

/* The today strip scrolls sideways on narrow screens; fade the edge so it is
   clear there is more, rather than text simply being cut off. */
.om-today__events {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}

/* ---------- DirectoryToolbox page furniture, as chips and panels ---------- */
.dtb-section-heading-tag {
  font-family: var(--om-font-display); font-size: var(--om-fs-xl); font-weight: 700;
  margin: 0 0 var(--om-4); letter-spacing: -.015em;
}
.dtb-filters-section { margin-block: var(--om-6); }
.dtb-filters-grid { display: flex; flex-wrap: wrap; gap: var(--om-2); list-style: none; margin: 0; padding: 0; }
.dtb-filters-grid li { margin: 0; }
.dtb-filters-grid a {
  display: inline-flex; align-items: center; min-height: 40px;
  border: 1px solid var(--om-line-strong); border-radius: var(--om-r-pill);
  padding: 8px var(--om-4); font-size: var(--om-fs-base); font-weight: 600;
  color: var(--om-ink-2); text-decoration: none; background: var(--om-surface);
}
.dtb-filters-grid a:hover { border-color: var(--om-accent); color: var(--om-accent-dark); background: var(--om-accent-tint); }
.dtb-filters-grid li.current a,
.dtb-filters-grid li.active a { background: var(--om-accent); border-color: var(--om-accent); color: var(--om-accent-ink); }

.dtb_search_form-section { margin-block: var(--om-6); }
.dtb_search_form-section .dtb-section-heading-tag { font-size: var(--om-fs-lg); }
.dtbpro-search-form {
  background: var(--om-surface-2); border: 1px solid var(--om-line);
  border-radius: var(--om-r-lg); padding: var(--om-5);
}
.dtb-listings-section .dtb-section-heading-tag { font-size: var(--om-fs-xl); }

.om-reading { margin-block: var(--om-10) var(--om-6); padding-top: var(--om-8); border-top: 1px solid var(--om-line); }

/* A card with no photo: a tinted plate carrying the section name, so a mixed
   row still reads as a row rather than a set of holes. */
.om-card__media--tint {
  display: grid; place-items: center;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--om-cat, var(--om-accent)) 16%, white) 0%,
      color-mix(in oklab, var(--om-cat, var(--om-accent)) 6%, white) 100%);
}
.om-card__media--tint a { display: grid; place-items: center; width: 100%; height: 100%; text-decoration: none; }
.om-card__tintmark {
  font-family: var(--om-font-display); font-weight: 700; font-size: var(--om-fs-sm);
  letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in oklab, var(--om-cat, var(--om-accent)) 70%, var(--om-ink));
  opacity: .75;
}
.om-card__media--tint[data-cat="eat"]      { --om-cat: var(--om-cat-eat); }
.om-card__media--tint[data-cat="do"]       { --om-cat: var(--om-cat-do); }
.om-card__media--tint[data-cat="events"]   { --om-cat: var(--om-cat-events); }
.om-card__media--tint[data-cat="life"]     { --om-cat: var(--om-cat-life); }
.om-card__media--tint[data-cat="shop"]     { --om-cat: var(--om-cat-shop); }
.om-card__media--tint[data-cat="stay"]     { --om-cat: var(--om-cat-stay); }
.om-card__media--tint[data-cat="services"] { --om-cat: var(--om-cat-services); }
.om-card__media--tint[data-cat="estate"]   { --om-cat: var(--om-cat-estate); }

/* ---------- Shelf: a swipeable row for long collections ----------
   Deliberately NOT a carousel: nothing moves on its own, everything is reachable
   by scrolling, and the arrows are a convenience on top of native scrolling. */
.om-shelf {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr);
  gap: var(--om-5); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--om-2); scrollbar-width: thin;
  overscroll-behavior-x: contain;
}
.om-shelf > * { scroll-snap-align: start; }
.om-shelf:focus-visible { outline: 3px solid var(--om-accent); outline-offset: 4px; border-radius: var(--om-r); }
.om-shelf__nav { display: flex; gap: var(--om-2); margin-left: auto; }
.om-shelf__btn {
  width: 38px; height: 38px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--om-line-strong); border-radius: 50%;
  background: var(--om-surface); color: var(--om-ink-2);
}
.om-shelf__btn:hover { border-color: var(--om-accent); color: var(--om-accent); }
.om-shelf__btn[disabled] { opacity: .35; cursor: default; }
.om-sec__head:has(.om-shelf__nav) .om-sec__more { margin-left: var(--om-4); }
/* Responsive rules.
 *
 * Every @media block lives here and is built LAST, so a breakpoint always wins
 * over the component rule it is overriding. They previously sat in layout.css,
 * which is concatenated before components.css — same specificity, later file
 * won, and the mobile layout silently never applied.
 */

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

@media (max-width: 1080px) {
  .om-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .om-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .om-burger { display: inline-flex; }
  .om-nav { display: none; }
  .om-header__bar { min-height: 60px; gap: var(--om-3); }
  .om-header__biz { display: none; }
  .om-nav--open {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--om-surface); border-bottom: 1px solid var(--om-line);
    box-shadow: var(--om-shadow); padding: var(--om-4) var(--om-5); z-index: 45;
  }
  .om-nav--open ul { flex-direction: column; align-items: stretch; gap: 0; width: 100%; }
  .om-nav--open li { border-bottom: 1px solid var(--om-line); }
  .om-nav--open a { display: block; padding: 13px 0; }
  .om-nav--open .sub-menu { display: none !important; }
  /* The mega panels become an accordion: triggers span the row, panels sit
     in-flow beneath their trigger instead of floating under the header. */
  .om-nav--open .om-nav__trigger { width: 100%; justify-content: space-between; padding-block: 13px; }
  .om-nav--open .om-mega { position: static; box-shadow: none; border: 0; }
  .om-nav--open .om-mega__grid { display: block; padding-block: 0 var(--om-4); }
  .om-nav--open .om-mega__col--wide > ul { columns: 1; }
  .om-nav--open .om-mega__col + .om-mega__col { margin-top: var(--om-4); }
  .om-nav--open .om-mega__col ul a { padding: 9px 0; }
  .om-today__bar { flex-wrap: wrap; }
  .om-today__date, .om-today__weather { padding-block: 8px; }
  .om-today__events { border-left: 0; padding-inline: 0; width: 100%; }
  .om-today__all { display: none; }
  .om-hero { padding-block: var(--om-8) var(--om-6); }
  .om-search { flex-wrap: wrap; }
  .om-search__where { border-left: 0; border-top: 1px solid var(--om-line); width: 100%; padding-block: 12px; }
  .om-search__btn { width: 100%; padding-block: 14px; }
  .om-grid--3, .om-grid--2 { grid-template-columns: 1fr; }
  .om-footer__top { grid-template-columns: 1fr; gap: var(--om-6); }
  .om-stack { gap: var(--om-10); }
}

@media (max-width: 520px) {
  .om-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .om-grid--4 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .om-detail { grid-template-columns: 1fr; gap: var(--om-6); }
  .om-detail__aside { position: static; }
}

@media (max-width: 1000px) { .om-header__biz { display: none; } }

@media (max-width: 1000px) { .om-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 900px) {
  .om-adv__split { grid-template-columns: 1fr; }
  .om-adv__aside { position: static; }
  .dtb2-claim__form, .dtb2-dash__form { grid-template-columns: 1fr; }
  .dtb2-add__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) { .om-plans { grid-template-columns: 1fr; } }

@media (max-width: 900px) {
  .om-intake { grid-template-columns: 1fr; }
  .om-standards__grid, .om-write__split { grid-template-columns: 1fr; }
  /* One column, and the practical detail before the artwork: on a phone
     "when and where" beats "what it looks like". */
  .om-event__layout { grid-template-columns: 1fr; }
  .om-event__aside { position: static; order: -1; }
}

@media (max-width: 860px) { .om-sections__label { display: none; } }

@media (max-width: 780px) {
  .om-contributor__head { grid-template-columns: auto minmax(0, 1fr); gap: var(--om-4); }
  .om-contributor__photo { width: 92px; height: 92px; }
  .om-contributor__edit { grid-column: 1 / -1; justify-self: start; }
  .om-contribute { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 1000px) { .om-writers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .om-writers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Small phones: the masthead must still fit logo + CTA + menu at 320px. */
@media (max-width: 430px) {
  .om-header__cta-rest { display: none; }
  .om-logo { padding: 5px 8px; }
  .om-logo__img { height: 34px; }
  .om-header__bar { gap: var(--om-2); padding-inline: var(--om-4); }
  .om-header__actions { gap: var(--om-2); }
  .om-btn--sm { padding: 8px 10px; }
  .om-wrap { padding-inline: var(--om-4); }
}

/* Touch targets: the compact button and pagination links are fine with a mouse
   but sit under the 44px minimum on a phone. */
@media (pointer: coarse) {
  .om-btn--sm { min-height: 44px; }
  .dtb2-pagination a, .dtb2-pagination span,
  .om-pagination .page-numbers { min-width: 44px; min-height: 44px; }
  .om-social a { width: 44px; height: 44px; }
  .om-listing__claim a { padding-block: 6px; }
}

/* Nothing may push the page sideways, whatever a plugin injects. */
@media (max-width: 860px) {
  html, body { overflow-x: hidden; }
  .om-search__where { justify-content: flex-start; }
}

/* Arrows are a desktop convenience; on touch the shelf is simply swiped. */
@media (pointer: coarse), (max-width: 700px) {
  .om-shelf__nav { display: none; }
  .om-shelf { grid-auto-columns: minmax(78%, 1fr); }
}