{"version":3,"sourceRoot":"","sources":["../../_sass/_variables.scss","../../_sass/_themes.scss","../../_sass/_layout.scss","main.scss","../../_sass/_base.scss","../../_sass/_distill.scss"],"names":[],"mappings":"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hBI;;;AA0hBJ;EA5gBA;EA+gBE;EACA;;AAGF;EACE;;AAEA;EAxiBF,WAhBa;;AAmBX;EAqiBA;IApiBE;;;AAoiBF;EAthBF;;AA0hBE;EACE;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AACA;EACE;;AAKN;EACE;EACA;;AAIJ;EACE;EACA;;AAIA;EACE;;AACA;EACI;EACA;;AAIN;EACE;EACA;;AAKF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAKN;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAKF;EACE;EACA;EACA;;AAGF;EACE;;AAEA;EACE;;AAOV;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;;;AAKJ;EAEE;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKF;AAAA;AAAA;AAAA;EAIE;EACA;;;AAGF;AAAA;AAAA;AAIA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;IAAK;;EACL;IAAO;;;AAGT;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;;AAGF;EACE;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAvyBE,WAXqB;EAozBrB;EACA;EACA;EACA;EACA;;AAEA;EARF;IASI;;;AAGF;EAZF;IAaI;;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;EACA;;;AAIJ;AACA;EACE;IACE;IACA;IACA;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;IACA;;EAGF;IACE;;EAGF;IACE;;;AAIJ;EACE;IACE;;EAGF;IACE;;;AAIJ;AACA;EACE;IACE;IACA;;EAEF;IACE;IACA;;;AAIJ;EACE;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;EACA;EACA;;;AAIA;EADF;IAEI;;;;AAIJ;EACE;;AAEA;EACE;;AAGF;EA38BA,WAjBa;;AAoBX;EAw8BF;IAv8BI;;;AAu8BJ;EAz7BA;EAyDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA03BE;;AAEA;EAJF;IAKI;IACA;IACA;;;;AAKN;EACE;;;AAIF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;AAAA;AAIA;EACE;EACA;EACA;;AAEA;EACE;EACA;;;AAIJ;EACE;;AAEA;EACE;;;AAIJ;AAAA;EAEE;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EA9/BA,WAjBa;;AAoBX;EA2/BF;AAAA;AAAA;AAAA;AAAA;AAAA;IA1/BI;;;AA0/BJ;AAAA;AAAA;AAAA;AAAA;AAAA;EA5+BA;EAyDA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EA66BE;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;EACE;;AAKJ;AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAEA;AAAA;EACE;EACA;;AAEA;AAAA;EACE;EAx/BR;;AA2/BQ;AAAA;EACE;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EA1iCV,WAVqB;;AAanB;EAgiCM;AAAA;IA/hCJ;;;AAyiCM;EAVF;AAAA;IAWI;IACA;;;AAIJ;AAAA;EACE;EACA;EACA;EACA;EACA;EAxjCV,WAVqB;;AAanB;EAgjCM;AAAA;IA/iCJ;;;AAujCM;EARF;AAAA;IASI;;;AAGF;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAUd;AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;;AAGF;AAAA;EACE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;EACA;EACA;EAnnCR,WAVqB;;AAanB;EA4mCI;AAAA;IA3mCF;;;AAmnCE;AAAA;EACE;EACA;EAznCR,WAVqB;;AAanB;EAonCI;AAAA;IAnnCF;;;AAmnCE;AAAA;EAIE;;AAEA;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;;AAIJ;AAAA;EACE;EACA;EACA;;AAIJ;AAAA;EACE;;AAEA;AAAA;EAzlCR;EACA;EACA;EACA;EACA;EACA;EA/BA;;AAkCA;AAAA;EACE;EACA;EACA;EACA;;AA6kCM;AAAA;EAEE;EACA;EArpCV,WARgB;;AAWd;EA+oCM;AAAA;IA9oCJ;;;AAspCE;AAAA;EACE;;AAEA;AAAA;EACE;EACA;EACA;EACA;EAjqCV,WAPe;;AAUb;EA0pCM;AAAA;IAzpCJ;;;AAypCI;AAAA;EAME;;AAEA;AAAA;EACE;EACA;;AAEA;AAAA;EACE;;AAKN;AAAA;EACE;EACA;EACA;;AAMR;EAxGF;AAAA;IAyGI;;EAEA;AAAA;IACE;IACA;;EAEA;AAAA;IACE;IACA;;EAGF;AAAA;IACE;IACA;;EAGF;AAAA;IACE;;EAEA;AAAA;IACE;IACA;IACA;IACA;;EAIJ;AAAA;IACE;;EAEA;AAAA;IACE;IACA;;;;AAQZ;EACE;EACA;EACA;;AAGE;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAKN;EACE;EACA;EACA;;;AAKN;AAAA;AAAA;AAKA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EAnBF;IAoBI;IACA;;EAEA;IACE;;EAGF;IACE;;;;AAMN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAIJ;EAnCF;IAoCI;;EAEA;IACE;IACA;;;;AAKN;EAEE;;AAWF;EAEE;EACA;;;AAGF;EAEE;;AAYA;EACE;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKE;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAQZ;AAAA;AAAA;AAME;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;;;;AAMN;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAIJ;EArBF;IAsBI;;EAEA;IACE;IACA;;;;AAQJ;EACE;;AAEA;EACE;;AAGF;EAEE;EACA;;AAEA;EALF;IAMI;;;AAQJ;EArBF;IAsBI;;;;AAWF;EACE;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAOV;EACE;IACE;;EAEA;IACE;IACA;;EAGF;IACE;;;;AAUR;EACE;;AAEA;EACE;;AAGF;EAEE;EACA;;AAEA;EALF;IAMI;;;AAQJ;EArBF;IAsBI;;;;AAMN;EACE;;;AAKA;EACE;;;AAIJ;EACE;IACE;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;;;AAKJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EAEA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;;;AAIJ;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI;IACA;;;;AAIJ;EACE;EACA;EACA;EACA;;AAEA;EANF;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","sourcesContent":["/*******************************************************************************\n * Variables used throughout the theme.\n * To adjust anything, simply edit the variables below and rebuild the theme.\n ******************************************************************************/\n\n\n// Colors\n$red-color:           #FF3636 !default;\n$red-color-dark:      #B71C1C !default;\n$orange-color:        #F29105 !default;\n// $blue-color:          #0076df !default;\n$blue-color:          #003594 !default;\n$blue-color-light:    lighten($blue-color, 30%);\n$cyan-color:          #2698BA !default;\n$light-cyan-color:    lighten($cyan-color, 15%);\n$green-color:         #00ab37 !default;\n$green-color-lime:    #B7D12A !default;\n$green-color-dark:    #009f06 !default;\n$green-color-light:   #ddffdd !default;\n$green-color-bright:  #11D68B !default;\n$purple-color:        #B509AC !default;\n$light-purple-color:  lighten($purple-color, 25%);\n$pink-color:          #f92080 !default;\n$pink-color-light:    #ffdddd !default;\n$yellow-color:        #efcc00 !default;\n$gold-color:          #FFB81C !default;\n$gold-color-light:    lighten($gold-color, 30%);\n$gold-color-vlight:   lighten($gold-color, 40%);\n$gold-color-dark:     darken($gold-color, 25%);\n\n$grey-color:          #828282 !default;\n$grey-color-light:    lighten($grey-color, 40%);\n$grey-color-dark:     darken($grey-color, 25%);\n$grey-color-deep-dark:     darken($grey-color, 35%);\n\n$blue-color-dark:     darken($blue-color, 15%);\n$blue-color-ldark:     darken($blue-color, 10%);\n\n$white-color: #ffffff !default;\n$black-color: #000000 !default;\n\n\n// Theme colors\n$code-bg-color-light:     rgba($blue-color-light, 0.05);\n$code-bg-color-dark:      darken($blue-color, 10%);\n// #2c3237 !default;\n\n","/*******************************************************************************\r\n * Themes\r\n ******************************************************************************/\r\n \r\n// Light theme\r\n:root {\r\n  --global-bg-color: #{$white-color};\r\n  --global-code-bg-color: #{$gold-color-vlight};\r\n  --global-text-color: #{$blue-color-dark};\r\n  --global-text-color-light: #{$blue-color};\r\n  --global-theme-color: #{$gold-color};\r\n  --global-hover-color: #{$gold-color-dark};\r\n  --global-footer-bg-color: #{$blue-color};\r\n  --global-footer-text-color: #{$gold-color};\r\n  --global-footer-link-color: #{$gold-color-dark};\r\n  --global-distill-app-color: #{$grey-color};\r\n\r\n  .fa-sun {\r\n    display : none;\r\n  }\r\n  .fa-moon {\r\n    padding-left: 10px;\r\n    padding-top: 12px;\r\n    display : block;\r\n  }\r\n}\r\n\r\n// Dark theme\r\nhtml[data-theme='dark'] {\r\n  --global-bg-color: #{$blue-color-dark};\r\n  --global-code-bg-color: #{$blue-color-ldark};\r\n  --global-text-color: #{$gold-color-vlight};\r\n  --global-text-color-light: #{$gold-color};\r\n  --global-theme-color: #{$gold-color};\r\n  --global-hover-color: #{$gold-color-dark};\r\n  --global-footer-bg-color: #{$blue-color};\r\n  --global-footer-text-color: #{$gold-color};\r\n  --global-footer-link-color: #{$gold-color-dark};\r\n  --global-distill-app-color: #{$grey-color-light};\r\n\r\n  .fa-sun {\r\n    padding-left: 10px;\r\n    padding-top: 12px;\r\n    display : block;\r\n  }\r\n  .fa-moon {\r\n    display : none;\r\n  }\r\n}\r\n","/******************************************************************************\n * Content\n ******************************************************************************/\n\n body {\n   padding-bottom: 70px;\n   color: var(--global-text-color);\n   background-color: var(--global-bg-color);\n }\n\n body.fixed-top-nav {\n   // Add some padding for the nav-bar.\n   padding-top: 56px;\n }\n\n body.sticky-bottom-footer {\n   // Remove padding below footer.\n   padding-bottom: 0;\n }\n\n.container {\n  max-width: $max-content-width;\n}\n\n// Profile\n.profile {\n  img {\n    width: 100%;\n  }\n}\n\n// TODO: redefine content layout.\n\n\n/******************************************************************************\n * Publications\n ******************************************************************************/\n\n// TODO: redefine publications layout.\n\n\n/*****************************************************************************\n* Projects\n*****************************************************************************/\n\n// TODO: redefine projects layout.\n","@charset \"utf-8\";\n\n// Dimensions\n$max-content-width: 900px;\n\n@import\n  \"variables\",\n  \"themes\",\n  \"layout\",\n  \"base\",\n  \"distill\"\n;\n","/*******************************************************************************\n * Styles for the base elements of the theme.\n ******************************************************************************/\n\n// Typography Scale System - Consistent font sizes across all pages\n$font-size-h1: 2.5rem;        // Main page headers\n$font-size-h2: 2rem;          // Section headers (large)\n$font-size-h3: 1.6rem;        // Section headers (standard)\n$font-size-h4: 1.4rem;        // Section headers (small)\n$font-size-h5: 1.2rem;        // Subsection headers\n$font-size-h6: 1.1rem;        // Minor headers\n\n$font-size-body: 1rem;        // Standard body text\n$font-size-body-large: 1.1rem; // Large body text (about page intro)\n$font-size-body-small: 0.9rem; // Small body text\n$font-size-caption: 0.875rem;  // Captions and meta text\n$font-size-small: 0.8rem;     // Small UI text\n$font-size-tiny: 0.75rem;     // Very small text (badges, etc.)\n\n// Mobile font scale adjustments\n$mobile-scale-factor: 0.9;\n\n// Font size mixins for consistent application\n@mixin font-size($size, $mobile-adjustment: true) {\n  font-size: $size;\n  \n  @if $mobile-adjustment {\n    @media (max-width: 768px) {\n      font-size: $size * $mobile-scale-factor;\n    }\n  }\n}\n\n@mixin header-font($level: 3) {\n  @if $level == 1 { @include font-size($font-size-h1); }\n  @else if $level == 2 { @include font-size($font-size-h2); }\n  @else if $level == 3 { @include font-size($font-size-h3); }\n  @else if $level == 4 { @include font-size($font-size-h4); }\n  @else if $level == 5 { @include font-size($font-size-h5); }\n  @else if $level == 6 { @include font-size($font-size-h6); }\n  @else { @include font-size($font-size-h3); }\n  \n  font-weight: 600;\n}\n\n@mixin body-font($variant: 'normal') {\n  @if $variant == 'large' { @include font-size($font-size-body-large); }\n  @else if $variant == 'small' { @include font-size($font-size-body-small); }\n  @else { @include font-size($font-size-body); }\n  \n  line-height: 1.6;\n}\n\n// Common mixins and placeholders for code reusability\n@mixin smooth-transition($property: all, $duration: 0.3s, $timing: ease) {\n  transition: $property $duration $timing;\n}\n\n@mixin legacy-transition($duration: 0.2s) {\n  -webkit-transition: all $duration ease-in-out;\n  transition: all $duration ease-in-out;\n}\n\n@mixin card-style($padding: 1.5rem, $border-radius: 12px) {\n  padding: $padding;\n  border: 1px solid var(--global-divider-color);\n  border-radius: $border-radius;\n  background: var(--global-card-bg-color);\n  @include smooth-transition();\n  \n  &:hover {\n    border-color: var(--global-theme-color);\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n    \n    [data-theme=\"dark\"] & {\n      box-shadow: 0 4px 12px rgba(255,255,255,0.05);\n    }\n  }\n}\n\n@mixin button-style($padding-y: 0.25rem, $padding-x: 1rem) {\n  color: var(--global-text-color);\n  border: 1px solid var(--global-theme-color);\n  padding: $padding-y $padding-x;\n  border-radius: 3px;\n  text-decoration: none;\n  display: inline-block;\n  @include smooth-transition();\n  \n  &:hover {\n    background: var(--global-theme-color);\n    color: white;\n    transform: translateY(-1px);\n    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n  }\n}\n\n@mixin section-header($level: 3) {\n  @include header-font($level);\n  margin-bottom: 0.5rem;\n  color: var(--global-theme-color);\n  border: none;\n  text-align: left;\n  padding-top: 0;\n  margin-top: 0;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n%standard-margin {\n  margin-bottom: 1rem;\n}\n\n%section-spacing {\n  margin-bottom: 3rem;\n}\n\n%card-padding {\n  padding: 1.5rem;\n}\n\n%compact-padding {\n  padding: 1.2rem;\n}\n\n// Typography\n\np, h1, h2, h3, h4, h5, h6, em, div, li, span, strong {\n  color: var(--global-text-color);\n}\n\na, table.table a {\n  color: var(--global-theme-color);\n  &:hover {\n    color: var(--global-hover-color);\n    text-decoration: underline;\n  }\n  &:hover:after :not(.nav-item.dropdown) {\n    width: 100%;\n  }\n}\n\nblockquote {\n  background: var(--global-bg-color);\n  border-left: 2px solid var(--global-theme-color);\n  margin: 1.5em 10px;\n  padding: 0.5em 10px;\n  @include font-size($font-size-h5);\n}\n\n// Math\n\n.equation {\n  @extend %standard-margin;\n  text-align: center;\n}\n\n// Caption\n\n.caption {\n  @include font-size($font-size-caption);\n  margin-top: 0.75rem;\n  margin-bottom: 1.5rem;\n  text-align: center;\n}\n\n// Citation\n.citation, .citation-number {\n  color: var(--global-theme-color);\n}\n\n// Profile\n\n.profile {\n  margin-left: 1rem;\n  width: 100%;\n\n  .address {\n    margin-bottom: 20px;\n    margin-top: 20px;\n    @include body-font('normal');\n    width: 100%;\n    p {\n      display: inline-block;\n      margin: 0;\n    }\n    .email {\n      font-family: courier;\n      display: inline-block;\n      margin: 0;\n      color: var(--global-theme-color);\n      @include body-font('normal');\n    }\n  }\n}\n\n.profile-img {\n  height: 250px;\n  width: 250px;\n  object-fit: cover;\n}\n\n@media (min-width: 576px) {\n  .profile {\n    width: 40%;\n    .address {\n      p { display: block; }\n    }\n  }\n  .project {\n    width: 15%;\n  }\n}\n\n.post-description {\n  margin-bottom: 2rem;\n  @include font-size($font-size-caption);\n  a {\n    color: inherit;\n    &:hover {\n      color: var(--global-theme-color);\n      text-decoration: none;\n    }\n  }\n}\n\n\n// Navbar customization\n\n.navbar {\n  box-shadow: none;\n  border-bottom: 1px solid $grey-color-light;\n  background-color: var(--global-footer-bg-color);\n  opacity: 0.85;\n}\n.navbar .dropdown-menu {\n  background-color: var(--global-bg-color);\n  a:not(.active) {\n    color: var(--global-text-color);\n  }\n  a:hover {\n    color: var(--global-text-color);\n  }\n}\n.dropdown-item {\n  color: var(--global-text-color);\n    &:hover {\n      color: var(--global-hover-color);\n      background-color: var(--global-bg-color);\n    }\n}\n.navbar.navbar-light {\n  a {\n    &:hover {\n      text-decoration: none;\n    }\n  }\n  .navbar-brand {\n    color: var(--global-theme-color);\n  }\n  .navbar-nav .nav-item .nav-link {\n    color: var(--global-theme-color);\n    &:hover {\n      color: var(--global-hover-color);\n    }\n  }\n  .navbar-nav .nav-item.active>.nav-link {\n      background-color: inherit;\n      font-weight: bolder;\n      color: var(--global-theme-color);\n      &:hover {\n        color: var(--global-hover-color);\n      }\n  }\n  .navbar-brand.social {\n    padding-bottom: 0;\n    padding-top: 0;\n    @include font-size(1.7rem, false); // Don't scale on mobile\n    a {\n      i::before {\n        color: var(--global-text-color-light);\n        @include legacy-transition();\n      }\n      &:hover {\n        i::before {\n          color: var(--global-theme-color);\n        }\n      }\n    }\n  }\n}\n\n.navbar-toggler {\n  .icon-bar {\n    display: block;\n    width: 22px;\n    height: 2px;\n    background-color: var(--global-text-color);\n    border-radius: 1px;\n    margin-bottom: 4px;\n    transition: all 0.2s;\n  }\n  .top-bar {\n    transform: rotate(45deg);\n    transform-origin: 10% 10%;\n  }\n  .middle-bar {\n    opacity: 0;\n  }\n  .bottom-bar {\n    transform: rotate(-45deg);\n    transform-origin: 10% 90%;\n  }\n}\n\n.navbar-toggler.collapsed {\n  .top-bar {\n    transform: rotate(0);\n  }\n  .middle-bar {\n    opacity: 1;\n  }\n  .bottom-bar {\n    transform: rotate(0);\n  }\n}\n\n\n// Legacy news styles (consolidated)\n.news {\n  background-color: var(--global-code-bg-color);\n  @include body-font('normal');\n  padding: 2rem 1rem 1rem 2rem;\n  border-radius: 15px;\n  \n  table {\n    td {\n      @include body-font('normal');\n      color: var(--global-text-color);\n    }\n    \n    th {\n      color: var(--global-text-color);\n    }\n  }\n  \n  h2 {\n    padding-top: 2rem;\n  }\n}\n// Social (bottom)\n\n.social {\n  text-align: center;\n  .contact-icons {\n    @include font-size(4rem, false); // Don't scale contact icons on mobile\n    a {\n      i::before {\n        color: var(--global-text-color-light);\n        @include legacy-transition();\n      }\n      &:hover {\n        i::before {\n          color: var(--global-theme-color);\n        }\n      }\n    }\n  }\n  .contact-note {\n    @include font-size($font-size-small);\n  }\n  p {\n    @include font-size($font-size-tiny, false);\n    line-height: 1em;\n    padding: 5px;\n  }\n}\n\n\n// Footer\nfooter.fixed-bottom {\n  background-color: var(--global-footer-bg-color);\n  @include font-size($font-size-tiny);\n  .container {\n    color: var(--global-footer-text-color);\n    padding-top: 9px;\n    padding-bottom: 8px;\n  }\n  a {\n    color: var(--global-footer-link-color);\n    &:hover {\n      color: var(--global-theme-color);\n      text-decoration: none;\n    }\n  }\n}\n\nfooter.sticky-bottom {\n  border-top: 1px solid $grey-color-light;\n  padding-top: 40px;\n  padding-bottom: 40px;\n  @include font-size($font-size-body-small);\n}\n\n\n// Blog\n\n.header-bar {\n  border-bottom: 1px solid $grey-color-light;\n  text-align: center;\n  padding-top: 2rem;\n  padding-bottom: 5rem;\n  h1 {\n    color: var(--global-theme-color);\n    @include header-font(1);\n    \n    @media (max-width: 768px) {\n      font-size: 3.5rem; // Custom large mobile size for header\n    }\n  }\n}\n\n.post-list {\n  margin: 0;\n  margin-bottom: 40px;\n  padding: 0;\n  li {\n    border-bottom: 1px solid $grey-color-light;\n    list-style: none;\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n    .post-meta {\n      color: var(--global-text-color-light);\n      @include font-size($font-size-caption);\n      margin-bottom: 0;\n    }\n    a {\n      color: var(--global-text-color);\n      text-decoration: none;\n      &:hover {\n        color: var(--global-theme-color);\n      }\n    }\n  }\n}\n\n.pagination {\n  .page-item {\n    .page-link {\n      color: var(--global-text-color);\n      &:hover {\n        color: $black-color;\n      }\n    }\n    &.active .page-link {\n      color: $white-color;\n      background-color: var(--global-theme-color);\n      &:hover {\n        background-color: var(--global-theme-color);\n      }\n    }\n  }\n}\n\n\n// Distill\n\n.distill {\n  a:hover {\n    border-bottom-color: var(--global-theme-color);\n    text-decoration: none;\n  }\n}\n\n\n// Projects\n\n.projects {\n  a {\n    text-decoration: none;\n\n    &:hover {\n      img {\n        height: 4cm;\n        opacity: 1.0;\n      }\n      .card-title {\n        color: $grey-color-dark;\n        opacity: 1.0;\n      }\n      .card-text {\n        @include font-size($font-size-body-small);\n        line-height: 1.4;\n      }\n    }\n  }\n\n  .card {\n    img {\n      width: 100%;\n      opacity: 0.9;\n      height: 4cm;\n      margin-top: 0.5cm;\n      object-fit: contain;\n      align-items: center;\n      background: var(--global-bg-color);\n      border: 1px solid var(--global-divider-color);\n      border-radius: 6px;\n      padding: 0.3rem;\n      @include smooth-transition();\n      \n      &:hover {\n        border-color: var(--global-theme-color);\n        opacity: 1.0;\n      }\n    }\n    .card-title {\n      color: $grey-color-dark;\n      margin-left: 0.5rem;\n      opacity: 0.5;\n    }\n    .card-text {\n      margin-left: 1rem;\n      margin-top: 1rem;\n      margin-right: 1rem;\n      opacity: 1.0;\n      color: $grey-color-dark;\n      @include font-size($font-size-body-small);\n      line-height: 1.5;\n    }\n    color: $grey-color-dark;\n    height: 5cm;\n  }\n\n  .card-item {\n    width: auto;\n    margin-bottom: 10px;\n\n    .row {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n  }\n\n  .grid-item {\n    width: 250px;\n    margin-bottom: 10px;\n  }\n\n  h2.category {\n    color: var(--global-theme-color);\n    border-bottom: 1px solid $grey-color;\n    padding-top: 0.5rem;\n    margin-top: 2rem;\n    @extend %standard-margin;\n    text-align: right;\n  }\n}\n\n\n// Publications base styles (consolidated)\n.publications, .select_publications {\n  margin-top: 2rem;\n  \n  h1 {\n    color: var(--global-theme-color);\n    @include header-font(2);\n    text-align: center;\n    margin: 1em 0;\n  }\n  \n  h2 {\n    margin-bottom: 1rem;\n    \n    span {\n      @include header-font(4);\n    }\n    \n    &.year {\n      color: var(--global-theme-color);\n      border-top: 1px solid $grey-color;\n      padding-top: 2rem;\n      margin: 2rem 0 -2rem 0;\n      text-align: right;\n    }\n  }\n  \n  ol.bibliography {\n    list-style: none;\n    padding: 0;\n    margin-top: 0;\n\n    li {\n      margin-bottom: 1rem;\n      \n      .abbr {\n        height: 2rem;\n        margin-bottom: 0.5rem;\n        \n        abbr {\n          display: inline-block;\n          background-color: var(--global-theme-color);\n          padding: 0 1rem;\n          \n          a {\n            color: white;\n            &:hover {\n              text-decoration: none;\n            }\n          }\n        }\n        \n        .award {\n          color: var(--global-theme-color) !important;\n          border: 1px solid var(--global-theme-color);\n        }\n      }\n      \n      .title {\n        font-weight: bolder;\n        color: var(--global-text-color-light);\n      }\n      \n      .author {\n        a {\n          border-bottom: 1px dashed var(--global-theme-color);\n          &:hover {\n              border-bottom-style: solid;\n              text-decoration: none;\n          }\n        }\n        \n        > em {\n          border-bottom: 1px solid;\n          font-style: normal;\n        }\n      }\n      \n      .links {\n        a.btn {\n          color: var(--global-text-color);\n          border: 1px solid var(--global-theme-color);\n          padding: 0.25rem 1rem;\n          \n          &:hover {\n            color: var(--global-text-color-light);\n            border-color: var(--global-theme-color);\n          }\n        }\n      }\n      \n      .hidden {\n        font-size: 0.875rem;\n        max-height: 0px;\n        overflow: hidden;\n        text-align: justify;\n        transition: all 0.15s ease;\n\n        p {\n          line-height: 1.4em;\n          margin: 10px;\n        }\n        \n        pre {\n          font-size: 1em;\n          line-height: 1.4em;\n          padding: 10px;\n        }\n        \n        &.open {\n          max-height: 100em;\n        }\n      }\n      \n      div.abstract {\n        p {\n          font-size: 0.9em;\n          color: var(--global-text-color-light);\n          opacity: 1;\n        }\n        \n        &.hidden {\n          border: dashed 1px var(--global-bg-color);\n          \n          &.open {\n            border-color: var(--global-text-color);\n          }\n        }\n      }\n    }\n  }\n  \n  .btn {\n    margin: 0;\n    color: var(--global-text-color);\n    border: 1px solid var(--global-text-color);\n    padding: 0.25rem 1rem;\n    \n    &:hover {\n      color: var(--global-theme-color);\n      border-color: var(--global-theme-color);\n    }\n  }\n  \n  p {\n    font-size: 1em;\n    color: var(--global-theme-color);\n  }\n}\n\n// Rouge Color Customization\nfigure.highlight {\n  @extend %standard-margin;\n  margin-top: 0;\n}\n\npre {\n  color: var(--global-theme-color);\n  background-color: var(--global-code-bg-color);\n  border-radius: 6px;\n  padding: 6px 12px;\n  pre, code {\n    background-color: transparent;\n    border-radius: 0;\n    padding: 0;\n  }\n}\n\ncode {\n  color: var(--global-theme-color);\n  background-color: var(--global-code-bg-color);\n  border-radius: 3px;\n  padding: 3px 3px;\n}\n\n\n// Transitioning Themes\nhtml.transition,\nhtml.transition *,\nhtml.transition *:before,\nhtml.transition *:after {\n  transition: all 750ms !important;\n  transition-delay: 0 !important;\n}\n\n/******************************************************************************\n * Slideshow\n ******************************************************************************/\n\n/* Modern Slideshow Container */\n.slideshow-container {\n  position: relative;\n  max-width: 100%;\n  margin: 2rem auto;\n  border-radius: 16px;\n  overflow: hidden;\n  box-shadow: 0 20px 40px rgba(0,0,0,0.1);\n  background: #f8f9fa;\n  height: 600px;\n}\n\n/* Loading placeholder for images */\n.mySlides::before {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  width: 40px;\n  height: 40px;\n  border: 3px solid var(--global-theme-color);\n  border-top: 3px solid transparent;\n  border-radius: 50%;\n  animation: spin 1s linear infinite;\n  opacity: 0;\n  transition: opacity 0.3s ease;\n}\n\n.mySlides img:not([data-loaded=\"true\"])::before {\n  opacity: 1;\n}\n\n@keyframes spin {\n  0% { transform: translate(-50%, -50%) rotate(0deg); }\n  100% { transform: translate(-50%, -50%) rotate(360deg); }\n}\n\n/* Slide Styling */\n.mySlides {\n  opacity: 0;\n  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n\n  &.active {\n    opacity: 1;\n  }\n\n  img {\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);\n    \n    /* Optimize image rendering */\n    image-rendering: -webkit-optimize-contrast;\n    image-rendering: crisp-edges;\n    will-change: transform;\n  }\n\n  &:hover img {\n    transform: scale(1.02);\n  }\n}\n\n/* Modern Caption Styling */\n.slide-caption {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background: linear-gradient(transparent, rgba(0,0,0,0.3));\n  padding: 60px 30px 30px;\n  color: white;\n}\n\n.caption-content {\n  @include font-size($font-size-body-large, false);\n  font-weight: 400;\n  line-height: 1.4;\n  color: #ffffff;\n  text-shadow: 0 2px 4px rgba(0,0,0,0.5);\n  max-width: 800px;\n  \n  @media (max-width: 768px) {\n    font-size: 1rem;\n  }\n  \n  @media (max-width: 480px) {\n    font-size: 0.9rem;\n  }\n}\n\n/* Modern Navigation Buttons */\n.prev, .next {\n  cursor: pointer;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  background: rgba(255,255,255,0.9);\n  color: #333;\n  border: none;\n  border-radius: 50%;\n  width: 50px;\n  height: 50px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  backdrop-filter: blur(10px);\n  z-index: 10;\n  opacity: 0.7;\n\n  &:hover {\n    opacity: 1;\n    background: rgba(255,255,255,1);\n    transform: translateY(-50%) scale(1.1);\n    box-shadow: 0 8px 25px rgba(0,0,0,0.15);\n  }\n}\n\n.prev {\n  left: 20px;\n}\n\n.next {\n  right: 20px;\n}\n\n/* Modern Dots/Indicators */\n.slideshow-dots {\n  text-align: center;\n  margin-top: 25px;\n  margin-bottom: 2rem;\n}\n\n.dot {\n  cursor: pointer;\n  height: 12px;\n  width: 12px;\n  margin: 0 6px;\n  background: var(--global-footer-bg-color);\n  border-radius: 50%;\n  display: inline-block;\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  border: 2px solid transparent;\n\n  &:hover {\n    background: var(--global-footer-bg-color);\n    transform: scale(1.2);\n  }\n\n  &.active {\n    background: var(--global-theme-color);\n    transform: scale(1.3);\n    box-shadow: 0 0 0 3px rgba(0,123,255,0.2);\n  }\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .slideshow-container {\n    height: 400px;\n    margin: 1rem auto;\n    border-radius: 12px;\n  }\n  \n  .caption-content {\n    font-size: 16px;\n  }\n  \n  .slide-caption {\n    padding: 40px 20px 20px;\n  }\n  \n  .prev, .next {\n    width: 40px;\n    height: 40px;\n  }\n  \n  .prev {\n    left: 15px;\n  }\n  \n  .next {\n    right: 15px;\n  }\n}\n\n@media (max-width: 480px) {\n  .slideshow-container {\n    height: 300px;\n  }\n  \n  .caption-content {\n    font-size: 14px;\n  }\n}\n\n/* Smooth entrance animation */\n@keyframes slideIn {\n  from {\n    opacity: 0;\n    transform: translateY(20px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.slideshow-container {\n  animation: slideIn 0.6s ease-out;\n}\n\n/******************************************************************************\n * Research Projects\n ******************************************************************************/\n\n.research-intro {\n  background: var(--global-code-bg-color);\n  border-radius: 12px;\n  padding: 2rem;\n  margin-bottom: 3rem;\n  border-left: 4px solid var(--global-theme-color);\n}\n\n.research-content {\n  @media (max-width: 768px) {\n    padding: 0 0.5rem;\n  }\n}\n\n.research-category {\n  margin-bottom: 4rem;\n  \n  &:last-child {\n    margin-bottom: 2rem;\n  }\n  \n  h2.category {\n    @include section-header(3);\n    text-align: left;\n    \n    @media (max-width: 768px) {\n      font-size: $font-size-h4 * $mobile-scale-factor;\n      margin-top: 1.5rem;\n      margin-bottom: 0.75rem;\n    }\n  }\n}\n\n.project-item {\n  margin-bottom: 2rem;\n  // translateY effect removed for cleaner experience\n}\n\n.project-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n  gap: 2rem;\n  margin-top: 2rem;\n}\n\n/******************************************************************************\n * About Page\n ******************************************************************************/\n\n.about-content {\n  font-size: 1.1rem;\n  line-height: 1.7;\n  margin-bottom: 3rem;\n  \n  p {\n    margin-bottom: 1.5rem;\n    text-align: justify;\n  }\n}\n\n.slideshow-section {\n  margin: 3rem 0;\n  \n  .slideshow-container {\n    margin-bottom: 1rem;\n  }\n}\n\n.news-section,\n.publications-section {\n  margin: 2rem 0;\n  \n  .section-header {\n    @include section-header(3);\n    margin-bottom: 0.4rem;\n    \n    &:hover {\n      color: var(--global-hover-color);\n    }\n  }\n  \n  // Modern styling for news section on about page (tighter and lighter)\n  .news {\n    background: var(--global-bg-color);\n    border-radius: 8px;\n    padding: 1rem;\n    box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n    border: 1px solid var(--global-divider-color);\n    \n    .table-responsive {\n      max-height: none;\n      \n      table.table {\n        margin-bottom: 0;\n        width: 100%;\n        \n        tr {\n          border-bottom: 1px solid var(--global-divider-color);\n          @include smooth-transition();\n          \n          &:last-child {\n            border-bottom: none;\n          }\n          \n          &:hover {\n            background: var(--global-code-bg-color);\n            transform: translateX(3px);\n          }\n          \n          th {\n            font-weight: 500;\n            color: var(--global-theme-color);\n            white-space: nowrap;\n            width: 120px;\n            padding: 0.6rem 0.4rem;\n            vertical-align: top;\n            border-top: none;\n            @include font-size($font-size-body-small);\n            \n            @media (max-width: 768px) {\n              width: 100px;\n              padding: 0.5rem 0.3rem;\n            }\n          }\n          \n          td {\n            color: var(--global-text-color);\n            line-height: 1.4;\n            padding: 0.6rem 0.4rem;\n            vertical-align: top;\n            border-top: none;\n            @include font-size($font-size-body-small);\n            \n            @media (max-width: 768px) {\n              padding: 0.5rem 0.3rem;\n            }\n            \n            .news-title {\n              color: var(--global-theme-color);\n              text-decoration: none;\n              font-weight: normal;\n              \n              &:hover {\n                color: var(--global-hover-color);\n                text-decoration: underline;\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n  \n  // Modern styling for publications section on about page (tighter and lighter)\n  .select_publications {\n    background: var(--global-bg-color);\n    border-radius: 8px;\n    padding: 1rem;\n    box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n    border: 1px solid var(--global-divider-color);\n    \n    ol.bibliography {\n      list-style: none;\n      padding: 0;\n      margin: 0;\n      \n      li {\n        margin-bottom: 0.75rem;\n        padding: 0.75rem;\n        background: var(--global-bg-color);\n        border-radius: 6px;\n        border-left: 2px solid var(--global-theme-color);\n        transition: all 0.3s ease;\n        \n        &:last-child {\n          margin-bottom: 0;\n        }\n        \n        &:hover {\n          background: var(--global-code-bg-color);\n          transform: translateX(2px);\n          box-shadow: 0 2px 6px rgba(0,0,0,0.08);\n          border-left-color: var(--global-hover-color);\n        }\n        \n        .title {\n          font-weight: 500;\n          color: var(--global-text-color-light);\n          margin-bottom: 0.3rem;\n          line-height: 1.3;\n          @include font-size($font-size-body-small);\n        }\n        \n        .author {\n          color: var(--global-text-color);\n          margin-bottom: 0.3rem;\n          @include font-size($font-size-body-small);\n          line-height: 1.3;\n          \n          a {\n            color: var(--global-theme-color);\n            border-bottom: 1px dashed var(--global-theme-color);\n            text-decoration: none;\n            \n            &:hover {\n              border-bottom-style: solid;\n              color: var(--global-hover-color);\n            }\n          }\n          \n          > em {\n            border-bottom: 1px solid;\n            font-style: normal;\n            color: var(--global-theme-color);\n          }\n        }\n        \n        .links {\n          margin-top: 0.4rem;\n          \n          a.btn {\n            @include button-style(0.2rem, 0.5rem);\n            margin-right: 0.4rem;\n            margin-bottom: 0.2rem;\n            @include font-size($font-size-small);\n          }\n        }\n        \n        .abbr {\n          margin-bottom: 0.3rem;\n          \n          abbr {\n            background-color: var(--global-theme-color);\n            color: white;\n            padding: 0.15rem 0.4rem;\n            border-radius: 3px;\n            @include font-size($font-size-tiny);\n            text-decoration: none;\n            \n            a {\n              color: white;\n              text-decoration: none;\n              \n              &:hover {\n                text-decoration: none;\n              }\n            }\n          }\n          \n          .award {\n            color: var(--global-theme-color) !important;\n            background: transparent !important;\n            border: 1px solid var(--global-theme-color);\n          }\n        }\n      }\n    }\n    \n    @media (max-width: 768px) {\n      padding: 0.8rem;\n      \n      ol.bibliography li {\n        padding: 0.6rem;\n        margin-bottom: 0.6rem;\n        \n        .title {\n          font-size: 0.9rem;\n          margin-bottom: 0.25rem;\n        }\n        \n        .author {\n          font-size: 0.85rem;\n          margin-bottom: 0.25rem;\n        }\n        \n        .links {\n          margin-top: 0.3rem;\n          \n          a.btn {\n            font-size: 0.75rem;\n            padding: 0.15rem 0.4rem;\n            margin-right: 0.3rem;\n            margin-bottom: 0.15rem;\n          }\n        }\n        \n        .abbr {\n          margin-bottom: 0.25rem;\n          \n          abbr {\n            font-size: 0.7rem;\n            padding: 0.1rem 0.3rem;\n          }\n        }\n      }\n    }\n  }\n}\n\n.social-section {\n  margin-top: 4rem;\n  padding-top: 3rem;\n  border-top: 1px solid var(--global-divider-color);\n  \n  .social {\n    .contact-icons {\n      margin-bottom: 1rem;\n      \n      a {\n        margin: 0 0.5rem;\n        transition: transform 0.3s ease;\n        \n        &:hover {\n          transform: translateY(-2px);\n        }\n      }\n    }\n    \n    .contact-note {\n      font-size: 0.9rem;\n      color: var(--global-text-color-light);\n      font-style: italic;\n    }\n  }\n}\n\n/******************************************************************************\n * Page Intro Sections (consolidated)\n ******************************************************************************/\n\n// Base intro styling for all page intro sections\n%page-intro-base {\n  background: var(--global-code-bg-color);\n  border-radius: 12px;\n  border-left: 4px solid var(--global-theme-color);\n  margin-bottom: 2rem;\n  \n  h3 {\n    margin-bottom: 0.8rem;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n  \n  p {\n    color: var(--global-text-color);\n    margin-bottom: 0;\n  }\n  \n  @media (max-width: 768px) {\n    padding: 1.2rem;\n    margin-bottom: 1.5rem;\n    \n    h3 {\n      font-size: 1.3rem;\n    }\n    \n    p {\n      font-size: 1rem;\n    }\n  }\n}\n\n// Badge styling for intro sections\n%intro-badges {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 0.8rem;\n  \n  .badge {\n    background: var(--global-theme-color);\n    color: white;\n    padding: 0.4rem 0.8rem;\n    border-radius: 18px;\n    font-size: 0.85rem;\n    display: inline-block;\n    box-shadow: 0 2px 6px rgba(0,0,0,0.1);\n    transition: all 0.3s ease;\n    text-decoration: none;\n    cursor: pointer;\n    \n    &:hover {\n      background: var(--global-hover-color);\n      transform: translateY(-1px);\n      box-shadow: 0 3px 8px rgba(0,0,0,0.15);\n      color: white;\n      text-decoration: none;\n    }\n    \n    &:focus {\n      outline: 2px solid var(--global-theme-color);\n      outline-offset: 2px;\n    }\n    \n    strong {\n      font-weight: 600;\n    }\n  }\n  \n  @media (max-width: 768px) {\n    gap: 0.6rem;\n    \n    .badge {\n      font-size: 0.8rem;\n      padding: 0.35rem 0.7rem;\n    }\n  }\n}\n\n.talks-intro {\n  @extend %page-intro-base;\n  padding: 1.5rem;\n  \n  .talk-counts {\n    @extend %intro-badges;\n    \n    .talk-type-badge {\n      @extend .badge;\n    }\n  }\n}\n\n.news-intro {\n  @extend %page-intro-base;\n  padding: 2rem;\n  margin-bottom: 3rem;\n}\n\n.publications-intro {\n  @extend %page-intro-base;\n  padding: 1.5rem;\n  \n  .publication-counts {\n    @extend %intro-badges;\n    \n    .publication-type-badge {\n      @extend .badge;\n    }\n  }\n}\n\n.talks-content {\n  .talk-category {\n    margin-bottom: 2.5rem;\n    \n    &:last-child {\n      margin-bottom: 1rem;\n    }\n    \n    .category-header {\n      font-size: 1.6rem;\n      font-weight: 600;\n      margin-bottom: 0.3rem;\n      color: var(--global-theme-color);\n      border: none;\n      text-align: left;\n      padding-top: 0;\n      margin-top: 0;\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n    }\n    \n    .talk-list {\n      .bibliography {\n        li {\n          margin-bottom: 1rem;\n          padding: 1rem;\n          background: var(--global-bg-color);\n          border-radius: 8px;\n          border-left: 3px solid var(--global-theme-color);\n          transition: all 0.3s ease;\n          \n          &:hover {\n            background: var(--global-code-bg-color);\n            transform: translateX(3px);\n            box-shadow: 0 3px 8px rgba(0,0,0,0.1);\n          }\n        }\n      }\n    }\n  }\n}\n\n/******************************************************************************\n * Page Content Sections (consolidated)\n ******************************************************************************/\n\n// Base content styling\n%page-content-base {\n  .section-header {\n    font-size: 1.8rem;\n    font-weight: 600;\n    margin-bottom: 0.5rem;\n    color: var(--global-theme-color);\n    border: none;\n    text-align: left;\n    padding-top: 0;\n    margin-top: 0;\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n  \n  @media (max-width: 768px) {\n    .section-header {\n      font-size: 1.5rem;\n    }\n  }\n}\n\n// List styling for content sections\n%content-list-base {\n  background: var(--global-bg-color);\n  border-radius: 8px;\n  padding: 1.5rem;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.05);\n  \n  .bibliography li {\n    margin-bottom: 1rem;\n    padding: 1rem;\n    background: var(--global-bg-color);\n    border-radius: 8px;\n    border-left: 3px solid var(--global-theme-color);\n    transition: all 0.3s ease;\n    \n    &:hover {\n      background: var(--global-code-bg-color);\n      transform: translateX(3px);\n      box-shadow: 0 3px 8px rgba(0,0,0,0.1);\n    }\n  }\n  \n  @media (max-width: 768px) {\n    padding: 1rem;\n    \n    .bibliography li {\n      padding: 0.8rem;\n      margin-bottom: 0.8rem;\n    }\n  }\n}\n\n.talks-content {\n  @extend %page-content-base;\n  \n  .talk-category {\n    margin-bottom: 2.5rem;\n    \n    &:last-child {\n      margin-bottom: 1rem;\n    }\n    \n    .category-header {\n      @extend .section-header;\n      font-size: 1.6rem;\n      margin-bottom: 0.3rem;\n      \n      @media (max-width: 768px) {\n        font-size: 1.4rem;\n      }\n    }\n    \n    .talk-list {\n      @extend %content-list-base;\n    }\n    \n    @media (max-width: 768px) {\n      margin-bottom: 2rem;\n    }\n  }\n}\n\n.news-content {\n  @extend %page-content-base;\n  \n  .news-list {\n    @extend %content-list-base;\n    \n    .news {\n      background: transparent;\n      padding: 0;\n      border-radius: 0;\n      \n      table {\n        width: 100%;\n        \n        tr {\n          border-bottom: 1px solid var(--global-divider-color);\n          transition: all 0.3s ease;\n          \n          &:last-child {\n            border-bottom: none;\n          }\n          \n          &:hover {\n            background: var(--global-code-bg-color);\n            transform: translateX(5px);\n          }\n          \n          td {\n            padding: 1rem 0.5rem;\n            vertical-align: top;\n            \n            &:first-child {\n              font-weight: 600;\n              color: var(--global-theme-color);\n              white-space: nowrap;\n              width: 120px;\n            }\n            \n            &:last-child {\n              color: var(--global-text-color);\n              line-height: 1.5;\n            }\n          }\n        }\n      }\n    }\n    \n    @media (max-width: 768px) {\n      .news table tr td {\n        padding: 0.8rem 0.3rem;\n        \n        &:first-child {\n          width: 100px;\n          font-size: 0.9rem;\n        }\n        \n        &:last-child {\n          font-size: 0.95rem;\n        }\n      }\n    }\n  }\n}\n\n.publications-content {\n  @extend %page-content-base;\n  \n  .publication-category {\n    margin-bottom: 2.5rem;\n    \n    &:last-child {\n      margin-bottom: 1rem;\n    }\n    \n    .category-header {\n      @extend .section-header;\n      font-size: 1.6rem;\n      margin-bottom: 0.3rem;\n      \n      @media (max-width: 768px) {\n        font-size: 1.4rem;\n      }\n    }\n    \n    .publication-list {\n      @extend %content-list-base;\n    }\n    \n    @media (max-width: 768px) {\n      margin-bottom: 2rem;\n    }\n  }\n}\n\n// Smooth scroll behavior for anchor links\nhtml {\n  scroll-behavior: smooth;\n}\n\n// Additional styling for targeted sections\n.publication-category:target, .talk-category:target {\n  .category-header {\n    animation: highlight-flash 2s ease-in-out;\n  }\n}\n\n@keyframes highlight-flash {\n  0% { \n    background-color: var(--global-theme-color);\n    color: white;\n    padding: 0.2rem 0.5rem;\n    border-radius: 4px;\n  }\n  50% { \n    background-color: var(--global-theme-color);\n    color: white;\n    padding: 0.2rem 0.5rem;\n    border-radius: 4px;\n  }\n  100% { \n    background-color: transparent;\n    color: var(--global-theme-color);\n    padding: 0;\n    border-radius: 0;\n  }\n}\n\n// Modern Project Cards\n.project-link {\n  text-decoration: none;\n  color: inherit;\n  display: block;\n  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n\n  &:hover {\n    text-decoration: none;\n    color: inherit;\n    // Removed card zoom effect for smoother experience\n    transform: none;\n  }\n}\n\n.project-card {\n  background: var(--global-bg-color);\n  border: 1px solid var(--global-divider-color);\n  border-radius: 12px;\n  overflow: hidden;\n  transition: border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), \n              box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);\n  margin-bottom: 2rem;\n\n  &:hover {\n    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n    border-color: var(--global-theme-color);\n  }\n\n  &.hoverable:hover {\n    // No transform effects for smooth experience\n    transform: none;\n  }\n}\n\n.project-card-content {\n  padding: 1.5rem;\n  \n  @media (max-width: 768px) {\n    padding: 1rem;\n  }\n}\n\n.project-title {\n  font-size: 1.4rem;\n  font-weight: 600;\n  color: var(--global-theme-color);\n  margin-bottom: 0.75rem;\n  line-height: 1.3;\n  \n  @media (max-width: 768px) {\n    font-size: 1.2rem;\n    margin-bottom: 0.5rem;\n  }\n}\n\n.project-description {\n  color: var(--global-text-color);\n  line-height: 1.6;\n  margin-bottom: 1rem;\n  font-size: 1rem;\n  \n  @media (max-width: 768px) {\n    font-size: 0.95rem;\n    line-height: 1.5;\n  }\n}\n\n.project-image-container {\n  width: 100%;\n  margin-bottom: 1rem;\n  text-align: center;\n  \n  @media (max-width: 768px) {\n    margin-bottom: 0.75rem;\n  }\n}\n\n.project-image {\n  max-width: 100%;\n  height: auto;\n  max-height: 200px;\n  object-fit: contain;\n  border-radius: 8px;\n  transition: border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n              filter 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n  \n  // Enhanced visibility for dark themes\n  background: var(--global-bg-color);\n  border: 1px solid var(--global-divider-color);\n  padding: 0.5rem;\n  \n  &:hover {\n    // Only subtle border color change, no zoom\n    border-color: var(--global-theme-color);\n  }\n  \n  @media (max-width: 768px) {\n    max-height: 150px;\n    padding: 0.3rem;\n  }\n}\n\n.project-images-dual {\n  display: flex;\n  gap: 1rem;\n  margin-bottom: 1rem;\n  \n  @media (max-width: 768px) {\n    flex-direction: column;\n    gap: 0.5rem;\n    margin-bottom: 0.75rem;\n  }\n  \n  .project-image-container {\n    flex: 1;\n    margin-bottom: 0;\n    \n    .project-image {\n      background: var(--global-bg-color);\n      border: 1px solid var(--global-divider-color);\n      padding: 0.5rem;\n      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n      \n      &:hover {\n        border-color: var(--global-theme-color);\n      }\n      \n      @media (max-width: 768px) {\n        padding: 0.3rem;\n      }\n    }\n  }\n}\n\n.project-links {\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n  margin-top: 1rem;\n  padding-top: 1rem;\n  border-top: 1px solid var(--global-divider-color);\n  \n  @media (max-width: 768px) {\n    gap: 0.75rem;\n    margin-top: 0.75rem;\n    padding-top: 0.75rem;\n  }\n}\n\n.github-link, .github-stars {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--global-text-color-light);\n  font-size: 0.9rem;\n  transition: color 0.2s ease;\n  \n  &:hover {\n    color: var(--global-theme-color);\n  }\n  \n  i {\n    font-size: 1rem;\n  }\n  \n  @media (max-width: 768px) {\n    font-size: 0.85rem;\n    gap: 0.4rem;\n    \n    i {\n      font-size: 0.9rem;\n    }\n  }\n}\n\n.project-text {\n  flex: 1;\n}\n\n// Container improvements for project layout\n.project-item {\n  margin-bottom: 2rem;\n  \n  @media (max-width: 768px) {\n    margin-bottom: 1.5rem;\n  }\n}\n\n// Legacy card style updates\n.card {\n  // ...existing code...\n  \n  @media (max-width: 768px) {\n    height: auto;\n    min-height: auto;\n    \n    img {\n      height: 3cm;\n      margin-top: 0.3cm;\n    }\n    \n    .card-text {\n      margin: 0.5rem;\n      font-size: 0.9rem;\n    }\n  }\n}\n\n.card-item {\n  // ...existing code...\n  \n  @media (max-width: 768px) {\n    margin-bottom: 1rem;\n  }\n}\n\n// Horizontal project card layout\n.project-card.horizontal {\n  .project-card-horizontal-content {\n    display: flex;\n    align-items: stretch;\n    gap: 1.5rem;\n    \n    @media (max-width: 768px) {\n      flex-direction: column;\n      gap: 1rem;\n    }\n  }\n  \n  .project-image-container.horizontal {\n    flex: 0 0 200px;\n    margin-bottom: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    \n    @media (max-width: 768px) {\n      flex: none;\n      text-align: center;\n    }\n    \n    .project-image {\n      width: 100%;\n      height: auto;\n      max-height: 150px;\n      object-fit: contain;\n      \n      @media (max-width: 768px) {\n        max-height: 120px;\n      }\n    }\n  }\n  \n  .project-text {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n  }\n  \n  .project-description {\n    margin-bottom: auto;\n  }\n  \n  .project-links {\n    margin-top: 1rem;\n    padding-top: 1rem;\n    border-top: 1px solid var(--global-divider-color);\n    \n    @media (max-width: 768px) {\n      margin-top: 0.75rem;\n      padding-top: 0.75rem;\n    }\n  }\n}\n\n// Enhanced logo visibility mixin for better maintainability\n@mixin project-image-dark-mode {\n  background: rgba(255, 255, 255, 0.95) !important;\n  border: 2px solid rgba(255, 255, 255, 0.3) !important;\n  filter: contrast(1.3) brightness(1.0) saturate(1.2) !important;\n  padding: 0.8rem !important;\n  box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;\n  @include smooth-transition(border-color background box-shadow, 0.5s, cubic-bezier(0.25, 0.46, 0.45, 0.94));\n  \n  &:hover {\n    background: rgba(255, 255, 255, 1.0) !important;\n    border-color: var(--global-theme-color) !important;\n    filter: contrast(1.35) brightness(1.05) saturate(1.25) !important;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;\n  }\n}\n\n// Enhanced logo visibility (consolidated)\n.project-image, .project-images-dual .project-image {\n  filter: contrast(1.05) brightness(1.02) saturate(1.02);\n  \n  &:hover {\n    filter: contrast(1.08) brightness(1.04) saturate(1.04);\n  }\n}\n\n// Comprehensive dark mode project image visibility\nhtml[data-theme=\"dark\"], \nbody.dark,\n.dark-theme,\n.dark-mode, \n.theme-dark, \nbody[data-theme=\"dark\"], \n.dark {\n  .project-image, \n  .project-images-dual .project-image {\n    @include project-image-dark-mode;\n  }\n  \n  .card img {\n    @include project-image-dark-mode;\n    padding: 0.5rem !important;\n    filter: contrast(1.3) brightness(1.0) !important;\n    \n    &:hover {\n      filter: contrast(1.35) brightness(1.05) !important;\n    }\n  }\n}\n\n// Media query fallback for dark mode\n@media (prefers-color-scheme: dark) {\n  .project-image, \n  .project-images-dual .project-image {\n    @include project-image-dark-mode;\n  }\n  \n  .card img {\n    @include project-image-dark-mode;\n    padding: 0.5rem !important;\n    filter: contrast(1.3) brightness(1.0) !important;\n    \n    &:hover {\n      filter: contrast(1.35) brightness(1.05) !important;\n    }\n  }\n}\n\n/******************************************************************************\n * About Page Modern Styles\n ******************************************************************************/\n\n.about-intro {\n  margin-bottom: 3rem;\n  \n  p {\n    @include font-size($font-size-h5);\n    line-height: 1.7;\n    text-align: justify;\n    margin-bottom: 2rem;\n    font-weight: 300;\n    color: var(--global-text-color);\n  }\n  \n  @media (max-width: 768px) {\n    p {\n      line-height: 1.6;\n      margin-bottom: 1.5rem;\n    }\n  }\n}\n\n.research-focus {\n  margin-bottom: 3rem;\n  \n  h2.section-header {\n    @include section-header(3);\n    margin-bottom: 1rem;\n    color: var(--global-text-color);\n  }\n  \n  p {\n    @include body-font('large');\n    text-align: justify;\n    margin-bottom: 1.5rem;\n    color: var(--global-text-color);\n  }\n  \n  @media (max-width: 768px) {\n    p {\n      line-height: 1.5;\n    }\n  }\n}\n\n.research-projects {\n  margin-bottom: 3rem;\n  \n  h2.section-header {\n    font-size: 1.8rem;\n    font-weight: 600;\n    margin-bottom: 1rem;\n    color: var(--global-text-color);\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n  \n  .experiment-grid {\n    display: grid;\n    gap: 1.5rem;\n    margin-bottom: 2rem;\n    \n    @media (min-width: 768px) {\n      grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));\n    }\n  }\n  \n  .experiment-item {\n    @include card-style();\n    \n    h3 {\n      color: var(--global-theme-color);\n      @extend %standard-margin;\n      @include header-font(4);\n      \n      a {\n        color: inherit;\n        text-decoration: none;\n        \n        &:hover {\n          text-decoration: underline;\n        }\n      }\n    }\n    \n    p {\n      @include body-font('normal');\n      text-align: justify;\n      color: var(--global-text-color);\n      margin: 0;\n    }\n  }\n  \n  @media (max-width: 768px) {\n    .experiment-item {\n      padding: 1.2rem;\n      \n      p {\n        font-size: $font-size-body-small;\n      }\n    }\n  }\n}\n\n// Ensure section gradients are consistent\n.about-content {\n  .section-header + div[style*=\"gradient\"] {\n    background: linear-gradient(135deg, var(--global-theme-color) 0%, var(--global-bg-color) 100%) !important;\n    height: 3px;\n    width: 100%;\n    margin: 10px 0 30px 0;\n    border-radius: 2px;\n  }\n}\n\n// Dark mode support for about page\n[data-theme=\"dark\"] {\n  .experiment-item {\n    background: var(--global-card-bg-color);\n    border-color: var(--global-divider-color);\n    \n    &:hover {\n      border-color: var(--global-theme-color);\n      box-shadow: 0 4px 12px rgba(255,255,255,0.05);\n    }\n  }\n}\n","/*******************************************************************************\n * Style overrides for distill blog posts.\n ******************************************************************************/\n\nd-byline {\n  border-top-color: $grey-color-light !important;\n}\n\nd-byline h3 {\n  color: var(--global-text-color) !important;\n}\n\nd-byline a, d-article d-byline a {\n  color: var(--global-text-color) !important;\n  &:hover {\n    color: var(--global-hover-color) !important;\n  }\n}\n\nd-article {\n  border-top-color: #e8e8e8 !important;\n  a, p, h1, h2, h3, h4, h5, h6, li, table {\n    color: var(--global-text-color) !important;\n  }\n  a, h1, h2, hr {\n    border-bottom-color: $grey-color-light !important;\n  }\n  a:hover {\n    border-bottom-color: var(--global-hover-color) !important;\n  }\n}\n\nd-appendix {\n  border-top-color: $grey-color-light !important;\n  color: var(--global-distill-app-color) !important;\n  h3, li, span {\n    color: var(--global-distill-app-color) !important;\n  }\n  a, a.footnote-backlink {\n    color: var(--global-distill-app-color) !important;\n    &:hover {\n      color: var(--global-hover-color) !important;\n    }\n  }\n}\n"],"file":"main.css"}