: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; --logo-gap:22px;
  --container: 1120px;
  --bubble:#111; --bubble-ink:#fff;
}
*{box-sizing:border-box; cursor:url('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:600; letter-spacing:.1px }
.nav-center a{ color:#111; text-decoration:none; padding:10px 6px; border-radius:8px }
.nav-center a:hover{ background:#f7f7f7 }
.nav-right{ justify-self:end }
.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);
}

/* 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) + 6vh);
  padding-left:20px;
  padding-right:20px;
  text-align:left;
  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-inner{
  width:min(1500px, 96vw);
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:clamp(24px, 4vw, 60px);
  align-items:start;
}
@media (max-width:860px){
  .hero-inner{ grid-template-columns:1fr; }
}
.hero-name{
  display:flex; flex-direction:column;
  font-family:"freightdispcmp-pro", serif;
  font-weight:700; font-style:italic;
  line-height:.72; letter-spacing:.01em;
  color:black;
  margin-left:-0.04em;
}
.name-first{
  font-size:clamp(80px, 18vw, 275px);
}
.name-last{
  font-size:clamp(80px, 18vw, 275px);
  margin-left:-0.06em;
}
.hero-right{
  padding-top:clamp(8px, 1.5vw, 20px);
}
.hero-sub{
  margin:0 0 0;
  font-size:clamp(24px, 4.2vw, 64px);
  line-height:.97;
  color:black;
  padding:10px 0;
}
.hero-currently{
  margin-top:28px;
}
.hero-currently .currently-label{
  font-size:clamp(16px, 1.6vw, 24px);
  font-weight:500;
  line-height:1.5;
  color:black;
  margin:0 0 4px;
}
.hero-currently p{
  margin:0;
  font-size:clamp(14px, 1.3vw, 20px);
  line-height:1.75;
  color:black;
}

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

/* When not at the very top, faint background, no hits, below content */
body.show-work main{ position:relative; z-index:10; }          /* raise content */
body.show-work #scene{
  opacity:1; pointer-events:none; z-index:1; visibility:visible;
}

body.prestart #scene{ pointer-events:none; }
.hero{ position:fixed; inset:0; z-index:6; 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:24px 20px 84px; max-width:var(--container); margin:0 auto;
  position:sticky; top:var(--nav-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 }
.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) }

/* ===== Cards grid (horizontal scroll) ===== */
.grid{
  display:flex;
  gap:22px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  margin-top:12px;
  padding-bottom:8px;
}
.grid .card{
  flex:0 0 min(520px, 85vw);
  scroll-snap-align:start;
}

.card{
  display:flex; flex-direction:column;
  border:0; border-radius:0; overflow:visible;
  background:transparent; min-height:0; height:100%;
  text-decoration:none; color:inherit;
  position:relative; z-index:11;
  transform-style:preserve-3d;
  transition: transform 220ms ease;
  will-change: transform;
}
/* gentle hover tilt */
.card:hover{
  transform: translateY(-2px);
}

/* Make anchor-cards behave like your current cards */
.grid .card.parallax{
  text-decoration:none; color:inherit;
  display:flex; flex-direction:column;
}

/* Nice focus ring for keyboard users */
.card:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(60,134,255,.35);
  transform: translateY(-2px);
}

.thumb{
  position:relative; aspect-ratio:16/9; overflow:hidden; background:#f7f7f7;
  border:1px solid var(--hair); border-radius:0;
  will-change: transform; transform: translateZ(0);
}

.meta{ padding:10px 0 6px }
.meta h3{ margin:0 0 6px; font-size:18px }
.meta p{ margin:0; color:#666; font-size:14px; line-height:1.5 }

body.prestart main{ pointer-events:none }

/* Parallax only affects the .thumb (not the card's height) */
.card.parallax .thumb{
  transform: translateY(var(--py, 0px));
  transition: transform 80ms linear;
}

/* Reduce motion: lock everything down */
@media (prefers-reduced-motion: reduce){
  .card, .card:hover{ transform:none !important; box-shadow:none !important; }
  .card.parallax .thumb{ transform:none !important; transition:none !important; }
}

/* ===== 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;               /* above canvas */
}

.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;
}

/* buttons row */
.about-actions{
  display:flex;
  gap:14px;
  margin-top:24px;
  flex-wrap:wrap;
}

/* secondary button */
.ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--hair);
  background:#fff;
  color:#111;
  text-decoration:none;
  font-weight:700;
}

.ghost:hover{
  background:#f7f7f7;
}

/* ABOUT */
.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{
  position: relative;
  z-index: 12;
}

/* two-column layout */
.about-grid{
  display: grid;
  gap: 32px;
  align-items: center;
}

@media (min-width: 860px){
  .about-grid{
    grid-template-columns: 1.1fr .9fr;
  }
}

/* HERO FONT TITLE */
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;
}

/* text */
.about-text{
  max-width: 62ch;
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.7;
  margin: 0 0 16px;
}

/* photo */
.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;
}

/* ===== Under Construction banner ===== */
.card.coming-soon{
  pointer-events:none;
  cursor:default;
}
.uc-banner{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  background:#f2ff5e;
  overflow:hidden;
  padding:3px 0;
}
.uc-track{
  display:flex; width:max-content;
}
.uc-track span{
  flex-shrink:0;
  font-family:"Inter Tight", sans-serif;
  font-weight:400; font-size:12px; line-height:normal;
  color:#000;
  white-space:nowrap;
  padding:0 12px;
}

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