.root-placeholder{}
:root{
	--bg:#000000; /* matched to provided image */
	--text:#ffffff;
	--muted:#ffffff;
	--accent:#66d9ff;
	--card:#0e1a26;
	font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.45;font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
.container{width:80%;max-width:none;margin:0 auto;padding:28px}
.site-header{}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.logo{margin:0;font-size:1.2rem;display:none}
.hero{position:relative}
.hero::before{content:'Yumei Liu';position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:1.2rem;letter-spacing:2px;color:#c9b584;background:var(--bg);padding:0 16px}
.nav a{margin-left:16px;color:var(--muted);text-decoration:none}
	.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 0;gap:28px}
	.hero-title{font-size:1rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin:0}
	.hero-portrait{position:relative;display:flex;align-items:center;justify-content:center}
	.hero-portrait img{width:360px;height:360px;border-radius:50%;object-fit:cover;display:block;box-shadow:0 10px 30px rgba(2,6,23,0.6);}
	.hero-portrait::before{content:'';position:absolute;width:420px;height:420px;border-radius:50%;background:linear-gradient(135deg,rgba(102,217,255,0.08),rgba(255,200,120,0.04));filter:blur(12px);z-index:0}
	.hero-portrait img{position:relative;z-index:1}
	.hero-decor{position:absolute;left:-40%;top:10%;width:14px;height:14px;background:#d4af6a;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,0.4);z-index:2}
	.hero-tagline{font-size:clamp(20px,4vw,36px);max-width:100%;margin:0;color:var(--text);line-height:1.15}
.btn{display:inline-block;padding:10px 16px;background:var(--accent);color:#041226;border-radius:6px;text-decoration:none}
.hero-portrait img{ width:300px;height:300px }
.hero-portrait::before{width:340px;height:340px}

@media (max-width: 700px) {
	.hero-portrait img{ width:220px;height:220px }
	.hero-portrait::before{width:260px;height:260px}
}

@media (max-width: 480px) {
	.hero-portrait img{ width:140px; height:140px; }
	.hero{ padding:24px 0; }
}

@media (max-width: 700px) {
	.container{width:94%;padding:18px}
}

.projects .grid{display:grid;grid-template-columns:repeat(2,1fr);gap:36px;margin-top:32px}
.card{background:transparent;border-radius:12px;overflow:hidden;border:1px solid #c9b584}
.card{position:relative}
.card .card-cover{position:absolute;inset:0;z-index:10;background:transparent;text-indent:-9999px}
.card .card-media{background:transparent;padding:32px 32px 18px;display:flex;align-items:center;justify-content:center}
.card .media-inner{
	position:relative;
	width:100%;
	height:420px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:12px;
	background:var(--bg); /* fill surrounding area with page background */
	overflow:hidden;
}
.card .media-inner::before{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:380px;height:380px;border-radius:50%;background:radial-gradient(circle at center, rgba(102,217,255,0.12), rgba(0,0,0,0.0) 50%);filter:blur(30px);z-index:0}
.card .media-inner img{position:relative;z-index:1;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;margin:0 auto}

/* Hover float effect: lift, scale, stronger shadow and glow */
.card{transition:transform 350ms cubic-bezier(.2,.8,.2,1)}
.card .media-inner img{transition:transform 420ms cubic-bezier(.2,.8,.2,1),box-shadow 420ms ease}
.card .media-inner::before{transition:filter 420ms ease, transform 420ms ease}
.card:hover{transform:translateY(-6px)}
.card:hover .media-inner img{transform:translateY(-18px) scale(1.03);box-shadow:0 36px 80px rgba(2,6,23,0.6);z-index:5}
.card:hover .media-inner::before{filter:blur(46px);transform:translate(-50%,-50%) scale(1.06)}

/* Hover-follow bubble that appears near the cursor over project cards */
.project-bubble{
	position:fixed;
	pointer-events:none;
	z-index:10000;
	/* circular light background with good contrast against dark theme */
	background: rgba(183,141,59,0.95); /* warm gold */
	color:#041226; /* dark text for contrast */
	/* Large circular bubble (centered text) - lighter background */
	background: transparent;
	border: 2px solid #c9b584;
	color:#ffffff;
	backdrop-filter: blur(8px);
	width:120px;
	height:120px;
	padding:0;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	font-weight:700;
	font-size:14px;
	line-height:1.05;
	box-shadow:0 12px 34px rgba(0,0,0,0.65);
	white-space:normal;
	transform:translate(-50%,-50%) scale(0.98);
	transition:transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),opacity 400ms ease,box-shadow 400ms ease;
	opacity:0;
	white-space:nowrap;
}

.project-bubble.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.card .media-inner .badge{position:absolute;right:24px;bottom:24px;width:72px;height:72px;border-radius:12px;background:linear-gradient(135deg,#f59f3b,#ffb86b);box-shadow:0 8px 24px rgba(0,0,0,0.55);z-index:2}
.card .media-inner .badge{display:none !important}
.card .card-info{background:rgba(255,255,255,0.03);padding:24px;border-top:1px solid rgba(255,255,255,0.02)}
.project-link{color:inherit;text-decoration:none}
.project-link:hover{text-decoration:underline;color:inherit}
.card .card-info h4{margin:0 0 8px;text-transform:uppercase;letter-spacing:1px;color:var(--text);font-size:1.05rem}
.card .card-info p{margin:0;color:var(--muted)}

@media (max-width: 900px) {
	.projects .grid{grid-template-columns:1fr;gap:18px}
	.card .media-inner{height:360px}
}

@media (max-width: 520px) {
  .projects .grid{grid-template-columns:1fr}
  .card .media-inner{height:200px}
}
.project-page{ text-align:center }
.project-page .project-hero{ width:60%; max-width:100%; margin:24px auto; display:block; border-radius:8px }

/* Ensure project page H2 has a clear, large title size */
.project-page h2 {
	/* match homepage large tagline sizing for visual consistency */
	font-size: clamp(18px, 3vw, 28px);
	line-height: 1.15;
	margin: 18px auto 8px auto;
	letter-spacing: 0.5px;
	text-align: left;
	max-width: 900px;
}

/* Uniform content width for project detail pages */
.project-page .project-rotator,
.project-page .project-details,
.project-page .project-main,
.project-page h2 {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

@media (max-width: 980px) {
	.project-page .project-rotator,
	.project-page .project-details,
	.project-page .project-main,
	.project-page h2 {
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}
}

/* Discovery flip-book styles */
.discovery-flip{max-width:720px;margin:20px auto 8px;position:relative}
.discovery-flip .flip-controls{position:absolute;right:8px;top:8px;z-index:40;display:flex;gap:8px}
.discovery-flip .flip-controls button{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.04);color:var(--text);width:36px;height:36px;border-radius:6px;cursor:pointer}
.discovery-flip .flip-book{position:relative;width:100%;padding-top:56.25%; /* 16:9 ratio */ perspective:1400px;transform-style:preserve-3d}
.discovery-flip .page{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateX(0);width:92%;height:88%;transform-origin:center center;backface-visibility:hidden;box-shadow:0 18px 50px rgba(0,0,0,0.6);border-radius:10px;overflow:hidden;transition:transform 700ms cubic-bezier(.22,.9,.32,1), opacity 700ms ease, box-shadow 400ms ease;will-change:transform,opacity}
.discovery-flip .page img{width:100%;height:100%;object-fit:contain;display:block;background:var(--bg)}
.discovery-flip .page.flipped{transform:translate(-50%,-50%) translateX(-20%) rotateY(-180deg) translateZ(0);box-shadow:0 6px 28px rgba(0,0,0,0.6)}
.discovery-flip .page.flipping{box-shadow:0 28px 70px rgba(0,0,0,0.6);}
.discovery-flip .page::after{content:'';position:absolute;top:0;right:0;height:100%;width:36%;pointer-events:none;background:linear-gradient(90deg, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.12) 48%, rgba(255,255,255,0.00) 100%);transform:translateX(120%);opacity:0}
.discovery-flip .page.flipped::after{animation:flip-sheen 1200ms cubic-bezier(.2,.8,.2,1);} 

@keyframes flip-sheen{
	0%{transform:translateX(120%);opacity:0}
	40%{opacity:0.45}
	100%{transform:translateX(-20%);opacity:0}
}
.discovery-flip .page[style]{/* preserve inline z-index */}
.discovery-flip .page:nth-child(1){z-index:6}
.discovery-flip .page:nth-child(2){z-index:5}
.discovery-flip .page:nth-child(3){z-index:4}
.discovery-flip .page:nth-child(4){z-index:3}
.discovery-flip .page:nth-child(5){z-index:2}
.discovery-flip .page:nth-child(6){z-index:1}

@media(max-width:680px){
	.discovery-flip{max-width:100%;padding:12px}
	.discovery-flip .flip-book{padding-top:140%}
	.discovery-flip .page{width:96%;height:86%}
}

/* Ken Burns slideshow for Discovery */
.discovery-ken{max-width:720px;margin:20px auto 8px;position:relative;overflow:hidden;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}
.discovery-ken .kb-inner{position:relative;width:100%;padding-top:56.25%; /* 16:9 */}
.discovery-ken .kb-image{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);width:96%;height:92%;object-fit:cover;opacity:0;transition:opacity 900ms ease;border-radius:10px}
.discovery-ken .kb-image.active{opacity:1}
@keyframes kenburns-pan{
	0%{transform:translate(-50%,-50%) scale(1) translateX(0)}
	100%{transform:translate(-50%,-52%) scale(1.06) translateX(-2%)}
}

@media(max-width:680px){
	.discovery-ken{max-width:100%;padding:12px}
	.discovery-ken .kb-inner{padding-top:140%}
	.discovery-ken .kb-image{width:96%;height:86%}
}

/* Caption shown under discovery imagery */
.discovery-caption{
	text-align:center;
	margin-top:10px;
	color:var(--muted);
	font-weight:700;
	font-size:1rem;
	letter-spacing:0.6px;
}

/* (Using original flip-book styles above; slide/crossfade overrides removed to preserve image sizing) */

/* Ensure project pages use the same centered container so left/right margins match exactly */
.project-page.container{
	max-width: 900px; /* same as inner elements */
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* Two-column project details layout (left: visual, right: content/meta) */
.project-details {
	display: grid;
	/* visual column is responsive: minimum 320px, up to 520px */
	grid-template-columns: minmax(320px,520px) 1fr;
	gap: 48px;
	align-items: start;
	margin-top: 48px;
}

/* Visual column for mockups: center the mobile mockup and let the surrounding area show the page background */
.project-visual{
	background: var(--bg);
	border-radius: 10px;
	display:flex;
	align-items:flex-start;
	justify-content:center;
	padding:28px 24px;
	min-height:calc(100vh - 220px);
	overflow:visible;
}
.project-visual .project-hero{
	width:100%;
	max-width:480px; /* allow slightly larger mockups */
	height:auto;
	max-height:calc(100vh - 260px);
	object-fit:contain;
	object-position:center top;
	display:block;
	border-radius:0 !important;
	box-shadow:none !important;
}

.project-main {
	/* left-align section content while keeping page title centered */
	text-align: left;
	max-width: 900px;
	margin: 0 auto;
}

.project-main .project-section {
	margin-bottom: 32px;
}

.project-main h3 {
	/* use the same smaller uppercase label style as the homepage hero-title */
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--muted);
	font-size: 1rem;
	margin: 6px 0 6px 0;
	font-weight:700;
}

.project-main p {
	/* paragraph immediately under the section title */
	margin-top: 8px;
	line-height: 1.8;
	color: var(--muted-text, #dfe7db);
	font-size: 1rem;
}

.project-section .section-title-large {
  display:block;
  font-size: clamp(24px, 3.6vw, 40px);
  color: var(--text);
  margin: 6px 0 4px 0;
  letter-spacing: 4px;
  font-weight:700;
}

.project-meta {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding-left: 8px;
}

.meta-item {
	padding: 18px 0;
	border-top: 1px solid rgba(183,141,59,0.14);
}

.meta-item:first-child { border-top: none; }

.meta-key {
	font-size: 0.75rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #b78b2b; /* gold */
	margin-bottom: 8px;
}

.meta-value {
	font-weight: 700;
	color: #ffffff;
}

@media (max-width: 980px) {
	.project-details { grid-template-columns: 1fr; }
	.project-meta { order: 2; padding-left: 0; }
	.project-hero { width: 100%; }
}

/* Rotating image hero for project pages */
.project-rotator{
	width:100%;
	max-width:900px;
	height:420px;
	margin:18px auto 26px auto;
	position:relative;
	overflow:hidden;
	border-radius:8px;
	background:var(--bg);
}
.project-rotator img{
	/* center each image and contain it so the full mockup is visible */
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	max-width:96%;
	max-height:96%;
	width:auto;
	height:auto;
	object-fit:contain;
	display:block;
	opacity:0;
	transition:opacity 600ms ease, transform 300ms ease;
}
.project-rotator img.active{opacity:1;transform:translate(-50%,-50%) scale(1)}

@media (max-width: 900px){
	.project-rotator{height:260px}
}
@media (max-width:520px){
	.project-rotator{height:180px}
}

/* Rotator dots (centered) */
.project-rotator .rotator-dots{
	position:absolute;
	left:50%;
	bottom:12px;
	transform:translateX(-50%);
	display:flex;
	gap:10px;
	z-index:10;
}
.rotator-dot{
	width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,0.25);border:none;padding:0;cursor:pointer;opacity:0.95;
	transition:transform 160ms ease, background 160ms ease, box-shadow 160ms ease;
	box-shadow: 0 8px 20px rgba(0,0,0,0.78), 0 1px 0 rgba(255,255,255,0.02) inset;
}
.rotator-dot.active{background:#b78b2b;transform:scale(1.25);box-shadow:0 10px 28px rgba(183,141,59,0.32), 0 1px 0 #c9b584 inset}
.rotator-dot:hover{transform:scale(1.15);background:rgba(255,255,255,0.38)}
.rotator-dot:focus{outline:2px solid rgba(183,141,59,0.18); box-shadow:0 10px 28px rgba(183,141,59,0.26)}
.link{color:var(--accent);text-decoration:none}
.values ul{list-style:none;padding:0;margin:12px 0 0}
.values li{background:rgba(255,255,255,0.02);border-left:4px solid #c9b584;padding:10px;margin-bottom:8px;color:var(--muted)}
.process ol{padding-left:18px;color:var(--muted)}
.contact a{color:var(--accent)}
.site-footer{padding:14px 0;margin-top:32px;text-align:center;color:var(--muted)}
@media(max-width:700px){.hero{flex-direction:column;text-align:center}.site-header .container{flex-direction:row}}