:root {
  color-scheme: dark;

  --text-body-product: #5e5e5e;
  --page-bg: #080808;
  --tile-bg: #190601;
  --tile-bg-dw: #190601;
  --tile-bg-rw: #070E13;
  --tile-bg-cp-pl: #1F0007;
  --tile-bg-cp-77: #1E1C00;
  --tile-bg-bl: #1A0000;
  --tile-bg-tw: #101010;
  --tile-bg-gw: #07110F;
  --tile-bg-twag: #170904;
  --tile-bg-openapp: #F5F6F7;
  --tile-bg-portals: #D7DBE1;
  --tile-bg-side: #efefef;
  --text-body-side-projects: #5e5e5e;
  --text-primary: #ffffff;
  --text-muted: #d3d3d3;

  --page-max-width: 1920px;
  --page-padding-x: 30px;
  --page-padding-x-mobile: 16px;
  --page-gap: 28px;

  --radius-sm: 4px;
  --radius-md: 8px;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  background: var(--page-bg);
  color: var(--text-primary);
  font-family: "Geist", system-ui, -apple-system, BlinkMacSystemFont,
    "SF Pro Text", "Segoe UI", sans-serif;
  letter-spacing: -0.0125em;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  background-color: #8200B5;
  color: #fff;
}

::-moz-selection {
  background-color: #8200B5;
  color: #fff;
}

/* Light placeholder while image loads, then fade in */
.img-load-placeholder {
  background-color: rgba(255, 255, 255, 0.0);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.img-load-placeholder.loaded {
  opacity: 1;
}

.content-group--product .img-load-placeholder {
  background-color: rgba(0, 0, 0, 0.0);
}

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding: 40px var(--page-padding-x) 0; */
  gap: var(--page-gap);
  overflow: hidden;
}

.content {
  width: 100%;
  max-width: var(--page-max-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.content-group {
  padding-left: var(--page-padding-x);
  padding-right: var(--page-padding-x);
}

.content-group--product {
  width: 100vw;
  position: relative;
  background: #fff;
  color: #000;
  box-sizing: border-box;
  padding-bottom: 160px;
  padding-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--page-gap);
}

.content-group--side-projects {
  width: 100vw;
  position: relative;
  background: #f8f8f8;
  color: #000;
  box-sizing: border-box;
  padding-bottom: 160px;
  padding-top: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--page-gap);
}

.content-group--product p {
  color: var(--text-body-product);
}

.content-group--side-projects p {
  color: var(--text-body-side-projects);
}

.content-group--web {
  width: 100vw;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--page-gap);
  padding-bottom: 8rem;
}

.hero {
  width: 100%;
  max-width: var(--page-max-width);
  height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
}

h1 {
  margin: 0;
  font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 4rem); /* ≈64px on desktop */
  letter-spacing: -0.0125em;
}

h3 {
  margin: 0 0 1rem 0;
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 1.75rem); /* ≈64px on desktop */
  letter-spacing: 0em;
}

#web-heading, #product-heading {
  margin: 0 0 1rem 0;
  font-weight: 400;
  font-size: clamp(1.4rem, 3vw, 1.75rem); /* ≈64px on desktop */
  letter-spacing: 0em;
}

.hero-role {
  margin: 0;
  font-weight: 300;
  font-size: clamp(1.125rem, 3vw, 1.75rem); /* ≈28px on desktop */
  color: var(--text-muted);
}

.section-label {
  margin: 0;
  font-size: clamp(1.25rem, 3vw, 1.75rem); /* ≈28px */
  text-align: center;
}

.project-section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--page-gap);
}

.project-rw {
  background: var(--tile-bg-rw);
}

.project-dw {
  background: var(--tile-bg-dw);
}

.project-cp-pl {
  background: var(--tile-bg-cp-pl);
}

.project-cp-77 {
  background: var(--tile-bg-cp-77);
}

.project-bl {
  background: var(--tile-bg-bl);
}

.project-tw {
  background: var(--tile-bg-tw);
}

.project-gw {
  background: var(--tile-bg-gw);
}

.project-twag {
  background: var(--tile-bg-twag);
}

.project-opeanpp {
  background: var(--tile-bg-openapp);
}

.project-portals {
  background: var(--tile-bg-portals);
}

.project-side {
  background: var(--tile-bg-side);
}

.project-header {
  width: 100%;
  max-width: 1280px;
  text-align: center;
  padding-block: 20px;
  margin: 8rem 0 1rem 0;
  padding-left: var(--page-padding-x-mobile);
  padding-right: var(--page-padding-x-mobile);
}

.project-header-small {
  margin-top: 1.5rem
}

.project-header-description {
  width: 100%;
  max-width: 1280px;
  text-align: center;
  padding-block: 20px;
  margin: 1rem 0;
}

.project-description {
  width: 100%;
  text-align: center;
  padding: 4px 20px 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: end;
  justify-content: center;
}

.project-description > * {
  text-align: left;
  width: 50%;
}

.end {
  width: 100%;
  max-width: 800px;
  text-align: center;
}

.project-description p:nth-child(4) {
  margin-top: 1rem;
}

.project-description p:nth-child(3) {
  margin-top: 1rem;
}

.content-group--web strong {
  color: #ffffff;
  font-weight: 500;
}

.content-group--product strong {
  color: #000000;
  font-weight: 500;
}

.content-group--side-projects strong {
  color: #000000;
  font-weight: 500;
}

.content-group--side-projects a {
  color: #000000;
  font-weight: 400;
  text-decoration: underline;
  transition: color 0.3s ease;
}

.content-group--side-projects a:hover {
  color: #8200B5;
}

#game-heading {
  margin-bottom: 8rem;
}

.project-title {
  margin: 0 0 12px;
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3.25rem); /* ≈52px */
}

.project-subtitle {
  margin: 0;
  font-weight: 400;
  line-height: 1.5;
  font-size: clamp(1rem, 2vw, 1.125rem); /* ≈18px */
  color: var(--text-muted);
}

.project-subtitle.end-first {
  margin-top: 6rem;
}

.project-hero {
  width: 100%;
  max-width: none;
  min-height: min(56.25vw, 700px);
  padding: clamp(20px, 3vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-hero picture {
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
  max-width: calc(700px * 16 / 9);
  width: 100%;
  aspect-ratio: 16 / 9;
  /* Force stacking context so overflow:hidden + border-radius clip correctly on iOS Safari */
  position: relative;
  z-index: 0;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.project-hero img,
.project-hero-video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: var(--radius-md);
  display: block;
  max-width: calc(700px * 16 / 9);
  /* Fix Safari ignoring border-radius clipping on img */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-clip-path: inset(0 round var(--radius-md));
  clip-path: inset(0 round var(--radius-md));
}

.project-hero-video {
  overflow: hidden;
  width: auto;
}

.project-mobile-strip {
  width: auto;
  max-width: 100vw;
  position: relative;
  padding-left: var(--page-padding-x);
  padding-right: var(--page-padding-x);
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 28px;
  overflow-y: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.project-mobile-strip * {
  -webkit-user-select: none;
  user-select: none;
}
.project-mobile-strip::selection,
.project-mobile-strip *::selection {
  background: transparent;
  color: transparent;
}
.project-mobile-strip:active {
  cursor: grabbing;
}

@media (hover: none) and (min-width: 768px) {
  .project-mobile-strip {
    overflow-y: hidden;
    overscroll-behavior-y: none;
  }
}

.project-mobile-strip::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.project-mobile-card {
  border-radius: var(--radius-sm);
  padding: 0 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: calc((min(80vh, 680px) - 80px) * (9 / 16) + 80px);
  min-width: calc((580px - 80px) * (9 / 16) + 80px);
  max-width: calc((680px - 80px) * (9 / 16) + 80px);
  height: 80vh;
  max-height: 680px;
  min-height: 580px;
  box-sizing: border-box;
}

/* Workaround: flex + overflow + padding-top/bottom fails in Firefox & Safari;
   use pseudo-elements as flex items instead */
.project-mobile-card::before,
.project-mobile-card::after {
  content: '';
  flex: 0 0 40px;
}

.project-mobile-card picture {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.project-mobile-card img {
  width: auto;
  height: 100%;
  object-fit: contain;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}
.project-mobile-card {
  pointer-events: auto;
}

@media (min-width: 1024px) {
  .hero {
    min-height: 200px;
  }
}

@media (max-width: 768px) {
  .page {
    padding-inline: 20px;
    gap: 32px;
  }

  .content-group {
    padding-left: var(--page-padding-x-mobile);
    padding-right: var(--page-padding-x-mobile);
  }

  .content {
    gap: 0;
  }

  .project-mobile-strip {
    gap: 16px;
    padding-left: var(--page-padding-x-mobile);
    padding-right: var(--page-padding-x-mobile);
  }

  .project-hero {
    padding: 0;
  }

  .project-hero > picture,
  .project-hero > .project-hero-video {
    margin: var(--page-padding-x-mobile);
    width: calc(100% - 2 * var(--page-padding-x-mobile));
  }

  .project-hero img,
  .project-hero-video {
    min-height: 0;
    max-height: none;
  }

  .project-mobile-card {
    width: calc((min(70vh, 400px) - 32px) * (9 / 16) + 32px);
    min-width: calc((280px - 32px) * (9 / 16) + 32px);
    max-width: calc((400px - 32px) * (9 / 16) + 32px);
    height: 70vh;
    max-height: 400px;
    min-height: 280px;
    padding: 0 var(--page-padding-x-mobile);
    overflow: hidden;
  }

  .project-mobile-card::before,
  .project-mobile-card::after {
    flex: 0 0 var(--page-padding-x-mobile);
  }

  .project-mobile-card picture {
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    overflow: hidden;
  }

  .project-mobile-card img {
    width: auto;
    height: 100%;
    max-height: 400px;
  }

  .project-description > * {
    text-align: left;
    width: 100%;
  }

  .project-header-description {
    margin: 0;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .project-header {
    padding-bottom: 0;
  }

  .project-subtitle {
    font-weight: 400;
  }


}