.program-filter-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin: -1.6rem 0 2.4rem;
}

.program-filter-links a {
  min-height: 2.45rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--paper);
  background: rgba(238, 230, 211, 0.055);
  text-decoration: none;
}

.program-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}

.program-list-card {
  min-height: 100%;
  background: rgba(8, 14, 42, 0.94);
}

.program-card-link {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  gap: 1.15rem;
  min-height: 100%;
  padding: 1.35rem;
  color: inherit;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.program-card-link:hover,
.program-card-link:focus-visible {
  background: rgba(237, 208, 139, 0.07);
  outline: none;
}

.program-icon,
.program-detail-symbol {
  display: block;
  border: 1px solid rgba(237, 208, 139, 0.42);
  border-radius: 50%;
  background: rgba(238, 230, 211, 0.96);
  box-shadow: inset 0 0 0 1px rgba(238, 230, 211, 0.06), 0 0 26px rgba(237, 208, 139, 0.14);
}

.program-icon {
  width: 4.4rem;
  height: 4.4rem;
  object-fit: cover;
  padding: 0;
}

.program-card-main h2 {
  margin: 0.45rem 0 0.45rem;
  font-size: 1.13rem;
  line-height: 1.45;
}

.program-card-main p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--paper-soft);
  font-size: 0.84rem;
  line-height: 1.75;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.program-detail-layout {
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.34fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.program-detail-symbol {
  width: min(18rem, 70vw);
  aspect-ratio: 1;
  justify-self: center;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.program-detail-symbol img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.program-detail-panel {
  max-width: 860px;
  margin: 0 auto;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  border: 1px solid var(--line);
  background: rgba(8, 14, 42, 0.86);
  box-shadow: var(--shadow);
}

.program-detail-panel p {
  margin: 0.7rem 0 0;
  color: var(--paper-soft);
  font-size: 1rem;
  line-height: 2;
}

@media (max-width: 760px) {
  .program-card-link {
    grid-template-columns: 3.7rem minmax(0, 1fr);
    padding: 1.05rem;
  }
  .program-icon {
    width: 3.7rem;
    height: 3.7rem;
  }
  .program-detail-layout {
    grid-template-columns: 1fr;
  }
}


.grade-filter-tabs { max-width: 100%; margin: -1.25rem auto .8rem; overflow-x: auto; overscroll-behavior-inline: contain; }
.grade-filter-tab { flex: 0 0 auto; white-space: nowrap; }
.grade-key { margin: 0 0 1.6rem; color: var(--muted); font-size: .76rem; text-align: center; }
.grade-key b { color: var(--gold-bright); font-family: var(--f-display); }
.program-list-card[hidden] { display: none; }


/* Special project banners */
.special-project-banners { display:grid; gap:1.25rem; }
.special-project-banner-wrap { grid-column:1 / -1; min-width:0; }
.special-project-banner { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:stretch; min-height:12.5rem; overflow:hidden; border:1px solid rgba(237,208,139,.5); color:var(--paper); background:#111a38; text-decoration:none; box-shadow:var(--shadow); transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.special-project-banner::before { content:""; position:absolute; inset:0 auto 0 0; z-index:-1; width:.55rem; background:var(--project-accent,#d76a5f); }
.special-project-banner::after { content:""; position:absolute; right:7.5rem; top:0; bottom:0; z-index:-1; width:1px; background:rgba(237,208,139,.24); transform:skewX(-13deg); }
.special-project-banner:hover,.special-project-banner:focus-visible { transform:translateY(-2px); border-color:var(--gold-bright); outline:none; background:#172246; }
.project-banner-copy { align-self:center; padding:clamp(1.25rem,3vw,2rem) clamp(1.25rem,4vw,3rem); }
.project-banner-kicker { display:block; color:var(--project-accent,#e6aa75); font-family:var(--f-display); font-size:.66rem; font-weight:700; }
.project-banner-copy strong { display:block; margin:.35rem 0; font-family:var(--f-serif); font-size:clamp(2rem,5vw,4rem); line-height:1.15; }
.project-banner-copy p { max-width:48rem; margin:0; color:var(--paper-soft); font-size:.88rem; line-height:1.8; }
.project-banner-meta { display:block; margin-top:.8rem; color:var(--gold-bright); font-size:.72rem; }
.project-banner-mark { display:grid; place-items:center; min-width:clamp(7rem,15vw,13rem); padding:1rem; color:var(--project-accent,#d76a5f); background:rgba(5,9,21,.42); font-family:var(--f-display); font-size:clamp(4.5rem,10vw,8.5rem); font-weight:700; line-height:1; }
.banner-manzai { --project-accent:#e78b75; }
.banner-nishippon { --project-accent:#65c4b5; }
.banner-nishippon .project-banner-copy strong { font-size:clamp(1.65rem,4vw,3.3rem); overflow-wrap:anywhere; }
.program-detail-banner { display:flex; flex-direction:column; justify-content:center; width:min(31rem,82vw); min-height:17rem; justify-self:center; padding:clamp(1.4rem,4vw,2.6rem); border:1px solid rgba(237,208,139,.54); color:var(--paper); background:#111a38; box-shadow:var(--shadow); }
.program-detail-banner span { color:var(--project-accent); font-family:var(--f-display); font-size:.72rem; font-weight:700; }
.program-detail-banner strong { margin:.45rem 0; font-family:var(--f-serif); font-size:clamp(2.4rem,6vw,5.2rem); line-height:1.1; overflow-wrap:anywhere; }
.program-detail-banner small { color:var(--paper-soft); font-family:var(--f-display); font-size:.68rem; }
@media (max-width:760px){.special-project-banner{min-height:11rem}.project-banner-mark{min-width:5.5rem;font-size:3.8rem}.project-banner-copy p{display:none}.program-detail-banner{min-height:13rem}.program-detail-banner strong{font-size:2.45rem}}