/* Port skyline along the bottom of the footer (footer.png, 2688 x 620, served as WebP).
   CSS only: the <footer> markup is untouched, because tools/check_final_integration.py
   compares it with the archived page. Remove this file's <link> and the footer is as it was.
   Preview without it: ?footer=off

   The desktop WebP copies have the artwork's pale sky lifted to pure white, so multiply blending
   leaves the footer ground exactly as it is and only the skyline tints it. That is why no
   rectangle shows at any size. (Multiply needs a light ground; this page is light only.)

   --foot-room   optional extra height under the footer content. It is 0: the footer keeps its
                 original height and the skyline sits behind the lower part of the content.
   --foot-art    skyline strength, 0 to 1. */
html:not([data-footer-art="off"]) .day .fslab{--foot-room:0px;--foot-art:.95;isolation:isolate}
html:not([data-footer-art="off"]) .day .fslab .fgrid{padding-bottom:calc(clamp(32px,4vw,52px) + var(--foot-room))}
html:not([data-footer-art="off"]) .day .fslab::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  opacity:var(--foot-art);mix-blend-mode:multiply;
  background:url("omni-footer-port-1344.webp?v=620") center bottom/100% auto no-repeat;
  /* Thin the water out behind the legal line. */
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 84px),rgba(0,0,0,.4) 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 84px),rgba(0,0,0,.4) 100%)}
@media (min-resolution:1.5dppx) and (min-width:700px),(min-width:1500px){
  html:not([data-footer-art="off"]) .day .fslab::before{background-image:url("omni-footer-port-2688.webp?v=620")}
}
/* The skyline now sits behind the link columns: a soft clearing behind them, and ink instead of grey. */
html:not([data-footer-art="off"]) .day .fslab::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(30% 52% at 81% 50%,rgba(242,243,255,.88) 0%,rgba(242,243,255,.6) 52%,rgba(242,243,255,0) 82%)}
html:not([data-footer-art="off"]) .day .fslab .fcols a{color:rgba(27,29,74,.82)}
html:not([data-footer-art="off"]) .day .fslab .fcols a:hover{color:#4F46E5}
html:not([data-footer-art="off"]) .day .fslab .fcols h4{color:rgba(27,29,74,.62)}
/* The legal line sits over the water: give it ink, not grey. */
html:not([data-footer-art="off"]) .day .fslab .legal{color:rgba(27,29,74,.78);border-top-color:rgba(27,29,74,.12)}

/* Narrow screens: a full-width skyline would be a thin strip, so scale it up and frame the cranes and bridge. */
@media (max-width:860px){
  html:not([data-footer-art="off"]) .day .fslab{--foot-room:0px}
  /* Stacked footer: the links run down the left, so the clearing moves there. */
  html:not([data-footer-art="off"]) .day .fslab::after{background:radial-gradient(80% 190px at 34% calc(100% - 190px),rgba(242,243,255,.86) 0%,rgba(242,243,255,.55) 55%,rgba(242,243,255,0) 85%)}
  html:not([data-footer-art="off"]) .day .fslab::before{background-size:max(100%,900px) auto;background-position:60% bottom;
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 96px),rgba(0,0,0,.4) 100%);
    mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 96px),rgba(0,0,0,.4) 100%)}
}
/* Phones get their own composition (the warehouse yard, footer-mobile-new.png, 1744 x 2336), with its sky
   lifted to white like the desktop copies so multiply leaves the footer ground alone. The layer fills the
   footer; the image fits the width and anchors to the bottom, so on wider phones the sky is what gets
   cropped, never the sides. (No aspect-ratio on the layer: with a height cap it transfers into the width.) */
@media (max-width:700px){
  html:not([data-footer-art="off"]) .day .fslab::before{
    inset:0;height:auto;max-height:none;aspect-ratio:auto;
    background-image:url("omni-footer-yard-mobile-1200.webp");
    background-size:100% auto;background-position:center bottom;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 75%,rgba(0,0,0,.4) 100%);
    mask-image:linear-gradient(180deg,transparent 0%,#000 26%,#000 75%,rgba(0,0,0,.4) 100%);
  }
}