/* =========================================================
   PID — Student Work: single project page
   ---------------------------------------------------------
   WHERE: /pid-assets/css/student-project.css
   Load : on single-pid_work.php only

   Merged from the five original project pages. Where a rule
   appeared in more than one file the bodies were identical,
   so this is a straight union — nothing was re-authored.

   NOTE: the page needs Jost, Roboto and Instrument Serif.
   Load them in the header, or the type falls back to system
   fonts and the whole layout reads wrong.
   ========================================================= */


/* ─────────────────────────────────────────────────────────
   RESET, TOKENS & BASE
   ───────────────────────────────────────────────────────── */

*,
*::before,
*::after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	--purple: #41177A;
	--purple-deep: #1F0A3D;
	--purple-soft: #6E3CB0;
	--purple-lt: #AF7DF3;
	--gold: #F3C626;
	--gold-deep: #DCAF10;
	--cream: #F4F1EA;
	--ink: #0F0814;
	--gray: #7B7E86;
	--gray-line: #D9D6CF;
	--shadow: 0 26px 60px -30px rgba(31,10,61,.45);
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Roboto', sans-serif;
	background: var(--cream);
	color: var(--ink);
	overflow-x: clip;
}

.serif-i {
	font-family: 'Instrument Serif', serif;
	font-style: italic;
	font-weight: 400;
	letter-spacing: -.01em;
	text-transform: none;
}

img {
	display: block;
	max-width: 100%;
}


/* ─────────────────────────────────────────────────────────
   LAYOUT & SHARED BITS
   ───────────────────────────────────────────────────────── */

.pf-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 44px;
}

.pf-eyebrow {
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	letter-spacing: .24em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--purple);
	display: inline-flex;
	align-items: center;
	gap: 13px;
}

.pf-eyebrow::before {
	content: '';
	width: 30px;
	height: 2px;
	background: var(--gold);
}

.ahero-cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--gold);
	color: var(--ink);
	padding: 15px 24px;
	font-family: 'Jost', sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .25s, background .25s;
}

.ahero-cta:hover {
	transform: translateY(-3px);
}

.ahero-cta.alt {
	background: transparent;
	color: var(--cream);
	border: 1px solid rgba(255,255,255,.3);
}

.ahero-cta.alt:hover {
	border-color: var(--gold);
	color: var(--gold);
}


/* ─────────────────────────────────────────────────────────
   REVEAL ON SCROLL
   ───────────────────────────────────────────────────────── */

.reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
}

.reveal.in {
	opacity: 1;
	transform: none;
}

.reveal-d1 {
	transition-delay: .08s;
}

.reveal-d2 {
	transition-delay: .16s;
}

.reveal-d3 {
	transition-delay: .24s;
}


/* ─────────────────────────────────────────────────────────
   BREADCRUMB
   ───────────────────────────────────────────────────────── */

.pf-crumb {
	background: var(--purple-deep);
	color: rgba(255,255,255,.6);
	font-family: 'Jost', sans-serif;
	font-size: 12px;
	letter-spacing: .04em;
}

.pf-crumb .pf-wrap {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 14px;
	padding-bottom: 14px;
}

.pf-crumb a {
	color: rgba(255,255,255,.6);
	text-decoration: none;
	transition: color .2s;
}

.pf-crumb a:hover {
	color: var(--gold);
}

.pf-crumb .cur {
	color: var(--cream);
}


/* ─────────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────────── */

.pf-hero {
	position: relative;
	overflow: hidden;
	background: var(--purple-deep);
	color: var(--cream);
	padding: 70px 0 76px;
}

.pf-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 62px 62px;
	mask-image: radial-gradient(circle at 30% 30%, #000 25%, transparent 75%);
	-webkit-mask-image: radial-gradient(circle at 30% 30%, #000 25%, transparent 75%);
}

.pf-hero .pf-wrap {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.5fr .9fr;
	gap: 50px;
	align-items: center;
}

.pf-hero-eyebrow {
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	letter-spacing: .26em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--gold);
}

.pf-name {
	font-family: 'Jost', sans-serif;
	font-weight: 900;
	text-transform: uppercase;
	font-size: clamp(52px, 8vw, 118px);
	line-height: .86;
	letter-spacing: -.03em;
	margin: 20px 0 0;
}

.pf-prog {
	font-family: 'Jost', sans-serif;
	font-weight: 600;
	font-size: clamp(15px, 1.7vw, 19px);
	color: var(--cream);
	margin-top: 22px;
	display: inline-flex;
	align-items: center;
	gap: 12px;
}

.pf-prog .pip {
	width: 8px;
	height: 8px;
	background: var(--gold);
}

.pf-lede {
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255,255,255,.72);
	max-width: 480px;
	margin-top: 20px;
}

.pf-hero-feat {
	position: relative;
}

.pf-hero-feat img {
	width: 100%;
	box-shadow: 0 40px 80px -34px rgba(0,0,0,.7);
	background: #fff;
}

.pf-hero-feat .cap {
	position: absolute;
	left: 0;
	bottom: -14px;
	background: var(--gold);
	color: var(--ink);
	font-family: 'Jost', sans-serif;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 7px 12px;
}


/* ─────────────────────────────────────────────────────────
   TILES, GALLERIES & MASONRY
   ───────────────────────────────────────────────────────── */

.pf-gallery {
	margin-top: 44px;
}

.pf-feature {
	margin-top: 44px;
	position: relative;
	overflow: hidden;
	background: var(--purple-deep);
}

.pf-feature img {
	width: 100%;
}

.pf-masonry {
	column-gap: 20px;
	margin-top: 20px;
}

.pf-c3 {
	column-count: 3;
}

.pf-c2 {
	column-count: 2;
}

.pf-tile {
	break-inside: avoid;
	margin: 0 0 20px;
	position: relative;
	overflow: hidden;
	background: var(--purple-deep);
	cursor: zoom-in;
	box-shadow: var(--shadow);
}

.pf-tile img {
	width: 100%;
	transition: transform .8s cubic-bezier(.22,.61,.36,1);
}

.pf-tile:hover img {
	transform: scale(1.05);
}

.pf-tile::after {
	content: '⤢';
	position: absolute;
	top: 12px;
	right: 12px;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15,8,20,.55);
	color: #fff;
	font-size: 15px;
	opacity: 0;
	transition: opacity .3s;
	backdrop-filter: blur(3px);
}

.pf-tile:hover::after {
	opacity: 1;
}


/* ─────────────────────────────────────────────────────────
   PROJECT SECTION
   ───────────────────────────────────────────────────────── */

.pf-proj {
	padding: 96px 0 40px;
}

.pf-proj.dark {
	background: var(--ink);
	color: var(--cream);
}

.pf-proj-head {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 30px;
	align-items: start;
}

.pf-index {
	font-family: 'Jost', sans-serif;
	font-weight: 900;
	font-size: clamp(46px, 6vw, 88px);
	line-height: .8;
	letter-spacing: -.03em;
	color: transparent;
	-webkit-text-stroke: 1.5px var(--gray-line);
}

.pf-proj.dark .pf-index {
	-webkit-text-stroke: 1.5px rgba(255,255,255,.26);
}

.pf-type {
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--gold-deep);
}

.pf-proj.dark .pf-type {
	color: var(--gold);
}

.pf-title {
	font-family: 'Jost', sans-serif;
	font-weight: 800;
	font-size: clamp(34px, 5vw, 68px);
	line-height: .96;
	letter-spacing: -.025em;
	color: var(--ink);
	margin: 12px 0 0;
}

.pf-proj.dark .pf-title {
	color: var(--cream);
}

.pf-title .serif-i {
	color: var(--purple);
}

.pf-proj.dark .pf-title .serif-i {
	color: var(--gold);
}

.pf-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 20px;
}

.pf-tag {
	font-family: 'Jost', sans-serif;
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--purple);
	border: 1px solid var(--gray-line);
	padding: 6px 11px;
}

.pf-proj.dark .pf-tag {
	color: rgba(255,255,255,.85);
	border-color: rgba(255,255,255,.24);
}

.pf-brief {
	max-width: 620px;
	margin: 30px 0 0;
	font-size: 16px;
	line-height: 1.72;
	color: var(--gray);
}

.pf-proj.dark .pf-brief {
	color: rgba(255,255,255,.72);
}

.pf-brief p + p {
	margin-top: 15px;
}

.pf-brief b {
	color: var(--ink);
	font-weight: 600;
}

.pf-proj.dark .pf-brief b {
	color: var(--cream);
}

.pf-quote {
	font-family: 'Instrument Serif', serif;
	font-style: italic;
	font-size: clamp(22px, 2.6vw, 30px);
	line-height: 1.35;
	color: var(--purple);
	max-width: 720px;
	margin: 34px 0 0;
	padding-left: 22px;
	border-left: 3px solid var(--gold);
}

.pf-proj.dark .pf-quote {
	color: var(--gold);
}

.pf-proj.dark .pf-flow-label {
	color: var(--gold);
}

.pf-proj.dark .pf-flow-num {
	color: var(--gold);
}

.pf-proj.dark .pf-flow-name {
	color: var(--cream);
}

.pf-proj.dark .pf-final-label {
	color: var(--gold);
}


/* ─────────────────────────────────────────────────────────
   PROCESS FLOW
   ───────────────────────────────────────────────────────── */

.pf-flow {
	margin-top: 44px;
}

.pf-flow-label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--purple);
}

.pf-flow-label::before {
	content: '';
	width: 26px;
	height: 2px;
	background: var(--gold);
}

.pf-flow-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(172px,1fr));
	gap: 16px;
	margin-top: 22px;
}

.pf-flow-item .pf-tile {
	margin: 0;
	aspect-ratio: 4/3;
}

.pf-flow-num {
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--gold-deep);
	margin-top: 12px;
}

.pf-flow-name {
	font-family: 'Jost', sans-serif;
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--ink);
	margin-top: 3px;
}

.pf-final-label {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--purple);
	margin-top: 54px;
}

.pf-final-label::before {
	content: '';
	width: 26px;
	height: 2px;
	background: var(--gold);
}


/* ─────────────────────────────────────────────────────────
   SKETCHBOOK WALL
   ───────────────────────────────────────────────────────── */

.pf-sketch {
	padding: 96px 0 40px;
	background: var(--cream);
}

.pf-sk-masonry {
	column-count: 4;
	column-gap: 18px;
	margin-top: 44px;
}

.pf-sk {
	break-inside: avoid;
	margin: 0 0 18px;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--gray-line);
	cursor: zoom-in;
}

.pf-sk img {
	width: 100%;
	transition: transform .8s cubic-bezier(.22,.61,.36,1);
}

.pf-sk:hover img {
	transform: scale(1.05);
}


/* ─────────────────────────────────────────────────────────
   FINAL FILM
   ───────────────────────────────────────────────────────── */

.pf-film {
	background: var(--ink);
	color: var(--cream);
	padding: 92px 0 96px;
}

.pf-film .pf-eyebrow {
	color: var(--gold);
}

.pf-film .pf-eyebrow::before {
	background: var(--gold);
}

.pf-film h2 {
	font-family: 'Jost', sans-serif;
	font-weight: 800;
	font-size: clamp(30px,4vw,54px);
	line-height: 1;
	letter-spacing: -.025em;
	margin-top: 14px;
	color: var(--cream);
}

.pf-film h2 .serif-i {
	color: var(--gold);
}

.pf-film p.sub {
	color: rgba(255,255,255,.7);
	font-size: 15.5px;
	line-height: 1.6;
	max-width: 560px;
	margin-top: 14px;
}

.pf-video {
	position: relative;
	margin-top: 40px;
	aspect-ratio: 16/9;
	overflow: hidden;
	background: #000;
	box-shadow: 0 40px 90px -40px rgba(0,0,0,.8);
	cursor: pointer;
}

.pf-video img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .62;
	transition: opacity .4s, transform 1s cubic-bezier(.22,.61,.36,1);
}

.pf-video:hover img {
	opacity: .72;
	transform: scale(1.03);
}

.pf-video-ov {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	text-align: center;
	padding: 20px;
}

.pf-play {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--gold);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .25s;
	box-shadow: 0 16px 40px -12px rgba(0,0,0,.6);
}

.pf-video:hover .pf-play {
	transform: scale(1.09);
}

.pf-play svg {
	width: 32px;
	height: 32px;
	color: var(--ink);
	margin-left: 5px;
}

.pf-vid-badge {
	font-family: 'Jost', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cream);
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.3);
	padding: 9px 18px;
}

.pf-vid-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.pf-vid-meta span {
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 600;
	color: rgba(255,255,255,.82);
	border: 1px solid rgba(255,255,255,.22);
	padding: 6px 12px;
}


/* ─────────────────────────────────────────────────────────
   PROCESS STEPS
   ───────────────────────────────────────────────────────── */

.pf-process {
	padding: 96px 0 60px;
	background: var(--cream);
}

.pf-proc-head {
	max-width: 640px;
}

.pf-proc-head h2 {
	font-family: 'Jost', sans-serif;
	font-weight: 800;
	font-size: clamp(34px,5vw,64px);
	line-height: .96;
	letter-spacing: -.025em;
	margin: 14px 0 0;
	color: var(--ink);
}

.pf-proc-head h2 .serif-i {
	color: var(--purple);
}

.pf-proc-head p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--gray);
	margin-top: 16px;
}

.pf-steps {
	margin-top: 52px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.pf-step {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	background: #fff;
	border: 1px solid var(--gray-line);
	overflow: hidden;
	transition: box-shadow .35s, transform .35s;
}

.pf-step:hover {
	box-shadow: var(--shadow);
	transform: translateY(-4px);
}

.pf-step-img {
	position: relative;
	overflow: hidden;
	background: var(--purple-deep);
	margin: 0;
	min-height: 240px;
	cursor: zoom-in;
}

.pf-step-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s cubic-bezier(.22,.61,.36,1);
}

.pf-step:hover .pf-step-img img {
	transform: scale(1.05);
}

.pf-step-img::after {
	content: '⤢';
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15,8,20,.55);
	color: #fff;
	font-size: 14px;
	opacity: 0;
	transition: opacity .3s;
}

.pf-step-img:hover::after {
	opacity: 1;
}

.pf-step.rev .pf-step-img {
	order: 2;
}

.pf-step-body {
	padding: 34px 38px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.pf-step-num {
	font-family: 'Jost', sans-serif;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .2em;
	color: var(--gold-deep);
	display: flex;
	align-items: center;
	gap: 12px;
}

.pf-step-num::before {
	content: '';
	width: 26px;
	height: 2px;
	background: var(--gold);
}

.pf-step-title {
	font-family: 'Jost', sans-serif;
	font-weight: 800;
	font-size: clamp(22px,2.4vw,32px);
	line-height: 1.02;
	letter-spacing: -.02em;
	color: var(--ink);
	margin: 12px 0 0;
}

.pf-step-title .serif-i {
	color: var(--purple);
}

.pf-step-desc {
	font-size: 15px;
	line-height: 1.66;
	color: var(--gray);
	margin-top: 12px;
}

.pf-step-credit {
	font-family: 'Jost', sans-serif;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--purple);
	margin-top: 16px;
}


/* ─────────────────────────────────────────────────────────
   STILLS GRID
   ───────────────────────────────────────────────────────── */

.pf-stills {
	padding: 40px 0 40px;
	background: var(--cream);
}

.pf-stills-grid {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 14px;
	margin-top: 40px;
}


/* ─────────────────────────────────────────────────────────
   END CTA
   ───────────────────────────────────────────────────────── */

.pf-end {
	padding: 90px 0 100px;
	text-align: center;
	background: radial-gradient(60% 80% at 20% 10%, rgba(175,125,243,.3), transparent 60%), radial-gradient(50% 70% at 85% 90%, rgba(243,198,38,.22), transparent 60%), var(--purple);
	color: var(--cream);
}

.pf-end h2 {
	font-family: 'Jost', sans-serif;
	font-weight: 800;
	font-size: clamp(32px, 4.4vw, 58px);
	line-height: 1;
	letter-spacing: -.02em;
}

.pf-end h2 .serif-i {
	color: var(--gold);
}

.pf-end p {
	color: rgba(255,255,255,.78);
	font-size: 16px;
	margin: 18px auto 0;
	max-width: 520px;
}

.pf-end-ctas {
	display: flex;
	gap: 12px;
	justify-content: center;
	margin-top: 32px;
	flex-wrap: wrap;
}


/* ─────────────────────────────────────────────────────────
   LIGHTBOX
   ───────────────────────────────────────────────────────── */

.pf-lb {
	position: fixed;
	inset: 0;
	z-index: 9000;
	background: rgba(15,8,20,.94);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 40px;
}

.pf-lb.open {
	display: flex;
}

.pf-lb img {
	max-width: 92vw;
	max-height: 88vh;
	box-shadow: 0 40px 90px -30px rgba(0,0,0,.8);
}

.pf-lb-btn {
	position: absolute;
	background: rgba(255,255,255,.12);
	border: 1px solid rgba(255,255,255,.3);
	color: #fff;
	width: 52px;
	height: 52px;
	cursor: pointer;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s;
}

.pf-lb-btn:hover {
	background: var(--gold);
	color: var(--ink);
	border-color: var(--gold);
}

.pf-lb-prev {
	left: 22px;
	top: 50%;
	transform: translateY(-50%);
}

.pf-lb-next {
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
}

.pf-lb-close {
	right: 22px;
	top: 22px;
}


/* ─────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {

	.pf-hero .pf-wrap {
		grid-template-columns: 1fr;
		gap: 34px;
	}

	.pf-hero-feat {
		max-width: 360px;
	}

	.pf-c3 {
		column-count: 2;
	}

	.pf-proj-head {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.pf-sk-masonry {
		column-count: 3;
	}

}

@media (max-width: 820px) {

	.pf-step {
		grid-template-columns: 1fr;
	}

	.pf-step.rev .pf-step-img {
		order: 0;
	}

	.pf-stills-grid {
		grid-template-columns: repeat(2,1fr);
	}

}

@media (max-width: 560px) {

	.pf-wrap {
		padding: 0 20px;
	}

	.pf-c3,
	.pf-c2 {
		column-count: 1;
	}

	.pf-sk-masonry {
		column-count: 2;
	}

}

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

	.reveal {
		transition: none;
		opacity: 1;
		transform: none;
	}

	.pf-tile img {
		transition: none;
	}

	.pf-tile img,
	.pf-sk img {
		transition: none;
	}

}