/* Mysticism Journal — Luxury Editorial Theme */

:root{
  --ivory:#f7f2e8;
  --paper:#fbf8f1;
  --ink:#11110f;
  --muted:#62675f;
  --emerald:#173c35;
  --gold:#a9823b;
  --line:#c9b98e;
  --max:1180px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--ivory);
  color:var(--ink);
  font-family:Arial,Helvetica,sans-serif;
  line-height:1.7;
}

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

header{
  max-width:var(--max);
  margin:0 auto;
  padding:42px 32px 0;
}

.logo{
  text-align:center;
  padding:0 0 28px;
  border-bottom:1px solid var(--line);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.4rem,7vw,5.4rem);
  font-weight:700;
  letter-spacing:.12em;
  line-height:.95;
}

.logo span{display:block}

nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:42px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
}

nav a{
  font-size:.76rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}

nav a:hover{color:var(--gold)}

main{
  max-width:var(--max);
  margin:0 auto;
  padding:0 32px;
}

.hero{
  padding:88px 0 78px;
  border-bottom:1px solid var(--line);
}

.hero small{
  display:block;
  margin-bottom:26px;
  color:var(--emerald);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.28em;
  line-height:1.8;
}

.hero h1{
  max-width:1000px;
  margin:0;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(3.1rem,7vw,6.5rem);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.035em;
}

.hero p{
  max-width:680px;
  margin:34px 0 0;
  color:var(--muted);
  font-size:1.15rem;
}

.latest{
  padding:48px 0 80px;
}

.line{
  padding:0 0 20px;
  border-bottom:1px solid var(--line);
  font-family:Georgia,"Times New Roman",serif;
  font-size:2rem;
}

.latest article{
  padding:34px 0 0;
}

.latest article small{
  color:var(--emerald);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.25em;
}

.latest h2{
  max-width:850px;
  margin:12px 0 16px;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2rem,4vw,3.8rem);
  font-weight:400;
  line-height:1.08;
}

.latest h2 a:hover{color:var(--emerald)}

.latest p{
  max-width:680px;
  color:var(--muted);
  font-size:1.05rem;
}

.latest article>a{
  display:inline-block;
  margin-top:8px;
  color:var(--emerald);
  border-bottom:1px solid var(--gold);
  padding-bottom:4px;
  font-size:.75rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

footer{
  padding:42px 24px;
  background:var(--emerald);
  color:#f4eee1;
  text-align:center;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

@media(max-width:700px){
  header{padding:28px 20px 0}

  .logo{
    font-size:clamp(2.15rem,12vw,3.6rem);
    letter-spacing:.08em;
    line-height:1.05;
  }

  nav{
    gap:0;
    justify-content:space-between;
    padding:16px 4px;
  }

  nav a{
    font-size:.65rem;
    letter-spacing:.08em;
  }

  main{padding:0 20px}

  .hero{padding:58px 0 55px}

  .hero small{
    font-size:.67rem;
    letter-spacing:.18em;
  }

  .hero h1{
    font-size:clamp(2.8rem,13.5vw,4.7rem);
    line-height:1.02;
  }

  .hero p{
    margin-top:28px;
    font-size:1rem;
    line-height:1.75;
  }

  .latest{padding:40px 0 60px}

  .line{font-size:1.7rem}

  .latest h2{
    font-size:2.35rem;
  }
}