/* Responsive reading trial: all core information stays visible. */
.works-page { padding-block: clamp(1.5rem, 4vw, 3rem); gap: 1.75rem; }
.works-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.25rem; align-items: start; }
.works-grid .work-card { min-width: 0; padding: 1.2rem; gap: .9rem; rotate: none; }
.works-grid .work-card__header { min-height: 3.2rem; align-content: start; }
.works-grid .work-card__title { margin: 0; font-size: clamp(1.08rem,1.6vw,1.3rem); line-height: 1.45; overflow-wrap: anywhere; }
.works-grid .work-card__media { aspect-ratio: 4/3; background: #0b0b0c; flex: none; }
.works-grid .work-card__main-image,
.works-grid .work-card__main-video { width: 100%; height: 100%; object-fit: contain; scale: 1; }
.works-grid .work-card__summary { margin: 0; font-size: .94rem; line-height: 1.85; color: #dedee0; overflow-wrap: anywhere; }
.works-grid .tag-list { margin-top: .15rem; gap: .4rem; flex-wrap: wrap; }
.works-grid .tag { font-size: .75rem; padding: .3rem .6rem; }
.works-grid .work-card__thumbnail-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.works-grid .work-card__thumbnail { flex: 0 0 64px; min-height: 48px; }
.works-grid .work-card__link { min-height: 44px; display: inline-flex; align-items: center; }
.works-stage { scroll-margin-top: calc(var(--site-nav-height) + 1rem); }
@media (max-width: 1000px) {
    .works-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .works-category-nav__list { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
    .works-grid { grid-template-columns: minmax(0,1fr); gap: 1rem; }
    .works-grid .work-card { padding: 1rem; }
    .works-grid .work-card__header { min-height: 0; gap: .5rem; }
    .works-grid .work-card__title { font-size: 1.2rem; }
    .works-grid .work-card__media { aspect-ratio: auto; }
    .works-grid .work-card__main-image,
    .works-grid .work-card__main-video { height: auto; max-height: none; }
    .works-grid .work-card__summary { font-size: 1rem; line-height: 1.8; }
    .works-category-nav { padding: 1rem; }
    .works-category-nav__list { gap: .5rem; }
    .works-category-nav__item { padding: .7rem; min-width: 0; gap: .5rem; }
    .works-category-nav__tag { display: none; }
    .works-category-nav__index { width: 28px; height: 28px; font-size: .7rem; }
    .works-category-nav__copy strong { font-size: .85rem; }
    .works-intro { padding: 1.25rem; gap: 1rem; }
    .works-stage__header { gap: .6rem; }
    .works-stage__label { font-size: 1.1rem; }
}

.works-grid .work-card__zoom {
    display: block; position: relative; width: 100%; height: 100%;
    background: transparent; border: 0; padding: 0; cursor: zoom-in; color: white;
}
.work-card__zoom-icon {
    position: absolute; right: .6rem; bottom: .6rem; display: grid; place-items: center;
    width: 32px; height: 32px; border: 1px solid #ffffff40; border-radius: 50%;
    background: #080808b0; font-size: 22px; pointer-events: none;
}
.works-grid .work-card__zoom:focus-visible { outline-offset: -3px; }
#works-image-viewer {
    position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
    box-sizing: border-box; border: 0; margin: 0; padding: clamp(12px,3vw,36px);
    background: #050506ed; color: #eee;
}
#works-image-viewer::backdrop { background: #000b; }
#works-image-viewer .viewer-shell { height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 12px; max-width: 1400px; margin: auto; }
#works-image-viewer .viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#works-image-viewer .viewer-title { margin: 0; font-size: clamp(1rem,2vw,1.3rem); }
#works-image-viewer .viewer-image { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
#works-image-viewer button { min-width: 48px; min-height: 48px; border: 1px solid #ffffff40; border-radius: 12px; background: #ffffff0a; color: white; font-size: 20px; cursor: pointer; }
#works-image-viewer button:disabled { opacity: .3; cursor: default; }
#works-image-viewer .viewer-controls { display: flex; align-items: center; justify-content: center; gap: 20px; }
#works-image-viewer .viewer-count { font-size: .85rem; color: #bbb; min-width: 50px; text-align: center; }
html:has(#works-image-viewer[open]) { overflow: hidden; }
@media (max-width:600px) { .works-grid .work-card__zoom { height: auto; } }

/* Persistent category navigation with readable, compact touch targets. */
.works-category-nav { position: sticky; top: var(--site-nav-height); z-index: 8; padding: .65rem; align-self: start; background: #111113f5; }
.works-category-nav__header { display: none; }
.works-category-nav__list { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: thin; }
.works-category-nav__item { flex: 1 0 auto; padding: .6rem .8rem; min-height: 44px; box-sizing: border-box; }
.works-category-nav__index, .works-category-nav__tag, .works-category-nav__copy small { display: none; }
.works-category-nav__copy strong { font-size: .85rem; white-space: nowrap; }
.works-category-nav__item[aria-current='location'] { border-color: #ffffff70; background: #ffffff12; color: white; }
.works-stage { scroll-margin-top: calc(var(--site-nav-height) + 6rem); }
.work-card__media[data-load='loading']::after {
    content: '載入中'; position: absolute; inset: 0; display: grid; place-items: center;
    color: #ffffff60; background: #111; font-size: .8rem; pointer-events: none;
}
.work-card__media[data-load='error'] > .work-card__zoom,
.work-card__media[data-load='error'] > video { opacity: .15; }
.media-retry { position: absolute; inset: 0; display: grid; place-content: center; gap: 10px; text-align: center; background: #111e; color: #ccc; font-size: .85rem; }
.media-retry button { padding: 10px 18px; min-height: 44px; border: 1px solid #ffffff40; border-radius: 8px; background: #222; color: white; cursor: pointer; }
#works-image-viewer .viewer-image { touch-action: none; user-select: none; transform-origin: center; }
#works-image-viewer .viewer-reset { font-size: 13px; padding-inline: 10px; }
@media (max-width:600px) {
    .works-category-nav { padding: .5rem; margin-inline: -.25rem; }
    .works-category-nav__item { flex: 0 0 auto; padding: .6rem .7rem; }
    #works-image-viewer .viewer-controls { gap: 10px; }
}

/* Back to top: optional shortcut for the long works page. */
#works-back-top {
    position: fixed; right: max(16px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom)); z-index: 20;
    width: 48px; height: 48px; display: grid; place-items: center;
    border: 1px solid #ffffff40; border-radius: 50%;
    background: #161618ed; color: #eee; font-size: 24px;
    box-shadow: 0 6px 24px #0006; cursor: pointer;
}
#works-back-top[hidden], html:has(dialog[open]) #works-back-top { display: none; }
#works-back-top:hover { background: #303033; }
#works-back-top:focus-visible { outline: 2px solid white; outline-offset: 3px; }
/* Geometrically centered icon, independent of font metrics. */
#works-back-top {
    box-sizing: border-box; padding: 0; appearance: none;
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 15px;
    border-color: rgba(255,255,255,.18);
    background: linear-gradient(145deg, #29292bf0, #111113f5);
    box-shadow: inset 0 1px 0 #ffffff12, 0 8px 24px #0005;
    color: #dedee2; line-height: 1;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
    right: max(22px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom));
}
#works-back-top svg { display: block; flex: none; pointer-events: none; }
@media (hover:hover) { #works-back-top:hover { transform: translateY(-3px); border-color: #ffffff55; background: #2a2a2d; } }
#works-back-top:active { transform: translateY(0) scale(.96); }
@media (max-width:600px) { #works-back-top { right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion:reduce) { #works-back-top { transition: none; } }
/* Sticky category tabs stay within the horizontal scrollport on hover. */
.works-category-nav__item:hover,
.works-category-nav__item:focus-visible {
    transform: none;
    box-shadow: inset 0 0 0 1px #ffffff18;
}
.works-category-nav__list { padding: 3px; scroll-padding-inline: 3px; }
.works-category-nav__item:focus-visible { outline-offset: -3px; }