/* ================= HOME PAGE SPECIFIC ================= */

.h2{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  letter-spacing:.03em;
  margin:0 0 18px 0;
  font-size:40px;
  text-align:center;
}

.p-center{
  text-align:center;
  color:var(--muted);
  max-width:72ch;
  margin:0 auto 28px auto;
  line-height:1.6;
}

/* HERO */
.hero{
  background:
    radial-gradient(circle at 20% 20%, rgba(182,122,60,.14), transparent 55%),
    linear-gradient(120deg, #2b241f 0%, #1b1716 45%, #2c241f 100%);
  color:#f6f2ec;
}

.hero-inner{
  max-width:var(--max-width);
  margin:0 auto;
  padding:54px 20px;
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:28px;
  align-items:center;
}

.hero-title{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  letter-spacing:.03em;
  font-size:54px;
  margin:0 0 12px 0;
  line-height:1.05;
}

.hero-sub{
  margin:0 0 20px 0;
  color:rgba(246,242,236,.85);
  font-size:16px;
  line-height:1.6;
  max-width:55ch;
}

.hero-media{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.hero-photo{
  width:100%;
  height:520px;
  object-fit:cover;
  display:block;
}

@media(max-width:900px){
  .hero-inner{ grid-template-columns:1fr; padding:44px 20px; }
  .hero-title{ font-size:44px; }
}

/* GRIDS */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:22px;
}

.grid-4{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:18px;
}

@media(max-width:980px){
  .grid-3{ grid-template-columns:1fr; gap:18px; }
  .grid-4{ grid-template-columns:1fr 1fr; gap:16px; }
}
@media(max-width:560px){
  .grid-4{ grid-template-columns:1fr; }
}

/* CARDS */
.card{
  background:rgba(255,255,255,.6);
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

.card h3{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  margin:14px 0 6px 0;
  font-size:22px;
}

.card p{
  margin:0 0 14px 0;
  color:var(--muted);
  line-height:1.5;
  font-size:14px;
}

.card .btn{ width:100%; text-align:center; }

.placeholder-img{
  width:100%;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  background:linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
}

.placeholder-img img{
  width:100%;
  height:240px;
  object-fit:cover;
  display:block;
}

.placeholder-img.tall img{
  height:360px;
}

/* SPLIT LAYOUT */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:26px;
  align-items:center;
}

@media(max-width:900px){
  .split{ grid-template-columns:1fr; }
}

.mission h2{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-size:40px;
  margin:0 0 12px 0;
}

.mission p{
  margin:0 0 18px 0;
  color:var(--muted);
  line-height:1.7;
}

/* RESPONSIVE */
@media(max-width:820px){
  .hero-title{ font-size:40px; }
}

@media(max-width:680px){
  .hero-title{ font-size:36px; }
  .h2{ font-size:32px; }
  .btn{ width:100%; }
  .hero-photo{ height:380px; }
  .placeholder-img.tall img{ height:280px; }
}

/* ================= DECORATIVE ELEMENTS ================= */
.section {
  position: relative;
  overflow: hidden;
}

.section .container {
  position: relative;
}

.decoration {
  position: absolute;
  opacity: 0.6;
  pointer-events: none;
  z-index: 2;
}

.decoration img {
  display: block;
  width: 100%;
  height: auto;
}

.decoration-books-left {
  left: -64px;
  top: 50%;
  transform: translateY(-50%);
  width: 100px;
}

.decoration-wild-left {
  left: -72px;
  top: 50%;
  transform: translateY(-50%);
  width: 110px;
}

.decoration-wild-right {
  right: -78px;
  top: 50%;
  width: 130px;
  transform: translateY(-50%) scaleX(-1);
}

@media (max-width: 1200px) {
  .decoration-books-left {
    left: -36px;
    width: 90px;
  }

  .decoration-wild-left {
    left: -40px;
    width: 100px;
  }

  .decoration-wild-right {
    right: -42px;
    width: 110px;
  }
}

@media (max-width: 768px) {
  .decoration-books-left,
  .decoration-wild-left,
  .decoration-wild-right {
    display: none;
  }
}
