/* Footer (Figma 953:16115): the frame opens up at the end. One screen tall, the last screen.
   Content scrolls; the frame changes in place (layoutFooter() and footerAnims() in main.js):
   - scrolls with the page: the center window (a hero-style box), its brackets and text, and the floor with the wordmark
   - fixed frame, emerging in place: the seams (column edges, through the nav, under the nav) and the side windows
   Every view onto the photo is a "photo window": an element clipped by a vector outline (always sharp) holding a fixed,
   full-screen copy of the photo, so all views line up with each other and stay still while the windows move.
   Geometry is set from layoutFooter() in px; sizes here are design px × --u. */
.pw { position: fixed; inset: 0; pointer-events: none; isolation: isolate; }
.pw img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pw i { position: absolute; inset: 0; background: var(--slate-400); mix-blend-mode: color; }   /* tint (Figma: Color blend) */
.pwin { position: absolute; pointer-events: none; }
.fseam { clip-path: inset(0); }
.fside { position: fixed; z-index: 2; pointer-events: none; }
.fside .fbr { left: 0; top: 0; opacity: 0; }

.foot { position: relative; height: 100vh; }
.fbr { position: absolute; overflow: visible; pointer-events: none; color: var(--travertine); }

/* Content: centered on the screen, 24 between the items (Figma) */
.fcontent { position: absolute; left: var(--xnl); width: calc(var(--xnr) - var(--xnl)); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center; gap: calc(24px * var(--u)); text-align: center;
  color: var(--argent-200); font-family: var(--f-small); text-transform: uppercase; }
/* BP monogram in Argent foil (lit center → shade), like the nav pins (it took the star's place above the copyright;
   the top group has the nav's logo badge, .flogo, styled with #nav .logo in nav.css) */
.fmark { display: block; width: calc(32px * var(--u)); height: calc(19.36px * var(--u)); background: radial-gradient(circle, var(--lit), var(--shade));
  mask: url(../assets/bp.svg) center / 100% 100% no-repeat; -webkit-mask: url(../assets/bp.svg) center / 100% 100% no-repeat; }
.fgrp { display: flex; flex-direction: column; align-items: center; gap: calc(24px * var(--u)); }
/* Contact lines (for now only the city; 2026-10-21): the city, email and links stacked, all in the same type; the links look like the city at
   rest and show their underline on hover and focus (user, 2026-10-08) */
.fln, .fln:visited { color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .2em;
  text-decoration-thickness: 1px; transition: color .15s, text-decoration-color .15s; }
.fln:hover, .fln:focus-visible { color: var(--argent-50); text-decoration-color: currentColor; }
.fln:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; border-radius: 2px; }
.foot address { font: 300 max(12px, calc(14px * var(--u)))/2 var(--f-small);   /* line height 2: more air between the contact lines (was 1.5; user, 2026-10-08) */
  letter-spacing: .05em; font-style: normal; }
/* Copyright and terms: one small group (6 apart) */
.fterms, .fterms:visited { font: 400 max(11px, calc(12px * var(--u)))/1.1 var(--f-small); letter-spacing: .08em; color: inherit;
  text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.fterms:hover { color: var(--argent-50); }
.fterms:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; border-radius: 2px; }

/* The floor: the wordmark row at the very bottom of the column, scrolling with the footer (its letters and the seam
   along its top are photo windows; the beige is the column paint, which turns beige there) */
.fwm { position: absolute; left: var(--xnl); width: calc(var(--xnr) - var(--xnl)); bottom: 0; }

/* The column-edge seams continued up through the nav to the top of the screen (fade in with the seams below) */
.navseam { position: fixed; z-index: 6; top: 0; width: 1px; height: calc(var(--pt) * 1px); clip-path: inset(0); opacity: 0; pointer-events: none; }
.navseam.l { left: calc(var(--xnl) - 1px); } .navseam.r { left: var(--xnr); }
/* (phones: the column edges sit right where the nav pins are, so the seams stop at the nav's bottom edge) */
body.m .navseam { display: none; }
/* The line under the nav, as a seam onto the photo: fixed, so it's always exactly under the nav. Desktop: across the
   column in the gap row (the side windows carry it over the sides). Phones: the full width, over the bar's own line. */
.topseam { position: fixed; z-index: 6; height: 1px; clip-path: inset(0); opacity: 0; pointer-events: none; }

/* Phones: the footer is plain page content (user, 2026-10-09: screen-pinned layers kept glitching under iPhone Safari's
   toolbars). Its own background (.mfoot): plain beige gutters, edged by the column's 1px taupe lines, as on the first
   screen (user, 2026-10-09), and the column's color down the middle (the same gradient as the column paint, --fgrad). It
   rises over the frame's pillars as it scrolls in. The window and the wordmark letters show the photo (layoutFooter). */
.mfoot { position: absolute; inset: 0; background: var(--beige); }
/* The mirror of the first screen's soft reveal (.pfade): a band riding above the footer's top edge in the gutters,
   clear easing to beige over 180, so the pillars fade into the footer's plain beige instead of a hard cut (user,
   2026-10-09) */
.mfoot .ffade { position: absolute; bottom: 100%; height: calc(180px * var(--u)); pointer-events: none;
  background: linear-gradient(0deg, var(--beige), color-mix(in srgb, var(--beige) 86%, transparent) 14%,
    color-mix(in srgb, var(--beige) 64%, transparent) 30%, color-mix(in srgb, var(--beige) 40%, transparent) 47%,
    color-mix(in srgb, var(--beige) 20%, transparent) 64%, color-mix(in srgb, var(--beige) 7%, transparent) 81%, transparent); }
.mfoot .ffade.l { left: 0; width: calc(var(--xnl) - 1px); } .mfoot .ffade.r { left: calc(var(--xnr) + 1px); right: 0; }
.mfoot .fcol { position: absolute; top: 0; bottom: 0; left: calc(var(--xnl) - 1px); right: calc(100% - var(--xnr) - 1px);
  border: 1px solid var(--taupe); border-top: 0; border-bottom: 0; background: var(--fgrad, var(--earth-500)) padding-box; }
body.m .foot-key { z-index: 1; }                     /* the divider stays above the footer's background where they overlap */
body.m .fside, body.m .topseam, body.m .navseam { display: none; }
body.m .pwin .pw { position: absolute; }
body.m .fwm .fseam { background: var(--taupe); } body.m .fwm .fseam .pw { display: none; }

/* Phase 1 (no sections; user, 2026-10-19: no second image right after the hero): the footer's contents sit in the brown
   that's revealed, with no window, brackets or photo; the page ends in the beige wordmark floor with the wordmark in oak,
   like the wordmark row at the top. On phones the footer's beige is in the gutters only, so the column shows the brown. */
body.nosec #fWin, body.nosec #fBox { display: none; }
body.nosec .fwm .fseam { background: var(--taupe); } body.nosec .fwm .pw { display: none; }
body.nosec .fwm .flet { background: var(--oak); }
body.m.nosec .mfoot { background: linear-gradient(90deg, var(--beige) calc(var(--xnl) - 1px), transparent calc(var(--xnl) - 1px),
  transparent calc(var(--xnr) + 1px), var(--beige) calc(var(--xnr) + 1px)); }