/* Hallmark · shape: Personal portfolio · genre: modern-minimal · theme: custom · job: hire · idea: "把科研任务，做成可用、可复用的AI工具" · vibe: "森林绿 暖纸 错位 字形 墨线 案例" · hero: offset editorial lines · posture: Restrained · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V5 · weakest: hierarchy, preserve a clear reading order across asymmetrical project sections */
/* These are the reference's editorial gestures, applied to the owner's actual work. */
.portfolio-home .folio-intro { grid-template-columns: minmax(0,1.3fr) minmax(0,.85fr); gap: var(--space-2xl); }
.folio-intro h1 { max-width: none; font-size: clamp(3.5rem,5.2vw,5.25rem); font-weight: 600; line-height: 1.09; letter-spacing: -.055em; }
.folio-intro h1 .headline-desktop,.folio-intro h1 .headline-mobile { display: block; }
.folio-intro h1 .headline-mobile { display: none; }
.folio-intro h1 .title-line-offset { margin-left: 52px; }
.folio-intro h1 .title-mark { display: inline-block; position: relative; }
.title-mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.06em; height: .12em; border-top: 2px solid var(--color-sage-strong); border-radius: 50%; transform: rotate(-1.5deg) scaleX(1); transform-origin: left; pointer-events: none; animation: ink-arrive var(--dur-editorial) var(--ease-portfolio) both; animation-delay: 220ms; }
@keyframes ink-arrive { from { transform: rotate(-1.5deg) scaleX(0); } to { transform: rotate(-1.5deg) scaleX(1); } }
.capability-row { border-radius: 0 18px 0 0; transition: transform var(--dur-hover) var(--ease-portfolio),background var(--dur-hover) var(--ease-portfolio); }
.capability-row > span { display: grid; place-items: center; border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); width: 28px; height: 28px; padding: 0; }
.capability-row:hover { background: var(--color-paper-hover); transform: translateX(5px); }
.capability-row:hover .link-arrow { transform: translate(3px,-3px); }
.heading-index { display: block; font-family: var(--font-body); font-weight: 500; font-size: var(--text-xs); color: var(--color-muted); margin-bottom: var(--space-lg); letter-spacing: 0; }
.folio-well.dark .heading-index { color: var(--color-forest-soft); }
.flagship-grid { grid-template-columns: minmax(0,1fr); gap: var(--space-2xl); }
.work-card { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,1fr); align-items: stretch; border-radius: 24px 48px 24px 24px; scroll-margin-top: 130px; transition: transform 320ms var(--ease-portfolio),border-color var(--dur-hover) var(--ease-portfolio); }
.work-card:first-child { margin-right: var(--space-2xl); }
.work-card:nth-child(2) { margin-left: var(--space-2xl); border-radius: 48px 24px 24px 24px; }
.work-card:nth-child(2) .work-cover { order: 2; }
.work-cover { aspect-ratio: auto; min-height: 100%; }
.work-body { padding: var(--space-xl); }
.work-card:hover { transform: translateY(-3px); }
.work-card:hover .work-cover > div { transform: none; }
.work-card:target { outline: 2px solid var(--color-sage-strong); outline-offset: 6px; }
.work-cover:focus-visible { outline-offset: -6px; }
.work-body .editorial-link { padding-top: var(--space-sm); }
.traffic-artifact { padding: var(--space-lg); transform-origin: center; }
.work-card:hover .traffic-artifact { transform: rotate(-.4deg); }
.paper-artifact { padding: var(--space-xl); }
.work-proof { border-bottom: var(--rule-hair) solid var(--color-rule); padding-bottom: var(--space-lg); }
.system-list > div { transition: transform var(--dur-hover) var(--ease-portfolio); }
.system-list > div:hover { transform: translateX(4px); }
.system-projects a:hover strong { text-decoration: underline; text-underline-offset: 6px; }
.method-principles li { transition: transform var(--dur-hover) var(--ease-portfolio); }
.method-principles li:hover { transform: translateX(4px); }
.timeline article { transition: transform var(--dur-hover) var(--ease-portfolio); }
.timeline article:hover { transform: translateX(4px); }
.contact-layout h2 { max-width: 12ch; }
.contact-layout h2::first-line { letter-spacing: -.045em; }
@media (min-width:1441px) { .work-card:first-child { margin-right: var(--space-3xl); } .work-card:nth-child(2) { margin-left: var(--space-3xl); } }
@media (max-width:75rem) { .portfolio-home .folio-intro { grid-template-columns: minmax(0,1.2fr) minmax(0,.85fr); gap: var(--space-xl); } .folio-intro h1 { font-size: clamp(3.3rem,5vw,4.3rem); } .folio-intro h1 .title-line-offset { margin-left: 32px; } .work-body { padding: var(--space-lg); } .paper-artifact { padding: var(--space-lg); } }
@media (max-width:60rem) { .portfolio-home .folio-intro { grid-template-columns: minmax(0,1fr); gap: var(--space-xl); } .folio-intro h1 { font-size: clamp(3.5rem,8vw,4.5rem); } .folio-intro h1 .title-line-offset { margin-left: var(--space-lg); } .work-card,.work-card:nth-child(2) { grid-template-columns: minmax(0,1fr); margin: 0; border-radius: 24px 34px 24px 24px; } .work-card:nth-child(2) .work-cover { order: 0; } .work-cover { aspect-ratio: 16/10; min-height: 0; } .paper-artifact { padding: var(--space-xl); } .flagship-grid { gap: var(--space-xl); } }
@media (max-width:40rem) { .folio-intro h1 { font-size: clamp(2.05rem,10.3vw,2.65rem); line-height: 1.15; letter-spacing: -.06em; } .folio-intro h1 .headline-desktop { display: none; } .folio-intro h1 .headline-mobile { display: block; } .folio-intro h1 .title-line-offset { margin-left: var(--space-md); } .title-mark::after { bottom: -.08em; border-top-width: 1px; } .heading-index { margin-bottom: var(--space-md); } .work-card { scroll-margin-top: 112px; } .work-body { padding: var(--space-lg); } .paper-artifact { padding: var(--space-lg); } .work-card:hover { transform: none; } .work-card:hover .traffic-artifact { transform: none; } }
@media(prefers-reduced-motion:reduce) { .title-mark::after { animation: none; transform: rotate(-1.5deg) scaleX(1); } .work-card,.capability-row,.system-list > div,.method-principles li,.timeline article { transition: none; } }
/* scroll-padding belongs to the fixed masthead; targets add only a small reading inset. */
.portfolio-home .folio-section,.portfolio-home .work-card { scroll-margin-top: var(--space-lg); }
@media(max-width:40rem) { .portfolio-home .folio-section,.portfolio-home .work-card { scroll-margin-top: var(--space-md); } }
/* Typography: stronger display strokes, a shared heading baseline and readable introductory copy. */
:root { --color-muted: #46534b; --font-display-heavy: "Portfolio Serif", "Noto Serif SC", "Songti SC", serif; }
@font-face { font-family: "Portfolio Serif"; src: url("assets/fonts/portfolio-serif-700.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
.folio-intro h1 { font-family: var(--font-display-heavy); font-weight: 700; }
.folio-intro h1 .headline-desktop > span { white-space: nowrap; }
.intro-copy { padding-top: 0; }
.intro-lead { font-size: 17px; line-height: 1.85; max-width: 43em; margin-top: var(--space-lg); color: var(--color-ink-2); }
.intro-copy .folio-actions { margin-top: var(--space-lg); }
.intro-links { margin-top: var(--space-lg); }
.folio-heading { align-items: start; }
.folio-heading h2,.contact-layout h2 { font-weight: 600; letter-spacing: -.045em; }
.folio-heading > p { font-size: 17px; line-height: 1.85; padding-top: var(--space-2xs); }
.heading-index + br { display: none; }
.folio-heading .section-titleblock + p { padding-top: var(--space-xl); }
.capability-row h2,.work-body h3,.library-item h3,.timeline h3,.method-principles strong,.system-projects a strong,.architecture-list dt { font-weight: 600; }
.capability-row p,.work-summary,.timeline p,.library-item p,.method-principles p { font-size: 16px; line-height: 1.8; }
.work-body h3 { font-size: clamp(1.75rem,2.3vw,2.125rem); }
.work-category { font-weight: 500; }
.contact-layout h2 { max-width: none; line-height: 1.18; }
.contact-layout h2 span { display: block; white-space: nowrap; }
.contact-layout p { font-size: 17px; line-height: 1.9; max-width: 34em; }
.contact-layout p strong { font-weight: 600; color: var(--color-ink); }
@media (max-width:60rem) { .folio-heading .section-titleblock + p { padding-top: var(--space-xl); } .folio-intro h1 { font-size: clamp(3.5rem,7.7vw,4.5rem); } }
@media (max-width:40rem) { .folio-intro h1 { font-size: clamp(2.05rem,10.3vw,2.65rem); } .intro-lead { font-size: 16px; line-height: 1.8; margin-top: var(--space-lg); } .folio-heading > p,.contact-layout p { font-size: 16px; } .folio-heading .section-titleblock + p { padding-top: 0; } .work-body h3 { font-size: 1.625rem; } .contact-layout h2 { font-size: clamp(2rem,8.4vw,2.375rem); } }
/* Three weights on the portfolio: regular copy, semibold hierarchy and the bold display. */
.identity strong,.folio-button,.work-category,.intro-evidence dt,.work-proof strong,.method-visual strong,.contact-actions strong,.library-summary strong { font-weight: 600; }
.heading-index { font-weight: 600; }
.folio-heading .section-titleblock + p { padding-top: var(--space-xl); }
.case-hero h1,.page-hero h1,.case-section h2,.doc-content h2,.doc-content h3,.section-heading h2,.resume-option h2 { font-weight: 600; }
@media(max-width:40rem) { .folio-heading .section-titleblock + p { padding-top: 0; } }

/* Keep the ink stroke beneath the type, with room before the following line. */
.folio-intro h1 .headline-desktop > .title-line-offset { padding-bottom: .12em; }
.title-mark::after { top: calc(100% + .025em); bottom: auto; height: .045em; border-top: 0; border-bottom: 2px solid var(--color-sage-strong); transform: scaleX(1); }
@keyframes ink-arrive { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media(prefers-reduced-motion:reduce) { .title-mark::after { transform: scaleX(1); animation: none; } }
@media(min-width:961px) { .intro-copy { padding-top: calc(var(--space-md) * 2); } }
/* A true curved ink stroke: the full path stays below the type. */
.title-mark::after { display: none; }
.folio-intro h1 .headline-desktop > .title-line-offset { padding-bottom: .25em; }
.ink-curve { display: block; position: absolute; top: calc(100% + .025em); left: 0; width: 100%; height: .25em; overflow: visible; color: var(--color-sage-strong); transform-origin: left center; animation: ink-arrive var(--dur-editorial) var(--ease-portfolio) both; animation-delay: 220ms; }
.ink-curve path { fill: none; stroke: currentColor; stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.masthead { min-height: 88px; padding: var(--space-md) var(--space-lg); gap: var(--space-xl); }
.signature { font-family: var(--font-signature); font-size: 30px; font-weight: 700; letter-spacing: -.045em; }
.identity strong { font-size: 20px; font-weight: 700; }
.identity > span { font-size: 12px; }
.mainnav { gap: 32px; }
.mainnav > a:not(.folio-button) { font-size: 14px; font-weight: 700; }
.mainnav .folio-button { font-size: 14px; font-weight: 700; padding-inline: var(--space-lg); }
.case-page .case-hero,.case-page .case-section.container,.case-page .case-statement > .container,.case-page .case-subnav > .container { max-width: 1280px; }
.case-page .case-section { padding-block: 112px; }
.case-page .section-heading { gap: var(--space-2xl); align-items: end; margin-bottom: var(--space-2xl); }
.case-page .section-heading h2 { font-size: clamp(2.5rem,3.8vw,3.5rem); font-weight: 700; line-height: 1.2; }
.case-page .case-hero h1 { font-weight: 700; }
.case-page .section-heading p { font-size: 17px; line-height: 1.85; color: var(--color-ink-2); }
.case-page .overview-grid dd,.case-page .architecture-list dd,.case-page .decision-list dd { font-size: 16px; line-height: 1.85; color: var(--color-ink-2); }
.case-page .case-gallery { grid-template-columns: minmax(0,1fr); gap: var(--space-2xl); max-width: 1160px; margin-inline: auto; }
.case-page .case-gallery .screen-zoom,.case-page .case-gallery .gallery-wide .screen-zoom { aspect-ratio: auto; padding: var(--space-md); border-radius: var(--radius-card); }
.case-page .case-gallery img { width: 100%; height: auto; object-fit: contain; }
.case-page .case-gallery figcaption { margin-top: var(--space-lg); font-size: 16px; line-height: 1.8; font-weight: 600; color: var(--color-ink-2); }
@media(max-width:75rem) { .mainnav { gap: var(--space-lg); } }
@media(max-width:60rem) { .masthead { min-height: 70px; padding: var(--space-sm) var(--space-md); gap: var(--space-md); } .signature { font-size: 27px; } .mainnav { gap: var(--space-xs); } .case-page .case-section { padding-block: var(--space-2xl); } .case-page .section-heading { gap: var(--space-lg); margin-bottom: var(--space-xl); } }
@media(max-width:40rem) { .masthead { min-height: 68px; padding: var(--space-xs) var(--space-sm); gap: var(--space-xs); } .signature { font-size: 22px; } .identity strong { font-size: 16px; } .case-page .section-heading h2 { font-size: 2.25rem; } .case-page .section-heading p { font-size: 16px; } .case-page .case-gallery { gap: var(--space-xl); } .case-page .case-gallery .screen-zoom { padding: var(--space-xs); } .case-page .case-gallery figcaption { font-size: 14px; margin-top: var(--space-md); } .ink-curve { height: .3em; } }
@media(prefers-reduced-motion:reduce) { .ink-curve { animation: none; transform: none; } }
.case-page .button,.case-page .case-subnav a,.case-page .project-endnav strong { font-weight: 600; }