:root {
  --bg: #ffffff;
  --fg: #000000;
  --muted: #888888;
  --card-bg: #d9d9d9;
  --font: 'Geist', system-ui, sans-serif;
  --perspective: 1200px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 12px;
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  /* Hide the scrollbar but keep scrolling functional. */
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/old Edge */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;        /* Chrome/Safari */
}

body {
  overflow-x: hidden;
}

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

/* ---- Chrome ---- */
.chrome {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 32px;
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }

.logo {
  display: block;
  width: 48px;
  height: 77px;
}
.logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.nav {
  display: flex;
  gap: 32px;
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  padding-top: 6px;
}
.nav a { color: var(--fg); }
.nav a:hover { opacity: 0.6; }
.nav .is-current {
  color: var(--muted);
  cursor: default;
  pointer-events: none;
}

/* ---- Active card overlay (bottom-left title, bottom-right date) ---- */
.active-title,
.active-date {
  position: fixed;
  bottom: 0;
  z-index: 90;
  font-weight: 700;
  font-size: 40pt;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
  pointer-events: none;
  text-transform: lowercase;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 32px 24px;
}
@keyframes labelSwap {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.active-title.is-swap,
.active-date.is-swap {
  animation: labelSwap 280ms cubic-bezier(0.2, 0.65, 0.2, 1);
}
.active-title {
  left: 0;
  text-align: left;
  font-weight: 400;
}
.active-date {
  right: 0;
  text-align: right;
  font-weight: 400;
}

/* ---- End-of-gallery CTA ---- */
.end-cta {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 80;
  font-family: var(--font);
  font-weight: 700;
  font-size: 24pt;
  letter-spacing: -0.02em;
  color: var(--fg);
  background: transparent;
  border: 1.5px solid var(--fg);
  padding: 18px 28px;
  text-transform: lowercase;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: background 160ms ease, color 160ms ease;
  white-space: nowrap;
}
.end-cta.is-visible {
  pointer-events: auto;
}
.end-cta:hover {
  background: var(--fg);
  color: var(--bg);
}

/* ---- 3D scene ---- */
.scene {
  position: fixed;
  inset: 0;
  perspective: var(--perspective);
  perspective-origin: 50% 45%;
  overflow: hidden;
  z-index: 1;
}

.world {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* The scroll spacer makes the page tall enough for native scrolling
   to drive the z-camera. Height is set by JS based on card count. */
.scrollspace {
  position: relative;
  width: 100%;
  pointer-events: none;
}

/* ---- Card ---- */
.card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 420px; /* default, overridden inline per-card */
  transform-style: preserve-3d;
  will-change: transform, opacity;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.card-meta {
  display: flex;
  align-items: baseline;
  gap: 24px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}
.card-date {
  flex-shrink: 0;
}
.card-title-label {
  flex: 1 0 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.card-ext {
  flex-shrink: 0;
  margin-left: auto;
}

.card-image {
  width: 100%;
  background: var(--card-bg);
  display: block;
  overflow: hidden;
  cursor: pointer;
  transition: filter 380ms ease;
}
.card:hover .card-image {
  filter: brightness(0.7);
}
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 500ms cubic-bezier(0.2, 0.65, 0.2, 1);
  transform-origin: center;
}
.card:hover .card-image img {
  transform: scale(1.06);
}

/* ---- WERK page responsive tweaks ---- */
@media (max-width: 1024px) {
  .chrome { padding: 24px; }
  .nav { gap: 24px; }
  .active-title,
  .active-date { font-size: 28pt; padding: 0 24px 18px; }
}
@media (max-width: 640px) {
  .chrome { padding: 16px; }
  .logo { width: 36px; height: 58px; }
  .nav { gap: 16px; font-size: 11px; }
  .active-title,
  .active-date {
    font-size: 14pt;
    padding: 0 16px 14px;
    max-width: 55%;
  }
  .end-cta { font-size: 16pt; padding: 14px 22px; }
}

/* ---- Fullscreen image overlay ---- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-out;
  opacity: 0;
  transition: opacity 240ms ease;
}
.overlay.is-open {
  display: flex;
  opacity: 1;
}
#overlay-img {
  display: block;
  user-select: none;
  pointer-events: none;
  max-width: 92vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* ---- NFO page ---- */
@keyframes nfoFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nfo .anim {
  opacity: 0;
  animation: nfoFadeUp 600ms cubic-bezier(0.2, 0.65, 0.2, 1) forwards;
}
@media (prefers-reduced-motion: reduce) {
  .nfo .anim { animation: none; opacity: 1; }
}


.nfo,
.nfo * {
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 9pt !important;
  font-weight: 400 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

.nfo .nfo-name,
.nfo .nfo-label,
.nfo .role h3 {
  font-weight: 700 !important;
}

.nfo {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr;
  gap: 18px;
  padding: 56px 220px 48px;
  line-height: 1.4;
  box-sizing: border-box;
}

.nfo-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 32px;
}
.nfo-name {
  font-weight: 700;
  font-size: var(--t-lg);
  line-height: 1.05;
  margin: 0;
}
.nfo-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 24px;
  font-size: var(--t-sm);
}
.nfo-contact a { color: var(--fg); }
.nfo-contact a:hover { opacity: 0.6; }

.nfo-section {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  border-top: 1px solid #000;
  padding-top: 12px;
}

.nfo-label {
  font-weight: 700;
  font-size: var(--t-sm);
  margin: 0;
}

.nfo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 24px;
}
.nfo-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nfo-grid > p {
  margin: 0;
}

/* Tablet: 2 columns + tighter horizontal padding */
@media (max-width: 1024px) {
  .nfo { padding: 180px 80px 48px; }
  .nfo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile: stack to 1 column */
@media (max-width: 640px) {
  .nfo { padding: 140px 32px 48px; gap: 24px; }
  .nfo-section {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .nfo-grid,
  .nfo-grid-2 {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.role h3 {
  font-weight: 700;
  font-size: var(--t-sm);
  margin: 0 0 2px;
}
.role-date {
  color: var(--muted);
  margin: 0 0 4px;
  font-size: var(--t-sm);
}
.role-title {
  font-weight: 700;
  font-size: var(--t-sm);
  margin: 0 0 2px;
}
.role-desc {
  margin: 0;
  font-size: var(--t-sm);
}

.nfo-clients {
  margin: 0;
  font-size: var(--t-sm);
}

.nfo-foot {
  align-self: end;
  font-weight: 700;
  font-size: var(--t-sm);
}