/* ==========================================================================
   Meet Yari

   Ported from #about_description on thechadcarrollgroup.com. Kept from theirs:
   the two column split, a full bleed dark ground that ends where the copy's
   tone changes, a portrait that straddles that edge, and a rotating badge
   overlapping the second frame.

   Five deliberate departures:

   1. LEFT ALIGNED. Theirs is centred throughout. Client direction, applies
      everywhere on this site, so the shared .yp-shead does the work.

   2. THE REVEAL IS OURS. Theirs is a masked horizontal wipe with every element
      on an identical 0s delay. Ours is the site rise from _shared.css, on the
      0.1s ladder, so this section arrives like every other block on the page.

   3. NO NEGATIVE TOP MARGIN. Theirs lifts the whole section up under a pinned
      cover, and that only works because the cover above it collapses 400px of
      bottom padding as it unpins. Nothing is pinned above this section, so it
      sits in normal flow and the air the overlap used to swallow lives inside
      the dark band instead, as --yp-meet-top.

   4. ONE SLAB, NOT TWO. Theirs paints a black slab under the first article and
      a white slab under the second, because their section ground is black on
      phones and white on desktop. Ours is Shell at every width, so the second
      article needs no slab: it is already standing on the section.

   5. THE IMAGE COLUMN SURVIVES ON PHONES. Theirs is collapsed to a 0 by 0
      absolute box under 1024, which still downloads its media. Ours stacks
      under the copy, because a bio block with no portrait is a worse page.

   Depends on: tokens.css, typography.css, sections/_shared.css (.yp-wrap and
   the .yp-rise reveal contract), sections.js (the data-yp-reveal hook).
   ========================================================================== */

/* The whole gutter arithmetic here, and .yp-wrap's own width:100% next to a
   30px padding, assume border-box. Divi's stylesheet does set that globally
   today, but the section's geometry should not be sitting on a theme file it
   does not own, so it states it for its own subtree. */
.yp-meet,
.yp-meet *,
.yp-meet *::before,
.yp-meet *::after { box-sizing: border-box; }

.yp-meet {
  /* Both columns start on this line, so the eyebrow and the top of the
     portrait sit on one horizontal. Anything that changes the air above the
     copy has to change the air above the picture by the same amount. */
  --yp-meet-top: clamp(64px, 9vw, 170px);

  /* Where the dark band ends and the Shell ground takes over. */
  --yp-meet-turn: clamp(36px, 4vw, 60px);

  position: relative;
  background: var(--yp-shell);

  /* Load bearing. The dark band bleeds a full viewport past each side of the
     column it lives in, and this is the only thing clipping it. Remove it and
     the page gains two viewports of horizontal scroll. */
  overflow: hidden;

  padding-bottom: clamp(64px, 7vw, 100px);
}

/* ---- columns -------------------------------------------------------------
   Carroll's measured grid, kept: 53.82 / 42.49 with space-between up to 1440,
   where the text column narrows to 49.82 and the gutter opens instead. Below
   1024 this is one column in source order, copy then pictures. */

@media (min-width: 1024px) {
  .yp-meet-grid {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .yp-meet-text   { width: 53.81685%; }
  .yp-meet-images { width: 42.4908424908%; }
}

@media (min-width: 1440px) {
  .yp-meet-text { width: 49.8168498168%; }
}

/* ---- the dark band -------------------------------------------------------
   The band has to track the first article's real height, because its bottom
   edge is the point where the copy changes register. That means it lives
   inside the article, which in turn means a centred percentage width cannot
   reach full bleed: on desktop the article is the left column, not the page.

   Overhanging one viewport in each direction covers the band whatever the
   column's position, and the section's overflow clips the surplus. The 12px
   the band runs past the article is the seam Carroll gets from offsetting his
   second slab; it makes the ground change read as a drawn edge rather than as
   an accident of where the paragraph stopped. */

.yp-meet-article { position: relative; }

.yp-meet-ground {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: -12px;
  left: -100vw;
  right: -100vw;
  overflow: hidden;
  background: var(--yp-ink);
}

/* Texture, not footage: 10% opacity, no colour, no controls, no sound. Since
   the ground starts one viewport left of the column, one viewport in from its
   own left edge is the column's left edge, so the clip covers everything from
   there rightward without being stretched across the full slab. The same file
   is already streaming in the hero, so this costs a cache hit. */
.yp-meet-ground video {
  position: absolute;
  top: 0;
  left: 100vw;
  width: 100vw;
  height: 100%;
  display: block;
  object-fit: cover;
  opacity: 0.1;
  filter: grayscale(100%);
}

/* Keeps the top of the band pure ink under the eyebrow, then lets the texture
   come up as the copy runs. Contained by the ground, which sits below the
   copy, so unlike Carroll's it can never dim the heading it sits behind. */
.yp-meet-ground::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
                              var(--yp-ink),
                              rgb(var(--yp-ink-rgb) / 0));
  pointer-events: none;
}

/* Everything that is not the ground rides above it. */
.yp-meet-article > *:not(.yp-meet-ground) {
  position: relative;
  z-index: 1;
}

.yp-meet-dark  { padding: var(--yp-meet-top) 0 var(--yp-meet-turn); }
.yp-meet-light { padding: var(--yp-meet-turn) 0 0; }

/* ---- type ----------------------------------------------------------------
   Carroll's body ladder, kept: 16/1.6 on phones, 14 through the 1024 band
   where the column is narrowest, back to 16 at 1300 and 17/1.8 at 1440. */

.yp-meet .yp-shead { padding-bottom: 15px; }

.yp-meet-dark .yp-shead-name,
.yp-meet-dark .yp-shead-label { color: var(--yp-white); }

.yp-meet-kicker {
  margin: 0 0 30px;
  color: rgb(var(--yp-white-rgb) / 0.78);
  font-family: var(--yp-serif);
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: var(--yp-track-sub, 0.09em);
  text-transform: uppercase;
}

.yp-meet-copy p {
  margin: 0 0 30px;
  font-family: var(--yp-serif);
  font-size: 1rem;
  line-height: 1.6;
  /* Full ink at this size on Shell sets heavier than the picture beside it.
     0.86 still measures better than 13:1, so the ceiling is taste, not
     legibility. The white on ink is held at the same value as the hero sub. */
  color: rgb(var(--yp-ink-rgb) / 0.86);
  max-width: 62ch;
}

.yp-meet-dark .yp-meet-copy p { color: rgb(var(--yp-white-rgb) / 0.86); }
.yp-meet-copy p:last-child { margin-bottom: 0; }

@media (min-width: 1024px) {
  .yp-meet-kicker,
  .yp-meet-copy p { font-size: 14px; margin-bottom: 15px; }
}

@media (min-width: 1300px) {
  .yp-meet-kicker,
  .yp-meet-copy p { font-size: 1rem; }
}

@media (min-width: 1440px) {
  .yp-meet-copy p { font-size: 1.0625rem; line-height: 1.8; margin-bottom: 35px; }
}

/* ---- call to action ------------------------------------------------------
   Carroll's pill, on the brand's own motion curve rather than his ease. */

.yp-meet-nav { margin: 32px 0 0; }

.yp-meet-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 45px;
  padding: 0 24px;
  /* The tracking is applied to the last letter as well, which optically shoves
     a centred label left of its own box. The extra left padding puts it back. */
  padding-left: calc(24px + var(--yp-track-nav, 0.18em));
  border: 1px solid var(--yp-ink);
  border-radius: 50px;
  background: var(--yp-ink);
  color: var(--yp-shell);
  font-family: var(--yp-serif);
  font-size: 12px;
  letter-spacing: var(--yp-track-nav, 0.18em);
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              color 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.yp-meet-btn:hover,
.yp-meet-btn:focus-visible { background: var(--yp-shell); color: var(--yp-ink); }
.yp-meet-btn:focus-visible { outline: 1px solid var(--yp-ink); outline-offset: 3px; }

@media (min-width: 1024px) {
  .yp-meet-nav { margin-top: 40px; }
  .yp-meet-btn { min-width: 300px; height: 55px; font-size: 14px; }
}

@media (min-width: 1440px) {
  .yp-meet-nav { margin-top: 50px; }
}

/* ---- picture column ------------------------------------------------------ */

/* z-index, not tree order: the dark band is a positioned z-index 0 element in
   the column before this one, and a static column would paint underneath it. */
.yp-meet-images {
  position: relative;
  z-index: 1;
  margin-top: clamp(32px, 6vw, 56px);
}

@media (min-width: 1024px) {
  /* Same line as the eyebrow, so the two columns start level. */
  .yp-meet-images { margin-top: 0; padding-top: var(--yp-meet-top); }
}

.yp-meet-frame {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.yp-meet-portrait img {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes yp-meet-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@media (min-width: 1024px) {

}

@media (min-width: 1440px) {

}

/* ---- reveal --------------------------------------------------------------
   .yp-rise carries the transition and the resting state, both from
   _shared.css, and both are opt in: the CSS default is visible and sections.js
   adds .yp-anim only when it is actually running.

   The delays are named here rather than left to the shared :nth-child ladder,
   because these risers are not siblings of one another. The order is read
   order: heading, kicker, first block, portrait, second block, second frame,
   button, badge. */

#yp-meet.yp-anim .yp-meet-head                 { transition-delay: 0.30s; }
#yp-meet.yp-anim .yp-meet-kicker               { transition-delay: 0.40s; }
#yp-meet.yp-anim .yp-meet-portrait             { transition-delay: 0.40s; }
#yp-meet.yp-anim .yp-meet-dark .yp-meet-copy   { transition-delay: 0.50s; }
#yp-meet.yp-anim .yp-meet-light .yp-meet-copy  { transition-delay: 0.60s; }

#yp-meet.yp-anim .yp-meet-nav                  { transition-delay: 0.70s; }

/* ---- reduced motion ------------------------------------------------------
   _shared.css already flattens .yp-rise. What is left here is this section's
   own motion: the ring, which never stops on its own, and the ambient clip,
   which CSS cannot pause, so it is dropped and the band stays flat ink. */

@media (prefers-reduced-motion: reduce) {

  .yp-meet-ground video { display: none; }

  /* Scoped restatement of the shared flattening, so this section stays still
     even if it is ever loaded without _shared.css. */
  #yp-meet .yp-rise,
  #yp-meet.yp-anim .yp-rise,
  #yp-meet.yp-anim.yp-in .yp-rise { opacity: 1; transform: none; transition: none; }
}