/* Geist 1.8.2 (SIL OFL 1.1, assets/fonts/OFL.txt), self-hosted: Latin subset; the sans file is the variable font
   limited to weights 400-600. Cached for a year; a new version gets a new file name. */
@font-face { font-family:'Geist'; font-style:normal; font-weight:400 600; font-display:swap; src:url('/assets/fonts/geist-1.8.2-latin.woff2') format('woff2'); }
@font-face { font-family:'Geist Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/assets/fonts/geist-mono-1.8.2-500-latin.woff2') format('woff2'); }
:root {
  --ctl: 32px; /* control height: no button is taller than the weather button in the nav */
  --background:#fff; --background-subtle:#fafafa; --foreground:#171717;
  --gray-100:#f2f2f2; --gray-200:#ebebeb; --gray-300:#e0e0e0; --gray-400:#c9c9c9;
  --gray-500:#a8a8a8; --gray-600:#8f8f8f; --gray-700:#666; --gray-800:#444; --gray-900:#2e2e2e; --gray-1000:#171717;
  --blue:#0070f3; --blue-subtle:#e6f0fd; --blue-text:#0050b3;
  --brand:#0b6b86; --brand-fg:#fff; --brand-subtle:#e4f3f7;   /* Ohio River teal */
  --c-news:#0b6b86; --c-safety:#c4262c; --c-institution:#5b4bd6; --c-events:#c2410c; --c-obits:#64748b; --c-jobs:#1d4ed8; --c-deals:#136f35; --c-classifieds:#a16207;
  --h-music:#7b3fe4; --h-food:#c2410c; --h-family:#136f35; --h-sports:#1d4ed8; --h-arts:#be185d; --h-community:#0b6b86; --h-other:#64748b; --red:#e5484d; --red-strong:#c4262c; --amber:#f5a623; --green:#45a557;
  --border:var(--gray-300); --text-muted:var(--gray-700);
  --radius-sm:6px; --radius-md:6px; --radius-lg:6px; --radius-xl:6px;
  --shadow-md:0 4px 12px rgba(0,0,0,.08); --shadow-lg:0 12px 32px rgba(0,0,0,.12);
  --ease:cubic-bezier(.4,0,.2,1); --duration-fast:100ms; --duration-base:150ms;
  --font-sans:"Geist",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
[data-theme="dark"] {
  --background:#0a0a0a; --background-subtle:#111; --foreground:#ededed;
  --gray-100:#1a1a1a; --gray-200:#1f1f1f; --gray-300:#2e2e2e; --gray-400:#454545;
  --gray-500:#878787; --gray-600:#a1a1a1; --gray-700:#b4b4b4; --gray-800:#d4d4d4; --gray-900:#e3e3e3; --gray-1000:#ededed;
  --blue:#3291ff; --blue-subtle:#10233c; --blue-text:#6cb0ff;
  --brand:#4cc3dd; --brand-fg:#04222b; --brand-subtle:#0c2a33;
  --c-news:#4cc3dd; --c-safety:#ff6369; --c-institution:#a79bff; --c-events:#ff9f6b; --c-obits:#a1aab8; --c-jobs:#6cb0ff; --c-deals:#5dc36f; --c-classifieds:#f7b955;
  --h-music:#b99cff; --h-food:#ff9f6b; --h-family:#5dc36f; --h-sports:#6cb0ff; --h-arts:#ff7eb6; --h-community:#4cc3dd; --h-other:#a1aab8; --red:#ff6369; --red-strong:#ff6369; --amber:#f7b955; --green:#5dc36f;
  --shadow-md:0 4px 12px rgba(0,0,0,.5); --shadow-lg:0 12px 32px rgba(0,0,0,.6);
}
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--background); color:var(--foreground); font:400 14px/20px var(--font-sans); -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; background:none; border:0; padding:0; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.skip { position:absolute; left:16px; top:-48px; z-index:50; min-height:var(--ctl); padding:0 12px; display:inline-flex; align-items:center; border-radius:var(--radius-md); background:var(--foreground); color:var(--background); font-weight:500; }
.skip:focus { top:8px; }
main:focus { outline:none; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* top nav */
.nav { position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--background) 96%, transparent); border-bottom:1px solid var(--border); padding-top:env(safe-area-inset-top); }
.nav-in { max-width:960px; margin:0 auto; padding:0 16px; height:48px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { display:inline-flex; align-items:center; min-height:32px; color:var(--foreground); text-decoration:none; font-size:15px; line-height:24px; font-weight:600; letter-spacing:-.01em; flex:none; }
.brand small { font:500 12px/16px var(--font-sans); color:var(--text-muted); letter-spacing:.01em; }
.wx { position:relative; }
.clk { flex:none; display:inline-flex; align-items:baseline; gap:6px; font-variant-numeric:tabular-nums; font-weight:500; white-space:nowrap; }
.clk small { color:var(--text-muted); font-size:12px; line-height:16px; font-weight:400; }
.brandbox { flex:none; display:flex; align-items:baseline; gap:12px; }
@media (max-width:639px) { .brandbox { flex-direction:column; align-items:flex-start; gap:0; } .clk { font-size:12px; line-height:14px; color:var(--text-muted); font-weight:400; } .clk small { display:none; } .brand { line-height:20px; } }
.wx-btn { display:flex; align-items:center; gap:8px; height:var(--ctl); min-height:var(--ctl); padding:0 10px; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--background); font-weight:500; transition:background var(--duration-fast) var(--ease); }
.wx-btn:hover { background:var(--gray-100); }
.wx-temp { font-family:var(--font-mono); font-size:14px; }
.wx-cond { color:var(--text-muted); }
@media (max-width:479px) { .wx-cond { display:none; } .nav-r { gap:4px; } }
.wx-sk { width:88px; height:16px; border-radius:var(--radius-sm); }
.wx-pop { position:absolute; right:0; top:calc(100% + 8px); width:min(280px, calc(100vw - 32px)); background:var(--background); border:1px solid var(--border); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:8px; opacity:0; transform:translateY(-4px); pointer-events:none; visibility:hidden; transition:opacity var(--duration-base) var(--ease), transform var(--duration-base) var(--ease), visibility 0s linear var(--duration-base); }
.wx-pop.open { opacity:1; transform:none; pointer-events:auto; visibility:visible; transition-delay:0s; }
.wx-head { padding:0 12px 8px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.wx-head b { display:block; font-size:18px; line-height:24px; font-weight:600; letter-spacing:-.01em; }
.wx-head span { color:var(--text-muted); }
.wx-loc { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 12px; min-height:36px; }
.wx-loc button, .wx-pick button { min-height:var(--ctl); padding:0 12px; border-radius:var(--radius-md); font-weight:500; text-align:left; }
.wx-loc .chg { color:var(--blue); }
.wx-pick { display:grid; padding:4px; max-height:60vh; overflow:auto; }
.wx-pick button { display:flex; justify-content:space-between; align-items:center; width:100%; }
.wx-pick button:hover, .wx-loc button:hover { background:var(--gray-100); }
.wx-pick button[aria-current="true"] { background:var(--gray-100); }
.wx-search { margin:4px; min-height:var(--ctl); padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--background); color:var(--foreground); width:calc(100% - 8px); }
.wx-note { padding:8px 12px; color:var(--text-muted); font-size:12px; line-height:16px; }
.wx-row { display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:4px 12px; min-height:32px; border-radius:var(--radius-md); }
.wx-row .d { font-weight:500; }
.wx-row .c { color:var(--text-muted); font-size:12px; line-height:16px; }
.wx-row .t { font-family:var(--font-mono); font-size:12px; line-height:16px; text-align:right; min-width:64px; }
.wx-row .p { display:flex; align-items:center; justify-content:flex-end; gap:3px; font-size:12px; line-height:16px; color:var(--blue); min-width:44px; }

/* nav right + theme */
.nav-r { display:flex; align-items:center; gap:8px; flex:none; }
.icon-btn { width:32px; height:32px; display:grid; place-items:center; border-radius:var(--radius-md); border:0; background:transparent; color:var(--foreground); transition:background var(--duration-fast) var(--ease); }
.icon-btn:hover { background:var(--gray-100); }
.icon-btn svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* banners: breaking news + weather */
.banners { display:grid; gap:8px; margin-bottom:12px; }
.banners:not(:has(.bn:not([hidden]))) { display:none; }
.bn { display:flex; align-items:center; gap:12px; min-height:44px; padding:8px 12px 8px 16px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--background-subtle); min-width:0; }
.bn[hidden] { display:none; }
.bn-break { border-color:var(--red); background:color-mix(in srgb, var(--red) 10%, var(--background)); }
.bn .tag { flex:none; font-size:11px; line-height:16px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.bn-break .tag { color:var(--red); }
.bn .tx { flex:1; min-width:0; }
.bn .tx a { color:var(--foreground); text-decoration:none; font-weight:600; overflow-wrap:anywhere; }
.bn .tx a:hover { text-decoration:underline; }
.bn .tx .by { display:block; color:var(--text-muted); font-size:12px; line-height:16px; }
.bn .tx .by a { color:inherit; font-weight:400; text-decoration:underline; }
.bn .x { flex:none; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-md); color:var(--text-muted); font-size:18px; line-height:1; }
.bn .x:hover { background:var(--gray-100); }
@media (max-width:479px) { .bn { align-items:flex-start; flex-wrap:wrap; } .bn .tag { width:100%; } }

/* jobs */
.job { border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; display:grid; gap:8px; align-content:start; min-width:0; background:var(--background); }
.job-head { display:flex; align-items:center; gap:8px; min-height:28px; flex-wrap:wrap; }
.job-co { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); min-width:0; overflow-wrap:anywhere; }
.job-type { margin-left:auto; }
.job-title { margin:0; font-size:16px; line-height:24px; font-weight:600; overflow-wrap:anywhere; }
.job-pay { font-family:var(--font-mono); font-weight:500; }
.job-apply { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; font-size:12px; line-height:16px; color:var(--text-muted); }
.job-apply a { display:inline-flex; align-items:center; min-height:var(--ctl); padding:0 14px; border-radius:var(--radius-md); background:var(--foreground); color:var(--background); font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.job-apply a:hover { opacity:.88; }
.job-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.job-grid { grid-template-columns:1fr; }
@media (min-width:720px) { .job-grid { grid-template-columns:1fr 1fr; } }

/* money: featured posts, sponsors, newsletter, advertise */
.is-featured { position:relative; border-color:var(--amber) !important; background:color-mix(in srgb, var(--amber) 7%, var(--background)); }
.is-featured { overflow:visible !important; }
.is-featured > .deal-img, .is-featured > .ev-hero { border-radius:calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0; overflow:hidden; }
.ob { border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; display:grid; gap:6px; background:var(--background); min-width:0; }
.ob h3 { margin:0; font-size:18px; line-height:24px; font-weight:600; overflow-wrap:anywhere; }
.ob .ob-home { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }
.ob .ob-svc { font-weight:500; }
/* "Send flowers" on obituaries (public/flowers.js): a quiet text link, never an ad unit */
.ob-flw { display:flex; align-items:baseline; gap:6px; font-size:13px; line-height:18px; color:var(--text-muted); }
.ob-flw a, .card .ob-flw a { display:inline; padding:0; min-height:0; color:inherit; text-decoration:underline; text-underline-offset:2px; }
.ob-flw a:hover { color:var(--text); }
.ob-flw .ob-paid { font-size:12px; }
.rail { display:none; }
@media (min-width:1360px) {
  .rail { display:grid; gap:12px; position:fixed; top:124px; width:160px; align-content:start; z-index:1; }
  .rail-l { left:calc(50% - 480px - 24px - 160px); }
  .rail-r { right:calc(50% - 480px - 24px - 160px); }
}
.rail:empty { display:none !important; }
.rail-ad { display:grid; gap:8px; justify-items:start; padding:12px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--background-subtle); color:var(--foreground); text-align:left; }
.rail-ad:hover { background:var(--gray-100); }
.rail-ad b { font-size:14px; line-height:20px; font-weight:600; overflow-wrap:anywhere; }
.rail-ad .rail-tx { color:var(--text-muted); font-size:12px; line-height:16px; overflow-wrap:anywhere; }
.rail-ad .rail-cta { display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:var(--radius-md); background:var(--foreground); color:var(--background); font-size:12px; font-weight:500; }
.rail-ad .bav { width:40px; height:40px; font-size:13px; }
.rail-house { border-style:dashed; }
/* the in-listing ad card (public/adslots.js): in the flow of the list, never sticky, no images or motion */
.ad-card { display:grid; gap:6px; justify-items:start; align-content:start; min-width:0; padding:16px; border:1px dashed var(--gray-400); border-radius:var(--radius-lg); background:var(--background-subtle); color:var(--foreground); font:inherit; text-align:left; text-decoration:none; }
.ad-card:hover { background:var(--gray-100); }
.ad-card b { font-size:16px; line-height:24px; font-weight:600; overflow-wrap:anywhere; }
.ad-card .ad-tx { color:var(--text-muted); font-size:14px; line-height:20px; overflow-wrap:anywhere; }
.ad-card.ad-sample .ad-note { font-size:12px; line-height:16px; }
.ad-sample .spon-tag { font-style:italic; }
.ad-card .ad-img, .rail-ad .ad-img { display:block; width:100%; height:auto; max-height:180px; object-fit:cover; border-radius:var(--radius-md); background:var(--gray-100); }
.spon .ad-img { flex:none; width:24px; height:24px; object-fit:cover; border-radius:var(--radius-sm, 4px); }
.ad-card .rail-cta { display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:var(--radius-md); background:var(--foreground); color:var(--background); font-size:12px; font-weight:500; }
.spon { display:flex; flex-wrap:nowrap; overflow:hidden; white-space:nowrap; height:var(--ctl); align-items:center; gap:4px 10px; width:100%; min-height:0; padding:0 12px; margin:0 0 12px; border:1px dashed var(--gray-400); border-radius:var(--radius-lg); background:var(--background-subtle); color:var(--foreground); font-size:14px; line-height:20px; text-align:left; }
.spon:hover { background:var(--gray-100); }
.spon-tag { flex:none; font-size:11px; line-height:16px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }
.spon b { font-weight:600; }
.spon-house { color:var(--text-muted); height:var(--ctl); min-height:0; padding-block:0; flex-wrap:nowrap; overflow:hidden; white-space:nowrap; }
.nl { border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; margin-top:24px; display:grid; gap:8px; background:var(--background-subtle); }
.nl h2 { margin:0; font-size:16px; line-height:24px; font-weight:600; }
.nl p { margin:0; color:var(--text-muted); }
.nl form { display:flex; flex-wrap:wrap; gap:8px; }
.nl input[type=email] { flex:1 1 220px; min-width:0; min-height:var(--ctl); padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--background); color:var(--foreground); font:inherit; }
.nl .cl-go, .nl input[type=email] { height:var(--ctl); min-height:0; padding-block:0; }
.notice { display:flex; align-items:center; gap:12px; margin:0 0 16px; padding:8px 12px 8px 16px; min-height:44px; border:1px solid var(--green); border-radius:var(--radius-lg); background:color-mix(in srgb, var(--green) 12%, var(--background)); }
.notice span { flex:1; min-width:0; }
.notice button { flex:none; width:32px; height:32px; font-size:18px; border-radius:var(--radius-md); }
.rates { display:grid; gap:4px; margin:0; padding:0; list-style:none; }
.rates li { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--border); }
.rates li b { font-weight:500; font-variant-numeric:tabular-nums; } /* not the mono face: its wide comma cell read as "$1 ,199" */

/* weather alerts */
.alerts { display:grid; gap:8px; margin-bottom:12px; }
.alerts:empty { display:none; }
.alert { --sev:var(--blue); border:1px solid var(--sev); border-radius:var(--radius-lg); background:color-mix(in srgb, var(--sev) 16%, var(--background)); color:var(--foreground); }
.alert.sev-severe { --sev:var(--red); }
.alert.sev-mod { --sev:var(--amber); }
.alert.sev-minor { --sev:var(--blue); }
.alert .ah { display:flex; align-items:center; gap:4px; min-height:44px; padding:4px 4px 4px 16px; }
.alert .at { flex:1; min-width:0; display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:var(--ctl); text-align:left; font-weight:500; cursor:pointer; }
.alert .at .rt span { color:var(--foreground); opacity:.75; font-weight:400; font-size:12px; line-height:16px; text-align:right; }
.alert .ai { flex:none; display:inline-flex; margin-right:10px; }
.alert .ai svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.alert .at b { flex:1; min-width:0; }
.alert .rt { flex:none; display:inline-flex; align-items:center; gap:8px; }
.alert .bar { width:56px; height:6px; border-radius:3px; background:color-mix(in srgb, var(--sev) 25%, transparent); overflow:hidden; }
.alert .bar i { display:block; height:100%; background:var(--sev); border-radius:3px; }
.alert .al { flex:none; display:inline-flex; align-items:center; min-height:var(--ctl); padding:0 8px; font-size:13px; font-weight:600; color:inherit; text-decoration:underline; }
.alert .ax { flex:none; width:var(--ctl); height:var(--ctl); display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-md); font-size:20px; line-height:1; }
.alert .ax:hover, .alert .al:hover { background:color-mix(in srgb, var(--sev) 20%, transparent); }
.alert .ab[hidden] { display:none; }
@media (max-width:479px) { .alert .at .rt span { display:none; } .alert .bar { width:40px; } }
.alert .ab { padding:0 16px 12px; color:var(--foreground); }
.alert .ab p { margin:0 0 8px; }

/* page */
main { max-width:960px; margin:0 auto; padding:16px 16px calc(24px + env(safe-area-inset-bottom, 0px)); } /* no fixed bottom bar any more, so no space reserved for one */
/* Sticky footer: the page is at least one screen tall and main takes the spare height, so on a short page (an empty board,
   one alert) .legal-foot sits at the bottom of the screen; on a long page it follows the content. Never position:fixed. */
body { min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
body > main { flex:1 0 auto; width:100%; display:flex; flex-direction:column; }
.foot-push { flex:1 0 0; } /* soaks up the spare height above .legal-foot, so the footer keeps its 32px top margin */
/* Flex children's margins don't collapse. A board tab (#list hidden) used to end on .cl's 16px bottom margin folded
   into the footer's 32px; drop it there so long boards keep exactly the spacing they had. */
body > main:has(> #list[hidden]) > .cl { margin-bottom:0; }
.head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:16px; }
h1 { margin:0; font-size:24px; line-height:32px; font-weight:600; letter-spacing:-.015em; }
.meta { color:var(--text-muted); font-size:12px; line-height:16px; margin-top:4px; }
.nav-q { flex:1 1 auto; min-width:0; max-width:420px; }
.q { width:100%; min-height:32px; height:32px; padding:0 10px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--background); color:var(--foreground); font:inherit; }
.q::placeholder { color:var(--gray-600); }
.nav-tabs { max-width:960px; margin:0 auto; padding:0 16px; }
.tabs { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; margin-left:-8px; min-height:calc(var(--ctl) + 2px); } /* room for the tab row before it is drawn (it waits for the stories), so nothing below jumps (ship68: CLS 0.23 on /jobs) */ /* -8px = the tab's own padding, so the first dot lines up with the cards */
.tabs::-webkit-scrollbar { display:none; }
.tab { flex:none; min-height:var(--ctl); padding:0 12px; font-weight:500; color:var(--text-muted); border-bottom:2px solid transparent; display:inline-flex; align-items:center; gap:8px; }
.tab:hover { color:var(--foreground); }
.tab[aria-selected="true"] { color:var(--foreground); border-bottom-color:var(--foreground); }
.src .place { color:var(--foreground); white-space:nowrap; }
.src .place::before { content:"\00B7"; margin-right:8px; color:var(--text-muted); }
.card.breaking { border-color:var(--red); background:var(--background); }
.card.breaking a { display:block; padding:0; }
.card.breaking .th, .card.breaking .ph { width:100%; height:auto; aspect-ratio:16/9; max-height:320px; border-radius:0; }
.card.breaking .ph { aspect-ratio:auto; height:112px; }
.card.breaking .bd { padding:16px; }
.card.breaking h2 { font-size:22px; line-height:30px; letter-spacing:-.01em; }
.card.breaking p { display:block; font-size:14px; }
.card.breaking .like { background:color-mix(in srgb, var(--background) 88%, transparent); }
@keyframes pulse { 50% { opacity:.3; } }
[hidden] { display:none !important; }
.cl { display:grid; gap:12px; margin-bottom:16px; }
.cl-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.cl-bar .ev-town { min-width:0; max-width:100%; }
.cl-bar .ev-town select { font-weight:600; }
.cl-go { min-height:var(--ctl); padding:0 14px; border-radius:var(--radius-md); background:var(--foreground); color:var(--background); font-weight:500; }
.cl-go:disabled { opacity:.5; }
.cl-form { display:grid; gap:14px; border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; }
.cl-f { display:grid; gap:4px; min-width:0; position:relative; }
.cl-f > label { font-size:12px; line-height:16px; font-weight:500; color:var(--text-muted); }
.ui-select { width:auto; max-width:100%; justify-self:start; }
.uc { text-transform:uppercase; }
.cl-f input, .cl-f select, .cl-f textarea { width:100%; min-height:var(--ctl); padding:8px 12px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--background); color:var(--foreground); font:inherit; min-width:0; }
.cl-f input:focus-visible, .cl-f select:focus-visible, .cl-f textarea:focus-visible, .cl-seg button:focus-visible { outline:2px solid var(--blue); outline-offset:1px; }
.cl-f [aria-invalid="true"] { border-color:var(--red); }
.cl-f textarea { resize:vertical; }
.cl-f select.ui-select { width:auto; }
.cl-hint, .cl-count { color:var(--text-muted); font-size:12px; line-height:16px; }
.cl-count { text-align:right; }
.cl-fe, .cl-err { color:var(--red); font-size:12px; line-height:16px; }
.cl-fe:empty, .cl-err:empty { display:none; }
.cl-two { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:479px) { .cl-two { grid-template-columns:1fr; } }
.cl-pricerow { display:flex; align-items:center; gap:12px; }
.cl-price-in { position:relative; flex:1; min-width:0; }
.cl-price-in span { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--text-muted); }
.cl-price-in input { padding-left:24px; }
.cl-check { display:inline-flex; align-items:center; gap:8px; min-height:var(--ctl); font-weight:500; flex:none; }
.cl-check input { width:24px; min-height:24px; height:24px; margin:0; }
.cl-seg { display:flex; flex-wrap:wrap; gap:8px; }
.cl-seg button { min-height:var(--ctl); padding:0 14px; border:1px solid var(--border); border-radius:var(--radius-md); font-weight:500; color:var(--text-muted); }
.cl-seg button[aria-checked="true"] { background:var(--foreground); color:var(--background); border-color:var(--foreground); }
.cl-wide { width:100%; min-height:var(--ctl); }
/* pill: one size for every label chip (category, Featured, Breaking). Never taller than the weather button. */
.pill { display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 8px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--background); color:var(--foreground); font-size:12px; line-height:16px; font-weight:600; white-space:nowrap; }
.pill svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.pill i { width:6px; height:6px; border-radius:50%; background:currentColor; animation:pulse 1.6s var(--ease) infinite; }
.pill-over { position:absolute; top:12px; left:12px; z-index:1; border-color:transparent; box-shadow:0 1px 4px rgba(0,0,0,.18); }
.pill-feat { position:absolute; top:-12px; left:16px; z-index:2; background:var(--amber); border-color:transparent; color:#1a1200; }
.pill-blue { background:var(--blue-subtle); border-color:transparent; color:var(--blue-text); }
.pill-red { background:#c4262c; border-color:transparent; color:#fff; }
.cl-chips { display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; }
.cl-chips::-webkit-scrollbar { display:none; }
.cl-chip { flex:none; min-height:32px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-md); font-weight:500; font-size:12px; color:var(--text-muted); }
.cl-chip[aria-pressed="true"] { background:var(--foreground); color:var(--background); border-color:var(--foreground); }
.cl-tag { display:inline-flex; align-items:center; flex:none; padding:0 8px; min-height:20px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--gray-100); font-size:11px; line-height:16px; font-weight:500; color:var(--text-muted); white-space:nowrap; }
.deal-grid { grid-template-columns:1fr; }
@media (min-width:720px) { .deal-grid, #ev .cl-list { grid-template-columns:1fr 1fr; } #ev .cl-list { align-items:start; } }
.deal { display:grid; gap:6px; align-content:start; border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; background:var(--background); }
.deal-head { display:flex; align-items:center; gap:8px; min-height:20px; }
.deal-biz { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }
.deal-offer { margin:0; font-size:20px; line-height:26px; font-weight:600; letter-spacing:-.01em; text-wrap:balance; overflow-wrap:anywhere; }
.deal-code { display:flex; align-items:center; gap:8px; margin-top:4px; font-size:12px; line-height:16px; color:var(--text-muted); }
.deal-code code { font-family:var(--font-mono); font-size:14px; letter-spacing:.06em; color:var(--foreground); border:1px dashed var(--gray-500); border-radius:var(--radius-sm); padding:4px 10px; user-select:all; }
/* search */
.nav-q { position:relative; }
.qsug { position:absolute; left:0; right:0; top:calc(100% + 6px); z-index:30; min-width:min(300px, calc(100vw - 32px)); background:var(--background); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); padding:6px; max-height:60vh; overflow:auto; }
.qsug[hidden] { display:none; }
@media (max-width:639px) { .qsug { position:fixed; left:16px; right:16px; top:calc(52px + env(safe-area-inset-top, 0px)); min-width:0; } }
.sug-h { display:flex; align-items:center; justify-content:space-between; min-height:32px; padding:0 10px; color:var(--text-muted); font-size:11px; line-height:16px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.sug-clear { min-height:32px; padding:0 8px; color:var(--blue); font-size:12px; font-weight:500; text-transform:none; letter-spacing:0; }
.qsug .opt { display:flex; align-items:center; gap:10px; width:100%; min-height:var(--ctl); padding:0 10px; border-radius:var(--radius-md); text-align:left; }
.qsug .opt svg { width:16px; height:16px; fill:none; stroke:var(--text-muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.qsug .opt[aria-selected="true"], .qsug .opt:hover { background:var(--gray-100); }
mark { background:color-mix(in srgb, var(--amber) 38%, transparent); color:inherit; border-radius:3px; padding:0 1px; }
.sr { display:grid; gap:16px; }
.sr[hidden] { display:none; }
.ev-filters { display:grid; gap:8px; margin-bottom:8px; }
@media (min-width:720px) { .ev-filters { grid-template-columns:1fr auto; align-items:center; } }
.ev-town select { min-height:var(--ctl); padding:0 10px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--background); color:var(--foreground); font:inherit; max-width:100%; }
.cl-empty { display:grid; gap:12px; justify-items:start; }
.sr-bar { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.sr-bar::-webkit-scrollbar { display:none; }
.sr-sec { display:grid; gap:12px; }
.sr-h { margin:8px 0 0; display:flex; align-items:center; gap:8px; font-size:18px; line-height:24px; font-weight:600; letter-spacing:-.01em; }
.sr-h .n { font:500 12px/16px var(--font-mono); color:var(--text-muted); }
.sr-more { justify-self:start; }
.sr-mean { color:var(--blue); font-weight:600; text-decoration:underline; min-height:32px; }
.sr-try { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:8px; }
@media (min-width:720px) { .ev-grid { grid-template-columns:1fr 1fr; } }
/* event cards */
.ev-mo { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--red-strong); }
.ev-wd { font-size:12px; line-height:16px; font-weight:500; color:var(--text-muted); }
.ev-tm { margin-top:4px; padding-top:4px; border-top:1px solid var(--border); align-self:stretch; text-align:center; font-size:11px; line-height:16px; font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums; }
.ev-day { font-size:24px; line-height:28px; font-weight:600; font-variant-numeric:tabular-nums; }
.ev-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; color:var(--text-muted); font-size:13px; line-height:20px; }
.ev-acts { display:flex; align-items:center; gap:8px; margin-left:auto; }
.ev { position:relative; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--background); }
.ev-hero { position:relative; aspect-ratio:16/10; background:var(--gray-100); overflow:hidden; }
.ev-img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; }
.ev-body { display:flex; flex-direction:column; gap:8px; flex:1; padding:16px; min-width:0; }
.ev-title { margin:0 0 4px; font-size:20px; line-height:26px; font-weight:600; letter-spacing:-.015em; overflow-wrap:anywhere; }
.ev-title a { color:inherit; text-decoration:none; }
.ev-title a:hover { color:var(--blue); }
.ev-price { display:grid; line-height:1.15; }
.ev-price b { font-size:22px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.ev-price small { color:var(--text-muted); font-size:13px; line-height:18px; }
.ev-src { display:flex; align-items:center; gap:8px; min-width:0; color:var(--text-muted); font-size:13px; line-height:18px; }
.ev-go { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--ctl); padding:0 18px; border-radius:var(--radius-md); background:var(--foreground); color:var(--background); font-weight:600; text-decoration:none; margin-left:auto; }
.ev-go:hover { opacity:.88; }
.ev-go svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; }
.ev-body .cl-foot { border-top:1px solid var(--border); padding-top:12px; margin-top:auto; }
.cl-item { grid-template-columns:96px 1fr; gap:16px; align-items:start; }
@media (min-width:640px) { .cl-item { grid-template-columns:128px 1fr; } }
.cl-th { width:100%; aspect-ratio:1; border-radius:var(--radius-md); overflow:hidden; background:var(--gray-100); }
.cl-th img { display:block; width:100%; height:100%; object-fit:cover; }
.cl-main { display:grid; gap:4px; min-width:0; align-content:start; }
.deal { padding:0; overflow:hidden; gap:0; }
.deal-img { display:block; width:100%; aspect-ratio:16/9; max-height:180px; object-fit:cover; background:var(--gray-100); }
.deal-body { display:grid; gap:4px; padding:16px; }
.bav { width:28px; height:28px; border-radius:9999px; flex:none; object-fit:cover; background:var(--gray-100); border:1px solid var(--border); }
.bav-i { display:inline-flex; align-items:center; justify-content:center; font-size:11px; line-height:1; font-weight:600; letter-spacing:.02em; background:hsl(var(--h) 45% 90%); color:hsl(var(--h) 55% 26%); border-color:transparent; }
:root[data-theme="dark"] .bav-i { background:hsl(var(--h) 30% 22%); color:hsl(var(--h) 60% 82%); }
.cl-photo { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cl-addph { min-height:var(--ctl); padding:0 14px; border:1px dashed var(--gray-500); border-radius:var(--radius-md); font-weight:500; color:var(--text-muted); }
.cl-addph:hover { color:var(--foreground); border-color:var(--foreground); }
.cl-prev { display:flex; align-items:center; gap:12px; }
.cl-prev img { width:96px; height:72px; object-fit:cover; border-radius:var(--radius-md); border:1px solid var(--border); }
.cl-foot .bav { width:20px; height:20px; font-size:9px; }
.cl-list { display:grid; gap:12px; }
.cl-item { border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; display:grid; }
.cl-top { display:flex; justify-content:space-between; gap:12px; align-items:baseline; }
.cl-top b { font-weight:600; min-width:0; overflow-wrap:anywhere; }
.cl-price { font-family:var(--font-mono); font-weight:500; flex:none; }
.cl-meta { color:var(--text-muted); font-size:12px; line-height:16px; display:grid; justify-items:start; gap:4px; }
.cl-desc { margin:0; overflow-wrap:anywhere; }
.cl-foot:empty { display:none; }
.cl-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:4px; }
.cl-contact { font-weight:500; overflow-wrap:anywhere; min-width:0; }
.cl-link { color:var(--text-muted); font-size:12px; min-height:32px; padding:0 4px; flex:none; }
.cl-link:hover { color:var(--foreground); }
.cl-empty { color:var(--text-muted); margin:8px 0; }
.cl-more { display:grid; gap:8px; border-top:1px solid var(--border); padding-top:12px; }
.cl-label { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); }
.cl-links { display:flex; flex-wrap:wrap; gap:4px 16px; }
.cl-links a { color:var(--blue); font-weight:500; min-height:32px; display:inline-flex; align-items:center; }
.cl-note { color:var(--text-muted); font-size:12px; line-height:16px; margin:0; }
.more { display:flex; justify-content:center; margin-top:24px; }
.more button { min-height:var(--ctl); padding:0 16px; border:1px solid var(--border); border-radius:var(--radius-md); font-weight:500; background:var(--background); }
.more button:hover { background:var(--gray-100); }
.card { position:relative; }
.card:not(.breaking) { content-visibility:auto; contain-intrinsic-size:auto 140px; }
.card .bd { min-width:0; }
.card .src { padding-right:76px; } /* clears the heart + share pair */
.like { position:absolute; top:8px; right:8px; min-width:var(--ctl); height:var(--ctl); padding:0 6px; display:flex; align-items:center; justify-content:center; gap:4px; border-radius:9999px; color:var(--foreground); font:500 12px/16px var(--font-mono); font-variant-numeric:tabular-nums; }
.like span:empty { display:none; }
.like:hover { background:var(--gray-100); color:var(--foreground); }
.like[aria-pressed="true"] { color:var(--red); }
.like svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.75; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.like[aria-pressed="true"] svg { fill:currentColor; }
/* Share: bottom-right of every story and event card, 40px tap target. The heart stays top-right. */
.share { width:40px; height:40px; flex:none; display:inline-flex; align-items:center; justify-content:center; border-radius:9999px; color:var(--text-muted); }
.share:hover { background:var(--gray-100); color:var(--foreground); }
.share:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.share svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.acts { position:absolute; top:4px; right:4px; z-index:1; display:flex; align-items:center; }
.acts .like { position:static; min-width:40px; height:40px; padding:0 8px; }
.card.breaking .acts { top:8px; right:8px; gap:4px; }
.card.breaking .acts .share { background:color-mix(in srgb, var(--background) 88%, transparent); }
.ev .acts { top:12px; right:12px; gap:6px; }
.ev .acts .like, .ev .acts .share { background:var(--background); box-shadow:0 1px 4px rgba(0,0,0,.18); }
.ev .acts .like:hover, .ev .acts .share:hover { background:var(--gray-100); }
.toast { position:fixed; left:50%; bottom:calc(72px + env(safe-area-inset-bottom, 0px)); z-index:60; transform:translateX(-50%); padding:8px 14px; border-radius:var(--radius-md); background:var(--foreground); color:var(--background); font-size:14px; font-weight:500; line-height:20px; box-shadow:0 2px 8px rgba(0,0,0,.2); pointer-events:none; opacity:0; transition:opacity var(--duration-fast) var(--ease); }
.toast.on { opacity:1; }
.ghost { min-height:var(--ctl); padding:0 12px; border-radius:var(--radius-md); color:var(--gray-700); font-weight:500; transition:background var(--duration-fast) var(--ease); }
.ghost:hover { background:var(--gray-100); color:var(--foreground); }

/* story list */
.list { display:grid; gap:12px; grid-template-columns:1fr; }
.card { display:grid; grid-template-columns:1fr; background:var(--background); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:border-color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease); }
.card:hover { border-color:var(--gray-400); background:var(--background-subtle); }
.card a { display:grid; grid-template-columns:80px 1fr; grid-template-areas:'src src' 'th bd'; gap:8px 12px; padding:16px; min-height:44px; }
.card a.noimg { grid-template-columns:1fr; grid-template-areas:'src' 'bd'; }
.card a > .src { grid-area:src; margin-bottom:0; min-height:32px; }
.card a > .th, .card a > .ph { grid-area:th; }
.card a > .bd { grid-area:bd; }
.src { display:flex; flex-wrap:wrap; gap:2px 8px; align-items:center; font-size:12px; line-height:16px; color:var(--text-muted); margin-bottom:8px; }
.src .when { flex-basis:100%; }
.src b { color:var(--foreground); font-weight:500; }
.av { width:20px; height:20px; border-radius:50%; object-fit:contain; background:var(--gray-200); flex:none; }
.ph { width:80px; height:80px; border-radius:var(--radius-md); background:var(--gray-200); display:grid; place-items:center; }
.ph img { width:48px; height:48px; object-fit:contain; border-radius:var(--radius-sm); }
.card h2 { margin:0; font-size:16px; line-height:24px; font-weight:600; letter-spacing:0; text-wrap:pretty; }
.card p { margin:4px 0 0; color:var(--text-muted); display:none; max-width:65ch; }
.card .th { width:80px; height:80px; object-fit:cover; border-radius:var(--radius-md); background:var(--gray-200); }
.card a:hover h2 { color:var(--blue); }

/* skeleton */
.sk { background:var(--gray-200); position:relative; overflow:hidden; }
.sk::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--background) 55%, transparent), transparent); animation:sh 1.5s var(--ease) infinite; }
@keyframes sh { to { transform:translateX(100%); } }
.sk-card { display:grid; grid-template-columns:96px 1fr; gap:16px; padding:16px; border:1px solid var(--border); border-radius:var(--radius-lg); }
.sk-line { height:16px; border-radius:var(--radius-sm); margin-bottom:8px; }
.sk-img { width:96px; height:96px; border-radius:var(--radius-md); }
.sk-card { height:100px; padding-block:0; align-items:center; overflow:hidden; }
@media (min-width:640px) { .sk-card { height:128px; grid-template-columns:128px 1fr; } .sk-img { width:128px; } }

/* states */
.state { border:1px dashed var(--gray-400); border-radius:var(--radius-lg); padding:48px 24px; text-align:center; }
.state h2 { margin:0 0 4px; font-size:20px; line-height:28px; font-weight:600; letter-spacing:-.01em; }
.state p { margin:0 0 16px; color:var(--text-muted); }
.primary { min-height:var(--ctl); padding:0 16px; border-radius:var(--radius-md); background:var(--foreground); color:var(--background); font-weight:500; transition:background var(--duration-fast) var(--ease); }
.primary:hover { background:var(--gray-900); }
[data-theme="dark"] .primary:hover { background:var(--gray-800); }
.sn { max-width:640px; }
.sn-lede { margin:0; color:var(--text-muted); font-size:14px; line-height:22px; }
.sn-sec { display:grid; gap:12px; border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; }
.sn-sec h2 { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); margin:0; }
.sn-sec p { margin:0; }
.sn-list { margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.sn-list li { display:grid; grid-template-columns:20px 1fr; gap:8px; font-size:14px; line-height:20px; }
.sn-list svg { width:16px; height:16px; margin-top:2px; stroke:var(--foreground); }
.sn-alert { border:1px solid var(--red); border-radius:var(--radius-lg); background:color-mix(in srgb, var(--red) 10%, var(--background)); padding:12px 16px; font-size:14px; line-height:20px; }
.sn-ph { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:479px) { .sn-ph { grid-template-columns:1fr; } }
.sn-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.sn-done { display:grid; gap:12px; justify-items:start; border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px 16px; }
.sn-done h2 { margin:0; font-size:18px; line-height:24px; }
.sn-ref { font-family:var(--font-mono); font-size:14px; border:1px dashed var(--gray-500); border-radius:var(--radius-md); padding:4px 10px; user-select:all; }
.sn-sec .cl-check { align-items:flex-start; min-height:0; padding:6px 0; font-weight:400; font-size:14px; line-height:20px; }
.sn-sec .cl-check input { margin-top:1px; flex:none; }
/* "See ad sizes": a quiet outline button, so it doesn't compete with "Send inquiry" (specific enough to beat the panel's button styles) */
body .sn-sec > button.tsz-toggle { justify-self:start; width:auto; min-height:var(--ctl); padding:0 14px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--background); color:var(--foreground); font-size:14px; font-weight:500; box-shadow:none; }
body .sn-sec > button.tsz-toggle:hover { background:var(--gray-100); }
.sn-pk-go { justify-self:start; display:inline-flex; align-items:center; min-height:var(--ctl); padding:0 16px; border-radius:var(--radius-md); background:var(--foreground); color:var(--background); font-size:14px; font-weight:500; text-decoration:none; }
.sn-pk .rates a { color:inherit; font-weight:600; }

:root { --gutter:var(--sp-4); } /* ship80: the page gutter on phones; 24px from 640px, 32px from 1024px */
@media (min-width:640px) {
  :root { --gutter:var(--sp-6); } /* ship80: the page gutter (layout block at the end) */
  .card p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
  .card a { grid-template-columns:128px 1fr; grid-template-areas:'th src' 'th bd'; grid-template-rows:auto 1fr; column-gap:16px; }
  .card a.noimg { grid-template-areas:'src' 'bd'; }
  .card .th, .ph { width:128px; height:96px; }
  .sk-card { grid-template-columns:128px 1fr; }
  .sk-img { width:128px; }
}
@media (min-width:1024px) {
  :root { --gutter:var(--sp-8); }
  h1 { font-size:32px; line-height:40px; letter-spacing:-.02em; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
/* color: one brand (river teal) plus a hue per section; tints are mixed from the same tokens so dark mode follows */
[data-sec="news"] { --c:var(--c-news); } [data-sec="safety"] { --c:var(--c-safety); } [data-sec="institution"] { --c:var(--c-institution); }
[data-sec="events"] { --c:var(--c-events); } [data-sec="obits"] { --c:var(--c-obits); } [data-sec="jobs"] { --c:var(--c-jobs); }
[data-sec="deals"] { --c:var(--c-deals); } [data-sec="classifieds"] { --c:var(--c-classifieds); }
.brand { color:var(--brand); }
:focus-visible { outline-color:var(--brand); }
.tab { padding:0 8px; gap:6px; }
.tab::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--c); flex:none; }
.tab[aria-selected="true"] { color:var(--foreground); border-bottom-color:var(--c); }
.cl-go, .primary, .ev-go, .job-apply a { background:var(--brand); color:var(--brand-fg); }
.cl-go:hover, .primary:hover, .ev-go:hover, .job-apply a:hover { background:color-mix(in srgb, var(--brand) 85%, var(--foreground)); }
.card { border-color:color-mix(in srgb, var(--c, var(--c-news)) 45%, var(--background)); }
.card:hover { border-color:var(--c, var(--c-news)); }
.spon { background:var(--brand-subtle); border-color:color-mix(in srgb, var(--brand) 45%, var(--background)); }
.pill-hue { background:color-mix(in srgb, var(--c) 14%, var(--background)); color:var(--c); border-color:transparent; }
.deal-offer { color:var(--c-deals); }
.job-pay { color:var(--c-jobs); }
.cl-chip[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); color:var(--brand-fg); }
.card .src b { color:var(--foreground); }

/* ===== option B: ad-card style ===== */
.list { gap:16px; }
.card a.ca > .th, .card a.ca > .bd { grid-area:auto; }
.card { display:block; border-radius:16px; border:1px solid var(--gray-200); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04); }
.card:hover { border-color:var(--gray-300); background:var(--background); box-shadow:0 1px 2px rgba(0,0,0,.05), 0 6px 20px rgba(0,0,0,.07); }
.card a.ca { display:block; padding:0; min-height:0; grid-template-areas:none; }
.card a.ca .th { display:block; width:100%; height:auto; aspect-ratio:2/1; max-height:none; border-radius:0; object-fit:cover; object-position:center 30%; background:var(--gray-200); }
.card a.ca .bd { padding:16px 16px 8px; display:flex; flex-direction:column; gap:6px; }
.card h2 { font-size:17px; line-height:23px; }
.card p, .card .bd p { margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; line-height:20px; max-width:65ch; }
.card .bd p.cl-note { display:block; font-size:12px; line-height:16px; }
.card .src { margin:0 0 2px; padding:0; min-height:20px; flex-wrap:nowrap; gap:8px; min-width:0; font-size:13px; line-height:20px; }
.card .src b { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; font-weight:500; }
.card .src .when { flex-basis:auto; margin-left:auto; white-space:nowrap; color:var(--text-muted); font-size:12px; }
.card .av { width:20px; height:20px; }
.card .cf { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:0 16px; padding:4px 0; min-height:48px; border-top:1px solid var(--gray-200); }
.acts, .card.breaking .acts, .ev .acts { position:static; display:flex; align-items:center; gap:0; flex:none; margin-right:-8px; }
.ev .acts .like, .ev .acts .share { box-shadow:none; background:transparent; }
.card .like, .card .share { color:var(--text-muted); }
.card .like[aria-pressed="true"] { color:var(--red); }
.card.breaking { border-color:color-mix(in srgb, var(--red) 55%, var(--background)); }
.card.breaking a.ca .th { aspect-ratio:16/9; }
.card.breaking .bd { padding:16px 16px 8px; }
.ev { border-radius:16px; border-color:var(--gray-200); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04); }
/* ===== Events tab, Bandsintown-style layout: location header, date chips, featured/popular row, date-grouped rows.
   Uses the site's tokens, card radius, buttons, chips, pills and the shared heart/share family. ===== */
/* Advertising policy: side ads only on the Events, Jobs, Deals and Classifieds tabs (never on News,
   Police & courts or Obituaries). render() sets body[data-ads] on those tabs; without it the margins stay empty. */
body:not([data-ads]) .rail { display:none !important; }
.evx { gap:16px; min-width:0; }
.evx-head { display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.evx-ht { display:flex; min-width:0; }
.evx-near { position:relative; display:inline-flex; align-items:center; gap:6px; max-width:100%; min-width:0; height:var(--ctl); padding:0 10px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--background); color:var(--foreground); font-size:15px; line-height:20px; font-weight:600; }
.evx-near span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.evx-near svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; color:var(--text-muted); }
.evx-near svg:first-child { color:var(--c-events); }
.evx-near select { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; font-size:16px; }
label.evx-near:hover { background:var(--gray-100); border-color:var(--gray-400); }
label.evx-near:focus-within { outline:2px solid var(--brand); outline-offset:2px; }
.evx-head .cl-go { flex:none; }
.evx-filters { display:grid; gap:8px; min-width:0; }
.evx-filters .cl-chips { position:relative; min-width:0; }
.evx-pick { position:relative; display:inline-flex; align-items:center; gap:6px; }
.evx-pick svg { width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.evx-pickw { position:relative; display:inline-flex; flex:none; }
.evx-pickw input { position:absolute; left:0; bottom:0; width:1px; height:1px; opacity:0; pointer-events:none; border:0; padding:0; }
.evx .spon { margin:0; }
.evx-sec { display:grid; gap:10px; min-width:0; }
.evx-sh { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0; }
.evx-sh h3 { margin:0; font-size:18px; line-height:24px; font-weight:600; letter-spacing:-.01em; }
.evx-arrows { display:none; gap:4px; }
.evx-arrows button { width:var(--ctl); height:var(--ctl); display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:9999px; background:var(--background); color:var(--foreground); }
.evx-arrows button:hover { background:var(--gray-100); }
.evx-arrows svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (min-width:640px) { .evx-arrows { display:flex; } }
.evx-rail { display:flex; gap:12px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:16px; margin:0 -16px; padding:4px 16px 8px; scrollbar-width:none; }
.evx-rail::-webkit-scrollbar { display:none; }
.evx-rail:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
@media (min-width:640px) { .evx-rail { margin:0; padding:4px 0 8px; scroll-padding-inline:0; } }
/* carousel card */
.evc { position:relative; flex:none; width:min(232px, 68vw); scroll-snap-align:start; display:grid; grid-template-rows:auto 1fr; overflow:hidden; border:1px solid var(--gray-200); border-radius:16px; background:var(--background); box-shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.04); }
.evc.evr-feat { border-color:var(--amber); background:color-mix(in srgb, var(--amber) 7%, var(--background)); }
.evc-pic { position:relative; aspect-ratio:4/3; background:var(--gray-100); overflow:hidden; }
.evc-pic img { display:block; width:100%; height:100%; object-fit:cover; }
.evc-body { padding:10px 4px 0 12px; grid-template-rows:20px 40px 18px 18px 44px; }
.evc-body .evt-title { font-size:15px; line-height:20px; }
.evc .ev-go { padding:0 12px; font-size:13px; }
/* date badge: month over day, on the picture's corner (or filling the picture slot when there is no photo) */
.evx-badge { position:absolute; top:8px; left:8px; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:44px; padding:4px 6px 5px; border-radius:var(--radius-md); background:var(--background); color:var(--foreground); box-shadow:0 1px 4px rgba(0,0,0,.18); line-height:1; }
.evx-mo { font-size:11px; line-height:14px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--c-events); }
.evx-dd { font-size:20px; line-height:22px; font-weight:600; font-variant-numeric:tabular-nums; }
.evx-tile { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; background:color-mix(in srgb, var(--c-events) 9%, var(--background)); border-right:1px solid color-mix(in srgb, var(--c-events) 20%, var(--background)); }
.evx-tile .evx-mo { font-size:12px; line-height:16px; }
.evx-tile .evx-dd { font-size:30px; line-height:34px; }
.evx-tile .evx-wd { font-size:12px; line-height:16px; font-weight:500; color:var(--text-muted); }
.evc .evx-tile { border-right:0; }
/* ship78: event cards (Popular and the day scrollers) keep their own design and share one bottom row: pinned to the
   card's bottom, never wrapping; time or Happening now, then heart, share and Tickets/Details, all 24px tall and in the
   headline's colour and weight (500), each with a 40px tap area from a pseudo-element. Equal-height cards per scroller. */
.evx-rail { align-items:stretch; }
.evc.evc { width:min(256px, 78vw); display:flex; flex-direction:column; --ico:24px; --row-ink:var(--foreground); --row-wt:500; }
.evc.evc > .evc-body { flex:1 1 auto; display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-3) var(--sp-3) var(--sp-3); }
.evc.evc .evt-title { -webkit-line-clamp:2; line-clamp:2; min-height:40px; }
.evc.evc > .evc-body > .evc-foot { margin-top:auto; align-self:stretch; justify-content:flex-start; padding-top:var(--sp-2); height:auto; min-height:0; display:flex; align-items:center; flex-wrap:nowrap; gap:var(--sp-3); }
.evc.evc .evc-time { flex:1 1 auto; text-align:left; display:block; min-width:0; font-size:13px; line-height:24px; color:var(--row-ink); font-weight:var(--row-wt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evc.evc .evc-time .ev-live { font-weight:600; }
.evc.evc .evc-foot .acts { flex:none; margin:0; gap:var(--sp-3); flex-wrap:nowrap; }
/* ship79: the time sits flush left on the card's content edge; heart, share, Report and Tickets/Details group on the right */
.evc.evc .evc-foot > .evc-time { order:0; flex:1 1 auto; margin:0; padding:0; text-align:left; }
.evc.evc .evc-foot > .evc-right { order:1; flex:none; margin-left:auto; display:flex; align-items:center; gap:var(--sp-3); flex-wrap:nowrap; }
.evc.evc .evc-foot button.ev-go { font-family:inherit; cursor:pointer; }
.evc.evc.evc-solo { width:auto; min-width:0; }
/* ship80: the heart sits on the picture's top-right corner: a 24px icon on a translucent white circle, its 40px button
   is the tap area; the count stays in its accessible name. The flag takes the heart's old place in the bottom row and
   is drawn exactly like share: 24px box, 18px icon, the headline's colour and 2.25 stroke, no fill or border. */
.evc.evc .evc-pic > .like.evc-like { position:absolute; top:4px; right:4px; z-index:2; box-sizing:border-box; width:40px; height:40px; min-width:0; min-height:0; margin:0; padding:0; display:flex; align-items:center; justify-content:center; border:0; border-radius:9999px; background:transparent; color:#111; cursor:pointer; }
.evc.evc .evc-pic > .like.evc-like::before { content:""; position:absolute; inset:2px; border-radius:9999px; background:rgba(255,255,255,.85); box-shadow:0 1px 3px rgba(0,0,0,.18); }
.evc.evc .evc-pic > .like.evc-like svg { position:relative; width:24px; height:24px; stroke-width:2; }
.evc.evc .evc-pic > .like.evc-like span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.evc.evc .evc-pic > .like.evc-like[aria-pressed="true"] { color:var(--red); }
.evc.evc .evc-pic > .like.evc-like:focus-visible { outline:2px solid var(--brand); outline-offset:0; }
.evc.evc .evc-foot .acts :is(.cl-ico, .share) { border:0; background:transparent; border-radius:0; color:var(--row-ink); }
.evc.evc .evc-foot .acts :is(.cl-ico, .share) svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; }
.evc.evc .evc-foot .acts .cl-ico.on { color:var(--text-muted); }
/* ship80: room for "Happening now" beside flag, share and the button at 320px: a slightly wider card and tighter gaps */
.evc.evc { width:min(288px, 84vw); }
.evc.evc > .evc-body > .evc-foot, .evc.evc .evc-foot > .evc-right, .evc.evc .evc-foot .acts { gap:var(--sp-2); }
.evc.evc .evc-time .ev-live { font-size:12px; gap:var(--sp-1); }
.evc.evc .evc-time .ev-live::before { width:7px; height:7px; }
.ev-grid:has(> .evc) { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(240px, 100%), 1fr)); align-items:stretch; }
.evx-dlg { width:min(480px, calc(100vw - 32px)); max-height:calc(100dvh - 48px); overflow:auto; box-sizing:border-box; padding:var(--sp-6); border:1px solid var(--gray-200); border-radius:16px; background:var(--background); color:var(--foreground); }
.evx-dlg::backdrop { background:rgba(0,0,0,.45); }
.evx-dlg h3 { margin:var(--sp-2) 0 var(--sp-2); font-size:20px; line-height:26px; font-weight:600; overflow-wrap:anywhere; }
.evx-dlg p { margin:0 0 var(--sp-2); }
.evx-dlg-desc { white-space:pre-line; overflow-wrap:anywhere; }
.evx-dlg-x { display:block; margin:var(--sp-3) 0 0 auto; min-height:40px; padding:0 var(--sp-4); border:1px solid var(--gray-200); border-radius:9999px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
/* ship95 (experiment): the story sheet over the feed. A bottom sheet on phones, a centred card from 600px. */
.st-sheet { box-sizing:border-box; width:min(560px, calc(100vw - 32px)); max-height:calc(100dvh - 48px); overflow:auto; overscroll-behavior:contain; padding:0; border:1px solid var(--gray-200); border-radius:16px; background:var(--background); color:var(--foreground); box-shadow:0 12px 40px rgba(0,0,0,.25); }
.st-sheet::backdrop { background:rgba(0,0,0,.45); }
html.st-open { overflow:hidden; }
.st-x { position:absolute; top:var(--sp-3); right:var(--sp-3); z-index:1; display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:9999px; background:rgba(0,0,0,.55); color:#fff; cursor:pointer; }
.st-x svg { width:20px; height:20px; }
.st-pic { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:var(--gray-200); }
.st-bd { padding:var(--sp-6) var(--sp-6) var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-3); }
.st-sheet:not(:has(> .st-pic)) .st-bd { padding-top:var(--sp-6); padding-right:calc(var(--sp-12) + var(--sp-2)); }
.st-src { display:flex; align-items:center; gap:var(--sp-2); min-width:0; font-size:13px; line-height:20px; color:var(--text-muted); }
.st-src .av { width:24px; height:24px; flex:none; border-radius:9999px; }
.st-src b { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--foreground); font-weight:600; }
.st-src time { flex:none; }
.st-src time::before { content:"\00B7"; margin-right:var(--sp-2); }
.st-sheet h2 { margin:0; font-size:22px; line-height:28px; font-weight:600; overflow-wrap:anywhere; }
.st-sum { margin:0; font-size:16px; line-height:24px; color:var(--text-muted); overflow-wrap:anywhere; }
.st-go { display:flex; align-items:center; justify-content:center; gap:var(--sp-3); min-height:56px; margin-top:var(--sp-2); padding:0 var(--sp-6); border-radius:9999px; background:var(--brand); color:var(--brand-fg); font-weight:700; font-size:17px; line-height:22px; text-decoration:none; text-align:center; box-shadow:0 2px 8px rgba(0,0,0,.18); } /* ship96: the main action */
.st-go .av { width:28px; height:28px; flex:none; border-radius:9999px; background:#fff; object-fit:contain; }
.st-go span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.st-sheet .st-sum { white-space:pre-line; } /* ship96: the longer feed text wraps as written; the sheet scrolls inside */
.st-sheet { touch-action:pan-y; } /* ship98: vertical scrolling stays the browser's; sideways is the swipe */
.st-page { will-change:transform; }
.st-pos { margin:0; font-size:12px; line-height:16px; color:var(--text-muted); text-align:center; font-variant-numeric:tabular-nums; }
.st-nav { position:fixed; top:50%; z-index:2; display:none; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--gray-200); border-radius:9999px; background:var(--background); color:var(--foreground); box-shadow:0 2px 8px rgba(0,0,0,.18); cursor:pointer; transform:translateY(-50%); }
.st-nav svg { width:22px; height:22px; }
.st-nav:disabled { opacity:.35; cursor:default; }
.st-nav[hidden] { display:none !important; }
@media (min-width:600px) and (hover:hover) {
  .st-nav { display:grid; }
  .st-prev { left:calc(50% - 280px - 64px); }
  .st-next { right:calc(50% - 280px - 64px); }
}
.st-acts.st-acts { display:flex; align-items:center; gap:var(--sp-4); margin:0; }
.st-acts.st-acts .like { box-sizing:border-box; display:inline-flex; align-items:center; justify-content:flex-start; gap:var(--sp-1); width:calc(24px + var(--sp-1) + 4ch); min-width:calc(24px + var(--sp-1) + 4ch); padding:0; font-size:13px; font-variant-numeric:tabular-nums; transition:none; } /* the card's fixed heart slot: a count never moves anything */
.st-acts.st-acts .like > span { display:inline-block; width:4ch; min-width:4ch; text-align:left; white-space:nowrap; }
.st-acts.st-acts :is(.like, .share) { position:relative; inset:auto; transform:none; margin:0; display:inline-flex; align-items:center; box-sizing:border-box; height:40px; min-height:40px; padding:0; border:0; background:transparent; color:inherit; }
.st-acts.st-acts .share { justify-content:center; width:40px; min-width:40px; }
.st-acts.st-acts :is(.like, .share) svg { width:20px; height:20px; }
.st-go:hover { filter:brightness(1.08); }
.st-go:focus-visible, .st-x:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.st-note { margin:0; font-size:13px; line-height:18px; color:var(--text-muted); text-align:center; }
@media (max-width:599.98px) {
  .st-sheet { width:100vw; max-width:100vw; max-height:90dvh; margin:auto 0 0; border-radius:16px 16px 0 0; border-bottom:0; }
}
.evc.evc .evc-foot .acts :is(.like, .share, .cl-ico) { position:relative; inset:auto; transform:none; margin:0; flex:none; box-sizing:border-box; width:var(--ico); min-width:var(--ico); height:var(--ico); min-height:0; padding:0; gap:0; color:var(--row-ink); }
.evc.evc .evc-foot .acts .like[aria-pressed="true"] { color:var(--red); }
.evc.evc .evc-foot .acts .like span { display:none; }
.evc.evc .evc-foot .acts :is(.like, .share, .cl-ico) svg { width:18px; height:18px; stroke-width:2.25; }
.evc.evc .evc-foot .acts :is(.like, .share, .cl-ico)::after { content:""; position:absolute; inset:-8px -6px; }
.evc.evc .evc-foot .ev-go { position:relative; flex:none; box-sizing:border-box; height:var(--ico); min-height:0; margin:0; padding:0 var(--sp-3); gap:0; border-radius:9999px; background:transparent; border:1.5px solid currentColor; color:var(--row-ink); font-size:13px; line-height:1; font-weight:var(--row-wt); }
.evc.evc .evc-foot .ev-go:hover { background:var(--gray-100); }
.evc.evc .evc-foot .ev-go svg { display:none; }
.evc.evc .evc-foot .ev-go::after { content:""; position:absolute; inset:-8px -4px; }
.evc.evc .evc-foot :is(.ev-go, .like, .share, .cl-ico):focus-visible { outline:2px solid var(--brand); outline-offset:2px; }

.evx-paid { display:inline-flex; align-items:center; align-self:flex-start; height:20px; padding:0 6px; border-radius:var(--radius-sm); background:var(--amber); color:#1a1200; font-size:11px; line-height:16px; font-weight:600; white-space:nowrap; }
/* date groups and rows */
.evx-day { display:grid; gap:10px; min-width:0; } /* ship77: a day = heading row + side-scroller, like .evx-pop */
.evx-day h3 { position:sticky; top:calc(env(safe-area-inset-top, 0px) + 80px); z-index:2; margin:0; padding:var(--sp-1) 0; display:flex; align-items:baseline; gap:8px; background:color-mix(in srgb, var(--background) 94%, transparent); font-size:15px; line-height:20px; font-weight:600; }
.evx-day h3 .evx-rel { color:var(--c-events); }
/* the card template: every Events card has the same five slots in the same place, filled or empty */
.evt { display:grid; row-gap:4px; min-width:0; min-height:0; }
.evt > * { min-width:0; padding-right:8px; }
.evt-top { display:flex; align-items:center; gap:6px; overflow:hidden; }
.evr-cat { font-size:11px; line-height:16px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--c); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.evt-title { margin:0; font-size:16px; line-height:21px; font-weight:600; letter-spacing:-.005em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.evt-title a:hover { color:var(--blue); }
.evt-when { font-size:13px; line-height:18px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evt-where { color:var(--text-muted); font-size:13px; line-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evt-foot { display:flex; align-items:center; gap:8px; align-self:end; height:44px; padding-right:4px; margin-bottom:2px; }
.evt-foot .ev-go { flex:none; margin-left:0; padding:0 14px; }
.evt-foot .acts { margin-left:auto; margin-right:0; }
.evt-foot .cl-contact { flex:0 1 auto; min-width:0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.evt-foot .cl-link { flex:none; }
.evt-foot .cl-link:first-of-type { margin-left:auto; }
.evx-more { justify-self:center; }
.evx-more button { min-height:var(--ctl); padding:0 16px; border:1px solid var(--border); border-radius:var(--radius-md); font-weight:500; background:var(--background); }
.evx-more button:hover { background:var(--gray-100); }
.evx-empty { display:grid; justify-items:center; gap:4px; padding:32px 20px; }
.evx-empty .evx-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.evx-empty .ghost { border:1px solid var(--border); }
.evx-sk { display:grid; gap:10px; }
/* phones: the same ad-card layout as desktop, in a narrower column. The picture fills the card's left edge
   top to bottom; source, headline, description and the link/heart/share row sit to its right. */
@media (max-width:639px) {
  .card:not(.breaking):has(a.ca > .th) { --pic:clamp(112px, 36%, 140px); padding-left:var(--pic); min-height:168px; }
  .card:not(.breaking) a.ca > .th { position:absolute; left:0; top:0; bottom:0; width:var(--pic); height:100%; aspect-ratio:auto; object-position:center 30%; }
  .card:not(.breaking):has(a.ca > .th) a.ca .bd { padding:12px 12px 4px 14px; gap:4px; }
  .card:not(.breaking):has(a.ca > .th) .src { gap:6px; font-size:12px; margin:0; }
  .card:not(.breaking):has(a.ca > .th) .av { width:18px; height:18px; }
  .card:not(.breaking):has(a.ca > .th) h2 { font-size:16px; line-height:21px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .card:not(.breaking):has(a.ca > .th) .bd p:not(.cl-note) { font-size:13px; line-height:18px; }
  .card:not(.breaking):has(a.ca > .th) .cf { margin:0 4px 0 14px; padding:0; min-height:44px; }
}
/* ship99: polish. A clear hierarchy (source line, bold headline, relaxed summary), a photo with a soft shade under the
   close button, one reactions row (heart and share as matching 44px round buttons, the heart keeping its fixed count
   slot, "N of M" at the right) above the full-width Continue, a grab handle on phones, glassy prev/next on desktop. */
.st-sheet.st-sheet { border:0; border-radius:20px; box-shadow:0 24px 64px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.12); scrollbar-width:thin; }
.st-sheet.st-sheet::backdrop { background:rgba(10,14,18,.55); backdrop-filter:blur(2px); }
.st-page.st-page { position:relative; }
.st-sheet .st-pic { aspect-ratio:16/9; border-radius:20px 20px 0 0; }
.st-sheet .st-page:has(> .st-pic)::before { content:""; position:absolute; inset:0 0 auto; height:88px; z-index:1; border-radius:20px 20px 0 0; background:linear-gradient(rgba(0,0,0,.38), transparent); pointer-events:none; }
.st-sheet .st-x { top:var(--sp-3); right:var(--sp-3); z-index:3; width:36px; height:36px; background:rgba(20,20,20,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 1px 4px rgba(0,0,0,.25); transition:background .15s; }
.st-sheet.st-sheet:not(:has(.st-pic)) .st-x { background:var(--gray-100, rgba(0,0,0,.06)); color:var(--foreground); box-shadow:none; }
.st-sheet .st-x:hover { background:rgba(20,20,20,.7); }
.st-sheet.st-sheet:not(:has(.st-pic)) .st-x:hover { background:var(--gray-200); }
.st-sheet .st-x svg { width:18px; height:18px; }
.st-sheet .st-bd { gap:var(--sp-4); }
.st-sheet.st-sheet:has(.st-pic) .st-bd { padding:var(--sp-6); }
.st-sheet.st-sheet:not(:has(.st-pic)) .st-bd { padding-top:var(--sp-6); padding-right:calc(var(--sp-12) + var(--sp-2)); }
.st-sheet .st-src { font-size:13px; line-height:18px; letter-spacing:.01em; }
.st-sheet .st-src b { font-weight:600; }
.st-sheet h2 { font-size:24px; line-height:30px; font-weight:700; letter-spacing:-.015em; text-wrap:balance; }
.st-sheet .st-sum { font-size:16px; line-height:26px; color:var(--text-muted); text-wrap:pretty; }
.st-bar { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-top:var(--sp-1); padding-top:var(--sp-4); border-top:1px solid var(--gray-200); }
.st-acts.st-acts.st-acts { gap:var(--sp-3); }
.st-acts.st-acts.st-acts :is(.like, .share) { height:44px; min-height:44px; border:1px solid var(--gray-200); border-radius:9999px; background:var(--background); color:var(--foreground); transition:background .15s, border-color .15s; cursor:pointer; }
.st-acts.st-acts.st-acts :is(.like, .share):hover { background:var(--gray-100, rgba(0,0,0,.04)); border-color:var(--gray-300, var(--gray-200)); }
.st-acts.st-acts.st-acts .like { justify-content:center; gap:var(--sp-1); width:calc(44px + 4ch); min-width:calc(44px + 4ch); padding:0 var(--sp-3); } /* fixed: a count never resizes it */
.st-acts.st-acts.st-acts .like > span { width:3ch; min-width:3ch; font-size:14px; font-weight:600; }
.st-acts.st-acts.st-acts .share { width:44px; min-width:44px; }
.st-acts.st-acts.st-acts :is(.like, .share) svg { width:20px; height:20px; }
.st-sheet .st-pos { margin:0; font-size:13px; line-height:18px; color:var(--text-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.st-sheet .st-pos b { color:var(--foreground); font-weight:600; }
.st-sheet .st-go { min-height:52px; margin-top:0; border-radius:14px; font-size:16px; font-weight:700; box-shadow:0 6px 16px rgba(11,107,134,.28); transition:transform .12s, box-shadow .12s, filter .12s; }
.st-sheet .st-go:active { transform:scale(.985); box-shadow:0 2px 8px rgba(11,107,134,.24); }
.st-sheet .st-go .av { width:26px; height:26px; box-shadow:0 0 0 2px rgba(255,255,255,.9); }
.st-sheet .st-note { margin-top:calc(var(--sp-2) * -1); font-size:12px; }
.st-grab { display:none; }
.st-sheet .st-nav { width:48px; height:48px; border:0; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:0 6px 20px rgba(0,0,0,.22); transition:transform .15s, opacity .15s; }
.st-sheet .st-nav:hover:not(:disabled) { transform:translateY(-50%) scale(1.06); }
.st-sheet .st-nav:disabled { opacity:.3; }
@media (max-width:599.98px) {
  .st-sheet.st-sheet { border-radius:20px 20px 0 0; max-height:92dvh; }
  .st-sheet .st-pic { border-radius:20px 20px 0 0; }
  .st-grab { display:block; position:absolute; top:var(--sp-2); left:calc(50% - 18px); z-index:3; width:36px; height:4px; border-radius:9999px; background:rgba(255,255,255,.85); box-shadow:0 0 0 1px rgba(0,0,0,.08); pointer-events:none; }
  .st-sheet.st-sheet:not(:has(.st-pic)) .st-grab { background:var(--gray-300, #ccc); box-shadow:none; }
  .st-sheet h2 { font-size:22px; line-height:28px; }
  .st-sheet.st-sheet .st-bd { padding-bottom:calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); }
  .st-sheet.st-sheet:has(.st-pic) .st-bd { padding:var(--sp-4) var(--sp-4) calc(var(--sp-6) + env(safe-area-inset-bottom, 0px)); }
  .st-sheet.st-sheet:not(:has(.st-pic)) .st-bd { padding-top:var(--sp-8); }
}
@media (prefers-reduced-motion: reduce) { .st-page.st-page, .st-sheet .st-go, .st-sheet .st-nav { transition:none !important; } }
@media (max-width:374px) { .card:not(.breaking):has(a.ca > .th) .bd p:not(.cl-note) { display:none; } } /* too narrow for a description */
@media (min-width:640px) {
  /* picture flush left for the card's full height; text, then the link/reaction row, on the right */
  .card:not(.breaking):has(a.ca > .th) { padding-left:240px; min-height:168px; }
  .card:not(.breaking) a.ca > .th { position:absolute; left:0; top:0; bottom:0; width:240px; height:100%; aspect-ratio:auto; }
  .card a.ca .bd { padding:16px 20px 8px; }
  .card .cf { margin:0 20px; }
}
/* Breaking lead card, a bit smaller: wide, capped picture; headline one step down; 2-line description */
.card.breaking a.ca .th { aspect-ratio:21/9; max-height:360px; }
.card.breaking h2 { font-size:20px; line-height:26px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.card.breaking .bd p:not(.cl-note) { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
@media (max-width:639px) {
  .card.breaking a.ca .th { aspect-ratio:2/1; max-height:38vh; }
  .card.breaking .bd { padding:12px 14px 4px; gap:6px; }
  .card.breaking h2 { font-size:19px; line-height:25px; }
  .card.breaking .bd p:not(.cl-note) { font-size:13px; line-height:18px; }
  .card.breaking .cf { margin:0 6px 0 14px; padding:0; min-height:44px; }
}
/* Breaking slot (official alerts): tier label + "until" line; a card with no picture carries the Breaking pill inline. */
.card.breaking .bk-meta { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0; font-size:13px; line-height:18px; color:var(--text-muted); }
.card.breaking .bk-meta b { color:#c4262c; font-weight:600; }
.card.breaking .bk-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.card.breaking a.noimg .bk-head .pill { position:static; box-shadow:none; }
.bn .tx .by b { color:var(--red); font-weight:600; }
/* Reactions: heart and share are one family everywhere (news, Breaking, Police & courts, obituaries, events).
   Same 18px outline icon on the same 24-unit grid with the same stroke, one shared colour token, the same
   bare round 40px button, and the same hover / pressed / keyboard-focus look. Liked = the heart filled in the
   site's brand teal (--brand, which has its own dark-mode value), same 2px stroke; red stays for Breaking and alerts. */
:root { --react:var(--text-muted); --react-strong:var(--foreground); --react-on:var(--brand); --react-hover:var(--gray-100); --react-press:var(--gray-200); }
.like, .share,
.card .like, .card .share, .card.breaking .like, .card.breaking .acts .share,
.ev .acts .like, .ev .acts .share {
  color:var(--react); background:transparent; border:0; box-shadow:none; border-radius:9999px;
  transition:background-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
}
.like svg, .share svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.like:hover, .share:hover, .ev .acts .like:hover, .ev .acts .share:hover { background:var(--react-hover); color:var(--react-strong); }
.like:active, .share:active, .ev .acts .like:active, .ev .acts .share:active { background:var(--react-press); color:var(--react-strong); }
.like:focus-visible, .share:focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
.like[aria-pressed="true"], .card .like[aria-pressed="true"],
.like[aria-pressed="true"]:hover, .like[aria-pressed="true"]:active,
.ev .acts .like[aria-pressed="true"]:hover, .ev .acts .like[aria-pressed="true"]:active { color:var(--react-on); }
.like[aria-pressed="true"] svg { fill:currentColor; }
/* Footer at the end of every view: Legal, Advertise, Submit news, Unsubscribe (there is no fixed bottom bar). */
.legal-foot { margin:32px 0 0; padding:12px 0 0; border-top:1px solid var(--border); color:var(--text-muted); font-size:12px; line-height:16px; }
.legal-link { display:inline-flex; align-items:center; min-height:40px; padding:0 8px; margin-left:-8px; border-radius:var(--radius-md); color:var(--foreground); font-size:13px; font-weight:500; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--gray-400); }
.legal-link:hover { background:var(--gray-100); text-decoration:underline; text-underline-offset:2px; }
.legal-foot p { margin:0; max-width:68ch; }
.legal-links { display:flex; flex-wrap:wrap; gap:0 8px; margin-left:-8px; }
.legal-links .legal-link { margin-left:0; }
button.legal-link { border:0; background:none; font-family:inherit; cursor:pointer; }
.cl-adult { display:grid; gap:4px; }
.cl-adult .cl-check { display:flex; align-items:flex-start; flex:initial; min-height:0; padding:4px 0; font-weight:400; font-size:14px; line-height:20px; }
.cl-adult .cl-check input { flex:none; margin-top:-2px; }
.cl-adult .cl-check a { text-decoration:underline; text-underline-offset:2px; }
.cl-note a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
/* ship76: "Happening now" on an event that has started, in place of its date and time (row label and carousel) */
.ev-live { display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--red); white-space:nowrap; }
.ev-live::before { content:""; width:8px; height:8px; flex:none; border-radius:9999px; background:currentColor; }

/* ship83: one action button for every card (Tickets, Details, Apply, Send flowers, Plant a tree, Donate): the same
   font, ink and outline everywhere; its size, padding and radius are in the ship83 block at the end of the file. */
.evc.evc .evc-foot.evc-foot .ev-go, article.card.row.row:has(> .ca) .src.src .ev-go, article.card.row.row:has(> .ca) .src.src .ad-cta, article.card.row.row.ad-row:not(.breaking):has(> .ca) .src.src .ad-cta, .ob-acts.ob-acts .ob-act > a, .card .ob-flw.ob-flw .ob-act > a { font-family:inherit; font-size:13px; font-weight:500; color:var(--foreground); background:transparent; border-color:currentColor; text-decoration:none; }
.evc.evc .evc-foot.evc-foot .ev-go:hover, article.card.row.row:has(> .ca) .src.src .ev-go:hover, article.card.row.row:has(> .ca) .src.src .ad-cta:hover, article.card.row.row.ad-row:not(.breaking):has(> .ca) .src.src .ad-cta:hover, .ob-acts.ob-acts .ob-act > a:hover, .card .ob-flw.ob-flw .ob-act > a:hover { background:var(--gray-100); color:var(--foreground); text-decoration:none; }
/* ship83: one liked look for every heart (bottom rows and the picture corner): filled in --react-on. A visible count
   uses the time text's size so it sits on the same line. */
.like.like[aria-pressed="true"], .evc.evc .evc-pic > .like.evc-like[aria-pressed="true"] { color:var(--react-on); }
article.card.row.row:has(> .ca) .acts.acts .like > span { font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; }
.evc.evc .evc-pic > .like.evc-like::before { background:rgba(255,255,255,.92); }
.evc.evc .evc-pic > .like.evc-like:not([aria-pressed="true"]) { color:#111; }

/* ship84: a rail's event total ("1 event", "12 events") in the header's own colour family, quiet and one line. */
.evx-sh .evx-ct { font-size:13px; font-weight:500; color:var(--text-muted); }

/* ship85: the date badge is one pill, "NOVEMBER 1": month and day share a row and a size step, so the pill is as tall as
   the heart's circle and sits on one line with it across the card top. */
.evx-badge.evx-badge .evx-mo { font-size:11px; line-height:16px; letter-spacing:.06em; }
.evx-badge.evx-badge .evx-dd { font-size:15px; line-height:16px; font-weight:700; }
.evx-tile .evx-md .evx-dd { font-size:30px; line-height:34px; }

/* ship87: the like count on an event picture, beside the heart inside its backdrop (only when there is a count). */
.evc.evc .evc-pic > .like.evc-like > span { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; color:inherit; }

/* ship89: the bottom-row heart's count uses the time's size with fixed-width digits. */
article.card.row.row:has(> .ca) .acts.acts .like { font-size:13px; font-variant-numeric:tabular-nums; }

/* ---------- ship81: compact event cards on big screens ----------
   The same card (picture or tile with the heart top-right, title, venue, the one-line bottom row with 24px flag, share
   and Tickets/Details) in a narrower, tighter version from 1024px, so each side-scroller (Popular, every day) shows more
   cards: about 3.6 at 1280px (was 3.0) and 4 whole cards at 1440-1679px (was 3.3), 5 at 1680px+. The width is the
   narrowest that still fits "Happening now" or a time plus the controls without truncation; spacing stays on the scale. */
@media (min-width:1024px) {
  .evx-rail { gap:var(--sp-2); }
  .evc.evc { width:240px; }
  .evx-rail .evc.evc > .evc-body { padding:var(--sp-2); } /* (beats the later ship80 layout rule) */
  .evx-rail .evc.evc > .evc-body > .evc-foot { gap:var(--sp-1); } /* the time column takes the right group's margin-left:auto slack */
  .evc.evc .evc-foot > .evc-right { gap:var(--sp-2); }
  .evc.evc .evc-foot .acts { gap:var(--sp-1); }
  .evc.evc .evc-foot .ev-go { padding:0 var(--sp-2); font-size:12px; }
  .evc.evc .evt-title { font-size:14px; line-height:20px; }
  .evc.evc .evc-pic { aspect-ratio:3/2; }
}

/* ---------- ship74/ship75: THE shared row (UI.row in app.js; api/_cards.js) for every card list ----------
   Every rule starts with article.card.row.row:not(.breaking):has(> .ca) (one selector, specific enough to win over the older per-card rules).
   One story per row at every width: a small rounded square picture on the left only when the story has one (Police &
   courts never do; no-picture stories are text only, no empty box), a bold section label, a larger regular-weight
   headline, then the source + time line. Thin light dividers between rows instead of boxed cards. The Breaking card,
   ad rows match it. */

article.card.row.row:not(.breaking):has(> .ca) { --pic:96px; --meta-h:40px; --ico:24px; --act-gap:12px; display:grid; grid-template-columns:1fr; padding:var(--sp-4) 0 var(--sp-3); min-height:0; border:0; border-bottom:1px solid var(--gray-200); border-radius:0; box-shadow:none; background:transparent; content-visibility:auto; contain-intrinsic-size:auto 150px; }
article.card.row.row:not(.breaking):has(> .ca):hover { background:transparent; box-shadow:none; border-color:var(--gray-200); }
article.card.row.row:not(.breaking):has(> .ca) .ca { display:grid; grid-template-columns:var(--pic) minmax(0, 1fr); grid-template-areas:none; grid-template-rows:auto; row-gap:0; column-gap:var(--sp-4); align-items:stretch; padding:0; }
article.card.row.row:not(.breaking):has(> .ca) .ca.noimg { grid-template-columns:minmax(0, 1fr); }
article.card.row.row:not(.breaking):has(> .ca) .ca > .th { position:static; display:block; align-self:center; width:var(--pic); height:var(--pic); aspect-ratio:1/1; border-radius:8px; object-fit:cover; object-position:center 30%; background:var(--gray-200); }
article.card.row.row:not(.breaking):has(> .ca) .ca .bd { padding:0; display:flex; flex-direction:column; gap:var(--sp-1); }
article.card.row.row:not(.breaking):has(> .ca) .kicker { font-size:14px; line-height:20px; font-weight:700; color:var(--foreground); }
article.card.row.row:not(.breaking):has(> .ca) h2 { font-size:19px; line-height:28px; font-weight:500; letter-spacing:0; display:block; -webkit-line-clamp:unset; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* one line; the full headline is in its title */
article.card.row.row:not(.breaking):has(> .ca) .bd p:not(.cl-note) { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; min-width:0; margin:0; max-width:none; font-size:14px; line-height:20px; color:var(--text-muted); } /* the preview: at most two lines */
article.card.row.row:not(.breaking):has(> .ca) .src { margin:auto 0 0; padding:0; gap:var(--sp-2); font-size:13px; line-height:20px; }
article.card.row.row:not(.breaking):has(> .ca) .src .when { flex:none; margin-left:auto; padding-left:var(--act-gap); white-space:nowrap; }
article.card.row.row:not(.breaking):has(> .ca) .av { width:var(--ico); height:var(--ico); }
article.card.row.row:not(.breaking):has(> .ca) .cf { position:absolute; right:0; bottom:var(--sp-3); z-index:1; display:flex; align-items:center; box-sizing:border-box; height:var(--meta-h); min-height:0; margin:0; padding:0; border-top:0; }
article.card.row.row:not(.breaking):has(> .ca) .acts { margin-right:0; gap:var(--act-gap); flex-wrap:nowrap; }
article.card.row.row:not(.breaking):has(> .ca) .acts :is(.like, .share) { position:relative; inset:auto; transform:none; margin:0; flex:none; box-sizing:border-box; width:var(--ico); min-width:var(--ico); height:var(--ico); padding:0; gap:0; } /* the same box as the source logo */
article.card.row.row:not(.breaking):has(> .ca) .acts :is(.like, .share)::after { content:""; position:absolute; inset:-8px -6px; } /* a 40px-tall tap target around the small icon */
article.card.row.row:not(.breaking):has(> .ca) .acts .like span { display:none; } /* no count beside the heart: it would make it wider than the logo */
article.card.row.row:not(.breaking):has(> .ca) .acts :is(.like, .share) svg { width:18px; height:18px; }
article.card.row.row:not(.breaking):has(> .ca) .src { box-sizing:border-box; height:var(--meta-h); min-height:var(--meta-h); margin-top:auto; padding-right:calc(var(--nact, 2) * (var(--ico) + var(--act-gap))); display:flex; align-items:center; flex-wrap:nowrap; min-width:0; overflow:hidden; } /* one line: logo + source (+ place) left, time right next to the heart + share */
article.card.row.row:not(.breaking):has(> .ca) .src b { flex:0 1000 auto; min-width:min(5.5em, 40%); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
article.card.row.row:not(.breaking):has(> .ca) .src .place { flex:0 1 auto; white-space:nowrap; min-width:0; overflow:hidden; text-overflow:ellipsis; }
article.card.row.row:not(.breaking):has(> .ca) .src .av { flex:none; }
/* ship94: on phones a story headline gets up to three lines instead of one cut-off line; a step smaller so a long one
   stays compact, and the preview gives way to one line so the row is never much taller than before. Source names still
   truncate in the bottom row. */
@media (max-width:599.98px) {
  article.card.row.row:not(.breaking):has(> .ca) h2 { font-size:17px; line-height:22px; white-space:normal; overflow:hidden; text-overflow:clip; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3; overflow-wrap:anywhere; }
  article.card.row.row:not(.breaking):has(> .ca) .bd p:not(.cl-note) { -webkit-line-clamp:1; line-clamp:1; }
}
:is(.list, .cl-list, .evx-day, .evx-sec):has(> .card.row) > .card.breaking { margin-bottom:var(--sp-2); }
@media (max-width:389.98px) { /* the smallest phones: a smaller picture so logo, source, time, heart and share still fit on one row */
  article.card.row.row:not(.breaking):has(> .ca) { --pic:72px; --act-gap:10px; }
  article.card.row.row:not(.breaking):has(> .ca) .ca { column-gap:var(--sp-3); }
  article.card.row.row:not(.breaking):has(> .ca) .src b { min-width:2.5em; }
}
@media (min-width:640px) {
  article.card.row.row:not(.breaking):has(> .ca) { --pic:112px; }
  article.card.row.row:not(.breaking):has(> .ca) .ca { column-gap:var(--sp-6); }
  article.card.row.row:not(.breaking):has(> .ca) .bd p:not(.cl-note) { font-size:15px; line-height:22px; }
  article.card.row.row:not(.breaking):has(> .ca) h2 { font-size:20px; line-height:28px; }
}
article.card.row.row:not(.breaking):has(> .ca) .ca:hover h2 { color:var(--blue); }

article.card.row.row.ad-row:not(.breaking):has(> .ca) .src { padding-right:0; } /* no heart or share on an ad */
article.card.row.row.ad-row:not(.breaking):has(> .ca) .src .ad-lab { flex:none; min-width:0; font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--text-muted); }
article.card.row.row.ad-row:not(.breaking):has(> .ca) .src .ad-cta { flex:none; margin-left:auto; padding-left:var(--sp-2); white-space:nowrap; }

@media (max-width:639.98px) { article.card.row.row:not(.breaking):has(> .ca) .src .place { display:none; } } /* phones: no county tag in the bottom row (the desktop row keeps it) */
article.card.row.row:not(.breaking):has(> .ca) h2 a { display:inline; padding:0; margin:0; font:inherit; background:none; }
article.card.row.row:not(.breaking):has(> .ca) :is(.kicker, .src) .cl-contact { display:inline; padding:0; margin:0; border:0; background:none; font:inherit; color:var(--text-muted); }
article.card.row.row:not(.breaking):has(> .ca) .src .cl-price { font-family:inherit; text-decoration:none; }
/* ship75: the bottom row matches the headline: the same color (--row-ink) and weight (--row-wt) for the source name and
   the time, and heart / share / report icons in that color with a stroke that reads as heavy as the 500 headline.
   A liked heart keeps its own color; focus rings stay (outline from the base .like / .share rules). */
article.card.row.row:not(.breaking):has(> .ca) { --row-ink:var(--foreground); --row-wt:500; --row-stroke:2.25; }
article.card.row.row:not(.breaking):has(> .ca) h2 { color:var(--row-ink); font-weight:var(--row-wt); }
article.card.row.row:not(.breaking):has(> .ca) .src :is(b:not(.ad-lab), .when) { color:var(--row-ink); font-weight:var(--row-wt); }
article.card.row.row:not(.breaking):has(> .ca) .acts :is(.like:not([aria-pressed="true"]), .share, .cl-ico) { color:var(--row-ink); }
article.card.row.row:not(.breaking):has(> .ca) .acts :is(.like, .share, .cl-ico) svg { stroke-width:var(--row-stroke); }
article.card.row.row:not(.breaking):has(> .ca) .acts :is(.like, .share, .cl-ico):focus-visible { outline:2px solid var(--brand); outline-offset:2px; }
/* ship75: the row in every list: one per line, no gaps (the rows draw their own dividers) */
:is(.list, .cl-list, .evx-day, .evx-sec):has(> .card.row) { display:flex; flex-direction:column; gap:0; }
article.card.row.row:not(.breaking):has(> .ca) .bav { width:var(--ico); height:var(--ico); flex:none; font-size:10px; line-height:var(--ico); border-radius:9999px; }
article.card.row.row:not(.breaking):has(> .ca) h2 a { color:inherit; text-decoration:none; }
article.card.row.row:not(.breaking):has(> .ca) h2 a::before { content:""; position:absolute; inset:0; } /* the whole row opens the headline link (bottom-row links sit above it) */
article.card.row.row:not(.breaking):has(> .ca) .src > :is(a, button, .ob-acts, .ad-cta), article.card.row.row:not(.breaking):has(> .ca) .kicker a { position:relative; z-index:1; }
article.card.row.row:not(.breaking):has(> .ca) .kicker { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
article.card.row.row:not(.breaking):has(> .ca) .src :is(.cl-contact, .cl-price, .rt, .deal-code) { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
article.card.row.row:not(.breaking):has(> .ca) .src .cl-price { flex:none; font-weight:600; color:var(--foreground); }
article.card.row.row:not(.breaking):has(> .ca) .src .cl-contact { flex:0 1 auto; color:var(--text-muted); min-height:0; height:auto; line-height:20px; align-self:center; }
article.card.row.row:not(.breaking):has(> .ca) .src a.cl-contact::after { content:""; position:absolute; inset:-10px 0; } /* a 40px tap target without a taller line */
article.card.row.row:not(.breaking):has(> .ca) .src .rt { flex:none; }
article.card.row.row:not(.breaking):has(> .ca) .src .when ~ .rt { padding-left:var(--act-gap); }
article.card.row.row:not(.breaking):has(> .ca) .src .ad-cta { text-decoration:none; } /* ship83: ink and weight from the shared action button */
article.card.row.row:not(.breaking):has(> .ca) .src .ev-go svg { display:none; }
article.card.row.row:not(.breaking):has(> .ca) .src .ob-acts { flex:1 1 0; min-width:0; }
article.card.row.row:not(.breaking):has(> .ca) .bd > .cl-feature { align-self:flex-start; margin-top:var(--sp-1); }
article.card.row.row:not(.breaking):has(> .ca) .acts .cl-ico { position:relative; flex:none; box-sizing:border-box; width:var(--ico); height:var(--ico); padding:0; margin:0; display:inline-flex; align-items:center; justify-content:center; border-radius:9999px; color:var(--text-muted); }
article.card.row.row:not(.breaking):has(> .ca) .acts .cl-ico svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; }
article.card.row.row:not(.breaking):has(> .ca) .acts .cl-ico::after { content:""; position:absolute; inset:-8px -6px; }
article.card.row.row:not(.breaking):has(> .ca) .acts .cl-ico.on { color:var(--foreground); }

/* ---------- card spacing: one set of tokens for every card (news and police, Breaking, Events, Jobs, Deals,
   Classifieds, obituaries, the in-listing Sponsored card, sponsor lines and side ads). Spacing only: colours,
   fonts and layout stay as above. --card-pad inner padding (16px desktop, 12px phone); --card-gap between cards;
   --card-stack between the lines inside a card (title, meta, body, chips); --card-tap the smallest tap target. */
:root { --card-pad:16px; --card-gap:16px; --card-stack:6px; --card-tap:40px; }
@media (max-width:639px) { :root { --card-pad:12px; --card-gap:12px; } }
.list, .cl-list, .evx-day, .evx-sec, .ev-grid, .evx-sk { gap:var(--card-gap); }
/* news and police cards (photo rules are in makeCard: police and court items never carry one) */
.card a.ca .bd, .card.breaking .bd { padding:var(--card-pad) var(--card-pad) 4px; gap:var(--card-stack); }
.card .cf { margin:0 var(--card-pad); min-height:calc(var(--card-tap) + 8px); }
@media (max-width:639px) {
  .card:not(.breaking):has(a.ca > .th) a.ca .bd { padding:var(--card-pad) var(--card-pad) 4px; gap:4px; }
  .card:not(.breaking):has(a.ca > .th) .cf, .card.breaking .cf { margin:0 calc(var(--card-pad) - 8px) 0 var(--card-pad); min-height:44px; }
  .card.breaking .bd { padding:var(--card-pad) var(--card-pad) 4px; }
}
@media (min-width:640px) { .card a.ca .bd { padding:var(--card-pad) var(--card-pad) 4px; } .card .cf { margin:0 var(--card-pad); } }
/* Events: the card grows with its text instead of a fixed height; even padding and line spacing; a 40px foot */
.evc-body { padding:var(--card-pad); grid-template-rows:auto; align-content:start; row-gap:var(--card-stack); }
.evt > * { padding-right:0; }
.evt-title { margin:0; }
.evt-when { margin-top:2px; }
.evt-foot { height:auto; min-height:var(--card-tap); margin:2px 0 0; padding-right:0; align-self:end; gap:8px; }
.ev-body { padding:var(--card-pad); gap:var(--card-stack); }
.ev-go, .evt-foot .ev-go { min-height:var(--card-tap); }
/* Jobs, Deals, Classifieds and obituary posts */
.cl-item { padding:var(--card-pad); gap:var(--card-stack) var(--card-pad); }
.cl-main { gap:var(--card-stack); }
.cl-foot { margin-top:2px; gap:8px; }
.cl-link { min-height:var(--card-tap); padding:0 8px; }
.cl-foot .cl-link:last-child { margin-right:-8px; } /* the text lines up with the padding; the 40px target stays */
.cl-links a { min-height:var(--card-tap); }
.ob { padding:var(--card-pad); gap:var(--card-stack); }
/* Obituary action row (ship59; replaces ship56's two rows): Send flowers, Plant a tree and Donate sit with the heart
   and share in ONE row, the card's last, at every width. Links on the left, reactions on the right, nothing wraps.
   The links measure their own space (container query on .ob-acts, which takes what the reactions leave): narrow, each
   is a short label (Flowers, Tree, Donate); with more room an icon is added, then the full label. Only one label is
   ever displayed, so the link's name is what it shows (axe label-in-name). Targets: links and buttons 32px tall,
   the reactions 32px icon buttons (WCAG 2.5.8 asks 24px). On phones a feed obituary's picture fills the left of the
   card's link only, so the row below spans the whole card. */
.ob { display:flex; flex-direction:column; }
.ob > .ob-acts { margin-top:auto; padding-top:var(--card-stack); border-top:1px solid var(--border); }
.ob > .cl-foot { margin-bottom:var(--card-stack); }
.ob-acts { display:flex; flex-wrap:nowrap; align-items:center; gap:0 12px; min-width:0; container:obacts / inline-size; }
.ob-act { display:inline-flex; align-items:center; gap:4px; flex:none; white-space:nowrap; }
.ob-flw a, .card .ob-flw a { display:inline-flex; align-items:center; gap:4px; min-height:32px; padding:0 3px; margin:0 -3px; white-space:nowrap; }
.ob-flw a svg { display:none; flex:none; width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ob-flw .ob-long { display:none; }
@container obacts (min-width:200px) { .ob-acts:not(.ob-paidrow) a svg { display:block; } }
@container obacts (min-width:290px) { .ob-acts:not(.ob-paidrow) .ob-long { display:inline; } .ob-acts:not(.ob-paidrow) .ob-short { display:none; } }
@container obacts (min-width:260px) { .ob-acts.ob-paidrow a svg { display:block; } }
@container obacts (min-width:350px) { .ob-acts.ob-paidrow .ob-long { display:inline; } .ob-acts.ob-paidrow .ob-short { display:none; } }
.card .cf { flex-wrap:wrap; }
.card:has(.cf-ob) { display:flex; flex-direction:column; }
.card:has(.cf-ob) > .cf { margin-top:auto; }
.card .cf.cf-ob { flex-wrap:nowrap; justify-content:space-between; gap:12px; min-height:44px; }
.card .cf.cf-ob > .ob-acts { flex:1 1 0; margin:0; padding:0; }
.card .cf.cf-ob > .acts { flex:none; margin-right:-4px; }
.card .cf.cf-ob .like, .card .cf.cf-ob .share { min-width:32px; height:32px; padding:0 4px; justify-content:center; }
@media (max-width:639px) {
  .card:not(.breaking):has(a.ca > .th):has(.cf-ob) { padding-left:0; min-height:0; }
  .card:not(.breaking):has(.cf-ob) a.ca:has(> .th) { position:relative; padding-left:var(--pic); min-height:123px; }
  .card:not(.breaking):has(a.ca > .th) .cf.cf-ob { margin:auto calc(var(--card-pad) - 4px) 0 var(--card-pad); }
}
/* in-listing Sponsored card, sponsor lines and side ads */
.ad-card { padding:var(--card-pad); gap:var(--card-stack); }
.ad-card .rail-cta, .rail-ad .rail-cta { min-height:var(--card-tap); margin-top:2px; padding:0 14px; }
.rail-ad { padding:var(--card-pad); gap:8px; }
.spon { padding:0 var(--card-pad); min-width:0; max-width:100%; }
.ad-card .ad-img, .rail-ad .ad-img { width:100%; margin:0; }
/* ---------- wide screens: a wider page, with tall side ads in the margins on the board tabs only ----------
   --page-max is the content width (nav, tabs and main share it); --rail-w the side-ad column; --rail-gap the space
   between them. Rails are fixed (they stay put while the list scrolls), hidden below 1360px, where the in-listing
   card still applies, and absent on Obituaries (body[data-ads] and TSNAds.railFill); News has them too. Lists gain columns
   rather than stretching; text keeps its line-length caps. */
:root { --page-max:960px; --rail-w:160px; --rail-gap:24px; --news-max:960px; }
@media (min-width:1440px) { :root { --page-max:1056px; } } /* 160x600 side ads: 1056 + 2 × (160 + 24) = 1424. 120x600 is too narrow for a readable headline */
@media (min-width:1680px) { :root { --page-max:1280px; } } /* 160x600 */
@media (min-width:1920px) { :root { --page-max:1440px; --rail-gap:32px; } }
@media (min-width:2560px) { :root { --page-max:1760px; --rail-w:300px; --rail-gap:48px; } } /* 300x600 */
.nav-in, .nav-tabs, main { max-width:var(--page-max); }
@media (min-width:1360px) {
  .rail { top:124px; width:var(--rail-w); max-height:calc(100vh - 140px); overflow:hidden; gap:var(--card-gap); }
  .rail-l { left:calc(50% - var(--page-max) / 2 - var(--rail-gap) - var(--rail-w)); }
  .rail-r { right:calc(50% - var(--page-max) / 2 - var(--rail-gap) - var(--rail-w)); }
  .rail-ad.rail-sky { min-height:min(600px, calc(100vh - 140px)); align-content:start; grid-template-rows:auto auto auto auto 1fr auto; }
  .rail-ad.rail-sky .rail-cta { align-self:end; }
}
@media (min-width:1440px) {
  .list { grid-template-columns:1fr 1fr; gap:var(--card-gap); align-items:stretch; }
  .list > .card.breaking, .list > :not(.card) { grid-column:1 / -1; } /* Breaking spans the row */
  /* News stays one story per row at every width. The column is capped at --news-max and centered in the wider page,
     so a headline and its two-line summary keep a readable line length; the side ads stay at the page edges. */
  .list.news-one { grid-template-columns:1fr; max-width:var(--news-max); margin-left:auto; margin-right:auto; }
  .evx-day { grid-template-columns:minmax(0, 1fr); }
}
@media (min-width:1920px) {
  .deal-grid, .job-grid { grid-template-columns:1fr 1fr 1fr; }
}

/* ---------- ship80: one layout grid ----------
   One spacing scale on a 4px base (--sp-1 4px, --sp-2 8px, --sp-3 12px, --sp-4 16px, --sp-6 24px, --sp-8 32px,
   --sp-12 48px), one page gutter and one max content width. The header, tabs, page body and footer share the same
   left/right edges; lists, card internals, section headings, filters and forms are CSS grids spaced with the scale.
   Spacing only (no colours or fonts here). The footer stays in the page flow (never position:fixed). */
:root { --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px;
  --content-max:var(--page-max); --card-pad:var(--sp-4); --card-gap:var(--sp-4); --card-stack:var(--sp-2); }
@media (max-width:639px) { :root { --card-pad:var(--sp-3); --card-gap:var(--sp-3); } }
.nav-in, .nav-tabs { max-width:var(--content-max); padding-left:var(--gutter); padding-right:var(--gutter); }
main { max-width:var(--content-max); padding-left:var(--gutter); padding-right:var(--gutter); padding-top:var(--sp-4); }
.list, .cl-list, .sr-sec, .evx, .evx-filters { display:grid; grid-template-columns:minmax(0, 1fr); }
.list, .cl-list, .evx { gap:var(--card-gap); }
.sr-sec, .evx-filters { gap:var(--sp-2); }
.evx-sh, .cl-bar { display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:var(--sp-2); margin:0; }
.evx-day { display:grid; grid-template-columns:minmax(0, 1fr); gap:var(--sp-2); }
.evx-day h3 { gap:var(--sp-2); }
.sr-h { margin:var(--sp-2) 0 0; gap:var(--sp-2); }
.cl-chips { gap:var(--sp-2); padding-bottom:var(--sp-1); }
.cl-form { gap:var(--sp-3); padding:var(--card-pad); }
.evc.evc { display:grid; grid-template-rows:auto 1fr; } /* picture, then the body; the body is a column whose bottom row is pinned (margin-top:auto) */
.evc.evc > .evc-body { gap:var(--sp-1); padding:var(--sp-3); }
.legal-foot { display:grid; gap:var(--sp-2); margin:var(--sp-8) 0 0; padding:var(--sp-3) 0 0; }
.legal-links { gap:0 var(--sp-2); margin-left:calc(-1 * var(--sp-2)); }
.legal-link { padding:0 var(--sp-2); }

/* ship82: alignment — one token rhythm inside event cards, heart chip on the same corner inset as the date badge */
.evc.evc .evc-body > * + * { margin-top:var(--sp-1); }
.evc.evc .evc-body > .evc-foot { margin-top:auto; }
.evc.evc .evc-pic > .like.evc-like { top:var(--sp-1); right:var(--sp-1); }
.evc.evc .evc-pic > .like.evc-like::before { inset:var(--sp-1); }
.evx-badge { top:var(--sp-2); left:var(--sp-2); }

/* ship83: one icon family. Flag, share and heart (bottom rows and the heart on an event picture) draw the same 20px
   glyph at the same 2px stroke, centred in the same 24px box, on the bottom row's centre line with the time and source. */
:is(article.card.row.row:has(> .ca) .acts.acts, .evc.evc .evc-foot.evc-foot .acts, .card .cf.cf-ob.cf-ob) :is(.like, .share, .cl-ico) { box-sizing:border-box; width:var(--ico, 24px); min-width:var(--ico, 24px); height:var(--ico, 24px); min-height:0; padding:0; display:inline-flex; align-items:center; justify-content:center; align-self:center; }
:is(article.card.row.row:has(> .ca) .acts.acts, .evc.evc .evc-foot.evc-foot .acts, .card .cf.cf-ob.cf-ob) :is(.like, .share, .cl-ico) svg, .evc.evc .evc-pic.evc-pic > .like.evc-like svg { width:20px; height:20px; stroke-width:2; fill:none; flex:none; }
:is(.like, .like.like)[aria-pressed="true"] svg, .evc.evc .evc-pic.evc-pic > .like.evc-like[aria-pressed="true"] svg { fill:currentColor; }
article.card.row.row:has(> .ca) .acts.acts .like:has(> span:not(:empty)) { gap:var(--sp-1); } /* ship89: width fixed below */
article.card.row.row:has(> .ca) .acts.acts .like > span:not(:empty) { display:inline; line-height:var(--ico, 24px); }
.evc.evc .evc-pic.evc-pic > .like.evc-like::before { inset:var(--sp-1); }
/* ship83: the shared action button: as tall as the icons, one padding and a pill radius; a 40px tap area around it. */
.evc.evc .evc-foot.evc-foot .ev-go, article.card.row.row:has(> .ca) .src.src .ev-go, article.card.row.row:has(> .ca) .src.src .ad-cta, article.card.row.row.ad-row:not(.breaking):has(> .ca) .src.src .ad-cta, .ob-acts.ob-acts .ob-act > a, .card .ob-flw.ob-flw .ob-act > a { position:relative; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; height:var(--ico, 24px); min-height:0; margin:0; padding:0 var(--sp-2); gap:0; border:1.5px solid; border-radius:9999px; line-height:1; white-space:nowrap; flex:none; }
.evc.evc .evc-foot.evc-foot .ev-go svg, article.card.row.row:has(> .ca) .src.src .ev-go svg, article.card.row.row:has(> .ca) .src.src .ad-cta svg, article.card.row.row.ad-row:not(.breaking):has(> .ca) .src.src .ad-cta svg, .ob-acts.ob-acts .ob-act > a svg, .card .ob-flw.ob-flw .ob-act > a svg { display:none; }
.evc.evc .evc-foot.evc-foot .ev-go::after, article.card.row.row:has(> .ca) .src.src .ev-go::after, article.card.row.row:has(> .ca) .src.src .ad-cta::after, article.card.row.row.ad-row:not(.breaking):has(> .ca) .src.src .ad-cta::after, .ob-acts.ob-acts .ob-act > a::after, .card .ob-flw.ob-flw .ob-act > a::after { content:""; position:absolute; inset:calc(var(--sp-2) * -1) calc(var(--sp-1) * -1); }
.ob-acts.ob-acts { flex-wrap:wrap; gap:var(--sp-2); }
.ob-acts.ob-acts .ob-long { display:inline; }
.ob-acts.ob-acts .ob-short { display:none; }
/* ship83: obituary rows: the full-name buttons (Send flowers, Plant a tree, Donate) wrap onto their own lines when the
   row is narrow, so none is cut; the time stays on the last line, centred with the heart and share. */
article.card.row.row:has(> .ca) .src.src:has(> .ob-acts) { height:auto; flex-wrap:wrap; row-gap:var(--sp-2); padding-top:var(--sp-2); }
article.card.row.row:has(> .ca) .src.src > .ob-acts { flex:1 0 100%; min-width:0; } /* the buttons line(s), then the time on the heart and share line */
article.card.row.row:has(> .ca) .src.src:has(> .ob-acts) > :not(.ob-acts) { min-height:var(--meta-h); display:inline-flex; align-items:center; }
/* ship83: on the 240px cards (1024px and up) "Happening now" keeps its whole label beside flag, share and the button:
   the controls sit one small step apart. */
@media (min-width:1024px) {
  .evx-rail .evc.evc .evc-foot.evc-foot > .evc-right { gap:var(--sp-1); }
}
/* ship84: rail header = heading | total | arrows. The total sits at the right end, on the rail's right edge and page
   gutter on phones (no arrows), just left of the arrows from 640px, all on one centre line; never wraps or truncates. */
.evx-sh.evx-sh { grid-template-columns:minmax(0, 1fr) auto auto; align-items:center; }
.evx-sh > .evx-ct { justify-self:end; white-space:nowrap; line-height:var(--sp-6); font-variant-numeric:tabular-nums; }
@media (max-width:639px) { .evx-sh.evx-sh { grid-template-columns:minmax(0, 1fr) auto; } } /* no arrows on phones: the total takes the gutter edge */
/* ship85: the badge pill and the tile's month/day row. 32px tall (the heart circle), 8px corner inset like the heart,
   centred contents; never reaches the heart on a 240px card (max-width leaves the heart's 48px corner free). */
.evx-badge.evx-badge { flex-direction:row; align-items:center; gap:var(--sp-1); box-sizing:border-box; height:var(--sp-8); min-width:0; max-width:calc(100% - var(--sp-12) - var(--sp-2)); padding:0 var(--sp-3); border-radius:9999px; white-space:nowrap; top:var(--sp-2); left:var(--sp-2); }
.evx-tile .evx-md { display:flex; align-items:baseline; gap:var(--sp-2); white-space:nowrap; }
/* ship86: on wide rows (1024px and up) the obituary buttons fit beside the time, so they share the heart and share line
   again instead of stacking above it (phones and tablets keep the stacked layout from ship83). */
@media (min-width:1024px) {
  article.card.row.row:has(> .ca) .src.src:has(> .ob-acts) { flex-wrap:nowrap; padding-top:0; }
  article.card.row.row:has(> .ca) .src.src > .ob-acts { flex:0 1 auto; flex-wrap:nowrap; }
}
/* ship87: a heart with a count on an event picture grows from the 32px circle into a 32px pill (same backdrop, same
   corner inset, same centre line as the date pill); the number sits right of the glyph. No count = the circle as before. */
.evc.evc .evc-pic.evc-pic > .like.evc-like:has(> span:not(:empty)) { width:auto; min-width:var(--card-tap); padding:0 var(--sp-3) 0 var(--sp-2); gap:var(--sp-1); }
.evc.evc .evc-pic.evc-pic > .like.evc-like > span:not(:empty) { position:relative; width:auto; height:auto; overflow:visible; clip:auto; line-height:var(--sp-4); }
/* ship88: a heart with a visible count is wider than the 24px icon box; the row's meta line reserves that extra width
   (the count's own room, up to 4 digits) so the posted time and source never sit under the count. */
article.card.row.row:not(.breaking):has(> .ca):has(.acts .like) .src.src { padding-right:calc(var(--nact, 2) * (var(--ico) + var(--act-gap)) + var(--sp-1) + 4ch); } /* ship89: always, so a count appearing moves nothing */
/* ship89: the bottom-row heart is one fixed slot (icon + room for a 4-digit count) whether or not it has a count, and
   the count never changes the slot, so liking, unliking or 9 -> 10 moves nothing; no transitions on it either. */
article.card.row.row:has(> .ca) .acts.acts .like { box-sizing:border-box; width:calc(var(--ico) + var(--sp-1) + 4ch); min-width:calc(var(--ico) + var(--sp-1) + 4ch); justify-content:flex-start; gap:var(--sp-1); padding:0; transition:none; }
article.card.row.row:has(> .ca) .acts.acts .like > span { display:inline-block; width:4ch; min-width:4ch; text-align:left; line-height:var(--ico); white-space:nowrap; }
/* ship89: the fixed like slot takes 4ch more on the meta line, so a long source name gives way (ellipsis) before the
   posted time is pushed under the heart. */
article.card.row.row:not(.breaking):has(> .ca):has(.acts .like) .src b { min-width:2.5em; }

/* ship93: obituary cards below 1024px: Send flowers, Plant a tree (and Donate), the posted time, the heart and share
   all on ONE row, everywhere an obituary card appears (Obituaries, search, News fallbacks). The row runs the card's full
   width, under the picture too (the picture sits at the top, the text column keeps room for it), the buttons use their
   short labels ("Flowers", "Tree") and may shorten with an ellipsis, never wrap and are never hidden; the time keeps
   its short form and the fixed heart slot (ship89) so nothing shifts. */
@media (max-width:1023.98px) {
  article.card.row.row.row-obit:has(> .ca) .ca { column-gap:var(--sp-3); }
  article.card.row.row.row-obit:has(> .ca) .ca > .th { align-self:start; }
  article.card.row.row.row-obit:has(> .ca) .ca:has(> .th) .bd { min-height:calc(var(--pic) + var(--sp-2) + var(--meta-h)); }
  article.card.row.row.row-obit:has(> .ca) .ca:has(> .th) .src.src { margin-left:calc((var(--pic) + var(--sp-3)) * -1); }
  article.card.row.row.row-obit:has(> .ca) .src.src:has(> .ob-acts) { height:var(--meta-h); flex-wrap:nowrap; padding-top:0; row-gap:0; }
  article.card.row.row.row-obit:has(> .ca) .src.src > .ob-acts { container-type:normal; flex:0 1 auto; flex-wrap:nowrap; min-width:0; gap:var(--sp-2); overflow:hidden; } /* (no size container here: it would measure the buttons as 0 wide) */
  article.card.row.row.row-obit:has(> .ca) .src.src > .ob-acts .ob-act { flex:0 1 auto; min-width:0; display:inline-flex; }
  article.card.row.row.row-obit:has(> .ca) .src.src > .ob-acts .ob-act > a { flex:0 1 auto; min-width:0; max-width:100%; overflow:hidden; }
  article.card.row.row.row-obit:has(> .ca) .src.src > .ob-acts .ob-act > a > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  article.card.row.row.row-obit:has(> .ca) .src.src > .ob-acts .ob-long { display:none; }
  article.card.row.row.row-obit:has(> .ca) .src.src > .ob-acts .ob-short { display:inline; }
  article.card.row.row.row-obit:has(> .ca) .src.src > :not(.ob-acts) { flex:none; white-space:nowrap; }
}
/* ship100: town, dates, Add an event and categories are one grid (.evx-head is display:contents). Below 1024px the dates
   keep their own row under the town (the head-to-dates gap stays --card-gap). From 1024px the column is at least 896px
   wide (the side ads sit in the margins), room for town + dates (~550px) + Add an event, so the dates join the town row;
   a long town ellipsizes, and a long picked date wraps the chips inside their own column rather than clipping them. */
.evx-filters { grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"town add" "dates dates" "cats cats"; column-gap:var(--sp-3); }
.evx-filters > .evx-head { display:contents; }
.evx-filters .evx-ht { grid-area:town; }
.evx-filters .evx-head > .cl-go { grid-area:add; justify-self:end; }
.evx-filters > [aria-label="When"] { grid-area:dates; margin-top:calc(var(--card-gap) - var(--sp-2)); }
.evx-filters > [aria-label="Category"] { grid-area:cats; }
@media (min-width:1024px) {
  .evx-filters { grid-template-columns:minmax(0, max-content) minmax(0, 1fr) auto; grid-template-areas:"town dates add" "cats cats cats"; align-items:start; }
  .evx-filters .evx-ht { max-width:14rem; }
  .evx-filters > [aria-label="When"] { margin-top:0; flex-wrap:wrap; }
}