/*
  style.css — v2
  All visual design for the macOS-style portfolio.
*/


/* =====================================================================
  BOOT / LOADING SCREEN
====================================================================== */

#boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  transition: opacity 0.6s ease;
}

#boot-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

#boot-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

#boot-bar-track {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
}

#boot-bar-fill {
  height: 100%;
  width: 0%;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 2px;
  transition: width 0.1s linear;
}

/* While loading screen is visible, hide the desktop so nothing flashes */
body.booting #desktop {
  opacity: 0;
}

body.booting #desktop * {
  animation: none !important;
  transition: none !important;
}

#desktop {
  transition: opacity 0.8s ease;
}


/* =====================================================================
  RESET & BASE
====================================================================== */

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

html {
  overflow: hidden;
  /* Paint the wallpaper on the root element so it shows behind the
     browser's own toolbar on mobile (the grey bar at the bottom). */
  background: url('assets/IMAGES/<BACKGROUND_0>.webp') center center / cover no-repeat fixed;
  background-color: #000;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI',
               'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  width: 100vw;
  height: 100dvh;
  user-select: none;
  cursor: default;
}


/* =====================================================================
  DESKTOP / WALLPAPER
====================================================================== */

#desktop {
  position: fixed;
  inset: 0;
  user-select: none;
  -webkit-user-select: none;
  background: url('assets/IMAGES/<BACKGROUND_0>.webp') center center / cover no-repeat;
}

/* Subtle vignette — darkens the edges, focuses the center */
#desktop::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center,
    transparent 40%,
    rgba(0, 0, 0, 0.45) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Film grain overlay */
#grain-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
}


/* =====================================================================
  MENU BAR
====================================================================== */

#menu-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 28px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 12px;
  z-index: 99999;
  color: rgb(255, 255, 255);
  font-size: 13px;
  letter-spacing: 0.01em;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

.menu-bar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menu-bar-right {
  display: flex;
  align-items: center;
  gap: 2px;
}

.menu-apple { display: flex; align-items: center; }
.menu-apple img { height: 18px; width: auto; display: block; filter: brightness(0) invert(1); }
.menu-app-name { font-weight: 800; letter-spacing: -0.01em; }
.menu-item { cursor: default; font-weight: 500; }
.menu-status-icon { display: flex; align-items: center; padding-top: 3px; }
.menu-status-icon img { width: 28px; height: auto; display: block; filter: brightness(0) invert(1); }
.menu-status-icon:nth-child(2) img { width: 34px; }

#date-display,
#clock {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

#date-display { margin-right: 2px; margin-left: 8px; }

.menu-status-icon:last-of-type {
  margin-right: 0;
}



/* =====================================================================
  WEATHER WIDGET
====================================================================== */

#weather-widget {
  position: absolute;
  top: 48px;
  left: 16px;
  width: 324px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  padding: 12px 0 10px;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  z-index: 10;
  user-select: none;
}

/* Two-column layout: left stacks city+temp, right stacks icon+condition */
.weather-row1 {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin-bottom: 10px;
  padding: 0 14px;
}

/* Left column: city on top, big temp below */
.weather-left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.weather-city {
  font-size: 14px;
  font-weight: 700;
}

.weather-arrow {
  font-style: normal;
  font-size: 12px;
}

.weather-temp {
  font-size: 52px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -2px;
  margin-top: 2px;
  font-family: inherit;
}

/* Right column: condition+HL at bottom, icon just above it */
.weather-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  text-align: right;
  gap: 4px;
}

.weather-icon-large {
  line-height: 1;
}

.weather-condition {
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
}

.weather-hl {
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  opacity: 0.85;
}

/* Hourly row */
.weather-hourly {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  width: 100%;
  padding: 8px 6px 0;
}

.weather-hour {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.weather-hour-time {
  font-size: 10px;
  opacity: 0.75;
  font-weight: 500;
  white-space: nowrap;
}

.weather-hour-icon {
  line-height: 1;
}

.weather-img-large {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.weather-img-small {
  width: 16px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.weather-img-small[src*="cloud.sun"],
.weather-img-large[src*="cloud.sun"] {
  transform: scale(1.5);
}

.weather-hour-temp {
  font-size: 12px;
  font-weight: 600;
}


/* =====================================================================
  DESKTOP ICONS — system icons (top-right) & project icons (scattered)
====================================================================== */

/* Container for the system icons in the top-right */
#desktop-icons {
  position: absolute;
  top: 48px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
}

/*
  All desktop icons share this style whether they're system icons
  (About, Contact, Tools) or scattered project icons.
*/
.desktop-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 7px 6px 6px;
  border-radius: 8px;
  cursor: pointer;
  width: 76px;
  text-align: center;
  transition: background 0.15s;
  /* Make sure scattered icons are above the wallpaper layers */
  position: relative;
  z-index: 10;
}

.desktop-icon:active {
  transform: scale(0.97);
}

/* Scattered project icons sit at absolute positions on the desktop */
.desktop-icon.project-icon {
  position: absolute;
  width: 106px;
}

.desktop-icon.project-icon .icon-graphic:not(.icon-still) {
  width: 57px;
  height: 57px;
}

.desktop-icon.project-icon .icon-graphic:not(.icon-still) svg,
.desktop-icon.project-icon .icon-graphic:not(.icon-still) img {
  width: 57px;
  height: 57px;
}

.desktop-icon.project-icon .icon-still {
  max-height: 79px;
}

.desktop-icon.project-icon .icon-still img {
  max-height: 79px;
}

.desktop-icon.project-icon .icon-label {
  font-size: 12px;
  max-width: 106px;
}

/* Projects folder — 25% bigger than base system icons */
.desktop-icon[data-target="win-overview"] {
  width: 96px;
}

.desktop-icon[data-target="win-overview"] .icon-graphic {
  width: 70px;
  height: 70px;
}

.desktop-icon[data-target="win-overview"] .icon-graphic svg,
.desktop-icon[data-target="win-overview"] .icon-graphic img {
  width: 70px;
  height: 70px;
}

.desktop-icon[data-target="win-overview"] .icon-label {
  font-size: 13px;
  max-width: 96px;
}

.icon-graphic {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-graphic.icon-still {
  width: 100%;
  height: auto;
  border-radius: 11px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.55));
}

/* The actual SVG inside .icon-graphic */
.icon-graphic svg,
.icon-graphic img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  display: block;
  border-radius: 11px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.55));
}

/* Still image thumbnails on desktop project icons — auto height so each image
   keeps its own aspect ratio (landscape, portrait, or square) */
.icon-still {
  width: 100%;
  height: auto;
  max-height: 72px;
  overflow: hidden;
}

.icon-still img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72px;
  object-fit: cover;
  object-position: center top;
}

.icon-still img {
  width: 100%;
  height: auto;
  max-height: 72px;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 11px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.55));
}

.icon-label {
  color: #ffffff;
  font-size: 11px;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,0.95), 0 0 10px rgba(0,0,0,0.8);
  word-break: break-word;
  line-height: 1.25;
  max-width: 96px;
}


/* =====================================================================
  WINDOWS — shared base styles
====================================================================== */

.window {
  position: absolute;
  width: 560px;
  min-width: 320px;
  min-height: 220px;
  background: rgba(28, 28, 36, 0.84);
  backdrop-filter: blur(40px) saturate(160%);
  -webkit-backdrop-filter: blur(40px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 25px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 24px 64px rgba(0, 0, 0, 0.65),
    0 8px 20px rgba(0, 0, 0, 0.4);
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: windowOpen 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              top 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.25s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  /* ensure windows sit above grain/vignette layers */
  z-index: 100;
}

.window.open {
  display: flex;
}

@keyframes windowOpen {
  from { opacity: 0; transform: scale(0.94) translateY(10px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}

.window-small { width: 340px; min-height: 260px; }

/* Projects window — light/white macOS style */
#win-overview {
  width: 880px;
  height: min(720px, 88vh);
  background: #ffffff;
  backdrop-filter: blur(40px) saturate(120%);
  -webkit-backdrop-filter: blur(40px) saturate(120%);
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 24px 64px rgba(0, 0, 0, 0.45),
    0 8px 20px rgba(0, 0, 0, 0.25);
}

#win-overview .window-titlebar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: none;
  z-index: 10;
  padding: 20px 14px 10px 20px;
}
#win-overview .window-title { color: #1c1c1e; }

#win-overview .finder-layout {
  height: 100%;
}

#win-overview .finder-sidebar {
  width: 175px;
  padding-top: 40px;
  margin: 8px 0 8px 8px;
  border-radius: 17px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.06),
    0 2px 10px rgba(0, 0, 0, 0.05);
  background: #ffffff;
}

#win-overview::before { display: none; }

.overview-content {
  flex: 1;
  overflow-y: auto;
  padding: 12px 18px 16px 16px;
  color: #1c1c1e;
  background: #ffffff;
}

.overview-content::-webkit-scrollbar { width: 6px; }
.overview-content::-webkit-scrollbar-track { background: transparent; }
.overview-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.14);
  border-radius: 3px;
}

#overview-sidebar .finder-sidebar-item {
  gap: 3px;
}

#overview-sidebar .finder-type-dot {
  margin-left: auto;
  flex-shrink: 0;
}

#overview-sidebar .finder-sidebar-item.active {
  background: rgba(0, 0, 0, 0.07);
}

#overview-sidebar .finder-sidebar-item.active .finder-sidebar-name {
  color: #0071e3;
}

#overview-sidebar .overview-type-icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  object-fit: contain;
  opacity: 0.55;
  position: relative;
  top: 1px;
}

#overview-sidebar .finder-sidebar-item.active .overview-type-icon {
  filter: invert(27%) sepia(97%) saturate(1500%) hue-rotate(196deg) brightness(98%) contrast(101%);
  opacity: 1;
}

/* Per-project detail windows */
.proj-detail-window { width: 700px; min-height: 540px; }

/* ── PROJECT FINDER WINDOW ──────────────────────────────────────────── */
.win-finder {
  width: min(860px, 90vw);
  height: min(640px, 82vh);
  background: #ffffff;
  backdrop-filter: blur(40px) saturate(120%);
  -webkit-backdrop-filter: blur(40px) saturate(120%);
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 24px 64px rgba(0, 0, 0, 0.45),
    0 8px 20px rgba(0, 0, 0, 0.25);
}

.win-finder .window-titlebar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: none;
  z-index: 10;
  padding: 20px 14px 10px 20px;
}
.win-finder .window-title { display: none; }

.finder-sidebar-label {
  font-size: 15px;
  font-weight: 700;
  color: rgba(77, 77, 77, 1);
  letter-spacing: -0.01em;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}

.finder-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  background: #ffffff;
  gap: 0;
  position: relative;
  /* stretch to fill full window height since titlebar is now absolute */
  height: 100%;
}

.finder-sidebar {
  width: 210px;
  flex-shrink: 0;
  overflow-y: auto;
  padding: 8px 0;
  position: relative;

  /* Floating sidebar: same margin on all sides, content clears traffic lights */
  margin: 8px 0 8px 8px;
  padding-top: 40px;
  background: #ffffff;
  border-radius: 17px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.06),
    0 2px 10px rgba(0, 0, 0, 0.05);
}
.finder-sidebar::-webkit-scrollbar { width: 0; }

/* Gradient overlay — absolutely positioned over the sidebar, outside scroll flow */
.win-finder::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 8px;
  width: 210px;
  height: 56px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 30%, transparent 100%);
  border-radius: 17px 17px 0 0;
  z-index: 10;
  pointer-events: none;
}



.finder-detail-gradient {
  position: absolute;
  top: 0;
  left: 210px;
  right: 0;
  height: 10px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 24px),
                      linear-gradient(to bottom, black 30%, transparent 100%);
  -webkit-mask-composite: destination-in;
  mask-image: linear-gradient(to right, transparent 0%, black 24px),
              linear-gradient(to bottom, black 30%, transparent 100%);
  mask-composite: intersect;
  border-radius: 0 25px 0 0;
  z-index: 11;
  pointer-events: none;
}

.overview-detail-gradient {
  left: 175px;
}

.finder-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 4px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  user-select: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}
.finder-section-header svg { transition: transform 0.18s; fill: #8e8e93; opacity: 0.8; }
.finder-section-header.collapsed svg { transform: rotate(-90deg); }
.finder-section-items.collapsed { display: none; }

.finder-sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px;
  margin: 0 6px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #1c1c1e;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  transition: background 0.1s;
  user-select: none;
}
.finder-sidebar-item:hover { background: rgba(0, 0, 0, 0.06); }
.finder-sidebar-item.active { background: rgba(0, 0, 0, 0.07); }
.finder-sidebar-item.active .finder-sidebar-name { color: #0071e3; }

.finder-sidebar-thumb {
  width: 42px;
  height: 28px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}
.finder-sidebar-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: 15px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

.finder-type-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.finder-detail {
  flex: 1;
  overflow-y: scroll;
  background: #ffffff;
  padding-right: 10px;
}
.finder-detail::-webkit-scrollbar { width: 6px; }
.finder-detail::-webkit-scrollbar-track { background: transparent; margin-top: 12px; margin-bottom: 44px; }
.finder-detail::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0);
  border-radius: 3px;
  transition: background 0.3s;
}
.finder-detail:hover::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); }
.finder-detail::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.35); }

.finder-video-wrap {
  margin: 8px 8px 0 8px;
  width: calc(100% - 16px);
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  flex-shrink: 0;
  flex-grow: 0;
  border-radius: 17px;
  position: relative;
}
.finder-video-wrap iframe { width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity 0.4s ease; }
.finder-video-wrap iframe.loaded { opacity: 1; }

/* Loading bar — glowing sweep across top of video while iframe loads */
.finder-video-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%;
  height: 5px;
  border-radius: 0 3px 3px 0;
  background: rgba(255, 255, 255, 0.95);
  animation: video-load-bar 1.4s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
}
.finder-video-wrap:has(iframe.loaded)::before { display: none; }

@keyframes video-load-bar {
  0%   { left: -40%; width: 40%; opacity: 1; }
  60%  { left: 80%;  width: 40%; opacity: 1; }
  100% { left: 110%; width: 40%; opacity: 0; }
}
.finder-video-link { display: block; width: 100%; height: 100%; position: relative; text-decoration: none; }
.finder-video-link img { width: 100%; height: 100%; object-fit: cover; display: block; }
.finder-video-link-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: rgba(0,0,0,0.35);
  color: #fff; font-size: 13px; font-weight: 600; font-family: -apple-system, sans-serif;
  transition: background 0.15s;
}
.finder-video-link:hover .finder-video-link-overlay { background: rgba(0,0,0,0.18); }
.finder-video-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111114;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.28);
  font-size: 13px;
  font-family: -apple-system, sans-serif;
}

.finder-project-info { padding: 16px 20px 24px; }

.finder-project-title {
  font-size: 15px;
  font-weight: 700;
  color: rgba(77, 77, 77, 1);
  margin: 0 0 6px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}
.finder-project-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}
.finder-project-badge {
  padding: 2px 8px;
  border-radius: 17px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  flex-shrink: 0;
}

.finder-badge-commercial  { background: rgba(239, 68,  68,  0.12); color: #dc2626; border: 1px solid rgba(239, 68,  68,  0.2); }
.finder-badge-short-film  { background: rgba(34,  197, 94,  0.12); color: #16a34a; border: 1px solid rgba(34,  197, 94,  0.2); }
.finder-badge-music-video { background: rgba(168, 85,  247, 0.12); color: #9333ea; border: 1px solid rgba(168, 85,  247, 0.2); }
.finder-badge-documentary { background: rgba(249, 115, 22,  0.12); color: #ea580c; border: 1px solid rgba(249, 115, 22,  0.2); }
.finder-badge-vr-film     { background: rgba(6,   182, 212, 0.12); color: #0891b2; border: 1px solid rgba(6,   182, 212, 0.2); }
.finder-badge-brand       { background: rgba(245, 158, 11,  0.12); color: #d97706; border: 1px solid rgba(245, 158, 11,  0.2); }

.finder-project-role {
  font-size: 13px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

.finder-project-details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.fpd-row {
  display: flex;
  gap: 8px;
  font-size: 13px;
  color: #3c3c43;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  line-height: 1.65;
}

.fpd-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.5);
  min-width: 64px;
  flex-shrink: 0;
}

.finder-project-desc {
  font-size: 13px;
  line-height: 1.65;
  color: #3c3c43;
  font-family: -apple-system, sans-serif;
  margin: 0 0 16px;
}
.finder-hero-still {
  width: 100%;
  height: auto;
  border-radius: 6px;
  display: block;
  cursor: zoom-in;
  transition: opacity 0.15s;
  margin-bottom: 6px;
}

.finder-hero-still:hover { opacity: 0.85; }

.finder-stills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  cursor: zoom-in;
}

/* Each cell holds the fixed aspect ratio; img fills it */
.finder-still-cell {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 6px;
  cursor: zoom-in;
}

.finder-still-cell.span-2 {
  grid-column: span 2;
}

.finder-still {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.15s;
}

.finder-still:hover { opacity: 0.85; }

.finder-posters-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(0,0,0,0.38);
  margin: 16px 0 6px;
}

.finder-posters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  max-width: 70%;
  cursor: zoom-in;
}

.finder-poster-cell {
  border-radius: 6px;
  cursor: zoom-in;
  overflow: hidden;
}

.finder-poster {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity 0.15s;
}

.finder-poster:hover { opacity: 0.85; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7);
  user-select: none;
}

.finder-empty-state {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8e8e93;
  font-size: 13px;
  font-family: -apple-system, sans-serif;
}


/* ── TITLE BAR ─────────────────────────────────────────────────────── */

.window-titlebar {
  cursor: default;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  user-select: none;
  flex-shrink: 0;
}



.window-title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: -0.01em;
  flex: 1;
  text-align: center;
  padding-right: 52px;
}


/* ── TRAFFIC LIGHTS ────────────────────────────────────────────────── */

.traffic-lights { display: flex; gap: 8px; align-items: center; }

.tl-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  cursor: default;
  transition: filter 0.15s, transform 0.1s;
  background: #c8c8c8;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tl-red    { background: #ff5f57; }
.tl-yellow { background: #febc2e; }
.tl-green  { background: #28c840; }

.tl-dot:hover { filter: brightness(1.1); }

.traffic-lights:hover .tl-red::after    { content: '×'; }
.traffic-lights:hover .tl-yellow::after { content: '−'; }
.traffic-lights:hover .tl-green::after  { content: '+'; }

.tl-dot::after {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 13px;
  font-weight: 900;
  color: rgba(255,255,255,0.9);
  line-height: 1;
  margin-top: -1.5px;
}


/* ── WINDOW CONTENT ────────────────────────────────────────────────── */

.window-content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 30px 20px 20px;
  color: rgba(255, 255, 255, 0.85);
}

.window-content::-webkit-scrollbar { width: 6px; }
.window-content::-webkit-scrollbar-track { background: transparent; margin-top: 28px; margin-bottom: 44px; }
.window-content::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: 3px;
}




/* Maximized state */
.window.maximized {
  top: 28px !important;
  left: 0 !important;
  width: 100vw !important;
  height: calc(100dvh - 28px) !important;
  border-radius: 0 !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}


/* =====================================================================
  PROJECTS WINDOW
====================================================================== */

.projects-intro {
  font-size: 11px;
  color: #8e8e93;
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 11px;
}

.project-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 9px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.project-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  border-color: rgba(0, 0, 0, 0.18);
}

.project-card:active {
  transform: translateY(-1px) scale(0.98);
}

.project-thumb {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  background: #e5e5ea;
}

.project-thumb-placeholder {
  width: 100%;
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: #f2f2f7;
}

.project-info {
  padding: 9px 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.project-info .finder-project-title {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 0 2px;
}

.project-info .finder-project-meta {
  font-size: 11px;
  margin-bottom: 0;
  gap: 5px;
}

.project-info .finder-project-meta {
  overflow: hidden;
  flex-wrap: nowrap;
}

.project-card-role {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.project-info .finder-project-badge {
  font-size: 10px;
  padding: 1px 6px;
}

.project-title {
  font-size: 12px;
  font-weight: 600;
  color: #1c1c1e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
}

.project-year {
  font-size: 11px;
  color: #8e8e93;
  font-family: -apple-system, sans-serif;
}

.project-role {
  font-size: 11px;
  color: #8e8e93;
  font-family: -apple-system, sans-serif;
  font-style: italic;
}

.project-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
  font-family: -apple-system, sans-serif;
}

.badge-short-film  { background: rgba(124,58,237,0.1);  color: #6d28d9; border: 1px solid rgba(124,58,237,0.18); }
.badge-commercial  { background: rgba(2,132,199,0.1);   color: #0369a1; border: 1px solid rgba(2,132,199,0.18); }
.badge-music-video { background: rgba(225,29,72,0.1);   color: #be123c; border: 1px solid rgba(225,29,72,0.18); }


/* =====================================================================
  PER-PROJECT DETAIL WINDOWS
====================================================================== */

/* No padding — video goes edge-to-edge at the top */
.proj-window-content {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 16:9 video area at the top of the window */
.proj-video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  flex-shrink: 0;
  position: relative;
}

.proj-video-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Shown when no video URL has been added yet */
.proj-video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #0a0a0a;
  color: rgba(255,255,255,0.25);
  font-size: 13px;
}

.proj-video-placeholder span {
  font-size: 36px;
  opacity: 0.4;
}

/* Horizontal scroll strip of still images */
.proj-stills-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 14px;
  background: rgba(0,0,0,0.35);
  flex-shrink: 0;
  scrollbar-width: none;
}

.proj-stills-strip::-webkit-scrollbar { display: none; }

.proj-still {
  height: 72px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
  cursor: zoom-in;
  transition: transform 0.15s, opacity 0.15s;
  border: 1px solid rgba(255,255,255,0.08);
}

.proj-still:hover {
  transform: scale(1.04);
  opacity: 0.9;
}

/* Text details below the stills */
.proj-details {
  padding: 16px 20px 20px;
  overflow-y: auto;
  flex: 1;
}

.proj-details-title {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}

.proj-details-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.proj-details-year {
  font-size: 12px;
  color: rgba(255,255,255,0.35);
}

.proj-details-desc {
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255,255,255,0.68);
}


/* =====================================================================
  NOTES — ABOUT ME WINDOW
  Matches the Projects window: clean white/light macOS style.
====================================================================== */

/* Window background — same white as Projects */
#win-about {
  width: 640px;
  height: 680px;
  min-height: 420px;
  background: #ffffff;
  backdrop-filter: blur(40px) saturate(120%);
  -webkit-backdrop-filter: blur(40px) saturate(120%);
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 24px 64px rgba(0, 0, 0, 0.45),
    0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Title bar — same light style as Projects */
#win-about .window-titlebar {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

#win-about .window-title {
  color: #1c1c1e;
}

/* The two-panel layout: sidebar + writing area */
.notes-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* ── LEFT SIDEBAR ──────────────────────────────────────────────────── */
.notes-sidebar {
  width: 200px;
  flex-shrink: 0;
  background: #ffffff;
  border-right: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.notes-sidebar-header {
  padding: 12px 14px 8px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.notes-sidebar-header-title {
  font-size: 13px;
  font-weight: 700;
  color: #1c1c1e;
}

.notes-sidebar-header-count {
  font-size: 11px;
  color: #8e8e93;
}

.notes-section-label {
  padding: 6px 14px 3px;
  font-size: 11px;
  font-weight: 700;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.notes-sidebar-item {
  padding: 8px 14px;
  cursor: pointer;
  border-radius: 8px;
  margin: 0 6px 2px;
  transition: background 0.12s;
}

.notes-sidebar-item:hover {
  background: rgba(0, 0, 0, 0.05);
}

.notes-sidebar-item.active {
  background: #fdf3b0;
}

.notes-sidebar-item-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
}

.notes-sidebar-item-title {
  font-size: 13px;
  font-weight: 600;
  color: #1c1c1e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notes-sidebar-item.active .notes-sidebar-item-title {
  color: #1c1c1e;
}

.notes-sidebar-item-preview {
  font-size: 11px;
  color: #8e8e93;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.notes-sidebar-item.active .notes-sidebar-item-preview {
  color: #8e8e93;
}

.notes-sidebar-date {
  font-size: 11px;
  color: #8e8e93;
  flex-shrink: 0;
}

.notes-sidebar-item.active .notes-sidebar-date {
  color: #8e8e93;
}

/* ── NOTES BODY (right panel) ────────────────────────────────────── */
.notes-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #ffffff;
}

/* Formatting toolbar (decorative) */
.notes-toolbar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 5px 10px;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  flex-shrink: 0;
}

.notes-toolbar-btn {
  padding: 3px 7px;
  border-radius: 5px;
  font-size: 13px;
  color: #3a3a3c;
  cursor: default;
  border: 1px solid transparent;
  background: transparent;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  line-height: 1.4;
  letter-spacing: 0;
}

.notes-toolbar-btn.ntb-bold   { font-weight: 700; }
.notes-toolbar-btn.ntb-italic { font-style: italic; font-weight: 400; }
.notes-toolbar-btn.ntb-underline { text-decoration: underline; }

.notes-toolbar-sep {
  width: 1px;
  height: 14px;
  background: rgba(0, 0, 0, 0.18);
  margin: 0 6px;
}

/* The content area — clean white, no lines */
.notes-paper {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 28px 28px;
  background: #ffffff;
  line-height: 1.6;
  color: #1c1c1e;
  user-select: none;
  cursor: default;
}

.notes-paper::-webkit-scrollbar { width: 6px; }
.notes-paper::-webkit-scrollbar-track { background: #ffffff; margin-top: 12px; margin-bottom: 44px; }
.notes-paper::-webkit-scrollbar-thumb { background: #c7c7cc; border-radius: 3px; }

.notes-title-text {
  font-size: 22px;
  font-weight: 700;
  color: #1c1c1e;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  line-height: 1.3;
}

.notes-role-text {
  font-size: 11px;
  color: #8e8e93;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 10px;
  margin-bottom: 0;
}

.notes-typing-line {
  font-size: 22px;
  font-weight: 700;
  color: #1c1c1e;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
  line-height: 1.3;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}
.notes-paper[data-panel="awards"] .notes-typing-line {
  font-size: 16px;
}

.notes-typing-cursor {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  background: #1c1c1e;
  margin-left: 2px;
  vertical-align: middle;
  border-radius: 1px;
  animation: notes-blink 0.8s step-start infinite;
}

@keyframes notes-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.notes-hint-line {
  font-size: 15px;
  font-weight: 700;
  color: rgba(77, 77, 77, 1);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  margin-bottom: 16px;
  line-height: 1.4;
}

.notes-body-text {
  font-size: 13px;
  color: #3a3a3c;
  line-height: 1.6;
}

/* Apple Notes checklist rows */
.cv-section-header {
  font-size: 12px;
  font-weight: 600;
  color: #1c1c1e;
  margin: 16px 0 6px;
  letter-spacing: 0.02em;
}
.cv-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.cv-check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.cv-check-circle {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid #c7c7cc;
  margin-top: 1px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checked-circle {
  background: #f5b800;
  border-color: #f5b800;
}
.checked-circle::after {
  content: '';
  display: block;
  width: 5px;
  height: 9px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) translate(-1px, -1px);
}
.cv-check-content {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cv-check-title {
  font-size: 13px;
  color: #1c1c1e;
  line-height: 1.4;
}
.cv-check-meta {
  font-size: 11.5px;
  color: #8e8e93;
  line-height: 1.35;
}
.cv-check-desc {
  font-size: 11.5px;
  color: #3a3a3c;
  line-height: 1.35;
  margin-top: 1px;
}
.cv-check-label {
  font-size: 13px;
  color: #3a3a3c;
  line-height: 1.55;
}

/* Interests spacing */
.notes-interest + .notes-interest {
  margin-top: 12px;
}

/* Photo placeholder inside Notes */
.notes-photo-hero {
  width: 100%;
  border-radius: 9px;
  object-fit: cover;
  display: block;
  cursor: pointer;
}
.notes-photo-hero:hover { opacity: 0.85; }

.notes-photo-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.notes-photo-grid img {
  width: 100%;
  object-fit: cover;
  border-radius: 9px;
  display: block;
  cursor: pointer;
}


/* =====================================================================
  CONTACT WINDOW
====================================================================== */

.contact-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 200px;
  gap: 0;
}

.contact-heading {
  font-size: 26px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.03em;
  margin-bottom: 6px;
}

.contact-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.42);
  margin-bottom: 26px;
}

.contact-links { display: flex; flex-direction: column; gap: 10px; }

.contact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  font-size: 13px;
  transition: background 0.15s, border-color 0.15s;
}

.contact-link:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.15);
  color: #fff;
}

.contact-icon { font-size: 18px; }


/* =====================================================================
  TOOLS & SKILLS WINDOW
====================================================================== */

/* ── Photos Window ────────────────────────────────────────────────── */
#win-photos {
  width: 720px;
  height: 520px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 24px 64px rgba(0, 0, 0, 0.45),
    0 8px 20px rgba(0, 0, 0, 0.25);
}
#win-photos .window-titlebar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: none;
  z-index: 10;
  padding: 20px 14px 10px 20px;
}
#win-photos .window-title { color: #1c1c1e; }

.photos-layout {
  display: flex;
  padding: 0 !important;
  overflow: hidden;
  background: #ffffff;
  position: relative;
  height: 100%;
}

.photos-sidebar {
  width: 170px;
  min-width: 170px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 17px;
  box-shadow:
    0 1px 4px rgba(0, 0, 0, 0.06),
    0 2px 10px rgba(0, 0, 0, 0.05);
  overflow-y: auto;
  margin: 8px 0 8px 8px;
  padding: 40px 0 12px;
  flex-shrink: 0;
}

.photos-sidebar-section-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(0, 0, 0, 0.5);
  padding: 10px 14px 4px;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", sans-serif;
}

.photos-sidebar-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.photos-sidebar-item {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  padding: 2px 10px;
  border-radius: 6px;
  margin: 0 6px;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  transition: background 0.1s;
  user-select: none;
}

.photos-sidebar-item:hover { background: rgba(0, 0, 0, 0.06); }

.photos-sidebar-item.active {
  background: rgba(0, 0, 0, 0.07);
  color: #0071e3;
}

.photos-sidebar-list:first-of-type .photos-sidebar-item:first-child {
  background: rgba(0, 0, 0, 0.07);
  color: #0071e3;
}


#win-photos::before { display: none; }

.photos-main-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: transparent;
  display: flex;
  flex-direction: column;
}

.photos-main-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
  pointer-events: none;
  z-index: 2;
}

.photos-main {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  background: #ffffff;
}

.photos-intro {
  font-size: 11px;
  font-weight: 700;
  color: #8e8e93;
  margin: 0;
  padding: 10px 14px 8px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  position: relative;
  z-index: 3;
}

.photos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.photo-cell {
  aspect-ratio: 1 / 1;
  background: #e5e5ea;
  border-radius: 4px;
  overflow: hidden;
}

.photo-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* =====================================================================
  BIN OF IDEAS WINDOW
====================================================================== */

.win-trash {
  width: min(680px, 92vw);
  height: min(620px, 82vh);
}


.bin-canvas {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #fff;
  min-height: 580px;
}
.win-trash::before { display: none; }

.win-trash .window-titlebar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom: none;
  z-index: 10;
}

.bin-canvas::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  pointer-events: none;
  z-index: 5;
}

.bin-item {
  position: absolute;
  top: var(--y, 40px);
  left: var(--x, 40px);
  width: var(--w, 180px);
  transform: rotate(var(--rot, 0deg));
  transform-origin: center center;
  background: #fff;
  padding: 6px 6px 26px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.13);
  transition: transform 0.15s ease, box-shadow 0.15s ease, z-index 0s;
  z-index: 1;
  cursor: default;
}
.bin-item:hover {
  transform: rotate(var(--rot, 0deg)) scale(1.05);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  z-index: 10;
}
.bin-item img {
  width: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}
.bin-caption {
  font-size: 11px;
  color: #777;
  font-style: italic;
  margin-top: 7px;
  text-align: center;
  line-height: 1.4;
}
.bin-item-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.bin-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  color: #aaa;
  font-style: italic;
  pointer-events: none;
}


/* =====================================================================
  DOCK
====================================================================== */

#dock-container {
  position: fixed;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  padding: 0;
}

#dock {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  cursor: pointer;
  padding: 10px 10px 7px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 18px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.12),
    0 8px 32px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

.dock-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}

.dock-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease-out,
              filter 0.15s ease;
}

/* SVGs inside the dock icon */
.dock-icon svg,
.dock-icon img {
  width: 46px;
  height: 46px;
  object-fit: contain;
  display: block;
  filter: none;
}

/* Bin icon needs a small bump up */
.dock-item[title="Bin"] .dock-icon img {
  width: 52px;
  height: 52px;
}

/* Instagram and LinkedIn PNGs have internal transparent padding — compensate */
.dock-item[title="Instagram"] .dock-icon img,
.dock-item[title="LinkedIn"] .dock-icon img {
  width: 58px;
  height: 58px;
}

/* Magnification on hover */
.dock-item:hover .dock-icon {
  transform: scale(1.15) translateY(-4px);
}

/* Adjacent icon magnification (ripple effect) */
.dock-item:hover + .dock-item .dock-icon,
.dock-item:has(+ .dock-item:hover) .dock-icon {
  transform: scale(1.07) translateY(-2px);
}

/* Tooltip label */
.dock-label {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: rgba(40,40,52,0.92);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 6px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 1;
}

.dock-item:hover .dock-label {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* Open-window dot indicator */
.dock-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.2s;
  margin-top: 2px;
}

.dock-dot.active {
  background: rgba(0, 0, 0, 0.55);
}

.dock-divider {
  width: 1px;
  height: 34px;
  background: rgba(255,255,255,0.13);
  margin: 0 3px;
  align-self: center;
  margin-bottom: 5px;
}


/* =====================================================================
  UTILITY
====================================================================== */

.dragging-window * { cursor: grabbing !important; }
.dragging-window .window { transition: none !important; }
.dragging-icon,
.dragging-icon *   { cursor: grabbing !important; }
.resizing-window * { cursor: se-resize !important; }
.resizing-window .window { transition: none !important; }
.selecting        { cursor: default; }

/* Kill native browser drag on all desktop icons and everything inside them */
.desktop-icon, .desktop-icon * { -webkit-user-drag: none; user-drag: none; }
/* Images inside icons must not receive pointer events — the div handles them */
.desktop-icon img, .desktop-icon span { pointer-events: none; }

/* Selected desktop icon highlight — macOS style */
.desktop-icon.selected .icon-graphic,
.desktop-icon.selected .icon-still {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 14px;
}

.desktop-icon.selected .icon-label {
  background: rgba(60, 60, 70, 0.85);
  border-radius: 6px;
  padding: 2px 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Rubber-band selection rectangle */
#selection-box {
  position: fixed;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  pointer-events: none;
  z-index: 9999;
  display: none;
}

@keyframes dockBounce {
  0%   { transform: scale(1)    translateY(0); }
  30%  { transform: scale(1.3)  translateY(-16px); }
  60%  { transform: scale(0.95) translateY(0); }
  80%  { transform: scale(1.05) translateY(-4px); }
  100% { transform: scale(1)    translateY(0); }
}

.dock-bouncing .dock-icon {
  animation: dockBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* =====================================================================
  RESPONSIVE — mobile fallback
====================================================================== */

@media (max-width: 600px) {
  .window           { width: calc(100vw - 20px) !important; left: 10px !important; }
  #desktop-icons    { display: none; }
  .desktop-icon.project-icon { display: none; }
  .dock-icon        { width: 42px; height: 42px; }
  .dock-icon svg,
  .dock-icon img    { width: 38px; height: 38px; }

  /* Window sidebars: narrower to give content more space */
  .finder-sidebar { width: 130px; }

  /* Overview/Projects filter sidebar: compact on mobile */
  #win-overview .finder-sidebar { width: 140px !important; font-size: 9px; margin: 4px 0 4px 4px !important; }
  #win-overview .finder-sidebar-label { display: none; }
  #win-overview::before { width: 148px; }
  .overview-detail-gradient { left: 148px; }
  #win-overview .overview-content { padding: 8px 6px 12px 6px; }

  /* Photos window: narrower sidebar, 2-column grid */
  .photos-sidebar { width: 100px !important; min-width: 100px !important; font-size: 11px; margin: 4px 0 4px 4px !important; }
  .photos-grid { grid-template-columns: repeat(2, 1fr); }
  #win-photos { height: 650px; }
  #win-photos .finder-sidebar-label { display: none; }

  /* Project list window sidebar: hide title text, bigger thumbnails */
  .win-finder .finder-sidebar-label { display: none; }
  .win-trash .finder-sidebar-label  { display: block; }
  .win-finder .finder-sidebar { width: 105px; }
  .win-finder .finder-sidebar-name { display: none; }
  .win-finder .finder-sidebar-thumb { width: 70px; height: 46px; }
  .win-finder .finder-sidebar-item { padding: 3px 6px; gap: 4px; margin: 0 4px; }

  /* Fix gradients to align with the new 105px sidebar width */
  .win-finder::before { width: 105px; }
  .finder-detail-gradient { left: 105px; }

  /* Notes window: shorter on mobile */
  #win-about { height: 650px !important; }
  #win-about.maximized { height: calc(100dvh - 28px) !important; }
  .notes-hint-line { display: none; }

  /* Notes sidebar: compact on mobile */
  .notes-sidebar              { width: 100px; }
  .notes-sidebar-date         { display: none; }
  .notes-sidebar-header-title { font-size: 12px; }
  .notes-sidebar-header-count { display: none; }
  .notes-section-label        { font-size: 11px; padding: 5px 8px 2px; }
  .notes-sidebar-item         { padding: 6px 8px; margin: 0 3px 2px; }
  .notes-sidebar-item-title   { font-size: 11px; }
  .notes-sidebar-item-preview { display: none; }

  /* Shrink typing title so it fits on one line without wrapping */
  .notes-typing-line { font-size: 15px; }

  /* Bigger invisible tap area covering red + yellow buttons */
  .tl-red, .tl-yellow { position: relative; }
  .tl-red::before, .tl-yellow::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
  }


  /* Dock sits behind windows by default on mobile; tap background raises it */
  #dock-container { z-index: 50; }
  body.dock-exposed #dock-container { z-index: 200000; }

  /* Menu bar: hide low-priority items */
  .menu-item-view,
  .menu-item-window,
  .menu-status-icon[title="Search"] { display: none; }

  /* On very narrow screens also hide File to prevent menu bar overflow */
  @media (max-width: 400px) {
    .menu-item { display: none; }
  }

  /* Dock: left side, vertically centered */
  #dock-container {
    z-index: 99;
    bottom: auto;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
  }

  /* On short screens the centered dock would overlap the weather widget —
     push it just below the widget instead */
  @media (max-height: 700px) {
    #dock-container {
      top: 275px;
      transform: none;
    }
  }

  #dock {
    flex-direction: column;
    align-items: center;
    padding: 10px 7px;
  }

  .dock-divider {
    width: 34px;
    height: 1px;
    margin: 3px 0;
    margin-bottom: 3px;
  }

  /* Active dot: left of icon */
  .dock-dot {
    position: absolute;
    left: -8px;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
  }

  /* Tooltip: right of icon */
  .dock-label {
    bottom: auto;
    top: 50%;
    left: calc(100% + 10px);
    transform: translateY(-50%) translateX(-4px);
  }

  .dock-item:hover .dock-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0px);
  }

  .dock-item:hover .dock-icon { transform: scale(1.3) translateY(-6px); }

  .dock-item:hover + .dock-item .dock-icon,
  .dock-item:has(+ .dock-item:hover) .dock-icon {
    transform: none;
  }

  .dock-item[title="Bin"] .dock-icon img {
    width: 44px;
    height: 44px;
  }
  .dock-item[title="Instagram"] .dock-icon img,
  .dock-item[title="LinkedIn"] .dock-icon img {
    width: 46px;
    height: 46px;
  }
}