/* Footer — companion stylesheet for /_shared/footer.js.
 *
 * Most existing pages keep their footer CSS inline (legacy). New / refactored
 * pages that don't carry an inline copy link this stylesheet instead. Either
 * path produces the same visual result because the rules are byte-identical
 * to the inline copies. Single source of truth long-term should consolidate
 * back to here, but that refactor is out of scope for A.5.5.
 */

.ft { padding: 48px 56px 28px; background: var(--bg-sub); }
.ft-inner {
  max-width: 1055px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: max-content max-content max-content max-content max-content;
  justify-content: space-between;
  row-gap: 32px;
}
.ft-brand { display: flex; flex-direction: column; gap: 14px; }
.ft-logo { display: flex; align-items: center; gap: 6px; }
.ft-logo .gem { height: 36px; width: auto; }
.ft-brand .ft-wordmark { height: 28px; width: auto; position: relative; top: 2px; }
.ft-brand p { font-size: 14px; color: var(--ink-2); line-height: 1.5; max-width: 280px; }
.ft-col h6 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
  margin-bottom: 14px;
}
.ft-col a {
  display: block;
  padding: 5px 0;
  font-size: 14px;
  color: #000;
  transition: color 100ms;
}
.ft-col a:hover { color: var(--ink-2); }
.ft-bar { padding: 18px 56px; background: var(--bg-sub); }
.ft-bar-inner {
  max-width: 1055px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}
.ft-bar-inner .sp { flex: 1; }

@media (max-width: 767px) {
  .ft { padding: 32px 20px 20px; }
  .ft-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
  /* Hide decorative brand block on mobile; link columns carry all the
     actual nav so the footer stays compact at 375px. */
  .ft-brand { display: none; }
  .ft-bar { padding: 14px 20px; }
  .ft-bar-inner { flex-wrap: wrap; }
}