:root {
  color-scheme: light;
  --stage:#000; --header-top:#3a3a3a; --header-mid:#262626; --header-bottom:#1a1a1a;
  --slate:#abbebe; --slate-edge:#8ca3a3; --field:#999; --surface:#f2f2e6;
  --row:#fff; --row-alt:#fbfbf4; --ink:#333; --heading:#201a10; --muted:#6c6c5c;
  --rule:#cfcfc0; --control-border:#878775; --link-hover:#000099; --nav-ink:#223333;
  --nav-emphasis:#733700; --ember:#cc6600; --ember-light:#e68a2e; --ember-dark:#a85200;
  --gold:#c9a227;
  --action-mid:#954900; --action-bottom:#7e3e00; --header-text:#ddd;
  --headline-accent:#a85200; --nav-pipe:#7c9494; --focus-inner:#000; --focus-outer:#fff;
}
* { box-sizing:border-box; }
html { background:var(--stage); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; }
body { margin:0; min-width:0; background:var(--stage); color:var(--ink); font-size:13px; font-weight:400; line-height:1.5; }
a { color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
a:hover { color:var(--link-hover); }
a:focus-visible { outline:2px solid var(--focus-inner); outline-offset:2px; box-shadow:0 0 0 4px var(--focus-outer); }
h1,h2,h3,p { overflow-wrap:anywhere; }
h1,h2,h3 { color:var(--heading); }
h1 { margin:0; font-family:Georgia,"Times New Roman",serif; font-size:30px; font-weight:700; line-height:1.15; }
h1 small { display:block; margin-bottom:4px; color:var(--muted); font:400 11px/1.3 Verdana,Geneva,Arial,Helvetica,sans-serif; letter-spacing:.04em; }
h1 span { color:var(--headline-accent); }
h2 { margin:0 0 8px; font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:14px; font-weight:700; line-height:1.5; }
p { margin:8px 0 0; }
.skip-link { position:fixed; z-index:100; top:8px; left:8px; padding:10px 14px; background:#fff; color:#000; font-size:13px; font-weight:700; line-height:1.5; transform:translateY(-180%); }
.skip-link:focus { transform:none; }
.site-shell { container:shell / inline-size; width:min(1194px,100%); margin:0 auto; background:var(--field); }
.site-header { position:relative; display:flex; height:92px; align-items:center; justify-content:space-between; gap:24px; padding:0 18px; border-bottom:3px solid var(--ember); background:linear-gradient(to bottom,var(--header-top) 0%,var(--header-mid) 55%,var(--header-bottom) 100%); }
.wordmark { flex:none; color:var(--header-text); font:700 30px/1.5 Georgia,"Times New Roman",serif; letter-spacing:.5px; text-decoration:none; text-shadow:0 1px 0 #000,0 2px 3px rgba(0,0,0,.6); }
.wordmark:hover { color:var(--header-text); }
.wordmark-local { color:var(--ember-light); }
.tagline { margin:0; color:#b8b8b8; font-size:11px; font-style:italic; font-weight:400; line-height:1.5; text-align:right; }
.site-nav { display:flex; min-height:39px; align-items:center; flex-wrap:wrap; padding:5px 18px; border-bottom:1px solid var(--slate-edge); background:var(--slate); }
/* ULB-235: 44px, the tap-target floor. Measured 28px at 375px -- the only such failure on the site;
   card links (104px) and the view switch (44px) already passed. */
.site-nav a { display:inline-flex; min-height:44px; align-items:center; color:var(--nav-ink); font-size:12px; font-weight:700; line-height:1.5; text-decoration:none; }
.site-nav a:hover,.site-nav a[aria-current="page"] { color:var(--nav-emphasis); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
/* ULB-285: this rule used to be `.site-nav > span`, which selected a separator BY POSITION. The nav's
   coming-soon marker wrapper is also a direct-child span, so it inherited the pipe's grey and its 9px side
   margins and read as part of a separator -- the exact risk ULB-285's body names. The selector now says what a
   separator IS, and the marker gets its own rule below. scripts/nav-marker-layout.test.mjs measures the
   marker's computed colour and margin in a real browser, because a selector change like this is invisible to a
   diff review and to any grep over the HTML. */
.site-nav > span[aria-hidden="true"] { margin:0 9px; color:var(--nav-pipe); }
/* The marker sits beside its link on the same line, in the link's own colour, not the pipe's. */
.site-nav .soon--nav { display:inline-flex; align-items:center; margin:0; color:var(--nav-ink); }
.site-nav .soon--nav .soon__mark { color:var(--nav-ink); }
.scene-ticker { display:grid; height:26px; grid-template-columns:max-content minmax(0,1fr); border-bottom:1px solid var(--ember-dark); background:linear-gradient(to bottom,var(--ember-light),var(--ember)); color:#2a1400; font-size:11px; font-weight:700; line-height:1.5; }
.scene-ticker__label { display:flex; height:26px; align-items:center; padding:0 10px; background:#2a1400; color:var(--ember-light); letter-spacing:.5px; white-space:nowrap; }
.scene-ticker__message { display:flex; min-width:0; height:26px; align-items:center; padding:0 10px; overflow:visible; white-space:nowrap; }
.directory-layout { display:grid; grid-template-areas:"rail main"; grid-template-columns:195px minmax(0,1fr); gap:16px; padding:16px; background:var(--field); }
.directory-main { grid-area:main; min-width:0; }
.directory-rail { display:flex; grid-area:rail; min-width:0; flex-direction:column; gap:14px; }
.directory-main > * + * { margin-top:16px; }
.portal-panel,.box { border:1px solid var(--rule); background:var(--surface); }
.box > h2 { margin:0; padding:5px 9px; border-bottom:1px solid var(--slate-edge); background:var(--slate); color:var(--nav-ink); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:12px; font-weight:700; line-height:1.5; }
.hero-panel { padding:22px 22px 20px; }
.hero-panel > p:not(.action-row) { max-width:590px; }
.action-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:16px; }
.button { display:inline-flex; min-height:36px; align-items:center; justify-content:center; padding:7px 14px; border:1px solid var(--ember-dark); border-radius:3px; font-size:12px; font-weight:700; line-height:1.5; text-align:center; text-decoration:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(0,0,0,.4); }
.button--primary { background:linear-gradient(to bottom,var(--ember-dark),var(--action-mid),var(--action-bottom)); color:#fff8ee; }
.button--primary:hover { background:linear-gradient(to bottom,var(--action-mid),var(--action-bottom),#733700); color:#fff8ee; }
.button--secondary { border-color:var(--slate-edge); background:linear-gradient(to bottom,#b8caca,var(--slate),var(--slate-edge)); color:#1e2b2b; }
.button--secondary:hover { color:#000099; }
.spotlight-panel { display:grid; grid-template-columns:max-content 64px minmax(0,1fr); align-items:stretch; gap:14px; padding:14px; }
.spotlight-label { align-self:start; padding:4px 8px; background:var(--ember-dark); color:#fff8ee; font-size:10px; font-weight:700; line-height:1.5; }
.spotlight-panel h2 { font-size:15px; line-height:1.5; }
.spotlight-panel p { font-size:12px; line-height:1.5; }
.spotlight-panel a { font-size:11px; line-height:1.5; }
.entity-tile { display:grid; width:104px; aspect-ratio:1; place-items:center; border:2px solid #fff; background:linear-gradient(135deg,#4b4b4b,#292929); color:#d8d0ca; font:700 42px/1.5 Georgia,"Times New Roman",serif; box-shadow:0 2px 5px rgba(0,0,0,.5); }
.entity-tile--small { width:64px; aspect-ratio:auto; align-self:stretch; font-size:22px; line-height:1.5; }
.directory-list { margin:0; padding:0; border:1px solid var(--rule); background:var(--row); list-style:none; }
.directory-list__item { margin:0; padding:0; background:var(--row); }
.directory-list__item:nth-child(even) { background:var(--row-alt); }
.directory-list__item + .directory-list__item { border-top:1px dotted var(--rule); }
.directory-row { display:grid; min-width:0; grid-template-columns:56px minmax(0,1fr); gap:14px; padding:14px; }
.directory-row__art { width:56px; height:56px; aspect-ratio:1; object-fit:contain; align-self:start; font-size:20px; line-height:1.5; }
.directory-row__body { min-width:0; }
.directory-row__name { margin:0; font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:14px; font-weight:700; line-height:1.5; }
.directory-row__name a { display:inline-flex; min-width:24px; min-height:44px; align-items:center; }
.directory-row__meta,.directory-row__rating { margin:0; color:var(--muted); font-size:11px; font-weight:400; line-height:1.5; }
.directory-row__summary { margin:3px 0 0; font-size:12px; font-weight:400; line-height:1.5; }
.directory-row__rating { margin-top:4px; }
.directory-row__stars { color:var(--gold); letter-spacing:.04em; }
.directory-views { display:flex; align-items:center; flex-wrap:wrap; gap:0 14px; margin-top:12px; }
.directory-views__label { color:var(--muted); font-size:12px; font-weight:700; line-height:1.5; }
.directory-main .directory-views__list { display:flex; flex-wrap:wrap; gap:0 16px; margin:0; padding:0; list-style:none; }
.directory-views a { display:inline-flex; min-height:44px; align-items:center; font-size:12px; font-weight:400; line-height:1.5; }
.directory-views a[aria-current="true"] { border-bottom:2px solid var(--ember-dark); font-weight:700; text-decoration:none; }
/* ULB-245: four columns. Three was not a design choice -- the 195px rail starved the main column to
   679px and three was what fit. The rail was gone (ULB-233), main was the full ~922px, and four cards at
   ~223px each with the existing 10px gaps fit without touching the narrow container-query overrides.
   ULB-308 put the rail back beside the grid (shell 1194px, main ~951px, cards ~222px), which is why 700-999px needs
   the three-column step further down. */
.directory-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:12px 0 0; padding:0; list-style:none; }
.directory-card { min-width:0; padding:12px 10px; border:1px solid var(--rule); background:var(--row); text-align:center; overflow-wrap:anywhere; }
.directory-card__name { margin:0; font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:13px; font-weight:700; line-height:1.5; }
.directory-card__name a { display:flex; min-height:104px; align-items:center; flex-direction:column; gap:8px; }
.directory-card__art { width:104px; height:104px; object-fit:contain; }
/* ULB-245: the card's category line. Muted and smaller than the name, because it is the SECOND thing read
   -- the name still wins the card. `font-weight:400` because `.directory-card__name` sets 700 and these
   paragraphs sit inside the card, not inside the name. */
.directory-card__meta { color:var(--muted); font-size:11px; font-weight:400; line-height:1.5; }
.directory-main .directory-card p { margin:4px 0 0; }
.directory-main .directory-card__count,.directory-main .directory-soon__count { color:var(--muted); }
.directory-soon { margin:10px 0 16px; padding:0; list-style:none; }
.directory-soon__item { display:grid; grid-template-columns:72px minmax(0,1fr); gap:12px; padding:10px 0; border-bottom:1px dotted var(--rule); overflow-wrap:anywhere; }
.directory-date { display:flex; min-height:72px; align-items:center; justify-content:center; flex-direction:column; padding:4px; border:1px solid var(--rule); background:var(--row); color:var(--ink); text-align:center; }
.directory-date__weekday,.directory-date__month,.directory-date__year { font-size:11px; font-weight:700; line-height:1.3; text-transform:uppercase; }
.directory-date__day { font:700 24px/1.2 Georgia,"Times New Roman",serif; }
.directory-soon__name { margin:0; font-size:13px; font-weight:700; line-height:1.5; }
.directory-soon__name a { display:inline-flex; min-height:44px; align-items:center; }
.directory-main .directory-soon__item p { margin:0; }
.directory-chips { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 0; padding:0; list-style:none; }
.directory-chips a { display:inline-flex; min-width:44px; min-height:44px; align-items:center; justify-content:center; padding:0 12px; border:1px solid var(--rule); background:var(--row); font-size:12px; font-weight:400; line-height:1.5; }
.directory-main .directory-grid > li,.directory-main .directory-list > li,.directory-main .directory-soon > li,.directory-main .directory-chips > li,.directory-main .directory-views__list > li { margin:0; }
.directory-rail > .box > p { margin:0; padding:8px 10px 0; font-size:12px; font-weight:400; line-height:1.5; }
.directory-rail > .box > p:last-child { padding-bottom:10px; }
.button.directory-cta { width:100%; min-height:44px; }
.category-panel,.build-panel { padding:14px; }
.category-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin:10px 0 0; padding:0; list-style:none; }
.category-grid li { min-width:0; border:1px solid var(--rule); background:var(--row); }
.category-grid a { display:flex; min-height:104px; align-items:center; justify-content:center; flex-direction:column; gap:5px; padding:10px 6px; color:var(--ink); text-align:center; text-decoration:none; }
.category-grid a:hover strong { color:var(--link-hover); text-decoration:underline; }
.category-grid strong { font-size:11px; font-weight:700; line-height:1.5; }
.category-grid small { color:var(--muted); font-size:10px; font-weight:400; line-height:1.5; }
.category-glyph { display:grid; width:32px; height:32px; place-items:center; border:1px solid var(--slate-edge); border-radius:50%; background:linear-gradient(to bottom,#d6e2e2,#abbebe,#8ca3a3); color:#223333; box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.35); }
.category-glyph svg { width:17px; height:17px; fill:#1e2b2b; }
.build-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:14px 0 0; padding:0; list-style:none; }
.build-list li { display:grid; grid-template-columns:24px minmax(0,1fr); gap:8px; }
.build-list li > span { display:grid; width:24px; height:24px; place-items:center; border-radius:50%; background:var(--ember-dark); color:#fff8ee; font-size:11px; font-weight:700; line-height:1.5; }
.build-list strong { font-size:12px; font-weight:700; line-height:1.5; }
.build-list p { color:var(--muted); font-size:11px; font-weight:400; line-height:1.5; }
.fact-list { margin:0; padding:8px 10px; }
.fact-list div { display:grid; grid-template-columns:minmax(0,1fr); gap:2px; padding:6px 0; border-bottom:1px dotted var(--rule); }
.fact-list div:last-child { border-bottom:0; }
.fact-list dt { color:var(--muted); font-size:12px; font-weight:400; line-height:1.5; }
.fact-list dd { margin:0; font-size:12px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }
.rail-links,.status-list { margin:0; padding:0; list-style:none; }
.rail-links li { padding:8px 10px; border-bottom:1px dotted var(--rule); }
.rail-links li:last-child { border-bottom:0; }
.rail-links a { display:inline-block; font-size:12px; font-weight:400; line-height:1.5; }
.rail-links span { display:block; color:var(--muted); font-size:12px; font-weight:400; line-height:1.5; }
/* ULB-276: the coming-soon marker (functions/shared/comingSoon.ts, public/coming-soon.js).
   SPECIFICITY IS THE POINT in the rail. `.rail-links span` above is (0,1,1) and is a descendant selector, so it
   captures the .soon wrapper and the .soon__tip span. A bare `.soon__tip { display:none }` at (0,1,0) LOSES to it
   and the rail tooltip would be permanently visible. So: `.rail-links .soon__tip` (0,2,0) beats `.rail-links span`;
   `.soon:hover .soon__tip` and friends (0,3,0) beat that and open it; the Esc-dismissed rule (0,4,0) beats the open
   rule. Do not "simplify" these into fewer selectors: scripts/coming-soon.test.mjs pins each one. */
.soon { position:relative; }
.soon--grid { display:block; }
.rail-links .soon--rail { display:inline-flex; align-items:center; color:inherit; }
.profile-links .soon--explore { display:flex; align-items:center; justify-content:space-between; min-height:44px; }
.profile-links .soon--explore a { flex:1 1 auto; display:flex; align-items:center; min-height:44px; padding:0; }
.profile-links .soon + a,.profile-links a + .soon,.profile-links .soon + .soon { border-top:1px dotted var(--rule); }
.soon__mark { flex:none; min-width:44px; min-height:44px; margin:0; padding:0; border:0; background:transparent; color:var(--ink); font:700 16px/1 Verdana,Geneva,Arial,Helvetica,sans-serif; cursor:pointer; }
.soon__mark:focus-visible { outline:2px solid var(--focus-inner); outline-offset:-4px; box-shadow:inset 0 0 0 4px var(--focus-outer); }
.soon--grid .soon__mark { position:absolute; top:0; right:0; }
.soon__tip { display:none; position:absolute; z-index:20; top:100%; left:0; width:max-content; max-width:min(260px,calc(100vw - 32px)); padding:8px 10px; border:1px solid var(--control-border); background:var(--surface); color:var(--ink); font-size:12px; font-weight:400; line-height:1.5; text-align:left; text-decoration:none; }
.soon--grid .soon__tip { top:44px; left:auto; right:0; }
.rail-links .soon__tip { display:none; position:absolute; color:var(--ink); }
/* A later positioned sibling paints over an earlier absolute tooltip, so the open one is raised (a
   getBoundingClientRect check cannot see this; it is verified by screenshot in docs/cards/ULB-276/MEASUREMENTS.md). */
.soon:hover,.soon:focus-within,.soon[data-open] { z-index:30; }
.soon:hover .soon__tip,.soon:focus-within .soon__tip,.soon[data-open] .soon__tip { display:block; }
.soon[data-dismissed][data-soon] .soon__tip { display:none; }
/* ULB-274: the profile placeholder group (functions/shared/profileSections.ts). ONE trailing panel of slim rows, so a profile
   with eight sections not built yet reads as a short list, not a wall of boxes. Only existing tokens; the explicit dark twins
   below exist because scripts/profile-sections.test.mjs (T13) requires every selector here in both dark blocks. */
.profile-soon-group { padding:12px 18px 6px; }
.profile-soon-label { margin:0 0 4px; color:var(--muted); font-size:12px; font-weight:400; line-height:1.5; }
.profile-soon-list { margin:0; padding:0; list-style:none; }
.profile-soon-row { margin:0; border-top:1px dotted var(--rule); }
.soon--section { display:flex; align-items:center; justify-content:flex-start; min-height:44px; }
.profile-soon-name { margin:0; color:var(--muted); font-size:13px; font-weight:700; line-height:1.5; }
.soon--section .soon__tip { top:calc(100% - 6px); left:0; }
.status-list { padding:6px 10px 10px; }
.status-list li { padding:5px 0; border-bottom:1px dotted var(--rule); font-size:12px; font-weight:400; line-height:1.5; }
.status-list li:last-child { border-bottom:0; }
.site-footer { padding:14px 18px; border-top:1px solid var(--slate-edge); background:var(--slate); color:var(--nav-ink); font-size:11px; font-weight:400; line-height:1.5; }
.site-footer__tools { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 16px; }
.site-footer nav { display:flex; flex-wrap:wrap; gap:6px 9px; }
.site-footer a { color:var(--nav-ink); }
.site-footer p { margin-top:10px; }
.appearance-toggle { min-width:92px; min-height:44px; padding:7px 12px; border:1px solid var(--slate-edge); border-radius:2px; background:linear-gradient(to bottom,#d6e2e2,#abbebe,#8ca3a3); color:#1e2b2b; font:700 11px/1.5 Verdana,Geneva,Arial,Helvetica,sans-serif; box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.35); cursor:pointer; }
.appearance-toggle:hover { color:#000099; }
.appearance-toggle:focus-visible { outline:2px solid var(--focus-inner); outline-offset:2px; box-shadow:0 0 0 4px var(--focus-outer); }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.profile-layout { align-items:start; }
.error-layout,.profile-solo { grid-template-areas:"main"; grid-template-columns:minmax(0,1fr); }
/* ULB-227 follow-up -- the legal pages. Every other page is a grid of panels on the grey --field;
   these two are the only long-form reading surfaces on the site, so the field stops at the chrome and
   the document is a single sheet of --row. That also fixes a measured AA failure: --ink on --field is
   4.43:1 in light mode, and the legal pages were the only ones setting body text directly on it --
   the contrast cells all read --row/--row-alt, so nothing saw it. On --row it is 12.63:1.
   Every colour here is an existing scheme-aware token, so there is no dark rule to land twice.
   These selectors must stay BELOW .profile-solo: all three column declarations are specificity
   (0,1,0) and source order is what makes the measure win. */
.legal-page { grid-template-columns:minmax(0,500px); justify-content:center; row-gap:0; padding:30px 24px 40px; background:var(--row); }
.legal-page h1 { padding-bottom:13px; border-bottom:2px solid var(--headline-accent); font-size:32px; }
/* The effective date, set as a dateline rather than as prose. It is the region's first paragraph and
   cannot carry a class, so it is reached structurally; the region allows no attribute. One effective
   date on the page, never restated in the chrome. */
.legal-page > h1 + p { margin:0; padding:11px 0 0; color:var(--muted); font-family:Verdana,Geneva,Arial,Helvetica,sans-serif; font-size:11px; font-weight:400; line-height:1.5; letter-spacing:.06em; }
.legal-page > h1 + p strong { color:var(--heading); }
/* Georgia, the house display face, as the body face -- the one real departure from the site's Verdana.
   It is already in the stack, so it costs no web font and no third-party request, and it is the right
   face for 160 lines of policy. Measured at the 500px column: 72 characters a line. */
.legal-page p,.legal-page li { font-family:Georgia,"Times New Roman",serif; font-size:16px; font-weight:400; line-height:1.7; }
.legal-page > p { margin-top:15px; }
/* A hairline above every h2 is the sectioning device: it survives any document length and does not
   depend on numbering. Terms numbers its sections in the approved text and Privacy does not, because
   Terms is a sequence and Privacy is a set of topics -- so no counter is generated here. Generated
   numbers would also render text the stored version text does not contain. */
.legal-page h2 { margin:36px 0 0; padding-top:16px; border-top:1px solid var(--rule); font-family:Georgia,"Times New Roman",serif; font-size:19px; font-weight:700; line-height:1.35; }
.legal-page ul,.legal-page ol { margin:15px 0 0; padding-left:26px; }
.legal-page li + li { margin-top:11px; }
/* The lists are written as term-then-definition ("Your email address. This is the only way..."), so the
   lead strong is the term. --heading is what every other heading on the site uses. */
.legal-page li strong,.legal-page p strong { color:var(--heading); }
.profile-identity { padding:22px; }
/* ULB-233: the directory name filter, the per-locality count, and the two new venue-page blocks. */
.directory-filter { display:flex; margin:12px 0 0; gap:8px; flex-wrap:wrap; align-items:center; }
.directory-filter input { min-width:0; min-height:44px; flex:1 1 220px; padding:8px 10px; border:1px solid var(--control-border); background:var(--surface); color:var(--ink); font-size:14px; font-weight:400; line-height:1.5; }
.directory-filter__status { margin:0; color:var(--muted); font-size:12px; font-weight:400; line-height:1.5; }
.directory-group__count { color:var(--muted); font-size:12px; font-weight:400; line-height:1.5; }
.directory-cta-box { margin-top:16px; padding:12px; }
/* ULB-249: the venue's own contact lines. Every colour is a token that the dark rules above already redefine
   (--ink, --muted), stated explicitly here rather than inherited, because an inherited tint is invisible to a diff review
   (ULB-234). Verified with a real render at phone and desktop widths in both schemes, not by reading this block. */
.venue-contact { margin:10px 0 0; color:var(--ink); font-size:12px; font-weight:400; line-height:1.5; }
.venue-contact > * { display:block; margin:0; font-style:normal; overflow-wrap:anywhere; }
.venue-contact > * + * { margin-top:4px; }
.venue-contact a { color:var(--ink); }
.venue-contact a:hover { color:var(--link-hover); }
.venue-onward { margin:10px 0 0; font-size:12px; font-weight:400; line-height:1.5; }
/* ULB-296: the "More venues in <city>" panel's footer link to that city's whole group on /venues -- the destination the
   identity plate's "More in <city>" link used to hold. `min-height:44px` with `inline-flex` is the tap floor ULB-275 is
   open on: the link this replaces measured 15px, so moving the destination without the floor would have deleted one
   violation and added an unguarded one. The size declarations are on `.panel-onward`, not on `.panel-onward a`, so the
   type-scale census (scripts/verify-marketing.test.mjs) needs exactly one new row. */
.panel-onward { margin:10px 0 0; font-size:12px; font-weight:400; line-height:1.5; }
.panel-onward a { display:inline-flex; min-height:44px; align-items:center; }
.venue-claim { margin-top:16px; padding:12px; }
.venue-claim h2 { margin:0 0 6px; font-size:14px; }
.venue-claim p { margin:0 0 8px; font-size:12px; font-weight:400; line-height:1.5; }
.venue-contact-box p { margin:0 0 8px; font-size:12px; font-weight:400; line-height:1.5; }
.profile-identity h1 { font-size:28px; }
.profile-meta { margin-bottom:12px; color:var(--muted); font-size:12px; font-weight:400; line-height:1.5; }
.status-badge { display:inline-block; margin-top:8px; padding:3px 8px; border:1px solid var(--control-border); background:var(--row-alt); color:var(--ink); font-size:10px; font-weight:700; line-height:1.5; }
.profile-section { padding:16px; }
.profile-section ul { margin:10px 0 0; padding-left:22px; }
.profile-section p,.profile-section li,.beta-box p { font-size:12px; font-weight:400; line-height:1.5; }
.profile-section li + li { margin-top:6px; }
.show-list { margin:10px 0 0; padding:0; list-style:none; }
.show { padding:9px 0; border-bottom:1px dotted var(--rule); overflow-wrap:anywhere; }
.show p { margin:0; }
.show-attribution { color:var(--muted); font-size:10px!important; }
.source-attribution { color:var(--muted); font-size:10px!important; }
.show-month { margin:12px 0 0; font-size:13px; font-weight:700; line-height:1.5; }
.show-when .status-badge { margin:0 4px 0 0; }
.licence-text { margin:10px 0 0; padding:12px; border:1px solid var(--rule); background:var(--row); font-size:11px; line-height:1.5; overflow-x:auto; text-wrap-mode:wrap; overflow-wrap:anywhere; }
.profile-table { width:100%; margin-top:12px; border-collapse:collapse; table-layout:fixed; font-size:12px; font-weight:400; line-height:1.5; }
.profile-table th,.profile-table td { padding:9px 8px; border-bottom:1px dotted var(--rule); text-align:left; overflow-wrap:anywhere; }
.profile-table th { color:var(--muted); font-size:10px; font-weight:700; line-height:1.5; letter-spacing:.04em; text-transform:uppercase; }
.profile-table tbody tr:nth-child(odd) { background:var(--row); }
.profile-table tbody tr:nth-child(even) { background:var(--row-alt); }
.beta-box { padding:14px; }
.beta-box .button { margin-top:10px; }
.signup-panel { padding:16px; }
.signup-panel > p { font-size:12px; font-weight:400; line-height:1.5; }
.signup-form { display:grid; max-width:420px; gap:12px; margin-top:12px; }
.signup-form label { display:block; color:var(--heading); font-size:12px; font-weight:700; line-height:1.5; }
.signup-form input { width:100%; min-height:36px; margin-top:4px; padding:6px 8px; border:1px solid var(--control-border); border-radius:2px; background:var(--row); color:var(--ink); font:400 13px/1.5 Verdana,Geneva,Arial,Helvetica,sans-serif; }
.signup-form input:focus-visible,.signup-form .button:focus-visible { outline:2px solid var(--focus-inner); outline-offset:2px; box-shadow:0 0 0 4px var(--focus-outer); }
.signup-form .button { justify-self:start; cursor:pointer; }
.signup-hint { margin:2px 0 0; color:var(--muted); font-size:11px; font-weight:400; line-height:1.5; }
.signup-status { min-height:18px; margin:0; font-size:12px; font-weight:700; line-height:1.5; }
.profile-art { width:100%; max-width:195px; }
.profile-links { padding:8px 10px; }
.profile-links p,.profile-links a { font-size:12px; font-weight:400; line-height:1.5; }
.profile-links a { display:block; padding:6px 0; }
.profile-links a + a { border-top:1px dotted var(--rule); }
@container shell (max-width:699px) {
  .directory-layout { grid-template-areas:"main" "rail"; grid-template-columns:minmax(0,1fr); }
  .directory-rail { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .category-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* ULB-308: the directory now sits beside the 195px rail, so its column is the shell less 32px padding, the rail and
   the 16px gap: 951px at a 1432px viewport, 477px at 720. Four columns fit from a 1000px shell (cards 173px and up)
   but not below it: measured at 720px a card is 103px against a 104px logo tile, which overflows it. 700-999px is the
   range where the rail is beside the grid (the rail stacks under 700), so it gets three columns (135px at 700). */
@container shell (min-width:700px) and (max-width:999px) {
  .directory-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@container shell (max-width:639px) {
  .tagline { display:none; }
}
@container shell (max-width:538px) {
  .scene-ticker { height:auto; min-height:74px; grid-template-columns:minmax(0,1fr); grid-template-rows:26px minmax(48px,auto); }
  .scene-ticker__label { width:100%; }
  .scene-ticker__message { height:auto; min-height:48px; align-items:center; padding:6px 10px; overflow:visible; overflow-wrap:anywhere; white-space:normal; line-height:1.5; }
}
@container shell (max-width:479px) {
  .site-header { align-items:flex-start; justify-content:center; flex-direction:column; gap:5px; padding:16px 12px; }
  .site-nav { padding-inline:10px; }
  .site-nav > span[aria-hidden="true"] { margin-inline:6px; }
  /* ULB-235: 16px, the side-gutter floor. Measured main.x = 10 at 375px before this. */
  .directory-layout { padding:16px; gap:10px; }
  .directory-main > * + * { margin-top:10px; }
  .directory-rail { display:flex; }
  .hero-panel,.profile-identity { padding:16px; }
  /* ULB-235's 16px side-gutter floor, restated for the sheet because .legal-page overrides
     .directory-layout's padding. Guarded: see "the legal sheet keeps the 16px side gutter". */
  .legal-page { padding:22px 16px 28px; }
  .legal-page h1 { font-size:26px; }
  .legal-page h2 { margin-top:30px; font-size:17px; }
  .spotlight-panel { grid-template-columns:minmax(0,1fr); }
  .spotlight-label { justify-self:start; }
  .entity-tile--small { width:64px; height:64px; aspect-ratio:1; align-self:start; }
  .category-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .build-list { grid-template-columns:1fr; }
  .directory-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (prefers-color-scheme:dark) {
  :root:not([data-appearance]) { color-scheme:dark; --slate:#263a3a; --slate-edge:#1a2a2a; --field:#111211; --surface:#20211d; --row:#272820; --row-alt:#2d2e26; --ink:#f2f2e6; --heading:#fff8ee; --muted:#c9c9ba; --rule:#8c8c78; --control-border:#8c8c78; --link-hover:#8db7ff; --nav-ink:#f2f2e6; --nav-emphasis:#f2a04c; --headline-accent:#e68a2e; --nav-pipe:#c9c9ba; }
  :root:not([data-appearance]) .category-glyph { border-color:var(--rule); }
  :root:not([data-appearance]) .soon__tip { border-color:var(--control-border); background:var(--surface); color:var(--ink); }
  :root:not([data-appearance]) .soon__mark { color:var(--ink); }
  :root:not([data-appearance]) .soon__mark:focus-visible { outline-color:var(--ink); }
  :root:not([data-appearance]) .profile-soon-label,:root:not([data-appearance]) .profile-soon-name { color:var(--muted); }
  :root:not([data-appearance]) .profile-soon-row { border-color:var(--rule); }
  :root:not([data-appearance]) .button--secondary { background:linear-gradient(to bottom,#b8caca,#abbebe,#8ca3a3); color:#1e2b2b; }
  /* ULB-235: .entity-tile had NO dark override anywhere -- four rules existed (base, --small, a container
     query, forced-colors) and none redefined colour. Measured in dark: the gradient sat at 1.02:1 and 1.71:1
     against --row #272820 while its hardcoded 2px #fff border sat at 14.89:1, so every card showed a bright
     white rectangle outlining a void. This is the inherited-colour class a diff review cannot see.
     Stops chosen by computing contrast, not by eye: label #d8d0ca clears AA on both (4.90, 7.46), the tile
     reads as an object against the row (2.00, 1.31), and --rule as the border is visible at 4.35 rather than
     shouting at 14.89. */
  :root:not([data-appearance]) .entity-tile { border-color:var(--rule); background:linear-gradient(135deg,#55564a,#3a3b31); }
}
:root[data-appearance="light"] { color-scheme:light; }
:root[data-appearance="dark"] { color-scheme:dark; --slate:#263a3a; --slate-edge:#1a2a2a; --field:#111211; --surface:#20211d; --row:#272820; --row-alt:#2d2e26; --ink:#f2f2e6; --heading:#fff8ee; --muted:#c9c9ba; --rule:#8c8c78; --control-border:#8c8c78; --link-hover:#8db7ff; --nav-ink:#f2f2e6; --nav-emphasis:#f2a04c; --headline-accent:#e68a2e; --nav-pipe:#c9c9ba; }
:root[data-appearance="dark"] .category-glyph { border-color:var(--rule); }
:root[data-appearance="dark"] .soon__tip { border-color:var(--control-border); background:var(--surface); color:var(--ink); }
:root[data-appearance="dark"] .soon__mark { color:var(--ink); }
:root[data-appearance="dark"] .soon__mark:focus-visible { outline-color:var(--ink); }
:root[data-appearance="dark"] .profile-soon-label,:root[data-appearance="dark"] .profile-soon-name { color:var(--muted); }
:root[data-appearance="dark"] .profile-soon-row { border-color:var(--rule); }
:root[data-appearance="dark"] .button--secondary { background:linear-gradient(to bottom,#b8caca,#abbebe,#8ca3a3); color:#1e2b2b; }
/* ULB-235: the explicit-choice twin of the rule in the prefers-color-scheme block above. Both must exist:
   one serves a visitor who never touched the toggle, the other a visitor who chose dark. */
:root[data-appearance="dark"] .entity-tile { border-color:var(--rule); background:linear-gradient(135deg,#55564a,#3a3b31); }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto; } }
@media (forced-colors:active) {
  .portal-panel,.box,.category-grid li,.entity-tile,.status-badge,.button,.appearance-toggle,.signup-form input,.directory-list,.directory-card,.directory-soon__item,.directory-date,.directory-chips a,.soon__tip,.soon__mark:focus-visible { border:1px solid CanvasText; }
  .directory-list__item + .directory-list__item { border-top:1px dotted CanvasText; }
  .directory-row__stars { color:CanvasText; }
  .site-nav a[aria-current="page"] { outline:1px solid CanvasText; }
  .directory-views a[aria-current="true"] { outline:1px solid CanvasText; }
  .category-glyph svg { fill:CanvasText; }
}
/* ULB-302: at desktop widths a List row is two columns (name, then the line that describes it) instead of a
   stack that leaves most of a 1126px row empty. Below 700px it stays the stacked form above. No font
   declarations: the type-scale census counts top-level font rules. */
@container shell (min-width:700px) {
  .directory-row { align-items:center; padding-block:10px; }
  .directory-row__art { align-self:center; }
  .directory-row__body { display:grid; grid-auto-flow:column; grid-template-columns:minmax(0,3fr); grid-auto-columns:minmax(0,2fr); align-items:center; column-gap:14px; }
}