/* Document body styles */
body.light-theme {
    background-color: #ffffff;
    color: #333333;
    transition: 0.5s;
}
body.dark-theme {
    background-color: #333333;
    color: #ffffff;
    transition: 0.5s;
}


/* Hyperlink, highlight, and text styles */
a {
    color: #bd5d38;
    text-decoration: none;
    background-color: transparent;
}
a:hover {
    color: #824027;
    text-decoration: underline;
}
hightlight {
    color: #bd5d38;
    text-decoration: none;
    background-color: transparent;
}
.text-primary {
    color: #4c5157 !important;
    font-size: 29px;
}


/* Styles for user selection */
::selection {
    background-color: #ffb699;
    transition: 0.5s;
}
.light-theme ::selection {
    background-color: #ffb699;
}
.dark-theme ::selection {
    background-color: #545454;
}


/* Top navigation bar */
.topnav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2rem;
    z-index: 999;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: background-color 0.5s;
}
.light-theme .topnav {
    background-color: #f5f5f5;
    color: #333;
}
.dark-theme .topnav {
    background-color: #222222;
    color: #fff;
}


/* Site title / brand in topnav */
.nav-brand {
    font-weight: bold;
    font-size: 1.1rem;
    color: #bd5d38;
    cursor: pointer;
    white-space: nowrap;
}
.nav-brand:hover {
    color: #824027;
}


/* Nav links container */
.nav-links {
    display: flex;
    gap: 1.75rem;
    align-items: center;
}
.nav-links a {
    font-weight: bold;
    font-size: 0.95rem;
    color: #bd5d38;
    text-decoration: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}
.nav-links a:hover {
    color: #824027;
    text-decoration: none;
    border-bottom-color: #824027;
}
.nav-links a.active {
    border-bottom-color: #bd5d38;
    color: #bd5d38;
}


/* Hamburger — hidden until the bar gets cramped on narrow screens */
.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #bd5d38;
    font-size: 1.9rem;
    line-height: 1;
    padding: 0 0.2rem;
    cursor: pointer;
}
.nav-toggle:hover {
    color: #824027;
}

@media (max-width: 768px) {
    .topnav {
        padding: 0 1rem;
    }
    .nav-toggle {
        display: block;
    }
    .nav-links {
        display: none;
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0.3rem 0;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    }
    .nav-links.open {
        display: flex;
    }
    .light-theme .nav-links {
        background-color: #f5f5f5;
    }
    .dark-theme .nav-links {
        background-color: #222222;
    }
    /* Underlines read as tabs; in a stacked menu use a row highlight instead */
    .nav-links a {
        padding: 0.75rem 1.25rem;
        border-bottom: none;
        font-size: 1rem;
    }
    .nav-links a:hover {
        border-bottom-color: transparent;
        background-color: rgba(189, 93, 56, 0.08);
        text-decoration: none;
    }
    .nav-links a.active {
        border-bottom-color: transparent;
        background-color: rgba(189, 93, 56, 0.13);
    }
}


/* Code-style text */
code {
    font-family: "Consolas";
    color: #333;
    background-color: #f1f1f1;
    padding: 2px 4px 2px 4px;
    font-size: 83%;
    border-radius: 5px;
    transition: 0.5s;
}
.light-theme code {
    color: #fff;
    background-color: #909090;
}
.dark-theme code {
    color: #333;
    background-color: #f1f1f1;
}

/* Code container */
.codebox {
    font-family: "Consolas";
    color: #333;
    border-left: 4px solid #4a5568;
    padding: 0.25rem 0 0.25rem 0.75rem;
    opacity: 0.85;
    font-size: 89%;
    transition: 0.5s;
}
.light-theme .codebox {
    color: #333;
    background-color: #f5f5f5;
}
.dark-theme .codebox {
    color: #fff;
    background-color: #2d2d2d;
}


/* Profile picture ring */
.ring-container {
    display: flex;
    align-items: center;
    justify-content: center;
}
.ring {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-sizing: border-box;
    position: relative;
}
.hollow-ring {
    width: 192px;
    height: 192px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.profile-image {
    width: 192px;
    height: 192px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 5px solid #ffffff;
    z-index: 2;
    transition: 0.5s;
}
.light-theme .profile-image {
    border: 5px solid #ffffff;
}
.dark-theme .profile-image {
    border: 5px solid #333333;
}


/* Emoji indicator on profile photo */
/* The badge grows into a pill when its label is revealed, and whichever edge is
   anchored decides which way it grows. On desktop there is room to the right, so
   anchor the left edge and let it open outwards. On a phone the ring is centred
   and the same behaviour runs off the screen, so the anchor flips below. */
.emoji-indicator {
    font-size: medium;
    width: 43px;
    height: 43px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #efefef;
    position: absolute;
    top: 141px;
    left: 135px;
    right: auto;
    max-width: calc(100vw - 2rem);
    z-index: 1000;
}

/* Phones: columns stack and the ring centres, leaving only ~150px to the right
   of the badge — not enough for the label. Anchor the right edge instead so the
   pill opens leftwards over the photo. right: 14px == 192 ring - 135 - 43 badge,
   so the resting position is identical either way. */
@media (max-width: 575.98px) {
    .emoji-indicator {
        left: auto;
        right: 14px;
    }
}
.light-theme .emoji-indicator {
    background-color: #efefef;
}
.dark-theme .emoji-indicator {
    background-color: #787878;
}
.emoji-indicator .hover-text {
    display: none;
    white-space: nowrap;
    margin-left: 2px;
}
.emoji-indicator:hover .hover-text {
    display: inline;
}
.emoji-indicator:hover {
    border-radius: 21.5px;
    width: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px 0 12px;
}


/* Social icons */
.social-icons .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 3.70rem;
    width: 3.70rem;
    color: #495057;
    border-radius: 100%;
    font-size: 1.5rem;
    margin-right: 0.25rem;
    padding-top: 4px;
    transition: transform 0.3s;
}
.social-icons .social-icon:hover {
    transform: scale(1.30);
}
.social-icons .social-icon:last-child {
    margin-right: 0;
}
.social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
}


/* More/Less toggle for abstracts */
.collapse.in {
    display: inline !important;
}


/* Research filter buttons */
#filters-project .filter-button {
    padding: 4px 7px;
    border: 1px solid #333333;
    border-radius: 10px;
    background-color: transparent;
    color: #333333;
    cursor: pointer;
    transition: background-color 0.5s, box-shadow 0.5s;
}
#filters-project .filter-button:hover {
    background-color: rgba(194, 194, 194, 0.45);
}
#filters-project .filter-button.active {
    background-color: rgba(194, 194, 194, 0.45);
}
.light-theme #filters-project .filter-button {
    border: 1px solid #333333;
    color: #333333;
}
.dark-theme #filters-project .filter-button {
    border: 1px solid #ffffff;
    color: #ffffff;
}


/* Research pager buttons */
.isotope-pager-project {
    display: flex;
    list-style-type: none;
    align-items: center;
    justify-content: center;
}
.isotope-pager-project .pager {
    display: block;
    padding: 4px 7px;
    background-color: transparent;
    border: 1px solid #333333;
    margin: 0 5px;
    border-radius: 7px;
    transition: 0.5s;
}
.isotope-pager-project .pager:hover {
    background-color: rgba(194, 194, 194, 0.45);
    cursor: pointer;
}
.isotope-pager-project .pager.active {
    background-color: rgba(194, 194, 194, 0.45);
}
.light-theme .isotope-pager-project .pager {
    border: 1px solid #333333;
    color: #333333;
}
.dark-theme .isotope-pager-project .pager {
    border: 1px solid #ffffff;
    color: #ffffff;
}
.isotope-pager-project .pager:disabled {
    background-color: #cccccc;
    color: #666666;
    cursor: default;
    opacity: 0.5;
    border: 1px solid #aaaaaa;
}


/* Project list — publications are separated by a hairline rule. Neutral grey
   keeps the separation without competing with the accent-coloured links inside
   each entry. A mid-grey at low alpha works on both themes unchanged: it darkens
   slightly against white and lightens slightly against #333, so no override is
   needed. Same treatment as the travel/writing entry cards, a touch stronger
   because publication entries are taller. */
#projects {
    margin: 0px;
}
.project {
    margin: 0;
    padding: 1.5rem 0;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    border-radius: 0;
}
.project:first-child {
    padding-top: 0.5rem;
}
.project:last-child {
    border-bottom: none;
    padding-bottom: 0.5rem;
}


/* Updates text log */
.updates-log {
    display: flex;
    flex-direction: column;
    max-width: 700px;
}
.log-entry {
    display: flex;
    gap: 1.25rem;
    align-items: baseline;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
    font-size: 0.93rem;
    line-height: 1.5;
}
.log-date {
    flex-shrink: 0;
    min-width: 110px;
    font-size: 0.82rem;
    color: #888;
    font-family: "Fira Code", monospace;
}
.log-desc {
    flex: 1;
}
.updates-more {
    align-self: flex-start;
    margin-top: 0.6rem;
    padding: 2px 10px;
    border: 1px solid rgba(128, 128, 128, 0.45);
    border-radius: 10px;
    background-color: transparent;
    color: #888;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.updates-more:hover {
    border-color: #bd5d38;
    color: #bd5d38;
}


/* Under-construction notice.
   The amber fill needs a different alpha per theme: at 0.12 it reads as a warm
   cream on white, but composites to rgb(72,65,55) on the #333 dark background —
   indistinguishable from the page. Dark mode gets a stronger tint to match. */
.construction {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 1.25rem 0;
    padding: 0.6rem 0.85rem;
    border-left: 3px solid #e0a458;
    border-radius: 4px;
    background-color: rgba(224, 164, 88, 0.14);
    font-size: 0.88rem;
    line-height: 1.5;
    transition: background-color 0.5s;
}
.light-theme .construction {
    background-color: rgba(224, 164, 88, 0.16);
}
.dark-theme .construction {
    background-color: rgba(224, 164, 88, 0.22);
    border-left-color: #eab765;
}
.construction-icon {
    flex-shrink: 0;
}


/* Subpage layout */
.page-section {
    padding-top: 1rem;
}
.page-section-title {
    margin-bottom: 0.5rem;
}
.page-intro {
    color: #888;
    font-size: 0.95rem;
    margin-bottom: 0;
}


/* Entry cards (travel / writing / photography) */
.entry-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.entry-card {
    padding: 1rem 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}
.entry-card:last-child {
    border-bottom: none;
}
.entry-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}
.entry-date {
    font-size: 0.82rem;
    color: #888;
    font-family: "Fira Code", monospace;
}
.entry-location {
    font-size: 0.82rem;
    color: #888;
}
.entry-tag {
    font-size: 0.75rem;
    padding: 1px 7px;
    border-radius: 10px;
    border: 1px solid rgba(128, 128, 128, 0.4);
    color: #888;
}
.entry-title {
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0 0 0.3rem 0;
    color: inherit;
}
.entry-card a .entry-title:hover,
.entry-card a:hover .entry-title {
    color: #bd5d38;
    text-decoration: none;
}
.entry-desc {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}
.dark-theme .entry-desc {
    color: #aaa;
}
.dark-theme .log-date,
.dark-theme .entry-date,
.dark-theme .entry-location,
.dark-theme .entry-tag {
    color: #aaa;
}


/* Back-to-top button */
#back-to-top-button {
    display: inline-block;
    background-color: #9faba6;
    width: 55px;
    height: 55px;
    text-align: center;
    border-radius: 7px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}
#back-to-top-button::after {
    content: "\f077";
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    font-size: 2em;
    line-height: 50px;
    color: #fff;
}
#back-to-top-button:hover {
    cursor: pointer;
    background-color: #767f7b;
}
#back-to-top-button:active {
    background-color: #9faba6;
}
#back-to-top-button.show {
    opacity: 0.70;
    visibility: visible;
}


/* Toggle theme button */
.toggle-theme-button {
    width: 55px;
    height: 55px;
    border-radius: 7px;
    cursor: pointer;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    transition: background-color 0.5s ease, color 0.5s ease;
}
.light-theme .toggle-theme-button {
    background-color: #919191;
    color: #ffffff;
}
.dark-theme .toggle-theme-button {
    background-color: #ccc;
    color: #333333;
}


/* Progress bar */
.progress-bar-container {
    width: 100%;
    height: 1px;
    background: #f1f1f1;
    position: fixed;
    top: 0;
    z-index: 1;
    transition: 0.5s;
}
.progress-bar {
    height: 1px;
    background: #bd5d38;
    width: 0%;
}
.light-theme .progress-bar-container {
    background: #f1f1f1;
}
.dark-theme .progress-bar-container {
    background: #888;
}


/* Custom scrollbar */
::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background-color: #888;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}
::-webkit-scrollbar {
    width: 10px;
}


/* Photo albums (photography page + trip galleries) */
.album {
    padding: 1.5rem 0 2rem 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}
.album:last-child {
    border-bottom: none;
}
.album-cover {
    display: block;
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 0.9rem;
    cursor: zoom-in;
}
.album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.6rem;
    margin-top: 0.9rem;
}
.album-item {
    margin: 0;
}
.album-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    cursor: zoom-in;
    transition: transform 0.25s, filter 0.25s;
}
.album-thumb:hover {
    transform: scale(1.02);
    filter: brightness(1.06);
}
.album-item figcaption {
    font-size: 0.75rem;
    color: #888;
    margin-top: 0.3rem;
    line-height: 1.35;
}
.dark-theme .album-item figcaption {
    color: #aaa;
}


/* Lightbox */
#lightbox {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.93);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
#lightbox.open {
    display: flex;
}
#lightbox img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: 4px;
}
#lightbox-caption {
    position: absolute;
    bottom: 4vh;
    left: 0;
    right: 0;
    text-align: center;
    color: #ddd;
    font-size: 0.85rem;
    padding: 0 2rem;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next {
    position: absolute;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 2.2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    padding: 0.5rem 1rem;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover {
    opacity: 1;
}
.lightbox-close {
    top: 1rem;
    right: 1.25rem;
    font-size: 2.6rem;
}
.lightbox-prev {
    left: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}
.lightbox-next {
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
}


/* Travel map */
#travel-map {
    height: 460px;
    width: 100%;
    border-radius: 8px;
    margin: 1.25rem 0 0.5rem 0;
    z-index: 0;
}
.map-hint {
    font-size: 0.78rem;
    color: #888;
    margin-bottom: 1.5rem;
}
.trip-popup {
    width: 210px;
}
.trip-popup img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 0.45rem;
}
.trip-popup-meta {
    font-size: 0.72rem;
    color: #888;
    font-family: "Fira Code", monospace;
}
.trip-popup-title {
    display: block;
    font-size: 0.98rem;
    font-weight: 600;
    margin: 0.15rem 0;
}
.trip-popup-summary {
    font-size: 0.8rem;
    color: #555;
    margin: 0.25rem 0 0.4rem 0;
    line-height: 1.4;
}
.trip-popup-link {
    font-size: 0.8rem;
    font-weight: 600;
}
.leaflet-popup-content {
    margin: 0.7rem 0.8rem;
}


/* Trip post page */
.trip-back {
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
}
.trip-body {
    line-height: 1.7;
}
.trip-body img {
    max-width: 100%;
    border-radius: 6px;
    margin: 1rem 0;
}
.trip-body blockquote {
    border-left: 3px solid #bd5d38;
    padding-left: 1rem;
    color: #777;
    margin: 1.25rem 0;
}
.dark-theme .trip-body blockquote {
    color: #aaa;
}


/* Travel filter bar (year × region × purpose) */
.filter-bar {
    margin-bottom: 1rem;
}
.filter-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 6px;
}
.filter-label {
    min-width: 56px;
    font-size: 0.75rem;
    color: #888;
    font-family: "Fira Code", monospace;
}
.filter-row .filter-button {
    padding: 3px 10px;
    border: 1px solid #333333;
    border-radius: 10px;
    background-color: transparent;
    color: #333333;
    font-size: 0.83rem;
    cursor: pointer;
    transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}
.filter-row .filter-button:hover {
    background-color: rgba(194, 194, 194, 0.3);
}
.filter-row .filter-button.active {
    background-color: #bd5d38;
    border-color: #bd5d38;
    color: #ffffff;
}
.light-theme .filter-row .filter-button {
    border: 1px solid #333333;
    color: #333333;
}
.dark-theme .filter-row .filter-button {
    border: 1px solid #ffffff;
    color: #ffffff;
}
.light-theme .filter-row .filter-button.active,
.dark-theme .filter-row .filter-button.active {
    background-color: #bd5d38;
    border-color: #bd5d38;
    color: #ffffff;
}
.filter-empty {
    font-size: 0.88rem;
    color: #888;
    margin: 0.75rem 0 0 0;
}


/* Map selection bar (shown while one or more trips are isolated) */
.selection-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.6rem;
    padding: 0.45rem 0.7rem;
    border-left: 3px solid #bd5d38;
    background-color: rgba(189, 93, 56, 0.07);
    border-radius: 4px;
}
.selection-count {
    font-size: 0.83rem;
    color: #666;
    flex: 1;
    min-width: 180px;
}
.dark-theme .selection-count {
    color: #bbb;
}
.selection-clear {
    padding: 2px 10px;
    border: 1px solid #bd5d38;
    border-radius: 10px;
    background-color: transparent;
    color: #bd5d38;
    font-size: 0.78rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}
.selection-clear:hover {
    background-color: #bd5d38;
    color: #ffffff;
}


/* Paper figures: kept small and uniform regardless of the figure's aspect
   ratio, so a near-square one doesn't tower over a wide one. Click to enlarge. */
.paper-figure {
    display: block;
    max-width: 100%;
    max-height: 130px;
    width: auto;
    margin: 0 auto;          /* column handles vertical centring via align-self */
    object-fit: contain;
    cursor: zoom-in;
    opacity: 0.95;
    transition: opacity 0.2s;
}
.paper-figure:hover {
    opacity: 1;
}
/* Below Bootstrap's `sm` breakpoint the columns stack, so the figure gets the
   full content width instead of a narrow side column — let it fill that width
   at its natural height rather than staying a thumbnail. 575.98px matches
   Bootstrap exactly, so this never overlaps the side-by-side layout. */
@media (max-width: 575.98px) {
    .paper-figure {
        width: 100%;
        max-height: none;
        margin-bottom: 0.9rem;
    }
}


/* Equal-contribution note under a paper's author list */
.equal-contrib {
    font-size: 0.8rem;
    color: #888;
    font-style: italic;
}
.dark-theme .equal-contrib {
    color: #aaa;
}


/* Footer line */
.footer-sep {
    color: #aaa;
    margin: 0 0.35rem;
}
.footer-meta {
    display: flex;
    align-items: center;
    font-size: 0.82rem;
    margin: 0.15rem 0 0 0;
}
.footer-counter {
    height: 20px;
    width: auto;
    vertical-align: middle;
}


/* Event name + upcoming badge */
.entry-event {
    font-size: 0.85rem;
    font-weight: 600;
    color: #bd5d38;
    margin: 0 0 0.2rem 0;
}
.entry-upcoming {
    font-size: 0.7rem;
    padding: 1px 7px;
    border-radius: 10px;
    background-color: #2d7d6f;
    color: #ffffff;
    letter-spacing: 0.02em;
}
.trip-popup-event {
    font-size: 0.78rem;
    font-weight: 600;
    color: #bd5d38;
    margin-top: 0.1rem;
}


/* Chronological trip timeline */
.timeline-wrap {
    overflow-x: auto;
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
}
.timeline {
    display: flex;
    min-width: min-content;
    padding: 0.25rem 0 0.5rem 0;
}
.timeline-item {
    position: relative;
    flex: 0 0 118px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 6px;
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}
.timeline-item::before {
    content: '';
    position: absolute;
    top: 27px;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(128, 128, 128, 0.35);
    z-index: 0;
}
.timeline-item:first-child::before {
    left: 50%;
}
.timeline-item:last-child::before {
    right: 50%;
}
.timeline-date {
    font-size: 0.7rem;
    line-height: 14px;
    height: 14px;
    margin-bottom: 6px;
    color: #888;
    font-family: "Fira Code", monospace;
}
.timeline-dot {
    position: relative;
    z-index: 1;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #bd5d38;
    background: #ffffff;
    transition: transform 0.2s, background-color 0.2s;
}
.dark-theme .timeline-dot {
    background: #333333;
}
.timeline-item:hover .timeline-dot,
.timeline-item.active .timeline-dot {
    background: #bd5d38;
    transform: scale(1.4);
}
.timeline-title {
    margin-top: 8px;
    font-size: 0.72rem;
    line-height: 1.3;
    color: #777;
}
.dark-theme .timeline-title {
    color: #aaa;
}
.timeline-item:hover .timeline-title,
.timeline-item.active .timeline-title {
    color: #bd5d38;
}
.timeline-event {
    margin-top: 3px;
    font-size: 0.65rem;
    line-height: 1.25;
    color: #999;
}
.dark-theme .timeline-event {
    color: #888;
}
.timeline-item.upcoming .timeline-date {
    font-style: italic;
}
.timeline-item.upcoming .timeline-dot {
    border-color: #cf9a83;
}


/* Multi-stop route line under a trip entry */
.entry-route {
    font-size: 0.78rem;
    color: #999;
    margin: 0.35rem 0 0 0;
    line-height: 1.6;
}
.dark-theme .entry-route {
    color: #aaa;
}
.route-arrow {
    color: #bd5d38;
}
.trip-popup-stop {
    font-size: 0.7rem;
    color: #999;
    font-family: "Fira Code", monospace;
    margin-bottom: 0.2rem;
}


/* Trip itinerary on a trip page */
.trip-itinerary {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 1rem;
}
.dark-theme .trip-itinerary {
    color: #aaa;
}


/* Miscellaneous page */
.misc-group {
    margin-bottom: 2rem;
}
.misc-heading {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}
.misc-items {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.misc-items li {
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
    font-size: 0.92rem;
    line-height: 1.55;
}
.misc-items li:last-child {
    border-bottom: none;
}
.misc-note {
    color: #888;
    font-size: 0.85rem;
}
.dark-theme .misc-note {
    color: #aaa;
}


@media (max-width: 576px) {
    #travel-map {
        height: 320px;
    }
    .album-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .timeline-item {
        flex: 0 0 100px;
    }
}