:root {
  --historia-ink: var(--brand-turquoise-deep);
  --historia-deep: var(--brand-turquoise-deep);
  --historia-moss: var(--brand-turquoise-mid);
  --historia-lime: var(--brand-lime);
  --historia-paper: var(--brand-ivory);
  --historia-wash: #e9f5ef;
  --historia-muted: #526b6b;
  --historia-line: rgba(0, 169, 180, .2);
  --historia-shadow: 0 18px 42px rgba(3, 63, 68, .11);
  --historia-radius: 24px;
}

.historia-body {
  min-width: 320px;
  background: var(--historia-wash) url("../assets/botanical-texture.webp") center top / 920px auto repeat;
  color: var(--historia-ink);
}

.historia-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(11rem, 15vw, 14rem) 0 4.5rem;
}

.historia-page::before,
.historia-page::after {
  position: absolute;
  z-index: -1;
  width: clamp(14rem, 23vw, 24rem);
  height: clamp(19rem, 30vw, 31rem);
  background: url("../images/brand/yerba-branch.svg") center / contain no-repeat;
  opacity: .08;
  pointer-events: none;
  content: "";
}

.historia-page::before { top: 8rem; left: -8rem; transform: rotate(15deg); }
.historia-page::after { top: 62rem; right: -8rem; transform: scaleX(-1) rotate(18deg); }

.historia-wrap {
  width: min(88rem, calc(100vw - 3rem));
  margin-inline: auto;
}

.historia-kicker {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.2rem;
  color: var(--historia-moss);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .2em;
  line-height: 1.2;
  text-transform: uppercase;
}

.historia-kicker__mark {
  display: grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid rgba(110, 141, 60, .6);
  border-radius: 50%;
  color: var(--historia-lime);
  font-size: .8rem;
}

.historia-intro {
  display: grid;
  grid-template-columns: minmax(20rem, .78fr) minmax(0, 1.22fr);
  gap: clamp(1.25rem, 3.5vw, 3.75rem);
  align-items: end;
}

.historia-intro__copy {
  min-height: 39rem;
  padding: clamp(2.5rem, 5vw, 4.75rem) clamp(1.8rem, 4vw, 4.35rem);
  border: 1px solid rgba(21, 72, 62, .13);
  border-radius: var(--historia-radius);
  background: rgba(251, 250, 243, .94);
  box-shadow: var(--historia-shadow);
}

.historia-intro h1 {
  margin: 0;
  color: var(--historia-ink);
  font: 400 clamp(4.3rem, 6.7vw, 7rem) / .86 var(--font-display);
  letter-spacing: -.065em;
  text-wrap: balance;
}

.historia-intro h1 em {
  padding-bottom: .12em;
  color: var(--historia-deep);
  font-style: normal;
}

.historia-rule {
  display: block;
  width: 4.35rem;
  height: 2px;
  margin: 1.65rem 0 2.35rem;
  background: var(--historia-lime);
}

.historia-intro__text {
  display: grid;
  gap: 1.25rem;
  max-width: 34rem;
  color: #48564f;
  font-size: .92rem;
  line-height: 1.7;
}

.historia-intro__text strong,
.historia-event__body strong { color: var(--historia-deep); font-weight: 750; }

.historia-intro__signature {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  margin-top: 2.1rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--historia-line);
  color: var(--historia-moss);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.historia-intro__signature strong {
  color: var(--historia-ink);
  font: 400 2.25rem / 1 var(--font-display);
  letter-spacing: -.04em;
}

.historia-intro__signature span:last-child { margin-left: auto; color: var(--historia-muted); font-size: .58rem; letter-spacing: .08em; }

.historia-intro__archive {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: 1.2rem;
  align-items: end;
}

.historia-photo {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(21, 72, 62, .12);
  border-radius: 18px;
  background: #d9dfcf;
  box-shadow: 0 14px 30px rgba(21, 72, 62, .1);
}

.historia-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.78) contrast(1.05);
}

.historia-intro__archive .historia-photo { align-self: end; background: var(--historia-paper); }
.historia-photo--founders { height: 37rem; }
.historia-photo--harvest { height: 32rem; }
.historia-photo--founders img { object-position: 52% 28%; }
.historia-photo--harvest img { object-position: 50% 48%; }

.historia-photo figcaption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: .8rem;
  padding-top: 2.5rem;
  color: #fffdf4;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.historia-photo figcaption::before {
  position: absolute;
  inset: -2.5rem -1rem -1rem;
  z-index: -1;
  background: rgba(13, 79, 63, .68);
  content: "";
}

.historia-photo figcaption strong {
  color: var(--historia-lime);
  font: 400 1.5rem / 1 var(--font-display);
  letter-spacing: -.03em;
}

.historia-timeline {
  display: grid;
  grid-template-columns: minmax(18rem, .7fr) minmax(0, 1.3fr);
  gap: clamp(2rem, 6vw, 6.8rem);
  margin-top: clamp(6rem, 11vw, 11rem);
  padding-top: clamp(3rem, 5vw, 5rem);
  border-top: 1px solid var(--historia-line);
}

.historia-timeline__aside > h2 {
  max-width: 9ch;
  margin: 0;
  color: var(--historia-ink);
  font: 400 clamp(3.1rem, 5vw, 5.55rem) / .91 var(--font-display);
  letter-spacing: -.06em;
  text-wrap: balance;
}

.historia-timeline__aside .historia-photo {
  margin-top: 2.8rem;
}

.historia-photo--tractor { height: 14rem; }
.historia-photo--tractor img { object-position: 50% 50%; }
.historia-photo--barbakua { height: 11rem; margin-top: 1rem !important; }
.historia-photo--barbakua img { filter: saturate(.72) contrast(1.05); object-position: center 54%; }

.historia-timeline__line {
  position: relative;
  display: grid;
  gap: 1.15rem;
  padding: .25rem 0;
}

.historia-timeline__line::before {
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 8.9rem;
  width: 1px;
  background: rgba(139, 169, 67, .55);
  content: "";
}

.historia-event {
  position: relative;
  display: grid;
  grid-template-columns: 7.1rem 3.6rem minmax(0, 1fr);
  gap: .8rem;
  align-items: center;
  min-height: 7rem;
}

.historia-event__date {
  display: grid;
  justify-items: end;
  gap: .05rem;
  padding-right: .35rem;
  text-align: right;
}

.historia-event__date span {
  color: var(--historia-moss);
  font: 400 1rem / 1.05 var(--font-display);
}

.historia-event__date strong {
  color: var(--historia-ink);
  font: 400 clamp(2.25rem, 3.2vw, 3.35rem) / .9 var(--font-display);
  letter-spacing: -.05em;
}

.historia-event__node {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 3.35rem;
  height: 3.35rem;
  border: 1px solid rgba(21, 72, 62, .17);
  border-radius: 50%;
  background: var(--historia-paper);
  color: var(--historia-lime);
  box-shadow: 0 5px 12px rgba(21, 72, 62, .08);
  font-size: 1rem;
}

.historia-event__body {
  position: relative;
  padding: 1.18rem 1.4rem 1.25rem;
  border: 1px solid rgba(21, 72, 62, .13);
  border-radius: 14px;
  background: rgba(251, 250, 243, .9);
  box-shadow: 0 10px 22px rgba(21, 72, 62, .065);
}

.historia-event__body::before {
  position: absolute;
  top: 50%;
  left: -.45rem;
  width: .8rem;
  height: .8rem;
  border-bottom: 1px solid rgba(21, 72, 62, .13);
  border-left: 1px solid rgba(21, 72, 62, .13);
  background: var(--historia-paper);
  transform: translateY(-50%) rotate(45deg);
  content: "";
}

.historia-event__label {
  margin-bottom: .35rem;
  color: var(--historia-moss);
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.historia-event__body h3 {
  margin: 0;
  color: var(--historia-ink);
  font: 400 clamp(1.45rem, 2.1vw, 2.05rem) / 1.02 var(--font-display);
  letter-spacing: -.035em;
}

.historia-event__body p:not(.historia-event__label) {
  max-width: 44rem;
  margin-top: .65rem;
  color: #626e67;
  font-size: .82rem;
  line-height: 1.55;
}

.historia-closing {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
  margin-top: clamp(6rem, 11vw, 10rem);
  padding: clamp(2rem, 4.5vw, 4.5rem);
  border-radius: var(--historia-radius);
  background: var(--historia-deep);
  color: var(--historia-paper);
  box-shadow: 0 22px 42px rgba(13, 79, 63, .16);
}

.historia-closing .historia-kicker { color: var(--historia-lime); }
.historia-closing h2 { max-width: 10ch; margin: 0; font: 400 clamp(3rem, 5.7vw, 6rem) / .88 var(--font-display); letter-spacing: -.06em; }

.historia-closing__link {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  min-width: 13rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--historia-lime);
  color: var(--historia-paper);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.historia-closing__link span { margin-left: auto; color: var(--historia-lime); font-size: 1.25rem; }

@media (max-width: 1040px) {
  .historia-intro { grid-template-columns: 1fr; }
  .historia-intro__copy { min-height: 0; }
  .historia-intro__archive { width: min(100%, 48rem); margin-left: auto; }
  .historia-timeline { grid-template-columns: 1fr; gap: 3rem; }
  .historia-timeline__aside > h2 { max-width: 12ch; }
  .historia-timeline__aside .historia-photo--tractor { width: 58%; }
  .historia-timeline__aside .historia-photo--barbakua { width: 42%; margin-top: -2.4rem !important; margin-left: auto; }
}

@media (max-width: 720px) {
  .historia-body { background-attachment: scroll; }
  .historia-page { padding-top: 6.7rem; padding-bottom: 3rem; }
  .historia-wrap { width: calc(100vw - 1.25rem); }
  .historia-intro__copy { padding: 2.4rem 1.35rem 2rem; border-radius: 18px; }
  .historia-intro h1 { font-size: clamp(3.8rem, 17vw, 5.4rem); }
  .historia-intro__text { font-size: .86rem; }
  .historia-intro__signature { flex-wrap: wrap; }
  .historia-intro__signature span:last-child { width: 100%; margin-left: 0; }
  .historia-intro__archive { grid-template-columns: 1fr 1fr; gap: .65rem; }
  .historia-photo--founders { height: 24rem; }
  .historia-photo--harvest { height: 20rem; }
  .historia-photo figcaption { right: .7rem; bottom: .7rem; left: .7rem; font-size: .52rem; }
  .historia-photo figcaption strong { font-size: 1.15rem; }
  .historia-timeline { margin-top: 4.5rem; padding-top: 2.8rem; gap: 2.5rem; }
  .historia-timeline__aside > h2 { font-size: clamp(3rem, 14vw, 4.4rem); }
  .historia-timeline__aside .historia-photo--tractor,
  .historia-timeline__aside .historia-photo--barbakua { width: 100%; margin-left: 0; }
  .historia-timeline__aside .historia-photo--barbakua { margin-top: 1rem !important; }
  .historia-timeline__line { gap: .8rem; }
  .historia-timeline__line::before { top: 1.25rem; bottom: 1.25rem; left: 2.05rem; }
  .historia-event { grid-template-columns: 3.6rem minmax(0, 1fr); gap: .75rem; align-items: start; }
  .historia-event__date { grid-column: 1; grid-row: 1; justify-items: start; padding: .75rem 0 0; text-align: left; }
  .historia-event__date span { font-size: .75rem; }
  .historia-event__date strong { font-size: 1.9rem; }
  .historia-event__node { grid-column: 1; grid-row: 1; margin: 3.7rem 0 0 .35rem; width: 2.9rem; height: 2.9rem; font-size: .8rem; }
  .historia-event__body { grid-column: 2; grid-row: 1; min-height: 7rem; padding: 1rem; }
  .historia-event__body h3 { font-size: 1.55rem; }
  .historia-event__body p:not(.historia-event__label) { font-size: .78rem; }
  .historia-event__body::before { display: none; }
  .historia-closing { display: grid; align-items: start; margin-top: 4.5rem; padding: 2rem 1.35rem; border-radius: 18px; }
  .historia-closing h2 { font-size: clamp(3rem, 14vw, 4.4rem); }
  .historia-closing__link { min-width: 0; width: max-content; max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .historia-photo img { transition: none; }
}

/* Desktop first-viewport composition: let the complete archive story arrive
   immediately below the shared header, with the reference's wider split. */
@media (min-width: 901px) {
  .historia-page {
    padding-top: clamp(9rem, 10vw, 10rem);
  }

  .historia-intro {
    width: min(120rem, calc(100vw - 3rem));
    grid-template-columns: minmax(31rem, .62fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4.75rem);
  }

  .historia-intro__copy {
    min-height: clamp(34rem, 68vh, 39rem);
    padding: clamp(2.4rem, 3.2vw, 4rem);
  }

  .historia-intro h1 {
    font-size: clamp(4.8rem, 6vw, 6.7rem);
  }

  .historia-intro__text {
    gap: 1.05rem;
    font-size: .9rem;
  }

  .historia-intro__archive {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: 1.1rem;
  }

  .historia-photo--founders {
    height: clamp(26rem, 57vh, 36rem);
  }

  .historia-photo--harvest {
    height: clamp(22rem, 50vh, 31rem);
  }
}

/* Keep the hero resolved on short desktop viewports such as 1366×768 and
   the compact reference frame, without making the page feel compressed on
   taller displays. */
@media (min-width: 901px) and (max-height: 780px) {
  .historia-intro__copy {
    padding: 2.1rem clamp(2.2rem, 3vw, 3.25rem) 1.9rem;
  }

  .historia-intro h1 {
    font-size: clamp(4.55rem, 8.4vh, 5.55rem);
    line-height: .84;
  }

  .historia-rule {
    margin: 1.15rem 0 1.55rem;
  }

  .historia-intro__text {
    gap: .75rem;
    font-size: .82rem;
    line-height: 1.52;
  }

  .historia-intro__signature {
    margin-top: 1.35rem;
    padding-top: .8rem;
  }

  .historia-photo--founders {
    height: clamp(22rem, 52vh, 30rem);
  }

  .historia-photo--harvest {
    height: clamp(19rem, 45vh, 26rem);
  }
}

/* Hero story copy sits beneath the archive pair and is introduced by a
   quiet editorial route from the title block. */
.historia-intro__story {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(1.25rem, 3.5vw, 3.75rem);
  align-items: start;
  margin-top: clamp(1.5rem, 3vw, 3rem);
}

.historia-intro__story-route {
  position: relative;
  min-height: 4.2rem;
}

.historia-intro__story-route::before {
  position: absolute;
  top: -3rem;
  left: 43%;
  height: 7rem;
  border-left: 1px solid rgba(110, 141, 60, .65);
  content: "";
}

.historia-intro__story-route::after {
  position: absolute;
  top: 4rem;
  right: calc(clamp(1.25rem, 3.5vw, 3.75rem) * -1);
  left: 43%;
  border-top: 1px solid rgba(110, 141, 60, .65);
  content: "";
}

.historia-intro__story-route span {
  position: absolute;
  top: 3.66rem;
  right: calc(clamp(1.25rem, 3.5vw, 3.75rem) * -1);
  width: .65rem;
  height: .65rem;
  border-top: 1px solid var(--historia-moss);
  border-right: 1px solid var(--historia-moss);
  transform: rotate(45deg);
}

.historia-intro__story .historia-intro__text {
  max-width: 48rem;
  padding-top: .15rem;
}

@media (min-width: 901px) {
  .historia-intro {
    align-items: start;
  }

  .historia-intro__copy {
    min-height: 0;
  }

  .historia-intro__archive {
    align-self: start;
  }
}

@media (max-width: 1040px) {
  .historia-intro__story {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 2rem;
  }

  .historia-intro__story-route {
    min-height: 2.1rem;
  }

  .historia-intro__story-route::before {
    top: -1.2rem;
    left: 1.5rem;
    height: 2.6rem;
  }

  .historia-intro__story-route::after {
    top: 1.4rem;
    right: auto;
    left: 1.5rem;
    width: 3.25rem;
  }

  .historia-intro__story-route span {
    top: 1.08rem;
    right: auto;
    left: 4.52rem;
  }
}

@media (max-width: 720px) {
  .historia-intro__story {
    margin-top: 1.4rem;
  }

  .historia-intro__story .historia-intro__text {
    padding-top: 0;
  }
}

@media (min-width: 1041px) {
  .historia-intro__story-route::before {
    top: -8.5rem;
    height: 9.1rem;
  }

  .historia-intro__story-route::after {
    top: .6rem;
  }

  .historia-intro__story-route span {
    top: .26rem;
  }
}

/* Final editorial art direction for the Historia hero. */
.historia-body {
  background: var(--historia-wash);
}

.historia-page {
  background: var(--historia-wash);
}

.historia-page__texture {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("../assets/botanical-texture.webp") center top / 1180px auto repeat;
  opacity: .13;
  pointer-events: none;
}

.historia-page::before,
.historia-page::after {
  z-index: 0;
  opacity: .025;
}

.historia-page > section {
  position: relative;
  z-index: 1;
}

.historia-intro {
  row-gap: clamp(2.25rem, 4vw, 4rem);
}

.historia-intro__copy {
  min-height: 0;
  padding: clamp(2.6rem, 4vw, 4rem) clamp(2rem, 3.8vw, 4rem) clamp(2.25rem, 3vw, 3rem);
  background: rgba(251, 250, 243, .92);
  box-shadow: 0 14px 34px rgba(21, 72, 62, .075);
}

.historia-intro h1 {
  letter-spacing: -.07em;
}

.historia-intro__signature {
  margin-top: clamp(2.25rem, 4vw, 3.75rem);
  padding-top: 1.15rem;
}

.historia-intro__archive {
  gap: clamp(.9rem, 1.5vw, 1.5rem);
  align-items: start;
}

.historia-photo {
  border-radius: 22px;
  border-color: rgba(21, 72, 62, .16);
  box-shadow: 0 12px 26px rgba(21, 72, 62, .09);
}

.historia-photo figcaption {
  z-index: 1;
  right: 1.15rem;
  bottom: 1.05rem;
  left: 1.15rem;
  padding-top: 1.8rem;
  text-shadow: 0 1px 8px rgba(13, 79, 63, .62);
}

.historia-photo figcaption::before {
  inset: auto -.45rem -.6rem;
  z-index: 0;
  height: 2.75rem;
  border-radius: 4px;
  background: rgba(13, 79, 63, .68);
}

.historia-photo figcaption span,
.historia-photo figcaption strong {
  position: relative;
  z-index: 1;
}

.historia-intro__story {
  grid-template-columns: minmax(31rem, .62fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.75rem);
  margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
}

.historia-intro__story-route {
  min-height: 3.75rem;
}

.historia-intro__story-route::before {
  top: -4.2rem;
  left: calc(100% - 5rem);
  height: 4.65rem;
  border-left-color: rgba(110, 141, 60, .72);
}

.historia-intro__story-route::after {
  top: .45rem;
  right: calc(clamp(2rem, 4vw, 4.75rem) * -1);
  left: calc(100% - 5rem);
  border-top-color: rgba(110, 141, 60, .72);
}

.historia-intro__story-route span {
  top: .18rem;
  right: calc(clamp(2rem, 4vw, 4.75rem) * -1 - .22rem);
  width: .46rem;
  height: .46rem;
  border: 1px solid var(--historia-moss);
  border-radius: 50%;
  background: var(--historia-paper);
  transform: none;
}

.historia-intro__story .historia-intro__text {
  max-width: 48rem;
  padding: .05rem 0 .25rem clamp(1.25rem, 2vw, 2rem);
  border-left: 1px solid rgba(110, 141, 60, .28);
}

@media (min-width: 1041px) {
  .historia-intro__archive {
    margin-top: .25rem;
  }

  .historia-intro__archive .historia-photo {
    height: auto;
    aspect-ratio: 1.18 / 1;
  }

  .historia-intro__archive .historia-photo--harvest {
    margin-top: clamp(2.25rem, 4.5vw, 5rem);
  }
}

@media (max-width: 1040px) {
  .historia-intro__story {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .historia-intro__story-route {
    display: none;
  }

  .historia-intro__story .historia-intro__text {
    max-width: none;
    padding: 1.4rem 0 .25rem;
    border-top: 1px solid rgba(110, 141, 60, .28);
    border-left: 0;
  }
}

@media (max-width: 720px) {
  .historia-page__texture {
    background-size: 760px auto;
    opacity: .1;
  }

  .historia-intro__copy {
    box-shadow: 0 10px 24px rgba(21, 72, 62, .06);
  }

  .historia-photo {
    border-radius: 18px;
  }
}

/* Editorial treatment for the introductory history text block. */
.historia-page__texture {
  opacity: .075;
}

.historia-intro__story {
  --story-gap: clamp(2.5rem, 5vw, 6rem);
  --story-pad: clamp(3.25rem, 6vw, 6.5rem);
  grid-template-columns: minmax(31rem, .62fr) minmax(0, 1fr);
  gap: var(--story-gap);
  margin-top: clamp(2.5rem, 5vw, 5.5rem);
  padding: var(--story-pad) 0 clamp(3.5rem, 7vw, 7rem);
  border-bottom: 1px solid rgba(21, 72, 62, .13);
}

.historia-intro__story-route {
  align-self: stretch;
  min-height: 22rem;
}

.historia-intro__story-route::before {
  top: calc(var(--story-pad) * -1);
  right: calc(var(--story-gap) * -1);
  bottom: 3.6rem;
  left: calc(100% - 6rem);
  width: auto;
  height: auto;
  border: 0;
  border-left: 1px solid rgba(110, 141, 60, .72);
  border-bottom: 1px solid rgba(110, 141, 60, .72);
  border-bottom-left-radius: 3.5rem;
  background: transparent;
}

.historia-intro__story-route::after {
  display: none;
}

.historia-intro__story-route span {
  top: auto;
  right: calc(var(--story-gap) * -1 - .28rem);
  bottom: 3.32rem;
  left: auto;
  width: .58rem;
  height: .58rem;
  border: 1px solid var(--historia-moss);
  border-radius: 50%;
  background: var(--historia-paper);
  transform: none;
}

.historia-intro__story .historia-intro__text {
  display: block;
  max-width: 44rem;
  padding: 0 0 0 clamp(1.5rem, 2.5vw, 2.75rem);
  border: 0;
}

.historia-story-label {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  color: var(--historia-moss);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  line-height: 1.2;
  text-transform: uppercase;
}

.historia-story-label__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid rgba(110, 141, 60, .62);
  border-radius: 50%;
  color: var(--historia-lime);
  font-size: .8rem;
}

.historia-intro__story .historia-intro__text p {
  max-width: 40rem;
  color: #4d5b55;
  font-size: clamp(.98rem, 1.25vw, 1.18rem);
  line-height: 1.72;
}

.historia-intro__story .historia-intro__text p:first-of-type {
  color: var(--historia-ink);
  font: 400 clamp(1.8rem, 2.7vw, 2.8rem) / 1.22 var(--font-display);
  letter-spacing: -.035em;
}

.historia-intro__story .historia-intro__text p + p {
  margin-top: clamp(2rem, 4vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 3.5rem);
  border-top: 1px solid rgba(21, 72, 62, .14);
}

.historia-intro__story .historia-intro__text strong {
  color: var(--historia-deep);
  font-weight: 750;
}

@media (max-width: 1040px) {
  .historia-page__texture {
    opacity: .065;
  }

  .historia-intro__story {
    --story-pad: 2.75rem;
    display: block;
    margin-top: 2.5rem;
    padding: var(--story-pad) 0 3.5rem;
  }

  .historia-intro__story-route {
    display: none;
  }

  .historia-intro__story .historia-intro__text {
    max-width: 42rem;
    padding: 0;
  }

  .historia-story-label {
    margin-bottom: 2rem;
  }
}

@media (max-width: 720px) {
  .historia-intro__story {
    margin-top: 2rem;
    padding: 2.25rem 0 3rem;
  }

  .historia-intro__story .historia-intro__text p:first-of-type {
    font-size: clamp(1.65rem, 8vw, 2.2rem);
  }

  .historia-intro__story .historia-intro__text p {
    font-size: .9rem;
    line-height: 1.68;
  }

  .historia-intro__story .historia-intro__text p + p {
    margin-top: 1.75rem;
    padding-top: 1.75rem;
  }
}

/* Final connector calibration: the decorative route resolves beside the
   opening editorial paragraph instead of tracking the full copy height. */
@media (min-width: 1041px) {
  .historia-intro__story-route {
    align-self: start;
    height: clamp(17rem, 20vw, 21rem);
    min-height: 0;
  }

  .historia-intro__story-route::before {
    top: calc(var(--story-pad) * -1);
    right: calc(var(--story-gap) * -1);
    bottom: 1.75rem;
    left: calc(100% - 6rem);
    height: auto;
  }

  .historia-intro__story-route span {
    top: auto;
    right: calc(var(--story-gap) * -1 - .28rem);
    bottom: 1.47rem;
  }

  .historia-intro__story .historia-intro__text p:first-of-type {
    font-size: clamp(1.65rem, 2.15vw, 2.35rem);
    line-height: 1.28;
  }
}

@media (min-width: 1041px) {
  .historia-intro__story {
    --story-pad: clamp(2.75rem, 4vw, 4.5rem);
    margin-top: clamp(1.75rem, 3vw, 3rem);
  }
}