:root{
  /* ---- FAR-inspired palette: ink / charcoal / taupe / cream ---- */
  --ink:#0F1115;
  --charcoal:#22262B;
  --charcoal-soft:#1A1D21;
  --slate:#6D7178;
  --taupe:#B8B2A6;
  --taupe-dim: rgba(184,178,166,0.55);
  --rust:#9a5a38;
  --rust-dim: rgba(154,90,56,0.55);
  --cream:#EDEAE4;
  --cream-panel:#E3DED2;
  --paper:#FFFFEF;

  --bg-dark: var(--ink);
  --bg-panel: var(--charcoal-soft);
  --bg-light: var(--cream);
  --text-on-dark: var(--paper);
  --text-on-dark-dim: rgba(255,255,239,0.62);
  --text-on-dark-faint: rgba(255,255,239,0.36);
  --text-on-light: var(--ink);
  --gold: var(--taupe);
  --gold-dim: var(--taupe-dim);
  --line: rgba(255,255,239,0.14);
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'IBM Plex Sans', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}

/* ===== SECTION THEME VARIANTS ==========================================
   Sections opt into a tone by adding one class; every rule below already
   reads colors through these same custom properties, so the whole section
   (backgrounds, text, accent, hairlines) retones itself automatically. */
.theme-light{
  --bg-dark: var(--cream);
  --bg-panel: var(--cream-panel);
  --text-on-dark: var(--ink);
  --text-on-dark-dim: rgba(15,17,21,0.68);
  --text-on-dark-faint: rgba(15,17,21,0.42);
  --gold: var(--rust);
  --gold-dim: var(--rust-dim);
  --line: rgba(15,17,21,0.14);
}
.theme-panel{
  --bg-dark: var(--charcoal);
  --bg-panel: var(--charcoal);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{background:var(--bg-dark);}
body{
  background:var(--bg-dark);
  color:var(--text-on-dark);
  font-family:var(--font-body);
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
em{font-style:italic;}

.section-label{
  display:inline-block; font-family:var(--font-mono); font-size:0.7rem;
  letter-spacing:0.18em; text-transform:uppercase; color:var(--gold);
  margin-bottom:1.2rem;
}

/* film grain */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:999; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== SCROLL PROGRESS ===== */
#scrollProgress{
  position:fixed; top:0; left:0; width:100%; height:3px; z-index:1001;
  background:rgba(255,255,239,0.08); pointer-events:none;
}
#scrollProgressFill{
  height:100%; width:0%; transform-origin:left center;
  background:linear-gradient(90deg, var(--taupe), var(--rust));
}

/* ===== CUSTOM CURSOR ===== */
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; border-radius:50%; pointer-events:none;
  z-index:2000; transform:translate(-50%,-50%); mix-blend-mode:difference;
}
.cursor-dot{ width:6px; height:6px; background:var(--paper); }
.cursor-ring{
  width:34px; height:34px; border:1px solid var(--paper); opacity:0.75;
  transition:width .28s ease, height .28s ease, opacity .28s ease, background .28s ease;
}
.cursor-ring.is-active{ width:60px; height:60px; background:rgba(255,255,239,0.1); opacity:1; }
@media (hover:none), (pointer:coarse){
  .cursor-dot, .cursor-ring{ display:none; }
}
body.has-custom-cursor, body.has-custom-cursor a, body.has-custom-cursor button{ cursor:none; }

/* ===== SECTION SEAMS — gradual color bleed instead of a hard cut ===========
   Each section fades its own tail into the next section's tone (via --seam-to,
   set inline per element) so the boundary line disappears; entry-fade uses
   ::before the same way where a section follows non-solid content (the canvas). */
/* NOTE: both gradient stops share the same RGB (only alpha differs) — fading
   through the generic `transparent` keyword instead would interpolate its
   implicit black toward the target color and print a muddy grey seam. */
.seam-fade-out::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:7.5rem;
  background:linear-gradient(to bottom, var(--seam-from), var(--seam-to));
  z-index:-1; pointer-events:none;
}
.seam-fade-in::before{
  content:''; position:absolute; left:0; right:0; top:-1px; height:6.5rem;
  background:linear-gradient(to bottom, var(--seam-in-from), var(--seam-in-to));
  z-index:-1; pointer-events:none;
}
@media (max-width:768px){
  .seam-fade-out::after{ height:4.5rem; }
  .seam-fade-in::before{ height:3.5rem; }
}

/* ===== AMBIENT GRADIENT ORBS (decorative, sit behind section content) ===== */
.ambient-orb{
  position:absolute; z-index:-1; border-radius:50%; filter:blur(70px);
  opacity:0.4; pointer-events:none; will-change:transform;
}
.ambient-orb--taupe{ background:radial-gradient(circle, var(--taupe), transparent 72%); }
.ambient-orb--rust{ background:radial-gradient(circle, var(--rust), transparent 72%); }
.ambient-orb--a{ width:26rem; height:26rem; top:-8rem; right:-6rem; animation:driftA 16s ease-in-out infinite; }
.ambient-orb--b{ width:20rem; height:20rem; bottom:-6rem; left:-5rem; animation:driftB 13s ease-in-out infinite; }
@keyframes driftA{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-24px,26px); } }
@keyframes driftB{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(20px,-22px); } }
@media (max-width:768px){ .ambient-orb{ display:none; } }

/* ===== LOADER ===== */
#loader{
  position:fixed; inset:0; z-index:1000; background:var(--bg-dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem;
  transition:opacity .8s ease, visibility .8s ease;
}
#loader.done{opacity:0; visibility:hidden;}
.loader-brand{font-family:var(--font-display); font-size:1.1rem; letter-spacing:0.4em; color:var(--gold);}
.loader-brand img{ height:3.4rem; width:auto; display:block; }
#loader-bar{width:200px; height:1px; background:var(--line); overflow:hidden;}
#loader-fill{width:0%; height:100%; background:var(--gold); transition:width .2s ease;}
#loader-percent{font-family:var(--font-mono); font-size:0.7rem; color:var(--text-on-dark-faint); letter-spacing:0.1em;}

/* ===== HEADER ===== */
.site-header{
  position:fixed; top:1.1rem; left:50%; transform:translateX(-50%); z-index:100;
  width:min(1200px, 90vw);
  display:flex; align-items:center; justify-content:space-between;
  padding:0.9rem 1.6rem; border-radius:999px;
  background:rgba(15,17,21,0.42);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,239,0.1);
  transition:background .5s ease, border-color .5s ease;
}
.logo{
  display:flex; align-items:center; gap:0.55rem;
  font-family:var(--font-display); font-size:1rem; text-decoration:none;
  color:var(--paper); transition:color .5s ease;
}
.logo-mark{ height:1.7rem; width:auto; display:block; }
.site-header nav{ display:flex; gap:2.4rem; }
.site-header nav a{
  text-decoration:none; color:var(--paper); font-size:0.72rem;
  letter-spacing:0.14em; text-transform:uppercase; opacity:0.75;
  transition:opacity .3s ease, color .5s ease;
}
.site-header nav a:hover{ opacity:1; }
.site-header.on-light{ background:rgba(237,234,228,0.6); border-color:rgba(15,17,21,0.12); }
.site-header.on-light .logo,
.site-header.on-light nav a{ color:var(--ink); }

.menu-toggle{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:2.2rem; height:2.2rem; border:none; background:none; cursor:pointer; padding:0;
}
.menu-toggle span{
  display:block; width:1.3rem; height:1px; background:var(--paper);
  transition:transform .3s ease, opacity .3s ease, background .5s ease;
}
.site-header.on-light .menu-toggle span{ background:var(--ink); }
.site-header.nav-open .menu-toggle span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.site-header.nav-open .menu-toggle span:nth-child(2){ opacity:0; }
.site-header.nav-open .menu-toggle span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ===== HERO STANDALONE ===== */
.hero-standalone{
  position:relative; height:100vh; width:100%; z-index:20; background:var(--bg-dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding:0 6vw;
}
.hero-portrait{
  position:absolute; top:0; bottom:0; left:2vw;
  width:min(42vw, 620px); z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, black 0%, black 80%, transparent 100%),
                     linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, black 0%, black 80%, transparent 100%),
             linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
  mask-composite:intersect;
}
.hero-portrait img{
  width:100%; height:100%; object-fit:cover; object-position:50% 30%; display:block;
  filter:grayscale(1) contrast(1.2) brightness(0.82);
  opacity:0.92; mix-blend-mode:luminosity;
}
.hero-villa{
  position:absolute; top:0; bottom:0; right:2vw;
  width:min(42vw, 620px); z-index:-1; pointer-events:none;
  -webkit-mask-image:linear-gradient(to left, black 0%, black 80%, transparent 100%),
                     linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to left, black 0%, black 80%, transparent 100%),
             linear-gradient(to bottom, black 0%, black 90%, transparent 100%);
  mask-composite:intersect;
}
.hero-villa img{
  width:100%; height:100%; object-fit:cover; object-position:50% 45%; display:block;
  filter:grayscale(1) contrast(1.2) brightness(0.82);
  opacity:0.92; mix-blend-mode:luminosity;
}
@media (max-width:900px){ .hero-villa{ display:none; } }
.hero-heading{
  font-family:var(--font-display); font-weight:400; color:var(--text-on-dark);
  font-size:clamp(3.4rem, 13vw, 11rem); line-height:0.92; letter-spacing:0.01em;
  position:relative;
}
.hero-heading .word{ display:block; overflow:hidden; }
.hero-heading .word-inner{ display:block; transform:translateY(100%); }
.hero-tagline{
  margin-top:2rem; max-width:34rem; font-size:1.05rem; line-height:1.75;
  color:var(--text-on-dark-dim); font-weight:300;
}
.scroll-indicator{
  position:absolute; bottom:1.3rem; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.7rem;
  color:var(--text-on-dark-faint); font-family:var(--font-mono); font-size:0.65rem;
  letter-spacing:0.2em; text-transform:uppercase;
}
.scroll-indicator svg{ color:var(--gold); animation:bob 1.8s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }
.skip-btn{
  margin-top:0.3rem; padding:0.4rem 0.95rem; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--text-on-dark-faint);
  font-family:var(--font-mono); font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase;
  cursor:pointer; transition:border-color .3s ease, color .3s ease, background .3s ease;
}
.skip-btn:hover{ border-color:var(--gold-dim); color:var(--gold); background:rgba(201,167,104,0.06); }

/* ===== CROSSFADE STUDY (day/night scroll reveal) ===== */
.crossfade-section{
  position:relative; z-index:30; background:var(--bg-dark);
  padding:7rem 6vw; display:flex; flex-direction:column; align-items:center;
}
.crossfade-head{ max-width:36rem; text-align:center; margin-bottom:3rem; }
.crossfade-media{
  position:relative; width:100%; max-width:1100px; height:min(60vh, 640px); min-height:320px;
  border-radius:2px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 30px 70px -25px rgba(0,0,0,0.65);
}
.crossfade-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.crossfade-night{ z-index:0; }
.crossfade-day{ z-index:1; clip-path:inset(0 50% 0 0); will-change:clip-path; }
.crossfade-divider{
  position:absolute; top:0; bottom:0; left:50%; width:2.8rem; margin-left:-1.4rem; z-index:2;
  cursor:grab; touch-action:none;
}
.crossfade-divider.is-dragging{ cursor:grabbing; }
.crossfade-divider::after{
  content:''; position:absolute; top:0; bottom:0; left:50%; width:2px; transform:translateX(-50%);
  background:var(--paper); opacity:0.85; box-shadow:0 0 12px rgba(255,255,239,0.5);
}
.crossfade-divider::before{
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:2.6rem; height:2.6rem; border-radius:50%; border:1px solid var(--paper);
  background:rgba(15,17,21,0.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.crossfade-divider.is-dragging::before{ background:rgba(15,17,21,0.75); }
.crossfade-toggle{
  position:absolute; z-index:3; bottom:1.2rem; right:1.2rem; cursor:pointer;
  font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase;
  padding:0.5rem 1.2rem; border-radius:999px; border:1px solid var(--gold-dim);
  color:var(--gold); background:rgba(15,17,21,0.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .3s ease, color .3s ease;
}
.crossfade-toggle:hover{ background:var(--gold); color:var(--bg-dark); }
.crossfade-hint{
  position:absolute; z-index:3; top:1.2rem; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--text-on-dark-faint); pointer-events:none; transition:opacity .4s ease;
}
.crossfade-media:hover .crossfade-hint{ opacity:0; }
.crossfade-caption{
  margin-top:2rem; max-width:34rem; text-align:center; font-size:1rem; line-height:1.8;
  color:var(--text-on-dark-dim); font-weight:300;
}
@media (max-width:768px){
  .crossfade-media{ height:48vh; min-height:260px; }
}

/* ===== FIXED CANVAS ===== */
.canvas-wrap{
  position:fixed; inset:0; z-index:5;
  clip-path:circle(0% at 50% 50%);
  background:var(--bg-dark);
}
#canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block;
  filter:saturate(0.9) contrast(1.06) brightness(0.86);
}
.video-vignette{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(15,17,21,0) 40%, rgba(15,17,21,0.65) 100%);
}

/* ===== SCROLL CONTAINER — pure video-scrub zone, no text overlaid ===== */
#scroll-container{ position:relative; height:500vh; z-index:10; }

/* ===== STORY SECTIONS (normal flow, begin once the video scrub ends) ===== */
.story-section{
  position:relative; z-index:30; background:var(--bg-dark);
  display:flex; align-items:center; min-height:60vh;
  padding:5rem 6vw;
}
.align-left{ justify-content:flex-start; padding-left:8vw; padding-right:8vw; }
.align-right{ justify-content:flex-end; padding-left:8vw; padding-right:8vw; }
.align-left .section-inner, .align-right .section-inner{ max-width:36rem; }

/* split layout: portrait / presenting photos alongside text —
   sized close to the source photos' native resolution so nothing upscales/blurs */
.story-split{
  position:relative; z-index:30; display:flex; align-items:center; flex-wrap:wrap;
  gap:5vw; background:var(--bg-dark); padding:7rem 7vw;
}
.story-split.reverse{ flex-direction:row-reverse; }
.split-media{
  flex:1 1 320px; max-width:28rem; aspect-ratio:3/2; position:relative; overflow:hidden;
  border-radius:2px; border:1px solid var(--line);
  box-shadow:0 30px 70px -25px rgba(0,0,0,0.65);
}
.split-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  user-select:none; -webkit-user-drag:none;
}
.split-media.tone-portrait img{ filter:saturate(0.95) contrast(1.08) brightness(0.97); }
.split-media--tall{ aspect-ratio:4/5; max-width:26rem; }
@media (min-width:769px){ .split-media--tall{ max-width:30rem; } }
.split-media.tone-warm img{ filter:grayscale(0.4) sepia(0.22) saturate(1.15) contrast(1.12) brightness(0.68); }
.split-text{ flex:1 1 320px; display:flex; align-items:center; }
.split-text .section-inner{ max-width:26rem; }

.section-heading{
  font-family:var(--font-display); font-weight:400; color:var(--text-on-dark);
  font-size:clamp(2.1rem, 4.2vw, 3.6rem); line-height:1.05;
}
.section-heading--project{ font-size:clamp(3rem, 7vw, 6rem); color:var(--gold); }
.section-body{
  margin-top:1.4rem; font-size:1rem; line-height:1.8; color:var(--text-on-dark-dim); font-weight:300;
}
.section-note{
  margin-top:1.2rem; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.08em;
  color:var(--text-on-dark-faint); text-transform:uppercase;
}

/* skill proficiency list (Software section) */
.skill-list{
  list-style:none; margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:0.95rem;
}
.skill-row{ display:flex; align-items:center; gap:0.9rem; }
.skill-dot{ width:5px; height:5px; border-radius:50%; background:var(--gold); flex:0 0 auto; }
.skill-name{
  flex:1 1 auto; font-family:var(--font-mono); font-size:0.76rem; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--text-on-dark);
}
.skill-pips{ display:flex; gap:0.32rem; flex:0 0 auto; }
.pip{ width:0.8rem; height:0.8rem; border-radius:2px; border:1px solid var(--gold-dim); display:block; }
.pip.is-on{ background:var(--gold); border-color:var(--gold); }
@media (max-width:520px){
  .skill-name{ font-size:0.68rem; }
  .pip{ width:0.68rem; height:0.68rem; }
}

/* inline marquee between project + stats */
.marquee-inline{
  position:relative; z-index:30; overflow:hidden; padding:1rem 0 2rem; background:var(--bg-dark);
}
.marquee-text{
  font-family:var(--font-display); font-weight:300; font-style:italic;
  font-size:8vw; white-space:nowrap; color:var(--gold); opacity:0.5; letter-spacing:0.01em;
  display:inline-block; will-change:transform;
}

/* stats */
.story-stats{ justify-content:center; background:var(--bg-panel); }
.stats-grid{
  width:100%; display:flex; justify-content:center; gap:5vw; flex-wrap:wrap; text-align:center;
}
.stat{ display:flex; flex-direction:column; align-items:center; }
.stat-number{
  font-family:var(--font-display); font-size:clamp(3.4rem, 8vw, 6rem); color:var(--gold); line-height:1;
}
.stat-number-row{ display:flex; align-items:baseline; justify-content:center; }
.stat-suffix{ font-family:var(--font-display); font-size:1.6rem; color:var(--gold); margin-left:0.2rem; }
.stat-label{
  margin-top:1rem; font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-on-dark-dim);
}

/* cta */
.cta-logo{ margin:0 auto 1.8rem; }
.cta-logo img{ height:3.4rem; width:auto; display:block; margin:0 auto; }
.story-cta{ justify-content:center; text-align:center; }
.story-cta .section-inner{ max-width:none; }
.cta-heading{
  font-family:var(--font-display); font-weight:400; color:var(--text-on-dark);
  font-size:clamp(2.6rem, 7vw, 5.5rem); line-height:1.04;
}
.cta-links{ margin-top:2.4rem; display:flex; gap:2.4rem; justify-content:center; flex-wrap:wrap; }
.cta-links a{
  text-decoration:none; font-size:1.05rem; color:var(--text-on-dark);
  border-bottom:1px solid var(--gold-dim); padding-bottom:2px; transition:opacity .3s ease;
}
.cta-links a:hover{ opacity:0.7; }

.social-links{ margin-top:2rem; display:flex; gap:1rem; justify-content:center; }
.social-links a{
  width:2.7rem; height:2.7rem; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-on-dark-dim); transition:border-color .3s ease, color .3s ease, transform .3s ease;
}
.social-links svg{ width:1.15rem; height:1.15rem; }
.social-links a:hover{ border-color:var(--gold-dim); color:var(--gold); transform:translateY(-2px); }

/* ===== PROJECTS SHOWCASE (normal flow, solid, covers video) ===== */
.gallery-section{
  position:relative; z-index:30; background:var(--bg-dark);
  padding:9rem 6vw 8rem; border-top:1px solid var(--line);
}
.gallery-head{ max-width:44rem; }
.gallery-head .section-heading{ font-size:clamp(2.4rem, 5vw, 4rem); }
.gallery-lead{
  margin-top:1.2rem; font-size:1rem; line-height:1.75; color:var(--text-on-dark-dim); font-weight:300;
}

.filter-tabs{ margin-top:2.6rem; display:flex; gap:0.6rem; flex-wrap:wrap; }
.filter-tab{
  padding:0.55rem 1.15rem; border-radius:999px; border:1px solid var(--line);
  background:transparent; color:var(--text-on-dark-dim); font-family:var(--font-mono);
  font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer;
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.filter-tab:hover{ border-color:var(--gold-dim); color:var(--gold); }
.filter-tab.is-active{ background:var(--gold); border-color:var(--gold); color:var(--bg-dark); }

.plist{ margin-top:3rem; border-top:1px solid var(--line); }
.p-row{
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  height:5.6rem; padding:0 0.4rem 0 0.2rem; border-bottom:1px solid var(--line);
  cursor:pointer; transition:padding-left .4s ease, background-color .4s ease;
}
.p-row.is-hidden{ display:none; }
.p-row:hover{ padding-left:1.4rem; background:rgba(255,255,239,0.03); }
.p-name{
  position:relative; z-index:1;
  font-family:var(--font-display); font-size:clamp(1.3rem, 2.6vw, 1.9rem); color:var(--text-on-dark);
  transition:color .4s ease;
}
.p-row:hover .p-name{ color:var(--gold); }
.p-view-btn{
  position:relative; z-index:1; flex:0 0 auto; padding:0.5rem 1.1rem; border-radius:999px;
  border:1px solid var(--gold-dim); background:transparent; color:var(--gold);
  font-family:var(--font-mono); font-size:0.66rem;
  letter-spacing:0.14em; text-transform:uppercase; cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.p-view-btn:hover{ background:var(--gold); color:var(--bg-dark); }

/* in-bar reveal: image sits inside the bar itself, right-side only, diagonal-cut edge */
.p-row-media{
  position:absolute; top:0; right:0; bottom:0; width:74%; z-index:0;
  clip-path:polygon(18% 0%, 100% 0%, 100% 100%, 0% 100%);
  opacity:0; transform:translateX(14px);
  transition:opacity .45s ease, transform .45s ease;
  pointer-events:none;
}
.p-row:hover .p-row-media{ opacity:0.4; transform:translateX(0); }
.p-row-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(0.55) contrast(1.15) brightness(0.7);
}
.p-row-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to left, transparent 55%, var(--bg-dark) 100%);
}
@media (max-width:900px){ .p-row-media{ display:none; } }

/* ===== PROJECT DETAIL MODAL ===== */
.project-modal{
  position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center;
  padding:4vh 4vw; opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
}
.project-modal.is-open{ opacity:1; visibility:visible; }
.project-modal-backdrop{ position:absolute; inset:0; background:rgba(15,17,21,0.86); }
.project-modal-panel{
  position:relative; z-index:1; width:min(1000px, 100%); max-height:92vh; overflow:auto;
  display:flex; flex-wrap:wrap; background:var(--bg-panel); border:1px solid var(--line);
  transform:translateY(24px); transition:transform .35s ease;
}
.project-modal.is-open .project-modal-panel{ transform:translateY(0); }
.project-modal-media{ flex:1 1 380px; min-width:0; min-height:260px; background:var(--bg-dark); }
.project-modal-media img{ width:100%; height:100%; object-fit:cover; display:block; min-height:260px; max-height:92vh; }
.project-modal-info{ flex:1 1 320px; min-width:0; padding:3rem 2.6rem; display:flex; flex-direction:column; }
.project-modal-info h3{
  font-family:var(--font-display); font-weight:400; font-size:clamp(1.7rem,3vw,2.4rem);
  color:var(--text-on-dark); margin-top:0.6rem;
}
.project-modal-info p{ margin-top:1.2rem; font-size:0.95rem; line-height:1.75; color:var(--text-on-dark-dim); }
.modal-specs{ list-style:none; margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.modal-specs li{
  display:flex; justify-content:space-between; gap:1rem; padding:0.55rem 0;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.04em;
  color:var(--text-on-dark-dim); border-bottom:1px solid var(--line);
}
.modal-specs li span:first-child{ color:var(--text-on-dark-faint); text-transform:uppercase; letter-spacing:0.1em; }
.modal-specs li span:last-child{ color:var(--text-on-dark); text-align:right; }
.project-modal-close{
  position:absolute; top:1.2rem; right:1.2rem; z-index:2; width:2.4rem; height:2.4rem;
  border-radius:50%; border:1px solid var(--line); background:rgba(15,17,21,0.5); color:var(--text-on-dark);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .3s ease, color .3s ease;
}
.project-modal-close:hover{ border-color:var(--gold-dim); color:var(--gold); }

/* ===== 360° PANORAMA PREVIEW + MODAL ===== */
.pano-preview{ cursor:pointer; }
.pano-preview img{ transition:transform .5s ease, filter .5s ease; filter:saturate(0.92) contrast(1.05) brightness(0.94); }
.pano-preview:hover img{ transform:scale(1.04); }
.pano-badge{
  position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:0.6rem;
  padding:1.2rem 1.6rem; border-radius:999px; border:1px solid var(--gold-dim);
  background:rgba(15,17,21,0.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  color:var(--gold); text-align:center; transition:background .3s ease, transform .3s ease;
}
.pano-preview:hover .pano-badge{ background:rgba(15,17,21,0.75); transform:translate(-50%,-50%) scale(1.05); }
.pano-badge svg{ width:2rem; height:2rem; }
.pano-badge span{ font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; }

.pano-modal{
  position:fixed; inset:0; z-index:900; background:#000;
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s ease;
}
.pano-modal.is-open{ opacity:1; visibility:visible; }
.pano-viewer{ position:absolute; inset:0; z-index:1; }
.pano-modal-close{
  position:absolute; top:1.4rem; right:1.4rem; z-index:2; width:2.6rem; height:2.6rem;
  border-radius:50%; border:1px solid rgba(255,255,239,0.3); background:rgba(15,17,21,0.6); color:var(--paper);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:border-color .3s ease, color .3s ease;
}
.pano-modal-close:hover{ border-color:var(--gold-dim); color:var(--gold); }

/* ===== TIMELINE (normal flow) ===== */
.timeline-section{
  position:relative; z-index:30; background:var(--bg-panel);
  padding:9rem 6vw 8rem; border-top:1px solid var(--line);
}
.timeline-head{ max-width:44rem; margin:0 auto 6rem; text-align:center; }
.timeline-head .section-heading{ font-size:clamp(2.4rem, 5vw, 4rem); }
.timeline{ position:relative; max-width:44rem; margin:0 auto; padding-left:2.2rem; }
.timeline-line{ position:absolute; left:0; top:0.5rem; bottom:0.5rem; width:1px; background:var(--line); }
.timeline-line-fill{ position:absolute; top:0; left:0; width:100%; height:0%; background:var(--gold); }
.tl-item{ position:relative; padding-bottom:5.4rem; opacity:0; transform:translateY(40px); }
.tl-item:last-child{ padding-bottom:0; }
.tl-dot{ position:absolute; left:-2.5rem; top:0.4rem; width:9px; height:9px; border-radius:50%; background:var(--bg-panel); border:1px solid var(--gold); }
.tl-date{ font-family:var(--font-mono); font-size:0.7rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--gold); margin-bottom:0.8rem; }
.tl-body h3{ font-family:var(--font-display); font-weight:400; font-size:clamp(1.5rem,2.6vw,2.1rem); color:var(--text-on-dark); }
.tl-org{ margin-top:0.4rem; font-size:0.9rem; color:var(--text-on-dark-faint); }
.tl-desc{ margin-top:1rem; font-size:0.95rem; line-height:1.8; color:var(--text-on-dark-dim); font-weight:300; }

.edu-row{
  max-width:64rem; margin:7rem auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:3.5rem;
  padding-top:3.5rem; border-top:1px solid var(--line); opacity:0; transform:translateY(40px);
}
.edu-col h4{ font-family:var(--font-display); font-size:1.15rem; color:var(--text-on-dark); margin-top:0.6rem; }
.edu-col p{ font-size:0.85rem; color:var(--text-on-dark-dim); margin-top:0.6rem; line-height:1.6; }
.edu-col em{ color:var(--gold); font-style:normal; font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; }
.edu-col ul{ list-style:none; }
.edu-col li{ font-size:0.82rem; color:var(--text-on-dark-dim); line-height:1.7; padding:0.5rem 0; border-bottom:1px solid var(--line); }

/* ===== FOOTER ===== */
.contact-footer{
  position:relative; z-index:30; background:var(--bg-dark);
  padding:6rem 6vw 3rem; border-top:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:3rem; text-align:center;
}
.contact-foot-row{
  display:flex; gap:2.4rem; flex-wrap:wrap; justify-content:center;
  font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-on-dark-faint);
}
.site-credit{
  display:flex; align-items:center; justify-content:center; gap:0.6rem;
  padding-top:2rem; margin-top:-1.4rem; border-top:1px solid var(--line);
  opacity:0.7; transition:opacity .3s ease;
}
.site-credit:hover{ opacity:1; }
.site-credit-text{
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-on-dark-faint);
}
.site-credit-logo{ height:1.15rem; width:auto; display:block; }
.site-credit-robot{ height:1.7rem; width:auto; display:block; }

.reveal-up{ opacity:0; transform:translateY(40px); }

/* ===== RESPONSIVE ===== */
@media (max-width:768px){
  #scroll-container{ height:320vh; }
  .align-left, .align-right{ padding-left:7vw; padding-right:7vw; justify-content:center; text-align:center; }
  .align-left .section-inner, .align-right .section-inner{ max-width:100%; }
  .story-cta .section-inner{ background:none; padding:0; }
  .story-split, .story-split.reverse{ flex-direction:column; padding:4rem 7vw; }
  .split-media{ max-width:100%; }
  .split-text{ padding:0; text-align:center; justify-content:center; }
  .split-text .section-inner{ max-width:100%; }
  .site-header{ width:auto; padding:0.75rem 1.4rem; }
  .menu-toggle{ display:flex; }
  .site-header nav{
    position:absolute; top:calc(100% + 0.6rem); left:0; right:0;
    display:flex; flex-direction:column; align-items:center; gap:1.1rem;
    padding:1.6rem 1.4rem; border-radius:1.4rem;
    background:rgba(15,17,21,0.75); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,239,0.1);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .3s ease, visibility .3s ease, transform .3s ease;
  }
  .site-header.on-light nav{ background:rgba(237,234,228,0.85); border-color:rgba(15,17,21,0.12); }
  .site-header.nav-open nav{ opacity:1; visibility:visible; transform:translateY(0); }
  .site-header nav a{ font-size:0.85rem; opacity:0.85; }
  .stats-grid{ gap:3rem 8vw; }
  .edu-row{ grid-template-columns:1fr; gap:2.2rem; }
  .marquee-text{ font-size:12vw; }
  .hero-portrait{ top:14vh; bottom:30vh; width:min(70vw, 320px); }
  .p-row{ height:auto; min-height:4.6rem; padding:0.9rem 0.2rem; }
  .p-row:hover{ padding-left:0.2rem; }
  .project-modal{ padding:0; }
  .project-modal-panel{ width:100%; max-height:100vh; border:none; }
  .project-modal-info{ padding:2.2rem 1.4rem 2.6rem; }
}

@media (max-width:520px){
  .filter-tabs{ gap:0.4rem; }
  .filter-tab{ padding:0.45rem 0.9rem; font-size:0.62rem; }
  .p-name{ font-size:1.1rem; }
}