/* ChimangoScan project page
   Ground: cool "manifest viewer" grey. Accent system: the paper's own six-level
   severity ramp, used only where severity is what is being shown.
   Type: monospaced display (the vernacular of digests, tags and CLI output),
   system sans for reading. No web fonts, no external requests. */

:root {
  --stratum:   #e8ecf1;
  --stratum-2: #dee4ec;
  --slab:      #ffffff;
  --ink:       #0e1319;
  --ink-2:     #4f5b69;
  --seam:      #c9d2dc;
  --anchor:    #0c4a5a;
  --anchor-2:  #2e6c7e;
  --anchor-3:  #7fa3ad;

  --sev-crit: #5e0b2b;
  --sev-high: #9e1b32;
  --sev-med:  #b9741e;
  --sev-low:  #3f7a7b;
  --sev-info: #6e7f91;
  --sev-unk:  #aebac6;

  --mono: ui-monospace, "SFMono-Regular", "SF Mono", "Cascadia Mono",
          "Segoe UI Mono", "Roboto Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--stratum);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

code {
  font-family: var(--mono);
  font-size: 0.9em;
  background: rgba(12, 74, 90, 0.09);
  padding: 0.08em 0.34em;
  border-radius: 3px;
  overflow-wrap: anywhere;
}

a { color: var(--anchor); }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  z-index: 20;
}
.skip:focus { left: 8px; top: 8px; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 44px);
  padding-right: clamp(20px, 5vw, 44px);
}
.wrap.narrow { max-width: 780px; }

/* ---------- hero ---------- */

.hero {
  background: linear-gradient(180deg, #f2f5f8 0%, var(--stratum) 100%);
  border-bottom: 1px solid var(--seam);
  padding: clamp(38px, 6vw, 76px) 0 clamp(38px, 6vw, 70px);
}

.hero-grid {
  display: grid;
  gap: clamp(34px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr); }
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--anchor);
  margin: 0 0 18px;
}

.hero h1 {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.5vw, 2.75rem);
  line-height: 1.14;
  letter-spacing: -0.028em;
  margin: 0 0 22px;
  overflow-wrap: break-word;
}

.authors {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px;
  overflow-wrap: break-word;
}

.affil {
  color: var(--ink-2);
  font-size: 14.5px;
  margin: 0 0 26px;
}

.thesis {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  line-height: 1.55;
  margin: 0 0 28px;
  padding-left: 18px;
  border-left: 3px solid var(--anchor);
}
.thesis strong {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: var(--ink);
  background: var(--slab);
  border: 1px solid var(--seam);
  border-radius: 2px;
  padding: 10px 13px;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.btn:hover { border-color: var(--anchor); background: #f7fafc; }

.btn-primary {
  background: var(--anchor);
  border-color: var(--anchor);
  color: #fff;
}
.btn-primary:hover { background: #0a3d4a; border-color: #0a3d4a; color: #fff; }

.meta-line {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  margin: 0;
  letter-spacing: 0.02em;
}

/* ---------- signature: the layer stack ---------- */

.stack {
  margin: 0;
  background: var(--slab);
  border: 1px solid var(--seam);
  border-radius: 3px;
  padding: clamp(20px, 2.6vw, 28px);
}

.stack-head {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 20px;
  color: var(--ink);
}

.tag {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--anchor-2);
  font-weight: 600;
  margin-bottom: 6px;
}

.slabs {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border-left: 1px dashed var(--seam);
  padding-left: 12px;
}

.slab {
  border: 1px solid var(--seam);
  border-left-width: 5px;
  background: #fbfcfd;
  padding: 11px 14px;
  border-radius: 2px;
}

.slab-n {
  display: block;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.slab-l {
  display: block;
  font-size: 13px;
  line-height: 1.42;
  color: var(--ink-2);
  margin-top: 3px;
}

.slab-4 { width: 100%;  border-left-color: var(--anchor-3); }
.slab-3 { width: 92%;   border-left-color: var(--anchor-2); }
.slab-2 { width: 78%;   border-left-color: var(--anchor); }

.slab-base {
  width: 64%;
  min-width: 260px;
  background: var(--sev-high);
  border-color: var(--sev-high);
  border-left-color: var(--sev-crit);
  color: #fff;
}
.slab-base .slab-l { color: rgba(255, 255, 255, 0.9); }
.slab-base code {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

@media (max-width: 620px) {
  .slab-3 { width: 95%; }
  .slab-2 { width: 88%; }
  .slab-base { width: 80%; min-width: 0; }
}

.stack-note {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--seam);
}
.stack-note strong { font-family: var(--mono); color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .slab {
    animation: rise 520ms cubic-bezier(0.22, 0.7, 0.3, 1) backwards;
  }
  .slab-base { animation-delay: 60ms; }
  .slab-2 { animation-delay: 190ms; }
  .slab-3 { animation-delay: 320ms; }
  .slab-4 { animation-delay: 450ms; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- bands and seams ---------- */

.band { padding: clamp(46px, 6vw, 78px) 0; }
.band-alt { background: var(--stratum-2); border-block: 1px solid var(--seam); }

h2.seam {
  font-family: var(--mono);
  font-size: clamp(1.14rem, 2.1vw, 1.42rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: 0 0 14px;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
  position: relative;
}
h2.seam .mark {
  position: absolute;
  top: -2px;
  left: 0;
  width: 34px;
  height: 6px;
  background: var(--sev-high);
}

.lede {
  font-size: 1.04rem;
  color: var(--ink-2);
  max-width: 68ch;
  margin: 0 0 30px;
}
.lede strong { color: var(--ink); font-family: var(--mono); }

h3.sub {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 34px 0 12px;
}

.note {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 72ch;
  margin: 18px 0 0;
}
.note strong { color: var(--ink); font-family: var(--mono); }

.abstract {
  font-size: 1.03rem;
  line-height: 1.72;
  margin: 0;
  color: #1b232c;
}

/* ---------- corpus funnel ---------- */

.funnel {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--seam);
  border: 1px solid var(--seam);
  border-radius: 3px;
  overflow: hidden;
}

.funnel li {
  background: var(--slab);
  padding: 16px clamp(16px, 2.4vw, 24px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  align-items: baseline;
}

@media (min-width: 720px) {
  .funnel li { grid-template-columns: 15.5rem 1fr; gap: 20px; }
}

.fn-n {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.2vw, 1.42rem);
  letter-spacing: -0.03em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.fn-l { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }

.funnel .fn-key { background: #f4f8fa; box-shadow: inset 4px 0 0 var(--anchor); }
.funnel .fn-key .fn-n { color: var(--anchor); }

/* ---------- stat cards ---------- */

.cards {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cards.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card {
  background: var(--slab);
  border: 1px solid var(--seam);
  border-top: 3px solid var(--anchor);
  border-radius: 2px;
  padding: 20px;
}

.card-n {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 0 10px;
}

.card-l {
  font-size: 15px;
  line-height: 1.45;
  margin: 0 0 10px;
  font-weight: 600;
}

.card-s {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
}

/* ---------- severity ribbon ---------- */

.ribbon {
  display: flex;
  width: 100%;
  height: 42px;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--seam);
}
.ribbon .seg { display: block; height: 100%; }

.sev-crit { background: var(--sev-crit); }
.sev-high { background: var(--sev-high); }
.sev-med  { background: var(--sev-med); }
.sev-low  { background: var(--sev-low); }
.sev-info { background: var(--sev-info); }
.sev-unk  { background: var(--sev-unk); }

.sev-crit-t { color: var(--sev-crit); }

.key {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  padding: 0;
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.key li { display: flex; align-items: center; gap: 7px; }
.key i {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  flex: none;
}

/* ---------- split layout ---------- */

.split {
  display: grid;
  gap: clamp(26px, 3.4vw, 46px);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}

.stat-row {
  border-top: 1px solid var(--seam);
  padding: 24px 0;
}
.stat-row:first-child { border-top: 0; padding-top: 0; }

.stat-n {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(2rem, 4.6vw, 2.9rem);
  letter-spacing: -0.045em;
  line-height: 1;
  margin: 0 0 8px;
}

.stat-l {
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 0;
  max-width: 42ch;
}
.stat-l strong { color: var(--ink); }

.split-b > p { font-size: 15.5px; line-height: 1.62; margin: 0 0 14px; }
.split-b > p:last-child { margin-bottom: 0; }

/* ---------- scanner bars ---------- */

.bars { margin: 0; }

.bar-row {
  display: grid;
  grid-template-columns: 6.6rem minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 7px 0;
}

.bars dt {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
}

.bars dd {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.4rem;
  align-items: center;
  gap: 10px;
}

.track {
  display: block;
  height: 14px;
  background: rgba(12, 74, 90, 0.11);
  border-radius: 1px;
  min-width: 0;
}

.bar {
  display: block;
  height: 100%;
  background: var(--anchor-2);
  border-radius: 1px;
}

.bar-flag .bar { background: var(--sev-high); }
.bar-flag b { color: var(--sev-crit); }

.bars b {
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
  text-align: right;
}

@media (max-width: 420px) {
  .bar-row { grid-template-columns: 1fr; gap: 4px; padding: 6px 0; }
  .bars dd { grid-template-columns: minmax(0, 1fr) 5.6rem; }
}

.callout {
  margin: 34px 0 0;
  background: var(--slab);
  border: 1px solid var(--seam);
  border-left: 5px solid var(--sev-high);
  border-radius: 2px;
  padding: 18px 22px;
  font-size: 15.5px;
  line-height: 1.6;
}
.callout strong { font-family: var(--mono); }

/* ---------- secret-labelling steps ---------- */

.steps {
  list-style: none;
  counter-reset: none;
  margin: 0;
  padding: 0;
}

.steps li {
  position: relative;
  padding: 0 0 22px 26px;
  border-left: 2px solid var(--seam);
}
.steps li::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 9px;
  width: 12px;
  height: 12px;
  background: var(--slab);
  border: 2px solid var(--anchor-2);
  border-radius: 50%;
}
.steps li.step-end { border-left-color: transparent; padding-bottom: 0; }
.steps li.step-end::before { background: var(--sev-high); border-color: var(--sev-high); }

.steps b {
  display: block;
  font-family: var(--mono);
  font-size: clamp(1.4rem, 2.8vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.15;
}
.steps li.step-end b { color: var(--sev-crit); }

.steps span {
  display: block;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin-top: 3px;
  max-width: 44ch;
}

/* ---------- pipeline stages ---------- */

.stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) { .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.stages li {
  background: var(--slab);
  border: 1px solid var(--seam);
  border-radius: 2px;
  padding: 22px;
  display: flex;
  flex-direction: column;
}

.st-k {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--anchor);
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 2px;
  margin: 0 0 14px;
}

.stages h3 {
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  line-height: 1.3;
}

.stages p { font-size: 14.5px; line-height: 1.58; margin: 0; }

/* higher specificity than `.stages p` on purpose: the auto top margin is what
   pushes each stage's data strip to the bottom of its card */
.stages .st-d {
  margin: auto 0 0;
  padding-top: 16px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--anchor);
  border-top: 1px solid var(--seam);
}

/* ---------- link cards ---------- */

.links {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.link-card {
  display: flex;
  flex-direction: column;
  background: var(--slab);
  border: 1px solid var(--seam);
  border-radius: 2px;
  padding: 20px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.link-card:hover {
  border-color: var(--anchor);
  box-shadow: 0 2px 0 var(--anchor);
}

.lc-k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--anchor-2);
  font-weight: 700;
  margin-bottom: 8px;
}

.lc-t {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--anchor);
  margin-bottom: 8px;
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lc-d { font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }

/* ---------- limitations ---------- */

.limits { margin: 0; padding: 0; list-style: none; }
.limits li {
  font-size: 15.5px;
  line-height: 1.6;
  padding: 14px 0 14px 22px;
  border-top: 1px solid var(--seam);
  position: relative;
}
.limits li:first-child { border-top: 0; padding-top: 0; }
.limits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  width: 8px;
  height: 2px;
  background: var(--sev-high);
}
.limits li:first-child::before { top: 11px; }
.limits strong { font-weight: 600; }

/* ---------- bibtex ---------- */

.bib {
  background: var(--ink);
  color: #dfe6ed;
  border-radius: 3px;
  padding: 20px clamp(16px, 2.4vw, 24px);
  overflow-x: auto;
  margin: 0;
  font-size: 13px;
  line-height: 1.62;
}
.bib code {
  font-family: var(--mono);
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
  white-space: pre;
  overflow-wrap: normal;
}

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

.foot {
  background: var(--ink);
  color: #b9c4cf;
  padding: 34px 0;
  font-size: 14px;
}
.foot-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .foot-grid { grid-template-columns: 1fr auto; align-items: end; }
  .foot-b { text-align: right; }
}
.foot p { margin: 0; line-height: 1.6; }
.foot strong {
  font-family: var(--mono);
  color: #fff;
  letter-spacing: -0.01em;
  font-size: 15px;
}
.foot a { color: #8fc4d3; text-decoration: underline; text-underline-offset: 3px; }
.foot a:hover { color: #b8dde8; }
.foot :focus-visible { outline-color: #8fc4d3; }