/* ═══════════════════════════════════════════════════════════════
   The legal pages.

   They borrow everything from the house — tokens, base, components, and
   the hub's bar — and add nothing but a measure. A legal text is read
   from one end to the other, which no other surface in the suite asks
   for: that is the only reason a stylesheet exists here.
   ═══════════════════════════════════════════════════════════════ */

.legal {
  /* Sixty-eight characters, a book's measure. The paragraphs on these
     pages are long and dense; across the hub's full width the eye loses
     its line on the way back. */
  max-width: 68ch;
  margin: 0 auto;
  /* astralaika.com's own gutter, and the reason these pages read as a
     centred column instead of a block of text pushed against its edges.
     Both sites already centre the same 840px measure — measured at 1400:
     280px of margin either side, exactly. What differed was inside: 63px
     of gutter there against 20px here, so the same box held a text column
     86px wider and the eye read it as off-centre. Same clamp, same air. */
  padding: calc(var(--bar-h, 64px) + var(--space-10)) clamp(20px, 4.5vw, 64px) var(--space-8);
}

/* Full ink, like astralaika.com. Its eyebrow is darker than this one was,
   and preferred — though for an accidental reason worth writing down: the
   markup there says `color: var(--dim)` and `--dim` is defined nowhere on
   that site, so the declaration is invalid and the text simply inherits the
   ink. A broken variable that happened to look better. Here it is chosen. */
/* `.legal p` further down sets --text-secondary on every paragraph, and it
   wins on specificity — one class plus one type beats one class. The eyebrow
   IS a paragraph, so it was being pulled back to the muted ramp however
   plainly this rule asked for ink. Measured in production before it was
   believed: rgb(87,80,63) where rgb(22,19,14) had been written. */
.legal p.legal__eyebrow {
  color: var(--text);
  margin-bottom: var(--space-3);
}

.legal h1 {
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.04;
  margin-bottom: var(--space-4);
}

/* The authoritative language, stated before the text rather than in a
   footnote: somebody reading the suite in Korean has to know from the
   first line that what binds them is written here in English. */
/* Plain text in the label face — no box, no tinted ground, no red bar.
   astralaika.com sets this notice as `.mono` and nothing else, and side by
   side the difference is not subtle: a grey callout with a red rule against
   four lines of tracked capitals. I had measured the two pages selector by
   selector, found the section plates and rules identical, and reported the
   body "coherent" — while missing the largest object on the screen. The
   right observable was the page, not the ruleset. */
.legal__authority {
  margin-bottom: var(--space-6);
  font-family: var(--font-mono, monospace);
  font-size: var(--text-label);
  line-height: 1.6;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.legal__intro { font-size: 1.06rem; margin-bottom: var(--space-6); }

.legal section { margin-bottom: var(--space-10); }

.legal h2 {
  font-size: 1.28rem;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.legal h3 { font-size: 1.02rem; margin: var(--space-5) 0 var(--space-2); }
.legal p { margin-bottom: var(--space-3); }
.legal p:last-child { margin-bottom: 0; }
.legal ul { margin: 0 0 var(--space-3) 1.15em; }
.legal li { margin-bottom: var(--space-2); }

/* The term/value pairs of the legal notice. A grid when wide, a list when
   narrow — a two-word term and an American address do not share a column
   of 320 px. */
.legal__pairs {
  display: grid;
  grid-template-columns: minmax(9rem, auto) 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.legal__pairs dt { color: var(--text-muted); }
.legal__pairs dd { margin: 0; }
@media (max-width: 620px) {
  .legal__pairs { grid-template-columns: 1fr; gap: 0; }
  .legal__pairs dt { margin-top: var(--space-3); }
}

/* The box of verifiable facts. This is the one place on the site where
   "open the network tab" can be said: privacy is not promised there, it
   is observable. */
.legal__proof {
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-inset);
}
.legal__proof code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.legal__updated { color: var(--text-muted); margin-top: var(--space-10); }

.legal__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.legal__nav a { color: var(--text-muted); }
.legal__nav a:hover { color: var(--text); }
.legal__nav a[aria-current="page"] { color: var(--text); text-decoration: none; }

/* ── Numbered sections ────────────────────────────────────────────
   A legal text is referred to by number — "clause 4", "section 02" —
   far more often than by its title, and a reader who has been sent to
   one needs to find it without reading the others. The number is
   therefore part of the heading rather than a decoration beside it,
   and it is set in the label face so it reads as an index and not as
   the first word of the sentence. */
.legal__num {
  display: inline-block;
  min-width: 2.4em;
  color: var(--text-faint);
  font-family: var(--font-mono, monospace);
  font-size: 0.62em;
  letter-spacing: 0.08em;
  vertical-align: 0.28em;
}

/* ── The summary block ────────────────────────────────────────────
   Both LaikaPDF and this suite open the long documents with the answer,
   then spend the rest of the page earning it. Somebody who reads only
   this box should not be misled by having stopped early. */
/* The summary keeps its heading plate and its list, and loses the frame.
   astralaika.com has no boxed callout anywhere on its legal page: sections
   are opened by a rule and titled by an inverted plate, and that is the
   whole vocabulary. A rounded, tinted, red-barred panel was a fifth object
   invented here, and it read as one. */
.legal__summary {
  margin: var(--space-6) 0 var(--space-8);
}
.legal__summary h2 { margin-top: 0; font-size: 1.05rem; }
.legal__summary ul { margin: var(--space-3) 0 0; padding-inline-start: 1.2em; }
.legal__summary li { margin-block: var(--space-2); }

/* ── The language bar ─────────────────────────────────────────────
   These pages translate now, which they did not before. The picker is
   a plain <select>: it is one control, it is reachable by keyboard on
   every platform without any code of ours, and on a phone it opens the
   system's own list rather than a menu we would have to build. */
.legal__lang {
  /* In the bar it is one control at the end of a row, not a labelled field in
     a column: no gap to manage, no bottom margin to leave, and the visible
     "Language" caption is gone — the button already says FR, and what it is
     for goes to the assistive layer through aria-label, exactly as the studio
     does it. */
  margin-inline-start: var(--space-4);
}
/* ══════════════════════════════════════════════════════════════════
   ASTRALAIKA'S LEGAL TYPOGRAPHY

   The suite already borrows the studio's bar, its colophon, its marks
   and its ink; its legal pages were the one surface still speaking a
   different dialect. Two things carry that design and both are here:
   a heading set as an inverted plate rather than as large text, and a
   heavy rule opening each section rather than a margin.

   What is NOT borrowed is the raw hex. astralaika.com's footer never
   inverts, so it can write `var(--ink)` and be done; these pages follow
   the reader's theme, so every value goes through a token that is
   solved on both sheets. Same design, resolved twice.
   ══════════════════════════════════════════════════════════════════ */

/* 840px is astralaika's measure for these pages, and wider than the 68ch
   the suite had been using. The heading plates need the room: at 68ch a
   two-word plate and its rule sat almost on top of each other. */
.legal { max-width: 840px; }

.legal h1 { font-size: clamp(32px, 5.5vw, 58px); }

/* The plate. `display: inline-block` is the whole idea — it makes the
   heading as wide as its words instead of as wide as the column, so the
   page reads as a stack of labels rather than a stack of banners. */
.legal h2 {
  display: inline-block;
  font-size: 18px;
  margin: 44px 0 14px;
  padding: 6px 12px;
  /* astralaika.com's --paper, not the ramp's lightest sand: measured
     rgb(243,237,224) there against rgb(251,247,236) here. Eight points, on
     an ink plate — small, and asked for. */
  color: var(--ls-sand-50, #f3ede0);
  background: var(--ink-solid);
}
/* The number rides inside the plate, so it inverts with it. */
.legal h2 .legal__num { color: var(--text-inverse); opacity: 0.55; }

.legal section {
  border-top: var(--rule-strong, 2px) solid var(--ink-solid);
  margin-top: 32px;
}
/* The exception is gone with the box that caused it. It suppressed the first
   section's rule because the summary used to close with a border of its own,
   and two rules a few pixels apart read as a mistake. The summary has no
   border now, so the rule is simply missing — and astralaika.com opens its
   first section with exactly that rule. */

.legal p, .legal dd, .legal li { color: var(--text-secondary); font-size: 15.5px; }
.legal strong { color: var(--text); }

/* Underlined, and in the company red: on a page this dense a link that
   differs only by colour is missed by anyone reading quickly, and by
   anyone who does not separate these two hues at all. */
.legal a { color: var(--brand-red); border-bottom: 1px solid var(--brand-red); }
.legal a:hover { color: var(--accent-hover, var(--brand-red)); }

.legal__pairs { grid-template-columns: 235px 1fr; gap: 12px 20px; }
.legal__pairs dt {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  padding-top: 3px;
}
@media (max-width: 640px) {
  .legal__pairs { grid-template-columns: 1fr; gap: 3px; }
  .legal__pairs dd { margin-bottom: 14px; }
}