:root {
  --paper: #f7f3ea;
  --paper-deep: #eee6d7;
  --ink: #292621;
  --ink-soft: #635b4e;
  --ochre: #b1834f;
  --ochre-dark: #886135;
  --seal: #aa4333;
  --line: rgba(87, 64, 39, .17);
  --serif: "Songti SC", "STSong", "Noto Serif SC", serif;
  --sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scrollbar-gutter: stable; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.7; overflow-x: hidden; }
button, a { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img { display: block; height: auto; width: 100%; }
.sr-only { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.skip-link { background: var(--paper); left: 16px; padding: 10px 18px; position: fixed; top: -80px; z-index: 30; }
.skip-link:focus { top: 10px; }
:focus-visible { outline: 2px solid var(--ochre-dark); outline-offset: 4px; }
.grain { position: fixed; z-index: 20; inset: 0; pointer-events: none; opacity: .18; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }

.site-header { align-items: center; background: rgba(247, 243, 234, .62); backdrop-filter: blur(8px); border-bottom: 1px solid transparent; display: flex; height: 78px; justify-content: space-between; padding: 0 clamp(24px, 9vw, 142px); position: fixed; top: 0; transition: background .35s ease, border-color .35s ease, height .35s ease; width: 100%; z-index: 10; }
.site-header.is-scrolled { background: rgba(247, 243, 234, .93); border-color: var(--line); height: 64px; }
.brand { align-items: center; display: inline-flex; gap: 9px; line-height: 1; }
.brand-logo { height: 35px; mix-blend-mode: multiply; object-fit: contain; width: auto; }
.brand-seal { height: 22px; mix-blend-mode: multiply; object-fit: contain; transform: rotate(-2deg); width: 22px; }
.site-nav { align-items: stretch; display: flex; gap: clamp(18px, 2.6vw, 46px); height: 100%; }
.site-nav a { align-items: center; color: #403a31; display: flex; font-size: 14px; position: relative; white-space: nowrap; }
.site-nav a::after { background: var(--seal); border-radius: 50%; bottom: 9px; content: ""; height: 5px; left: 50%; opacity: 0; position: absolute; transform: translateX(-50%) scale(0); transition: opacity .25s ease, transform .25s ease; width: 5px; }
.site-nav a.is-active::after, .site-nav a:hover::after { opacity: 1; transform: translateX(-50%) scale(1); }
.menu-toggle { align-items: center; background: rgba(255,255,255,.46); border: 1px solid rgba(104,78,51,.19); border-radius: 50%; color: var(--ink); display: none; height: 40px; justify-content: center; padding: 0; transition: background .25s ease, border-color .25s ease, transform .25s ease; width: 40px; }
.menu-toggle-icon { display: block; height: 14px; position: relative; width: 18px; }
.menu-toggle-icon::before, .menu-toggle-icon::after { background: currentColor; content: ""; height: 1.5px; left: 0; position: absolute; top: 4px; transform-origin: center; transition: top .25s ease, transform .25s ease; width: 18px; }
.menu-toggle-icon::after { top: 10px; }
.menu-toggle:hover { background: rgba(255,255,255,.74); border-color: rgba(134,96,51,.42); transform: translateY(-1px); }
.menu-toggle:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }
.menu-toggle[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: #faf7f0; }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon::before { top: 7px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle-icon::after { top: 7px; transform: rotate(-45deg); }

/* The original sets a stable desktop frame. Both photographs keep their own
   proportions; the second fits by height, blending only its empty left edge. */
.hero { background: #f8f5ee; padding-top: 78px; position: relative; }
.hero-slides { aspect-ratio: 1536 / 388; overflow: hidden; position: relative; touch-action: pan-y pinch-zoom; }
.hero-slide { inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity .7s ease, visibility 0s linear .7s; visibility: hidden; }
.hero-slide.is-active { opacity: 1; pointer-events: auto; transition-delay: 0s; visibility: visible; }
.hero-copy { clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }
.hero-artwork { display: block; height: 100%; }
.hero-image { display: block; height: 100%; max-width: 100%; object-fit: contain; width: 100%; }
.hero-slide--focus .hero-artwork { display: flex; justify-content: flex-end; }
.hero-slide--focus .hero-image { mask-image: linear-gradient(to right, transparent, #000 16%); width: auto; }
.hero-slide--focus .hero-copy { clip: auto; clip-path: none; height: auto; left: 17.8%; overflow: visible; top: 29%; width: auto; z-index: 1; }
.hero-slide--focus h2 { font-size: clamp(22px, 3.52vw, 72px); }
.hero-slide--focus .brush-rule { margin: clamp(12px, 1.55vw, 30px) 0 clamp(12px, 1.43vw, 28px); width: 32px; }
.hero-controls { align-items: center; background: rgba(247,243,234,.72); border: 1px solid rgba(136,97,53,.15); border-radius: 999px; bottom: 9px; color: var(--ochre-dark); display: flex; left: 50%; padding: 0 4px; position: absolute; transform: translateX(-50%); z-index: 2; }
.hero-pagination { display: flex; }
.hero-controls button { align-items: center; background: transparent; border: 0; border-radius: 50%; color: inherit; display: flex; height: 40px; justify-content: center; padding: 0; width: 40px; }
.hero-controls button:hover { background: rgba(177,131,79,.09); }
.hero-dot span { background: currentColor; border-radius: 6px; height: 5px; opacity: .35; transition: width .25s ease, opacity .25s ease; width: 5px; }
.hero-dot.is-active span { opacity: .9; width: 19px; }
.about::before, .works::before { background: radial-gradient(ellipse, rgba(255,255,255,.66), transparent 67%); content: ""; inset: 0; pointer-events: none; position: absolute; }
.eyebrow, .section-kicker { color: var(--ochre-dark); font-size: 11px; font-weight: 600; letter-spacing: .15em; margin: 0 0 13px; text-transform: uppercase; }
.hero h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: .07em; line-height: 1.22; margin: 0; }
h1 em, h2 em { font-style: normal; }
.brush-rule { background: linear-gradient(90deg, var(--ochre) 0 54px, transparent 54px); display: block; height: 2px; margin: 30px 0 22px; width: 84px; }
.hero-lead { color: #4b4338; font-family: var(--serif); font-size: clamp(16px, 1.25vw, 20px); letter-spacing: .04em; margin: 0; }

.section { padding: clamp(86px, 10vw, 156px) clamp(24px, 9vw, 160px); position: relative; }
.courses { padding-bottom: clamp(100px, 9vw, 145px); padding-top: clamp(30px, 3vw, 48px); }
.section-anchor { scroll-margin-top: 64px; }
.about { background: #f5f0e6; overflow: hidden; }
.about::after { border: 1px solid rgba(177,131,79,.12); border-radius: 50%; content: ""; height: 420px; position: absolute; right: -160px; top: 70px; width: 420px; }
.section-kicker { position: relative; z-index: 1; }
.about-layout { display: grid; gap: clamp(40px, 8vw, 140px); grid-template-columns: minmax(260px, .92fr) minmax(340px, 1.08fr); margin-top: 32px; position: relative; z-index: 1; }
.about-copy { align-self: center; max-width: 530px; }
.about-copy h2, .section-heading h2, .works-heading h2, .location-copy h2 { font-size: clamp(38px, 4vw, 63px); }
.about-copy p:not(.eyebrow) { color: var(--ink-soft); font-size: 15px; letter-spacing: .025em; margin: 0 0 16px; max-width: 500px; }
.about-image { margin: 0; max-width: 700px; position: relative; }
.about-image::after { border: 1px solid var(--ochre); bottom: -22px; content: ""; left: -22px; opacity: .45; pointer-events: none; position: absolute; right: 28px; top: 22px; }
.about-image img { aspect-ratio: 1.22; object-fit: cover; object-position: center top; position: relative; z-index: 1; }
.about-image figcaption { color: var(--ochre-dark); font-family: var(--serif); font-size: 14px; margin-top: 18px; position: relative; z-index: 1; }

.section-heading, .works-heading { align-items: end; display: flex; gap: 42px; justify-content: space-between; margin-bottom: 48px; }
.section-heading p, .works-heading p { color: var(--ink-soft); font-size: 14px; margin: 0 0 8px; max-width: 340px; }
.course-grid { display: grid; gap: 18px; grid-template-columns: repeat(3, 1fr); }
.course-card { background: rgba(255,255,255,.31); border: 1px solid var(--line); min-height: 0; overflow: hidden; position: relative; transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; }
.course-card:hover, .course-card:focus-within, .course-card.is-open { border-color: rgba(177,131,79,.56); box-shadow: 0 18px 38px rgba(79,57,29,.08); transform: translateY(-5px); }
.course-art { aspect-ratio: 1; overflow: hidden; position: relative; }
.course-art::after { background: linear-gradient(0deg, rgba(45,36,25,.16), transparent 54%); content: ""; inset: 0; position: absolute; }
.course-art img { height: 100%; object-fit: cover; object-position: center center; transition: transform .7s ease; }
.course-card:hover .course-art img { transform: scale(1.06); }
.course-art .adult-art { object-position: 40% top; }
.art-gridpaper { align-items: center; background-color: #eee5d2; background-image: linear-gradient(rgba(178,95,74,.19) 1px, transparent 1px), linear-gradient(90deg, rgba(178,95,74,.19) 1px, transparent 1px); background-size: 24px 24px; display: flex; justify-content: center; }
.art-gridpaper::before { background: rgba(252,248,240,.8); border: 1px solid rgba(173,124,83,.4); content: ""; height: 67%; position: absolute; transform: rotate(-6deg); width: 52%; }
.art-gridpaper span { color: #3a2b20; font-family: var(--serif); font-size: 76px; position: relative; transform: rotate(-8deg); z-index: 1; }
.art-theme { align-items: center; background: #ddd0ba; display: flex; justify-content: center; }
.art-theme::before { background: #ad4835; content: ""; height: 102px; position: absolute; transform: rotate(-7deg); width: 78px; }
.art-theme span { color: #f7e5c8; font-family: var(--serif); font-size: 43px; position: relative; transform: rotate(-7deg); z-index: 1; }
.art-theme i { border: 1px solid rgba(98,91,56,.55); border-radius: 100% 0 100% 0; height: 92px; position: absolute; right: 17%; top: 25%; transform: rotate(35deg); width: 58px; }
.course-content { padding: 22px 24px 25px; }
.course-content h3 { font-family: var(--serif); font-size: 24px; font-weight: 600; margin: 0 0 4px; }
.course-content > p { color: var(--ink-soft); font-size: 13px; margin: 0; }
.course-more { color: var(--ink-soft); font-size: 13px; line-height: 1.75; margin-top: 13px; max-height: none; opacity: 1; overflow: hidden; transition: max-height .45s ease, opacity .35s ease, margin-top .35s ease; }
.course-card.is-enhanced .course-more { margin-top: 0; max-height: 0; opacity: 0; }
.course-card.is-open .course-more { margin-top: 13px; max-height: 120px; opacity: 1; }
.course-toggle { align-items: center; background: rgba(255,255,255,.3); border: 0; border-left: 1px solid var(--line); border-top: 1px solid var(--line); bottom: 0; color: var(--ochre-dark); display: none; font-size: 23px; height: 41px; justify-content: center; line-height: 1; position: absolute; right: 0; transition: background .25s ease, transform .25s ease; width: 41px; }
.course-card.is-enhanced .course-toggle { display: flex; }
.course-card.is-open .course-toggle { background: var(--ochre); color: #fff8ec; transform: rotate(45deg); }
.section-detail-link { color: var(--ochre-dark); font-size: 14px; margin: 28px 0 0; }
.section-detail-link a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; }
.section-detail-link a:hover { text-decoration-color: currentColor; }

.features { background: #f1eade; padding: 48px clamp(32px, 3.5vw, 64px) 66px; }
.feature-heading { margin-left: clamp(36px, 2.25vw, 42px); }
.feature-heading h2 { font-family: var(--serif); font-size: clamp(26px, 1.65vw, 31px); font-weight: 600; letter-spacing: .08em; line-height: 1.3; margin: 0; }
.feature-rule { background: var(--ochre); display: block; height: 2px; margin-top: 11px; width: 30px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 31px; position: relative; row-gap: 52px; }
.feature-card:nth-child(n + 4)::before { background: rgba(137,94,52,.18); content: ""; height: 1px; left: 0; position: absolute; right: 0; top: -26px; }
.feature-card { align-items: flex-start; display: flex; gap: clamp(21px, 1.8vw, 34px); min-height: 160px; padding: 4px clamp(24px, 2vw, 37px) 0; position: relative; }
.feature-card:nth-child(3n + 1) { padding-left: clamp(36px, 2.2vw, 42px); }
.feature-card:nth-child(3n + 1)::after, .feature-card:nth-child(3n + 2)::after { background: rgba(137,94,52,.18); content: ""; height: 160px; position: absolute; right: 0; top: 0; width: 1px; }
.feature-card:hover { background: transparent; }
.feature-icon { flex: 0 0 auto; height: clamp(104px, 6.35vw, 118px); object-fit: contain; width: clamp(104px, 6.35vw, 118px); }
.feature-card h3 { font-family: var(--serif); font-size: clamp(21px, 1.55vw, 28px); font-weight: 600; line-height: 1.35; margin: 4px 0 9px; }
.feature-card p { color: var(--ink-soft); font-family: var(--serif); font-size: clamp(14px, 1vw, 18px); letter-spacing: .03em; line-height: 1.9; margin: 0; max-width: 330px; }

.works { background: var(--paper); overflow: hidden; padding-inline: clamp(32px, 4.5vw, 90px); }
.works::after { border: 1px solid rgba(177,131,79,.13); border-radius: 50%; content: ""; height: 400px; left: -290px; position: absolute; top: 130px; width: 400px; }
.works-heading, .work-controls, .works-showcase, .work-note { position: relative; z-index: 1; }
.works-heading { align-items: flex-start; display: block; margin-bottom: 50px; max-width: 720px; }
.works-heading h2 { font-family: var(--serif); font-size: clamp(34px, 3.15vw, 50px); font-weight: 500; letter-spacing: .1em; line-height: 1.25; margin: 0; }
.works-heading h2::after { background: var(--ochre); content: ""; display: block; height: 2px; margin-top: 17px; width: 31px; }
.works-heading p { color: var(--ink-soft); font-family: var(--serif); font-size: 14px; letter-spacing: .055em; line-height: 1.9; margin: 18px 0 0; max-width: 620px; }
.work-controls { border: 0; display: flex; gap: clamp(28px, 4.2vw, 74px); margin-bottom: 31px; overflow-x: auto; padding: 0 0 15px; }
.filter { background: none; border: 0; color: var(--ink-soft); flex: 0 0 auto; font-family: var(--serif); font-size: 15px; padding: 0 3px; position: relative; }
.filter::after { background: var(--ochre); bottom: -15px; content: ""; height: 2px; left: 3px; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform .25s ease; width: calc(100% - 6px); }
.filter:hover, .filter.is-selected { color: var(--ochre-dark); }
.filter.is-selected::after { transform: scaleX(1); }
.works-showcase { align-items: start; display: grid; gap: clamp(34px, 4vw, 70px); grid-template-columns: minmax(0, 1.55fr) minmax(370px, .9fr); }
.work-grid { align-items: stretch; display: grid; gap: clamp(10px, 1.1vw, 17px); grid-template-columns: .52fr .78fr 1.36fr .85fr; grid-template-rows: repeat(6, clamp(68px, 6.65vw, 108px)); }
.work-column { display: contents; }
.work-grid.is-filtered .work-column { display: contents; }
.work-grid.is-filtered { align-items: start; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
.work-grid.is-filtered .work-card { aspect-ratio: 1 / .78; grid-column: auto; grid-row: auto; height: auto; }
.work-grid.is-filtered .work-card[data-title="规范书写"] { aspect-ratio: .69 / 1; }
.work-card { aspect-ratio: auto; background: #e7ddca; border: 1px solid transparent; border-radius: 7px; display: block; height: 100%; min-height: 0; overflow: hidden; padding: 0; position: relative; text-align: left; transition: border-color .3s ease, filter .3s ease, opacity .35s ease, transform .35s ease; width: 100%; }
.work-card.tall { aspect-ratio: .69 / 1; }
.work-card.large { aspect-ratio: .82 / 1; }
.work-card.wide { aspect-ratio: 1 / .64; }
.work-card.medium { aspect-ratio: 1 / .84; }
.work-card.small { aspect-ratio: 1 / .86; background: #e9dbc3; }
.work-card[data-title="规范书写"] { aspect-ratio: .69 / 1; }
.work-card[data-title="规范书写"] { grid-column: 1; grid-row: 1 / span 6; }
.work-card[data-title="硬笔练习"] { grid-column: 2; grid-row: 1 / span 2; }
.work-card[data-title="花鸟"] { grid-column: 2; grid-row: 3 / span 4; }
.work-card[data-title="山水"] { grid-column: 3; grid-row: 1 / span 2; }
.work-card[data-title="人物"] { grid-column: 3; grid-row: 3 / span 2; }
.work-card[data-title="荷趣"] { grid-column: 3; grid-row: 5 / span 2; }
.work-card[data-title="笔墨练习"] { grid-column: 4; grid-row: 1 / span 6; }
.work-card img { --work-image-scale: 1; height: 100%; object-fit: cover; object-position: center top; transform: scale(var(--work-image-scale)); transition: transform .55s ease; }
.work-card:hover { filter: saturate(1.06); transform: translateY(-3px); }
.work-card:hover img { transform: scale(calc(var(--work-image-scale) + .06)); }
.work-card[data-title="山水"] img { --work-image-scale: 1.68; transform-origin: center top; }
.work-card[data-title="人物"] img { --work-image-scale: 1.82; transform-origin: center top; }
.work-card[data-title="荷趣"] img { --work-image-scale: 1.68; transform-origin: center top; }
.work-card[data-title="硬笔练习"] img { --work-image-scale: 2.2; object-position: center 22%; transform-origin: center 22%; }
.work-card[data-title="规范书写"] { background: linear-gradient(135deg, #e8dbc1, #f1e7d5 55%, #e7d6b7); }
.work-card[data-title="规范书写"] .handwriting { color: #332c25; font-family: "Kaiti SC", "STKaiti", var(--serif); font-size: clamp(25px, 2.45vw, 43px); font-weight: 500; letter-spacing: .13em; }
.work-card::after { background: linear-gradient(0deg, rgba(30,25,19,.52), transparent 43%); content: ""; inset: 0; opacity: 0; pointer-events: none; position: absolute; transition: opacity .3s ease; }
.work-card:hover::after { opacity: 1; }
.work-card.is-selected { border-color: var(--ochre); box-shadow: 0 0 0 1px rgba(177,131,79,.22); }
.handwriting { align-items: center; color: #2e2b27; display: flex; font-family: var(--serif); font-size: clamp(30px, 3vw, 48px); height: 100%; justify-content: center; letter-spacing: .18em; line-height: 1.3; }
.small-writing { font-size: clamp(23px, 2.2vw, 34px); }
.work-note { color: var(--ink-soft); font-family: var(--serif); font-size: 14px; margin: 28px 0 0; text-align: center; }
.work-preview { background: rgba(255,255,255,.86); border: 1px solid rgba(119,88,50,.13); border-radius: 9px; box-shadow: 0 15px 34px rgba(78,57,31,.09); min-height: clamp(560px, 46vw, 760px); padding: clamp(22px, 2.25vw, 38px); position: sticky; top: 92px; }
.preview-label { color: var(--ochre-dark); display: block; font-family: var(--serif); font-size: 11px; letter-spacing: .13em; margin-bottom: 18px; }
.preview-image { aspect-ratio: .78; background: #eee3d2; object-fit: cover; object-position: center; transition: opacity .25s ease, transform .35s ease; }
.preview-handwriting, .lightbox-handwriting { align-items: center; background: #e9dbc3; display: flex; font-family: var(--serif); font-size: clamp(38px, 5vw, 64px); justify-content: center; letter-spacing: .18em; line-height: 1.5; margin: 0; text-orientation: upright; writing-mode: vertical-rl; }
.preview-handwriting { aspect-ratio: .77; width: 100%; }
.lightbox-handwriting { min-height: min(580px, 63vh); width: 100%; }
.work-preview:hover .preview-image { transform: scale(1.012); }
.work-preview.preview-flash .preview-image { animation: preview-in .4s ease both; }
.preview-caption { padding: 23px 3px 3px; text-align: center; }
.preview-caption h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; margin: 0; }
.preview-caption p { color: var(--ochre-dark); font-family: var(--serif); font-size: 12px; letter-spacing: .06em; margin: 6px 0 0; }

@media (min-width: 1051px) and (max-width: 1120px) {
  .works-showcase { gap: 26px; grid-template-columns: minmax(0, 1.48fr) minmax(276px, .82fr); }
  .work-preview { min-height: 510px; padding: 18px; }
}

@media (min-width: 901px) and (max-width: 1050px) {
  .works-showcase { gap: 24px; grid-template-columns: minmax(0, 1.38fr) minmax(270px, .82fr); }
  .work-grid { grid-template-columns: .58fr .95fr 1.24fr; grid-template-rows: repeat(6, clamp(64px, 8.2vw, 90px)); }
  .work-card[data-title="规范书写"] { grid-column: 1; grid-row: 1 / span 6; }
  .work-card[data-title="硬笔练习"] { grid-column: 2; grid-row: 1 / span 2; }
  .work-card[data-title="花鸟"] { grid-column: 2; grid-row: 3 / span 3; }
  .work-card[data-title="荷趣"] { grid-column: 2; grid-row: 6; }
  .work-card[data-title="笔墨练习"] { grid-column: 3; grid-row: 1 / span 2; }
  .work-card[data-title="山水"] { grid-column: 3; grid-row: 3 / span 2; }
  .work-card[data-title="人物"] { grid-column: 3; grid-row: 5 / span 2; }
  .work-preview { min-height: 500px; padding: 18px; }
}

/* One quiet photographic strip: retain each photo's proportions and scroll by hand. */
.environment.section { background: var(--paper); padding-block: clamp(44px, 4.5vw, 68px); }
.environment-heading { align-items: center; display: flex; gap: 20px; justify-content: space-between; margin-bottom: 28px; }
.environment h2 { font-family: var(--serif); font-size: clamp(26px, 2.2vw, 31px); font-weight: 500; letter-spacing: .08em; line-height: 1.35; margin: 0; }
.environment h2::after { background: var(--ochre); content: ""; display: block; height: 1px; margin-top: 12px; width: 25px; }
.environment-heading > p { color: var(--ink-soft); font-family: var(--serif); font-size: 14px; letter-spacing: .06em; margin: 0; }
.environment-photos { --photo-height: clamp(220px, 21vw, 275px); align-items: flex-end; background: linear-gradient(90deg, rgba(207,188,158,.13), transparent 18%, transparent 82%, rgba(207,188,158,.13)); border-block: 1px solid rgba(144,112,70,.18); cursor: grab; display: flex; flex-wrap: nowrap; gap: clamp(13px, 1.55vw, 24px); margin: 0 -8px; min-width: 0; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding: 22px 8px 30px; scrollbar-width: none; }
.environment-photos::-webkit-scrollbar { display: none; }
.environment-photos:focus-visible { outline-offset: 3px; }
.environment-photo { --photo-offset: 0px; aspect-ratio: 2 / 3; background: rgba(242,235,222,.65); border: 1px solid rgba(132,100,59,.18); cursor: zoom-in; display: block; flex: 0 0 auto; height: calc(var(--photo-height) * .88); min-width: 0; overflow: hidden; position: relative; transform: translateY(var(--photo-offset)); transition: transform .3s cubic-bezier(.2,.7,.25,1), box-shadow .3s ease; user-select: none; }
.environment-photo--landscape { aspect-ratio: 4 / 3; }
.environment-photo--feature { height: var(--photo-height); }
.environment-photo--tall { height: calc(var(--photo-height) * .98); }
.environment-photo--low { --photo-offset: 9px; }
.environment-photo--raised { --photo-offset: -8px; }
.environment-photo:focus-visible { outline-offset: 3px; }
.environment-photo img { height: 100%; object-fit: contain; pointer-events: none; width: 100%; }
.environment-photos.is-dragging, .environment-photos.is-dragging .environment-photo { cursor: grabbing; }
@media (hover: hover) and (pointer: fine) {
  .environment-photos:not(.is-dragging) .environment-photo:hover { box-shadow: 0 12px 25px rgba(61,44,24,.16); transform: translateY(calc(var(--photo-offset) - 8px)) scale(1.025); z-index: 1; }
}
.environment-footer { align-items: center; color: var(--ink-soft); display: flex; flex-wrap: wrap; font-family: var(--serif); font-size: 12px; gap: 8px 20px; justify-content: space-between; margin-top: 8px; }
.environment-actions { align-items: center; color: var(--ochre-dark); display: flex; font-family: var(--sans); font-size: 11px; gap: 14px; }
.environment-scroll-controls { display: flex; gap: 2px; }
.environment-actions button { align-items: center; background: transparent; border: 0; border-radius: 50%; color: inherit; display: inline-flex; height: 44px; justify-content: center; padding: 0; transition: background .2s ease; width: 44px; }
.environment-actions button[hidden] { display: none; }
.environment-actions button:hover:not(:disabled), .environment-actions button:focus-visible { background: rgba(159,119,71,.08); }
.environment-actions button:disabled { cursor: default; opacity: .25; }
.environment-actions button span { border-right: 1px solid currentColor; border-top: 1px solid currentColor; height: 9px; margin-right: 4px; transform: rotate(45deg); width: 9px; }
.environment-actions button[data-environment-scroll="-1"] span { margin: 0 0 0 4px; transform: rotate(-135deg); }
.environment-viewer { background: var(--paper); border: 0; color: var(--ink); height: min(850px, 94vh); height: min(850px, 94dvh); max-height: 94vh; max-height: 94dvh; max-width: calc(100vw - 24px); padding: 0; width: min(620px, 94vw); }
.environment-viewer[open] { display: flex; flex-direction: column; }
.environment-viewer::backdrop { background: rgba(36,31,24,.7); backdrop-filter: blur(5px); }
.environment-viewer-toolbar, .environment-viewer-footer { align-items: center; display: flex; flex: 0 0 auto; gap: 12px; justify-content: space-between; padding: 5px 18px; }
.environment-viewer-toolbar p { font-family: var(--serif); font-size: 19px; letter-spacing: .1em; margin: 0; }
.environment-viewer button { background: transparent; border: 1px solid transparent; border-radius: 3px; color: var(--ochre-dark); flex: 0 0 auto; font-size: 13px; min-height: 44px; min-width: 44px; padding: 8px 12px; }
.environment-viewer button:hover:not(:disabled) { background: #eae1d3; }
.environment-viewer button:disabled { cursor: default; opacity: .25; }
.environment-viewer .environment-viewer-close { border-radius: 50%; margin-right: -8px; position: relative; }
.environment-viewer-close span::before, .environment-viewer-close span::after { background: currentColor; content: ""; height: 1px; left: 12px; position: absolute; top: 21px; transform: rotate(45deg); width: 18px; }
.environment-viewer-close span::after { transform: rotate(-45deg); }
.environment-viewer-stage { background: #eee8dd; display: grid; flex: 1 1 auto; min-height: 70px; overflow: hidden; position: relative; touch-action: pan-y pinch-zoom; }
.environment-viewer-image { grid-area: 1 / 1; height: 100%; min-height: 0; object-fit: contain; user-select: none; width: 100%; }
.environment-viewer-message { left: 50%; max-width: 90%; position: absolute; text-align: center; top: 12px; transform: translateX(-50%); z-index: 1; }
.environment-viewer-status { color: var(--ink-soft); font-size: 12px; margin: 0; }
.environment-viewer-status:not(:empty), .environment-viewer-message .environment-viewer-retry { background: rgba(247,243,234,.94); border-radius: 3px; padding: 6px 12px; }
.environment-viewer-stage[aria-busy="true"] .environment-viewer-message { animation: environment-loading-hint .2s ease .2s forwards; opacity: 0; }
@keyframes environment-loading-hint { to { opacity: 1; } }
.environment-viewer button.environment-viewer-arrow { align-items: center; background: rgba(247,243,234,.88); border: 1px solid rgba(87,64,39,.12); border-radius: 50%; display: flex; height: 44px; justify-content: center; padding: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 44px; }
.environment-viewer-arrow[data-environment-step="-1"] { left: 12px; }
.environment-viewer-arrow[data-environment-step="1"] { right: 12px; }
.environment-viewer-arrow span { border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; height: 9px; margin-left: -3px; transform: rotate(45deg); width: 9px; }
.environment-viewer-arrow[data-environment-step="-1"] span { margin-left: 3px; transform: rotate(-135deg); }
.environment-viewer-footer { min-height: 44px; }
.environment-viewer-caption { color: var(--ink-soft); font-size: 13px; margin: 0; text-align: center; }
.environment-viewer-count { color: var(--ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; }
.environment-viewer-thumbnails { display: flex; flex: 0 0 auto; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding: 0 18px 14px; scrollbar-color: #bba78a transparent; scrollbar-width: thin; }
.environment-viewer-thumbnails button:first-child { margin-left: auto; }
.environment-viewer-thumbnails button:last-child { margin-right: auto; }
.environment-viewer-thumbnails button { border-radius: 1px; height: 54px; opacity: .65; padding: 3px; width: 54px; }
.environment-viewer-thumbnails button[aria-pressed="true"] { border-color: var(--ochre-dark); }
.environment-viewer-thumbnails button[aria-pressed="true"], .environment-viewer-thumbnails button:hover { opacity: 1; }
.environment-viewer-thumbnails img { height: 100%; object-fit: cover; width: 100%; }
html:has(.environment-viewer[open]) { overflow: hidden; }

/* On a short landscape screen, keep the photograph tall and move controls aside. */
@media (max-height: 500px) and (min-width: 480px) {
  .environment-viewer[open] { display: grid; grid-template-columns: minmax(0, 1fr) min(32vw, 230px); grid-template-rows: 54px minmax(44px, 1fr) 82px; width: min(820px, 94vw); }
  .environment-viewer-stage { grid-column: 1; grid-row: 1 / 4; min-height: 0; }
  .environment-viewer-toolbar { grid-column: 2; grid-row: 1; padding-inline: 10px; }
  .environment-viewer-footer { align-self: end; gap: 8px; grid-column: 2; grid-row: 2; padding-inline: 14px; }
  .environment-viewer-thumbnails { align-self: center; grid-column: 2; grid-row: 3; padding-inline: 10px; }
}

.locations { background: #eee4d2; overflow: hidden; padding: 0; }
.location-layout { margin: 0 auto; max-width: 1760px; padding: clamp(94px, 9.8vw, 166px) clamp(38px, 8.4vw, 148px) 0; }
.location-redesign-copy { max-width: 620px; }
.location-redesign-copy h2 { align-items: center; display: flex; font-size: clamp(48px, 5vw, 76px); gap: 15px; margin: 0; }
.location-redesign-copy .brush-rule { margin: 18px 0 13px; }
.location-redesign-copy > p { color: var(--ink-soft); font-family: var(--serif); font-size: 17px; letter-spacing: .08em; margin: 0; }
.location-redesign-subtitle { color: var(--ink); font-family: var(--serif); font-size: clamp(25px, 2.35vw, 36px); font-weight: 600; letter-spacing: .08em; margin-top: clamp(72px, 8vw, 120px); position: relative; }
.location-redesign-subtitle::after { background: var(--ochre); bottom: -15px; content: ""; height: 2px; left: 0; position: absolute; width: 34px; }
.location-redesign-cards { display: grid; gap: clamp(22px, 2.2vw, 38px); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 43px; }
.campus-card { background: #f6efe5; border: 1px solid rgba(119,84,48,.23); color: inherit; display: block; min-width: 0; overflow: hidden; position: relative; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; }
.campus-card.is-guide-preview, .campus-card:focus-within { border-color: rgba(157,111,55,.55); box-shadow: 0 18px 34px rgba(91,63,33,.13); }
.campus-card-visual { appearance: none; aspect-ratio: 1672 / 941; background: transparent; border: 0; color: inherit; display: block; font: inherit; overflow: hidden; padding: 0; position: relative; text-align: left; width: 100%; }
.campus-card-visual:focus-visible { outline: 1px solid var(--ochre-dark); outline-offset: -4px; }
.campus-guide-help { color: var(--ink-soft); font-size: 12px; margin: 14px 0 0; }
@media (hover: hover) and (pointer: fine) {
  .campus-card:hover { transform: translateY(-4px); }
  .campus-guide-help { height: 1px; margin: -1px; overflow: hidden; position: absolute; width: 1px; clip-path: inset(50%); }
}
.campus-card-art, .campus-guide-art { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.campus-card-art { z-index: 0; }
.campus-guide-art { opacity: 0; transform: scale(1.015); transition: opacity .42s ease, transform .55s ease; z-index: 1; }
.campus-card-qibao .campus-guide-art { transform: scale(1.55); transform-origin: 56% 54%; }
/* 两个校区的悬浮近景保持同一聚焦尺度；仅按各自园区图调整取景中心。 */
.campus-card-nanjing .campus-guide-art { transform: scale(1.55); transform-origin: 63% 49%; }
.campus-card-copy { display: grid; gap: 10px; left: 8.5%; position: absolute; right: 8.5%; top: 13%; transition: opacity .25s ease, transform .25s ease; z-index: 2; }
.campus-card-copy strong { color: var(--ink); font-family: var(--serif); font-size: clamp(22px, 1.95vw, 34px); font-weight: 600; letter-spacing: .06em; }
.campus-address { color: var(--ink-soft); font-family: var(--serif); font-size: clamp(10px, .83vw, 14px); letter-spacing: .07em; line-height: 1.5; }
.campus-road-set { color: rgba(118,84,46,.78); font-family: var(--serif); font-size: clamp(9px, .72vw, 13px); inset: 0; letter-spacing: .04em; pointer-events: none; position: absolute; text-shadow: 0 1px 2px rgba(251,247,240,.78); transition: opacity .25s ease; z-index: 2; }
.campus-road-set i { background: none; font-style: normal; padding: 0; position: absolute; white-space: nowrap; }
.campus-road-set-qibao .road-caobao { left: 10.8%; top: 64.4%; transform: rotate(-6deg); }
.campus-road-set-qibao .road-xinzhen { left: 42.2%; top: 52.7%; transform: rotate(86deg); transform-origin: left center; }
.campus-road-set-qibao .road-xinlong { left: 14.5%; top: 85.1%; transform: rotate(-8deg); }
.campus-road-set-qibao .road-qingnian { left: 50.8%; top: 48.8%; transform: rotate(86deg); transform-origin: left center; }
.campus-road-set-qibao .road-minzhu { left: 23.2%; top: 67.5%; transform: rotate(86deg); transform-origin: left center; }
.campus-road-set-nanjing .road-hubu { left: 8.8%; top: 57.5%; transform: rotate(10deg); }
.campus-road-set-nanjing .road-taiping { left: 52.5%; top: 39.4%; transform: rotate(88deg); transform-origin: left center; }
.campus-road-set-nanjing .road-yanling { left: 33.2%; top: 67.1%; transform: rotate(8deg); }
.campus-road-set-nanjing .road-huaihai { left: 11.7%; top: 75.7%; transform: rotate(11deg); }
.campus-road-set-nanjing .road-yanggongjing { left: 35.8%; top: 55.1%; transform: rotate(71deg); transform-origin: left center; }
.campus-road-set-nanjing .road-hongwu { left: 25.7%; top: 57.3%; transform: rotate(75deg); transform-origin: left center; }
.campus-guide-copy { display: grid; gap: 7px; left: 8.5%; opacity: 0; position: absolute; right: 8.5%; top: 12%; transform: translateY(8px); transition: opacity .3s ease .08s, transform .3s ease .08s; z-index: 3; }
.campus-guide-copy i { color: var(--ochre-dark); font-family: var(--sans); font-size: clamp(9px, .68vw, 12px); font-style: normal; font-weight: 600; letter-spacing: .2em; }
.campus-guide-copy strong { color: var(--ink); font-family: var(--serif); font-size: clamp(20px, 1.75vw, 30px); font-weight: 600; letter-spacing: .06em; }
.campus-guide-copy em { color: var(--ink-soft); font-family: var(--serif); font-size: clamp(10px, .8vw, 14px); font-style: normal; letter-spacing: .08em; }
.campus-guide-marker { align-items: center; color: var(--ochre-dark); display: inline-flex; font-family: var(--serif); font-size: clamp(10px, .83vw, 14px); font-weight: 600; gap: 7px; letter-spacing: .07em; opacity: 0; position: absolute; transform: translateY(6px); transition: opacity .3s ease .12s, transform .3s ease .12s; white-space: nowrap; z-index: 3; }
.campus-guide-marker::before { background: var(--seal); border: 2px solid rgba(255,250,242,.94); border-radius: 50%; box-shadow: 0 2px 8px rgba(111,58,35,.25), 0 0 0 1px rgba(124,73,42,.3); content: ""; flex: 0 0 auto; height: 11px; width: 11px; }
.campus-guide-marker::after { background: #f8efe4; border-radius: 50%; content: ""; height: 3px; left: 6px; position: absolute; top: 6px; width: 3px; }
.campus-guide-marker-qibao { left: 64.5%; top: 77%; }
.campus-guide-marker-nanjing { flex-direction: row-reverse; left: 82.4%; top: 62.2%; transform: translate(-100%, 6px); }
.campus-guide-marker-nanjing::after { left: auto; right: 6px; }
.campus-card.is-guide-preview .campus-guide-art { opacity: 1; }
.campus-card.is-guide-preview .campus-card-copy { opacity: 0; transform: translateY(-6px); }
.campus-card.is-guide-preview .campus-road-set { opacity: 0; }
.campus-card.is-guide-preview .campus-guide-copy, .campus-card.is-guide-preview .campus-guide-marker { opacity: 1; transform: translateY(0); }
.campus-card.is-guide-preview .campus-guide-marker-nanjing { transform: translate(-100%, 0); }
.campus-card-action { align-items: center; background: transparent; border: 0; border-radius: 999px; bottom: calc(4% - 2px); color: #8c7357; display: inline-flex; font-family: var(--sans); font-size: clamp(12px, .78vw, 13px); font-weight: 400; gap: 6px; letter-spacing: .04em; line-height: 1.5; min-height: 32px; padding: 6px 12px; position: absolute; right: calc(8% - 12px); transition: background-color .22s ease, box-shadow .22s ease, color .2s ease; white-space: nowrap; z-index: 4; }
.campus-card-action:hover, .campus-card-action:focus-visible, .campus-card-action:active { background-color: rgba(230,212,183,.78); box-shadow: 0 2px 8px rgba(102,75,43,.08); color: #6e563e; }
.campus-card-action:focus-visible { outline: 1px solid rgba(140,115,87,.45); outline-offset: 2px; text-decoration: none; }
.campus-card-action-icon { display: block; flex: 0 0 14px; height: 14px; object-fit: contain; opacity: .9; transition: opacity .2s ease, transform .2s ease; width: 14px; }
.campus-card-action:hover .campus-card-action-icon, .campus-card-action:focus-visible .campus-card-action-icon { opacity: 1; transform: translate(1px, -1px); }
.follow-us { position: relative; z-index: 1; }
.location-title-seal { display: inline-block; height: .56em; margin-left: .08em; mix-blend-mode: multiply; object-fit: contain; transform: rotate(-3deg); vertical-align: .03em; width: .56em; }
.follow-us { aspect-ratio: 2061 / 763; margin: 0; overflow: hidden; padding: 0; position: relative; text-align: center; width: 100%; }
.follow-design { height: 100%; left: 0; object-fit: cover; position: absolute; top: 0; width: 100%; }
.follow-title { color: var(--ochre-dark); font-family: var(--serif); font-size: clamp(14px, 1.15vw, 20px); font-weight: 600; left: 0; letter-spacing: .22em; margin: 0; position: absolute; top: 24%; width: 100%; }
.qr-list { inset: 0; position: absolute; }
.qr-card { align-items: center; aspect-ratio: 1; display: flex; justify-content: center; margin: 0; position: absolute; text-align: center; top: 42.3%; width: 13.8%; }
.qr-card:first-child { left: 34.85%; }
.qr-card:last-child { left: 50.8%; }
.qr-card img { aspect-ratio: 1; background: #fff; border: 0; height: 82%; object-fit: contain; padding: 0; width: 82%; }
.qr-card figcaption { left: 50%; position: absolute; top: 107%; transform: translateX(-50%); white-space: nowrap; }
.qr-card span { color: var(--ochre-dark); display: block; font-size: clamp(8px, .6vw, 11px); letter-spacing: .16em; margin-bottom: 2px; }
.qr-card strong { color: var(--ink); display: block; font-family: var(--serif); font-size: clamp(9px, .75vw, 13px); font-weight: 600; line-height: 1.5; }
.site-footer { background: #292824; color: #e9dfcd; display: grid; gap: 30px; grid-template-columns: 1.1fr 1.4fr; padding: 52px clamp(24px, 9vw, 160px) 28px; position: relative; }
.brand-footer { color: #f1e4cc; }
.brand-footer .brand-logo { filter: brightness(1.32) saturate(.72); mix-blend-mode: normal; }
.brand-footer .brand-seal { filter: saturate(.78) brightness(1.17); mix-blend-mode: normal; }
.site-footer p { color: #c0b39f; font-family: var(--serif); font-size: 13px; margin: 9px 0 0; }
.footer-links { align-items: center; display: flex; flex-wrap: wrap; gap: 12px 30px; justify-content: flex-end; }
.footer-links a { color: #d8cbb7; font-size: 13px; transition: color .25s ease; }
.footer-links a:hover { color: #fff4e3; }
.copyright { border-top: 1px solid rgba(225,204,175,.2); grid-column: 1 / -1; padding-top: 17px; text-align: center; }
.filing-number { margin-left: 14px; white-space: nowrap; }

.lightbox { background: rgba(248,244,235,.96); border: 1px solid rgba(177,131,79,.35); box-shadow: 0 24px 80px rgba(36,28,18,.35); max-height: min(780px, 91vh); max-width: min(1100px, 92vw); padding: 0; width: min(1100px, 92vw); }
.lightbox::backdrop { background: rgba(31,28,24,.58); backdrop-filter: blur(4px); }
.lightbox-inner { align-items: stretch; display: grid; grid-template-columns: 1fr 260px; }
.lightbox-image { background: #e9dfcf; height: min(680px, 80vh); object-fit: contain; padding: 25px; width: 100%; }
.lightbox-caption { align-self: end; padding: 36px 28px; }
.lightbox-title { font-family: var(--serif); font-size: 30px; margin: 0; }
.lightbox-label { color: var(--ochre-dark); font-size: 13px; }
.lightbox-close { background: none; border: 0; color: var(--ink-soft); font-size: 30px; line-height: 1; padding: 12px 17px; position: absolute; right: 0; top: 0; z-index: 2; }

.reveal { opacity: 1; transform: none; }
.reveal.is-visible { opacity: 1; transform: none; }
@keyframes preview-in { from { opacity: .5; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }

@media (min-width: 901px) and (max-width: 1199px) {
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .features .feature-card { gap: 22px; padding-inline: 24px; }
  .features .feature-icon { height: 84px; width: 84px; }
  .features .feature-card::after, .features .feature-card::before { display: none; }
  .features .feature-card:nth-child(odd)::after { background: rgba(137,94,52,.18); content: ""; display: block; height: 160px; position: absolute; right: 0; top: 0; width: 1px; }
  .features .feature-card:nth-child(n + 3)::before { background: rgba(137,94,52,.18); content: ""; display: block; height: 1px; left: 0; position: absolute; right: 0; top: -26px; }
}

@media (max-width: 900px) {
  .site-header { height: 66px; padding: 0 24px; }
  .brand-logo { height: 30px; }
  .menu-toggle { display: block; position: relative; z-index: 2; }
  .site-nav { background: rgba(247,243,234,.98); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 0; height: auto; left: 0; opacity: 0; padding: 82px 24px 24px; pointer-events: none; position: absolute; top: 0; transform: translateY(-12px); transition: opacity .25s ease, transform .25s ease; visibility: hidden; width: 100%; }
  .site-nav.is-open { opacity: 1; pointer-events: auto; transform: translateY(0); visibility: visible; }
  .site-nav a { border-bottom: 1px solid var(--line); font-size: 16px; padding: 13px 0; }
  .site-nav a::after { bottom: 20px; left: auto; right: 4px; }
  .hero { padding-top: 66px; }
  .locations { padding: clamp(86px, 10vw, 156px) clamp(24px, 9vw, 160px); }
  .location-layout { padding: 0; }
  .location-redesign-cards { grid-template-columns: minmax(0, 1fr); }
  .campus-card-copy strong { font-size: clamp(22px, 4vw, 32px); }
  .campus-address { font-size: clamp(12px, 1.7vw, 14px); }
  .campus-guide-copy strong { font-size: clamp(16px, 3vw, 26px); }
  .campus-guide-copy i, .campus-guide-copy em, .campus-guide-marker { font-size: 12px; }
  .follow-us { align-items: center; aspect-ratio: auto; border-top: 1px solid rgba(111,78,45,.18); display: flex; flex-direction: column; gap: 17px; justify-content: center; margin: 68px 0 0; overflow: visible; padding-top: 27px; width: auto; }
  .follow-design { display: none; }
  .follow-title { font-size: 13px; left: auto; position: static; top: auto; width: auto; }
  .qr-list { display: flex; gap: clamp(36px, 5vw, 76px); inset: auto; justify-content: center; position: static; }
  .qr-card { align-items: center; aspect-ratio: auto; display: flex; flex-direction: column; gap: 8px; justify-content: flex-start; min-width: 132px; position: static; top: auto; width: auto; }
  .qr-card:first-child, .qr-card:last-child { left: auto; }
  .qr-card img { border: 1px solid rgba(177,131,79,.28); height: 94px; padding: 3px; width: 94px; }
  .qr-card figcaption { left: auto; position: static; top: auto; transform: none; white-space: nowrap; }
  .qr-card span { font-size: 10px; margin-bottom: 3px; }
  .qr-card strong { font-size: 13px; }
  .about-layout { grid-template-columns: 1fr; }
  .about-image { max-width: none; }
  .section-heading, .works-heading { align-items: start; flex-direction: column; gap: 9px; margin-bottom: 35px; }
  .features { padding: 72px 24px; }
  .feature-heading { margin-left: 0; }
  .feature-heading h2 { font-size: 40px; }
  .feature-grid { margin-top: 34px; row-gap: 0; }
  .features .feature-card::before { display: none; }
  .course-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .course-card { min-height: 0; }
  .feature-card { min-height: 145px; padding: 22px 16px; }
  .features .feature-card { border-bottom: 1px solid rgba(137,94,52,.18); gap: 20px; min-height: 172px; padding: 22px 16px; }
  .features .feature-card:nth-child(3n + 1) { padding-left: 16px; }
  .features .feature-card::after { display: none; }
  .features .feature-icon { height: 64px; width: 64px; }
  .features .feature-card h3 { font-size: 19px; margin: -2px 0 4px; }
  .features .feature-card p { font-size: 12px; }
  .works-showcase { grid-template-columns: 1fr; }
  .work-grid { align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .work-column { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
  .work-column:nth-child(3) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid .work-card { aspect-ratio: 1 / 1; grid-column: auto; grid-row: auto; height: auto; }
  .work-grid .work-card.tall, .work-grid .work-card[data-title="规范书写"] { aspect-ratio: .69 / 1; }
  .work-grid .work-card.large { aspect-ratio: .82 / 1; }
  .work-grid .work-card.wide { aspect-ratio: 1 / .64; }
  .work-grid .work-card.medium { aspect-ratio: 1 / .84; }
  .work-grid .work-card.small { aspect-ratio: 1 / .86; }
  .work-preview { display: none; }
  .work-controls { gap: 22px; }
  .site-footer { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; padding-right: 0; }
  .lightbox-inner { grid-template-columns: 1fr; }
  .lightbox-image { height: min(63vh, 580px); }
  .lightbox-caption { padding: 16px 24px 25px; }
}

@media (min-width: 601px) and (max-width: 760px) {
  .hero-controls { bottom: 6px; left: auto; right: 12px; transform: none; }
  .hero-controls button { height: 32px; width: 32px; }
}

@media (max-width: 600px) {
  .hero { padding-bottom: 46px; }
  .hero-slides { aspect-ratio: auto; display: grid; }
  .hero-slide { grid-area: 1 / 1; min-width: 0; position: relative; }
  .hero-artwork, .hero-slide--focus .hero-artwork { aspect-ratio: 796 / 480; display: block; height: auto; }
  .hero-image, .hero-slide--focus .hero-image { height: 100%; mask-image: none; object-fit: cover; object-position: right center; width: 100%; }
  .hero-copy, .hero-slide--focus .hero-copy { clip: auto; clip-path: none; height: auto; left: auto; overflow: visible; padding: 44px 24px 30px; position: relative; top: auto; white-space: normal; width: auto; }
  .hero h1, .hero-slide--focus h2 { font-size: clamp(25px, 7.3vw, 38px); letter-spacing: .02em; line-height: 1.5; white-space: nowrap; }
  .hero .brush-rule, .hero-slide--focus .brush-rule { margin: 20px 0 17px; width: 32px; }
  .hero-lead { font-size: 14px; letter-spacing: .01em; }
  .hero-controls { background: transparent; border-color: transparent; bottom: 3px; }
}

@media (max-width: 560px) {
  .environment-heading { align-items: start; flex-direction: column; gap: 12px; margin-bottom: 22px; }
  .environment-heading > p { font-size: 13px; }
  .environment-photos { --photo-height: clamp(200px, 56vw, 235px); gap: 12px; margin-inline: -4px; padding: 18px 4px 26px; }
  .environment-photo--low { --photo-offset: 5px; }
  .environment-photo--raised { --photo-offset: -5px; }
  .environment-footer { font-size: 11px; }
  .environment-footer > span { display: none; }
  .environment-actions { gap: 8px; justify-content: space-between; width: 100%; }
  .environment-viewer { width: calc(100vw - 24px); }
  .environment-viewer-toolbar, .environment-viewer-footer { gap: 4px; padding-inline: 10px; }
  .environment-viewer-thumbnails { padding-inline: 10px; }
  .environment-viewer-toolbar p { font-size: 18px; }
  .environment-viewer-caption { font-size: 12px; }
  .section { padding: 72px 21px; }
  .about-copy h2, .section-heading h2, .works-heading h2, .location-redesign-copy h2 { font-size: 40px; }
  .course-grid, .feature-grid { grid-template-columns: 1fr; }
  .course-card { min-height: 0; }
  .feature-card { min-height: 130px; }
  .features .feature-card { min-height: 130px; }
  .work-grid, .work-column { gap: 8px; }
  .location-redesign-copy > p { font-size: 14px; }
  .location-redesign-subtitle { margin-top: 62px; }
  .campus-card-copy { gap: 5px; top: 9%; }
  .campus-guide-copy { gap: 4px; top: 9%; }
  .campus-guide-marker { font-size: clamp(10px, 3vw, 12px); }
  .campus-card-action { bottom: 2px; min-height: 24px; padding: 3px 10px; }
  .campus-card-action::after { content: ""; inset: -10px 0; position: absolute; }
  .campus-guide-marker-qibao .campus-guide-marker-label { left: -2px; position: absolute; top: -22px; }
  .follow-us { align-items: center; gap: 16px; margin: 45px 0 0; padding-top: 23px; }
  .qr-list { gap: 24px; width: auto; }
  .qr-card { align-items: center; gap: 7px; }
  .qr-card img { height: 94px; width: 94px; }
  .qr-card strong { font-size: 13px; white-space: normal; }
  .site-footer { padding: 44px 21px 24px; }
}

@media (max-width: 360px) {
  .campus-card-action { bottom: 0; font-size: 11px; line-height: 16px; min-height: 18px; padding-block: 1px; }
  .campus-card-action::after { inset-block: -13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}