/* ══════════════════════════════════════════════════════════════════════
   ZYRN — SITE FOOTER

   The end of the site, on every page. v1.0 ended on three mono items in a
   row, which reads as a page that ran out rather than one that closed.

   Doctrine holds: hairlines, mono metadata, no gradient, no glow. The only
   ornament is real information — the intake state, the coordinates, and a
   live Amman clock. The wordmark shears as it comes into view, which is
   the last thing the site does.
   ══════════════════════════════════════════════════════════════════════ */

.sitefoot{
  position:relative;z-index:5;
  border-top:1px solid var(--hair);
  margin-top:clamp(60px,10vh,120px);
  background:linear-gradient(180deg,transparent,rgba(8,9,11,0.55));
}
.sitefoot__in{
  width:min(1180px,calc(100vw - 32px));margin:0 auto;
  padding:clamp(46px,7vh,84px) 0 clamp(22px,3vh,32px);
}

.sitefoot__top{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.6fr);
  gap:clamp(32px,6vw,90px);
  padding-bottom:clamp(34px,5vh,58px);
}

/* ── brand block ───────────────────────────────────────────────────── */
.sitefoot__brand{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.sitefoot__line{
  margin:0;font-size:clamp(15px,1.5vw,18px);line-height:1.4;
  letter-spacing:-0.01em;color:rgba(242,243,245,0.82);
}
.sitefoot__mail{
  font-family:var(--font-mono);font-size:12px;letter-spacing:0.1em;
  color:rgba(242,243,245,0.9);
  border-bottom:1px solid var(--hair-strong);
  padding-bottom:3px;
  transition:border-color 240ms var(--ease-reveal,cubic-bezier(.16,1,.3,1)),
             color 240ms ease;
}
.sitefoot__mail:hover{color:var(--vapor);border-bottom-color:rgba(242,243,245,0.5)}

/* ── link columns ──────────────────────────────────────────────────── */
.sitefoot__cols{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,40px);
}
.fcol{display:flex;flex-direction:column;gap:12px;min-width:0}
.fcol__h{
  color:var(--steel);padding-bottom:12px;
  border-bottom:1px solid var(--hair);margin-bottom:4px;
}
.fcol a,.fcol__stat{
  font-size:13.5px;line-height:1.35;
  color:rgba(242,243,245,0.62);
  transition:color 220ms ease,transform 220ms var(--ease-reveal,cubic-bezier(.16,1,.3,1));
}
.fcol a{display:inline-flex;align-items:baseline;gap:8px}
.fcol a .mono{color:var(--steel);font-size:9.5px;transition:color 220ms ease}
.fcol a:hover{color:var(--vapor);transform:translateX(3px)}
.fcol a:hover .mono{color:rgba(242,243,245,0.7)}
.fcol__stat{color:rgba(242,243,245,0.72)}

/* ── the bar ───────────────────────────────────────────────────────── */
.sitefoot__bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(18px,3vw,44px);
  border-top:1px solid var(--hair);
  padding-top:clamp(18px,2.6vh,26px);
  color:var(--steel);
}
.sitefoot__bar > *{white-space:nowrap}
.sitefoot__stamp{display:inline-flex;align-items:center;gap:9px;color:rgba(242,243,245,0.72)}
.sitefoot__clock b{
  font-weight:400;color:rgba(242,243,245,0.86);
  font-variant-numeric:tabular-nums;
}
.sitefoot__spacer{flex:1 1 auto;min-width:0}

@media (max-width:900px){
  .sitefoot__top{grid-template-columns:1fr;gap:38px}
  .sitefoot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
}
@media (max-width:520px){
  .sitefoot__cols{grid-template-columns:1fr}
  .sitefoot__spacer{display:none}
}

/* brand.html is a document, and its footer sits inside the doc column */
.doc .sitefoot{margin-top:clamp(48px,8vh,90px)}

/* ── Lumina ─────────────────────────────────────────────────────────
   A link out to lumina-jo.com, carrying Lumina's own wordmark under
   Lumina's own treatment — the two drop-shadows and the hover lift are
   lifted verbatim from that site's `.mark-img` rule so the mark reads as
   itself rather than as a Zyrn element wearing someone else's name.

   The amber glow is Lumina's ember, not a Zyrn colour. It is the one
   place on this site where a foreign hue is printed, and it is correct:
   another firm's mark should not be recoloured to fit ours. */
.lum{
  display:inline-flex;align-items:center;line-height:0;
  padding:2px 0;
  transition:filter .45s cubic-bezier(.16,1,.3,1),
             transform .5s cubic-bezier(.16,1,.3,1);
}
.lum img{
  display:block;height:17px;width:auto;
  filter:drop-shadow(0 2px 9px rgba(0,0,0,0.55))
         drop-shadow(0 0 20px rgba(255,178,90,0.34));
}
@media (hover:hover) and (pointer:fine){
  .lum:hover{transform:translateY(-1px)}
  .lum:hover img{filter:drop-shadow(0 0 24px rgba(255,178,90,0.62))}
}
.lum:focus-visible{outline:2px solid var(--vapor);outline-offset:4px;border-radius:2px}