/* SECTION: footer · four-column composition repainted in
   the brand lime. What was taken is the arrangement and the type rhythm, not
   their assets: giant wordmark first and edge to edge (theirs is 93% of the
   viewport, ratio ~6.5:1), a start-here call sitting to the left of the link
   columns, a plain icon+label social list on the right, and a woven rule closing
   the page. Their scale, measured off the live site: band inset 48px, nav links
   18px/600 uppercase, social rows 24px/400 with a ~32px icon, strip 18px tall.
   Everything is restated in our tokens · lime field, near-black ink, Archivo. */

.sec-footer { margin-top: 48px; padding: 0; }
main + .sec-footer, body > .sec-footer:last-child { margin-bottom: 0; }

.footer-field {
  background: var(--accent);
  overflow: hidden;
  padding: 44px 0 0;
}
/* Makes the column itself the measuring stick for the wordmark above · scoped
   to the footer so no other section's .wrap gains containment. */
.footer-field > .wrap { container-type: inline-size; }

/* Sized relative to the column so it keeps filling it at every width instead of
   stepping at breakpoints: the six glyphs span the full .wrap width, the way
   the reference logo spans its band. The px ceiling on the fallback is not
   decoration · .wrap stops growing at 1440, so without a cap a vw size would
   keep climbing on wide monitors and push the word out of the column. */
.footer-mark {
  font-family: var(--font-display);
  font-weight: 800;
  /* Derived, not tuned by eye: this face renders the six glyphs of "ELISIA"
     (800, -0.045em tracking) at 3.116x its font-size in ink (pixel-measured at
     500px), so 100/3.116 = 32.09% of the column is the size whose ink lands on
     both edges; 32 leaves a hair of safety. The previous 42.19 was derived for
     a four-letter word and pushed the last letter out of the band ("ELISI").
     Measured against the COLUMN via container units, not the viewport ·
     .wrap's padding changes with width. The vw line is the fallback for
     engines without container queries: 32% of (viewport - 2 x 16px padding),
     capped where .wrap stops growing (1440 - 32 = 1408px -> 450px). */
  font-size: clamp(40px, calc(32vw - 10.2px), 450px);
  font-size: 32cqw;
  line-height: 0.78;
  letter-spacing: -0.045em;
  color: #0F1113;
  text-align: left;
  white-space: nowrap;
  user-select: none;
  /* Optical flush-left. A glyph does not start at its box edge · Archivo leaves
     0.076em of side bearing before the E, which reads as the wordmark being
     visibly indented from the call-to-action below it. Pulling the box left by
     exactly that bearing puts the ink on the column edge. The size above is set
     so the ink also ends on the right edge; both were pixel-measured including
     the negative tracking, which shifts the last glyph and cannot be eyeballed. */
  margin-left: -0.076em;
}

.footer-row {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(0, 2.5fr) auto;
  gap: clamp(26px, 4vw, 84px);
  align-items: start;
  padding: 30px 0 40px;
}

/* Their "Start Building" is the one loud link in the band · two lines, display
   face, same ink as the wordmark so the pair reads as one gesture. */
.footer-start {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 2.6vw, 42px);
  line-height: 1;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: #0F1113;
  width: fit-content;
  transition: transform var(--dur-fast) var(--ease-ui), opacity var(--dur-fast) var(--ease-ui);
}
.footer-start:hover { transform: translateX(3px); opacity: 0.72; }

.footer-docs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 16px;
}
.footer-docs-col { display: grid; align-content: start; gap: 9px; }
.footer-docs-h {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(15, 17, 19, 0.5);
  margin-bottom: 2px;
}
/* Uppercase + 600 is the reference's link voice, dialled to our density: they
   carry four links at 18px, we carry fifteen. */
.footer-docs-col a {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: rgba(15, 17, 19, 0.82);
  width: fit-content;
  transition: color var(--dur-fast) var(--ease-ui), transform var(--dur-fast) var(--ease-ui);
}
.footer-docs-col a:hover { color: #0F1113; transform: translateX(2px); }

.footer-socials { display: grid; align-content: start; gap: 13px; }
.footer-soc {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 16px; font-weight: 500;
  color: #0F1113;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease-ui), opacity var(--dur-fast) var(--ease-ui);
}
/* Channels without a URL yet are hidden by js/cms/social-block.js. The author
   display above has equal specificity to [hidden] and would otherwise win —
   the same trap already hit by .ags-how and .article-loading. */
.footer-soc[hidden] { display: none; }
.footer-soc svg { width: 21px; height: 21px; fill: currentColor; flex: none; }
.footer-soc:hover { transform: translateX(3px); opacity: 0.72; }

/* Woven rule · two offset 45° gradients make the checker without an asset. */
.footer-checker {
  height: 18px;
  background-color: var(--accent);
  background-image:
    linear-gradient(45deg, #0F1113 25%, transparent 25%, transparent 75%, #0F1113 75%),
    linear-gradient(45deg, #0F1113 25%, transparent 25%, transparent 75%, #0F1113 75%);
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}

@media (max-width: 1100px) {
  .footer-row { grid-template-columns: 1fr; gap: 30px; padding-top: 26px; }
  .footer-docs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .footer-socials { grid-auto-flow: column; grid-auto-columns: max-content; gap: 20px; flex-wrap: wrap; }
}
/* No font-size override for narrow screens on purpose: the container-relative
   size above already tracks the column down to the smallest widths. */
@media (max-width: 620px) {
  .footer-socials { grid-auto-flow: row; }
}