:root {
  --bg: #ECEAE5;
  --card: #FBFAF7;
  --ink: #151515;
  --muted: #77736C;
  --line: #E2DFD8;
  --accent: #C2410C;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-sans: "Inter", system-ui, -apple-system, sans-serif;
}

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

html, body { height: 100%; }

body {
  margin: 0;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.frame {
  position: relative;
  width: 100%;
  max-width: 720px;
  container-type: inline-size;
}

/* The card is drawn at the design's 720×412 and scales as one piece:
   --u is 1px at full width and shrinks with the frame on smaller screens. */
.card {
  --u: calc(100cqw / 720);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 720 / 412;
  padding: calc(48 * var(--u)) calc(56 * var(--u));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: calc(6 * var(--u));
  box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) #1515150F;
  font-size: calc(15 * var(--u));
  /* --rx/--ry are set from main.js while the pointer is over the card. */
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card:hover {
    transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
    transition-duration: 0.15s, 0.4s;
    box-shadow: 0 calc(36 * var(--u)) calc(80 * var(--u)) #1515151F;
  }
}

/* Defaults match preset A; the inline script overrides these on load. */
.stain {
  position: absolute;
  z-index: -1;
  left: var(--x, 79.3%);
  top: var(--y, 68.7%);
  width: 90.3%;
  aspect-ratio: 1;
  opacity: var(--opacity, 0.8);
  mix-blend-mode: multiply;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(calc(var(--flip, 1) * var(--scale, 1)), var(--scale, 1));
  pointer-events: none;
  user-select: none;
}

h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: calc(52 * var(--u));
  font-weight: 400;
  line-height: 1;
  letter-spacing: calc(-0.5 * var(--u));
}

.role {
  margin: calc(8 * var(--u)) 0 0;
  color: var(--muted);
}

.bio {
  max-width: calc(440 * var(--u));
  margin: 0;
  line-height: 1.6;
}

.signature {
  position: absolute;
  left: 65.8%;
  top: 58.3%;
  width: calc(190 * var(--u));
  height: auto;
  transform: rotate(3deg);
  mix-blend-mode: multiply;
}

.details {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(24 * var(--u));
  margin: 0;
  padding-top: calc(24 * var(--u));
  border-top: 1px solid var(--line);
}

.details dt {
  margin-bottom: calc(6 * var(--u));
  color: var(--muted);
  font-size: calc(11 * var(--u));
  letter-spacing: calc(1.2 * var(--u));
  text-transform: uppercase;
}

.details dd {
  margin: 0;
  font-size: calc(14 * var(--u));
  font-weight: 500;
}

.details a {
  color: inherit;
  text-decoration: none;
}

.details a:hover { color: var(--accent); }

/* Easter egg on "Currently in". Anchored to the right edge so it never pokes
   out of the card's right side. */
.currently {
  position: relative;
  outline-offset: calc(4 * var(--u));
}

.tooltip {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8 * var(--u));
  padding: max(4px, calc(6 * var(--u))) max(8px, calc(10 * var(--u)));
  border-radius: 999px;
  background: var(--ink);
  color: var(--card);
  /* Unlike the rest of the card, don't shrink the punchline past readable. */
  font-size: max(11px, calc(12 * var(--u)));
  font-weight: 400;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(calc(4 * var(--u)));
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.currently:hover .tooltip,
.currently:focus .tooltip {
  opacity: 1;
  transform: none;
}

.toast {
  position: absolute;
  left: 50%;
  top: 100%;
  margin: 20px 0 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--card);
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}