/* The work between: a restrained editorial composition around the existing artwork. */
.world-home {
  --world-cream: #f2ede4;
  --world-ink: #341d27;
  --world-line: #cbbeb4;
  --world-body: #5a4b49;
  background: #1e111b;
  color: #f7eee2;
}

.world-home .folio-header {
  padding-inline: 5.25vw;
  background: linear-gradient(180deg, #20131ec9 0%, #21131e56 65%, transparent 100%);
}
.world-home .folio-header .folio-brand {
  font: 400 20px/1.2 var(--serif);
  letter-spacing: .105em;
}
.world-home .folio-position { color: #f0ded0; }
.world-home .folio-contact { border-color: #efd2bd8c; }
.world-home .reading-progress { background: #c7845c; }
.is-scrolled .world-home .folio-header { background: #21131eef; }

.world-hero { background: #443029; }
.world-hero .hero-media { z-index: -2; overflow: hidden; }
.world-hero .hero-shade {
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, #21131b16 0%, transparent 30%, #29152212 46%, #22121bbd 78%, #1d101aef 100%);
}
.world-hero .hero-top {
  top: 112px;
  left: 5.25vw;
  right: 5.25vw;
  color: #3c2925;
  font: 600 11px/1.5 "DM Sans", sans-serif;
  letter-spacing: .155em;
}
.world-hero .hero-title {
  left: 5.25vw;
  bottom: 12.5%;
  max-width: 760px;
  color: #fff7ec;
}
.world-hero .hero-title > p {
  margin-bottom: 12px;
  color: #f2d4bd;
  font: 600 12px/1.5 "DM Sans", sans-serif;
  letter-spacing: .155em;
}
.world-hero .hero-title h1 {
  margin: 0;
  font: 400 clamp(86px, 10.4vw, 160px)/.84 var(--serif);
  letter-spacing: -.052em;
  text-shadow: 0 4px 35px #210d1b28;
}
.world-hero .hero-title h1 em {
  margin-left: clamp(32px, 5.2vw, 90px);
  color: #f2d5bf;
  font-weight: 350;
}
.world-hero .hero-intro {
  right: 5.25vw;
  bottom: 15%;
  width: min(25vw, 340px);
  max-width: none;
  padding-left: 19px;
  border-left: 1px solid #e9ba977d;
}
.world-hero .hero-intro > p {
  margin: 0 0 24px;
  color: #f8e9dd;
  font: 400 clamp(16px, 1.25vw, 19px)/1.6 "DM Sans", sans-serif;
}
.world-hero .hero-intro > a {
  gap: 10px;
  color: #f4d9c5;
  font: 400 clamp(18px, 1.55vw, 22px)/1.22 var(--serif);
  border-bottom-color: #e8ba9999;
  transition: color .25s, border-color .25s;
}
.world-hero .hero-intro > a:hover { color: #fff8ec; border-color: #fff8ec; }
.world-hero .hero-bottom {
  left: 5.25vw;
  right: 5.25vw;
  bottom: 23px;
  border-top-color: #f3d7c46b;
  color: #f5e6da;
  font-size: 11px;
  letter-spacing: .09em;
}

.world-heading { bottom: 17%; }
.world-heading h2 {
  max-width: 1110px;
  color: #fff6e9;
  font-size: clamp(70px, 8.4vw, 140px);
  line-height: .92;
  letter-spacing: -.04em;
}
.world-heading h2 em { color: #f1cfb0; }
.world-heading .world-kicker { color: #f7d9c2; font-size: 13px; letter-spacing: .14em; }
.world-panel { box-shadow: 0 18px 72px #10081327; }
.world-panel .panel-intro > .world-kicker { color: #854431; font-size: 13px; }
.world-panel .panel-intro h3 { max-width: 780px; letter-spacing: -.04em; }
.world-panel .world-link { transition: color .2s, border-color .2s; }
.world-panel .world-link:hover { color: #9a4b33; }
.world-home .world-rail > a[aria-current] > span:first-child { color: #e4a272; }

@media (max-width: 1100px) {
  .world-hero .hero-title { left: 5vw; bottom: 16%; }
  .world-hero .hero-title h1 { font-size: clamp(80px, 10vw, 120px); }
  .world-hero .hero-intro { right: 4vw; bottom: 16%; width: 26%; }
}

@media (max-width: 760px) {
  .world-home .world-hero {
    display: block;
    height: 100svh;
    min-height: 740px;
    padding: 0;
  }
  .world-home .hero-title,
  .world-home .hero-intro,
  .world-home .hero-bottom {
    position: absolute;
    margin: 0;
    transform: none;
  }
  .world-home .folio-header { padding-inline: 22px; }
  .world-home .folio-header .folio-brand { font-size: 18px; }
  .world-hero { min-height: 740px; }
  .world-hero .hero-media > img { object-position: 50% 37%; }
  .world-hero .hero-shade {
    background: linear-gradient(180deg, #21131b44 0%, transparent 25%, #27151b13 42%, #27151baa 67%, #1c0f19f5 100%);
  }
  .world-hero .hero-top {
    top: 96px;
    left: 22px;
    right: 22px;
    font-size: 10px;
    letter-spacing: .09em;
  }
  .world-hero .hero-title {
    left: 22px;
    right: 20px;
    bottom: clamp(270px, 32svh, 305px);
    max-width: none;
  }
  .world-hero .hero-title > p { font-size: 11px; margin-bottom: 13px; letter-spacing: .1em; }
  .world-hero .hero-title h1 {
    font-size: clamp(64px, 18vw, 103px);
    line-height: .88;
    letter-spacing: -.05em;
  }
  .world-hero .hero-title h1 em { margin-left: 4vw; }
  .world-hero .hero-intro {
    display: block;
    left: 22px;
    right: 22px;
    bottom: 148px;
    width: auto;
    max-width: 460px;
    padding-left: 14px;
  }
  .world-hero .hero-intro > p { font-size: 15px; line-height: 1.45; margin-bottom: 10px; max-width: 375px; }
  .world-hero .hero-intro > a { max-width: 375px; font-size: 18px; padding-bottom: 4px; min-height: 30px; }
  .world-hero .hero-bottom { left: 22px; right: 22px; bottom: 77px; padding-top: 8px; gap: 12px; font-size: 11px; }
  .world-hero .hero-bottom > span { display: none; }
  .world-hero .hero-bottom > a { margin: 0 auto 0 0; }
  .world-hero .hero-bottom > .world-motion { padding-left: 12px; border-left: 1px solid #f3d7c46b; }
  .world-heading { left: 24px; right: 24px; bottom: 21%; }
  .world-heading h2 { font-size: clamp(63px, 15.6vw, 110px); line-height: .95; }
  .world-heading .world-kicker { font-size: 11px; }
  .world-panel { margin-inline: 14px; padding: 42px 25px; }
  .world-panel .panel-intro > .world-kicker { font-size: 12px; }
  .world-panel .panel-intro h3 { font-size: clamp(39px, 10.4vw, 60px); }
  .world-home .folio-footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .world-home .world-mobile-nav { box-shadow: 0 -8px 24px #1c0f192a; }
}

@media (max-width: 370px) {
  .world-hero .hero-title { bottom: calc(clamp(270px, 32svh, 305px) + 30px); }
  .world-hero .hero-title h1 { font-size: 18vw; }
  .world-hero .hero-intro > p { font-size: 14px; }
  .world-hero .hero-bottom { font-size: 10px; }
}

@media (max-height: 750px) and (min-width: 761px) {
  .world-hero .hero-title { bottom: 13%; }
  .world-hero .hero-title h1 { font-size: clamp(80px, 9.3vw, 132px); }
  .world-hero .hero-intro { bottom: 15%; }
}