/* ═════════════════════════════════════════════════════════════════════════
   FOOTER — the very end of the landing, Services, About and every project
   page (and privacy.html): three small columns on a hairline, in the type of
   the site's labels. The wheel (Work) only gets its two corners beside the
   menu: © on the left, Privacy policy on the right.
   Markup: index.html <template id="sc-foot-tpl"> (one source for all of them)
   ═════════════════════════════════════════════════════════════════════════ */

.sc-foot {
  --ink: #1B1819;
  --g: max(16px, 2.5vw);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(10px, 1.35vw, 26px);
  margin: 0 var(--g);
  padding: 11px 0 calc(3vh + 104px);                /* the menu sits below it */
  border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
  font: 500 13px/1.7 var(--lbl);
  letter-spacing: -0.005em;
  text-transform: lowercase;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.sc-foot-col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.sc-foot-col > :last-child { color: color-mix(in srgb, var(--ink) 55%, transparent); }
.sc-foot-col:last-child { align-items: flex-end; text-align: right; }
.sc-foot a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.3s ease, color 0.3s ease;
}
.sc-foot a:hover, .sc-foot a:focus-visible { color: var(--ink); text-decoration-color: currentColor; }

/* Services: the section after the journey, on the page's own white */
#services-scroll > .sc-foot { position: relative; background: #FFFFFF; margin: 0; padding-left: var(--g); padding-right: var(--g); border-top: 0; }
#services-scroll > .sc-foot::before { content: ''; position: absolute; top: 0; left: var(--g); right: var(--g); border-top: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); }
/* a project page: its own last section */
.pj-foot { background: var(--paper, #FFFFFF); padding-top: 4vh; }

/* the landing: a sheet that rises at the end of Exposition (index.html moves it) */
#land-foot {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 7;                                       /* over the story (6); the menu and GET IN TOUCH stay on top */
  padding-top: 22px;
  background: #FFFFFF;
  transform: translateY(100%);
  visibility: hidden;
  will-change: transform;
}

/* the wheel: two corners level with the menu button */
#wheel-foot {
  position: fixed;
  left: max(16px, 2.5vw); right: max(16px, 2.5vw);
  bottom: calc(3vh + 32px);
  z-index: 2;                                       /* over the wheel, under every page that opens over it */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateY(50%);
  font: 500 12px/1 var(--lbl);
  letter-spacing: -0.005em;
  text-transform: lowercase;
  color: rgba(27, 24, 25, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
  pointer-events: none;
}
#wheel-foot.on { opacity: 1; visibility: visible; transition: opacity 0.6s ease 0.4s, visibility 0s; }
#wheel-foot a { color: inherit; text-decoration: none; pointer-events: auto; transition: color 0.3s ease; }
#wheel-foot a:hover, #wheel-foot a:focus-visible { color: #1B1819; }
body.svc-open #wheel-foot, body.ab-open #wheel-foot, body.pj-open #wheel-foot { opacity: 0; visibility: hidden; transition: none; }

@media (max-width: 767px) {
  .sc-foot { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding-top: 14px; font-size: 12px; }
  .sc-foot-col:last-child { align-items: flex-start; text-align: left; }
  #wheel-foot { font-size: 10.5px; letter-spacing: -0.005em; }
}
@media (max-width: 380px) {
  #wheel-foot .wf-long { display: none; }           /* "© 2026 StayCeen" on the smallest phones */
}