/* =====================================================
   ELIOR NISSIM PORTFOLIO — STYLES
   Aesthetic: Ink & Neon — dark, painterly, editorial
   ===================================================== */

/* ---------- TOKENS ---------- */
:root {
  --bg:            oklch(12% 0.01 60);
  --bg-mid:        oklch(16% 0.012 60);
  --bg-card:       oklch(18% 0.013 55);
  --surface:       oklch(22% 0.015 55);
  --border:        oklch(30% 0.015 55);

  --text-primary:  oklch(94% 0.005 80);
  --text-secondary:oklch(78% 0.008 70);   /* was 65% - 5.96:1, now ~9.5:1 */
  --text-muted:    oklch(64% 0.008 65);   /* was 45% - failed AA at 2.59:1 */

  --accent-cyan:   oklch(72% 0.18 195);
  --accent-gold:   oklch(75% 0.16 75);
  --accent-cyan-dim: oklch(72% 0.18 195 / 0.15);
  --accent-gold-dim: oklch(75% 0.16 75  / 0.12);

  --header-h:      64px;
  --radius:        6px;
  --transition:    0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

/* no-grain / no-glow utility classes */
body.no-grain::before { opacity: 0 !important; }
body.no-glow .hero-name .last { animation: none !important; text-shadow: none !important; }

/* Grain texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  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)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
  z-index: 9999;
}

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; }

/* ---------- HEADER ---------- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: oklch(10% 0.01 60 / 0.88);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  transition: box-shadow 0.3s;
}
.site-header.scrolled {
  box-shadow: 0 4px 32px oklch(0% 0 0 / 0.5);
}

.header-inner {
  max-width: 1440px;
  margin: 0 auto;
  height: var(--header-h);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 32px;
}

.logo {
  display: flex;
  align-items: center;
  transition: opacity 0.2s;
}
.logo:hover { opacity: 0.75; }

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  padding: 6px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--transition), background var(--transition);
  position: relative;
}
.nav-link:hover { color: var(--text-primary); background: var(--surface); }
.nav-link.active {
  color: var(--accent-cyan);
}
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 2px; left: 14px; right: 14px;
  height: 1.5px;
  background: var(--accent-cyan);
  border-radius: 2px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--text-secondary);
  transition: color var(--transition), background var(--transition);
}
.contact-icon:hover {
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.hamburger span {
  display: block;
  width: 20px; height: 1.5px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: all 0.3s;
}

/* Mobile nav */
.mobile-nav {
  display: none;
  flex-direction: column;
  background: oklch(10% 0.01 60 / 0.97);
  padding: 12px 28px 16px;
  border-top: 1px solid var(--border);
  gap: 4px;
}
.mobile-nav.open { display: flex; }
.mobile-nav-link {
  padding: 10px 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
  transition: color 0.2s;
}
.mobile-nav-link:last-child { border-bottom: none; }
.mobile-nav-link.active { color: var(--accent-cyan); }

/* ---------- HERO SECTION ---------- */
.hero-section {
  position: relative;
  margin-top: var(--header-h);
  min-height: 72vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
}

/* Brush stroke clip using SVG clip path */
.hero-section::before,
.hero-section::after {
  content: '';
  position: absolute;
  left: -4%; right: -4%;
  height: 60px;
  z-index: 2;
  pointer-events: none;
}
.hero-section::before {
  top: -2px;
  background: var(--bg);
  clip-path: polygon(0 0, 100% 0, 100% 20%, 94% 60%, 88% 100%, 75% 70%, 60% 100%, 45% 55%, 30% 95%, 18% 55%, 8% 90%, 0 40%);
}
.hero-section::after {
  bottom: -2px;
  background: var(--bg);
  clip-path: polygon(0 100%, 100% 100%, 100% 60%, 92% 10%, 85% 55%, 72% 5%, 60% 50%, 48% 0%, 35% 45%, 22% 5%, 10% 50%, 0 15%);
}

/* Angled brush edges via SVG */
.brush-top, .brush-bottom {
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.brush-top { top: 0; }
.brush-bottom { bottom: 0; }

.brush-top svg, .brush-bottom svg {
  position: absolute;
  width: 100%; height: 100%;
}

.hero-bg-placeholder {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      oklch(18% 0.04 240 / 0.6) 0%,
      oklch(14% 0.02 60) 50%,
      oklch(20% 0.05 30 / 0.4) 100%
    );
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}

/* Striped placeholder pattern */
.hero-bg-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    oklch(100% 0 0 / 0.025) 0px,
    oklch(100% 0 0 / 0.025) 1px,
    transparent 1px,
    transparent 16px
  );
}

.placeholder-label {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: oklch(60% 0 0 / 0.4);
  text-transform: uppercase;
  border: 1px dashed oklch(60% 0 0 / 0.2);
  padding: 8px 16px;
  border-radius: 3px;
  position: relative;
  z-index: 1;
}

/* Ink splatter blobs */
.hero-section .ink-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 0;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 28px 80px;
  text-align: center !important;
}

.hero-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(51px, 8vw, 112px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  text-shadow: 0 0 80px var(--accent-cyan-dim), 0 4px 24px oklch(0% 0 0 / 0.5);
  margin-bottom: 16px;
}

/* Cyan accent on last name */
.hero-name .last {
  color: var(--accent-cyan);
  -webkit-text-stroke: 0px;
}

.hero-subtitle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 6px;
}

.hero-subtitle-pipe {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 300;
  color: var(--accent-gold);
  opacity: 0.6;
  user-select: none;
}

.hero-titles-main {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13px, 1.5vw, 17px);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin-bottom: 0;
  white-space: nowrap;
}

.hero-titles-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(11px, 1.2vw, 14px);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-gold);
  opacity: 0.7;
  margin-bottom: 28px;
}

.hero-bio-sections {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto;
}

.hero-bio-main {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(16px, 1.6vw, 19px);
  font-weight: 500;
  line-height: 1.65;
  color: var(--text-primary);
}

.hero-bio-secondary {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-secondary);
}

.hero-bio-closing {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* ---------- ACCORDION SECTION ---------- */
.accordion-section {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.acc-bar {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline: none;
  border-top: 1px solid var(--border);
  /* collapsed height */
  --collapsed-h: 80px;
  height: var(--collapsed-h);
  transition: height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 0;
}
.acc-bar:last-child { border-bottom: 1px solid var(--border); }

/* BG placeholder */
.acc-bar-bg-placeholder {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      oklch(18% 0.03 220 / 0.5) 0%,
      oklch(14% 0.01 60) 100%
    );
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
.acc-bar-bg-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    oklch(100% 0 0 / 0.018) 0px,
    oklch(100% 0 0 / 0.018) 1px,
    transparent 1px,
    transparent 14px
  );
}
.acc-bar-bg-placeholder span {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  color: oklch(55% 0 0 / 0.35);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border: 1px dashed oklch(60% 0 0 / 0.15);
  padding: 5px 12px;
  border-radius: 3px;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.acc-bar-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, oklch(10% 0.01 60 / 0.72) 0%, oklch(10% 0.01 60 / 0.4) 100%);
  transition: opacity var(--transition);
  z-index: 1;
}

/* Hover state — bg scale + overlay boost (height handled by JS) */
.acc-bar:hover .acc-bar-bg-placeholder { transform: scale(1.06); opacity: 1; }
.acc-bar:not([aria-expanded="true"]):hover .acc-bar-overlay { opacity: 0.3; }
.acc-bar[aria-expanded="true"] .acc-bar-overlay { opacity: 0.4; }

/* Bar header (always visible, hides when expanded to avoid duplicate title) */
.acc-bar-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--collapsed-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px 0 48px;
  z-index: 3;
  transition: opacity 0.3s;
}
.acc-bar[aria-expanded="true"] .acc-bar-header {
  opacity: 0;
  pointer-events: none;
}

.acc-bar-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: 0.06em;
  color: var(--text-primary);
  transition: color var(--transition), letter-spacing var(--transition);
  white-space: nowrap;
  overflow: visible;
}
.acc-bar:hover .acc-bar-title {
  color: var(--accent-cyan);
  letter-spacing: 0.1em;
}
.acc-bar[aria-expanded="true"] .acc-bar-title {
  color: var(--accent-cyan);
}

.acc-bar-arrow {
  color: var(--text-muted);
  transition: transform var(--transition), color var(--transition);
  display: flex;
  align-items: center;
}
.acc-bar:hover .acc-bar-arrow { color: var(--accent-cyan); }
.acc-bar[aria-expanded="true"] .acc-bar-arrow {
  transform: rotate(180deg);
  color: var(--accent-cyan);
}

/* Expanded content */
.acc-bar-content {
  position: absolute;
  top: var(--collapsed-h);
  left: 0; right: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s 0.1s;
  z-index: 3;
}
.acc-bar[aria-expanded="true"] .acc-bar-content {
  opacity: 1;
  pointer-events: auto;
}

.acc-content-inner {
  padding: 20px 48px 60px;
  max-width: 1440px;
}

.acc-section-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 5vw, 56px);
  letter-spacing: 0.06em;
  color: var(--accent-cyan);
  margin-bottom: 12px;
}

.acc-section-desc {
  font-size: 15px;
  font-weight: 300;
  color: var(--text-secondary);
  max-width: 680px;
  line-height: 1.75;
  margin-bottom: 40px;
  border-left: 2px solid var(--accent-cyan-dim);
  padding-left: 16px;
}

/* ---------- MEDIA GRID ---------- */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 28px;
}

.media-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}
.media-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 48px oklch(0% 0 0 / 0.5), 0 0 0 1px var(--accent-cyan-dim);
  border-color: oklch(35% 0.04 195);
}

.media-thumb {
  aspect-ratio: 16/9;
  background: var(--surface);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* "View Gallery" overlay on hover */
.media-thumb-hover {
  position: absolute;
  inset: 0;
  background: oklch(0% 0 0 / 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s;
  z-index: 3;
}
.media-card:hover .media-thumb-hover { opacity: 1; }
.media-thumb-hover-text {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.9);
  border: 1px solid rgba(255,255,255,0.35);
  padding: 9px 20px;
  border-radius: 3px;
}
.media-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    oklch(100% 0 0 / 0.03) 0px,
    oklch(100% 0 0 / 0.03) 1px,
    transparent 1px,
    transparent 14px
  );
}
.media-thumb-label {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  color: oklch(50% 0 0 / 0.5);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px dashed oklch(50% 0 0 / 0.2);
  padding: 4px 10px;
  border-radius: 3px;
  position: relative;
  z-index: 1;
}

/* Video vs image indicator */
.media-type-badge {
  position: absolute;
  top: 10px; right: 10px;
  background: oklch(0% 0 0 / 0.6);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  z-index: 2;
}

.media-info {
  padding: 16px 18px 18px;
  border-top: 1px solid var(--border);
}

.media-desc {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 12px;
}

.made-with-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.made-with-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 2px;
}

.sw-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 10px 4px 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: border-color 0.2s, color 0.2s;
}
.sw-badge:hover {
  border-color: var(--accent-cyan-dim);
  color: var(--accent-cyan);
}

.sw-badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.sw-badge-icon img,
.sw-badge-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.sw-badge-label {
  line-height: 1;
}

/* ---------- FOOTER ---------- */
.site-footer {
  padding: 32px 28px;
  text-align: center;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}

/* =====================================================
   CV PAGE STYLES
   ===================================================== */

.cv-main {
  margin-top: var(--header-h);
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 28px 80px;
}

.cv-hero {
  padding: 64px 0 48px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cv-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(52px, 8vw, 96px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.cv-name-last {
  color: var(--accent-cyan);
}

.cv-subtitle-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 6px;
}
.cv-subtitle-pipe {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 300;
  color: var(--accent-gold);
  opacity: 0.6;
  user-select: none;
}
.cv-subtitle-main {
  font-size: clamp(12px, 1.3vw, 15px);
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent-gold);
  margin: 0;
}
.cv-subtitle-sub {
  font-size: clamp(10px, 1.1vw, 13px);
  font-weight: 300;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-gold);
  opacity: 0.7;
  margin-bottom: 18px;
}

.cv-contacts {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted);
}
.cv-contacts span { cursor: pointer; transition: color 0.2s; }
.cv-contacts span:hover { color: var(--accent-cyan); }

.cv-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border: 1px solid var(--accent-cyan-dim);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--accent-cyan);
  background: var(--accent-cyan-dim);
  transition: background var(--transition), border-color var(--transition), transform 0.2s;
  white-space: nowrap;
}
.cv-download-btn:hover {
  background: oklch(72% 0.18 195 / 0.25);
  border-color: var(--accent-cyan);
  transform: translateY(-2px);
}

/* CV Sections */
.cv-body { padding-top: 8px; }

.cv-section {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 32px 40px;
  padding: 40px 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.cv-section-label {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: 0.1em;
  color: var(--accent-cyan);
  padding-top: 3px;
  text-transform: uppercase;
}

.cv-summary-text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-secondary);
}

/* Skills */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
}

.skill-group-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.skill-tag {
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 12px;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}

/* CV Entries */
.cv-entry { margin-bottom: 32px; }
.cv-entry:last-child { margin-bottom: 0; }

.cv-entry-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.cv-entry-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 3px;
}

.cv-entry-org {
  font-size: 13px;
  color: var(--accent-gold);
  font-weight: 400;
  position: relative;
}

.cv-org-logo {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  height: 60px;
  width: auto;
  border-radius: 5px;
}
/* Clover Bite: white logo on dark bg — screen hides the black background */
.cv-org-logo--screen {
  mix-blend-mode: screen;
}
/* Tiltan: has a white background PNG — show in a light pill to preserve original green */
.cv-org-logo--pill {
  height: 36px !important;
  background: rgba(255, 255, 255, 0.92);
  padding: 4px 10px;
  box-sizing: content-box;
}

.cv-entry-date {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  white-space: nowrap;
  padding-top: 2px;
}

.cv-entry-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cv-entry-bullets li {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.6;
  padding-left: 16px;
  position: relative;
}
.cv-entry-bullets li::before {
  content: '-';
  position: absolute;
  left: 0;
  color: var(--accent-cyan-dim);
}

.cv-entry-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Software row on CV */
.cv-software-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.sw-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.sw-item:hover { color: var(--text-secondary); }

.sw-icon-wrap {
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.sw-item:hover .sw-icon-wrap {
  border-color: oklch(35% 0.04 195);
  transform: translateY(-2px);
}
.sw-icon-wrap img,
.sw-icon-wrap svg {
  width: 30px; height: 30px;
  display: block;
}

/* =====================================================
   GALLERY LIGHTBOX
   ===================================================== */

.lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: oklch(0% 0 0 / 0.93);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 80px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.lightbox-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-close {
  position: absolute;
  top: 18px; right: 22px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  z-index: 2;
  transition: color 0.2s;
}
.lightbox-close:hover { color: var(--text-primary); }

.lightbox-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: min(88vw, 1080px);
  max-height: 90vh;
}

.lightbox-media {
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 65vh;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.lightbox-media img,
.lightbox-media video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.lightbox-media-placeholder {
  font-family: 'Courier New', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: oklch(50% 0 0 / 0.5);
  border: 1px dashed oklch(50% 0 0 / 0.25);
  padding: 8px 18px;
  border-radius: 4px;
}

.lightbox-caption {
  margin-top: 18px;
  text-align: center;
  max-width: 700px;
  width: 100%;
}
.lightbox-desc {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin-bottom: 12px;
}
.lightbox-made-with {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: oklch(12% 0 0 / 0.75);
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--text-primary);
  width: 46px;
  height: 46px;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  transition: background 0.2s, border-color 0.2s;
}
.lightbox-prev { left: 14px; }
.lightbox-next { right: 14px; }
.lightbox-prev:hover,
.lightbox-next:hover {
  background: oklch(18% 0.02 195 / 0.9);
  border-color: var(--accent-cyan-dim);
}
.lightbox-prev:disabled,
.lightbox-next:disabled {
  opacity: 0.25;
  cursor: default;
}

.lightbox-dots {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: center;
}
.lightbox-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: oklch(35% 0 0);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.lightbox-dot.active {
  background: var(--accent-cyan);
  transform: scale(1.35);
}

.lightbox-counter {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  pointer-events: none;
}

/* =====================================================
   RESPONSIVE
   ===================================================== */

@media (max-width: 768px) {
  .main-nav { display: none; }
  .hamburger { display: flex; }

  .hero-content { padding: 72px 20px 72px; }
  .hero-name { font-size: clamp(52px, 14vw, 96px); }

  .acc-bar-header { padding: 0 20px 0 24px; }
  .acc-content-inner { padding: 28px 24px 48px; }

  .media-grid { grid-template-columns: 1fr; }

  .cv-section {
    grid-template-columns: 1fr;
    gap: 12px 0;
  }
  .cv-section-label { padding-bottom: 4px; border-bottom: 1px solid var(--border); }

  .cv-hero { padding: 40px 0 32px; }
  .cv-name { font-size: clamp(44px, 12vw, 80px); }

  .skills-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================
   SCROLL REVEAL ANIMATIONS
   ===================================================== */

.reveal-target {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-target.animate-ready {
  opacity: 0;
  transform: translateY(24px);
}
.reveal-target.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Hero entrance — no opacity:0 initial state, animate via class added by JS */
.hero-name,
.hero-titles,
.hero-bio {
  opacity: 1;
  transform: translateY(0);
}
.hero-animate .hero-name {
  animation: heroFadeUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.05s;
  opacity: 0;
}
.hero-animate .hero-titles {
  animation: heroFadeUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.18s;
  opacity: 0;
}
.hero-animate .hero-bio {
  animation: heroFadeUp 0.9s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.32s;
  opacity: 0;
}

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 40px oklch(72% 0.18 195 / 0.3); }
  50%       { text-shadow: 0 0 80px oklch(72% 0.18 195 / 0.6), 0 0 120px oklch(72% 0.18 195 / 0.2); }
}

/* Accordion bar stagger */
.acc-bar:nth-child(1) { transition-delay: 0.05s; }
.acc-bar:nth-child(2) { transition-delay: 0.10s; }
.acc-bar:nth-child(3) { transition-delay: 0.15s; }
.acc-bar:nth-child(4) { transition-delay: 0.20s; }
.acc-bar:nth-child(5) { transition-delay: 0.25s; }

/* Tweak panel */
.tweaks-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: oklch(16% 0.015 55 / 0.96);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
  width: 260px;
  z-index: 200;
  backdrop-filter: blur(16px);
  display: none;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 16px 48px oklch(0% 0 0 / 0.6);
}
.tweaks-panel.open { display: flex; }
.tweaks-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: var(--accent-cyan);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tweaks-close {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 18px; line-height: 1;
  transition: color 0.2s;
}
.tweaks-close:hover { color: var(--text-primary); }
.tweak-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tweak-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tweak-select, .tweak-input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  padding: 6px 10px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
}
.tweak-select:focus, .tweak-input:focus {
  border-color: var(--accent-cyan);
}
.tweak-color-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tweak-color-swatch {
  width: 24px; height: 24px;
  border-radius: 4px;
  border: 1px solid var(--border);
  cursor: pointer;
  flex-shrink: 0;
}
.tweak-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tweak-toggle {
  width: 36px; height: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
}
.tweak-toggle.on { background: var(--accent-cyan-dim); border-color: var(--accent-cyan); }
.tweak-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.tweak-toggle.on::after {
  transform: translateX(16px);
  background: var(--accent-cyan);
}

@media (max-width: 480px) {
  .header-inner { padding: 0 16px; }
  .skills-grid { grid-template-columns: 1fr; }
  .cv-contacts { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cv-hero { flex-direction: column; align-items: flex-start; }
}

/* =====================================================
   PROJECT SUB-SECTIONS
   ===================================================== */
.acc-subsection {
  margin-top: 48px;
}

.acc-sub-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: 0.06em;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.acc-sub-desc {
  font-size: 14px;
  font-weight: 300;
  color: var(--text-secondary);
  max-width: 680px;
  line-height: 1.7;
  margin-bottom: 24px;
  border-left: 2px solid var(--accent-cyan-dim);
  padding-left: 14px;
}

/* Dense grids for media-heavy sub-sections */
.media-grid--dense {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.media-grid--dense .media-desc {
  font-size: 12px;
}

.media-grid--dense .sw-badge-label {
  display: none;
}

/* =====================================================
   EDIT MODE
   ===================================================== */
.edit-toggle {
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  border-radius: 4px;
  padding: 4px 12px;
}

.edit-toggle.on {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

body.edit-mode [contenteditable="true"] {
  outline: 1px dashed var(--accent-cyan);
  outline-offset: 4px;
  border-radius: 2px;
  min-height: 1em;
  cursor: text;
}

body.edit-mode [contenteditable="true"]:focus {
  outline-style: solid;
  background: rgba(0, 212, 200, 0.05);
}

body.edit-mode .media-card {
  cursor: grab;
}

body.edit-mode .media-card .media-thumb {
  user-select: none;
  -webkit-user-select: none;
}

body.dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

/* Rich text mini toolbar */
#rich-toolbar {
  position: fixed;
  z-index: 3000;
  display: none;
  gap: 2px;
  background: #101418;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}

#rich-toolbar.show {
  display: flex;
}

#rich-toolbar button {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  width: 32px;
  height: 30px;
  border-radius: 5px;
  cursor: pointer;
}

#rich-toolbar button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--accent-cyan);
}

/* Tag editor */
.sw-badge-remove {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1;
  padding: 0 2px 0 4px;
  cursor: pointer;
}

.sw-badge-remove:hover {
  color: #ff6b6b;
}

.sw-add-btn {
  background: none;
  border: 1px dashed var(--border);
  color: var(--text-muted);
  width: 26px;
  height: 26px;
  border-radius: 5px;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}

.sw-add-btn:hover {
  color: var(--accent-cyan);
  border-color: var(--accent-cyan);
}

.made-with-row {
  position: relative;
}

.sw-picker {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 2500;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 320px;
  background: #101418;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55);
}

.sw-picker-opt {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.sw-picker-opt:hover .sw-badge {
  border-color: var(--accent-cyan);
}

.sw-picker-empty {
  font-size: 12px;
  color: var(--text-muted);
}

/* Drag & drop */
.drag-ghost {
  position: fixed;
  z-index: 4000;
  pointer-events: none;
  transform: scale(1.03) rotate(0.6deg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.6);
  opacity: 0.95;
}

.drag-placeholder {
  opacity: 0.25;
}

/* Save to site button */
#save-site-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 2600;
  background: var(--accent-cyan);
  color: #06090c;
  border: none;
  border-radius: 8px;
  padding: 12px 20px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

#save-site-btn:hover {
  filter: brightness(1.1);
}

/* =====================================================
   COLLAPSED GALLERIES (Other Projects) - one row + fade
   ===================================================== */
.grid-collapse {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 97%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 97%);
}

.grid-collapse.expanded {
  -webkit-mask-image: none;
  mask-image: none;
  overflow: visible;
}

.see-more-btn {
  display: block;
  margin: 14px auto 0;
  background: none;
  border: 1px solid var(--accent-cyan);
  color: var(--accent-cyan);
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 8px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.see-more-btn:hover {
  background: var(--accent-cyan);
  color: #06090c;
}

/* =====================================================
   HERO BACKGROUND VIDEO + PORTRAIT
   ===================================================== */
.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

.hero-bg-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(6, 9, 12, 0.55) 0%,
    rgba(6, 9, 12, 0.30) 45%,
    rgba(6, 9, 12, 0.78) 100%);
}

.hero-portrait {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 94%;
  width: auto;
  max-width: none;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

/* =====================================================
   STRIP BACKGROUND ART (folded / open crossfade)
   ===================================================== */
.acc-bar-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: transform var(--transition);
}

.acc-bar-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: opacity 0.55s ease;
}

.acc-bg-folded { opacity: 1; }
.acc-bg-open   { opacity: 0; }

.acc-bar[aria-expanded="true"] .acc-bg-folded { opacity: 0; }
.acc-bar[aria-expanded="true"] .acc-bg-open   { opacity: 1; }

.acc-bar:hover .acc-bar-bg { transform: scale(1.06); }
.acc-bar[aria-expanded="true"] .acc-bar-bg { transform: none; }

/* Darker overlay when a strip is open so text stays readable over art */
.acc-bar[aria-expanded="true"] .acc-bar-overlay {
  opacity: 1;
  background: linear-gradient(180deg,
    rgba(8, 10, 13, 0.45) 0%,
    rgba(8, 10, 13, 0.80) 260px,
    rgba(8, 10, 13, 0.88) 100%);
}

/* =====================================================
   TUNING PASS - portrait default, bio text, strip crops
   ===================================================== */

/* Portrait: smaller default; size/position overrides applied inline by JS */
.hero-portrait {
  height: 68%;
}

body.edit-mode .hero-portrait,
.hero-portrait.portrait-editable {
  pointer-events: auto;
  cursor: move;
  outline: 1px dashed var(--accent-cyan);
  outline-offset: 3px;
}

.portrait-resize-handle {
  position: absolute;
  width: 18px;
  height: 18px;
  background: var(--accent-cyan);
  border: 2px solid #06090c;
  border-radius: 5px;
  z-index: 25;
  cursor: ns-resize;
}

/* Hero bio text: bigger, tighter tracking, white - readable over video */
.hero-bio-main {
  font-size: clamp(19px, 1.9vw, 23px);
  letter-spacing: -0.015em;
  color: #ffffff;
}

.hero-bio-secondary,
.hero-bio-closing {
  font-size: clamp(17px, 1.7vw, 20px);
  letter-spacing: -0.015em;
  color: #ffffff;
}

/* Folded strip art: crop from the image center, not the top */
.acc-bar-bg img.acc-bg-folded {
  object-position: center center;
}

/* Edit mode: portrait sits above the text layer and wins clicks on its
   visible pixels; transparent areas and focused text boxes pass through */
body.edit-mode .hero-portrait {
  z-index: 4;
}

body.edit-mode .hero-portrait.portrait-yield {
  pointer-events: none;
  outline-style: dotted;
  opacity: 0.85;
}

/* Hero rhythm: titles centered between name and bio; bio sits lower */
.hero-name {
  margin-bottom: 24px;
}

.hero-titles-sub {
  margin-bottom: 24px;
}

/* Yellow titles: thicker and bigger */
.hero-titles-main {
  font-size: clamp(15px, 1.8vw, 21px);
  font-weight: 700;
}

.hero-subtitle-pipe {
  font-size: clamp(15px, 1.8vw, 21px);
  font-weight: 500;
}

.hero-titles-sub {
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 600;
  opacity: 0.85;
}

/* =====================================================
   MOBILE-ONLY ADJUSTMENTS
   (desktop layout is untouched by everything below)
   ===================================================== */

/* Page switcher replaces the hamburger on small screens */
.mobile-switch { display: none; }

@media (max-width: 768px) {
  /* --- 1. Folded strip art: anchor the crop to the right of the image --- */
  .acc-bar-bg img.acc-bg-folded {
    object-position: right center;
  }

  /* --- 2. CV company logos back into normal flow so they stay on screen --- */
  /* No wrapping: the logo stays left, long names wrap within their own column */
  .cv-entry-org {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
  }
  .cv-org-logo {
    position: static;
    transform: none;
    height: 40px;
    flex-shrink: 0;
  }
  .cv-org-logo--pill {
    height: 26px !important;
    padding: 3px 8px;
  }

  /* --- 3. Software icons in a compact 5 x 2 grid --- */
  .cv-software-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px 4px;
    justify-items: center;
  }
  .sw-item {
    gap: 6px;
    font-size: 8px;
    letter-spacing: 0;
    line-height: 1.25;
    text-align: center;
  }
  .sw-icon-wrap {
    width: 38px;
    height: 38px;
    border-radius: 8px;
  }
  .sw-icon-wrap img,
  .sw-icon-wrap svg {
    width: 26px;
    height: 26px;
  }

  /* --- 4. Home / CV icon switcher instead of the hamburger menu --- */
  .hamburger { display: none; }
  .mobile-nav { display: none !important; }
  .logo { display: none; }          /* the switcher takes its place */

  .mobile-switch {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
  }
  .switch-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 30px;
    border-radius: 999px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    transition: background 0.2s, color 0.2s;
  }
  .switch-btn.active {
    background: var(--accent-cyan);
    color: #06090c;
  }
}

/* =====================================================
   MOBILE PASS 2 - sticky hover, CV portrait, skill grid
   ===================================================== */

/* CV portrait: mobile only (hidden by default, shown in the touch block) */
.cv-portrait { display: none; }

/* --- 1. Kill sticky :hover states on touch devices --- */
@media (hover: none) {
  .logo:hover { opacity: 1; }
  .nav-link:hover { color: var(--text-secondary); background: none; }
  .nav-link.active:hover { color: var(--accent-cyan); }
  .contact-icon:hover { color: var(--text-secondary); background: none; }
  .cv-contacts span:hover { color: inherit; }
  .cv-download-btn:hover { background: none; color: var(--accent-cyan); }
  .sw-item:hover { color: var(--text-muted); }
  .sw-item:hover .sw-icon-wrap { border-color: var(--border); transform: none; }
  .sw-badge:hover { border-color: var(--border); }
  .media-card:hover { transform: none; box-shadow: none; }
  .media-card:hover .media-thumb-hover { opacity: 0; }
  .see-more-btn:hover { background: none; color: var(--accent-cyan); }
  .acc-bar:hover .acc-bar-bg { transform: none; }
  .acc-bar:not([aria-expanded="true"]):hover .acc-bar-overlay { opacity: 1; }
  .acc-bar:hover .acc-bar-title { color: var(--text-primary); }
  .acc-bar:hover .acc-bar-arrow { color: inherit; }
  .lightbox-close:hover,
  .lightbox-prev:hover,
  .lightbox-next:hover { color: inherit; background: none; }
}

@media (max-width: 768px) {
  /* --- 2. Portrait moves off the home page and onto the CV header --- */
  .hero-portrait { display: none; }

  .cv-hero { position: relative; }

  .cv-portrait {
    display: block;
    position: absolute;
    top: 64px;
    right: -45px;        /* offsets the PNG's transparent side padding */
    height: 170px;
    width: auto;
    max-width: none;
    z-index: 0;
    opacity: 0.9;
    pointer-events: none;
  }
  .cv-hero-text,
  .cv-download-btn {
    position: relative;
    z-index: 1;
  }

  /* --- 3. Skill tags in 3 columns; white group headers --- */
  .skill-group-title {
    color: #ffffff;
    font-size: 10px;
  }

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

  .skill-tag {
    font-size: 9px;
    letter-spacing: 0;
    line-height: 1.3;
    padding: 4px 5px;
    text-align: center;
    overflow-wrap: anywhere;
    /* Grid rows stretch to the tallest tag - centre short labels in that space */
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Mobile: draw the hero's zigzag edges at their desktop width and centre-crop
   them, so the teeth keep their original proportions instead of compressing */
@media (max-width: 768px) {
  .hero-section::before,
  .hero-section::after {
    left: 50%;
    right: auto;
    width: 1440px;
    transform: translateX(-50%);
  }
}

/* =====================================================
   OVERALL PASS - dividers, headers, logos, nav, tooltip
   ===================================================== */

/* 1. Softer divider between Experience and Education (~1/5 weight) */
.cv-section--soft-end {
  border-bottom-color: oklch(30% 0.015 55 / 0.2);
}

/* 2. Blue section headers +15% */
.cv-section-label {
  font-size: 23px;
}

/* 3. [Desktop] CV name -20% (mobile keeps its own size below 768px) */
.cv-name {
  font-size: clamp(42px, 6.4vw, 77px);
}

/* 4 + 5. Company logos that need a light plate: square, minimal margin,
   matching the Clover Bite mark's size */
.cv-org-logo--pill {
  height: 60px !important;
  width: 60px;
  padding: 2px;
  box-sizing: border-box;
  object-fit: contain;
  background: #ffffff;
  border-radius: 5px;
}

/* 7. Software badge note tooltip (hover on desktop, tap on touch) */
.sw-badge--note {
  position: relative;
  cursor: help;
}

.sw-badge-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: #101418;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 6px 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  z-index: 60;
}

@media (hover: hover) {
  .sw-badge--note:hover .sw-badge-tip { opacity: 1; }
}

.sw-badge--note.tip-open .sw-badge-tip { opacity: 1; }

/* 8. The Home/CV pill switcher is now the nav on every screen size */
.mobile-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}

.switch-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 30px;
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: background 0.2s, color 0.2s;
}

.switch-btn.active {
  background: var(--accent-cyan);
  color: #06090c;
}

.logo { display: none; }                       /* replaced by the switcher */
.main-nav .nav-link:not(.edit-toggle) { display: none; }
.header-left { gap: 12px; }

/* 6. [Desktop] white skill headers + 3-column tag grid, like mobile */
@media (min-width: 769px) {
  .skill-group-title {
    color: #ffffff;
  }

  .skill-tags {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }

  .skill-tag {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 10px;
    letter-spacing: 0;
    line-height: 1.3;
    padding: 5px 4px;
    overflow-wrap: anywhere;
  }
}

/* Mobile keeps the smaller square plate for logos */
@media (max-width: 768px) {
  .cv-org-logo--pill {
    height: 40px !important;
    width: 40px;
    padding: 2px;
  }
}

/* Keep the mobile CV name at its own size (the desktop -20% must not leak) */
@media (max-width: 768px) {
  .cv-name { font-size: clamp(44px, 12vw, 80px); }
}

/* Arcadia: white line-art logo - needs a dark plate, not the white one */
.cv-org-logo--dark {
  height: 60px !important;
  width: 60px;
  padding: 2px;
  box-sizing: border-box;
  object-fit: contain;
  background: #1c1c1c;
  border-radius: 5px;
}

@media (max-width: 768px) {
  .cv-org-logo--dark {
    height: 40px !important;
    width: 40px;
  }

  /* Portrait nudged a further 5px right */
  .cv-portrait { right: -50px; }
}

/* =====================================================
   PASS - portrait to CV everywhere, tighter strip top,
   roomier hero paragraphs, print/PDF output
   ===================================================== */

/* 1. The portrait now lives on the CV page only */
.hero-portrait { display: none !important; }

.cv-portrait {
  display: block;
  position: absolute;
  top: 64px;
  right: -45px;
  height: 170px;
  width: auto;
  max-width: none;
  z-index: 0;
  opacity: 0.9;
  pointer-events: none;
}

/* Keep hero text and the PDF button above the portrait */
.cv-hero { position: relative; }
.cv-hero-text,
.cv-download-btn { position: relative; z-index: 1; }

/* Desktop gets its own default size; edit mode overrides it inline */
@media (min-width: 769px) {
  .cv-portrait {
    top: 40px;
    right: -30px;
    height: 240px;
  }
}

/* 2. Project title sits much closer to the top of an open strip */
.acc-bar[aria-expanded="true"] .acc-bar-content { top: 8px; }

/* 3. [Desktop] more air between the hero paragraphs */
@media (min-width: 769px) {
  .hero-bio-sections { gap: 22px; }
}

/* The PDF button is a <button> now - match the anchor styling */
button.cv-download-btn {
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  background: none;
}

/* =====================================================
   PRINT / PDF - the CV page without the site chrome
   ===================================================== */
@media print {
  @page {
    size: A4;
    margin: 12mm 10mm;
  }

  /* Keep the dark design in the exported PDF */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  html, body {
    background: var(--bg) !important;
    overflow: visible !important;
  }

  /* Strip the site chrome the user asked to leave out */
  .site-header,
  .mobile-nav,
  .site-footer,
  .cv-download-btn,
  #save-site-btn,
  #rich-toolbar,
  .portrait-resize-handle,
  .hamburger {
    display: none !important;
  }

  body::before { display: none !important; }   /* grain overlay */

  .cv-main {
    margin-top: 0 !important;
    max-width: none !important;
    padding: 0 !important;
  }

  .cv-hero { padding-top: 0 !important; }

  .cv-portrait {
    opacity: 1;
    height: 150px !important;
    top: 0 !important;
    right: 0 !important;
  }

  /* Don't split entries or sections across pages */
  .cv-section,
  .cv-entry,
  .skill-group,
  .sw-item {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .cv-section { padding: 18px 0 !important; }

  /* Editing affordances must never appear in the export */
  [contenteditable] {
    outline: none !important;
    background: none !important;
  }
}

/* Edit mode: the CV portrait becomes grabbable and sits above the text,
   while transparent pixels still fall through to whatever is beneath */
.cv-portrait.portrait-editable {
  pointer-events: auto;
  cursor: move;
  z-index: 2;
  outline: 1px dashed var(--accent-cyan);
  outline-offset: 3px;
}

.cv-portrait.portrait-editable.portrait-yield {
  pointer-events: none;
  outline-style: dotted;
  opacity: 0.85;
}

/* Keep the mobile portrait's 5px nudge (base rule above must not undo it) */
@media (max-width: 768px) {
  .cv-portrait { right: -50px; }
}

/* [Desktop] Home/CV switcher 10% larger */
@media (min-width: 769px) {
  .mobile-switch { padding: 3.3px; }

  .switch-btn {
    width: 37px;
    height: 33px;
    font-size: 13.2px;
  }

  .switch-btn svg {
    width: 21px;
    height: 21px;
  }
}

/* Home hero: tighter lines inside each paragraph block
   (leading halved - the gap between lines, not the whole line box) */
.hero-bio-main {
  line-height: 1.33;
}

.hero-bio-secondary,
.hero-bio-closing {
  line-height: 1.35;
}

/* [Mobile] double the spacing between the hero paragraph blocks */
@media (max-width: 768px) {
  .hero-bio-sections { gap: 16px; }
}

/* =====================================================
   OPEN STRIP: keep the arrow as a close button
   ===================================================== */

/* The header still fades, but the arrow stays and stays clickable */
.acc-bar[aria-expanded="true"] .acc-bar-header {
  opacity: 1;
  pointer-events: none;
}

.acc-bar[aria-expanded="true"] .acc-bar-title {
  opacity: 0;
}

.acc-bar[aria-expanded="true"] .acc-bar-arrow {
  pointer-events: auto;
  cursor: pointer;
  padding: 8px;
  margin: -8px;
  border-radius: 50%;
  transition: transform var(--transition), color var(--transition), background 0.2s;
}

.acc-bar[aria-expanded="true"] .acc-bar-arrow:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* Hero background video: a touch less prominent */
.hero-bg-video {
  opacity: 0.87;
}

/* The open strip's arrow must sit above the content, or the project
   title's block swallows the click */
.acc-bar[aria-expanded="true"] .acc-bar-header {
  z-index: 5;
}

/* =====================================================
   OPEN STRIP BACKGROUND ART - actually let it show
   The open art is a full-bleed gradient texture, so stretch it
   across the whole strip instead of cover-cropping a square,
   and drop the heavy overlay that was hiding it.
   ===================================================== */
.acc-bar-bg img.acc-bg-open {
  object-fit: fill;
  object-position: center center;
}

.acc-bar[aria-expanded="true"] .acc-bar-overlay {
  opacity: 1;
  background: linear-gradient(180deg,
    rgba(8, 10, 13, 0.30) 0%,
    rgba(8, 10, 13, 0.22) 260px,
    rgba(8, 10, 13, 0.22) 100%);
}

/* =====================================================
   HERO EDGES - zigzag + halftone dissolve
   The solid zigzag (::before / ::after) gives the jagged
   silhouette; these layers dissolve it into the video with
   a halftone dot gradient that shrinks away from the edge.
   ===================================================== */
.brush-top,
.brush-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 128px;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
  background: var(--bg);
  -webkit-mask-image: url("media/site/halftone-fade.svg");
  mask-image: url("media/site/halftone-fade.svg");
  -webkit-mask-size: 28px 128px;
  mask-size: 28px 128px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: top left;
  mask-position: top left;
}

.brush-top {
  top: 0;
  bottom: auto;
}

.brush-bottom {
  bottom: 0;
  top: auto;
  transform: scaleY(-1);
}

/* Mobile: shorter fringe so it doesn't eat the hero text */
@media (max-width: 768px) {
  .brush-top,
  .brush-bottom {
    height: 92px;
    -webkit-mask-size: 22px 92px;
    mask-size: 22px 92px;
  }
}

/* =====================================================
   HERO EDGES v2 - sharper zigzag, halftone follows the
   contour. One tileable SVG holds both the solid jagged
   region and the dots that trail it, so the dissolve
   always matches the shape of the black.
   ===================================================== */

/* The old flat clip-path zigzags are replaced by the SVG edge */
.hero-section::before,
.hero-section::after {
  display: none;
}

.brush-top,
.brush-bottom {
  position: absolute;
  left: 0;
  right: 0;
  height: 160px;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
  background: var(--bg);
  -webkit-mask-image: url("media/site/halftone-edge.svg");
  mask-image: url("media/site/halftone-edge.svg");
  -webkit-mask-size: 128px 160px;
  mask-size: 128px 160px;
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-position: top center;
  mask-position: top center;
}

.brush-top { top: -1px; bottom: auto; transform: none; }
.brush-bottom { bottom: -1px; top: auto; transform: scaleY(-1); }

@media (max-width: 768px) {
  .brush-top,
  .brush-bottom {
    height: 116px;
    -webkit-mask-size: 93px 116px;
    mask-size: 93px 116px;
  }
}

/* =====================================================
   HERO EDGES v3 - randomised jagged edge
   Vertices are randomly spaced (8-25px apart) and randomly
   deep; the dot trail follows the same contour with a small
   random offset. Whole treatment stays clear of the text.
   ===================================================== */
.brush-top,
.brush-bottom {
  height: 68px;
  -webkit-mask-image: url("media/site/halftone-edge-rand.svg");
  mask-image: url("media/site/halftone-edge-rand.svg");
  -webkit-mask-size: 1920px 68px;
  mask-size: 1920px 68px;
  -webkit-mask-position: top left;
  mask-position: top left;
}

@media (max-width: 768px) {
  .brush-top,
  .brush-bottom {
    height: 60px;
    -webkit-mask-size: 1920px 60px;
    mask-size: 1920px 60px;
  }
}

/* v3 sizing: 72px tall art, scaled down on mobile where the text sits higher */
.brush-top,
.brush-bottom {
  height: 72px;
  -webkit-mask-size: 1920px 72px;
  mask-size: 1920px 72px;
}

@media (max-width: 768px) {
  .brush-top,
  .brush-bottom {
    height: 62px;
    -webkit-mask-size: 1920px 62px;
    mask-size: 1920px 62px;
  }
}

/* v4 sizing: deeper valleys (45-65px), wider point spacing (25-60px) */
.brush-top,
.brush-bottom {
  height: 86px;
  -webkit-mask-size: 1920px 86px;
  mask-size: 1920px 86px;
}

@media (max-width: 768px) {
  .brush-top,
  .brush-bottom {
    height: 75px;
    -webkit-mask-size: 1920px 75px;
    mask-size: 1920px 75px;
  }
}

/* Mobile: scale the edge proportionally (1920x86 -> 1674x75) so the SVG
   isn't letterboxed and centred, which was blanking the left ~123px */
@media (max-width: 768px) {
  .brush-top,
  .brush-bottom {
    height: 75px;
    -webkit-mask-size: 1674px 75px;
    mask-size: 1674px 75px;
  }
}

/* =====================================================
   HERO EDGES v5 - valleys clamped to 55-65px, and the
   bottom edge lifted 20px off the frame (its SVG carries
   20px of solid padding below, so no gap appears)
   ===================================================== */
.brush-bottom {
  height: 106px;
  transform: none;                /* the bottom art is drawn already mirrored */
  -webkit-mask-image: url("media/site/halftone-edge-bottom.svg");
  mask-image: url("media/site/halftone-edge-bottom.svg");
  -webkit-mask-size: 1920px 106px;
  mask-size: 1920px 106px;
}

@media (max-width: 768px) {
  .brush-bottom {
    height: 92px;
    -webkit-mask-size: 1674px 92px;
    mask-size: 1674px 92px;
  }
}

/* v6 sizing: wider point spacing + longer dot trail needs taller art
   (top 94px, bottom 94+20 pad = 114px) */
.brush-top {
  height: 94px;
  -webkit-mask-size: 1920px 94px;
  mask-size: 1920px 94px;
}

.brush-bottom {
  height: 114px;
  -webkit-mask-size: 1920px 114px;
  mask-size: 1920px 114px;
}

@media (max-width: 768px) {
  .brush-top {
    height: 82px;
    -webkit-mask-size: 1674px 82px;
    mask-size: 1674px 82px;
  }
  .brush-bottom {
    height: 99px;
    -webkit-mask-size: 1674px 99px;
    mask-size: 1674px 99px;
  }
}

/* v7 sizing: wider random offset between the black edge and the dot trail
   (top 104px art, bottom 104+20 pad = 124px) */
.brush-top {
  height: 104px;
  -webkit-mask-size: 1920px 104px;
  mask-size: 1920px 104px;
}

.brush-bottom {
  height: 124px;
  -webkit-mask-size: 1920px 124px;
  mask-size: 1920px 124px;
}

@media (max-width: 768px) {
  .brush-top {
    height: 91px;
    -webkit-mask-size: 1674px 91px;
    mask-size: 1674px 91px;
  }
  .brush-bottom {
    height: 108px;
    -webkit-mask-size: 1674px 108px;
    mask-size: 1674px 108px;
  }
}

/* Hero text centred between the two bars. The bottom bar is ~20px thicker
   than the top (it carries the 20px lift), so the text sat low. Shifting
   padding from the top to the bottom lifts it without growing the hero. */
.hero-content {
  padding-top: 70px;
  padding-bottom: 90px;
}

@media (max-width: 768px) {
  .hero-content {
    padding-top: 63px;
    padding-bottom: 81px;
  }
}

/* Hero description: one consistent size across all three paragraphs.
   Emphasis is carried by weight (bold), not by size jumps. */
.hero-bio-main,
.hero-bio-secondary,
.hero-bio-closing {
  font-size: clamp(17px, 1.65vw, 20px);
  line-height: 1.35;
}

.hero-bio-main {
  font-weight: 400;
}

/* =====================================================
   CV PAGE BACKGROUND
   Maroon taken from the strip art (#190b08) but lifted so it
   actually reads on screen, fading down into a deep grey.
   Fixed attachment so the gradient holds while the page scrolls.
   ===================================================== */
body.cv-page {
  background: linear-gradient(
    180deg,
    #170a09 0%,
    #120a09 28%,
    #0f0c0d 62%,
    #0d0d0f 100%
  );
  background-attachment: fixed;
}