/* Verus.deals legal pages: one column of text on black, in the site's own faces.
   Type follows the Apple notes: body near zero tracking with generous leading, small caps
   headings with positive tracking, the display title with tight leading and slightly negative
   tracking, everything in rem so the reader's text size scales the layout. */

:root {
  color-scheme: dark;
  --silver: 214 218 228;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

html { background: #000; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background: #000 radial-gradient(120% 80% at 50% 0%, rgb(255 255 255 / 0.035), transparent 60%) no-repeat;
  color: rgb(var(--silver) / 0.82);
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: rgb(var(--silver) / 0.92); text-decoration: underline; text-decoration-color: rgb(var(--silver) / 0.35); text-underline-offset: 0.18em; transition: color 150ms var(--ease-out), text-decoration-color 150ms var(--ease-out); }
a:hover { color: #fff; text-decoration-color: rgb(var(--silver) / 0.8); }
a:active { color: #fff; text-decoration-color: #fff; transition: none; }   /* feedback on the press, instantly */
a:focus-visible { outline: 1px solid rgb(var(--silver) / 0.8); outline-offset: 4px; border-radius: 2px; }

.topbar {
  display: flex;
  justify-content: center;
  padding: 2.4rem 1.5rem 0;
}
.brand {
  font-family: 'Frank Ruhl Libre', Georgia, serif;
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-decoration: none;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #F7F9FB 12%, #C3C8D2 30%, #FFFFFF 45%, #FFFFFF 51%, #DDE1E8 58%, #A3A9B4 74%, #E7E9EE 88%, #FFFFFF 100%);
  background-size: 100% 170%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding: 0.4rem 0.6rem;
}
.brand:focus-visible { outline-offset: 2px; }

.doc {
  max-width: 42rem;                       /* about 66 characters of body text */
  margin: 0 auto;
  padding: 4rem 1.5rem 5rem;
}
.kicker {
  margin: 0 0 1rem;
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-transform: uppercase;
  color: rgb(var(--silver) / 0.55);
}
h1 {
  margin: 0 0 0.8rem;
  font-family: 'Frank Ruhl Libre', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
}
.meta { margin: 0 0 2.5rem; font-size: 0.9rem; color: rgb(var(--silver) / 0.55); }
.lede { font-size: 1.05rem; color: rgb(var(--silver) / 0.9); }

.toc {
  margin: 2.5rem 0 3.5rem;
  padding: 1.4rem 0 1.6rem;
  border-top: 1px solid rgb(var(--silver) / 0.14);
  border-bottom: 1px solid rgb(var(--silver) / 0.14);
}
.toc p { margin: 0 0 0.6rem; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgb(var(--silver) / 0.55); }
.toc ol { margin: 0; padding: 0 0 0 1.4rem; columns: 2; column-gap: 2.5rem; font-size: 0.92rem; line-height: 1.9; }
.toc li { break-inside: avoid; padding-right: 0.5rem; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

section + section { margin-top: 3rem; }
h2 {
  margin: 0 0 1rem;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
}
h2 .n { display: inline-block; min-width: 2.2rem; color: rgb(var(--silver) / 0.5); }
h3 { margin: 1.6rem 0 0.4rem; font-weight: 500; font-size: 1rem; color: #fff; }
p { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding-left: 1.3rem; }
li { margin: 0 0 0.45rem; }
li::marker { color: rgb(var(--silver) / 0.45); }
strong { font-weight: 500; color: #fff; }
address { font-style: normal; }
.contact { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.5rem; margin: 0 0 1rem; }
.contact dt { margin: 0; font-weight: 500; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgb(var(--silver) / 0.55); padding-top: 0.25rem; }
.contact dd { margin: 0; }

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.6rem;
  padding: 0 1.5rem 3rem;
  font-weight: 500;
  font-size: 0.62rem;
  line-height: 1.6;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(var(--silver) / 0.36);
}
.foot a { color: rgb(var(--silver) / 0.55); text-decoration: none; }
.foot a:hover, .foot a:active { color: #fff; }
.foot [aria-current] { color: rgb(var(--silver) / 0.36); }

.skip { position: absolute; left: 1rem; top: -3rem; padding: 0.5rem 0.8rem; background: #000; color: #fff; border: 1px solid rgb(var(--silver) / 0.6); text-decoration: none; }
.skip:focus { top: 1rem; }

@media (max-width: 40rem) {
  .toc ol { columns: 1; }
  .contact { grid-template-columns: 1fr; gap: 0.1rem; }
  .contact dd { margin-bottom: 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a { transition: none; }
}
@media (prefers-contrast: more) {
  body { color: #fff; }
  .kicker, .meta, .toc p, h2 .n, .contact dt, .foot, .foot a { color: rgb(var(--silver) / 0.9); }
}
@media print {
  html, body { background: #fff; color: #000; }
  h1, h2, h3, strong, .lede, .kicker, .meta, .toc p, .contact dt, .foot, .foot a { color: #000; }
  a { color: #000; }
  .brand { -webkit-text-fill-color: #000; color: #000; background: none; }
  .topbar, .foot { padding: 1rem 0; }
  .toc { display: none; }
}
