/* rueloli.com — shared site footer, added 2026-09-03 per Loujean's review:
   "why is the footer like that same as the menu in the top" — the old footer
   on every page was a single thin row repeating the exact same nav links as
   the header. This replaces it with its own distinct layout (multi-column,
   heavier type, a brand statement, admin-editable social links) so the page
   ends on something that reads as designed, not duplicated.

   Included the same way as header.css/header.js:
     <div id="site-footer"></div>
     <link rel="stylesheet" href="footer.css">
     <script src="footer.js"></script>
   Relies on the same design-token custom properties every page already
   defines (--canvas --deep --paper --steel --steel-dim --signal --font-*
   --edge). Not included on links.html (deliberately chrome-free) or inside
   /admin//portal/ (their own app-shell owns the whole frame there). */

.rl-footer{
  position:relative; z-index:2;
  padding:72px 0 32px;
  background:var(--deep);
}
.rl-footer::before{
  content:""; position:absolute; inset:0 0 auto; height:1px; top:0;
  background:linear-gradient(90deg, transparent, rgba(255,77,46,0.35), transparent);
}
.rl-footer-wrap{max-width:1320px;margin:0 auto;padding-inline:var(--edge);}
.rl-footer-top{
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:clamp(28px,4vw,56px);
  padding-bottom:44px;
}
.rl-footer-brand .rl-footer-wordmark{
  font-family:var(--font-display); font-weight:800; font-size:26px;
  letter-spacing:0.02em; text-decoration:none; color:var(--paper); display:inline-block; margin-bottom:14px;
}
.rl-footer-wordmark span{color:var(--signal);}
.rl-footer-tagline{color:var(--steel); font-size:14px; line-height:1.6; max-width:34ch; margin:0 0 22px;}
.rl-footer-social{display:flex; gap:10px; flex-wrap:wrap;}
.rl-footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(241,238,231,0.18);
  display:flex; align-items:center; justify-content:center; color:var(--steel);
  transition:border-color .2s ease, color .2s ease, transform .2s ease;
}
.rl-footer-social a:hover{border-color:var(--signal); color:var(--signal); transform:translateY(-2px);}
.rl-footer-social svg{width:16px; height:16px;}
.rl-footer-col h4{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--steel-dim); margin:0 0 16px; font-weight:500;
}
.rl-footer-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px;}
.rl-footer-col a{color:var(--steel); text-decoration:none; font-size:14px; transition:color .2s ease;}
.rl-footer-col a:hover{color:var(--paper);}
.rl-footer-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
  padding-top:26px; border-top:1px solid rgba(241,238,231,0.07);
}
.rl-footer-fine{color:var(--steel-dim); font-size:12.5px; margin:0;}
.rl-footer-legal{display:flex; gap:20px;}
.rl-footer-legal a{color:var(--steel-dim); font-size:12.5px; text-decoration:none;}
.rl-footer-legal a:hover{color:var(--steel);}

@media (max-width:860px){
  .rl-footer-top{grid-template-columns:1fr 1fr; row-gap:36px;}
  .rl-footer-brand{grid-column:1 / -1;}
}
@media (max-width:520px){
  .rl-footer-top{grid-template-columns:1fr; row-gap:32px;}
}