/*
	作品集頁面樣式（需搭配 base-page.css 一起載入）
	兩層結構：albums（橫向捲動的相簿牆） → album（直向捲動的照片流）
*/

/* 進入相簿內頁／方格總覽時背景退到更後面 */
	body.view-album #bg:after,
	body.view-grid  #bg:after {
		transform: scale(1.0825);
		filter: blur(0.25rem);
	}

	body.view-album .scroll-hint,
	body.view-album .scroll-zone,
	body.view-grid  .scroll-hint,
	body.view-grid  .scroll-zone { display: none; }

/* ---------- 右上角的檢視切換鈕 ---------- */

	#topbar .title {
		display: inline-flex;
		align-items: center;
		gap: 0.7em;
		padding: 0;
		cursor: pointer;
		transition: opacity 0.2s ease-in-out;
	}

		#topbar .title:hover { opacity: 1; }

		#topbar .title .title-icon {
			width: 0.68rem;
			height: 0.68rem;
			flex: 0 0 auto;
			fill: currentColor;
			opacity: 0.75;
		}

/* ---------- 進場動畫：橫幅先滑下來，再輪到精選牆 ----------
	body 一開始帶著 is-preload，work.js 在 load 之後 100ms 拿掉它，
	橫幅就會從畫面上緣滑下來。精選牆的磚塊延後到橫幅快就位時才開始
	（延遲寫在下面 .album-tile 的 transition-delay），所以看起來是一段接一段。
	（活動預定頁有自己的同名區塊，見 schedule.css）
*/

	#topbar {
		transition: opacity 0.45s ease-out,
		            transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
	}

	/* 起始狀態：整條收在畫面上緣外面 */
	body.is-preload #topbar {
		opacity: 0;
		transform: translateY(-100%);
	}

	@media (prefers-reduced-motion: reduce) {

		#topbar { transition: none !important; }

		body.is-preload #topbar {
			opacity: 1;
			transform: none;
		}

	}

/* ---------- 檢視切換 ---------- */

	.view {
		position: absolute;
		top: 0; left: 0;
		width: 100%;
		height: 100vh;
		height: 100dvh;
		z-index: 2;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.22s ease-in-out, visibility 0.22s;
	}

	body.view-albums #albums-view,
	body.view-grid   #grid-view,
	body.view-album  #album-view {
		opacity: 1;
		visibility: visible;
	}

/* ---------- 方格總覽：一次瀏覽所有相簿 ---------- */

	#grid-view {
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.grid-inner {
		max-width: 76rem;
		margin: 0 auto;
		padding: 7rem 2.5rem 5rem;
	}

	.grid-head {
		margin: 0 0 2.5rem 0;
		padding-bottom: 1rem;
		border-bottom: solid 1px rgba(255, 255, 255, 0.25);
		font-size: 1.1rem;
		font-weight: 300;
		letter-spacing: 0.4rem;
		text-transform: uppercase;
	}

	/*
		「等高排列」：同一排的方格會等比例放大到剛好填滿整個寬度，
		所以每一排的左右都貼齊、格子之間的間隔固定，
		而封面完全照原始比例呈現，不裁切也不留黑邊。

		原理是把 flex 的「基準寬度」和「成長權重」都設成照片比例，
		同一排的每一格就會乘上相同的倍率 → 寬度各不相同，但高度一致。

		--row-h 是排高的起點（實際排高會從這裡再往上長一些），想調整大小改它就好。
		之後新增作品集不用管位置，會自己接到後面重新排好。
	*/
	.grid {
		--row-h: 10.5rem;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 1.6rem 1.25rem;
	}

		/*
			最後一排不要被拉伸，不然剩下的一兩格會被放到很大。
			這個看不見的填充物只會落在最後一排，把剩餘空間整個吃掉，
			那一排就會維持 --row-h 的原始大小並且靠左。
		*/
		.grid::after {
			content: '';
			flex: 999999 1 0;
		}

	.grid-tile {
		/* 基準寬度 = 排高 × 照片比例；成長權重也用同一個比例，同排才會等高 */
		flex: var(--arn, 1) 1 calc(var(--row-h) * var(--arn, 1));
		min-width: 0;                  /* 不讓標題的最小寬度把格子撐開 */
		max-width: 100%;
		border-bottom: 0;
		opacity: 0;
		transform: translateY(0.8rem);
		transition: opacity 0.28s ease-out, transform 0.28s ease-out;
		transition-delay: calc(var(--i, 0) * 0.02s);
	}

		body.view-grid .grid-tile {
			opacity: 1;
			transform: translateY(0);
		}

		.grid-tile .thumb {
			display: block;
			position: relative;
			width: 100%;
			border: solid 1px rgba(255, 255, 255, 0.25);
			border-radius: 4px;
			overflow: hidden;
			background-color: rgba(27, 31, 34, 0.85);
			transition: border-color 0.25s ease-in-out;
			/*
				高度由比例決定。載入前先用 span 宣告的比例佔位，
				載入後 work.js 會換成照片的真實比例，所以版面不會跳動。
			*/
			aspect-ratio: var(--ar, 1 / 1);
		}

		.grid-tile:hover .thumb { border-color: #ffffff; }

		.grid-tile img {
			display: block;
			position: absolute;
			top: 0; left: 0;
			width: 100%;
			height: 100%;
			/* 外框比例就是照片比例，所以這裡的 cover 不會真的裁到東西 */
			object-fit: cover;
			filter: saturate(0.85);
			transition: transform 0.5s ease-in-out, filter 0.5s ease-in-out;
		}

		.grid-tile:hover img {
			transform: scale(1.07);
			filter: saturate(1);
		}

		.grid-tile h2 {
			margin: 0.8em 0 0.25em;
			font-size: 0.68rem;
			font-weight: 300;
			letter-spacing: 0.15rem;
			line-height: 1.5;
		}

		.grid-tile .meta {
			display: block;
			font-size: 0.52rem;
			letter-spacing: 0.1rem;
			opacity: 0.55;
			line-height: 1.5;
		}

/* ---------- 第一層：相簿牆（橫向捲動） ---------- */

	#albums-view {
		display: flex;
		align-items: center;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
		-webkit-overflow-scrolling: touch;
	}

		#albums-view::-webkit-scrollbar { height: 6px; }
		#albums-view::-webkit-scrollbar-track { background: transparent; }
		#albums-view::-webkit-scrollbar-thumb {
			background: rgba(255, 255, 255, 0.25);
			border-radius: 3px;
		}

	.albums {
		display: flex;
		align-items: center;
		gap: 1.5rem;
		margin: auto;
		padding: 0 6vw;
	}

	/*
		封面照原始比例完整顯示，不裁切。
		高度統一、寬度由 aspect-ratio 推算，所以整面牆的上下緣永遠對齊，
		只有寬度隨照片變 —— 很寬的照片（例如全景）就會寬到超出畫面，
		這是刻意的，橫向捲動過去就能看完整張。
		--ar（給 aspect-ratio）由 work.js 設定：載入前先用 span 宣告的比例佔位，
		封面一到就換成照片的真實比例。
	*/
	.album-tile {
		flex: 0 0 auto;
		position: relative;
		height: min(62vh, 30rem);
		aspect-ratio: var(--ar, 1 / 1);
		border: solid 1px rgba(255, 255, 255, 0.6);
		border-radius: 4px;
		overflow: hidden;
		background-color: rgba(27, 31, 34, 0.85);
		cursor: pointer;
		opacity: 0;
		transform: translateY(1rem);
		transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out,
		            border-color 0.25s ease-in-out;
		/* 0.4s 是等橫幅滑完的時間，想讓精選牆早點開始就調小這個數字 */
		transition-delay: calc(var(--i, 0) * 0.09s + 0.4s);
	}

		/*
			加上 .view-albums 之後，這段依序展開的動畫不只第一次進站會播，
			每次從方格總覽或相簿內頁切回精選牆也會重播一次。
			:not(.is-preload) 要留著：進站當下 body 就已經有 view-albums，
			少了它就沒有「狀態改變」可以觸發過渡，第一次載入反而不會動。
		*/
		body:not(.is-preload).view-albums .album-tile {
			opacity: 1;
			transform: translateY(0);
		}

		.album-tile:hover { border-color: #ffffff; }

		.album-tile img {
			position: absolute;
			top: 0; left: 0;
			width: 100%; height: 100%;
			object-fit: cover;
			object-position: center;
			transform: scale(1.001);
			transition: transform 0.6s ease-in-out, filter 0.6s ease-in-out;
			filter: saturate(0.85);
		}

		.album-tile:hover img {
			transform: scale(1.06);
			filter: saturate(1);
		}

		.album-tile .caption {
			position: absolute;
			bottom: 0; left: 0;
			width: 100%;
			z-index: 2;
			padding: 1.25rem 1.25rem 1.1rem;
			background: linear-gradient(to top, rgba(12, 14, 17, 0.92), rgba(12, 14, 17, 0));
		}

			.album-tile .caption h2 {
				margin: 0;
				font-size: 0.8rem;
				font-weight: 300;
				letter-spacing: 0.25rem;
				line-height: 1.4;
			}

			.album-tile .caption .meta {
				display: block;
				margin-top: 0.4em;
				font-size: 0.55rem;
				letter-spacing: 0.15rem;
				text-transform: uppercase;
				opacity: 0.6;
			}

/* ---------- 第二層：相簿內頁（直向捲動） ---------- */

	#album-view {
		overflow-y: auto;
		overflow-x: hidden;
		-webkit-overflow-scrolling: touch;
	}

	.album-inner {
		max-width: 76rem;
		margin: 0 auto;
		padding: 3.5rem 2.5rem 6rem;
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

		/*
			上一篇／下一篇的切換動畫（由 work.js 的 navigateAlbum() 掛上／拿掉）。
			「下一篇」：舊內容往左淡出、新內容從右邊滑入。
			「上一篇」：方向相反。
			這兩組 class 只是「動畫的起點／終點狀態」，實際播放靠上面那行
			transition 過渡，配合 work.js 裡的 reflow 技巧才會確實播放。
		*/
		.album-inner.nav-leave-next,
		.album-inner.nav-enter-prev { opacity: 0; transform: translateX(-2rem); }

		.album-inner.nav-leave-prev,
		.album-inner.nav-enter-next { opacity: 0; transform: translateX(2rem); }

		/* 使用者關閉動態效果的話就不要有位移，只保留淡入淡出（work.js 也會直接跳過整段動畫） */
		@media (prefers-reduced-motion: reduce) {
			.album-inner { transition: opacity 0.2s ease; }
			.album-inner.nav-leave-next,
			.album-inner.nav-leave-prev,
			.album-inner.nav-enter-next,
			.album-inner.nav-enter-prev { transform: none; }
		}

	/*
		規格表式的標題區。每一列由 work.js 依有沒有資料決定要不要產生。
		整塊都用明體（跟標題同一套），只有 How 的小標籤維持黑體當區隔。
		列與列之間不畫線，唯一的一條橫線是最後一列與照片的交界。
	*/
	.album-head {
		margin-bottom: 1.6rem;
		padding-bottom: 2.5rem;
		border-bottom: solid 1px rgba(255, 255, 255, 0.2);
		font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
		/*
			規格表裡每一個欄位（標題、副標、地點、日期、器材、合作人員、說明⋯）
			字串中的 \n 都會變成真正的換行，多餘的空白仍然照常收合。
			掛在整張表上而不是逐個欄位，之後新增欄位也自動有效。
			這一區的內容全部是 work.js 用 textContent 產生的，
			不會有原始碼縮排帶進來的多餘換行，所以整段套用是安全的。
		*/
		white-space: pre-line;
	}

	.spec-row {
		position: relative;
		padding: 0.9rem 0;
	}

		/* 有背景座標的地點要多留下方空間，不然數字會壓到下一個地點 */
		.where-item.has-coords { padding-bottom: 3.6rem; }

		.spec-body {
			min-width: 0;
			position: relative;
			z-index: 1;
		}

/* ---------- 上一篇 / 下一篇 ---------- */

	.album-nav {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		gap: 2rem;
		margin-bottom: 3.5rem;
		font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
	}

		.album-nav-link {
			max-width: 46%;
			border-bottom: 0;
			opacity: 0.75;
			transition: opacity 0.2s ease-in-out;
		}

			.album-nav-link:hover { opacity: 1; }

			.album-nav-link.next { text-align: right; }

		.nav-dir {
			margin: 0;
			font-family: "Manrope", "Noto Sans TC", "Noto Sans JP", sans-serif;
			font-size: 0.55rem;
			letter-spacing: 0.2rem;
			text-transform: uppercase;
			opacity: 0.55;
		}

		.nav-title {
			margin: 0.35em 0 0 0;
			font-size: 0.95rem;
			font-weight: 400;
			line-height: 1.4;
		}

	/* What —— 大標題 */
	.album-head h1 {
		margin: 0;
		font-size: 4.2rem;
		font-weight: 300;
		letter-spacing: 0.12rem;
		line-height: 1.15;
		text-transform: none;
	}

	.album-head .title-sub {
		margin: 0.1em 0 0 0;
		font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
		font-size: 2.5rem;
		font-weight: 300;
		letter-spacing: 0.02rem;
		line-height: 1.2;
	}

	/* Where —— 地點與背景的淡座標 */
	/*
		地點可以有好幾個（work.js 的 where 收陣列），由上往下排。
		不並排的原因：每個地點底下都要放自己那組大大的背景座標，
		並排的話兩組數字會擠在一起。
	*/
	.where-list {
		display: grid;
		gap: 0.6rem;
	}

		/* 每個地點自成一個定位脈絡，裡面的 .spec-coords 才會貼在自己的底部 */
		.where-item {
			position: relative;
			min-width: 0;
		}

	.where-line {
		margin: 0;
		font-size: 1.05rem;
		line-height: 1.6;
		/* 文字要壓在背景座標上面 */
		position: relative;
		z-index: 1;
	}

		.where-line.where-sub { opacity: 0.7; }

	.spec-coords {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0.7rem;
		z-index: 0;
		display: flex;
		justify-content: flex-start;
		gap: 8rem;
		font-family: "Bodoni Moda", "Noto Serif TC", "Noto Serif JP", Georgia, serif;
		font-weight: 400;
		font-size: 3rem;
		letter-spacing: 0.01em;
		line-height: 1;
		white-space: nowrap;
		/*
			等寬數字。Bodoni Moda 預設是比例數字（1 比 2 窄之類的），
			各排的緯度寬度不一樣，後面的經度起點就會對不齊。
		*/
		font-variant-numeric: tabular-nums;
		overflow: hidden;
		color: rgba(255, 255, 255, 0.055);
		pointer-events: none;
		user-select: none;
	}

	/* Who —— coser / model 等合作人員 */
	.who-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
		gap: 1.2rem 3rem;
	}

		.who-item { min-width: 0; }

		.who-role {
			margin: 0;
			font-family: "Manrope", "Noto Sans TC", "Noto Sans JP", sans-serif;
			font-size: 0.6rem;
			letter-spacing: 0.04rem;
			line-height: 1.5;
			opacity: 0.5;
		}

		.who-name {
			margin: 0.15em 0 0 0;
			font-size: 1.05rem;
			font-weight: 400;
			letter-spacing: 0.02rem;
			line-height: 1.5;
		}

/* ---------- 社群圖示（[ig:文字](網址) 產生的） ---------- */

	.social {
		display: inline-flex;
		align-items: baseline;
		gap: 0.4em;
		white-space: nowrap;
	}

		/* 可點的才畫底線，純圖示標記不畫 */
		a.social {
			border-bottom: solid 1px rgba(255, 255, 255, 0.35);
			padding-bottom: 0.05em;
			transition: border-bottom-color 0.2s ease-in-out;
		}

			a.social:hover { border-bottom-color: transparent; }

		.social-icon {
			font-size: 0.9em;
			opacity: 0.85;
			transform: translateY(0.05em);
		}

	/* When —— 日期 */
	.when-value {
		margin: 0;
		font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
		font-size: 1.05rem;
		font-weight: 400;
		letter-spacing: 0.06rem;
		line-height: 1.5;
	}

	.when-count {
		margin: 0.35em 0 0 0;
		font-size: 0.58rem;
		letter-spacing: 0.18rem;
		text-transform: uppercase;
		opacity: 0.5;
	}

	/* How —— 器材與流程，兩欄並排 */
	.how-list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
		gap: 1.4rem 3rem;
	}

		.how-item { min-width: 0; }

		.how-label {
			margin: 0;
			font-family: "Manrope", "Noto Sans TC", "Noto Sans JP", sans-serif;
			font-size: 0.6rem;
			letter-spacing: 0.04rem;
			line-height: 1.5;
			opacity: 0.5;
		}

		.how-value {
			margin: 0.15em 0 0 0;
			font-family: "Noto Serif TC", "Noto Serif JP", Georgia, serif;
			font-size: 1.05rem;
			font-weight: 400;
			letter-spacing: 0.02rem;
			line-height: 1.5;
		}

	/* Note —— 自由說明 */
	.note-value {
		margin: 0;
		max-width: 42rem;
		font-size: 0.9rem;
		line-height: 1.9;
		opacity: 0.85;
	}

		/* desc 裡用 [文字](網址) 產生的連結 */
		.note-value a {
			border-bottom: solid 1px rgba(255, 255, 255, 0.45);
			padding-bottom: 0.05em;
			transition: border-bottom-color 0.2s ease-in-out;
		}

			.note-value a:hover { border-bottom-color: transparent; }

	.photos {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}

		.photos .photo {
			margin: 0;
			opacity: 0;
			transform: translateY(1.5rem);
			transition: opacity 0.8s ease-out, transform 0.8s ease-out;
		}

		.photos .photo.is-visible {
			opacity: 1;
			transform: translateY(0);
		}

		/* 想讓某張照片跨滿整列，在資料裡把它標成 wide */
		.photos .photo.wide { grid-column: 1 / -1; }

		/*
			單獨佔一行的照片（由 work.js 標上 alone）：
			讓它橫跨整行然後置中，寬度維持一欄大小 —— gap 是 1.5rem，
			所以一欄 = 整行的 50% 減掉半個 gap。
		*/
		.photos .photo.alone {
			grid-column: 1 / -1;
			justify-self: center;
			width: calc(50% - 0.75rem);
		}

		.photos .photo img {
			display: block;
			width: 100%;
			height: auto;
			border-radius: 4px;
			border: solid 1px rgba(255, 255, 255, 0.15);
		}

		.photos .photo figcaption {
			margin-top: 0.7em;
			font-size: 0.55rem;
			letter-spacing: 0.15rem;
			text-transform: uppercase;
			opacity: 0.55;
		}

	.album-foot {
		margin-top: 4rem;
		padding-top: 2rem;
		border-top: solid 1px rgba(255, 255, 255, 0.25);
		text-align: center;
	}

		.album-foot a {
			display: inline-block;
			border-bottom: solid 1px rgba(255, 255, 255, 0.35);
			padding-bottom: 0.15em;
			font-size: 0.6rem;
			letter-spacing: 0.2rem;
			text-transform: uppercase;
			transition: border-bottom-color 0.2s ease-in-out;
		}

			.album-foot a:hover { border-bottom-color: transparent; }

/* ---------- 手機／平板 ---------- */

	@media screen and (max-width: 980px) {

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

		/* 單欄的時候每張都獨佔一行，不需要縮成半寬 */
		.photos .photo.alone { width: 100%; }

		.album-inner { padding: 4.2rem 1.5rem 4rem; }

		.spec-row { padding: 0.8rem 0; }

		.album-head h1 { font-size: 2.4rem; }

		.album-nav { gap: 1.2rem; }

		.nav-title { font-size: 0.85rem; }

		.album-head .title-sub { font-size: 1.5rem; }


		.how-list { grid-template-columns: 1fr; gap: 0.9rem 0; }

		.spec-coords { left: 0; font-size: 2rem; bottom: -0.3rem; }

		.grid-inner { padding: 6rem 1.5rem 4rem; }

		.grid { --row-h: 8rem; gap: 1.4rem 1.1rem; }

	}

	@media screen and (max-width: 736px) {

		.grid { --row-h: 6.2rem; gap: 1.3rem 1rem; }

		.albums { gap: 1rem; padding: 0 6vw; }

		/* 螢幕太窄放不下兩組數字並排，緯度／經度改成上下疊放 */
		.spec-coords {
			flex-direction: column;
			gap: 0.1em;
			font-size: 1.6rem;
			bottom: 0.2rem;
		}

			/* 座標貼在該地點的底部，留白只要剛好夠放兩行數字就好，
			   不用像之前留到 5.2rem，那樣會讓地點跟座標中間空一大段 */
			.where-item.has-coords { padding-bottom: 3.6rem; }

		/*
			跟桌機同一套：高度統一，寬度由比例推算。
			手機寬度有限，所以橫幅和全景一定會超出畫面 —— 這是刻意的，
			滑過去就能看完整張。想讓封面整體變大或變小就只調這個高度，
			寬度會自己跟著等比例變。
			這裡不做 scroll-snap，讓橫向捲動從頭到尾都是順順的，
			不會在磚塊邊界被吸住。
		*/
		.album-tile {
			height: 46vh;
		}

	}

/* ---------- 關閉 JS 時 ---------- */

	body.no-js .view { position: static; opacity: 1; visibility: visible; height: auto; }
	body.no-js .album-tile { opacity: 1; transform: none; }

/* ================================================================
   燈箱：點照片放大檢視（只在有滑鼠的裝置啟用）
   ================================================================ */

	/* 可以點開的照片 */
	.photos .photo.is-zoomable img { cursor: zoom-in; }

	.lightbox {
		position: fixed;
		top: 0; left: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
		background-color: rgba(9, 11, 13, 0.985);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		overflow: hidden;
		user-select: none;
	}

	/* 上方資訊列 */
	.lb-bar {
		position: absolute;
		top: 0; left: 0;
		width: 100%;
		z-index: 3;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 1.5rem 2rem;
		pointer-events: none;   /* 只讓按鈕可點，其他區域留給關閉 */
	}

		.lb-count {
			font-family: "Bodoni Moda", "Noto Serif TC", "Noto Serif JP", Georgia, serif;
			font-size: 0.85rem;
			letter-spacing: 0.15rem;
			opacity: 0.65;
		}

			.lb-count b { font-weight: 500; opacity: 1; }

		.lb-actions {
			display: flex;
			gap: 0.5rem;
			pointer-events: auto;
		}

		.lb-btn {
			width: 2.2rem;
			height: 2.2rem;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			border: solid 1px rgba(255, 255, 255, 0.25);
			border-radius: 100%;
			opacity: 0.7;
			transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
		}

			.lb-btn:hover {
				opacity: 1;
				background-color: rgba(255, 255, 255, 0.1);
			}

			.lb-btn svg {
				width: 0.75rem;
				height: 0.75rem;
				fill: none;
				stroke: currentColor;
				stroke-width: 1.6;
				stroke-linecap: round;
			}

	/* 左右切換 */
	.lb-nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
		width: 3.2rem;
		height: 3.2rem;
		font-size: 1.8rem;
		line-height: 1;
		border-radius: 100%;
		opacity: 0.45;
		transition: opacity 0.2s ease-in-out, background-color 0.2s ease-in-out;
	}

		.lb-nav:hover {
			opacity: 1;
			background-color: rgba(255, 255, 255, 0.1);
		}

		.lb-nav.prev { left: 1.5rem; }
		.lb-nav.next { right: 1.5rem; }

	/* 圖片舞台 */
	.lb-stage {
		position: absolute;
		top: 0; left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1;
	}

		.lb-stage img {
			display: block;
			max-width: 92vw;
			max-height: 86vh;
			transform-origin: center center;
			cursor: zoom-in;
			will-change: transform;
		}

		/* 放大之後改成可拖曳 */
		.lightbox.is-zoomed .lb-stage img { cursor: grab; }
		.lightbox.is-zoomed .lb-stage img:active { cursor: grabbing; }

		/* 全螢幕時把留白吃掉 */
		.lightbox.is-full .lb-stage img {
			max-width: 100vw;
			max-height: 100vh;
		}

	.lb-hint {
		position: absolute;
		bottom: 1.2rem; left: 0;
		width: 100%;
		z-index: 2;
		margin: 0;
		text-align: center;
		font-size: 0.55rem;
		letter-spacing: 0.2rem;
		opacity: 0.3;
		pointer-events: none;
	}

	@media screen and (max-width: 980px) {
		.lb-nav.prev { left: 0.5rem; }
		.lb-nav.next { right: 0.5rem; }
		.lb-bar { padding: 1rem 1.2rem; }
	}

	/* 觸控裝置：手勢由 work.js 接管，關掉瀏覽器預設的捲動與縮放 */
	.lb-stage { touch-action: none; }

	@media (hover: none) {
		/* 手指按不到 hover，讓左右切換鈕平時就看得見一些 */
		.lb-nav { opacity: 0.6; }
		.lb-stage img { cursor: default; }
	}

	/* 原圖還在載入時，用一個細微的呼吸效果表示「還有更清晰的版本要來」 */
	.lightbox.is-loading .lb-count:after {
		content: "";
		display: inline-block;
		width: 0.35em;
		height: 0.35em;
		margin-left: 0.6em;
		border-radius: 100%;
		background-color: currentColor;
		animation: lb-pulse 1s ease-in-out infinite;
		vertical-align: middle;
	}

	@keyframes lb-pulse {
		0%, 100% { opacity: 0.15; }
		50%      { opacity: 0.9; }
	}

/* ---------- 版權標示 ----------
	精選牆是單一畫面、沒東西可捲，用 base-page.css 的固定版本。
	方格總覽和相簿內頁會捲動，改成接在內容最後面（work.js 複製過去），
	捲到最底時停在跟主頁一樣的位置：距左 2.5rem、距底 1.1rem。
	它是接在檢視底下、不是接在置中的內容欄裡，左緣才會對齊畫面而不是內容。
*/

	body.view-grid  > .site-copyright,
	body.view-album > .site-copyright { display: none; }

	.site-copyright.in-flow {
		position: static;
		margin: 0;
		padding: 0 2.5rem 1.1rem;
	}

	@media screen and (max-width: 736px) {

		.site-copyright.in-flow { padding: 0 1.5rem 0.8rem; }

	}