/* ============================================================
   THE HIDEOUT — terms.html skin (v2)
   Legal document styling on the aqua-on-near-black system.
   Loaded after css/styles.css — reuses its tokens + chrome.
   ============================================================ */

/* narrow reading column inside the standard .wrap */
.legal-col { max-width: 800px; margin-inline: auto; }

/* header band, clears the fixed nav */
.legal-hero {
  position: relative;
  z-index: 1;
  padding: calc(var(--nav-h) + 54px) 0 10px;
}
.legal-hero .eyebrow { margin-bottom: 20px; }
.legal-hero h1 {
  font-family: var(--display);
  font-size: clamp(34px, 6vw, 56px);
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.legal-hero .updated {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0;
}

/* body */
.legal {
  position: relative;
  z-index: 1;
  padding-top: 8px;
  padding-bottom: clamp(64px, 10vw, 120px);
}
.legal .intro {
  color: var(--fg-muted);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.75;
  margin-bottom: 10px;
}
.legal h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 2.3vw, 24px);
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 42px 0 14px;
}
.legal p,
.legal li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--fg-muted);
}
.legal p { margin: 0 0 12px; }
.legal ul {
  padding-left: 22px;
  margin: 12px 0 18px;
  display: grid;
  gap: 9px;
}
.legal li { padding-left: 2px; }
.legal li::marker { color: var(--aqua); }
.legal strong { color: var(--fg); font-weight: 600; }
.legal em { color: var(--fg); font-style: italic; }

.legal a {
  color: var(--aqua);
  text-decoration: none;
  border-bottom: 1px solid var(--aqua-line);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.legal a:hover { color: var(--aqua-bright); border-color: var(--aqua); }

/* highlighted callout — glass panel with aqua tint */
.legal .callout {
  border: 1px solid var(--aqua-line);
  background: var(--aqua-ghost);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin: 24px 0;
  color: var(--fg);
  font-size: 15.5px;
  line-height: 1.7;
}
.legal .callout strong { color: var(--fg); }

/* foot line */
.legal-foot {
  margin-top: 54px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
}
.legal-foot a {
  color: var(--fg-muted);
  border-bottom: 1px solid var(--line-strong);
  transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.legal-foot a:hover { color: var(--aqua); border-color: var(--aqua); }

@media (max-width: 640px) {
  .legal-hero { padding-top: calc(var(--nav-h) + 34px); }
}