/* ==========================================================
   FONTS
   ========================================================== */
@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/Helvetica_Now_Display_W05_Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/Helvetica_Now_Display_W05_It.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/Helvetica.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica';
  src: url('../fonts/Helvetica-Oblique.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Helvetica Compressed';
  src: url('../fonts/Helvetica-Compressed.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.contact-link {
  display: inline;
  position: static;
  text-decoration: none;
  cursor: pointer;
}

.contact-link:hover {
  text-decoration: underline;
}

.contact-link:hover::after {
  content: " ↗";
}

/* ==========================================================
   RESET
   Replaces the couple of generic rules index.html was pulling
   from Webflow's own webflow.css (icon font + w-* utility
   classes stripped out entirely — none of your markup uses them).
   ========================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ----------------------------------------------------------
   RESPONSIVE SCALE
   Design is authored at 1512px. --scale is 1 (full size) at
   1512px and above, shrinks proportionally down to the tablet
   breakpoint (834px), then freezes at its minimum (~0.5516)
   below that. Add dedicated tablet/mobile rules in the
   @media (max-width: 833px) block at the bottom of this file.
   ---------------------------------------------------------- */
:root {
  --scale-max-vw: 1512px;
  --scale-min-vw: 834px;
  --scale: clamp(calc(var(--scale-min-vw) / var(--scale-max-vw)), calc(100vw / var(--scale-max-vw)), 1);
  /* Minimum space to reserve on the left for side-nav + project list +
     file-link flyout, so gallery-panel/description-panel never overlap
     it. Raise this if text still gets covered; lower it to give the
     panels more room. */
  --projects-reserve: 740px;
}

html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
  background-color: #fff;
  color: #333;
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: clamp(12px, calc(14px * var(--scale)), 14px);
  line-height: 100%;
}
img {
  max-width: 100%;
  vertical-align: middle;
  display: inline-block;
}
a {
  background-color: transparent;
}

/* ==========================================================
   PAGE / TITLE
   ========================================================== */
.page-wrapper {
  position: relative;
  min-height: 100vh;
}

.title {
  margin-top: calc(32px * var(--scale));
  position: absolute;
  inset: 0% 0% auto;
  z-index: 1;
}

.name {
  position: absolute;
  left: 45%;
  width: calc(600px * var(--scale));
  text-align: left;
  white-space: normal;
  line-height: 1.4;
}

/* ==========================================================
   WELCOME PANEL — fullscreen background video
   ========================================================== */
.welcome-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none; /* purely a backdrop — clicks pass through to nav/content above it */
  overflow: hidden;
}
.welcome-panel.is-open {
  display: block;
}
.welcome-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.welcome-active *:not(
  .gallery-overlay, .gallery-overlay *,
  .gallery-overlay-drawings, .gallery-overlay-drawings *,
  .videos-overlay, .videos-overlay *,
  .nav-invert, .nav-invert *
) {
  color: #ffffff !important;
}

body.welcome-active .nav-reset {
  color: #fff !important;
  font-family: 'Helvetica', Arial, sans-serif !important;
  font-weight: 400 !important;
  opacity: 1 !important;
  border: calc(2px * var(--scale)) solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(2px * var(--scale)) calc(2px * var(--scale));
  line-height: 1;
  width: fit-content;
  text-transform: uppercase;
  /* transform removed from here */
}

body.welcome-active .nav-reset span {
  transform: translateY(calc(1px * var(--scale)));
  display: inline-block;
}

body.welcome-active .nav-reset:hover {
  color: #00f;
  background-color: #1aff00;
}


/* ==========================================================
   TRASH BIN
   ========================================================== */
.trash-bin {
  position: fixed;
  bottom: calc(24px * var(--scale));
  left: calc(24px * var(--scale));
  width: calc(56px * var(--scale));
  height: calc(56px * var(--scale));
  z-index: 150; /* above overlays (100) so dragged windows visibly pass behind it, below nav (160) */
  pointer-events: none; /* it's a drop target checked via rect math, not a click target */
  opacity: 0.95;
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.trash-bin.is-drag-target {
  opacity: 1;
  transform: scale(1.1);
}

/* ==========================================================
   SIDE NAV
   ========================================================== */
.side-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: calc(220px * var(--scale));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: calc(40px * var(--scale));
  padding: calc(24px * var(--scale)) calc(20px * var(--scale));
  box-sizing: border-box;
  z-index: 160;
}
.nav-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: calc(28px * var(--scale));
}
.nav-group-label {
  font-size: clamp(9px, calc(11px * var(--scale)), 11px);
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: calc(8px * var(--scale));
}
.nav-link {
  display: block;
  padding: calc(4px * var(--scale)) 0;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  font-family: 'Helvetica', Arial, sans-serif;
}
.nav-link:hover,
.nav-link.is-active {
  color: #00f;
}
.nav-link.is-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}

.nav-buttons {
  position: fixed;
  top: calc(24px * var(--scale));
  right: calc(24px * var(--scale));
  display: flex;
  gap: calc(12px * var(--scale)); /* actual working gap, change freely */
  z-index: 160;
}

/* Reset — back to original, no border, just sits in the side-nav flow */
.nav-reset {
  font-size: clamp(9px, calc(11px * var(--scale)), 11px);
  opacity: 0.5;
  cursor: pointer;
  color: #000;
  text-decoration: none;
}

/* Invert — separate, fixed top-right, bordered, own font */
.nav-invert {
  font-family: 'Helvetica', Arial, sans-serif;
  font-size: clamp(9px, calc(11px * var(--scale)), 11px);
  opacity: 1;
  cursor: pointer;
  color: #333;
  opacity: 1;
  text-decoration: none;
  padding: calc(6px * var(--scale)) calc(6px * var(--scale));
  background: #ffffff;
  border-radius: calc(8px * var(--scale));
  box-shadow: inset calc(-4px * var(--scale)) calc(-4px * var(--scale)) calc(12px * var(--scale)) rgba(255, 255, 255, 1), calc(4px * var(--scale)) calc(4px * var(--scale)) calc(8px * var(--scale)) rgba(199, 199, 201, 0.4);

  position: fixed;
  top: calc(24px * var(--scale));
  right: calc(24px * var(--scale));
  z-index: 160;
}
.nav-invert:hover {
  color: #00f;
  background-color: #1aff00;
  box-shadow: inset 4px 4px 8px rgba(199, 199, 201, 0.4);
}
.nav-invert span {
  transform: translateY(calc(2px * var(--scale))); /* nudge down — increase/decrease to taste */
  display: inline-block;
}

html.site-inverted {
  filter: invert(1);
}

.home-content {
  margin-left: calc(220px * var(--scale));
}


/* ==========================================================
   INSTAGRAM HANDLE LINK
   left offset matches .projects-window's padding-left so it
   lines up on the same horizontal position as the Projects list;
   top is set at runtime by positionInstagramLink() in app.js to
   align with the Instagram nav-group entry.
   ========================================================== */
.instagram-handle-link {
  position: fixed;
  left: calc(200px * var(--scale));
  color: #333;
  text-decoration: none;
  z-index: 150;
  display: none; /* Hidden until clicked */
}

.instagram-handle-link.is-open {
  display: inline-block; /* Shown when active */
}

.instagram-handle-link:hover {
  color: #00f;
}
.instagram-handle-link:hover::after {
  content: " ↗";
}

.instagram-handle-link.is-open {
  display: inline-block;
  transform: translateY(calc(4px * var(--scale))); /* Use positive px to lower, negative (e.g., -2px) to raise */
}

/* ==========================================================
   IMAGE GALLERY OVERLAY
   ========================================================== */
.gallery-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
.gallery-overlay.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-window {
  width: calc(640px * var(--scale));
  height: calc(420px * var(--scale));
  min-width: calc(400px * var(--scale));
  min-height: calc(280px * var(--scale));
  max-width: 80vh;
  max-height: 60vh;
  background: #fff;
  border-radius: calc(8px * var(--scale));
  box-shadow: inset calc(-4px * var(--scale)) calc(-4px * var(--scale)) calc(12px * var(--scale)) rgba(255, 255, 255, 1), calc(4px * var(--scale)) calc(4px * var(--scale)) calc(8px * var(--scale)) rgba(199, 199, 201, 0.4);
  display: flex;
  flex-direction: column;
  position: relative;
  pointer-events: auto;
}
.gallery-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(16px * var(--scale));
  height: calc(16px * var(--scale));
  cursor: nwse-resize;
  touch-action: none;
}
.gallery-resize-handle::after {
  content: '';
  position: absolute;
  bottom: calc(3px * var(--scale));
  right: calc(3px * var(--scale));
  width: calc(8px * var(--scale));
  height: calc(8px * var(--scale));
  border-right: calc(2px * var(--scale)) solid #00f;
  border-bottom: calc(2px * var(--scale)) solid #00f;
}
.gallery-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(8px * var(--scale)) calc(4px * var(--scale));
  border-bottom: 1px solid #ddd;
}
.gallery-title {
  color: #00f;
}
.gallery-titlebar-right {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--scale));
}
.icon-close {
  color: #00f;
  padding-right: calc(4px * var(--scale));
  cursor: default;
  border-radius: calc(6px * var(--scale));
  padding: calc(2px * var(--scale)) calc(4px * var(--scale));
  cursor: pointer;
  transition: color 0.1s ease, background-color 0.1s ease, box-shadow 0.1s ease;
}

.icon-close:hover {
  background-color: #1AFF00;
  box-shadow: inset calc(-4px * var(--scale)) calc(4px * var(--scale)) calc(8px * var(--scale)) calc(3px * var(--scale)) rgba(0, 0, 0, 0.15);
}
.gallery-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.gallery-filelist {
  width: 35%;
  overflow-y: auto;
  border-right: 1px solid #ddd;
}
.gallery-filename {
  padding: calc(2px * var(--scale)) calc(2px * var(--scale));
  cursor: pointer;
}
.gallery-filename.is-selected {
  background-color: #1aff00;
}
.gallery-img-source {
  display: none;
}
.gallery-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background-position: 0 0;
  background-size: cover;
}
.gallery-preview-img {
  max-width: 90%;
  max-height: 80%;
  object-fit: cover;
}
.gallery-year {
  margin-top: calc(2px * var(--scale));
  margin-left: auto;
  font-size: clamp(12px, calc(14px * var(--scale)), 14px);
  line-height: 100%;
  color: #00f;
}

/* ==========================================================
   TECHNICAL DRAWINGS OVERLAY
   ========================================================== */
.gallery-overlay-drawings {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
}
.gallery-overlay-drawings.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}
.gallery-window-drawings {
  transform: translate(calc(120px * var(--scale)), calc(-80px * var(--scale))); /* left + down from center */
}

.gallery-window-drawings {
  width: calc(640px * var(--scale));
  height: calc(420px * var(--scale));
  min-width: calc(400px * var(--scale));
  min-height: calc(280px * var(--scale));
  max-width: 80vh;
  max-height: 60vh;
  background: #fff;
  border-radius: calc(8px * var(--scale));
  box-shadow: inset calc(-4px * var(--scale)) calc(-4px * var(--scale)) calc(12px * var(--scale)) rgba(255, 255, 255, 1), calc(4px * var(--scale)) calc(4px * var(--scale)) calc(8px * var(--scale)) rgba(199, 199, 201, 0.4);
  display: flex;
  flex-direction: column;
  position: relative;
  pointer-events: auto;
}
.gallery-resize-handle-drawings {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(16px * var(--scale));
  height: calc(16px * var(--scale));
  cursor: nwse-resize;
  touch-action: none;
}
.gallery-resize-handle-drawings::after {
  content: '';
  position: absolute;
  bottom: calc(3px * var(--scale));
  right: calc(3px * var(--scale));
  width: calc(8px * var(--scale));
  height: calc(8px * var(--scale));
  border-right: calc(2px * var(--scale)) solid #00f;
  border-bottom: calc(2px * var(--scale)) solid #00f;
}
.gallery-titlebar-drawings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(8px * var(--scale)) calc(4px * var(--scale));
  border-bottom: 1px solid #ddd;
}
.gallery-titlebar-right-drawings {
  display: flex;
  align-items: center;
  gap: calc(12px * var(--scale));
}
.gallery-body-drawings {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.gallery-nav-arrows-drawings {
  display: flex;
  gap: calc(16px * var(--scale));
  padding: calc(8px * var(--scale)) calc(16px * var(--scale)) calc(4px * var(--scale));
}
.gallery-arrow-prev-drawings,
.gallery-arrow-next-drawings {
  color: #00f;
  cursor: pointer;
  font-size: calc(16px * var(--scale));
  user-select: none;
}
.gallery-filelist-drawings {
  display: none; /* hidden data source only — not a visible list */
}
.gallery-img-source-drawings {
  display: none;
}
.gallery-preview-drawings {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: 0 calc(16px * var(--scale)) calc(16px * var(--scale));
  background-position: center;
  background-size: cover;
}
.gallery-year-drawings {
  margin-top: calc(2px * var(--scale));
  margin-left: auto;
  font-size: clamp(12px, calc(14px * var(--scale)), 14px);
  line-height: 100%;
  color: #00f;
}

/* ==========================================================
   MODELS OVERLAY
   ========================================================== */
.models-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
}
.models-overlay.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.models-window {
  transform: translate(calc(-120px * var(--scale)), calc(80px * var(--scale))); /* left + down from center */
}

.models-window {
  width: calc(640px * var(--scale));
  height: calc(480px * var(--scale));
  min-width: calc(400px * var(--scale));
  min-height: calc(320px * var(--scale));
  max-width: 80vh;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}
.models-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(8px * var(--scale)) calc(4px * var(--scale));
  border-bottom: 1px solid #ddd;
}
.models-resize-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: calc(16px * var(--scale));
  height: calc(16px * var(--scale));
  cursor: nwse-resize;
  touch-action: none;
}

.models-resize-handle::after {
  content: '';
  position: absolute;
  bottom: calc(3px * var(--scale));
  right: calc(3px * var(--scale));
  width: calc(8px * var(--scale));
  height: calc(8px * var(--scale));
  border-right: calc(2px * var(--scale)) solid #00f;
  border-bottom: calc(2px * var(--scale)) solid #00f;
}
.models-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.models-viewer {
  flex: 1;
  width: 100%;
  --poster-color: transparent; /* avoids model-viewer's default grey loading backdrop */
}
model-viewer::part(default-progress-bar) {
  display: none;

}
.models-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(16px * var(--scale));
  padding: calc(8px * var(--scale)) calc(16px * var(--scale)) calc(16px * var(--scale));
}
.models-dots {
  display: flex;
  gap: calc(8px * var(--scale));
}
.models-dot {
  width: calc(8px * var(--scale));
  height: calc(8px * var(--scale));
  border-radius: 50%;
  background: #ddd;
  cursor: pointer;
}
.models-dot.is-active {
  background: #00f;
}

/* ==========================================================
   VIDEOS OVERLAY (phone-frame reel)
   ========================================================== */

.videos-overlay {
  display: none;
  position: fixed;
  inset: 0;
  justify-content: flex-end;
  align-items: center;
  padding-right: calc(48px * var(--scale));
  z-index: 20;
  pointer-events: none;
}

.videos-overlay.is-open {
  display: flex;
}

.videos-window {
  position: relative !important;
  width: min(40vh, calc(420px * var(--scale)));
  aspect-ratio: 1000 / 2039;
  pointer-events: auto;
  overflow: hidden;
}

.reel-feed.videos-screen {
  position: absolute !important;
  inset: auto !important; /* Removes inset: 0 override */
  top: 7.8% !important;
  left: 2.5% !important;   /* Increase to move right, decrease to move left */
  width: 94.4% !important;   /* Decrease to make thinner */
  height: 84.4% !important;
  border-radius: 8% !important;
  z-index: 5;
  background: #000;
}

.reel-feed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.reel-feed::-webkit-scrollbar {
  display: none;
}

.reel-slide {
  position: relative;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.reel-slide .video-embed {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
}

.video-embed video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
}

.videos-frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 10;
  pointer-events: none;
}

.videos-close-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
  background-color: #fbfbfb;
  border-radius: calc(12.5px * var(--scale));
  box-shadow: inset calc(6px * var(--scale)) calc(6px * var(--scale)) calc(8px * var(--scale)) rgba(174, 174, 192, 0.15), calc(-4px * var(--scale)) calc(-4px * var(--scale)) calc(8px * var(--scale)) rgba(255, 255, 255, 1);
  padding: calc(6px * var(--scale)) calc(12px * var(--scale));
  transition: color 0.15s ease, background-color 0.15s ease;
}

.videos-close-text:hover {
  color: #00f;
  background-color: #1aff00;
}

@media (max-width: 833px) {
  .videos-overlay {
    justify-content: center;
  }
  .videos-window {
    width: 75vw;
  }
}

/* ==========================================================
   PROJECTS OVERLAY
   ========================================================== */
.projects-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.projects-overlay.is-open {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  pointer-events: auto;
}
.projects-window {
  display: flex;
  flex-direction: row;
  gap: calc(40px * var(--scale));
  padding-left: calc(200px * var(--scale));
  width: 100%;
}
.projects-list {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  flex-flow: wrap;
  min-width: calc(220px * var(--scale));
}
.projects-list .project-items {
  display: flex;
  flex-direction: column;
  gap: calc(4px * var(--scale));
}
.project-name-link,
.project-file-link {
  display: block;
  width: 100%;
  padding: calc(1px * var(--scale)) calc(2px * var(--scale));
  box-sizing: border-box;
  border-radius: 0px;
  text-decoration: none;
  color: #333;
}
.project-name-link.is-active,
.project-file-link.is-active {
  background-color: #1aff00;
}
.project-name-link.is-focused,
.project-file-link.is-focused {
  outline: calc(2px * var(--scale)) solid #00f;
  outline-offset: calc(2px * var(--scale));
}
.project-details {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  flex-direction: row;
  gap: calc(40px * var(--scale));
  padding-left: calc(20px * var(--scale));
}
.project-item.is-active .project-details {
  display: flex;
}
.projects-files {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  flex: 0 auto;
  gap: calc(4px * var(--scale));
}
.projects-content {
  display: flex;
  flex-direction: column;
  gap: calc(16px * var(--scale));
}

.description-panel {
  display: none;
  position: fixed;
  right: calc(40px * var(--scale));
  width: min(calc(100vw / 1.6), calc(100vw - calc(var(--projects-reserve) * var(--scale))));
  bottom: calc(calc(40px * var(--scale)) + (100vh / 1.6) + calc(48px * var(--scale)));
  box-sizing: border-box;
}
.description-panel.is-open {
  display: block;
}

.gallery-panel {
  display: none;
  position: fixed;
  bottom: calc(40px * var(--scale));
  right: calc(40px * var(--scale));
  width: min(calc(100vw / 1.6), calc(100vw - calc(var(--projects-reserve) * var(--scale))));
  height: calc(100vh / 1.6);
  overflow-y: scroll;
  overflow-x: hidden;
  background: #fbfbfb;
  border-radius: calc(12px * var(--scale));
  box-shadow: inset calc(12px * var(--scale)) calc(12px * var(--scale)) calc(24px * var(--scale)) rgba(174, 174, 192, 0.1), calc(-12px * var(--scale)) calc(-12px * var(--scale)) calc(14px * var(--scale)) rgba(255, 255, 255, 0.5);
  padding: calc(32px * var(--scale));
  box-sizing: border-box;
}
.gallery-panel.is-open {
  display: block;
}
.gallery-panel::-webkit-scrollbar {
  width: calc(16px * var(--scale));
}
.gallery-panel::-webkit-scrollbar-track {
  background: transparent;
  margin-top: calc(32px * var(--scale));
  margin-bottom: calc(32px * var(--scale));
}
.gallery-panel::-webkit-scrollbar-thumb {
  background-color: #333;
  border-radius: calc(99px * var(--scale));
  border-style: solid;
  border-color: transparent;
  border-top-width: 0;
  border-bottom-width: 0;
  border-left-width: calc(6px * var(--scale));
  border-right-width: calc(6px * var(--scale));
  background-clip: padding-box;
}
.gallery-panel::-webkit-scrollbar-thumb:hover {
  background-color: #000;
  background-clip: padding-box;
}
@supports (-moz-appearance: none) {
  .gallery-panel {
    scrollbar-color: #7e7e7e transparent;
    scrollbar-width: thin;
  }
}

.gallery-grid,
.gallery-panel .grid-items {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: calc(160px * var(--scale));
  grid-auto-flow: dense;
  gap: calc(16px * var(--scale));
  width: 100%;
  box-sizing: border-box;
}
.gallery-grid > *,
.gallery-grid .gallery-grid-item,
.gallery-panel .grid-item {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.gallery-grid img,
.gallery-panel .grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-grid > *:nth-child(3n + 1),
.gallery-panel .grid-item:nth-child(3n + 1) {
  grid-column: span 2;
  grid-row: span 2;
}
.gallery-grid > *:nth-child(5n + 2),
.gallery-panel .grid-item:nth-child(5n + 2) {
  grid-column: span 2;
}
.gallery-grid > *:nth-child(7n + 4),
.gallery-panel .grid-item:nth-child(7n + 4) {
  grid-row: span 2;
}

/* ==========================================================
   MOBILE DROP — physics-driven falling .glb viewport
   Hidden entirely on desktop/tablet; see the @media block below
   for the layout that switches it on below 833px. Stacking order
   (back to front): canvas (physics render) -> blur layer (purely
   visual, pointer-events:none) -> top/bottom text zones. The text
   zones sit on top in the DOM/z-index, so a finger over them hits
   the text div first — that's what keeps dragging out of the top
   and bottom zones without any manual coordinate math in JS.
   ========================================================== */
.mobile-drop {
  display: none;
}
.mobile-drop-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none; /* we handle the drag ourselves — stop the browser scrolling/zooming on it */
}
.mobile-drop-blur-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition: background-color 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease;
}
.mobile-drop.is-active .mobile-drop-blur-layer {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.mobile-drop-text {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 3;
  padding: 24px;
  box-sizing: border-box;
  color: #9a9a9a;
  font-family: 'Helvetica', Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  pointer-events: none;
}
.mobile-drop-text-top {
  top: 0;
}
.mobile-drop-name,
.mobile-drop-role {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
  pointer-events: auto;
}
.mobile-drop-text-bottom {
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mobile-drop-handle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mobile-drop-instagram {
  color: #9a9a9a;
  font-size: 30px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  pointer-events: auto;
  padding: 6px 0; /* larger touch target without shifting the visible text */
}
.mobile-drop-email-icon {
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: #9a9a9a;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  pointer-events: auto;
  padding: 6px; /* larger touch target without shifting the visible icon */
}
.mobile-drop-email-line {
  display: block;
  padding-top: 16px;
  width: 100%;
  box-sizing: border-box;
  font-size: 30px;
  font-weight: 700;
  color: #9a9a9a;
  white-space: nowrap;
  letter-spacing: 0;
  text-align: justify;
  text-align-last: justify;
  pointer-events: auto;
  cursor: pointer;
}

.mobile-drop-click-text {
  display: none;
}

.mobile-drop-text.is-clicked .mobile-drop-click-text {
  display: block;
  padding-top: 64px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  color: #9a9a9a;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  pointer-events: auto;

}

/* ==========================================================
   TABLET & BELOW (max-width: 833px)
   Dedicated layout rules for the tablet breakpoint and down go
   here. Until these are filled in, --scale simply freezes at
   its minimum (~0.5516) at 834px and stays there as the
   viewport keeps narrowing, so nothing below the breakpoint
   breaks outright — it just stops shrinking further.
   ========================================================== */
@media (max-width: 833px) {
  .side-nav,
  .nav-invert,
  .title,
  .instagram-handle-link,
  .trash-bin {
    display: none !important;
  }
  .mobile-drop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    background: #ffffff;
  }
}