/* The homepage's header, section rules, closing band and footer on the site's other pages.
   Their markup comes from tools/home-sections/chrome.py and their styles from
   /home-sections.css (the homepage stylesheet, confined to .home-scope); these are the
   changes they need to sit in a page's .frame. Pages give their frame id="top". */

/* The pieces inherit the canvas scale the page sets on <html>. */
#top > .home-scope{ --page-zoom:inherit; }

/* A page's own column lines (.wrap, .lab-col) sit where the header's rails do: the homepage
   draws them 1px of its 1440px canvas outside the column, as thick as that canvas's 1px. */
:root{ --col-line:calc(1px * var(--page-zoom, 1)); --col-edge:calc(var(--rail, 0px) - var(--col-line)); }

/* The closing band sits under the bottom of the homepage's hills painting. */
.close-art{ position:relative; height:clamp(96px,13vw,190px); overflow:hidden; background:var(--frame,#fcfaf7); }
.close-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 100%; -webkit-mask-image:linear-gradient(to bottom,transparent,#000 55%); mask-image:linear-gradient(to bottom,transparent,#000 55%); }
.frame > #home-foot [data-section="careers"] h2{ text-wrap:balance; }
@media (min-width:768px) and (max-width:1023.98px){
  /* Stacked on a tablet, the band's heading would sit right on its paragraph. */
  .frame > #home-foot [data-section="careers"] [data-stacked]:has(> h2){ row-gap:24px; }
}

@media (min-width:1441px){
  /* Wider than the frame, the page reads as one surface, as the homepage does: the sides
     are the frame's paper, the frame's edges remain as its rails, and the closing band
     and the footer carry their colour to the window's edges. */
  body{ background:var(--frame,#fcfaf7); overflow-x:clip; }
  /* Its edges are drawn inside it, where the homepage's bands draw theirs. A border would
     narrow the frame to 1438px, and with it the scale of everything on the 1440px canvas,
     so the header's and the bands' edges would sit a pixel inside this line. */
  #top.frame{ background:linear-gradient(var(--line,#e6e0d8),var(--line,#e6e0d8)) left top / 1px 100% no-repeat,
                         linear-gradient(var(--line,#e6e0d8),var(--line,#e6e0d8)) right top / 1px 100% no-repeat,
                         var(--frame,#fcfaf7); }
  .frame > #home-foot{ overflow-x:visible; }
  .frame > #home-foot [data-section="careers"]{ border-image:linear-gradient(#659054 0 0) fill 0 / / 0 100vmax; }
  .frame > #home-foot footer[data-section="footer"]{ border-image:linear-gradient(#1e1c1a 0 0) fill 0 / / 0 100vmax; overflow-x:visible; }
  /* The footer's "Chariot" sits at the window's right edge, not the frame's. */
  .frame > #home-foot footer .foot-ghost{ right:calc((1440px - 100vw) / 2 - 1px - 1vw); }
}