:root {
  --ink: #123557;
  --ink-deep: #092a4b;
  --sea: #2167aa;
  --sea-light: #e7f2ff;
  --paper: #f8fbff;
  --gold: #c6a76c;
  --muted: #52677d;
  --rule: #cfdeed;
}

html { scroll-padding-top: 5.5rem; }
body { background: var(--paper); }
.section-space { padding-block: clamp(6rem, 9vw, 9rem); }
.site-header, .site-header.is-scrolled { color: var(--ink); background: rgba(255,255,255,.97); border-bottom: 1px solid #e4edf6; box-shadow: none; }
.nav-shell { min-height: 78px; }
.brand-mark, .brand-mark::before, .brand-mark::after, .brand-mark span { border-color: var(--sea); }
.brand-role { border-left-color: #b8c9d9; color: #627b94; letter-spacing: .03em; }
.primary-nav a { color: #35526f; font-weight: 600; }
.primary-nav a:hover, .primary-nav a:focus-visible { color: var(--sea); }
.primary-nav .nav-contact { color: var(--sea); border: 1px solid #8aaed0; border-radius: 5px; }
.primary-nav .nav-contact:hover { color: #fff; background: var(--sea); }

.hero { display: grid; grid-template-columns: 55% 45%; min-height: 0; margin-top: 78px; color: var(--ink); background: #fff; place-items: stretch; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; padding: clamp(3rem, 5.2vw, 6rem) clamp(2.5rem, 5.5vw, 7rem); }
.hero-name { margin: 0 0 .85rem; color: var(--sea); font-size: .85rem; font-weight: 700; letter-spacing: .08em; }
.hero-school { margin: 0; color: #6b7f91; font-size: clamp(.92rem, 1.05vw, 1.08rem); }
.hero h1 { max-width: 13em; margin: 1.7rem 0 0; font-size: clamp(3.1rem, 4.4vw, 5.25rem); line-height: 1.28; font-weight: 700; letter-spacing: -.045em; text-wrap: balance; }
.hero h1 em { color: #2372bd; font-style: normal; }
.hero-subtitle { max-width: 37rem; margin: 1.7rem 0 0; color: #536b82; font-size: clamp(1rem, 1.2vw, 1.18rem); line-height: 1.9; }
.hero-actions { justify-content: flex-start; margin-top: 2rem; }
.hero .button-light { color: #fff; background: var(--sea); border-color: var(--sea); box-shadow: 0 12px 28px rgba(24,94,157,.15); }
.hero .button-light:hover { background: #0d4e91; }
.hero .button-outline { color: var(--sea); border-color: #8eafcd; background: transparent; }
.hero .button-outline:hover { color: #fff; background: var(--sea); }
.hero-proof { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; gap: 0; margin-top: clamp(2.5rem, 4vw, 4rem); padding-top: 1.25rem; border-top: 1px solid #dde8f2; }
.hero-proof span { display: flex; flex-direction: column; padding-right: 1rem; color: #61788c; font-size: .75rem; line-height: 1.55; }
.hero-proof span + span { padding-left: 1.25rem; border-left: 1px solid #dde8f2; }
.hero-proof strong { margin-bottom: .2rem; color: var(--ink); font-size: clamp(1.12rem, 1.45vw, 1.5rem); }
.proof-item strong small { color: var(--sea); font-size: .58em; font-weight: 700; white-space: nowrap; }
.hero-visual { position: relative; display: grid; place-items: end center; min-height: 700px; overflow: hidden; background: radial-gradient(circle at 70% 22%, #4283c3, transparent 44%), linear-gradient(150deg, #2367ac, #073e7b 74%); }
.hero-visual::before, .hero-visual::after { content: ''; position: absolute; width: 83%; aspect-ratio: 1; border: 1px solid rgba(207,230,255,.16); border-radius: 50%; top: 5%; right: -20%; }
.hero-visual::after { width: 56%; top: 18%; right: -7%; }
.hero-coordinate { position: absolute; z-index: 2; top: 2.5rem; left: 2.5rem; color: #e2f2ff; font: 600 .78rem var(--display); letter-spacing: .16em; }
.hero-portrait { z-index: 1; width: min(72%, 480px); height: min(78%, 610px); margin-bottom: 5rem; object-fit: cover; object-position: center 18%; border: 7px solid rgba(255,255,255,.95); box-shadow: 0 35px 70px rgba(4,32,67,.27); }
.hero-visual-caption { position: absolute; z-index: 2; bottom: 2.7rem; left: 2.5rem; right: 2.5rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; padding-top: .85rem; border-top: 1px solid rgba(255,255,255,.45); color: #fff; }
.hero-visual-caption span { font-size: 1.45rem; font-weight: 700; letter-spacing: .12em; }
.hero-visual-caption small { color: #daecff; font-size: .76rem; }

.intro { background: #f2f8fe; }
.portrait-frame { background: #dbe7f3; }
.portrait-frame::before { border-color: #70a9d9; }
.portrait-frame figcaption { background: #0e4b83; }
.portrait-frame figcaption span { color: #e0effd; }
.teaching, .projects, .research { background: #fff; }
.teaching-feature { border: 1px solid #e3edf6; box-shadow: 0 18px 50px rgba(23,74,121,.08); }
.image-caption, .practice-visual figcaption, .project-feature figcaption, .project-card figure figcaption { background: rgba(5,44,83,.87); }
.practice, .method, .journey { background: #edf5fc; }
.practice-reference, .timeline, .timeline-item { border-color: #b9d0e4; }
.practice-list, .project-grid { background: #cbdfee; }
.practice-item { background: #fbfdff; }
.project-card-plain { background: #eaf4fd; }
.project-separator { background: #c4dbee; }
.statement { background: #0b396b; }
.statement .scrub-char { color: #7194b4; }
.story-panel { background: #0d3560; }
.story-panel::after, .story-map::after { background: linear-gradient(90deg, rgba(7,38,76,.84), rgba(8,49,88,.15) 82%), linear-gradient(0deg, rgba(7,38,76,.68), transparent 58%); }
.project-feature { background: #0c3868; }
.project-feature-copy > p:not(.eyebrow) { color: #e0effc; }
.project-feature-copy .eyebrow, .project-result { color: #e8cf9f; }
.award-image { background: #eaf3fb; }
.site-footer { background: #062747; }
.contact { background: #0b3b6f; }
.contact p, .contact-details { color: #d8eafb; }
.contact-orbit, .contact-orbit::before, .contact-orbit::after, .contact-orbit span { border-color: rgba(202,224,245,.18); }
.contact-orbit span:nth-child(3) { background: rgba(202,224,245,.1); }

/* Profile: classroom image sequence, education and evidence-led strengths. */
.classroom-carousel { position: relative; min-width: 0; border: 1px solid #b5cee3; background: #0c365f; box-shadow: 22px 22px 0 #d9eaf7; }
.classroom-slides { position: relative; height: 570px; overflow: hidden; }
.classroom-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transform: translateX(5%); transition: opacity .65s ease, transform .65s ease, visibility .65s; }
.classroom-slide.is-active { opacity: 1; visibility: visible; transform: translateX(0); }
.classroom-slide::after { content: ''; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, rgba(3,26,50,.68)); pointer-events: none; }
.classroom-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.classroom-slide figcaption { position: absolute; z-index: 1; left: 1.4rem; bottom: 4.8rem; max-width: 78%; color: #fff; font-size: .83rem; font-weight: 600; letter-spacing: .03em; }
.carousel-controls { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: .85rem 1.35rem; color: #fff; border-top: 1px solid rgba(255,255,255,.5); background: rgba(5,43,79,.82); }
.carousel-count { font: 500 .84rem var(--display); letter-spacing: .12em; }
.carousel-count b { color: #a9dcff; font-size: 1.08rem; }
.carousel-controls > div { display: flex; gap: .35rem; }
.carousel-controls button { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; color: #fff; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: transparent; font-size: 1rem; cursor: pointer; }
.carousel-controls button:hover, .carousel-controls button:focus-visible { color: #0a3b6c; background: #fff; }
.profile-details { margin-top: clamp(6rem, 9vw, 9rem); }
.profile-block-title { display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 2rem; margin-bottom: 1.9rem; border-bottom: 1px solid #b9d0e4; }
.profile-block-title .section-kicker { grid-column: 1 / -1; margin-bottom: .4rem; }
.profile-block-title h3 { margin: 0 0 1.15rem; font-size: clamp(2rem,3.1vw,3.4rem); line-height: 1.25; }
.profile-block-title > p:last-child { max-width: 33rem; margin: 0 0 1.25rem; color: var(--muted); font-size: .94rem; }
.education-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.1rem; }
.education-card { position: relative; min-height: 255px; padding: clamp(1.6rem,2.5vw,2.65rem); border: 1px solid #adc9e1; background: #fff; }
.education-card::before { content: ''; position: absolute; top: 0; right: 0; width: 3.1rem; height: 3.1rem; border-bottom: 1px solid #adc9e1; border-left: 1px solid #adc9e1; background: #e8f4ff; }
.education-card > span { display: inline-block; margin-bottom: 1.4rem; padding: .24rem .65rem; color: #0b5b9b; border: 1px solid #accbe7; font-size: .75rem; font-weight: 700; }
.education-card time { display: block; color: #6a849d; font: 600 .85rem var(--display); }
.education-card h4 { margin: .45rem 0 .2rem; font-size: clamp(1.35rem,2vw,2.1rem); }
.education-card p { margin: 0; color: #315f88; font-size: 1.02rem; font-weight: 600; }
.education-bridge { display: flex; align-items: center; gap: .7rem; margin: 1.3rem 0 0; color: #0c548f; font-size: 1.06rem; font-weight: 700; }
.education-bridge > span:last-child { margin-left: auto; color: #637e97; font-size: .8rem; font-weight: 500; }
.competence-title { margin-top: clamp(5rem,7vw,7rem); }
.competence-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 2px solid #2e75b1; border-bottom: 1px solid #b9d0e4; }
.competence-grid article { min-width: 0; padding: 2rem clamp(1rem,2vw,2rem) 2.2rem 0; }
.competence-grid article + article { padding-left: clamp(1rem,2vw,2rem); border-left: 1px solid #c7daea; }
.competence-grid span { display: block; margin-bottom: 1.3rem; color: #2a6ea8; font-size: .77rem; font-weight: 700; }
.competence-grid strong { display: block; color: #0a3964; font-size: clamp(1.35rem,2.15vw,2.3rem); line-height: 1.25; white-space: nowrap; }
.competence-grid p { margin: .75rem 0 0; color: #5b7389; font-size: .85rem; line-height: 1.75; }

/* Teaching tools stay recognisably part of the same editorial blue system. */
.tools-heading { margin-bottom: 2.5rem; }
.tool-grid { display: grid; grid-template-columns: 1fr; gap: 1.35rem; }
.tool-card { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(290px,.75fr); min-width: 0; border: 1px solid #cbddeb; background: #f7fbff; }
.tool-preview { position: relative; display: block; height: clamp(300px,29vw,390px); overflow: hidden; background: #d9e8f4; }
.tool-preview img { width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: transform .5s ease; }
.tool-preview:hover img, .tool-preview:focus-visible img { transform: scale(1.04); }
.tool-preview > span { position: absolute; right: 1rem; bottom: 1rem; padding: .55rem .8rem; color: #fff; background: #0d4e86; font-size: .78rem; font-weight: 700; }
.tool-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.8rem,3.5vw,3.5rem); }
.tool-number { color: #3275ac; font: 700 .7rem var(--display); letter-spacing: .13em; }
.tool-copy h3 { margin: .5rem 0 .9rem; font-size: clamp(1.7rem,2.35vw,2.65rem); line-height: 1.3; }
.tool-copy p { margin: 0 0 1.4rem; color: #546d84; font-size: .95rem; line-height: 1.85; }
.tool-copy small { display: block; padding-top: .8rem; border-top: 1px solid #cbddeb; color: #326e9e; font-size: .76rem; font-weight: 700; }
.tools-note { max-width: 80rem; margin: 1.2rem 0 0; color: #627b91; font-size: .8rem; line-height: 1.7; }
.teaching-divider { margin: clamp(6rem,9vw,9rem) 0; border-top: 1px solid #c5dbea; }
.versatility-note { margin: 1.5rem 0 0; color: #5b7690; font-size: .85rem; }

.section-kicker { margin: 0 0 1.1rem; color: var(--sea); font: 700 .76rem var(--display); letter-spacing: .18em; }
.cases { background: #f7fbff; }
.cases .section-heading { margin-bottom: 3.5rem; }
.case-feature { display: grid; grid-template-columns: 52% 48%; background: #fff; border: 1px solid #d9e8f5; }
.case-image { position: relative; min-height: 610px; margin: 0; }
.case-image img { width: 100%; height: 100%; object-fit: cover; }
.case-image figcaption, .case-compact figcaption { position: absolute; left: 1.25rem; bottom: 1.2rem; padding: .3rem .65rem; color: #fff; background: rgba(6,44,82,.87); font-size: .75rem; }
.case-copy { align-self: center; padding: clamp(2.5rem, 5vw, 5rem); }
.case-copy h3 { margin: 1.1rem 0 1.2rem; font-size: clamp(2rem, 2.8vw, 3.2rem); line-height: 1.35; }
.case-copy > p:not(.eyebrow) { color: var(--muted); }
.case-copy dl { margin: 2rem 0 0; border-top: 1px solid var(--rule); }
.case-copy dl div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--rule); }
.case-copy dt { color: var(--sea); font-size: .83rem; font-weight: 700; }
.case-copy dd { margin: 0; color: var(--muted); font-size: .85rem; }
.case-duo { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.case-compact { min-width: 0; background: #fff; border: 1px solid #d9e8f5; }
.case-compact figure { position: relative; height: 300px; margin: 0; overflow: hidden; background: #e8f2fb; }
.case-compact figure img { width: 100%; height: 100%; object-fit: cover; }
.case-compact:first-child figure img { object-fit: contain; padding: 1rem; }
.case-compact > div { padding: clamp(2rem, 3.4vw, 3.5rem); }
.case-compact h3 { margin: .8rem 0 .65rem; font-size: clamp(1.65rem, 2.1vw, 2.4rem); line-height: 1.3; }
.case-compact p:not(.eyebrow) { color: var(--muted); }
.case-compact span { display: block; margin-top: 1.4rem; padding-top: .9rem; border-top: 1px solid var(--rule); color: var(--sea); font-size: .82rem; font-weight: 700; }
.case-compact small { display: block; margin-top: .45rem; color: #6f8294; font-size: .78rem; line-height: 1.7; }
.case-compact small a { color: #0b5c9a; font-weight: 700; text-decoration: underline; text-underline-offset: .15em; }
.case-lesson { margin-top: 1.5rem; }
.case-lesson .case-image { min-height: 520px; }
.case-lesson .case-image img { object-position: 46% center; }

.project-feature figure { background: #dcece8; }
.project-feature figure img { padding: 0; object-fit: cover; object-position: center 29%; }
.project-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .4rem; margin-top: 1.5rem; padding: 1.1rem 0; border-top: 1px solid rgba(201,223,242,.35); border-bottom: 1px solid rgba(201,223,242,.35); }
.project-metrics span { display: block; color: #cce0f3; font-size: .75rem; }
.project-metrics strong { display: block; margin-bottom: .15rem; color: #fff; font-size: clamp(1.22rem,1.6vw,1.65rem); }
.project-document-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }
.project-document-links a { display: inline-flex; align-items: center; min-height: 42px; padding: .55rem .8rem; border: 1px solid rgba(190,220,245,.55); color: #fff; font-size: .8rem; font-weight: 700; text-decoration: none; transition: background .2s ease; }
.project-document-links a:hover, .project-document-links a:focus-visible { background: rgba(255,255,255,.16); }

.research-opening { display: grid; grid-template-columns: minmax(280px,.78fr) minmax(0,1.35fr); gap: clamp(2.5rem,5vw,5.5rem); margin-top: clamp(5rem,8vw,8rem); padding-top: clamp(3rem,5vw,5rem); border-top: 1px solid #caddea; }
.research-opening-intro { align-self: start; }
.research-opening-intro .section-kicker { margin-bottom: 2.5rem; }
.research-opening-intro h3 { margin: 1rem 0 1.1rem; font-size: clamp(2.1rem,3.1vw,3.4rem); line-height: 1.32; letter-spacing: -.035em; }
.research-opening-intro > p:not(.section-kicker,.eyebrow) { max-width: 27rem; color: var(--muted); }
.research-slot-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.research-slot { position: relative; display: flex; flex-direction: column; min-height: 245px; padding: clamp(1.35rem,2.5vw,2.2rem); overflow: hidden; border: 1px dashed #9fbedb; background: #f7fbff; }
.research-slot::after { content: ''; position: absolute; top: -5rem; right: -5rem; width: 11rem; aspect-ratio: 1; border: 1px solid rgba(45,113,172,.14); border-radius: 50%; box-shadow: 0 0 0 24px rgba(45,113,172,.035),0 0 0 48px rgba(45,113,172,.025); pointer-events: none; }
.research-slot > span { position: relative; z-index: 1; color: var(--sea); font: 700 .72rem var(--display); letter-spacing: .08em; }
.research-slot h4 { position: relative; z-index: 1; margin: 2.2rem 0 .55rem; font-size: clamp(1.2rem,1.45vw,1.52rem); line-height: 1.3; }
.research-slot p { position: relative; z-index: 1; margin: 0; color: var(--muted); font-size: .83rem; line-height: 1.75; }
.research-slot small { position: relative; z-index: 1; align-self: flex-start; margin-top: auto; padding-top: 1.6rem; color: #7891a7; font-size: .75rem; }

.fieldwork-map { color: #eff7ff; background: linear-gradient(145deg, #0a2d52, #0b3a6e 60%, #09294c); }
.fieldwork-map .section-kicker { color: #9bd0f9; }
.fieldwork-map .section-heading > p, .fieldwork-map .map-heading > p { color: #c9e0f4; }
.map-shell { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(350px, .75fr); min-height: 720px; border: 1px solid rgba(179,216,245,.24); background: rgba(255,255,255,.035); }
.map-stage { display: flex; flex-direction: column; min-width: 0; padding: 1.5rem 1.75rem 1rem; }
.map-topline { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .85rem; border-bottom: 1px solid rgba(190,221,246,.2); }
.map-topline span { font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; }
.map-topline small { color: #a8cce9; font-size: .75rem; }
#china-map { display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; min-height: 0; flex: 0 0 auto; margin-block: auto; overflow: hidden; }
.map-province { fill: #164f83; stroke: #74aad2; stroke-width: 1.3; vector-effect: non-scaling-stroke; transition: fill .25s; }
.map-province:hover { fill: #266aa4; }
.map-islands-inset { fill: rgba(255,255,255,.025); stroke: rgba(179,216,245,.35); stroke-width: 1; stroke-dasharray: 5 5; }
.map-inset-label, .map-error { fill: #9abedc; font-size: 12px; }
.map-marker { cursor: pointer; outline: none; transition: opacity .2s; }
.map-marker-halo { fill: rgba(255,209,129,.16); stroke: rgba(255,218,155,.58); stroke-width: 1.5; }
.map-marker-dot { fill: #ffd48e; stroke: #fff; stroke-width: 2; }
.map-marker-south .map-marker-dot { fill: #7ed8ea; }
.map-marker-mountain .map-marker-dot { fill: #b3b5ff; }
.map-marker.is-selected .map-marker-halo, .map-marker:focus-visible .map-marker-halo { fill: rgba(255,255,255,.25); stroke: #fff; stroke-width: 3; }
.map-marker.is-selected .map-marker-dot { r: 8; }
.map-marker.is-muted { opacity: .18; pointer-events: none; }
.map-credit { margin: auto 0 0; color: #8fb3d3; font-size: .7rem; }
.map-credit a { text-decoration: underline; }
.map-aside { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid rgba(179,216,245,.24); }
.map-tabs { display: flex; flex-wrap: wrap; gap: .4rem; padding: 1.15rem; border-bottom: 1px solid rgba(179,216,245,.18); }
.map-tabs button { padding: .35rem .67rem; border: 1px solid rgba(163,206,241,.4); border-radius: 4px; color: #cce5f8; background: transparent; font-size: .75rem; cursor: pointer; }
.map-tabs button[aria-pressed="true"] { color: #082d54; background: #d9efff; border-color: #d9efff; font-weight: 700; }
.map-place-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: start; max-height: 246px; overflow-y: auto; scrollbar-color: #6e9ac2 transparent; }
.map-place { display: grid; grid-template-columns: 2rem 1fr; column-gap: .4rem; align-items: baseline; min-width: 0; padding: .8rem .65rem; border: 0; border-bottom: 1px solid rgba(179,216,245,.13); color: #eef7ff; background: transparent; text-align: left; cursor: pointer; }
.map-place:nth-child(odd) { border-right: 1px solid rgba(179,216,245,.13); }
.map-place:hover, .map-place[aria-pressed="true"] { background: rgba(122,190,239,.16); }
.map-place span { grid-row: span 2; color: #86bce7; font: 700 .73rem var(--display); }
.map-place strong { font-size: .86rem; }
.map-place small { overflow: hidden; color: #a8c8e2; font-size: .65rem; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.map-note { margin: auto 1.15rem 1.15rem; overflow: hidden; background: #f6fbff; color: var(--ink); }
.map-note img { width: 100%; height: 180px; object-fit: cover; }
.map-note-copy { padding: 1.15rem 1.3rem 1.3rem; }
.map-note-copy small { color: var(--sea); font-size: .7rem; font-weight: 700; }
.map-note-copy h3 { margin: .3rem 0 .45rem; font-size: 1.4rem; }
.map-note-copy p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.7; }
.map-overseas { margin: 1.2rem 0 0; color: #b8d8f0; font-size: .83rem; }
.field-evidence { display: grid; grid-template-columns: minmax(220px,.85fr) repeat(2,minmax(0,1fr)); gap: 1rem; align-items: stretch; margin-top: 3.5rem; padding-top: 2.2rem; border-top: 1px solid rgba(179,216,245,.24); }
.field-evidence-intro { align-self: center; padding-right: 1rem; }
.field-evidence-intro h3 { margin: 0 0 1rem; font-size: clamp(1.65rem,2.25vw,2.55rem); line-height: 1.4; }
.field-evidence-intro > p:last-child { color: #c9e0f4; font-size: .85rem; line-height: 1.85; }
.field-evidence figure { min-width: 0; margin: 0; background: #fff; }
.field-evidence figure img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: contain; background: #eef5fa; }
.field-evidence figcaption { padding: .8rem 1rem; color: #315c7c; font-size: .77rem; line-height: 1.5; }

.creative-showcase { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); border: 1px solid #c6dcea; background: #fff; }
.creative-media { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(1rem,2vw,2rem); background: #0b3159; }
.creative-media video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #061d38; }
.creative-media > span { padding-top: .75rem; color: #b8d8ef; font-size: .75rem; }
.creative-copy { padding: clamp(1.7rem,3.4vw,3.5rem); }
.creative-copy h3, .creative-game h3 { margin: .6rem 0 1.2rem; font-size: clamp(2rem,2.8vw,3.2rem); line-height: 1.3; }
.creative-copy > p:not(.eyebrow), .creative-game-copy > p:not(.eyebrow) { color: var(--muted); font-size: .9rem; line-height: 1.85; }
.creative-copy ul { margin: 1.2rem 0; padding: 0 0 0 1.2rem; color: #315f83; font-size: .86rem; line-height: 1.9; }
.creative-proof { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: .8rem; width: 100%; margin-top: 1.5rem; padding: .5rem; border: 1px solid #d7e6f2; color: #0c5a98; font-size: .8rem; font-weight: 700; text-decoration: none; }
.creative-proof img { display: block; width: 100%; height: 74px; object-fit: cover; }
.creative-copy small, .creative-game-copy small { display: block; margin-top: 1.2rem; color: #70869b; font-size: .74rem; line-height: 1.6; }
.creative-game { display: grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); margin: 1.2rem 0 clamp(5rem,8vw,8rem); border: 1px solid #c6dcea; background: #eff7fd; }
.creative-game-copy { align-self: center; padding: clamp(1.8rem,3.6vw,3.8rem); }
.creative-game-copy > a { display: inline-flex; margin-top: 1rem; padding-bottom: .3rem; border-bottom: 1px solid currentColor; color: #0b5b99; font-size: .85rem; font-weight: 700; text-decoration: none; }
.creative-game-visual { position: relative; display: block; min-height: 480px; overflow: hidden; background: #f8eee7; }
.creative-game-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.creative-game-visual > span { position: absolute; right: 1rem; bottom: 1rem; padding: .6rem .85rem; color: #fff; background: #0c4e85; font-size: .78rem; font-weight: 700; }

@media (max-width: 1100px) {
  .brand-role { display: inline; }
  .hero h1 { font-size: clamp(2.65rem, 4.4vw, 4.2rem); }
  .hero-visual { min-height: 630px; }
  .map-shell { grid-template-columns: minmax(0,1.1fr) minmax(320px,.8fr); }
  .map-place-list { grid-template-columns: 1fr; max-height: 210px; }
  .map-place:nth-child(odd) { border-right: 0; }
}

@media (max-width: 800px) {
  .brand-role { display: none; }
  .site-header, .site-header.is-scrolled { background: #fff; }
  .menu-toggle { color: var(--sea); border-color: #95b9d8; }
  .primary-nav { top: 70px; background: #fff; border-bottom: 1px solid #dce9f5; box-shadow: 0 15px 30px rgba(15,53,90,.1); }
  .primary-nav a { color: var(--ink); }
  .primary-nav .nav-contact { color: var(--sea); }
  .hero { grid-template-columns: 1fr; margin-top: 70px; }
  .hero-copy { padding: 4.5rem 2.5rem 3.5rem; }
  .hero-visual { min-height: 570px; }
  .hero-portrait { width: min(58%,430px); height: 420px; margin-bottom: 5.5rem; }
  .case-feature, .case-duo, .map-shell { grid-template-columns: 1fr; }
  .research-opening { grid-template-columns: 1fr; }
  .research-opening-intro .section-kicker { margin-bottom: 1.4rem; }
  .case-image { min-height: 440px; }
  .map-aside { border-left: 0; border-top: 1px solid rgba(179,216,245,.24); }
  .map-place-list { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: 250px; }
  .map-note { margin-top: 1.15rem; }
  .classroom-carousel { width: min(100%,580px); margin-left: auto; }
  .education-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .tool-card { grid-template-columns: 1fr; }
  .tool-preview { height: 330px; }
  .field-evidence { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .field-evidence-intro { grid-column: 1 / -1; }
  .creative-showcase, .creative-game { grid-template-columns: 1fr; }
  .creative-game-visual { min-height: 420px; }
  .competence-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .competence-grid article:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid #c7daea; }
  .competence-grid article:nth-child(4) { border-top: 1px solid #c7daea; }
}

@media (max-width: 560px) {
  .hero { min-height: 0; }
  .hero-copy { padding: 3.1rem 1.25rem 2.5rem; }
  .hero-name { font-size: .72rem; letter-spacing: .04em; }
  .hero-school { font-size: .85rem; }
  .hero h1 { margin-top: 1.3rem; font-size: clamp(2.25rem, 9vw, 3.3rem); line-height: 1.28; }
  .hero-subtitle { margin-top: 1.3rem; font-size: .93rem; }
  .hero-actions { margin-top: 1.55rem; }
  .hero-proof { margin-top: 2.4rem; }
  .hero-proof span { padding-right: .55rem; font-size: .64rem; }
  .hero-proof span + span { padding-left: .55rem; }
  .hero-proof strong { font-size: .95rem; }
  .hero-visual { min-height: 480px; }
  .hero-portrait { width: 63%; height: 330px; margin-bottom: 5.5rem; border-width: 5px; }
  .hero-coordinate { top: 1.35rem; left: 1.25rem; font-size: .63rem; }
  .hero-visual-caption { left: 1.25rem; right: 1.25rem; bottom: 1.3rem; }
  .hero-visual-caption span { font-size: 1.12rem; }
  .hero-visual-caption small { max-width: 10rem; text-align: right; font-size: .65rem; }
  .cases .section-heading { margin-bottom: 2rem; }
  .case-image { min-height: 290px; }
  .case-copy, .case-compact > div { padding: 1.5rem; }
  .case-copy h3 { font-size: 2rem; }
  .case-copy dl div { grid-template-columns: 1fr; gap: .2rem; }
  .case-compact figure { height: 235px; }
  .research-opening { margin-top: 4rem; }
  .research-slot-grid { grid-template-columns: 1fr; }
  .research-slot { min-height: 200px; }
  .research-slot h4 { margin-top: 1.5rem; }
  .map-stage { padding: 1rem .7rem .7rem; }
  .map-topline { padding-inline: .35rem; }
  .map-topline span { font-size: .9rem; }
  .map-topline small { font-size: .66rem; }
  #china-map { min-height: 0; }
  .map-place-list { grid-template-columns: 1fr; max-height: 270px; }
  .map-place:nth-child(odd) { border-right: 0; }
  .map-note img { height: 175px; }
  .map-note-copy { padding: 1rem; }
  .classroom-carousel { width: calc(100% - 1rem); margin-right: 1rem; }
  .classroom-slides { height: 390px; }
  .classroom-slide figcaption { bottom: 4.4rem; font-size: .76rem; }
  .profile-block-title { display: block; }
  .profile-block-title > p:last-child { margin-top: 0; }
  .education-grid { grid-template-columns: 1fr; }
  .education-card { min-height: 220px; }
  .education-bridge { align-items: start; flex-wrap: wrap; }
  .education-bridge > span:last-child { width: 100%; margin-left: 1.8rem; }
  .competence-grid { grid-template-columns: 1fr 1fr; }
  .competence-grid article { padding: 1.35rem .8rem 1.55rem 0; }
  .competence-grid article + article { padding-left: .8rem; }
  .competence-grid strong { font-size: clamp(1.1rem,4vw,1.6rem); white-space: normal; }
  .competence-grid p { font-size: .76rem; }
  .tool-preview { height: 245px; }
  .tool-copy { padding: 1.45rem; }
  .tool-copy p { margin-bottom: 1rem; }
  .case-lesson .case-image { min-height: 245px; }
  .project-metrics strong { font-size: 1.08rem; }
  .field-evidence { grid-template-columns: 1fr; }
  .field-evidence-intro { grid-column: auto; }
  .creative-proof { grid-template-columns: 95px 1fr; }
  .creative-game-visual { min-height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .classroom-slide, .tool-preview img { transition: none; }
}

@media print {
  .hero { display: block; margin-top: 0; }
  .hero-visual { display: none; }
  .hero-copy { padding: 0; }
  .hero-proof { max-width: 34rem; }
  .fieldwork-map { color: var(--ink); background: #fff; }
  .fieldwork-map .section-heading > p, .fieldwork-map .map-heading > p { color: var(--muted); }
  .map-shell { display: none; }
}