/* ============================================================

   CUSTOM PROPERTIES

============================================================ */

:root {

  --bg:     #050505;

  --bg-s:   #090909;

  --bg-c:   #111111;

  --bg-h:   #171717;

  --text:   #f3f1e8;

  --sub:    #b9b1ab;

  --muted:  #7f716a;

  --faint:  #2b2b2b;

  --b1:     #1d1d1d;

  --b2:     #303030;

  --accent: #b96d60;

  --acc-fg: #140c0a;

  --radius-sm: 4px;

  --radius-md: 8px;

  --radius-lg: 12px;

  --nav-h:  60px;

}



/* ============================================================

   RESET

============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {

  font-family: 'Inter', system-ui, sans-serif;

  background: var(--bg);

  color: var(--text);

  line-height: 1.75;

  overflow-x: hidden;

  position: relative;

}

body.has-fancy-cursor,

body.has-fancy-cursor a,

body.has-fancy-cursor button,

body.has-fancy-cursor [data-cursor],

body.has-fancy-cursor .work-card,

body.has-fancy-cursor .lightbox,

body.has-fancy-cursor .lightbox * {

  cursor: none;

}

body.is-dragging,

body.is-dragging * {

  user-select: none !important;

  cursor: none !important;

}



a   { color: inherit; text-decoration: none; }

ul  { list-style: none; }



/* Hide native scrollbar */

::-webkit-scrollbar { display: none; }

html { scrollbar-width: none; -ms-overflow-style: none; }



/* Custom scroll track — line equalizer */

.scroll-track {

  position: fixed;

  right: 14px;

  top: 50%;

  transform: translateY(-50%);

  height: 380px;

  width: 24px;

  z-index: 9998;

  pointer-events: none;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  justify-content: center;

  gap: 3px;

}

.scroll-track__line {

  height: 2px;

  width: 8px;

  background: rgba(255,255,255,0.12);

  border-radius: 1px;

  transition: width 0.15s ease, background 0.15s ease;

}



h1, h2, h3, h4, h5 {

  font-family: 'Space Grotesk', sans-serif;

  font-weight: 700;

  line-height: 1.1;

}



/* ============================================================

   WIDTH WRAPPERS

============================================================ */

.container {

  max-width: 1100px;

  margin: 0 auto;

  padding: 0 2.5rem;

}

.wrap {

  max-width: 1100px;

  margin: 0 auto;

  padding-left: 2.5rem;

  padding-right: 2.5rem;

}

.section      { padding: 5rem 0; }

.section--alt { background: var(--bg-s); }



/* ============================================================

   SECTION HEADER

============================================================ */

.sec-head {

  display: flex;

  align-items: baseline;

  gap: 1.5rem;

  margin-bottom: 2.5rem;

  border-bottom: 2px solid var(--b2);

  padding-bottom: 1rem;

  will-change: transform, opacity;

  transition: none;

}

.sec-num {

  font-family: 'Space Mono', monospace;

  font-size: 0.6rem;

  color: var(--accent);

  letter-spacing: 0.2em;

  text-transform: uppercase;

  flex-shrink: 0;

}

.sec-title {

  font-size: clamp(1.9rem, 4vw, 2.7rem);

  letter-spacing: -0.025em;

}

.inner-label {

  border-top: 2px solid var(--b2);

  margin-top: 2.5rem;

  padding-top: 1rem;

  margin-bottom: 1.25rem;

}

.inner-label span {

  font-family: 'Space Mono', monospace;

  font-size: 0.58rem;

  color: var(--muted);

  letter-spacing: 0.2em;

  text-transform: uppercase;

}



/* ============================================================

   BUTTONS

============================================================ */

.btn {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.8rem 1.6rem;

  font-family: 'Space Grotesk', sans-serif;

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  cursor: pointer;

  border: 2px solid;

  border-radius: var(--radius-sm);

  white-space: nowrap;

  transition: box-shadow 0.12s, transform 0.12s;

}

.btn--primary {

  background: var(--accent);

  color: var(--acc-fg);

  border-color: var(--accent);

  box-shadow: 4px 4px 0 rgba(255,255,255,0.08);

}

.btn--primary:hover {

  background: #d07a6b;

  border-color: #d07a6b;

  box-shadow: 6px 6px 0 rgba(255,255,255,0.12), 0 0 20px rgba(185,109,96,0.3);

  transform: translate(-2px, -2px);

}

.btn--ghost {

  background: transparent;

  color: var(--muted);

  border-color: var(--b2);

}

.btn--ghost:hover {

  border-color: var(--sub);

  color: var(--text);

}



/* ============================================================

   TAGS

============================================================ */

.tag {

  display: inline-flex;

  align-items: center;

  padding: 0.18rem 0.55rem;

  border: 1px solid var(--b2);

  color: var(--muted);

  font-family: 'Space Mono', monospace;

  font-size: 0.62rem;

  border-radius: var(--radius-sm);

}



/* ============================================================

   NAVIGATION

============================================================ */

.nav {

  position: fixed;

  top: 0; left: 0; right: 0;

  z-index: 100;

  height: var(--nav-h);

  background: rgba(5,5,5,0.94);

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  border-bottom: 1px solid var(--b1);

  transition: border-color 0.2s;

}

.nav.scrolled { border-bottom-color: var(--b2); }

.nav__inner {

  max-width: 1100px;

  margin: 0 auto;

  padding: 0 2.5rem;

  height: 100%;

  display: flex;

  align-items: center;

  gap: 2rem;

}

.nav__logo {

  font-family: 'Space Mono', monospace;

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.25em;

  color: var(--text);

  border: 1px solid var(--b2);

  padding: 0.34rem 0.62rem;

  margin-right: auto;

  border-radius: var(--radius-sm);

  transition: border-color 0.15s, color 0.15s;

}

.nav__logo:hover { border-color: var(--accent); color: var(--accent); }

.nav__links { display: flex; gap: 2.5rem; }

.nav__links a {

  font-family: 'Space Mono', monospace;

  font-size: 0.62rem;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  color: var(--muted);

  transition: color 0.15s;

}

.nav__links a:hover { color: var(--text); }

.nav__right { display: flex; align-items: center; gap: 0.6rem; }

.lang-toggle {

  background: transparent;

  border: 1px solid var(--b2);

  color: var(--muted);

  padding: 0.26rem 0.58rem;

  font-family: 'Space Mono', monospace;

  font-size: 0.6rem;

  font-weight: 700;

  letter-spacing: 0.1em;

  cursor: pointer;

  border-radius: var(--radius-sm);

  transition: border-color 0.15s, color 0.15s;

}

.lang-toggle:hover { border-color: var(--sub); color: var(--text); }

.nav__burger {

  display: none;

  flex-direction: column;

  justify-content: space-between;

  width: 20px; height: 14px;

  background: none; border: none;

  cursor: pointer; padding: 0;

}

.nav__burger span {

  display: block; width: 100%; height: 1px;

  background: var(--muted);

  transition: transform 0.2s, opacity 0.2s;

}

.nav__burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }

.nav__burger.open span:nth-child(2) { opacity: 0; }

.nav__burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav__mobile {

  background: var(--bg);

  border-top: 1px solid var(--b2);

  padding: 1.5rem 2.5rem 2rem;

}

.nav__mobile ul { display: flex; flex-direction: column; gap: 1.2rem; }

.nav__mobile a {

  font-family: 'Space Mono', monospace;

  font-size: 0.75rem;

  color: var(--muted);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  transition: color 0.15s;

}

.nav__mobile a:hover { color: var(--text); }



/* ============================================================

   HERO

============================================================ */

.hero {

  min-height: 100vh;

  padding-top: var(--nav-h);

  display: flex;

  flex-direction: column;

  border-bottom: 2px solid var(--b2);

  position: relative;

  overflow: hidden;

}

.hero__top { border-bottom: 1px solid var(--b1); flex-shrink: 0; }

.hero__top .wrap {

  padding-top: 0.9rem;

  padding-bottom: 0.9rem;

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.hero__status {

  display: flex;

  align-items: center;

  gap: 0.55rem;

  font-family: 'Space Mono', monospace;

  font-size: 0.62rem;

  color: var(--muted);

  text-transform: uppercase;

  letter-spacing: 0.1em;

}

.hero__pulse {

  width: 6px; height: 6px;

  background: var(--accent);

  border-radius: 50%;

  flex-shrink: 0;

  animation: blink 2.4s ease-in-out infinite;

}

@keyframes blink {

  0%,100% { opacity: 1; transform: scale(1); }

  50%      { opacity: 0.4; transform: scale(0.65); }

}

.hero__loc {

  display: flex;

  align-items: center;

  gap: 0.45rem;

  font-family: 'Space Mono', monospace;

  font-size: 0.62rem;

  color: var(--muted);

  letter-spacing: 0.1em;

}

.hero__loc i { font-size: 0.55rem; }

.hero__body {

  flex: 1;

  display: flex;

  align-items: center;

  position: relative;

}

.hero__stage {

  position: absolute;

  inset: 0;

  display: grid;

  grid-template-columns: 1.55fr 0.75fr;

  grid-template-rows: 1fr;

  gap: 0;

  padding: 1.25rem 2.5rem 1.25rem;

}

.hero__content {

  position: relative;

  z-index: 1;

  width: 100%;

  padding-top: 1.5rem;

  padding-bottom: 1.5rem;

  display: flex;

  align-items: flex-end;

  min-height: 100%;

}

.hero__copy {

  max-width: 700px;

  padding: 1.5rem 2rem 1.5rem 0;

  pointer-events: auto;

}

.hero__eyebrow {

  display: inline-flex;

  margin-bottom: 1rem;

  padding: 0.25rem 0.45rem;

  border: 1px solid var(--b2);

  border-radius: var(--radius-sm);

  font-family: 'Space Mono', monospace;

  font-size: 0.62rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: var(--sub);

  background: rgba(0, 0, 0, 0.42);

}

.hero__name {

  font-size: clamp(4.4rem, 12vw, 8.8rem);

  letter-spacing: -0.05em;

  line-height: 0.88;

  display: flex;

  flex-direction: column;

  text-shadow: 0 8px 38px rgba(0,0,0,0.85);

}

.hero__fn { color: var(--text); }

.hero__ln {

  color: var(--accent);

  padding-left: 0.04em;

  text-shadow: 0 10px 30px rgba(0,0,0,0.7);

}

.hero__intro {

  max-width: 36rem;

  margin-top: 1rem;

  color: var(--sub);

  font-size: 1.04rem;

  line-height: 1.85;

  text-shadow: 0 2px 16px rgba(0,0,0,0.8);

}

.hero__software {

  display: flex;

  flex-wrap: wrap;

  gap: 0.7rem;

  margin-top: 1rem;

}

.hero-soft {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.42rem 0.62rem;

  border-radius: var(--radius-sm);

  background: rgba(0, 0, 0, 0.56);

  border: 1px solid var(--b2);

  font-family: 'Space Mono', monospace;

  font-size: 0.64rem;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: var(--text);

}

.hero-soft__icon {

  width: 16px;

  height: 16px;

  object-fit: contain;

}

.hero__reelnote {

  margin-top: 1rem;

  max-width: 32rem;

  padding-top: 1rem;

  border-top: 1px solid var(--b2);

}

.hero__reelnote-kicker {

  display: inline-block;

  margin-bottom: 0.55rem;

  font-family: 'Space Mono', monospace;

  font-size: 0.58rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--accent);

}

.hero__reelnote-copy {

  color: var(--muted);

  font-size: 0.85rem;

  line-height: 1.75;

}

.hero-shot {

  border: 1px solid var(--b2);

  background: rgba(255,255,255,0.025);

  position: relative;

  overflow: hidden;

  will-change: transform, filter;

}

.hero-shot::before {

  content: '';

  position: absolute;

  inset: 0;

  background: rgba(0,0,0,0.44);

  z-index: 1;

}

.hero-shot::after {

  content: attr(data-label);

  position: absolute;

  left: 1rem;

  bottom: 1rem;

  font-family: 'Space Mono', monospace;

  font-size: 0.56rem;

  color: var(--sub);

  letter-spacing: 0.14em;

  text-transform: uppercase;

  z-index: 2;

}

.hero-shot__img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: grayscale(0.2) contrast(1.05) brightness(0.5);

  z-index: 0;

}

.hero-shot__img--next {

  /* Keep at z-index 0 — same as the base img — so the ::before overlay

     (z-index 1) stays on top throughout the transition. This prevents the

     brightness pop that occurred when the incoming img was above the overlay. */

  z-index: 0;

  opacity: 0;

}

.hero-shot__img--next.hero-shot__img--visible {

  opacity: 1;

  transition: opacity 1.5s ease;

}

.hero-shot--wide {

  grid-column: 1;

  grid-row: 1;

}

.hero-shot--tall {

  grid-column: 2;

  grid-row: 1;

}

.hero__wash {

  position: absolute;

  inset: 0;

  background: rgba(5,5,5,0.52);

  pointer-events: none;

}

.hero__foot { border-top: 1px solid var(--b1); flex-shrink: 0; }

.hero__footbar {

  padding-top: 1rem;

  padding-bottom: 1rem;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 2rem;

  flex-wrap: wrap;

}

.hero__meta { display: flex; align-items: center; gap: 0.9rem; }

.hero__role {

  font-family: 'Space Mono', monospace;

  font-size: 0.7rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.15em;

  color: var(--text);

}

.hero__vsep {

  display: block; width: 1px; height: 14px;

  background: var(--b2); flex-shrink: 0;

}

.hero__stack {

  font-family: 'Space Mono', monospace;

  font-size: 0.62rem;

  color: var(--muted);

  letter-spacing: 0.08em;

}

.hero__ctas { display: flex; gap: 0.75rem; }



/* ============================================================

   ABOUT

============================================================ */

.about__layout {

  display: block;

}

.about__body {

  max-width: 760px;

}

.about__body p {

  color: var(--sub);

  font-size: 1rem;

  line-height: 1.9;

  margin-bottom: 1rem;

}

.about__body p:last-child { margin-bottom: 0; }

.about__facts {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1rem;

  margin-top: 1.5rem;

}

.about__fact {

  min-height: 80px;

  border-top: 2px solid var(--b2);

  padding: 1rem 0;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  gap: 0.45rem;

  will-change: transform, opacity;

  transition: border-color 0.18s;

}

.about__fact:hover {

  border-color: var(--accent);

}

.about__fact strong {

  font-family: 'Space Grotesk', sans-serif;

  font-size: clamp(1.8rem, 4vw, 2.5rem);

  font-weight: 700;

  color: var(--accent);

  line-height: 1;

}

.about__fact span {

  font-family: 'Space Mono', monospace;

  font-size: 0.58rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--muted);

}

.about__imdb {

  margin-top: 1rem;

  max-width: 420px;

}



/* ============================================================

   SKILLS

============================================================ */

.skills__list { border-top: 2px solid var(--b2); }

.skill-row {

  display: grid;

  grid-template-columns: 200px 1fr;

  gap: 2rem;

  padding: 1.5rem 0;

  border-bottom: 1px solid var(--b1);

  align-items: center;

  will-change: transform, opacity;

}

.skill-row__cat {

  font-family: 'Space Mono', monospace;

  font-size: 0.6rem;

  text-transform: uppercase;

  letter-spacing: 0.16em;

  color: var(--accent);

  flex-shrink: 0;

}

.skill-row__items {

  font-family: 'Space Mono', monospace;

  font-size: 0.72rem;

  color: var(--sub);

  letter-spacing: 0.03em;

  line-height: 1.8;

}



/* ============================================================

   EXPERIENCE

============================================================ */

.exp-featured {

  border: 2px solid var(--b2);

  margin-bottom: 2px;

  transition: border-color 0.2s;

  border-radius: var(--radius-sm);

  will-change: transform, opacity, filter;

  overflow: hidden;

}

.exp-featured:hover { border-color: var(--accent); }

.exp-featured__top {

  display: flex;

  align-items: center;

  gap: 1rem;

  padding: 1rem 1.75rem;

  border-bottom: 1px solid var(--b1);

  background: var(--bg-c);

}

.exp-badge {

  font-family: 'Space Mono', monospace;

  font-size: 0.55rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  padding: 0.22rem 0.6rem;

  background: var(--accent);

  color: var(--acc-fg);

  flex-shrink: 0;

}

.exp-period {

  font-family: 'Space Mono', monospace;

  font-size: 0.62rem;

  color: var(--muted);

  letter-spacing: 0.05em;

}

.exp-featured__heading {

  display: flex;

  align-items: baseline;

  gap: 1.5rem;

  padding: 1.5rem 1.75rem 0.5rem;

}

.exp-featured__role {

  font-size: 1.8rem;

  letter-spacing: -0.02em;

  color: var(--text);

}

.exp-featured__co {

  font-family: 'Space Mono', monospace;

  font-size: 0.65rem;

  color: var(--muted);

  text-transform: uppercase;

  letter-spacing: 0.12em;

}

.exp-bullets { padding: 1rem 1.75rem 1.75rem; }

.exp-bullets li {

  font-size: 0.9rem;

  color: var(--sub);

  padding: 0.3rem 0 0.3rem 1.5rem;

  position: relative;

  line-height: 1.7;

}

.exp-bullets li::before {

  content: '\2014';

  position: absolute;

  left: 0;

  color: var(--accent);

  font-family: 'Space Mono', monospace;

  font-size: 0.75rem;

}

.exp-past { margin-top: 2px; }

.exp-past { display: none; }



/* ============================================================

   PROJECTS TABLE

============================================================ */

.prod-intro {

  color: var(--sub);

  font-size: 0.93rem;

  line-height: 1.85;

  max-width: 600px;

  margin-bottom: 0;

  padding-left: 1rem;

  border-left: 2px solid var(--accent);

}

.showcase {

  display: flex;

  flex-direction: column;

  gap: 2rem;

}

.showcase__lead {

  display: grid;

  grid-template-columns: minmax(0, 1fr) 340px;

  gap: 2rem;

  align-items: start;

}

.showcase__notice {

  padding: 1.15rem 1.2rem;

  border: 2px solid var(--b2);

  background: var(--bg-c);

  position: relative;

  border-radius: var(--radius-sm);

}

.showcase__notice-kicker {

  display: inline-block;

  margin-bottom: 0.7rem;

  font-family: 'Space Mono', monospace;

  font-size: 0.56rem;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  color: var(--acc-fg);

  background: var(--accent);

  padding: 0.18rem 0.5rem;

}

.showcase__notice-copy {

  color: var(--sub);

  font-size: 0.88rem;

  line-height: 1.8;

}

.showcase__reels {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 1rem;

}

.reel-slot {

  min-height: 160px;

  padding: 1.2rem;

  border: 2px solid var(--b2);

  background: var(--bg-c);

  position: relative;

  overflow: hidden;

  border-radius: var(--radius-sm);

  will-change: transform, opacity;

  transition: border-color 0.18s;

}

.reel-slot:hover {

  border-color: var(--accent);

}

.reel-slot::after {

  content: 'pending materials';

  position: absolute;

  right: -36px;

  bottom: 18px;

  transform: rotate(-90deg);

  transform-origin: center;

  font-family: 'Space Mono', monospace;

  font-size: 0.52rem;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  color: var(--faint);

}

.reel-slot__eyebrow {

  display: inline-block;

  margin-bottom: 0.8rem;

  font-family: 'Space Mono', monospace;

  font-size: 0.55rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--accent);

}

.reel-slot__title {

  max-width: 14ch;

  font-size: 1.35rem;

  line-height: 1.05;

  margin-bottom: 1rem;

}

.reel-slot__copy {

  max-width: 26ch;

  color: var(--sub);

  font-size: 0.88rem;

  line-height: 1.8;

}

.showcase__toolbar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 1rem;

  flex-wrap: wrap;

  padding-top: 1rem;

  border-top: 2px solid var(--b2);

}

.showcase__filters {

  display: flex;

  flex-wrap: wrap;

  gap: 0.55rem;

}

.filter-btn {

  border: 1px solid var(--b2);

  background: transparent;

  color: var(--muted);

  padding: 0.45rem 0.78rem;

  font-family: 'Space Mono', monospace;

  font-size: 0.6rem;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  cursor: pointer;

  transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.15s;

  border-radius: var(--radius-sm);

}

.filter-btn:hover {

  border-color: var(--sub);

  color: var(--text);

  transform: translateY(-2px);

  box-shadow: 0 4px 12px rgba(0,0,0,0.2);

}

.filter-btn.is-active {

  background: var(--accent);

  color: var(--acc-fg);

  border-color: var(--accent);

}

.showcase__count {

  font-family: 'Space Mono', monospace;

  font-size: 0.62rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--muted);

}

.showcase__progress {

  display: none;

}

.showcase__progress-bar {

  display: none;

}

.side-card--compact {

  margin-top: 1rem;

}

.prod-table { border-top: 2px solid var(--b2); }

.prod-table__head {

  display: grid;

  grid-template-columns: 90px 1fr 130px 160px;

  gap: 1.5rem;

  padding: 0.6rem 0;

  border-bottom: 1px solid var(--b2);

}

.prod-table__head span {

  font-family: 'Space Mono', monospace;

  font-size: 0.55rem;

  text-transform: uppercase;

  letter-spacing: 0.16em;

  color: var(--faint);

}

.prod-row {

  display: grid;

  grid-template-columns: 90px 1fr 130px 160px;

  gap: 1.5rem;

  padding: 1rem 0.75rem;

  border-bottom: 1px solid var(--b1);

  align-items: center;

  margin: 0 -0.75rem;

  transition: background 0.12s;

}

.prod-row:hover { background: var(--bg-c); }

.prod-type {

  font-family: 'Space Mono', monospace;

  font-size: 0.58rem;

  text-transform: uppercase;

  letter-spacing: 0.1em;

  color: var(--muted);

}

.prod-title {

  font-family: 'Space Grotesk', sans-serif;

  font-size: 0.95rem;

  font-weight: 700;

  color: var(--text);

}

.prod-role {

  font-family: 'Space Mono', monospace;

  font-size: 0.62rem;

  color: var(--muted);

  letter-spacing: 0.04em;

}

.prod-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }

.prod-footer { margin-top: 2.5rem; display: flex; gap: 0.75rem; flex-wrap: wrap; }

.prod-footer .fa-imdb { font-size: 1.4rem; }

.side-card {

  border: 2px solid var(--b2);

  padding: 1.75rem;

  background: var(--bg-c);

  max-width: 520px;

  transition: border-color 0.15s;

  border-radius: var(--radius-sm);

  will-change: transform, opacity;

}

.side-card:hover { border-color: var(--accent); }

.side-card__top {

  display: flex;

  align-items: baseline;

  gap: 1rem;

  margin-bottom: 0.75rem;

}

.side-card__type {

  font-family: 'Space Mono', monospace;

  font-size: 0.55rem;

  text-transform: uppercase;

  letter-spacing: 0.16em;

  color: var(--accent);

}

.side-card__title { font-size: 1.15rem; font-weight: 700; color: var(--text); }

.side-card__desc {

  font-size: 0.88rem;

  color: var(--sub);

  line-height: 1.75;

  margin-bottom: 1rem;

}

.side-card__tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }



/* ============================================================

   CONTACT

============================================================ */

.contact__layout {

  display: grid;

  grid-template-columns: 1fr 420px;

  gap: 3.5rem;

  align-items: start;

}

.contact__lede p {

  color: var(--sub);

  font-size: 1rem;

  line-height: 1.85;

  margin-bottom: 1.25rem;

}

.contact__open {

  color: var(--text) !important;

  display: flex;

  align-items: center;

  gap: 0.6rem;

}

.contact__open::before {

  content: '';

  width: 6px; height: 6px;

  background: var(--accent);

  border-radius: 50%;

  flex-shrink: 0;

}

.contact__links { display: flex; flex-direction: column; gap: 2px; }

.clink {

  display: flex;

  align-items: center;

  gap: 1rem;

  padding: 1.1rem 1.25rem;

  background: var(--bg-c);

  border: 2px solid var(--b2);

  transition: border-color 0.15s, box-shadow 0.15s;

  border-radius: var(--radius-sm);

  will-change: transform, opacity;

}

.clink:hover {

  border-color: var(--accent);

  box-shadow: 0 8px 25px rgba(185,109,96,0.15);

}

.clink__icon {

  width: 36px; height: 36px;

  border: 1px solid var(--b2);

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--muted);

  font-size: 0.88rem;

  flex-shrink: 0;

  transition: border-color 0.15s, color 0.15s;

  border-radius: var(--radius-sm);

}

.clink:hover .clink__icon { border-color: var(--accent); color: var(--accent); }

.clink__icon-img {

  width: 20px;

  height: 20px;

  object-fit: contain;

  filter: brightness(0) invert(0.7);

  transition: filter 0.15s;

}

.clink__icon-img--lg {

  width: 30px;

  height: 30px;

}

.clink:hover .clink__icon-img { filter: brightness(0) invert(0.55) sepia(1) saturate(3) hue-rotate(340deg); }

.clink__body { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }

.clink__label {

  font-family: 'Space Mono', monospace;

  font-size: 0.55rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--muted);

}

.clink__value { font-size: 0.88rem; font-weight: 500; color: var(--text); }

.clink__arr {

  color: var(--faint);

  font-size: 0.68rem;

  transition: transform 0.15s, color 0.15s;

}

.clink:hover .clink__arr { transform: translateX(4px); color: var(--accent); }



/* ============================================================

   FOOTER

============================================================ */

.footer {

  padding: 1.75rem 0;

  border-top: 2px solid var(--b2);

}

.footer .container {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.footer p {

  font-family: 'Space Mono', monospace;

  font-size: 0.62rem;

  color: var(--muted);

  letter-spacing: 0.06em;

}



/* ============================================================

   FADE-IN

============================================================ */

.fade-up {

  opacity: 0;

  transform: translateY(30px);

  transition: opacity 0.5s ease, transform 0.5s ease;

}

.fade-up.visible { 

  opacity: 1; 

  transform: translateY(0); 

}



/* ============================================================

   ONE-SHOT REVEAL ANIMATIONS

============================================================ */

.sec-head,

.skill-row,

.reel-slot,

.about__fact,

.exp-featured,

.side-card,

.clink,

.prod-intro {

  opacity: 0;

  transform: translateY(20px);

  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),

              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.sec-head.revealed,

.skill-row.revealed,

.reel-slot.revealed,

.about__fact.revealed,

.exp-featured.revealed,

.side-card.revealed,

.clink.revealed,

.prod-intro.revealed {

  opacity: 1;

  transform: translateY(0);

}



/* ============================================================

   CURSOR

============================================================ */

.cursor-shell {

  position: fixed;

  top: 0;

  left: 0;

  z-index: 9999;

  pointer-events: none;

  opacity: 0;

  transition: opacity 120ms ease, transform 60ms linear;

}

.cursor-shell__dot {

  position: absolute;

  width: 24px;

  height: 24px;

  margin-left: -12px;

  margin-top: -12px;

  border: 1.5px solid rgba(255,255,255,0.96);

  border-radius: 999px;

  background: rgba(255,255,255,0.16);

  backdrop-filter: blur(4px);

  box-shadow: 0 0 0 10px rgba(255,255,255,0.08), 0 0 24px rgba(255,255,255,0.12);

  transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;

}

.cursor-shell__label {

  position: absolute;

  left: 20px;

  top: -14px;

  min-width: max-content;

  max-width: 180px;

  padding: 0.28rem 0.5rem;

  border: 1px solid rgba(255,255,255,0.16);

  border-radius: 999px;

  background: rgba(9,9,9,0.9);

  color: #f3f1e8;

  font-family: 'Space Mono', monospace;

  font-size: 0.54rem;

  line-height: 1.2;

  letter-spacing: 0.1em;

  text-transform: uppercase;

  opacity: 0;

  white-space: nowrap;

  box-shadow: 0 10px 24px rgba(0,0,0,0.28);

  transition: opacity 120ms ease;

}

.cursor-shell.is-visible {

  opacity: 1;

}

.cursor-shell.is-active {

  opacity: 1;

}

.cursor-shell.is-active .cursor-shell__label {

  opacity: 1;

}



.cursor-shell.is-active .cursor-shell__dot,

.cursor-shell.is-card-hover .cursor-shell__dot {

  border-color: var(--accent);

  background: rgba(185,109,96,0.14);

  box-shadow: 0 0 0 4px rgba(185,109,96,0.08);

}

.cursor-shell.is-active .cursor-shell__label,

.cursor-shell.is-card-hover .cursor-shell__label {

  opacity: 1;

  border-color: rgba(185,109,96,0.35);

  color: var(--accent);

}



.sec-head {

  transform: translate3d(0, calc(var(--float-y, 0px) * 0.2), 0);

}

.reel-slot,

.about__fact,

.exp-featured,

.side-card,

.personal__photo,

.clink {

  transform: translate3d(0, var(--float-y, 0px), 0) rotate(calc(var(--tilt, 0deg) * 0.32)) scale(var(--scene-scale, 1));

}



/* ============================================================

   PROJECT DETAIL PAGE

============================================================ */

.project-page {

  min-height: 100vh;

  padding-top: var(--nav-h);

}



/* -- Hero -- */

.project-hero {

  position: relative;

  min-height: 80vh;

  border-bottom: 2px solid var(--b2);

  overflow: hidden;

  display: flex;

  flex-direction: column;

}

.project-hero__media {

  position: absolute;

  inset: 0;

  display: grid;

  grid-template-columns: 1fr;

  gap: 0;

}

.project-hero__panel {

  position: relative;

  overflow: hidden;

  border: none;

  background: rgba(255,255,255,0.03);

}

.project-hero__panel::before {

  content: attr(data-label);

  position: absolute;

  left: 1rem;

  bottom: 1rem;

  z-index: 2;

  font-family: 'Space Mono', monospace;

  font-size: 0.56rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--sub);

}

.project-hero__panel::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(5,5,5,0.3) 0%, rgba(5,5,5,0.75) 100%);

  z-index: 1;

}

.project-hero__panel video,

.project-hero__panel img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  filter: saturate(0.85) contrast(1.05) brightness(0.55);

}

.project-hero__stack {

  display: none;

}



/* -- Hero Inner -- */

.section--tight {

  padding: 0;

}

.section__inner {

  max-width: 1100px;

  margin: 0 auto;

  padding: 0 2.5rem;

}

.project-hero__inner {

  position: relative;

  z-index: 2;

  min-height: 80vh;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  max-width: 1100px;

  margin: 0 auto;

  padding: 3rem 2.5rem 4rem;

}

.project-hero__content-wrap {

  display: flex;

  width: 100%;

}

.project-hero__copy {

  max-width: 680px;

}

.project-hero__eyebrow,

.project-block__label,

.project-nav__back {

  font-family: 'Space Mono', monospace;

  font-size: 0.6rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;

}

.project-nav__back {

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  margin-bottom: 1.5rem;

  color: var(--muted);

  transition: color 0.15s;

}

.project-nav__back:hover { color: var(--accent); }

.project-hero__eyebrow {

  display: inline-flex;

  margin-bottom: 1rem;

  padding: 0.22rem 0.55rem;

  border: 1px solid rgba(255,255,255,0.12);

  background: rgba(0,0,0,0.5);

  color: var(--sub);

  border-radius: var(--radius-sm);

}

.project-hero__title {

  font-size: clamp(3.2rem, 9vw, 7rem);

  line-height: 0.9;

  letter-spacing: -0.05em;

  text-shadow: 0 10px 40px rgba(0,0,0,0.7);

}

.project-hero__summary {

  max-width: 42rem;

  margin-top: 1.25rem;

  color: var(--sub);

  font-size: 1.05rem;

  line-height: 1.85;

  text-shadow: 0 2px 10px rgba(0,0,0,0.6);

}

.project-hero__meta {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  margin-top: 1.5rem;

}

.project-meta-chip {

  display: inline-flex;

  padding: 0.32rem 0.58rem;

  border: 1px solid rgba(255,255,255,0.1);

  color: var(--sub);

  font-family: 'Space Mono', monospace;

  font-size: 0.58rem;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  background: rgba(0,0,0,0.5);

  border-radius: var(--radius-sm);

  backdrop-filter: blur(4px);

}



/* -- Hero Sidebar (moves below hero on project page) -- */

.project-hero .project-sidebar {

  display: none;

}



/* -- Project Body -- */

.project-page__body {

  max-width: 1100px;

  margin: 0 auto;

  padding: 0 2.5rem 6rem;

  display: grid;

  grid-template-columns: minmax(0, 1fr) 340px;

  gap: 4rem;

}



/* -- Project Info Bar (new) -- */

.project-infobar {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1px;

  background: var(--b2);

  border: 2px solid var(--b2);

  border-radius: var(--radius-sm);

  overflow: hidden;

  margin-bottom: 0;

}

.project-infobar__item {

  background: var(--bg-c);

  padding: 1.2rem 1.4rem;

  display: flex;

  flex-direction: column;

  gap: 0.4rem;

}

.project-infobar__label {

  font-family: 'Space Mono', monospace;

  font-size: 0.55rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--muted);

}

.project-infobar__value {

  color: var(--text);

  font-weight: 500;

  line-height: 1.5;

}



/* -- Project Blocks -- */

.project-block {

  margin-bottom: 3.5rem;

}

.project-block__label {

  display: inline-block;

  margin-bottom: 1rem;

  color: var(--accent);

}

.project-block__title {

  margin-bottom: 1rem;

  font-size: 1.8rem;

}

.project-block__copy {

  max-width: 44rem;

  color: var(--sub);

  font-size: 1rem;

  line-height: 1.9;

}

.project-list {

  display: grid;

  gap: 0.7rem;

}

.project-list li {

  position: relative;

  padding-left: 1.15rem;

  color: var(--sub);

  line-height: 1.75;

  font-size: 1rem;

}

.project-list li::before {

  content: '';

  position: absolute;

  left: 0;

  top: 0.8rem;

  width: 6px;

  height: 6px;

  background: var(--accent);

  border-radius: 1px;

}



/* -- Gallery -- */

.project-gallery {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 1rem;

}

.project-gallery__item {

  min-height: 240px;

  position: relative;

  overflow: hidden;

  border: 1px solid var(--b2);

  background: rgba(255,255,255,0.03);

  border-radius: var(--radius-sm);

  transition: border-color 0.2s;

}

.project-gallery__item:hover {

  border-color: var(--accent);

}

.project-gallery__item::before {

  content: attr(data-label);

  position: absolute;

  left: 1rem;

  bottom: 1rem;

  z-index: 2;

  font-family: 'Space Mono', monospace;

  font-size: 0.55rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--sub);

}

.project-gallery__item::after {

  content: '';

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.55));

  z-index: 1;

}

.project-gallery__item video {

  width: 100%;

  height: 100%;

  object-fit: cover;

  filter: grayscale(0.18) brightness(0.6);

}

.project-gallery__item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  filter: saturate(0.94) contrast(1.03) brightness(0.7);

}

.project-gallery__heading {

  margin-bottom: 1.25rem;

}



/* -- Sidebar -- */

.project-sidebar {

  position: sticky;

  top: calc(var(--nav-h) + 2rem);

  align-self: start;

}

.project-sidebar--secondary {

  display: grid;

  gap: 1rem;

}

.project-sidebar__title {

  margin-bottom: 1rem;

  font-size: 1rem;

}

.project-sidebar__meta {

  display: grid;

  gap: 0.9rem;

  margin-bottom: 1.25rem;

}

.project-sidebar__meta dt {

  margin-bottom: 0.25rem;

  font-family: 'Space Mono', monospace;

  font-size: 0.55rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--muted);

}

.project-sidebar__meta dd {

  color: var(--text);

  line-height: 1.6;

}

.project-sidebar__tags {

  display: flex;

  flex-wrap: wrap;

  gap: 0.45rem;

}

.project-sidebar__card {

  display: grid;

  gap: 0.55rem;

  padding: 1.2rem 1.1rem;

  border: 1px solid var(--b2);

  background: var(--bg-c);

  border-radius: var(--radius-sm);

  transition: border-color 0.2s;

}

.project-sidebar__card:hover {

  border-color: rgba(185,109,96,0.4);

}

.project-sidebar__card span {

  font-family: 'Space Mono', monospace;

  font-size: 0.56rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--muted);

}

.project-sidebar__card p {

  color: var(--sub);

  line-height: 1.7;

}

.project-sidebar__links {

  display: grid;

  gap: 0.7rem;

}

.project-link {

  display: grid;

  gap: 0.2rem;

  padding: 0.9rem 1rem;

  border: 1px solid var(--b2);

  background: rgba(255,255,255,0.02);

  border-radius: var(--radius-sm);

  transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;

}

.project-link:hover {

  border-color: var(--accent);

  background: rgba(255,255,255,0.04);

  transform: translateY(-2px);

}

.project-link__type {

  font-family: 'Space Mono', monospace;

  font-size: 0.56rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--muted);

}

.project-link strong {

  font-size: 1rem;

  font-family: 'Space Grotesk', sans-serif;

}

.project-link span:last-child {

  color: var(--sub);

}

.project-empty {

  max-width: 540px;

  display: grid;

  gap: 1rem;

}



/* -- Reveal animation for project page -- */

.reveal {

  opacity: 0;

  transform: translateY(22px);

  transition: opacity 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),

              transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}

.reveal--visible {

  opacity: 1;

  transform: translateY(0);

}



/* ============================================================

   IMAGE PLACEHOLDER

============================================================ */

.img-ph {

  background: var(--bg-c);

  border: 1px dashed var(--b2);

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  position: relative;

  margin: 0;

  border-radius: var(--radius-sm);

}

.img-ph::after {

  content: attr(data-label);

  font-family: 'Space Mono', monospace;

  font-size: 0.52rem;

  color: var(--faint);

  letter-spacing: 0.14em;

  text-transform: uppercase;

  text-align: center;

  pointer-events: none;

}

.img-ph img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  position: absolute;

  inset: 0;

  display: block;

}



/* ============================================================

   FEATURED PRODUCTIONS GRID

============================================================ */

.prod-featured {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  background: var(--b2);

  gap: 1px;

  border: 2px solid var(--b2);

  margin-bottom: 3rem;

}

.prod-feat-card {

  background: var(--bg-c);

  display: flex;

  flex-direction: column;

  transition: background 0.15s;

}

.prod-feat-card:hover { background: var(--bg-h); }

.prod-feat__img {

  width: 100%;

  aspect-ratio: 16 / 9;

  border: none;

}

.prod-feat__img::after { font-size: 0.5rem; }

.prod-feat__meta {

  padding: 0.7rem 0.9rem 0.85rem;

  display: flex;

  flex-direction: column;

  gap: 0.2rem;

  border-top: 1px solid var(--b2);

}

.prod-feat__type {

  font-family: 'Space Mono', monospace;

  font-size: 0.52rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--muted);

}

.prod-feat__name {

  font-family: 'Space Grotesk', sans-serif;

  font-size: 0.88rem;

  font-weight: 700;

  color: var(--text);

  line-height: 1.2;

}



/* ============================================================

   PERSONAL SECTION

============================================================ */

.personal__layout {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 3.5rem;

  align-items: start;

}

.personal__photo {

  width: 100%;

  aspect-ratio: 3 / 4;

  position: sticky;

  top: calc(var(--nav-h) + 2rem);

  border: 2px solid var(--b2);

}

.personal__photo::after { font-size: 0.58rem; color: var(--muted); }



/* Photo mosaic grid */

.personal__photo-strip {

  display: grid;

  grid-template-columns: 2fr 1fr 1fr;

  grid-template-rows: 1fr 1fr;

  aspect-ratio: 1 / 1;

  gap: 0.75rem;

}

.personal__photo-item {

  overflow: hidden;

  border: 2px solid var(--b2);

  border-radius: var(--radius-md);

  transition: border-color 0.2s;

  min-height: 0;

}

/* Big square — spans 2 rows on the left */

.personal__photo-strip .personal__photo-item:nth-child(1) {

  grid-column: 1;

  grid-row: 1 / 3;

}

/* Two smaller squares on the right */

.personal__photo-strip .personal__photo-item:nth-child(2) {

  grid-column: 2;

  grid-row: 1;

}

.personal__photo-strip .personal__photo-item:nth-child(3) {

  grid-column: 3;

  grid-row: 1;

}

/* Wide panoramic bottom-right — spans 2 columns */

.personal__photo-strip .personal__photo-item:nth-child(4) {

  grid-column: 2 / 4;

  grid-row: 2;

}

.personal__photo-item:hover { border-color: var(--b3); }

.personal__photo-item img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: top center;

  display: block;

}



/* ── LIGHTBOX ── */

.lightbox {

  display: none;

  position: fixed; inset: 0; z-index: 1000;

  background: rgba(0,0,0,0.92);

  align-items: center; justify-content: center;

}

.lightbox.is-open { display: flex; }

.lightbox__img {

  max-width: min(90vw, 1000px);

  max-height: 88vh;

  object-fit: contain;

  border-radius: 6px;

  display: block;

  user-select: none;

}

.lightbox__btn {

  position: absolute; top: 50%; transform: translateY(-50%);

  background: rgba(255,255,255,0.07);

  border: 1px solid rgba(255,255,255,0.15);

  color: #fff; font-size: 1.1rem; line-height: 1;

  width: 2.8rem; height: 2.8rem; border-radius: 50%;

  display: flex; align-items: center; justify-content: center;

  cursor: none; transition: background 0.15s;

  user-select: none; padding: 0;

}

.lightbox__btn:hover { background: rgba(255,255,255,0.16); }

.lightbox__prev { left: 1.25rem; }

.lightbox__next { right: 1.25rem; }

.lightbox__close {

  position: absolute; top: 1rem; right: 1.25rem;

  background: none; border: none; color: rgba(255,255,255,0.5);

  font-size: 1.5rem; cursor: none; line-height: 1;

  transition: color 0.15s;

}

.lightbox__close:hover { color: #fff; }

.lightbox__counter {

  position: absolute; bottom: 1.25rem; left: 50%; transform: translateX(-50%);

  font-family: 'Space Mono', monospace; font-size: 0.55rem;

  letter-spacing: 0.12em; color: rgba(255,255,255,0.35);

}




/* ============================================================
   PROJECT MODAL
============================================================ */
.proj-modal {
  display: none;
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.88);
  align-items: center; justify-content: center;
  padding: 1.5rem;
}
.proj-modal.is-open { display: flex; }

/* ── Navigation buttons (arrows) ── */
.proj-modal__btn {
  position: fixed; top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  color: #fff;
  width: 2.8rem; height: 2.8rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: none; transition: background 0.15s;
  user-select: none; padding: 0; flex-shrink: 0;
  z-index: 1001;
}
.proj-modal__btn:hover { background: rgba(255,255,255,0.16); }
.proj-modal__prev { left: 1.25rem; }
.proj-modal__next { right: 1.25rem; }

/* ── Close button ── */
.proj-modal__close {
  position: fixed; top: 1rem; right: 1.25rem;
  background: none; border: none; color: rgba(255,255,255,0.5);
  font-size: 1.5rem; cursor: none; line-height: 1;
  transition: color 0.15s; z-index: 1001;
}
.proj-modal__close:hover { color: #fff; }

/* ── Card inside the modal ── */
.proj-modal__card {
  display: flex;
  flex-direction: row;
  gap: 0;
  background: var(--bg-b);
  border: 1px solid var(--b2);
  border-radius: var(--radius-md);
  overflow: hidden;
  max-width: min(880px, calc(100vw - 8rem));
  max-height: min(560px, 90vh);
  width: 100%;
}
.proj-modal__thumb {
  flex: 0 0 42%;
  max-width: 42%;
  overflow: hidden;
  background: var(--bg-c);
}
.proj-modal__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.proj-modal__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 2rem 1.75rem;
  overflow-y: auto;
}
.proj-modal__type {
  font-family: 'Space Mono', monospace;
  font-size: 0.52rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--accent);
}
.proj-modal__title {
  font-size: 1.5rem; font-weight: 700;
  color: var(--fg); line-height: 1.2; margin: 0;
}
.proj-modal__focus {
  font-size: 0.8rem; color: var(--sub);
}
.proj-modal__bullets {
  list-style: none; padding: 0; margin: 0.25rem 0 0;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.proj-modal__bullets li {
  font-size: 0.82rem; color: var(--sub);
  line-height: 1.55; padding-left: 1rem; position: relative;
}
.proj-modal__bullets li::before {
  content: '';
  position: absolute; left: 0; top: 0.52em;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--accent);
}
.proj-modal__tags {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  margin-top: auto; padding-top: 0.75rem;
  border-top: 1px solid var(--b2);
}
/* ── Counter ── */
.proj-modal__counter {
  position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  font-family: 'Space Mono', monospace; font-size: 0.55rem;
  letter-spacing: 0.12em; color: rgba(255,255,255,0.35);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .proj-modal__card { flex-direction: column; max-height: 90vh; max-width: calc(100vw - 3rem); }
  .proj-modal__thumb { flex: 0 0 45%; max-width: 100%; }
  .proj-modal__body { padding: 1.25rem; }
  .proj-modal__title { font-size: 1.2rem; }
}

/* Photo stack sidebar (legacy, kept for safety) */

.personal__photo-stack {

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

  position: sticky;

  top: calc(var(--nav-h) + 2rem);

}

.personal__photo-stack .personal__photo-item { aspect-ratio: 4 / 3; }



/* Inline photos row inside body */

.personal__photos-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 0.75rem;

  margin: 1.5rem 0;

}

.personal__photos-row .personal__photo-item { aspect-ratio: 4 / 3; }



.personal__body > p {

  color: var(--sub);

  font-size: 1rem;

  line-height: 1.9;

}

.personal__body .inner-label { margin-top: 2.5rem; }



/* Side card link */

.side-card__title-link {

  color: inherit;

  display: inline-flex;

  align-items: center;

  gap: 0.4rem;

}

.side-card__title-link:hover .side-card__title { color: var(--accent); }

.side-card__title-link i {

  font-size: 0.6rem;

  color: var(--muted);

  transition: color 0.15s;

}

.side-card__title-link:hover i { color: var(--accent); }



/* ============================================================

   WORK GRID — unified project cards

============================================================ */

.work-toolbar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 1rem;

  flex-wrap: wrap;

  margin-bottom: 1rem;

}

.work-grid {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 1rem;

}



/* ── Card shell (flip container) ── */

/* -- Card shell -- */
.work-card {
  position: relative;
  background: transparent;
  aspect-ratio: 2 / 3;
  cursor: pointer;
  z-index: 1;
}

/* -- Inner (no flip) -- */
.work-card__inner {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}

/* -- Front face -- */
.work-card__front {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--b2);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--bg-c);
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.work-card:hover .work-card__front {
  border-color: var(--accent);
  box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 0 1px var(--accent);
}



/* ── Thumbnail background ── */

.work-card__bg {

  position: absolute;

  inset: 0;

  z-index: 0;

}

.work-card__bg img {

  width: 100%; height: 100%;

  object-fit: cover;

  display: block;

  filter: saturate(0.85) contrast(1.05);

  transition: transform 0.5s ease;

}

.work-card:hover .work-card__bg img {

  transform: scale(1.05);

}



/* Gradient scrim over image */

.work-card__scrim {

  position: absolute;

  inset: 0;

  z-index: 1;

  background: linear-gradient(

    180deg,

    rgba(5,5,5,0) 40%,

    rgba(5,5,5,0.5) 65%,

    rgba(5,5,5,0.9) 100%

  );

  pointer-events: none;

}



/* ── Card body (text overlay at bottom of front) ── */

.work-card__body {

  position: relative;

  z-index: 2;

  padding: 1rem 1.2rem;

  display: flex;

  flex-direction: column;

  gap: 0.25rem;

}

.work-card__type {

  font-family: 'Space Mono', monospace;

  font-size: 0.5rem;

  text-transform: uppercase;

  letter-spacing: 0.14em;

  color: var(--accent);

}

.work-card__title {

  font-size: 1.35rem;

  font-weight: 700;

  line-height: 1.1;

  color: var(--text);

}

.work-card__focus {

  font-family: 'Space Mono', monospace;

  font-size: 0.55rem;

  color: var(--muted);

  letter-spacing: 0.05em;

}



/* Status pill */

.work-card__status {

  position: absolute;

  top: 0.65rem;

  right: 0.65rem;

  z-index: 3;

  padding: 0.18rem 0.5rem;

  background: rgba(185,109,96,0.2);

  backdrop-filter: blur(6px);

  border: 1px solid rgba(185,109,96,0.4);

  color: var(--accent);

  font-family: 'Space Mono', monospace;

  font-size: 0.46rem;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  border-radius: var(--radius-sm);

}



/* Tags row — only visible on hover */

.work-card__tags {

  display: flex;

  flex-wrap: wrap;

  gap: 0.25rem;

  margin-top: 0.35rem;

  max-height: 0;

  overflow: hidden;

  opacity: 0;

  transition: max-height 0.35s ease, opacity 0.25s ease;

}

.work-card:hover .work-card__tags {

  max-height: 3rem;

  opacity: 1;

}

.work-card__tags .tag {

  background: rgba(0,0,0,0.35);

  backdrop-filter: blur(4px);

  border-color: rgba(255,255,255,0.08);

  font-size: 0.5rem;

}



/* ============================================================

   STICKY SKILLS SECTION

============================================================ */

.skills-sticky-wrap {

  position: relative;

}

.skills-sticky-wrap .sec-head {

  position: sticky;

  top: var(--nav-h);

  z-index: 2;

  background: var(--bg-s);

  padding-top: 1rem;

  padding-bottom: 1rem;

}



/* ============================================================

   RESPONSIVE

============================================================ */

@media (max-width: 960px) {

  .about__facts     { grid-template-columns: 1fr 1fr 1fr; }

  .contact__layout { grid-template-columns: 1fr; gap: 2rem; }

  .hero__grid       { grid-template-columns: 1fr; align-items: start; }

  .hero__stage      {

    grid-template-columns: 1.55fr 0.75fr;

    grid-template-rows: 1fr;

    padding-left: 1.5rem;

    padding-right: 1.5rem;

  }

  .hero-shot--wide  { grid-column: 1; grid-row: 1; }

  .hero-shot--tall  { grid-column: 2; grid-row: 1; }

  .showcase__lead   { grid-template-columns: 1fr; }

  .showcase__reels  { grid-template-columns: 1fr; }

  .work-grid        { grid-template-columns: repeat(3, 1fr); }

  .project-hero__media { grid-template-columns: 1fr; }

  .project-hero__inner { padding-left: 1.5rem; padding-right: 1.5rem; }

  .project-page__body  { grid-template-columns: 1fr; }

  .project-sidebar     { position: static; }

  .project-gallery     { grid-template-columns: 1fr 1fr; }

  .project-infobar     { grid-template-columns: repeat(2, 1fr); }

  .prod-table__head { grid-template-columns: 80px 1fr 110px; }

  .prod-table__head span:last-child { display: none; }

  .prod-row        { grid-template-columns: 80px 1fr 110px; }

  .prod-tags       { display: none; }

  .prod-featured   { grid-template-columns: repeat(2, 1fr); }

  .personal__layout{ grid-template-columns: 1fr; }

  .personal__photo { position: static; max-width: 260px; aspect-ratio: 4 / 3; }

  .personal__photo-stack { position: static; flex-direction: row; flex-wrap: wrap; }

  .personal__photo-stack .personal__photo-item { flex: 1 1 45%; min-width: 180px; }

  .personal__photo-strip { grid-template-columns: 1fr 1fr; }

  .personal__photo-strip .personal__photo-item:nth-child(1) { grid-column: 1; grid-row: 1; aspect-ratio: 1 / 1; }

  .personal__photo-strip .personal__photo-item:nth-child(4) { grid-column: 1 / 3; aspect-ratio: 2 / 1; }

}



@media (max-width: 768px) {

  .nav__links      { display: none; }

  .nav__burger     { display: flex; }

  .section         { padding: 3rem 0; }

  .sec-head        { margin-bottom: 1.5rem; gap: 1rem; }

  .inner-label     { margin-top: 1.5rem; margin-bottom: 0.75rem; }

  .hero__content   { align-items: flex-end; }

  .hero__copy      { padding-right: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; }

  .hero__name      { font-size: clamp(3.4rem, 15vw, 6rem); }

  .hero__footbar   { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }

  .hero__meta      { flex-direction: column; align-items: flex-start; gap: 0.4rem; }

  .hero__vsep      { display: none; }

  .hero__reelnote  { display: none; }

  .project-hero__inner { padding-left: 1.25rem; padding-right: 1.25rem; }

  .project-hero__media { padding: 0; }

  .work-grid        { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

  .work-card__title  { font-size: 1.1rem; }

  .showcase__toolbar{ align-items: flex-start; }

  .about__facts    { grid-template-columns: 1fr; gap: 0.4rem; }

  .about__fact     { min-height: auto; padding: 0.6rem 0; }

  .about__body p   { margin-bottom: 0.75rem; }

  .skill-row       { grid-template-columns: 1fr; gap: 0.5rem; }

  .exp-past__row   { grid-template-columns: 1fr; }

  .exp-past__period{ grid-column: 1; }

  .prod-table__head{ display: none; }

  .prod-row        { grid-template-columns: 70px 1fr; }

  .prod-role       { display: none; }

  .project-infobar { grid-template-columns: 1fr; }

  .project-gallery { grid-template-columns: 1fr; }







@media (max-width: 480px) {

  .container, .wrap { padding-left: 1.25rem; padding-right: 1.25rem; }

  .section         { padding: 2.5rem 0; }

  .sec-head        { margin-bottom: 1.25rem; }

  .exp-featured__heading { flex-direction: column; gap: 0.4rem; }

  .exp-featured__role    { font-size: 1.4rem; }

  .hero__ctas  { flex-direction: column; align-items: flex-start; }

  .hero__intro { font-size: 0.96rem; margin-top: 0.6rem; }

  .hero__software { margin-top: 0.6rem; gap: 0.4rem; }

  .hero__stage  {

    padding-left: 1rem;

    padding-right: 1rem;

  }

  .hero__copy   { padding-bottom: 0.75rem; padding-top: 0.5rem; }

  .hero__eyebrow { margin-bottom: 0.5rem; }

  .about__fact  { min-height: auto; }

  .cursor-shell { display: none; }

  .filter-btn  { width: 100%; justify-content: center; }

  .showcase__filters { width: 100%; }

  .work-grid       { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }

  .work-card         { aspect-ratio: 3 / 4; }

  .work-card--placeholder { min-height: 120px; }

  .work-card__title { font-size: 1rem; }

  .prod-featured { grid-template-columns: 1fr 1fr; }

  .footer .container { flex-direction: column; gap: 0.3rem; text-align: center; }

}



/* ============================================================

   FIREFOX PERFORMANCE MODE

   @supports (-moz-appearance: none) matches Firefox only.

   Removes/simplifies expensive compositing: backdrop-filter,

   filter:blur, will-change — properties that tank FF perf.

   ============================================================ */

@supports (-moz-appearance: none) {



  /* NAV — solid instead of frosted glass */

  .nav {

    background: #050505;

    backdrop-filter: none;

    -webkit-backdrop-filter: none;

  }



  /* CURSOR — no blur ring, no glow */

  .cursor-shell__dot {

    backdrop-filter: none;

    -webkit-backdrop-filter: none;

    box-shadow: none;

  }

  .cursor-shell__label {

    backdrop-filter: none;

    -webkit-backdrop-filter: none;

    background: #0a0a0a;

  }



  /* HERO PANELS — no will-change, simpler filter */

  .hero-shot {

    will-change: auto;

  }

  .hero-shot__img {

    filter: brightness(0.5);

  }



  /* FLIP CARD BACK — no blur on background image */

  .work-card__back-bg img {

    filter: brightness(0.12);

  }



  /* TAGS — solid background instead of frosted */

  .work-card__tags .tag,

  .work-card__back-tags .tag {

    backdrop-filter: none;

    -webkit-backdrop-filter: none;

    background: rgba(0, 0, 0, 0.72);

  }



  /* STATUS PILL */

  .work-card__status {

    backdrop-filter: none;

    -webkit-backdrop-filter: none;

    background: rgba(185, 109, 96, 0.35);

  }

}
}