/* ==========================================================================
   THE UNIVERSAL FOOTER — shared by every CypherPunks page.

   Design: etchd-design-handoff/02-universal-footer.html (Kenny, 2026-09-18).
   This repo's pages are hand-written static HTML with no shared stylesheet,
   so the footer ships as ONE linked file rather than a sixth hand-synced copy.
   Every page links it as /css/cp-footer.css?v=N — bump the ?v= on all of them
   whenever this file changes.

   Tokens are the HOST's, never the design's:
     design --paper  ->  var(--bg)
     design --ink    ->  var(--ink)
     design --muted  ->  var(--soft)
     design --line   ->  var(--rule)
   No second font stack, no new colour, no hard-coded #fff/#000.

   This file styles the footer's INSIDES only. Each page keeps its own bare
   footer{...} rule, which carries the page-end padding, the top rule and the
   room-grey band on manifesto / punks / mailing-list.
   ========================================================================== */

/* Every page styles the top bar with a bare `nav{position:fixed;top:0;...}`.
   The footer's two <nav> landmarks must not become fixed bars. */
.ecosystem-footer nav{
  position:static;top:auto;left:auto;right:auto;z-index:auto;
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:0;
}

/* Host content width: the same 1120px / 28px container as the nav above it. */
.ecosystem-footer .footer-inner{max-width:1120px;margin:0 auto;padding:0 28px}

.ecosystem-footer{container-type:inline-size}
.ecosystem-footer .footer-main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.65fr);gap:44px}
.ecosystem-footer .footer-main>*{min-width:0}

/* ---- identity ---------------------------------------------------------- */
.ecosystem-footer .brand-name{
  display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:12px;align-items:center;
  font-size:16px;letter-spacing:1.6px;font-weight:500;line-height:1.7;margin-bottom:10px;color:var(--ink);
}
.ecosystem-footer .brand-mark{
  display:inline-block;width:24px;height:24px;flex-shrink:0;justify-self:start;
  vertical-align:middle;color:var(--ink);
}
.ecosystem-footer .brand-name .brand-hashd{width:32.3px;height:20.4px}
.ecosystem-footer .brand-description{font-size:12px;line-height:1.8;color:var(--soft);margin:0;max-width:250px}

/* ---- column headings --------------------------------------------------- */
/* home.html has a global h2{font-size:clamp(...);font-weight:700;line-height:1.15;
   text-wrap:balance;margin-bottom:22px} — every one of those is overridden here. */
.ecosystem-footer .footer-title{
  font-size:10px;letter-spacing:1.5px;color:var(--soft);margin:0 0 16px;
  font-weight:500;line-height:1.7;text-wrap:wrap;
}

/* ---- ecosystem navigation ---------------------------------------------- */
.ecosystem-footer .products{display:grid;gap:0}
.ecosystem-footer .product{
  color:var(--ink);text-decoration:none;display:flex;justify-content:space-between;
  gap:16px;align-items:center;padding:10px 0;border-bottom:1px solid var(--rule);
  font-size:12px;letter-spacing:.7px;
}
.ecosystem-footer .product:first-child{padding-top:0}
.ecosystem-footer .product:last-child{border-bottom:0}
.ecosystem-footer .product-name{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ecosystem-footer .product-name .brand-mark{width:18px;height:18px}
.ecosystem-footer .product-name .brand-hashd{width:23.8px;height:15.08px}
.ecosystem-footer .product .tag{font-size:9px;letter-spacing:.8px;color:var(--soft);flex:none}
.ecosystem-footer .product:hover .product-name{text-decoration:underline;text-underline-offset:5px}

/* ---- resources --------------------------------------------------------- */
.ecosystem-footer .resource-list{display:grid;gap:0;align-items:start;justify-items:start}
/* a resource row takes the same box as a product row, and the invisible 18px
   cell gives it the height the product's mark gives that one, so the words in
   the two columns sit on the same lines */
.ecosystem-footer .resource-list a{
  font-size:12px;padding:10px 0;border-bottom:1px solid transparent;
  display:flex;align-items:center;color:var(--ink);text-decoration:none;
}
.ecosystem-footer .resource-list a::before{content:"";display:block;width:0;height:18px}
.ecosystem-footer .resource-list a:first-child{padding-top:0}
.ecosystem-footer .resource-list a:last-child{border-bottom:0}
.ecosystem-footer .resource-list a:hover{text-decoration:underline;text-underline-offset:4px}

/* ---- separator + bottom row -------------------------------------------- */
.ecosystem-footer .footer-bottom{
  margin-top:32px;border-top:1px solid var(--rule);padding-top:18px;
  display:flex;justify-content:space-between;gap:16px;align-items:center;flex-wrap:wrap;
  font-size:10px;line-height:1.7;color:var(--soft);letter-spacing:.7px;
}
.ecosystem-footer .bottom-links{display:flex;gap:20px;flex-wrap:wrap;align-items:center}
.ecosystem-footer .bottom-links a{
  display:inline-flex;align-items:center;min-height:30px;color:var(--soft);
  font-size:10px;letter-spacing:.7px;text-decoration:none;transition:color .18s;
}
.ecosystem-footer .bottom-links a:hover{color:var(--ink);text-decoration:underline}
.ecosystem-footer .x-logo,.ecosystem-footer .gh-logo,.ecosystem-footer .os-logo{display:inline-block;flex-shrink:0}

/* Two of the five pages carry no a:focus-visible rule of their own. */
.ecosystem-footer a:focus-visible{outline:1px solid var(--ink);outline-offset:3px}

/* ---- responsive --------------------------------------------------------- */
/* tablet: identity wraps above the two navigation columns */
@media (max-width:800px){
  .ecosystem-footer .footer-main{grid-template-columns:1fr 1fr;gap:32px}
  .ecosystem-footer .brand{grid-column:1/-1}
  .ecosystem-footer .brand-description{max-width:none}
}
/* the gutter follows the page content: punks / mailing-list / artist go to 18px
   here, home overrides this to its own 20px at 860px in its inline <style> */
@media (max-width:640px){
  .ecosystem-footer .footer-inner{padding:0 18px}
}
/* phone: one column, resources laid out in a row */
@media (max-width:480px){
  .ecosystem-footer .footer-main{gap:28px 20px;grid-template-columns:1fr}
  .ecosystem-footer .brand{grid-column:auto}
  .ecosystem-footer .resource-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px 20px}
  .ecosystem-footer .resource-list a{padding:0;border-bottom:0;min-height:30px}
  .ecosystem-footer .footer-bottom{align-items:flex-start;flex-direction:column}
}

/* The footer folds on its own width, not the window's: a page's measure can
   leave the band under 500px inside a wide window, which is where three
   columns collapsed into each other (Kenny 2026-09-18). */
@container (max-width:820px){
  .ecosystem-footer .footer-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
  .ecosystem-footer .brand{grid-column:1/-1}
  .ecosystem-footer .brand-description{max-width:none}
}
@container (max-width:470px){
  .ecosystem-footer .footer-main{grid-template-columns:minmax(0,1fr);gap:28px}
  .ecosystem-footer .brand{grid-column:auto}
  .ecosystem-footer .resource-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px 20px}
  .ecosystem-footer .resource-list a{padding:0;border-bottom:0;min-height:30px}
  .ecosystem-footer .resource-list a::before{display:none}
  .ecosystem-footer .footer-bottom{flex-direction:column;align-items:flex-start}
}