/* ============================================================
   ASHLEY LAM — PROJECT PAGE (shared)
   Dark · Editorial · Same design language as index
   ============================================================ */

/* Inherits variables from the parent style.css if loaded together,
   but also declares them here so the file is standalone. */
:root {
  --bg:       #000000;
  --fg:       #ffffff;
  --fg-70:    rgba(255,255,255,0.70);
  --fg-40:    rgba(255,255,255,0.40);
  --fg-15:    rgba(255,255,255,0.15);
  --fg-07:    rgba(255,255,255,0.07);
  --accent:   var(--project-accent, #4FC3F7); /* overrideable */
  --serif:    'Playfair Display', Georgia, serif;
  --sans:     'Inter', -apple-system, sans-serif;
  --nav-h:    72px;
  --pad:      clamp(24px, 5vw, 64px);
  --content:  740px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
}
img  { display:block; max-width:100%; }
a    { color:inherit; text-decoration:none; }
ul   { list-style:none; }

@media (hover:hover) and (pointer:fine) {
  html, a, button { cursor:none; }
}

/* ── Cursor ─────────────────────────────── */
.cursor, .cursor-follower {
  position:fixed; top:0; left:0; border-radius:50%;
  pointer-events:none; z-index:9000;
  transform:translate(-50%,-50%);
  will-change:left,top; display:none;
}
.cursor { width:6px; height:6px; background:var(--fg); z-index:9001; }
.cursor-follower {
  width:32px; height:32px;
  border:1px solid var(--fg-40);
  transition:width .35s ease,height .35s ease,border-color .35s ease;
}
.cursor-follower.is-hovering { width:52px; height:52px; border-color:var(--accent); }

/* ── Nav ─────────────────────────────────── */
#nav {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h); padding:0 var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  z-index:200; transition:transform .4s ease, opacity .4s ease;
}
#nav::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.85) 0%,transparent 100%);
  pointer-events:none; z-index:-1;
}
#nav.is-hidden { transform:translateY(-100%); opacity:0; }

.nav-back {
  display:flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-40); transition:color .25s; position:relative; z-index:1;
}
.nav-back:hover, .nav-back:focus { color:var(--fg); outline:none; }
.nav-back svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.5; }

.nav-logo {
  font-family:var(--serif); font-size:18px; font-weight:600;
  letter-spacing:.08em; position:relative; z-index:1;
}

.nav-right {
  display:flex; gap:28px; position:relative; z-index:1;
}
.nav-right a {
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-40); transition:color .25s;
}
.nav-right a:hover, .nav-right a:focus { color:var(--fg); outline:none; }

/* ── Hero ─────────────────────────────────── */
.project-hero {
  width:100%; min-height:80vh;
  position:relative; overflow:hidden;
  display:flex; align-items:flex-end;
}

.project-hero-img {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.04);
  transition:transform 1.2s cubic-bezier(.25,.46,.45,.94);
}
.project-hero.loaded .project-hero-img { transform:scale(1); }

.project-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.92) 0%,
    rgba(0,0,0,.40) 45%,
    rgba(0,0,0,.15) 100%
  );
}

.project-hero-content {
  position:relative; z-index:2;
  padding:var(--nav-h) var(--pad) clamp(48px,6vh,72px);
  max-width:1200px; width:100%;
}

.project-eyebrow {
  font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); margin-bottom:18px;
}

.project-title {
  font-family:var(--serif);
  font-size:clamp(36px,6vw,80px);
  font-weight:400; line-height:1.0;
  max-width:780px; margin-bottom:24px;
}

.project-subtitle {
  font-size:clamp(14px,1.4vw,17px);
  color:var(--fg-70); max-width:560px; line-height:1.7;
}

/* ── Meta bar ─────────────────────────────── */
.project-meta {
  border-top:1px solid var(--fg-15);
  border-bottom:1px solid var(--fg-15);
}
.project-meta-inner {
  max-width:1200px; margin:0 auto;
  padding:clamp(28px,4vh,44px) var(--pad);
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.meta-item {}
.meta-label {
  font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-40); margin-bottom:8px;
}
.meta-value {
  font-size:14px; color:var(--fg-70); line-height:1.5;
}

/* ── Stats row ──────────────────────────────*/
.project-stats {
  background:var(--fg-07);
  border-bottom:1px solid var(--fg-15);
}
.project-stats-inner {
  max-width:1200px; margin:0 auto;
  padding:clamp(28px,4vh,40px) var(--pad);
  display:flex; gap:0;
}
.stat-item {
  flex:1; padding:0 28px;
  border-left:1px solid var(--fg-15);
}
.stat-item:first-child { border-left:none; padding-left:0; }
.stat-num {
  font-family:var(--serif);
  font-size:clamp(32px,4vw,52px);
  font-weight:400; line-height:1; color:var(--accent);
}
.stat-label {
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-40); margin-top:6px;
}

/* ── Content body ─────────────────────────── */
.project-body {
  max-width:1200px; margin:0 auto;
  padding:clamp(64px,8vh,112px) var(--pad);
}

/* Sections */
.section-block {
  margin-bottom:clamp(72px,10vh,120px);
}

.section-tag {
  font-size:9px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px;
}

.section-heading {
  font-family:var(--serif);
  font-size:clamp(26px,3.5vw,42px);
  font-weight:400; margin-bottom:clamp(20px,3vh,32px);
  max-width:var(--content);
}

.section-text {
  font-size:clamp(15px,1.35vw,17px);
  color:var(--fg-70); line-height:1.85;
  max-width:var(--content);
  margin-bottom:20px;
}

.section-text strong {
  color:var(--accent); font-weight:400;
}

/* Pull quote */
.pull-quote {
  border-left:2px solid var(--accent);
  padding:18px 0 18px 28px;
  margin:36px 0;
  max-width:var(--content);
}
.pull-quote p {
  font-family:var(--serif);
  font-size:clamp(17px,2vw,22px);
  font-style:italic;
  color:var(--fg-70);
  line-height:1.5;
}
.pull-quote cite {
  display:block; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--fg-40); margin-top:12px;
}

/* Images */
.img-full {
  width:100%; margin:clamp(28px,4vh,48px) 0;
  overflow:hidden;
}
.img-full img {
  width:100%; height:auto;
  transition:transform .6s ease;
}
.img-full:hover img { transform:scale(1.015); }

.img-caption {
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-40); margin-top:10px;
}

.img-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:clamp(28px,4vh,48px) 0;
}
.img-row-3 { grid-template-columns:1fr 1fr 1fr; }

/* Process stepper */
.process-steps {
  display:flex; gap:0;
  margin:clamp(28px,4vh,48px) 0;
  border:1px solid var(--fg-15);
}
.process-step {
  flex:1; padding:20px 18px;
  border-left:1px solid var(--fg-15);
  text-align:center;
}
.process-step:first-child { border-left:none; }
.process-step-num {
  font-family:var(--serif);
  font-size:22px; color:var(--fg-15);
  display:block; margin-bottom:8px;
}
.process-step-label {
  font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--fg-40);
}
.process-step.active .process-step-num { color:var(--accent); }
.process-step.active .process-step-label { color:var(--fg); }

/* Findings grid */
.findings-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:1px; background:var(--fg-15);
  margin:clamp(28px,4vh,48px) 0;
}
.finding {
  background:var(--bg);
  padding:28px 24px;
}
.finding-num {
  font-family:var(--serif); font-size:28px;
  color:var(--accent); display:block; margin-bottom:12px;
}
.finding-text {
  font-size:13px; color:var(--fg-70); line-height:1.65;
}

/* Impact box */
.impact-box {
  border:1px solid var(--fg-15);
  padding:clamp(28px,4vh,44px);
  margin:clamp(28px,4vh,48px) 0;
  max-width:var(--content);
}
.impact-box h3 {
  font-family:var(--serif); font-size:clamp(18px,2vw,24px);
  font-weight:400; margin-bottom:20px; color:var(--accent);
}
.impact-box ul { padding-left:0; }
.impact-box li {
  font-size:clamp(14px,1.3vw,16px); color:var(--fg-70);
  line-height:1.7; padding:8px 0;
  border-bottom:1px solid var(--fg-07);
  padding-left:16px; position:relative;
}
.impact-box li::before {
  content:'—'; position:absolute; left:0; color:var(--accent);
}

/* ── Next project ─────────────────────────── */
.next-project {
  border-top:1px solid var(--fg-15);
  text-align:center;
}
.next-project a {
  display:block;
  padding:clamp(48px,8vh,80px) var(--pad);
  transition:background .35s;
}
.next-project a:hover { background:var(--fg-07); }
.next-label {
  font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--fg-40); margin-bottom:16px;
}
.next-title {
  font-family:var(--serif);
  font-size:clamp(22px,4vw,52px);
  font-weight:400; color:var(--fg);
  transition:color .3s;
}
.next-project a:hover .next-title { color:var(--accent); }

/* ── Footer ───────────────────────────────── */
.project-footer {
  border-top:1px solid var(--fg-15);
  padding:clamp(28px,4vh,44px) var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.footer-name {
  font-family:var(--serif); font-size:15px; color:var(--fg-40);
}
.footer-copy { font-size:10px; letter-spacing:.1em; color:var(--fg-15); }

/* ── Scroll fade-in ───────────────────────── */
/* Injected by JS same as index */

/* ── Responsive ───────────────────────────── */
@media (max-width:900px) {
  .project-meta-inner { grid-template-columns:1fr 1fr; }
  .findings-grid { grid-template-columns:1fr 1fr; }
  .img-row-3 { grid-template-columns:1fr 1fr; }
}

@media (max-width:640px) {
  .process-steps { flex-wrap:wrap; }
  .process-step { min-width:50%; border-top:1px solid var(--fg-15); }
  .project-meta-inner { grid-template-columns:1fr 1fr; }
  .findings-grid { grid-template-columns:1fr; }
  .img-row, .img-row-3 { grid-template-columns:1fr; }
  .project-stats-inner { flex-wrap:wrap; }
  .stat-item { min-width:50%; margin-bottom:24px; }
  .project-footer { flex-direction:column; align-items:flex-start; }
}