/* Homepage Info Block Styles */
/* Info Blocks (Homepage) */
.info-block {
  text-align: center;
  padding: 1.5rem;
  background-color: #111;
  color: #fff;
  border-radius: 8px;
}

.info-block h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.info-block p {
  font-size: 1rem;
  margin-bottom: 1rem;
}

.info-button {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  background-color: #d4af37;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  border-radius: 4px;
}

.info-button:hover {
  background-color: #c19a2d;
}
/* Lessons Learned Grid for Cantonese Opera Page */
.cantonese-opera-page .lessons-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}
@media (max-width: 768px) {
    .cantonese-opera-page .lessons-grid {
        grid-template-columns: 1fr;
    }
}
.cantonese-opera-page .lessons-grid .card {
    background: white;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* Cantonese Opera Page: Reflections List Styles */
.cantonese-opera-page .reflections-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  list-style: none;
  padding-left: 0;
}
.cantonese-opera-page .reflections-list li {
  background-color: #f9f9f9;
  padding: 1rem;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* --- Nanguan Research Plan Journey Style --- */
.nanguan-research-journey {
  margin: 2.2em 0 2.5em 0;
  padding: 2.2em 1em 1.3em 1em;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(196,30,58,0.07);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nanguan-journey-steps {
  display: flex;
  justify-content: space-between;
  gap: 1.4em;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
}
.nanguan-journey-step {
  flex: 1 1 180px;
  min-width: 140px;
  max-width: 190px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  text-align: center;
  margin-bottom: 0.8em;
}
.nanguan-journey-step i {
  font-size: 2.4em;
  color: #c41e3a;
  margin-bottom: 0.7em;
  background: #f4f7fa;
  border-radius: 50%;
  width: 2.8em;
  height: 2.8em;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(196,30,58,0.10);
}
.nanguan-step-label {
  font-weight: 700;
  font-size: 1.09em;
  margin-bottom: 0.2em;
  color: #212232;
}
.nanguan-step-desc {
  font-size: 0.96em;
  color: #555;
  margin-bottom: 0.3em;
}
.nanguan-research-note {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.7em;
  padding: 0.9em 1.1em;
  background: #fff7f0;
  border-radius: 10px;
  font-size: 1.08em;
  color: #933;
  border-left: 4px solid #c41e3a;
  gap: 0.65em;
  box-shadow: 0 1px 7px rgba(196,30,58,0.08);
}
.nanguan-research-note i {
  color: #c41e3a;
  font-size: 1.15em;
}
@media (max-width: 900px) {
  .nanguan-journey-steps {
    gap: 0.7em;
  }
  .nanguan-journey-step {
    max-width: 150px;
    font-size: 0.97em;
  }
}
@media (max-width: 800px) {
  .nanguan-research-journey {
    padding: 1.2em 0.2em 0.9em 0.2em;
  }
  .nanguan-journey-steps {
    flex-direction: column;
    align-items: center;
    gap: 1.1em;
  }
  .nanguan-journey-step {
    max-width: 95vw;
    min-width: 0;
    font-size: 0.97em;
    width: 99vw;
  }
}
/* --- Nanguan Role & Impact Infographic Card Styles --- */
/* --- Nanguan Role & Impact Infographic Card Styles --- */
.nanguan-page .role-impact-content {
  display: flex;
  gap: 1.1rem;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.nanguan-page .role-impact-box {
  min-width: 220px;
  max-width: 380px;
  padding: 1rem 0.7rem 1.2rem 0.7rem;
  border-radius: 18px;
  margin: 0 0.2rem 1.2rem 0.2rem;
  box-shadow: 0 2px 8px rgba(196,30,58,0.08);
  background: #fff;
  flex: 1 1 220px;
}
.nanguan-page .role-impact-box .metrics-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5em 2em;
  margin: 1.1em 0 0.7em 0;
}

.nanguan-page .role-impact-box .metrics-row {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
  margin: 0.7em 0.7em 0 0;
}

.nanguan-page .role-impact-box .impact-icon {
  font-size: 1.6em;
  width: 2.5em;
  height: 2.5em;
  margin-bottom: 0.7em;
  background: #f4f7fa;
  color: #c41e3a;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 2px 9px rgba(196,30,58,0.10);
}
.nanguan-page .role-impact-box .impact-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 0.5em;
  justify-content: center;
  margin: 0.7em 0 0 0;
  padding: 0;
}
.nanguan-page .role-impact-box .impact-list {
  gap: 0.2em 0.3em !important; /* tighter rows and columns */
  margin: 0.1em 0 0 0 !important;
}

.nanguan-page .role-impact-box .impact-list-item div {
  line-height: 1.18 !important;
  font-size: 0.95em !important;
  margin-bottom: 0.1em !important;
  margin-top: 0.12em !important;
  font-weight: 500;
  letter-spacing: 0;
}
.nanguan-page .role-impact-box .impact-list-item {
  flex: 0 0 82px;
  text-align: center;
  font-size: 0.96em;
}
.nanguan-page .role-impact-box .impact-list-item i {
  display: block;
  font-size: 1.2em;
  margin-bottom: 0.1em;
  color: #3a4564;
}
.nanguan-page .role-impact-box .impact-label {
  font-size: 1em;
  color: #222;
  font-weight: 700;
  margin-bottom: 0.3em;
}
.nanguan-page .role-impact-box .metrics-big {
  font-size: 1.8em;
  font-weight: 800;
  margin-bottom: 0.07em;
  color: #c41e3a;
  line-height: 1.2;
}
.nanguan-page .role-impact-box .metrics-label {
  font-size: 0.95em;
  color: #333;
  margin-bottom: 0.3em;
  font-weight: 500;
}
.nanguan-page .role-impact-box .impact-bold {
  font-weight: 700;
  font-size: 1.03em;
  color: #20233a;
  margin-bottom: 0.4em;
}

@media (max-width: 900px) {
  .nanguan-page .role-impact-content {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.2rem !important;
    max-width: 99vw !important;
    padding: 0 !important;
  }
  .nanguan-page .role-impact-box {
    width: 99vw !important;
    max-width: 99vw !important;
    margin: 0 auto 1rem auto !important;
  }
}

@media (max-width: 768px) {
  /* Audio player fits container and is centered */
  .analysis-section audio {
    width: 100%;
    max-width: 360px;
    display: block;
    margin: 0 auto;
  }
  /* Only show mobile audio block above images on mobile */
  .audio-example-mobile {
    display: block;
  }
  .audio-example-desktop {
    display: none !important;
  }
}
/* Hide mobile-audio on desktop, show original desktop placement */
@media (min-width: 769px) {
  .audio-example-mobile {
    display: none !important;
  }
  .audio-example-desktop {
    display: block;
  }
}
.container p,
.container li,
.intro-light p,
.intro-alt-light p,
.survey-content p,
.improvisation-content p {
    font-size: 1.18rem !important;
}

.reflection-slide {
  background: #f5f7ff;
  padding: 60px 20px;
  text-align: center;
}

.reflection-slide h2 {
  font-size: 2.2rem;
  margin-bottom: 40px;
  color: #333;
}

.reflection-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.reflection-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  padding: 30px 20px;
  width: 280px;
  text-align: center;
}

.reflection-icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
}

.reflection-card h3 {
  font-size: 1.2rem;
  margin-bottom: 12px;
  font-weight: 600;
}

.reflection-card p {
  font-size: 0.95rem;
  color: #555;
}

.insight-intro {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
  color: #444;
}

.insight-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1rem;
}

@media (min-width: 768px) {
  .insight-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.insight-card {
  background: #fff;
  padding: 1.5rem;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.insight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.cantonese-opera-page .key-insights-section {
  background: linear-gradient(to bottom right, #eef2ff, #e7f0ff);
  padding: 4rem 1rem;
  text-align: center;
}

.cantonese-opera-page .key-insights-section h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.insight-card h3 {
  font-weight: bold;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.insight-card p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* Journey-style Research Plan */
.research-journey {
  position: relative;
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  overflow: hidden;
}
/* Remove dashed line, add curved SVG path as background */
.research-journey::before {
  content: '';
  position: absolute;
  left: 3%;
  right: 3%;
  top: 60px;
  height: 120px;
  z-index: 0;
  pointer-events: none;
  background: none;
  /* SVG wave path as background-image */
  background-image: url("data:image/svg+xml;utf8,<svg width='100%' height='120' viewBox='0 0 500 120' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0,60 C100,0 300,120 500,60' stroke='%23c41e3a' stroke-width='5' fill='none' /></svg>");
  background-repeat: no-repeat;
  background-size: 100% 120px;
  background-position: center;
  opacity: 0.95;
}
.journey-steps-container {
  position: relative;
  height: 220px;
  width: 100%;
  margin-bottom: 1.5rem;
}
.journey-step {
  position: absolute;
  width: 18%;
  text-align: center;
  display: block;
  vertical-align: top;
  margin: 0;
  z-index: 2;
}
.journey-step i {
  font-size: 2.5rem;
  color: #c41e3a;
  background: #fff;
  padding: 0.7rem;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(196,30,58,0.15), 0 2px 6px rgba(0,0,0,0.12);
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 2px 8px rgba(196,30,58,0.15));
  transition: transform 0.15s;
}
.journey-step i:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(196,30,58,0.18);
}
.journey-step h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.5rem 0 0.2rem;
  color: #222;
}
.journey-step p {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.3;
}
/* Position steps along the curve (tweak top/left for each step) */
.journey-step.step-1 {
  left: 2%;
  top: 110px;
}
.journey-step.step-2 {
  left: 20%;
  top: 45px;
}
.journey-step.step-3 {
  left: 39%;
  top: 20px;
}
.journey-step.step-4 {
  left: 59%;
  top: 45px;
}
.journey-step.step-5 {
  left: 78%;
  top: 110px;
}
.journey-step h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.5rem 0 0.2rem;
  color: #222;
}
.journey-step p {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.3;
}
@media (max-width: 768px) {
  /* Give extra margin-top to the info blocks on mobile to push them lower */
  .trust-row {
    margin-top: 2.5em !important;
    /* You may adjust the value as needed for visual comfort */
  }

  .container.split,
  .container.split.reverse {
    grid-template-columns: 1fr;
  }
  .hero-presentation {
    padding: 7rem 1.25rem 3rem;
  }
  /* Interviews & Focus Groups grid: stack on mobile */
  #survey .figure-card > div {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  #survey .survey-content {
    margin-top: 10px;
  }
  #survey .survey-content h3 {
    font-size: 1.4rem;
  }
  #survey .survey-content p,
  #survey .survey-content ul {
    font-size: 1.02rem;
  }
  /* Musical Analysis: stack columns on mobile */
  .analysis-section > div {
    flex-direction: column;
  }
  .analysis-section > div > div:first-child {
    margin-bottom: 1.5rem;
  }
  /* Project Snapshot: stack on mobile */
  .team-grid {
    grid-template-columns: 1fr;
  }
  /* Role & Impact: stack on mobile */
  .role-impact-content {
    flex-direction: column;
  }
  /* Literature Review: stack on mobile */
  .three-col-info {
    grid-template-columns: 1fr;
  }
  /* Research Plan: stack on mobile */
  .timeline-steps {
    grid-template-columns: 1fr;
  }
}

/* Mobile override for Research Plan timeline */
@media (max-width: 768px) {
  .timeline-steps {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.2em !important;
  }
  .timeline-step {
    text-align: left !important;
    margin: 0 0 1em 0 !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    padding: 1em 0.7em !important;
    background: #fff;
    border-radius: 12px;
  }
  .timeline-step h4 {
    font-size: 1.08em !important;
    margin-top: 0.6em;
  }
  .timeline-step .badge {
    margin-bottom: 0.5em !important;
  }
}
.journey-steps-container {
  position: static;
  height: auto;
  width: 100%;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.journey-step {
  position: static;
  width: 100%;
  margin-bottom: 1.5rem;
  z-index: 2;
}
.problem-statement {
  text-align: center;
  padding: 5em 2em;
}

.problem-statement .two-col-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3em;
  align-items: center;
}

.problem-statement .problem-text i {
  font-size: 2.5rem;
  color: #c41e3a;
  margin-bottom: 0.5em;
}

.problem-statement .problem-text h3 {
  font-size: 2rem;
  margin-bottom: 0.5em;
  color: #222;
}

.problem-statement .problem-text p {
  font-size: 1.2rem;
  line-height: 1.5;
  color: #333;
}

.problem-statement .problem-visual img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
  .problem-statement .two-col-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
/* Condensed Role & Impact styling */
.role-impact-content {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  flex-wrap: wrap;
  text-align: center;
}

.role-impact-box {
  flex: 1 1 250px;
  background: #fff;
  border-radius: 10px;
  padding: 1.2rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.08);
  min-height: 160px;
}

.role-impact-box h3 {
  margin-bottom: 0.5em;
  font-size: 1.3em;
  color: #222;
}

.role-impact-box p {
  font-size: 1em;
  line-height: 1.4;
  margin: 0;
}

.metrics-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.3em;
}

.metrics-list li {
  font-size: 1em;
  color: #333;
}

.metric-number {
  font-weight: bold;
  font-size: 1.2em;
  color: #c41e3a;
  margin-right: 0.3em;
}

/* Ensure fits viewport under hero */
#role-impact {
  padding-top: 2em;
  padding-bottom: 2em;
}
/* UXfolio-style sections */
.team-grid, .tools-grid, .role-impact-content, .analysis-grid, .insights-grid {
  display: grid;
  gap: 2rem;
}

.team-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.tools-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.role-impact-content {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.analysis-grid, .insights-grid {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.team-member, .tool-item, .role-impact-box, .analysis-item, .insight-item {
  background-color: white;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.team-icon, .tool-icon {
  font-size: 2rem;
  color: #c41e3a;
  margin-bottom: 1rem;
}

/* --- Tools grid card improvements --- */
.tool-icon {
    font-size: 2.4rem; /* increased from 2rem */
    color: #c41e3a;
    margin-bottom: 0.75rem;
}

.tool-item h3 {
    font-size: 1.1rem; /* slightly smaller to prevent awkward wrapping */
    font-weight: 600;
    line-height: 1.3;
    word-wrap: break-word;
    margin: 0.5rem 0 0;
}

.tool-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 140px; /* ensures uniform height even with multi-line titles */
    background-color: white;
    padding: 1.5rem;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tool-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.section-title {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: #2c3e50;
  position: relative;
  display: inline-block;
}

/* Presentation-style hero */
.hero-presentation {
  position: relative;
  min-height: 88vh;
  padding: 8rem 2rem 4rem;
  display: grid;
  place-items: center;
  text-align: left;
}
.hero-presentation .hero-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 600px at 20% 30%, rgba(0,0,0,0.15), transparent 60%),
              linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.65));
}
.hero-presentation .hero-inner {
  position: relative;
  z-index: 1;
  width: min(1100px, 92vw);
  margin-top: 5rem;
  color: #fff;
}
.hero-presentation .hero-badge {
  display: inline-block;
  font-size: 0.9rem;
  letter-spacing: .04em;
  padding: 0.4em 0.8em;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  margin-bottom: 1rem;
}
.hero-presentation .hero-title {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 4vw + 1rem, 4rem);
  line-height: 1.1;
  margin: 0.2em 0 0.2em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.4);
}
.hero-presentation .hero-subtitle {
  font-size: clamp(1rem, 1.2vw + 0.8rem, 1.4rem);
  max-width: 62ch;
  color: #f2f2f2;
  margin: 0 0 1.5rem;
  opacity: 0.95;
}
.hero-presentation .hero-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.cta-primary {
  background: #c41e3a;
  border-color: #c41e3a;
}
.cta-primary:hover {
  background: #a31730;
  border-color: #a31730;
}
.cta-secondary {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.9);
}
.cta-secondary:hover {
  background: rgba(255,255,255,0.12);
}
.hero-presentation .scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  font-size: 0.95rem;
  opacity: 0.9;
}
.hero-presentation .scroll-cue svg {
  stroke: #fff;
}

/* Mobile hero adjustments */
@media (max-width: 768px) {
  .hero-presentation {
    padding: 6rem 1.5rem 3rem;
    min-height: 70vh;
  }
  .hero-presentation .hero-inner {
    margin-top: 3rem;
    width: 100%;
    padding: 0 1rem;
  }
  .hero-presentation .hero-title {
    font-size: clamp(1.8rem, 5vw + 0.5rem, 2.8rem);
  }
  .hero-presentation .hero-subtitle {
    font-size: clamp(0.9rem, 3vw + 0.5rem, 1.2rem);
    max-width: 90%;
  }
  .hero-presentation .hero-actions {
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
    max-width: 280px;
  }
  .hero-presentation .cta-button {
    width: 100%;
    text-align: center;
  }
}

/* Banding and asymmetric splits */
.band-light {
  background: #fff;
}
.band-dark {
  background: #121212;
  color: #eee;
}
.band-texture {
  background:
    linear-gradient(to bottom, rgba(250,250,250,0.96), rgba(245,245,245,0.96)),
    url('images/noise-texture.png');
  background-size: auto, 300px;
  background-repeat: repeat;
}
.band-figure figure {
  margin: 0;
  position: relative;
  display: block;
}
.band-figure img {
  width: 100%;
  height: clamp(240px, 48vw, 520px);
  object-fit: cover;
  display: block;
  filter: saturate(0.94) contrast(1.02);
}
.band-figure figcaption {
  text-align: center;
  font-size: 0.95rem;
  color: #666;
  padding: 0.8rem 1rem 2.4rem;
}

.container.split {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.2rem, 3vw, 2.4rem);
  align-items: start;
}
.container.split.reverse {
  grid-template-columns: 0.9fr 1.1fr;
}
.split-text p {
  color: #333;
}
.band-dark .split-text p { color: #ddd; }
.figure-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  border: 1px solid #eee;
}
.figure-card img {
  display: block;
  width: 100%;
  height: auto;
}
.figure-card figcaption {
  padding: 0.8rem 1rem;
  font-size: 0.95rem;
  color: #555;
  background: #fafafa;
  border-top: 1px solid #eee;
}

/* Excerpts grid */
.excerpts .container { padding-top: 4em; padding-bottom: 4em; }
.excerpts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
}
.excerpt-card {
  background: #1b1b1b;
  color: #f0f0f0;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  padding: 1rem 1.1rem 1.2rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.excerpt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.24);
}
.excerpt-card h3 {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;
  color: #fff;
}
.excerpt-card .liner {
  margin: 0.6rem 0 0;
  font-size: 0.98rem;
  color: #ddd;
}

/* Pull quote */
.pull-quote {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(1.2rem, 1.2vw + 1rem, 1.6rem);
  color: #c41e3a;
  margin: 0 0 1.2rem;
  padding-left: 1rem;
  border-left: 4px solid #c41e3a;
}

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Utilities */
.container {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
.band-light .section-title,
.band-texture .section-title { color: #2c3e50; }
.band-dark .section-title { color: #fff; }

@media (max-width: 900px) {
  .container.split,
  .container.split.reverse {
    grid-template-columns: 1fr;
  }
  .hero-presentation {
    padding: 7rem 1.25rem 3rem;
  }
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 4px;
  background-color: #c41e3a;
}
/* --- UXfolio-style skeleton layout for Improvisation page --- */
/* Ensure skip-nav does not overlap with main nav bar */
/* Skip-to-section sticky navigation styles */
.skip-nav {
    margin-top: 0;
    background-color: #fafafa;
    border-bottom: 1px solid #ddd;
}

.skip-nav nav {
    position: sticky;
    top: 70px; /* below main nav */
    background: #fafafa;
    z-index: 500;
    display: flex;
    justify-content: center;
    gap: 2em;
    padding: 0.8em 0;
    border-bottom: 1px solid #ddd;
}

/* Link styles for sticky nav */
.skip-nav nav a {
    text-decoration: none;
    font-weight: 500;
    color: #000;
}

.skip-nav nav a:hover {
    text-decoration: underline;
}
.two-col {
  display: flex;
  gap: 2em;
  flex-wrap: wrap;
}
.two-col div {
  flex: 1 1 300px;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-up {
    opacity: 0;
    animation: fadeUp 1s ease forwards;
}
/* General Styles */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Playfair+Display:wght@600;700&display=swap');

body {
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    background-color: #000;
    color: #fff;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Navigation Bar */
nav {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 1.5em 2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    backdrop-filter: blur(15px);
    transition: background-color 0.3s;
    box-sizing: border-box;
}

nav .brand {
    font-weight: bold;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 1.2em 1.5em;
    transition: color 0.3s, transform 0.3s;
    font-weight: 500;
    font-size: 1.5em; /* Increased font size */
    position: relative;
}

nav a:not(.brand):after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    display: block;
    margin-top: 5px;
    right: 0;
    background: white;
    transition: width 0.3s ease;
}

nav a:not(.brand):hover:after {
    width: 100%;
    left: 0;
    background: white;
}

/* Hero Section */
.hero {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.7)), url('images/banner.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    text-align: center;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: fadeIn 2s ease-in-out;
}

.hero h1 {
    font-size: 4rem;
    margin: 0;
    font-weight: 800;
    letter-spacing: 2px;
}

.hero p {
    font-size: 1.8em;
    margin-top: 0.5em;
    font-weight: 200;
}

.cta-button {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 1em 2em;
    text-decoration: none;
    margin-top: 2em;
    transition: background-color 0.3s, color 0.3s, transform 0.3s;
    border-radius: 5px;
}

.cta-button:hover {
    background-color: white;
    color: black;
    transform: scale(1.05);
}

/* Intro Section */
.intro {
    text-align: center;
    padding: 6em 3em;
    font-size: 1.3em;
    line-height: 1.8;
    background-color: #0a0a0a;
}

.intro-alternate{
    text-align: center;
    padding: 8em 2em 6em;
    background: linear-gradient(to bottom, #333, #0a0a0a);
    font-size: 1.3em;
    line-height: 1.8;
}

/* Footer */
footer {
    background-color: #000;
    color: white;
    text-align: center;
    padding: 3em;
    font-size: 1em;
    border-top: 1px solid #222;
}

.footer-nav a {
    color: white;
    text-decoration: none;
    padding: 0.5em 1em;
    transition: color 0.3s;
}

.footer-nav a:hover {
    color: #ccc;
}

/* Footer navigation layout: keep links on a single row, centered */
footer .footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: nowrap;
}

@media (max-width: 768px) {
  footer .footer-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
  }
  footer .footer-nav a {
    display: inline-block;
    padding: 0.25em 0.5em;
    margin: 0; /* override any margins that cause wrapping */
  }
}

.social-icons {
    margin-top: 1em;
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.footer-bottom .social-icons {
  margin-top: 0; /* override earlier margin to keep spacing tight in the block */
}

.social-icons a {
    color: white;
    text-decoration: none;
    font-size: 1.5em;
    margin: 0 0.5em;
    transition: color 0.3s, transform 0.3s;
}

.social-icons a:hover {
    color: #ccc;
    transform: scale(1.2);
}

.footer-copyright {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 5px;
}

/* Researcher Section */
.researcher-style {
    background-color: #fff;
    color: #000;
    font-family: 'Georgia', serif;
}


.researcher-style nav {
    background-color: rgba(255, 255, 255, 0.8);
}

.researcher-style nav a,
.researcher-style footer a {
    color: #000;
}

.researcher-style nav a:hover,
.researcher-style footer a:hover {
    color: #555;
}

/* Ensure hamburger and nav links are visible on mobile for researcher-style */
.researcher-style .mobile-nav-toggle {
    color: #000; /* make hamburger icon visible on light background */
}

.researcher-style nav a {
    color: #000; /* make links visible on light background */
}

.researcher-style nav.mobile-nav-active > div:nth-of-type(2) {
    background: rgba(255,255,255,0.95); /* keep dropdown consistent with background */
}

.researcher-style nav.mobile-nav-active > div:nth-of-type(2) a {
    color: #000; /* ensure dropdown links are visible */
    border-bottom: 1px solid #ccc;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

nav a i {
    line-height: 1;
    vertical-align: middle;
    display: inline-block;
}

/* Schedule Page Specific Styles */
.schedule-page .intro-alternate {
    background-image: url('images/WanON.png');
    background-repeat: no-repeat;
    background-position: -100% 27%;
    background-origin: content-box;
    background-size: 80%;
    background-color: #000000;
    padding-left: 10%; /* create visible offset */
    position: relative;
}

/* Show only two-thirds of the background image on mobile for schedule page */
@media (max-width: 768px) {
  .schedule-page .intro-alternate {
    background-size: 150% auto; /* zoom in to show 2/3 width */
    background-position: 120% 19%; /* focus between top and middle to reveal more of the face */
  }

  .schedule-page .header-content h2.page-title {
    text-align: right;
    padding-right: -1.5em;
  }
}

.schedule-page .gradient-overlay {
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.schedule-page .header-content {
    position: relative;
    z-index: 2;
}

.schedule-page nav {
    transition: background-color 0.3s ease;
}

.schedule-page nav.scrolled {
    background-color: rgba(0, 0, 0, 0.8);
}

.nav-brand-container {
    display: flex;
    align-items: center;
    margin-right: auto;
}
.nav-brand-container .brand {
    display: inline-block;
    font-weight: bold;
}
.nav-brand-container .subtitle {
    font-size: 1em;
    color: #bbb;
    display: inline-block;
    margin-left: 1em; /* Reduced spacing between name and subtitle */
    margin-bottom: 0;
}

/* Schedule Section */
.schedule-box {
    background-color: #fff;
    padding: 2em;
    margin: 2em auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    border: 1px solid #e0e0e0;
    max-width: 1100px;
    color: #333;
}

.schedule-wrapper {
    overflow-x: auto;
    margin-top: 1.5em;
}

.schedule-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 1em;
}

.schedule-table thead th {
    background-color: #f9f9f9;
    color: #333;
    font-weight: 600;
    padding: 1.2em 1em;
    text-align: left;
}

.schedule-table tbody td {
    padding: 1.2em 1em;
    border-bottom: 1px solid #e8e8e8;
    vertical-align: middle;
}

.schedule-table tbody tr {
    transition: background-color 0.3s ease;
}

.schedule-table tbody tr:nth-child(even) {
    background-color: #fdfdfd;
}

.schedule-table tbody tr:hover {
    background-color: #f5f5f5;
}

.table-controls {
    margin-bottom: 1.5em;
    display: flex;
    align-items: center;
}

.table-controls label {
    margin-right: 1em;
    font-weight: 500;
}

.table-controls select {
    padding: 0.5em 1em;
    border-radius: 4px;
    border: 1px solid #ccc;
    background-color: #fff;
    font-size: 1em;
}

@media (max-width: 768px) {
    .schedule-table thead {
        display: none;
    }

    .schedule-table, .schedule-table tbody {
        display: block;
        width: 100%;
    }

    .schedule-table tr {
        display: block;
        margin-bottom: 1em;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        background: #fff;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        padding: 1em;
        box-sizing: border-box;
    }

    .schedule-table td {
        display: block;
        width: 100%;
        text-align: left;
        padding: 0.5em; /* Equal padding on both left and right */
        border-bottom: 1px solid #f0f0f0;
        box-sizing: border-box;
    }

    .schedule-table td:last-child {
        border-bottom: none;
    }

    .schedule-table td::before {
        content: attr(data-label);
        display: block;
        font-weight: 600;
        margin-bottom: 0.3em;
        color: #555;
    }
}

/* Responsive Navigation */
.mobile-nav-toggle {
    display: none; /* Hidden on desktop */
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}

@media (max-width: 768px) {
    /* Keep nav as a row and space out children */
    nav {
        justify-content: space-between;
        align-items: center;
    }

    /* Show subtitle on mobile with adjusted style */
    .nav-brand-container .subtitle {
        display: block;
        font-size: 0.8em; /* smaller size for mobile */
        margin-top: 0.2em;
        color: #bbb; /* keep subtle styling */
    }

    /* Show hamburger toggle */
    .mobile-nav-toggle {
        display: block;
    }

    /* Hide the desktop nav links container */
    nav > div:nth-of-type(2) {
        display: none;
    }

    /* When menu is active, display links as a dropdown */
    nav.mobile-nav-active > div:nth-of-type(2) {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%; /* Position below the nav bar */
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.95);
    }

    /* Style individual links in the mobile menu */
    nav.mobile-nav-active > div:nth-of-type(2) a {
        width: 100%;
        text-align: center;
        padding: 1em 0;
        border-bottom: 1px solid #444;
    }

    nav.mobile-nav-active > div:nth-of-type(2) a:last-child {
        border-bottom: none;
    }
}

/* Unified mobile styles for bio page only */
@media (max-width: 768px) {
  body.bio-page .bio-layout {
    padding: 0.5em; /* reduce side margins */
    flex-direction: column;
  }

  body.bio-page .bio-left {
    flex: 1 1 100%;
    min-width: auto;
    padding: 0.5em; /* reduce padding further */
    margin: 0;
  }

  body.bio-page .bio-left h2 {
    margin-top: 4.5em; /* increased to clear nav bar */
  }

  body.bio-page .intro {
    margin: 0;
    padding: 0 0.5em; /* reduce left/right padding */
    max-width: 100%;
    text-align: left;
  }

  body.bio-page .image-slideshow {
    margin: 1em 0 0 0;
    padding: 0 0.5em;
    box-sizing: border-box;
  }

  body.bio-page .bio-inline-image img {
    width: 100%;
    border-radius: 8px;
  }
}

@media (min-width: 769px) {
    .bio-inline-image {
        display: none;
    }
}
@media (max-width: 768px) {
  .researcher-style nav {
    padding-top: 2.5em; /* push header down slightly on mobile */
    padding-bottom: 1em; /* maintain balance */
  }
}
@media (max-width: 768px) {
  /* Override hero alignment and padding on researcher-style page for mobile */
  .researcher-style .hero {
    padding-top: 6em !important; /* ensure padding overrides inline styles */
    align-items: flex-start !important; /* stop vertical centering */
    justify-content: flex-start !important;
  }

  .researcher-style .hero > div {
    margin-top: 5em; /* push hero content below nav bar */
  }
}
@media (max-width: 768px) {
  #featured-projects > div > div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
  }
  #featured-projects > div > div > div:first-child {
    max-width: 100% !important;
    margin-bottom: 1em;
  }
  #featured-projects > div > div > div img {
    width: 100% !important;
    height: auto !important;
  }
}

/* New styles for counters section */
.counters {
    display: flex;
    justify-content: center;
    gap: 2em;
    margin-top: 2em;
    flex-wrap: wrap;
}

.counters div {
    text-align: center;
    font-size: 1.2em;
}

.counter-number {
    display: block;
    font-size: 2em;
    font-weight: bold;
    margin-bottom: 0.3em;
}
.intro-light,
.intro-alt-light,
.methods-grid,
.participant-grid,
.quotes-container,
.timeline {
    padding-left: 6em;
    padding-right: 6em;
}
.intro-light,
.intro-alt-light {
    text-align: center;
}
.intro-light {
    padding-top: 6em;
    padding-bottom: 6em;
    font-size: 1.3em;
    line-height: 1.8;
    background-color: #fff;
    color: #000;
}
.intro-alt-light {
    padding-top: 8em;
    padding-bottom: 6em;
    background: #fafafa;
    font-size: 1.3em;
    line-height: 1.8;
}

/* Enlarge icons globally in list-like items */
.methods-grid i,
.participant-grid i,
.quotes-container i,
.timeline i,
.intro-light li i,
.intro-alt-light li i {
    font-size: 1.3em;
    margin-right: 0.5em;
    vertical-align: middle;
}

/* Remove default bullet points for lists with icons */
.intro-light ul,
.intro-alt-light ul {
    list-style: none;
    padding-left: 0;
}

/* Consistent spacing between list items */
.intro-light li,
.intro-alt-light li {
    margin-bottom: 0.8em;
}

/* New styles for Improvisation page sections */
.researcher-style .hero.hero-presentation { /* ensure light theme body keeps hero readable */
  color: #fff;
}
.improvisation-content {
    max-width: 1100px;
    margin: 0 auto 4em;
    padding: 0 2em;
    color: #000;
    font-family: 'Georgia', serif;
}

.improvisation-content h2, 
.improvisation-content h3 {
    font-weight: 600;
    margin-bottom: 0.5em;
    color: #222;
}

.improvisation-content h2 {
    margin-top: 2em;
    font-size: 2.5em;
}

.improvisation-content h3 {
    margin-top: 1.5em;
    font-size: 1.8em;
}

.improvisation-content p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 1em;
}

.improvisation-content ul {
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.timeline {
    border-left: 3px solid #ccc;
    margin: 2em 0;
    padding-left: 1.5em;
    position: relative;
}

.timeline-phase {
    position: relative;
    margin-bottom: 2em;
}

.timeline-phase::before {
    content: '';
    position: absolute;
    left: -11px;
    top: 0;
    width: 20px;
    height: 20px;
    background-color: #888;
    border-radius: 50%;
    border: 3px solid #ccc;
}



.methods-grid .method-item {
    background: #fff;
    border: 1px solid #ddd;
    padding: 1em 1.5em;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.participant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(180px,1fr));
    gap: 1.5em;
    margin: 2em 0;
    color: #333;
}

.participant-grid .participant-item {
    background: #fafafa;
    border-radius: 6px;
    padding: 1em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    font-size: 1em;
}

/* Remove default list bullets from .methods-grid and .participant-grid items and ensure spacing */
.methods-grid p,
.participant-grid p {
    margin-bottom: 0.8em;
    list-style: none;
}

.analysis-examples {
    margin: 2em 0;
    background: #fff;
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.1);
}

.analysis-examples img {
    max-width: 100%;
    border-radius: 6px;
    margin-top: 1em;
}

.quotes-container {
    margin: 3em 0;
    font-style: italic;
    font-size: 1.2em;
    color: #555;
    border-left: 4px solid #ccc;
    padding-left: 1em;
}

.instrument-card {
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1em 1.5em;
    margin-bottom: 1em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.presentation-item {
    margin-bottom: 1.5em;
}

.presentation-item h4 {
    margin-bottom: 0.3em;
    font-weight: 600;
}

.reflection-content {
    background: #fff;
    padding: 2em;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.1);
    margin: 2em 0;
    font-size: 1.1em;
    line-height: 1.6;
    color: #222;
}

.future-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
    gap: 1.5em;
    margin: 2em 0;
}

.future-grid .future-item {
    background: #fafafa;
    border-radius: 8px;
    padding: 1.5em;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    color: #333;
}

.timeline-phase .phase-title {
    font-weight: 700;
    font-size: 1.3em;
    margin-bottom: 0.5em;
    color: #444;
}

.impact-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #fafafa;
    border: 3px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1em auto;
    font-weight: 700;
    font-size: 1.4em;
    color: #666;
    box-shadow: 0 1px 6px rgba(0,0,0,0.1);
}

/* Scoped to improvisation page to avoid overriding global nav/footer */
body.improvisation-page nav a,
body.improvisation-page nav .brand {
    color: white;
}

body.improvisation-page footer,
body.improvisation-page nav {
    background-color: rgba(0,0,0,0.3);
}

/* End of new Improvisation page styles */

/* New styles for the redesigned Improvisation page */
.two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em;
    align-items: start;
}

.three-col-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
    text-align: center;
}

.three-col-info i {
    font-size: 2rem;
    color: #c41e3a;
    margin-bottom: 0.5em;
}

.three-col-info ul li {
  margin-bottom: 0.3em;
  font-size: 1rem;
  color: #333;
}
.three-col-info ul {
  padding-left: 0;
}

.methods-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5em;
    margin-top: 2em;
}

.methods-grid p {
    background: #f0f0f0;
    padding: 1em;
    border-radius: 6px;
    margin: 0;
}

.stats {
    display: flex;
    justify-content: space-around;
    gap: 2em;
    margin-top: 3em;
    flex-wrap: wrap;
    text-align: center;
}

.stats div {
    font-size: 1.1em;
    color: #333;
}

.stats .counter-number {
    font-size: 2em;
    font-weight: bold;
}

.quotes-container {
    margin-top: 2em;
}

.quotes-container blockquote {
    background: #f9f9f9;
    border-left: 5px solid #ccc;
    padding: 1.5em;
    margin: 1em 0;
    font-style: italic;
}

.quotes-container cite {
    display: block;
    margin-top: 0.5em;
    text-align: right;
    font-style: normal;
    font-weight: bold;
}

@media (max-width: 768px) {
    .two-col-grid,
    .three-col-info {
        grid-template-columns: 1fr;
    }
    .tools-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 1rem;
        padding-bottom: 1rem;
    }
    .tool-item {
        flex: 0 0 70%; /* card takes ~70% of viewport width */
        scroll-snap-align: center;
        min-width: 200px;
    }
}


.project-meta {
    font-size: 0.95em;
    color: #666;
    margin-bottom: 1em;
}
/* Toolbox icon color for Team grid Tools card */
.team-icon.fa-toolbox {
    color: #c41e3a;
}
/* Step Tracker Styles */
.step-tracker {
  background: rgba(255,255,255,0.97);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-top: 2px solid #c41e3a;
  z-index: 800;
  padding: 1.5em 0;
  margin-bottom: 2em;
  font-size: 1.3rem;
}

.step-tracker ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5em;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.step-tracker ul::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari, Opera */
}

.step-tracker li a {
  text-decoration: none;
  font-weight: 600;
  color: #333;
  font-size: 1.3rem;
  padding: 0.6em 1.2em;
  border-radius: 25px;
  background-color: #f5f5f5;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.2s;
  display: inline-block;
  white-space: nowrap;
}

.step-tracker li a:hover {
  background-color: #c41e3a;
  color: #fff;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(196,30,58,0.12);
}

/* Adjust anchor scroll position for sections when both nav and step tracker are sticky */
section[id] {
  scroll-margin-top: 140px; /* 70px nav + ~70px step tracker */
}

@media (max-width: 768px) {
  .step-tracker ul {
    gap: 0.8em;
    padding: 0 0.5em;
  }
  .step-tracker li a {
    font-size: 1.1rem;
    padding: 0.5em 1em;
  }
}

/* Additional icon styling for role-impact section */
.role-impact-box i {
  display: block;
  font-size: 2rem;
  color: #c41e3a;
  margin-bottom: 0.5em;
}

.problem-statement .two-col-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2em;
  align-items: start;
  text-align: center;
}
.problem-statement .two-col-grid i {
  font-size: 2rem;
  color: #c41e3a;
  margin-bottom: 0.5em;
}
.problem-statement .two-col-grid h3 {
  margin-bottom: 0.5em;
  font-size: 1.5rem;
}
.problem-statement .two-col-grid p {
  font-size: 1.1rem;
  line-height: 1.5;
  color: #333;
}

 /* --- Zigzag Journey Redesign for Research Plan --- */
.research-journey-zigzag {
  position: relative;
  padding: 3rem 2rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  overflow: hidden;
}

/* Remove background dotted line and add arrows between icons */
.research-journey-zigzag::before {
  display: none;
}

.zigzag-step:not(:last-child)::after {
  content: '\f061'; /* FontAwesome arrow */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 20%; /* raise arrow above center for angled look */
  right: -25%; /* more spacing to reach next icon */
  transform: rotate(-20deg); /* slight angle upward-right */
  font-size: 1.5rem;
  color: #c41e3a;
  opacity: 0.9;
}

.zigzag-step:nth-child(even):not(:last-child)::after {
  transform: rotate(20deg); /* angled downward-right for even steps */
  top: auto;
  bottom: 20%;
}

.zigzag-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
  position: relative; /* Ensure arrows position relative to container */
}

.zigzag-step {
  width: 18%;
  text-align: center;
  position: relative;
  margin-top: 60px; /* Push steps below dotted line */
}
.zigzag-step:nth-child(odd) {
  margin-top: 90px; /* Slight stagger for odd items */
}

.zigzag-step i {
  font-size: 2.5rem;
  color: #c41e3a;
  background: #fff;
  padding: 0.7rem;
  border-radius: 50%;
  box-shadow: 0 4px 16px rgba(196,30,58,0.15);
}

.zigzag-step h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.5rem 0 0.3rem;
  color: #222;
}

.zigzag-step p {
  font-size: 0.85rem;
  color: #555;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .zigzag-steps {
    flex-direction: column;
    align-items: center;
  }
  .zigzag-step {
    width: 100%;
    margin: 1.5rem 0;
  }
  .research-journey-zigzag::before {
    display: none;
  }
}
/* Restore bullets for lists that need them, e.g. in Musical Analysis section */
ul.bullets {
  list-style: disc;
  padding-left: 1.5em;
  margin: 1em 0;
}

.section-subtitle {
  text-align: center;
  font-style: italic;
  color: #6B7280;
  font-size: 1.05rem;
  margin-bottom: 2rem;
}
footer a {
  color: white;
}
footer a:hover {
  color: #ccc;
}

/* Footer link colors for different page styles */
.researcher-style footer a,
.researcher-style footer .social-icons a {
  color: #000;
}
.researcher-style footer a:hover,
.researcher-style footer .social-icons a:hover {
  color: #555;
}

@media (max-width: 768px) {
  .container {
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .team-grid,
  .role-impact-content,
  .three-col-info,
  .analysis-grid,
  .insights-grid,
  .reflection-cards,
  .insight-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.1em !important;
    align-items: stretch !important;
    width: 100% !important;
    margin: 0 auto !important;
    max-width: 100vw !important;
  }
  .team-member,
  .role-impact-box,
  .figure-card,
  .reflection-card,
  .insight-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 99vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    flex: 1 1 100% !important;
  }
  .section-title,
  .improvisation-content h2 {
    font-size: 1.2em !important;
    text-align: center !important;
    word-break: break-word !important;
  }
  h2, h3, h4 {
    font-size: 1.15em !important;
    word-break: break-word !important;
    text-align: center !important;
  }
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  body, html {
    overflow-x: hidden !important;
  }
  .analysis-section > div {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  /* Reduce side padding for main section types */
  .improvisation-content,
  .intro-light,
  .intro-alt-light {
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Allow cards to use full width */
  .team-member,
  .role-impact-box,
  .figure-card,
  .reflection-card,
  .insight-card {
    min-width: 0 !important;
    max-width: 99vw !important;
    width: 100% !important;
    flex: 1 1 100% !important;
  }
  /* Word-break for titles, paragraphs, and lists */
  .section-title, h2, h3, h4, p, li {
    word-break: break-word !important;
    hyphens: auto !important;
  }
}
@media (max-width: 1100px) {
  #survey .figure-card > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    min-height: auto !important;
  }
  #survey .figure-card figure {
    margin-bottom: 1em;
    margin-top: 0;
  }
}
/* === Final universal mobile polish for Improvisation/Researcher page === */
@media (max-width: 768px) {

  body.researcher-style .container,
  body.researcher-style .improvisation-content,
  body.researcher-style .key-insights-section,
  body.researcher-style .intro-light,
  body.researcher-style .intro-alt-light {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 1em !important;
    padding-right: 1em !important;
    box-sizing: border-box !important;
  }

  body.researcher-style .reflection-cards,
  body.researcher-style .insight-grid,
  body.researcher-style .analysis-section > div {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.2em !important;
  }

  body.researcher-style .reflection-card,
  body.researcher-style .insight-card,
  body.researcher-style .team-member,
  body.researcher-style .role-impact-box,
  body.researcher-style .figure-card {
    width: 100% !important;
    max-width: 99vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Gongche image and its column: center and full width */
  .analysis-section > div > div:last-child {
    margin: 0 auto !important;
    align-self: center !important;
    width: 100% !important;
  }
  .analysis-section > div > div:last-child img {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    max-width: 90vw !important;
  }

  /* Ensure Key Insights and grid sections don't overflow */
  .key-insights-section .insight-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    gap: 1em !important;
  }
  .insight-card {
    width: 100% !important;
    max-width: 99vw !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* Step Tracker polish */
  .step-tracker ul {
    gap: 0.5em !important;
    padding: 0 0.5em !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto;
  }
  .step-tracker li a {
    font-size: 1.06rem !important;
    padding: 0.55em 0.9em !important;
  }

  /* Card content font size polish */
  .reflection-card p,
  .insight-card p,
  .role-impact-box p,
  .team-member p,
  .figure-card figcaption {
    font-size: 1.05rem !important;
    line-height: 1.5 !important;
  }

  /* Section title and h2, h3 uniform */
  .section-title,
  .improvisation-content h2,
  .improvisation-content h3,
  .key-insights-section h2,
  .reflection-slide h2 {
    font-size: 1.35em !important;
    text-align: center !important;
    margin-bottom: 1em !important;
    word-break: break-word !important;
  }
  h2, h3 {
    word-break: break-word !important;
    text-align: center !important;
  }
}

/* Burger menu left align for Improvisation.html mobile */
@media (max-width: 768px) {
  body.researcher-style nav {
    flex-direction: row !important;
    justify-content: flex-start !important;
  }
  body.researcher-style .mobile-nav-toggle {
    order: 0 !important;
    margin-right: 1em !important;
    margin-left: 0 !important;
  }
  body.researcher-style .nav-brand-container {
    order: 1 !important;
  }
  body.researcher-style nav > div:nth-of-type(2) {
    order: 2 !important;
  }
}
@media (max-width: 768px) {
  /* Force Musical Analysis section stack vertically and center */
  .analysis-section > div {
    flex-direction: column !important;
    align-items: center !important;
    padding: 1.1rem 0.7rem !important;
    border-left: none !important;
    border-top: 6px solid goldenrod !important;
  }
  .analysis-section > div > div:first-child {
    width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 1.5rem !important;
    padding: 1.1rem 0.5rem !important;
  }
  /* Make images/cards inside full width */
  .analysis-section img {
    max-width: 100% !important;
    height: auto !important;
  }
}
@media (max-width: 768px) {
  .researcher-style .hero-presentation .hero-inner {
    margin: 0 auto !important;
    width: 94vw !important;
    max-width: 99vw !important;
    padding-left: 0.5em !important;
    padding-right: 0.5em !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .researcher-style .hero-presentation {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
@media (max-width: 768px) {
  .researcher-style .hero-presentation {
    padding-top: 12em !important;
    padding-bottom: 1.2em !important;
    min-height: 52vh !important;
    max-height: 68vh !important;
    
  }
  .researcher-style .hero-presentation .hero-inner {
    margin-top: 0 !important;
  }
}

/* Force center alignment for subtitle and hero actions on Nanguan hero only */
#nanguan-hero .hero-inner {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#nanguan-hero .hero-subtitle {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}
#nanguan-hero .hero-actions {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  gap: 0.8rem !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Nanguan Page ONLY: Project Snapshot Card Row */
.nanguan-page .project-snapshot .snapshot-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3em;
  justify-content: center;
  align-items: stretch;
  margin-top: 2.5em;
}
.nanguan-page .snapshot-card {
  background: #fff;
  color: #2d2d2d;
  border-radius: 18px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.09);
  min-width: 148px;
  max-width: 200px;
  flex: 1 1 150px;
  padding: 1.1em 1.3em 1.2em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: box-shadow 0.18s, transform 0.18s;
}
.nanguan-page .snapshot-card:hover {
  box-shadow: 0 8px 24px rgba(196,30,58,0.13);
  transform: translateY(-2px) scale(1.025);
  z-index: 2;
}
.nanguan-page .snapshot-icon {
  background: #e7f0ff;
  color: #c41e3a;
  border-radius: 50%;
  font-size: 2.1em;
  width: 2.4em;
  height: 2.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.8em auto;
  box-shadow: 0 2px 8px rgba(196,30,58,0.11);
}
.nanguan-page .snapshot-label {
  font-size: 1em;
  font-weight: 600;
  color: #34495e;
  margin-bottom: 0.25em;
  margin-top: 0.1em;
  letter-spacing: .01em;
}
.nanguan-page .snapshot-value {
  font-size: 1.18em;
  font-weight: 700;
  margin-bottom: 0.2em;
}
.nanguan-page .snapshot-subtext {
  font-size: 0.98em;
  color: #888;
  margin-top: 0.1em;
}
@media (max-width: 900px) {
  .nanguan-page .project-snapshot .snapshot-row {
    gap: 1em;
  }
  .nanguan-page .snapshot-card {
    min-width: 130px;
    max-width: 160px;
    font-size: 0.97em;
    padding: 1em 0.9em 1.1em;
  }
}
@media (max-width: 600px) {
  .nanguan-page .project-snapshot .snapshot-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 1em;
  }
  .nanguan-page .snapshot-card {
    min-width: 74vw;
    max-width: 82vw;
    font-size: 0.99em;
    padding: 1em 0.7em 1em;
    margin-right: 0.4em;
  }
}

/* Nanguan Role & Impact Card Upgrades */
.nanguan-page .role-impact-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 3px 18px rgba(196,30,58,0.08);
  min-width: 180px;
  max-width: 320px;
  flex: 1 1 220px;
  padding: 2em 1.5em 1.7em;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nanguan-page .impact-icon {
  width: 3.5em; height: 3.5em;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 2em;
  margin: 0 auto 1em auto;
  box-shadow: 0 2px 10px rgba(196,30,58,0.10);
}
.nanguan-page .role-impact-box h3 {
  font-size: 1.3em;
  font-weight: 700;
  margin-bottom: 0.7em;
  color: #c41e3a;
  letter-spacing: .01em;
}
.nanguan-page .metrics-list li {
  font-size: 1.08em;
  margin: 0.7em 0;
}
.nanguan-page .metric-number {
  font-weight: 700;
  color: #c41e3a;
  font-size: 1.1em;
  margin-right: 0.2em;
}
.nanguan-page .mini-sub {
  color: #666;
  font-size: 0.93em;
  display: block;
  margin-top: 0.13em;
}
/* --- Nanguan Role & Impact Section: Widened and Gridded Cards (Override) --- */
.nanguan-page .role-impact-content {
  display: flex;
  gap: 2.2rem;
  justify-content: center;
  flex-wrap: nowrap;
  max-width: 1250px;
  margin: 0 auto;
  text-align: center;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.nanguan-page .role-impact-box {
  min-width: 340px;
  max-width: 400px;
  width: 32vw;
  padding: 1rem 1.4rem 1.3rem 1.4rem;
  border-radius: 18px;
  margin: 0 0.2rem 1.2rem 0.2rem;
  box-shadow: 0 2px 8px rgba(196,30,58,0.08);
  background: #fff;
  flex: 1 1 350px;
}

/* For the icon grid in My Role */
.nanguan-page .role-impact-box .impact-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.2em 0.5em !important;
  justify-content: center !important;
  margin: 0.5em 0 0 0 !important;
  padding: 0;
}
.nanguan-page .role-impact-box .impact-list-item {
  flex: none;
  min-width: 80px;
  max-width: 120px;
  margin: 0 auto;
}

.nanguan-page .role-impact-box .impact-list-item div {
  font-size: 0.98em !important;
}

.nanguan-page .role-impact-box .impact-label {
  margin-bottom: 0.15em;
}

@media (max-width: 1100px) {
  .nanguan-page .role-impact-content {
    flex-wrap: wrap;
    gap: 1rem;
  }
  .nanguan-page .role-impact-box {
    min-width: 240px;
    max-width: 98vw;
    width: 98vw;
    margin: 0 auto 1rem auto;
  }
  .nanguan-page .role-impact-box .impact-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35em 0.7em !important;
  }
}
@media (max-width: 768px) {
  .nanguan-page .role-impact-content {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.2rem !important;
    max-width: 99vw !important;
    padding: 0 !important;
  }
  .nanguan-page .role-impact-box {
    width: 99vw !important;
    max-width: 99vw !important;
    margin: 0 auto 1rem auto !important;
    min-width: 0 !important;
  }
  .nanguan-page .role-impact-box .impact-list {
    grid-template-columns: 1fr 1fr;
  }
}
/* --- Thematic Analysis Section (Nanguan Portfolio) --- */
.thematic-analysis-section {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 16px rgba(196,30,58,0.05);
  margin-top: 3em;
  margin-bottom: 3em;
  padding: 2.5em 1.2em 2em 1.2em;
}

.thematic-analysis-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  max-width: 700px;
  margin: 1.2em auto 1.7em auto;
  text-align: center;
  gap: 2.5em;
}
.thematic-header-title {
  font-size: 1.18em;
  font-weight: 700;
  color: #25324d;
  margin-bottom: 0.2em;
  display: block;
}
.thematic-header-icon {
  font-size: 1.65em;
  color: #c41e3a;
  margin-top: 0.4em;
  display: block;
}

.thematic-svg-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 2.4em;
}
.thematic-svg {
  width: 97%;
  max-width: 670px;
  height: auto;
  margin: 0 auto;
  display: block;
  background: none;
}

.thematic-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2em;
  margin: 0 auto 1.5em auto;
  max-width: 1000px;
}
.thematic-step {
  background: #f7fafd;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(196,30,58,0.06);
  padding: 1em 1em 1.2em 1em;
  font-size: 1em;
  min-width: 150px;
}
.thematic-step-label {
  font-weight: 700;
  color: #23344c;
  font-size: 1.07em;
  margin-bottom: 0.2em;
  display: block;
}
.thematic-step-body {
  font-size: 0.97em;
  color: #444;
  margin-top: 0.18em;
}

.thematic-bottomline {
  background: #fff7f1;
  border-left: 5px solid #c41e3a;
  border-radius: 10px;
  margin: 2em auto 0;
  max-width: 950px;
  padding: 1em 1.4em 1em 1.1em;
  color: #943;
  font-size: 1.07em;
  display: flex;
  align-items: flex-start;
  gap: 0.7em;
  box-shadow: 0 1px 7px rgba(196,30,58,0.08);
}
.thematic-bottomline i {
  color: #c41e3a;
  font-size: 1.35em;
  margin-top: 0.1em;
}

@media (max-width: 950px) {
  .thematic-analysis-header {
    gap: 0.8em;
    max-width: 99vw;
  }
  .thematic-steps-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.3em;
  }
  .thematic-svg {
    width: 99vw;
    min-width: 0;
    max-width: 99vw;
  }
}

@media (max-width: 650px) {
  .thematic-analysis-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.8em;
  }
  .thematic-svg {
    width: 100vw;
    max-width: 100vw;
  }
  .thematic-steps-grid {
    grid-template-columns: 1fr;
    gap: 1em;
  }
  .thematic-step {
    min-width: 0;
    padding: 1em 0.8em 1em 0.8em;
  }
}
/* === Cantonese Opera (CO) Role & Impact — isolated styles === */
#role-impact-cantoneseopera .co-role-impact-content {
  display: grid; /* no !important needed because of ID + unique class */
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 1.2rem;
  align-items: stretch;
}
@media (max-width: 1100px) {
  #role-impact-cantoneseopera .co-role-impact-content { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
}
@media (max-width: 780px) {
  #role-impact-cantoneseopera .co-role-impact-content { grid-template-columns: 1fr; }
}

#role-impact-cantoneseopera .co-role-impact-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  padding: 1.1rem 1rem 1.2rem;
  text-align: left; /* improve readability */
}
#role-impact-cantoneseopera .co-role-impact-box .impact-icon { margin-left: 0; margin-right: auto; }
#role-impact-cantoneseopera .co-role-impact-box .impact-label { text-align: left; margin-bottom: 0.3rem; }
#role-impact-cantoneseopera .co-role-impact-box .impact-subtext { text-align: left; max-width: 48ch; line-height: 1.45; }

/* My Role list — two-column tidy grid with icon + text */
#role-impact-cantoneseopera .co-impact-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 0.7rem 1rem;
  margin-top: 0.6rem;
}
@media (max-width: 900px) {
  #role-impact-cantoneseopera .co-impact-list { grid-template-columns: 1fr; }
}
#role-impact-cantoneseopera .co-impact-list-item {
  display: grid;
  grid-template-columns: 24px 1fr; /* icon + text */
  align-items: start;
  column-gap: 8px;
}
#role-impact-cantoneseopera .co-impact-list-item i { font-size: 1.15rem; color: #3a4564; margin-top: 0.1rem; }
#role-impact-cantoneseopera .co-impact-list-item div { font-size: 0.97rem; line-height: 1.28; font-weight: 500; }

/* Metrics — clean 2×2 grid */
#metrics-cantoneseopera .co-metrics-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 0.9rem 1.4rem;
  margin-top: 0.8rem;
}
@media (max-width: 560px) {
  #metrics-cantoneseopera .co-metrics-group { grid-template-columns: 1fr; }
}
#metrics-cantoneseopera .co-metrics-row {
  display: grid;
  grid-template-columns: 26px 1fr; /* icon + stack */
  align-items: center;
  gap: 0.6rem;
}
#metrics-cantoneseopera .co-metrics-row i { font-size: 1.1rem; color: #3a4564; }
#metrics-cantoneseopera .metrics-big { font-size: 1.6rem; margin: 0; }
#metrics-cantoneseopera .metrics-label { font-size: 0.96rem; margin: 0; }
/* ===== Cantonese Opera — Role & Impact visual polish (scoped) ===== */
#role-impact-cantoneseopera { 
  background: linear-gradient(180deg, #fafafa 0%, #f7f8fb 80%);
}
#role-impact-cantoneseopera .section-title { margin-bottom: 1.2rem; }

/* Card grid */
#role-impact-cantoneseopera .co-role-impact-content {
  display: grid;
  grid-template-columns: repeat(3, minmax(280px, 1fr));
  gap: 1.6rem;
  align-items: stretch;
}
@media (max-width: 1100px) {
  #role-impact-cantoneseopera .co-role-impact-content { grid-template-columns: repeat(2, minmax(280px, 1fr)); }
}
@media (max-width: 780px) {
  #role-impact-cantoneseopera .co-role-impact-content { grid-template-columns: 1fr; }
}

/* Card */
#role-impact-cantoneseopera .co-role-impact-box {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 1.25rem 1.2rem 1.35rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06), 0 1px 0 rgba(0,0,0,0.04);
  border: 1px solid #eee;
  transition: transform .18s ease, box-shadow .18s ease;
  text-align: left;
}
#role-impact-cantoneseopera .co-role-impact-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.09);
}

/* Header icon badge and title */
#role-impact-cantoneseopera .co-role-impact-box .impact-icon {
  width: 72px; height: 72px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 120% at 30% 30%, #fff 0%, #f3f6ff 55%, #eef2ff 100%);
  color: #c41e3a; font-size: 1.6rem; box-shadow: 0 6px 22px rgba(36,50,84,0.08);
  margin: 0 0 .65rem 0; /* left-aligned */
}
#role-impact-cantoneseopera .co-role-impact-box .impact-label {
  font-size: 1.15rem; font-weight: 800; color: #1f2a44; margin: 0 0 .4rem 0;
}

/* Subtle divider after header */
#role-impact-cantoneseopera .co-role-impact-box .impact-label::after {
  content: ""; display: block; height: 1px; width: 100%;
  background: linear-gradient(90deg, rgba(196,30,58,0.08), rgba(31,42,68,0.08));
  margin: .35rem 0 .6rem 0;
}

/* Project Impact text */
#project-impact-cantoneseopera .impact-subtext { 
  max-width: 52ch; line-height: 1.55; color: #2a2a2a; 
}

/* My Role list — two column, icon chips */
#my-role-cantoneseopera .co-impact-list {
  display: grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap: .8rem 1rem;
}
@media (max-width: 980px) { #my-role-cantoneseopera .co-impact-list { grid-template-columns: 1fr; } }
#my-role-cantoneseopera .co-impact-list-item { 
  display: grid; grid-template-columns: 34px 1fr; gap: .6rem; align-items: start;
}
#my-role-cantoneseopera .co-impact-list-item i {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: #f4f7fa; color: #3a4564; font-size: 1rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
#my-role-cantoneseopera .co-impact-list-item div { font-size: 1rem; line-height: 1.35; color: #1f2a44; }

/* Metrics — consistent grid, bigger numbers */
#metrics-cantoneseopera .co-metrics-group {
  display: grid; grid-template-columns: repeat(2, minmax(220px,1fr)); gap: 1rem 1.4rem; margin-top: .6rem;
}
@media (max-width: 560px) { #metrics-cantoneseopera .co-metrics-group { grid-template-columns: 1fr; } }
#metrics-cantoneseopera .co-metrics-row { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: .6rem; }
#metrics-cantoneseopera .co-metrics-row i { color: #3a4564; font-size: 1.1rem; }
#metrics-cantoneseopera .metrics-big { font-size: 1.9rem; font-weight: 800; color: #c41e3a; line-height: 1.1; }
#metrics-cantoneseopera .metrics-label { font-size: .98rem; color: #2b334d; }
/* === Cantonese Opera: Role & Impact containment fixes === */
#role-impact-cantoneseopera .co-role-impact-box {
  overflow: hidden;                 /* prevent child overflow */
  box-sizing: border-box;           /* include padding/border in width */
}

/* Ensure internal grids never overflow the card width */
#my-role-cantoneseopera .co-impact-list {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* allow shrink */
}
#my-role-cantoneseopera .co-impact-list-item div { 
  word-break: break-word;           /* wrap long labels */
}

#metrics-cantoneseopera .co-metrics-group {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; /* flexible columns */
}
#metrics-cantoneseopera .co-metrics-row { min-width: 0; }
#metrics-cantoneseopera .co-metrics-row > div { min-width: 0; }
#metrics-cantoneseopera .metrics-label { word-break: break-word; }

/* Prevent grid container from forcing too-wide columns at certain breakpoints */
#role-impact-cantoneseopera .co-role-impact-content {
  grid-template-columns: repeat(3, minmax(280px, 1fr));
}
@media (max-width: 1180px) {
  #role-impact-cantoneseopera .co-role-impact-content {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}
@media (max-width: 780px) {
  #role-impact-cantoneseopera .co-role-impact-content {
    grid-template-columns: 1fr;
  }
}
/* Scoped figure/caption styling for Interviews & Focus Groups on the Cantonese Opera page */
body.cantonese-opera-page .interview-figure {
  display: block;               /* ensure block flow so caption sits below */
}
body.cantonese-opera-page .interview-figure img {
  display: block;               /* remove inline gap under images */
  width: 100%;
  height: auto;                 /* preserve aspect ratio inside the card */
}
body.cantonese-opera-page .interview-figure figcaption {
  text-align: center;
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.5rem;
}
/* === Cantonese Opera page: Project Snapshot layout (scoped) === */
body.cantonese-opera-page .project-snapshot .snapshot-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.2rem;
  align-items: stretch;
}
body.cantonese-opera-page .project-snapshot .snapshot-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  border: 1px solid #eee;
  padding: 1rem 1rem 1.2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
}
body.cantonese-opera-page .project-snapshot .snapshot-icon {
  font-size: 1.6rem;
  color: #c41e3a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem; height: 2.6rem;
  margin: 0 auto 0.3rem;
  background: #f4f7fa;
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}
body.cantonese-opera-page .project-snapshot .snapshot-label {
  font-size: 0.95rem;
  color: #666;
  font-weight: 600;
}
body.cantonese-opera-page .project-snapshot .snapshot-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f2a44;
}
body.cantonese-opera-page .project-snapshot .snapshot-subtext {
  font-size: 0.9rem;
  color: #555;
}
@media (max-width: 780px) {
  body.cantonese-opera-page .project-snapshot .snapshot-row {
    grid-template-columns: 1fr 1fr; /* two-up on small screens */
  }
}
@media (max-width: 520px) {
  body.cantonese-opera-page .project-snapshot .snapshot-row {
    grid-template-columns: 1fr; /* single column on very small screens */
  }
}
/* === Presentation-style Reflections section === */
.reflections-preso {
  background: linear-gradient(180deg, #f3f1ee, #ece8e4);
  padding: 4rem 1rem 3.5rem;
  color: #111;
}
.reflections-preso .container { width: min(1100px, 92vw); }
.preso-header { text-align: left; margin: 0 auto 1.6rem; }
.preso-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  letter-spacing: .02em;
  padding: 0.25rem 0.6rem;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 999px;
  background: rgba(255,255,255,0.75);
  color: #333;
}
.reflections-preso h2 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 2.4vw + 1rem, 3.4rem);
  margin: 0.5rem 0 1rem;
  color: #111;
}
.preso-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 1.1rem;
  margin: 0.5rem 0 1.6rem;
}
.preso-card {
  background: #fff;
  border: 1px solid #e6e6ee;
  border-radius: 16px;
  padding: 1.1rem 1rem 1.2rem;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  grid-column-gap: 0.8rem;
  align-items: start;
  transition: transform .15s ease, box-shadow .15s ease;
}
.preso-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.10); }
.preso-num { font-weight: 800; color: #444; font-size: 1rem; grid-column: 1 / -1; margin-bottom: 0.4rem; }
.preso-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #f6f7fb;
  display: grid;
  place-items: center;
  color: #c41e3a;
  font-size: 4rem; /* enlarge icon size */
}
.preso-card h3 { margin: 0; font-size: 1.1rem; color: #111; }
.preso-card p { margin: 0.35rem 0 0; color: #555; font-size: 0.98rem; line-height: 1.45; grid-column: 1 / -1; }
.preso-tagline { text-align: center; font-weight: 700; font-size: 1.15rem; color: #222; margin: 0; }

/* Responsive layout for presentation cards */
@media (max-width: 1024px) {
  .preso-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .preso-cards { grid-template-columns: 1fr; }
  .reflections-preso { padding: 3rem 0.75rem 2.5rem; }
  .preso-tagline { font-size: 1.05rem; }
}
/* === Key Insights: card-on-gradient redesign (inspired by provided image) === */
.key-insights-section { padding: 3.5rem 1rem; }
.key-insights-section .insights-bg {
  /* soft tech-like gradient with subtle pattern */
  background:
    radial-gradient(800px 400px at 12% 18%, rgba(83,112,255,0.18), transparent 55%),
    radial-gradient(700px 360px at 88% 86%, rgba(96,114,255,0.18), transparent 55%),
    linear-gradient(180deg, #0f1320, #1a2033);
  padding: clamp(1rem, 2vw, 2rem);
}
.key-insights-section .insights-shell {
  background: #ffffff;
  border-radius: 28px;
  box-shadow: 0 18px 60px rgba(0,0,0,0.18), 0 2px 10px rgba(0,0,0,0.06);
  padding: clamp(1.2rem, 3vw, 2.2rem) clamp(1rem, 3vw, 2.2rem);
  max-width: 1100px;
  margin: 0 auto;
}
.key-insights-section h2 { text-align:center; font-size: clamp(2rem, 2.2vw + 1rem, 3rem); margin: 0 0 .2rem; color:#1f2937; }
.key-insights-section .section-subtitle { text-align:center; margin: 0 0 1.2rem; color:#6b7280; }

/* badge row */
.insight-badges {
  display:grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: clamp(0.6rem, 1.8vw, 1rem);
  justify-items: center;
  margin: 0 auto 1.2rem;
  max-width: 900px;
}
.insight-badge {
  display:flex; flex-direction:column; align-items:center; gap:.55rem;
  background: linear-gradient(180deg, #eef2ff, #e8edff);
  border: 1px solid #e6eaff;
  padding: 0.9rem 1rem;
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 6px 16px rgba(31,41,55,0.08);
}
.insight-badge i { font-size: 1.6rem; color: #374151; background:#fff; width: 48px; height: 48px; border-radius: 14px; display:grid; place-items:center; box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
.insight-badge span { font-weight: 700; color:#111827; font-size: .98rem; text-align:center; }

/* keep existing grid but tighten spacing inside the white card */
.key-insights-section .insight-grid { padding: 0 .4rem 0.2rem; }
.key-insights-section .insight-card { text-align:left; }

@media (max-width: 900px) {
  .insight-badges { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .insight-badges { grid-template-columns: 1fr; }
}
/* === Slim insight chip inside cards (replaces bulky badge) === */
.insight-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  background: #eef2ff;
  border: 1px solid #e3e8ff;
  box-shadow: none;
  font-weight: 600;
  color: #1f2937;
  font-size: 0.9rem;
  margin-bottom: 0.45rem;
}
.insight-chip i {
  width: 1.35rem;
  height: 1.35rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e5e7eb;
  font-size: 0.9rem;
  color: #374151;
}
/* Tighten card header spacing now that chip is compact */
.insight-card { display: flex; flex-direction: column; gap: 0.4rem; }
.insight-card h3 { margin: 0; }
/* Larger standalone icon for Key Insights cards */
.insight-icon {
  font-size: 2.6rem;
  color: #374151;
  margin-bottom: 0.55rem;
  line-height: 1;
  display: inline-block;
}
/* === Analysis: Horizontal Process Flow === */
.analysis-flow { position: relative; margin: 1.4rem auto 1.6rem; max-width: 1100px; }
.flow-rail { position: absolute; left: 0; right: 0; top: 48px; height: 6px; background: linear-gradient(90deg,#cdd5ff,#a7b4ff); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); }
.flow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 4vw, 2rem); position: relative; z-index: 1; }
.flow-step { display: grid; justify-items: center; text-align: center; position: relative; }
.flow-step::after { content: ""; position: absolute; top: 48px; right: -10%; width: 20%; height: 6px; background: transparent; }
.flow-icon { width: 96px; height: 96px; border-radius: 50%; background: #fff; border: 3px solid #e3e8ff; display: grid; place-items: center; color: #1f2a44; box-shadow: 0 10px 28px rgba(31,42,68,0.16); }
.flow-icon i { font-size: 2rem; }
.flow-num { position: absolute; top: 6px; right: calc(50% - 46px); transform: translateX(100%); background: #c41e3a; color: #fff; font-weight: 800; font-size: .95rem; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(196,30,58,0.25); }
.flow-label { margin-top: .55rem; font-weight: 700; color: #1f2937; font-size: 1rem; }

.flow-cards { display: grid; grid-template-columns: repeat(3, minmax(240px,1fr)); gap: 1rem; align-items: start; }
.flow-card { background: #fff; border: 1px solid #e6e9f5; border-radius: 16px; padding: 1.1rem 1.1rem 1.2rem; box-shadow: 0 8px 20px rgba(0,0,0,0.06); text-align: left; }
.flow-card h3 { margin: 0 0 .35rem; font-size: 1.1rem; color: #18203a; }
.flow-card .flow-desc { margin: 0 0 .5rem; color: #444; font-size: 1rem; }
.flow-card ul { margin: 0.2rem 0 0.6rem 1.2rem; }
.flow-card li { margin-bottom: 0.25rem; color: #384152; }
.flow-result { margin-top: 0.5rem; background: #f6f9ff; border-left: 4px solid #25465d; padding: 0.6rem 0.8rem; font-size: 0.98rem; color: #1e2d41; border-radius: 6px; }

/* Responsive */
@media (max-width: 980px) {
  .flow-steps { grid-template-columns: 1fr; gap: 1rem; }
  .flow-rail { display: none; }
  .flow-step { justify-items: start; text-align: left; grid-template-columns: auto 1fr; grid-column-gap: 0.8rem; }
  .flow-label { margin-top: 0; align-self: center; }
  .flow-icon { width: 72px; height: 72px; }
  .flow-num { top: -6px; right: auto; left: 48px; }
  .flow-cards { grid-template-columns: 1fr; }
}

/* === Scoped: Cantonese Opera only — Analysis Horizontal Process Flow === */
.cantonese-opera-page .analysis-flow { position: relative; margin: 1.4rem auto 1.6rem; max-width: 1100px; }
.cantonese-opera-page .flow-rail { position: absolute; left: 0; right: 0; top: 48px; height: 6px; background: linear-gradient(90deg,#cdd5ff,#a7b4ff); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); }
.cantonese-opera-page .flow-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 4vw, 2rem); position: relative; z-index: 1; }
.cantonese-opera-page .flow-step { display: grid; justify-items: center; text-align: center; position: relative; }
.cantonese-opera-page .flow-step::after { content: ""; position: absolute; top: 48px; right: -10%; width: 20%; height: 6px; background: transparent; }
.cantonese-opera-page .flow-icon { width: 96px; height: 96px; border-radius: 50%; background: #fff; border: 3px solid #e3e8ff; display: grid; place-items: center; color: #1f2a44; box-shadow: 0 10px 28px rgba(31,42,68,0.16); }
.cantonese-opera-page .flow-icon i { font-size: 2rem; }
.cantonese-opera-page .flow-num { position: absolute; top: 6px; right: calc(50% - 46px); transform: translateX(100%); background: #c41e3a; color: #fff; font-weight: 800; font-size: .95rem; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(196,30,58,0.25); }
.cantonese-opera-page .flow-label { margin-top: .55rem; font-weight: 700; color: #1f2937; font-size: 1rem; }

.cantonese-opera-page .flow-cards { display: grid; grid-template-columns: repeat(3, minmax(240px,1fr)); gap: 1rem; align-items: start; }
.cantonese-opera-page .flow-card { background: #fff; border: 1px solid #e6e9f5; border-radius: 16px; padding: 1.1rem 1.1rem 1.2rem; box-shadow: 0 8px 20px rgba(0,0,0,0.06); text-align: left; }
.cantonese-opera-page .flow-card h3 { margin: 0 0 .35rem; font-size: 1.1rem; color: #18203a; }
.cantonese-opera-page .flow-card .flow-desc { margin: 0 0 .5rem; color: #444; font-size: 1rem; }
.cantonese-opera-page .flow-card ul { margin: 0.2rem 0 0.6rem 1.2rem; }
.cantonese-opera-page .flow-card li { margin-bottom: 0.25rem; color: #384152; }
.cantonese-opera-page .flow-result { margin-top: 0.5rem; background: #f6f9ff; border-left: 4px solid #25465d; padding: 0.6rem 0.8rem; font-size: 0.98rem; color: #1e2d41; border-radius: 6px; }

@media (max-width: 980px) {
  .cantonese-opera-page .flow-steps { grid-template-columns: 1fr; gap: 1rem; }
  .cantonese-opera-page .flow-rail { display: none; }
  .cantonese-opera-page .flow-step { justify-items: start; text-align: left; grid-template-columns: auto 1fr; grid-column-gap: 0.8rem; }
  .cantonese-opera-page .flow-label { margin-top: 0; align-self: center; }
  .cantonese-opera-page .flow-icon { width: 72px; height: 72px; }
  .cantonese-opera-page .flow-num { top: -6px; right: auto; left: 48px; }
  .cantonese-opera-page .flow-cards { grid-template-columns: 1fr; }
}

/* === Scoped: Cantonese Opera only — Key Insights adjustments === */
.cantonese-opera-page .insight-icon { font-size: 2.6rem; color: #374151; margin-bottom: 0.55rem; line-height: 1; display: inline-block; }

/* === Scoped: Cantonese Opera only — Reflections presentation section (safety re‑declare) === */
.cantonese-opera-page .reflections-preso { background: linear-gradient(180deg, #f3f1ee, #ece8e4); padding: 4rem 1rem 3.5rem; color: #111; }
.cantonese-opera-page .reflections-preso .container { width: min(1100px, 92vw); }
.cantonese-opera-page .preso-header { text-align: left; margin: 0 auto 1.6rem; }
.cantonese-opera-page .reflections-preso h2 { font-family: "Playfair Display", Georgia, "Times New Roman", serif; font-size: clamp(2.1rem, 2.4vw + 1rem, 3.4rem); margin: 0.5rem 0 1rem; color: #111; }
.cantonese-opera-page .preso-cards { display: grid; grid-template-columns: repeat(4, minmax(200px, 1fr)); gap: 1.1rem; margin: 0.5rem 0 1.6rem; }
.cantonese-opera-page .preso-card { background: #fff; border: 1px solid #e6e6ee; border-radius: 16px; padding: 1.1rem 1rem 1.2rem; box-shadow: 0 6px 18px rgba(0,0,0,0.06); display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto 1fr; grid-column-gap: 0.8rem; align-items: start; transition: transform .15s ease, box-shadow .15s ease; }
.cantonese-opera-page .preso-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,0.10); }
.cantonese-opera-page .preso-num { font-weight: 800; color: #444; font-size: 1rem; grid-column: 1 / -1; margin-bottom: 0.4rem; }
.cantonese-opera-page .preso-icon { width: 70px; height: 70px; border-radius: 50%; background: #f6f7fb; display: grid; place-items: center; color: #c41e3a; font-size: 2rem; }
.cantonese-opera-page .preso-card h3 { margin: 0; font-size: 1.1rem; color: #111; }
.cantonese-opera-page .preso-card p { margin: 0.35rem 0 0; color: #555; font-size: 0.98rem; line-height: 1.45; grid-column: 1 / -1; }
.cantonese-opera-page .preso-tagline { text-align: center; font-weight: 700; font-size: 1.15rem; color: #222; margin: 0; }
@media (max-width: 1024px) { .cantonese-opera-page .preso-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cantonese-opera-page .preso-cards { grid-template-columns: 1fr; } .cantonese-opera-page .reflections-preso { padding: 3rem 0.75rem 2.5rem; } .cantonese-opera-page .preso-tagline { font-size: 1.05rem; } }

/* ——— Cantonese Opera: My Role & Impact tuning ——— */
#role-impact-cantoneseopera .co-role-impact-content {
  gap: 1.8rem;                 /* more breathing room */
}

/* Card shell: equalize feel without hard min-heights */
#role-impact-cantoneseopera .co-role-impact-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Title + divider: small emphasis tweaks */
#role-impact-cantoneseopera .co-role-impact-box .impact-label {
  font-size: 1.18rem;
  letter-spacing: .005em;
}
#role-impact-cantoneseopera .co-role-impact-box .impact-label::after {
  margin: .45rem 0 .7rem 0;    /* more air below header */
}

/* My Role list: denser, single-line chips */
#my-role-cantoneseopera .co-impact-list {
  gap: .6rem .9rem;
}
#my-role-cantoneseopera .co-impact-list-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 8px;
  align-items: start;
}
#my-role-cantoneseopera .co-impact-list-item i {
  font-size: .95rem;
}
#my-role-cantoneseopera .co-impact-list-item div {
  font-size: .96rem;
  line-height: 1.35;
}

/* Project Impact: compact long copy */
#project-impact-cantoneseopera .impact-subtext {
  font-size: 1rem;
  line-height: 1.5;
  max-width: 58ch;             /* keeps the column readable */
}

/* Option A (tablet): let Impact go full width so the row balances */
@media (max-width: 1100px) {
  #role-impact-cantoneseopera .co-role-impact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
  }
  #project-impact-cantoneseopera { grid-column: 1 / -1; }
}

/* Metrics: bigger numbers, tighter labels, aligned grid */
#metrics-cantoneseopera .co-metrics-group { gap: 1rem 1.4rem; }
#metrics-cantoneseopera .metrics-big {
  font-size: 2.1rem;
  line-height: 1.05;
}
#metrics-cantoneseopera .metrics-label {
  font-size: .95rem;
  color: #3a3f56;
  line-height: 1.25;
}
#metrics-cantoneseopera .co-metrics-row {
  display: grid;
  grid-template-columns: 26px auto; /* icon + stack */
  align-items: start;
  column-gap: 10px;
}

/* Hover micro-interaction */
#role-impact-cantoneseopera .co-role-impact-box {
  transition: transform 150ms ease, box-shadow 150ms ease;
}
#role-impact-cantoneseopera .co-role-impact-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.10);
}
/* ===== Scoped: Cantonese Opera — My Role & Impact ===== */
#role-impact-cantoneseopera .co-role-impact-content {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 1.8rem;
  align-items: stretch;
}

#role-impact-cantoneseopera .co-role-impact-box {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  padding: 1.2rem 1.1rem 1.4rem;
}

#role-impact-cantoneseopera .impact-icon {
  font-size: 1.7rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.8rem;
  color: #c41e3a; background: #f4f7fa; box-shadow: 0 2px 9px rgba(196,30,58,0.10);
}

#role-impact-cantoneseopera .impact-label {
  font-weight: 800;
  color: #1f2437;
  margin-bottom: .4rem;
  font-size: 1.12rem;
  position: relative;
}
#role-impact-cantoneseopera .impact-label::after {
  content: '';
  display: block;
  height: 1px; width: 100%; background: #e8ebf3;
  margin: .45rem 0 .7rem 0;
}

/* My Role list tightening */
#my-role-cantoneseopera .co-impact-list { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .9rem; }
#my-role-cantoneseopera .co-impact-list-item { display: grid; grid-template-columns: 22px 1fr; column-gap: 8px; align-items: start; }
#my-role-cantoneseopera .co-impact-list-item i { font-size: .95rem; color: #3a4564; }
#my-role-cantoneseopera .co-impact-list-item div { font-size: .96rem; line-height: 1.35; }

/* Project Impact copy width */
#project-impact-cantoneseopera .impact-subtext { font-size: 1rem; line-height: 1.5; max-width: 58ch; }

/* Metrics emphasis and alignment */
#metrics-cantoneseopera .co-metrics-group { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; }
#metrics-cantoneseopera .co-metrics-row { display: grid; grid-template-columns: 26px auto; column-gap: 10px; align-items: start; }
#metrics-cantoneseopera .metrics-big { font-size: 2.1rem; line-height: 1.05; color: #c41e3a; font-weight: 800; }
#metrics-cantoneseopera .metrics-label { font-size: .95rem; color: #3a3f56; line-height: 1.25; }

/* Hover micro-interaction */
#role-impact-cantoneseopera .co-role-impact-box { transition: transform 150ms ease, box-shadow 150ms ease; }
#role-impact-cantoneseopera .co-role-impact-box:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,0.10); }

/* Responsive balancing: let Impact span on tablet */
@media (max-width: 1100px) {
  #role-impact-cantoneseopera .co-role-impact-content { grid-template-columns: 1fr 1fr !important; }
  #project-impact-cantoneseopera { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  #role-impact-cantoneseopera .co-role-impact-content { grid-template-columns: 1fr !important; gap: 1.2rem; }
}
/* — Fix spacing & enlarge icon: My Role card (Cantonese Opera only) — */
#my-role-cantoneseopera .impact-icon {
  font-size: 1.9rem;     /* was ~1.7rem */
  width: 3rem;           /* was 2.6rem */
  height: 3rem;          /* was 2.6rem */
  margin-bottom: 1rem;   /* add more breathing room above title */
}

#my-role-cantoneseopera .impact-label {
  margin-top: 0;         /* ensure title doesn’t collapse upward */
}

/* Slightly increase space before the list starts */
#my-role-cantoneseopera .co-impact-list {
  margin-top: 0.35rem;
}
/* === Scoped styles for "My Role and Impact" section on Cantonese Opera page === */
#role-impact-cantoneseopera .co-role-impact-box ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px; /* space between icon and text */
}

#role-impact-cantoneseopera .co-role-impact-box ul li svg,
#role-impact-cantoneseopera .co-role-impact-box ul li i {
    flex-shrink: 0;
}
/* ===== Home page additions (scoped) ===== */
body.home-page .hero .hero-cta-row {
  display: inline-flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0.2rem 0 0.6rem;
}
body.home-page .hero .cta-primary-home {
  background-color: #d4af37; /* gold */
  color: #111;
  border: 2px solid #d4af37;
}
body.home-page .hero .cta-primary-home:hover { background:#b68e2a; border-color:#b68e2a; }
body.home-page .hero .cta-secondary-home {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.9);
}
body.home-page .hero .cta-secondary-home:hover { background: rgba(255,255,255,0.14); }
body.home-page .hero .hero-strap {
  max-width: 64ch;
  margin: 0.4rem auto 0;
  font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.1rem);
  opacity: 0.95;
}

/* Trust tiles */
body.home-page .home-trust { background: #0d0d0d; padding: 2.8rem 0; }
body.home-page .trust-row { display:grid; grid-template-columns: repeat(3, minmax(220px,1fr)); gap:1.2rem; align-items:stretch; }
@media (max-width: 900px){ body.home-page .trust-row{ grid-template-columns: 1fr; } }
body.home-page .trust-card{
  background:#111;
  border:1px solid #1f1f1f;
  border-radius: 14px;
  padding: 1.2rem 1.1rem 1.1rem;
  box-shadow: 0 6px 16px rgba(0,0,0,0.28);
  color:#e9e9e9;
}
body.home-page .trust-card i{ font-size:1.6rem; color:#d4af37; }
body.home-page .trust-card h3{ margin:.6rem 0 .3rem; font-size:1.1rem; color:#fff; }
body.home-page .trust-card p{ margin:.2rem 0 .6rem; color:#cfcfcf; font-size:1rem; }
body.home-page .trust-card .trust-link{ color:#d4af37; text-decoration:none; font-weight:600; }
body.home-page .trust-card .trust-link:hover{ text-decoration:underline; }

/* Featured band */
body.home-page .home-featured{ background:#0a0a0a; padding: 2.8rem 0 3.2rem; }
body.home-page .featured-grid{ display:grid; grid-template-columns: repeat(2, minmax(260px,1fr)); gap:1.2rem; }
@media (max-width: 900px){ body.home-page .featured-grid{ grid-template-columns:1fr; } }
body.home-page .featured-card{ background:#111; border:1px solid #1f1f1f; border-radius:16px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,0.28); display:grid; grid-template-columns: 1fr; }
body.home-page .featured-media{ min-height:190px; background: url('images/bowers20221201up.png') center/cover no-repeat; filter:saturate(0.9) contrast(1.05); }
body.home-page .featured-media.research{
  background-image: url('images/Researchbg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 20%; /* shift image down; tweak % as needed */
  filter: saturate(0.9) contrast(1.05);
}
body.home-page .featured-body{ padding:1rem 1.1rem 1.2rem; color:#e9e9e9; }
body.home-page .featured-body h3{ margin:0 0 .3rem; color:#fff; font-size:1.2rem; }
body.home-page .featured-body p{ margin:0 0 .6rem; color:#cfcfcf; }
body.home-page .featured-cta{ display:inline-block; padding:.55rem .9rem; border-radius:10px; background:#d4af37; color:#111; text-decoration:none; font-weight:700; }
body.home-page .featured-cta:hover{ background:#b68e2a; }
body.home-page .featured-cta.alt{ background:transparent; border:2px solid #e5e7eb; color:#e5e7eb; }
body.home-page .featured-cta.alt:hover{ background:#1f2937; }
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.2rem;
    font-weight: 800;
  }
}
@media (max-width: 768px) {
  /* Push hero content down on the home page only so it clears the fixed nav */
  body.home-page .hero { 
    padding-top: 140px !important; /* was 80px in index inline styles */
  }
  body.home-page .hero > div {
    margin-top: 24px !important; /* gentle extra nudge for headline/buttons */
  }
}
/* Responsive stacking for home info blocks (index page) */
@media (max-width: 768px) {
  .trust-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.4em !important;
    width: 100% !important;
    margin: 0 auto !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .info-block {
    width: 100% !important;
    max-width: 90% !important;
    margin-bottom: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }
}
/* ==========================
   Nanguan page – Reflections (recruiter-optimized)
   Scoped so it won't touch other pages
   ========================== */
.nanguan-page .nanguan-ux-reflections {
  background: #f5f7ff;
  padding: 60px 20px;
  color: #111;
}
.nanguan-page .nanguan-ux-reflections h2 {
  font-size: 2.2rem;
  margin-bottom: 22px;
  color: #2c3e50;
}

/* Skim bar metrics */
.nanguan-page .ref-metric-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 880px;
  margin: 0 auto 26px;
}
.nanguan-page .ref-metric-bar > div {
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(44,62,80,0.06);
}
.nanguan-page .ref-metric-bar .num {
  display: block;
  font: 800 1.3rem/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: #c41e3a;
}
.nanguan-page .ref-metric-bar .lbl {
  display: block;
  font-size: 0.95rem;
  color: #334155;
}

/* Cards */
.nanguan-page .ux-reflection-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1100px;
  margin: 0 auto 14px;
}
.nanguan-page .ux-card {
  background: #ffffff;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  padding: 22px 18px;
  box-shadow: 0 6px 18px rgba(44,62,80,0.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.nanguan-page .ux-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(44,62,80,0.12);
}
.nanguan-page .ux-icon {
  font-size: 1.8rem;
  display: inline-block;
  margin-bottom: 8px;
}
.nanguan-page .ux-card h3 {
  margin: 6px 0 8px;
  font-size: 1.15rem;
  color: #111827;
}
.nanguan-page .ux-card .one-liner {
  color: #374151;
  font-size: 0.98rem;
  margin: 0 0 8px;
}
.nanguan-page .ux-card .impact {
  color: #1f2937;
  font-size: 0.96rem;
  margin: 0 0 10px;
}
.nanguan-page .ux-card .evidence {
  display: inline-block;
  font-weight: 600;
  color: #0f3d6e;
  text-decoration: none;
  padding: 6px 8px;
  border-radius: 6px;
}
.nanguan-page .ux-card .evidence:hover {
  background: #eef2ff;
  text-decoration: underline;
}
.nanguan-page .ux-card .tags {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nanguan-page .ux-card .tags li {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.85rem;
  color: #334155;
}

/* Artifact links */
.nanguan-page .ref-artifacts {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}
.nanguan-page .artifact-link {
  color: #0f3d6e;
  text-decoration: none;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
}
.nanguan-page .artifact-link:hover {
  background: #e6eefc;
  text-decoration: underline;
}

/* Mobile tweaks */
@media (max-width: 900px) {
  .nanguan-page .ux-reflection-cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .nanguan-page .nanguan-ux-reflections { padding: 44px 14px; }
  .nanguan-page .ref-metric-bar { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .nanguan-page .ux-reflection-cards { grid-template-columns: 1fr; gap: 16px; }
  .nanguan-page .ux-card { padding: 18px 14px; }
}
/* --- Researcher page hero centering fix (scoped) --- */
body.researcher-style #hero {
  display: flex; /* ensure flex on the section */
  justify-content: center !important; /* override earlier mobile rule */
  align-items: center !important;      /* override earlier mobile rule */
  text-align: center;                  /* keep content centered */
}

/* Center the inner container and keep a safe width */
body.researcher-style #hero > div {
  margin: 0 auto !important;           /* prevent drift to the right */
  max-width: 720px;                    /* keeps readable line-length */
  width: min(92vw, 720px);             /* responsive width */
  box-sizing: border-box;              /* include padding in width */
}

@media (max-width: 768px) {
  /* Push content below fixed nav on small screens without changing bg image position */
  body.researcher-style #hero {
    padding-top: 6.25em;               /* room for the navbar */
  }
  body.researcher-style #hero > div {
    margin: 4.25em auto 0 !important;  /* keep centered, add top offset */
    width: 92vw;                        /* full but with side gutters */
  }
}