/* ==========================================================================
   作品集 V1.0 —— 全站统一视觉层（最后加载，覆盖旧样式；不动动画几何与时序）
   规则：1 个 logo · 2 种字体 · 1 个强调色 · 1 种深色 · 3 档圆角 · 全站浅色
   ========================================================================== */
:root{
  --v1-paper:#f1f2f6;      /* 全站底色 */
  --v1-surface:#ffffff;    /* 卡片、面板 */
  --v1-ink:#1d2127;        /* 正文与标题 */
  --v1-muted:#5c626b;      /* 次要文字，浅底上对比度 ≥ 5.6:1 */
  --v1-line:#1d21271a;     /* 分隔线 */
  --v1-accent:#0c79fb;     /* 唯一强调色 */
  --v1-dark:#16181c;       /* 唯一深色：按钮、深色作品面板 */
  --v1-serif:"Anthropic Serif",Georgia,serif;
  --v1-sans:"Figtree","PingFang SC",Arial,sans-serif;
  --v1-r-s:12px;--v1-r-m:24px;--v1-r-pill:999px;
}

/* ---------- Logo：全站同一个 “Jiang.” ---------- */
.wordmark,.case-header .wordmark{font-family:var(--v1-serif)!important;font-weight:500!important;letter-spacing:-.035em!important;color:var(--v1-ink)}
.case-header .wordmark{font-size:26px}
.contact-signature{font-family:var(--v1-serif)!important;font-style:normal!important;font-weight:500!important;letter-spacing:-.04em!important}

/* ==========================================================================
   首页
   ========================================================================== */
:root{font-family:var(--v1-sans)}
.home-frame,.experience,.works,.story-intro,.practice,.visual-work,.contact{font-family:var(--v1-sans)}
.experience[data-font-pair="current"]{--experience-display:var(--v1-serif);--experience-body:var(--v1-sans)}
.experience-flow-name{font-family:var(--v1-sans)}
.work-placeholder h3{font-family:var(--v1-serif);font-weight:450;letter-spacing:-.03em}

/* 首屏标题：两行同一字体，句首大写，第二行用强调色 */
.intro h1{font-family:var(--v1-serif);font-weight:450;letter-spacing:-.025em!important;line-height:1.16}
.intro h1 .headline-line{font-family:inherit}
.intro strong,.intro .headline-line--serif{font-family:var(--v1-serif);font-weight:450;letter-spacing:-.025em!important;color:var(--v1-accent);font-size:1em}

/* 各屏大标题统一为衬线 */
.story-intro h2,.practice h2,.visual-copy h2,.contact-copy-block h2,#experience-title,.works-caption h2{font-family:var(--v1-serif)!important;font-weight:450!important;letter-spacing:-.03em!important}
.contact-copy-block h2 strong{font-weight:450!important}
.contact-copy-block h2 em{font-family:inherit;font-style:normal;color:var(--v1-accent)}
.story-intro h2 em,.visual-copy h2 em{color:var(--v1-accent)}
.works-caption h2{font-weight:450!important}

/* 次要文字统一颜色 */
.practice-copy p,.visual-copy p,.contact-copy-block p,.works-caption p{color:var(--v1-muted)}

/* V1.6: story cards keep the complete supplied artwork. */
.story-intro-deck img{transform:none}

/* Selected Work：去掉重复的小标题，深色统一 */
.continuity-gallery-body>span{display:none}
.continuity-gallery-body{background:var(--v1-dark)!important}
.continuity-gallery,.continuity-gallery-heading{border-radius:var(--v1-r-m)}

/* 联系区主按钮用唯一深色，强调色只留给文字强调 */
.contact-email{background:var(--v1-dark)!important}

/* ==========================================================================
   案例页：改成与首页同一套浅色
   ========================================================================== */
.work-detail-page,body.case-page{
  --bg:var(--v1-paper);--panel:var(--v1-surface);--ink:var(--v1-ink);--muted:var(--v1-muted);
  --line:var(--v1-line);--brand:var(--v1-accent);--soft-surface:#1d212708;--soft-surface-hover:#1d212712;
}
:root:has(.work-detail-page){--bg:var(--v1-paper);--panel:var(--v1-surface);--ink:var(--v1-ink);--muted:var(--v1-muted);--line:var(--v1-line);--brand:var(--v1-accent);--soft-surface:#1d212708;--soft-surface-hover:#1d212712}
body:has(.work-detail-page){background:var(--v1-paper);color:var(--v1-ink)}

.case-header .wordmark{color:var(--v1-ink)}
.case-header a{color:var(--v1-ink)}

/* 返回按钮：唯一深色 */
.work-detail-back{background:var(--v1-dark);border:0;color:#fff;box-shadow:0 10px 24px #1d21271f}
.work-detail-back:hover{background:#2a2e35}

/* 项目切换条：浅色毛玻璃，保留硬边（用户确认的设计） */
.work-project-choice-image{background:var(--v1-surface);border-color:var(--v1-line);border-radius:var(--v1-r-s)}
.work-project-choice-image-inner{border-radius:calc(var(--v1-r-s) - 1px)}
.work-project-choice.is-active .work-project-choice-image{background:var(--v1-surface);border-radius:16px;box-shadow:0 8px 20px #1d21271f}
.work-project-choice.is-active .work-project-choice-image-inner{border-radius:9px;inset:5px}
.work-project-choice.is-active .work-project-choice-image:before{background:var(--v1-accent);padding:2px;animation:none}
.work-project-choice{color:var(--v1-muted)}
.work-project-choice.is-active,.work-project-choice:hover{color:var(--v1-ink)}

/* 缩略图改成局部特写：放大并对准内容区，不再是看不清的整页 */
.work-project-choice-image img{transform:scale(var(--v1-zoom,1.9));transform-origin:var(--v1-focus,30% 35%)}
.work-project-choice[href="uc.html"]{--v1-focus:28% 40%}
.work-project-choice[href="model.html"]{--v1-focus:45% 55%}
.work-project-choice[href="monitor.html"]{--v1-focus:35% 30%}
.work-project-choice[href="tokenboard.html"]{--v1-focus:88% 40%;--v1-zoom:1.7}
.work-project-choice[href="medical.html"]{--v1-focus:72% 38%;--v1-zoom:1.7}
.work-project-choice[href="graphic.html"]{--v1-focus:50% 70%;--v1-zoom:1.25}

/* 文字：标题字距放宽，正文对比度提高 */
.work-detail-header h1{letter-spacing:-.035em;font-weight:450}
.work-detail-intro{color:var(--v1-muted)}
.work-detail-date{color:var(--v1-muted)}
.work-detail-body p{color:#3a3f47}
.work-detail-toc a{color:var(--v1-muted)}
.work-detail-toc a:hover,.work-detail-toc a.is-active,.work-detail-toc a[aria-current]{color:var(--v1-ink)}
.work-detail-meta li{border-color:var(--v1-line);color:var(--v1-ink)}

/* 图片容器：白底细边，圆角统一 */
.work-detail-cover{border-radius:var(--v1-r-m);background:var(--v1-surface);box-shadow:inset 0 0 0 1px var(--v1-line)}
.work-detail-media figure{border-radius:var(--v1-r-m);background:var(--v1-surface)!important;box-shadow:inset 0 0 0 1px var(--v1-line)}
@media(max-width:720px){.work-detail-cover,.work-detail-media figure,.work-detail-media.is-pair figure{border-radius:16px}}

/* 图片查看器：浅色 */
dialog{background:var(--v1-surface);color:var(--v1-ink);border-color:var(--v1-line)}
dialog::backdrop{background:#1d2127b3}
.viewer-actions button{background:var(--v1-paper);color:var(--v1-ink)}

/* 中文补充说明折叠框：浅色 */
.case-chinese-summary{color:var(--v1-ink);background:var(--v1-surface);border-color:var(--v1-line)}
.case-chinese-summary>p{color:#3a3f47}

/* Selected Work 标题与其他屏一致用衬线 */
.continuity-gallery-heading{font-family:var(--v1-serif);font-weight:450;letter-spacing:-.025em}
.continuity-gallery-heading button{font-family:var(--v1-sans);letter-spacing:0}

/* ===== V1.1 细节 ===== */
/* 1 首屏字重：默认更轻，鼠标靠近时加粗到 800，动效更明显 */
.intro h1 .proximity-letter{letter-spacing:-.012em}

/* 2 首屏→经历：去掉转场后的大段空白，经历区跟着画框一起到位 */
@media(min-width:761px){
 .experience-shell{margin-top:-60px}
 .works{margin-top:110px}
 .experience{transition:none}
}

/* 3 视觉作品：上下两排画廊靠近中间，上排避开顶部导航 */
@media(min-width:761px){
 .visual-band--top{top:max(104px,calc(50% - 395px))!important}
 .visual-band--bottom{bottom:max(12px,calc(50% - 395px))!important;top:auto!important}
 .visual-band .visual-tile{scale:.86}
 .visual-band{gap:26px!important}
}

/* 4 联系区：重新排版 */
.contact-section{padding-top:120px}
.contact-layout{gap:80px;align-items:end;padding-bottom:80px}
.contact-copy-block h2>span{font-size:clamp(28px,2.6vw,40px)!important;color:var(--v1-muted)}
.contact-copy-block h2 strong{font-size:clamp(72px,8.4vw,132px)!important;line-height:.95;margin-top:10px}
.contact-intro{font-size:17px;color:var(--v1-muted);margin:28px 0 40px;max-width:30em}
.contact-label{font-family:var(--v1-sans);font-size:12px!important;font-weight:600;letter-spacing:.12em;color:var(--v1-muted)}
.contact-email{border-radius:var(--v1-r-m)!important;min-height:76px;padding:0 28px!important;font-family:var(--v1-serif);font-size:clamp(24px,2.2vw,32px)!important;letter-spacing:-.02em;transition:background .2s,transform .2s}
.contact-email:hover{background:var(--v1-accent)!important;transform:translateY(-2px)}
.contact-actions button.contact-copy,.contact-actions a.contact-copy{border-radius:var(--v1-r-pill)!important;border-color:var(--v1-line)!important;background:var(--v1-surface);font-size:14px!important}
.contact-note{color:var(--v1-muted);margin-top:22px}
.contact-orbit{border-color:var(--v1-line)!important}
.contact-signature{font-size:clamp(56px,5.4vw,84px)!important;color:var(--v1-ink)}
.contact-signature span{font-family:var(--v1-sans);font-size:13px!important;letter-spacing:.04em;color:var(--v1-muted)}
.contact-bottom{border-top-color:var(--v1-line)!important;color:var(--v1-muted);font-size:13px!important;padding-top:28px}
@media(max-width:760px){.contact-section{padding-top:72px}.contact-layout{gap:28px;padding-bottom:40px}.contact-copy-block h2 strong{font-size:64px!important}.contact-email{min-height:60px;font-size:22px!important}}

/* 5 小字统一：最小 12px，标签类统一 Figtree 500 */
.card-link,.credential-pill,.work-detail-meta li,.work-project-choice-name,.work-detail-toc a,.case-footer,.viewer-count,.practice-tags li,.story-intro-badges span,.works-caption p,.experience-flow-meta{font-size:max(12px,1em)!important}
.work-detail-meta li,.work-project-choice-name,.card-link,.credential-pill{font-family:var(--v1-sans);font-weight:500}
.work-detail-meta li{font-size:12px!important;min-height:32px}
.work-project-choice-name{font-size:11.5px!important}
.work-detail-toc a{font-size:13px!important}
.case-footer{font-size:12px!important}

/* ===== V1.2 ===== */
/* 2 标题下伸字母不被裁 */
.intro .headline-mask{padding-bottom:.2em;margin-bottom:-.2em}
/* 3 加载时不露出下面的内容 */
.has-motion:not([data-ready="true"]) .experience,.has-motion:not([data-ready="true"]) .works,.has-motion:not([data-ready="true"]) .experience-backdrop{visibility:hidden}
/* 5 View all 按钮 */
.continuity-gallery-heading button{font-size:13px!important;padding:8px 16px;min-height:0}
/* 7 联系区按钮对齐、小字 */
.contact-email{max-width:560px}
.contact-actions button.contact-copy,.contact-actions a.contact-copy{display:inline-flex!important;align-items:center;justify-content:center;height:48px;min-height:48px;padding:0 22px!important;line-height:1!important;font-size:15px!important}
.contact-note{font-size:15px!important;margin-top:28px}
.contact-intro{font-size:18px!important}
.contact-bottom{font-size:14px!important}
.contact-top{font-size:14px!important}
/* 1 方案 A 试做：画廊的框跟着图片比例走，统一高度 */
@media(min-width:761px){
 .visual-band .visual-tile{width:auto!important;height:150px!important;scale:1}
 .visual-band .visual-tile img{width:auto;height:100%;object-fit:contain}
}

/* ===== V1.3 ===== */
/* 2 联系区：邮箱一行，Copy email 与 PDF 并排在下一行，同宽 */
.contact-actions{max-width:560px;display:flex!important;flex-wrap:wrap;gap:10px}
.contact-email{flex:0 0 100%!important;max-width:none;width:100%}
.contact-actions button.contact-copy,.contact-actions a.contact-copy{flex:1 1 0;min-width:0}

/* 3 作品查看器：窗口大小固定，切换图片时不再跳动 */
.art-viewer[open]{display:flex;flex-direction:column;height:min(860px,calc(100svh - 32px));overflow:hidden}
.art-viewer figure{flex:1;min-height:0;display:flex;flex-direction:column}
.art-viewer img{flex:1;min-height:0;width:100%;height:100%;max-height:none;object-fit:contain}
.art-viewer figcaption{flex:0 0 auto}
dialog:not(.art-viewer)[open]{height:min(900px,92vh);display:flex;flex-direction:column}
dialog:not(.art-viewer) .image-scroll{flex:1;min-height:0;max-height:none}
dialog:not(.art-viewer):not(.actual-size) .image-scroll img{max-height:100%;height:100%}

/* 5 TokenBoard 案例：深色版残留的浅色字改成浅底深字 */
.case-tokenboard .tb-card-grid article{background:var(--v1-surface);border-color:var(--v1-line);color:var(--v1-ink)}
.case-tokenboard .tb-card-grid p{color:#4a5059}
.case-tokenboard .tb-source-note,.case-tokenboard .tb-figure figcaption,.case-tokenboard .tb-pair figcaption,.case-tokenboard .tb-board-figure figcaption{color:var(--v1-muted)}
.case-tokenboard .tb-board-figure figcaption::after{color:#a6523b}
.case-tokenboard .tb-palette{color:var(--v1-muted)}
.case-tokenboard .tb-palette span{border-color:var(--v1-line);background:var(--v1-surface)}
.case-tokenboard .tb-palette i{border-color:var(--v1-line)}
.case-tokenboard .tb-dataset-note{background:var(--v1-surface);color:#4a5059}
.case-tokenboard .tb-dataset-note b{color:var(--v1-ink)}
.case-tokenboard .tb-dataset-note code{color:#a6523b}

/* 6 案例章节导航：Line Sidebar 样式 */
.work-detail-toc.line-sidebar{--accent:var(--v1-accent);--text:var(--v1-muted);--mark:#1d212766;--mlen:28px;padding-left:calc(var(--mlen) + 12px);left:calc(max(48px,50vw - 720px) - 40px)}
.work-detail-toc.line-sidebar .work-detail-toc-links{gap:18px}
.work-detail-toc .line-sidebar__item{position:relative;display:block;transform:none!important;color:inherit}
.work-detail-toc .line-sidebar__item:after,.work-detail-toc a[aria-current]:after,.work-detail-toc a.is-active:after{content:none!important}
.work-detail-toc .line-sidebar__item:before{content:"";position:absolute;inset:-7px -40px -7px calc(-1 * var(--mlen) - 12px)}
.line-sidebar__label{display:inline-flex;align-items:baseline;gap:10px;font-size:13px;line-height:1.3;color:color-mix(in srgb,var(--accent) calc(var(--effect,0)*100%),var(--text));transform:translateX(calc(var(--effect,0)*14px))}
.line-sidebar__index{font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;opacity:calc(.5 + var(--effect,0)*.5)}
.line-sidebar__marker{position:absolute;top:50%;left:calc(-1 * var(--mlen) - 12px);width:var(--mlen);height:1px;background:color-mix(in srgb,var(--accent) calc(var(--effect,0)*100%),var(--mark));transform-origin:left center;transform:translateY(-50%) scaleX(calc(.6 + var(--effect,0)*.6))}
.work-detail-toc .line-sidebar__item[data-on] .line-sidebar__text{font-weight:600}

/* ===== V1.4 ===== */
/* 4 经历区站内链接用直箭头 */
.experience-project-link::after{content:"→"!important}
.experience-project-link:hover::after{translate:3px 0}

/* 6 Explore more 跳到经历区时留出导航栏高度 */
.experience,#experience{scroll-margin-top:104px}

/* 2 章节导航短线：放回导航自身留白里 */
.work-detail-toc.line-sidebar{left:max(48px,50vw - 720px)!important;padding-left:40px}
.line-sidebar__marker{left:-40px;width:26px}

/* 3 作品查看器：关闭按钮改成圆形图标按钮；按钮统一 */
.art-viewer-close{width:44px;height:44px;min-width:0;padding:0!important;display:grid;place-items:center;font-size:0!important;border-radius:50%!important;background:var(--v1-surface)!important;border:1px solid var(--v1-line)!important;transition:background .2s,transform .2s}
.art-viewer-close:before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='black' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.art-viewer-close:hover{background:var(--v1-paper)!important;transform:rotate(90deg)}
.art-viewer-navigation button{height:44px;padding:0 18px!important;font:500 14px/1 var(--v1-sans)!important;border-color:var(--v1-line)!important}
.art-viewer-navigation button:hover{background:var(--v1-paper)}
.art-viewer-count{font:500 13px/1 var(--v1-sans);color:var(--v1-muted)}
.viewer-actions button{font:500 14px/1 var(--v1-sans);border-radius:999px}

/* V1.6: exhibition images are rendered correctly from the source PDFs. */
/* 短线在列表的留白里，避免被列表的滚动区裁掉 */
.work-detail-toc.line-sidebar{padding-left:0!important}
.work-detail-toc.line-sidebar .work-detail-toc-links{padding:6px 8px 6px 40px;overflow:visible}

/* ===== V1.5 ===== */
/* 手机 How I work：标签先完全出现，作品网格要等标签显现后再进场 */
@media(max-width:760px){
 .story-continuity .practice{opacity:clamp(0,calc(var(--practice-opacity,0)*1.8),1)!important}
 .story-continuity .continuity-gallery{opacity:calc(var(--gallery-opacity,0) * clamp(0,calc((var(--practice-opacity,0) - .55)*2.2),1))!important}
 .practice-tags.is-physics li,.practice-tags li{background:var(--v1-surface)}
}

/* ===== V1.6：完整画面、自然比例与常显来源说明 ===== */
.story-intro-deck li{aspect-ratio:var(--art-ratio,1.333333);height:auto;box-sizing:content-box}
.story-intro-deck img{width:100%;height:100%;object-fit:contain;object-position:center!important}
@media(prefers-reduced-motion:no-preference){
 .story-continuity .story-intro-deck li{--story-card-height:clamp(190px,18vw,273px);width:min(calc(var(--story-card-height)*var(--art-ratio,1.333333)),clamp(180px,18vw,300px));height:auto;aspect-ratio:var(--art-ratio,1.333333)}
 @media(max-width:760px){
  .story-continuity .story-intro-deck li{--story-card-height:clamp(113px,32vw,186px);width:min(calc(var(--story-card-height)*var(--art-ratio,1.333333)),clamp(85px,24vw,140px))}
 }
}
/* Both desktop and mobile use the artwork's full ratio. */
.visual-band .visual-tile{height:clamp(104px,15svh,150px)!important;width:auto!important;scale:1}
.visual-band .visual-tile img{display:block;width:auto;height:100%;max-width:none;object-fit:contain}
@media(max-width:760px){.visual-band .visual-tile{height:88px!important}}
.case-source-note{max-width:70ch;margin:20px 0 28px;padding:0;color:var(--v1-muted);font:400 13px/1.8 var(--v1-sans)}
/* New UI images use their own full ratio instead of legacy low-resolution caps. */
.case-model .work-detail-media figure,.case-monitor .work-detail-media figure{aspect-ratio:auto}
.case-model .work-detail-media .image-button,.case-monitor .work-detail-media .image-button{height:auto}
.case-model .work-detail-media .image-button img,.case-monitor .work-detail-media .image-button img{position:static;inset:auto;display:block;width:100%;height:auto;max-width:100%;max-height:none;transform:none;object-fit:contain}