/*
  Defabuse — public verification site.

  The visitor is almost always someone who just received an unsolicited notice
  saying content was added to their website without permission, and who is here
  to decide whether that notice is a scam. So the page is dressed as the thing
  they are holding: an issued document. Cool paper, one ink, one seal colour,
  and no salesmanship anywhere.
*/

:root {
  /* Surface — cool grey stock, deliberately not warm cream */
  --paper: #edeff2;
  --paper-2: #e4e7ec;
  --sheet: #ffffff;

  /* Ink */
  --ink: #10161c;
  --ink-2: #566370;
  --ink-3: #8794a1;

  --rule: #d5dae0;
  --rule-2: #c2c9d1;

  /* Institution */
  --navy: #1b3a5c;
  --navy-2: #2d5580;

  /* The single signal colour: reserved for the reference and the seal. */
  --seal: #7a2230;
  --seal-tint: rgba(122, 34, 48, 0.07);

  --ok: #1f6b4a;

  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 62ch;
  --container: 1120px;
  --pad-x: clamp(1.25rem, 5vw, 4rem);
  --gap-section: clamp(3.5rem, 7vw, 6.5rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
  max-width: var(--measure);
}

a {
  color: var(--navy);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--seal);
}

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

.shell {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

/* ── Eyebrow: the small caps label used to file each section ───────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.688rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.eyebrow::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* ── Utility bar ───────────────────────────────────────────────────────── */
.util {
  background: var(--ink);
  color: #c6ced7;
  font-size: 0.75rem;
}

.util-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 0.5rem var(--pad-x);
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.util p {
  margin: 0;
  color: #8f9aa6;
}

.lang {
  margin-left: auto;
  display: flex;
  gap: 0.25rem;
}

.lang button {
  background: none;
  border: 1px solid transparent;
  color: #8f9aa6;
  font: inherit;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  padding: 0.1rem 0.45rem;
  border-radius: 2px;
  cursor: pointer;
}

.lang button[aria-pressed='true'] {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}

/* ── Masthead ──────────────────────────────────────────────────────────── */
.masthead {
  border-bottom: 1px solid var(--rule-2);
  background: var(--paper);
}

.masthead-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: 1.1rem var(--pad-x);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}

.brand-name {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.brand-rule {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.masthead nav {
  margin-left: auto;
  display: flex;
  gap: 1.75rem;
  font-size: 0.875rem;
}

.masthead nav a {
  color: var(--ink-2);
  text-decoration: none;
}

.masthead nav a:hover {
  color: var(--seal);
}