/* Footer (DESIGN 5.9) and the 404 page (.nf). KARKHANA is cropped by the bottom edge and lit by the arch behind it. */
.footer {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  overflow: hidden;
  isolation: isolate;
  background: var(--bg);
}
.footer .arch { z-index: -1; --arch-crown: 12vw; --bloom-w: 100vw; }
.footer__top { padding-top: clamp(96px, 14vh, 160px); row-gap: 40px; align-items: start; }
.footer__cta { grid-column: 1 / span 7; display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.footer__cta h2 { font-size: clamp(2.5rem, 4.4vw, 4.5rem); line-height: 0.95; max-width: 11em; }
.footer__cta p { max-width: 46ch; font-size: var(--step-lead); line-height: 1.45; }
.footer__cta [lang="ur"] { font-family: "Noto Nastaliq Urdu", serif; font-size: 1.15em; line-height: 1; } /* one word, subset font (text= in the head link) */
.footer__links { grid-column: 10 / span 3; display: flex; flex-direction: column; gap: 10px; font-size: 1rem; }
.footer__links a { width: fit-content; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color 240ms ease; }
@media (hover: hover) and (pointer: fine) { .footer__links a:hover { text-decoration-color: var(--accent); } }

.footer__bottom { grid-row: 2; position: relative; align-self: end; margin-top: clamp(140px, 16vw, 240px); }
.footer__credits {
  display: flex;
  justify-content: space-between;
  gap: 8px 32px;
  margin-bottom: 20px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}
.footer__wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 17.3vw;
  line-height: 0.8;
  letter-spacing: -0.05em;
  white-space: nowrap;
  text-align: center;
  color: var(--ink);
  transform: translateY(28%);
  transform-origin: 50% 100%;
}

.footer__links a { overflow-wrap: anywhere; }
@media (min-width: 721px) and (max-width: 1100px) {
  .footer__cta { grid-column: 1 / span 7; }
  .footer__links { grid-column: 9 / -1; }
}

@media (max-width: 720px) {
  .footer .arch { --arch-crown: 18vw; --bloom-w: 160vw; }
  .footer__top { padding-top: 96px; }
  .footer__cta { grid-column: 1 / -1; gap: 28px; }
  .footer__cta h2 { font-size: 10vw; }
  .footer__bottom { margin-top: 120px; }
  .footer__links { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
  .footer__credits { flex-direction: column; }
  .footer__wordmark { font-size: 16.3vw; }
}

/* 404 */
.nf {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  overflow: hidden;
  isolation: isolate;
}
.nf .arch { z-index: -1; --arch-crown: 30vh; }
.nf__inner { padding-block: 96px 160px; }
.nf h1 { font-size: clamp(2.5rem, 1.2rem + 6vw, 6.5rem); line-height: 0.92; max-width: 10em; }
.nf p { margin-top: 24px; max-width: 40ch; font-size: var(--step-lead); line-height: 1.4; }
.nf .btn { margin-top: 36px; }
.nf__credit { position: absolute; left: var(--margin); bottom: 16px; font-size: 0.8125rem; color: var(--muted); }