@import url('contour.css');
:root{color-scheme:light;--forest:#063e33;--ink:#123f33;--paper:#f6f1df;--gold:#e6c658;--line:#b9c1a4}
*{box-sizing:border-box}html{min-height:100%;background:var(--forest)}body{margin:0;padding:24px;min-height:100svh;background:var(--forest);color:var(--forest);font-family:"Microsoft YaHei","PingFang SC",sans-serif;font-style:normal}
.poster{position:relative;isolation:isolate;overflow:hidden;width:100%;min-height:calc(100svh - 48px);max-width:1760px;margin:auto;background:var(--paper);display:grid;grid-template-columns:46% 54%;grid-template-rows:156px 1fr 154px;padding:38px 6.2% 40px}
.composition{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.gold-disc{position:absolute;width:510px;height:510px;border:74px solid var(--gold);border-radius:50%;right:-165px;top:-225px}
.green-wedge{position:absolute;inset:0;background:var(--forest);clip-path:polygon(100% 32%,100% 100%,56% 100%)}
.diagonal-line{position:absolute;right:6%;bottom:-80px;width:13px;height:650px;background:var(--gold);transform:rotate(34deg);transform-origin:bottom}
.top-rule{position:absolute;left:calc(6.2% + 210px);right:24%;top:99px;height:2px;background:var(--forest)}
.top-rule:after{content:"";position:absolute;right:0;top:-5px;width:12px;height:12px;background:var(--forest)}
.corner-bars{position:absolute;right:42px;top:44px;display:flex;gap:9px;transform:rotate(-32deg)}.corner-bars i{height:82px;width:13px;background:var(--forest)}
.bottom-rule{position:absolute;left:6.2%;bottom:38px;width:100px;height:9px;background:var(--forest)}.bottom-rule:after{content:"";position:absolute;left:111px;width:26px;height:9px;background:var(--gold)}
.seal-stage{grid-column:1;grid-row:1;align-self:start;justify-self:start;position:relative;z-index:3}
.emblem{position:relative;width:180px;mix-blend-mode:multiply}.emblem>img{width:100%;height:auto;display:block}
.chip-hotspot{position:absolute;left:49.5%;top:54%;width:15%;height:13%;min-width:44px;min-height:44px;transform:translate(-50%,-50%);border:0;border-radius:9px;background:transparent;cursor:pointer}.chip-hotspot:hover{background:#f6d96522;box-shadow:0 0 0 2px #07564755}.chip-hotspot:focus-visible{outline:3px solid #bc942a;outline-offset:3px}
.identity{position:relative;grid-column:1;grid-row:2;z-index:2;align-self:center;padding:15px 0 28px}
h1{font-weight:900;letter-spacing:-.065em;line-height:1;margin:0 0 30px;font-style:normal}.name-naiwa{display:block;font-size:clamp(115px,11.8vw,180px);margin-left:-.04em}.name-university{display:block;font-size:clamp(57px,5.85vw,88px);letter-spacing:.025em;margin-top:20px;white-space:nowrap}
.english-name{font-size:clamp(15px,1.35vw,20px);line-height:1.55;letter-spacing:.02em;margin:0;font-weight:500;max-width:430px}
.mascot-stage{position:absolute;right:-4.5%;top:17%;width:70%;height:77%;z-index:1;pointer-events:none;display:flex;align-items:center;justify-content:center}
.constructivist-art{width:100%;height:100%;object-fit:contain;transform:rotate(-8deg);animation:mascot-arrive .8s cubic-bezier(.2,.7,.2,1) both}
.navigation{grid-column:1;grid-row:3;position:relative;z-index:3;align-self:start;margin-top:16px;max-width:350px}
.button{display:flex;align-items:stretch;min-height:76px;width:100%;background:var(--forest);border:2px solid var(--forest);color:var(--paper);text-decoration:none;box-shadow:8px 8px 0 var(--gold);transition:transform .2s,box-shadow .2s}
.button>span:first-child{flex:1;display:flex;align-items:center;justify-content:center;padding:19px 26px;font-size:21px;letter-spacing:.15em;font-weight:700}.button-arrow{display:grid;place-items:center;width:77px;background:var(--gold);color:var(--forest);font-size:36px;line-height:1;font-family:Arial,sans-serif}
.button:hover{transform:translate(3px,3px);box-shadow:5px 5px 0 var(--gold)}.button:focus-visible{outline:3px solid var(--forest);outline-offset:7px}
.dialog-open{overflow:hidden}#chip-dialog{width:calc(100% - 36px);max-width:620px;max-height:80svh;padding:34px;border:2px solid var(--forest);border-top:8px solid var(--gold);border-radius:0;background:var(--paper);color:var(--ink);box-shadow:12px 12px 0 #063e3340}#chip-dialog[open]{display:flex;flex-direction:column;animation:chip-enter 380ms cubic-bezier(.16,1,.3,1) both}#chip-dialog::backdrop{background:#052e28ad;backdrop-filter:blur(6px);animation:backdrop-enter 300ms ease-out both}#chip-title{font-size:30px;letter-spacing:1px;margin:0 35px 20px 0}.dialog-close{position:absolute;right:15px;top:13px;width:40px;height:40px;border:0;background:transparent;color:var(--forest);font-size:28px;cursor:pointer}.dialog-close:hover{background:#0756470d}.dialog-close:focus-visible{outline:2px solid var(--forest);outline-offset:2px}.dialog-copy{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:8px;font-size:15px;line-height:1.95;text-align:left;overflow-wrap:anywhere}.dialog-copy p{margin:0 0 16px}.dialog-copy p:first-child{font-weight:600}.dialog-copy p:last-child{margin-bottom:0}
@keyframes chip-enter{from{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes backdrop-enter{from{opacity:0}to{opacity:1}}@keyframes mascot-arrive{from{opacity:0;transform:translate(22px,18px) rotate(-4deg)}to{opacity:1;transform:translate(0,0) rotate(-8deg)}}
@media(min-width:1500px){.poster{min-height:900px;grid-template-rows:175px 1fr 170px}.mascot-stage{top:15%;height:80%}}
@media(max-width:1050px){body{padding:18px}.poster{min-height:calc(100svh - 36px);padding:32px 5%;grid-template-rows:140px 1fr 145px;grid-template-columns:50% 50%}.emblem{width:132px}.top-rule{left:calc(5% + 167px);top:85px}.name-naiwa{font-size:clamp(95px,12.5vw,130px)}.name-university{font-size:clamp(46px,6vw,63px)}.english-name{font-size:15px}.mascot-stage{width:78%;right:-16%;top:23%;height:67%}.navigation{max-width:300px}.button>span:first-child{font-size:18px}.green-wedge{clip-path:polygon(100% 36%,100% 100%,56% 100%)}.gold-disc{right:-270px}.bottom-rule{left:5%}}
@media(max-width:700px){body{padding:12px}.poster{min-height:calc(100svh - 24px);padding:25px 25px 42px;display:grid;grid-template-columns:1fr;grid-template-rows:91px auto 285px auto;max-width:580px}.emblem{width:83px}.top-rule{left:139px;right:32px;top:64px;height:1px}.top-rule:after{width:8px;height:8px;top:-3px}.gold-disc{width:260px;height:260px;border-width:38px;right:-120px;top:-140px}.corner-bars{display:none}.identity{grid-column:1;grid-row:2;padding:20px 0 0}.name-naiwa{font-size:clamp(92px,24vw,139px)}.name-university{font-size:clamp(42px,10.7vw,64px);margin-top:12px;letter-spacing:.055em}h1{margin-bottom:20px}.english-name{font-size:12px;line-height:1.55;letter-spacing:.01em}.mascot-stage{position:relative;grid-column:1;grid-row:3;width:calc(100% + 85px);height:330px;right:auto;top:auto;margin:-17px -49px 0 -36px;align-self:center}.constructivist-art{transform:rotate(-8deg)}.navigation{grid-row:4;grid-column:1;margin-top:8px;max-width:310px;width:100%}.button{min-height:62px;box-shadow:6px 6px 0 var(--gold)}.button>span:first-child{font-size:17px;padding:15px 20px}.button-arrow{width:65px;font-size:29px}.green-wedge{clip-path:polygon(100% 53%,100% 100%,67% 100%)}.diagonal-line{height:330px;bottom:-100px;right:4%;width:8px}.bottom-rule{display:none}#chip-dialog{padding:26px 22px;max-height:82svh}.dialog-copy{font-size:14px;line-height:1.9}}
@media(max-width:360px){.poster{padding:23px 21px 36px;grid-template-rows:86px auto 240px auto}.name-naiwa{font-size:84px}.name-university{font-size:37px}.english-name{font-size:11px}.mascot-stage{height:285px;margin-top:-10px}.navigation{margin-top:4px}.top-rule{left:125px}.button>span:first-child{font-size:16px}}
.english-name{font-size:clamp(13px,1.1vw,17px);white-space:nowrap;max-width:none}
@media(min-width:701px) and (max-width:1050px){.identity{align-self:start;margin-top:65px}.english-name{font-size:12px}.mascot-stage{right:-10%;width:74%;top:27%}}
@media(max-width:700px){.english-name{font-size:clamp(10px,2.7vw,14px);letter-spacing:0}.emblem{width:114px}.top-rule{left:169px}}
@media(max-width:360px){.english-name{font-size:9px}.emblem{width:102px}.top-rule{left:150px}}
@media(prefers-reduced-motion:reduce){.button{transition:none}.constructivist-art,#chip-dialog[open],#chip-dialog::backdrop{animation:none}}
/* Let the composition meet the viewport edges at every screen size. */
html,body{background:var(--paper)}
body{padding:0}
.poster{max-width:none;min-height:100svh}
/* A geometric spotlight gives the original seal more visual weight. */
.poster{grid-template-rows:210px 1fr 154px}
.emblem{width:216px;mix-blend-mode:normal}
.seal-stage::before{content:"";position:absolute;inset:-5px -18px -10px -12px;background:var(--gold);clip-path:polygon(0 18%,72% 3%,90% 16%,100% 82%,13% 100%);z-index:-1;pointer-events:none}
.seal-stage::after{content:"";position:absolute;left:-10px;right:-10px;bottom:-13px;height:6px;background:var(--forest);transform:rotate(-12deg);z-index:-1;pointer-events:none}
.top-rule{left:calc(6.2% + 258px);top:143px}
@media(min-width:701px) and (max-width:1050px){.emblem{width:162px}.poster{grid-template-rows:180px 1fr 145px}.top-rule{left:calc(5% + 205px);top:112px}}
@media(max-width:700px){.emblem{width:136px}.poster{grid-template-rows:150px auto 285px auto}.top-rule{left:192px;top:90px}.seal-stage::after{height:4px;bottom:-10px}}
@media(max-width:360px){.emblem{width:122px}.poster{grid-template-rows:137px auto 240px auto}.top-rule{left:174px;top:82px}}
.community-link{display:flex;align-items:center;gap:9px;width:fit-content;min-height:28px;margin-top:16px;color:var(--forest);font-size:13px;line-height:1.5;letter-spacing:.04em;text-decoration:underline;text-decoration-color:#063e3370;text-underline-offset:5px}
.community-link:hover{text-decoration-color:var(--forest);text-decoration-thickness:2px}
.community-link:focus-visible{outline:2px solid var(--forest);outline-offset:5px}
.footer-links{position:absolute;left:6.2%;bottom:28px;display:flex;align-items:center;gap:24px;z-index:3}
.footer-links .bottom-rule{position:relative;display:block;left:auto;bottom:auto;width:100px;flex:0 0 100px;margin-right:37px}
.footer-links .community-link{margin:0;white-space:nowrap}
@media(min-width:701px) and (max-width:1050px){.footer-links{left:5%;bottom:22px}}
@media(max-width:700px){.footer-links{position:relative;left:auto;bottom:auto;grid-column:1;grid-row:5;margin-top:26px;gap:20px;align-self:start}}
@media(max-width:360px){.footer-links{gap:16px}.footer-links .bottom-rule{width:72px;flex-basis:72px;margin-right:31px}.footer-links .bottom-rule::after{left:83px;width:20px}}