/* 「关于我」杂志式简历页（js/aboutme.js）：网站弹层和 PDF 最后一页共用。
 * 设计尺寸 1920×1080，全部用 --u（= 1 设计像素）表示：PDF 里 --u = 1px；网页弹层里按窗口等比缩放（见 #about）。
 * 字体：自带在 vendor/fonts（Google Fonts，OFL 授权）——超粗大字 Archivo Black、窄体 Barlow Condensed、手写 Allura、中文粗体思源黑体子集。 */
@font-face { font-family: "AB Black"; src: url("../vendor/fonts/ArchivoBlack-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "AB Cond"; font-weight: 500; src: url("../vendor/fonts/BarlowCondensed-500.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "AB Cond"; font-weight: 700; src: url("../vendor/fonts/BarlowCondensed-700.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "AB Script"; src: url("../vendor/fonts/Allura-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "AB Hei"; font-weight: 700; src: url("../vendor/fonts/NotoSansSC-700.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "AB Hei"; font-weight: 900; src: url("../vendor/fonts/NotoSansSC-900.woff2") format("woff2"); font-display: swap; }

.ab-sheet {
  --ink: #f2ede6;
  --cn: "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --hei: "AB Hei", "PingFang SC", "Microsoft YaHei", sans-serif;
  position: relative; width: calc(1920 * var(--u)); height: calc(1080 * var(--u)); overflow: hidden; flex: none;
  color: var(--ink); font-family: var(--cn); font-weight: 400;
  background:
    linear-gradient(118deg, transparent 52%, rgba(255,255,255,.035) 58%, transparent 63%, rgba(255,255,255,.025) 69%, transparent 74%),
    radial-gradient(120% 90% at 85% 10%, #26231f 0%, #141210 60%);
}

/* 顶部导航行 + 右上角微信号（大号窄体 + 下划线） */
.ab-nav { position: absolute; left: calc(110 * var(--u)); top: calc(66 * var(--u)); display: grid; grid-template-columns: calc(330 * var(--u)) calc(400 * var(--u)) calc(380 * var(--u)) auto; font: 500 calc(22 * var(--u)) / 1 "AB Cond", "Bahnschrift", sans-serif; letter-spacing: .2em; opacity: .85; }
.ab-id { position: absolute; right: calc(110 * var(--u)); top: calc(40 * var(--u)); text-align: right; }
.ab-id b { display: inline-block; font: 700 calc(92 * var(--u)) / .9 "AB Cond", "Bahnschrift", sans-serif; letter-spacing: .02em; border-bottom: calc(5 * var(--u)) solid var(--ink); padding-bottom: calc(6 * var(--u)); }
.ab-id i { display: block; margin-top: calc(12 * var(--u)); font: normal 500 calc(16 * var(--u)) "AB Cond", sans-serif; letter-spacing: .5em; opacity: .5; }

/* 左侧照片：贴左边、出血到底边，黑白 */
.ab-photo { position: absolute; left: 0; top: calc(230 * var(--u)); width: calc(638 * var(--u)); height: calc(850 * var(--u)); margin: 0; overflow: hidden;
  background: linear-gradient(160deg, #3a3631 0%, #1d1b18 70%); display: flex; align-items: center; justify-content: center; }
.ab-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.06); }
.ab-photo span { font: 500 calc(18 * var(--u)) "AB Cond", sans-serif; letter-spacing: .6em; opacity: .35; }

/* 右侧主体 */
.ab-main { position: absolute; left: calc(760 * var(--u)); right: calc(110 * var(--u)); top: calc(272 * var(--u)); }
.ab-head { display: flex; align-items: flex-end; gap: calc(30 * var(--u)); }
.ab-big { margin: 0; font: 400 calc(178 * var(--u)) / .8 "AB Black", "Arial Black", sans-serif; letter-spacing: -.035em; white-space: nowrap; }
.ab-side { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding-bottom: calc(4 * var(--u)); white-space: nowrap; }
.ab-side u { font: 700 calc(30 * var(--u)) / 1 "AB Cond", sans-serif; letter-spacing: .04em; text-decoration-thickness: calc(3 * var(--u)); text-underline-offset: calc(5 * var(--u)); }
.ab-side b { font: 900 calc(40 * var(--u)) / 1.1 var(--hei); letter-spacing: .08em; }
.ab-script { margin: calc(4 * var(--u)) 0 0 calc(8 * var(--u)); font: 400 calc(66 * var(--u)) / 1 "AB Script", cursive; opacity: .42; }

.ab-roles { display: flex; align-items: center; gap: calc(20 * var(--u)); margin-top: calc(34 * var(--u)); font: 700 calc(36 * var(--u)) / 1 var(--hei); letter-spacing: .06em; }
.ab-roles svg { width: calc(52 * var(--u)); height: calc(52 * var(--u)); flex: none; }
.ab-roles em { font-style: normal; font-weight: 400; margin: 0 calc(18 * var(--u)); opacity: .8; }

.ab-lines { display: grid; grid-template-columns: calc(230 * var(--u)) 1fr; gap: calc(14 * var(--u)) 0; margin: calc(46 * var(--u)) 0 0; font-size: calc(28 * var(--u)); line-height: 1.5; letter-spacing: .06em; }
.ab-lines dt { font-weight: 400; }
.ab-lines dd { margin: 0; }

.ab-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(50 * var(--u)); margin-top: calc(38 * var(--u)); padding-top: calc(28 * var(--u)); border-top: calc(1 * var(--u)) solid rgba(242,237,230,.22); }
.ab-svc h4 { margin: 0; font: 700 calc(18 * var(--u)) / 1 "AB Cond", sans-serif; letter-spacing: .4em; opacity: .55; }
.ab-svc h4 em { font: normal 400 calc(15 * var(--u)) var(--cn); letter-spacing: .3em; margin-left: calc(14 * var(--u)); }
.ab-flow { margin-top: calc(16 * var(--u)); font: 700 calc(26 * var(--u)) / 1 var(--hei); letter-spacing: .1em; }
.ab-flow i { font-style: normal; font-weight: 400; margin: 0 calc(16 * var(--u)); opacity: .55; font-family: var(--cn); }
.ab-svc p { margin: calc(16 * var(--u)) 0 0; max-width: calc(720 * var(--u)); font-size: calc(18 * var(--u)); line-height: 1.8; letter-spacing: .05em; opacity: .68; }
.ab-tools { margin-top: calc(10 * var(--u)); font: 500 calc(18 * var(--u)) "AB Cond", sans-serif; letter-spacing: .14em; opacity: .5; }
.ab-tools i { font-style: normal; margin: 0 calc(10 * var(--u)); }
.ab-qr { flex: none; text-align: center; }
.ab-qr img { display: block; width: calc(148 * var(--u)); height: calc(148 * var(--u)); }
.ab-qr span { display: block; margin-top: calc(10 * var(--u)); font-size: calc(14 * var(--u)); letter-spacing: .3em; opacity: .6; }

/* ---------- 网站弹层：整张简历页等比缩放到窗口里 ---------- */
#about {
  --u: min(calc(100vw / 1920), calc(100vh / 1080));
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
  background: rgba(5,5,6,.9); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; transition: opacity .8s, visibility .8s;
}
body.about-open #about { opacity: 1; visibility: visible; }
#about .ab-sheet { box-shadow: 0 40px 120px rgba(0,0,0,.6); transform: translateY(18px) scale(.985); transition: transform 1.2s cubic-bezier(.16, 1, .3, 1); }
body.about-open #about .ab-sheet { transform: none; }
.ab-close { position: fixed; top: 26px; right: 4vw; z-index: 71; font: 400 13px "PingFang SC", "Microsoft YaHei UI", sans-serif; color: #f2ede6; letter-spacing: .3em; background: none; border: 0; cursor: pointer; opacity: .8; }
.ab-close em { font: normal 500 11px "AB Cond", "Bahnschrift", sans-serif; letter-spacing: .3em; opacity: .55; margin-left: 10px; }
.ab-close:hover { opacity: 1; }

/* 竖屏手机：改成上下排，内容往下滚（单位改回按屏宽） */
@media (max-aspect-ratio: 4/5) {
  #about { --u: calc(100vw / 860); display: block; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0; }
  #about .ab-sheet { width: 100%; height: auto; min-height: 100%; padding: calc(150 * var(--u)) 0 calc(90 * var(--u)); box-shadow: none; transform: none; }
  #about .ab-nav { display: none; }
  #about .ab-id { top: calc(40 * var(--u)); left: calc(56 * var(--u)); right: auto; text-align: left; }
  #about .ab-id b { font-size: calc(70 * var(--u)); }
  #about .ab-photo { position: relative; top: 0; width: calc(600 * var(--u)); height: calc(800 * var(--u)); margin-top: calc(110 * var(--u)); }
  #about .ab-main { position: relative; left: 0; right: 0; top: 0; padding: calc(70 * var(--u)) calc(56 * var(--u)) 0; }
  #about .ab-head { flex-wrap: wrap; }
  #about .ab-big { font-size: calc(150 * var(--u)); }
  #about .ab-lines { grid-template-columns: calc(230 * var(--u)) 1fr; font-size: calc(30 * var(--u)); }
  #about .ab-foot { flex-direction: column; align-items: flex-start; }
  #about .ab-svc p, #about .ab-svc .ab-flow { font-size: calc(26 * var(--u)); }
  #about .ab-qr img { width: calc(220 * var(--u)); height: calc(220 * var(--u)); }
  #about .ab-qr span { font-size: calc(22 * var(--u)); }
  .ab-close { top: calc(16px + env(safe-area-inset-top)); right: 20px; }
}

/* 星球页右上角入口 */
.about-btn { font-family: "PingFang SC", "Microsoft YaHei UI", sans-serif; font-size: 12px; letter-spacing: .3em; color: inherit; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; opacity: .85; transition: opacity .4s; }
.about-btn em { font: normal 300 10px "Bahnschrift", "Arial Narrow", sans-serif; letter-spacing: .3em; opacity: .6; }
.about-btn::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #c7a47a; box-shadow: 0 0 8px rgba(199,164,122,.7); }
.about-btn:hover { opacity: 1; }