:root {
  --ink: #2B2B2B;
  --muted: #666666;
  --paper: #ffffff;
  --wash: #FAF7F8;
  --line: #E8D6DA;
  --accent: #E4042C;
  --accent-2: #B00322;
  --warm: #F14668;
  --radius: 16px;
  --shadow: 0 18px 45px rgba(228, 4, 44, 0.12);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--wash);
  font-family: Inter, Arial, sans-serif;
  line-height: 1.68;
}


img {
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button {
  font: inherit;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 70px;
  padding: 0 max(24px, calc((100vw - 1240px) / 2));
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  font-weight: 700;
}

.brand:hover {
  text-decoration: none;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  color: #ffffff;
  background: var(--ink);
  border-radius: 10px;
  font-size: 0.84rem;
}

.site-nav {
  display: flex;
  gap: 24px;
}

.site-nav a {
  color: #4D3238;
  font-size: 0.86rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-toggle {
  display: none;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.page-shell {
  display: grid;
  grid-template-columns: minmax(0, 900px) 280px;
  gap: 32px;
  max-width: 1240px;
  margin: 44px auto;
  padding: 0 20px;
}

.main-column {
  min-width: 0;
}

.hero,
.content-section,
.carousel-wrap {
  margin-bottom: 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hero {
  display: grid;
  grid-template-columns: 1fr 5px;
  gap: 42px;
  align-items: center;
  background: #FFFFFF url(../images/teaser.jpg) no-repeat center center;
  background-size: cover;
  padding: 54px;
}

#boxround{
    position: relative;
    left: 34px;
    top: 80px;
    background: #109CEF;
    background:  #76C9F8;
    color: #57696F;
    border-color: black; 
    border-radius: 25px;
    padding: 20px;
    width: 335px;
    height: 95px;
}


.eyebrow,
.section-kicker {
  color: var(--accent);
  font-size: 0.77rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

.hero h1,
.content-section h2 {
  font-family: "Source Serif 4", Georgia, serif;
  line-height: 1.08;
}

.hero h1 {
  margin: 0.15em 0;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
}

.role {
  margin-bottom: 4px;
  font-size: 1.15rem;
  font-weight: 700;
}

.affiliation {
  color: var(--muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 17px;
  border-radius: 9px;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.button:hover {
  text-decoration: none;
  transform: translateY(-1px);
}

.primary {
  color: #ffffff;
  background: var(--accent);
}

.secondary {
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
}

.portrait-card {
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 18px;
  transform: rotate(1.5deg);
}

.portrait-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 5;
  color: #ffffff;
  background:
    radial-gradient(circle at 30% 20%, #F14668, transparent 30%),
    linear-gradient(145deg, #2B2B2B, #E4042C);
  border-radius: 11px;
  font-family: "Source Serif 4", serif;
}

.portrait-placeholder span {
  font-size: 4rem;
}

.portrait-placeholder small {
  font-family: Inter, sans-serif;
  opacity: 0.72;
}

.carousel-wrap {
  overflow: hidden;
}

.carousel {
  position: relative;
  height: 390px;
  overflow: hidden;
  border-radius: var(--radius);
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.55s ease;
}

.slide.active {
  opacity: 1;
}

.slide-art {
  position: absolute;
  inset: 0;
}




.art-one {
  background:
    radial-gradient(circle at 75% 35%, rgba(255, 255, 255, 0.35), transparent 21%),
    repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, 0.07) 19px 20px),
    linear-gradient(120deg, #7A0019, #C10327 60%, #F14668);
}

.art-two {
  background:
    radial-gradient(circle at 76% 40%, #FDE8EC 0 7%, transparent 7.5%),
    radial-gradient(circle at 65% 60%, #E4042C 0 11%, transparent 11.5%),
    linear-gradient(135deg, #5A0012, #930020 48%, #F14668);
}

.art-three {
  background:
    repeating-radial-gradient(circle at 75% 50%, transparent 0 20px, rgba(255, 255, 255, 0.1) 21px 22px),
    linear-gradient(130deg, #7A0019, #C10327);
}

.slide-caption {
  position: absolute;
  left: 42px;
  bottom: 42px;
  max-width: 560px;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
}

.slide-caption span {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}

.slide-caption h2 {
  margin: 8px 0;
  font: 700 clamp(1.8rem, 4vw, 3.2rem) / 1.05 "Source Serif 4", serif;
}

.slide-caption p {
  max-width: 500px;
  margin: 0;
}

.carousel-button {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 43px;
  height: 43px;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.25);
  border: 0;
  border-radius: 50%;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.carousel-button:hover {
  background: rgba(0, 0, 0, 0.48);
}

.prev {
  left: 14px;
}

.next {
  right: 14px;
}

.carousel-dots {
  position: absolute;
  right: 26px;
  bottom: 20px;
  z-index: 3;
  display: flex;
  gap: 8px;
}

.carousel-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  background: transparent;
  border: 1px solid #ffffff;
  border-radius: 50%;
}

.carousel-dots button.active {
  background: #ffffff;
}

.content-section {
  padding: 46px 52px;
}

.content-section h2 {
  margin: 0.1em 0 0.7em;
  font-size: 2.45rem;
}

.interest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 28px;
}

.interest-grid article {
  padding: 20px;
  background: var(--wash);
  border-radius: 12px;
}

.interest-grid b,
.interest-grid span {
  display: block;
}

.interest-grid span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.89rem;
}

.timeline {
  margin: 25px 0;
  padding: 0;
  list-style: none;
}

.timeline li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.timeline time {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 700;
}

details {
  padding: 12px 16px;
  background: var(--wash);
  border-radius: 10px;
}

summary {
  font-weight: 700;
  cursor: pointer;
}

/* Publication cards */
.publication-list {
  display: grid;
  gap: 16px;
  margin-top: 25px;
}

.pub-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(228, 4, 44, 0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.pub-card:hover,
.pub-card:focus-within {
  border-color: #E6A6B3;
  box-shadow: 0 10px 25px rgba(228, 4, 44, 0.14);
  transform: translateY(-2px);
}

.pub-image {
  flex: 0 0 150px;
  width: 150px;
  height: 77px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #E8D6DA;
  border-radius: 6px;
}

.pub-image:hover {
  text-decoration: none;
}

.pub-image img {
  display: block;
  width: 150px;
  height: 77px;
  object-fit: cover;
  object-position: center;
}

.pub-info {
  flex: 1 1 auto;
  min-width: 0;
}

.pub-info h3 {
  margin: 0 0 4px;
  font: 700 1.12rem / 1.3 "Source Serif 4", Georgia, serif;
}

.pub-info h3 a {
  color: var(--accent-2);
}

.pub-info h3 a:hover {
  color: var(--accent);
}

.authors,
.venue {
  margin: 3px 0;
}

.authors {
  color: #4D3238;
  font-size: 0.92rem;
  line-height: 1.45;
}

.venue {
  color: var(--muted);
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.45;
}

.pub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.pub-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 4px 9px;
  color: var(--accent-2);
  background: #FFF4F6;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.1;
}

.pub-actions a:hover,
.pub-actions a:focus-visible {
  color: #ffffff;
  background: var(--accent);
  text-decoration: none;
}

.section-note {
  margin-top: 20px;
  color: var(--muted);
  font-size: 0.87rem;
}

.section-note code {
  padding: 2px 5px;
  background: var(--wash);
  border-radius: 4px;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.tag-list span {
  padding: 5px 11px;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.84rem;
}

.course-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.course-list article {
  display: flex;
  flex-direction: column;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.course-list span {
  font-weight: 700;
}

.course-list small {
  color: var(--muted);
}

.contact-section {
  background: linear-gradient(135deg, #ffffff, #FDE8EC);
}

.side-frame {
  position: sticky;
  top: 98px;
  height: max-content;
}

.side-card {
  margin-bottom: 18px;
  padding: 22px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(228, 4, 44, 0.08);
}

.side-card h2,
.side-card h3 {
  margin: 0 0 8px;
  font-family: "Source Serif 4", serif;
}

.side-card p {
  margin: 4px 0;
}

.muted {
  color: var(--muted);
  font-size: 0.87rem;
}

.mini-avatar {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  margin-bottom: 14px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--ink), var(--accent));
  border-radius: 50%;
  font-weight: 700;
}

.side-nav {
  display: flex;
  flex-direction: column;
}

.side-nav a {
  padding: 7px 0;
  color: #4D3238;
  border-bottom: 1px solid var(--line);
}

.plain-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plain-list li {
  padding: 5px 0;
}

footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  max-width: 1240px;
  margin: 0 auto;
  padding: 20px 20px 55px;
  color: var(--muted);
  font-size: 0.86rem;
}

.section-anchor {
  scroll-margin-top: 92px;
}

@media (max-width: 960px) {
  .page-shell {
    grid-template-columns: 1fr;
  }

  .side-frame {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .side-card {
    margin: 0;
  }

  .hero {
    grid-template-columns: 1fr 220px;
  }

  .site-nav {
    gap: 13px;
  }
}

@media (max-width: 720px) {
  .site-header {
    padding: 0 16px;
  }

  .nav-toggle {
    display: block;
  }

  .site-nav {
    position: absolute;
    top: 69px;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    padding: 16px;
    background: #ffffff;
    border-bottom: 1px solid var(--line);
  }

  .site-nav.open {
    display: flex;
  }

  .page-shell {
    margin: 22px auto;
    padding: 0 12px;
  }

  .hero {
    grid-template-columns: 1fr;
    padding: 32px;
  }

  .portrait-card {
    max-width: 230px;
  }

  .content-section {
    padding: 34px 26px;
  }

  .interest-grid,
  .course-list,
  .side-frame {
    grid-template-columns: 1fr;
  }

  .carousel {
    height: 430px;
  }

  .slide-caption {
    right: 29px;
    bottom: 48px;
    left: 29px;
  }

  .timeline li {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .pub-card {
    gap: 16px;
    padding: 16px;
  }

  footer {
    flex-direction: column;
  }
}

@media (max-width: 520px) {
  .content-section {
    padding: 30px 20px;
  }

  .content-section h2 {
    font-size: 2rem;
  }

  .pub-card {
    flex-direction: column;
  }

  .pub-image {
    flex-basis: 77px;
    width: 150px;
    height: 77px;
  }

  .pub-image img {
    width: 150px;
    height: 77px;
  }

  .pub-actions {
    gap: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.theme-toggle{display:inline-flex;align-items:center;gap:8px;margin-left:auto;margin-right:18px;padding:7px 11px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;font-size:.78rem;font-weight:700;cursor:pointer}.theme-swatch{width:14px;height:14px;background:#2455D6;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #CBD5E1}html[data-theme="blue"]{--ink:#172033;--muted:#667085;--paper:#fff;--wash:#F5F7FB;--line:#E4E7EC;--accent:#2455D6;--accent-2:#173B98;--warm:#EF7C45;--shadow:0 18px 45px rgba(23,32,51,.09)}html[data-theme="blue"] .theme-swatch{background:#E4042C}html[data-theme="blue"] .brand-mark,html[data-theme="blue"] .mini-avatar{background:linear-gradient(135deg,#172033,#2455D6)}
.research-intro,.research-section{margin-bottom:28px;padding:46px 52px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.research-intro{background:linear-gradient(145deg,#fff 30%,#FDE8EC)}html[data-theme="blue"] .research-intro{background:linear-gradient(145deg,#fff 30%,#EEF3FF)}.research-intro h1{margin:.1em 0;font:700 clamp(2.8rem,6vw,4.8rem)/1.05 "Source Serif 4",serif}.research-heading{margin-bottom:24px;border-bottom:2px solid var(--accent)}.research-heading h2{margin:.1em 0 .35em;font:700 2.2rem/1.1 "Source Serif 4",serif}.video-feature{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:center}.video-placeholder{display:flex;aspect-ratio:16/9;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#7A0019,#C10327,#E4042C);border-radius:12px;text-align:center}.play-icon{display:grid;place-items:center;width:78px;height:55px;margin-bottom:12px;background:#fff;color:#E4042C;border-radius:14px;font-size:1.5rem}.video-placeholder small,.research-thumb small{opacity:.72}.research-project-list{display:grid;gap:18px}.research-project{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:center;padding:22px;background:var(--wash);border:1px solid var(--line);border-radius:13px}.research-project.reverse{grid-template-columns:1fr 220px}.research-project.reverse .research-thumb{order:2}.research-project h3{margin:0 0 8px;font:700 1.35rem/1.25 "Source Serif 4",serif}.research-thumb{display:flex;aspect-ratio:3/2;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#7A0019,#E4042C);border-radius:9px}.red-b{background:linear-gradient(135deg,#5A0012,#F14668)}.red-c{background:linear-gradient(135deg,#930020,#E4042C)}.red-d{background:linear-gradient(135deg,#7A0019,#C10327)}.red-e{background:linear-gradient(135deg,#B00322,#F14668)}html[data-theme="blue"] .video-placeholder,html[data-theme="blue"] .research-thumb{background:linear-gradient(135deg,#172033,#2455D6)}html[data-theme="blue"] .red-b{background:linear-gradient(135deg,#2C183A,#863F6D)}html[data-theme="blue"] .red-c{background:linear-gradient(135deg,#063B3B,#119A8B)}html[data-theme="blue"] .red-d{background:linear-gradient(135deg,#10224E,#316EE8)}html[data-theme="blue"] .red-e{background:linear-gradient(135deg,#173B98,#7DA1F6)}.keyword-cloud{display:flex;min-height:245px;flex-wrap:wrap;align-content:center;align-items:baseline;justify-content:center;gap:7px 16px;padding:28px;color:#555;background:#fafafa;border:1px solid var(--line);border-radius:12px}.keyword-cloud span{font-weight:700}.keyword-cloud .lg{font-size:2rem}.keyword-cloud .xl{font-size:3rem;color:var(--accent)}.interest-list,.affiliation-list{columns:2;column-gap:36px;margin:24px 0 0;padding-left:20px}.interest-list li,.affiliation-list li{break-inside:avoid;margin:8px 0}.affiliation-list span{color:var(--muted);font-size:.88rem}.management-note{margin-top:20px;padding:13px 16px;color:var(--muted);background:var(--wash);border-left:4px solid var(--accent);border-radius:7px;font-size:.86rem}
.project-hero,.project-card{margin-bottom:28px;padding:46px 52px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.project-hero{text-align:center;background:linear-gradient(145deg,#fff,#FDE8EC)}.resource-buttons,.feature-grid,.download-grid,.gallery,.comparison{display:flex;flex-wrap:wrap;gap:12px}.media-placeholder{display:flex;min-height:240px;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#7A0019,#E4042C);border-radius:10px}.feature-grid article,.download-grid a{flex:1;padding:18px;background:var(--wash);border:1px solid var(--line);border-radius:10px}.comparison figure{flex:1;margin:0}.gallery-item{flex:1;min-height:130px;color:#fff;background:linear-gradient(135deg,#7A0019,#E4042C);border:0;border-radius:10px}.video-wrap{position:relative;aspect-ratio:16/9;background:#2B0A11;border-radius:10px}.video-wrap iframe{width:100%;height:100%;border:0}.video-note{position:absolute;inset:0;display:grid;place-items:center;color:#fff}.code-panel{position:relative}.code-panel pre{overflow:auto;padding:20px;color:#fff;background:#2B0A11;border-radius:10px}.copy-button{position:absolute;top:8px;right:8px}.facts{display:grid;grid-template-columns:72px 1fr}.facts dt,.facts dd{margin:0;padding:5px;border-bottom:1px solid var(--line)}
@media(max-width:900px){.theme-label{display:none}.video-feature{grid-template-columns:1fr}.research-project,.research-project.reverse{grid-template-columns:180px 1fr}.research-project.reverse .research-thumb{order:0}.interest-list,.affiliation-list{columns:1}}@media(max-width:620px){.research-intro,.research-section{padding:30px 20px}.research-project,.research-project.reverse{grid-template-columns:1fr}.theme-toggle{margin-left:0;margin-right:8px}.keyword-cloud .xl{font-size:2.2rem}}

/* Academic service template */
.service-hero,.service-section{margin-bottom:28px;padding:46px 52px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.service-hero{background:linear-gradient(145deg,#fff 30%,#FDE8EC)}html[data-theme="blue"] .service-hero{background:linear-gradient(145deg,#fff 30%,#EEF3FF)}.service-hero h1{margin:.1em 0;font:700 clamp(2.7rem,6vw,4.7rem)/1.05 "Source Serif 4",serif}.service-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:28px}.service-summary div{padding:17px;background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:11px}.service-summary strong,.service-summary span{display:block}.service-summary strong{color:var(--accent);font-size:1.65rem}.service-summary span{color:var(--muted);font-size:.8rem}.service-heading{margin-bottom:24px;border-bottom:2px solid var(--accent)}.service-heading h2{margin:.1em 0 .35em;font:700 2.2rem/1.1 "Source Serif 4",serif}.service-toolbar{display:grid;grid-template-columns:auto minmax(220px,1fr) auto;gap:12px;align-items:center;margin-bottom:18px;padding:14px;background:var(--wash);border-radius:10px}.service-toolbar label{font-weight:700}.service-toolbar input{width:100%;padding:10px 12px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px}.service-count{color:var(--muted);font-size:.82rem}.review-years{display:grid;gap:14px}.review-year{padding:0;background:#fff;border:1px solid var(--line);border-radius:11px}.review-year summary{display:flex;justify-content:space-between;align-items:center;padding:15px 18px;color:var(--ink);background:var(--wash);border-radius:11px;font-weight:700}.review-year summary small{color:var(--muted);font-weight:500}.review-list{margin:0;padding:8px 20px 15px 42px}.review-list li{padding:9px 4px;border-bottom:1px solid var(--line)}.review-list li:last-child{border-bottom:0}.review-list a,.review-list span{display:block}.review-list span{color:var(--muted);font-size:.82rem}.review-list li[hidden]{display:none}.service-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.service-card-grid article{padding:20px;background:var(--wash);border:1px solid var(--line);border-radius:12px}.service-card-grid h3{margin:7px 0;font-family:"Source Serif 4",serif}.service-icon{display:grid;place-items:center;width:42px;height:42px;color:#fff;background:var(--accent);border-radius:10px;font-size:.75rem;font-weight:700}.role-list{display:grid;gap:11px}.role-list article{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:17px 19px;background:var(--wash);border:1px solid var(--line);border-radius:10px}.role-list h3,.role-list p{margin:0}.role-list p,.role-list span{color:var(--muted);font-size:.84rem}.membership-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}.membership-list li{display:grid;grid-template-columns:1.2fr 1fr auto;gap:16px;padding:16px;background:var(--wash);border:1px solid var(--line);border-radius:10px}.management-note{margin-top:20px;padding:13px 16px;color:var(--muted);background:var(--wash);border-left:4px solid var(--accent);border-radius:7px;font-size:.86rem}@media(max-width:850px){.service-summary{grid-template-columns:repeat(2,1fr)}.service-card-grid{grid-template-columns:1fr 1fr}.service-toolbar{grid-template-columns:1fr}.membership-list li{grid-template-columns:1fr}}@media(max-width:620px){.service-hero,.service-section{padding:30px 20px}.service-card-grid,.service-summary{grid-template-columns:1fr}.role-list article{align-items:flex-start;flex-direction:column}.review-year summary{align-items:flex-start;flex-direction:column}}

/* Teaching index and module detail templates */
.teaching-hero,.teaching-section,.module-hero,.module-section{margin-bottom:28px;padding:46px 52px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.teaching-hero{background:linear-gradient(145deg,#fff 30%,#FDE8EC)}html[data-theme="blue"] .teaching-hero{background:linear-gradient(145deg,#fff 30%,#EEF3FF)}.teaching-hero h1,.module-hero h1{margin:.1em 0;font:700 clamp(2.7rem,6vw,4.7rem)/1.05 "Source Serif 4",serif}.teaching-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}.teaching-stats div{padding:17px;background:rgba(255,255,255,.78);border:1px solid var(--line);border-radius:11px}.teaching-stats strong,.teaching-stats span{display:block}.teaching-stats strong{color:var(--accent);font-size:1.6rem}.teaching-stats span{color:var(--muted);font-size:.82rem}.teaching-heading{margin-bottom:24px;border-bottom:2px solid var(--accent)}.teaching-heading h2{margin:.1em 0 .35em;font:700 2.2rem/1.1 "Source Serif 4",serif}.teaching-toolbar{display:grid;grid-template-columns:auto minmax(220px,1fr) auto;gap:12px;align-items:center;margin-bottom:18px;padding:14px;background:var(--wash);border-radius:10px}.teaching-toolbar label{font-weight:700}.teaching-toolbar input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px}.module-card-grid{display:grid;gap:16px}.module-card{display:grid;grid-template-columns:220px 1fr;gap:22px;padding:18px;background:var(--wash);border:1px solid var(--line);border-radius:13px}.module-card-art{display:grid;place-items:center;min-height:150px;color:#fff;background:linear-gradient(135deg,#7A0019,#E4042C);border-radius:9px;font-weight:700}.art-vr{background:linear-gradient(135deg,#930020,#F14668)}.art-games{background:linear-gradient(135deg,#5A0012,#C10327)}html[data-theme="blue"] .module-card-art{background:linear-gradient(135deg,#172033,#2455D6)}html[data-theme="blue"] .art-vr{background:linear-gradient(135deg,#063B3B,#119A8B)}html[data-theme="blue"] .art-games{background:linear-gradient(135deg,#2C183A,#863F6D)}.module-card h3{margin:2px 0;font:700 1.45rem "Source Serif 4",serif}.module-meta{margin:0;color:var(--accent);font-size:.78rem;font-weight:700;text-transform:uppercase}.technology-chips{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}.technology-chips span{padding:4px 8px;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:.75rem}.teaching-years{display:grid;gap:13px}.teaching-years details{border:1px solid var(--line);border-radius:11px}.teaching-years summary{display:flex;justify-content:space-between;padding:15px 18px;background:var(--wash);font-weight:700}.teaching-years summary small{color:var(--muted)}.teaching-list{margin:0;padding:8px 20px 15px 42px}.teaching-list li{padding:8px 0;border-bottom:1px solid var(--line)}.teaching-list a,.teaching-list span{display:block}.teaching-list span{color:var(--muted);font-size:.82rem}.practice-grid,.learning-grid,.assessment-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.practice-grid article,.learning-grid article,.assessment-grid article{padding:19px;background:var(--wash);border:1px solid var(--line);border-radius:11px}.module-hero{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:center;background:linear-gradient(145deg,#fff 35%,#FDE8EC)}html[data-theme="blue"] .module-hero{background:linear-gradient(145deg,#fff 35%,#EEF3FF)}.module-representation{display:flex;aspect-ratio:4/3;flex-direction:column;align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,#7A0019,#E4042C);border-radius:13px;text-align:center}.module-representation small{opacity:.72}.module-facts-row{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0}.module-facts-row span{padding:5px 9px;background:#fff;border:1px solid var(--line);border-radius:999px;font-size:.78rem}.learning-grid{grid-template-columns:repeat(4,1fr)}.learning-grid article>span{color:var(--accent);font-size:1.4rem;font-weight:700}.outcome-list{display:grid;gap:12px;margin:0;padding:0;list-style:none}.outcome-list li{display:grid;grid-template-columns:58px 1fr;gap:15px;padding:18px;background:var(--wash);border:1px solid var(--line);border-radius:11px}.outcome-list>li>span{display:grid;place-items:center;width:48px;height:48px;color:#fff;background:var(--accent);border-radius:50%;font-weight:700}.outcome-list h3,.outcome-list p{margin:0}.syllabus-list{display:grid;gap:11px}.syllabus-list details{border:1px solid var(--line);border-radius:10px}.syllabus-list summary{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:15px 18px;background:var(--wash)}.assessment-grid strong{color:var(--accent);font-size:2rem}.student-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.student-gallery figure{margin:0}.student-result{display:grid;place-items:center;aspect-ratio:4/3;color:#fff;background:linear-gradient(135deg,#7A0019,#E4042C);border-radius:10px}.result-b{background:linear-gradient(135deg,#930020,#F14668)}.result-c{background:linear-gradient(135deg,#5A0012,#C10327)}html[data-theme="blue"] .module-representation,html[data-theme="blue"] .student-result{background:linear-gradient(135deg,#172033,#2455D6)}.student-gallery figcaption{padding:9px 2px;color:var(--muted)}.privacy-note{padding:13px 16px;background:var(--wash);border-left:4px solid var(--accent);border-radius:7px}.technology-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.technology-logo{display:grid;place-items:center;min-height:110px;padding:12px;background:var(--wash);border:1px solid var(--line);border-radius:11px;color:var(--accent);font-weight:700;text-align:center}.technology-logo span{display:block;color:var(--muted);font-size:.75rem}.facts{display:grid;grid-template-columns:72px 1fr}.facts dt,.facts dd{margin:0;padding:6px 0;border-bottom:1px solid var(--line)}@media(max-width:900px){.module-card{grid-template-columns:180px 1fr}.module-hero{grid-template-columns:1fr}.learning-grid,.technology-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.teaching-hero,.teaching-section,.module-hero,.module-section{padding:30px 20px}.teaching-stats,.practice-grid,.assessment-grid,.student-gallery{grid-template-columns:1fr}.module-card{grid-template-columns:1fr}.teaching-toolbar{grid-template-columns:1fr}.learning-grid,.technology-grid{grid-template-columns:1fr}.syllabus-list summary{grid-template-columns:1fr}}