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

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

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

.events-list-inner{
      max-width:var(--container);
      margin:0 auto;
      padding:0 24px 96px;
      position:relative;
    }

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

    .hero{
      display:grid;grid-template-columns:1.2fr .8fr;
      gap:22px;align-items:end;
      padding:0 28px 30px;
      /* border-radius:var(--radius-lg); */
      /* background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.38)); */
      /* border:1px solid var(--paper-edge-soft); */
      /* box-shadow:var(--shadow-soft); */
      position:relative;overflow:hidden;
    }
    /* .hero::before{
      content:"";position:absolute;inset:0;pointer-events:none;
      background:
        radial-gradient(760px 280px at 18% 18%, rgba(255,255,255,.55), transparent 60%),
        radial-gradient(820px 340px at 86% 22%, rgba(28,74,60,.07), transparent 62%),
        radial-gradient(680px 320px at 56% 92%, rgba(184,134,11,.06), transparent 60%);
      opacity:.9;
    } */
    .hero-left,.hero-right{position:relative;z-index:1;}
    .hero-right{display:flex;justify-content:flex-end;}
    .events-list-page .hero h1{
      margin:0 0 10px 0;
      font-size:34px;font-weight:650;color:var(--primary-jade);
      letter-spacing:var(--title-track);
    }
    .hero-desc{
      margin:0;font-size:14px;color:var(--ink-70);max-width:58ch;
    }
    .seal{
      width:56px;height:56px;border-radius:14px;
      background:rgba(28,74,60,.92);
      border:1px solid rgba(255,255,255,.18);
      box-shadow:0 10px 24px rgba(28,74,60,.16);
      display:flex;align-items:center;justify-content:center;
      position:relative;overflow:hidden;
    }
    .seal::before{
      content:"";position:absolute;inset:-40%;
      background:radial-gradient(circle, rgba(255,255,255,.22), transparent 60%);
      transform:rotate(18deg);opacity:.7;
    }
    .seal span{
      position:relative;z-index:1;
      color:rgba(255,255,255,.92);
      font-weight:650;letter-spacing:.18em;
      writing-mode:vertical-rl;text-orientation:mixed;
      font-size:12px;
    }

    .controls{
      margin-top:18px;
      margin-left:0;
      margin-right:0;
      display:flex;flex-wrap:wrap;gap:12px;
      align-items:center;justify-content:space-between;
    }
    .legend{
      display:flex;gap:14px;flex-wrap:wrap;align-items:center;
      padding:10px 12px;border-radius:999px;
      background:rgba(255,255,255,.48);
      border:1px solid var(--paper-edge-soft);
    }
    .legend-item{display:flex;align-items:center;gap:8px;color:var(--ink-70);font-size:13px;}
    .dot{width:10px;height:10px;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.08);border:1px solid rgba(255,255,255,.70);}
    .dot.practice{background:var(--color-practice);}
    .dot.ceremony{background:var(--color-ceremony);}
    .dot.course{background:var(--color-course);}

    .timeline-loading{
      text-align:center;padding:48px 20px;color:var(--ink-55);font-size:14px;
    }
    .timeline-loading.timeline-error{color:#a33;}

    .events-list-page .filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
    .events-list-page .filter-btn{
      appearance:none;border:1px solid var(--paper-edge-soft);
      background:rgba(255,255,255,.54);
      color:var(--ink-70);
      padding:10px 16px;border-radius:999px;
      font-size:13px;letter-spacing:.04em;cursor:pointer;
      transition:box-shadow .2s ease,border-color .2s ease,background .2s ease,color .2s ease;
      display:inline-flex;align-items:center;gap:8px;
    }
    .events-list-page .filter-btn:hover{border-color:rgba(184,134,11,.28);box-shadow:0 10px 22px rgba(0,0,0,.06);color:var(--primary-jade);}
    .events-list-page .filter-btn:focus-visible{outline:none;box-shadow:var(--focus);}
    .events-list-page .filter-btn.active{
      background:rgba(28,74,60,.92);
      border-color:rgba(255,255,255,.18);
      color:rgba(255,255,255,.95);
      box-shadow:0 14px 28px rgba(28,74,60,.14);
    }
    .events-list-page .filter-btn .mini{width:8px;height:8px;border-radius:999px;border:1px solid rgba(255,255,255,.70);opacity:.9;}

    .timeline{margin-top:26px;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);
    }
    a.date-badge-link {
      display: block;
      text-decoration: none;
      color: inherit;
      border-radius: 12px;
      transition: background 0.2s ease, transform 0.2s ease;
    }
    a.date-badge-link:hover,
    a.date-badge-link:focus-visible {
      background: rgba(255, 255, 255, 0.55);
      transform: translateX(-2px);
    }
    a.date-badge-link:focus-visible {
      outline: 2px solid rgba(184, 134, 11, 0.45);
      outline-offset: 2px;
    }
    .date-month{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:rgba(184,134,11,.86);transition: color .2s ease;}
    .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;transition: color .2s ease;}
    article[data-type="practice"] .date-day {
  color: rgba(28, 74, 60, 0.82);
}

article[data-type="ceremony"] .date-day {
  color: rgba(184, 134, 11, 0.82);
}

article[data-type="course"] .date-day {
  color: rgba(107, 91, 149, 0.80);
}

article[data-type="practice"] .card .title {
   /*color: rgb(28, 74, 60); jade 主色 */
  /* color: rgb(38, 64, 56); */
   color: rgb(48, 86, 75);

}

article[data-type="ceremony"] .card .title {
  color: rgb(184, 134, 11);
}

article[data-type="course"] .card .title {
  color: rgb(107, 91, 149);
}

.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);
}

.featured-section .feat-content h3 a {
  color: inherit;
  text-decoration: none;
}

.featured-section .feat-content h3 a:hover,
.featured-section .feat-content h3 a:focus-visible {
  color: var(--accent-gold);
}
    .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);
      background:var(--color-practice);
    }
    .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;
    }
    .card:hover{box-shadow:var(--shadow);border-color:var(--paper-edge);}
    .card::before{
      content:"";position:absolute;inset:0;pointer-events:none;
      background:
        radial-gradient(720px 260px at 16% 0%, rgba(255,255,255,.55), transparent 60%),
        radial-gradient(820px 360px at 88% 12%, rgba(28,74,60,.06), transparent 62%),
        radial-gradient(760px 360px at 54% 100%, rgba(184,134,11,.05), transparent 65%);
      opacity:.85;
    }

    .card .title::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin-top: 8px;
  border-radius: 2px;
  background: transparent;
}
    .card-head{
      position:relative;z-index:1;
      padding:18px 22px 14px;
      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;
    }

article[data-type="practice"] .date-month,
article[data-type="practice"] .date-weekday {
  color: rgba(28, 74, 60, 0.75);
}

article[data-type="practice"] .title::after {
  background: rgba(28, 74, 60, 0.35);
}

article[data-type="ceremony"] .date-month,
article[data-type="ceremony"] .date-weekday {
  color: rgba(184, 134, 11, 0.78);
}

article[data-type="ceremony"] .title::after {
  background: rgba(184, 134, 11, 0.38);
}

article[data-type="course"] .date-month,
article[data-type="course"] .date-weekday {
  color: rgba(107, 91, 149, 0.72);
}

article[data-type="course"] .title::after {
  background: rgba(107, 91, 149, 0.34);
}
    .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:20px;letter-spacing:.02em;color:var(--primary-jade);
      font-weight:650;line-height:1.4;
    }
    .slogan{margin:6px 0 0 0;font-size:13px;color:var(--ink-70);font-style:italic;}

    .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);}

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

    .course-sessions-preview {
      margin: 0 0 12px 0;
      padding: 10px 12px;
      border-radius: 12px;
      background: rgba(28, 74, 60, 0.04);
      border: 1px solid rgba(28, 74, 60, 0.08);
      font-size: 13px;
      line-height: 1.55;
    }
    .course-session-line {
      display: flex;
      gap: 10px;
      padding: 4px 0;
      border-bottom: 1px dashed rgba(44, 44, 44, 0.08);
    }
    .course-session-line:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .course-session-date {
      flex: 0 0 auto;
      min-width: 2.8em;
      font-weight: 600;
      color: var(--color-course);
      text-decoration: none;
      border-radius: 6px;
      transition: color 0.2s ease, background 0.2s ease;
    }
    a.course-session-date:hover,
    a.course-session-date:focus-visible {
      color: var(--primary-jade);
      background: rgba(28, 74, 60, 0.06);
    }
    .course-session-topic {
      color: var(--ink-70);
    }

    .meta-row{
      display:flex;
      flex-wrap:wrap;
      gap:14px 18px;
      align-items:center;
      padding:12px 0 6px;
      margin-top:12px;
      color:var(--ink-55);
      font-size:13px;
    }
    .meta-chip{
      display:inline-flex;align-items:center;gap:8px;
      padding:8px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.46);
      border:1px solid rgba(44,44,44,.10);
    }
    a.meta-chip-link{
      text-decoration:none;
      color:inherit;
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;
    }
    a.meta-chip-link:hover{
      transform:translateY(-2px);
      border-color:rgba(184,134,11,.35);
      box-shadow:0 8px 18px rgba(28,74,60,.08);
      background:rgba(255,252,240,.72);
    }
    a.meta-chip-link .meta-val{color:var(--primary-jade);}
    .meta-ico{
      width:26px;height:26px;border-radius:999px;
      display:flex;align-items:center;justify-content:center;
      background:rgba(28,74,60,.06);
      color:var(--primary-jade);
      font-size:14px;
      flex:0 0 auto;
    }
    .meta-val{color:var(--ink-70);font-weight:600;}
    .meta-val.muted{font-weight:550;color:var(--ink-55);}

    .details-toggle{
      margin-top:12px;
      display:flex;align-items:center;justify-content:space-between;gap:12px;
      flex-wrap:wrap;
    }

    .status{
      display:inline-flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-70);
    }
    .status b{font-weight:750;color:var(--ink-85);}
    .status .s-dot{
      width:10px;height:10px;border-radius:999px;
      border:1px solid rgba(255,255,255,.70);
      box-shadow:0 4px 10px rgba(0,0,0,.08);
      background:var(--primary-jade);
    }
    .status.open .s-dot{background:var(--primary-jade);}
    .status.limited .s-dot{background:var(--accent-gold);}
    .status.full .s-dot{background:var(--primary-warning);}
    .status.recurring .s-dot{background:var(--color-practice);}

    .actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
    .btn{
      text-decoration:none;
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      padding:10px 14px;border-radius:999px;font-size:13px;letter-spacing:.02em;
      cursor:pointer;border:1px solid var(--paper-edge-soft);
      background:rgba(255,255,255,.58);
      color:var(--ink-85);
      transition:box-shadow .2s ease,border-color .2s ease,background .2s ease,color .2s ease;
      user-select:none;
    }
    .btn:hover{border-color:rgba(184,134,11,.26);box-shadow:0 10px 22px rgba(0,0,0,.06);color:var(--primary-jade);}
    .btn:focus-visible{outline:none;box-shadow:var(--focus);}

    .btn.primary{
      background:rgba(28,74,60,.92);
      border-color:rgba(255,255,255,.18);
      color:rgba(255,255,255,.95);
      box-shadow:0 14px 28px rgba(28,74,60,.14);
    }
    .btn.primary:hover{color:rgba(255,255,255,.95);border-color:rgba(255,255,255,.22);box-shadow:0 18px 34px rgba(28,74,60,.16);}
    .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.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.ghost{
      background:transparent;
      border:1px solid rgba(44,44,44,.14);
      color:var(--ink-70);
    }
    .btn.ghost:hover{border-color:rgba(184,134,11,.28);color:var(--accent-gold);}

    .meta-grid{
      margin-top:14px;
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:12px 14px;
      padding:14px;
      border-radius:var(--radius-md);
      background:rgba(255,255,255,.40);
      border:1px dashed rgba(44,44,44,.14);
    }
    .meta-item{
      display:flex;gap:10px;align-items:flex-start;
      padding:10px 12px;border-radius:var(--radius-md);
      border:1px dashed rgba(44,44,44,.14);
      background:rgba(255,255,255,.52);
      min-width:0;
    }
    .ico{
      width:34px;height:34px;border-radius:999px;
      background:rgba(28,74,60,.06);
      display:flex;align-items:center;justify-content:center;
      color:var(--primary-jade);
      flex-shrink:0;font-size:16px;
    }
    .meta-text{min-width:0;}
    .label{
      font-size:11px;color:var(--ink-55);letter-spacing:.12em;text-transform:uppercase;margin-bottom:2px;
    }
    .value{
      font-size:14px;color:var(--ink-85);font-weight:600;line-height:1.55;word-wrap:break-word;
    }

    details.details{
      margin-top:10px;
    }
    details.details summary{
      list-style:none;
      cursor:pointer;
      display:inline-flex;align-items:center;gap:8px;
      padding:9px 12px;border-radius:999px;
      border:1px solid rgba(44,44,44,.14);
      background:rgba(255,255,255,.52);
      color:var(--ink-70);
      font-size:13px;
      user-select:none;
      transition:box-shadow .2s ease,border-color .2s ease,color .2s ease;
    }
    details.details summary::-webkit-details-marker{display:none;}
    details.details summary:hover{
      border-color:rgba(184,134,11,.26);
      box-shadow:0 10px 22px rgba(0,0,0,.06);
      color:var(--primary-jade);
    }
    details.details[open] summary{
      background:rgba(28,74,60,.92);
      border-color:rgba(255,255,255,.18);
      color:rgba(255,255,255,.95);
      box-shadow:0 14px 28px rgba(28,74,60,.14);
    }
    .chev{
      width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
      border-radius:999px;background:rgba(255,255,255,.42);
      color:rgba(44,44,44,.75);
      transition:transform .2s ease;
    }
    details.details[open] .chev{ transform:rotate(180deg); }

    .empty{
      margin-top:22px;padding:50px 18px;text-align:center;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);display:none;
    }
    .empty .big{font-size:28px;color:var(--ink-40);margin-bottom:6px;}

    .endnote{
      margin-top:44px;padding:18px 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);
    }
    .endnote b{color:var(--primary-jade);}

    @media (max-width:860px){
      .hero{grid-template-columns:1fr;}
      .hero-right{justify-content:flex-start;}
    }
    @media (max-width:768px){
      .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;
      }
      .meta-grid{grid-template-columns:1fr;}
      .meta-row{gap:10px 10px;}
    }
    @media (max-width:599px){
      .events-list-page .hub-topline-meta{display:none;}
      .controls{margin-left:0;margin-right:0;}
    }
    @media (max-width:420px){
      h1{font-size:28px;}
      .events-list-page .filter-btn{padding:9px 13px;}
      .card-head{flex-direction:column;align-items:flex-start;}
      .meta-chip{width:100%;justify-content:flex-start;}
      .actions{width:100%;}
      .btn{width:100%;}
    }
