/* Round 24 footers: three options (street, wordmark, minimal).
   Every colour comes from the page's CSS variables (--paper, --ink, --mute, --hair, --orange),
   so the same markup works on warm paper and on the dark paper (html[data-paper="dark"]).
   Nothing here hardcodes a light-only colour, except the warm lit-window tint, which reads on both. */

.ft {
  /* Local helpers built from the page tokens. color-mix() blends two colours by a percentage:
     here "7% ink, 93% paper" gives a colour only a touch darker than the page. */
  --ft-ghost: color-mix(in srgb, var(--ink) 7%, var(--paper));
  --ft-lit-ink: .16;        /* how strongly an "ink" lit window tints its pane */
  --ft-warm: #E9B96A;       /* the soft warm window light */
  position: relative;
  color: var(--ink);
  background: var(--paper);
  font: 16px/1.45 var(--sans, "Bricolage Grotesque", system-ui, sans-serif);
  overflow: hidden;         /* the street and the wordmark are cropped by the footer's own edges */
}
.ft *, .ft *::before, .ft *::after { box-sizing: border-box; }
.ft a { color: inherit; text-decoration: none; }
.ft-wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--gut, 32px); }

/* ---------- the link columns (shared by all three) ---------- */
/* A 4-column grid: the mark, then Services / Company / Contact. */
.ft-cols {
  display: grid;
  grid-template-columns: 1.3fr 1.2fr 1fr 1fr;
  gap: 32px;
  padding: 56px 0 44px;
  border-top: 1px solid var(--hair);
}
.ft-col a.ft-mark { color: var(--ink); font-weight: 700; font-size: 22px; letter-spacing: -.03em; font-variation-settings: "opsz" 40; }
/* Column heads use Bricolage, small and a touch heavier than the links. */
.ft-col h3 {
  margin: 0 0 14px; font: 600 14px/1.2 var(--sans, "Bricolage Grotesque", system-ui, sans-serif);
  letter-spacing: -.005em; font-variation-settings: "opsz" 14;
}
.ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ft-col a { font-size: 14px; color: var(--mute); transition: color .12s ease; }
.ft-col a:hover { color: var(--ink); }
.ft a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

/* ---------- the meta line: small mono, hairline above ---------- */
.ft-meta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px 32px; flex-wrap: wrap;
  padding: 18px 0 18px; border-top: 1px solid var(--hair);
  font: 400 11.5px/1.5 var(--mono, "JetBrains Mono", ui-monospace, Menlo, monospace);
  color: var(--mute); letter-spacing: .01em;
}
.ft-meta p { margin: 0; }

/* ---------- F1 street ---------- */
.ft--street .ft-meta { padding-bottom: 26px; }
/* The SVG fills the full width. Its height follows the width (16.11vw = 232/1440) so the whole street
   shows on desktop; on a phone the height is floored and "slice" crops the sides to the middle buildings. */
.ft-street {
  display: block; width: 100%; height: clamp(124px, 16.11vw, 300px);
  margin-bottom: -1px;      /* tuck the last pixel under the page edge so no seam shows */
}
/* Drawing classes. vector-effect keeps every stroke one thin pixel no matter how the SVG is scaled. */
.ft-street * { vector-effect: non-scaling-stroke; }
.ft-street .f  { fill: var(--paper); stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.ft-street .fm { fill: var(--paper); stroke: var(--mute); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.ft-street .l  { fill: none; stroke: var(--ink); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.ft-street .lm { fill: none; stroke: var(--mute); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.ft-street .lh { fill: none; stroke: var(--hair); stroke-width: 1; stroke-linecap: round; }
.ft-street .ink { fill: var(--ink); stroke: none; }
/* Lit windows: a tint laid over the paper-coloured pane. */
.ft-street .lit-ink  { fill: var(--ink); fill-opacity: var(--ft-lit-ink); stroke: none; }
.ft-street .lit-warm { fill: var(--ft-warm); fill-opacity: .55; stroke: none; }
.ft-street .lit-hot  { fill: var(--orange, #FF560D); stroke: none; }       /* the one orange window */
.ft-street .pulse    { fill: var(--ink); fill-opacity: 0; stroke: none; }  /* flashed by script when work arrives */
.ft-street .dot      { fill: var(--ink); stroke: none; }

/* ---------- F2 wordmark ---------- */
.ft--wordmark .ft-meta { border-bottom: 0; }
/* The wordmark box is shorter than the text, and overflow:hidden slices the bottom of the letters off. */
.ft-wm {
  margin-top: 10px; height: 18vw; overflow: hidden;
  display: flex; justify-content: center;
}
.ft-wm span {
  display: block; font-weight: 700; font-size: 28vw; line-height: .96; letter-spacing: -.035em;
  font-variation-settings: "opsz" 96, "wdth" 92;
  color: var(--ft-ghost);   /* 7% ink on paper: present, but it never competes with the links */
  user-select: none; white-space: nowrap; margin-top: -3.2vw;
}
.ft-wm i { font-style: normal; color: var(--orange, #FF560D); }       /* the single orange full stop */

/* ---------- F3 minimal ---------- */
.ft--minimal .ft-cols { padding-bottom: 40px; }
.ft--minimal .ft-meta { padding-bottom: 32px; }

/* ---------- phone ---------- */
@media (max-width: 860px) {
  .ft-wrap { padding: 0 var(--gut, 20px); }
  /* Mark on its own row, then the three columns in a row of their own would be too tight: use 2 + 1. */
  .ft-cols { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding: 36px 0 32px; }
  .ft-cols .ft-brand { grid-column: 1 / -1; }
  .ft-meta { flex-direction: column; gap: 6px; padding-top: 16px; }
  .ft-wm { height: 21vw; }
  .ft-wm span { font-size: 31vw; margin-top: -3vw; }
}