/* The approved illustrated garden, isolated from the rest of About Us. */
#values{--garden-paper:#fffdf7;margin-top:0;border-radius:0;box-shadow:none;padding-top:48px;background:linear-gradient(#F6F1EF,var(--garden-paper)) 0 0/100% 48px no-repeat,var(--garden-paper);color:#3c3931}
#values,#values + #students{display:flow-root}
#values > .chap{margin-top:0;background:var(--garden-paper)}
#values .chap-kick{white-space:normal;text-wrap:balance}
#values .garden-wrap{max-width:1320px;margin:auto;padding:20px 32px 86px;position:relative;z-index:2}
#values .garden-scene{--accent:#ab4938;font:15px/1.7 'Noto Sans TC',sans-serif}
#values .garden-scene *,#values .garden-motion{box-sizing:border-box}
#values button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
#values button:focus-visible{outline:2px solid #ab4938;outline-offset:5px}
#values .garden-motion{flex:none;font:11px/1.5 'Noto Sans TC',sans-serif;color:#786e5d;padding:8px 0}
#values .garden-panel[hidden]{display:none!important}
/* Longer approved mission headings retain two readable lines. */
#values #valuesBelief0 h3{font-size:clamp(23px,2.4vw,31px);letter-spacing:0;line-height:1.6}
#values #valuesBelief2 h3{font-size:clamp(25px,2.65vw,35px);letter-spacing:0}
[data-langroot="en"] #values #valuesBelief0 h3{font-size:clamp(21px,2.2vw,28px);line-height:1.4}
[data-langroot="en"] #values #valuesBelief2 h3{font-size:clamp(23px,2.3vw,29px);line-height:1.4}
#values .art{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;mask-image:linear-gradient(to right,transparent,#000 14%,#000 86%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect;pointer-events:none;user-select:none}
#values .round-arrow{display:inline-flex;align-items:center;justify-content:center;width:43px;height:43px;border:1px solid var(--line);border-radius:50%;font:22px/1 Georgia,serif;transition:background .25s,color .25s}
#values .round-arrow:hover{background:#f2eadd;color:var(--red)}
#values .garden-scene{position:relative;height:665px;isolation:isolate;--gx:0px;--gy:0px;background:radial-gradient(ellipse at 51% 45%,#f7f2e500, #f7f2e544 65%,transparent 75%);overflow:hidden}
#values .garden-scene:before{content:'生';position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font:400 330px/1 'Noto Serif TC',serif;color:#ece5d6;opacity:.22;z-index:-1}
#values .garden-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
#values .garden-path path{fill:none;stroke:#b8b099;stroke-width:1;stroke-linecap:round;opacity:.5}
#values .garden-path .garden-ink{stroke:var(--accent);stroke-dasharray:22 800;stroke-width:2;opacity:.55;animation:hy-values-flow 18s linear infinite}
#values .garden-object{position:absolute;width:32%;height:48%;padding:0;transform:translate(var(--gx),var(--gy));z-index:2;isolation:isolate}
#values .garden-object:nth-of-type(1){left:0;top:18%;--tilt:-9deg;--delay:-1s}
#values .garden-object:nth-of-type(2){right:3%;top:0;--tilt:5deg;--delay:-3s;width:30%;height:49%}
#values .garden-object:nth-of-type(3){right:0;bottom:1%;--tilt:8deg;--delay:-5s}
#values .garden-object:nth-of-type(4){left:17%;bottom:1%;--tilt:-14deg;--delay:-7s;width:29%;height:40%}
#values .garden-object .object-drift{display:block;position:absolute;inset:0;animation:hy-values-breathe 7s ease-in-out infinite;animation-delay:var(--delay)}
#values .garden-object .art{transform:rotate(var(--tilt)) scale(.94);filter:grayscale(.75);opacity:.67;transition:transform .8s cubic-bezier(.18,.7,.2,1),filter .7s,opacity .7s}
#values .garden-object:hover .art,
#values .garden-object[aria-pressed=true] .art{transform:rotate(0) scale(1.1);filter:grayscale(0);opacity:1}
#values .garden-object .object-label{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);font:400 19px/1.5 'Noto Serif TC',serif;white-space:nowrap;background:#fffdf7cf;padding:2px 10px;color:#786e5d;transition:color .3s}
#values .garden-object:nth-of-type(2) .object-label{bottom:3%}
#values .garden-object[aria-pressed=true] .object-label{color:var(--accent)}
#values .garden-object .object-label:before{content:'+';font:italic 16px Georgia,serif;margin-right:7px;color:var(--accent)}
#values .garden-object[aria-pressed=true] .object-label:before{content:'—'}
#values .garden-copy{position:absolute;left:30%;top:28%;width:36%;text-align:center;pointer-events:none;z-index:3}
#values .garden-copy .copy-kicker{display:block;font-size:10px;letter-spacing:.22em;color:var(--accent);margin-bottom:14px}
#values .garden-copy h3{font:400 clamp(27px,3vw,41px)/1.6 'Noto Serif TC',serif;letter-spacing:.04em;margin:0 0 18px}
#values .garden-copy p{max-width:310px;margin:auto;font-size:15px;line-height:2;color:#787062;text-wrap:pretty}
#values .garden-sprig{position:absolute;left:50%;top:77%;width:60px;height:60px;transform:rotate(25deg);animation:hy-values-sprig 7s ease-in-out infinite}
#values .garden-sprig path{fill:#c8af6c44;stroke:#afa082;stroke-width:.7}
#values .garden-next{display:flex;gap:10px;position:absolute;bottom:18px;right:35%;z-index:5}
#values .garden-object:focus-visible{outline-offset:-32px;border-radius:35%}
@keyframes hy-values-breathe{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-13px) rotate(1deg)}}
@keyframes hy-values-flow{to{stroke-dashoffset:-1644}}
@keyframes hy-values-sprig{50%{transform:translateY(-10px) rotate(10deg)}}
[data-langroot="en"] #values .object-label{font-family:'Lora',Georgia,serif;letter-spacing:0}
[data-langroot="en"] #values .garden-copy h3{font-size:31px;line-height:1.5}
[data-langroot="en"] #values .garden-copy p{font-size:14px;line-height:1.8}
@media(max-width:800px){
#values .garden-scene{height:640px}
#values .garden-copy{left:25%;width:50%;top:32%}
#values .garden-copy h3{font-size:29px}
#values .garden-copy p{font-size:13px}
#values .garden-object:nth-of-type(1){left:-10%;top:8%;width:44%;height:37%}
#values .garden-object:nth-of-type(2){right:-7%;top:0%;width:44%;height:38%}
#values .garden-object:nth-of-type(3){right:-4%;bottom:0;width:44%;height:37%}
#values .garden-object:nth-of-type(4){left:0;bottom:-1%;width:43%;height:35%}
#values .garden-object .object-label{font-size:16px}
#values .garden-next{right:43%;bottom:4px}
#values .garden-next .round-arrow{width:33px;height:33px}
#values .garden-sprig{left:43%;top:76%;width:35px}
#values .garden-scene:before{font-size:260px}
}
@media(max-width:500px){
#values .garden-scene{height:615px}
#values .garden-copy{left:12%;width:76%;top:36%}
#values .garden-copy h3{font-size:28px;margin-bottom:12px}
#values .garden-copy p{max-width:255px;font-size:13px;line-height:1.9}
#values .garden-copy .copy-kicker{margin-bottom:7px}
#values .garden-object:nth-of-type(1){left:-5%;top:0;width:52%;height:34%}
#values .garden-object:nth-of-type(2){right:-5%;top:-3%;width:50%;height:38%}
#values .garden-object:nth-of-type(3){right:-7%;bottom:2%;width:54%;height:31%}
#values .garden-object:nth-of-type(4){left:-9%;bottom:3%;width:55%;height:30%}
#values .garden-object .object-label{font-size:14px;bottom:0}
#values .garden-next{left:50%;right:auto;transform:translateX(-50%);bottom:0}
#values .garden-sprig{display:none}
#values .garden-path{opacity:.4}
#values .garden-scene:before{top:48%;font-size:240px}
[data-langroot="en"] #values .garden-copy h3{font-size:27px}
[data-langroot="en"] #values .garden-copy p{font-size:13px}
}
@media(max-width:800px){
#values .garden-object[data-belief="0"] .object-label{left:70%;width:90%;white-space:normal;text-wrap:balance}
}
@media(max-width:500px){
#values .garden-object[data-belief="0"] .object-label{left:60%;width:85%}
#values .garden-object[data-belief="3"] .object-label{left:70%;width:90%;white-space:normal;text-wrap:balance}
}
/* Explicit height wins over the site's responsive image rule. */
#hyRoot #values .art{height:100%;display:block}
#values .garden-scene:not(.is-enhanced){height:auto}
#values .garden-scene:not(.is-enhanced) .garden-copy{position:relative;left:auto;top:auto;width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
#values .garden-scene:not(.is-enhanced) .garden-object,#values .garden-scene:not(.is-enhanced) .garden-next{display:none}
#values:not(.garden-ready) .garden-motion{display:none}
#values .garden-scene[data-motion="off"] *,#values .garden-scene[data-motion="off"] *:before{animation:none!important;transition:none!important}
#values .garden-scene[data-motion="off"] .garden-object{transform:none}
#values .garden-scene[data-running="false"] *,#values .garden-scene[data-running="false"] *:before{animation-play-state:paused!important}
@media(max-width:800px){#values .garden-wrap{padding-inline:22px}#values .chap-in{height:auto;min-height:64px;padding-block:12px}}
@media(max-width:500px){#values .garden-wrap{padding:10px 18px 75px}#values .chap-in{padding-inline:18px;gap:12px}#values .chap-kick{font-size:12px;letter-spacing:.06em}#values .chap-rule{display:none}#values .garden-motion{margin-left:auto}#values .garden-scene:not(.is-enhanced) .garden-copy{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){#values .garden-scene *,#values .garden-scene *:before{animation:none!important;transition:none!important}#values .garden-object{transform:none!important}}

/* Keep long phone captions clear of the previous/next controls. */
@media(max-width:500px){
 #values .garden-scene{height:680px}
 #values .garden-copy{top:33%}
 #values .garden-object:nth-of-type(1){height:31%}
 #values .garden-object:nth-of-type(2){height:34%}
 #values .garden-object:nth-of-type(3){bottom:8%;height:28%}
 #values .garden-object:nth-of-type(4){bottom:9%;height:27%}
}