/* =========================================================
   MG Irvine — Portfolio
   Table of contents:
   1. Tokens & reset
   2. Base typography
   3. Layout helpers
   4. Header / nav
   5. Hero
   6. About / skills
   7. Experience timeline
   8. Projects (spotlights + grid)
   9. Galleries
   10. Contact / footer
   11. Buttons & chips
   12. Motion & responsive
   13. Case-study hero + masonry gallery + lightbox
   14. Embeds (video / playable demos)
   ========================================================= */

/* ---------- 1. Tokens & reset ---------- */
:root {
	--bg: #eef3ec;
	--bg-alt: #dfe9df;
	--surface: #f6faf4;
	--header: #5f8b85;
	--header-ink: #eef3ec;
	--ink: #23343a;
	--ink-soft: #4c5e60;
	--gold: #efdb6f;
	--violet: #7c6fa6;
	--line: rgba(35, 52, 58, 0.14);
	--shadow: 0 18px 40px -24px rgba(23, 40, 40, 0.35);

	--font-display: 'Space Grotesk', sans-serif;
	--font-body: 'Inter', sans-serif;
	--font-pixel: 'Silkscreen', monospace;

	--max: 1180px;
	--radius: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

.skip-link {
	position: absolute;
	left: -999px;
	top: 0;
	background: var(--header);
	color: #fff;
	padding: 0.75em 1.25em;
	z-index: 200;
}
.skip-link:focus { left: 1rem; top: 1rem; }

:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 3px;
}

/* ---------- 2. Base typography ---------- */
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 0.5em;
	color: var(--ink);
}
h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

.eyebrow {
	font-family: var(--font-pixel);
	font-size: 0.85rem;
	letter-spacing: 0.02em;
	color: var(--violet);
	margin: 0 0 0.6em;
}

/* ---------- 3. Layout helpers ---------- */
.section { padding: 2.5rem 0; }
.section-alt { background: var(--bg-alt); }
.section-inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 2rem;
}

/* ---------- 4. Header / nav ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--header);
	color: var(--header-ink);
	border-bottom: 1px solid rgba(255,255,255,0.12);
}
.header-inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0.85rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}
.brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--header-ink);
}
.brand-mark {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
}
.brand-text {
	font-family: var(--font-pixel);
	font-size: 1rem;
	letter-spacing: 0.02em;
}
.primary-nav ul {
	list-style: none;
	display: flex;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
}
.primary-nav a {
	text-decoration: none;
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--header-ink);
	opacity: 0.9;
	padding: 0.4rem 0;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease, opacity 0.2s ease;
}
.primary-nav a:hover { opacity: 1; border-bottom-color: var(--gold); }
.nav-cta {
	background: rgba(255,255,255,0.15);
	padding: 0.4rem 0.9rem !important;
	border-radius: 999px;
}

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
}
.nav-toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--header-ink);
}

/* ---------- 5. Hero ---------- */
.hero {
	padding: 3rem 0 3.5rem;
	background: linear-gradient(180deg, var(--bg-alt), var(--bg));
	overflow: hidden;
}
.hero-inner {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 2rem;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: 2.25rem;
}
.hero h1 {
	font-size: clamp(3rem, 6vw, 4.5rem);
	margin-bottom: 0.3em;
}
.hero-lede {
	font-size: 1.2rem;
	color: var(--ink-soft);
	max-width: 46ch;
}
.hero-facts {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}
.hero-facts li{
	padding-left: 1rem;
	font-size: 0.95rem;
	color: var(--ink-soft);
}
.hero-facts li::marker, 
.timeline-what li::marker,
.feature-list li::marker {
	content: "✦ "
}
.hero-facts a { color: var(--violet); text-decoration: underline; text-underline-offset: 2px; }
.hero-actions { display: flex; gap: 0.9rem; flex-wrap: wrap; margin: 1.75rem 0; }

.hero-art { display: flex; justify-content: center; }
.hero-dragon {
	width: min(420px, 100%);
	border-radius: 50%;
	box-shadow: var(--shadow);
	animation: float 7s ease-in-out infinite;
}
@keyframes float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}

.social-row {
	list-style: none;
	display: flex;
	gap: 0.7rem;
	padding: 0;
	margin: 0;
}
.social-row a {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--line);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	font-family: var(--font-pixel);
	font-size: 0.85rem;
	color: var(--ink-soft);
	transition: background 0.2s ease, color 0.2s ease;
}
.social-row a:hover { background: var(--header); color: #fff; }

/* ---------- 6. About / skills ---------- */
.about-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 2.5rem;
	align-items: start;
}
.skills-panel {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.75rem 2rem;
}
.skills-panel h3 {
	font-size: 0.9rem;
	text-transform: none;
	color: var(--violet);
	margin-top: 1.4rem;
}
.skills-panel h3:first-child { margin-top: 0; }
.skills-list { color: var(--ink-soft); font-size: 0.95rem; }

.chip-row {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	margin: 0.4rem 0 0;
}
.chip-row li {
	font-size: 0.85rem;
	padding: 0.3rem 0.75rem;
	border-radius: 999px;
	background: var(--bg-alt);
	color: var(--ink);
}

/* ---------- 7. Experience timeline ---------- */
.timeline {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 0;
	border-left: 2px solid var(--line);
}
.timeline-item {
	display: grid;
	grid-template-columns: 190px 1fr;
	gap: 2rem;
	padding: 0 0 2.5rem 2rem;
	position: relative;
}
.timeline-item::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 0.3rem;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--gold);
	border: 2px solid var(--bg-alt);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-date {
	font-family: var(--font-pixel);
	font-size: 0.8rem;
	color: var(--violet);
}
.timeline-role { color: var(--ink-soft); font-weight: 500; margin-bottom: 0.6em; }
.timeline-what ul { margin: 0; padding-left: 1.2rem; color: var(--ink-soft); }
.timeline-what li { margin-bottom: 0.4em; }

/* ---------- 8. Projects ---------- */
.spotlight {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.25rem;
	align-items: center;
	margin: 2.5rem 0;
}
.spotlight-reverse .spotlight-media { order: 2; }
.spotlight-reverse .spotlight-copy { order: 1; }
.spotlight-media img { min-width: 0; }
.spotlight-media img {
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.spotlight-media-contain img {
	object-fit: contain;
	background: var(--surface);
	padding: .2rem;
}
.role-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.6rem 0 1rem;
}
.role-tags span {
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	background: var(--header);
	color: #fff;
}
.spotlight-copy p { color: var(--ink-soft); }
.spotlight-meta {
	font-size: 0.85rem;
	color: var(--gold);
	font-weight: 500;
}

.side-projects { margin-top: 3rem; }
.side-projects h3 { margin-bottom: 1.5rem; }
.project-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1.5rem;
}
.project-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	text-decoration: none;
	color: var(--ink);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.project-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: contain;
	background: var(--bg-alt);
	padding: .2 rem;
	box-sizing: border-box;
}
.project-card-body { padding: 1.1rem 1.25rem 1.4rem; }
.project-card-role { font-size: 0.8rem; color: var(--violet); font-weight: 600; margin-bottom: 0.5em; }
.project-card-body p:last-child { font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- 9. Galleries ---------- */
.gallery-group { margin-top: 2rem; }
.gallery-group:first-of-type { margin-top: 1.25rem; }
.gallery-group h3 { margin-bottom: 1rem; color: var(--ink-soft); font-size: 1.05rem; }
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1rem;
}
.gallery-item {
	display: block;
	border-radius: 10px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: var(--bg-alt);
	padding: 0.6rem;
	box-sizing: border-box;
}
.gallery-item img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.4s ease; }
.gallery-item:hover img { transform: scale(1.06); }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- 10. Contact / footer ---------- */
.section-contact { background: var(--header); color: #fff; text-align: center; }
.section-contact .eyebrow { color: #d9e6c3; }
.section-contact h2 { color: #fff; }
.contact-inner { display: flex; flex-direction: column; align-items: center; }
.contact-inner p { color: rgba(255,255,255,0.85); }
.contact-links { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 1rem; }
.section-contact .button-ghost { border-color: rgba(255,255,255,0.5); color: #fff; }
.section-contact .button-ghost:hover { background: rgba(255,255,255,0.12); }

.site-footer { background: var(--ink); color: rgba(255,255,255,0.75); padding: 2.5rem 0; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.site-footer .brand-text { color: #fff; }
.site-footer .social-row a { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.75); }
.footer-note { margin: 0; font-size: 0.85rem; }

/* ---------- 11. Buttons & chips ---------- */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--gold); color: #2a2205; }
.button-primary:hover { background: #a17f27; }
.button-ghost { border-color: var(--line); color: var(--ink); }
.button-ghost:hover { background: var(--surface); }
.button-outline { border-color: var(--header); color: var(--header); padding: 0.6rem 1.3rem; font-size: 0.9rem; }
.button-outline:hover { background: var(--header); color: #fff; }

/* ---------- 12. Motion & responsive ---------- */

/* Guard against any single element forcing horizontal scroll */
html, body { overflow-x: clip; }
img, svg { max-width: 100%; height: auto; }

/* ~1024px — tablet: tighten the outer rhythm, nothing restructures yet */
@media (max-width: 1024px) {
	.section { padding: 2.25rem 0; }
	.hero-inner { gap: 2rem; }
	.spotlight { gap: 2rem; }
	.about-grid { gap: 2rem; }
}

/* ~900px — stack the two-column layouts */
@media (max-width: 900px) {
	.hero-inner { grid-template-columns: 1fr; text-align: left; }
	.hero-art { order: -1; }
	.hero-dragon { width: 240px; }
	.hero-lede { max-width: 56ch; }

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

	.spotlight,
	.spotlight-reverse { grid-template-columns: 1fr; }
	.spotlight-reverse .spotlight-media,
	.spotlight-reverse .spotlight-copy { order: initial; }
	.spotlight-media img { aspect-ratio: 16 / 10; }

	.timeline-item { grid-template-columns: 1fr; gap: 0.35rem; }
	.timeline-date { display: inline-block; margin-bottom: 0.35rem; }
}

/* ~720px — nav collapses to a menu, section rhythm tightens further */
@media (max-width: 720px) {
	.nav-toggle { display: flex; }
	.primary-nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--header);
		display: none;
		box-shadow: var(--shadow);
	}
	.primary-nav.is-open { display: block; }
	.primary-nav ul { flex-direction: column; gap: 0; padding: 0.5rem 1.25rem 1.25rem; }
	.primary-nav a { display: block; padding: 0.75rem 0; border-bottom: 1px solid rgba(255,255,255,0.12); }
	.primary-nav li:last-child a { border-bottom: none; }
	.nav-cta { display: inline-block; margin-top: 0.5rem; }

	.section { padding: 2rem 0; }
	.section-inner { padding: 0 1.25rem; }
	.header-inner { padding: 0.85rem 1.25rem; }

	.hero { padding: 2.25rem 0 2.75rem; }
	.hero h1 { font-size: clamp(2.5rem, 10vw, 3.4rem); }
	.hero-lede { font-size: 1.05rem; }

	.timeline-item { padding-left: 1.5rem; }
	.timeline-item::before { left: -6px; }

	.role-tags span { font-size: 0.72rem; padding: 0.28rem 0.6rem; }
	.gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem; }
	.project-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.1rem; }

	.footer-inner { flex-direction: column; text-align: center; }
}

/* ~560px — small phones: stack action groups, simplify spacing */
@media (max-width: 560px) {
	.section { padding: 1.75rem 0; }
	.section-inner { padding: 0 1.1rem; }

	.hero-actions,
	.contact-links { flex-direction: column; align-items: stretch; }
	.hero-actions .button,
	.contact-links .button { width: 100%; text-align: center; }

	.hero-facts li { font-size: 0.9rem; }

	.about-grid { gap: 1.75rem; }
	.skills-panel { padding: 1.5rem 1.35rem; }

	.spotlight { margin: 1.75rem 0; gap: 1.5rem; }
	.spotlight-copy h3 { font-size: 1.5rem; }

	.timeline { margin-top: 1.25rem; }
	.timeline-item { padding-bottom: 1.25rem; }

	.gallery-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 0.6rem; }
	.project-grid { grid-template-columns: 1fr; }

	.chip-row li { font-size: 0.8rem; padding: 0.28rem 0.65rem; }
}

/* ~380px — smallest phones: final tightening so nothing crowds the edge */
@media (max-width: 380px) {
	.section-inner { padding: 0 0.9rem; }
	.header-inner { padding: 0.7rem 0.9rem; }
	.brand-text { font-size: 0.85rem; }
	.hero h1 { font-size: 2.2rem; }
	.hero-dragon { width: 180px; }
	.eyebrow { font-size: 0.75rem; }
	.button { padding: 0.7rem 1.15rem; font-size: 0.9rem; }
	.gallery-grid { grid-template-columns: repeat(2, 1fr); }
	.gallery-item { padding: 0.4rem; }
}

/* ---------- 13. Case-study hero + masonry gallery + lightbox ---------- */

/* Two-column intro for case-study pages: copy left, feature image right.
   Fills the space that used to sit empty next to the title block. */
.case-hero {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 2rem;
	align-items: center;
}
.case-hero-copy .role-tags { margin-top: 0.75rem; }
.case-hero-media {
	display: flex;
	justify-content: center;
}
.case-hero-media img {
	width: 100%;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.case-hero-media-contain img {
	object-fit: contain;
	background: var(--surface);
	padding: 0.5rem;
}

@media (max-width: 900px) {
	.case-hero { grid-template-columns: 1fr; }
	.case-hero-media { order: -1; }
}

/* Masonry gallery: for pages with 10+ images. Uses CSS columns instead of
   a row grid so every image keeps its natural aspect ratio (no cropping)
   and the layout packs tightly by height instead of wasting space on
   uniform tiles. Pairs with the lightbox below for full-size viewing. */
.masonry-gallery {
	columns: 3 280px;
	column-gap: 1rem;
}
.masonry-gallery img {
	width: 100%;
	display: block;
	margin: 0 0 0.75rem;
	border-radius: var(--radius);
	break-inside: avoid;
	box-shadow: var(--shadow);
	cursor: zoom-in;
	transition: transform 0.2s ease;
}
.masonry-gallery img:hover { transform: translateY(-2px); }

@media (max-width: 720px) {
	.masonry-gallery { columns: 2 160px; column-gap: 0.75rem; }
	.masonry-gallery img { margin-bottom: 0.75rem; }
}
@media (max-width: 480px) {
	.masonry-gallery { columns: 1; }
}

/* Lightbox: click any masonry image to view it full-size. */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	background: rgba(20, 28, 28, 0.92);
}
.lightbox.is-open { display: flex; }
.lightbox img {
	max-width: 90vw;
	max-height: 90vh;
	border-radius: 10px;
	box-shadow: var(--shadow);
}
.lightbox-close {
	position: absolute;
	top: 1.5rem;
	right: 1.75rem;
	background: none;
	border: none;
	color: #fff;
	font-size: 2.25rem;
	line-height: 1;
	cursor: pointer;
	padding: 0.25rem 0.5rem;
}
.lightbox-close:hover { color: var(--gold); }
/* ---------- 14. Embeds (video / playable demos) ---------- */

/* 16:9 video embed (YouTube). Use inside .case-hero-media in place of an
   <img>, or standalone inside .embed-grid. */
.embed-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	background: #10171a;
}
.embed-frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* Taller aspect for playable p5.js sketches, whose canvases usually run
   closer to square/portrait than a video does. */
.embed-frame-sketch {
	aspect-ratio: 4 / 3;
}

/* Side-by-side embeds, e.g. two demo videos for one project. Stacks on
   small screens automatically. */
.embed-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
}

@media (max-width: 720px) {
	.embed-grid { gap: 1rem; }
}