/* Our Story : styles du thème et composants communs de system.css. */
.wobly-story {
  overflow: clip;
}

.wobly-story .story-hero::before {
  top: 28px;
  left: -100px;
  width: 260px;
  height: 240px;
  border-radius: 44% 56% 63% 37% / 52% 39% 61% 48%;
  background: color-mix(in srgb, var(--theme-palette-color-10) 60%, transparent);
  transform: rotate(-14deg);
}

.wobly-story .story-hero-inner {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
}

.wobly-story .story-opening {
  max-width: 50ch;
}

.wobly-story .story-hero-image {
  width: 100%;
  height: clamp(420px, 38vw, 540px);
  border-radius: 47% 53% 42% 58% / 35% 42% 58% 65%;
}

.wobly-story .story-hero-image img {
  object-position: center 31%;
}

.wobly-story .story-intention {
  margin: 0 auto 24px;
  padding: 24px clamp(24px, 3vw, 40px);
  border-radius: 32px 44px 34px 40px;
  background: var(--wobly-soft-peach);
  font-size: var(--wobly-text-lead);
  font-weight: 700;
  text-align: center;
  text-wrap: balance;
}

.wobly-story .story-design-copy {
  border: 1px solid var(--theme-palette-color-5);
  border-radius: var(--wobly-radius);
  background: var(--wobly-soft-green);
}

.wobly-story .story-personal {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding-block: 64px;
}

.wobly-story .story-founder-photo {
  position: relative;
  isolation: isolate;
  min-width: 0;
  width: 100%;
  max-width: 390px;
  justify-self: center;
}

.wobly-story .story-founder-photo::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4% -4% 2% -5%;
  border-radius: 46% 54% 44% 56% / 38% 40% 60% 62%;
  background: var(--wobly-soft-peach);
  transform: rotate(-8deg);
}

.wobly-story .story-founder-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1.08;
  object-fit: cover;
  object-position: center 92%;
  border-radius: 44% 48% 40% 46% / 30% 33% 45% 42%;
}

.wobly-story .story-personal-copy {
  min-width: 0;
}

.wobly-story strong {
  color: var(--theme-palette-color-1);
}

.wobly-story .story-closing {
  padding-bottom: 64px;
}

.wobly-story .story-closing-panel {
  border-radius: 40px 54px 38px 48px;
  background: var(--wobly-soft-peach);
}

.wobly-story .story-closing-panel .is-style-wobly-large-quote q {
  margin-top: 0;
}

.wobly-story .story-copy .story-signature {
  margin-top: 32px;
  font-style: italic;
  text-align: right;
}

@media (max-width: 900px) {
  .wobly-story .story-hero-inner,
  .wobly-story .story-personal {
    grid-template-columns: minmax(0, 1fr);
  }

  .wobly-story .story-opening {
    max-width: none;
  }

  .wobly-story .story-hero-image {
    max-width: 620px;
    height: auto;
    aspect-ratio: 1 / 1;
    justify-self: center;
  }

  .wobly-story .story-personal {
    padding-block: 48px;
  }

  .wobly-story .story-founder-photo {
    max-width: 340px;
  }
}

@media (max-width: 690px) {
  .wobly-story .story-copy .story-signature {
    text-align: left;
  }
}