:root{
  --teal: #59c6ac;
  --teal-dark: #3a9f88;
  --navy: #18203e;
  --cream: #faf6ee;
  --cream-2: #f2ead9;
  --text: #2c2b26;
  --text-soft: #6b6a63;
  --border: #e7e0d0;
  --font-body: "Nunito Sans", "Segoe UI", Roboto, sans-serif;
  --font-head: "Fraunces", "Georgia", serif;
  --font-hand: "Caveat", cursive;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
  margin:0;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--cream);
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

.screen{
  display:flex;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ---------- left panel: info ---------- */
.panel-info{
  width: 44%;
  min-width: 380px;
  background: var(--cream);
  display:flex;
  align-items:center;
  padding: 48px 60px;
}
.panel-info-inner{ max-width: 460px; margin: 0 auto; }
.logo{ width: 190px; margin-bottom: 26px; }

.badge{
  display:inline-block;
  background: var(--cream-2);
  border: 1px solid var(--border);
  color: var(--teal-dark);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 30px;
  margin-bottom: 18px;
}

h1{
  font-family: var(--font-head);
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  line-height: 1.15;
  color: var(--navy);
  margin: 0 0 16px;
}

.lede{
  color: var(--text-soft);
  font-size: 1.02rem;
  line-height: 1.65;
  margin: 0 0 30px;
}

.info-list{
  display:flex;
  flex-direction:column;
  gap: 14px;
  margin-bottom: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}
.info-row{
  display:flex;
  align-items:center;
  gap: 12px;
  font-weight: 700;
  color: var(--navy);
  font-size: .96rem;
}
.info-row svg{ color: var(--teal-dark); flex-shrink:0; }
.info-row:hover{ color: var(--teal-dark); }

.social-buttons{ display:flex; gap: 12px; flex-wrap: wrap; }
.social-btn{
  display:flex;
  align-items:center;
  gap: 9px;
  padding: 12px 22px;
  border-radius: 30px;
  font-weight: 800;
  font-size: .92rem;
  color: #fff;
  transition: filter .2s, transform .2s;
}
.social-btn:hover{ filter: brightness(1.08); transform: translateY(-1px); }
.social-fb{ background: #1877f2; }
.social-ig{ background: linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7); }

/* ---------- right panel: photos ---------- */
.panel-photos{
  flex: 1;
  position: relative;
  background: var(--navy);
  overflow: hidden;
}
.slideshow{ position:absolute; inset:0; }
.slide{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.4s ease;
  animation: kenburns 16s ease-in-out infinite;
}
.slide.active{ opacity: 1; }
.slide-empty{
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--navy), #232c52);
  color: rgba(255,255,255,.75);
  font-family: var(--font-hand);
  font-size: 1.6rem;
  text-align:center;
  padding: 40px;
  animation: none;
}
.slide-empty code{
  font-family: var(--font-body);
  background: rgba(255,255,255,.12);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 1rem;
}

@keyframes kenburns{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.07); }
  100%{ transform: scale(1); }
}

.panel-photos::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(24,32,62,0.05) 0%, rgba(24,32,62,0.35) 100%);
  pointer-events:none;
}

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .screen{ flex-direction: column; }
  .panel-info{
    width: 100%;
    min-width: 0;
    padding: 40px 26px 34px;
    order: 2;
  }
  .panel-photos{
    order: 1;
    height: 46vh;
    min-height: 280px;
    flex: none;
  }
  .logo{ width: 150px; margin-bottom: 18px; }
  .panel-info-inner{ max-width: 520px; }
}

@media (max-width: 480px){
  .panel-info{ padding: 32px 20px 28px; }
  h1{ font-size: 1.6rem; }
  .social-btn{ padding: 11px 18px; font-size: .86rem; }
  .info-row{ font-size: .9rem; }
}