/* Custom footer palette: red surfaces become black; black ink becomes
   #FF1493. The live background is remapped below the footer's DOM content.
   Historical design notes below describe the original red palette. */
/* ==========================================================================
   footer.css — the red screen. Figma 14740:25636.

   IT REPLACES THE BAR THAT GREW. The old footer was one element animating
   from 0 to 268px at the bottom edge; this is a whole screen, and none of
   that geometry survived, so this file is a rewrite rather than an edit.

   ---- THE TWO AXES ARE NOT TREATED THE SAME -------------------------------
   The same split css/hud.css and css/tscroll.css already make, and for the
   same reason. X is PROPORTIONAL: the band, the two bars and the columns of
   small type have to stretch with the window, and pinning them in pixels
   would leave a 2560 screen with the whole composition huddled on the left.
   Y is PIXELS, anchored to whichever edge the file measures from — the
   headline from the top, the foot cluster from the BOTTOM. Anchored the
   other way round, a footline written at y=828 of 1080 lands in the middle of
   any screen that is not exactly 1080 tall.

   The band is the one exception and takes a SHARE of the height, because it
   is the thing that has to stay across the middle of whatever screen it is
   on rather than a fixed distance from either edge.

   ---- WHAT THE BACKGROUND DOES --------------------------------------------
   Red at a variable ALPHA over whatever is already there, not a white that
   turns red. The block above is a canvas composite and its white is its own;
   a panel that started at #ffffff would have had to match that exactly and
   would have shown a seam the moment it did not. Fading red in over it needs
   to know nothing about the white, arrives at pure red regardless, and the
   half-way state — red at 50% over white — is the pink a real cross-fade
   passes through anyway.

   ---- CAP TOPS, NOT BOX TOPS ----------------------------------------------
   Every y in the file is the top of the CAPITALS. CSS positions the top of
   the LINE BOX, and at this size the box is twice the cap height, so every
   number would land about three pixels low if used verbatim. `--ftr-cap` is
   that difference, measured once against a render and applied in one place.
   ========================================================================== */

/* ---- THE RED IS A BLEND OVER THE PAGE, AND IT IS ITS OWN ELEMENT ---------
   Not a background on the panel. Two things follow from that and both are the
   point.

   IT MULTIPLIES, so the block underneath survives it. Block 02's composite is
   still drawing when the footer arrives — the head, the ASCII ground, the
   blob — and an opaque red simply deleted all of it. Multiplied, white goes to
   the colour and everything darker keeps its darkness: the head reads as a
   deeper red inside the field, which is the gallery's own treatment
   (js/tint.js) applied to this room.

   IT IS A SIBLING OF THE PANEL, NOT A CHILD, and that is not tidiness. A
   `mix-blend-mode` blends with the backdrop inside its nearest stacking
   context, and .ftr has a z-index, which makes one. Put the sheet inside and
   it would blend with the empty space in the panel — a no-op that looks like
   the blend mode failing. js/footer.js appends it to the page for the same
   reason js/tint.js does.

   THE PANEL'S OWN TYPE IS NOT BLENDED. It sits above the sheet at 62, so the
   black headline stays black rather than multiplying into the red. */
.ftr__sheet{
  position: fixed; inset: 0; z-index: 60;
  pointer-events: none;
  background: #fff;
  mix-blend-mode: difference;
  opacity: var(--ftr-mix, 0);
  clip-path: path("M 0 0 Z");
}

/* Invert the live monochrome scene, then tint its light pixels. Both layers
   use the original tear mask, so the head and moving dots remain visible. */
.ftr__tone{
  position: fixed; inset: 0; z-index: 61;
  pointer-events: none;
  background: #ff1493;
  mix-blend-mode: multiply;
  opacity: var(--ftr-mix, 0);
  clip-path: path("M 0 0 Z");
}

.ftr{
  position: fixed; inset: 0; z-index: 62;
  color: #ff1493;
  /* NEVER. A full-screen fixed layer that takes the pointer swallows the
     WHEEL, and block 02's scroll listener is on the page underneath — which
     is exactly what "I get to the footer and it is stuck" is. The links below
     take it back for themselves and nothing else does. */
  pointer-events: none;
  /* NOT `display:none` when shut. The panel has to be laid out for its own
     measurements to be real the moment it is needed; `visibility` keeps it
     out of the way without taking it out of the layout. */
  visibility: hidden;
}
.ftr.is-live{ visibility: visible; }
/* The only things in here that are allowed to be touched — and only once the
   section is actually up, or they would be catching clicks aimed at the block
   above while the red is still coming in. */
.ftr.is-open a,
.ftr.is-open button{ pointer-events: auto; }

.ftr__in{
  position: absolute; inset: 0;
  opacity: var(--ftr-a, 0);
  /* NOTHING HERE MOVES. The panel is finished before the transition starts
     and stays at full strength through all of it; what changes is the shape
     it is CUT to, and js/footer.js writes that as a clip-path taken from the
     tear's own field. Same edge, same shards, same frame as the red — see the
     head of js/footer.js.

     The opacity is still a property because the no-WebGL path has no edge to
     be cut by and goes back to arriving by a fade. It clips the hit area with
     the picture, which is wanted: a link the tear has not reached yet is not
     a link you can click. */
  clip-path: path("M 0 0 Z");
}

/* THE FRAME'S OWN UNITS. Every x below is a share of the file's 1920 and
   every y a pixel count off one edge; these two say which. */
.ftr{
  --ftr-edge: 10px;         /* the margin the whole composition sits inside */

  /* ---- THE TOP CLUSTER IS ONE MEASUREMENT, NOT TWO ----------------------
     The band used to sit at a share of the height (36.3889%, the file's 393
     of 1080) while the headline hung off the top edge. On a 1080 screen the
     two agreed; on anything shorter the percentage walked up into a headline
     that is 294px of fixed type, and the last line was cut in half by the
     band. A composition whose two halves are measured from different things
     will always collide somewhere.

     So the band is now placed BELOW the headline, by a gap: title top, plus
     the headline's own height, plus the clear space. Every screen gets the
     same picture and the collision cannot happen. */
  --ftr-title-top: 10px;    /* cap top of the first line, off the screen top */
  --ftr-title-gap: 64px;    /* clear space between the caps and the band */
  --ftr-title-h: 294px;     /* 2 line pitches + one cap: 102 + 102 + 90 */
  --ftr-band-top: calc(var(--ftr-title-top) + var(--ftr-title-h) + var(--ftr-title-gap));
  --ftr-band-h: 170px;
  --ftr-foot: 252px;        /* the footline: 1080 - 828, off the bottom */
  /* CAP TOP vs LINE BOX TOP, measured against a render rather than derived.
     Every y in the file is the top of the capitals; CSS positions the top of
     the line box, and the two differ by half the leading. One value per line
     pitch used on the page, because the gap grows with the pitch. */
  --ftr-cap:   1.5px;   /* 10px type on a 10px line */
  --ftr-cap11: 2px;     /* …on an 11px line — the notes */
  --ftr-cap12: 2.5px;   /* …on a 12px line — the aside */
}

/* ---------------- the headline -------------------------------------------
   Three spans, not wrapped text. The breaks ARE the drawing — FIND YOUR /
   WAY OUT OF / HERE — and a paragraph that rewrapped on a narrower window
   would be a different picture every time.

   128px is the hero's own size and it is not a coincidence: measured off the
   file the caps are 90px and sit on a 102px pitch, which is what this face
   gives at 128. Same size, same tracking, so the two headlines on this site
   are the same headline. */
.ftr__title{
  position: absolute; left: 0; right: 0;
  /* THE FILE PUTS THE CAPS AT 21 AND THE BOX GOES AT 27.5, which is not an
     adjustment so much as a consequence: line-height 102 on a 128px face is a
     line box SHORTER than the glyphs, so the capitals overflow it upward by
     six and a half pixels. Measured against a render, not derived — and the
     three line widths came out at 517, 532 and 243 against the file's 517,
     532 and 243.5, so the size and the tracking are the file's own. */
  /* +6.5 because the caps overflow the short line box UPWARD by that much —
     see the note above. `--ftr-title-top` is where the capitals land. */
  top: calc(var(--ftr-title-top) + 6.5px);
  margin: 0;
  text-align: center;
  font-weight: 400;
  font-size: var(--ftr-title, 128px);
  line-height: var(--ftr-title-lh, 102px);
  letter-spacing: -0.04em;
  text-transform: uppercase;
}
.ftr__title > span{ display: block; }

/* ---------------- the band -----------------------------------------------
   The supplied file, and it is a SUBTRACTION: a rectangle with the ellipse
   knocked out of it under fill-rule evenodd. What shows through the hole is
   the page's own red, which is why the shape stays correct for every frame
   while that red is still coming up. An ellipse painted red would have had to
   be animated in step with the background and would have been a shade out the
   whole way.

   preserveAspectRatio="none" is in the markup on purpose: the band spans the
   width at a fixed height and the shape stretches with it. It is a long lens
   across the band, not a circle that has to stay round. */
.ftr__band{
  position: absolute;
  left: var(--ftr-edge); right: var(--ftr-edge);
  top: var(--ftr-band-top);
  height: var(--ftr-band-h);
  color: #ff1493;
}
.ftr__bandbg{
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
}
/* EVERYTHING INSIDE THE BAND IS RED. Not "black on red inverted" — the file
   puts the site's pure #ff0000 on the black, the same red the page behind is
   coming up to, so the band reads as a window cut in the screen rather than
   as a separate object with its own palette. */
/* A FLEX ROW AGAIN, AND THE REASON IT WENT BACK. These four were pinned at
   the file's own offsets — 0, 62, 119, 192 — because a flex row drifted five
   pixels short of them by the fourth item. That mattered while the type was
   the file's 14px and the offsets described the same drawing. At 10px it no
   longer does: the items are three quarters as wide, so holding their starts
   would hold the four SLOTS and stretch every gap between them from sixteen
   pixels to nearly thirty. The gap is the thing worth keeping, so the row
   sets itself and the gap stays the file's. */
.ftr__nav{
  position: absolute;
  left: 11.1111%;                       /* 211 of the band's 1899 */
  top: calc(10px - var(--ftr-cap));
  display: flex; align-items: flex-start; gap: 16px;
}
.ftr__navi{
  display: flex; align-items: center; gap: 4px;
  /* THE SITE'S MICROTYPE, not the file's 14. Every other label in this footer
     is 10px, and the nav at 14 was one row shouting across a screen of small
     type. The `+` marks stay at their drawn 6px — they are a mark, not a
     glyph, and shrinking them with the words turns them into a smudge. */
  font-size: var(--ui-10); letter-spacing: -0.4px;
  line-height: 1;
  text-transform: uppercase; text-decoration: none;
  color: #000;
}
/* THE BARS' HOVER, THE SAME ONE. It was opacity .6 — a fifth thing on a page
   whose every other link answers by going white and re-decoding its letters,
   and a dimmed link reads as disabled rather than as pointed at. No transition
   either, for the same reason the bars have none: the scramble IS the
   movement, and a colour easing underneath it arrives second.

   The mark goes with the word. It is drawn with currentColor and it is part of
   the item, not a separate thing beside it. */
.ftr__navi:hover{ color: #fff; }
.ftr__navi svg{ width: 6px; height: 6.667px; flex: none; }

/* THREE SQUARES, NOT FOUR, and all three sit 10px in from their own corner —
   which is why they are written as one rule and three anchors rather than as
   four coordinates. The bottom right is empty because the ERROR PAGE chip is
   what lives there. */
.ftr__sq{
  position: absolute; width: 6px; height: 6px;
  background: #000;
}
.ftr__sq--tl{ left: 10px;  top: 10px; }
.ftr__sq--tr{ right: 10px; top: 10px; }
.ftr__sq--bl{ left: 10px;  bottom: 10px; }

/* The one filled thing on the page: a red chip with black type, which is the
   band's palette turned back the right way up. */
.ftr__err{
  position: absolute; right: 10px; bottom: 10px;
  width: 92px; height: 20px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px;
  background: #000; color: #ff1493;
  /* 10px like everything else. THE BOX DOES NOT FOLLOW THE TYPE DOWN: 92 x 20
     is the chip as drawn, and it is the only filled object on the screen —
     shrink-wrapping it to smaller words would make the one thing meant to look
     pressable the smallest thing in the band. The type gets quieter, the
     target stays the size a target should be. */
  font-size: var(--ui-10); letter-spacing: -0.4px;
  line-height: 1; text-transform: uppercase; text-decoration: none;
}
.ftr__err svg{ width: 6px; height: 6.667px; flex: none; }

/* ---------------- the two bars -------------------------------------------
   944.5 each with a 10px gap, which is the file's own split of the 1899 —
   written as two equal flex children so the split survives any width. */
.ftr__bars{
  position: absolute;
  left: var(--ftr-edge); right: var(--ftr-edge);
  top: calc(var(--ftr-band-top) + 176px);   /* 569 - 393 */
  height: 16px;
  display: flex; gap: 6px;
}
.ftr__bar{
  flex: 1 1 0; min-width: 0;
  margin: 0;
  display: flex; align-items: center;
  /* ALL FOUR SIDES, not just the left. One of these two is a <button> and
     carries the browser's own padding on the other three; left to it the two
     bars come out six pixels different in width, which on a pair that is meant
     to split the line exactly in half is the one error you cannot unsee. */
  padding: 0 0 0 10px;
  background: #ff1493; color: #000;
  font-size: var(--ui-10); letter-spacing: -0.4px;
  line-height: 1; text-transform: uppercase; text-decoration: none;
}
.ftr__bar--btn{
  border: 0; font-family: inherit; cursor: pointer; text-align: left;
}
/* ONE HOVER FOR BOTH BARS, AND IT IS THE TYPE ONLY. The bar inverted to a red
   fill first, which was the ERROR PAGE chip's palette and wrong here for a
   reason worth writing down: the chip is a BUTTON — a small filled object that
   is meant to look pressable — and these two are the full width of the screen.
   Lighting up nine hundred and fifty pixels of black is not a hover, it is the
   page changing. The words answer; the bar stays where it is. */
a.ftr__bar:hover,
.ftr__bar--btn:hover{ color: #fff; }

/* ---------------- the foot cluster ---------------------------------------
   All of it measured off the BOTTOM. See the header: these numbers are a
   footline in the file, and anchoring them to the top would float them into
   the middle of any screen that is not 1080 tall. */
.ftr__lbl{
  position: absolute; margin: 0;
  font-size: var(--ui-10); letter-spacing: -0.4px;
  line-height: 10px; text-transform: uppercase;
}
/* ANCHORED BY THEIR TOP, counted up from the bottom edge — `top: calc(100% -
   n)` rather than `bottom: n`. The difference matters: `bottom` pins the
   BOTTOM of a box whose height depends on how many lines it has, so adding a
   line to a note would have pushed its first line up and out of alignment
   with everything beside it. Counted from the top, a block grows downward and
   its first line stays where the file put it. */
.ftr__project{ left: var(--ftr-edge); top: calc(100% - var(--ftr-foot) - var(--ftr-cap)); }
.ftr__no     { left: 11.5104%;        top: calc(100% - var(--ftr-foot) - var(--ftr-cap)); }
.ftr__slash  { left: 11.5104%;        top: calc(100% - 150px - var(--ftr-cap)); }
/* THE SAME 10px AS EVERYTHING ELSE IN THE FOOT. It was set at 14 for a while,
   measured off the Figma export where this line's ink comes out 153.5 wide
   against the 110.5 the small size gives — the export and the file's own node
   width disagree, and the export won that round. It was the wrong call: every
   other label down here is the site's microtype, and one line a size larger
   reads as a mistake rather than as emphasis. The export is what disagrees
   with the rest of the design, not this. */
.ftr__copy   { left: var(--ftr-edge); top: calc(100% - 15px - var(--ftr-cap)); }

.ftr__ref{
  position: absolute; left: 43.2292%;
  top: calc(100% - var(--ftr-foot) - var(--ftr-cap));
  display: flex; gap: 10px;                 /* 000 at 830, // at 856 */
}
.ftr__ref p{
  margin: 0; font-size: var(--ui-10); letter-spacing: -0.4px;
  line-height: 10px; text-transform: uppercase;
}

.ftr__aside{
  position: absolute; left: 16.25%;
  top: calc(100% - 150px - var(--ftr-cap12));
}
.ftr__aside p{
  margin: 0; font-size: var(--ui-10); letter-spacing: -0.4px;
  line-height: 12px; text-transform: uppercase;   /* the file's 12px pitch */
}

/* THE THREE NOTES ARE ONE BLOCK, not three coordinates. The file stacks them
   at 0, 102 and 215 inside a 242-tall frame, and those gaps are set by how
   many lines each note has — so the block is anchored once and the notes
   space themselves, which is what keeps them right when a line is added. */
.ftr__notes{
  position: absolute; left: 50.2083%;
  top: calc(100% - var(--ftr-foot) - var(--ftr-cap11));
  width: 301px;
  display: flex; flex-direction: column;
  /* 58, NOT the file's 64. The file's gap is measured from the bottom of the
     last CAP of one note to the top of the first cap of the next; a flex gap
     is measured between LINE BOXES, and a line box is six pixels taller than
     the caps it holds. Use 64 and every note after the first sits six pixels
     low, cumulatively. The notes' own starts — 102 and 215 — land exactly at
     58. */
  gap: 58px;
}
.ftr__note{ display: flex; }
.ftr__n{
  flex: 0 0 21px; margin: 0;
  font-size: var(--ui-10); letter-spacing: -0.4px;
  line-height: 11px; text-transform: uppercase;
}
.ftr__note > div p,
.ftr__where > div p{
  margin: 0; font-size: var(--ui-10); letter-spacing: -0.4px;
  line-height: 11px; text-transform: uppercase; white-space: nowrap;
}

/* THE CREDITS THAT ARE LINKS, and they are dressed as type. Nothing changes
   but the cursor — the brief, and the right call: an underline here would turn
   a credit into a button and the whole note into a menu.

   PLAIN INLINE, not `display: contents`. Contents was the clever answer — no
   box at all, so nothing to disturb the 11px line pitch — and it is the wrong
   one: an element with no box has no box to hit-test or to hang
   `pointer-events` on, and this footer switches pointer-events on per link. An
   ordinary inline anchor filling its own <p> changes the line box by nothing
   anyway, and it is a link the way every other link is. */
.ftr__link{
  color: inherit; text-decoration: none;
  cursor: pointer;
}

.ftr__where{
  position: absolute; right: 11px;
  top: calc(100% - var(--ftr-foot) - var(--ftr-cap11));
  /* THE WIDTH IS THE FILE'S 92 AND IT IS LOAD-BEARING. Left to shrink-wrap,
     the block is as wide as "lviv, ukraine" happens to set and its right edge
     — which is what is anchored — drags the number in from where the file
     puts it. */
  width: 92px;
  display: flex;
}
/* RIGHT-ALIGNED, which the file does not say and the export does: CURRENTLY
   is 42.5 of ink ending flush with LVIV, UKRAINE at the block's right edge.
   Both text nodes are the frame's full 71 wide, so left or right is invisible
   in the coordinates and obvious in the picture. */
.ftr__where > div{ flex: 1 1 auto; text-align: right; }

/* ---------------- the phone ----------------------------------------------
   The composition is a 1920 drawing and does not survive being squeezed into
   a phone: the headline alone is 128px of type. Below the site's own
   breakpoint the band keeps its shape and everything else stacks, which is a
   different drawing rather than a shrunk one. */
@media (max-width: 860px){
  .ftr{ --ftr-band-h: 96px; --ftr-foot: 190px; }
  .ftr__title{ font-size: 12vw; line-height: 1.02; top: 24px; }
  .ftr__nav{ left: 4%; }
  .ftr__ref, .ftr__aside, .ftr__slash, .ftr__no{ display: none; }
  .ftr__notes{ left: 10px; right: 10px; width: auto; gap: 22px; }
  .ftr__where{ display: none; }
}