@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+TC:wght@400;500;600;700;800&display=swap');
:root{--ink:#292827;--muted:#85817d;--paper:#f8f7f4;--white:#fff;--accent:#b58c82;--line:#e7e2dc;--soft:#eee9e3}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:"DM Sans","Noto Sans TC",sans-serif}a{color:inherit;text-decoration:none}
.topbar{min-height:76px;padding:0 8%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(248,247,244,.94)}
.brand{font-size:20px;font-weight:700;letter-spacing:.12em}.brand span,h2 span,.contact-section h2 span{color:var(--accent)}
nav{display:flex;gap:34px}nav a{color:#6f6b67;font-size:12px;letter-spacing:.08em}nav a:hover{color:var(--accent)}
.hero{min-height:660px;padding:100px 12% 45px;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;position:relative;overflow:hidden}
.eyebrow{color:var(--accent);font-size:10px;font-weight:700;letter-spacing:.2em}
.hero h1{margin:22px 0 18px;font-size:clamp(42px,6vw,76px);line-height:1.12;letter-spacing:-.055em;font-weight:500}.hero h1 span{color:var(--accent)}
.hero-intro{color:var(--muted);font-size:14px;letter-spacing:.04em}.primary-link{display:inline-flex;gap:28px;align-items:center;margin-top:30px;padding:14px 20px;color:white;background:var(--ink);font-size:12px;letter-spacing:.08em}.primary-link span{color:#d9b8ad}
.hero-card{width:min(100%,330px);height:390px;justify-self:end;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#e9e1da;overflow:hidden}
.hero-symbol{z-index:1;font-size:132px;line-height:1;font-weight:500;color:#fffaf5;letter-spacing:-.1em}.hero-card p{z-index:1;margin-top:18px;color:#81736c;font-size:12px;line-height:1.8;text-align:center;letter-spacing:.13em}
.orbit{position:absolute;border:1px solid rgba(181,140,130,.5);border-radius:50%}.orbit-one{width:280px;height:280px}.orbit-two{width:360px;height:360px}
.card-number{position:absolute;bottom:18px;font-size:8px;letter-spacing:.18em;color:#8d7c74}.hero-foot{position:absolute;bottom:28px;left:12%;right:12%;display:flex;justify-content:space-between;color:#aaa39d;font-size:9px;letter-spacing:.16em}
.section{padding:105px 12%}.section-heading{margin-bottom:48px}.section-heading h2{margin:12px 0;font-size:38px;font-weight:500;letter-spacing:-.04em}
.about-section,.interests-section{background:var(--white)}.about-content{display:grid;grid-template-columns:.7fr 1.3fr;gap:9%}
.profile-label{min-height:250px;background:var(--soft);display:flex;flex-direction:column;justify-content:center;align-items:center}.profile-monogram{width:112px;height:112px;display:grid;place-items:center;border:1px solid #c8b6ac;border-radius:50%;color:var(--accent);font-size:58px}
.profile-label p{margin-top:22px;color:#9c9189;font-size:9px;letter-spacing:.18em}.about-text h3{margin:0 0 20px;font-size:21px;font-weight:600}
.about-text>p{color:#77716c;font-size:13px;line-height:2.2;text-align:justify}.quick-facts{margin-top:30px;padding-top:22px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:20px}
.quick-facts div{display:flex;flex-direction:column;gap:7px}.quick-facts span,.item-kicker{color:var(--accent);font-size:9px;letter-spacing:.16em}.quick-facts strong{font-size:12px;font-weight:600}
.section-note{color:var(--muted);font-size:12px}.resume-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.resume-item{min-height:190px;padding:30px;display:flex;gap:22px;background:var(--paper)}.item-no{color:#c6aaa0;font-size:12px}
.resume-item h3{margin:8px 0 14px;font-size:20px;font-weight:500}.resume-item p{margin:7px 0;font-size:12px}.resume-item .muted{color:var(--muted);line-height:1.8}
.interest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.interest-card{min-height:205px;padding:22px 18px;background:var(--paper);position:relative}
.interest-card>span{color:#b7aaa2;font-size:10px}.interest-icon{margin:18px 0 10px;color:var(--accent);font-size:28px}
.interest-card h3{margin:0 0 8px;font-size:16px;font-weight:600}.interest-card p{margin:0;color:var(--muted);font-size:11px;line-height:1.7}
.contact-section{padding:100px 12% 75px;text-align:center;background:#e9e1da}.contact-section h2{margin:20px 0;font-size:clamp(42px,6vw,68px);line-height:1.12;font-weight:500;letter-spacing:-.05em}
.contact-section>p:not(.eyebrow){color:#817872;font-size:12px}.contact-meta{margin:65px auto 0;padding-top:20px;border-top:1px solid #d5c9c0;display:flex;justify-content:space-between;color:#8e8179;font-size:9px;letter-spacing:.13em}
footer{padding:20px 8%;display:flex;justify-content:space-between;color:#9b948e;font-size:9px;letter-spacing:.12em}
@media(max-width:700px){.topbar{padding:18px 6%;align-items:flex-start;gap:18px;flex-direction:column}nav{width:100%;gap:0;justify-content:space-between}nav a{font-size:10px}
.hero{min-height:auto;padding:75px 7% 85px;grid-template-columns:1fr;gap:45px}.hero-card{justify-self:center;width:min(100%,300px);height:320px}.hero-foot{left:7%;right:7%;bottom:25px;font-size:8px}
.section{padding:75px 7%}.section-heading h2{font-size:32px}.about-content{grid-template-columns:1fr;gap:32px}.profile-label{min-height:190px}
.resume-grid{grid-template-columns:1fr}.resume-item{min-height:160px;padding:24px}.interest-grid{grid-template-columns:1fr 1fr}.interest-card{min-height:180px}
.contact-section{padding:80px 7% 55px}.contact-meta{gap:12px;flex-wrap:wrap;justify-content:center}}