/* ============================================================
   Hania Guo · 个人主页  —  明朗生命力风（非黄蓝）
   珊瑚粉 / 阳光黄 / 薄荷绿 / 天空蓝 · 圆润 · 轻快
   双语切换对齐 html[data-lang]
   ============================================================ */
:root{
  /* 明朗多彩调色板 */
  --bg:#FFF8F3;          /* 暖奶油底 */
  --bg-2:#FFF0F6;        /* 淡粉 */
  --bg-3:#EAFBF6;        /* 淡薄荷 */
  --ink:#322A45;         /* 深梅紫（比纯黑柔和、友好） */
  --muted:#6E6680;
  --coral:#FF6F91;       /* 珊瑚粉 · 主能量 */
  --pink:#FFA6C1;
  --sun:#FFC94D;         /* 阳光黄 */
  --mint:#2FD3A8;        /* 薄荷绿 */
  --sky:#5BA8F0;         /* 天空蓝 */
  --lav:#B58BEF;         /* 薰衣草点缀 */
  --card:#FFFFFF;
  --line:rgba(50,42,69,.12);
  --shadow:0 16px 42px rgba(255,111,145,.16);
  --shadow-soft:0 8px 24px rgba(50,42,69,.08);
  --radius:20px;
  --radius-sm:14px;
  /* 字体：圆润友好的展示体 + 中文黑体 */
  --display:"Fredoka","Quicksand","Noto Sans SC",sans-serif;
  --cn:"Noto Sans SC","PingFang SC",sans-serif;
  --sans:"Quicksand","Noto Sans SC","PingFang SC",sans-serif;
  --maxw:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.75;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:700}

/* 双语（正确对齐 html[data-lang]） */
.en{display:none}
html[data-lang="en"] .zh{display:none}
html[data-lang="en"] .en{display:inline}

/* ===================== 顶部条 ===================== */
.topbar{background:linear-gradient(90deg,var(--coral),var(--sun));color:#fff;font-size:13px}
.topbar__inner{max-width:var(--maxw);margin:0 auto;padding:8px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.topbar__tag{opacity:.95;font-weight:600}
.lang-toggle{background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.6);color:#fff;border-radius:20px;padding:4px 14px;cursor:pointer;font-size:13px;font-weight:700;transition:.2s}
.lang-toggle:hover{background:rgba(255,255,255,.4)}

/* ===================== 导航 ===================== */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,248,243,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav__inner{max-width:var(--maxw);margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.nav__brand{font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.5px;color:var(--ink)}
.nav__brand span{color:var(--coral)}
.nav__menu{display:flex;gap:22px}
.nav__menu a{font-size:15px;font-weight:600;opacity:.8;padding:4px 0;position:relative;transition:.2s}
.nav__menu a:hover{opacity:1;color:var(--coral)}
.nav__menu a::after{content:"";position:absolute;left:0;bottom:-2px;width:0;height:3px;border-radius:3px;background:linear-gradient(90deg,var(--coral),var(--sun));transition:.25s}
.nav__menu a:hover::after{width:100%}
.nav__burger{display:none;background:none;border:none;font-size:24px;color:var(--ink);cursor:pointer}

/* ===================== Hero ===================== */
.hero{position:relative;overflow:hidden;padding:78px 20px;background:
  radial-gradient(120% 120% at 0% 0%,var(--bg-2),transparent 55%),
  radial-gradient(120% 120% at 100% 100%,var(--bg-3),transparent 55%),
  var(--bg)}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(40px);opacity:.5;z-index:0}
.hero::before{width:320px;height:320px;background:var(--pink);top:-90px;right:-60px}
.hero::after{width:260px;height:260px;background:var(--mint);bottom:-90px;left:-50px;opacity:.4}
.hero__inner{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center}
.hero__portrait{aspect-ratio:3/4;border-radius:26px;font-size:64px;background:linear-gradient(135deg,var(--coral),var(--sun));box-shadow:var(--shadow)}
.hero__eyebrow{letter-spacing:1.5px;font-size:13px;font-weight:700;color:var(--coral);margin:0 0 12px;display:inline-block;background:rgba(255,111,145,.12);padding:5px 14px;border-radius:20px}
.hero__name{font-family:var(--display);font-size:clamp(48px,8vw,86px);line-height:.95;color:var(--ink);margin-bottom:14px;background:linear-gradient(90deg,var(--coral),var(--lav) 55%,var(--sky));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__sub{font-family:var(--cn);font-size:clamp(16px,2.4vw,22px);font-weight:700;color:var(--mint);margin:0 0 16px}
.hero__lead{max-width:620px;font-size:clamp(15px,2vw,17px);color:var(--muted);margin:0 0 26px}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}

/* 按钮 */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 28px;border-radius:30px;font-weight:700;font-size:15px;cursor:pointer;transition:.2s;border:2px solid transparent;font-family:var(--cn)}
.btn--solid{background:linear-gradient(90deg,var(--coral),var(--sun));color:#fff;box-shadow:0 10px 24px rgba(255,111,145,.3)}
.btn--solid:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(255,111,145,.4)}
.btn--ghost{border-color:var(--coral);color:var(--coral)}
.btn--ghost:hover{background:rgba(255,111,145,.1)}

/* ===================== 通用 section ===================== */
.section{max-width:var(--maxw);margin:0 auto;padding:80px 20px}
.section--tint{background:linear-gradient(180deg,var(--bg-2),var(--bg));max-width:none}
.section--tint>.section__head,.section--tint>.prose,.section--tint>.contact,.section--tint>.writing,.section--tint>.research,.section--tint>.photo,.section--tint>.engage{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.section__head{text-align:center;margin-bottom:42px}
.section__kicker{display:inline-block;color:#fff;font-weight:700;letter-spacing:1.5px;font-size:13px;text-transform:uppercase;margin-bottom:12px;background:linear-gradient(90deg,var(--accent,var(--mint)),var(--accent2,var(--sky)));padding:5px 16px;border-radius:20px}
.section__title{font-family:var(--cn);font-size:clamp(26px,4vw,40px);color:var(--ink)}
.section__sub{max-width:680px;margin:14px auto 0;color:var(--muted);font-size:16px}

/* About 长文 */
.prose{max-width:780px;margin:0 auto;font-size:17px;color:#4a4258}
.prose p{margin:0 0 20px}
.prose__quote{font-family:var(--cn);font-style:normal;font-weight:700;font-size:20px;line-height:1.6;color:var(--coral);border-left:5px solid var(--sun);padding:6px 0 6px 22px;background:rgba(255,201,77,.1);border-radius:0 12px 12px 0}

/* Research 卡片 */
.research{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:22px}
.r-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px;box-shadow:var(--shadow-soft);overflow:hidden;transition:.22s}
.r-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.r-card::before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,var(--accent,var(--coral)),var(--accent2,var(--sun)))}
.r-card__no{position:absolute;top:14px;right:20px;font-family:var(--display);font-size:34px;font-weight:700;color:var(--bg-2);opacity:.9}
.r-card__tag{display:inline-block;background:rgba(47,211,168,.16);color:#159e7c;font-size:12px;font-weight:700;padding:3px 12px;border-radius:20px;margin-bottom:12px}
.r-card h3{font-family:var(--cn);font-size:20px;color:var(--ink);margin:0 0 12px;line-height:1.4;padding-right:42px}
.r-card p{margin:0 0 14px;color:#5a5368;font-size:15px}
.r-card__link{display:inline-block;font-weight:700;color:var(--coral);border-bottom:2px solid transparent}
.r-card__link:hover{border-bottom-color:var(--coral)}

/* Global Engagement */
.engage{max-width:840px;margin:0 auto;background:var(--card);border:1px solid var(--line);border-left:6px solid var(--mint);border-radius:var(--radius);padding:34px 36px;box-shadow:var(--shadow-soft);text-align:center}
.engage__flag{font-size:40px;display:block;margin-bottom:10px}
.engage h3{font-family:var(--cn);font-size:24px;color:var(--ink);margin:0 0 16px}
.engage p{margin:0;color:#4a4258;font-size:16px;text-align:left}

/* Photography 卡片 */
.photo{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.ph-card{display:flex;flex-direction:column;justify-content:flex-end;text-align:left;min-height:300px;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft);overflow:hidden;transition:.22s}
.ph-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.ph-card.ph{background:#fff}
.ph-card__cap{padding:22px 22px 36px;position:relative;z-index:2}
.ph-card__cap h3{font-family:var(--cn);font-size:19px;color:var(--coral);margin:0 0 10px}
.ph-card__cap p{margin:0;color:#5a5368;font-size:14px}
.ph-card.ph::before{content:"";position:absolute;inset:0;z-index:0}
.ph-card:nth-child(1).ph::before{background:linear-gradient(135deg,var(--pink),var(--sun))}
.ph-card:nth-child(2).ph::before{background:linear-gradient(135deg,var(--mint),var(--sky))}
.ph-card:nth-child(3).ph::before{background:linear-gradient(135deg,var(--lav),var(--coral))}
.ph-card.ph::after{z-index:1;background:rgba(255,255,255,.78)}

/* Writing 列表 */
.writing{max-width:820px;margin:0 auto;list-style:none;counter-reset:w;padding:0;display:grid;gap:12px}
.writing li{counter-increment:w;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 20px 16px 56px;position:relative;color:#4a4258;font-size:16px;box-shadow:var(--shadow-soft);transition:.2s}
.writing li:hover{transform:translateX(4px);border-color:var(--pink)}
.writing li::before{content:counter(w,decimal-leading-zero);position:absolute;left:18px;top:50%;transform:translateY(-50%);font-family:var(--display);font-weight:700;font-size:20px;color:var(--coral)}

/* Contact */
.contact{text-align:center;max-width:640px;margin:0 auto}
.contact p{color:#4a4258;font-size:16px;margin:0 0 18px}
.contact__list{list-style:none;margin:0;padding:0;display:inline-flex;flex-direction:column;gap:10px;font-size:16px}
.contact__list a{color:var(--coral);font-weight:700;border-bottom:1px solid transparent}
.contact__list a:hover{border-bottom-color:var(--coral)}

/* Footer */
.footer{background:linear-gradient(90deg,var(--ink),#473a63);color:#fff;padding:36px 20px}
.footer__inner{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center}
.footer__brand{font-family:var(--display);font-weight:700;font-size:22px;margin:0;background:linear-gradient(90deg,var(--sun),var(--coral));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.footer__copy{font-size:13px;opacity:.7;margin:0}

/* 占位 */
.ph{display:flex;align-items:center;justify-content:center;border:2px dashed rgba(255,255,255,.6);border-radius:16px;color:#fff;position:relative;overflow:hidden}
.ph span{font-size:30px;opacity:.85}
.ph::after{content:attr(data-label);position:absolute;bottom:8px;left:8px;right:8px;font-size:11px;color:#fff;background:rgba(50,42,69,.45);padding:3px 6px;border-radius:6px;text-align:center;backdrop-filter:blur(2px)}

/* Hero 关键词（多彩） */
.hero__keywords{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.kw{font-weight:700;font-size:14px;padding:7px 18px;border-radius:30px;color:#fff}
.kw:nth-child(1){background:var(--coral)}
.kw:nth-child(2){background:var(--mint)}
.kw:nth-child(3){background:var(--sky)}

/* ===================== 四大模块主题色 ===================== */
#academic{--accent:var(--sky);--accent2:var(--mint)}
#arts{--accent:var(--coral);--accent2:var(--lav)}
#athletics{--accent:var(--sun);--accent2:var(--coral)}
#impact{--accent:var(--mint);--accent2:var(--sky)}

/* 模块总览条 */
.pillars{background:linear-gradient(180deg,var(--bg),var(--bg-2));padding:46px 20px}
.pillars__inner{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pillar{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 14px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-soft);transition:.22s;color:var(--ink)}
.pillar:hover{transform:translateY(-6px);box-shadow:0 18px 38px color-mix(in srgb,var(--p) 30%,transparent);border-color:var(--p)}
.pillar__ic{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;background:color-mix(in srgb,var(--p) 18%,#fff);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--p) 35%,#fff)}
.pillar__t{font-family:var(--cn);font-weight:700;font-size:18px;color:var(--p)}

/* 写作子标题 */
.subhead{text-align:center;margin:46px 0 22px}
.subhead h3{font-family:var(--cn);font-size:clamp(20px,3vw,26px);color:var(--ink)}

/* 体育占位卡 */
.placeholder{max-width:840px;margin:0 auto;background:var(--card);border:2px dashed var(--accent);border-radius:var(--radius);padding:36px;text-align:center;box-shadow:var(--shadow-soft)}
.placeholder__ic{font-size:46px;display:block;margin-bottom:8px}
.placeholder h3{font-family:var(--cn);font-size:22px;color:var(--accent);margin:0 0 14px}
.placeholder p{margin:0;color:#5a5368;font-size:15px;text-align:left}

/* 社会公益双栏 */
.impact{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr;gap:22px}
.impact__main{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--accent);border-radius:var(--radius);padding:34px 36px;box-shadow:var(--shadow-soft)}
.impact__sub{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:30px 32px;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;gap:14px}
.impact__flag{font-size:38px;display:block;margin-bottom:10px}
.impact__main h3,.impact__sub h3{font-family:var(--cn);font-size:21px;color:var(--ink);margin:0 0 12px;line-height:1.4}
.impact__main p,.impact__sub p{margin:0;color:#4a4258;font-size:15px}

/* ===================== 响应式 ===================== */
@media (max-width:860px){
  .hero__inner{grid-template-columns:1fr;gap:28px;text-align:center}
  .hero__portrait{max-width:240px;margin:0 auto}
  .hero__cta{justify-content:center}
  .research,.photo{grid-template-columns:1fr}
  .pillars__inner{grid-template-columns:repeat(2,1fr)}
  .impact{grid-template-columns:1fr}
  .nav__menu{position:absolute;top:100%;left:0;right:0;background:var(--bg);flex-direction:column;gap:0;padding:10px 20px;border-bottom:1px solid var(--line);display:none}
  .nav__menu.open{display:flex}
  .nav__menu a{padding:12px 0;border-bottom:1px solid var(--line)}
  .nav__burger{display:block}
}
@media (max-width:520px){
  .hero{padding:54px 18px}
}