:root {
  --bg: #0f1720;
  --panel: #e5e5e5;
  --muted: #6b7280;
  --accent: #ff574e;
  --nav-height: 64px;
  --company-image-size: 64px;
  --base-font: 'Google Sans Flex', Inter, sans-serif;
}

/* Basic */
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
html.has-scrollbar-gutter { overflow-y: scroll; }

body {
  margin: 0;
  min-height: 100vh;
  background: #000000;
      color: #e5e5e5;
  font-family: var(--base-font);
  scroll-behavior: smooth;
}

/* Simple custom cursor using an inline SVG (applies when JS toggles `body.has-custom-cursor`).
   This replaces the system arrow with a small semi-opaque circle. It only applies to
   fine pointers and respects prefers-reduced-motion by leaving the default cursor. */
@media (pointer: fine) {
  :root { --custom-cursor-size: 18px; --custom-cursor-color: rgba(255,255,255,0.4); }
  /* inline SVG data URI: white circle with 40% opacity; hotspot at center (9 9) */
  body.has-custom-cursor { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><circle cx='9' cy='9' r='8' fill='%23e5e5e5' fill-opacity='0.4'/></svg>") 9 9, auto; }
  /* Click-state: slightly smaller circle used while the mouse is pressed. Hotspot centered (6,6). */
  body.has-custom-cursor.cursor-click { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'><circle cx='6' cy='6' r='5' fill='%23e5e5e5' fill-opacity='0.4'/></svg>") 6 6, auto; }
}
@media (prefers-reduced-motion: reduce) {
  body.has-custom-cursor { cursor: default !important; }
}

/* ---------------------------
   Top Navigation
   --------------------------- */
.top-nav {
  position: fixed;
  top: 0; left: 0; right: 0; width: 100%;
  height: var(--nav-height);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 24px;
  z-index: 10000;
  font-weight: 600;
}
.nav-left {
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  background-position: center center;
}
/* spin animation for clickable logo */
.nav-left {
  display: inline-block;
  transition: transform 420ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}
.nav-left.spin {
  transform: rotate(-180deg);
}
@media (prefers-reduced-motion: reduce) {
  .nav-left { transition: none; }
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-links a {
      color: #e5e5e5;
  text-decoration: none;
  margin: 0 8px;
  font-weight: 500;
  transition: color 0.2s;
}
.nav-links a:hover { color: #ef4444; }
.hamburger { display: none; font-size: 28px; cursor: pointer; }
.menu-header { display: none; }

/* ---------------------------
   Profile Section & Greeting
   --------------------------- */
.profile-section {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  margin-bottom: 24px;
}
.profile-photo-wrap { position: relative; width: 256px; height: 256px; flex-shrink: 0; }
.profile-photo-wrap .profile-photo { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
.profile-photo-wrap .profile-photo.front { z-index: 2; opacity: 1; }
.profile-photo-wrap .profile-photo.back { z-index: 1; opacity: 0; }

/* transitions for cross-fade */
.profile-photo-wrap .profile-photo { transition: opacity 320ms cubic-bezier(.2,.9,.2,1), transform 200ms ease, filter 200ms ease; will-change: opacity, transform; }
.profile-bio h2 { margin: 0 0 4px; padding: 0px 20px; font-size: 26px; }
.profile-bio p { margin: 0; padding: 0px 20px; color: var(--muted); min-height: 112px; font-size: 20px;}
/* Bio links: bold, slightly lighter grey, no underline; accent color on hover */
.profile-bio a { font-weight: 700; color: #cbd5d9; text-decoration: none; }
.profile-bio a:hover, .profile-bio a:focus { color: var(--accent); outline: none; }
/* Initially hide the bio paragraph until the greeting rotator finishes.
   BioTyper will set `visibility: visible` when it begins typing. */
.profile-bio p {
  visibility: hidden;
}

/* When JS is present, hide the bio paragraph until the typer reveals it to avoid flash-of-content */
.js .profile-bio p {
  visibility: hidden;
}

/* More specific rule to ensure profile bio paragraphs remain the muted (darker) color
   and are not overridden by the general `.container.project > section p` rule. Links
   inside the bio keep their own color rules. */
.container.project .profile-bio p { color: var(--muted); }

/* Greeting rotator (typewriter caret styling) */
.greeting { display: inline-block; font-weight: 700; letter-spacing: 0.2px; }
.greeting::after{
  content: '';
  display: inline-block;
  width: 0.56em;
  height: 0.9em;
  background: currentColor;
  margin-left: 0.4ch;
  vertical-align: text-bottom;
  opacity: 0.95;
  border-radius: 2px;
  animation: greeting-blink 1s steps(2,start) infinite;
}
.greeting.caret-hidden::after { opacity: 0; animation: none; visibility: hidden; }
@keyframes greeting-blink { 50% { opacity: 0 } 100% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .greeting::after { animation: none; opacity: 0 } }

/* Simple profile-photo glitch effect (used when greeting updates) applied to wrapper */
.profile-photo-wrap.glitch { animation: profile-glitch 560ms linear; filter: contrast(1.15) saturate(1.05) hue-rotate(-6deg); }
@keyframes profile-glitch {
  0% { transform: translateX(0) skewX(0); }
  10% { transform: translateX(-6px) skewX(-3deg); }
  20% { transform: translateX(6px) skewX(3deg); }
  30% { transform: translateX(-4px) skewX(-2deg); }
  40% { transform: translateX(4px) skewX(2deg); }
  50% { transform: translateX(0) skewX(0); }
  60% { transform: translateX(-2px) skewX(-1deg); }
  80% { transform: translateX(2px) skewX(1deg); }
  100% { transform: translateX(0) skewX(0); }
}

/* ---------------------------
   Accordion
   --------------------------- */
.accordion { display: block; gap: 12px; margin: 24px 40px; }
  
  /* Index-only: remove side padding/margins for accordion and profile-bio on mobile.
     We detect the index page by excluding `.project-page` which project pages use. */
  body:not(.project-page) .accordion.no-side-margins,
  body:not(.project-page) .profile-section.no-side-margins {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Also remove profile-bio inner horizontal padding on index mobile so text is flush.
     Keep a small bottom padding to avoid clipping with the gradient. */
  body:not(.project-page) .profile-bio {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 8px !important;
  }

/* Sequential reveal for each accordion section. Uses clip-path + opacity + translate
   so sections appear one-by-one with a smooth clip reveal. Honors prefers-reduced-motion. */
.accordion-item {
  opacity: 0;
  transform: translateY(8px);
  clip-path: inset(10% 0 10% 0);
  /* base reveal animation; delay computed from --idx variable */
  animation: accordion-item-reveal 820ms cubic-bezier(.2,.9,.2,1) both;
  animation-delay: calc(var(--idx, 0) * 240ms + 180ms);
}

@keyframes accordion-item-reveal {
  from { opacity: 0; transform: translateY(8px); clip-path: inset(10% 0 10% 0); }
  to   { opacity: 1; transform: translateY(0); clip-path: inset(0 0 0 0); }
}

/* Assign a sequential index variable for each accordion-item (counts only items of the same type). */
.accordion .accordion-item:nth-of-type(1) { --idx: 0; }
.accordion .accordion-item:nth-of-type(2) { --idx: 1; }
.accordion .accordion-item:nth-of-type(3) { --idx: 2; }
.accordion .accordion-item:nth-of-type(4) { --idx: 3; }
.accordion .accordion-item:nth-of-type(5) { --idx: 4; }
.accordion .accordion-item:nth-of-type(6) { --idx: 5; }

@media (prefers-reduced-motion: reduce) {
  .accordion-item { opacity: 1 !important; transform: none !important; clip-path: none !important; animation: none !important; }
}

/* small fade + slide for the accordion heading (runs on page load) */
.accordion h3 {
  opacity: 0;
  transform: translateY(6px);
  animation: accordion-h3-fade 860ms cubic-bezier(.2,.9,.2,1) 240ms both;
}
@keyframes accordion-h3-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .accordion h3 { opacity: 1 !important; transform: none !important; animation: none !important; }
}
.accordion-item {
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.accordion-header {
  display: flex;
  align-items: center; /* vertically center children so padding is preserved and buttons aren't cut */
  gap: 16px;
  padding: 12px; /* consolidated: 12px on all sides */
  cursor: pointer;
  width: 100%;
  background: transparent;
  border: none;
  overflow: visible; /* ensure controls like expand icon are not clipped */
}
.company-image {
  width: var(--company-image-size); height: var(--company-image-size); border-radius: 6px;
  background-size: cover; background-position: center; flex: 0 0 auto;
}
.company-info { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 4px; flex: 1 1 auto; height: var(--company-image-size); padding: 4px 0; }
.company-name { font-size: 20px; font-weight: 600; color: #fff; }
  .company-name { font-size: 20px; font-weight: 600; color: #e5e5e5; }
.company-meta { font-size: 12px; color: #4a4a4a; display: flex; gap: 6px; align-items: flex-end; }
.header-right { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 8px; flex: 0 0 auto; height: var(--company-image-size); }
  .tenure {
  display: inline-block; min-width: 100px; font-size: 12px; color: #fff; text-align: center;
  display: inline-block; min-width: 100px; font-size: 12px; color: #e5e5e5; text-align: center;
  padding: 4px 14px; border: 1px solid #e5e5e5; border-radius: 18px;
}
.tenure-past {
  display: inline-block; min-width: 100px; font-size: 12px; color: #4a4a4a; text-align: center;
  padding: 4px 14px; border: 1px solid #4a4a4a; border-radius: 18px;
}

/* Site-wide bottom gradient (shared, reusable). Controls a subtle radial wash that sits behind page content.
   Injected via `partials.js` which appends a `.site-bottom-gradient` div into the body. */
@keyframes __site_gradientShift {
  0% { background-position: 20% 50%; }
  50% { background-position: 80% 50%; }
  100% { background-position: 20% 50%; }
}
.site-bottom-gradient{
  position: fixed;
  left: -10vw;
  right: -10vw;
  bottom: -160px;
  height: 520px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.42;
  filter: blur(22px);
  background: radial-gradient(circle at 20% 60%, rgba(168,237,234,0.98) 0%, rgba(207,233,243,0.95) 22%, rgba(246,211,101,0.88) 48%, rgba(248,205,218,0.86) 68%, rgba(194,233,251,0.9) 100%);
  background-size: 400% 100%;
  background-position: 20% 50%;
  transform: translateZ(0);
  animation: __site_gradientShift 28s ease-in-out infinite;
  will-change: background-position;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 50%);
}
@media (prefers-reduced-motion: reduce) {
  .site-bottom-gradient{ animation: none; opacity: 0.14; }
}
.expand-icon {
  width: 36px; height: 36px; display: grid; place-items: center;
  border-radius: 8px; background: rgba(255, 255, 255, 0.03);
  transition: transform 0.3s ease;
}
.expand-icon::before {
  content: "+"; font-size: 18px; color: #fff; display: inline-block; transition: transform 0.25s ease;
  content: "+"; font-size: 18px; color: #e5e5e5; display: inline-block; transition: transform 0.25s ease;
}
.accordion-header[aria-expanded="true"] .expand-icon::before { content: "-"; transform: rotate(180deg) scale(1.1); }
.accordion-content { height: 0; overflow: hidden; transition: height 0.36s cubic-bezier(.2, .9, .2, 1), padding 0.22s ease; padding: 0 18px; }

/* ---------------------------
   Cards
   --------------------------- */
.card-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-start;
  justify-content: flex-start;
  position: relative;
  padding: 24px;
  perspective: 1200px; /* combined duplicate */
}
/* center cards inside accordion content and add breathing room to avoid clipping */
.accordion-content .card-wrapper { justify-content: center; align-items: flex-start; padding-top: 18px; }

.card {
  width: 270px; height: 360px; border-radius: 12px; overflow: hidden;
  transform-style: preserve-3d; transform-origin: center center; cursor: pointer;
  display: flex; align-items: flex-end; padding: 12px; color: #fff;
      display: flex; align-items: flex-end; padding: 12px; color: #e5e5e5;
  background-size: cover; background-position: center;
  transition: transform 0.25s cubic-bezier(.2, .9, .2, 1), opacity 0.28s ease,
              width 220ms cubic-bezier(.2,.9,.2,1), height 220ms cubic-bezier(.2,.9,.2,1);
  position: relative; margin-bottom: 12px;
}

/* Dynamic lighting overlay */
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0) 60%);
  opacity: 0; transition: opacity 0.3s ease; z-index: 1;
}
.card.active::before { opacity: 1; }

.card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

.card-label { position: relative; z-index: 2; font-family: var(--base-font); font-weight: 700; font-size: 18px; }
/* Card subtext: small, uppercase, thin and slightly muted compared to the main label */
.card-sub { display: block; text-transform: uppercase; font-size: 10px; font-weight: 300; letter-spacing: 0.6px; margin-top: 6px; color: rgba(255,255,255,0.5); }
  .card-sub { display: block; text-transform: uppercase; font-size: 10px; font-weight: 300; letter-spacing: 0.6px; margin-top: 6px; color: rgba(229,229,229,0.5); }
.card.entering { opacity: 0; transform: translateY(6px) scale(.96); }
.card.entered { opacity: 1; transform: translateY(0) scale(1); }
.card.leaving { opacity: 0; transform: translateY(6px) scale(.96); }

/* ---------------------------
   Project page specific styles
   --------------------------- */
body.project-page { margin: 0; font-family: var(--base-font); background-color: #000; color: #e5e5e5; line-height: 1.6; }
  body.project-page { margin: 0; font-family: var(--base-font); background-color: #000; color: #e5e5e5; line-height: 1.6; }
.container.project { width: 90%; max-width: 1200px; margin: 0 auto; padding-top: 100px; }
.project-header { text-align: left; margin-bottom: 28px; }
.project-title { font-size: 3rem; font-weight: bold; letter-spacing: -0.02em; font-family: var(--base-font); margin: 0 0 6px; }
.project-subtitle { font-size: 1rem; color: #9aa0a6; margin: 0 0 18px; }
.project-content { font-size: 1rem; color: #ddd; max-width: 1200px; margin-bottom: 10px; }
.video-container { position: relative; width: 100%; padding-bottom: 56.25%; margin-bottom: 10px; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 12px; }

/* Video-full section: remove extra space beneath the player and align columns
  so the title and the video sit flush visually. Scoped to `.video-full` so
  other pages (like the index) are unaffected. */
.video-full .video-container { margin-bottom: 0; }
.video-full .section-inner { align-items: start; }
.video-full .section-inner > .first { margin-bottom: 0; }

/* Carousel removed */

/* Responsive image container used by the `image-full` sample section */
.image-container { position: relative; width: 100%; padding-bottom: 56.25%; margin-bottom: 24px; }
.image-container img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; }
.image-full .image-container { margin-bottom: 0; }


/* (reverted) project section centering removed to restore original layout */

.image-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 10px; }
.image-grid img { width: 100%; border-radius: 10px; }
.credits { margin-bottom: 10px; }
.credits h3 { font-size: 1.2rem; margin-bottom: 10px; color: #fff; }
  .credits h3 { font-size: 1.2rem; margin-bottom: 10px; color: #e5e5e5; }
.credits p { color: #ccc; margin: 0; }
.credits-list { list-style: none; margin: 0; padding: 0; }
.credits-list li { margin-bottom: 8px; }
.credits-list a {
  color: #fff;
  color: #e5e5e5;
  text-decoration: none;
  font-weight: 600; /* semi-bold */
  transition: color 180ms ease;
}
/* accent color on hover/focus - use variable if available, fallback to #6ad1ff */
.credits-list a:hover,
.credits-list a:focus {
  color: var(--accent, #6ad1ff);
  outline: none;
}
.related-projects { margin-bottom: 10px; }
.related-projects h3 { margin-bottom: 16px; }
.related-grid { display: flex; flex-wrap: wrap; gap: 16px; }
.related-item { flex: 1 1 calc(33.333% - 16px); background: rgba(255,255,255,0.05); border-radius: 10px; padding: 16px; transition: background 0.3s ease; }
.related-item:hover { background: rgba(255,255,255,0.1); }
.related-item img { width: 100%; border-radius: 8px; margin-bottom: 10px; }
.related-item h4 { margin: 0; font-size: 1rem; color: #fff; }
  .related-item h4 { margin: 0; font-size: 1rem; color: #e5e5e5; }
footer.project { text-align: center; font-size: 11px; color: #aaa; padding: 20px 0; background: transparent; border-top: 1px solid rgba(255,255,255,0.05); }
  footer.project { text-align: center; font-size: 11px; color: #aaa; padding: 20px 0; background: transparent; border-top: 1px solid rgba(229,229,229,0.05); }

/* Make the project header full-width (restore top-aligned behavior) */
.project-header { text-align: left; margin-bottom: 40px; position: relative; }
@media (max-width: 960px) {
  .project-header { text-align: left; }
  .project-title { font-size: 2rem; }
}

/* Responsive stacking tweaks: reduce spacing and ensure `.first` stacks cleanly on small screens */
@media (max-width: 720px) {
  .container.project > section[class~="2-col"] .section-inner,
  .container.project > section[class~="3-col"] .section-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .container.project > section .section-inner > .first {
    padding-bottom: 0;
    margin-bottom: 0;
  }
  .container.project > section .section-inner > .first h2,
  .container.project > section .section-inner > .first h3 {
    margin-bottom: 6px;
  }

/* Custom styling for h3 inside the `.first` column on project pages */
  .container.project > section .section-inner > .first h3 {
  font-family: var(--base-font);
  font-weight: 300;
  color: #e5e5e5;
}
}

/* Force stacking at a slightly larger breakpoint so the `.first` column sits on top earlier */
@media (max-width: 960px) {
  .container.project > section[class~="2-col"] .section-inner,
  .container.project > section[class~="3-col"] .section-inner {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }
  .container.project > section .section-inner > .first {
    order: -1; /* ensure `.first` appears visually on top when stacking */
    padding-bottom: 0;
  }
  .container.project > section .section-inner > .first h2,
  .container.project > section .section-inner > .first h3 {
    margin-bottom: 6px;
    font-size: 1.05rem;
  }

  /* Center the accordion heading when layout stacks on smaller screens */
  .accordion h3 { text-align: center; }

  /* Remove column top offsets when stacking so items align naturally */
  .container.project > section[class~="2-col"] .section-inner > .first,
  .container.project > section[class~="2-col"] .section-inner > .second,
  .container.project > section[class~="3-col"] .section-inner > .first,
  .container.project > section[class~="3-col"] .section-inner > .second,
  .container.project > section[class~="3-col"] .section-inner > .third {
    margin-top: 0;
  }

}

/* Extra defensive stacking rules: when viewport is narrow, force children to behave as block-level
   rows so grid-placement or other styles won't accidentally keep them side-by-side. */
@media (max-width: 960px) {
  .container.project > section .section-inner { display: grid !important; grid-template-columns: 1fr !important; grid-auto-flow: row; }
  .container.project > section .section-inner > * { display: block !important; width: 100% !important; grid-column: auto !important; }
  .container.project > section .section-inner > .first { order: -1 !important; }
}

/* ---------------------------
   Project Section Columns
   --------------------------- */
/* Base section styling for project pages: padding and subtle top divider */
.container.project > section {
  padding: 0px; /* reduced top padding to bring headers closer to the divider */
  border-top: 0.5px solid rgba(255,255,255,0.25); /* thin line (0.5px) with 0.25 opacity */
  margin: 0; /* spacing handled by internal padding and section contents */
}

/* inner wrapper that becomes the grid when columns are requested
   put headings (h2) as direct children of section so they span full width */
.container.project > section .section-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: block;
  gap: 24px;
}

/* utility column classes: add `2-col` or `3-col` on the section element (use attribute selectors
   to avoid CSS escaping issues when class names start with a digit) */
.container.project > section[class~="2-col"] .section-inner,
.container.project > section[class~="3-col"] .section-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  /* remove inner left/right padding so the first column aligns visually with the section divider */
  padding-left: 0;
  padding-right: 0;
  /* Ensure grid children align at the top so headings and column copy share the same baseline */
  align-items: start;
  align-content: start;
  grid-auto-rows: auto;
}

/* breakpoints: stack on small screens, then increase columns as viewport grows */
@media (min-width: 720px) {
  .container.project > section[class~="2-col"] .section-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  .container.project > section[class~="3-col"] .section-inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .container.project > section[class~="3-col"] .section-inner { grid-template-columns: repeat(3, 1fr); }
}

/* Map explicit column slot names to grid placement. Each section's children
   should be wrapped with a `.first`, `.second`, `.third` element to place
   them into the corresponding column. On small screens these will stack.
*/
.container.project > section[class~="2-col"] .section-inner > .first { grid-column: 1; }
.container.project > section[class~="2-col"] .section-inner > .second { grid-column: 2; }
.container.project > section[class~="3-col"] .section-inner > .first { grid-column: 1; }
.container.project > section[class~="3-col"] .section-inner > .second { grid-column: 2; }
.container.project > section[class~="3-col"] .section-inner > .third { grid-column: 3; }

/* Add spacing so second/third columns sit slightly lower than the first column
   (helps visual rhythm when headings sit above the first column). Remove when
   viewport stacks columns on small screens. */
.container.project > section[class~="2-col"] .section-inner > .first,
.container.project > section[class~="2-col"] .section-inner > .second,
.container.project > section[class~="3-col"] .section-inner > .first,
.container.project > section[class~="3-col"] .section-inner > .second,
.container.project > section[class~="3-col"] .section-inner > .third,
.container.project > section.image-full .section-inner > .first,
.container.project > section.video-full .section-inner > .first,
.container.project > section.full .section-inner > .first {
  margin-top: 20px;
}

/* Ensure headings inside sections remain full width and visually separate from columns */
/* Headings are now expected to live inside the `.first` column so the
   direct-child full-width heading rule is deprecated. For backward
   compatibility, we keep a small margin reset here but prefer using
   headings inside `.first`. */
.container.project > section > h2 {
  margin: 0 0 12px 0;
  font-size: 1.25rem;
}

/* If an <h2> is placed inside .section-inner (to constrain it to a column),
   tighten its vertical spacing so it sits closer to the divider as well. */
.container.project > section .section-inner > h2 {
  margin-top: 0;
  margin-bottom: 10px;
}

/* Ensure section headings inside `.first` don't introduce extra top offset so
   side column text lines up with the title. Target h2/h3 used in templates. */
.container.project > section .section-inner > .first h2,
.container.project > section .section-inner > .first h3 {
  margin-top: 0;
}

/* Align the first paragraph in side-columns with the section title.
   Removes any top padding/margin on the first <p> so column copy lines up
   visually with the heading in the `.first` column. Scoped to project
   sections and easy to revert. */
.container.project > section .section-inner > .second > p:first-child,
.container.project > section .section-inner > .third > p:first-child,
.container.project > section .section-inner > .span-all > p:first-child,
.container.project > section .section-inner > .span-2 > p:first-child {
  margin-top: 0;
  padding-top: 0;
  margin-block-start: 0;
  padding-block-start: 0;
}

/* Reduce paragraph weight inside project sections for better typographic rhythm */
.container.project > section p { font-weight: 300; color: #e5e5e5; }

/* Section reveal defaults: hidden + slight translate; revealed when `.in-view` is added. */
.section-reveal { opacity: 0; transform: translateY(12px); transition: opacity 920ms cubic-bezier(.2,.9,.2,1), transform 920ms cubic-bezier(.2,.9,.2,1); will-change: opacity, transform; }
.section-reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .section-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* Remove left padding on the first child inside .section-inner so its content
   aligns with the section's left edge/divider */
.container.project > section[class~="2-col"] .section-inner > .first,
.container.project > section[class~="3-col"] .section-inner > .first {
  padding-left: 0;
  margin-left: 0;
}

/* Helper utilities for grid children */
.section-inner .span-all { grid-column: 1 / -1; }
.section-inner .span-2 { grid-column: span 2; }

/* Utility to remove the section divider for specific sections */
.container.project > section.section-no-divider { border-top: none; }

/* small tweak: keep existing margin-bottom for sections that relied on it */
.container.project > section { margin-bottom: 40px; }

/* Remove the top divider for the profile section on the index page */
.container.project > section.profile-section {
  border-top: none;
  padding-top: 24px; /* reduce top padding so header area sits tighter */
  margin: 12px 24px 24px; /* restore horizontal margins for profile area (override generic section reset) */
}

/* ---------------------------
   Canvas & Particles
   --------------------------- */
#clickCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; }
#dotCanvas { position: fixed; inset: 0; pointer-events: none; z-index: 10; mix-blend-mode: screen; will-change: transform; }
@media (max-width: 720px), (prefers-reduced-motion: reduce) { #dotCanvas { display: none; } }

/* ---------------------------
   Lightbox Modal
   --------------------------- */
.lightbox-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 22000;
  pointer-events: none;
}
.lightbox-modal.open {
  display: flex;
  pointer-events: auto;
}
.lightbox-modal .lightbox-backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 220ms ease;
}
.lightbox-modal.open .lightbox-backdrop { opacity: 1; }

.lightbox-modal .lightbox-content {
  position: relative; z-index: 10001;
  max-width: 90vw; max-height: 90vh;
  display: flex; align-items: center; justify-content: center;
  padding: 12px;
  opacity: 0; transform: scale(0.96);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.2,.9,.2,1);
}
.lightbox-modal.open .lightbox-content { opacity: 1; transform: scale(1); }
.lightbox-modal .lightbox-view { display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lightbox-modal .lightbox-view img {
  max-width: 84vw; max-height: 80vh; width: auto; height: auto; display: block;
  border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}

/* subtle image animation when modal opens/closes */
.lightbox-modal .lightbox-view img {
  transform: scale(0.98);
  opacity: 0;
  transition: transform 220ms cubic-bezier(.2,.9,.2,1), opacity 180ms ease;
}
.lightbox-modal.open .lightbox-view img {
  transform: scale(1);
  opacity: 1;
}

.lightbox-modal .lightbox-caption {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  color: #a3a3a3; font-size: 0.75rem; text-align: center;
  max-width: calc(84vw - 24px); padding: 6px 10px; border-radius: 6px;
  box-sizing: border-box;
  background: linear-gradient(180deg, rgba(0,0,0,0.0), rgba(0,0,0,0.45));
}
.lightbox-modal.caption-below .lightbox-caption {
  position: static; margin-top: 12px; text-align: center; background: transparent; max-width: 84vw;
}
.lightbox-modal .lightbox-caption a { color: #fff; text-decoration: underline; }

/* Bento gallery grid layout: allow tall items to span two rows */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  /* expose a variable for the implicit row height so other rules can reference it */
  --gallery-row-height: 140px;
  grid-auto-rows: var(--gallery-row-height);
  gap: 12px;
}
.gallery .item { overflow: hidden; border-radius: 8px; position: relative; }
.gallery .item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery .item.tall { grid-row: span 2; }
/* New: square item that uses the same vertical span as `.item.tall` but keeps a 1:1 aspect ratio.
   This makes the item visually square, using two implicit rows as its reference height. */
.gallery .item.square {
  grid-row: span 2;
  /* Make the square size reference the two-row height, but never exceed the column width.
     Use min() to clamp to 100% so it stays responsive across breakpoints. The aspect-ratio
     keeps it perfectly 1:1. */
  width: min(calc(var(--gallery-row-height) * 2), 100%);
  aspect-ratio: 1 / 1;
  height: auto;
  align-self: start;
  justify-self: center;
}

/* Image grid variant used on the standalone `gallery.html` page. Use an explicit
   4-column layout on wide screens, falling back to 3/2/1 across breakpoints so
   items distribute evenly into a responsive 4x3-style grid. Anchors wrap the
   `.card` and are made fully interactive (block-level) so the entire tile is clickable.
*/
.image-grid.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  align-items: stretch;
  justify-items: stretch;
}
.gallery-link { display: block; text-decoration: none; color: inherit; }
.gallery-link:focus { outline: 3px solid rgba(255,255,255,0.12); outline-offset: 4px; border-radius: 10px; }

/* Make the card responsive inside the grid: use a stable aspect-ratio (3:4)
   so thumbnails remain visually consistent. Cards expand to the column width. */
.image-grid.gallery .card {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4; /* width : height -> matching existing 270x360 ratio */
  margin: 0; /* grid gap handles spacing */
  display: flex; align-items: flex-end; padding: 12px; border-radius: 10px;
}

/* Hover / focus affordances for clickable cards */
.image-grid.gallery .card:hover,
.image-grid.gallery .card:focus,
.gallery-link:focus .card {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 18px 40px rgba(0,0,0,0.6);
}

/* Responsive breakpoints: 4 -> 3 -> 2 -> 1 columns */
@media (max-width: 1200px) {
  .image-grid.gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .image-grid.gallery { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .image-grid.gallery { grid-template-columns: 1fr; }
  .image-grid.gallery .card { aspect-ratio: 4 / 3; max-width: 540px; margin-left: auto; margin-right: auto; }
}

/* Page-scoped overrides for the standalone gallery page only. This forces a
   3-column desktop layout and horizontal (landscape) cards to match the
   mobile visual, while leaving global gallery styles intact for other pages. */
.gallery-page .image-grid.gallery {
  grid-template-columns: repeat(3, 1fr);
}
.gallery-page .image-grid.gallery .card {
  aspect-ratio: 4 / 3; /* horizontal card on desktop for this page */
  max-width: 100%;
}
@media (max-width: 600px) {
  .gallery-page .image-grid.gallery { grid-template-columns: 1fr; }
  .gallery-page .image-grid.gallery .card { aspect-ratio: 4 / 3; }
}

/* Prevent fixed implicit row sizing on this page's gallery so items can size
   themselves with `aspect-ratio` and grid gaps behave correctly (no overlap). */
.gallery-page .image-grid.gallery {
  grid-auto-rows: auto !important;
  align-items: start !important;
}

/* Page-scoped gallery-item image rule to keep HTML clean and visuals consistent */
body.gallery-page .image-grid.gallery .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Discourage dragging/copying of gallery thumbnails (client-side deterrent only) */
body.gallery-page .image-grid.gallery .gallery-item img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}


/* Controls hidden until modal open */
.lightbox-modal .lightbox-close,
.lightbox-modal .lightbox-prev,
.lightbox-modal .lightbox-next {
  position: absolute;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
  z-index: 10002;
  /* make prev/next transparent by default; close button remains visible via its position */
  background: transparent; color: #fff; border: none; padding: 8px 10px; border-radius: 8px;
  backdrop-filter: blur(6px);
  cursor: pointer;
}

/* no hover background for prev/next - keep them fully transparent */
.lightbox-modal .lightbox-prev:hover,
.lightbox-modal .lightbox-next:hover,
.lightbox-modal .lightbox-prev:focus,
.lightbox-modal .lightbox-next:focus {
  background: transparent;
}
.lightbox-modal.open .lightbox-close,
.lightbox-modal.open .lightbox-prev,
.lightbox-modal.open .lightbox-next {
  opacity: .75; pointer-events: auto;
}
/* keep prev/next vertical centering (they have translateY(-50%) in their rule);
   only the close button should animate from a small offset into place */
.lightbox-modal.open .lightbox-close { transform: translateY(0); }
.lightbox-modal .lightbox-close { top: 14px; right: 14px; }
.lightbox-modal .lightbox-prev { left: -44px; top: 38px; bottom: 38px; width: 56px; display: flex; align-items: center; justify-content: center; border-radius: 10px; }
.lightbox-modal .lightbox-next { right: -44px; top: 38px; bottom: 38px; width: 56px; display: flex; align-items: center; justify-content: center; border-radius: 10px; }

/* Disabled control styling */
.lightbox-modal button[disabled], .lightbox-modal [aria-disabled="true"] {
  opacity: 0.34; pointer-events: none; cursor: default;
}

/* Hide prev/next entirely when disabled (first/last image) for a cleaner UI) */
.lightbox-modal .lightbox-prev[disabled], .lightbox-modal .lightbox-next[disabled],
.lightbox-modal .lightbox-prev[aria-disabled="true"], .lightbox-modal .lightbox-next[aria-disabled="true"] {
  display: none;
}

@media (max-width: 720px) {
  .lightbox-modal .lightbox-view img { max-width: 94vw; max-height: 78vh; }
  .lightbox-modal .lightbox-prev, .lightbox-modal .lightbox-next { display: none; }
}

/* Ensure section-inner content remains left-aligned by default */
.container.project > section .section-inner { text-align: left; }

/* ---------------------------
   Footer animation
   --------------------------- */
.site-footer { text-align: center; font-size: 10px; color: #aaa; padding: 20px 0; background: transparent; opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
.site-footer.visible { opacity: 1; transform: translateY(0); }

/* ---------------------------
   Responsive Adjustments (consolidated)
   --------------------------- */
@media (max-width: 1279px) and (min-width: 800px) {
  .company-image { width: 52px; height: 52px; }
  .company-info { height: 52px; }
  .header-right { height: 52px; }
  .card { width: 270px; height: 360px; }
  .card-label { font-size: 16px; font-weight: bold; }
  .card-sub { font-size: 8px; }
  .project-title { font-size: 2.4rem; }
}

@media (max-width: 799px) {
  /* Mobile nav and overlay styles */
  .nav-links { display: none; flex-direction: column; position: absolute; top: var(--nav-height); left: 0; width: 100vw; backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,0.05); padding: 32px 24px; opacity: 0; transform: translateY(-10px); transition: opacity 0.4s ease, transform 0.4s ease; z-index: 999; }
  .nav-links.show { display: flex; opacity: 1; transform: translateY(0); animation: fadeSlideDown 0.4s ease forwards; }
  .menu-header { display: block; color: #b4b4b4; font-weight: 600; font-size: 18px; margin-bottom: 20px; pointer-events: none; }
  .nav-links a { color: #fff; text-decoration: none; font-size: 18px; margin: 10px 0; text-align: left; opacity: 0; transform: translateX(-10px); transition: opacity 0.3s ease, transform 0.3s ease; }
  .nav-links a { color: #e5e5e5; text-decoration: none; font-size: 18px; margin: 10px 0; text-align: left; opacity: 0; transform: translateX(-10px); transition: opacity 0.3s ease, transform 0.3s ease; }
  .nav-links.show a { opacity: 1; transform: translateX(0); }
  .hamburger { display: block; font-size: 28px; cursor: pointer; transition: transform 0.3s ease; z-index: 1001; }
  .hamburger.open { transform: rotate(90deg); }
  #menuOverlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.45); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; z-index: 900; }
  #menuOverlay.show { opacity: 1; pointer-events: all; }

  /* Profile adjustments */
  .profile-section { flex-direction: column; align-items: center; text-align: center; padding: 12px; }
  /* Reduce profile photo size on mobile so the accordion appears sooner */
  .profile-photo-wrap { width: 140px; height: 140px; }
  .profile-photo { width: 140px; height: 140px; }

  /* Keep the bio paragraph left-aligned for readability even when section centers */
  .profile-section .profile-bio p { text-align: left; }

  /* Force profile-bio container height to 220px on mobile to reduce vertical space.
     Use !important to override inline min-height set by the BioTyper measurement. */
  .profile-bio {
    min-height: 220px !important;
    max-height: 220px;
    height: 220px !important;
    overflow: hidden;
  }

  /* Mobile typography & cards */
  body { padding: 0; }
  .company-image { width: 48px; height: 48px; }
  .company-info { height: 48px; }
  .header-right { height: 48px; }
  .company-name { font-size: 16px; }
  .company-meta { font-size: 8px; text-align: left; }
  .tenure { min-width: 60px; font-size: 8px; }
  .tenure-past { min-width: 60px; font-size: 8px; }
  .card { width: 100%; max-width: 180px; height: 240px; border-radius: 10px; }
  .card-label { font-size: 12px; font-weight: bold; }
  .card-sub { font-size: 6px; }
  .card-wrapper { gap: 10px; }
  .project-title { font-size: 1.8rem; text-align: left; }
  .project-subtitle { text-align: left; }
  .project-content { font-size: 0.95rem; text-align: left; margin: 0 auto 40px; }
  .related-item { flex: 1 1 calc(100% - 16px); }
    /* Reduce profile heading size on mobile so it doesn't push the bio down */
    .profile-bio h2 {
      font-size: 18px;
      line-height: 1.08;
      padding: 0 8px;
      margin-bottom: 6px;
    }
}

/* Responsive scaling for profile bio paragraph */
@media (min-width: 800px) and (max-width: 1279px) {
  .profile-bio p { font-size: 18px; min-height: 96px; }
}
@media (max-width: 799px) {
  .profile-bio p { font-size: 14px; min-height: 44px; }
  /* Reduce space below the profile section so accordion appears closer on mobile */
  .profile-section { margin-bottom: 8px; }
}

/* Fade slide animation keyframes reused */
@keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }