/* ==========================================================================
   INTRO

   The landing block. Everything a reader needs in one screen: who, where,
   what now, what already. Scannable in fragments rather than paragraphs,
   because nobody reads a wall of prose on a personal site.

   The wave field sits behind it, so the ripple is still the first thing on
   screen without costing a whole viewport of its own.
   ========================================================================== */

.intro {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: clamp(6rem, 14vh, 9rem) clamp(4rem, 10vh, 7rem);
  overflow: hidden;
  isolation: isolate;
}

.intro__field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  opacity: 0;
  transition: opacity 1400ms var(--ease-out);
}

.intro__field.is-live { opacity: 1; }

/* Heavier than the old hero veil: this screen is dense text, not three
   lines of display type, so the field has to sit further back. */
.intro__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Tight around the copy, open to the right. The text column only uses the
     left two thirds, so the field gets to stay visible in the space the
     words never reach. */
  background:
    radial-gradient(95% 80% at 4% 46%,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 90%, transparent) 32%,
      color-mix(in srgb, var(--bg) 52%, transparent) 60%,
      transparent 84%),
    linear-gradient(180deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 34%, transparent) 16%,
      color-mix(in srgb, var(--bg) 34%, transparent) 80%,
      var(--bg) 100%);
}

.intro__inner {
  position: relative;
  width: 100%;
  padding-left: calc(var(--gutter) + var(--rail));
  max-width: calc(var(--max) + var(--gutter) * 2 + var(--rail));
}

.intro__wrap { max-width: 62ch; display: grid; gap: clamp(var(--sp-5), 3vh, var(--sp-6)); }

/* Name + profile links ---------------------------------------------------- */

.intro__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.intro__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-6);
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 96;
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--ink);
}

.intro__links { display: flex; flex-wrap: wrap; gap: var(--sp-4); }

.intro__links a {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--line-2);
  padding-bottom: 2px;
  transition: color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}

.intro__links a:hover { color: var(--copper); box-shadow: inset 0 -1px 0 var(--copper); }

/* Lists ------------------------------------------------------------------- */

.intro__study { margin: 0; font-size: var(--step-0); color: var(--ink-2); }

.intro__block { display: grid; gap: var(--sp-2); }

.intro__h {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: var(--ink-4);
}

.intro__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }

.intro__list li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

.intro__list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--copper);
  opacity: .55;
}

.intro__outside {
  margin: var(--sp-2) 0 0;
  font-size: var(--step--1);
  color: var(--ink-3);
}

/* ==========================================================================
   CHIPS - an inline logo plus a label, so an organisation reads as a thing
   rather than as more grey text.
   ========================================================================== */

.chip-link {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  padding: 0.1em 0.45em 0.1em 0.28em;
  margin: 0 0.04em;
  border-radius: 5px;
  border: 1px solid transparent;
  background: var(--chip, color-mix(in srgb, var(--copper) 12%, transparent));
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-2) var(--ease-out),
              background-color var(--dur-2) var(--ease-out);
}

.chip-link img {
  width: 1.15em;
  height: 1.15em;
  border-radius: 3px;
  object-fit: contain;
  flex: none;
  /* A logo that fails to load must not leave a broken-image glyph mid-sentence. */
  color: transparent;
}

.chip-link:hover,
.chip-link:focus-visible { border-color: var(--copper); }

/* A few distinct tints so a paragraph of chips does not read as one colour. */
.chip--copper { --chip: color-mix(in srgb, var(--copper) 13%, transparent); }
.chip--signal { --chip: color-mix(in srgb, var(--signal) 13%, transparent); }
.chip--violet { --chip: color-mix(in srgb, var(--violet) 15%, transparent); }
.chip--plain  { --chip: color-mix(in srgb, var(--ink) 9%, transparent); }

/* Reveal ------------------------------------------------------------------ */

.js .intro [data-reveal] { transition-delay: calc(var(--i, 0) * 60ms); }

@media (max-width: 640px) {
  .intro { min-height: 0; padding-block: clamp(5.5rem, 12vh, 7rem) var(--sp-9); }
  .intro__top { border-bottom: 0; padding-bottom: 0; }
  .intro__name { font-size: var(--step-5); }
}