/* ==============================================================
 * Canvas Theme — Portfolio / Photo
 * 定位: 摄影师 / 设计师 / 创意工作室 / 个人作品集
 * 极浅米白底 + 衬线超细字重 + Masonry 瀑布流
 * 设计原则: 内容(图片)即设计,UI 几乎隐形,文字克制
 * ============================================================== */

:root {
    --canvas-ink: #0a0a0a;
    --canvas-bg: #f6f4f0;
    --canvas-accent: #bd1e2c;
    --canvas-cols-lg: 3;

    /* 派生灰阶 */
    --canvas-ink-soft: rgba(10, 10, 10, 0.72);
    --canvas-ink-mute: rgba(10, 10, 10, 0.48);
    --canvas-ink-faint: rgba(10, 10, 10, 0.18);
    --canvas-line: rgba(10, 10, 10, 0.12);

    /* 字体 */
    --font-serif: "Cormorant Garamond", "Cormorant", "EB Garamond", Georgia, "Songti SC", "STSong", serif;
    --font-sans: "Inter", system-ui, -apple-system, "Helvetica Neue", "PingFang SC", sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    /* 容器 */
    --canvas-pad: 32px;
    --canvas-pad-sm: 20px;
    --canvas-max-text: 800px;                          /* 正文宽度,作品集图文混排平衡点 */
    --canvas-max-narrow: 680px;                        /* 标题/摘要保留窄列,视觉聚焦 */
    --canvas-cover-max: clamp(360px, 55vh, 560px);     /* 封面响应式上限,避免霸屏 */
}

/* ============================================================
 * Reset + 基础排版
 * ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { overflow-x: clip; }
body { overflow-x: clip; }

.canvas-body {
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.65;
    color: var(--canvas-ink);
    background: var(--canvas-bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

/* ============================================================
 * Header (顶部固定,极薄边框)
 * ============================================================ */
.canvas-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--canvas-bg);
    border-bottom: 1px solid var(--canvas-line);
}

.canvas-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 22px var(--canvas-pad);
}
@media (max-width: 767px) {
    .canvas-header__inner {
        grid-template-columns: 1fr auto;
        padding: 16px var(--canvas-pad-sm);
    }
}

.canvas-logo {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.005em;
    line-height: 1;
}
.canvas-logo__name { color: var(--canvas-ink); }
.canvas-logo__studio {
    margin-left: 8px;
    font-style: normal;
    font-size: 12px;
    font-family: var(--font-sans);
    color: var(--canvas-ink-mute);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.canvas-logo__img { height: 28px; width: auto; }

.canvas-nav {
    display: none;
    gap: 36px;
    justify-content: center;
}
@media (min-width: 768px) { .canvas-nav { display: flex; } }

.canvas-nav__link {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--canvas-ink-soft);
    transition: color 0.25s;
    position: relative;
}
.canvas-nav__link:hover { color: var(--canvas-ink); }
.canvas-nav__link.is-active { color: var(--canvas-ink); }
.canvas-nav__link.is-active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    width: 16px;
    height: 1px;
    background: var(--canvas-ink);
    transform: translateX(-50%);
}

.canvas-header__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.canvas-lang {
    display: none;
    gap: 8px;
}
@media (min-width: 768px) { .canvas-lang { display: inline-flex; } }
.canvas-lang__item {
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--canvas-ink-mute);
    transition: color 0.25s;
}
.canvas-lang__item:hover { color: var(--canvas-ink); }
.canvas-lang__item.is-active {
    color: var(--canvas-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

/* Burger 极简: 两条短线 */
.canvas-burger {
    display: inline-flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
    background: none;
    border: 0;
    cursor: pointer;
}
@media (min-width: 768px) { .canvas-burger { display: none; } }
.canvas-burger span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--canvas-ink);
}

/* Mobile menu 全屏覆盖 */
.canvas-mobile {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: var(--canvas-bg);
    padding: 80px var(--canvas-pad-sm) 40px;
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(.65, 0, .35, 1);
    pointer-events: none;
    display: flex;
    flex-direction: column;
}
.canvas-mobile.is-open {
    transform: translateY(0);
    pointer-events: auto;
}
.canvas-mobile__close {
    position: absolute;
    top: 16px;
    right: var(--canvas-pad-sm);
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--canvas-ink);
    padding: 8px;
}
.canvas-mobile__nav {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.canvas-mobile__nav a {
    font-family: var(--font-serif);
    font-size: 32px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.005em;
}
.canvas-mobile__lang {
    margin-top: auto;
    padding-top: 32px;
    border-top: 1px solid var(--canvas-line);
    display: flex;
    gap: 16px;
}
.canvas-mobile__lang a {
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--canvas-ink-mute);
}
.canvas-mobile__lang a.is-active {
    color: var(--canvas-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ============================================================
 * Main
 * ============================================================ */
.canvas-main { min-height: 60vh; }

/* ============================================================
 * Intro Section (首页极简引言区)
 * ============================================================ */
.canvas-intro {
    padding: 80px var(--canvas-pad) 56px;
    text-align: center;
}
@media (max-width: 767px) {
    .canvas-intro { padding: 48px var(--canvas-pad-sm) 32px; }
}

.canvas-intro__inner {
    max-width: 880px;
    margin: 0 auto;
}

.canvas-intro__index {
    display: block;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--canvas-ink-mute);
    margin-bottom: 24px;
}

.canvas-intro__quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 5vw, 56px);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--canvas-ink);
    margin: 0 0 28px;
}

.canvas-intro__meta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--canvas-ink-mute);
}
.canvas-intro__sep { color: var(--canvas-ink-faint); }

/* ============================================================
 * Grid Section
 * ============================================================ */
.canvas-grid {
    padding: 0 var(--canvas-pad) 80px;
}
@media (max-width: 767px) {
    .canvas-grid { padding: 0 var(--canvas-pad-sm) 48px; }
}

.canvas-grid__inner {
    max-width: 1400px;          /* 1600 → 1400: 4K 屏不再硬塞,卡片宽度从 ~400 拓展到 ~440,与详情正文 800 衔接更顺 */
    margin: 0 auto;
}

/* Masonry-like 错落网格:CSS Grid + Pinterest hack
 * grid-auto-rows: 8px 是基础行单位,卡片用 grid-row: span N 决定占多少 8px 行 → 实际高度
 * grid-auto-flow: row dense 让浏览器紧凑填充,消除 CSS columns 算法的列尾空白
 * nth-child(6n+X) 给卡片预设 6 种高度,产生自然错落感 (无需后端图片元数据)
 * 牺牲: 图片不再原比例完整显示,被 object-fit: cover 裁剪 (作品集行业标准,点详情看全图) */
.canvas-masonry {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 8px;
    grid-auto-flow: row dense;
    column-gap: 20px;
    row-gap: 0;            /* 行间距由卡片自身 margin-bottom 控制,避免 row-gap 干扰 span 计算 */
}
@media (min-width: 600px) {
    .canvas-masonry { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
    .canvas-masonry { grid-template-columns: repeat(var(--canvas-cols-lg, 3), 1fr); }
}
@media (min-width: 1400px) {
    .canvas-masonry { column-gap: 28px; }
}

/* ============================================================
 * Photo Card (Grid cell + Flex column 内部布局)
 * 卡片整体 = grid cell, 高度由 grid-row span 决定; figure flex:1 撑满主体, caption 自然贴底
 * ============================================================ */
.canvas-photo {
    display: flex;
    flex-direction: column;
    margin: 0 0 20px;        /* 行间距用 margin (grid row-gap 设了 0) */
    cursor: pointer;
    /* 默认 grid-row span (medium): 60 * 8 = 480px */
    grid-row: span 60;
}
@media (min-width: 1400px) { .canvas-photo { margin-bottom: 28px; } }

/* 错落:6 张一组循环,每张不同高度,模拟自然不规则 Masonry */
.canvas-photo:nth-child(6n+1) { grid-row: span 50; }   /* 400px short */
.canvas-photo:nth-child(6n+2) { grid-row: span 70; }   /* 560px tall */
.canvas-photo:nth-child(6n+3) { grid-row: span 60; }   /* 480px medium */
.canvas-photo:nth-child(6n+4) { grid-row: span 65; }   /* 520px tall-mid */
.canvas-photo:nth-child(6n+5) { grid-row: span 55; }   /* 440px short-mid */
.canvas-photo:nth-child(6n)   { grid-row: span 60; }   /* 480px medium */

.canvas-photo__figure {
    position: relative;
    overflow: hidden;
    flex: 1;                 /* 撑满 grid cell 主体高度,留 caption 在底部 */
    margin: 0;               /* figure 默认有 margin,清掉 */
    min-height: 0;           /* flex 子元素 min-height: 0 才能正确响应 flex shrink */
}

.canvas-photo__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;       /* 关键:裁剪填满 figure (Pinterest/Behance 同样做法) */
    transition: filter 0.6s cubic-bezier(.65, 0, .35, 1), transform 1.2s cubic-bezier(.65, 0, .35, 1);
    filter: grayscale(20%);
}
.canvas-photo:hover .canvas-photo__img {
    filter: grayscale(0%);
    transform: scale(1.02);
}

.canvas-photo__placeholder {
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(45deg,
            transparent 0,
            transparent 8px,
            var(--canvas-line) 8px,
            var(--canvas-line) 9px);
}

.canvas-photo__caption {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 14px 4px 0;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--canvas-ink-soft);
}
.canvas-photo__num {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.05em;
    color: var(--canvas-ink-faint);
    flex-shrink: 0;
}
.canvas-photo__title {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    font-weight: 400;
    color: var(--canvas-ink);
    flex: 1;
    line-height: 1.3;
}
.canvas-photo__category {
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--canvas-ink-mute);
    flex-shrink: 0;
}

/* ============================================================
 * Categories Section (首页底部分类索引)
 * ============================================================ */
.canvas-cats {
    padding: 80px var(--canvas-pad);
    border-top: 1px solid var(--canvas-line);
}
@media (max-width: 767px) {
    .canvas-cats { padding: 56px var(--canvas-pad-sm); }
}
.canvas-cats__inner { max-width: 1100px; margin: 0 auto; }

.canvas-cats__title {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--canvas-ink-mute);
    margin: 0 0 32px;
    text-align: center;
}

.canvas-cats__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}
@media (min-width: 640px) { .canvas-cats__list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .canvas-cats__list { grid-template-columns: repeat(3, 1fr); } }

.canvas-cats__item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 18px;
    row-gap: 4px;
    padding: 22px 4px;
    border-top: 1px solid var(--canvas-line);
    transition: background 0.25s;
}
.canvas-cats__list li:nth-child(2) .canvas-cats__item,
.canvas-cats__list li:nth-child(3) .canvas-cats__item {
    border-top: 1px solid var(--canvas-line);
}
.canvas-cats__item:hover { background: rgba(10, 10, 10, 0.02); }

.canvas-cats__num {
    grid-row: 1 / 3;
    align-self: start;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 28px;
    line-height: 1;
    color: var(--canvas-ink);
}
.canvas-cats__name {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 22px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--canvas-ink);
}
.canvas-cats__desc {
    font-size: 12px;
    color: var(--canvas-ink-soft);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* ============================================================
 * Category Page Head
 * ============================================================ */
.canvas-cat-head {
    padding: 80px var(--canvas-pad) 56px;
    text-align: center;
    border-bottom: 1px solid var(--canvas-line);
    margin-bottom: 56px;
}
@media (max-width: 767px) {
    .canvas-cat-head { padding: 48px var(--canvas-pad-sm) 32px; }
}
.canvas-cat-head__inner { max-width: 720px; margin: 0 auto; }
.canvas-cat-head__title {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(40px, 7vw, 80px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 16px 0 16px;
    color: var(--canvas-ink);
}
.canvas-cat-head__desc {
    font-size: 14px;
    color: var(--canvas-ink-soft);
    line-height: 1.6;
    margin: 0;
}

/* ============================================================
 * Breadcrumb
 * ============================================================ */
.canvas-breadcrumb {
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--canvas-ink-mute);
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.canvas-breadcrumb a:hover { color: var(--canvas-ink); }
.canvas-breadcrumb span[aria-hidden] { color: var(--canvas-ink-faint); }

/* ============================================================
 * Pagination (极简箭头)
 * ============================================================ */
.canvas-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
    margin: 80px 0 24px;
    padding-top: 32px;
    border-top: 1px solid var(--canvas-line);
}
.canvas-pagination__link {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--canvas-ink-soft);
    transition: color 0.25s;
}
.canvas-pagination__link:hover { color: var(--canvas-ink); }
.canvas-pagination__info {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--canvas-ink-mute);
}

/* ============================================================
 * Work / Article 详情页
 * ============================================================ */
.canvas-work-hero {
    position: relative;
    margin-top: -1px;
    background: #000;
    overflow: hidden;
}
/* 大图底部 80px 渐变遮罩,从透明过渡到米白主题色,消除大图→正文的硬切感 */
.canvas-work-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 80px;
    background: linear-gradient(to bottom, rgba(246, 244, 240, 0), var(--canvas-bg));
    pointer-events: none;
}
.canvas-work-hero__img {
    width: 100%;
    height: auto;
    max-height: var(--canvas-cover-max);
    object-fit: cover;
    display: block;
    margin: 0 auto;
}

.canvas-work {
    padding-bottom: 80px;
}

.canvas-work__head {
    padding: clamp(48px, 7vh, 96px) var(--canvas-pad) 48px;   /* 上方留白响应式呼吸空间 */
    text-align: center;
}
@media (max-width: 767px) {
    .canvas-work__head { padding: 40px var(--canvas-pad-sm) 32px; }
}
.canvas-work__head-inner { max-width: var(--canvas-max-narrow); margin: 0 auto; }

.canvas-work__title {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(36px, 6vw, 64px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--canvas-ink);
    margin: 16px 0 20px;
}

.canvas-work__lead {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 19px;
    line-height: 1.55;
    color: var(--canvas-ink-soft);
    margin: 0 auto 28px;
    max-width: 580px;
}

/* Metadata 表 (拍摄信息 — 用 dl/dt/dd 语义) */
.canvas-work__meta {
    display: inline-grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, max-content));
    gap: 32px;
    margin: 0;
    padding-top: 24px;
    border-top: 1px solid var(--canvas-line);
}
.canvas-work__meta > div {
    text-align: left;
}
.canvas-work__meta dt {
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--canvas-ink-mute);
    margin-bottom: 4px;
}
.canvas-work__meta dd {
    margin: 0;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    color: var(--canvas-ink);
}

.canvas-work__body {
    max-width: var(--canvas-max-text);
    margin: 0 auto;
    padding: 0 var(--canvas-pad);
}
@media (max-width: 767px) {
    .canvas-work__body { padding: 0 var(--canvas-pad-sm); }
}
/* 平板专用断点:正文/标题/封面都略收窄,避免桌面布局在中等屏上失衡 */
@media (min-width: 768px) and (max-width: 1023px) {
    .canvas-work__body { max-width: 720px; }
    .canvas-work__head-inner { max-width: 620px; }
    .canvas-work-hero__img { max-height: clamp(360px, 50vh, 480px); }
}

/* 富文本内容 */
.canvas-work__content {
    font-size: 16px;
    line-height: 1.85;
    color: var(--canvas-ink);
    font-weight: 300;
}
.canvas-work__content > * { max-width: 100%; }
.canvas-work__content > *:first-child { margin-top: 0; }
.canvas-work__content p { margin: 0 0 1.5em; }
.canvas-work__content h2,
.canvas-work__content h3,
.canvas-work__content h4 {
    font-family: var(--font-serif);
    font-weight: 400;
    font-style: italic;
    line-height: 1.25;
    margin: 2em 0 0.6em;
    color: var(--canvas-ink);
}
.canvas-work__content h2 { font-size: 1.7em; }
.canvas-work__content h3 { font-size: 1.35em; }
.canvas-work__content h4 { font-size: 1.15em; }
.canvas-work__content a {
    color: var(--canvas-ink);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
    transition: color 0.2s;
}
.canvas-work__content a:hover { color: var(--canvas-accent); }
.canvas-work__content blockquote {
    margin: 1.8em 0;
    padding: 0 0 0 24px;
    border-left: 1px solid var(--canvas-ink-faint);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.15em;
    color: var(--canvas-ink-soft);
}
.canvas-work__content blockquote p:last-child { margin-bottom: 0; }
.canvas-work__content code {
    padding: 1px 6px;
    background: rgba(10, 10, 10, 0.06);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 0.92em;
}
.canvas-work__content pre {
    padding: 18px 22px;
    background: var(--canvas-ink);
    color: #e9e6df;
    overflow-x: auto;
    margin: 1.6em 0;
    font-size: 13px;
    line-height: 1.6;
}
.canvas-work__content pre code { background: transparent; padding: 0; color: inherit; }
.canvas-work__content img {
    max-width: 100%;
    height: auto;
    margin: 1.6em 0;
    display: block;
}
.canvas-work__content figure { margin: 2em 0; }
.canvas-work__content figure figcaption {
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--canvas-ink-mute);
    text-align: center;
    margin-top: 8px;
}
.canvas-work__content ul,
.canvas-work__content ol {
    padding-left: 1.5em;
    margin: 1em 0 1.5em;
}
.canvas-work__content li { margin-bottom: 0.4em; }
.canvas-work__content hr {
    border: 0;
    height: 1px;
    background: var(--canvas-line);
    margin: 2.5em 0;
}
.canvas-work__content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 14px;
}
.canvas-work__content th,
.canvas-work__content td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--canvas-line);
    text-align: left;
}
.canvas-work__content th { font-weight: 500; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }

.canvas-work__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--canvas-line);
}
.canvas-work__tag {
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--canvas-ink-mute);
    padding: 4px 0;
    transition: color 0.2s;
}
.canvas-work__tag:hover { color: var(--canvas-ink); }
.canvas-work__tag::before { content: '#'; margin-right: 2px; opacity: 0.4; }

/* Work nav (上一篇/下一篇) */
.canvas-work-nav {
    max-width: 1100px;
    margin: 80px auto 0;
    padding: 32px var(--canvas-pad) 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    border-top: 1px solid var(--canvas-line);
}
@media (max-width: 767px) {
    .canvas-work-nav {
        padding: 32px var(--canvas-pad-sm) 0;
        gap: 20px;
    }
}
.canvas-work-nav__item { display: block; }
.canvas-work-nav__item--next { text-align: right; }
.canvas-work-nav__label {
    display: block;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--canvas-ink-mute);
    margin-bottom: 6px;
}
.canvas-work-nav__title {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 18px;
    line-height: 1.3;
    color: var(--canvas-ink);
}

/* ============================================================
 * Page (静态页面 = about/contact 等)
 * ============================================================ */
.canvas-page {
    max-width: var(--canvas-max-text);
    margin: 0 auto;
    padding: 80px var(--canvas-pad);
}
@media (max-width: 767px) {
    .canvas-page { padding: 48px var(--canvas-pad-sm); }
}
.canvas-page__head {
    text-align: center;
    margin-bottom: 56px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--canvas-line);
}
.canvas-page__title {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(36px, 6vw, 64px);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}
.canvas-page__meta {
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--canvas-ink-mute);
    margin: 0;
}
.canvas-page .canvas-work__content { padding: 0; }

/* ============================================================
 * Empty state
 * ============================================================ */
.canvas-empty {
    text-align: center;
    padding: 120px var(--canvas-pad);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 22px;
    color: var(--canvas-ink-mute);
}

/* ============================================================
 * 404
 * ============================================================ */
.canvas-404 {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px var(--canvas-pad);
}
.canvas-404__inner { text-align: center; max-width: 520px; }
.canvas-404__num {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(96px, 16vw, 180px);
    line-height: 1;
    color: var(--canvas-ink);
    display: block;
    margin-bottom: 24px;
}
.canvas-404__title {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 28px;
    margin: 0 0 12px;
}
.canvas-404__desc {
    color: var(--canvas-ink-soft);
    margin: 0 0 32px;
    line-height: 1.6;
}
.canvas-404__back {
    font-family: var(--font-sans);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--canvas-ink);
    border-bottom: 1px solid var(--canvas-ink);
    padding-bottom: 4px;
    transition: opacity 0.25s;
}
.canvas-404__back:hover { opacity: 0.6; }

/* ============================================================
 * Footer
 * ============================================================ */
.canvas-footer {
    border-top: 1px solid var(--canvas-line);
    margin-top: 80px;
    padding: 64px var(--canvas-pad) 32px;
}
@media (max-width: 767px) {
    .canvas-footer { padding: 48px var(--canvas-pad-sm) 24px; }
}
.canvas-footer__inner { max-width: 1300px; margin: 0 auto; }
.canvas-footer__main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
    margin-bottom: 56px;
}
@media (min-width: 768px) {
    .canvas-footer__main { grid-template-columns: 2fr 1fr 1fr; gap: 64px; }
}
.canvas-footer__name {
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 32px;
    line-height: 1.1;
    margin: 0 0 12px;
    color: var(--canvas-ink);
}
.canvas-footer__desc {
    font-size: 13px;
    line-height: 1.6;
    color: var(--canvas-ink-soft);
    max-width: 380px;
    margin: 0;
}
.canvas-footer__title {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--canvas-ink-mute);
    margin-bottom: 16px;
}
.canvas-footer__index ul,
.canvas-footer__social ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.canvas-footer__index li,
.canvas-footer__social li { margin-bottom: 8px; }
.canvas-footer__index a,
.canvas-footer__social a {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 16px;
    color: var(--canvas-ink);
    transition: color 0.2s;
}
.canvas-footer__index a:hover,
.canvas-footer__social a:hover { color: var(--canvas-accent); }

.canvas-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 24px;
    border-top: 1px solid var(--canvas-line);
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--canvas-ink-mute);
}
.canvas-footer__signature {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--canvas-ink);
}

/* ============================================================
 * Lightbox (原生 <dialog>)
 * ============================================================ */
.canvas-lightbox {
    margin: 0;
    padding: 0;
    border: 0;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    background: rgba(10, 10, 10, 0.96);
    color: #fff;
}
.canvas-lightbox::backdrop { background: rgba(10, 10, 10, 0.96); }
.canvas-lightbox[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}
.canvas-lightbox__close {
    position: fixed;
    top: 24px; right: 24px;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.7);
    padding: 12px;
    cursor: pointer;
    z-index: 2;
    transition: color 0.2s;
}
.canvas-lightbox__close:hover { color: #fff; }
.canvas-lightbox__nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, 0.5);
    padding: 16px;
    cursor: pointer;
    z-index: 2;
    transition: color 0.2s;
}
.canvas-lightbox__prev { left: 24px; }
.canvas-lightbox__next { right: 24px; }
.canvas-lightbox__nav:hover { color: #fff; }
.canvas-lightbox__figure {
    margin: 0;
    max-width: 92vw;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.canvas-lightbox__img {
    max-width: 92vw;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}
.canvas-lightbox__caption {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-top: 16px;
    font-family: var(--font-sans);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
}
.canvas-lightbox__counter {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.05em;
}
.canvas-lightbox__title {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 14px;
    color: #fff;
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
    .canvas-photo__img { transition: none; }
}