/* oomoo -- the warrant canary. Same construction as css/graphics/graphics.css: this file
 * is the page, and the imports are the whole dependency list -- tokens first so everything
 * after can read --ink, --dim and --text, then the reset and the site's faces.
 *
 * No reading column here: the page is one sentence, centered, filling the viewport.
 */

@import url('../tokens.css');
@import url('../reset.css');
@import url('../utilities.css');
@import url('../home/fonts.css');

/* ------------------------------------------------------------------- Page */

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'National Park', system-ui, sans-serif;
  min-height: 100svh;
  display: grid;
  place-items: center;
}

.label {
  text-transform: uppercase;
  font-family: 'National Park', system-ui, sans-serif;
}

/* Mirrors the theme toggle in the opposite corner. */
.back {
  position: fixed;
  top: 14px;
  left: 14px;
  font-size: 11px;
  color: var(--dim);
  text-decoration: none;
}

.back:hover {
  color: var(--accent);
}

/* ----------------------------------------------------------------- Canary */

.canary {
  text-align: center;
  padding: 24px;
}

/* Sized against the viewport's width because the sentence is the page: it should crowd
 * the edges on a phone and still land three lines deep on a desktop. */
.canary__claim {
  font-family: 'Terminal Grotesque', 'National Park', sans-serif;
  font-size: clamp(3rem, 13vw, 11rem);
  line-height: 0.95;
  color: var(--ink);
  max-width: 12ch; /* forces the three-line break: "The FBI / has not / been here" */
  margin: 0 auto;
}

.canary__yet {
  margin-top: 1.2rem;
  font-size: clamp(1rem, 2.5vw, 1.6rem);
  color: var(--dim);
}