:root {
      --quinto-primary: #7a3e1d;
      --quinto-secondary: #a66a43;
      --quinto-light: #f7f3ef;
      --quinto-dark: #2d2a26;
      --quinto-green: #486b3f;
      --quinto-accent: #8f3f2c;
    }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Source Sans 3', sans-serif;
      color: var(--quinto-dark);
      background-color: #fff;
    }

    .navbar {
      background-color: rgba(255,255,255,0.96);
      backdrop-filter: blur(6px);
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    

    .brand-logo {
      height: 52px;
      width: auto;
      display: block;
    }

    .nav-link {
      font-weight: 600;
      color: var(--quinto-dark) !important;
    }

    .nav-link:hover,
    .nav-link.active {
      color: var(--quinto-primary) !important;
    }

    .btn-quinto {
      background-color: var(--quinto-primary);
      border-color: var(--quinto-primary);
      color: #fff;
      font-weight: 600;
      border-radius: 0.8rem;
      padding: 0.75rem 1.25rem;
    }

    .btn-quinto:hover {
      background-color: #623116;
      border-color: #623116;
      color: #fff;
    }

    .btn-outline-quinto {
      border: 2px solid var(--quinto-primary);
      color: var(--quinto-primary);
      font-weight: 600;
      border-radius: 0.8rem;
      padding: 0.7rem 1.2rem;
    }

    .btn-outline-quinto:hover,
    .btn-outline-quinto.active {
      background-color: var(--quinto-primary);
      color: #fff;
    }

    .hero-page {
      min-height: 64vh;
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      color: #fff;
      display: flex;
      align-items: center;
      padding-top: 90px;
    }

    .hero-page h1 {
      font-size: clamp(2.4rem, 5vw, 4.4rem);
      font-weight: 700;
    }

    .hero-page .lead {
      max-width: 900px;
      margin: 0 auto;
      font-size: 1.22rem;
    }

    .page-nav {
      background: #fff;
      border-bottom: 1px solid rgba(0,0,0,0.08);
      position: sticky;
      top: 76px;
      z-index: 900;
    }

    .page-nav a {
      color: var(--quinto-primary);
      font-weight: 600;
      text-decoration: none;
      padding: 0.85rem 0.7rem;
      display: inline-block;
      font-size: 0.95rem;
    }
    .page-nav-music {
      background: #fff;
      border-bottom: 1px solid rgba(0,0,0,0.08);
      position: sticky;
      top: 76px;
      z-index: 900;
    }
    
    .page-nav a:hover { color: var(--quinto-secondary); }

    .music-nav {
      background: #fff;
      border-bottom: 1px solid rgba(0,0,0,0.08);
      position: sticky;
      top: 76px;
      z-index: 900;
    }

    .music-nav a {
      color: var(--quinto-primary);
      font-weight: 600;
      text-decoration: none;
      padding: 0.85rem 0.7rem;
      display: inline-block;
      font-size: 0.95rem;
    }

    .music-nav a:hover { color: var(--quinto-secondary); }
    .section-block {
      padding: 5rem 0;
      scroll-margin-top: 150px;
    }

    .bg-soft { background-color: var(--quinto-light); }

    .section-title {
      font-size: 2rem;
      font-weight: 700;
      color: var(--quinto-primary);
      margin-bottom: 1rem;
    }

    .section-kicker {
      display: inline-block;
      color: var(--quinto-accent);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      font-size: .86rem;
      margin-bottom: .5rem;
    }

    .section-subtitle {
      color: #6c757d;
      max-width: 820px;
      margin: 0 auto 2.5rem auto;
    }

    .content-panel {
      background: #fff;
      border-radius: 1rem;
      padding: 2rem;
      box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    }

    .image-frame img {
      width: 100%;
      border-radius: 1rem;
      box-shadow: 0 10px 24px rgba(0,0,0,0.1);
    }

    .image-caption {
      font-size: 0.95rem;
      color: #6c757d;
      margin-top: 0.75rem;
      margin-bottom: 0;
    }

    .period-meta {
      background: var(--quinto-light);
      border-left: 5px solid var(--quinto-primary);
      padding: 1.4rem 1.6rem;
      border-radius: 0.8rem;
      height: 100%;
    }

    .period-meta strong { color: var(--quinto-primary); }

    .feature-card {
      border: 0;
      border-radius: 1rem;
      padding: 1.6rem;
      height: 100%;
      background: #fff;
      box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    }

    .feature-card h3 {
      color: var(--quinto-primary);
      font-weight: 700;
      font-size: 1.25rem;
    }

    .quote-card {
      background: #fff;
      border-left: 5px solid var(--quinto-accent);
      border-radius: 1rem;
      padding: 2rem;
      box-shadow: 0 10px 25px rgba(0,0,0,0.06);
      font-size: 1.12rem;
      font-style: italic;
    }

    .timeline-list {
      border-left: 4px solid var(--quinto-primary);
      padding-left: 1.5rem;
      margin: 0;
    }

    .timeline-item { margin-bottom: 1.4rem; }

    .timeline-item h3 {
      color: var(--quinto-primary);
      font-size: 1.25rem;
      font-weight: 700;
      margin-bottom: .35rem;
    }

    .gallery-thumb {
      border-radius: 1rem;
      overflow: hidden;
      background: #fff;
      box-shadow: 0 10px 25px rgba(0,0,0,0.06);
      height: 100%;
    }

    .gallery-thumb img {
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
      display: block;
    }

    .gallery-thumb .caption {
      padding: 1rem;
      font-size: .95rem;
      color: #6c757d;
    }

    .badge-soft {
      display: inline-block;
      background: var(--quinto-light);
      color: var(--quinto-primary);
      border-radius: 999px;
      padding: .35rem .75rem;
      font-weight: 700;
      margin: .25rem .25rem .25rem 0;
    }

    .source-list li { margin-bottom: 0.75rem; }

    .footer {
      background-color: var(--quinto-dark);
      color: #fff;
      padding: 4rem 0;
    }

    .footer a {
      color: #fff;
      text-decoration: none;
    }

    .social-link {
      width: 52px;
      height: 52px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--quinto-primary);
      border-radius: 50%;
      font-size: 1.2rem;
      margin: 0 0.4rem;
    }

    .social-link:hover { background: var(--quinto-secondary); }

    @media (max-width: 991.98px) {
      .brand-logo { height: 44px; }
      .hero-page { min-height: 54vh; text-align: center; }
      .page-nav { position: static; }
    }

.lightbox-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.88);
    display:none;
    align-items:center;
    justify-content:center;
    z-index:99999;
    padding:2rem;
}

.lightbox-overlay.active{
    display:flex;
}

.lightbox-content{
    position:relative;
    max-width:95vw;
    max-height:95vh;
}

.lightbox-content img{
    max-width:100%;
    max-height:90vh;
    display:block;
    border-radius:12px;
}

.lightbox-close{
    position:absolute;
    top:-18px;
    right:-18px;
    width:42px;
    height:42px;
    border:none;
    border-radius:50%;
    background:white;
    font-size:1.5rem;
    cursor:pointer;
}

.zoomable{
    cursor:zoom-in;
}