/* ==========================================================================
   Ogonek — strona 404 i polityka prywatności
   ========================================================================== */

/* ---------- 404 ---------- */
.nf {
  display: grid;
  align-items: center;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + 2rem);
  padding-bottom: 3rem;
  overflow: clip;
}
.nf__grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 960px) {
  .nf__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 4rem;
  }
}
.nf__code {
  margin-bottom: 1.25rem;
  color: var(--pink-ink);
}
.nf h1 {
  max-width: 11ch;
}
.nf .lead {
  margin-top: 1.5rem;
}
.nf__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}
.nf__links {
  margin-top: 2.5rem;
}
.nf__links .label {
  margin-bottom: 0.75rem;
  color: var(--ink-3);
}
.nf__links ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nf__art {
  position: relative;
}
.nf__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.nf__tail {
  transform-box: view-box;
  transform-origin: 184px 214px;
  animation: nf-wag 0.42s ease-in-out infinite alternate;
}
@keyframes nf-wag {
  from {
    transform: rotate(-14deg);
  }
  to {
    transform: rotate(16deg);
  }
}
.nf__head {
  transform-box: view-box;
  transform-origin: 470px 226px;
  animation: nf-chew 1.1s ease-in-out infinite;
}
@keyframes nf-chew {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-3deg) translateY(2px);
  }
  50% {
    transform: rotate(1.5deg);
  }
  75% {
    transform: rotate(-2deg) translateY(1px);
  }
}
.nf__scrap {
  transform-box: fill-box;
  transform-origin: center;
  animation: nf-fall 3.6s ease-in-out infinite;
}
.nf__scrap:nth-child(2) {
  animation-delay: -0.8s;
  animation-duration: 4.2s;
}
.nf__scrap:nth-child(3) {
  animation-delay: -1.7s;
}
.nf__scrap:nth-child(4) {
  animation-delay: -2.4s;
  animation-duration: 3.2s;
}
.nf__scrap:nth-child(5) {
  animation-delay: -3s;
  animation-duration: 4.6s;
}
@keyframes nf-fall {
  0% {
    transform: translateY(-14px) rotate(0deg);
  }
  50% {
    transform: translateY(12px) rotate(160deg);
  }
  100% {
    transform: translateY(-14px) rotate(360deg);
  }
}

/* ---------- Polityka prywatności ---------- */
.legal {
  padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 3vw, 4rem));
  padding-bottom: var(--section-y);
}
.legal__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}
@media (min-width: 1024px) {
  .legal__grid {
    grid-template-columns: 320px minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 6rem);
    align-items: start;
  }
  .legal__aside {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
  }
}
.legal h1 {
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem);
}
.legal__meta {
  margin-top: 1rem;
  color: var(--ink-3);
}
.legal__toc {
  margin-top: 2rem;
}
.legal__toc ol {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}
.legal__toc li {
  counter-increment: toc;
}
.legal__toc a {
  display: flex;
  gap: 0.65rem;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  color: var(--ink-2);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--d-2), color var(--d-2);
}
.legal__toc a::before {
  content: counter(toc);
  min-width: 1.2rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.legal__toc a:hover {
  background: var(--surface);
  color: var(--ink);
}
.legal__body {
  max-width: 72ch;
  overflow-wrap: break-word;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border-radius: var(--r-xl);
  background: var(--surface);
}
.legal__intro {
  padding: 1.1rem 1.25rem;
  border-left: 5px solid var(--pink);
  border-radius: 6px;
  background: var(--bg);
  font-size: 1.08rem;
}
.legal__body h2 {
  margin: 2.25rem 0 0.75rem;
  font-size: 1.55rem;
}
.legal__body p + p {
  margin-top: 0.85rem;
}
.legal__body ul {
  display: grid;
  gap: 0.5rem;
  padding-left: 1.25rem;
}
.legal__body li::marker {
  color: var(--pink-ink);
}
.legal__body a {
  font-weight: 650;
}
.legal__body code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--bg-2);
  font-size: 0.9em;
}
.legal__clear {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-md);
}
.legal__clear p {
  max-width: 40ch;
  font-size: 0.92rem;
  color: var(--ink-2);
}
@media (max-width: 400px) {
  .legal__clear {
    padding: 0.9rem;
  }
  .legal__clear .btn {
    padding-inline: 0.8rem;
  }
}