:root { --ink: #0c0c0b; --ink-2: #1a1a18; --paper: #f3f3f0; --white: #ffffff; --yellow: #fff200; --red: #c8102e; --grey: #6b6b66; --rule: #d9d9d3; --tint: #fffbd6; --read: 'Inter', Arial, Helvetica, sans-serif; --head: 'Archivo Black', 'Arial Black', Impact, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; --measure: 42rem; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/inter-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/archivo-black-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
/* unfucked.net: the holding page. The colours and the font stacks are not here:
   the builder copies them from src/styles/global.css, so they are kept in one place. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--read); font-size: 1.0625rem; line-height: 1.6; overflow-wrap: break-word; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; padding: 2.25rem 0 3.5rem; }
.wrap { width: 100%; max-width: calc(var(--measure) + 2rem); margin: 0 auto; padding: 0 1rem; }
a { color: var(--ink); text-decoration-thickness: 0.09em; text-underline-offset: 0.18em; }
a:hover { background: var(--yellow); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 1px; }
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
p { margin: 0 0 1rem; }

/* The wordmark: un, the bar over four letters, ed, .net */
.logo-line { margin: 0; line-height: 1; }
.wordmark { display: inline-flex; align-items: center; font-family: var(--head); font-size: clamp(2.6rem, 11vw, 5rem); line-height: 1; color: var(--ink); padding: 0.35rem 0; }
.wordmark .wm { display: inline-flex; align-items: center; }
.wordmark .un::before { content: 'un'; }
.wordmark .ed::before { content: 'ed'; }
.wordmark .tld::before { content: '.net'; }
.wordmark .bar { display: inline-block; width: 2.3em; height: 0.82em; margin: 0 0.06em; background: var(--ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.wordmark .tld { font-size: 0.6em; align-self: flex-end; margin-left: 0.08em; padding-bottom: 0.12em; }

h1 { font-family: var(--head); font-weight: 400; font-size: clamp(2rem, 7.2vw, 3.4rem); line-height: 1.1; letter-spacing: -0.01em; text-wrap: balance; color: var(--ink); margin: 1.4rem 0 0; }
h1 mark { background: var(--yellow); color: var(--ink); padding: 0 0.12em; }
.redaction { display: block; width: 7.5rem; height: 0.55rem; background: var(--ink); margin: 1.2rem 0 1.4rem; border: 0; }
.lead { font-size: 1.15rem; }
.status { margin-top: 2rem; border: 2px solid var(--ink); background: var(--white); padding: 1.1rem 1.1rem 0.2rem; }

footer { background: var(--ink); color: var(--paper); padding: 1.6rem 0 1.8rem; font-size: 0.92rem; }
footer p { margin: 0 0 0.5rem; }
footer .legal { font-weight: 600; }
footer .small { font-family: var(--mono); font-size: 0.78rem; color: #c9c9c2; margin: 0 0 0.3rem; }

@media print {
  body { background: #fff; }
  footer { background: #fff; color: #000; border-top: 2px solid #000; }
  footer .small { color: #000; }
}