@font-face{font-family:Instrument;src:url('assets/InstrumentSans.ttf');font-weight:400 700;font-display:swap}
:root{--paper:#f1eee5;--ink:#171816;--orange:#ff9a69;--blue:#344a95;--green:#009575;--rail:110px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Instrument,'Microsoft YaHei',sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}button{color:inherit}button,a,label{ -webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,label:focus-within{outline:3px solid var(--blue);outline-offset:5px}button{cursor:pointer}h1,h2,h3,.rail-name,.empty,.quote p{font-family:'Noto Serif SC','Songti SC',SimSun,serif;font-weight:500}main{margin-right:var(--rail)}.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.skip:focus{position:fixed;top:10px;left:10px;background:white;padding:12px;z-index:100}
.rail{position:fixed;right:0;top:0;bottom:0;width:var(--rail);background:var(--orange);border-left:1px solid;z-index:30;display:flex;align-items:center;flex-direction:column;justify-content:space-between;padding:32px 14px}.rail button{background:#fff;border:1px solid;border-radius:50%;width:70px;height:43px;font-size:11px}.rail-name{writing-mode:vertical-rl;font-size:51px;letter-spacing:15px}.rail-note{font-size:12px;line-height:1.9;letter-spacing:2px;writing-mode:vertical-rl}.seal{background:var(--ink);color:var(--orange);padding:12px;font-size:10px;text-align:center;line-height:1.3}
.hero{height:100svh;min-height:650px;position:relative;overflow:hidden}.landscape{position:absolute;inset:0;width:100%;height:100%}.hero-meta,.hero-bottom{position:absolute;left:35px;right:35px;display:flex;justify-content:space-between;z-index:2;font-size:11px;letter-spacing:1px}.hero-meta{top:30px}.hero-bottom{bottom:25px;line-height:1.8}.hero-bottom a{display:flex;align-items:center;gap:20px}.hero-bottom b{font-size:25px;font-weight:400}.creature{position:absolute;left:50%;top:49%;translate:-50% -50%;width:43%;height:39%;border:1.5px solid var(--ink);background:radial-gradient(ellipse at 20% 20%,#41589a,#101a40);color:var(--paper);border-radius:39% 44% 31% 33% / 40% 35% 40% 33%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:35px}.creature-label{font:clamp(20px,2.3vw,34px) SimSun,serif;letter-spacing:7px}.creature-bottom{font-size:11px;letter-spacing:3px}.eyes{display:flex;gap:4px}.eye{width:60px;height:30px;background:var(--paper);border-radius:80% 0 80% 0;transform:rotate(35deg);display:grid;place-items:center;overflow:hidden}.eye i{display:block;width:25px;height:25px;border-radius:50%;background:#10110e;transform:rotate(-35deg)}.ticker{display:flex;overflow:hidden;white-space:nowrap;border-block:1px solid;background:var(--orange);font-size:16px;letter-spacing:3px;padding:17px 0}.ticker span{flex-shrink:0;animation:drift 25s linear infinite}@keyframes drift{to{transform:translateX(-100%)}}
.section-label{font-size:11px;letter-spacing:1px;text-align:center}.moments{padding:95px 7% 70px;position:relative;background:radial-gradient(ellipse at 10% 5%,transparent 28%,#fff8 28.1%,transparent 28.3%),var(--paper)}.moments h2{font-size:clamp(45px,5vw,75px);line-height:1.35;text-align:center;letter-spacing:8px;color:var(--blue);margin:30px 0}.intro{text-align:center;font-size:13px;line-height:2.1;margin-bottom:70px}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:65px 8%;align-items:start}.postcard{margin:0;padding:16px 16px 24px;border:1px solid;background:#fffdf6;position:relative;transform:rotate(-3deg)}.postcard:nth-child(even){transform:rotate(3deg);margin-top:80px}.postcard:nth-child(3n){transform:rotate(1deg)}.photo{display:block;position:relative;width:100%;height:390px;border:0;background:#d9e0e4;padding:0;overflow:hidden}.photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s}.photo:hover img{transform:scale(1.04)}.postcard:nth-child(2n) .photo{background:#e7d3c6}.postcard:nth-child(3n) .photo{background:#d5d9ce}.empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;font-size:24px;letter-spacing:3px}.empty small{font:10px Instrument,'Microsoft YaHei',sans-serif;letter-spacing:1px;opacity:.55}figcaption{display:flex;flex-direction:column;gap:14px;padding-top:20px}figcaption span{font-size:10px;letter-spacing:2px;color:var(--blue)}figcaption strong{font-size:15px;font-weight:400}.stamp{position:absolute;right:-20px;bottom:25px;width:75px;height:75px;border:1px solid;border-radius:50%;display:grid;place-items:center;background:var(--orange);font-size:12px;transform:rotate(13deg)}.postcard.wide{grid-column:1/-1;width:65%;justify-self:center;transform:rotate(-2deg)}.wide .photo{height:450px}.photo-tools{margin-top:65px;text-align:center;font-size:11px}.photo-tools label{display:inline-block;border:1px solid;border-radius:50%;padding:20px 30px;cursor:pointer;background:var(--paper)}.photo-tools input{position:absolute;width:1px;height:1px;opacity:0}.photo-tools p{font-size:10px;color:#666;line-height:1.7}
.quote{background:repeating-linear-gradient(120deg,#ffffff06 0 5px,transparent 5px 13px),var(--green);color:#fff;padding:80px 8%;position:relative;border-block:1px solid var(--ink)}.quote p{font-size:clamp(24px,3.3vw,48px);line-height:1.7;letter-spacing:3px;margin:5px 0 30px}.quote>span:last-of-type{font-size:12px}.quote-mark{position:absolute;font:150px Georgia;opacity:.35;left:3%;top:25px}.mini-eyes{position:absolute;right:8%;bottom:50px;font-size:30px;color:#edebb5;letter-spacing:-3px}
.about{position:relative;overflow:hidden;background:#fff;padding:100px 7%;text-align:center}.ghost-name{position:absolute;top:32px;left:50%;translate:-50% 0;white-space:nowrap;font:8vw Georgia;color:#e9e9e5;pointer-events:none}.about h2{font-size:45px;color:var(--blue);letter-spacing:8px;margin:30px 0 10px}.roman-name{font-size:13px;color:var(--blue)}.about-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:9%;align-items:center;margin-top:75px;text-align:left}.portrait{position:relative;transform:rotate(-7deg)}.portrait img{width:100%;aspect-ratio:.85;object-fit:cover;border-radius:48% 52% 48% 52% / 32% 40% 60% 68%;border:1px solid}.portrait>span{position:absolute;bottom:4%;right:-25px;border:1px solid;border-radius:50%;background:var(--orange);padding:16px;font-size:11px;transform:rotate(10deg)}.bio h3{font-size:28px;line-height:1.6;color:var(--blue);margin:0 0 25px}.bio p{font-size:13px;line-height:2.1}.education{border-top:1px solid #ccc;margin-top:30px;padding-top:20px}.education span{font-size:10px;display:block;margin-bottom:15px}.education strong{font-size:15px;font-weight:500}
.interests{padding:85px 6% 100px;background:#93b9d2;border-block:1px solid}.interests h2{text-align:center;font-size:35px;letter-spacing:3px;margin:35px 0 60px}.interest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.interest-grid article{border:1px solid;padding:35px 24px;background:#f4edda;transform:rotate(-3deg)}.interest-grid article:nth-child(2){background:#ffc0ba;transform:rotate(3deg)}.interest-grid article:nth-child(3){background:#cee3c0;transform:rotate(-2deg)}.interest-grid article>span{font-size:11px}.interest-grid h3{font-size:25px}.interest-grid p{font-size:12px;line-height:2}.interest-grid b{display:block;text-align:right;font-size:45px;font-weight:400}footer{text-align:center;padding:90px 6% 30px;background:var(--paper)}footer h2{font-size:clamp(32px,4vw,55px);line-height:1.6;letter-spacing:3px}.email{display:inline-flex;gap:30px;align-items:center;font-size:clamp(12px,1.4vw,18px);border-bottom:1px solid;padding-bottom:16px;color:var(--blue)}.email span{font-size:30px}.footer-bottom{display:flex;justify-content:space-between;gap:15px;margin-top:90px;border-top:1px solid;padding-top:25px;font-size:10px}
dialog{border:1px solid;background:var(--paper);padding:60px;width:min(650px,90vw);color:var(--ink)}dialog::backdrop{background:#1118;backdrop-filter:blur(5px)}dialog>p{font-size:11px;letter-spacing:2px}#menu nav{display:grid;gap:25px;margin-top:35px}#menu nav a{font:28px SimSun,serif;display:flex;justify-content:space-between;border-bottom:1px solid #ccc;padding-bottom:16px}#menu small{font:10px Instrument}.menu-close,.lightbox-close{position:absolute;right:15px;top:10px;background:transparent;border:0;font-size:30px}.lightbox{padding:40px 20px 15px;width:fit-content;max-width:92vw}.lightbox img{display:block;max-height:75svh;max-width:85vw;object-fit:contain}.lightbox p{text-align:center;margin:15px 0 0;letter-spacing:0}
@media(max-width:700px){:root{--rail:54px}.rail{padding:18px 5px}.rail button{width:42px;height:32px;font-size:8px}.rail-name{font-size:30px;letter-spacing:10px}.rail-note{font-size:9px}.seal{padding:8px 4px;font-size:8px}.hero{min-height:600px;height:90svh}.hero-meta{left:18px;right:18px;font-size:8px}.hero-meta>span:last-child{display:none}.hero-bottom{left:18px;right:18px;font-size:9px}.creature{width:66%;height:31%;gap:23px}.creature-label{font-size:20px;letter-spacing:3px}.creature-bottom{font-size:8px;letter-spacing:1px}.eye{width:40px;height:22px}.eye i{width:18px;height:18px}.ticker{font-size:12px;padding:12px 0}.moments{padding:65px 7% 50px}.moments h2{font-size:35px;letter-spacing:3px}.intro{font-size:11px}.gallery{grid-template-columns:1fr;gap:45px}.postcard:nth-child(even){margin-top:0}.photo{height:330px}.postcard.wide{width:100%;grid-column:auto}.wide .photo{height:350px}figcaption strong{font-size:12px}.stamp{width:57px;height:57px;font-size:10px;right:-10px}.quote{padding:65px 8%}.quote p{font-size:23px;letter-spacing:1px}.mini-eyes{bottom:20px;font-size:20px}.about{padding:70px 9%}.about h2{font-size:35px}.ghost-name{font-size:12vw}.about-grid{grid-template-columns:1fr;gap:45px;margin-top:50px}.portrait{width:78%;margin:auto}.bio h3{font-size:23px}.interests{padding:65px 8%}.interests h2{font-size:26px;line-height:1.6}.interest-grid{grid-template-columns:1fr;gap:28px}.interest-grid article{padding:28px}footer{padding:65px 7% 25px}footer h2{font-size:27px}.email{font-size:10px;gap:6px;overflow-wrap:anywhere}.footer-bottom{flex-direction:column;gap:20px;margin-top:60px}dialog{padding:50px 25px}#menu nav a{font-size:23px}}
.lightbox-actions{display:flex;justify-content:center;gap:10px;margin-top:16px}.lightbox-actions button{border:1px solid;border-radius:999px;background:transparent;padding:9px 16px;font-size:11px}.lightbox-actions button:hover{background:var(--orange)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker span{animation:none}*{transition:none!important}}