/*
 * Exodus Core Solutions — about.html. Loads after css/inner.css.
 * Hero, then a founder's letter (five paragraphs + a signed sign-off),
 * then the shared closing band and footer.
 */

/* "ABOUT" measures 3.30em in Kanit 900 at -.025em tracking. */
.about-page .hero__heading{ --hero-em: 3.3; }

/* ---------------------------------------------------------------------- */
/* The letter — one comfortable reading column                             */
/* ---------------------------------------------------------------------- */

.letter{
  padding: 5.5rem var(--gutter) 3rem;
}
@media (min-width: 768px){ .letter{ padding-top: 8rem; padding-bottom: 4rem; } }
@media (min-width: 1024px){ .letter{ padding-top: 10rem; } }

.letter__col{
  max-width: 31em;                             /* ~68 characters of Kanit 300 per line */
  margin: 0 auto;
  font-size: clamp(1.08rem, .95rem + .45vw, 1.28rem);
}

.letter__col > p{
  color: rgba(215, 226, 234, .78);
  font-weight: 300;
  line-height: 1.75;
  text-wrap: pretty;
}
.letter__col > p + p{ margin-top: 1.55em; }

/* ---------------------------------------------------------------------- */
/* Sign-off — halftone portrait, handwritten signature, title              */
/* ---------------------------------------------------------------------- */

.signoff{
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-top: 3.25em;
}

.signoff__portrait{
  flex: 0 0 auto;
  width: 140px;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  /* Fallback if founder.jpg is ever missing (js/inner.js blanks the img):
     a plain halftone dot field in the same look. */
  background:
    radial-gradient(circle at 34% 30%, rgba(215, 226, 234, .5) 0 1.1px, transparent 1.6px) 0 0 / 5px 5px,
    radial-gradient(circle at 34% 30%, #2a2d31, #0C0C0C 72%);
  box-shadow: 0 0 0 1px rgba(215, 226, 234, .12);
}
.signoff__portrait img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* tools/halftone.py already outputs black-and-white; this keeps a raw
     colour photo on-brand too, if one is dropped in without the script. */
  filter: grayscale(1) contrast(1.08);
}

.signoff__name{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
  min-width: 0;
}

/* Any of sig-1 … sig-6c fits this box at its own aspect ratio. The fine-pen
   sig-6a is wide (about 2.1:1) and hairline-thin, so it gets a little more
   width than the heavier options needed. */
.signoff__sig{
  display: block;
  width: auto;
  height: auto;
  max-width: min(250px, 100%);
  max-height: 120px;
}

.signoff__title{
  color: rgba(215, 226, 234, .6);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .78rem;
  line-height: 1.4;
}

/* Signature writes itself in, left to right, once the sign-off fades in:
   a soft-edged mask slides across (works for filled and stroked SVGs). */
.signoff__sig{
  -webkit-mask-image: linear-gradient(90deg, #000 46%, transparent 56%);
          mask-image: linear-gradient(90deg, #000 46%, transparent 56%);
  -webkit-mask-size: 240% 100%;
          mask-size: 240% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0;
          mask-position: 100% 0;
  transition: -webkit-mask-position 1.9s cubic-bezier(.5, .1, .3, 1) .45s,
                      mask-position 1.9s cubic-bezier(.5, .1, .3, 1) .45s;
}
.signoff.is-in .signoff__sig{
  -webkit-mask-position: 0 0;
          mask-position: 0 0;
}

@media (max-width: 519.98px){
  /* Phones: portrait on top, signature and title under it. */
  .signoff{ flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-top: 2.75em; }
  .signoff__portrait{ width: 112px; }
  .signoff__sig{ max-width: min(224px, 100%); max-height: 108px; }
}

@media (prefers-reduced-motion: reduce){
  .signoff__sig{
    -webkit-mask-image: none;
            mask-image: none;
    transition: none;
  }
}