/* The City website: civic look (Nov 2026). Loaded last on every page, after the page's own styles. It is written to the same file name as the
   old glass look (glass.css) so every page's link keeps working.
   Dark, flat and solid like a city government site: charcoal panels, thin borders, amber for actions and numbers, soft blue for links.
   No blur, no see-through panels, no background photo. The page styles are recolored by tools/mk_black_site.py; this file sets the rest. */
@font-face { font-family: "Barlow"; font-weight: 400; src: url("fonts/Barlow-Regular.ttf"); font-display: swap; }
@font-face { font-family: "Barlow"; font-weight: 500; src: url("fonts/Barlow-Medium.ttf"); font-display: swap; }
@font-face { font-family: "Barlow"; font-weight: 600 900; src: url("fonts/Barlow-SemiBold.ttf"); font-display: swap; }
@font-face { font-family: "BarlowSC"; font-weight: 600 900; src: url("fonts/BarlowSemiCondensed-SemiBold.ttf"); font-display: swap; }
@font-face { font-family: "MI"; src: url("fonts/MaterialIconsRound-Regular.otf"); font-display: block; }

:root {
  --bg: #13161b; --panel: #1b1f26; --panel2: #222730; --bar: #0d0f13; --line: #2f353f; --line2: #444c58;
  --gl: #1b1f26; --gl3: #222730; --edge: #2f353f; --edge2: #444c58; --bf: none;
  --t1: #eceff4; --t2: #a3abb7; --text: #eceff4; --dim: #a3abb7;
  --acc: #f0a63a; --acc-top: #f0a63a; --acc-rgb: 240,166,58; --link: #7fb4ec; --bad: #ff7a66; --good: #5fd08a;
  /* names the old pages use, now dark and solid */
  --ink: #0d0f13; --raised: #222730; --amber: #f0a63a; --green: #5fd08a;
  --navy: #eceff4; --navy2: #f0a63a; --navy3: #1b1f26; --sign: #5fd08a; --sign2: #2f9a60; --brick: #ff7a66;
  --concrete: #1b1f26; --concrete2: #222730; --paper: #181c22; --gold: #f0a63a; --gold-d: #f0a63a; --ink-text: #eceff4;
  --serif: "BarlowSC", "Barlow", sans-serif; --head: "BarlowSC", "Barlow", sans-serif; --body: "Barlow", system-ui, sans-serif;
  color-scheme: dark;
}
html { background: var(--bg); scroll-behavior: smooth; }
body { font-family: "Barlow", system-ui, sans-serif !important; font-size: 17px; line-height: 1.55; color: var(--t1); background: var(--bg) !important; min-height: 100vh; }
::selection { background: rgba(var(--acc-rgb),.35); color: #fff; }
.mi { font-family: "MI"; font-style: normal; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1; font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; }
h1, h2, h3, h4, h5 { font-family: "BarlowSC", "Barlow", sans-serif !important; color: var(--t1); font-weight: 600; letter-spacing: .01em; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: #fff; }
p, li, dd, td, th, label, small, span, summary { font-family: inherit; }
b, strong { color: inherit; }
hr { border: 0; border-top: 1px solid var(--line); }
code, kbd, pre, samp { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--panel2); color: #ffe0a8; border-radius: 4px; padding: .08em .35em; }
pre { padding: 12px 14px; overflow: auto; border: 1px solid var(--line); }
pre code { background: none; padding: 0; }
:focus-visible { outline: 2px solid var(--acc) !important; outline-offset: 2px; }
::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--bar); }
::-webkit-scrollbar-thumb { background: #3a414c; border-radius: 8px; border: 3px solid var(--bar); } ::-webkit-scrollbar-thumb:hover { background: #4b5461; }

/* ---- forms ---- */
:where(input, select, textarea) { font-family: "Barlow", sans-serif; color: var(--t1); background: var(--bg); border: 1px solid var(--line2); border-radius: 6px; }
:where(input, textarea)::placeholder { color: #7d8794; opacity: 1; }
:where(select) option { background: var(--panel); color: var(--t1); }
:where(input[type=checkbox], input[type=radio], input[type=range]) { accent-color: var(--acc); }
input:-webkit-autofill { -webkit-text-fill-color: var(--t1); box-shadow: 0 0 0 40px var(--bg) inset; }

/* ---- buttons ---- */
.button, button.button, a.button, .cv-foot .button, nav a.button.small, .button.small {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; border-radius: 6px; border: 1px solid transparent;
  font-family: "Barlow", sans-serif !important; font-weight: 700; letter-spacing: .01em; text-decoration: none; cursor: pointer;
  background: var(--acc); color: #1a1204 !important; box-shadow: none; transition: filter .12s;
}
.button:hover, button.button:hover, a.button:hover { background: var(--acc); filter: brightness(1.1); color: #1a1204 !important; transform: none; box-shadow: none; }
.button.ghost, button.button.ghost, a.button.ghost { background: var(--panel2); color: var(--t1) !important; border: 1px solid var(--line2); }
.button.ghost:hover, a.button.ghost:hover { background: #2c323d; color: #fff !important; filter: none; }
.button.small, nav a.button.small { padding: 8px 18px; font-size: 15px; }
button:disabled, .button[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- header: utility bar, masthead, menu bar ---- */
header.site-top.cv-head { position: sticky; top: 0; z-index: 60; display: block; padding: 0; margin: 0; background: transparent !important; }
.cv-util { background: var(--bar) !important; color: var(--t2) !important; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.cv-util a { color: var(--t2) !important; text-decoration: none; } .cv-util a:hover { color: #fff !important; text-decoration: none; }
.cv-util .cv-in { min-height: 34px; }
.cv-mast { background: var(--panel) !important; border-bottom: 3px solid var(--acc) !important; }
.cv-mast .cv-in { padding-top: 12px; padding-bottom: 12px; gap: 22px; }
.cv-brand { gap: 14px; }
.cv-brand img { width: 54px !important; height: 54px !important; border-radius: 50% !important; border: 2px solid var(--acc); background: #000; box-shadow: none; }
.cv-brand small { font-family: "Barlow" !important; font-size: 12.5px !important; letter-spacing: .14em; text-transform: uppercase; color: var(--t2) !important; font-weight: 500 !important; margin-bottom: 0 !important; }
.cv-brand b { font-family: "BarlowSC" !important; font-size: 28px !important; color: var(--t1) !important; font-weight: 600 !important; letter-spacing: .01em !important; }
.cv-search { border: 1px solid var(--line2) !important; border-radius: 6px !important; background: var(--bg) !important; overflow: hidden; }
.cv-search input { background: transparent !important; color: var(--t1) !important; border: 0 !important; border-radius: 0; width: 280px; padding: 11px 16px; font-size: 16px; }
.cv-search button { background: var(--acc) !important; color: #1a1204 !important; border: 0; font-family: "Barlow"; font-weight: 700; padding: 0 20px; }
.cv-search button:hover { filter: brightness(1.1); }
.cv-founder, .cv-acct { border: 1px solid var(--line2) !important; border-radius: 6px !important; background: var(--panel2); color: var(--t1) !important; font-family: "Barlow" !important; font-weight: 700; padding: 10px 16px !important; }
.cv-founder:hover, .cv-acct:hover { background: #2c323d; color: #fff !important; }
.cv-acct-ic { background: var(--acc) !important; } .cv-acct-ic::before, .cv-acct-ic::after { background: #1a1204 !important; }
.cv-menu { background: var(--panel2) !important; color: var(--t1) !important; border: 1px solid var(--line2) !important; border-radius: 6px !important; font-family: "Barlow" !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.cv-nav { background: var(--panel2) !important; border-bottom: 1px solid var(--line) !important; }
.cv-nav li > a, .cv-nav li > button { font-family: "Barlow" !important; font-weight: 600 !important; font-size: 15px !important; color: #d3d8e0 !important; padding: 13px 16px !important; border-bottom: 3px solid transparent; gap: 2px !important; }
.cv-nav li > button::after { content: "keyboard_arrow_down" !important; font-family: "MI"; font-feature-settings: "liga"; border: 0 !important; width: auto !important; height: auto !important; transform: none !important; font-size: 20px; margin-right: -4px; opacity: .75; transition: transform .15s, opacity .15s; }
.cv-nav li > button:hover::after, .cv-nav li.open > button::after { transform: translateY(2px) !important; opacity: 1; }
.cv-nav li > a:hover, .cv-nav li > button:hover, .cv-nav li.open > button, .cv-nav li:focus-within > button { background: #292f39 !important; color: #fff !important; border-bottom-color: var(--acc); }
.cv-nav li.on > a, .cv-nav li.on > button { color: #fff !important; box-shadow: none !important; border-bottom-color: var(--acc); }
.cv-nav .cv-drop { background: var(--panel) !important; border: 1px solid var(--line2) !important; border-top: 3px solid var(--acc) !important; border-radius: 0 0 8px 8px; box-shadow: 0 18px 40px rgba(0,0,0,.55); padding: 6px !important; top: 100% !important; }
.cv-nav li.has::after { content: none; }
.cv-drop a { color: var(--t1) !important; border-radius: 6px; padding: 9px 12px !important; font-weight: 600; }
.cv-drop a:hover, .cv-drop a[aria-current] { background: var(--panel2) !important; color: #fff !important; }
.cv-drop a small { color: var(--t2) !important; font-weight: 400; }
.cv-ic { background: #2a2418 !important; border: 0 !important; box-shadow: inset 0 0 0 1px #5a4620; color: var(--acc) !important; border-radius: 8px !important; }
.cv-ic .ac { fill: var(--acc) !important; stroke: var(--acc) !important; }
.cv-drop a.cv-ia:hover .cv-ic, .cv-drop a.cv-ia[aria-current] .cv-ic { background: var(--acc) !important; color: #1a1204 !important; }
.cv-drop a.cv-ia:hover .cv-ic .ac, .cv-drop a.cv-ia[aria-current] .cv-ic .ac { stroke: #1a1204 !important; fill: #1a1204 !important; }
.cv-nav li.steam a.button { background: var(--acc) !important; color: #1a1204 !important; padding: 8px 18px !important; margin: 6px 0; border-radius: 6px; border-bottom: 0; }
.cv-nav .cv-msearch input { background: var(--bg); color: var(--t1); }
.cv-nav .cv-msearch button { background: var(--acc); color: #1a1204; }
@media (max-width: 1100px) {
  .cv-head.open .cv-nav { background: var(--panel2) !important; }
  .cv-nav .cv-drop { background: transparent !important; border: 0 !important; border-left: 3px solid var(--acc) !important; box-shadow: none; border-radius: 0; }
}

/* ---- the alert bar, if a page has one ---- */
a.strip, a.strip.gov-alert { background: var(--acc) !important; color: #1a1204 !important; border-bottom: 0 !important; font-weight: 600; }
.gov-alert .alert-tag { background: #1a1204 !important; color: var(--acc) !important; border-radius: 4px; }

/* ---- page banners, sections and cards ---- */
.banner::before { background: linear-gradient(90deg, rgba(13,15,19,.94) 0%, rgba(13,15,19,.78) 50%, rgba(13,15,19,.25) 100%) !important; }
.banner { border-bottom: 3px solid var(--acc) !important; }
.banner h1, .banner p { color: var(--t1); }
.banner .tag, .tag { background: #2a2418 !important; color: var(--acc) !important; border: 0 !important; border-radius: 4px; font-family: "Barlow" !important; font-weight: 700; letter-spacing: .08em; padding: 2px 10px; }
section { border-top-color: var(--line) !important; }
.card, .entry { border-radius: 6px !important; border: 1px solid var(--line) !important; border-left: 4px solid var(--acc) !important; background: var(--panel) !important; box-shadow: none; }
a.card:hover, .card:hover { background: var(--panel2) !important; border-color: var(--line2) !important; border-left-color: var(--acc) !important; }
.card .mark { background: var(--acc) !important; }
.shot, .shot img { border-radius: 6px !important; } .shot { border: 1px solid var(--line2) !important; box-shadow: none !important; }
.compare th { color: var(--t2) !important; } .compare td, .compare th { border-bottom-color: var(--line) !important; }
table { border-color: var(--line); }
th { color: var(--t2); } td, th { border-color: var(--line); }
article.post { border-left: 4px solid var(--line2) !important; background: transparent; }
article.post.pinned { border-left-color: var(--acc) !important; background: #241d10 !important; }
.post .pin, article.post .pin, .cv-flash .pin { background: #2a2418 !important; color: var(--acc) !important; border-radius: 4px; }
.note-box { background: #241d10 !important; border: 1px solid #4a3a1c !important; border-left: 4px solid var(--acc) !important; border-radius: 6px; color: var(--t1); }
.jump { border-bottom: 1px solid var(--line) !important; } .jump a { font-family: "Barlow" !important; font-weight: 600; }
details { border-color: var(--line); } summary { cursor: pointer; }
dialog { background: var(--panel); color: var(--t1); border: 1px solid var(--line2); border-radius: 8px; } dialog::backdrop { background: rgba(0,0,0,.8); }

/* ---- footer ---- */
footer.site-foot.cv-foot { background: var(--bar) !important; color: var(--t2) !important; border-top: 3px solid var(--acc) !important; margin-top: 60px !important; }
.cv-foot .cv-sign-up { background: var(--panel) !important; color: var(--t1) !important; border-bottom: 1px solid var(--line) !important; padding: 0 !important; }
.cv-foot .cv-sign-up > .cv-in { padding-top: 26px !important; padding-bottom: 26px !important; }
.cv-foot .cv-sign-up h3 { color: var(--t1) !important; } .cv-foot .cv-sign-up p { color: var(--t2) !important; }
.cv-foot .signup-form input[type=email] { background: var(--bg) !important; color: var(--t1) !important; border: 1px solid var(--line2) !important; border-radius: 6px; padding: 12px 16px; flex: 1 1 220px; }
.cv-foot .signup-form .button { padding: 12px 26px !important; }
.cv-foot .signup-msg.ok { color: var(--good) !important; } .cv-foot .signup-msg.bad { color: var(--bad) !important; } .cv-foot .signup-fine { color: var(--t2) !important; } .cv-foot .signup-fine a { color: var(--link) !important; }
.cv-foot .cv-seal img { border-radius: 50%; border: 2px solid var(--acc); }
.cv-foot .cv-seal b { font-family: "BarlowSC" !important; color: var(--t1) !important; font-weight: 600; }
.cv-foot address b, .cv-foot .hours b { color: var(--t1) !important; font-family: "Barlow" !important; }
.cv-foot h4 { color: var(--t1) !important; font-family: "BarlowSC" !important; border-bottom: 1px solid var(--line) !important; padding-bottom: 8px; letter-spacing: .02em; font-size: 1.15rem; }
.cv-foot .col a { color: var(--link) !important; } .cv-foot .col a:hover { color: #fff !important; text-decoration: underline; }
.cv-foot a { color: var(--t1); }
.cv-foot .cv-legal { border-top: 1px solid var(--line) !important; } .cv-foot .cv-legal .cv-in { color: #7d848f !important; }

/* ---- small things ---- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
img { border-radius: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }
@media print { body { background: #fff !important; color: #000; } }

/* ---- inner page parts the earlier edits added (service cards, zoning icons) ---- */
.sv-hero { border-bottom: 3px solid var(--acc) !important; box-shadow: none; }
.sv-hero.sv-hero-city { background-position: center 62%; }
.sv-hero.sv-hero-city::before { background: linear-gradient(90deg, rgba(13,15,19,.92) 0%, rgba(13,15,19,.7) 40%, rgba(13,15,19,.05) 88%) !important; }
.sv-more > a { display: grid !important; grid-template-columns: 52px 1fr; column-gap: 16px; align-items: start; padding: 20px 22px !important; border: 1px solid var(--line) !important; border-left: 4px solid var(--acc) !important; border-radius: 6px !important; background: var(--panel) !important; box-shadow: none; transition: background .15s, border-color .15s; }
.sv-more > a:hover { background: var(--panel2) !important; border-color: var(--line2) !important; border-left-color: var(--acc) !important; transform: none; }
.sv-more .svi { grid-row: 1 / span 3; grid-column: 1; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; font-size: 28px; line-height: 1; color: var(--acc); background: #2a2418; border: 1px solid #5a4620; }
.sv-more > a > b, .sv-more > a > span, .sv-more > a > em { grid-column: 2; }
.sv-more > a:hover b { text-decoration: none; }
.sv-more { grid-template-columns: repeat(3, 1fr) !important; }
#world .sv-more { grid-template-columns: repeat(2, 1fr) !important; }
@media (max-width: 900px) { .sv-more, #world .sv-more { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; } }
.sv-glance ul { border: 1px solid var(--line) !important; border-radius: 6px !important; background: var(--panel) !important; box-shadow: none; }
.sv-table td.tdic { white-space: nowrap; }
.sv-table td.tdic .tdi { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 10px; vertical-align: middle; border-radius: 50%; font-size: 18px; line-height: 1; color: var(--acc); background: #2a2418; border: 1px solid #5a4620; }
.sv-table td.tdic b { vertical-align: middle; }
.sv-glance li.gli { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; }
.sv-glance li.gli > .mi { grid-row: 1 / span 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 24px; line-height: 1; color: var(--acc); background: #2a2418; border: 1px solid #5a4620; }
.sv-glance li.gli > b, .sv-glance li.gli > span { grid-column: 2; }
.sv-tip.tpic { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; align-items: start; border: 1px solid var(--line) !important; border-left: 4px solid var(--acc) !important; border-radius: 6px !important; background: var(--panel) !important; box-shadow: none; }
.sv-tip.tpic > .mi { grid-row: 1 / span 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 24px; line-height: 1; color: var(--acc); background: #2a2418; border: 1px solid #5a4620; }
.sv-tip.tpic > b, .sv-tip.tpic > span { grid-column: 2; }
.sv-note.ic { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.sv-note.ic::before { content: 'info'; font-family: 'MI'; font-size: 22px; line-height: 1; flex: none; color: var(--acc); font-feature-settings: 'liga'; }

/* ---- home page (index.html): hero, top services, news releases, directories ---- */
.cx-in { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.cx-hero { position: relative; background: #000 url(img/hero.jpg) center 42% / cover; min-height: 460px; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.cx-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,15,19,.94) 0%, rgba(13,15,19,.82) 42%, rgba(13,15,19,.12) 80%); }
.cx-hero .cx-in { position: relative; width: 100%; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding-top: 44px; padding-bottom: 44px; box-sizing: border-box; }
.cx-hero h1 { font-size: 60px; margin: 0 0 12px; line-height: 1.08; } .cx-hero h1 u { text-decoration: none; color: var(--acc); }
.cx-hero p.lead { color: #d3d8e0; font-size: 19px; max-width: 560px; margin: 0 0 24px; }
.cx-find { background: rgba(20,23,28,.94); border: 1px solid var(--line2); border-radius: 8px; padding: 22px 24px; max-width: 560px; }
.cx-find h2 { font-size: 22px; margin: 0 0 12px; }
.cx-srch { display: flex; height: 46px; border: 1px solid var(--line2); border-radius: 6px; overflow: hidden; background: var(--bg); margin: 0 0 14px; }
.cx-srch .mi { padding: 0 12px; display: grid; place-items: center; color: var(--t2); font-size: 22px; }
.cx-srch input { flex: 1; min-width: 0; background: none !important; border: 0 !important; outline: 0; color: var(--t1); font: 500 16px Barlow; }
.cx-srch button { border: 0; background: var(--acc); color: #1a1204; font: 700 15px Barlow; padding: 0 20px; cursor: pointer; }
.cx-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.cx-chips a { font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--line); color: #d9dee6; text-decoration: none; }
.cx-chips a:hover { border-color: var(--acc); color: #fff; }
/* Citizens card (Nov 2026): rounded card, amber glow in the corner, icon + label, big number, divider, live line. */
.cx-pop { justify-self: end; position: relative; overflow: hidden; min-width: 340px; text-align: left; background: linear-gradient(160deg, rgba(34,39,48,.94), rgba(13,15,19,.94)); border: 1px solid var(--line2); border-radius: 16px; padding: 22px 28px 20px; box-shadow: 0 18px 40px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07); }
.cx-pop::before { content: ""; position: absolute; right: -70px; top: -70px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(240,166,58,.30), rgba(240,166,58,0) 68%); pointer-events: none; }
.cx-pop::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--acc), rgba(240,166,58,.15)); }
.cx-pop .pt { position: relative; display: flex; align-items: center; gap: 12px; }
.cx-pop .pt .mi { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-size: 22px; color: var(--acc); background: #2a2418; border: 1px solid #5a4620; }
.cx-pop small { display: block; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 13px; color: #d4d9e1; }
.cx-pop b { position: relative; display: block; margin-top: 12px; font: 600 72px BarlowSC; color: var(--acc); line-height: 1.02; font-variant-numeric: tabular-nums; text-shadow: 0 0 28px rgba(240,166,58,.28); }
.cx-pop .pl { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line2); color: #d4d9e1; font-size: 15px; }
.cx-pop .pl .mi { font-size: 18px; color: var(--t2); }
.cx-pop .pl .live { font-style: normal; margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--good); background: rgba(95,208,138,.10); border: 1px solid rgba(95,208,138,.35); border-radius: 999px; padding: 3px 9px; }
.cx-pop .pl .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--good); animation: cxlive 1.8s ease-in-out infinite; }
@keyframes cxlive { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@media (prefers-reduced-motion: reduce) { .cx-pop .pl .live::before { animation: none; } }
.cx-sec { padding: 42px 0; border-top: 0 !important; }
.cx-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.cx-hd h2 { font-size: 30px; margin: 0; } .cx-hd a { color: var(--link); font-weight: 600; font-size: 15px; text-decoration: none; } .cx-hd a:hover { text-decoration: underline; }
.cx-svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cx-svc a { display: flex; align-items: center; gap: 16px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--acc); border-radius: 6px; padding: 20px; font: 600 19px BarlowSC; letter-spacing: .01em; color: var(--t1); text-decoration: none; }
.cx-svc a .mi { font-size: 34px; color: var(--acc); } .cx-svc a:hover { background: var(--panel2); border-color: #555d6a; border-left-color: var(--acc); color: #fff; }
.cx-cols { display: grid; grid-template-columns: 1.7fr 1fr; gap: 34px; }
.cx-rel a { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.cx-rel a:hover h3 { color: var(--link); text-decoration: underline; }
.cx-rel .m { font-size: 13px; color: var(--t2); font-weight: 600; margin-bottom: 3px; } .cx-rel .m b { color: var(--acc); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; margin-left: 10px; }
.cx-rel h3 { font: 600 22px Barlow !important; line-height: 1.25; margin: 0; } .cx-rel p { color: var(--t2); font-size: 15px; margin: 3px 0 0; }
.cx-rel .none { color: var(--t2); padding: 18px 0; }
 /* civic 20261105: news thumbnail (first picture in the post) */
 .cx-rel a.hasth { display: flex; gap: 18px; align-items: flex-start; }
 .cx-rel .tx { flex: 1; min-width: 0; display: block; }
 .cx-rel .th { flex: 0 0 168px; height: 100px; border-radius: 8px; overflow: hidden; background: #1a1f27; border: 1px solid var(--line); display: block; }
 .cx-rel .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
 .cx-rel a.hasth:hover .th { border-color: var(--acc); }
 @media (max-width: 560px) { .cx-rel a.hasth { flex-direction: column; } .cx-rel .th { flex-basis: auto; width: 100%; height: 150px; } }
.cx-box { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 22px; margin-bottom: 22px; }
.cx-box h3 { font-size: 21px; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.cx-box ul { list-style: none; margin: 0; padding: 0; } .cx-box li a { display: flex; align-items: center; gap: 10px; padding: 8px 0; color: var(--link); font-size: 15.5px; border-bottom: 1px dotted var(--line); text-decoration: none; } .cx-box li:last-child a { border: 0; } .cx-box li a:hover { text-decoration: underline; } .cx-box li .mi { color: var(--t2); font-size: 18px; }
.cx-box p { color: var(--t2); font-size: 15.5px; margin: 0 0 12px; }
.cx-box .more { display: block; margin-top: 14px; color: var(--link); font-weight: 600; text-decoration: none; }
.cx-dir { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cx-dir .g { display: grid; grid-template-columns: 2fr 1fr; gap: 44px; }
.cx-dir .l { columns: 3; column-gap: 26px; } .cx-dir .l.c1 { columns: 1; }
.cx-dir a { display: block; padding: 5px 0; color: var(--link); font-size: 15.5px; break-inside: avoid; text-decoration: none; } .cx-dir a:hover { text-decoration: underline; }
.cx-dir h2 { font-size: 26px; margin: 0 0 12px; }
.cx-steam { display: flex; align-items: center; gap: 24px; padding: 26px 30px; background: #241d10; border: 1px solid #4a3a1c; border-left: 4px solid var(--acc); border-radius: 6px; }
.cx-steam img { width: 62px; height: 62px; border-radius: 12px; }
.cx-steam > div:nth-child(2) { flex: 1; } .cx-steam h2 { font-size: 27px; margin: 0; } .cx-steam p { color: #d5c8a8; margin: 4px 0 0; }
@media (max-width: 1000px) {
  .cx-hero .cx-in, .cx-cols, .cx-dir .g { grid-template-columns: 1fr; }
  .cx-pop { justify-self: start; text-align: left; } .cx-hero h1 { font-size: 44px; }
  .cx-svc { grid-template-columns: repeat(2, 1fr); } .cx-dir .l { columns: 2; }
  .cx-steam { flex-wrap: wrap; }
}
@media (max-width: 560px) { .cx-svc { grid-template-columns: 1fr; } .cx-dir .l { columns: 1; } .cx-pop b { font-size: 52px; } }
/* help-arrows 20261105: one chevron at the right of every question, same spot and size; points down closed, up open. The browser's own triangle sat in the padding and did not line up. */
details.q > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
details.q > summary::-webkit-details-marker { display: none; }
details.q > summary::marker { content: ''; }
details.q > summary::after { content: ''; flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid var(--amber, #f0a830); border-bottom: 2px solid var(--amber, #f0a830); transform: translateY(-3px) rotate(45deg); transition: transform .2s; }
details.q[open] > summary::after { transform: translateY(3px) rotate(-135deg); }

/* wiki-pad 20261105: the item cards in the wiki (each building on a reference page) had no room at their sides */
.mw-text section.entry { padding: 12px 18px 16px; }