/**
 * Verso legal — one screen for Terms and Privacy
 * The studio tokens, fonts and chrome (hero-studio.css + hero-verso.css), laid
 * out as a single centred column that does not scroll — the way the project page
 * does not. The nav and the closing line are the project page's own.
 * Author: Trippixn · trippixn.com · discord.gg/syria
 */

.lg {
  /* border-box so the top/bottom padding sits inside 100svh — content-box would
     add it and push the page past one screen. */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: 13vh 6vw;
}
.lg-body {
  width: 100%;
  max-width: 44rem;
  margin: 0 auto;
}

.lg-mast {
  margin: 0;
  font-family: 'Judas Caps', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(3rem, 13vw, 6rem);
  line-height: .9;
  letter-spacing: .02em;
  color: var(--paper);
}
.lg-role {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 1.1rem 0 0;
  font-stretch: 118%;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper-dim);
}
.lg-role::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }

.lg-summary {
  margin: 1.5rem 0 0;
  max-width: 40ch;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.5;
  color: var(--paper);
  text-wrap: pretty;
}

.lg-points {
  margin: 1.9rem 0 0;
  padding: 0;
  list-style: none;
}
.lg-points li {
  padding: .8rem 0;
  border-top: 1px solid var(--hairline);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--paper-dim);
  text-wrap: pretty;
}
.lg-points b { color: var(--paper); font-weight: 600; }

.lg-contact {
  margin: 1.7rem 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--paper-dim);
}
.lg .lg-contact a { color: var(--paper); border-bottom: 1px solid var(--accent); padding-bottom: 1px; transition: color 150ms ease; }
.lg .lg-contact a:hover { color: #fff; }

/* The closing line's cross-link to the sibling policy. */
.lg .pj-end-credit a { color: var(--paper); transition: color 150ms ease; }
.lg .pj-end-credit a:hover { color: var(--paper-dim); }

@media (max-width: 960px) {
  /* Tighter so the whole policy still lands on one screen on a phone. */
  .lg { padding: max(7vh, calc(env(safe-area-inset-top) + 4vh)) 7vw calc(env(safe-area-inset-bottom) + 5vh); }
  .lg-mast { font-size: clamp(2.4rem, 13vw, 3.4rem); }
  .lg-summary { margin-top: 1.1rem; font-size: 15px; line-height: 1.45; }
  .lg-points { margin-top: 1.2rem; }
  .lg-points li { padding: .6rem 0; font-size: 12.5px; line-height: 1.5; }
  .lg-contact { margin-top: 1.1rem; }
}