/* ========================================
   COENRAD.COM — Split Layout
   ======================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: 'Terminal Grotesque';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/velvetyne/terminal-grotesque.woff2') format('woff2');
}

@font-face {
    font-family: 'Le Murmure';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/velvetyne/le-murmure.woff2') format('woff2');
}

@font-face {
    font-family: 'Avara';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/velvetyne/avara-bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Resistance';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/velvetyne/resistance-generale.woff2') format('woff2');
}

:root {
    --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-serif: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --text-primary: #1a1a1a;
    --text-secondary: #666;
    --text-tertiary: #999;
    --border-color: #d0d0d0;
    --border-light: #e8e8e8;
    --bg: #fff;
    --nav-control-y: 38px;
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.27;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    min-height: 100dvh;      /* match dynamic viewport on mobile Safari */
    overflow: auto;          /* sub-pages in iframe need to scroll */
}

/* ========================================
   Minimal Scrollbar — thumb = short tick line
   NOTE: do NOT set scrollbar-color / scrollbar-width globally —
   Chrome 121+ switches to native rendering and ignores ::-webkit-scrollbar.
   ======================================== */

::-webkit-scrollbar {
    width: 14px;
    height: 14px;
    background: transparent;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Thumb itself is transparent — a short centered line is drawn via gradient.
   The line's position within the track indicates current scroll position. */
::-webkit-scrollbar-thumb {
    background-color: transparent;
    background-image: linear-gradient(#000, #000);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 12px 1px;   /* default: short horizontal tick (vertical scrollbar) */
    border: none;
    border-radius: 0;
    box-shadow: none;
}

::-webkit-scrollbar-thumb:horizontal {
    background-size: 1px 12px;   /* short vertical tick for horizontal scrollbar */
}

::-webkit-scrollbar-corner,
::-webkit-scrollbar-button {
    background: transparent;
    display: none;
}

/* Dark-background containers — flip to white tick */
.demo-page ::-webkit-scrollbar-thumb,
.subpage-dark ::-webkit-scrollbar-thumb {
    background-image: linear-gradient(#fff, #fff);
}

/* Hide old glassmorphism elements */
.bg-canvas, .noise { display: none; }

/* ========================================
   Header
   ======================================== */

.site-header {
    position: relative;
    z-index: 100;
    padding: 10px 24px;
    background: var(--bg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo-link {
    display: inline-block;
    text-decoration: none;
    height: 50px;
    width: max-content;
    margin-left: -4px;          /* nudge logo left to visually align with nav icon column */
}

/* Logo blocks = 10 × 1.5 = 15 svg units.
   At 50px svg height with viewBox height 62, each block renders at
   15 × (50/62) ≈ 12px — matching .nav-item-icon. */
.logo-svg {
    display: block;
    height: 50px;
    width: 90.32px;
    overflow: visible;
}

/* --- Logo blocks --- */
.logo-block {
    transform-origin: 5px 5px;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), fill 0.4s ease;
}

.b1 { fill: #ff0000; transform: translate(6px, 22px) scale(1.5); }
.b2 { fill: #dd0000; transform: translate(21px, 22px) scale(1.5); }
.b3 { fill: #bb0000; transform: translate(36px, 22px) scale(1.5); }
.b4 { fill: #990000; transform: translate(51px, 22px) scale(1.5); }
.b5 { fill: #770000; transform: translate(66px, 22px) scale(1.5); }
.b6 { fill: #550000; transform: translate(81px, 22px) scale(1.5); }
.b7 { fill: #330000; transform: translate(96px, 22px) scale(1.5); }

.logo-svg:hover .b1 { fill: #ff0000; transform: translate(2px, 23px) rotate(-57deg) scale(1.02); }
.logo-svg:hover .b2 { fill: #dd0000; transform: translate(7px, 37px) rotate(-47deg) scale(1.11); }
.logo-svg:hover .b3 { fill: #bb0000; transform: translate(18px, 45px) rotate(-39deg) scale(1.23); }
.logo-svg:hover .b4 { fill: #990000; transform: translate(34px, 47px) rotate(-33deg) scale(1.37); }
.logo-svg:hover .b5 { fill: #770000; transform: translate(49px, 41px) rotate(-28deg) scale(1.52); }
.logo-svg:hover .b6 { fill: #550000; transform: translate(61px, 28px) rotate(-23deg) scale(1.68); }
.logo-svg:hover .b7 { fill: #330000; transform: translate(65px, 7px) rotate(-20deg) scale(1.85); }

.b2 { transition-delay: 0.02s; }
.b3 { transition-delay: 0.04s; }
.b4 { transition-delay: 0.06s; }
.b5 { transition-delay: 0.08s; }
.b6 { transition-delay: 0.10s; }
.b7 { transition-delay: 0.12s; }

.back-link {
    font-size: 11px;
    font-weight: 300;
    color: var(--text-tertiary);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 0.2s;
}

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

/* ========================================
   Split Layout
   ======================================== */

.split-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;         /* prevent body-level scroll on main page */
}

/* Iframe fullscreen: smoothly collapse panel-left / panel-middle / dividers.
   Not display:none — that kills the transition. */
.panel-left {
    transition: width 0.45s cubic-bezier(0.32, 0.72, 0, 1),
                padding 0.45s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.35s ease;
}
.divider {
    transition: width 0.45s cubic-bezier(0.32, 0.72, 0, 1),
                opacity 0.3s ease;
}
body.iframe-fullscreen .panel-left {
    width: 0 !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}
body.iframe-fullscreen .panel-middle {
    width: 0 !important;
    opacity: 0;
    pointer-events: none;
}
body.iframe-fullscreen .divider,
body.iframe-fullscreen .divider-left {
    width: 0 !important;
    opacity: 0;
    pointer-events: none;
}

.panel-left {
    width: 23%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px 36px 0;
    flex-shrink: 0;
    container-type: inline-size;
    container-name: panelLeft;
}

.divider {
    width: 1px;
    background: var(--border-color);
    cursor: col-resize;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    transition: background 0.2s;
}

.divider:hover,
.divider:active {
    background: var(--text-primary);
}

/* Left divider (between panel-left and panel-middle): only interactive when middle visible */
.divider-left {
    width: 0;
    background: transparent;
    pointer-events: none;
    transition: width 0.28s cubic-bezier(0.32, 0.72, 0, 1), background 0.2s;
}

/* Expanded state is toggled via body.middle-open flag (set by JS) */
body.middle-open .divider-left {
    width: 1px;
    background: var(--border-color);
    pointer-events: auto;
}

body.middle-open .divider-left:hover,
body.middle-open .divider-left:active {
    background: var(--text-primary);
}

.panel-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;          /* iframe handles its own scroll */
    position: relative;
    background: var(--bg);
}

/* ========================================
   Middle Panel — Latest list
   ======================================== */

.panel-middle {
    width: 0;
    flex-shrink: 0;
    overflow: hidden;
    padding: 20px 0 0;
    background: var(--bg);
    transition: width 0.28s cubic-bezier(0.32, 0.72, 0, 1),
                padding 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.panel-middle.panel-middle-visible {
    width: 26%;
    padding: 20px 28px 0;
}

/* Header row inside middle panel: back arrow + search aligned horizontally */
.middle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 50px;
}

/* Back link inside middle panel — Y aligned with main logo */
.middle-back {
    display: block;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-decoration: none;
    /* logo 垂直中心 ≈ panel-left padding-top 20 + 50/2 = 45 → 让文字中心贴近该行 */
    height: 50px;
    line-height: 50px;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.middle-back:hover {
    opacity: 0.55;
}

/* 搜索：默认就一个 "_*/" 小符号，点击向左展开一条下划线输入框 */
.middle-search {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    max-width: 70%;
    min-width: 0;
    /* 整体右对齐，让 input 从右侧往左"延伸" */
    justify-content: flex-end;
    gap: 8px;
}

.middle-search-toggle {
    flex: 0 0 auto;
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    line-height: 50px;           /* 与返回箭头同行高，天然垂直对齐 */
    height: 50px;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.2s ease;
}

.middle-search-toggle:hover {
    opacity: 0.55;
}

.middle-search.is-expanded .middle-search-toggle {
    /* 展开时符号稍暗，提示当前焦点在输入框 */
    opacity: 0.45;
}

.middle-search-input {
    flex: 0 1 auto;
    width: 0;                    /* 默认收起：0 宽度 */
    min-width: 0;
    height: 22px;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-bottom: 1px solid transparent;  /* 收起时下划线隐形 */
    outline: none;
    text-transform: lowercase;
    caret-color: var(--text-primary);
    /* 展开动画：宽度 + 下划线颜色 一起过渡 */
    transition: width 0.35s cubic-bezier(0.32, 0.72, 0, 1),
                border-color 0.25s ease 0.1s,
                padding 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    -webkit-appearance: none;
    appearance: none;
}

.middle-search.is-expanded .middle-search-input {
    width: 140px;                /* 展开宽度，随面板伸缩由 flex 压缩 */
    padding: 0 2px 2px;
    border-bottom-color: var(--text-primary);
}

/* focus 下的下划线闪烁：淡入淡出，提示"光标活跃" */
.middle-search.is-expanded .middle-search-input:focus {
    animation: middle-search-underline-blink 1.1s ease-in-out infinite;
}

@keyframes middle-search-underline-blink {
    0%, 100% { border-bottom-color: var(--text-primary); }
    50%      { border-bottom-color: rgba(0, 0, 0, 0.25); }
}

/* 清掉浏览器默认 decoration */
.middle-search-input::-webkit-search-decoration,
.middle-search-input::-webkit-search-cancel-button,
.middle-search-input::-webkit-search-results-button,
.middle-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.latest-empty {
    padding: 12px 0;
    font-family: var(--font-sans);
    font-size: 12px;
    color: var(--text-tertiary, #999);
    letter-spacing: 0.02em;
    text-transform: lowercase;
}

.latest-list {
    display: flex;
    flex-direction: column;
    /* Top offset set by JS to align with .panel-left first nav-item exactly */
    margin-top: 0;
}

.latest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.5px 0;
    cursor: pointer;
    gap: 12px;
    font-size: 12px;
    font-weight: 400;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    /* 1.02 太紧，descender(g/y) 会被 .latest-title 的 overflow 裁掉；给一点呼吸 */
    line-height: 1.25;
    transition: opacity 0.15s ease;
}

.latest-item:hover {
    opacity: 0.55;
}

.latest-title {
    text-align: left;
    flex: 0 1 auto;          /* 只占文字本身宽度，不强行拉到容器宽度 */
    white-space: nowrap;     /* 单行显示 */
    /* 不加 overflow:hidden / text-overflow，避免 ascender/descender 被裁 */
}

.latest-time {
    text-align: right;
    flex-shrink: 0;
    color: var(--text-tertiary, #999);
    font-variant-numeric: tabular-nums;
}

.latest-item-active .latest-title {
    font-weight: 500;
}

/* ========================================
   Left Panel — Intro
   ======================================== */

/* Footer at bottom of left panel — pushed down by margin-top:auto inside flex column */
.left-footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: auto 0 24px;      /* auto top → sticks to bottom of panel-left */
    padding-top: 20px;
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--text-tertiary, #888);
    text-transform: uppercase;
    flex-shrink: 0;
}

.left-footer-year {
    font-variant-numeric: tabular-nums;
}

.left-footer-copy {
    text-align: right;
}

/* ========================================
   Left Panel — Navigation Sections
   ======================================== */

.nav-section {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.nav-section:first-of-type {
    margin-top: 71px;       /* ≈ 3 empty nav rows (17px/row) below logo */
}

/* Empty-row gap between adjacent sections (≈ 1 nav row = 17px) */
.nav-section + .nav-section {
    margin-top: 17px;
}

.left-footer-art {
    margin: 24px -36px 0;
    overflow: hidden;
    height: 190px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.left-footer-art img {
    display: block;
    width: auto;
    height: 190px;
    max-width: none;
    flex: 0 0 auto;
}

.nav-section-header {
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    padding: 48px 0 0;
}

.nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2.5px 0;
    cursor: pointer;
    gap: 12px;
}

.nav-item-active .nav-item-title {
    font-weight: 500;
}

.nav-item-index {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-primary);
    width: 120px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.nav-item-title {
    font-size: 12px;
    font-weight: 400;
    text-transform: capitalize;     /* Title Case per word */
    letter-spacing: 0.02em;
    color: var(--text-primary);
    line-height: 1.02;
    text-align: right;
}

.nav-item-icon {
    width: 12px;
    height: 12px;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
    transform-origin: center;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-item:hover .nav-item-icon,
.nav-item-active .nav-item-icon {
    transform: scale(1.35);
}

/* ========================================
   Right Panel — Default + Iframe
   ======================================== */

.right-default {
    display: flex;
    flex: 1;
    align-items: stretch;
    justify-content: stretch;
    padding: 24px 28px 0;
    overflow-y: auto;
}

.symbol-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 44px 36px;
    align-content: center;
    width: min(100%, 820px);
    min-height: 100%;
    margin: 0 auto;
    padding: 28px 12px 0;
}

.symbol-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: 0;
}

.symbol-center-img {
    width: 100%;
    height: 100%;
    max-width: 420px;
    max-height: 420px;
    object-fit: contain;
    mix-blend-mode: multiply;
    display: block;
}

.symbol-mark {
    width: min(100%, 168px);
    max-height: 168px;
    color: #000;
    opacity: 0.15;
}

.right-iframe {
    display: none;
    flex: 1;
    width: 100%;
    border: none;
}

/* Sub-pages in iframe — hide header (circle button replaces it) */
.in-iframe .site-header {
    display: none;
}

/* ========================================
   Hover Preview Image (follows cursor)
   ======================================== */

.hover-preview {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s ease;
    width: 180px;
    will-change: transform;
}

.hover-preview-visible {
    opacity: 1;
}

.hover-preview img {
    width: 100%;
    height: auto;
    display: block;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    aspect-ratio: auto;
    object-fit: cover;
}

.hover-preview.rect-mode {
    width: 180px;
}

.hover-preview.rect-mode img {
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* Droplet mode: square aspect for round/droplet shape */
.hover-preview.droplet-mode {
    width: 135px;
}
.hover-preview.droplet-mode img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

/* ========================================
   Sub-pages — Light Theme
   ======================================== */

.subpage {
    position: relative;
    z-index: 1;
    padding: 24px 40px;
}

.subpage-hero {
    margin-bottom: 40px;
}

.subpage-hero-title {
    font-size: 56px;
    font-weight: 100;
    line-height: 1;
    color: var(--border-color);
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.subpage-hero-subtitle {
    font-size: 12px;
    font-weight: 300;
    color: var(--text-secondary);
    max-width: 480px;
    line-height: 1.28;
}

.subpage-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.subpage-card {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
}

.subpage-card:hover {
    border-color: var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.subpage-card img {
    width: 100%;
    display: block;
}

.subpage-card-info {
    padding: 14px 16px;
}

.subpage-card-title {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.subpage-card-meta {
    font-size: 9px;
    font-weight: 300;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Items catalog page — product wall */
.items-catalog-body .bg-canvas,
.items-catalog-body .noise {
    display: none;
}

.items-catalog-page {
    padding: 92px 36px 44px;
    background: #fff;
    min-height: 100vh;
}

.items-catalog-filterbar {
    position: fixed;
    top: var(--nav-control-y);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 14px;
}

.items-density-toggle,
.items-catalog-fullscreen {
    position: fixed;
    top: var(--nav-control-y);
    z-index: 200;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    color: var(--text-primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    letter-spacing: 0.02em;
    transition: opacity 0.2s, transform 0.3s ease;
}

.items-density-toggle {
    left: 36px;
}

.items-density-toggle.is-minus {
    transform: rotate(180deg);
}

.items-catalog-fullscreen {
    right: 36px;
}

.items-density-toggle:hover,
.items-catalog-fullscreen:hover {
    opacity: 0.55;
}

.items-catalog-filter.active,
.video-flow-filter.active {
    font-weight: 500;
}

.items-catalog-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 56px 28px;
    align-items: start;
}

.items-catalog-expanded .items-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 68px 48px;
}

.items-catalog-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    min-width: 0;
    text-decoration: none;
}

.items-catalog-ghost {
    position: absolute;
    margin: 0;
    pointer-events: none;
    z-index: 5;
}

.items-catalog-figure {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0 4px;
}

.items-catalog-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    transition: opacity 0.24s ease;
}

.items-catalog-code {
    width: 100%;
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    color: #2f2f2f;
    letter-spacing: 0.02em;
    text-align: left;
    padding-left: 4px;
}

.items-product-open {
    overflow: hidden;
}

.items-product-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: none;
    background: #fff;
    color: var(--text-primary);
    font-family: var(--font-sans);
}

.items-product-overlay.is-open {
    display: block;
}

.items-product-stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-rows: 24px minmax(0, 1fr) 42px;
    align-items: center;
    justify-items: center;
    padding: clamp(82px, 10vh, 128px) 80px clamp(86px, 11vh, 132px);
}

.items-product-media {
    width: min(48vw, 560px);
    height: min(58vh, 560px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.items-product-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    will-change: transform;
}

.items-product-image-exit {
    position: fixed;
    z-index: 610;
    display: block;
    object-fit: contain;
    object-position: center bottom;
    pointer-events: none;
    will-change: transform;
}

.items-product-code {
    width: min(48vw, 560px);
    align-self: start;
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #2f2f2f;
    text-align: center;
    padding-left: 0;
}

.items-product-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    min-height: 42px;
}

.items-product-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 18px;
}

.items-product-dot {
    width: 4px;
    height: 4px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.items-product-dot.is-active {
    background: var(--text-primary);
}

.items-product-view {
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: #2f2f2f;
    text-align: center;
}

.items-product-arrow {
    position: fixed;
    z-index: 620;
    border: 0;
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0.02em;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.items-product-arrow:hover {
    opacity: 0.55;
}

.items-product-arrow-left {
    top: 48%;
    left: 25.5%;
    transform: translate(-50%, -50%);
}

.items-product-arrow-right {
    top: 48%;
    right: 25.5%;
    transform: translate(50%, -50%);
}

.items-catalog-meta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 4px;
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    color: #2f2f2f;
    letter-spacing: 0.02em;
}

.items-catalog-name,
.items-catalog-number {
    white-space: nowrap;
}

.items-catalog-number {
    text-align: right;
}

.characters-catalog-body .items-catalog-card {
    gap: 0;
    justify-content: flex-end;
}

.characters-catalog-body .items-catalog-meta {
    display: none;
}

.characters-catalog-body .items-catalog-page {
    padding-top: 132px;
}

.characters-catalog-body .items-catalog-grid {
    gap: 28px 28px;
}

.characters-catalog-body .items-catalog-figure {
    aspect-ratio: auto;
    height: 140px;
    padding: 0;
    align-items: flex-end;
}

.characters-catalog-body .items-catalog-figure img {
    width: auto;
    height: 100%;
    max-width: 100%;
    object-fit: contain;
    object-position: center bottom;
    transform: scale(1.15);
    transform-origin: center bottom;
}

.characters-catalog-body.items-catalog-expanded .items-catalog-figure {
    height: 220px;
}

.characters-catalog-body.items-catalog-expanded .items-catalog-grid {
    gap: 36px 48px;
}

.characters-catalog-body .items-product-code {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
}

.characters-catalog-body .items-product-name,
.characters-catalog-body .items-product-number {
    white-space: nowrap;
}

.characters-catalog-body .items-product-number {
    text-align: right;
}

.graphics-catalog-body .items-catalog-page {
    padding-top: 132px;
}

.graphics-catalog-body .items-catalog-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 42px 28px;
}

.graphics-catalog-body.items-catalog-expanded .items-catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 58px 48px;
}

.graphics-catalog-body .items-catalog-card {
    justify-content: flex-end;
}

.graphics-catalog-body .items-catalog-figure {
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: #fafaf8;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.graphics-catalog-body .items-catalog-card[data-category="monogram"] .items-catalog-figure {
    padding: 0;
}

.graphics-catalog-body .items-catalog-figure img {
    object-position: center center;
}

.graphics-catalog-body .items-catalog-card[data-category="monogram"] .items-catalog-figure img {
    object-fit: cover;
}

.graphics-catalog-body.items-catalog-expanded .items-catalog-figure {
    padding: 22px;
}

.graphics-catalog-body.items-catalog-expanded .items-catalog-card[data-category="monogram"] .items-catalog-figure {
    padding: 0;
}

/* Item detail page */
.item-detail-body {
    background: #fff;
}

.item-detail-page {
    min-height: 100vh;
    background: #fff;
    padding: 96px 36px 44px;
}

.item-detail-back {
    position: fixed;
    top: 20px;
    left: 36px;
    z-index: 200;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-decoration: none;
    transition: opacity 0.2s;
}

.item-detail-back:hover {
    opacity: 0.55;
}

.item-detail-header {
    margin-bottom: 32px;
}

.item-detail-code-row {
    display: flex;
    gap: 18px;
    margin-bottom: 8px;
    font-size: 11px;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.item-detail-title {
    font-size: 26px;
    line-height: 1.05;
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.item-detail-section {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 0 22px;
    border-top: 1px solid var(--border-light);
}

.item-detail-index {
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding-top: 4px;
}

.item-detail-panel {
    min-width: 0;
}

.item-detail-hero-panel,
.item-detail-wide-panel,
.item-detail-inline-figure {
    background: #fff;
    border: 1px solid var(--border-light);
}

.item-detail-hero-figure,
.item-detail-wide-figure,
.item-detail-inline-figure {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 18px;
}

.item-detail-hero-figure {
    min-height: 520px;
}

.item-detail-wide-figure {
    aspect-ratio: 16 / 9;
}

.item-detail-hero-figure img,
.item-detail-wide-figure img,
.item-detail-inline-figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
}

.item-detail-duo,
.item-detail-trio {
    display: grid;
    gap: 14px;
}

.item-detail-duo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.item-detail-trio {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.item-detail-inline-figure-small {
    aspect-ratio: 4 / 5;
}

.item-detail-notes {
    display: grid;
    gap: 10px;
}

.item-detail-note {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 0;
    border-top: 1px solid var(--border-light);
}

.item-detail-note:first-child {
    border-top: none;
    padding-top: 0;
}

.item-detail-note-key {
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.item-detail-note-text {
    font-size: 12px;
    line-height: 1.35;
    color: var(--text-primary);
}

.item-detail-skus {
    display: grid;
    gap: 14px;
}

.item-detail-sku-label {
    font-size: 10px;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.item-detail-sku-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.item-detail-sku {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border-light);
    border-radius: 999px;
    text-decoration: none;
    font-size: 11px;
    color: var(--text-primary);
    transition: border-color 0.2s, background-color 0.2s;
}

.item-detail-sku.is-active,
.item-detail-sku:hover {
    border-color: var(--border-color);
    background: rgba(0, 0, 0, 0.03);
}

/* Items sub-page: masonry */
.items-subgrid {
    columns: 4;
    column-gap: 16px;
}

.items-subcard {
    break-inside: avoid;
    margin-bottom: 16px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s;
}

.items-subcard:hover {
    border-color: var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.items-subcard img {
    width: 100%;
    display: block;
}

.items-subcard-label {
    padding: 10px 14px;
    font-size: 10px;
    font-weight: 300;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
}

/* ========================================
   Article Page (blog detail) — Light
   ======================================== */

.article-page {
    position: relative;
    z-index: 1;
    padding: 40px;
    display: flex;
    justify-content: center;
}

.article {
    max-width: 600px;
    width: 100%;
    padding: 48px 0;
}

.article-header {
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
}

.article-date {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

.article-title {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-primary);
}

.article-body h2 {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-top: 32px;
    margin-bottom: 12px;
}

.article-body h2:first-child {
    margin-top: 0;
}

.article-body p {
    font-size: 13px;
    font-weight: 300;
    line-height: 1.52;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

.article-body p:last-child {
    margin-bottom: 0;
}

/* ========================================
   Post Sync Feed — Collapsible line layout
   ======================================== */

.post-sync-body {
    background: #fcfcfc;
}

.post-page {
    --sync-post-open-height: 620px;
    --sync-post-content-top-gap: 31px;
    --post-feed-top-gap: 12px;
    --post-left-x: 52px;
    --post-right-x: 30px;
    position: relative;
    z-index: 1;
    min-height: 100vh;
    padding: 6px var(--post-right-x) 24px var(--post-left-x);
    font-family: var(--font-sans);
}

.post-feed {
    width: 100%;
    padding-top: var(--post-feed-top-gap);
}

.post-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: var(--post-right-x);
    z-index: 220;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    pointer-events: none;
}

.post-topbar-left,
.post-topbar-center,
.post-topbar-right {
    position: absolute;
    top: var(--post-nav-y, var(--nav-control-y));
    height: 16px;
    display: flex;
    align-items: center;
    pointer-events: auto;
}

.post-topbar-left {
    left: 30px;
    justify-content: flex-start;
}

.post-topbar-center {
    left: 50%;
    transform: translateX(-50%);
    gap: 14px;
}

.post-topbar-right {
    right: 0;
    gap: 14px;
    justify-content: flex-end;
}

.post-year-picker {
    flex: 0 0 auto;
}

.post-fullscreen {
    position: static;
    flex: 0 0 auto;
}

.sync-post.is-hidden {
    display: none;
}

.post-feed.is-entering .sync-post:not(.is-hidden) {
    overflow: hidden;
    transform-origin: top left;
    animation: post-line-unfold 0.86s cubic-bezier(0.22, 0.84, 0.24, 1) both;
}

.post-feed.is-entering .sync-post:not(.is-hidden) .sync-post-summary {
    transform-origin: top left;
    animation: post-summary-unfold 0.86s cubic-bezier(0.22, 0.84, 0.24, 1) both;
}

@keyframes post-line-unfold {
    from {
        opacity: 0;
        max-height: 3px;
    }
    to {
        opacity: 1;
        max-height: 760px;
    }
}

@keyframes post-summary-unfold {
    from {
        opacity: 0;
        transform: scaleY(0.12);
    }
    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

.sync-post {
    position: relative;
    width: 100%;
    border-bottom: 1px solid transparent;
}

.sync-post + .sync-post {
    margin-top: -25px;
}

.sync-post.is-first-visible {
    margin-top: 0;
}

.sync-post-summary {
    width: 100%;
    min-height: 40px;
    display: flex;
    gap: 0;
    align-items: baseline;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sync-post-summary::-webkit-scrollbar {
    display: none;
}

.sync-post-title,
.sync-post-info time {
    flex: 0 0 auto;
    font-family: var(--font-sans);
    font-size: clamp(28px, 2.55vw, 44px);
    font-weight: 400;
    line-height: 1.08;
    color: var(--text-primary);
    letter-spacing: 0;
    text-transform: capitalize;
}

.sync-post-info time {
    display: block;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    margin-bottom: 12px;
    text-transform: none;
}

.sync-post-thumbs {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0;
    min-width: 0;
    height: 26px;
    padding-left: 8px;
    cursor: ew-resize;
}

.sync-post-thumb {
    display: block;
    width: auto;
    height: 26px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: ew-resize;
}

.sync-post-thumb img {
    display: block;
    width: auto;
    height: 100%;
    object-fit: cover;
    filter: grayscale(0.15);
}

.sync-post.is-open .sync-post-summary {
    padding-bottom: 0;
}

.sync-post-content {
    display: grid;
    width: 100%;
    height: 0;
    padding: 0 0 22px;
    grid-template-columns: 16.667% 58.333% 25%;
    gap: 0;
    overflow: hidden;
    opacity: 0;
    transition:
        height 0.64s cubic-bezier(0.32, 0.72, 0, 1),
        opacity 0.42s ease,
        padding-top 0.64s cubic-bezier(0.32, 0.72, 0, 1);
}

.sync-post.is-open .sync-post-content {
    height: var(--sync-post-open-height);
    padding-top: var(--sync-post-content-top-gap);
    padding-bottom: 32px;
    opacity: 1;
}

.sync-post-info,
.sync-post-media,
.sync-post-detail {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.42s ease,
        transform 0.58s cubic-bezier(0.32, 0.72, 0, 1);
}

.sync-post.is-open .sync-post-info,
.sync-post.is-open .sync-post-media,
.sync-post.is-open .sync-post-detail {
    opacity: 1;
    transform: translateY(0);
}

.sync-post.is-open .sync-post-media {
    transition-delay: 0.05s;
}

.sync-post.is-open .sync-post-detail {
    transition-delay: 0.1s;
}

.sync-post-media {
    grid-column: 2;
    width: 100%;
    height: 100%;
    padding: 0 7px;
    background: transparent;
    overflow: hidden;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.sync-post-media img {
    display: block;
    width: auto;
    max-width: 96%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: top left;
    cursor: e-resize;
}

.sync-post-info {
    grid-column: 1;
    height: 100%;
    padding: 0 7px 0 0;
    overflow: hidden;
}

.sync-post-detail {
    grid-column: 3;
    height: 100%;
    padding: 0 0 0 7px;
    overflow-y: auto;
    position: relative;
    cursor: ns-resize;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.sync-post-detail::-webkit-scrollbar {
    display: none;
}

.sync-post-info p,
.sync-post-detail p {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--text-primary);
    letter-spacing: 0;
    margin-bottom: 12px;
}

.sync-post-detail p {
    max-width: 540px;
}

.sync-post-detail img {
    display: block;
    width: 100%;
    height: auto;
    margin: 22px 0 14px;
}

/* ========================================
   Immersive Demo Pages
   ======================================== */

.demo-page {
    position: relative;
    z-index: 1;
    padding: 0;
}

.demo-immersive {
    position: relative;
    z-index: 1;
    min-height: 100vh;
}

/* Text back link — same look as left-nav items */
.demo-back {
    position: fixed;
    top: var(--nav-control-y);
    left: 20px;
    z-index: 200;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    transition: opacity 0.2s;
}

.demo-back:hover {
    opacity: 0.55;
}

/* Dark version for immersive demo pages */
.demo-back-dark {
    color: rgba(255, 255, 255, 0.85);
}

.demo-back-dark:hover {
    color: #fff;
    opacity: 1;
}

/* Graphic Surface Test */
.graphic-lab-page {
    min-height: 100vh;
    background: #fff;
    color: var(--text-primary);
}

.graphic-lab-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 220;
    padding: var(--nav-control-y) 30px 14px;
    pointer-events: none;
}

.graphic-lab-nav > * {
    pointer-events: auto;
}

.graphic-lab-nav-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 14px;
}

.graphic-lab-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    grid-template-rows: auto auto;
    gap: 22px 28px;
    padding: 128px 30px 30px;
    box-sizing: border-box;
    align-content: start;
}

.graphic-lab-main {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.graphic-lab-kicker,
.graphic-lab-label {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    text-transform: capitalize;
}

.graphic-lab-heading {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.02em;
    max-width: 12ch;
}

.graphic-lab-intro {
    margin: 0;
    max-width: 25ch;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.52;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
}

.graphic-lab-stage-wrap {
    display: flex;
    flex-direction: column;
    width: min(100%, 820px);
    min-width: 0;
}

.graphic-lab-stage {
    position: relative;
    width: 100%;
    min-height: 360px;
    aspect-ratio: 1.28 / 1;
    border: 1px solid var(--border-light);
    background:
        radial-gradient(circle at 50% 42%, rgba(250, 250, 247, 0.95), rgba(255, 255, 255, 1) 64%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 247, 244, 0.98));
    overflow: hidden;
    cursor: grab;
}

.graphic-lab-application {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 16px;
    flex-wrap: wrap;
}

.graphic-lab-filter {
    text-transform: lowercase;
    font-size: 10px;
}

.graphic-lab-size-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

.graphic-lab-size-tools.is-hidden {
    display: none;
}

.graphic-lab-size-readout {
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    min-width: 34px;
    text-align: center;
}

.graphic-lab-stage canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.graphic-lab-stage.is-dragging {
    cursor: grabbing;
}

.graphic-lab-models {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-self: start;
}

.graphic-lab-model-card {
    appearance: none;
    border: 1px solid var(--border-light);
    background: #fff;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.graphic-lab-model-card:hover,
.graphic-lab-model-card.is-active {
    border-color: var(--text-primary);
}

.graphic-lab-model-preview {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fafaf8;
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 8px;
}

.graphic-lab-model-name,
.graphic-lab-model-note {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.02em;
}

.graphic-lab-model-name {
    color: var(--text-primary);
    margin-bottom: 1px;
}

.graphic-lab-model-note {
    color: var(--text-secondary);
    text-transform: lowercase;
}

.graphic-lab-strip {
    grid-column: 1 / span 2;
    grid-row: 2;
    display: grid;
    width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.graphic-lab-swatch {
    appearance: none;
    border: 1px solid var(--border-light);
    background: #fff;
    padding: 10px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.graphic-lab-swatch:hover,
.graphic-lab-swatch.is-active {
    border-color: var(--text-primary);
}

.graphic-lab-swatch-preview {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fafaf8;
    border: 1px solid rgba(0, 0, 0, 0.04);
    margin-bottom: 8px;
}

.graphic-lab-swatch-preview-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.graphic-lab-swatch-label {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    margin-bottom: 1px;
    text-transform: capitalize;
}

.graphic-lab-swatch-meta {
    display: block;
    font-family: var(--font-sans);
    font-size: 10px;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0.02em;
    color: var(--text-secondary);
    text-transform: lowercase;
}

@media (max-width: 1080px) {
    .graphic-lab-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    .graphic-lab-main,
    .graphic-lab-models,
    .graphic-lab-strip {
        grid-column: 1;
        grid-row: auto;
    }

    .graphic-lab-models {
        flex-direction: row;
    }

    .graphic-lab-stage {
        min-height: 420px;
    }

    .graphic-lab-strip {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Radial Burst Gallery */
.gallery {
    padding: 0;
    overflow: hidden;
    background: transparent;
    margin: 0;
}

.gallery-burst {
    width: 100%;
    height: 100vh;
    position: relative;
}

.burst-scene {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: transparent;
}

.burst-world {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.burst-card {
    position: absolute;
    transform-origin: center center;
    transition: filter 0.3s ease;
    will-change: transform, opacity;
    cursor: pointer;
    border-radius: 6px;
    overflow: hidden;
}

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

.burst-card:hover {
    filter: brightness(1.15) contrast(1.05);
    z-index: 60 !important;
}

/* Three.js Burst */
.three-burst-section {
    padding: 0;
    margin: 0;
    background: transparent;
}

#three-burst {
    width: 100%;
    height: 100vh;
}

#three-burst canvas {
    display: block;
}

/* Video Cover Flow */
.video-flow-page {
    min-height: 100vh;
    background: #fff;
    color: var(--text-primary);
}

.video-flow-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 240;
    padding: var(--vf-nav-y, var(--nav-control-y)) 30px 14px;
    pointer-events: none;
}

.video-flow-nav > * {
    pointer-events: auto;
}

.video-flow-nav-center {
    position: absolute;
    left: 50%;
    top: var(--vf-nav-y, var(--nav-control-y));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    height: 16px;
    gap: 14px;
    transition: opacity 0.24s ease, filter 0.24s ease;
}

.video-flow-nav-center.is-disabled {
    opacity: 0.28;
    filter: grayscale(1);
}

.video-flow-nav-center.is-disabled .video-flow-filter {
    pointer-events: none;
}

.video-flow-nav-right {
    position: absolute;
    right: 30px;
    top: var(--vf-nav-y, var(--nav-control-y));
    height: 16px;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    transition: opacity 0.24s ease, filter 0.24s ease;
}

.video-flow-nav-right.is-disabled {
    opacity: 0.28;
    filter: grayscale(1);
}

.video-flow-nav-right.is-disabled .hscroll-fullscreen {
    pointer-events: none;
}

.video-flow-stage {
    position: relative;
    height: 100vh;
    perspective: 1800px;
    perspective-origin: center center;
    overflow: hidden;
    background: #fff;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.video-flow-nav-left {
    position: absolute;
    left: 30px;
    top: var(--vf-nav-y, var(--nav-control-y));
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.video-flow-year-picker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 16px;
    transition: opacity 0.24s ease, filter 0.24s ease;
}

.video-flow-year-picker.is-disabled {
    opacity: 0.28;
    filter: grayscale(1);
    pointer-events: none;
}

.video-flow-year-toggle {
    position: absolute;
    inset: 0;
    border: none;
    background: none;
    padding: 0;
    color: #000;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.video-flow-year-picker.is-open .video-flow-year-toggle {
    opacity: 0;
    pointer-events: none;
}

.video-flow-year-wheel-panel {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 72px;
    transform: translate(-50%, -50%);
    background: transparent;
    z-index: 320;
    pointer-events: auto;
}

.video-flow-year-wheel {
    width: 100%;
    display: flex;
    justify-content: center;
}

.video-flow-year-wheel-viewport {
    position: relative;
    width: 72px;
    height: 84px;
    overflow: hidden;
    user-select: none;
    cursor: ns-resize;
    touch-action: none;
}

.video-flow-year-wheel.is-dragging .video-flow-year-wheel-viewport {
    cursor: ns-resize;
}

.video-flow-year-wheel-track {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    will-change: transform;
    transition: transform 0.56s cubic-bezier(0.2, 0.9, 0.22, 1);
}

.video-flow-year-wheel-track.is-dragging {
    transition: none;
}

.video-flow-year-option {
    width: 100%;
    height: 28px;
    border: none;
    background: none;
    padding: 0;
    color: #000;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ns-resize;
    transition: transform 0.24s ease;
}

.video-flow-year-option.is-near {
    transform: scale(0.88);
}

.video-flow-year-option.is-far {
    transform: scale(0.8);
}

.video-flow-year-option.is-active {
    transform: scale(1);
}

.video-flow-stage.is-locked,
.video-flow-stage.is-locked .video-flow-track {
    pointer-events: none;
}

.video-flow-track {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    cursor: inherit;
}

.video-flow-dragging .video-flow-stage,
.video-flow-dragging .video-flow-track {
    cursor: grabbing;
}

.video-flow-card {
    --vf-card-size: min(13.2vw, 192px);
    --vf-open-width: 540px;
    --vf-open-height: 360px;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--vf-card-size);
    height: var(--vf-card-size);
    min-width: 108px;
    cursor: inherit;
    outline: none;
    transition:
        transform 0.45s cubic-bezier(0.22, 0.8, 0.2, 1),
        opacity 0.25s ease,
        width 0.42s cubic-bezier(0.22, 0.8, 0.2, 1),
        height 0.42s cubic-bezier(0.22, 0.8, 0.2, 1);
    transform-style: preserve-3d;
    will-change: transform, opacity, width, height;
}

.video-flow-card-caption {
    position: absolute;
    left: 0;
    bottom: calc(100% + 8px);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.02;
    text-transform: capitalize;
    letter-spacing: 0.02em;
    color: rgba(0, 0, 0, 0.88);
    white-space: nowrap;
    opacity: 0;
    transform: translate3d(0, 8px, 18px) rotateX(18deg);
    transition: opacity 0.22s ease, transform 0.22s ease;
    pointer-events: none;
    will-change: transform, opacity;
}

.video-flow-card.is-hovered .video-flow-card-caption {
    opacity: 1;
    transform: translate3d(0, 0, 20px) rotateX(18deg);
}

.video-flow-card:focus-visible .video-flow-card-media {
    box-shadow: 0 0 0 1px #111;
}

.video-flow-card.is-preview-open {
    width: var(--vf-open-width);
    height: var(--vf-open-height);
}

.video-flow-card-media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0;
    background: #f3f3f3;
    box-shadow: none;
    transition: box-shadow 0.3s ease, filter 0.3s ease;
}

.video-flow-poster,
.video-flow-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-flow-preview {
    opacity: 0;
    transition: opacity 0.18s ease;
    background: #f3f3f3;
}

.video-flow-card.is-playing .video-flow-preview {
    opacity: 1;
}

.video-flow-card-wash {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.03);
}

.video-flow-card.is-preview-open .video-flow-card-media {
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}

.video-flow-overlay {
    position: fixed;
    inset: 0;
    z-index: 260;
    background: rgba(255, 255, 255, 0.96);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px 24px;
    opacity: 0;
    transition: opacity 0.24s ease;
}

.video-flow-overlay[hidden] {
    display: none;
}

.video-flow-overlay.is-open {
    opacity: 1;
}

.video-flow-expanded {
    overflow: hidden;
}

.video-flow-overlay-close {
    position: absolute;
    top: 20px;
    right: 20px;
    left: auto;
    z-index: 3;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--text-primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: opacity 0.2s;
}

.video-flow-overlay-close:hover {
    opacity: 0.55;
}

.video-flow-overlay-inner {
    width: min(100%, 1100px);
    --vf-from-x: 0px;
    --vf-from-y: 22px;
    --vf-from-scale: 0.965;
    transform: translate(var(--vf-from-x), var(--vf-from-y)) scale(var(--vf-from-scale));
    transform-origin: center center;
    opacity: 0;
    transition: transform 0.28s cubic-bezier(0.22, 0.8, 0.2, 1), opacity 0.22s ease;
}

.video-flow-overlay.is-open .video-flow-overlay-inner {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.video-flow-player-wrap {
    position: relative;
    overflow: hidden;
    border-radius: 0;
    background: #111;
    box-shadow: none;
}

.video-flow-player {
    display: block;
    width: 100%;
    height: auto;
    max-height: min(82vh, 860px);
    background: #111;
}

/* Lightbox */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lightbox-overlay.lightbox-active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-img {
    max-width: 85vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    transform: scale(0.92);
    transition: transform 0.3s ease, opacity 0.25s ease;
}

.lightbox-active .lightbox-img {
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 24px;
    right: 28px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: color 0.2s ease;
    font-weight: 300;
    line-height: 1;
}

.lightbox-close:hover {
    color: #fff;
}

/* Catalogue TV */
.catalogue {
    padding: 40px 60px 60px;
    background: transparent;
    margin: 0;
}

.catalogue-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 24px;
}

.catalogue-view-all {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-secondary);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: color 0.2s;
}

.catalogue-view-all:hover {
    color: var(--text-primary);
}

.catalogue-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.tv-wrapper {
    position: relative;
    flex-shrink: 0;
    width: 380px;
}

.tv-frame {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 3;
    pointer-events: none;
}

.tv-screen {
    position: absolute;
    top: 6%;
    left: 7.5%;
    width: 85%;
    height: 72%;
    z-index: 2;
    overflow: hidden;
    background: #111;
    border-radius: 4px;
}

.tv-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tv-grunge {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.3;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 1;
}

.tv-static {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.15s ease;
}

.tv-featured-label {
    position: absolute;
    top: 8%; right: 10%;
    width: 110px;
    z-index: 4;
    pointer-events: none;
}

.tv-info {
    position: absolute;
    bottom: 15%; left: 10%; right: 10%;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: rgba(255,255,255,0.7);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.8);
    pointer-events: none;
}

.tv-title {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.08em;
}

.tv-date {
    font-size: 9px;
    font-weight: 300;
    opacity: 0.7;
}

.catalogue-grid {
    display: grid;
    grid-template-columns: repeat(5, 80px);
    grid-auto-rows: 80px;
    gap: 8px;
    flex: 1;
    align-content: start;
    justify-content: end;
}

.catalogue-icon {
    width: 80px;
    height: 80px;
    cursor: pointer;
    border: 1px solid var(--border-light);
    background: #fafafa;
    border-radius: 6px;
    transition: all 0.2s ease;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.catalogue-icon img {
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.catalogue-icon:hover {
    border-color: var(--border-color);
    transform: scale(1.05);
}

.catalogue-icon-active {
    border-color: var(--text-primary);
    background: #f0f0f0;
}

/* Horizontal Scroll Gallery */
.hscroll-section {
    position: relative;
    background: transparent;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hscroll-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 绝对定位：让筛选器悬浮在顶部，不参与 track 高度计算 → track 能在整个 viewport 垂直居中 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    padding: var(--hscroll-nav-y, var(--nav-control-y)) 30px 14px;
    pointer-events: none;         /* 按钮自身再开 */
}

.hscroll-nav > * {
    pointer-events: auto;
}

.hscroll-nav-left {
    position: absolute;
    left: 30px;
    top: var(--hscroll-nav-y, var(--nav-control-y));
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.hscroll-heading {
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-tertiary);
}

.hscroll-nav-center {
    position: absolute;
    left: 50%;
    top: var(--hscroll-nav-y, var(--nav-control-y));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    height: 16px;
    gap: 14px;
}

.hscroll-nav-right {
    position: absolute;
    right: 30px;
    top: var(--hscroll-nav-y, var(--nav-control-y));
    height: 16px;
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 14px;
}

.hscroll-year-picker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 16px;
}

.hscroll-year-toggle {
    position: absolute;
    inset: 0;
    border: none;
    background: none;
    padding: 0;
    color: #000;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    cursor: pointer;
}

.hscroll-year-picker.is-open .hscroll-year-toggle {
    opacity: 0;
    pointer-events: none;
}

.hscroll-year-wheel-panel {
    position: absolute;
    inset: 50% auto auto 50%;
    width: 72px;
    transform: translate(-50%, -50%);
    background: transparent;
    z-index: 320;
    pointer-events: auto;
}

.hscroll-year-wheel {
    width: 100%;
    display: flex;
    justify-content: center;
}

.hscroll-year-wheel-viewport {
    position: relative;
    width: 72px;
    height: 84px;
    overflow: hidden;
    user-select: none;
    cursor: ns-resize;
    touch-action: none;
}

.hscroll-year-wheel.is-dragging .hscroll-year-wheel-viewport {
    cursor: ns-resize;
}

.hscroll-year-wheel-track {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    will-change: transform;
    transition: transform 0.56s cubic-bezier(0.2, 0.9, 0.22, 1);
}

.hscroll-year-wheel-track.is-dragging {
    transition: none;
}

.hscroll-year-option {
    width: 100%;
    height: 28px;
    border: none;
    background: none;
    padding: 0;
    color: #000;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ns-resize;
    transition: transform 0.24s ease;
}

.hscroll-year-option.is-near {
    transform: scale(0.88);
}

.hscroll-year-option.is-far {
    transform: scale(0.8);
}

.hscroll-year-option.is-active {
    transform: scale(1);
}

.hscroll-filter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.hscroll-filter:hover {
    opacity: 0.55;
}

.hscroll-filter.active {
    font-weight: 500;
}

.hscroll-fullscreen {
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    letter-spacing: 0.02em;
    transition: opacity 0.2s;
}

.hscroll-fullscreen:hover {
    opacity: 0.55;
}

.hscroll-track {
    --hscroll-row-height: clamp(118px, 19vh, 200px);
    --hscroll-row-gap: clamp(22px, 4vh, 44px);
    --hscroll-track-pad-y: clamp(18px, 4vh, 40px);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;          /* 画廊整体垂直居中 */
    gap: var(--hscroll-row-gap);      /* 行间留 tooltip 空间 */
    overflow: hidden;
    padding: var(--hscroll-track-pad-y) 0;
}

.hscroll-section.is-year-picker-open .hscroll-track {
    pointer-events: none;
}

.hscroll-row {
    height: var(--hscroll-row-height);
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.hscroll-row-inner {
    display: flex;
    gap: 12px;
    height: 100%;
    width: max-content;
    will-change: transform;
    align-items: flex-start;     /* 回退：图片原比例，高度不强制统一 */
}

.hscroll-item {
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    border-radius: 0;
    overflow: visible;
    height: auto;
}

/* 仅对行内 item 覆盖 HTML 里 style="width:XXXpx"，让 item 宽度由图片自身决定；
   放大克隆被 append 到 body，不受影响 */
.hscroll-row-inner > .hscroll-item {
    width: auto !important;
}

.hscroll-item img {
    /* 保持原始尺寸 → 参差不齐；只有高度超过 row 高度时才等比缩小 */
    width: auto;
    height: auto;
    max-height: var(--hscroll-row-height);           /* row 高度上限 */
    max-width: none;
    display: block;
}

/* JS-driven tooltip，绑定到悬停 item 的屏幕坐标；跨越 row overflow 裁剪 */
.hscroll-tooltip {
    position: absolute;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    text-transform: lowercase;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 20;
}

/* 放大状态：主角图片层级高，transform-origin 保持中心 */
.hscroll-item-expanded {
    transform-origin: 50% 50%;
    cursor: zoom-out;
}

.hscroll-item-expanded img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
}

/* 放大状态下图片下方的标题（屏幕坐标，跟 body） */
.hscroll-expanded-caption {
    position: fixed;
    z-index: 61;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 400;
    color: var(--text-primary);
    letter-spacing: 0.02em;
    text-transform: lowercase;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease 0.2s, top 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}

/* 背景幕（点击关闭，完全透明不影响视觉） */
.hscroll-backdrop {
    position: fixed;
    inset: 0;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 40;
}

.hscroll-backdrop-on {
    opacity: 1;
    pointer-events: auto;
}

/* 放大期间隐藏筛选器条避免视觉干扰 */
body.hscroll-has-expanded .hscroll-nav {
    opacity: 0.2;
    pointer-events: none;
    transition: opacity 0.3s;
}

/* 放大期间：解除滚动画廊的 overflow 裁剪，让被挤出行框的照片也能完整显示（叠在邻行之上）。
   关闭放大后自动恢复 overflow:hidden，不影响无缝横向循环。 */
body.hscroll-has-expanded .hscroll-track,
body.hscroll-has-expanded .hscroll-row,
body.hscroll-has-expanded .hscroll-row-inner {
    overflow: visible;
}

/* 被推开的照片抬高层级，确保叠在其它行内容之上但仍低于 backdrop(40) / 放大主图 */
body.hscroll-has-expanded .hscroll-item {
    z-index: 35;
}

.hscroll-item-hidden,
.hscroll-item-broken {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.hscroll-filter-transitioning .hscroll-item {
    transition: opacity 0.36s ease, visibility 0.36s ease, transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.hscroll-item-entering {
    opacity: 0;
    transform: translateY(8px);
}

.hscroll-gallery-booting .hscroll-row {
    opacity: 0.001;
}

.hscroll-gallery-entering .hscroll-row {
    clip-path: inset(0 0 0 0);
    transition: opacity 0.38s ease, clip-path 1.02s cubic-bezier(0.16, 1, 0.3, 1);
}

.hscroll-gallery-booting .hscroll-row[data-dir="ltr"] {
    clip-path: inset(0 100% 0 0);
}

.hscroll-gallery-booting .hscroll-row[data-dir="rtl"] {
    clip-path: inset(0 0 0 100%);
}

.hscroll-gallery-entering .hscroll-row:nth-child(2) {
    transition-delay: 0.1s;
}

.hscroll-gallery-entering .hscroll-row:nth-child(3) {
    transition-delay: 0.2s;
}

/* ========================================
   Section styles (kept for sub-pages)
   ======================================== */

.section-title {
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-tertiary);
    margin-bottom: 24px;
}

.section-index {
    display: block;
    font-size: 120px;
    font-weight: 100;
    line-height: 0.85;
    color: var(--border-light);
    letter-spacing: -0.04em;
    margin-bottom: -16px;
    user-select: none;
    pointer-events: none;
}

/* Characters grid (sub-page use) */
.characters-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.characters-grid {
    display: flex;
    gap: 12px;
}

.character-item {
    flex: 1;
    transition: transform 0.3s ease;
}

.character-item:hover {
    transform: translateY(-3px);
}

.character-image {
    width: 100%;
    aspect-ratio: 3 / 5;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.character-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.character-item:hover .character-image {
    border-color: var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Items grid (sub-page use) */
.items-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.items-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 14px;
}

.item-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.3s;
}

.item-card:hover {
    transform: translateY(-2px);
}

.item-number {
    font-size: 10px;
    font-weight: 300;
    color: var(--text-tertiary);
    letter-spacing: 0.04em;
}

.item-image {
    width: 100%;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    overflow: hidden;
    transition: all 0.3s ease;
}

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

.item-card:hover .item-image {
    border-color: var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* Persona cards (sub-page use) */
.persona-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.persona-card {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 28px 24px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
}

.persona-card:hover {
    border-color: var(--border-color);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

.persona-id {
    font-size: 48px;
    font-weight: 100;
    line-height: 1;
    color: var(--border-light);
    margin-bottom: 16px;
}

.persona-name {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--text-primary);
    margin-bottom: 14px;
}

.persona-engine {
    font-size: 9px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 3px;
}

.persona-medium {
    font-size: 9px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary);
    margin-bottom: 18px;
}

.persona-desc {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.28;
    color: var(--text-secondary);
}

/* Text entries (sub-page use) */
.text-list {
    display: flex;
    flex-direction: column;
}

.text-entry {
    padding: 24px 0;
    border-top: 1px solid var(--border-light);
}

.text-entry:last-child {
    padding-bottom: 0;
}

.text-date {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: var(--text-tertiary);
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}

.text-heading {
    font-size: 15px;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.07;
}

.text-excerpt {
    font-size: 12px;
    font-weight: 300;
    line-height: 1.38;
    color: var(--text-secondary);
    max-width: 600px;
    margin-bottom: 10px;
}

.text-read-more {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-decoration: none;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.2s;
}

.text-read-more:hover {
    color: var(--text-primary);
}

/* ========================================
   Responsive
   ======================================== */

/* ========================================
   Mobile — slide-in panel (app-like)
   ======================================== */

/* Mobile-only background symbol — centered, low opacity, sits behind everything */
.mobile-bg { display: none; }

@media (max-width: 768px) {
    html, body {
        overflow: hidden;     /* prevent body rubber-band below split-layout */
        height: 100dvh;
    }

    .mobile-bg {
        display: flex;
        position: fixed;
        inset: 0;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        z-index: 0;
    }

    .mobile-bg img {
        width: 70%;
        max-width: 360px;
        height: auto;
        opacity: 0.45;
        mix-blend-mode: multiply;
    }

    /* Make sure panel content sits above the background */
    .panel-left > * {
        position: relative;
        z-index: 1;
    }

    .split-layout {
        position: relative;
        height: 100vh;
        height: 100dvh;       /* dynamic viewport for mobile browsers */
        overflow: hidden;
    }

    .panel-left {
        width: 100% !important;
        height: 100%;
        padding: 24px 32px calc(env(safe-area-inset-bottom, 0px) + 24px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Larger gap below logo on mobile to match target layout */
    .nav-section:first-of-type {
        margin-top: 110px;
    }

    .left-footer-art {
        margin: 20px -24px 0;
        height: 140px;
    }

    .left-footer-art img {
        width: auto;
        height: 140px;
    }

    .divider {
        display: none;
    }

    /* Right panel: off-screen by default, slides in */
    .panel-right {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 50;
        background: var(--bg);
    }

    /* When content is open, slide in */
    body.mobile-content-open .panel-right {
        transform: translateX(0);
    }

    /* Middle panel on mobile: partial overlay sliding in from right — main page stays
       visible on the left as a thin strip */
    .panel-middle {
        position: absolute;
        top: 0;
        right: 0;
        left: auto;
        width: 85% !important;
        height: 100%;
        padding: 24px 28px calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: 40;
        background: var(--bg);
        border-left: 1px solid var(--border-light);
        box-shadow: -8px 0 28px rgba(0, 0, 0, 0.08);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .panel-middle.panel-middle-visible {
        transform: translateX(0);
        width: 85% !important;
    }

    /* Larger Latest list gap on mobile to match nav-section first-of-type */
    .panel-middle .latest-list {
        margin-top: 110px;
    }

    .latest-item {
        font-size: 15px;
        align-items: flex-start;     /* 换行时标题和日期顶对齐 */
    }

    .latest-item .latest-title {
        white-space: normal;         /* 移动端允许长标题换行 */
        flex: 1 1 auto;              /* 让标题吃掉剩余宽度再换行 */
    }

    .right-default {
        padding: 18px 20px 0;
    }

    .symbol-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(0, 1fr));
        gap: 20px 16px;
        padding: 0 4px 0;
    }

    .symbol-mark {
        width: min(100%, 92px);
        max-height: 92px;
    }

    .symbol-center-img {
        max-width: 220px;
        max-height: 220px;
    }

    .nav-item-title {
        font-size: 15px;
    }

    .hover-preview {
        display: none;
    }

    /* Sub-pages */
    .subpage {
        padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 32px);
    }

    .subpage-hero-title {
        font-size: 36px;
    }

    .subpage-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .items-subgrid {
        columns: 2;
        column-gap: 10px;
    }

    .items-catalog-page {
        padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 32px);
    }

    .items-density-toggle {
        left: 16px;
    }

    .items-catalog-fullscreen {
        right: 16px;
    }

    .items-catalog-filterbar {
        max-width: calc(100vw - 96px);
        justify-content: flex-start;
        gap: 10px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .items-catalog-filterbar::-webkit-scrollbar {
        display: none;
    }

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

    .items-catalog-expanded .items-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 38px 20px;
    }

    .graphics-catalog-body .items-catalog-page {
        padding-top: 116px;
    }

    .graphics-catalog-body .items-catalog-grid,
    .graphics-catalog-body.items-catalog-expanded .items-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 36px 20px;
    }

    .items-catalog-code {
        font-size: 10px;
    }

    .items-catalog-meta {
        font-size: 10px;
    }

    .items-product-stage {
        grid-template-rows: 24px minmax(0, 1fr) 42px;
        padding: 92px 36px calc(env(safe-area-inset-bottom, 0px) + 72px);
    }

    .items-product-media {
        width: min(78vw, 420px);
        height: min(52vh, 420px);
    }

    .items-product-code {
        width: min(78vw, 420px);
        font-size: 10px;
    }

    .items-product-footer {
        gap: 8px;
        min-height: 38px;
    }

    .items-product-view {
        font-size: 10px;
    }

    .items-product-arrow {
        font-size: 12px;
    }

    .items-product-arrow-left {
        left: 17px;
        transform: translate(0, -50%);
    }

    .items-product-arrow-right {
        right: 17px;
        transform: translate(0, -50%);
    }

    .item-detail-page {
        padding: 72px 16px calc(env(safe-area-inset-bottom, 0px) + 32px);
    }

    .item-detail-back {
        left: 16px;
    }

    .item-detail-section {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .item-detail-hero-figure {
        min-height: auto;
        aspect-ratio: 1 / 1;
    }

    .item-detail-duo,
    .item-detail-trio {
        grid-template-columns: 1fr;
    }

    .persona-grid {
        grid-template-columns: 1fr;
    }

    .video-flow-card {
        --vf-card-size: min(16vw, 88px);
        min-width: 60px;
    }

    .video-flow-card-media {
        border-radius: 0;
    }

    .video-flow-overlay {
        padding: 52px 16px 16px;
    }

    .video-flow-timeline {
        bottom: 24px;
        width: min(var(--vf-timeline-width, 280px), calc(100vw - 40px));
    }

    .video-flow-year-label {
        font-size: 12px;
    }

    .video-flow-week {
        width: 8px;
        height: 38px;
    }

    .video-flow-player-wrap {
        border-radius: 0;
    }

    .items-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .characters-grid {
        flex-wrap: wrap;
    }

    .character-item {
        flex: 1 1 calc(50% - 6px);
    }

    /* Demo pages */
    .gallery-burst {
        height: 80vh;
    }

    #three-burst {
        height: 80vh;
    }

    .catalogue {
        padding: 20px;
    }

    .catalogue-layout {
        flex-direction: column;
    }

    .tv-wrapper {
        width: 100%;
        max-width: 400px;
    }

    .catalogue-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .hscroll-section {
        height: 70vh;
    }

    .article-page {
        padding: 20px 16px;
    }

    .article {
        padding: 28px 0;
    }

    .article-title {
        font-size: 16px;
    }

    .post-page {
        min-height: 100vh;
        padding: 8px 10px calc(env(safe-area-inset-bottom, 0px) + 24px);
    }

    .sync-post-summary {
        min-height: 34px;
    }

    .sync-post-title {
        font-size: 27px;
    }

    .sync-post-thumbs,
    .sync-post-thumb {
        height: 24px;
    }

    .sync-post-content {
        grid-template-columns: 1fr;
        height: auto;
        padding: 0 0 18px;
    }

    .sync-post.is-open .sync-post-content {
        padding-top: 32px;
    }

    .sync-post-media {
        grid-column: 1;
        height: auto;
        margin-bottom: 12px;
        padding: 0;
    }

    .sync-post-media img {
        height: auto;
        max-height: 64vh;
    }

    .sync-post-info {
        grid-column: 1;
        height: auto;
        padding: 0;
        margin-bottom: 12px;
    }

    .sync-post-detail {
        grid-column: 1;
        height: auto;
        padding: 0;
    }

    .sync-post-info p,
    .sync-post-detail p {
        max-width: none;
        font-size: 12px;
    }
}