/* ── Shared footer styles ──
   4-column footer ported from the intermediate site (2026-08-13, Nico): brand+tagline+social,
   The Show, Listen, Stay In The Loop, plus a legal bar. Replaces the 4-link strip.

   Background: dark ink with a cyan hairline (Nico, 2026-08-13). The cyan gradient it used to
   carry now lives on the newsletter CTA card instead — a link-dense footer could not hold it
   (white 14px text over the #36ecff end lands around 1.6:1, under the 4.5:1 minimum). */
.site-footer{position:relative;z-index:10;background:#04060a;border-top:1px solid rgba(54,236,255,0.18);}

.ft-inner{
  max-width:1280px;margin:0 auto;padding:72px 40px 48px;
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1.3fr;gap:48px;
}

/* brand column */
.ft-logo{height:56px;width:auto;display:block;}
.ft-tagline{
  font-family:var(--font);font-weight:400;font-size:15px;line-height:1.6;
  color:rgba(255,255,255,0.62);max-width:300px;margin:20px 0 24px;
}
/* ── social marks as icons, Terra-style (2026-08-13, Nico) ──
   Masked shapes rather than <img>, so rest and hover colours are exact instead of being
   approximated with filter chains. Same pattern as the home platform strip. */
.ft-social{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;}
.ft-soc{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;text-decoration:none;}
/* The mask plumbing (display, repeat, position, size) now lives once in css/primitives.css,
   in the shared `.plt-icon,.host-ico-i,.ft-soc-i` rule. Only this mark's box, colour and hover
   belong here. The url()s below stay ROOT-relative because this stylesheet sits at site root,
   unlike the ones in css/ which need ../ . (2026-08-14, audit) */
.ft-soc-i{
  width:26px;height:26px;
  background-color:rgba(255,255,255,0.6);
  transition:background-color .22s, filter .22s;
}
.ft-soc:hover .ft-soc-i{
  background-color:#36ecff;
  filter:drop-shadow(0 0 6px rgba(54,236,255,0.7)) drop-shadow(0 0 14px rgba(54,236,255,0.35));
}
.ft-soc--li .ft-soc-i{-webkit-mask-image:url('assets/social/linkedin-isologo.svg');mask-image:url('assets/social/linkedin-isologo.svg');}
.ft-soc--x  .ft-soc-i{-webkit-mask-image:url('assets/social/x-twitter-isologo.svg');mask-image:url('assets/social/x-twitter-isologo.svg');}
.ft-soc--ig .ft-soc-i{-webkit-mask-image:url('assets/social/instagram-isologo.svg');mask-image:url('assets/social/instagram-isologo.svg');}
/* YouTube's mark is landscape (28.57x20 vs the others' square 50x50), so it has to be sized by
   HEIGHT, not width: capping the width at 26px left it only 18px tall and it read undersized.
   21px tall -> 30px wide, which needs a wider box. Area then lands near the square marks'.
   The file must be the evenodd/knockout version (same one the hero strip masks). The -fill
   variant has the play triangle as a SEPARATE opaque path, so masking it yields a solid blob.
   ?v=2 busts the cache from when the wrong file was briefly in place. */
.ft-soc--yt{width:30px;}
.ft-soc--yt .ft-soc-i{width:30px;-webkit-mask-image:url('assets/social/youtube-isologo.svg?v=2');mask-image:url('assets/social/youtube-isologo.svg?v=2');-webkit-mask-size:auto 21px;mask-size:auto 21px;}

/* link columns */
.ft-col{display:flex;flex-direction:column;align-items:flex-start;}
.ft-h{
  font-family:var(--font);font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:#ffffff;margin-bottom:20px;
}
.ft-col a{
  font-family:var(--font);font-weight:400;font-size:15px;
  color:rgba(255,255,255,0.72);text-decoration:none;padding:5px 0;transition:color .22s;
}
.ft-col a:hover{color:#96ff00;}

/* newsletter column */
.ft-note{
  font-family:var(--font);font-weight:400;font-size:15px;line-height:1.6;
  color:rgba(255,255,255,0.62);margin:0 0 20px;
}
/* Uses the shared .btn-sub component from nav.css (lime fill -> dark wipe + lime type on hover,
   same inversion as the sponsor CTA). Only size lives here.
   Selector must be `.ft-col a.ft-sub`: plain `.ft-sub` (0,1,0) loses to `.ft-col a` (0,1,1),
   which was forcing white text on the lime fill and collapsing the padding to 5px 0.
   Padding is 1px short of 11px to absorb .btn-sub's 1px border. */
/* font-weight must be restated here: `.ft-col a` sets 400 and its (0,1,1) beats .btn-sub's
   (0,1,0), which was rendering the label thin next to the navbar's identical button. */
.ft-col a.ft-sub{font-weight:700;font-size:14px;letter-spacing:.08em;padding:10px 21px;color:#04060a;}
.ft-col a.ft-sub:hover{color:#96ff00;}

/* legal bar */
.ft-bar{
  max-width:1280px;margin:0 auto;padding:24px 40px 40px;
  border-top:1px solid rgba(255,255,255,0.10);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 24px;
}
.ft-cr{font-family:var(--font);font-size:13px;color:rgba(255,255,255,0.5);}
.ft-legal{display:flex;flex-wrap:wrap;gap:8px 20px;}
.ft-legal a{
  font-family:var(--font);font-size:13px;color:rgba(255,255,255,0.5);
  text-decoration:none;transition:color .22s;
}
.ft-legal a:hover{color:#96ff00;}

@media (max-width:900px){
  .ft-inner{grid-template-columns:1fr 1fr;gap:40px;}
}
@media (max-width:560px){
  .ft-inner{grid-template-columns:1fr;padding:56px 24px 40px;}
  .ft-bar{padding:24px 24px 32px;}
}