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


/* ═══════════════════════════════════════
   AETHERIA — THE WILDLANDS
   COMPLETE WILDLANDS CSS
═══════════════════════════════════════ */

:root {
  --green-dark:#07100a;
  --green:#122519;
  --green-light:#294936;
  --moss:#607957;

  --brown-dark:#24170e;
  --brown:#493322;
  --brown-light:#6b5036;

  --paper:#d9c69d;
  --paper-light:#eadbb9;

  --gold:#a98649;
  --gold-light:#d4b56c;

  --cream:#eee4cd;
}


/* ═══════════════════════════════════════
   RESET
═══════════════════════════════════════ */

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

html {
  scroll-behavior:smooth;
  width:100%;
}

body {
  width:100%;
  min-height:100vh;
  margin:0;

  background:var(--green-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:relative;
  z-index:100;

  width:100%;

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

  padding:38px 25px 32px;

  background:rgba(7,16,10,.97);

  border-bottom:1px solid rgba(212,181,108,.3);

  text-align:center;
}

.brand {
  display:flex;
  flex-direction:column;
  align-items:center;

  line-height:1;
}

.brand-name {
  color:var(--gold-light);

  font-family:"Cinzel",serif;
  font-size:1.5rem;
  font-weight:500;

  letter-spacing:.35em;
}

.brand-subtitle {
  color:var(--moss);

  font-family:"Cinzel",serif;
  font-size:.55rem;

  letter-spacing:.25em;

  margin-top:12px;
}


/* Hide the navigation on this lore page.
   The page uses its own sections. */

.nav {
  display:none;
}


/* ═══════════════════════════════════════
   HERO
═══════════════════════════════════════ */

.wild-hero {
  position:relative;

  width:100%;
  min-height:100vh;

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

  text-align:center;

  overflow:hidden;

  background:
    linear-gradient(
      rgba(5,15,8,.30),
      rgba(5,15,8,.65)
    ),
    url("https://images.unsplash.com/photo-1448375240586-882707db888b?auto=format&fit=crop&w=2000&q=85")
    center / cover no-repeat;
}


/* IMPORTANT:
   This closing bracket fixes the original CSS error. */

.wild-hero::before {
  content:"";

  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at center,
      rgba(67,110,70,.28),
      transparent 52%
    );

  pointer-events:none;
}

.hero-content {
  position:relative;
  z-index:2;

  width:100%;
  max-width:950px;

  margin:0 auto;

  padding:120px 25px 100px;

  text-align:center;
}

.wild-symbol {
  font-size:4rem;

  margin-bottom:20px;

  filter:
    drop-shadow(
      0 0 20px rgba(212,181,108,.25)
    );
}

.eyebrow {
  color:var(--gold-light);

  font-family:"Cinzel",serif;
  font-size:.65rem;

  letter-spacing:.3em;

  text-align:center;
}

.hero-content h1 {
  color:var(--paper-light);

  font-family:"Cinzel",serif;

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

  font-weight:500;

  letter-spacing:.12em;

  line-height:.95;

  margin-top:20px;

  text-align:center;

  text-shadow:
    0 5px 30px rgba(0,0,0,.8),
    0 0 35px rgba(212,181,108,.12);
}

.gold-rule {
  color:var(--gold-light);

  margin:27px auto;

  letter-spacing:.4em;

  text-align:center;
}

.motto {
  color:var(--paper);

  font-size:1.35rem;
  font-style:italic;

  text-align:center;
}

.location {
  display:block;

  color:var(--moss);

  font-family:"Cinzel",serif;
  font-size:.55rem;

  letter-spacing:.2em;

  margin-top:28px;

  text-align:center;
}

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

  text-align:center;
}


/* ═══════════════════════════════════════
   PAPER SECTIONS
═══════════════════════════════════════ */

.paper-section {
  width:100%;

  padding:110px 6%;

  background:
    radial-gradient(
      circle at 15% 15%,
      rgba(255,255,255,.12),
      transparent 25%
    ),
    radial-gradient(
      circle at 85% 80%,
      rgba(80,55,30,.08),
      transparent 30%
    ),
    var(--paper);

  color:var(--brown);

  text-align:center;
}

.section-frame {
  width:100%;
  max-width:1000px;

  margin:0 auto;

  padding:60px;

  border:1px solid rgba(73,51,34,.3);

  box-shadow:
    inset 0 0 70px rgba(73,51,34,.06),
    0 20px 60px rgba(0,0,0,.13);

  text-align:center;
}

.paper-section h2 {
  color:var(--brown-dark);

  font-family:"Cinzel",serif;

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

  font-weight:500;

  line-height:1.15;

  text-align:center;
}

.paper-section .lead {
  font-size:1.35rem;
}

.paper-section p {
  margin:0 auto 20px;

  max-width:800px;
}

.dark {
  color:#80653d;
}

.dark-rule {
  color:#927442;
}

.emphasis {
  color:var(--brown-dark);

  font-family:"Cinzel",serif;

  font-size:1.5rem;
}


/* ═══════════════════════════════════════
   DARK SECTIONS
═══════════════════════════════════════ */

.dark-lore,
.creature-section,
.magic-section,
.deep-wilds,
.wild-law {
  width:100%;

  padding:120px 6%;

  background:
    radial-gradient(
      circle at center,
      rgba(49,82,59,.35),
      transparent 55%
    ),
    var(--green-dark);

  text-align:center;
}

.lore-container,
.magic-content,
.deep-content,
.law-content {
  width:100%;
  max-width:1050px;

  margin:0 auto;

  text-align:center;
}

.lore-container h2,
.creature-section h2,
.magic-section h2,
.deep-wilds h2,
.wild-law h2 {
  color:var(--paper-light);

  font-family:"Cinzel",serif;

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

  font-weight:500;

  margin-top:15px;

  text-align:center;
}

.lore-container > p:not(.eyebrow),
.creature-section > div > p:not(.eyebrow),
.magic-content > p:not(.eyebrow),
.deep-content > p:not(.eyebrow),
.law-content > p:not(.eyebrow) {
  width:100%;
  max-width:800px;

  margin:0 auto 20px;

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

  text-align:center;
}


/* ═══════════════════════════════════════
   REGIONS
═══════════════════════════════════════ */

.region-grid {
  width:100%;
  max-width:1050px;

  display:grid;

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

  gap:20px;

  margin:50px auto 0;
}

.region-card {
  padding:35px 25px;

  background:rgba(41,73,54,.2);

  border:1px solid rgba(169,134,73,.3);

  transition:.3s;

  text-align:center;
}

.region-card:hover {
  transform:translateY(-6px);

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

  background:rgba(41,73,54,.35);
}

.region-card span {
  display:block;

  font-size:2.3rem;

  text-align:center;
}

.region-card h3 {
  color:var(--paper);

  font-family:"Cinzel",serif;
  font-size:1rem;

  margin:12px 0;

  text-align:center;
}

.region-card p {
  color:rgba(238,228,205,.65);

  font-size:1rem;

  text-align:center;
}


/* ═══════════════════════════════════════
   PEOPLE
═══════════════════════════════════════ */

.section-heading {
  width:100%;
  max-width:850px;

  margin:0 auto 50px;

  text-align:center;
}

.people-grid {
  width:100%;
  max-width:1150px;

  margin:0 auto;

  display:grid;

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

  gap:20px;

  text-align:center;
}

.people-card {
  padding:35px 25px;

  background:rgba(73,51,34,.055);

  border:1px solid rgba(73,51,34,.25);

  transition:.3s;

  text-align:center;
}

.people-card:hover {
  transform:translateY(-6px);

  border-color:var(--gold);

  background:rgba(41,73,54,.08);
}

.people-card span {
  display:block;

  font-size:2.2rem;
}

.people-card h3 {
  color:var(--brown-dark);

  font-family:"Cinzel",serif;
  font-size:1rem;

  margin:12px 0;
}

.people-card p {
  color:var(--brown-light);

  font-size:1rem;
}


/* ═══════════════════════════════════════
   CREATURES
═══════════════════════════════════════ */

.creature-grid {
  width:100%;
  max-width:1050px;

  display:grid;

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

  gap:20px;

  margin:50px auto 0;
}

.creature-grid > div {
  padding:30px 20px;

  border-top:1px solid rgba(169,134,73,.35);

  text-align:center;
}

.creature-grid span {
  display:block;

  font-size:2.2rem;
}

.creature-grid h3 {
  color:var(--paper);

  font-family:"Cinzel",serif;

  font-size:1rem;

  margin:10px 0;
}

.creature-grid p {
  color:rgba(238,228,205,.65);
}


/* ═══════════════════════════════════════
   RUINS
═══════════════════════════════════════ */

.ruin-grid {
  width:100%;
  max-width:900px;

  display:grid;

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

  gap:22px;

  margin:45px auto;
}

.ruin-card {
  padding:30px 20px;

  border:1px solid rgba(73,51,34,.25);

  text-align:center;
}

.ruin-card span {
  color:var(--gold);

  font-family:"Cinzel",serif;
}

.ruin-card h3 {
  color:var(--brown-dark);

  font-family:"Cinzel",serif;

  margin:10px 0;
}

.ruin-card p {
  font-size:1rem;
}


/* ═══════════════════════════════════════
   MAGIC
═══════════════════════════════════════ */

.magic-list {
  width:100%;
  max-width:800px;

  display:grid;

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

  gap:12px;

  margin:45px auto;
}

.magic-list div {
  padding:16px;

  border:1px solid rgba(169,134,73,.25);

  color:var(--gold-light);

  font-family:"Cinzel",serif;
  font-size:.8rem;

  text-align:center;
}

.mystery {
  color:var(--gold-light) !important;

  font-style:italic;
}


/* ═══════════════════════════════════════
   COLESIN
═══════════════════════════════════════ */

.colesin-section {
  width:100%;

  padding:140px 6%;

  text-align:center;

  background:
    radial-gradient(
      circle at center,
      rgba(35,91,57,.42),
      transparent 45%
    ),
    #07120b;
}

.colesin-content {
  width:100%;
  max-width:850px;

  margin:0 auto;

  text-align:center;
}

.panther-mark {
  font-size:4.5rem;

  margin-bottom:15px;

  filter:
    drop-shadow(
      0 0 25px rgba(50,180,100,.3)
    );
}

.colesin-content h2 {
  color:var(--paper-light);

  font-family:"Cinzel",serif;

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

  font-weight:500;

  letter-spacing:.08em;
}

.colesin-content h3 {
  color:var(--gold-light);

  font-family:"Cinzel",serif;

  font-size:1.15rem;

  letter-spacing:.3em;
}

.colesin-content > p:not(.eyebrow):not(.lead) {
  color:rgba(238,228,205,.72);

  max-width:800px;

  margin:0 auto 20px;
}

.colesin-content .lead {
  color:var(--paper);

  font-size:1.35rem;

  font-style:italic;
}

.colesin-quote {
  width:100%;
  max-width:650px;

  margin:45px auto;

  padding:25px;

  color:var(--gold-light);

  font-family:"Cinzel",serif;

  font-style:italic;

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

.title-box {
  width:100%;
  max-width:650px;

  margin:50px auto;

  padding:35px;

  border:1px solid rgba(169,134,73,.45);

  background:rgba(169,134,73,.06);

  text-align:center;
}

.title-box span {
  display:block;

  color:var(--moss);

  font-family:"Cinzel",serif;

  font-size:.6rem;

  letter-spacing:.2em;
}

.title-box strong {
  display:block;

  color:var(--gold-light);

  font-family:"Cinzel",serif;

  font-size:1.5rem;

  margin-top:10px;
}


/* ═══════════════════════════════════════
   DRAGON
═══════════════════════════════════════ */

.dragon-section {
  width:100%;
  min-height:650px;

  display:flex;

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

  padding:110px 6%;

  text-align:center;

  background:
    linear-gradient(
      rgba(5,15,8,.72),
      rgba(5,15,8,.96)
    ),
    url("https://i.ibb.co/kV9QTcy3/IMG-7287.png")
    center / cover fixed;
}

.dragon-content {
  width:100%;
  max-width:850px;

  margin:0 auto;

  text-align:center;
}

.dragon-content h2 {
  color:var(--paper-light);

  font-family:"Cinzel",serif;

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

  font-weight:500;
}

.dragon-content > p:not(.eyebrow) {
  color:rgba(238,228,205,.72);

  max-width:800px;

  margin:0 auto 20px;
}

.dragon-content .bond {
  color:var(--gold-light);

  font-family:"Cinzel",serif;

  font-size:1.3rem;
}

.dragon-warning {
  width:100%;
  max-width:650px;

  margin:40px auto;

  padding:25px;

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

  color:var(--gold-light);

  text-align:center;
}

.dragon-warning p {
  color:var(--paper);

  margin-top:8px;
}

.final-warning {
  color:var(--gold-light) !important;

  font-style:italic;
}


/* ═══════════════════════════════════════
   DEEP WILDS
═══════════════════════════════════════ */

.deep-wilds {
  width:100%;
  min-height:650px;

  display:flex;

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

  padding:110px 6%;

  text-align:center;

  background:
    linear-gradient(
      rgba(4,12,7,.75),
      rgba(4,12,7,.96)
    ),
    url("https://i.ibb.co/kV9QTcy3/IMG-7287.png")
    center / cover fixed;
}

.deep-content {
  width:100%;
  max-width:850px;

  margin:0 auto;

  text-align:center;
}

.deep-content blockquote {
  max-width:700px;

  margin:40px auto 0;

  color:var(--gold-light);

  font-size:1.35rem;

  font-style:italic;

  text-align:center;
}


/* ═══════════════════════════════════════
   HEART OF THE WILDS
═══════════════════════════════════════ */

.heart-section {
  width:100%;

  padding:140px 6%;

  text-align:center;

  background:
    radial-gradient(
      circle at center,
      rgba(67,110,70,.35),
      transparent 50%
    ),
    var(--green);
}

.heart-content {
  width:100%;
  max-width:800px;

  margin:0 auto;

  text-align:center;
}

.heart-symbol {
  display:block;

  font-size:4rem;

  margin-bottom:15px;
}

.heart-content h2 {
  color:var(--paper-light);

  font-family:"Cinzel",serif;

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

  font-weight:500;
}

.heart-content h3 {
  color:var(--gold-light);

  font-family:"Cinzel",serif;

  font-size:1.4rem;
}

.heart-content p:not(.eyebrow) {
  color:rgba(238,228,205,.72);

  max-width:750px;

  margin:0 auto 20px;
}


/* ═══════════════════════════════════════
   LAWS
═══════════════════════════════════════ */

.laws {
  width:100%;
  max-width:700px;

  margin:45px auto;

  text-align:center;
}

.laws p {
  padding:16px;

  border-bottom:1px solid rgba(169,134,73,.2);

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

  font-family:"Cinzel",serif;

  font-size:.8rem;

  text-align:center;
}

.final-law {
  width:100%;

  margin-top:50px;

  padding:35px;

  border:1px solid rgba(169,134,73,.4);

  background:rgba(169,134,73,.05);

  text-align:center;
}

.final-law span {
  display:block;

  color:var(--moss);

  font-family:"Cinzel",serif;

  font-size:.55rem;

  letter-spacing:.25em;

  margin-bottom:15px;
}

.final-law strong {
  display:block;

  color:var(--gold-light);

  font-family:"Cinzel",serif;

  font-size:1.25rem;

  font-weight:500;
}


/* ═══════════════════════════════════════
   ENDING
═══════════════════════════════════════ */

.wild-ending {
  width:100%;
  min-height:650px;

  display:flex;

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

  padding:100px 6%;

  text-align:center;

  background:
    linear-gradient(
      rgba(4,12,7,.72),
      rgba(4,12,7,.97)
    ),
    url("https://i.ibb.co/kV9QTcy3/IMG-7287.png")
    center / cover;
}

.ending-content {
  width:100%;
  max-width:850px;

  margin:0 auto;

  text-align:center;
}

.ending-content > p {
  color:rgba(238,228,205,.7);

  margin-bottom:12px;

  text-align:center;
}

.ending-content h2 {
  color:var(--paper-light);

  font-family:"Cinzel",serif;

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

  font-weight:500;

  margin:25px 0;

  text-align:center;
}

.ending-content h3 {
  color:var(--gold-light);

  font-family:"Cinzel",serif;

  font-size:1.25rem;

  font-weight:500;

  text-align:center;
}

.final-symbol {
  margin-top:35px;

  color:var(--gold-light);

  font-size:1.6rem;

  text-align:center;
}


/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */

footer {
  width:100%;

  padding:70px 20px;

  text-align:center;

  background:#040905;

  border-top:1px solid rgba(169,134,73,.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) {

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

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

  .section-frame {
    padding:50px 40px;
  }
}


/* ═══════════════════════════════════════
   MOBILE
═══════════════════════════════════════ */

@media (max-width:600px) {

  body {
    font-size:17px;
  }

  .site-header {
    padding:30px 20px 25px;
  }

  .brand-name {
    font-size:1.2rem;

    letter-spacing:.25em;
  }

  .brand-subtitle {
    font-size:.5rem;

    letter-spacing:.18em;
  }

  .wild-hero {
    min-height:750px;
  }

  .hero-content {
    width:100%;

    padding:80px 20px;

    text-align:center;
  }

  .wild-symbol {
    font-size:3rem;
  }

  .hero-content h1 {
    font-size:3.2rem;

    letter-spacing:.08em;

    text-align:center;
  }

  .motto {
    font-size:1.1rem;

    text-align:center;
  }

  .location {
    font-size:.5rem;

    text-align:center;
  }

  .paper-section,
  .dark-lore,
  .creature-section,
  .magic-section,
  .colesin-section,
  .deep-wilds,
  .heart-section,
  .wild-law {
    padding:80px 20px;
  }

  .section-frame {
    width:100%;

    padding:35px 22px;
  }

  .region-grid,
  .people-grid,
  .creature-grid,
  .magic-list,
  .ruin-grid {
    grid-template-columns:1fr;

    width:100%;
  }

  .region-card,
  .people-card,
  .ruin-card {
    width:100%;
  }

  .dragon-section,
  .wild-ending {
    min-height:600px;

    padding:80px 20px;
  }

  .dragon-content,
  .deep-content,
  .ending-content {
    width:100%;
  }

  .colesin-content h2,
  .heart-content h2 {
    font-size:2.5rem;
  }

  .title-box {
    padding:28px 20px;
  }

  .final-law {
    padding:28px 18px;
  }
}