:root{
	--portfolio-bg:#f5f5f2;
	--portfolio-surface:#fcfcf9;
	--portfolio-text:#151515;
	--portfolio-muted:#656565;
	--portfolio-line:rgba(21,21,21,.12);
	--portfolio-line-strong:rgba(21,21,21,.2);
	--portfolio-accent:#151515;
	--portfolio-accent-soft:#e4e4e1;
	--portfolio-font-serif: "Instrument Serif", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
	--portfolio-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html, body {
	margin:0;
	padding:0;
	background:
		radial-gradient(circle at top left, rgba(255,255,255,.86), transparent 22%),
		linear-gradient(180deg, #f8f8f6 0%, #f0f0ec 100%);
	color:var(--portfolio-text);
	font-family: 'Inter', system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
}

body{ min-height:100vh; }

.portfolio-shell, .portfolio-wrap{ min-height:100vh; }

.portfolio-wrap{
	padding:0 3.25rem 4rem;
	background:rgba(252,252,249,.88);
}

.portfolio-main{
	max-width:1280px;
	margin:0 auto;
	padding-top:1rem;
}

.portfolio-kicker{
	display:inline-block;
	font-family:var(--portfolio-font-mono);
	font-size:.76rem;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:#7a7a7a;
}

/* HERO */
.portfolio-hero{
	display:grid;
	grid-template-columns:minmax(0, 1.15fr) minmax(320px, .85fr);
	gap:3rem;
	align-items:center;
	padding:2.5rem 0 3rem;
}

.portfolio-hero-copy h1{
	margin:1rem 0 0;
	font-family:var(--portfolio-font-serif);
	font-size:clamp(4rem, 7vw, 6.5rem);
	font-weight:400;
	line-height:.95;
	letter-spacing:-.04em;
}

.portfolio-hero-side p{
	margin:0;
	font-size:1.08rem;
	line-height:1.85;
	color:var(--portfolio-muted);
}

.portfolio-actions{
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
	margin-top:2rem;
}

.portfolio-primary-link, .portfolio-secondary-link{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:1rem 1.55rem;
	border-radius:999px;
	text-decoration:none;
	font-family:var(--portfolio-font-mono);
	font-size:.92rem;
	font-weight:700;
	transition:transform .25s ease, background .25s ease, border-color .25s ease;
}

.portfolio-primary-link{
	background:var(--portfolio-accent);
	color:#ffffff;
}

.portfolio-secondary-link{
	background:transparent;
	border:1px solid var(--portfolio-line-strong);
	color:var(--portfolio-text);
}

.portfolio-primary-link:hover, .portfolio-secondary-link:hover{
	transform:translateY(-2px);
}

/* STRIP */
.portfolio-strip{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:1.5rem;
	padding:1.5rem 0;
	border-top:1px solid var(--portfolio-line);
	border-bottom:1px solid var(--portfolio-line);
}

.portfolio-strip-item{
	text-align:center;
}

.portfolio-strip-item span{
	display:block;
	font-family:var(--portfolio-font-mono);
	font-size:.74rem;
	font-weight:700;
	letter-spacing:.16em;
	text-transform:uppercase;
	color:#7f7f7f;
}

.portfolio-strip-item strong{
	display:block;
	margin-top:.7rem;
	font-family:var(--portfolio-font-serif);
	font-size:2.5rem;
	font-weight:400;
	line-height:1;
}

/* FEATURE */
.portfolio-feature{
	display:grid;
	grid-template-columns:1fr 0.85fr;
	gap:4rem;
	padding:5rem 0;
	align-items:center;
}

.portfolio-feature-visual{
	position:relative;
	/* Anti Gepeng Base */
	aspect-ratio:3/4;
	border-radius:2rem;
	overflow:hidden;
	box-shadow:0 18px 48px rgba(21,21,21,.08);
}

.portfolio-feature-visual img{
	width:100%;
	height:100%;
	object-fit:cover; /* CRITICAL */
	display:block;
	transition:transform 1.2s cubic-bezier(.22,1,.36,1);
}

.portfolio-feature:hover .portfolio-feature-visual img {
	transform:scale(1.05);
}

.portfolio-feature-copy h2, .portfolio-section-heading h2, .portfolio-closing h2{
	margin:1rem 0 0;
	font-family:var(--portfolio-font-serif);
	font-size:clamp(3rem, 5vw, 4rem);
	font-weight:400;
	line-height:1;
	letter-spacing:-.04em;
}

.portfolio-feature-copy p{
	margin:1.5rem 0 0;
	font-size:1.05rem;
	line-height:1.85;
	color:var(--portfolio-muted);
}

.portfolio-feature-note, .portfolio-gallery-accent{
	margin-top:1.25rem;
	font-family:var(--portfolio-font-mono);
	font-size:.8rem;
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:#7f7f7f;
}

.portfolio-collection-list{
	margin-top:3rem;
	border-top:1px solid var(--portfolio-line);
}

.portfolio-collection-item{
	display:grid;
	grid-template-columns:minmax(0, 1fr) auto;
	gap:1rem;
	padding:1.5rem 0;
	border-bottom:1px solid var(--portfolio-line);
	align-items:start;
}

.portfolio-collection-item h3, .portfolio-gallery-copy h3, .portfolio-flow-body h3{
	margin:0;
	font-family:var(--portfolio-font-serif);
	font-size:2.2rem;
	font-weight:400;
	line-height:1.1;
}

.portfolio-collection-item p, .portfolio-gallery-copy p, .portfolio-flow-body p{
	margin: .7rem 0 0;
	font-size:1rem;
	line-height:1.75;
	color:var(--portfolio-muted);
}

.portfolio-collection-item span{
	font-family:var(--portfolio-font-mono);
	font-size:.78rem;
	font-weight:700;
	letter-spacing:.12em;
	text-transform:uppercase;
	color:#8a8a8a;
}

/* GALLERY - The Soft Harmony Layout */
.portfolio-gallery-section{
	padding:3rem 0;
}

.portfolio-section-heading{
	max-width:800px;
	margin:0 auto 4rem;
	text-align:center;
}

.portfolio-gallery-grid{
	display:grid;
	grid-template-columns:repeat(12, 1fr);
	gap:3rem;
}

.portfolio-gallery-item{
	display:block;
}

/* 
	Grid Placement - Asymmetry designed to match CP Shell 
	Using aspect ratios to strictly avoid distortion
	Replaced negative margins with safe staggering (padding) to prevent text/image overlap
*/
.portfolio-gallery-item-1 { grid-column: span 7; }
.portfolio-gallery-item-2 { grid-column: span 5; padding-top: 5rem; }
.portfolio-gallery-item-3 { grid-column: span 5; }
.portfolio-gallery-item-4 { grid-column: span 7; padding-top: 6rem; }
.portfolio-gallery-item-0 { grid-column: 2 / 12; padding-top: 4rem; } /* Pano view centered (spanning 10 columns) */

.portfolio-gallery-image{
	border-radius:2rem;
	overflow:hidden;
	box-shadow:0 18px 48px rgba(21,21,21,.04);
	margin-bottom:1.75rem;
	background: #eee;
}

/* Strict object-fit and aspect ratios = NO GEPENG! */
.portfolio-gallery-image img{
	width:100%;
	height:100%;
	object-fit:cover; 
	display:block;
	transition:transform 1s cubic-bezier(.22,1,.36,1);
}

.portfolio-gallery-item:hover .portfolio-gallery-image img {
	transform:scale(1.05);
}

/* Custom aspect ratios replacing raw pixel height */
.portfolio-gallery-item-1 .portfolio-gallery-image { aspect-ratio: 4/3; }
.portfolio-gallery-item-2 .portfolio-gallery-image { aspect-ratio: 4/5; }
.portfolio-gallery-item-3 .portfolio-gallery-image { aspect-ratio: 1/1; }
.portfolio-gallery-item-4 .portfolio-gallery-image { aspect-ratio: 3/2; }
.portfolio-gallery-item-0 .portfolio-gallery-image { aspect-ratio: 21/9; border-radius: 2.5rem;}

.portfolio-gallery-copy{
	padding: 0 1rem;
}

.portfolio-gallery-category{
	display:inline-block;
	font-family:var(--portfolio-font-mono);
	font-size:.76rem;
	font-weight:700;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:#7a7a7a;
	margin-bottom: 0.5rem;
}

/* FLOW */
.portfolio-flow{
	padding:6rem 0;
}

.portfolio-flow-list{
	border-top:1px solid var(--portfolio-line);
}

.portfolio-flow-item{
	display:grid;
	grid-template-columns: 120px 1fr;
	gap:2rem;
	padding:2.5rem 0;
	border-bottom:1px solid var(--portfolio-line);
	align-items:start;
}

.portfolio-flow-step{
	font-family:var(--portfolio-font-serif);
	font-size:3.5rem;
	font-weight:400;
	line-height:0.8;
	color:#d0d0ce;
}

.portfolio-flow-body h3 {
	margin-bottom: 0.5rem;
}

/* CLOSING */
.portfolio-closing{
	max-width:880px;
	margin:0 auto;
	padding:5rem 0 3rem;
	text-align:center;
}

.portfolio-closing .portfolio-primary-link{
	margin-top:2.5rem;
}

/* Smooth Reveal matching About/Services */
.portfolio-reveal{
	opacity:0;
	transform:translateY(42px);
	transition:
		opacity .8s cubic-bezier(.22,1,.36,1),
		transform .8s cubic-bezier(.22,1,.36,1);
}

.portfolio-reveal[data-reveal="left"]{
	transform:translateX(42px);
}

.portfolio-reveal.is-visible{
	opacity:1;
	transform:none;
}

/* RESPONSIVE */
@media (prefers-reduced-motion: reduce){
	.portfolio-reveal, .portfolio-primary-link, .portfolio-secondary-link, .portfolio-feature-visual img, .portfolio-gallery-image img { transition:none; }
	.portfolio-reveal { opacity:1; transform:none; }
}

@media (max-width:1199px){
	.portfolio-wrap { padding: 0 1.5rem 3rem; }
	.portfolio-hero, .portfolio-feature { grid-template-columns:1fr; gap: 3rem;}
	
	.portfolio-gallery-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
	.portfolio-gallery-item { grid-column: span 1 !important; margin: 0 !important; padding: 0 !important; }
	.portfolio-gallery-item-0 { grid-column: span 2 !important; }
}

@media (max-width:767px){
	.portfolio-wrap { padding: 0 1.2rem 2.75rem; }
	.portfolio-hero h1 { font-size:clamp(3rem, 15vw, 4.6rem); }
	.portfolio-strip { grid-template-columns:1fr; gap: 1.5rem; text-align: left; }
	.portfolio-strip-item { text-align: left; }
	
	.portfolio-gallery-grid { grid-template-columns: 1fr; }
	.portfolio-gallery-item { grid-column: span 1 !important; }
	.portfolio-gallery-image { border-radius: 1.5rem; aspect-ratio: 4/3 !important; }
	
	.portfolio-flow-item { grid-template-columns: 1fr; gap: 1rem; }
	.portfolio-flow-step { font-size: 2.5rem; }
}