:root {
   --bg-primary: #0C0B0A;
   --bg-elevated: #151413;
   --bg-glass: rgba(21, 20, 19, 0.85);
   --text-primary: #FAF6F0;
   --text-muted: #9E9890;
   --accent: #D4A24E;
   --accent-light: #E8C278;
   --accent-glow: rgba(212, 162, 78, 0.12);
   --accent-glow-strong: rgba(212, 162, 78, 0.25);
   --border: rgba(212, 162, 78, 0.10);
   --border-hover: rgba(212, 162, 78, 0.30);
   --font-display: 'Playfair Display', Georgia, serif;
   --font-body: 'DM Sans', system-ui, sans-serif;
 }

 body {
   background: var(--bg-primary);
   font-family: var(--font-body);
   min-height: 100vh;
   overflow-x: hidden;
 }

 /* ═══════════════════════════════════
     GRAIN OVERLAY
  ═══════════════════════════════════ */
 .grain {
   position: fixed;
   inset: 0;
   pointer-events: none;
   z-index: 9999;
   opacity: 0.022;
   background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
   background-repeat: repeat;
   background-size: 180px;
 }

 /* ═══════════════════════════════════
     TOP UTILITY BAR
  ═══════════════════════════════════ */
 .top-bar {
   background: var(--bg-primary);
   border-bottom: 1px solid var(--border);
   padding: 0 clamp(1.5rem, 5vw, 5rem);
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
   z-index: 100;
   animation: fadeDown 0.5s ease both;
 }

 .top-bar::after {
   content: '';
   position: absolute;
   bottom: -1px;
   left: 50%;
   transform: translateX(-50%);
   width: 100px;
   height: 1px;
   background: linear-gradient(90deg, transparent, var(--accent), transparent);
   opacity: 0.5;
 }

 .meta-group {
   display: flex;
   align-items: center;
   gap: 1.6rem;
 }

 .meta-item {
   display: flex;
   align-items: center;
   gap: 0.45rem;
   font-size: 0.68rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--text-muted);
   font-weight: 500;
 }

 .meta-item svg {
   width: 12px;
   height: 12px;
   stroke: var(--accent);
   stroke-width: 1.8;
   fill: none;
 }

 .meta-divider {
   width: 3px;
   height: 3px;
   border-radius: 50%;
   background: var(--accent);
   opacity: 0.5;
 }

 .social-links {
   display: flex;
   align-items: center;
   gap: 0.15rem;
 }

 .social-links a {
   width: 28px;
   height: 28px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   color: var(--text-muted);
   text-decoration: none;
   transition: all 0.3s ease;
   position: relative;
 }

 .social-links a::before {
   content: '';
   position: absolute;
   inset: 0;
   border-radius: 50%;
   background: var(--accent-glow);
   transform: scale(0);
   transition: transform 0.3s ease;
 }

 .social-links a:hover::before {
   transform: scale(1);
 }

 .social-links a:hover {
   color: var(--accent-light);
 }

 .social-links a svg {
   width: 13px;
   height: 13px;
   fill: currentColor;
   position: relative;
   z-index: 1;
 }

 /* ═══════════════════════════════════
     MAIN NAVIGATION
  ═══════════════════════════════════ */
 .main-nav {
   background: radial-gradient(ellipse 900px 500px at 15% 0%, rgba(165, 29, 86, .25) 0%, transparent 60%), radial-gradient(ellipse 700px 400px at 90% 100%, rgba(212, 160, 75, .12) 0%, transparent 60%), linear-gradient(180deg, #1a0309 0%, #0d020a 100%);
   border-bottom: 1px solid var(--border);
   padding: 0 clamp(1.5rem, 5vw, 5rem);
   height: 68px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: sticky;
   top: 0;
   z-index: 99;
   backdrop-filter: blur(24px);
   -webkit-backdrop-filter: blur(24px);
   animation: fadeDown 0.5s 0.1s ease both;
 }

 /* ── Brand ── */
 .brand {
   display: flex;
   align-items: center;
   gap: 0.8rem;
   text-decoration: none;
   flex-shrink: 0;
 }

 .brand-icon {
   width: 36px;
   height: 36px;
   border: 1.5px solid var(--accent);
   border-radius: 8px;
   display: grid;
   place-items: center;
   position: relative;
   overflow: hidden;
   transition: box-shadow 0.3s ease;
 }

 .brand:hover .brand-icon {
   box-shadow: 0 0 18px var(--accent-glow);
 }

 .brand-icon::after {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, var(--accent-glow), transparent);
 }

 .brand-icon svg {
   width: 16px;
   height: 16px;
   fill: var(--accent);
   position: relative;
   z-index: 1;
 }

 .brand-text {
   display: flex;
   flex-direction: column;
 }

 .brand-name {
   font-family: var(--font-display);
   font-size: 1.1rem;
   font-weight: 600;
   color: var(--text-primary);
   letter-spacing: -0.01em;
   line-height: 1.15;
 }

 .brand-tagline {
   font-size: 0.56rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--accent);
   font-weight: 500;
   line-height: 1;
   margin-top: 1px;
 }

 /* ── Nav Links ── */
 .nav-links {
   display: flex;
   align-items: center;
   gap: 0;
   list-style: none;
 }

 .nav-links li {
   position: relative;
 }

 .nav-links a {
   position: relative;
   padding: 0.5rem 0.9rem;
   font-size: 0.8rem;
   font-weight: 400;
   letter-spacing: 0.025em;
   color: var(--text-muted);
   text-decoration: none;
   transition: color 0.3s ease;
   white-space: nowrap;
 }

 .nav-links a::after {
   content: '';
   position: absolute;
   bottom: -2px;
   left: 0.9rem;
   right: 0.9rem;
   height: 1.5px;
   background: var(--accent);
   transform: scaleX(0);
   transform-origin: right;
   transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }

 .nav-links a:hover {
   color: var(--text-primary);
 }

 .nav-links a:hover::after {
   transform: scaleX(1);
   transform-origin: left;
 }

 .nav-links a.active {
   color: var(--text-primary);
   font-weight: 500;
 }

 .nav-links a.active::after {
   transform: scaleX(1);
 }

 /* ── CTA Buttons ── */
 .nav-actions {
   display: flex;
   align-items: center;
   gap: 0.65rem;
   flex-shrink: 0;
 }

 .btn {
   padding: 0.55rem 1.35rem;
   font-family: var(--font-body);
   font-size: 0.74rem;
   font-weight: 500;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   border-radius: 5px;
   cursor: pointer;
   transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   text-decoration: none;
   display: inline-flex;
   align-items: center;
   gap: 0.45rem;
   position: relative;
   overflow: hidden;
 }

 .btn span {
   position: relative;
   z-index: 1;
 }

 .btn-arrow {
   width: 13px;
   height: 13px;
   stroke: currentColor;
   stroke-width: 2;
   fill: none;
   position: relative;
   z-index: 1;
   transition: transform 0.3s ease;
 }

 .btn:hover .btn-arrow {
   transform: translateX(3px);
 }

 .btn-outline {
   background: transparent;
   color: var(--text-primary);
   border: 1px solid var(--border-hover);
 }

 .btn-outline:hover {
   border-color: var(--accent);
   color: var(--accent-light);
   box-shadow: 0 0 20px var(--accent-glow);
 }

 .btn-primary {
   background: linear-gradient(135deg, var(--accent), #C48B30);
   color: var(--bg-primary);
   border: 1px solid transparent;
   font-weight: 600;
   box-shadow: 0 2px 14px rgba(212, 162, 78, 0.2);
 }

 .btn-primary::before {
   content: '';
   position: absolute;
   inset: 0;
   background: linear-gradient(135deg, var(--accent-light), var(--accent));
   opacity: 0;
   transition: opacity 0.35s ease;
 }

 .btn-primary:hover {
   transform: translateY(-1px);
   box-shadow: 0 6px 28px rgba(212, 162, 78, 0.35);
 }

 .btn-primary:hover::before {
   opacity: 1;
 }

 /* ═══════════════════════════════════
     ACCENT STRIP
  ═══════════════════════════════════ */
 .accent-strip {
   height: 3px;
   background: linear-gradient(90deg,
       var(--bg-primary) 0%,
       var(--accent) 25%,
       var(--accent-light) 50%,
       var(--accent) 75%,
       var(--bg-primary) 100%);
   opacity: 0.5;
   animation: shimmer 5s ease-in-out infinite;
 }

 /* ═══════════════════════════════════
     RESPONSIVE
  ═══════════════════════════════════ */
 @media (max-width: 1080px) {
   .nav-links a {
     padding: 0.5rem 0.65rem;
     font-size: 0.75rem;
   }

   .btn {
     padding: 0.5rem 1rem;
     font-size: 0.7rem;
   }
 }

 @media (max-width: 860px) {
   .nav-links {
     display: none;
   }

   .brand-tagline {
     display: none;
   }

   .main-nav {
     height: 58px;
   }

   .hamburger {
     display: flex !important;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
     padding: 6px;
     margin-right: 0.5rem;
   }

   .hamburger span {
     width: 20px;
     height: 1.5px;
     background: var(--text-muted);
     border-radius: 1px;
     transition: all 0.3s ease;
   }

   .hamburger:hover span {
     background: var(--accent);
   }
 }

 .hamburger {
   display: none;
 }

 /* ═══════════════════════════════════
     DATES STRIP CONTAINER
  ═══════════════════════════════════ */
 .dates-strip {
   width: 100%;
   max-width: 100%;
   position: relative;
   padding: 2.8rem 0 2.2rem;
   background: radial-gradient(ellipse 900px 500px at 15% 0%, rgba(165, 29, 86, .25) 0%, transparent 60%), radial-gradient(ellipse 700px 400px at 90% 100%, rgba(212, 160, 75, .12) 0%, transparent 60%), linear-gradient(180deg, #1a0309 0%, #0d020a 100%);
 }

 /* Section label */
 .strip-label {
   text-align: center;
   margin-bottom: 2.2rem;
   animation: fadeUp 0.5s ease both;
 }

 .strip-label span {
   font-size: 0.65rem;
   letter-spacing: 0.3em;
   text-transform: uppercase;
   color: var(--accent);
   font-weight: 500;
   display: inline-flex;
   align-items: center;
   gap: 0.8rem;
 }

 .strip-label span::before,
 .strip-label span::after {
   content: '';
   width: 30px;
   height: 1px;
   background: var(--accent);
   opacity: 0.3;
 }

 .badge-urgent {
   background: rgba(232, 93, 74, 0.1);
   color: #fff;
   border: 1px solid rgba(232, 93, 74, 0.18);
   animation: pulse-badge 2s ease-in-out infinite;
 }

 /* ═══════════════════════════════════
     TIMELINE TRACK
  ═══════════════════════════════════ */
 .timeline {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 1.5rem;
   position: relative;
   width: 83%;
   margin: auto;
 }

 /* Connecting line behind cards */
 .timeline::before {
   content: '';
   position: absolute;
   top: 50%;
   left: 8%;
   right: 8%;
   height: 1px;
   background: linear-gradient(90deg,
       transparent,
       var(--accent) 15%,
       var(--accent) 85%,
       transparent);
   opacity: 0.15;
   z-index: 0;
 }

 /* ═══════════════════════════════════
     DATE CARD
  ═══════════════════════════════════ */
 .date-card {
   position: relative;
   z-index: 1;
   background: var(--bg-card);
   border: 1px solid var(--border);
   border-radius: 14px;
   padding: 2rem 1.5rem 1.8rem;
   text-align: center;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: default;
   overflow: hidden;
   animation: fadeUp 0.6s ease both;
 }

 .date-card:nth-child(1) {
   animation-delay: 0.1s;
 }

 .date-card:nth-child(2) {
   animation-delay: 0.22s;
 }

 .date-card:nth-child(3) {
   animation-delay: 0.34s;
 }

 /* Background glow */
 .date-card::before {
   content: '';
   position: absolute;
   top: -50%;
   left: 50%;
   transform: translateX(-50%);
   width: 180px;
   height: 180px;
   border-radius: 50%;
   background: var(--accent-glow);
   opacity: 0;
   transition: opacity 0.4s ease;
   pointer-events: none;
 }

 .date-card:hover {
   border-color: rgba(212, 162, 78, 0.25);
   transform: translateY(-4px);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px var(--accent-glow);
 }

 .date-card:hover::before {
   opacity: 1;
 }

 /* Urgent card (last date to nominate) */
 .date-card.urgent {
   border-color: rgba(232, 93, 74, 0.2);
   background: linear-gradient(170deg, var(--bg-card), rgba(232, 93, 74, 0.04));
 }

 .date-card.urgent::before {
   background: var(--urgent-glow);
 }

 .date-card.urgent:hover {
   border-color: rgba(232, 93, 74, 0.35);
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px var(--urgent-glow);
 }

 /* Featured card (Awards Night) */
 .date-card.featured {
   border-color: rgba(212, 162, 78, 0.2);
   background: linear-gradient(170deg, var(--bg-card), rgba(212, 162, 78, 0.05));
 }

 .date-card.featured:hover {
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 40px var(--accent-glow);
 }

 /* ── Icon Circle ── */
 .card-icon {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   display: grid;
   place-items: center;
   margin: 0 auto 1.2rem;
   position: relative;
   background: rgba(212, 162, 78, 0.08);
   border: 1px solid rgba(212, 162, 78, 0.15);
   transition: all 0.3s ease;
 }

 .date-card:hover .card-icon {
   background: rgba(212, 162, 78, 0.12);
   border-color: rgba(212, 162, 78, 0.3);
   box-shadow: 0 0 20px var(--accent-glow);
 }

 .card-icon svg {
   width: 22px;
   height: 22px;
   stroke: var(--accent);
   stroke-width: 1.6;
   fill: none;
   transition: transform 0.3s ease;
 }

 .date-card:hover .card-icon svg {
   transform: scale(1.1);
 }

 /* Urgent icon */
 .date-card.urgent .card-icon {
   background: rgba(232, 93, 74, 0.08);
   border-color: rgba(232, 93, 74, 0.2);
 }

 .date-card.urgent:hover .card-icon {
   background: rgba(232, 93, 74, 0.12);
   border-color: rgba(232, 93, 74, 0.35);
   box-shadow: 0 0 20px var(--urgent-glow);
 }

 .date-card.urgent .card-icon svg {
   stroke: var(--urgent);
 }

 /* ── Card Label ── */
 .card-label {
   font-size: 0.62rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--text-muted);
   font-weight: 500;
   margin-bottom: 0.6rem;
 }

 /* ── Card Date ── */
 .card-date {
   font-family: var(--font-display);
   font-size: 1.55rem;
   font-weight: 600;
   color: var(--text-primary);
   letter-spacing: -0.01em;
   line-height: 1.2;
   margin-bottom: 0.65rem;
 }

 .date-card.urgent .card-date {
   color: white;
 }

 .date-card.featured .card-date {
   color: var(--accent);
 }

 /* ── Status Badge ── */
 .card-badge {
   display: inline-flex;
   align-items: center;
   gap: 0.35rem;
   font-size: 0.62rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   font-weight: 600;
   padding: 0.3rem 0.75rem;
   border-radius: 100px;
   margin-top: 0.2rem;
 }

 .badge-upcoming {
   background: rgba(212, 162, 78, 0.1);
   color: var(--accent);
   border: 1px solid rgba(212, 162, 78, 0.15);
 }

 .badge-urgent {
   background: rgba(232, 93, 74, 0.1);
   color: #fff;
   border: 1px solid rgba(232, 93, 74, 0.18);
   animation: pulse-badge 2s ease-in-out infinite;
 }


 .badge-featured {
   background: rgba(212, 162, 78, 0.12);
   color: var(--accent-light);
   border: 1px solid rgba(212, 162, 78, 0.2);
 }

 .badge-dot {
   width: 5px;
   height: 5px;
   border-radius: 50%;
   background: currentColor;
 }

 .badge-urgent .badge-dot {
   animation: blink 1.4s ease-in-out infinite;
 }

 /* ═══════════════════════════════════
     BOTTOM CTA
  ═══════════════════════════════════ */
 .strip-cta {
   text-align: center;
   margin-top: 2rem;
   animation: fadeUp 0.6s 0.45s ease both;
 }

 .strip-cta p {
   font-size: 0.82rem;
   color: var(--text-muted);
   margin-bottom: 0.3rem;
 }

 .strip-cta p strong {
   color: var(--urgent);
   font-weight: 600;
 }

 .strip-cta a {
   font-size: 0.75rem;
   color: var(--accent);
   text-decoration: none;
   letter-spacing: 0.06em;
   font-weight: 500;
   transition: color 0.3s ease;
   display: inline-flex;
   align-items: center;
   gap: 0.3rem;
 }

 .strip-cta a:hover {
   color: var(--accent-light);
 }

 .strip-cta a svg {
   width: 14px;
   height: 14px;
   stroke: currentColor;
   stroke-width: 2;
   fill: none;
   transition: transform 0.3s ease;
 }

 .strip-cta a:hover svg {
   transform: translateX(3px);
 }

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

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

 @keyframes pulse-badge {

   0%,
   100% {
     box-shadow: 0 0 0 0 rgba(232, 93, 74, 0);
   }

   50% {
     box-shadow: 0 0 12px 2px rgba(232, 93, 74, 0.12);
   }
 }

 @keyframes blink {

   0%,
   100% {
     opacity: 1;
   }

   50% {
     opacity: 0.3;
   }
 }

 /* ═══════════════════════════════════
     RESPONSIVE
  ═══════════════════════════════════ */
 @media (max-width: 768px) {
   .timeline {
     grid-template-columns: 1fr;
     gap: 1rem;
     max-width: 400px;
     margin: 0 auto;
   }

   .timeline::before {
     display: none;
   }

   .date-card {
     padding: 1.6rem 1.3rem 1.4rem;
   }

   .card-icon {
     width: 46px;
     height: 46px;
     margin-bottom: 1rem;
   }

   .card-icon svg {
     width: 20px;
     height: 20px;
   }

   .card-date {
     font-size: 1.35rem;
   }
 }




 @media (max-width: 768px) {
   .aw2-cats {
     grid-template-columns: 1fr;
     /* 1 column on mobile */
   }
 }