/* Résumé-specific MagicBento adaptation. React Bits attribution: react-bits-LICENSE.txt. */
.resume-section { min-height: 0; overflow: visible; }
.resume-wrap { padding: 104px 0 34px; }
.resume-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.resume-heading h2 { font-size: 32px; margin-top: 8px; letter-spacing: .04em; }
.resume-heading h2 span { font: 13px/1.6 var(--sans); color: var(--muted); letter-spacing: .04em; margin-left: 20px; }
.resume-pdf { display: inline-flex; align-items: center; gap: 30px; min-height: 44px; font-size: 12px; color: var(--text); border-bottom: 1px solid var(--line-strong); white-space: nowrap; }
.resume-pdf span { font-size: 20px; color: var(--vermilion-soft); }
.resume-bento { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 12px; position: relative; --mb-glow: 214,148,100; --mb-radius: 18px; }
.rb-cell { position: relative; min-width: 0; display: flex; }
.rb-identity { grid-column: span 4; grid-row: span 2; }
.rb-experience { grid-column: span 8; }
.rb-skills { grid-column: span 5; }
.rb-results { grid-column: span 3; }
.rb-education, .rb-strengths { grid-column: span 6; }
.rb-card {
  --mb-spot-alpha: .08;
  position: relative; width: 100%; min-width: 0; height: 100%; overflow: hidden; isolation: isolate;
  border-radius: var(--mb-radius); color: #eee7db;
  background: linear-gradient(160deg, rgba(32,29,26,.97), rgba(17,16,14,.98));
  box-shadow: inset 0 0 0 1px rgba(239,231,216,.14), inset 0 1px rgba(255,255,255,.04), 0 12px 32px -24px #000;
  transform: perspective(1100px) translate3d(var(--mb-tx,0px),var(--mb-ty,0px),0) rotateX(var(--mb-rx,0deg)) rotateY(var(--mb-ry,0deg));
}
.rb-paper { --mb-spot-alpha: .12; background: linear-gradient(145deg,#faf4e8,#e9dfcd); color: #242019; box-shadow: inset 0 0 0 1px #f7eedc, 0 18px 44px -24px #000; }
.rb-content { position: relative; z-index: 2; padding: 22px; display: flex; flex-direction: column; height: 100%; min-width: 0; }
.rb-label { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #d2c5b0; font-size: 10px; line-height: 1.7; letter-spacing: .11em; }
.rb-paper .rb-label { color: #726550; }
.rb-open { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; color: #9f3d2c; font-size: 11px; letter-spacing: .02em; }
.rb-open i { width: 6px; height: 6px; border-radius: 50%; background: #a74732; box-shadow: 0 0 0 4px rgba(167,71,50,.1); }
.rb-person { display: flex; align-items: center; gap: 20px; margin-top: 22px; }
.rb-person img { width: 86px; height: 100px; flex: none; object-fit: cover; border-radius: 10px; border: 1px solid rgba(46,36,23,.14); filter: none; }
.rb-person h1 { font-family: var(--serif); font-size: clamp(32px,3vw,44px); font-weight: 600; letter-spacing: .08em; white-space: nowrap; }
.rb-en { margin-top: 6px; font-size: 9px; color: #766c5c; letter-spacing: .15em; }
.rb-degree { margin-top: 9px; font-size: 12px; color: #594e3d; }
.rb-role { font: 600 clamp(23px,2.3vw,30px)/1.5 var(--serif); margin-top: 23px; letter-spacing: .02em; }
.rb-role span { font-size: .68em; font-weight: 400; color: #695844; }
.rb-bio { font-size: 14px; line-height: 1.9; color: #5a4e3c; margin-top: 13px; }
.rb-quick-facts { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-block: 16px; border-top: 1px solid rgba(36,32,25,.15); border-bottom: 1px solid rgba(36,32,25,.15); }
.rb-quick-facts dt { color: #7b6d58; font-size: 11px; }
.rb-quick-facts dd { color: #342a20; font-size: 13px; margin-top: 4px; line-height: 1.6; }
.rb-reach { margin-top: auto; padding-top: 15px; }
.rb-reach a { display: flex; align-items: center; gap: 12px; min-height: 42px; font-size: 13px; width: 100%; }
.rb-reach small { font-size: 8px; letter-spacing: .12em; color: #7a6c58; width: 36px; flex: none; }
.rb-reach span { overflow-wrap: anywhere; }
.rb-reach b { margin-left: auto; font-weight: 400; color: #a74732; }
.rb-reach a:hover { color: #9f3d2c; }
.rb-primary { display: flex; align-items: center; justify-content: space-between; background: #29221b; color: #fff2dc; border-radius: 9px; min-height: 46px; padding: 8px 16px; margin-top: 12px; font-size: 13px; transition: background .2s; }
.rb-primary:hover { background: #853f2e; }
.rb-primary span { font-size: 19px; }
.rb-card-head h3, .rb-strengths h3 { font: 500 21px/1.5 var(--serif); margin-top: 6px; letter-spacing: .02em; }
.rb-jobs { margin-top: 16px; }
.rb-jobs li { position: relative; padding-left: 16px; border-left: 1px solid rgba(214,148,100,.25); }
.rb-jobs li::before { content: ''; width: 5px; height: 5px; position: absolute; left: -3px; top: 7px; border-radius: 50%; background: #db9670; }
.rb-jobs li+li { margin-top: 14px; }
.rb-job-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.rb-job-heading h4 { font-size: 14px; line-height: 1.6; font-weight: 500; color: #f4ead9; }
.rb-job-heading time { font-size: 11px; color: #c6b8a2; font-variant-numeric: tabular-nums; }
.rb-jobs p { font-size: 13px; line-height: 1.8; color: #d2c5b2; margin-top: 4px; }
.rb-jobs p.rb-job-role { margin-top: 3px; color: #e7aa85; font-size: 12px; }
.rb-job-role span { color: #bfb19b; font-size: 10px; margin-left: 8px; }
.rb-skill-list { margin-top: 14px; }
.rb-skill-list>div { display: grid; grid-template-columns: 82px minmax(0,1fr); gap: 12px; padding-top: 11px; }
.rb-skill-list>div+div { margin-top: 10px; border-top: 1px solid rgba(239,231,216,.09); }
.rb-skill-list dt { font-size: 12px; color: #e5b08d; white-space: nowrap; }
.rb-skill-list dt span { margin-right: 7px; }
.rb-skill-list dd { font-size: 12px; color: #eadfcd; line-height: 1.8; overflow-wrap: anywhere; }
.rb-skill-list small { display: block; margin-top: 3px; font-size: 12px; line-height: 1.7; color: #c8baa4; }
.rb-results .rb-content { background: radial-gradient(ellipse at 85% 12%,rgba(154,69,42,.18),transparent 75%); }
.rb-main-stat { margin-block: auto; padding: 16px 0; }
.rb-main-stat strong { font: 500 clamp(42px,4.8vw,64px)/1.1 var(--serif); letter-spacing: -.03em; color: #f5e5cd; }
.rb-main-stat strong span { color: #dea679; font-size: 22px; margin-left: 5px; }
.rb-main-stat p { font-size: 11px; color: #d1c3ab; margin-top: 8px; }
.rb-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; padding-block: 13px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rb-stats dd { font: 500 24px/1.3 var(--serif); color: #ede0ca; white-space: nowrap; }
.rb-stats dd span { font-size: 12px; color: #c08f69; margin-left: 2px; }
.rb-stats dt { font-size: 10px; line-height: 1.7; color: #d1c3ab; margin-top: 4px; }
.rb-attribution { font-size: 10px; line-height: 1.7; margin-top: 12px; color: #c0b29b; }
.rb-education-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; align-items: baseline; margin-top: 7px; }
.rb-education-heading h3 { font: 500 22px/1.5 var(--serif); }
.rb-education-heading h3 span { font: 12px/1.6 var(--sans); color: #cabba5; margin-left: 14px; white-space: nowrap; }
.rb-education-heading time { color: #c9bba3; font-size: 11px; white-space: nowrap; }
.rb-education p:not(.rb-label), .rb-strengths p:not(.rb-label) { font-size: 13px; line-height: 1.85; color: #d2c5b0; margin-top: 12px; }
.rb-interest-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rb-interest-tags span { padding: 2px 9px; border: 1px solid rgba(217,166,122,.22); border-radius: 20px; color: #d9b493; font-size: 10px; line-height: 1.8; }
.rb-resume-note { text-align: right; font-size: 10px; line-height: 1.8; color: #cbbca5; margin-top: 14px; }
/* MagicBento light, neighboring edges and a shared click wave. */
.rb-light { position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: radial-gradient(240px circle at var(--mb-x,-999px) var(--mb-y,-999px),rgba(var(--mb-glow),calc(var(--mb-spot-alpha)*var(--mb-hot,0))),transparent); }
.rb-border { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; padding: 1px;
  background: radial-gradient(180px circle at var(--mb-x,-999px) var(--mb-y,-999px),rgba(var(--mb-glow),var(--mb-near,0)),transparent),
    radial-gradient(circle at var(--mb-wx,-999px) var(--mb-wy,-999px), transparent calc(var(--mb-wr,0px) - 45px),rgba(var(--mb-glow),var(--mb-wa,0)) calc(var(--mb-wr,0px) - 5px),transparent var(--mb-wr,0px));
  -webkit-mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite: exclude;
}
.rb-stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; width: 100%; height: 100%; opacity: .75; }
.rb-cell.is-entering { animation: rb-enter .65s cubic-bezier(.22,1,.36,1) backwards; animation-delay: var(--rb-delay,0ms); }
@keyframes rb-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (max-width:1180px) {
  .resume-bento { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .rb-identity { grid-column: 1; grid-row: span 2; }
  .rb-experience, .rb-skills { grid-column: 2; }
  .rb-results, .rb-education { grid-column: span 1; }
  .rb-strengths { grid-column: 1/-1; }
  .rb-job-heading { display: block; }
  .rb-job-heading time { display: block; margin-top: 2px; }
  .rb-results .rb-content { min-height: 240px; }
}
@media (max-width:760px) {
  .resume-wrap { padding-top: 90px; padding-bottom: 26px; }
  .resume-heading { align-items: center; margin-bottom: 18px; gap: 12px; }
  .resume-heading h2 { font-size: 27px; }
  .resume-heading h2 span { display: block; font-size: 12px; margin: 6px 0 0; }
  .resume-heading .kicker { font-size: 8px; gap: 7px; letter-spacing: .1em; }
  .resume-pdf { font-size: 11px; gap: 12px; align-self: flex-end; }
  .resume-bento { grid-template-columns: 1fr; gap: 12px; --mb-radius: 16px; }
  .rb-identity, .rb-experience, .rb-skills, .rb-results, .rb-education, .rb-strengths { grid-column: 1; grid-row: auto; }
  .rb-content { padding: 20px; }
  .rb-person { margin-top: 18px; gap: 18px; }
  .rb-person h1 { font-size: 36px; }
  .rb-role { font-size: 26px; margin-top: 18px; }
  .rb-bio { font-size: 14px; margin-top: 10px; }
  .rb-quick-facts { margin-top: 15px; padding-block: 12px; }
  .rb-reach { padding-top: 10px; }
  .rb-reach a { min-height: 44px; font-size: 13px; }
  .rb-primary { min-height: 48px; margin-top: 10px; }
  .rb-card-head h3, .rb-strengths h3 { font-size: 21px; }
  .rb-job-heading h4 { font-size: 15px; }
  .rb-jobs p, .rb-skill-list dd, .rb-skill-list small { font-size: 13px; }
  .rb-jobs li+li { margin-top: 22px; }
  .rb-skill-list>div { grid-template-columns: 1fr; gap: 5px; }
  .rb-skill-list dt { font-size: 13px; }
  .rb-main-stat { padding-block: 20px; }
  .rb-main-stat strong { font-size: 58px; }
  .rb-stats dd { font-size: 28px; }
  .rb-attribution { font-size: 11px; }
  .rb-education-heading h3 span { display: block; margin: 4px 0 0; font-size: 13px; }
  .rb-education p:not(.rb-label), .rb-strengths p:not(.rb-label) { font-size: 14px; }
  .rb-resume-note { text-align: left; font-size: 11px; }
  .rb-interest-tags span { font-size: 12px; }
}
@media (max-width:360px) {
  .resume-heading { flex-wrap: wrap; }
  .resume-pdf { margin-top: 0; }
  .rb-content { padding: 17px; }
  .rb-person img { width: 76px; height: 90px; }
  .rb-person { gap: 14px; }
  .rb-person h1 { font-size: 32px; }
  .rb-en { font-size: 8px; }
  .rb-reach a { gap: 7px; font-size: 12px; }
}
@media (hover:none), (pointer:coarse) {
  .rb-card { transform: none; }
  .rb-stars { display: none; }
}
@media (prefers-reduced-motion:reduce) {
  .rb-cell.is-entering { animation: none; }
  .rb-card { transform: none; }
  .rb-light, .rb-border, .rb-stars { display: none; }
}


/* ---------------------------------------------------------------------------
   与全站统一的卡片语言：6px 圆角、细描边、无倾斜、去掉卡内星空，
   整体收进 66vw / 约 84vh 的范围内。
   --------------------------------------------------------------------------- */
.resume-bento { --mb-radius: 6px; }
.rb-card {
  border-radius: 6px;
  background: linear-gradient(160deg, #14171b, #0f1114);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -34px #000;
  transform: none;
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.rb-card:hover { box-shadow: inset 0 0 0 1px var(--line-strong), 0 18px 40px -30px #000; }
.rb-paper {
  background: linear-gradient(160deg, #191b1e, #101214);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -34px #000;
}
.rb-paper::before {
  content: "";
  position: absolute;
  left: 0; top: 20px; bottom: 20px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--vermilion), transparent);
  opacity: .55;
}
.rb-paper .rb-label { color: var(--muted); }
.rb-paper .rb-person h1 { color: var(--text); }
.rb-paper .rb-en { color: var(--muted); }
.rb-paper .rb-degree { color: #b8ae9f; }
.rb-paper .rb-role { color: var(--text); }
.rb-paper .rb-role span { color: #b9ae9d; }
.rb-paper .rb-bio { color: #cfc6b7; }
.rb-paper .rb-quick-facts { border-color: var(--line); }
.rb-paper .rb-quick-facts dt { color: var(--muted); }
.rb-paper .rb-quick-facts dd { color: var(--text); }
.rb-paper .rb-reach small { color: var(--muted); }
.rb-paper .rb-reach a { color: var(--text); }
.rb-paper .rb-reach b { color: var(--vermilion-soft); }
.rb-paper .rb-primary { background: var(--paper); color: var(--ink-text); }
.rb-paper .rb-primary:hover { background: #fffaf0; }
.rb-person img { border-color: var(--line-strong); }
.rb-light, .rb-stars { display: none; }

@media (min-width: 1181px) {
  .resume-section { min-height: 100svh; display: flex; align-items: center; }
  .resume-wrap { width: min(67vw, 1020px); margin-inline: auto; padding: 86px 0 20px; display: flex; flex-direction: column; justify-content: center; }
  .resume-heading { margin-bottom: 14px; }
  .resume-heading h2 { font-size: 30px; }
  .resume-heading h2 span { font-size: 11px; }
  .resume-pdf { font-size: 11px; min-height: 34px; gap: 18px; }
  .resume-bento { height: min(72vh, 720px); gap: 8px; grid-template-rows: 1.02fr .98fr .88fr; }
  .rb-content { padding: 16px 18px; }
  .rb-label { font-size: 8.5px; letter-spacing: .09em; }
  .rb-card-head h3, .rb-strengths h3 { font-size: 15.5px; margin-top: 4px; }
  .rb-person { margin-top: 12px; gap: 13px; }
  .rb-person img { width: 62px; height: 72px; }
  .rb-person h1 { font-size: 28px; }
  .rb-en { margin-top: 3px; font-size: 8px; }
  .rb-degree { margin-top: 4px; font-size: 10.5px; }
  .rb-role { font-size: 18px; margin-top: 13px; line-height: 1.4; }
  .rb-role span { font-size: .7em; }
  .rb-bio { font-size: 13px; line-height: 1.8; margin-top: 9px; }
  .rb-quick-facts { margin-top: 11px; padding-block: 9px; gap: 8px; }
  .rb-quick-facts dt { font-size: 9px; }
  .rb-quick-facts dd { font-size: 11px; margin-top: 2px; }
  .rb-reach { padding-top: 8px; }
  .rb-reach a { min-height: 32px; font-size: 11px; gap: 8px; }
  .rb-primary { min-height: 36px; font-size: 11px; margin-top: 8px; padding: 6px 12px; }
  .rb-jobs { margin-top: 9px; }
  .rb-jobs li { padding-left: 12px; }
  .rb-jobs li + li { margin-top: 14px; }
  .rb-job-heading h4 { font-size: 13px; }
  .rb-job-heading time { font-size: 9.5px; }
  .rb-jobs p { font-size: 12px; line-height: 1.7; margin-top: 3px; }
  .rb-jobs p.rb-job-role { font-size: 10px; margin-top: 1px; }
  .rb-job-role span { font-size: 8.5px; }
  .rb-skill-list { margin-top: 8px; }
  .rb-skill-list > div { grid-template-columns: 66px minmax(0, 1fr); gap: 8px; padding-top: 6px; }
  .rb-skill-list > div + div { margin-top: 7px; }
  .rb-skill-list dt { font-size: 11px; }
  .rb-skill-list dd { font-size: 11.5px; line-height: 1.7; }
  .rb-skill-list small { font-size: 9.5px; line-height: 1.55; margin-top: 1px; }
  .rb-main-stat { padding: 6px 0; }
  .rb-main-stat strong { font-size: 40px; }
  .rb-main-stat p { font-size: 9px; margin-top: 3px; }
  .rb-stats { padding-block: 7px; }
  .rb-stats dd { font-size: 19px; }
  .rb-stats dt { font-size: 8px; margin-top: 2px; }
  .rb-attribution { font-size: 8px; margin-top: 6px; }
  .rb-education-heading { margin-top: 4px; }
  .rb-education-heading h3 { font-size: 16px; }
  .rb-education-heading h3 span { font-size: 10px; margin-left: 8px; }
  .rb-education-heading time { font-size: 9.5px; }
  .rb-education p:not(.rb-label), .rb-strengths p:not(.rb-label) { font-size: 12.5px; line-height: 1.75; margin-top: 7px; }
  .rb-interest-tags { margin-top: 6px; gap: 4px; }
  .rb-interest-tags span { font-size: 9px; padding: 2px 8px; }
  .rb-resume-note { font-size: 8.5px; margin-top: 7px; }
  .rb-education .rb-content, .rb-strengths .rb-content { justify-content: center; }
  .rb-reach { margin-top: 10px; }
  .rb-primary { margin-top: auto; }
}





/* 文字入场：卡片结构不动，只让内容依次浮现 */
.rb-in {
  animation: rb-text-in .52s cubic-bezier(.22, .68, .28, 1) backwards;
  animation-delay: var(--d, 0ms);
}
@keyframes rb-text-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
/* 卡片本身不再做整块入场，避免与文字动画叠加 */
.rb-cell.is-entering { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .rb-in { animation: none; }
}

/* 矮屏笔记本：让整块简历仍然一屏放得下 */
@media (min-width: 1181px) and (max-height: 850px) {
  .resume-wrap { padding: 72px 0 8px; }
  .resume-heading { margin-bottom: 10px; padding-bottom: 8px; }
  .resume-heading h2 { font-size: 24px; }
  .resume-bento { height: auto; gap: 6px; }
  .rb-content { padding: 12px 14px; }
  .rb-person { margin-top: 8px; gap: 11px; }
  .rb-person img { width: 58px; height: 68px; }
  .rb-person h1 { font-size: 23px; }
  .rb-en { font-size: 7.5px; margin-top: 2px; }
  .rb-degree { font-size: 10px; margin-top: 3px; }
  .rb-role { font-size: 16px; margin-top: 9px; line-height: 1.35; }
  .rb-bio { font-size: 11.5px; line-height: 1.7; margin-top: 6px; }
  .rb-quick-facts { margin-top: 8px; padding-block: 7px; gap: 6px; }
  .rb-quick-facts dt { font-size: 8.5px; }
  .rb-quick-facts dd { font-size: 10.5px; }
  .rb-reach { margin-top: 6px; padding-top: 6px; }
  .rb-reach a { min-height: 30px; font-size: 10.5px; }
  .rb-primary { min-height: 32px; font-size: 10.5px; margin-top: 6px; }
  .rb-card-head h3 { font-size: 15px; }
  .rb-jobs { margin-top: 6px; }
  .rb-jobs li + li { margin-top: 8px; padding-top: 8px; }
  .rb-job-heading h4 { font-size: 12px; }
  .rb-jobs p { font-size: 11px; line-height: 1.6; margin-top: 2px; }
  .rb-skill-list { margin-top: 5px; }
  .rb-skill-list > div { padding-top: 4px; }
  .rb-skill-list dd { font-size: 10.5px; }
  .rb-main-stat { padding: 4px 0; }
  .rb-main-stat strong { font-size: 32px; }
  .rb-stats dd { font-size: 16px; }
  .rb-education-heading h3 { font-size: 15px; }
  .rb-education p:not(.rb-label), .rb-strengths p:not(.rb-label) { font-size: 11px; line-height: 1.65; margin-top: 4px; }
  .rb-interest-tags { margin-top: 5px; }
  .rb-resume-note { font-size: 8px; margin-top: 5px; }
}