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

body {
  font-family: var(--font-body);
  overflow-x: hidden;
  overflow-y: auto;
  overflow-anchor: none;
  /* Prevent browser auto-scroll when content changes */
  background: #000; }

.video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; }

/* Background video with blur transition */
#video-background-container {
  transition: filter 0.6s ease, -webkit-filter 0.6s ease; }

#video-background-container video {
  opacity: 1 !important;
  filter: none !important;
  object-fit: cover;
  width: 100%;
  height: 100%; }

/* ======================================================
   DRY POSITIONING SYSTEM WITH FLUID SPACE VARIABLES
   ====================================================== */
/* Positioning variables using fluid typography system */
:root {
  --ui-margin-primary: var(--space-s);
  /* 2rem equiv on desktop, fluid scaling */
  --ui-margin-secondary: var(--space-xs);
  /* 1rem equiv on mobile, fluid scaling */
  --ui-font-primary: var(--step--1);
  /* 14px equiv, fluid scaling */
  --ui-font-secondary: var(--step-0);
  /* 16px equiv, fluid scaling */ }

/* Base UI element positioning classes */
.ui-element-base {
  position: fixed;
  z-index: 100;
  background: none;
  border: none;
  font-family: var(--font-heading);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.5);
  transition: opacity 0.6s ease, visibility 0.6s ease, color 0.3s ease; }

.ui-element-base:hover {
  color: rgba(255, 255, 255, 0.9);
  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.9); }

/* Positioning utility classes */
.ui-top-left {
  top: var(--ui-margin-primary);
  left: var(--ui-margin-primary); }

.ui-top-right {
  top: var(--ui-margin-primary);
  right: var(--ui-margin-primary); }

.ui-bottom-right {
  bottom: var(--ui-margin-primary);
  right: var(--ui-margin-primary); }

/*
 * TOP-LEFT MUTUAL EXCLUSIVITY: only one of .location-label or .help-btn is
 * visible at a time, enforced by the scroll handler in home.js.
 */
.location-label {
  font-size: var(--ui-font-secondary);
  text-transform: lowercase;
  opacity: 1;
  visibility: visible; }

.location-label.fade-out {
  opacity: 0;
  visibility: hidden; }

.help-btn {
  cursor: pointer;
  font-size: var(--ui-font-secondary);
  color: rgba(255, 255, 255, 0.4);
  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.4);
  text-decoration: none;
  opacity: 0;
  visibility: hidden; }

.help-btn.visible {
  opacity: 1;
  visibility: visible; }

.volume-btn {
  cursor: pointer;
  font-size: var(--ui-font-primary);
  text-transform: lowercase;
  opacity: 1;
  visibility: visible; }

.volume-btn.fade-out {
  opacity: 0;
  visibility: hidden; }

.about-btn {
  cursor: pointer;
  font-size: var(--ui-font-primary);
  text-transform: lowercase;
  text-decoration: none;
  transition: color 0.3s ease; }

.filter-container {
  position: fixed;
  top: calc(var(--ui-margin-primary) * 2.25);
  right: var(--ui-margin-primary);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: calc(var(--ui-margin-primary) * 0.75);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease; }

.filter-container.visible {
  opacity: 1;
  visibility: visible; }

.type-filters {
  display: flex;
  flex-direction: column;
  gap: 0.5rem; }

.type-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-heading);
  font-size: var(--ui-font-primary);
  color: rgba(255, 255, 255, 0.5);
  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.5);
  letter-spacing: 0.1em;
  text-transform: lowercase;
  text-align: right;
  padding: 0;
  transition: color 0.3s ease; }

.type-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.9); }

.type-btn.active {
  color: white;
  -webkit-text-stroke: 0.5px white; }

.project-item.filtered-out {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none; }

.project-item.filtered-hidden {
  display: none; }

.scroll-tint {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #000;
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  will-change: opacity; }

.content-overlay {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8em;
  padding: 100vh 0 50vh 0;
  min-height: 100vh; }

.project-item {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 4px;
  text-decoration: none;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  transition: opacity 0.4s ease, transform 0.4s ease, margin 0.4s ease;
  opacity: 1;
  transform: translateY(0); }

.project-title.long-title {
  font-size: clamp(60px, 14vw, 160px); }

.project-title {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(100px, 22vw, 240px);
  font-weight: 400;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1.1;
  -webkit-text-stroke: 4px #fff;
  text-shadow: none;
  transition: opacity 0.4s ease-out, text-shadow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-left: -4px;
  background: none;
  opacity: 0; }

.project-title[data-processed] {
  opacity: 1; }

.project-subtitle {
  font-family: var(--font-body);
  font-size: clamp(12px, 1.2vw, 16px);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.45);
  text-transform: lowercase;
  letter-spacing: 0.05em;
  margin-top: 0.3em;
  margin-left: 6px;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: none; }

.project-item:hover .project-subtitle {
  opacity: 1; }

.project-item:hover .project-title {
  --shadow-base: clamp(3px, 0.075em, 21px);
  text-shadow: calc(var(--shadow-base) * 0.25) calc(var(--shadow-base) * 0.25) 0 var(--primary-soft), calc(var(--shadow-base) * 0.5) calc(var(--shadow-base) * 0.5) 0 var(--core), calc(var(--shadow-base) * 0.75) calc(var(--shadow-base) * 0.75) 0 var(--primary), var(--shadow-base) var(--shadow-base) 0 var(--primary-dark); }

.page-blurred #video-background-container {
  filter: blur(8px) brightness(0.7) !important;
  -webkit-filter: blur(8px) brightness(0.7) !important; }

.page-blurred .scroll-tint {
  opacity: 0.4 !important; }

.project-title .word {
  display: inline-block;
  white-space: nowrap; }

.project-title .tall {
  display: inline-block;
  font-size: 1.08em;
  vertical-align: baseline;
  line-height: 0.9;
  will-change: transform; }

.project-title .small {
  display: inline-block;
  font-size: 0.94em;
  will-change: transform; }

.project-title .space {
  display: inline-block;
  width: 0.3em; }

/* @keyframes stumble is defined in main.scss (loaded on all pages) */
.project-item.hover-active .project-title span {
  animation: stumble var(--stumble-duration, 2.5s) ease-in-out infinite;
  animation-delay: var(--stumble-delay, 0s); }

@media (max-width: 768px) {
  :root {
    --ui-margin-primary: var(--space-2xs);
    --ui-font-primary: var(--step--2);
    --ui-font-secondary: var(--step--1); }
  .filter-container {
    top: calc(var(--ui-margin-primary) * 1.5);
    gap: calc(var(--ui-margin-primary) * 0.5); }
  .type-filters {
    gap: calc(var(--ui-margin-primary) * 0.2); }
  .type-btn {
    font-size: var(--ui-font-primary); }
  .content-overlay {
    gap: 6em;
    padding: 100vh 0 15vh 0; }
  .project-title {
    font-size: clamp(60px, 18vw, 120px);
    -webkit-text-stroke: 2px #fff; }
  .project-title.long-title {
    font-size: clamp(40px, 12vw, 90px); }
  .project-subtitle {
    font-size: clamp(10px, 2.5vw, 14px);
    margin-left: 4px; } }

@media (prefers-reduced-motion: reduce) {
  .project-item.hover-active .project-title span {
    animation: none !important; }
  .project-title span {
    transform: none !important; }
  .project-item {
    transition: opacity 0.2s ease; }
  .project-item.filtered-out {
    transform: none; } }