/* ============================================
   Brand character presence — Lumen Arc (inner pages)
   Homepage Hero remains the reference system.
   One appearance per page · content stays primary
   ============================================ */

.char-presence {
  position: relative;
  pointer-events: none;
  user-select: none;
  margin-inline: auto;
  overflow: visible;
  background: transparent;
  isolation: isolate;
  max-width: 100%;
  box-sizing: border-box;
}

.char-presence::before {
  content: "";
  position: absolute;
  inset: -12% -28% -8% -28%;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse 70% 78% at 50% 48%,
      rgba(77, 159, 255, 0.18) 0%,
      rgba(77, 159, 255, 0.07) 36%,
      rgba(77, 159, 255, 0.02) 58%,
      transparent 76%
    );
  filter: blur(22px);
  z-index: 0;
  pointer-events: none;
}

.char-presence picture {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: transparent;
}

.char-presence__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
  border: 0;
  outline: none;
  box-shadow: none;
}

/* Fade mask retired — full-body poses must remain unclipped. */

/* ——— About: full-body professional presenter (approved portrait pose) ——— */
.page-about .about-hero__copy {
  width: 100%;
}

.page-about .about-hero .container.about-hero__intro {
  max-width: 40rem;
  margin-inline: auto;
}

.page-about .about-hero__intro .char-presence {
  width: min(15.5rem, 58vw);
  aspect-ratio: 2 / 3;
  margin-top: 0.75rem;
  margin-inline: auto;
  padding-block: 0.5rem;
}

.page-about .about-hero .char-presence__img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  -webkit-mask-image: none;
  mask-image: none;
}

@media (min-width: 900px) {
  .page-about .about-hero .container.about-hero__intro {
    max-width: min(var(--container-wide, 72rem), 58rem);
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    align-items: end;
    gap: clamp(1.5rem, 4vw, 3.25rem);
    justify-items: stretch;
  }

  .page-about .about-hero__intro .char-presence {
    width: min(100%, 17.5rem);
    min-height: 26rem;
    margin: 0;
    justify-self: end;
    opacity: 0.98;
    padding-block: 0.75rem;
  }

  .page-about .about-hero__copy {
    text-align: start;
    padding-bottom: 1.25rem;
  }

  .page-about .about-hero__copy .page-eyebrow,
  .page-about .about-hero__copy .about-hero__title {
    text-align: start;
  }

  .page-about .about-hero__copy .page-lead {
    max-width: 34em;
    text-align: start;
    margin-inline: 0;
  }
}

/* ——— How I Think: side presence (same layout family as Projects) ——— */
.page-think .think-hero__copy {
  width: 100%;
}

.page-think .think-hero .container.think-hero__intro {
  max-width: 40rem;
  margin-inline: auto;
}

.page-think .think-hero__intro .char-presence {
  width: min(15.25rem, 58vw);
  aspect-ratio: 2 / 3;
  margin-top: 0.85rem;
  margin-inline: auto;
  padding-block: 0.5rem;
}

.page-think .think-hero .char-presence__img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  -webkit-mask-image: none;
  mask-image: none;
}

@media (min-width: 900px) {
  .page-think .think-hero .container.think-hero__intro {
    max-width: min(var(--container-wide, 72rem), 58rem);
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.65fr);
    align-items: end;
    gap: clamp(1.25rem, 3vw, 2.75rem);
  }

  .page-think .think-hero__intro .char-presence {
    width: min(100%, 15.25rem);
    min-height: 22.5rem;
    margin: 0;
    justify-self: end;
    opacity: 0.98;
    padding-block: 0.75rem;
  }

  .page-think .think-hero__copy {
    text-align: start;
    padding-bottom: 0.35rem;
  }

  .page-think .think-hero__copy .page-eyebrow,
  .page-think .think-hero__copy .think-hero__title {
    text-align: start;
  }

  .page-think .think-hero__copy .page-lead {
    max-width: 34em;
    text-align: start;
  }
}

/* ——— Projects: full desk composition — character stays primary ——— */
.page-projects .projects-hero__copy {
  width: 100%;
}

.page-projects .projects-hero .char-presence,
.page-projects .projects-hero .char-presence--projects-desk {
  width: min(21rem, 82vw);
  aspect-ratio: 2 / 3;
  margin-top: 0.85rem;
  margin-inline: auto;
  padding-block: 0.35rem 0.6rem;
}

.page-projects .projects-hero .char-presence__img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Soft glow behind desk scene without cropping feet/desk */
.page-projects .projects-hero .char-presence--projects-desk::before {
  inset: -8% -18% -6% -18%;
  opacity: 0.9;
}

@media (min-width: 900px) {
  .page-projects .projects-hero .container {
    max-width: min(var(--container-wide, 72rem), 68rem);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(1.5rem, 3.5vw, 3rem);
  }

  .page-projects .projects-hero .projects-hero__copy {
    text-align: start;
    padding-bottom: 1.5rem;
  }

  .page-projects .projects-hero .projects-hero__copy .page-eyebrow,
  .page-projects .projects-hero .projects-hero__copy h1 {
    text-align: start;
  }

  .page-projects .projects-hero .char-presence,
  .page-projects .projects-hero .char-presence--projects-desk {
    width: min(100%, 26rem);
    min-height: 32rem;
    margin-top: 0;
    justify-self: end;
    opacity: 1;
  }
}

/* ——— Contact: handshake invitation (full two-figure composition) ——— */
.page-contact .contact-intro .char-presence,
.page-contact .contact-intro .char-presence--contact-handshake {
  width: min(100%, 36rem);
  aspect-ratio: 3 / 2;
  margin-top: 1.25rem;
  margin-bottom: 0.75rem;
  margin-inline: auto;
  padding-block: 0.4rem 0.65rem;
}

.page-contact .contact-intro .char-presence__img {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  -webkit-mask-image: none;
  mask-image: none;
}

.page-contact .contact-intro .char-presence--contact-handshake::before {
  inset: -10% -12% -8% -12%;
  opacity: 0.85;
}

@media (min-width: 900px) {
  .page-contact .contact-intro .char-presence,
  .page-contact .contact-intro .char-presence--contact-handshake {
    width: min(100%, 42rem);
    margin-inline: 0 auto;
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  .page-contact .contact-intro .char-presence,
  .page-contact .contact-intro .char-presence--contact-handshake {
    width: min(100%, 36rem);
  }
}

@media (max-width: 899px) {
  .page-about .about-hero,
  .page-think .think-hero,
  .page-projects .projects-hero,
  .page-contact .contact-intro {
    overflow-x: clip;
  }
}

@media (max-width: 767px) {
  .page-about .about-hero .char-presence {
    max-width: min(15.5rem, 100%);
    width: min(15.5rem, 62vw);
  }

  .page-contact .contact-intro .char-presence,
  .page-contact .contact-intro .char-presence--contact-handshake {
    width: min(100%, 28.5rem);
    max-width: 100%;
  }

  .page-think .think-hero .char-presence {
    max-width: min(15.25rem, 100%);
  }

  .page-projects .projects-hero .char-presence,
  .page-projects .projects-hero .char-presence--projects-desk {
    max-width: min(21rem, 100%);
    width: min(21rem, 84vw);
  }
}

@media (max-width: 599px) {
  .page-contact .contact-intro .char-presence,
  .page-contact .contact-intro .char-presence--contact-handshake {
    width: min(100%, 92vw);
  }
}