/* ghostavo.com — holding page.
   The old site does not represent him and recruiters are looking this week, so this stands in
   its place until the cardboard film ships. Same tokens, same typefaces, same cream as the film,
   so the stand-in reads as part of the work rather than as an outage. */

:root {
  --surface: #F6F9F9;
  --ink:     #10201F;
  --teal:    #50C1B1;
  --teal-deep: #1E5F58;
  --muted:   #647473;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: Newsreader, ui-serif, Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 3rem);
  background: var(--surface);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.wrap { width: 100%; max-width: 640px; text-align: center; }

.art { margin: 0 0 clamp(1.5rem, 4vw, 2.5rem); }
.art img { width: 100%; height: auto; display: block; }

.eyebrow {
  margin: 0 0 0.9rem;
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

h1 {
  margin: 0 0 0.6rem;
  font: 400 clamp(2.2rem, 7vw, 3.2rem)/1.05 var(--serif);
  letter-spacing: -0.01em;
}

/* Name, what he does, when he is back, where to find him. Nothing else earns its place on a
   page whose only job is to stop the old site being the first thing anyone sees. */
.role { margin: 0 0 1.6rem; font-size: clamp(1rem, 2.6vw, 1.15rem); color: var(--muted); }
.soon {
  margin: 0 0 2rem;
  font: 500 0.75rem/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-deep);
}

.links { margin: 0; font-size: 0.95rem; }
.links span { margin: 0 0.55rem; color: var(--muted); }
.links a {
  color: var(--teal-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--teal);
  padding-bottom: 1px;
}
.links a:hover { color: var(--ink); border-bottom-color: var(--ink); }
:focus-visible { outline: 2px solid var(--teal-deep); outline-offset: 3px; border-radius: 3px; }