:root {
  --green: #143f32;
  --deep-green: #0e3429;
  --dark: #0a211b;

  --sage: #9caf88;
  --sage-light: #b7c7a4;

  --yellow: #e3c45f;
  --cream: #f4ecd9;

  --blue: #9dbfc5;
  --blue-light: #b4cdd0;

  --rust: #b56d45;

  --ink: #17231e;
  --muted: #646b67;
}


/* =========================
   RESET
========================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  overflow-x: hidden;

  background: var(--cream);

  color: var(--ink);

  font-family:
    "DM Sans",
    sans-serif;
}

img {
  display: block;

  width: 100%;
}

a {
  color: inherit;

  text-decoration: none;
}

h1,
h2,
h3 {
  font-family:
    "Playfair Display",
    serif;
}


/* =========================
   DEMO SWITCHER
========================= */

.demo-switcher {
  position: fixed;

  top: 0;
  left: 0;

  z-index: 99999;

  width: 100%;

  min-height: 38px;

  padding:
    6px 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 25px;

  color: #ffffff;

  background:
    rgba(10, 33, 27, 0.98);

  border-bottom:
    1px solid rgba(255, 255, 255, 0.12);

  font-family:
    Arial,
    sans-serif;

  font-size: 0.72rem;

  font-weight: 600;

  letter-spacing: 0.03em;
}

.demo-switcher > span {
  opacity: 0.65;
}

.demo-switcher-links {
  display: flex;

  gap: 7px;
}

.demo-switcher-links a {
  padding:
    5px 11px;

  border:
    1px solid rgba(255, 255, 255, 0.2);

  border-radius:
    100px;

  color: white;

  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.demo-switcher-links a:hover,
.demo-switcher-links .current-demo {
  color: var(--green);

  background: var(--yellow);

  border-color: var(--yellow);
}


/* =========================
   HEADER
========================= */

.editorial-header {
  position: absolute;

  top: 38px;
  left: 0;

  z-index: 900;

  width: 100%;

  height: 82px;

  padding:
    0 4vw;

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: var(--dark);
}

.editorial-logo {
  font-size: 1.2rem;

  font-weight: 800;

  letter-spacing:
    -0.05em;
}

.editorial-logo span {
  color: var(--rust);
}

.editorial-header nav {
  display: flex;

  gap: 28px;
}

.editorial-header nav a {
  font-size: 0.67rem;

  font-weight: 700;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}

.editorial-header nav a:hover,
.editorial-header nav .active {
  color: var(--rust);
}

.editorial-menu {
  display: none;

  position: relative;

  z-index: 40;

  border: 0;

  background: transparent;

  font-weight: 700;

  cursor: pointer;
}


/* =========================
   HERO
========================= */

.editorial-hero {
  position: relative;

  min-height: 830px;

  overflow: hidden;

  background:
    linear-gradient(
      110deg,
      #dedbbf 0%,
      #e6e1c8 52%,
      var(--sage) 52%,
      var(--sage) 100%
    );
}


/* =========================
   HERO COPY
========================= */

.hero-copy {
  position: absolute;

  z-index: 5;

  left: 6vw;

  top: 175px;

  width: 49%;
}

.hero-copy > p {
  color: var(--green);

  font-size: 0.63rem;

  font-weight: 700;

  letter-spacing: 0.26em;
}

.hero-copy h1 {
  margin:
    10px 0 20px;

  font-size:
    clamp(
      6rem,
      11vw,
      11rem
    );

  line-height: 0.66;

  letter-spacing:
    -0.075em;

  color: var(--green);
}

.hero-copy h1 span {
  display: block;

  color: var(--rust);
}

.hero-copy h2 {
  max-width: 480px;

  margin: 0;

  font-size: 1.65rem;

  line-height: 1.3;

  font-weight: 600;
}


/* =========================
   HERO YELLOW CIRCLE
========================= */

.giant-cat {
  position: absolute;

  z-index: 3;

  right: 0;

  bottom: 0;

  width: 54%;

  height: 100%;
}


/*
  The yellow circle is now the actual
  portrait container instead of sitting
  behind a rectangular image.
*/

.giant-circle {
  position: absolute;

  right: 5%;

  top: 15%;

  width:
    min(
      610px,
      47vw
    );

  aspect-ratio: 1;

  overflow: hidden;

  border-radius: 50%;

  background: var(--yellow);

  box-shadow:
    0 28px 70px rgba(20, 63, 50, 0.12);
}


/*
  Small inset prevents the cat image
  from completely covering the yellow.
*/

.hero-photo-frame {
  position: absolute;

  inset: 22px;

  overflow: hidden;

  border-radius: 50%;

  background:
    #d4c895;
}

.hero-photo-frame img {
  width: 100%;

  height: 100%;

  object-fit: cover;

  /*
    Tuned for current Jiraiya portrait.
  */

  object-position:
    center 40%;

  transform:
    scale(1.03);
}

.vertical-word {
  position: absolute;

  z-index: 6;

  right: 2.2%;

  top: 52%;

  transform:
    rotate(90deg);

  transform-origin: right;

  color:
    rgba(20, 63, 50, 0.48);

  font-size: 0.62rem;

  font-weight: 700;

  letter-spacing: 0.45em;
}


/* =========================
   HERO BANNER
========================= */

.hero-banner {
  height: 95px;

  display: flex;

  align-items: center;

  overflow: hidden;

  color: var(--cream);

  background: var(--green);

  border-top:
    5px solid var(--yellow);

  border-bottom:
    5px solid var(--yellow);
}

.banner-track {
  width: max-content;

  display: flex;

  gap: 55px;

  animation:
    marquee 28s linear infinite;
}

.banner-track span {
  flex:
    0 0 auto;

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.15em;
}

.banner-track span:nth-child(odd) {
  color: var(--yellow);
}

@keyframes marquee {

  from {
    transform:
      translateX(0);
  }

  to {
    transform:
      translateX(-35%);
  }

}


/* =========================
   INTRO
========================= */

.editorial-intro {
  padding:
    125px 7vw;

  display: grid;

  grid-template-columns:
    0.3fr 1fr;

  gap: 50px;

  background: var(--cream);
}

.intro-number {
  color:
    rgba(20, 63, 50, 0.12);

  font-family:
    "Playfair Display",
    serif;

  font-size: 9rem;

  line-height: 1;
}

.intro-copy {
  max-width: 830px;
}

.intro-copy > span,
.property-heading > span,
.kitten-copy > span,
.story-copy > span,
.titans-heading-copy > span {
  color: var(--rust);

  font-size: 0.62rem;

  font-weight: 700;

  letter-spacing: 0.22em;
}

.intro-copy h2,
.property-heading h2,
.kitten-copy h2,
.story-copy h2 {
  margin:
    15px 0 28px;

  font-size:
    clamp(
      3.7rem,
      7vw,
      6.5rem
    );

  line-height: 0.9;

  letter-spacing:
    -0.045em;

  color: var(--green);
}

.intro-copy h2 em,
.property-heading h2 em,
.kitten-copy h2 em,
.story-copy h2 em {
  display: block;

  color: var(--rust);

  font-weight: 600;
}

.intro-copy p {
  max-width: 720px;

  font-size: 1.1rem;

  line-height: 1.85;

  color: var(--muted);
}


/* =========================
   TITANS HEADING
========================= */

.titans-heading {
  padding:
    100px 6vw 75px;

  background:
    var(--yellow);
}

.titans-heading-copy {
  max-width: 950px;
}

.titans-heading-copy > span {
  color: var(--green);
}

.titans-heading-copy h2 {
  margin:
    15px 0 0;

  font-size:
    clamp(
      4rem,
      8vw,
      7.3rem
    );

  line-height:
    0.85;

  letter-spacing:
    -0.055em;

  color: var(--green);
}

.titans-heading-copy h2 strong {
  display: block;

  color: var(--rust);
}


/* =========================
   TITAN SHOWCASE
========================= */

.big-titans {
  display: grid;

  grid-template-columns:
    1fr 1fr;
}

.big-titan {
  position: relative;

  min-height: 760px;

  overflow: hidden;
}

.king-panel {
  color: var(--cream);

  background: var(--green);
}

.queen-panel {
  color: var(--dark);

  background: var(--blue);
}


/* =========================
   TITAN COPY
========================= */

.panel-text {
  position: relative;

  z-index: 5;

  padding:
    65px 50px 30px;
}

.panel-text > span {
  font-size: 0.6rem;

  font-weight: 700;

  letter-spacing: 0.23em;
}

.panel-text h2 {
  margin:
    10px 0 8px;

  font-size:
    clamp(
      4rem,
      7vw,
      7rem
    );

  line-height: 0.88;
}

.panel-text p {
  margin:
    0 0 15px;

  font-weight: 600;
}

.panel-text a {
  display: inline-block;

  margin-top: 15px;

  padding-bottom: 4px;

  border-bottom:
    1px solid currentColor;

  font-size: 0.8rem;

  font-weight: 700;
}

.poly-pill {
  width: fit-content;

  margin:
    18px 0 3px;

  padding:
    8px 13px;

  border:
    1px solid rgba(20, 63, 50, 0.25);

  border-radius:
    100px;

  color: var(--green);

  background:
    rgba(255, 255, 255, 0.28);

  font-size: 0.65rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;
}


/* =========================
   ARCH PHOTO AREA
========================= */

.titan-arch-wrap {
  position: absolute;

  right: 0;

  bottom: 0;

  left: 0;

  height: 545px;

  display: flex;

  justify-content: center;

  align-items: flex-end;
}

.titan-arch {
  position: relative;

  width:
    min(
      420px,
      78%
    );

  height: 520px;

  overflow: hidden;

  border-radius:
    50% 50% 0 0;

  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.17);
}

.king-panel .titan-arch {
  border:
    3px solid rgba(227, 196, 95, 0.75);

  background:
    var(--deep-green);
}

.queen-panel .titan-arch {
  border:
    3px solid rgba(20, 63, 50, 0.55);

  background:
    var(--blue-light);
}

.titan-arch-line {
  position: absolute;

  z-index: 4;

  inset: 9px;

  border-radius:
    50% 50% 0 0;

  pointer-events: none;
}

.king-panel .titan-arch-line {
  border:
    1px solid rgba(227, 196, 95, 0.48);
}

.queen-panel .titan-arch-line {
  border:
    1px solid rgba(20, 63, 50, 0.35);
}

.titan-arch img {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition:
    transform 0.4s ease;
}


/* JIRAIYA ARCH */

.king-panel
.titan-arch img {
  object-position:
    center 41%;

  transform:
    scale(1.04);
}


/* JUVIA ARCH */

.queen-panel
.titan-arch img {
  object-position:
    46% 39%;

  transform:
    scale(1.04);
}

.big-titan:hover
.titan-arch img {
  transform:
    scale(1.075);
}


/* =========================
   STATEMENT BANNER
========================= */

.statement-banner {
  min-height: 115px;

  padding: 25px;

  display: flex;

  align-items: center;

  justify-content: space-around;

  gap: 25px;

  text-align: center;

  color: var(--green);

  background: var(--yellow);

  font-family:
    "Playfair Display",
    serif;

  font-size: 1.1rem;
}

.statement-banner strong {
  font-size: 1.5rem;
}


/* =========================
   PROPERTY
========================= */

.property {
  padding:
    125px 5vw;

  background: #e7dec8;
}

.property-heading {
  max-width: 900px;

  margin-bottom: 70px;
}

.property-heading > p {
  max-width: 670px;

  margin:
    -5px 0 0;

  color: var(--muted);

  font-size: 1.03rem;

  line-height: 1.8;
}


/* =========================
   PROPERTY GRID
========================= */

.property-grid {
  display: grid;

  grid-template-columns:
    1.4fr 0.8fr;

  gap: 18px;
}

.property-grid figure {
  position: relative;

  height: 330px;

  margin: 0;

  overflow: hidden;
}

.property-grid .property-main {
  height: 680px;

  grid-row:
    span 2;
}

.property-grid img {
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.5s ease;
}

.property-grid figure:hover img {
  transform:
    scale(1.04);
}

.property-grid figcaption {
  position: absolute;

  left: 18px;

  bottom: 18px;

  padding:
    11px 15px;

  display: flex;

  align-items: center;

  gap: 10px;

  color: var(--cream);

  background: var(--green);
}

.property-grid figcaption span {
  color: var(--yellow);

  font-size: 0.58rem;

  font-weight: 700;
}

.property-grid figcaption strong {
  font-size: 0.64rem;

  font-weight: 700;

  letter-spacing: 0.16em;
}


/* =========================
   MINI BANNER
========================= */

.mini-banner {
  padding: 24px;

  text-align: center;

  color: var(--cream);

  background: var(--rust);
}

.mini-banner p {
  margin: 0;

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.14em;
}


/* =========================
   KITTENS
========================= */

.kittens {
  min-height: 740px;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  background: var(--sage);
}

.kitten-image {
  position: relative;

  min-height: 740px;
}

.kitten-image img {
  height: 100%;

  object-fit: cover;
}

.kitten-label {
  position: absolute;

  right: 0;

  top: 50px;

  padding:
    14px 25px;

  color: var(--green);

  background: var(--yellow);

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.16em;
}

.kitten-copy {
  padding:
    100px 8%;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.kitten-copy p {
  max-width: 600px;

  line-height: 1.8;

  color:
    rgba(10, 33, 27, 0.72);
}

.soon-box {
  width: fit-content;

  margin-top: 30px;

  padding:
    15px 20px;

  border:
    2px solid var(--green);

  font-size: 0.7rem;

  font-weight: 800;

  letter-spacing: 0.12em;
}


/* =========================
   STORY BANNER
========================= */

.story-banner {
  padding:
    40px 5vw;

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: var(--cream);

  background: var(--green);
}

.story-banner div {
  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.23em;
}

.story-banner strong {
  color: var(--yellow);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(
      2.5rem,
      6vw,
      5rem
    );
}


/* =========================
   STORY
========================= */

.editorial-story {
  min-height: 760px;

  display: grid;

  grid-template-columns:
    1.1fr 0.9fr;

  background: var(--cream);
}


/* =========================
   ENDO + ELLE
========================= */

.origin-photos {
  min-height: 760px;

  padding:
    55px;

  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 20px;

  align-items: center;

  background:
    var(--yellow);
}

.origin-photo {
  position: relative;

  height: 570px;

  margin: 0;

  overflow: hidden;
}

.origin-endo {
  transform:
    translateY(-28px);
}

.origin-elle {
  transform:
    translateY(28px);
}

.origin-photo img {
  width: 100%;

  height: 100%;

  object-fit: cover;
}

.origin-photo figcaption {
  position: absolute;

  left: 15px;

  bottom: 15px;

  padding:
    10px 14px;

  color: var(--cream);

  background: var(--green);

  font-size: 0.63rem;

  font-weight: 700;

  letter-spacing: 0.16em;
}


/* =========================
   STORY COPY
========================= */

.story-copy {
  padding:
    100px 9%;

  display: flex;

  flex-direction: column;

  justify-content: center;
}

.story-copy p {
  line-height: 1.8;

  color: var(--muted);
}

.story-copy a {
  width: fit-content;

  margin-top: 15px;

  padding-bottom: 5px;

  border-bottom:
    2px solid var(--rust);

  color: var(--green);

  font-weight: 700;
}


/* =========================
   QUOTE
========================= */

.giant-quote {
  padding:
    115px 6vw;

  text-align: center;

  background: var(--yellow);
}

.giant-quote p {
  margin: 0;

  color: var(--green);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(
      3rem,
      7vw,
      7rem
    );

  line-height: 0.95;
}

.giant-quote strong {
  color: var(--rust);
}


/* =========================
   FINAL CTA
========================= */

.editorial-final {
  position: relative;

  min-height: 700px;

  display: grid;

  place-items: center;

  overflow: hidden;

  color: var(--cream);
}

.final-photo,
.final-shade {
  position: absolute;

  inset: 0;
}

.final-photo {
  background:
    url("forest-hero.jpg")
    center / cover;
}

.final-shade {
  background:
    linear-gradient(
      rgba(9, 38, 29, 0.7),
      rgba(9, 38, 29, 0.88)
    );
}

.final-copy {
  position: relative;

  z-index: 4;

  width:
    min(
      820px,
      calc(100% - 40px)
    );

  text-align: center;
}

.final-copy > span {
  color: var(--yellow);

  font-size: 0.65rem;

  letter-spacing: 0.3em;
}

.final-copy h2 {
  margin:
    20px 0 40px;

  font-size:
    clamp(
      4rem,
      9vw,
      8rem
    );

  line-height: 0.83;
}

.final-copy h2 em {
  display: block;

  color: var(--yellow);
}

.final-copy div {
  display: flex;

  justify-content: center;

  gap: 12px;
}

.final-copy a {
  padding:
    15px 25px;

  border:
    1px solid var(--yellow);

  font-size: 0.7rem;

  font-weight: 700;

  letter-spacing: 0.12em;
}

.final-copy a:first-child {
  color: var(--green);

  background: var(--yellow);
}


/* =========================
   FOOTER
========================= */

.editorial-footer {
  padding:
    65px 5vw 30px;

  color: var(--cream);

  background: var(--dark);
}

.footer-name {
  margin-bottom: 35px;

  color: var(--yellow);

  font-family:
    "Playfair Display",
    serif;

  font-size:
    clamp(
      3rem,
      8vw,
      7rem
    );
}

.footer-nav {
  display: flex;

  flex-wrap: wrap;

  gap: 25px;
}

.footer-nav a {
  font-size: 0.72rem;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}

.credit {
  margin-top: 55px;

  padding-top: 22px;

  border-top:
    1px solid rgba(255, 255, 255, 0.12);

  color:
    rgba(255, 255, 255, 0.5);

  font-size: 0.7rem;
}

.credit a {
  color: var(--yellow);
}


/* =========================
   REVEAL
========================= */

.reveal {
  opacity: 0;

  transform:
    translateY(35px);

  transition:
    opacity 0.75s ease,
    transform 0.75s ease;
}

.reveal.visible {
  opacity: 1;

  transform: none;
}


/* =========================
   TABLET
========================= */

@media (max-width: 1000px) {

  .editorial-menu {
    display: block;
  }

  .editorial-header nav {
    position: fixed;

    z-index: 30;

    top: 0;

    right: -100%;

    width:
      min(
        360px,
        90vw
      );

    height: 100svh;

    padding:
      110px 35px;

    display: flex;

    flex-direction: column;

    color: var(--cream);

    background: var(--dark);

    transition:
      right 0.3s ease;
  }

  .editorial-header nav.open {
    right: 0;
  }


  /* HERO */

  .editorial-hero {
    min-height: 800px;

    background:
      linear-gradient(
        #dedbbf 0 58%,
        var(--sage) 58%
      );
  }

  .hero-copy {
    top: 130px;

    width: 78%;
  }

  .giant-cat {
    right: 0;

    width: 72%;

    height: 62%;
  }

  .giant-circle {
    top: auto;

    right: 2%;

    bottom: 25px;

    width:
      min(
        500px,
        62vw
      );
  }


  /* TITANS */

  .big-titans {
    grid-template-columns:
      1fr;
  }

  .big-titan {
    min-height: 780px;
  }

  .titan-arch {
    width:
      min(
        470px,
        75%
      );
  }


  /* PROPERTY */

  .property-grid {
    grid-template-columns:
      1fr;
  }

  .property-grid .property-main {
    height: 520px;

    grid-row: auto;
  }

  .property-grid figure {
    height: 420px;
  }


  /* KITTENS */

  .kittens {
    grid-template-columns:
      1fr;
  }


  /* STORY */

  .editorial-story {
    grid-template-columns:
      1fr;
  }

  .origin-photos {
    min-height: 650px;
  }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 650px) {

  /* SWITCHER */

  .demo-switcher {
    min-height: 46px;

    padding:
      6px 10px;
  }

  .demo-switcher > span {
    display: none;
  }

  .demo-switcher-links {
    width: 100%;

    justify-content: center;
  }

  .demo-switcher-links a {
    flex: 1;

    max-width: 110px;

    text-align: center;
  }


  /* HEADER */

  .editorial-header {
    top: 46px;

    height: 70px;

    padding:
      0 22px;
  }


  /* HERO */

  .editorial-hero {
    min-height: 790px;
  }

  .hero-copy {
    top: 135px;

    left: 25px;

    width:
      calc(100% - 50px);

    text-align: center;
  }

  .hero-copy > p {
    font-size: 0.57rem;
  }

  .hero-copy h1 {
    font-size: 5.2rem;
  }

  .hero-copy h2 {
    max-width: 350px;

    margin:
      0 auto;

    font-size: 1.1rem;
  }


  /* HERO CIRCLE */

  .giant-cat {
    right: 50%;

    bottom: 20px;

    width: 100%;

    height: 49%;

    transform:
      translateX(50%);
  }

  .giant-circle {
    top: auto;

    right: 50%;

    bottom: 5px;

    width: 350px;

    transform:
      translateX(50%);
  }

  .hero-photo-frame {
    inset: 14px;
  }

  .vertical-word {
    display: none;
  }


  /* INTRO */

  .editorial-intro {
    padding:
      80px 25px;

    grid-template-columns:
      1fr;
  }

  .intro-number {
    font-size: 5rem;
  }


  /* TITANS */

  .titans-heading {
    padding:
      80px 25px 65px;
  }

  .panel-text {
    padding:
      50px 28px 25px;
  }

  .big-titan {
    min-height: 700px;
  }

  .titan-arch-wrap {
    height: 470px;
  }

  .titan-arch {
    width:
      min(
        360px,
        calc(100% - 50px)
      );

    height: 455px;
  }


  /* STATEMENT */

  .statement-banner {
    flex-direction: column;

    gap: 12px;
  }


  /* PROPERTY */

  .property {
    padding:
      80px 25px;
  }


  /* KITTENS */

  .kitten-image {
    min-height: 520px;
  }

  .kitten-copy {
    padding:
      75px 28px;
  }


  /* STORY BANNER */

  .story-banner {
    flex-direction: column;

    gap: 15px;

    text-align: center;
  }


  /* ENDO + ELLE */

  .origin-photos {
    min-height: auto;

    padding:
      35px 22px 60px;

    grid-template-columns:
      1fr;
  }

  .origin-photo {
    height: 480px;
  }

  .origin-endo,
  .origin-elle {
    transform: none;
  }

  .story-copy {
    padding:
      75px 28px;
  }


  /* FINAL */

  .final-copy div {
    flex-direction: column;
  }

}


/* =========================
   SMALL MOBILE
========================= */

@media (max-width: 420px) {

  .hero-copy h1 {
    font-size: 4.6rem;
  }

  .giant-circle {
    width: 320px;
  }

  .big-titan {
    min-height: 650px;
  }

  .titan-arch-wrap {
    height: 425px;
  }

  .titan-arch {
    height: 410px;
  }

  .origin-photo {
    height: 420px;
  }

}