/* 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;
  /* Back to the original after a detour to #efebf1. That deepening was only
     ever a workaround for white filter inputs having no edge against the
     panel; the fields now carry a 2px accent border of their own, so the
     panel does not have to supply the contrast -- and it was darkening nine
     other surfaces (map plate, intake box, card image placeholder) to fix
     one. */
  --om-surface-2: #f7f5f7;

  /* One definition for every text input, textarea and select on the site.
     These drifted apart -- the directory filters, the claim form, the add-a-
     business intake and the selects each carried their own border value, so
     fixing the filters left the claim form beside them looking like a
     different site. A token means the next change lands everywhere at once. */
  --om-field-border: 2px solid var(--om-accent);
  --om-field-radius: var(--om-r);
  --om-field-focus: 2px solid var(--om-accent);
  --om-field-focus-offset: 2px;
  --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%; }

/* Hold the footer at the bottom of the viewport on a short page. The weather
   page ends well above the fold, which left a band of white below the footer
   and made the page look broken rather than short. */
html { height: 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;
  min-height: 100%; display: flex; flex-direction: column;
}

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; }
/* ...but not something that asked to be hidden.
   display is a presentation attribute on SVG, which any CSS rule outranks, so
   the line above un-hid the icon sprite sheets DirectoryToolbox and
   PublishToolbox print in the footer. Two <svg display="none"> elements full of
   <symbol> definitions were rendering at their default 300x150 — three hundred
   pixels of blank page under the footer, on every page of the site. */
svg[display="none"], [hidden] { display: none; }
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 ----------
   The masthead is filled with the site's brand colour and everything on it is
   white. That colour is not decoration: onmetro_guess_accent() reads it from
   the site's previous theme, so each city gets back the navigation colour it
   already had. --om-accent-header is the same colour darkened only as far as
   white text needs (see onmetro_accent_readable), so a mid-tone brand keeps its
   hue instead of being flipped to dark text.

   Contrast is not lost, only moved: the mega panel and the sections bar below
   stay light, so the page opens with colour at the top and air beneath it. */
.om-header { background: var(--om-accent-header, var(--om-accent)); color: var(--om-accent-ink); position: relative; z-index: 40; }
.om-header__bar { display: flex; align-items: center; gap: var(--om-5); min-height: var(--om-header-h); }
/* The logo used to sit on its own accent plate. On an accent header that plate
   is the same colour as the ground, so it goes. */
.om-logo { display: inline-flex; align-items: center; flex: 0 0 auto; border-radius: var(--om-r); }
.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 0; font-size: var(--om-fs-lg); }
/* Focus must stay visible against the accent, not against white. */
.om-header :focus-visible { outline: 3px solid var(--om-accent-ink); outline-offset: 2px; border-radius: var(--om-r-sm); }

.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-accent-ink); text-decoration: none; font-weight: 600; font-size: var(--om-fs-base); white-space: nowrap; padding-block: 6px; display: inline-block; }
/* Hover cannot be "go accent" any more — that is the background. Underline and
   a slight lift of opacity read on any brand colour. */
.om-nav a { opacity: .92; transition: opacity .12s ease; }
.om-nav a:hover, .om-nav .current-menu-item > a { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.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-accent-ink); white-space: nowrap; opacity: .92; transition: opacity .12s ease;
}
.om-nav__trigger:hover, .om-nav__group.is-open > .om-nav__trigger { opacity: 1; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.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-ink); opacity: .92; text-decoration: none; white-space: nowrap; }
.om-burger { display: none; background: none; border: 1px solid rgba(255,255,255,.45); border-radius: var(--om-r); padding: 8px; color: var(--om-accent-ink); min-height: 44px; min-width: 44px; align-items: center; justify-content: center; }
/* The primary button is accent-on-accent here, so the header takes the inverse:
   a white chip with the brand colour as its text. */
/* Inverted on the accent: a white chip with the brand colour as its text.
   Hover shifts the chip's own colour rather than fading the whole thing —
   opacity dimmed the text along with the background and read as disabled. */
.om-header__actions .om-btn--primary { background: var(--om-accent-ink); color: var(--om-accent-header, var(--om-accent)); border-color: transparent; }
.om-header__actions .om-btn--primary:hover,
.om-header__actions .om-btn--primary:focus-visible { background: var(--om-accent-tint); color: var(--om-accent-dark); }

/* The other two controls up here get the same treatment: a wash, not a fade. */
/* A wash on the ground has to come with the text at full strength. Lightening
   the background while leaving the label at rest opacity lowers the contrast,
   and a control that loses contrast on hover reads as disabled. */
.om-header__biz { border-radius: var(--om-r); padding: 6px var(--om-3); transition: background-color .15s, opacity .15s; }
.om-header__biz:hover, .om-header__biz:focus-visible { background: rgba(255,255,255,.18); opacity: 1; text-decoration: none; }
.om-burger { transition: background-color .15s, border-color .15s; }
.om-burger:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.7); }

/* ---------- Today strip ---------- */
/* Directly beneath a filled masthead, the strip's own gradient would merge the
   two into one undifferentiated block. It becomes the darker shelf under the
   masthead instead — the arrangement the live sites already use, where a darker
   top bar sits under the nav colour. */
.om-today {
  background: var(--om-accent-dark);
  color: var(--om-accent-ink); font-size: var(--om-fs-base);
  border-top: 1px solid rgba(255,255,255,.22);
}
.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); color: inherit; text-decoration: none; transition: background-color .15s; }
a.om-today__date,
a.om-today__date:link,
a.om-today__date:visited,
a.om-today__date:hover,
a.om-today__date:focus { color: var(--om-accent-ink); }
a.om-today__date:hover, a.om-today__date:focus-visible { background: rgba(255,255,255,.18); }
.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); color: inherit; text-decoration: none; transition: background-color .15s; }
/* A hovered block must not paint over the rule that separates it from the next
   one, so the wash is inset by a pixel on the side the border lives on. */
a.om-today__weather { background-clip: padding-box; }
/* A whole block, not a word: underlining part of it looked like a mistake, so
   it lights up instead. */
/* The theme's global link colours are more specific than `color: inherit`, so
   making this block an anchor turned its text the same colour as the strip it
   sits on — legible only because the hover wash lightens the ground behind it.
   State the colour explicitly, in every state. */
a.om-today__weather,
a.om-today__weather:link,
a.om-today__weather:visited,
a.om-today__weather:hover,
a.om-today__weather:focus { color: var(--om-accent-ink); }
/* No negative margin here. Stretching the hover area to the right pushed it
   under the next block's border-left, so the divider doubled up against the
   edge of the wash. The block's own padding is enough. */
a.om-today__weather:hover, a.om-today__weather:focus-visible { background: rgba(255,255,255,.18); }
a.om-today__weather:hover .om-today__sum { opacity: 1; }
.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, .om-today__event:link, .om-today__event:visited,
.om-today__all, .om-today__all:link, .om-today__all:visited { color: var(--om-accent-ink); }
.om-today__event:hover, .om-today__all:hover { color: var(--om-accent-ink); text-decoration: underline; text-underline-offset: 4px; }
.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);
  /* The bar is the field edge here -- the inputs inside are borderless -- so it
     tracks the same token, while keeping its own larger radius. */
  border: var(--om-field-border); 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: auto; padding-top: var(--om-16); }
.om-footer a { color: #fff; text-decoration: none; }
.om-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Four columns: who we are, what to browse, what to read, and the sales doors.
   The brand no longer takes half the width for three lines of text. */
.om-footer__top { display: grid; grid-template-columns: 1.4fr 1.6fr 1fr 1.1fr; gap: var(--om-8); padding-block: var(--om-10); }
.om-footer__brand { display: flex; flex-direction: column; gap: var(--om-3); max-width: 34ch; align-items: flex-start; }
/* The mark, not the domain as text. No accent plate down here — the footer's
   own ground already separates it. */
.om-footer__logo { display: inline-flex; }
.om-footer__logo__img { height: 42px; width: auto; }
.om-footer__logo--text { color: #fff; font-family: var(--om-font-display); font-weight: 700; font-size: var(--om-fs-lg); text-decoration: none; }

/* The network credit sits with the copyright, deliberately quiet. */
.om-footer__network { color: #9c93a0; display: inline-flex; align-items: center; gap: 6px; }
.om-footer__network a { color: #cfc6d0; }
.om-footer__network-name { font-family: var(--om-font-display); font-weight: 700; color: #fff; }
.om-footer__network-img { height: 18px; width: auto; display: inline-block; vertical-align: middle; }
/* Every directory section, in two short columns rather than one long one.
   display must be reset: .om-footer__nav ul above makes these flex columns, and
   a flex container ignores the multi-column properties entirely — the count
   computed as 2 while the list still rendered as one tall column. */
/* Qualified, because .om-footer__nav ul above is a class plus an element and
   outranks a bare class — the display stayed flex and the column count sat
   there computing as 2 with nothing to show for it. */
.om-footer__nav ul.om-footer__list--split { display: block; columns: 2; column-gap: var(--om-5); }
.om-footer__list--split li { break-inside: avoid; margin-bottom: var(--om-2); }
.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); }
/* The article takes the same two-column shape as a listing or an event: the
   piece on the left, what to do next on the right. See single.php. */
.om-article__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--om-8); align-items: start; padding-bottom: var(--om-8); }
.om-article__main { display: flex; flex-direction: column; gap: var(--om-6); min-width: 0; }
/* Stuck to the *bottom*, not the top.
   A listing's aside is short, so pinning it to the top keeps it in view and
   costs nothing. This one carries five blocks and is taller than the viewport,
   and pinning that to the top freezes it before the reader can reach the lower
   panels — the ad, what's on and the directory were simply unreachable.
   Sticking the bottom edge instead lets the column scroll until it is fully
   seen, and only then holds it. */
.om-article__aside { display: flex; flex-direction: column; gap: var(--om-5); position: sticky; bottom: var(--om-4); align-self: start; }
.om-article__head { display: flex; flex-direction: column; gap: var(--om-2); }
.om-article__head h1 { margin: 0; }
.om-article__eyebrow { margin: 0; font-size: var(--om-fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.om-article__eyebrow a { color: var(--om-accent); text-decoration: none; }
/* The byline panel: who wrote it, how long it takes, where it sits. */
.om-byline__who { display: flex; align-items: center; gap: var(--om-3); }
.om-byline__avatar { border-radius: 50%; width: 48px; height: 48px; flex: 0 0 auto; }
.om-byline__name { display: block; font-family: var(--om-font-display); font-weight: 700; color: var(--om-ink); text-decoration: none; }
.om-byline__name:hover { color: var(--om-accent); }
.om-byline__role { display: block; font-size: var(--om-fs-sm); color: var(--om-ink-3); }
.om-byline__facts { font-size: var(--om-fs-sm); row-gap: var(--om-1); }
.om-byline__facts dt { color: var(--om-ink-3); }
.om-byline__facts dd { margin: 0; font-weight: 600; }
.om-panel__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--om-3); }
.om-panel__list a { text-decoration: none; font-weight: 600; color: var(--om-ink); }
.om-panel__list a:hover { color: var(--om-accent); }
.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__cta-label { display: inline; }
.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: var(--om-field-border); border-radius: var(--om-field-radius); padding: 11px var(--om-3);
  background: var(--om-surface); min-height: 44px; width: 100%;
}
.dtb2-claim__field input:focus-visible, .dtb2-claim__field textarea:focus-visible,
.dtb2-dash__field input:focus-visible, .dtb2-dash__field textarea:focus-visible {
  outline: var(--om-field-focus); outline-offset: var(--om-field-focus-offset);
}
.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: var(--om-field-border); border-radius: var(--om-field-radius);
  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: var(--om-field-focus); outline-offset: var(--om-field-focus-offset);
}
/* 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: var(--om-field-border); border-radius: var(--om-field-radius);
  padding: 11px var(--om-3); background: var(--om-surface); min-height: 44px; width: 100%;
}
.om-intake__field input:focus-visible, .om-intake__field textarea:focus-visible {
  outline: var(--om-field-focus); outline-offset: var(--om-field-focus-offset);
}
/* A checkbox is not a text field and must not take the 2px plate treatment. */
.om-intake__field label input[type="checkbox"] { border-width: 1px; }
.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; }

/* ------------------------------------------------ nav: link plus chevron */

/* The label and the chevron are two controls that have to read as one item, so
   the group is the hit area and the pair sits inside it with no gap. */
.om-nav__group { display: flex; align-items: center; }

/* No horizontal padding on the label. The list already sets a gap between
   items; adding padding to the link AND the trigger put 44px between one label
   and the next where the original single button had 20. Vertical rhythm and the
   touch height live on the group instead. */
.om-nav__link {
	display: inline-flex;
	align-items: center;
	padding: var(--om-2) 0;
	color: var(--om-accent-ink);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}

.om-nav__link--static { cursor: default; }

.om-nav__group .om-nav__trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Just enough to sit the pill around the chevron without pushing the next
	   item away. The gap between items is the list's job. */
	padding: var(--om-2) 0.3rem;
	margin-inline-start: 0.15rem;
	background: none;
	border: 0;
	color: var(--om-accent-ink);
	cursor: pointer;
	/* A 44px target on touch, without widening the row on a desktop. */
	min-height: 44px;
	min-width: 28px;
	border-radius: 6px;
	transition: background-color 120ms ease;
}

/* Now that hover no longer opens the panel, the chevron is the ONLY way in, so
   it has to read as a control rather than as decoration beside the label. */
.om-nav__group .om-nav__trigger:hover {
	background: rgba(255, 255, 255, 0.16);
}

.om-nav__group.is-open .om-nav__trigger {
	background: rgba(255, 255, 255, 0.22);
}

/* The chevron's own rotation and transition are defined earlier in this file
   and are not repeated here -- two copies of the same rule drift apart. */

@media (prefers-reduced-motion: reduce) {
	.om-nav__group .om-nav__trigger { transition: none; }
}

.om-nav__group:hover .om-nav__link,
.om-nav__group:focus-within .om-nav__link { text-decoration: underline; }

.om-nav__link:focus-visible,
.om-nav__group .om-nav__trigger:focus-visible {
	outline: 2px solid var(--om-accent-ink);
	outline-offset: -2px;
	border-radius: 4px;
}

/* In the drawer the pair sits on one row with the chevron pushed to the end,
   so the label is a comfortable tap target and the chevron is a separate one. */
/* In the drawer there is one item per row, so generous padding costs nothing
   and both halves want to be comfortable taps. */
@media (max-width: 860px) {
	.om-nav__group { flex-wrap: wrap; justify-content: space-between; }
	.om-nav__link { flex: 1 1 auto; padding-inline: var(--om-3); }
	.om-nav__group .om-nav__trigger { padding-inline: var(--om-3); margin-inline-start: 0; }
	.om-nav__group .om-mega { flex: 1 0 100%; }
}
/* ---------- 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 ---------- */
/*
 * Adverts take NO vertical space until one has actually filled.
 *
 * The obvious way to do that -- display:none on the wrapper until an advert
 * arrives -- breaks adverts outright. These are responsive units: Google
 * measures the CONTAINER to decide what size to request, and a hidden container
 * has zero width, so it can never size or fill one. The container therefore
 * stays in the layout at full width and simply has no height.
 *
 * Collapsing only after Google reports "unfilled" is not enough either. Google
 * inserts its iframe and sizes it from the container BEFORE it knows whether it
 * has anything to show, so the gap appears and then closes -- a visible jump on
 * every page load. Starting collapsed and expanding on success has no such
 * window.
 */
.om-ad { display: flex; justify-content: center; margin-block: 0; }
.om-ad__inner { display: block; width: 100%; max-width: var(--om-ad-w); }

/*
 * No height until Google says "filled". Width is untouched, so measurement and
 * filling still work; only the vertical space is withheld. Once the attribute
 * flips, this rule stops matching and Google's own inline height applies.
 */
ins.adsbygoogle:not( [data-ad-status="filled"] ) { height: 0 !important; overflow: hidden; }

/* An advert arrived: give it its breathing room back. The class is what
   browsers without :has() use, and is also app.js's escape hatch for the case
   where Google renders without ever stamping the attribute. */
.om-ad.is-filled,
.om-ad:has( ins.adsbygoogle[data-ad-status="filled"] ) { margin-block: var(--om-4); }
.om-ad.is-filled ins.adsbygoogle { height: auto !important; overflow: visible; }

/* Explicitly nothing: belt and braces for the wrapper and its margins. */
.om-ad.is-empty { display: none; }
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.om-ad:has( ins.adsbygoogle[data-ad-status="unfilled"] ) { display: none; }

.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: var(--om-field-border); border-radius: var(--om-field-radius); background: var(--om-surface);
}
.om-news__form input[type="email"]:focus-visible {
  outline: var(--om-field-focus); outline-offset: var(--om-field-focus-offset);
}

/* ---------- 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);
}
/* Filter fields carry the SAME 2px accent border as the home hero search.
 *
 * An earlier pass tried a 32%-tinted 1.5px edge here, reasoning that three
 * accent boxes in a row would shout. On the page it read as no border at all:
 * white fields floating on a pale panel. The hero bar is the reference the
 * reader already has, so the filter row now matches it outright.
 *
 * background-color, not the shorthand: this file is concatenated after
 * layout.css, and `background:` here would wipe the select chevron it sets. */
/* Text inputs are set through the plugin's own custom properties rather than by
 * out-selecting it. DirectoryToolboxPro styles them with
 * `.dtb_search_form input:not([type="submit"]):not([type="button"]):not([type="reset"])`
 * -- (0,4,1), higher than anything sane written here -- but the value it uses is
 * `var(--dtb-input-border, ...)`, so setting that variable wins without a fight.
 * Selects are not matched by that rule, so they take the border below directly;
 * that asymmetry is exactly why Zip rendered edgeless while the three selects
 * beside it did not.
 *
 * Every filter field carries the same 2px accent edge as the home hero search.
 * An earlier 32%-tinted 1.5px version read as no border at all on the page. */
.dtb_search_form, form.dtb-form {
  --dtb-input-border: var(--om-field-border);
  --dtb-input-border-radius: var(--om-field-radius);
}
.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: var(--om-field-border); border-radius: var(--om-field-radius);
  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); }

/* The filter bar: one line, then the rest on request.
   Six controls above the results made a reader scroll past a form to reach the
   listings they had already navigated to. Name and town cover almost every
   case; State, Zip, Range and Sort wait behind a disclosure. */
/* Qualified past the plugin's own .dtb_search_form .search_fields, which is a
   class pair and outranks a single class — the auto-fill grid stayed in force
   and pushed the Search button onto its own row. */
.dtb_search_form .search_fields.search_fields--primary {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  gap: var(--om-3); align-items: center;
}
.search_fields--primary .search_field { margin: 0; }
/* Each control is its own rounded box rather than three cells inside one bar.
 *
 * The bar version -- a white plate with a 2px accent edge, copied from the home
 * hero -- looked right until a field took focus: the ring had to be drawn inset
 * to survive the bar's `overflow: hidden`, so a square rectangle appeared inside
 * a rounded outline. Separate fields let the focus ring sit outside and follow
 * the field's own radius, which is the whole reason to have one. */
.dtb_search_form .search_fields--primary input:focus-visible,
form.dtb-form input:focus-visible, .dtb_search_form select:focus-visible {
  outline: var(--om-field-focus); outline-offset: var(--om-field-focus-offset);
}
.search_fields--primary .btn_search { white-space: nowrap; }

.dtb_search_more { margin-top: var(--om-3); }
.dtb_search_more > summary {
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px;
  font-weight: 700; font-size: var(--om-fs-sm); color: var(--om-accent);
  padding: var(--om-2) 0; list-style: none;
  /* Centred under a full-width filter bar. width:max-content plus auto margins
     keeps the click target on the words rather than the whole row. */
  width: max-content; margin-inline: auto;
}
.dtb_search_more > summary::-webkit-details-marker { display: none; }
.dtb_search_more > summary::after {
  content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.dtb_search_more[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.dtb_search_more > summary:focus-visible { outline: 3px solid var(--om-accent); outline-offset: 3px; border-radius: var(--om-r-sm); }
.dtb_search_more .search_fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--om-3); padding-top: var(--om-3); }
.dtb_search_more .search_actions { display: flex; gap: var(--om-3); flex-wrap: wrap; margin-top: var(--om-3); }
/* Finding listings near you is a different job from narrowing these ones, so it
   does not compete with the primary button. */
.dtb_search_more .btn_search_by_location { background: transparent; color: var(--om-accent); border: 1px solid var(--om-line-strong); }
.dtb_search_more .btn_search_by_location:hover { background: var(--om-accent-tint); }

/* Empty results: a message and a way out, not a layout table. */
.dtb2-empty { text-align: center; padding: var(--om-10) var(--om-5); border: 1px dashed var(--om-line-strong); border-radius: var(--om-r-lg); }
.dtb2-empty__msg { margin: 0 0 var(--om-4); font-size: var(--om-fs-lg); color: var(--om-ink-2); }
.dtb2-empty__actions { margin: 0; display: flex; gap: var(--om-4); align-items: center; justify-content: center; flex-wrap: wrap; }
.dtb2-empty__clear { color: var(--om-accent); font-weight: 600; }
/* The plugin's .dtb-button is width:100%, which suits a form field and not a
   single call to action sitting in the middle of an empty result set. */
.dtb2-empty__actions .dtb-button { width: auto; flex: 0 0 auto; }

/* 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; }
/* The theme's results override puts the cards in their own container so a
   "Show more" can append to it without landing after the pager. The grid moves
   with them; the outer element goes back to being a plain block. */
.dtb2-basic-listings:has(.dtb2-basic-listings__items) { display: block; }
.dtb2-basic-listings__items > .om-card { display: flex; height: 100%; }
.dtb2-basic-listings__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--om-5); }
.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); }
/* The plate for the filter bar.
 *
 * The form inside it is deliberately flattened below. Both this wrapper and
 * .dtb_search_form were being given the same background, border, radius and
 * padding, so the filter bar rendered as two identical rounded boxes nested one
 * inside the other with 20px between them -- which reads as a muddy double
 * outline rather than as one panel. */
.dtbpro-search-form {
  background: var(--om-surface-2); border: 1px solid var(--om-line);
  border-radius: var(--om-r-lg); padding: var(--om-5);
}

/* Inside the wrapper the form is just a form. On its own -- the sitewide
   search page has no wrapper -- it keeps the plate from the rule above. */
.dtbpro-search-form .dtb_search_form {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.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); }

/* ---------- Today page ---------- */
.om-today-head { display: flex; flex-direction: column; gap: var(--om-1); }
.om-today-head h1 { margin: 0; }
.om-today-head__date { margin: 0; color: var(--om-ink-3); font-size: var(--om-fs-md); }
.om-today-wx {
  display: flex; align-items: center; gap: var(--om-4);
  padding: var(--om-4) var(--om-5); border: 1px solid var(--om-line);
  border-radius: var(--om-r-lg); background: var(--om-accent-tint);
}
.om-today-wx .om-weather__icon { color: var(--om-accent-dark); flex: 0 0 auto; }
.om-today-wx__read { margin: 0; display: flex; align-items: baseline; gap: var(--om-3); flex-wrap: wrap; }
.om-today-wx__read b { font-family: var(--om-font-display); font-size: var(--om-fs-2xl); line-height: 1; font-variant-numeric: tabular-nums; }
.om-today-wx__more { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.om-today-later { gap: var(--om-2); }

/* ---------- Weather page ---------- */
.om-wx-now { display: flex; align-items: center; gap: var(--om-6); padding: var(--om-6); border: 1px solid var(--om-line); border-radius: var(--om-r-lg); background: var(--om-accent-tint); }
.om-wx-now__mark { color: var(--om-accent-dark); flex: 0 0 auto; }
.om-wx-now__read { display: flex; flex-direction: column; gap: 2px; }
.om-wx-now__temp { margin: 0; font-family: var(--om-font-display); font-weight: 800; font-size: var(--om-fs-3xl); line-height: 1; font-variant-numeric: tabular-nums; }
.om-wx-now__sum { margin: 0; font-size: var(--om-fs-lg); }
.om-wx-now__range { margin: 0; color: var(--om-ink-3); font-variant-numeric: tabular-nums; }

/* The hourly row scrolls rather than wrapping: eight steps read as a sequence,
   and a wrapped sequence reads as a grid of unrelated numbers. */
.om-wx-hours { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(74px, 1fr); gap: var(--om-2); overflow-x: auto; padding-bottom: var(--om-2); scrollbar-width: thin; }
.om-wx-hour { display: flex; flex-direction: column; align-items: center; gap: var(--om-2); padding: var(--om-3) var(--om-2); border: 1px solid var(--om-line); border-radius: var(--om-r); color: var(--om-ink-2); }
.om-wx-hour__when { font-size: var(--om-fs-xs); color: var(--om-ink-3); text-transform: uppercase; letter-spacing: .06em; }
.om-wx-hour__temp { font-weight: 700; font-variant-numeric: tabular-nums; }

.om-wx-days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.om-wx-day { display: grid; grid-template-columns: 7.5rem 28px 1fr auto; align-items: center; gap: var(--om-4); padding: var(--om-3) 0; border-bottom: 1px solid var(--om-line); }
.om-wx-day:last-child { border-bottom: 0; }
.om-wx-day__when { font-weight: 700; font-family: var(--om-font-display); }
.om-wx-day .om-weather__icon { color: var(--om-ink-3); }
.om-wx-day__sum { color: var(--om-ink-2); }
.om-wx-day__range { font-variant-numeric: tabular-nums; display: flex; gap: var(--om-3); }
.om-wx-day__range span { color: var(--om-ink-3); }

/* ---------- Show more ---------- */
.om-more { display: flex; flex-direction: column; align-items: center; gap: var(--om-2); margin-block: var(--om-6); }
/* inline-flex centres vertically but not horizontally, so a 200px-wide button
   held its label against the left edge. */
.om-more__btn { min-width: 200px; justify-content: center; }
/* The plugin prints this inside the listings block; it is a full-width control,
   not a card. */
.dtb2-basic-listings > .om-more, .dtb-listings-list > .om-more { grid-column: 1 / -1; }

/* The hidden attribute is only a user-agent display:none, so any author rule
   beats it — and the rules above give these pagers a display of their own.
   Setting hidden in JS therefore removed them from the accessibility tree while
   leaving them on the page. Say it explicitly. */
.dtb2_pagination[hidden], .dtb2-pagination[hidden], .om-pagination[hidden],
.dtb2_pagination[hidden] ul, .dtb2-pagination[hidden] ul { display: none; }
.om-more__count { margin: 0; font-size: var(--om-fs-sm); color: var(--om-ink-3); font-variant-numeric: tabular-nums; }

/* The directory plugin emits dtb2_pagination with an underscore; the theme had
   only ever styled .dtb-pagination and .dtb2-pagination, so directory paging
   was rendering unstyled on every category page. */
.dtb2_pagination ul, .dtb2-pagination ul, .dtb-pagination ul { display: flex; flex-wrap: wrap; gap: var(--om-2); list-style: none; margin: var(--om-6) 0; padding: 0; justify-content: center; }
.dtb2_pagination a, .dtb2_pagination span,
.dtb2-pagination a, .dtb2-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; min-height: 40px; padding: 0 var(--om-3);
  border: 1px solid var(--om-line); border-radius: var(--om-r);
  text-decoration: none; color: var(--om-ink-2); font-weight: 600;
}
.dtb2_pagination a:hover, .dtb2-pagination a:hover { border-color: var(--om-accent); color: var(--om-accent); }
.dtb2_pagination .current, .dtb2-pagination .current { background: var(--om-accent); border-color: var(--om-accent); color: var(--om-accent-ink); }

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

/* ---------------------------------------------------------- contributors */

/* The header is a two-column grid rather than a float, so the portrait and the
   prose can never overlap however long either turns out to be. */
.om-contrib__head {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr);
	gap: var(--om-4);
	align-items: start;
	margin: var(--om-4) 0 var(--om-5);
	padding-bottom: var(--om-4);
	border-bottom: 1px solid var(--om-line);
}

.om-contrib__photo {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	object-fit: cover;
	background: var(--om-accent-tint);
}

.om-contrib__name { margin: 0; }

.om-contrib__role {
	margin: 0.25rem 0 0;
	color: var(--om-accent);
	font-weight: 600;
}

.om-contrib__count {
	margin: 0.35rem 0 0;
	font-size: 0.9rem;
	color: var(--om-muted);
}

.om-contrib__bio {
	margin-top: var(--om-3);
	max-width: var(--om-wrap-narrow);
	line-height: 1.65;
}

.om-contrib__bio p:first-child { margin-top: 0; }

/* The aside list: a small round portrait, a name and a count. */
.om-contrib__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.om-contrib__list a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 0;
	text-decoration: none;
	color: inherit;
}

.om-contrib__list img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 36px;
	background: var(--om-accent-tint);
}

.om-contrib__list span { display: flex; flex-direction: column; min-width: 0; }
.om-contrib__list strong { font-size: 0.95rem; line-height: 1.25; }
.om-contrib__list small { font-size: 0.8rem; color: var(--om-muted); }
.om-contrib__list a:hover strong { color: var(--om-accent); }

/* Contributors index */
.om-contribs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--om-4);
	list-style: none;
	margin: var(--om-4) 0 0;
	padding: 0;
}

.om-contribs__card {
	display: flex;
	gap: 0.9rem;
	align-items: center;
	padding: 0.9rem;
	border: 1px solid var(--om-line);
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	background: #fff;
}

.om-contribs__card:hover { border-color: var(--om-accent); }

.om-contribs__card img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 56px;
	background: var(--om-accent-tint);
}

@media (max-width: 640px) {
	.om-contrib__head {
		grid-template-columns: 1fr;
		justify-items: start;
	}
	.om-contrib__photo { width: 112px; height: 112px; }
}

/* ---------------------------------------------------------------------------
 * Passwordless sign-in (toolbox-core Auth\Links\form)
 *
 * Fields take --om-field-border like every other control on the site.
 * ------------------------------------------------------------------------ */
.toolbox-signin { max-width: 34rem; }
.toolbox-signin__notice {
  padding: var(--om-3) var(--om-4); border-radius: var(--om-r);
  font-weight: 600; margin: 0 0 var(--om-4);
}
.toolbox-signin__notice.is-ok { background: var(--om-open-bg); color: var(--om-open); }
.toolbox-signin__notice.is-error { background: #fbdedb; color: var(--om-closed); }

.toolbox-signin__form { display: flex; flex-direction: column; gap: 6px; }
.toolbox-signin__form label { font-weight: 600; font-size: var(--om-fs-base); }

/* Field and button share a row on a roomy screen; the button keeps its own
   corners rather than merging into the field, for the reason the directory
   filter bar does -- a merged bar has to clip its focus ring. */
.toolbox-signin__row { display: flex; gap: var(--om-3); align-items: stretch; }
.toolbox-signin__row input[type="email"] {
  flex: 1 1 auto; min-width: 0; min-height: 48px;
  border: var(--om-field-border); border-radius: var(--om-field-radius);
  padding: 0 var(--om-4); background: var(--om-surface);
}
.toolbox-signin__row input[type="email"]:focus-visible {
  outline: var(--om-field-focus); outline-offset: var(--om-field-focus-offset);
}
.toolbox-signin__btn {
  flex: 0 0 auto; border: 0; border-radius: var(--om-r);
  background: var(--om-accent); color: var(--om-accent-ink);
  font-weight: 700; padding: 0 var(--om-5); min-height: 48px; cursor: pointer;
}
.toolbox-signin__btn:hover { background: var(--om-accent-dark); }
.toolbox-signin__hint { color: var(--om-ink-3); font-size: var(--om-fs-sm); margin: 2px 0 0; }

.dtb2-dash__signinh { font-size: var(--om-fs-xl); margin: 0 0 var(--om-4); }

/* The generated wordmark. Inlined SVG, so it inherits the header's ink -- the
   whole reason the artwork is drawn with fill="currentColor". Height is fixed
   and width follows the aspect ratio, because the lockup gets wider with the
   length of the city name and a fixed width would squash Philadelphia. */
/* The colour MUST be set here, not inherited. The lockup is an <a>, and
   `a { color: var(--om-accent) }` in base.css beats the white the header
   passes down -- which rendered the wordmark in the accent colour ON the
   accent header, very nearly invisible. .om-logo--text carries the same
   declaration for the same reason. */
.om-logo--mark { display: inline-flex; align-items: center; color: var(--om-accent-ink); }
.om-logo--mark:hover,
.om-logo--mark:focus-visible { color: var(--om-accent-ink); }

/* Every wordmark, wherever it is used. .om-mark is emitted by onmetro_logo()
   regardless of the base class the caller passes, so a new placement inherits
   sane sizing instead of rendering the raw SVG at whatever width it likes --
   which is what the footer was doing. */
.om-mark { display: inline-flex; align-items: center; }
.om-mark svg { height: 34px; width: auto; display: block; }

/* The footer ground is --om-ink with pale text, and `a { color: #fff }` there
   already wins over inheritance -- but the wordmark is currentColor, so state
   it rather than depend on which rule happens to apply. */
.om-footer__logo--mark { color: #fff; }
.om-footer__logo--mark:hover,
.om-footer__logo--mark:focus-visible { color: #fff; }
.om-footer__logo--mark svg { height: 42px; }
@media ( max-width: 860px ) { .om-logo--mark svg { height: 28px; } }

/* Wraps a listing/event card dropped inline into editorial prose (see
   [onmetro_listing] / [onmetro_event] in inc/content-shortcodes.php). */
.om-inline-card { margin: 1.5rem 0; }
.om-inline-card__blurb { margin: .5rem 0 0; font-style: italic; }
/* 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: 1000px) {
  .om-footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .om-footer__top { grid-template-columns: 1fr; }
  .om-footer__list--split { columns: 2; }
}
@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; }
  /* The drawer opens inside the header, so it carries the header's colour
     rather than reverting to a white sheet halfway down the screen. */
  .om-nav--open {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--om-accent-header, var(--om-accent));
    border-bottom: 1px solid rgba(255,255,255,.25);
    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 rgba(255,255,255,.18); }
  /* The mega panel is a floating light sheet on desktop; in the drawer it is
     in-flow, so it must not paint itself white over the accent. */
  .om-nav--open .om-mega { background: transparent; }
  .om-nav--open .om-mega__title a,
  .om-nav--open .om-mega__col ul a,
  .om-nav--open .om-mega .om-mega__all { color: var(--om-accent-ink); }
  .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-wx-day { grid-template-columns: 5.5rem 24px 1fr auto; gap: var(--om-3); font-size: var(--om-fs-sm); }
  .om-wx-now { flex-direction: column; text-align: center; gap: var(--om-4); }
  .om-today-wx { flex-wrap: wrap; }
  .om-today-wx__more { margin-left: 0; width: 100%; }
  .dtb_search_form .search_fields.search_fields--primary { grid-template-columns: 1fr; }
  .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; }
}

/* Between the burger breakpoint and a comfortably wide desktop, the logo, six
   nav doors and the CTA are wider than the viewport, and the CTA was pushed off
   the right edge. Shed the least important width first — the CTA's trailing
   words, then the secondary text link, then the nav's generous gaps — so the
   navigation itself survives as long as possible before collapsing to a burger. */
@media (max-width: 1280px) {
  .om-header__cta-rest { display: none; }
  .om-header__bar { gap: var(--om-4); }
  .om-nav, .om-nav ul { gap: var(--om-4); }
}
@media (max-width: 1100px) {
  .om-header__bar { gap: var(--om-3); }
  .om-nav, .om-nav ul { gap: var(--om-3); }
}
@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-article__layout { grid-template-columns: 1fr; gap: var(--om-6); }
  .om-article__aside { position: static; }
  .om-adv__split { grid-template-columns: 1fr; }
  .om-adv__aside { position: static; }
  .dtb2-claim__form, .dtb2-dash__form { grid-template-columns: 1fr; }
  /* Stack the sign-in field above its button rather than squeezing both. */
  .toolbox-signin__row { flex-direction: column; }
  .toolbox-signin__btn { width: 100%; }
  .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); }
}