/* NIX — the placeholder any unbuilt section renders
   ══════════════════════════════════════════════════════════════════════════
   Five rules, and they were the last inline <style> block on a public page.
   Small is not the same as exempt: a sheet inside a template is invisible to
   every check the others answer to — no breakpoint set, no token rule, no
   theme mechanism — which is exactly how the two-thousand-line one inside
   /products stayed unread for a year.
   ══════════════════════════════════════════════════════════════════════════ */

/* base.css locks the body, so this main has to be the scroller, exactly like
   .page on the story pages: without it the copy is simply unreachable on a
   short screen. min-height:0 (not a vh) is what lets a flex item shrink far
   enough to scroll; flex:1 keeps the copy optically centred. */
.soon {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
  padding: var(--space-8) var(--space-3);
}

.soon__title {
  font-size: clamp(44px, 9vw, 96px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
}

.soon__text {
  color: var(--nix-text-soft);
  font-size: 18px;
}

.soon__back {
  margin-top: 20px;
  color: var(--nix-text);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  font-size: 15px;
}

.soon__back:hover { opacity: 0.65; }

.soon__back:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}