/* ============================================================
   self-hosted webfonts (Fraunces, Newsreader, JetBrains Mono)
   downloaded from Google Fonts under their OFL licenses.
   ============================================================ */

/* latin-ext · Fraunces 300-700 italic */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(./fonts/Fraunces-300-700-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin · Fraunces 300-700 italic */
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 300 700;
  font-display: swap;
  src: url(./fonts/Fraunces-300-700-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext · Fraunces 300-700 normal */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(./fonts/Fraunces-300-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin · Fraunces 300-700 normal */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(./fonts/Fraunces-300-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext · JetBrainsMono 400 normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/JetBrainsMono-400-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin · JetBrainsMono 400 normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(./fonts/JetBrainsMono-400-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext · JetBrainsMono 500 normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/JetBrainsMono-500-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin · JetBrainsMono 500 normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(./fonts/JetBrainsMono-500-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext · JetBrainsMono 700 normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/JetBrainsMono-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin · JetBrainsMono 700 normal */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(./fonts/JetBrainsMono-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext · Newsreader 400-700 italic */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(./fonts/Newsreader-400-700-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin · Newsreader 400-700 italic */
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(./fonts/Newsreader-400-700-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext · Newsreader 400-700 normal */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(./fonts/Newsreader-400-700-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin · Newsreader 400-700 normal */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(./fonts/Newsreader-400-700-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   whois.css, font fingerprint
   aesthetic: editorial type specimen × surveillance dossier
   ============================================================ */

:root {
  --paper:   #efe9dc;
  --paper-2: #e6dfce;
  --ink:     #161310;
  --ink-2:   #2a2520;
  --muted:   #6b6258;
  --rule:    #1611100f;
  --rule-2:  #16111022;
  --accent:  #c73a1d;
  --hit:     #1a3d2a;

  --display: "Fraunces", "Times New Roman", serif;
  --body:    "Newsreader", Georgia, serif;
  --mono:    "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

::selection { background: var(--ink); color: var(--paper); }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* paper grain overlay, barely there */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { background: var(--accent); color: var(--paper); }

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

.wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 48px 120px;
}

.rule { border: 0; border-top: 1px solid var(--rule-2); margin: 0; }

/* ---------- masthead ---------- */

.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 64px;
}
.masthead .right { text-align: right; }
.masthead .mark {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.01em;
  text-transform: none;
}
.masthead .mark .dot { color: var(--accent); }

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

.hero { margin-bottom: 88px; position: relative; }

.kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.kicker::before, .kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ink);
  max-width: 80px;
}
.kicker::before { max-width: 0; }

.headline {
  font-family: var(--display);
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  font-size: clamp(64px, 11vw, 156px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0 0 36px;
  color: var(--ink);
}
.headline em {
  font-style: italic;
  font-weight: 350;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--accent);
}
.headline .small {
  font-size: 0.42em;
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.02em;
  color: var(--muted);
  display: block;
  margin-top: 10px;
}

.lede {
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.5;
  max-width: 62ch;
  color: var(--ink-2);
  margin: 0 0 32px;
  font-weight: 400;
}
.lede em {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}

.meta-row {
  display: flex;
  gap: 24px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.meta-row .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--ink);
  padding: 7px 12px;
  color: var(--ink);
}
.meta-row .badge::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

.hero-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 10px 18px;
  cursor: pointer;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background .2s, color .2s, transform .15s, box-shadow .15s;
}
.hero-cta .arr {
  font-family: var(--display);
  font-style: italic;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--accent);
  transition: transform .25s;
}
.hero-cta:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
  transform: translate(-2px, -2px);
  box-shadow: 3px 3px 0 var(--ink);
}
.hero-cta:hover .arr { color: var(--paper); transform: translate(2px, 2px); }

/* ---------- section frame ---------- */

.section {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 32px;
  padding: 48px 0;
  border-top: 1px solid var(--ink);
}
.section:last-of-type { border-bottom: 1px solid var(--ink); }

.section-num {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 64px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.04em;
}
.section-title {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 28px;
  display: block;
}
.section-title strong { color: var(--ink); font-weight: 500; }

/* ---------- scan panel ---------- */

.scan-block { max-width: 780px; }

button.primary {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  padding: 22px 36px;
  cursor: pointer;
  font-weight: 500;
  position: relative;
  transition: background .2s, color .2s, transform .15s;
}
button.primary:not(:disabled):hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}
button.primary:disabled { opacity: 0.4; cursor: not-allowed; }
button.primary::after {
  content: " ↘";
  font-family: var(--display);
  letter-spacing: 0;
  margin-left: 6px;
}

.scan-controls {
  display: flex;
  align-items: stretch;
  gap: 24px;
  flex-wrap: wrap;
}

.method-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--ink);
  background: var(--paper);
  position: relative;
}
.method-toggle-label {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  border-right: 1px solid var(--ink);
  background: var(--paper-2);
}
.method-opt {
  background: transparent;
  border: 0;
  border-right: 1px solid var(--rule-2);
  padding: 0 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: var(--ink-2);
  transition: background .15s, color .15s;
  min-width: 80px;
  justify-content: center;
}
.method-opt:last-child { border-right: 0; }
.method-opt:hover:not(.is-active) { background: var(--paper-2); color: var(--ink); }
.method-opt.is-active {
  background: var(--ink);
  color: var(--accent);
}

.method-card {
  margin: 28px 0 0;
  max-width: 720px;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 4px 0;
}
.method-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-2);
  align-items: baseline;
}
.method-row:last-child { border-bottom: 0; }
.method-row dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.method-row dd {
  margin: 0;
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-2);
  position: relative;
  min-height: 1.45em;
}
.method-row dd code {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--paper-2);
  padding: 1px 6px;
  color: var(--ink);
  letter-spacing: 0;
}
.method-row dd .m {
  display: block;
  transition: opacity .25s ease, transform .25s ease;
}
/* hide the inactive method line */
.method-card[data-method="css"]    .m-canvas,
.method-card[data-method="canvas"] .m-css {
  display: none;
}

.method-row-punch dd {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.method-row-punch dd em {
  font-style: italic;
  color: var(--accent);
}

.progress {
  margin-top: 36px;
  padding: 20px 0 0;
  border-top: 1px solid var(--rule-2);
}
.progress-track {
  height: 1px;
  background: var(--rule-2);
  position: relative;
  overflow: visible;
}
.progress-track > div {
  height: 3px;
  position: absolute;
  top: -1px;
  left: 0;
  width: 0;
  background: var(--ink);
  transition: width .12s linear;
}
.progress-track > div::after {
  content: "";
  position: absolute;
  right: -6px;
  top: -3px;
  width: 9px; height: 9px;
  background: var(--accent);
  animation: blink 1s steps(1) infinite;
}
.progress-track > div.done::after {
  animation: none;
  opacity: 1;
}
@keyframes blink { 50% { opacity: 0; } }

.progress-label {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 12px;
}
.progress-label .current { color: var(--ink); text-transform: none; letter-spacing: 0; font-style: italic; font-family: var(--display); font-size: 14px; }

/* ---------- verdict ---------- */

.verdict-wrap {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 32px;
  padding: 72px 0 48px;
  border-top: 1px solid var(--ink);
  position: relative;
}

.verdict-stamp {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
  display: inline-block;
  border: 1px solid var(--accent);
  padding: 4px 10px;
  transform: rotate(-2deg);
}

.verdict-title {
  font-family: var(--display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(56px, 9vw, 140px);
  line-height: 0.92;
  letter-spacing: -0.045em;
  margin: 0 0 24px;
  color: var(--ink);
}
.verdict-title em {
  font-style: italic;
  font-weight: 350;
  color: var(--accent);
}

/* redaction-reveal: an ink block over the word that wipes away */
.reveal-redact {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.reveal-redact::before {
  content: "";
  position: absolute;
  left: -0.06em;
  right: -0.12em;
  top: -0.1em;
  bottom: -0.05em;
  background: var(--ink);
  z-index: 2;
  transform-origin: right center;
  animation: redact-wipe 0.85s cubic-bezier(.65,.04,.2,1) 0.18s forwards;
}
.reveal-redact > * { position: relative; z-index: 1; }
@keyframes redact-wipe {
  0%   { transform: scaleX(1); }
  35%  { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

/* empty state: bar stays redacted, no animation, content hidden under it */
.reveal-redact.empty::before {
  animation: none;
  transform: scaleX(1);
}
.reveal-redact.empty > em {
  visibility: hidden;
}

.empty-blurb {
  color: var(--muted);
  font-style: italic;
  opacity: 0.65;
}

/* word-by-word fade-up with blur lift, for the subheadline */
.reveal-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(6px);
  filter: blur(4px);
  animation: word-in 0.55s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes word-in {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.verdict-blurb {
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.5;
  max-width: 56ch;
  color: var(--ink-2);
  margin: 0;
}

/* ---------- profile breakdown ---------- */

.profile-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.profile-row {
  display: grid;
  grid-template-columns: 1fr 80px;
  gap: 32px;
  align-items: baseline;
  padding: 22px 0;
  border-top: 1px solid var(--rule-2);
}
.profile-row:first-child { border-top: 0; }

.profile-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  gap: 24px;
}
.profile-label {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.profile-row.zero .profile-label { color: var(--muted); font-weight: 300; }

.profile-bar {
  height: 4px;
  background: var(--paper-2);
  position: relative;
  margin-bottom: 12px;
}
.profile-bar > span {
  display: block;
  height: 100%;
  background: var(--ink);
  transition: width .8s cubic-bezier(.2,.7,.2,1);
}
.profile-row.zero .profile-bar > span { background: var(--rule-2); }
.profile-row.top .profile-bar > span { background: var(--accent); }

.profile-evidence {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
  line-height: 1.7;
}
.profile-evidence code {
  background: transparent;
  color: var(--ink);
  padding: 2px 6px;
  border: 1px solid var(--rule-2);
  margin-right: 4px;
  margin-bottom: 4px;
  display: inline-block;
}

.profile-score {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 56px;
  line-height: 1;
  text-align: right;
  color: var(--ink);
  letter-spacing: -0.04em;
}
.profile-row.zero .profile-score { color: var(--rule-2); }

/* ---------- font specimen list ---------- */

.specimen-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.specimen-count {
  font-family: var(--display);
  font-style: italic;
  font-weight: 300;
  font-size: 36px;
  color: var(--ink);
}
.specimen-count em { color: var(--accent); font-style: italic; }
.specimen-count .of { color: var(--muted); font-size: 22px; }

.specimen-block { margin-bottom: 28px; }
.specimen-block:last-child { margin-bottom: 0; }

.specimen-subhead {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
  font-weight: 500;
}
.specimen-subcount {
  color: var(--ink);
  margin-left: 6px;
}

.specimen-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.specimen-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule-2);
  transition: background .15s;
}
.specimen-row:last-child { border-bottom: 0; }
.specimen-row:hover { background: var(--paper-2); }

.specimen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.specimen-chips[data-state="collapsed"] { display: none; }

.specimen-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border: 1px solid var(--rule-2);
  color: var(--muted);
  background: transparent;
  white-space: nowrap;
  line-height: 1.3;
}

.specimen-toggle {
  background: transparent;
  border: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 3px 9px;
  margin-left: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.specimen-toggle:hover { background: var(--ink); color: var(--paper); }
.specimen-chip.hit {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--paper-2);
}

.specimen-marker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.specimen-row.hit .specimen-marker { color: var(--accent); font-weight: 700; }

.specimen-name {
  font-size: 30px;
  line-height: 1.05;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.specimen-source {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
  max-width: 36ch;
  line-height: 1.5;
}

/* ---------- colophon ---------- */

.colophon {
  margin-top: 96px;
  padding-top: 32px;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 96px 1fr 1fr 1fr;
  gap: 32px;
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-2);
}
.colophon h4 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
  font-weight: 500;
}
.colophon p { margin: 0 0 12px; }
.colophon code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--paper-2);
  padding: 1px 5px;
}

/* ---------- entrance animations ---------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rise   { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.rise.d1 { animation-delay: .08s; }
.rise.d2 { animation-delay: .18s; }
.rise.d3 { animation-delay: .30s; }
.rise.d4 { animation-delay: .44s; }
.rise.d5 { animation-delay: .60s; }

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  .wrap { padding: 32px 22px 80px; }
  .masthead { grid-template-columns: 1fr 1fr; }
  .masthead .center { grid-column: 1 / -1; order: -1; margin-bottom: 12px; }
  .section, .verdict-wrap, .colophon { grid-template-columns: 1fr; gap: 16px; }
  .section-num { font-size: 36px; }
  .colophon { grid-template-columns: 1fr; }
  .profile-row { grid-template-columns: 1fr; }
  .profile-score { text-align: left; font-size: 36px; }
  .specimen-name { font-size: 22px; }
  .specimen-source { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}