:root {

  --night: #061812;

  --forest: #0b3528;

  --emerald: #12523e;

  --moss: #7e9c73;

  --gold: #d8b45e;

  --bright-gold: #f0d485;

  --cream: #f0e6ce;

  --paper: #e8dcc0;

  --paper-light: #efe5ca;

  --ink: #25332c;

}


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

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;

  overflow-x: hidden;

  color: var(--ink);

  background: var(--paper);

  font-family:
    "Montserrat",
    sans-serif;
}


body.locked {
  overflow: hidden;
}


img {
  display: block;

  width: 100%;
}


a {
  color: inherit;

  text-decoration: none;
}


figure,
blockquote {
  margin: 0;
}


.container {
  width:
    min(
      1180px,
      calc(100% - 50px)
    );

  margin: auto;
}


h1,
h2,
h3,
.script {
  font-family:
    "Cormorant Garamond",
    serif;
}


.script {
  font-style: italic;
}


/* ==================================================
   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: white;

  background:
    rgba(4,16,12,0.98);

  border-bottom:
    1px solid
    rgba(216,180,94,0.18);

  font-family:
    Arial,
    sans-serif;

  font-size: 0.72rem;
}


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


.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;
}


.demo-switcher-links a:hover,
.demo-switcher-links .current-demo {

  color: var(--night);

  background: var(--bright-gold);

  border-color: var(--bright-gold);
}


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

.fairy-header {

  position: fixed;

  top: 38px;

  left: 0;

  z-index: 1000;

  width: 100%;

  height: 88px;

  padding: 0 5vw;

  display: flex;

  align-items: center;

  justify-content: space-between;

  color: var(--cream);

  background:
    rgba(6,24,18,0.96);

  border-bottom:
    1px solid
    rgba(216,180,94,0.2);

  backdrop-filter:
    blur(15px);

  transition:
    height 0.35s ease;
}


.fairy-header.scrolled {
  height: 72px;
}


.fairy-logo {

  display: flex;

  align-items: center;

  gap: 14px;
}


.fairy-logo > span {

  width: 50px;

  height: 50px;

  display: grid;

  place-items: center;

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

  border-radius: 50%;

  color: var(--gold);

  font-family:
    "Cormorant Garamond",
    serif;
}


.fairy-logo strong,
.fairy-logo small {
  display: block;
}


.fairy-logo small {

  margin-top: 2px;

  color: var(--gold);

  font-size: 0.54rem;

  letter-spacing: 0.24em;
}


.fairy-header nav {

  display: flex;

  gap: 30px;
}


.fairy-header nav a {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.05rem;
}


.fairy-header nav .active {

  color: var(--bright-gold);
}


.fairy-menu {

  display: none;

  position: relative;

  z-index: 50;

  border: 0;

  color: var(--cream);

  background: transparent;

  font-size: 1.4rem;
}


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

.fairy-hero {

  position: relative;

  min-height: 870px;

  padding-top: 126px;

  overflow: hidden;

  display: grid;

  place-items: center;

  color: var(--cream);

  background: var(--night);
}


.fairy-forest,
.fairy-overlay,
.fairy-stars {

  position: absolute;

  inset: 0;
}


.fairy-forest {

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


.fairy-overlay {

  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(23,78,55,0.18),
      rgba(1,13,9,0.92)
    );
}


.fairy-stars {

  opacity: 0.35;

  background-image:
    radial-gradient(
      var(--bright-gold)
      0.8px,
      transparent 0.8px
    );

  background-size:
    70px 70px;
}


.fairy-glow {

  position: absolute;

  top: 17%;

  left: 50%;

  width: 600px;

  height: 600px;

  border-radius: 50%;

  transform:
    translateX(-50%);

  background:
    radial-gradient(
      circle,
      rgba(240,212,133,0.18),
      transparent 68%
    );
}


/* HERO CATS */

.fairy-cat {

  position: absolute;

  z-index: 6;

  margin: 0;

  overflow: hidden;

  border:
    7px solid
    rgba(216,180,94,0.4);

  border-radius: 50%;

  background: var(--forest);

  box-shadow:
    0 25px 60px
    rgba(0,0,0,0.36);
}


.fairy-cat img {

  width: 100%;

  height: 100%;

  object-fit: cover;
}


.fairy-cat figcaption {

  position: absolute;

  left: 50%;

  bottom: 16px;

  transform:
    translateX(-50%);

  padding: 7px 13px;

  border-radius: 100px;

  white-space: nowrap;

  color: var(--cream);

  background:
    rgba(6,24,18,0.82);

  font-family:
    "Cormorant Garamond",
    serif;

  font-weight: 600;
}


.fairy-juvia {

  top: 155px;

  right: 4%;

  width: 285px;

  height: 285px;
}


.fairy-juvia img {

  object-position:
    46% 35%;
}


.fairy-jiraiya {

  left: 4%;

  bottom: 70px;

  width: 330px;

  height: 330px;
}


.fairy-jiraiya img {

  object-position:
    center 22%;
}


/* HERO COPY */

.fairy-hero-content {

  position: relative;

  z-index: 8;

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

  text-align: center;
}


.chapter-label {

  color: var(--gold);

  font-size: 0.61rem;

  letter-spacing: 0.33em;
}


.fairy-hero-content .script {

  margin:
    15px 0 0;

  color: var(--bright-gold);

  font-size: 1.4rem;
}


.fairy-hero-content h1 {

  margin: 0;

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

  line-height: 0.72;
}


.fairy-hero-content h1 em {

  display: block;

  color: var(--bright-gold);

  font-weight: 500;
}


.hero-ornament {

  margin:
    34px 0 18px;

  color: var(--gold);
}


.fairy-subtitle {

  max-width: 590px;

  margin: auto;

  color:
    rgba(240,230,206,0.72);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.3rem;

  line-height: 1.7;
}


.fairy-actions {

  margin-top: 32px;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 12px;
}


.fairy-button {

  min-height: 50px;

  padding: 0 24px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

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

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.1rem;

  font-weight: 600;
}


.fairy-button.primary {

  color: var(--night);

  background: var(--bright-gold);
}


.fairy-button.secondary {

  color: var(--cream);

  background:
    rgba(6,24,18,0.35);

  backdrop-filter:
    blur(10px);
}


/* ==================================================
   WELCOME SCROLL
================================================== */

.welcome-scroll {

  padding: 125px 25px;

  background: var(--paper);
}


.scroll-card {

  position: relative;

  width:
    min(
      880px,
      100%
    );

  margin: auto;

  padding: 75px;

  border:
    1px solid
    rgba(74,80,58,0.34);

  text-align: center;

  background: var(--paper-light);

  box-shadow:
    inset 0 0 0 8px
    var(--paper-light),
    inset 0 0 0 9px
    rgba(74,80,58,0.2);
}


.scroll-corner {

  position: absolute;

  color: var(--gold);

  font-size: 1.8rem;
}


.corner-one {

  left: 18px;

  top: 14px;
}


.corner-two {

  right: 18px;

  top: 14px;

  transform: scaleX(-1);
}


.corner-three {

  left: 18px;

  bottom: 14px;

  transform: rotate(180deg);
}


.corner-four {

  right: 18px;

  bottom: 14px;

  transform:
    rotate(180deg)
    scaleX(-1);
}


.small-title {

  color: var(--emerald);

  font-size: 0.62rem;

  letter-spacing: 0.25em;
}


.scroll-card h2 {

  margin:
    15px 0 30px;

  color: var(--forest);

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

  line-height: 0.95;
}


.scroll-card h2 em {

  display: block;

  color: var(--moss);

  font-weight: 500;
}


.scroll-card > p:not(.small-title) {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.28rem;

  line-height: 1.75;
}


.scroll-card blockquote {

  margin-top: 35px;

  padding-top: 30px;

  border-top:
    1px solid
    rgba(74,80,58,0.25);

  color: var(--emerald);

  font-family:
    "Cormorant Garamond",
    serif;

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

  font-style: italic;

  line-height: 1.3;
}


/* ==================================================
   GUARDIANS
================================================== */

.guardians-section {

  padding: 125px 25px;

  color: var(--cream);

  background:
    radial-gradient(
      circle at 50% 35%,
      #174735,
      var(--night)
    );
}


.guardians-heading {

  width:
    min(
      850px,
      100%
    );

  margin:
    0 auto 75px;

  text-align: center;
}


.guardians-heading > span {

  color: var(--gold);

  font-size: 0.61rem;

  letter-spacing: 0.3em;
}


.guardians-heading .script {

  margin:
    14px 0 0;

  color: var(--bright-gold);

  font-size: 1.3rem;
}


.guardians-heading h2 {

  margin:
    8px 0 0;

  font-size:
    clamp(
      3.8rem,
      8vw,
      6.5rem
    );

  line-height: 0.92;
}


.guardians-heading h2 em {

  display: block;

  color: var(--bright-gold);

  font-weight: 500;
}


.guardian-grid {

  width:
    min(
      1080px,
      100%
    );

  margin: auto;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      1fr
    );

  gap: 40px;
}


.guardian-card {

  display: grid;

  grid-template-rows:
    570px auto;

  border:
    1px solid
    rgba(216,180,94,0.25);

  background:
    rgba(255,255,255,0.03);
}


.portrait-frame {

  position: relative;

  margin: 26px 26px 0;

  overflow: hidden;

  border:
    2px solid
    rgba(216,180,94,0.42);

  border-radius:
    50% 50% 10px 10px;
}


.portrait-ring {

  position: absolute;

  z-index: 5;

  inset: 8px;

  border:
    1px solid
    rgba(216,180,94,0.3);

  border-radius: inherit;

  pointer-events: none;
}


.portrait-frame img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transform:
    scale(1.035);
}


.king-card
.portrait-frame img {

  object-position:
    center 18%;
}


.queen-card
.portrait-frame img {

  object-position:
    47% 36%;
}


.guardian-copy {

  padding: 35px;
}


.guardian-copy > span {

  color: var(--gold);

  font-size: 0.59rem;

  letter-spacing: 0.24em;
}


.guardian-copy h3 {

  margin:
    7px 0 15px;

  color: var(--cream);

  font-size: 3.5rem;

  line-height: 0.9;
}


.guardian-copy p {

  color:
    rgba(240,230,206,0.65);

  line-height: 1.75;
}


.guardian-copy a {

  display: inline-block;

  margin-top: 10px;

  color: var(--bright-gold);

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.1rem;
}


.poly-seal {

  width: fit-content;

  margin:
    0 0 15px;

  padding:
    8px 13px;

  border:
    1px solid
    rgba(216,180,94,0.35);

  border-radius: 100px;

  color: var(--bright-gold);

  font-size: 0.62rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


/* ==================================================
   ROOM TO EXPLORE
================================================== */

.explore-section {

  padding: 125px 0;

  background: var(--paper);
}


.explore-heading {

  max-width: 850px;

  margin:
    0 auto 70px;

  text-align: center;
}


.explore-heading > span {

  color: var(--emerald);

  font-size: 0.61rem;

  letter-spacing: 0.3em;
}


.explore-heading .script {

  margin:
    13px 0 0;

  color: var(--gold);

  font-size: 1.28rem;
}


.explore-heading h2 {

  margin:
    5px 0 24px;

  color: var(--forest);

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

  line-height: 0.9;
}


.explore-heading h2 em {

  display: block;

  color: var(--moss);

  font-weight: 500;
}


.explore-heading > p:last-child {

  max-width: 680px;

  margin: auto;

  color: #686d5d;

  line-height: 1.8;
}


.explore-grid {

  display: grid;

  grid-template-columns:
    1.35fr 1fr;

  gap: 22px;
}


.explore-card {

  position: relative;

  min-height: 350px;

  overflow: hidden;

  border:
    1px solid
    rgba(74,80,58,0.22);
}


.explore-large {

  min-height: 720px;

  grid-row:
    span 2;
}


.explore-card img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition:
    transform 0.65s ease;
}


.explore-card:hover img {

  transform:
    scale(1.045);
}


.explore-shade {

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      transparent 40%,
      rgba(4,28,21,0.9)
    );
}


.explore-copy {

  position: absolute;

  z-index: 3;

  right: 28px;

  bottom: 28px;

  left: 28px;

  color: var(--cream);
}


.explore-copy > span {

  color: var(--gold);

  font-size: 0.59rem;

  letter-spacing: 0.18em;
}


.explore-copy h3 {

  margin:
    8px 0 8px;

  font-size: 2.2rem;
}


.explore-copy p {

  max-width: 460px;

  margin: 0;

  color:
    rgba(240,230,206,0.7);

  line-height: 1.65;
}


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

.story-section {

  position: relative;

  padding: 130px 0;

  overflow: hidden;

  color: var(--cream);
}


.story-forest,
.story-overlay {

  position: absolute;

  inset: 0;
}


.story-forest {

  background:
    url("forest-life.jpg")
    center / cover;
}


.story-overlay {

  background:
    rgba(3,23,17,0.86);
}


.story-layout {

  position: relative;

  z-index: 3;

  display: grid;

  grid-template-columns:
    0.8fr 1.2fr;

  align-items: center;

  gap: 90px;
}


.story-copy .script {

  margin:
    12px 0 0;

  color: var(--bright-gold);

  font-size: 1.25rem;
}


.story-copy h2 {

  margin:
    5px 0 30px;

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

  line-height: 0.9;
}


.story-copy h2 em {

  display: block;

  color: var(--bright-gold);

  font-weight: 500;
}


.story-copy > p:not(.script) {

  color:
    rgba(240,230,206,0.7);

  line-height: 1.8;
}


/* ORIGIN PHOTOS */

.origin-pair {

  position: relative;

  min-height: 680px;
}


.origin-cat {

  position: absolute;

  width: 54%;
}


.origin-frame {

  height: 540px;

  overflow: hidden;

  border:
    2px solid
    rgba(216,180,94,0.45);

  box-shadow:
    0 25px 60px
    rgba(0,0,0,0.28);
}


.origin-frame img {

  width: 100%;

  height: 100%;

  object-fit: cover;
}


.origin-endo {

  top: 0;

  left: 0;

  z-index: 2;

  transform:
    rotate(-3deg);
}


.origin-endo
.origin-frame {

  border-radius:
    45% 45% 10px 10px;
}


.origin-elle {

  right: 0;

  bottom: 0;

  z-index: 3;

  transform:
    rotate(3deg);
}


.origin-elle
.origin-frame {

  border-radius:
    45% 45% 10px 10px;
}


.origin-cat figcaption {

  position: absolute;

  bottom: 20px;

  padding:
    12px 16px;

  background:
    rgba(5,28,20,0.85);

  backdrop-filter:
    blur(10px);
}


.origin-endo figcaption {

  left: 18px;
}


.origin-elle figcaption {

  right: 18px;

  text-align: right;
}


.origin-cat figcaption span,
.origin-cat figcaption strong {

  display: block;
}


.origin-cat figcaption span {

  color: var(--gold);

  font-size: 0.53rem;

  letter-spacing: 0.15em;
}


.origin-cat figcaption strong {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.8rem;
}


.origin-seal {

  position: absolute;

  z-index: 8;

  left: 50%;

  top: 50%;

  width: 145px;

  height: 145px;

  transform:
    translate(-50%,-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border:
    6px solid var(--night);

  border-radius: 50%;

  color: var(--night);

  background: var(--bright-gold);

  text-align: center;

  box-shadow:
    0 18px 45px
    rgba(0,0,0,0.3);
}


.origin-seal span,
.origin-seal small {

  font-size: 0.5rem;

  letter-spacing: 0.12em;
}


.origin-seal strong {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 2.2rem;
}


/* ==================================================
   NURSERY
================================================== */

.nursery-section {

  padding: 125px 0;

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


.nursery-layout {

  display: grid;

  grid-template-columns:
    1fr 0.9fr;

  align-items: center;

  gap: 90px;
}


.nursery-visual {

  position: relative;
}


.nursery-arch {

  height: 650px;

  overflow: hidden;

  border:
    2px solid
    rgba(74,80,58,0.28);

  border-radius:
    50% 50% 10px 10px;
}


.nursery-arch img {

  width: 100%;

  height: 100%;

  object-fit: cover;
}


.nursery-seal {

  position: absolute;

  right: -25px;

  bottom: 45px;

  width: 140px;

  height: 140px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border:
    6px solid
    var(--paper-light);

  border-radius: 50%;

  color: var(--night);

  background: var(--bright-gold);

  text-align: center;
}


.nursery-seal span {

  font-size: 0.52rem;

  letter-spacing: 0.13em;
}


.nursery-seal strong {

  font-family:
    "Cormorant Garamond",
    serif;

  font-size: 1.5rem;
}


.nursery-copy .script {

  margin:
    13px 0 0;

  color: var(--gold);

  font-size: 1.25rem;
}


.nursery-copy h2 {

  margin:
    4px 0 28px;

  color: var(--forest);

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

  line-height: 0.9;
}


.nursery-copy h2 em {

  display: block;

  color: var(--moss);

  font-weight: 500;
}


.nursery-copy > p:not(.script) {

  color: #676b5b;

  line-height: 1.8;
}


.nursery-status {

  margin-top: 30px;

  padding: 18px;

  display: flex;

  align-items: center;

  gap: 14px;

  border:
    1px solid
    rgba(74,80,58,0.18);
}


.nursery-status > span {

  width: 10px;

  height: 10px;

  flex: 0 0 auto;

  border-radius: 50%;

  background: var(--gold);

  box-shadow:
    0 0 0 7px
    rgba(216,180,94,0.16);
}


.nursery-status strong,
.nursery-status small {

  display: block;
}


.nursery-status small {

  margin-top: 3px;

  color: #797968;
}


/* ==================================================
   JOURNEY
================================================== */

.journey-section {

  padding: 125px 0;

  color: var(--cream);

  background: var(--night);
}


.journey-heading {

  max-width: 850px;

  margin:
    0 auto 75px;

  text-align: center;
}


.journey-heading > span {

  color: var(--gold);

  font-size: 0.61rem;

  letter-spacing: 0.3em;
}


.journey-heading .script {

  margin:
    13px 0 0;

  color: var(--bright-gold);

  font-size: 1.25rem;
}


.journey-heading h2 {

  margin:
    6px 0 0;

  font-size:
    clamp(
      3.8rem,
      8vw,
      6.2rem
    );

  line-height: 0.9;
}


.journey-heading h2 em {

  display: block;

  color: var(--bright-gold);

  font-weight: 500;
}


.journey-grid {

  display: grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap: 20px;
}


.journey-card {

  position: relative;

  min-height: 300px;

  padding: 35px 28px;

  border:
    1px solid
    rgba(216,180,94,0.2);

  background:
    rgba(255,255,255,0.025);
}


.journey-number {

  position: absolute;

  top: 18px;

  right: 18px;

  color:
    rgba(240,230,206,0.3);

  font-size: 0.6rem;

  letter-spacing: 0.18em;
}


.journey-card > span {

  color: var(--gold);

  font-size: 1.7rem;
}


.journey-card h3 {

  margin:
    25px 0 12px;

  color: var(--cream);

  font-size: 2rem;
}


.journey-card p {

  color:
    rgba(240,230,206,0.62);

  line-height: 1.7;
}


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

.final-section {

  position: relative;

  min-height: 680px;

  display: grid;

  place-items: center;

  overflow: hidden;

  color: var(--cream);
}


.final-forest,
.final-overlay {

  position: absolute;

  inset: 0;
}


.final-forest {

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


.final-overlay {

  background:
    rgba(3,23,17,0.8);
}


.final-copy {

  position: relative;

  z-index: 3;

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

  text-align: center;
}


.final-copy > span {

  color: var(--gold);

  font-size: 0.62rem;

  letter-spacing: 0.3em;
}


.final-copy .script {

  margin:
    14px 0 0;

  color: var(--bright-gold);

  font-size: 1.3rem;
}


.final-copy h2 {

  margin:
    10px 0 35px;

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

  line-height: 0.9;
}


.final-copy h2 em {

  display: block;

  color: var(--bright-gold);

  font-weight: 500;
}


.final-actions {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 12px;
}


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

.fairy-footer {

  padding:
    70px 25px 30px;

  text-align: center;

  color:
    rgba(240,230,206,0.64);

  background: var(--night);
}


.footer-symbol {

  color: var(--gold);

  font-size: 2rem;
}


.fairy-footer h3 {

  margin:
    7px 0;

  color: var(--cream);

  font-size: 2.7rem;
}


.fairy-footer nav {

  margin:
    30px 0 45px;
}


.fairy-footer nav a {

  margin:
    0 12px;
}


.fairy-footer small a {

  color: var(--gold);
}


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

.reveal {

  opacity: 0;

  transform:
    translateY(35px);

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


.reveal.visible {

  opacity: 1;

  transform: none;
}


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

@media (max-width: 950px) {

  .fairy-header nav {

    position: fixed;

    top: 0;

    right: -100%;

    width:
      min(
        380px,
        88vw
      );

    height: 100svh;

    padding:
      120px 35px;

    flex-direction: column;

    background: var(--night);

    transition:
      right 0.3s ease;
  }


  .fairy-header nav.open {

    right: 0;
  }


  .fairy-menu {

    display: block;
  }


  .fairy-juvia {

    width: 225px;

    height: 225px;

    right: 2%;
  }


  .fairy-jiraiya {

    width: 260px;

    height: 260px;

    left: 2%;
  }


  .guardian-grid {

    grid-template-columns: 1fr;
  }


  .explore-grid {

    grid-template-columns: 1fr;
  }


  .explore-large {

    min-height: 520px;

    grid-row: auto;
  }


  .explore-card {

    min-height: 470px;
  }


  .story-layout,
  .nursery-layout {

    grid-template-columns: 1fr;
  }


  .story-copy {

    max-width: 780px;
  }


  .origin-pair {

    width:
      min(
        760px,
        100%
      );

    margin: auto;
  }


  .journey-grid {

    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }

}


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

@media (max-width: 650px) {

  .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;
  }


  .fairy-header {

    top: 46px;

    height: 74px;

    padding: 0 20px;
  }


  .fairy-logo > span {

    width: 42px;

    height: 42px;
  }


  .fairy-logo strong {

    font-size: 0.75rem;
  }


  .fairy-hero {

    min-height: 840px;
  }


  .fairy-hero-content {

    margin-top: -25px;
  }


  .fairy-hero-content h1 {

    font-size: 5.2rem;
  }


  .fairy-juvia {

    top: 135px;

    right: -25px;

    width: 155px;

    height: 155px;
  }


  .fairy-jiraiya {

    left: -25px;

    bottom: 45px;

    width: 185px;

    height: 185px;
  }


  .fairy-cat figcaption {

    display: none;
  }


  .welcome-scroll,
  .guardians-section,
  .explore-section,
  .story-section,
  .nursery-section,
  .journey-section {

    padding:
      80px 20px;
  }


  .scroll-card {

    padding:
      55px 28px;
  }


  .guardian-card {

    grid-template-rows:
      470px auto;
  }


  .portrait-frame {

    margin:
      18px 18px 0;
  }


  .explore-card,
  .explore-large {

    min-height: 430px;
  }


  .origin-pair {

    min-height: auto;

    display: flex;

    flex-direction: column;

    gap: 22px;
  }


  .origin-cat {

    position: relative;

    width: 88%;

    transform: none;
  }


  .origin-endo {

    align-self: flex-start;

    top: auto;

    left: auto;
  }


  .origin-elle {

    align-self: flex-end;

    right: auto;

    bottom: auto;
  }


  .origin-frame {

    height: 450px;
  }


  .origin-seal {

    top: 50%;

    width: 115px;

    height: 115px;
  }


  .nursery-arch {

    height: 500px;
  }


  .nursery-seal {

    right: 10px;

    width: 115px;

    height: 115px;
  }


  .journey-grid {

    grid-template-columns: 1fr;
  }


  .final-section {

    min-height: 600px;
  }

}