/* ==========================================================================
   Portfolio pages （another-eye / work）共通
   mocks: /02_デザイン課/mockup/{another-eye,work}.html
   ========================================================================== */

/* swell-reset の 100vw トリック解除（services/cases と同パターン） */
#body_wrap.lk-art.page .post_content > section,
#body_wrap.lk-art.page .post_content > div,
#body_wrap.lk-art.page .post_content > footer {
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---------- Hero ---------- */
.port-hero {
	padding: clamp(120px, 14vw, 200px) 5% clamp(48px, 6vw, 80px);
	text-align: center;
	box-sizing: border-box;
}
.port-hero__eyebrow {
	font-family: var(--f-en); font-size: 11px; letter-spacing: 0.32em;
	color: var(--paper-dim); text-transform: uppercase; margin-bottom: 28px;
}
#body_wrap.lk-art .post_content .port-hero__title {
	font-family: var(--f-en) !important;
	font-weight: 300 !important;
	font-size: clamp(56px, 11vw, 160px) !important;
	line-height: 1 !important;
	letter-spacing: 0;
	margin: 0 0 36px 0 !important;
	color: var(--paper) !important;
}
#body_wrap.lk-art .post_content .port-hero__lead {
	font-family: var(--f-jp);
	font-size: 15px;
	line-height: 2;
	color: var(--paper-dim);
	width: min(100%, 560px);
	margin: 0 auto !important;
}

/* ---------- TOC ---------- */
.port-toc {
	padding: 0 5% clamp(40px, 5vw, 72px);
	text-align: center;
	box-sizing: border-box;
}
.port-toc__list {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(16px, 2.4vw, 40px);
	padding-top: 28px;
	border-top: 1px solid var(--line-mid);
	font-family: var(--f-en);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--paper-dim);
}
.port-toc__list a:hover { color: var(--paper); }

/* ---------- Series band ---------- */
.port-series {
	padding: clamp(48px, 6vw, 96px) 5% clamp(64px, 8vw, 120px);
	border-top: 1px solid var(--line);
	box-sizing: border-box;
}
.port-series__inner {
	width: min(100%, 1320px);
	margin-inline: auto;
}
.port-series__head {
	max-width: 720px;
	margin: 0 auto clamp(40px, 5vw, 64px);
	text-align: center;
}
.port-series__meta {
	font-family: var(--f-en);
	font-size: 10px;
	letter-spacing: 0.3em;
	color: var(--paper-dim);
	text-transform: uppercase;
	margin-bottom: 16px;
}
#body_wrap.lk-art .post_content .port-series__title {
	font-family: var(--f-jp) !important;
	font-weight: 500 !important;
	font-size: clamp(32px, 5vw, 64px) !important;
	letter-spacing: 0.04em;
	color: var(--paper) !important;
	line-height: 1.2 !important;
	margin: 0 0 20px 0 !important;
}
#body_wrap.lk-art .post_content .port-series__lead {
	font-family: var(--f-jp);
	font-size: 14px;
	line-height: 2;
	color: var(--paper-dim);
	margin: 0 !important;
}
#body_wrap.lk-art .post_content .port-series__lead em {
	display: block;
	margin-top: 8px;
	font-family: var(--f-en);
	font-style: italic;
	font-size: 11px;
	letter-spacing: 0.1em;
	color: var(--paper-dim);
	opacity: 0.7;
}

/* ---------- Grid / mosaic ---------- */
.port-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(8px, 1vw, 16px);
}
@media (min-width: 720px) {
	.port-grid { grid-template-columns: repeat(6, 1fr); }
}

#body_wrap.lk-art .post_content .port-img {
	position: relative;
	background: rgba(237,232,221,0.04);
	overflow: hidden;
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--paper-dim);
	font-family: var(--f-en);
	font-size: 10px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	cursor: zoom-in;
	transition: opacity 0.3s;
}
.port-img:hover { opacity: 0.85; }
.port-img img { width: 100%; height: 100%; object-fit: cover; }

/* hover caption */
.port-img__cap {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	padding: 10px 14px;
	background: linear-gradient(to top, rgba(7,7,7,0.7), rgba(7,7,7,0));
	color: var(--paper);
	font-family: var(--f-en);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-align: left;
	opacity: 0;
	transition: opacity 0.3s;
}
.port-img:hover .port-img__cap { opacity: 1; }

/* size variants */
@media (min-width: 720px) {
	.port-img--hero { grid-column: span 6; aspect-ratio: 16/9; }
	.port-img--land { grid-column: span 3; aspect-ratio: 3/2; }
	.port-img--port { grid-column: span 2; aspect-ratio: 3/4; }
	.port-img--sq   { grid-column: span 3; aspect-ratio: 1/1; }
	.port-img--wide { grid-column: span 4; aspect-ratio: 3/2; }
	.port-img--tall { grid-column: span 2; aspect-ratio: 3/4; }
}
.port-img--hero { aspect-ratio: 16/9; }
.port-img--land { aspect-ratio: 3/2; }
.port-img--port { aspect-ratio: 3/4; }
.port-img--sq   { aspect-ratio: 1/1; }
.port-img--wide { aspect-ratio: 3/2; }
.port-img--tall { aspect-ratio: 3/4; }

/* ---------- Outbound (Another Eye) ---------- */
.port-out {
	padding: clamp(64px, 8vw, 120px) 5%;
	border-top: 1px solid var(--line);
	text-align: center;
	box-sizing: border-box;
}
.port-out__eyebrow {
	font-family: var(--f-en); font-size: 11px; letter-spacing: 0.32em;
	color: var(--paper-dim); text-transform: uppercase; margin-bottom: 36px;
}
.port-out__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: clamp(20px, 2.4vw, 36px);
}
.port-out__link {
	display: inline-flex; align-items: baseline;
	gap: clamp(10px, 1.4vw, 20px);
	font-family: var(--f-en); font-weight: 300;
	font-size: clamp(28px, 4vw, 56px);
	line-height: 1.1;
	color: var(--paper);
	transition: opacity 0.3s;
}
.port-out__link:hover { opacity: 0.65; }
.port-out__link:hover .port-out__arrow { transform: translateX(8px); }
.port-out__arrow { display: inline-block; font-size: 0.55em; transition: transform 0.3s; }
.port-out__note {
	display: block;
	margin-top: 8px;
	font-family: var(--f-jp); font-size: 12px; color: var(--paper-dim);
	letter-spacing: 0.08em;
}

/* ---------- CTA (Work) ---------- */
.port-cta {
	padding: clamp(64px, 8vw, 120px) 5%;
	border-top: 1px solid var(--line);
	text-align: center;
	box-sizing: border-box;
}
.port-cta__eyebrow {
	font-family: var(--f-en); font-size: 11px; letter-spacing: 0.32em;
	color: var(--paper-dim); text-transform: uppercase; margin-bottom: 20px;
}
.port-cta__link {
	display: inline-flex; align-items: center;
	gap: clamp(10px, 1.4vw, 20px);
	font-family: var(--f-en); font-weight: 300;
	font-size: clamp(32px, 5vw, 64px);
	line-height: 1;
	color: var(--paper);
	transition: opacity 0.3s;
}
.port-cta__link:hover { opacity: 0.65; }
.port-cta__link:hover .port-cta__arrow { transform: translateX(8px); }
.port-cta__arrow { display: inline-block; font-size: 0.7em; transition: transform 0.3s; }
.port-cta__note {
	margin-top: 16px;
	font-family: var(--f-jp); font-size: 13px; color: var(--paper-dim);
}

/* ---------- Lightbox ---------- */
.port-lightbox {
	position: fixed; inset: 0;
	background: rgba(7,7,7,0.96);
	display: none;
	align-items: center; justify-content: center;
	z-index: 9999;
	cursor: zoom-out;
	padding: 40px;
}
.port-lightbox.is-open { display: flex; }
.port-lightbox__stage {
	max-width: 95vw;
	max-height: 85vh;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--paper-dim);
	font-family: var(--f-en);
	font-size: 12px;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	background: rgba(237,232,221,0.04);
	padding: 80px 60px;
}
.port-lightbox__close {
	position: absolute; top: 24px; right: 28px;
	font-size: 32px; color: var(--paper);
	font-family: var(--f-en); font-weight: 200;
	cursor: pointer; line-height: 1;
}