:root {
     --nav-height: 96px;
 }

 * {
     box-sizing: border-box;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     background-color: #faf7f2;
     color: #2e241c;
     font-family: 'Inter', sans-serif;
     overflow-x: hidden;
 }

 /* ===== SCROLLBAR ===== */
 ::-webkit-scrollbar {
     width: 6px;
 }

 ::-webkit-scrollbar-track {
     background: #f5f3ef;
 }

 ::-webkit-scrollbar-thumb {
     background: #c49a38;
     border-radius: 3px;
 }

 /* ===== PAGES ===== */
 .page {
     display: none;
     min-height: 100vh;
 }

 .page.active {
     display: block;
 }

 /* ===== NAV ===== */
 #main-nav {
     position: fixed;
     top: 0;
     left: 0;
     right: 0;
     height: var(--nav-height);
     z-index: 1000;
     background: rgba(14, 10, 8, 0.96);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-bottom: 1px solid rgba(196, 154, 56, 0.12);
     transition: all 0.3s ease;
 }

 #main-nav.scrolled {
     background: rgba(12, 8, 6, 0.99);
     box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
 }

 .nav-link {
     position: relative;
     font-size: 0.72rem;
     font-weight: 500;
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: rgba(232, 213, 163, 0.75);
     transition: color 0.25s;
     cursor: pointer;
     padding: 4px 0;
 }

 .nav-link::after {
     content: '';
     position: absolute;
     bottom: -2px;
     left: 0;
     right: 0;
     height: 1px;
     background: #c49a38;
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.3s ease;
 }

 .nav-link:hover {
     color: #e8d5a3;
 }

 .nav-link:hover::after,
 .nav-link.active::after {
     transform: scaleX(1);
 }

 .nav-link.active {
     color: #c49a38;
 }

 /* ===== HERO SLIDER ===== */
 .hero-slider {
     position: relative;
     height: 100vh;
     overflow: hidden;
 }

 .hero-slide {
     position: absolute;
     inset: 0;
     opacity: 0;
     transition: opacity 1.2s ease;
 }

 .hero-slide.active {
     opacity: 1;
 }

 .hero-slide img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     filter: brightness(0.45);
 }

 .hero-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to bottom,
             rgba(26, 20, 16, 0.2) 0%,
             rgba(26, 20, 16, 0.4) 40%,
             rgba(26, 20, 16, 0.85) 100%);
 }

 .hero-content {
     position: absolute;
     inset: 0;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
     padding: 0 6% 10%;
     max-width: 860px;
 }

 .slider-dot {
     width: 28px;
     height: 2px;
     background: rgba(232, 213, 163, 0.35);
     cursor: pointer;
     transition: all 0.3s;
     border: none;
 }

 .slider-dot.active {
     background: #c49a38;
     width: 48px;
 }

 /* ===== SECTION SLIDERS ===== */
 .section-slider {
     position: relative;
     overflow: hidden;
 }

 .section-slide {
     display: none;
 }

 .section-slide.active {
     display: block;
 }

 /* ===== CARDS ===== */
 .book-card {
     display: block;
     background: #fff;
     border: 1px solid rgba(196, 154, 56, 0.15);
     border-radius: 4px;
     overflow: hidden;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
     cursor: pointer;
     color: inherit;
     text-decoration: none;
 }

 .book-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
 }

 .book-card img {
     width: 100%;
     aspect-ratio: 2/3;
     object-fit: cover;
 }

 /* ===== WORK VIEWER ===== */
 .work-tab-btn {
     font-size: 0.72rem;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     font-weight: 500;
     padding: 10px 20px;
     border-bottom: 2px solid transparent;
     color: #9a8870;
     cursor: pointer;
     transition: all 0.2s;
     background: none;
     border-top: none;
     border-left: none;
     border-right: none;
 }

 .work-tab-btn.active {
     color: #c49a38;
     border-bottom-color: #c49a38;
 }

 .work-tab-content {
     display: none;
 }

 .work-tab-content.active {
     display: block;
 }

 /* ===== PROSE ===== */
 .prose-literary {
     font-family: 'Cormorant Garamond', serif;
     font-size: 1.2rem;
     line-height: 1.9;
     color: #2e241c;
     max-width: 680px;
 }

 .prose-literary p {
     margin-bottom: 1.5em;
 }

 .prose-literary p:first-child::first-letter {
     float: left;
     font-size: 4.2rem;
     line-height: 0.8;
     margin-right: 8px;
     margin-top: 8px;
     font-family: 'Playfair Display', serif;
     color: #c49a38;
 }

 /* ===== TIMELINE ===== */
 .timeline-item {
     position: relative;
     padding-left: 48px;
     padding-bottom: 40px;
 }

 .timeline-item::before {
     content: '';
     position: absolute;
     left: 16px;
     top: 24px;
     bottom: 0;
     width: 1px;
     background: linear-gradient(to bottom, #c49a38, rgba(196, 154, 56, 0.1));
 }

 .timeline-dot {
     position: absolute;
     left: 9px;
     top: 4px;
     width: 16px;
     height: 16px;
     border-radius: 50%;
     background: #c49a38;
     border: 3px solid #faf7f2;
     box-shadow: 0 0 0 2px rgba(196, 154, 56, 0.3);
 }

 /* ===== GOLD DIVIDER ===== */
 .gold-divider {
     display: flex;
     align-items: center;
     gap: 16px;
     margin: 48px 0;
 }

 .gold-divider::before,
 .gold-divider::after {
     content: '';
     flex: 1;
     height: 1px;
     background: linear-gradient(to right, transparent, rgba(196, 154, 56, 0.4));
 }

 .gold-divider::after {
     background: linear-gradient(to left, transparent, rgba(196, 154, 56, 0.4));
 }

 /* ===== SECTION HEADING ===== */
 .section-label {
     font-size: 0.68rem;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: #c49a38;
     font-weight: 600;
 }

 .section-title {
     font-family: 'Playfair Display', serif;
     font-size: clamp(2rem, 4vw, 3rem);
     color: #1a1410;
     line-height: 1.15;
 }

 /* ===== MOBILE MENU ===== */
 #mobile-menu {
     position: fixed;
     inset: 0;
     z-index: 999;
     background: rgba(26, 20, 16, 0.98);
     backdrop-filter: blur(20px);
     transform: translateX(100%);
     transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
 }

 #mobile-menu.open {
     transform: translateX(0);
 }

 /* ===== GUESTBOOK ===== */
 .gb-entry {
     border-left: 3px solid rgba(196, 154, 56, 0.3);
     padding-left: 20px;
 }

 /* ===== SHOP CARD ===== */
 .shop-card {
     background: #fff;
     border: 1px solid rgba(196, 154, 56, 0.15);
     border-radius: 4px;
     overflow: hidden;
     transition: all 0.3s ease;
 }

 .shop-card:hover {
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
     transform: translateY(-4px);
 }

 /* ===== DARK TOWER SPECIAL ===== */
 #page-tower {
     background: #0d0a08;
     color: #e8d5a3;
 }

 .tower-hero {
     position: relative;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     overflow: hidden;
 }

 .tower-bg {
     position: absolute;
     inset: 0;
     background: radial-gradient(ellipse at center top, #3d1f08 0%, #1a0c05 40%, #0d0a08 100%);
 }

 .tower-particles {
     position: absolute;
     inset: 0;
     background-image:
         radial-gradient(1px 1px at 20% 30%, rgba(196, 154, 56, 0.4) 0%, transparent 100%),
         radial-gradient(1px 1px at 80% 10%, rgba(196, 154, 56, 0.3) 0%, transparent 100%),
         radial-gradient(1px 1px at 50% 70%, rgba(196, 154, 56, 0.2) 0%, transparent 100%),
         radial-gradient(2px 2px at 35% 50%, rgba(196, 154, 56, 0.25) 0%, transparent 100%),
         radial-gradient(1px 1px at 65% 85%, rgba(196, 154, 56, 0.2) 0%, transparent 100%);
 }

 /* ===== ANIMATIONS ===== */
 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes shimmer {

     0%,
     100% {
         opacity: 0.6;
     }

     50% {
         opacity: 1;
     }
 }

 @keyframes floatY {

     0%,
     100% {
         transform: translateY(0);
     }

     50% {
         transform: translateY(-12px);
     }
 }

 @keyframes flicker {

     0%,
     100% {
         opacity: 1;
     }

     92% {
         opacity: 1;
     }

     93% {
         opacity: 0.7;
     }

     94% {
         opacity: 1;
     }

     96% {
         opacity: 0.8;
     }

     97% {
         opacity: 1;
     }
 }

 .fade-up {
     animation: fadeUp 0.7s ease both;
 }

 .fade-up-d1 {
     animation: fadeUp 0.7s 0.1s ease both;
 }

 .fade-up-d2 {
     animation: fadeUp 0.7s 0.2s ease both;
 }

 .fade-up-d3 {
     animation: fadeUp 0.7s 0.3s ease both;
 }

 .float-anim {
     animation: floatY 6s ease-in-out infinite;
 }

 .flicker {
     animation: flicker 5s infinite;
 }

 /* ===== AUDIO PLAYER ===== */
 .custom-audio {
     background: linear-gradient(135deg, #1a1410, #2e241c);
     border: 1px solid rgba(196, 154, 56, 0.2);
     border-radius: 8px;
     padding: 20px 24px;
 }

 .audio-progress {
     height: 3px;
     background: rgba(196, 154, 56, 0.2);
     border-radius: 2px;
     cursor: pointer;
     position: relative;
 }

 .audio-fill {
     height: 100%;
     background: linear-gradient(to right, #c49a38, #e8d5a3);
     border-radius: 2px;
     width: 0%;
     transition: width 0.1s;
 }

 /* ===== DRAWINGS GRID ===== */
 .drawing-card {
     overflow: hidden;
     border-radius: 2px;
     cursor: pointer;
     position: relative;
 }

 .drawing-card img {
     width: 100%;
     aspect-ratio: 1;
     object-fit: cover;
     transition: transform 0.5s ease;
     filter: sepia(15%);
 }

 .drawing-card:hover img {
     transform: scale(1.05);
     filter: sepia(0%);
 }

 .drawing-overlay {
     position: absolute;
     inset: 0;
     background: rgba(26, 20, 16, 0);
     transition: background 0.3s;
     display: flex;
     align-items: flex-end;
     padding: 16px;
 }

 .drawing-card:hover .drawing-overlay {
     background: rgba(26, 20, 16, 0.5);
 }

 /* ===== LIGHTBOX ===== */
 #lightbox {
     position: fixed;
     inset: 0;
     z-index: 2000;
     background: rgba(10, 8, 6, 0.94);
     backdrop-filter: blur(10px);
     display: none;
     align-items: center;
     justify-content: center;
 }

 #lightbox.open {
     display: flex;
 }

 #lightbox img {
     max-width: 90vw;
     max-height: 90vh;
     object-fit: contain;
     border: 1px solid rgba(196, 154, 56, 0.2);
 }

 /* ===== REVIEW CARDS ===== */
 .review-card {
     background: #fff;
     border: 1px solid rgba(196, 154, 56, 0.12);
     border-top: 3px solid #c49a38;
     padding: 28px;
     border-radius: 2px;
 }

 /* ===== MEDIA GRID ===== */
 .media-thumb {
     position: relative;
     overflow: hidden;
     border-radius: 2px;
     cursor: pointer;
 }

 .media-thumb img {
     width: 100%;
     aspect-ratio: 16/9;
     object-fit: cover;
     transition: transform 0.4s ease;
 }

 .media-thumb:hover img {
     transform: scale(1.04);
 }

 .media-play {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(26, 20, 16, 0.35);
     transition: background 0.3s;
 }

 .media-thumb:hover .media-play {
     background: rgba(26, 20, 16, 0.55);
 }

 /* ===== NEWS ===== */
 .news-card {
     display: grid;
     grid-template-columns: 120px 1fr;
     gap: 20px;
     padding: 24px 0;
     border-bottom: 1px solid rgba(196, 154, 56, 0.15);
     cursor: pointer;
     transition: opacity 0.2s;
 }

 .news-card:hover {
     opacity: 0.8;
 }

 /* ===== PRINT STYLES ===== */
 @media print {

     #main-nav,
     .no-print {
         display: none !important;
     }

     body {
         background: white;
         color: black;
     }

     .prose-literary {
         font-size: 14pt;
     }
 }

 /* ===== RESPONSIVE ADJUSTMENTS ===== */
 @media (max-width: 768px) {
     .hero-content {
         padding: 0 5% 15%;
     }

     .section-title {
         font-size: 1.8rem;
     }
 }