/* ════════════════════════════════════════════════════════════════════
   TENORA — the shared site footer (directory + outlined wordmark).
   Created 2026-08-11.

   Dylan: "now that there are a lot of sub pages you should write a
   professional website directory at the bottom yk with the cold text links.
   also you should do that thing where it shows the company name in massive
   outlined - not filled lettesr like T E N O R A below the directory."

   WHY A FILE AND NOT A COPY PER PAGE. The site is static with no build step,
   so the MARKUP is pasted into each page (eleven of them) and only the CSS is
   shared. That is the right split: the markup is ten lines you can read in
   place, and the styling is the part that would drift. Every value below
   resolves against the tokens both stylesheets already define (index.html's
   :root and legal.css's), with literal fallbacks so a page that links this
   without either still renders.

   The old footers this replaces were a single centred row of five links. That
   was honest when the site was one page; it is not now — there are six
   comparison pages, a help page and two legal pages, and a visitor who lands
   on /compare/dex has no way to discover any of the others.
   ════════════════════════════════════════════════════════════════════ */

.site-footer {
  position: relative;
  z-index: 2;
  margin-top: 90px;
  padding: 54px clamp(20px, 4vw, 48px) 0;
  border-top: 1px solid rgba(210, 215, 235, 0.09);
  /* No background here. A full-width scrim was the second wrong answer — "you
     didn't make a blur you just blacked out the entire bottom section" — and it
     was wrong for the same reason the glass cards were: it solved legibility by
     adding a shape. The site already has the right mechanism (.starwell in
     index.html), and it goes on the TEXT, not the section. See .sf-dir::before. */
  /* The wordmark below is deliberately wider than most viewports. Clipping it
     at the page edge is the effect; a horizontal scrollbar is not. */
  overflow: hidden;
  font-family: var(--body, "Plus Jakarta Sans", system-ui, sans-serif);
  /* THE COLUMN COUNT IS A QUESTION ABOUT THIS BOX, NOT THE WINDOW. Every page
     keeps the footer outside its content wrapper so the directory and wordmark
     can use the full page width consistently. */
  container-type: inline-size;
  container-name: sfoot;
}

/* ── The directory ─────────────────────────────────────────────────── */
/* A DIV WITH role="navigation", NOT A <nav> (2026-08-11). It shipped as <nav>
   for ten minutes and the home page pinned it under the top bar: index.html
   styles the BARE `nav` element as its fixed floating header, so the footer
   directory inherited position:fixed and rode the scroll. A shared component
   dropped into eleven pages cannot use a generic element that any one of them
   might have claimed. The role keeps the landmark for screen readers, and the
   two declarations below are belt-and-braces against the same class of
   collision. */
.sf-dir {
  position: relative;
  transform: none;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  /* EXPLICIT COLUMNS, NOT auto-fit (2026-08-11). auto-fit was fine for bare
     text and wrong the moment each column became a padded panel: the extra
     36px of padding pushed the tracks over their minimum, so the 720px pages
     fitted three and orphaned Contact onto a row of its own. Two breakpoints
     say what should actually happen — 4-up where there is room (the home
     page), a clean 2×2 everywhere else. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* And the panels size to their CONTENT. Stretched to match the seven-item
     Compare column, Tenora and Legal were mostly empty box. */
  align-items: start;
  gap: 30px 26px;
}
@container sfoot (min-width: 900px) {
  .sf-dir { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── THE WELL (2026-08-12, third attempt and the right one) ────────────────
   Dylan: "Other headers on the site have a gradient, black blur behind it to
   distinguish from the stars. Try that."
   That mechanism is `.starwell` in index.html and it is already used by the
   hero, both section heads and the finale — so the footer should not have
   invented anything. It is a soft pool that sits BEHIND the text and fades to
   zero before it reaches any edge, which is why it never reads as a box: there
   is no boundary to see.
   Copied faithfully, with one addition it earns here: a backdrop blur carrying
   the SAME mask as the gradient, so the stars soften exactly where the pool is
   dark and are untouched where it has faded out. Masking the filter is the
   whole trick — an unmasked backdrop-filter has a hard rectangular edge, which
   is the blacked-out band again wearing a blur.
   farthest-side, not the default farthest-corner: with farthest-corner the
   ellipse runs past the box, so the fade is still half-opaque at the edge and
   you get a straight cut down the sides. index.html's note says the same thing
   — this is that lesson, not a fresh one. */
.sf-dir::before,
.sf-base::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 128%;
  height: 165%;
  background: radial-gradient(ellipse farthest-side at center,
    rgba(5, 5, 12, 0.8) 0%, rgba(5, 5, 12, 0.74) 56%, rgba(5, 5, 12, 0.42) 78%, rgba(5, 5, 12, 0) 100%);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  -webkit-mask-image: radial-gradient(ellipse farthest-side at center,
    #000 0%, #000 56%, rgba(0, 0, 0, 0.45) 78%, transparent 100%);
  mask-image: radial-gradient(ellipse farthest-side at center,
    #000 0%, #000 56%, rgba(0, 0, 0, 0.45) 78%, transparent 100%);
}
.sf-dir > *,
.sf-base > * { position: relative; z-index: 2; }
.sf-base { position: relative; z-index: 1; }
.sf-base::before { width: 150%; height: 320%; }

/* ONE SCRIM, NOT FOUR CARDS (2026-08-11, corrected 2026-08-12). Dylan: "i
   didn't want blured cards just the black blur on the rest of the text."
   Right — the point was legibility over the starfield, and per-column panels
   solved that by inventing four boxes nobody asked for, which made the footer
   the loudest thing on a page it should close quietly. The blur now lives on
   .site-footer itself (see there): the stars go soft behind the whole footer
   region and the text is just text on it. Columns are bare again. */
.sf-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
}

/* SAME WHITE AS THE LINKS, AND BIGGER (2026-08-11, his call). It shipped at
   11px in --t3, which is the colour of a caption — so the four headers read as
   quieter than the links underneath them and the directory had no structure you
   could scan. A header should be the loudest thing in its column. */
.sf-col h3 {
  margin: 0 0 6px;
  font-family: var(--display, "Space Grotesk", system-ui, sans-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--t1, #f2effa);
}

/* "Cold text links", his words: no underline at rest, no brand colour, no
   button. They warm to the star tint on hover and nothing else moves. */
.sf-col a {
  color: var(--t2, #b9b7c9);
  font-size: 14px;
  line-height: 1.45;
  text-decoration: none;
  border: 0;
  transition: color 0.14s;
}
.sf-col a:hover,
.sf-col a:focus-visible {
  color: var(--star, #A9C0FF);
}

.sf-note {
  color: var(--t3, #807e92);
  font-size: 12.5px;
  line-height: 1.5;
  max-width: 20ch;
}

/* ── The wordmark ──────────────────────────────────────────────────── */
/* OUTLINED, NOT FILLED, AND IT FITS.
   The SVG viewBox scales the whole wordmark to the full-width footer without
   relying on viewport-sized text. `textLength` +
   lengthAdjust="spacing" makes the letters spread to fill exactly, which is
   also where the tracking comes from — no letter-spacing guess to re-tune per
   container. `vector-effect: non-scaling-stroke` keeps the outline a hairline
   at every size instead of thickening with the scale factor.
   Low contrast on purpose: a watermark closing the page, not a second logo
   competing with the one in the nav. */
.sf-mark {
  display: block;
  width: 100%;
  height: auto;
  margin: 58px 0 0;
  overflow: visible;
  user-select: none;
}
.sf-mark text {
  font-family: var(--display, "Space Grotesk", system-ui, sans-serif);
  font-size: 150px;
  font-weight: 700;
  fill: none;
  stroke: rgba(169, 192, 255, 0.3);
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

/* ── The base line ────────────────────────────────────────────────── */
.sf-base {
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px 0 30px;
  display: flex;
  align-items: center;
  /* CENTERED 2026-08-13 (Dylan: "© 2026 Tenora - center it"). It was
     `space-between`, which was correct while two spans lived here and became a
     left-pin the moment the second one was cut on 08-11 — space-between with a
     single child is just flex-start. The copyright is now the only thing on the
     line, and the wordmark above it is centered, so it centers too. */
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--t3, #807e92);
  font-size: 12.5px;
}
/* "Built in New York. Free while in beta." was the second span here. Cut
   2026-08-11 — the beta status is already on the nav badge and the hero, and a
   location nobody asked for is the kind of line a footer accumulates. */

@media (max-width: 620px) {
  .site-footer { margin-top: 60px; padding-top: 40px; }
  .sf-dir { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; }
  .sf-mark { margin-top: 40px; }
  /* Phones kept an explicit flex-start, which would have overridden the centering
     above. Only the padding needs to change down here now. */
  .sf-base { padding-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .sf-col a { transition: none; }
}