.events-calendar-page {
  position: relative;
}

.events-calendar-page main section {
  padding: 0;
}

.events-calendar-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 40%, rgba(255, 255, 255, 0.22), transparent 58%),
    radial-gradient(circle at 78% 66%, rgba(255, 255, 255, 0.16), transparent 62%);
  mix-blend-mode: multiply;
  opacity: 0.95;
  z-index: -1;
}

@keyframes fadeIn {
            from { opacity: 0; transform: translateY(16px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        @keyframes pulse {
            0%,100% { opacity: 1; transform: scale(1); }
            50% { opacity: .5; transform: scale(.7); }
        }

        .events-cal-wrap {
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 24px 96px;
        }

        @media (max-width: 860px) {
            .events-cal-wrap {
                padding-left: 24px;
                padding-right: 24px;
            }
        }

         .events-calendar-page .hero-section {
            width: 100%;
            background-color: var(--bg-color);
            padding: 40px 0 90px;
        }

        .hero-inner {
            max-width: var(--container);
            margin: 0 auto;
            padding: 0 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 40px;
            position: relative;
            animation: fadeIn 0.8s ease-out;
        }
    
        .hero-copy {
            flex: 1 1 48%;
            max-width: 520px;
            text-align: left;
        }
    
        .hero-kicker {
            font-size: 0.7rem;
            letter-spacing: 0.25em;
            text-transform: uppercase;
            color: var(--accent-gold);
            opacity: 0.85;
            margin-bottom: 10px;
        }
    
        .hero-title {
            font-size: 1.75rem;
            margin: 0 0 12px;
            color: var(--primary-jade);
            padding-top: 0;
        }
    
        .hero-slogan {
            font-size: 1.125rem;
            color: var(--accent-gold);
            margin: 16px 0;
            font-style: italic;
            letter-spacing: 2px;
        }
        
        .hero-text {
            font-size: 0.875rem;
            opacity: 0.9;
        }

    
        .hero-info-wrap {
  max-width: var(--container);
  margin: -60px auto 0;
  padding: 0 20px;
}
        .hero-events-row {
            position: relative;
            bottom: -44px;
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            margin-top: 140px;
        }
    
        .hero-event-card {
            flex: 1 1 260px;
            min-width: 240px;
            background: rgba(255,255,255,0.96);
            backdrop-filter: blur(10px);
            border-radius: 14px;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 18px 40px rgba(0,0,0,0.25);
            text-decoration: none;
            color: var(--text-main);
        }
    
        .hero-event-main {
            display: flex;
            gap: 14px;
            align-items: center;
        }
    
        .hero-event-date {
            text-align: center;
            padding: 6px 10px;
            border-radius: 10px;
            background: rgba(28,74,60,0.06);
            font-size: 0.75rem;
            color: var(--primary-jade);
        }
    
        .hero-event-title {
            font-size: 0.875rem;
            font-weight: 500;
        }
    
        .hero-event-tag {
            font-size: 0.7rem;
            color: rgba(44,44,44,0.6);
        }
    
        .hero-event-arrow {
            font-size: 1rem;
            color: var(--accent-gold);
        }
    
        .after-hero-spacer {
            height: 70px;
        }
        .hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
        
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 8px;
            padding: 12px 24px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: .04em;
            text-decoration: none; border: 1px solid var(--paper-edge-soft);
            background: rgba(255,255,255,.58); color: var(--ink-85);
            cursor: pointer; transition: all .25s ease;
        }
        .btn:hover { border-color: rgba(184,134,11,.26); box-shadow: 0 10px 22px rgba(0,0,0,.06); color: var(--primary-jade); }
        .btn.primary {
            background: rgba(28,74,60,.92); color: rgba(255,255,255,.95);
            border-color: rgba(255,255,255,.18); box-shadow: 0 14px 28px rgba(28,74,60,.14);
        }
        .btn.primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(28,74,60,.18); color: rgba(255,255,255,.95); border-color: rgba(255,255,255,.3); }
        .btn.ceremony {
            background: var(--color-ceremony);
            border-color: rgba(255,255,255,.18);
            color: rgba(255,255,255,.95);
            box-shadow: 0 14px 28px rgba(28,74,60,.14);
        }
        .btn.ceremony:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 34px rgba(184,134,11,.22);
            color: rgba(255,255,255,.95);
            border-color: rgba(255,255,255,.3);
        }
        .btn.course {
            background: var(--color-course);
            border-color: rgba(255,255,255,.18);
            color: rgba(255,255,255,.95);
            box-shadow: 0 14px 28px rgba(28,74,60,.14);
        }
        .btn.course:hover {
            transform: translateY(-2px);
            box-shadow: 0 18px 34px rgba(107,91,149,.22);
            color: rgba(255,255,255,.95);
            border-color: rgba(255,255,255,.3);
        }
        .btn.ghost { background: var(--paper-2); backdrop-filter: var(--blur); border-color: rgba(44,44,44,.14); color: var(--ink-70); }
        .btn.ghost:hover { border-color: rgba(184,134,11,.28); color: var(--primary-jade); background: white; }

        .pathways {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 24px; margin-top: 60px;
            animation: fadeIn .5s .10s ease both;
        }
        .path-card {
            background: var(--paper);
            backdrop-filter: var(--blur);
            border-radius: var(--radius-lg); padding: 32px 24px 28px;
            box-shadow: var(--shadow-soft); text-decoration: none; color: var(--text-main);
            position: relative; overflow: hidden;
            border: 1px solid var(--paper-edge-soft);
            transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .path-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(184,134,11,.20); }
        .path-card::before {
            content: ""; position: absolute; top: 0; left: 0; right: 0;
            height: 4px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        }
        .path-card.practice::before { background: var(--color-practice); }
        .path-card.ceremony::before { background: var(--color-ceremony); }
        .path-card.course::before   { background: var(--color-course); }

        .path-ico {
            width: 48px; height: 48px; border-radius: 16px;
            display: flex; align-items: center; justify-content: center;
            font-size: 22px; margin-bottom: 20px;
        }
        .path-card.practice .path-ico { background: rgba(28,74,60,.08); color: var(--color-practice); }
        .path-card.ceremony .path-ico { background: rgba(184,134,11,.08); color: var(--color-ceremony); }
        .path-card.course   .path-ico { background: rgba(107,91,149,.08); color: var(--color-course); }

        .path-card-kicker {
            font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
            margin-bottom: 8px; font-weight: 600;
        }
        .path-card.practice .path-card-kicker { color: var(--color-practice); }
        .path-card.ceremony .path-card-kicker { color: var(--color-ceremony); }
        .path-card.course   .path-card-kicker { color: var(--color-course); }

        .path-card h3 {
            margin: 0 0 12px; font-size: 1.25rem; font-weight: 650; letter-spacing: .04em;
        }
        .path-card.practice h3 { color: var(--primary-jade); }
        .path-card.ceremony h3 { color: rgba(184,134,11,.9); }
        .path-card.course   h3 { color: var(--color-course); }

        .path-card p { color: var(--ink-70); font-size: 13.5px; margin: 0 0 20px; line-height: 1.95; }
        .path-freq {
            font-size: 12px; color: var(--ink-55); letter-spacing: .12em;
            border-top: 1px solid var(--paper-edge-soft); padding-top: 16px;
        }
        .path-arrow {
            position: absolute; bottom: 24px; right: 24px;
            font-size: 18px; color: var(--ink-40); transition: transform .3s, color .3s;
        }
        .path-card:hover .path-arrow { transform: translate(4px,-4px); color: var(--primary-jade); }

        .sec-head {
            display: flex; align-items: flex-end; justify-content: space-between;
            padding-bottom: 12px; border-bottom: 1px solid var(--rule); margin-bottom: 40px;
        }
        .sec-head-left .kicker {
            font-size: 11px; letter-spacing: .28em; text-transform: uppercase;
            color: var(--accent-gold); margin-bottom: 8px; font-weight: 600;
        }
        .sec-head h2 {
            font-size: 1.5rem; color: var(--primary-jade); margin: 0;
            font-weight: 650; letter-spacing: .06em;
        }
        .sec-link {
            font-size: 13px; color: var(--accent-gold); text-decoration: none; font-weight: 600;
            border-bottom: 1px solid transparent; padding-bottom: 2px;
            display: inline-flex; align-items: center; gap: 6px;
            transition: border-color .2s, color .2s;
        }
        .sec-link:hover { border-color: var(--accent-gold); color: var(--primary-jade); }

        .featured-section {
            margin-top: 80px;
            animation: fadeIn .5s .15s ease both;
        }
        .featured-grid {
            display: grid; grid-template-columns: 1.2fr 1fr;
            gap: 48px; align-items: center;
        }
        .feat-img-wrap {
            position: relative;
            border-radius: 30% 10px 30% 10px;
            overflow: hidden;
            box-shadow: 0 15px 40px rgba(28,74,60,.12);
            min-height: 560px;
        }
        .feat-img-wrap img {
            width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0;
            filter: grayscale(.1) saturate(.9);
            transition: transform .6s ease;
        }
        .feat-img-wrap:hover img { transform: scale(1.04); }

        .feat-content { display: flex; flex-direction: column; justify-content: center; }
        .feat-tag {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 11px; padding: 6px 14px; border-radius: 999px;
            margin-bottom: 18px; letter-spacing: .18em; width: fit-content; text-transform: uppercase;
            background: rgba(184,134,11,.1); color: var(--accent-gold); font-weight: 600;
        }
        .feat-tag .tdot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent-gold); }
        .feat-content h3 {
            font-size: 1.8rem; color: var(--primary-jade); margin: 0 0 16px;
            font-weight: 650; letter-spacing: .04em; line-height: 1.3;
        }
        .feat-content h3 a {
            color: inherit;
            text-decoration: none;
        }
        .feat-content h3 a:hover,
        .feat-content h3 a:focus-visible {
            color: var(--accent-gold);
        }
        .card .title a {
            color: inherit;
            text-decoration: none;
        }
        .card .title a:hover,
        .card .title a:focus-visible {
            text-decoration: underline;
            text-underline-offset: 3px;
        }
        article[data-type="practice"] .card .title a:hover,
        article[data-type="practice"] .card .title a:focus-visible {
            color: rgb(48, 86, 75);
        }
        article[data-type="ceremony"] .card .title a:hover,
        article[data-type="ceremony"] .card .title a:focus-visible {
            color: rgb(184, 134, 11);
        }
        article[data-type="course"] .card .title a:hover,
        article[data-type="course"] .card .title a:focus-visible {
            color: rgb(107, 91, 149);
        }
        .feat-content p { color: var(--ink-70); font-size: 14.5px; margin: 0 0 24px; line-height: 2; }
        .feat-meta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
        .feat-chip {
            display: inline-flex; align-items: center; gap: 6px;
            font-size: 12px; color: var(--ink-70);
            background: var(--paper); border: 1px solid var(--paper-edge-soft);
            padding: 6px 14px; border-radius: 999px; backdrop-filter: var(--blur);
        }
        a.feat-chip-link {
            text-decoration: none;
            transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
        }
        a.feat-chip-link:hover,
        a.feat-chip-link:focus-visible {
            color: var(--primary-jade);
            border-color: rgba(28, 74, 60, 0.28);
            transform: translateY(-1px);
        }
        .feat-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
        
        .feat-urgent {
            display: inline-flex; align-items: center; gap: 8px;
            font-size: 12px; padding: 8px 16px; border-radius: 999px;
            background: rgba(203,33,58,.08); color: var(--primary-warning);
            font-weight: 600; letter-spacing: .06em;
        }
        .urgent-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--primary-warning); animation: pulse 1.6s ease infinite;
        }

        .upcoming-section { margin-top: 90px; animation: fadeIn .5s .20s ease both; }
        .timeline { position: relative; padding-left: 148px; }
        .timeline::before {
            content: ""; position: absolute; left: 126px; top: 0; bottom: 0; width: 2px;
            background: linear-gradient(to bottom, rgba(44,44,44,.22), rgba(44,44,44,.06));
            border-radius: 2px;
        }
        .activity { position: relative; margin: 0 0 34px 0; }
        .date-badge {
            position: absolute; left: -148px; top: 6px;
            width: 120px; text-align: right; padding-right: 18px; color: var(--ink-70);
        }
        .date-month { font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: rgba(184,134,11,.86); }
        .date-day { font-size: 34px; line-height: 1.05; font-weight: 750; color: var(--primary-jade); margin-top: 2px; }
        .date-weekday { font-size: 12px; color: var(--ink-55); margin-top: 2px; }

        article[data-type="practice"] .date-day     { color: rgba(28,74,60,.82); }
        article[data-type="practice"] .date-month,
        article[data-type="practice"] .date-weekday { color: rgba(28,74,60,.75); }
        article[data-type="ceremony"] .date-day     { color: rgba(184,134,11,.82); }
        article[data-type="ceremony"] .date-month,
        article[data-type="ceremony"] .date-weekday { color: rgba(184,134,11,.78); }
        article[data-type="course"]   .date-day     { color: rgba(107,91,149,.80); }
        article[data-type="course"]   .date-month,
        article[data-type="course"]   .date-weekday { color: rgba(107,91,149,.72); }

        .node {
            position: absolute; left: 118px; top: 22px;
            width: 16px; height: 16px; border-radius: 999px;
            border: 2px solid rgba(255,255,255,.86); box-shadow: 0 6px 14px rgba(0,0,0,.10);
        }
        .node.practice { background: var(--color-practice); }
        .node.ceremony { background: var(--color-ceremony); }
        .node.course   { background: var(--color-course); }

        .card {
            margin-left: 40px; border-radius: var(--radius-lg);
            background: var(--paper); border: 1px solid var(--paper-edge-soft);
            box-shadow: var(--shadow-soft); overflow: hidden; position: relative;
            backdrop-filter: var(--blur);
            transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
        }
        .card:hover { box-shadow: var(--shadow); border-color: rgba(44,44,44,.10); transform: translateY(-2px); }
        
        .card-head {
            position: relative; z-index: 1; padding: 20px 24px 16px;
            border-bottom: 1px solid var(--paper-edge-soft);
            background: rgba(255,255,255,.40);
            display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
        }
        .head-left { min-width: 0; }
        .type { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-55); margin-bottom: 6px; }
        .title { margin: 0; font-size: 19px; letter-spacing: .02em; font-weight: 650; line-height: 1.4; }
        
        article[data-type="practice"] .title { color: rgb(48,86,75); }
        article[data-type="ceremony"] .title { color: rgb(184,134,11); }
        article[data-type="course"]   .title { color: rgb(107,91,149); }
        
        .title::after {
            content: ""; display: block; width: 36px; height: 2px;
            margin-top: 8px; border-radius: 2px;
        }
        article[data-type="practice"] .title::after { background: rgba(28, 74, 60, 0.35); }
        article[data-type="ceremony"] .title::after { background: rgba(184, 134, 11, 0.38); }
        article[data-type="course"] .title::after { background: rgba(107, 91, 149, 0.34); }

        .slogan { margin: 6px 0 0; font-size: 13px; color: var(--ink-55); font-style: italic; }

        .card-body { position: relative; z-index: 1; padding: 20px 24px; }
        .desc { margin: 0 0 16px; font-size: 14px; color: var(--ink-70); line-height: 1.85; }

        .meta-row {
            display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
            padding: 8px 0 12px;
        }
        .meta-chip {
            display: inline-flex; align-items: center; gap: 8px;
            padding: 6px 12px; border-radius: 999px; font-size: 13px; color: var(--ink-70);
            background: rgba(255,255,255,.5); border: 1px solid rgba(44,44,44,.10);
        }
        a.meta-chip-link {
            text-decoration: none;
            color: inherit;
            transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
        }
        a.meta-chip-link:hover {
            transform: translateY(-2px);
            border-color: rgba(184, 134, 11, 0.35);
            box-shadow: 0 8px 18px rgba(28, 74, 60, 0.08);
            background: rgba(255, 252, 240, 0.72);
        }
        a.meta-chip-link .meta-val { color: var(--primary-jade); }

        .details-toggle {
            margin-top: 14px; padding-top: 16px; 
            display: flex; align-items: center; justify-content: space-between;
            gap: 16px; flex-wrap: wrap;
        }
        .status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-70); }
        .status b { font-weight: 750; color: var(--ink-85); }
        .s-dot {
            width: 10px; height: 10px; border-radius: 999px;
            border: 1px solid rgba(255,255,255,.7); box-shadow: 0 4px 10px rgba(0,0,0,.08);
        }
        .s-dot.open      { background: var(--color-practice); }
        .s-dot.limited   { background: var(--color-ceremony); }
        .s-dot.recurring { background: var(--color-practice); }
        .s-dot.earlybird { background: var(--color-course); }
        
        .actions { display: flex; gap: 10px; flex-wrap: wrap; }
        
        .card .btn { padding: 8px 18px; font-size: 13px; }

        .tag{
      flex-shrink:0;font-size:12px;padding:6px 12px;border-radius:999px;
      border:1px solid var(--paper-edge-soft);
      background:rgba(255,255,255,.55);
      color:var(--ink-70);
      display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
    }
    .tag i{
      width:8px;height:8px;border-radius:999px;display:inline-block;
      border:1px solid rgba(255,255,255,.70);
      box-shadow:0 4px 10px rgba(0,0,0,.08);
    }
    .tag.practice i{background:var(--color-practice);}
    .tag.ceremony i{background:var(--color-ceremony);}
    .tag.course i{background:var(--color-course);}

    .cta-closing{
  margin-top: 36px;
  font-size: 1em;
  color: var(--accent-gold);
  letter-spacing: .08em;
}
        /* .cta-section {
            margin-top: 80px; padding: 48px;
            border-radius: var(--radius-lg);
            background: var(--paper); backdrop-filter: var(--blur);
            border: 1px solid var(--paper-edge-soft); box-shadow: var(--shadow-soft);
            display: flex; align-items: center; justify-content: space-between;
            gap: 32px; flex-wrap: wrap;
            position: relative; overflow: hidden;
            animation: fadeIn .5s .25s ease both;
        }
        .cta-section::before {
            content: ""; position: absolute; top: -50%; left: -10%; width: 50%; height: 200%;
            background: radial-gradient(circle, rgba(184,134,11,.06), transparent 70%);
        }
        .cta-left { position: relative; z-index: 1; }
        .cta-left h3 {
            font-size: 1.4rem; color: var(--primary-jade); margin: 0 0 10px;
            font-weight: 650; letter-spacing: .04em;
        }
        .cta-left p { color: var(--ink-70); font-size: 14.5px; margin: 0; max-width: 55ch; line-height: 1.9; }
        .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }

        .endnote {
            margin-top: 40px; padding: 20px; border-radius: var(--radius-lg);
            background: rgba(255,255,255,.46); border: 1px solid var(--paper-edge-soft);
            color: var(--ink-70); box-shadow: var(--shadow-soft); font-size: 13.5px;
        }
        .endnote b { color: var(--primary-jade); } */

        .cta-section{
  margin-top: 110px;
  padding: 70px 0 40px;
  border-top: 1px solid rgba(44,44,44,.08);
  text-align: center;
}

.cta-section h3{
  font-size: 20px;
  color: var(--primary-jade);
  margin-bottom: 20px;
  font-weight: 650;
  letter-spacing: .05em;
}

.steps{
  display:flex;
  justify-content:center;
  gap:28px;
  flex-wrap:wrap;
  margin-top: 10px;
}

.step-item{
  max-width: 220px;
  font-size: 13px;
  color: var(--ink-70);
  line-height: 1.7;
}

.step-item b{
  display:block;
  margin-bottom:6px;
  color: var(--primary-jade);
}

        @media (max-width: 860px) {
            .pathways { grid-template-columns: 1fr; }
            .featured-grid { grid-template-columns: 1fr; gap: 32px; }
            .feat-img-wrap { min-height: 260px; }
            .cta-section { flex-direction: column; align-items: flex-start; }
        }
        @media (max-width: 768px) {
            .events-calendar-page .hero-section { padding: 20px 0 50px; }
            .timeline { padding-left: 0; }
            .timeline::before { left: 18px; }
            .node { left: 10px; top: 20px; }
            .card { margin-left: 40px; }
            .date-badge { position: relative; left: 0; width: auto; text-align: left; padding: 0 0 10px 40px; margin-bottom: 6px; }
        }
        @media (max-width: 480px) {
            .cta-section { padding: 32px 24px; }
            .sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
            .hero-actions { flex-direction: column; width: 100%; }
            .hero-actions .btn { width: 100%; }
        }

        @media (max-width: 599px) {
            .events-calendar-page .hero-section {
                padding: 16px 0 40px;
            }

            .events-calendar-page .hero-inner {
                flex-direction: column-reverse;
                align-items: stretch;
                gap: 20px;
            }

            .events-calendar-page .hero-copy {
                flex: none;
                max-width: 100%;
                text-align: left;
            }

            .events-calendar-page .hero-title {
                padding-top: 0;
                font-size: 1.5rem;
            }

            .events-calendar-page .hero-slogan {
                font-size: 1rem;
                margin: 12px 0;
            }

            .events-calendar-page .hero-text {
                font-size: 0.9rem;
                line-height: 1.75;
            }
        }