:root {
  --paper: #f5f2ef;
  --ink: #474233; /* sampled from the mark in icon-3.png */
  --gutter: clamp(1.5rem, 5vw, 3rem);
  --type: 0.75rem;
  --spin-cycle: 9s; /* time for one surge-and-settle revolution */
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  padding: var(--gutter);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: var(--gutter);

  background: var(--paper);
  color: var(--ink);

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: var(--type);
  line-height: 1.5;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── top: live timestamp ─────────────────────────────── */

.meta {
  display: flex;
  justify-content: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  font-variant-numeric: tabular-nums;
}

.meta__item {
  min-width: 5.5ch; /* holds width as digits change, so nothing jitters */
  text-align: center;
}

/* ── middle: the stage ───────────────────────────────── */

/* Holds whatever the page centres — the mark on the index, the
   addresses on the contact page. */
.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}

.mark__logo {
  display: block;
  width: clamp(64px, 7.5vw, 92px);
  height: auto;
}

/* One full turn per cycle, eased hard at both ends: the mark rests, surges
   through the middle, then settles again. A full 360deg means the loop point
   is visually seamless, and the easing zeroes out velocity there, so the
   restart is never a jolt. */
@media (prefers-reduced-motion: no-preference) {
  .mark__logo {
    animation: spin var(--spin-cycle) cubic-bezier(0.76, 0, 0.24, 1) infinite;
  }
}

@keyframes spin {
  to {
    rotate: 360deg;
  }
}

/* ── bottom: the statement ───────────────────────────── */

.statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25em;

  max-width: 68ch;
  text-align: center;
  text-wrap: pretty;
}

.statement p {
  margin: 0;
}

.statement__link {
  color: inherit;
  text-decoration: none;
  letter-spacing: 0.05em;

  /* Drawn rather than underlined, so the rule sits a little lower and
     thinner than a default text-decoration and can animate on hover. */
  padding-bottom: 0.25em;
  background: linear-gradient(currentColor, currentColor) no-repeat
    center bottom / 100% 1px;
  transition: opacity 200ms ease;
}

.statement__link:hover,
.statement__link:focus-visible {
  opacity: 0.55;
}

/* ── contact page ────────────────────────────────────── */

.contact {
  margin: 0;
  display: grid;
  gap: 0.6em 1em;
}

.contact__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.15em 0.5em;
}

.contact__label {
  /* Recedes behind the addresses, but not so far that it drops under
     4.5:1 against the paper — these labels are content, at 12px. */
  opacity: 0.78;
}

.contact__label::after {
  content: ":";
}

.contact__value {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  body {
    animation: fade-in 900ms ease-out both;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}