/* Centered info card. A translucent rim sits on the cream page; the sheet
   inside holds the type. Posters live in style.css and stay behind it.
   Spacing follows the Figma frame (card width 1748) scaled to --card-w. */
:root {
  --card-bg: #faf7f2;
  --card-ink: #111827;
  --card-body: #6b7280;
  --card-label: #374151;
  --card-muted: #9ca3af;
  --card-link: #3b82f6;
  --card-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --card-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

.ibn {
  position: relative;
}

.intro {
  position: relative;
  z-index: 2;
  min-width: 0;
  /* Body type. It scales with the card so the whole card keeps one shape and
     style.css can size it to fit the screen; phones floor it higher below. */
  --t: max(13px, calc(var(--card-w) * 54.587 / 1748));
  --intro-gap: 1.4em;
  width: var(--card-w);
  max-width: calc(100vw - 40px);
  padding: clamp(10px, calc(var(--card-w) * 64 / 1748), 22px);
  border-radius: calc(var(--card-w) * 80 / 1748);
  background: rgb(226 226 226 / 0.24);
  /* A soft, warm shadow: a tight contact line plus two wider falls that lift
     the card off the page without tinting it. */
  box-shadow:
    0 1px 2px rgb(70 48 28 / 0.06),
    0 8px 20px -4px rgb(70 48 28 / 0.08),
    0 28px 60px -12px rgb(70 48 28 / 0.12);
  font-family: var(--card-sans);
  -webkit-font-smoothing: antialiased;
}

.intro__sheet {
  position: relative;
  --sheet-pad: clamp(28px, calc(var(--card-w) * 154.957 / 1748), 52px);
  padding: var(--sheet-pad);
  border-radius: calc(var(--card-w) * 56 / 1748);
  background: var(--card-bg);
  /* The sheet sits a hair above its rim. */
  box-shadow:
    0 0 0 1px rgb(70 48 28 / 0.04),
    0 2px 6px rgb(70 48 28 / 0.06);
}

/* Neer's stamp, pinned in the top-right corner with its right edge on the
   text column. The tilt is in the artwork itself. */
.intro__photo {
  position: absolute;
  top: calc(var(--card-w) * 103 / 1748);
  right: var(--sheet-pad);
  width: calc(var(--card-w) * 296 / 1748);
  height: auto;
  filter: drop-shadow(0.15em 0.4em 0.55em rgb(70 48 28 / 0.18));
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.intro__photo:hover {
  transform: rotate(3deg) scale(1.06);
}

.intro__name {
  margin: 0 0 calc(var(--card-w) * 70.435 / 1748);
  font-size: calc(var(--t) * 119.739 / 54.587);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--card-ink);
}

.intro__practice,
.intro__bio p,
.intro__aside {
  margin: 0 0 var(--intro-gap);
  font-size: var(--t);
  line-height: 1.7;
  color: var(--card-body);
}

.intro__practice strong {
  font-weight: 500;
  color: var(--card-label);
}

.intro__aside {
  margin: var(--intro-gap) 0 0;
}

.intro__bio p:last-child {
  margin-bottom: 0;
}

.intro__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75em;
  margin: calc(var(--card-w) * 119.739 / 1748) 0 0;
  padding: calc(var(--card-w) * 98.609 / 1748) 0 0;
  list-style: none;
  border-top: max(1px, calc(var(--card-w) * 3.522 / 1748)) dashed #e5e7eb;
  font-size: var(--t);
}

.intro__links li {
  display: flex;
}

.intro a:focus-visible {
  outline: 2px solid var(--card-link);
  outline-offset: 3px;
}

@media (max-width: 860px) {
  /* Phones and portrait tablets keep readable type and let the page scroll,
     so the card is sized by width alone. */
  :root {
    --card-w: min(520px, calc(100vw - 48px));
  }

  .ibn {
    padding: 20px 0 28px;
  }

  .intro {
    --t: max(15px, calc(var(--card-w) * 54.587 / 1748));
  }

  .intro__sheet {
    --sheet-pad: 22px;
    padding: 28px 22px 22px;
  }
}

.intro__bio strong,
.intro__aside strong {
  font-weight: 500;
  color: var(--card-label);
}

/* Phones. No rim and no floating card: the sheet runs edge to edge and rises
   over the foot of the poster band like a page pulled up from below, with the
   stamp pinned across the seam. */
@media (max-width: 640px) {
  .ibn {
    padding: calc(var(--band) - 30px) 0 0;
  }

  .intro {
    --t: 16px;
    --intro-gap: 1.25em;
    width: auto;
    max-width: none;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .intro__sheet {
    --sheet-pad: 24px;
    min-height: calc(100svh - var(--band) + 30px);
    padding: 34px var(--sheet-pad) calc(32px + env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0;
    box-shadow:
      0 -1px 0 rgb(70 48 28 / 0.05),
      0 -14px 34px -10px rgb(70 48 28 / 0.22);
  }

  .intro__photo {
    top: -52px;
    right: 20px;
    width: 96px;
  }

  .intro__name {
    margin: 0 0 4px;
    font-size: 44px;
    letter-spacing: -0.035em;
  }

  .intro__practice {
    margin-bottom: 28px;
  }

  .intro__bio p,
  .intro__aside {
    line-height: 1.65;
  }

  .intro__links {
    justify-content: space-between;
    gap: 0;
    margin-top: 32px;
    padding-top: 28px;
    border-top-width: 1px;
  }

  .chip--link {
    width: 3.6em;
    height: 3.6em;
    border-radius: 0.8em;
  }

  .chip--link img {
    width: 2.2em;
    height: 2.2em;
  }

  /* Touch has no hover, so the handles stay hidden. */
  .chip__tip {
    display: none;
  }
}

/* Little icon tiles that sit in the copy after the words they illustrate.
   Negative block margins keep them from opening up the line spacing. */
.chips {
  display: inline-flex;
  vertical-align: middle;
  margin: -0.4em 0.05em -0.3em;
  white-space: nowrap;
}

.chip {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1.9em;
  height: 1.9em;
  border-radius: 0.42em;
  background: #fff;
  box-shadow:
    0 0 0 1px rgb(17 24 39 / 0.05),
    0 1px 2px rgb(70 48 28 / 0.08),
    0 4px 10px rgb(70 48 28 / 0.1);
  transform: rotate(var(--tilt, 0deg));
  transition:
    transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s ease;
}

.chip + .chip {
  margin-left: -0.35em;
}

.chip img {
  display: block;
  width: 1.45em;
  height: 1.45em;
  -webkit-user-drag: none;
  user-select: none;
}

.chip--link {
  width: 2.8em;
  height: 2.8em;
  border-radius: 0.62em;
  text-decoration: none;
}

.chip--link img {
  width: 1.9em;
  height: 1.9em;
}

/* The handle shows under a social tile on hover or focus. It hangs from the
   tile's left edge so the long email doesn't run past the sheet. */
.chip__tip {
  position: absolute;
  top: calc(100% + 0.7em);
  left: 0;
  font-family: var(--card-mono);
  font-size: 0.68em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--card-label);
  opacity: 0;
  transform: translateY(-0.3em) rotate(calc(-1 * var(--tilt, 0deg)));
  transform-origin: left top;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.chip__handle {
  color: var(--card-muted);
}

.chip--link:hover .chip__tip,
.chip--link:focus-visible .chip__tip {
  opacity: 1;
  transform: none;
}

.chip:hover,
.chip--link:focus-visible {
  z-index: 1;
  transform: translateY(-0.15em) rotate(0deg) scale(1.18);
  box-shadow:
    0 0 0 1px rgb(17 24 39 / 0.05),
    0 2px 4px rgb(70 48 28 / 0.1),
    0 10px 20px rgb(70 48 28 / 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .chip,
  .intro__photo {
    transition: none;
  }
}

/* Keeps a tile on the same line as the word before it and the punctuation after. */
.intro__pin {
  white-space: nowrap;
}