:root {
      --color-brand-primary: #5c352c;
      --color-brand-hover: #45241d;
      --color-marquee-bg: #e6b6c2;        
      --color-marquee-text: #211c1d;     
      --color-body-text: #2b2623;
      --color-muted: #6e6560;
      --color-border-subtle: #f0e6e1;
      --color-border-card: #ece2dc;
      --color-surface: #ffffff;
      --color-cream-tint: #faf6f3;
      --color-gold: #e5a93c;
      --font-serif: 'Playfair Display', Georgia, serif;
      --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --max-width: 1440px;
      --header-height: 86px;
      --transition-smooth: all 0.22s ease-in-out;
    }
html {
    scroll-behavior: smooth;
}	

    html {
      scroll-behavior: smooth;
    }

    ::-webkit-scrollbar {
      width: 9px;
    }
    ::-webkit-scrollbar-track {
      background: #fbf8f6;
    }
    ::-webkit-scrollbar-thumb {
      background: #d6cac2;
      border-radius: 6px;
    }
    ::-webkit-scrollbar-thumb:hover {
      background: var(--color-brand-primary);
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--font-sans);
      color: var(--color-text-main);
      background-color: var(--color-cream-bg);
      line-height: 1.55;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: var(--transition-smooth);
    }

    .container-site {
      width: 100%;
      max-width: var(--container-max);
      margin-left: auto;
      margin-right: auto;
      padding-left: clamp(16px, 3.5vw, 48px);
      padding-right: clamp(16px, 3.5vw, 48px);
    }

    /* ==========================================================================
       1. TOP INFINITE SCROLLING ANNOUNCEMENT MARQUEE
       ========================================================================== */
    .announcement-marquee {
      background-color: var(--color-marquee-bg);
      color: var(--color-marquee-text);
      overflow: hidden;
      white-space: nowrap;
      display: flex;
      user-select: none;
      padding: 10px 0;
      font-size: 0.875rem;
      font-weight: 500;
      letter-spacing: 0.015em;
      position: relative;
      z-index: 1050;
      border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    }

    .marquee-track {
      display: flex;
      flex-shrink: 0;
      min-width: 100%;
      animation: marquee-scroll 28s linear infinite;
      will-change: transform;
    }

    .marquee-item {
      display: inline-flex;
      align-items: center;
      padding: 0 46px;
    }

    @keyframes marquee-scroll {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    .announcement-marquee:hover .marquee-track {
      animation-play-state: paused;
    }

    /* ==========================================================================
       2. SITE HEADER & NAVIGATION
       ========================================================================== */
    .site-header {
      background-color: var(--color-surface);
      position: sticky;
      top: 0;
      z-index: 1040;
      transition: box-shadow 0.28s ease, background-color 0.28s ease;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .site-header.is-pinned {
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
    }

    .site-header__inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: var(--header-height);
    }

    .site-header__logo-link {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      flex-shrink: 0;
    }

    .site-header__logo-text {
      font-family: var(--font-sans);
      font-weight: 900;
      font-size: clamp(1.75rem, 2.3vw, 2.25rem);
      letter-spacing: 0.02em;
      color: var(--color-brand-primary);
      line-height: 1;
      display: inline-flex;
      align-items: flex-start;
      margin: 0;
    }

    .site-header__logo-text sup {
      font-size: 0.48em;
      font-weight: 700;
      margin-left: 2px;
      top: -0.6em;
    }

    .site-navigation {
      display: flex;
      align-items: center;
      gap: 34px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .nav-item {
      position: relative;
      list-style: none;
    }

    .nav-link-btn {
      font-family: var(--font-sans);
      font-size: 0.96rem;
      font-weight: 500;
      color: var(--color-text-main);
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 0;
      border: none;
      background: transparent;
      cursor: pointer;
      transition: color 0.2s ease;
    }

    .nav-link-btn svg {
      transition: transform 0.22s ease;
      color: #3b3532;
    }

    .nav-link-btn:hover {
      color: var(--color-brand-primary);
    }

    .nav-item:hover .nav-link-btn svg {
      transform: rotate(180deg);
    }

    .nav-dropdown {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%) translateY(12px);
      background-color: var(--color-surface);
      min-width: 240px;
      border-radius: 14px;
      padding: 12px 0;
      box-shadow: 0 16px 36px rgba(43, 38, 35, 0.12);
      border: 1px solid var(--color-border-card);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition: var(--transition-smooth);
      z-index: 1060;
    }

    .nav-item:hover .nav-dropdown {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transform: translateX(-50%) translateY(0);
    }

    .nav-dropdown__item {
      display: block;
      padding: 10px 22px;
      font-size: 0.88rem;
      color: var(--color-text-main);
      font-weight: 500;
      transition: background 0.18s ease, color 0.18s ease;
    }

    .nav-dropdown__item:hover {
      background-color: #f7efe9;
      color: var(--color-brand-primary);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 20px;
      flex-shrink: 0;
    }

    .action-icon-btn {
      background: none;
      border: none;
      padding: 6px;
      color: var(--color-text-main);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      position: relative;
      border-radius: 50%;
      transition: color 0.2s ease, transform 0.18s ease;
    }

    .action-icon-btn svg {
      width: 22px;
      height: 22px;
      stroke-width: 1.65;
      stroke: currentColor;
      fill: none;
    }

    .action-icon-btn:hover {
      color: var(--color-brand-primary);
      transform: translateY(-2px);
    }

    .action-badge {
      position: absolute;
      top: -1px;
      right: -3px;
      background-color: var(--color-brand-primary);
      color: #ffffff;
      font-size: 0.65rem;
      font-weight: 700;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid #ffffff;
    }

    .mobile-menu-toggle {
      display: none;
      background: none;
      border: none;
      padding: 6px;
      font-size: 1.35rem;
      color: var(--color-text-main);
      cursor: pointer;
    }