:root {
  /* Web assets are physically cropped at the illustrated separator line. */
  --invite-ratio: 3840 / 1814;
  --invite-scene-height: 100%;
  --invite-copy-top: 28.82%;
  --invite-copy-left: 50%;
  --invite-door-shift: 1.15%;
}

/* Explicit hero background layer. This mirrors the site's existing CSS background,
   but makes the background image more resilient if the CSS background gets lost. */
.hero-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-background img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.about-invite {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--invite-ratio);
  overflow: hidden;
  color: #111;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
}

.about-invite__scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--invite-scene-height);
}

.about-invite__door-group {
  position: absolute;
  inset: 0;
  transform: translateX(var(--invite-door-shift));
}

.about-invite__layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Back-to-front stack. */
.about-invite__layer--backdrop        { z-index: 0; }
.about-invite__door-group             { z-index: 10; }
.about-invite__layer--open-door-back  { z-index: 10; }
.about-invite__layer--character       { z-index: 20; }
.about-invite__layer--open-door-front { z-index: 30; }
.about-invite__layer--closed-door     { z-index: 40; }
.about-invite__layer--ground-line     { z-index: 50; }
.about-invite__door-hit               { z-index: 65; }
.about-invite__copy                   { z-index: 70; }

/* Invisible hover target over the illustrated door. */
.about-invite__door-hit {
  position: absolute;
  left: calc(32.7% + var(--invite-door-shift));
  top: 27.4%;
  width: 24.8%;
  height: 58.5%;
  display: block;
}

/* Open state begins hidden. */
.about-invite__layer--open-door-back,
.about-invite__layer--open-door-front,
.about-invite__layer--character {
  opacity: 0;
}

.about-invite__layer--closed-door,
.about-invite__layer--open-door-back,
.about-invite__layer--open-door-front {
  transition: opacity 60ms linear;
}

/* The red accent is anchored directly to the words “little more,” so it travels
   with the headline instead of being positioned against the full illustration. */
.about-invite__accent-target {
  position: relative;
  display: inline-block;
}

.about-invite__red-highlight {
  position: absolute;
  left: -8%;
  bottom: -0.12em;
  width: 116%;
  height: auto;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 170ms ease-out;
  z-index: -1;
}

.about-invite__copy {
  position: absolute;
  top: var(--invite-copy-top);
  left: var(--invite-copy-left);
  transform: translateX(-50%);
  width: min(62%, 850px);
  text-align: center;
}

.about-invite__text {
  font-family: "Hoefler Text", Baskerville, "Palatino Linotype", Palatino, Georgia, serif;
  font-style: italic;
  font-size: clamp(1rem, 1.55vw, 2rem);
  line-height: 1.2;
}

/* Desktop opens ONLY when the text or illustrated door is hovered.
   Keyboard focus still reveals the state for accessibility. */
@media (hover: hover) and (pointer: fine) {
  .about-invite.is-hovered .about-invite__layer--closed-door,
  .about-invite.is-hovered .about-invite__layer--closed-door,
  .about-invite:focus-visible .about-invite__layer--closed-door {
    opacity: 0;
  }

  .about-invite.is-hovered .about-invite__layer--open-door-back,
  .about-invite.is-hovered .about-invite__layer--open-door-front,
  .about-invite.is-hovered .about-invite__layer--open-door-back,
  .about-invite.is-hovered .about-invite__layer--open-door-front,
  .about-invite:focus-visible .about-invite__layer--open-door-back,
  .about-invite:focus-visible .about-invite__layer--open-door-front {
    opacity: 1;
  }

  .about-invite.is-hovered .about-invite__layer--character,
  .about-invite.is-hovered .about-invite__layer--character,
  .about-invite:focus-visible .about-invite__layer--character {
    opacity: 1;
    animation: tim-about-pop 290ms cubic-bezier(.2,.8,.2,1) both;
  }

  .about-invite.is-hovered .about-invite__red-highlight,
  .about-invite.is-hovered .about-invite__red-highlight,
  .about-invite:focus-visible .about-invite__red-highlight {
    opacity: 1;
  }
}

/* JS-controlled mobile state. */
.about-invite.is-open .about-invite__layer--closed-door { opacity: 0; }
.about-invite.is-open .about-invite__layer--open-door-back,
.about-invite.is-open .about-invite__layer--open-door-front { opacity: 1; }
.about-invite.is-open .about-invite__layer--character {
  opacity: 1;
  animation: tim-about-pop 290ms cubic-bezier(.2,.8,.2,1) both;
}
.about-invite.is-open .about-invite__red-highlight { opacity: 1; }

@keyframes tim-about-pop {
  0%   { transform: translateX(26px); }
  72%  { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

.about-invite:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}

/* Mobile keeps the same composition and crops only the left/right sides. */
@media (max-width: 700px) {
  /* Keep the established mobile crop while using the physically cropped web assets. */
  .about-invite { aspect-ratio: 1 / 1.04977; }

  .about-invite__scene {
    left: 50%;
    width: calc(100% * 16 / 9 * 5 / 4);
    height: var(--invite-scene-height);
    transform: translateX(-50%);
  }

  .about-invite__copy {
    top: 24.10%;
    width: 82%;
  }


  .about-invite__text {
    font-size: clamp(1rem, 4.6vw, 1.35rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-invite__layer--closed-door,
  .about-invite__layer--open-door-back,
  .about-invite__layer--open-door-front,
  .about-invite__layer--character,
  .about-invite__red-highlight {
    transition: none !important;
    animation: none !important;
  }
}

/* On the homepage, the illustrated black line is the separator itself. */
main#home + .site-footer {
  border-top: 0;
}

/* Remain open while native navigation loads the About page. */
.about-invite.is-leaving .about-invite__layer--closed-door { opacity: 0; }
.about-invite.is-leaving .about-invite__layer--open-door-back,
.about-invite.is-leaving .about-invite__layer--open-door-front { opacity: 1; }
.about-invite.is-leaving .about-invite__layer--character {
  opacity: 1;
  animation: tim-about-exit 180ms linear both;
}
.about-invite.is-leaving .about-invite__red-highlight { opacity: 0; }
.about-invite__loading-dots { display: inline-block; width: 1em; text-align: left; }
@keyframes tim-about-exit {
  0% { transform: translateX(0); opacity: 1; animation-timing-function: ease-out; }
  20% { transform: translateX(-.25%); opacity: 1; animation-timing-function: cubic-bezier(.55,0,1,1); }
  /* Percentages follow the full illustrated canvas, so he clears the door at every size. */
  99.9% { transform: translateX(12%); opacity: 1; }
  100% { transform: translateX(12%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .about-invite.is-leaving .about-invite__layer--character { opacity: 0; animation: none !important; }
}

/* Keep the headline steady; reveal a quiet navigation status underneath. */
.about-invite__loading {
  display: block;
  margin-top: .1rem;
  font-family: 'Hoefler Text', Baskerville, 'Palatino Linotype', Palatino, Georgia, serif;
  font-style: italic;
  font-size: clamp(.75rem, 1vw, .95rem);
  line-height: 1.4;
  color: #858585;
  opacity: 0;
  transition: opacity 300ms ease;
}
.about-invite.is-leaving .about-invite__loading { opacity: 1; }
.about-invite.is-leaving .about-invite__red-highlight { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .about-invite__loading { transition: none; }
}

/* Desktop mouse-out uses the same retreat as navigation, then closes the door. */
@media (hover: hover) and (pointer: fine) {
  .about-invite.is-retreating .about-invite__layer--closed-door { opacity: 0; }
  .about-invite.is-retreating .about-invite__layer--open-door-back,
  .about-invite.is-retreating .about-invite__layer--open-door-front { opacity: 1; }
  .about-invite.is-retreating .about-invite__layer--character {
    opacity: 1;
    animation: tim-about-exit 180ms linear both;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-invite.is-retreating .about-invite__layer--character { opacity: 0; animation: none !important; }
}

/* Closing is immediate once the character's retreat finishes. */
.about-invite__layer--closed-door,
.about-invite__layer--open-door-back,
.about-invite__layer--open-door-front { transition: none; }

/* The same retreat also plays when scrolling upward on mobile. */
.about-invite.is-retreating .about-invite__layer--closed-door { opacity: 0; }
.about-invite.is-retreating .about-invite__layer--open-door-back,
.about-invite.is-retreating .about-invite__layer--open-door-front { opacity: 1; }
.about-invite.is-retreating .about-invite__layer--character {
  opacity: 1;
  animation: tim-about-exit 180ms linear both;
}
@media (prefers-reduced-motion: reduce) {
  .about-invite.is-retreating .about-invite__layer--character { opacity: 0; animation: none !important; }
}

/* Only navigation reveals the wider-open illustration, after Tim steps inside. */
.about-invite__layer--wide-open-door { z-index: 45; opacity: 0; }
.about-invite.is-leaving.is-wide-open .about-invite__layer--wide-open-door { opacity: 1; }
.about-invite.is-leaving.is-wide-open .about-invite__layer--open-door-back,
.about-invite.is-leaving.is-wide-open .about-invite__layer--open-door-front,
.about-invite.is-leaving.is-wide-open .about-invite__layer--character { opacity: 0; }