/* ============================================================
   NAV OVERRIDES
   ============================================================ */
.site-nav-link {
  color: #6E6961;
}

.site-nav-link--active {
  color:       #131313;
  font-weight: var(--weight-regular);
}

[data-theme="dark"] .site-nav-link--active {
  color: #F5F4F1;
}

/* ============================================================
   PAGE LAYOUT — two columns, full height
   ============================================================ */
html, body {
  height: 100%;
}

body {
  display:        flex;
  flex-direction: column;
  min-height:     100svh;
}

.cv-main {
  flex:                   1;
  display:                grid;
  grid-template-columns:  400px 480px;
  justify-content:        center;
  align-items:            stretch;
}

/* ============================================================
   LEFT COLUMN — ABOUT ME
   ============================================================ */
.cv-left {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
  padding:        var(--space-6) var(--space-8) var(--space-12) var(--space-12);
}

/* ── ASCII iframes ── */
.cv-ascii-wrap {
  width:         100%;
  max-width:     430px;
  height:        410px;
  overflow:      hidden;
  margin-bottom: -82px;
}

.cv-ascii-frame {
  display: block;
  width:   100%;
  height:  100%;
  border:  none;
}

[data-theme="light"] .cv-ascii-frame--dark  { display: none; }
[data-theme="dark"]  .cv-ascii-frame--light { display: none; }

/* ── Name ── */
.cv-name {
  font-family:    var(--font-sans);
  font-size:      var(--text-2xl);
  font-weight:    var(--weight-medium);
  color:          var(--color-title);
  letter-spacing: var(--tracking-tight);
  line-height:    var(--leading-snug);
}

/* ── Bio ── */
.cv-bio {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
}

.cv-bio p {
  font-size:   var(--text-sm);
  line-height: var(--leading-normal);
  color:       var(--color-text);
}

/* ── Buttons ── */
.cv-buttons {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
  align-items:    flex-start;
}

.cv-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         6px var(--space-4);
  border-radius:   8px;
  color:           #FFFFFF;
  font-family:     var(--font-mono);
  font-size:       var(--text-xs);
  font-weight:     var(--weight-regular);
  cursor:          pointer;
  text-decoration: none;
  border:          none;
  white-space:     nowrap;
  transition:      opacity var(--transition-fast);
}

.cv-btn:hover {
  opacity: 0.85;
}

.cv-btn-icon {
  flex-shrink: 0;
  filter:      brightness(0) invert(1);
}

.cv-btn-icon--arrow {
  width:  10px;
  height: 10px;
}

.cv-btn-icon--copy {
  width:  14px;
  height: 14px;
}

.cv-btn--linkedin { background: #3047B6; }
.cv-btn--email    { background: #4766B4; }
.cv-btn--copy     { background: #898DD1; }

/* ============================================================
   RIGHT COLUMN — TIMELINE
   ============================================================ */
.cv-right {
  background:    #F2F1ED;
  border-radius: 16px;
  padding:       var(--space-12) var(--space-8) var(--space-12) var(--space-8);
  transition:    background-color var(--transition-theme);
}

[data-theme="dark"] .cv-right {
  background: #1B1B1C;
}

/* ── Section label ── */
.cv-section-label {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-regular);
  color:          var(--color-title);
  letter-spacing: var(--tracking-widest);
  margin-bottom:  var(--space-8);
}

/* ── Timeline container ── */
.cv-timeline {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-3);
  max-width:      640px;
}

/* ── Year markers ── */
.cv-year {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  font-weight:    var(--weight-regular);
  color:          var(--color-text-secondary);
  padding-top:    var(--space-5);
  padding-bottom: var(--space-1);
}

.cv-year:first-child {
  padding-top: 0;
}

/* ============================================================
   MILESTONES
   ============================================================ */
.cv-milestone {
  display:     flex;
  align-items: baseline;
  gap:         var(--space-2);
}

.cv-dot {
  font-family: var(--font-mono);
  font-size:   var(--text-base);
  color:       var(--color-blue-primary);
  flex-shrink: 0;
  line-height: 1.2;
}

.cv-milestone-text {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  color:          var(--color-blue-primary);
  letter-spacing: var(--tracking-wide);
  line-height:    var(--leading-snug);
}

.cv-milestone-year {
  color: var(--color-text-secondary);
}

.cv-milestone-link {
  color:                 var(--color-blue-primary);
  text-decoration:       underline;
  text-underline-offset: 3px;
  transition:            opacity var(--transition-fast);
}

.cv-milestone-link:hover {
  opacity: 0.7;
}

/* ── Expandable milestones ── */
.cv-milestone--exp .cv-milestone-text {
  text-decoration:       underline;
  text-underline-offset: 3px;
}

.cv-milestone--exp {
  flex-direction: column;
  align-items:    stretch;
  cursor:         default;
}

.cv-milestone--exp .cv-milestone-head {
  display:     flex;
  align-items: baseline;
  gap:         var(--space-2);
  cursor:      pointer;
}

.cv-milestone--exp .cv-milestone-head:hover .cv-milestone-text {
  opacity: 0.75;
}

.cv-milestone-body {
  display:            grid;
  grid-template-rows: 0fr;
  transition:         grid-template-rows 0.3s ease;
  margin-left:        var(--space-5);
}

.cv-milestone--exp.is-open .cv-milestone-body {
  grid-template-rows: 1fr;
}

.cv-milestone-body-inner {
  overflow:  hidden;
  min-height: 0;
  position:  relative;
  padding-top: var(--space-3);
  padding-right: var(--space-6);
}

.cv-milestone-body-inner p {
  font-size:     var(--text-xs);
  line-height:   var(--leading-relaxed);
  color:         var(--color-text);
  margin-bottom: var(--space-3);
}

.cv-milestone-close {
  position:    absolute;
  top:         var(--space-3);
  right:       0;
  background:  none;
  border:      none;
  cursor:      pointer;
  font-size:   10px;
  color:       var(--color-text-secondary);
  line-height: 1;
  padding:     2px 4px;
  transition:  color var(--transition-fast);
}

.cv-milestone-close:hover {
  color: var(--color-text);
}

/* SEE PICTURES button */
.cv-see-pics {
  font-family:           var(--font-mono);
  font-size:             var(--text-xs);
  letter-spacing:        var(--tracking-wide);
  color:                 var(--color-blue-primary);
  text-decoration:       underline;
  text-underline-offset: 3px;
  background:            none;
  border:                none;
  cursor:                pointer;
  padding:               0;
  transition:            opacity var(--transition-fast);
}

.cv-see-pics:hover {
  opacity: 0.7;
}

/* ============================================================
   BUBBLES
   ============================================================ */
.cv-bubble {
  position:      relative;
  background:    #FEFEFA;
  border:        1px solid #D2D2D2;
  border-radius: 10px;
  padding:       var(--space-4);
  transition:    border-color var(--transition-fast),
                 box-shadow   var(--transition-fast);
}

/* Special background for Ethree Solutions and Esic Speaker & Staff */
.cv-bubble[data-bubble="ethree"],
.cv-bubble[data-bubble="esic-speaker"] {
  background: #EAEAE7;
}

.cv-bubble:not(.is-open):hover {
  border-color: #AAAAAA;
  cursor:       pointer;
}

.cv-bubble.is-open {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
}

[data-theme="dark"] .cv-bubble {
  background:   var(--color-bg);
  border-color: #2A2A2A;
}

[data-theme="dark"] .cv-bubble[data-bubble="ethree"],
[data-theme="dark"] .cv-bubble[data-bubble="esic-speaker"] {
  background: #1E1E1F;
}

/* ── Close button (X) — absolute top-right ── */
.cv-bubble-close {
  position:       absolute;
  top:            12px;
  right:          12px;
  background:     none;
  border:         none;
  cursor:         pointer;
  font-size:      10px;
  color:          var(--color-text-secondary);
  line-height:    1;
  padding:        4px;
  opacity:        0;
  pointer-events: none;
  transition:     color var(--transition-fast),
                  opacity var(--transition-fast);
}

.cv-bubble.is-open .cv-bubble-close {
  opacity:        1;
  pointer-events: auto;
}

.cv-bubble-close:hover {
  color: var(--color-text);
}

/* ── Bubble head — always visible ── */
.cv-bubble-head {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-4);
  cursor:      pointer;
}

/* ── Logo ── */
.cv-bubble-logo {
  width:       26px;
  height:      26px;
  object-fit:  contain;
  flex-shrink: 0;
  /* brightness(0)→black, invert(1)→white, brightness(0.26)→ ~#424242 ≈ #413F3F */
  filter:      brightness(0) invert(1) brightness(0.26);
}

/* ── Meta text ── */
.cv-bubble-meta {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            3px;
  min-width:      0;
}

.cv-bubble-org-line {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-wrap:   wrap;
}

.cv-bubble-org {
  font-family:    var(--font-sans);
  font-size:      var(--text-sm);
  font-weight:    var(--weight-regular);
  color:          #413F3F;
  line-height:    var(--leading-snug);
}

.cv-bubble-sep {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  color:          #8B867E;
  letter-spacing: -0.03em;
}

.cv-bubble-loc {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  color:          #8B867E;
  letter-spacing: -0.03em;
}

.cv-bubble-info-line {
  display:     flex;
  align-items: baseline;
  gap:         var(--space-3);
  flex-wrap:   wrap;
}

.cv-bubble-dates {
  font-family:    var(--font-mono);
  font-size:      var(--text-xs);
  color:          #8B867E;
  letter-spacing: -0.03em;
  white-space:    nowrap;
}

.cv-bubble-role {
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  font-weight: var(--weight-regular);
  color:       #413F3F;
  line-height: var(--leading-snug);
}

[data-theme="dark"] .cv-bubble-org,
[data-theme="dark"] .cv-bubble-role {
  color: #C8C6C6;
}

[data-theme="dark"] .cv-bubble-sep,
[data-theme="dark"] .cv-bubble-loc,
[data-theme="dark"] .cv-bubble-dates {
  color: #6B6560;
}

[data-theme="dark"] .cv-bubble-logo {
  filter: brightness(0) invert(1) brightness(0.65);
}

/* ── Bubble body — animated expand ── */
.cv-bubble-body {
  display:            grid;
  grid-template-rows: 0fr;
  transition:         grid-template-rows 0.3s ease;
}

.cv-bubble.is-open .cv-bubble-body {
  grid-template-rows: 1fr;
}

.cv-bubble-body-inner {
  overflow:    hidden;
  min-height:  0;
}

/* ── Highlights list ── */
.cv-bubble-highlights {
  list-style:     none;
  padding:        var(--space-4) 0 var(--space-1);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.cv-bubble-highlights li {
  position:    relative;
  padding-left: var(--space-5);
  font-size:   var(--text-xs);
  line-height: var(--leading-relaxed);
  color:       var(--color-text);
}

.cv-bubble-highlights li::before {
  content:  '—';
  position: absolute;
  left:     0;
  color:    var(--color-text-secondary);
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.cv-lightbox {
  position:        fixed;
  inset:           0;
  z-index:         1000;
  display:         flex;
  align-items:     center;
  justify-content: center;
  opacity:         0;
  pointer-events:  none;
  transition:      opacity 0.25s ease;
}

.cv-lightbox.is-visible {
  opacity:        1;
  pointer-events: auto;
}

.cv-lightbox-overlay {
  position:   absolute;
  inset:      0;
  background: rgba(0, 0, 0, 0.80);
}

.cv-lightbox-prev,
.cv-lightbox-next {
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         1;
  width:           44px;
  height:          44px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(255, 255, 255, 0.12);
  border:          1px solid rgba(255, 255, 255, 0.25);
  border-radius:   50%;
  cursor:          pointer;
  color:           #FFFFFF;
  font-size:       1.5rem;
  line-height:     1;
  transition:      background var(--transition-fast);
}

.cv-lightbox-prev { left:  var(--space-6); }
.cv-lightbox-next { right: var(--space-6); }

.cv-lightbox-prev:hover,
.cv-lightbox-next:hover {
  background: rgba(255, 255, 255, 0.22);
}

.cv-lightbox-counter {
  position:   absolute;
  bottom:     var(--space-6);
  left:       50%;
  transform:  translateX(-50%);
  z-index:    1;
  color:      rgba(255, 255, 255, 0.7);
  font-family: var(--font-mono);
  font-size:  var(--text-xs);
  letter-spacing: var(--tracking-wide);
}

.cv-lightbox-close {
  position:        absolute;
  top:             var(--space-6);
  right:           var(--space-6);
  z-index:         1;
  width:           36px;
  height:          36px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(255, 255, 255, 0.12);
  border:          1px solid rgba(255, 255, 255, 0.25);
  border-radius:   50%;
  cursor:          pointer;
  color:           #FFFFFF;
  font-size:       var(--text-sm);
  transition:      background var(--transition-fast);
}

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

.cv-lightbox-img {
  position:      relative;
  z-index:       1;
  max-width:     90vw;
  max-height:    85vh;
  object-fit:    contain;
  border-radius: 8px;
}

/* ============================================================
   FOOTER
   ============================================================ */
.cv-footer {
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-5) 0 var(--space-10);
  font-size:       var(--text-xs);
}

.cv-footer-back {
  color:                 var(--color-text-secondary);
  text-decoration:       underline;
  text-underline-offset: 3px;
  transition:            color var(--transition-fast);
}

.cv-footer-back:hover {
  color: var(--color-title);
}

/* ============================================================
   DESKTOP — sticky left column
   ============================================================ */
@media (min-width: 769px) {
  .cv-left {
    align-self:  start;
    position:    sticky;
    top:         52px; /* header height */
    height:      calc(100vh - 52px);
    overflow-y:  auto;
  }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {
  .cv-main {
    grid-template-columns: 1fr;
  }

  .cv-ascii-wrap {
    margin-bottom: -40px;
  }

  .cv-left {
    padding: var(--space-8) var(--space-6);
  }

  .cv-right {
    border-radius: 12px;
    margin:        0 var(--space-4);
    padding:       var(--space-8) var(--space-6);
  }

  .cv-ascii-wrap {
    max-width: 100%;
  }

  .cv-name {
    font-size: var(--text-3xl);
  }

  .cv-buttons {
    flex-direction: row;
    flex-wrap:      wrap;
  }
}