/* About Us — page-scoped wireframe styles. Never targets the shared header. */

.about-wireframe {
  position: absolute;
  inset: clamp(112px, 10vw, 152px) clamp(28px, 5vw, 82px) clamp(26px, 3vw, 48px);
  display: grid;
  grid-template-columns: minmax(260px, 0.78fr) minmax(460px, 1.22fr);
  align-items: stretch;
  gap: clamp(36px, 5.5vw, 92px);
  min-height: 0;
}

.about-wireframe__intro {
  align-self: center;
  max-width: 500px;
}

.about-wireframe__eyebrow {
  margin: 0 0 18px;
  color: var(--stage-text);
  font-family: var(--font-label);
  font-size: 0.7rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.about-wireframe__eyebrow::before {
  display: inline-block;
  width: 24px;
  height: 2px;
  margin: 0 10px 3px 0;
  border-radius: 99px;
  background: var(--polar);
  content: "";
}

.about-wireframe h1 {
  margin: 0;
  color: var(--stage-text);
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 4.7vw, 5.8rem);
  font-weight: 600;
  letter-spacing: -0.052em;
  line-height: 0.92;
}

.about-wireframe__intro > p:last-child {
  max-width: 34ch;
  margin: 24px 0 0;
  color: var(--stage-muted);
  font-size: clamp(0.85rem, 0.9vw, 1rem);
  line-height: 1.5;
}

/* Auto height, vertically centered: three short statements stretched over the
   full stage height read as an empty frame rather than a deliberate block. */
.about-wireframe__thesis {
  display: grid;
  grid-template-rows: repeat(3, auto);
  align-self: center;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--stage-line);
  border-radius: clamp(24px, 2.2vw, 34px);
  background: rgba(255, 255, 255, 0.42);
}

.thesis {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: center;
  gap: clamp(18px, 2vw, 34px);
  min-height: 0;
  padding: clamp(22px, 2.4vw, 38px) clamp(26px, 3vw, 46px);
}

.thesis + .thesis { border-top: 1px solid var(--stage-line); }

.thesis__index {
  color: var(--stage-muted);
  font-family: var(--font-label);
  font-size: 0.63rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  line-height: 1.45;
}

.thesis__body { min-width: 0; }

.thesis__body h2 {
  margin: 0 0 8px;
  color: var(--stage-text);
  font-size: clamp(0.95rem, 1.05vw, 1.2rem);
  font-weight: 680;
  letter-spacing: -0.028em;
  line-height: 1.1;
}

.thesis__body p {
  max-width: 58ch;
  margin: 0;
  color: var(--stage-muted);
  font-size: clamp(0.8rem, 0.88vw, 0.97rem);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .about-wireframe {
    grid-template-columns: minmax(190px, 0.6fr) minmax(0, 1.4fr);
    gap: 24px;
  }

  .about-wireframe h1 { font-size: clamp(2.75rem, 4.8vw, 4.25rem); }
  .thesis { gap: 16px; padding: 20px 24px; }
  .thesis__body p { font-size: 0.8rem; }
}

@media (max-width: 780px) {
  .about-wireframe {
    inset: 82px 18px 18px;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 18px;
  }

  .about-wireframe__intro {
    align-self: start;
    max-width: none;
  }

  .about-wireframe__eyebrow { margin-bottom: 9px; font-size: 0.58rem; }
  .about-wireframe__eyebrow::before { width: 18px; margin-right: 8px; }
  .about-wireframe h1 { font-size: clamp(2.15rem, 10vw, 3.8rem); line-height: 0.9; }

  .about-wireframe__intro > p:last-child {
    max-width: none;
    margin-top: 10px;
    font-size: 0.74rem;
  }

  /* Below the headline instead of beside it: fill the stage rather than
     floating in the middle with dead space above and below. */
  .about-wireframe__thesis {
    grid-template-rows: repeat(3, minmax(0, 1fr));
    align-self: stretch;
    max-height: none;
    border-radius: 22px;
  }
  .thesis { gap: 12px; padding: 14px 18px; }
  .thesis__index { font-size: 0.54rem; line-height: 1.3; }
  .thesis__body h2 { margin-bottom: 5px; font-size: 0.86rem; }
  .thesis__body p { max-width: none; font-size: 0.72rem; line-height: 1.4; }
}

@media (max-width: 520px) {
  .about-wireframe { inset-inline: 14px; }
  .about-wireframe__intro > p:last-child { display: none; }
  .thesis { padding: 12px 15px; }
  .thesis__body p { font-size: 0.68rem; }
}

@media (max-height: 700px) and (max-width: 780px) {
  .about-wireframe { gap: 11px; }
  .about-wireframe h1 { font-size: clamp(1.85rem, 8.5vw, 2.75rem); }
  .thesis__body h2 { font-size: 0.78rem; }
  .thesis__body p { font-size: 0.66rem; line-height: 1.35; }
}