/* ============================================================
   footer.css
   Site footer — same on every page.
   Mounted by /js/nav.js into <footer data-footer>.
   ============================================================ */

.foot {
  background: var(--c-ink);
  color: var(--c-paper);
  padding: var(--space-3xl) var(--pad) var(--space-xl);
}

.foot__big {
  padding: var(--space-2xl) 0 var(--space-xl);
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(56px, 10vw, 180px);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--c-paper);
}
.foot__big .block { font-style: normal; }
.foot__big a {
  color: var(--c-accent);
  border-bottom: 4px solid var(--c-accent);
  padding-bottom: 8px;
  transition: padding-left var(--t-base) var(--ease);
  display: inline-block;
}
.foot__big a:hover { padding-left: var(--space-md); }

.foot__grid {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: var(--bw) solid color-mix(in srgb, var(--c-paper) 40%, transparent);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-gutter);
}
.foot__col {
  grid-column: span 3;
  display: flex; flex-direction: column; gap: var(--space-sm);
}
.foot__col .k {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-paper) 60%, transparent);
}
.foot__col a, .foot__col .v {
  font-family: var(--f-serif);
  font-style: italic;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.15;
  color: var(--c-paper);
  width: fit-content;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.foot__col a:hover {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

.foot__bottom {
  margin-top: var(--space-2xl);
}

@media (max-width: 960px) {
  .foot { padding: var(--space-2xl) var(--pad) var(--space-lg); }
  .foot__col { grid-column: span 6; }
}

@media (max-width: 640px) {
  .foot__col { grid-column: span 12; }
}
