:root {
  --ink: #0b2f4b;
  --paper: #f8f4ec;
  --white: #fffdfa;
  --accent: #c85b2c;
  --accent-soft: #f4e3d7;
  --line: #ded6c8;
  --muted: #6f7775;
  --page: 1240px;
  --font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
}

body.detail-page,
body.portfolio-page {
  margin: 0;
  color: #263638;
  background: var(--paper);
  font-family: var(--font-ui);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.detail-page .material-symbols-rounded,
.portfolio-page .material-symbols-rounded { font-family: "Material Symbols Rounded"; }

.detail-page h1,
.detail-page h2,
.detail-page h3,
.portfolio-page h1,
.portfolio-page h2,
.portfolio-page h3 {
  color: var(--ink);
  font-family: var(--font-ui);
  font-weight: 650;
  letter-spacing: -.02em;
}

.detail-page .site-header,
.portfolio-page .site-header {
  height: 76px;
  padding: 0 max(28px, calc((100vw - var(--page)) / 2));
  border-bottom: 1px solid var(--line);
  background: rgba(248, 244, 236, .94);
  backdrop-filter: blur(14px);
}

.detail-page .brand,
.portfolio-page .brand {
  gap: 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 650;
}
.detail-page .header-home-quote,
.portfolio-page .header-home-quote {
  color: #737b76;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  transition: color .2s ease, transform .2s ease;
}
.detail-page .header-home-quote:hover,
.portfolio-page .header-home-quote:hover { color: var(--rust, #c85b2c); transform: translateX(3px); }
.header-home-quote .home-quote-short { display: none; }

.detail-page .brand-mark,
.portfolio-page .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  color: #fff;
  background: var(--rust, #c85b2c);
  font-size: 10px;
  font-weight: 700;
}

.detail-page .site-header nav,
.portfolio-page .site-header nav {
  display: grid;
  width: 268px;
  height: 100%;
  grid-template-columns: 82px 82px 68px;
  gap: 18px;
  font-size: 14px;
}

.detail-page .nav-link,
.portfolio-page .nav-link {
  display: grid;
  height: 100%;
  place-items: center;
  padding: 26px 0 22px;
  color: #555d5a;
  font-weight: 600;
}

.detail-page .nav-link.active,
.portfolio-page .nav-link.active { color: var(--ink); border-bottom-color: var(--accent); }
.detail-page .nav-portfolio,
.portfolio-page .nav-portfolio { display: block; height: 100%; }
.detail-page .nav-portfolio > .nav-link,
.portfolio-page .nav-portfolio > .nav-link { width: 100%; }

.detail-page .nav-submenu,
.portfolio-page .nav-submenu {
  top: 66px;
  border-color: var(--line);
  border-radius: 7px;
  background: var(--white);
}

.detail-page .nav-submenu a:hover,
.portfolio-page .nav-submenu a:hover,
.detail-page .nav-submenu a.active,
.portfolio-page .nav-submenu a.active { color: var(--rust, #c85b2c); background: #f7eee7; }

/* Detailed resume */
.detail-page .original-resume { max-width: var(--page); padding: 64px 28px 90px; }
.detail-page .original-resume-hero {
  align-items: center;
  padding: 0 0 42px;
  border-bottom-color: var(--line);
}
.detail-page .original-resume-hero h1 { margin: 0 0 16px; font-size: 38px; line-height: 1.2; }
.detail-page .original-resume-hero p { margin: 5px 0; color: #626c69; font-size: 13px; }
.detail-page .original-resume-hero p:first-of-type { color: var(--ink); font: 500 13px/1.7 var(--font-ui); }
.detail-page .original-resume-hero .button {
  width: 170px;
  min-width: 0;
  padding: 12px 16px;
  border-color: var(--ink);
  border-radius: 6px;
  color: var(--ink);
  background: transparent;
}
.detail-page .original-resume-hero .button:hover { color: #fff; background: var(--ink); }
.detail-page .original-resume-layout { grid-template-columns: 200px minmax(0,1fr); gap: 52px; }
.detail-page .original-resume-toc {
  top: 102px;
  margin-top: 46px;
  padding: 18px;
  border-color: var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 7px;
  background: rgba(255,253,250,.78);
  box-shadow: none;
}
.detail-page .original-resume-toc > p { color: #7a7770; border-bottom-color: var(--line); }
.detail-page .original-resume-toc a { border-radius: 5px; color: #465250; font-size: 13px; }
.detail-page .original-resume-toc a span { color: var(--accent); font: 600 11px/1 var(--font-ui); }
.detail-page .original-resume-toc a:hover,
.detail-page .original-resume-toc a:focus-visible { color: var(--ink); background: #f4e8de; }
.detail-page .original-section { padding: 46px 0; border-bottom-color: var(--line); }
.detail-page .original-section > h2 {
  position: relative;
  margin: 0 0 25px;
  padding-left: 16px;
  font-size: 24px;
  line-height: 1.35;
}
.detail-page .original-section > h2::before {
  position: absolute;
  top: .2em;
  bottom: .2em;
  left: 0;
  width: 3px;
  background: var(--accent);
  content: "";
}
.detail-page .original-section > p { color: #4f5b58; font-size: 14px; line-height: 1.95; }
.detail-page .original-experience {
  margin-top: 15px;
  padding: 25px 27px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 7px;
  background: rgba(255,253,250,.82);
  box-shadow: none;
}
.detail-page .original-experience > header { border-bottom-color: #e5ddd1; }
.detail-page .original-experience h3 { color: var(--ink); font-size: 18px; font-weight: 650; }
.detail-page .original-experience header p { color: #757b78; font-size: 12px; }
.detail-page .original-experience time,
.detail-page .original-compact-experience time,
.detail-page .original-education time { color: var(--rust, #c85b2c); font: 500 12px/1.6 var(--font-ui); }
.detail-page .original-experience > p { color: #4f5a57; font-size: 14px; line-height: 1.9; }
.detail-page .original-experience > ul { color: #4f5a57; font-size: 13.5px; line-height: 1.9; }
.detail-page .original-experience li::marker { color: var(--accent); }
.detail-page .original-experience:target,
.detail-page .original-compact-experience article:target { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200,91,44,.12); }
.detail-page .original-compact-experience article,
.detail-page .original-education article,
.detail-page .original-attachments article {
  border-color: var(--line);
  border-radius: 7px;
  background: rgba(255,253,250,.82);
}
.detail-page .original-attachments { gap: 12px; }
.detail-page .attachment-intro { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: -4px 0 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 7px; background: #f4ece2; }
.detail-page .attachment-intro p { margin: 0; color: #56615e; font-size: 12px; line-height: 1.7; }
.detail-page .attachment-intro a { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 10px 13px; border-radius: 5px; color: #fff; background: var(--accent); font-size: 11px; font-weight: 600; }
.detail-page .attachment-intro a:hover { background: #a9421c; }
.detail-page .attachment-intro .material-symbols-rounded { font-size: 17px; }
.detail-page .original-attachments .attachment-card { display: grid; min-height: 126px; grid-template-columns: minmax(0,1fr) auto; gap: 18px; align-items: end; padding: 20px 22px; border: 1px solid var(--line); border-top: 2px solid var(--accent); border-radius: 7px; background: rgba(255,253,250,.82); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.detail-page .original-attachments .attachment-card:hover { border-color: #d5b39f; box-shadow: 0 12px 26px rgba(11,47,75,.07); transform: translateY(-2px); }
.detail-page .attachment-card h3 { color: var(--ink); }
.detail-page .attachment-card > span { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-size: 10px; font-weight: 600; white-space: nowrap; }
.detail-page .attachment-card > span i { font-size: 16px; font-style: normal; transition: transform .2s ease; }
.detail-page .attachment-card:hover > span i { transform: translateX(3px); }

/* Portfolio */
.portfolio-page { --page: 1240px; }
.portfolio-page main { overflow: visible; }
.portfolio-page .portfolio-hero {
  max-width: var(--page);
  padding: 64px 28px 38px;
  border-bottom: 1px solid var(--line);
}
.portfolio-page .portfolio-hero .section-index,
.portfolio-page .portfolio-section-heading .section-index,
.portfolio-page .knowledge-kicker { color: var(--accent); font: 650 11px/1.4 var(--font-ui); letter-spacing: .11em; }
.portfolio-page .portfolio-hero h1 { font-size: clamp(30px,3vw,40px); line-height: 1.3; }
.portfolio-page .portfolio-hero h1 span { color: #63706d; font-size: .55em; font-weight: 500; }
.portfolio-page .portfolio-hero > div > p:not(.section-index) { color: #606a67; font-size: 14px; }
.portfolio-page .portfolio-hero time { color: #858983; font: 500 11px/1.6 var(--font-ui); }
.portfolio-page .portfolio-download {
  padding: 12px 16px;
  border-color: var(--ink);
  border-radius: 6px;
  color: var(--ink);
  background: transparent;
  font-size: 12px;
}
.portfolio-page .portfolio-download:hover { color: #fff; border-color: var(--ink); background: var(--ink); }
.portfolio-page .knowledge-feature {
  max-width: calc(var(--page) - 56px);
  margin-top: 36px;
  margin-bottom: 58px;
  padding: 24px;
  border-color: var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: rgba(255,253,250,.82);
  box-shadow: none;
}
.portfolio-page .knowledge-feature:hover { border-color: var(--line); border-left-color: var(--accent); box-shadow: 0 14px 32px rgba(11,47,75,.07); }
.portfolio-page .knowledge-feature figure { border-radius: 5px; background: var(--ink); }
.portfolio-page .knowledge-feature figure { display: grid; height: auto; grid-template-rows: auto auto; gap: 6px; padding: 6px; border: 1px solid var(--line); background: var(--white); }
.portfolio-page .knowledge-feature figure img { width: 100%; height: auto; aspect-ratio: 1790 / 723; object-fit: contain; border-radius: 3px; background: #f6f1e8; }
.portfolio-page .knowledge-feature figcaption { position: static; margin: 0; padding: 11px 13px; border-radius: 4px; background: var(--ink); }
.portfolio-page .knowledge-feature figcaption b { margin-top: 4px; font-size: 11px; line-height: 1.5; }
.portfolio-page .knowledge-heading h2 { color: var(--ink); font-size: 21px; }
.portfolio-page .knowledge-heading span,
.portfolio-page .knowledge-topics li,
.portfolio-page .project-copy > span,
.portfolio-page .portfolio-ai-note strong { color: #94411e; background: #f4e3d7; }
.portfolio-page .knowledge-topics .material-symbols-rounded,
.portfolio-page .project-action .material-symbols-rounded { color: var(--accent); }
.portfolio-page .knowledge-stats dt { color: var(--ink); font: 600 19px/1.3 var(--font-ui); }
.portfolio-page .knowledge-action > a { border-radius: 6px; background: var(--accent); }
.portfolio-page .knowledge-action > a:hover { background: #a9421c; }
.portfolio-page .knowledge-action > a.knowledge-index-link {
  margin-bottom: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  color: var(--ink);
  background: var(--white);
}
.portfolio-page .knowledge-action > a.knowledge-index-link:hover { border-color: #d3a58d; color: var(--accent); background: #fffaf5; }
.portfolio-page .knowledge-index-link > span:first-child { display: grid; gap: 1px; text-align: left; }
.portfolio-page .knowledge-index-link b { font-size: 11px; font-weight: 650; }
.portfolio-page .knowledge-index-link small { margin: 0; color: #7b817e; font-size: 9px; font-weight: 400; }
.portfolio-page .knowledge-open-note { display: block; margin-top: 8px; }
.portfolio-page .knowledge-map-section {
  display: grid;
  max-width: calc(var(--page) - 56px);
  grid-template-columns: minmax(0,.92fr) minmax(380px,1.08fr);
  gap: 42px;
  align-items: center;
  margin: 0 auto 64px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,253,250,.68);
}
.portfolio-page .knowledge-map-copy .section-index { margin: 0 0 10px; color: var(--accent); font: 650 11px/1.4 var(--font-ui); letter-spacing: .11em; }
.portfolio-page .knowledge-map-copy h2 { margin: 0; font-size: 25px; line-height: 1.35; }
.portfolio-page .knowledge-map-lead { margin: 13px 0 22px; color: #56625f; font-size: 13px; line-height: 1.85; }
.portfolio-page .knowledge-map-points { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.portfolio-page .knowledge-map-points li { display: grid; grid-template-columns: 28px 1fr; gap: 11px; align-items: start; }
.portfolio-page .knowledge-map-points > li > .material-symbols-rounded { color: var(--accent); font-size: 22px; }
.portfolio-page .knowledge-map-points b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 13px; font-weight: 650; }
.portfolio-page .knowledge-map-points p { margin: 0; color: #69726f; font-size: 11px; line-height: 1.75; }
.portfolio-page .knowledge-map-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.portfolio-page .knowledge-map-actions button,
.portfolio-page .knowledge-map-actions a { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 6px; color: var(--ink); background: transparent; font: 600 11px/1 var(--font-ui); cursor: pointer; }
.portfolio-page .knowledge-map-actions button { color: #fff; border-color: var(--accent); background: var(--accent); }
.portfolio-page .knowledge-map-actions button:hover { border-color: #a9421c; background: #a9421c; }
.portfolio-page .knowledge-map-actions a:hover { color: #fff; background: var(--ink); }
.portfolio-page .knowledge-map-actions .material-symbols-rounded { font-size: 17px; }
.portfolio-page .knowledge-map-preview { position: relative; display: block; height: 430px; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; cursor: zoom-in; }
.portfolio-page .knowledge-map-image { position: absolute; inset: 0; display: block; overflow: hidden; }
.portfolio-page .knowledge-map-image img { width: 100%; height: auto; transform: translateY(-20%); transition: transform .35s ease; }
.portfolio-page .knowledge-map-preview:hover .knowledge-map-image img { transform: translateY(-20%) scale(1.018); }
.portfolio-page .knowledge-map-caption { position: absolute; right: 14px; bottom: 14px; left: 14px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 12px 14px; border-radius: 6px; color: #fff; background: rgba(11,47,75,.94); text-align: left; }
.portfolio-page .knowledge-map-caption b { font-size: 12px; font-weight: 650; }
.portfolio-page .knowledge-map-caption small { grid-column: 1; color: rgba(255,255,255,.72); font-size: 9px; }
.portfolio-page .knowledge-map-caption > .material-symbols-rounded { grid-column: 2; grid-row: 1 / 3; font-size: 22px; }
.knowledge-map-dialog { width: min(92vw, 1080px); height: min(90vh, 900px); max-height: none; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; color: #263638; background: var(--paper); box-shadow: 0 30px 90px rgba(3,36,58,.28); }
.knowledge-map-dialog::backdrop { background: rgba(3,36,58,.62); backdrop-filter: blur(5px); }
.knowledge-map-dialog > header { display: flex; min-height: 86px; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.knowledge-map-dialog > header p { margin: 0 0 3px; color: var(--accent); font: 650 9px/1.4 var(--font-ui); letter-spacing: .1em; }
.knowledge-map-dialog > header h2 { margin: 0; color: var(--ink); font: 650 18px/1.35 var(--font-ui); }
.knowledge-map-heading > span { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; color: var(--muted); font-size: 10px; }
.knowledge-map-heading > span .material-symbols-rounded { color: var(--accent); font-size: 14px; }
.knowledge-map-toolbar { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }
.knowledge-map-toolbar output { min-width: 42px; color: var(--ink); font: 650 10px/1 var(--font-ui); text-align: center; }
.knowledge-map-dialog > header button { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--white); cursor: pointer; }
.knowledge-map-dialog > header button:disabled { color: #a7aeac; cursor: not-allowed; opacity: .58; }
.knowledge-map-dialog > header button:hover:not(:disabled) { color: #fff; border-color: var(--accent); background: var(--accent); }
.knowledge-map-dialog > header .knowledge-map-close { width: 40px; height: 40px; margin-left: 6px; }
.knowledge-map-dialog .knowledge-map-scroll { height: calc(100% - 86px); overflow: auto; overscroll-behavior: contain; background: #fff; scrollbar-gutter: stable; }
.knowledge-map-dialog .knowledge-map-scroll img { display: block; width: min(900px, 100%); max-width: none; height: auto; margin: 0 auto; transform-origin: top center; }
.portfolio-page .portfolio-channels,
.portfolio-page .portfolio-projects { max-width: var(--page); }
.portfolio-page .portfolio-section-heading { margin-bottom: 20px; }
.portfolio-page .portfolio-section-heading h2 { color: var(--ink); font-size: 23px; }
.portfolio-page .channel-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.portfolio-page .channel {
  min-height: 170px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(255,253,250,.82);
  box-shadow: none;
}
.portfolio-page .channel:hover { border-color: #d3a58d; background: #fffaf5; box-shadow: 0 12px 28px rgba(11,47,75,.07); }
.portfolio-page .channel::after { color: var(--accent); }
.portfolio-page .channel span { color: var(--accent); font-size: 13px; }
.portfolio-page .channel h3 { color: var(--ink); font-size: 16px; font-weight: 650; }
.portfolio-page .channel p { color: #69716f; }
.portfolio-page .portfolio-project-grid { gap: 14px; }
.portfolio-page .portfolio-project {
  min-height: 190px;
  padding: 17px;
  border-color: var(--line);
  border-radius: 7px;
  background: rgba(255,253,250,.82);
}
.portfolio-page .portfolio-project:hover { border-color: #d3a58d; box-shadow: 0 12px 28px rgba(11,47,75,.07); }
.portfolio-page .project-qr { border-color: var(--line); border-radius: 4px; }
.portfolio-page .project-copy h3 { color: var(--ink); font-size: 15px; }
.portfolio-page .project-copy p { color: #626d69; }
.portfolio-page .project-action { color: #87401f; }

.detail-page footer.site-footer,
.portfolio-page footer.site-footer {
  border-top: 0;
  background: var(--ink);
  color: rgba(255,255,255,.65);
}
.detail-page .footer-brand strong,
.portfolio-page .footer-brand strong { color: #fff; }
.detail-page .footer-nav a,
.portfolio-page .footer-nav a { color: rgba(255,255,255,.72); }
.detail-page .footer-nav a.active,
.portfolio-page .footer-nav a.active { color: #fff; border-bottom-color: #f28b55; }

@media (max-width: 900px) {
  .detail-page .site-header,
  .portfolio-page .site-header { padding: 0 24px; }
  .detail-page .original-resume-layout { grid-template-columns: 170px minmax(0,1fr); gap: 28px; }
  .portfolio-page .knowledge-feature { grid-template-columns: 240px minmax(0,1fr); }
  .portfolio-page .knowledge-map-section { grid-template-columns: 1fr; }
  .portfolio-page .knowledge-map-preview { height: 480px; }
  .portfolio-page .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .detail-page .site-header,
  .portfolio-page .site-header { height: 62px; padding: 0 16px; }
  .detail-page .header-home-quote .home-quote-full,
  .portfolio-page .header-home-quote .home-quote-full { display: none; }
  .detail-page .header-home-quote .home-quote-short,
  .portfolio-page .header-home-quote .home-quote-short { display: inline; color: var(--rust, #c85b2c); font-size: 12px; font-weight: 650; }
  .detail-page .site-header nav,
  .portfolio-page .site-header nav { width: 250px; grid-template-columns: 76px 76px 62px; gap: 18px; }
  .detail-page .nav-link,
  .portfolio-page .nav-link { padding: 21px 0 17px; font-size: 12px; }
  .detail-page .original-resume { padding: 40px 18px 65px; }
  .detail-page .original-resume-hero h1 { font-size: 30px; }
  .detail-page .original-resume-layout { display: block; }
  .detail-page .original-resume-toc { position: static; margin: 22px 0 4px; }
  .detail-page .original-section > h2 { font-size: 21px; }
  .detail-page .original-experience { padding: 20px 18px; }
  .detail-page .attachment-intro { display: block; }
  .detail-page .attachment-intro a { width: 100%; justify-content: center; margin-top: 13px; }
  .detail-page .original-attachments .attachment-card { min-height: 0; grid-template-columns: 1fr; gap: 14px; }
  .detail-page .attachment-card > span { justify-self: start; }
  .portfolio-page .portfolio-hero { padding: 40px 18px 28px; }
  .portfolio-page .portfolio-hero h1 { font-size: 28px; }
  .portfolio-page .knowledge-feature { display: block; margin: 28px 18px 44px; padding: 16px; }
  .portfolio-page .knowledge-map-section { display: block; margin: 0 18px 48px; padding: 20px 18px; }
  .portfolio-page .knowledge-map-copy h2 { font-size: 21px; }
  .portfolio-page .knowledge-map-preview { height: 430px; margin-top: 26px; }
  .portfolio-page .knowledge-map-actions { display: grid; grid-template-columns: 1fr; }
  .portfolio-page .knowledge-map-actions button,
  .portfolio-page .knowledge-map-actions a { width: 100%; }
  .knowledge-map-dialog { width: 96vw; height: 92vh; }
  .knowledge-map-dialog > header { min-height: 116px; align-items: flex-start; gap: 8px; padding: 13px 12px; }
  .knowledge-map-heading > span { max-width: 190px; line-height: 1.45; }
  .knowledge-map-toolbar { gap: 4px; padding-top: 4px; }
  .knowledge-map-toolbar output { min-width: 38px; }
  .knowledge-map-dialog > header button { width: 32px; height: 32px; }
  .knowledge-map-dialog > header .knowledge-map-close { width: 34px; height: 34px; margin-left: 2px; }
  .knowledge-map-dialog .knowledge-map-scroll { height: calc(100% - 116px); }
  .portfolio-page .portfolio-channels,
  .portfolio-page .portfolio-projects { padding-right: 18px; padding-left: 18px; }
  .portfolio-page .channel-grid { grid-template-columns: 1fr; }
}


/* Detailed resume content reflow — keep the site's existing visual language. */
.detail-page .original-resume {
  --resume-time-column: 118px;
  max-width: 1180px;
  padding-top: 48px;
}

.detail-page .original-resume-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  gap: 42px;
  align-items: end;
  padding: 0 0 34px;
}

.detail-page .original-resume-kicker { display: none; }

.detail-page .original-resume-title {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: baseline;
}

.detail-page .original-resume-title h1 {
  margin: 0;
  font-size: 38px;
  letter-spacing: -.035em;
}

.detail-page .original-resume-title > span {
  color: #53605d;
  font-size: 14px;
  font-weight: 600;
}

.detail-page .original-resume-value {
  margin: 12px 0 17px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
}

.detail-page .original-resume-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.detail-page .original-resume-meta > * {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  color: #68716e;
  font-size: 11px;
}

.detail-page .original-resume-meta .material-symbols-rounded {
  color: var(--accent);
  font-size: 14px;
}

.detail-page .original-resume-hero-actions {
  display: grid;
  gap: 10px;
}

.detail-page .original-resume-hero-actions > span {
  color: #7a817e;
  font-size: 10px;
  text-align: center;
}

.detail-page .original-resume-hero-actions .button { width: 100%; }

.detail-page .original-resume-layout {
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 48px;
}

.detail-page .original-resume-toc {
  top: 96px;
  margin-top: 38px;
  padding: 2px 24px 2px 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.detail-page .original-resume-toc > p {
  margin-bottom: 11px;
  padding-bottom: 10px;
  color: #888d88;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
}

.detail-page .original-resume-toc a {
  padding: 8px 6px;
  border-radius: 4px;
  color: #5a6461;
  font-size: 12px;
}

.detail-page .original-resume-toc a span {
  color: var(--accent);
  font: 600 9px/1 var(--font-ui);
}

.detail-page .original-section { padding: 38px 0; }

.detail-page .original-section > h2 {
  display: flex;
  gap: 11px;
  align-items: baseline;
  margin: 0 0 22px;
  padding-left: 14px;
  font-size: 22px;
}

.detail-page .original-section > h2 > span {
  color: #929590;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .04em;
}

.detail-page .original-profile-grid {
  display: grid;
  gap: 24px;
}

.detail-page .original-profile-copy {
  max-width: 780px;
  padding: 0;
  border: 0;
  background: transparent;
}

.detail-page .original-profile-copy p {
  margin: 0;
  color: #4e5a57;
  font-size: 13px;
  line-height: 1.9;
}

.detail-page .original-profile-copy p + p { margin-top: 9px; }

.detail-page .original-profile-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.detail-page .original-profile-stats div {
  min-height: 48px;
  padding: 2px 18px;
}

.detail-page .original-profile-stats div:first-child { padding-left: 0; }
.detail-page .original-profile-stats div:not(:last-child) { border-right: 1px solid var(--line); }

.detail-page .original-profile-stats dt {
  color: var(--ink);
  font: 700 20px/1.2 var(--font-ui);
  letter-spacing: -.025em;
}

.detail-page .original-profile-stats dd {
  margin: 5px 0 0;
  color: #7b827f;
  font-size: 10px;
}

.detail-page .original-experience {
  display: grid;
  grid-template-columns: var(--resume-time-column) minmax(0, 1fr);
  column-gap: 28px;
  margin: 0;
  padding: 27px 0 29px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.detail-page .original-experience:hover {
  border-color: var(--line);
  box-shadow: none;
}

.detail-page .original-experience > header { display: contents; }

.detail-page .original-experience > header > div {
  grid-column: 2;
  grid-row: 1;
  padding: 0 0 11px;
  border: 0;
}

.detail-page .original-experience > header time {
  display: block;
  grid-column: 1;
  grid-row: 1 / span 3;
  min-width: 0;
  margin: 2px 0 0;
  padding: 0 0 0 14px;
  border: 0;
  border-left: 2px solid var(--accent);
  color: var(--ink);
  background: transparent;
}

.detail-page .original-experience > header time::before,
.detail-page .original-experience > header time::after { display: none; }

.detail-page .original-experience > header time span {
  display: block;
  color: var(--ink);
  font: 650 13px/1.35 var(--font-ui);
}

.detail-page .original-experience > header time i {
  display: block;
  margin-top: 4px;
  color: #858b87;
  font: 500 10px/1.45 var(--font-ui);
  font-style: normal;
}

.detail-page .original-experience header p {
  margin: 0 0 4px;
  color: #777e7a;
  font-size: 11px;
}

.detail-page .original-experience h3 {
  color: var(--ink);
  font-size: 18px;
  line-height: 1.45;
}

.detail-page .original-experience > p {
  grid-column: 2;
  margin: 0 0 12px;
  padding: 0;
  color: #4e5a57;
  background: transparent;
  font-size: 13px;
  line-height: 1.85;
}

.detail-page .original-experience > ul {
  grid-column: 2;
  margin: 0;
  padding-left: 18px;
  color: #56615e;
  font-size: 12.5px;
  line-height: 1.82;
}

.detail-page .original-experience li + li { margin-top: 6px; }
.detail-page .original-experience li > ul { margin: 5px 0 0; }

.detail-page .original-experience:target {
  margin-right: -14px;
  margin-left: -14px;
  padding-right: 14px;
  padding-left: 14px;
  border-color: var(--line);
  background: rgba(244, 232, 222, .46);
  box-shadow: none;
}

.detail-page .original-compact-experience {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 0;
}

.detail-page .original-compact-experience article,
.detail-page .original-education article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--resume-time-column);
  gap: 28px;
  padding: 20px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.detail-page .original-compact-experience time,
.detail-page .original-education time {
  display: block;
  justify-items: initial;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  color: #858b87;
}

.detail-page .original-compact-experience time span,
.detail-page .original-education time span {
  display: block;
  color: var(--ink);
  font: 650 12px/1.4 var(--font-ui);
}

.detail-page .original-compact-experience time i,
.detail-page .original-education time i {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  font-style: normal;
}

.detail-page .attachment-intro {
  margin-top: 0;
  border: 0;
  border-left: 2px solid var(--accent);
  border-radius: 0;
  background: transparent;
}

.detail-page .original-attachments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 26px;
}

.detail-page .original-attachments .attachment-card {
  min-height: 104px;
  padding: 18px 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.detail-page .original-attachments .attachment-card:hover {
  border-color: var(--line);
  box-shadow: none;
  transform: none;
}

@media (max-width: 920px) {
  .detail-page .original-resume-layout {
    grid-template-columns: 126px minmax(0, 1fr);
    gap: 30px;
  }

  .detail-page .original-resume-toc { padding-right: 16px; }
  .detail-page .original-profile-stats div { padding-right: 12px; padding-left: 12px; }
  .detail-page .original-experience { column-gap: 22px; }
}

@media (max-width: 700px) {
  .detail-page .original-resume { padding-top: 34px; }

  .detail-page .original-resume-hero {
    display: block;
    padding-bottom: 28px;
  }

  .detail-page .original-resume-title { display: block; }
  .detail-page .original-resume-title h1 { font-size: 32px; }
  .detail-page .original-resume-title > span { display: block; margin-top: 6px; }
  .detail-page .original-resume-meta { display: grid; gap: 7px; }

  .detail-page .original-resume-hero-actions {
    grid-template-columns: minmax(0, 1fr) 150px;
    align-items: center;
    margin-top: 20px;
  }

  .detail-page .original-resume-hero-actions > span { text-align: left; }

  .detail-page .original-resume-layout { display: block; }

  .detail-page .original-resume-toc {
    position: static;
    margin: 18px 0 0;
    padding: 0;
    border: 0;
  }

  .detail-page .original-resume-toc > p { display: none; }
  .detail-page .original-resume-toc nav { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .detail-page .original-resume-toc a { flex: 0 0 auto; }

  .detail-page .original-section { padding: 34px 0; }
  .detail-page .original-section > h2 { display: block; }
  .detail-page .original-section > h2 > span { display: block; margin-top: 4px; }

  .detail-page .original-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-page .original-profile-stats div { padding: 11px 14px; }
  .detail-page .original-profile-stats div:nth-child(2) { border-right: 0; }
  .detail-page .original-profile-stats div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); }

  .detail-page .original-experience {
    display: block;
    padding: 23px 0 25px;
  }

  .detail-page .original-experience > header { display: flex; flex-direction: column; }
  .detail-page .original-experience > header time {
    order: -1;
    display: flex;
    gap: 5px;
    margin: 0 0 12px;
    padding-left: 10px;
  }

  .detail-page .original-experience > header time span,
  .detail-page .original-experience > header time i { display: inline; margin: 0; }

  .detail-page .original-experience > header > div { padding-bottom: 10px; }
  .detail-page .original-experience:target { margin-right: -10px; margin-left: -10px; padding-right: 10px; padding-left: 10px; }

  .detail-page .original-compact-experience article,
  .detail-page .original-education article {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .detail-page .original-compact-experience time,
  .detail-page .original-education time { grid-row: 1; }

  .detail-page .attachment-intro { display: block; }
  .detail-page .attachment-intro a { width: 100%; justify-content: center; margin-top: 13px; }
  .detail-page .original-attachments { grid-template-columns: 1fr; }
}