/* oomoo -- the computer mandate. Same construction as css/canary/canary.css: this file is
 * the page, one photograph centered in the viewport, and the imports are the whole
 * dependency list -- tokens first so everything after can read --dim and --text.
 */

@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);
}

/* ---------------------------------------------------------------- Mandate */

.mandate {
  padding: 48px 18px;
}

.mandate-fig {
  max-width: 560px;
  margin: 0 auto;
}

.mandate-fig__img {
  display: block;
  width: 100%;
  height: auto;
}

/* The knot-fig caption's voice from the main page: prose pulled back a step so the
 * picture leads. */
.mandate-fig__caption {
  margin-top: 0.45rem;
  font-size: 0.85rem;
  color: color-mix(in oklab, var(--text) 72%, transparent);
  text-align: center;
}