/* footer.css: the foot of every BRIDGE page (T-111, Omar picked "the quay at dusk" on 18 Oct).
   One type system: BRIDGE Pixel once, for the sentence with the time; Rubik for everything else, in two sizes.
     L  the time sentence     BRIDGE Pixel 600
     M  every link and line    Rubik, links 500, words 400, all in ink
     S  the copyright line     Rubik 400, ink-soft
   Then the town's sunset painting across the foot, the cast walking home along the quay (assets/footer.js).
   Colors come from bridge.css (--mist, --ink, --ink-soft, --brick, --lamp, --outline). */
.bf { --bf-m: clamp(18px, 1.2vw, 22px); position: relative; overflow: hidden; background: var(--mist); color: var(--ink);
  padding-top: clamp(80px, 9vw, 150px); }
:where(.bf) p { margin: 0; }
:where(.bf) a { color: inherit; }
.bf-in { padding: 0 var(--gutter); }

/* L: the one display line */
.bf-lead { font-family: var(--f-head); font-weight: 600; font-variant-ligatures: none; font-synthesis: none; font-variant-numeric: tabular-nums;
  font-size: clamp(28px, 2.5vw, 48px); line-height: 1.16; letter-spacing: -.005em; max-width: 22ch; text-wrap: balance; }

/* M: three groups of the same links and lines, side by side, spaced instead of labelled */
.bf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(32px, 4vw, 80px); max-width: 1500px;
  margin-top: clamp(44px, 4.4vw, 76px); font-size: var(--bf-m); line-height: 1.45; }
.bf-grid nav, .bf-write { display: grid; align-content: start; }
.bf-grid nav a { display: flex; align-items: center; width: fit-content; min-height: 44px; font-weight: 500; text-decoration: none;
  background: linear-gradient(var(--brick), var(--brick)) no-repeat 0 calc(100% - 6px) / 0 2px; transition: background-size .45s var(--ease); }
.bf-grid nav a:hover { background-size: 100% 2px; }
/* the page you are on: a lit window after its name, so every name still starts on the same line */
.bf-grid nav a[aria-current] { color: var(--ink-soft); }
.bf-grid nav a[aria-current]::after { content: ""; flex: none; width: 9px; height: 9px; margin-left: 12px; background: var(--lamp); box-shadow: 0 0 0 2px var(--outline); }
.bf-write { gap: 14px; padding-top: 9px; }
.bf-write a { font-weight: 500; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.bf-write a:hover { text-decoration-color: var(--brick); text-decoration-thickness: 2px; }

/* the painting: as tall as it is when it fills the width, never under 230 px; narrower screens see its middle */
.bf-quay { --ar: 2760 / 455; position: relative; margin-top: clamp(56px, 6vw, 100px); height: max(230px, calc(100vw / (var(--ar)))); overflow: hidden; }
.bf.is-cairo .bf-quay { --ar: 2760 / 673; height: max(270px, calc(100vw / (var(--ar)))); }
.bf-plate { position: absolute; top: 0; left: 50%; height: 100%; aspect-ratio: var(--ar); transform: translateX(-50%); }
.bf-plate > img { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; }
.bf-walk { position: absolute; inset: 0; }
.bf-front { position: absolute; pointer-events: none; image-rendering: auto; }
.bf-quay:not(.is-ready) .bf-walk { visibility: hidden; }
.bf-walk .spr { image-rendering: auto; }

/* S: the copyright, with the BRIDGE mark beside it */
.bf-base { display: flex; align-items: center; gap: 12px; padding: 18px var(--gutter) 22px; font-size: 14px; color: var(--ink-soft); }
.bf-mark svg { display: block; width: 30px; height: 18px; }

@media (max-width: 900px) {
  .bf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bf-write { grid-column: 1 / -1; padding-top: 0; }
}
@media (max-width: 560px) {
  .bf-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}