/* Tejori — about page
   Note: every section below uses a 768px breakpoint (not the site's usual 767)
   because that is what the original rules were written against.

   Layout follows the Figma design (Tejori desktop website, About frame), at
   1920 wide: an 875x707 photo on the left with short intro text beside it,
   then a 1045-wide photo on the right that starts beside the lower part of
   the first photo, with the story text under the first photo.

   The two photo widths are percentages of the page (45.573% + 54.427% =
   100%), not vw. vw includes the scrollbar, so in a real browser vw-based
   widths added up to more than the page and the photos ran into each other.
   The founder's story then runs on as a row of cards and a closing
   "What we're building" band. */

/* ---------- intro: photo + about text ---------- */

.ab__in {
  display: flex;
}

.ab__img {
  flex: none;
  width: 45.573%;
}

/* The design's 875x707 box. yellow.webp is a portrait (640x779), so
   it's cropped to that shape from the top. */
.ab__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 875 / 707;
  object-fit: cover;
  object-position: center top;
}

/* The bottom padding is .jm's pull-up below plus a little air, so the second
   photo always lands under this text. If the text ever runs long, the band
   grows (leaving a small gap under the first photo) rather than the photo
   covering the text. */
.ab__c {
  flex: 1;
  padding: 3.125vw 5.208vw 18.229vw 3.125vw;
}

.ab__sub {
  margin: 0;
  font-family: var(--ff-script);
  font-size: 2.659vw;
  font-weight: 400;
  line-height: 2.659vw;
  text-transform: capitalize;
  color: var(--c-green);
}

.ab__logo {
  margin-top: -.26vw;
}

.ab__logo img {
  display: inline;
  width: 100%;
  max-width: 14.583vw;
  border-radius: .521vw;
  object-fit: cover;
}

.ab__h {
  margin: 1.042vw 0 0;
  font-size: 1.458vw;
  font-weight: 700;
  line-height: 125%;
  letter-spacing: 0;
  color: var(--c-green);
}

.ab__t {
  margin: .521vw 0 0;
  font-size: 1.146vw;
  font-weight: 400;
  line-height: 1.719vw;
  letter-spacing: 0;
  color: #000;
}

/* ---------- second photo + story text ---------- */

.jm {
  display: flex;
  align-items: flex-start;
  /* the photo is pulled up beside the lower part of the first photo */
  margin-top: -16.979vw;
}

.jm__img {
  flex: none;
  width: 54.427%;
  order: 2;
}

.jm__img img {
  display: block;
  width: 100%;
  height: auto;
}

/* the top padding matches the pull-up plus a gap, so the text starts below
   the first photo rather than beside it */
.jm__c {
  flex: 1;
  padding: 19.271vw 3.125vw 3.125vw 5.208vw;
}

.jm__h {
  margin: 0;
  font-size: 2.083vw;
  font-weight: 700;
  line-height: 125%;
  letter-spacing: 0;
  color: #000;
}

.jm__h strong {
  color: var(--c-green);
}

.jm__d {
  margin: 1.302vw 0 2.083vw;
}

.jm__d:first-child {
  margin-top: 0;
}

.jm__d:last-child {
  margin-bottom: 0;
}

.jm__d p {
  margin: 0;
  font-size: 1.146vw;
  font-weight: 400;
  line-height: 1.719vw;
  letter-spacing: 0;
  color: #000;
}

.jm__d p + p {
  margin-top: .781vw;
}

.jm__d .jm__q {
  font-weight: 700;
}

.jm__d .jm__built {
  margin-top: 1.042vw;
  font-family: var(--ff-script);
  font-size: 2.659vw;
  line-height: 3.125vw;
  color: var(--c-green);
}

/* ---------- story cards ---------- */

.abs {
  padding: 5.208vw 4.545vw;
  background: var(--c-cream);
}

.abs__in {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.083vw;
  max-width: 83.333vw;
  margin-inline: auto;
}

.abs__b {
  padding: 2.344vw 2.083vw 2.604vw;
  background: #fff;
  border-top: .26vw solid var(--c-green);
  border-radius: .521vw;
  box-shadow: 0 .521vw 1.563vw rgba(0, 0, 0, .06);
}

.abs__n {
  display: block;
  margin-bottom: .521vw;
  font-size: 2.604vw;
  font-weight: 700;
  line-height: 1;
  color: var(--c-amber);
}

.abs__h {
  margin: 0 0 1.042vw;
  font-size: 1.458vw;
  font-weight: 700;
  line-height: 125%;
  letter-spacing: 0;
  color: var(--c-green);
}

.abs__b p {
  margin: 0;
  font-size: 1.042vw;
  font-weight: 400;
  line-height: 1.615vw;
  letter-spacing: 0;
  color: var(--c-mute);
}

.abs__b p + p {
  margin-top: .781vw;
}

.abs__b .abs__q {
  font-weight: 700;
  color: #000;
}

/* Hover (client request): the card lifts with a deeper shadow, its number grows and
   nudges right, and the heading darkens. Only on devices that can hover, so a tap on a
   phone doesn't leave a card stuck raised. */
.abs__b,
.abs__n,
.abs__h {
  transition: transform .35s ease, box-shadow .35s ease, color .35s ease;
}

.abs__n {
  transform-origin: left center;
}

@media (hover: hover) {
  .abs__b:hover {
    transform: translateY(-.625vw);
    box-shadow: 0 1.563vw 3.125vw rgba(0, 0, 0, .12);
  }

  .abs__b:hover .abs__n {
    transform: translateX(.417vw) scale(1.12);
  }

  .abs__b:hover .abs__h {
    color: #1f6f5a;
  }
}

@media (prefers-reduced-motion: reduce) {
  .abs__b,
  .abs__n,
  .abs__h {
    transition: none;
  }

  .abs__b:hover,
  .abs__b:hover .abs__n {
    transform: none;
  }
}

/* ---------- what we're building + founder sign-off ---------- */

.wwb {
  padding: 5.208vw 4.545vw;
}

.wwb__in {
  max-width: 57.292vw;
  margin-inline: auto;
  text-align: center;
}

.wwb__h {
  margin: 0 0 1.302vw;
  font-size: 2.083vw;
  font-weight: 700;
  line-height: 125%;
  letter-spacing: 0;
  color: var(--c-green);
}

.wwb__in p {
  margin: 0;
  font-size: 1.146vw;
  line-height: 1.719vw;
  color: #000;
}

.wwb__in p + p {
  margin-top: .781vw;
}

.wwb__in .wwb__end {
  margin-top: 1.302vw;
  font-size: 1.458vw;
  font-weight: 700;
  line-height: 125%;
  color: var(--c-green);
}

/* "With love" and the name in the script face */
.wwb__sig {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2.083vw 0;
}

.wwb__love,
.wwb__name {
  font-family: var(--ff-script);
  font-size: 2.659vw;
  line-height: 3.125vw;
  color: #000;
}

.wwb__name {
  color: var(--c-green);
}

.wwb__role {
  font-size: 1.146vw;
  font-weight: 700;
  line-height: 1.719vw;
  color: #000;
}

.wwb__btn {
  --btn-hover: var(--c-green);
  margin-inline: auto;
  padding: .357vw .521vw;
}

.wwb__btn .btn__in {
  justify-content: center;
}

/* this button's icon keeps its own fixed size — it never scaled with the viewport */
.wwb__btn .btn__in svg {
  width: 44px;
  height: 29px;
}

@media (max-width: 768px) {
  .ab__in {
    flex-direction: column;
  }

  .ab__img,
  .jm__img {
    width: 100%;
  }

  /* the photo (yellow.webp) is portrait; on mobile show it whole rather than
     the desktop's landscape crop */
  /* .ab__img img {
    aspect-ratio: auto;
  } */
  /* The client's lehenga-hem photo shown whole filled a phone screen, and its white bottom
     edge ran into the page (client feedback). Cropped to 4:3 with cover, centred on the
     embroidery, which leaves the white strip out. */
  .ab__img img {
    aspect-ratio: 4 / 3;
    object-position: center 45%;
  }

  .ab__c {
    padding: 6.818vw 4.545vw 9.091vw;
  }

  .ab__sub {
    font-size: 8.701vw;
    line-height: 1;
  }

  .ab__logo {
    margin-top: -1.136vw;
  }

  .ab__logo img {
    max-width: 47.727vw;
  }

  .ab__h {
    margin-top: 3.409vw;
    font-size: 5.455vw;
    line-height: 6.818vw;
  }

  .ab__t {
    margin-top: 2.273vw;
    font-size: 3.409vw;
    line-height: 5.114vw;
  }

  .jm {
    flex-direction: column;
    margin-top: 0;
  }

  .jm__img {
    order: 0;
  }

  .jm__c {
    padding: 9.091vw 4.545vw;
  }

  .jm__h {
    font-size: 5.455vw;
    line-height: 6.818vw;
  }

  .jm__d {
    margin: 4.545vw 0 9.091vw;
  }

  .jm__d p {
    font-size: 3.409vw;
    line-height: 5.114vw;
  }

  .jm__d p + p {
    margin-top: 2.273vw;
  }

  .jm__d .jm__built {
    margin-top: 4.545vw;
    font-size: 8.701vw;
    line-height: 10.227vw;
  }

  .abs {
    padding: 9.091vw 4.545vw;
  }

  .abs__in {
    grid-template-columns: 1fr;
    gap: 6.818vw;
    max-width: 100%;
  }

  .abs__b {
    padding: 6.818vw 5.682vw;
    border-top-width: 1.136vw;
    border-radius: 2.273vw;
    box-shadow: 0 2.273vw 5.682vw rgba(0, 0, 0, .06);
  }

  .abs__n {
    margin-bottom: 2.273vw;
    font-size: 9.091vw;
  }

  .abs__h {
    margin-bottom: 3.409vw;
    font-size: 4.773vw;
  }

  .abs__b p {
    font-size: 3.409vw;
    line-height: 5.114vw;
  }

  .abs__b p + p {
    margin-top: 2.273vw;
  }

  .wwb {
    padding: 9.091vw 4.545vw;
  }

  .wwb__in {
    max-width: 100%;
  }

  .wwb__h {
    margin-bottom: 4.545vw;
    font-size: 5.455vw;
  }

  .wwb__in p {
    font-size: 3.409vw;
    line-height: 5.114vw;
  }

  .wwb__in p + p {
    margin-top: 2.273vw;
  }

  .wwb__in .wwb__end {
    margin-top: 4.545vw;
    font-size: 4.091vw;
  }

  .wwb__sig {
    margin: 6.818vw 0;
  }

  .wwb__love,
  .wwb__name {
    font-size: 8.701vw;
    line-height: 10.227vw;
  }

  .wwb__role {
    font-size: 3.409vw;
    line-height: 5.114vw;
  }

  /* this button carries its own small-screen sizes, and it switches one pixel
     later than the shared .btn rule does */
  .wwb__btn {
    max-width: 100%;
    padding: 1.591vw 3.409vw;
    font-size: 4.545vw;
    letter-spacing: .227vw;
  }

  .wwb__btn .btn__in {
    gap: 5vw;
  }
}