/* assets/rn/pages/legal.css
   Privacy and Terms (body.studio-legal-page). Linked last on privacy.html and terms.html (before ja.css on /ja/).
   Colours come from tokens.css; the page scope is the body class alone (the body.lux-site chains went in
   4-consolidation: the legacy layer loses to this file at any specificity).
   Source: overhaul/audit-work/legal/legal.css, with one change for the red rule: the eyebrow dot and the
   active index bar are ink, not red, so these pages render no red outside the footer. */
.studio-legal-page {
  --lg-ink: var(--rn-ink);
  --lg-ink-soft: var(--rn-ink-soft);
  --lg-ring: var(--rn-ring);
  --lg-paper: var(--rn-paper);
  --lg-paper-hi: var(--rn-paper-hi);
  --lg-text: var(--rn-legal-text);
  --lg-muted: var(--rn-legal-muted);
  --lg-hair: rgba(9, 11, 13, 0.14);
}

/* 1. Header: assets/rn/chrome.css (2-global-chrome) draws the solid ink header on every page. */

/* 3. Hero: ink title, ink eyebrow dot, a calm static art card. The H1 takes the interior display role
   (base.css 3) at every width, like every other interior page. */
.studio-legal-page .legal-hero-copy h1 span {
  color: inherit;
}

.studio-legal-page .legal-hero-copy .kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.studio-legal-page .legal-hero-copy .kicker::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lg-ink);
  box-shadow: none;
  content: "";
}

/* The lead keeps its style now that "Last updated" follows it (it was p:last-child). */
.studio-legal-page .legal-hero-copy > h1 + p {
  max-width: 560px;
  margin: 0;
  color: var(--lg-muted);
  font-size: 18px;
  line-height: 1.55;
}

.studio-legal-page .legal-hero-copy > p.legal-updated {
  max-width: none;
  margin: 28px 0 0;
  color: var(--lg-muted);
  font: 500 11px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.studio-legal-page .legal-hero-art {
  grid-template-columns: 1fr;
  grid-template-rows: none;
  align-content: center;
  justify-items: start;
  gap: 12px;
  min-height: 0;
  padding: 32px;
  border: 1px solid var(--lg-ring);
  border-radius: 20px;
  background: var(--lg-ink);
  transform: none;
}

.studio-legal-page .legal-hero-art::before {
  background-size: 88px 88px;
  opacity: 0.5;
}

.studio-legal-page .legal-hero-art i,
.studio-legal-page .legal-hero-art b {
  display: none;
}

.studio-legal-page .legal-hero-art span {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--lg-ring);
  border-radius: 999px;
  background: var(--lg-ink-soft);
  color: var(--lg-paper);
  font-size: var(--rn-fs-label);
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* 4. Reading column: every paragraph in the text column, one hairline colour, numbered sections.
   The last article is :last-of-type now that the .legal-contact card follows it. */
.studio-legal-page .legal-layout {
  border-top-color: var(--lg-hair);
}

.studio-legal-page .legal-frame {
  counter-reset: legal;
}

.studio-legal-page .legal-frame article {
  column-gap: 42px;
  row-gap: 16px;
  border-top-color: var(--lg-hair);
  counter-increment: legal;
}

.studio-legal-page .legal-frame article:last-of-type {
  border-bottom: 1px solid var(--lg-hair);
}

.studio-legal-page .legal-frame article > :not(h2) {
  grid-column: 2;
}

.studio-legal-page .legal-frame h2::before {
  display: block;
  margin-bottom: 14px;
  color: rgba(9, 11, 13, 0.55);
  font: 500 11px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.02em;
  content: counter(legal, decimal-leading-zero);
}

.studio-legal-page .legal-frame p {
  max-width: 62ch;
  color: var(--lg-text);
  font-size: 17px;
  line-height: 1.7;
}

.studio-legal-page .legal-frame p a {
  color: var(--lg-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.studio-legal-page .legal-frame p a:hover {
  text-decoration-thickness: 2px;
}

/* 5. Index: a labelled nav, legible labels, an ink bar on the section in view (set by site.js). Each row is a
   44px target (the desktop list was 42px: 13px padding around one 11px line; the phone grid already was 44px). */
.studio-legal-page .legal-index a {
  box-sizing: border-box;
  min-height: 44px;
  border-top-color: var(--lg-hair);
  font-size: var(--rn-fs-label);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.studio-legal-page .legal-index a:hover,
.studio-legal-page .legal-index a:focus-visible {
  color: var(--lg-ink);
}

.studio-legal-page .legal-index a[aria-current="true"] {
  padding-left: 12px;
  color: var(--lg-ink);
  box-shadow: inset 2px 0 0 var(--lg-ink);
}

/* 6. Closing card: questions go somewhere. */
.studio-legal-page .legal-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 56px;
  padding: 28px 32px;
  border: 1px solid var(--lg-hair);
  border-radius: 20px;
  background: var(--lg-paper-hi);
}

.studio-legal-page .legal-contact p {
  margin: 0;
  color: var(--lg-ink);
  font: 700 22px/1.2 "Manrope", Arial, sans-serif;
}

.studio-legal-page .legal-contact a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--lg-ink);
  color: var(--lg-paper);
  font: 700 0.82rem/1 "Manrope", Arial, sans-serif;
  text-decoration: none;
  transition: background-color 180ms ease;
}

.studio-legal-page .legal-contact a:hover,
.studio-legal-page .legal-contact a:focus-visible {
  background: var(--lg-ink-soft);
}

/* 7. Focus: the two-tone ring (an ink outline outside a paper band), visible on paper and on ink. */
.studio-legal-page main :focus-visible {
  outline: 2px solid var(--lg-ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--lg-paper);
}

.studio-legal-page .legal-index a[aria-current="true"]:focus-visible {
  box-shadow: inset 2px 0 0 var(--lg-ink), 0 0 0 2px var(--lg-paper);
}

@media (max-width: 760px) {
  .studio-legal-page .legal-index a[aria-current="true"]:focus-visible {
    box-shadow: 0 0 0 2px var(--lg-paper);
  }
}

/* 8. Footer: assets/rn/chrome.css (2-global-chrome). */

/* Tablet (761-1099px): the index keeps its column and each section stacks its heading over its text, so the text
   takes the whole frame. Side by side, the text column was about 220px at 820 (26 English or 10 Japanese
   characters a line) and the tablet page ran taller than the phone one. */
@media (min-width: 761px) and (max-width: 1099px) {
  .studio-legal-page .legal-frame article {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 14px;
  }

  .studio-legal-page .legal-frame article > :not(h2) {
    grid-column: auto;
  }
}

@media (max-width: 760px) {
  .studio-legal-page .legal-hero {
    padding-top: 112px;
  }

  .studio-legal-page .legal-hero-art {
    display: none;
  }

  .studio-legal-page .legal-frame article > :not(h2) {
    grid-column: auto;
  }

  .studio-legal-page .legal-frame p {
    font-size: var(--rn-fs-body);
  }

  .studio-legal-page .legal-index a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }

  .studio-legal-page .legal-index a[aria-current="true"] {
    padding-left: 0;
    box-shadow: none;
  }

  .studio-legal-page .legal-contact {
    margin-top: 40px;
    padding: 24px 20px;
  }

  .studio-legal-page .legal-contact p {
    font-size: 20px;
  }

  .studio-legal-page {
    padding-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-legal-page .legal-contact a {
    transition: none;
  }
}