/* Big footer: the dot field with the S on top (drawn by footer.js), the link columns and the fine print under it.
   Loads after site.css and overrides its «footer» block, which is left untouched. */
footer.big{display:block;padding:0;border-top:1px solid var(--line);background:var(--bg);font-size:14px;color:var(--dim)}
footer.big .dots{position:relative;height:clamp(340px,52svh,640px);overflow:hidden}
/* the field rises out of the page above and settles into the columns below */
footer.big .dots canvas{position:absolute;inset:0;display:block;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(transparent,#000 16%,#000 80%,transparent);mask-image:linear-gradient(transparent,#000 16%,#000 80%,transparent)}
footer.big .cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding:44px var(--gut) 52px;border-top:1px solid var(--line)}
footer.big h5{margin:0 0 16px;font:500 11px/1.2 var(--m);letter-spacing:.14em;text-transform:uppercase;color:var(--fnt)}
footer.big .cols a{display:block;width:fit-content;padding:5px 0;font-size:15px;line-height:1.35;color:#bdbdbd;transition:color .2s}
footer.big .cols a:hover,footer.big .cols a:focus-visible{color:var(--tx);box-shadow:inset 0 -1px var(--t)}
footer.big .fine{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 32px;padding:20px var(--gut) 28px;border-top:1px solid var(--line);color:var(--fnt);font:12px/1.5 var(--m)}
@media (max-width:900px){footer.big .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px;padding:36px var(--gut) 40px}}
@media (max-width:600px){footer.big .dots{height:clamp(260px,40svh,360px)}footer.big .fine{flex-direction:column}}

/* ambient motif: fills its positioned parent behind that parent's content; the parent gets its own stacking context
   so z-index:-1 stays above the parent's background */
.dotfield{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:auto}
.dotfield canvas{display:block;width:100%;height:100%}
:where(:has(>.dotfield)){isolation:isolate}