:root {
      --main-bg: #f0ede6;
      --main-text: #503d30;
      --secondary-text: #83746b;
      --accent: #6b5846;
      --card-bg: #faf8f3;
      --divider-height: 28px;
    }
    html, body {
      background: var(--main-bg);
      color: var(--main-text);
      font-family: 'Inter', Arial, sans-serif;
      scroll-behavior: smooth;
    }
    h1, h2, h3, h4, h5, h6, .font-garamond {
      font-family: 'Cormorant Garamond', serif !important;
      color: var(--main-text);
      letter-spacing: 0.01em;
    }
    .navbar {
      background: var(--main-bg);
      border-bottom: 1px solid #e0ddd7;
      font-family: 'Inter', Arial, sans-serif;
    }
    .navbar-brand {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 700;
      background: var(--main-text);
      color: #fff !important;
      padding: 0.3em 1.2em;
      border-radius: 0 0 10px 10px;
      margin-right: 0.7em;
      font-size: 1.45rem;
    }
    .navbar .nav-link {
      color: var(--main-text) !important;
      font-weight: 500;
      margin-left: 1.1em;
      transition: color 0.1s;
    }
    .navbar .nav-link.active, .navbar .nav-link:hover {
      color: var(--accent) !important;
      text-decoration: underline;
    }
    .section {
      padding-top: 5.5rem;
      padding-bottom: 4.5rem;
      position: relative;
      background: var(--main-bg);
    }
    .section-title {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.7rem;
      font-weight: 500;
      text-align: center;
      margin-bottom: 2.5rem;
      color: var(--main-text);
    }
    .section-divider {
      width: 100vw;
      min-width: 100%;
      min-height: 120px;
      height: var(--divider-height);
      object-fit: contain;
      display: block;
      position: absolute;
      left: 0;
      bottom: -10px;
      z-index: 2;
      pointer-events: none;
      opacity: 0.66;
    }
    .hero-section {
      padding-top: 7rem;
      padding-bottom: 5.5rem;
      min-height: 90vh;
      background: var(--main-bg);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-card {
      background: var(--card-bg);
      box-shadow: 0 4px 32px 0 rgba(111, 92, 74, 0.11);
      border-radius: 1.25rem;
      padding: 2.7rem 2.3rem;
      display: flex;
      gap: 3.2rem;
      align-items: center;
      max-width: 950px;
      margin: auto;
    }
    .hero-img {
      width: 320px;
      height: 370px;
      object-fit: cover;
      border-radius: 1.2rem;
      box-shadow: 0 4px 26px rgba(80,61,48,0.08);
      background: #fff;
      margin-right: 0.6rem;
    }
    .hero-text h1 {
      font-family: 'Cormorant Garamond', serif;
      font-style: italic;
      font-weight: 500;
      font-size: 2.3rem;
      color: var(--main-text);
      margin-bottom: 0.7rem;
    }
    .hero-text p {
      font-size: 1.18rem;
      margin-bottom: 0.5rem;
    }
    .hero-text .text-muted {
      color: var(--secondary-text) !important;
      font-size: 1rem;
      margin-bottom: 1.2rem;
    }
    .hero-links {
      display: flex;
      flex-wrap: wrap;
      gap: 1.8rem 2.3rem;
      margin-top: 1.5rem;
      font-size: 1.04rem;
    }
    .hero-links a {
      color: var(--main-text);
      text-decoration: underline;
      font-weight: 500;
      margin-right: 2rem;
    }
    .hero-links a:hover {
      color: var(--accent);
      text-decoration: underline;
    }
    .btn-main {
      background: var(--main-text);
      color: #fff;
      font-weight: 600;
      font-size: 1rem;
      border-radius: 0.44em;
      padding: 0.5em 2.1em;
      border: none;
      transition: background 0.14s;
    }
    .btn-main:hover, .btn-main:focus {
      background: var(--accent);
      color: #fff;
    }
    @media (max-width: 900px) {
      .hero-card {
        flex-direction: column;
        gap: 2.1rem;
        text-align: center;
        padding: 2.2rem 1.2rem;
      }
      .hero-img {
        margin-right: 0;
        margin-bottom: 1rem;
      }
    }
    .bio-text, .projects-text {
      font-size: 1.15rem;
      color: var(--main-text);
      line-height: 1.55;
    }
    .concert-card {
      background: #fff;
      border: 1px solid #e9e6e1;
      border-radius: 1rem;
      box-shadow: 0 2px 10px rgba(111, 92, 74, 0.07);
      margin-bottom: 2rem;
      padding: 1.35rem 2.1rem 1.1rem 1.6rem;
    }
    .concert-title {
      font-size: 1.35rem;
      font-family: 'Cormorant Garamond', serif;
      margin-bottom: 0.4rem;
      font-weight: 500;
      color: var(--main-text);
    }
    .concert-meta {
      color: var(--secondary-text);
      font-size: 1.01rem;
      margin-bottom: 0.22rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1.3rem;
      align-items: center;
    }
    .concert-card .btn-main {
      float: right;
      margin-left: 1.1rem;
      margin-top: 0.4rem;
      font-size: 1em;
      padding: 0.42em 1.5em;
    }
    .btn-soldout {
      background: #eceae6;
      color: #a49c94;
      font-weight: 500;
      cursor: not-allowed;
    }
    .media-tabs .nav-link {
      background: #eceae6;
      color: var(--main-text);
      border-radius: 0.5em 0.5em 0 0;
      margin-right: 0.8em;
      font-weight: 500;
      font-size: 1.1rem;
    }
    .media-tabs .nav-link.active {
      background: #fff;
      color: var(--main-text);
      border-bottom: 2px solid var(--main-bg);
    }
    .media-card {
      background: #fff;
      border-radius: 0.9em;
      box-shadow: 0 2px 10px rgba(80,61,48,0.07);
      margin-bottom: 1.5rem;
      padding: 0;
      overflow: hidden;
      min-height: 210px;
      border: 1px solid #e9e6e1;
      display: flex;
      flex-direction: column;
    }
    .media-card .media-img {
      background: #f4f1eb;
      min-height: 140px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.5rem;
      color: #ccc;
      position: relative;
    }
    .media-card .media-duration {
      position: absolute;
      bottom: 10px;
      right: 16px;
      background: #222;
      color: #fff;
      font-size: 0.92em;
      padding: 0.11em 0.64em;
      border-radius: 6px;
      opacity: 0.86;
    }
    .media-card .media-desc {
      padding: 1em 1.25em 1.1em;
    }
    .contact-block {
      background: var(--card-bg);
      border-radius: 1.1rem;
      padding: 2.3rem 1.7rem 2.7rem;
      margin-bottom: 1.7rem;
      box-shadow: 0 2px 14px rgba(111,92,74,0.05);
    }
    .contact-info-list {
      list-style: none;
      padding: 0;
      margin-bottom: 1.6rem;
    }
    .contact-info-list li {
      margin-bottom: 1.05rem;
      font-size: 1.06rem;
      color: var(--main-text);
      display: flex;
      align-items: center;
      gap: 0.9em;
    }
    .contact-info-list i {
      font-size: 1.1em;
      color: var(--secondary-text);
    }
    .services-card {
      border: 1px solid #e3e1dd;
      background: #fff;
      border-radius: 0.6em;
      padding: 1em 1.5em;
      font-size: 1.07em;
      margin-top: 1.3em;
      color: var(--main-text);
    }
    .contact-form-block {
      background: #fff;
      border-radius: 1.1rem;
      padding: 2.3rem 2rem 2rem;
      border: 1px solid #e3e1dd;
      box-shadow: 0 2px 10px rgba(111, 92, 74, 0.06);
    }
    .footer {
      background: var(--main-bg);
      color: var(--secondary-text);
      border-top: 1px solid #e1ded6;
      font-size: 1rem;
      padding: 2.5em 0 1.5em;
      margin-top: 3em;
    }
    .footer .navbar-brand {
      margin-bottom: 0.5em;
      font-size: 1.25rem;
      padding: 0.24em 1.05em;
    }
    .footer .footer-title {
      font-family: 'Cormorant Garamond', serif;
      font-weight: 500;
      font-size: 1.18rem;
      color: var(--main-text);
      margin-bottom: 0.65em;
    }
    .footer a {
      color: var(--secondary-text);
      text-decoration: underline;
      font-size: 1.03em;
    }
    .footer a:hover {
      color: var(--main-text);
      text-decoration: underline;
    }
    .text-main { color: var(--main-text); }
    .text-secondary { color: var(--secondary-text)!important;}
    .bg-main { background: var(--main-bg);} 
    .fw-500 { font-weight: 500;}
    @media (max-width: 767px) {
      .hero-img { width: 90vw; height: auto; }
      .section-title { font-size: 2.1rem; }
      .footer { font-size: 0.99rem;}
    }
    @media (max-width: 576px) {
      .footer { padding: 1.7em 0 1em;}
      .contact-block, .contact-form-block { padding: 1.1rem 0.6rem;}
      .hero-section, .section { padding-top: 4.1rem; padding-bottom: 2.7rem;}
    }