:root{
  --ut-orange:#BF5700;
  --ut-blue:#0B4DA2;
  --ink:#1a1a1a;
  --bg:#ffffff;
  --cream:#FFF5EF;
  --rule:#e7e7e7;
  --muted:#616161;
  --chip-bg:#fff0f6;
  --chip-br:#ffc4e3;
  --shpetinas:#E84B88;
  --hero-h:clamp(420px,52vw,720px);
  --hero-img-opacity:.78;
  --hero-focus-y:35%;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";line-height:1.5}

.section{max-width:1100px;margin:0 auto;padding:32px 20px}
.h2{font-size:28px;margin:0 0 10px;line-height:1.15;letter-spacing:.2px}
.rule{width:580px;max-width:60%;height:2px;background:var(--rule);margin:10px 0 18px}

a{color:inherit;text-decoration:none}
.btn{display:inline-block;padding:12px 18px;border-radius:999px;border:2px solid var(--ut-orange);font-weight:700;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--ut-orange);color:#fff}
.btn.outline{background:#fff;color:var(--ut-orange)}
.nav-link.active{color:#ff1493;font-weight:bold}

.hero{position:relative;margin:0 0 34px;padding:0;background:transparent;overflow:hidden}
.hero .hero-wrap{position:relative;padding:0}
.hero .hero-wrap>div:first-child{
  position:absolute;z-index:3;left:50%;transform:translateX(-50%);
  width:min(1100px,92vw);top:clamp(36px,9vw,86px);margin:0;padding:0;background:transparent
}
.hero .hero-img{
  position:relative;left:50%;transform:translateX(-50%);
  width:100vw;height:var(--hero-h);overflow:hidden;
  background:linear-gradient(180deg,rgba(232,75,136,.40) 0%,rgba(232,75,136,.26) 40%,rgba(232,75,136,.16) 75%,rgba(232,75,136,.10) 100%)
}
.hero .hero-img img{
  width:100%;height:100%;object-fit:cover;object-position:50% var(--hero-focus-y);
  display:block;opacity:var(--hero-img-opacity);position:relative;z-index:1
}
.hero .hero-img::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.15) 45%,rgba(0,0,0,0) 80%),linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 50%)
}
.hero h1{color:#fff;font-size:clamp(2.2rem,6.2vw,4rem);line-height:1.05;margin:6px 0 10px;text-shadow:0 3px 14px rgba(0,0,0,.35)}

.about-split{
  max-width:1100px;margin:34px auto 20px;padding:0 20px;
  display:grid;grid-template-columns:1.2fr .9fr;gap:28px;align-items:stretch
}
.pink-panel{background:#ffe9f2;border-radius:20px;padding:clamp(18px,3vw,28px);box-shadow:0 18px 40px rgba(232,75,136,.12)}
.pink-panel h2{color:#fff;font-size:clamp(2rem,6vw,3.5rem);line-height:1.05;margin:4px 0 8px;text-shadow:0 3px 14px rgba(0,0,0,.15)}
.big-about{color:#fff;font-weight:700;font-size:clamp(1.05rem,2.5vw,1.35rem);line-height:1.45;text-shadow:0 2px 8px rgba(0,0,0,.15)}
.chips{display:flex;gap:10px;flex-wrap:wrap}
.chip{display:inline-block;padding:8px 14px;border-radius:999px;background:var(--chip-bg);border:1.5px solid var(--chip-br);color:#9b0d5a;font-weight:700;font-size:15px}

.highlights-card{background:#fff;border:1px solid #eee;border-radius:18px;padding:20px;box-shadow:0 16px 40px rgba(0,0,0,.08)}
.highlights-card h3{margin:0 0 8px;font-size:clamp(1.2rem,3vw,1.6rem)}
.highlight-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:14px}
.highlight-list li{display:flex;gap:12px;align-items:flex-start}
.highlight-list i{color:#b4156d;font-size:1.15rem;line-height:1.2}

.promo-split{
  max-width:1100px;margin:18px auto 32px;padding:0 20px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:start
}

.tshirt-card{background:#fff;border:1px solid #eee;border-radius:18px;padding:12px;display:flex;gap:8px;align-items:center}
.tshirt-card img{height:clamp(220px,28vw,360px);width:100%;object-fit:contain;object-position:center top;border-radius:12px}
.tshirt-title{margin:0 0 6px;font-size:1rem;font-weight:800;line-height:1.2}

.shpetina-month{
  background:#fff;border:1px solid #eee;border-radius:12px;padding:6px;
  display:flex;flex-direction:column;gap:3px;box-shadow:0 10px 26px rgba(232,75,136,.10);align-self:start
}
.shpetina-month .badge{align-self:flex-start;background:#E84B88;color:#fff;font-weight:800;font-size:.68rem;padding:3px 7px;border-radius:999px}
.shpetina-month img{width:100%;height:120px;object-fit:cover;border-radius:10px}
.shpetina-month .name{margin:1px 0 0;font-size:1rem;line-height:1.2}
.shpetina-month .meta{margin:0;color:#6b6b6b;font-size:.85rem;line-height:1.2}
.shpetina-month .facts{list-style:none;margin:2px 0 0;padding:0}
.shpetina-month .facts li{margin:1px 0;font-size:.9rem;line-height:1.2}
.shpetina-month .facts strong{font-weight:800}

.committee .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:#FFB6C1;transition:transform .18s ease,box-shadow .18s ease;box-shadow:0 2px 10px rgba(0,0,0,.03)}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.08)}
.card .photo{width:100%;height:280px;object-fit:cover;display:block}
.card .pad{padding:14px 14px 18px}
.card h3{margin:6px 0 4px;font-size:18px; color: #fff}
.card .role{margin:0;color:var(--muted);font-weight:600}


.ev-auto{position:relative;height:clamp(260px,42vw,520px);border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 12px 30px rgba(0,0,0,.06)}
.ev-auto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s ease}
.ev-auto img.is-active{opacity:1}

.site-footer{background:linear-gradient(180deg,#fff7fb 0%,#ffe9f2 100%);color:#1a1a1a;padding:40px 6% 28px}
.site-footer a{color:#BF5700;text-decoration:none}
.site-footer a:hover{color:#BF5700;text-decoration:none}
.footer-grid{display:grid;grid-template-columns:1.1fr 1fr 1.2fr;column-gap:36px;align-items:start;max-width:1200px;margin:0 auto}
.footer-col h4{font-size:1.25rem;margin:0 0 10px;font-weight:700}
.footer-col p{margin:6px 0;line-height:1.6}
.footer-col:nth-child(2){text-align:center;margin-left:24px}
.footer-col:nth-child(2) .socials{justify-content:center}
.footer-col:nth-child(3){text-align:center}
.socials{display:flex;gap:14px;align-items:center;margin-top:10px}
.socials a{display:inline-flex;width:40px;height:40px;border-radius:8px;background:rgba(232,75,136,.08);align-items:center;justify-content:center;transition:transform .15s ease,background .15s ease,color .15s ease}
.socials i{font-size:20px;color:#9b0d5a}
.socials a:hover{transform:translateY(-2px);background:rgba(232,75,136,.14)}
.socials a:hover i{color:#BF5700}
.footer-rule{border:none;height:1px;background:rgba(232,75,136,.25);width:90%;margin:24px auto 0;display:block;border-radius:1px}
.linktree{font-weight:700}

:root{
  
  --shpetina-img-h: clamp(180px, 22vw, 300px);
}

.shpetina-month img{
  width: 100%;
  height: var(--shpetina-img-h);   
  object-fit: cover;
  object-position: 50% 30%;        
  border-radius: 10px;
  display: block;
}

/*
   MOBILE  */
@media (max-width: 768px) {
  .shpetinas .section { padding: 16px !important; }

  /* Header / intro */
  .shpetinas-hero { padding: 28px 16px !important; text-align: left; }
  .shpetinas-hero img { width: 100% !important; height: auto !important; }

  /* Month spotlights / features */
  .shpetinas-grid, .features, .spotlights {
    display: grid; grid-template-columns: 1fr !important; gap: 16px !important;
  }

  .shpetina-card, .shpetina-month { width: 100% !important; }
  .shpetina-card img, .shpetina-month img { width: 100% !important; height: auto !important; }

  /* Buttons */
  .btn, .btn-primary, .btn-outline { width: 100%; }
}