:root {
  --doc-gap: clamp(1.25rem, calc(0.67602rem + 2.449vw), 3.125rem);
  --doc-gap-item: clamp(1rem, calc(0.80612rem + 0.8163vw), 1.625rem);
  --doc-pad-block: clamp(3.75rem, calc(2.98469rem + 3.2653vw), 6.25rem);
  --doc-head-pad: clamp(2.5rem, calc(1.92602rem + 2.449vw), 4.375rem);
  --fs-doc-title: clamp(1.25rem, calc(1.11607rem + 0.5714vw), 1.6875rem);
}

.doc__head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--indigo);
  color: var(--text-white);
}
.doc__head-inner {
  position: relative; z-index: 1;
  padding-block: var(--doc-head-pad);
  padding-inline: var(--page-margin);
}

.doc__title {
  grid-column: 2 / span 10;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: var(--fs-doc-title);
  line-height: 1.25;
  letter-spacing: .01em;
  text-align: center;
}

.doc__meta-wrap {
  padding-inline: var(--page-margin);
  margin-top: var(--doc-gap);
  margin-bottom: var(--doc-gap);
}
.doc__meta {
  grid-column: 1 / span 12;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--doc-gap-item) 1.25rem;
}

.doc__meta .stat { flex: 0 0 auto; width: var(--badge-w); }
.doc__meta .stat__value { padding-inline: 1rem; font-size: 1rem; }
.doc__meta .stat--wide { width: auto; }
.doc__meta .stat--wide .stat__value { padding-inline: 1rem; font-size: 1rem; }

.doc__section {
  background: var(--beige-light);
  margin-bottom: var(--doc-gap);
  padding-block: var(--doc-pad-block);
}
.doc__intro { grid-column: 2 / span 4; grid-row: 1; }
.doc__side  { grid-column: 7 / span 5; grid-row: 1; }
.doc__lead  { color: var(--text-violet); margin-bottom: var(--gap-para); }
.doc__side h3 { margin-bottom: var(--gap-para); }

@media (min-width: 1280px) {
  .doc__side > h3:first-child { margin-top: calc((var(--fs-h2) - var(--fs-h3)) * 0.955); }
}

@media (max-width: 1279px) {
  .doc__intro,
  .doc__side { grid-column: 2 / span 10; grid-row: auto; }
  .doc__intro { margin-bottom: var(--gap-para); }
}

.doc-list {
  display: grid;
  gap: var(--doc-gap-item);
  margin-bottom: var(--gap-para);
}
.doc-list:last-child { margin-bottom: 0; }
.doc-item {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .875rem;
}
.doc-item::before {
  content: '';
  grid-column: 1; grid-row: 1;
  width: .625rem; height: .625rem;
  border-radius: 50%;
  background: var(--doc-color, var(--accent-primary-2));
  margin-top: .55em;
}
.doc-item__title { grid-column: 2; margin-bottom: .375rem; }
.doc-item__text  { grid-column: 2; color: var(--text-violet); }
.doc-item--1 { --doc-color: var(--accent-primary-1); }
.doc-item--2 { --doc-color: var(--accent-primary-2); }
.doc-item--3 { --doc-color: var(--accent-secondary); }
.doc-item--4 { --doc-color: var(--lavender); }

.doc-table-wrap { overflow-x: auto; margin-bottom: var(--gap-para); }
.doc-table {
  width: 100%;
  min-width: 22rem;
  border-collapse: collapse;
  text-align: left;
}
.doc-table th,
.doc-table td {
  vertical-align: top;
  padding: .875rem 1rem;
  border-bottom: .0625rem solid var(--rule);
  line-height: 1.5;
}
.doc-table th {
  font-weight: 800;
  font-size: var(--fs-small);
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--indigo);
}
.doc-table td { font-size: var(--fs-body); }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table .risk { font-weight: 700; white-space: nowrap; }
.doc-table .risk--hot  { color: var(--accent-primary-1); }
.doc-table .risk--vote { color: var(--accent-secondary); }
.doc-table .risk--cold { color: var(--accent-live); }

.doc-contact {
  background: var(--beige-light);
  margin-bottom: var(--doc-gap);
  padding-block: var(--doc-pad-block);
}
.doc-contact__body { grid-column: 2 / span 10; text-align: center; }
.doc-contact p { max-width: var(--ftr-text-width); margin-inline: auto; }
.doc-contact a { font-weight: 500; color: var(--accent-primary-2); transition: color var(--t) ease; }
.doc-contact a:hover { color: var(--accent-primary-1); }

.doc__back {
  display: block; text-align: center;
  margin-bottom: var(--doc-gap);
  color: var(--accent-secondary);
  transition: color var(--t) ease;
}
.doc__back:hover { color: var(--accent-primary-1); }

.header { box-shadow: var(--shadow-header); }

@media (max-width: 799px) {
  .doc__meta { grid-column: 1 / span 12; }
  .doc__meta .stat { min-width: 0; max-width: 100%; }
  .doc__intro,
  .doc__side,
  .doc-contact__body { grid-column: 2 / span 10; }

  .doc-table { min-width: 100%; }
}