/* ==========================================================================
   404 page (src/app/(frontend)/not-found.tsx)
   One orange band: 4-lemon-4, kicker, "This one's a lemon.", two buttons, a quiet row of links.
   Then the three newest stories on the dark ground.
   ========================================================================== */

.nf{overflow:hidden; text-align:center; --jt-depth:var(--ink)}
.nf__in{display:flex; flex-direction:column; align-items:center}

/* 4 · lemon · 4 */
.nf__code{display:flex; align-items:center; justify-content:center; gap:.02em; margin:0 0 clamp(18px, 2.4vw, 30px);
  font-size:clamp(150px, 24vw, 300px); line-height:1}
.nf__digit{font-size:1em; line-height:.86}
.nf__lemon{position:relative; display:block; width:.66em; height:.66em; margin:0 .04em; flex:none;
  border-radius:50%; box-shadow:0 0 0 .025em var(--ink), .05em .05em 0 .025em var(--ink), .07em .16em .22em rgba(0,0,0,.42)}
.nf__lemon img{display:block; width:100%; height:100%; border-radius:50%; object-fit:cover}

.nf__title{max-width:14ch}
.nf .kicker{margin-bottom:12px}
.nf__lede{margin:18px auto 0; max-width:46ch; font-size:clamp(16px, 1.4vw, 19px); color:var(--on-orange-muted); font-weight:500}

.nf__ctas{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:clamp(24px, 3vw, 34px)}

.nf__links{display:flex; flex-wrap:wrap; justify-content:center; gap:6px 22px; margin-top:clamp(26px, 3.4vw, 40px);
  padding-top:20px; border-top:2px solid rgba(11,11,11,.16)}
.nf__links a{font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); padding:6px 0; border-bottom:2px solid transparent; transition:border-color .18s}
.nf__links a:hover,.nf__links a:focus-visible{border-color:var(--ink)}

/* the slice turns slowly, like it is on a record */
@media (prefers-reduced-motion: no-preference){
  .nf__lemon img{animation:nf-spin 24s linear infinite}
  .nf__lemon{animation:nf-drop .7s var(--ease) both}
}
@keyframes nf-spin{to{transform:rotate(360deg)}}
@keyframes nf-drop{from{transform:translateY(-.35em) rotate(-40deg); opacity:0}}

/* fresh stories: black depth, never deep orange; the lighter ink-2 band lets the black extrusion read */
.nf-fresh{background:var(--ink-2); --jt-depth:#000}

@media (max-width:980px){
  .nf-fresh__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .nf{padding-top:32px}
  .nf__code{font-size:128px; margin-bottom:14px}
  .nf__lede{margin-top:14px}
  .nf__ctas{margin-top:20px}
  .nf__ctas{flex-direction:column; align-self:stretch}
  .nf__ctas .btn{width:100%}
  .nf__links{gap:4px 18px}
}