:root{
  --bg:#ffffff; --ink:#0f0f0f; --muted:#7b7b86; --hair:#eaeaea;
  --brand-orange:#ff914d; --brand-indigo:#3c86ff; --brand-magenta:#ff4fda; --brand-green:#bffb5a;
  --pill-grad: linear-gradient(90deg, #ff4fda 0%, #3c86ff 50%, #bffb5a 100%);
  --nav-h:72px; --ticker-h:36px; --logo-gap:22px;
  --container: 1200px;
  --bubble:#111; --bubble-ink:#fff;
}
*{box-sizing:border-box; cursor:url('../assets/cursor.png'), auto;}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  overflow-x:hidden;
  overflow-y:auto;
}
body.lock-scroll{ overflow:hidden; }

/* Fixed faux-nav background strip */
body::before{
  content:""; position:fixed; left:0; right:0; top:0; height:var(--nav-h);
  background:#fff; z-index:1; pointer-events:none;
}

/* NAV */
.nav{
  position:fixed; inset:0 0 auto 0; height:var(--nav-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding:0 16px; background:#fff; z-index:20;
}
.nav::after{
  content:''; position:absolute; bottom:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, #ff914d 0%, #ff4fda 33%, #3c86ff 66%, #bffb5a 100%);
  pointer-events:none;
}
.brand-mini{ display:flex; align-items:center; gap:6px; justify-self:start }
.brand-mini img{ height:52px; display:block }
.nav-center{ display:flex; gap:40px; justify-self:center; align-items:center; font-weight:400; letter-spacing:.1px }
.nav-center a{ color:#111; text-decoration:none; padding:10px 6px; border-radius:8px }
.nav-center a:hover{ opacity:.6;}
.nav-right{ justify-self:end; display:flex; align-items:center; gap:16px; }
.nav-resume{
  color:#111; text-decoration:none; font-size:16px; font-weight:400; letter-spacing:.1px;
}
.nav-resume:hover{ opacity:.6; }
.nav-linkedin{
  color:#111; text-decoration:none;
  display:flex; align-items:center; justify-content:center;
  width:31px; height:31px;
}
.nav-linkedin:hover{ opacity:.6; }

/* Kept for other pages that use .pill */
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 14px; color:#fff; border-radius:999px;
  background:var(--pill-grad); text-decoration:none; font-weight:700;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}

/* ===== TICKER ===== */
.ticker-wrap{
  position:fixed; top:var(--nav-h); left:0; right:0;
  height:var(--ticker-h);
  background:#b5ff4d;
  overflow:hidden;
  z-index:19;
  display:flex; align-items:center;
}
.ticker-track{
  display:flex; align-items:center;
  width:max-content;
  animation: ticker-scroll 40s linear infinite;
}
.ticker-track span{
  font-size:clamp(13px, 1.1vw, 18px);
  color:#000;
  white-space:nowrap;
  padding:0 36px;
  font-weight: 200;
}

.ticker-track span:first-child::before{ content:''; }
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* ===== HERO ===== */
.hero{
  position:fixed; inset:0; z-index:6; pointer-events:none;
  display:flex; align-items:flex-start; justify-content:center;
  padding-top:calc(var(--nav-h) + var(--ticker-h) + 25vh);
  padding-left:20px; padding-right:20px;
  text-align:center;
  opacity:0; transform:translateY(0);
  transition:opacity 700ms ease, transform 600ms ease;
}
.started .hero{ opacity:1 }
.show-work .hero{ transform:translateY(-110%); opacity:0; }

.hero-headline{
  margin:0;
  font-family:"Inter Tight", sans-serif;
  font-weight:400;
  font-size:clamp(24px, 3.7vw, 64px);
  line-height:1.0;
  color:#000;
}

.hero-name-wrap{
  position:relative;
  display:inline-block;
  pointer-events:none;
}
.started .hero-name-wrap{ pointer-events:auto; }

.hero-name-link{
  color:inherit;
  text-decoration:none;
  transition:color .15s ease;
}
.hero-name-wrap:hover .hero-name-link{
  color:#1194ff;
  text-decoration:underline;
  text-decoration-skip-ink:none;
}

.hero-headshot-wrap{
  position:absolute;
  bottom:calc(100% + 12px);
  left:50%;
  width:clamp(80px, 8vw, 115px);
  height:clamp(80px, 8vw, 115px);
  border-radius:50%;
  overflow:hidden;
  transform:translateX(-50%) scale(0);
  transform-origin:center bottom;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;
  z-index:9;
}
.hero-name-wrap:hover .hero-headshot-wrap{
  transform:translateX(-50%) scale(1);
}
.hero-headshot-wrap img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Canvas lives above main near hero */
#scene{
  position:fixed; inset:0;
  z-index:4;
  touch-action: pan-y;
  pointer-events: auto;
  background: transparent !important;
  transition: opacity .25s ease;
}

body.show-work main{ position:relative; z-index:10; }
body.show-work #scene{
  opacity:1; pointer-events:none; z-index:1; visibility:visible;
}
body.prestart #scene{ pointer-events:none; }

#startBtn{
  position:fixed; left:50%; top:46%; translate:-50% -50%;
  width:min(78vmin,1000px); height:min(30vmin,300px);
  background:transparent; border:0; z-index:7; cursor:pointer;
}

main{
  position:relative;
  z-index:3;
  background:transparent;
  padding-top:var(--nav-h);
  padding-bottom:30vh;
}
.spacer{ height:100vh; }

/* ===== Sections ===== */
section.section{
  padding:40px 20px 100px; max-width:var(--container); margin:0 auto;
  position:sticky; top:calc(var(--nav-h) + var(--ticker-h));
  z-index:11;
  background:transparent;
}
.section h2{ margin:0 0 12px; font-size:clamp(44px,6.4vw,68px); font-family:"freightdispcmp-pro", serif; font-weight:700; font-style:italic }
.work-heading{
  font-family:"Inter Tight", sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:clamp(28px, 3.3vw, 48px);
  line-height:1.1;
  margin:0 0 24px;
  color:#000;
}
.lead{ color:#5b5b5b; max-width:72ch; line-height:1.6; margin:0 0 22px }

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease }
.reveal.is-visible{ opacity:1; transform:translateY(0) }

/* ===== Project Cards (new stacked design) ===== */
.project-list{
  display:flex;
  flex-direction:column;
  gap:28px;
}

.project-card{
  display:block;
  text-decoration:none;
  color:inherit;
  border-radius:10px;
  overflow:hidden;
  transition:transform 220ms ease, box-shadow 220ms ease;
  position:relative; z-index:11;
}
.project-card:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 32px rgba(0,0,0,.10);
}
.project-card:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(60,134,255,.35);
}
.project-card.coming-soon{
  pointer-events:none;
  cursor:default;
}

.project-card-header{
  background:var(--brand-green);
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:80px;
}
.project-card-title{
  font-family:"Inter Tight", sans-serif;
  font-weight:400;
  font-style:normal;
  font-size:clamp(22px, 3.7vw, 64px);
  line-height:1.0;
  color:#000;
  margin:0;
  flex-shrink:0;
}
.project-card-meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.project-card-duration{
  background:#1194ff;
  color:#fff;
  padding:0 13px;
  height:36px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  font-size:clamp(12px, 1.1vw, 18px);
  font-weight:400;
  white-space:nowrap;
}
.project-card-tags{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.project-tag{
  background:#ff3ce2;
  color:#fff;
  padding:0 16px;
  height:36px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  font-size:clamp(12px, 1.1vw, 18px);
  font-weight:400;
  white-space:nowrap;
}

.project-card-body{
  background:#d9d9d9;
  position:relative;
  height:clamp(220px, 38vw, 640px);
  overflow:hidden;
}
.project-card-body video{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ===== Under Construction banner ===== */
.uc-banner{
  position:absolute; inset:0;
  background:#f2ff5e;
  overflow:hidden;
  display:flex; align-items:center;
}
.uc-track{
  display:flex; width:max-content;
  animation:ticker-scroll 20s linear infinite;
}
.uc-track span{
  flex-shrink:0;
  font-family:"Inter Tight", sans-serif;
  font-weight:400; font-size:14px; line-height:normal;
  color:#000;
  white-space:nowrap;
  padding:0 16px;
}

/* ===== Non-blocking bubbles ===== */
.bubble {
  position: fixed;
  z-index: 8;
  pointer-events: none;
  background: #4d49fc;
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  padding: 8px 14px;
  border-radius: 9px;
  font-weight: 500;
  font-size: 13px;
  line-height: 13px;
  box-shadow: 0 4px 16px rgba(73, 146, 239, 0.18);
  opacity: 0;
  transform: translate(-50%, calc(-100% - 14px)) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  white-space: nowrap;
}
.bubble.show{
  opacity:1;
  transform: translate(-50%, calc(-100% - 14px)) scale(1);
}

/* ===== ABOUT ===== */
.about{
  position: relative;
  z-index: 12;
}
.about h2{ font-weight:700; }
.about-text{
  max-width: 64ch;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 16px;
}
.about-actions{
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:18px;
  flex-wrap:wrap;
}
.ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--hair);
  text-decoration:none;
  color:#111;
  font-weight:700;
  background:#fff;
}
.ghost:hover{ background:#f7f7f7; }

/* ===== ABOUT LAYOUT ===== */
.about-grid{
  display: grid;
  gap: 32px;
  align-items: center;
}
@media (min-width: 860px){
  .about-grid{ grid-template-columns: 1.1fr .9fr; }
}
h2.about-title{
  margin:0 0 12px;
  font-family: "freightdispcmp-pro", serif;
  font-weight: 700;
  font-style: italic;
  font-size:clamp(44px, 9.5vw, 108px);
  line-height:1.02; letter-spacing:.01em;
  color: black;
}
.about-photo{
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 22px;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(255,145,77,.25), rgba(123,123,255,.25)),
    radial-gradient(800px 400px at 20% 0%, rgba(191,251,90,.25), transparent 60%);
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
}
.about-photo img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .ticker-track, .uc-track{ animation:none; }
  .hero-headshot-wrap{ transition:none; }
  .project-card, .project-card:hover{ transform:none !important; box-shadow:none !important; }
}

@media (hover:none) and (pointer:coarse){
  #cursorHint, #dragHint{ display:none !important; }
}