/* robertstowell.com — the front door.
   A marker, not a page. Everything here is restraint: one name, two dates,
   and the rule that closes them. No navigation, no links, no ornament.

   The dates are set in the same monospace the catalog uses for every year,
   scale and car number, because they are the same kind of fact — and the
   most consequential one on the site. */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --asphalt: #16181d;
  --bone: #efece7;
  --quiet: #8b93a0;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

html { -webkit-text-size-adjust: 100%; height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--asphalt);
  color: var(--bone);
  font-family: var(--sans);
  /* A faint lift from the centre, so the field is not a flat block of colour. */
  background-image: radial-gradient(120% 90% at 50% 38%, #1d212a 0%, #16181d 62%);
}

.mem {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12vh 1.5rem 10vh;
}

.mem-name {
  margin: 0;
  font-size: clamp(2rem, 8.2vw, 4.75rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--bone);
  text-wrap: balance;
}

.mem-dates {
  margin: clamp(1.1rem, 3.2vw, 1.9rem) 0 0;
  font-family: var(--mono);
  font-size: clamp(.82rem, 1.9vw, 1.05rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: .34em;
  /* the tracking adds a trailing gap; pull the line back to true centre */
  text-indent: .34em;
  color: var(--quiet);
}

.mem-en { padding: 0 .15em; }

/* The chequered flag means the race is complete. It closes the catalog inside,
   and it closes this. Kept to a whisper — remove this block and the element in
   build_memorial() if it ever reads wrong. */
.mem-close {
  height: 10px;
  flex: none;
  opacity: .5;
  background-color: #0f1116;
  background-image:
    linear-gradient(45deg, #2b313c 25%, transparent 25%, transparent 75%, #2b313c 75%),
    linear-gradient(45deg, #2b313c 25%, transparent 25%, transparent 75%, #2b313c 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  body { background: #fff; color: #000; background-image: none; }
  .mem-name { color: #000; }
  .mem-dates { color: #333; }
  .mem-close { display: none; }
}