:root {
      --navy: #1e3a5f;
      --navy-dark: #152a44;
      --teal: #0d9488;
      --teal-dark: #0f766e;
      --gray-50: #f9fafb;
      --gray-100: #f3f4f6;
      --gray-200: #e5e7eb;
      --gray-700: #374151;
      --gray-900: #111827;
    }

    .egccc-archive {
      color: var(--gray-900);
    }

    .egccc-hero {
      background: linear-gradient(135deg, #F0F9FF 0%, #E0F2FE 100%);
      color: #0c4a6e;
      padding: 3rem 1.5rem;
      text-align: center;
    }

    .egccc-hero h1 {
      font-size: 2rem;
      font-weight: 700;
      margin: 0 0 1rem;
      line-height: 1.2;
    }

    .egccc-badge {
      display: inline-block;
      padding: 0.4rem 1rem;
      border-radius: 20px;
      font-size: 0.875rem;
      margin: 1rem 0;
      background: rgba(12, 74, 110, 0.08);
      border: 1px solid rgba(12, 74, 110, 0.2);
      color: #0c4a6e;
    }

    .egccc-cta-group {
      margin: 1.5rem 0 1rem;
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      justify-content: center;
    }

    .egccc-btn {
      display: inline-block;
      padding: 0.75rem 1.5rem;
      border-radius: 6px;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.2s;
      font-size: 0.95rem;
    }

    .egccc-btn-primary {
      background: #0284c7;
      color: white;
    }

    .egccc-btn-primary:hover {
      background: #0369a1;
    }

    .egccc-btn-secondary {
      background: rgba(12, 74, 110, 0.08);
      color: #0c4a6e;
      border: 1px solid rgba(12, 74, 110, 0.25);
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
    }

    .egccc-btn-secondary:hover {
      background: rgba(12, 74, 110, 0.12);
    }

    .egccc-container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    .egccc-section {
      padding: 3rem 0;
    }

    .egccc-section-title {
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--navy);
      margin: 0 0 1.5rem;
      text-align: center;
    }

    .egccc-quick-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 0.75rem;
      margin: 2rem 0;
    }

    .egccc-quick-link {
      background: white;
      border: 1px solid var(--gray-200);
      padding: 0.875rem 1rem;
      border-radius: 6px;
      text-decoration: none;
      color: var(--navy);
      font-weight: 500;
      transition: all 0.2s;
      display: block;
    }

    .egccc-quick-link:hover {
      border-color: var(--teal);
      background: var(--gray-50);
      transform: translateY(-2px);
    }

    .egccc-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1.5rem;
      margin: 2rem 0;
    }

    .egccc-card {
      background: white;
      border: 1px solid var(--gray-200);
      border-radius: 8px;
      padding: 1.5rem;
    }

    .egccc-card h3 {
      font-size: 1.25rem;
      color: var(--navy);
      margin: 0 0 0.5rem;
    }

    .egccc-card-links {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
      margin-top: 1rem;
    }

    .egccc-card-link {
      color: var(--teal);
      text-decoration: none;
      font-weight: 500;
      font-size: 0.9rem;
    }

    .egccc-card-link:hover {
      text-decoration: underline;
    }

    .egccc-upcoming-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 1.5rem;
      margin: 2rem 0;
    }

    .egccc-upcoming-card {
      background: white;
      border: 1px solid var(--gray-200);
      border-radius: 8px;
      padding: 1.75rem 1.5rem;
      transition: all 0.3s ease;
      text-decoration: none;
      display: block;
      box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

    .egccc-upcoming-card:hover {
      border-color: var(--teal);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      transform: translateY(-3px);
    }

    .egccc-upcoming-card h3 {
      font-size: 1.15rem;
      color: var(--navy);
      margin: 0 0 1rem;
      line-height: 1.4;
      font-weight: 600;
    }

    .egccc-upcoming-card:hover h3 {
      color: var(--teal);
    }

    .egccc-upcoming-meta {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
      font-size: 0.9rem;
      color: var(--gray-700);
    }

    .egccc-upcoming-date,
    .egccc-upcoming-location {
      display: flex;
      align-items: center;
      gap: 0.25rem;
    }

    .egccc-upcoming-meta::after {
      content: "";
    }

    .egccc-sessions-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1rem;
      margin: 1.5rem 0;
    }

    .egccc-session-link {
      background: var(--gray-50);
      padding: 1rem;
      border-left: 3px solid var(--teal);
      border-radius: 4px;
      text-decoration: none;
      color: var(--navy);
      font-weight: 500;
      display: block;
      transition: all 0.2s;
    }

    .egccc-session-link:hover {
      background: white;
      border-left-color: var(--navy);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .egccc-text-center {
      text-align: center;
    }

    .egccc-speakers-links {
      display: flex;
      gap: 1rem;
      justify-content: center;
      flex-wrap: wrap;
      margin: 1.5rem 0;
    }

    .egccc-about {
      background: var(--gray-50);
    }

    .egccc-about-content {
      max-width: 800px;
      margin: 0 auto;
    }

    .egccc-topics {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 0.75rem;
      margin: 1.5rem 0;
    }

    .egccc-topic {
      padding-left: 1.5rem;
      position: relative;
    }

    .egccc-topic:before {
      content: "▪";
      color: var(--teal);
      position: absolute;
      left: 0;
      font-size: 1.2rem;
    }

    .egccc-contact {
      background: var(--navy);
      color: white;
      text-align: center;
      padding: 2.5rem 1.5rem;
    }

    .egccc-contact a {
      color: var(--teal);
      font-weight: 600;
    }

    .egccc-contact a:hover {
      color: white;
    }

    @media (max-width: 768px) {
      .egccc-hero h1 {
        font-size: 1.5rem;
      }
      .egccc-section {
        padding: 2rem 0;
      }
      .egccc-cards {
        grid-template-columns: 1fr;
      }
    }