/*
* font-family: 'Cormorant Garamond', serif;
* font-family: 'Quattrocento', serif;
* font-family: 'Rancho', cursive;
* font-family: 'Fredericka the Great', cursive;
* font-family: 'Marcellus', serif;
* font-family: 'El Messiri', sans-serif;
* font-family: 'Gabriela', serif;
* font-family: 'Bellefair', serif;
* font-family: 'Mystery Quest', cursive;
* font-family: 'Junge', serif;
* font-family: 'Esteban', serif;
* font-family: 'Della Respira', serif;
* font-family: 'Jacques Francois', serif;
*/

font-family: 'Quattrocento', garamond;

/* ===================================================================
 * # base style overrides
 *
 * ------------------------------------------------------------------- */

html, body {
    height: 100%;
}

body {
    background: #FFFFFF; 
    font-family: "Quattrocento", garamond;
    font-size: 1rem;
    color: #111133;  /* Navy Blue Text */
    margin: 0;
    line-height: 2rem;
}

/* ------------------------------------------------------------------- 
 * ## links
 * ------------------------------------------------------------------- */
a {
    color: #0087cc;
}

a:hover, a:focus, a:active {
    color: #FFFFFF;
}

a:hover, a:active {
    outline: 0;
}

/* ===================================================================
 * # typography & general theme styles
 * 
 * ------------------------------------------------------------------- */

p {
    padding-bottom: 1rem;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "quattrocento", garamond;
    color: #FFFFFF;
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
    line-height: 1.2;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6  {
    color: #111133;
    /*margin-top: 6rem;
    margin-bottom: 1.8rem;*/
}

h6, .h6 {
    color: #111133;
    margin-top: 2.2rem;
    margin-bottom: .5rem;
}

h5, .h5 {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

h1, .h1 {
    font-size: 3.6rem;
    /*margin-top: 4.2rem;
    margin-bottom: 1.5rem;*/
}

@media screen and (max-width: 600px) {
    h1, .h1 {
        font-size: 2.4rem;
    }
}

h2, .h2 {
    font-size: 3rem;
    /*margin-top: 4.2rem;
    margin-bottom: 1.5rem;*/
}

h3, .h3 {
    font-size: 2.4rem;
    /*margin-top: 4.2rem;
    margin-bottom: 1.5rem;*/
}

h4, .h4 {
    font-size: 2.1rem;
    margin-top: 4.5rem;
    margin-bottom: 1rem;
}

h5, .h5 {
    font-size: 1.6rem;
    /*margin-top: 4.2rem;
    margin-bottom: 1.5rem;*/
}

h6, .h6 {
    font-size: 1.3rem;
    /*margin-top: 4.2rem;
    margin-bottom: 1.5rem;*/
}
h6{ position:relative; }

h6 span{ position:absolute; top:-3rem;}
/* ------------------------------------------------------------------- 
 * ## section header
 * ------------------------------------------------------------------- */
.section-header {
    text-align: center;
    /*position: relative;*/
    padding-top: 3rem;
    padding-left: 25px;
    padding-right: 25px;
}

#resume .section-header h2 {
    margin-bottom: .75rem;
}

.resume-download {
    display: flex;
    align-items: center;
    gap: .5rem;
    text-align: left;
    /* Aligns with the .resume-timeline::before vertical line (6rem from its
       own left edge), minus the 25px .section-header already contributes
       via its own padding-left. */
    margin: 0 0 1.5rem calc(6rem - 25px);
}

.resume-download .pdf-icon {
    display: inline-flex;
    color: #111133;
}

html.dark-mode .resume-download .pdf-icon {
    color: #A8DBDB;
}

.resume-download-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.resume-download-link:hover, .resume-download-link:focus, .resume-download-link:active {
    color: #111133;
    background-color: rgba(17, 17, 51, 0.08);
}

html.dark-mode .resume-download-link:hover,
html.dark-mode .resume-download-link:focus,
html.dark-mode .resume-download-link:active {
    color: #A8DBDB;
    background-color: rgba(168, 219, 219, 0.12);
}

/* ===================================================================
 * # header styles
 *
 * ------------------------------------------------------------------- */
.s-header {
    width: 100%;
    background-color: transparent;
    position: absolute;
    top: 0;
    z-index: 500;
    /*padding-top: 47px;*/
}


/* ------------------------------------------------------------------- 
 * ## main navigation 
 * ------------------------------------------------------------------- */
.main-nav {
    background-color: #111133;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 3rem;
    z-index: 5000;
    line-height: 1rem;

}
.main-nav a {
  color: #FFFFFF;
  background-color: #111133;
  font-family: "quattrocento", sans-serif;
  font-weight: bold;
  display: block;
  padding: 15px 20px;
  margin: 0;
}
.main-nav a:hover, .main-nav a:focus {
  color: #DBFDFD;
  background-color: #111133;
}
.main-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin:0;
    padding:0;
}
.main-nav li {
    float: none;
    text-align: center;
    margin-right: 1%;
    list-style: none;
    font-weight: 400;
    margin:0;
}
.main-nav li a {
    color: #FFFFFF;
}

.nav-toggle-btn {
    display: none;
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 12px 16px;
}

@media screen and (max-width: 600px) {
  .main-nav {
    display: flex;
    justify-content: flex-end;
    min-height: 3rem;
  }

  .nav-toggle-btn {
    display: block;
  }

  .main-nav ul {
    display: none;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #111133;
  }

  .main-nav.nav-open ul {
    display: flex;
  }

  .main-nav li {
    width: 100%;
  }

  .main-nav a {
    padding: 12px 20px;
    font-size: 0.95rem;
    text-align: left;
  }

  .nav-search-item {
    width: 100%;
    padding: 10px 20px;
  }

  #site-search {
    width: 100%;
  }

  .search-results {
    left: 0;
    width: 100%;
    max-width: 100%;
  }
}

.nav-dropdown {
    position: relative;
}

/* Specificity note: base .main-nav ul {display:flex} (1 class + 1 element)
   would otherwise beat a plain .nav-dropdown-menu selector, so every rule
   here is qualified with .main-nav to win. */
.main-nav .nav-dropdown-menu {
    display: none;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background-color: #111133;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 6000;
}

.main-nav .nav-dropdown:hover .nav-dropdown-menu,
.main-nav .nav-dropdown:focus-within .nav-dropdown-menu {
    display: flex;
}

.nav-dropdown-menu li {
    width: 100%;
}

.nav-dropdown-menu a {
    text-align: left;
    white-space: nowrap;
}

@media screen and (max-width: 600px) {
    .main-nav .nav-dropdown-menu {
        display: flex;
        position: static;
        box-shadow: none;
        min-width: 0;
    }

    .nav-dropdown-menu a {
        padding-left: 40px;
        font-size: 0.9rem;
    }
}

.nav-search-item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 12px;
}

#site-search {
    font-family: "quattrocento", garamond;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    color: #FFFFFF;
    padding: 6px 10px;
    font-size: 0.85rem;
    width: 140px;
}

#site-search::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.search-results {
    position: absolute;
    top: 100%;
    left: 12px;
    width: 320px;
    max-width: calc(100vw - 24px);
    background-color: #111133;
    color: #FFFFFF;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 6000;
    max-height: 60vh;
    overflow-y: auto;
}

.search-result-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: inherit;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding: 10px 14px;
    cursor: pointer;
    font-family: "quattrocento", garamond;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover, .search-result-item:focus {
    background-color: rgba(255, 255, 255, 0.08);
}

.search-result-title {
    font-weight: bold;
}

.search-result-section {
    font-size: 0.75rem;
    color: #DBFDFD;
}

.search-result-excerpt {
    font-size: 0.85rem;
    margin-top: 2px;
}

.search-result-empty {
    padding: 10px 14px;
    font-size: 0.85rem;
}

/* ===================================================================
 * # home 
 *
 * ------------------------------------------------------------------- */

.s-home {
    padding-top: 35vh;
    padding-bottom: 40vh;
    background-color: transparent;
    color: #010507;
    position: relative;
    padding-left: 25px;
    padding-right: 25px;
}

.s-home .shadow-overlay {
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .8;
    background: -webkit-linear-gradient(top, transparent 0%, rgba(131, 176, 228, 0.9) 100%);
    z-index: -1;
}

.s-home .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .9;
    background-color: #DBFDFD; /*lighter blue - originally #90F9F9*/ 
    z-index: -1;
}

/* ===================================================================
 * # aboutMe 
 *
 * ------------------------------------------------------------------- */
.s-aboutMe {
    width: 100%;
    height: 100%;
    background-color: transparent;
    position: relative;
    padding-bottom: 6rem;
}

.s-aboutMe .shadow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .8;
    background: -webkit-linear-gradient(top, transparent 0%, rgba(131, 176, 228, 0.9) 100%);
    z-index: -1;
}

.s-aboutMe .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .9;
    background-color: #DBFDFD; /*lighter blue - originally #90F9F9*/ 
    z-index: -1;
}

/* -------------------------------------------------------------------
 * ## aboutMe content
 *
 * Desktop: a 2-column CSS grid. Left column (~65%) is the name header
 * and bio copy; right column (~35%) is a sidebar that stacks the photo
 * card directly above the Havana card (a flex column with a small
 * fixed gap, so the two sit back-to-back regardless of how tall the
 * bio text ends up). `.aboutMe-sidebar` is `display: contents` below
 * the nav breakpoint so its two children rejoin the mobile stacking
 * order as plain siblings, each with an explicit `order` matching the
 * desired mobile sequence (name, photo card, bio, Havana card).
 * ------------------------------------------------------------------- */
.aboutMe-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    padding: 4rem 25px 5rem;
    display: grid;
    grid-template-columns: minmax(0, 65fr) minmax(240px, 35fr);
    grid-template-rows: auto 1fr;
    column-gap: 3rem;
    row-gap: 0;
    grid-template-areas:
        "name  ."
        "main  sidebar";
}

.aboutMe-name {
    grid-area: name;
    text-align: left;
    font-weight: bold;
    margin-top: 0;
}

.aboutMe-main {
    grid-area: main;
    max-width: 70ch;  /* keep line length comfortable even if the column is wider */
}

.aboutMe-main p {
    text-align: left;
}

/* -------------------------------------------------------------------
 * ## aboutMe sidebar (photo card + Havana card)
 * ------------------------------------------------------------------- */
.aboutMe-sidebar {
    grid-area: sidebar;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.aboutMe-photo-card {
    font-family: "quattrocento", sans-serif;
    background: rgba(255, 255, 255, 0.32);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(17, 17, 51, 0.16);
    padding: 1.75rem 1.5rem;
    text-align: center;
}

html.dark-mode .aboutMe-photo-card {
    background: rgba(30, 41, 59, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.aboutMe-headshot {
    display: block;
    width: 130px;
    height: 130px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 20%;
}

.aboutMe-havana {
    font-family: "quattrocento", sans-serif;
    background: rgba(255, 255, 255, 0.32);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(17, 17, 51, 0.16);
    padding: 1.25rem 1.5rem;
    text-align: center;
}

html.dark-mode .aboutMe-havana {
    background: rgba(30, 41, 59, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

.aboutMe-havana-photo {
    display: block;
    width: 110px;
    height: 110px;
    margin: 0 auto .75rem;
    border-radius: 50%;
    object-fit: cover;
}

html.dark-mode .aboutMe-havana-photo {
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.aboutMe-havana-caption {
    display: block;
    color: #4a5a7a;  /* Lighter than body navy, still >4.5:1 on the section's light background */
    font-size: .95rem;
}

html.dark-mode .aboutMe-havana-caption {
    color: #6f9999;  /* Darker than the dark-mode body text (#A8DBDB), still readable on the dark background */
}

.aboutMe-social-icons {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    position: relative;  /* Containing block for the shared hover label below */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .75rem;
}

.aboutMe-social-icons a {
    color: #4a5a7a;  /* Match the Havana photo caption color */
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

html.dark-mode .aboutMe-social-icons a {
    color: #6f9999;
}

.aboutMe-social-icons li {
    padding: 0;
}

.aboutMe-social-icons li a {
    display: block;
    width: 33px;
    height: 33px;
}

.aboutMe-social-icons .social-icon, .aboutMe-social-icons span {
    line-height: 33px;
    -webkit-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.aboutMe-social-icons .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 33px;
    height: 33px;
    line-height: normal;
    border: 2px solid #4a5a7a;  /* Match the Havana photo caption color */
    border-radius: 50%;
    box-sizing: border-box;
    color: #4a5a7a;
}

html.dark-mode .aboutMe-social-icons .social-icon {
    border-color: #6f9999;
    color: #6f9999;
}

.aboutMe-social-icons li:hover .social-icon,
.aboutMe-social-icons li a:focus .social-icon {
    border-color: #006D77;
    color: #006D77;
}

html.dark-mode .aboutMe-social-icons li:hover .social-icon,
html.dark-mode .aboutMe-social-icons li a:focus .social-icon {
    border-color: #55bbcc;
    color: #55bbcc;
}

/* Positioned against .aboutMe-social-icons (the row), not the individual
   <li>, so the label always appears centered below the whole row instead
   of next to whichever icon is hovered. */
.aboutMe-social-icons span {
    position: absolute;
    left: 50%;
    top: 100%;
    margin-top: .6rem;
    color: #4a5a7a;  /* Dark enough to read on the section's light background */
    font-size: 1.1rem;
    font-family: "quattrocento", sans-serif;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate(-50%, 0) scale(0);
    -ms-transform: translate(-50%, 0) scale(0);
    transform: translate(-50%, 0) scale(0);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
}

html.dark-mode .aboutMe-social-icons span {
    color: #6f9999;
}

.aboutMe-social-icons li:hover span {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(-50%, 0) scale(1);
    -ms-transform: translate(-50%, 0) scale(1);
    transform: translate(-50%, 0) scale(1);
}

/* Below the nav breakpoint, collapse the grid into a single centered
   column. Source order already matches the desired mobile stacking
   order (name, photo card, bio, Havana card), so no reordering is
   needed here. */
@media screen and (max-width: 600px) {
    .aboutMe-content {
        display: flex;
        flex-direction: column;
        column-gap: 0;
        padding: 2.5rem 25px 2rem;
    }

    .aboutMe-name {
        order: 1;
        text-align: center;
    }

    /* Dissolve the sidebar wrapper so the photo card and Havana card
       rejoin aboutMe-content as direct flex children -- each can then
       take its own `order` to land in the desired mobile sequence
       (name, photo card, bio, Havana card) instead of staying stacked
       back-to-back the way they are in the desktop sidebar. */
    .aboutMe-sidebar {
        display: contents;
    }

    .aboutMe-photo-card {
        order: 2;
        max-width: 280px;
        margin: 1.5rem auto;
    }

    .aboutMe-main {
        order: 3;
        max-width: none;
        margin: 0 auto;
        padding-bottom: 1rem;
    }

    .aboutMe-main p {
        text-align: left;
    }

    .aboutMe-havana {
        order: 4;
        max-width: 280px;
        margin: 1.5rem auto 0;
    }

    .aboutMe-social-icons {
        flex-wrap: wrap;
    }
}

/* ===================================================================
 * # resume
 *
 * ------------------------------------------------------------------- */
.s-resume {
    padding-bottom: 6rem;
    background-color: transparent;
    color: #010507;
    position: relative;
    padding-left: 25px;
    padding-right: 25px;
}

.s-resume .shadow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .8;
    background: -webkit-linear-gradient(top, transparent 0%, rgba(131, 176, 228, 0.9) 100%);
    z-index: -1;
}

.s-resume .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .9;
    background-color: #DBFDFD; /*lighter blue - originally #90F9F9*/
    z-index: -1;
}

.resume-toggle-btn {
    background-color: #0087cc;
    border: none;
    border-radius: 4px;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 1rem;
    padding: 10px 20px;
    margin: 1.5rem 0;
    cursor: pointer;
}

.resume-toggle-btn:hover, .resume-toggle-btn:focus {
    background-color: #010507;
}

html.dark-mode .resume-toggle-btn {
    background-color: #55bbcc;
    color: #121212;
}

html.dark-mode .resume-toggle-btn:hover, html.dark-mode .resume-toggle-btn:focus {
    background-color: #A8DBDB;
}

.resume-timeline {
    margin-bottom: 2rem;
}

.resume-entry {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 1.5rem;
    align-items: start;
    border: 1px solid rgba(1, 5, 7, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(17, 17, 51, 0.08);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

html.dark-mode .resume-entry {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(30, 41, 59, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.resume-date {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    text-align: right;
    font-weight: 600;
    padding-top: .2rem;
    white-space: normal;
    color: rgba(1, 5, 7, 0.6);
}

html.dark-mode .resume-date {
    color: rgba(255, 255, 255, 0.55);
}

.resume-content {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.resume-content h6 {
    margin-top: 0;
}

.resume-title-row {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.resume-title-row h6 {
    margin-top: 0;
}

.resume-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
    background: #fff;
    border: 1px solid rgba(1, 5, 7, 0.1);
    border-radius: 8px;
    padding: 4px;
}

.resume-location {
    margin: -.5rem 0 .5rem;
    font-style: italic;
}

@media screen and (max-width: 600px) {
    .resume-entry {
        grid-template-columns: 1fr;
        row-gap: .25rem;
        padding: 1rem 1.1rem;
    }

    .resume-date {
        grid-column: 1;
        grid-row: 2;
        text-align: left;
    }

    .resume-content {
        grid-column: 1;
        grid-row: 1;
    }

    .resume-download {
        margin-left: 0;
    }
}

.project-tiles {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 2rem auto;
}

.project-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 140px;
    color: #111133;
    text-decoration: none;
    transition: transform .2s ease;
}

.project-tile:hover, .project-tile:focus {
    transform: translateY(-4px);
    color: #111133;
}

.project-tile img {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.project-tile span {
    margin-top: .6rem;
    text-align: center;
    font-size: .9rem;
    line-height: 1.3rem;
}

html.dark-mode .project-tile {
    color: #A8DBDB;
}

html.dark-mode .project-tile:hover, html.dark-mode .project-tile:focus {
    color: #A8DBDB;
}

@media screen and (max-width: 600px) {
    .project-tiles {
        justify-content: center;
    }
}

/* Inline write-up photos/videos (Seesaw graphics, needlefelting, Happiness
   Club pics, etc.) are legacy <img height="200px"> tags with no width cap,
   so a wide-aspect image renders wider than a phone's viewport. Cap them to
   the column width and let height scale to match instead of overflowing. */
img[height], video[height] {
    display: block;
    max-width: min(100%, 400px);
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    margin: 1rem auto;
}

/* Entries with multiple photos/videos of the same thing (e.g. the
   needlefelted fox, the Pet Costume Contest lineup) wrap them in
   .image-row to lay side by side instead of stacking full-width. */
.image-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 1rem auto;
}

.image-row img[height], .image-row video[height] {
    max-width: 200px;
    margin: 0;
}

/* A captioned inline photo: the figure inherits img[height]'s sizing
   since the <img> is still the height-tagged element, and the caption
   sits centered underneath it. */
.entry-photo {
    margin: 1rem auto;
    text-align: center;
}

.entry-photo img[height] {
    margin: 0 auto;
}

.entry-photo figcaption {
    margin-top: .4rem;
    font-size: .85rem;
    font-style: italic;
    color: #4a5a7a;
}

html.dark-mode .entry-photo figcaption {
    color: #6f9999;
}

/* Long enumerated lists (e.g. the Year of Dance style rankings) read
   better as a compact multi-column block than one long single column. */
.multi-col-list {
    column-width: 220px;
    column-gap: 2rem;
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

.multi-col-list li {
    break-inside: avoid;
}

#tag-filter-section {
    background-color: #DBFDFD; /* matches .s-resume/.s-projects section overlay color */
    padding-top: 1.5rem;
}

#tag-filter-hint {
    max-width: 40rem;
    margin: 0 auto;
    padding: 0 25px 1rem;
    font-size: .9rem;
    text-align: center;
    color: #4a5a7a;
}

#tag-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
    padding: 0 25px 2rem;
}

.tag-chip {
    font-family: "quattrocento", garamond;
    background-color: transparent;
    border: 1px solid #111133;
    border-radius: 999px;
    color: #111133;
    padding: 4px 12px;
    font-size: 0.85rem;
    cursor: pointer;
}

.tag-chip.is-active {
    background-color: #111133;
    color: #FFFFFF;
}

/* Per-entry "Skills and Tools" line: same pill look as the filter bar's
   .tag-chip, but static (not a filter control), so it's not a <button>
   and gets a default cursor instead of a pointer. */
.skills-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.skills-tags b {
    margin-right: .2rem;
}

.skill-tag {
    display: inline-block;
    cursor: default;
}

.project-entry {
    border: 1px solid rgba(1, 5, 7, 0.12);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 16px rgba(17, 17, 51, 0.08);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

html.dark-mode .project-entry {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(30, 41, 59, 0.5);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.project-entry h6 {
    margin-top: 0;
}

.project-title-row {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.project-title-row h6 {
    margin-top: 0;
}

.project-logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
    background: #fff;
    border: 1px solid rgba(1, 5, 7, 0.1);
    border-radius: 8px;
    padding: 4px;
}

.project-entry img,
.project-entry video {
    max-width: 100%;
}

@media screen and (max-width: 600px) {
    .project-entry {
        padding: 1rem 1.1rem;
    }
}

.project-entry.is-filtered-out {
    display: none;
}


/* ===================================================================
 * # extracurriculars
 *
 * ------------------------------------------------------------------- */

.s-extracurriculars {
    width: 100%;
    height: 100%;
    background-color: transparent;
    position: relative;
    padding-bottom: 3rem;
}

.s-extracurriculars .shadow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .8;
    background: -webkit-linear-gradient(top, transparent 0%, rgba(131, 176, 228, 0.9) 100%);  /*darker blue - originally (10, 40, 120, .9)*/
    z-index: -1;
}

.s-extracurriculars .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .9;
    background-color: #DBFDFD;
    z-index: -1;
}

/* To make an image appear when hovering over a link. Use <a href="javascript:;">Happiness Club.</a> to creat empty link in HTML.
.s-extracurriculars a:hover:after {
    content: url('NYCSilhouette.svg');
    display: block;
    position: absolute;
    left: 100px;
    bottom: 1px;
}

.extracurriculars-content {
    width: 100%;
    height: 100%;
    vertical-align: middle;
    padding-bottom: 4rem;
    position: relative;
} */

.extracurriculars-content__main {
    position: relative;
    padding-left: 25px;
    padding-right: 25px;
}

/* ===================================================================
 * # projects
 *
 * ------------------------------------------------------------------- */
.s-projects {
    padding-bottom: 6rem;
    background-color: transparent;
    color: #010507;
    position: relative;
    padding-left: 25px;
    padding-right: 25px;
}

.s-projects .shadow-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .8;
    background: -webkit-linear-gradient(top, transparent 0%, rgba(131, 176, 228, 0.9) 100%);
    z-index: -1;
}

.s-projects .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .9;
    background-color: #DBFDFD; /*lighter blue - originally #90F9F9*/
    z-index: -1;
}

/* ===================================================================
 * # timeline
 *
 * ------------------------------------------------------------------- */
.timeline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin-bottom: 1rem;
    font-size: .85rem;
}

.timeline-legend-item {
    display: inline-flex;
    align-items: center;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    opacity: 1;
    transition: opacity .12s ease;
}

.timeline-legend-item:hover, .timeline-legend-item:focus {
    opacity: .75;
}

.timeline-legend-item.is-off {
    opacity: .4;
}

.timeline-legend-item.is-off .timeline-legend-dot {
    background-color: transparent !important;
    border: 1.5px solid currentColor;
}

.timeline-marker.is-hidden, .timeline-bar.is-hidden {
    display: none;
}

.timeline-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: .4rem;
}

.timeline-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid rgba(1, 5, 7, 0.15);
    border-bottom: 1px solid rgba(1, 5, 7, 0.15);
    padding: 10px 0;
}

.timeline-track {
    position: relative;
}

.timeline-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: currentColor;
    opacity: .3;
}

.timeline-tick {
    position: absolute;
}

.timeline-tick::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 10px;
    background-color: currentColor;
    opacity: .4;
}

.timeline-tick-label {
    position: absolute;
    top: -20px;
    left: 0;
    transform: translateX(-50%);
    font-size: .75rem;
    opacity: .6;
    white-space: nowrap;
}

.timeline-marker {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #FFFFFF;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transform: translate(-50%, -50%);
}

.timeline-marker:focus {
    outline: 2px solid #0087cc;
    outline-offset: 2px;
}

.timeline-marker.is-active {
    box-shadow: 0 0 0 4px rgba(0, 135, 204, .3);
}

/* Tooltip: a fixed, theme-independent color per category (deepened
   versions of the marker hues) paired with white text, so it stays
   readable regardless of whether the page is in light or dark mode. */
.timeline-marker::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translate(-50%, -6px);
    white-space: nowrap;
    color: #FFFFFF;
    font-size: .78rem;
    font-weight: bold;
    line-height: 1.2;
    padding: .35rem .6rem;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .12s ease, transform .12s ease;
    z-index: 20;
}

.timeline-marker:hover::after, .timeline-marker:focus::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -10px);
}

.timeline-bar {
    position: absolute;
    height: 8px;
    border-radius: 4px;
    opacity: .85;
}

.timeline-detail {
    min-height: 6rem;
    padding-top: 1.2rem;
    margin-top: .5rem;
    border-top: 1px solid rgba(1, 5, 7, 0.15);
}

.timeline-detail-title {
    margin: 0 0 .25rem;
}

.timeline-detail-date {
    opacity: .7;
    font-size: .85rem;
    margin: 0 0 .5rem;
}

.timeline-detail-desc {
    margin: 0 0 .5rem;
}

.timeline-detail-hint {
    opacity: .6;
}

.timeline-marker.timeline-cat-career, .timeline-bar.timeline-cat-career,
.timeline-legend-item.timeline-cat-career .timeline-legend-dot {
    background-color: #C7234F;
}

.timeline-marker.timeline-cat-education, .timeline-bar.timeline-cat-education,
.timeline-legend-item.timeline-cat-education .timeline-legend-dot {
    background-color: #0087CC;
}

.timeline-marker.timeline-cat-performing, .timeline-bar.timeline-cat-performing,
.timeline-legend-item.timeline-cat-performing .timeline-legend-dot {
    background-color: #7B5EA7;
}

.timeline-marker.timeline-cat-projects, .timeline-bar.timeline-cat-projects,
.timeline-legend-item.timeline-cat-projects .timeline-legend-dot {
    background-color: #4C9A6A;
}

.timeline-marker.timeline-cat-clubs, .timeline-bar.timeline-cat-clubs,
.timeline-legend-item.timeline-cat-clubs .timeline-legend-dot {
    background-color: #DDB940;
}

.timeline-marker.timeline-cat-other, .timeline-bar.timeline-cat-other,
.timeline-legend-item.timeline-cat-other .timeline-legend-dot {
    background-color: #8D99AE;
}

.timeline-marker.timeline-cat-shows, .timeline-bar.timeline-cat-shows,
.timeline-legend-item.timeline-cat-shows .timeline-legend-dot {
    background-color: #DB6300;
}

/* Tooltip backgrounds are intentionally not overridden in dark mode --
   deepened so white tooltip text stays readable (WCAG AA) regardless
   of theme, rather than trying to retune per theme. */
.timeline-marker.timeline-cat-career::after {
    background-color: #9F1C3F;
}

.timeline-marker.timeline-cat-education::after {
    background-color: #006699;
}

.timeline-marker.timeline-cat-performing::after {
    background-color: #6B4E96;
}

.timeline-marker.timeline-cat-projects::after {
    background-color: #3D7F55;
}

.timeline-marker.timeline-cat-clubs::after {
    background-color: #96661E;
}

.timeline-marker.timeline-cat-other::after {
    background-color: #5A6478;
}

.timeline-marker.timeline-cat-shows::after {
    background-color: #A44A00;
}

@media screen and (max-width: 600px) {
    .timeline-legend {
        font-size: .75rem;
    }
}

/* ===================================================================
 * # theme toggle button
 *
 * ------------------------------------------------------------------- */
.theme-toggle-btn {
    background: none;
    border: none;
    color: #FFFFFF;
    font-family: inherit;
    font-size: 1.1rem;
    line-height: 1rem;
    padding: 15px 20px;
    margin: 0;
    cursor: pointer;
}

.theme-toggle-btn:hover, .theme-toggle-btn:focus {
    color: #DBFDFD;
}

@media screen and (max-width: 600px) {
  .theme-toggle-btn {
    padding: 10px 12px;
    font-size: 0.95rem;
  }
}

/* ===================================================================
 * # dark mode
 *
 * Applied via a .dark-mode class on <html>, set synchronously by
 * theme.js (in <head>, before the body paints) based on a saved
 * preference or, absent one, the system's prefers-color-scheme.
 * ------------------------------------------------------------------- */
html.dark-mode body {
    background: #121212;
    color: #A8DBDB;
}

html.dark-mode a {
    color: #DBFDFD;
}

html.dark-mode a:hover, html.dark-mode a:focus, html.dark-mode a:active {
    color: #FFFFFF;
}

html.dark-mode h1, html.dark-mode .h1,
html.dark-mode h2, html.dark-mode .h2,
html.dark-mode h3, html.dark-mode .h3,
html.dark-mode h4, html.dark-mode .h4,
html.dark-mode h5, html.dark-mode .h5,
html.dark-mode h6, html.dark-mode .h6 {
    color: #55bbcc;
}

html.dark-mode .main-nav, html.dark-mode .main-nav a,
html.dark-mode .main-nav a:hover, html.dark-mode .main-nav a:focus,
html.dark-mode .main-nav ul {
    background-color: #000000;
}

html.dark-mode .nav-toggle-btn {
    color: #FFFFFF;
}

html.dark-mode .main-nav a, html.dark-mode .main-nav li a {
    color: #A8DBDB;
}

html.dark-mode .main-nav a:hover, html.dark-mode .main-nav a:focus {
    color: #FFFFFF;
}

html.dark-mode .nav-dropdown-menu {
    background-color: #000000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

html.dark-mode .theme-toggle-btn {
    color: #A8DBDB;
}

html.dark-mode .theme-toggle-btn:hover, html.dark-mode .theme-toggle-btn:focus {
    color: #FFFFFF;
}

html.dark-mode #site-search {
    border-color: rgba(168, 219, 219, 0.5);
    color: #A8DBDB;
}

html.dark-mode #site-search::placeholder {
    color: rgba(168, 219, 219, 0.6);
}

html.dark-mode .search-results {
    background-color: #000000;
    color: #A8DBDB;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

html.dark-mode .search-result-item {
    border-bottom-color: rgba(168, 219, 219, 0.15);
}

html.dark-mode .search-result-item:hover, html.dark-mode .search-result-item:focus {
    background-color: rgba(168, 219, 219, 0.08);
}

html.dark-mode .search-result-section {
    color: #6f9999;
}

html.dark-mode .tag-chip {
    border-color: #A8DBDB;
    color: #A8DBDB;
}

html.dark-mode .tag-chip.is-active {
    background-color: #A8DBDB;
    color: #000000;
}

html.dark-mode .s-home, html.dark-mode .s-resume, html.dark-mode .s-projects {
    color: #A8DBDB;
}

html.dark-mode .s-home .shadow-overlay,
html.dark-mode .s-aboutMe .shadow-overlay,
html.dark-mode .s-resume .shadow-overlay,
html.dark-mode .s-extracurriculars .shadow-overlay,
html.dark-mode .s-projects .shadow-overlay {
    background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 15, 1) 100%);
}

html.dark-mode .s-home .overlay,
html.dark-mode .s-aboutMe .overlay,
html.dark-mode .s-resume .overlay,
html.dark-mode .s-extracurriculars .overlay,
html.dark-mode .s-projects .overlay {
    background-color: #151515;
}

html.dark-mode #tag-filter-section {
    background-color: #151515;
}

html.dark-mode #tag-filter-hint {
    color: #6f9999;
}

html.dark-mode .timeline-scroll,
html.dark-mode .timeline-detail {
    border-color: rgba(168, 219, 219, 0.25);
}

html.dark-mode .timeline-marker {
    border-color: #121212;
}

html.dark-mode .timeline-marker.timeline-cat-career, html.dark-mode .timeline-bar.timeline-cat-career,
html.dark-mode .timeline-legend-item.timeline-cat-career .timeline-legend-dot {
    background-color: #F7648B;
}

html.dark-mode .timeline-marker.timeline-cat-education, html.dark-mode .timeline-bar.timeline-cat-education,
html.dark-mode .timeline-legend-item.timeline-cat-education .timeline-legend-dot {
    background-color: #7CC6FF;
}

html.dark-mode .timeline-marker.timeline-cat-performing, html.dark-mode .timeline-bar.timeline-cat-performing,
html.dark-mode .timeline-legend-item.timeline-cat-performing .timeline-legend-dot {
    background-color: #C9A6E0;
}

html.dark-mode .timeline-marker.timeline-cat-projects, html.dark-mode .timeline-bar.timeline-cat-projects,
html.dark-mode .timeline-legend-item.timeline-cat-projects .timeline-legend-dot {
    background-color: #7FD99A;
}

html.dark-mode .timeline-marker.timeline-cat-clubs, html.dark-mode .timeline-bar.timeline-cat-clubs,
html.dark-mode .timeline-legend-item.timeline-cat-clubs .timeline-legend-dot {
    background-color: #EDD482;
}

html.dark-mode .timeline-marker.timeline-cat-other, html.dark-mode .timeline-bar.timeline-cat-other,
html.dark-mode .timeline-legend-item.timeline-cat-other .timeline-legend-dot {
    background-color: #B8C4D9;
}

html.dark-mode .timeline-marker.timeline-cat-shows, html.dark-mode .timeline-bar.timeline-cat-shows,
html.dark-mode .timeline-legend-item.timeline-cat-shows .timeline-legend-dot {
    background-color: #FF8929;
}

/*# sourceMappingURL=main.css.map */