/* Astral — the supporting documents: /terms, /privacy, 404 and the error page.
   Loaded after shared.css, which owns the palette, the faces and the controls.

   Why this file exists at all. These four pages were the last ones still served
   by static/astral.css, the prototype skeleton — a warm cream field with the
   whole document set in the interface sans. Everything a customer sees before
   and after them had meanwhile moved to the mineral daylight ground and the
   serif. So the two pages a reader opens *when they are deciding whether to
   trust Astral with their birth details and their money* were the two that
   looked least like Astral, and looked most like a template. The foundation
   also names cream-and-parchment styling as a thing to avoid, which the old
   ground was an unintentional example of.

   The brief is narrower than the reading's. §"Visual and interaction direction"
   places these outside the emotional journey: supporting pages, not stages. So
   nothing here performs. The job is legibility, order, and the ordinary signals
   of a real document — a stated measure, numbered sections, a clear hierarchy —
   rather than atmosphere. Credibility is the whole aesthetic. */

/* ── the page ───────────────────────────────────────────────────────────── */

body.page-document {
  background: var(--sky-3);
  color: var(--ink);
}

/* The masthead and footer borrow the landing page's grammar so a reader who
   arrives from the footer link does not feel handed to another site. */
.doc-masthead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.1rem, 3.2vw, 1.6rem) var(--gutter);
}

.doc-shell {
  padding: 0 var(--gutter) clamp(4rem, 12vw, 7.5rem);
}

/* ── the document ───────────────────────────────────────────────────────── */
/* 34em, not the 65-ish characters a Latin measure would take. Mongolian
   Cyrillic sets wider than English at the same point size — more diacritics,
   longer words, fewer ligatures — and these documents are read in Mongolian
   first. Set in em so the measure tracks the type rather than the viewport. */
.document {
  max-width: 34em;
  margin: 0 auto;
  counter-reset: section;
}

/* The title. Deliberately below the reading's folio title: this page is
   supporting material, and a legal document that opens as loudly as the
   product is a document that thinks it is the product. */
.document h1 {
  margin-top: clamp(2.2rem, 6vw, 3.4rem);
  font-family: var(--serif);
  font-size: clamp(1.95rem, 6.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -.021em;
  text-wrap: balance;
}

/* The standfirst — `p.notice`, the paragraph each document opens with that
   says how it is written. It was a rounded, bordered card, which is the
   generic-SaaS form the foundation excludes and which also read as a cookie
   banner. It is now what it actually is: an editorial note, set apart by a
   rule and a slightly larger italic rather than by a box. */
.document .notice {
  margin-top: clamp(1.4rem, 3.6vw, 1.9rem);
  padding-left: clamp(.9rem, 2.6vw, 1.2rem);
  border-left: 2px solid var(--ink);
  font-family: var(--serif);
  font-size: 1.02em;
  line-height: 1.62;
  color: var(--ink-2);
  text-wrap: pretty;
}
.document .notice strong { color: var(--ink); font-weight: 600; }

/* Numbered sections. A real document has them, and they are the cheapest
   legitimacy on the page: they say this was organised rather than typed. The
   number sits above the heading as its own small line so it never has to
   share a baseline with Cyrillic caps, and it is decorative — `aria-hidden`
   is not available on a pseudo-element, but generated content is already
   ignored by the screen readers that matter here, and the headings read
   correctly without it. */
.document h2 {
  margin-top: clamp(2.6rem, 7vw, 3.6rem);
  font-family: var(--serif);
  font-size: clamp(1.24rem, 3.9vw, 1.42rem);
  line-height: 1.28;
  letter-spacing: -.011em;
  color: var(--ink);
  text-wrap: balance;
}
.document h2::before {
  counter-increment: section;
  content: counter(section, decimal-leading-zero);
  display: block;
  margin-bottom: .62em;
  font: var(--label-sm);
  letter-spacing: var(--track);
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
/* The rule belongs to the section that just ended, the same logic the reading
   page uses between movements: a lid on what came before, not a hat on what
   comes next. Nothing above the first one, which has nothing to close. */
.document h2:not(:first-of-type) {
  border-top: 1px solid var(--rule-soft);
  padding-top: clamp(2.4rem, 6.5vw, 3.2rem);
}

.document h3 {
  margin-top: 1.9rem;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
}

/* ── running text ───────────────────────────────────────────────────────── */

.document p {
  margin-top: 1.05em;
  font-family: var(--serif);
  line-height: 1.7;
  color: var(--ink-2);
  text-wrap: pretty;
}
.document h1 + p,
.document h2 + p,
.document h3 + p { margin-top: 1.1em; }

.document strong { color: var(--ink); font-weight: 600; }
.document em { font-style: italic; }

.document ul {
  margin: 1.15em 0 0;
  padding-left: 1.15em;
  list-style: none;
}
.document li {
  position: relative;
  margin-top: .72em;
  font-family: var(--serif);
  line-height: 1.66;
  color: var(--ink-2);
  text-wrap: pretty;
}
/* An en dash rather than a disc. The disc is the browser's mark; this is the
   one the rest of the site's prose uses. */
.document li::before {
  content: "–";
  position: absolute; left: -1.15em;
  color: var(--ink-4);
}

/* Links inside a document are underlined, always. These pages carry the
   support number, the privacy cross-reference and the way home; a link a
   reader has to hover to discover is a link that document has hidden. */
.document a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--ink-4);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: text-decoration-color .18s var(--ease, ease);
}
.document a:hover { text-decoration-color: var(--signal); }

/* The database path in the privacy page, and anything else literal. */
.document .mono {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: .88em;
  color: var(--ink);
  background: rgba(11, 16, 20, .045);
  padding: .12em .38em;
  border-radius: 2px;
  overflow-wrap: anywhere;
}

/* GeoNames attribution, and any other fine print. */
.document .small {
  margin-top: 1.1em;
  font: 400 .84rem/1.6 var(--sans);
  color: var(--ink-3);
}

/* The way out, last line of every document. Given a rule and air so it reads
   as the end of the document rather than one more paragraph. */
.document > p:last-child {
  margin-top: clamp(2.8rem, 7vw, 3.8rem);
  padding-top: clamp(1.4rem, 3.4vw, 1.8rem);
  border-top: 1px solid var(--rule-soft);
  font-family: var(--sans);
  font-size: .93rem;
}

/* ── 404 and the error page ─────────────────────────────────────────────── */
/* Same shell, no numbered sections — they have one heading and no structure to
   number, and `01` over a lone "Not found" is furniture pretending to be an
   index. */
body.page-document .document h2:only-of-type::before { content: none; }
.document h1:last-of-type ~ p:last-child { border-top: 0; }

/* ── footer ─────────────────────────────────────────────────────────────── */

.doc-footer {
  max-width: 34em;
  margin: clamp(4rem, 11vw, 6.5rem) auto 0;
  padding-top: clamp(1.5rem, 4vw, 2rem);
  border-top: 1px solid var(--rule);
}
.doc-footer__note {
  font: 400 .86rem/1.6 var(--sans);
  color: var(--ink-3);
  text-wrap: pretty;
}
.doc-footer__nav {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin-top: 1rem;
}
.doc-footer__nav a {
  font: 500 .86rem/1 var(--sans);
  color: var(--ink-2);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--rule);
  transition: color .18s var(--ease, ease), border-color .18s var(--ease, ease);
}
.doc-footer__nav a:hover { color: var(--ink); border-bottom-color: var(--signal); }

/* ── print ──────────────────────────────────────────────────────────────── */
/* These are the two pages a customer might actually keep a copy of, and the
   terms name a real operator and a real price. Printing them should produce a
   document rather than a screenshot of a website. */
@media print {
  .doc-masthead .lang,
  .astral-mode-banner,
  .skip { display: none; }
  body.page-document { background: #fff; }
  .doc-shell { padding: 0; }
  .document, .doc-footer { max-width: none; }
  .document a { text-decoration-color: #999; }
  .document h2 { break-after: avoid; }
  .document p, .document li { break-inside: avoid; }
}