/* Site chrome shared by the tools pages AND the articles (Ghost theme "nebula" links /chrome.css too), 2026-10-28.
   The footer markup and the Data menu are written once by dev/seo.py (footer_block, data_dd_html) and copied into the
   theme by ~/webtools-dev/sync-ghost-chrome.sh, so both sides stay identical. Plain values, no site variables: the
   articles don't load style.css. */

/* ---- Data dropdown in the top menu: one column, a name and a line under each ---- */
.nav-data .dd-cols.dd-one { grid-template-columns: 330px !important; }
.nav-data .dd-panel a { display: grid !important; gap: 2px; height: auto !important; padding: 7px 8px !important; }
.nav-data .dd-panel a b { color: #e8e6e3; font-weight: 600; }
.nav-data .dd-panel a small { color: #9a9fa6; font-size: .8rem; font-weight: 400; line-height: 1.35; }
.nav-data .dd-foot a { display: inline !important; white-space: nowrap; padding: 0 !important; }

/* ---- Footer ---- */
.site-foot > .nf { background: #16191c; border-top: 1px solid #2e3338; color: #9a9fa6; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; text-align: left; }
.nf-in { max-width: 1240px; margin: 0 auto; padding: 36px 20px 28px; display: grid; grid-template-columns: minmax(220px, 1.2fr) 3fr; gap: 28px 48px; }
.nf-brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.nf-brand svg { width: 22px; height: 22px; fill: none; stroke: #ff8a1f; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nf-name { font: 400 23px/1 "Architects Daughter", system-ui, sans-serif; padding-right: .08em;
  background: linear-gradient(90deg, #ffd23f, #ff8a1f 45%, #ff2e63); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.nf-about p { margin: 10px 0 16px; max-width: 30ch; }
.nf-join { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: #5865f2; color: #fff !important; text-decoration: none; font: 600 13.5px system-ui, sans-serif; }
.nf-join:hover { background: #4752c4; }
.nf-join svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
.nf-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 20px; }
.nf-col { display: grid; gap: 7px; align-content: start; min-width: 0; }
.nf-col h2 { margin: 0 0 4px; font: 700 11.5px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; color: #ff8a1f; }
.nf-col a { color: #b8bcc2; text-decoration: none; font-size: 14px; }
.nf-col a:hover { color: #ff8a1f; }
.nf-bar { border-top: 1px solid #2e3338; }
.nf-bar > div { max-width: 1240px; margin: 0 auto; padding: 14px 20px 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; font-size: 12.5px; color: #80868d; }
@media (max-width: 900px) { .nf-in { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .nf-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nf-in { padding-top: 28px; } }

/* ---- Articles' top bar (Ghost .nb-top): small leftovers that differed from the tools pages' header.top ---- */
.nb-discord span { color: inherit !important; }                        /* an older theme rule greyed the "Join" label */
@media (max-width: 860px) {
  .nb-nav { margin-top: 0 !important; }                                 /* menu row sits right under the search row, as on tools pages */
}
@media (max-width: 760px) {
  .nb-nav .nav a, .nb-nav .dd-btn { height: 40px !important; padding: 0 12px !important; font-size: 14.08px !important; }
  .nb-nav .dd-panel, .nb-nav .nav-dd .chev { display: none !important; }  /* phones: menu buttons open their own page */
  .nb-top .search kbd { display: none !important; }
}