/* greenbread.cn — 傅可心 个人求职站 */

:root {
  --bg: #12130f;
  --bg-elevated: #191b16;
  --bg-sunken: #0d0e0b;
  --line: #2a2d25;
  --line-strong: #3a3e33;
  --text: #e8e9e3;
  --text-secondary: #a7aa9d;
  --text-tertiary: #7c8073;
  --accent: #8fbf5f;
  --accent-dim: #5f7f3f;
  --accent-wash: rgba(143, 191, 95, 0.12);
  --max: 1080px;
  --radius: 4px;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

/* ===== 2026 portfolio hierarchy redesign ===== */
.portfolio-home { font-size: 16px; }
.portfolio-home .wrap { max-width: 1180px; }
.hero--editorial { min-height: calc(100vh - 56px); display:grid; grid-template-columns:minmax(0,1.45fr) minmax(260px,.55fr); gap:clamp(44px,7vw,96px); align-items:center; padding-top:72px; padding-bottom:72px; }
.hero--editorial h1 { font-size:clamp(44px,6.6vw,82px); line-height:1.05; letter-spacing:-.045em; margin:0 0 24px; max-width:850px; }
.hero--editorial h1 em { color:var(--accent); font-style:normal; }
.hero--editorial .hero__role { font-size:18px; margin-bottom:16px; }
.hero--editorial .hero__lede { font-size:17px; line-height:1.8; max-width:720px; }
.hero__portrait { margin:0; border:1px solid var(--line-strong); background:var(--bg-elevated); }
.hero__portrait img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center; filter:saturate(.9); }
.hero__portrait figcaption { display:flex; flex-direction:column; gap:3px; padding:15px 17px; font-size:14px; }
.hero__portrait figcaption span { color:var(--text-tertiary); font-size:13px; }
.hero__proof { display:grid; grid-template-columns:repeat(3,1fr); max-width:650px; margin:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.hero__proof div { display:flex; flex-direction:column; gap:2px; padding:15px 18px 15px 0; }
.hero__proof div+div { border-left:1px solid var(--line); padding-left:18px; }
.hero__proof strong { color:var(--text); font-size:22px; }
.hero__proof span { color:var(--text-tertiary); font-size:12px; }
.section-kicker { margin:0 0 10px; color:var(--accent); font-family:var(--mono); font-size:12px; letter-spacing:.14em; }
.intro-strip { padding-top:54px; padding-bottom:66px; }
.strength-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line-strong); }
.strength-grid article { position:relative; padding:30px 34px 4px 0; }
.strength-grid article+article { border-left:1px solid var(--line); padding-left:34px; }
.strength-grid article>span { font-family:var(--mono); color:var(--accent-dim); font-size:12px; }
.strength-grid h2 { margin:8px 0 12px; font-size:21px; }
.strength-grid p { color:var(--text-secondary); line-height:1.75; }
.section-title-row { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:38px; }
.section-title-row h2 { font-size:clamp(28px,3.5vw,44px); letter-spacing:-.035em; }
.section-title-row>p { max-width:460px; color:var(--text-secondary); line-height:1.75; }
.feature-project { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(360px,.75fr); min-height:560px; margin-bottom:46px; border:1px solid var(--line); background:var(--bg-elevated); overflow:hidden; }
.feature-project--secondary { grid-template-columns:minmax(360px,.75fr) minmax(0,1.25fr); }
.feature-project--secondary .feature-project__media { order:2; }
.feature-project__media { position:relative; display:block; min-height:100%; overflow:hidden; background:#0b0c09; }
.feature-project__media img { width:100%; height:100%; min-height:560px; object-fit:cover; display:block; transition:transform .45s ease, filter .3s ease; }
.feature-project__media:hover img { transform:scale(1.025); filter:brightness(1.08); }
.media-label { position:absolute; left:20px; top:20px; padding:6px 10px; color:#13150f; background:var(--accent); font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em; }
.feature-project__content { display:flex; flex-direction:column; justify-content:center; padding:clamp(34px,5vw,62px); }
.project-number { color:var(--accent); font-family:var(--mono); font-size:12px; }
.feature-project h3 { margin:8px 0 13px; font-size:clamp(34px,4vw,52px); letter-spacing:-.04em; }
.project-lead { font-size:17px; line-height:1.7; color:var(--text-secondary); }
.project-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:26px 0; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.project-facts div { display:flex; flex-direction:column; gap:4px; }
.project-facts b { color:var(--text-tertiary); font-size:11px; font-weight:500; }
.project-facts span { font-size:13px; }
.project-highlights { display:grid; gap:8px; margin-bottom:27px; }
.project-highlights li { color:var(--text-secondary); line-height:1.55; font-size:14px; }
.project-highlights b { color:var(--text); }
.text-link { display:inline-flex; align-items:center; gap:12px; width:max-content; color:var(--accent); font-weight:600; border-bottom:1px solid var(--accent-dim); padding-bottom:4px; }
.text-link span { transition:transform .2s ease; }.text-link:hover span{transform:translateX(4px)}
.evidence-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:18px; }
.experience-card,.stack-card { border:1px solid var(--line); background:var(--bg-elevated); padding:32px; }
.card-label { color:var(--accent); font:12px var(--mono); letter-spacing:.1em; margin-bottom:18px; }
.experience-card h3 { font-size:22px; margin-bottom:6px; }.experience-card .muted{color:var(--text-tertiary);font-size:13px;margin-bottom:24px}.experience-card>p:last-child{color:var(--text-secondary)}
.stack-lines p { display:grid; grid-template-columns:76px 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); }
.stack-lines p:last-child{border-bottom:0}.stack-lines b{font-size:13px}.stack-lines span{color:var(--text-secondary);font-size:14px}
.contact-panel { text-align:center; padding-top:90px; padding-bottom:100px; }
.contact-panel h2 { font-size:clamp(28px,4vw,48px); margin-bottom:16px; }.contact-panel>p:not(.section-kicker){max-width:700px;margin:0 auto;color:var(--text-secondary)}
.contact-links { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:28px; }.contact-links>*{border:1px solid var(--line-strong);padding:10px 15px;font-size:14px}
.case-jinglin .deep .block:nth-child(1){order:4}
.case-jinglin .deep .block:nth-child(2){order:1}
.case-jinglin .deep .block:nth-child(3){order:2}
.case-jinglin .deep .block:nth-child(4){order:3}
.responsibility-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.responsibility-grid article{border:1px solid var(--line);background:var(--bg-elevated);padding:24px}
.responsibility-grid article:first-child{grid-column:span 2}
.responsibility-grid article>span,.learning-grid article>span{font:12px var(--mono);color:var(--accent-dim);letter-spacing:.08em}
.responsibility-grid h3{font-size:17px;margin:8px 0 9px}.responsibility-grid p{color:var(--text-secondary);font-size:14px;line-height:1.7}
.learning-section{padding-top:82px;padding-bottom:82px}
.learning-intro{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end;margin-bottom:34px}
.learning-intro h2{font-size:clamp(28px,3.6vw,44px);line-height:1.25;letter-spacing:-.035em}
.learning-intro>p{color:var(--text-secondary);line-height:1.8}
.learning-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.learning-grid article{padding:26px 24px 28px 0}
.learning-grid article+article{border-left:1px solid var(--line);padding-left:24px}
.learning-grid h3{font-size:17px;margin:8px 0 10px}.learning-grid p{color:var(--text-secondary);font-size:14px;line-height:1.7}
.github-note-link{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:24px;padding:18px 20px;border:1px solid var(--accent-dim);background:var(--accent-wash)}
.github-note-link span{color:var(--text-secondary)}.github-note-link b{color:var(--accent);font-size:14px}
.page-hero { padding-top:72px; padding-bottom:32px; }
.page-hero h1 { font-size:clamp(48px,7vw,78px); letter-spacing:-.045em; margin-top:18px; }
.page-hero .hero__lede { font-size:17px; line-height:1.8; max-width:850px; }
.case-overview { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); border:1px solid var(--line); background:var(--bg-elevated); margin-bottom:40px; padding:0; }
.case-overview__media { margin:0; min-height:430px; overflow:hidden; background:var(--bg-sunken); }
.case-overview__media img { width:100%; height:100%; min-height:430px; display:block; object-fit:cover; }
.case-overview__summary { display:flex; flex-direction:column; justify-content:center; padding:clamp(30px,4vw,52px); }
.case-overview__summary h2 { font-size:clamp(26px,3.2vw,38px); line-height:1.35; letter-spacing:-.03em; margin-bottom:26px; }
.case-metrics { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); }
.case-metrics div { display:flex; flex-direction:column; gap:4px; padding:14px; background:var(--bg); }
.case-metrics b { font-size:13px; }.case-metrics span { color:var(--text-tertiary); font-size:12px; line-height:1.45; }
.shots { gap:18px; }.shot { transition:transform .2s ease,border-color .2s ease; }.shot:hover{transform:translateY(-3px);border-color:var(--line-strong)}
.shots--free .shot:first-child { grid-column:span 2; }.shots--free .shot:first-child .shot__frame{aspect-ratio:16/8.7}
.shots--lg .shot:first-child { grid-column:span 2; }.shots--lg .shot:first-child .shot__frame{aspect-ratio:16/8.7}

@media (max-width:900px){.hero--editorial{min-height:auto;grid-template-columns:1fr}.hero__portrait{max-width:360px}.feature-project,.feature-project--secondary{grid-template-columns:1fr}.feature-project--secondary .feature-project__media{order:0}.feature-project__media img{min-height:0;aspect-ratio:16/9}.evidence-grid{grid-template-columns:1fr}.case-overview{grid-template-columns:1fr}.case-overview__media,.case-overview__media img{min-height:0}.case-overview__media img{aspect-ratio:16/9}.learning-intro{grid-template-columns:1fr;gap:20px}.learning-grid{grid-template-columns:repeat(2,1fr)}.learning-grid article:nth-child(3){border-left:0;border-top:1px solid var(--line);padding-left:0}.learning-grid article:nth-child(4){border-top:1px solid var(--line)}}
@media (max-width:640px){.hero--editorial{padding-top:48px}.hero--editorial h1{font-size:42px}.hero__proof{grid-template-columns:1fr}.hero__proof div+div{border-left:0;border-top:1px solid var(--line);padding-left:0}.strength-grid{grid-template-columns:1fr}.strength-grid article+article{border-left:0;border-top:1px solid var(--line);padding-left:0}.section-title-row{display:block}.section-title-row>p{margin-top:16px}.feature-project__content{padding:28px 22px}.project-facts{grid-template-columns:1fr}.contact-links{flex-direction:column}.contact-links>*{width:100%}.responsibility-grid{grid-template-columns:1fr}.responsibility-grid article:first-child{grid-column:auto}.learning-grid{grid-template-columns:1fr}.learning-grid article+article,.learning-grid article:nth-child(3){border-left:0;border-top:1px solid var(--line);padding-left:0}.github-note-link{align-items:flex-start;flex-direction:column}}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.01em;
}

a {
  color: var(--text);
  text-decoration: none;
}

a:hover {
  color: var(--accent);
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

code {
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--text-secondary);
}

/* ---------- 布局 ---------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 28px;
}

.section {
  padding: 72px 0;
  border-top: 1px solid var(--line);
}

.section--flush {
  border-top: none;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 32px;
}

.section-head h2 {
  font-size: 22px;
}

.section-head .idx {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--accent-dim);
  letter-spacing: 0.08em;
}

.section-note {
  margin-top: -18px;
  margin-bottom: 30px;
  color: var(--text-secondary);
  max-width: 68ch;
}

/* ---------- 顶栏 ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(18, 19, 15, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 56px;
}

.brand {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
}

.brand b {
  color: var(--text);
  font-weight: 600;
}

.nav {
  display: flex;
  gap: 22px;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.nav a.is-active {
  color: var(--accent);
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text-secondary);
  font-size: 12px;
  padding: 5px 10px;
  cursor: pointer;
}

/* ---------- 首屏 ---------- */

.hero {
  padding: 84px 0 76px;
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 40px;
  align-items: start;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}

.hero h1 {
  font-size: 40px;
  margin-bottom: 10px;
}

.hero__role {
  font-size: 19px;
  color: var(--text);
  margin-bottom: 20px;
}

.hero__role span {
  color: var(--text-tertiary);
}

.hero__lede {
  color: var(--text-secondary);
  max-width: 62ch;
  margin-bottom: 26px;
}

.hero__lede strong {
  color: var(--text);
  font-weight: 600;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 26px;
}

.chip {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.chip--solid {
  background: var(--accent-wash);
  border-color: var(--accent-dim);
  color: var(--accent);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--radius);
  border: 1px solid var(--line-strong);
  font-size: 14px;
  color: var(--text);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.btn:hover {
  border-color: var(--accent-dim);
  color: var(--accent);
}

.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #14170f;
  font-weight: 600;
}

.btn--primary:hover {
  background: #a1cd74;
  border-color: #a1cd74;
  color: #14170f;
}

.portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
}

.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 求职意向 ---------- */

.targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.target {
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent-dim);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  padding: 16px 18px;
}

.target h3 {
  font-size: 15px;
  margin-bottom: 5px;
}

.target p {
  font-size: 13.5px;
  color: var(--text-secondary);
}

/* ---------- 关于 ---------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 44px;
}

.prose > * + * {
  margin-top: 16px;
}

.prose p {
  color: var(--text-secondary);
}

.prose strong {
  color: var(--text);
  font-weight: 600;
}

.factsheet {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  padding: 6px 18px;
}

.factsheet dl {
  margin: 0;
}

.factsheet div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}

.factsheet div:last-child {
  border-bottom: none;
}

.factsheet dt {
  color: var(--text-tertiary);
  white-space: nowrap;
}

.factsheet dd {
  margin: 0;
  text-align: right;
  color: var(--text);
}

/* ---------- 项目卡 ---------- */

.projects {
  display: grid;
  gap: 22px;
}

.project {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  overflow: hidden;
}

.project__cover {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--line);
}

.project__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project__body {
  padding: 24px 26px 26px;
}

.project__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.project__body h3 {
  font-size: 21px;
}

.project__kind {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dim);
}

.project__sub {
  color: var(--text-tertiary);
  font-size: 13.5px;
  margin-bottom: 16px;
}

.project__desc {
  color: var(--text-secondary);
  max-width: 74ch;
}

.bullets {
  margin: 18px 0 0;
  display: grid;
  gap: 9px;
}

.bullets li {
  position: relative;
  padding-left: 18px;
  color: var(--text-secondary);
  font-size: 14px;
}

.bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-dim);
}

.bullets strong {
  color: var(--text);
  font-weight: 600;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 20px;
}

.tag {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-tertiary);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 3px 8px;
}

.project--wip {
  border-style: dashed;
  background: transparent;
}

.project--wip .project__cover {
  background: repeating-linear-gradient(
    -45deg,
    var(--bg-sunken),
    var(--bg-sunken) 12px,
    #101109 12px,
    #101109 24px
  );
}

.wip-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  border: 1px dashed var(--line-strong);
  border-radius: 3px;
  padding: 3px 9px;
}

/* ---------- 表格 ---------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 620px;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
}

thead th {
  background: var(--bg-sunken);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody th {
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

td {
  color: var(--text-secondary);
}

/* ---------- 技术栈 ---------- */

.stack {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.stack__group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
}

.stack__group h3 {
  font-size: 12.5px;
  font-family: var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: 10px;
}

.stack__group li {
  font-size: 13.5px;
  color: var(--text-secondary);
  padding: 3px 0;
}

/* ---------- 联系 ---------- */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.contact-list {
  display: grid;
  gap: 12px;
}

.contact-list a,
.contact-list span {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
  background: var(--bg-elevated);
}

.contact-list .k {
  color: var(--text-tertiary);
  font-family: var(--mono);
  font-size: 12.5px;
}

.contact-list .v {
  color: var(--text);
}

.contact-list a:hover .v {
  color: var(--accent);
}

/* ---------- 页脚 ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 26px 0 40px;
  color: var(--text-tertiary);
  font-size: 13px;
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- 项目深页 ---------- */

.page-hero {
  padding: 64px 0 40px;
}

.back-link {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text-tertiary);
}

.back-link:hover {
  color: var(--accent);
}

.page-hero h1 {
  font-size: 32px;
  margin: 20px 0 12px;
}

.page-hero .hero__lede {
  margin-bottom: 22px;
}

/* 条目数量不固定，用自适应卡片，避免最后一行出现空格子 */
.spec {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.spec div {
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 18px;
}

.spec dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 5px;
}

.spec dd {
  margin: 0;
  font-size: 14px;
}

.scope {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.scope__col {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: var(--bg-elevated);
}

.scope__col h3 {
  font-size: 14.5px;
  margin-bottom: 10px;
}

.scope__col p {
  font-size: 13.5px;
  color: var(--text-secondary);
}

.scope__col--own {
  border-left: 2px solid var(--accent);
}

.scope__col--part {
  border-left: 2px solid var(--line-strong);
}

.scope__col--out {
  border-left: 2px solid #6b4a3a;
}

.deep {
  display: grid;
  gap: 22px;
}

.block {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  padding: 26px 28px;
}

.block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.block__head h3 {
  font-size: 19px;
}

.block__label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  background: var(--accent-wash);
  border-radius: 3px;
  padding: 3px 9px;
}

.qa {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.qa__item .q {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 4px;
}

.qa__item .a {
  font-size: 13.5px;
  color: var(--text-secondary);
}

.shots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.shots--lg {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.shots--lg .shot__frame {
  aspect-ratio: 4 / 3;
}

.shots--lg .shot figcaption {
  padding: 14px 16px;
  font-size: 14px;
}

/* 大图画廊：按原始比例完整显示，不裁切，竖屏与横屏截图都能混排 */
.shots--free {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.shots--free .shot__frame {
  aspect-ratio: auto;
}

.shots--free .shot__frame img {
  height: auto;
  object-fit: contain;
}

/* 图还没放时给个比例，占位框才有高度 */
.shots--free .shot__frame.img-missing {
  aspect-ratio: 4 / 3;
}

.shots--free .shot figcaption {
  padding: 14px 16px;
  font-size: 14px;
}

.shot {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-elevated);
}

.shot__frame {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--bg-sunken);
}

.shot__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot figcaption {
  padding: 11px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  border-top: 1px solid var(--line);
}

.callout {
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent-wash);
  padding: 18px 22px;
}

.callout h3 {
  font-size: 14.5px;
  margin-bottom: 8px;
}

.callout p,
.callout li {
  color: var(--text-secondary);
  font-size: 14px;
}

/* ---------- 图片占位 ---------- */

.ph {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 12px;
  color: var(--text-tertiary);
  background-image: linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.02) 25%,
      transparent 25%,
      transparent 75%,
      rgba(255, 255, 255, 0.02) 75%
    ),
    linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.02) 25%,
      transparent 25%,
      transparent 75%,
      rgba(255, 255, 255, 0.02) 75%
    );
  background-size: 18px 18px;
  background-position: 0 0, 9px 9px;
}

.ph b {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-secondary);
  word-break: break-all;
}

.ph i {
  font-style: normal;
  font-size: 11px;
}

.img-missing img {
  display: none;
}

.img-missing .ph {
  display: flex;
}

/* ---------- 响应式 ---------- */

@media (max-width: 900px) {
  .hero__grid,
  .about,
  .contact {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .portrait {
    max-width: 220px;
  }

  .spec,
  .stack,
  .scope,
  .shots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .wrap {
    padding: 0 18px;
  }

  .hero {
    padding: 52px 0 44px;
  }

  .hero h1 {
    font-size: 30px;
  }

  .section {
    padding: 52px 0;
  }

  .targets,
  .spec,
  .stack,
  .scope,
  .shots {
    grid-template-columns: minmax(0, 1fr);
  }

  .nav {
    display: none;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--line);
    padding: 8px 18px 14px;
  }

  .nav.is-open {
    display: flex;
  }

  .nav a {
    padding: 9px 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-toggle {
    display: block;
  }

  .block,
  .project__body {
    padding: 20px;
  }
}

/* ---------- 打印 / 导出 PDF ---------- */

@page {
  size: A4;
  margin: 14mm 12mm;
  background: #12130f;
}

@media print {
  html, body {
    scroll-behavior: auto;
    background: var(--bg) !important;
    color: var(--text);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body {
    font-size: 10.5pt;
    line-height: 1.6;
  }

  /* PDF 单独分享时保留联系方式 */
  body::before {
    content: "傅可心 · 游戏客户端开发（Unity）· 3134187431@qq.com · 南京 · greenbread.cn · github.com/Fukekee";
    display: block;
    padding-bottom: 6pt;
    margin-bottom: 12pt;
    border-bottom: 1px solid var(--line-strong);
    font-size: 9pt;
    color: var(--text-secondary);
  }

  /* 屏幕交互件不进纸面 */
  .topbar,
  .nav,
  .nav-toggle,
  .actions,
  .back-link,
  .project--wip,
  .ph {
    display: none !important;
  }

  /* 缺图时不留空框：整块隐藏而不是印出占位 */
  .img-missing,
  .shot:has(.img-missing),
  .shots-empty {
    display: none !important;
  }

  .wrap {
    max-width: none;
    padding: 0;
  }

  .hero,
  .page-hero {
    padding: 0 0 12pt;
  }

  .section {
    padding: 14pt 0;
    border-top: 1px solid var(--line);
  }

  .section-note {
    margin-top: -6pt;
    margin-bottom: 10pt;
  }

  .hero h1 {
    font-size: 22pt;
  }

  .page-hero h1 {
    font-size: 19pt;
  }

  .section-head h2 {
    font-size: 13pt;
  }

  .project__body h3,
  .block__head h3 {
    font-size: 13pt;
  }

  .portrait {
    max-width: 34mm;
  }

  /* 大屏的最小列宽在 A4 上会溢出，打印改用单列项目卡。 */
  .hero--editorial { min-height: 0; display: block; padding: 0 0 16pt; }
  .hero--editorial h1 { font-size: 25pt; }
  .hero__portrait { display: none; }
  .feature-project,
  .feature-project--secondary { display: block; min-height: 0; margin-bottom: 18pt; }
  .feature-project__media { min-height: 0; }
  .feature-project__media img { width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; object-fit: cover; }
  .feature-project__content { display: block; padding: 16pt; }
  .feature-project h3 { font-size: 23pt; }
  .case-overview { display: block; }
  .case-overview__media,
  .case-overview__media img { min-height: 0; }
  .case-overview__media img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
  .case-overview__summary { display: block; padding: 16pt; }
  .learning-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 卡片与问答不跨页断开 */
  .project,
  .feature-project,
  .responsibility-grid article,
  .learning-grid article,
  .block,
  .target,
  .scope__col,
  .stack__group,
  .callout,
  .qa__item,
  .factsheet,
  .shot,
  tr {
    break-inside: avoid;
  }

  /* 表格按纸宽收，不再横向滚动裁掉右侧 */
  .table-scroll {
    overflow: visible;
  }

  table {
    min-width: 0;
    table-layout: fixed;
    font-size: 8.5pt;
  }

  th,
  td {
    padding: 4pt 6pt;
    word-break: break-word;
  }

  thead {
    display: table-header-group;
  }

  thead th {
    white-space: normal;
  }

  tbody th {
    white-space: normal;
  }

  .shots,
  .shots--lg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8pt;
  }

  a {
    color: var(--text);
  }

  .text-link,
  .github-note-link b { color: var(--accent); }

  .footer {
    padding: 10pt 0 0;
    border-top: 1px solid var(--line);
  }

  /* 大节另起一页；若想更紧凑可删掉这条 */
  #work,
  #deep,
  #eng {
    break-before: page;
  }
}