@charset "utf-8";
/* CSS Document */


/* =============================
   BASE
============================= */


h1,h2,h3{
  font-family:'Playfair Display', serif;
  letter-spacing:.02em;
}




/* =============================
   PAGE HEADING
============================= */
.page-title{
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
}

.page-title h1{
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: .02em;
  margin: 0;
}

.page-title::after{
  content:"";
  display:block;
  width: 72px;
  height: 3px;
  background: rgba(179,51,51,.85);
  margin-top: var(--space-2);
  border-radius: 99px;
}

/* =============================
   INTRO SECTION
============================= */

.intro-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  margin-bottom:3rem;
}

.card{
  background:#fff;
  padding: 2.25rem 2.25rem 2rem;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.06);
}

.card h2, .card h3{
  margin: 0 0 var(--space-1);
  line-height: 1.2;
}

.card p{
  margin: 0;
  color: rgba(34,34,34,.82);
}

/* =============================
   NEW MIDSECTION: WRAPAROUND
   (single element; centered image; text wraps around; full width below)
============================= */

.wraparound{
  --imgW: clamp(160px, 22vw, 260px);
  --imgH: var(--imgW);
  --gap: var(--space-3);

  margin: var(--space-5) 0;
  display: flow-root; /* contain floats */
}

.wraparound .mid-head{
  text-align: center;
  margin-bottom: var(--space-3);
}
.wraparound .mid-head h2{ margin: 0 0 .25rem; }
.wraparound .mid-head p{ margin: 0; color: rgba(34,34,34,.7); }

.wrap-zone{
  position: relative;
  min-height: var(--imgH);
}

/* Centered image (not in flow, but we create space for it with pseudo-floats) */
.wrap-zone .hero{
  width: var(--imgW);
  height: var(--imgH);
  object-fit: cover;
  border-radius: 12px;

  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;

  box-shadow: 0 18px 50px rgba(0,0,0,.10);
}

/* Two columns for the WRAP ZONE only */
.wrap-zone .col{
  width: calc(50% - (var(--gap) / 2));
}

.wrap-zone .left{ float: left; }
.wrap-zone .right{ float: right; }

/* The magic: create an invisible “spacer” next to the center image */
.wrap-zone .left::before,
.wrap-zone .right::before{
  content: "";
  width: calc((var(--imgW) / 2) + (var(--gap) / 2));
  height: var(--imgH);
}

.wrap-zone .left::before{ float: right; } /* pushes left text away from center */
.wrap-zone .right::before{ float: left; } /* pushes right text away from center */

.poem{
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  line-height: 1.85;
  letter-spacing: .01em;
  color: rgba(34,34,34,.9);
}

.poem h3{
  margin: 0 0 var(--space-1);
}

.poem p{
  margin: 0 0 var(--space-2);
}

/* Now we go FULL WIDTH below the wrap zone */
.below-full{
  clear: both;
  margin-top: var(--space-4);
}

/* Responsive: stack columns, image becomes normal block */
@media (max-width: 800px){
  .wrap-zone .hero{
    position: static;
    transform: none;
    margin: 0 auto var(--space-3);
    display: block;
  }

  .wrap-zone .col{
    float: none;
    width: 100%;
  }

  .wrap-zone .left::before,
  .wrap-zone .right::before{
    content: none;
  }
}
/* =============================
   MEDIA CARDS
============================= */

.media-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top: var(--space-5);
  gap: var(--space-3);
  
}



/* =============================
   RESPONSIVE
============================= */

@media (max-width:1000px){
  .media-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .wraparound .split-head{
    grid-template-columns: 1fr;
  }

  .wraparound .below{
    column-count: 1; 
  }
}

@media (max-width:600px){
  .intro-grid{
    grid-template-columns:1fr;
  }

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

  /* On very small screens, stop trying to “wrap” */
  .wraparound::before,
  .wraparound::after{
    float: none;
    width: 0;
    height: 0;
  }

  .wraparound{
    padding-top: calc(var(--imgH) + var(--space-3));
  }
}

hr{
  margin: var(--space-5) 0;
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0,0,0,.18), transparent);
}