/* Guru hero imagery. Split from style.css so the design system
   does not need re-sending when only the artwork changes. */
/* ---------- the Guru ---------- */

/* Two poses, swapped server-side: eyes open while waiting for a domain, eyes
   closed once a replacement record is on screen. Explicit width and height so
   the hero does not shift as the image loads. */
.guru {
  display: block;
  width: auto;
  height: 220px;
  max-width: 100%;
  margin: 0 auto var(--sp-5);
}
/* The results hero is left-aligned text, but the Guru is a figure rather than
   a line of copy, so he stays centred. Without the auto he pins to the left
   edge and reads as a stray icon. */
.hero-compact .guru {
  height: 110px;
  margin: 0 auto var(--sp-4);
}

@media (max-width: 40rem) {
  .guru { height: 170px; }
  .hero-compact .guru { height: 88px; }
}

/* The commandment bubble sits above the Guru, so its tail points down at him
   rather than into empty space. Tightened spacing keeps the two as one unit
   and the figcaption is gone: he is right there under the tail. */
.hero .wisdom { margin-bottom: var(--sp-3); }
.hero .guru { margin-top: 0; }

/* Legend for the record renderer. The marker on a DNS-costing term needs a
   stated meaning: on its own it reads as a list bullet, and the title
   attribute never appears on a touch device. */
.record-key {
  margin: var(--sp-2) 0 0;
  font-size: .82rem;
  color: var(--muted);
}
.record-key .term-dns {
  padding: 0 2px 0 0;
  background: none;
  border: none;
}

/* Signoff on the about page. A byline block with a job title read as a
   corporate footer on a page written in the first person; this is a person
   signing their own name. */
.signoff {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
  font-family: var(--font-voice);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--muted);
}

/* Terms sitting after the `all`. A receiver never evaluates them; they are
   there for SPF Guru to read. Muted so the eye goes to the one term that is
   actually looked up, without hiding anything. */
.term-parked {
  opacity: .55;
  background: transparent;
  border-color: var(--border);
}

/* The optional record field. A whole SPF record does not fit a 13rem grid
   column, so it takes the full width of the form. */
.field-wide { grid-column: 1 / -1; }