@font-face { font-family: "IBM Plex Sans SC"; src: url("assets/fonts/SameyumeMedium.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans SC"; src: url("assets/fonts/SameyumeUI-v2.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
:root { --theme-blue: rgb(0, 160, 255); --theme-gray: rgb(220, 220, 220); --page-edge: 34px; color-scheme: light; font-family: "IBM Plex Sans SC", sans-serif; background: #fff; color: #171717; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
#gallery { position: fixed; inset: 0; overflow: hidden; touch-action: none; outline: none; }
#gallery:focus-visible { outline: 1px solid #888; outline-offset: -3px; }
.work { position: absolute; top: 0; left: 0; margin: 0; will-change: transform; user-select: none;  }
.work img { display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.filter-definitions { position: absolute; pointer-events: none; }
@media (hover: hover) { .work:hover img { filter: url("#theme-gradient"); } }
.home-logo { position: fixed; z-index: 10; left: var(--page-edge); top: max(32px, env(safe-area-inset-top)); width: 100px; height: 100px; display: block; }
.home-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.home-logo:focus-visible, .about-button:focus-visible, .about-close:focus-visible { outline: 2px solid var(--theme-blue); outline-offset: 4px; }
.about-button { position: fixed; z-index: 10; right: var(--page-edge); top: max(32px, env(safe-area-inset-top)); margin: 0; padding: 0; border: 0; background: transparent; color: var(--theme-blue); font-family: "IBM Plex Sans SC", sans-serif; font-size: calc(22px - 4pt); font-weight: 500; line-height: 1; cursor: pointer; text-decoration: none; min-height: 44px; display: flex; align-items: flex-start; }
.copyright { position: fixed; z-index: 10; pointer-events: none; left: var(--page-edge); bottom: max(32px, env(safe-area-inset-bottom)); margin: 0; color: var(--theme-blue); font-family: "IBM Plex Sans SC", sans-serif; font-size: 12px; font-weight: 400; line-height: 1.5; white-space: nowrap; }
#empty { position: fixed; top: 45%; width: 100%; text-align: center; font-size: 13px; color: #777; }
@media (max-width: 600px) { :root { --page-edge: 26px; } .home-logo { top: max(26px, env(safe-area-inset-top)); width: 60px; height: 60px; } .about-button { top: max(26px, env(safe-area-inset-top)); } .copyright { bottom: max(26px, env(safe-area-inset-bottom)); } }
.page-wipe { position: fixed; inset: 0; z-index: 100; pointer-events: none; background: var(--theme-blue); clip-path: circle(0px at 100% 0%); }
.page-wipe.is-active { pointer-events: auto; }


.liquid-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.work { transform-origin: top left; }
.work.is-dragging { z-index: 2; }
.work img { -webkit-touch-callout: none; }
.water-cursor { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9; overflow: visible; }
html.has-water-cursor, html.has-water-cursor * { cursor: none !important; }
.home-logo.cursor-wrapped img { filter: brightness(0) invert(1); }
.about-button.cursor-wrapped { color: white; }
.home-logo img, .about-button { transition: filter .15s, color .15s; }

.about-page .home-logo.cursor-wrapped img { filter: none; }
.about-page .about-button.cursor-wrapped { color: var(--theme-blue); }

.work img { border-radius: 14px; }

.work picture, .home-logo picture { display: block; width: 100%; height: 100%; }
@media (max-width: 600px) { .home-logo img { object-position: left top; } .about-button { line-height: 1; padding-top: 0; } }

/* Persistent current-page marker. Its bubble hugs the text, not a 44px hit area. */
.about-page .about-button[aria-current="page"] { color: var(--theme-blue); cursor: default; min-height: 0; isolation: isolate; }
.about-page .about-button[aria-current="page"]::before { content: ""; position: absolute; z-index: -1; inset: -9px -11px; background: white; border-radius: 42% 38% 45% 35% / 45% 48% 40% 44%; pointer-events: none; }
.project-page { position: fixed; inset: 0; z-index: 3; background: white; --project-left: 34px; --project-width: 70vw; }
.project-page[hidden] { display: none; }
.project-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.project-images, .project-copy { position: absolute; top: 150px; pointer-events: none; will-change: transform; }
.project-images { left: var(--project-left); width: var(--project-width); display: flex; flex-direction: column; gap: 20px; }
.project-images img { display: block; width: 100%; height: auto; border-radius: 0; }
.project-images picture { display: block; }
.project-copy { left: var(--copy-left); width: calc(100% - var(--copy-left) - var(--page-edge)); color: var(--theme-blue); font-size: 14px; font-weight: 400; }
.project-copy p { margin: 0 0 1em; white-space: pre-line; line-height: 1.2; text-indent: 0; }
.project-copy p:lang(zh) { line-height: 1.5; }
.project-copy p:last-child { margin-bottom: 0; }
.project-title { position: absolute; z-index: 2; left: var(--project-left); top: 86px; margin: 0; color: var(--theme-blue); font-size: clamp(24px, 2.5vw, 40px); font-weight: 700; line-height: 1; white-space: pre-line; pointer-events: none; }
.project-info { position: absolute; left: var(--project-left); bottom: 32px; margin: 0; max-width: 60%; color: var(--theme-blue); font-size: 16px; line-height: 1.2; white-space: pre-line; pointer-events: none; }
.in-project #gallery { visibility: hidden; }
.work.is-opening img { filter: none; }
@media (max-width: 600px) { .project-copy { left: 62%; width: calc(38% - 14px); font-size: 12px; } .project-title { top: 94px; font-size: 24px; } .project-info { bottom: 56px; padding-left: 0; font-size: 14px; } }

@font-face { font-family: "IBM Plex Sans SC"; src: url("assets/fonts/ProjectRegular.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans SC"; src: url("assets/fonts/ProjectBold.woff") format("woff"); font-weight: 700; font-display: swap; }
.about-page .about-button[aria-current="page"]::before { display:none; }
.current-page-bubble { position:absolute; left:-14px; top:-14px; width:calc(100% + 28px); height:calc(100% + 28px); overflow:visible; z-index:-1; pointer-events:none; }

/* Project typography and offsets, desktop. */
.project-title { left: var(--text-left); top: max(32px, env(safe-area-inset-top)); font-size: clamp(28px, calc(2.5vw + 4px), 44px); font-weight: 500; line-height: 1.2; }
.project-info { left: var(--text-left); font-size: 20px; font-weight: 500; line-height: 1.5; }
.project-copy { width: calc(100% - var(--copy-left) - var(--page-edge) - 160px); font-size: 16px; }
.project-copy p { --paragraph-leading: 1.2em; margin-bottom: calc(2 * var(--paragraph-leading)); text-align: left; }
.project-copy p:lang(zh) { --paragraph-leading: 1.5em; text-align: justify; }
.project-copy p:lang(ja) { text-align: justify; }
.project-copy p.language-end { margin-bottom: calc(4 * var(--paragraph-leading)); }
.project-copy p:last-child { margin-bottom: 0; }
.about-page .about-button[aria-current="page"] { cursor: pointer; }
@media (max-width: 600px) {
 .project-title { left: 100px; right: 85px; top: max(26px, env(safe-area-inset-top)); font-size: 28px; overflow-wrap: anywhere; }
 .project-info { left: 26px; font-size: 18px; }
 .project-copy { left: 56%; width: calc(44% - 18px); font-size: 14px; }
}
.returning-about .page-wipe { clip-path: inset(0) !important; }
.return-wipe { position: fixed; inset: 0; z-index: 101; background: var(--theme-blue); pointer-events: auto; }
@font-face { font-family: "IBM Plex Sans SC"; src: url("assets/fonts/ProjectMedium.woff?v=20261010a") format("woff"); font-weight: 500; font-display: swap; }

@font-face { font-family: "IBM Plex Sans SC Text"; src: url("assets/fonts/ProjectText.woff?v=20261010a") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans SC"; src: url("assets/fonts/ProjectSemiBold.woff?v=20261010a") format("woff"); font-weight: 600; font-display: swap; }
.project-copy { font-family: "IBM Plex Sans SC Text", sans-serif; width: max(140px, calc(100% - var(--copy-left) - var(--page-edge) - 260px)); }
.project-copy p:lang(ja) { line-height: 1.5; --paragraph-leading: 1.5em; }
.project-title { top: 150px; font-weight: 600; font-size: clamp(36px, calc(2.5vw + 12px), 52px); line-height: 1.5; }
.project-info { font-weight: 600; font-size: 28px; line-height: 2; }
.project-reveal { opacity: 0; transition: opacity 650ms ease; }
.project-reveal.is-visible { opacity: 1; }
.project-images picture { pointer-events: auto; cursor: zoom-in; touch-action: none; }
.project-images picture:focus-visible { outline: 2px solid var(--theme-blue); outline-offset: 4px; }
@media(max-width:600px) { .project-title { left: 26px; right: 26px; top: 150px; font-size: 36px; } .project-info { font-size: 26px; } .project-copy { width: calc(44% - 18px); } }
@media(prefers-reduced-motion:reduce) { .project-reveal { transition: none; } }

/* Current detail layout. The image shift is independent of the text anchors. */
.home-logo { top: max(22px, calc(env(safe-area-inset-top) - 10px)); }
.project-title { top: max(32px, env(safe-area-inset-top)); }
.project-time { position: absolute; z-index: 2; left: var(--text-left); top: 150px; margin: 0; color: var(--theme-blue); font-size: 28px; font-weight: 600; line-height: 2; white-space: pre-line; pointer-events: none; }
.project-info { font-size: 24px; font-weight: 500; line-height: 1; }
/* Preserve the body column width while moving it 60px right. */
.project-copy { width: max(140px, calc(100% - var(--copy-left) - var(--page-edge) - 200px)); }
@media(max-width:600px) {
 .home-logo { top: max(16px, calc(env(safe-area-inset-top) - 10px)); }
 .project-title { top: 150px; }
 .project-time { left: 26px; font-size: 26px; }
 .project-info { font-size: 22px; }
 .project-copy { left: calc(56% + 60px); width: calc(44% - 18px); }
}
.image-viewer { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; color: var(--theme-blue); }
.image-viewer::backdrop { background: transparent; }
.viewer-shade { position: absolute; inset: 0; background: rgb(255 255 255 / 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); transition: backdrop-filter 650ms ease, -webkit-backdrop-filter 650ms ease, background 650ms ease; }
.image-viewer.is-active .viewer-shade { background: rgb(255 255 255 / .12); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.viewer-stage { position: absolute; transform-origin: top left; }
.viewer-image { position: relative; display: block; width: 100%; height: 100%; object-fit: contain; border: 0; }
.viewer-water { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; transition: opacity 450ms ease; }
.image-viewer.is-active .viewer-water { opacity: 1; }
.viewer-close, .viewer-original { position: absolute; top: 22px; z-index: 2; color: var(--theme-blue); background: transparent; border: 0; padding: 10px; font: inherit; cursor: pointer; }
.viewer-close { right: 20px; } .viewer-original { left: 20px; }
.image-viewer, .image-viewer * { cursor: auto !important; }
.image-viewer .viewer-shade, .image-viewer .viewer-close { cursor: pointer !important; }
@media(prefers-reduced-motion:reduce) { .viewer-shade, .viewer-water { transition: none; } }
@media(max-width:600px) { .project-copy { width: calc(44% - 78px); overflow-wrap: anywhere; } }
@media(max-width:600px) { .project-time { left: 126px; } }

#gallery { isolation: isolate; z-index: 0; }
.project-title { width: max-content; max-width: none; right: auto; white-space: nowrap; overflow-wrap: normal; font-size: clamp(32px, calc(2.5vw + 8px), 48px); }
.project-info { font-size: 20px; }
.image-viewer .water-cursor { z-index: 999; }
html.has-water-cursor .image-viewer, html.has-water-cursor .image-viewer * { cursor: none !important; }
@media(max-width:600px) { .project-title { font-size: 32px; } .project-info { font-size: 18px; } }

.project-title, .project-time, .project-info { left: var(--text-left); }
.project-time { top: var(--time-top, 150px); }
@media(max-width:600px) {
 .project-copy { left: calc(56% - 24px); width: calc(44% + 6px); }
 .project-title { left: 46px; width: calc(56% - 82px); right: auto; white-space: normal; overflow-wrap: anywhere; }
 .project-info, .project-time { left: 46px; }
}

.home-logo { top: max(27px, calc(env(safe-area-inset-top) - 5px)); }
@media(max-width:600px) {
 .home-logo { top: max(21px, calc(env(safe-area-inset-top) - 5px)); }
 .project-copy { left: calc(56% - 52px); width: calc(44% + 34px); }
 .project-title { left: var(--page-edge); width: calc(56% - 90px); }
 .project-info, .project-time { left: var(--page-edge); }
}

@media(max-width:600px) { .project-copy { width: calc(44% + 20px); } }
.about-page .profile { pointer-events: none; }
.profile-card { position: absolute; left: 0; top: 0; margin: 0; transform-origin: center; touch-action: none; pointer-events: auto; user-select: none; will-change: transform; }
.profile-card img { position: relative; display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; -webkit-user-drag: none; -webkit-touch-callout: none; filter: none; }
.profile-water { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.about-page .profile-card img { width: 100%; height: 100%; max-width: none; max-height: none; }

.project-images, .project-copy { top: var(--project-top, 150px); }
@media(max-width:600px) { .project-copy { width: calc(44% + 6px); } .project-title { top: 120px; } }

.about-page { --about-copy-left: 26%; }
.about-name { position: fixed; z-index: 4; left: var(--about-copy-left); top: max(150px, env(safe-area-inset-top)); margin: 0; font-size: 28px; font-weight: 600; line-height: 2; color: white; }
.about-copy-scroll { position: fixed; top: 350px; right: var(--page-edge); bottom: 80px; left: var(--about-copy-left); overflow: auto; overscroll-behavior: contain; }
.about-columns { display: grid; grid-template-columns: 400px 400px 500px; gap: 28px; }
.about-column, .about-contact { font-family: "IBM Plex Sans SC Text",sans-serif; font-size: 16px; font-weight: 400; color: white; }
.about-column p { margin: 0 0 2.4em; line-height: 1.2; white-space: pre-line; text-align: left; overflow-wrap: anywhere; }
.about-column:lang(zh) p, .about-column:lang(ja) p { line-height: 1.5; margin-bottom: 3em; text-align: justify; }
.about-column p:last-child { margin-bottom: 0; }
.about-contact { position: fixed; z-index: 4; left: var(--contact-left,40px); top: var(--contact-top,462px); }
.about-contact p { margin: 0 0 1.2em; white-space: nowrap; }
.about-contact a { color: inherit; text-decoration: none; }
.about-contact a:hover { text-decoration: underline; }
.other-links { display: inline-block; padding: 4px 0; }
.about-name, .about-copy-scroll, .about-contact { opacity: 0; transition: opacity 650ms ease; }
.about-page.is-ready .about-name, .about-page.is-ready .about-copy-scroll, .about-page.is-ready .about-contact { opacity: 1; }
@media(max-width:600px) {
 .about-page { --about-copy-left: 48%; }
 .about-name { top: max(26px,env(safe-area-inset-top)); font-size: 26px; }
 .about-copy-scroll { top: 120px; bottom: 180px; right: 18px; }
 .about-columns { grid-template-columns: repeat(3,190px); gap: 24px; width: max-content; }
 .about-column, .about-contact { font-size: 14px; }
 .about-contact { left: 26px; top: auto; bottom: 72px; background: var(--theme-blue); }
}
@media(prefers-reduced-motion:reduce) { .about-name, .about-copy-scroll, .about-contact { transition: none; } }

.about-contact { z-index: 10; }
.about-contact .other-links.cursor-wrapped { color: var(--theme-blue); text-decoration: none; }

/* ABOUT single language column; title/body top values above remain user editable. */
.about-page { --about-copy-left: 60%; }
.about-name { width: 500px; }
.about-copy-scroll { width: 500px; right: auto; max-width: calc(40vw - 18px); }
.about-columns { display: block; width: 500px; }
.about-column { width: 500px; }
.about-column[hidden] { display: none; }
.about-languages { position: fixed; z-index: 10; left: 60%; top: max(32px,env(safe-area-inset-top)); display: flex; align-items: center; gap: 12px; color: white; font-family: "IBM Plex Sans SC",sans-serif; font-weight: 500; font-size: calc(22px - 4pt); line-height: 1; }
.language-button { position: relative; isolation: isolate; padding: 0; border: 0; background: transparent; color: white; font: inherit; cursor: pointer; }
.language-button[aria-pressed="true"] { color: var(--theme-blue); }
.language-button[aria-pressed="true"]::before { content: ""; position: absolute; z-index: -1; inset: -8px -9px; border-radius: 43% 49% 39% 46% / 45% 39% 48% 43%; background: white; }
.language-button.cursor-wrapped { color: var(--theme-blue); }
.about-contact { position: fixed; inset: 0; background: none; pointer-events: none; }
.about-contact p, .about-contact a { pointer-events: auto; }
.about-contact p { position: fixed; z-index: 10; left: var(--contact-left); top: 500px; bottom: auto; transform: translateX(-50%); margin: 0; }
.about-contact .other-links { position: fixed; z-index: 10; left: var(--contact-left); top: auto; bottom: 80px; transform: translateX(-50%); padding: 0; font-family: "IBM Plex Sans SC",sans-serif; font-weight: 500; }
@media(max-width:600px) { .about-languages { top: max(26px,env(safe-area-inset-top)); gap: 2px; font-size: calc(22px - 4pt); } .about-contact .other-links { bottom: 180px; } }

.about-name { width: min(600px,calc(40vw - 18px)); }
.about-copy-scroll { width: 600px; max-width: calc(40vw - 18px); bottom: var(--about-bottom,32px); overflow-x: hidden; }
.about-columns, .about-column { width: 100%; min-width: 0; }
.about-contact p { left: var(--about-copy-left); top: var(--about-contact-y,256px); transform: none; width: min(600px,calc(40vw - 18px)); white-space: normal; overflow-wrap: anywhere; }
.about-contact .other-links { bottom: var(--about-bottom,32px); }

.about-name { top: max(170px,env(safe-area-inset-top)); }
.about-copy-scroll { top: auto; height: auto; max-height: var(--about-max-height,75vh); bottom: var(--about-text-bottom,32px); overflow-y: auto; }
.about-column p { line-height: 1.5; margin-bottom: 3em; }
.about-column p:last-child { margin-bottom: 0; }
.about-contact .other-links { bottom: var(--about-links-bottom,32px); }
.language-button::before { display: none; }
.language-button .current-page-bubble { display: none; }
.language-button[aria-pressed="true"] .current-page-bubble { display: block; }
@media(max-width:600px) { .about-name { top: max(46px,env(safe-area-inset-top)); } }

.about-contact .other-links { line-height: 1.5; }

.about-copy-scroll { width: 550px; max-width: calc(40vw - 68px); }
.about-column p:first-child { margin-bottom: 1.5em; }
@media(max-width:600px) {
 .about-languages { left: 50%; transform: translateX(-50%); gap: 12px; }
 .about-copy-scroll { left: var(--page-edge); right: var(--page-edge); top: 60vh; bottom: var(--about-text-bottom,26px); width: auto; max-width: none; max-height: none; }
 .about-name { left: 50%; top: calc(60vh - 50px); width: calc(100% - 52px); transform: translate(-50%,-100%); text-align: center; }
 .about-contact .other-links { top: var(--profile-links-top); bottom: auto; }
}

@media(max-width:600px) {
 .project-copy { width: auto; right: var(--page-edge); }
}

@media(max-width:600px) {
 .about-copy-scroll { top: calc(60vh - 300px); }
 .about-name { left: var(--page-edge); top: calc(60vh - 350px); transform: translateY(-100%); text-align: left; }
}

@media(max-width:600px) {
 .about-copy-scroll { top: calc(60vh - 150px); }
 .about-name { top: calc(60vh - 200px); }
 .project-title { top: 100px; }
}

.about-reading { display: contents; }
.about-reading-space { display: none; }
@media(max-width:600px) {
 .about-reading { display: block; position: fixed; inset: 0; z-index: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
 .about-reading-space { display: block; width: 1px; pointer-events: none; }
 .about-reading .about-name, .about-reading .about-copy-scroll { position: absolute; }
 .about-reading .about-copy-scroll { bottom: auto; height: auto; max-height: none; overflow: visible; }
 .about-page .profile { z-index: 2; }
}

@media(max-width:600px) {
 .about-reading .about-copy-scroll { top: calc(60vh - 90px); }
 .about-reading .about-name { top: calc(60vh - 140px); }
 .about-languages { gap: 7px; }
}
.project-nav { position: absolute; z-index: 5; left: var(--page-edge); top: 150px; max-height: calc(100dvh - 230px); overflow-y: auto; overflow-x: hidden; width: max(95px,calc(var(--project-left) - var(--page-edge) - 20px)); padding: 8px 10px; margin: -8px -10px; font-family: "IBM Plex Sans SC Text",sans-serif; font-size: 12px; font-weight: 400; line-height: 3; scrollbar-width: thin; }
.project-nav a { position: relative; display: block; width: fit-content; max-width: 100%; color: var(--theme-blue); text-decoration: none; overflow-wrap: anywhere; isolation: isolate; }
.project-nav a[aria-current="page"] { color: white; }
.project-nav a[aria-current="page"]::before { content: ""; position: absolute; z-index: -1; inset: 2px -7px; border-radius: 12px 15px 13px 16px; background: var(--theme-blue); animation: nav-water 4s ease-in-out infinite alternate; }
@keyframes nav-water { to { border-radius: 15px 12px 16px 13px; transform: scale(1.015,1.008); } }
body.returning-project .project-page { visibility: hidden; }
body.returning-project #gallery { visibility: visible; }
body.returning-project .home-logo,body.returning-project .about-button { pointer-events: none; }
@media(max-width:600px) { .project-nav { display: none; } }
@media(prefers-reduced-motion:reduce) { .project-nav a[aria-current="page"]::before { animation: none; } }

.project-nav { top: 160px; z-index: 10; }
.project-nav a[aria-current="page"]::before { inset: 5px -4px; border-radius: 10px 13px 11px 14px; animation-name: nav-water-active; }
@keyframes nav-water-active { to { border-radius: 14px 9px 15px 10px; transform: scale(1.025,1.015); } }
.project-nav a.cursor-wrapped { color: white; }
.back-to-top { position: fixed; z-index: 5; margin: 0; padding: 0; border: 0; background: transparent; color: var(--theme-blue); font-family: "IBM Plex Sans SC Text",sans-serif; font-size: 14px; line-height: 1.5; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 350ms ease; }
.back-to-top.is-visible { opacity: 1; pointer-events: auto; }
@media(prefers-reduced-motion:reduce) { .back-to-top { transition: none; } }

.project-nav { position: fixed; display: none; }
body.in-project .project-nav { display: block; }
@media(max-width:600px) { body.in-project .project-nav { display: none; } }

/* Shared liquid selection and mobile work list. */
.project-nav { line-height: 5; }
.project-nav a[aria-current="page"]::before { display: none; }
.nav-current-bubble { position: absolute; z-index: -1; pointer-events: none; overflow: visible; }
.project-list-button,.project-nav-backdrop { display: none; }
@media(max-width:600px) {
 body.in-project .project-list-button { display: block; position: fixed; z-index: 22; top: max(26px,env(safe-area-inset-top)); border: 0; margin: 0; padding: 0; min-height: 44px; background: transparent; color: var(--theme-blue); font-family: "IBM Plex Sans SC",sans-serif; font-weight: 500; font-size: calc(22px - 4pt); line-height: 1; text-align: left; display: flex; align-items: flex-start; }
 body.in-project .project-nav { display: block; z-index: 21; top: 110px; left: var(--page-edge); width: min(260px,calc(100vw - 90px)) !important; max-height: calc(100dvh - 170px); transform: translateX(calc(-100% - 40px)); visibility: hidden; pointer-events: none; transition: transform 350ms ease,opacity 350ms ease,visibility 350ms; }
 body.project-list-open .project-nav { transform: translateX(0); visibility: visible; pointer-events: auto; opacity: 1; }
 .project-nav-backdrop { display: block; position: fixed; z-index: 20; inset: 0; background: rgb(255 255 255 / .5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 350ms ease,visibility 350ms; touch-action: none; }
 body.project-list-open .project-nav-backdrop { opacity: 1; visibility: visible; }
}
@media(prefers-reduced-motion:reduce) { body.in-project .project-nav,.project-nav-backdrop { transition: none; } }

/* Desktop content moves 30px right without changing the copy column width. */
@media(min-width:601px) {
 .project-copy { width: max(140px,calc(100% - var(--copy-left) - var(--page-edge) - 170px)); }
}

.project-nav a[hidden] { display: none; }
.project-tracks { display: none; position: fixed; z-index: 10; right: var(--page-edge); max-width: 240px; max-height: calc(100dvh - 230px); overflow-y: auto; padding: 8px 10px; margin: -8px -10px; font-family: "IBM Plex Sans SC Text",sans-serif; font-size: 12px; line-height: 5; scrollbar-width: thin; }
body.in-project.in-music .project-tracks { display: block; }
.project-tracks a { position: relative; isolation: isolate; display: block; width: fit-content; margin-left: auto; color: var(--theme-blue); text-decoration: none; text-align: right; }
.project-tracks a[aria-current],.project-tracks a.cursor-wrapped { color: white; }
@media(min-width:601px) { .in-music .project-copy { width: max(140px,calc(100% - var(--copy-left) - var(--page-edge) - 470px)); } }
@media(max-width:600px) {
 body.in-project.in-music .project-tracks { top: auto !important; left: var(--page-edge); right: var(--page-edge); bottom: 65px; max-width: none; max-height: 100px; background: rgb(255 255 255 / .92); font-size: 12px; line-height: 3; }
 body.in-music .project-tracks a { display: inline-block; margin: 0 12px 0 0; }
 body.project-list-open .project-tracks { pointer-events: none; }
}

/* Music-only lyric typography, album notes and transport. */
.in-music .project-copy p { line-height: 4; --paragraph-leading: 4em; }
.lyric-title { margin: 0 0 4em; font-family: "IBM Plex Sans SC",sans-serif; font-size: inherit; font-weight: 600; line-height: 4; }
.album-intro,.music-player { display: none; }
.in-music .album-intro { display: block; position: fixed; right: var(--page-edge); bottom: 32px; width: 300px; max-height: 45vh; overflow-y: auto; white-space: pre-line; color: var(--theme-blue); font-family: "IBM Plex Sans SC Text",sans-serif; font-size: 14px; line-height: 2; scrollbar-width: thin; }
.in-music .music-player { display: block; position: fixed; height: 28px; z-index: 5; color: var(--theme-blue); font-family: "IBM Plex Sans SC Text",sans-serif; font-size: 12px; }
.music-toggle { position: absolute; left: 0; bottom: 0; width: 24px; height: 28px; padding: 0; border: 0; background: transparent; color: var(--theme-blue); cursor: pointer; font-size: 20px; }
.music-timeline { position: absolute; left: var(--timeline-left); bottom: 0; width: var(--timeline-width); height: 28px; display: flex; align-items: center; gap: 12px; font-variant-numeric: tabular-nums; }
.music-current,.music-duration { flex: 0 0 auto; }
.music-seek { min-width: 0; flex: 1; width: 0; height: 24px; margin: 0; appearance: none; background: linear-gradient(to right,var(--theme-blue) var(--progress,0%),var(--theme-gray) var(--progress,0%)) center / 100% 6px no-repeat; cursor: pointer; touch-action: none; }
.music-seek::-webkit-slider-thumb { appearance: none; width: 10px; height: 16px; background: var(--theme-blue); border-radius: 1px; }
.music-seek::-moz-range-thumb { width: 10px; height: 16px; border: 0; background: var(--theme-blue); border-radius: 1px; }
.music-status { position: absolute; left: var(--timeline-left); top: 30px; font-size: 12px; }
@media(min-width:601px) { .in-music .project-copy { width: max(140px,calc(100% - var(--copy-left) - var(--page-edge) - 320px)); } }
@media(max-width:600px) {
 .in-music .album-intro { position: static; width: auto; max-height: none; margin-top: 4em; font-size: 12px; overflow: visible; }
 .in-music .music-toggle { bottom: 30px; }
 .music-timeline { gap: 5px; font-size: 10px; }
}

@media(max-width:600px) { body.in-project.in-music .project-tracks { bottom: 196px; max-height: 96px; } }

/* Refined music typography and a thumb-free seek track. */
.in-music .project-copy p { line-height: 2; --paragraph-leading: 2em; }
.lyric-title { line-height: 2; margin-bottom: 2em; }
.in-music .album-intro { text-align: right; }
@media(min-width:601px) { .in-music .project-copy { width: max(140px,calc(100% - var(--copy-left) - var(--page-edge) - 370px)); } }
.music-timeline { gap: 20px; }
.music-seek { background: transparent; }
.music-seek::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(to right,var(--theme-blue) var(--progress,0%),var(--theme-gray) var(--progress,0%)); transition: transform 180ms ease; }
.music-seek::-moz-range-track { height: 4px; border-radius: 999px; background: linear-gradient(to right,var(--theme-blue) var(--progress,0%),var(--theme-gray) var(--progress,0%)); transition: transform 180ms ease; }
.music-seek::-webkit-slider-thumb { width: 1px; height: 4px; opacity: 0; }
.music-seek::-moz-range-thumb { width: 1px; height: 4px; opacity: 0; }
.music-seek:hover::-webkit-slider-runnable-track,.music-seek:focus-visible::-webkit-slider-runnable-track { transform: scaleY(1.5); }
.music-seek:hover::-moz-range-track,.music-seek:focus-visible::-moz-range-track { transform: scaleY(1.5); }
.music-toggle::before { content: ''; display: block; position: absolute; left: 4px; top: 6px; width: 15px; height: 16px; background: var(--theme-blue); clip-path: polygon(0 0,100% 50%,0 100%); }
.music-toggle[data-playing="true"]::before { clip-path: polygon(0 0,35% 0,35% 100%,0 100%,0 0,65% 0,100% 0,100% 100%,65% 100%,65% 0); }
@media(max-width:600px) { .music-timeline { gap: 9px; } }
@media(prefers-reduced-motion:reduce) { .music-seek::-webkit-slider-runnable-track { transition: none; } .music-seek::-moz-range-track { transition: none; } }
.music-toggle[data-playing="true"]::before { clip-path: none; background: linear-gradient(to right,var(--theme-blue) 0 35%,transparent 35% 65%,var(--theme-blue) 65% 100%); }

/* Cover transport and viewport-wide seek bar, Music only. */
.in-music .project-copy { top: var(--lyric-top); }
.in-music .album-intro { width: 280px; text-align: left; font-size: 13px; line-height: 1.6; }
.in-music .music-player { left: 0 !important; bottom: 0 !important; width: 100% !important; height: 20px; z-index: 12; }
.music-timeline { left: 0; bottom: 0; width: 100%; height: 20px; gap: 0; }
.music-seek { width: 100%; flex: 1; height: 20px; }
.music-status { left: var(--page-edge); top: auto; bottom: 24px; }
.music-cover { position: relative; isolation: isolate; overflow: visible; transition: scale 300ms ease; border-radius: 14px; }
.in-music .music-cover img { position: relative; z-index: 1; border-radius: 14px; }
.music-cover-water { position: absolute; z-index: 0; inset: -18px; width: calc(100% + 36px); height: calc(100% + 36px); overflow: visible; pointer-events: none; }
@media(hover:hover) { .music-cover:hover { scale: 1.025; } }
@media(max-width:600px) { .in-music .album-intro { width: auto; font-size: 11px; } }
@media(prefers-reduced-motion:reduce) { .music-cover { transition: none; } }
@media(min-width:601px) { .in-music .project-copy { width: max(140px,calc(100% - var(--copy-left) - var(--page-edge) - 320px)); } }
@media(max-width:600px) { .in-music .project-copy { left: calc(56% - 2px); } }
.music-seek::-webkit-slider-runnable-track { transform: translateY(8px); transform-origin: center bottom; }
.music-seek::-moz-range-track { transform: translateY(8px); transform-origin: center bottom; }
.music-seek:hover::-webkit-slider-runnable-track,.music-seek:focus-visible::-webkit-slider-runnable-track { transform: translateY(8px) scaleY(1.5); }
.music-seek:hover::-moz-range-track,.music-seek:focus-visible::-moz-range-track { transform: translateY(8px) scaleY(1.5); }

.in-music .music-cover img { border-radius: 0; transition: border-radius 350ms ease; }
.in-music .music-cover[data-playing="true"] img { border-radius: 14px; }
.in-music .project-copy p { margin-bottom: 2em; }
.in-music .project-copy p:last-child { margin-bottom: 0; }
@media(min-width:601px) { .in-music .project-copy { width: max(140px,calc(100% - var(--copy-left) - var(--page-edge) - 220px)); } }
.in-music .album-intro { position: fixed; margin-top: 0; width: min(280px,calc(var(--project-left) - var(--text-left) - 24px)); max-height: 45vh; overflow-y: auto; }
@media(max-width:600px) { .in-music .project-copy { left: calc(56% + 98px); } }

.in-music .album-intro { text-align: justify; text-align-last: left; }
@media(min-width:601px) { .in-music .project-copy { width: max(140px,calc(100% - var(--copy-left) - var(--page-edge) - 140px)); } }

/* Fixed desktop album-description width; mobile remains responsive. */
@media (min-width: 601px) {
  .in-music .album-intro {
    width: 200px;
  }
}

/* Mobile Music: wider title and readable two-column content. */
@media(max-width:600px) {
 .in-music .project-title { width: auto; left: var(--page-edge); right: var(--page-edge); font-size: 26px; line-height: 1.3; }
 .in-music .project-time { font-size: 18px; line-height: 1.5; }
 .in-music .project-copy { left: calc(var(--project-left) + var(--project-width) + 18px); right: var(--page-edge); width: auto; font-size: 12px; }
 .in-music .album-intro { width: var(--project-width); font-size: 11px; }
}

.project-nav-heading { color: var(--theme-blue); font: inherit; pointer-events: none; }
@media(max-width:600px) {
 .project-title { left: var(--page-edge); right: var(--page-edge); width: auto; }
 .project-nav { line-height: 3; }
 body.in-project .project-nav { width: calc(52vw - 26px) !important; }
 body.in-project.in-music .project-tracks { visibility: hidden; opacity: 0; pointer-events: none; z-index: 21; left: auto; right: var(--page-edge); bottom: 90px; width: calc(48vw - 26px); max-height: calc(100dvh - 210px); background: none; line-height: 3; transition: opacity 300ms ease,visibility 300ms; }
 body.project-list-open.in-music .project-tracks { visibility: visible; opacity: 1; pointer-events: auto; }
 body.in-music .project-tracks a { display: block; margin: 0 0 0 auto; text-align: right; }
 .in-music .album-intro { position: absolute; max-height: none; overflow: visible; pointer-events: none; will-change: transform; }
}

.project-nav .project-nav-heading { pointer-events: auto; cursor: pointer; }
.project-nav-heading[aria-expanded="true"] { font-family: "IBM Plex Sans SC",sans-serif; font-weight: 500; }
.nav-current-bubble { transform-origin: center; }
@media(max-width:600px) { .in-music .album-intro { position: fixed; transform: none !important; will-change: auto; } }

/* Item spacing is independent of wrapped-line spacing. */
.project-nav,.project-tracks { line-height: 1.5; padding-top: 29px; }
.project-nav a,.project-tracks a { line-height: 1.5; margin-bottom: 3.5em; }
@media(max-width:600px) {
 .project-nav,body.in-project.in-music .project-tracks { line-height: 1.5; padding-top: 17px; }
 .project-nav a,body.in-music .project-tracks a { line-height: 1.5; margin-bottom: 1.5em; }
}

body.in-project:not(.in-music) .project-copy { top: var(--visual-copy-top); }