/*
 * Club IO — legal.css
 * Ultraviolet, reading-mode variant: same tokens as auth.css, no nightlife
 * photo background (long-form text needs a quiet page, not a hero scene).
 */

:root {
  --cio-brand:       #7C5CFF;
  --cio-brand-dark:  #5B3FE0;
  --cio-brand-mid:   #9B84FF;

  --cio-page:        #08080C;
  --cio-surface:     #14141F;
  --cio-surface2:    #1D1D2C;
  --cio-border:      #2C2C40;
  --cio-border-hi:   #3A3A52;

  --cio-text:        #F4F3F8;
  --cio-body:        #D4D2DE;
  --cio-mute:        #9997B0;
  --cio-faint:       #6F6D86;
  --cio-warn:        #FFC24B;

  --f-disp: 'Space Grotesk', 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--cio-page);
  color: var(--cio-body);
  font: 400 16px/1.65 var(--f-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cio-brand-mid); }
:focus-visible { outline: 2px solid var(--cio-brand-mid); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--f-disp); color: var(--cio-text); margin: 0; letter-spacing: -.02em; }

.lg-wrap { max-width: 1180px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); }

/* nav */
.lg-nav { position: sticky; top: 0; z-index: 20; background: rgba(8,8,12,.85); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(44,44,64,.6); }
.lg-nav .lg-wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.lg-nav .lg-logo img { height: 22px; width: auto; }
.lg-nav .lg-crumb { font: 600 12px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--cio-faint); border-left: 1px solid var(--cio-border-hi); padding-left: 14px; }
.lg-nav ul { display: flex; gap: 20px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.lg-nav ul a { color: var(--cio-mute); text-decoration: none; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.lg-nav ul a[aria-current="page"], .lg-nav ul a:hover { color: var(--cio-text); }
@media (max-width: 760px) { .lg-nav ul { display: none; } }

/* hero */
.lg-hero { padding-block: 40px 24px; border-bottom: 1px solid var(--cio-border); background: radial-gradient(ellipse 640px 260px at 16% 0%, rgba(124,92,255,.16), transparent 70%); }
.lg-hero .lg-eyebrow { display: block; font: 600 12px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cio-brand-mid); margin-bottom: 12px; }
.lg-hero h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 700; }
.lg-hero .lg-meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font: 500 13px/1 var(--f-mono); color: var(--cio-faint); }
.lg-hero .lg-meta b { color: var(--cio-mute); font-weight: 600; }

/* doc body */
.lg-body { padding-block: 36px 72px; }
.lg-doc { max-width: 72ch; display: grid; gap: 26px; }
.lg-doc .lg-lead { font-size: 16px; color: var(--cio-body); }
.lg-doc section { display: grid; gap: 8px; }
.lg-doc section h2 { font-size: 18.5px; font-weight: 600; scroll-margin-top: 80px; }
.lg-doc section .lg-num { color: var(--cio-faint); font-family: var(--f-mono); margin-right: 6px; }
.lg-doc p, .lg-doc li { font-size: 15px; color: var(--cio-body); }
.lg-doc ul, .lg-doc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.lg-doc .lg-caps { letter-spacing: .01em; }
.lg-doc hr { border: 0; border-top: 1px solid var(--cio-border); margin: 6px 0; }
.lg-doc .lg-stub {
  border: 1px dashed var(--cio-border-hi); border-radius: 10px; padding: 12px 14px;
  background: var(--cio-surface); color: var(--cio-mute); font-size: 13.5px;
}
.lg-doc .lg-stub b { color: var(--cio-warn); }
.lg-footlinks { margin-top: 10px; font-size: 14px; color: var(--cio-faint); }
.lg-footlinks a { color: var(--cio-brand-mid); }

/* contact cards */
.lg-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lg-contact-card { border: 1px solid var(--cio-border); border-radius: 14px; padding: 18px; background: var(--cio-surface); display: grid; gap: 6px; }
.lg-contact-card h3 { font-size: 15px; font-weight: 600; }
.lg-contact-card a, .lg-contact-card span { font-size: 14.5px; color: var(--cio-mute); text-decoration: none; }
.lg-contact-card a { color: var(--cio-brand-mid); }
@media (max-width: 560px) { .lg-contact-grid { grid-template-columns: minmax(0, 1fr); } }

/* footer */
footer.lg-site { border-top: 1px solid var(--cio-border); padding-block: 40px; font-size: 14px; color: var(--cio-faint); }
footer.lg-site .lg-wrap { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 24px; }
footer.lg-site img { height: 22px; width: auto; margin-bottom: 12px; }
footer.lg-site h4 { font: 600 11.5px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--cio-mute); margin-bottom: 12px; }
footer.lg-site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
footer.lg-site a { color: var(--cio-faint); text-decoration: none; }
footer.lg-site a:hover { color: var(--cio-text); }
footer.lg-site .lg-legal { grid-column: 1 / -1; border-top: 1px solid var(--cio-border); padding-top: 20px; }
@media (max-width: 760px) { footer.lg-site .lg-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } footer.lg-site .lg-wrap > div:first-child { grid-column: 1 / -1; } }

/* print — G5: pages must print cleanly, black on white, no chrome */
@media print {
  .lg-nav, footer.lg-site { display: none !important; }
  body { background: #fff; color: #000; }
  .lg-hero { background: none; border-bottom: 1px solid #000; }
  .lg-hero h1, .lg-doc h2, .lg-doc section h2 { color: #000; }
  .lg-hero .lg-eyebrow, .lg-hero .lg-meta, .lg-hero .lg-meta b { color: #333; }
  .lg-doc p, .lg-doc li { color: #111; }
  .lg-doc .lg-stub { border-color: #999; color: #333; background: #fff; }
  a { color: #000; text-decoration: underline; }
}