@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');

:root {
  --ink: #17272c;
  --muted: #5c6e72;
  --green: #1f6f66;
  --green-dark: #174f4a;
  --aqua: #86c8bd;
  --cream: #f3f1e8;
  --glass: rgba(249, 250, 245, .78);
  --glass-strong: rgba(255, 255, 252, .91);
  --line: rgba(31, 77, 72, .15);
  --shadow: 0 22px 60px rgba(26, 54, 54, .14);
  --radius-lg: 28px;
  --radius-md: 18px;
  --site-width: 1160px;
}

html { scroll-behavior: smooth; }
body.site-shell {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background-color: #dce6dd;
  background-image: linear-gradient(120deg, rgba(222, 235, 226, .9), rgba(238, 235, 216, .74)), url('../background.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font: 400 16px/1.7 'DM Sans', 'Microsoft YaHei', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.site-shell::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 78% 8%, rgba(255,255,255,.52), transparent 32%), radial-gradient(circle at 12% 74%, rgba(76,145,132,.16), transparent 30%);
}
.site-shell *, .site-shell *::before, .site-shell *::after { box-sizing: border-box; }
.site-shell h1, .site-shell h2, .site-shell h3, .site-shell p { margin: 0; }
.site-shell h1, .site-shell h2, .site-shell h3 { color: var(--ink); font-family: 'Manrope', sans-serif; letter-spacing: -.035em; }
.site-shell a { color: inherit; border: 0; text-decoration: none; }
.site-shell a:hover { color: var(--green); }
.site-shell img { max-width: 100%; }
.page-main { min-height: calc(100vh - 190px); padding: 118px 24px 80px; }
.section-wrap { width: min(100%, var(--site-width)); margin-inline: auto; }
.glass-card { border: 1px solid rgba(255,255,255,.7); background: var(--glass); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.eyebrow { color: var(--green); font-size: .73rem; font-weight: 700; letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
.eyebrow > span { display: inline-block; width: 24px; height: 2px; margin: 0 9px 3px 0; background: var(--green); }

/* Navigation */
.site-nav { position: fixed; top: 18px; right: 0; left: 0; z-index: 1000; padding-inline: 24px; transition: .25s ease; }
.nav-inner { display: flex; width: min(100%, var(--site-width)); min-height: 64px; margin: auto; padding: 8px 10px 8px 14px; align-items: center; justify-content: space-between; border: 1px solid rgba(255,255,255,.72); border-radius: 20px; background: rgba(249,250,245,.72); box-shadow: 0 12px 35px rgba(27,55,52,.1); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.site-nav.is-scrolled .nav-inner { background: rgba(249,250,245,.94); box-shadow: 0 14px 38px rgba(27,55,52,.16); }
.nav-brand { display: flex; gap: 11px; align-items: center; font: 700 .95rem/1 'Manrope', sans-serif; }
.nav-brand:hover { color: var(--ink) !important; }
.nav-brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: #fff; background: var(--green); font-size: .78rem; letter-spacing: .04em; box-shadow: 0 8px 18px rgba(31,111,102,.25); }
.nav-menu { display: flex; gap: 3px; align-items: center; }
.nav-link { display: flex; gap: 7px; padding: 10px 13px; align-items: center; border-radius: 12px; color: #465b5e !important; font-size: .82rem; font-weight: 600; transition: .2s ease; }
.nav-link i { color: #78918f; font-size: .78rem; }
.nav-link:hover, .nav-link.is-active { color: var(--green-dark) !important; background: rgba(75,143,131,.11); }
.nav-link.is-active i { color: var(--green); }
.nav-toggle { display: none; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 12px; color: var(--ink); background: rgba(31,111,102,.09); box-shadow: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Home */
.hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .65fr); gap: 22px; min-height: 590px; }
.hero-copy { position: relative; display: flex; padding: clamp(38px, 6vw, 76px); overflow: hidden; flex-direction: column; justify-content: center; border-radius: var(--radius-lg); }
.hero-copy::after { content: ''; position: absolute; top: -90px; right: -85px; width: 270px; height: 270px; border: 1px solid rgba(31,111,102,.15); border-radius: 50%; box-shadow: 0 0 0 34px rgba(31,111,102,.035), 0 0 0 68px rgba(31,111,102,.025); }
.hero h1 { margin: 14px 0 8px; font-size: clamp(4rem, 9vw, 7.6rem); font-weight: 800; line-height: .92; }
.hero-role { color: var(--green-dark); font-size: clamp(1rem, 2vw, 1.24rem); font-weight: 600; }
.hero-lead { max-width: 610px; margin-top: 20px !important; color: var(--muted); font-size: 1.05rem; }
.hero-actions { display: flex; gap: 11px; margin-top: 32px; flex-wrap: wrap; }
.button { display: inline-flex; min-height: 46px; padding: 0 21px; gap: 10px; align-items: center; justify-content: center; border-radius: 13px; font-size: .86rem; font-weight: 700; transition: .22s ease; }
.button-primary { color: #fff !important; background: var(--green); box-shadow: 0 10px 22px rgba(31,111,102,.22); }
.button-primary:hover { color: #fff !important; background: var(--green-dark); transform: translateY(-2px); }
.button-ghost { border: 1px solid var(--line) !important; background: rgba(255,255,255,.38); }
.button-ghost:hover { color: var(--green-dark) !important; border-color: rgba(31,111,102,.35) !important; background: rgba(255,255,255,.72); }
.hero-links { display: flex; gap: 22px; margin-top: 39px; }
.hero-links a { display: flex; gap: 7px; align-items: center; color: var(--muted); font-size: .8rem; font-weight: 600; }
.hero-links i { color: var(--green); }
.hero-profile { display: flex; padding: 30px; flex-direction: column; justify-content: flex-end; border-radius: var(--radius-lg); background: linear-gradient(180deg, rgba(249,250,245,.52), rgba(235,242,233,.88)); }
.hero-profile > *, .latest-item > *, .cv-header > *, .cv-grid > *, .cv-entry > * { min-width: 0; }
.avatar-frame { position: relative; width: 100%; margin-bottom: 27px; overflow: hidden; aspect-ratio: 1 / 1.06; border-radius: 21px; background: #dce5df; }
.avatar-frame::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); border-radius: inherit; }
.avatar-frame img { width: 100%; height: 100%; object-fit: cover; }
.profile-label { color: #718184; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.profile-value { margin-top: 5px !important; font: 600 .95rem/1.5 'Manrope', sans-serif; }
.profile-value, .cv-sheet { overflow-wrap: anywhere; }
.profile-rule { height: 1px; margin: 17px 0; background: var(--line); }
.status-pill { display: inline-flex; width: fit-content; gap: 8px; margin-top: 22px; padding: 7px 11px; align-items: center; border: 1px solid rgba(31,111,102,.12); border-radius: 99px; color: var(--green-dark); background: rgba(255,255,255,.45); font-size: .66rem; font-weight: 700; }
.status-pill span { width: 7px; height: 7px; border-radius: 50%; background: #4da17d; box-shadow: 0 0 0 4px rgba(77,161,125,.13); }
.home-section { padding-top: 105px; }
.section-heading { display: flex; margin-bottom: 27px; align-items: end; justify-content: space-between; }
.section-heading h2 { margin-top: 7px; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.1; }
.text-link { display: inline-flex; gap: 8px; align-items: center; color: var(--green) !important; font-size: .8rem; font-weight: 700; }
.text-link i { transition: transform .2s ease; }
.text-link:hover i { transform: translateX(4px); }
.focus-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature-card { position: relative; min-height: 250px; padding: 31px; overflow: hidden; border-radius: var(--radius-md); transition: transform .25s ease, box-shadow .25s ease; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 27px 65px rgba(26,54,54,.18); }
.feature-card > i { display: grid; width: 45px; height: 45px; margin-bottom: 37px; place-items: center; border-radius: 13px; color: var(--green); background: rgba(31,111,102,.1); }
.feature-card h3 { margin-bottom: 10px; font-size: 1.16rem; }
.feature-card p { color: var(--muted); font-size: .88rem; }
.feature-index { position: absolute; top: 27px; right: 28px; color: rgba(31,111,102,.38); font: 700 .69rem/1 'Manrope'; letter-spacing: .1em; }
.latest-list { padding: 4px 31px; border-radius: var(--radius-md); }
.latest-item { display: grid; grid-template-columns: 86px minmax(0, 1fr) 42px; gap: 26px; padding: 29px 4px; align-items: center; border-bottom: 1px solid var(--line); }
.latest-item:last-child { border-bottom: 0; }
.latest-item time { color: #768587; font-size: .65rem; line-height: 1.35; text-align: center; text-transform: uppercase; }
.latest-item time span { display: block; color: var(--green-dark); font: 700 1.8rem/1 'Manrope'; }
.post-kicker { margin-bottom: 3px !important; color: var(--green); font-size: .65rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.latest-item h3 { font-size: 1.1rem; }
.latest-item h3 a:hover { color: var(--green); }
.latest-item div > p:last-child { margin-top: 5px; color: var(--muted); font-size: .8rem; line-height: 1.55; }
.round-link { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--line) !important; border-radius: 50%; color: var(--green) !important; transition: .2s ease; }
.round-link:hover { color: #fff !important; background: var(--green); transform: rotate(-25deg); }

/* Shared page hero */
.page-hero { padding: 70px clamp(26px, 6vw, 70px) 54px; border-bottom: 1px solid rgba(31,77,72,.13); }
.page-hero h1 { margin: 9px 0 12px; font-size: clamp(3.3rem, 8vw, 6.4rem); font-weight: 800; line-height: 1; }
.page-hero > p:last-of-type { max-width: 650px; color: var(--muted); font-size: 1rem; }
.page-hero-links { display: flex; gap: 20px; margin-top: 24px; color: var(--green); font-size: .78rem; font-weight: 700; }
.page-hero-links span { color: var(--muted); font-weight: 500; }

/* Blog */
.filter-row { display: flex; gap: 8px; padding: 30px 0 22px; align-items: center; flex-wrap: wrap; }
.filter-label { margin-right: 8px; color: var(--muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .13em; }
.topic-chip { padding: 6px 11px; border: 1px solid var(--line); border-radius: 99px; color: var(--green-dark); background: rgba(255,255,255,.38); font-size: .7rem; font-weight: 600; }
.topic-chip small { margin-left: 4px; opacity: .55; }
.post-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.blog-card { overflow: hidden; border-radius: var(--radius-md); transition: transform .25s ease; }
.blog-card:hover { transform: translateY(-4px); }
.blog-cover { display: flex; height: 225px; padding: 18px; align-items: flex-start; background-size: cover; background-position: center; }
.blog-cover span { padding: 5px 10px; border-radius: 99px; color: #fff; background: rgba(19,53,49,.74); backdrop-filter: blur(8px); font-size: .66rem; font-weight: 700; text-transform: uppercase; }
.blog-card-body { padding: 27px; }
.blog-card-body time { color: #718184; font-size: .67rem; font-weight: 600; letter-spacing: .1em; }
.blog-card-body h2 { margin: 8px 0 10px; font-size: 1.3rem; }
.blog-card-body p { min-height: 50px; margin-bottom: 19px; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.pagination { display: flex; gap: 18px; margin-top: 32px; align-items: center; justify-content: center; font-size: .8rem; }

/* Friends and About */
.friends-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; padding-top: 34px; }
.friend-card, .friend-invite { display: flex; min-height: 178px; padding: 25px; gap: 22px; align-items: center; border-radius: var(--radius-md); transition: .22s ease; }
.friend-card:hover { color: inherit !important; transform: translateY(-4px); }
.friend-card img { width: 92px; height: 92px; flex: 0 0 auto; border: 4px solid rgba(255,255,255,.8); border-radius: 24px; object-fit: cover; box-shadow: 0 10px 24px rgba(25,59,54,.14); }
.friend-card h2, .friend-invite h2 { font-size: 1.1rem; }
.friend-card p, .friend-invite p { margin: 4px 0 13px; color: var(--muted); font-size: .8rem; }
.friend-card span, .friend-invite a { color: var(--green); font-size: .7rem; font-weight: 700; }
.friend-invite > i { display: grid; width: 80px; height: 80px; flex: 0 0 auto; place-items: center; border-radius: 24px; color: var(--green); background: rgba(31,111,102,.09); font-size: 1.5rem; }
.about-intro { display: grid; grid-template-columns: 310px 1fr; gap: clamp(35px,6vw,80px); padding: clamp(30px,5vw,62px); align-items: center; border-radius: var(--radius-lg); }
.about-avatar { position: relative; }
.about-avatar img { width: 100%; aspect-ratio: 1; border-radius: 28px; object-fit: cover; }
.about-avatar span { position: absolute; right: -12px; bottom: -12px; display: grid; width: 52px; height: 52px; place-items: center; border: 5px solid #edf2e9; border-radius: 50%; color: #fff; background: var(--green); }
.about-intro h1 { margin: 8px 0 18px; font-size: clamp(2.6rem,6vw,4.8rem); }
.about-intro div > p:not(.eyebrow) { color: var(--muted); }
.tag-list { display: flex; gap: 7px; margin-top: 22px; flex-wrap: wrap; }
.tag-list span { padding: 6px 11px; border-radius: 99px; color: var(--green-dark); background: rgba(31,111,102,.09); font-size: .68rem; font-weight: 700; }
.social-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; }
.social-card { padding: 27px 20px; border-radius: var(--radius-md); text-align: center; transition: transform .2s ease; }
.social-card:hover { color: inherit !important; transform: translateY(-4px); }
.social-card > i { color: var(--green); font-size: 1.55rem; }
.social-card h3 { margin-top: 13px; font-size: .95rem; }
.social-card p { margin-top: 3px; color: var(--muted); font-size: .68rem; }
.acknowledgement { display: flex; gap: 22px; margin-top: 75px; padding: 30px; border-radius: var(--radius-md); }
.acknowledgement > i { color: var(--green); font-size: 1.4rem; }
.acknowledgement h2 { margin-bottom: 7px; font-size: 1.2rem; }
.acknowledgement p { color: var(--muted); font-size: .82rem; }
.acknowledgement a { color: var(--green); font-weight: 600; }

/* Statistics */
.stats-layout { padding-top: 34px; }
.stats-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 18px; }
.metric-card { padding: 27px; border-radius: var(--radius-md); }
.metric-card i { float: right; color: var(--green); font-size: 1.2rem; }
.metric-card p { color: var(--muted); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.metric-card strong { display: block; margin-top: 6px; color: var(--ink); font: 700 1.75rem/1.2 'Manrope'; }
.map-card { padding: 28px; border-radius: var(--radius-md); }
.map-heading { display: flex; margin-bottom: 18px; align-items: end; justify-content: space-between; }
.map-heading h2 { margin-top: 5px; font-size: 1.5rem; }
.map-heading > span { color: var(--muted); font-size: .65rem; }
#visitor-map { height: 480px; overflow: hidden; border-radius: 15px; filter: saturate(.72) contrast(.96); }

/* CV */
.cv-sheet { padding: clamp(32px,6vw,72px); border-radius: 4px; background: rgba(255,255,252,.94); box-shadow: 0 24px 70px rgba(30,53,50,.16); }
.cv-header { display: grid; grid-template-columns: 1fr 240px; gap: 55px; padding-bottom: 39px; border-bottom: 2px solid var(--ink); }
.cv-header h1 { margin: 9px 0 2px; font-size: clamp(2.8rem,6vw,4.7rem); line-height: 1; }
.cv-title { color: var(--green); font-size: 1rem; font-weight: 700; }
.cv-summary { max-width: 680px; margin-top: 17px !important; color: var(--muted); font-size: .82rem; }
.cv-header address { display: flex; padding-top: 26px; flex-direction: column; color: var(--muted); font-size: .75rem; font-style: normal; text-align: right; }
.cv-header address a { color: var(--green); }
.cv-grid { display: grid; grid-template-columns: 235px 1fr; gap: 58px; padding-top: 42px; }
.cv-sidebar { padding-right: 30px; border-right: 1px solid var(--line); }
.cv-sidebar section { margin-bottom: 35px; }
.cv-sidebar h2, .cv-content section > h2 { margin-bottom: 15px; color: var(--green-dark); font-size: .77rem; letter-spacing: .12em; text-transform: uppercase; }
.cv-sidebar h3 { margin: 17px 0 4px; font-size: .78rem; }
.cv-sidebar p { color: var(--muted); font-size: .75rem; }
.cv-content section { padding-bottom: 29px; margin-bottom: 29px; border-bottom: 1px solid var(--line); }
.cv-content section:last-child { border-bottom: 0; }
.cv-content section > h2 i { width: 22px; color: var(--green); }
.cv-entry { display: grid; grid-template-columns: 1fr auto; gap: 20px; }
.cv-entry h3 { font-size: .98rem; }
.cv-entry p { margin-top: 3px; color: var(--muted); font-size: .77rem; }
.cv-entry time { color: var(--green); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.cv-entry ul { margin: 10px 0 0 18px; color: var(--muted); font-size: .74rem; list-style: disc; }
.cv-empty-note { margin-top: 10px !important; color: #899493; font-size: .7rem; font-style: italic; }

/* Post */
.post-sheet { padding: clamp(30px,6vw,76px); border-radius: var(--radius-lg); background: rgba(255,255,252,.94); box-shadow: var(--shadow); }
.post-header { max-width: 830px; margin: auto; text-align: center; }
.post-back { display: inline-flex; gap: 7px; margin-bottom: 30px; align-items: center; color: var(--green) !important; font-size: .72rem; font-weight: 700; }
.post-categories { display: flex; gap: 7px; margin-bottom: 13px; justify-content: center; flex-wrap: wrap; }
.post-categories span { padding: 5px 10px; border-radius: 99px; color: var(--green-dark); background: rgba(31,111,102,.09); font-size: .64rem; font-weight: 700; text-transform: uppercase; }
.post-header h1 { font-size: clamp(2.3rem,6vw,4.7rem); line-height: 1.08; }
.post-meta { display: flex; gap: 22px; margin-top: 20px; justify-content: center; color: var(--muted); font-size: .7rem; }
.post-meta i { margin-right: 5px; color: var(--green); }
.post-hero-image { width: 100%; max-height: 460px; margin-top: 37px; border-radius: var(--radius-md); object-fit: cover; }
.post-content { max-width: 800px; margin: 50px auto 0; color: #33484c; font-size: 1rem; line-height: 1.9; overflow-wrap: anywhere; }
.post-content h1, .post-content h2, .post-content h3, .post-content h4 { margin: 2.1em 0 .7em; line-height: 1.3; }
.post-content h2 { padding-bottom: .35em; border-bottom: 1px solid var(--line); font-size: 1.7rem; }
.post-content h3 { font-size: 1.35rem; }
.post-content h4 { font-size: 1.1rem; }
.post-content p { margin: 0 0 1.25em; }
.post-content a { color: var(--green); border-bottom: 1px solid rgba(31,111,102,.25); }
.post-content ul, .post-content ol { margin: 1em 0 1.5em 1.5em; padding-left: 1em; }
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li { margin-bottom: .35em; }
.post-content img { display: block; max-width: 100%; height: auto; margin: 2em auto; border-radius: 12px; }
.post-content blockquote { margin: 1.6em 0; padding: 1em 1.3em; border-left: 3px solid var(--green); color: var(--muted); background: rgba(31,111,102,.055); }
.post-content pre { max-width: 100%; margin: 1.5em 0; padding: 20px; overflow-x: auto; border-radius: 12px; color: #eaf4ef; background: #173532; font-size: .82rem; }
.post-content code { padding: .15em .35em; border-radius: 5px; color: #17635a; background: rgba(31,111,102,.08); font-size: .88em; }
.post-content pre code { padding: 0; color: inherit; background: none; }
.post-content table { display: block; max-width: 100%; overflow-x: auto; }
.post-neighbors { display: grid; max-width: 800px; margin: 58px auto 0; padding-top: 25px; grid-template-columns: 1fr 1fr; gap: 25px; border-top: 1px solid var(--line); }
.post-neighbors a:last-child { text-align: right; }
.post-neighbors small { display: block; margin-bottom: 5px; color: var(--muted); font-size: .65rem; }
.post-neighbors span { color: var(--green-dark); font-size: .77rem; font-weight: 700; }
.related-section { padding-top: 80px; }
.related-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.related-card { min-height: 190px; padding: 25px; border-radius: var(--radius-md); transition: transform .2s ease; }
.related-card:hover { color: inherit !important; transform: translateY(-4px); }
.related-card time { color: var(--green); font-size: .64rem; font-weight: 700; }
.related-card h3 { margin: 10px 0 8px; font-size: 1rem; }
.related-card p { color: var(--muted); font-size: .75rem; }
.comments-section { max-width: 900px; margin-top: 80px; padding: 35px; border-radius: var(--radius-md); }
.comments-section h2 { margin: 6px 0 25px; font-size: 1.7rem; }

/* Footer */
.site-footer { margin-top: 0; padding: 35px 24px; color: rgba(255,255,255,.78); background: #193d3b; }
.footer-inner { display: grid; width: min(100%, var(--site-width)); margin: auto; grid-template-columns: 1fr auto; gap: 20px 35px; align-items: center; }
.footer-title { color: #fff; font: 700 1rem/1.3 'Manrope'; }
.footer-note { margin-top: 3px !important; color: rgba(255,255,255,.55); font-size: .7rem; }
.footer-links { display: flex; gap: 8px; justify-self: end; }
.footer-links a { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 10px; color: rgba(255,255,255,.72) !important; }
.footer-links a:hover { color: #fff !important; background: rgba(255,255,255,.1); }
.footer-stats { display: flex; gap: 18px; align-items: center; color: rgba(255,255,255,.52); font-size: .66rem; }
.footer-stats a { color: var(--aqua) !important; font-weight: 700; }
.footer-stats strong { color: rgba(255,255,255,.86); font-weight: 600; }
.footer-copy { justify-self: end; color: rgba(255,255,255,.42); font-size: .63rem; }
.back-to-top { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: grid; width: 42px; height: 42px; padding: 0; place-items: center; border: 0; border-radius: 13px; color: #fff; background: var(--green); box-shadow: 0 10px 28px rgba(22,66,61,.28); opacity: 0; visibility: hidden; transform: translateY(10px); transition: .2s ease; }
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-profile { display: grid; grid-template-columns: 170px 1fr; gap: 18px 25px; align-items: center; }
  .avatar-frame { grid-row: 1 / 5; margin: 0; }
  .profile-rule { display: none; }
  .status-pill { margin-top: 0; }
  .focus-grid { grid-template-columns: 1fr 1fr; }
  .feature-card:last-child { grid-column: 1 / -1; }
  .social-grid { grid-template-columns: repeat(2,1fr); }
  .about-intro { grid-template-columns: 240px 1fr; }
  .cv-grid { grid-template-columns: 190px 1fr; gap: 35px; }
}

@media (max-width: 700px) {
  .page-main { padding: 96px 15px 60px; }
  .site-nav { top: 10px; padding-inline: 12px; }
  .nav-inner { min-height: 58px; border-radius: 17px; }
  .nav-toggle { display: grid; place-items: center; }
  .nav-menu { position: absolute; top: 68px; right: 12px; left: 12px; display: none; padding: 10px; border: 1px solid rgba(255,255,255,.8); border-radius: 17px; background: rgba(249,250,245,.96); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
  .nav-menu.is-open { display: grid; grid-template-columns: repeat(2,1fr); }
  .nav-link { padding: 12px; }
  .hero { min-height: 0; }
  .hero-copy { padding: 43px 27px; }
  .hero-copy::after { opacity: .45; }
  .hero h1 { font-size: clamp(3.6rem,20vw,5.4rem); }
  .hero-profile { display: grid; grid-template-columns: 108px 1fr; padding: 21px; }
  .avatar-frame { aspect-ratio: 1; }
  .hero-links { gap: 15px; }
  .hero-links a span { display: none; }
  .home-section { padding-top: 72px; }
  .section-heading { align-items: center; }
  .section-heading h2 { font-size: 1.75rem; }
  .focus-grid, .post-grid, .friends-grid, .stats-cards { grid-template-columns: 1fr; }
  .feature-card:last-child { grid-column: auto; }
  .latest-list { padding: 0 20px; }
  .latest-item { grid-template-columns: 54px minmax(0,1fr); gap: 15px; padding: 24px 0; }
  .latest-item .round-link, .latest-item div > p:last-child { display: none; }
  .page-hero { padding: 45px 15px 38px; }
  .page-hero h1 { font-size: 3.5rem; }
  .blog-cover { height: 190px; }
  .friends-grid { padding-top: 24px; }
  .friend-card, .friend-invite { min-height: 150px; padding: 19px; }
  .friend-card img { width: 76px; height: 76px; border-radius: 20px; }
  .about-intro { grid-template-columns: 1fr; padding: 23px; }
  .about-avatar { max-width: 260px; margin: auto; }
  .about-intro h1 { font-size: 3rem; }
  .social-grid { grid-template-columns: 1fr 1fr; }
  .acknowledgement { margin-top: 55px; }
  #visitor-map { height: 360px; }
  .map-card { padding: 17px; }
  .cv-sheet { padding: 27px 22px; }
  .cv-sheet { overflow: hidden; }
  .cv-header { grid-template-columns: 1fr; gap: 5px; }
  .cv-header address { padding-top: 10px; text-align: left; }
  .cv-grid { grid-template-columns: 1fr; gap: 15px; }
  .cv-sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 0 0 15px; border-right: 0; border-bottom: 1px solid var(--line); }
  .cv-sidebar section { margin-bottom: 15px; }
  .cv-sidebar section:first-child { grid-column: 1 / -1; }
  .cv-entry { grid-template-columns: 1fr; gap: 5px; }
  .cv-entry time { grid-row: 1; }
  .post-sheet { padding: 34px 21px; border-radius: 20px; }
  .post-header { text-align: left; }
  .post-categories, .post-meta { justify-content: flex-start; }
  .post-header h1 { font-size: 2.4rem; }
  .post-content { margin-top: 38px; font-size: .94rem; }
  .post-content h2 { font-size: 1.45rem; }
  .post-neighbors { grid-template-columns: 1fr; }
  .post-neighbors a:last-child { text-align: left; }
  .related-grid { grid-template-columns: 1fr; }
  .comments-section { padding: 22px; }
  .footer-inner { grid-template-columns: 1fr auto; }
  .footer-stats { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; }
  .footer-copy { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 430px) {
  .nav-brand-text { display: none; }
  .hero-actions .button { width: 100%; }
  .hero-profile { grid-template-columns: 88px 1fr; gap: 13px 17px; }
  .profile-value { font-size: .8rem; }
  .status-pill { grid-column: 1 / -1; }
  .section-heading .text-link { font-size: 0; }
  .section-heading .text-link i { font-size: .85rem; }
  .social-grid { grid-template-columns: 1fr; }
  .cv-sidebar { grid-template-columns: 1fr; }
  .cv-sidebar section:first-child { grid-column: auto; }
}

@media print {
  @page { size: A4; margin: 13mm; }
  body.site-shell { color: #111; background: #fff !important; font-size: 10pt; }
  body.site-shell::before, .site-nav, .site-footer, .back-to-top { display: none !important; }
  .page-main { min-height: 0; padding: 0; }
  .cv-sheet { width: 100%; padding: 0; box-shadow: none; background: #fff; }
  .cv-header { grid-template-columns: 1fr 190px; gap: 25px; padding-bottom: 7mm; }
  .cv-header h1 { font-size: 30pt; }
  .cv-grid { grid-template-columns: 44mm 1fr; gap: 8mm; padding-top: 7mm; }
  .cv-sidebar { padding-right: 6mm; }
  .cv-content section { padding-bottom: 4mm; margin-bottom: 4mm; break-inside: avoid; }
  .cv-entry { break-inside: avoid; }
  .cv-sheet a { color: #111 !important; }
}

/* Home welcome: a centered, full-screen introduction inspired by the original page. */
.home-page { background-image: linear-gradient(rgba(245,247,244,.48), rgba(245,247,244,.48)), url('../background.jpg'); background-position: center top; }
.home-page .page-main { padding: 88px 24px 0; }
.home-welcome { display: grid; min-width: 0; min-height: min(850px, calc(100vh - 88px)); place-items: center; text-align: center; }
.home-welcome-inner { width: min(100%, 970px); min-width: 0; padding: 42px 30px 48px; }
.home-avatar-wrap { width: clamp(148px, 15vw, 214px); height: clamp(148px, 15vw, 214px); margin: 0 auto 27px; padding: 7px; border: 1px solid rgba(255,255,255,.94); border-radius: 50%; background: rgba(255,255,255,.2); box-shadow: 0 12px 30px rgba(28,49,55,.15), 0 0 0 1px rgba(24,57,63,.08); }
.home-avatar { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.home-kicker { margin-bottom: 9px; color: #285d5d; font-size: .78rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; }
.home-page h1#home-title { margin: 0; color: #22343b; font: 500 clamp(2.45rem,5.2vw,4.5rem)/1.1 'Manrope','Microsoft YaHei',sans-serif; letter-spacing: -.045em; text-shadow: 0 2px 16px rgba(255,255,255,.45); }
.home-mobile-break { display: none; }
.home-role { margin-top: 13px !important; color: #28545a; font-size: clamp(.83rem,1.5vw,1rem); font-weight: 700; }
.home-description { max-width: 900px; margin: 25px auto 0; color: #263b41; font-size: clamp(.94rem,1.55vw,1.18rem); line-height: 1.95; overflow-wrap: anywhere; text-shadow: 0 1px 8px rgba(255,255,255,.65); }
.home-actions { display: flex; gap: 11px; margin-top: 28px; justify-content: center; flex-wrap: wrap; }
.home-action-primary,.home-action-secondary { display: inline-flex; min-height: 42px; padding: 0 19px; gap: 8px; align-items: center; border-radius: 99px; font-size: .78rem; font-weight: 700; transition: .2s ease; }
.home-action-primary { color: #fff !important; background: #286e69; box-shadow: 0 8px 22px rgba(34,101,96,.2); }
.home-action-primary:hover { color: #fff !important; background: #1e5855; transform: translateY(-2px); }
.home-action-secondary { border: 1px solid rgba(38,83,85,.24); color: #285d5d !important; background: rgba(255,255,255,.28); }
.home-action-secondary:hover { background: rgba(255,255,255,.7); transform: translateY(-2px); }
.home-contact { display: flex; gap: 18px; margin-top: 33px; justify-content: center; align-items: center; }
.home-contact > a,.home-contact-popover > button { display: grid; width: 58px; height: 58px; padding: 0; place-items: center; border: 0; border-radius: 50%; color: #244b55 !important; background: rgba(255,255,255,.82); box-shadow: 0 5px 17px rgba(39,70,75,.1); font-size: 1.35rem; transition: .2s ease; }
.home-contact > a:hover,.home-contact-popover > button:hover { color: #fff !important; background: #286e69; transform: translateY(-3px); }
.home-contact-popover { position: relative; }
.home-contact-popover > button { cursor: pointer; font-family: inherit; }
.home-qr { position: absolute; bottom: calc(100% + 13px); left: 50%; display: flex; width: 162px; padding: 10px; gap: 7px; align-items: center; border: 1px solid rgba(255,255,255,.9); border-radius: 14px; background: rgba(255,255,255,.95); box-shadow: 0 15px 30px rgba(31,56,57,.2); opacity: 0; visibility: hidden; transform: translate(-50%,7px); transition: .2s ease; flex-direction: column; }
.home-contact-popover:hover .home-qr,.home-contact-popover:focus-within .home-qr { opacity: 1; visibility: visible; transform: translate(-50%,0); }
.home-qr img { width: 138px; height: 138px; border-radius: 7px; object-fit: cover; }
.home-qr span { color: #405a5c; font-size: .68rem; }
.home-below { padding: 42px 0 86px; }
.home-below-heading { display: flex; margin-bottom: 20px; align-items: end; justify-content: space-between; }
.home-below-heading h2 { margin-top: 6px; font-size: 1.65rem; }
.home-page .site-footer { margin-top: 0; }

@media (max-width: 700px) {
  .home-page .page-main { padding: 78px 15px 0; }
  .home-welcome { min-height: calc(100svh - 78px); }
  .home-welcome { width: 100%; overflow: hidden; }
  .home-welcome-inner { width: calc(100vw - 30px); max-width: calc(100vw - 30px); padding: 24px 8px 38px; overflow: hidden; }
  .home-avatar-wrap { margin-bottom: 22px; }
  .home-page h1#home-title { width: 100%; max-width: 100%; font-size: 2rem !important; line-height: 1.12; letter-spacing: -.06em; white-space: normal; overflow-wrap: anywhere; }
  .home-mobile-break { display: block; }
  .home-role, .home-description { width: 100%; max-width: 100%; line-height: 1.45; overflow-wrap: anywhere; word-break: break-all; white-space: normal !important; }
  .home-description { margin-top: 19px; font-size: .9rem; line-height: 1.75; }
  .home-contact { gap: 12px; margin-top: 27px; }
  .home-contact > a,.home-contact-popover > button { width: 49px; height: 49px; font-size: 1.1rem; }
  .home-qr { bottom: calc(100% + 10px); }
  .home-below { padding-top: 25px; }
  .home-below-heading h2 { font-size: 1.4rem; }
}