:root {
  color-scheme: dark;
  --sand-1: #111110;
  --sand-2: #191918;
  --sand-3: #222221;
  --sand-4: #2a2a28;
  --sand-5: #31312e;
  --sand-6: #3b3a37;
  --sand-7: #494844;
  --sand-8: #62605b;
  --sand-9: #6f6d66;
  --sand-10: #7c7b74;
  --sand-11: #b5b3ad;
  --sand-12: #eeeeec;
  --bg: #000;
  --bg-subtle: var(--sand-2);
  --bg-ui: var(--sand-3);
  --bg-hover: var(--sand-4);
  --border-subtle: var(--sand-6);
  --border: var(--sand-7);
  --text-muted: var(--sand-8);
  --text-secondary: var(--sand-11);
  --text-primary: var(--sand-12);
  --overlay-rgb: 17, 17, 16;
  --page-inset: 28px;
  --text-18: var(--body-text-size, 20px);
  --about-intro-gap: 40px;
  --ts-xs: .75rem;
  --ts-sm: .875rem;
  --ts-base: 1.25rem;
  --ts-lg: 1.125rem;
  --ts-xl: 1.25rem;
  --ts-2xl: 1.5rem;
  --ts-3xl: 2rem;
  --ts-4xl: 2.5rem;
  --ts-5xl: 3rem;
  --tracking-18: .04px;
  --tr-xs: -.2px;
  --tr-sm: -.16px;
  --tr-base: -.16px;
  --tr-lg: var(--tracking-18);
  --tr-xl: -.2px;
  --tr-2xl: -.16px;
  --tr-3xl: -.32px;
  --tr-4xl: -.8px;
  --tr-5xl: -.96px;
  font-family: "Geist", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: var(--bg); color: var(--text-primary); }
button, a { font: inherit; }

.portfolio {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 100vh;
  min-height: 100svh;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: var(--page-inset);
}
.identity {
  display: block;
  width: fit-content;
  flex: none;
  color: inherit;
  text-decoration: none;
}
.avatar-frame { position: relative; width: 24px; height: 24px; }
.avatar-button {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  overflow: hidden;
  place-items: center;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transform: translate(-50%, -50%);
  transition: background 200ms ease, transform 150ms ease;
}
.avatar-button:hover { background: rgba(255, 255, 255, .06); }
.avatar-button:active { transform: translate(-50%, -50%) scale(.97); }
.avatar-button:focus-visible { outline: 2px solid var(--border); outline-offset: 3px; }
.avatar-button video { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.avatar-label {
  position: absolute;
  top: 50%;
  right: calc(100% + 24px);
  color: var(--text-primary);
  font-size: var(--ts-base);
  line-height: 24px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate(4px, -50%);
  transition: opacity 140ms ease-out, transform 180ms cubic-bezier(.22,1,.36,1);
}
.avatar-label-char {
  display: inline-block;
  color: #b79aff;
  opacity: 0;
  filter: blur(3px);
  transform: translateY(4px);
  transition: color 320ms ease-out, opacity 130ms ease-out, filter 140ms ease-out, transform 150ms cubic-bezier(.22,1,.36,1);
  transition-delay: calc(var(--char-index) * 10ms);
}
@media (hover: hover) and (pointer: fine) {
  .avatar-frame:hover .avatar-label { opacity: 1; transform: translate(0, -50%); }
  .avatar-frame:hover .avatar-label-char { color: var(--text-primary); opacity: 1; filter: blur(0); transform: translateY(0); transition-delay: calc((5 - var(--char-index)) * 10ms); }
}
.avatar-button:focus-visible + .avatar-label { opacity: 1; transform: translate(0, -50%); }
.avatar-button:focus-visible + .avatar-label .avatar-label-char { color: var(--text-primary); opacity: 1; filter: blur(0); transform: translateY(0); transition-delay: calc((5 - var(--char-index)) * 10ms); }
.avatar-frame.label-dismissed .avatar-label { opacity: 0; transform: translate(4px, -50%); }
.avatar-frame.label-dismissed .avatar-label-char { color: #b79aff; opacity: 0; filter: blur(3px); transform: translateY(4px); transition-delay: calc(var(--char-index) * 8ms); }
.section-nav { display: flex; align-items: center; gap: 12px; }
.section-tab {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--ts-base);
  line-height: 24px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color 140ms ease;
}
.section-tab:hover, .section-tab.is-active { color: var(--text-primary); }
.section-tab:focus-visible, a:focus-visible { outline: 2px solid var(--border); outline-offset: 3px; }

.page-content { position: relative; display: grid; min-height: 0; }
.content-page[hidden] { display: none; }
.work-page { display: grid; grid-template-rows: minmax(0, 1fr); min-height: 100%; }
.stage { position: relative; min-height: 0; overflow: clip; }
.preview-carousel {
  position: absolute;
  inset: 0;
  touch-action: pan-y;
  user-select: none;
  cursor: grab;
}
.project-band {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  width: max-content;
  gap: var(--band-gap, 0px);
  transform: translate3d(calc(-50% + var(--offset-x, 0px)), -50%, 0);
  transition: transform var(--band-duration, 420ms) cubic-bezier(.22, 1, .36, 1);
  cursor: inherit;
}
.preview-carousel.is-dragging { cursor: grabbing; }
.project-band.is-dragging,
.project-band.is-recentering { transition: none; }
.project-slide {
  --pointer-x: 0px;
  --pointer-y: 0px;
  --pointer-tilt-x: 0deg;
  --pointer-tilt-y: 0deg;
  width: min(60vw, calc(72vh * 1.580681), 1440px);
  aspect-ratio: 2880 / 1822;
  flex: none;
  transform: perspective(1200px) rotateX(var(--pointer-tilt-y)) rotateY(var(--pointer-tilt-x)) translate3d(var(--pointer-x), var(--pointer-y), 0) scale(.88);
  transform-origin: center;
  opacity: .12;
  transition:
    transform var(--band-duration, 420ms) cubic-bezier(.22, 1, .36, 1),
    opacity var(--band-duration, 420ms) cubic-bezier(.22, 1, .36, 1),
    box-shadow var(--band-duration, 420ms) cubic-bezier(.22, 1, .36, 1);
}
.project-slide.is-active {
  transform: perspective(1200px) rotateX(var(--pointer-tilt-y)) rotateY(var(--pointer-tilt-x)) translate3d(var(--pointer-x), var(--pointer-y), 0) scale(1);
  opacity: 1;
  box-shadow: 0 28px 42px -30px rgba(255, 255, 255, .22), 0 12px 24px -18px rgba(0, 0, 0, .75);
}
.preview {
  position: relative;
  inset: 0;
  display: grid;
  width: 100%;
  height: 100%;
  overflow: visible;
  place-items: center;
  background: var(--bg-subtle);
  border-radius: 24px;
  transition: background-color 260ms ease;
}
.project-preview-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  transform: translate3d(0, 24px, 0);
  opacity: 0;
  transition: opacity 1200ms cubic-bezier(.16, 1, .3, 1), transform 1200ms cubic-bezier(.16, 1, .3, 1);
}
.project-preview-video.is-visible { transform: translate3d(0, 0, 0); opacity: 1; }
.project-preview-video.is-instant { transition: none; }
.preview.has-animation .preview-art { display: none; }
.preview.has-animation { background: transparent; }
.preview[data-project-index="1"],
.preview[data-project-index="2"] { background: #fff; }
.preview-art,
.preview-index { display: none; }
.preview.has-animation .preview-index { display: none; }
.project-step {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  width: 48px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.project-step[hidden] { display: none; }
.project-step-previous { left: 0; justify-content: center; }
.project-step-next { right: 0; justify-content: center; }
.project-step-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,.58);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transform: scale(.92);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}
.project-step:hover .project-step-icon,
.project-step:focus-visible .project-step-icon {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.project-step:focus-visible { outline: none; }
.project-step-icon svg {
  display: block;
  width: 40px;
  height: 40px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}
@media (prefers-reduced-motion: reduce) {
  .project-preview-video,
  .project-band,
  .project-slide,
  .project-step-icon { transition-duration: 1ms; }
}
.preview-index {
  position: absolute;
  top: 21px;
  left: 23px;
  z-index: 1;
  color: var(--text-secondary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}
.preview-art { position: relative; width: 62%; height: 62%; transition: transform 300ms cubic-bezier(.2,.7,.2,1); }
.preview:hover .preview-art { transform: scale(1.015); }
.art-panel {
  position: absolute;
  inset: 7% 15% 7% 7%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 12%;
  background: var(--bg-ui);
  box-shadow: 0 18px 40px rgba(var(--overlay-rgb), .4);
}
.art-kicker { font-size: clamp(9px, .9vw, 12px); font-weight: 600; letter-spacing: .12em; }
.art-line { width: 100%; height: 5px; background: var(--border-subtle); }
.art-line.short { width: 66%; }
.art-button { width: 38%; height: 19px; margin-top: 8px; border-radius: 2px; background: var(--sand-9); }
.art-side { position: absolute; top: 17%; right: 2%; display: grid; gap: 11px; width: 18%; }
.art-side i { height: 28px; background: var(--sand-4); }
.art-side i:nth-child(2) { background: var(--sand-5); }
.art-side i:nth-child(3) { background: var(--sand-3); }

.project-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: var(--page-inset); }
.project-footer-controls { display: flex; flex: none; gap: 8px; }
.footer-project-control {
  --highlight-x: 0px;
  --highlight-y: 0px;
  --highlight-opacity: .28;
  display: grid;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 9999px;
  background: radial-gradient(83.33% 150% at 50% 50%, rgba(244,244,244,.04) 0%, rgba(0,0,0,0) 100%);
  color: var(--text-primary);
  box-shadow: 0 0 8px 2px rgba(255,255,255,.05) inset, 0 0 .5px 0 rgba(0,0,0,.4), 0 1px 4px 0 rgba(0,0,0,.4);
  cursor: pointer;
  transition: filter 160ms ease;
}
.footer-project-control { position: relative; overflow: hidden; }
.footer-project-control::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: var(--highlight-opacity); box-shadow: .5px .5px 1px rgba(255,255,255,.72) inset; mask-image: radial-gradient(circle 32px at var(--highlight-x) var(--highlight-y), #000 0%, transparent 100%); transition: opacity 100ms ease; }
.footer-project-control:hover { filter: brightness(1.12); }
.footer-project-control:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
.footer-project-control svg { display: block; width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; shape-rendering: geometricPrecision; }
.project-meta h1 { margin: 0; font-size: var(--ts-base); line-height: 24px; font-weight: 500; letter-spacing: var(--tr-base); }
.project-meta p { margin: 3px 0 0; color: var(--text-secondary); font-size: var(--ts-base); line-height: 24px; }

.text-page { width: min(100%, 600px); justify-self: center; align-self: center; display: grid; gap: var(--about-intro-gap); }
.about-page, .love-page { display: grid; align-items: center; min-height: 100%; }
.text-page h1 { margin: 0; font-size: var(--ts-2xl); line-height: 1.2; font-weight: 500; letter-spacing: var(--tr-2xl); }
.about-copy { max-width: 570px; color: var(--text-secondary); font-size: var(--text-18); line-height: 30px; letter-spacing: var(--tr-lg); }
.about-copy { display: grid; gap: 16px; }
.about-copy p { margin: 0; }
.about-links { display: flex; flex-wrap: wrap; gap: 22px; }
.about-links a { color: var(--text-muted); font-size: var(--ts-sm); text-decoration: none; transition: color 140ms ease; }
.about-links a:hover { color: var(--text-primary); }
.love-list { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; color: var(--text-secondary); font-size: clamp(var(--ts-xl), 3vw, var(--ts-2xl)); line-height: 1.4; letter-spacing: var(--tr-xl); }

@media (max-width: 760px) {
  .project-slide { width: min(72vw, calc(68vh * 1.580681), 1440px); }
}

@media (max-width: 520px) {
  .topbar { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .identity { width: auto; margin-left: auto; }
  .section-nav { width: 100%; justify-content: flex-start; gap: 12px; }
  .project-footer { gap: 12px; }
  .project-meta { min-width: 0; }
  .project-meta h1, .project-meta p { font-size: var(--ts-sm); }
  .project-slide { width: min(calc(100vw - 64px), 84vw, calc(58vh * 1.580681)); }
  .text-page h1 { font-size: var(--ts-xl); }
  .love-list { gap: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .avatar-label { transform: translate(0, -50%); }
  .avatar-label-char { color: var(--text-primary); opacity: 1; filter: none; transform: none; transition: none; }
}