/* Ordered orbit, editorial list, and transparent reader tools. */
:root { --edge: 0px; background: #fff; }
body { padding: 0; }
.project-account-link { display: inline-flex; align-items: center; gap: 14px; padding-block: 8px; border-bottom: 1px solid currentColor; font-size: 11px; line-height: 1.5; }
.project-account-link span { font-size: 15px; }
.gallery { perspective: 1150px; touch-action: none; }
.orbit { transform-origin: 50% 50%; pointer-events: none; }
.project-card { pointer-events: auto; }
.project-card[data-interactive="false"] { cursor: grab; }
.project-card[data-interactive="true"] { cursor: pointer; }
.card-surface { backface-visibility: visible; }
.card-surface { overflow: visible; background: transparent; box-shadow: none; }
.card-base { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--card-color); }
.cover-canvas { inset: -12%; width: 124%; height: 124%; }
.project-card.refracting .card-base { opacity: 0; }
.video-texture video.card-art { opacity: 0; }
.video-texture .cover-canvas { opacity: 1; }
.video-texture .card-base { z-index: 1; background-size: cover; }
.video-texture.video-texture-ready .card-base { background: transparent !important; }
.native-video-cover .cover-canvas { display: none; }
.native-video-cover .card-base { background: transparent; isolation: isolate; }
.native-video-cover video.card-art {
  opacity: 1;
  /* Keep the native iOS video plane flush with its transformed cover. */
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  object-fit: cover;
  border: 0;
  padding: 0;
  margin: 0;
}
.open-project-cue {
  position: absolute; z-index: 20; display: flex; align-items: center; gap: 6px;
  left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; opacity: 0;
  font-size: 9.5px; font-weight: 500; letter-spacing: .2px; color: #fff; white-space: nowrap;
  padding: 6px 8px; border-radius: 4px;
  background: rgba(8, 10, 12, var(--cue-shade, .64));
  box-shadow: 0 2px 10px #0002;
  text-shadow: 0 1px 2px #0009;
}
.project-card[data-index="3"] .open-project-cue { --cue-shade: .58; }
.open-project-cue.visible { opacity: 1; }
.cue-diamond { display: grid; place-items: center; flex: 0 0 14px; width: 14px; height: 14px; border: 1.4px solid currentColor; transform: rotate(45deg); filter: drop-shadow(0 1px 2px #0008); }
.cue-diamond span { width: 5px; height: 5px; background: currentColor; transform: rotate(-45deg); }
.open-project-cue.visible .cue-diamond { animation: cue-turn .5s cubic-bezier(.2,.75,.2,1) both; }
@keyframes cue-turn { from { transform: rotate(-135deg); } to { transform: rotate(45deg); } }
.reader-zoom { display: none; }
.reading-expanded .work-reader { overflow: auto; }
.work-document { margin-inline: auto; max-width: none; }
.reading-expanded .reader-zoom { position: absolute; bottom: 15px; left: 15px; z-index: 4; display: flex; align-items: center; gap: 12px; color: #fff; text-shadow: 0 1px 3px #000, 0 0 3px #000; font-size: 10px; }
.reader-zoom button { color: inherit; text-shadow: inherit; font-size: 11px; padding: 3px 0; }
.reader-zoom span { opacity: .8; }

.list-view {
  --cover-size: clamp(190px, 18vw, 310px);
  position: relative;
  height: 100%;
  overflow: hidden;
}
.list-covers {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: var(--cover-size);
  padding-block: max(0px, calc((100svh - 2 * var(--edge) - var(--cover-size)) / 2));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  scroll-snap-type: y mandatory;
  overflow-anchor: none;
}
.list-covers::-webkit-scrollbar { display: none; }
.list-cover {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  margin-bottom: 14px;
  scroll-snap-align: center;
  overflow: hidden;
}
.list-cover:last-child { margin-bottom: 0; }
.list-cover:hover { opacity: 1; }
.list-cover img,.list-cover video { display: block; width: 100%; height: 100%; object-fit: cover; }
.has-shared-media > img:not(.card-art) { visibility: hidden; }
.list-cover-label { position: absolute; bottom: 12px; left: 13px; font-size: 8px; }
.list-cover:has(img,video) .list-cover-label { padding: 5px 7px; left: 7px; bottom: 7px; background: #ffffffb8; }
.shared-gallery { z-index: 12; }
.list-open .shared-gallery,.list-open .shared-gallery .project-card { pointer-events: none; }
.list-cover > img:not(.card-art) { visibility: hidden; }
.list-cover { background: transparent !important; }
.list-cover-label { visibility: hidden; }
.mode-transitioning .shared-gallery,.mode-transitioning .shared-gallery .project-card { pointer-events: none; }
.mode-transitioning .gallery-controls { opacity: 0; pointer-events: none; }
.mode-transitioning .list-view { pointer-events: none; }
.list-metadata {
  position: absolute;
  top: 50%;
  left: 26px;
  right: 26px;
  transform: translateY(-50%);
  display: grid;
  grid-template-columns: 26% 1fr 23% 40px;
  gap: 20px;
  align-items: center;
  pointer-events: none;
  font-size: 10px;
  line-height: 1.6;
}
.list-project-names { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.list-project-names button { font-size: inherit; line-height: inherit; padding: 0; color: #b2b2b2; pointer-events: auto; text-align: left; }
.list-project-names button.selected { color: #111; }
.list-type { max-width: 135px; font-size: 10px; }
.list-skills { font-size: 10px; max-width: 260px; }
.list-id { text-align: right; font-size: 10px; }

.reader-tools,
.reading-expanded .reader-tools {
  right: 12px;
  bottom: 12px;
  background: transparent;
  box-shadow: none;
  mix-blend-mode: normal;
}
.reader-tools button,
.reading-expanded .reader-tools button {
  min-width: 46px;
  height: 40px;
  padding: 0 7px;
  background: transparent;
  color: white;
  border: 0;
  font-size: 11px;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
.reader-tools svg { width: 22px; height: 22px; filter: drop-shadow(0 0 1px #000) drop-shadow(0 1px 1px #000); }
.reader-tools button:hover { opacity: 1; transform: scale(1.06); }
.reading-expanded .reader-tools { position: absolute; opacity: 1; }
.work-segment [data-motion] { cursor: pointer; }

@media (max-width: 760px) {
  .list-view { --cover-size: clamp(150px, 44vw, 230px); }
  .list-view .intro { display: none; }
  .list-covers { top: 115px; bottom: 145px; padding-block: calc((100svh - 2 * var(--edge) - 260px - var(--cover-size)) / 2); }
  .list-metadata { top: auto; bottom: 58px; transform: none; left: 18px; right: 18px; grid-template-columns: 1fr auto; gap: 6px 18px; }
  .list-project-names { grid-row: span 3; max-width: 165px; font-size: 8px; }
  .list-type, .list-skills, .list-id { max-width: 145px; text-align: right; font-size: 7px; }
  .list-cover-label { font-size: 7px; }
  .reader-tools, .reading-expanded .reader-tools { right: 7px; bottom: 7px; }
}

/* Bilingual browsing hint, with room for both arrow targets. */
.gallery-controls { gap: 24px; letter-spacing: .35px; }
.drag-instruction { display: inline-flex; align-items: center; gap: 9px; }
.drag-instruction [lang="en"] { font-size: .95em; letter-spacing: .85px; }
.card-label { flex-wrap: wrap; align-items: flex-end; row-gap: 3px; }
.card-label span:last-child { margin-left: auto; text-align: right; }
@media (max-width: 760px) {
  .gallery-controls { gap: 12px; }
  .drag-instruction { gap: 6px; }
}

/* Replace the PDF's printed URL with a scalable, accessible live link. */
.work-segment { container-type: inline-size; }
.work-document-link { position: absolute; z-index: 2; display: flex; align-items: center; background: #fff; color: #111; font-size: 1.67cqw; line-height: 1.35; text-decoration: underline; text-underline-offset: .12em; overflow-wrap: anywhere; }
.work-document-link:hover { opacity: 1; color: #555; }

/* Mobile readability and separation of the gallery from project metadata. */
@media(max-width:760px) {
  :root { --edge: 0px; }
  .site-header nav { font-size: 11px; gap: 20px; }
  .site-header nav a, .site-header nav button { min-height: 32px; display: inline-flex; align-items: center; gap: 3px; }
  .site-header nav a::after { bottom: 0; }
  .gallery-controls { font-size: 9px; gap: 14px; }
  .gallery-controls button { min-width: 44px; min-height: 44px; }
  .gallery-caption { font-size: 11px; gap: 10px; max-width: calc(100% - 36px); white-space: normal; align-items: center; text-align: center; }
  .gallery-caption span:first-child { flex-shrink: 0; font-size: 10px; }
  .project-info dl { display: block; }
  .project-info dl > div { margin-bottom: 22px; }
  .project-info dt { font-size: 12px; }
  .project-info dd, .project-info dd.skills { font-size: 13px; line-height: 1.85; }
  .project-info .eyebrow { font-size: 10px; line-height: 1.7; letter-spacing: .4px; }
  .project-account-link { font-size: 13px; min-height: 44px; }
  .list-covers { top: 125px; bottom: 285px; padding-block: max(0px, calc((100svh - 410px - var(--cover-size)) / 2)); }
  .list-open:not(.mode-transitioning) .shared-gallery { clip-path: inset(var(--list-clip-top, 0px) 0 var(--list-clip-bottom, 0px) 0); }
  .list-metadata { bottom: 76px; max-height: 196px; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr); gap: 7px 14px; align-items: start; }
  .list-project-names { max-width: none; font-size: 11px; gap: 6px; }
  .list-project-names button { line-height: 1.6; }
  .list-type, .list-skills, .list-id { max-width: none; font-size: 10px; line-height: 1.6; }
  .list-skills { max-height: 132px; overflow: auto; pointer-events: auto; }
  .work-reader { -webkit-overflow-scrolling: touch; }
}

@media(max-width:760px) { body { min-height: 0; } }

@media(max-width:760px) { .film-controls button { width: 32px; height: 32px; } .film-controls input { height: 26px; } }
@media(max-width:360px) { .film-volume { display: none; } }

@media(max-width:760px) { .reader-zoom > span { font-size: 0; } .reader-zoom > span::after { content: '上下滑动浏览'; font-size: 10px; } }

/* A native scroll surface on phones: the visible covers are the scroll targets. */
.mobile-list-art { display: none !important; }
@media(max-width:760px) {
  .list-covers { width: 100%; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
  .list-cover { width: var(--cover-size); margin-inline: auto; touch-action: pan-y; }
  .list-cover .mobile-list-art { display: block !important; visibility: visible !important; pointer-events: none; }
  .list-cover .list-cover-label { visibility: visible; display: flex; justify-content: space-between; gap: 5px; left: 0; right: 0; bottom: 0; padding: 7px; background: #ffffffd9; color: #222; font-size: 7px; line-height: 1.5; text-align: left; }
  .list-cover-label span:last-child { text-align: right; }
  .list-open .shared-gallery { display: none; }
}