/* ==========================================================================
   Classified dossier homepage
   Every rule is scoped to .dx-root, so nothing leaks into the rest of the
   website (header, footer, other pages) and Bootstrap/theme styles are reset
   inside the block.
   ========================================================================== */

.dx-root {
  --dx-night: #111821;
  --dx-night-deep: #0b1016;
  --dx-steel: #8d9aab;
  --dx-line: rgba(141, 154, 171, 0.24);
  --dx-paper: #e9e2cf;
  --dx-paper-text: rgba(233, 226, 207, 0.86);
  --dx-ink: #23211d;
  --dx-ink-soft: #5a554c;
  --dx-ink-blue: #263a66;
  --dx-red: #b3141f;
  --dx-red-hot: #ff5a4f;
  --dx-amber: #f4b400;
  --dx-type: 'Courier Prime', 'Courier New', Courier, monospace;
  --dx-stencil: 'Big Shoulders Stencil', 'Arial Narrow', Impact, sans-serif;
  /* rubber-stamp ink grain (used as a mask) */
  --dx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.4 2.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* paper fibre */
  --dx-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.32 0 0 0 0 0.27 0 0 0 0 0.18 0 0 0 0.26 -0.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");

  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: var(--dx-night);
  color: var(--dx-paper);
  font-family: var(--dx-type);
  font-size: 17px;
  line-height: 1.55;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- reset inside the block ---------- */
.dx-root *,
.dx-root *::before,
.dx-root *::after { box-sizing: border-box; }

.dx-root h1, .dx-root h2, .dx-root h3, .dx-root p, .dx-root ol, .dx-root ul,
.dx-root dl, .dx-root dd, .dx-root figure, .dx-root pre, .dx-root table {
  margin: 0;
  padding: 0;
}
.dx-root ol, .dx-root ul { list-style: none; }
.dx-root dt { font-weight: 400; }
.dx-root a { color: inherit; text-decoration: none; }
.dx-root [hidden] { display: none !important; }
.dx-root ::selection { background: var(--dx-amber); color: var(--dx-night-deep); }
.dx-root :focus-visible { outline: 2px solid var(--dx-amber); outline-offset: 3px; }
.dx-root .dx-paper :focus-visible { outline-color: var(--dx-red); }

/* CRT scanlines over the whole viewer */
.dx-root::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    rgba(255, 255, 255, 0.022) 0, rgba(255, 255, 255, 0.022) 1px,
    transparent 1px, transparent 3px);
}

.dx-root .dx-wrap {
  position: relative;
  width: min(1200px, 100% - 48px);
  margin-inline: auto;
}

/* ---------- viewer bar ---------- */
.dx-root .dx-viewer {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--dx-line);
  background: var(--dx-night-deep);
  color: var(--dx-steel);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dx-root .dx-viewer > span {
  padding: 10px 18px;
  border-left: 1px solid var(--dx-line);
}
.dx-root .dx-viewer > span:first-child { padding-left: 0; border-left: 0; color: var(--dx-paper); }
.dx-root .dx-viewer > .dx-viewer-clock { margin-left: auto; padding-right: 0; color: var(--dx-amber); }
.dx-root .dx-led {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  background: var(--dx-amber);
  vertical-align: 1px;
}

/* ---------- hero ---------- */
.dx-root .dx-hero {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  min-height: min(88vh, 960px);
  padding: clamp(36px, 6vh, 90px) 0 clamp(130px, 16vh, 190px);
  background:
    radial-gradient(110% 80% at 0% 0%, rgba(244, 180, 0, 0.07), transparent 55%),
    var(--dx-night);
}
/* viewer corner marks */
.dx-root .dx-hero::before {
  content: '';
  position: absolute;
  inset: 20px 20px 110px;
  pointer-events: none;
  --c: rgba(244, 180, 0, 0.5);
  background:
    linear-gradient(var(--c), var(--c)) left top / 24px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 1px 24px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 24px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 1px 24px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 24px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 1px 24px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 24px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 1px 24px no-repeat;
}

.dx-root .dx-log {
  max-width: 560px;
  margin-bottom: clamp(22px, 3.6vh, 46px);
  color: var(--dx-steel);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dx-root .dx-log-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 1px 0;
}
.dx-root .dx-log-line::before { content: '>'; color: var(--dx-amber); }
.dx-root .dx-log-fill {
  flex: 1;
  min-width: 24px;
  border-bottom: 1px dotted rgba(141, 154, 171, 0.55);
  transform: translateY(-4px);
}
.dx-root .dx-log-v { color: var(--dx-paper); }
.dx-root .dx-log-v--bad { color: var(--dx-red-hot); }
.dx-root .dx-log-v--ok { color: var(--dx-amber); font-weight: 700; }
.dx-root .dx-log-line--alert {
  margin: 4px 0 4px -10px;
  padding: 3px 10px;
  border-left: 3px solid var(--dx-red-hot);
  background: rgba(255, 90, 79, 0.1);
  color: var(--dx-red-hot);
  font-weight: 700;
}
.dx-root .dx-log-line--alert::before { content: '!'; color: var(--dx-red-hot); }

.dx-root .dx-title-wrap { position: relative; display: inline-block; max-width: 100%; }
.dx-root .dx-title {
  color: var(--dx-paper);
  font-family: var(--dx-stencil);
  font-size: clamp(72px, min(15vw, 21vh), 210px);
  font-weight: 900;
  line-height: 0.87;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.dx-root .dx-title-line { display: block; }

.dx-root p { text-wrap: pretty; }
.dx-root .dx-intro {
  max-width: 64ch;
  margin-top: clamp(20px, 3vh, 38px);
  color: var(--dx-paper-text);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.55;
}
.dx-root .dx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

/* ---------- buttons ---------- */
.dx-root .dx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 12px 24px;
  border: 2px solid var(--dx-amber);
  border-radius: 0;
  background: transparent;
  color: var(--dx-amber);
  font-family: var(--dx-type);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.dx-root .dx-btn--primary { background: var(--dx-amber); color: var(--dx-night-deep); }
.dx-root .dx-btn--primary:hover { background: transparent; color: var(--dx-amber); }
.dx-root .dx-btn--ghost { border-color: rgba(233, 226, 207, 0.45); color: var(--dx-paper); }
.dx-root .dx-btn--ghost:hover { border-color: var(--dx-paper); background: rgba(233, 226, 207, 0.08); color: var(--dx-paper); }
.dx-root .dx-btn--sm { min-height: 42px; padding: 8px 18px; font-size: 15px; }
.dx-root .dx-btn--lg { min-height: 58px; padding: 14px 32px; font-size: 18px; }
.dx-root .dx-btn:disabled { cursor: default; }
.dx-root .dx-btn--primary:disabled,
.dx-root .dx-btn--primary:disabled:hover { background: transparent; color: var(--dx-amber); }

/* ---------- stamps ---------- */
.dx-root .dx-stamp {
  position: absolute;
  display: inline-block;
  padding: 0.1em 0.36em 0.04em;
  border: 0.085em solid currentColor;
  border-radius: 0.06em;
  font-family: var(--dx-stencil);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  -webkit-mask-image: var(--dx-grain);
  mask-image: var(--dx-grain);
  -webkit-mask-size: 220px 220px;
  mask-size: 220px 220px;
}
.dx-root .dx-stamp--hero {
  top: 0.15em;
  right: 0;
  color: var(--dx-red-hot);
  font-size: clamp(24px, 3.7vw, 54px);
  transform: rotate(-9deg);
}

/* ---------- warning tape ---------- */
.dx-root .dx-tapes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0;
  z-index: 5;
  pointer-events: none;
}
.dx-root .dx-tape {
  position: absolute;
  left: -15%;
  width: 130%;
  overflow: hidden;
  padding: 11px 0 10px;
  background: var(--dx-amber);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
  color: #12100c;
  font-family: var(--dx-stencil);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.dx-root .dx-tape::before,
.dx-root .dx-tape::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 5px;
  background: repeating-linear-gradient(-45deg, #12100c 0 8px, transparent 8px 16px);
}
.dx-root .dx-tape::before { top: 0; }
.dx-root .dx-tape::after { bottom: 0; }
.dx-root .dx-tape-sep {
  display: inline-block;
  width: 28px;
  height: 0.78em;
  margin: 0 20px;
  vertical-align: -0.04em;
  background: repeating-linear-gradient(-45deg, #12100c 0 4px, transparent 4px 8px);
}
/* the two strips cross at roughly 70% of the width */
.dx-root .dx-tape { transform: rotate(var(--dx-tilt, 0deg)); }
.dx-root .dx-tape--a { --dx-tilt: -4.2deg; bottom: -22px; }
.dx-root .dx-tape--b { --dx-tilt: 3.2deg; bottom: calc(-22px + 3vw); }

/* ---------- the file (scanned paper) ---------- */
.dx-root .dx-files {
  position: relative;
  z-index: 1;
  padding: clamp(120px, 15vw, 180px) 0 clamp(90px, 11vw, 140px);
  background:
    radial-gradient(60% 40% at 50% 18%, #1d2836, transparent 72%),
    radial-gradient(60% 40% at 50% 70%, #1a2431, transparent 72%),
    var(--dx-night);
  scroll-margin-top: 0;
}
.dx-root .dx-scan {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 28px;
}
.dx-root .dx-scan + .dx-scan { margin-top: clamp(56px, 8vw, 100px); }
.dx-root .dx-scan::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  --c: rgba(244, 180, 0, 0.55);
  background:
    linear-gradient(var(--c), var(--c)) left top / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left top / 1px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 1px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 1px 18px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 18px 1px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 1px 18px no-repeat;
}
.dx-root .dx-scan-page {
  position: absolute;
  top: 4px;
  right: 30px;
  color: var(--dx-amber);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dx-root .dx-paper {
  position: relative;
  padding: clamp(26px, 4.5vw, 56px) clamp(20px, 5.5vw, 68px) clamp(24px, 3.5vw, 40px);
  background-color: var(--dx-paper);
  background-image:
    radial-gradient(130% 100% at 50% 45%, transparent 58%, rgba(110, 90, 50, 0.2) 100%),
    var(--dx-fibre);
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.5),
    0 6px 14px rgba(0, 0, 0, 0.35);
  color: var(--dx-ink);
  font-size: 16.5px;
  line-height: 1.6;
  transform: rotate(-0.45deg);
}
.dx-root .dx-paper--b { transform: rotate(0.4deg); }

.dx-root .dx-class {
  color: var(--dx-red);
  font-family: var(--dx-stencil);
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-align: center;
  text-transform: uppercase;
}
.dx-root .dx-class--bottom { margin-top: 34px; }

.dx-root .dx-letterhead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px 22px;
  margin-top: 26px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--dx-ink);
}
.dx-root .dx-seal { display: block; width: 76px; height: 76px; color: var(--dx-ink); opacity: 0.86; }
.dx-root .dx-seal-text { font-family: var(--dx-type); font-size: 8.4px; font-weight: 700; }
.dx-root .dx-agency { font-size: 17px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.dx-root .dx-form { color: var(--dx-ink-soft); font-size: 14px; }
.dx-root .dx-ref { font-size: 13px; }
.dx-root .dx-ref > div { display: flex; justify-content: flex-end; gap: 10px; }
.dx-root .dx-ref dt { color: var(--dx-ink-soft); letter-spacing: 0.08em; text-transform: uppercase; }
.dx-root .dx-ref dd { font-weight: 700; text-transform: uppercase; }

.dx-root .dx-record {
  display: grid;
  grid-template-columns: minmax(150px, 200px) 1fr;
  gap: clamp(24px, 4vw, 48px);
  margin-top: 32px;
}

/* photo, clipped to the record */
.dx-root .dx-photo {
  position: relative;
  align-self: start;
  margin-top: 10px;
  padding: 9px 9px 0;
  background: #f5f0e2;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28);
  transform: rotate(-2deg);
}
.dx-root .dx-clip {
  position: absolute;
  top: -28px;
  left: 20px;
  z-index: 2;
  width: 18px;
  height: 50px;
  color: #8a939b;
  transform: rotate(-5deg);
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.25));
}
.dx-root .dx-photo-img { position: relative; }
.dx-root .dx-mug,
.dx-root .dx-photo-img img { display: block; width: 100%; height: auto; }
.dx-root .dx-photo-img img { aspect-ratio: 4 / 5; object-fit: cover; filter: grayscale(1) contrast(1.1); }
.dx-root .dx-photo figcaption {
  padding: 7px 0 9px;
  color: var(--dx-ink-soft);
  font-size: 12px;
  text-align: center;
}
.dx-root .dx-match { position: absolute; left: 27%; top: 19%; width: 46%; height: 42%; }
.dx-root .dx-match > i {
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--dx-amber);
}
.dx-root .dx-match > i:nth-child(1) { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; }
.dx-root .dx-match > i:nth-child(2) { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; }
.dx-root .dx-match > i:nth-child(3) { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; }
.dx-root .dx-match > i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; }
.dx-root .dx-match-label {
  position: absolute;
  left: 27%;
  top: calc(61% + 6px);
  padding: 2px 5px 1px;
  background: var(--dx-amber);
  color: #12100c;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
}

.dx-root .dx-fields { align-self: start; }
.dx-root .dx-field {
  display: grid;
  grid-template-columns: 11.5em 1fr;
  gap: 2px 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(35, 33, 29, 0.24);
}
.dx-root .dx-field:first-child { padding-top: 0; }
.dx-root .dx-field dt {
  padding-top: 3px;
  color: var(--dx-ink-soft);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dx-root .dx-field dd { font-size: 17px; }

/* redactions: black marker; hover peeks, click/Enter keeps it open */
.dx-root .dx-redact {
  padding: 0 0.15em;
  border-radius: 1px;
  background-color: #000;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  cursor: pointer;
  transition: background-color 0.24s steps(3), color 0.24s steps(3);
}
.dx-root .dx-redact:hover,
.dx-root .dx-redact:focus-visible,
.dx-root .dx-redact.is-open {
  background-color: rgba(179, 20, 31, 0.12);
  color: inherit;
}
.dx-root .dx-redact--deny:hover,
.dx-root .dx-redact--deny:focus-visible,
.dx-root .dx-redact--deny.is-open { color: var(--dx-red); text-transform: uppercase; }
.dx-root .dx-redact--dark { background-color: var(--dx-steel); cursor: default; }

/* the analyst's red pen */
.dx-root .dx-circled { position: relative; display: inline-block; }
.dx-root .dx-pen {
  position: absolute;
  left: -16px;
  top: -10px;
  width: calc(100% + 32px);
  height: calc(100% + 20px);
  overflow: visible;
  color: var(--dx-red);
  pointer-events: none;
}

.dx-root .dx-summary { max-width: 66ch; margin-top: 34px; }
.dx-root .dx-paper-h {
  margin-bottom: 12px;
  color: var(--dx-ink);
  font-family: var(--dx-type);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-transform: uppercase;
}
.dx-root .dx-summary p + p { margin-top: 12px; }

.dx-root .dx-paper-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px dashed rgba(35, 33, 29, 0.45);
}
.dx-root .dx-signature { display: block; width: 150px; height: 50px; color: var(--dx-ink-blue); }
.dx-root .dx-sign p { color: var(--dx-ink-soft); font-size: 13px; }
.dx-root .dx-barcode-wrap {
  display: grid;
  justify-items: end;
  gap: 5px;
  color: var(--dx-ink-soft);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dx-root .dx-barcode {
  display: block;
  width: 170px;
  height: 34px;
  background:
    repeating-linear-gradient(90deg, var(--dx-ink) 0 2px, transparent 2px 5px, var(--dx-ink) 5px 6px, transparent 6px 9px),
    repeating-linear-gradient(90deg, transparent 0 11px, var(--dx-ink) 11px 14px, transparent 14px 23px);
}

.dx-root .dx-stamp--paper {
  right: 9%;
  bottom: 21%;
  color: var(--dx-red);
  font-size: clamp(30px, 4.4vw, 52px);
  opacity: 0.88;
  transform: rotate(-11deg);
  mix-blend-mode: multiply;
}

/* page 2: assessment table */
.dx-root .dx-paper-title {
  margin-top: 28px;
  color: var(--dx-ink);
  font-family: var(--dx-type);
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.25;
  text-transform: uppercase;
}
.dx-root .dx-table { width: 100%; margin-top: 22px; border-collapse: collapse; font-size: 16px; }
.dx-root .dx-table th,
.dx-root .dx-table td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid rgba(35, 33, 29, 0.26);
  text-align: left;
  vertical-align: top;
}
.dx-root .dx-table thead th {
  padding-top: 0;
  border-bottom: 2px solid var(--dx-ink);
  color: var(--dx-ink-soft);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dx-root .dx-table tbody th { width: 52%; font-weight: 700; }
.dx-root .dx-table tbody th > span {
  display: block;
  margin-top: 3px;
  color: var(--dx-ink-soft);
  font-size: 14.5px;
  font-weight: 400;
}
.dx-root .dx-weakness { margin-top: 22px; font-size: 15px; }
.dx-root .dx-stamp--verified {
  top: 8%;
  right: 7%;
  color: var(--dx-red);
  font-size: clamp(26px, 3.6vw, 44px);
  opacity: 0.86;
  transform: rotate(7deg);
  mix-blend-mode: multiply;
}

/* ---------- intercepted transmission ---------- */
.dx-root .dx-intercept {
  position: relative;
  padding: clamp(84px, 10vw, 136px) 0;
  border-top: 1px solid var(--dx-line);
  background: var(--dx-night-deep);
}
.dx-root .dx-intercept-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.45fr);
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
}
.dx-root .dx-h2 {
  color: var(--dx-paper);
  font-family: var(--dx-stencil);
  font-size: clamp(46px, 6vw, 82px);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.dx-root .dx-intercept-copy p { max-width: 34ch; margin-top: 20px; color: var(--dx-paper-text); }

.dx-root .dx-term {
  min-width: 0;
  border: 1px solid var(--dx-line);
  background: #0e141b;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
.dx-root .dx-term-bar {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--dx-line);
  color: var(--dx-steel);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dx-root .dx-term-bar > span { padding: 10px 16px; border-right: 1px solid var(--dx-line); }
.dx-root .dx-term-bar > span:first-child { color: var(--dx-amber); text-transform: none; letter-spacing: 0.04em; }
.dx-root .dx-code {
  overflow-x: auto;
  padding: 22px 22px 24px;
  border: 0;
  background: transparent;
  color: var(--dx-paper);
  font-family: var(--dx-type);
  font-size: 14.5px;
  line-height: 1.65;
  white-space: pre;
  tab-size: 4;
}
.dx-root .dx-code code {
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  white-space: inherit;
  word-break: normal;
}
.dx-root .dx-code .dx-k { color: var(--dx-amber); }
.dx-root .dx-code .dx-f { color: #ffd36b; }
.dx-root .dx-code .dx-s { color: #b9c6d6; }
.dx-root .dx-code .dx-d { color: var(--dx-red-hot); }
.dx-root .dx-code .dx-c { color: var(--dx-steel); font-style: italic; }
.dx-root .dx-code.is-encrypted { color: rgba(233, 226, 207, 0.5); }
.dx-root .dx-code.is-encrypted span { color: inherit; font-style: normal; }
.dx-root .dx-term-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 14px 16px;
  border-top: 1px solid var(--dx-line);
}
.dx-root .dx-term-status { color: var(--dx-steel); font-size: 13px; letter-spacing: 0.04em; }

/* ---------- make contact ---------- */
.dx-root .dx-contact {
  padding: clamp(96px, 12vw, 160px) 0 clamp(104px, 13vw, 170px);
  background:
    radial-gradient(55% 75% at 12% 100%, rgba(244, 180, 0, 0.08), transparent 62%),
    var(--dx-night);
}
.dx-root .dx-contact-h { max-width: 11ch; font-size: clamp(54px, 8.5vw, 124px); }
.dx-root .dx-contact-text { max-width: 46ch; margin-top: 24px; color: var(--dx-paper-text); font-size: clamp(17px, 1.45vw, 19px); }
.dx-root .dx-contact .dx-btn { margin-top: 34px; }
.dx-root .dx-fine { margin-top: 16px; color: var(--dx-steel); font-size: 13px; }

/* ---------- end of file ---------- */
.dx-root .dx-eof { position: relative; padding-top: 52px; background: var(--dx-night-deep); }
.dx-root .dx-tape--eof { --dx-tilt: -1.2deg; position: relative; left: -5%; width: 110%; }
.dx-root .dx-eof-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 34px 0 36px;
  color: var(--dx-steel);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.dx-root .dx-eof-link {
  color: var(--dx-amber);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.dx-root .dx-eof-link:hover { color: var(--dx-paper); }

/* ==========================================================================
   Opening sequence (runs once per visit; added by dossier.js)
   ========================================================================== */
/* Set by the inline script before first paint so the hero doesn't flash
   before the sequence starts. Failsafe: shows everything after 3s anyway. */
.dx-root.dx-pre-boot .dx-hero .dx-log,
.dx-root.dx-pre-boot .dx-hero .dx-title-wrap,
.dx-root.dx-pre-boot .dx-hero .dx-intro,
.dx-root.dx-pre-boot .dx-hero .dx-actions,
.dx-root.dx-pre-boot .dx-hero .dx-tape {
  visibility: hidden;
  animation: dx-failsafe 0s linear 3s forwards;
}
@keyframes dx-failsafe { to { visibility: visible; } }

.dx-root .dx-hero.is-booting .dx-log-line { visibility: hidden; }
.dx-root .dx-hero.is-booting .dx-log-line.is-on { visibility: visible; }
.dx-root .dx-hero.is-booting .dx-log-line:not(.is-done) .dx-log-fill,
.dx-root .dx-hero.is-booting .dx-log-line:not(.is-done) .dx-log-v { visibility: hidden; }
.dx-root .dx-hero.is-booting .dx-log-line.is-typing .dx-log-k::after {
  content: '';
  display: inline-block;
  width: 0.6em;
  height: 1em;
  margin-left: 2px;
  background: currentColor;
  vertical-align: -2px;
}
.dx-root .dx-hero.is-booting .dx-log-line--alert.is-done { animation: dx-alert 0.16s steps(1) 4; }

.dx-root .dx-hero.is-booting:not(.is-revealed) .dx-title-wrap,
.dx-root .dx-hero.is-booting:not(.is-revealed) .dx-intro,
.dx-root .dx-hero.is-booting:not(.is-revealed) .dx-actions,
.dx-root .dx-hero.is-booting:not(.is-revealed) .dx-tape { visibility: hidden; }

.dx-root .dx-hero.is-booting.is-revealed .dx-title { animation: dx-wipe 0.5s steps(10) both; }
.dx-root .dx-hero.is-booting.is-revealed .dx-stamp--hero { animation: dx-slam 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.25) 0.55s both; }
.dx-root .dx-hero.is-booting.is-revealed .dx-intro,
.dx-root .dx-hero.is-booting.is-revealed .dx-actions { animation: dx-rise 0.45s ease-out 0.75s both; }
.dx-root .dx-hero.is-booting.is-revealed .dx-tape--a { animation: dx-tape-a 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.95s both; }
.dx-root .dx-hero.is-booting.is-revealed .dx-tape--b { animation: dx-tape-b 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.1s both; }

@keyframes dx-alert { 50% { background: var(--dx-red-hot); color: var(--dx-night-deep); } }
@keyframes dx-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dx-slam {
  from { opacity: 0; transform: rotate(-9deg) scale(2.6); }
  to { opacity: 1; transform: rotate(-9deg) scale(1); }
}
@keyframes dx-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes dx-tape-a { from { transform: translateX(-100%) rotate(var(--dx-tilt)); } to { transform: rotate(var(--dx-tilt)); } }
@keyframes dx-tape-b { from { transform: translateX(100%) rotate(var(--dx-tilt)); } to { transform: rotate(var(--dx-tilt)); } }

/* ==========================================================================
   Smaller screens
   ========================================================================== */
@media (max-width: 900px) {
  .dx-root .dx-intercept-inner { grid-template-columns: 1fr; }
  .dx-root .dx-intercept-copy p { max-width: 46ch; }
}

@media (max-width: 680px) {
  .dx-root { font-size: 16px; }
  .dx-root .dx-wrap { width: calc(100% - 32px); }
  .dx-root .dx-viewer { padding: 0 16px; font-size: 11px; letter-spacing: 0.1em; }
  .dx-root .dx-viewer > span { padding: 9px 12px; }
  .dx-root .dx-hide-sm { display: none; }
  .dx-root .dx-hero { min-height: 0; padding-top: 44px; }
  .dx-root .dx-hero::before { inset: 10px 10px 110px; }
  .dx-root .dx-log { font-size: 12px; letter-spacing: 0.03em; }
  .dx-root .dx-stamp--hero { top: 0.05em; font-size: 21px; }
  .dx-root .dx-actions .dx-btn { flex: 1 1 auto; }
  .dx-root .dx-tape { font-size: 17px; padding: 10px 0 9px; }
  .dx-root .dx-tape-sep { margin: 0 14px; }
  /* too narrow to cross cleanly: two separate strips instead */
  .dx-root .dx-tape--a { --dx-tilt: -4deg; }
  .dx-root .dx-tape--b { --dx-tilt: 2deg; bottom: 44px; }
  .dx-root .dx-scan { padding: 22px 10px; }
  .dx-root .dx-scan-page { right: 12px; top: 2px; }
  .dx-root .dx-paper { font-size: 15.5px; }
  .dx-root .dx-class { font-size: 15px; letter-spacing: 0.16em; }
  .dx-root .dx-letterhead { grid-template-columns: auto 1fr; }
  .dx-root .dx-seal { width: 58px; height: 58px; }
  .dx-root .dx-agency { font-size: 15px; }
  .dx-root .dx-ref { grid-column: 1 / -1; }
  .dx-root .dx-ref > div { justify-content: flex-start; }
  .dx-root .dx-record { grid-template-columns: 1fr; }
  .dx-root .dx-photo { width: 190px; margin-left: 6px; }
  .dx-root .dx-field { grid-template-columns: 1fr; padding: 10px 0; }
  .dx-root .dx-field dd { font-size: 16px; }
  .dx-root .dx-stamp--paper { right: 5%; bottom: 4.5%; font-size: 26px; }
  .dx-root .dx-stamp--verified { top: 5%; right: 4%; font-size: 24px; }
  .dx-root .dx-table thead { display: none; }
  .dx-root .dx-table tr { display: block; padding: 14px 0; border-bottom: 1px solid rgba(35, 33, 29, 0.26); }
  .dx-root .dx-table th,
  .dx-root .dx-table td { display: block; width: auto; padding: 0; border: 0; }
  .dx-root .dx-table tbody th { width: auto; }
  .dx-root .dx-table td { margin-top: 6px; font-size: 14.5px; }
  .dx-root .dx-table td::before { content: 'Tools: '; color: var(--dx-ink-soft); }
  .dx-root .dx-code { padding: 18px 16px 20px; font-size: 13px; }
  .dx-root .dx-eof-inner { font-size: 12px; }
}

/* ==========================================================================
   Reduced motion: no opening sequence, no transitions
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .dx-root *,
  .dx-root *::before,
  .dx-root *::after {
    animation: none !important;
    transition: none !important;
  }
}