/* Viridian Blue — the whole stylesheet. */

:root {
  --ink: #05040a;
  --text: #ece9f5;
  --muted: #a49dba;
  --accent: #a855f7;
  --accent-bright: #c896ff;
  --line: #221c33;

  --aura-body-opacity: 0.55;
  --aura-grin-opacity: 0.32;
  --aura-cycle: 16s;
  --aura-size: min(120vh, 1100px);

  --measure: 62rem;
  --step: clamp(3rem, 9vh, 6.5rem);
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
  line-height: 1.7;
  letter-spacing: 0.01em;
}

/* ---- background ---------------------------------------------------- */

.aura {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.aura__layer {
  position: absolute;
  top: 46%;
  left: 50%;
  width: var(--aura-size);
  height: var(--aura-size);
  translate: -50% -50%;
  background: var(--accent);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.aura__body {
  mask-image: url("glow-body.svg");
  -webkit-mask-image: url("glow-body.svg");
  opacity: var(--aura-body-opacity);
}

.aura__grin {
  mask-image: url("glow-grin.svg");
  -webkit-mask-image: url("glow-grin.svg");
  opacity: var(--aura-grin-opacity);
}

/* The outline fades up out of black and back down again, once every cycle.
   Each layer breathes to its own resting opacity, so the shape never gets
   brighter than it does when it sits still. */
@keyframes breathe-body {
  from, to { opacity: 0; }
  50%      { opacity: var(--aura-body-opacity); }
}

@keyframes breathe-grin {
  from, to { opacity: 0; }
  50%      { opacity: var(--aura-grin-opacity); }
}

/* Readers who ask for reduced motion never enter this block, so the layers
   keep the resting opacity set above and nothing moves. */
@media (prefers-reduced-motion: no-preference) {
  .aura__body {
    animation: breathe-body var(--aura-cycle) ease-in-out infinite;
  }

  .aura__grin {
    animation: breathe-grin var(--aura-cycle) ease-in-out infinite;
    /* A beat behind the outline, so the grin is the last thing to arrive. */
    animation-delay: calc(var(--aura-cycle) / 14);
    /* Hold the first keyframe through the delay. Without this the layer shows
       at its resting opacity for the whole delay, then cuts to black. */
    animation-fill-mode: backwards;
  }
}

/* ---- shell --------------------------------------------------------- */

.site-header,
main,
.site-footer {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.5rem, 4vh, 2.5rem);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}

.site-nav {
  display: flex;
  gap: clamp(1.25rem, 4vw, 2.5rem);
}

.site-nav a {
  color: var(--muted);
  font-size: 0.95rem;
  text-decoration: none;
  padding-block: 0.25rem;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover,
.site-nav amain a {
  color: var(--accent-bright);
  text-underline-offset: 0.25em;
}

:focus-visible { color: var(--text); }

.site-nav a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

main {
  flex: 1;
  padding-block: var(--step) calc(var(--step) * 1.2);
}

.site-footer {
  padding-block: 2.5rem;
  color: var(--muted);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

/* ---- type ---------------------------------------------------------- */

h1 {
  margin: 0;
  font-size: clamp(2.4rem, 7vw, 4.6rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
}

h2 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.4rem, 3.2vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.lede {
  margin: 1.75rem 0 0;
  max-width: 34ch;
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  color: var(--accent-bright);
  line-height: 1.5;
}

/* ---- home ---------------------------------------------------------- */

.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(62vh, 34rem);
}

.stealth {
  margin-top: var(--step);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  max-width: 44ch;
}

.stealth p { margin: 0; }

.stealth .tag {
  display: inline-block;
  margin-bottom: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-bright);
}

/* ---- people -------------------------------------------------------- */

.people {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.person {
  flex: 0 1 15rem;
  min-width: 12.5rem;
  text-align: center;
}

.person img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  filter: contrast(1.04);
}

.person__name {
  display: block;
  margin-top: 1.1rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: var(--text);
}

.person__role {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- contact ------------------------------------------------------- */

.contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--step);
  min-height: min(56vh, 30rem);
  justify-content: center;
}

.contact p {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(1.4rem, 3.6vw, 2.1rem);
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.qr {
  display: inline-block;
  padding: 1.25rem;
  border: 1px solid var(--line);
  border-radius: 0.75rem;
}

.qr img {
  display: block;
  width: 9rem;
  height: 9rem;
  /* The code needs its light field to scan, so soften the corners rather
     than fight the square. */
  border-radius: 0.35rem;
}


/* ---- focus --------------------------------------------------------- */

main a {
  color: var(--accent-bright);
  text-underline-offset: 0.25em;
}

:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}