@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:wght@400;500;600&display=swap');


:root {

  --marsh-dark: #06120f;
  --marsh: #0d2922;
  --marsh-light: #23483b;
  --moss: #557765;

  --water: #102f2e;
  --water-light: #32645c;

  --paper: #d8cba8;
  --paper-light: #eee4c9;

  --gold: #a58a50;
  --gold-light: #d5b96e;

  --cream: #eee7d3;

}


/* =========================
   BASIC
========================= */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--marsh-dark);
  color: var(--cream);

  font-family: "Cormorant Garamond", serif;

  font-size: 19px;
  line-height: 1.7;

  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}


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

.site-header {

  position: fixed;

  z-index: 1000;

  top: 0;
  left: 0;

  width: 100%;

  display: flex;

  align-items: center;
  justify-content: space-between;

  padding: 18px 5%;

  background: rgba(6,18,15,.94);

  border-bottom:
    1px solid rgba(213,185,110,.3);

  backdrop-filter: blur(12px);
}

.brand {

  display: flex;

  flex-direction: column;

  line-height: 1;
}

.brand-name {

  color: var(--gold-light);

  font-family: "Cinzel", serif;

  font-size: 1.2rem;

  letter-spacing: .3em;
}

.brand-subtitle {

  color: var(--moss);

  font-family: "Cinzel", serif;

  font-size: .5rem;

  letter-spacing: .2em;

  margin-top: 7px;
}

.nav {

  display: flex;

  gap: 28px;
}

.nav a {

  color: var(--paper);

  font-family: "Cinzel", serif;

  font-size: .62rem;

  letter-spacing: .12em;

  transition: .3s;
}

.nav a:hover {

  color: var(--gold-light);

  text-shadow:
    0 0 15px rgba(213,185,110,.45);
}


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

.marsh-hero {

  position: relative;

  min-height: 100vh;

  display: flex;

  align-items: center;
  justify-content: center;

  text-align: center;

  overflow: hidden;

  background-image:
    linear-gradient(
      rgba(4,18,15,.35),
      rgba(4,18,15,.88)
    ),
    url("https://i.ibb.co/nsx88y25/2-DADBBBE-0-DD5-4-DE5-839-A-5-F2-CFACE71-EE.png");

  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-overlay {

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at center,
      rgba(67,110,93,.3),
      transparent 55%
    );
}

.hero-content {

  position: relative;

  z-index: 2;

  max-width: 950px;

  padding:
    150px 25px 100px;
}

.marsh-symbol {

  font-size: 4rem;

  margin-bottom: 20px;

  filter:
    drop-shadow(
      0 0 20px
      rgba(213,185,110,.3)
    );
}

.eyebrow {

  color: var(--gold-light);

  font-family: "Cinzel", serif;

  font-size: .65rem;

  letter-spacing: .3em;
}

.hero-content h1 {

  color: var(--paper-light);

  font-family: "Cinzel", serif;

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

  font-weight: 500;

  letter-spacing: .12em;

  line-height: .98;

  margin-top: 20px;

  text-shadow:
    0 5px 30px rgba(0,0,0,.8),
    0 0 35px rgba(213,185,110,.12);
}

.gold-rule {

  color: var(--gold-light);

  margin: 27px auto;

  letter-spacing: .4em;
}

.motto {

  color: var(--paper);

  font-size: 1.35rem;

  font-style: italic;
}

.location {

  display: block;

  color: var(--moss);

  font-family: "Cinzel", serif;

  font-size: .55rem;

  letter-spacing: .2em;

  margin-top: 28px;
}

.scroll-hint {

  position: absolute;

  bottom: 25px;

  left: 0;

  width: 100%;

  color:
    rgba(234,219,185,.55);

  font-family: "Cinzel", serif;

  font-size: .55rem;

  letter-spacing: .2em;
}


/* =========================
   PARCHMENT
========================= */

.paper-section {

  padding: 110px 6%;

  background:

    radial-gradient(
      circle at 15% 15%,
      rgba(255,255,255,.12),
      transparent 25%
    ),

    radial-gradient(
      circle at 85% 80%,
      rgba(40,70,60,.08),
      transparent 30%
    ),

    var(--paper);

  color: #493c2a;
}

.section-frame {

  max-width: 1000px;

  margin: auto;

  padding: 60px;

  border:
    1px solid rgba(73,60,42,.3);

  box-shadow:
    inset 0 0 70px rgba(40,60,45,.06),
    0 20px 60px rgba(0,0,0,.13);
}

.paper-section h2 {

  color: #211a12;

  font-family: "Cinzel", serif;

  font-size:
    clamp(2rem,5vw,3.6rem);

  font-weight: 500;

  line-height: 1.15;
}

.paper-section .lead {

  font-size: 1.35rem;
}

.paper-section p {

  margin-bottom: 20px;
}

.dark {

  color: #6f6849;
}

.dark-rule {

  color: #8e7843;
}

.emphasis {

  color: #2a2115;

  font-family: "Cinzel", serif;

  font-size: 1.5rem;
}


/* =========================
   DARK LORE
========================= */

.dark-lore {

  padding: 115px 6%;

  background:

    radial-gradient(
      circle at center,
      rgba(44,91,74,.32),
      transparent 55%
    ),

    var(--marsh-dark);
}

.lore-container {

  max-width: 1050px;

  margin: auto;

  text-align: center;
}

.lore-container h2 {

  color: var(--paper-light);

  font-family: "Cinzel", serif;

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

  font-weight: 500;

  margin-top: 15px;
}

.lore-container > p:not(.eyebrow) {

  max-width: 800px;

  margin:
    0 auto 20px;

  color:
    rgba(238,228,205,.75);
}


/* =========================
   MIST
========================= */

.mist-grid {

  display: grid;

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

  gap: 18px;

  margin: 50px 0;
}

.mist-grid div {

  padding: 28px 20px;

  background:
    rgba(35,72,59,.2);

  border:
    1px solid rgba(165,138,80,.3);

  transition: .3s;
}

.mist-grid div:hover {

  transform: translateY(-6px);

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

.mist-grid span {

  color: var(--gold-light);

  font-family: "Cinzel", serif;

  font-size: .8rem;
}

.mist-grid h3 {

  color: var(--paper);

  font-family: "Cinzel", serif;

  font-size: .95rem;

  margin: 10px 0;
}

.mist-grid p {

  color:
    rgba(238,228,205,.62);

  font-size: .95rem;
}

.lore-container blockquote {

  color: var(--gold-light);

  font-style: italic;

  font-size: 1.3rem;

  margin-top: 35px;
}


/* =========================
   BLACKWATER
========================= */

.blackwater {

  min-height: 650px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 100px 6%;

  text-align: center;

  background:

    linear-gradient(
      rgba(4,15,14,.78),
      rgba(3,10,9,.96)
    ),

    url("https://i.ibb.co/nsx88y25/2-DADBBBE-0-DD5-4-DE5-839-A-5-F2-CFACE71-EE.png")
    center / cover no-repeat;
}

.blackwater-content {

  max-width: 800px;
}

.blackwater h2 {

  color: var(--paper-light);

  font-family: "Cinzel", serif;

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

  font-weight: 500;
}

.blackwater-content > p:not(.eyebrow):not(.mystery) {

  color:
    rgba(238,228,205,.72);

  margin-bottom: 20px;
}

.water-warning {

  max-width: 650px;

  margin: 40px auto;

  padding: 25px;

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

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

.water-warning span {

  color: var(--gold-light);

  font-size: 2rem;
}

.water-warning p {

  color: var(--paper);

  margin-top: 8px;
}

.mystery {

  color: var(--gold-light);

  font-style: italic;
}


/* =========================
   SECTION HEADING
========================= */

.section-heading {

  max-width: 850px;

  margin:
    0 auto 50px;

  text-align: center;
}


/* =========================
   PLANTS
========================= */

.plant-grid {

  max-width: 1150px;

  margin: auto;

  display: grid;

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

  gap: 20px;
}

.plant-card {

  min-height: 250px;

  padding: 32px 25px;

  border:
    1px solid rgba(73,60,42,.25);

  background:
    rgba(73,60,42,.055);

  transition: .3s;
}

.plant-card:hover {

  transform: translateY(-6px);

  border-color:
    var(--gold);

  background:
    rgba(35,72,59,.08);
}

.plant-card span {

  font-size: 2rem;
}

.plant-card h3 {

  color: #2a2115;

  font-family: "Cinzel", serif;

  font-size: 1rem;

  margin: 12px 0;
}

.plant-card p {

  color: #6b5b42;

  font-size: .98rem;
}


/* =========================
   MOONLILY
========================= */

.moonlily {

  min-height: 650px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 110px 6%;

  text-align: center;

  background:

    linear-gradient(
      rgba(6,23,20,.66),
      rgba(4,14,13,.95)
    ),

    url("https://i.ibb.co/nsx88y25/2-DADBBBE-0-DD5-4-DE5-839-A-5-F2-CFACE71-EE.png")
    center / cover no-repeat;
}

.moonlily-content {

  max-width: 800px;
}

.moon-icon {

  display: block;

  font-size: 3rem;

  margin-bottom: 15px;
}

.moonlily h2 {

  color: var(--paper-light);

  font-family: "Cinzel", serif;

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

  font-weight: 500;
}

.moonlily-content > p:not(.eyebrow) {

  color:
    rgba(238,228,205,.72);

  margin-bottom: 20px;
}

.moonlily-warning {

  margin-top: 40px;

  padding: 25px;

  border:
    1px solid rgba(165,138,80,.4);

  background:
    rgba(6,18,15,.5);
}

.moonlily-warning strong {

  color: var(--gold-light);

  font-family: "Cinzel", serif;

  font-size: .8rem;

  letter-spacing: .15em;
}

.moonlily-warning p {

  color: var(--paper);

  margin-top: 10px;
}


/* =========================
   PEOPLE
========================= */

.people-grid {

  display: grid;

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

  gap: 20px;

  margin-top: 50px;
}

.people-card {

  padding: 35px 25px;

  background:
    rgba(35,72,59,.18);

  border:
    1px solid rgba(165,138,80,.28);

  transition: .3s;
}

.people-card:hover {

  transform: translateY(-6px);

  background:
    rgba(35,72,59,.32);

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

.people-card > span {

  font-size: 2.2rem;
}

.people-card h3 {

  color: var(--paper);

  font-family: "Cinzel", serif;

  font-size: 1rem;

  margin: 12px 0;
}

.people-card p {

  color:
    rgba(238,228,205,.65);

  font-size: 1rem;
}


/* =========================
   VILLAGES
========================= */

.village-features {

  display: grid;

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

  gap: 20px;

  margin: 45px 0;
}

.village-features > div {

  text-align: center;

  padding: 25px;

  border-top:
    1px solid rgba(73,60,42,.25);
}

.village-features span {

  font-size: 2rem;
}

.village-features h3 {

  color: #34291b;

  font-family: "Cinzel", serif;

  margin: 10px 0;
}


/* =========================
   CREATURES
========================= */

.creatures {

  padding: 125px 6%;

  text-align: center;

  background:

    radial-gradient(
      circle at center,
      rgba(35,72,59,.35),
      transparent 55%
    ),

    var(--marsh-dark);
}

.creatures-content {

  max-width: 1100px;

  margin: auto;
}

.creatures h2 {

  color: var(--paper-light);

  font-family: "Cinzel", serif;

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

  font-weight: 500;
}

.creature-grid {

  display: grid;

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

  gap: 20px;

  margin-top: 50px;
}

.creature-card {

  padding: 35px 25px;

  background:
    rgba(35,72,59,.18);

  border:
    1px solid rgba(165,138,80,.3);

  transition: .3s;
}

.creature-card:hover {

  transform: translateY(-6px);

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

.creature-card span {

  font-size: 2.3rem;
}

.creature-card h3 {

  color: var(--paper);

  font-family: "Cinzel", serif;

  font-size: 1rem;

  margin: 12px 0;
}

.creature-card p {

  color:
    rgba(238,228,205,.65);

  font-size: .98rem;
}

.creature-ending {

  color: var(--gold-light);

  font-style: italic;

  margin-top: 45px;
}


/* =========================
   SUNKEN RUINS
========================= */

.sunken-ruins {

  min-height: 650px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 110px 6%;

  text-align: center;

  background:

    linear-gradient(
      rgba(4,20,18,.76),
      rgba(3,11,10,.97)
    ),

    url("https://i.ibb.co/nsx88y25/2-DADBBBE-0-DD5-4-DE5-839-A-5-F2-CFACE71-EE.png")
    center / cover no-repeat;
}

.ruins-content {

  max-width: 850px;
}

.sunken-ruins h2 {

  color: var(--paper-light);

  font-family: "Cinzel", serif;

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

  font-weight: 500;
}

.ruins-content > p:not(.eyebrow) {

  color:
    rgba(238,228,205,.72);

  margin-bottom: 20px;
}

.ruin-box {

  margin-top: 45px;

  padding: 30px;

  border:
    1px solid rgba(165,138,80,.4);

  background:
    rgba(6,18,15,.55);
}

.ruin-box > span {

  color: var(--gold-light);

  font-family: "Cinzel", serif;

  font-size: .65rem;

  letter-spacing: .2em;
}

.ruin-box div {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 30px;

  margin-top: 20px;
}

.ruin-box strong {

  color: var(--paper);

  font-family: "Cinzel", serif;

  font-size: .7rem;
}


/* =========================
   VEYLORA
========================= */

.theories {

  display: grid;

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

  gap: 20px;

  margin: 45px 0;
}

.theories > div {

  padding: 30px 20px;

  border:
    1px solid rgba(73,60,42,.22);
}

.theories span {

  color: #8e7843;

  font-family: "Cinzel", serif;
}

.theories h3 {

  color: #34291b;

  font-family: "Cinzel", serif;

  margin: 10px 0;
}

.theories p {

  font-size: .98rem;
}


/* =========================
   MAGIC
========================= */

.marsh-magic {

  padding: 130px 6%;

  text-align: center;

  background:

    radial-gradient(
      circle at center,
      rgba(42,95,78,.32),
      transparent 55%
    ),

    #071713;
}

.magic-content {

  max-width: 850px;

  margin: auto;
}

.marsh-magic h2 {

  color: var(--paper-light);

  font-family: "Cinzel", serif;

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

  font-weight: 500;
}

.magic-content > p:not(.eyebrow):not(.mystery) {

  color:
    rgba(238,228,205,.72);

  margin-bottom: 20px;
}

.magic-list {

  display: grid;

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

  gap: 12px;

  margin: 40px 0;
}

.magic-list div {

  padding: 15px;

  border:
    1px solid rgba(165,138,80,.25);

  color: var(--gold-light);

  font-family: "Cinzel", serif;

  font-size: .8rem;
}

.magic-content .mystery {

  color: var(--gold-light);

  font-style: italic;
}


/* =========================
   HUNTERS
========================= */

.hunters {

  padding: 130px 6%;

  text-align: center;

  background: var(--marsh-dark);
}

.hunters-content {

  max-width: 800px;

  margin: auto;
}

.hunters h2 {

  color: var(--paper-light);

  font-family: "Cinzel", serif;

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

  font-weight: 500;
}

.hunters-content > p:not(.eyebrow):not(.final-warning) {

  color:
    rgba(238,228,205,.72);

  margin-bottom: 20px;
}

.hunter-warning {

  display: flex;

  align-items: center;

  gap: 20px;

  margin: 40px auto;

  padding: 25px;

  border:
    1px solid rgba(165,138,80,.35);

  background:
    rgba(165,138,80,.05);
}

.hunter-warning span {

  color: var(--gold-light);

  font-size: 2rem;
}

.hunter-warning p {

  color: var(--paper);

  margin: 0;
}

.final-warning {

  color: var(--gold-light);

  font-style: italic;
}


/* =========================
   DEEP MARSH
========================= */

.deep-marsh {

  min-height: 700px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 120px 6%;

  text-align: center;

  background:

    linear-gradient(
      rgba(3,14,12,.75),
      rgba(2,8,7,.97)
    ),

    url("https://i.ibb.co/nsx88y25/2-DADBBBE-0-DD5-4-DE5-839-A-5-F2-CFACE71-EE.png")
    center / cover no-repeat;
}

.deep-content {

  max-width: 850px;
}

.deep-marsh h2 {

  color: var(--paper-light);

  font-family: "Cinzel", serif;

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

  font-weight: 500;
}

.deep-content > p:not(.eyebrow) {

  color:
    rgba(238,228,205,.72);

  margin-bottom: 20px;
}

.deep-facts {

  display: grid;

  gap: 12px;

  margin: 45px 0;
}

.deep-facts div {

  display: flex;

  justify-content: space-between;

  padding: 15px 20px;

  border-bottom:
    1px solid rgba(165,138,80,.2);
}

.deep-facts strong {

  color: var(--gold-light);

  font-family: "Cinzel", serif;

  font-size: .65rem;
}

.deep-facts span {

  color: var(--paper);
}


/* =========================
   CULTURE
========================= */

.values {

  display: flex;

  justify-content: center;

  flex-wrap: wrap;

  gap: 12px;

  margin: 40px 0;
}

.values span {

  padding: 10px 18px;

  border:
    1px solid rgba(73,60,42,.25);

  color: #6f6045;

  font-family: "Cinzel", serif;

  font-size: .65rem;

  letter-spacing: .1em;
}


/* =========================
   RULES
========================= */

.marsh-rules {

  padding: 130px 6%;

  text-align: center;

  background:

    radial-gradient(
      circle at center,
      rgba(35,72,59,.3),
      transparent 55%
    ),

    var(--marsh-dark);
}

.rules-content {

  max-width: 800px;

  margin: auto;
}

.marsh-rules h2 {

  color: var(--paper-light);

  font-family: "Cinzel", serif;

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

  font-weight: 500;
}

.rules {

  max-width: 680px;

  margin: 45px auto;
}

.rules p {

  padding: 16px;

  border-bottom:
    1px solid rgba(165,138,80,.2);

  color:
    rgba(238,228,205,.75);

  font-family: "Cinzel", serif;

  font-size: .8rem;

  letter-spacing: .04em;
}

.silence-warning {

  margin-top: 50px;

  padding: 35px;

  border:
    1px solid rgba(165,138,80,.4);

  background:
    rgba(165,138,80,.05);
}

.silence-warning span {

  display: block;

  color: var(--moss);

  font-family: "Cinzel", serif;

  font-size: .55rem;

  letter-spacing: .25em;

  margin-bottom: 15px;
}

.silence-warning strong {

  display: block;

  color: var(--gold-light);

  font-family: "Cinzel", serif;

  font-size: 1.3rem;

  font-weight: 500;
}

.silence-warning p {

  color:
    rgba(238,228,205,.65);

  margin-top: 10px;
}


/* =========================
   ENDING
========================= */

.marsh-ending {

  min-height: 650px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 100px 6%;

  text-align: center;

  background:

    radial-gradient(
      circle at center,
      rgba(52,96,79,.3),
      transparent 45%
    ),

    #040b09;
}

.ending-content {

  max-width: 850px;
}

.ending-content > p {

  color:
    rgba(238,228,205,.65);
}

.ending-content h2 {

  color: var(--paper-light);

  font-family: "Cinzel", serif;

  font-size:
    clamp(2rem,5vw,3.5rem);

  font-weight: 500;

  margin: 20px 0;
}

.ending-content h3 {

  color: var(--gold-light);

  font-family: "Cinzel", serif;

  font-size: 1.2rem;

  font-weight: 500;
}

.final-symbol {

  font-size: 2.5rem;

  margin-bottom: 20px;
}


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

footer {

  padding: 70px 20px;

  text-align: center;

  background: #030806;

  border-top:
    1px solid rgba(165,138,80,.25);
}

footer > div {

  color: var(--gold);

  margin-bottom: 15px;
}

footer h2 {

  color: var(--gold-light);

  font-family: "Cinzel", serif;

  font-weight: 500;

  letter-spacing: .3em;
}

footer p {

  color: var(--moss);

  font-family: "Cinzel", serif;

  font-size: .6rem;

  letter-spacing: .2em;

  margin: 8px 0 18px;
}

footer small {

  color:
    rgba(216,197,157,.45);

  font-family: "Cinzel", serif;

  font-size: .5rem;

  letter-spacing: .15em;
}


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

@media (max-width: 900px) {

  .nav {
    gap: 14px;
  }

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

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

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

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

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

  .village-features {
    grid-template-columns: 1fr;
  }

}


/* =========================
   PHONE
========================= */

@media (max-width: 600px) {

  body {
    font-size: 17px;
  }

  .site-header {
    padding: 15px 20px;
  }

  .nav {
    display: none;
  }

  .hero-content h1 {
    font-size: 3rem;
  }

  .motto {
    font-size: 1.1rem;
  }

  .paper-section,
  .dark-lore,
  .blackwater,
  .moonlily,
  .creatures,
  .sunken-ruins,
  .marsh-magic,
  .hunters,
  .deep-marsh,
  .marsh-rules {
    padding: 80px 20px;
  }

  .section-frame {
    padding: 35px 22px;
  }

  .mist-grid,
  .plant-grid,
  .people-grid,
  .creature-grid {
    grid-template-columns: 1fr;
  }

  .magic-list {
    grid-template-columns: 1fr;
  }

  .values {
    flex-direction: column;
  }

  .values span {
    text-align: center;
  }

  .deep-facts div {
    flex-direction: column;
    gap: 5px;
  }

  .hunter-warning {
    flex-direction: column;
  }

}