/* ============================================================
   7 Wonders Future Cities — "Information & News" section
   footer.php + single.php + category.php

   REBUILT against the real tokens.css, not the project docs.
   tokens.css is explicit and normative on this:

     "THIS IS THE CAMPAIGN PALETTE ... Every colour in the
     delivered CSS resolves through a variable below. Do not
     hardcode colour values in plugin templates, inline styles
     or JavaScript."

   So every color/font/radius/transition below reads var(--wfc-*)
   directly — nothing here redefines a hex value. If a --wfc-*
   token's value ever changes, this file updates with it
   automatically; no separate palette to keep in sync.

   Loaded via inc/information-news.php's enqueue (tokens.css →
   fonts.css → fonts-ar.css → this file), sitewide, since
   footer.php renders on every page. Every component rule below
   (pill/card/grid/btn/feature/intro-band/etc.) is scoped under
   .n7w-news specifically because n7w-voting.css already loads
   sitewide unconditionally (see n7w-voting.php's wp_enqueue_scripts
   hook, no is_page() gate) — scoping avoids any future classname
   collision with that stylesheet or with block-editor/plugin CSS
   on the same page. Footer rules (.site-footer ...) are NOT
   scoped under .n7w-news, since footer.php isn't wrapped in it —
   footer is global chrome, not part of the News section markup.
   ============================================================ */

/* --- Global font — vote.css sets this once on body and everything
   inherits it (line ~40: body{...font-family:var(--f)...}). header.php
   and footer.php both render outside the .n7w-news wrapper (header.php
   entirely, footer.php by design since it's sitewide chrome), so the
   .n7w-news-scoped font-family below never reaches them. Missing this
   is what caused the Times-New-Roman fallback: strip_global_styles()
   correctly removes Twenty Twenty-Four's Cardo serif on News pages,
   but nothing was left afterward to declare a font at all — the
   browser's own default serif won by default, not any theme's. */
body{ font-family: var(--wfc-font); color: var(--wfc-ink); background: var(--wfc-base); }

/* --- Shared reset, scoped --- */
.n7w-news img{ max-width:100%; display:block; }
.n7w-news h1,.n7w-news h2,.n7w-news h3,.n7w-news h4{
  margin:0; font-weight:var(--wfc-weight-strong);
  color: var(--wfc-ink); font-family: var(--wfc-font);
  /* Was inheriting line-height:1.55 (var(--wfc-line-body), meant for
     body-text readability) from .n7w-news — fine at body-text sizes,
     way too loose on a large heading (1.55 × ~33px ≈ 51px between
     wrapped lines, the exact gap flagged in design feedback). 1.15 is
     a standard tight heading ratio, not a --wfc-* token — tokens.css
     only defines the one line-height value, for body text. */
  line-height: 1.15;
}
.n7w-news p{ margin:0; }
.n7w-news{
  font-family: var(--wfc-font);
  font-size: var(--wfc-size-body);
  line-height: var(--wfc-line-body);
  color: var(--wfc-ink);
  background: var(--wfc-base);
}

/* --- Breadcrumb --- */
.n7w-news .breadcrumb{
  max-width:1200px; margin:0 auto; padding: 20px 32px 0;
  display:flex; gap:8px; flex-wrap:wrap;
  font-size: var(--wfc-size-small); color: var(--wfc-muted);
}
.n7w-news .breadcrumb a{ text-decoration:none; color: var(--wfc-muted); transition: color var(--wfc-transition); }
.n7w-news .breadcrumb a:hover{ color: var(--wfc-primary); }
.n7w-news .breadcrumb span[aria-current]{ color: var(--wfc-ink); font-weight:500; }

/* --- Section/wrap layout --- */
.n7w-news .section{ padding: 44px 32px; }
.n7w-news .wrap{ max-width:1200px; margin:0 auto; padding: 0 var(--wfc-gutter); }
.n7w-news .wrap--article{ max-width:1200px; padding: 0 32px; }
.n7w-news .section--tint{ background: var(--wfc-secondary); }

/* --- Category pill --- */
.n7w-news .pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.72rem; font-weight:var(--wfc-weight-strong); text-transform:uppercase; letter-spacing:.05em;
  padding:5px 12px; border-radius:20px;
  background: var(--wfc-primary-alt); color: var(--wfc-primary);
  font-family: var(--wfc-font);
}

/* --- Card / grid (shared — "You may also like" + category grid) --- */
.n7w-news .grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:26px; }
.n7w-news .card{
  background: var(--wfc-base); border:1px solid var(--wfc-border); border-radius: var(--wfc-radius-card); overflow:hidden;
  display:flex; flex-direction:column;
}
.n7w-news .card__media{ aspect-ratio: 16/10; }
.n7w-news .card__media img{ width:100%; height:100%; object-fit:cover; }
.n7w-news .card__body{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:10px; flex:1; }
.n7w-news .card__body .pill{ align-self:flex-start; }
.n7w-news .card__body h3{ font-size: var(--wfc-size-h3); line-height:1.3; color: var(--wfc-primary); }
.n7w-news .article-body .wp-block-heading, .n7w-news .article-body h2, .n7w-news .article-body h3{ color: var(--wfc-primary); }
.n7w-news .card__body h3 a{ color: inherit; text-decoration:none; }
.n7w-news .card__body h3 a:hover{ text-decoration: underline; }
.n7w-news .card__body p{ color: var(--wfc-muted); font-size:0.9rem; line-height:1.55; flex:1; }
.n7w-news .card__foot{ display:flex; align-items:center; justify-content:space-between; font-size: var(--wfc-size-small); color: var(--wfc-muted); }
.n7w-news .card__foot a{ color: var(--wfc-primary); text-decoration:none; font-weight:var(--wfc-weight-strong); }
.n7w-news .card__foot a:hover{ text-decoration:underline; }

/* --- Meta row --- */
.n7w-news .meta-row{ display:flex; align-items:center; gap:14px; font-size: var(--wfc-size-small); color: var(--wfc-muted); flex-wrap:wrap; }
.n7w-news .meta-row .dot::before{ content:"·"; margin-right:14px; }

/* --- Buttons --- */
.n7w-news .btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family: var(--wfc-font);
  font-size:0.92rem; font-weight:400; text-transform:uppercase; letter-spacing:.04em;
  border-radius: var(--wfc-radius); padding:9px 22px; text-decoration:none; cursor:pointer;
  border:2px solid transparent; white-space:nowrap;
  transition: background var(--wfc-transition);
}
.n7w-news .btn--primary{ background: var(--wfc-primary); color: var(--wfc-base); }
.n7w-news .btn--primary:hover{ background: var(--wfc-primary-dark); }

/* ============================================================
   Single post (single.php)
   ============================================================ */
.n7w-news .hero-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:21/9; }

.n7w-news .article-head{ max-width:1200px; margin:0 auto; padding: 20px 32px 0; }
.n7w-news .article-head h1{ font-size: clamp(1.9rem, 3.2vw, var(--wfc-size-display)); margin-top:14px; color: var(--wfc-ink); }

.n7w-news .article-body{ font-size: var(--wfc-size-body); line-height:1.75; color: var(--wfc-ink); }
.n7w-news .article-body p{ margin-bottom:22px; }
/* .lead / .plain-list are added automatically by the_content filter
   in inc/information-news.php — see that file. */
.n7w-news .article-body p.lead{ font-size: 1.25rem; line-height:1.6; color: var(--wfc-ink); font-weight:500; margin-bottom:26px; }
.n7w-news .article-body h2{ font-size: var(--wfc-size-h2); margin: 40px 0 18px; }
.n7w-news .article-body ul.plain-list{ list-style:disc; margin:0 0 26px; padding-left:22px; }
.n7w-news .article-body ul.plain-list li{ margin-bottom:12px; }
.n7w-news .article-body ul.plain-list strong{ color: var(--wfc-ink); }

.n7w-news .tags-row{ display:flex; gap:8px; flex-wrap:wrap; margin: 8px 0 30px; }
.n7w-news .tag{ font-size:0.78rem; color: var(--wfc-primary-dark); background: var(--wfc-primary-alt); padding:6px 13px; border-radius:20px; text-decoration:none; }

.n7w-news .share-row{ display:flex; align-items:center; gap:12px; padding: 18px 0; border-top:1px solid var(--wfc-border); }
.n7w-news .share-row span{ font-size:0.8rem; color: var(--wfc-muted); margin-right:4px; }
.n7w-news .share-btn{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--wfc-border);
  background: var(--wfc-base); display:flex; align-items:center; justify-content:center;
  color: var(--wfc-primary-dark); text-decoration:none; transition: border-color var(--wfc-transition);
}
.n7w-news .share-btn:hover{ border-color: var(--wfc-primary); }

.n7w-news .related h2{ font-size:1.4rem; margin-bottom:22px; color: var(--wfc-ink); }

@media (max-width: 980px){
  /* Only 3 cards in "You may also like" — drop straight to 1
     column rather than the usual 2-column tablet step. */
  .n7w-news .related .grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   Category archive (category.php)
   ============================================================ */
.n7w-news .intro-band{
  max-width:1200px; margin: 18px auto 0;
  background: var(--wfc-tertiary); border-radius: var(--wfc-radius-card);
  /* Both this and .wrap below share var(--wfc-gutter) now, deliberately —
     giving only one of them padding is what caused the original
     misalignment (a padded box next to a flush one). Adjust both
     together if this needs to change again, not just one. */
  padding: 40px var(--wfc-gutter) 44px;
}
.n7w-news .intro-band h1{ font-size: clamp(2rem, 3.6vw, 2.75rem); color: var(--wfc-primary); }
.n7w-news .intro-band p{ margin-top:14px; color: var(--wfc-muted); font-size:1.05rem; line-height:1.65; max-width:none; width:100%; }

.n7w-news .filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; width:100%; }
.n7w-news .filter-pill{
  display:inline-flex; cursor:pointer; font-family: var(--wfc-font);
  background: var(--wfc-base); border:1px solid var(--wfc-border); color: var(--wfc-ink);
  font-size:0.82rem; font-weight:500; padding:8px 16px; border-radius:20px;
  text-decoration:none; transition: background var(--wfc-transition), color var(--wfc-transition);
}
.n7w-news .filter-pill[data-active="true"]{ background: var(--wfc-primary); border-color: var(--wfc-primary); color: var(--wfc-base); }
.n7w-news .filter-pill:hover:not([data-active="true"]){ border-color: var(--wfc-primary); }

.n7w-news .feature{
  display:grid; grid-template-columns: 1.1fr 1fr; gap:0;
  align-items: start; /* was default stretch — let media size itself via aspect-ratio instead of matching whatever height the text column's content happens to need */
  background: var(--wfc-base); border:1px solid var(--wfc-border); border-radius: var(--wfc-radius-card); overflow:hidden;
}
.n7w-news .feature__media{
  position:relative;
  /* Was min-height:280px only (a floor, not a cap) — with no explicit
     ratio, a longer excerpt stretched the text column's row taller,
     and the image (object-fit:cover, no cap) stretched right along
     with it into portrait territory. aspect-ratio governs height from
     width instead, independent of the text column's content length.
     16/10 matches .card__media's own ratio below, for consistency. */
  aspect-ratio: 16/10;
}
.n7w-news .feature__media img{ width:100%; height:100%; object-fit:cover; }
.n7w-news .feature__body{ padding:32px 36px; display:flex; flex-direction:column; gap:14px; justify-content:center; }
.n7w-news .feature__body .pill{ align-self:flex-start; }
.n7w-news .feature__body h2{ font-size: clamp(1.65rem, 2.6vw, var(--wfc-size-h2)); color: var(--wfc-primary); }
.n7w-news .feature__body h2 a{ color: inherit; text-decoration: none; }
.n7w-news .feature__body h2 a:hover{ text-decoration: underline; }
.n7w-news .feature__body p{ color: var(--wfc-muted); line-height:1.65; font-size: var(--wfc-size-body); }

.n7w-news .section .grid{ margin-top:30px; } /* category grid sits below the feature block */

.n7w-news .load-more{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-top:40px; }
.n7w-news .load-more__count{ font-size: var(--wfc-size-small); color: var(--wfc-muted); }

.n7w-news .newsletter{
  background: var(--wfc-primary-dark); border-radius: var(--wfc-radius-card);
  padding: 34px 40px; margin-top:48px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.n7w-news .newsletter h2{ color: var(--wfc-base); font-size:1.4rem; }
.n7w-news .newsletter p{ color: var(--wfc-primary-alt); margin-top:6px; font-size:0.92rem; }
.n7w-news .newsletter form{ display:flex; gap:10px; flex-wrap:wrap; }
.n7w-news .newsletter input[type="email"]{
  border:1px solid var(--wfc-border-dark); background: var(--wfc-border-dark); color: var(--wfc-base); border-radius: var(--wfc-radius);
  padding:11px 16px; font-size:0.9rem; min-width:240px;
}
.n7w-news .newsletter input::placeholder{ color: var(--wfc-disabled); }

@media (max-width: 980px){
  .n7w-news .feature{ grid-template-columns:1fr; }
  .n7w-news .section .grid{ grid-template-columns: repeat(2,1fr); }
  .n7w-news .intro-band{ padding: 34px 32px 38px; }
}
@media (max-width: 640px){
  .n7w-news .section .grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   Shared header (header.php) — NOT scoped under .n7w-news, same
   reasoning as the footer: header.php renders sitewide.

   COPIED (not linked) from vote.css lines 62–107, 239–281 as of this
   integration — deliberately a copy, not a shared @import, so News
   pages stay isolated from vote.js/vote.css's ongoing development
   (see conversation: vote.js's top-level CFG dependency and SPA-only
   nav functions aren't portable here). This means: if the vote page's
   header visually changes, this section needs a matching manual
   update — a known, accepted tradeoff, not an oversight. Token
   mapping from vote.css's local aliases: --p→--wfc-primary,
   --pa→--wfc-accent, --pm→--wfc-ink, --bdr→--wfc-border,
   --ter→--wfc-tertiary, --grn→--wfc-green, --f→--wfc-font. --hdr is
   vote.css's own local var (84px, 52px at ≤640px) — not a --wfc-*
   token, redeclared locally below under a namespaced --n7w-hdr name
   to avoid any collision with vote.css's --hdr on the (harmless,
   already-accepted) chance both load on the same page.
   ============================================================ */
:root{ --n7w-hdr: 84px; }

/* Language switcher position — mirrors vote.css's .wfc-lang-switch rules
   exactly (base + two breakpoints). These were NOT part of the original
   62-107/239-281 copy (vote.css has grown since; the switcher rules now
   sit outside that range) — confirmed missing entirely from this file,
   which combined with header.php's since-removed inline `right:12px`
   override was the root cause of the /imprint globe/mobile-position bug
   (an inline style beats any media-query rule regardless of specificity,
   so these breakpoints could never have taken effect even before this
   fix, had they existed). header.php no longer sets `right` inline —
   position now comes entirely from here. */

header{ height: var(--n7w-hdr); position: sticky; top: 0; z-index: 200; background: var(--wfc-base); border-bottom: 1px solid var(--wfc-border); box-shadow: 0 1px 12px rgba(0,74,173,.07); /* rgba is --wfc-primary's RGB decomposition (#004AAD) */ }
.hdr{ max-width:1240px; margin:0 auto; padding:0 48px; height:100%; display:flex; align-items:center; gap:16px; }
.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; cursor:pointer; }
.logo img{ height:54px; }
.logo-txt{ border-left:1px solid var(--wfc-border); padding-left:10px; display:flex; flex-direction:column; gap:1px; line-height:1.2; }
.logo-txt span{ font-size:14px; font-weight:400; color:#888; }
.logo-txt strong{ font-size:17px; font-weight:700; color: var(--wfc-primary); text-transform:uppercase; letter-spacing:.04em; }

.hdr nav{ display:flex; gap:28px; flex:1; justify-content:center; align-items:center; }
.nl{ font-size:14px; font-weight:500; color: var(--wfc-ink); text-decoration:none; transition:color .15s; cursor:pointer; }
.nl:hover{ color: var(--wfc-primary); }

.hdr-counter{ margin-left:auto; display:flex; align-items:center; gap:10px; background: var(--wfc-tertiary); border:1px solid var(--wfc-border); padding:8px 15px; border-radius:7px; flex-shrink:0; }
.hdr-counter-lbl{ font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: var(--wfc-primary); white-space:nowrap; }
.pips{ display:flex; gap:5px; }
.pip{ width:14px; height:14px; border:1.5px solid var(--wfc-border); border-radius:2px; background:#fff; transition:all .25s cubic-bezier(.16,1,.3,1); }
.pip.filled{ background: var(--wfc-green); border-color: var(--wfc-green); }

.btn-hdr{ background: var(--wfc-primary); color:#fff; border:none; padding:8px 20px; border-radius:5px; font-family: var(--wfc-font); font-size:13px; font-weight:500; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:background .2s; white-space:nowrap; flex-shrink:0; }
.btn-hdr:hover{ background: var(--wfc-accent); }
.btn-hdr:disabled{ background: rgba(75,165,86,.12); color: var(--wfc-green); border:1.5px solid rgba(75,165,86,.3); cursor:not-allowed; font-size:12px; }

.mob-pill{ display:none; margin:0 auto; align-items:center; gap:6px; background: var(--wfc-tertiary); border:1px solid var(--wfc-border); border-radius:20px; padding:5px 12px; flex-shrink:0; }
.mob-pill-lbl{ font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--wfc-primary); white-space:nowrap; flex-shrink:0; }
.mob-pill-dots{ display:flex; gap:2px; flex-shrink:0; }
.mob-pip{ width:8px; height:8px; border-radius:50%; border:1.5px solid var(--wfc-border); background:#fff; transition:all .25s cubic-bezier(.16,1,.3,1); flex-shrink:0; }
.mob-pip.filled{ background: var(--wfc-green); border-color: var(--wfc-green); }
.mob-pill-txt{ font-size:12px; font-weight:700; color: var(--wfc-primary); white-space:nowrap; }

.hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; padding:6px; border:none; background:transparent; flex-shrink:0; order:99; margin-left:12px; }
.hamburger span{ display:block; width:22px; height:2px; background: var(--wfc-ink); border-radius:2px; transition:all .3s; }
.hamburger.open span:nth-child(1){ transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:rotate(-45deg) translate(5px,-5px); }

.mob-nav{ display:none; position:fixed; top:var(--n7w-hdr); left:0; right:0; bottom:0; background:rgba(30,30,38,.5); z-index:150; opacity:0; pointer-events:none; transition:opacity .25s; }
.mob-nav.open{ opacity:1; pointer-events:all; }
.mob-nav-panel{ background:#fff; width:80%; max-width:300px; height:100%; padding:32px 28px; display:flex; flex-direction:column; gap:0; box-shadow:4px 0 24px rgba(0,0,0,.12); transform:translateX(-100%); transition:transform .3s cubic-bezier(.16,1,.3,1); }
.mob-nav.open .mob-nav-panel{ transform:translateX(0); }
.mob-nav-link{ display:block; font-size:18px; font-weight:500; color: var(--wfc-ink); text-decoration:none; padding:16px 0; border-bottom:1px solid var(--wfc-border); cursor:pointer; transition:color .15s; }
.mob-nav-link:hover{ color: var(--wfc-primary); }
.mob-nav-link:last-child{ border-bottom:none; }

.pbar{ height:3px; background: var(--wfc-border); }
.pf{ height:100%; background: var(--wfc-primary); transition:width .5s cubic-bezier(.16,1,.3,1); }

.hdr-tsb{ display:none; align-items:center; gap:8px; margin-left:auto; }
.tsb-label{ display:none; }
.tsb-pips{ display:flex; gap:3px; flex-shrink:0; cursor:pointer; }
.tsb-pip{ width:10px; height:10px; border:1.5px solid var(--wfc-border); border-radius:2px; background:#fff; transition:all .25s cubic-bezier(.16,1,.3,1); }
.tsb-pip.filled{ background: var(--wfc-green); border-color: var(--wfc-green); }
.tsb-count{ font-size:13px; font-weight:700; color: var(--wfc-primary); }
.tsb-count.complete{ color: var(--wfc-green); }
.tsb-den{ font-size:11px; font-weight:400; color:rgba(0,0,0,.3); margin-left:0; flex-shrink:0; }
.tsb-btn{ background: var(--wfc-primary); color:#fff; border:none; padding:7px 14px; border-radius:5px; font-family: var(--wfc-font); font-size:11px; font-weight:500; letter-spacing:.04em; text-transform:uppercase; cursor:pointer; transition:background .2s; white-space:nowrap; }
.tsb-btn:hover{ background: var(--wfc-accent); }
.tsb-btn:disabled{ background: rgba(75,165,86,.15); color: var(--wfc-green); border:1px solid rgba(75,165,86,.3); cursor:not-allowed; font-size:10px; padding:6px 10px; }

/* Breakpoints — confirmed content (not just line numbers) from the
   actual vote.css source this integration was built against. */
@media (max-width:1024px){
	.hdr{ padding:0 28px; }
	nav{ display:none !important; }
	.btn-hdr{ display:none; }
	.hamburger{ display:flex; }
	.mob-nav{ display:block; }

	/* Counter design unified at every width — mirrors vote.css exactly.
	   See vote.css's own comment on why .hdr-tsb/.mob-pill are retired
	   rather than fixed: the intermediate range was never designed. */
	.hdr-tsb{ display:none !important; }
	.mob-pill{ display:none !important; }

	.hdr-counter{ gap:8px; padding:6px 12px; }
	.hdr-counter-lbl{ font-size:10px; letter-spacing:.08em; max-width:90px; overflow:hidden; text-overflow:ellipsis; }
	.pips{ gap:4px; }
	.pip{ width:12px; height:12px; }
	.hdr-counter-txt{ font-size:13px; }
}
@media (max-width:640px){
	:root{ --n7w-hdr: 52px; }
	.hdr{ padding:0 16px; gap:0; }
	.logo img{ height:32px; }
	.logo-txt{ display:none; }
	nav{ display:none !important; }
	.btn-hdr{ display:none; }
	.hdr-tsb{ display:none !important; }
	.mob-pill{ display:none !important; }

	.hdr-counter{ gap:6px; padding:5px 10px; }
	.hdr-counter-lbl{ font-size:8px; letter-spacing:.04em; max-width:60px; overflow:hidden; text-overflow:ellipsis; }
	.pips{ gap:3px; }
	.pip{ width:8px; height:8px; }
	.hdr-counter-txt{ font-size:12px; }
}


/* ============================================================
   Footer (footer.php) — NOT scoped under .n7w-news, since
   footer.php renders sitewide and isn't wrapped in that div.
   tokens.css is a light-mode palette by its own admission ("this
   is a light palette") and doesn't define light-on-dark text/
   muted tones, since nothing else in the current design needs a
   dark section. The footer does. --wfc-border-dark covers the
   background exactly (it's literally the token this handoff's
   dark footer bg was extracted from), but the two grey text tones
   below have no matching token to read from — kept as the
   original handoff's literal values, flagged here rather than
   silently breaking the "read every colour from a token" rule.
   ============================================================ */
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.site-footer{ background: var(--wfc-border-dark); color:#B9C1D6; font-family: var(--wfc-font); }
.site-footer__row{
  max-width:1200px; margin:0 auto; padding:48px 32px 28px;
  display:grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap:32px;
}
.site-footer h5{ color: var(--wfc-base); font-size:0.85rem; text-transform:uppercase; letter-spacing:.05em; margin-bottom:14px; font-weight:var(--wfc-weight-strong); }
.site-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.site-footer a{ color:#B9C1D6; text-decoration:none; font-size:0.88rem; transition: color var(--wfc-transition); }
.site-footer a:hover{ color: var(--wfc-accent); }
.site-footer p{ font-size:0.85rem; line-height:1.6; color:#9AA4BC; max-width:32ch; }
.site-footer__brand{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.site-footer__brand strong{ color: var(--wfc-base); font-size:0.95rem; }

@media (max-width: 980px){
  .site-footer__row{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .site-footer__row{ grid-template-columns:1fr; }
}