/* Virell — legal documents (Impressum, Privacy Policy).
   Deliberately standalone: these pages load fonts.css + this file and nothing
   else. No canvas, no scroll observers, no script.js. A legal page has to
   render for everyone, including the person who turned JavaScript off.

   Tokens are duplicated from style.css on purpose — the legal pages must not
   depend on the homepage stylesheet. If a brand colour changes there, mirror
   it here; both trace back to Virell/brand/assets/colors/tokens.json. */

:root {
  --ink:            #0B0A14;
  --ink-2:          #14121F;
  --cream:          #F5F1E8;
  --cream-mute:     #A39E92;

  --indigo:         #4F46E5;
  --blue:           #2563EB;
  --lavender:       #C7C2F8;

  --on-cream:       #0B0A14;
  --on-cream-body:  #33302A;
  --on-cream-mute:  #6E6858;
  --on-cream-line:  rgba(11, 10, 20, .12);

  --border:         rgba(245, 241, 232, .08);
  --grad:           linear-gradient(135deg, #C7C2F8 0%, #4F46E5 50%, #2563EB 100%);

  --gutter:         clamp(22px, 5vw, 72px);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--on-cream-body);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--cream);
  padding: 12px 18px; z-index: 100; border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- header -- */

.lgl-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 20px var(--gutter);
  background: var(--ink);
  color: var(--cream);
}

.lgl-nav__brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--cream); text-decoration: none;
  font-family: Fraunces, Georgia, serif;
  font-size: 18px; font-weight: 500; letter-spacing: -.01em;
}

.lgl-nav__mark {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--grad);
  flex: none;
}

.lgl-nav__back {
  color: var(--cream); text-decoration: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  opacity: .72;
  border-bottom: 1px solid rgba(245, 241, 232, .28);
  padding-bottom: 2px;
  transition: opacity .2s;
}
.lgl-nav__back:hover { opacity: 1; }

/* ------------------------------------------------------------- document -- */

.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(56px, 8vw, 104px) var(--gutter) clamp(72px, 9vw, 120px);
}

.doc__kicker {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--indigo);
  margin: 0 0 14px;
}

.doc__title {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(32px, 4.4vw, 60px);
  line-height: 1.04;
  font-weight: 400;
  letter-spacing: -.028em;
  color: var(--on-cream);
  margin: 0 0 10px;
}

.doc__meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--on-cream-mute);
  margin: 0 0 8px;
}

.doc__rule {
  height: 2px; border: 0; margin: 34px 0 6px;
  background: var(--grad);
  opacity: .85;
}

.doc h2 {
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.18;
  font-weight: 400;
  letter-spacing: -.018em;
  color: var(--on-cream);
  margin: 52px 0 14px;
}

.doc h3 {
  font-family: Inter, sans-serif;
  font-size: 16px; font-weight: 600;
  color: var(--on-cream);
  margin: 30px 0 8px;
}

.doc p { margin: 0 0 16px; }

.doc ul { margin: 0 0 18px; padding-left: 20px; }
.doc li { margin: 0 0 9px; }

.doc a { color: var(--indigo); text-decoration: underline; text-underline-offset: 2px; }
.doc a:hover { color: var(--blue); }

.doc strong { color: var(--on-cream); font-weight: 600; }

.doc__lede {
  font-size: 17px;
  line-height: 1.62;
  color: var(--on-cream-mute);
  margin: 0 0 6px;
}

/* The address block — set like something printed, not like a paragraph.
   Deliberately a full hairline rather than a coloured left tab: the tab reads
   as generic dashboard UI, and a legal notice should look like a letterhead. */
.doc__address {
  font-style: normal;
  font-size: 17px;
  line-height: 1.62;
  color: var(--on-cream);
  padding: 22px 26px;
  margin: 0 0 22px;
  background: rgba(11, 10, 20, .03);
  border: 1px solid var(--on-cream-line);
  border-radius: 4px;
}
.doc__address b { font-weight: 600; }

/* a quiet callout for the things worth not missing */
.doc__note {
  padding: 18px 22px;
  margin: 0 0 20px;
  background: rgba(79, 70, 229, .06);
  border: 1px solid rgba(79, 70, 229, .18);
  border-radius: 10px;
  font-size: 16px;
}
.doc__note p:last-child { margin-bottom: 0; }

.doc__defs { margin: 0 0 20px; }
.doc__defs dt {
  font-weight: 600; color: var(--on-cream);
  margin: 18px 0 3px; font-size: 16px;
}
.doc__defs dd { margin: 0; }

/* processor table — scrolls on its own rather than pushing the page wide */
.doc__tablewrap { overflow-x: auto; margin: 0 0 22px; }

.doc table {
  width: 100%; min-width: 480px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.doc th, .doc td {
  text-align: left; vertical-align: top;
  padding: 12px 14px 12px 0;
  border-bottom: 1px solid var(--on-cream-line);
}
.doc th {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--on-cream-mute);
  font-weight: 400;
  border-bottom-color: rgba(11, 10, 20, .22);
}

/* ---------------------------------------------------------------- footer -- */

.lgl-foot {
  background: var(--ink);
  color: var(--cream-mute);
  padding: 40px var(--gutter);
  font-size: 14.5px;
}

.lgl-foot__inner {
  max-width: 760px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  align-items: center; justify-content: space-between;
}

.lgl-foot a {
  color: var(--cream); text-decoration: none;
  border-bottom: 1px solid rgba(245, 241, 232, .22);
  padding-bottom: 1px;
}
.lgl-foot a:hover { border-bottom-color: var(--lavender); }

.lgl-foot__links { display: flex; flex-wrap: wrap; gap: 20px; }

@media print {
  .lgl-nav, .lgl-foot, .skip-link { display: none; }
  body { background: #fff; font-size: 12pt; }
  .doc { max-width: none; padding: 0; }
  .doc a { color: inherit; text-decoration: none; }
}