:root {
    /* Light theme */
    --bg-light: #f5f5f5;
    --text-light: #111;
    --text-secondary-light: #363636;
    --accent-light: #0366d6;
    --accent-secondary-light: #005cc5;
    --card-light: #fff;
    --border-light: #ddd;
    
    /* Dark theme - AMOLED black */
    --bg-dark: #000000;
    --text-dark: #e0e0e0;
    --text-secondary-dark: #9b9b9b;
    --accent-dark: #58a6ff;
    --accent-secondary-dark: #0366d6;
    --card-dark: #121212;
    --border-dark: #333;
    
    /* Set defaults */
    --bg: var(--bg-dark);
    --text: var(--text-dark);
    --text-secondary: var(--text-secondary-dark);
    --accent: var(--accent-dark);
    --accent-secondary: var(--accent-secondary-dark);
    --card: var(--card-dark);
    --border: var(--border-dark);
    --transition: 0.3s ease;
    --timeline-row-height: 56px; /* will be set dynamically to tallest */
  }
  
  .light {
    --bg: var(--bg-light);
    --text: var(--text-light);
    --text-secondary: var(--text-secondary-light);
    --accent: var(--accent-light);
    --accent-secondary: var(--accent-secondary-light);
    --card: var(--card-light);
    --border: var(--border-light);
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.5;
    font-size: 16px;
    transition: background-color var(--transition), color var(--transition);
    overflow-x: hidden;
    position: relative;
  }

  /* Narrow sticky top nav */
  #top-nav {
    position: sticky;
    top: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    z-index: 50;
    /* Ensure inner items stay vertically centered even if the bar stretches */
    display: flex;
    align-items: center;
    transition: inherit;
  }

  #top-nav .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr; /* left spacer, centered links, right tools */
    align-items: center;
    padding: 6px 0;
  }

  #top-nav .nav-center {
    display: flex;
    align-items: center;
    justify-content: center; /* keep links centered */
    gap: 24px;               /* more spread out */
    white-space: nowrap;
    overflow-x: auto;
  }

  #top-nav .nav-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
  }

  #top-nav .nav-left {
    display: flex;
    align-items: center;
  }

  .nav-brand {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
  }
  .nav-brand:hover { color: var(--accent); }

  #top-nav a {
    color: var(--text-secondary);
    font-size: 1rem;
  }
  
  #top-nav a:hover { color: var(--accent); text-decoration: none; }
  
  .container {
    width: 90%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
    z-index: 1;
  }
  
  a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--transition);
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  h1, h2, h3, h4 {
    font-weight: 500;
    margin-bottom: 0.5rem;
  }

  
  
#theme-toggle {
    background: rgba(125, 125, 125, 0);
    border: 2px solid var(--border);
    border-radius: 50%;
    color: var(--text);
    cursor: pointer;
    width: 28px;  /* slightly smaller so it never grows the nav */
    height: 28px;
    margin-left: 0; /* no extra margin in navbar */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition);
  }
  
  #theme-toggle:hover {
    background: rgba(125, 125, 125, 0.2);
    border-color: var(--accent);
  }
  
  #theme-toggle:active {
    transform: scale(0.95);
  }
  
  #theme-toggle svg {
    width: 18px;  /* scale inner icon down accordingly */
    height: 18px;
    stroke: var(--text);
    fill: var(--text);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all var(--transition);
  }

  /* Ensure navbar instance has no side margin */
  #top-nav #theme-toggle { margin-left: 0; }
  
  #theme-toggle svg.sun {
    fill: none;
    stroke: var(--text);
  }
  
  #theme-toggle svg.moon {
    fill: var(--text);
    stroke: none;
  }
  
  .dark .moon {
    display: block;
  }
  
  .dark .sun {
    display: none;
  }
  
  .light .moon {
    display: none;
  }
  
  .light .sun {
    display: block;
  }

  /* Mobile: left-align links, keep toggle on right, hide brand */
  @media (max-width: 600px) {
    #top-nav .nav-inner { grid-template-columns: 1fr auto; }
    #top-nav .nav-left { display: none; }
    #top-nav .nav-center { justify-content: flex-start; gap: 16px; }
  }
  
  /* Main content */
  main {
    padding: 15px 0;
  }
  
  section {
    margin-bottom: 56px;
    padding-bottom: 0;
  }
  
  section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  
  /* Profile section with image */
  #profile {
    margin-bottom: 15px;
  }

  .profile-header {
    display: flex;
    gap: 25px;
    align-items: stretch; /* make columns equal height */
    padding: 1rem 2rem;
  }

  
  .profile-left {
    flex: 0 0 auto;
  }
  
  .profile-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    /* center content vertically */
    justify-content: center;
  }
  
  .profile-image {
    width: 150px;
    height: 150px;
    overflow: hidden;
    border-radius: 50%;
  }
  

  .profile-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  
  .name-theme-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  
  .logo {
    font-size: 2rem;
    font-weight: 500;
    margin: 0;
    line-height: 1.1;
  }
  
  .profile-header h2 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
  }
  
  .typing-text {
    font-weight: 500;
  }
  
  /* .focus-areas removed */
  
  .contact-links {
    margin-bottom: 0.3rem;
  }
  
  .external-links {
    display: flex;
    gap: 15px;
  }
  
  .separator {
    margin: 0 10px;
    color: var(--border);
  }
  
  h3 {
    font-size: 1.15rem;
    position: relative;
    display: inline-block;
    margin-bottom: 15px;
    padding-bottom: 0.2rem;
    border-bottom: 2px solid var(--accent);
  }

  /* Intro block above Research */
  #intro p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary); /* dark gray */
    max-width: none;
    width: 100%;
  }

  /* Right column title uses secondary accent */
  .pro-col > h3 { border-bottom-color: var(--accent-secondary); }
  
  /* Projects and Research */
  .project-list, .timeline-list, .research-list {
    list-style: none;
  }

  /* Education vs Professional two-column layout (flex) */
  .edu-pro-flex {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 50px;
    row-gap: 32px;
    align-items: flex-start;
  }
  .edu-pro-flex .edu-col,
  .edu-pro-flex .pro-col {
    min-width: 0;
  }
  
  /* Two-column layout for wider screens */
  @media (min-width: 1000px) {
    .project-list {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 50px;
      row-gap: 10px;
    }
    
    .project-list li {
      margin-bottom: 0;
    }
  }

  @media (max-width: 1000px) {
    .edu-pro-flex {
      grid-template-columns: 1fr;
    }
  }
  
  .project-list li, .research-list li {
    margin: 0;
    padding: 8px 0 18px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-auto-rows: min-content;
    column-gap: 12px;
    row-gap: 6px;
    align-items: start;
  }
  
  .project-header, .research-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-column: 1 / 2;
  }

  .project-header {
    margin-bottom: 8px;
  }

  .research-header {
    margin-bottom: 4px;
  }

  .title-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  
  .project-list h4, .research-list h4 {
    font-size: 1.05rem;
    margin-bottom: 0;
    font-weight: 600;
    color: var(--text);
  }
  

  /* Left column wrapper for folded cards */
  .project-list li:not(.expanded) .left-col,
  .research-list li:not(.expanded) .left-col {
    grid-column: 1 / 2;
    grid-row: 1;
    align-self: start;
  }
  
  .left-col p.clamped {
    margin-bottom: 0;
  }

  .research-status {
    display: flex;
    gap: 10px;
    font-size: 0.85rem;
  }
  
  .research-status {
    color: var(--accent);
    font-weight: 500;
    padding: 2px 8px;
    background: rgba(88, 166, 255, 0.1);
    border-radius: 12px;
    font-size: 0.8rem;
  }
  
  .research-authors {
    font-size: 0.85rem;
    font-style: italic;
    margin-bottom: 4px;
    color: var(--text-secondary);
    font-weight: 500;
  }
  
  
  .research-venue {
    font-size: 0.85rem;
    margin-bottom: 10px;
    color: var(--accent);
    font-weight: 500;
  }
  
  
  .research-description, .project-list p {
    margin: 2px 0 0;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--text);
  }
  

  /* Compact description: clamped by default */
  .clamped {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .project-list li.expanded .clamped,
  .research-list li.expanded .clamped {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }

  /* Preview image */

  .project-list li.expanded .preview-img,
  .research-list li.expanded .preview-img {
    /* Keep folded sizing when expanded */
    width: auto;
    height: 100%;
    max-height: none;
    object-fit: contain;
    display: block;
  }

  /* More toggle */
  .more-btn {
    padding: 2px 6px;
    font-size: 0.95rem;
    line-height: 1;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
  }

  .more-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
  }

  /* Expanded layout: keep two columns to avoid preview/link shift */
  .project-list li.expanded,
  .research-list li.expanded {
    display: grid;
    grid-template-columns: 1fr auto; /* maintain right preview column */
    row-gap: 8px;
    align-items: start;
  }

  /* No left/right columns in expanded view */
  .card-left {}
  .card-right {}

  .project-list li.expanded .preview-wrap,
  .research-list li.expanded .preview-wrap {
    grid-column: 2 / 3; /* keep in right column */
    grid-row: 1;
    position: relative;
    width: auto;
    display: block;
    margin-top: 0;
  }
  /* Maintain fixed preview height when expanded */
  .project-list li.expanded .preview-wrap { height: 5em; }
  .research-list li.expanded .preview-wrap { height: 8em; }

  /* Gallery shown when expanded */
  .gallery {
    grid-column: 1 / -1;
    display: none;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 14px;
  }
  .gallery.active { display: grid; }

  /* Grouped content: texts then images */
  .gallery-texts { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .gallery-images { display: grid; grid-template-columns: 1fr; gap: 14px; }

  /* On wider screens, show images in two equal columns */
  @media (min-width: 601px) {
    .gallery-images { grid-template-columns: 1fr 1fr; align-items: start; }
    /* Ensure figures fill the column width and ignore inline max-widths */
    .gallery-images .gallery-figure {
      max-width: 100% !important;
      width: 100% !important;
      margin: 0 !important;
    }
  }
  
  /* Figure + caption */
  .gallery-figure {
    margin: 0 auto; /* center (mobile / single-column) */
    width: 100%;
    max-width: 70%;
  }
  .gallery-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    object-fit: contain;
    background: var(--card);
    border: 1px solid var(--border);
    cursor: zoom-in;
  }
  .gallery-caption {
    margin-top: 6px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: center;
  }
  
  /* Optional text blocks within gallery */
  .gallery-text {
    margin: 6px auto 0;
    width: 100%;
    color: var(--text);
    line-height: 1.6;
    font-size: 0.95rem;
  }

  /* Subtle structure for expanded text blocks */
  .gallery-text .gt-label {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--border);
    text-underline-offset: 2px;
  }
  .gallery-text .gt-sep { color: var(--text-secondary); margin: 0 2px; }

  /* Preview overlay link on image */
  /* Right column (folded) holds preview */
  .project-list li:not(.expanded) .preview-wrap,
  .research-list li:not(.expanded) .preview-wrap {
    grid-column: 2 / 3;
    grid-row: 1;
    align-self: start;
  }

  .preview-wrap {
    position: relative;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
  }

  .preview-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 140px;
    object-fit: cover;
    border-radius: 4px;
    opacity: 1;
  }

  /* Folded view: fixed preview height (10em) */
  .project-list li:not(.expanded) .preview-wrap,
  .research-list li:not(.expanded) .preview-wrap {
    width: auto;
  }

  .project-list li:not(.expanded) .preview-wrap {
    height: 5em;
  }

  .research-list li:not(.expanded) .preview-wrap {
    height: 8em;
  }
  
  .project-list li:not(.expanded) .preview-img,
  .research-list li:not(.expanded) .preview-img {
    width: auto;
    height: 100%;
    max-height: none;
    object-fit: contain;
    display: block;
  }

  .preview-link {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
  }

  /* Expanded view: preview wrap centered/narrow; overlay spans it */
  .project-list li.expanded .preview-link,
  .research-list li.expanded .preview-link { left: 0; right: 0; width: auto; transform: none; }

  /* Simple black overlay behind icon */
  .preview-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    transition: background 0.2s ease;
    z-index: 0;
  }

  /* Lightbox for gallery images */
  .lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.85);
    z-index: 2000;
  }
  .lightbox.active { display: flex; }
  .lightbox-inner {
    position: relative;
    max-width: 92vw;
    max-height: 92vh;
  }
  .lightbox-image {
    max-width: 92vw;
    max-height: 78vh;
    width: auto;
    height: auto;
    display: block;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }
  .lightbox-caption {
    margin-top: 8px;
    text-align: center;
    color: #fff;
    font-size: 0.95rem;
    opacity: 0.9;
  }
  .lightbox-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
  }

  .preview-link:hover::before {
    background: transparent;
  }

  

  .gh-icon {
    width: 25px;
    height: 25px;
    background-color: currentColor; /* fallback: white icon */
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.54 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38C13.71 14.54 16 10.54 16 7.99 16 3.58 12.42 0 8 0z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='black' d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.54 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38C13.71 14.54 16 10.54 16 7.99 16 3.58 12.42 0 8 0z'/></svg>") no-repeat center / contain;
  }

  /* Make the GH icon subtle */
  .preview-link .gh-icon {
    opacity: 0.75;
    z-index: 1;
    transition: opacity 0.2s ease;
  }

  .preview-link:hover .gh-icon {
    opacity: 0;
  }

  .preview-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 4px 6px;
    font-size: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.45);
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1; /* ensure above overlay */
  }

  .preview-link:hover .preview-caption {
    opacity: 0;
    transform: translateY(6px);
  }

  .project-links {
    display: flex;
    gap: 10px;
    font-size: 0.9rem;
  }

  .preview-fallback-link {
    display: none;
  }

  /* Live (internet) icon */
  .live-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
    .live-link::before {
      content: '';
      display: inline-block;
      width: 14px;
      height: 14px;
      background-color: currentColor;
      -webkit-mask: url("data:image/svg+xml;utf8,<svg height='800px' width='800px' version='1.1' id='_x32_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' xml:space='preserve'><g><path fill='black' d='M255.994,0.006C114.607,0.013,0.012,114.612,0,256c0.012,141.387,114.607,255.986,255.994,255.994C397.393,511.986,511.992,397.387,512,256C511.992,114.612,397.393,0.013,255.994,0.006z M97.607,97.612c23.34-23.328,51.761-41.475,83.455-52.725c-15.183,18.375-27.84,41.906-37.757,69.116H82.772C87.452,108.308,92.396,102.824,97.607,97.612z M65.612,138.003h69.986c-9.008,31.929-14.41,67.834-15.363,105.997H32.327C34.374,205.196,46.3,169.088,65.612,138.003z M65.612,373.997C46.3,342.912,34.374,306.804,32.327,268h87.991c0.961,38.124,6.21,74.092,15.206,105.998H65.612z M97.607,414.386c-5.211-5.211-10.156-10.695-14.836-16.39h60.573c4.28,11.774,9.019,22.944,14.312,33.21c6.954,13.438,14.758,25.468,23.348,35.89C149.332,455.846,120.931,437.699,97.607,414.386z M243.998,479.667c-3.746-0.196-7.469-0.477-11.164-0.86c-5.89-2.64-11.722-6.25-17.5-10.961c-17.632-14.359-33.976-38.671-46.398-69.85h75.061V479.667z M243.998,373.997h-83.436c-9.477-31.171-15.316-67.311-16.328-105.998h99.763V373.997z M243.998,244H144.31c1.008-38.71,6.875-74.819,16.359-105.997h83.33V244z M243.998,114.003h-74.951c3.109-7.79,6.367-15.312,9.934-22.195c10.64-20.625,23.17-36.89,36.354-47.656c5.777-4.71,11.609-8.32,17.5-10.96c3.695-0.382,7.417-0.664,11.164-0.859V114.003z M446.392,138.003c19.312,31.085,31.234,67.194,33.281,105.997h-87.991c-0.961-38.124-6.21-74.092-15.21-105.997H446.392z M414.393,97.612c5.211,5.211,10.156,10.696,14.836,16.391h-60.577c-4.281-11.773-9.023-22.945-14.312-33.21c-6.953-13.437-14.758-25.468-23.347-35.89C362.668,56.16,391.065,74.301,414.393,97.612z M267.998,32.333c3.746,0.195,7.469,0.484,11.16,0.859c5.89,2.649,11.723,6.25,17.504,10.96c17.636,14.359,33.976,38.671,46.397,69.85h-75.061V32.333z M267.998,138.003h83.436c9.476,31.171,15.32,67.31,16.328,105.997h-99.764V138.003z M267.998,268h99.685c-1.007,38.71-6.874,74.818-16.359,105.998h-83.326V268z M296.661,467.846c-5.781,4.711-11.614,8.313-17.504,10.961c-3.691,0.375-7.414,0.664-11.16,0.86v-81.67h74.951c-3.109,7.789-6.367,15.312-9.933,22.195C322.376,440.816,309.845,457.081,296.661,467.846z M414.393,414.386c-23.336,23.328-51.764,41.476-83.459,52.725c15.187-18.375,27.835-41.905,37.757-69.115h60.538C424.548,403.692,419.604,409.176,414.393,414.386z M446.392,373.997h-69.998c9.008-31.929,14.414-67.842,15.367-105.998h87.912C477.626,306.804,465.704,342.912,446.392,373.997z'/></g></svg>") no-repeat center / contain;
              mask: url("data:image/svg+xml;utf8,<svg height='800px' width='800px' version='1.1' id='_x32_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' xml:space='preserve'><g><path fill='black' d='M255.994,0.006C114.607,0.013,0.012,114.612,0,256c0.012,141.387,114.607,255.986,255.994,255.994C397.393,511.986,511.992,397.387,512,256C511.992,114.612,397.393,0.013,255.994,0.006z M97.607,97.612c23.34-23.328,51.761-41.475,83.455-52.725c-15.183,18.375-27.84,41.906-37.757,69.116H82.772C87.452,108.308,92.396,102.824,97.607,97.612z M65.612,138.003h69.986c-9.008,31.929-14.41,67.834-15.363,105.997H32.327C34.374,205.196,46.3,169.088,65.612,138.003z M65.612,373.997C46.3,342.912,34.374,306.804,32.327,268h87.991c0.961,38.124,6.21,74.092,15.206,105.998H65.612z M97.607,414.386c-5.211-5.211-10.156-10.695-14.836-16.39h60.573c4.28,11.774,9.019,22.944,14.312,33.21c6.954,13.438,14.758,25.468,23.348,35.89C149.332,455.846,120.931,437.699,97.607,414.386z M243.998,479.667c-3.746-0.196-7.469-0.477-11.164-0.86c-5.89-2.64-11.722-6.25-17.5-10.961c-17.632-14.359-33.976-38.671-46.398-69.85h75.061V479.667z M243.998,373.997h-83.436c-9.477-31.171-15.316-67.311-16.328-105.998h99.763V373.997z M243.998,244H144.31c1.008-38.71,6.875-74.819,16.359-105.997h83.33V244z M243.998,114.003h-74.951c3.109-7.79,6.367-15.312,9.934-22.195c10.64-20.625,23.17-36.89,36.354-47.656c5.777-4.71,11.609-8.32,17.5-10.96c3.695-0.382,7.417-0.664,11.164-0.859V114.003z M446.392,138.003c19.312,31.085,31.234,67.194,33.281,105.997h-87.991c-0.961-38.124-6.21-74.092-15.21-105.997H446.392z M414.393,97.612c5.211,5.211,10.156,10.696,14.836,16.391h-60.577c-4.281-11.773-9.023-22.945-14.312-33.21c-6.953-13.437-14.758-25.468-23.347-35.89C362.668,56.16,391.065,74.301,414.393,97.612z M267.998,32.333c3.746,0.195,7.469,0.484,11.16,0.859c5.89,2.649,11.723,6.25,17.504,10.96c17.636,14.359,33.976,38.671,46.397,69.85h-75.061V32.333z M267.998,138.003h83.436c9.476,31.171,15.32,67.31,16.328,105.997h-99.764V138.003z M267.998,268h99.685c-1.007,38.71-6.874,74.818-16.359,105.998h-83.326V268z M296.661,467.846c-5.781,4.711-11.614,8.313-17.504,10.961c-3.691,0.375-7.414,0.664-11.16,0.86v-81.67h74.951c-3.109,7.789-6.367,15.312-9.933,22.195C322.376,440.816,309.845,457.081,296.661,467.846z M414.393,414.386c-23.336,23.328-51.764,41.476-83.459,52.725c15.187-18.375,27.835-41.905,37.757-69.115h60.538C424.548,403.692,419.604,409.176,414.393,414.386z M446.392,373.997h-69.998c9.008-31.929,14.414-67.842,15.367-105.998h87.912C477.626,306.804,465.704,342.912,446.392,373.997z'/></g></svg>") no-repeat center / contain;
    }

  /* Wider column gap for wide displays */
  @media (min-width: 1000px) {
    .project-list li, .research-list li { column-gap: 16px; }
  }
  
  /* .private-repo removed */
  
  .project-list p {
    margin-bottom: 8px;
    font-size: 0.95rem;
  }
  
  

  /* Interests section */
  .interests {
    margin-top: 25px;
    padding: 0;
    border-radius: 8px;
  }
  
  .interests h4 {
    font-size: 1.05rem;
    margin-bottom: 10px;
    font-weight: 600;
    color: var(--accent);
  }
  
  .interests p {
    font-size: 0.9rem;
    line-height: 1.4;
    opacity: 0.9;
  }

  /* Perspectives & Musings */
  .rants-container {
    margin: 2rem 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px; /* a bit more spaced out */
    align-items: stretch;
    justify-items: center; /* allow cards to be slightly narrower than columns */
  }
  
  /* Post‑it notes */
  .rant-card {
    position: relative;
    padding: 11px 13px 13px 13px; /* slightly tighter */
    border: none;
    border-radius: 4px;
    background: linear-gradient(180deg, #fff7b8 0%, #fff29e 100%);
    box-shadow: 0 8px 16px rgba(0,0,0,0.22), 0 2px 4px rgba(0,0,0,0.18);
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 200ms ease, filter 200ms ease;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 140px; /* smaller previews */
    aspect-ratio: 4 / 5; /* taller 4:5 portrait */
    color: #1c1b18; /* typewriter ink on paper */
    width: 85%; /* slightly smaller previews */
  }

  /* Slight random tilt for a casual look */
  .rants-container .rant-card:nth-child(3n+1) { transform: rotate(-1.6deg); }
  .rants-container .rant-card:nth-child(3n+2) { tzransform: rotate(1.2deg); }
  .rants-container .rant-card:nth-child(3n+3) { transform: rotate(-0.6deg); }
  
  .rant-card:hover {
    transform: rotate(0deg) translateY(-2px);
    box-shadow: 0 12px 20px rgba(0,0,0,0.28), 0 4px 8px rgba(0,0,0,0.2);
  }

  .rant-card:active { transform: rotate(0deg) translateY(0); filter: saturate(0.98); }

  /* Hide the entire clicked post‑it while reader is open without reflow */
  .rant-card.active { visibility: hidden; }
  .rant-card:focus-visible { outline: 2px dashed rgba(0,0,0,0.45); outline-offset: 3px; }

  /* Tape strip */
  .rant-card::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%) rotate(-3deg);
    width: 66px;
    height: 18px;
    background: rgba(255,255,255,0.65);
    filter: drop-shadow(0 2px 1px rgba(0,0,0,0.12));
    border-radius: 2px;
  }

  .rant-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  /* Typewriter style */
  .rant-card h5,
  .rant-preview {
    font-family: "Courier New", Courier, "Lucida Console", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
    letter-spacing: 0.2px;
  }

  .rant-card h5 {
    font-size: 0.98rem;
    font-weight: 700;
    color: #14130f;
    margin: 2px 0 2px 0;
  }
  
  .rant-preview {
    font-size: 0.9rem;
    color: #2a281f;
    font-style: normal;
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
  }

  .rant-arrow { display: none; }

  /* Color variants (flashy but readable) */
  .note-yellow { background: linear-gradient(180deg, #fff7b8 0%, #ffe880 100%); }
  .note-green  { background: linear-gradient(180deg, #cbffb1 0%, #a9ff7a 100%); }
  .note-pink   { background: linear-gradient(180deg, #ffd0ef 0%, #ff9fda 100%); }

  .rant-content { display: none; }
  .rant-content p { line-height: 1.6; margin-bottom: 10px; }
  .rant-content p:last-child { margin-bottom: 0; }

  /* removed reader panel */

  /* Rant Reader */
  .rant-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 1200;
  }

  .rant-overlay.active {
    display: flex;
  }

  .rant-reader {
    position: relative;
    max-height: 100vh;
    overflow-y: auto;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(100%, calc(var(--rant-page-width, 520px) + 24px));
  }

  .rant-reader::-webkit-scrollbar {
    width: 10px;
  }

  .rant-reader::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 6px;
  }

  .rant-reader-close {
    position: absolute;
    top: 10px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    color: #1d1b16;
  }

  .rant-page {
    position: relative;
    width: var(--rant-page-width, min(520px, 88vw));
    height: var(--rant-page-height, calc(var(--rant-page-width, min(520px, 88vw)) * 1.25));
    aspect-ratio: 4 / 5;
    border-radius: 4px;
    padding: 14px 16px 16px 16px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.28), 0 4px 8px rgba(0,0,0,0.20);
    color: #1c1b18;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: linear-gradient(180deg, #fff7b8 0%, #ffe880 100%);
  }

  .rant-page.note-green {
    background: linear-gradient(180deg, #cbffb1 0%, #a9ff7a 100%);
  }

  .rant-page.note-pink {
    background: linear-gradient(180deg, #ffd0ef 0%, #ff9fda 100%);
  }

  .rant-page + .rant-page {
    margin-top: 10px;
  }

  .rant-page::before {
    content: '';
    position: absolute;
    top: -12px;
    left: 50%;
    width: 66px;
    height: 18px;
    background: rgba(255,255,255,0.65);
    border-radius: 2px;
    transform: translateX(-50%) rotate(-3deg);
    filter: drop-shadow(0 2px 1px rgba(0,0,0,0.12));
  }

  .rant-page-header h5 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: "Courier New", Courier, monospace;
    color: #14130f;
  }

  .rant-page-body {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: "Courier New", Courier, monospace;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #29261b;
  }

  .rant-page-body p,
  .rant-page-body ul,
  .rant-page-body ol,
  .rant-page-body h3,
  .rant-page-body h4,
  .rant-page-body figure {
    margin: 0 0 12px;
    text-decoration: none;
    border-bottom: none;
  }

  .rant-page-body h3,
  .rant-page-body h4 {
    font-weight: 700;
  }

  .rant-page-body ul,
  .rant-page-body ol {
    padding-left: 22px;
    list-style-position: outside;
  }

  .rant-page-body a {
    color: inherit;
    text-decoration: underline;
  }

  .rant-page-body .rant-spacer {
    height: 10px;
  }

  .rant-page-body .rant-figure {
    display: flex;
    justify-content: center;
  }

  .rant-page-body .rant-figure img {
    width: 80%;
    max-width: 80%;
    display: block;
    margin: 0 auto;
  }


  /* Education/Timeline */
  .timeline-list li {
    display: flex;
    margin-bottom: 0;            /* remove vertical gap */
    position: relative;
    padding: 0;                  /* no vertical padding */
    border-left: 2px solid var(--border);
    padding-left: 20px;
    transition: padding-left 0.2s ease;
    height: var(--timeline-row-height);
    align-items: center;         /* vertically center contents */
    overflow: visible;           /* allow full text; height adapts to tallest via JS */
  }
  
  .timeline-list li:hover {
    padding-left: 24px;            /* subtle hover shift only */
  }
  
  .timeline-list li::before {
    content: '';
    position: absolute;
    left: -5px;
    top: calc(50% - 4px);        /* center dot vertically */
    width: 8px;
    height: 8px;
    background: var(--border);
    border-radius: 50%;
    opacity: 1;                    /* always visible */
  }
  
  /* Color-code timeline accents per column */
  .edu-col li { border-left-color: var(--accent); }
  .pro-col li { border-left-color: var(--accent-secondary); }
  .edu-col li::before { background: var(--accent); }
  .pro-col li::before { background: var(--accent-secondary); }
  
  .year-pro, .year-edu, .year {
    flex: 0 0 75px;
    font-weight: 600;
    margin-right: 15px;
    font-size: 0.9rem;
  }

  .year-edu {
    color: var(--accent);
  }

  .year-pro {
    color: var(--accent-secondary);
  }
  
  .timeline-content h4 {
    font-size: 1rem;
    margin-bottom: 2px; /* slightly tighter */
    font-weight: 600;
    /* allow full wrapping */
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  
  .timeline-content p {
    font-size: 0.9rem;
    opacity: 0.9;
    line-height: 1.3;
    /* allow full wrapping */
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
  
  /* Footer */
  footer {
    border-top: 1px solid var(--border);
    padding: 20px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: center;
  }
  
  .footer-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
  }
  
  .cat-icon {
    cursor: pointer;
    fill: var(--text-secondary);
    transition: all 0.3s ease;
    width: 20px;
    height: 20px;
    margin-left: 7px;
  }
  
  .cat-icon svg {
    width: 100%;
    height: 100%;
  }
  
  .cat-icon:hover {
    fill: var(--accent);
    transform: scale(1.2);
  }
  
  .cat-icon:active {
    transform: scale(1.1);
  }
  
  /* removed ip tracker button */
  
  .cat-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  
  .cat-overlay.active {
    opacity: 1;
    visibility: visible;
  }
  
  .cat-overlay img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
  }

  
  
  /* Media queries */
  @media (max-width: 600px) {
    body {
      font-size: 14px;
    }

    #profile {
      padding-bottom: 0;
      margin-bottom: 15px;
    }

    #intro {
      padding-bottom: 0;
    }
    
    .container {
      padding: 0 14px;
      margin: auto;
      width: 100%;
    }

    #top-nav .nav-inner {
      padding: 6px 14px;
    }
    
    main {
      padding: 10px 0;
    }
    
    section {
      margin-bottom: 25px;
      padding-bottom: 20px;
    }
  
    .profile-header {
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 20px;
    }
    
    .profile-image {
      width: 200px;
      height: 200px;
      margin-bottom: 10px;
    }
  
    .name-theme-wrapper {
      justify-content: center;
      margin-bottom: 12px;
    }
    
    .logo { font-size: 1.8rem; }
    
    .profile-header h2 {
      font-size: 1.1rem;
    }
  
    .external-links {
      justify-content: center;
      gap: 12px;
    }
    
    .project-header, .research-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
    }

    /* Hide previews on mobile */
    .project-list li .preview-wrap,
    .research-list li .preview-wrap { display: none !important; }

    .preview-fallback-link {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 0.9rem;
      margin-top: 4px;
    }

    .gallery { gap: 10px; }
    .gallery-figure, .gallery-text { max-width: 100%; }
    .gallery-img { border-radius: 4px; }
  

    .project-list li, .research-list li {
      column-gap: 10px;
      row-gap: 4px;
      padding: 6px 0;
      grid-template-columns: 1fr !important;
    }
  
    .timeline-list li {
      flex-direction: row; /* keep row layout for consistency */
      margin-bottom: 0; /* remove vertical gap on mobile */
      padding: 0;
    }
  
    .year-edu, .year-pro {
      margin-bottom: 0;
      margin-right: 10px;
      font-size: 0.85rem;
      line-height: 1.2;
      display: inline-block;
    }

    .edu-col li, .pro-col li {
      padding-left: 16px;
    }
    
    .footer-content {
      flex-direction: row;
      align-items: center;
    }

    .profile {
      margin-bottom: 0;
      padding-bottom: 0;
    }
    
  }

  @media (max-width: 800px) {
    .rants-container {
      grid-template-columns: 1fr;
      justify-items: center; /* center single-column items */
    }
    /* When stacked, make post-its narrower */
    .rant-card { width: 70vw; }
  }

  /* Prevent background scroll when reading */
  body.no-scroll { overflow: hidden; }

  .profile {
    margin-bottom: 0;
    padding-bottom: 0;
  }
  
  /* Ensure GH icon is visible atop overlay */