/* ─────────────────────────────────────────────────────────────────────────
   Ardent — long-form documents (terms, privacy, 404).

   The old sheet said in a comment that a paragraph someone reads for their
   own rights should be the most legible thing on the domain, and then set no
   font-family on it — so it inherited Marcellus from `body` and every clause
   was served in a display serif. Body copy is the system sans here. Marcellus
   keeps the wordmark and the headings, which is what it is good at.
   ───────────────────────────────────────────────────────────────────────── */

/* The document sits on a translucent panel, the way records do on RCR and
   cards do on Chancery. It is not decoration: over a live starfield, unpanelled
   body copy loses every line that happens to have a bright star behind it. The
   panel composites over the void, so the contrast this palette was checked at
   is the contrast a reader gets. */
.doc {
  /* Width, not max-width: the panel has to keep clear of the fixed frame at
     every size, and `100% - edge*2` is what does that. */
  width: min(76ch, calc(100% - var(--edge) * 2));
  margin: 0 auto clamp(2rem, 6vmin, 4rem);
  padding: clamp(2rem, 5vmin, 3.4rem) clamp(1.3rem, 4vmin, 3rem);
  background: rgba(9, 7, 22, 0.62);
  border: 1px solid var(--tn-line);
  border-radius: var(--tn-radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
}

/* Edge to edge on a phone: a 12px gutter either side of a rounded panel wastes
   the only width there is. */
@media (max-width: 620px) {
  .doc {
    width: 100%;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    margin-bottom: 0;
  }
}

.doc-eyebrow {
  font-family: var(--tn-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--tn-lo);
  margin-bottom: 0.9rem;
}

.doc h1 {
  font-family: var(--tn-font-display);
  font-size: clamp(2rem, 6vw, 2.9rem);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: #f3f1ff;
  margin-bottom: 0.7rem;
}

.doc-lede {
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--tn-mid);
  margin-bottom: 0.7rem;
  text-wrap: pretty;
}

.doc-stamp {
  font-family: var(--tn-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tn-lo);
  padding-bottom: 1.6rem;
  border-bottom: 1px solid var(--tn-line);
}

.doc h2 {
  font-family: var(--tn-font-display);
  font-size: 1.32rem;
  font-weight: 400;
  color: #e9e6ff;
  margin: 2.4rem 0 0.6rem;
  scroll-margin-top: calc(var(--edge) + 4.5rem);
}

.doc p,
.doc li {
  font-size: 0.98rem;
  line-height: 1.72;
  color: rgba(212, 208, 236, 0.92);
  text-wrap: pretty;
}

.doc p {
  margin-bottom: 0.85rem;
}

.doc ul {
  margin: 0 0 0.9rem;
  padding-left: 1.15rem;
}

.doc li {
  margin-bottom: 0.35rem;
}

.doc a {
  color: #ddd9ff;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--tn-accent-edge);
}
.doc a:hover,
.doc a:focus-visible {
  color: #fff;
  text-decoration-color: currentColor;
}

/* A pulled-out statement, for the one or two lines in each document that a
   reader skimming for the answer is actually looking for. */
.doc-note {
  margin: 1.6rem 0;
  padding: 1rem 1.2rem;
  background: var(--tn-panel);
  border: 1px solid var(--tn-line);
  border-left: 2px solid var(--tn-accent-edge);
  border-radius: var(--tn-radius);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.doc-note p:last-child {
  margin-bottom: 0;
}

.doc-foot {
  margin-top: 2.6rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--tn-line);
  font-size: 0.9rem;
  color: var(--tn-lo);
}

/* Sibling-document link pair at the end of each legal page. */
.doc-siblings {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.4rem;
}
.doc-siblings a {
  font-family: var(--tn-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tn-mid);
  padding: 0.55em 1em;
  border: 1px solid var(--tn-line);
  border-radius: 999px;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.doc-siblings a:hover,
.doc-siblings a:focus-visible {
  color: #fff;
  border-color: var(--tn-accent-edge);
  background: var(--tn-accent-wash);
}

/* ── 404 ──────────────────────────────────────────────────────────────── */
.lost {
  min-height: calc(100svh - 12rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--edge);
}
.lost img {
  width: clamp(84px, 16vmin, 132px);
  height: auto;
  filter: drop-shadow(0 0 46px rgba(126, 116, 255, 0.42));
  margin-bottom: 1.4rem;
  animation: breathe 9s ease-in-out infinite;
}
.lost h1 {
  font-family: var(--tn-font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 5vmin, 2.4rem);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: var(--tn-hi);
  margin-bottom: 0.7rem;
}
.lost p {
  max-width: 42ch;
  color: var(--tn-mid);
  line-height: 1.65;
  margin-bottom: 1.8rem;
}