/* ==========================================================================
   Piren — long-form documents and link indexes.

   PAGE-SCOPED, like forms.css: linked only by the pages that are mostly text
   or mostly links (the two policies, the sitemap). The rest of the site is
   composed of sections and has no use for a numbered-clause document, so
   carrying these rules everywhere would be waste. Add the <link> to any other
   page that becomes an article or an index.

   Everything here leans on the shared tokens and on .rich-text in layout.css
   for the spacing between blocks; what this file adds is the measure, the
   heading rhythm inside a document, and the list shapes.
   ========================================================================== */

.legal-page__inner{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-snug);
}

.legal-page__head{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-hair);
}
.legal-page__heading{
  font-size:var(--type-h1);
  line-height:var(--line-height-tight);
  color:var(--text-heading);
}
.legal-page__standfirst{
  max-inline-size:var(--measure-prose);
  font-size:var(--type-lead);
  line-height:var(--line-height-normal);
  font-weight:var(--font-body-medium);
}
.legal-page__standfirst:empty{display:none}
.legal-page__updated{
  font-size:var(--type-sm);
  color:var(--text-muted);
}

/* Which language governs. Outlined rather than filled: it is a caveat about
   the document, not a part of it. */
.legal-page__notice{
  max-inline-size:var(--measure-prose);
  padding:var(--space-tight);
  border:var(--border-width-main) solid var(--border-color);
  font-size:var(--type-sm);
  line-height:var(--line-height-relaxed);
}

/* THE DOCUMENT ITSELF.

   A clause numbered "2.1" is a sibling of "2.2", not a heading, so the
   numbering stays in the source text and the h2s carry only the section
   names. That keeps the heading outline honest for a screen reader — nine
   sections, not forty-odd. */
.legal-page__body{
  max-inline-size:var(--measure-prose);
  line-height:var(--line-height-relaxed);
}
.legal-page__body h2{
  font-family:var(--font-display);
  font-weight:var(--font-display-bold);
  font-size:var(--type-h3);
  line-height:var(--line-height-tight);
  color:var(--text-heading);
  /* More space above a new section than the .rich-text default, so the
     document reads as parts rather than as one long column. */
  margin-block-start:var(--space-snug);
}
.legal-page__body h2:first-child{margin-block-start:0}
.legal-page__body h3{
  font-weight:var(--font-body-medium);
  font-size:var(--type-md);
  line-height:var(--line-height-normal);
  color:var(--text-heading);
}
.legal-page__body p{max-inline-size:none}

/* The brand's rotated square as the bullet, drawn as a pseudo-element so it
   costs no request and scales with its own text. */
.legal-page__body ul{
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.legal-page__body li{
  position:relative;
  padding-inline-start:1.4ch;
}
.legal-page__body ul li::before{
  content:"";
  position:absolute;
  inset-inline-start:0;
  inset-block-start:.62em;
  inline-size:.3em;
  block-size:.3em;
  background:currentColor;
  transform:rotate(45deg);
}

/* ==========================================================================
   link-index — the sitemap. Groups of links, each group a real <nav> with its
   own label so a screen reader can skip between them.
   ========================================================================== */

.link-index{
  container-type:inline-size;
  container-name:linkindex;
  --index-cols:1fr;
}
@container linkindex (min-width: 34rem){
  .link-index{--index-cols:repeat(auto-fit, minmax(14rem, 1fr))}
}

.link-index__inner{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:var(--space-snug);
}
.link-index__intro{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-hair);
}
.link-index__heading{
  font-size:var(--type-h1);
  line-height:var(--line-height-tight);
  color:var(--text-heading);
}
.link-index__lead{
  max-inline-size:var(--measure-prose);
  font-size:var(--type-lead);
  line-height:var(--line-height-normal);
  font-weight:var(--font-body-medium);
}
.link-index__lead:empty{display:none}

.link-index__groups{
  display:grid;
  grid-template-columns:var(--index-cols);
  gap:var(--space-snug);
  align-items:start;
}
.link-index__group{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-hair);
}
.link-index__group-title{
  font-family:var(--font-display);
  font-weight:var(--font-display-bold);
  font-size:var(--type-h4);
  line-height:var(--line-height-tight);
  color:var(--text-heading);
}
.link-index__list{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.35rem;
}
.link-index__list a{text-decoration:none}
.link-index__list a:hover{text-decoration:underline;text-underline-offset:.18em}