/* ETCH'D universal footer: one file, every page (Kenny's design,
   02-universal-footer.html). The page carries only the host element,
   <div class="ecosystem-footer"> inside its own <footer><div class="fwrap">,
   so the measure, the rail offset and the phone clearance stay the page's:
   this file never touches footer{} or .fwrap{}.
   Colour is the page's own tokens, never a literal: the design's --paper is
   var(--bg), --ink is var(--ink), --muted is var(--soft), --line is var(--rule).
   Type is inherited from body, so light and dark need no second rule. */

/* The band is the ecosystem's, not this page's: 1120px with 28px of padding,
   the same measure CypherPunks and HASH'D carry, so the three footers line up
   (Kenny 2026-09-18). The page's own .fwrap no longer narrows it, and the left
   margin never falls under the rail's 80px. */
/* A short page still puts the footer on the floor: the body becomes a column
   that fills the viewport and the footer takes the slack (Kenny 2026-09-18).
   The rail is fixed, so it stays out of this flow. */
body:has(>footer>.fwrap>.ecosystem-footer){display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
/* The slack goes to a spacer, never to the footer's margin: every page sets its own gap above
   the footer (40px, 80px on the work page), and margin-top:auto here REPLACED it, so on a long
   page the art ran straight into the footer's rule (Kenny 2026-09-18). The spacer sits after the
   page's content and before the footer; everything that follows the footer in the markup is a
   fixed overlay and takes no part in this flow. */
body:has(>footer>.fwrap>.ecosystem-footer)::after{content:"";flex:1 0 0px;order:1}
body:has(>footer>.fwrap>.ecosystem-footer)>footer{order:2}
/* The flex body above has a side effect: a flex item with an AUTO side margin is never stretched,
   it shrinks to its content. Every page's .col centres itself with one, so the column was only as
   wide as its widest child. Raster art hid it (a big intrinsic width, capped by the max-width); an
   SVG with no size of its own is 300px by default, so the first mainnet work rendered at 300px on
   the work page, and a phone's feed ran wider than the screen. The column takes the available
   width again, as a block does; its max-width and its margins still place it. */
body:has(>footer>.fwrap>.ecosystem-footer)>.col{width:-moz-available;width:-webkit-fill-available;width:stretch}

/* the docs page floats a fixed section menu; the footer paints over it rather
   than being crossed by it (Kenny 2026-09-18) */
footer:has(>.fwrap>.ecosystem-footer){position:relative;z-index:2;background:var(--bg)}
footer:has(>.fwrap>.ecosystem-footer) .fwrap{max-width:none;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
/* The floor under "A CypherPunks Product" is the space above it, 18px (Kenny 2026-09-20): each
   page's own .fwrap left 56px there. Desktop only: a phone's .fwrap keeps the room it leaves for
   the bottom bar. */
@media (min-width:721px) and (pointer:fine),(min-width:721px) and (pointer:none),(min-width:1201px){
  footer:has(>.fwrap>.ecosystem-footer) .fwrap{padding-bottom:18px}
}
.ecosystem-footer{color:var(--ink);container-type:inline-size;max-width:1120px;padding:0 28px;margin-right:auto;margin-left:max(80px,calc((100% - 1120px)/2))}
@media (max-width:900px),((pointer:coarse) and (max-width:1200px)){
  .ecosystem-footer{margin-left:auto;padding:0 20px}
}
.ecosystem-footer .footer-main{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) minmax(0,.65fr);gap:44px}
/* nothing in a column may push its column wider than the grid allows */
.ecosystem-footer .footer-main>*{min-width:0}

/* the identity: a fixed logo column so every brand name starts on one line */
.ecosystem-footer .brand-name{display:flex;align-items:center;gap:18px;font-size:16px;letter-spacing:1.6px;font-weight:500;line-height:1.4;margin:0 0 10px;color:var(--ink)}
.ecosystem-footer .brand-name .brand-mark{justify-self:start}
.ecosystem-footer .brand-description{font-size:12px;line-height:1.8;color:var(--soft);margin:0;max-width:250px;letter-spacing:0}

/* the two navigation headings: the pages style a bare h2, so this one is
   written out in full rather than inheriting a page's article rule */
.ecosystem-footer .footer-title{font-size:10px;letter-spacing:1.5px;color:var(--soft);margin:0 0 16px;padding:0;border:0;font-weight:500;line-height:1.7;max-width:none;text-wrap:wrap}

.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:flex;align-items:center;gap:12px;min-width:0}
.ecosystem-footer .product-name span,.ecosystem-footer .product-name{overflow:hidden;text-overflow:ellipsis}
.ecosystem-footer .product-name .brand-mark{justify-self:start}
.ecosystem-footer .product .tag{font-size:9px;letter-spacing:.8px;color:var(--soft);white-space:nowrap;flex:none}
.ecosystem-footer .product:hover .product-name{text-decoration:underline;text-underline-offset:5px}

.ecosystem-footer .resource-list{display:grid;gap:0;align-items:start;justify-items:start}
/* the same box as a product row, so the words line up across the columns */
.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;letter-spacing:.7px}
/* the invisible 18px cell gives a resource row the same content height as a
   product row, whose height comes from the 18px mark, so the two columns keep
   one rhythm from the first row down */
.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}

.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{color:var(--soft);font-size:10px;text-decoration:none;min-height:30px;display:inline-flex;align-items:center;letter-spacing:.7px}
.ecosystem-footer .bottom-links a:hover{color:var(--ink);text-decoration:underline}

/* the official marks, black on light and white on dark through currentColor */
.ecosystem-footer .brand-mark{display:inline-block;width:24px;height:24px;flex-shrink:0;vertical-align:middle;color:var(--ink)}
.ecosystem-footer .brand-hashd{width:38px}
.ecosystem-footer .brand-name .brand-hashd{width:32.3px;height:20.4px}
.ecosystem-footer .product-name .brand-mark{width:18px;height:18px}
.product-name .brand-mark{flex:0 0 24px;height:18px}
.ecosystem-footer .product-name .brand-hashd{width:23.8px;height:15.08px}
.ecosystem-footer .x-logo,.ecosystem-footer .gh-logo{display:inline-block;flex-shrink:0;vertical-align:middle}

.ecosystem-footer a:focus-visible{outline:2px solid var(--ink);outline-offset:4px}

/* with JS blocked the host is never painted, so it carries the bottom line
   statically in <noscript>: standing alone it needs no rule above it */
.ecosystem-footer noscript{display:block}
.ecosystem-footer noscript .footer-bottom{margin-top:0;border-top:0;padding-top:0}

/* the breakpoints are the page's, not the design's: the rail releases the
   column at 900px and a coarse pointer takes the phone layout up to 1200px,
   so the footer wraps in the same band the column does */
@media (max-width:900px),((pointer:coarse) and (max-width:1200px)){
  .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}
}
@media (max-width:480px){
  .ecosystem-footer .footer-main{grid-template-columns:1fr;gap:28px 20px}
  .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{flex-direction:column;align-items:flex-start}
}

/* The footer folds on its own width: the rail takes 80px and a page's measure
   can leave the band at 470px inside a 1080px window, which is where three
   columns collapsed into each other. */
@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}
}