/* ============================================================
   FARAZ IFTIKHAR — PORTFOLIO
   ============================================================ */

/* ---- CSS Custom Properties ---- */
:root {
  /* Colors — warm dark variant (toggle-only; the cream palette in [data-theme="light"] is the default look) */
  --color-bg: #1b1611;
  --color-bg-secondary: #221b15;
  --color-bg-tertiary: #2c231b;
  --color-text: #f5efe3;
  --color-text-secondary: #b3a696;
  --color-text-muted: #766a5b;
  --color-accent: #e2694f;
  --accent-brand: #c63d2f; /* the terracotta used for hard-coded accents; light theme darkens it */
  --bg-rgb: 27, 22, 17; /* rgb of --color-bg, for translucent overlays */
  --color-accent-secondary: #c9836d;
  --color-border: rgba(245, 239, 227, 0.1);
  --color-white: #f5efe3;

  /* Typography — DM Sans throughout (weight carries the hierarchy), matching lasstattoo.com */
  --font-display: 'DM Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'DM Sans', sans-serif;
  --font-script: 'Qwitcher Grypen', cursive;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: clamp(4rem, 8vw, 7rem);

  /* Animation */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
  --ease-smooth: cubic-bezier(0.43, 0.13, 0.23, 0.96);

  /* Layout */
  --container-max: 1400px;
  --nav-height: 80px;
}

/* ---- Reset & Base ---- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: auto;
}

html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
  cursor: none;
  line-height: 1.6;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: none;
}

button {
  font-family: inherit;
  cursor: none;
  background: none;
  border: none;
  color: inherit;
}

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

::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
}

/* ---- Noise Overlay ---- */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  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: 256px 256px;
}

/* ---- Custom Cursor ---- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
  pointer-events: none;
  mix-blend-mode: normal;
}

.cursor-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.12);
  transition: width 0.22s var(--ease-out-expo),
              height 0.22s var(--ease-out-expo),
              background 0.22s ease,
              box-shadow 0.22s ease;
}

.cursor.is-hovering .cursor-dot {
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.06);
}

/* ---- Preloader ---- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.preloader-inner {
  width: min(400px, 80vw);
  text-align: center;
}

.preloader-line {
  width: 100%;
  height: 1px;
  background: var(--color-border);
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
}

.preloader-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--color-accent);
  transition: width 0.1s linear;
}

.preloader-text {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.preloader-name {
  font-family: var(--font-display);
  font-size: clamp(0.75rem, 1.5vw, 1rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.preloader-counter {
  font-family: var(--font-mono);
  font-size: clamp(0.75rem, 1.5vw, 1rem);
  color: var(--color-accent);
  font-weight: 300;
}

/* ---- Cursive Script Accents (Qwitcher Grypen — same script used on lasstattoo.com) ---- */
.cursive-accent {
  font-family: var(--font-script);
  color: var(--accent-brand); /* Saturated organic maroon/terracotta */
  font-size: 1.7em;
  font-weight: 400;
  font-style: normal;
  display: inline-block;
  padding: 0 0.15rem;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: none; /* Keep natural case */
}

/* ---- Navigation ---- */
.nav {
  position: fixed;
  top: 1.5rem;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
  z-index: 1000;
  mix-blend-mode: difference;
  transition: transform 0.6s var(--ease-out-expo);
}

.nav.is-hidden {
  transform: translateY(-100%);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.nav-logo-dot {
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  display: inline-block;
}

.nav-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.nav-link-vertical {
  font-family: var(--font-mono);
  font-size: 0.52rem; /* Very very small */
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  height: 14px;
  line-height: 14px;
  overflow: hidden;
  display: block;
  position: relative;
}

.nav-link-roll {
  display: block;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.76, 0, 0.24, 1);
}

.nav-link-roll .primary,
.nav-link-roll .secondary {
  height: 14px;
  line-height: 14px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transition: color 0.3s ease;
}

.nav-link-roll .primary {
  color: var(--color-text-secondary);
}

.nav-link-roll .secondary {
  color: var(--accent-brand); /* Reddish maroon color */
}

.nav-link-vertical:hover .nav-link-roll {
  transform: translateY(-14px);
}

.nav-menu-btn {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  z-index: 1001;
}

.menu-line {
  width: 28px;
  height: 1.5px;
  background: var(--color-text);
  transition: transform 0.4s var(--ease-out-expo),
              opacity 0.3s ease;
  transform-origin: center;
}

.nav-menu-btn.is-active .menu-line:first-child {
  transform: rotate(45deg) translateY(5px);
}

.nav-menu-btn.is-active .menu-line:last-child {
  transform: rotate(-45deg) translateY(-5px);
}

/* ---- Mobile Menu ---- */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
}

.mobile-menu.is-open {
  pointer-events: all;
}

.mobile-menu-bg {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  opacity: 0;
  transition: opacity 0.6s var(--ease-out-expo);
}

.mobile-menu.is-open .mobile-menu-bg {
  opacity: 1;
}

.mobile-menu-content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem clamp(1.5rem, 4vw, 4rem);
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.6s var(--ease-out-expo) 0.1s,
              opacity 0.6s var(--ease-out-expo) 0.1s;
}

.mobile-menu.is-open .mobile-menu-content {
  transform: translateY(0);
  opacity: 1;
}

.mobile-link {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 700;
  line-height: 1.2;
  display: block;
  margin-bottom: 0.5rem;
  position: relative;
  overflow: hidden;
}

.mobile-link::before {
  content: attr(data-index);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 300;
  color: var(--color-text-secondary);
  position: absolute;
  top: 0.8em;
  left: -2em;
  letter-spacing: 0.1em;
}

.mobile-menu-footer {
  margin-top: auto;
  padding-top: 2rem;
}

.mobile-menu-social {
  display: flex;
  gap: 2rem;
}

.mobile-menu-social a {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  transition: color 0.3s ease;
}

.mobile-menu-social a:hover {
  color: var(--color-accent);
}

/* ---- Section Commons ---- */
.section {
  position: relative;
  overflow: hidden;
}

.section-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.section-number {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-accent);
  letter-spacing: 0.2em;
  margin-right: 0.9rem;
  display: inline-block;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  position: relative;
  padding-left: 2rem;
}

.section-label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.25rem;
  height: 1px;
  background: var(--color-text-muted);
}

.section-divider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.section-divider svg {
  width: 100%;
  height: 8px;
}

/* ---- HERO SECTION ---- */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  justify-content: center;
  padding: calc(var(--nav-height) + 1.5rem) 0 clamp(2rem, 4vw, 3rem);
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 30% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(255, 255, 255, 0.025) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 75% 25%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.65;
  pointer-events: none;
}

.hero-orb-left {
  width: 26rem;
  height: 26rem;
  top: 8%;
  left: -6rem;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.14) 0%, transparent 68%);
}

.hero-orb-right {
  width: 22rem;
  height: 22rem;
  right: 8%;
  top: 18%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 72%);
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 clamp(1.5rem, 4vw, 4rem);
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.hero-main {
  min-width: 0;
}


.hero-intro {
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.8vw, 5.4rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.05em;
  max-width: 13ch;
}

/* Only the quotation marks take the accent — "Human" keeps the heading colour. */
.hero-quote {
  color: var(--accent-brand);
}

.hero-description {
  max-width: 38rem;
}

.hero-description p {
  font-size: clamp(0.98rem, 1.3vw, 1.12rem);
  color: var(--color-text-secondary);
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.hero-primary-btn,
.hero-secondary-btn {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 0.78rem 1rem;
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo), border-color 0.25s ease, background 0.25s ease;
}

.hero-primary-btn {
  background: var(--color-accent);
  color: var(--color-bg);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.hero-secondary-btn {
  border: 1px solid var(--color-border);
  color: var(--color-text);
  background: rgba(255, 255, 255, 0.02);
}

.hero-primary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  background: var(--accent-brand);
  border-color: var(--accent-brand);
  color: #ffffff;
}

.hero-secondary-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
  background: rgba(198, 61, 47, 0.08);
  border-color: var(--accent-brand);
  color: var(--accent-brand);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.25rem;
}

.hero-meta span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.4rem 0.7rem;
}

/* Hero aside — visual panel + identity */
.hero-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  padding: clamp(0.5rem, 1vw, 1rem) 0;
  min-width: 0;
}


/* ---- ABOUT SECTION ---- */
.about {
  padding: clamp(2rem, 4vw, 3rem) 0;
  background: var(--color-bg);
}

/* ---- About Layout & Typography ---- */
.about-layout {
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(4rem, 8vw, 7rem) 0;
  border-top: 1px solid var(--color-border);
}

.about-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: var(--color-white);
  margin-top: 1.5rem;
  margin-bottom: 2.5rem;
}

.about-content {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 72ch;
}

.about-bio {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: 0;
}

/* ---- Minimalist Typographic Blockquote ---- */
.about-blockquote {
  margin: 0;
  position: relative;
}

.about-blockquote p {
  /* Running text stays in DM Sans — the script face (see .cursive-accent) is reserved
     for short standout phrases, never full sentences, matching the reference site. */
  font-family: var(--font-body);
  font-size: clamp(1.35rem, 1.9vw, 1.7rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}

/* ---- About Statement Card ---- */
.about-statement-card {
  position: relative;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: clamp(2rem, 4vw, 3.5rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: auto;
  min-height: 0;
  box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.3);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.about-statement-card:hover {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.5), 0 0 40px -10px rgba(255, 255, 255, 0.03);
}

.about-card-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 10% 10%, rgba(255, 255, 255, 0.04) 0%, transparent 60%);
  pointer-events: none;
  transition: transform 0.8s var(--ease-out-expo);
}

.about-statement-card:hover .about-card-glow {
  transform: scale(1.2);
}

.about-card-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.about-card-tag::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
}

.about-card-text {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.2vw, 1.85rem);
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
  z-index: 1;
}

.about-card-text .text-highlight {
  color: var(--color-accent);
}

.about-card-text .text-gradient {
  background: linear-gradient(135deg, var(--color-text) 30%, var(--color-accent-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline;
}

.about-card-decoration {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.decor-dot {
  width: 4px;
  height: 4px;
  background: var(--color-text-muted);
  border-radius: 50%;
}

.decor-line {
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, var(--color-border), transparent);
}

/* ---- Headline & Body ---- */
.about-headline {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 0;
}

.about-role-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.about-role-sep {
  color: var(--color-accent);
}

.about-body-wrap {
  display: flex;
  align-items: stretch;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

.about-body {
  margin-bottom: 0;
  max-width: 52ch;
  flex: 1;
}

.about-body p {
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  color: var(--color-text-secondary);
  line-height: 1.75;
  margin-bottom: 0;
}

.about-lead {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  font-weight: 500;
  line-height: 1.55;
  color: var(--color-text);
  font-style: italic;
}

.about-side-rail {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 1px solid var(--color-border);
}

.about-side-rail span {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.about-bio-highlight {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 600;
  color: var(--color-accent);
  margin-top: 2rem;
  letter-spacing: 0.02em;
}

/* Styled About Elements */
.about-lead-intro {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.5vw, 1.4rem) !important;
  font-weight: 600;
  color: var(--color-text) !important;
  margin-bottom: 0.75rem !important;
}

.about-body {
  max-width: 58ch !important; /* Slightly wider to accommodate clean checklist lines */
}

.about-body p {
  margin-bottom: 1.25rem !important;
}

.about-separator {
  width: 40px;
  height: 1px;
  background: var(--color-border);
  margin: 2rem 0;
}

.about-subheading {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.3vw, 1.25rem);
  font-weight: 600;
  color: var(--color-text);
  margin-top: 2.25rem;
  margin-bottom: 1rem;
}

.about-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.about-list li {
  position: relative;
  padding-left: 1.75rem;
}

.about-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0.1rem;
  color: var(--color-text);
  font-weight: bold;
  font-size: 0.9rem;
}

.about-list li strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.25rem;
}

.about-list li span {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 0.15rem;
}

.about-industries-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.about-industries-list li {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  padding-left: 0;
}

.about-stack-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 2.25rem;
}

.about-stack-tags span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: 4px 10px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
}

.about-closing-note {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: var(--color-text-secondary) !important;
  margin-bottom: 1rem !important;
}

.about-final-cta {
  font-family: var(--font-display);
  font-size: 1.05rem !important;
  font-weight: 600;
  color: var(--color-text) !important;
  margin-top: 1.5rem !important;
}

/* ---- WORK / PROJECTS SECTION ---- */
.work {
  padding: var(--space-2xl) 0;
  background: var(--color-bg);
}

.work-headline {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  max-width: 700px;
}

/* ============================================================
   PROJECTS LIST — Full-Width Strips
   ============================================================ */
.projects-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.proj-row {
  position: relative;
  display: flex;
  align-items: center;
  padding: 2rem clamp(1rem, 2vw, 2rem);
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  /* Reset old .project-card sizing */
  width: 100%;
  height: auto;
  min-height: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  flex-shrink: unset;
}

/* Background image — hidden by default, revealed on hover */
.proj-row-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.proj-row-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.25);
}

.proj-row:hover .proj-row-bg {
  opacity: 1;
  transform: scale(1);
}

.proj-row:hover {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-color: transparent;
}

/* Content layer */
.proj-row-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2rem);
  width: 100%;
}

.proj-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color 0.4s ease;
}

.proj-row:hover .proj-num {
  color: var(--proj-accent, var(--color-accent));
}

.proj-name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.4s ease;
}

.proj-row:hover .proj-name {
  color: #fff;
}

.proj-oneliner {
  font-size: clamp(0.85rem, 1vw, 1rem);
  color: var(--color-text-secondary);
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.4s ease;
}

.proj-row:hover .proj-oneliner {
  color: rgba(255, 255, 255, 0.7);
}

.proj-tags {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.proj-tags span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  transition: all 0.4s ease;
}

.proj-row:hover .proj-tags span {
  border-color: rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.05);
}

.proj-arrow {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-text-muted);
  transition: color 0.4s ease, transform 0.4s ease;
}

.proj-arrow svg {
  width: 100%;
  height: 100%;
}

.proj-row:hover .proj-arrow {
  color: var(--proj-accent, var(--color-accent));
  transform: translate(3px, -3px);
}

/* Hide old elements that are no longer used */
.project-hover-circle-screen,
.project-card-overlay {
  display: none !important;
}

/* CSS Mockups */
.mockup-browser {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #141414;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.mockup-browser-header {
  height: 18px;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.mockup-browser-header .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.mockup-browser-header .dot.red { background: #ff5f56; }
.mockup-browser-header .dot.yellow { background: #ffbd2e; }
.mockup-browser-header .dot.green { background: #27c93f; }

.mockup-browser-header .mockup-browser-address {
  font-family: var(--font-mono);
  font-size: 7px;
  color: #555;
  background: #0a0a0a;
  padding: 1px 10px;
  border-radius: 10px;
  margin-left: 8px;
  flex-grow: 1;
  max-width: 100px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mockup-browser-screen {
  width: 100%;
  height: 0;
  flex-grow: 1;
  overflow: hidden;
  position: relative;
  background: #0d0d0d;
}

/* Minimalist Mockup Controls */
.mockup-nav-arrows {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  pointer-events: none;
  z-index: 12;
}

.mockup-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  opacity: 0;
  transform: scale(0.85);
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 0;
}

.mockup-arrow svg {
  display: block;
}

.mockup-arrow:hover {
  background: #fff;
  color: #000;
  border-color: #fff;
  transform: scale(1.1);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.project-card:hover .mockup-arrow,
.project-card.is-active .mockup-arrow {
  opacity: 1;
  transform: scale(1);
}

/* Dots Indicator */
.mockup-nav-dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 12;
  background: rgba(10, 10, 10, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
}

.mockup-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.mockup-dot:hover {
  background: rgba(255, 255, 255, 0.7);
}

.mockup-dot.active {
  width: 14px;
  border-radius: 3px;
  background: var(--project-color);
  box-shadow: 0 0 10px rgba(var(--project-color-rgb), 0.5);
}

.mockup-phone {
  width: 90px;
  height: 160px;
  background: #141414;
  border: 2px solid #242424;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.project-card:hover .mockup-phone,
.project-card.is-active .mockup-phone {
  width: 110px;
  height: 200px;
  border-radius: 16px;
  border-color: #2c2c2c;
}

.mockup-phone-speaker {
  position: absolute;
  top: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: #242424;
  border-radius: 1px;
  z-index: 10;
}

.mockup-phone-screen {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background: #0d0d0d;
}

.mockup-image {
  width: 100%;
  height: auto;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 4s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

/* Image Scrolling on hover/active */
.project-card:hover .mockup-browser .mockup-image,
.project-card.is-active .mockup-browser .mockup-image {
  transform: translateY(calc(-100% + 205px));
}

.project-card:hover .mockup-phone .mockup-image,
.project-card.is-active .mockup-phone .mockup-image {
  transform: translateY(calc(-100% + 194px));
}

/* Project card information styling */
.project-card-info {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex-grow: 1;
  background: var(--color-bg-secondary);
  transition: background-color 0.4s ease;
}

.project-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  gap: 1rem;
}

.project-title {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  transition: color 0.3s ease;
}

.project-card:hover .project-title,
.project-card.is-active .project-title {
  color: var(--project-color);
}

.project-card-links {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.3s ease;
}

.project-link svg {
  width: 9px;
  height: 9px;
  transition: transform 0.3s ease;
}

.project-link:hover {
  border-color: var(--project-color);
  color: var(--color-text-primary);
  background: rgba(var(--project-color-rgb), 0.08);
}

.project-link:hover svg {
  transform: translate(1px, -1px);
}

.project-description {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.project-card:hover .project-description,
.project-card.is-active .project-description {
  color: var(--color-text-primary);
}

.project-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
}

.project-tech span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0.15rem 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  transition: all 0.3s ease;
}

.project-card:hover .project-tech span,
.project-card.is-active .project-tech span {
  border-color: rgba(var(--project-color-rgb), 0.2);
  color: var(--color-text-secondary);
}

.project-link:hover svg {
  transform: translate(2px, -2px);
}



/* ---- PHILOSOPHY SECTION ---- */
.philosophy {
  padding: clamp(5rem, 10vw, 8rem) 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.philosophy-bg {
  position: absolute;
  inset: 0;
}

.philosophy-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
}

.philosophy-content {
  position: relative;
  z-index: 1;
  max-width: 960px;
  margin: 0 auto;
}

.philosophy-quote-wrapper {
  position: relative;
  max-width: 850px;
  margin: 0 auto;
  padding: 1.5rem 0;
}

.philosophy-quote-icon {
  position: absolute;
  top: -4.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: clamp(6rem, 12vw, 9rem);
  line-height: 1;
  color: rgba(255, 255, 255, 0.04);
  pointer-events: none;
  font-weight: 900;
}

.philosophy-quote-text {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.quote-line {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}

.quote-line span {
  color: #fff;
  font-weight: 600;
}

.quote-line strong {
  font-weight: 700;
  color: #fff;
}

.quote-line.highlight {
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  color: #fff;
  font-weight: 700;
}

.quote-line .accent-glow {
  color: var(--color-accent);
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.4);
  font-weight: 800;
}

.quote-line .highlight-humanity {
  color: #fff;
  border-bottom: 2px solid var(--color-accent);
  padding-bottom: 4px;
  font-weight: 800;
}

.philosophy-attribution {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.philosophy-dash {
  color: var(--color-accent);
}

/* ---- CONTACT SECTION ---- */
/* ---- CONTACT SECTION — CREATIVE ZOOM REVEAL ---- */
.contact-new {
  padding: 0;
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

.contact-zoom-reveal {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  margin-top: clamp(2rem, 4vw, 4rem);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-bottom: none;
}

.contact-zoom-inner {
  padding: clamp(3rem, 6vw, 5rem) clamp(2rem, 5vw, 5rem) clamp(1.5rem, 3vw, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 4rem);
}

.contact-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(2rem, 5vw, 3.5rem);
  width: 100%;
}

.contact-hero-copy {
  max-width: 720px;
  padding-top: 0.15rem;
}

.contact-profile {
  position: relative;
  justify-self: end;
  width: clamp(260px, 32vw, 420px);
  margin-left: auto;
  margin-right: calc(-1 * clamp(0.5rem, 1.5vw, 1.25rem));
}

/* Circular portrait with an offset solid-color backing disc (stacked-card effect,
   not an overlap) — echoes darina-cg.com's block-color treatment while keeping the
   photo a true circle. Caption sits below, not curved into the photo's edge. */
.contact-profile-frame {
  position: relative;
  width: 100%;
}

.contact-profile-backing {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: 50%;
  background: var(--color-accent);
  transform: translate(14px, 14px);
}

.contact-profile-backing::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #fdf9f2;
  bottom: 10%;
  right: 4%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.contact-profile-media {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.08);
}

.contact-profile-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: grayscale(100%);
  transition: transform 0.7s var(--ease-out-expo), filter 0.7s var(--ease-out-expo);
}

.contact-profile:hover .contact-profile-img {
  transform: scale(1.06);
}

.contact-profile-caption {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  align-items: flex-end;
  text-align: right;
  padding-right: 0.5rem;
}

.contact-profile-name {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text);
}

.contact-profile-role {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* Story Block */
.contact-story-tag {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.contact-tag-dot {
  width: 6px;
  height: 6px;
  background: var(--color-accent);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}

.contact-story-headline {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 0;
}

.contact-story-body {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--color-text-secondary);
  line-height: 1.8;
  max-width: 580px;
  margin-top: clamp(1rem, 2vw, 1.35rem);
}

/* Contact Channel Links */
.contact-channels {
  display: flex;
  flex-direction: column;
}

.contact-channel {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  align-items: center;
  padding: clamp(1.5rem, 2.5vw, 2.5rem) 0;
  border-top: 1px solid var(--color-border);
  transition: all 0.4s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}

.contact-channel:last-child {
  border-bottom: 1px solid var(--color-border);
}

.contact-channel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out-expo);
}

.contact-channel:hover::before {
  transform: translateX(0);
}

.contact-channel-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.contact-channel:hover .contact-channel-label {
  color: var(--color-accent);
}

.contact-channel-value {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.75rem);
  font-weight: 500;
  position: relative;
  z-index: 1;
  transition: transform 0.4s var(--ease-out-expo);
}

.contact-channel:hover .contact-channel-value {
  transform: translateX(12px);
}

.contact-channel-arrow {
  width: 20px;
  height: 20px;
  position: relative;
  z-index: 1;
  opacity: 0;
  transform: translate(-8px, 8px);
  transition: all 0.4s var(--ease-out-expo);
}

.contact-channel:hover .contact-channel-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.contact-channel-arrow svg {
  width: 100%;
  height: 100%;
}

/* Closing Statement */
.contact-closing {
  text-align: center;
  padding: clamp(1.5rem, 3vw, 3rem) 0;
}

.contact-closing-text {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 0.75rem;
}

.contact-closing-sub {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  font-weight: 700;
  color: var(--color-accent);
  letter-spacing: -0.01em;
}

.contact-message-panel {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.15rem, 2.2vw, 1.7rem);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.015)),
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.05), transparent 38%);
  transition: transform 0.28s var(--ease-out-expo), border-color 0.28s ease, box-shadow 0.28s ease;
}

.contact-message-panel:hover,
.contact-message-panel:focus-within {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.contact-message-header {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.contact-message-kicker {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.contact-message-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.55rem);
  line-height: 1.12;
  font-weight: 600;
  max-width: 16ch;
}

.contact-message-copy {
  color: var(--color-text-secondary);
  line-height: 1.55;
  max-width: 62ch;
  font-size: 0.92rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.contact-field {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}

.contact-field span {
  font-family: var(--font-mono);
  font-size: 0.61rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.contact-field input,
.contact-field textarea {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  color: var(--color-text);
  font: inherit;
  padding: 0.78rem 0.9rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, transform 0.25s ease;
}

.contact-field textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--color-text-muted);
}

.contact-field input:focus,
.contact-field textarea:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04);
  background: rgba(0, 0, 0, 0.34);
  transform: translateY(-1px);
}

.contact-field-full {
  grid-column: 1 / -1;
}

.contact-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.contact-form-note {
  color: var(--color-text-muted);
  font-size: 0.74rem;
}

.contact-form-status {
  min-height: 1rem;
  color: var(--color-text-secondary);
  font-size: 0.78rem;
}

.contact-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.82rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: var(--color-accent);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: transform 0.25s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo), background 0.25s ease;
}

.contact-send-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.3);
}

/* Footer inside contact */
.contact-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

.contact-footer-left,
.contact-footer-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.footer-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
}

.footer-copyright {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

.footer-tagline {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.05em;
}

.footer-location {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.05em;
}

/* ---- Split Text Animation Utility ---- */
.word {
  display: inline-block;
  overflow: hidden;
}

.word .char {
  display: inline-block;
  transform: translateY(100%);
  will-change: transform;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .hero-content {
    padding: 0 clamp(1.25rem, 3vw, 2rem);
  }

  .about-layout {
    padding: clamp(3rem, 6vw, 4rem) 0;
  }

  .contact-hero {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(1.25rem, 3vw, 2rem);
  }

  .contact-profile {
    width: clamp(160px, 22vw, 220px);
    margin-right: 0;
    justify-self: end;
  }

  .hero-title {
    font-size: clamp(2.4rem, 5.8vw, 4.6rem);
    max-width: none;
  }

}

@media (max-width: 768px) {
  :root {
    --nav-height: 64px;
  }

  .hero {
    min-height: auto;
    padding: calc(var(--nav-height) + 1rem) 0 2rem;
  }

  .hero-content {
    padding: 0 clamp(1.25rem, 4vw, 1.5rem);
  }

  .hero-intro {
    gap: 0.8rem;
  }

  .hero-title {
    max-width: none;
    font-size: clamp(2rem, 8.8vw, 3.15rem);
  }

  .hero-description p {
    font-size: 0.9rem;
    line-height: 1.55;
  }

  .hero-actions {
    width: 100%;
    gap: 0.65rem;
  }

  .hero-primary-btn,
  .hero-secondary-btn {
    flex: 1 1 0;
    text-align: center;
    padding: 0.7rem 0.85rem;
    font-size: 0.63rem;
  }

  .hero-meta {
    display: none;
  }

  body {
    cursor: auto;
  }

  .cursor {
    display: none;
  }

  .nav-links {
    display: none;
  }

  .nav-menu-btn {
    display: flex;
  }

  .hero-bottom {
    display: none;
  }

  .about-headline {
    font-size: clamp(1.8rem, 6vw, 2.8rem);
    margin-bottom: 1.75rem;
  }

  .about-bio {
    font-size: 1rem;
  }

  .about-blockquote p {
    font-size: 1.3rem;
  }

  .contact-hero {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 0.9rem;
  }

  .contact-hero-copy {
    max-width: none;
    min-width: 0;
  }

  .contact-story-headline {
    font-size: clamp(1.25rem, 4.8vw, 1.7rem);
    line-height: 1.15;
  }

  .contact-story-body {
    font-size: clamp(0.8rem, 2.6vw, 0.9rem);
    line-height: 1.55;
    margin-top: 0.6rem;
    max-width: none;
  }

  .contact-profile {
    display: block;
    width: clamp(150px, 45vw, 180px);
    margin: 1.8rem auto 0;
  }

  .contact-profile-frame {
    align-items: center;
    gap: 0.45rem;
  }

  .contact-profile-caption {
    align-items: center;
    text-align: center;
    padding-right: 0;
  }

  .contact-profile-name {
    font-size: 0.72rem;
  }

  .contact-profile-role {
    font-size: 0.52rem;
    letter-spacing: 0.1em;
  }

  .contact-zoom-inner {
    padding-left: 1rem;
    padding-right: 1rem;
    gap: 1.5rem;
  }

  .project-info {
    padding-right: 0;
  }

  .project-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .philosophy {
    min-height: auto;
  }

  .contact-channel {
    grid-template-columns: 80px 1fr auto;
  }

  .contact-footer {
    flex-direction: column;
    text-align: center;
  }

  .contact-footer-left,
  .contact-footer-right {
    flex-direction: column;
    gap: 0.5rem;
  }

  .contact-form-grid {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }

  .contact-message-title {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .contact-channel {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .contact-channel-label {
    font-size: 0.65rem;
  }

  .contact-message-panel {
    padding: 0.85rem;
  }

  .contact-send-btn {
    width: 100%;
  }

  .contact-field textarea {
    min-height: 96px;
  }
}

/* ---- Utility Animation Classes ---- */
.reveal-up {
  opacity: 0;
  transform: translateY(60px);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
}

/* ---- Page transition overlay ---- */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}

.page-transition-panel {
  position: absolute;
  width: 100%;
  height: 33.34%;
  background: var(--color-accent);
  transform: scaleY(0);
}

.page-transition-panel:nth-child(1) { top: 0; transform-origin: top; }
.page-transition-panel:nth-child(2) { top: 33.33%; transform-origin: center; }
.page-transition-panel:nth-child(3) { top: 66.66%; transform-origin: bottom; }

/* Custom Showcase Elements Cleaned Up */

/* ---- Screenshot Lightbox ---- */
.screenshot-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.screenshot-lightbox.is-active {
  pointer-events: all;
  opacity: 1;
}

.screenshot-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.screenshot-lightbox-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  max-height: 90vh;
}

.screenshot-lightbox-content img {
  max-height: 88vh;
  max-width: 80vw;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: scale(0.9) translateY(20px);
  transition: transform 0.5s var(--ease-out-expo);
}

.screenshot-lightbox.is-active .screenshot-lightbox-content img {
  transform: scale(1) translateY(0);
}

/* ---- Mobile responsive overrides ---- */
@media (max-width: 1024px) {
  .screenshot-lightbox-content img {
    max-width: 70vw;
  }
}

@media (max-width: 768px) {
  .projects-slider-container {
    padding: 2.5rem 0;
    margin-top: 0;
  }

  .projects-slider-group {
    gap: 1.5rem;
    padding-right: 1.5rem;
  }

  .project-card {
    width: 300px;
    height: 420px;
    border-radius: 16px;
  }
  
  .project-card-visual {
    height: 200px;
  }
  
  .project-image-wrapper {
    width: 130px;
    height: 130px;
  }
  
  .project-card:hover .project-image-wrapper,
  .project-card.is-active .project-image-wrapper {
    width: 92%;
    height: 92%;
  }

  .mockup-phone {
    width: 75px;
    height: 130px;
    border-radius: 10px;
  }
  
  .project-card:hover .mockup-phone,
  .project-card.is-active .mockup-phone {
    width: 90px;
    height: 160px;
    border-radius: 12px;
  }

  .project-card:hover .mockup-browser .mockup-image,
  .project-card.is-active .mockup-browser .mockup-image {
    transform: translateY(calc(-100% + 165px));
  }

  .project-card:hover .mockup-phone .mockup-image,
  .project-card.is-active .mockup-phone .mockup-image {
    transform: translateY(calc(-100% + 154px));
  }

  .projects-slider-track {
    animation-duration: 25s; /* Speed up a bit since cards are smaller and distance is shorter */
  }

  .screenshot-lightbox-content img {
    max-width: 92vw;
    max-height: 80vh;
    border-radius: 12px;
  }

  .mockup-arrow {
    opacity: 0.85;
    transform: scale(0.9);
    width: 30px;
    height: 30px;
  }
  
  .project-card:hover .mockup-arrow,
  .project-card.is-active .mockup-arrow {
    opacity: 0.9;
    transform: scale(0.9);
  }
}



.project-mini-screen {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 90vw;
  max-width: 800px;
  background: rgba(10, 10, 10, 0.65);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-mini-screen.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.mini-screen-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.mini-screen-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mini-screen-info {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mini-screen-title {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  margin: 0;
}

.mini-screen-desc {
  font-size: 1.125rem;
  color: var(--gray);
  line-height: 1.6;
  margin: 0;
  max-width: 600px;
}

.mini-screen-tech {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.mini-screen-tech span {
  font-size: 0.85rem;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  color: var(--gray-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .mini-screen-image {
    height: 250px;
  }
  .mini-screen-info {
    padding: 24px;
  }
  .mini-screen-title {
    font-size: 1.75rem;
  }
}



   ============================================================ */

.projects-stack-container {
  display: flex;
  flex-direction: column;
  gap: 15vh;
  padding-bottom: 20vh;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.project-card {
  position: sticky !important;
  top: 10vh !important;
  width: 100% !important;
  height: 80vh !important;
  display: flex !important;
  flex-direction: row-reverse !important; /* Info on Left, Visual on Right */
  align-items: stretch !important;
  background: rgba(15, 15, 15, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  transform-origin: top center !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
  transition: none !important; /* GSAP handles transitions */
}

/* Make sure the slider track/group CSS doesn't interfere */
.projects-slider-container, .projects-slider-track, .projects-slider-group {
  display: none !important;
}

.project-card-info {
  flex: 1 !important;
  padding: 60px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
}

.project-card-visual {
  flex: 1.2 !important;
  height: 100% !important;
  position: relative !important;
  border-radius: 32px 0 0 32px !important;
  overflow: hidden !important;
  background: rgba(var(--project-color-rgb), 0.05) !important;
}

.project-card-overlay, .project-gallery-dock, .project-hover-circle-screen {
  display: none !important; /* Hide old slider specific hovers */
}

.project-image-wrapper {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.project-title {
  font-size: 3rem !important;
  margin-bottom: 24px !important;
  background: linear-gradient(135deg, #fff, rgba(255,255,255,0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.project-description {
  font-size: 1.125rem !important;
  line-height: 1.6 !important;
  color: var(--gray-light) !important;
  margin-bottom: 32px !important;
}

@media (max-width: 900px) {
  .project-card {
    flex-direction: column-reverse !important;
    height: auto !important;
    min-height: 85vh !important;
    top: 5vh !important;
  }
  .project-card-info {
    padding: 30px !important;
    flex: none !important;
  }
  .project-card-visual {
    width: 100% !important;
    height: 45vh !important;
    border-radius: 32px 32px 0 0 !important;
  }
}


/* ============================================================
   PREMIUM BENTO GRID SHOWCASE
   ============================================================ */

.bento-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  gap: 24px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.project-card {
  position: relative !important;
  top: 0 !important;
  width: 100% !important;
  min-height: 450px !important; height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  background: rgba(15, 15, 15, 0.6) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 32px !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.project-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

/* Feature the first project (make it full width) */
.project-card:first-child {
  grid-column: span 2;
  min-height: 500px !important; height: auto !important;
  flex-direction: row !important;
}

.project-card-info {
  flex: 1 !important;
  padding: 40px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 24px !important;
  background: transparent !important;
  border: none !important;
  pointer-events: none; /* Let click pass to card */
}

.project-card:first-child .project-card-info {
  padding: 60px !important;
}

.project-card-visual {
  flex: 1 !important;
  height: 100% !important;
  position: relative !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: rgba(var(--project-color-rgb), 0.05) !important;
  pointer-events: none;
}

.project-image-wrapper {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.project-title {
  font-size: 2rem !important;
  margin-bottom: 16px !important;
  background: linear-gradient(135deg, #fff, rgba(255,255,255,0.7));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.project-card:first-child .project-title {
  font-size: 3rem !important;
}

.project-description {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: var(--gray-light) !important;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-card:first-child .project-description {
  font-size: 1.125rem !important;
  -webkit-line-clamp: 5;
}

.project-tech {
  margin-top: auto;
}

.project-card-overlay, .project-gallery-dock, .project-hover-circle-screen, .project-card-links {
  display: none !important;
}

/* Lightbox Styles */
.project-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-lightbox.is-active {
  opacity: 1;
  visibility: visible;
}

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 5, 0.85);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}

.lightbox-container {
  position: relative;
  width: 90vw;
  max-width: 1400px;
  height: 85vh;
  background: rgba(15, 15, 15, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  box-shadow: 0 40px 100px rgba(0,0,0,0.8);
  overflow: hidden;
  transform: translateY(40px) scale(0.95);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-lightbox.is-active .lightbox-container {
  transform: translateY(0) scale(1);
}

.lightbox-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-content-layout {
  display: flex;
  height: 100%;
}

.lightbox-carousel-container {
  flex: 2.7;
  position: relative;
  background: #0a0a0a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Padding reserves the controls pill, so the image can then use the whole
     remaining box instead of being capped well short of it. */
  padding: 1.25rem 1.25rem 5.25rem;
}

.lightbox-main-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.lightbox-controls {
  position: absolute;
  bottom: 30px;
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(255,255,255,0.05);
  padding: 10px 20px;
  border-radius: 100px;
}

.lightbox-prev, .lightbox-next {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 8px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.lightbox-prev:hover, .lightbox-next:hover {
  opacity: 1;
}

.lightbox-dots {
  display: flex;
  gap: 8px;
}

.lightbox-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  cursor: pointer;
  transition: all 0.2s;
}

.lightbox-dot.is-active {
  background: white;
  transform: scale(1.3);
}

.lightbox-info {
  flex: 1;
  min-width: 300px;
  max-width: 420px;
  padding: 60px 40px;
  border-left: 1px solid rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
}

.lightbox-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.5rem;
  margin-bottom: 24px;
}

.lightbox-desc {
  font-size: 1.1rem;
  color: #aaa;
  line-height: 1.6;
  margin-bottom: 40px;
}

.lightbox-links {
  margin-top: auto;
  display: flex;
  gap: 16px;
}

.lightbox-links a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  background: rgba(255,255,255,0.1);
  color: white;
  text-decoration: none;
  border-radius: 100px;
  font-weight: 500;
  transition: background 0.3s;
}

.lightbox-links a:hover {
  background: var(--accent-brand);
  color: white;
}

/* Tech Stack Tags in Lightbox */
.lightbox-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.lightbox-tech span {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.02);
}


/* Compacting the rest of the site */
.contact-new { padding: 80px 0; }

@media (max-width: 900px) {
  .bento-grid {
    grid-template-columns: 1fr;
  }
  .project-card:first-child {
    grid-column: 1;
    flex-direction: column !important;
    height: auto !important;
  }
  .lightbox-container {
    height: 90vh !important;
    width: 95vw !important;
    overflow-y: auto !important;
  }
  .lightbox-close {
    top: 16px !important;
    right: 16px !important;
    width: 40px !important;
    height: 40px !important;
    z-index: 100 !important;
  }
  .lightbox-content-layout {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100% !important;
  }
  .lightbox-carousel-container {
    height: 40vh !important;
    min-height: 250px !important;
    width: 100% !important;
    flex: none !important;
  }
  .lightbox-main-img {
    max-height: 80% !important;
    max-width: 95% !important;
  }
  .lightbox-info {
    padding: 24px 20px !important;
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    flex: 1 1 auto !important;
    height: auto !important;
  }
  .lightbox-title {
    font-size: 1.75rem !important;
    margin-bottom: 16px !important;
  }
  .lightbox-desc {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
  }
  .lightbox-tech {
    margin-bottom: 24px !important;
    gap: 8px !important;
  }
  .lightbox-links {
    margin-top: 20px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .lightbox-links a {
    padding: 10px 20px !important;
    font-size: 0.85rem !important;
    flex: 1 1 calc(50% - 6px) !important;
    justify-content: center !important;
  }
}




/* ============================================================
   RESPONSIVE — Mobile (< 900px)
   ============================================================ */
@media (max-width: 900px) {
  .proj-row {
    padding: 16px 0;
  }
  
  .proj-row:hover {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .proj-row-bg {
    display: none;
  }

  .proj-tags {
    display: none;
  }

  .proj-arrow {
    display: none;
  }

  .proj-name {
    font-size: 1rem !important;
  }

  .proj-oneliner {
    font-size: 0.85rem !important;
  }
}


/* ============================================================
   WORK / PROJECTS — Split-Screen Showcase
   ============================================================ */

/* -- Showcase Grid Layout -- */
.work-showcase {
  display: grid;
  /* minmax(0, Nfr), not bare Nfr — a bare fr track's implicit minimum is
     its content's min-content size, so a long title/tagline could grow this
     column (and shove the whole showcase wider) instead of being truncated
     by the ellipsis rules on .work-card-title/.work-card-tagline. */
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.38fr);
  gap: clamp(2rem, 3vw, 3.5rem);
  align-items: stretch !important; /* Stretch columns to equal height */
  /* Bounded height to fit screen. Expressed per project row so the list
     grows with the number of projects instead of squeezing every row:
     with 7 projects this equals the previous clamp(720px, 86vh, 960px). */
  height: calc(var(--work-card-count, 7) * clamp(102.86px, 12.286vh, 137.14px));
  overflow: hidden;
}

/* -- Left: Project Cards -- */
.work-cards {
  display: grid !important;
  grid-template-rows: repeat(var(--work-card-count, 7), minmax(0, 1fr)) !important; /* minmax(0,1fr) so rows truly divide the height instead of growing to fit content; the count is set from JS so adding a project can't break the grid */
  height: 100% !important;
  gap: 0 !important;
  overflow: hidden !important; /* No scrolling for the cards list */
  border-right: 1px solid rgba(255, 255, 255, 0.12); /* Vertical segregation line */
  padding-right: clamp(1.5rem, 2.5vw, 2.2rem); /* Right spacing to visual center */
}

.work-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-width: 0; /* grid items default to min-width:auto (content-based); without
                   this a long nowrap title/tagline can push the row wider than
                   its column, and .work-cards' overflow:hidden silently clips
                   the overflow instead of the ellipsis ever triggering. */
  height: 100%; /* Sized to fill grid row exactly */
  min-height: 0;
  padding: 0 1.75rem; /* Centered vertically by flex layout */
  margin: 0;
  border-left: 2px solid transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* Strong horizontal segregation line */
  background: rgba(255, 255, 255, 0.01);
  box-sizing: border-box;
  cursor: pointer;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.35s var(--ease-out-expo);
}

.work-card:first-child {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.work-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(198, 61, 47, 0.06), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.work-card:hover::before,
.work-card.is-active::before {
  opacity: 1;
}

.work-card.is-active {
  border-left-color: var(--accent-brand);
  background: rgba(255, 255, 255, 0.03);
}

.work-card:hover {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.02);
}

.work-card-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  flex-shrink: 0;
  width: 2rem;
}

.work-card-body {
  flex: 1;
  min-width: 0;
}

/* The !important here beats a stale `.project-title { font-size: 2rem !important }`
   rule further up the file (left over from a retired card layout). The work-card
   titles also carry .project-title, so without this they render at 32px and wrap.

   Title and tagline are also both clamped to one line: at narrower widths a
   longer title ("Medical Image Analysis") or tagline ("Custom XTTS Voice
   Cloning & Local LLM") would otherwise wrap to two lines while every other
   row stayed at one, breaking the row-to-row rhythm the grid depends on for
   all seven rows to read as evenly spaced. */
.work-card-title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.25vw, 1.2rem) !important;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 !important;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 0.5rem; /* clears the overflow edge before it clips a glyph */
}

.work-card-tagline {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin: 0.2rem 0 0 0;
  font-style: italic;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Italic ink slants past its own layout box — without this the last
     character's tip gets clipped by overflow:hidden even though the
     browser reports the text as fitting (scrollWidth === clientWidth). */
  padding-right: 0.5rem;
}

.work-card-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s ease, transform 0.35s var(--ease-out-expo);
}

.work-card-arrow svg {
  width: 100%;
  height: 100%;
}

.work-card:hover .work-card-arrow,
.work-card.is-active .work-card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* Hide lightbox data (desktop/tablet only — the mobile breakpoint below
   re-reveals these as the inline card content, and needs to win) */
@media (min-width: 769px) {
  .work-card .project-card-info,
  .work-card .project-gallery-dock {
    display: none !important;
  }
}

/* -- Right: Sticky Preview Panel -- */
.work-preview {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  justify-content: space-between !important;
}

/* Reel Container */
.work-preview-reel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  flex: 0 1 auto;
  min-height: 0;
  /* On short viewports the reel shrinks first; object-fit: contain keeps the
     screenshots undistorted, and the detail panel below never gets clipped. */
  max-height: calc(100% - clamp(12.5rem, 13vh + 7.5rem, 15.5rem));
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-bg-secondary);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.work-reel-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Do not crop, keep original aspect ratio */
  background: var(--color-bg-secondary);
  /* No CSS transition here on purpose — GSAP drives the crossfade in
     initWorkShowcase(). Two animators on one property made the reel stutter
     and occasionally stall with both frames half-visible. */
  will-change: opacity;
  backface-visibility: hidden;
}

.work-reel-img--a {
  z-index: 2;
  opacity: 1;
}

.work-reel-img--b {
  z-index: 1;
  opacity: 0;
}


/* -- Detail Panel -- */
.work-preview-details {
  padding: 0.5rem 0.25rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 1rem;
  /* The panel is re-populated on every hover. Anchoring its height here means
     a 3-word project and a 6-chip one occupy the same box, so nothing below
     jumps and nothing gets clipped by the section's bounded height. */
  min-height: clamp(11.5rem, 13vh + 6.5rem, 14.5rem);
  contain: layout;
}

/* Each block gets a floor so shorter projects don't collapse the panel. */
.work-detail-title {
  min-height: 1.1em;
}

.work-detail-desc {
  min-height: 6.6em; /* exactly the 4 clamped lines, so every project is the same height */
}

.work-detail-tech {
  min-height: 1.6rem;
  align-content: flex-start;
}

.work-detail-links {
  min-height: 1.1rem;
}

.work-detail-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-brand);
  display: block;
  margin-bottom: 0.6rem;
}

.work-detail-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 700;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 0.75rem 0;
}

.work-detail-desc {
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0 0 1.2rem 0;
  max-width: 52ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}

.work-detail-tech {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}

.work-detail-tech span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  line-height: 1;
}

.work-detail-links {
  display: flex;
  gap: 1.5rem;
}

.work-detail-links a {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  transition: color 0.3s ease;
}

.work-detail-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--accent-brand);
  transition: width 0.35s var(--ease-out-expo);
}

.work-detail-links a:hover {
  color: var(--accent-brand);
}

.work-detail-links a:hover::after {
  width: 100%;
}

.work-detail-links a svg {
  flex-shrink: 0;
}



/* -- Mobile: ≤ 768px -- */
@media (max-width: 768px) {
  .work-showcase {
    display: block !important; /* Stack vertically on mobile */
    height: auto !important;
  }

  /* Hide the right preview panel completely on mobile */
  .work-preview {
    display: none !important;
  }

  .work-cards {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    gap: 2.2rem !important; /* Visual separation between project cards */
    overflow: visible !important;
    border-right: none !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
  }

  .work-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    height: auto !important;
    width: 100% !important;
    padding: 1.5rem !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    box-sizing: border-box !important;
    cursor: default !important;
    gap: 0.8rem !important;
    min-width: 0 !important;
    max-width: none !important;
    transition: border-color 0.4s ease !important;
    transform: none !important;
  }

  .work-card:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  /* Active states overrides */
  .work-card.is-active {
    border-color: rgba(255, 255, 255, 0.25) !important;
    background: rgba(255, 255, 255, 0.03) !important;
  }

  .work-card:hover {
    transform: none !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
  }

  /* Order of components within the card */
  .work-card-num {
    order: 1 !important;
    font-size: 0.75rem !important;
    color: var(--color-accent) !important;
    margin-bottom: -0.2rem !important;
  }

  .work-card-body {
    order: 2 !important;
    width: 100% !important;
    display: block !important;
  }

  .work-card-title {
    font-size: 1.35rem !important;
    margin-bottom: 0.2rem !important;
    /* Cards are stacked and height:auto on mobile — nothing depends on a
       fixed row height here, so let long titles wrap instead of truncating. */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .work-card-tagline {
    display: block !important;
    font-size: 0.82rem !important;
    color: var(--color-text-secondary) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  .work-card-thumbnail {
    display: none !important;
  }

  .work-card-arrow {
    display: none !important; /* Hide arrow on mobile cards */
  }

  /* Embedded slideshow inside card */
  .project-gallery-dock {
    display: block !important; /* Make visible on mobile */
    order: 3 !important;
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.2) !important;
    margin-top: 0.4rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) !important;
  }

  .project-gallery-dock img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* never crop a screenshot — letterbox instead */
    background: var(--color-bg-secondary);
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .project-gallery-dock img.is-active {
    opacity: 1 !important;
  }

  /* Embedded details block */
  .project-card-info {
    display: flex !important; /* Make visible on mobile */
    flex-direction: column !important;
    gap: 0.7rem !important;
    order: 4 !important;
    width: 100% !important;
    margin-top: 0.2rem !important;
  }

  /* Hide duplicate title in info */
  .project-card-info .project-title {
    display: none !important;
  }

  .project-card-info .project-description {
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
    color: var(--color-text-secondary) !important;
    margin: 0 !important;
  }

  .project-card-info .project-tech {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
  }

  .project-card-info .project-tech span {
    font-size: 0.55rem !important;
    padding: 0.25rem 0.5rem !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.02) !important;
    color: var(--color-text-secondary) !important;
  }

  .project-card-info .project-card-links {
    display: flex !important;
    gap: 1rem !important;
    margin-top: 0.2rem !important;
  }

  .project-card-info .project-card-links a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    color: var(--color-accent) !important;
    text-decoration: none !important;
  }
}

/* ============================================================
   LIGHT THEME STYLING
   ============================================================ */

/* Theme Variables Override — warm cream editorial palette (the site's default look;
   see the inline theme script in <head> and initTheme() in app.js for why this is
   the starting state even though the attribute is named "light"). Blended from
   arteforma.ru / lasstattoo.com / darina-cg.com: warm ivory ground, near-black
   charcoal text, one confident terracotta accent — never stark white or pure black. */
[data-theme="light"] {
  /* Solved so every role has the SAME WCAG contrast ratio against the page
     background as its dark-theme counterpart (text 15.7, secondary 7.5,
     muted 3.4, accent 5.4, surfaces 1.057 / 1.166, borders 1.29). The page
     background is a deeper warm parchment (#eee5d2) so the tone — not only
     the numbers — sits closer to the dark theme's warm brown. Headings use
     --color-text instead of a forced #000, exactly as dark uses cream. */
  --color-bg: #eee5d2;
  --color-bg-secondary: #eadfc7;
  --color-bg-tertiary: #e3d4b5;
  --color-text: #0d0b0a;
  --color-text-secondary: #4d453b;
  --color-text-muted: #83796b;
  --color-accent: #a43327;
  --accent-brand: #a43327;
  --color-accent-secondary: #8f2f1f;
  --color-border: rgba(13, 11, 10, 0.122);
  --color-white: #0d0b0a;
  --ink-rgb: 13, 11, 10; /* rgb of --color-text, for translucent tints */
  --bg-rgb: 238, 229, 210; /* rgb of --color-bg, for translucent overlays */
}

/* Force all headings to turn black in light theme */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5,
[data-theme="light"] h6 {
  color: var(--color-text) !important;
}

/* Navigation Mix-blend-mode normal override */
[data-theme="light"] .nav {
  mix-blend-mode: normal;
}

/* Custom Cursor in Light Mode */
[data-theme="light"] .cursor-dot {
  background: rgba(var(--ink-rgb), 0.92);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.12);
}
[data-theme="light"] .cursor.is-hovering .cursor-dot {
  background: rgba(var(--ink-rgb), 1);
  box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.06);
}

/* Desktop Theme Toggle Text Button Style */
.theme-toggle-text-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: right;
  width: auto;
  align-self: flex-end;
  margin-top: 0.8rem;
}

/* Mobile Theme Toggle Button Style */
.mobile-theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  margin-top: 1.5rem;
  padding: 0.5rem 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

.mobile-theme-toggle:hover {
  color: var(--color-text);
  border-color: var(--color-text-secondary);
  background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="light"] .mobile-theme-toggle:hover {
  background-color: rgba(var(--ink-rgb), 0.03);
}

.mobile-theme-toggle-icon {
  position: relative;
  width: 12px;
  height: 12px;
  display: inline-block;
}

.mobile-theme-toggle-icon svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.5s var(--ease-out-expo), opacity 0.3s ease;
}

.mobile-theme-toggle .sun-icon {
  opacity: 0;
  transform: rotate(-90deg) scale(0);
}

.mobile-theme-toggle .moon-icon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

[data-theme="light"] .mobile-theme-toggle .sun-icon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

[data-theme="light"] .mobile-theme-toggle .moon-icon {
  opacity: 0;
  transform: rotate(90deg) scale(0);
}

/* Light Theme Component & Visual Adjustments */
[data-theme="light"] .hero-gradient {
  background:
    radial-gradient(ellipse 70% 55% at 30% 0%, rgba(var(--ink-rgb), 0.02) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 80%, rgba(var(--ink-rgb), 0.01) 0%, transparent 55%),
    radial-gradient(ellipse 40% 50% at 75% 25%, rgba(var(--ink-rgb), 0.015) 0%, transparent 60%) !important;
}

[data-theme="light"] .hero-orb-left {
  background: radial-gradient(circle, rgba(var(--ink-rgb), 0.05) 0%, transparent 68%) !important;
}

[data-theme="light"] .hero-orb-right {
  background: radial-gradient(circle, rgba(var(--ink-rgb), 0.03) 0%, transparent 72%) !important;
}

[data-theme="light"] .philosophy-gradient {
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(var(--ink-rgb), 0.01) 0%, transparent 50%),
    radial-gradient(ellipse 50% 40% at 20% 80%, rgba(var(--ink-rgb), 0.008) 0%, transparent 50%) !important;
}

[data-theme="light"] .contact-message-panel {
  border-color: rgba(var(--ink-rgb), 0.06) !important;
  background:
    linear-gradient(180deg, rgba(var(--ink-rgb), 0.02), rgba(var(--ink-rgb), 0.005)),
    radial-gradient(circle at top left, rgba(var(--ink-rgb), 0.015), transparent 38%) !important;
}

[data-theme="light"] .contact-message-panel:hover,
[data-theme="light"] .contact-message-panel:focus-within {
  border-color: rgba(var(--ink-rgb), 0.12) !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.03) !important;
}

[data-theme="light"] .contact-field input,
[data-theme="light"] .contact-field textarea {
  border-color: rgba(var(--ink-rgb), 0.122) !important;
  background: rgba(var(--ink-rgb), 0.027) !important; /* same step from the page as dark's field (1.056) */
}

[data-theme="light"] .contact-field input:focus,
[data-theme="light"] .contact-field textarea:focus {
  border-color: rgba(198, 61, 47, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(198, 61, 47, 0.08) !important;
  background: rgba(var(--ink-rgb), 0.05) !important;
}

/* Split-Screen Showcase Light Mode Overrides */
[data-theme="light"] .work-cards {
  border-right-color: rgba(var(--ink-rgb), 0.12) !important;
}
[data-theme="light"] .work-card {
  border-bottom-color: rgba(var(--ink-rgb), 0.15) !important;
  background: rgba(var(--ink-rgb), 0.01) !important;
}
[data-theme="light"] .work-card:first-child {
  border-top-color: rgba(var(--ink-rgb), 0.15) !important;
}
[data-theme="light"] .work-card::before {
  background: linear-gradient(90deg, rgba(198, 61, 47, 0.04), transparent);
}
[data-theme="light"] .work-card.is-active {
  background: rgba(var(--ink-rgb), 0.03) !important;
}
[data-theme="light"] .work-card:hover {
  background: rgba(var(--ink-rgb), 0.02) !important;
}
[data-theme="light"] .work-preview-reel {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .work-detail-tech span {
  border-color: rgba(var(--ink-rgb), 0.1);
  background: rgba(var(--ink-rgb), 0.03);
  color: var(--color-text-secondary);
}
[data-theme="light"] .work-detail-links a {
  color: var(--color-text);
}
[data-theme="light"] .work-card-title,
[data-theme="light"] .project-title,
[data-theme="light"] .work-detail-title {
  color: var(--color-text) !important;
  background: none !important;
  -webkit-text-fill-color: var(--color-text) !important;
}

/* Mobile work card overrides in Light Theme */
@media (max-width: 768px) {
  [data-theme="light"] .work-cards {
    border-right: none !important;
  }
  [data-theme="light"] .work-card {
    border: 1px solid rgba(var(--ink-rgb), 0.08) !important;
    background: rgba(var(--ink-rgb), 0.01) !important;
  }
  [data-theme="light"] .work-card:first-child {
    border-top: 1px solid rgba(var(--ink-rgb), 0.08) !important;
  }
  [data-theme="light"] .work-card.is-active {
    border-color: rgba(var(--ink-rgb), 0.18) !important;
    background: rgba(var(--ink-rgb), 0.02) !important;
  }
  [data-theme="light"] .work-card:hover {
    border-color: rgba(var(--ink-rgb), 0.18) !important;
  }
  [data-theme="light"] .project-gallery-dock {
    background: rgba(var(--ink-rgb), 0.03) !important;
  }
  [data-theme="light"] .project-card-info .project-tech span {
    border-color: rgba(var(--ink-rgb), 0.08) !important;
    background: rgba(var(--ink-rgb), 0.02) !important;
    color: var(--color-text-secondary) !important;
  }
}


[data-theme="light"] .bento-item {
  border-color: rgba(var(--ink-rgb), 0.06) !important;
  background:
    linear-gradient(180deg, rgba(var(--ink-rgb), 0.02), rgba(var(--ink-rgb), 0.005)),
    radial-gradient(circle at top left, rgba(var(--ink-rgb), 0.015), transparent 38%) !important;
}

[data-theme="light"] .about-statement-card {
  border-color: rgba(var(--ink-rgb), 0.06) !important;
}

[data-theme="light"] .about-card-glow {
  background: radial-gradient(circle at 10% 10%, rgba(var(--ink-rgb), 0.015) 0%, transparent 60%) !important;
}

/* Lightbox overlays in Light Mode */
[data-theme="light"] .lightbox-backdrop {
  background: rgba(var(--bg-rgb), 0.85) !important;
}

[data-theme="light"] .lightbox-container {
  background: rgba(var(--bg-rgb), 0.96) !important;
  border: 1px solid rgba(var(--ink-rgb), 0.08) !important;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.08) !important;
}

[data-theme="light"] .lightbox-desc {
  color: var(--color-text-secondary) !important;
}

[data-theme="light"] .lightbox-links a {
  background: rgba(var(--ink-rgb), 0.06) !important;
  color: var(--color-text) !important;
}

[data-theme="light"] .lightbox-links a:hover {
  background: var(--accent-brand) !important;
  color: #ffffff !important;
}

[data-theme="light"] .lightbox-close {
  background: rgba(var(--ink-rgb), 0.04) !important;
  color: var(--color-text) !important;
}

[data-theme="light"] .lightbox-prev,
[data-theme="light"] .lightbox-next {
  background: rgba(var(--ink-rgb), 0.04) !important;
  color: var(--color-text) !important;
}

[data-theme="light"] .screenshot-lightbox-backdrop {
  background: rgba(var(--bg-rgb), 0.85) !important;
}

/* Projects Section Light Mode Overrides */
[data-theme="light"] .work .proj-oneliner,
[data-theme="light"] .work .proj-oneliner.project-description {
  color: var(--color-text-secondary) !important;
}

[data-theme="light"] .work .proj-num {
  color: var(--color-text-muted) !important;
}

[data-theme="light"] .work .proj-tags span {
  border-color: rgba(var(--ink-rgb), 0.08) !important;
  background: rgba(var(--ink-rgb), 0.03) !important;
  color: var(--color-text-secondary) !important;
}

[data-theme="light"] .work .project-card.proj-row::after {
  color: var(--color-text-secondary) !important;
}

[data-theme="light"] .work .proj-arrow {
  color: var(--color-text) !important;
}

/* ============================================================
   EXPERIENCE — Split-Screen Role Switcher
   Mirrors .work-showcase in the Projects section: a compact list
   on the left, a detail panel on the right that updates on
   hover/click — see initExperienceShowcase() in js/app.js.
   ============================================================ */

.xp-headline {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  max-width: 18ch;
}

.xp-showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 3vw, 3.5rem);
  align-items: start;
}

/* -- Left: Role Cards -- */
.xp-cards {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}

.xp-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0; /* same fix as .work-card — a flex item's default min-width:auto
                   is content-based, which a nowrap title/company can inflate */
  padding: clamp(1.35rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.01);
  cursor: pointer;
  transition: background 0.4s ease, transform 0.35s var(--ease-out-expo);
}

.xp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(198, 61, 47, 0.06), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.xp-card:hover::before,
.xp-card.is-active::before {
  opacity: 1;
}

.xp-card.is-active {
  border-left: 2px solid var(--accent-brand);
  background: rgba(255, 255, 255, 0.03);
  padding-left: calc(clamp(1.35rem, 2.5vw, 1.75rem) - 2px);
}

.xp-card:hover {
  transform: translateX(4px);
  background: rgba(255, 255, 255, 0.02);
}

.xp-card-num {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--color-text-muted);
  flex-shrink: 0;
  width: 2rem;
}

.xp-card-body {
  flex: 1;
  min-width: 0;
}

/* Same one-line truncation as .work-card-title/.work-card-tagline — a long
   title ("LLM Evaluator & Prompt Engineer") or company line otherwise wraps
   at narrower widths while its siblings stay single-line, breaking the
   row-to-row rhythm. */
.xp-card-title {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 0.5rem;
}

.xp-card-company {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin: 0.2rem 0 0 0;
  font-style: italic;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 0.5rem;
}

.xp-card-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.35s ease, transform 0.35s var(--ease-out-expo);
}

.xp-card-arrow svg {
  width: 100%;
  height: 100%;
}

.xp-card:hover .xp-card-arrow,
.xp-card.is-active .xp-card-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* -- Right: Detail Panel -- */
.xp-preview {
  padding: 0.5rem 0.25rem;
  /* Reserves room for the longest role (5 bullet points, measured ~485px)
     so switching to a shorter one doesn't shrink the section and shift the
     Contact block below. */
  min-height: 30.5rem;
}

.xp-preview-meta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}

.xp-preview-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  white-space: nowrap;
  line-height: 1;
}

.xp-preview-tag-current {
  color: var(--accent-brand);
  border-color: rgba(198, 61, 47, 0.35);
  background: rgba(198, 61, 47, 0.06);
}

.xp-tag-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent-brand);
  animation: xpBlink 2s ease-in-out infinite;
}

@keyframes xpBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.xp-preview-period,
.xp-preview-type {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.xp-preview-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 0.5rem 0;
}

.xp-preview-company {
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.3vw, 1.15rem);
  font-weight: 500;
  color: var(--color-accent);
  margin: 0 0 1.1rem 0;
}

.xp-preview-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.85em;
  color: var(--color-text-muted);
}

.xp-preview-summary {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin: 0 0 1.25rem 0;
}

.xp-preview-points {
  list-style: none;
  margin: 0 0 1.35rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 66ch;
}

.xp-preview-points li {
  position: relative;
  padding-left: 1.5rem;
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.xp-preview-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.75rem;
  height: 1px;
  background: var(--accent-brand);
}

.xp-preview-points em {
  font-style: italic;
  color: var(--color-text);
}

.xp-preview-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.xp-preview-stack span {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.02);
  color: var(--color-text-muted);
  white-space: nowrap;
  line-height: 1;
}

/* -- Mobile: stack, each card expands inline instead of a shared preview -- */
@media (max-width: 768px) {
  .xp-showcase {
    display: block;
  }

  .xp-cards {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-top: none;
  }

  .xp-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    border: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    border-radius: 14px;
    cursor: default;
    transform: none !important;
  }

  .xp-card-title,
  .xp-card-company {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  .xp-card-arrow {
    display: none;
  }

  /* The shared preview panel is hidden — each card shows its own data inline. */
  .xp-preview {
    display: none;
  }

  .xp-card .xp-data {
    display: block !important;
    margin-top: 0.4rem;
  }

  .xp-data-period,
  .xp-data-type,
  .xp-data-tag,
  .xp-data-note {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-right: 0.6rem;
  }

  .xp-data-tag {
    color: var(--accent-brand);
  }

  .xp-data-summary {
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0.6rem 0 0.85rem 0;
  }

  .xp-data-points {
    list-style: none;
    margin: 0 0 0.85rem 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  .xp-data-points li {
    position: relative;
    padding-left: 1.4rem;
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
  }

  .xp-data-points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 0.7rem;
    height: 1px;
    background: var(--accent-brand);
  }

  .xp-data-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .xp-data-stack span {
    font-family: var(--font-mono);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.02);
    color: var(--color-text-muted);
  }
}

@media (prefers-reduced-motion: reduce) {
  .xp-card,
  .xp-card::before,
  .xp-card-arrow {
    transition: none !important;
  }

  .xp-tag-dot {
    animation: none !important;
  }
}

/* -- Light theme -- */
[data-theme="light"] .xp-card {
  background: rgba(var(--ink-rgb), 0.01);
}

[data-theme="light"] .xp-card::before {
  background: linear-gradient(90deg, rgba(198, 61, 47, 0.04), transparent);
}

[data-theme="light"] .xp-card.is-active {
  background: rgba(var(--ink-rgb), 0.03);
}

[data-theme="light"] .xp-card:hover {
  background: rgba(var(--ink-rgb), 0.02);
}

[data-theme="light"] .xp-card-title,
[data-theme="light"] .xp-preview-title {
  color: var(--color-text) !important;
}

[data-theme="light"] .xp-preview-tag,
[data-theme="light"] .xp-preview-stack span,
[data-theme="light"] .xp-data-stack span {
  border-color: rgba(var(--ink-rgb), 0.1);
  background: rgba(var(--ink-rgb), 0.02);
}

/* ============================================================
   MOBILE — floating menu button
   The hamburger stays on screen at all times so any section is one tap
   away. Previously the whole nav bar slid out of view as soon as you
   scrolled down (initNavigation adds .is-hidden), taking the button with
   it. Desktop keeps that hide-on-scroll behaviour untouched.
   ============================================================ */
@media (max-width: 768px) {
  .nav,
  .nav.is-hidden {
    transform: none !important;         /* never slide away */
    mix-blend-mode: normal !important;  /* dark theme's blend would invert the button's own background */
    top: calc(0.5rem + env(safe-area-inset-top, 0px));
    pointer-events: none;               /* the empty bar must not swallow taps meant for the page */
  }

  .nav-menu-btn {
    pointer-events: auto;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--bg-rgb), 0.82);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid var(--color-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.3s var(--ease-out-expo), box-shadow 0.3s ease;
  }

  .nav-menu-btn:active {
    transform: scale(0.92);
  }

  .nav-menu-btn .menu-line {
    width: 20px; /* the desktop 28px bars are too wide for a 52px circle */
  }
}