/* ============================================================
   THE CENTERED EDGE
   GUESTS.CSS
============================================================ */

/* ============================================================
   ROOT
============================================================ */

:root{

  --bg:#FFFAF0;
  --bg-alt:#F8F4EC;

  --surface:#FFFFFF;

  --text:#1D2433;
  --text-soft:#667085;
  --text-light:#8A93A5;

  --white:#ffffff;

  --copper:#C4892A;
  --copper-dim:rgba(196,137,42,.08);
  --copper-rule:rgba(196,137,42,.18);

  --rule:#E6DDD0;

  --serif:"Playfair Display",serif;
  --sans:"DM Sans",sans-serif;

  --pad-x:72px;
  --pad-x-mobile:22px;
  
  --navy:#040720;
--midnight:#082567;
--royal:#003366;

--sky:#90D5FF;
--soft-blue:#6A89A7;

--gold:#EDA800;
--gold-dark:#A67C00;

--cream:#FAF0E6;
--ivory:#FFFAF0;
--charcoal:#353E43;
--white:#ffffff;

--shadow:0 15px 40px rgba(0,0,0,.08);

}


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

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

html{
  scroll-behavior:smooth;
}

body{

  background:var(--bg);

  color:var(--text);

  font-family:var(--sans);

  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;

}

img{
  max-width:100%;
  display:block;
}

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

section{
  padding:72px var(--pad-x);
}

.section-divider{
  border-top:1px solid var(--rule);
}


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

.gh-hero{

  display:grid;
  grid-template-columns:5fr 4fr;

  gap:80px;

  align-items:center;

  padding:90px var(--pad-x) 84px;

  border-bottom:1px solid var(--rule);

}


.ghh-kicker{

  display:inline-block;

  margin-bottom:24px;

  padding:8px 16px;

  background:var(--copper-dim);

  border:1px solid var(--copper-rule);
  border-radius:999px;

  font-size:11px;
  font-weight:700;

  letter-spacing:.18em;
  text-transform:uppercase;

  color:var(--copper);

}


.ghh-h1{

  font-family:var(--serif);

  font-size:clamp(3rem,6vw,5.3rem);

  font-weight:400;

  line-height:1.08;

  color:var(--text);

}


.ghh-h1 em{

  color:var(--copper);

  font-style:italic;
  font-weight:400;

}


.ghh-body{

  font-size:17px;

  line-height:2;

  color:var(--text-soft);

  margin-bottom:42px;

}


/* ============================================================
   HERO STATS
============================================================ */

.ghh-stat-row{

  display:grid;

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

  gap:18px;

}


.ghh-stat{

  background:var(--surface);

  border:1px solid var(--rule);
  border-radius:12px;

  padding:24px;

  transition:.25s;

}


.ghh-stat:hover{

  transform:translateY(-4px);

  border-color:var(--copper);

  box-shadow:0 18px 42px rgba(0,0,0,.05);

}


.ghh-stat-num{

  display:block;

  margin-bottom:10px;

  font-family:var(--serif);

  font-size:2.6rem;

  font-weight:500;

  line-height:1;

  color:var(--copper);

}


.ghh-stat-label{

  display:block;

  font-size:13px;

  line-height:1.7;

  color:var(--text-soft);

  text-transform:uppercase;

  letter-spacing:.08em;

}


/* ============================================================
   GUEST GRID HEADER
============================================================ */

.guest-grid-section{

  padding:72px var(--pad-x);

}


.ggs-header{

  display:flex;

  justify-content:space-between;
  align-items:flex-end;

  margin-bottom:36px;

}


.ggs-label{

  font-family:var(--serif);

  font-size:2.3rem;

  font-weight:500;

  color:var(--text);

}


.ggs-count{

  font-size:13px;

  letter-spacing:.12em;

  text-transform:uppercase;

  color:var(--text-light);

}


/* ============================================================
   FILTER TABS
============================================================ */

.filter-tabs{

  display:flex;

  flex-wrap:wrap;

  gap:12px;

  margin-bottom:42px;

}


.ft{

  appearance:none;

  border:1px solid var(--rule);

  background:var(--surface);

  border-radius:999px;

  padding:12px 20px;

  cursor:pointer;

  font-size:12px;
  font-weight:700;

  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--text-soft);

  transition:.25s;

}


.ft:hover{

  border-color:var(--copper);

  color:var(--copper);

}


.ft.active{

  background:var(--copper);

  border-color:var(--copper);

  color:#fff;

}

/* ============================================================
   GUEST GRID
============================================================ */

.guest-grid{

  display:grid;

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

  gap:28px;

}


/* ============================================================
   GUEST CARD
============================================================ */

.guest-card{

  display:flex;
  flex-direction:column;

  overflow:hidden;

  background:var(--surface);

  border:1px solid var(--rule);
  border-radius:14px;

  transition:
    transform .28s ease,
    border-color .28s ease,
    box-shadow .28s ease;

}


.guest-card:hover{

  transform:translateY(-6px);

  border-color:var(--copper);

  box-shadow:0 20px 50px rgba(0,0,0,.08);

}


/* ============================================================
   PHOTO AREA
============================================================ */

.gc-photo-area{

  position:relative;

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

  aspect-ratio:16/10;

  background:
    linear-gradient(135deg,#efe5d3,#f8f3ea);

  border-bottom:1px solid var(--rule);

}


.gc-photo-placeholder{

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

  width:90px;
  height:90px;

  border-radius:50%;

  background:rgba(196,137,42,.12);

  border:1px solid rgba(196,137,42,.22);

  font-family:var(--serif);

  font-size:2rem;

  color:var(--copper);

}


.gc-ep-badge{

  position:absolute;

  top:18px;
  right:18px;

  padding:7px 12px;

  border-radius:999px;

  background:var(--surface);

  border:1px solid var(--rule);

  font-size:10px;
  font-weight:700;

  letter-spacing:.18em;
  text-transform:uppercase;

  color:var(--copper);

}


/* ============================================================
   CARD BODY
============================================================ */

.gc-body{

  display:flex;
  flex-direction:column;

  flex:1;

  padding:28px;

}


.gc-name{

  font-family:var(--serif);

  font-size:1.6rem;

  line-height:1.25;

  font-weight:500;

  color:var(--text);

  margin-bottom:10px;

}


.gc-role{

  font-size:15px;

  line-height:1.8;

  color:var(--text-soft);

}


.gc-org{

  margin-top:6px;
  margin-bottom:18px;

  font-size:12px;

  font-weight:700;

  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--text-light);

}


/* ============================================================
   TOPIC BADGE
============================================================ */

.gc-topic-badge{

  display:inline-flex;

  align-self:flex-start;

  margin-bottom:20px;

  padding:7px 14px;

  border-radius:999px;

  background:var(--copper-dim);

  border:1px solid var(--copper-rule);

  font-size:10px;
  font-weight:700;

  letter-spacing:.14em;
  text-transform:uppercase;

  color:var(--copper);

}


/* ============================================================
   QUOTE
============================================================ */

.gc-quote{

  position:relative;

  flex:1;

  padding-left:18px;

  margin-bottom:28px;

  font-family:var(--serif);

  font-size:1rem;

  font-style:italic;

  line-height:1.9;

  color:var(--text);

}


.gc-quote::before{

  content:"";

  position:absolute;

  left:0;
  top:2px;
  bottom:2px;

  width:3px;

  border-radius:999px;

  background:var(--copper);

}


/* ============================================================
   CTA
============================================================ */

.gc-cta-link{

  display:inline-flex;

  align-items:center;

  gap:8px;

  margin-top:auto;

  font-size:12px;

  font-weight:700;

  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--copper);

}


.gc-cta-link::after{

  content:"→";

  transition:.25s;

}


.guest-card:hover .gc-cta-link::after{

  transform:translateX(5px);

}


/* ============================================================
   REVEAL ANIMATION
============================================================ */

.reveal{

  opacity:0;

  transform:translateY(28px);

  animation:guestReveal .8s ease forwards;

}


@keyframes guestReveal{

  to{

    opacity:1;

    transform:none;

  }

}


/* stagger */

.guest-card:nth-child(1){animation-delay:.02s;}
.guest-card:nth-child(2){animation-delay:.06s;}
.guest-card:nth-child(3){animation-delay:.10s;}
.guest-card:nth-child(4){animation-delay:.14s;}
.guest-card:nth-child(5){animation-delay:.18s;}
.guest-card:nth-child(6){animation-delay:.22s;}
.guest-card:nth-child(7){animation-delay:.26s;}
.guest-card:nth-child(8){animation-delay:.30s;}
.guest-card:nth-child(9){animation-delay:.34s;}
.guest-card:nth-child(10){animation-delay:.38s;}
.guest-card:nth-child(11){animation-delay:.42s;}
.guest-card:nth-child(12){animation-delay:.46s;}

/* ============================================================
   HOST STRIP
============================================================ */

.host-strip{

  display:grid;
  grid-template-columns:320px 1fr;

  gap:64px;

  align-items:center;

  padding:80px var(--pad-x);

  background:var(--bg-alt);

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

}


.hs-photo-sm{

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

  aspect-ratio:1;

  border-radius:18px;

  background:
    linear-gradient(135deg,#efe4d1,#faf6ef);

  border:1px solid var(--rule);

}


.hs-photo-label-sm{

  font-family:var(--serif);

  font-size:2.3rem;

  color:var(--copper);

}


.hs-label-sm{

  display:inline-block;

  margin-bottom:16px;

  padding:7px 16px;

  border-radius:999px;

  background:var(--copper-dim);

  border:1px solid var(--copper-rule);

  font-size:11px;
  font-weight:700;

  letter-spacing:.16em;
  text-transform:uppercase;

  color:var(--copper);

}


.hs-title-sm{

  font-family:var(--serif);

  font-size:clamp(2rem,4vw,3rem);

  line-height:1.22;

  font-weight:500;

  color:var(--text);

  margin-bottom:22px;

}


.hs-body-sm{

  font-size:16px;

  line-height:2;

  color:var(--text-soft);

  margin-bottom:30px;

}


/* ============================================================
   HOST QUOTE
============================================================ */

.hs-bridge{

  margin-bottom:28px;

  padding:24px 28px;

  background:var(--surface);

  border-left:4px solid var(--copper);

  border-radius:10px;

  border:1px solid var(--rule);

}


.hs-bridge-text{

  font-family:var(--serif);

  font-size:1.15rem;

  font-style:italic;

  line-height:1.8;

  color:var(--text);

}


.hs-link{

  display:inline-flex;
  align-items:center;

  gap:8px;

  font-size:12px;
  font-weight:700;

  letter-spacing:.14em;
  text-transform:uppercase;

  color:var(--copper);

}


.hs-link::after{

  content:"→";

  transition:.25s;

}


.hs-link:hover::after{

  transform:translateX(5px);

}


/* ============================================================
   BRIDGE
============================================================ */

.bridge{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:72px;
    padding:80px var(--pad-x);

    background:var(--navy); 
    color:var(--white);
}


.br-label{

  margin-bottom:18px;

  font-size:11px;

  font-weight:700;

  letter-spacing:.18em;
  text-transform:uppercase;

  color:#D6B06B;

}


.bridge h2{

  font-family:var(--serif);

  font-size:clamp(2rem,4vw,3rem);

  font-weight:400;

  line-height:1.25;

}


.br-body{

  font-size:16px;

  line-height:2;

  color:rgba(255,255,255,.78);

  margin-bottom:30px;

}


.br-link{

  display:inline-flex;
  align-items:center;

  gap:8px;

  font-size:13px;

  font-weight:700;

  letter-spacing:.12em;
  text-transform:uppercase;

  color:#D6B06B;

}


.br-link::after{

  content:"→";

  transition:.25s;

}


.br-link:hover::after{

  transform:translateX(5px);

}


/* ============================================================
   SUBSCRIBE
============================================================ */

.sub-strip{

  display:grid;

  grid-template-columns:2fr 1fr;

  gap:60px;

  align-items:center;

  padding:72px var(--pad-x);

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

}


.ss-label{

  margin-bottom:16px;

  font-size:11px;

  font-weight:700;

  letter-spacing:.18em;
  text-transform:uppercase;

  color:var(--copper);

}


.ss-title{

  font-family:var(--serif);

  font-size:clamp(2rem,4vw,2.9rem);

  line-height:1.25;

  font-weight:500;

  margin-bottom:18px;

  color:var(--text);

}


.ss-body{

  font-size:16px;

  line-height:1.9;

  color:var(--text-soft);

}


.ss-form{

  display:flex;
  flex-direction:column;

  gap:14px;

}


.ss-input{

  height:54px;

  padding:0 18px;

  background:white;

  border:1px solid var(--rule);

  border-radius:8px;

  font-size:15px;

  color:var(--text);

}


.ss-btn{

  height:54px;

  border:none;

  border-radius:8px;

  background:var(--copper);

  color:white;

  font-size:12px;
  font-weight:700;

  letter-spacing:.14em;
  text-transform:uppercase;

  cursor:pointer;

  transition:.25s;

}


.ss-btn:hover{

  filter:brightness(.95);

}

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

.footer-three{

  display:grid;
  grid-template-columns:2fr 1fr 1fr;

  gap:56px;

  padding:72px var(--pad-x);

  background:var(--surface);

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

}


.footer-logo{

  font-family:var(--serif);

  font-size:2rem;

  font-weight:500;

  color:var(--text);

  margin-bottom:18px;

}


.footer-tagline{

  max-width:420px;

  font-size:15px;

  line-height:1.9;

  color:var(--text-soft);

  margin-bottom:22px;

}


.footer-mahat{

  display:inline-flex;

  align-items:center;

  gap:8px;

  font-size:13px;

  font-weight:700;

  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--copper);

}


.footer-mahat::after{

  content:"→";

  transition:.25s;

}


.footer-mahat:hover::after{

  transform:translateX(5px);

}


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

.footer-col-title{

  margin-bottom:20px;

  font-size:11px;

  font-weight:700;

  letter-spacing:.18em;
  text-transform:uppercase;

  color:var(--copper);

}


.footer-link-list{

  list-style:none;

}


.footer-link-list li{

  margin-bottom:14px;

}


.footer-link-list a{

  color:var(--text-soft);

  transition:.25s;

}


.footer-link-list a:hover{

  color:var(--copper);

}


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

.footer-bottom-bar{

  display:flex;

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

  gap:28px;

  padding:26px var(--pad-x);

  background:var(--bg-alt);

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

}


.footer-social{

  display:flex;

  flex-wrap:wrap;

  gap:18px;

}


.footer-social a{

  font-size:13px;

  color:var(--text-soft);

  transition:.25s;

}


.footer-social a:hover{

  color:var(--copper);

}


.footer-legal{

  font-size:13px;

  color:var(--text-light);

}


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

@media (max-width:1200px){

  .guest-grid{

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

  }

}


@media (max-width:960px){

  :root{

    --pad-x:32px;

  }

  .gh-hero{

    grid-template-columns:1fr;

    gap:48px;

  }

  .ghh-stat-row{

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

  }

  .host-strip{

    grid-template-columns:1fr;

    gap:42px;

  }

  .bridge{

    grid-template-columns:1fr;

    gap:48px;

  }

  .sub-strip{

    grid-template-columns:1fr;

    gap:36px;

  }

  .footer-three{

    grid-template-columns:1fr 1fr;

  }

}


@media (max-width:640px){

  :root{

    --pad-x:var(--pad-x-mobile);

  }

  .gh-hero{

    padding:60px var(--pad-x);

  }

  .ghh-h1{

    font-size:2.8rem;

  }

  .ghh-stat-row{

    grid-template-columns:1fr;

  }

  .guest-grid{

    grid-template-columns:1fr;

  }

  .filter-tabs{

    gap:10px;

  }

  .ft{

    width:100%;

    justify-content:center;

  }

  .host-strip{

    padding:60px var(--pad-x);

  }

  .bridge{

    padding:60px var(--pad-x);

  }

  .sub-strip{

    padding:60px var(--pad-x);

  }

  .footer-three{

    grid-template-columns:1fr;

    gap:42px;

  }

  .footer-bottom-bar{

    flex-direction:column;

    align-items:flex-start;

  }

}


@media (max-width:480px){

  .gc-body{

    padding:22px;

  }

  .gc-name{

    font-size:1.4rem;

  }

  .ghh-h1{

    font-size:2.35rem;

  }

  .hs-title-sm{

    font-size:2rem;

  }

}