@font-face {
  font-family: Inter;
  src: url("./fonts/Inter.woff2");
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #0b101b;
  color: #e7ebf4;
  font:
    15px/1.8 Inter,
    system-ui;
}
header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px max(24px, calc((100vw - 960px) / 2));
  border-bottom: 1px solid #30364a;
  font-size: 11px;
}
a {
  color: #c1a8ff;
}
main {
  max-width: 960px;
  margin: auto;
  padding: 55px 24px;
}
h1 {
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.1;
  letter-spacing: -2px;
}
h2 {
  font-size: 28px;
  line-height: 1.3;
}
.eyebrow {
  color: #b49aff;
  letter-spacing: 2px;
  font-size: 10px;
}
.lead {
  max-width: 720px;
  color: #afbdd2;
}
.meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 28px;
  background: #131b2b;
  border: 1px solid #303950;
  border-radius: 14px;
}
dt {
  font-size: 11px;
  color: #b69cff;
  text-transform: uppercase;
}
dd {
  margin: 5px 0 0;
}
section {
  padding: 30px 0;
  border-bottom: 1px solid #30364a;
}
.severity {
  display: inline-block;
  padding: 6px 12px;
  background: #362033;
  color: #f6b8d6;
  border-radius: 7px;
  font-size: 10px;
}
.finding {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 16px;
  margin-top: 24px;
}
.finding dd {
  margin: 0;
}
.note {
  border-left: 2px solid #ac89eb;
  padding: 12px 20px;
  background: #171827;
}
li {
  padding-bottom: 8px;
}
footer {
  padding-top: 32px;
}
footer p {
  font-size: 11px;
  color: #99a7bc;
}
@media (max-width: 600px) {
  header,
  .finding {
    display: block;
  }
  .meta {
    grid-template-columns: 1fr;
  }
  .finding dt {
    margin-top: 20px;
  }
  .finding dd {
    margin-top: 5px;
  }
}
@media print {
  body {
    background: #fff;
    color: #182034;
  }
  header,
  section {
    border-color: #ddd;
  }
  main {
    padding: 20px 0;
  }
  h1 {
    font-size: 38px;
  }
  .meta,
  .note {
    background: #f4f3fb;
    border-color: #ccc;
  }
  a,
  .eyebrow,
  dt {
    color: #64409f;
  }
  .severity {
    background: #f9e9ed;
    color: #67253c;
  }
  section {
    break-inside: avoid;
  }
  footer p,
  .lead {
    color: #465064;
  }
}