body.school-reader-open { overflow: hidden; }

.schools-section {
  position: relative;
  overflow: clip;
  padding: clamp(112px, 14vh, 174px) 0 clamp(90px, 12vh, 150px);
  background: linear-gradient(135deg, #0b1615, #14241f 52%, #0a1513);
  color: #f8f2e5;
}
.schools-section::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(230, 198, 125, .026) 1px, transparent 1px), linear-gradient(rgba(230, 198, 125, .022) 1px, transparent 1px), radial-gradient(ellipse at 85% 15%, rgba(222, 185, 108, .1), transparent 34%), radial-gradient(ellipse at 0% 80%, rgba(113, 158, 133, .1), transparent 40%); background-size: 52px 52px, 52px 52px, 100% 100%, 100% 100%; content: ""; pointer-events: none; }
.schools-inner { position: relative; z-index: 1; width: min(1360px, calc(100% - 12vw)); margin: 0 auto; }
.schools-header { display: grid; grid-template-columns: minmax(0, .95fr) minmax(280px, .46fr); gap: clamp(28px, 9vw, 150px); align-items: end; max-width: 1150px; }
.schools-eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 19px; color: rgba(244, 215, 154, .88); font-size: 10px; font-weight: 600; letter-spacing: .21em; }
.schools-eyebrow > span:first-child { display: grid; width: 28px; height: 20px; place-items: center; border: 1px solid rgba(239, 203, 127, .74); color: #f0d38b; font-size: 9px; }
.schools-title { margin: 0; color: #fff7e8; font-family: "Songti TC", "STSong", "Noto Serif TC", Georgia, serif; font-size: clamp(43px, 5.15vw, 82px); font-weight: 500; letter-spacing: .07em; line-height: 1.12; }
.schools-title-line { display: block; overflow: hidden; padding-bottom: .08em; }
.schools-title-line > span { display: block; opacity: 0; transform: translateY(108%); transition: transform 840ms cubic-bezier(.16,1,.3,1), opacity 520ms ease; }
.schools-section.is-visible .schools-title-line > span { opacity: 1; transform: none; }
.schools-section.is-visible .schools-title-line + .schools-title-line > span { transition-delay: 120ms; }
.schools-intro { max-width: 370px; margin: 0 0 5px; color: rgba(226, 235, 223, .74); font-size: 13px; font-weight: 300; letter-spacing: .045em; line-height: 1.9; }

.schools-atlas { margin-top: clamp(58px, 9vh, 110px); opacity: 0; transform: translateY(46px); transition: opacity 850ms ease, transform 900ms cubic-bezier(.16,1,.3,1); }
.schools-atlas.is-visible { opacity: 1; transform: none; }
.schools-figure { position: relative; margin: 0; padding: clamp(20px, 2.5vw, 38px); border: 1px solid rgba(235, 203, 133, .6); background: linear-gradient(145deg, rgba(244, 240, 226, .08), rgba(11, 26, 21, .22)); box-shadow: 0 30px 60px rgba(0,0,0,.18); }
.schools-figure::before { position: absolute; inset: 14px; border: 1px solid rgba(235, 206, 144, .19); content: ""; pointer-events: none; }
.schools-image-shell { position: relative; display: grid; min-height: clamp(370px, 51vw, 690px); place-items: center; overflow: hidden; background: #e6e7e7; }
.schools-image-shell::after { position: absolute; inset: 0; border: 1px solid rgba(8, 22, 17, .16); content: ""; pointer-events: none; }
.schools-image { display: block; width: 100%; height: 100%; min-height: inherit; object-fit: contain; opacity: .01; transform: translateY(10%); transition: opacity 750ms ease, transform 900ms cubic-bezier(.16,1,.3,1); }
.schools-atlas.is-visible .schools-image { opacity: 1; transform: none; }
.schools-image-label { position: absolute; z-index: 2; top: 24px; left: 25px; display: flex; align-items: center; gap: 9px; margin: 0; color: #4d3b26; font-size: 9px; font-weight: 600; letter-spacing: .17em; text-shadow: 0 1px 8px rgba(255,255,255,.7); }
.schools-image-label::before { width: 24px; height: 1px; background: currentColor; content: ""; }
.schools-image-zoom { position: absolute; z-index: 4; right: 24px; bottom: 24px; display: grid; width: 49px; height: 49px; place-items: center; border: 1px solid rgba(255, 231, 175, .94); border-radius: 50%; background: rgba(14, 31, 25, .8); color: #f7dc9b; box-shadow: 0 7px 22px rgba(0,0,0,.27); backdrop-filter: blur(7px); transition: transform .22s ease, background .22s ease, color .22s ease; }
.schools-image-zoom svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.45; }
.schools-image-zoom:hover, .schools-image-zoom:focus-visible { outline: 0; background: #efd18e; color: #11231c; transform: scale(1.07); }
.schools-figure-caption { display: flex; align-items: center; gap: 10px; margin: 17px 0 0; color: rgba(231, 224, 203, .57); font-size: 9px; letter-spacing: .12em; }
.schools-figure-caption .reference-mark { border-color: #d7b56c; }

.schools-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 32px; border: 1px solid rgba(231, 199, 130, .37); background: rgba(231, 199, 130, .37); }
.school-fact { min-height: 166px; padding: 24px 24px 21px; background: linear-gradient(142deg, rgba(242, 237, 218, .1), rgba(37, 71, 57, .32)); opacity: 0; transform: translateY(18px); transition: opacity 520ms ease, transform 620ms cubic-bezier(.16,1,.3,1), background .2s ease; }
.schools-atlas.is-visible .school-fact { opacity: 1; transform: none; }
.schools-atlas.is-visible .school-fact:nth-child(2) { transition-delay: 120ms; }
.schools-atlas.is-visible .school-fact:nth-child(3) { transition-delay: 240ms; }
.schools-atlas.is-visible .school-fact:nth-child(4) { transition-delay: 360ms; }
.school-fact:hover { background: linear-gradient(142deg, rgba(243, 235, 208, .17), rgba(54, 94, 72, .4)); }
.school-fact-number { margin: 0 0 23px; color: rgba(234, 203, 132, .85); font-family: Georgia, serif; font-size: 21px; line-height: .7; }
.school-fact-label { margin: 0 0 9px; color: rgba(232, 211, 166, .66); font-size: 9px; font-weight: 600; letter-spacing: .16em; }
.school-fact strong { display: block; color: #fff3d8; font-family: "Songti TC", "STSong", Georgia, serif; font-size: clamp(20px, 2vw, 28px); font-weight: 500; letter-spacing: .065em; line-height: 1.3; }
.schools-footer { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-top: 34px; }
.schools-reference { display: flex; max-width: 570px; align-items: flex-start; gap: 10px; margin: 0; color: rgba(231, 223, 199, .53); font-size: 10px; letter-spacing: .085em; line-height: 1.8; }
.schools-reference .reference-mark { flex: 0 0 auto; margin-top: 4px; border-color: #d6b36b; }
.schools-cta { display: inline-flex; min-width: 206px; align-items: center; justify-content: center; gap: 18px; padding: 15px 20px; border: 1px solid rgba(235, 201, 128, .7); color: #f4d996; font-size: 12px; letter-spacing: .1em; text-decoration: none; transition: background .22s ease, color .22s ease, transform .22s ease; }
.schools-cta:hover, .schools-cta:focus-visible { outline: 0; background: #efd18e; color: #12231c; transform: translateY(-2px); }

.school-reader { position: fixed; z-index: 110; inset: 0; display: grid; visibility: hidden; place-items: center; padding: clamp(16px, 4vw, 60px); background: rgba(4, 10, 8, .88); opacity: 0; transition: opacity .25s ease, visibility .25s ease; }
.school-reader.is-open { visibility: visible; opacity: 1; }
.school-reader-backdrop { position: absolute; inset: 0; border: 0; background: transparent; }
.school-reader-panel { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(285px, .55fr); width: min(1300px, 100%); max-height: min(86vh, 850px); overflow: hidden; border: 1px solid rgba(235, 202, 129, .62); background: #0a1612; box-shadow: 0 35px 90px rgba(0,0,0,.58); transform: translateY(16px); transition: transform .36s cubic-bezier(.16,1,.3,1); }
.school-reader.is-open .school-reader-panel { transform: none; }
.school-reader-canvas { position: relative; display: grid; min-height: min(74vh, 720px); place-items: center; overflow: hidden; background: #dcdedb; touch-action: none; }
.school-reader-canvas img { display: block; max-width: calc(100% - 38px); max-height: calc(100% - 38px); object-fit: contain; transform-origin: center; will-change: transform; }
.school-reader-controls { position: absolute; right: 19px; bottom: 19px; display: flex; overflow: hidden; border: 1px solid rgba(243, 213, 149, .78); background: rgba(10, 27, 20, .77); box-shadow: 0 8px 20px rgba(0,0,0,.2); backdrop-filter: blur(8px); }
.school-reader-controls button { display: grid; width: 39px; height: 39px; place-items: center; border: 0; border-right: 1px solid rgba(243, 213, 149, .36); background: transparent; color: #f8dd9b; font-size: 19px; }
.school-reader-controls button:last-child { border-right: 0; }
.school-reader-controls button:hover, .school-reader-controls button:focus-visible { outline: 0; background: #eed08c; color: #13241c; }
.school-reader-copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(38px, 5vw, 70px) clamp(28px, 4.2vw, 64px); overflow: auto; }
.school-reader-kicker { margin: 0 0 22px; color: rgba(232, 208, 156, .7); font-size: 9px; font-weight: 600; letter-spacing: .18em; }
.school-reader-copy h2 { margin: 0; color: #fff1d4; font-family: "Songti TC", "STSong", Georgia, serif; font-size: clamp(29px, 3.2vw, 47px); font-weight: 500; line-height: 1.22; }
.school-reader-copy > p:not(.school-reader-kicker) { margin: 20px 0 0; color: rgba(228, 235, 222, .73); font-size: 13px; letter-spacing: .025em; line-height: 1.86; }
.school-reader-hint { color: rgba(235, 215, 171, .64) !important; font-size: 10px !important; letter-spacing: .1em !important; }
.school-reader-reference { margin-top: 32px !important; padding-top: 17px; border-top: 1px solid rgba(236, 203, 134, .22); color: rgba(227, 220, 198, .53) !important; font-size: 9px !important; letter-spacing: .12em !important; }
.school-reader-close { position: absolute; z-index: 3; top: 17px; right: 17px; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(244, 215, 150, .84); border-radius: 50%; background: rgba(10, 28, 21, .78); color: #f7dda8; font-size: 25px; font-weight: 200; line-height: 1; transition: background .2s ease, color .2s ease; }
.school-reader-close:hover, .school-reader-close:focus-visible { outline: 0; background: #efd18d; color: #15231d; }

@media (max-width: 880px) {
  .schools-section { padding: 104px 0 78px; }
  .schools-inner { width: min(100% - 40px, 660px); }
  .schools-header { display: block; }
  .schools-eyebrow { font-size: 9px; letter-spacing: .18em; }
  .schools-title { font-size: clamp(38px, 12vw, 55px); }
  .schools-intro { margin-top: 19px; }
  .schools-atlas { margin-top: 48px; }
  .schools-figure { padding: 15px; }
  .schools-figure::before { inset: 8px; }
  .schools-image-shell { min-height: min(67vw, 530px); }
  .schools-image-label { top: 18px; left: 18px; font-size: 7px; }
  .schools-image-zoom { right: 16px; bottom: 16px; width: 45px; height: 45px; }
  .schools-facts { grid-template-columns: 1fr 1fr; margin-top: 22px; }
  .school-fact { min-height: 147px; padding: 20px 18px; }
  .schools-footer { display: block; margin-top: 25px; }
  .schools-cta { margin-top: 22px; }
  .school-reader { padding: 13px; }
  .school-reader-panel { display: block; max-height: 91vh; overflow: auto; }
  .school-reader-canvas { min-height: min(54vh, 510px); }
  .school-reader-canvas img { max-width: calc(100% - 24px); max-height: calc(100% - 24px); }
  .school-reader-copy { display: block; padding: 28px 25px 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .schools-title-line > span, .schools-atlas, .school-fact, .schools-image { opacity: 1; transform: none; transition: none; }
}