:root {
      --color-bg:        #E6D9C0;
      --color-light-bg:  #EEE3CE;
      --color-dark:      #262523;
      --color-black:      #1C1B1A;
      --color-maroon:    #89403C;
      --color-light-gray: #D6CAB3;

      --color-white:     #ffffff;
      --font-mono: "DM Mono", monospace;
      --font-body:    'Inter', sans-serif; 

    }

    *, *::before, *::after { box-sizing: border-box; }

    body {
      background-color: var(--color-bg);
      color: var(--color-dark);
      font-family: var(--font-body);
      font-size: 15px;
    }

    .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }
      .offcanvas.offcanvas-start {
        background-color: var(--color-bg);
      }

  .offcanvas-header button {
    background: var(--color-maroon);
    width: 50px;
    height: 50px;
    padding: 0px !important;
    display: flex;
    justify-content: center;
    opacity: 1;
    border-radius: 0;
    align-items: center;
}

.navbar-toggler:focus,
.btn-close:focus {
    text-decoration: none;
    outline: 0;
    box-shadow:none;
}
.offcanvas-body{padding-top: 50px;}
.offcanvas.offcanvas-start {width: 100%;}
      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }

      .b-example-divider {
        width: 100%;
        height: 3rem;
        background-color: #0000001a;
        border: solid rgba(0, 0, 0, 0.15);
        border-width: 1px 0;
        box-shadow:
          inset 0 0.5em 1.5em #0000001a,
          inset 0 0.125em 0.5em #00000026;
      }
      .b-example-vr {
        flex-shrink: 0;
        width: 1.5rem;
        height: 100vh;
      }
      .bi {
        vertical-align: -0.125em;
        fill: currentColor;
      }
      .nav-scroller {
        position: relative;
        z-index: 2;
        height: 2.75rem;
        overflow-y: hidden;
      }
      .nav-scroller .nav {
        display: flex;
        flex-wrap: nowrap;
        padding-bottom: 1rem;
        margin-top: -1px;
        overflow-x: auto;
        text-align: center;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
      }
    
      .bd-mode-toggle {
        z-index: 1500;
      }
      .bd-mode-toggle .bi {
        width: 1em;
        height: 1em;
      }
      .bd-mode-toggle .dropdown-menu .active .bi {display: block !important;}
      .header .navbar-brand{padding: 0px;}
      .header .navbar-expand-lg {padding: 20px 0px;}
      .header.sticky-top {background-color: var(--color-bg);
}
.offcanvas-header button svg{pointer-events: none;}

      /* header */
.header .navbar-expand-lg .navbar-nav .nav-link{color:var(--color-dark);font-family: var(--font-body);font-size: 18px;font-style: normal;font-weight: 700;line-height: normal;padding:18px 0px; margin: 0px 28px; position: relative;}
.header .navbar-expand-lg .navbar-nav .nav-link::after{content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background-color: var(--color-maroon); transform: scaleX(0); transition: transform 0.3s ease;}
.header .navbar-expand-lg .navbar-nav .nav-link:hover::after{transform: scaleX(1);}
.header .navbar-expand-lg .navbar-nav .nav-link.active::after{transform: scaleX(1);}

.header .navbar-expand-lg .nav-item:last-child .nav-link{margin-right: 0px;}



/* hero section */
.purpose{
  font-family: var(--font-body);
  color: var(--color-dark);
  font-size: 22px;
  font-style: normal;
  font-weight: 500;
  line-height:120%;
}
h1 {
    letter-spacing: -2.24px;
    font-size: 64px;
    font-weight: 600;
}
.h2, h2{
  font-family: var(--font-body);
  color: var(--color-dark);
  font-size:56px;
  font-style: normal;
  font-weight: 600;
  line-height:100%;
}
h3{font-family: var(--font-body);
  color: var(--color-dark);
font-size: 36px;
font-style: normal;
font-weight: 600;
line-height: 110%; 
letter-spacing: -0.9px;}

section.hero {
        min-height: calc(100vh - 98px);
    height: 100%;
    display: flex;
    align-items: center;
}
.hero-img {
    display: flex;
    justify-content: flex-end;
}

  /* ── FESTIVAL CARDS ── */
    .section-pd{padding: 90px 0px;}
    .festival-card {
      border-radius: 0;
      padding:60px 40px;
      height: 100%;
    }
    .festival-card.heritage {
      background-color: var(--color-light-bg);
      border: 1px solid #ddd;
    }
     .festival-card.heritage .stat-item .stat-num,
     .festival-card.heritage .stat-item .stat-label {
    color: var(--color-dark);
     }

    .festival-card.dallas {
      background-color: var(--color-maroon);
      color: var(--color-white);
    }
    .festival-card.dallas .btn-festival-dark {
      border: 2px solid var(--color-bg);
      background: var(--color-bg);
      color: var(--color-dark);
    }
    .festival-card.dallas .btn-festival-dark svg path { fill:var(--color-dark);}
    .festival-card.dallas .btn-festival-dark:hover svg path { fill:var(--color-bg);}
    .festival-card.dallas .btn-festival-dark:hover {
      background: transparent;
      color: var(--color-bg);
      border: 2px solid var(--color-bg);
    }

    .festival-card.dallas .btn-festival-outline-white {
      border-color: var(--color-bg);
      color: var(--color-bg);
    }
    .festival-card.dallas .btn-festival-outline-white:hover {
      background: var(--color-bg);
      color: var(--color-dark);
    }
    .festival-card.dallas .btn-festival-outline-white:hover svg path { fill:var(--color-dark);}

    .festival-card .festival-supertitle {
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 600;
      margin-bottom: 0.3rem;
    }

   
    .para{padding: 40px 0px;}
    .festival-card p {
      margin: 0px;
      font-family: var(--font-body);
      color: var(--color-dark);
      font-weight: 400;
      font-size: 18px;
      line-height:160%;
      letter-spacing: -0.18px;
    }
    .stats-row {
      display: flex;
      gap: 2rem;
      margin-bottom: 1.8rem;
    }
    .stat-item .stat-num {
      font-family: var(--font-body);
      color: var(--color-bg);
      font-size: 36px;
      font-weight: 600;
      line-height:110%;
    }
    .stat-item .stat-label {
      font-size:14px;
      line-height: 140%;
      text-transform: uppercase;
      color: var(--color-bg);
      font-size: var(--font-body);
      font-weight: 500;
    }

     .btn-festival-dark,
     .btn-festival-outline,
     .btn-festival-outline-white {
      font-size: 18px;
      padding: 12px 16px;
      line-height: 135%;
      font-weight: 500;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
      letter-spacing: -0.18px;
     }


    .btn-festival-dark {
    background: var(--color-dark);
    color: var(--color-bg);
    border-radius: 0;
    text-decoration: none;
}

    .festival-card.heritage .btn-festival-dark { border: 2px solid var(--color-dark); }
    .festival-card.heritage .btn-festival-dark:hover svg path {fill:var(--color-dark);}
    .btn-festival-dark:hover {background: var(--color-light-bg); color: var(--color-dark);border: 2px solid var(--color-dark);}

    .btn-festival-outline {
      color: var(--color-dark);
      border: 2px solid var(--color-dark);
      border-radius: 0;
      text-decoration: none; 
    }
    .btn-festival-outline:hover svg path { fill:var(--color-bg);}
    .btn-festival-outline svg path { fill:var(--color-dark);}
    .btn-festival-outline:hover { background: var(--color-dark); color: var(--color-bg); }
    .btn-festival-outline-white {
      background: transparent;
      color: var(--color-bg);
      border: 2px solid var(--color-dark);
      border-radius: 0;
      text-decoration: none; 
    }

    .year-btns { display: flex; flex-wrap: wrap; gap: 1.5rem; }
    .btn-year {
    background: transparent;
    color: var(--color-dark);
    border: 2px solid var(--color-dark);
    font-family: var(--font-mono);
    font-size: 14px;
    border-radius: 0;
    text-decoration: none;
    transition: all 0.3s;
    padding: 16px;
    line-height: 140%;
    font-weight: 500;
        gap: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
    .btn-year:hover { background: var(--color-dark); color: var(--color-bg); }
    .btn-year:hover svg path { fill: var(--color-bg);}
    .btn-year-white {
      background: var(--color-maroon);
      color: var(--color-bg);
      border: 2px solid var(--color-bg);
      padding: 16px 18px;
      font-size: 14px;
      line-height: 140%;
      font-weight: 500;
      border-radius: 0;
          gap: 4px;
      text-decoration: none;
      transition: all 0.3s;;
      display: flex;
    align-items: center;
    justify-content: center;
    }
    .btn-year-white:hover { background: var(--color-bg); color: var(--color-dark);}
    .btn-year-white:hover svg path { fill: var(--color-dark);}
    .btn-arrows { display: inline-block; margin-left: 6px; }
    .festival-card hr{height:2px; background:var(--color-dark);opacity: 1;margin: 40px 0px; border:none; }
    .festival-card.dallas hr{height: 2px;background: var(--color-bg); }
    .festival-card.dallas p{color: var(--color-bg);} 


    /* ── NEWS SECTION ── */
    .section-news .col-lg-3{padding: 0px 12px;}
    .section-title {
      font-family: var(--font-body);
      color: var(--color-dark) ;
      font-size: 36px;
      line-height: 100%;
      font-weight: 600;
    }
    .view-all {
      font-size:18px;
      line-height: 135%;
      color: var(--color-dark);
      text-decoration: none;
      font-weight: 500;
      margin-top: 8px;
    }
    .view-all:hover { text-decoration: underline; }
 
    .news-card {
    background: transparent;
    border: none;
    text-decoration: none;
    display: block;
}
.news-card:hover .news-title { text-decoration: underline; transition: all 0.3s;}
.news-card:hover .news-img {box-shadow: inset 0px 0px 0px 9px var(--color-maroon);}
.news-card .news-img {
    transition: all 0.3s;
}
.news-card .news-img img {
    transition: all 0.3s;
    z-index: -1;
    position: relative;
}

    .news-tag {
      background: var(--color-maroon);
      display: inline-block;
      font-family: var(--font-mono);
      font-size:12px;
      font-weight: 500;
      text-transform: uppercase;
      padding: 2px 8px;
      margin: 16px 0px 8px 0px;
      color: var(--color-white);
      letter-spacing: 0.48px;
      border-radius: 0px;
    }

    .news-date { font-size: 14px; color: var(--color-dark); font-weight: 500;line-height: 140%; margin-bottom: 8px;font-family: var(--font-mono); }
    .news-title {
    font-family: var(--font-display);
    font-size: 28px;
    font-weight: 600;
    line-height: 110%;
    color: var(--color-dark);
    margin-bottom:1rem;
  } 

.news-excerpt { font-size: 16px; color:var(--color-dark); line-height:160%; margin-bottom: 0px;letter-spacing: -0.16px; }

/* ── PEOPLE SECTION ── */
.section-people .col-lg-2.col-md-4.col-6 {padding: 9px 12px;transition: all 0.5s ease;}
    .section-people { padding: 2.5rem 0 3.5rem; }
    .person-card { text-decoration: none;margin-bottom: 0px;display: block; transition: all 0.3s;}

.section-people .col-lg-2.col-md-4.col-6:hover .person-img {
    transform: scale(0.95);
}
.section-people .col-lg-2.col-md-4.col-6:hover .person-name, .section-people .col-lg-2.col-md-4.col-6:hover .person-role {color: var(--color-bg);}

   
    .person-img img {
    width: 100%;
}
    .person-img-placeholder {
      width: 100%;
      height: 100%;
      background: #b5b0a5;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .person-name {
      font-family:var(--font-body);
      font-size:22px;
      font-weight:500;
      line-height:120%;
      letter-spacing: -0.33px;
      color: var(--color-dark);
      margin: 16px 0px 8px 0px;
      transition: all 0.3s ease;
    }
    .person-role {font-size: 11px;line-height: 120%;font-weight: 500;color: var(--color-dark);letter-spacing: 0.22px;margin: 0px;transition: all 0.3s ease;}
    .section-people .col-lg-2.col-md-4.col-6:hover {
        background: var(--color-maroon);
    }


    .section-people .col-lg-2.col-md-4.col-6 .person-img {
        transition: all 0.3s ease;
    }

      /* ── FOOTER ── */
    footer {
      background-color: var(--color-bg);
      padding: 3rem 0 2rem;
      font-size: 12.5px;
    }
    .footer-brand {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      margin-bottom: 0.5rem;
    }
    .footer-tagline {
    font-size: 12px;
    color: var(--color-dark);
    font-family: var(--font-mono);
    line-height: 140%;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 24px 0px 32px 0px;
}
    .footer-social { display: flex; gap: 24px; margin-top: 1rem; }
    .footer-social a {
      background: var(--color-dark);
      width: 24px; height: 24px;
      border: 1px solid var(--color-dark);
      display: flex; align-items: center; justify-content: center;
      text-decoration: none;
      transition: background 0.2s;
    }
    .footer-social a:hover { background: var(--color-maroon); border: 1px solid var(--color-maroon);}
    .footer-social a:hover svg path {fill:var(--color-bg);}

    .footer-col-title {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.48px;
    text-transform: uppercase;
    color: var(--color-dark);
    font-family: var(--font-mono);
    margin-bottom: 1.5rem;
}
hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: var(--color-dark) 1px solid;
    opacity: 1;
}
    .footer-links { list-style: none; padding: 0; margin: 0; }
    .footer-links li { margin-bottom: 0.35rem; }
    .footer-links a { color:var(--color-dark); text-decoration: none; font-size: 12px;line-height: 150%;transition: all 0.3s ease; font-weight:400; }
    .footer-links a:hover { color: var(--color-maroon); text-decoration: underline;}
    .footer-copy, .footer-copy a { font-size: 12px;line-height: 150%;font-weight: 400; color:var(--color-dark); margin-top: 2rem; border-top: 1px solid var(--color-dark); padding-top: 1.2rem;text-decoration: none; }
    .footer-copy a { border: none;}
     .footer-copy a:hover { text-decoration: underline; color: var(--color-maroon);}

/* modal */
.people-modal .modal-header {
    border: none;
}
.people-modal .modal-body {
    display: flex;
    gap: 40px;
    padding: 40px 96px 40px 40px;
}
    .people-modal .modal-dialog.modal-lg {
    max-width: 1080px;
    width: 100%;
}
 .people-modal .modal-content {
  position: relative;
    border: none;
    border-radius: 0px;
}
.modal-details {
    width: 100%;
}
.people-modal .modal-details p {
    font-size: 16px;
    line-height: 160%;
    letter-spacing: -0.16px;
    margin-bottom:1.5rem;
}
 .people-modal .modal-image-box {
    max-width: 391px;
    width: 100%;
}
.people-modal .modal-image-box > img {
    width: 100%;
}
 .people-modal .person-name {
    font-size: 36px;
    letter-spacing: -0.9px;
}
.people-modal .person-role {
    font-size: 16px;
    line-height: 140%;
    letter-spacing: 0.32px;
}
.close-btn {
    background: var(--color-maroon);
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

button svg {
    visibility: visible;
}

/* articles pg */
.articles-section{padding-bottom: 0px}
.articles-section .news-card {
    margin-bottom: 80px;
}
.single-article-pg .article-image img{width: 100%;}

.news-list ul {
    padding: 0px;
    margin: 0px 0px 50px 4px;
}
.news-list ul {
    padding: 0px;
    margin: 0px 0px 50px 4px;
    display: block;
    overflow-x: auto;
    overflow-y: clip;
    position: relative;
    white-space: nowrap;
    transform: translate3d(0, 0, 0);
    padding-bottom: 7px;
}

.news-list ul li{
  list-style: none;
}

.news-list ul li a {
    text-decoration: none;
    color: var(--color-dark);
    font-family: var(--font-mono);
    background: var(--color-light-gray);
    font-size: 14px;
    line-height: 140%;
    letter-spacing: 0.28px;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: flex;
    padding: 8px 24px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    border-radius: 2px;

}
.news-list ul li a:hover {
    background: var(--color-dark);
    color: var(--color-bg);
}

.news-list ul li.active a {
    background: var(--color-black);
    color: var(--color-light-gray);
}

.single-article-pg .article-head-section {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0px 50px;
}
.single-article-pg h1 {
    line-height: 100%;
    margin: 24px 0px;
}
.single-article-pg .para-box p {
    font-family: var(--font-body);
font-size: 21px;
font-style: normal;
font-weight:400;
line-height: 150%; 
letter-spacing: -0.21px;
}
.author-name .person-name {
    font-size: 16px;
    margin-bottom:3px;
}
.author-name .person-role{
  color:  rgba(38, 37, 35, 0.60);
}
.articles-details{max-width: 780px; margin: 0 auto; }
.articles-details hr {
    margin: 2rem 0;;
    border-top: var(--color-dark) 2px solid;
}
.articles-para h3 {
    margin-bottom: 30px;
}
.articles-para p {
    font-size: 21px;
    line-height: 170%;
    font-weight: 400;
}