/* Standard blocks; DOM order is heading, portrait, introduction, CV. */
/* Override WordPress's global sibling block gap at the hero/video join. */
.ojch-main > .ojch-scroll-video,
.editor-styles-wrapper .ojch-main > .wp-block-ojch-scroll-video-interlude {
  margin-block-start: 0 !important;
  margin-block-end: 0;
}
.ojch-main > .ojch-scroll-video + .ojch-home-about { margin-block-start: 0; }
.ojch-home-about {
  background: var(--wp--preset--color--background);
  color: var(--wp--preset--color--text);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 38%);
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(2rem, 5vw, 6rem);
  row-gap: 1.5rem;
  align-items: start;
}
.ojch-home-about > * { min-width: 0; margin-block: 0; }
.ojch-home-about__heading {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--wp--preset--font-family--newsreader);
  font-size: clamp(2.75rem, 6vw, 6rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}
.ojch-home-about__portrait {
  grid-column: 2;
  grid-row: 1 / 4;
  /* Scale the complete square composition as one unit. */
  aspect-ratio: 1 / 1;
  width: 100%;
  justify-self: end;
}
.ojch-home-about__portrait .wp-block-image { margin: 0; width: 100%; }
.ojch-home-about__portrait img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  /* Native Image block crop/position styles take precedence over this fallback. */
  object-position: var(--ojch-portrait-position, 50% 50%);
}
/* Mask fallback is a full circle. The supplied SVGs refine it where supported. */
.ojch-image-mask--full-circle img,
.ojch-image-mask--gibbous-left-lit img {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
  object-position: var(--ojch-portrait-position, 50% 50%);
}
@supports ((mask-image: url("../masks/ojch-mask-full-circle.svg")) or (-webkit-mask-image: url("../masks/ojch-mask-full-circle.svg"))) {
  .ojch-image-mask--full-circle img,
  .ojch-image-mask--gibbous-left-lit img {
    border-radius: 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    mask-mode: alpha;
  }
  .ojch-image-mask--full-circle img {
    -webkit-mask-image: url("../masks/ojch-mask-full-circle.svg");
    mask-image: url("../masks/ojch-mask-full-circle.svg");
  }
  .ojch-image-mask--gibbous-left-lit img {
    -webkit-mask-image: url("../masks/ojch-mask-left-lit-gibbous.svg");
    mask-image: url("../masks/ojch-mask-left-lit-gibbous.svg");
  }
}
@media (forced-colors: active) {
  .ojch-image-mask--full-circle img,
  .ojch-image-mask--gibbous-left-lit img {
    -webkit-mask-image: none !important;
    mask-image: none !important;
    border-radius: 50%;
  }
}
.ojch-home-about__copy { grid-column: 1; grid-row: 2; }
.ojch-home-about__cv { grid-column: 1; grid-row: 3; }
.ojch-home-about__copy, .ojch-home-about__cv {
  font-family: var(--wp--preset--font-family--inter);
  overflow-wrap: anywhere;
}
.ojch-home-about__copy p { max-width: 55ch; margin-block: 0 1rem; }
.ojch-home-about__cv .wp-block-file { font-size: inherit; margin: 0; }
.ojch-home-about__cv a { display: inline-block; padding-block: .65rem; text-underline-offset: .2em; }
.ojch-home-about__cv a:focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
.ojch-home-about__placeholder { color: var(--wp--preset--color--secondary); }
.ojch-home-about__cv .ojch-home-about__pending { text-decoration: underline; text-underline-offset: .2em; }
@media (max-width: 47.99rem) {
  .ojch-home-about { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .ojch-home-about > * { grid-column: 1; grid-row: auto; }
  .ojch-home-about__portrait { aspect-ratio: auto; width: 100%; max-width: 38rem; justify-self: center; }
  .ojch-home-about__portrait img { aspect-ratio: 1 / 1; object-fit: contain; }
}